:root {
    --dark: #2e333d;
    img {}
    ::-webkit-scrollbar {
        height: 10px;
        width: 10px
    }

    ::-webkit-scrollbar-track {
        background: #efefef;img {}
        border-radius: 6px
    }

    ::-webkit-scrollbar-thumb {
        background: #d5d5d5;
        border-radius: 6px
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #c4c4c4
    }
}

* {padding: 0; margin: 0; box-sizing: border-box;}
html {font-size: 16px;}
body {font-family: "Open Sans", sans-serif; font-size: 1rem; color: var(--dark); background: white;}
a {color: var(--dark);}
a.button, .navbar a, .breadcrumb a, .tabs a {text-decoration: none;}
h1 {font-size: 2rem;}
.is-hidden {display: none!important;}
.is-fullwidth {width: 100%!important;}
.is-justify-content-space-between {justify-content: space-between!important;}
section ul li {list-style: none; margin-block: 0.5rem;}
.footer {background-color: #fafafa; padding: 3rem 1.5rem 6rem;}
p, ol, ul {margin-bottom: 1.4rem;}

.has-text-danger {color: rgb(204, 0, 41)!important;}

.has-text-right {text-align: right!important;}
.has-text-left {text-align: left!important;}
.has-text-centered {text-align: center!important;}

.navbar.is-white .navbar-item[href^="#"],
a.button[href^="#"] {
  pointer-events: none;
  color: silver;
}

.tabs.is-toggle {
    display: inline-block;
    margin-bottom: 1.4rem;
}
.tabs.is-toggle ul {display: flex; align-items: stretch;}
.tabs.is-toggle ul li {margin: 0; padding: 0;}
.tabs.is-toggle ul li:last-child {border-right: 0;}
.tabs.is-toggle ul li a {padding: 0.5rem 0.75rem; display: block; border: 1px solid rgb(214, 217, 224); border-left: 0;}
.tabs.is-toggle ul li.is-active a {background: rgb(0, 156, 228); color: white; font-weight: bold}
.tabs.is-toggle ul li:first-child a {border-left: 1px solid rgb(214, 217, 224);}

@media screen and (min-width: 1408px) {
    .container:not(.is-max-desktop):not(.is-max-widescreen) {
      max-width: 1344px;
    }
}
@media screen and (min-width: 1216px) {
    .container:not(.is-max-desktop) {
      max-width: 1152px;
    }
}
@media screen and (min-width: 1024px) {
    .container {
      max-width: 960px;
    }
}
.container {
    flex-grow: 1;
    margin: 0 auto;
    position: relative;
    width: 100%;
}

.navbar > .container {
    width: 100%;
    min-height: 3.25rem;
}

.navbar {min-height: 3.25rem; position: relative; padding: 0 1rem;}
.navbar-item {display: flex; flex-direction: column;}
.navbar-item a, a.navbar-item {margin: 0 -1rem; padding: 0.375rem 1rem;}
.navbar-dropdown .navbar-item {padding-left: 2.5rem;}
.navbar-start, .navbar-end {padding-block: 0.5rem 1rem;}

.navbar-brand {width: 100%;}
.navbar-brand, .navbar-tabs {align-items: stretch; display: flex; min-height: 3.25rem;}
.navbar-brand .navbar-item {flex-direction: row; margin: 0; padding: 0; position: relative;}
.navbar-brand .navbar-item span {img {}
    font-weight: bolder;
    color: #363636;
    margin: 0 .75rem;
    line-height: 1rem;
    font-size: 80%;
}
.navbar-brand .navbar-item, .navbar-tabs .navbar-item {align-items: center; display: flex;}
.navbar-burger {
    color: var(--dark);
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: 0 0;
    border: none;
    cursor: pointer;
    display: inline-flex;
    height: 3.25rem!important;
    position: relative;
    width: 3.25rem;
    margin-left: auto;
    background: url(../img/menu.svg) center center no-repeat;
    padding: 0;
    margin-right: -1rem;
}
.navbar-burger.is-active {background: url(../img/close.svg) center center no-repeat;}
.navbar-burger span {display: none;}

@media screen and (max-width: 1023px) {
    .navbar-menu {display: none;}
    .navbar-menu.is-active {display: block;}
    .navbar-menu .navbar-item.has-dropdown > a {
        background: url(../ijoost@vdschee.nlmg/arrow_drop_down.svg) calc(100% - 1rem) center no-repeat;
        padding-right: 2.5rem;
    }
    .field.is-horizontal .field-body {flex-direction: column;}
}
@media screen and (min-width: 1024px) {
    .navbar-burger {display: none;}
    .navbar > .container, .navbar-menu, .navbar-start, .navbar-end {display: flex;}
    .navbar > .container {justify-content: space-between; width: 100%;}
    .navbar-brand {width: auto; padding-right: 1.5rem}
    .navbar-menu {flex-grow: 1; justify-content: space-between;}
    .navbar-start, .navbar-end {padding-block: 0; align-items: center; gap: 1.5rem;}
    .navbar-dropdown {display: none;}
    .navbar-item a, a.navbar-item {margin: 0; padding: 0.75rem 0;}
    .navbar-dropdown .navbar-item {padding-inline: 1rem;}
    .navbar-menu .navbar-item.is-hoverable:hover > .navbar-dropdown {
        display: block; 
    }
    .navbar-menu .navbar-item.is-hoverable > .navbar-dropdown {
        position: absolute;
        top: 3.25rem;
        z-index: 9;
        background: white;
        margin-inline: -1rem;
        right: 1rem;
        margin-top: -0.25rem;
    }
}

.breadcrumb {font-size: .875rem; line-height: 2; margin-bottom: 3rem;}
.breadcrumb ul {display: flex; align-items: center; flex-wrap: wrap;}
.breadcrumb ul li {list-style: none; display: flex; margin: 0;}
.breadcrumb ul li:not(:first-child)::before {
    color: rgb(214, 217, 224); 
    content: "/";
    font-size: 0.9rem;
}
.breadcrumb ul li a {display: flex; margin-inline: 0.6rem; align-items: center;}
.breadcrumb ul li:first-child a {margin-left: 0;}

.section {padding: 2.5rem 1rem;}
.content, .block:not(:last-child) {margin-bottom: 1.4rem;}

.hero {background: var(--dark); color: white; padding: 2.25rem 2rem; text-align: center;}

input[type="button"], input[type="submit"], button, .button {
    display: inline-block; 
    width: auto; 
    border: 1px solid transparent;
    text-align: center;
    border-radius: 0.4rem;
    padding-inline: 1rem;
    cursor: pointer;
}
input::placeholder {color: rgb(196, 199, 206);}
.is-justify-content-left {text-align: left;}
.button {background: rgb(243, 244, 246);}
.button:not(input, button) {padding: 0.5rem 1rem;}
button[type="submit"], input[type="submit"], .button.is-dark {border-color: var(--dark); background: var(--dark); color: white; font-weight: bold;}

table {table-layout: fixed; border-collapse: collapse; margin-bottom: 1.4rem;}
.table td, .table th {padding: 0.5rem 0.75rem; border-bottom: 1px solid rgb(214, 217, 224); text-align: left;}
.table thead th {border-width: 2px;}
.table tr:last-child td {border-width: 0;}
.table tr > :first-child {padding-left: 0;}
.table tr > :last-child {padding-right: 0;}

td.is-clipped,
th.id-clipped {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
  
.label {display: block; font-weight: bold;}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(11rem,1fr));
    grid-template-rows: auto;
    gap: 0.75rem;
}
.grid.gap-3 {gap: 1.5rem;}
.is-clickable {cursor: pointer;}

.is-display-flex, .is-flex {display: flex !important;}
.is-flex-grow-1 {flex-grow: 1!important;}
.field-body {gap: 0.75rem;} 
.is-flex.is-gap-1 {gap: 0.5rem;}

.columns .column > .card {height: 100%;}

.buttons {display: flex; gap: 0.5rem;}
.button .icon {margin-right: 0.5rem;}
input, button, select, textarea {
    border-radius: 0.4rem;
    height: 2.5rem;
    border: 1px solid rgb(214, 217, 224);
    outline: 0;
    padding: 0.5rem 0.75rem;
    font-family: "Open Sans", sans-serif; 
    font-size: 1rem; 
    width: 100%;
    display: block;
    background: white;
    appearance: none;
}
input[type="file"] {height: auto;}
textarea {height: 10rem; resize: vertical;}
select, body .selectize-input {
    background: url(../img/arrow_drop_down.svg) calc(100% - 0.5rem) center no-repeat;
    padding-right: 2rem;
}
body div.selectize-input {padding-block: 0.45rem 0.3rem!important;}
.selectize-input input {height: auto;}
.control {position: relative;}
.control.has-icons-left .input, .control.has-icons-left .select select {
    padding-left: 2.5rem;
}
.field.is-grouped {flex-direction: row; gap: 0.75rem}
.field.is-grouped .is-expanded {flex-grow: 1;}
.control.has-icons-left .icon, .control.has-icons-right .icon {
    color: var(--dark);
    height: 2.5rem;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 2.5rem;
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
}
p.help:empty {display: none;}

.navbar-item.has-dropdown > a {
    background: url(../img/arrow_drop_down.svg) right center no-repeat;
    padding-right: 1.5rem;
}

.select:not(.is-multiple):not(.is-loading):after {
    inset-inline-end: 1.125em;
    z-index: 4
}
a.button[href^="#"], input[disabled] {
    background-color: rgb(243, 244, 246);
    border-color: rgb(243, 244, 246);
    cursor: not-allowed;
    color: silver;
}
a.button[href^="#"] {pointer-events: none;}

.tabs.is-toggle ul li a:focus,
input:not([disabled]):focus, select:not([disabled]):focus, input:not([disabled]):active, .button:focus, .button:active {
    border-color: rgb(0, 156, 228);
    box-shadow: rgba(0, 156, 228, 0.5) 0px 0px 0px 3px;
    outline: 0;
}
.button:not([disabled]).is-danger, input:not([disabled]).is-danger {border-color: rgb(255, 72, 109);}
.button:not([disabled]).is-danger:focus, input:not([disabled]).is-danger:focus {box-shadow: rgba(255, 102, 133, 0.5) 0px 0px 0px 3px;}
.button:focus, .button:active {background: rgb(228, 243, 251);}


.help {font-size: 0.75rem;}
.help.is-danger {color: rgb(204, 0, 41); margin-top: 0.25rem;}
button[type="submit"].is-danger {background: rgb(255, 72, 109);}
.button.is-danger.is-outlined {color: rgb(204, 0, 41); background: transparent; font-weight: normal;}
.button.is-small {font-size: 0.75rem; padding: 0.3rem 0.75rem;}

button[type="submit"]:focus, input[type="submit"]:focus, .button.is-dark:focus, .button.is-dark:active {
    border-color: rgb(1, 106, 155);
    background: rgb(1, 106, 155);
} 


label {margin-bottom: 0.5rem;}
.field {display: flex; flex-direction: column; margin-bottom: 0.75rem; width: 100%;}
.field .field {margin-bottom: 0;}
.field.control {margin-bottom: 0;}
.field.is-horizontal {flex-direction: row;}
.field.field.is-horizontal label {margin-bottom: 0;}
.field.is-horizontal .field-label {margin-inline-end: 1.5rem; flex-grow: 1; min-width: 7rem; text-align: right; line-height: 2.5rem;}
.field.is-horizontal .field-body {width: 100%; display: flex;}
.field.is-horizontal .field-body .control {flex-grow: 1;}

form > .field:last-child:not(:first-child) .button, .buttons .button {margin-top: 1rem;}

.card, .box {box-shadow: 0rem 0rem 0.35rem rgba(0,0,0,.2); padding: 1.5rem;}

.tag {
    display: inline-block; 
    font-size: 0.8rem; 
    background: rgb(243, 244, 246); 
    padding: 0.25em 0.5em; 
    margin: 0.35em 0.1rem 0 0;
    border-radius: 0.25em;
}

.title, h1, h2, h3 {margin-bottom: 1rem;}
.title.is-1 {font-size:3rem}
.title.is-2 {font-size:2.5rem}
.title.is-3 {font-size:2rem}
.title.is-4 {font-size:1.5rem}
.title.is-5 {font-size:1.25rem}
.title.is-6 {font-size:1rem}
.title.is-7 {font-size:.75rem}

.is-size-1 {font-size:3rem!important}
.is-size-2 {font-size:2.5rem!important}
.is-size-3 {font-size:2rem!important}
.is-size-4 {font-size:1.5rem!important}
.is-size-5 {font-size:1.25rem!important}
.is-size-6 {font-size:1rem!important}
.is-size-7 {font-size:.75rem!important}

input.alternative-password:not(:placeholder-shown) {
    font-family: 'Courier New', Courier, monospace;
    color: transparent;   
    text-decoration-line: line-through;
    text-decoration-color: var(--dark);
    text-decoration-thickness:.5rem;
    letter-spacing: .4rem;
    text-decoration-style:dotted;
}

@media print, screen and (min-width: 769px) {
    .is-hidden-tablet {display: none !important;}
}
@media screen and (max-width: 768px) {
    .is-hidden-mobile {display: none !important;}
    .field.is-horizontal {flex-direction: column;}
    .field.is-horizontal .field-label {text-align: left; line-height: 1.4rem; margin: 0 0 0.5rem 0;}
}
body .selectize-input {
    box-shadow: none!important;
    border-radius: 0.4rem!important;
    border: 1px solid rgb(214, 217, 224);
    padding: 0rem 0.75rem!important;
}
body .selectize-control.multi .selectize-input > div {color: var(--dark); background: rgb(243, 244, 246); border-radius: 3px;}