@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
:root {

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

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

    /***Brand Colors***/
   --color-brand-primary: #0600C0;
    --color-brand-primary-rgb: 6,0,192;
    --color-brand-secondary: #F0E5E5;
    --color-brand-tertiary: #008A0B;
    --color-brand-light: #F9F4F4;
    --color-brand-dark: #2E4E5D; 

    --color-neutral-gray-0: #f4f6f6;
    --color-neutral-gray-01: #d5dbde;
    --color-neutral-gray-02: #c0c9ce;
    --color-neutral-gray-03: #abb7bd;
    --color-neutral-gray-04: #96a6ad;
    --color-neutral-gray-05: #81949d;
    --color-neutral-gray-06: #6c828c;
    --color-neutral-gray-07: #56707c;
    --color-neutral-gray-08: #777777;
    --color-neutral-gray-09: #2e2e2e;

    /***Font***/
     --font-family: 'Manrope', Arial, Helvetica, sans-serif;
     --font-family-title: 'Manrope', Arial, Helvetica, sans-serif;
    /* --font-size: 1.6rem; */
    --border-radius: 0;
    --box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.2);
    --menu-height: 138px;
    
    /**** Voor meer settings zie: /themes/base/assets/style/variables.css ****/
}
header .header_bar {
    -webkit-box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.2);
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.2);
}
h4{
    letter-spacing: normal;
}
.menu {
  height: unset;
    padding: 24px;
}
.logo {
    background-position: center;
    height: 90px;
}
#menu-btn img {
    height: 16px;
}
a#menu-btn {    
    text-decoration: none;
    width: 25ch;
}
a#menu-btn span {
    display: block;
    color: var(--color-neutral-gray-09);
    font-size: var(--font-size-xs);
    padding-left: 2px;
}
.page-portal #menu-btn{
    display: none;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-weight: 800;
    color: var(--color-neutral-gray-09);
}
.accordion_title {
    font-weight: 800;
    color: var(--color-brand-primary);
}
.form_label{
    font-weight: 600;
    color: var(--color-neutral-gray-09);
}
.container-fluid .sidebar{
    background-color: var(--color-brand-light);
}
.container-fluid .sidebar h3{
    margin: 1rem 0 0.8rem 0;
}
hr {
    border: 1px solid var(--color-brand-dark);
    margin: 3.2rem 0;
    width: 25%;
}
p{
    line-height: var(--lineheight-size-l);
}
.accordion_status span {
    font-weight: 600;
}
.form {
    margin-top:0;
}
.button, button{
    font-weight: 600;
}
.navbutton_text {
    font-size: var(--font-size-xs);
    font-weight: 800;
}
.container-fluid .poweredby {
    position: static;
    padding: 6.4rem 0;
}
.container-fluid .col-accordion-sidebar .sidebar {
    padding-right: 3.2rem;
    padding-bottom: 6.4rem;
}
.checkbox--inline .paragraph--small {
    padding-top: 3px;
}
.fab {
    font-family: "Font Awesome 5 Brands";
}

#header-icons ul {
    width: 100%;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
#header-icons ul li {
    background: #fff;
    width: 32px;
    height: 32px;
    float: left;
    border: 2px solid #000;
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
#header-icons ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
}
#header-icons ul li img {
    width: 16px;
    height: 16px;
    display: inline-block;
}
.layout-login .language_selector,
.language .language_selector {
    width: auto;
    color: var(--color-neutral-black);
    font-size: var(--font-size-xs);
    border-color: var(--color-neutral-black);
    border-width: 2px;
    min-width:20px;
}
.layout-login .language_selector,
.language select {
    background-image:none;
    padding-right: 8px;
    padding: 0 8px;
    min-height: 32px;
    height: 32px;
}
.layout-login .language_selector,
.language select:hover {
    background-image:none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.menu .language {
    margin-top: 0.0em;
}
.language {
    padding: 0;
    position: relative;
}

footer {
    background-color: var(--color-brand-secondary);
    color: var(--color-neutral-gray-09);
    padding:24px;
}
.footer_cta {
    text-align: left;
    grid-gap: 24px;
    max-width: 1400px;
    line-height: 1.42857143;
}
.footer_bar {
    padding-top: 2.4rem;
}
 .seo-col ul {
    float: left;
    list-style: none;
    padding: 0;
    margin: 0;
}
 .seo-col h4 {
    line-height: 20px;
    font-weight: 800;
    margin: 0 0 12px 0;
    color: var(--color-neutral-gray-09);
    font-size: 16px;
    line-height: 16px;
    color: var(--color-brand-primary);
}
.seo-col ul li a {
    color: var(--color-neutral-gray-08);
    cursor: pointer;
    text-decoration: none;
    font-weight: 400;
    font-size: 14px;
}

.accordion_title {
    margin: 0 0 0 10px;
}
.accordion_header {
    align-items: center;
    gap:8px;
}
.page-portal .row{
    margin-bottom: 16px;
}
.page-portal h3, .page-portal h4{
    margin: 0;
}
.portal-menu {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
}
.portal-menu a{
    text-decoration: none;
}
.tab-bar{
    border-bottom: 1px solid var(--color-brand-dark);
    margin-bottom: 32px;
}
.tab-bar h5{
    background-color: var(--color-brand-dark);
    color: var(--color-neutral-white);
    padding: 8px 16px;
    margin: 0;
    width: fit-content;
    border-radius: 8px 8px 0 0;
}
.statistics-item,
.statistics-block{
    background-color: var(--color-neutral-gray-0);
    padding: 24px;
}
.statistics-item h3{
    margin-bottom: 8px;
}
.statistics-item p{
    line-height: var(--lineheight-size-s);
    font-weight: 600;
}
.registration_link-block{
    background-color: var(--color-brand-dark);
}
.registration_link-block h4{
    color: var(--color-neutral-white);
    margin-bottom: 8px;
}
.registration_link-block input{
    margin-bottom: 16px;
}
@media (max-width: 1024px){
    .menu {
        justify-content: space-between;
    }
    header .header_bar {
        position: static;
    }
    main {
        margin-top: 0;
    }
}
@media (min-width: 1024px){
    .container-fluid .sidebar {
        min-height: calc(100vh - 400px);
        height: 100%;
    }
}
@media (min-width: 1200px){
    .col-form {
        grid-column: span 5 / 11;
    }
}