@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;
  }
  a.module_link {
    text-decoration: underline;
  }
}
/* 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(#wrapper.md_wrapper) {
  padding-top: 0 !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: block;  /* ultrawide fix (was inline-block) */
  margin: 15px 0 0 0;
}
.group_span {
  display: block;  /* ultrawide fix (was 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;
  margin-top: 0;  /* ultrawide fix (toegevoegd) */
  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;
}
.popup-form .webinar_calendar_list_body_week .dropdown-content {
    position-area: bottom span-right;
    position: fixed;
    top: unset;
    left: unset;
    right: unset;
}
.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;
}
.tooltip.has_pill .grey_pill,
.tooltip.has_pill .blue_pill {
  right: -5px;
}

.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;
}

/* Trophy block. Displays flow in a wrapping row so a block of any width fills up
   evenly, and a display that is switched off simply leaves the flow. */
.widget_throphy_block {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
    justify-content: center;
}

.widget_throphy {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}

.widget_throphy img {
    display: block;
    width: calc(2 * var(--cell-height) - 30px);
    height: calc(2 * var(--cell-height) - 30px);
    object-fit: contain;
}

.widget_throphy_grayscale img {
    filter: contrast(0%);
}

/*
  The player card under the text of a podcast screen (type 318). The screen itself is laid out
  like any other picture screen, through #mccontent1 and #mccontent2. .audioMain is left alone:
  that bar belongs to the intro voiceover and both players are meant to coexist.
*/
.podcast-player {
  max-width: 460px;
  margin: 20px 0 8px;
  background: #ffffff;
  border: 1px solid #dce6ee;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(26, 115, 199, 0.12);
  font-family: Segoe UI, Arial, sans-serif;
  overflow: hidden;
}
.podcast-player .podcast-player__bar {
  height: 5px;
  background: linear-gradient(90deg, #1a73c7 0%, #4a9be0 55%, #e94b35 100%);
}
.podcast-player .podcast-player__body {
  padding: 22px 24px 24px;
}
.podcast-player .podcast-player__header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 0 0 16px 0;
}
.podcast-player .podcast-player__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: #e94b35;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(233, 75, 53, 0.35);
  flex: none;
}
.podcast-player .podcast-player__title {
  font-size: 19px;
  font-weight: 600;
  color: #1a73c7;
  letter-spacing: 0.2px;
  line-height: 1.2;
}
.podcast-player .podcast-player__audio {
  width: 100%;
  height: 44px;
  display: block;
  border-radius: 22px;
  background: #eaf3fb;
  outline: none;
}
.podcast-player .podcast-player__audio::-webkit-media-controls-enclosure {
  background: #eaf3fb;
  border-radius: 22px;
}
.podcast-player .podcast-player__audio::-webkit-media-controls-panel {
  background: #eaf3fb;
  padding: 0 10px;
}
.podcast-player .podcast-player__audio::-webkit-media-controls-overflow-button {
  display: none;
}
.podcast-player .podcast-player__audio::-webkit-media-controls-play-button,
.podcast-player .podcast-player__audio::-webkit-media-controls-mute-button {
  filter: invert(31%) sepia(74%) saturate(1583%) hue-rotate(184deg) brightness(92%) contrast(88%);
  transform: scale(1.15);
}
.podcast-player .podcast-player__audio::-webkit-media-controls-current-time-display,
.podcast-player .podcast-player__audio::-webkit-media-controls-time-remaining-display {
  color: #1a73c7;
  font-family: Segoe UI, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-shadow: none;
}

/* ==================================================================== *
 * The media row of the question editor: the bar carrying an attached flowpaper or podcast.
 *
 * Shared by both work forms so they cannot drift apart. The progress bar sits under the row
 * instead of replacing its contents, so the author keeps seeing which file is being replaced
 * while it uploads. The podcast section below folds a player into this same row and raises the
 * specificity of the two rules that decide whether the strip shows.
 * ==================================================================== */

.media_row {
    list-style-type: none;
    padding: 0;
    margin: 8px 0 0 0;
}

.media_row__item {
    max-width: none;
    width: calc(100% - 10px) !important;
    background: #ffffff;
    border: 1px solid #dce6ee;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(26, 115, 199, 0.08);
    padding: 0;
    overflow: hidden;
}

.media_row__content {
    display: flex;
    align-items: center;
    min-height: 38px;
    width: 100%;
    padding: 4px 4px 4px 14px;
    box-sizing: border-box;
}

.media_row__label {
    display: inline-block;
    flex: 1 1 auto;
    min-width: 0;
    color: #5a6b78;
    font-size: 13px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media_row__label b {
    color: #1a73c7;
    font-weight: 600;
}

.media_row__actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 4px;
    padding-left: 10px;
    padding-right: 6px;
}

.media_row__actions a,
.media_row__actions img {
    border-radius: 6px;
}

.media_row__actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    transition: background-color 0.15s ease;
}

.media_row__actions a:hover {
    background-color: #eaf3fb;
}

/* Under the row, full width, and out of the flow until an upload starts. */
.media_row__progress {
    display: none;
    width: 100%;
    height: 4px;
    background: #eaf3fb;
}

.media_row__progress span {
    display: block;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #1a73c7 0%, #4a9be0 60%, #e94b35 100%);
    transition: width 0.2s ease;
}

/* The preview player of an attached podcast, directly under its row. */
.media_row__player {
    width: 100%;
    height: 38px;
    margin-top: 8px;
    border-radius: 19px;
    background: #eaf3fb;
    outline: none;
}

/* What the generator is doing, beside the file name. Empty and therefore invisible whenever
   nothing is running, which is most of the time. */
.media_row__status {
    margin-left: 10px;
    color: #6b7a90;
    font-style: italic;
}

/* ==================================================================== *
 * The podcast generator popup (question type 318) and the compact player.
 *
 * The popup renders as a fragment injected into this page, so it has no head of its own and
 * reads its styling from here. The question editor shows the same player folded into its media
 * row. Both are reached from the author environment, which is why these rules live in the
 * backend stylesheet rather than in a file of their own.
 *
 * Every selector is anchored on a podcast_ class. The learner side of the same feature uses
 * hyphens, .podcast-player further up this file, and is a separate set.
 * ==================================================================== */

.podcast_body {
    --podcast-text: #1E2430;
    --podcast-text-muted: #4A5260;
    --podcast-text-soft: #5B6472;
    --podcast-line: #E3E6EB;
    --podcast-accent: #1A5FB4;
    --podcast-side: #F7F8FA;
    color: var(--podcast-text);
}

/* The popup body scrolls rather than growing past the screen on a forty turn script. The row
   carries the scaffolding's own 'overflow' class for that; this is the height rule that goes with
   it, and it has to outrank the scaffolding's '.flex_rows > div { min-height: min-content }' or the
   row grows to fit every turn regardless. */
.flex_rows > .podcast_body {
    min-height: 0;
    overflow-x: hidden;
}

/* The script column breathes; the sound column sits on a light grey ground, split off by a line */
.podcast_main {
    min-width: 0;
    padding: 4px 8px 0 0;
}

/* Fixed at the width it is given: a long turn in the list would otherwise squeeze it */
.podcast_side {
    flex: 0 0 300px;
    min-width: 300px;
    box-sizing: border-box;
    align-self: stretch;
    margin: -16px -16px -16px 0;
    padding: 20px;
    background: var(--podcast-side);
    border-left: 1px solid var(--podcast-line);
}

.podcast_side .flex_rows {
    gap: 16px;
}

/* A button that sits beside a field lines up with the bottom of that field, not with its label */
.podcast_align_end {
    align-self: flex-end;
}

/* One colour per speaker, in the order PodcastScriptFormat::SPEAKERS lists them, shared by the
   chip on a line, the stripe beside it and the share bar in the header. */
.podcast_speaker--0 { --podcast-speaker: #D85A30; --podcast-speaker-bg: #FAECE7; --podcast-speaker-text: #712B13; }
.podcast_speaker--1 { --podcast-speaker: #1D9E75; --podcast-speaker-bg: #E1F5EE; --podcast-speaker-text: #085041; }
.podcast_speaker--2 { --podcast-speaker: #7F77DD; --podcast-speaker-bg: #EEEDFE; --podcast-speaker-text: #3C3489; }
.podcast_speaker--other { --podcast-speaker: #888780; --podcast-speaker-bg: #F1EFE8; --podcast-speaker-text: #444441; }

/* ------------------------------------------------------------------ *
 * Header above the script
 * ------------------------------------------------------------------ */

/* Two lines in reading size: the source, then the facts about the episode. The share bar under
   them is the only detail, with the exact split in its tooltip. */
.podcast_header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.podcast_header__title {
    font-size: 15px;
    font-weight: 600;
}

.podcast_header__module,
.podcast_header__facts {
    color: var(--podcast-text-muted);
    font-size: 14px;
}

.podcast_header__share {
    display: flex;
    height: 4px;
    margin-top: 4px;
    border-radius: 2px;
    overflow: hidden;
}

.podcast_header__bar {
    background: var(--podcast-speaker);
}

/* Writing a whole new script, the larger step, at the foot of the column */
.podcast_again_row {
    padding-top: 12px;
    border-top: 1px solid var(--podcast-line);
}

/* ------------------------------------------------------------------ *
 * The turns
 * ------------------------------------------------------------------ */

.podcast_body .fluent_button.podcast_button--danger {
    color: #A12C2C;
}

/* The turns scroll on their own, so the edit strip and the rewrite line under them stay in view
   whichever turn of a forty turn script is open. It gives up its own height before the rows under
   it do, which is what keeps the edit strip in view once a turn is opened, without a rule that has
   to recognise a hidden element by the style attribute it happens to carry. The min-height has to
   outrank the scaffolding's '.flex_rows > div { min-height: min-content }', which otherwise wins
   over the max-height. */
.flex_rows > .podcast_script_row {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    max-height: 40vh;
    overflow-y: auto;
    border: 1px solid var(--podcast-line);
    border-radius: 8px;
}

/* The box scrolls, not the list inside it: a paginated list keeps a scroll area of its own at a
   fixed height, which left empty room under it inside the box. Only a list that pages does, and
   this one only pages because that is the one way a core table fetches its rows again. */
.podcast_script_row .fluent_list_container,
.podcast_script_row .fluent_list_body {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* The transcript draws its own lines edge to edge, so the list's line padding goes */
.podcast_script_row .fluent_list_line {
    padding: 0;
    margin: 0;
    border: 0;
    border-bottom: 1px solid #EEF0F3;
    border-radius: 0;
}

.podcast_script_row .fluent_list_line.selected .podcast_turn {
    background: #E8EEF7;
}

/* A turn reads as a line of a transcript: the speaker as a chip, the words beside it, a stripe in
   the speaker's colour down the left. */
.podcast_turn {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 10px 14px;
    border-left: 3px solid var(--podcast-speaker);
    background: #FFFFFF;
    font-size: 14px;
    line-height: 1.5;
}

.podcast_speaker {
    align-self: start;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--podcast-speaker-bg);
    color: var(--podcast-speaker-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
}

.podcast_turn__message {
    white-space: pre-wrap;
}

.podcast_turn__message--empty {
    color: var(--podcast-text-soft);
    font-style: italic;
}

/* Written or changed by the last script job and not opened since */
.podcast_turn--changed {
    background: #FBF0D9;
}

/* The script as it is being written. Hidden until a script job sends its first turn; then it
   takes the place of the list, in the same box, and scrolls along with the newest turn. */
.flex_rows > .podcast_live_row {
    display: none;
}

.podcast_drafting .flex_rows > .podcast_script_row {
    display: none;
}

.podcast_drafting .flex_rows > .podcast_live_row {
    display: block;
    flex: 0 0 auto;
}

.podcast_live {
    max-height: 40vh;
    overflow-y: auto;
    border: 1px solid var(--podcast-line);
    border-radius: 8px;
}

.podcast_live__line {
    border-bottom: 1px solid #EEF0F3;
}

.podcast_live__cursor {
    display: inline-block;
    width: 7px;
    height: 1em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: currentColor;
    animation: podcast_blink 1s steps(1) infinite;
}

@keyframes podcast_blink {
    50% { opacity: 0; }
}

/* The turn under edit and the rewrite line, set apart from the list above them */
.podcast_edit_strip {
    padding-top: 12px;
    border-top: 1px solid var(--podcast-line);
}

.podcast_edit_strip textarea {
    width: 100%;
    resize: none;
}

/* ------------------------------------------------------------------ *
 * The episode
 * ------------------------------------------------------------------ */

/* Progress container: the player and whatever the poller puts in sit under each other. The player
   is an inline element, so without this they share a line. */
.podcast_progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.podcast_progress .podcast_progress__player {
    width: 100%;
}

/* ------------------------------------------------------------------ *
 * The compact player: a play button, a running time and a progress line along the bottom.
 *
 * .podcast_bar is the marker the script looks for and carries no layout, so a row that already
 * has a shape of its own keeps it. .podcast_bar--card is the standalone shape the popup uses,
 * and the media_row rules at the end are how the same parts fold into the question editor row.
 * ------------------------------------------------------------------ */

.podcast_bar {
    position: relative;
}

.podcast_bar--card {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    padding: 8px 14px 12px 10px;
    border: 1px solid #dce6ee;
    border-radius: 8px;
    background: #f6fafd;
    overflow: hidden;
}

.podcast_bar__play {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #1a73c7;
    color: #ffffff;
    cursor: pointer;
}

.podcast_bar__play:hover {
    background: #155ea3;
}

.podcast_bar__play svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
    /* The triangle reads as centred only when it is nudged off centre */
    margin-left: 2px;
}

/* Which of the two glyphs is on show follows the audio, not a class the script has to remember to
   take off again. */
.podcast_bar__pause_icon,
.podcast_bar.is_playing .podcast_bar__play_icon {
    display: none;
}

.podcast_bar.is_playing .podcast_bar__pause_icon {
    display: block;
    margin-left: 0;
}

.podcast_bar__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #2c3e50;
}

.podcast_bar__time {
    flex: 0 0 auto;
    color: #6b7a90;
    font-variant-numeric: tabular-nums;
}

/* Wide enough to hit: the whole strip seeks. In the card it hangs on the bottom edge; in a row that
   has its own layout it simply sits at the end, which is the same place. */
.podcast_bar__progress {
    display: block;
    width: 100%;
    height: 6px;
    background: #e3ecf4;
    cursor: pointer;
}

.podcast_bar--card .podcast_bar__progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
}

/* It takes focus and answers to the arrow keys, so it has to say so when it has focus. Inside the
   bar rather than around it, because the strip sits on the very edge. */
.podcast_bar__progress:focus-visible {
    outline: 2px solid #1a73c7;
    outline-offset: -2px;
}

.podcast_bar__progress_fill {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #1a73c7 0%, #4a9be0 60%, #e94b35 100%);
}

/* The element itself stays in the document because everything is read off it, but the native
   controls are replaced by the parts around it. */
.podcast_bar__audio {
    display: none;
}

/* Nothing to play yet: the row keeps its shape, the player parts step aside. */
.podcast_bar.is_empty .podcast_bar__play,
.podcast_bar.is_empty .podcast_bar__time,
.podcast_bar.is_empty .podcast_bar__progress {
    display: none;
}

/* In the question editor row the strip is also a media_row__progress, which media_row.css keeps out
   of the flow until an upload starts. Anchored on the row so the player's answer wins on
   specificity rather than on which of the two files was loaded last. */
.media_row__item.podcast_bar.is_empty .podcast_bar__progress {
    display: none;
}

/* Folded into the media row of the question editor. That row already fixes the height of its line,
   the indent it starts at and the size of the buttons at its end, so the player only says how it
   joins in: the file name stands clear of the play button instead of touching it, and the strip
   lies on the bottom edge of the row the way it does in the card. In the flow it would add its own
   line and leave this row taller than the ones beside it, and it takes the four pixels the row
   already uses for the upload so it clears the button and the icons instead of cutting across
   them. */
.media_row__item.podcast_bar .podcast_bar__play {
    margin-right: 10px;
}

.media_row__item.podcast_bar .podcast_bar__progress {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: 4px;
}