/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:ital,wght@0,300..700;1,300..700&display=swap');

.material-symbols-outlined { font-variation-settings:'FILL' 0,'wght' 200,'GRAD' 0,'opsz' 24 }

/* Variables */
:root {
    --color-white-std: #ffffff;

    --color-lightgrey-light: #f9f9f9;
    --color-lightgrey-std: #efefef;
    --color-lightgrey-dark: #e8e8e8;
    --color-lightgrey-darker: #e2e2e2;
    
    --color-grey-std: #b3b3b3;
    --color-grey-darkest: #666666;

    --color-darkgrey-std: #4d4d4d;
    
    --color-black-std: #292723;
    
    --color-green-std: #39b54a;

    --color-red-std: #c01d1d;

    --border-radius-std: 18px;

    --box-shadow-1: 2px 2px 5px 1px rgba(0,0,0,0.15);
    --box-shadow-2: 1px 1px 7px 3px rgba(0,0,0,0.2);
    --box-shadow-3: 1px 1px 3px 1px rgba(0,0,0,0.3);
    --box-shadow-up: -1px -1px 5px 2px rgba(0,0,0,0.2);
}

/* Bootstrap rewrite */
.btn {
    border-radius: 30px;
    font-size: 14px;
    line-height: 1;
}

.btn-sm {
  border-radius: 30px;
  font-size: 14px;
  padding: 2px 14px 3px;
}

.btn-light {
    background-color: var(--color-lightgrey-light);
    border: 1px solid var(--color-white-std);
    color: var(--color-black-std);
    box-shadow: var(--box-shadow-1);
}

.btn-secondary {
  background-color: var(--color-darkgrey-std);
  border: 1px solid var(--color-grey-std);
  color: var(--color-white-std);
  box-shadow: var(--box-shadow-1);
}

.modal-content {
  background-color: transparent;
  border: none;
  border-radius: none;
}

/* Default CSS */
body {
    background-color: var(--color-lightgrey-light);
    font-family: "Red Hat Text", sans-serif;
    font-weight: 300;
    color: var(--color-black-std);
    font-size: 14px;
    overflow-x:hidden;
}

h1, h2, h3,
.h2_text,
.h3_text {
    font-family: "Montserrat", sans-serif;
    font-weight: 800 !important;
}

h2,
.h2_text {
    font-size: 18px;
}

h3,
.h3_text {
    font-size: 16px;
}

.header_font_light {
  font-weight: 300;
}

a {
    text-decoration: none;
    color: inherit;
}

b {
  font-weight: 500;
}

ul.clean_list {
    list-style: none;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

ul.clean_list .active {
  font-weight: 500;
}

.clean_list li::before {
  content: "";
  padding-right: 0;
}

ol, ul {
  padding-left: 0rem;
  list-style-position: inside;
  list-style-type: none;
}

p + ul,
p + ol {
  margin-bottom: 0.25em;
}

/* Add 11-11-2025 */
#content {
  overflow-wrap: anywhere;
  hyphens: auto;
  word-break: normal;
}

#content li {
  display: block !important;
}

#content p {
  margin-bottom: 1.5rem !important;
  
}

#content table {
  margin-bottom: 1.5rem !important;
  width: 100%;
}

#content  table tr td {
  padding: 5px 10px 5px 10px;
  vertical-align: top;
  border: 1px solid var(--color-lightgrey-std);
}

#content table figure {
  margin: 0px;
}

#content img {
  max-width: 100% !important;
  height: auto;
}

#content table:has(img) tr td,
#content table:has(img) tr {
  border: 0px;
  padding: 0px;
}

#content table:has(img) tr td {
  width: 50%;
}

li ul {
  padding: 0px 0px 0px 20px;
}

li::before {
  content: "\203A";
  padding-right: 8px;
}

.bg_white {
    background-color: var(--color-white-std);
}

.bg_lightgrey_std {
    background-color: var(--color-lightgrey-std);
}

.bg_lightgrey_dark {
  background-color: var(--color-lightgrey-dark);
}

.bg_lightgrey_darker {
    background-color: var(--color-lightgrey-darker);
}

.color_green_std {
  color: var(--color-green-std);
}

.color_darkgrey_std {
  color: var(--color-darkgrey-std);
}

.border_radius_std {
    border-radius: var(--border-radius-std);
}

.box_shadow_1 {
    box-shadow: var(--box-shadow-1);
}

.box_shadow_2 {
    box-shadow: var(--box-shadow-2);
}

.box_shadow_up {
    box-shadow: var(--box-shadow-up);
}

@media screen and (min-width: 991px) {
  .border_radius_std_topRight_bottomRight_desktop {
        border-radius: 0 var(--border-radius-std) var(--border-radius-std) 0;
   }
}

@media screen and (max-width: 991px) {
  .border_radius_std_bottomLeft_bottomRight_mobile {
        border-radius: 0 0 var(--border-radius-std) var(--border-radius-std);
   }
}

/* Navigation */
.offcanvas-backdrop.show {
  opacity: 0.2;
}

.menu_closed_button_ct {
    background-color: var(--color-lightgrey-std);
    font-size: 10px;
    letter-spacing: -1px;
    text-transform: uppercase;
    border-radius: 0px 15px 15px 0px;
    box-shadow: var(--box-shadow-1);
}

.menu_closed_button_ct svg {
    width: 30px;
    display: block;
    padding: 9px;
}

.menu_closed_button_ct div:first-child {
    width: 28px;
    height: 28px;
    padding: 2px 0px 0px;
}

.menu_open_ct {
  top: 20px !important;
  bottom: 20px;
  border-radius: 0px var(--border-radius-std) var(--border-radius-std) 0px;
  background-color: var(--color-lightgrey-light);
  width:240px !important;
  box-shadow: var(--box-shadow-2);
}

.menu_open_ct img {
  height: 44px;
}

.menu_open_logo_ct {
  display: inline-block;
  padding: 20px 30px 20px 20px;
  border-radius: 0px 0px var(--border-radius-std);
}

.menu_open_button_ct {
  position: absolute;
  top: 17px;
  right: 12px;
}

.menu_open_button_ct .btn-close,
.modal-dialog .btn-close {
  background-color: var(--color-white-std);
  background-image: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: var(--box-shadow-1);
  opacity: 1;
}

.menu_open_ct .material-symbols-outlined,
.menu_mobile .material-symbols-outlined {
  color: var(--color-grey-std);
}

.menu_open_ct .offcanvas-body {
  height: calc(100% - 100px);
}

.menu_mobile {
  font-size: 8px;
  text-transform: uppercase;
  border-top: 3px solid var(--color-lightgrey-dark);
  z-index: 1;
}

.index_menu_button_ct {
  position: fixed;
  top: 20px;
  right: -10px;
}

.index_menu_button_ct .btn {
  padding: 3px 14px 8px 14px;
  border-radius: 30px 0px 0px 30px;
  text-transform: uppercase;
  font-size: 8px;
}

.index_menu_button_ct .btn .material-symbols-outlined {
  font-size: 30px;
}

.modal_close_ct {
  position: absolute;
  z-index: 1;
  right: -8px;
  top: -8px;
}

/* Breadcrumb */
.breadcrumb {
  color: var(--color-grey-std);
}

/* Default custom */
.title_icon_leftTop,
.title_icon_float {
    height: 50px;
    width: 50px;
    display: inline-block;
    box-shadow: inset 0px 0px 3px 1px rgba(0,0,0,0.1);
    border-radius: var(--border-radius-std) 0  var(--border-radius-std) 0;
    margin-left: calc((0rem - var(--bs-gutter-x) * .5) - 1px);
    margin-top: -1px;
    padding: 10px 10px;
    background-color: var(--color-lightgrey-dark);
    color: var(--color-grey-std);
    border: 1px solid var(--color-lightgrey-light);
}

.title_icon_float {
     border-radius: 0 0 var(--border-radius-std) 0;
}

.title_icon_leftTop .material-symbols-outlined,
.title_icon_float .material-symbols-outlined {
    font-size: 30px;
}

.text_page p,
.text_page ul {
  margin-bottom: 1.7rem;
}

.text_page h3 {
  color: var(--color-grey-darkest);
}

.text_page .bottom_nav {
  border-top: 1px dashed var(--color-lightgrey-dark);
}

.calendar_date {
  width: 34px;
}

.calendar_info {
  width: calc(100% - 34px);
}

.horizontal_line_white {
    border-top: 1px solid var(--color-white-std);
    margin-left: calc(0rem - var(--bs-gutter-x) * .5);
    margin-right: calc(0rem - var(--bs-gutter-x) * .5);
}

.vertical_line_lightgrey_dark {
   border-left: 1px solid var(--color-lightgrey-dark);
}

@media screen and (min-width: 991px) {
  .vertical_line_white_desktop {
      border-left: 1px solid var(--color-white-std);
  }
}

@media screen and (max-width: 991px) {
  .horizontal_line_white_mobile {
      border-top: 1px solid var(--color-white-std);
  }
}

/* Progress bar */
:root {
  --progress-bar-width: 100px;
  --progress-bar-height: 100px;
  
  --progress-bar-small-width: 60px;
  --progress-bar-small-height: 60px;
}

.progress-circle-ct {
  box-shadow: inset var(--box-shadow-3);
  border-radius: 50%;
  background-color: var(--color-white-std);
  display: inline-block;
  position: relative;
}

.circular-progress {
  width: var(--progress-bar-width);
  height: var(--progress-bar-height);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner-circle {
  position: absolute;
  width: calc(var(--progress-bar-width) - 30px);
  height: calc(var(--progress-bar-height) - 30px);
  border-radius: 50%;
  background-color: var(--color-white-std);
  box-shadow: var(--box-shadow-1);
}

.percentage {
  position: relative;
  color: rgb(0, 0, 0, 0.8);
  font-weight: 800;
  font-size: 18px;
}

.circular-trophy {
  width: var(--progress-bar-small-width);
  height: var(--progress-bar-small-height);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circular-trophy .material-symbols-outlined {
  font-size: 40px;
}


@media screen and (max-width: 800px) {
  :root {
    --progress-bar-width: 90px;
    --progress-bar-height: 90px;
    --font-size: 1.3rem;
  }
}

@media screen and (max-width: 500px) {
  :root {
    --progress-bar-width: 80px;
    --progress-bar-height: 80px;
    --font-size: 1rem;
  }
}

/* Theorie */
.inside_h1 h1 {
  font-size: 24px;
}

.inside_h1 .title_icon_leftTop {
  height: 76px;
  width: 46px;
  padding: 21px 10px 0px 8px;
  background-color: var(--color-lightgrey-std);
}

.scroll_index_menu_wrap {
  margin: 0px 0px 0px -34px;
}

.scroll_index_menu {
  box-shadow: var(--box-shadow-1);
  border-radius: 0 var(--border-radius-std) var(--border-radius-std) var(--border-radius-std);
  /* margin: 0px 0px 0px -20px; 
  height: 100%; */
  position: fixed;
  width: 320px;
  transition: border-radius 0.3s ease;
}

.scroll_index_menu_top {
  height: 74px;
}

.scroll_index_menu_top > div:first-child {
  text-align: right;
  position: absolute;
  top: -10px;
  right: -20px;
}

.scroll_index_menu .btn-progress {
  margin: 20px 0px 0px 0px;
  width: calc(100% - 75px) !important;
}

.scroll_index_menu .circular-progress {
  width: var(--progress-bar-small-width);
  height: var(--progress-bar-small-width);
}

.scroll_index_menu .inner-circle {
  width: calc(var(--progress-bar-small-width) - 15px);
  height: calc(var(--progress-bar-small-height) - 15px);
}

.scroll_index_menu .percentage {
  font-size: 14px;
}

.scroll_index_menu ul.clean_list li {
  margin: 0px 0px 10px 0px;
}


@media screen and (max-width: 991px) {
  .scroll_index_menu {
    height: 100%;
    position: relative;
    width: 100%;
    border-radius: var(--border-radius-std);
  }
  .scroll_index_menu_top {
    height: auto;
  }
  .scroll_index_menu_top > div:first-child {
    text-align: auto;
    position: relative;
    top: 0px;
    right: 0px;
    display: inline-block;
  }
  .scroll_index_menu .btn-progress {
    margin: auto;
    width: 100%;
    display: inline;
  }
}

/* Add to bootstrap core */
/* mt */
.mt-6 {
  margin-top: 4.5rem !important;
}

.mt-7 {
  margin-top: 6rem !important;
}

.mt-8 {
  margin-top: 7.5rem !important;
}

.mt-9 {
  margin-top: 9rem !important;
}

.mt-10 {
  margin-top: 10.5rem !important;
}

/* mb */
.mb-6 {
  margin-bottom: 4.5rem !important;
}

.mb-7 {
  margin-bottom: 6rem !important;
}

.mb-8 {
  margin-bottom: 7.5rem !important;
}

.mb-9 {
  margin-bottom: 9rem !important;
}

.mb-10 {
  margin-bottom: 10.5rem !important;
}

/* mt-n */

.mt-n1 {
  margin-top: -0.25rem;
}

.mt-n2 {
  margin-top: -0.5rem;
}

.mt-n3 {
  margin-top: -1rem;
}

/* mb-n */

.mb-n1 {
  margin-bottom: -0.25rem;
}

.mb-n2 {
  margin-bottom: -0.5rem;
}

.mb-n3 {
  margin-bottom: -1rem;
}

/* Toegevoegd 16-04 */
/* pb */
.pb-6 {
  padding-bottom: 4.5rem !important;
}

.pb-7 {
  padding-bottom: 6rem !important;
}

.pb-8 {
  padding-bottom: 7.5rem !important;
}

/* px */
.px-6 {
  padding-left: 4.5rem !important;
  padding-right: 4.5rem !important;
}

@media (min-width: 992px) {
  .px-lg-6 {
    padding-left: 4.5rem !important;
    padding-right: 4.5rem !important;
  }
}

:root {
  --border-radius-extrasmall: 10px;
  --border-radius-small: 17px;

  --box-shadow-down: 1px 1px 3px -1px rgba(0,0,0,0.2);

  --bs-border-radius: 30px;
}

/* Default CSS */
.progress-circle-ct {
  height: fit-content;
}

input {
  border: 1px solid var(--color-white-std);
  box-shadow: var(--box-shadow-1);
  border-radius: 30px;
}

.input_attached_button {
  border-radius: 30px 0px 0px 30px;
}

.horizontal_line_white_std {
  border-bottom: 1px solid var(--color-white-std);
}

.horizontal_line_lightgrey_std {
  border-bottom: 1px solid var(--color-lightgrey-std);
}

@media screen and (min-width: 991px) {
  .horizontal_line_white_desktop {
      border-bottom: 1px solid var(--color-white-std);
  }
  .horizontal_line_lightgrey_std_desktop {
      border-bottom: 1px solid var(--color-lightgrey-std);
  }
  .vertical_line_lightgrey_std_desktop {
      border-left: 1px solid var(--color-lightgrey-std);
  }
}

/* Bootstrap rewrite */
.btn {
    border-radius: 30px;
    font-size: 14px;
    font-weight: 300;
    line-height: 1;
}

.btn_attached_input {
  border-radius: 0px 30px 30px 0px;
}

.form-control {
  font-size: inherit;
}

/* Profiel */
.scroll_list_facturen {
  max-height: 550px;
  overflow-x: hidden;
}

/* Toetsing */
.toetsing .circular-progress {
  width: var(--progress-bar-small-width);
  height: var(--progress-bar-small-width);
}

.toetsing .inner-circle {
  width: calc(var(--progress-bar-small-width) - 15px);
  height: calc(var(--progress-bar-small-height) - 15px);
}

.toetsing h1 {
  font-size: 18px;
  font-weight: 300;
}

.toetsing_controls {
  background-color: var(--color-lightgrey-light);
}

.question_answer {
  min-height: 500px;
}

.answer .form-check {
  border: 1px solid var(--color-lightgrey-darker);
  background-color: var(--color-white-std);
  padding: 15px 30px 15px 20px;
  border-radius: var(--border-radius-small);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.answer .form-check-input {
  width: 30px;
  height: 30px;
  margin: 0px 15px 0px 0px;
  box-shadow: inset var(--box-shadow-down);
}

.btn .material-symbols-outlined {
  font-size: 18px;
}

.answer_succes_notification {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--color-green-std);
  line-height: 1.2;
}

.answer_succes {
  font-weight: 800;
  color: var(--color-green-std);
}

.answer_succes input::before {
  content: '';
  background-color: var(--color-green-std);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  margin: 4px 4px 0px;
}

.answer_text {
  font-weight: 300;
  display: block;
  border-top: 1px dashed var(--color-grey-std);
  margin: 5px 0px 0px;
  padding: 5px 0px 0px;
}

.answer_fail_notification {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--color-red-std);
  line-height: 1.2;
}

.answer_fail input::before {
  content: '';
  background-color: var(--color-red-std);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  margin: 4px 4px 0px;
}

.answer_fail_goodanswer {
  font-weight: 800;
  color: var(--color-darkgrey-std);
}

.answer_fail_goodanswer input::before {
  content: '';
  background-color: var(--color-darkgrey-std);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  margin: 4px 4px 0px;
}

.answer_fail_goodanswer_balloon {
  position: absolute;
  top: 0;
  margin: 0px 0px 0px -114px;
  width: 82px;
  font-weight: 300;
  background-color: var(--color-darkgrey-std);
  border-radius: var(--border-radius-extrasmall);
  color: #fff;
  line-height: 1;
  padding: 10px;
  text-align: center;
  font-size: 12px;
}

.answer_fail_goodanswer_balloon::before {
  content: "";
  position: absolute;
  top: 35%;
  left: 80px;
  width: 0;
  border-left: 8px solid var(--color-darkgrey-std);
  border-bottom: 8px solid transparent;
  border-top: 8px solid transparent;
}

.bg_darkgrey_std {
  background-color: var(--color-darkgrey-std);
}

.horizontal_line_white_std {
  border-bottom: 1px solid var(--color-white-std);
}

.horizontal_line_lightgrey_std {
  border-bottom: 1px solid var(--color-lightgrey-std);
}

.desktop_menu {
  border-radius: 0px var(--border-radius-std) var(--border-radius-std) 0px;
  background-color: var(--color-lightgrey-std);
  box-shadow: var(--box-shadow-down);
  border: 1px solid var(--color-white-std);
  font-size: 10px;
  font-weight: 400;
  width: 72px;
  border-left: none;
}

.desktop_menu .material-symbols-outlined {
  color: var(--color-grey-std);
}

.desktop_menu .material-symbols-outlined:hover {
  color: inherit;
}

.desktop_menu_back {
  border-radius: 0px calc(var(--border-radius-std) - 1px) 0px 0px;
}

/* Modal */
.modal-backdrop {
    background-color: rgba(0,0,0,0.1);
}

.modal-content {
    background-color: #fff;
    width: 500px;
    margin: 0 auto;
    top: 100px;
    padding: 50px;
    border-radius: 15px;
}