: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/background.jpg");

    /***Brand Colors***/
    --color-brand-primary: #00811f;
    --color-brand-primary-rgb: 0, 129, 31;
    --color-brand-secondary: #c93675;
    --color-brand-tertiary: #EFF4F6;
    --color-brand-light: #00811e1c;
    --color-brand-dark: #00811f;

    /***Message Colors***/
    --color-message-succes: #00811F;
    --color-message-warning: #EDB500;
    --color-message-info: #1791D4;
    --color-message-error: #D70D0D;


    /***Neutral Colors***/
    --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;

    /***Font***/
    --font-family-body: 'Bolder', Arial, sans-serif;
    --font-family-title: 'Bolder Heading', sans-serif;
    --font-family-title-light: 'Bolder light', sans-serif;
    --font-size: 1.6rem;

    --border-radius: 0;

    /**** Voor meer settings zie: /themes/base/assets/style/variables.css ****/
}

html {
    scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6, .accordion_title {
    color: var(--color-brand-primary);
}
h1,h2,.header_visual-content h3 {
    font-family: var(--font-family-title);
}
h1 {
    font-size: var(--font-size-xl);
}
h3, h4, h5, h6 {
    font-family: var(--font-family-title-light);
}
.content-container, p, .form_label, select, input, .input, fieldset {
    color: var(--color-neutral-black);
}
.header_visual-content h1,
.header_visual-content h3 {
    color: var(--color-neutral-black);
    margin: unset;
}
.header_visual-content h3 {
    font-size: var(--font-size-m);
}
.sidebar h3, .custom_title {
    font-weight: bold;
    font-size: var(--font-size-m);
    font-family: var(--font-family-body);
}
.accordion_title {
    color: var(--color-neutral-black);
}
a, .form_input_check_title {
    color: var(--color-neutral-black);
    font-weight: normal;
}
textarea:focus-visible, select:focus-visible, input:focus-visible {
    outline-color: var(--color-neutral-gray-08);
    outline-width: 2px;
    outline-style: solid;
    outline-offset: -2px;
    border: 1px solid transparent;
    box-shadow: none;
}
.form_element--phonenumber .iti {
    width: 100%;
}
.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;
}
textarea:hover, select:hover, input:hover, .input:hover {
    border: 1px solid var(--color-brand-primary);
}
input[type="checkbox"], input[type="radio"] {
cursor: pointer;
}
[type="checkbox"]:checked~label:before, [type="checkbox"]:checked~.checkbox-custom-label:before {
    -webkit-box-shadow: none;
    box-shadow: none;
}
input[type="checkbox"]:hover, input[type="radio"]:hover, label:hover:before, .checkbox-custom-label:hover:before {
    -webkit-box-shadow: none;
    box-shadow: none;
}
/******************
* Layout gem_rdam
******************/
body.layout-gem_rdam {
    position: relative;
    height: auto;
    background: var(--color-brand-dark);
}
body.layout-gem_rdam .header_visual .header_visual-content,
.content-container {
    background: var(--color-neutral-white);
}
.content-container {
    min-height: unset;
}
body.layout-gem_rdam header {
    margin-top: calc(var(--menu-height) + 2em);
}
body.layout-gem_rdam header .header_visual .container {
    padding: 0;
    width: 100%;
    max-width: 1440px;
}
body.layout-gem_rdam header .header_visual .header_visual-image {
    background: var(--header-image);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    height: 20em;
    overflow: hidden;
}
body.layout-gem_rdam main {
    width: 100%;
    max-width: 1440px;
    margin-left:auto;
    margin-right:auto;
    position: relative;
    margin-top: 0;
    margin-bottom: 5em;
}
body.layout-gem_rdam .sidebar {
    padding-top: 0;
    background: var(--color-brand-tertiary);
}
body.layout-gem_rdam .sidebar, body.layout-gem_rdam .sidebar p {
    font-size: var(--font-size-s);
}
body.layout-gem_rdam .sidebar .sidebar-program {
    width: 100%;
    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%;
    color: var(--color-neutral-gray-08);
}
body.layout-gem_rdam .sidebar hr {
    border-color: var(--color-brand-primary);
    width: 15%;
}
body.layout-gem_rdam .sidebar iframe {
    border: none;
}
body.layout-gem_rdam footer .footer_bar {
    padding: 26px 0;
}
body.layout-gem_rdam footer .poweredby {
    text-align: left;
    left: 0;
}
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 .poweredby {
    position: absolute;
}
body.layout-gem_rdam .menu {
    max-width: 1440px;
    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 {
    position: relative;
}

.note {
    color: var(--color-brand-secondary)
}

@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;
    }
    body.layout-gem_rdam .col-accordion-sidebar {
        grid-column: span 4;
    }
    .container-fluid .col-accordion-sidebar + .col-form {
        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;
    }
}
.header_visual {
    padding: 0 2em;
    max-width: 1440px;
    margin: 0 auto;
    background-position: center top;
}
body.layout-gem_rdam main {
    padding: 0 2em;
}
@media (max-width: 991px) {
    .header_visual {
        min-height: auto;
        padding: 0 0.5em;
    }
    body.layout-gem_rdam main {
        padding: 0 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;
        left: 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%;
    }
}
