@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

@font-face {
  font-family: NotoR;
  src: url(css/fonts/NotoSans-Regular.ttf) format('truetype');
  font-style: normal;
}

*:focus-visible {
  outline: 0;
}

body {
  background: #ebf0f5;
  font-family: 'Noto Sans', NotoR, 'Segoe UI', sans-serif;
  font-size: 13.5px;
  font-weight: normal;
  color: #485058;
  padding: 40px 20px 20px 20px;
}
h1,
h2,
h3,
h4,
h5 {
  font-family: 'Noto Sans', NotoR, 'Segoe UI', sans-serif;
  font-weight: bold;
}

/* 221122 BUTTON BEGIN */
#btn22 {
  position: fixed !important;
}
#btn22 span {
  font-family: 'Noto Sans', NotoR, 'Segoe UI', sans-serif !important;
}
/* 221122 BUTTON EINDE */


/* BANNER BEGIN */
#testit_banner {
  position: relative;
  background-color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 30px);
  height: 80px;
  margin: 0 0 20px 0;
  padding: 0 15px;
  box-shadow: 0 3px 5px rgb(55 65 85 / 20%);
  z-index: 99;
}
#testit_banner .logo {
  margin-left: -10px;
}
#testit_banner ul {
  list-style: none;
}
#testit_banner ul li {
  position: relative;
}
#testit_banner ul img {
  display: block;
}
#testit_banner > ul {
  display: flex;
  height: 100%;
  gap: 25px;
  margin: 0;
  padding: 0;
}
#testit_banner > ul img {
  width: 50px;
  height: auto;
}
#testit_banner > ul > li {
  text-align: center;
  padding: 8px 0 0 0;
}
#testit_banner > ul > li a,
#testit_banner > ul > li > div {
  text-decoration: none;
  font-weight: 500;
  color: inherit;
  text-align: center;
  padding: 0;
}
#testit_banner ul.secondary {
  visibility: hidden;
  opacity: 0;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 70px;
  right: -41px;
  list-style: none;
  background-color: white;
  width: auto;
  border-radius: 8px;
  margin: 0;
  padding: 2px 0;
  white-space: nowrap;
  box-shadow: 0 6px 10px rgb(55 65 85 / 15%);
  transition: all 0.25s 0.1s;
}
#testit_banner ul.secondary:before {
  position: absolute;
  right: 45px;
  top: -10px;
  width: 0;
  height: 0;
  content: "";
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid white;
}
#testit_banner ul.secondary li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 70px;
  margin: 5px 0;
  padding: 0;
}
#testit_banner ul.secondary li img {
  width: 50px;
  height: auto;
  margin: 0 auto;
}
#testit_banner ul.secondary li a {
  text-decoration: none;
  font-weight: 500;
  color: inherit;
  padding: 0 10px
}
#testit_banner .help:after {
  position: absolute;
  bottom: -12px;
  left: -32px;
  content: "";
  display: block;
  width: 110px;
  height: 0;
}
#testit_banner .help:hover:after {
  height: 12px;
}
#testit_banner .help:hover ul {
  visibility: visible;
  opacity: 1;
  top: 91px;
}
/* BANNER EINDE */


/* HOMEPAGE BEGIN */
#testit_banner .org_name {
  margin: 0 auto 0 30px;
}
#testit_banner .org_name p,
#testit_banner .org_name span.name {
  position: relative;
  font-size: 1.5em;
  font-weight: 500;
  color: #73879b;
}
#testit_banner .org_name span.version {
  position: absolute;
  top: -5px;
  background-color: #1ebefa;
  font-size: 0.6em;
  font-weight: 500;
  color: white;
  border-radius: 99px;
  margin: 0 0 0 3px;
  padding: 0.1em 0.7em;
}
.home_wrapper * {
  box-sizing: border-box;
}
.home_wrapper *::before,
.home_wrapper *::after {
  box-sizing: inherit;
}
.home_wrapper {
  display: flex;
  background-color: #ebf0f5;
  width: 100%;
  min-height: calc(100vh - 118px);
}
#home_main {
  flex: auto;
  margin-bottom: 90px;
}
#home_main ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#home_main ul li {
  position: relative;
}
#home_main ul img {
  display: block;
}
#home_main .tiles {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}
#home_main .tile {
  position: relative;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 225px;
  height: 225px;
  aspect-ratio: 1/1;
  border-radius: 8px;
  padding: 0 15px 15px 15px;
  box-shadow: 0 5px 8px -2px rgb(55 65 85 / 35%);
  transition: all 0.2s;
}
#home_main .tile > a {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 8px;
}
#home_main .tile > img {
  width: 120px;
  height: auto;
  margin: 10px auto 0 auto;
}
#home_main .tile h3 {
  font-size: 1.25em;
  margin: 5px 0 -5px 0;
}
#home_main .tile p {
  line-height: 1.5em;
  margin-bottom: 0;
}
#home_main .tile:hover {
  box-shadow: 0 10px 20px rgb(55 65 85 / 15%);
}
#home_main .inactive {
  filter: grayscale(0.88);
}
#home_main .inactive img {
  opacity: 0.5;
}
#home_main .tile.inactive:hover {
  box-shadow: 0 5px 8px -2px rgb(55 65 85 / 35%);
}
#home_main .inactive a:hover {
  cursor: default;
}
#home_main .tiles .beheer:after {
  position: absolute;
  bottom: -12px;
  left: 0;
  content: '';
  display: block;
  width: 100%;
  height: 0;
}
#home_main .tiles .beheer > a:hover {
  cursor: default;
}
#home_main .tiles .beheer:hover:after {
  height: 12px;
}
#home_main .tiles .beheer:hover ul {
  visibility: visible;
  opacity: 1;
  top: 236px;
}
#home_main .tiles ul.secondary {
  visibility: hidden;
  opacity: 0;
  display: flex;
  position: absolute;
  top: 210px;
  right: 0;
  list-style: none;
  background-color: white;
  border-radius: 8px;
  margin: 0;
  padding: 7px 2px;
  box-shadow: 0 10px 20px rgb(55 65 85 / 15%);
  transition: all 0.25s 0.1s;
}
#home_main .tiles ul.secondary:before {
  position: absolute;
  right: 90px;
  top: -10px;
  width: 0;
  height: 0;
  content: '';
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid white;
}
#home_main .tiles ul.secondary li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: auto;
  height: 70px;
  margin: 3px 5px 0 5px;
  padding: 0 5px;
  transition: all 0.1s;
}
#home_main .tile .secondary li > a {
  text-decoration: none;
  font-family: 'Noto Sans', NotoR, 'Segoe UI', sans-serif;
  font-weight: 600;
  color: inherit;
  white-space: nowrap;
}
#home_main .tiles ul.secondary li img {
  width: 50px;
  height: auto;
  margin: 0 auto;
}
#home_sidebar {
/*  background-color: #7b93ab; */
  background-color: #697f9b;
  color: white;
  flex: 0 0 auto;
  width: 380px;
  min-height: 100%;
  margin-top: -40px;
  padding: 20px 16px 16px 16px;
}
#home_sidebar .user {
  display: flex;
  align-items: center;
  gap: 6px;
}
#home_sidebar .user #account_pic {
  max-width: 38px;
  max-height: 38px;
  border-radius: 99px;
}
#home_sidebar .user strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* CHANGELOG BEGIN */
#home_sidebar .changelog_title {
  margin-top: 30px;
}

.changelog_container, .fs_changelog_message {
  .changelog_card {
    background-color: rgba(255,255,255,0.2);
    color: #ffffff;
    border-radius: 8px;
    margin-bottom: 5px;
    padding: 7px 10px;
    cursor: pointer;
    a {
      text-decoration: none;
      font-weight: bold;
      color: inherit;
    }
  }
  .changelog_item_title {
      margin: 0;
  }
  .changelog_card_title {
    font-family: 'Noto Sans', NotoR, 'Segoe UI', sans-serif;
    font-weight: bold;
    margin-bottom: 3px;
  }
  .changelog_item_list {
    margin: 0px;
    padding: 0px;
  }
  .changelog_item {
    list-style-type: none;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }  
  .changelog_item.important  {
    font-weight: bold;
    .changelog_item_type {
      font-weight: normal;
    }
  }
  .changelog_item_type {
    border-radius: 50px;
    margin: 0 3px 0 0;
    padding: 0;
    min-width: 50px;
    text-align: center;
    display: inline-block;
    font-size: 0.8em;
    color: white;
  }
  .changelog_item_type.bugfix {
    background-color: #ff786e;
  }
  .changelog_item_type.feature {
    background-color: #a0d246;
  }
  a {
    text-decoration: none;
    font-weight: bold;
    color: #1ebefa;
  }
}
/* CHANGELOG EIND */


@media screen and (max-width: 800px) {
  body {
    height: 100%;
  }
  .home_wrapper {
    height: calc(100vh + 250px);
  }
  #testit_banner > ul {
    gap: 3vw;
  }
  #testit_banner > ul li {
    display: flex;
    height: 100%;
    align-items: center;
    padding: 3px 0 0 0;
  }
  #testit_banner > ul img,
  ul.secondary li img {
    width: clamp(38px, 6vw, 50px) !important;
  }
/*
  ul.secondary {
    padding: 0 5px !important;
  }
  #testit_banner ul.secondary li {
    margin: 0 10px;
    padding: 0;
  }
  #testit_banner ul.secondary:before {
    right: 5.5%;
  }
*/
  #home_main .tiles ul.secondary {
    right: -55px;
    padding: 0 5px !important;
  }
  #home_main .tiles ul.secondary:before {
    right: 145px;
  }
  #home_main .tiles ul.secondary li {
    margin: 3px 5px 0 5px;
    padding: 0;
  }
  .home_wrapper {
    flex-direction: column;
    height: 100%;
  }
  #home_main,
  #home_sidebar {
    flex-grow: 1;
    width: auto;
    min-height: unset;
  }
  #home_sidebar {
    padding-bottom: 50px;
  }
}

#trainer_table {
  padding-top: 60px;
}

#trainer_table .table_body { 
  background-color: white;
  margin: 0 auto;
  width: 60%;
  min-width: 725px;
  border-radius: 8px;
  padding: 1px 15px 1px 15px;
}
/*
@media screen and (max-width: 600px) {
  #testit_banner {
    flex-direction: column;
    height: 145px;
  }
  #testit_banner > ul li {
    align-items: start;
    padding: 5px 0 0 0;
  }
}
*/
/* HOMEPAGE EINDE */


/* ZIJBALK BEGIN */
.bar {
  width: 100%;
  font-weight: bold;
  /*margin-bottom: 5px;*/
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  padding: 5px;
  box-sizing: border-box;
  transition: background-color 0.25s, color 0.25s;
}
.bar:hover {
  background-color: rgba(255,255,255,0.15);
  color: #ffffff;
}
.sidebar {
  position: fixed;
  left: 0px;
  top: 0px;
  height: 100%;
/*  background-color: #5f7891 !important; */
  background-color: #697f9b !important;
  width: 270px;
  padding-left: 0px;
  overflow: hidden;
  padding-top: 100px;
  transition: background-color 0.5s, width 0.5s;
  margin-top: 0px;
  z-index: 30;
}
.sidebar_disabled:hover {
  background-color: transparent;
}
.sidebar > a > .bar,
.sidebar > .tooltip_menu > a > .bar {
  width: 270px;
}
.sidebar > a > .bar img,
.sidebar > .tooltip_menu > a > .bar img {
  margin-left: 15px;
}
.sidebar > a:not(.add_new) > .bar img {
  margin: 0 5px 0 15px !important;
}
.sidebar > .add_new,
.sidebar > .tooltip_menu > .add_new {
  display: block;
  background-color: #a0d246;
  width: 250px;
  margin-left: 10px;
  margin-bottom: 26px;
  border-radius: 4px;
}
.sidebar > .tooltip_menu > .add_new {
  position: relative;
}
.sidebar > .tooltip_menu > .add_new:after {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-family: 'Material Icons';
  font-size: 18px;
  color: #485058;
  content: '\e5cf';
}
.sidebar > .add_new > .bar,
.sidebar > .tooltip_menu > .add_new > .bar {
  width: 100%;
}
.sidebar > .add_new > .bar img ,
.sidebar > .tooltip_menu > .add_new > .bar img {
  margin: 0 5px !important;
}
.sidebar > .add_new > .bar > .fa ,
.sidebar > .tooltip_menu > .add_new > .bar > .fa {
  margin-right: 5px !important;
}
.tooltip_menu > .tooltip_submenu_side {
  display: none;
  position: absolute;
  top: 160px;
  left: 10px;
  border: none;
  background-color: #ffffff;
  width: 200px;
  margin-left: 50px;
  margin-top: -30px;
  padding-top: 5px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 5px 8px -2px rgb(55 65 85 / 25%);
  z-index: 2;
}
.tooltip_menu > .tooltip_submenu_side .bar {
  color: #485058;
  font-weight: 500;
}
.tooltip_menu > .tooltip_submenu_side .bar:hover {
  background-color: #e1e6eb;
}
.tooltip_menu:hover > .tooltip_submenu_side {
  display: inline;
}
.folders {
  background-color: rgba(255,255,255,0.2);
  display: none;
  margin: 10px;
  margin-top: 0px;
  padding: 10px;
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  width: 250px !important;
  height: 200px;
  border: none !important;
  border-radius: 5px !important;
  overflow: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}
.folders.module_nav {
  padding-top: 10px;
}
.folderstitle {
  color: #00a0e6;
  font-weight: bold;
  display: none;
  width: 100px;
  background-color: #ffffff;
  border-radius: 4px;
  margin: 30px 0 3px 10px;
  padding: 3px 10px 4px 10px !important;
}
.folders div {
  white-space: nowrap;
}
.folders span {
  white-space: normal;
}
.folders.module_nav div {
  white-space: normal;
}
.folders.module_nav .scrollfolderbar {
  font-weight: bold;
  color: #485058;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  transition: background-color 0.25s, color 0.25s;
}
.sidebar .folders,
.sidebar .folderstitle {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}
.sidebar .folders {
  display: block;
}
.sidebar .folderstitle {
  display: block;
  font-size: 14px;
  box-sizing: border-box;
}
.sidebar .foldersicon {
  display: none;
}
.folderbar {
  width: 100%;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  padding-left: 5px;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}
.sidebar .folders a[href^='#group'] .folderbar,
.sidebar #folder_0 {

}
/*.folderbar:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}*/
.folder_div:not(.active):hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.folder_div:not(.active):hover > a {
  color: #ffffff;
}
.folder_div:not(.active):hover > span {
  color: #485058;
}
.folders a {
    display: inline-block;
    width: 100%;
}
.bar > img, .folderbar > img,
.activefolderbar > img {
  max-height: 20px;
  margin: 0 9px 0 6px !important;
  vertical-align: top;
}
.activefolderbar {
  width: 246px !important;
  font-weight: bold;
  color: #485058;
  text-decoration: none;
  cursor: pointer;
  padding-left: 5px;
  padding-top: 3px;
  padding-bottom: 3px;
}
.folder_div.active {
  background-color: #1ebefa !important;
  transition: background-color 0.25s, color 0.25s;
}
.folder_div {
  transition: background-color 0.25s, color 0.25s;
}
.folders > div .activefolderbar {
  width: 231px !important;
}
/*.activefolderbar:hover {
  background-color: rgba(180, 180, 180, 0.8);
  color: #485058;
}*/
.folders_accordion {
  padding: 0 0 1px 0;
  overflow: hidden !important;
}
#accordion_pop {
  background: #7b90ab;
}
#widget_list.folders_blue {
  border: none;
  padding-bottom: 7px;
}
.ui-accordion-content {
  background-image: none !important;
  background-color: transparent !important;
  padding: 5px 0 0 0 !important;
  box-sizing: border-box;
}
.ui-accordion-header {
/*  background-color: #506982 !important; */
  background-color: #576c89 !important;
  font-family: 'Noto Sans', NotoR, 'Segoe UI', sans-serif;
  font-size: 13.5px;
}
.ui-widget-content:not(.ui-slider) {
  border: solid 1px transparent !important;
  font-family: 'Noto Sans', NotoR, 'Segoe UI', sans-serif;
  font-size: 13.5px;
}
.accordion_inner {
  border-bottom: solid 1px transparent !important;
  font-family: 'Noto Sans', NotoR, 'Segoe UI', sans-serif;
  font-size: 13.5px;
}
.accordion_inner .widget_block,
.accordion_inner .widget_block_blue {
  font-size: 13.5px !important;
}
#accordion h3, #accordion_pop h3 {
  border: none;
  outline: none;
  border-bottom: solid 1px rgba(255, 255, 255, 0.2) !important;
}
/* ZIJBALK EINDE */


/* MAIN BEGIN */
.divcontent {
  padding-top: 57px !important;
  padding-left: 290px !important;
}
.divcontent:has(#main_body) {
  padding-top: 50px !important;
}
.divcontent > .crumbs,
.divcontent > #main_body > .crumbs {
  position: absolute;
  top: 104px;
  display: block;
  margin-bottom: -20px;
  padding-left: 0;
}
.divcontent > .crumbs:not(.print_content),
.divcontent > #main_body > .crumbs:not(.print_content) {
  width: clamp(950px, 70vw, 1300px);
}
.divcontent > .crumbs:not(a),
.divcontent > #main_body > .crumbs:not(a) {
  font-weight: 500;
  color: #485058;
}
.divcontent > .crumbs:not(.print_content) a,
.divcontent > #main_body > .crumbs:not(.print_content) a {
  display: inline-block;
  text-decoration: none;
  background-color: white;
  font-weight: normal;
  color: #1ebefa;
  border: solid 1px #1ebefa;
  border-radius: 99px;
  margin-bottom: 8px;
  padding: 0 10px 1px 10px;
}
.divcontent > .crumbs:not(.print_content) a:last-child,
.divcontent > #main_body > .crumbs:not(.print_content) a:last-child {
  background-color: #1ebefa;
  color: white;
}
.print_content {
  left: unset !important;
  right: 30px !important;
}
#main_body {
/*  width: 90%; */
  margin-top: 58px !important;
}
#main_body:has(.niceform) {
/*  width: 100%; */
}
.divcontent > .niceform:has(#upload) {
  margin-top: 30px;
}
fieldset {
  position: relative;
  background: #ffffff;
  padding: 10px 10px 15px 10px;
  border: none;
  border-radius: 4px;
  margin: 0 0 40px 0;
/*  width: 950px; */
  width: clamp(950px, 70vw, 1300px);
  box-shadow: 0 1px 2px rgba(55,65,85,0.35);
}
input,
textarea,
select {
/*  font: 12px/12px 'Segoe UI', Arial, Helvetica, sans-serif; */
  font-family: 'Noto Sans', NotoR, 'Segoe UI', sans-serif;
  font-size: 13px;
  padding: 0;
}
textarea {
  padding: 5px 7px;
}
textarea:disabled {
  border-color: #c8c8cd !important;
  background-color: rgba(200, 200, 205, 0.2);
  padding: 5px 7px;
}
select, select.blue {
  background-color: #f5f8fb;
  height: unset !important;
  padding: 3px 5px;
  border: solid 1px #879baf;
  border-radius: 4px;
}
select.blue {
  border: solid 1px #00a0e6;
}
fieldset.action {
  background: #cdd7e1;
  margin-top: -20px;
  border-width: 0px;
  box-shadow: none;
  padding: 10px;
}
fieldset.error {
/*
  background: #cdd7e1;
  width: 946px;
  margin-top: -20px;
  border-color: #ff1e53;
  border-width: 2px;
*/
  background: #ff786e;
  color: #ffffff;
  font-weight: 500;
  margin-top: 0;
  padding: 10px;
}
fieldset.succes {
/*
  background: #cdd7e1;
  width: 946px;
  margin-top: -20px;
  border-color: #a0d246;
  border-width: 2px;
*/
  background: #a0d246;
  color: #ffffff;
  font-weight: 500;
  margin-top: 0;
  padding: 10px;
}
fieldset.fs_settings_report_overview {
  margin-top: 30px !important;
}
#group_container {
  display: inline-block;
  margin: 15px 0 0 0;
}
.group_span {
  display: inline-block;
  margin-bottom: 15px;
}
legend {
  position: absolute;
  top: -31px;
  left: 0;
  background: none repeat scroll 0 0 #00a0e6;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  color: #ffffff;
  height: 28px;
  font-weight: bold;
  line-height: 27px;      
  padding: 0 10px;
}
legend b {
  font-weight: bold;
}
legend.actief {
  background: none repeat scroll 0 0 #a0d246;
}
legend.inactief {
  background: none repeat scroll 0 0 #ffbe00;
}
legend.archief {
  background: none repeat scroll 0 0 #9bafc3;
}
fieldset.group_title {
  display: flex;
  align-items: center;
  width: clamp(950px, 70vw, 1300px);
  height: 28px;
  font-size: 14px;
  padding: 10px;
}
fieldset.group_title a.tooltip {
  height: 24px;
  margin-left: auto !important;
}
fieldset.group_title a.tooltip img {
  vertical-align: middle;
}
fieldset.group_title .main_group_actions {
  display: flex;
  gap: 7px;
  margin-left: auto;
}
fieldset.group_title .main_group_actions a {
  margin: 0 5px;
}
.group_span fieldset.group_title a[id^="group"] {
  scroll-margin-top: 25px;
}
/*
legend.module_intro,
legend.module_outro,
legend.group_intro,
legend.group_outro {
  display: flex;
  align-items: center;
}
*/
legend.module_intro,
legend.module_outro,
legend.group_intro,
legend.group_outro {
  background-color: #7b90ab;
}
.group_actions,
.category_actions {
  position: absolute;
  top: -31px;
  right: 0;
  background-color: #7b90ab;
  border-radius: 4px;
  padding: 0 5px;
}
.category_actions {
  background-color: #00a0e6;
}
.group_actions .filter_span,
.category_actions .filter_span {
  background-color: transparent;
  margin: 0 5px;
}
.group_actions .filter_span > img,
.category_actions .filter_span > img {
  height: auto;
}
.category_span legend {
  width: auto;
  max-width: 850px;
}
legend .category_legend_type,
legend .category_legend_name,
legend .category_legend_min,
legend .category_legend_icons {
  float: left;
  height: 28px;
}
legend .category_legend_name {
  max-width: 420px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
legend .category_legend_min {
  margin-left: 5px;
}
legend .category_legend_icons {
  float: right;
  line-height: 36px;
  margin-left: 30px;
}
.category_span .category_copy {
  position: absolute;
  top: -31px;
  right: 0;
  background-color: #00a0e6;
  color: #ffffff;
  width: 20px;
  height: 28px;
  border-radius: 4px;
  padding: 0 10px;
}
.category_span .category_copy .fa-copy {
  margin-top: 7px !important;
}
.category_span fieldset {
  padding: 10px;
}
.category_span .crumbs {
  padding-left: 0;
}
.category_span .crumbs a {
  display: inline-block;
  margin-top: 5px;
}
/*
label {
  font-size: 11px;
  font-weight: bold;
  color:#666;
}
*/
label.opt {
  font-weight: normal;
}
dl {
  clear: both;
}
dl > div:first-of-type {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
dl > div:last-of-type {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
dt {
  float: left;
  text-align: left;
  width: 100px;
  line-height: 27px;
  margin: 0 10px 10px 0;
}
dd {
  line-height: 22px;
  margin: 0;
  padding: 0;
}
#footer {
  font-size: 11px;
}
.hotspots_table_x {
  border-top: 3px black solid;
  min-width: 900px;
  margin: 10px 0;
  padding-top: 10px;
}
.hotspot_add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-decoration: none;
  background-color: #cdd7e1;
  font-weight: bold;
  color: #485058;
  width: auto !important;
  height: 40px;
  text-align: center;
  border-radius: 4px;
  padding: 0;
}
.hotspot_add img {
  margin: 0 !important;
}
#question_wizard_span {
  display: inline-block;
  margin: 15px 0 0 0;
}
ul#groups {
  width: clamp(950px, 75vw, 1300px);
}
ul#groups > li {
  border: none !important;
  margin: 0 0 20px 0 !important;
  box-shadow: 0 1px 2px rgba(55,65,85,0.35);
}
ul#groups > li > div {
  background-color: #879baf !important;
}
ul#groups > li > div {
  border-radius: 4px;
}
ul#groups > li:has(ul) > div {
  border-radius: 4px 4px 0 0;
}
ul#groups > li, ul#groups > li > ul {
  border-radius: 4px;
}
ul#groups li > div {
  height: unset !important;
  line-height: 26px;
  padding: 2px 0 2px 5px;
}
ul#groups .groups_sort li {
  line-height: 25px;
  padding: 5px 0 5px 10px !important;
}
ul#groups .groups_sort li:first-of-type {
  border-radius: 4px 4px 0 0;
}
ul#groups .groups_sort li:last-of-type {
  border-radius: 0 0 4px 4px;
}
ul#groups .groups_sort li:only-child {
  border-radius: 4px;
}
ul#groups img[name="reorder"] {
  margin-top: 1px;
}
ul#groups input[type="text"] {
  border: solid 1px #879baf;
  border-radius: 4px;
  margin-left: 15px;
  padding: 3px;
}
ul#groups .groups_sort li,
ul#catstests li,
ul#groupsorder li {
  width: auto !important;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
}
ul#catstests li,
ul#groupsorder li {
  background-color: #e1e6eb !important;
  border: none !important;
  border-radius: 4px;
}
ul#groups .groups_sort li > div,
ul#catstests li > div,
ul#groupsorder li > div {
  float: none !important;
}
ul#phoneticlong,
ul#phoneticlong2 {
  width: 100% !important;
}
ul#phoneticlong li,
ul#phoneticlong2 li {
  position: relative;
  background-color: #e1e6eb !important;
  border: none !important;
  border-radius: 4px;
  width: auto !important;
/*  height: 40px; */
  margin: 2px 0 !important;
  padding-left: 10px;
}
ul#phoneticlong li input.newtest {
  margin: 4px 5px;
}

a.voucher_buy,
a.voucher_link,
a.voucher_move,
a.voucher_delete {
  color: #a0d246 !important;
  border: solid 1px #a0d246;
  border-radius: 4px;
  padding: 5px 10px;
  margin-right: 10px;
}
a.voucher_link {
  color: #00a0e6 !important;
  border: solid 1px #00a0e6;
}
a.voucher_move {
  color: #879baf !important;
  border: solid 1px #879baf;
}
a.voucher_delete {
  color: #ff786e !important;
  border: solid 1px #ff786e;
}
#repeater_div .widget_sub_block_inner {
  font-size: 1em !important;
}
.widget_yaxis_block_new {
  border-radius: 4px;
  margin: 10px 0 5px 0;
}


/* MODULE/PORTAL OVERZICHT V11 BEGIN */
.list,
.list_main_line,
.list_action_bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}
.list:hover {
  box-shadow: inset 3px 0 0 #788791;
}
.list.background_highlight {
  background-color: #c4e4f2 !important;
}
.list.background_highlight > .list_main_line {
  scroll-margin-top: 15px;
}
.list_main_line {
  font-weight: bold;
  align-items: center;
  gap: 10px;
}
.list_action_bar {
  gap: 20px;
}
.list_icon {
  display: inline-block;
  text-decoration: none; 
  color: #4b5055; 
  font-weight: bold;
}
.list.list_module_item {
  align-items: start;
}
.list_module_item .list_main_line {
  font-weight: normal;
  align-items: start;
}
.list_module_item .list_main_line .list_number,
.list_module_item .list_main_line .list_text {
  margin-top: 3px;
}
.dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
/*  font-size: 14px; */
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border-radius: 4px;
  box-shadow: 0 5px 8px -2px rgb(55 65 85 / 25%);
}
.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: rgba(55,65,85,.15);
}
.dropdown-content a {
  display: block;
  padding: 5px 20px;
  clear: both;
  font-weight: 500;
  line-height: 1.42857143;
  color: #4b5055;
  white-space: nowrap;
  text-decoration: none;
}
.dropdown-content a img {
  vertical-align: middle;
  margin-right: 15px;
}
.dropdown-content a:hover {
  color: #2d3237;
  background-color: #e1e6eb;
}
.dropdown-content .divider {
  height: 1px;
  margin: 5px 0;
  overflow: hidden;
  background-color: rgba(55,65,85,.15);
  display: block;
}
.dropdown {
  position: relative;
  margin: 0 -7px;
}
.dropdown > a {
  padding: 0 7px;
}
.tippy_text {
  display: none;
}

/* LOCKED/PINNED BEGIN */
.list.module_span_active > .list_main_line,
.list.module_span_inactive > .list_main_line,
.list.list_module_item.pinned > .list_main_line {
  position: relative;
}
.list.module_span_active.locked > .list_main_line:before,
.module_span_inactive.locked > .list_main_line:before {
  display: block;
  position: absolute;
  top: -10px;
  left: 13px;
  content: url(layout/v11/icons/misc/locked.png);
  pointer-events: none;
}
.list.list_module_item.pinned > .list_main_line:before {
  display: block;
  position: absolute;
  top: -10px;
  left: 13px;
  content: url(layout/v11/icons/misc/pinned.png);
  pointer-events: none;
}
/* LOCKED/PINNED EINDE */

/* SORTEREN/FILTEREN BEGIN */
.list_top_icons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  position: absolute;
  top: -31px;
  right: 0;
}
.list_top_icons .tooltip_menu {
  position: relative;
  background-color: #b5deef;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 5px;
  padding: 0 10px;
}
.list_top_icons .tooltip_menu:after {
  content: '';
  display: inline-block;
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 3px;
}
.tooltip_menu > .tooltip_submenu_under {
  display: none;
  position: absolute;
  top: 31px;
  left: 0;
  background-color: #ffffff;
  border: none;
  border-radius: 4px;
  width: auto;
  padding: 5px 0;
  overflow: hidden;
  box-shadow: 0 5px 8px -2px rgb(55 65 85 / 25%);
  z-index: 2;
}
.tooltip_menu > .tooltip_submenu_under .orderby_sub_span {
  top: 0;
  display: flex !important;
  align-items: center;
  gap: 1px;
  margin: 0 !important;
  padding: 5px 15px 5px 5px !important;
  white-space: nowrap;
}
.tooltip_menu > .tooltip_submenu_under .orderby_sub_span i {
  position: unset !important; 
  font-size: 18px;
}
.tooltip_menu:hover > .tooltip_submenu_under {
  display: inline;
}
/* SORTEREN/FILTEREN EINDE */
.list.active {
  box-shadow: inset 3px 0 0 #788791;
}
/* MODULE/PORTAL OVERZICHT V11 EINDE */


/*##########################################
Script: Niceforms 2.0
Theme: StandardBlue
Author: Lucian Slatineanu
URL: http://www.emblematiq.com/
##########################################*/

/*Text inputs*/
.NFText {
  border: none;
  vertical-align: middle;
  font: 12px/15px Arial, Helvetica, sans-serif;
  background: none;
}
.NFTextCenter {
  height: 15px;
  background: url(img/input.png) repeat-x 0 0;
  padding: 3px 0;
  margin: 0;
  float: left;
  line-height: 15px;
}
.NFTextLeft,
.NFTextRight {
  width: 7px;
  height: 21px;
  vertical-align: middle;
  float: left;
}
.NFTextLeft {
  background: url(img/input-left.png) no-repeat 0 0;
}
.NFTextRight {
  background: url(img/input-right.png) no-repeat 0 0;
}
/*Radio*/
.NFRadio {
  cursor: pointer;
  position: absolute;
  display: block;
  width: 13px;
  height: 13px;
  border: 1px solid transparent;
  background: url(img/radio.png) no-repeat 0 0;
  z-index: 2;
}
/*Checkbox*/
.NFCheck {
  cursor: pointer;
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid transparent;
  background: url(img/checkbox.png) no-repeat 0 0;
  z-index: 2;
}
/*Buttons*/
.NFButton {
  width: auto;
  height: 26px;
  color: #fff;
  padding: 0 2px;
  background: url(img/button.png) repeat-x 0 0;
  cursor: pointer;
  border: none;
  font: 10px/26px Tahoma, Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  vertical-align: middle;
}
.NFButtonLeft,
.NFButtonRight {
  width: 6px;
  height: 26px;
  vertical-align: middle;
}
.NFButtonLeft {
  background: url(img/button-left.png) no-repeat 0 0;
}
.NFButtonRight {
  background: url(img/button-right.png) no-repeat 0 0;
}
/*Textareas*/
.NFTextarea {
  border: none;
  background: none;
  font: 12px/12px Arial, Helvetica, sans-serif;
  margin: 0;
}
.NFTextareaTop,
.NFTextareaBottom {
  height: 5px;
  clear: both;
  float: none;
  padding-right: 10px;
}
.NFTextareaTop {
  background: url(img/textarea-tr.png) no-repeat 100% 0;
}
.NFTextareaBottom {
  background: url(img/textarea-br.png) no-repeat 100% 0;
  margin-bottom: 5px;
}
.NFTextareaTopLeft,
.NFTextareaBottomLeft {
  width: 5px;
  height: 5px;
}
.NFTextareaTopLeft {
  background: #f2f2e6 url(img/textarea-tl.png) no-repeat 0 0;
}
.NFTextareaBottomLeft {
  background: #f2f2e6 url(img/textarea-bl.png) no-repeat 0 0;
}
.NFTextareaLeft,
.NFTextareaRight,
.NFTextareaLeftH,
.NFTextareaRightH {
  float: left;
  padding-bottom: 5px;
}
.NFTextareaLeft,
.NFTextareaLeftH {
  width: 5px;
}
.NFTextareaLeft {
  background: url(img/textarea-l-off.png) repeat-y 0 0;
}
.NFTextareaLeftH {
  background: url(img/textarea-l-over.png) repeat-y 0 0;
}
.NFTextareaRight,
.NFTextareaRightH {
  padding-right: 5px;
  padding-bottom: 0;
}
.NFTextareaRight {
  background: url(img/textarea-r-off.png) repeat-y 100% 0;
}
.NFTextareaRightH {
  background: url(img/textarea-r-over.png) repeat-y 100% 100%;
}
/*Files*/
.NFFileButton {
  padding-bottom: 0;
  vertical-align: bottom;
  cursor: pointer;
  background: url(img/file.png) no-repeat 0 0;
  width: 60px;
  height: 21px;
}
.NFFile {
  position: relative;
  margin-bottom: 5px;
}
.NFFile input.NFhidden {
  position: relative;
  filter: alpha(opacity=0);
  opacity: 0;
  z-index: 2;
  cursor: pointer;
  text-align: left;
}
.NFFileNew {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
}
/*Selects*/
.NFSelect {
  height: 21px;
  position: absolute;
  border: 1px solid transparent;
}
.NFSelectLeft {
  float: left;
  width: 3px;
  height: 21px;
  background: url(img/select-left.png) no-repeat 0 0;
  vertical-align: middle;
}
.NFSelectRight {
  height: 21px;
  width: auto;
  background: url(img/select-right.png) no-repeat 100% 0;
  cursor: pointer;
  font: 12px/21px Arial, Helvetica, sans-serif;
  color: #fff;
  padding-left: 3px;
  margin-left: 3px;
}
.NFSelectTarget {
  position: absolute;
  background: none;
  margin-left: -13px;
  margin-top: 18px;
  z-index: 3;
  left: 0;
  top: 0;
  padding-bottom: 13px;
}
.NFSelectOptions {
  position: relative;
  background: #707175;
  margin-left: 16px;
  margin-top: 0;
  list-style: none;
  padding: 4px 0;
  color: #fff;
  font: 11px/13px Arial, Helvetica, sans-serif;
  z-index: 4;
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  left: 0;
  top: 0;
}
.NFSelectOptions li {
  padding-bottom: 1px;
}
.NFSelectOptions a {
  display: block;
  text-decoration: none;
  color: #fff;
  padding: 2px 3px;
  background: none;
}
.NFSelectOptions a.NFOptionActive {
  background: #485058;
}
.NFSelectOptions a:hover {
  background: #333;
}
/*Multiple Selects*/
.NFMultiSelect {
  border: 0;
  background: none;
  margin: 0;
}
.NFMultiSelectTop,
.NFMultiSelectBottom {
  height: 5px;
  clear: both;
  float: none;
  padding-right: 10px;
}
.NFMultiSelectTop {
  background: url(img/textarea-tr.png) no-repeat 100% 0;
}
.NFMultiSelectBottom {
  background: url(img/textarea-br.png) no-repeat 100% 0;
  margin-bottom: 5px;
}
.NFMultiSelectTopLeft,
.NFMultiSelectBottomLeft {
  width: 5px;
  height: 5px;
}
.NFMultiSelectTopLeft {
  background: #f2f2e6 url(img/textarea-tl.png) no-repeat 0 0;
}
.NFMultiSelectBottomLeft {
  background: #f2f2e6 url(img/textarea-bl.png) no-repeat 0 0;
}
.NFMultiSelectLeft,
.NFMultiSelectRight,
.NFMultiSelectLeftH,
.NFMultiSelectRightH {
  float: left;
  padding-bottom: 5px;
}
.NFMultiSelectLeft,
.NFMultiSelectLeftH {
  width: 5px;
}
.NFMultiSelectLeft {
  background: url(img/textarea-l-off.png) repeat-y 0 0;
}
.NFMultiSelectLeftH {
  background: url(img/textarea-l-over.png) repeat-y 0 0;
}
.NFMultiSelectRight,
.NFMultiSelectRightH {
  padding-right: 5px;
  padding-bottom: 0;
}
.NFMultiSelectRight {
  background: url(img/textarea-r-off.png) repeat-y 100% 0;
}
.NFMultiSelectRightH {
  background: url(img/textarea-r-over.png) repeat-y 100% 0;
}

/*Focused*/
.NFfocused {
  border: 1px dotted #666;
}
/*Hovered*/
.NFh {
  background-position: 0 100%;
}
.NFhr {
  background-position: 100% 100%;
}
/*Hidden*/
.NFhidden {
  opacity: 0;
  z-index: -1;
  position: relative;
}
/*Safari*/
/* select, input, textarea, button {outline:none; resize:none;} */
.newtest {
  min-width: 83px;
  height: 28px;
  background-color: #00a0e6;
  border: none;
  border-radius: 4px;
  font-family: 'Noto Sans', NotoR, 'Segoe UI', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  margin: 10px 10px 10px 0px;
  padding: 0 13px;
  box-shadow: 0 2px 4px -2px rgba(55,65,85,0.35);
  transition: background-color 0.2s;
  cursor: pointer;
}
.newtest:hover {
  background-color: #1ebefa;
}
input.newtest:disabled {
  background-color: #b4bcc6;
  cursor: default;
}
.newtest_inline {
  height: 27px;
  background-color: #00a0e6;
  border: none;
  border-radius: 4px;
  font-family: 'Noto Sans', NotoR, 'Segoe UI', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  padding: 0 8px;
  vertical-align: middle;
  box-shadow: 0 2px 4px -2px rgba(55,65,85,0.35);
  transition: background-color 0.2s ease;
  cursor: pointer;
}
.newtest_inline:hover {
  background-color: #1ebefa;
}
.newtest_inline .fa-lg {
  line-height: unset;
}
textarea.text2,
#inactive_body {
  border: solid 1px #00a0e6;
}
#inactive_body {
  width: 500px;
  height: 100px;
}
input.text2 {
  height: 24px;
  border: solid 1px #00a0e6;
  border-radius: 4px;
}
input.filter_text {
  font-family: 'Noto Sans', NotoR, 'Segoe UI', sans-serif;
  font-size: 13.5px;
  color: #485058;
  line-height: 1.5;
  height: 14px;
  border: 1px solid #aaa;
  border-radius: 2px;
  padding: 6px 12px;
}
.form_error {
  border: solid 1px #f30000 !important;
}
.subset_span {
  background: url("layout/subset_sub.png") 30px 6px no-repeat;
  display: inline-block;
  font-style: italic;
  font-weight: normal;
  color: #485058;
  padding-left: 45px;
}
.subset_title {
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 10px;
}
#popup-cover {
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: black;
  filter: alpha(opacity=50);
  opacity: 0.5;
  width: 100%;
  height: 100%;
}
#popup-form {
  padding: 10px;
  padding-top: 40px;
}
.popup-cover {
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: black;
  filter: alpha(opacity=50);
  opacity: 0.5;
  width: 100%;
  height: 100%;
}
.popup-form {
  min-width: 275px;
  padding: 10px;
  padding-top: 40px;
}
.popup-form fieldset {
  width: auto !important;
  border-radius: 6px;
}
.popup-form fieldset input.text2,
.popup-form fieldset textarea.text2,
.popup-form fieldset select.blue,
.popup-form fieldset .cke,
.popup-form fieldset .cke_top {
  border-color: #9bafc3;
}
.popup-form fieldset select.blue:focus {
  border-color: #576c89;
}
.popup-form fieldset textarea.text2 {
  border-radius: 4px;
}
.popup-form fieldset .cke,
.popup-form fieldset .cke .cke_inner {
  border-radius: 5px;
}
.popup-form fieldset .cke .cke_top {
  background: #f5f8fb;
  border-radius: 5px 5px 0 0;
}
/* tijdelijke oplossing luidspreker icoon bug */
.popup-form fieldset .cke_top .cke_combo__fontsize .cke_combo_text {
  width: 40px !important;
}
.popup-form fieldset .cke_top .cke_button__image:hover {
  padding: 3px 5px 4px 5px !important;
}

.popup-form fieldset .cke .cke_contents {
  border-radius: 0 0 5px 5px;
}
.popup-form fieldset#widget_list {
  width: 400px !important;
}
.popup-form.regular_popup {
/*  padding-top: 0; */
  max-height: 620px !important;
}
.popup-form fieldset .select2-selection--single {
  border: none;
}
.popup-form fieldset .select2-selection__rendered {
  background-color: #f5f8fb;
  border: solid 1px #9bafc3;
  border-radius: 4px;
  color: inherit !important;
}

/* RA MEDIA TAB BEGIN */
.popup-form.regular_popup .picture_it_container {
  display: flex;
  flex-direction: column;
  border: solid 1px #9bafc3;
  border-radius: 5px;
/*  box-shadow: 0 2px 4px -2px rgb(55 65 85 / 35%); */
}
.popup-form.regular_popup #phoneticlong .picture_it_container {
  margin: 18px 10px 10px 0px;
}
.popup-form.regular_popup .picture_it_container .picture_it_top_container {
  background-color: #f5f8fb;
  border-bottom: solid 1px #9bafc3;
  border-radius: 5px 5px 0 0;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px;
  box-sizing: border-box;
}
.popup-form.regular_popup .picture_it_container .picture_it_button_container {
  display: flex;
  width: auto;
  gap: 15px;
  align-items: center;
  justify-content: space-evenly;
  margin-left: auto;
}
.popup-form.regular_popup .picture_it_container .picture_it_button {
  cursor: pointer;
}
.popup-form.regular_popup .picture_it_container .picture_it_image_container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
}
.popup-form.regular_popup .picture_it_container .picture_it_image_name {
  background-color: #f5f8fb;
  border-top: solid 1px #9bafc3;
  border-radius: 0 0 5px 5px;
  font-size: 0.8em;
  padding: 2px;
  text-align: center;
  margin-top: auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.popup-form.regular_popup .picture_it_container .picture_it_image_placeholder {
  font-size: 32px;
  color: #7f93a7;
}
/* RA MEDIA TAB EINDE */

.popup-form > .niceform {
  max-width: 1200px;
}
.popup-form > #screenaddform > fieldset > dl {
  height: 310px !important;
}
#theprogress {
  height: 10px; /* Can be anything */
  position: relative;
  padding: 10px;
  background-color: #c5c5c5;
  margin-right: 10px;
}
#theprogress > span {
  display: block;
  height: 100%;
  width: 100%;
  background-color: #c5c5c5;
  border: 1px black solid;
}
#theprogress > span > span {
  display: block;
  height: 100%;
  background-color: #00a0e6;
  box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}
.tooltip_menu > .tooltip_img {
  border: 2px #fff solid;
  border-radius: 4px;
  padding-bottom: 0px;
  text-align: center;
  display: inline-block;
  width: 30px;
  height: 27px;
  margin-top: -5px;
  padding-top: 5px;
  z-index: 1;
  position: relative;
}
.tooltip_menu:hover > .tooltip_img {
  border: 2px #00a0e6 solid !important;
  border-bottom-width: 0px;
  background-color: #fff;
  padding: 0px;
  padding-top: 5px;
}
/*
.tooltip_menu > .tooltip_submenu_side {
  border: 2px #00a0e6 solid;
  position: absolute;
  background-color: #32c2ff;
  margin-left: 50px;
  margin-top: -30px;
  width: 200px;
  display: none;
  z-index: 2;
  padding-top: 5px;
  overflow: hidden;
}
.tooltip_menu:hover > .tooltip_submenu_side {
  display: inline;
}
*/
.tooltip_menu > .tooltip_submenu {
  border: 2px #00a0e6 solid;
  border-radius: 4px;
  position: absolute;
  background-color: #fff;
  margin-top: 25px;
  display: none;
  padding: 7px 8px 0px 4px;
  z-index: 2;
}
.tooltip_menu:hover > .tooltip_submenu {
  display: inline;
}
.tooltip_menu:hover > .tooltip_cover {
  display: inline-block;
}
.tooltip_cover {
  display: none;
  background-color: #fff;
  width: 30px;
  height: 2px;
  position: absolute;
  margin-top: 25px;
  margin-left: 2px;
  z-index: 4;
}
.tooltip {
  width: 34px;
  display: inline-block;
  height: 27px;
  text-align: center;
  margin-right: 0px !important;
  margin-left: 4px !important;
}

/*###### HMo ######*/
.input_readonly {
  background-color: #f5f8fb;
}
input[readonly]:not(.input_readonly) {
  background-color: #d9d9d9;
}
input.text2 {
  padding: 0 5px !important;
  margin: 0 5px 0 0;
}
#tabs .tab_active, #tabs .tab_inactive {
  border: solid 1px #00a0e6;
  border-radius: 4px;
  color: #ffffff;
  margin-left: 10px;
  transition: background-color 0.25s;
}
#tabs .tab_inactive {
  color: inherit;
}
#tabs_content {
  border-radius: 4px;
}
a.tooltip2 span {
  line-height: 20px !important;
  padding: 5px !important;
}
dt.group_settings {
  width: 240px;
}
#vodurl {
  width: auto !important;
}

/* Settings page begin */
span.span_settings_general,
span.span_settings_access,
span.span_settings_options,
span.span_settings_security,
span.span_settings_test {
  display: inline-block;
  font-family: 'Noto Sans', NotoR, 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: bold;
  line-height: 28px;    
  color: #ffffff;
  text-align: center;
  width: auto !important;
  min-width: 85px !important;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 5px 3px 0;
  padding: 0 10px;
}
span.span_settings_general {
  background-color: #00a0e6;
}
span.span_settings_access {
  background-color: #a0d246;
}
span.span_settings_options {
  background-color: #aaaaaa;
}
span.span_settings_test {
  background-color: #ffbe00;
}
span.span_settings_security {
  background-color: #f30000;
}
span.span_toggle {
  display: inline-block;
  margin-top: 1px;
}

#feedbackDl.span_toggle {
  margin-top: 0;
}
.span_toggle a,
.cert_switch a {
  text-decoration: none;
  color: #00a0e6;
  margin-left: 3px;
}
fieldset.fs_settings {
  width: 948px;
}
fieldset.fs_settings dd {
  height: 30px !important;
  line-height: 30px;
}
fieldset.fs_settings dt {
  width: 240px;
  height: 30px !important;
  line-height: 30px;
}
fieldset.fs_settings table {
  height: 100px;
}
fieldset.fs_settings table tr {
  height: 40px !important;
}
fieldset.fs_settings select {
  width: 171px;
}
fieldset.fs_settings #validFrom,
fieldset.fs_settings #validUntil {
  width: 159px;
}
fieldset.fs_settings #category_name {
  width: 450px;
}
fieldset.fs_settings.fs_settings_display #logo_div,
fieldset.fs_settings.fs_settings_display #bg_div,
fieldset.fs_settings.fs_settings_display #background_div {
  width: 190px !important;
  border: solid 1px #9bafc3 !important;
  border-radius: 4px;
}
fieldset.fs_settings.fs_settings_display #logo_div {
  display: flex;
  width: 190px !important;
  height: 80px !important;
  margin-top: 5px !important;
  padding: 0 !important;
}
fieldset.fs_settings.fs_settings_display #logo_div #logo_img {
  display: block;
  width: auto;
  height: 100%;
  margin: auto;
}
fieldset.fs_settings_invitation .mail_users,
fieldset.fs_settings_invitation .mail_users_none {
  display: block;
  background-color: #a0d246;
  font-style: italic;
  color: #ffffff;
  border-radius: 2px;
  width: 860px;
  margin: 20px 0;
  padding: 3px 10px 5px;
}
fieldset.fs_settings_invitation .mail_users_none {
  background-color: #ff786e;
}
input[type="checkbox"].slider {
  display: none;
}
input[type="checkbox"].slider + label {
  display: inline-block;
  background: transparent url(layout/v11/images/switch-off.png) 0 0 no-repeat;
  border: none;
  margin: 5px 30px 0 0;
  padding: 23px 18px 0 18px;
  vertical-align: top;
  transition: all 0.2s;
  cursor: pointer;
}
input[type="checkbox"].slider:checked + label {
  background: transparent url(layout/v11/images/switch-on.png) 0 0 no-repeat;
}
input[type="checkbox"].disabled_off + label {
  display: inline-block;
  background: transparent url(layout/v11/images/switch-off-dis.png) 0 0 no-repeat;
  border: none;
  margin: 5px 30px 0 0;
  padding: 23px 18px 0 18px;
  vertical-align: top;
  transition: all 0.2s;
  cursor: pointer;
}
input[type="checkbox"].disabled_off:checked + label {
  background: transparent url(layout/v11/images/switch-on-dis.png) 0 0 no-repeat;
}

/* Patroon Vragen DM */

#catalog {
  padding-left: 5px;
}
#catalog ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 700px;
  height: 60px !important;
}
#catalog ul li {
  margin: 3px 3px 3px 0 !important;
  padding: 0px !important;
  display: inline-block;
  width: 60px;
  height: 60px !important;
  text-align: center;
  background-color: #f5f5f5;
  line-height: 60px !important;
}
#catalog ul li img {
  margin: 0px;
  margin-top: 5px;
}
#pattern {
  margin-top: 20px;
  background-color: #a0d246;
  height: 66px;
  padding: 5px;
}
#pattern ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 950px;
  min-height: 65px;
}
#pattern ul li {
  margin: 3px 3px 3px 0 !important;
  padding: 0px !important;
  display: inline-block;
  width: 60px;
  height: 60px !important;
  text-align: center;
  background-color: #f5f5f5;
  line-height: 60px !important;
}
#pattern ul li img {
  margin: 0px;
  margin-top: 5px;
}
.placeholder {
  width: 945px !important;
}
.pattern_li {
  list-style-type: none;
}
.floatleftli {
  float: left;
}
#removalbin {
  height: 60px;
  width: 200px;
  float: right;
  color: #fff;
  background-color: #fff;
  border: 1px #fff solid;
  text-align: center;
  vertical-align: middle;
  line-height: 60px;
}
.binactive {
  border: 1px #e20000 dashed !important;
  color: #e20000 !important;
}
/* Settings page end */
/* Patroon Vragen DM */

.catalog {
  padding-left: 5px;
}
.catalog ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 700px;
  height: 60px !important;
}
.catalog ul li {
  margin: 3px 3px 3px 0 !important;
  padding: 0px !important;
  display: inline-block;
  width: 60px;
  height: 60px !important;
  text-align: center;
  background-color: #f5f5f5;
  line-height: 60px !important;
}
.catalog ul li img {
  margin: 0px;
  margin-top: 5px;
}
.patternclass {
  margin-top: 20px;
  background-color: #a0d246;
  max-width: 960px;
  height: 66px;
  border-radius: 4px;
  padding: 5px;
}
.patternnarrowdiv {
  display: inline-block;
  width: 260px;
  margin-left: 20px;
  margin-right: 20px;
}
.patternclass ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 950px;
  min-height: 65px;
}
.patternclass ul.patternnarrow {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 260px !important;
  min-height: 65px;
}
.patternclass ul li {
  margin: 3px 3px 3px 0 !important;
  padding: 0px !important;
  display: inline-block;
  width: 60px;
  height: 60px !important;
  text-align: center;
  background-color: #f5f5f5;
}
.patternclass ul li img {
  margin: 0px;
  margin-top: 5px;
}
.placeholder {
  width: 945px !important;
  line-height: 60px !important;
}
.placeholdernarrow {
  width: 255px !important;
  line-height: 30px !important;
  float: left;
}
.pattern_li {
  list-style-type: none;
}
.floatleftli {
  float: left;
}
#removalbin {
  height: 60px;
  width: 200px;
  float: right;
  color: #fff;
  background-color: #fff;
  border: 1px #fff solid;
  text-align: center;
  vertical-align: middle;
  line-height: 60px;
}
.binactive {
  border: 1px #e20000 dashed !important;
  color: #e20000 !important;
}

/* Open vragen tijdelijke css */
.review_span {
  display: block;
  border-bottom: 1px #ccc solid;
  min-height: 220px;
  margin-bottom: 52px;
  padding: 10px 5px 10px 0;
}
.review_span div {
  width: 700px;
}
.review_span div:not(:last-child) {
  border-bottom: 1px #ccc dashed;
  margin: 0 0 15px 0;
}
.review_span p,
.review_span a {
  margin: 12px 0;
}
.attachment_block a {
  display: block;
  color: #00a0e6;
}
.image_block {
  float: right;
  width: 224px;
  margin-right: 10px;
  text-align: right;
}
.image_block > img {
  width: auto;
  height: auto;
  max-width: 224px;
  max-height: 170px;
}
.review_block {
  float: right;
  border: 2px #a0d246 solid;
  padding: 10px;
  width: 200px;
  margin-top: -110px;
  margin-right: 10px;
  background-color: #fff;
}
.review_block input[type="button"] {
  float: right;
  background-color: #00a0e6;
  border: solid 1px #00a0e6;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  height: 23px;
  padding: 1px 5px 2px 5px;
  cursor: pointer;
}
.review_block input[type="text"] {
  border: solid 1px #c5c5c5;
  font-size: 14px;
  width: 50px;
  height: 19px;
  padding: 0 2px 2px 2px;
  vertical-align: middle;
}

/* Video div start */
#help_movie_container {
  position: relative;
  margin: 0 0 70px 0;
}
#help_movie_topbar {
  position: absolute;
  top: -31px;
  left: 0;
  background-color: #ff786e;
  border: none;
  border-radius: 4px;
  color: #ffffff;
  height: 28px;
  font-size: 14px;  
  font-weight: bold;
  line-height: 27px;    
  padding: 0 10px;
}
#help_movie_topbar .fa-chevron-up,
#help_movie_topbar .fa-chevron-down {
  margin-left: 30px;
  cursor: pointer;
}
#help_movie_topbar .fa-times {
  margin-left: 25px;
  cursor: pointer;
}
#help_movie_content {
  display: table;
  background-color: #ffffff;
  border: none;
  border-radius: 4px;
  width: 930px;
  margin: 0 0 36px 0;
  padding: 25px 20px;
  box-shadow: 0 1px 2px rgba(55,65,85,0.35);
}
#help_movie_content .help_movie_left {
  display: table-cell;
  width: 275px;
  vertical-align: top;
}
#help_movie_content .help_movie_left p {
  margin: 0 0 25px 0;
}
#help_movie_content .help_movie_right {
  display: table-cell;
  vertical-align: top;
}
#help_movie_content .help_movie_right a {
  margin-left: 25px;
}
/* Video div end */

.span_settings_general.span_settings_inactive {
  background-color: #9bafc3  !important;
}
.span_settings_access.span_settings_inactive {
  background-color: #baec60 !important;
}
.span_settings_options.span_settings_inactive {
  background-color: #c4c4c4 !important;
}
.span_settings_test.span_settings_inactive {
  background-color: #ffd81a !important;
}
.span_settings_security.span_settings_inactive {
  background-color: #ff1a1a !important;
}

/* AANKLIKVRAAG POPUP BEGIN */
.popup-form #picture_hotspot.aanklikvraag {
  display: inline-block;
  max-width: 60%;
  height: auto;
  box-sizing: border-box;
  margin: 10px 0 20px 0;
}
.popup-form #picture_hotspot.aanklikvraag img {
  max-height: 300px;
  width: auto;
  border: solid 1px #cdd7e1;
  border-radius: 5px;
}
.popup-form #phoneticlong.aanklikvraag {
  display: inline-block;
  width: 30% !important;
  margin: 8px 0 0 10% !important;
}
.popup-form #phoneticlong.aanklikvraag li {
  margin-bottom: 5px !important;
  padding-top: 5px;
  padding-bottom: 5px;
}
/* AANKLIKVRAAG POPUP EINDE */


/* DM: tijdelijke layout rapport selectie */
.custom_report_selector {
  margin-left: 30px;
  margin-right: 30px;
  display: inline-block;
  cursor: pointer;
}
.custom_report_selector_active {
  background-color: #fff;
  color: #00a0e6;
  padding: 5px;
  padding-top: 0px;
  top: 5px;
  position: relative;
}
.custom_report_selector_container {
  padding-left: 100px;
}

/* DM: NIEUW MODULE OVERZICHT */
.module_span_inactive {
  color: #8c9196;
  /*border-left: 4px #E20000 solid;*/
}
.module_span_inactive > .subset_span {
  color: #8c9196;
}
.module_span_active {
  /*border-left: 4px #A0D246 solid;*/
}
fieldset.inline_error {
  color: #000;
  background: #d5d5d5;
  width: 850px;
  margin-top: 10px;
  margin-bottom: 0px;
  border-color: #e20000;
  border-width: 2px;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
}
.disabled {
  color: #ccc;
}
.tooltip_menu {
  margin-left: 4px;
}
.fs_inner {
  position: static;
  width: 900px;
  margin: 0px;
  margin-top: 15px;
}
.fs_inner > legend {
  position: static;
  background-color: #fff;
  color: #000;
  border-width: 0px;
}
.privacy_inner_width_1 {
  width: 300px;
  display: inline-block;
}
.privacy_inner_width_2 {
  width: 150px;
  display: inline-block;
}
.privacy_inner_width_3 {
  width: 300px;
  display: inline-block;
}
.privacy_inner_width_4 {
  width: 300px;
  display: inline-block;
}

/* HMO PRIVACY PAGINA 16-05-18 BEGIN */
.gdpr_actions {
  margin: 5px 0 30px 0;
}
.gdpr_actions a {
  display: inline-block;
  background-color: #00a0e6;
  border-radius: 2px;
  font-weight: bold;
  color: white;
  text-decoration: none;
  padding: 3px 10px 5px 10px;
  height: 20px;
  line-height: 20px;
  vertical-align: middle;
  margin: 0 25px 0 0;
}
.remarks_textarea textarea {
  max-width: 910px;
  margin-bottom: 8px;
  padding: 5px;
}
.fs_inner {
  border: solid 1px #b4bed2;
}
.fs_inner dl {
  margin: 5px 0;
}
.gdpr_checkbox {
  margin-right: 10px;
}
.gdpr_submit {
  display: inline-block;
  background-color: #1ebefa;
  border: none;
  border-radius: 2px;
  font-family: 'Noto Sans', NotoR, 'Segoe UI', sans-serif;
  font-weight: bold;
  color: white;
  text-decoration: none;
  padding: 7px 10px 10px 10px;
  vertical-align: middle;
  margin: 25px 0 10px 0;
  cursor: pointer;
}
.remarks_textarea textarea:focus,
.fs_inner input[type="text"]:focus {
  border-color: #ffbe00;
}
/* HMO PRIVACY PAGINA 16-05-18 EINDE */

/* HMO ANONYMIZE POPUP 23-05-18 BEGIN */
#anonymize_form fieldset {
  padding: 25px 10px 30px 10px;
}
#anonymize_form .popup83_version_check,
#anonymize_form .popup83_terms_check,
#anonymize_form .popup83_mails_check {
  margin: 0 0 20px 0;
}
#anonymize_form .popup83_terms_check {
  margin-bottom: 10px;
}
#anonymize_form .popup83_title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
}
#anonymize_form .popup83_text {
  margin-bottom: 15px;
}
#anonymize_form input[type="checkbox"] {
  margin: 0 10px 0 0;
  vertical-align: middle;
}
#anonymize_form a {
  text-decoration: none;
  color: #1ebefa;
  font-weight: bold;
}
#anonymize_form .popup83_text img {
  width: 32px;
  height: 32px;
  margin: 10px 0 -10px 0;
}
#anonymize_form .v83approve {
  background-color: #00a0e6;
  border: solid 1px #00a0e6;
  border-radius: 2px;
  font-weight: bold;
  color: white;
  margin: 30px 30px 0 0;
  padding: 5px 10px;
  cursor: pointer;
}
#anonymize_form .v83deny {
  background-color: #ffffff;
  border: solid 1px #00a0e6;
  border-radius: 2px;
  font-weight: bold;
  color: #00a0e6;
  margin: 30px 30px 0 0;
  padding: 5px 10px;
  cursor: pointer;
}
#anonymize_form button:disabled {
  background-color: #cccccc;
  border: solid 1px #cccccc;
  cursor: default;
}
#anonymize_form dt {
  width: 200px;
}
/* HMO ANONYMIZE POPUP 23-05-18 EINDE */


.table {
  min-width: 100%;
  margin-bottom: 20px;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
  white-space: nowrap;
  text-align: left;
}
.table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #ddd;
}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
  border-top: 0;
}
.table > tbody + tbody {
  border-top: 2px solid #ddd;
}
.table .table {
  background-color: #fff;
}
.table-bordered {
  border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;
}
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}
.table > thead > tr > td.active,
.table > tbody > tr > td.active,
.table > tfoot > tr > td.active,
.table > thead > tr > th.active,
.table > tbody > tr > th.active,
.table > tfoot > tr > th.active,
.table > thead > tr.active > td,
.table > tbody > tr.active > td,
.table > tfoot > tr.active > td,
.table > thead > tr.active > th,
.table > tbody > tr.active > th,
.table > tfoot > tr.active > th {
  background-color: #f5f5f5;
}
.table-hover > tbody > tr > td.active:hover,
.table-hover > tbody > tr > th.active:hover,
.table-hover > tbody > tr.active:hover > td,
.table-hover > tbody > tr:hover > .active,
.table-hover > tbody > tr.active:hover > th {
  background-color: #e8e8e8;
}
.fs_tab h1,
.fs_tab h2,
.fs_tab h3,
.fs_tab h4,
.fs_tab h5,
.fs_tab h6 {
  margin: 0px;
}
.filter_container {
  display: inline-block;
}
#endscreen .category_copy {
  position: absolute;
  top: -28px;
  right: -1px;
  background-color: #00a0e6;
  color: #ffffff;
  width: 20px;
  height: 28px;
  padding: 0 10px;
}
#endscreen .category_copy .fa-copy {
  margin-top: 7px !important;
}
.btn_addon {
  background-color: #00a0e6;
  color: #fff;
  border-width: 0px;
  height: 22px;
  cursor: pointer;
}
.btn_addon:hover {
  background-color: #4dc9ff;
}
.span_disabled {
  opacity: 0.5 !important;
}
.mail_bodies {
  display: block;
  border-top: 1px solid #00a0e6;
}
.mail_trigger_label_category {
  font-weight: bold;
}
.mail_trigger_label_row {
  padding: 5px;
  padding-left: 20px;
  cursor: pointer;
}
.mail_trigger_label_row:hover {
  background-color: rgba(180, 180, 180, 0.8);
  color: #fff;
}
.mail_trigger_label_label {
  width: 280px;
  display: inline-block;
  vertical-align: top;
}

/* HMO VERIFICATIE BEGIN */
.verification_dl {
  margin-bottom: 30px;
}
.verification_dl .tooltip_info {
  color: #00a0e6;
  font-style: italic;
  text-decoration: underline;
  cursor: default;
}
.verification_dl .tooltip_info span {
  font-style: normal;
}
/* HMO VERIFICATIE EINDE */

/* HMO NIEUWE SIMULATIE BEGIN */
#content p.legend {
  margin-left: 2px;
  margin-bottom: 2px;
}
#content table.new_sim_legend {
  border: solid 1px #e1e6eb;
  border-spacing: 1px;
  width: 330px;
}
#content table.new_sim_legend tr.no_border {
  border-bottom: none;
}
#content table.new_sim_legend td {
  padding: 3px 10px;
}
#content table.new_sim_legend td.icon {
  background-color: #98a0b2;
  text-align: center;
}
#content table.new_sim_legend td.desc {
  background-color: #e7ebef;
}
#content a.new_sim_start {
  display: inline-block;
  background-color: #f3f5f7;
  border-radius: 3px;
  font-family: RobotoB, sans-serif;
  font-size: 22px;
  color: #f44336;
  line-height: 80px;
  height: 80px;
  margin: 50px 0;
  padding: 0 10px 0 20px;
  vertical-align: top;
  box-shadow: 0 2px 5px rgba(50, 60, 70, 0.2), 0 1px 3px rgba(50, 60, 70, 0.3);
  transition: color 0.3s ease-in-out;
}
#content a.new_sim_start::after {
  display: inline-block;
  content: url(css/images/nieuwe-simulatie-play.png);
  background-color: #f44336;
  border-radius: 999px;
  line-height: 40px;
  width: 40px;
  height: 40px;
  margin: -10px 0 0 25px;
  padding: 30px;
  vertical-align: top;
  box-shadow: 0 3px 6px rgba(244, 67, 54, 0.2), 0 6px 8px rgba(244, 67, 54, 0.3);
  transition: all 0.3s ease-in-out;
}
#content a.new_sim_start:hover::after {
  background-color: #fa5a55;
  box-shadow: 0 3px 6px rgba(244, 67, 54, 0.3), 0 5px 10px rgba(244, 67, 54, 0.4);
}
/* 09-11-21 */
#simulation_lines li {
  transition: all 0.07s ease;
}
#simulation_lines li:hover {
  box-shadow: inset 3px 0 0 #788791;
}
#simulation_lines .list_main_line {
  font-weight: inherit;
}
#simulation_navigation_wrapper #sim_nav_add .folderbar {
  position: relative;
  width: 100% !important;
  box-sizing: border-box;
  padding-left: 25px !important;
}
#simulation_navigation_wrapper #sim_nav_add .folderbar:before {
  position: absolute;
  top: -2px;
  left: 10px;
  content: '\002B';
  font-size: 1.5em;
}
/* HMO NIEUWE SIMULATIE EINDE */

/* HMO NIEUW OPLEIDINGSADVIES BEGIN */
.advise_group_uneven,
.advise_group_even {
  padding-top: 5px !important;
}
.advise_link {
  display: inline-block;
  position: relative;
  background-color: #106ebe;
  font-size: 1em;
  color: #ffffff !important;
  line-height: 2em;
  height: 3.3em;
  border-radius: 2px;
  padding: 0 1em;
  overflow: hidden;
}
.advise_link::after {
  content: "\00BB";
  font-size: 1.2em;
  line-height: 0;
  margin-left: 5px;
}
.progressbar_bg,
.progressbar,
.progressbar_text {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40%;
}
.progressbar_bg {
  background-color: rgba(255, 255, 255, 0.2);
  z-index: 2;
}
.progressbar {
  background-color: #32d2af;
  width: unset;
  z-index: 3;
}
.progressbar_text {
  display: flex;
  background-color: transparent;
  font-size: 0.9em;
  color: #ffffff;
  justify-content: center;
  align-items: center;
  z-index: 4;
}
/* HMO NIEUW OPLEIDINGSADVIES EINDE */

/* FILTERS BEGIN */
.category_span .orderby_copy {
  position: absolute;
  top: -31px;
  right: 0;
  background-color: #b5deef;
  width: 220px;
  height: 28px;
  border-radius: 4px;
  padding: 0 10px;
  cursor: pointer;
}
.orderby_item_active {
  display: inline-block;
  font-weight: bold;
  width: 210px;
  height: 28px;
  line-height: 26px;
}
.orderby_item_active #orderby_link > img {
  margin-top: 3px;
}
#orderby_span {
  position: absolute;
  top: -3px;
  right: 0;
  background-color: #ffffff;
  display: none;
  width: 240px;
  height: auto;
  border-radius: 4px;
  z-index: 2;
  padding: 2px 0 5px 0;
  box-shadow: 0 5px 8px -2px rgb(55 65 85 / 25%);
  cursor: pointer;
}
.orderby_sub_span {
  display: block;
  position: relative;
  top: 4px;
  font-weight: 500;
  line-height: 1.42857143;
  margin: 0 0 5px 0;
  padding: 5px 10px;
}
.orderby_sub_span:hover {
  color: #2d3237;
  background-color: #e1e6eb;
}
.orderby_item_active_display {
  height: 28px;
  display: inline-block;
  vertical-align: middle;
}
.filter_span,
.filter_span_web {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #b5deef;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  margin-left: 3px;
  cursor: pointer;
}
.filter_span > img {
  height: 24px;
}
.filter_span[data-toggle="0"] {
  background-color: #cdd7e1 !important;
}
.filter_span[data-toggle="0"] > img {
  opacity: 0.8;
}
.filter_span_web > i {
  user-select: none;
  color: #485058;
}
.filter_span_web[data-toggle="1"] {
  background-color: #b5deef !important;
}
.filter_span_web[data-toggle="0"] {
  background-color: #cdd7e1 !important;
}
.filter_span_web[data-toggle="0"] > i {
  opacity: 0.8;
}
/* FILTERS EINDE */
/* NICEFORM EINDE */

/* EINDSCHERM RESPONSIVE BEGIN */
@media screen and (max-width: 800px) {
  #main.new_endscreen #content, #main.new_endscreen #post_endscreen {
    height: auto !important;
  }
  #post_endscreen .widget_full {
    position: unset !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
  }
  #post_endscreen .widget_full div {
    display: grid;
    place-items: center;
    width: 100% !important;
    height: auto !important;
    min-height: 100px;
    box-sizing: border-box;
  }
  #post_endscreen .widget_full .widget_form_icon {
    width: unset !important;
  }
  #post_endscreen canvas {
    min-height: 200px;
  }
  #main.new_endscreen #footer {
    margin: 0 !important;
    padding: 0 !important;
  }
/* EINDSCHERM RESPONSIVE EINDE */

/* PORTAL DASHBOARD RESPONSIVE BEGIN */
  .portal_main {
    margin-top: 0 !important;
  }
  .portal_main #content, #post_endscreen {
    height: auto !important;
  }
  .portal_main .container_header_button {
    font-size: 18px;
    margin: -85px auto 55px auto;
    padding: 7px 35px 7px 25px;
  }
  .portal_main .container_header_button:after {
    top: calc(50% - 10px);
    right: 15px;
    transform: scale(0.8);
  }
  .portal_main #post_endscreen .widget_full {
    position: relative !important;
    top: unset !important;
    left: unset !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    text-align: center !important;
    margin: 20px 0 0 0;
  }
  .portal_main #post_endscreen .widget_full > div {
    min-height: 30px;
    overflow: hidden !important;
  }
  .portal_main .widget_full > div > div {
    display: flex !important;
    width: 100% !important;
    min-height: 30px;
    align-items: center;
    justify-content: center;
  }
  .portal_main #post_endscreen .widget_full:hover .widget_form_bar_progress {
    height: 10px !important;
    transition: 0.4s !important;
  }
  .portal_main #post_endscreen .widget_form_text {
    font-size: 1em !important;
  }
  .portal_main #post_endscreen .widget_text_block h2 {
    font-size: 20px !important;
  }  
  .portal_main #post_endscreen .msg_search_btn {
    max-width: 150px;
    margin: 20px auto;
  }
/* PORTAL DASHBOARD RESPONSIVE EINDE */
}

/* FAB BEGIN */
#fab_container {
  position: fixed;
  right: 25px;
  bottom: 25px;
  width: 48px;
}
.fab_main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #00a0e6;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: 0 10px 20px rgba(0,0,0,0.20), 0 6px 8px rgba(0,0,0,0.20);
  cursor: pointer;
  transition: all .2s;
  z-index: 10;
}
.material-icons {
  color: #ffffff;
}
.fab_items {
  position: absolute;
  right: -10px;
  bottom: 32px;
  list-style: none;
  width: 68px;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(60px);
  transition: all .3s;
  z-index: 9;
}
.fab_items .fab_item {
  display: block;
  text-align: center;
  margin: 12px 0;
}
.fab_items .fab_item .link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  text-decoration: none;
  border-radius: 50%;
  box-shadow: 0 8px 15px rgba(0,0,0,0.20), 0 6px 8px rgba(0,0,0,0.20);
  transform: scaleY(0.5) scaleX(0.5) translateY(0px) translateX(0px);
  transition: transform .3s, box-shadow .1s;
}
.fab_items .fab_item.kennisbank .link {
  background-color: #a0d246;
}
.fab_items .fab_item.ticket .link {
  background-color: #ff786e;
}
.fab_items .fab_item.wistjedat .link {
  background-color: #ffbe00;
}
.fab_items .fab_item.wistjedat .link .material-icons {
  position: relative;
}
.fab_items .fab_item.wistjedat_new_message .link .material-icons::before {
  content: '';
  display: inline-block;
  position: absolute;
  top: -5px;
  left: -10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #1ebefa;
}
[data-tooltip]:before {
  position: absolute;
  top: 50%;
  right: 100%;
  background: #585858;
  content: attr(data-tooltip);
  font-weight: 600;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  border-radius: 4px;
  visibility: hidden;
  opacity: 0;
  margin: -12px 10px 0 0;
  padding: 4px 10px;
  transform: scale(0);
  white-space: nowrap;
  transform-origin: top right;
  transition: all .3s cubic-bezier(.25, .8, .25, 1);
  cursor: default;
}
#fab_container:hover .fab_main {
  background-color: #0088c4;
}
#fab_container:hover .fab_items {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#fab_container:hover .fab_items .link {
  transform: scaleY(1) scaleX(1) translateY(-16px) translateX(0px);
}
#fab_container:hover .fab_items .fab_item .link::before {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
  transform-origin: right center 0;
  transition-delay: .3s;
}
[data-tooltip]:hover::before {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
  transform-origin: right center 0;
}
.fab_items .link:active {
  box-shadow: 0 2px 5px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.24);
}

@media screen and (max-width: 1280px){
  #fab_container {
    transform: scale(0.8);
    right: 20px;
    bottom: 20px;
  }
}
/* FAB EINDE */

/* WIST JE DAT BEGIN */
fieldset.fs_wistjedat {
  width: 928px;
  padding: 10px 20px 15px 20px;
}
fieldset.fs_wistjedat .messages {
  max-height: 500px;
  overflow: auto;
}
fieldset.fs_wistjedat .msg_h1 {
  font-family: 'Noto Sans', NotoR, 'Segoe UI', sans-serif;
  font-weight: bold;
  font-size: 20px;
  border-top: solid 1px #cdd7e1;
  margin: 20px 0 0 0;
  padding-top: 20px;
  clear: both;
}
fieldset.fs_wistjedat .msg_h1:first-of-type {
  border-top: none;
  margin-top: 15px;
  padding-top: 0;
}
fieldset.fs_wistjedat .msg_h1.msg_new::before {
  display: inline-block;
  content: 'Nieuw';
  background-color: #1ebefa;
  font-size: 0.55em;
  color: #ffffff;
  border-radius: 99px;
  vertical-align: super;
  padding: 0.2em 0.7em;
  margin-right: 5px;
}
fieldset.fs_wistjedat .msg_div {
  display: inline-block;
  padding-right: 10px;
}
/* WIST JE DAT EINDE */

/* PLANNER BEGIN */
#webinargroupform fieldset:not(.action) {
  width: 948px;
}
#filter_div.calendar a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #9bafc3;
  width: 54px;
  height: 28px;
  border-radius: 4px;
  margin-left: 3px;
}
#filter_div.calendar.calendar_active a {
  background-color: #00a0e6;
}
a.webinar_not_registered .pill,
a.webinar_registered .pill {
  display: inline-block;
  position: absolute;
  top: -7px;
  right: -4px;
  background-color: #aab4be;
  width: 22px;
  height: 14px;
  border-radius: 15px;
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  line-height: 14px;
  text-align: center;
}
a.webinar_registered .pill {
  background-color: #00a0e6;
}
.has_pill {
  position: relative;
}
.has_pill .grey_pill,
.has_pill .blue_pill {
  display: inline-block;
  position: absolute;
  top: -7px;
  right: -11px;
  background-color: #a5b4c3;
  width: 22px;
  height: 14px;
  border-radius: 15px;
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  line-height: 14px;
  text-align: center;
}
.has_pill .blue_pill {
  background-color: #00a0e6;
}
.dropdown-content .grey_pill,
.dropdown-content .blue_pill {
  top: 0;
  left: 30px;
  right: unset;
}

/* WEEKKALENDER BEGIN */
.webinar_calendar_list_header {
  font-size: 15px;
  font-weight: bold;
  color: #8794a0;
}
.webinar_card_line_1 {
  font-weight: bold;
}
.webinar_card_line_3 {
  font-style: italic;
  color: #8794a0;
}
.webinar_calendar_show_before {
  padding: 8px 0 0 0;
}
.webinar_calendar_show_after {
  padding: 4px 0;
}
.webinar_calendar_show_before a,
.webinar_calendar_show_after a {
  text-decoration: none;
  color: #8794a0;
  border: solid 1px #8794a0;
  border-radius: 99px;
  padding: 2px 12px;
}
/* WEEKKALENDER EINDE */

/* MAANDKALENDER BEGIN */
.month_calendar_container {
  display: block;
  width: 700px;
  border: solid 1px #cdd7e1;
  border-radius: 4px;
  margin: 4px 0 0 5px;
}
.month_calendar_container .month_calendar_navigation_div {
  background-color: #ebf0f5;
  border-radius: 4px 4px 0 0;
}
/*
.month_calendar_container > div:nth-child(odd) {
  background-color: #ebf0f5;
}
*/
.month_calendar_day_container {
  display: inline-block;
  width: 100px;
  height: 100px;
  border-top: solid 1px #cdd7e1;
  border-right: solid 1px #cdd7e1;
  padding: 5px;
  overflow: hidden;
  box-sizing: border-box;
}
.month_calendar_day_container:last-of-type {
  border-right: none;
}
.month_calendar_day_date {
  display: block;
  text-align: right;
  font-weight: bold;
}
.month_calendar_day_count_pending,
.month_calendar_day_count_confirmed,
.month_calendar_day_count_cancelled,
.month_calendar_day_count_option {
  display: inline-block;
  width: 36px;
  background-color: #ffc001;
  color: #ffffff;
  border-radius: 99px;
  text-align: center;
  margin: 2px 4px;
  padding-bottom: 1px;
}
.month_calendar_day_count_confirmed {
  background-color: #a0d246;
}
.month_calendar_day_count_cancelled {
  background-color: #ff2356;
}
.month_calendar_day_count_option {
  background-color: #879baf;
}

/* FILTERS BEGIN */
#calender_filters {
  float: right;
  border: solid 1px #cdd7e1;
  border-radius: 4px;
  width: 151px;
  margin: 4px 5px 0 0;
}
#calender_filters .filter_title {
  background-color: #ebf0f5;
  font-weight: 700;
  padding: 3px 3px 3px 8px;
  border-top: solid 1px #cdd7e1;
  border-bottom: solid 1px #cdd7e1;
}
#calender_filters .filter:first-of-type .filter_title {
  border-top: none;
}
#calender_filters .filter_options {
  padding: 6px 4px;
}
#calender_filters .filter_options:has(select) {
  padding: 9px;
}
#calender_filters input {
  display: none;
}
#calender_filters input[type=checkbox] + label,
#calender_filters input[type=radio] + label {
  display: inline-block;
  background: transparent url(css/images/checkbox.png) 0 2px no-repeat;
  line-height: 28px;
  margin: 0;
  padding: 0 0 0 25px;
  cursor: pointer;
}
#calender_filters input[type=radio] + label {
  background: transparent url(css/images/radiobutton.png) 0 2px no-repeat;
}
#calender_filters input[type=checkbox]:checked + label{
  background: transparent url(css/images/checkbox_checked.png) 0 2px no-repeat;
}
#calender_filters input[type=radio]:checked + label{
  background: transparent url(css/images/radiobutton_checked.png) 0 2px no-repeat;
}
#calender_filters select {
  width: 100%;
  margin: 0;
}
#calender_filters .filter_reset {
  border-top: solid 1px #cdd7e1;
  text-align: center;
}
#calender_filters .filter_reset span {
  display: inline-block;
  background-color: #00a0e6;
  border: none;
  border-radius: 4px;
  height: 28px;
  line-height: 28px;
  font-weight: 600;
  color: #fff;
  margin: 10px 0;
  padding: 0 13px;
  box-shadow: 0 2px 4px -2px rgba(55,65,85,0.35);
  transition: background-color 0.2s;
  cursor: pointer;
}
#calender_filters .filter_reset span:hover {
  background-color: #1ebefa;
}
/* FILTERS EINDE */
/* MAANDKALENDER EINDE */

/* TRAINERS SKILLS BEGIN */
#skillset-body {
  max-height: 508px; 
  overflow: auto;
}
#skillset-body input {
  margin: 0;
}
.skillset {
  margin-bottom: 10px;
}
.skillset-header, .skillset-add-header {
  display: flex;
  align-items: center;
  gap: 7px;
  background-color: #dfe6ed;
  font-size: 1em;
  font-weight: 700;
  width: 100%;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}
.skillset-header {
  border-radius: 4px 4px 0 0;
}
.transparent-input {
  background-color: white;
  border: 1px solid #9bafc3;
  padding: 5px;
  width: 200px;
  border-radius: 4px;
}
.skillset-items {
  background-color: #dfe6ed;
  border-radius: 0 0 4px 4px;
  padding: 5px 10px;
}
.skillset-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 500;
  padding: 10px;
}
.skillset-closed > .skillset-header {
  border-radius: 4px;
}
.skillset-item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.skillset-item:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.skillset-item:nth-child(even) {
  background-color: #ffffff;
}
.skillset-item:nth-child(odd) {
  background-color: #f5f8fb;
}
.skillset-item:nth-last-child(2) {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.skillset-item.skillset-item-add {
  background-color: #dfe6ed;
  padding: 10px 10px 5px 10px;
}
.skillset-item-remove {
  margin-left: auto;
}
#view-skills .skillset-header {
  border-radius: 4px;
}
#view-skills .skills {
  padding: 5px 10px 0px 21px;
}
#view-skills .skill {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 500;
  padding-top: 5px;
}
#view-skills input {
  margin: 0;
}
/* TRAINERS SKILLS EINDE */

/* TRAINERS PLANBORD BEGIN */
#trainers_planboard_body .trainers.legend {
  display: flex; 
  align-items: center; 
  margin: 2px 0 18px 0;
}
#trainers_planboard_body .trainers.legend.item {
  margin: 0;
}
#trainers_planboard_body .trainers.legend .trainers.legend.item {
  align-items: center; /* Vertically center the contents */
  margin-right: 25px; /* Add spacing between items (adjust as needed) */
}
#trainers_planboard_body .trainers.legend .trainers.legend.item .trainers.legend.item.color {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
}
#trainers_planboard_body .row {
  display: grid;
  grid-template-columns: 20% 80%;
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  border-top: 1px solid #cdd7e1;
  border-left: 1px solid #cdd7e1;
}
#trainers_planboard_body .row:last-child {
  border-bottom: 1px solid #cdd7e1;
}
#trainers_planboard_body #calander-navigation {
  background-color: #ebf0f5;
  text-align: center;
  padding: 3px;
}
#trainers_planboard_body .calender-header {
  display: grid;
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-color: #ebf0f5;
  height: 100%;
}
#trainers_planboard_body .calender-header-cell {
  border-left: 1px solid #cdd7e1;
  line-height: 36px;
  vertical-align: middle;
  font-weight: bold;
}
#trainers_planboard_body .calender-header-cell:last-child {
  border-right: 1px solid #cdd7e1;
}
#trainers_planboard_body .trainer-cell {
  display: flex;
  flex-direction: column;
  vertical-align: middle;
  padding: 6px;
}
#trainers_planboard_body .calender-cell {
  text-align: center;
  display: flex;
  flex-direction: column;
}
#trainers_planboard_body .calender-fill-top,
#trainers_planboard_body .calender-fill-bottom,
#trainers_planboard_body .calender-fill-middle {
  display: grid;
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}
#trainers_planboard_body .calender-data {
  display: grid;
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}
#trainers_planboard_body .calender-fill-top,
#trainers_planboard_body .calender-fill-bottom {
  min-height: 10px;
}
#trainers_planboard_body .calender-fill-middle {
  min-height: 5px;
}
#trainers_planboard_body .calender-fill-bottom {
  height: 100%;
}
#trainers_planboard_body .calender-fill-cell {
  border-left: 1px solid #cdd7e1;
}
#trainers_planboard_body .calender-data-cell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 5px;
  text-align: left;
  vertical-align: middle;
  border-left: 1px solid #cdd7e1;
}
/*
.calender-data-cell:nth-child(1){
  border-left: 1px solid #cdd7e1;
}
*/
#trainers_planboard_body .calender-fill-cell:last-child,
#trainers_planboard_body .calender-data-cell:last-child {
  border-right: 1px solid #cdd7e1;
}
#trainers_planboard_body .name {
  font-weight: bold;
}
#trainers_planboard_body .active {
  border-radius: 3px;
}
/* TRAINERS PLANBORD EINDE */

/* DEELNEMERSOVERZICHT VOOR TRAINER BEGIN */
.portal_main #content.trainer_data .participant {
  position: relative;
  background-color: #e6ebf0;
  border: solid 1px #cdd7e1;
  margin-top: -1px;
  padding: 6px 10px;
  cursor: pointer;
}
.portal_main #content.trainer_data .participant.open:after,
.portal_main #content.trainer_data .participant.closed:after {
  content: '\2212';
  font-size: 18px;
  color: #374155;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.portal_main #content.trainer_data .participant.closed:after {
  content: '\002B';
}
.portal_main #content.trainer_data .participant:nth-of-type(even) {
  background-color: #f5f8fb;
}
.portal_main #content.trainer_data .participant span:nth-of-type(1) {
  width: 350px;
}
.portal_main #content.trainer_data .participant span:nth-of-type(2) {
  width: 530px;
}
.portal_main #content.trainer_data .trainer_data_overview {
  border-collapse: collapse;
  margin: -1px 0 16px auto;
}
.portal_main #content.trainer_data .tooltip_wide .fa-circle {
  font-size: 12px;
}
.portal_main #content.trainer_data .tooltip_wide {
  margin-right: 11px;
  cursor: inherit;
}
.portal_main #content.trainer_data .tooltip_wide span {
  margin-left: -89px;
}
.portal_main #content.trainer_data .trainer_data_overview thead {
  background-color: #e6ebf0;
  font-weight: bold;
}
.portal_main #content.trainer_data .trainer_data_overview:nth-of-type(even) thead {
  background-color: #f5f8fb;
  font-weight: bold;
}
.portal_main #content.trainer_data .trainer_data_overview td {
  border: solid 1px #cdd7e1;
  padding: 4px 8px;
  text-align: center;
  vertical-align: middle;
}
.portal_main #content.trainer_data .trainer_data_overview td .tooltip_wide {
  margin: 0;
}
.portal_main #content.trainer_data .trainer_data_overview td.module_name {
  text-align: left;
  min-width: 500px;
}
/* DEELNEMERSOVERZICHT VOOR TRAINER EINDE */

#webinar_archive_body .webinar_calendar_show_after {
  margin-top: 15px;
}
.option_link {
  text-decoration: none;
  color: #00a0e6;
}
.option_link:hover {
  color: #1ebefa;
}
fieldset .training-id {
  float: right;
  text-align: right;
  margin-right: 54px;
}
#webinar_body > .list.webinar_active,
#webinar_archive_body > .list.webinar_active {
  padding: 15px !important;
}
.select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 26px !important;
  padding-left: 5px !important;
}
.select2-search--dropdown {
  padding: 5px !important;
}
a.training_add_files {
  text-decoration: none;
  position: absolute;
  bottom: 10px;
  right: 10px;
  height: 36px;
  width: 36px;
  background-color: #a0d246;
  border-radius: 99px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.30);
}
a.training_add_files .material-icons {
  color: white;
}
/* PLANNER EINDE */

/* FADE IN SIDE BANNER START */
.sidebar_with_icons {
  padding-top: 0px;
}
#sidebar_icons_container {
  height: 100px;
}
#sidebar_icons {
  display: flex;
  width: 100%; 
  height: 100%; 
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-out, visibility 0s 0.3s;
  will-change: opacity, visibility;
}
#sidebar_icons.is-visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease-out;
}
#sidebar_icons > a {
  margin: auto;
}
/* FADE IN SIDE BANNER EINDE */

/* SUCCES/FOUTMELDING BEGIN */
#action_feedback_success,
#action_feedback_error,
#action_feedback_warning {
  display: block !important;
  visibility: hidden;
  position: fixed;
  top: 20px;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 2000;
}
#action_feedback_success.revealed,
#action_feedback_error.revealed,
#action_feedback_warning.revealed {
  visibility: visible;
  animation: feedbackReveal 0.5s, feedbackHide 0.5s 5.6s;
}
#action_feedback_success.revealed {
  animation: feedbackReveal 0.5s, feedbackHide 0.5s 1.8s;
}
#action_feedback_success .feedback,
#action_feedback_error .feedback,
#action_feedback_warning .feedback {
  display: inline-block;
  font-size: inherit;
  color: white;
  border: none;
  border-radius: 4px;
  width: auto;
  max-width: 50%;
  height: auto;
  margin: 0;
  padding: 0 20px;
  box-shadow: 0 9px 9px -1px rgb(55 65 85 / 25%);
}
#action_feedback_success .feedback {
  background-color: #a0d246;
}
#action_feedback_error .feedback {
  background-color: #ff1e53;
}
#action_feedback_warning .feedback {
  background-color: #ffbe00;
}

@keyframes feedbackReveal {
  0% {top: -20px; opacity: 0;}
  100% {top: 20px; opacity: 1;}
}
@keyframes feedbackHide {
  0% {top: 20px; opacity: 1;}
  100% {top: -20px; opacity: 0;}
}
/* SUCCES/FOUTMELDING/WAARSCHUWING EINDE */

/* CKEDITOR AUDIO BUTTON START */
span.cke_button {
  display: inline-block;
  height: 18px;
  padding: 4px 6px;
  outline: 0;
  cursor: default;
  float: left;
  border: 0;
  position: relative;
}
span.cke_button_on{
  background:#fff;
  border:1px #bcbcbc solid;
  padding:3px 5px
}
span.cke_button_off:hover, span.cke_button_off:focus, span.cke_button_off:active{
  background:#e5e5e5;
  border:1px #bcbcbc solid;
  padding:3px 5px;
}
.cke_audiotoolgroup span.cke_button:first-child::before{
  content: "";
  position: absolute;
  height: 18px;
  width: 0;
  border-left: 1px solid #bcbcbc;
  margin-top: 4px;
  top: 0;
  left: -3px;
}
.cke_audiotoolgroup > div, .cke_audiotoolgroup > div *{
  margin: auto;
  padding: auto;
  border: auto;
  background: auto;
  text-decoration: auto;
  width: auto;
  height: auto;
  vertical-align: auto;
  box-sizing: auto;
  position: auto;
  transition: auto;
  border-collapse: auto;
  font: auto;
  color: auto;
  text-align: auto;
  white-space: auto;
  cursor: auto;
  float: auto;
}
/* CKEDITOR AUDIO BUTTON EINDE */

/* NIEUWE FLOWPAPER BEGIN */
.flowpaper-popup {
  visibility: hidden;
  position: fixed;
  z-index: 100;
  padding-top: 100px;
  left: 0;
  top: -60px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0,0,0,.4);
}
.flowpaper-popup-content {
  position: relative;
  margin: auto;
  padding: 0;
  width: 80%;
  height: 90%;
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: .4s;
  animation-name: animatetop;
  animation-duration: .4s;
  border-radius: .3rem;
}
/*
.flowpaper_viewer {
  padding-top: 70px;
  box-sizing: border-box;
}
*/
.flowpaper_fisheye {
  top: 613px;
}

@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}
@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}
/* NIEUWE FLOWPAPER EINDE */

/* FLOWPAPER INACTIVE ERROR BEGIN */
.flowpaper_error {
  max-width: 80%;
  display: block;
  color: #ff1e53;
  border: solid 1px #ff1e53;
  width: fit-content;
  padding: 0.5em 1em;
  border-radius: 4px;
  margin: auto;
}
.flowpaper_error a {
  color: #ff1e53;
  text-decoration: none;
  margin:0;
  padding:0;
}
/* FLOWPAPER INACTIVE ERROR EIND */

/* METATAGS ZOEKVELD BEGIN */
#metatagform #navsearch {
  display: block;
  margin-bottom: 15px;
}
#metatagform #navsearch #navsearch_text {
  background: rgba(0, 0, 0, 0.1) url(../css/images/nav-zoeken-b.png) no-repeat right 2px center;
  border: solid 1px rgba(0, 0, 0, 0.4);
  border-radius: 2px;
  box-sizing: border-box;
  font: inherit;
  width: 250px;
  padding: 5px 28px 5px 7px;
  opacity: 0.7;
}
#metatagform #navsearch #navsearch_text:focus {
  background: rgba(0, 0, 0, 0) url(../css/images/nav-zoeken-b.png) no-repeat right 2px center;
  border: solid 1px #00a0e6;
  opacity: 1;
  outline: none;
}
/* METATAGS ZOEKVELD EINDE */

/* ANIMATED INTROS BEGIN */
/* MODULE */
#main.animated_intro_module #content * {
  box-sizing: border-box;
}
#main.animated_intro_module *::before,
#main.animated_intro_module *::after {
  box-sizing: inherit
}
#main.animated_intro_module #test_question_span,
#main.animated_intro_module #footer,
#main.animated_intro_module #nav_container .next,
#main.animated_intro_module #audioMain {
  display: none !important;
}
#main.animated_intro_module {
  padding: 0;
}
#main.animated_intro_module #progressbar_bg {
  width: 100%;
  margin: 0;
}
#main.animated_intro_module #content,
#main.animated_intro_module #content .start {
  display: flex;
  align-items: center;
  justify-content: center;
}
#main.animated_intro_module #content {
/*  background: url('layout/aegolius/def-anim-intro-module.png') center no-repeat; */
  background-size: cover !important;
  width: 100%;
  height: 100%;
  min-height: 480px;
  border: none !important;
}
#main.animated_intro_module #content .start {
  opacity: 0;
  flex-direction: column;
  background-color: white;
  max-width: 50%;
  border-radius: 10px;
  text-align: center;
  padding: 30px;
  box-shadow: 0 5px 15px 0 #0000004d;
  animation: scale .8s ease-in-out .2s forwards;
}
#main.animated_intro_module #content .start h1,
#main.animated_intro_module #content .start h2,
#main.animated_intro_module #content .start h3 {
  font-family: inherit;
  color: #106ebe;
  margin: 0 0 10px 0;
}
#main.animated_intro_module #content .start p {
  color: #46556e;
  margin: 8px 0;
}
#main.animated_intro_module #content .start p:has(.startbutton) {
  margin: 10px  0 0 0;
}
#main.animated_intro_module #content .start .startbutton {
  background-color: #f44336;
  font-family: inherit;
  font-size: 1.3em;
  color: white;
  border: none;
  border-radius: 99px;
  margin-top: 10px;
  padding: 0.5em 2em;
  cursor: pointer;
  animation: pulse 4s 3s infinite;
}

/* GROEP */
#main.animated_intro_group #content * {
  box-sizing: border-box;
}
#main.animated_intro_group *::before,
#main.animated_intro_group *::after {
  box-sizing: inherit
}
#main.animated_intro_group #test_question_span,
#main.animated_intro_group #audioMain,
#main.animated_intro_group #footer {
  display: none !important;
}
#main.animated_intro_group {
  padding: 0;
}
#main.animated_intro_group #progressbar_bg {
  width: 100%;
  margin: 0;
}
#main.animated_intro_group #content,
#main.animated_intro_group #content .text {
  display: flex;
  align-items: center;
  justify-content: center;
}
#main.animated_intro_group #content {
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  width: 100%;
  min-height: 480px;
  border: none !important;
}
#main.animated_intro_group #content .image,
#main.animated_intro_group #content .text {
  width: 50%;
}
#main.animated_intro_group #content .image {
/*  background: url('layout/aegolius/def-anim-intro-groep.png') center no-repeat; */
  background-size: cover !important;
  animation: fade .7s ease-in-out .3s forwards;
}
#main.animated_intro_group #content .text {
  flex-direction: column;
  align-items: start;
  padding: 5%;
}
#main.animated_intro_group #content .image,
#main.animated_intro_group #content .text h1,
#main.animated_intro_group #content .text h2,
#main.animated_intro_group #content .text h3,
#main.animated_intro_group #content .text p,
#main.animated_intro_group #content .text .startbutton {
  opacity: 0;
}
#main.animated_intro_group #content .text h1,
#main.animated_intro_group #content .text h2,
#main.animated_intro_group #content .text h3 {
  font-family: inherit;
  color: #106ebe;
  margin-top: 0;
  animation: slide .4s ease-in-out .7s forwards;
}
#main.animated_intro_group #content .text p {
  color: #46556e;
  animation: slide .4s ease-in-out .85s forwards;
}
#main.animated_intro_group #content p:has(.startbutton) {
  margin: 0;
}
#main.animated_intro_group #content .text .startbutton {
  background-color: #f44336;
  font-family: inherit;
  font-size: 1.3em;
  color: white;
  border: none;
  border-radius: 99px;
  margin-top: 1.5em;
  padding: 0.5em 2em;
  cursor: pointer;
/*  box-shadow: 0 0 0 0 #f4433666; */
  animation: slide .4s ease-in-out 1s forwards, pulse 4s 3s infinite;
}

@keyframes fade {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes slide {
  from {transform: translatex(400px); opacity: 0;}
  to {transform: translatex(0); opacity: 1;}
}
@keyframes scale {
  from {opacity: 0; transform: scale(0);}
  to {opacity: 1; transform: scale(1);}
}
@keyframes pulse {
  0% {box-shadow: 0 0 0 0 #f44336;}
  30% {box-shadow: 0 0 0 15px #f4433600;}
  45% {box-shadow: 0 0 0 30px #f4433600;}
  100% {box-shadow: 0 0 0 50px #f4433600;}
}
/* ANIMATED INTROS EIND */

/* FIX NAVMENU BEGIN */
nav #navmenu {
  height: unset !important;
}
/* FIX NAVMENU EIND */

/* CIJFERVRAAG BEGIN */
#content .number_question_parent {
  display: flex;
  width: fit-content;
  gap: 30px;
  background-color: #ebedef;
  border-radius: 99px;
  padding: 12px 35px 10px 35px;
}
#content .number_question_parent .number_question_bottom_row input {
  margin: 3px;
  cursor: pointer;
}
/* CIJFERVRAAG EIND */

/* BERICHTEN VERZAMELPAGINA BEGIN */
a.anchor {
  display: block;
  position: relative;
  top: -100px;
  visibility: hidden;
}
/* BERICHTEN VERZAMELPAGINA EIND */

/* VOORTGANGSBALK DIK (FLOWPAPER, ATCUALISATIE, ETC) BEGIN */
#progress_bar {
  height: 20px;
  margin: 10px 20px;
  border: 1px #cdd7e1 solid;
}
#inner_progress_bar {
  display: inline-block;
  background-color: #00a0e6;
  height: 100%;
}
/* VOORTGANGSBALK DIK (FLOWPAPER, ATCUALISATIE, ETC) EIND */

/* CHECKBOXES EN RADIOBUTTONS BACKEND BEGIN */
input.green {
  display: none;
}
input.green[type=checkbox] + label,
input.green[type=radio] + label {
  display: inline-block;
  background: transparent url(css/images/checkbox.png) 0 2px no-repeat;
  line-height: 28px;
  margin: 0;
  padding: 0 0 0 25px;
  cursor: pointer;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none;
}
input.green[type=radio] + label {
  background: transparent url(css/images/radiobutton.png) 0 2px no-repeat;
}
input.green[type=checkbox]:checked + label {
  background: transparent url(css/images/checkbox_checked.png) 0 2px no-repeat;
}
input.green[type=radio]:checked + label {
  background: transparent url(css/images/radiobutton_checked.png) 0 2px no-repeat;
}
/* CHECKBOXES EN RADIOBUTTONS BACKEND EIND */

/* TTS BEGIN */
.text-to-speech-active {
  border: #a0d246 solid 2px ;
  border-radius: 5px;
  padding: 5px;
}
/* TTS EIND */

/* FIX GEEN NULM11 BEGIN */
.popup-form fieldset.action, .popup-form .fieldset.action {
  margin-top: -37px;
  border: none;
  border-top: 0;
  width: 928px;
  padding: 10px 20px;
}
/* FIX GEEN NULM11 EIND */

/* THEORIE AUDIO BEGIN */
#content > .audioMain {
  margin-top: 12px !important;
}
/* THEORIE AUDIO EIND */

/* RA SLIDER BEGIN */
.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  margin-left: 5px;
  margin-right: 5px;
}
/*
.active, .dot:hover {
  background-color: #717171;
}
*/
.dot:hover {
  background-color: #717171;
}
.dot_container {
  position: relative;
  top: -30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #00000052;
  width: 300px;
  margin: auto;
}
/* RA SLIDER EIND */

/* TUTORIAL/SIMULATIE FLUENT2 BEGIN */
.fluent{
/*  cursor: pointer; */
  padding: 0 12px;
  border-color: rgb(209, 209, 209);
  border-bottom-color: rgb(97, 97, 97);
  border-radius: 4px;
  line-height: 20px;
  height: 32px !important;
  border-style: solid;
  border-width: 1px;
  width: calc(100% - 24px);
  box-shadow: none;
  padding-bottom: 1px;
  background-color: transparent;
}
select.fluent{
  width: 100%;
  height: 35px !important;
}
textarea.fluent{
  padding-top: 5px;
}
.fluent:focus{
  outline: none;
  border-color: rgb(209, 209, 209);
  border-bottom-color: #0f6cbd;
  border-bottom-width: 2px;
  box-shadow: none;
  padding-bottom: 0px;
}
.fluent.focus{
  outline: none;
  border-color: rgb(209, 209, 209);
  border-bottom-color: #0f6cbd;
  border-bottom-width: 2px;
  box-shadow: none;
  padding-bottom: 0px;
}
.fluent.number{
  text-align: right;
}
.m3postfix::after{
  content:"m³";
  position: absolute;
  right: 29px;
  margin-top: 5px;
}
.m3postfix > .fluent{
  padding-right: 30px;
  width: calc(100% - 42px);
}
.pxpostfix::after{
  content:"px";
  position: absolute;
  right: 29px;
  margin-top: 8px;
}
.pxpostfix > .fluent{
  padding-right: 30px;
  width: calc(100% - 44px);
}
h2.card-title{
  box-sizing: border-box;
  color: rgb(36, 36, 36);
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
  margin: 0px;
  margin-top: 15px;
  margin-bottom: 15px;
  text-align: left;
}
.card{
  box-sizing: border-box;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 2px 0px, rgba(0, 0, 0, 0.14) 0px 2px 4px 0px;
  border-radius: 4px;
  padding-right: 15px;
  padding-left: 15px;
  margin-top: 15px;
  margin-bottom: 15px;
  padding-bottom: 15px;
  background-color: #fff;
}
.row > div > .card {
  float: left;
  width: 100%;
}
.fluent_container {
  display: flex;
}
.fluent_container button {
  font-family: 'Noto Sans', NotoR, 'Segoe UI', sans-serif;
}
.fluent_tabs {
  align-items: stretch;
  flex-wrap: nowrap;
  flex-direction: row;
  display: flex;
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  margin: auto;
}
.fluent_tab {
  color: #424242;
  padding-bottom: 0;
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 0;
  grid-row-start: 1;
  grid-column-start: 1;
  overflow-y: hidden;
  overflow-x: hidden;
  line-height: 20px;
  font-weight: 400;
  font-size: 14px;
  box-sizing: border-box;
  margin: 0;
}
.fluent_tab_btn:disabled > .fluent_tab{
  color: #dedede;
}
.fluent_tab.active {
  color: #242424;
  font-weight: 600;
  padding-bottom: 0;
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 0;
  grid-row-start: 1;
  grid-column-start: 1;
  overflow-y: hidden;
  overflow-x: hidden;
  line-height: 20px;
  font-size: 14px;
  box-sizing: border-box;
  margin: 0;
}
.fluent_tab.active:hover::after {
  background-color: #115ea3;
}
.fluent_tab:active::after{
  background-color: #0f548c;
}
.fluent_tab.active::after {
  transform: translateX(0px) scaleX(1);
  transform-origin: left center 0px;
  transition-timing-function: cubic-bezier(0,0,0,1);
  transition-duration: 300ms;
  transition-property: transform;
  right: 12px;
  left: 12px;
  height: 3px;
  bottom: 0px;
  background-color: #0f6cbd;
  z-index: 1;
  position: absolute;
  content: "";
  border-top-left-radius: 1000px;
  border-top-right-radius: 1000px;
  border-bottom-left-radius: 1000px;
  border-bottom-right-radius: 1000px;
}
.fluent_tab:hover::before{
  position: absolute;
  content: "";
  border-top-left-radius: 1000px;
  border-top-right-radius: 1000px;
  border-bottom-left-radius: 1000px;
  border-bottom-right-radius: 1000px;
  background-color: #c7c7c7;
  right: 12px;
  left: 12px;
  height: 3px;
  bottom: 0px;
}
.fluent_tab_btn:disabled > .fluent_tab:hover::before{
  background-color: #f5f5f5;
}
.fluent_tab_btn:active .fluent_tab::before{
  background-color: #b3b3b3;
}
.fluent_tab_reserved{
  visibility: hidden;
  font-weight: 600;
  padding-bottom: 0;
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 0px;
  grid-row-start: 1;
  grid-column-start: 1;
  overflow-y: hidden;
  overflow-x: hidden;
  line-height: 20px;
  font-size: 14px;
  box-sizing: border-box;
  margin: 0;
}
.fluent_tab_btn{
  background-color: transparent;
  padding-bottom: 12px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 12px;
  column-gap: 6px;
  justify-content: center;
  text-transform: none;
  overflow-y: hidden;
  overflow-x: hidden;
  position: relative;
  outline-style: none;
  grid-template-rows: auto;
  grid-template-columns: auto;
  grid-auto-flow: column;
  flex-shrink: 0;
  display: grid;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-top-width: 0px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  align-items: center;
  cursor: pointer;
  line-height: 20px;
  -webkit-appearance: button;
  font-size: 100%;
  margin: 0;
  box-sizing: border-box;
  min-width: 120px;
}
.modal{
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  background-clip: padding-box;
  outline: 0;
  padding: 0px;
  height: 97%;
  display: flex;
  align-items: stretch;
}
.fluent_modal{
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  background-clip: padding-box;
  outline: 0;
  padding: 0px;
  height: 97%;
  display: flex;
  align-items: stretch;
}
#fluent_simulation_container{
  display: flex;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  flex: 1;
}
#fluent_simulation_navigation{
  width: 300px;
  margin-right: 20px;
  border-right: 1px #e5e5e5 solid;
  display: flex;
  flex-direction: column;
}
#fluent_simulation_navigation_title{
  font-size: 14px;
  font-weight: bold;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 20px;
  color: #242424;
}
#fluent_simulation_navigation_body{
  flex: 1;
  overflow-y: auto;
  border: solid 1px #d1d1d1;
  border-radius: 4px;
  margin: 8px;
  margin-top: 8px;
  margin-top: 0px;
}
.fluent_nav_link{
  padding-bottom: 5px;
  padding-top: 5px;
  cursor: pointer;
  padding-left: 20px;
}
.fluent_nav_link:hover{
  background-color: #00a0e6;
  color: #fff;
}
.fluent_nav_link.active{
  background-color: #0f6cbd;
  color: #fff;
}
#fluent_simulation_body{
  flex: 1;
  display: flex;
  flex-direction: column;
}
.fluent_simulation_body{
  flex: 1;
  display: flex;
  flex-direction: column;
}
.fluent_button{
  font-family: 'Noto Sans', NotoR, 'Segoe UI', sans-serif;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 5px;
  padding-bottom: 5px;
  min-width: 96px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;

  line-height: 1.6;
  border-radius: 4px;
  user-select: none;
  color: #242424;
  background-color: #fff;
  border-color: #d1d1d1;
}
.fluent_button:hover{
  color: #242424;
  background-color: #F5F5F5;
  border-color: #c7c7c7;
}
.fluent_button.blue{
  color: #fff;
  background-color: rgb(15, 108, 189);
  border-color: rgb(15, 108, 189);
  height: auto !important;
}
.fluent_button.blue:hover{
  color: #fff;
  background-color: #115ea3;
  border-color: rgba(0, 0, 0, 0);
}
.fluent_button.active{
  border-bottom-color: #0f6cbd;
  border-bottom-width: 2px;
  padding-bottom: 4px;
}
.fluent_button:disabled{
  background-color: #f0f0f0;
  color: #bdbdbd;
  border-color: #d6d6d6;
}
.fluent_button:disabled:hover{
  background-color: #f0f0f0;
  color: #bdbdbd;
  border-color: #d6d6d6;
}
.fluent_title{
  padding: 15px 30px;
  font-size: 32px;
  line-height: 40px;
  font-weight: 600;
}
.fluent_actions{
  display: flex;
  gap: 8px;
  height: fit-content;
  box-sizing: border-box;
  justify-content: flex-end;
  border-top: 1px solid #e5e5e5;
  padding: 10px;
}
.fluent_body{
  flex: 1;
  padding: 10px;
  overflow-y: auto;
}
.form-group{
  margin-bottom: 15px;
}
.form-group > label{
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
}
.fluent_progressbar{
  background-color: #e6e6e6;
  height: 2px;
}
.fluent_progressbar > div{
  background-color: #0f6cbd;
  height: 2px;
}
#simulation_image_placeholder{
  border: 1px #e5e5e5 solid; 
}
#simulation_image_content{
  border: 1px #e5e5e5 solid; 
}
#simulation_area_content{
  border: 1px #e5e5e5 solid; 
}
.fluent_image_selection {
  padding: 30px;
  height: 24vw;
  display: flex
}
.fluent_image_selection > img {
  width: 100%;
  border: 1px #e5e5e5 solid;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  max-height: calc(27vw - 60px);
  align-self: flex-end;
  cursor: pointer;
}
/* TUTORIAL/SIMULATIE FLUENT2 EIND */

/* ALGEMENE MEDIA QUESRIES BEGIN */
/* MIN 1920 PX (NAVIGATIE OPEN) */
@media screen and (min-width: 1800px) {
  #wrapper.md_wrapper.fhd_plus #header,
  #wrapper.md_wrapper.fhd_plus #main,
  #wrapper.md_wrapper.fhd_plus .avg_footer,
  #wrapper.md_wrapper.fhd_plus .footer_copyright {
    margin-left: auto;
    margin-right: calc(50% - 490px);
  }
  #wrapper.md_wrapper.fhd_plus #nav_container {
    right: 390px;
  }
  #wrapper.md_wrapper.fhd_plus #nav_container .open_nav_button {
    display: none;
  }
  #wrapper.md_wrapper.fhd_plus #nav_container nav {
    display: block;
  }
}

@media screen and (max-width: 1550px){
/*
  fieldset, ul#groups {
    width: clamp(950px, 65vw, 1366px);
  }
*/
  .home_wrapper {
    min-height: calc(100vh - 119px);
  }
  #home_main .tiles {
    gap: 24px;
  }
  .dropdown-content {
    left: unset;
    right: -7px;
  }
  .dropdown-content:has(#add_trainer, #add_address) {
    right: unset;
  }
  .tooltip_menu > .tooltip_submenu_under {
    left: unset;
    right: 0;
  }
}

@media screen and (max-width: 1300px) {
  .sidebar {
    width: 49px;
    transition-delay: 0.05s;
  }
  .divcontent {
    padding-left: 60px !important;
  }
  .delay {
    transition-delay: 0.05s;
  }
/*
  .sidebar .folders {
    display: none;
  }
  .sidebar .folderstitle {
    display: none;
  }
*/
  .sidebar .folders,
  .sidebar .folderstitle {
    opacity: 0;
  }
  .sidebar .foldersicon {
    display: block;
  }
  .sidebar:hover {
    width: 270px;
  }
/*
  .sidebar:hover .folders {
    display: block;
  }
  .sidebar:hover .folderstitle {
    display: block;
  }
*/
  .sidebar:hover .folders,
  .sidebar:hover .folderstitle {
    opacity: 1;
  }
  .sidebar:hover .foldersicon {
    display: none;
  }
  /*
  .folderbar {
    width: 100%;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
    padding-left: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    transition: background-color 0.5s, color 0.5s;
  }
  .folderbar > img {
    margin-right: 16px;
    margin-left: 10px;
    vertical-align: -4px;
  }
  .folderbar:hover {
    background-color: rgba(180, 180, 180, 0.8);
    color: #ffffff;
  }
  .activefolderbar {
    width: 100%;
    font-weight: bold;
    color: #464646;
    text-decoration: none;
    cursor: pointer;
    padding-left: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: rgba(255, 190, 0, 0.9);
    transition: background-color 0.5s, color 0.5s;
    -webkit-transition: background-color 0.5s, color 0.5s;
  }
  .activefolderbar > img {
    margin-right: 16px;
    margin-left: 10px;
    vertical-align: -4px;
  }
  .activefolderbar:hover {
    background-color: rgba(180, 180, 180, 0.8);
    color: #464646;
  }
  */
}

@media screen and (max-width: 1024px) {
  .portal_main #content.trainer_data {
    font-size: 0.9em;
  }
  .portal_main #content.trainer_data .trainer_data_overview td.module_name {
    min-width: unset;
  }
}
/* ALGEMENE MEDIA QUERIES EINDE */

.list_number{
    width: 25px;
}

.accordion {
    text-align: center;
    flex-direction: column;
    display: flex;
    padding: 0px 10px;
    margin-top: 5px;
}

.accordion > button::before {
    content: "\f054";
    font: normal normal normal 14px/1 FontAwesome;
    float: left;
    margin-left: -20px;
    cursor: pointer;
}

.accordion.active > button::before {
    content: "\f078";
    margin-top: -2px;
}

.accordion > button {
    background-color: transparent;
    border-width: 0px;
    border-bottom: 1px black solid;
    height: 8px;
    line-height: 10px;
    margin-bottom: 8px;
    margin-left: 20px;
    cursor: pointer;
}

.accordion > button > span {
    background-color: #FFF;
    padding: 0px 10px;
    margin-right: 20px;
}

.accordion > div {
    display: none;
    margin-top: 10px;
}

#simulation_image_preview:hover{
    cursor: zoom-in;
}

#simulation_image_preview.expanded:hover{
    cursor: zoom-out;
}

.sidebar {
    display: flex;
    flex-direction: column;
    height: calc(100% - 100px);
}

.sidebar_with_icons {
    height: 100%;
}

.sidebar > .folders {
    flex: 1;
}

.checkbox_blue{
    cursor: pointer;
    display: flex;
    gap: 10px;
    align-items: center;
}

#filter_div.calendar.overview {
  right: 114px;
  position: absolute;
  top: -31px;
}
#filter_div.calendar.week {
  right: 57px;
  position: absolute;
  top: -31px;
}
#filter_div.calendar.month {
  right: 0;
  position: absolute;
  top: -31px;
}

.category_span.calendar > div {
  display: inline-block;
}

.category_span.calendar {
  position: absolute;
  right: 0px;
  top: -31px;
}

.category_span.calendar > .calendar a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #9bafc3;
  width: 54px;
  height: 28px;
  border-radius: 4px;
  margin-left: 3px;
}

.category_span.calendar > .calendar.calendar_active a {
  background-color: #00a0e6;
}

.fluent_select_multiple > label {
  display: flex;
  cursor: pointer;
  align-items: center;
  position: relative;
  padding: 3px 8px;
  column-gap: 4px;
  cursor: pointer;
}

.fluent_select_multiple > label:hover {
  background-color: #f5f5f5;
}

.fluent_select_multiple{
  position: absolute;
  max-width: 1920px;
  max-height: 883px;
  border-radius: 4px;
  box-shadow: 0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14);
  row-gap: 2px;
  overflow-y: auto;
  min-width: 160px;
  flex-direction: column;
  display: flex;
  outline: 1px solid transparent;
  text-align: left;
  line-height: 14px;
  width: calc(100% - 38px);
  text-overflow: ellipsis;
  background-color: #FFF;
  max-height: 310px;
  font-size: 12px;
  padding: 4px;
  z-index: 3;
}

.fluent_select_multiple > label > input[type=checkbox] {
  width: 13px;
  height: 13px;
  border: 1px solid #616161;
}

.fluent_select_multiple > span {
    color: rgb(136, 136, 136);
    padding: 4px 8px;
}

.fluent_chevron:after {
  content: "\f078";
  font-family: FontAwesome;
  width: 0px;
  float: right;
  top: 10px;
  position: relative;
  right: 20px;
  cursor: pointer;
  color: #000;
  font-size: 9px;
}

.fluent_select_placeholder {
    padding-right: 24px;
    width: calc(100% - 38px);
}

.fluent_body > h2:first-of-type {
    margin-top: 0px;  
    font-weight: 600;
    font-size: 20px;
}

.fluent_list > div {
    border-bottom: 1px solid #ebebeb;
    display: flex;
}

.fluent_list > div:first-of-type {
    font-weight: 600;
}

.fluent_list > div > span {
    padding: 4px 12px;
    display: inline-block;
}

.no_fixed_height{
    height: auto;
}

.fluent_button_safety_timer{
    flex-direction: column;
}

.fluent_button_safety_timer_slider{
  border: 1px rgb(15, 108, 189) solid;
  height: 0px;
  margin-bottom: -2px;
  position: relative;
  top: 4px;
  width: 0px;
  transition: width 3s;
  transition-timing-function: linear;
}

.fluent_button_safety_timer_slider.start{
    width: calc(100% + 22px);
}

.fluent_body a {
    color: #115ea3;
    cursor: pointer;
    text-decoration-line: none;
}

.fluent_body a:hover {
    color: #0f548c;
    text-decoration-line: underline;
}

.fluent_slider {
    top: 0px;
    left: 0px;
    box-sizing: border-box;
    cursor: pointer;
    height: 100%;
    margin: 0px;
    opacity: 0;
    position: absolute;
    width: 56px;
}

.fluent_slider ~ .fluent_slider_indicator {
    border-radius: 10000px;
    border: 1px solid;
    line-height: 0;
    box-sizing: border-box;
    fill: currentcolor;
    flex-shrink: 0;
    font-size: 18px;
    height: 20px;
    margin: 8px;
    pointer-events: none;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.33,0,0.67,1);
    transition-property: background, border, color;
    width: 40px;
}

.fluent_slider ~ .fluent_slider_indicator > svg {
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.33,0,0.67,1);
    transition-property: transform;
}

.fluent_slider:not(:checked) ~ .fluent_slider_indicator {
    color: #616161;
    border-color: #616161;
}

.fluent_slider:checked ~ .fluent_slider_indicator {
    background-color: #0f6cbd;
    color: #ffffff;
    border-color: transparent;
}

.fluent_slider:checked ~ .fluent_slider_indicator > svg {
    transform: translateX(20px);
}

.fluent_slider_container {
    align-items: flex-start;
    box-sizing: border-box;
    display: flex;
    position: relative;
}

.fluent_checkbox {
    left: 0px;
    box-sizing: border-box;
    cursor: pointer;
    height: 100%;
    margin: 0px;
    opacity: 0;
    position: absolute;
    top: 0px;
    width: 32px;
}


.fluent_checkbox + .fluent_checkbox_indicator {
    align-self: flex-start;
    box-sizing: border-box;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-style: solid;
    border-width: 1px;
    border-radius: 2px;
    margin: 8px;
    fill: currentcolor;
    pointer-events: none;
    font-size: 12px;
    height: 16px;
    width: 16px;
}

.fluent_checkbox + .fluent_checkbox_indicator > svg {
    display: none;
}

.fluent_checkbox:checked + .fluent_checkbox_indicator > svg {
    display: block;
}

.fluent_checkbox:checked + .fluent_checkbox_indicator {
    color: #ffffff;
    background-color: #0f6cbd;
    border-color: #0f6cbd;
}

.fluent_checkbox + .fluent_checkbox_indicator + label{
    padding-bottom: 8px;
    padding-left: 4px;
    padding-right: 8px;
    padding-top: 8px;
    margin-bottom: -2px;
    margin-top: -2px;
    cursor: pointer;
    color: #616161;
}

.fluent_checkbox:hover + .fluent_checkbox_indicator + label{
    color: #485058;
}

.fluent_checkbox:checked + .fluent_checkbox_indicator + label{
    color: #485058;
}

.fluent_checkbox:disabled + .fluent_checkbox_indicator{
    cursor: inherit;
    color: #bdbdbd;
    border-color: #e0e0e0;
}

.fluent_checkbox:disabled + .fluent_checkbox_indicator + label{
    cursor: inherit;
    color: #bdbdbd;
}

.fluent_checkbox + .fluent_checkbox_indicator + .fluent_checkbox_partial_indicator {
    display: none;
}

.fluent_checkbox.partial + .fluent_checkbox_indicator {
    display: none;
}

.fluent_checkbox.partial + .fluent_checkbox_indicator + .fluent_checkbox_partial_indicator {
    display: flex;
    color: #0f6cbd;
    background-color: #ffffff;
    border-color: #0f6cbd;
    align-self: flex-start;
    box-sizing: border-box;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-style: solid;
    border-width: 1px;
    border-radius: 2px;
    margin: 8px;
    fill: currentcolor;
    pointer-events: none;
    font-size: 12px;
    height: 16px;
    width: 16px;
}

.fluent_checkbox + .fluent_checkbox_indicator + .fluent_checkbox_partial_indicator + label{
    padding-bottom: 8px;
    padding-left: 4px;
    padding-right: 8px;
    padding-top: 8px;
    margin-bottom: -2px;
    margin-top: -2px;
    cursor: pointer;
    color: #616161;
}

.fluent_checkbox:hover + .fluent_checkbox_indicator + .fluent_checkbox_partial_indicator + label{
    color: #485058;
}

.fluent_checkbox:checked + .fluent_checkbox_indicator + .fluent_checkbox_partial_indicator + label{
    color: #485058;
}

.fluent_checkbox.partial + .fluent_checkbox_indicator + .fluent_checkbox_partial_indicator + label{
    color: #485058;
}

.fluent_checkbox_container {
    align-items: flex-start;
    box-sizing: border-box;
    display: flex;
    position: relative;
}

.fluent_warning_container {
    border: 1px #fdcfb4 solid;
    border-radius: 4px;
    background-color: #fff9f5;
    position: relative;
    padding: 8px 12px;
    margin-bottom: 14px;
    min-height: 36px;
    display: flex;
    align-items: flex-start;
}

.fluent_warning {
    flex-grow: 1;
}

.fluent_warning_indicator {
    flex: 0 0 28px;
    font-size: 20px;
    color: #bc4b09;
}