:root {

    /***Logo's***/
    --logo-standard: url("../../custom/theme/assets/images/logo_rotterdam.svg");
    --logo-alt: url("../../custom/theme/assets/images/logo_rotterdam.svg");

    /***Header Image (Van toepassing op visual.twig)***/
    --header-image: url("../images/header.jpg");
    --closed-image: url("../images/closed.jpg");

    /***Brand Colors***/
    --color-brand-primary: #00811f;
    --color-brand-primary-rgb: 0, 129, 31;
    --color-brand-secondary: #c93675;
    --color-brand-tertiary: #000000;
    --color-brand-light: #E1EFE2;
    --color-brand-dark: #00811f;

    --color-neutral-gray-01: #EFF4F6;
    --color-neutral-gray-02: #DBE7EA;
    --color-neutral-gray-03: #CAD6DA;
    --color-neutral-gray-04: #B6C4C8;
    --color-neutral-gray-05: #8D9DA4;
    --color-neutral-gray-06: #7C8B90;
    --color-neutral-gray-07: #65757B;
    --color-neutral-gray-08: #404B4F;

    --color-message-succes: #00811F;
    --color-message-warning: #EDB500;
    --color-message-info: #1791D4;
    --color-message-error: #D70D0D;

    /***Font***/
    --font-family: 'Bolder', Arial, sans-serif;
    --font-size: 1.6rem;

    --font-family-body: 'Bolder', Arial, sans-serif;
    --font-family-title: 'Bolder Heading', sans-serif;
    --font-family-title-light: 'Bolder light', sans-serif;

    --border-radius: 0;

    /**** Voor meer settings zie: /themes/base/assets/style/variables.css ****/
}

html {
    scroll-behavior: smooth;
}

.content-container {
    background: var(--color-neutral-white);
    min-height: 50vh;
}

h1, h2, h3, h4, h5, h6, .accordion_title {
    color: var(--color-brand-primary);
}
h1,h2,.header_visual-content h3 {
    font-family: 'Bolder Heading';
}
h1 {
    font-size: var(--font-size-xl);
}
h3, h4, h5, h6 {
    font-family: 'Bolder light';
}
.accordion_title{
    font-family: 'Bolder bold';
}
.header_visual-content h1, .header_visual-content h3 {
    color: var(--color-neutral-white);
    margin: unset;
    box-shadow: none;
}
.header_visual-content h3 {
    font-size: var(--font-size-m);
}
.sidebar h3, .custom_title {
    font-family: var(--font-family);
    font-weight: bold;
    font-size: var(--font-size-m);
}
.accordion_step:not(.accordion_step--finished) .accordion_title {
    color: var(--color-neutral-black);
}

.accordion_form .accordion_step .accordion_header .accordion_status_number::before {
    font-weight: bold;
}
.accordion_content {
    overflow:visible;
}
.toggle-text-container-closed {
    max-height: 6.8rem;
    line-clamp: 3;
    -webkit-line-clamp: 3;
}
.toggle-text-container+.toggle-button .material-icons{
    font-size: var(--font-size-l);
}
a {
    color: var(--color-neutral-black);
    font-weight: normal;
}
textarea, select, input:not([type="radio"], [type="checkbox"]) {
    border-color: var(--color-neutral-gray-04);
    box-shadow: none;
}
[type="radio"], .radio-custom-label {
    color: var(--color-neutral-gray-08);
}
.form_element--phonenumber .iti {
    width: 100%;
}
[type="checkbox"]:checked~label:before, [type="checkbox"]:checked~.checkbox-custom-label:before {
    -webkit-box-shadow: none;
    box-shadow: none;
}
[type="radio"]:checked~.radio-custom-label:before {
    -webkit-box-shadow: inset 0px 0px 0px 3px var(--color-neutral-white),
    0px 0px 0px 0px rgba(var(--color-brand-primary-rgb, 0.1));
    box-shadow: inset 0px 0px 0px 3px var(--color-neutral-white),
        0px 0px 0px 0px rgb(var(--color-brand-primary-rgb, 0.1));
}
[type="radio"]:hover~.radio-custom-label:before, [type="radio"]~.radio-custom-label:hover:before {
    -webkit-box-shadow: inset 0px 0px 0px 3px var(--color-neutral-white),
    0px 0px 0px 0px rgba(var(--color-brand-primary-rgb, 0.1));
    box-shadow: inset 0px 0px 0px 3px var(--color-neutral-white),
    0px 0px 0px 0px rgba(var(--color-brand-primary-rgb, 0.1));
}
.content-container, p, .form_label{
    color: var(--color-neutral-gray-08);
}

select, input, .input, fieldset {
    border: 1px solid var(--color-neutral-gray-06);
    color: var(--color-neutral-gray-08);
}
.iti input, .iti input[type=tel], .iti input[type=text] {
    color: var(--color-neutral-gray-08);
}
button, .button, input[type="submit"], input[type="button"] {
    font-size: var(--font-size-s);
    font-weight: 700;
}
.button--secondary:hover, .button--warning:hover, .button--info:hover, .button--light:hover, .button--dark:hover {
    background-color: #A12B5E;
}
/******************
* Layout gem_rdam
******************/
body.layout-gem_rdam {
    background: var(--header-image);
    position: relative;
    height: auto;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
body.layout-gem_rdam .header_visual .header_visual-content {
    background: rgba(var(--color-brand-primary-rgb), 0.8);
}
body.layout-gem_rdam header .header_visual {
    margin-top: calc(var(--menu-height) + 2em);
}
body.layout-gem_rdam header .header_visual .container {
    padding: 0;
    width: 100%;
    max-width: 1200px;
}
body.layout-gem_rdam main {
    width: 100%;
    max-width: 1200px;
    margin-left:auto;
    margin-right:auto;
    position: relative;
    margin-top: 2em;
    margin-bottom: 5em;
}
body.layout-gem_rdam main .title-title h1 {
    margin-top: 0;
}

body.layout-gem_rdam .sidebar {
    padding-top: 0;
    background: none;
}
body.layout-gem_rdam .sidebar, body.layout-gem_rdam .sidebar p {
    font-size: var(--font-size-s);
}
body.layout-gem_rdam .sidebar .sidebar-program {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
}
body.layout-gem_rdam .sidebar .sidebar-program-time {
    width: 35%;
    font-weight: bold;
    color: var(--color-neutral-gray-08);
}
body.layout-gem_rdam .sidebar .sidebar-program-desc {
    width: 65%;
}
body.layout-gem_rdam .sidebar hr {
    border-color: var(--color-neutral-black);
    width: 15%;
    color: var(--color-neutral-gray-08);
}
body.layout-gem_rdam .sidebar-program {
    width: 100%;
}
body.layout-gem_rdam .sidebar-program td:first-of-type {
    font-weight: bold;
    width: 40%;
}
body.layout-gem_rdam .sidebar iframe {
    border: none;
}
body.layout-gem_rdam footer {
    background-color: var(--color-neutral-white);
    color: var(--color-brand-primary);
}
body.layout-gem_rdam footer hr {
    border-color: var(--color-brand-primary);
}
body.layout-gem_rdam footer .footer_bar {
    padding: 26px 0;
}
body.layout-gem_rdam footer .poweredby {
    text-align: left;
}
body.layout-gem_rdam footer .poweredby a {
    color: var(--color-brand-primary);
}
body.layout-gem_rdam footer .footer-logo {
    text-align: right;
}

body.layout-gem_rdam .menu {
    max-width: 1200px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

body.layout-gem_rdam .col-form {
    grid-column: span 12 / 13;
}
body.layout-gem_rdam .col-accordion-sidebar .sidebar {
    padding: unset;
    position: relative;
}
body.layout-gem_rdam .col-accordion-sidebar {
    background: var(--color-neutral-gray-01);
}
body.layout-gem_rdam select {
    width: 100%;
}
.form_input_check_title {
    font-weight: bold;
}
.round-item .paragraph--small {
    margin-left: 4rem;
}
.round .js-round-selector:disabled+.round-item .round-item-description,
.round .js-round-selector:disabled+.round-item .round-item-header {
    opacity: 0.5;
}
.round .js-round-selector:disabled+.round-item .checkmark:hover, .round-item .radioshape:hover {
	border: 2px solid var(--color-neutral-gray-04) !important;
}
.round-item .radioshape:after{
    width: 12px;
    height: 12px;
}
.round .round-item-title--container > *:not(.title) {
    font-size: var(--font-size-s);
    display: block;
    text-indent: -10px;
    margin-left: 20px;
}
.round-item .checkmark {
    width: 2.6rem;
    height: 2.6rem;
}
.alert {
    margin-bottom: 0;
}
.alert .material-icons {
    font-size: 2.4rem;
}
.round-item .round-item-selector {
    float: left;
    padding-right: 2.4rem;
    cursor: pointer;
}
.round-item.geen .paragraph--small, .round-item.extern .paragraph--small {
    margin-left: 0;
}

.round .round-item.invitado {
    background-color: var(--color-brand-light);
}
.round p{
    color: var(--color-neutral-gray-09);
}
.round input:checked + .round-item {
    background-color: var(--color-brand-primary);
}
.round input:checked + .round-item .title,
.round input:checked + .round-item p,
.round input:checked + .round-item .round_title,
.round input:checked + .round-item .round-item-title .material-icons {
    color: var(--color-neutral-white);
}
/*********
* Closed page
**********/
.closed img {
    max-width: 200px;
    padding: 0 0 20px 0;
}
.right {
    background-image: var(--closed-image);
}

@media (min-width: 768px) {
    body.layout-gem_rdam .col-form {
        grid-column: span 10 / 12;
    }
}
@media (min-width: 992px) {
    body.layout-gem_rdam .col-form {
        grid-column: span 8 / -1;
        padding: 0 3.2rem;
    }
    body.layout-gem_rdam .col-accordion-sidebar {
        grid-column: span 4;
        padding: 0 3.2rem;
    }
}
@media (min-width: 1200px) {
    body.layout-gem_rdam .col-accordion-sidebar {
        grid-column: span 5;
    }
    body.layout-gem_rdam .col-form {
        grid-column: span 7;
    }
}
@media (max-width: 991px) {
    .header_visual {
        min-height: auto;
        padding: 0.5em;
    }
    body.layout-gem_rdam main {
        padding-left: 0.5em;
        padding-right: 0.5em;
    }
    body.layout-gem_rdam main > * {
        padding: 0.4em 1.2em;
    }
    body.layout-gem_rdam main .col-form {
        order: -1;
    }
    .container-fluid .sidebar .poweredby {
        position: relative;
        bottom: 0;
        top: 2em;
    }
}
@media (max-width: 1200px) {
    body.layout-gem_rdam .sidebar .sidebar-program {
        flex-wrap: wrap;
        padding: 0 0 10px 0;
    }
    body.layout-gem_rdam .sidebar .sidebar-program-time,
    body.layout-gem_rdam .sidebar .sidebar-program-desc {
        width: 100%;
    }
}