/* ------------------------------------  Helpcenter ------------------------------------------------------------------------------------------------------------ */

/* ---------- content width */
.page-node-type-helpcenter .region.region-content { width: 100%; }

/* ---------- page title width helpcenter*/
.page-node-type-helpcenter h1.vl-title--h1 { max-width: 100%; }

/* ---------- page title width antwoordpagina*/
.page-node-type-myfaq h1.vl-title--h1 { max-width: 100%; font-size: 3rem;}

/* ---------- Hide FAQ Title */
.block-views-blockfaq-block-2 h2 { display: none; }

/* ---------- Zoekform */

#block-faqzoekform .js-form-type-textfield input.form-text { font-size: 18px; border-radius: 0; padding: 21px; }
#block-faqzoekform input.vl-button.vl-search__submit.button.js-form-submit.form-submit { color: #FFF !important; border-radius: 0 !important; font-size: 18px !important; padding: 6px 42px 38px 42px !important; }
#block-faqzoekform input::placeholder { color: #666; }

/* ---------- Styling category blocks */

.view-faq-s .item-list { float: left; margin-right: 5%; width: 40%; }
.view-faq-s .item-list:nth-child(odd) { clear: both; }
.view-faq-s .item-list h3 { font-size: 1.8rem; text-decoration: none; color: #000; font-weight: 500; line-height: 3rem; }

/* ---------- Styling contact form */

#helpcenter-form { clear: both; }
#helpcenter-form .special-radio-buttons .form-radios .form-type-radio { float: left; margin-left: 12px; }
#helpcenter-form .form-radios .form-type-radio label { display: inline !important; }
#helpcenter-form .special-radio-buttons .form-radios .form-type-radio label { background-color: #05C; color: #FFF; width: 200px; text-align: center; padding: 9px 0; display: block !important; }
#helpcenter-form .webform-options-display-side-by-side > div { display: inline-block; margin-right: 0em;}
#helpcenter-form .special-radio-buttons .form-radios .form-type-radio label:hover { background-color: #999; }
#helpcenter-form .special-radio-buttons .form-radios .form-type-radio label:active { background-color: #000; }
#helpcenter-form .special-radio-buttons .form-radios .form-radio { display: none; }
#helpcenter-form select { color: #595959; border: 1px solid #b8b8b8; border-radius: 2px; background: #fcfcfa; box-shadow: inset 0 1px 2px rgba(0,0,0,0.125); padding: 3px 12px; margin-top: 3px; }

/* ---------- Helpcenter : Contactgegevens ANB (footer block) ----  */

#block-helpcentercontactgegevensanb { background-color: #f3f3f3; color: #555; padding: 21px; margin-bottom: 0px;  margin-top: 90px; }

/* ------------------------------------  / END Helpcenter ------------------------------------------------------------------------------------------------------------ */

/* ------------------------------------  GENERAL ------------------------------------------------------------------------------------------------------------ */

/* ------------------ overrule unpublished background color */

.node--unpublished { background-color: #FFF; }

/* ------------------ custom opmaak opties in CKEditor */

div.tekstblok-lichtgrijs { background-color: #F9F9F9; padding: 21px; margin: 21px 0px; }
div.tekstblok-middelgrijs { background-color: #EDEDED; padding: 21px; margin: 21px 0px; }
div.tekstblok-donkergrijs { background-color: #333; padding: 21px; margin: 21px 0px; color: #FFF; }
div.tekstblok-donkergrijs a:link, div.tekstblok-donkergrijs a:visited { color: #FFF; }
div.tekstblok-donkergrijs a:hover { color: #999; }
div.tekstblok-indent  { padding: 0 0 0 30px; }
div.note-cursief { color: #999; padding: 0 12px 0 12px; font-style: italic; font-size: 1.35rem; font-weight: normal;}
div.lichtgrijze-kader { border: 10px solid #FAFAFA; padding: 9px; margin: 12px 0; }

/* ------------------ layout ---------------------------------------------- */

/* ------------------ hide book page navigation at the bottom of book pages */
.book-navigation { visibility: hidden; display: none; }

/* ------------------ class to hide elements */

.anb-display-none { display: none; }

/* ------------------ hide value of 'toon enkel aangeklikte paragrafen' */
/* !!! Do not remove this div. This value is needed for the jQuery code of a detailpage (show/hide paragraphs) */

.field--name-field-toon-enkel-de-aangeklikte-, .field--name-field-verberg-introductie { display: none; }

/* ------------------ search block */

.vl-search { position: absolute; right: 3rem; top: 4rem; z-index: 9999; }
.faq-zoekform .vl-search { position: relative; right: 0rem; top: 0rem; z-index: 9999; }

.form--inline.clearfix { position: absolute; right: 3rem; top: 6rem; z-index: 9999; }

/* ------------------ detailpagina */

.field--name-field-paragrafen, .field--name-field-formuliertitel { border-top: 1px solid #ccc; margin-top: 3rem; padding-top: 2rem; }

/* ------------------ bg colors */

.anb-bgcolor-grey { background-color: #F6F6F6; }

/* ------------------ main navigation */

.menu-toggle { visibility: hidden; display: none; }
.menu--main ul.menu { text-align: right; font-weight: 500; font-size: 1.8rem; letter-spacing: -0.02rem; }
.menu--main ul.menu li { padding: 0 0.75rem; border-right: 1px solid #CCC;  }
.menu--main ul.menu li:last-of-type { padding: 0 0 0 0.75rem; border-right: none;  }
.menu--main ul.menu li a { text-decoration: none; }
.menu--main .menu-item { display: inline; }

.no-top-border { border-top: 0px; }

/* ------------ accordeon */

.ckeditor-accordion-container > dl { margin: 21px auto; border-top: 1px solid #05C; border-bottom: 1px solid #05C; border-left: none; border-right: none;}

.ckeditor-accordion-container > dl dt > a, .ckeditor-accordion-container > dl dt > a:not(.button) { display: block; padding: 10px 15px 10px 39px; background-color: #FFF; color: #05C; cursor: pointer; -webkit-transition: background-color 300ms; transition: background-color 300ms; border-bottom: none; }
.ckeditor-accordion-container > dl dt > a, .ckeditor-accordion-container > dl dt > a:not(.button):hover { background-color: #FFF; color: #05C; }

.ckeditor-accordion-container > dl dt > a > .ckeditor-accordion-toggle { left: 0px;}
.ckeditor-accordion-container > dl dt > a > .ckeditor-accordion-toggle:before, .ckeditor-accordion-container > dl dt > a > .ckeditor-accordion-toggle:after { background: #05C; }

/* ------------------ margins & paddings ---------------------------------- */

/* ------------------ general page content padding top */

.vl-region:first-child { padding-top: 2rem; }

.vl-doormat { margin-bottom: 2.4rem; display: block; }

.anb-margin-top-0-5rem { margin-top: 0.5rem; }
.anb-margin-top-1rem { margin-top: 1rem; }
.anb-margin-top-2rem { margin-top: 2rem; }
.anb-margin-top-3rem { margin-top: 3rem; }

.anb-margin-bottom-1rem { margin-bottom: 1rem; }
.anb-margin-bottom-2rem { margin-bottom: 2rem; }
.anb-margin-bottom-3rem { margin-bottom: 3rem; }

.anb-padding-1rem { padding: 1rem; }
.anb-padding-2rem { padding: 2rem; }
.anb-padding-3rem { padding: 3rem; }

.anb-padding-bottom-1rem { padding-bottom: 1rem; }
.anb-padding-bottom-2rem { padding-bottom: 2rem; }
.anb-padding-bottom-3rem { padding-bottom: 3rem; }

.anb-line-height-1rem { line-height: 1rem; }
.anb-line-height-2rem { line-height: 2rem; }
.anb-line-height-3rem { line-height: 3rem; }

/* ------------------  div dimensions /* ------------------ */

.div-width-fit-content { width: fit-content !important; }

/* ------------------ typography ------------------------------------------  */

/* ------------------ italic */
em { font-style: italic; }
.small-italic { font-size: 0.7em; font-style: italic; color: #666; }

/* ------------------ titles */

.vl-title--h1 { margin-bottom: 2.4rem; border-bottom: 1px solid #ccc; line-height: 1; font-weight: 400; padding-bottom: 1.5rem; margin-top: 1rem; max-width: 910px }
.vl-title--h2 { font-size: 2.4rem; font-weight: 500; }

.path-frontpage .vl-title--h1 { border-bottom: none; margin-bottom: 1rem;  line-height: 0.7rem;}
.path-frontpage .vl-title--h2 { margin-bottom: 2.1rem; border-bottom: 1px solid #ccc; line-height: 1; font-weight: normal; padding-bottom: 1.5rem; margin-top: 1.5rem; }

.vl-title--h3 { padding: 0; margin: 0; line-height: 1.5; font-size: 1.8rem; }
.vl-title--h4 { padding: 0; margin: 0; line-height: 1.35; font-size: 1.5rem; }
.vl-title--h4.h4-larger  { font-size: 2rem; }
.vl-title--h3.h3-larger  { font-size: 2.4rem; font-weight: 500; }

/* MAILCHIMP */
.js-form-item.form-item.js-form-type-checkbox.form-type-checkbox.js-form-item-gdpr-consent.form-item-gdpr-consent {
  display: flex;
  gap: 1rem;
  margin: 2rem 0;
}

/* typography > drupal button css reset */
.button { all: revert !important; }

#block-mailchimp-natuurbeheerplannen #edit-submit,
.vl-button {
    align-items: center !important;
    -moz-appearance: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-color: transparent !important;
    background-color: #05c !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #fff !important;
    cursor: default !important;
    display: inline-flex !important;
    font-family: Flanders Art Sans,sans-serif !important;
    font-size: 1.6rem !important;
    height: 3.5rem !important;
    line-height: 3.5rem !important;
    outline: 0 !important;
    overflow: hidden !important;
    padding: 0 4rem !important;
    text-align: center !important;
    text-decoration: none !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.vl-button:hover, .vl-button:focus { 
	background-color: #003bb0 !important;
  cursor: pointer !important;
}

/* typography > buttons */

.vl-button--custom a { color: white; text-decoration: none; }

/* typography > external links */

.anb-external-link a:after { content: ''; margin-left: 0.6rem; }

.anb-external-link-with-icon .field__item { line-height: 3em; border-bottom: 1px solid #FFF; }
.anb-external-link-with-icon a:after { content: ''; margin-left: 0.6rem; }

/* typography > lists */

ul { list-style: disc; padding: 0 4rem }
ol { list-style: decimal; padding: 0 3rem }

/* typography > doormat */

.vl-doormat p { line-height: 2rem; }

/* typography > detailpagina > submenu TOC */

.toc-js { margin-top: 8.6rem; border-top: 1px solid #ccc; padding-top: 3rem; }
.toc-js .h2 { font-family: "Flanders Art Sans"; font-weight: bold; text-transform: uppercase; margin-bottom: 0.6rem; }
.toc-js ul { list-style: none; line-height: 2.4rem; padding: 0; }
.toc-js a { text-decoration: none; font-size: 1.4rem; font-weight: 500; }
.toc-js a[aria-label^="Boek"] { display: none; } /* hide book traversal links in toc */

.toc-js .clicked-toc-element { color: #000; }

/* typography > detailpagina > submenu TOC > PWW 2e sublevel*/

.toclang-h3 { margin-left: 15px; }

/* typography > detailpagina > submenu related pages */

.block-book-navigation { margin-top: 2rem; margin-bottom: 0.6rem; }
.block-book-navigation h2 { font-family: "Flanders Art Sans"; font-weight: bold; text-transform: uppercase; }
.block-book-navigation ul.menu { margin-left: 0; }
.block-book-navigation ul { list-style: none; line-height: 2.4rem; padding: 0; }
.block-book-navigation a { text-decoration: none; font-size: 1.4rem; font-weight: 500; }

/* typography > breadcrumb */

.breadcrumb ol li::before { content: " > "; }
.breadcrumb ol li:last-of-type { color: #666; }

/* ------------------ tables --------------------------------------------- */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}

thead tr {
    border-bottom: 0.2rem #cbd2da solid;
}

tbody {
    display: table-row-group;
}

tbody tr {
border-bottom: 0.1rem #cbd2da solid;
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

th {
    font-size: 1.6rem;
    line-height: 1.3;
    text-align: left;
    vertical-align: top;
    padding: 1.2rem 1rem;
	font-weight: 500;
    white-space: nowrap;
}

td {
    font-size: 1.6rem;
    line-height: 1.3;
    text-align: left;
    vertical-align: top;
    padding: 1.2rem 1rem;
}

/* ------------------ element styling ------------------------------------ */

.anb-border-bottom { border-bottom: 1px solid #ccc; }
.anb-border-right { border-right: 1px solid #ccc; }
.anb-border-left { border-left: 1px solid #ccc; }

.anb-white-border { border: 1px solid #FFF; }

/* ------------------ footer navigation ------------------------------------ */

#anb-footer { background-color: #666; padding: 3rem 0; }
.anb-footernav { }

.anb-footernav--col { margin-left: 3rem; padding-left: 2rem; border-left: 1px solid #CCC; }
.anb-footernav--col:nth-child(2) { border-left: none; margin-left: 0rem; }

.anb-footernav .vl-title--h3 { text-transform: uppercase; font-size: 1.5rem; color: white; letter-spacing: 0.05rem; margin-bottom: 1rem; }

.anb-footernav a:link, .anb-footernav a:visited { color: #fff; text-decoration: none; font-size: 1.35rem; }
.anb-footernav a:hover { color: #ccc; text-decoration: none; }

/* ------------------ natuur en bos footer ------------------------------------ */

#natuurenbosfooter-footer { background-color: #eee; text-align: center; padding: 2rem;}

/* ------------------ search results ----------------------------------------- */

.view-zoekresultaten .views-row { padding-bottom: 1.2rem; }

/* ------------------ admin section ----------------------------------------- */

.form-item .description, .form-item label { display: none; }
#block-mailchimp-natuurbeheerplannen label { display: block; }


nav.tabs { background-color: #333; }
nav.tabs li a:link, nav.tabs li a:visited { color: white; }
nav.tabs li a:hover { color: #999; }


/* ----------------- forms --------------------------------------------------- */
.label-visible, .webform-submission-form label { display: block !important; }
#edit-foto-optioneel-upload-button { display: none !important; }
[id^="edit-foto-optioneel-upload-button"]{ display: none !important; }

/* loading bar while uploading foto */


.ajax-progress .throbber {
    background: url("/sites/default/files/afbeeldingen/uploadingbar-infinite.gif") no-repeat center;
    height: 50px;
    margin: 0;
    width: 150px;
}

/* ----- Duisternisbehoefte kaart --------------------------------------------- */

/* ------ iframe duisterniskaart aspect ratio --------- */

#duisterniskaart iframe {
	aspect-ratio: 16 / 9;
	height: 100%;
	width: 100%;
	border: 1px solid #ddd;
}

/* ---- legende duisternisbehoeftekaart ---------- */

#dbk-legende { background-color: #fff; padding: 21px; border: 1px solid #ddd; }
.dbk-legende-item { width: 100%; clear: both; height: 30px; }
.dbk-legende-kleur { width: 20px; height: 20px; float: left; margin-right: 9px; }
.dbk-legende-tekst { color: #222222; font-size: 1.35rem; float: left; }

.dbk-legende-kleur1 { background: linear-gradient(149deg, rgba(243,243,243,1) 0%, rgba(200,200,200,1) 45%, rgba(0,0,0,1) 100%); border: 1px solid #CCC; }
.dbk-legende-kleur2 { background-color: rgba(252,224,218,0.3); border: 1px solid #CCC; }
.dbk-legende-kleur3 { border-bottom: 2px solid rgba(244,168,0,1); height: 10px;}
.dbk-legende-kleur4 { border-bottom: 2px solid rgba(0,112,255,1); height: 10px;}
.dbk-legende-kleur5 { border-bottom: 2px solid rgba(209,255,115,1); height: 10px;}