:root {
    --primary-color: #6c9ea3;
    --secondary-color: #24a916;
    --spot-color-1: #ededed;

    --btn-primary-bg : #6c9ea3;
    --btn-primary-txt : #ffffff;
    --btn-primary-border : #6c9ea3;
    --btn-primary-bg-hover : #538c92;
    --btn-primary-txt-hover : #ffffff;
    --btn-primary-border-hover : #538c92;
    
    --btn-secondary-bg : #ffffff;
    --btn-secondary-txt : #2d4576;
    --btn-secondary-border : #b8d4d7;
    --btn-secondary-bg-hover : #ffffff;
    --btn-secondary-txt-hover : #2d4576;
    --btn-secondary-border-hover : #6c9ea3;
    
    --btn-action-bg : #24a916;
    --btn-action-txt : #ffffff;
    --btn-action-border : #24a916;
    --btn-action-bg-hover : #34c525;
    --btn-action-txt-hover : #ffffff;
    --btn-action-border-hover : #24a916;
    
    --btn-language-select-hover : #b8d4d7;
    
    --scrollbar : #596f9c;
    --link-color: #567e82;
    --link-color-hover: #21727a;
    --action: #ef005d;

}

/*------scroll bar---------------------*/

::-webkit-scrollbar {
    width: 5px !important;
    height: 5px !important;
  }
  ::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--scrollbar);
    border: 0px none #ffffff;
    border-radius: 0px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar);
  }
  ::-webkit-scrollbar-thumb:active {
    background: var(--scrollbar);
  }
  ::-webkit-scrollbar-track {
    background: transparent;
    border: 0px none #ffffff;
    border-radius: 50px;
  }
  ::-webkit-scrollbar-track:hover {
    background: transparent;
  }
  ::-webkit-scrollbar-track:active {
    background: transparent;
  }
  ::-webkit-scrollbar-corner {
    background: transparent;
  }

/* Placeholder */
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #999; font-size: 0.9rem;
    opacity: 1; /* Firefox */
    font-style: normal;
}
  
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #999; font-size: 0.9rem; font-style: normal;
}
  
::-ms-input-placeholder { /* Microsoft Edge */
    color: #999; font-size: 0.9rem; font-style: normal;
}



textarea:hover, input:hover, textarea:active, input:active, textarea:focus, input:focus, button:focus, button:active,
button:hover, label:focus, .btn:active, .btn.active { outline:0px !important; box-shadow: none !important; }

html, body, .non-footer, .page-content {
    min-height: 100%;
}

body                { font-family: 'Roboto', 'Helvetica', Arial, sans-serif; }
.non-footer         { padding-bottom: 290px; min-height: 100vh; }
footer              {
                        position: relative;
                        min-height: 240px;
                        clear:both;
                    } 

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1400px;
    }
}

header                  { position: relative;  }

#language-select        { position: absolute; top:0; right:0; z-index: 1000; box-shadow: 0 0 9px rgb(0 0 0 / 19%); display: flex; flex-direction: column; }
#language-select a      { padding: 8px 10px; background-color: #FFF; font-size: 0.8rem; line-height: 0.5rem; display: inline-flex; align-items: center; }
#language-select a:hover  { background-color: var(--btn-language-select-hover); color: #FFF; box-shadow: 0 0 9px rgb(0 0 0 / 19%); text-decoration: none; }
#language-select img    { width: 17px; margin-right: 5px; vertical-align: baseline; }
#language-select a.inactive-lang       { display: none; }
#language-select:hover .inactive-lang       { display: block; }

.brand                  { position: absolute; top: 2vw; left: 1rem; z-index: 5; box-shadow: 2px 2px 25px 5px rgb(255 255 255 / 50%); }

 .main-nav               { position: absolute; padding: 0 20px; top: 34px; width: 100%; display: flex; flex-direction: row; justify-content: center; z-index: 50; }
 @media (min-width: 768px) { 
    .main-nav               { top: 47px; }
}

.main-nav .navbar       { padding: 0; width: 100%; max-width: 1400px; box-shadow: 0 5px 26px rgb(0 0 0 / 30%); }      
.navbar-brand           { background-color: #567e82; margin: 0; padding: 0; display: flex; align-items: center; }
.navbar-brand img       { width: 100%; } *
.nav-item               { padding: 11px 1rem; }
a.nav-link              { color: #000; }
a.nav-link:hover        { color: #000; }
a.nav-link.niv1         { font: 600 16px/18px 'Roboto', 'Helvetica', Arial, sans-serif; }
.nav-link.disabled      { color: #99a1a9; }

.nav-item.dropdown:hover .dropdown-menu { display: block; }

p                       { margin-bottom: 0rem; }
ul                      { padding-left: 22px; }
.whitespace             { margin-bottom: 2rem; }

.fw-bold                { font-weight: 600; }

.badge.licentie-count         { position: absolute; right: 10px; top: 10px; background-color: var(--action); padding: .25em .46em; }

.search .form-control   { width: 180px; border-radius: 0; }
.search .btn            { border-radius: 0; }
body.search-mode .search                { width: 100%; }
body.search-mode .mobile-search         { display: flex; width: 100%; }
body.search-mode .form-inline .custom-select, 
body.search-mode .form-inline .input-group { width: 100%; }

.menu-main-searchwrapper,
.menu-main-searchwrapper input            { background: #efeeee; border-color: #999 !important; }

.mobile-search .menu-main-searchwrapper             { width: 100%; }
.mobile-search .menu-main-searchwrapper input       { width: calc(100% - 37px); }


.nav-link.dropdown          { padding-right: 30px !important; }
.nav-link.dropdown::after   {
    content: ''; position: absolute; top: 0; right: 10px; height: 30px; width: 9px;
    background: url('../images/chevron-right-light.svg') 90% 50% / 8px auto no-repeat; transform: rotate(90deg);
} 

button.btn-inloggen.dropdown      { padding-right: 45px !important; }
button.btn-inloggen.dropdown::after   {
    content: ''; position: absolute; top: 11px; right: 25px; height: 30px; width: 9px;
    background: url('../images/chevron-right-light.svg') 90% 50% / 8px auto no-repeat; transform: rotate(90deg);
} 


/* footer */
footer                  { background-color: var(--spot-color-1); }

.account-name           { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dropdown-item.active, 
.dropdown-item:active   { background-color: #567e82; }


.licentie-prefill       { position: absolute; padding: 0 20px; bottom: CALC(20px + 4vw); width: 100%; display: flex; flex-direction: row; justify-content: center; z-index: 7; }
.licentie-prefill-form  { width: 100%; max-width: 460px; text-align: center; }      
.licentie-prefill-form .form-group  { margin-bottom: 0; }
.licentie-prefill h2    { font-size: 1.2rem; color: #FFF; text-shadow: 1px 1px 10px #000000, 0px 0px 15px #567e82; margin-bottom: 1.5rem; } 

#form-licentie-prefill  { display:flex; justify-content: center; padding: 0 0.5rem; }  
#form-licentie-prefill .form-group .form-control { border-radius: .25rem 0 0 .25rem; font-size: 1.2rem; /* font-family: 'Consolas','Courier New', monospace;*/  }  
#form-licentie-prefill .form-group .btn { border-radius: 0 .25rem .25rem 0; font-size: 1.2rem; }  

@media (max-width: 575.9px) { 
    .navbar-brand   { width: 45%; height: 56px; display:flex; flex-direction: row; align-items: center;  }
}


@media (min-width: 576px) { 
    .licentie-prefill h2    { font-size: 1.4rem; }
}

@media (max-width: 767.9px) { 
    /* #form-licentie-prefill .form-group .form-control { border-radius: .25rem .25rem 0 0; }  
       #form-licentie-prefill .form-group .btn { border-radius: 0 0 .25rem .25rem; }   */
}

@media (min-width: 768px) { 
    .licentie-prefill       { bottom: CALC(80px + 4vw); }
    .licentie-prefill h2    { font-size: 1.8rem; }
}


/* text links */
a                       { color: var(--link-color); }
a:hover                 { color: var(--link-color-hover); }


/* ------- PAGE VISUALS ------- */
.visual                         { position: relative; width: 100%; min-height: 400px; max-height: 800px; background: url('/images/platform/visual2.jpg') center center no-repeat; background-size: cover;  }
.visual-grid                    { position: absolute; width: 100%; min-height: 400px; max-height: 800px; height: 100%; background: url('/images/platform/visual-grid.png') center center no-repeat; background-size: cover; z-index:1; }
body.vervolg .visual            { position: relative; width: 100%; min-height: 400px; max-height: 531px; background: url('/images/platform/visual_vervolg.jpg') center center no-repeat; background-size: cover;  }
body.vervolg .visual-grid        { position: absolute; width: 100%; min-height: 400px; max-height: 531px; height: 100%; background: url('/images/platform/visual-grid.png') center center no-repeat; background-size: cover; z-index:1; }

.visual-lesmateriaal            { position: relative; width: 100%; min-height: 600px; max-height: 600px;  }
/* .visual-lesmateriaal.rood       { background: rgb(186,41,111); background: linear-gradient(90deg, rgba(186,41,111,1) 0%, rgba(86,126,130,1) 76%); } */

.visual-lesmateriaal.niveau-color,
.visual-lesmateriaal.niveau-color0    { background: #2b3e92; background: linear-gradient(90deg,  #2b3e92 0%, #538c92 76%); }
.visual-lesmateriaal.niveau-color3    { background: #284091; background: linear-gradient(90deg,  #284091 0%, #2bc4d8 76%); }
.visual-lesmateriaal.niveau-color4    { background: #cc183d; background: linear-gradient(90deg,  #ce1840 0%, #ec348d 76%); }
.visual-lesmateriaal.niveau-color5    { background: #01594b; background: linear-gradient(90deg,  #025c4e 0%, #b9c100 76%); }
.visual-lesmateriaal.niveau-color6    { background: #efc000; background: linear-gradient(90deg,  #f88600 0%, #f89d00 76%); }
.visual-lesmateriaal.niveau-color7    { background: #955097; background: linear-gradient(90deg,  #955097 0%, #6772c3 90%); }

@media (max-width: 575.9px) { 
    .visual-lesmateriaal            { position: relative; width: 100%; min-height: 400px; max-height: 600px;  }
}

.visual-low            { position: relative; width: 100%; height: 292px; overflow: hidden; }
.visual-low.rood       { background: #cc183d; background: linear-gradient(90deg,  #cc183d 0%, rgba(86,126,130,1) 76%); }
.visual-low.blauw      { background: #284091; background: linear-gradient(90deg,  #284091 0%, rgba(86,126,130,1) 76%); }
.visual-low.geel       { background: #efc000; background: linear-gradient(247deg, #efc000 0%, rgba(86,126,130,1) 76%); }
.visual-low.paars      { background: #955097; background: linear-gradient(90deg,  #955097 0%, rgba(86,126,130,1) 76%); }
.visual-low.groen      { background: #01594b; background: linear-gradient(200deg, #cae4e7 0%, rgba(86,126,130,1) 116%); }
/* .visual-low.groen      { background: #b8d4d7; background: linear-gradient(160deg,  #b8d4d7 0%, rgba(86,126,130,1) 76%); } */




/*-------- DROPDOWN ------------*/
@media (min-width: 768px) { 
    .dropdown-menu    { top: CALC(100% - 1px); }
}


/*-------- LESMATERIAAL ------------*/
.lesmateriaal-header-container            { position: absolute; padding: 0; top: 108px; width: 100%; z-index: 10; padding: 0 20px; display: flex; flex-direction: row; justify-content: center; }
.lesmateriaal-header-row                    { max-width: 1400px; width: 100%; }
.lesmateriaal-header                                    { max-width: 1400px; width: 100%; display: flex; color: #FFF; }
.lesmateriaal-header h1,
.lesmateriaal-header .h1                            { color: #FFF; margin-bottom: 0; }

@media (min-width: 768px) { 
    .lesmateriaal-header h1,
    .lesmateriaal-header .h1                            { font-size: 50px;  }
}
.lesmateriaal-header .lesmateriaal-header-cover     { text-align: right; padding: 0 35px 0 20px; width: 30%; } 
.lesmateriaal-header .lesmateriaal-header-title     { display: flex; flex-direction: column; justify-content: center; width: 70%;  }
.lesmateriaal-header .lesmateriaal-header-cover img { width: 100%; max-width: 200px; }

#lesmateriaal-tabs                                       { padding: 24px 0 0; border-bottom: 1px solid #979797;  }
#lesmateriaal-tabs .nav-item                             { padding: 0 5px 0 2px; }
#lesmateriaal-tabs .nav-item .nav-link                   { padding: 0.4rem 0.7rem; border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; border-width: 1px 1px 0px 1px; border-color: #C1C1C1; border-style: solid; margin-bottom: -1px;  }
#lesmateriaal-tabs .nav-item .nav-link.active.show       { font-weight: 700; border-color: #979797; background-color: #FFF; }
#lesmateriaal-tabs .nav-item .locked                     { width: 12px; margin: -3px 0 0 4px; display: inline-block; opacity: 0.7; }

#lesmateriaal-tabs.nav-tabs { border-bottom: 0; }

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: inherit;
    border: 0 !important;
    background-color: #fff;
    border-color: #fff;
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border: 0 !important;
    border-color: #e9ecef #e9ecef #dee2e6;
}


@media (min-width: 768px) { 
    div.lesmateriaal-right-column   { position: relative; z-index:100; margin-top: -100px; }
}

.licentie-check                     { float: left; margin: 2px 2px 0 0; }


body.empty .pe--lesmateriaal .pe-formulier              { background-color: rgba(0,0,0,.03);
    border: 1px solid rgba(0,0,0,.125);
    padding-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: calc(.25rem - 1px);
 }


.docent-code-sticker    { background: #ffbc0a; display: inline-block; padding: 5px 10px; transform: rotate(3deg); }

/*-------- LESMATERIAAL GRID ------------*/
.pe--lesmateriaal.lesmateriaal-grid                 { padding-left: 5px; padding-right: 5px; cursor: pointer; }
.pe--lesmateriaal.lesmateriaal-grid .card-body      { min-height: 150px; position: relative; }
.pe--lesmateriaal.lesmateriaal-grid .card-footer    { background: #FFF; border-top: 0; padding: 0.25rem; font-size: 0.8rem; text-align: center; }
.pe--lesmateriaal.lesmateriaal-grid .hoofdstukken   { padding-left: 15px; font-size: 0.8rem; margin-top: 10px; opacity: 0.7; 
                                                      background: #FFF url('/images/icons/black/clock-ten-thirty-regular.svg') 0px 4px / 11px 11px no-repeat; }
.pe--lesmateriaal.lesmateriaal-grid .lesmateriaal-image     { display: flex; flex-direction: row; align-items: center; justify-content: center; min-height: 240px; }
.pe--lesmateriaal.lesmateriaal-grid .card-header    { background-color: #f9f9f9; 
    -webkit-transition: background-color 0.3s linear;
    -moz-transition: background-color 0.3s linear;
    -o-transition: background-color 0.3s linear;
    transition: background-color 0.3s linear; 
}

.pe--lesmateriaal.lesmateriaal-grid:hover .lesmateriaal-card    { -webkit-box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.14); box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.14); }
.pe--lesmateriaal.lesmateriaal-grid .progress   { position: absolute; top: 0; left:0; width:100%; z-index: 1; height:8px; border-radius: 0; }
.pe--lesmateriaal.lesmateriaal-grid .progress .progress-bar  { height:8px; }

/* Licenties */
.pe--lesmateriaal.lesmateriaal-grid .card-footer.lesmateriaal-active    { background: #4ebcf1; color: #fff; }
.pe--lesmateriaal.lesmateriaal-grid .card-footer.lesmateriaal-expired  { background: #c8c8c8; color: #fff; }
.lesmateriaal-square-active     { position: absolute; width: 32px; height: 32px; top: -2px; right: 10px; z-index: 10; background: #4ebcf1; text-align: center; padding-top: 2px; -webkit-box-shadow: 1px 2px 0px 0px rgba(0,0,0,0.2); box-shadow: 1px 2px 0px 0px rgba(0,0,0,0.2); }
.lesmateriaal-square-expired   { position: absolute; width: 32px; height: 32px; top: -2px; right: 10px; z-index: 10; background: #c8c8c8; text-align: center; padding-top: 2px; -webkit-box-shadow: 1px 2px 0px 0px rgba(0,0,0,0.2); box-shadow: 1px 2px 0px 0px rgba(0,0,0,0.2); }


/*-------- LESMATERIAAL SLIDER ------------*/
.lesmateriaal-slider                        { width: 230px; }


/*-------- LESMATERIAAL OVERZICHT ------------*/
.pe--lesmateriaal_overzicht #sorting        { max-width: 170px; }

@media (min-width: 768px) { 
    .pe--lesmateriaal_overzicht #sorting    { max-width: 230px; }
}


/*--------- PAGINERING --------------------*/
.page-item.btn-secondary.active             { background-color: #6c9ea3 !important; border-color: #6c9ea3 !important; color: #ffffff !important; }


/*-------- PROGRESS ------------*/
.progress-bar {
    background-color: #ffbc0a;
}


/*--------- BREADCRUMB -------------*/
.breadcrumb { background: transparent; }
.breadcrumb-item                { font: 600 15px/18px 'Roboto', 'Helvetica', Arial, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.breadcrumb-item a              { color:#FFF }
.breadcrumb-item.active         { color:#FFF; opacity: 0.7; }
.breadcrumb-item+.breadcrumb-item           { padding-left: 0rem; }
.breadcrumb-item+.breadcrumb-item::before   {
                                            content: ' ';
                                            width: 17px;
                                            height: 10px;
                                            background: url(/images/chevron-right-regular.svg) 4px 0px / 10px 10px no-repeat;
                                            }


.shadow                 { -webkit-box-shadow: 2px 2px 15px 2px rgba(138,149,176,0.1); box-shadow: 2px 2px 15px 2px rgba(138,149,176,0.1);}

.page-intro-blocks      { position: relative; margin-top: -50px; z-index: 20; }
/* .page-intro-blocks .border-bar  { border-top: 8px solid #b8d4d7 !important; } */


a.btn-inloggen,
.btn.btn-inloggen           { /* background-color: #24a916; color: #FFF; */ height: 56px; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 0 15px; border-radius: 0;
    font: 600 16px/18px 'Roboto', 'Helvetica', Arial, sans-serif; text-decoration: none;
}

/* Indexpagina */
body.index div.main-index        { position: relative; z-index: 10; margin-top: -30px; }

@media (min-width: 768px) { 
    body.index div.main-index        { margin-top: -80px; }
}

body.index.xs-editmode div.main-index       { margin-top: 0; }

/* Vervolgpagina */
body.vervolg div.main-vervolg        { position: relative; z-index: 10; margin-top: -130px; }
body.vervolg .visual                 { max-height: 600px; }
body.vervolg .visual-grid            { max-height: 600px; }
body.vervolg .pe--artikel            { padding: 40px 40px 0 40px; background: #fff; }
body.vervolg .pe-formulier           { padding: 0 40px 0 40px; background: #fff; }



/* Landigspage intro */
.pe--landingpage_intro *  { text-align: center; color: #FFF }
.pe--landingpage_intro .padding     { padding: CALC(2.5vw + 1rem); }
.pe--landingpage_intro h1           { font-size: CALC(1.4vw + 0.9rem); }
.pe--landingpage_intro p            { font-size: 0.9rem; }
.border-bar                         { border-top: 10px solid #b8d4d7 !important; }

@media (min-width: 768px) { 
    .pe--landingpage_intro p            { font-size: 1.2rem; }
}

/* ACHTERGRONDKLEUREN */
.landingpage-gradient               { background: linear-gradient(90deg,#567e82 15%, #bb714e 100%);  } 
.landingpage-gradient.blauw						        { background: linear-gradient(90deg,#284091 0%, #2bc4d8 100%); }


/* NAVBAR Responsive open */ 
div.navbar-collapse.collapse.show,
div.navbar-collapse.collapsing  { position: absolute; top: 56px; background: #fff; width: 100%; z-index: 10000; }
.navbar-collapse.show .navbar-nav   { box-shadow: 0 4px 15px rgb(153 153 153 / 30%); }
.navbar-collapse.show .nav-item  { border-top: 1px solid #e4e4e4; }
.navbar-collapse.show .dropdown-menu   { border: 0; padding: 0; }
.navbar-collapse.show .dropdown-menu .dropdown-item { padding: .25rem 0.5rem; }


h1,.h1 { font-family: 'Poppins'; font-weight: 700; font-size: 2.0rem;  }
h2,.h2 { font-family: 'Poppins'; font-weight: 700; font-size: 1.4rem;  }
h3,.h3 { font-family: 'Poppins'; font-weight: 700; font-size: 1.2rem; line-height: 1.3rem;  }
h4,.h4 { font-family: 'Poppins'; font-weight: 700; font-size: 1.0rem; }
h5,.h5 { font-weight: 700; font-size: 1.0rem; }
h6,.h6 { font-weight: 600; font-size: 1.0rem;  }

/* Buttons */
.btn                                { white-space: nowrap; }
.btn img                            { width: 16px; opacity: 1; } /* default size iconen */
.btn:hover img                      { opacity: 1; } 

.btn-primary                        { background: var(--btn-primary-bg); border-color: var(--btn-primary-border); color: var(--btn-primary-txt); font-weight: 500; }
.btn-primary.hover,
.btn-primary:hover                  { background-color: var(--btn-primary-bg-hover); border-color: var(--btn-primary-border-hover); color: var(--btn-primary-txt-hover); }
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle,
.btn-primary.focus,
.btn-primary:focus                  { background-color: var(--btn-primary-bg-hover) !important; border-color: var(--btn-primary-border-hover) !important; }
.btn-primary.disabled			    { background-color: #cacaca; border-color: #cacaca; }
.btn-primary.disabled:focus		    { box-shadow: none; }

.btn-secondary                      { background: var(--btn-secondary-bg); border-color: var(--btn-secondary-border); color: var(--btn-secondary-txt); font-weight: 500; }
.btn-secondary.hover,
.btn-secondary:hover                { background-color: var(--btn-secondary-bg-hover); border-color: var(--btn-secondary-border-hover);  color: var(--btn-secondary-txt-hover);}
.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.show>.btn-secondary.dropdown-toggle,
.btn-secondary.focus,
.btn-secondary:focus                { background-color: var(--btn-secondary-bg-hover); border-color: var(--btn-secondary-border);  color: var(--btn-secondary-txt-hover); }
.btn-secondary.disabled			    { background-color: #cacaca; border-color: var(--btn-secondary-border); color: var(--btn-secondary-txt-hover); }
.btn-secondary.disabled:focus		{ box-shadow: none; }

.btn-action                        { background: var(--btn-action-bg); border-color: var(--btn-action-border); color: var(--btn-action-txt); font-weight: 500; }
.btn-action.hover,
.btn-action:hover                  { background-color: var(--btn-action-bg-hover); border-color: var(--btn-action-border-hover); color: var(--btn-action-txt-hover); }
.btn-action:not(:disabled):not(.disabled).active,
.btn-action:not(:disabled):not(.disabled):active,
.show>.btn-action.dropdown-toggle,
.btn-action.focus,
.btn-action:focus                  { background-color: var(--btn-action-bg-hover) !important; border-color: var(--btn-action-border-hover) !important; }
.btn-action.disabled			    { background-color: #cacaca; border-color: #cacaca; }
.btn-action.disabled:focus		    { box-shadow: none; }


.navbar-toggler:focus,
.btn:focus,
.btn:active          { outline: none !important; box-shadow: none; }

/* FORMS */
.form-check-input     { position: relative; margin: 0 0.3rem 0 0; }


/* FILTERS */
.filter-group .card-header          { position: relative; padding: 0.75rem 0.75rem; font: 500 16px/16px 'Roboto', 'Helvetica', Arial, sans-serif; color: var(--btn-secondary-txt) }
.filter-group .card-header::after         { position: absolute; width: 20px; height: 20px; top: 10px; right: 5px; content: " "; background:url('/images/chevron-right-light.svg') center center / 14px 14px no-repeat; transform: rotate(90deg);}
.filter-group .card-header[aria-expanded="true"]::after   {transform: rotate(-90deg);}

@media (min-width: 768px)  {
    /* Hide collapse on desktop */
    .btn-filter-collapse    { display: none; }
    #filters.collapse { display: block; }
 }

 .filter-group .custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: #4ebcf1;
    background-color: #4ebcf1;
}

.custom-control-label   { display: flex; }


.btn.remove-filter                  { background:url('/images/times-light.svg') CALC(100% - 10px) 10px / 14px 14px no-repeat;  }

.btn-filter-collapse                { position: relative; }
.btn-filter-collapse::after         { position: absolute; width: 20px; height: 20px; top: 8px; right: 5px; content: " "; background:url('/images/chevron-right-light.svg') center center / 14px 14px no-repeat; transform: rotate(90deg);}
.btn-filter-collapse[aria-expanded="true"]::after   {transform: rotate(-90deg);}
 
.navbar-toggler         { height: 56px; margin: 0 0; font-size: 1rem; }
.navbar .navbar-toggler-icon { background-image: url('/images/bars-regular.svg') !important; background-size: 14px; height: 1rem; }


/* ------------ Lesmateriaal artikelen ---------------*/
.collapse-header   { position: relative; }
.collapse-header:hover   { color: var(--primary-color); }
.collapse-header:hover .ondertitel  { color: #000; }

.collapse-header::after         { position: absolute; width: 20px; height: 30px; top: 13px; right: 5px; content: " "; background:url('/images/chevron-right-light.svg') center center / 18px 18px no-repeat; transform: rotate(90deg);}
.collapse-header[aria-expanded="true"]::after   {transform: rotate(-90deg);}
.collapse-style { /*background-color: rgba(0,0,0,.03);*/ border: 1px solid rgba(0,0,0,.125); padding-left: 1rem; padding-right: 1rem; border-radius:calc(.25rem - 1px); }


/* ------------ Lesmateriaal artikelen ---------------*/
.pe--lesmateriaal_download .row div.download-info { display: flex; align-items: start; flex-direction: column; }
@media (min-width: 768px) { 
    .pe--lesmateriaal_download .row div.download-info { flex-direction: row; align-items: center;  }
}

/* ------------ Lesmateriaal openklap ---------------*/

body.vervolg .pe--landingpage_openklap {
    margin-left: 40px;
    margin-right: 40px;
    /* background: #fff; */
}


.pe--lesmateriaal_artikel img {max-width:100%;}

.image-container			            {  }
    .image-container img	            { width:100%; }

/* ------------ Videoplayer ---------------*/
.video-container			            { position:relative; padding:0 0 56.25%; height:0; margin-top: 6px; overflow:hidden; background:#000; }
    .video-container iframe             { position:absolute; top:0; left:0; width:100%; height:100%; }

/* ------------ Card slider ---------------*/
.pe--cardslider                         { background-color: rgba(0,0,0,.03); border: 1px solid rgba(0,0,0,.125); }
.slick-track                            { display: flex; }
.carousel-wrapper                       { overflow: hidden; }
#customCarouselPrev,
#customCarouselNext                     { background: #FFF url('/images/chevron-right-light.svg') center center / 14px 14px no-repeat; width: 2.5rem; }
#customCarouselPrev                     { transform: rotate(180deg); }