/**
 * @file
 * Subtheme specific CSS.
 */
:root {
  /*extra kleur*/
  --accentkleur:#FFFF00;
}
body {
  width: 100%;
  overflow-x: hidden;
}

/*Bario + Bootstrap overschrijven*/
:root {
  --bs-primary-border-subtle: color-mix(in srgb, var(--accentkleur), white 20%) !important;
}
#drupal-off-canvas-wrapper {
  z-index: 2001 !important;
}
.affix {
    position: fixed !important;
    width: 100%;
    top: 0;
    z-index: 1035;
    left: 0;
}
.text-bg-primary {
  background-color: var(--accentkleur) !important;
}
.border-primary {
  border-color: var(--accentkleur);
}
.bg-primary {
  background-color: var(--accentkleur) !important;
}

.alert {
  max-width: 100%;
  white-space: wrap;
  position: relative;
}
.alert svg { 
  max-width: 50px;
  max-height: 50px;
}
.alert-heading {
  display: none;
}
.site-footer .content {
  color: black;
}
.form-floating > .form-control-plaintext ~ label::after, .form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after, .form-floating > .form-select ~ label::after {
  background-color: transparent;
}
.contact-message-personal-form .form-type-item {
  padding-top: 40px;
}
.contact-message-personal-form .form-type-item > label {
  display: block;
  padding-left: 0;
  font-weight: 700;
}


/*eigen classes*/
.bg-hover:hover {
  background-color: var(--accentkleur);
}
.hoogte-100 {height: 100px !important}
.hoogte-200 {height: 200px !important}
.hoogte-300 {height: 300px !important}
.hoogte-400 {height: 400px !important}
.hoogte-500 {height: 500px !important}
.hoogte-600 {height: 600px !important}
@media only screen and (min-width: 1200px){
  .hoogte-lg-100 {height: 100px !important}
  .hoogte-lg-200 {height: 200px !important}
  .hoogte-lg-300 {height: 300px !important}
  .hoogte-lg-400 {height: 400px !important}
  .hoogte-lg-500 {height: 500px !important}
  .hoogte-lg-600 {height: 600px !important} 
  .hoogte-lg-al {height: 100% !important}
}

.ui-dialog-titlebar-close::before {
  content: "X";
  position: absolute;
  top: 1px;
  left: 3px;
  line-height: 1rem;
}
.ui-dialog {z-index: 9000}
/*einde eigen classes*/


/*front editing*/
.editing-container {
  z-index: 2000;
}
/*end front editing*/

.card {
    /*kleuren voor card*/
    --bs-card-color:#363535 ;
    --bs-card-bg: #fff;
    --bs-card-cap-color: #363535;
}

img {
    max-width: 100%;
}
.placeholder {
    background-color: transparent;
}
.no-lineheight {line-height: 0 !important}


/* inline images en tekst uitlijnen (ckeditor)*/
.text-align-left {
  text-align: left;
}
.text-align-right {
  text-align: right;
}
.text-align-center {
  text-align: center;
}
.text-align-justify {
  text-align: justify;
}
.align-left {
  float: left;
  padding-right: 1rem;
}
.align-right {
  float: right;
  padding-left: 1rem;
}
.align-center {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.caption {
  display: table;
}
.caption > * {
  display: block;
  max-width: 100%;
}
.caption > figcaption {
  display: table-caption;
  max-width: none;
  caption-side: bottom;
}
figcaption {
  text-align: center;
}
.text-formatted blockquote {
  border-left: 5px solid #ccc;
  font-style: italic;
  margin-left: 0;
  margin-right: 0;
  overflow: hidden;
  padding-left: 1.5em;
  padding-right: 1.5em;
}
/* einde inline images (ckeditor)*/

/*admin-toolbar fix*/
.toolbar-horizontal.toolbar-fixed nav.affix,
.toolbar-vertical.toolbar-fixed nav.affix{
  margin-top: 39px;
}
.toolbar-horizontal.toolbar-tray-open nav.affix {
  margin-top:76px;
}
.toolbar-oriented .toolbar-bar {
    z-index: 1050;
}
/*breadcrumb*/
.breadcrumb {
    margin-top: 1rem;
}



/* -- zoeken blok -- */
/*searchform in mainmenu*/
section.region-header-form {margin-left: 10px;}

/*searchblok in topheader*/
.region-top-header-form .col-auto {
  padding-left: 0;
  padding-right: 0; }

/*searchblok in andere regions*/
.sidebar .zoekform,
.featured-bottom .zoekform,
.site-footer__top .zoekform,
.site-footer__bottom .zoekform {
    margin: 10px 5px;
}

.zoekform .form-control,
.zoekform button.btn {
 border-radius: 0;
}
/* einde -- zoeken blok -- */

/* fasttoggle */
/*a.fasttoggle-node-status {
text-decoration: none;
padding: 0.5rem;
border: 1px solid var(--bs-link-color);
}
a.fasttoggle-node-status:hover,
a.fasttoggle-node-status:focus {
opacity: 0.8;
}*/

/*fronypage artikels*/
.node-extra-links .inline__links {
    display: inline-block;
}
.node-extra-links .nav-link,
.node-extra-links > a {
padding: 0 0.3em;
}
.card-image img {
 -o-object-fit: cover !important;
 object-fit: cover !important; 
 height: 200px; 
 width:100%;
}
@media (min-width: 768px){
    .card-image.horizontaal img {
     -o-object-fit: cover !important;
     object-fit: cover !important; 
     height: 100%; 
    }    
}
@media (max-width: 767px){
    .card-image.horizontaal img.rounded-start { 
        border-bottom-left-radius:0 !important;
        border-top-right-radius: var(--bs-border-radius) !important;
    }   
}
.field--name-field-tags {
    margin-top: 1rem;
}
.node-extra-links .nav-link,
.node-extra-links > a {
padding: 0 0.3em;
}
.view-frontpage .pagination {
    justify-content: center;
    margin-top: 10px;
}

/*bootstrap overwrite*/
.placeholder {
  display: inline-block;
  min-height: 1em;
  vertical-align: bottom;
  cursor: text;
  background-color: transparent !important;
  opacity: 1;
}

/*admin toolbar*/
.toolbar,
.toolbar a,
.toolbar p,
.toolbar li,
.toolbar h4,
.toolbar h5,
.toolbar h6
 {
  font-family: "Source Sans Pro", "Lucida Grande", Verdana, sans-serif;
  font-size: inherit;
  font-weight: normal;
  font-style: normal;
  font-size: inherit;
  line-height: 1;
  letter-spacing: normal;
}

/*actieknop*/
.actieknop .fontawesome-icons,
.actieknop .fontawesome-icon {display: inline;}
/*einde actieknop*/

/*site-footer__bottom*/
.site-footer__bottom {
  --tw-fbottom-bg:#000000;
  --tw-fbottom-color:#ffffff;
}
.site-footer {
  padding-bottom: 0;
}
.site-footer__bottom {
  background: var(--tw-fbottom-bg);
  color: var(--tw-fbottom-color);
  margin-bottom: 0;
  padding: 0;
}
.site-footer__bottom .content {
  padding: 5px;
  margin-top: 0;
}
.site-footer__bottom p {
  color: var(--tw-fbottom-color);
  line-height: 1;
  font-size: 1em;
  letter-spacing: 0;
  margin-bottom: 5px;
}
.site-footer__bottom a {
  color: var(--tw-fbottom-color) !important;
  line-height: 1;
  font-size: 1em;
  letter-spacing: 0;
  margin-bottom: 0;
}

/*socialicons*/
.linkicon__item {
  padding: 0 5px;
  text-decoration: none;
  font-size: 1.5em;
}

/*footermenu*/
.menu--footer a.nav-link {
  overflow: hidden;
  display: inline-block;
  position: relative;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  font-weight: 500;
}
.menu--footer a.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.1em;
  background-color: var(--accentkleur);
  opacity: 0;
  transition: opacity 300ms, transform 300ms;
}
.menu--footer a.nav-link::after {
  opacity: 1;
  transform: translate3d(-100%, 0, 0);
}
.menu--footer a.nav-link:hover::after,
.menu--footer a.nav-link:focus::after{
  transform: translate3d(0, 0, 0);
}
/*einde footermenu*/

/*topbalk*/
#navbar-top p,
#navbar-top a,
#navbar-top h3,
#navbar-top li,
#navbar-top {
  line-height: 2.2;
  font-size: 1em;
  text-decoration: none;
}
#navbar-top .col-auto .block-block-content {
  display: inline-block;
  margin-right: 5px;
}
/*einde topbalk*/

/*ckeditor body*/
.text-formatted .accordion-item {border: none;}
.text-formatted .accordion-button::after {
  visibility: hidden;
}
.text-formatted .accordion-button:focus {
border: none;
box-shadow:none;
}

/*pagina titel*/
/*h1.title {
  color: #16A143;
  display: table;
}
h1.title:before {
  display: table-cell;
  content: "";
  background-image:url(../img/v-in-het-groen.png) ;
  background-repeat: no-repeat;
  background-position-x: left;
  width: 42px;
  height: 67px;
}
.path-frontpage h1.title:before {
display: none;
}*/
.map-container {
  margin-bottom: -50px;
}

/*front views*/
.datum .dag-maand {
  font-size: 1.7rem;
  font-weight: 700;
}
/*front-block*/
#block-mytheme-startpaginagrid {
  background-image: url(/sites/default/files/styles/carousel_img/public/heroslider/slide3.png);
  background-attachment: fixed;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 5rem 0;
}
/*einde front-block*/

/* klaro cookie consent */
.klaro .context-notice p {
  padding-top: 5px !important;
  margin-top: 10px !important;
}
.klaro .cookie-modal {
  z-index: 5000 !important;
}
.klaro .cookie-modal .cm-modal .cm-header h1 {
  display: table !important;
}
.klaro .cookie-modal .cm-modal .cm-header h1.title > span {
  display: table-cell;
  vertical-align: middle;
}
.klaro {
  & .cookie-modal, & .context-notice, & .cookie-notice {
    & a {
      color: var(--accentkleur);
    }
  }
}
/*einde klaro cookie consent */

#the_logo img {
   max-height: 100px;
}