@import url('https://fonts.dilemmamanager.nl/SourceSansPro/stylesheet.css');

:root {
    /* main colors */
    --white: #FFFFFF;

    --theme-color-1: #A2212B;
    --theme-color-2: #D12A38;

    --grey-color-1: #F5F3F2;
    --grey-color-2: #2D343B;
    --grey-color-3: #2D343B40;
    --grey-color-4: #2D343B26;
    --grey-color-5: #EAE6E2;
    --grey-color-6: #17212B40;
}

body {
    font-family: 'Source Sans Pro';
    line-height: 1.5rem;
    color: #2D343B;
}

#logo {
    height: 1.75rem;
    padding-bottom: 0.8rem;
}

.logo-image img {
    height: 1rem;
    visibility: hidden;
}

.logo-image:before {
    content: "";
    display: block;
    height: 2rem;
    width: 100%;
    background-image: url('../images/website_logo_wit.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

.half-width-block {
    width: 50%;    
}

@media screen and (min-width: 1024px) {
    .show-responsive {
        display: none !important;
    }
}

@media screen and (max-width: 1024px) { 
    .hide-responsive {
        display: none !important;
    }

    #logo {
        height: 2.5rem;
        padding-bottom: 0;
        padding-top: 1rem;
    }
}

@media screen and (max-width: 1024px){
    .sz-navbar-hamburger:before { 
        content:' ';
        width: 1.5rem;
        height: 1.5rem;
        display: block;
        background-image: url('../images/Menu.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: #FFFFFF;
    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;
}

@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: 'Source Sans Pro';
    color: #2D343B;
    box-sizing: border-box;
    border-color: #EAE8E2;
    padding: 0.75rem;
    width: 100%;
}

button {
    font-family: 'Source Sans Pro';
    font-weight: 600;
    font-size: 1.125rem;
    padding: 0.75rem 1rem;
    border-radius: 50px;
    background-color: var(--theme-color-2);
    color: #ffffff;
    width: max-content;
}

button:hover {
    background-color: var(--theme-color-1);
}

h1 {
    color: var(--theme-color-1);
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
    line-height: 3.25rem;
}

.text-highlight {
    color: var(--theme-color-1);
    font-weight: 600;
}

.text-yellow {
    color: var(--theme-color-1);
    font-weight: 600;
}

h2 {
    color: #2D343B;
    font-size: 2.125rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
    line-height: 2.75rem;
}

h3 {
    color: #2D343B;
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
    line-height: 2rem;
}

h4 {
    color: #2D343B;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
    line-height: 2.75rem;
}

b,
.bold {
    font-weight: 600;
}

p {
    color: #2D343B;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.625rem;
}

textarea {
    resize: none;
}

input {
    width: 1rem;
    height: 1rem;
}

.button {
    font-size: 1.125rem !important;
}

.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(--theme-color-2);
    color: white;
    border-radius: 50px;
}

.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(--theme-color-1);
}

.button-shoppingcart-delete-product,
.button-cancel-purchase {
    font-size: 1rem;
    font-weight: 600;
    color: #CC2E17;
    border: none;
    background: transparent;
    text-decoration: underline;
    text-decoration-color:  #CC2E17;
}

.button-shoppingcart-delete-product,
.button-cancel-purchase,
button.buttonm.button-shoppingcart-delete-product,
.button-cancel,
.button-back   {
    background-color: transparent !important;
    color: #2D343B !important;
    border: 0.0625rem solid #2D343B !important;
}

.button-shoppingcart-delete-product:hover,
.button-cancel-purchase:hover {
    background-color: transparent;
    color: #2D343B;
    border: 0.0625rem solid #2D343B;
}

.button-cancel-purchase {
    display: none;
}

.button-confirm-purchase {
    background-color: #F4F7FC;
    color: #2D343B;
    border: 0.0625rem solid #1D163D;
}
.confirm-purchase-table .confirm-purchase-buttons .button {
    background-color: transparent;
    color: #2D343B;
    border: 0.0625rem solid #1D163D;
}

.button-confirm-purchase:hover {
    background-color: transparent;
    color: #2D343B;
    border: 0.0625rem solid #1D163D;
}

button.button.buttonl.button-confirm-webshop-confirm-sumbit.button-forward,
button.buttonm.button-shoppingcart-make-payment {
    background-color: var(--theme-color-1);
}

button.button.buttonl.button-confirm-webshop-confirm-sumbit.button-forward:hover,
button.buttonm.button-shoppingcart-make-payment:hover {
    background-color: var(--theme-color-1);
}

.button-shoppingcart-continue-shopping,
.button-cancel-payment,
.button-back-to-cart,
.button-expired-back {
    background-color: #F4F7FC;
    color: #2D343B;
}

.button-shoppingcart-continue-shopping:hover,
.button-cancel-payment:hover,
.button-back-to-cart:hover,
.button-expired-back:hover  {
    background-color: var(--theme-color-1);
}

.button-add-to-cart,
.button-paycredits,
.button-paylater,
.button-payment-success {
    color: #FFFFFF;
    background-color: #FF9D1B;
}

.button-add-to-cart:hover,
.button-paycredits:hover,
.button-paylater:hover,
.button-payment-success:hover {
    background-color: var(--theme-color-1);
}

.headerbar .shoppingcart {
    background-image: url("../images/shopping-cart.svg");
    background-size: cover;
    height: 1.5rem;
    width: 1.5rem;
    background-color: transparent;
    color: var(--theme-color-2);
    position: relative;
    padding: 0;
    border-radius: 0;
}

.footer-content {
    max-width: 77rem;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
    padding-top: 3rem;
}

.footer .social-media-footer {
    display: none;
}

.logo-footer:after {
    content: "Powered by DilemmaManager";
}

@media screen and (max-width: 1024px){
    .contactdetails {
        margin-top: 1rem;
    }    
}


.contactdetails:before {
	content: "DilemmaManager";
}

.contactdetails li:first-of-type {
    display: none;
}

.logo-footer {
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}

.module-login,
.module-error,
.login-error {
    max-width: 77rem;
    margin-left: auto;
    margin-right: auto;
}

.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;
}

/* Hiding menu items because we don't want them shown */
.menuitem8 {
    display: none;
}

/* Hiding 'Professionals' from sitemap in footer because the page isn't finished yet */
.sitemap > li:nth-child(4) {
    display: none;
}

/* end hiding menu items */

/* 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: #2D343B;
}

.menu a {
    font-weight: 600;
}

.login-name {
	font-weight: 600;
}

#loginstatus {
    color: #2D343B;
}

#loginstatus > span {
    margin-left: 3rem;
}

#loginstatus .credits .credits-amount {
    margin-left: 0.1rem;
}

ul.submenu {
    white-space: nowrap;
}

ul.submenu li.selected,
ul.submenu li:hover {
    background-color: #f4f7fc;
}
.footer {
    background-color: var(--theme-color-1);
    color: var(--white);
}
.footer-content {
    border-top: 0.5px solid #2D343B;
}

.footer-block,
.footer-block a {
    color: var(--white);
    font-weight: 100;
}

.footer-block-title {
    font-weight: 600;
}

#existinguser a.forgotpassword {
	position:relative;
	left: 6rem;
	top: -3.2rem;
}

.responsive-my-account a {
    color: var(--theme-color-1);
}

.topbar {
    background-color: white;
    transition:background-color 0.5s ease;
}

#existinguser,
#newuser {
	border-radius: 0.250rem;
	font-weight: 600;
    color: #2D343B;
}

#existinguser > form, 
#newuser > form {
    padding: 0.5rem 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;
    }

    #existinguser a.forgotpassword {
        left: unset;
        top: unset;
    }

    .logo-footer:after {
        margin-left: auto;
        margin-right: auto;
    }

    .footer-block a {
        margin-left: auto;
        margin-right: auto;
        display: inline-block;
    }

    .footer-block-title {
        text-align: center;
    }

    .contactdetails {
        text-align: center;
    }

    .sitemap li,
    .my-account li {
        width: min-content;
        margin-left: auto;
        margin-right: auto;
    }
}

/* fix to remove the space above the checkbox */
#newuser > form:nth-child(2) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(20) {
    display: none;
}

#existinguser a,
#newuser a,
.td-newuser-termsconditions {
    font-weight: 400;
}

#newuser > form tr:first-child {
	display: none;
}

.td-newuser-header b {
    font-size: 1.125rem;
}

/* 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(19){
    order: 1;
}
/* end of hacky css */

.module-login,
.module-login a {
	color: #2D343B;
}

.module-login button {
	border-radius: 4rem;
	padding: 0.75rem 1.5rem;
	color: #FFFFFF;
	background-color: var(--theme-color-2);
	border-color: var(--theme-color-2);
}

.module-login label {
    font-weight: 600;
    font-size: 1rem;
}

.module-login.content-article h1 {
    font-size: 2.125rem;
    margin: 1.5rem 0;
}

.module-login.content-article h1.page-title-login {
    display: none;
}

.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: 8.5rem;
}

.menuitem-1 .container,
.menuitem-2 .container {
    background-color: var(--grey-color-1); 
}

.content-assessment .container {
    background-color: var(--white);
}

@media screen and (max-width: 1024px){
    .container {
        padding-top: 4rem;
    }

    .module-login.content-article h1 {
        color: #2D343B;
    }

    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;
    }
}

/* end contact page CSS*/

/* homepage css */

.homepage-cover {
    width: 100%;
    position: relative;
}

.homepage-cover .constrain-max-width {
    margin-left: 5rem;
}

.homepage-cover-text p {
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-bottom: 1.25rem;
}

.homepage-cover img {
    width: 100%;
    padding: 0;
    position: relative;
    top: 1px;
    vertical-align: bottom;
}

.intro {
    width: calc(100% - 10rem);
    background-color: #F5F3F2;
    padding: 5rem;
    margin-bottom: -9.5rem;
    padding-bottom: 15rem;
}

.intro-content {
    max-width: 77rem;
    margin-left: auto;
    margin-right: auto;
}

.intro-content .intro-text {
    max-width: 42.5rem;
}

.voordelen {
    max-width: 50rem;
    background-color: white;
    border-radius: 1rem;
    box-shadow: 0px 0px 20px rgba(45,52,59,0.15);
    margin: 0 auto;
    margin-bottom: 4.5rem;
}

.voordelen h2 {
    padding-top: 4rem;
    padding-left: 4rem;
}

.voordelen-content {
    padding: 2rem 4rem;
    display: flex;
    flex-direction: row;
    gap: 1rem 2rem;
    flex-wrap: wrap;
}

.voordelen-element {
    width: 40%;
    flex-grow: 1;
    display:flex;
    align-items: flex-start;
}

.voordelen-element img {
    width: 1.5rem;
    padding-right: 1rem;
}

.follow-up {
    width: 100%;
   
}

.follow-up-content {
background-color: #F5F3F2;
border-radius: 1rem;
display: flex;
flex-direction: row;
gap: 1rem;
padding: 2rem 4rem;
max-width: 70rem;
margin: 0 auto;
margin-bottom: 5rem;
}

.follow-up-text {
    flex-grow: 1;
    display: flex;
    align-items: flex-start;
}

.follow-up-text h2, 
.follow-up-text p {
width: 50%;
}

.follow-up-figure {
    width: 100%;
    position: relative;
    margin-bottom: 4rem;
}

.follow-up-figure > img {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
}

@media screen and (min-width: 1024px){
    .homepage-cover-text {
        padding: 2rem 5rem;
        max-width: 60%;
        width: 42rem;
        padding-left: 0;
    }
}

@media screen and (max-width: 1024px){
    .intro {
        width: unset;
        background-color: #F5F3F2;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .voordelen h2 {
        padding-top: 1rem;
        padding-left: 2rem;
    }

    .voordelen {
        margin: 0 1rem 1rem 1rem;
    }

    .voordelen-content {
        padding: 1rem 2rem;
        flex-direction: column;
    }

    .voordelen-element {
        width: unset;
    }

    .voordelen-element img {
        margin-top: 0.35rem;
    }
    
    .follow-up-content {
        padding: 1rem;
        border-radius: unset;
    }

    .follow-up-text {
        flex-direction: column;
    }

    .follow-up-text h2, .follow-up-text p {
        width: unset;
    }
}

/* end of homepage css */

/* over de inclusiemonitor styling */
.constrain-max-width {
    width: 100%;
    max-width: 77rem;
    margin-left: auto;
    margin-right: auto;
}
    
.about-inclusie-main {
    width: 100%;
    background-color: #F5F3F2;
    position: relative;
}

.about-inclusie-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.about-inclusie-content .explanation-text {
    max-width: 30rem;
    background-color: white;
    border-radius: 1rem;
    padding: 2rem 4rem;
    position: relative;
    z-index: 1;

    margin-top: 5rem;
    margin-bottom: 5rem;
}

.about-inclusie-content .request-background-inclusie {
    position: relative;
    z-index: 1;
    margin-bottom: 5rem;
    margin-top: auto;
    margin-left: 5rem;
    color: #ffffff;
}

.request-background-inclusie form {
    display: flex;
    flex-direction: column;
    position: relative;
}

.request-background-inclusie p {
   margin-bottom: 1.5rem;  
}

.request-background-inclusie p,
.request-background-inclusie form {
    font-weight: 600;
    color: #ffffff;
    font-size: 1.25rem;
}

.request-background-inclusie form label {
    margin-bottom: 0.5rem;
}

.request-background-inclusie input {
    margin-bottom: 1rem;
    border-radius: 1rem;
}

.request-background-inclusie form button {
    position: absolute;
    bottom: 1.25rem;
    right: 0;
}

.request-background-inclusie form button:after {
    content: url('../images/Icon\ feather-arrow-right(1).svg');
    padding-left: 0.5rem;
    position: relative;
    top: 0.25rem;
}

.request-background-inclusie form button:hover {
    background-color: var(--theme-color-1);
}

.about-inclusie-background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.about-inclusie-background > .top {
    height: 100%;
    max-height: 30rem;
    position: relative;
}

.about-inclusie-background > .top > img {
    width: 100%;
    position: absolute;
    bottom: -1px;
}

.about-inclusie-background > .bottom {
    flex-grow: 1;
    background-color: var(--theme-color-1);
    width: 100%;
}

.about-inclusie-inclusiewaarden {
    background-color: #F5F3F2;
}

.about-inclusie-persoonlijkheid, 
.about-inclusie-inclusiewaarden,
.about-inclusie-mentale-balans {
width: calc(100% - 10rem);
padding: 5rem;
}

.about-inclusie-persoonlijkheid .persoonlijkheid-content,
.about-inclusie-mentale-balans .mentale-balans-content {
    max-width: 77rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;

}

.persoonlijkheid-content .explanation-text,
.mentale-balans-content .explanation-text {
    position: relative;
    width: 42.5rem;
}

.inclusiewaarden-content .explanation-text {
    position: relative;
}

.about-inclusie-inclusiewaarden .inclusiewaarden-content {
    max-width: 77rem;
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-left: auto;
    margin-right: auto;
}

.inclusiewaarden-content .explanation-text {
    width: calc(33% - 5rem);
    margin-right: 5rem;
}

.inclusiewaarden-content .accordeon {
    width: 67%;
}

span.circle-number {
    position: relative;
    margin-right: 1rem;
}

span.circle-number:after {
    content: url('../images/circle.svg');
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -45%);
    display: inline-block;
    width: 200%;
}

.request-background-inclusie .widget-contact {
    padding-bottom: 0;
}

@media only screen and (max-width: 1024px) {
    .about-inclusie-content {
        flex-direction: column;
        justify-content: space-between;
    }

    .about-inclusie-content .explanation-text {
        padding: 1rem 2rem;
        margin-top: 1rem;
        margin-bottom: 2rem;
    }
    
    .about-inclusie-content .request-background-inclusie {
        margin-bottom: 1rem;
        margin-left: unset;
    }

    .request-background-inclusie form button::after {
        top: unset;
    }

    .about-inclusie-persoonlijkheid, .about-inclusie-inclusiewaarden, .about-inclusie-mentale-balans {
        padding: 2rem;
        width: unset;
    }

    .about-inclusie-inclusiewaarden .inclusiewaarden-content {
        flex-direction: column;
    }

    .inclusiewaarden-content .explanation-text {
        width: unset;
        margin-right: unset;
        margin-bottom: 1rem;
    }

    .inclusiewaarden-content .accordeon {
        width: unset;
    }
    
    .request-background-inclusie form button {
        position: unset;
        margin-left: auto;
        margin-top: 0.5rem;
    }
}

/* business card styling */
.business-card {
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    background-color: #F5F3F2;
}

.business-card-info {
    display: flex;
    flex-direction: row;
    margin: 1.75rem;
    margin-bottom: 0rem;
}

.business-card-details {
    display: flex;
    flex-direction: row;
    background-color: #ffffff;
    margin: 1.75rem;
    margin-top: 1rem;
    padding: 0.75rem 1.75rem;
    border-radius: 1rem;
    justify-content: space-between;
}

.personalia-email:before {
    content: url('/media/image/InclusieMonitor/Icon-feather-mail.svg');
    display: inline-block;
    margin-right: 0.5rem;
    scale: 1;
    position: relative;
    top: 0.25rem;
    filter: brightness(0) saturate(100%) invert(54%) sepia(17%) saturate(2517%) hue-rotate(139deg) brightness(92%) contrast(82%);
}

.personalia-phone:before {
    content: url('/media/image/InclusieMonitor/Icon-feather-phone.svg');
    display: inline-block;
    margin-right: 0.5rem;
    scale: 1;
    position: relative;
    top: 0.25rem;
    filter: brightness(0) saturate(100%) invert(54%) sepia(17%) saturate(2517%) hue-rotate(139deg) brightness(92%) contrast(82%);
}

.personalia {
    margin-left: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #2D343B;
}

.personalia-name {
    font-size: 1.5rem;
    font-weight: 600;
}

.personalia-function {
    font-size: 1.125rem;
}

@media only screen and (max-width: 1024px) {
    .personalia-email:before {
        scale: 1.5;
        top: 0;
    }

    .personalia-phone:before {
        scale: 1.5;
        top: 0;
    }

    .business-card-details {
        flex-direction: column;
    }
}

/* over de inclusiemonitor accordeon styling */

.r-tabs > div {      
    background-color: #ffffff;
}

#accordeon-all {
    display: flex;
    flex-direction: column;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.accordeon-overview-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.accordean-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    border-bottom: 0.5px solid #2D343B;
}

.accordeon-item {
    width: 25%;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.accordean-item.bold {
    font-weight: 600;
}

.r-tabs-panel {
    display: flex;
    flex-direction: column;
}

.r-tabs-panel > div {
    width: 100%;
}

.r-tabs-panel > .illustration-container {
    height: 8rem;
}

.r-tabs-panel > .inclusie-clusters {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    margin-bottom: 2rem;
}

.r-tabs-panel > .inclusie-clusters > .arrow {
    height: 2rem;
    width: 2rem;
    background-repeat: no-repeat;
    background-position: center;
}

.r-tabs-panel > .inclusie-clusters > .arrow.left-arrow {
    background-image: url('../images/Icon_feather-arrow-left.svg');
}

.r-tabs-panel > .inclusie-clusters > .arrow.right-arrow {
    background-image: url('../images/Icon_feather-arrow-right.svg');
}

.r-tabs-panel > .inclusie-clusters-description {

}

/* end of over de inclusiemonitor accordeon styling */

/* tab < > accordion responsive style */
.r-tabs .r-tabs-accordion-title {
    display: none;
}

.r-tabs .r-tabs-panel.r-tabs-state-active {
    display: block;
}

.r-tabs .r-tabs-nav {
    margin: 0;
    padding: 0;
}

.r-tabs-nav .r-tabs-tab:first-of-type {
    border-top-left-radius: 1rem;
}

.r-tabs-nav .r-tabs-tab:last-of-type {
    border-bottom-left-radius: 1rem;
}

.r-tabs .r-tabs-tab {
    display: inline-block;
    margin: 0;
    list-style: none;
}

.r-tabs .r-tabs-panel {
    display: none;
}

#inclusie-tabs {
    display: flex;
    border-radius: 1rem;
}

.r-tabs-nav {
    display: flex;
    flex-direction: column;
    width: 25%;
    font-size: 1.125rem;
    font-weight: 700;
}

#inclusie-tabs .r-tabs-anchor {
    text-decoration: none;
    color: #2D343B;
    width: calc(100% -2rem);
    padding: 1rem;
    display: inline-block;
    width: calc(100% - 2rem);
}

.r-tabs-tab {
    background-color: #EAE8E2;
    position: relative;
}

.r-tabs-accordion-title:hover,
.r-tabs-tab:hover {
    background-color: var(--theme-color-1);
}

.r-tabs-accordion-title.r-tabs-state-active,
.r-tabs-tab.r-tabs-state-active {
    background-color: var(--theme-color-2);
}

/* #inclusie-tabs .r-tabs-accordion-title.r-tabs-state-active .r-tabs-anchor, */
#inclusie-tabs .r-tabs-tab.r-tabs-state-active .r-tabs-anchor,
#inclusie-tabs .r-tabs-accordion-title.r-tabs-state-active .r-tabs-anchor,
#inclusie-tabs .r-tabs-accordion-title:hover .r-tabs-anchor,
#inclusie-tabs .r-tabs-tab:hover .r-tabs-anchor {
    color: #FFFFFF;
}

.r-tabs-panel {
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    line-height: 1.5rem;
}

.tab-title {
    font-size: 1.5rem;
    color: #272D38;
    font-weight: 700;
    margin: 1rem 0;
}

.tab-image {
    position: relative;
    height: 4rem;
}

.tab-image img {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    height: 100%;
}

.tab-text {
    font-size: 1.125rem;
    color: #3C3C3C;
}

.tab-meer-info {
    padding: 1rem 0;
}

.tab-meer-info a {
    text-decoration: none;
    color: #FD9D27;
    cursor: pointer;
    font-weight: 700;
    position: relative;
}

.tab-meer-info a:after {
    content: url('../images/Icon\ feather-arrow-right.svg');
    position: absolute;
    top: 50%;
    transform: translate(0.5rem, -0.8rem);
    font-size: 1rem;
}

@media only screen and (min-width: 1024px) {
    .r-tabs-panel {
        width: calc(75% - 4rem);
        padding: 2rem 2rem;
        border-top-right-radius: 1rem;
        border-bottom-right-radius: 1rem;
    }
}

/* Accordion responsive breakpoint */
@media only screen and (max-width: 1024px) {
    .r-tabs .r-tabs-nav {
        display: none;
    }

    .r-tabs .r-tabs-accordion-title {
        display: block;
    }

    #inclusie-tabs {
        flex-direction: column;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
    }

    .r-tabs-accordion-title {
        background-color: #EAE8E2;
    }

    #inclusie-tabs > .r-tabs-accordion-title {

        margin-top: 0.125rem;
    }

    #inclusie-tabs > .r-tabs-accordion-title:first-of-type {
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
        margin-top: unset;
    }

    .r-tabs-anchor {
        padding: 1rem;
        width: calc(100% - 2rem);
    }

    .r-tabs-panel {
        padding: 0.75rem;
    }

    .homepage-cover .constrain-max-width {
        margin-left: 0;
    }

    .constrain-max-width {
        padding: 1rem;
        width: calc(100% - 2rem);
    }

    .accordeon-item {
        width: 33%;
    }

    .accordean-row {
        flex-wrap: wrap;
    }

    .accordean-row > div:nth-child(1) {
        width: 100%;
    }

    .accordean-row > div:nth-child(3) {
        text-align: center;
    }

    .accordean-row > div:nth-child(4) {
        text-align: right;
    }
}

/* balance table styling */
.balance {
    border-radius: 1rem;
    background-color: #F5F3F2;
    width: 100%;
    max-width: 50rem;
}

.balance-content p {
    font-size: 0.8rem;
}

.balance-head {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-color: var(--theme-color-2);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.balance-head > p {
    font-size: 1.125rem;
    color: white;
    font-weight: 600;
}

.balance-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.balance-column-active,
.balance-column-passive {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    gap: 0.5rem;
}

.balance-single-element {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.balance-single-element .title-subject {
    width: 30%;
    font-weight: 600;
}

.balance-single-element .sub-topics {
    flex-grow: 1;
}

.sub-topics li {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.sub-topics li p {
   margin: 0;
}

.sub-topics li:last-child {
    font-style: italic;
}

.balance-single-element-total {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-grow: 1;
    align-items: flex-end;
}

.balance-single-element-total p {
    align-items: center;
}

.balance-single-element-total .title-subject {
    font-weight: 600;
}

.balance-single-element-total .balance-column-active-total,
.balance-single-element-total .balance-column-passive-total {
    font-style: italic;
}
/* end balance table styling*/

/* begin  aanbod styling */

.aanbod-intro {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    padding-top: 2rem;

    text-align: center;

    background-image: url('../images/RelatieWijzer_Header_Home.jpg');
    background-size: cover;
    background-position: center;
}

.aanbod-intro > .aanbod-cover-text {
    width: 50%;
    max-width: 35rem; 
    margin-top: 55px;
    color: #2D343B;
}

.aanbod-intro p {
    color: inherit;
}

.aanbod-offers {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    width: calc(100% - 2rem);
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: 77rem;

    position: relative;

    padding-bottom: 2.5rem;
    margin-left: auto;
    margin-right: auto;
}

.partial-grey-background-element {
    position: relative;
    width: 100%;
    padding-bottom: 4rem;
}

.partial-grey-background-element:after {
    content: '';
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 10rem);
    background-color: #F5F3F2;
}

.aanbod-offer {
    border-radius: 1rem;
    background: #ffffff;

    display: flex;
    flex-direction: column;

    position: relative;
    z-index: 1;

    margin-top: 2.5rem;
}

.aanbod-offer-emphasis {
    background: linear-gradient(0deg, var(--theme-color-1), var(--theme-color-2));
    color: white;
}

.offer-header {
    width: calc(100% - 4rem);
    padding: 2rem 2rem 1rem 2rem;
}
.offer-header h2 {
    font-weight: 600;
    color: var(--theme-color-1);
}
.offer-header h2,
.offer-header h3 {
    margin-bottom: 0;
}

.aanbod-offer-emphasis h2 {
    color: inherit;
}

.offer-body {
    width: calc(100% - 4rem);
    padding: 0rem 2rem 2rem 2rem;
    display: flex;
    flex-direction: column; 
}

.offer-body.offer-body-full-width {
    flex-direction: row;
    justify-content: space-between;
}

.offer-column {
    width: calc(50% - 1rem);
    height: 100%;

    display: flex;
    flex-direction: column;
}

.offer-text {
    margin-bottom: 2rem;
}

.offer-text b {
    font-weight: 600;
    font-size: 1.25rem;
}

.offer-text li {
    font-size: 1.125rem;
    line-height: 2.375rem;
}

.offer-text ul {
    list-style-image: url('../images/Icon\ feather-check.svg');
    list-style-position: inside;
}

.orange-backdrop-shadow {
    box-shadow: 0 0 20px #2D343B26;
}

.grouped-buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.button {
    border-radius: 4rem;
    padding: 0.75rem 1.5rem;
    color: #FFFFFF;
    background-color: var(--theme-color-2);
    border-color: var(--theme-color-2);
    font-size: 1.25rem;
    /*border: 1px solid #2D343B;
    background: transparent;*/
    text-decoration: none;
}

.button.yellow-button {
    color: #FFFFFF;
    background-color: var(--theme-color-2);
    border-color: var(--theme-color-2);
}

.aanbod-offer-emphasis .button.yellow-button {
    background-color: var(--white);
    color: var(--theme-color-2);
}

.aanbod-offer-emphasis .button.yellow-button:hover {
    color: var(--theme-color-1);
    background-color: var(--white);
}

.button.yellow-button:hover {
background-color: var(--theme-color-1);
}

.button.yellow-button:after {
    content: url('../images/Icon\ feather-arrow-right(1).svg');
    padding-left: 0.5rem;
    position: relative;
    top: 0.25rem;
}

.aanbod-offer-emphasis .button.yellow-button:after {
    content: url('../images/Icon\ feather-arrow-right-red-alt.svg');
}

.aanbod-offer-emphasis .button.yellow-button:hover:after {
    content: url('../images/Icon\ feather-arrow-right-red.svg');
}

.button.white-button:after {
    content: url('../images/Icon\ feather-arrow-right-dark.svg');
    padding-left: 0.5rem;
    position: relative;
    top: 0.25rem;

}

.button.blue-button {
    color: #FFFFFF;
    background-color: var(--theme-color-1);
    border-color: var(--theme-color-1);
}
.button.blue-button:hover {
    background-color: var(--theme-color-1);
}

.button.blue-button:after {
    content: url('../images/Icon\ feather-arrow-right(1).svg');
    padding-left: 0.5rem;
    position: relative;
    top: 0.25rem;
}

.button.download-button,
.button.white-button {
    color: #2D343B;
    background-color: transparent;
    border: 1px solid #2D343B;
}

.button.download-button:after {
    content: url('../images/Icon\ feather-download.svg');
    padding-left: 0.5rem;
    position: relative;
    top: 0.25rem;
}

@media only screen and (min-width: 1024px) {
    .aanbod-intro {
        height: 30rem;
        margin-bottom: -10rem;
    }

    .aanbod-offer-emphasis {
        margin-top: 11rem;
    }

    .aanbod-offer-half-width.orange-backdrop-shadow {
        width: calc(54% - 2rem)
    }
    
    
    .aanbod-offer-half-width {
        width: calc(46% - 2rem);
    }
    
    .aanbod-offer-full-width {
        width: 100%;
    }
}

@media only screen and (max-width: 1024px) {
    .aanbod-intro {
        flex-direction: column;
        padding-top: unset;
    }

    .aanbod-intro > .aanbod-cover-text {
        width: unset;
        padding: 0rem 5rem;
    }

    .aanbod-intro img {
        margin-right: auto;
    }

    .aanbod-offers {
        flex-direction: column;
        padding-bottom: 5.5rem;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .aanbod-offer {
        width: calc(100% - 3rem);
        margin-left: auto;
        margin-right: auto;
    }

    .grouped-buttons {
        flex-direction: column;
        gap: 0.5rem;
    }

    .grouped-buttons .button {
        position: relative;
    }

    .grouped-buttons .button:after {
        position: absolute;
        right: 1.5rem;

        top: 80%;

        transform: translate(0, -60%);

        scale: 2;
    }

    .offer-column {
        width: unset;
    }

    .offer-body.offer-body-full-width {
        flex-direction: column;
    }
}

/* end aanbod styling */

/* begin inclusieprofessional styling */
.inclusie-professional-title {
    margin-top: 55px;
    margin-bottom: 40px;
    font-size: 34px;
    line-height: 22px;
}

.inclusie-professional-title .homepage-cover-text p {
    font-size: 1.125rem;
    line-height: 1.625rem;
}

.inclusie-professional-list {
    margin: -17px;
    display: flex;
    flex-wrap: wrap;
}

.inclusie-professional-list .inclusie-professional-block {
    margin: 17px;
    flex-basis: calc(33% - 36px);
    border-radius: 1rem;
    box-shadow: 0px 0px 10px rgba(45,52,59,0.15);
    margin-bottom: 3rem;
}

.inclusie-professional-details {
    background-color: var(--theme-color-1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 25px;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.inclusie-professional-phone:before,
.inclusie-professional-email:before,
.inclusie-professional-website:before {
    display: inline-block;
    margin-right: 8px;
}

.inclusie-professional-phone:before {
    content: url('/media/image/InclusieMonitor/Icon-feather-phone.svg');
    scale: 1;
}

.inclusie-professional-email:before {
    content: url('/media/image/InclusieMonitor/Icon-feather-mail.svg');
    scale: 1;
}

.inclusie-professional-website:before {
    content: url('/media/image/InclusieMonitor/Icon feather-globe.svg');
    scale: 1;
}

.inclusie-professional-picture img {
    /*border-radius: 100px;*/
    height: 6.25rem;
    display: block;
}

.inclusie-professional-picture {
    position: relative;
}

.inclusie-professional-name {
    margin-top: 1.25rem;
    font-weight: 600;
    line-height: 1.25rem;
    font-size: 1.125rem;
    color: #ffffff;
}

.inclusie-professional-function {
    font-size: 1rem;
    color: #ffffff;
}

.inclusie-professional-contact {
    padding: 1.25rem;
    font-weight: 600;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.inclusie-professional-contact a {
    color: #2D343B;
    text-decoration: none;
}

.inclusie-professional-email,
.inclusie-professional-website {
    margin-top: 1rem;
}

/* Hexagon styling - courtesy to this answer and the fiddle https://stackoverflow.com/a/7437345 */
.hexagon {
    overflow: hidden;
    visibility: hidden;
    -webkit-transform: rotate(120deg);
       -moz-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
         -o-transform: rotate(120deg);
            transform: rotate(120deg);
}

.hexagon-in1 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
}
.hexagon-in2 {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    
    visibility: visible;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
}


.hexagon1 {
    height: 12.5rem;
    width: 6.25rem;
    margin: -3rem 0 -2.5rem 0px;
}
	
.hexagon-image {
	width: 100%;
    height: 62%;
}

.hexagon-image img {
    object-fit: cover;
    width: 100%;
    margin-top: 2.5rem;
}

@media only screen and (max-width: 1024px) {
    .inclusie-professional-list {
        flex-direction: column;
        align-items: center;
    }

    .inclusie-professional-list .inclusie-professional-block {
        width: 80vw;
    }
}
/* end inclusieprofessional styling */

/* begin samenwerken  styling */

.samenwerken-content {
    width: 100%;
    max-width: 77rem;
    display: flex;
    margin: 0 auto;
    padding-top: 2rem;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 55px;
}

.samenwerken-cover-text {
    display: flex;
    flex-direction: column;
    width: calc(54% - 2rem);
}

.samenwerken-illustration {
    flex-grow: 1;
    position: relative;
    top: 4rem;
}

.samenwerken-interested-text {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 4rem;
    justify-content: center;
    text-align: center;

    background-color: var(--theme-color-1);
    padding-top: 2rem;
    padding-bottom: 4rem;    
}
.samenwerken-interested-text .business-card {
    width: 30rem;
    margin-left: auto;
    margin-right: auto;
}

.samenwerken-interested-text p {
    font-weight: 600;
    color: #ffffff;
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

.samenwerken-interested-text h4,
.samenwerken-interested-text p,
.samenwerken-interested-text .collab-option-block a {
    color: #ffffff;
}

.collab-option-block p {
    margin-top: 1rem;
}

.collab-options-container {
    width: calc(100% - 4rem);
    max-width: 73rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
}

.collab-option-block {
    min-width: 15rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.collab-option-block .hexagon-image {
    height: 100%;
}

.collab-option-block .hexagon-image > div {
    width: 100%;
    height: 100%;
    background-color: var(--theme-color-2);
    position: relative;
}

.collab-option-block .hexagon-image > div:before {
    position: absolute;
    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    content: "";
    width: 3rem;
    height: 3rem;
    background-position: center;
    background-repeat: no-repeat;
}

.phone-icon:before {
    background-image: url("../images/Icon feather-phone-white.svg");
}

.mail-icon:before {
    background-image: url("../images/Icon feather-mail-white.svg");
}

.calendar-icon:before {
    background-image: url("../images/Icon feather-calendar-white.svg");
}

@media only screen and (max-width: 1024px) {
    .samenwerken-content {
        padding: 0 1rem;
        width: unset;
        flex-direction: column;
    }

    .samenwerken-interested-text,
    .samenwerken-cover-text {
        width: unset;
    }

    .collab-options-container {
        flex-direction: column;
        gap: 4rem;
    }
}
/* end samenwerken styling */

.contact-container {
    background-color: var(--theme-color-1);
    width: 100%;
}

.contact-content {
    display: flex;
    flex-direction: row;
    gap: 5rem;

    padding: 5rem;
    width: calc(100% - 10rem);
    max-width: 77rem;
    margin-left: auto;
    margin-right: auto;

    color: #ffffff;
    
}

.contact-content .hexagon-image img {
    height: 100%;
}

.contact-details {
    flex-grow: 1;
}

.text-contact {
    width: 45%;
    font-size: 1.25rem;
    font-weight: 600;
}

@media only screen and (max-width: 1024px) {
    .contact-content {
        width: unset;
        padding: 1rem;
    }

    .contact-content {
        flex-direction: column;
        gap: 2rem;
    }

    .text-contact {
        width: unset;
    }
}
/* custom contact page */



/* end custom contact page */

.headerbar {
    z-index: 2;
    width: 100%;
    position: fixed;
    top: 0;
    box-shadow: 0px 0.0625rem 3px rgba(23,33,43,25%);
}

.navbar {
    padding-bottom: 0.5rem;
}

a:not(.footer-content a, .headerbar a) {
    font-weight: 600;
    color: #2D343B;
}

/*--contact page css--*/
.contact {
    padding-bottom: 2rem;
}

.widget-contact {
    margin: 0 auto;
}

.contact-banner {
    background-image: url('../images/RelatieWijzer_Header_Home.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

.contact-banner .text-block.half-width-block {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 100%;
    max-width: 32rem;
}

.contact-table td {
padding-right: 1.5rem;
font-weight: 600;
}

.contact-table td textarea {
    height: 14rem;
    margin-right: 3rem;
}

span.contact-error {
    color: #e3231d;
    margin-left: 1rem;
}

@media (min-width: 1024px) {
    ul.menu > li.selected > a,
    ul.menu > li:hover > a {
        border-bottom: 3px var(--theme-color-1) solid;
    }

    ul.menu > li > a {
        padding: 0.5rem;
    }

    .responsive-shopping-cart {
        display: none;
    }

    .headerbar {
        min-height: 8.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;
    }
}

/* 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: 400;
}

.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: 600;
    color: #FFFFFF;
}

.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: 600;
}

.product-title {
    font-size: 1.125rem;
    line-height: 1.625rem;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.product-block .product-info {
    height: calc(100% - 5.25rem);
}

.product-info {
    position: absolute;
    color: #FFFFFF;

    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: #2D343B;
    font-weight: 600;
}

.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: #2D343B;
    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: 600;
    border-top: 0.0625rem solid #F4F7FC;
    background-color: #FFFFFF;
}

.product-list li:first-of-type {
    border-top: none;
}

.product-list li:hover {
    background-color: #E4E7EC;
}

.assessment-category .category-title {
    color: #2D343B;
    font-size: 2rem;
    font-weight: 600;
    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: #FFFFFF;
    color: #2D343B;

    z-index: 1;

    right: -22.5rem;
    top: 12rem;

    transition: all 0.5s;
}

.contact-widget p {
    color: #2D343B;
}

.contact-widget.contact-widget-expand {
    right: 0rem;
}

.contact-widget .contact-widget-label {
    color: white;
    content: url('../images/Icon\ material-message.svg');
    background-color: #FF9D1B;
    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: #FC910D;
}

.contact-widget form {
    margin-top: 0.5rem;
}

.contact-widget .contact-widget-close {
    content:  url('../images/Sluiten.svg');
    color: #2D343B;
    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: 600;
    margin-bottom: 0.25rem;
}

.contact-widget .button-send-contact-form {
    background-color: #FD9D27;
    font-size: 1rem;
    border-radius: 0.250rem;
    font-weight: 600;
    color: #FFFFFF;
}

.contact-widget .button-send-contact-form:hover {
    background-color: #FC910D;
}

.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 - 8.5rem);
}

.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: #FFFFFF;
    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;
    }
}

@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;
    }
}

/* assessment detail page styling */
.page-assessments .page-content {
    color: #2D343B;
}

.page-assessments .assessment-name {
    font-size: 2rem;
}

.page-assessments .assessment-banner-image .bannerimage {
    object-fit: cover;
    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: white;
}

.page-assessments .assessment-banner-image,
.page-assessments .assessment-banner-image .bannerimage {
    height: 40vh;
    overflow: hidden;
    max-height: 20rem;
}

.page-assessments .page-content {
    display: flex;
    flex-direction: column;
}

.page-assessments .assessment-details {
    display: flex;
    flex-direction: column;
}

.page-assessments .button-back {
    font-size: 1rem;
    font-weight: 600;
    border-radius: 4rem;
}

.td-product-title {
    font-size: 1.25rem;
    font-weight: 600;
}

td.td-product-price,
td.td-product-total-price {
    font-size: 600;
}

.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;
}

.products-table .td-product-credits:after {
    content: 'Credits';
    margin-left: 0.5rem;
}

.assessment-title-container,
.assessment-products-container {
    margin-bottom: 1.5rem;
}

.assessment-products-container {
    order: 1;
}

.assessment-return-container {
    display: none;
}

.assessment-details b {
    font-weight: 600;
}

.assessment-details .product-content-list {
    margin-top: 0.5rem;
}

.assessment-details .product-content-list li {
    margin-bottom: 0.5rem;
    position: relative;
}

.assessment-details .product-content-list.checkmarks-list li:before {
    content: url('../images/check_icon.svg');
    position: relative;
    top: 0.250rem;
    filter: brightness(0) saturate(100%) invert(48%) sepia(99%) saturate(346%) hue-rotate(81deg) brightness(95%) contrast(87%);
}

.assessment-details .product-content-list.superman-list li {
    list-style: initial;
    margin-left: 1rem;
}

.td-product-title {
    font-size: 1.125rem;
    font-weight: 600;
}

td.td-product-price,
td.td-product-total-price {
    font-size: 1.125rem;
}

.td-product-example-report a {
    color: #342570;
}

@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-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;
    }

    .assessment-details .product-content-list-container {
        position: absolute;
        top: 3rem;
        right: 3rem;
        padding: 2rem;
        background-color: #F5F3F2;
        border-radius: 1rem;
    }
    .assessment-return-container button {
        background-color: transparent;
        border: 1px solid #2D343B;
        color: #2D343B;
        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;
    }

    .page-assessments .td-product-title {
        color: #2D343B;
        font-size: 1.5rem;
        font-weight: 600;
        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: 0.5rem;
    }

    .page-assessments .button-back {
        margin-left: auto;
        margin-right: auto;
        width: 80%;
        background-color: transparent;
        border: 1px solid #2D343B;
        color: #2D343B;
        border-radius: 4rem;
    }

    .product-content-list-container {
        padding: 2rem;
        margin-top: 2rem;
        margin-bottom: 2rem;
        background-color: #F5F3F2;
        border-radius: 1rem;
    }

    .products-table .header {
        display: none;
    }

    /* styling to make a block out of product items in table */
    .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: 600;
    }

    .page-assessments .td-product-title {
        color: #2D343B;
        font-size: 1.5rem;
        font-weight: var(--font-weight-medium);
        width: 100%;
    }

    .products-table tbody tr {
        flex-wrap: wrap;
    }
    /* end styling product items */

    .assessment-details .product-content-list.checkmarks-list li:before {
        display: inline-block;
        scale: 2;
        margin-right: 1rem;
        left: 0.25rem;
        top: 0;
    }
}

/* 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: #2D343B;
}

.content-webshop-purchase font {
    color: #2D343B;
    font-size: 1.125rem;
    line-height: 1.625rem;
}

.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: 600;
    margin-bottom: 1rem;
}

.content-webshop-purchase .module-purchase {
    margin-top: 3.5rem;
}

.td-shoppingcart-product-title a {
    color: #2D343B;
    font-weight: 600;
    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: 600;
}

.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: 400;
}

.tr-shoppingcart-credits-left {
    color: #2D343B;
}

.tr-shoppingcart-header {
    color: #2D343B;
}

.td-shoppingcart-product-count > form {
    display: inline-block;
}

.td-shoppingcart-product-count .combobox {
    width: unset;
    font-weight: 600;
    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;
}

.button-confirm-purchase {
    margin-top: 0.5rem;
}

.confirm-purchase-container .page-title {
    font-size: 2rem;
    font-weight: 600;
    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: 1.125rem;
    font-weight: 600;
}

.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: 0.875rem;
}

.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: 600;
}

.confirm-purchase-payment h2 {
    margin-bottom: 1rem;
}

.confirm-purchase-buttons {
    display: flex;
    justify-content: flex-end;
}

.confirm-purchase-table {
    order: 3;
    background-color: #F5F3F2;
    padding: 1.5rem;
    border-radius: 0.250rem;
	width: 45%
}

.confirm-purchase-table .td-shoppingcart-product-count {
    font-weight: 600;
}

.confirm-purchase-table .tr-shoppingcart-header .td-shoppingcart-product-count {
    font-weight: 400;
}

.option-payment input {
    width: 1rem;
    height: 1rem;
}

@media screen and (max-width: 1024px){
    .confirm-purchase-container {
        padding-top: 0.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: 400;
        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: #2D343B;
    font-size: 1rem;
    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: 600;
    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: #2D343B;
        font-size: 1rem;
        padding: 1rem 0.5rem;
    }
}

/* clients.asp & profile.asp styling */

.clients-employees-title {
    display: none;
}

.product {
	display: none;
}

.content-clients .container,
.page-profile .container,
.content-account .container {
    padding-left: 5rem;
    padding-right: 5rem;
    padding-bottom: 5rem;

    background-color: var(--white);
}

@media screen and (max-width: 1024px) {
    .content-clients .container,
    .page-profile .container,
    .content-account .container {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 1rem;

        background-color: var(--white);
    }
}

.content-clients .container > div,
.page-profile .container > div {
    background-color: var(--white);
}

.content-clients .container > div:first-child,
.page-profile .container > div:first-of-type {
    margin-top: 4rem;
    padding: 1.25rem 1.25rem 0 1.25rem;
    border-top-left-radius: 0.250rem;
    border-top-right-radius: 0.250rem;
}

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;
    border-bottom-left-radius: 0.250rem;
    border-bottom-right-radius: 0.250rem;
}

.page-profile .container .profile-item {
    padding-top: 1rem;
}

.clients-assessments-table tbody,
.action-table tbody {
    display: flex;
    flex-direction: column;
    color: #2D343B;
}

.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 #E4E7EC;
}

.clients-assessments-table tbody > tr:first-child {
    border-top: 0.0625rem solid #E4E7EC;
    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: 600;
    text-decoration: none;
    color: #2D343B;
}

.action-table tbody > tr > td:nth-child(2) {
    flex-grow: 1;
    padding-left: 3rem;
}

.navlist a {
    font-weight: 600;
    color: #2D343B;
}

.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: 600;
    color: #2D343B;
}

.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: #2D343B;
    font-size: 1rem;
}

.content-clients .container {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
}

.content-clients h2 {
    color: #2D343B;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}


@media screen and (max-width: 1024px){
    .content-clients .container,
    .page-profile .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .content-clients .container > div:first-child,
    .page-profile .container > div:first-of-type {
        margin-top: 1rem;
        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: #F5F3F2;
}

.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: #2D343B;
    font-weight: 600;
}

.content-account .page-title-account {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.page-account .account-error {
    color: #e3231d !important;
    font-weight: 600 !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: 600;
    color: #2D343B;
    font-size: 1.125rem;
}

.button-modify-account-details {
    background-color: var(--theme-color-2);
    font-weight: 600;
    border: none;
    font-size: 1rem;
}

.button-modify-account-details:hover {
}

@media screen and (max-width: 1024px){
    .page-account {
        padding: 0.5rem;
        max-width: unset;
        margin-top: 0;
        margin-bottom: 2rem;
        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: 1.125rem;
}

.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;
    border-radius: 0.250rem;
    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: 600;
    font-size: 1rem;
    color: #2D343B;
}

@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: 2.125rem;
}

.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: #FFFFFF;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    border-radius: 0.250rem;

    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: 600;
    width: 80%;
    margin-bottom: 0.250rem;
}

.themas-tile-subtitle {
    font-size: 1rem;
    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;
    border-radius: 0.250rem;
}

@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: 600;
} 

.page-resetpassword form button {
    background-color: var(--theme-color-2);
    color: #FFFFFF;
}

.page-resetpassword form button:hover {
    background-color: var(--theme-color-1);
}

.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: 1.125rem;
}

.information-list-container {
    background-color: #F4F7FC;
    width: calc(50% - 6rem);
    padding: 3rem;
    font-size: 1.125rem;
}

.information-list {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.information-list-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 3rem;
}

.information-list-item-title {
    font-weight: 600;
    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;
    border-radius: 0.250rem;
}

.information-image {
    width: 50%;
}

.information-image img {
    width: 100%;
}

.information-block-dark-background {
    background-color: #2D343B;
    color: #FFFFFF;
}

.information-block-dark-background .information-medium-title {
    color: #FFFFFF;
}

.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: #FFFFFF;
}

.information-block-list > div {
    display: flex;
    flex-direction: column;
    border-radius: 0.250rem;
    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);
    border-radius: 0.250rem;
    position: absolute;
    z-index: 0;
    height: 100%;
    width: 100%;
}

.information-block-list > div > img {
    position: absolute;
    border-radius: 0.250rem;
    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: 600;
    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: 1.125rem;
    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: #2D343B;
    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: 1.125rem;
}

.information-text-content-popout {
    font-size: 1.125rem;
}

.information-white-background {
    background-color: #FFFFFF;
    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: #FFFFFF;
    z-index: 1;
    position: relative;
    font-size: 1.125rem;
}

.information-block-background .information-medium-title {
    color: #FFFFFF;
}

.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: 600;
    font-size: 1.5rem;
    color: #2D343B;
    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: 1.125rem;
}

@media screen and (min-width: 1024px){
    .organisatie-advies-container {
        position: relative;
    }

    @media screen and (min-height: 800px){
        .organisatie-advies-container {
            height: calc(100vh - 8.5rem);            
        }
    }

    .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: #2D343B;
        opacity: 85%;
        color: #FFFFFF;
    }

    .organisatie-advies-text-content .information-title {
        color: #FFFFFF;
    }

    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 .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;
}
.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(100% - 1em);
    border-radius: 0;
    min-height: 7em;
    text-align: center;
    font-size: 1rem;
    background-color: rgba(29, 21, 62, 0.85);

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bss-next,
.bss-prev {
    background-color: rgba(29, 21, 62, 1);
    border-radius: 0.250rem;
    opacity: 0.85;
    height: 3rem;
    width: 3rem;
    padding: 0;
    color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 60%;
}

.bss-next {
    right: 1rem;
    background-image: url("../images/Icon\ feather-arrow-right-white.svg")
}

.bss-prev {
    left: 1rem;
    background-image: url("../images/Icon\ feather-arrow-left-white.svg")
}

.figcaption-medium {
    font-size: 1.25rem;
    font-weight: 600;
}

@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;
    }
}

/* 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: #2D343B;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 2rem;
}

.blog-short-text {
    font-size: 1.125rem;
}

.blog-section {
    font-weight: 600;
}

.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: 1rem;
}

.featured .blog-title {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 1;
    color: #FFFFFF;
    font-size: 2.125rem;
    font-weight: 600;
    margin: 0;
    line-height: 3rem;
    max-width: 40rem;
}

.blog-read-more {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.read-more-title {
    font-size: 2.125rem;
    font-weight: 600;
    margin-bottom: 3.5rem;
    color: #2D343B;
}

.blog-container {
    width: calc(100% - 3rem);
}

.blog-read-more {
    width: 100%;
}

.blog-content {
    max-width: 50rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
}


@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: #FFFFFF;
        font-size: 2.125rem;
        font-weight: 600;
        margin: 0;
        line-height: 3rem;
        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% - 8.5rem);
    background: rgba(255,255,255,0.85);
    padding: 8.5rem 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: #FFFFFF;
    font-size: 2.125rem;
    font-weight: bold;
    position: absolute;
    bottom: 1rem;
    left: 1.5rem;
    z-index: 2;
    line-height: 3rem;
}

.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: #FFFFFF;
    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 #FFFFFF;
	box-shadow: 0 5px 15px rgba(0,0,0,0.16);
}

.bss-slides .agile-lead-banner h2 {
	color: #FFFFFF;
	font-size: 2.125rem;
	font-weight: 600;
}

.bss-slides .agile-lead-banner a {
	font-size: 1.75rem;
	font-weight: 600;
	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: 1.125rem;
    line-height: 1.5rem;
}

.bold-text {
    font-weight: 600;
}

.maak-test {
    display: block;
    color: #FFFFFF;

}

.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: #2D343B;
}

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: #FFFFFF;
}

@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 - 8.5rem);
    } 
}

.full-width-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    position: relative;
}

/*--contact page css--*/
.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/RelatieWijzer_Header_Home.jpg');
    background-size: cover;
    background-repeat: no-repeat;
  }

@media (max-width: 1024px){
    .contact-banner {
        padding-left: 5rem;
        padding-right: 5rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        background-position: center;      
        width: calc(100% - 10rem);  
    }
}

.address-details {
    margin-top: 10rem;
    width: calc(40% - 3rem)
}

.address-details h3 {
    font-size: 1.25rem;
}

.address-details-block {
    margin-top: 1.5rem;
}

.address-details-block p {
    color: var(--standard-text-color);
}

p.address-details-title {
    color: var(--theme-color-1);
    font-weight: 600;
}

.widget-contact > .full-width-container {
    margin-bottom: -4rem
}

.widget-form .full-width-container {
    gap: 3rem;
}

.widget-form .contact-form {
    flex-grow: 1;
    box-shadow: #00000029 0px 0px 20px;
    padding: 1.5rem 2rem;
    background-color: white;

    padding-bottom: 12rem;
    margin-bottom: -12rem;

    border-radius: 1rem;
}

.widget-form .contact-form h2 {
    margin-bottom: 0;
}

.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;

    margin-left: calc(40% + 10rem);
    position: relative;
    z-index: 1;
    top: -2rem;
}

@media (min-width: 1024px){
    .widget-container .widget-form .button-send-contact-form,
    .widget-container .widget-form .h-captcha {
        margin-left: calc(40% + 2rem);
    }
    
    .widget-contact .contact-banner .limited-width-block-centered {
        padding: 9rem 0rem;
        margin-left: auto;
        margin-right: auto;
    }
}

@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: 5rem;
        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;
}

.contact-table tbody {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contact-table tbody tr {
    display: flex;
    flex-direction: column;
}

.contact-table {
    width: 100%;
}

.contact {
    padding-bottom: 2rem;
}

.contact-table td {
font-weight: 600;
}

.contact-table td textarea {
    height: 14rem;
    margin-right: 3rem;
}

@media (max-width: 1024px) {
    .full-width-container,
    .limited-width-block-centered {
        flex-direction: column;
    }

    .half-width-block {
        width: unset;    
    }
}