html.index,
html.vervolg {
  scroll-behavior: smooth;
}

@media (min-width: 1200px) {
  .container {
      max-width: 1400px;
  }
}

.btn        { border-radius: 20px; padding: .375rem 1.4rem; }
.btn .fal    { margin-left: 0.3rem; }

body                    { font-family: 'Roboto', serif; color: #333333; }
h1.h1-site-header       { font-family: 'Roboto Slab', serif; font-size: 3.8vw; line-height: 4vw; margin-bottom: 2vw; }
h1.h1-site-header span  { font-size: 2.4vw; line-height: 2.4vw; color: #01aec7; }
h2.h2-site-header       { font-size: 1.8vw; line-height: 2.5vw; }
.roboto-slab            { font-family: 'Roboto Slab', serif; }
.blauw                  { color: #01aec7; }
.header-actions   { white-space: nowrap; flex-wrap: nowrap; }

body.index section H1 { font-family: 'Roboto Slab', serif; font-size: 2.4vw; line-height: 2.4vw; color: #01aec7; margin-bottom: 2rem; }

.visual-bar   { overflow:hidden; position: relative;}
.visual-bar .visual-bar-textbox   { position:absolute; top: 5vw; right: 2vw; background-color: #fff; width: 50%; height: 1000px; border-radius: 5vw; transform: rotate(-4deg);  }
.visual-bar .visual-bar-text   { transform: rotate(4deg); margin-top: 4vw; margin-left: 4vw; margin-right: 3vw; }

footer      {}


h1,.h1    { font-family: 'Roboto Slab', serif; font-size: 2rem; line-height: 2.3rem;  }
h2,.h2    { font-size: 1.5rem; font-weight: 600; }
h3,.h3    { font-size: 1.3rem; font-weight: 600; }
h4,.h4    { font-size: 1.1rem; font-weight: 600; }
h5,.h5    { font-size: 1.0rem; font-weight: 600; }
h6,.h6    { font-size: 1.0rem; }


a         { color: #01aec7; }
a:hover   { color: #0098b8; }



/* Overview lessons in cards */

.container-card-lessons .row { justify-content: space-between; }
.card-lesson    { cursor: pointer; width: 100%; margin-bottom: 1rem; }

.card-lesson .card-body { display: flex; flex-direction: column; justify-content: flex-start; }
.card-lesson .card-body p.card-text-main { margin-bottom: 0.75rem }

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {  
  .card-lesson    { width: 48%; }
}
 
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
  .card-lesson    { width: 48%; }
}
 
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  .card-lesson    { width: 32%; }
}
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
  .card-lesson    { width: 24%; }
}

.card-lesson .card-footer {
    font-size: 0.75em;
    background-color: #f7f7f7;
    padding: 0.6em 1.25rem;

}

/* PLAY ARROW EFFECT */
.card-lesson .card-hover-action  { 
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-height: 180px; z-index: 10; color: #ffffff; background: rgba(255, 255, 255, 0.3); display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 3rem;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 0;}
.card-lesson .card-hover-action .fas  { text-shadow:1px 1px 15px rgba(255,255,255,1) }
.card-lesson:hover .card-hover-action { opacity:1; }


/* CARD IMAGE EFFECT */
.card-lesson .card-img-top      { overflow: hidden; max-height: 180px; }
.card-lesson .card-img-top img {
  width: 100%;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.card-lesson:hover .card-img-top img     {     transform: scale(1.1); }


/* SYSTEM MESSSAGES */
.alert         { line-height: 1.4rem; }

.alert-dismissible .close {
  line-height: 1.2rem;
}

/* PASSED  OVERVIEW */
.card-lesson .passed-label          {
  display: none;
}
.card-lesson.passed .passed-label   { 
  position: absolute;
  bottom: -28px;
  right: 12px;
  background: #ffffff;
  padding: 0.3rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  height: 70px;
  width: 125px;
  border-radius: 10px;
  display: block;
  transform: rotate(-7deg);
  background: rgb(255,255,255);
  background: linear-gradient(6deg, rgba(176,176,176,1) 20%, rgba(255,255,255,1) 50%);
}
.card-lesson.passed .passed-label .passed-label-text   { 
  transform: rotate(7deg);
  padding: 8px 0 0 0;
  text-align: center;
}

.card-lesson.passed .card-img-top img {
  filter: brightness(90%);
}
.card-lesson.passed:hover .card-hover-action    { opacity:0; }
.card-lesson.passed:hover .card-img-top img     { transform: scale(1.0); }


/* CERTIFICATE DOWNLOAD */
.card-certificate-alert.reveal     { overflow: hidden; max-height: 0;   
  -webkit-transition: all 1s ease 0.5s;
  -moz-transition: all 1s ease 0.5s;
  -ms-transition: all 1s ease 0.5s;
  -o-transition: all 1s ease 0.5s;
  transition: all 1s ease 0.5s;
} 
.card-certificate-alert.reveal.open { max-height: 600px;  }



/* LESSON */
.lesson-prefix              { font-weight: 600;  color: #6f6f6f; display: block; margin-bottom: 3px; }
.container-lesson h1        { font-family: 'Roboto Slab', serif; font-weight: 600; }
.videowrapper								{ position:relative; height:0; padding:0 0 56.25%; }
.videowrapper iframe				{ position:absolute; top:0; left:0; width:100%; height:100%; }
.no-video                   { background: rgb(92,178,244); background: linear-gradient(120deg, rgba(92,178,244,1) 3%, rgba(56,208,204,1) 100%); 
                              width: 100%; padding: 25% 0 25%; display: flex; justify-content: center; align-items: center;
                              color:#ffffff; font-size: 1.2rem; font-weight: 600;
                            }

#lesson-tabs .nav-link  {
  background: url('/images/bg_verloop.jpg') 0 0 no-repeat;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  font-size: 1.0rem;
  font-weight: 600;
  padding: 0.5rem 0.4rem;
  color: #000;
  border-color: #dee2e6 #dee2e6 #dee2e6 #ffffff; 
}

@media (min-width: 992px) {  
  #lesson-tabs .nav-link  {
    font-size: 1.2rem;
    padding: 1rem 2rem;
  }
}

#lesson-tabs .nav-link#tab1  {
  border-color: #dee2e6 #dee2e6 #dee2e6 #dee2e6;
}
#lesson-tabs .nav-link#tab2  {
  background-position: -200px 0;
}
#lesson-tabs .nav-link#tab3  {
  background-position: -400px 0;
}

#lesson-tabs .nav-link.active#tab1,
#lesson-tabs .nav-link.active   { 
  background-color: #f2f2f2; 
  border-color: #dee2e6 #dee2e6 #f2f2f2; 
}

#lesson-panes .tab-pane    { padding: 2rem; }
#lesson-panes .tab-pane.active   { background-color: #f2f2f2; }


/* LESSON PASSED */
.passed-lesson-message { display: none !important; }
.tab-pane.lesson-toets.passed .passed-lesson-message  { display: block !important; }
.tab-pane.lesson-toets.passed form#form-toetsvragen   { display: none !important; }


/* SIDEBAR MENU */
.sidebar-stiky    { position: sticky; top: 25px; }
div.sidebar-index-header { background-color: #f2f2f2; padding: 8px 12px; border-top: 1px solid #dee2e6; border-right: 1px solid #dee2e6; border-left: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; }
ul.sidebar-index  { 
    list-style-type: none; 
    padding: 0 0; 
    border-bottom: 1px solid #dee2e6; 
    border-right: 1px solid #dee2e6; 
    border-left: 1px solid #dee2e6; 
    overflow-y: auto; 
    height: CALC(100vh - 275px) !important; 
    max-height: 538px !important;
  }
ul.sidebar-index li { padding: 5px 10px; border-bottom: 1px solid #dee2e6;  }
ul.sidebar-index li.active-lesson { border-left: 3px solid #01aec7; font-weight: 600; }

ul.sidebar-index li a { font-family: 'Roboto', serif; color: #333333; }


/* LESSON QUESTIONS */
.form-group.question         {  }
.form-group.question .question-text      { font-size: 1.1rem; }
.form-group.question .form-check-label         { color: #333333;
  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
  -ms-transition: color 0.2s ease;
  -o-transition: color 0.2s ease;
  transition: color 0.62s ease;
}
.form-group.question .form-check-label:hover   { cursor: pointer; color: #01aec7 }

.form-group.question input[type=radio]:checked + label.form-check-label {
  color: #01aec7;
  font-style: normal;
} 

.form-group.question .question-check-options {
  background-color: #ffffff;
}

.form-group.question .form-check {
  padding: 0.5rem 0.5rem 0.5rem 2.25rem;
  border-width: 0 1px 1px 1px;
  border-style: solid;
  border-color: #ced4da;
}
.form-group.question .question-check-options .form-check:first-child  {
  border-radius: .25rem .25rem 0 0;
  border-width: 1px 1px 1px 1px;
} 
.form-group.question .question-check-options .form-check:last-child  {
  border-radius: 0 0 .25rem .25rem;
}
.form-group.question .form-check-input {
  margin-left: -1.25rem;
}


.form-group.question.answer-wrong .question-check-options { border: 2px solid #ff3b00; border-radius: 0.25rem; }
.form-group.question.answer-right .question-check-options { border: 2px solid #07b924; border-radius: 0.25rem; }



/* USP BAR */
.usp-bar    { background-color: #f2f2f2; }
.usp-bar .usp   { font-size: 1.0rem; line-height: 2.2rem; }
.usp-bar .far,
.usp-bar .fal   { margin-right: 10px; }
.usp-bar .fal.fa-check  { color: #01aec7 }

@media (min-width: 1200px) {  
  .usp-bar .usp   { font-size: 1.2rem; line-height: 2.2rem; margin-right: 1vw; }
}

.btn-primary  { color:#FFF;background:#07b924;border-color:#07b924; }
.btn-primary:hover{color:#FFFFFF;background: #5fc3e1; border-color:#5fc3e1 }


.btn-primary:focus,.btn-primary.focus{box-shadow:0 0 0 .2rem #07b924; color: #fff !important;}
.btn-primary.disabled,.btn-primary:disabled {color:#000000;background-color:#07b924;border-color:#07b924;}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
  color: #fff !important;
  background-color: #07b924 !important;
  border-color: #07b924 !important;
}

.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{
  box-shadow:0 0 0 .1rem #07b924;
  color: #fff !important;
}

*:focus,*.focus { box-shadow:0 0 0 0 pink !important; }

.btn-outline-secondary:hover {
  color: #fff;
  background-color: #5fc3e1;
  border-color: #5fc3e1;
}



/* ACTIVATION / LOGIN */
.form-control.activatiecode  { 
  border-top-left-radius: 20px !important; 
  border-bottom-left-radius: 20px !important; 
}
 
.activatiecode-succes { color: #07b924 }
.activatiecode-succes .fas  { font-size: 2.2rem; }


/* BREADCRUMB */
.breadcrumb {
  background: #FFFFFF;
  padding: 0;
  margin-bottom: 0em;
  align-items: center;
}
.breadcrumb-item  { font-family: 'Roboto Slab', serif; color: #555; }


/* Progressbar */
.progress-lesson-wrapper  { display: flex; }
.progress-lesson-label    { padding-right: 5px; font-size: 0.8rem; color: #777 }  
.progress-lesson-bar      { display: flex; }
.progress-lesson          { width: 15%;  height: 1rem; background: #dee2e6; margin-left: 1px }
.progress-lesson:hover    { background: #b3d6dc; cursor: pointer; }
.progress-lesson.done     { background: #00b7ce;  }

.progress-lesson-bar .progress-lesson:first-child  {
  border-radius: 0.5em 0 0 0.5em;
} 
.progress-lesson-bar .progress-lesson:last-child  {
  border-radius: 0 0.5em 0.5em 0;
}
.col-progressbar  { border-top: 1px solid #dee2e6 }

@media (min-width: 768px) {  
  .progress-lesson { width: 1rem; }
  .col-progressbar  { border-top: 0px solid #dee2e6 }
}


.progress-lesson-bar { width: 100%; }


/* READER */

body.reader                   { background-color: #ffffff; padding-top: 100px; } 
body.reader header            { 
  background-color: #F2F2F2; 
  padding: 10px; max-height: 62px;     
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}
body.reader.xs-editmode header  { position: relative; } 

.buttonwrapper .btn.square,
body.reader header .btn.square,
#inhoudsopgave .btn.square {
  width: 2.6rem; height: 2.6rem; line-height: 1.8rem; padding: .375rem 0.0rem !important; 
  color: #333 !important;
  background-color: #F2F2F2 !important;
  border-color: #F2F2F2 !important;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
body.reader header .book-author   {
  line-height: 1.2em;
}

body.reader header:hover .btn.square       { 
  color: #000 !important;
  background-color: #e2e2e2 !important;
  border-color: #e2e2e2 !important;
}

body.reader header:hover .btn.square:hover       { 
  color: #fff !important;
  background-color: #5fc3e1 !important;
  border-color: #5fc3e1 !important;
}

body.reader #inhoudsopgave {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 10000000;
  top: 0;
  left: 0;
  background-color: #F2F2F2;
  overflow-x: auto;
  overflow: hidden;
  transition: .5s;
}

body.reader #inhoudsopgave #inhoudsopgave-content  { 
  position: absolute;
  top: 100px; left: 20px; 
  width: CALC(100vw - 40px);
  height: CALC(100vh - 200px);
  overflow-y: scroll;  }


/* body.reader #inhoudsopgave  { 
  position: fixed; 
  top:0px; left:0px; 
  height:auto; width:100%; 
  z-index:1000; 
  background-color: #F2F2F2;; 
  padding: 100px 50px 50px;
} */

body.reader #inhoudsopgave .inhoudsopgave-sluiten {
  position: absolute; 
  top:10px; left:10px;
  z-index: 5; 
} 
body.reader #inhoudsopgave H1#inhoudsopgave-title { 
  color: #555 !important; 
  position: absolute;
  top: 10px; left: 70px; 
}

/* body.reader #inhoudsopgave #inhoudsopgave-content  { overflow-y: scroll; height: CALC(100vh - 200px); } */

body.reader #inhoudsopgave #inhoudsopgave-content a { color: #555; }
body.reader #inhoudsopgave #inhoudsopgave-content a:hover { color: #01aec7; }
body.reader #inhoudsopgave #inhoudsopgave-content ol,
body.reader #inhoudsopgave #inhoudsopgave-content ul { list-style-type: none; }

body.reader .main-content { padding: 0 20px  }

body.reader .main-content h2[id]::before { 
  margin-top: 40px; 
}


/* ARTIKEL */
.artikel p                        { margin-bottom: 0px; }
.artikel-content h1               {  }
.artikel-content .artikel-intro   { font-size: 1.2rem ; }
.artikel-prefix                   { font-family: 'Roboto Slab', serif; color: #01aec7; }

/*************** SCROLLBAR BASE CSS ***************/
 
.scroll-wrapper {
  overflow: hidden !important;
  padding: 0 !important;
  position: relative;
}

.scroll-wrapper > .scroll-content {
  border: none !important;
  box-sizing: content-box !important;
  height: auto;
  left: 0;
  margin: 0;
  max-height: none;
  max-width: none !important;
  overflow: scroll !important;
  padding: 0;
  position: relative !important;
  top: 0;
  width: auto !important;
}

.scroll-wrapper > .scroll-content::-webkit-scrollbar {
  height: 0;
  width: 0;
}

.scroll-element {
  display: none;
}
.scroll-element, .scroll-element div {
  box-sizing: content-box;
}

.scroll-element.scroll-x.scroll-scrollx_visible,
.scroll-element.scroll-y.scroll-scrolly_visible {
  display: block;
}

.scroll-element .scroll-bar,
.scroll-element .scroll-arrow {
  cursor: default;
}
/* 
.scroll-textarea {
  border: 1px solid #cccccc;
  border-top-color: #999999;
}
.scroll-textarea > .scroll-content {
  overflow: hidden !important;
}
.scroll-textarea > .scroll-content > textarea {
  border: none !important;
  box-sizing: border-box;
  height: 100% !important;
  margin: 0;
  max-height: none !important;
  max-width: none !important;
  overflow: scroll !important;
  outline: none;
  padding: 2px;
  position: relative !important;
  top: 0;
  width: 100% !important;
}
.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
  height: 0;
  width: 0;
} */




/*************** SIMPLE INNER SCROLLBAR ***************/

.scrollbar-inner > .scroll-element,
.scrollbar-inner > .scroll-element div
{
  border: none;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 10;
}

.scrollbar-inner > .scroll-element div {
  display: block;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.scrollbar-inner > .scroll-element.scroll-x {
  bottom: 2px;
  height: 8px;
  left: 0;
  width: 100%;
}

.scrollbar-inner > .scroll-element.scroll-y {
  height: 100%;
  right: 2px;
  top: 0;
  width: 8px;
}

.scrollbar-inner > .scroll-element .scroll-element_outer {
  overflow: hidden;
}

.scrollbar-inner > .scroll-element .scroll-element_outer,
.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  filter: alpha(opacity=40);
  opacity: 1;
}

.scrollbar-inner > .scroll-element .scroll-element_track { background-color: #e0e0e0; }
.scrollbar-inner > .scroll-element .scroll-bar { background-color: #c2c2c2; }
.scrollbar-inner > .scroll-element:hover .scroll-bar { background-color: #919191; }
.scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar { background-color: #919191; }


/* update scrollbar offset if both scrolls are visible */

.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -12px; }
.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -12px; }


.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -12px; }
.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -12px; }