/ --header-font-size: 3.125rem; --header-font-line-height: 3.75rem; / section titles

@import url('https://fonts.dilemmamanager.nl/SourceSansPro/stylesheet.css');
@import url('https://fonts.dilemmamanager.nl/TitilliumWeb/stylesheet.css');

:root {
    --header-font-family: 'Titillium Web';
    --main-font-family: 'Source Sans Pro';

    /* main colors */
    --white: #FFFFFF;
    --main-theme-color: #420030;
    --secondary-theme-color: #FFAA00;
    --tertiary-theme-color: #FFFFFF;
    --footer-background-color: #420030;

    --header-title-color: #FF9300;

    --dark-grey: #2D343B;
    --light-grey: #F7F7F7;
    --grey-background-color: #F8F5F3;
    --grey-background-color-alt: #D1D8DE;

    --text-color-warning: #E32B12;

    /* font related styling */
    --standard-text-color: #2D343B;

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 600;

    /* header title <h1> */
    --header-font-size: 3.125rem;
    --header-font-line-height: 3.75rem;

    /* section titles <h2> */
    --title-font-size: 2rem;
    --title-font-line-height: 2.625rem;

    /* <h3> */
    --subtitle-font-size: 1.5rem;
    --subtitle-font-line-height: 2rem;

    /* <h4> */
    --subsubtitle-font-size: 1.25rem;
    --subsubtitle-font-line-height: 1.75rem;

    /* medium font size, for example in the header element */
    --medium-font-size: 1.5rem;
    --medium-font-line-height: 2rem;

    /* regular text, <p> elements for example */
    --regular-font-size: 1.125rem;
    --regular-font-line-height: 1.75rem;

    /* for the small text */
    --small-font-size: 1rem;
    --small-font-line-height: 1.5rem;

    /* for the tiny text, for example footer */
    --tiny-font-size: 0.75rem;
    --tiny-font-line-height: 1.5rem;

    /* button font size */
    --button-font-size: 1rem;

    /* button based styling */
    --primary-button-color-text: #420030;
    --primary-button-color-background: #FF9300;
    --primary-button-color-border: #FF9300;
    --primary-button-color-text-hover: #420030;
    --primary-button-color-background-hover: #FF9300;
    --primary-button-color-border-hover: #FF9300;
    --primary-button-border-radius: 0.25rem;

    --secondary-button-color-text: #FFFFFF;
    --secondary-button-color-background: #792A69;
    --secondary-button-color-border: #792A69;
    --secondary-button-color-text-hover: #FFFFFF;
    --secondary-button-color-background-hover: #420030;
    --secondary-button-color-border-hover: #420030;
    
    /* hyperlink styling */
    --link-color: #1365E3;
    --link-color-visited: #1365E3;
    --link-color-hover: #1323C4;

    --header-background-gradient: linear-gradient(270deg, transparent 10%, rgba(0,0,0,0.8) 75%, rgb(0, 0, 0) 100%);

    --header-background-gradient: radial-gradient(at left bottom, #2D343B, #FFFFFF00);
    --header-background-mix-blend-mode: multiply;

    /* Might need revision */
    --footer-background-gradient: radial-gradient(85% 135% at left bottom, rgb(120, 72, 106) 1%, rgb(66, 0, 48) 80%);

    /* custom */
    --content-border-radius: 1.25rem;
    --content-border-radius-small: 0.5rem;
}

@media (max-width: 1024px){
    :root {
        --header-font-size: 2.5rem;
        --header-font-line-height: 3rem;

        --title-font-size: 1.5rem;
        --title-font-line-height: 2rem;

        --medium-font-size: 1.125rem;
        --medium-font-line-height: 1.875rem;

        --regular-font-size: 1rem;
        --regular-font-line-height: 1.8rem;
        --small-font-line-height: 1.6rem;      
        --small-font-size: 1rem;
        --tiny-font-size: 1rem;

        --button-font-size: 1rem;

        --header-background-gradient: linear-gradient(270deg, transparent 0%, rgba(0,0,0,0.8) 40%, rgb(0, 0, 0) 100%);
    }
}

body {
    font-family: var(--main-font-family), sans-serif;
    line-height: 1.5rem;
    color: var(--main-theme-color);

    font-weight: var(--font-weight-light);

}


/* probably temporary styling as these elements aren't necessary yet */
.footer {
    background: var(--footer-background-color);
    background: radial-gradient(circle, rgba(120,72,106,1) 1%, rgba(66,0,48,1) 80%);
    background: var(--footer-background-gradient);

}

.footer-content {
    font-size: var(--small-font-size);
    line-height: var(--small-font-line-height);
}

a.login {
    font-weight: var(--font-weight-medium);
    color: var(--main-theme-color);
}

.footer-content a.login {
    font-weight: var(--font-weight-light);
}

#logo {
    height: 1.8rem;
    vertical-align: bottom;
}

.logo-image img {
    height: 1rem;
}

@media screen and (min-width: 1024px) {
    .show-responsive {
        display: none !important;
    }
    
    .session-status {
        height: 3rem;
    }
}

@media screen and (max-width: 1024px) { 
    .hide-responsive {
        display: none !important;
    }

    .topbar {
        display: none;
    }
}

@media screen and (max-width: 1024px){
    .sz-navbar-hamburger:before { 
        content:' ';
        width: 1.5rem;
        height: 1.5rem;
        display: block;
        background-image: url('../images/Menu_Theme.svg');
        background-repeat: no-repeat;
        background-size: cover;
    }

    .navbar #sz-navbar-check:checked ~ .sz-navbar-hamburger::before {
        content: ' ';
        background-image: url('../images/Sluiten.svg')
    }
}


#cookie-notification {
    position: fixed;
    bottom: 0;
    width: calc(100% - 2rem);
    padding: 0.5rem 1rem;
    background-color: var(--white);
    box-shadow: 0px -0.0625rem 3px rgba(23,33,43,25%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.cookie-notification-text {
    margin-right: 0.5rem;
    color: var(--standard-text-color);
}

@media screen and (max-width: 1024px) {
    #cookie-notification {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .cookie-notification-text {
        flex-grow: 1;
    }
}

.combobox,
.textfield,
.datefield,
textarea {
    font-family: inherit;
    color: var(--dark-grey);
    box-sizing: border-box;
    border-color: #EAE8E2;
    padding: 0.75rem;
    width: 100%;
    font-weight: var(--font-weight-light);
}

button,
.button {
    font-family: 'Source Sans Pro';
    font-weight: var(--font-weight-medium);
    padding: 0.75rem 1rem;
    background-color: var(--primary-button-color-background);
    border: 1px solid var(--primary-button-color-border);
    color: var(--primary-button-color-text);
    border-radius: var(--primary-button-border-radius);
    width: max-content;
}

button:hover {
    background-color: var(--primary-button-color-background-hover);
    border: 1px solid var(--primary-button-color-border-hover);
    color: var(--primary-button-color-text-hover);
}

button:after,
.button:after {
    content: '';
    background-image: url("../images/button-arrow-right.svg");
    width: 2rem;
    height: 1rem;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.button.secondary-button:after {
    background-image: url("../images/button-arrow-right-white.svg");
}

h1 {
    font-family: var(--header-font-family), sans-serif;
    color: var(--main-theme-color);
    font-size: var(--header-font-size);
    margin-bottom: 1.5rem;
    /*font-weight: var(--font-weight-medium);*/
    line-height: var(--header-font-line-height);
}

.text-blue {
    color: #17A3B0;
    font-weight: var(--font-weight-medium);
}

h2 {
    font-family: var(--header-font-family), sans-serif;
    color: var(--main-theme-color);
    font-size: var(--title-font-size);
    line-height: var(--title-font-line-height);
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: var(--font-weight-light);
}

h3 {
    font-family: var(--header-font-family), sans-serif;
    color: var(--main-theme-color);
    font-size: var(--subtitle-font-size);
    margin-bottom: 1.5rem;
    /*font-weight: var(--font-weight-medium);*/
    line-height: var(--subtitle-font-line-height);
}

h4 {
    font-family: var(--header-font-family), sans-serif;
    color: var(--main-theme-color);
    font-size: var(--subsubtitle-font-size);
    margin-bottom: 1.25rem;
    /*font-weight: var(--font-weight-medium);*/
    line-height: var(--subsubtitle-font-line-height);
}

.align-text-middle {
    text-align: center;
}

b,
.bold {
    font-weight: var(--font-weight-medium);
}

p {
    color: var(--standard-text-color);
    font-size: var(--regular-font-size);
    line-height: var(--regular-font-line-height);
    font-weight: var(--font-weight-light);    
}

p > a {
    color: var(--secondary-theme-color);
}

p > a:visited {
    color: var(--secondary-theme-color);
}

textarea {
    resize: none;
}

input {
    width: 1rem;
    height: 1rem;
}

.button-send,
.button-forward,
.button-shoppingcart-make-payment,
.button-confirm-submit,
.button-send-invite,
.button-send-reminder,
.button-send-resume,
.button-download-invoice,
.button-download-report,
.button-ask-permission {
    background-color: var(--primary-button-color-background);
    border: 1px solid var(--primary-button-color-border);
    color: var(--primary-button-color-text);
}

.button-send:hover,
.button-forward:hover,
.button-shoppingcart-make-payment:hover,
.button-confirm-submit:hover,
.button-send-invite:hover,
.button-send-reminder:hover,
.button-send-resume:hover,
.button-download-invoice:hover,
.button-download-report:hover,
.button-ask-permission:hover {
    background-color: var(--primary-button-color-background-hover);
    border: 1px solid var(--primary-button-color-border-hover);
    color: var(--primary-button-color-text-hover);
}

.button-shoppingcart-delete-product,
.button-cancel-purchase,
button.buttonm.button-shoppingcart-delete-product,
.button-cancel,
.button-back,
.button-shoppingcart-delete-product,
.button-cancel-purchase {
    font-size: var(--regular-font-size);
    font-weight: var(--font-weight-medium);
    color: var(--text-color-warning);
    border: none;
    background: transparent;
    text-decoration: underline;
    text-decoration-color:  var(--text-color-warning);
}

.button-shoppingcart-delete-product:hover,
.button-cancel-purchase:hover {
    border-width: 0;
    background-color: transparent;
    color: var(--text-color-warning);
}

.button-cancel-purchase {
    display: none;
}

.button-confirm-purchase {
    background-color: var(--primary-button-color-background);
    border: 1px solid var(--primary-button-color-border);
    color: var(--primary-button-color-text);
}

/* change order button should not be primary */
.confirm-purchase-buttons .button-confirm-purchase,
.button-cancel-send-invite {
    background-color: var(--secondary-button-color-background);
    border: 1px solid var(--secondary-button-color-border);
    color: var(--secondary-button-color-text);
    text-decoration: none;
}

.confirm-purchase-buttons .button-confirm-purchase:hover,
.button-cancel-send-invite:hover {
    background-color: var(--secondary-button-color-background-hover);
    border: 1px solid var(--secondary-button-color-border-hover);
    color: var(--secondary-button-color-text-hover);
}

button.button.buttonl.button-confirm-webshop-confirm-sumbit.button-forward,
button.buttonm.button-shoppingcart-make-payment {
}

button.button.buttonl.button-confirm-webshop-confirm-sumbit.button-forward:hover,
button.buttonm.button-shoppingcart-make-payment:hover {
}

.button-shoppingcart-continue-shopping,
.button-cancel-payment,
.button-back-to-cart,
.button-expired-back {
    background-color: var(--secondary-button-color-background);
    border: 1px solid var(--secondary-button-color-border);
    color: var(--secondary-button-color-text);
}

.button-shoppingcart-continue-shopping:hover,
.button-cancel-payment:hover,
.button-back-to-cart:hover,
.button-expired-back:hover  {
    background-color: var(--secondary-button-color-background-hover);
    border: 1px solid var(--secondary-button-color-border-hover);
    color: var(--secondary-button-color-text-hover);
}

.button-add-to-cart,
.button-paycredits,
.button-paylater,
.button-payment-success {
    background-color: var(--primary-button-color-background);
    border: 1px solid var(--primary-button-color-border);
    color: var(--primary-button-color-text);
}

.button-add-to-cart:hover,
.button-paycredits:hover,
.button-paylater:hover,
.button-payment-success:hover {
    background-color: var(--primary-button-color-background-hover);
    border: 1px solid var(--primary-button-color-border-hover);
    color: var(--primary-button-color-text-hover);
}

.headerbar {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.headerbar .topbar {
    display: none;
}

.headerbar .shoppingcart {
    background-image: url("../images/shopping-cart.svg");
    background-size: cover;
    height: 1.5rem;
    width: 1.5rem;
    background-color: transparent;
    position: relative;
    padding: 0;
    border-radius: 0;
}

.footer-content {
    position: relative;
    max-width: 77rem;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
    padding-top: 3.5rem;
}

.footer .social-media-footer .copyright p {
    color: var(--white);
    font-size: var(--regular-font-size);
    line-height: var(--regular-font-line-height);
}

.footer .social-media-footer .flex-grow {
    display: none;
}

.logo-footer .logo-image img {
    display: none;
}

.logo-footer .logo-image {
    background-image: url("../images/WaardeMeter_White.svg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 12rem;
    height: 3.5rem;

    display: flex;
    flex-direction: row;
    align-items: flex-end;
}

a.social-media-link {
    display: none;
}

.social-media-footer a.social-media-link > img {
    filter: brightness(0) saturate(100%) invert(95%) sepia(0%) saturate(7492%) hue-rotate(125deg) brightness(109%) contrast(100%);
    height: 1.5rem;
}

a.social-media-link:nth-child(1) {
    display: unset;
}

.footer-block-title {
    display: none;
}

.footer-block ul {
    padding-left: 0;
}

.sitemap > li > a {
    font-weight: var(--font-weight-medium);
}

.footer-block > .contactdetails,
.footer-block > .sitemap {
    display: flex;
    flex-direction: column;
}

.footer-block > .contactdetails > li:nth-child(6) {
    order: 1;
}

.footer-block > .contactdetails > li:nth-child(1) {
    font-weight: var(--font-weight-medium);
}

@media (min-width: 1024px) {
    .footer-block.logo-footer {
        flex-grow: 1;
    }

    .footer-block.logo-footer .logo-image {
        margin-left: auto;
    }

    .footer-block.sitemap-footer {
        width: 16rem;
        justify-content: flex-start;
    }

    .footer .social-media-footer .social-media {
        position: absolute;
        bottom: 2.5rem;
        left: 17rem;
    }
    
    .footer .social-media-footer .copyright {
        position: absolute;
        bottom: 2.85rem;
        right: 1.5rem;
    }

    .footer-content {
        padding-bottom: 6rem;
    }
    
}

@media (max-width: 1024px) {
    .logo-footer .logo-image {
        height: 5.5rem;
    }

    .logo-image {
      margin-right: auto;
      margin-left: unset;
    }

    .footer-block.logo-footer {
        order: 1;
    }

    .footer-block.social-media-footer {
        margin: unset;
    }

    .copyright {
        position: absolute;
        bottom: 1rem;
    }

    .copyright p {
        text-align: left;
    }

    .footer-block.logo-footer {
        margin: unset;
    }
  }

.logo-footer {
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.module-login,
.module-error,
.login-error {
    max-width: 77rem;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 1024px) {
    .module-login {
      padding: 0.5rem;
    }
}

.module-error,
.login-error {
    display: flex;
    flex-direction: row;
    padding: 1rem 0;
    background-color: #FFFFFF50;
    margin-top: 1rem;
    border-radius: 0.250rem;
}

.module-login.login-error br {
    display: block;
}

.module-error span,
.login-error span {
    display: inline-block;
    margin-left: 1rem;
    color: #cc2e17 !important;
}

.homepage.article-default {
    padding: 0;
    overflow-x: hidden;
}

/* login thing loaded through the confirm webshop page looks a bit squished, this should fix it. */
.content-webshop-confirm .module-login {
    max-width: unset;
    margin-left: unset;
    margin-right: unset;
}

.content-webshop-confirm .module-login .page-title-login {
    display: none;
}
.headerbar {
    background-color: white;
    transition:background-color 0.5s ease;
}

.headerbar a {
    color: var(--dark-grey);
}

.menu a {
    font-weight: var(--font-weight-medium);
}

.login-name {
	font-weight: var(--font-weight-medium);
}

#loginstatus {
    color: var(--dark-grey);
}

#loginstatus > span {
    margin-left: 3rem;
}

#loginstatus .credits .credits-amount {
    margin-left: 0.1rem;
}

#loginstatus .shoppingcart,
.responsive-shopping-cart .shoppingcart {
    display: none;
}

ul.submenu {
    white-space: nowrap;
}

ul.submenu li.selected,
ul.submenu li:hover {
    background-color: var(--grey-background-color);
}

@media (min-width: 1024px){
    /* Fix submenu not being too low */
	ul.submenu {
		top: 1.5rem;
	}
}

.footer-block-title {
    color: white ;
    font-weight: var(--font-weight-medium);
}

.footer-block,
.footer-block a {
    color: white;
}


.footer-block .contactdetails li {
    text-transform: initial;
}

@media (max-width: 1024px) {
    .footer li {
        margin-top: 0.5rem;
    }

    ul.contactdetails {
        margin-top: 0.5rem;
    }

    .footer-block + .footer-block {
        margin-top: 2rem;
    }

    .menu-wrapper {
        top: 5rem;
        background-color: var(--grey-background-color);
    }
}

#existinguser a.forgotpassword {
	position:relative;
	left: 6rem;
	top: -3.2rem;
}

ul.menu.responsive-my-account {
    display: none;
}

.responsive-my-account a {
    color: #1A3065;
}

.topbar {
    background-color: var(--tertiary-theme-color);
    transition:background-color 0.5s ease;
}

#existinguser,
#newuser {
	border-radius: 0.250rem;
	font-weight: var(--font-weight-medium);
    color: var(--dark-grey);
}

#existinguser > form, 
#newuser > form {
    padding: 0rem;
}

.titleexistinguser, 
.titlenewuser {
    padding: 1.5rem 0rem 0.5rem 0rem;
}

@media screen and (max-width: 1024px){
    .titleexistinguser, .titlenewuser, .page-content, #existinguser > form, #newuser > form {
        padding: 0.5rem 0;
    }

    #existinguser a.forgotpassword {
        left: unset;
        top: unset;
    }

    .logo-footer:after {
        margin-left: unset;
        margin-right: auto;
        margin-top: 0.5rem;
    }
}

/* fix to remove the space above the checkbox */
#newuser > form:nth-child(2) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(21) {
    display: none;
}

#existinguser a,
#newuser a,
.td-newuser-termsconditions {
    font-weight: var(--font-weight-light);
}

#newuser > form tr:first-child {
	display: none;
}

.td-newuser-header b {
    font-size: var(--medium-font-size);
    line-height: var(--medium-font-line-height);
}

/* this piece of css puts the tr with the register button at the very end of the container */
#newuser form table tbody {
    display: flex;
    flex-direction: column;
}

#newuser > form > table > tbody > tr:nth-child(20){
    order: 1;
}
/* end of hacky css */

.module-login,
.module-login a {
	color: var(--dark-grey);
}

.module-login button {
	padding: 0.75rem 1.5rem;
	color: var(--white);
}

.module-login label {
    font-weight: var(--font-weight-medium);
}

.module-login.content-article h1 {
    color: var(--white);
    font-size: var(--title-font-size);
    line-height: var(--title-font-line-height);
    margin: 1.5rem 0;
}

.td-existinguser-label {
	width: auto !important;
}

.dark-grey-border {
    border-right: 0.0625rem #2D343B30 solid;
}

.red-background {
    background-color: #CC2E17;
}

.orange-background {
    background-color: #FF9D1B;
}

.orange-background:hover {
    background-color: #FC910D;
}

.border-radius {
    border-radius: 0.250rem;
}

button {
    border: none;
}

/* ensure some padding is created so the fixed headerbar doesnt hide content */
.container {
    padding-top: 6.25rem;
}

@media screen and (max-width: 1024px){
    .container {
        padding-top: 5rem;
    }

    .module-login.content-article h1 {
        color: var(--dark-grey);
    }

    h1.page-title-login {
        display: none;
    }
}

/* contact page CSS */
@media screen and (max-width: 1024px) {
    .contact-table > tbody:nth-child(1) > tr {
        display: flex;
        flex-direction: column;
    }
}

/* Reusable elements */
.full-width-container {
    width: 100%;

    display: flex;
    flex-direction: row;

    position: relative;
}

.limited-width-block-centered {
    margin-left: auto;
    margin-right: auto;
    padding: 3rem 1.5rem;
    max-width: 73rem;
    display: flex;
    flex-direction: row;
    width: calc(100% - 3rem);
    justify-content: space-between;
    z-index: 1;
}

.full-width-container.column {
    flex-direction: column;
    align-items: center;
}

.limited-width-block-centered.extra-padding {
    padding: 3rem;
    max-width: 74rem;
}

.white-background {
    background-color: white;
}

.half-width-block {
    width: 50%;    
}

@media screen and (min-width: 1024px) {
    .shared-width-block {
        width: calc(50% - 2rem);
    }
}

@media screen and (max-width: 1024px) {
    .shared-width-block {
        margin-top: 1rem;
    }
}

.flexible-width-block {
    flex-grow: 1;
}

.centered-content {
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
}

@media (min-width: 1024px){
    .centered-content {
        width: calc(100% - 3rem);
        max-width: 60rem;
        padding: 1.5rem;
        margin-left: auto;
        margin-right: auto;
    }

    .full-banner .half-width-block {
        width: 42%;
    }

    .widget-contact .full-banner .half-width-block {
        width: 44rem;
    }

    .widget-contact .full-banner .limited-width-block-centered .flexible-width-block {
        margin-top: unset;
    } 
}

@media (max-width: 1024px){
    .widget-contact .full-banner .limited-width-block-centered .flexible-width-block {
        margin-top: -2rem;
    }    
}

/* End reusable elements */

/* Homepage */
.home-banner {
    padding: 7rem 0;
    position: relative;
    z-index: -1;

    background-repeat: no-repeat;
    background-size: cover;
}

.home-banner h1 {
    margin-bottom: 0.5rem;
}

.full-width-container.home-intro .text-block {
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.full-banner.about {
    background-image: url("../images/safety-monitor-banner-image-about.png");
}

.full-banner,
.full-width-container.image-background {
    background-color:var(--white);
}

.full-banner:after,
.full-width-container.image-background:after {
    content: '';
    position: absolute;

    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 0;
    background: url("../images/homepage-header.jpg");
    background:  url("../images/homepage-header.jpg"), var(--header-background-gradient);
    background-blend-mode: var(--header-background-mix-blend-mode);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* Different banners */
@media (max-width: 1366px) {
    .full-banner.training-banner:after {
        background: url("../images/training_banner_thin.jpg");
        background:  url("../images/training_banner_thin.jpg"), var(--header-background-gradient);
        background-repeat: no-repeat;
        background-size: cover;
        background-position-x: center;
        background-position-y: top;
    }
}

.full-banner.training-banner:after {
    background: url("../images/training_banner_wide.jpg");
    background:  url("../images/training_banner_wide.jpg"), var(--header-background-gradient);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: center;
    background-position-y: top;
}

.full-banner.training-banner.masterclass-banner:after {
    background: url("../images/masterclass-banner.jpg");
    background: url("../images/masterclass-banner.jpg"), var(--header-background-gradient);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: center;
    background-position-y: top;
}

.training-banner .text-block {
    padding: 6.5rem 0 5.5rem 0;
}

@media (max-width: 1024px){
    .training-banner .text-block {
        padding: 2.5rem 0 0.5rem 0;
    }
}

.full-banner.over-ons-banner:after {
    content: unset;
}

.full-banner.over-ons-banner {
    background-image: url("../images/about-us-background.jpg");
    background-size: cover;
    background-position: center top;
}

/* Training pages */
h1 .descriptor {
    font-size: 2.5rem;
}

h1 .training-title {
    font-weight: var(--font-weight-medium);
}

.training-information .limited-width-block-centered {
    padding: 0;
    gap: 3rem;
}

@media (max-width: 1024px) {
    h1 .descriptor {
        font-size: 1.5rem;
    }

    .training-results {
        position: relative;
    }

    .training-results:after {
        content: '';
        position: absolute;
        width: calc(100% + 2rem);
        height: calc(100% + 1.5rem);
        left: -1rem;
        top: -1.5rem;
        background-color: var(--grey-background-color);
        z-index: -1;
    }
}

@media (min-width: 1024px) {
    .full-width-container.training-information {
        position: relative;
    }

    .full-width-container.training-information:after {
        content: '';
        position: absolute;
        right: 0;
        height: 100%;
        width: 30%;
        background-color: var(--grey-background-color);
    }

    .training-summary {
        padding-top: 3rem;
        padding-bottom: 2.5rem;
        background-color: var(--white);
    }

    .training-summary {
        width: calc(60% - 2rem);
        padding-right: 2rem;
    }
    
    .training-results {
        width: 40%;
    }
}

.training-properties > ul > li {
    margin: 0.75rem 0;
    color: var(--standard-text-color);
    position: relative;
    left: 2.5rem;
    width: calc(100% - 2.5rem);
}

.training-properties > ul > li > img {
    width: 1.75rem;
    height: 1.75rem;
    position: absolute;
    left: -2.5rem;
    top: 50%;
    transform: translateY(-50%);
}

.training-text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2.5rem;
}

.training-text h3,
.training-text p {
    font-family: var(--main-font-family);
}

.training-text h3 {
    font-size: var(--subsubtitle-font-size);
    line-height: var(--subsubtitle-font-line-height);
    font-weight: var(--font-weight-medium);
    margin-bottom: unset;
}

.training-text p {
    /*font-weight: var(--font-weight-regular);*/
}
/* End training pages */

/*
@media (min-width: 1680px){
    .full-banner:after,
    .full-width-container.image-background:after {

        background: url("../images/homepage-header-large.png");
        background:  url("../images/homepage-header-large.png"), var(--header-background-gradient);
    }
}
*/
.full-banner:before {
    /*content: '';*/
    position: absolute;

    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    z-index: -1;

}

.full-banner .limited-width-block-centered {
    position: relative;
    z-index: 1;
    padding-top: 0;
}

.full-banner p {
    color: var(--white)
}

.full-banner h1 {
    color: var(--header-title-color);    
}

.full-banner h1 {
    font-weight: var(--font-weight-light);
}

.full-banner p {
    font-size: var(--medium-font-size);
    line-height: var(--medium-font-line-height);
    font-weight: var(--font-weight-light);
}

.full-banner span.highlight {
    display: inline;
    padding-left: 1rem;
    padding-right: 1rem;
    background: var(--dark-grey);
    color: var(--white);
    line-height: 5rem;
}

.banner-image {
    width: 100%;
}

.banner-image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    top: 3rem;
    left: 1rem;
    opacity: 95%;
}

@media screen and (min-width: 1024px) {
    .banner-image img {
        left: 7rem;
    }
}

@media screen and (max-width: 1024px) {
    .widget-contact h2 {
        font-size: 2.5rem;
        line-height: 3rem;
    }

    .widget-contact .banner-image img {
        top: 2rem;
    }

    .widget-contact > .full-width-container {
        margin-bottom: 1rem;
    }

    .widget-contact .widget-form {
        margin-bottom: 2rem;
    }
}

.full-width-container.alternative-colors {
    text-align: center;
    background-color: var(--dark-grey);
}

.full-width-container.alternative-colors p {
    color: var(--white);
    font-size: 1.125rem;
    line-height: 1.625rem;
}

.full-width-container.alternative-colors .text-block {
    margin-left: auto;
    margin-right: auto;
}

.linen-background {
    background-color: var(--grey-background-color);
}

.linen-background.themes {
    background-color: unset;
}

.theme-offers {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem 0 2rem 0;
}

.theme-offers > .limited-width-block-centered {
    max-width: 82rem;
}

.theme-offers .limited-width-block-centered {
    gap: 3rem;
    justify-content: space-evenly;
}

.theme-offers > .text-block > h2 {
    font-size: 2rem;
}

.theme-offer-column {
    border: var(--secondary-theme-color) 1px solid;
    border-radius: var(--content-border-radius);
    display: flex;
    flex-direction: column;
}

.theme-offer-column > .theme-offer-header {
    border-top-left-radius: var(--content-border-radius);
    border-top-right-radius: var(--content-border-radius);
    background: var(--footer-background-gradient);
    padding: 2rem 1rem 1rem 1rem;
}

.theme-offer-header {
    text-align: center;
}

.theme-offer-header h3 {
    color: var(--primary-button-color-background);
}

.theme-offer-header h4 {
    color: var(--white);
    font-size: var(--regular-font-size);
    line-height: var(--regular-font-line-height);
    font-family: var(--main-font-family);
    font-weight: var(--font-weight-medium);
}

.theme-offer-body {
    padding: 1.5rem 2rem;
    background-color: var(--white);
    display: flex;
    border-bottom-left-radius: var(--content-border-radius);
    border-bottom-right-radius: var(--content-border-radius);
    flex-direction: column;
    gap: 1rem;
    flex-grow: 1;
}

.theme-offer-body p {
    font-size: var(--small-font-size);
    line-height: var(--small-font-line-height);
}

.theme-offer-body > .theme-body-text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.theme-main-bullet-points {
    flex-grow: 1;
}

.theme-main-bullet-points > h5 {
    color: var(--secondary-button-color-background);
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.5rem;
}

.theme-main-bullet-points > ul {
    list-style-type: disc;
    margin-left: 1rem;
    margin-bottom: 0.5rem;
    color: var(--standard-text-color);
}

.theme-main-bullet-points > ul > li {
    padding-left: 0.5rem;
}

.theme-checkmark-bullet-points > ul {
    position: relative;
    padding-left: 2.5rem;
    color: var(--main-theme-color);
    font-weight: var(--font-weight-medium);
}

.theme-checkmark-bullet-points > ul > li {
    margin-bottom: 1.5rem;
    position: relative;
}

.theme-checkmark-bullet-points > ul > li:before {
    content: '';
    border: 0.125rem solid var(--primary-button-color-background);
    width: 0.75rem;
    height: 1.5rem;
    display: block;
    position: absolute;
    left: -2rem;
    top: -0.5rem;
    transform: rotate(45deg);
    border-top-color: transparent;
    border-left-color: transparent;
}

.theme-checkmark-bullet-points > ul > li > ul {
    padding-left: 1rem;
    color: var(--standard-text-color);
    font-weight: var(--font-weight-light);
}

.theme-checkmark-bullet-points > ul > li > ul > li {
    position: relative;
    margin-bottom: 0.5rem;
}

.theme-checkmark-bullet-points > ul > li > ul > li:before {
    content: '-';
    font-weight: var(--font-weight-medium);
    position: absolute;
    top: 0;
    left: -1rem;
}

.tile-grid {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    justify-content: space-between;
    align-items: center;
}

.tile-text p {
    font-weight: var(--font-weight-medium);
    color: var(--main-theme-color);
    text-align: center;
    font-size: var(--subsubtitle-font-size);
    line-height: var(--subsubtitle-font-line-height);
}

.tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    width: 13rem;
}

@media (max-width: 1024px) {
    .offer-column h2 {
        font-size: 2rem;
        line-height: 2.5rem;
    }
}

@media (min-width: 1024px){
    .theme-checkmark-bullet-points > ul > li > ul {
        height: 12rem;
    }

    .theme-checkmark-bullet-points > ul > li,
    .theme-checkmark-bullet-points > ul > li > div {
        min-height: 3.5rem;
    }

    .theme-offer-column {
        width: calc(33% - 3rem);
    }

    .theme-offer-body > .theme-body-text {
        min-height: 22rem;
    }
}

@media (max-width: 1024px){
    .tile-grid {
        flex-direction: column;
    }
}

.block-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2.5rem;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    justify-content: space-evenly;
}

.block-grid .block {
    flex-basis: calc(33% - 2.5rem);

    display: flex;
    flex-direction: row;
    gap: 1.25rem;
    font-weight: var(--font-weight-light);
    color: var(--standard-text-color);
}

.block-grid .block .block-text-title {
    font-weight: var(--font-weight-medium);
    font-size: var(--medium-font-size);
    color: var(--standard-text-color);
    display: none;
}

.block-grid .block .icon img {
    height: 2rem;
    width: 2rem;  
}

.flexible-tiles {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    
    gap: 1.75rem;
    width: 100%;
}

.flexible-tile {
    position: relative;

    height: 15rem;
    flex-basis: calc(33% - 1.75rem);

    display: flex;
    justify-content: center;
    align-items: center;

    text-decoration: none;

    overflow: hidden;
    
    flex-direction: column;

    border-radius: var(--content-border-radius);
}

.flexible-tile:hover {
    box-shadow: 00000029 0px 0px 20px;
}

.flexible-tile .flexible-tile-background-image {
    transition: all 0.3s;
}

.flexible-tile:hover .flexible-tile-background-image {
    scale: 1.2;
} 

.flexible-tile h4 {
    color: var(--primary-button-color-background);
    width: 80%;
    text-align: center;
    font-weight: var(--font-weight-regular);
    font-size: var(--subtitle-font-size);
}

.flexible-tile h5 {
    color: var(--white);
    width: 80%;
    text-align: center;
    font-size: var(--subsubtitle-font-size);
}

.flexible-tile-background-image {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;

    background-repeat: no-repeat;
    background-size: cover;
    /*
    background-color: #42003096;
    background-blend-mode: soft-light;
    */ 
    background-position: center;
}

.flexible-tile-background-image:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    pointer-events: none;
    background-color: #420030;
    opacity: 0.8;
}

.flexible-tile-background-image.option-1 {
    background-image: url("../images/option1.jpg");
}

.flexible-tile-background-image.option-2 {
    background-image: url("../images/option2.jpg");
}

.flexible-tile-background-image.option-3 {
    background-image: url("../images/option3.jpg");
}

/* For a special version of the tile 
.flexible-tile-background-image.option-3 {
    background-color: var(--secondary-theme-color);
    background-image: url("../images/Background pattern square.svg");
    background-blend-mode: multiply;
}*/

.button {
    padding: 0.875rem 1.125rem;
    display: inline-block;
    margin-top: 1rem;
    cursor: pointer;

    display: flex;
    align-items: center;
    width: fit-content;

    font-size: inherit;

    gap: 0.5rem;
}

.assessment-details .button,
.module-purchase .button {
    margin-top: 0;
}

.button img {
    margin-left: 0.5rem;
}

.primary-button {
    color: var(--primary-button-color-text);
    background-color: var(--primary-button-color-background);
    border: 1px solid var(--primary-button-color-border);
}

.primary-button:hover {
    color: var(--primary-button-color-text-hover);
    background-color: var(--primary-button-color-background-hover);
    border-color: var(--primary-button-color-border-hover);
}

.secondary-button {
    color: var(--secondary-button-color-text);
    background-color: var(--secondary-button-color-background);
    border: 1px solid var(--secondary-button-color-border);
}

.secondary-button:hover {
    color: var(--secondary-button-color-text-hover);
    background-color: var(--secondary-button-color-background-hover);
    border-color: var(--secondary-button-color-border-hover);
}

.left-pointing-image-arrow,
.right-pointing-image-arrow {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem;
    padding-right: 0;

    position: relative;
}

.right-pointing-image-arrow .arrow-popout-image {
    position: absolute;

    z-index: 1;
    background-image: url("../images/assessments_laptop_graphic.png");
    background-size: contain;
    background-repeat: no-repeat;

    height: 41%;
    width: 100%;
    left: -1rem;
    bottom: 7rem;

}

.laptops-image {
    background-image: url("../images/IndicatieMeter_Home_Mockup.png");
    background-size: contain;
    background-repeat: no-repeat;

    height: 100%;
    width: 100%;
}

.sitting-woman-image {
    background-image: url("../images/IndicatieMeter_Home_WomanSitting.png");
    background-size: contain;
    background-repeat: no-repeat;

    height: 100%;
    width: 100%;

    background-position: right;
}

@media (min-width: 1024px) {
    .innovation-segment .half-width-block {
        margin-top: 7.5rem;
    }

    .centered-content h2 {
        text-align: center;
    }

    .sitting-woman-image {
        /* for now temp styling to get her in the right place */
        height: 250%;
        position: relative;
        bottom: 79px;
    }
}

@media (max-width: 1024px) {
    .laptops-image {
        height: 16rem;
        background-position: center;
    }

    .sitting-woman-image {
        margin-bottom: -5.3rem;
        height: 15rem;
    }
}

.left-pointing-image-arrow .image-arrow {
    height: 80%;
    max-height: 24rem;
    clip-path: polygon(33% 0, 100% 0%, 100% 100%, 33% 100%, 0% 50%);
    z-index: 1;
    position: relative;
    background-image: url("../images/intro_image.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.right-pointing-image-arrow .image-arrow {
    height: 80%;
    max-height: 24rem;
    clip-path: polygon(0% 0%, 67% 0, 100% 50%, 67% 100%, 0% 100%);
}

.image-arrow {
    position: relative;
    background-color: darkblue;
}

.right-pointing-image-arrow .image-arrow {
    background-color: var(--grey-background-color-alt);
}

.left-pointing-image-arrow:after {
    content: '';
    height: calc(80% - 2.5rem);
    width: 100%;
    max-height: 24rem;
    background-image: url("../images/Background pattern.svg");
    top: 55%;
    left: 25%;
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    z-index:0;

}

.innovation-segment .flexible-width-block {
    padding-right: 5rem;
}

.innovation-segment .limited-width-block-centered {
    padding-left: 0;
    padding-right: 0;
    max-width: 76rem;
}

.veiligheidsgedrag {
    position: relative;
    padding: 2rem 0;
}

.veiligheidsgedrag .limited-width-block-centered {
    position: relative;
    z-index: 2;

    gap: 4rem;
}

.swappable-element p,
.swappable-element h2 {
    color: var(--white);
    text-align: left;
}

@media (max-width: 1024px) {
    .full-banner span.highlight {
        line-height: 3.5rem;
    }

    .full-banner .text-block p {
        margin-bottom: 2rem;
    }

    .full-banner p {
        font-size: var(--subtitle-font-size);
        line-height: var(--subtitle-font-line-height);
    }

    .home-banner {
        padding: 1rem 0 1rem 0;
        margin-bottom: 0;
        background-position: center;
    }

    .half-width-block {
        width: unset;
    }

    #logo {
        vertical-align: bottom;
        height: 1.8rem;
        padding-bottom: unset;
    }

    .limited-width-block-centered.extra-padding {
        padding: 1rem;
    }

    .limited-width-block-centered {
        width: calc(100% - 2rem);
        padding: 1rem;
    }

    .button {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        padding: 1rem 1.25rem;
    }

    .flexible-width-block.left-pointing-image-arrow {
        order: -1;
        height: 20rem;
        margin-bottom: 1rem;
    }

    .full-width-container,
    .limited-width-block-centered {
        flex-direction: column;
    }

    .right-pointing-image-arrow {
        height: 15rem;
    }

    .right-pointing-image-arrow .image-arrow {
        position: relative;
        left: 0rem;
        width: 100%;
        max-width: 20rem;
    }

    .innovation-segment .flexible-width-block {
        padding-right: 2rem;
    }

    .left-pointing-image-arrow, .right-pointing-image-arrow {
        padding: unset;
    }

    .right-pointing-image-arrow .arrow-popout-image {
        height: 54%;
        width: 100%;
        left: -1rem;
        bottom: 4rem;
    }

    .button img {
        height: 2rem;
    }

    .block-grid {
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 1rem;
    }

    .block-grid .block {
        justify-content: space-between;
    }
    
    .block-grid .icon {
        width: 0;
    }

    .block-grid .block-text {
        width: calc(100% - 3.5rem);
    }

    .block-grid .icon > img {
        height: 1.5rem;
    }

    .flexible-tiles {
        flex-direction: column;
    }

    .flexible-tile {
        flex-basis: unset;
    }
}

.introduction-segment .half-width-block {
    z-index: 1;
}

/* homepage -> veiligheidsgedrag element */

.dimension-element {
    background-color: white;
    width: 15rem;
    border-radius: var(--content-border-radius-small);
}

.dimension-name {
    font-size: var(--small-font-size);
    line-height: var(--small-font-line-height);
    font-weight: var(--font-weight-regular);
    font-family: var(--header-font-family);
}

.dimension-title {
    background-color: var(--primary-button-color-background);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem;
    font-weight: var(--font-weight-medium);
    height: calc(2.5rem - 0.5rem);
    color: var(--main-theme-color);
    border-top-left-radius: var(--content-border-radius-small);
    border-top-right-radius: var(--content-border-radius-small);
}

.dimension-description {
    padding: 0.25rem 0.75rem;
    height: calc(3.75rem - 0.5rem);
    font-size: var(--small-font-size);
    line-height: var(--small-font-line-height);
    color: var(--main-theme-color);
}

.veiligheidsgedrag-infographic {
    display: flex;
    flex-direction: column;
}

.infographic-row {
    display: flex;
    flex-direction: row;
}

.infographic-row-top {
    align-items: flex-start;
}

.infographic-row-middle {
    align-items: center;
}

.infographic-row-bottom {
    align-items: flex-end;
}

.line-segment .line-element {
    margin: 0.75rem;
}

.line-segment,
.middle-middle-segment {
    flex-grow: 1;
}

.line-segment {
    height: 10rem;
}

.line-element {
    border-color: white;
    border-width: 2px;
    width: 50%;
    height: 60%;
}

.line-segment {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
}

.line-segment.top-right-segment,
.line-segment.bottom-right-segment {
    justify-content: flex-start;
}

.line-segment.top-left-segment,
.line-segment.bottom-left-segment {
    justify-content: flex-end;
}   

.line-segment.top-right-segment,
.line-segment.top-left-segment {
    align-items: flex-end;
}

.line-segment.bottom-right-segment,
.line-segment.bottom-left-segment {
    align-items: flex-start;
}

.top-left-segment .line-element {
    border-left-style: solid;
    border-top-style: solid;
}

.top-right-segment .line-element {
    border-right-style: solid;
    border-top-style: solid;
}

.bottom-left-segment .line-element {
    border-left-style: solid;
    border-bottom-style: solid;
}

.bottom-right-segment .line-element {
    border-right-style: solid;
    border-bottom-style: solid;
}

.middle-middle-segment {
    position: relative;
}

.arrow-pointing-both-sides {
    display: flex;
    flex-direction: row;
    align-items: center;

    position: absolute;
    width: 80%;

    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

}

.arrow-pointing-both-sides.vertical {
    transform: translate(-50%, -10px) rotate(90deg);
    width: 60%;
}

.arrow-line {
    flex-grow: 1;
    border: 1px solid white;
}

.arrow-left {
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; 
    
    border-right:20px solid white; 
}

.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; 
    
    border-left:20px solid white; 
}

.swappable-element h2 img {
    height: 4rem;
    margin-right: 0.5rem;
    vertical-align: bottom;
}

.swappable-element h2 {
    margin-bottom: 0.5rem;
}

/* styling to hide non active elements */
.swappable-element:not(.swappable-active){
    display: none;
}

#responsive-swappable-overlay {
    display: none;
}

/*
.close-swappable-popup {
    display: none;
}*/

.click-to-swap {
    cursor: pointer;
    position: relative;
}

.click-to-swap:after,
.click-to-swap:before {
    content: '';    
    
    position: absolute;
    top: 0;
    right: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-top-right-radius: var(--content-border-radius-small);
}

.click-to-swap:before {
    z-index: 0;
    background-color: var(--primary-button-color-background);
}

.click-to-swap:after {
    background-image: url("../images/plus-white.svg");
    background-repeat: no-repeat;
    background-size: 2rem;
    background-position: center;
    z-index: 1;
    transition:0.5s all;
}

.click-to-swap.swappable-active:after {
    transform: rotate(135deg);
}

.click-to-swap:hover:before {
    background-color: var(--primary-button-color-background-hover);
}

#swappable-info-elements {
    padding: 2.5rem;
    border-radius: var(--content-border-radius);
    background-color: var(--main-theme-color);
    background: url("../images/wavy-pattern-purple.svg") center/contain no-repeat, var(--footer-background-gradient);
}

.veiligheidsgedrag .half-width-block {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
}

@media (min-width: 1024px){
    .veiligheidsgedrag .half-width-block {
        width: 40%;
    }

    #swappable-info-elements {
        width: calc(70% - 4rem);
    }

    .swappable-element {
        min-height: 26.25rem;
    }

    .close-swappable-popup {
        margin-left: auto;
    }
}

@media (max-width: 1024px) {
    /* Ensure enough space below element in responsive */
    #swappable-info-elements {
        margin-bottom: 2.5rem;
    }

    .veiligheidsgedrag {
        padding: 0;
    }

    .dimension-description {
        display: none;
    }

    .dimension-element {
        width: 9rem;
    }

    .dimension-title {
        height: 6.5rem;
        padding: 0;
        padding-top: 0.5rem;
        flex-direction: column;
        justify-content: space-between;
    }

    .dimension-title img {
        flex-grow: 1;
        scale: 1.2;
        margin-left: 0.5rem;
    }

    .dimension-name {
        height: 50%;
        background-color: white;
        width: calc(100% - 1rem);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.25rem 0.5rem;
        font-size: var(--medium-font-size);
        line-height: 1.5rem;
        border-bottom-right-radius: var(--content-border-radius-small);
        border-bottom-left-radius: var(--content-border-radius-small);
    }

    .dimension-title {
        align-items: flex-start;
        border-bottom-right-radius: var(--content-border-radius-small);
        border-bottom-left-radius: var(--content-border-radius-small);
    }

    .click-to-swap:after,
    .click-to-swap:before{
        width: 3.25rem;
        height: 3.25rem;
    }

    /* styling to hide non active elements */
    .swappable-element#swappable-default {
        display: block;
    }
    .swappable-element:not(#swappable-default){
        position: fixed;
        top:6rem;
        left: 2rem;
        right: 2rem;
        z-index:3;

        max-height: calc(100% - 10rem);
        padding: 1rem;

        background-color: var(--secondary-theme-color);

        overflow-y: auto;
    }

    .close-swappable-popup {
        position: fixed;
        top: 6.5rem;
        right: 3rem;
    }

    #responsive-swappable-overlay.show {
        display: block;
        position: fixed;
        top: 0;
        left:0;
        right: 0;
        bottom: 0;
        z-index: 1;
        background-color: #00000080;
    }
}

.close-swappable-popup {
    display: block;
    width: 2rem;
    height: 2rem;

    background-image: url("../images/close_icon_white.svg");
    background-color: var(--primary-button-color-background);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    cursor: pointer;

    border-radius: var(--content-border-radius-small);
}

/* end homepage -> veiligheidsgedrag element */
@media (max-width: 1024px) {
    .offer-columns {
        margin-top: 2.5rem;
    }

    .offer-columns .limited-width-block-centered {
        gap: 2rem;
        padding-bottom: 2rem;
    }
}

@media (min-width: 1024px){
    .offer-columns .limited-width-block-centered {
        justify-content: center;
        gap: 4.5rem;
    }

    .offer-column {
        width: calc(50% - 9rem);
        max-width: 26rem;
    }

    .offer-columns > .limited-width-block-centered > p {
        width: 90%;
        max-width: 45rem;
        text-align: center;
    }
}

.offer-columns .offer-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 2rem 3rem;
}

.offer-column .icon-text-combi {
    align-items: center;
    display: flex;
    flex-direction: column;
}


.offer-column .icon-text-combi h4 {
    font-size: var(--subtitle-font-size);
}

.wavy-pattern-light {
    background-image: url("../images/wavy-pattern-white.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* End Homepage */

/* Services */
.services h2 {
    text-align: left;
}

.services .text-block {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.services .service-image > img {
    border-radius: var(--content-border-radius);
    width: 100%;
    height: auto;
    object-fit: contain;
}

@media (max-width: 1024px) {
    .services .service-image {
        max-width: 20rem;
        margin-left: auto;
        margin-right: auto;
    }

    .services .limited-width-block-centered {
        gap: 2rem;
    }

    .service-image:not(.service-image-responsive) {
        display: none;
    }
}

@media (min-width: 1024px) {
    .service-image.service-image-responsive {
        display: none;
    }

    .services:not(.linen-background) .text-block {
        order: 1
    }

    .services .limited-width-block-centered {
        justify-content: space-between;
    }
    
    .services .text-block {
        width: 50%;
    }

    .services .service-image {
        width: calc(50% - 7.5rem);
        margin-top: 5.5rem;
    }
}


/* End Services */

/* about page */
.limited-width-block-centered.slideshow-block {
    flex-direction: column;
}

.safetymonitor-slideshow {
    width: 100%;
}

.safetymonitor-slideshow figure {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
}

.safetymonitor-slideshow figure img {
    width: 60%;
    height: 100%;
    object-fit: cover;
}

.options-contact {
    margin-top: 6rem;
    background-color: var(--grey-background-color);
    padding: 2rem 6rem 2rem 3.5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.options-contact * {
    margin: 0;
}

.options-contact a {
    height: min-content;
}

.slideshow-counter {
    margin-top: 0.5rem;
    font-weight: var(--font-weight-light);
}

.colored-counter-text {
    color: var(--secondary-theme-color);
    font-weight: var(--font-weight-medium);
}

.slideshow-description {
    min-height: 6rem;
}

@media (max-width: 1024px){
    .content-block.slideshow-element {
        display: unset;
    }

    .content-block.video-element {
        display: none;
    }    

    .options-contact {
        flex-direction: column;
        gap: 1rem;
        padding: 2rem 2.5rem;
        text-align: center;
    }

    .align-text-middle {
        text-align: left;
    }

    .options-contact > a {
        width: 100%;
    }

    .safetymonitor-slideshow figure {
        flex-direction: column;
    }

    .safetymonitor-slideshow figure img {
        width: 100%;
    }

    .bss-slides figcaption {
        width: 100%;
    }
}

@media (min-width: 1024px) {
    .about-mental-safety-navigator .full-width-container {
        background-color: var(--tertiary-theme-color);
    }

    .about-mental-safety-navigator .limited-width-block-centered {
        margin-top: -4rem;
    }

    .about-mental-safety-navigator > br {
        display: none;
    }

    .full-banner.about {
        padding-bottom: 12rem;
    }
}

/* end about page */

/* start aanbod page */

.aanbod-safetymonitor .aanbod-offers {
    position: relative;
}

.aanbod-options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2.5rem;
    justify-content: space-between;
    margin-top: 4rem;
    margin-bottom: 2rem;
}

.aanbod-block.half-width {
    width: calc(50% - 1.25rem);
    display: flex;
    flex-direction: column;

    box-shadow: #00000029 0px 0px 20px;

    background-color: white;
}

.aanbod-block.full-width {
    width: 100%;

    display: flex;
    flex-direction: row;
}

.aanbod-block.full-width .full-width-graphic-segment {
    width: 50%;
    height: 22rem;
    background-color: var(--main-theme-color);
    background-image: url("../images/example_assessment.jpg");
    background-size: cover;
}

.aanbod-block.full-width .full-width-information-segment {
    width: calc(50% - 3rem);
    padding: 0rem 3rem 2.5rem 0;

    display: flex;
    flex-direction: column;
}

.aanbod-description {
    font-size: 1.25rem;
    font-weight: var(--font-weight-medium);
}

.aanbod-block.full-width .order-now-segment {
    flex-grow: 1;
}

.aanbod-title-segment {
    z-index: 1;
}

.aanbod-title-segment h3 {
    font-weight: var(--font-weight-light);
}

.aanbod-title-segment h2 img {
    margin-right: 0.5rem;
    display: inline-block;
}

.aanbod-description-segment {
    min-height: 17rem;
    font-weight: var(--font-weight-medium);
    z-index: 1;
}

.aanbod-description h4 {
    margin-bottom: 0;
}

.aanbod-background-element {
    display: flex;
    flex-direction: column;
    position: relative;

    padding: 2.5rem 3rem 1.5rem 3rem;

    background-color: var(--tertiary-theme-color);

}

.aanbod-background-element:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    
    background-image: url("../images/pattern_white.svg");
    background-size: cover;
    opacity: 0.5;
}

.aanbod-background-element.rotate:after {
    transform: rotate(180deg)
}

.aanbod-list {
    flex-grow: 1;
    padding: 1.5rem 3rem 2.5rem 3rem ;

    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.aanbod-details {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    margin-top: 3rem;

    padding: 0 3rem 2.5rem 3rem ;
}

.aanbod-details .button {
    margin-top: 0;
}

a.button {
    text-decoration: none;
}

.aanbod-details p {
    margin-left: 1rem;
}

.aanbod-list-item {
    font-size: var(--small-font-size);
    line-height: var(--small-font-line-height);
    font-weight: var(--font-weight-light);
    position: relative;
    margin-left: 2rem;
}

.aanbod-list-item:before {
    content: url("../images/circle-checkmark.svg");
    position: absolute;
    left: -2rem;
}

.aanbod-banner {
    padding: 4rem 0;
    position: relative;
    background-image: url("../images/safety_monitor_aanbod_banner.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }

@media (min-width: 1024px){    
    .aanbod-title-segment h3 br {
        display: none;
    }

    
    .aanbod-safetymonitor .aanbod-offers:after {
        content: '';
        background-color: var(--grey-background-color);
        bottom: 0;
        left: 0;
        position: absolute;
        height: 38rem;
        width: 100%;
        z-index: -1;
    }
}

@media (max-width: 1024px){
    .aanbod-offers .limited-width-block-centered {
        padding: 0;
        width: 100%;
    }

    .aanbod-offers {
        padding-top: 3rem;
    }

    .aanbod-options {
        flex-direction: column;
        align-items: center;
        margin-top: 0;
        margin-bottom: 0;
    }

    .aanbod-block.half-width {
        width: calc(100% - 2rem);
    }

    .aanbod-title-segment h3 img {
        height: 1.5rem;
    }

    .aanbod-block.full-width {
        flex-direction: column;
    }

    .aanbod-block.full-width .full-width-information-segment {
        width: unset;
        padding: 1rem;
    }

    .aanbod-details {
        flex-direction: column-reverse;
        gap: 1.5rem;
        margin-top: 1rem;
    }

    .aanbod-details a {
        width: 100%;
    }

    .aanbod-block.full-width .full-width-graphic-segment {
        width: unset;
        height: 14rem;
        background-position: center;
        order: -1;
    }

    .aanbod-list-item:before {
        scale: 2;
    }

    .aanbod-background-element {
        padding: 1.5rem;
    }

    .aanbod-list {
        padding: 1.5rem;
    }

    .aanbod-safetymonitor .aanbod-offers .aanbod-block.full-width {
        background-color: var(--grey-background-color);
    }

    .order-now-segment {
        margin-bottom: 1rem;
    }

    .aanbod-banner {
        padding-top: 2.5rem;
        padding-bottom: 8rem;
    }

    .aanbod-banner.full-banner p {
        font-size: var(--medium-font-size);
        line-height: var(--medium-font-line-height);
    }

    .aanbod-description-segment {
        line-height: var(--subtitle-font-line-height);
    }

    .aanbod-description h4 {
        line-height: 2.25rem;
    }
}

/* end of aanbod page */


.headerbar {
    z-index: 5;
    width: 100%;
    position: fixed;
    top: 0;
    box-shadow: 0px 0px 20px #00000029;
}

.navbar {
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
}

a:not(.footer-content a, .headerbar a, a.button) {
    font-weight: var(--font-weight-medium);
    font-size: var(--regular-font-size);
}

@media (min-width: 1024px) {
    .navbar {
        min-height: 4.5rem;
        align-items: center;
    }
}

@media (max-width: 1024px) {
    .navbar {
      justify-content: flex-start;
      z-index: 1;
      gap: 2rem;      
    }
  }

/*--contact page css--*/
.contact-widget-page {
    padding-bottom: 4rem;
    background-color: var(--grey-background-color);
}

.contact-widget-page .text-block > h2 {
    text-align: left;
}

.contact-widget-page .container {
    background-color: var(--grey-background-color);
}

.contact-widget-page .container .widget-container {
    z-index:1;
    position: relative;
}


.widget-form {
    width: calc(100% - 3rem);
    padding: 0 1.5rem;
    max-width: 74rem;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
    margin-bottom: 5rem;
}

.contact-banner {
    background-image: url("../images/SafetyMonitor_Contact_Header.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

@media (max-width: 1024px){
    .contact-banner {
        padding-bottom: 5rem;
        padding-top: 5rem;
        background-position: right;        
    }

    .contact-widget-page {
        padding-bottom: 1rem;
    }
}

.address-details {
    width: calc(40% - 7rem);
    background: rgb(120,72,106);
    background: radial-gradient(circle, rgba(120,72,106,1) 1%, rgba(66,0,48,1) 80%);
    background: var(--footer-background-gradient);
    background-position: bottom left;
    border-radius: var(--content-border-radius);
    position: relative;
    padding: 4rem 2rem 2rem 2rem;
    height: min-content;
}

.address-details-block > img {
    position: absolute;
    width: 2rem;
}

.address-details h3 {
    font-size: 1.25rem;
    color: var(--white);
    font-family: var(--main-font-family);
    font-weight: var(--font-weight-medium);
}

.address-details-block {
    margin-top: 1.5rem;
    position: relative;
}

.address-details p {
    margin-left: 4rem;
}

.address-details-block p {
    color: var(--white);
    font-size: var(--small-font-size);
    line-height: var(--medium-font-line-height);
}

p.address-details-title {
    color: var(--white);
    font-weight: var(--font-weight-medium);
    line-height: var(--small-font-line-height);
}

.address-details-avatar {
    position: absolute;
    top: -5rem;
    left: 50%;
    transform: translate(-50%, 0);
}

.address-details-avatar img {
    max-width: 9rem;
}

@media (max-width: 1024px){
    .contact-widget-page .limited-width-block-centered h2 {
        margin-bottom: -2.5rem;
    }

    .address-details {
        margin-top: 7rem;
    }
}


.widget-form .full-width-container {
    gap: 3rem;
}

.orange-backdrop-border-element,
.widget-form .contact-form {
    background-color: var(--white);
    border-radius: var(--content-border-radius);
    border: 1px solid var(--primary-button-color-background);
    box-shadow: 0 0 20px #2D343B26, 0.75rem 0.75rem 0 var(--primary-button-color-background);
    padding: 1.5rem 2rem;
}

.widget-form .contact-form {
    flex-grow: 1;

    padding-bottom: 12rem;
    margin-bottom: -12rem;
}

.contact-error {
    position: relative;
    z-index: 1;
}

.widget-container .widget-form .button-send-contact-form,
.widget-container .widget-form .h-captcha {
    position: relative;
    z-index: 1;
}

.widget-form .h-captcha {
    margin-top: 1rem;
}

span.contact-error {
    color: #e3231d;
    margin-left: 1rem;

    position: relative;
    z-index: 1;
}

@media (min-width: 1024px){
    .address-details {
        order: 1;
    }

    .widget-container .widget-form .button-send-contact-form,
    .widget-container .widget-form .h-captcha {
        margin-left: 2rem;
    }
    
    .widget-contact .contact-banner .limited-width-block-centered {
        padding: 9rem 3rem 9rem 2rem;
    }
}

@media (max-width: 1024px){
    .widget-container .widget-form .button-send-contact-form,
    .widget-container .widget-form .h-captcha {
        margin-left: 2rem;
    }

    .address-details {
        margin-top: 7rem;
        width: unset;
    }

    span.contact-error {
        margin-left: 2rem;
        top: 0;
    }

    .widget-form .contact-form {
        padding-bottom: 11rem;
        margin-bottom: -11rem;
    }
}

.contact-widget > h2,
.contact-widget > p {
    margin-left: 1.5rem;
}

.contact-form h2 {
    font-size: 1.5rem;
    text-align: left;
    font-family: var(--main-font-family);
    font-weight: var(--font-weight-medium);
}

.contact-table tbody {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--standard-text-color);
}

.contact-table tbody tr {
    display: flex;
    flex-direction: column;
}

.contact-table {
    width: 100%;
}

.contact {
    padding-bottom: 2rem;
}

.contact-table td {
font-weight: var(--font-weight-medium);
}

.contact-table td textarea {
    height: 14rem;
    margin-right: 3rem;
}

.topbar {
    display: none;
}

ul.menu > li.menuitem4 > a {
    pointer-events: none;
}

@media (min-width: 1024px) {
    .menu-wrapper {
        margin-top: auto;
        margin-bottom: auto;
    }

    ul.menu > li.selected > a,
    ul.menu > li:hover > a,
    ul.menu > li.menuitem1:hover > a,
    ul.menu > li.selected.menuitem1 > a {
        color: var(--header-title-color);
    }

    ul.menu > li.selected > a {
        font-weight: var(--font-weight-medium);
    }

    ul.menu > li {
        margin-bottom: 0.5rem;
    }

    ul.menu > li > a {
        padding: 0.5rem;        
        color: var(--main-theme-color);
    }

    .responsive-shopping-cart {
        display: none;
    }

    .headerbar {
        min-height: 6.25rem;
    }
}

@media (max-width: 1024px) {
    .headerbar {
        min-height: 5rem;
    }
}

@media (min-height: 880px){
    html[data-scroll='0'] .headerbar {
        box-shadow: unset;
        background-color: transparent;
        transition:background-color 0.5s ease;
    }

    html[data-scroll='0'] .headerbar > .topbar {
        background-color: transparent;
        transition:background-color 0.5s ease;
    }
}

/* Over Ons page */
.over-ons-banner {
    height: 28rem;
}

.over-ons-intro > .limited-width-block-centered {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-top: -9.5rem;
}

@media screen and (min-width: 1024px) {
    .over-ons-intro p {
        text-align: center;
    }
}

.over-ons-info {
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
}

.company-website-blocks > .limited-width-block-centered {
    gap: 4.5rem;
}

.company-website-block {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.company-website-block > .text-block > p {
    font-size: var(--small-font-size);
    line-height: var(--small-font-line-height);
}

.company-logo {
    height: 3rem;
    margin-bottom: 0.5rem;
}

.company-logo > img {
    height: 100%;
}

/* Fix faltolan logo being slightly different height */
div.company-website-block:nth-child(2) > .company-logo > img {
    height: 1.75rem;
    margin-top: 1rem;
}

@media (max-width: 1024px){
    .over-ons-intro h2 {
        text-align: left;
    }

    .over-ons-banner {
        height: 14rem;
    }

    .over-ons-intro > .limited-width-block-centered {
        margin-top: -4.5rem;
    }

    .company-website-blocks > .limited-width-block-centered {
        gap: 2rem;
    }
}

/* basic styling products page */
.page-products #article {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.assessment-category {
	display: flex;
	flex-direction: column;
	align-items: center;
    width: calc(100% - 3rem);
    max-width: 80rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.products {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.product-block {
	display: flex;
	flex-direction: column;
	height: 18rem;
}

.product-image {
	flex-grow: 1;
}

.product-action {
	display: flex;
	flex-direction: row;
}

.product-add-to-cart,
.product-read-more {
	width: 50%;
}

.product-read-more span:after {
    content: url("../images/chevron_right_black_24dp.svg");
    position: absolute;
    right: 1rem;
}

.product-read-more span {
    display: flex;
    justify-content: center;
    position: relative;
}

span.product-price {
    float: right;
    font-weight: var(--font-weight-light);
}

.product-add-to-cart {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.product-add-to-cart .shoppingcart {
    display: inline-block;
    display: flex;
    width: 100%;
    justify-content: space-around;
    font-weight: var(--font-weight-medium);
    color: var(--white);
}

.product-add-to-cart .shoppingcart:before {
    content: '';
    display: inline-block;
    height: 1.5rem;
    width: 1.5rem;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url("../images/Icon\ material-add-shopping-cart.svg");
}

.product-add-to-cart .shoppingcart:after {
    content: 'Bestellen'
}

span.plus {
    display: none;
}

/* product page styling */
.products {
    width: 100%;
    justify-content: flex-start;
}

.product-block {
    position: relative;
    box-shadow: 5px 5px 15px rgba(23,33,43,0.15);
    border-radius: 0.250rem;
}

.product-name {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: var(--font-weight-medium);
}

.product-title {
    font-size: var(--medium-font-size);
    line-height: var(--medium-font-line-height);
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.product-block .product-info {
    height: calc(100% - 5.25rem);
}

.product-info {
    position: absolute;
    color: var(--white);

    top: 0;
    left: 0;
    z-index: 1;

    width: 100%;
    text-align: center;

    display: flex;
    flex-direction: column;

    padding: 1.25rem 0 1rem 0;
}

.product-info:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    border-top-left-radius: 0.250rem;
    border-top-right-radius: 0.250rem;
}

/* color gradients for specific themes can be defined here */
.product-info:before {
    background: linear-gradient(0deg, #34286E50, #34286E);
}

.category-icon-block {
    background-color: #342570;
}

.selectie .category-icon-block {
    background-color: #CC2E17;
}

.selectie .product-info:before {
    background: linear-gradient(0deg, #CA302280, #CA3022);
}

.inzetbaarheid .category-icon-block {
    background-color: #342570;
}

.inzetbaarheid .product-info:before {
    background: linear-gradient(0deg, #34286E50, #34286E);
}



/* end of color gradients */

.product-title {
    margin-top: auto;
    margin-bottom: auto;
}

.product-name {
    margin: 0;
}

@media screen and (min-width: 1024px) {
    .product-info {
        clip: rect(auto, auto, 3.75rem, auto);
        transition-property: clip;
        transition-duration: 0.5s;
    }

    .product-title {
        display: none;
    }

    .product-block:hover .product-info {
        clip: rect(auto, auto, 20rem, auto);

        transition-property: clip;
        transition-duration: 0.5s;
        transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .product-block:hover .product-title {
        display: block;
    }
}

.product-action {
    flex-direction: row-reverse;
}

.product-action > div {
    padding: 0.75rem;
    text-align: center;
}

.product-action > div:first-child {
    border-bottom-right-radius: 0.250rem;
}

.product-action > div:last-child {
    border-bottom-left-radius: 0.250rem;
}

.product-add-to-cart {
    width: 35%;
    background-color: #FF9D1B;
}

.product-add-to-cart:hover {
    background-color: #FC910D;
}

.product-read-more {
    width: 65%;
    background-color: #F4F7FC;
    cursor: pointer;
    color: var(--dark-grey);
    font-weight: var(--font-weight-medium);
}

.product-read-more:hover {
    background-color: #E4E7EC;
}

.product-image,
.product-image img {
    border-top-right-radius: 0.250rem;
    border-top-left-radius: 0.250rem;
}

.product-image img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.product-image {
    position: relative;
}

.product-list {
    position: absolute;
    bottom: 0;
    left: 0;
    color: var(--dark-grey);
    background-color: #F4F7FC;
    width: 100%;
    display: none;
    z-index: 1;
}

@media screen and (max-width: 1024px){
    .product-list {
        display: block;
    }
}

.product-list li {
    padding: 0.8rem;
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    border-top: 0.0625rem solid #F4F7FC;
    background-color: var(--white);
}

.product-list li:first-of-type {
    border-top: none;
}

.product-list li:hover {
    background-color: #E4E7EC;
}

.assessment-category .category-title {
    color: var(--dark-grey);
    font-size: 2rem;
    font-weight: var(--font-weight-medium);
    margin-bottom: 2rem;
    text-align: center;
    cursor: pointer;
}

.assessment-category-icon-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

.category-icon-line {
    height: 0;
    flex-grow: 1;
    border-top: 0.0625rem #2D343B30 solid;
}

.category-icon-block {
    height: 3.5rem;
    width: 3.5rem;
    border-radius: 0.250rem;
    padding: 0.5rem;
}

.category-icon-block img {
    height: 100%;
    width: 100%;
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1143%) hue-rotate(52deg) brightness(111%) contrast(101%);
}

@media only screen and (min-width: 1024px) {
    .assessment-category-icon-container {
        margin-top: 4rem;
        margin-bottom: 1rem;
    }

    .assessment-category {
        margin-bottom: 4rem;
    }

    .products {
        margin: -1.5rem;
    }

    .product-block {
        margin: 1.5rem;
        flex-basis: calc(33% - 3rem);
    }
}

@media only screen and (max-width: 1024px) {
    .products {
        align-items: center;
        flex-direction: column;
    }

    .product-block {
        margin-bottom: 3rem;
        width: 100%;
    }

    .page-products #article {
        padding-top: 0.5rem;
    }

    .assessment-category-icon-container {
        margin-bottom: 1rem;
    }
}

/* Contactwidget styling */
.contact-widget {
    position: fixed;
    width: 20rem;
    box-shadow: 5px 5px 15px #17212B26;
    padding: 1.25rem;
    background-color: var(--white);
    color: var(--dark-grey);

    z-index: 1;

    right: -22.5rem;
    top: 12rem;

    transition: all 0.5s;
}

.contact-widget p {
    color: var(--dark-grey);
}

.contact-widget.contact-widget-expand {
    right: 0rem;
}

.contact-widget .contact-widget-label {
    color: white;
    content: url('../images/Icon\ material-message.svg');
    background-color: var(--secondary-theme-color);
    position: absolute;
    top: 0;
    left: -3.5rem;
    height: 2rem;
    width: 2rem;
    padding: 0.75rem;
    border-top-left-radius: 0.250rem;
    border-bottom-left-radius: 0.250rem;
    cursor: pointer;
    box-shadow: 5px 5px 15px rgba(23,33,43,0.15);
}

.contact-widget.contact-widget-expand .contact-widget-label {
    box-shadow: unset;
}

.contact-widget .contact-widget-label:hover {
    background-color: #1323C4;
}

.contact-widget form {
    margin-top: 0.5rem;
}

.contact-widget .contact-widget-close {
    content:  url('../images/Sluiten.svg');
    color: var(--dark-grey);
    position: absolute;
    right: 0rem;
    top: 0rem;
    padding: 1.5rem;
    cursor: pointer;
}

.contact-fields .contact-property {
    display: flex;
    flex-direction: column;
}

.contact-fields .contact-property.contact-checkbox {
    flex-direction: row;
}

.contact-fields .contact-property {
    margin-bottom: 1rem;
}

.contact-widget h2 {
    font-size: 1.5rem;
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.25rem;
}

.contact-widget .button-send-contact-form {
    background-color: var(--main-theme-color);
    font-size: var(--regular-font-size);
    font-weight: var(--font-weight-medium);
    color: var(--white);
}

.contact-widget .button-send-contact-form:hover {
    background-color: #1323C4;
}

.contact-widget input#confirmcontact,
input#confirm {
    width: 1rem;
    height: 1rem;
}

@media screen and (min-width: 1024px){
    .contact-widget {
        top: unset;
        bottom: 0rem;
        max-height: calc(100% - 15rem);
    }

    .contact-widget.contact-widget-expand {
        overflow-y: auto;
    }
}

@media screen and (max-width: 1024px){
    .contact-widget {
        top: 4.5rem;
        height: calc(100vh - 4.5rem - 2.5rem);
    }

    .contact-widget .contact-widget-label {
        top: 2rem;
    }
    
    .contact-widget.contact-widget-expand {
        width: calc(100% - 2.5rem);
        overflow-y: scroll;
    }
}

/* category product page styling */
.category-container {
    display: flex;
    flex-direction: row;
    margin-bottom: 4rem;
}

.category-container img.category-image {
    width: 50vw;
    object-fit: cover;
}

.category-container .category-image-container {
    min-height: calc(100vh - 6.25rem);
}

.category-container .category-image-container img.category-image {
    height: 100%;
}

.category-container .category-image-container {
    position: relative;    
}

.category-container .category-title-image {
    position: absolute;
    font-size: 3.5rem;
    line-height: 3.5rem;
    z-index: 1;
    top: 50%;
    left: 50%;
    color: var(--white);
    transform: translate(-50%, -50%);
    text-align: center;
}

.category-container .category-description {
    padding: 4rem;
    background-color: #F4F7FC;
}

.category-image-container img.category-icon {
    position: absolute;
    width: 80%;
    height: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1143%) hue-rotate(52deg) brightness(111%) contrast(101%);
    opacity: 10%;
}

@media screen and (max-width: 1024px) {
    .category-container {
        flex-direction: column;
    }

    .category-container img.category-image {
        width: 100%;
    }

    .category-container .category-description {
        padding: 0.5rem;
        margin-bottom: 1rem;
    }

    .category-container .category-image-container {
        min-height: unset;
    }
}

/* assessment detail page styling */
.page-assessments .page-content {
    color: var(--dark-grey);
}

.page-assessments .assessment-name {
    font-size: 2rem;
}

.page-assessments .assessment-banner-image .bannerimage {
    object-fit: cover;
    object-position: left;
    width: 100%;
}


.page-assessments .assessment-banner-image {
}

.page-assessments .footer {
    z-index: 1;
}

.page-assessments .footer:before {
    content: '';
    display: block;
    height: 4rem;
    width: 100%;
    background-color: var(--white);
}

.my-account-footer {
    display: none;
}

@media (max-width: 1024px){
    .page-assessments .footer:before {
        background-color: var(--light-grey);
    }
}

.page-assessments .assessment-banner-image,
.page-assessments .assessment-banner-image .bannerimage {
    height: 40vh;
    overflow: hidden;
    max-height: 30rem;
}

.page-assessments .page-content {
    display: flex;
    flex-direction: column;
}

.page-assessments .assessment-details {
    display: flex;
    flex-direction: column;
}

.page-assessments .button-back {
    font-size: var(--regular-font-size);
    line-height: var(--regular-font-line-height);
    font-weight: var(--font-weight-medium);
}

@media (min-width: 1024px){
    .products-table .td-product-action,
    .td-product-example-report,
    .td-product-total-credits {
        width: 8rem;
    }

    .td-product-example-report {
        padding: 0 1rem;
    }

    .td-product-total-price,
    .td-product-price,
    .td-product-amount,
    .td-product-credits {
        width: 5rem;
    }
}



.products-table tr td:first-child {
    display: none;
}

.products-table tbody {
    display: flex;
    flex-direction: column;
}

.products-table tbody tr {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: unset !important;
    margin-bottom: 0.5rem;
    gap: 1rem;
}

.assessment-title-container,
.assessment-products-container {
    margin-bottom: 1.5rem;
}

.assessment-products-container {
    order: 1;
}

@media (max-width: 1024px){
    .assessment-products-container {
        background-color: var(--white);
        border: 1px solid var(--grey-background-color);
    }

    .products-table .header {
        display: none;
    }

    .products-table .td-product-credits:after {
        content: 'Credits';
        margin-left: 0.5rem;
    }

    .products-table .td-product-total-credits:before {
        content: 'Credits totaal:';
        margin-right: 0.5rem;
    }
}

.assessment-return-container {
    display: none;
}

.assessment-details b {
    font-weight: var(--font-weight-medium);
}

.product-content-list {
    margin-top: 1rem;
    margin-bottom: 2.5rem;
}

.product-content-list li {
    margin-bottom: 1rem;
    margin-left: 2.5rem;
    position: relative;
    /*font-weight: var(--font-weight-regular);*/
}

.product-content-list.checkmarks-list li:before {
    content: url('../images/check_icon.svg');
    position: absolute;
    top: 0.250rem;
    left: -2.5rem;
}

.product-content-list.superman-list li {
    list-style: initial;
    margin-left: 1rem;
}

.td-product-title {
    font-size: var(--medium-font-size);
    line-height: var(--medium-font-line-height);
    font-weight: var(--font-weight-medium);
}

td.td-product-price,
td.td-product-total-price {
    font-size: var(--medium-font-size);
    line-height: var(--medium-font-line-height);
}

.td-product-example-report a,
.td-product-example-report a:visited {
    color: var(--secondary-theme-color);
}

.product-content-list-container b {
    font-size: var(--subsubtitle-font-size);
}

@media screen and (min-width: 1024px){
    .page-assessments .assessment-products-container {
    }

    .page-assessments .assessment-title-container {
        margin-bottom: 0;
    }

    .assessment-title-container .page-title {
        margin-bottom: 0;
    }
    .page-assessments .assessment-details {
        padding: 3rem;
        width: calc(100% - 6rem);
        max-width: 77rem;
        margin-left: auto;
        margin-right: auto;
        position: relative;
    }

    .page-assessments .assessment-banner-image .bannerimage {
        
    }

    .td-product-title {
        flex-grow: 1;
    }

    .td-product-price,
    .td-product-total-price,
    .td-product-credits {
        padding: 0 1rem;
    }
    
    .assessment-longtext-container {
        width: 50%;
    }

    .assessment-longtext-container .product-subtitle {
        font-size: 1.5rem;
        line-height: 2.125rem;
        margin-bottom: 2rem;
    }

    .product-content-list-container {
        position: relative;
        padding: 2rem;
        padding-top: 3.5rem;
        background-color: var(--grey-background-color);
        height: calc(100% - 5.5rem);
    }
    .assessment-return-container button {
        background-color: transparent;
        border: 1px solid var(--dark-grey);
        color: var(--dark-grey);
        border-radius: 4rem;
    }
}

@media screen and (max-width: 1024px){
    .page-assessments .page-content {
        flex-direction: column;
    }

    .page-assessments .assessment-title-container {
        margin-bottom: 0;
    }

    .assessment-title-container .page-title {
        margin-bottom: 0;
    }

    .page-assessments .assessment-banner-image {
        width: 100%;
    }

    .page-assessments .assessment-banner-image .bannerimage {
        width: 100%;
    }

    .page-assessments .page-content {
        padding: 0;
    }

    .td-product-title {
        order: -2;
    }

    .td-product-price,
    .td-product-total-credits {
        order: -1;
        width: 100%;
    }

    .td-product-action {
        width: 100%;
        order: 2;
    }

    .td-product-action .button-add-to-cart {
        width: 100%;
        margin-top: 1rem;
    }

    .products-table tr:nth-child(2) {
        padding: 1rem;
    }

    .td-product-amount:before {
        content: 'Aantal';
        margin-right: 1rem;
    }

    .td-product-example-report {
        width: 100%;
        order: 1;
    }

    .td-product-amount {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        flex-grow: 1;
        margin-right: 1rem;
    }

    .td-product-total-price {
        font-weight: var(--font-weight-medium);
    }

    .page-assessments .td-product-title {
        color: var(--dark-grey);
        font-size: 1.5rem;
        font-weight: var(--font-weight-medium);
        width: 100%;
    }

    .products-table tbody tr {
        flex-wrap: wrap;
    }

    .assessment-longtext-container .product-subtitle {
        font-size: 1.5rem;
        line-height: 2.125rem;
        margin-bottom: 2rem;
    }

    .page-assessments .assessment-details {
        padding: 1rem;
        background-color: var(--light-grey);
    }

    .page-assessments .button-back {
        margin-left: auto;
        margin-right: auto;
        width: 80%;
        background-color: transparent;
        border: 1px solid var(--dark-grey);
        color: var(--dark-grey);
        border-radius: 4rem;
    }

    .product-content-list-container {
        margin-bottom: 2rem;
    }

    .product-content-list.checkmarks-list li:before {
        display: inline-block;
        scale: 2.5;
        margin-right: 1rem;
        left: -2.15rem;
        top: 0;
    }

    .product-content-list li,
    .training-properties > ul > li {
        font-size: 0.85rem;
    }
}

/* shopping cart overview */
.content-webshop-purchase .container,
.content-webshop-confirm .container {
    display: flex;
    flex-direction: column;
    padding-left: 5rem;
    padding-right: 5rem;
    padding-bottom: 3.5rem;
    color: var(--dark-grey);
}

.content-webshop-purchase font {
    color: var(--dark-grey);
    font-size: var(--medium-font-size);
    line-height: var(--medium-font-line-height);
}

.content-webshop-confirm .module-login {
    padding: 0;
}

/* why would there be two elements having the #article id.. sigh */
.content-webshop-purchase .container div:first-child {
    width: 50rem;
    padding-top: 4rem;
}

.content-webshop-purchase .page-title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-medium);
    margin-bottom: 1rem;
}

.content-webshop-purchase .module-purchase {
    margin-top: 3.5rem;
}

.td-shoppingcart-product-title a {
    color: var(--dark-grey);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

.td-shoppingcart-product-total-price,
.td-shoppingcart-product-total-credits,
.td-shoppingcart-total-price,
.td-shoppingcart-total-price-label,
.td-shoppingcart-product-price,
.tr-shoppingcart-total-credits, 
.tr-shoppingcart-credits-left {
    font-weight: var(--font-weight-medium);
}

.tr-shoppingcart-header .td-shoppingcart-product-total-credits,
.tr-shoppingcart-header .td-shoppingcart-product-total-price,
.tr-shoppingcart-header .td-shoppingcart-product-price,
.tr-shoppingcart-credits-left {
    font-weight: var(--font-weight-light);
}

.tr-shoppingcart-credits-left {
    color: var(--dark-grey);
}

.tr-shoppingcart-header {
    color: var(--dark-grey);
}

.td-shoppingcart-product-count > form {
    display: inline-block;
}

.td-shoppingcart-product-count .combobox {
    width: unset;
    font-weight: var(--font-weight-medium);
    text-align: center;
}

.content-webshop-purchase .td-shoppingcart-product-count:before {
    content: 'Aantal';
    margin-right: 1rem;
    position: relative;
    top: -0.125rem;
}

.shoppingcart-table > tbody {
    display: flex;
    flex-direction: column;
}

.shoppingcart-table > tbody > tr {
    display: flex;
    flex-direction: row;
    padding: 0.5rem 0;
    height: unset !important;
    align-items: center;
    justify-content: space-between;
}

.shoppingcart-table > tbody > tr > td {
    padding: 0 0.5rem;
}

.content-webshop-purchase .shoppingcart-table > tbody > tr.tr-shoppingcart-header {
    display: none;
}

.td-shoppingcart-product-count {
    flex-grow: 1;
}

.td-shoppingcart-product-total-price,
.td-shoppingcart-product-total-credits,
.td-shoppingcart-product-price,
.td-shoppingcart-product-credits,
.td-shoppingcart-product-count {
    text-align: right;
}

.shoppingcart-table .tr-spacer {
    display: none;
}

.tr-shoppingcart-total-price,
.tr-shoppingcart-total-credits {
    border-top: 0.0625rem solid #E4E7EC;
}

.tr-shoppingcart-total-price > td,
.tr-shoppingcart-total-credits > td {
    border: none !important;
}

.td-shoppingcart-total-price {
    flex-grow: 1;
    text-align: right;
}

@media screen and (min-width: 1024px) {
    .td-shoppingcart-product-title {
        order: 1;
    }
    
    .td-shoppingcart-product-count  {
        order: 2;
    }
    
    .td-shoppingcart-product-delete {
        order: 3;
    }
    
    .td-shoppingcart-product-price,
    .td-shoppingcart-product-credits {
        order: 4;
        width: 6rem;
    }
    
    .td-shoppingcart-product-total-price,
    .td-shoppingcart-product-total-credits {
        order: 5;
        width: 7rem;
    }

    .content-webshop-purchase .container,
    .content-webshop-confirm .container {
        max-width: 80rem;
        width: calc(100% - 10rem);
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (max-width: 1024px) {
    .content-webshop-purchase .container,
    .content-webshop-confirm .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-bottom: 1rem;
    }

    .tr-shoppingcart-product {
        flex-wrap: wrap;
    }

    .td-shoppingcart-product-title {
        width: 100%;
    }

    .td-shoppingcart-product-price,
    .td-shoppingcart-product-credits {
        display: none;
    }

    .td-shoppingcart-product-title {
        order: 1;
    }
    
    .td-shoppingcart-product-count  {
        order: 2;
        text-align: left;
    }
    
    .td-shoppingcart-product-price,
    .td-shoppingcart-product-credits {
        order: 3;
    }
    
    .td-shoppingcart-product-total-price,
    .td-shoppingcart-product-total-credits {
        order: 4;
    }

    .td-shoppingcart-product-delete {
        order: 5;
        width: 100%;
    }

    .content-webshop-purchase .container div:first-child {
        width: unset;
    }

    .shoppingcart-table > tbody > tr.tr-shoppingcart-product > td {
        padding-bottom: 0.5rem;
    }

    .button-shoppingcart-continue-shopping,
    .button-shoppingcart-make-payment {
        width: 100%;
    }

    .content-webshop-purchase .shoppingcart-table > tbody > tr:last-child > td:first-child,
    .content-webshop-purchase .shoppingcart-table > tbody > tr:last-child > td:last-child {
        flex-grow: 1;
    }
}

/* confirm purchase */
.confirm-purchase-container {
    padding-top: 4rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.confirm-purchase-container .page-title {
    font-size: 2rem;
    font-weight: var(--font-weight-medium);
    margin-bottom: 1rem;
}

.content-webshop-confirm .td-shoppingcart-product-credits,
.content-webshop-confirm .tr-shoppingcart-header > .td-shoppingcart-product-title {
    display: none;
}

.confirm-purchase-payment {
    display: flex;
    flex-direction: column;
}

.confirm-purchase-payment .payment-options-container {
    flex-grow: 1;
    padding-bottom: 1.5rem;
}

.payment-options-container > form {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.payment_choice label {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.payment_choice label .labeltext {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    font-size: var(--medium-font-size);
    line-height: var(--medium-font-line-height);
    font-weight: var(--font-weight-medium);
}

.payment_choice label .labeltext {
    margin-left: 3rem;
}

.payment-options .ideal .labeltext:before {
    background-image: url('../images/ideal-image.png');
}

.payment-options .later .labeltext:before {
    background-image: url('../images/achteraf_betalen.png');
}

.payment-options .labeltext::before {
    content: '';
    display: inline-block;
    background-repeat: no-repeat;
    height: 4rem;
    width: 5rem;
}

.option-payment {
    border: 0.0625rem solid #E4E7EC;
    border-radius: 0.250rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
}

.payment-options-container > form > .payment-options {
    flex-grow: 1;
}

.purchase-buttons-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.payment-agreement {
	width: 20rem;
	margin-right: 2rem;
    font-size: var(--small-font-size);
    line-height: var(--small-font-line-height);
}

.purchase-buttons-container > button {
    width: max-content;
}

.confirm-purchase-text {
    width: 100%;
    padding-bottom: 1rem;
    order: 1;
}

.confirm-purchase-text p {
    display: none;
}

.confirm-purchase-payment {
	width: calc(50% - 4rem);
    order: 2;
    margin-right: 4rem;
}

.confirm-purchase-payment h2,
.confirm-purchase-table h2 {
    font-size: 1.5rem;
    font-weight: var(--font-weight-medium);
}

.confirm-purchase-payment h2 {
    margin-bottom: 1rem;
}

.confirm-purchase-buttons {
    display: flex;
    justify-content: flex-end;
}

.confirm-purchase-table {
    order: 3;
    background-color: var(--grey-background-color);
    padding: 1.5rem;
    border-radius: 0.250rem;
	width: 45%
}

.confirm-purchase-table .td-shoppingcart-product-count {
    font-weight: var(--font-weight-medium);
}

.confirm-purchase-table .tr-shoppingcart-header .td-shoppingcart-product-count {
    font-weight: var(--font-weight-light);
}

.option-payment input {
    width: 1rem;
    height: 1rem;
}

@media screen and (max-width: 1024px){
    .confirm-purchase-container {
        padding-top: 1.5rem;
    }
    .confirm-purchase-payment {
        width: 100%;
        margin-right: 0;
    }

    .content-webshop-confirm .tr-shoppingcart-header {
        display: none;
    }

    .content-webshop-confirm .td-shoppingcart-product-count:before {
        content: 'Aantal';
        font-weight: var(--font-weight-light);
        margin-right: 1rem;
    }

    .content-webshop-confirm .confirmorder,
    .content-webshop-confirm .confirm-purchase-table {
        width: 100%;
    }

    .purchase-buttons-container {
        align-items: end;
    }

    .payment-options .labeltext::before {
        height: 2rem;
        width: 2.5rem;
    }

    .payment_choice label .labeltext {
        margin-left: 1.5rem;
    }
}

/* confirm or error order page. Could use a generic class to apply style to all pages */
.content-webshop-paycredits #article,
.content-webshop-omnikassa-completed #article,
.content-webshop-omnikassa-cancelled #article,
.content-webshop-omnikassa-error #article,
.content-webshop-omnikassa-expired #article,
.content-webshop-omnikassa-in-progress #article,
.content-webshop-paylater #article {
    color: var(--dark-grey);
    font-size: var(--regular-font-size);
    padding: 4rem 5rem;
}

.content-webshop-paycredits h1,
.content-webshop-omnikassa-completed h1,
.content-webshop-omnikassa-cancelled h1,
.content-webshop-omnikassa-error h1,
.content-webshop-omnikassa-expired h1,
.content-webshop-omnikassa-in-progress h1
.content-webshop-paylater h1 {
    font-size: 2rem; 
    font-weight: var(--font-weight-medium);
    margin-bottom: 1rem;
}

.content-webshop-paycredits button,
.content-webshop-omnikassa-completed button,
.content-webshop-omnikassa-cancelled button,
.content-webshop-omnikassa-error button,
.content-webshop-omnikassa-expired button,
.content-webshop-omnikassa-in-progress button,
.content-webshop-paylater button {
    margin-top: 1rem;
}

@media screen and (min-width: 1024px){
    .content-webshop-paycredits #article,
    .content-webshop-omnikassa-completed #article,
    .content-webshop-omnikassa-cancelled #article,
    .content-webshop-omnikassa-error #article,
    .content-webshop-omnikassa-expired #article,
    .content-webshop-omnikassa-in-progress #article,
    .content-webshop-paylater #article {
        width: calc(100% - 5rem);
        max-width: 77rem;
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (max-width: 1024px){
    .content-webshop-paycredits #article,
    .content-webshop-omnikassa-completed #article,
    .content-webshop-omnikassa-cancelled #article,
    .content-webshop-omnikassa-error #article,
    .content-webshop-omnikassa-expired #article,
    .content-webshop-omnikassa-in-progress #article
    .content-webshop-paylater #article {
        color: var(--dark-grey);
        font-size: var(--regular-font-size);
        line-height: var(--regular-font-line-height);
        padding: 1rem 0.5rem;
    }
}

/* clients.asp & profile.asp styling */

.clients-employees-title {
    display: none;
}

.product {
	display: none;
}

.content-clients .container,
.page-profile .container {
    padding-left: 5rem;
    padding-right: 5rem;
    padding-bottom: 5rem;
}

.content-clients .container > div,
.page-profile .container > div {
    background-color: var(--grey-background-color);
}

.content-clients .container > div:first-child,
.page-profile .container > div:first-of-type {
    margin-top: 4rem;
    padding: 1.25rem 1.25rem 0 1.25rem;

}

h1.profile-tools {
    font-size: 1.5rem;
}

.content-clients .container .article-clients,
.page-profile .container .profile-item {
    padding: 0 1.25rem 1.25rem 1.25rem;
}

.page-profile .container .profile-item {
    padding-top: 1rem;
}

.clients-assessments-table tbody,
.action-table tbody {
    display: flex;
    flex-direction: column;
    color: var(--dark-grey);
}

.clients-assessments-table,
.action-table tbody {
    margin-top: 1.5rem;
}

.clients-assessments-table tbody > tr,
.action-table tbody > tr {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    border-bottom: 0.0625rem solid var(--grey-background-color-alt);
}

.clients-assessments-table tbody > tr:first-child {
    border-top: 0.0625rem solid var(--grey-background-color-alt);
    border-bottom: unset;
}

.clients-assessments-table tbody > tr:first-child,
.td-clients-assessment-date,
.clients-assessments-table tbody > tr:first-child a,
.action-table tbody > tr > td:first-child {
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    color: var(--dark-grey);
}

.action-table tbody > tr > td:nth-child(2) {
    flex-grow: 1;
    padding-left: 3rem;
}

.action-table tbody > tr > td:nth-child(1) {
    text-wrap: nowrap;
}

.navlist a {
    font-weight: var(--font-weight-medium);
    color: var(--dark-grey);
}

.td-clients-assessment-date {
    order: 1;
    width: 8rem;
}

.td-clients-assessment-product {
    order: 2;
    flex-grow: 1;
}

.td-clients-assessment-client {
    order: 3;
    width: 20rem;
}

.td-clients-assessment-status {
    order: 4;
    width: 24rem;
}

.td-clients-assessment-status button:not(last-child)
{
	margin-right: 0.75rem;
	margin-bottom: 0.75rem;
}

.clients-assessment-filter {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    font-weight: var(--font-weight-medium);
    color: var(--dark-grey);
}

.clients-assessment-filter > select {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.clients-assessment-filter > select:last-of-type {
    margin-right: 0;
}

.clients-assessment-filter > .clients-filter {
    display: none;
}

.content-clients {
    color: var(--dark-grey);
    font-size: var(--regular-font-size);
    line-height: var(--regular-font-line-height);
}

.content-clients .container {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
}

.content-clients h2 {
    color: var(--dark-grey);
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: var(--font-weight-medium);
}


@media screen and (max-width: 1024px){
    .content-clients .container,
    .page-profile .container {
        padding-left: 0rem;
        padding-right: 0rem;
        padding-bottom: 0rem;
    }

    .content-clients .container > div:first-child,
    .page-profile .container > div:first-of-type {
        margin-top: 0rem;
        padding: 0.5rem 0.5rem 0 0.5rem;
    }
    
    .content-clients .container .article-clients,
    .page-profile .container .profile-item {
        padding: 0 0.5rem 0.5rem 0.5rem;
    }

    .clients-assessments-table tbody > tr:first-child {
        display: none;
    }

    .clients-assessments-table tbody > tr,
    .profile-item tbody > tr {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem 0;
        height: unset;
    }

    .action-table tbody > tr > td:nth-child(2) {
        padding-left: unset;
    }

    .clients-assessments-table tbody > tr > td,
    .profile-item tbody > tr > td {
        width: max-content;
        padding: 0.25rem 0;
    }

    .clients-assessment-filter {
        flex-direction: column;
        align-items: flex-end;
    }

    .clients-assessment-filter select {
        margin: 0;
    }
}

/* account page */

.page-account {
    padding: 1.5rem;
    max-width: 40rem;
    margin-top: 4rem;
    margin-bottom: 4rem;
    margin-left: 5rem;
    background-color: var(--grey-background-color);
}

.account-table {
	width: 100%;
}

.account-table tr {
	display: flex;
	flex-direction: column;
	padding: 0.5rem 0;
}

.account-table tr:first-of-type {
    padding-top: 1rem;
}

.account-table label {
    color: var(--dark-grey);
    font-weight: var(--font-weight-medium);
}

.content-account .page-title-account {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.page-account .account-error {
    color: #e3231d !important;
    font-weight: 500 !important;

}

#account form {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	flex-wrap: wrap;
	padding-top: 2.438rem;
}

.td-account-header {
    font-weight: var(--font-weight-medium);
    color: var(--dark-grey);
    font-size: var(--medium-font-size);
    line-height: var(--medium-font-line-height);
}

.button-modify-account-details {
    font-weight: var(--font-weight-medium);
    border: none;
    font-size: var(--regular-font-size);
}

.button-modify-account-details:hover {
}

@media screen and (max-width: 1024px){
    .page-account {
        padding: 0.5rem;
        max-width: unset;
        margin-top: 0;
        margin-bottom: 0rem;
        margin-left: 0;
    }
}

/* mail sending styling */
#mail-settings > tbody:nth-child(1) > tr:nth-child(3) > td:nth-child(2) > img:nth-child(2) {
    filter: brightness(0) saturate(100%) invert(75%) sepia(14%) saturate(6199%) hue-rotate(338deg) brightness(102%) contrast(104%);
}

.content-sendinvite .container,
.content-sendaccess .container,
.content-sendreminder .container,
.content-sendresume .container  {
    padding-left: 5rem;
    padding-right: 5rem;
    padding-bottom: 4rem;
    
    width: calc(100% - 10rem);
    max-width: 77rem;
    margin-left: auto;
    margin-right: auto;
}

.content-sendinvite .container div:first-child,
.content-sendaccess .container div:first-child,
.content-sendreminder .container div:first-child,
.content-sendresume .container div:first-child {
    margin-top: 4rem;
    margin-bottom: 2rem;
    max-width: 40rem;
    font-size: var(--medium-font-size);
    line-height: var(--medium-font-line-height);
}

.content-sendinvite .container .module-invite {
    margin-bottom: 2rem;
}

.module-invite h1 {
    font-size: 1.625rem;
}

.content-sendinvite #mail-settings > tbody {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.content-sendinvite #mail-settings > tbody > tr:last-child {
    width: 100%;
}

.content-sendinvite #mail-settings > tbody > tr:nth-child(odd) {
    border: 0.0625rem solid #E4E7EC;
    padding: 1rem;
    width: 40rem;
    margin-bottom: 2rem;
    margin-right: 2rem;
}

table#mail-settings tr > td:first-child {
    width: 3rem !important;
}

table#mail-settings tr#mail-settings-error > td:first-child {
    width: unset !important;
    margin-bottom: 2rem;
}

tr#mail-settings-error {
    margin-bottom: 2rem;
}

.content-sendinvite #mail-settings > tbody > tr > td > table > tbody {
    display: flex;
    flex-direction: column;
}

.content-sendinvite #mail-settings > tbody > tr > td > table > tbody > tr {
    padding: 0.5rem 0;
}

.content-sendinvite table.list tbody,
.content-sendaccess table.list tbody,
.content-sendreminder table.list tbody,
.content-sendresume table.list tbody {
    display: flex;
    flex-direction: column;
}

.content-sendinvite table.list tbody tr,
.content-sendaccess table.list tbody tr,
.content-sendreminder table.list tbody tr,
.content-sendresume table.list tbody tr {
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
}

.content-sendinvite table.list tbody tr:last-child td:first-child,
.content-sendaccess table.list tbody tr:last-child td:first-child,
.content-sendreminder table.list tbody tr:last-child td:first-child,
.content-sendresume table.list tbody tr:last-child td:first-child  {
    display: none;
}

.content-sendinvite table.list tbody tr:first-child td:first-child,
.content-sendreminder table.list tbody tr:first-child td:first-child {
    width: 100%;
}

.content-sendinvite table.list tbody tr:last-child td br,
.content-sendaccess table.list tbody tr:last-child td br,
.content-sendreminder table.list tbody tr:last-child td br,
.content-sendresume table.list tbody tr:last-child td br  {
    display: none;
}

.content-sendinvite table.list tbody tr:last-child td:last-child,
.content-sendaccess table.list tbody tr:last-child td:last-child,
.content-sendreminder table.list tbody tr:last-child td:last-child,
.content-sendresume table.list tbody tr:last-child td:last-child {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.content-sendinvite textarea,
.content-sendaccess textarea,
.content-sendreminder textarea,
.content-sendresume textarea {
    height: 14rem;
    width: 100%;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.content-sendinvite .list textarea,
.content-sendinvite .list input,
.content-sendaccess .list textarea,
.content-sendaccess .list input,
.content-sendreminder .list textarea,
.content-sendreminder .list input,
.content-sendresume .list textarea,
.content-sendresume .list input {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    width: calc(100% - 1rem);
}

.content-sendinvite b,
.content-sendaccess b,
.content-sendreminder b,
.content-sendresume b {
    font-weight: var(--font-weight-medium);
    font-size: var(--regular-font-size);
    color: var(--dark-grey);
}

@media screen and (max-width: 1024px) {
    .content-sendinvite .container,
    .content-sendaccess .container,
    .content-sendreminder .container,
    .content-sendresume .container  {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-bottom: 1rem;
    }

    .content-sendinvite .container div:first-child,
    .content-sendaccess .container div:first-child,
    .content-sendreminder .container div:first-child,
    .content-sendresume .container div:first-child {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .content-sendinvite #mail-settings > tbody > tr:nth-child(odd) {
        width: unset;
        margin-bottom: 0;
        margin-right: 0;
    }

    #mail-settings {
        margin-bottom: 1rem;
    }

    .content-sendinvite .container, .content-sendaccess .container, .content-sendreminder .container, .content-sendresume .container{
        width: unset;
    }
}

/* contact page confirmation */
.page-contact #article {
    margin-top: 4rem;
    padding-left: 5rem;
    padding-right: 5rem;
    padding-bottom: 4rem;
}

@media screen and (max-width: 1024px) {
    .page-contact #article {
        margin-top: 1rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-bottom: 1rem;
    }
}

/* Thema overzicht page */
.themas-overzicht {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-left: 5rem;
    padding-right: 5rem;

    position: relative;
    background-image: url('../images/ruled-background.png');
    background-size: 20% auto;
}

.themas-overzicht > h1 {
    font-size: var(--title-font-size);
    line-height: var(--title-font-line-height);
}

.themas-overzicht:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 85%;
    background-color: white;
    z-index: -1;
}

.themas-overzicht .themas-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.themas-overzicht .themas-container .themas-tile {
    height: 17rem;
    position: relative;
    color: var(--white);

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    box-shadow: 5px 5px 15px #17212B26;

    cursor: pointer;

    line-height: 1.625rem;
}

.themas-tile-icon {
    height: 4rem;

    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

/* some magical filter to turn the svg in the img white, using this codepen to generate it: https://codepen.io/sosuke/pen/Pjoqqp */
.themas-tile-icon > img {
    height: 100%;
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1143%) hue-rotate(52deg) brightness(111%) contrast(101%);
}

.themas-tile-title {
    font-size: 1.250rem;
    font-weight: var(--font-weight-medium);
    width: 80%;
    margin-bottom: 0.250rem;
}

.themas-tile-subtitle {
    font-size: var(--regular-font-size);
    line-height: var(--regular-font-line-height);
    width: 80%;
}

.themas-tile-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.themas-tile-image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (min-width: 1024px) {
    .themas-overzicht .themas-container .themas-tile {
        margin: 1.5rem;
        flex-basis: calc(33% - 3rem);
    }

    .themas-overzicht .themas-container {
        margin: -1.5rem;
        max-width: 84rem;
    }
    

    .themas-tile * {
        transition: all 0.3s;
    }

    .themas-tile-subtitle {
        visibility: hidden;
        opacity : 0; transition:opacity 1s;
    }

    .themas-tile-title {
        font-size: 1.5rem;
    }

    .themas-tile-icon {
        height: 6rem;
    }

    .themas-tile:hover .themas-tile-subtitle {
        visibility: visible;
        opacity : 1
    }

    .themas-tile:hover .themas-tile-icon {
        height: 4rem;
    }
}

@media screen and (max-width: 1024px) {
    .themas-overzicht {
        padding: 0.75rem 0.75rem 2rem 0.75rem;
    }
    
    .themas-overzicht .themas-container {
        display: flex;
        flex-direction: column;
    }
        
    .themas-container {
        width: 100%;
        margin-bottom: -0.75rem;
    }

    .themas-tile {
        width: 100%;
        margin-bottom: 0.75rem;
    }
}

/* forgot password & other small pages */
.page-forgotpassword .container,
.page-resetpassword .container {
    padding-left: 5rem;
    padding-right: 5rem;
    padding-bottom: 4rem;
}

.page-forgotpassword #article,
.page-resetpassword #article {
    max-width: 40rem;
    margin-top: 4rem;
}

.page-forgotpassword form label {
    font-weight: var(--font-weight-medium);
} 

.page-resetpassword form button {
    color: var(--white);
}

.page-resetpassword form button:hover {
    background-color: #E69900;
}

.page-forgotpassword .container form {
    margin-top: 1rem;
}

.page-forgotpassword .container table tbody {
    display: flex;
    flex-direction: column;
}

.page-forgotpassword .container table tbody tr {
    display: flex;
    flex-direction: column;
}

.page-forgotpassword .container font {
    color: #2D343B !important;
}

@media screen and (max-width: 1024px) {
    .page-forgotpassword .container,
    .page-resetpassword .container {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 1rem;
    }

    .page-forgotpassword #article,
    .page-resetpassword #article {
        max-width: unset;
        margin-top: 1rem;
    }
}

/* css for displaying legacy portal link */
.legacy-portal-message {
    display: none;
}
/* end css displaying legacy portal link */

/* styling for the onderzoek & analytics page. might be reused for other content/text pages. */
.information-title {
    text-align: center;
}

.information-content img {
    display: block;
}

.information-block {
    position: relative;
    display: flex;
    flex-direction: row;
    margin-left: auto;
    margin-right: auto;
}

.information-block .information-text-content {
    width: calc(50% - 8rem);
    padding: 3rem 0rem;
    font-size: var(--medium-font-size);
    line-height: var(--medium-font-line-height);
}

.information-list-container {
    background-color: #F4F7FC;
    width: calc(50% - 6rem);
    padding: 3rem;
    font-size: var(--medium-font-size);
    line-height: var(--medium-font-line-height);
}

.information-list {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.information-list-title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-medium);
    margin-bottom: 3rem;
}

.information-list-item-title {
    font-weight: var(--font-weight-medium);
    font-size: 1.250rem;
    width: 100%;
}

.information-list li {
    position: relative;
    margin-top: 1.5rem;
    left: 2rem;
}

.information-list li:first-of-type {
    margin-top: 0;
}

.information-list li:before {
    content: '';
    width: 1rem;
    height: 1rem;
    position: absolute;
    left: -2rem;
    background-color: #CC2E17;
}

.information-image {
    width: 50%;
}

.information-image img {
    width: 100%;
}

.information-block-dark-background {
    background-color: var(--dark-grey);
    color: var(--white);
}

.information-block-dark-background .information-medium-title {
    color: var(--white);
}

.information-block-dark-background .information-image {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.information-block-list {
    display: flex;
    flex-direction: row;
    margin: -1.5rem;
    color: var(--white);
}

.information-block-list > div {
    display: flex;
    flex-direction: column;
    margin: 1.5rem;
    flex-basis: calc(33% - 3rem);
    position: relative;
    z-index: 0;

}

.information-block-list-item:before {
    content: '';
    background: linear-gradient(0deg, #2D343B80, #2D343B);
    position: absolute;
    z-index: 0;
    height: 100%;
    width: 100%;
}

.information-block-list > div > img {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.information-block-list-item-title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-medium);
    text-align: center;
    padding: 1.5rem;
    z-index: 1;
}

.information-block-list-item-text {
    text-align: center;
    z-index: 1;
    padding: 0 1rem 3rem 1rem;
}

.information-block-tiles > div > p {
    margin-bottom: 2.5rem;
    font-size: var(--medium-font-size);
    line-height: var(--medium-font-line-height);
    width: 80%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.information-block-tiles > div > h2 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.information-block-popout {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.information-text-content-popout-container {
    position: relative;
}


.information-block-background {
    width: 100%;
    position: relative;
}

.information-block-background:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: var(--dark-grey);
    opacity: 85%;
    z-index: 0;
}

.information-block-background img {
    height: 100%;
    width: 100%;
    position: absolute;
    object-fit: cover;
    z-index: -1;
}

.information-grey-background {
    background-color: #F4F7FC;
    width: 50%;
    font-size: var(--medium-font-size);
    line-height: var(--medium-font-line-height);
}

.information-text-content-popout {
    font-size: var(--medium-font-size);
    line-height: var(--medium-font-line-height);
}

.information-white-background {
    background-color: var(--white);
    width: 50%;
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.information-block-dark-background-content {
    width: 50%;
}

.information-block-dark-background-content .information-image {
    padding-top: 3rem;
}

.information-block-background .information-text-content {
    max-width: 80rem;
    padding: 3rem 5rem;
    margin-left: auto;
    margin-right: auto;
    color: var(--white);
    z-index: 1;
    position: relative;
    font-size: var(--medium-font-size);
    line-height: var(--medium-font-line-height);
}

.information-block-background .information-medium-title {
    color: var(--white);
}

.information-block-two .information-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.information-block .image-no-fit img {
    width: 100%;
    height: unset;
    object-fit: unset;
}

#article.information-content {
    z-index: -1;
    padding: 0;
    background-image: url('../images/ruled-background.png');
    background-size: 20% auto;
    position: relative;
    padding-top: 0;
}

#article.information-content:after {
    z-index: -1;
    position: absolute;
    content: "";
    height: 65%;
    width: 100%;
    top: 0;
    left: 0;
    background: white;
}

#article.information-content:before {
    z-index: -1;
    position: absolute;
    content: "";
    height: 35%;
    width: 100%;
    bottom: 0;
    left: 0;
    background: white;
    opacity: 85%;
}

#article.information-content .information-block-centered {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0 5rem;
    margin-top: 3rem;
}

.information-block-two .information-text-content {
    background-color: #F4F7FC;
}

.information-medium-title {
    font-weight: var(--font-weight-medium);
    font-size: 1.5rem;
    color: var(--dark-grey);
    margin-bottom: 0.5rem;
}

.information-text-content-popout {
    border-radius: 0.250rem;
    background-color: #F4F7FC;
    box-shadow: 5px 5px 15px #17212B26;
}

.information-image {
    width: 100%;
}

.information-block-dark-background .information-text-content {
    width: unset;
}

.organisatieadvies.article-default {
    padding: 0;
}

.organisatie-advies-text-content .information-text-content {
    font-size: var(--medium-font-size);
    line-height: var(--medium-font-line-height);
}

@media screen and (min-width: 1024px){
    .organisatie-advies-container {
        position: relative;
    }

    @media screen and (min-height: 800px){
        .organisatie-advies-container {
            height: calc(100vh - 6.25rem);            
        }
    }

    .organisatie-advies-cover-image {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .organisatie-advies-cover-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .organisatie-advies-text-content {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .organisatie-advies-text-content:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, rgba(255,255,255,0.85) 30%, transparent);
        z-index: 0;
    }

    .organisatie-advies-text-content .information-title {
        text-align: left;
    }

    .organisatie-advies-text-content .information-text-content {
        z-index: 1;
        position: relative;
        width: 40%;
        min-width: 40rem;
        padding: 4rem 5rem;
    }

    .information-text-content-popout-container {
        width: 50%;
    }

    
    .information-block-background .information-text-content p {
        width: 50%;
    }

    .information-text-content-popout {
        padding: 2rem 3rem;
        height: max-content;
        position: relative;
        position: absolute;
        top: 50%;
        left: -8rem;
        transform: translate(0, -50%);
    }

    .half-max-width-align-left,
    .half-max-width-align-right {
        max-width: 40rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .half-max-width-align-left {
        margin-right: auto;
    }

    .half-max-width-align-right {
        margin-left: auto;
    }

    .information-grey-background {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .information-grey-background .half-max-width-align-right,
    .information-block-dark-background .half-max-width-align-right,
    .information-grey-background .half-max-width-align-left,
    .information-block-dark-background .half-max-width-align-left {
        padding-right: 3rem;
        padding-left: 3rem;
        max-width: 40rem;
    }

    .information-grey-background .information-list {
        padding-right: 2rem;
    }

    .information-white-background .half-max-width-align-left {
        max-width: 46rem;
    }
    
    .information-block-popout .information-image img {
        border-top-left-radius: 0.250rem;
        border-top-right-radius: 0.250rem;
    }

    .information-block-popout .information-image {
        width: 50%;
        border-radius: 0.250rem;
    }
}

img.desktop-image {
    display: block;
}

img.mobile-image {
    display: none;
}

.organisatie-advies-container {
    margin-bottom: 3rem;
}

@media screen and (max-width: 1024px){
    .organisatie-advies-container {
        position: relative;
    }

    .organisatie-advies-cover-image {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .organisatie-advies-cover-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .information-block {
        flex-direction: column;
    }

    .information-block .information-text-content {
        padding: 1rem;
        width: unset;
    }

    #article.information-content .information-block-centered {
        padding: 0.5rem;
        margin-top: 0.5rem;
    }

    .information-image {
        width: unset;
    }

    .information-title {
        margin-top: 1rem;
    }

    .information-list li {
        max-width: calc(100% - 2rem);
    }
    
    .information-block-list {
        flex-direction: column;
    }

    .information-block-list-item {
        min-height: 15rem;
    }

    .information-block-popout {
        flex-direction: column;
    }

    .information-text-content-popout {
        padding: 1rem;
        margin-top: 1rem;
    }

    .information-block-background .information-text-content {
        padding: 1rem;
    }

    .information-grey-background {
        padding: 1rem;
        width: calc(100% - 2rem);
    }

    .information-white-background {
        width: calc(100% - 2rem);
        padding: 1rem;
        order: -1;
    }

    .information-block-dark-background-content {
        width: 100%;
    }

    .information-block-dark-background-content .information-image {
        padding-top: 0;
    }

    #article.information-content .information-block-popout {
        padding: 0;
    }

    .information-text-content-popout {
        top: -5rem;
        position: relative;
        width: 80%;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: -5rem;
    }

    .information-block-list {
        margin: 0;
    }

    .information-block-list > div {
        margin: 0.5rem;
    }

    .organisatie-advies-container {
        position: relative;
    }

    .organisatie-advies-cover-image {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .organisatie-advies-cover-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .organisatie-advies-text-content {
        position: relative;
        height: 100%;
        z-index: 1;
        padding: 1rem;
        background-color: var(--dark-grey);
        opacity: 85%;
        color: var(--white);
    }

    .organisatie-advies-text-content .information-title {
        color: var(--white);
    }

    img.desktop-image {
        display: none;
    }
    
    img.mobile-image {
        display: block;
    }

    .organisatie-advies-container {
        margin-bottom: 1rem;
    }
}

/* bss slideshow css */
.bss-slides{
  position: relative;
  display: block; 
  line-height: 0;/*removes the gap if you put a border on the slideshow div*/   
}
figcaption {
  line-height: 1.5; /* restores line-height to the child element*/
}
.bss-slides figure{
  position: absolute;
  top: 0;
  width: 100%;
}
.bss-slides figure:first-child{
  position: relative;
}
.bss-slides figure img{
  opacity: 0;
  transition: opacity 1.2s;
  backface-visibility: hidden;
}
.bss-slides .bss-show{
  z-index: 2;
}
.bss-slides .bss-show img{
  opacity: 1;
  backface-visibility: hidden;
  position: relative; 
}

.bss-slides figcaption{
  position: absolute;
  font-size: .8em;
  bottom: .75em;
  right: .35em;
  padding: .25em;
  color: #fff;
  background: #000;
  background: rgba(0,0,0, .25);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 1.2s;
}

.bss-slides figcaption h4 {
    margin-top: 6rem;
    font-family: var(--main-font-family);
    font-weight: var(--font-weight-medium);
    color: var(--standard-text-color);
    font-size: 1.5rem;
}

.bss-slides .bss-show figcaption{
  z-index: 3;
  opacity: 1;
}
.bss-slides figcaption a{
  color: #fff;    
}
.bss-next, .bss-prev{
  color: #fff;
  position: absolute;
  background: #000;
  background: rgba(0,0,0, .6);
  top: 50%;
  z-index: 4;
  font-size: 2em;
  margin-top: -1.2em;
  opacity: .3;
  user-select: none;
}

@media (max-width: 1024px){
    .bss-next, .bss-prev {
        top: unset;
        bottom: 11rem;
    }
}

.bss-next:hover, .bss-prev:hover{
  cursor: pointer;
  opacity: 1;
}
.bss-next{
  right: 0;
  padding: 10px 5px 15px 10px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.bss-prev{
  left: 0;
  padding: 10px 10px 15px 5px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.bss-fullscreen{
  display: block;
  width: 32px;
  height: 32px;    
  background: rgba(0,0,0,.4) url(../img/arrows-alt_ffffff_64.png); 
  background-size: contain;
  position: absolute;
  top: 5px;
  left: 5px;   
  cursor: pointer;    
  opacity: .3;
} 
.bss-fullscreen:hover{
  opacity: .8;   
}
:-webkit-full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    background-size: contain;
}
:-moz-full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    background-size: contain;
}
:-ms-fullscreen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    background-size: contain;
}
:full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    background-size: contain;
}
:fullscreen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    background-size: contain;
}
/* bss slideshow css end */

/* overrides for slideshow css */
.bss-slides figcaption{
    bottom: 0em;
    right: 0em;
    padding: .5em;
    width: calc(40% - 1em);
    height: 100%;
    border-radius: 0;
    min-height: 7em;
    text-align: left;
    font-size: var(--regular-font-size);
    line-height: var(--regular-font-line-height);
    background-color: transparent;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.bss-next,
.bss-prev {
    background-color: var(--dark-grey);
    border-radius: 0;
    opacity: 1;
    height: 3rem;
    width: 3rem;
    padding: 0;
    color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 90%;
}

.bss-next {
    right: -2rem;
    background-image: url("../images/keyboard_arrow_right.svg");
}

.bss-prev {
    left: -2rem;
    background-image: url("../images/keyboard_arrow_left.svg");
}

.figcaption-medium {
    font-size: 1.25rem;
    font-weight: var(--font-weight-medium);
}

@media screen and (max-width: 1024px){
    .h-captcha {
        width: 50%;
        transform: scale(2);
        transform-origin:0 0;
        margin-bottom: 2.5rem;
    }

    div#contact-widget + div {
        transform: scale(1.5);
        transform-origin: center bottom 0rem;
    }

    .bss-next {
        right: -1rem;
    }
    
    .bss-prev {
        left: -1rem;
    }
}

@media (max-width: 1024px){
    .bss-slides figure {

    }

    .safetymonitor-slideshow figure img {
        height: unset;
    }

    .bss-slides figcaption {
        position: relative;
        bottom: 0;
        right: 0;
        width: calc(100% - 1em);
    }

    .bss-slides figcaption p {
        font-size: 1.25rem;
    }

    .bss-slides figcaption h4 {
        margin-top: 0;
    }

    .slideshow-counter {
        order: -1;
        text-align: center;
        margin-bottom: 2rem;
    }
}

/* Blog widget styling */
.widget-blog {
    max-width: 80rem;
    margin-right: auto;
    margin-left: auto;
    margin-top: 5rem;
    margin-bottom: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.widget-blog .blog-list-container,
.blog-read-more .read-more-list {
    display: flex;
    justify-content: flex-start;
}

.blog-list-container .blog-tile,
.read-more-list .read-more-tile {
    border-radius: 0.250rem;
    position: relative;
    cursor: pointer;
}

.blog-list-container .blog-tile.featured {
    flex-basis: calc(100% - 3rem);
}

.blog-image {
    position: relative;
    height: 12rem;
    width: 100%;
}

.featured .blog-image,
.blog-banner {
    height: 24rem;
    position: relative;
}

.featured .blog-image:before {
	content: '';
	background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 35%, rgba(255,255,255,0) 100%);
	z-index: 1;
	position: absolute;
	width: 100%;
	height: 100%;
    border-radius: 0.250rem;
}

.blog-image img,
.blog-banner img {
    border-radius: 0.250rem;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.featured .blog-short-text {
    display: none;
}

.blog-title {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--dark-grey);
    font-size: 1.5rem;
    font-weight: var(--font-weight-medium);
    line-height: 2rem;
}

.blog-short-text {
    font-size: var(--medium-font-size);
    line-height: var(--medium-font-line-height);
}

.blog-section {
    font-weight: var(--font-weight-medium);
}

.blog-quote {
    font-size: 1.5rem;
    font-style: italic;
    border-top: #2D343B solid 0.0625rem;
    border-bottom: #2D343B solid 0.0625rem;
    padding: 1.25rem 0;
    margin: 1.25rem 0;
}

.read-more-tile .blog-short-text {
    font-size: var(--regular-font-size);
    line-height: var(--regular-font-line-height);
}

.featured .blog-title {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 1;
    color: var(--white);
    font-size: var(--title-font-size);
    line-height: var(--title-font-line-height);
    font-weight: var(--font-weight-medium);
    margin: 0;
    max-width: 40rem;
}

.blog-read-more {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.read-more-title {
    font-size: var(--title-font-size);
    line-height: var(--title-font-line-height);
    font-weight: var(--font-weight-medium);
    margin-bottom: 3.5rem;
    color: var(--dark-grey);
}

.blog-container {
    width: calc(100% - 3rem);
}

.blog-read-more {
    width: 100%;
}

.blog-content {
    max-width: 50rem;
    font-size: var(--medium-font-size);
    line-height: var(--medium-font-line-height);
}


@media only screen and (min-width: 1024px) {
    .widget-blog .blog-list-container,
    .blog-read-more .read-more-list {
        width: 100%;
        margin: -1.5rem;
        flex-wrap: wrap;
        flex-direction: row;
    }
    
    .blog-list-container .blog-tile,
    .read-more-list .read-more-tile {
        margin: 1.5rem;
        flex-basis: calc(33.33% - 3rem);
    }
}

@media only screen and (max-width: 1024px) {
    .widget-blog {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    .widget-blog .blog-list-container,
    .blog-read-more .read-more-list {
        width: calc(100% - 1rem);
        flex-direction: column;
    }
    
    .blog-list-container .blog-tile,
    .read-more-list .read-more-tile {
        margin-bottom: 1.5rem;
    }

    .blog-image,
    .featured .blog-image {
        height: 60vw;
    }

    .blog-banner {
        height: 10rem;
    }

    .featured .blog-title {
        position: absolute;
        bottom: 1.5rem;
        left: 1.5rem;
        z-index: 1;
        color: var(--white);
        font-size: var(--title-font-size);
        line-height: var(--title-font-line-height);
        font-weight: var(--font-weight-medium);
        margin: 0;
        max-width: 40rem;
    }

    .blog-short-text {
        display: none;
    }

    .blog-image:before {
        content: '';
        background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 35%, rgba(255,255,255,0) 100%);
        z-index: 1;
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 0.250rem;
    }
}

.pdf-container {
    position: fixed;
    top: 0;
    height: calc(100% - 6.25rem);
    background: rgba(255,255,255,0.85);
    padding: 6.25rem 3rem 0 3rem;
    width: calc(100% - 6rem);
    z-index: 1;
    border-radius: 0.250rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.pdf-container iframe {
    width: 60rem;
    height: calc(100% - 2rem);
}

.close-pdf-viewer {
    display: flex;
    justify-content: flex-end;
    width: 60rem;
    height: 0;
}

.close-pdf-viewer button {
    position: relative;
    left: 3rem;
}

@media only screen and (max-width: 1024px) {
    .pdf-container {
        position: fixed;
        height: calc(100% - 4rem);
        padding: 4rem 0.5rem 0 0.5rem;
        width: calc(100% - 1rem);
        justify-content: flex-end; 
    }
    
    .pdf-container iframe {
        width: 100%;
        height: calc(100% - 3rem);
    }
    
    .close-pdf-viewer {
        width: 100%;
        height: 3rem;
    }
    
    .close-pdf-viewer button {
        left: unset;
    }
}

.thema-blog-container {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 2.5rem;
    padding-top: 1.5rem;
}

.thema-blog-container .thema-blog {
    margin: 1.5rem;
}

.thema-blog-header {
    height: 20rem;
    position: relative;
    margin-bottom: 1.5rem;
}

.thema-blog-title {
    color: var(--white);
    font-size: var(--title-font-size);
    line-height: var(--title-font-line-height);
    font-weight: var(--font-weight-medium);
    position: absolute;
    bottom: 1rem;
    left: 1.5rem;
    z-index: 2;
}

.thema-blog-image {
    width: 100%;
    height: 100%;
}

.thema-blog-image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 0.250rem;
}

.thema-blog-image:before {
    content: '';
    background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 35%, rgba(255,255,255,0) 100%);
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 0.250rem;
}

.thema-blog-category-title {
    flex-basis: 100%;
    text-align: center;
}

.thema-blog-category-title h1 {
    padding: 0 1.5rem;
}

.lees-meer-blog {
    background-color: #FF9D1B;
    color: var(--white);
    margin-top: 1rem;
    padding: 0.875rem 1.5rem;
    display: flex;
    align-items: center;
}

.lees-meer-blog:after {
    content: url("../images/Icon\ feather-arrow-right-white.svg");
    position: relative;
    margin-left: 0.5rem;
    top: 0.1rem;
}

.lees-meer-blog:hover {
    background-color: #FC910D;
}

@Media screen and (min-width: 1024px){
    .thema-blog-container {
        max-width: 80rem;
        margin: -1.5rem;
        padding-bottom: 5.5rem;
        padding-top: 1.5rem;
        width: 100%;
    }
    
    .thema-blog-container .thema-blog {
        margin: 1.5rem;
        flex-basis: calc(50% - 3rem);
    }    
}

@Media screen and (max-width: 1024px){
    .thema-blog-header {
        height: 60vw;
    }
}

/* styling for the agile lead banner on the homepage and making the navigation arrows visible again */
.homepage-slideshow .bss-prev, 
.homepage-slideshow .bss-next {
  display: unset;
}

.bss-slides .agile-lead-banner {
	position: absolute;
	bottom: 0;
	left: -1rem;
	width: calc(100% + 1rem);
	height: 5rem;

	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

	background-color: rgba(52, 40, 110, 0.95);
	z-index: 2;
	padding: 1rem 0;

	border-top: 0.25rem solid var(--white);
	box-shadow: 0 5px 15px rgba(0,0,0,0.16);
}

.bss-slides .agile-lead-banner h2 {
	color: var(--white);
    font-size: var(--title-font-size);
    line-height: var(--title-font-line-height);
	font-weight: var(--font-weight-medium);
}

.bss-slides .agile-lead-banner a {
	font-size: 1.75rem;
	font-weight: var(--font-weight-medium);
	color: #FD9D27;
	cursor: pointer;
}

.custom-agile-employees-organisation {
    display: flex;
    flex-direction: row;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4rem;
    width: 100%;
}

.custom-agile-employees-organisation p {
    margin-bottom: 1.5rem;
    font-size: var(--medium-font-size);
    line-height: var(--medium-font-line-height);
}

.bold-text {
    font-weight: var(--font-weight-medium);
}

.maak-test {
    display: block;
    color: var(--white);

}

.agile-employees-description,
.agile-employees-image {
    width: 50%;
    position: relative;
}

.agile-employees-description {
    width: calc(50% - 6rem);
    padding: 5rem 2rem 5rem 4rem;
}

.agile-employees-description p a {
    color: var(--dark-grey);
}

a.maak-test {
    text-decoration: none;
    display: block;
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
    width: max-content;
}

.agile-employees-image-container:after {
    content: '';
    background-color: #25B299;
    border-top-left-radius: 5rem;
    border-bottom-left-radius: 5rem;
    height: 100%;
    top: 0;
    right: 0;
    left: 15rem;
    display: block;
    position: absolute;
    z-index: 0;
}

.agile-employees-image-container {
    height: 80%;
    width: 100%;
    left: 0;
    top: 10%;
    display: block;
    position: absolute;
    overflow: hidden;
}

.agile-employees-image-container img {
    
    position: relative;

    height: 83%;
    width: auto;

    z-index: 1;

    top: 52%;
    transform: translate(0, -50%);
}

@media screen and (max-width: 1024px){
    .agile-employees-image {
        display: none;
    }

    .agile-employees-description {
        width: 100%;
        padding: 1rem 0.5rem;
    }
}


/* Fix to change html layout without changing the backend for agile werken category */
#article.agile-werken > .category-container > .category-image-container {
    display: none;
}

#article.agile-werken > .category-container > .category-description {
    padding: unset;
    background-color: var(--white);
}

@media screen and (min-width: 1024px){
    #article.agile-werken > .category-container > .category-description > .category-content {
        display: flex;
        flex-wrap: wrap;
    }

    #article.agile-werken .category-container,
    #article.agile-werken .category-description,
    #article.agile-werken .category-content {
        width: 100%;
    }

    #article.agile-werken .category-content .category-image-container {
        width: 50%;
    }

    #article.agile-werken .category-content .category-description {
        width: calc(50% - 8rem);
    }

    #article.agile-werken .category-description .category-image {
        min-height: calc(100vh - 6.25rem);
    } 
}

@media (orientation:landscape) and (max-width: 1024px){
    .container {
        padding-top: 3rem;
    }

    #logo {
        height: 1.5rem;
    }

    .headerbar {
        min-height: 3rem;
    }

    .navbar {
        min-height: 2rem;
    }

    .swappable-element:not(#swappable-default) {
        top: 4rem;
        max-height: calc(100% - 8rem);
    }

    .close-swappable-popup {
        top: 4.5rem;
    }
}

#article .full-width-container {
    display: relative;
    z-index: 1;
}


.home-download {
    /* Hide element for now */
    display: none;
    
	margin-top: -6.75rem;
	z-index: 10;
	position: fixed;
}

.home-download .limited-width-block-centered {
	margin-right:0;
	max-width: fit-content;
	padding-right: 5rem;
}

.home-download a, 
.home-download a:visited {
	color: black;
	text-decoration: none;
}

@media screen and (max-width: 1024px) {
	.home-download {
		margin-top: 0;
		z-index: 0;
		position: initial;
	}
	
	.home-download .limited-width-block-centered {
		max-width: 100%;
		width: 100%;
		padding-right: 0;
		margin-right: auto;
	}
}