@charset "UTF-8";
:root {
  --uitwerking-side-padding: 60px;
}

/*
    360×800
    360×780
    360×640
	375×812
    390×844
	393×873
    414×896
    412×915

	768px+ -> tablets

	810×1080

    1280×720
	1366×768
	1440×900
    1536×864
    1600×900
	1920×1080
    2560×1440




*/
/**
 * @param $font-weight: 300 = light, 400 = regular, 700 = solid
 */
@font-face {
  font-family: "pepicon3";
  src: url("/fonts/pepicon3.eot?9fgvyp");
  src: url("/fonts/pepicon3.eot?9fgvyp#iefix") format("embedded-opentype"), url("/fonts/pepicon3.ttf?9fgvyp") format("truetype"), url("/fonts/pepicon3.woff?9fgvyp") format("woff"), url("/fonts/pepicon3.svg?9fgvyp#pepicon3") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.pepicon3::before {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "pepicon3" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.pepicon3-doorlooptijd::before {
  content: "\e919";
}

.pepicon3-verborgen::before {
  content: "\e95e";
}

.pepicon3-radio-off::before {
  content: "\e960";
}

.pepicon3-radio-on::before {
  content: "\e961";
}

.pepicon3-beker::before {
  content: "\e958";
}

.pepicon3-beker-slash::before {
  content: "\e95a";
}

.pepicon3-stappen::before {
  content: "\e94f";
}

.pepicon3-star-solid::before {
  content: "\e938";
}

.pepicon3-star-light::before {
  content: "\e939";
}

.pepicon3-star-half-stroke-regular::before {
  content: "\e93b";
}

.pepicon3-views::before {
  content: "\e904";
}

.pepicon3-grid::before {
  content: "\e93c";
}

.pepicon3-Roll::before {
  content: "\e93f";
}

.pepicon3-reply::before {
  content: "\e937";
}

.pepicon3-download::before {
  content: "\e90b";
}

.pepicon3-uitloggen1::before {
  content: "\e951";
}

.pepicon3-uitloggen::before {
  content: "\e923";
}

.pepicon3-inloggen::before {
  content: "\e92c";
}

.pepicon3-sorteren::before {
  content: "\e936";
}

.pepicon3-vakken::before {
  content: "\e92d";
}

.pepicon3-aankopen::before {
  content: "\e92e";
}

.pepicon3-voorwaarden::before {
  content: "\e92f";
}

.pepicon3-achtergrond::before {
  content: "\e930";
}

.pepicon3-eigen-achtergrond::before {
  content: "\e931";
}

.pepicon3-privacy::before {
  content: "\e932";
}

.pepicon3-gegevens::before {
  content: "\e933";
}

.pepicon3-vraagteken::before {
  content: "\e934";
}

.pepicon3-square-off::before {
  content: "\e918";
}

.pepicon3-square-on::before {
  content: "\e962";
}

.pepicon3-check::before {
  content: "\e91a";
}

.pepicon3-square-solid-on::before {
  content: "\e908";
}

.pepicon3-grip::before {
  content: "\e90c";
}

.pepicon3-hamburger::before {
  content: "\e95c";
}

.pepicon3-vlag::before {
  content: "\e909";
}

.pepicon3-niet-gestart::before {
  content: "\e90a";
}

.pepicon3-docent::before {
  content: "\e906";
}

.pepicon3-docent-open::before {
  content: "\e940";
}

.pepicon3-student-open::before {
  content: "\e941";
}

.pepicon3-student::before {
  content: "%";
}

.pepicon3-student-large::before {
  content: "&";
}

.pepicon3-text-block::before {
  content: ")";
}

.pepicon3-table::before {
  content: "K";
}

.pepicon3-tekst-kleur::before {
  content: "£";
}

.pepicon3-tekst-markeren::before {
  content: ",";
}

.pepicon3-function-regular::before {
  content: "\e903";
}

.pepicon3-chevron-2x::before {
  content: "y";
}

.pepicon3-circle-check1::before {
  content: "s";
}

.pepicon3-circle-chevron-2x1::before {
  content: "u";
}

.pepicon3-circle-vraagteken1::before {
  content: "M";
}

.pepicon3-dashboard::before {
  content: "#";
}

.pepicon3-openen::before {
  content: "(";
}

.pepicon3-openen-large::before {
  content: "*";
}

.pepicon3-notes::before {
  content: "\e922";
}

.pepicon3-expand::before {
  content: "+";
}

.pepicon3-minimize::before {
  content: "-";
}

.pepicon3-nakijkdocent::before {
  content: "\e91b";
}

.pepicon3-computer::before {
  content: "0";
}

.pepicon3-blok2::before {
  content: '"';
}

.pepicon3-plus::before {
  content: "Q";
}

.pepicon3-i2::before {
  content: "\e953";
}

.pepicon3-icircle::before {
  content: "\e963";
}

.pepicon3-paper::before {
  content: "\e92a";
}

.pepicon3-paperclip::before {
  content: "\e92b";
}

.pepicon3-instellingen-solid::before {
  content: "\e95f";
}

.pepicon3-instellingen::before {
  content: "ˆ";
}

.pepicon3-instellingen-open::before {
  content: "\e935";
}

.pepicon3-chevron-solid::before {
  content: "\e924";
}

.pepicon3-chevron-solid-left::before {
  content: "\e925";
}

.pepicon3-plus-solid::before {
  content: "\e90f";
}

.pepicon3-close-small-18px::before {
  content: "3";
}

.pepicon3-help::before {
  content: "@";
}

.pepicon3-close-large-22px::before {
  content: "4";
}

.pepicon3-circle-arrow::before {
  content: "5";
}

.pepicon3-exclamation::before {
  content: "\e911";
}

.pepicon3-info::before {
  content: "\e902";
}

.pepicon3-blokkeer::before {
  content: "\e91c";
}

.pepicon3-chevron-left-light::before {
  content: "\e93d";
}

.pepicon3-chevron-right-light::before {
  content: "\e93e";
}

.pepicon3-reset::before {
  content: "\e952";
}

.pepicon3-history-regular::before {
  content: "\e928";
}

.pepicon3-chevron-down::before {
  content: "\e915";
}

.pepicon3-chevron-up::before {
  content: "\e916";
}

.pepicon3-chevron-left::before {
  content: "\e917";
}

.pepicon3-chevron::before {
  content: "O";
}

.pepicon3-chevron-light::before {
  content: "\e90d";
}

.pepicon3-pijl-links::before {
  content: "<";
}

.pepicon3-pijl-rechts::before {
  content: "\e912";
}

.pepicon3-pijl-rechts-dun::before {
  content: "\e964";
}

.pepicon3-archive::before {
  content: "?";
}

.pepicon3-trashcan::before {
  content: "U";
}

.pepicon3-label::before {
  content: "z";
}

.pepicon3-edit::before {
  content: "\e93a";
}

.pepicon3-edit-circle::before {
  content: "\e95b";
}

.pepicon3-duplicate::before {
  content: "X";
}

.pepicon3-print::before {
  content: "Y";
}

.pepicon3-excel::before {
  content: "\e905";
}

.pepicon3-YouTube::before {
  content: "6";
}

.pepicon3-OneDrive::before {
  content: "7";
}

.pepicon3-Google-Drive::before {
  content: "8";
}

.pepicon3-Dropbox::before {
  content: "9";
}

.pepicon3-film::before {
  content: "A";
}

.pepicon3-open-boek::before {
  content: "2";
}

.pepicon3-foto::before {
  content: "B";
}

.pepicon3-instructie::before {
  content: "C";
}

.pepicon3-bestand::before {
  content: "D";
}

.pepicon3-links::before {
  content: "E";
}

.pepicon3-opdracht::before {
  content: "F";
}

.pepicon3-taak::before {
  content: "G";
}

.pepicon3-huiswerk::before {
  content: "I";
}

.pepicon3-sound::before {
  content: "\e90e";
}

.pepicon3-key::before {
  content: "\e914";
}

.pepicon3-evaluatie::before {
  content: "L";
}

.pepicon3-plusdocument::before {
  content: "\e927";
}

.pepicon3-laatst-gewijzigd::before {
  content: "\e926";
}

.pepicon3-live::before {
  content: ":";
}

.pepicon3-module::before {
  content: "\e910";
}

.pepicon3-notificatie2::before {
  content: "P";
}

.pepicon3-notificatie::before {
  content: "p";
}

.pepicon3-werk::before {
  content: "S";
}

.pepicon3-interesse::before {
  content: "ƒ";
}

.pepicon3-opleiding::before {
  content: "R";
}

.pepicon3-blocks::before {
  content: "W";
}

.pepicon3-serie::before {
  content: "\e913";
}

.pepicon3-upload::before {
  content: "Z";
}

.pepicon3-docbox::before {
  content: "j";
}

.pepicon3-bronnen::before {
  content: "|";
}

.pepicon3-export::before {
  content: "n";
}

.pepicon3-meerverticaal::before {
  content: "]";
}

.pepicon3-groep::before {
  content: "^";
}

.pepicon3-groep-netwerk::before {
  content: "\e91d";
}

.pepicon3-domeinen::before {
  content: "b";
}

.pepicon3-delen::before {
  content: "c";
}

.pepicon3-delen_2::before {
  content: "\e957";
}

.pepicon3-publiceer::before {
  content: "\e950";
}

.pepicon3-berichten::before {
  content: "d";
}

.pepicon3-cando::before {
  content: "e";
}

.pepicon3-achtergrondinstellingen::before {
  content: "f";
}

.pepicon3-foutantwoord::before {
  content: "\e954";
}

.pepicon3-goedantwoord::before {
  content: "h";
}

.pepicon3-smiley::before {
  content: "k";
}

.pepicon3-netwerk::before {
  content: "l";
}

.pepicon3-agenda::before {
  content: "m";
}

.pepicon3-pop-melding::before {
  content: "!";
}

.pepicon3-beoordeling::before {
  content: "H";
}

.pepicon3-feedback-desk::before {
  content: "\e921";
}

.pepicon3-beoordelingbekijken::before {
  content: "o";
}

.pepicon3-beoordelingbekijken1::before {
  content: "t";
}

.pepicon3-commentaar::before {
  content: "‚";
}

.pepicon3-contact-plus::before {
  content: "\e91e";
}

.pepicon3-account-settings::before {
  content: "\e91f";
}

.pepicon3-koning::before {
  content: "\e920";
}

.pepicon3-wachtwoordenprivacy::before {
  content: "{";
}

.pepicon3-Europeestaalpaspoort::before {
  content: "~";
}

.pepicon3-afronden::before {
  content: "§";
}

.pepicon3-afgerond::before {
  content: "±";
}

.pepicon3-solid-check::before {
  content: "\e95d";
}

.pepicon3-bekijken::before {
  content: "„";
}

.pepicon3-Systeembericht::before {
  content: "¨";
}

.pepicon3-toggle-on::before {
  content: "\e900";
}

.pepicon3-toggle-on-light-left::before {
  content: "\e907";
}

.pepicon3-toggle-off::before {
  content: "\e901";
}

.pepicon3-paragraaf-losse-elementen::before {
  content: "w";
}

.pepicon3-stopwatch-regular::before {
  content: "\e929";
}

.pepicon3-deadline::before {
  content: "\e955";
}

.pepicon3-time::before {
  content: "\e956";
}

.pepicon3-lijst-view::before {
  content: "\e959";
}

.pepicon3-linkedin::before {
  content: "\e942";
}

.pepicon3-facebook::before {
  content: "\e94e";
}

.pepicon3-mastodon::before {
  content: "\e943";
}

.pepicon3-tumblr::before {
  content: "\e944";
}

.pepicon3-twitter::before {
  content: "\e945";
}

.pepicon3-instagram::before {
  content: "\e946";
}

.pepicon3-tiktok::before {
  content: "\e947";
}

.pepicon3-youtube2::before {
  content: "\e948";
}

.pepicon3-vimeo::before {
  content: "\e949";
}

.pepicon3-telegram::before {
  content: "\e94a";
}

.pepicon3-pinterest::before {
  content: "\e94b";
}

.pepicon3-behance::before {
  content: "\e94c";
}

.pepicon3-flickr::before {
  content: "\e94d";
}

:root {
  --theme-fg-color: #222;
  --theme-bg-color: white;
  --theme-grey-fg-color: #777;
  --theme-middlegrey-fg-color: #aaa;
  --theme-dimmed-fg-color: #ccc;
  --theme-light-fg-color: #999;
  --theme-accent-bg-color: #eee;
  --theme-accent2-bg-color: #ddd;
  --theme-accent3-bg-color: #f5f5f5;
  --theme-accent4-bg-color: #f7f7f7;
  --theme-accent5-bg-color: #fafafa;
  --theme-accent6-bg-color: #f2f2f2;
  --theme-accent7-bg-color: #ebebeb;
  --theme-accent8-bg-color: #444;
  --theme-link-color: #0253fb;
  --theme-link-hover-color: #002567;
  --theme-link-active-color: #003298;
  --theme-link-active2-color: #00287b;
  --theme-link-selected-hover-color: #002c65;
  --theme-link-bg-color: var(--theme-link-color);
  --theme-link-fg-color: white;
  --theme-link-active-bg-color: var(--theme-link-active-color);
  --theme-link-active-fg-color: var(--theme-bg-color);
  --theme-link-active-alt-fg-color: #f8f8f8;
  --theme-link-inactive-hover-bg-color: #dedede;
  --theme-link-active-alt-bg-color: #1850b7;
  --theme-skill-badge-color: #8ddd39;
  --theme-table-row-even-bg-color: var(--theme-bg-color);
  --theme-table-row-even-selected-bg-color: var(--theme-accent4-bg-color, #f7f7f7);
  --theme-table-row-even-hover-bg-color: var(--theme-accent7-bg-color, #ebebeb);
  --theme-table-row-even-selected-hover-bg-color: var(--theme-accent7-bg-color, #ebebeb);
  --theme-table-row-odd-bg-color: var(--theme-accent5-bg-color, #fafafa);
  --theme-table-row-odd-selected-bg-color: var(----theme-accent6-bg-color, #f2f2f2);
  --theme-table-row-odd-hover-bg-color: var(--theme-accent7-bg-color, #ebebeb);
  --theme-table-row-odd-selected-hover-bg-color: var(--theme-accent7-bg-color, #ebebeb);
  --theme-button-hover-bg-color: #003b87;
  --theme-button-hover-fg-color: var(--theme-bg-color);
  --theme-button-next-bg-color: var(--theme-link-color);
  --theme-button-next-fg-color: var(--theme-bg-color);
  --theme-grey-border-color: #e7e7e7;
  --theme-grey-line-color: #e5e5e5;
  --theme-border-color: #ddd;
  --theme-alt-border-color: #eaeaea;
  --theme-alt2-border-color: #bbb;
  --theme-input-focused-border-color: #99bfff;
}
:root {
  --real100vh: 100vh;
  color: var(--theme-fg-color);
}

html {
  font-size: 13px;
  min-height: 100%;
  overflow-y: scroll;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body, input, textarea, select, button, svg {
  font-family: "Trebuchet MS", sans-serif;
  font-size: 1rem;
  color: var(--theme-fg-color);
  background-color: var(--theme-bg-color);
}

* {
  box-sizing: border-box;
}

main {
  display: block;
}

table {
  border-collapse: collapse;
}

table th {
  text-align: left;
  font-weight: normal;
}

table td {
  margin: 0;
  border: 0;
}

a {
  text-decoration: none;
  cursor: pointer;
  color: #222;
}
a, a:link, a:visited {
  color: var(--theme-link-color);
}
a:hover {
  color: var(--theme-link-hover-color);
}
a:active, a:focus {
  color: var(--theme-link-active-color);
}
a.selected {
  color: var(--theme-link-fg-color);
}

a.NOG-EVEN-NIET:any-link {
  text-decoration: none;
  cursor: pointer;
  color: #222;
}
a.NOG-EVEN-NIET:any-link:hover {
  color: var(--theme-link-color);
}

:link {
  color: var(--theme-link-color);
}

:focus {
  outline: none;
}

img {
  max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  margin-block: 0 0;
}

h1 {
  font-size: 22px;
}

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

p {
  line-height: 1.5em;
}

input[type=checkbox],
input[type=radio] {
  margin: 0;
}

html.touch * {
  cursor: pointer;
}

.lazy-iframe {
  position: absolute;
  left: 0px;
  top: 300px;
  width: 1px;
  height: 1px;
  border: 0;
  visibility: hidden;
}

::-webkit-input-placeholder {
  font-family: "Trebuchet MS", sans-serif;
  font-style: italic;
}

::-moz-placeholder {
  font-family: "Trebuchet MS", sans-serif;
  font-style: italic;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  font-family: "Trebuchet MS", sans-serif;
  font-style: italic;
}

textarea:-moz-placeholder,
input:-moz-placeholder {
  font-family: "Trebuchet MS", sans-serif;
  font-style: italic;
}

::placeholder {
  font-family: "Trebuchet MS", sans-serif;
  font-style: italic;
  color: var(--theme-light-fg-color);
}

input.error::-webkit-input-placeholder, textarea.error::-webkit-input-placeholder {
  color: red;
}
input.error::-moz-placeholder, textarea.error::-moz-placeholder {
  color: red;
}
input.error:-ms-input-placeholder, textarea.error:-ms-input-placeholder {
  color: red;
}
input.error:-moz-placeholder, textarea.error:-moz-placeholder {
  color: red;
}
input.error ::placeholder, textarea.error ::placeholder {
  color: red;
}

input.error,
textarea.error,
button.error div.error,
.xlabel.error,
.xlabel.error input {
  color: red !important;
  border-color: red !important;
}

select.error {
  color: red;
  border-color: red;
}
select.error option {
  color: initial;
}

.transparent {
  color: white;
}

textarea {
  margin: 0;
}

dialog {
  border: none;
  padding: 0;
}

.loading {
  margin: 0;
  padding: 0.5em;
}
.loading span {
  display: none;
}

.fr {
  display: block;
  float: right;
}

.fl {
  float: left;
}

.r {
  text-align: right;
}

.l {
  text-align: left;
}

.center {
  text-align: center;
}

.bold {
  font-weight: bold;
}

.uc {
  text-transform: uppercase;
}

.tb {
  border-top: 1px solid var(--theme-border-color);
}

.bb {
  border-bottom: 1px solid var(--theme-border-color);
}

.sg2-red {
  color: red;
}

.hidden {
  display: none !important;
}

@media only screen and (max-width: 575.99px) {
  .hidden-mobile,
  .hidden-xs {
    display: none !important;
  }
}
@media only screen and (min-width: 576px) {
  .visible-mobile,
  .visible-xs {
    display: none !important;
  }
}
@media only screen and (max-width: 767.99px) {
  .hidden-sm {
    display: none !important;
  }
}
@media only screen and (min-width: 768px) {
  .visible-sm {
    display: none !important;
  }
}
@media only screen and (max-width: 991.99px) {
  .hidden-md {
    display: none !important;
  }
}
@media only screen and (min-width: 992px) {
  .visible-md {
    display: none !important;
  }
}
@media only screen and (max-width: 1259.99px) {
  .hidden-lg {
    display: none !important;
  }
}
@media only screen and (min-width: 1260px) {
  .visible-lg {
    display: none !important;
  }
}
[data-toggle] {
  cursor: pointer;
}

.dimmed {
  color: var(--theme-light-fg-color);
}

.disabled {
  cursor: not-allowed !important;
  color: var(--theme-light-fg-color);
}
.disabled:hover {
  background-color: inherit !important;
}

input.full, textarea.full {
  width: 100%;
}

.red,
.toets-rood,
.peppels-rood {
  color: #d0021a !important;
}

:root {
  --form-control-color: rebeccapurple;
  --form-control-disabled: #959495;
}

/*

form {
  display: grid;
  place-content: center;
  min-height: 100vh;
}

.form-control {
  font-family: system-ui, sans-serif;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.1;
  display: grid;
  grid-template-columns: 1em auto;
  gap: 0.5em;
}

.form-control + .form-control {
  margin-top: 1em;
}

.form-control--disabled {
  color: var(--form-control-disabled);
  cursor: not-allowed;
}
*/
input[type=checkbox].cross-platform,
input[type=radio].cross-platform {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background-color: var(--form-background);
  /* Not removed via appearance */
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid currentColor;
  transform: translateY(-0.075em);
  display: inline-grid;
  place-content: center;
}
input[type=checkbox].cross-platform, input[type=checkbox].cross-platform::before, input[type=checkbox].cross-platform::after,
input[type=radio].cross-platform,
input[type=radio].cross-platform::before,
input[type=radio].cross-platform::after {
  box-sizing: border-box;
}
input[type=checkbox].cross-platform:checked::before,
input[type=radio].cross-platform:checked::before {
  transform: scale(1);
}
input[type=checkbox].cross-platform:focus,
input[type=radio].cross-platform:focus {
  border-color: #99bfff;
}
input[type=checkbox].cross-platform:disabled,
input[type=radio].cross-platform:disabled {
  --form-control-color: var(--form-control-disabled);
  color: var(--form-control-disabled);
  cursor: not-allowed;
}
input[type=checkbox].cross-platform::before,
input[type=radio].cross-platform::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--form-control-color);
  /* Windows High Contrast Mode */
  background-color: CanvasText;
}

input[type=checkbox].cross-platform {
  border-radius: 0.15em;
}
input[type=checkbox].cross-platform::before {
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform-origin: bottom left;
}

input[type=radio].cross-platform {
  border-radius: 50%;
}
input[type=radio].cross-platform::before {
  border-radius: 50%;
}

.fake-checkbox {
  display: inline-block;
  width: 21px;
}

input[type=checkbox].pepicon3 {
  user-select: none;
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  margin: 0;
  font-size: 100%;
  margin-right: 0.5ex;
  color: #00339b;
}
input[type=checkbox].pepicon3:not(:checked)::before {
  content: "\e918";
  color: #aaa;
}
input[type=checkbox].pepicon3:checked::before {
  content: "\e908";
}
input[type=checkbox].pepicon3:checked:not(:disabled):hover::before {
  color: var(--theme-link-color);
}
input[type=checkbox].pepicon3:checked:not(:disabled):focus::before {
  color: var(--theme-link-color);
}
input[type=checkbox].pepicon3:not(checked):not(:disabled):hover::before {
  color: var(--theme-link-color);
}
input[type=checkbox].pepicon3:not(checked):not(:disabled):focus::before {
  color: var(--theme-link-color);
}
input[type=checkbox].pepicon3:disabled::before {
  color: #cfd7e7;
}

.page-container {
  --page-menu-height: 86px;
  --page-submenu-height: 68px;
  --page-filter-width: calc(min(25vw, 230px));
  --page-menu-selected-bg-color: #eee;
  --page-menu-selected-fg-color: black;
  --page-border-radius: 10px;
  display: grid;
  width: var(--content-width);
  border: 1px solid #eee;
  border-radius: var(--page-border-radius);
  background-color: var(--theme-bg-color);
}
@media only screen and (max-width: 767.99px) {
  .page-container {
    max-width: 100vw;
    --page-border-radius: 0;
  }
}
@media only screen and (max-width: 575.99px) {
  .page-container {
    --page-menu-height: 68px;
  }
}
.page-container:has(> .page-filter, .page-content:not(.hidden) > .page-filter, .page-tab:not(.hidden) > .page-filter):has(> .page-submenu, .page-content:not(.hidden) > .page-submenu, .page-tab:not(.hidden) > .page-submenu) {
  grid-template-areas: "page-menu page-menu" "page-filter page-submenu" "page-filter page-main";
  grid-template-rows: var(--page-menu-height) var(--page-submenu-height) minmax(0, 1fr);
  grid-template-columns: min(50vw, var(--page-filter-width)) minmax(0, 1fr);
}
.page-container:has(> .page-filter, .page-content:not(.hidden) > .page-filter, .page-tab:not(.hidden) > .page-filter):not(:has(> .page-submenu, .page-content:not(.hidden) > .page-submenu, .page-tab:not(.hidden) > .page-submenu)) {
  grid-template-areas: "page-menu page-menu" "page-filter page-main";
  grid-template-rows: var(--page-menu-height) minmax(0, 1fr);
  grid-template-columns: min(50vw, var(--page-filter-width)) minmax(0, 1fr);
}
.page-container:not(:has(> .page-filter, .page-content:not(.hidden) > .page-filter, .page-tab:not(.hidden) > .page-filter)):has(> .page-submenu, .page-content:not(.hidden) > .page-submenu, .page-tab:not(.hidden) > .page-submenu) {
  grid-template-areas: "page-menu" "page-submenu" "page-main";
  grid-template-rows: var(--page-menu-height) var(--page-submenu-height) minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
}
.page-container:not(:has(> .page-filter, .page-content:not(.hidden) > .page-filter, .page-tab:not(.hidden) > .page-filter)):not(:has(> .page-submenu, .page-content:not(.hidden) > .page-submenu, .page-tab:not(.hidden) > .page-submenu)) {
  grid-template-areas: "page-menu" "page-main";
  grid-template-rows: var(--page-menu-height) minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
}
.page-container header.page-menu {
  grid-area: page-menu;
  max-width: calc(100vw - 65px);
  height: var(--page-menu-height);
  display: flex;
  align-items: center;
  line-height: calc(var(--page-menu-height) / 2);
  padding: 0 20px;
  border-bottom: 1px solid var(--theme-grey-line-color);
  border-top-left-radius: var(--page-border-radius);
  border-top-right-radius: var(--page-border-radius);
  -webkit-user-select: none;
  user-select: none;
}
@media only screen and (max-width: 767.99px) {
  .page-container header.page-menu {
    max-width: 100vw;
  }
}
.page-container header.page-menu > h1,
.page-container header.page-menu > .titel {
  flex: 1;
  font-size: 20px;
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
}
.page-container header.page-menu > h1 > i,
.page-container header.page-menu > .titel > i {
  display: inline-block;
  width: calc(var(--page-menu-height) / 2);
  text-align: center;
}
.page-container header.page-menu > .page-tabs {
  display: flex;
  justify-content: right;
  line-height: calc(var(--page-menu-height) / 2);
  height: calc(var(--page-menu-height) / 2);
}
@media only screen and (max-width: 767.99px) {
  .page-container header.page-menu > .page-tabs:not(.open) > :not(.selected) {
    display: none;
  }
  .page-container header.page-menu > .page-tabs:not(.open) > .selected {
    border: 1px solid var(--theme-border-color);
    border-radius: 4px;
    background-color: transparent;
    color: var(--theme-fg-color);
  }
  .page-container header.page-menu > .page-tabs:not(.open) > .selected::after {
    display: inline-block;
    margin-left: 0.5em;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-weight: 400;
    font-family: "Font Awesome 6 Pro";
    content: "\f078";
  }
  .page-container header.page-menu > .page-tabs.open {
    flex-direction: column;
    z-index: 1;
    width: min-content;
    height: auto;
    box-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
    align-self: start;
    margin-top: calc(var(--page-menu-height) * 0.25);
  }
  .page-container header.page-menu > .page-tabs.open > * {
    background-color: white;
    border-radius: 0;
    border: 1px solid var(--theme-border-color);
  }
  .page-container header.page-menu > .page-tabs.open > *:not(:first-child) {
    border-top: none;
  }
}
.page-container header.page-menu > .page-tabs > * {
  padding: 0 20px;
  border: 1px solid var(--theme-border-color);
  color: unset;
  font-size: 14px;
  cursor: pointer;
}
.page-container header.page-menu > .page-tabs > *:where(:first-child) {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.page-container header.page-menu > .page-tabs > *:where(:last-child) {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.page-container header.page-menu > .page-tabs > *:where(:not(:first-child)) {
  border-left: none;
}
.page-container header.page-menu > .page-tabs > *.selected {
  background-color: var(--page-menu-selected-bg-color);
  color: var(--page-menu-selected-fg-color);
}
.page-container header.page-menu > .page-tabs > * .badge {
  position: relative;
  top: -5px;
  min-width: unset;
  margin: 0;
  padding: 0;
  vertical-align: unset;
  font-weight: bold;
}
.page-container .page-content,
.page-container .page-tab {
  display: contents;
}
.page-container aside.page-filter {
  grid-area: page-filter;
  width: var(--page-filter-width);
  max-width: 50vw;
  overflow-x: auto;
  border-right: 1px solid #e5e5e5;
  border-bottom-left-radius: var(--page-border-radius);
  overflow-y: auto;
}
.page-container header.page-submenu {
  grid-area: page-submenu;
  display: flex;
  line-height: var(--page-submenu-height);
  padding: 0 15px;
  border-bottom: 1px solid #e5e5e5;
  max-width: 100%;
  align-items: center;
}
.page-container header.page-submenu h2 {
  margin: 0;
  font-size: 22px;
  font-weight: bold;
}
.page-container header.page-submenu .button:not(.button-rounded) {
  --height: calc(var(--page-submenu-height) * 0.5);
  --font-size: calc(var(--height) * 0.5);
}
.page-container header.page-submenu .button.button-circle {
  --bg-color: #eee;
  --hover-bg-color: #eee;
  --hover-fg-color: var(--fg-color);
}
.page-container main.page-main {
  grid-area: page-main;
  max-height: inherit;
  border-bottom-right-radius: var(--page-border-radius);
  border-bottom-left-radius: var(--page-border-radius);
}
.page-container header.page-menu > .page-close,
.page-container header.page-submenu > .page-close {
  flex: 0 1;
  display: inline-block;
  padding-right: 20px;
  font-size: 22px;
  cursor: pointer;
  color: var(--theme-link-color);
}
.page-container header.page-menu > .page-close::before,
.page-container header.page-submenu > .page-close::before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  font-weight: 400;
  font-family: "Font Awesome 6 Pro";
  content: "\f060";
}
.page-container header.page-menu > .page-close:hover,
.page-container header.page-submenu > .page-close:hover {
  color: var(--theme-link-hover-color);
}

.page-filter {
  -webkit-user-select: none;
  user-select: none;
}
.page-filter > section {
  border-radius: 4px;
  margin-top: 10px;
}
.page-filter > section + section {
  margin-top: 20px;
}
.page-filter > section > div {
  padding: 0 20px;
}
.page-filter > section > div:first-child > div {
  font-size: 16px;
  white-space: nowrap;
}
.page-filter > section > div > :first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 40px;
  height: 40px;
}
.page-filter > section > div > :not(:first-child):not(dialog) {
  line-height: 30px;
}
.page-filter > section > div > *:has(.search) {
  border: 1px solid var(--theme-grey-line-color);
  margin: 0 -10px;
}
.page-filter > section > div > *:has(.search) .search {
  border: none;
  padding-left: 10px;
  max-width: calc(100% - 20px);
}
.page-filter > section > div > *:has(.search) i {
  padding-right: 10px;
}
.page-filter > section > div > .select {
  position: relative;
}
.page-filter > section > div > .select::after {
  position: absolute;
  right: 0;
  pointer-events: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  font-weight: 400;
  font-family: "Font Awesome 6 Pro";
  content: "\f078";
}
.page-filter > section > div select:not(.default) {
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  line-height: inherit;
  border: none;
  background: transparent;
  padding: 0;
}
.page-filter > section > div [data-toggle] {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.page-filter > section > div [data-toggle].toggle-on > i.fa-chevron-down:not(.no-toggle)::before {
  content: "\f077";
}
.page-filter > section > div label {
  display: flex;
  white-space: nowrap;
  justify-content: space-between;
  align-items: center;
}
.page-filter > section > div label > span:has(+ input) {
  max-width: calc(100% - 15px);
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.link-default {
  color: var(--theme-link-color);
  cursor: pointer;
}
.link-default:hover {
  color: var(--theme-link-hover-color);
}

@media print {
  .no-print {
    display: none !important;
  }
}
.input-default {
  padding: 0 5px;
  border-radius: 3px;
  border: 1px solid var(--theme-border-color);
  background-color: var(--theme-accent4-bg-color);
  color: var(--theme-fg-color);
}
.input-default:not([readonly]):hover, .input-default:not([readonly]):focus, .input-default:focus {
  border-color: #99bfff;
  background-color: white;
}

input[type=number].input-default {
  padding-right: 0;
}

textarea.input-default {
  padding: 2px 5px;
}

.sluitkruisje {
  display: inline-block;
  position: absolute;
  right: 0.5em;
  top: 0.5em;
  line-height: 1em;
  font-size: 18px;
  cursor: pointer;
}
.sluitkruisje, .sluitkruisje:any-link {
  color: #ddd;
}
.sluitkruisje:hover {
  color: black !important;
}
.sluitkruisje.dark {
  color: #555;
}
.sluitkruisje::after {
  font-family: pepicon3;
  content: "3";
}

.avatar-image {
  border-radius: 100%;
}

.loading {
  text-align: center;
  padding-top: 20px;
  font-size: 30px;
  color: var(--theme-grey-fg-color);
}

.ogp-link {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;
  justify-content: left;
}
.ogp-link:hover {
  color: var(--theme-link-color);
}
.ogp-link div.linkinfo {
  overflow: hidden;
  color: var(--theme-fg-color);
}
.ogp-link div.linkinfo:hover {
  color: var(--theme-link-color);
}
.ogp-link div.linkinfo h1 {
  font-size: 14px;
  font-weight: bold;
  line-height: 21px;
  margin: 0;
  color: inherit;
}
.ogp-link div.linkinfo p {
  margin-top: 5px;
}
.ogp-link div.image {
  text-align: center;
  overflow: hidden;
}
.ogp-link div.image img {
  border-radius: 5px;
  border: 1px solid #ccc;
}

.vakkenkiezer {
  flex: 1;
  height: 50%;
  -webkit-user-select: none;
  user-select: none;
}
.vakkenkiezer .vakkenkiezer-vak {
  display: inline-flex;
  height: 100%;
  cursor: pointer;
}
.vakkenkiezer .vakkenkiezer-vak .vakkenkiezer-vak-icon {
  flex: 0 0 auto;
  display: inline-block;
  height: 100%;
}
.vakkenkiezer .vakkenkiezer-vak .vakkenkiezer-vak-icon img {
  height: 100%;
}
.vakkenkiezer .vakkenkiezer-vak .vakkenkiezer-vak-name {
  display: inline-block;
  height: 100%;
  font-size: 20px;
  font-weight: bold;
  padding-left: 0.5em;
}

.emojis {
  float: right;
}
.emojis > .emoji {
  cursor: pointer;
}
.emojis > .emoji.selected {
  border: 1px solid var(--theme-border-color);
}
.emojis > .emoji.selected, .emojis > .emoji:hover {
  box-shadow: 0 0 15px -4px rgb(0, 0, 0);
}

.emoji.idee {
  color: #fcab51;
}
.emoji.applaus {
  color: #7bcd23;
}
.emoji.teleurgesteld {
  color: #f93c36;
}
.emoji.duim_omhoog {
  color: #418ef2;
}

.emoji.toon {
  display: flex;
  align-items: center;
}
.emoji.toon img {
  margin-left: 0.5em;
}

img.emoji {
  width: 24px;
  height: 24px;
  padding: 3px;
  border-radius: 12px;
  border: 1px solid var(--theme-border-color);
}

.maintenance-banner {
  position: fixed;
  top: 60px;
  width: 100%;
  text-align: center;
  font-weight: bold;
  background-color: #dfc75a;
  line-height: 25px;
  z-index: 1;
}
.maintenance-banner.maintenance-imminent {
  background-color: #ffc75a;
  font-size: 15pt;
}
.maintenance-banner i.fa {
  margin-right: 1em;
  vertical-align: text-bottom;
  font-size: larger;
}

body.home .maintenance-banner {
  top: 80px;
}

body.leerling-pagina .maintenance-banner {
  top: 85px;
}

body.maintenance .wrapper {
  width: 640px;
  margin: 100px auto 0 auto;
}

#support_placeholder {
  position: fixed;
  padding-top: 30px;
  left: 0;
  right: 0;
  width: calc(var(--content-width) + 64px + 10px);
  margin: 0 auto;
}
#support_placeholder .button-circle {
  --height: 32px;
}
#support_placeholder #support {
  position: relative;
  float: right;
  --fg-color: var(--theme-link-color);
  --hover-fg-color: var(--fg-color);
  --hover-bg-color: var(--bg-color);
}
#support_placeholder .certiforce {
  position: absolute;
  right: 0;
  top: 72px;
  margin: 0;
  --hover-bg-color: var(--bg-color);
}

.docent-pagina #support_placeholder {
  display: none;
}

.wysiwyg .wysiwyg-toolbar {
  height: 25px;
  padding-top: 3px;
  padding-bottom: 3px;
  border: 1px solid #e7e7e7;
  border-bottom: none;
  font-size: 0;
  -webkit-user-select: none;
  user-select: none;
}
.wysiwyg .wysiwyg-toolbar > ul.wysiwyg-menusection {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 0;
  border: none;
  height: 17px;
  line-height: 17px;
  font-size: 0;
  -webkit-user-select: none;
  user-select: none;
}
.wysiwyg .wysiwyg-toolbar > ul.wysiwyg-menusection > li {
  position: relative;
  display: inline-block;
  height: inherit;
  line-height: inherit;
  padding: 0 10px;
  margin: 0 2px;
  border: 0;
  font-family: "Helvetica Neue";
  font-size: 1rem;
  cursor: pointer;
}
.wysiwyg .wysiwyg-toolbar > ul.wysiwyg-menusection > li:hover {
  color: initial;
  background-color: #e0e0e0;
}
.wysiwyg .wysiwyg-toolbar > ul.wysiwyg-menusection:not(:first-child)::before {
  display: inline-block;
  content: "&nbsp;";
  vertical-align: top;
  border-left: 1px solid #99bfff;
}
.wysiwyg .wysiwyg-toolbar > ul.wysiwyg-menusection.wysiwyg-menusection-b-i-u li:not(:last-child) {
  border: none;
}
.wysiwyg .wysiwyg-toolbar > ul.wysiwyg-menusection.wysiwyg-menusection-colors li button {
  font-size: 18px;
}
.wysiwyg .wysiwyg-toolbar > ul.wysiwyg-menusection.wysiwyg-menusection-colors li:not(:last-child) {
  border: none;
}
.wysiwyg .wysiwyg-toolbar > ul.wysiwyg-menusection.wysiwyg-menusection-b-i-u li button, .wysiwyg .wysiwyg-toolbar > ul.wysiwyg-menusection.wysiwyg-menusection-colors li button {
  width: 36px;
}
.wysiwyg .wysiwyg-toolbar > ul.wysiwyg-menusection.wysiwyg-menusection-invoegen {
  position: relative;
}
.wysiwyg .wysiwyg-toolbar > ul.wysiwyg-menusection.wysiwyg-menusection-invoegen .popup-menu {
  right: 0;
}
.wysiwyg .wysiwyg-toolbar .popup-menu i {
  font-size: 16px;
  padding-right: 6px;
}
.wysiwyg .wysiwyg-toolbar .popup-menu > li {
  font-family: "Helvetica Neue";
}
.wysiwyg .wysiwyg-toolbar.wysiwyg-mini .wysiwyg-menusection-fonts,
.wysiwyg .wysiwyg-toolbar.wysiwyg-mini .wysiwyg-menusection-alignments,
.wysiwyg .wysiwyg-toolbar.wysiwyg-mini .wysiwyg-menusection-colors {
  display: none !important;
}
.wysiwyg .wysiwyg-toolbar.wysiwyg-mini .wysiwyg-menu-invoegen .wysiwyg-menuitem-insert-image,
.wysiwyg .wysiwyg-toolbar.wysiwyg-mini .wysiwyg-menu-invoegen .wysiwyg-menuitem-insert-video,
.wysiwyg .wysiwyg-toolbar.wysiwyg-mini .wysiwyg-menu-invoegen .wysiwyg-menuitem-insert-table,
.wysiwyg .wysiwyg-toolbar.wysiwyg-mini .wysiwyg-menu-invoegen .wysiwyg-menuitem-insert-textbox {
  display: none !important;
}
.wysiwyg:not(.focused) .wysiwyg-toolbar {
  border-color: var(--theme-border-color);
}
.wysiwyg:not(.focused) .wysiwyg-toolbar > ul.wysiwyg-menusection {
  visibility: hidden;
}
.wysiwyg.wysiwyg-float {
  position: relative;
}
.wysiwyg.wysiwyg-float > .wysiwyg-toolbar {
  background-color: white;
  position: absolute;
  top: -30px;
  border-radius: 3px;
  border: 1px solid #99bfff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.wysiwyg.wysiwyg-float:not(.focused) > .wysiwyg-toolbar {
  display: none;
}

body.leerling-pagina .wysiwyg.focused > .wysiwyg-toolbar.wysiwyg-sticky {
  top: 70px;
}

body.docent-pagina .wysiwyg.focused > .wysiwyg-toolbar.wysiwyg-sticky {
  top: 10px;
}

.wysiwyg.focused > .wysiwyg-toolbar.wysiwyg-sticky {
  position: sticky;
  background-color: white;
  container-type: scroll-state;
  container-name: sticky-toolbar;
}
@container sticky-toolbar scroll-state(stuck: top) {
  .wysiwyg.focused > .wysiwyg-toolbar.wysiwyg-sticky::after {
    content: " ";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #e7e7e7;
  }
}

div.editable.werkblad[contenteditable=true]:focus {
  border: 1px solid #99bfff;
  background-color: transparent;
}

.float-tool {
  z-index: 1;
  font-size: 0;
  line-height: 1rem;
}
.float-tool ul {
  box-sizing: border-box;
  padding: 0 !important;
  list-style-type: none !important;
  line-height: inherit !important;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  background-color: var(--theme-link-color);
  color: var(--theme-fg-color);
}
.float-tool ul li {
  display: inline-block;
  box-sizing: border-box;
  font-size: 1rem;
  line-height: inherit;
}
.float-tool ul li a {
  line-height: 20px;
  padding: 0 0.5em;
  box-sizing: border-box;
  display: inline-block;
  height: 100%;
  background-color: var(--theme-link-bg-color);
  color: var(--theme-link-fg-color);
}
.float-tool ul li a i, .float-tool ul li a .fake-icon-textbox {
  color: inherit !important;
}
.float-tool ul li a:hover {
  background-color: var(--theme-link-active-bg-color);
  color: var(--theme-link-active-fg-color);
}

div.wysiwyg div.tab {
  display: block;
  padding: 10px 0 0 18px;
  width: 590px;
  height: 21px;
  margin-left: -5px;
  color: white;
  background-image: url(../gfx/leerling/elo_tabbalk.png);
  position: relative;
}

div.wysiwyg div.tab a.print {
  position: absolute;
  right: 5px;
  top: -1px;
}

div.wysiwyg div.tab a.print:hover {
  background-position: 0 -39px;
}

div.wysiwyg div.toolbar {
  height: 25px;
  width: 600px;
  margin: 0 0 0 0px;
  background-color: #efefef;
  border-bottom: 1px solid var(--theme-border-color);
}

div.wysiwyg div.toolbar a,
div.wysiwyg div.toolbar div.foto {
  display: block;
  width: 25px;
  height: 25px;
  border-right: 1px solid #bfbfbf;
  float: left;
  cursor: pointer;
  background-image: url(../gfx/algemeen/icons_toolbar.png);
  background-repeat: no-repeat;
}

div.wysiwyg div.toolbar div.foto {
  overflow: hidden;
}

div.wysiwyg div.toolbar a:hover,
div.wysiwyg div.toolbar div:hover {
  background-image: url(../gfx/algemeen/icons_toolbar_hi.png);
}

div.wysiwyg div.toolbar a.h1 {
  background-position: 0 0;
}

div.wysiwyg div.toolbar a.h2 {
  background-position: -25px 0;
}

div.wysiwyg div.toolbar a.c0 {
  background-position: -50px 0;
}

div.wysiwyg div.toolbar a.c1 {
  background-position: -75px 0;
}

div.wysiwyg div.toolbar a.c2 {
  background-position: -100px 0;
}

div.wysiwyg div.toolbar a.strong {
  background-position: -125px 0;
}

div.wysiwyg div.toolbar a.em {
  background-position: -150px 0;
}

div.wysiwyg div.toolbar a.ul {
  background-position: -175px 0;
}

div.wysiwyg div.toolbar a.ol {
  background-position: -200px 0;
}

div.wysiwyg div.toolbar div.foto {
  background-position: -225px 0;
}

div.wysiwyg div.toolbar a.video {
  background-position: -250px 0;
}

div.wysiwyg div.toolbar a.link {
  background-position: -275px 0;
}

div.wysiwyg div.toolbar a.forms {
  background-position: -300px 0;
  display: none;
}

div.wysiwyg div.toolbar a.table {
  background-position: -325px 0;
}

div.bijlage_uitwerking {
  background-color: #efefef;
  height: 24px;
  line-height: 24px;
  text-align: right;
}

/**
 * .werkblad: user-editable HTML (wysiwyg) content.
 * Layout moet toegepast zowel in edit als in view modus.
 */
.werkblad {
  line-height: 1.7;
  overflow-y: auto;
}
.werkblad [contentEditable=true] {
  min-height: 300px;
}
.werkblad.editable {
  padding: 4px;
}
.werkblad h1 {
  margin: 10px 0 5px 0;
  font-size: 20px;
  font-weight: normal;
}
.werkblad h2 {
  margin: 10px 0 5px 0;
  font-size: 16px;
  font-weight: normal;
  line-height: 21px;
}
.werkblad .c0 {
  color: black;
}
.werkblad .c1 {
  color: red;
}
.werkblad .c2 {
  color: blue;
}
.werkblad table {
  width: 100%;
  border-left: 1px solid #c8d0e0;
}
.werkblad table th {
  color: white;
  background-color: #b0bcd3 !important;
  border-right: 1px solid #e7ebf2;
  border-bottom: 1px solid #e7ebf2;
}
.werkblad table th:last-child {
  border-right: 1px solid #b0bcd3;
}
.werkblad table td {
  border: 1px solid #c8d0e0;
  background: white; /* wisselende achtergrond te onrustig */
}
.werkblad table th, .werkblad table td {
  padding: 2px 8px;
}
.werkblad ul {
  list-style-type: disc;
  margin: 0;
  padding-left: 2em;
  line-height: 21px;
}
.werkblad ol {
  margin: 0;
  padding-left: 2em;
  line-height: 21px;
}
.werkblad iframe, .werkblad video {
  width: 600px;
  max-width: 100%;
}
.werkblad .antwoord iframe {
  margin-left: -3px;
}
.werkblad.editable iframe {
  width: 680px;
  height: 382px;
  margin-left: 0px;
}
.werkblad p {
  margin: 0.7em 0;
}
.werkblad .tb-container {
  min-height: 1em;
  overflow-y: auto;
  padding: 10px;
  background-color: #dedede;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.werkblad .tb-container p:first-child {
  margin-top: 0;
}
.werkblad .tb-container p:last-child {
  margin-bottom: 0;
}
.werkblad .tb-container:not(.tb-width-100).tb-align-left {
  float: left;
}
.werkblad .tb-container:not(.tb-width-100).tb-align-center {
  margin: 0 auto;
}
.werkblad .tb-container:not(.tb-width-100).tb-align-right {
  float: right;
}
.werkblad .tb-container.tb-width-100 {
  width: 100%;
}
.werkblad .tb-container.tb-width-75 {
  width: 75%;
}
.werkblad .tb-container.tb-width-50 {
  width: 50%;
}
.werkblad .tb-container.tb-color-red {
  color: rgb(138, 33, 46);
  background-color: rgb(244, 191, 198);
}
.werkblad .tb-container.tb-color-green {
  color: rgb(49, 115, 78);
  background-color: rgb(223, 240, 216);
}
.werkblad .tb-container.tb-color-blue {
  color: rgb(70, 127, 156);
  background-color: rgb(218, 237, 247);
}
.werkblad .tb-container.tb-color-purple {
  color: rgb(83, 0, 156);
  background-color: rgb(215, 170, 255);
}
.werkblad .tb-container.tb-color-transparent {
  background-color: transparent;
  border-color: transparent;
}
.werkblad .float-tool + .tb-container.tb-color-transparent {
  border-color: #888;
}
.werkblad .tb-image {
  padding: 0;
  background-color: transparent;
  border: none;
  overflow-y: auto;
}
.werkblad .tb-image.tb-image-align-left {
  float: left;
}
.werkblad .tb-image.tb-image-align-center {
  margin: 0 auto;
  display: block;
}
.werkblad .tb-image.tb-image-align-center {
  text-align: center;
}
.werkblad .tb-image.tb-image-align-right {
  float: right;
}
.werkblad .tb-image.tb-image-width-10 {
  width: 10% !important;
}
.werkblad .tb-image.tb-image-width-20 {
  width: 20% !important;
}
.werkblad .tb-image.tb-image-width-30 {
  width: 30% !important;
}
.werkblad .tb-image.tb-image-width-40 {
  width: 40% !important;
}
.werkblad .tb-image.tb-image-width-50 {
  width: 50% !important;
}
.werkblad .tb-image.tb-image-width-60 {
  width: 60% !important;
}
.werkblad .tb-image.tb-image-width-70 {
  width: 70% !important;
}
.werkblad .tb-image.tb-image-width-75 {
  width: 75% !important;
}
.werkblad .tb-image.tb-image-width-80 {
  width: 80% !important;
}
.werkblad .tb-image.tb-image-width-90 {
  width: 90% !important;
}
.werkblad .tb-image.tb-image-width-100 {
  width: 100% !important;
}
.werkblad .float-tool + .tb-image {
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.wysiwyg-dialog header {
  font-size: 18px;
  padding: 0 0 20px 0;
}

.wysiwyg-dialog.wysiwyg-dialog-hyperlink > main {
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px;
  align-items: center;
}
.wysiwyg-dialog.wysiwyg-dialog-hyperlink > main > label {
  display: contents !important;
}
.wysiwyg-dialog.wysiwyg-dialog-hyperlink > main > label > input[type=text] {
  width: 210px;
}

.wysiwyg-dialog.wysiwyg-dialog-table div {
  font-size: 13px;
}

.wysiwyg-dialog.wysiwyg-dialog-textbox {
  width: unset !important;
}
.wysiwyg-dialog.wysiwyg-dialog-textbox .tb-width, .wysiwyg-dialog.wysiwyg-dialog-textbox .tb-alignment, .wysiwyg-dialog.wysiwyg-dialog-textbox .tb-image-link {
  padding: 5px 10px;
  background-color: var(--theme-accent3-bg-color);
}
.wysiwyg-dialog.wysiwyg-dialog-textbox .tb-width {
  margin-top: 10px;
  padding-top: 10px;
}
.wysiwyg-dialog.wysiwyg-dialog-textbox .tb-alignment {
  padding-bottom: 10px;
}
.wysiwyg-dialog.wysiwyg-dialog-textbox .tb-image-link input {
  width: 100%;
}
.wysiwyg-dialog.wysiwyg-dialog-textbox section h4 {
  text-transform: uppercase;
  color: #777;
  font-weight: normal;
  font-size: 11px;
  line-height: 1;
  margin: 2px 0 4px 0;
}
.wysiwyg-dialog.wysiwyg-dialog-textbox .sg1-buttons {
  margin: 0 !important;
  padding-top: 20px;
}
.wysiwyg-dialog.wysiwyg-dialog-textbox table td label {
  margin: 0 !important;
  width: unset !important;
  clear: unset !important;
  display: block !important;
}
.wysiwyg-dialog.wysiwyg-dialog-textbox table td label input {
  position: absolute;
  left: -9999px;
}
.wysiwyg-dialog.wysiwyg-dialog-textbox table td label input:checked + .box {
  background-color: #aaa;
  color: white;
}
.wysiwyg-dialog.wysiwyg-dialog-textbox table td .box {
  border: 1px solid var(--theme-border-color);
  text-align: center;
  margin-right: 10px;
  font-size: 14px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.wysiwyg-dialog.wysiwyg-dialog-textbox table td .box.tb-color-red {
  color: rgb(138, 33, 46);
  background-color: rgb(244, 191, 198);
}
.wysiwyg-dialog.wysiwyg-dialog-textbox table td .box.tb-color-green {
  color: rgb(49, 115, 78);
  background-color: rgb(223, 240, 216);
}
.wysiwyg-dialog.wysiwyg-dialog-textbox table td .box.tb-color-blue {
  color: rgb(70, 127, 156);
  background-color: rgb(218, 237, 247);
}
.wysiwyg-dialog.wysiwyg-dialog-textbox table td .box.tb-color-purple {
  color: rgb(83, 0, 156);
  background-color: rgb(215, 170, 255);
}
.wysiwyg-dialog.wysiwyg-dialog-textbox table td:last-child .box {
  margin-right: 0;
}
.wysiwyg-dialog.wysiwyg-dialog-textbox table.tb-select-color .box {
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-color: transparent;
}
.wysiwyg-dialog.wysiwyg-dialog-textbox table.tb-select-width .box {
  width: 40px;
  height: 40px;
  line-height: 38px;
}
.wysiwyg-dialog.wysiwyg-dialog-textbox table.tb-select-align .box {
  width: 40px;
  height: 40px;
  line-height: 38px;
}
.wysiwyg-dialog.wysiwyg-dialog-textbox table.tb-select-align .box .fa {
  font-size: 150%;
  vertical-align: sub;
}
.wysiwyg-dialog.wysiwyg-dialog-textbox table.tb-select-width .spinner input[type=radio] {
  display: none;
}
.wysiwyg-dialog.wysiwyg-dialog-textbox table.tb-select-width .spinner-box {
  width: 50px;
}
.wysiwyg-dialog.wysiwyg-dialog-textbox table.tb-select-width .spinner-box .up {
  position: relative;
  top: -5px;
  left: 2px;
  cursor: pointer;
}
.wysiwyg-dialog.wysiwyg-dialog-textbox table.tb-select-width .spinner-box .down {
  position: relative;
  top: 4px;
  left: -6px;
  cursor: pointer;
  line-height: 0.5;
}
.wysiwyg-dialog.wysiwyg-dialog-textbox table.tb-select-width .spinner-box.active {
  color: white;
  background-color: #aaa;
}

.wysiwyg-dialog.wysiwyg-dialog-image input[type=file] + img {
  display: block;
  max-width: 400px;
}

#confirm.wysiwyg-dialog.wysiwyg-dialog-mathjax-edit {
  display: grid;
  grid-template-areas: "aside header" "aside main" "aside footer";
  grid-template-columns: var(--aside-width) 1fr;
  --aside-width: 320px;
  width: calc(var(--content-width));
  left: calc(50vw - var(--content-width) * 0.5);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding: 0;
}
#confirm.wysiwyg-dialog.wysiwyg-dialog-mathjax-edit > header {
  grid-area: header;
}
#confirm.wysiwyg-dialog.wysiwyg-dialog-mathjax-edit > aside {
  grid-area: aside;
}
#confirm.wysiwyg-dialog.wysiwyg-dialog-mathjax-edit > main {
  grid-area: main;
}
#confirm.wysiwyg-dialog.wysiwyg-dialog-mathjax-edit > footer {
  grid-area: footer;
}
#confirm.wysiwyg-dialog.wysiwyg-dialog-mathjax-edit > header {
  padding: 20px 20px 0 20px;
}
#confirm.wysiwyg-dialog.wysiwyg-dialog-mathjax-edit > main {
  padding: 20px;
}
#confirm.wysiwyg-dialog.wysiwyg-dialog-mathjax-edit > main h4 {
  font-size: 16px;
  font-weight: normal;
  line-height: 36px;
}
#confirm.wysiwyg-dialog.wysiwyg-dialog-mathjax-edit > main textarea.math-source {
  resize: vertical;
}
#confirm.wysiwyg-dialog.wysiwyg-dialog-mathjax-edit > main .math-preview {
  min-height: 50px;
  border: 1px solid #eee;
}
#confirm.wysiwyg-dialog.wysiwyg-dialog-mathjax-edit > main select.math-format, #confirm.wysiwyg-dialog.wysiwyg-dialog-mathjax-edit > main select.math-display {
  display: none;
}
#confirm.wysiwyg-dialog.wysiwyg-dialog-mathjax-edit > footer {
  padding-bottom: 25px;
  padding-right: 20px;
}

#confirm.wysiwyg-dialog.wysiwyg-dialog-insert-symbol {
  --aside-width: 400px;
  width: auto;
}
#confirm.wysiwyg-dialog.wysiwyg-dialog-insert-symbol section.charref {
  display: block;
  width: var(--aside-width);
  height: 100%;
  overflow-y: scroll;
  position: absolute;
  top: 0;
  left: 100%;
  padding: 20px;
  background-color: white;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}
#confirm.wysiwyg-dialog.wysiwyg-dialog-insert-symbol section.charref h4 {
  font-size: 16px;
  line-height: 36px;
  -webkit-user-select: none;
  user-select: none;
}
#confirm.wysiwyg-dialog.wysiwyg-dialog-insert-symbol section.charref .entity-cat > span {
  display: inline-block;
  text-align: center;
  margin: 2px;
  border: 1px;
  width: 24px;
  height: 24px;
}
#confirm.wysiwyg-dialog.wysiwyg-dialog-insert-symbol section.charref .entity-cat > span:hover {
  background-color: var(--theme-accent-bg-color);
  cursor: pointer;
}
#confirm.wysiwyg-dialog.wysiwyg-dialog-insert-symbol aside,
#confirm.wysiwyg-dialog.wysiwyg-dialog-insert-symbol section:not(.charref),
#confirm.wysiwyg-dialog.wysiwyg-dialog-insert-symbol footer {
  display: none;
}
#confirm.wysiwyg-dialog.wysiwyg-dialog-insert-symbol section.charref {
  position: unset;
  height: 500px;
  padding: 0;
  border: 0;
}

.wysiwyg-dialog {
  --aside-width: 340px;
}
.wysiwyg-dialog aside {
  display: block;
  width: var(--aside-width);
  height: 100%;
  position: absolute;
  left: calc(0 - var(--aside-width));
  top: 0;
  padding: 20px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  background-color: var(--theme-accent2-bg-color);
  overflow-y: auto;
}
.wysiwyg-dialog aside h4 {
  margin: 0;
}
.wysiwyg-dialog aside p {
  margin: 1em 0 !important;
}
.wysiwyg-dialog aside dl {
  line-height: 21px;
}
.wysiwyg-dialog aside dl dt, .wysiwyg-dialog aside dl dd {
  display: inline-block;
  margin: 0;
}
.wysiwyg-dialog aside dl dt {
  width: 50%;
}

.wysiwyg-colorpicker {
  position: absolute;
  background-color: white;
  padding: 10px;
  box-shadow: 0 0px 6px 1px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  border: 1px solid #c3c3c3;
}
.wysiwyg-colorpicker .cp-row {
  display: block;
  width: auto;
  white-space: nowrap;
  line-height: 1;
}
.wysiwyg-colorpicker .cp-row .cp-color {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid var(--theme-border-color);
  margin: 2px;
}

/* optionele placeholder tekst in divs van werkbladen! Wow */
[contentEditable=true]:empty:not(:focus)::before {
  content: attr(placeholder);
  font-style: italic;
  color: #aaa;
}

[contenteditable=true][data-placeholder]:empty:not(:focus)::before {
  content: attr(data-placeholder);
  color: #aaa;
  font-style: italic;
}

#confirm.wysiwyg-dialog label {
  display: inline-block;
  width: 50%;
}
#confirm.wysiwyg-dialog > div {
  margin-bottom: 8px;
}
#confirm.wysiwyg-dialog input[type=checkbox][name=table_header] {
  margin-left: 0;
}
#confirm.wysiwyg-dialog textarea {
  width: 100%;
}

.sp-container {
  border-color: var(--theme-border-color);
  background-color: white;
  box-shadow: 0 0px 6px 1px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}
.sp-container .sp-cancel {
  font: inherit;
}
.sp-container .sp-choose {
  font: inherit;
  border-radius: 5px;
  font-size: 14px;
  border: 1px solid var(--theme-border-color);
  background-color: var(--theme-button-next-bg-color);
  color: var(--theme-button-next-fg-color);
  text-transform: lowercase;
  padding: 1px 10px;
}
.sp-container .sp-choose:hover {
  background: var(--theme-button-hover-bg-color);
  color: var(--theme-button-hover-fg-color);
}

.panel {
  width: 800px;
  border-radius: 5px;
  background-color: white;
  box-sizing: border-box;
  box-shadow: 0 0 15px -4px rgba(0, 0, 0, 0.5);
}
.panel .panel-header {
  box-sizing: border-box;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 20px 20px 20px 20px;
  overflow: auto;
  width: 100%;
}
.panel .panel-body {
  box-sizing: border-box;
  overflow: auto;
  width: 100%;
  padding: 0 20px 20px;
}
.panel p {
  padding: 0 0px 20px 0px;
}
.panel .panel-footer {
  box-sizing: border-box;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding: 20px;
}
.panel h2 {
  margin: 0px;
  font-size: 24px;
  font-weight: bold;
}
.panel h3 {
  font-size: 20px;
  font-weight: bold;
  margin-top: 20px;
}
.panel h4 {
  font-size: 14px;
  font-weight: bold;
  margin-top: 0;
}
.panel .control {
  display: block;
  overflow: auto;
  width: 97%;
  margin-top: 10px;
}
.panel .control label {
  width: 160px;
  float: left;
  height: 22px;
  font-size: 12px;
}
.panel .control div.text {
  float: left;
  padding: 0;
}
.panel select {
  background-color: white;
  border: 1px solid #eee;
}
.panel.mijn_account .panel-header {
  padding: 30px 20px 10px;
}
.panel.mijn_account h3 {
  margin-top: 10px;
}
.panel.mijn_account .panel-body p {
  margin-bottom: 5px;
}
.panel.mijn_account table {
  margin-top: 10px;
}
.panel.mijn_account table th {
  border-bottom: 1px solid var(--theme-border-color);
  border-top: 1px solid var(--theme-border-color);
  text-transform: uppercase;
  font-size: 12px;
  color: var(--theme-light-fg-color);
}

.liniaal-container {
  --liniaal-content-width: calc(min(100vw - 65px, 220px + 900px));
  --liniaal-width: calc(65px + var(--liniaal-content-width));
}
.liniaal-container > .liniaal-content {
  position: fixed;
  top: 60px;
  right: 0;
  display: grid;
  grid-template-columns: 65px minmax(0, 1fr);
  width: var(--liniaal-width);
  --liniaal-content-max-height: calc(100vh - 60px);
  max-height: var(--liniaal-content-max-height);
  overflow-y: auto;
  font-weight: normal;
  font-size: 13px;
  background-color: var(--theme-bg-color);
}
@media only screen and (max-width: 575.99px) {
  .liniaal-container > .liniaal-content {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    --liniaal-content-max-height: 100vh;
    --liniaal-width: 100vw;
    --liniaal-content-width: var(--liniaal-width);
    max-width: var(--liniaal-width);
  }
}
.liniaal-container > .liniaal-content > aside.liniaal-menu {
  width: 65px;
  max-height: inherit;
  overflow-y: auto;
  border-right: 1px solid var(--theme-grey-line-color);
  border-left: 1px solid var(--theme-grey-line-color);
  background-color: var(--theme-accent3-bg-color);
  -webkit-user-select: none;
  user-select: none;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.liniaal-container > .liniaal-content > aside.liniaal-menu::-webkit-scrollbar {
  display: none;
}
@media only screen and (max-width: 575.99px) {
  .liniaal-container > .liniaal-content > aside.liniaal-menu {
    display: none;
  }
}
.liniaal-container > .liniaal-content > aside.liniaal-menu > ul {
  display: flex;
  flex-direction: column;
}
.liniaal-container > .liniaal-content > aside.liniaal-menu > ul > li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  width: 55px;
  height: 55px;
  border-radius: 4px;
  margin: 7.5px 5px;
  font-size: 11px;
  cursor: pointer;
}
.liniaal-container > .liniaal-content > aside.liniaal-menu > ul > li.liniaal-toggle {
  height: 55px;
}
.liniaal-container > .liniaal-content > aside.liniaal-menu > ul > li.liniaal-toggle:hover {
  background-color: transparent;
  color: var(--theme-link-color);
}
.liniaal-container > .liniaal-content > aside.liniaal-menu > ul > li.liniaal-toggle > i {
  width: 34px;
  height: 34px;
  display: grid;
  align-content: center;
  justify-content: center;
  background-color: var(--theme-accent-bg-color);
  border-radius: 100%;
}
.liniaal-container > .liniaal-content > aside.liniaal-menu > ul > li.liniaal-toggle > i.fa-chevron-right {
  color: red;
}
.liniaal-container > .liniaal-content > aside.liniaal-menu > ul > li:hover {
  color: red;
}
.liniaal-container > .liniaal-content > aside.liniaal-menu > ul > li.selected {
  color: red;
}
.liniaal-container > .liniaal-content > aside.liniaal-menu > ul > li > i {
  font-size: 20px;
}
.liniaal-container > .liniaal-content > aside.liniaal-menu > ul > li > span {
  white-space: nowrap;
}
.liniaal-container > .liniaal-content > aside.liniaal-menu > ul > li > .badge {
  position: absolute;
  top: -1em;
  font-size: 13px;
  background-color: transparent;
  color: red;
  right: 0;
}
.liniaal-container > .liniaal-content > aside.liniaal-menu > ul > li > i.pepicon3-feedback-desk {
  color: white;
  background-color: blue;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  border-radius: 100%;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.liniaal-container > .liniaal-content > main.liniaal-main {
  height: var(--liniaal-content-max-height);
  max-height: var(--liniaal-content-max-height);
}
.liniaal-container > .liniaal-content > main.liniaal-main > .page-container {
  --page-container-height: var(--liniaal-content-max-height);
  width: var(--liniaal-content-width);
  height: var(--page-container-height);
  border-radius: 0;
  border-left: none;
  --page-menu-height: 75px;
}
.liniaal-container > .liniaal-content > main.liniaal-main > .page-container:not(:has(> .page-submenu, .page-content:not(.hidden) .page-submenu, .page-tab:not(.hidden) .page-submenu)) {
  --page-submenu-height: 0;
}
@media only screen and (min-width: 576px) {
  .liniaal-container > .liniaal-content > main.liniaal-main > .page-container header.page-menu .page-close {
    display: none;
  }
}
.liniaal-container > .liniaal-content > main.liniaal-main > .page-container aside.page-filter {
  --filter-height: calc(var(--liniaal-content-max-height) - var(--page-menu-height));
  max-height: var(--filter-height);
  overflow: auto;
}
.liniaal-container > .liniaal-content > main.liniaal-main > .page-container main.page-main {
  --main-height: calc(var(--liniaal-content-max-height) - var(--page-menu-height) - var(--page-submenu-height) - 2px);
  max-height: var(--main-height);
  overflow: auto;
}
.liniaal-container.liniaal-collapsed > .liniaal-content {
  left: calc(100vw - 65px - var(--scrollbar-width));
}
@media only screen and (max-width: 767.99px) {
  .liniaal-container.liniaal-collapsed > .liniaal-content {
    left: 100vw !important;
  }
}
.liniaal-container.liniaal-collapsed > .liniaal-content > aside.liniaal-menu {
  background-color: var(--theme-bg-color);
}
html.mouse .liniaal-container.liniaal-collapsed > .liniaal-content > aside.liniaal-menu > ul:not(:hover) > li > span:not(.badge) {
  visibility: hidden;
}

.liniaal-container:not(.liniaal-collapsed) .liniaal-content .liniaal-menu .liniaal-toggle i.fa-chevron-left {
  display: none;
}
.liniaal-container.liniaal-collapsed .liniaal-content .liniaal-menu .liniaal-toggle i.fa-chevron-right {
  display: none;
}
.liniaal-container:where(:not(.liniaal-collapsed))::before {
  position: fixed;
  top: 60px;
  bottom: 0;
  content: " ";
  display: block;
  width: calc(100vw - var(--scrollbar-width));
  min-height: calc(100vh - 60px);
  background-color: rgba(0, 0, 0, 0.35);
}
.liniaal-container:where(:not(.liniaal-collapsed)) > .liniaal-content {
  max-width: 100vw;
}
.liniaal-container:where(:not(.liniaal-collapsed)) > .liniaal-content > aside.liniaal-menu > ul > li.liniaal-toggle > i {
  background-color: var(--theme-bg-color);
}

body > .header-menu::after {
  position: fixed;
  display: block;
  content: " ";
  top: 0;
  width: 100%;
  height: 0;
  z-index: 1;
  background-color: transparent;
}
body > .header-menu:has(~ .liniaal-container:not(.liniaal-collapsed))::after {
  height: 62px;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.35);
}
body .liniaal-container::before {
  content: " ";
  display: block;
}
body .liniaal-container.liniaal-collapsed::before {
  width: 0;
  height: 0;
  background-color: transparent;
}
body .liniaal-container.liniaal-collapsed .liniaal-content {
  left: calc(100vw - 65px - var(--scrollbar-width));
}
body .liniaal-container:not(.liniaal-collapsed) .liniaal-content {
  left: calc(100vw - var(--liniaal-width) - var(--scrollbar-width));
}

body:not(.resizing) > .header-menu::after {
  transition-duration: 0.2s;
  transition-property: background-color;
  transition-timing-function: ease;
}
body:not(.resizing) .liniaal-container::before {
  transition-duration: 0.2s;
  transition-timing-function: ease;
  transition-property: background-color;
}
body:not(.resizing) .liniaal-container .liniaal-content {
  transition-property: left;
  transition-timing-function: ease;
  transition-duration: 0.2s;
}

.popup-container {
  position: relative;
}

.popup-default {
  contain: content;
  position: absolute;
  z-index: 1;
  margin: 0;
  padding: 0;
  border-radius: 4px;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
  background-color: white;
  font-weight: normal;
  text-align: left;
  line-height: initial;
  font-size: 1rem;
  color: initial;
  --header-height: 60px;
}
.popup-default > header {
  position: relative;
  padding: 0 20px;
  line-height: var(--header-height);
}
.popup-default > header h1 {
  line-height: inherit;
  margin: 0;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: bold;
}
.popup-default > header + main {
  margin-top: 0;
}
.popup-default > main {
  margin: 20px;
}
.popup-default > footer {
  margin: 20px;
  text-align: right;
}

.popup-menu {
  contain: content;
  position: absolute;
  z-index: 1;
  margin: 0;
  padding: 0;
  border-radius: 4px;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
  background-color: white;
  font-family: "Trebuchet MS", sans-serif;
  font-weight: normal;
  font-size: 1rem;
  text-transform: none;
}
.popup-menu > * {
  display: block;
  height: 45px;
  line-height: 45px;
  padding: 0 15px;
  white-space: nowrap;
  cursor: pointer;
  text-align: left;
}
.popup-menu > *:not(.disabled) {
  color: #222;
}
.popup-menu > *:not(:first-child) {
  border-top: 1px solid #e5e5e5;
}
.popup-menu > *:hover:first-child:not(:has(> b)), .popup-menu > *:hover:not(:first-child) {
  background-color: #e5e5e5;
}
.popup-menu > * i:first-child {
  margin-right: 11px;
}
.popup-menu > * a {
  color: initial;
}
.popup-menu > * > a {
  display: inherit;
}
.popup-menu > :first-child > b {
  font-size: 14px;
}
.popup-menu > li > label {
  display: flex;
  gap: 10px;
  width: 100%;
  height: 100%;
  align-items: center;
}

.popup-default.popup-api-error {
  display: inline-block;
  width: 320px;
}
.popup-default.popup-api-error header h4 {
  font-weight: bold;
  line-height: 50px;
  padding: 0 20px;
  font-size: 16px;
}
.popup-default.popup-api-error footer .button {
  --bg-color: var(--theme-button-next-bg-color);
  --fg-color: var(--theme-button-next-fg-color);
  --height: 28px;
}

.apple-pwa-install-popup {
  position: absolute;
  top: 10px;
  left: 20px;
  z-index: 1;
  max-width: calc(100vw - 40px);
  margin: 0 auto;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
  text-align: center;
}
.apple-pwa-install-popup > header {
  padding-top: 20px;
  line-height: 1;
}
.apple-pwa-install-popup > header > h1 {
  line-height: 60px;
  font-size: 22px;
}
.apple-pwa-install-popup > main {
  padding: 0 15px 15px 15px;
  line-height: 1.5;
}
.apple-pwa-install-popup > footer {
  margin: 0;
  line-height: 50px;
  background-color: var(--theme-accent3-bg-color);
}
.apple-pwa-install-popup > footer img {
  width: 17px;
}

table.table-default {
  width: 100%;
}
table.table-default thead th {
  font-weight: bold;
}
table.table-default th, table.table-default td {
  height: 25px;
  padding: 0;
}

table.dataTable {
  width: 100%;
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
table.dataTable.scrollable thead {
  position: sticky;
  top: 0;
  background-color: var(--theme-bg-color);
}
table.dataTable > thead > tr > th {
  line-height: 24px;
  padding: 0 10px;
  border-bottom: 1px solid var(--theme-grey-line-color);
  color: var(--theme-light-fg-color);
  text-transform: uppercase;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
table.dataTable > thead > tr > th > a {
  color: var(--theme-light-fg-color);
}
table.dataTable > thead > tr.table-select-multi > td {
  background-color: var(--theme-table-row-even-bg-color);
}
table.dataTable > thead > tr.table-select-multi.table-select-selected > td {
  background-color: var(--theme-table-row-even-selected-bg-color);
}
table.dataTable > thead > tr.table-select-multi:hover > td {
  background-color: var(--theme-table-row-even-hover-bg-color);
}
table.dataTable > thead > tr.table-select-multi.table-select-selected:hover > td {
  background-color: var(--theme-table-row-even-selected-hover-bg-color);
}
table.dataTable > tbody > tr:not(.selected):nth-child(even) > td {
  background-color: var(--theme-table-row-even-bg-color);
}
table.dataTable > tbody > tr:not(.selected):nth-child(even).table-select-selected > td {
  background-color: var(--theme-table-row-even-selected-bg-color);
}
table.dataTable > tbody > tr:not(.selected):nth-child(even):hover > td {
  background-color: var(--theme-table-row-even-hover-bg-color);
}
table.dataTable > tbody > tr:not(.selected):nth-child(even).table-select-selected:hover > td {
  background-color: var(--theme-table-row-even-selected-hover-bg-color);
}
table.dataTable > tbody > tr:not(.selected):nth-child(odd) > td {
  background-color: var(--theme-table-row-odd-bg-color);
}
table.dataTable > tbody > tr:not(.selected):nth-child(odd).table-select-selected > td {
  background-color: var(--theme-table-row-odd-selected-bg-color);
}
table.dataTable > tbody > tr:not(.selected):nth-child(odd):hover > td {
  background-color: var(--theme-table-row-odd-hover-bg-color);
}
table.dataTable > tbody > tr:not(.selected):nth-child(odd).table-select-selected:hover > td {
  background-color: var(--theme-table-row-odd-selected-hover-bg-color);
}
table.dataTable > tbody > tr.selected > td, table.dataTable > tbody > tr.selected > td > *, table.dataTable > tbody > tr.selected:hover > td, table.dataTable > tbody > tr.selected:hover > td > a {
  background-color: var(--theme-link-active-bg-color);
  color: var(--theme-link-active-fg-color);
}
table.dataTable > thead > th.sort {
  cursor: pointer;
}
table.dataTable > thead > tr > :first-child,
table.dataTable > tbody > tr > :first-child {
  padding-left: 20px;
}
@media only screen and (max-width: 767.99px) {
  table.dataTable > thead > tr > :first-child,
  table.dataTable > tbody > tr > :first-child {
    padding-left: 10px;
  }
}
table.dataTable > thead > tr > :last-child,
table.dataTable > tbody > tr > :last-child {
  padding-right: 20px;
}
@media only screen and (max-width: 767.99px) {
  table.dataTable > thead > tr > :last-child,
  table.dataTable > tbody > tr > :last-child {
    padding-right: 10px;
  }
}
table.dataTable > thead > tr > td:has(.icon),
table.dataTable > tbody > tr > td:has(.icon) {
  font-size: 17px;
  padding: 0 12.5px;
}
table.dataTable > thead > tr > td:has(.icon):not(.disabled),
table.dataTable > tbody > tr > td:has(.icon):not(.disabled) {
  cursor: pointer;
}
table.dataTable > thead > tr > td:has(.icon) + td:last-child:not(:has(.icon)),
table.dataTable > tbody > tr > td:has(.icon) + td:last-child:not(:has(.icon)) {
  padding-left: 12.5px;
}
table.dataTable > thead > tr.verwijderd td, table.dataTable > thead > tr.verwijderd th,
table.dataTable > tbody > tr.verwijderd td,
table.dataTable > tbody > tr.verwijderd th {
  text-decoration: line-through;
}
table.dataTable > thead > tr > td,
table.dataTable > tbody > tr > td {
  height: 54px;
  line-height: 54px;
  vertical-align: middle;
  white-space: nowrap;
  padding: 0 10px;
}
table.dataTable > thead > tr > td.disabled,
table.dataTable > tbody > tr > td.disabled {
  color: var(--theme-dimmed-fg-color);
  cursor: default;
}
table.dataTable > thead > tr > td a,
table.dataTable > tbody > tr > td a {
  color: var(--theme-fg-color);
}
table.dataTable > thead > tr > td a:hover,
table.dataTable > tbody > tr > td a:hover {
  color: var(--theme-link-color);
}
table.dataTable > thead > tr > td img,
table.dataTable > tbody > tr > td img {
  vertical-align: middle;
}
table.dataTable > thead > tr > td.vak img,
table.dataTable > tbody > tr > td.vak img {
  width: 25px;
  height: 25px;
}
html.mouse table.dataTable > tbody > tr:not(:hover):not(.table-select-selected) .icon:not(.no-hide),
html.mouse table.dataTable > tbody > tr:not(:hover):not(.table-select-selected) .button {
  opacity: 0;
}
html.mouse table.dataTable > tbody > tr:not(:hover):not(.table-select-selected) td.table-select-cell {
  color: #aaa;
}

table.dataTable > thead > tr.table-select-multi .opdracht-plaatje .icon,
table.dataTable > tbody > tr.table-select-multi .opdracht-plaatje .icon {
  font-size: 20px;
}
table.dataTable > thead > tr.table-select-multi:not(.table-select-selected) .icon,
table.dataTable > thead > tr.table-select-multi:not(.table-select-selected) .button,
table.dataTable > tbody > tr.table-select-multi:not(.table-select-selected) .icon,
table.dataTable > tbody > tr.table-select-multi:not(.table-select-selected) .button {
  pointer-events: none;
}
table.dataTable > thead > tr > th.table-select-cell {
  width: 40px;
  min-width: 40px;
  padding: 0;
}
table.dataTable > thead > tr > td.table-select-cell,
table.dataTable > tbody > tr > td.table-select-cell {
  font-size: 15px;
  width: 40px;
  min-width: 40px;
  padding: 0;
  text-align: center;
  cursor: pointer;
  color: var(--theme-link-active-bg-color);
}
table.dataTable > thead > tr > td.table-select-cell::before, table.dataTable > thead > tr > td.table-select-cell.table-select-off::before,
table.dataTable > tbody > tr > td.table-select-cell::before,
table.dataTable > tbody > tr > td.table-select-cell.table-select-off::before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  font-weight: 400;
  font-family: "Font Awesome 6 Pro";
  content: "\f0c8";
}
table.dataTable > thead > tr > td.table-select-cell.table-select-half::before,
table.dataTable > tbody > tr > td.table-select-cell.table-select-half::before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  font-weight: 700;
  font-family: "Font Awesome 6 Pro";
  content: "\f146";
}
table.dataTable > thead > tr > td.table-select-cell.table-select-on::before,
table.dataTable > tbody > tr > td.table-select-cell.table-select-on::before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  font-weight: 700;
  font-family: "Font Awesome 6 Pro";
  content: "\f0c8";
}
table.dataTable > thead > tr.table-select-multi:not(.table-select-selected) > td.table-select-cell,
table.dataTable > tbody > tr.table-select-multi:not(.table-select-selected) > td.table-select-cell {
  color: #aaa;
}
table.dataTable > thead > tr.table-select-multi:not(.table-select-selected) > td.table-select-cell:hover,
table.dataTable > tbody > tr.table-select-multi:not(.table-select-selected) > td.table-select-cell:hover {
  color: var(--theme-link-active-bg-color);
}

table.dataTable td.type {
  text-align: center;
}
table.dataTable td.titel {
  width: 100%;
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
@media only screen and (max-width: 767.99px) {
  table.dataTable thead tr th.afrond, table.dataTable thead tr th.talk, table.dataTable thead tr th.status {
    max-width: 3ch;
    overflow: hidden;
  }
}

table.dataTable.grid {
  display: grid;
  width: 100%;
  --c3: 1fr;
}
table.dataTable.grid:has(> thead > tr:first-child > :last-child:nth-child(1)) {
  --c1: min-content;
  --values:  var(--c1, auto);
  grid-template-columns: var(--values);
}
table.dataTable.grid:has(> thead > tr:first-child > :last-child:nth-child(2)) {
  --c2: min-content;
  --values:  var(--c1, auto) var(--c2, auto);
  grid-template-columns: var(--values);
}
table.dataTable.grid:has(> thead > tr:first-child > :last-child:nth-child(3)) {
  --c3: min-content;
  --values:  var(--c1, auto) var(--c2, auto) var(--c3, auto);
  grid-template-columns: var(--values);
}
table.dataTable.grid:has(> thead > tr:first-child > :last-child:nth-child(4)) {
  --c4: min-content;
  --values:  var(--c1, auto) var(--c2, auto) var(--c3, auto) var(--c4, auto);
  grid-template-columns: var(--values);
}
table.dataTable.grid:has(> thead > tr:first-child > :last-child:nth-child(5)) {
  --c5: min-content;
  --values:  var(--c1, auto) var(--c2, auto) var(--c3, auto) var(--c4, auto) var(--c5, auto);
  grid-template-columns: var(--values);
}
table.dataTable.grid:has(> thead > tr:first-child > :last-child:nth-child(6)) {
  --c6: min-content;
  --values:  var(--c1, auto) var(--c2, auto) var(--c3, auto) var(--c4, auto) var(--c5, auto) var(--c6, auto);
  grid-template-columns: var(--values);
}
table.dataTable.grid:has(> thead > tr:first-child > :last-child:nth-child(7)) {
  --c7: min-content;
  --values:  var(--c1, auto) var(--c2, auto) var(--c3, auto) var(--c4, auto) var(--c5, auto) var(--c6, auto) var(--c7, auto);
  grid-template-columns: var(--values);
}
table.dataTable.grid:has(> thead > tr:first-child > :last-child:nth-child(8)) {
  --c8: min-content;
  --values:  var(--c1, auto) var(--c2, auto) var(--c3, auto) var(--c4, auto) var(--c5, auto) var(--c6, auto) var(--c7, auto) var(--c8, auto);
  grid-template-columns: var(--values);
}
table.dataTable.grid:has(> thead > tr:first-child > :last-child:nth-child(9)) {
  --c9: min-content;
  --values:  var(--c1, auto) var(--c2, auto) var(--c3, auto) var(--c4, auto) var(--c5, auto) var(--c6, auto) var(--c7, auto) var(--c8, auto) var(--c9, auto);
  grid-template-columns: var(--values);
}
table.dataTable.grid:has(> thead > tr:first-child > :last-child:nth-child(10)) {
  --c10: min-content;
  --values:  var(--c1, auto) var(--c2, auto) var(--c3, auto) var(--c4, auto) var(--c5, auto) var(--c6, auto) var(--c7, auto) var(--c8, auto) var(--c9, auto) var(--c10, auto);
  grid-template-columns: var(--values);
}
table.dataTable.grid:has(> thead > tr:first-child > :last-child:nth-child(11)) {
  --c11: min-content;
  --values:  var(--c1, auto) var(--c2, auto) var(--c3, auto) var(--c4, auto) var(--c5, auto) var(--c6, auto) var(--c7, auto) var(--c8, auto) var(--c9, auto) var(--c10, auto) var(--c11, auto);
  grid-template-columns: var(--values);
}
table.dataTable.grid:has(> thead > tr:first-child > :last-child:nth-child(12)) {
  --c12: min-content;
  --values:  var(--c1, auto) var(--c2, auto) var(--c3, auto) var(--c4, auto) var(--c5, auto) var(--c6, auto) var(--c7, auto) var(--c8, auto) var(--c9, auto) var(--c10, auto) var(--c11, auto) var(--c12, auto);
  grid-template-columns: var(--values);
}
table.dataTable.grid:has(> thead > tr:first-child > :last-child:nth-child(13)) {
  --c13: min-content;
  --values:  var(--c1, auto) var(--c2, auto) var(--c3, auto) var(--c4, auto) var(--c5, auto) var(--c6, auto) var(--c7, auto) var(--c8, auto) var(--c9, auto) var(--c10, auto) var(--c11, auto) var(--c12, auto) var(--c13, auto);
  grid-template-columns: var(--values);
}
table.dataTable.grid:has(> thead > tr:first-child > :last-child:nth-child(14)) {
  --c14: min-content;
  --values:  var(--c1, auto) var(--c2, auto) var(--c3, auto) var(--c4, auto) var(--c5, auto) var(--c6, auto) var(--c7, auto) var(--c8, auto) var(--c9, auto) var(--c10, auto) var(--c11, auto) var(--c12, auto) var(--c13, auto) var(--c14, auto);
  grid-template-columns: var(--values);
}
table.dataTable.grid:has(> thead > tr:first-child > :last-child:nth-child(15)) {
  --c15: min-content;
  --values:  var(--c1, auto) var(--c2, auto) var(--c3, auto) var(--c4, auto) var(--c5, auto) var(--c6, auto) var(--c7, auto) var(--c8, auto) var(--c9, auto) var(--c10, auto) var(--c11, auto) var(--c12, auto) var(--c13, auto) var(--c14, auto) var(--c15, auto);
  grid-template-columns: var(--values);
}
table.dataTable.grid:has(> thead > tr:first-child > :last-child:nth-child(16)) {
  --c16: min-content;
  --values:  var(--c1, auto) var(--c2, auto) var(--c3, auto) var(--c4, auto) var(--c5, auto) var(--c6, auto) var(--c7, auto) var(--c8, auto) var(--c9, auto) var(--c10, auto) var(--c11, auto) var(--c12, auto) var(--c13, auto) var(--c14, auto) var(--c15, auto) var(--c16, auto);
  grid-template-columns: var(--values);
}
table.dataTable.grid:has(> thead > tr:first-child > :last-child:nth-child(17)) {
  --c17: min-content;
  --values:  var(--c1, auto) var(--c2, auto) var(--c3, auto) var(--c4, auto) var(--c5, auto) var(--c6, auto) var(--c7, auto) var(--c8, auto) var(--c9, auto) var(--c10, auto) var(--c11, auto) var(--c12, auto) var(--c13, auto) var(--c14, auto) var(--c15, auto) var(--c16, auto) var(--c17, auto);
  grid-template-columns: var(--values);
}
table.dataTable.grid:has(> thead > tr:first-child > :last-child:nth-child(18)) {
  --c18: min-content;
  --values:  var(--c1, auto) var(--c2, auto) var(--c3, auto) var(--c4, auto) var(--c5, auto) var(--c6, auto) var(--c7, auto) var(--c8, auto) var(--c9, auto) var(--c10, auto) var(--c11, auto) var(--c12, auto) var(--c13, auto) var(--c14, auto) var(--c15, auto) var(--c16, auto) var(--c17, auto) var(--c18, auto);
  grid-template-columns: var(--values);
}
table.dataTable.grid:has(> thead > tr:first-child > :last-child:nth-child(19)) {
  --c19: min-content;
  --values:  var(--c1, auto) var(--c2, auto) var(--c3, auto) var(--c4, auto) var(--c5, auto) var(--c6, auto) var(--c7, auto) var(--c8, auto) var(--c9, auto) var(--c10, auto) var(--c11, auto) var(--c12, auto) var(--c13, auto) var(--c14, auto) var(--c15, auto) var(--c16, auto) var(--c17, auto) var(--c18, auto) var(--c19, auto);
  grid-template-columns: var(--values);
}
table.dataTable.grid:has(> thead > tr:first-child > :last-child:nth-child(20)) {
  --c20: min-content;
  --values:  var(--c1, auto) var(--c2, auto) var(--c3, auto) var(--c4, auto) var(--c5, auto) var(--c6, auto) var(--c7, auto) var(--c8, auto) var(--c9, auto) var(--c10, auto) var(--c11, auto) var(--c12, auto) var(--c13, auto) var(--c14, auto) var(--c15, auto) var(--c16, auto) var(--c17, auto) var(--c18, auto) var(--c19, auto) var(--c20, auto);
  grid-template-columns: var(--values);
}
table.dataTable.grid tbody tr td.titel {
  width: unset;
}
table.dataTable.grid thead,
table.dataTable.grid tbody,
table.dataTable.grid tr {
  display: contents;
}
table.dataTable.grid thead tr:first-child td,
table.dataTable.grid thead tr:first-child th {
  position: sticky;
  top: 0;
  background-color: white;
}
table.dataTable.grid thead tr:nth-child(2) td,
table.dataTable.grid thead tr:nth-child(2) th {
  position: sticky;
  top: 24px;
  background-color: white;
}

div#event_screen {
  position: fixed;
  z-index: 1;
  top: 0px;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: content-box;
  background: rgba(0, 0, 0, 0.5);
  overflow-y: auto;
}
div#event_screen.foto-lightbox {
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
}
div#event_screen.foto-lightbox .sluitkruisje {
  font-size: 30px;
}
div#event_screen.foto-lightbox .helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
div#event_screen.foto-lightbox img, div#event_screen.foto-lightbox video {
  max-width: calc(100% - 100px);
  margin-top: 50px;
  margin-bottom: 50px;
  border: 2px solid #ccc;
  vertical-align: middle;
}
div#event_screen.foto-lightbox img.datap {
  max-width: 98%;
  border: none;
}
div#event_screen.foto-lightbox .viewer-popup {
  width: 80%;
  height: 80%;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ccc;
}

.modal-overlay {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  display: table;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}
.modal-overlay .modal-wrapper {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.modal-overlay .modal-wrapper > * {
  text-align: initial;
  vertical-align: initial;
}

#wait_screen {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background: rgba(0, 0, 0, 0.3);
}
#wait_screen .centered .close {
  float: right;
  top: -13px;
  position: relative;
  right: 6px;
}
#wait_screen .centered .content {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  width: 300px;
  height: 200px;
  border-radius: 4px;
}
#wait_screen .centered .content i.fa {
  font-size: 25px;
}

#confirm {
  width: 320px;
  height: auto;
  min-height: initial;
  position: absolute;
  left: 33%;
  top: 240px;
  padding: 20px;
  border-radius: 3px;
  background: white;
  color: #636363;
  font-size: 13px;
}
#confirm.large {
  width: 400px;
}
#confirm.xlarge {
  width: 600px;
}
#confirm.warning-betaalstatus {
  width: 360px;
}
#confirm.warning-betaalstatus h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}
#confirm.warning-betaalstatus p {
  font-size: 14px;
}
#confirm input {
  line-height: 25px;
}
#confirm label {
  clear: both;
  display: block;
}
#confirm label:last-child {
  margin-bottom: 10px;
}
#confirm input.number {
  width: 3em;
  display: inline-block;
  margin-left: 1em;
}
#confirm p {
  margin: 0 0 30px;
}
#confirm footer {
  text-align: right;
  padding: 15px 0 5px 0;
}

.ux-checkbox:not(.readonly) {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}

.youtube-lazy {
  display: table;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  cursor: pointer;
  line-height: 100%;
  text-align: center;
}

.youtube-lazy i {
  display: table-cell;
  font-size: 35pt;
  vertical-align: middle;
  color: black;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
  opacity: 0.7;
}

.youtube-lazy:hover i {
  color: #458cff;
  text-shadow: 0 0 10px black;
  opacity: 1;
}

.youtube-player {
  width: 100%;
  height: 100%;
  min-height: 180px;
  border: 0;
}

.badge {
  box-sizing: border-box;
  display: inline-block;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  vertical-align: super;
  border-radius: 100%;
  margin-left: 0.3em;
  padding: 0 4px;
  text-align: center;
  font-weight: normal;
  font-size: 11px;
  font-style: normal;
}
.badge.badge-todo {
  background-color: red;
  color: white;
}

.tabs-container > .tabs-nav {
  white-space: nowrap;
  overflow-x: auto;
}
.tabs-container > .tabs-nav .tabs-tab {
  display: inline-block;
  -webkit-user-select: none;
  user-select: none;
}
.tabs-container > .tabs-nav .tabs-tab.selected {
  background-color: blue;
  color: white;
}

.tooltip {
  position: absolute;
  z-index: 1;
  width: max-content;
  max-width: 50vw;
  top: 0;
  left: 0;
  padding: 0.5em;
  border-radius: 4px;
  background-color: white;
  color: #222;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.dialog.dialog-account-settings {
  height: auto;
  width: 760px;
}
.dialog.dialog-account-settings > header {
  padding: 0 10px;
  background-color: transparent;
  color: black;
}
.dialog.dialog-account-settings > header > h1 {
  color: inherit;
  text-align: left;
  font-weight: normal;
}
.dialog.dialog-account-settings > main {
  height: auto;
}

body.aanmelden-eerste-keer {
  background-color: #b7cf3a;
}
body.aanmelden-eerste-keer > #wrapper > .panel.panel-notice-require-mfa {
  margin: 50px auto;
  text-align: center;
  background-color: white;
  color: #d0021a;
  padding: 20px;
}
body.aanmelden-eerste-keer > #wrapper > .panel.panel-account-settings {
  position: static;
  margin: 50px auto;
}
body.aanmelden-eerste-keer > #wrapper > .panel.panel-account-settings > h1 {
  line-height: 50px;
  margin: 0;
  padding-left: 20px;
  font-size: 22px;
}

body.aanmelden-eerste-keer .account-settings footer .cancel, body.aanmelden-eerste-keer .account-settings footer .save {
  display: none;
}
body.aanmelden-eerste-keer .account-settings[active-tab="0"] footer .prev {
  display: none;
}

body:not(.aanmelden-eerste-keer) .account-settings footer .prev, body:not(.aanmelden-eerste-keer) .account-settings footer .next {
  display: none;
}

.account-settings {
  height: inherit;
}
.account-settings form {
  height: inherit;
}
.account-settings form > .tabs-container {
  height: calc(100% - 80px);
}
.account-settings form > .tabs-container > .tabs-content {
  height: calc(100% - 60px - 20px);
  overflow-y: auto;
  padding: 20px;
}
.account-settings form > footer {
  line-height: 40px;
  text-align: right;
  padding: 20px;
}
.account-settings form > footer > button {
  margin-left: 10px;
}
.account-settings form .accountsettings-setting {
  line-height: 37px;
  white-space: nowrap;
}
.account-settings form .accountsettings-setting > label {
  display: block;
}
.account-settings form .accountsettings-setting > label > :first-child {
  display: inline-block;
  width: 25%;
  min-width: 25ch;
  vertical-align: top;
}
.account-settings form .accountsettings-setting > span.label {
  display: inline-block;
  width: 25%;
  min-width: 25ch;
  vertical-align: top;
}
.account-settings form .accountsettings-setting > span.label + ul {
  display: inline-block;
  max-width: calc(100% - max(25%, 25ch));
}
.account-settings form .accountsettings-setting > span.label + ul > li > label > i {
  display: block;
  line-height: 1.7;
  padding-left: 2em;
  white-space: break-spaces;
}
.account-settings form .accountsettings-setting.fake-setting > label > :not(:first-child) {
  display: inline-block;
  max-width: calc(100% - max(25%, 25ch));
  white-space: break-spaces;
  line-height: 1.7;
}
.account-settings form .accountsettings-setting.setting-avatar {
  line-height: 40px;
}
.account-settings form .accountsettings-setting.setting-avatar img.avatar-image {
  display: inline-block;
  vertical-align: middle;
  width: 40px;
}
.account-settings form .accountsettings-setting.setting-avatar img.avatar-image:hover {
  cursor: pointer;
  filter: brightness(0.9);
}
.account-settings form .tfa-container:not(.mode-generated) .tfa-setting-code,
.account-settings form .tfa-container:not(.mode-generated) .tfa-setting-totp-secret,
.account-settings form .tfa-container:not(.mode-generated) .tfa-setting-qr-code {
  display: none;
}
.account-settings form .tfa-container .tfa-validation-icon.tfa-token-error::before {
  content: "ERROR";
  color: red;
  padding-left: 1em;
}
.account-settings form .tfa-container .tfa-validation-icon.tfa-token-ok::before {
  content: "OK";
  color: green;
  padding-left: 1em;
}
.account-settings form .tfa-container i {
  margin-left: 2em;
  font-style: normal;
}
.account-settings form .tfa-container input[name=totp_token] {
  box-sizing: content-box;
  width: 6ch;
}
.account-settings form .tabs-pane.aankopen h3 {
  font-size: 18px;
  margin: 2em 0 0 0;
}
.account-settings form .tabs-pane.aankopen p {
  margin: 0.5em 0;
}
.account-settings form .tabs-pane.aankopen a {
  font-weight: bold;
}
.account-settings form .tabs-pane.voorwaarden .voorwaarden {
  padding: 20px;
  border-radius: 4px;
  border: 1px solid #888;
  background-color: var(--theme-accent-bg-color);
  color: #888;
}
.account-settings form .tabs-pane.voorwaarden .voorwaarden h2 {
  font-size: 18px;
  font-weight: normal;
}
.account-settings form input[type=text], .account-settings form input[type=password], .account-settings form input[type=email], .account-settings form select {
  border-radius: 0;
  border: solid 1px #e7e7e7;
  background-color: var(--theme-accent4-bg-color);
  color: var(--theme-fg-color);
  padding: 5px;
  width: 200px;
}
.account-settings form input[type=text]:focus:not(:read-only), .account-settings form input[type=password]:focus:not(:read-only), .account-settings form input[type=email]:focus:not(:read-only), .account-settings form select:focus:not(:read-only) {
  border-color: #99bfff;
  background-color: white;
}
.account-settings form input[type=text][type]:read-only, .account-settings form input[type=password][type]:read-only, .account-settings form input[type=email][type]:read-only, .account-settings form select[type]:read-only {
  border: none;
  background-color: transparent;
}
.account-settings form input.initialen {
  width: 4em;
}
.account-settings form input:invalid {
  border-color: red;
}
.account-settings form input:invalid::after {
  display: block;
  content: attr(data-errormsg);
}
.account-settings form input[type=checkbox]:invalid {
  box-shadow: 0 0 0px 1px red;
}
.account-settings form input:not(:invalid) + .validation-errormsg {
  display: none;
}
.account-settings form .validation-errormsg {
  display: inline-block;
  padding-left: 1em;
  color: red;
}
.account-settings form input ~ .error-msg {
  color: red;
  padding-left: 1em;
}
.account-settings form input:not(.error) + .error-not-same {
  display: none;
}
.account-settings form input:not(.error-same) ~ .error-same {
  display: none;
}
.account-settings form input[name=background_color] {
  appearance: none;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  margin: 0;
  border-radius: 100%;
  font: inherit;
  margin-right: 5px;
  vertical-align: middle;
  display: inline-grid;
  place-content: center;
}
.account-settings form input[name=background_color][value=light] {
  background-color: #d2d2d2;
}
.account-settings form input[name=background_color][value=dark] {
  background-color: #444;
}
.account-settings form input[name=background_color]:checked {
  border: 3px solid white;
}
.account-settings form input[name=background_color]::before {
  display: inline-grid;
  place-content: center;
  content: "";
  box-sizing: border-box;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
}
.account-settings form input[name=background_color]:checked::before {
  transform: scale(1);
  border: 3px solid #00339b;
}
.account-settings form table.invoices {
  width: 100%;
}
.account-settings form table.invoices thead tr {
  font-weight: bold;
  background-color: var(--theme-accent-bg-color);
}
.account-settings form table.invoices tbody tr.invoice {
  line-height: 30px;
}
.account-settings form table.invoices tbody tr.product {
  font-style: italic;
  line-height: 20px;
}
.account-settings form table.invoices tbody tr.product td:nth-child(2) {
  padding-left: 1em;
}
.account-settings form .vakken {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}
.account-settings form .vakken .vak {
  display: inline-block;
  width: 80px;
  margin: 5px;
  padding: 5px;
  border-radius: 5px;
}
.account-settings form .vakken .vak.selected {
  background-color: blue;
  color: white;
}
.account-settings form .vakken .vak img {
  display: inline-block;
  width: 40px;
  height: 40px;
}
.account-settings form .vakken .vak span {
  display: block;
  overflow: hidden;
}
.account-settings form .background-settings {
  display: flex;
}
@media only screen and (max-width: 991.99px) {
  .account-settings form .background-settings {
    flex-direction: column;
  }
  .account-settings form .background-settings > section + section {
    margin-top: 40px;
  }
}
.account-settings form .background-settings [data-style] {
  display: inline-block;
  width: 44px;
  height: 44px;
  border: 2px solid white;
  cursor: pointer;
}
.account-settings form .background-settings [data-style].selected {
  border-color: blue;
}
.account-settings form .background-settings section h3 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}
.account-settings form .background-settings .background-gradients {
  display: grid;
  grid-template-columns: repeat(6, auto);
  grid-template-rows: repeat(4, auto);
  justify-content: left;
  align-content: start;
  margin-right: 10px;
}
.account-settings form .background-settings .background-colors-container {
  display: flex;
  flex-direction: column;
}
.account-settings form .background-settings .background-colors-container .background-colors {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  justify-content: left;
  align-content: start;
  margin-right: 10px;
}
.account-settings form .background-settings .background-colors-container .custom-color-container {
  display: flex;
  justify-items: left;
}
.account-settings form .background-settings .background-colors-container .custom-color-container input[type=color] {
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  margin: 0;
  border: 0;
  width: 0;
  height: 0;
}
.account-settings form .background-settings .background-colors-container .custom-color-container .custom-color {
  display: inline-block;
  height: 44px;
  line-height: 40px;
  margin-left: 10px;
  font-size: 16px;
  font-weight: normal;
  cursor: pointer;
}
.account-settings form .background-settings .background-images-container {
  display: flex;
  flex-direction: column;
}
.account-settings form .background-settings .background-images-container .custom-background-container {
  display: flex;
  justify-items: left;
}
.account-settings form .background-settings .background-images-container .custom-background-container .custom-background {
  display: block;
  height: 44px;
  line-height: 40px;
  margin-left: 10px;
  font-size: 16px;
  font-weight: normal;
  cursor: pointer;
}
.account-settings form .background-settings .background-images-container .custom-background-container img {
  width: 44px;
  height: 44px;
}
.account-settings form .background-settings .background-images-container .background-images {
  display: grid;
  grid-template-columns: repeat(6, auto);
  justify-content: left;
  align-content: start;
}
.account-settings form .background-settings .background-images-container .background-images * img {
  width: 44px;
  height: 44px;
}

body.aanmelden-eerste-keer {
  background-color: #b7cf3a;
}

.calendar {
  width: 100%;
  height: 100%;
}
.calendar, .calendar * {
  box-sizing: border-box;
}
.calendar > header {
  display: flex;
  line-height: 60px;
  height: 60px;
  padding: 0 20px;
  -webkit-user-select: none;
  user-select: none;
}
.calendar > header > * {
  flex: 1;
}
.calendar > header > *:last-child {
  text-align: right;
}
@media only screen and (max-width: 767.99px) {
  .calendar > header > *:last-child {
    flex-grow: 0;
  }
}
.calendar > header nav {
  text-align: left;
  font-size: 15px;
  white-space: nowrap;
}
.calendar > header nav .week-nr {
  padding-right: 2em;
}
.calendar > header nav .nav {
  display: inline-block;
  height: 100%;
  color: var(--theme-link-color);
  cursor: pointer;
}
.calendar > header nav .nav::before {
  padding: 0 0.5em;
}
.calendar > header nav .nav-prev-week::before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  font-weight: 400;
  font-family: "Font Awesome 6 Pro";
  content: "\f053";
}
.calendar > header nav .nav-next-week::before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  font-weight: 400;
  font-family: "Font Awesome 6 Pro";
  content: "\f054";
}
.calendar > header .select-view {
  display: flex;
  align-content: center;
  justify-content: center;
}
@media only screen and (max-width: 767.99px) {
  .calendar > header .select-view {
    display: none;
  }
}
.calendar > header .select-view .button {
  font-size: 14px;
  font-weight: bold;
  --height: 30px;
}
.calendar > header .navright {
  display: flex;
  justify-content: right;
  column-gap: 10px;
}
.calendar > header .navright .calendar-filter {
  position: relative;
}
.calendar > header .navright .calendar-filter .button-circle {
  --height: 34px;
  vertical-align: middle;
}
.calendar > header .navright .calendar-filter .popup-default {
  position: absolute;
  right: 0;
  z-index: 1;
  text-align: left;
  padding: 10px 0;
}
.calendar > header .navright .calendar-filter .popup-default li {
  display: flex;
  column-gap: 10px;
  align-items: center;
  line-height: 40px;
  padding: 0 15px;
  cursor: pointer;
  white-space: nowrap;
}
.calendar > header .navright .calendar-filter .popup-default li:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.calendar > header .navright .calendar-filter .popup-default li .calendar-filter-checkbox {
  flex: 0 0 30px;
  display: flex;
  width: 30px;
  height: 30px;
  background-color: var(--calendar-color);
  border-radius: 100%;
  text-align: center;
  align-items: center;
}
.calendar > header .navright .calendar-filter .popup-default li .calendar-filter-checkbox > i {
  flex: 1;
  color: white;
  text-shadow: 0px 0px 1px black;
}
.calendar > header .navright > .icon {
  font-size: 18px;
  color: var(--theme-link-color);
  cursor: pointer;
}
.calendar > main {
  height: calc(100% - 60px);
}
@media only screen and (min-width: 768px) {
  .calendar > main > section {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 25px minmax(0, 1fr);
  }
}
html:not(.mobile) .calendar > main > section {
  height: 100%;
}

@media only screen and (orientation: landscape) {
  .calendar > main > section {
    height: 100%;
  }
}
.calendar > main > section .header {
  position: relative;
  grid-row: 1;
  display: flex;
  line-height: 25px;
  border: 1px solid #e6e6e6;
  border-left: none;
  padding: 0 5px;
}
.calendar > main > section .header[key="7"] {
  border-right: none;
}
.calendar > main > section .header.today > span {
  font-weight: bold;
  color: red;
}
.calendar > main > section .header > a {
  margin-left: auto;
}
.calendar > main > section .header > a + .popup-menu,
.calendar > main > section .header > a + .popup-default {
  top: 25px;
  right: 3px;
}
@media only screen and (max-width: 767.99px) {
  .calendar > main > section .header {
    padding: 0 15px;
    background-color: var(--theme-accent-bg-color);
  }
  .calendar > main > section .header > a + .popup-default:not(.calendar-add-to-day-menu) {
    top: -60px;
    max-height: calc(100vh - 14vmin);
    overflow-y: scroll;
  }
}
@media not (orientation: portrait) {
  .calendar > main > section .header[key="1"] > a + .popup-menu,
  .calendar > main > section .header[key="1"] > a + .popup-default, .calendar > main > section .header[key="2"] > a + .popup-menu,
  .calendar > main > section .header[key="2"] > a + .popup-default, .calendar > main > section .header[key="3"] > a + .popup-menu,
  .calendar > main > section .header[key="3"] > a + .popup-default {
    right: unset;
  }
  .calendar > main > section .header[key="1"] > a + .popup-default.popup-nieuwe-opdracht {
    right: calc(100% - 4px - 320px);
  }
  .calendar > main > section .header[key="1"] > a + .popup-default.popup-agendamelding {
    right: calc(100% - 4px - 350px);
  }
  .calendar > main > section .header[key="2"] > a + .popup-default.popup-nieuwe-opdracht {
    right: calc(200% - 4px - 320px);
  }
  .calendar > main > section .header[key="2"] > a + .popup-default.popup-agendamelding {
    right: calc(200% - 4px - 350px);
  }
  .calendar > main > section .header[key="3"] > a + .popup-default.popup-nieuwe-opdracht {
    right: calc(300% - 4px - 320px);
  }
  .calendar > main > section .header[key="3"] > a + .popup-default.popup-agendamelding {
    right: calc(300% - 4px - 350px);
  }
}
.calendar > main > section > .items {
  position: relative;
  height: 100%;
  overflow-y: auto;
  padding: 3px;
}
@media only screen and (max-width: 767.99px) {
  .calendar > main > section > .items {
    height: unset;
    overflow-y: unset;
  }
}
.calendar > main > section > .items:not(:last-child) {
  border-right: 1px solid #e6e6e6;
}
.calendar > main > section > .items {
  scrollbar-width: thin;
  /*
  &::-webkit-scrollbar-track {
  	background: orange;
  }
  &::-webkit-scrollbar-thumb {
  	background-color: blue;
  	border-radius: 20px;
  	border: 3px solid orange;
  }
  */
}
.calendar > main > section > .items::-webkit-scrollbar {
  width: 12px;
}
.calendar > main > section > .items.today {
  background-color: var(--theme-accent5-bg-color);
}
.calendar > main > section > .items.dragover {
  background-color: rgb(215, 247, 215) !important;
}
.calendar > main > section > .items.dragover * {
  pointer-events: none;
}
.calendar > main > section > .items .calendar-item {
  display: block;
  height: 70px;
  margin-bottom: 4px;
  padding: 6px 7px;
  border: 1px solid;
  border-radius: 3px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
body.docent-pagina .calendar > main > section > .items .calendar-item {
  border-color: #ddd;
  background-color: #f5f5f5;
}

.calendar > main > section > .items .calendar-item.calendar-item-agendamelding {
  border-color: #ddd;
  background-color: white;
}
.calendar > main > section > .items .calendar-item.calendar-item-uitwerking-stap {
  border-color: #ddd;
  background-color: white;
}
.calendar > main > section > .items .calendar-item.calendar-item-uitwerking.status-todo {
  border-color: #ffc5c5;
  background-color: #ffe0e0;
}
.calendar > main > section > .items .calendar-item.calendar-item-uitwerking.status-ingeleverd {
  border-color: #f2f289;
  background-color: #ffffb3;
}
.calendar > main > section > .items .calendar-item.calendar-item-uitwerking.status-afgerond {
  border-color: #c7ffc1;
  background-color: #deffd6;
}
.calendar > main > section > .items .calendar-item.calendar-item-uitwerking.toets {
  color: #e23232;
}
.calendar > main > section > .items .calendar-item[draggable=true]:hover {
  cursor: grab;
}
.calendar > main > section > .items .calendar-item.dropping, .calendar > main > section > .items .calendar-item.dragging {
  opacity: 0.5;
}
.calendar > main > section > .items .calendar-item > header {
  display: flex;
  height: 21.75px;
  line-height: 21.75px;
  font-size: 15px;
}
.calendar > main > section > .items .calendar-item > header > :last-child {
  margin-left: auto;
}
.calendar > main > section > .items .calendar-item > header .calendar-item-icon {
  color: var(--calendar-color);
}
.calendar > main > section > .items .calendar-item > header .stap {
  font-size: 12px;
  padding-left: 0.3em;
  color: #e02020;
}
.calendar > main > section > .items .calendar-item > header .stap.gedaan {
  color: green;
}
.calendar > main > section > .items .calendar-item > header .time {
  font-size: 12px;
  color: #777;
  padding-left: 0.3em;
}
.calendar > main > section > .items .calendar-item > main > * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendar > main > section > .items .calendar-item > main .calendar-item-vak {
  height: 18.85px;
  line-height: 18.85px;
  font-size: 13px;
  font-weight: bold;
}
.calendar > main > section > .items .calendar-item > main .calendar-item-vak img {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  margin-right: 0.3em;
  display: none;
}
.calendar > main > section > .items .calendar-item > main .calendar-item-vak .vaknaam {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
}
.calendar > main > section > .items .calendar-item > main .calendar-item-title {
  height: 17.4px;
  line-height: 17.4px;
  font-size: 12px;
  overflow: hidden;
}
.calendar > main > section > .items .calendar-item > main .calendar-item-stapnaam {
  display: none;
  color: #e54444;
}
.calendar:not(.view-time) .timeline-header, .calendar:not(.view-time) .timeline-body {
  display: none;
}
.calendar.view-time > main {
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .calendar.view-time > main > section {
    display: grid;
    grid-template-columns: calc(10px + 5ch) repeat(7, 1fr);
  }
}
.calendar.view-time > main > section .timeline-body {
  border-right: 1px solid #e6e6e6;
}
.calendar.view-time > main > section .timeline-body > span {
  display: block;
  font-size: 12px;
  color: #999;
  padding-left: 5px;
}
.calendar.view-time > main > section:first-of-type {
  height: 30%;
  margin-right: var(--scrollbar-width);
  border-bottom: 1px solid var(--theme-grey-line-color);
}
@media only screen and (max-width: 767.99px) and (orientation: landscape) {
  .calendar.view-time > main > section:first-of-type {
    height: 25px;
  }
  .calendar.view-time > main > section:first-of-type .items, .calendar.view-time > main > section:first-of-type .timeline-body {
    display: none;
  }
}
.calendar.view-time > main > section:first-of-type .header[key="7"] {
  border-right: 1px solid #e6e6e6;
}
.calendar.view-time > main > section:first-of-type .items .calendar-item {
  height: auto;
}
.calendar.view-time > main > section:first-of-type .items .calendar-item > header,
.calendar.view-time > main > section:first-of-type .items .calendar-item > main .calendar-item-vak {
  display: none;
}
.calendar.view-time > main > section:last-of-type {
  grid-template-rows: calc(1440px * var(--timeline-scale, 1));
  height: 100%;
  overflow-y: auto;
  scrollbar-gutter: stable;
  position: relative;
}
.calendar.view-time > main > section:last-of-type .timeline-body > span,
.calendar.view-time > main > section:last-of-type .calendar-item {
  position: absolute;
}
.calendar.view-time > main > section:last-of-type .timeline-body > span {
  width: 100%;
  overflow: hidden;
  min-height: 1px;
}
.calendar.view-time > main > section:last-of-type .timeline-body > span::before {
  content: " ";
  display: block;
  width: 100%;
  position: absolute;
  left: calc(10px + 5ch);
  border-top: 1px solid #efefef;
}
.calendar.view-time > main > section:last-of-type .items {
  background-color: rgba(0, 0, 0, 0.04);
}
.calendar.view-time > main > section:last-of-type .items .calendar-item {
  left: 3px;
  right: 3px;
  overflow: hidden;
}
body.docent-pagina .calendar.view-time > main > section:last-of-type .items .calendar-item {
  background-color: white;
}

.calendar.view-time > main > section:last-of-type .items .calendar-item .calendar-item-stapnaam {
  display: block;
}

.popup-agendamelding {
  z-index: 1;
  width: 350px;
  max-width: 100vw;
}
.popup-agendamelding > form > main {
  padding: 20px;
}
.popup-agendamelding > form > main > *:not(:last-child) {
  margin-bottom: 15px;
}
.popup-agendamelding > form > main input[name=titel] {
  width: 100%;
  line-height: 35px;
  font-size: 14px;
  padding-left: 0.3em;
}
.popup-agendamelding > form > main .calendar-item-icon {
  color: var(--calendar-color);
}
.popup-agendamelding > form > main .period-picker label {
  font-size: 16px;
}
.popup-agendamelding > form > main .period-picker label .pepicon3 {
  font-size: 16px;
}
.popup-agendamelding > form > main .period-picker label input {
  font-size: 13px;
}
.popup-agendamelding > form > main textarea {
  width: 100%;
  height: 100px;
  resize: vertical;
}
.popup-agendamelding > form > main + main {
  margin: 0;
  padding: 20px 20px 0 20px;
  border-top: 1px solid var(--theme-grey-line-color);
}
.popup-agendamelding footer {
  text-align: right;
  padding: 20px;
}
.popup-agendamelding footer button {
  margin-left: 0.3em;
}
.popup-agendamelding footer .swap {
  display: inline-grid;
}
.popup-agendamelding footer .swap > *:first-child {
  grid-row: 1;
  grid-column: 2;
}
.popup-agendamelding footer .swap > *:last-child {
  grid-row: 1;
  grid-column: 1;
}

.calendar-settings {
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  width: 400px;
  max-width: 100vw;
  height: auto;
  max-height: calc(100vh - 60px - 40px);
  margin-top: 60px;
  overflow-y: auto;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.calendar-settings > main {
  margin: 0;
}
.calendar-settings h3 {
  font-size: 16px;
  margin: 0;
}
.calendar-settings p {
  margin: 0.5em 0;
  line-height: 2em;
}
.calendar-settings section {
  padding: 20px;
}
.calendar-settings section + section {
  border-top: 1px solid var(--theme-grey-line-color);
}
.calendar-settings section.calendar-sharing {
  line-height: 30px;
}
.calendar-settings section.calendar-sharing > h2 {
  line-height: inherit;
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  text-align: center;
}
.calendar-settings section.calendar-sharing > label {
  display: block;
  line-height: inherit;
  text-align: center;
}
.calendar-settings section.calendar-sharing > label > span:first-of-type,
.calendar-settings section.calendar-sharing > label > span:last-of-type {
  text-transform: uppercase;
  font-size: 14px;
}
.calendar-settings section.calendar-sharing > label .fa-toggle-on {
  color: var(--theme-link-color);
  padding: 0 0.3em;
}
.calendar-settings section.calendar-sharing > label .fa-toggle-off {
  color: #ccc;
  padding: 0 0.3em;
}
.calendar-settings section.calendar-sharing:not(.enabled) ~ section.if-calendar-sharing-enabled {
  opacity: 0.5;
}
.calendar-settings section.if-calendar-sharing-enabled .ical-export-url {
  line-height: 30px;
  display: flex;
  column-gap: 5px;
}
.calendar-settings section.if-calendar-sharing-enabled .ical-export-url > input {
  flex: 1;
}
.calendar-settings section.if-calendar-sharing-enabled .ical-export-url > button {
  flex: 0 1;
}
.calendar-settings section.ical-import {
  padding-bottom: 50px;
}
.calendar-settings section.ical-import > ul > li {
  display: flex;
  margin: 2px 0;
  column-gap: 5px;
  line-height: 30px;
}
.calendar-settings section.ical-import > ul > li input[type=color] {
  display: none;
}
.calendar-settings section.ical-import > ul > li .calendar-color {
  flex: 0 0 30px;
  display: inline-block;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border: 2px solid white;
  background-color: var(--calendar-color);
}
.calendar-settings section.ical-import > ul > li .color-picker {
  display: flex;
  position: absolute;
  padding: 10px;
  background-color: white;
  border-radius: 4px;
  border: 1px solid var(--theme-grey-line-color);
}
.calendar-settings section.ical-import > ul > li .color-picker > .color {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  margin: 0 5px;
  background-color: var(--color-picker-color);
  transition-duration: 0.2s;
  transition-property: scale;
}
.calendar-settings section.ical-import > ul > li .color-picker > .color:hover {
  scale: 1.2;
}
.calendar-settings section.ical-import > ul > li input[type=text] {
  flex: 0 1 30%;
}
.calendar-settings section.ical-import > ul > li input[type=url] {
  flex: 1;
}
.calendar-settings section.ical-import > ul > li i {
  color: var(--theme-link-color);
  padding-left: 0.3em;
}
.calendar-settings section:last-child p:last-child {
  margin: 2em 0;
}

body > .tooltip.tooltip-docent-uitwerking-status-leerlingen {
  width: 400px;
}

.uitwerking-status {
  display: inline-grid;
  place-content: center;
  height: 1.156em;
  width: 1.156em;
  transform: translateY(0.075em);
}
.uitwerking-status > i {
  display: inline-grid;
  place-content: center;
  width: 1em;
  height: 1em;
  border-radius: 100%;
}
.uitwerking-status > i > i {
  font-size: small;
  font-style: normal;
}
.uitwerking-status.uitwerking-status-todo > i {
  background-color: #ff5b1b;
}
.uitwerking-status.uitwerking-status-todo > i > i {
  color: white;
}
.uitwerking-status.uitwerking-status-ingeleverd > i {
  background-color: #ffee00;
}
.uitwerking-status.uitwerking-status-ingeleverd > i > i {
  color: black;
}
.uitwerking-status.uitwerking-status-afgerond > i {
  background-color: #74f137;
}
.uitwerking-status.uitwerking-status-afgerond > i > i {
  color: white;
}

.uitwerking-status-OLD {
  display: inline-grid;
  place-content: center;
  height: 1.156em;
  width: 1.156em;
  transform: translateY(0.075em);
}
.uitwerking-status-OLD.uitwerking-status-todo::before {
  background-color: #ff5b1b;
}
.uitwerking-status-OLD.uitwerking-status-ingeleverd::before {
  background-color: #ffee00;
}
.uitwerking-status-OLD.uitwerking-status-afgerond::before {
  background-color: #74f137;
}
.uitwerking-status-OLD::before {
  content: " ";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  border-radius: 100%;
  border: 1px solid white;
}

.leerling-presentatie {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
}
@media only screen and (max-width: 767.99px) {
  .leerling-presentatie {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
.leerling-presentatie .column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media only screen and (max-width: 767.99px) {
  .leerling-presentatie .column {
    margin: 10px 10px 0px 10px;
  }
}
.leerling-presentatie .column > section {
  border-radius: 10px;
}
.leerling-presentatie .column > section.widget {
  background-color: white;
}
.leerling-presentatie .column > section.widget.collapsed {
  display: none;
}
.leerling-presentatie .column > section.widget > header {
  display: flex;
  line-height: 60px;
  padding: 0 20px;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  -webkit-user-select: none;
  user-select: none;
}
.leerling-presentatie .column > section.widget > header:hover {
  background-color: var(--theme-accent3-bg-color);
}
.leerling-presentatie .column > section.widget > header:hover > h2 > .widget-link {
  color: red;
}
.leerling-presentatie .column > section.widget > header > h2 {
  flex: 1;
  font-size: 18px;
  font-weight: bold;
}
.leerling-presentatie .column > section.widget > header > h2 > .widget-link {
  display: inline-block;
  width: calc(100% - 20px);
  cursor: pointer;
  padding-left: 10px;
  vertical-align: middle;
  border-radius: 5px;
  color: inherit;
}
.leerling-presentatie .column > section.widget > header > span:last-child {
  position: relative;
  flex: 0 0 26px;
  margin-left: auto;
  white-space: nowrap;
  font-style: normal;
  font-size: 18px;
  text-align: center;
}
.leerling-presentatie .column > section.widget > header > span:last-child > i {
  margin-right: 10px;
}
.leerling-presentatie .column > section.widget > header > span:last-child .button {
  --height: 36px;
  --fg-color: red;
  --bg-color: var(--theme-bg-color);
  --hover-bg-color: var(--theme-bg-color);
  font-size: 18px;
}
.leerling-presentatie .column > section.widget > header .popup-menu {
  right: 0;
  width: 320px;
}
.leerling-presentatie .column > section.widget > header .popup-menu > *:not(:first-child) {
  display: flex;
  align-items: first baseline;
  gap: 10px;
  border-top: none;
  height: unset;
  line-height: 1.5;
  white-space: normal;
  padding-bottom: 15px;
}
.leerling-presentatie .column > section.widget > header .popup-menu > *:not(:first-child):hover {
  background-color: initial;
}
.leerling-presentatie .column > section.widget > header .popup-menu > *:not(:first-child) > input {
  position: relative;
  top: 2px;
}
.leerling-presentatie .column > section.widget > header .popup-menu > *:not(:first-child) b {
  padding-right: 0.5em;
}
.leerling-presentatie .column > section.widget > main {
  padding-top: 10px;
}
.leerling-presentatie .column > section.widget > footer {
  line-height: 25px;
}
.leerling-presentatie .column > aside.restore {
  position: relative;
  display: inline-flex;
  align-self: center;
  align-items: center;
  width: min-content;
  white-space: nowrap;
  padding: 0 22px 0 11px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.5);
}
.leerling-presentatie .column > aside.restore > i {
  font-size: 22px;
}
.leerling-presentatie .column > aside.restore > span {
  margin-left: 10px;
  line-height: 40px;
  font-size: 14px;
}
.leerling-presentatie .column > aside.restore > .popup-menu {
  left: 0;
  min-width: 120px;
}
@media only screen and (max-width: 575.99px) {
  .leerling-presentatie section.agenda {
    display: none;
  }
}
.leerling-presentatie section.agenda > main {
  padding: 0 20px;
}
.leerling-presentatie section.agenda > main h2 {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 32px;
  font-weight: normal;
  line-height: 30px;
}
.leerling-presentatie section.agenda > main .weekdayname {
  line-height: 15px;
  margin-top: 5px;
  color: red;
}
.leerling-presentatie section.agenda > main .toetsrooster {
  margin-top: 10px;
  text-transform: uppercase;
  font-weight: bold;
  color: red;
  cursor: pointer;
}
.leerling-presentatie .popup-toetsrooster {
  height: calc(100vh - 100px);
  max-width: 100vw;
  width: min(100vw, 500px);
  left: calc((var(--content-width) - min(100vw, 500px)) * 0.5);
}
@media only screen and (max-width: 575.99px) {
  .leerling-presentatie .popup-toetsrooster {
    width: 100vw;
    height: 100vh;
    left: 0;
  }
}
.leerling-presentatie .popup-toetsrooster > main {
  margin: 0;
  height: calc(100% - var(--header-height));
  overflow-y: auto;
}

.leerling-presentatie section.agenda > main p b {
  color: red;
}
.leerling-presentatie aside.mobile-select-visible-widget {
  background-color: white;
  padding-top: 30px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  display: none;
}
.leerling-presentatie aside.mobile-select-visible-widget .button-group-rounded .button-rounded {
  --fg-color: var(--theme-fg-color);
  --bg-color: var(--theme-accent-bg-color);
  --selected-bg-color: var(--theme-accent8-bg-color);
  --selected-fg-color: var(--theme-bg-color);
  font-weight: bold;
}
@media only screen and (max-width: 575.99px) {
  .leerling-presentatie aside.mobile-select-visible-widget {
    display: block;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .leerling-presentatie aside.mobile-select-visible-widget ~ section.kwalificaties, .leerling-presentatie aside.mobile-select-visible-widget ~ section.portfolios, .leerling-presentatie aside.mobile-select-visible-widget ~ section.feed {
    margin-top: -10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .leerling-presentatie aside.mobile-select-visible-widget ~ section.kwalificaties > header, .leerling-presentatie aside.mobile-select-visible-widget ~ section.portfolios > header, .leerling-presentatie aside.mobile-select-visible-widget ~ section.feed > header {
    display: none;
  }
  .leerling-presentatie aside.mobile-select-visible-widget ~ section.kwalificaties .presentatie-kwalificatie-categorieen {
    overflow-y: unset;
  }
  .leerling-presentatie aside.mobile-select-visible-widget ~ section.portfolios > main .portfolio-overzicht {
    height: unset;
    padding: 0 10px;
  }
  .leerling-presentatie aside.mobile-select-visible-widget ~ section.feed > main {
    padding-top: 30px;
  }
  .leerling-presentatie aside.mobile-select-visible-widget ~ section.feed .memorie-messages-container {
    max-height: unset;
  }
  .leerling-presentatie aside.mobile-select-visible-widget:has(.button-rounded.selected[data-widget=kwalificaties]) ~ section.portfolios, .leerling-presentatie aside.mobile-select-visible-widget:has(.button-rounded.selected[data-widget=kwalificaties]) ~ section.feed {
    display: none;
  }
  .leerling-presentatie aside.mobile-select-visible-widget:has(.button-rounded.selected[data-widget=portfolios]) ~ section.kwalificaties, .leerling-presentatie aside.mobile-select-visible-widget:has(.button-rounded.selected[data-widget=portfolios]) ~ section.feed {
    display: none;
  }
  .leerling-presentatie aside.mobile-select-visible-widget:has(.button-rounded.selected[data-widget=feed]) ~ section.kwalificaties, .leerling-presentatie aside.mobile-select-visible-widget:has(.button-rounded.selected[data-widget=feed]) ~ section.portfolios {
    display: none;
  }
}
.leerling-presentatie section.kwalificaties > main {
  margin-bottom: 20px;
}
@media only screen and (max-width: 575.99px) {
  .leerling-presentatie section.vakken {
    display: none;
  }
}
.leerling-presentatie section.vakken > main {
  padding: 10px 20px 0 20px;
}
.leerling-presentatie section.vakken > main .leerling-vakkenkiezer .vakkenkiezer-huidig h1,
.leerling-presentatie section.vakken > main .leerling-vakkenkiezer .vakkenkiezer-menu {
  display: none;
}
.leerling-presentatie section.vakken > main .leerling-vakkenkiezer .vakkenkiezer-placeholder {
  display: flex;
  gap: 20px;
  padding-bottom: 20px;
}
.leerling-presentatie section.vakken > main .leerling-vakkenkiezer .vakkenkiezer-placeholder .leeg-vak {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 3px;
  background-color: var(--theme-accent-bg-color);
}
.leerling-presentatie section.portfolios > main {
  padding-bottom: 25px;
}
.leerling-presentatie section.portfolios > main .portfolio-overzicht-toevoegregel {
  display: none;
}
@media only screen and (max-width: 575.99px) {
  .leerling-presentatie section.portfolios > main .portfolio-overzicht-toevoegregel {
    display: flex;
  }
}
.leerling-presentatie section.portfolios > main .portfolio-overzicht-toevoegregel > .button-add::before {
  color: red;
}
.leerling-presentatie section.portfolios > main .portfolio-overzicht {
  height: 235px;
  overflow-y: auto;
}
.leerling-presentatie section.portfolios > main .portfolio-overzicht .leeg-portfolio {
  width: calc((100% - 20px) / 2);
  height: 198px;
  border-radius: 3px;
  background-color: var(--theme-accent-bg-color);
}
.leerling-presentatie section.feed > main {
  min-height: 400px;
}
.leerling-presentatie section.feed > main .leerling-feed > .memorie-form-container {
  margin-top: 0;
  background-color: white;
}
.leerling-presentatie section.feed > main .leerling-feed > .memorie-form-container form.memorie-form textarea {
  height: 60px;
}
.leerling-presentatie section.feed > main .leerling-feed > .memorie-messages-container {
  max-height: 1370px;
  overflow-y: auto;
}

section.profile {
  background-color: var(--theme-bg-color);
}
section.profile > header {
  display: flex;
  position: relative;
  aspect-ratio: 2.17;
  text-align: center;
  justify-content: center;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  background-image: var(--bg-image);
  background-size: cover;
}
section.profile > header:not(:hover) .wijzig-omslagfoto {
  display: none;
}
section.profile > header .wijzig-omslagfoto {
  position: absolute;
  top: 20%;
  background-color: rgba(255, 255, 255, 0.7);
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
  cursor: pointer;
}
section.profile > main {
  position: relative;
  padding: 20px;
}
section.profile > main > img.avatar {
  --avatar-size: 100px;
  margin: 0 auto;
  border-radius: 100%;
  width: 100px;
  height: 100px;
  margin-left: 10px;
  position: absolute;
  top: -80px;
}
section.profile > main > img.avatar.editable {
  cursor: pointer;
}
section.profile > main > header {
  line-height: 40px;
  margin-top: 15px;
}
section.profile > main > header .button.button-circle.share-options {
  --height: 34px;
  --hover-bg-color: var(--bg-color);
}
section.profile > main > header .button.button-circle.share-options > i {
  font-size: 17px;
}
section.profile > main .korte-omschrijving {
  line-height: 26px;
  font-size: 12px;
  text-transform: uppercase;
  overflow-x: hidden;
  word-break: break-word;
}
section.profile > main > h1 {
  line-height: 36px;
  font-size: 24px;
  font-weight: bold;
}
section.profile > main .profile-interaction {
  margin: 10px 0;
  line-height: 56px;
}
section.profile > main .profile-interaction .button {
  --fg-color: red;
  --bg-color: #eee;
  --hover-fg-color: white;
  --hover-bg-color: red;
  padding: 0 20px;
}
section.profile > main section.profprofiel-beroep {
  line-height: 25px;
  margin: 10px 0;
}
section.profile > main section.profprofiel-beroep li {
  line-height: px;
}
section.profile > main section.profprofiel-beroep li.profprofiel-beroep i {
  color: #777;
  font-size: 14px;
}
section.profile > main .social-icons {
  line-height: 60px;
  margin: 10px 0;
}
section.profile > main .social-icons .social-link:any-link {
  text-align: center;
  display: inline-block;
  width: 38px;
  height: 38px;
  line-height: 38px;
  border: 1px solid #ddd;
  background-color: white;
  border-radius: 100%;
  margin: 0 5px;
  font-size: 17px;
  color: #222;
  vertical-align: middle;
}
section.profile > main .social-icons .social-link:any-link:hover {
  color: red;
  cursor: pointer;
}
section.profile > main .social-icons header {
  display: flex;
  align-items: center;
  padding-right: 10px;
  justify-content: space-between;
}
section.profile > main .social-icons header:hover {
  background-color: #f5f5f5;
  cursor: pointer;
}
section.profile > main .social-icons header:hover .edit-icon {
  display: inline-block;
}
section.profile > main .social-icons header h2 {
  flex: 1;
}
section.profile > main .social-icons header .edit-icon {
  display: none;
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 18px;
  font-size: 18px;
  font-weight: normal;
  background-color: white;
  text-align: center;
}
section.profile > main .social-icons .popup-profile-edit-social-media {
  max-width: 100vw;
}
section.profile > main .social-icons .popup-profile-edit-social-media > main {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  width: 320px;
  max-width: calc(100vw - 40px);
  line-height: 30px;
}
section.profile > main .cv-home-link {
  display: block;
  line-height: 50px;
  font-size: 14px;
}
section.profile > main .cv-home-link .button {
  --height: 35px;
  --fg-color: red;
  --bg-color: #eee;
  --hover-bg-color: var(--bg-color);
  --hover-fg-color: var(--fg-color);
  padding: 0 20px;
  width: 100%;
  text-align: center;
}
section.profile > main .biography {
  border-top: 1px solid var(--theme-border-color);
}
section.profile > main .biography.hover:hover {
  background-color: #f5f5f5;
  cursor: pointer;
}
section.profile > main .biography .biography-display {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  line-height: 20px;
}
section.profile > main .biography .biography-display a {
  color: var(--theme-fg-color);
  text-decoration: underline;
}
section.profile > main .biography .biography-display a:hover {
  color: var(--theme-link-hover-color);
}
section.profile > main .biography .biography-display label {
  display: flex;
  flex-direction: row;
}
section.profile > main .biography .biography-display label > i {
  width: 15px;
  font-size: 15px;
  margin-right: 15px;
}
section.profile > main .biography .biography-display label > span {
  flex: 1;
}
section.profile > main .biography .bio-link {
  float: right;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: bold;
  color: var(--theme-link-color, #007bff);
  text-decoration: none;
  cursor: pointer;
}
section.profile > main .biography .bio-link > i {
  display: none;
}
section.profile > main .biography .bio-link:hover {
  color: var(--theme-link-hover-color, #0056b3);
}
section.profile > main .biography:hover .bio-link > i {
  display: inline-block;
}
section.profile > main .biography table {
  width: 80%;
}
section.profile > main .biography .bio-popup {
  position: relative;
  top: 180px;
  left: 190px;
  margin-left: 200px;
  transform: translate(-50%, -50%);
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  border: 1px solid var(--theme-border-color, #ddd);
  width: 350px;
  overflow-y: auto;
  text-align: left;
}
@media only screen and (max-width: 767.99px) {
  section.profile > main .biography .bio-popup {
    width: 90vw;
    left: 0;
    top: 30px;
    margin-left: 156px;
  }
}
section.profile > main .biography .bio-popup table {
  width: 100%;
}
section.profile > main .biography .bio-popup table input[type=text] {
  width: 100%;
  line-height: 25px;
  height: 25px;
}
section.profile > main .biography .bio-popup table tr {
  height: 26px;
  line-height: 26px;
}
section.profile > main .biography .bio-popup table tr th.bio-top {
  vertical-align: top;
  padding-right: 10px;
}
section.profile > main .biography .bio-popup span.presentatie {
  display: block;
  line-height: 21px;
  white-space: preserve-breaks;
}
section.profile > main .biography .bio-popup textarea.presentatie {
  width: 100%;
  min-height: 300px;
  resize: vertical;
}
section.profile > main .biography .bio-popup .youtube-lazy {
  aspect-ratio: 16/9;
}
section.profile > main .biography .bio-popup > div {
  line-height: 30px;
}
section.profile > main footer {
  text-align: right;
  margin-top: 20px;
}

form.memorie-form {
  padding-right: 20px;
  contain: none;
}
form.memorie-form > header {
  display: flex;
  align-items: center;
  line-height: 70px;
}
form.memorie-form > header > :last-child {
  margin-left: auto;
}
form.memorie-form > header .popup-default {
  right: 0;
}
form.memorie-form > header .button-in-circle {
  background-color: var(--theme-accent-bg-color);
  border: none;
  font-size: 17px;
  line-height: 1;
  padding: 0;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  margin-left: 10px;
  display: inline-block;
  cursor: pointer;
  opacity: 0.6;
}
form.memorie-form > header .button-in-circle:hover {
  opacity: 1;
}
form.memorie-form > main.memorie-cv-attributes section.attachments {
  margin: 0;
  display: block;
  margin-left: 80px;
}
@media only screen and (max-width: 767.99px) {
  form.memorie-form > main.memorie-cv-attributes section.attachments {
    margin-left: 70px;
  }
}
form.memorie-form > main.memorie-cv-attributes section.attachments img {
  height: unset;
  width: 100%;
}
form.memorie-form > main.memorie-cv-attributes section {
  position: relative;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px;
  max-width: 100vw;
  margin-bottom: 10px;
}
form.memorie-form > main.memorie-cv-attributes section.plaats {
  grid-template-columns: 0px 1fr;
}
@media only screen and (max-width: 767.99px) {
  form.memorie-form > main.memorie-cv-attributes section.plaats {
    gap: 0px;
  }
}
form.memorie-form > main.memorie-cv-attributes section img {
  width: 70px;
  height: 70px;
  cursor: pointer;
}
form.memorie-form > main.memorie-cv-attributes section .rechts {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
form.memorie-form > main.memorie-cv-attributes section .rechts input {
  line-height: 30px;
}
form.memorie-form > main.memorie-cv-attributes section .rechts span.period {
  width: 250px;
}
form.memorie-form > main.memorie-cv-attributes section .rechts > .rij2 {
  display: flex;
  gap: 5px;
}
form.memorie-form > main.memorie-cv-attributes section .rechts > .rij2 input {
  flex: 1;
  max-width: 49%;
}
@media only screen and (max-width: 575.99px) {
  form.memorie-form > main.memorie-cv-attributes section {
    grid-template-columns: 60px minmax(0, 1fr);
  }
}
form.memorie-form > main.memorie-cv-attributes section input {
  line-height: 25px;
}
form.memorie-form > main.memorie-cv-attributes section .period > label {
  margin-left: 10px;
}
form.memorie-form > main.memorie-cv-attributes section .popup-categories {
  position: absolute;
  top: 100%;
  left: 70px;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: calc(100% - 60px - 10px);
  padding: 20px;
  background-color: white;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
form.memorie-form > main.memorie-cv-attributes section .popup-categories .column:has(> b) {
  line-height: 25px;
  font-size: 16px;
  font-weight: bold;
}
form.memorie-form > main.memorie-cv-attributes section .popup-categories .column > * {
  margin: 0 10px;
}
form.memorie-form > main.memorie-cv-attributes section .popup-categories .column .interest {
  line-height: 30px;
  cursor: pointer;
  border-bottom: 1px solid var(--theme-grey-line-color);
}
form.memorie-form > main.memorie-cv-attributes section .popup-categories .column .interest:first-child {
  border-top: 1px solid var(--theme-grey-line-color);
}
form.memorie-form > main.memorie-cv-attributes section .popup-categories .column .interest:hover {
  font-weight: bold;
}
form.memorie-form > main.memorie-cv-attributes textarea {
  display: block;
  width: 100%;
  height: 90px;
  resize: vertical;
  line-height: 1.5;
}
form.memorie-form.popup-default > main.memorie-cv-attributes .plaats {
  grid-template-columns: 70px 1fr;
}
form.memorie-form > footer {
  display: flex;
  height: 70px;
  line-height: 70px;
  align-items: center;
}
form.memorie-form > footer .button-add {
  position: relative;
  margin-left: 10px;
  line-height: 30px;
  margin-right: 20px;
}
form.memorie-form > footer .button-add .popup-menu li:hover {
  color: red;
}
form.memorie-form > footer button:first-of-type {
  margin-left: auto;
}
form.memorie-form > footer .button {
  position: relative;
}
form.memorie-form > footer .button .popup-menu {
  right: 0;
  bottom: 100%;
}
form.memorie-form > footer .popup-memorieform-link {
  width: 320px;
}
form.memorie-form > footer .popup-memorieform-link input {
  width: 100%;
  line-height: 30px;
}
form.memorie-form > footer .popup-memorieform-link textarea {
  width: 100%;
  resize: none;
}

.modal-wrapper > .memorie-form {
  --header-height: 50px;
  position: static;
  margin: 0 auto;
  padding: 0;
  width: calc(0.7 * var(--content-width));
  max-height: calc(100vh - 20px);
}
@media only screen and (max-width: 991.99px) {
  .modal-wrapper > .memorie-form {
    width: var(--content-width);
  }
}
@media only screen and (max-width: 767.99px) {
  .modal-wrapper > .memorie-form {
    width: 100vw;
  }
  .modal-wrapper > .memorie-form .vaardigheden-select-popup {
    width: 100vw;
    right: -22px;
  }
}
.modal-wrapper > .memorie-form:not(:has(> header)) {
  padding-top: 20px;
  --header-height: 20px;
}
.modal-wrapper > .memorie-form > main {
  margin: 0;
  padding: 0 20px;
}
.modal-wrapper > .memorie-form > footer {
  margin: 0;
  padding: 0 20px;
}
@media only screen and (max-width: 767.99px) {
  .modal-wrapper > .memorie-form > footer .get_candos-menu {
    bottom: 30px;
  }
}

main.memorie-cv-attributes {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.youtube-container > iframe {
  width: 100%;
  aspect-ratio: 16/9;
}

.attachments > .ogp-link {
  background-color: var(--theme-accent-bg-color);
  padding: 15px;
  border-radius: 3px;
}

.memorie-comment {
  width: 100%;
  display: grid;
  grid-template-areas: "avatar authorname" "avatar date" "avatar authorinfo" "tekst tekst" "edit edit";
  grid-template-columns: 35px 1fr;
  grid-gap: 0 10px;
  margin: 10px 0 0;
  padding: 10px;
  border: 1px solid var(--theme-grey-line-color);
  border-radius: 4px;
}
.memorie-comment img.avatar {
  grid-area: avatar;
  width: 35px;
  height: 35px;
  border-radius: 100%;
}
.memorie-comment .author-name {
  grid-area: authorname;
  line-height: 36px;
  font-size: 14px;
  font-weight: bold;
}
.memorie-comment .date {
  grid-area: date;
  line-height: 21px;
  font-size: 12px;
  font-weight: normal;
}
.memorie-comment .author-info {
  grid-area: authorinfo;
  line-height: 21px;
  font-size: 12px;
  font-weight: normal;
}
.memorie-comment p {
  grid-area: tekst;
  margin: 12px 0 0 0;
}
.memorie-comment .edit {
  grid-area: edit;
}
.memorie-comment .edit textarea {
  display: block;
  width: 100%;
  min-height: 50px;
  margin: 15px 0;
  resize: vertical;
}
.memorie-comment .edit .button {
  float: right;
}

.leerling-feed .memorie-form-container {
  display: grid;
  grid-template-columns: 80px 1fr;
  margin: 20px 0 0 0;
  border-bottom: 1px solid var(--theme-grey-line-color);
}
.leerling-feed .memorie-form-container > aside {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.leerling-feed .memorie-form-container > aside img {
  width: 50px;
  height: 50px;
}
.leerling-feed article {
  padding-top: 20px;
}
.leerling-feed article + article {
  border-top: 1px solid var(--theme-grey-line-color);
}
.leerling-feed article.private {
  opacity: 0.5;
}
html.mouse .leerling-feed article:not(:hover) > main > main > footer {
  visibility: hidden;
}

.leerling-feed article > header,
.leerling-feed article > main {
  display: grid;
  grid-template-columns: 80px 1fr;
  padding-right: 20px;
}
.leerling-feed article > header > main,
.leerling-feed article > main > main {
  overflow-x: auto;
}
.leerling-feed article aside {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.leerling-feed article aside > img {
  border-radius: 100%;
}
.leerling-feed article aside > i {
  font-size: 22px;
  color: #e02020;
}
.leerling-feed article > header > main h1 {
  font-size: 14px;
  font-weight: bold;
  line-height: 25px;
}
.leerling-feed article > header > main h2.auteur-naam {
  font-size: 18px;
  font-weight: bold;
  line-height: 21px;
}
.leerling-feed article > header > main .published {
  font-size: 12px;
  font-weight: normal;
  line-height: 23px;
  color: var(--theme-fg-color);
}
.leerling-feed article > header > main .kort {
  font-size: 12px;
  font-weight: bold;
  line-height: 21px;
}
.leerling-feed article > main {
  margin-top: 20px;
}
.leerling-feed article > main > main .institute-logo {
  float: left;
  width: 60px;
  height: 60px;
  margin-right: 10px;
  border-radius: 4px;
}
.leerling-feed article > main > main .wat-wie-waar {
  font-size: 16px;
  font-weight: bold;
  line-height: 33px;
}
.leerling-feed article > main > main .periode {
  line-height: 33px;
  font-size: 12px;
  font-weight: normal;
  color: #999;
}
.leerling-feed article > main > main .interesse-categorie {
  line-height: 23px;
  font-size: 12px;
  font-weight: normal;
  text-transform: uppercase;
}
.leerling-feed article > main > main .attachments > div {
  margin-top: 10px;
}
.leerling-feed article > main > main > footer {
  display: flex;
  height: 40px;
  line-height: 40px;
  align-items: center;
}
.leerling-feed article > main > main > footer .button {
  --height: 15px;
  --fg-color: #e02020;
  --hover-fg-color: var(--theme-link-selected-hover-color);
  --hover-bg-color: var(--bg-color);
  padding: 0;
  font-size: 11px;
  text-transform: uppercase;
}
.leerling-feed article > main > main > footer .edit-buttons {
  margin-left: auto;
}

.leerling-cv {
  display: grid;
  grid-template-areas: "banner banner" "profile cv";
  grid-template-columns: 30% minmax(0, 1fr);
  grid-template-rows: 240px minmax(0, 1fr);
}

.leerling-profprofiel {
  display: grid;
  grid-template-areas: "banner banner" "profile pp" "empty cv";
  grid-template-columns: 30% minmax(0, 1fr);
  grid-template-rows: 240px minmax(600px, auto) minmax(0, 1fr);
}

.leerling-cv,
.leerling-profprofiel,
.leerling-presentatie {
  text-align: left;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  max-width: var(--content-width);
}
.leerling-cv .tekst,
.leerling-profprofiel .tekst,
.leerling-presentatie .tekst {
  line-height: 1.5;
}
.leerling-cv h1,
.leerling-profprofiel h1,
.leerling-presentatie h1 {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.3em;
}
.leerling-cv h1.naam,
.leerling-profprofiel h1.naam,
.leerling-presentatie h1.naam {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: space-between;
}
.leerling-cv h1.naam > .naam,
.leerling-profprofiel h1.naam > .naam,
.leerling-presentatie h1.naam > .naam {
  max-width: 240px;
  overflow: hidden;
}
.leerling-cv h2,
.leerling-profprofiel h2,
.leerling-presentatie h2 {
  flex: 1;
  font-size: 15px;
  font-weight: bold;
  line-height: 60px;
  margin: 0;
}
.leerling-cv h2.upc,
.leerling-profprofiel h2.upc,
.leerling-presentatie h2.upc {
  text-transform: uppercase;
  font-weight: normal;
  font-size: 15px;
}
.leerling-cv h2.met-link > i,
.leerling-profprofiel h2.met-link > i,
.leerling-presentatie h2.met-link > i {
  color: transparent;
  margin-left: 20px;
  opacity: 0.6;
  font-size: 18px;
}
.leerling-cv h2.met-link:hover,
.leerling-profprofiel h2.met-link:hover,
.leerling-presentatie h2.met-link:hover {
  color: red;
  cursor: pointer;
}
.leerling-cv h2.met-link:hover > i,
.leerling-profprofiel h2.met-link:hover > i,
.leerling-presentatie h2.met-link:hover > i {
  color: inherit;
}
.leerling-cv h2.met-link:hover > i:hover,
.leerling-profprofiel h2.met-link:hover > i:hover,
.leerling-presentatie h2.met-link:hover > i:hover {
  opacity: 1;
}
.leerling-cv .attachments,
.leerling-profprofiel .attachments,
.leerling-presentatie .attachments {
  margin-top: 15px;
}
.leerling-cv .attachments img,
.leerling-profprofiel .attachments img,
.leerling-presentatie .attachments img {
  width: 100%;
}
.leerling-cv .motto,
.leerling-profprofiel .motto,
.leerling-presentatie .motto {
  margin: 10px auto 0;
  line-height: 1.5;
  font-size: 15px;
  padding: 0 1px;
}
.leerling-cv textarea.motto,
.leerling-profprofiel textarea.motto,
.leerling-presentatie textarea.motto {
  padding: 0;
  overflow: hidden;
  resize: none;
  width: 100%;
  height: 28px;
}
.leerling-cv textarea.motto:not(:focus),
.leerling-profprofiel textarea.motto:not(:focus),
.leerling-presentatie textarea.motto:not(:focus) {
  white-space-collapse: collapse;
}
.leerling-cv textarea.motto:not(:hover):not(:focus),
.leerling-profprofiel textarea.motto:not(:hover):not(:focus),
.leerling-presentatie textarea.motto:not(:hover):not(:focus) {
  border-color: transparent;
  background-color: transparent;
}
@media only screen and (max-width: 575.99px) {
  .leerling-cv,
  .leerling-profprofiel,
  .leerling-presentatie {
    grid-template-areas: "banner" "profile" "pp";
    grid-template-columns: 100vw;
    grid-template-rows: repeat(3, auto);
  }
  .leerling-cv > section.cv,
  .leerling-profprofiel > section.cv,
  .leerling-presentatie > section.cv {
    padding-top: 20px;
  }
}
.leerling-cv > section.profile,
.leerling-profprofiel > section.profile,
.leerling-presentatie > section.profile {
  display: contents;
}
.leerling-cv > section.profile > header,
.leerling-profprofiel > section.profile > header,
.leerling-presentatie > section.profile > header {
  grid-area: banner;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  max-width: var(--content-width);
}
@media only screen and (min-width: 576px) {
  .leerling-cv > section.profile > header,
  .leerling-profprofiel > section.profile > header,
  .leerling-presentatie > section.profile > header {
    aspect-ratio: unset;
  }
}
.leerling-cv > section.profile > header .avatar,
.leerling-profprofiel > section.profile > header .avatar,
.leerling-presentatie > section.profile > header .avatar {
  left: calc(15% - var(--avatar-size) * 0.5);
}
.leerling-cv > section.profile > main,
.leerling-profprofiel > section.profile > main,
.leerling-presentatie > section.profile > main {
  grid-area: profile;
  background-color: #f5f5f5;
  border-bottom-left-radius: 10px;
  margin-bottom: 20px;
  padding: 20px;
}
.leerling-cv > section.profile > main header,
.leerling-profprofiel > section.profile > main header,
.leerling-presentatie > section.profile > main header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 60px;
  margin-top: 4px;
}
@media only screen and (max-width: 767.99px) {
  .leerling-cv > section.profile > main header,
  .leerling-profprofiel > section.profile > main header,
  .leerling-presentatie > section.profile > main header {
    padding-right: 0;
  }
}
.leerling-cv > section.profile > main header .edit-icon,
.leerling-profprofiel > section.profile > main header .edit-icon,
.leerling-presentatie > section.profile > main header .edit-icon {
  display: none;
}
@media only screen and (max-width: 767.99px) {
  .leerling-cv > section.profile > main header .edit-icon,
  .leerling-profprofiel > section.profile > main header .edit-icon,
  .leerling-presentatie > section.profile > main header .edit-icon {
    display: inline-block;
  }
}
.leerling-cv > section.profile > main header.hover:hover,
.leerling-profprofiel > section.profile > main header.hover:hover,
.leerling-presentatie > section.profile > main header.hover:hover {
  background-color: #f5f5f5;
  cursor: pointer;
  display: flex;
  padding-right: 10px;
}
.leerling-cv > section.profile > main header.hover:hover h2,
.leerling-profprofiel > section.profile > main header.hover:hover h2,
.leerling-presentatie > section.profile > main header.hover:hover h2 {
  flex: 1;
}
.leerling-cv > section.profile > main header.hover:hover .edit-icon,
.leerling-profprofiel > section.profile > main header.hover:hover .edit-icon,
.leerling-presentatie > section.profile > main header.hover:hover .edit-icon {
  display: inline-block;
}
.leerling-cv > section.profprofiel,
.leerling-profprofiel > section.profprofiel,
.leerling-presentatie > section.profprofiel {
  grid-area: pp;
  background-color: white;
  padding: 20px;
  border-bottom-right-radius: 10px;
  margin-bottom: 20px;
  font-size: 14px;
}
.leerling-cv > section.profprofiel article,
.leerling-profprofiel > section.profprofiel article,
.leerling-presentatie > section.profprofiel article {
  border-bottom: 1px solid var(--theme-grey-line-color);
}
.leerling-cv > section.profprofiel article:last-child,
.leerling-profprofiel > section.profprofiel article:last-child,
.leerling-presentatie > section.profprofiel article:last-child {
  border-bottom: none;
}
.leerling-cv > section.profprofiel article:has(li), .leerling-cv > section.profprofiel article:has(.filled), .leerling-cv > section.profprofiel article:has(img),
.leerling-profprofiel > section.profprofiel article:has(li),
.leerling-profprofiel > section.profprofiel article:has(.filled),
.leerling-profprofiel > section.profprofiel article:has(img),
.leerling-presentatie > section.profprofiel article:has(li),
.leerling-presentatie > section.profprofiel article:has(.filled),
.leerling-presentatie > section.profprofiel article:has(img) {
  padding-bottom: 25px;
}
.leerling-cv > section.profprofiel header,
.leerling-profprofiel > section.profprofiel header,
.leerling-presentatie > section.profprofiel header {
  display: flex;
  align-items: center;
  line-height: 70px;
  margin-bottom: 20px;
}
.leerling-cv > section.profprofiel header .edit-icon,
.leerling-profprofiel > section.profprofiel header .edit-icon,
.leerling-presentatie > section.profprofiel header .edit-icon {
  display: none;
}
@media only screen and (max-width: 767.99px) {
  .leerling-cv > section.profprofiel header .edit-icon,
  .leerling-profprofiel > section.profprofiel header .edit-icon,
  .leerling-presentatie > section.profprofiel header .edit-icon {
    display: inline-block;
  }
}
.leerling-cv > section.profprofiel header.hover:hover,
.leerling-profprofiel > section.profprofiel header.hover:hover,
.leerling-presentatie > section.profprofiel header.hover:hover {
  background-color: #f5f5f5;
  cursor: pointer;
  display: flex;
  padding-right: 10px;
  color: red;
}
.leerling-cv > section.profprofiel header.hover:hover h2,
.leerling-profprofiel > section.profprofiel header.hover:hover h2,
.leerling-presentatie > section.profprofiel header.hover:hover h2 {
  flex: 1;
}
.leerling-cv > section.profprofiel header.hover:hover .edit-icon,
.leerling-profprofiel > section.profprofiel header.hover:hover .edit-icon,
.leerling-presentatie > section.profprofiel header.hover:hover .edit-icon {
  display: inline-block;
}
.leerling-cv > section.profprofiel header > span,
.leerling-profprofiel > section.profprofiel header > span,
.leerling-presentatie > section.profprofiel header > span {
  display: none;
}
.leerling-cv > section.profprofiel header:hover > span,
.leerling-profprofiel > section.profprofiel header:hover > span,
.leerling-presentatie > section.profprofiel header:hover > span {
  display: inline-block;
}
.leerling-cv > section.profprofiel header .button,
.leerling-profprofiel > section.profprofiel header .button,
.leerling-presentatie > section.profprofiel header .button {
  margin-left: auto;
  --height: 24px;
  --fg-color: red;
  --hover-fg-color: var(--fg-color);
  --hover-bg-color: var(--hover-bg-color);
  border-color: red;
  padding: 0 20px;
}
.leerling-cv > section.profprofiel main ul li,
.leerling-profprofiel > section.profprofiel main ul li,
.leerling-presentatie > section.profprofiel main ul li {
  line-height: 25px;
}
.leerling-cv > section.profprofiel main ul li.profprofiel-beroep i,
.leerling-profprofiel > section.profprofiel main ul li.profprofiel-beroep i,
.leerling-presentatie > section.profprofiel main ul li.profprofiel-beroep i {
  color: #777;
  font-size: 14px;
}
.leerling-cv > section.profprofiel main .profprofiel-bio,
.leerling-profprofiel > section.profprofiel main .profprofiel-bio,
.leerling-presentatie > section.profprofiel main .profprofiel-bio {
  font-size: 14px;
  line-height: 1.5;
}
.leerling-cv > section.profprofiel main .profprofiel-bio .youtube-lazy,
.leerling-profprofiel > section.profprofiel main .profprofiel-bio .youtube-lazy,
.leerling-presentatie > section.profprofiel main .profprofiel-bio .youtube-lazy {
  min-height: 300px;
  margin: 10px 0;
}
.leerling-cv > section.profprofiel main .profprofiel-bio textarea,
.leerling-profprofiel > section.profprofiel main .profprofiel-bio textarea,
.leerling-presentatie > section.profprofiel main .profprofiel-bio textarea {
  font-size: 14px;
  line-height: 1.5;
  width: 100%;
  height: 200px;
  resize: vertical;
}
.leerling-cv div.empty-space,
.leerling-profprofiel div.empty-space,
.leerling-presentatie div.empty-space {
  background-color: white;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
}
.leerling-cv > section.cv,
.leerling-profprofiel > section.cv,
.leerling-presentatie > section.cv {
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  padding-top: 20px;
  background-color: var(--theme-bg-color);
}
@media only screen and (min-width: 576px) {
  .leerling-cv > section.cv,
  .leerling-profprofiel > section.cv,
  .leerling-presentatie > section.cv {
    max-width: calc(0.7 * var(--content-width));
  }
}
.leerling-cv > section.cv > header h1,
.leerling-profprofiel > section.cv > header h1,
.leerling-presentatie > section.cv > header h1 {
  padding: 0 20px;
  font-size: 24px;
  font-weight: bold;
  line-height: 60px;
}
@media only screen and (max-width: 575.99px) {
  .leerling-cv > section.cv > header,
  .leerling-profprofiel > section.cv > header,
  .leerling-presentatie > section.cv > header {
    padding: 0;
    border-top: 1px solid var(--theme-grey-line-color);
  }
}
.leerling-cv > section.cv > main,
.leerling-profprofiel > section.cv > main,
.leerling-presentatie > section.cv > main {
  padding: 20px 20px 20px 20px;
}
.leerling-cv > section.cv > main section.skills,
.leerling-profprofiel > section.cv > main section.skills,
.leerling-presentatie > section.cv > main section.skills {
  -webkit-user-select: none;
  user-select: none;
  padding-bottom: 10px;
}
.leerling-cv > section.cv > main section.skills > header,
.leerling-profprofiel > section.cv > main section.skills > header,
.leerling-presentatie > section.cv > main section.skills > header {
  display: flex;
  line-height: 40px;
  align-items: center;
}
.leerling-cv > section.cv > main section.skills > header h1,
.leerling-profprofiel > section.cv > main section.skills > header h1,
.leerling-presentatie > section.cv > main section.skills > header h1 {
  font-size: 16px;
  font-weight: bold;
}
.leerling-cv > section.cv > main section.skills > header .button,
.leerling-profprofiel > section.cv > main section.skills > header .button,
.leerling-presentatie > section.cv > main section.skills > header .button {
  margin-left: auto;
  --height: 24px;
  --fg-color: red;
  --hover-fg-color: var(--fg-color);
  --hover-bg-color: var(--hover-bg-color);
  border-color: red;
  padding: 0 20px;
}
.leerling-cv > section.cv > main section.skills > main,
.leerling-profprofiel > section.cv > main section.skills > main,
.leerling-presentatie > section.cv > main section.skills > main {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.leerling-cv > section.cv > main section.skills > main .gallery-card,
.leerling-profprofiel > section.cv > main section.skills > main .gallery-card,
.leerling-presentatie > section.cv > main section.skills > main .gallery-card {
  display: flex;
  align-items: center;
  line-height: 36px;
  border: 1px solid var(--theme-grey-line-color);
  color: #777;
  border-radius: 18px;
  padding: 0 10px;
  cursor: pointer;
}
.leerling-cv > section.cv > main section.skills > main .gallery-card.selected,
.leerling-profprofiel > section.cv > main section.skills > main .gallery-card.selected,
.leerling-presentatie > section.cv > main section.skills > main .gallery-card.selected {
  background-color: var(--theme-accent-bg-color);
  color: var(--theme-accent-fg-color);
}
.leerling-cv > section.cv > main section.skills > main .gallery-card.drag-drop,
.leerling-profprofiel > section.cv > main section.skills > main .gallery-card.drag-drop,
.leerling-presentatie > section.cv > main section.skills > main .gallery-card.drag-drop {
  background-color: var(--theme-accent-bg-color);
}
.leerling-cv > section.cv > main section.skills > main .gallery-card > :first-child,
.leerling-profprofiel > section.cv > main section.skills > main .gallery-card > :first-child,
.leerling-presentatie > section.cv > main section.skills > main .gallery-card > :first-child {
  margin-right: 10px;
}
.leerling-cv > section.cv > main section.skills > main .gallery-card .gallery-image,
.leerling-profprofiel > section.cv > main section.skills > main .gallery-card .gallery-image,
.leerling-presentatie > section.cv > main section.skills > main .gallery-card .gallery-image {
  line-height: 100%;
}
.leerling-cv > section.cv > main section.skills > main .gallery-card .gallery-image img,
.leerling-profprofiel > section.cv > main section.skills > main .gallery-card .gallery-image img,
.leerling-presentatie > section.cv > main section.skills > main .gallery-card .gallery-image img {
  border-radius: 10px;
  aspect-ratio: 1/1;
  width: 20px;
  height: 20px;
}
.leerling-cv > section.cv > main section.skills > main .gallery-card .gallery-title,
.leerling-profprofiel > section.cv > main section.skills > main .gallery-card .gallery-title,
.leerling-presentatie > section.cv > main section.skills > main .gallery-card .gallery-title {
  display: inline-block;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leerling-cv > section.cv > main section.skills > main .gallery-card:hover,
.leerling-profprofiel > section.cv > main section.skills > main .gallery-card:hover,
.leerling-presentatie > section.cv > main section.skills > main .gallery-card:hover {
  background-color: var(--theme-accent-bg-color);
}
.leerling-cv > section.cv > main section.skills > main .gallery-card:hover > i:last-child,
.leerling-profprofiel > section.cv > main section.skills > main .gallery-card:hover > i:last-child,
.leerling-presentatie > section.cv > main section.skills > main .gallery-card:hover > i:last-child {
  visibility: visible;
}
.leerling-cv > section.cv > main section.skills > main .gallery-card > i:last-child,
.leerling-profprofiel > section.cv > main section.skills > main .gallery-card > i:last-child,
.leerling-presentatie > section.cv > main section.skills > main .gallery-card > i:last-child {
  margin-left: auto;
  margin-right: 10px;
}
html.mouse .leerling-cv > section.cv > main section.skills > main .gallery-card > i:last-child,
html.mouse .leerling-profprofiel > section.cv > main section.skills > main .gallery-card > i:last-child,
html.mouse .leerling-presentatie > section.cv > main section.skills > main .gallery-card > i:last-child {
  visibility: hidden;
}

.leerling-cv > section.cv > main section.skill > header,
.leerling-profprofiel > section.cv > main section.skill > header,
.leerling-presentatie > section.cv > main section.skill > header {
  display: flex;
  line-height: 40px;
}
.leerling-cv > section.cv > main section.skill > header i,
.leerling-profprofiel > section.cv > main section.skill > header i,
.leerling-presentatie > section.cv > main section.skill > header i {
  margin: 0 10px;
}
.leerling-cv > section.cv > main section.skill > header h1,
.leerling-profprofiel > section.cv > main section.skill > header h1,
.leerling-presentatie > section.cv > main section.skill > header h1 {
  font-size: 16px;
  font-weight: bold;
}
.leerling-cv > section.cv > main section.skill > main,
.leerling-profprofiel > section.cv > main section.skill > main,
.leerling-presentatie > section.cv > main section.skill > main {
  display: grid;
  grid-template-columns: 1fr 125px;
  gap: 10px;
}
.leerling-cv > section.cv > main section.skill > main .skill-image-container,
.leerling-profprofiel > section.cv > main section.skill > main .skill-image-container,
.leerling-presentatie > section.cv > main section.skill > main .skill-image-container {
  position: relative;
}
.leerling-cv > section.cv > main section.skill > main .skill-image-container .upload-overlay:not(:hover),
.leerling-profprofiel > section.cv > main section.skill > main .skill-image-container .upload-overlay:not(:hover),
.leerling-presentatie > section.cv > main section.skill > main .skill-image-container .upload-overlay:not(:hover) {
  opacity: 0;
}
.leerling-cv > section.cv > main section.cv-items,
.leerling-profprofiel > section.cv > main section.cv-items,
.leerling-presentatie > section.cv > main section.cv-items {
  padding: 20px 0 0 0;
}
.leerling-cv > section.cv > main section.cv-items .timeline-icon,
.leerling-profprofiel > section.cv > main section.cv-items .timeline-icon,
.leerling-presentatie > section.cv > main section.cv-items .timeline-icon {
  line-height: 26px;
  font-size: 16px;
  font-weight: normal;
  opacity: 0.6;
}
.leerling-cv > section.cv > main section.cv-items .timeline-icon:hover,
.leerling-profprofiel > section.cv > main section.cv-items .timeline-icon:hover,
.leerling-presentatie > section.cv > main section.cv-items .timeline-icon:hover {
  opacity: 1;
}
.leerling-cv > section.cv > main section.cv-items .timeline-icon::before,
.leerling-profprofiel > section.cv > main section.cv-items .timeline-icon::before,
.leerling-presentatie > section.cv > main section.cv-items .timeline-icon::before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  font-weight: 400;
  font-family: "Font Awesome 6 Pro";
  content: "\+";
  border-radius: 100%;
  background-color: var(--theme-accent-bg-color);
  display: inline-grid;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 20px;
  cursor: pointer;
}
.leerling-cv > section.cv > main section.cv-items > header,
.leerling-profprofiel > section.cv > main section.cv-items > header,
.leerling-presentatie > section.cv > main section.cv-items > header {
  display: flex;
  line-height: 80px;
  align-items: center;
}
.leerling-cv > section.cv > main section.cv-items > header > :last-child,
.leerling-profprofiel > section.cv > main section.cv-items > header > :last-child,
.leerling-presentatie > section.cv > main section.cv-items > header > :last-child {
  margin-left: auto;
  color: red;
}
.leerling-cv > section.cv > main section.cv-items > header > :last-child .popup-menu,
.leerling-profprofiel > section.cv > main section.cv-items > header > :last-child .popup-menu,
.leerling-presentatie > section.cv > main section.cv-items > header > :last-child .popup-menu {
  right: 0;
}
.leerling-cv > section.cv > main section.cv-items > main > section,
.leerling-profprofiel > section.cv > main section.cv-items > main > section,
.leerling-presentatie > section.cv > main section.cv-items > main > section {
  padding-bottom: 20px;
  border-top: 1px solid var(--theme-grey-line-color);
}
.leerling-cv > section.cv > main section.cv-items > main > section > header,
.leerling-profprofiel > section.cv > main section.cv-items > main > section > header,
.leerling-presentatie > section.cv > main section.cv-items > main > section > header {
  display: flex;
  line-height: 70px;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
}
.leerling-cv > section.cv > main section.cv-items > main > section > header > :last-child,
.leerling-profprofiel > section.cv > main section.cv-items > main > section > header > :last-child,
.leerling-presentatie > section.cv > main section.cv-items > main > section > header > :last-child {
  margin-left: auto;
  color: red;
}
.leerling-cv > section.cv > main section.cv-items > main > section > header > :last-child .popup-menu,
.leerling-profprofiel > section.cv > main section.cv-items > main > section > header > :last-child .popup-menu,
.leerling-presentatie > section.cv > main section.cv-items > main > section > header > :last-child .popup-menu {
  right: 0;
}
.leerling-cv > section.cv > main section.cv-items > main article,
.leerling-profprofiel > section.cv > main section.cv-items > main article,
.leerling-presentatie > section.cv > main section.cv-items > main article {
  display: grid;
  grid-template-areas: "info" "content";
  gap: 0px 10px;
  margin-top: 0px;
  margin-bottom: 40px;
  background-color: inherit;
  border: 4px solid transparent;
}
.leerling-cv > section.cv > main section.cv-items > main article.private > aside, .leerling-cv > section.cv > main section.cv-items > main article.private > header, .leerling-cv > section.cv > main section.cv-items > main article.private > main,
.leerling-profprofiel > section.cv > main section.cv-items > main article.private > aside,
.leerling-profprofiel > section.cv > main section.cv-items > main article.private > header,
.leerling-profprofiel > section.cv > main section.cv-items > main article.private > main,
.leerling-presentatie > section.cv > main section.cv-items > main article.private > aside,
.leerling-presentatie > section.cv > main section.cv-items > main article.private > header,
.leerling-presentatie > section.cv > main section.cv-items > main article.private > main {
  opacity: 0.5;
}
html.mouse .leerling-cv > section.cv > main section.cv-items > main article:not(:hover) > header > label.public,
html.mouse .leerling-cv > section.cv > main section.cv-items > main article:not(:hover) > footer,
html.mouse .leerling-profprofiel > section.cv > main section.cv-items > main article:not(:hover) > header > label.public,
html.mouse .leerling-profprofiel > section.cv > main section.cv-items > main article:not(:hover) > footer,
html.mouse .leerling-presentatie > section.cv > main section.cv-items > main article:not(:hover) > header > label.public,
html.mouse .leerling-presentatie > section.cv > main section.cv-items > main article:not(:hover) > footer {
  visibility: hidden;
}

.leerling-cv > section.cv > main section.cv-items > main article > header,
.leerling-profprofiel > section.cv > main section.cv-items > main article > header,
.leerling-presentatie > section.cv > main section.cv-items > main article > header {
  position: relative;
  display: flex;
  gap: 10px;
  max-width: 100%;
  overflow: hidden;
}
.leerling-cv > section.cv > main section.cv-items > main article > header .edit-icon,
.leerling-profprofiel > section.cv > main section.cv-items > main article > header .edit-icon,
.leerling-presentatie > section.cv > main section.cv-items > main article > header .edit-icon {
  display: none;
}
@media only screen and (max-width: 767.99px) {
  .leerling-cv > section.cv > main section.cv-items > main article > header .edit-icon,
  .leerling-profprofiel > section.cv > main section.cv-items > main article > header .edit-icon,
  .leerling-presentatie > section.cv > main section.cv-items > main article > header .edit-icon {
    display: inline-block;
  }
}
.leerling-cv > section.cv > main section.cv-items > main article > header.hover:hover,
.leerling-profprofiel > section.cv > main section.cv-items > main article > header.hover:hover,
.leerling-presentatie > section.cv > main section.cv-items > main article > header.hover:hover {
  background-color: #f5f5f5;
  cursor: pointer;
}
.leerling-cv > section.cv > main section.cv-items > main article > header.hover:hover .edit-icon,
.leerling-profprofiel > section.cv > main section.cv-items > main article > header.hover:hover .edit-icon,
.leerling-presentatie > section.cv > main section.cv-items > main article > header.hover:hover .edit-icon {
  display: inline-block;
}
.leerling-cv > section.cv > main section.cv-items > main article > header > aside,
.leerling-profprofiel > section.cv > main section.cv-items > main article > header > aside,
.leerling-presentatie > section.cv > main section.cv-items > main article > header > aside {
  display: flex;
  width: 70px;
  height: 70px;
}
.leerling-cv > section.cv > main section.cv-items > main article > header > aside img,
.leerling-profprofiel > section.cv > main section.cv-items > main article > header > aside img,
.leerling-presentatie > section.cv > main section.cv-items > main article > header > aside img {
  border-radius: 4px;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.leerling-cv > section.cv > main section.cv-items > main article > header .profiel-edit-button,
.leerling-profprofiel > section.cv > main section.cv-items > main article > header .profiel-edit-button,
.leerling-presentatie > section.cv > main section.cv-items > main article > header .profiel-edit-button {
  padding-right: 10px;
  padding-top: 10px;
}
.leerling-cv > section.cv > main section.cv-items > main article > header div.kopregel,
.leerling-profprofiel > section.cv > main section.cv-items > main article > header div.kopregel,
.leerling-presentatie > section.cv > main section.cv-items > main article > header div.kopregel {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.leerling-cv > section.cv > main section.cv-items > main article > header div.kopregel h2,
.leerling-profprofiel > section.cv > main section.cv-items > main article > header div.kopregel h2,
.leerling-presentatie > section.cv > main section.cv-items > main article > header div.kopregel h2 {
  display: flex;
  flex: 1;
  font-size: 14px;
  font-weight: bold;
  line-height: 23px;
}
.leerling-cv > section.cv > main section.cv-items > main article > header div.kopregel h2.interesse-uitwerking,
.leerling-profprofiel > section.cv > main section.cv-items > main article > header div.kopregel h2.interesse-uitwerking,
.leerling-presentatie > section.cv > main section.cv-items > main article > header div.kopregel h2.interesse-uitwerking {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: normal;
}
.leerling-cv > section.cv > main section.cv-items > main article > header div.kopregel h2 > span,
.leerling-profprofiel > section.cv > main section.cv-items > main article > header div.kopregel h2 > span,
.leerling-presentatie > section.cv > main section.cv-items > main article > header div.kopregel h2 > span {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.leerling-cv > section.cv > main section.cv-items > main article > header div.kopregel h2 a,
.leerling-profprofiel > section.cv > main section.cv-items > main article > header div.kopregel h2 a,
.leerling-presentatie > section.cv > main section.cv-items > main article > header div.kopregel h2 a {
  color: inherit;
}
.leerling-cv > section.cv > main section.cv-items > main article > header div.kopregel h2 a:hover,
.leerling-profprofiel > section.cv > main section.cv-items > main article > header div.kopregel h2 a:hover,
.leerling-presentatie > section.cv > main section.cv-items > main article > header div.kopregel h2 a:hover {
  color: var(--theme-link-color);
}
.leerling-cv > section.cv > main section.cv-items > main article > header div.kopregel h3,
.leerling-profprofiel > section.cv > main section.cv-items > main article > header div.kopregel h3,
.leerling-presentatie > section.cv > main section.cv-items > main article > header div.kopregel h3 {
  font-size: 12px;
  line-height: 23px;
  font-weight: normal;
  margin: 0;
  flex: 1;
}
.leerling-cv > section.cv > main section.cv-items > main article > header div.kopregel h3.interesse-uitwerking,
.leerling-profprofiel > section.cv > main section.cv-items > main article > header div.kopregel h3.interesse-uitwerking,
.leerling-presentatie > section.cv > main section.cv-items > main article > header div.kopregel h3.interesse-uitwerking {
  font-size: 14px;
  font-weight: bold;
}
.leerling-cv > section.cv > main section.cv-items > main article > header div.kopregel h4,
.leerling-profprofiel > section.cv > main section.cv-items > main article > header div.kopregel h4,
.leerling-presentatie > section.cv > main section.cv-items > main article > header div.kopregel h4 {
  font-size: 12px;
  line-height: 23px;
  font-weight: normal;
  color: #999;
  flex: 1;
}
.leerling-cv > section.cv > main section.cv-items > main article > main,
.leerling-profprofiel > section.cv > main section.cv-items > main article > main,
.leerling-presentatie > section.cv > main section.cv-items > main article > main {
  grid-area: content;
  line-height: 1.5;
}
.leerling-cv > section.cv > main section.cv-items > main article > main pre,
.leerling-profprofiel > section.cv > main section.cv-items > main article > main pre,
.leerling-presentatie > section.cv > main section.cv-items > main article > main pre {
  max-width: 100%;
  overflow-x: auto;
}
.leerling-cv > section.cv > main section.cv-items > main article > footer,
.leerling-profprofiel > section.cv > main section.cv-items > main article > footer,
.leerling-presentatie > section.cv > main section.cv-items > main article > footer {
  grid-area: footer;
  display: flex;
  height: 40px;
  line-height: 40px;
  align-items: center;
}
.leerling-cv > section.cv > main section.cv-items > main article > footer .button,
.leerling-profprofiel > section.cv > main section.cv-items > main article > footer .button,
.leerling-presentatie > section.cv > main section.cv-items > main article > footer .button {
  --height: 15px;
  --fg-color: #e02020;
  --hover-fg-color: var(--theme-link-selected-hover-color);
  --hover-bg-color: var(--bg-color);
  padding: 0;
  font-size: 11px;
  text-transform: uppercase;
}
.leerling-cv > section.cv > main section.cv-items > main article > footer .edit-buttons,
.leerling-profprofiel > section.cv > main section.cv-items > main article > footer .edit-buttons,
.leerling-presentatie > section.cv > main section.cv-items > main article > footer .edit-buttons {
  margin-left: auto;
}
.leerling-cv > section.cv > main section.cv-items > main footer,
.leerling-profprofiel > section.cv > main section.cv-items > main footer,
.leerling-presentatie > section.cv > main section.cv-items > main footer {
  text-align: center;
  line-height: 40px;
}
.leerling-cv > section.cv > main section.cv-items > main footer .meer-link,
.leerling-profprofiel > section.cv > main section.cv-items > main footer .meer-link,
.leerling-presentatie > section.cv > main section.cv-items > main footer .meer-link {
  color: red;
  cursor: pointer;
  text-transform: uppercase;
}
.leerling-cv > section.cv > main section.cv-items > main footer .meer-link:hover,
.leerling-profprofiel > section.cv > main section.cv-items > main footer .meer-link:hover,
.leerling-presentatie > section.cv > main section.cv-items > main footer .meer-link:hover {
  color: #e02020;
}

.leerling-profprofiel section.profprofiel-beroep {
  display: none;
}

.popup-privacy-options {
  display: flex;
  max-width: 100vw;
}
@media only screen and (max-width: 575.99px) {
  .popup-privacy-options {
    left: 5vw !important;
    width: 90vw;
    margin-top: 50px;
  }
}
@media only screen and (min-width: 576px) {
  .popup-privacy-options > main {
    min-width: 400px;
  }
}
.popup-privacy-options > main h1 {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}
.popup-privacy-options > main h3 {
  font-size: 15px;
  font-weight: normal;
}
.popup-privacy-options > main > section {
  margin-top: 10px;
  line-height: 30px;
}
.popup-privacy-options > main > section h2 {
  font-size: 15px;
  font-weight: bold;
}
.popup-privacy-options > main > section label {
  display: block;
  -webkit-user-select: none;
  user-select: none;
}
.popup-privacy-options > main > section label.solitary {
  line-height: 40px;
}
.popup-privacy-options > main > section label[key="0"] + label.solitary {
  margin-top: 5px;
}
.popup-privacy-options > main > section label input[type=checkbox], .popup-privacy-options > main > section label input[type=radio] {
  margin: 0 0.5em 0 0;
}
.popup-privacy-options > main > section label input:disabled + span {
  color: var(--theme-dimmed-fg-color);
}
.popup-privacy-options > main > section label .copy-text {
  margin-left: 1em;
}
.popup-privacy-options > main > section.apart {
  margin-left: -20px;
  margin-right: -20px;
  padding: 10px 20px;
  border-top: 1px solid var(--theme-grey-line-color);
  border-bottom: 1px solid var(--theme-grey-line-color);
}
.popup-privacy-options > main > footer {
  margin: 20px 0;
  text-align: right;
}
.popup-privacy-options > main > footer > button {
  margin-left: 10px;
}
.popup-privacy-options > main .checkme {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.popup-privacy-options > main .checkme .button {
  --height: 30px;
  --bg-color: #eee;
  --hover-bg-color: #ddd;
  --hover-fg-color: var(--fg-color);
  border: none;
}
.popup-privacy-options > main .checkme .popup-checkme {
  width: 320px;
  margin-top: 30px;
}
.popup-privacy-options > main .checkme .popup-checkme > main {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.popup-privacy-options > main .checkme .popup-checkme > main textarea {
  height: 60px;
}
.popup-privacy-options > main .checkme .popup-checkme > main > input {
  line-height: 30px;
}

.popup-cv-uitwerkingen-publiceren {
  --page-submenu-height: calc(56px + var(--scrollbar-width));
  --header-height: 60px;
  --footer-height: 80px;
  --popup-height: calc(100vh - 2 * 30px);
  position: unset;
  margin: 0 auto;
  max-width: 100vw;
  height: calc(100vh - 60px);
  width: 576px;
}
.popup-cv-uitwerkingen-publiceren .page-submenu {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 20px;
}
.popup-cv-uitwerkingen-publiceren .page-submenu > ul {
  display: flex;
  height: inherit;
  flex-wrap: nowrap;
}
.popup-cv-uitwerkingen-publiceren .page-submenu > ul li {
  margin: 0;
  display: block;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  padding: 4px 4px;
}
.popup-cv-uitwerkingen-publiceren .page-submenu > ul li img {
  width: 48px;
  height: 48px;
}
.popup-cv-uitwerkingen-publiceren .page-submenu > ul li div {
  display: none;
}
.popup-cv-uitwerkingen-publiceren .page-submenu > ul li.selected div {
  position: absolute;
  top: 0;
  display: block;
  width: 56px;
  height: 56px;
  line-height: 56px;
  border-radius: 3px;
  background-color: rgba(0, 50, 152, 0.9);
  color: white;
  text-align: center;
  font-size: 12px;
}
.popup-cv-uitwerkingen-publiceren .page-main {
  max-height: calc(var(--popup-height) + var(--header-height) - var(--footer-height));
  overflow-y: auto;
  margin-left: 0;
  margin-right: 0;
}
.popup-cv-uitwerkingen-publiceren .page-main > table {
  height: min-content;
}

.talen-view {
  display: flex;
  flex-direction: column;
}
.talen-view .taal-row {
  display: flex;
  min-height: 40px;
  margin-bottom: 0px;
  margin: 8px 0;
}
.talen-view .taal-row img {
  width: 25px;
  height: 25px;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 10px;
  border: 1px solid var(--theme-grey-line-color);
}
.talen-view .taal-row .taal-info {
  font-size: 13px;
  flex: 1;
  display: flex;
  overflow: hidden;
  flex-direction: column;
}
.talen-view .taal-row .taal-info .top {
  font-weight: bold;
  line-height: 15px;
  font-size: 14px;
  flex: 1;
}
.talen-view .taal-row .taal-info .bottom {
  flex: 1;
  line-height: 15px;
}
table.talen {
  width: 100%;
}
@media only screen and (max-width: 767.99px) {
  table.talen {
    width: 90%;
  }
}
table.talen .taal-rij {
  line-height: 40px;
}
table.talen .taal-rij .delete {
  text-align: right;
}
table.talen .taal-rij th {
  white-space: nowrap;
  font-weight: bold;
}
table.talen .taal-rij th img {
  width: 30px;
  height: 30px;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 10px;
  border: 1px solid var(--theme-grey-line-color);
}
table.talen .taal-rij.taal-header {
  font-weight: bold;
}

.popup-talen-kiezer {
  position: relative;
  max-width: 650px;
  margin: 0 auto;
  padding: 20px;
  overflow-x: auto;
}
@media only screen and (max-width: 767.99px) {
  .popup-talen-kiezer {
    width: 100vw;
    padding: 5px;
  }
}
.popup-talen-kiezer footer {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}
.popup-talen-kiezer footer select {
  margin-left: 10px;
}
.popup-talen-kiezer select {
  border: 1px solid var(--theme-grey-line-color);
  border-radius: 4px;
  background-color: var(--theme-bg-color);
  font-size: 14px;
  height: 30px;
}
.popup-talen-kiezer select:focus {
  outline: none;
  border-color: var(--theme-accent-bg-color);
}

.edit-icon {
  color: red;
  width: 36px;
  line-height: 36px;
  border-radius: 18px;
  font-size: 18px;
  font-weight: normal;
  background-color: white;
  text-align: center;
}

.page-container-exportcentrum page.hele-pagina,
body.exportcentrum-pdf-wrapper page.hele-pagina {
  width: 100%;
  height: 370mm;
  page-break-after: always;
  display: block;
  background-size: cover;
  clear: both;
}
.page-container-exportcentrum page.hele-pagina.achter,
body.exportcentrum-pdf-wrapper page.hele-pagina.achter {
  page-break-before: always;
  page-break-after: avoid;
}
.page-container-exportcentrum page.hele-pagina .leerlingnaam,
body.exportcentrum-pdf-wrapper page.hele-pagina .leerlingnaam {
  position: absolute;
  font-size: 38px;
  font-weight: bold;
  text-align: center;
  width: 60%;
  height: 200px;
  margin: 290px 20%;
  display: block;
}
.page-container-exportcentrum #exportdossier,
body.exportcentrum-pdf-wrapper #exportdossier {
  clear: both;
  position: relative;
  margin: 0;
  padding-top: 0px !important;
  background-color: white;
}
.page-container-exportcentrum #exportdossier > section,
body.exportcentrum-pdf-wrapper #exportdossier > section {
  clear: both;
  background-color: white;
  border-top: 1px solid var(--theme-grey-line-color);
}
.page-container-exportcentrum #exportdossier .school-header,
body.exportcentrum-pdf-wrapper #exportdossier .school-header {
  padding: 10px 0;
  font-size: 18px;
}
.page-container-exportcentrum #exportdossier .school-header img,
body.exportcentrum-pdf-wrapper #exportdossier .school-header img {
  max-width: 100px;
  height: 50px;
  vertical-align: middle;
  border-radius: 3px;
}
.page-container-exportcentrum #exportdossier #header_wrapper,
body.exportcentrum-pdf-wrapper #exportdossier #header_wrapper {
  position: relative;
}
.page-container-exportcentrum #exportdossier #header_wrapper #leerling_header #background_container,
body.exportcentrum-pdf-wrapper #exportdossier #header_wrapper #leerling_header #background_container {
  background-size: cover;
  margin: 0;
  min-height: 250px; /* encapsulate header image */
  position: relative;
}
.page-container-exportcentrum #exportdossier #header_wrapper #leerling_header #background_container .info-kader,
body.exportcentrum-pdf-wrapper #exportdossier #header_wrapper #leerling_header #background_container .info-kader {
  width: 400px;
  height: 250px;
  background-color: rgba(0, 0, 0, 0.3);
}
.page-container-exportcentrum #exportdossier #header_wrapper #leerling_header #background_container .info-kader .header_photo img,
body.exportcentrum-pdf-wrapper #exportdossier #header_wrapper #leerling_header #background_container .info-kader .header_photo img {
  margin: 25px 0 20px 25px;
  border: 1px solid #999;
  object-fit: cover;
  border-radius: 100%;
  height: 85px;
  width: 85px;
}
.page-container-exportcentrum #exportdossier #header_wrapper #leerling_header #background_container .info-kader #header_info .header_text,
body.exportcentrum-pdf-wrapper #exportdossier #header_wrapper #leerling_header #background_container .info-kader #header_info .header_text {
  padding: 5px;
  color: #fff;
  display: inline-block;
  margin: 5px;
  margin-left: 20px;
}
.page-container-exportcentrum #exportdossier #header_wrapper #leerling_header #background_container .info-kader #header_info .dossier_type,
body.exportcentrum-pdf-wrapper #exportdossier #header_wrapper #leerling_header #background_container .info-kader #header_info .dossier_type {
  font-size: 17px;
}
.page-container-exportcentrum #exportdossier #header_wrapper #leerling_header #background_container .info-kader #header_info .leerling_naam,
body.exportcentrum-pdf-wrapper #exportdossier #header_wrapper #leerling_header #background_container .info-kader #header_info .leerling_naam {
  font-size: 24px;
  line-height: 23px;
  margin: 0 0 0 25px;
  padding: 0;
}
.page-container-exportcentrum #exportdossier #header_wrapper #leerling_header #background_container .info-kader #header_info .motto-container,
body.exportcentrum-pdf-wrapper #exportdossier #header_wrapper #leerling_header #background_container .info-kader #header_info .motto-container {
  margin: 10px 0 0 0;
}
.page-container-exportcentrum #exportdossier #header_wrapper #leerling_header #background_container .info-kader #header_info .motto-container .motto,
body.exportcentrum-pdf-wrapper #exportdossier #header_wrapper #leerling_header #background_container .info-kader #header_info .motto-container .motto {
  margin: 0 0 0 25px;
  padding: 0;
  font-size: 17px;
}
.page-container-exportcentrum #exportdossier #header_wrapper #omschrijving,
body.exportcentrum-pdf-wrapper #exportdossier #header_wrapper #omschrijving {
  overflow-x: hidden;
}
.page-container-exportcentrum #exportdossier #header_wrapper #omschrijving > span,
body.exportcentrum-pdf-wrapper #exportdossier #header_wrapper #omschrijving > span {
  margin: 8px 0 0 25px;
  text-transform: uppercase;
  word-break: break-word;
  font-size: 12px;
  line-height: 21px;
  color: white;
}
.page-container-exportcentrum #exportdossier #dossier-type-heading,
body.exportcentrum-pdf-wrapper #exportdossier #dossier-type-heading {
  font-size: 24px;
  margin: 1em;
}
.page-container-exportcentrum #exportdossier h2.plusminus,
body.exportcentrum-pdf-wrapper #exportdossier h2.plusminus {
  font-weight: normal;
  display: block;
  text-align: left;
  cursor: pointer;
  margin: -22px 0;
  background-color: inherit;
  font-size: 18px;
}
.page-container-exportcentrum #exportdossier h2.plusminus:hover,
body.exportcentrum-pdf-wrapper #exportdossier h2.plusminus:hover {
  color: var(--theme-link-color);
}
.page-container-exportcentrum #exportdossier .werkblad,
body.exportcentrum-pdf-wrapper #exportdossier .werkblad {
  min-height: 90px;
  position: relative;
}
.page-container-exportcentrum #exportdossier .editveld,
body.exportcentrum-pdf-wrapper #exportdossier .editveld {
  min-height: 90px;
  padding: 1em;
  background-color: white;
  border: 1px solid var(--theme-grey-line-color);
  line-height: 1.6em;
}
.page-container-exportcentrum #exportdossier .editveld:focus,
body.exportcentrum-pdf-wrapper #exportdossier .editveld:focus {
  border: solid 1px #99bfff;
}
.page-container-exportcentrum #exportdossier #naw-gegevens ul label,
body.exportcentrum-pdf-wrapper #exportdossier #naw-gegevens ul label {
  display: inline-block;
  color: #7a7a7a;
  min-width: 30%;
}
.page-container-exportcentrum #exportdossier #naw-gegevens ul,
body.exportcentrum-pdf-wrapper #exportdossier #naw-gegevens ul {
  padding: 14px 20px 10px 0;
  list-style-type: none;
  float: right;
  width: 45%;
}
.page-container-exportcentrum #exportdossier #naw-gegevens ul li,
body.exportcentrum-pdf-wrapper #exportdossier #naw-gegevens ul li {
  min-height: 30px;
}
.page-container-exportcentrum #exportdossier #naw-gegevens ul li input,
body.exportcentrum-pdf-wrapper #exportdossier #naw-gegevens ul li input {
  margin: 0;
}
.page-container-exportcentrum #exportdossier #naw-gegevens ul:first-of-type,
body.exportcentrum-pdf-wrapper #exportdossier #naw-gegevens ul:first-of-type {
  float: left;
  width: 50%;
  padding-left: 20px;
}
.page-container-exportcentrum #exportdossier #biografie p,
body.exportcentrum-pdf-wrapper #exportdossier #biografie p {
  float: right;
  vertical-align: top;
  margin-right: 20px;
  padding-left: 20px;
  background-color: white;
}
.page-container-exportcentrum #exportdossier #biografie p:first-of-type,
body.exportcentrum-pdf-wrapper #exportdossier #biografie p:first-of-type {
  float: left;
}
.page-container-exportcentrum #exportdossier #biografie iframe,
body.exportcentrum-pdf-wrapper #exportdossier #biografie iframe {
  width: 100%;
}
.page-container-exportcentrum #exportdossier #biografie .youtubed,
body.exportcentrum-pdf-wrapper #exportdossier #biografie .youtubed {
  text-align: center;
  height: 20em;
}
.page-container-exportcentrum #exportdossier #skills h3,
body.exportcentrum-pdf-wrapper #exportdossier #skills h3 {
  font-size: 17px;
  display: inline-block;
}
.page-container-exportcentrum #exportdossier #skills section > div > *,
body.exportcentrum-pdf-wrapper #exportdossier #skills section > div > * {
  display: inline-block;
}
.page-container-exportcentrum #exportdossier #skills .skill-subsection,
body.exportcentrum-pdf-wrapper #exportdossier #skills .skill-subsection {
  min-height: 30px;
  margin-top: 10px;
  display: flex;
}
.page-container-exportcentrum #exportdossier #skills .skill-subsection h4,
body.exportcentrum-pdf-wrapper #exportdossier #skills .skill-subsection h4 {
  font-size: 1rem;
  width: 43%;
  padding: 0 1em 0 0;
  margin: 0;
  flex: 1;
}
.page-container-exportcentrum #exportdossier #skills .skill-subsection .marker,
body.exportcentrum-pdf-wrapper #exportdossier #skills .skill-subsection .marker {
  position: relative;
  top: 6px;
  width: 260px;
  min-width: 40%;
}
.page-container-exportcentrum #exportdossier #skills .skill-subsection .marker .greyline,
body.exportcentrum-pdf-wrapper #exportdossier #skills .skill-subsection .marker .greyline {
  display: inline-block;
  height: 6px;
  min-width: 250px;
  border-radius: 3px;
  background-color: #dedede;
  position: relative;
  padding-top: 3px;
}
.page-container-exportcentrum #exportdossier #skills .skill-subsection .marker .markerbar,
body.exportcentrum-pdf-wrapper #exportdossier #skills .skill-subsection .marker .markerbar {
  text-align: center;
}
.page-container-exportcentrum #exportdossier #skills .skill-subsection .beoordelingen,
body.exportcentrum-pdf-wrapper #exportdossier #skills .skill-subsection .beoordelingen {
  width: 115px;
}
.page-container-exportcentrum #exportdossier .markerbar,
body.exportcentrum-pdf-wrapper #exportdossier .markerbar {
  display: inline-block;
  height: 10px;
  border-radius: 5px;
  background-color: #98c6bf;
  top: -7px;
  width: 20px;
  position: relative;
  left: 220px;
}
.page-container-exportcentrum #exportdossier .markerline,
body.exportcentrum-pdf-wrapper #exportdossier .markerline {
  display: inline-block;
  height: 16px;
  background-color: #000;
  top: -5px;
  width: 2px;
  position: absolute;
}
.page-container-exportcentrum #exportdossier #skills .beoordelingen,
body.exportcentrum-pdf-wrapper #exportdossier #skills .beoordelingen {
  text-align: right;
}
.page-container-exportcentrum #exportdossier #interesses input[type=checkbox],
body.exportcentrum-pdf-wrapper #exportdossier #interesses input[type=checkbox] {
  vertical-align: top;
}
.page-container-exportcentrum #exportdossier #projecten img,
.page-container-exportcentrum #exportdossier #projecten h3,
.page-container-exportcentrum #exportdossier #werkervaring img,
.page-container-exportcentrum #exportdossier #werkervaring h3,
.page-container-exportcentrum #exportdossier #interesses img,
.page-container-exportcentrum #exportdossier #interesses h3,
.page-container-exportcentrum #exportdossier #opleidingen img,
.page-container-exportcentrum #exportdossier #opleidingen h3,
body.exportcentrum-pdf-wrapper #exportdossier #projecten img,
body.exportcentrum-pdf-wrapper #exportdossier #projecten h3,
body.exportcentrum-pdf-wrapper #exportdossier #werkervaring img,
body.exportcentrum-pdf-wrapper #exportdossier #werkervaring h3,
body.exportcentrum-pdf-wrapper #exportdossier #interesses img,
body.exportcentrum-pdf-wrapper #exportdossier #interesses h3,
body.exportcentrum-pdf-wrapper #exportdossier #opleidingen img,
body.exportcentrum-pdf-wrapper #exportdossier #opleidingen h3 {
  vertical-align: top;
}
.page-container-exportcentrum #exportdossier #berichten .img-placeholder,
body.exportcentrum-pdf-wrapper #exportdossier #berichten .img-placeholder {
  display: none !important;
}
.page-container-exportcentrum #exportdossier #berichten .memorie_item,
body.exportcentrum-pdf-wrapper #exportdossier #berichten .memorie_item {
  display: inline-block;
}
.page-container-exportcentrum #exportdossier #berichten h3,
body.exportcentrum-pdf-wrapper #exportdossier #berichten h3 {
  display: none;
}
.page-container-exportcentrum #exportdossier #berichten span,
body.exportcentrum-pdf-wrapper #exportdossier #berichten span {
  font-size: 14px;
  margin: 0 0 0 15px;
  line-height: 1.7;
}
.page-container-exportcentrum #exportdossier #berichten .memorie_tekst,
body.exportcentrum-pdf-wrapper #exportdossier #berichten .memorie_tekst {
  margin-top: 0.4em;
}
.page-container-exportcentrum #exportdossier #motivatie h4,
body.exportcentrum-pdf-wrapper #exportdossier #motivatie h4 {
  padding: 0 5px;
}
.page-container-exportcentrum #exportdossier #projecten img,
.page-container-exportcentrum #exportdossier #werkervaring img,
.page-container-exportcentrum #exportdossier #interesses img,
.page-container-exportcentrum #exportdossier #opleidingen img,
body.exportcentrum-pdf-wrapper #exportdossier #projecten img,
body.exportcentrum-pdf-wrapper #exportdossier #werkervaring img,
body.exportcentrum-pdf-wrapper #exportdossier #interesses img,
body.exportcentrum-pdf-wrapper #exportdossier #opleidingen img {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid var(--theme-border-color);
  width: 60px;
}
.page-container-exportcentrum #exportdossier #projecten img + div,
.page-container-exportcentrum #exportdossier #projecten div.img-placeholder + div,
.page-container-exportcentrum #exportdossier #werkervaring img + div,
.page-container-exportcentrum #exportdossier #werkervaring div.img-placeholder + div,
.page-container-exportcentrum #exportdossier #interesses img + div,
.page-container-exportcentrum #exportdossier #interesses div.img-placeholder + div,
.page-container-exportcentrum #exportdossier #opleidingen img + div,
.page-container-exportcentrum #exportdossier #opleidingen div.img-placeholder + div,
body.exportcentrum-pdf-wrapper #exportdossier #projecten img + div,
body.exportcentrum-pdf-wrapper #exportdossier #projecten div.img-placeholder + div,
body.exportcentrum-pdf-wrapper #exportdossier #werkervaring img + div,
body.exportcentrum-pdf-wrapper #exportdossier #werkervaring div.img-placeholder + div,
body.exportcentrum-pdf-wrapper #exportdossier #interesses img + div,
body.exportcentrum-pdf-wrapper #exportdossier #interesses div.img-placeholder + div,
body.exportcentrum-pdf-wrapper #exportdossier #opleidingen img + div,
body.exportcentrum-pdf-wrapper #exportdossier #opleidingen div.img-placeholder + div {
  display: inline-block;
}
.page-container-exportcentrum #exportdossier #projecten h3,
.page-container-exportcentrum #exportdossier #werkervaring h3,
.page-container-exportcentrum #exportdossier #interesses h3,
.page-container-exportcentrum #exportdossier #opleidingen h3,
body.exportcentrum-pdf-wrapper #exportdossier #projecten h3,
body.exportcentrum-pdf-wrapper #exportdossier #werkervaring h3,
body.exportcentrum-pdf-wrapper #exportdossier #interesses h3,
body.exportcentrum-pdf-wrapper #exportdossier #opleidingen h3 {
  margin: 0;
  margin-left: 15px;
  font-size: 16px;
  color: var(--theme-fg-color);
}
.page-container-exportcentrum #exportdossier #projecten ul,
body.exportcentrum-pdf-wrapper #exportdossier #projecten ul {
  display: block;
  padding-left: 15px;
  list-style-type: none;
  vertical-align: bottom;
}
.page-container-exportcentrum #exportdossier #projecten span,
.page-container-exportcentrum #exportdossier #werkervaring span,
.page-container-exportcentrum #exportdossier #interesses span,
.page-container-exportcentrum #exportdossier #opleidingen span,
body.exportcentrum-pdf-wrapper #exportdossier #projecten span,
body.exportcentrum-pdf-wrapper #exportdossier #werkervaring span,
body.exportcentrum-pdf-wrapper #exportdossier #interesses span,
body.exportcentrum-pdf-wrapper #exportdossier #opleidingen span {
  display: inline-block;
  margin-left: 15px;
  vertical-align: middle;
  font-size: 13px;
  color: #999;
}
.page-container-exportcentrum #exportdossier #projecten li,
body.exportcentrum-pdf-wrapper #exportdossier #projecten li {
  display: inline-block;
  padding-right: 1em;
  text-transform: uppercase;
  color: #aaa;
}
.page-container-exportcentrum #exportdossier #projecten section,
.page-container-exportcentrum #exportdossier #werkervaring section,
.page-container-exportcentrum #exportdossier #berichten section,
.page-container-exportcentrum #exportdossier #interesses section,
.page-container-exportcentrum #exportdossier #skills section,
.page-container-exportcentrum #exportdossier #opleidingen section,
body.exportcentrum-pdf-wrapper #exportdossier #projecten section,
body.exportcentrum-pdf-wrapper #exportdossier #werkervaring section,
body.exportcentrum-pdf-wrapper #exportdossier #berichten section,
body.exportcentrum-pdf-wrapper #exportdossier #interesses section,
body.exportcentrum-pdf-wrapper #exportdossier #skills section,
body.exportcentrum-pdf-wrapper #exportdossier #opleidingen section {
  min-height: 6em;
  padding: 20px;
}
.page-container-exportcentrum #exportdossier #projecten section input[type=checkbox],
.page-container-exportcentrum #exportdossier #werkervaring section input[type=checkbox],
.page-container-exportcentrum #exportdossier #berichten section input[type=checkbox],
.page-container-exportcentrum #exportdossier #interesses section input[type=checkbox],
.page-container-exportcentrum #exportdossier #skills section input[type=checkbox],
.page-container-exportcentrum #exportdossier #opleidingen section input[type=checkbox],
body.exportcentrum-pdf-wrapper #exportdossier #projecten section input[type=checkbox],
body.exportcentrum-pdf-wrapper #exportdossier #werkervaring section input[type=checkbox],
body.exportcentrum-pdf-wrapper #exportdossier #berichten section input[type=checkbox],
body.exportcentrum-pdf-wrapper #exportdossier #interesses section input[type=checkbox],
body.exportcentrum-pdf-wrapper #exportdossier #skills section input[type=checkbox],
body.exportcentrum-pdf-wrapper #exportdossier #opleidingen section input[type=checkbox] {
  margin: 0 6px 0 0;
  width: 16px;
}
.page-container-exportcentrum #exportdossier #projecten section.subsection,
.page-container-exportcentrum #exportdossier #werkervaring section.subsection,
.page-container-exportcentrum #exportdossier #berichten section.subsection,
.page-container-exportcentrum #exportdossier #interesses section.subsection,
.page-container-exportcentrum #exportdossier #skills section.subsection,
.page-container-exportcentrum #exportdossier #opleidingen section.subsection,
body.exportcentrum-pdf-wrapper #exportdossier #projecten section.subsection,
body.exportcentrum-pdf-wrapper #exportdossier #werkervaring section.subsection,
body.exportcentrum-pdf-wrapper #exportdossier #berichten section.subsection,
body.exportcentrum-pdf-wrapper #exportdossier #interesses section.subsection,
body.exportcentrum-pdf-wrapper #exportdossier #skills section.subsection,
body.exportcentrum-pdf-wrapper #exportdossier #opleidingen section.subsection {
  display: flex;
  align-items: start;
}
.page-container-exportcentrum #exportdossier #projecten .vak-uitwerkingen,
body.exportcentrum-pdf-wrapper #exportdossier #projecten .vak-uitwerkingen {
  padding-top: 14px;
}
.page-container-exportcentrum #exportdossier #projecten .vak-uitwerkingen > h3,
body.exportcentrum-pdf-wrapper #exportdossier #projecten .vak-uitwerkingen > h3 {
  display: inline-block;
  font-size: 18px;
  margin: 0;
}
.page-container-exportcentrum #exportdossier #projecten .vak-uitwerkingen > .vak-uitwerkingen-container,
body.exportcentrum-pdf-wrapper #exportdossier #projecten .vak-uitwerkingen > .vak-uitwerkingen-container {
  margin-top: 20px;
}
.page-container-exportcentrum #exportdossier #projecten .vak-uitwerkingen > .vak-uitwerkingen-container section,
body.exportcentrum-pdf-wrapper #exportdossier #projecten .vak-uitwerkingen > .vak-uitwerkingen-container section {
  margin: 0px;
  padding: 0px;
}
.page-container-exportcentrum #exportdossier #projecten .vak-uitwerkingen > .vak-uitwerkingen-container section.subsection,
body.exportcentrum-pdf-wrapper #exportdossier #projecten .vak-uitwerkingen > .vak-uitwerkingen-container section.subsection {
  display: flex;
  align-items: start;
}
.page-container-exportcentrum #exportdossier .memorie_item,
body.exportcentrum-pdf-wrapper #exportdossier .memorie_item {
  flex: 1;
  vertical-align: top;
  max-width: 90%;
}
.page-container-exportcentrum #exportdossier .memorie_tekst,
body.exportcentrum-pdf-wrapper #exportdossier .memorie_tekst {
  margin-left: 15px;
  font-size: 13px;
  line-height: 1.6em;
}
.page-container-exportcentrum #exportdossier .memorie_toelichting,
body.exportcentrum-pdf-wrapper #exportdossier .memorie_toelichting {
  color: var(--theme-link-color);
  margin-left: 15px;
  cursor: pointer;
}
.page-container-exportcentrum #exportdossier .memorie_edit_toelichting,
body.exportcentrum-pdf-wrapper #exportdossier .memorie_edit_toelichting {
  display: none;
  margin-left: 15px;
  margin-bottom: 20px;
  min-height: 90px;
  padding: 1em;
  background-color: var(--theme-accent3-bg-color);
  border: 1px solid var(--theme-grey-line-color);
}
.page-container-exportcentrum #exportdossier .memorie_edit_toelichting:focus,
body.exportcentrum-pdf-wrapper #exportdossier .memorie_edit_toelichting:focus {
  border: solid 1px #99bfff;
  background-color: white;
}
.page-container-exportcentrum #exportdossier #supporters > section,
body.exportcentrum-pdf-wrapper #exportdossier #supporters > section {
  padding: 1em 0;
  background-color: var(--theme-accent3-bg-color);
  margin-bottom: 1em;
}
.page-container-exportcentrum #exportdossier #supporters section h3,
body.exportcentrum-pdf-wrapper #exportdossier #supporters section h3 {
  display: inline-block;
  min-width: 40%;
  margin: 0;
}
.page-container-exportcentrum #exportdossier #supporters section div:last-child,
body.exportcentrum-pdf-wrapper #exportdossier #supporters section div:last-child {
  border-top: 1px solid #c3c3c3;
  padding: 1em;
  padding-left: 1.4em;
  padding-bottom: 0;
  margin: 0.5em;
}
.page-container-exportcentrum #exportdossier > section:last-child,
body.exportcentrum-pdf-wrapper #exportdossier > section:last-child {
  padding-bottom: 1em;
}
.page-container-exportcentrum.export,
body.exportcentrum-pdf-wrapper.export {
  background: white;
}
.page-container-exportcentrum.export #skills,
body.exportcentrum-pdf-wrapper.export #skills {
  overflow: visible;
}
.page-container-exportcentrum.export .youtube-lazy,
body.exportcentrum-pdf-wrapper.export .youtube-lazy {
  max-height: 100%;
  width: auto;
}
.page-container-exportcentrum.export #exportdossier > section,
body.exportcentrum-pdf-wrapper.export #exportdossier > section {
  border: none;
}
.page-container-exportcentrum.export #exportdossier input[type=checkbox],
body.exportcentrum-pdf-wrapper.export #exportdossier input[type=checkbox] {
  display: none !important;
}
.page-container-exportcentrum.export #exportdossier .editveld,
body.exportcentrum-pdf-wrapper.export #exportdossier .editveld {
  background-color: white;
  border: none;
  padding-left: 0em;
}
.page-container-exportcentrum.export #exportdossier .plusminus_panel,
body.exportcentrum-pdf-wrapper.export #exportdossier .plusminus_panel {
  display: block;
}
.page-container-exportcentrum.export #exportdossier .memorie_toelichting,
body.exportcentrum-pdf-wrapper.export #exportdossier .memorie_toelichting {
  display: none;
}
.page-container-exportcentrum.export #exportdossier .memorie_edit_toelichting,
body.exportcentrum-pdf-wrapper.export #exportdossier .memorie_edit_toelichting {
  background-color: white;
  display: block;
  border: none;
  padding: 0;
  flex: 1;
}
.page-container-exportcentrum.export #exportdossier #naw-gegevens ul:first-of-type,
.page-container-exportcentrum.export #exportdossier #biografie p:first-of-type,
.page-container-exportcentrum.export #exportdossier #motivatie .plusminus_panel,
.page-container-exportcentrum.export #exportdossier #opleidingen section,
.page-container-exportcentrum.export #exportdossier #werkervaring section,
.page-container-exportcentrum.export #exportdossier #berichten section,
.page-container-exportcentrum.export #exportdossier #interesses section,
.page-container-exportcentrum.export #exportdossier #skills section,
.page-container-exportcentrum.export #exportdossier #projecten section,
body.exportcentrum-pdf-wrapper.export #exportdossier #naw-gegevens ul:first-of-type,
body.exportcentrum-pdf-wrapper.export #exportdossier #biografie p:first-of-type,
body.exportcentrum-pdf-wrapper.export #exportdossier #motivatie .plusminus_panel,
body.exportcentrum-pdf-wrapper.export #exportdossier #opleidingen section,
body.exportcentrum-pdf-wrapper.export #exportdossier #werkervaring section,
body.exportcentrum-pdf-wrapper.export #exportdossier #berichten section,
body.exportcentrum-pdf-wrapper.export #exportdossier #interesses section,
body.exportcentrum-pdf-wrapper.export #exportdossier #skills section,
body.exportcentrum-pdf-wrapper.export #exportdossier #projecten section {
  padding-left: 0;
}
.page-container-exportcentrum.export #exportdossier #berichten span,
body.exportcentrum-pdf-wrapper.export #exportdossier #berichten span {
  margin-left: 0;
}
.page-container-exportcentrum.export #exportdossier #berichten .memorie_tekst,
body.exportcentrum-pdf-wrapper.export #exportdossier #berichten .memorie_tekst {
  margin-left: 0;
}
.page-container-exportcentrum.export #exportdossier #skills .beoordelingen,
body.exportcentrum-pdf-wrapper.export #exportdossier #skills .beoordelingen {
  width: 16%;
}

body.exportcentrum-pdf-wrapper #exportdossier {
  box-sizing: border-box;
  width: 210mm;
}
body.exportcentrum-pdf-wrapper #exportdossier #dossier-type-heading {
  margin: 1em 0 1em 20px;
}
body.exportcentrum-pdf-wrapper #exportdossier > section {
  padding-left: 20px;
}
body.exportcentrum-pdf-wrapper #exportdossier > section > h2.plusminus {
  margin: 0;
  padding: 20px 0 0 0;
  page-break-after: avoid !important;
  font-size: 20px;
}
body.exportcentrum-pdf-wrapper #exportdossier > section > section {
  padding: 0;
  margin: 0;
  page-break-inside: avoid !important;
  overflow: unset !important;
}
body.exportcentrum-pdf-wrapper #exportdossier > section > section:first-of-type {
  page-break-before: avoid !important;
}

body > .header-menu {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
  background-color: var(--theme-bg-color);
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}
body > .header-menu > .header-content {
  width: var(--content-width);
  max-width: calc(100vw - 65px);
  height: 60px;
  line-height: 60px;
  display: flex;
  align-items: center;
  margin: 0 auto;
}
body > .header-menu > .header-content:not(.open):has(.not-on-open) .not-on-open {
  display: none;
}
@media only screen and (max-width: 1259.99px) {
  body > .header-menu > .header-content {
    margin-left: calc((100vw - var(--content-width) - 65px) / 2);
  }
}
@media only screen and (max-width: 767.99px) {
  body > .header-menu > .header-content {
    max-width: 100vw;
    margin-left: 0;
  }
}
body > .header-menu > .header-content > .logo-container {
  display: grid;
  align-content: center;
  justify-content: center;
  width: 60px;
  height: 60px;
}
body > .header-menu > .header-content > .logo-container > .logo {
  display: inline-block;
  width: 45px;
  height: 45px;
  background-repeat: no-repeat;
  background-position: 0 center;
}
body > .header-menu > .header-content > .logo-container > .logo.peppels {
  background-image: url(/gfx/algemeen/logo/peppels@x1black.png);
}
body > .header-menu > .header-content > .logo-container > .logo.owik {
  background-image: url(/gfx/algemeen/logo/owik@x1black.png);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body > .header-menu > .header-content > .logo-container > .logo {
    background-size: auto 45px;
  }
  body > .header-menu > .header-content > .logo-container > .logo.peppels {
    background-image: url(/gfx/algemeen/logo/peppels@x2black.png);
  }
  body > .header-menu > .header-content > .logo-container > .logo.owik {
    background-image: url(/gfx/algemeen/logo/owik@x2black.png);
  }
}
@media only screen and (max-width: 767.99px) {
  body > .header-menu > .header-content > .logo-container > .logo {
    width: 40px;
    height: 40px;
    background-size: contain;
  }
}
body > .header-menu > .header-content > .menu-content {
  flex: 1;
  display: flex;
  height: inherit;
}
body > .header-menu > .header-content > .menu-content > nav {
  height: inherit;
  -webkit-user-select: none;
  user-select: none;
  font-size: 0;
}
body > .header-menu > .header-content > .menu-content > nav > * {
  font-size: initial;
}
body > .header-menu > .header-content > .menu-content > nav > span {
  display: inline-block;
  height: inherit;
  line-height: inherit;
  margin-left: 1.5em;
  color: var(--theme-fg-color);
  cursor: pointer;
  font-size: 20px;
}
@media only screen and (max-width: 767.99px) {
  body > .header-menu > .header-content > .menu-content > nav > span {
    margin-left: 0;
  }
}
body > .header-menu > .header-content > .menu-content > nav > span.selected {
  --selected-color: #222;
  color: var(--selected-color);
}
@media only screen and (min-width: 768px) {
  body > .header-menu > .header-content > .menu-content > nav > span.selected {
    border-bottom: 2px solid var(--selected-color);
  }
}
body > .header-menu > .header-content > .menu-content > nav > span .badge {
  position: relative;
  top: 0px;
  left: -2px;
  line-height: 18px;
  margin: 0;
  padding: 0;
  min-width: unset;
}
body > .header-menu > .header-content > .menu-content > nav > span .badge.badge-todo {
  width: 12px;
  height: 12px;
}
body > .header-menu > .header-content > .menu-content > nav > span .badge.fa-exclamation-circle {
  color: #fec800;
  font-weight: bold;
  font-size: 15px;
}
@media only screen and (max-width: 767.99px) {
  body > .header-menu > .header-content:not(.open) > .menu-content .menu-account,
  body > .header-menu > .header-content:not(.open) > .menu-content .pakhuis-button,
  body > .header-menu > .header-content:not(.open) > .menu-content .install-pwa,
  body > .header-menu > .header-content:not(.open) > .menu-content > nav > :not(.selected):not(.mobile-menu-opener) {
    display: none;
  }
  body > .header-menu > .header-content.open {
    background-color: white;
    height: var(--real100vh);
    align-items: start;
  }
  body > .header-menu > .header-content.open > .logo-container {
    grid-area: logo;
  }
  body > .header-menu > .header-content.open > .menu-content {
    flex-direction: column;
    margin-left: -60px;
    margin-top: 60px;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    border-top: 1px solid #e5e5e5;
    background: linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
    /* Opera doesn't support this in the shorthand */
    background-attachment: local, local, scroll, scroll;
  }
  body > .header-menu > .header-content.open > .menu-content > nav {
    display: contents;
  }
  body > .header-menu > .header-content.open > .menu-content > nav > span {
    height: unset;
    margin: 0;
    padding-left: 20px;
    padding-right: 20px;
    line-height: 50px;
    font-size: 20px;
  }
  body > .header-menu > .header-content.open > .menu-content > nav > span > a {
    display: flex;
    justify-content: space-between;
  }
  body > .header-menu > .header-content.open > .menu-content > nav > .mobile-liniaal {
    padding: 20px;
    margin-top: 10px;
    border-top: 1px solid var(--theme-grey-line-color);
    border-bottom: 1px solid var(--theme-grey-line-color);
    line-height: 40px;
  }
  body > .header-menu > .header-content.open > .menu-content > nav > .mobile-liniaal > span {
    display: flex;
  }
  body > .header-menu > .header-content.open > .menu-content > nav > .mobile-liniaal > span.not-on-mobile {
    display: none;
  }
  body > .header-menu > .header-content.open > .menu-content > nav > .mobile-liniaal > span > i {
    flex: 0 0 30px;
  }
  body > .header-menu > .header-content.open > .menu-content > .link {
    height: min-content;
    text-align: left;
    padding-left: 20px;
  }
  body > .header-menu > .header-content.open > .menu-content > .install-pwa {
    margin-left: 20px;
  }
  body > .header-menu > .header-content.open > .menu-content > .pakhuis-button {
    height: min-content;
    margin: 0;
    padding-left: 20px;
  }
  body > .header-menu > .header-content.open > .menu-content > .menu-account {
    display: grid;
    grid-template-areas: "avatar initials" "rest rest";
    grid-template-rows: 60px auto;
    grid-template-columns: min-content min-content;
    justify-content: left;
    height: unset;
    line-height: inherit;
    align-items: center;
    padding: 20px 20px 0;
    margin: 0;
    border-top: 1px solid #e5e5e5;
  }
  body > .header-menu > .header-content.open > .menu-content > .menu-account > img {
    grid-area: avatar;
    width: 50px;
    height: 50px;
  }
  body > .header-menu > .header-content.open > .menu-content > .menu-account > .initials {
    grid-area: initials;
    padding-left: 0.5em;
  }
  body > .header-menu > .header-content.open > .menu-content > .menu-account > .initials > i {
    display: none;
  }
  body > .header-menu > .header-content.open > .menu-content > .menu-account {
    grid-template-rows: 0 auto;
  }
  body > .header-menu > .header-content.open > .menu-content > .menu-account > img, body > .header-menu > .header-content.open > .menu-content > .menu-account > .initials {
    display: none;
  }
  body > .header-menu > .header-content.open > .menu-content > .menu-account > .popup-menu {
    grid-area: rest;
    position: relative;
    top: unset;
    display: block !important;
    contain: unset;
    box-shadow: unset;
    font-size: 16px;
  }
  body > .header-menu > .header-content.open > .menu-content > .menu-account > .popup-menu > :first-child {
    display: none;
  }
  body > .header-menu > .header-content.open > .menu-content > .menu-account > .popup-menu > * {
    padding: 0;
    border: none;
  }
  body > .header-menu > .header-content.open > .menu-content > .menu-account > .popup-menu > *:hover {
    background-color: initial;
  }
  body > .header-menu > .header-content.open > .mobile-menu-opener {
    position: absolute;
    top: 0;
    right: 0;
  }
}
body > .header-menu > .header-content .install-pwa {
  margin-left: auto;
}
body > .header-menu > .header-content .install-pwa .button {
  --bg-color: #ededed;
  vertical-align: middle;
}
body > .header-menu > .header-content .pakhuis-button {
  padding-left: 20px;
}
body > .header-menu > .header-content .pakhuis-button img {
  height: 15px;
  vertical-align: middle;
}
body > .header-menu > .header-content > .mobile-menu-opener {
  display: none;
  align-content: center;
  justify-content: left;
  width: 60px;
  height: 60px;
  padding-left: 20px;
}
@media only screen and (max-width: 767.99px) {
  body > .header-menu > .header-content > .mobile-menu-opener {
    display: grid;
  }
}
body > .header-menu > .header-content > .mobile-menu-opener > i {
  display: block;
  font-size: 26px;
}
body > .header-menu > .header-content .menu-account {
  display: grid;
  grid-template-areas: "avatar avatar" "initials chevron";
  grid-template-rows: 25px 21px;
  height: 60px;
  padding: 7px 0;
  margin-left: 20px;
  line-height: 1;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
@media only screen and (min-width: 768px) {
  body > .header-menu > .header-content .menu-account {
    position: absolute;
    right: 20px;
  }
}
body > .header-menu > .header-content .menu-account .placeholder {
  grid-area: placeholder;
}
body > .header-menu > .header-content .menu-account .avatar {
  grid-area: avatar;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  justify-self: center;
}
body > .header-menu > .header-content .menu-account .initials {
  grid-area: initials;
  line-height: 21px;
}
body > .header-menu > .header-content .menu-account i {
  grid-area: chevron;
  margin-left: 0.3em;
}
body > .header-menu > .header-content .menu-account .popup-menu {
  right: 0;
  top: 39px;
}
body > .header-menu > .header-content .menu-account .popup-menu li > a {
  display: inline-block;
  width: 100%;
  height: 100%;
}
body > .header-menu .container {
  height: 60px;
  line-height: 60px;
  width: var(--content-width, 940px);
  margin: 0 auto;
}
body > .header-menu .container .logo-container {
  display: inline-block;
  height: inherit;
}
body > .header-menu .container .logo-container a.logo {
  display: inline-block;
  width: 184px;
  height: 60px;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 184px auto;
}
body > .header-menu .container .logo-container a.logo.peppels {
  background-image: url(/gfx/algemeen/logo-peppels-zwart@x2.png);
}
body > .header-menu .container .logo-container a.logo.owik {
  background-image: url(/gfx/algemeen/logo-owik-zwart@x2.png);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body > .header-menu .container .logo-container a.logo.peppels {
    background-image: url(/gfx/algemeen/logo-peppels-zwart@x2.png);
  }
  body > .header-menu .container .logo-container a.logo.owik {
    background-image: url(/gfx/algemeen/logo-owik-zwart@x2.png);
  }
}

@media only screen and (max-width: 767.99px) {
  body > .header-menu:has(> .header-content.open) ~ #wrapper > #content {
    display: none;
  }
}
body.leerling-pagina > .header-menu.standaard-header {
  background-color: rgba(0, 0, 0, 0.5);
}
body.leerling-pagina > .header-menu.standaard-header .container .logo-container a.logo.peppels {
  background-image: url("/gfx/algemeen/logo-peppels@2x.png");
}
body.leerling-pagina > .header-menu.standaard-header .container .logo-container a.logo.owik {
  background-image: url("/gfx/algemeen/logo-owik-wit@x2.png");
}
body.leerling-pagina > .header-menu.standaard-header .container .linkjes a, body.leerling-pagina > .header-menu.standaard-header .container .linkjes span {
  background: rgba(255, 255, 255, 0.7);
}

body > .wrapper {
  position: relative;
  width: var(--content-width);
  margin: 60px auto 0;
}
@media only screen and (max-width: 1259.99px) {
  body > .wrapper {
    margin-left: calc((100vw - var(--content-width) - 65px) / 2);
  }
}
@media only screen and (max-width: 767.99px) {
  body > .wrapper {
    max-width: 100vw;
    margin-left: 0;
  }
}
body > .wrapper #content {
  margin-bottom: 30px;
  padding-top: 30px;
}
@media only screen and (max-width: 991.99px) {
  body > .wrapper #content {
    padding-top: 5px;
    margin-bottom: 5px;
  }
}
@media only screen and (max-width: 767.99px) {
  body > .wrapper #content {
    padding-top: 0;
    margin-bottom: 0;
  }
}
body > .wrapper #content > .loading {
  font-size: 40px;
  color: #999;
  text-align: center;
  padding: 40px;
}
body > .wrapper #content > .loading span {
  display: none;
}

body.custom-background {
  background-attachment: fixed;
}

div.rechts-boven {
  position: absolute;
  width: 1000px;
  height: 2px;
  line-height: 60px;
  top: 6px;
}
div.rechts-boven a {
  display: block;
  margin: 0px 20px 0 0;
  float: right;
  color: var(--theme-fg-color) !important;
  font-size: 15px;
}
div.rechts-boven a i.fa {
  color: var(--theme-link-color);
}
div.rechts-boven a.peppels-rood {
  color: red !important;
}
div.rechts-boven a.peppels-rood i.fa {
  color: red !important;
}
div.rechts-boven button {
  margin: 10px 20px 0 0;
  float: right;
}

@media only screen and (max-width: 767.99px) {
  .planner-view-default table.dataTable > thead > tr > .talk > span,
  .planner-view-default table.dataTable > thead > tr > .afrond > span,
  .planner-view-default table.dataTable > thead > tr > .status > span {
    display: none;
  }
  .planner-view-default table.dataTable tr.itemregel td.titel:hover .planner-open-button {
    display: none !important;
  }
}
@media only screen and (max-width: 575.99px) {
  .planner-view-default table.dataTable .afrond,
  .planner-view-default table.dataTable .startdatum {
    display: none;
  }
  .planner-view-default table.dataTable tr.itemregel td.titel:hover .planner-open-button {
    display: none !important;
  }
}

tr.itemregel > td.nr {
  font-size: 12px;
}
tr.itemregel > td.afrond {
  text-align: center;
  padding: 0;
  font-size: 16px;
  color: var(--theme-light-fg-color);
}
tr.itemregel > td.inleveren {
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}
tr.itemregel > td .on-hover {
  vertical-align: top;
  display: none;
}
tr.itemregel .only-hover {
  display: none;
}
tr.itemregel:hover td .greyed, tr.itemregel.selected:hover td .greyed {
  background-color: white;
  border: 1px solid white;
}
tr.itemregel:hover td .on-hover, tr.itemregel.selected:hover td .on-hover {
  font-size: 14px;
  display: inline-block;
}
tr.itemregel:hover td .on-hover a::before, tr.itemregel.selected:hover td .on-hover a::before {
  display: none;
}
tr.itemregel:hover td.startdatum .beoordelingsvinkjes, tr.itemregel.selected:hover td.startdatum .beoordelingsvinkjes {
  background-color: var(--theme-link-bg-color);
}
tr.itemregel:hover td.startdatum .beoordelingsvinkjes:hover, tr.itemregel.selected:hover td.startdatum .beoordelingsvinkjes:hover {
  cursor: pointer;
  background-color: var(--theme-link-active-bg-color);
}
tr.itemregel:hover td .off-hover, tr.itemregel.selected:hover td .off-hover {
  display: none;
}
tr.itemregel:hover td .only-hover, tr.itemregel.selected:hover td .only-hover {
  display: inline-block;
}
tr.itemregel:hover td img.mini-foto, tr.itemregel.selected:hover td img.mini-foto {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 100%;
  margin-left: 5px;
  vertical-align: middle;
}
tr.itemregel:hover td.link a, tr.itemregel.selected:hover td.link a {
  font-size: 33px;
  display: inline-block;
}
tr.itemregel.selected:hover td .open-info, tr.itemregel.selected:hover td .toggle-archiveer, tr.itemregel.selected:hover td .open-uitwerking {
  border: 1px solid transparent;
  background-color: transparent;
  color: #eee;
}
tr.itemregel.selected td.startdatum span {
  filter: brightness(0.4);
}
tr.itemregel th.type {
  padding-left: 0px;
}
tr.itemregel th.type.padding {
  padding-left: 10px;
}
tr.itemregel th.vak {
  padding-left: 20px;
  min-width: 40px;
  padding: 0 0 0 20px;
}
tr.itemregel td.vak {
  text-align: center;
}
tr.itemregel td.vak img {
  display: inline-block;
  width: 25px;
  min-width: 25px;
  height: 25px;
  vertical-align: middle;
}
tr.itemregel td.vak i.fa {
  font-size: 11px;
}
tr.itemregel td.planning {
  text-align: center;
}
tr.itemregel td.link {
  width: 33px;
}
tr.itemregel td.link a {
  font-size: 33px;
  display: none;
}
tr.itemregel td.titel .titel i.pepicon3:not(.toets-rood) {
  font-size: 22px;
  color: var(--theme-link-color);
}
tr.itemregel td.titel .titel .prioriteit {
  color: #d0021a !important;
}
tr.itemregel td.titel a.titel:hover {
  color: var(--theme-link-color);
}
tr.itemregel td.titel i.pepicon3.toets-rood {
  font-size: 18px;
}
tr.itemregel td.titel i.fa, tr.itemregel td.titel i.pepicon3:not(.toets-rood) {
  margin-left: 0px;
  font-size: 16px;
  display: inline-block;
  height: 21px;
  color: var(--theme-link-color);
  max-height: 21px;
  line-height: 17px;
  vertical-align: top;
}
tr.itemregel td.titel .hidden-link > i.pepicon3 {
  display: none !important;
  font-size: 18px;
  color: var(--theme-link-color);
}
tr.itemregel td.titel:hover .hidden-link {
  display: inline-block !important;
}
tr.itemregel td.titel:hover .hidden-link i.pepicon3 {
  display: inline-block !important;
  color: var(--theme-link-color);
}
tr.itemregel td.titel .prioriteit {
  color: #d0021a !important;
}
tr.itemregel td.titel .planner-open-button {
  float: right;
  width: 130px;
  height: 24px;
  line-height: 24px;
  margin-left: auto;
  padding: 0 12px;
  border-radius: 15px;
  text-align: center;
  font-size: 13px;
  margin-top: 15px;
  background-color: var(--theme-link-bg-color);
  color: var(--theme-link-fg-color);
}
tr.itemregel td.titel .planner-open-button:hover {
  background-color: var(--theme-link-active-bg-color);
  color: var(--theme-link-active-fg-color);
}
tr.itemregel td.talk {
  text-align: center;
  color: var(--theme-light-fg-color);
  font-size: 16px;
}
tr.itemregel td.startdatum {
  color: #777;
  font-size: 13px;
  text-align: center;
}
tr.itemregel td.startdatum .pepicon3 {
  font-size: 18px;
  color: #d0021a;
}
tr.itemregel td.startdatum .startdatum-gestart, tr.itemregel td.startdatum .startdatum-duur, tr.itemregel td.startdatum .startdatum-inplannen, tr.itemregel td.startdatum .startdatum-voorbij, tr.itemregel td.startdatum .startdatum-beoordeeld {
  white-space: nowrap;
  display: inline-block;
  line-height: 20px;
  width: 60px;
  text-align: center;
  font-size: 12px;
  border-radius: 10px;
}
tr.itemregel td.startdatum .startdatum-inplannen {
  background-color: #ffe1e1;
  color: #e02020;
}
tr.itemregel td.startdatum .startdatum-duur {
  color: var(--theme-fg-color);
  background-color: rgba(68, 68, 68, 0.1);
}
tr.itemregel td.startdatum .startdatum-gestart {
  color: #3ba700;
  background-color: #e0fbd6;
}
tr.itemregel td.startdatum .startdatum-voorbij {
  color: #999;
  background-color: var(--theme-accent-bg-color);
  padding: 0 8px;
}
tr.itemregel td.datum {
  font-size: 1rem;
  color: #777;
}
tr.itemregel td.datum.verlopen-rood {
  color: red;
}
tr.itemregel td.soort {
  text-align: left;
}
tr.itemregel td.soort .pepicon3 {
  font-size: 18px;
  color: #999;
}
tr.itemregel td.plannerview {
  width: 420px;
  height: 55px;
  text-align: right;
  position: relative;
  overflow: hidden;
}
tr.itemregel td.plannerview div.grid {
  float: right;
  width: 414px;
  height: 55px;
  position: relative;
}
tr.itemregel td.plannerview div.grid div {
  width: 46px;
  height: 55px;
  float: left;
  border-radius: 0;
  background-color: transparent;
  border-right: 1px dotted #ccc;
}
tr.itemregel td.plannerview div.grid div.rb {
  border-right: 1px solid #636363;
}
tr.itemregel td.plannerview div.grid div:first-child {
  border-left: 1px dotted #ccc;
}
tr.itemregel td.plannerview div.dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: #ccc;
  margin-top: 24px;
  margin-left: 1px;
  position: absolute;
  border: 1px solid transparent;
}
tr.itemregel td.plannerview div.dot.online {
  background-color: white;
}
tr.itemregel td.plannerview div.dot.current {
  background-color: #d0021a;
}
tr.itemregel td.plannerview div.line {
  height: 10px;
  border-radius: 5px;
  background-color: #ccc;
  margin-top: 23px;
  margin-left: 1px;
  position: absolute;
}
tr.itemregel td.plannerview div.line.current {
  background-color: #d0021a;
}

.opdracht-plaatje {
  background-repeat: no-repeat;
  background-position: center 15px;
  vertical-align: middle;
  text-align: center;
}
.opdracht-plaatje .projectfoto {
  width: 40px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  border-radius: 4px;
  text-align: center;
  font-size: 33px;
  vertical-align: middle;
}
.opdracht-plaatje .projectfoto .pepicon3,
.opdracht-plaatje .projectfoto .fa-solid, .opdracht-plaatje .projectfoto .fa-regular, .opdracht-plaatje .projectfoto .fa-light {
  display: inline-block;
  font-size: 22px;
  vertical-align: top;
}
.opdracht-plaatje .projectfoto img {
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  vertical-align: top;
}

.dialog.module-bibliotheek > main .blokken-grid > .blok {
  position: relative;
}

.popup-library-module-details {
  width: 100%;
  height: 100%;
}
.popup-library-module-details > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.popup-library-module-details > header > h1 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 80%;
  flex: 0 1 50%;
}
.popup-library-module-details > main {
  max-height: calc(100% - var(--header-height));
  margin: 0;
  overflow-y: auto;
}

.page-tab-blokken .page-submenu.blokken-filter {
  display: flex;
  justify-content: space-between;
  border-bottom-color: transparent;
  align-items: center;
}
.page-tab-blokken .page-submenu.blokken-filter .filters {
  display: flex;
  align-items: center;
  justify-content: right;
  gap: 0 10px;
}
.page-tab-blokken .page-submenu.blokken-filter .filters .widget-zoeken {
  --height: 34px;
}
.page-tab-blokken .page-submenu.blokken-filter .filters .button.status {
  --height: 34px;
  position: relative;
}
.page-tab-blokken .page-submenu.blokken-filter .filters .button.status:hover {
  color: initial;
}
.page-tab-blokken .page-submenu.blokken-filter .filters .button.status.has-filter {
  border-color: var(--theme-link-color);
}
.page-tab-blokken .page-submenu.blokken-filter .filters .button.status.has-filter::after {
  position: absolute;
  top: 0;
  right: -2px;
  display: grid;
  align-content: center;
  border-radius: 100%;
  width: 10px;
  height: 10px;
  background-color: var(--theme-link-color);
  color: white;
  font-size: 6px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  font-weight: 400;
  font-family: "Font Awesome 6 Pro";
  content: "\f00d";
}
.page-tab-blokken .page-submenu.blokken-filter .filters .button.status .popup-menu {
  right: 0;
}

.planning-wijzer .wysiwyg-wb {
  min-height: 100px;
  padding: 5px;
}

.vakblok-blok {
  padding: 30px;
  border-bottom: 1px solid var(--theme-border-color);
}
.vakblok-blok > h2 {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 5px 0;
}

.upload-overlay {
  display: grid;
  justify-content: center;
  align-content: center;
  cursor: pointer;
}
.upload-overlay > .button {
  --height: 40px;
  padding: 0 20px;
  position: relative;
  font-size: 16px;
  border-radius: 4px;
}
.upload-overlay > .button > .popup-wijzig-image {
  --width: calc(min(300px, 40vw));
  position: absolute;
  width: var(--width);
  min-height: 200px;
  padding: 0;
  cursor: default;
  margin-left: calc(-20px - var(--width) * 0.25);
  margin-top: -60px;
}
@media only screen and (max-width: 575.99px) {
  .upload-overlay > .button > .popup-wijzig-image {
    position: fixed;
    margin-left: unset;
    --width: calc(min(300px, 100vw));
    left: calc(50vw - var(--width) * 0.5);
  }
}
.upload-overlay > .button > .popup-wijzig-image > header {
  height: 80px;
  line-height: 80px;
  text-align: center;
  border-bottom: 1px solid var(--theme-border-color);
}
.upload-overlay > .button > .popup-wijzig-image > header .button {
  --bg-color: var(--theme-accent-bg-color);
  --fg-color: var(--theme-fg-color);
  --hover-bg-color: var(--theme-accent2-bg-color);
  --hover-fg-color: var(--theme-fg-color);
}
.upload-overlay > .button > .popup-wijzig-image > main {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 20px;
  gap: 10px;
}
.upload-overlay > .button > .popup-wijzig-image > main > div {
  cursor: pointer;
  width: 100%;
  aspect-ratio: 80/54;
  background-size: cover;
  border-radius: 3px;
}
.upload-overlay > .button > .popup-wijzig-image > main > div:hover {
  filter: brightness(120%);
}

:root {
  --uitwerking-side-padding: 60px;
}

/*
    360×800
    360×780
    360×640
	375×812
    390×844
	393×873
    414×896
    412×915

	768px+ -> tablets

	810×1080

    1280×720
	1366×768
	1440×900
    1536×864
    1600×900
	1920×1080
    2560×1440




*/
.page-container header.page-submenu.planner-submenu {
  display: flex;
  align-items: center;
}
.page-container header.page-submenu.planner-submenu .button-rounded {
  --selected-bg-color: #ff3b2f;
  --selected-fg-color: white;
}

.planner {
  max-width: inherit;
  height: inherit;
  position: relative;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
.planner > .blok-info {
  border-bottom: 1px solid var(--theme-grey-line-color);
}
.planner .toevoegregel {
  max-width: 100vw;
  height: var(--page-submenu-height);
  line-height: var(--page-submenu-height);
  padding: 0 20px;
  display: flex;
  border-bottom: 1px solid var(--theme-grey-line-color);
}
@media only screen and (max-width: 575.99px) {
  .planner .toevoegregel {
    height: 50px;
    line-height: 50px;
  }
}
.planner .toevoegregel > span {
  display: inline-block;
  flex: 1;
}
.planner .toevoegregel > span:first-child {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.planner .toevoegregel > span.middlepart {
  text-align: center;
  font-size: 18px;
  white-space: nowrap;
}
@media only screen and (max-width: 575.99px) {
  .planner .toevoegregel > span.middlepart {
    display: none;
  }
}
.planner .toevoegregel > span.middlepart a.selected {
  color: var(--theme-fg-color);
}
.planner .toevoegregel > span.middlepart b {
  font-size: 12px;
}
.planner .toevoegregel > span.rightpart {
  display: flex;
  align-items: center;
  justify-content: right;
  gap: 0 10px;
  text-align: right;
  white-space: nowrap;
}
@media only screen and (max-width: 575.99px) {
  .planner .toevoegregel > span.rightpart {
    flex: 0 1;
  }
}
.planner .toevoegregel > span.rightpart label {
  cursor: pointer;
}
.planner .toevoegregel > span a.disabled {
  color: #ccc;
}
.planner .toevoegregel .button.planner-filter-button {
  --height: 34px;
  position: relative;
}
.planner .toevoegregel .button.planner-filter-button:not([data-selected-filter=""]) {
  color: var(--theme-link-color);
}
.planner .toevoegregel .button.planner-filter-button > .popup-menu {
  right: 0;
}
.planner .plannerlist > .planner-view {
  height: 100%;
  max-width: 100vw;
  overflow-x: auto;
}
.planner .plannerlist > .planner-view.planner-view-current {
  overflow-y: auto;
  overflow-x: hidden;
}
.planner .module-empty-planner-warning {
  text-align: center;
  font-weight: bold;
}

body:not(.leerling-pagina) .page-main.planner .plannerlist {
  height: 100%;
}
body:not(.leerling-pagina) .page-main.planner .toevoegregel + .plannerlist {
  height: calc(100% - var(--page-submenu-height));
}

body.leerling-pagina .plannerlist tr:last-child td:first-child {
  border-bottom-left-radius: var(--page-border-radius);
}

body.leerling-pagina .plannerlist tr:last-child td:last-child {
  border-bottom-right-radius: var(--page-border-radius);
}

ul.cando {
  -webkit-user-select: none;
  user-select: none;
}
ul.cando > li {
  background-color: #f5f9ed;
}
ul.cando > li .opdracht-plaatje {
  padding: 0 10px 0 20px;
  width: 70px;
}
ul.cando > li:first-child {
  display: flex;
  line-height: 54px;
  gap: 10px;
  justify-items: center;
  align-items: center;
}
ul.cando > li:first-child meter {
  flex: 1 1 100px;
  max-width: 30%;
}
ul.cando > li:first-child .status {
  flex: 0 1 40px;
  margin: 0 20px 0 auto;
  margin-left: auto;
  text-align: left;
}
ul.cando > li:first-child ~ li {
  padding-left: 80px;
  padding-right: 20px;
}
ul.cando > li:first-child ~ li:hover {
  background-color: #e5e9dd;
}
ul.cando > li:first-child ~ li > div:first-child {
  position: relative;
  line-height: 1.4;
  padding: 10px 0;
}
ul.cando > li:first-child ~ li > div:last-child {
  line-height: 40px;
}
ul.cando > li:first-child ~ li > div:last-child label {
  margin-right: 1em;
}

.cando_voorbeeld {
  position: absolute;
  z-index: 1;
  max-width: 70%;
  height: auto;
  margin: -50px auto 0 auto;
  padding: 20px;
  border: 1px solid #aeb0b8;
  border-radius: 5px;
  background-color: white;
  color: #505050;
  line-height: 21px;
  text-align: left;
  font-size: 14px;
  white-space: normal;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.cando_voorbeeld h3 {
  font-size: inherit;
  font-weight: bold;
  margin-top: 21px;
}
.cando_voorbeeld h3:first-child {
  margin: 0;
}
.cando_voorbeeld h3.top {
  margin-top: 1em;
}

.blokken .blokken-grid {
  display: grid;
  width: 100%;
  max-width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 20px 20px;
  font-size: 0;
  padding: 10px;
}
@media only screen and (max-width: 991.99px) {
  .blokken .blokken-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 10px;
  }
}
.blokken .blokken-grid > * {
  font-size: initial;
}
.blokken .blokken-grid.scrollbox {
  overflow-x: hidden;
  overflow-y: auto;
}
.blokken .blokken-grid .blok-uitklapper {
  position: relative;
  display: none;
  grid-column: 1/span 3;
  height: auto;
  transition: top 0.5s;
  margin-left: -10px;
  margin-right: -10px;
  background-color: var(--theme-accent-bg-color);
}
.blokken .blokken-grid .blok-uitklapper .uitklap-wrapper {
  font-size: 14px;
}
.blokken .blokken-grid .blok {
  display: block;
  border-radius: 5px;
  border: 1px solid var(--theme-border-color);
  background-color: var(--theme-accent-bg-color);
  color: white;
  cursor: pointer;
}
.blokken .blokken-grid .blok:has(+ .keuzeblok-details:not(.hidden)), .blokken .blokken-grid .blok:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.35);
}
.blokken .blokken-grid .blok .info-blok {
  overflow: hidden;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  border-top: 1px solid var(--theme-border-color);
  color: var(--theme-fg-color);
  background-color: white;
  transition: top 0.5s;
}
.blokken .blokken-grid .blok .info-blok .titel-blok {
  height: 65px;
  padding-top: 5px;
  background-color: white;
}
.blokken .blokken-grid .blok .info-blok .titel-blok h1 {
  line-height: 25px;
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
  font-size: 14px;
  font-weight: bold;
}
.blokken .blokken-grid .blok .info-blok .titel-blok h1 > i {
  color: #999;
}
.blokken .blokken-grid .blok .info-blok .titel-blok h2 {
  margin: 0px 0 0 0;
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--theme-grey-fg-color);
  font-size: 13px;
  font-weight: normal;
}
.blokken .blokken-grid .blok .cando {
  float: right;
  width: 30px;
  height: 16px;
  margin-top: 10px;
  margin-right: 3px;
  font-weight: bold;
  font-size: 10px;
  text-align: right;
  color: white;
}
.blokken .blokken-grid .blok.keuzeblok + .keuzeblok-details {
  position: relative;
  grid-column: 1/span 3;
  margin: 0 -10px;
  padding-bottom: 10px;
  background-color: var(--theme-accent-bg-color);
}
@media only screen and (max-width: 991.99px) {
  .blokken .blokken-grid .blok.keuzeblok + .keuzeblok-details {
    grid-column: 1/span 2;
  }
}
.blokken .blokken-grid .blok.keuzeblok + .keuzeblok-details > h1 {
  line-height: 50px;
  padding: 0 15px;
  font-size: 18px;
  font-weight: bold;
}
.blokken .blokken-grid .blok.keuzeblok + .keuzeblok-details .keuzeblokken {
  display: grid;
  grid-template-columns: min-content auto auto auto auto;
  line-height: 80px;
  margin: 0 10px;
  border-top: 1px solid var(--theme-grey-line-color);
  background-color: white;
}
.blokken .blokken-grid .blok.keuzeblok + .keuzeblok-details .keuzeblokken > span {
  height: 80px;
  border-bottom: 1px solid var(--theme-grey-line-color);
}
.blokken .blokken-grid .blok.keuzeblok + .keuzeblok-details .keuzeblokken > span:nth-child(5n+1) {
  border-left: 1px solid var(--theme-grey-line-color);
}
.blokken .blokken-grid .blok.keuzeblok + .keuzeblok-details .keuzeblokken > span:nth-child(5n+5) {
  border-right: 1px solid var(--theme-grey-line-color);
}
.blokken .blokken-grid .blok.keuzeblok + .keuzeblok-details .keuzeblokken > span:not(.acties) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}
.blokken .blokken-grid .blok.keuzeblok + .keuzeblok-details .keuzeblokken > span.image {
  padding-left: 10px;
  width: 110px;
}
.blokken .blokken-grid .blok.keuzeblok + .keuzeblok-details .keuzeblokken > span.image img {
  height: 60px;
  border-radius: 4px;
  vertical-align: middle;
}
.blokken .blokken-grid .blok.keuzeblok + .keuzeblok-details .keuzeblokken > span.titel {
  font-size: 14px;
}
.blokken .blokken-grid .blok.keuzeblok + .keuzeblok-details .keuzeblokken > span.aangeboden, .blokken .blokken-grid .blok.keuzeblok + .keuzeblok-details .keuzeblokken > span.aantal-activiteiten, .blokken .blokken-grid .blok.keuzeblok + .keuzeblok-details .keuzeblokken > span.plaatsen {
  font-size: 1rem;
  color: #777;
}
.blokken .blokken-grid .blok.keuzeblok + .keuzeblok-details .keuzeblokken > span.acties {
  padding: 0 10px;
}
.blokken .blokken-grid .blok.keuzeblok + .keuzeblok-details .keuzeblokken > span.acties .button-rounded.button-no-border {
  --bg-color: var(--theme-link-color);
  --fg-color: white;
  font-size: 1rem;
}
.blokken .blokken-grid p {
  padding-left: 10px;
}
.blokken .blokken-grid.sjabloonblokken .blok,
.blokken .blokken-grid .blok.biebblok {
  background-color: #aaa;
}
.blokken .blokken-grid.sjabloonblokken .blok.selected, .blokken .blokken-grid.sjabloonblokken .blok:hover,
.blokken .blokken-grid .blok.biebblok.selected,
.blokken .blokken-grid .blok.biebblok:hover {
  background-color: #6d6d6d;
  border-color: #6d6d6d;
}

.blok-info {
  padding: 30px;
}
@media only screen and (max-width: 767.99px) {
  .blok-info {
    padding: 10px;
  }
}
.blok-info .top-info + .serie {
  margin-top: 30px;
}
.blok-info .serie:has(+ .top-info) {
  margin-bottom: 30px;
}
.blok-info .serie {
  display: flex;
  height: 60px;
  align-content: center;
}
.blok-info .serie .miniblok {
  position: relative;
  display: block;
  width: 83px;
  height: auto;
  line-height: 140%;
  margin-right: 10px;
  padding: 5px;
  border-radius: 5px;
  text-align: center;
  font-size: 12px;
  background-size: cover;
  background-color: #98b0de;
  color: white;
  cursor: default;
}
.blok-info .serie .miniblok:hover:not(.magniet) {
  filter: brightness(120%);
  cursor: pointer;
}
.blok-info .serie .miniblok.afgerond {
  background-color: #94c660;
}
.blok-info .serie .miniblok.selected {
  background-color: var(--theme-link-active-bg-color);
}
.blok-info .serie .miniblok.actief {
  background-color: var(--theme-link-active-bg-color);
}
.blok-info .serie .miniblok.miniblok-add {
  font-size: 30px;
  padding: 10px;
  line-height: 45px;
}
.blok-info .serie .miniblok.miniblok-add:hover {
  filter: brightness(100%);
  color: var(--theme-link-color);
  cursor: pointer;
}
.blok-info .serie .miniblok.miniblok-add + .popup-menu {
  max-height: 500px;
  overflow-y: auto;
  min-width: 200px;
}
.blok-info .serie .miniblok.bieb {
  position: relative;
}
.blok-info .serie .miniblok.bieb:hover {
  filter: brightness(100%);
  background-image: none !important;
  background-color: #bbb;
  cursor: pointer;
}
.blok-info .serie .miniblok.bieb .links {
  width: 100%;
}
.blok-info .serie .miniblok.bieb .links span:hover {
  cursor: pointer;
  filter: invert(75%);
}
.blok-info .serie .miniblok.bieb .titel {
  position: absolute;
  bottom: 5px;
}
.blok-info .serie .miniblok.bieb .titel:hover {
  cursor: pointer;
  color: white;
  filter: invert(75%);
}
.blok-info .serie .miniblok.bieb.empty {
  background-color: white;
}
.blok-info .serie .miniblok.bieb.empty:hover {
  filter: brightness(100%);
  cursor: default;
}
.blok-info .serie .miniblok .titel {
  max-height: 20px;
  max-width: 74px;
  overflow: hidden;
}
.blok-info .top-info {
  position: relative;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  column-gap: 30px;
  min-height: 200px;
}
@media only screen and (max-width: 767.99px) {
  .blok-info .top-info {
    display: block;
  }
}
.blok-info .top-info aside.blok-image {
  display: inline-block;
  width: 300px;
  height: 200px;
  border-radius: 5px;
  box-shadow: 3px 3px 16px 0px #888;
}
@media only screen and (max-width: 767.99px) {
  .blok-info .top-info aside.blok-image {
    display: flex;
    margin: 0 auto;
    margin-bottom: 26px;
  }
}
.blok-info .top-info aside.blok-image.hover:hover {
  filter: brightness(90%);
  cursor: pointer;
}
.blok-info .top-info main.tekstblok {
  position: relative;
  display: inline-block;
}
@media only screen and (max-width: 767.99px) {
  .blok-info .top-info main.tekstblok {
    display: block;
  }
}
.blok-info .top-info main.tekstblok .button.rechts-boven {
  float: right;
  font-size: 17px;
  --height: 34px;
  color: var(--theme-link-color);
}
.blok-info .top-info main.tekstblok .popup-default.blok-acties {
  width: 320px;
  right: 0;
}
.blok-info .top-info main.tekstblok .popup-default.blok-acties header h1 {
  font-size: 18px;
  font-weight: normal;
  line-height: 60px;
}
.blok-info .top-info main.tekstblok .popup-default.blok-acties > main {
  margin: 0;
}
.blok-info .top-info main.tekstblok .popup-default.blok-acties > main section {
  padding: 0 20px;
  border-top: 1px solid var(--theme-grey-line-color);
}
.blok-info .top-info main.tekstblok .popup-default.blok-acties > main section.regel {
  line-height: 40px;
}
.blok-info .top-info main.tekstblok .popup-default.blok-acties > main section.regel span.status {
  display: inline-block;
  width: 120px;
}
.blok-info .top-info main.tekstblok .popup-default.blok-acties > main section.regel span.count {
  display: inline-block;
  width: 20px;
  text-align: right;
}
.blok-info .top-info main.tekstblok .popup-default.blok-acties > main section.regel span.buttons {
  display: inline-block;
  width: 130px;
  text-align: right;
}
.blok-info .top-info main.tekstblok .popup-default.blok-acties > main section.regel span.buttons a.brede-link {
  display: inline-block;
  margin-right: 20px;
}
.blok-info .top-info main.tekstblok .popup-default.blok-acties > main section.regel.multi-regel {
  padding: 10px 20px;
  line-height: 1.6em;
  text-align: right;
}
.blok-info .top-info main.tekstblok .popup-default.blok-acties > main section.regel.een-regel {
  text-align: right;
}
.blok-info .top-info main.tekstblok .popup-default.blok-acties > main section.regel.een-regel a.brede-link {
  display: inline-block;
  margin-right: 20px;
}
.blok-info .top-info main.tekstblok .popup-default.blok-acties > main section.multi {
  padding: 20px;
  min-height: 45px;
}
.blok-info .top-info main.tekstblok .popup-default.blok-acties > main section.multi > h2 {
  line-height: 25px;
  font-size: 16px;
  font-weight: normal;
}
.blok-info .top-info main.tekstblok .popup-default.blok-acties > main section.multi .buttons {
  text-align: right;
}
.blok-info .top-info main.tekstblok .popup-default.blok-acties > main section.multi .number {
  width: 50px;
}
.blok-info .top-info main.tekstblok > h1 {
  line-height: 40px;
  margin: 0;
  font-size: 24px;
  font-weight: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media only screen and (max-width: 767.99px) {
  .blok-info .top-info main.tekstblok > h1 {
    text-align: center;
    padding-left: 34px;
  }
}
.blok-info .top-info main.tekstblok > h1 > input {
  flex: 1;
  line-height: inherit;
  font-size: inherit;
  color: inherit;
  margin-bottom: 10px;
}
.blok-info .top-info main.tekstblok > h2 {
  line-height: 25px;
  margin: 0;
  font-size: 16px;
  color: var(--theme-grey-fg-color);
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
@media only screen and (max-width: 767.99px) {
  .blok-info .top-info main.tekstblok > h2 {
    text-align: center;
  }
}
.blok-info .top-info main.tekstblok > h2 > input {
  flex: 1;
  line-height: inherit;
  font-size: inherit;
  color: inherit;
  margin-bottom: 10px;
}
.blok-info .top-info main.tekstblok > h3 {
  display: flex;
  font-weight: bold;
  font-size: 13px;
  line-height: 20px;
  margin: 0;
}
@media only screen and (max-width: 767.99px) {
  .blok-info .top-info main.tekstblok > h3 {
    justify-content: space-around;
  }
}
.blok-info .top-info main.tekstblok .blok-leerdoelen {
  max-height: 40px;
  padding: 0;
  margin: 20px 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 21px;
}
.blok-info .top-info main.tekstblok .blok-leerdoelen > ul {
  list-style-type: disc;
  padding-inline-start: 20px;
}
.blok-info .top-info main.tekstblok .blok-leerdoelen > ul li > p {
  margin: 0;
}
.blok-info .top-info main.tekstblok footer {
  position: absolute;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 10fr;
}
@media only screen and (max-width: 767.99px) {
  .blok-info .top-info main.tekstblok footer {
    position: unset;
    text-align: center;
  }
}
.blok-info .top-info main.tekstblok footer .button:not(.button-rounded) {
  --height: 40px;
  padding: 0 20px;
}
.blok-info .top-info main.tekstblok footer .button.button-rounded {
  --selected-bg-color: #ff3b2f;
  --selected-fg-color: white;
}
.blok-info .top-info main.tekstblok footer .label-knop-container {
  text-align: right;
  font-size: 18px;
  justify-self: end;
}
.blok-info .top-info main.tekstblok footer .label-knop-container .label-knop {
  min-width: 32px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 16px;
  background-color: var(--theme-accent-bg-color);
}
.blok-info .top-info main.tekstblok footer .label-knop-container .label-knop:hover {
  cursor: pointer;
  background-color: var(--theme-accent2-bg-color);
}

.blok-image {
  position: relative;
  width: 100%;
  aspect-ratio: 273/180;
  background-size: cover;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.blok-image.in_overzicht {
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 0;
}
.blok-image.in_overzicht:hover .blok-top-balk {
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}
.blok-image.in_overzicht:hover .blok-top-balk .blok-right .hide {
  display: inline-block;
}
.blok-image.in_overzicht:hover .blok-top-balk .active {
  background-color: rgba(255, 255, 255, 0.8);
  color: var(--theme-fg-color);
}
.blok-image > img {
  width: 22px;
  height: 22px;
}
.blok-image .blok-top-balk {
  display: flex;
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 10px;
  cursor: default;
}
.blok-image .blok-top-balk .blok-left {
  height: 30px;
}
.blok-image .blok-top-balk .blok-left img {
  width: 30px;
  height: 30px;
}
.blok-image .blok-top-balk .blok-right {
  display: flex;
  height: 30px;
  margin-left: auto;
}
.blok-image .blok-info-float {
  min-width: 22px;
  height: 22px;
  line-height: 22px;
  margin: 0 0 0 5px;
  padding: 0px 5px 0 6px;
  border-radius: 11px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 14px;
}
.blok-image .blok-info-float.blok-info-float-status {
  font-size: 12px;
  line-height: 22px;
}
.blok-image .blok-info-float.top-balk-knop {
  width: 22px;
  height: 22px;
  border-radius: 100%;
  padding: 0;
  margin: 0;
  text-align: center;
  cursor: pointer;
}
.blok-image .blok-info-float.top-balk-knop:hover {
  background-color: white;
  color: blue;
}
.blok-image .blok-info-float.knop-rond {
  width: 22px;
  border-radius: 11px;
  padding: 0;
  text-align: center;
  line-height: 22px;
  margin-left: 5px;
}
.blok-image .blok-info-float.active:hover {
  background-color: white;
  color: var(--theme-fg-color);
  cursor: pointer;
}
.blok-image .blok-info-float.hide {
  display: none;
}
.blok-image .blok-info-float.alleen-bolletje {
  padding: 0 3px 0 6px;
}
.blok-image .blok-info-float > .pepicon3 {
  font-style: normal;
}
.blok-image .blok-info-float > span {
  display: inline-block;
}
.blok-image .blok-info-float > span .status-bolletje {
  display: inline-block;
  margin-right: 3px;
  vertical-align: text-bottom;
}

.blok-info-float.blok-info-float-series > span {
  font-size: 12px;
}

.bijlagenbox .bijlagen {
  margin-bottom: 10px;
}

.ahbestand.aanhangsel,
.bijlage {
  display: block;
  margin: 0;
  padding: 1px;
  font-size: inherit;
  cursor: pointer;
}
.ahbestand.aanhangsel.type-opdracht,
.bijlage.type-opdracht {
  width: 60px;
  height: 60px;
  margin: 10px 0;
}
.ahbestand.aanhangsel .bijlage-image-blok,
.bijlage .bijlage-image-blok {
  display: block;
  position: relative;
  aspect-ratio: 1;
  border-radius: 3px;
  background-color: var(--theme-accent-bg-color);
}
.ahbestand.aanhangsel .bijlage-image-blok:hover,
.bijlage .bijlage-image-blok:hover {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
}
.ahbestand.aanhangsel .bijlage-image-blok img,
.bijlage .bijlage-image-blok img {
  width: 100%;
  max-height: unset;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 3px;
}
.ahbestand.aanhangsel .bijlage-titel-blok,
.bijlage .bijlage-titel-blok {
  display: block;
  width: inherit;
  height: 42px;
  line-height: 17px;
  margin: 3px 0 0 0;
  padding: 5px 0px;
  border-radius: 2px;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 13px;
}
.ahbestand.aanhangsel .bijlage-titel-blok .bijlage-titel,
.bijlage .bijlage-titel-blok .bijlage-titel {
  white-space: normal;
  overflow: clip;
}
.ahbestand.aanhangsel.werklog-bijlage, .ahbestand.aanhangsel.memorie-bijlage, .ahbestand.aanhangsel.type-opdracht, .ahbestand.aanhangsel.type-pop, .ahbestand.aanhangsel.type-uitwerking,
.bijlage.werklog-bijlage,
.bijlage.memorie-bijlage,
.bijlage.type-opdracht,
.bijlage.type-pop,
.bijlage.type-uitwerking {
  width: 100%;
  padding: 0;
  margin-top: 10px;
}
.ahbestand.aanhangsel.werklog-bijlage:hover img, .ahbestand.aanhangsel.memorie-bijlage:hover img, .ahbestand.aanhangsel.type-opdracht:hover img, .ahbestand.aanhangsel.type-pop:hover img, .ahbestand.aanhangsel.type-uitwerking:hover img,
.bijlage.werklog-bijlage:hover img,
.bijlage.memorie-bijlage:hover img,
.bijlage.type-opdracht:hover img,
.bijlage.type-pop:hover img,
.bijlage.type-uitwerking:hover img {
  filter: brightness(95%);
}
.ahbestand.aanhangsel.werklog-bijlage:hover .bijlage-titel-blok, .ahbestand.aanhangsel.memorie-bijlage:hover .bijlage-titel-blok, .ahbestand.aanhangsel.type-opdracht:hover .bijlage-titel-blok, .ahbestand.aanhangsel.type-pop:hover .bijlage-titel-blok, .ahbestand.aanhangsel.type-uitwerking:hover .bijlage-titel-blok,
.bijlage.werklog-bijlage:hover .bijlage-titel-blok,
.bijlage.memorie-bijlage:hover .bijlage-titel-blok,
.bijlage.type-opdracht:hover .bijlage-titel-blok,
.bijlage.type-pop:hover .bijlage-titel-blok,
.bijlage.type-uitwerking:hover .bijlage-titel-blok {
  filter: brightness(95%);
}
.ahbestand.aanhangsel.werklog-bijlage:hover .bijlage-titel-blok .bijlage-titel-edit textarea, .ahbestand.aanhangsel.memorie-bijlage:hover .bijlage-titel-blok .bijlage-titel-edit textarea, .ahbestand.aanhangsel.type-opdracht:hover .bijlage-titel-blok .bijlage-titel-edit textarea, .ahbestand.aanhangsel.type-pop:hover .bijlage-titel-blok .bijlage-titel-edit textarea, .ahbestand.aanhangsel.type-uitwerking:hover .bijlage-titel-blok .bijlage-titel-edit textarea,
.bijlage.werklog-bijlage:hover .bijlage-titel-blok .bijlage-titel-edit textarea,
.bijlage.memorie-bijlage:hover .bijlage-titel-blok .bijlage-titel-edit textarea,
.bijlage.type-opdracht:hover .bijlage-titel-blok .bijlage-titel-edit textarea,
.bijlage.type-pop:hover .bijlage-titel-blok .bijlage-titel-edit textarea,
.bijlage.type-uitwerking:hover .bijlage-titel-blok .bijlage-titel-edit textarea {
  filter: blur(0px);
}
.ahbestand.aanhangsel.werklog-bijlage .bijlage-blok, .ahbestand.aanhangsel.memorie-bijlage .bijlage-blok, .ahbestand.aanhangsel.type-opdracht .bijlage-blok, .ahbestand.aanhangsel.type-pop .bijlage-blok, .ahbestand.aanhangsel.type-uitwerking .bijlage-blok,
.bijlage.werklog-bijlage .bijlage-blok,
.bijlage.memorie-bijlage .bijlage-blok,
.bijlage.type-opdracht .bijlage-blok,
.bijlage.type-pop .bijlage-blok,
.bijlage.type-uitwerking .bijlage-blok {
  display: flex;
}
.ahbestand.aanhangsel.werklog-bijlage .bijlage-blok .bijlage-image-blok, .ahbestand.aanhangsel.memorie-bijlage .bijlage-blok .bijlage-image-blok, .ahbestand.aanhangsel.type-opdracht .bijlage-blok .bijlage-image-blok, .ahbestand.aanhangsel.type-pop .bijlage-blok .bijlage-image-blok, .ahbestand.aanhangsel.type-uitwerking .bijlage-blok .bijlage-image-blok,
.bijlage.werklog-bijlage .bijlage-blok .bijlage-image-blok,
.bijlage.memorie-bijlage .bijlage-blok .bijlage-image-blok,
.bijlage.type-opdracht .bijlage-blok .bijlage-image-blok,
.bijlage.type-pop .bijlage-blok .bijlage-image-blok,
.bijlage.type-uitwerking .bijlage-blok .bijlage-image-blok {
  display: inline-block;
  width: 60px;
  background-color: transparent;
  padding: 0 0px 0 0;
  margin-right: 5px;
  height: 60px;
}
.ahbestand.aanhangsel.werklog-bijlage .bijlage-blok .bijlage-image-blok img, .ahbestand.aanhangsel.memorie-bijlage .bijlage-blok .bijlage-image-blok img, .ahbestand.aanhangsel.type-opdracht .bijlage-blok .bijlage-image-blok img, .ahbestand.aanhangsel.type-pop .bijlage-blok .bijlage-image-blok img, .ahbestand.aanhangsel.type-uitwerking .bijlage-blok .bijlage-image-blok img,
.bijlage.werklog-bijlage .bijlage-blok .bijlage-image-blok img,
.bijlage.memorie-bijlage .bijlage-blok .bijlage-image-blok img,
.bijlage.type-opdracht .bijlage-blok .bijlage-image-blok img,
.bijlage.type-pop .bijlage-blok .bijlage-image-blok img,
.bijlage.type-uitwerking .bijlage-blok .bijlage-image-blok img {
  width: 60px;
  height: 60px;
  object-fit: cover;
}
.ahbestand.aanhangsel.werklog-bijlage .bijlage-blok .bijlage-image-blok:hover, .ahbestand.aanhangsel.memorie-bijlage .bijlage-blok .bijlage-image-blok:hover, .ahbestand.aanhangsel.type-opdracht .bijlage-blok .bijlage-image-blok:hover, .ahbestand.aanhangsel.type-pop .bijlage-blok .bijlage-image-blok:hover, .ahbestand.aanhangsel.type-uitwerking .bijlage-blok .bijlage-image-blok:hover,
.bijlage.werklog-bijlage .bijlage-blok .bijlage-image-blok:hover,
.bijlage.memorie-bijlage .bijlage-blok .bijlage-image-blok:hover,
.bijlage.type-opdracht .bijlage-blok .bijlage-image-blok:hover,
.bijlage.type-pop .bijlage-blok .bijlage-image-blok:hover,
.bijlage.type-uitwerking .bijlage-blok .bijlage-image-blok:hover {
  filter: none;
}
.ahbestand.aanhangsel.werklog-bijlage .bijlage-blok .bijlage-titel-blok, .ahbestand.aanhangsel.memorie-bijlage .bijlage-blok .bijlage-titel-blok, .ahbestand.aanhangsel.type-opdracht .bijlage-blok .bijlage-titel-blok, .ahbestand.aanhangsel.type-pop .bijlage-blok .bijlage-titel-blok, .ahbestand.aanhangsel.type-uitwerking .bijlage-blok .bijlage-titel-blok,
.bijlage.werklog-bijlage .bijlage-blok .bijlage-titel-blok,
.bijlage.memorie-bijlage .bijlage-blok .bijlage-titel-blok,
.bijlage.type-opdracht .bijlage-blok .bijlage-titel-blok,
.bijlage.type-pop .bijlage-blok .bijlage-titel-blok,
.bijlage.type-uitwerking .bijlage-blok .bijlage-titel-blok {
  background-color: var(--theme-accent-bg-color);
  margin: 0;
  line-height: 60px;
  padding: 0 10px;
  height: 60px;
  flex: 1;
  font-size: 14px;
  color: var(--theme-fg-color);
  display: flex;
}
.ahbestand.aanhangsel.werklog-bijlage .bijlage-blok .bijlage-titel-blok .bijlage-titel,
.ahbestand.aanhangsel.werklog-bijlage .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit, .ahbestand.aanhangsel.memorie-bijlage .bijlage-blok .bijlage-titel-blok .bijlage-titel,
.ahbestand.aanhangsel.memorie-bijlage .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit, .ahbestand.aanhangsel.type-opdracht .bijlage-blok .bijlage-titel-blok .bijlage-titel,
.ahbestand.aanhangsel.type-opdracht .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit, .ahbestand.aanhangsel.type-pop .bijlage-blok .bijlage-titel-blok .bijlage-titel,
.ahbestand.aanhangsel.type-pop .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit, .ahbestand.aanhangsel.type-uitwerking .bijlage-blok .bijlage-titel-blok .bijlage-titel,
.ahbestand.aanhangsel.type-uitwerking .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit,
.bijlage.werklog-bijlage .bijlage-blok .bijlage-titel-blok .bijlage-titel,
.bijlage.werklog-bijlage .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit,
.bijlage.memorie-bijlage .bijlage-blok .bijlage-titel-blok .bijlage-titel,
.bijlage.memorie-bijlage .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit,
.bijlage.type-opdracht .bijlage-blok .bijlage-titel-blok .bijlage-titel,
.bijlage.type-opdracht .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit,
.bijlage.type-pop .bijlage-blok .bijlage-titel-blok .bijlage-titel,
.bijlage.type-pop .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit,
.bijlage.type-uitwerking .bijlage-blok .bijlage-titel-blok .bijlage-titel,
.bijlage.type-uitwerking .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit {
  flex: 1;
}
.ahbestand.aanhangsel.werklog-bijlage .bijlage-blok .bijlage-titel-blok .bijlage-titel textarea,
.ahbestand.aanhangsel.werklog-bijlage .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit textarea, .ahbestand.aanhangsel.memorie-bijlage .bijlage-blok .bijlage-titel-blok .bijlage-titel textarea,
.ahbestand.aanhangsel.memorie-bijlage .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit textarea, .ahbestand.aanhangsel.type-opdracht .bijlage-blok .bijlage-titel-blok .bijlage-titel textarea,
.ahbestand.aanhangsel.type-opdracht .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit textarea, .ahbestand.aanhangsel.type-pop .bijlage-blok .bijlage-titel-blok .bijlage-titel textarea,
.ahbestand.aanhangsel.type-pop .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit textarea, .ahbestand.aanhangsel.type-uitwerking .bijlage-blok .bijlage-titel-blok .bijlage-titel textarea,
.ahbestand.aanhangsel.type-uitwerking .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit textarea,
.bijlage.werklog-bijlage .bijlage-blok .bijlage-titel-blok .bijlage-titel textarea,
.bijlage.werklog-bijlage .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit textarea,
.bijlage.memorie-bijlage .bijlage-blok .bijlage-titel-blok .bijlage-titel textarea,
.bijlage.memorie-bijlage .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit textarea,
.bijlage.type-opdracht .bijlage-blok .bijlage-titel-blok .bijlage-titel textarea,
.bijlage.type-opdracht .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit textarea,
.bijlage.type-pop .bijlage-blok .bijlage-titel-blok .bijlage-titel textarea,
.bijlage.type-pop .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit textarea,
.bijlage.type-uitwerking .bijlage-blok .bijlage-titel-blok .bijlage-titel textarea,
.bijlage.type-uitwerking .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit textarea {
  width: 100%;
  height: 2em;
  padding-top: 5px;
  margin-top: 18px;
}
.ahbestand.aanhangsel.werklog-bijlage .bijlage-blok .bijlage-titel-blok .bijlage-titel input,
.ahbestand.aanhangsel.werklog-bijlage .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit input, .ahbestand.aanhangsel.memorie-bijlage .bijlage-blok .bijlage-titel-blok .bijlage-titel input,
.ahbestand.aanhangsel.memorie-bijlage .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit input, .ahbestand.aanhangsel.type-opdracht .bijlage-blok .bijlage-titel-blok .bijlage-titel input,
.ahbestand.aanhangsel.type-opdracht .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit input, .ahbestand.aanhangsel.type-pop .bijlage-blok .bijlage-titel-blok .bijlage-titel input,
.ahbestand.aanhangsel.type-pop .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit input, .ahbestand.aanhangsel.type-uitwerking .bijlage-blok .bijlage-titel-blok .bijlage-titel input,
.ahbestand.aanhangsel.type-uitwerking .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit input,
.bijlage.werklog-bijlage .bijlage-blok .bijlage-titel-blok .bijlage-titel input,
.bijlage.werklog-bijlage .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit input,
.bijlage.memorie-bijlage .bijlage-blok .bijlage-titel-blok .bijlage-titel input,
.bijlage.memorie-bijlage .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit input,
.bijlage.type-opdracht .bijlage-blok .bijlage-titel-blok .bijlage-titel input,
.bijlage.type-opdracht .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit input,
.bijlage.type-pop .bijlage-blok .bijlage-titel-blok .bijlage-titel input,
.bijlage.type-pop .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit input,
.bijlage.type-uitwerking .bijlage-blok .bijlage-titel-blok .bijlage-titel input,
.bijlage.type-uitwerking .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit input {
  width: 100%;
}
.ahbestand.aanhangsel.werklog-bijlage .bijlage-blok .bijlage-titel-blok .text, .ahbestand.aanhangsel.memorie-bijlage .bijlage-blok .bijlage-titel-blok .text, .ahbestand.aanhangsel.type-opdracht .bijlage-blok .bijlage-titel-blok .text, .ahbestand.aanhangsel.type-pop .bijlage-blok .bijlage-titel-blok .text, .ahbestand.aanhangsel.type-uitwerking .bijlage-blok .bijlage-titel-blok .text,
.bijlage.werklog-bijlage .bijlage-blok .bijlage-titel-blok .text,
.bijlage.memorie-bijlage .bijlage-blok .bijlage-titel-blok .text,
.bijlage.type-opdracht .bijlage-blok .bijlage-titel-blok .text,
.bijlage.type-pop .bijlage-blok .bijlage-titel-blok .text,
.bijlage.type-uitwerking .bijlage-blok .bijlage-titel-blok .text {
  flex: 1;
  font-variant: small-caps;
  font-size: 16px;
  display: inline-block;
  margin-left: 10px;
}
.ahbestand.aanhangsel.werklog-bijlage .bijlage-blok .bijlage-titel-blok .buttons, .ahbestand.aanhangsel.memorie-bijlage .bijlage-blok .bijlage-titel-blok .buttons, .ahbestand.aanhangsel.type-opdracht .bijlage-blok .bijlage-titel-blok .buttons, .ahbestand.aanhangsel.type-pop .bijlage-blok .bijlage-titel-blok .buttons, .ahbestand.aanhangsel.type-uitwerking .bijlage-blok .bijlage-titel-blok .buttons,
.bijlage.werklog-bijlage .bijlage-blok .bijlage-titel-blok .buttons,
.bijlage.memorie-bijlage .bijlage-blok .bijlage-titel-blok .buttons,
.bijlage.type-opdracht .bijlage-blok .bijlage-titel-blok .buttons,
.bijlage.type-pop .bijlage-blok .bijlage-titel-blok .buttons,
.bijlage.type-uitwerking .bijlage-blok .bijlage-titel-blok .buttons {
  width: 90px;
  padding-right: 10px;
  text-align: right;
  background-color: transparent;
}
.ahbestand.aanhangsel.werklog-bijlage .bijlage-blok .bijlage-titel-blok .buttons .button, .ahbestand.aanhangsel.memorie-bijlage .bijlage-blok .bijlage-titel-blok .buttons .button, .ahbestand.aanhangsel.type-opdracht .bijlage-blok .bijlage-titel-blok .buttons .button, .ahbestand.aanhangsel.type-pop .bijlage-blok .bijlage-titel-blok .buttons .button, .ahbestand.aanhangsel.type-uitwerking .bijlage-blok .bijlage-titel-blok .buttons .button,
.bijlage.werklog-bijlage .bijlage-blok .bijlage-titel-blok .buttons .button,
.bijlage.memorie-bijlage .bijlage-blok .bijlage-titel-blok .buttons .button,
.bijlage.type-opdracht .bijlage-blok .bijlage-titel-blok .buttons .button,
.bijlage.type-pop .bijlage-blok .bijlage-titel-blok .buttons .button,
.bijlage.type-uitwerking .bijlage-blok .bijlage-titel-blok .buttons .button {
  --height: 28px;
  --bg-color: white;
  --color: var(--theme-fg-color);
  --hover-bg-color: var(--theme-link-color);
  --hover-fg-color: white;
  margin-left: 5px;
}
.ahbestand.aanhangsel.werklog-bijlage,
.bijlage.werklog-bijlage {
  position: relative;
  margin-top: 10px;
}
.ahbestand.aanhangsel.werklog-bijlage .verwijder,
.bijlage.werklog-bijlage .verwijder {
  position: absolute;
  top: 0;
  right: 1em;
  line-height: 60px;
  font-size: 16px;
}
.ahbestand.aanhangsel.werklog-bijlage img,
.bijlage.werklog-bijlage img {
  display: block;
}
.ahbestand.aanhangsel.werklog-bijlage iframe, .ahbestand.aanhangsel.werklog-bijlage video,
.bijlage.werklog-bijlage iframe,
.bijlage.werklog-bijlage video {
  max-width: 100%;
}
.ahbestand.aanhangsel.werklog-bijlage iframe.youtube-player,
.bijlage.werklog-bijlage iframe.youtube-player {
  height: 360px;
}

.opdracht-bijlagen > .bijlagen-toevoegregel,
.uitwerking-bijlagen > .bijlagen-toevoegregel {
  line-height: 60px;
}

.bijlagen-grid.type-leertaak {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 6px;
  margin-top: 10px;
}
.bijlagen-grid.type-leertaak .bijlage-blok .bijlage-titel-blok {
  height: 60px;
}
.bijlagen-grid.type-leertaak .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit {
  display: inline-block;
}
.bijlagen-grid.type-leertaak .bijlage-blok .bijlage-titel-blok .bijlage-titel-edit textarea {
  width: 132px;
  height: 50px;
}

.popup-pepupload {
  position: static;
  display: inline-block;
  line-height: 50px;
  padding: 0 20px;
}

.popup-activiteit {
  position: fixed;
  top: 70px;
  left: calc(50vw + var(--content-width, 25vw) * 0.5 - 455px);
  z-index: 1;
  width: 455px;
  max-width: 100vw;
  max-height: calc(100vh - 60px - 10px - 20px);
  overflow-y: auto;
  padding: 15px 12px 12px 12px;
  border: 1px solid var(--theme-border-color);
  border-radius: 5px;
  text-align: left;
  font-size: 13px;
  background-color: var(--theme-accent3-bg-color);
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
@media only screen and (max-width: 767.99px) {
  .popup-activiteit {
    top: 0;
    bottom: 0;
    max-height: 100vh;
    border-radius: 0;
    -webkit-overflow-scrolling: touch;
  }
}
@media only screen and (max-width: 575.99px) {
  .popup-activiteit {
    left: unset;
    right: 0;
  }
}
.popup-activiteit > .titlebar {
  display: flex;
  gap: 5px;
  align-items: center;
  height: 40px;
  line-height: 40px;
  font-size: 24px;
}
.popup-activiteit > .titlebar div.titelveld {
  flex: 1;
  white-space: nowrap;
  display: inline-block;
  overflow: hidden;
  height: 40px;
  padding: 0 10px;
  line-height: 40px;
}
.popup-activiteit > .titlebar div.titelveld.prioriteit {
  color: #d0021a !important;
}
.popup-activiteit > .titlebar div.titelveld span {
  display: inline-block;
  font-weight: bold;
}
.popup-activiteit > .titlebar div.titelveld div.projectfoto {
  display: inline-block;
  line-height: 30px;
}
.popup-activiteit > .titlebar div.titelveld .titel-edit {
  padding: 0 3px;
  font-weight: bold;
}
.popup-activiteit > .titlebar div.titelveld img.mini-foto {
  width: 18px;
  height: 18px;
  border-radius: 100%;
  display: inline-block;
  margin: -5px 0 0 5px;
  margin-top: -3px;
}
.popup-activiteit > .titlebar div.statusveld {
  display: block;
  width: 60px;
  height: inherit;
  font-weight: bold;
  overflow: hidden;
  text-align: right;
  font-size: 14px;
}
.popup-activiteit > .titlebar div.statusveld .status-bolletje {
  width: 16px;
  line-height: 13px;
  height: 16px;
}
.popup-activiteit > .titlebar .menuveld {
  position: relative;
  display: block;
  width: 20px;
  height: inherit;
  text-align: center;
  font-size: 20px;
}
.popup-activiteit > .titlebar .menuveld > i {
  width: 100%;
}
.popup-activiteit > .titlebar .menuveld > .popup-menu {
  right: 0;
}
.popup-activiteit > .iconbar {
  display: flex;
  gap: 10px;
  height: 40px;
  line-height: 40px;
  align-items: center;
  padding-left: 8px;
  padding-right: 3px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 20px;
}
.popup-activiteit > .iconbar > span, .popup-activiteit > .iconbar div {
  color: var(--theme-dimmed-fg-color);
  margin-right: 20px;
}
.popup-activiteit > .iconbar > span.active, .popup-activiteit > .iconbar div.active {
  color: var(--theme-fg-color);
}
.popup-activiteit > .iconbar .vakimg img {
  width: 16px;
  height: 16px;
}
.popup-activiteit > .iconbar a {
  display: inline-block;
  width: 130px;
  height: 30px;
  line-height: 30px;
  margin-left: auto;
  padding: 0 12px;
  border-radius: 15px;
  text-align: center;
  font-size: 13px;
  background-color: var(--theme-link-bg-color);
  color: var(--theme-link-fg-color);
}
.popup-activiteit > .iconbar a:hover {
  background-color: var(--theme-link-active-bg-color);
  color: var(--theme-link-active-fg-color);
}
.popup-activiteit > main {
  margin-top: 15px;
}
.popup-activiteit > main > .twee-koloms {
  width: 100%;
  display: grid;
  margin-bottom: 10px;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  font-size: 12px;
}
.popup-activiteit > main > .twee-koloms section {
  padding: 5px 10px;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.07);
  border-radius: 4px;
  border: none;
  height: 60px;
  background-color: white;
}
.popup-activiteit > main > .twee-koloms section.module .vakblok {
  width: 100%;
  height: 28px;
  border: 1px solid transparent;
  background-color: white;
  appearance: none;
  padding: 0 0px;
}
.popup-activiteit > main > .twee-koloms section.module .vakblok.editing:hover {
  border: 1px solid var(--theme-input-focused-border-color);
}
.popup-activiteit > main > .twee-koloms section.module .vakblok.editing:focus {
  border: 1px solid var(--theme-input-focused-border-color);
}
.popup-activiteit > main > .twee-koloms section.nakijken .afrond-regel {
  display: flex;
  justify-content: space-between;
}
.popup-activiteit > main > .twee-koloms section.nakijken .afrond-regel > span.toggle-archiveer > i {
  font-size: 20px;
  vertical-align: middle;
}
.popup-activiteit > main > .twee-koloms section.nakijken .afrond-regel > span.toggle-archiveer > span {
  line-height: inherit;
}
.popup-activiteit > main > .twee-koloms section.nakijken .pepicon3 {
  font-size: 18px;
}
.popup-activiteit > main > .twee-koloms section.nakijken .nakijkdocent {
  width: 190px;
  height: 28px;
  border: 1px solid transparent;
  background-color: white;
  appearance: none;
  padding: 0 0px;
}
.popup-activiteit > main > .twee-koloms section.nakijken .nakijkdocent.editing:hover {
  border: 1px solid var(--theme-input-focused-border-color);
}
.popup-activiteit > main > .twee-koloms section.nakijken .nakijkdocent.editing:focus {
  border: 1px solid var(--theme-input-focused-border-color);
}
.popup-activiteit > main > .twee-koloms section.nakijken .actie-button {
  display: block;
  float: right;
  border: none;
  text-align: right;
  background-color: transparent;
  color: var(--theme-link-color);
}
.popup-activiteit > main > .twee-koloms section.nakijken .actie-button:hover {
  background-color: transparent;
}
.popup-activiteit > main > .twee-koloms section.nakijken .actie-button > i {
  position: relative;
  left: -4px;
  top: 3px;
  font-size: 20px;
  color: var(--theme-link-color);
}
.popup-activiteit > main > .twee-koloms section.nakijken .actie-button:hover > i::before {
  content: "\f138";
}
.popup-activiteit > main > .twee-koloms section.inleveren input.pickdatum {
  width: 70px;
  margin-right: 5px;
}
.popup-activiteit > main > .twee-koloms section.inleveren input.picktijd {
  width: 40px;
  margin: 0px;
}
.popup-activiteit > main > .twee-koloms section.inleveren input.duur {
  width: 22px;
  text-align: right;
  padding: 0;
}
.popup-activiteit > main > .twee-koloms section.inleveren .laatst-gewijzigd {
  width: 120px;
  background-color: orange;
}
.popup-activiteit > main > .twee-koloms section.vink-link:hover {
  background-color: orange;
  cursor: pointer;
}
.popup-activiteit > main > .twee-koloms section.feedback {
  position: relative;
}
.popup-activiteit > main > .twee-koloms section.feedback .feedback-regel {
  display: flex;
}
.popup-activiteit > main > .twee-koloms section.feedback .feedback-regel .text {
  width: 110px;
  white-space: nowrap;
  overflow: hidden;
  height: 26px;
}
.popup-activiteit > main > .twee-koloms section.feedback .feedback-regel .vinkblok {
  flex: 1;
  text-align: right;
}
.popup-activiteit > main > .twee-koloms section.feedback .feedback-regel .vinkblok .on-hover {
  display: none;
}
.popup-activiteit > main > .twee-koloms section.feedback .feedback-regel .vinkblok .vink-link {
  text-align: center;
  color: var(--theme-link-color);
  border-radius: 10px;
  width: 70px;
  line-height: 20px;
  font-size: 13px;
}
.popup-activiteit > main > .twee-koloms section.feedback:hover {
  background-color: var(--theme-accent2-bg-color);
}
.popup-activiteit > main > .twee-koloms section.feedback:hover .vinkblok .off-hover {
  display: none;
}
.popup-activiteit > main > .twee-koloms section.feedback:hover .vinkblok .on-hover {
  cursor: pointer;
  background-color: white;
  display: inline-block;
}
.popup-activiteit > main > .twee-koloms section > div {
  height: 26px;
  line-height: 26px;
  font-size: 14px;
}
.popup-activiteit > main > .twee-koloms section > div.titel {
  text-transform: uppercase;
  font-size: 11px;
  height: 22px;
  line-height: 22px;
  color: var(--theme-light-fg-color);
}
.popup-activiteit > main > .twee-koloms section input, .popup-activiteit > main > .twee-koloms section textarea {
  font-size: 13px;
  border: 1px solid transparent;
  background-color: white;
  border-radius: 4px;
}
.popup-activiteit > main > .twee-koloms section input.vakblok, .popup-activiteit > main > .twee-koloms section textarea.vakblok {
  font-size: 14px;
}
.popup-activiteit > main > .twee-koloms section input.omschrijving, .popup-activiteit > main > .twee-koloms section textarea.omschrijving {
  background-color: white;
  min-width: 100%;
  height: 30px;
}
.popup-activiteit > main > .twee-koloms section input:hover, .popup-activiteit > main > .twee-koloms section textarea:hover {
  border: 1px solid var(--theme-input-focused-border-color);
}
.popup-activiteit > main > section {
  padding: 10px;
  margin-bottom: 10px;
  background-color: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  border: none;
  line-height: 1;
  font-size: 0;
}
.popup-activiteit > main > section > * {
  font-size: 13px;
}
.popup-activiteit > main > section .regel {
  border: none;
  border-radius: 4px;
}
.popup-activiteit > main > section .regel.bestand.in_activiteitspopup {
  height: 70px;
  line-height: 70px;
  padding: 10px;
  background-color: white;
}
.popup-activiteit > main > section span.lighter {
  margin: 0 5px 0 20px;
}
.popup-activiteit > main > section span.lighter:first-of-type {
  margin-left: 0;
}
.popup-activiteit > main > section h2 {
  font-size: 15px;
  font-weight: bold;
  margin: 0;
  display: inline-block;
  height: 24px;
  line-height: 30px;
}
.popup-activiteit > main > section.briefing {
  border-radius: 4px;
  background-color: white;
  min-height: 100px;
  overflow: auto;
  padding: 5px 10px 10px 10px;
}
.popup-activiteit > main > section.briefing h2 {
  margin-bottom: 4px;
}
.popup-activiteit > main > section.briefing div.omschrijving {
  padding: 0px;
  line-height: 21px;
  white-space: pre-wrap;
  color: var(--theme-fg-color);
}
.popup-activiteit > main > section.briefing div.omschrijving.opdracht {
  max-height: 200px;
  overflow-y: auto;
}
.popup-activiteit > main > section.stappenplan {
  padding: 0;
  font-size: 13px;
  border-radius: 4px;
  background-color: white;
}
.popup-activiteit > main > section.stappenplan.open h2 {
  height: 45px;
  line-height: 45px;
}
.popup-activiteit > main > section.stappenplan.open .stappen-grid {
  display: block;
}
.popup-activiteit > main > section.stappenplan h2 {
  display: flex;
  height: 60px;
  line-height: 60px;
  padding: 0 10px;
  color: var(--theme-fg-color);
}
.popup-activiteit > main > section.stappenplan h2 > span {
  flex: 1;
}
.popup-activiteit > main > section.stappenplan h2 > span:last-child {
  text-align: right;
}
.popup-activiteit > main > section.stappenplan h2 span.sigaar {
  display: inline-block;
  width: 60px;
  height: 20px;
  line-height: 20px;
  padding: 0 8px;
  border-radius: 10px;
  text-align: center;
  font-size: 12px;
  font-weight: normal;
  background-color: var(--theme-accent-bg-color);
  color: #999;
}
.popup-activiteit > main > section.stappenplan h2 span.sigaar.plannen {
  background-color: #ffe1e1;
  color: #e02020;
}
.popup-activiteit > main > section.stappenplan h2.dimmed {
  cursor: default;
  color: var(--theme-dimmed-fg-color);
}
.popup-activiteit > main > section.stappenplan h2.dimmed a {
  cursor: default;
  color: var(--theme-dimmed-fg-color);
}
.popup-activiteit > main > section.stappenplan .stappen-grid {
  display: none;
}
.popup-activiteit > main > section.stappenplan .stappen-grid .stap {
  display: grid;
  grid-template-columns: 24px 2fr 1fr;
  height: 40px;
  padding: 0 9px;
  align-content: center;
  justify-items: left;
  border-top: none;
  border-bottom: 1px solid var(--theme-alt-border-color);
}
.popup-activiteit > main > section.stappenplan .stappen-grid .stap:first-child {
  border-top: 1px solid var(--theme-alt-border-color);
}
.popup-activiteit > main > section.stappenplan .stappen-grid .stap:last-child {
  border-bottom: none;
}
.popup-activiteit > main > section.stappenplan .stappen-grid .stap.selected {
  border: 1px solid blue;
}
.popup-activiteit > main > section.stappenplan .stappen-grid .stap .stapgedaan {
  display: inline-block;
  align-self: center;
  margin-top: -3px;
}
.popup-activiteit > main > section.stappenplan .stappen-grid .stap .stapgedaan.ux-checkbox .fa-light {
  font-size: 18px;
  vertical-align: middle;
}
.popup-activiteit > main > section.stappenplan .stappen-grid .stap .stapgedaan.ux-checkbox[data-checked="1"] .fa-light {
  color: #3ba700;
}
.popup-activiteit > main > section.stappenplan .stappen-grid .stap .stapgedaan.ux-checkbox[data-checked="0"] .fa-light {
  color: #aaa;
}
.popup-activiteit > main > section.stappenplan .stappen-grid .stap .stapgedaan:not(.readonly):hover .fa-light {
  color: var(--theme-link-color);
}
.popup-activiteit > main > section.stappenplan .stappen-grid .stap input {
  border: 1px solid transparent;
  background-color: var(--theme-bg-color);
  color: var(--theme-fg-color);
}
.popup-activiteit > main > section.stappenplan .stappen-grid .stap input:focus {
  border: 1px solid var(--theme-input-focused-border-color);
}
.popup-activiteit > main > section.stappenplan .stappen-grid .stap input:not([readonly]):hover {
  border: solid 1px #99bfff;
}
.popup-activiteit > main > section.stappenplan .stappen-grid .stap input.stapactiviteit {
  width: 100%;
  margin-right: 4px;
}
.popup-activiteit > main > section.stappenplan .stappen-grid .stap .period-picker, .popup-activiteit > main > section.stappenplan .stappen-grid .stap .datetime-picker {
  margin-left: 4px;
}
.popup-activiteit > main > section.stappenplan .stappen-grid .stap .period-picker .inline-datepicker, .popup-activiteit > main > section.stappenplan .stappen-grid .stap .datetime-picker .inline-datepicker {
  right: 0;
  left: unset;
}
.popup-activiteit > main > section.stappenplan .stappen-grid .stap .period-picker .pepicon3, .popup-activiteit > main > section.stappenplan .stappen-grid .stap .datetime-picker .pepicon3 {
  font-size: 14px;
}
.popup-activiteit > main > section.stappenplan .stappen-grid .stap .period-picker input, .popup-activiteit > main > section.stappenplan .stappen-grid .stap .datetime-picker input {
  font-size: 12px;
}
.popup-activiteit > main > section.planner-item {
  padding: 0;
  font-size: 13px;
  display: flex;
  gap: 10px;
  flex-direction: column;
  background-color: transparent;
}
.popup-activiteit > main > section.planner-item.bestand {
  padding: 0;
}
.popup-activiteit > main > section.planner-item .plannerbestand {
  background-color: var(--theme-bg-color);
  width: 100%;
  height: 50px;
  padding: 0px;
  border-radius: 3px;
  display: flex;
}
.popup-activiteit > main > section.planner-item .plannerbestand .extensie {
  display: inline-block;
  width: 60px;
  height: 50px;
  line-height: 50px;
  background-color: #3e74e3;
  color: white;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  overflow: hidden;
  border-radius: 3px;
}
.popup-activiteit > main > section.planner-item .plannerbestand .doctitel {
  display: inline-block;
  flex: 1;
  margin-left: 5px;
  border-radius: 3px;
  background-color: #eff4ff;
  color: var(--theme-fg-color);
  float: right;
  font-size: 14px;
  font-weight: bold;
  padding-left: 10px;
  padding: 0;
  height: 50px;
  line-height: 50px;
}
.popup-activiteit > main > section.planner-item .plannerbestand .doctitel.in_activiteitspopup {
  background-color: white;
  color: var(--theme-fg-color);
}
.popup-activiteit > main > section.planner-item .plannerbestand .doctitel:hover {
  color: var(--theme-link-hover-color);
}
.popup-activiteit > main > section.planner-item .plannerbestand .doctitel.geen-link {
  padding-left: 10px;
  white-space: nowrap;
  overflow: hidden;
}
.popup-activiteit > main > section.planner-item .plannerbestand .doctitel.geen-link:hover {
  color: var(--theme-fg-color);
}
.popup-activiteit > main > section.planner-item .plannerbestand .doctitel .titel {
  display: block;
  height: 40px;
  margin-top: 0px;
  overflow: hidden;
}
.popup-activiteit > main > section.planner-item .plannerbestand .doctitel .titel a {
  line-height: 40px;
  color: var(--theme-fg-color);
}
.popup-activiteit > main > section.planner-item .plannerbestand .doctitel .titel a:hover {
  color: var(--theme-link-hover-color);
}
.popup-activiteit > main > section.planner-item .plannerbestand span.oog {
  display: none;
}
.popup-activiteit > main > section.planner-item .plannerbestand:hover a.plaatje {
  overflow: hidden;
}
.popup-activiteit > main > section.planner-item .plannerbestand:hover a.plaatje .oog {
  line-height: 80px;
  background-image: url(/gfx/algemeen/zwart50prc.png);
  filter: brightness(1);
}
.popup-activiteit > main > section.planner-item .plannerbestand:hover a.plaatje .oog.viewer {
  margin-top: -60px;
  width: 60px;
  float: left;
}
.popup-activiteit > main > section.planner-item .plannerbestand:hover span.oog {
  display: block;
  line-height: 66px;
  margin-top: -60px;
}
.popup-activiteit > main > section.planner-item .plannerbestand:hover span.oog i {
  font-size: 36px;
  color: white;
}
.popup-activiteit > main > section.planner-item img, .popup-activiteit > main > section.planner-item video, .popup-activiteit > main > section.planner-item iframe {
  width: 100%;
}
.popup-activiteit > main > section.planner-item .plannerlink {
  width: 100%;
  min-height: 40px;
  padding: 10px;
  border-radius: 4px;
  background-color: var(--theme-bg-color);
  overflow: hidden;
  white-space: normal;
  font-size: 15px;
  font-weight: bold;
  line-height: 50px;
  vertical-align: middle;
  color: var(--theme-fg-color);
}
.popup-activiteit > main > section.planner-item .plannerlink a {
  color: var(--theme-fg-color);
}
.popup-activiteit > main > section.planner-item .plannerlink a i.pepicon3 {
  display: inline-block;
  font-size: 26px;
  font-weight: bold;
  transform: translate(0%, 20%);
  color: var(--theme-link-color);
}
.popup-activiteit > main > section.planner-item .plannerlink.catalogus {
  height: 70px;
}
.popup-activiteit > main > section.planner-item .plannerlink .ogp-link {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;
  justify-content: left;
}
.popup-activiteit > main > section.planner-item .plannerlink .ogp-link:hover {
  opacity: 0.6;
}
.popup-activiteit > main > section.planner-item .plannerlink .ogp-link div.linkinfo {
  min-height: 40px;
  overflow: hidden;
  color: var(--theme-fg-color);
  padding-top: 3px;
}
.popup-activiteit > main > section.planner-item .plannerlink .ogp-link div.linkinfo h1 {
  font-size: 14px;
  font-weight: bold;
  line-height: 21px;
  margin: 0;
}
.popup-activiteit > main > section.planner-item .plannerlink .ogp-link div.linkinfo p {
  margin-top: 5px;
  font-size: 13px;
  font-weight: normal;
  overflow: hidden;
}
.popup-activiteit > main > section.planner-item .plannerlink .ogp-link div.image {
  text-align: center;
  overflow: hidden;
}
.popup-activiteit > main > section.planner-item .plannerlink .ogp-link div.image img {
  border-radius: 5px;
  border: 1px solid #ccc;
}
.popup-activiteit > main > section.leerdoelen > h2 {
  display: flex;
  justify-content: space-between;
}
.popup-activiteit > main > section.leerdoelen > h2 .progress-resultaat {
  flex: 0 0 50%;
}
.popup-activiteit > main > section.leerdoelen .leerdoel {
  display: flex;
  margin: 5px 0;
  min-height: 30px;
  line-height: 21px;
}
.popup-activiteit > main > section.leerdoelen .leerdoel .werkblad {
  flex: 1;
  min-height: 40px;
}
.popup-activiteit > main > section.leerdoelen .leerdoel .leerdoel-toggle {
  font-size: 20px;
  color: var(--theme-dimmed-fg-color);
}
.popup-activiteit > main > section.leerdoelen .leerdoel .leerdoel-toggle.editable {
  cursor: pointer;
}
.popup-activiteit > main > section.leerdoelen .leerdoel.checked {
  color: #3ba700;
}
.popup-activiteit > main > section.leerdoelen .leerdoel.checked > .werkblad {
  font-style: italic;
}
.popup-activiteit > main > section.leerdoelen .leerdoel.checked .leerdoel-toggle {
  --fa: "";
  color: inherit;
}
.popup-activiteit > main > section.talkpage {
  padding: 0;
}
.popup-activiteit > main > section.talkpage .talkpage-head {
  height: 40px;
  background-color: #fff8c5;
  line-height: 40px;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  padding: 0 10px;
}
.popup-activiteit > main > section.talkpage .talkpage-head a {
  font-size: 15px;
}
.popup-activiteit > main > section.talkpage .talkpage-head .popup-kies-talkpage-leerling {
  min-width: 200px;
}
.popup-activiteit > main > section.talkpage #talkpage-box.multi .uitwerking-talk {
  border-top: none;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
.popup-activiteit.docentagenda, .popup-activiteit.agenda, .popup-activiteit.uitwerking {
  min-height: unset;
}
.popup-activiteit section.open-activiteit {
  display: block;
  margin: 10px 10px 0 10px;
  padding: 0;
}
.popup-activiteit section.open-activiteit .message {
  text-align: center;
  padding: 10px 5px;
  font-style: italic;
}
.popup-activiteit input {
  height: 28px;
  line-height: 28px;
  border-radius: 4px !important;
  font-size: 13px;
}
.popup-activiteit .editing {
  display: inline-block;
  border: 1px solid var(--theme-border-color);
  border-radius: 4px;
  white-space: nowrap;
  background-color: var(--theme-bg-color);
  color: var(--theme-fg-color);
  cursor: text;
}
.popup-activiteit .editing.omschrijving {
  width: 100%;
  min-height: 115px;
  line-height: 21px;
  padding: 2px;
  white-space: normal;
}
.popup-activiteit .editing.omschrijving.hoger {
  min-height: 250px;
}
.popup-activiteit .editing:hover {
  border: 1px solid var(--theme-input-focused-border-color);
}
.popup-activiteit .editing:focus {
  border: 1px solid var(--theme-input-focused-border-color);
}
.popup-activiteit .wysiwyg.briefing .werkblad {
  height: 250px;
  border: 1px solid var(--theme-border-color);
  border-radius: 4px;
  background-color: white;
}
.popup-activiteit span.lighter {
  color: #999;
}
.popup-activiteit label {
  color: var(--theme-fg-color);
}

ul.select-talkpage-leerling li {
  padding: 0 10px;
  line-height: 40px;
  cursor: pointer;
}
ul.select-talkpage-leerling li.unseen {
  color: #d0021a;
  font-weight: bold;
}

.popup-indicator-historie {
  min-height: 200px;
}
.popup-indicator-historie h3 {
  margin-top: 0px;
  font-size: 13px;
  font-weight: normal;
  margin-left: 20px;
  margin-bottom: 0px;
}
.popup-indicator-historie p {
  margin: 20px;
  font-weight: normal;
}
.popup-indicator-historie .opmerkingen h2 {
  color: #54a3ff;
}
.popup-indicator-historie div.opmerking div.beoordelaar {
  font-weight: bold;
}
.popup-indicator-historie table.feedback_uitlezen {
  background-color: white;
}
.popup-indicator-historie table.feedback_uitlezen div.opmerkingen h2 {
  margin: 0;
}
.popup-indicator-historie .feedback_blok {
  margin: 20px;
}
.popup-indicator-historie .uitwerking_resultaat {
  clear: both;
  height: 25px;
}
.popup-indicator-historie .uitwerking_resultaat > div {
  float: left;
}
.popup-indicator-historie .uitwerking_resultaat > div.datum {
  font-weight: normal;
  float: left;
}
.popup-indicator-historie .uitwerking_resultaat div.titel {
  width: 210px;
  overflow: hidden;
  font-weight: normal;
  white-space: nowrap;
}
.popup-indicator-historie .uitwerking_resultaat div.indicator_oordeel {
  margin: 0 10px;
  width: 108px;
  height: 2px;
  position: relative;
  top: 8px;
  background-color: #ccc;
}
.popup-indicator-historie .uitwerking_resultaat div.indicator_oordeel div.bol {
  position: absolute;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background-color: orange;
}
.popup-indicator-historie .uitwerking_resultaat div.indicator_oordeel div.bol.bol1 {
  background-color: #54a3ff;
}
.popup-indicator-historie .uitwerking_resultaat div.indicator_oordeel div.bol.bol2 {
  background-color: #a1c600;
}
.popup-indicator-historie .uitwerking_resultaat div.indicator_oordeel div.bol.bol3 {
  background-color: #9b9b9b;
}
.popup-indicator-historie .uitwerking_resultaat > div.bar {
  border-bottom: 3px solid #dedede;
  margin: 0 10px;
  width: 200px;
}
.popup-indicator-historie .uitwerking_resultaat > div.bar > div.bar .bolruimte {
  /* .bar minus 1 bol */
  width: 180px;
  height: 100%;
}
.popup-indicator-historie a.bol_ass,
.popup-indicator-historie a.bol_uitw {
  top: 2px;
}

.popup-view-vaardigheden {
  right: 0;
  width: 360px;
  color: #777 !important;
}
.popup-view-vaardigheden > main {
  display: grid;
  gap: 20px;
  grid-template-columns: 60px 1fr;
}
.popup-view-vaardigheden > main h3 {
  font-size: 15px;
}
.popup-view-vaardigheden > main div.vaardigheid {
  max-width: 240px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  margin-top: 5px;
  font-size: 13px;
}
.popup-view-vaardigheden > main div.criteria {
  max-width: 240px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  font-style: italic;
}

.vaardigheden-select-popup {
  width: 700px;
  height: 600px;
  color: #777;
}
@media only screen and (max-width: 767.99px) {
  .vaardigheden-select-popup {
    width: 100%;
    left: 0;
    margin-top: -100px;
    margin-left: 0;
  }
}
.vaardigheden-select-popup header {
  height: 60px;
}
.vaardigheden-select-popup .scrollblok {
  overflow-y: auto;
  height: 538px;
}
.vaardigheden-select-popup label, .vaardigheden-select-popup span {
  -webkit-user-select: none;
  user-select: none;
}
.vaardigheden-select-popup .accordion {
  font-size: 14px;
  border-top: 1px solid var(--theme-border-color);
  color: #636363;
  white-space: nowrap;
  padding: 0 0 0 15px;
}
.vaardigheden-select-popup .accordion:hover .cat-titel {
  color: #4163af;
}
.vaardigheden-select-popup .accordion > .cat {
  margin: 10px 0;
  height: 80px;
  overflow-x: hidden;
  line-height: 25px;
  cursor: pointer;
}
.vaardigheden-select-popup .accordion > .cat img {
  width: 60px;
  height: 60px;
  float: left;
  margin-right: 20.5px;
  border-radius: 4px;
}
.vaardigheden-select-popup .accordion > .cat .klapinuit {
  display: inline-block;
  font-size: 0;
  max-width: calc(100% - 100px - 10px);
}
.vaardigheden-select-popup .accordion > .cat .klapinuit .pepcheckbox {
  width: 29.5px;
  display: inline-block;
  text-align: left;
}
.vaardigheden-select-popup .accordion > .cat .klapinuit .pepcheckbox i.fa {
  font-size: 14px;
  color: #003b87;
}
.vaardigheden-select-popup .accordion > .cat .klapinuit .pepcheckbox i.fa.gedeeltelijk {
  color: #7898bc;
}
.vaardigheden-select-popup .accordion > .cat .klapinuit .cat-titel {
  display: inline-block;
  font-weight: bold;
  font-size: 16px;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow-x: hidden;
  margin-bottom: -8px;
}
.vaardigheden-select-popup .accordion > .cat .klapinuit .aantal {
  margin-left: 29.5px;
  font-size: 14px;
}
.vaardigheden-select-popup .accordion > .cat .klapinuit .gekoppeld {
  margin-left: 29.5px;
  font-size: 14px;
}
.vaardigheden-select-popup .accordion > .cat .klapinuit .gekoppeld .nul {
  color: #999;
  display: none;
}
.vaardigheden-select-popup .accordion > .cat .klapinuit .gekoppeld .minstens-1 {
  color: #004697;
}
.vaardigheden-select-popup .accordion > .cat .klapinuit .gekoppeld.geen .nul {
  display: inline-block;
}
.vaardigheden-select-popup .accordion > .cat .klapinuit .gekoppeld.geen .minstens-1 {
  display: none;
}
.vaardigheden-select-popup .accordion > .cat .klapinuit::after {
  display: none;
  font-family: "Font Awesome 6 Pro";
  font-size: 10px;
  content: "\f078";
}
.vaardigheden-select-popup .accordion[catid=eigenvaardigheden] .cat .klapinuit .cat-titel {
  margin-left: 0;
}
.vaardigheden-select-popup .accordion[catid=eigenvaardigheden] .indicatoren label i.fa-user {
  width: 20px;
  display: inline-block;
}
.vaardigheden-select-popup .accordion > .indicatoren {
  display: none;
  overflow-x: hidden;
  overflow-y: hidden;
  margin-left: 80.5px;
}
.vaardigheden-select-popup .accordion > .indicatoren > .indicator {
  display: flex;
  height: 35px;
  line-height: 34px;
  border-top: 1px solid #eee;
  color: #636363;
  font-size: 13px;
}
.vaardigheden-select-popup .accordion > .indicatoren > .indicator > .cb-wrapper {
  width: 29.5px;
  display: inline-block;
  text-align: left;
}
.vaardigheden-select-popup .accordion > .indicatoren > .indicator > .cb-wrapper input {
  margin: 0;
  cursor: pointer;
}
.vaardigheden-select-popup .accordion > .indicatoren > .indicator > i.fa-user {
  margin-right: 0.4em;
}
.vaardigheden-select-popup .accordion > .indicatoren > .indicator > .indicator-naam {
  text-overflow: ellipsis;
  overflow-x: hidden;
}
.vaardigheden-select-popup .accordion > .indicatoren > .indicator > .indicator-naam + i {
  margin-left: auto;
}
.vaardigheden-select-popup .accordion > .indicatoren > .indicator .toggle-compsets {
  display: inline-block;
  width: 15px;
  margin-right: 20px;
  margin-left: 10px;
}
.vaardigheden-select-popup .accordion > .indicatoren > .indicator.toggle-on .toggle-compsets::before {
  content: "\f077";
}
.vaardigheden-select-popup .accordion > .indicatoren > .competentiesets {
  margin-left: 29.5px;
}
.vaardigheden-select-popup .accordion > .indicatoren > .competentiesets.always-hidden {
  display: none;
}
.vaardigheden-select-popup .accordion > .indicatoren > .competentiesets > .competentieset {
  display: block;
  position: relative;
  font-size: 12px;
  height: 30px;
  line-height: 30px;
}
.vaardigheden-select-popup .accordion > .indicatoren > .competentiesets > .competentieset input[type=radio] {
  vertical-align: top;
  margin-right: 0.5em;
  height: inherit;
  line-height: inherit;
}
.vaardigheden-select-popup .accordion > .indicatoren > .competentiesets > .competentieset .titel {
  display: inline-block;
  max-width: calc(100% - 55px);
  text-overflow: ellipsis;
  overflow-x: hidden;
  height: inherit;
  line-height: inherit;
}
.vaardigheden-select-popup .accordion > .indicatoren > .competentiesets > .competentieset i.fa-light {
  position: absolute;
  margin-left: 10px;
  font-size: 13px;
  display: none;
}
.vaardigheden-select-popup .accordion > .indicatoren > .competentiesets > .competentieset:hover i.fa-light {
  display: inline;
}
.vaardigheden-select-popup .accordion > .indicatoren > .indicator:not(.selected) + .competentiesets {
  opacity: 0.3;
}
.vaardigheden-select-popup .accordion.open {
  height: auto;
}
.vaardigheden-select-popup .accordion.open > .indicatoren {
  display: block;
}
.vaardigheden-select-popup .accordion.open .klapinuit::after {
  content: "\f077";
}
.vaardigheden-select-popup h4 {
  margin: 5px 15px;
  color: #777;
}
.vaardigheden-select-popup > label {
  padding-left: 10px;
  position: relative;
  background-color: transparent;
  display: block;
  padding-top: 2px;
  font-size: 12px;
  margin: 5px 5px 5px 47px;
  color: #555;
}
.vaardigheden-select-popup label {
  margin: 4px 0px;
}
.vaardigheden-select-popup label.ll-custom-ind {
  margin-bottom: 23px;
  display: inline-block;
}
.vaardigheden-select-popup label.ll-custom-ind input {
  width: 562px;
  height: 25px;
  margin: 4px 0px;
}
.vaardigheden-select-popup label.ll-custom-ind a i {
  font-size: 18px;
  padding-left: 5px;
  vertical-align: middle;
}
.vaardigheden-select-popup input.leerling_indicator {
  width: 300px;
}
.vaardigheden-select-popup .competenties {
  display: block;
  font-size: 70%;
  opacity: 0.5;
  font-weight: normal;
}

.kies-criteria-popup {
  width: 700px;
  height: 600px;
}
.kies-criteria-popup header {
  height: 60px;
}
.kies-criteria-popup main {
  height: 540px;
  overflow-y: auto;
}
.kies-criteria-popup main table.competenties {
  width: 100%;
  background-color: inherit;
  border-collapse: collapse;
  /* deze hier uit; staan wel aan in docent_rubrics
  margin-top: 20px;

  &::after { // margin-bottom en padding-bottom werken niet
  	content: " ";
  	display: block;
  	height: 40px;
  }
  */
}
.kies-criteria-popup main table.competenties th, .kies-criteria-popup main table.competenties td {
  border: 1px solid #e9e9e9;
}
.kies-criteria-popup main table.competenties tr td {
  padding: 10px;
}
.kies-criteria-popup main table.competenties tr td:first-child {
  border-left: none;
}
.kies-criteria-popup main table.competenties tr td:last-child {
  border-right: none;
}
.kies-criteria-popup main table.competenties tr td.col-grote-schaal {
  vertical-align: top;
  padding: 0px;
}
.kies-criteria-popup main table.competenties td.descriptor {
  display: none;
}
.kies-criteria-popup main table.competenties tr.indicator {
  min-height: 40px;
  color: #636363;
}
.kies-criteria-popup main table.competenties tr.indicator td.titel {
  padding-left: 20px;
  font-size: 14px;
}
.kies-criteria-popup main table.competenties tr.indicator td.titel .omschrijving {
  margin-top: 10px;
  font-size: 13px;
}
.kies-criteria-popup main table.competenties tr.indicator td.descriptor {
  vertical-align: top;
}
.kies-criteria-popup main table.competenties tr.competentie {
  color: var(--theme-light-fg-color);
}
.kies-criteria-popup main table.competenties tr.competentie td.col-cb {
  width: 40px;
}
.kies-criteria-popup main table.competenties tr.competentie td.titel {
  width: 440px;
  color: #636363;
  vertical-align: top;
}
.kies-criteria-popup main table.competenties tr.competentie td.titel .omschrijving {
  margin-top: 5px;
  padding-left: 15px;
  color: var(--theme-light-fg-color);
}
.kies-criteria-popup main table.competenties tr.competentie td.descriptor {
  vertical-align: top;
  color: var(--theme-light-fg-color);
}
.kies-criteria-popup main table.competenties tr.competentie.competentie-template {
  display: none;
}
.kies-criteria-popup main table.competenties tr.competentie-edit .comp-naam {
  width: 100%;
  padding: 5px;
}
.kies-criteria-popup main table.competenties tr.competentie-edit .comp-omschrijving {
  width: 100%;
  resize: vertical;
}
.kies-criteria-popup main table.competenties tr.competentie-edit td.titel .omschrijving {
  padding-left: 0;
}
.kies-criteria-popup main table.competenties tr.competentie-edit td.titel .buttons {
  text-align: right;
}
/*
 * The MIT License
 * Copyright (c) 2012 Matias Meno <m@tias.me>
 */
@-webkit-keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
  }
}
@-moz-keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
  }
}
@keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
  }
}
@-webkit-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@-moz-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
.dropzone, .dropzone * {
  box-sizing: border-box;
}

.dropzone {
  min-height: 150px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  background: white;
  padding: 20px 20px;
}

.dropzone.dz-clickable {
  cursor: pointer;
}

.dropzone.dz-clickable * {
  cursor: default;
}

.dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
  cursor: pointer;
}

.dropzone.dz-started .dz-message {
  display: none;
}

.dropzone.dz-drag-hover {
  border-style: solid;
}

.dropzone.dz-drag-hover .dz-message {
  opacity: 0.5;
}

.dropzone .dz-message {
  text-align: center;
  margin: 2em 0;
}

.dropzone .dz-preview {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 16px;
  min-height: 100px;
}

.dropzone .dz-preview:hover {
  z-index: 1;
}

.dropzone .dz-preview:hover .dz-details {
  opacity: 1;
}

.dropzone .dz-preview.dz-file-preview .dz-image {
  border-radius: 20px;
  background: linear-gradient(to bottom, #eee, #ddd);
}

.dropzone .dz-preview.dz-file-preview .dz-details {
  opacity: 1;
}

.dropzone .dz-preview.dz-image-preview {
  background: white;
}

.dropzone .dz-preview.dz-image-preview .dz-details {
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  -ms-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}

.dropzone .dz-preview .dz-remove {
  font-size: 14px;
  text-align: center;
  display: block;
  cursor: pointer;
  border: none;
}

.dropzone .dz-preview .dz-remove:hover {
  text-decoration: underline;
}

.dropzone .dz-preview:hover .dz-details {
  opacity: 1;
}

.dropzone .dz-preview .dz-details {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  font-size: 13px;
  min-width: 100%;
  max-width: 100%;
  padding: 2em 1em;
  text-align: center;
  color: rgba(0, 0, 0, 0.9);
  line-height: 150%;
}

.dropzone .dz-preview .dz-details .dz-size {
  margin-bottom: 1em;
  font-size: 16px;
}

.dropzone .dz-preview .dz-details .dz-filename {
  white-space: nowrap;
}

.dropzone .dz-preview .dz-details .dz-filename:hover span {
  border: 1px solid rgba(200, 200, 200, 0.8);
  background-color: rgba(255, 255, 255, 0.8);
}

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
  border: 1px solid transparent;
}

.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
  background-color: rgba(255, 255, 255, 0.4);
  padding: 0 0.4em;
  border-radius: 3px;
}

.dropzone .dz-preview:hover .dz-image img {
  -webkit-transform: scale(1.05, 1.05);
  -moz-transform: scale(1.05, 1.05);
  -ms-transform: scale(1.05, 1.05);
  -o-transform: scale(1.05, 1.05);
  transform: scale(1.05, 1.05);
  -webkit-filter: blur(8px);
  filter: blur(8px);
}

.dropzone .dz-preview .dz-image {
  border-radius: 20px;
  overflow: hidden;
  width: 120px;
  height: 120px;
  position: relative;
  display: block;
  z-index: 1;
}

.dropzone .dz-preview .dz-image img {
  display: block;
}

.dropzone .dz-preview.dz-success .dz-success-mark {
  -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
}

.dropzone .dz-preview.dz-error .dz-error-mark {
  opacity: 1;
  -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
}

.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  margin-left: -27px;
  margin-top: -27px;
}

.dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
  display: block;
  width: 54px;
  height: 54px;
}

.dropzone .dz-preview.dz-processing .dz-progress {
  opacity: 1;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.dropzone .dz-preview.dz-complete .dz-progress {
  opacity: 0;
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -ms-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  transition: opacity 0.4s ease-in;
}

.dropzone .dz-preview:not(.dz-processing) .dz-progress {
  -webkit-animation: pulse 6s ease infinite;
  -moz-animation: pulse 6s ease infinite;
  -ms-animation: pulse 6s ease infinite;
  -o-animation: pulse 6s ease infinite;
  animation: pulse 6s ease infinite;
}

.dropzone .dz-preview .dz-progress {
  opacity: 1;
  z-index: 1;
  pointer-events: none;
  position: absolute;
  height: 16px;
  left: 50%;
  top: 50%;
  margin-top: -8px;
  width: 80px;
  margin-left: -40px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-transform: scale(1);
  border-radius: 8px;
  overflow: hidden;
}

.dropzone .dz-preview .dz-progress .dz-upload {
  background: linear-gradient(to bottom, #666, #444);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  -webkit-transition: width 300ms ease-in-out;
  -moz-transition: width 300ms ease-in-out;
  -ms-transition: width 300ms ease-in-out;
  -o-transition: width 300ms ease-in-out;
  transition: width 300ms ease-in-out;
}

.dropzone .dz-preview.dz-error .dz-error-message {
  display: block;
}

.dropzone .dz-preview.dz-error:hover .dz-error-message {
  opacity: 1;
  pointer-events: auto;
}

.dropzone .dz-preview .dz-error-message {
  pointer-events: none;
  z-index: 1;
  position: absolute;
  display: none;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -ms-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  border-radius: 8px;
  font-size: 13px;
  top: 130px;
  left: -10px;
  width: 140px;
  background: linear-gradient(to bottom, #be2626, #a92222);
  padding: 0.5em 1.2em;
  color: white;
}

.dropzone .dz-preview .dz-error-message::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 64px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #be2626;
}

.dropzone {
  padding: 0;
  min-height: 170px;
  position: relative;
  z-index: 1;
  border: none;
  background-color: var(--theme-accent-bg-color);
}
.dropzone .dz-header {
  line-height: 40px;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
}
.dropzone .dz-header .sluitkruisje {
  font-size: 20px;
  cursor: pointer !important;
}
.dropzone .dz-message {
  display: flex;
  align-items: center;
  padding: 0 10px;
  margin: 0 20px 20px 20px;
  height: 110px;
  line-height: 1.5;
  border: 1px dashed var(--theme-link-color);
  background-color: white;
}
.dropzone .dz-message:hover {
  color: var(--theme-link-color);
  background-color: #f9f9f9;
}

.dialog-docbox {
  min-width: unset;
  overflow: hidden;
}

.docbox iframe {
  display: none;
}
@media only screen and (max-width: 575.99px) {
  .docbox {
    --page-filter-width: 0px;
  }
}
.docbox .page-menu .docbox-stats {
  padding: 0 20px;
  line-height: calc(var(--page-menu-height) * 0.5);
  background-color: #fff5a6;
  max-height: 100%;
}
.docbox .page-main table.dataTable td.type {
  width: 60px;
  min-width: 60px;
}
.docbox .page-main table.dataTable td.type img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 3px;
  margin: auto;
}
.docbox .page-main table.dataTable td.size,
.docbox .page-main table.dataTable td.datum,
.docbox .page-main table.dataTable td.owner {
  color: #777;
}
@media only screen and (max-width: 991.99px) {
  .docbox .page-main table.dataTable th.owner > span,
  .docbox .page-main table.dataTable th.size > span {
    display: none;
  }
}
@media only screen and (max-width: 767.99px) {
  .docbox .page-main table.dataTable .owner,
  .docbox .page-main table.dataTable .delen,
  .docbox .page-main table.dataTable .labelen {
    display: none;
  }
  .docbox .page-main table.dataTable th.type > span {
    display: none;
  }
}

.popup-docbox-toevoegen {
  position: absolute;
  z-index: 1;
}
.popup-docbox-toevoegen ul {
  line-height: 50px;
  padding: 0;
}
.popup-docbox-toevoegen ul li {
  list-style-type: none;
  padding: 0 15px;
  cursor: pointer;
}
.popup-docbox-toevoegen ul li:hover {
  background-color: var(--theme-accent-bg-color);
}
.popup-docbox-toevoegen ul li:not(:last-child) {
  border-bottom: 1px solid var(--theme-grey-line-color);
}

.dialog-small.mini-docbox {
  width: min(400px, 100vw);
}
.dialog-small.mini-docbox main .voegtoe {
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  border-bottom: 1px solid var(--theme-grey-line-color);
}
.dialog-small.mini-docbox main .lijst {
  max-height: calc(var(--max-height) - 40px);
  overflow-y: scroll;
}
.dialog-small.mini-docbox main .lijst div.regel {
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  border-bottom: 1px solid var(--theme-grey-line-color);
  cursor: pointer;
}
.dialog-small.mini-docbox main .lijst div.regel:hover {
  background-color: var(--theme-table-row-even-hover-bg-color);
}

.popup-docbox-delen {
  right: 20px;
}
.popup-docbox-delen > main {
  line-height: 30px;
}
.popup-docbox-delen > main label {
  display: block;
}
.popup-docbox-delen > main .leerling-delen {
  display: flex;
  align-items: center;
}
.popup-docbox-delen > main .leerling-delen input[name=email] {
  line-height: 25px;
  height: 25px;
}
.popup-docbox-delen > main .leerling-delen .submit-email {
  margin-left: 10px;
  font-size: 20px;
  cursor: pointer;
}

.tooltip.leerling-info {
  width: 250px;
  min-height: 200px;
  height: auto;
  background-color: white;
  border: 0px solid #aaa;
  border-radius: 4px;
  padding: 0;
  text-align: center;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.tooltip.leerling-info header {
  height: 100px;
  border-top-right-radius: inherit;
  border-top-left-radius: inherit;
  background-size: cover;
  text-align: center;
}
.tooltip.leerling-info header.bg-image {
  background-image: var(--background-image);
}
.tooltip.leerling-info header.bg-color {
  background-color: var(--background-color);
}
.tooltip.leerling-info header img {
  margin: 20px auto;
  width: 60px;
  height: 60px;
  border-radius: 100%;
}
.tooltip.leerling-info main {
  position: relative;
  color: var(--theme-fg-color);
  height: auto;
  padding: 15px;
  text-align: center;
}
.tooltip.leerling-info main .buttons > span {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 100%;
  background-color: var(--theme-accent-bg-color);
  text-align: center;
}
.tooltip.leerling-info main .buttons > span.selected {
  background-color: var(--theme-link-active-bg-color);
  color: var(--theme-link-active-fg-color);
}
.tooltip.leerling-info main .buttons > span i.pepicon3 {
  font-size: 15px;
}
.tooltip.leerling-info main.geblokkeerd .buttons .sg1-block, .tooltip.leerling-info main.geblokkeerd .buttons .sg1-follow {
  display: none;
}
.tooltip.leerling-info main:not(.geblokkeerd) .buttons .sg1-unblock {
  display: none;
}
.tooltip.leerling-info main h1 {
  font-size: 19px;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 10px;
}
.tooltip.leerling-info main h4 {
  font-size: 12px;
  color: #999;
  margin-top: 10px;
  margin-bottom: 5px;
}
.tooltip.leerling-info main .motto {
  font-size: 13px;
  margin: 15px 0;
}
.tooltip.leerling-info main a.lifelog-url {
  display: block;
  padding: 0;
  width: 100%;
  height: 30px;
  line-height: 26px;
  border: 1px solid var(--theme-border-color);
  border-radius: 15px;
  font-size: 13px;
  text-align: center;
  background-color: var(--theme-accent-bg-color);
}
.tooltip.leerling-info main a.lifelog-url:hover {
  background: var(--theme-link-color);
  color: white;
}

.page-main.page-main-analyse-skills .indicator_image {
  width: 50px;
}
.page-main.page-main-analyse-skills .indicator_image img {
  border-radius: 10px;
  max-width: 100%;
}
.page-main.page-main-analyse-skills .linebar {
  width: 200px;
  box-sizing: border-box;
  color: black;
}
.page-main.page-main-analyse-skills .linebar.lijst {
  margin-top: 18px;
}
.page-main.page-main-analyse-skills .linebar .greyline {
  height: 6px;
  width: 200px;
  border-radius: 3px;
  background-color: var(--theme-accent2-bg-color);
}
.page-main.page-main-analyse-skills .linebar .greyline.higher {
  height: 6px;
  width: 200px;
  border-radius: 3px;
  background-color: var(--theme-accent2-bg-color);
}
.page-main.page-main-analyse-skills .linebar .greyline .markerbar {
  height: 10px;
  border-radius: 5px;
  background-color: #8d87d9;
  top: -2px;
  width: 20px;
  position: relative;
  left: 220px;
}
.page-main.page-main-analyse-skills .linebar .greyline .markerline {
  height: 16px;
  background-color: white;
  top: -15px;
  width: 2px;
  position: relative;
}
.page-main.page-main-analyse-skills .linebar.thin .greyline {
  height: 6px;
  width: 200px;
  border-radius: 3px;
  background-color: var(--theme-accent2-bg-color);
}

.page-main.analyse-main-skills-overview .indicator-overview {
  container-type: inline-size;
}
.page-main.analyse-main-skills-overview .indicator-overview .indicator-sectie {
  width: 100%;
  padding: 0 20px 20px;
}
.page-main.analyse-main-skills-overview .indicator-overview .indicator-sectie .categorie {
  display: flex;
  width: 100%;
  height: 90px;
  align-items: center;
}
.page-main.analyse-main-skills-overview .indicator-overview .indicator-sectie .categorie h1 {
  flex: 1;
  font-size: 18px;
  margin: 0 0 0 20px;
}
.page-main.analyse-main-skills-overview .indicator-overview .indicator-sectie .indicator-grid {
  display: grid;
  margin-top: 10px;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@container (width < 960px) {
  .page-main.analyse-main-skills-overview .indicator-overview .indicator-sectie .indicator-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container (width < 640px) {
  .page-main.analyse-main-skills-overview .indicator-overview .indicator-sectie .indicator-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
.page-main.analyse-main-skills-overview .indicator-overview .indicator-sectie .indicator-grid .overview-tegel {
  display: block;
  width: 100%;
  height: 230px;
  border-radius: 5px;
  padding: 0 10px 10px 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}
.page-main.analyse-main-skills-overview .indicator-overview .indicator-sectie .indicator-grid .overview-tegel:hover {
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.page-main.analyse-main-skills-overview .indicator-overview .indicator-sectie .indicator-grid .overview-tegel h1 {
  display: block;
  line-height: 57px;
  font-size: 15px;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.page-main.analyse-main-skills-overview .indicator-overview .indicator-sectie .indicator-grid .overview-tegel .trend {
  margin-top: 10px;
  text-align: center;
  font-size: 17px;
  color: var(--theme-fg-color);
}
.page-main.analyse-main-skills-overview .indicator-overview .indicator-sectie .indicator-grid .overview-tegel .trend-getal {
  color: #c3c3c3;
  font-size: 12px;
}

.page-main.analyse-main-skills-analyse .analyse_resultaat .skill-line {
  line-height: 40px;
  display: flex;
}
.page-main.analyse-main-skills-analyse .analyse_resultaat .skill-line.head {
  line-height: 30px;
  text-transform: uppercase;
}
.page-main.analyse-main-skills-analyse .analyse_resultaat .skill-line.head span {
  border-top: 1px solid var(--theme-border-color);
  border-bottom: 1px solid var(--theme-border-color);
  padding: 0 5px;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 11px;
  color: var(--theme-light-fg-color);
}
.page-main.analyse-main-skills-analyse .analyse_resultaat .skill-line span.cat {
  width: 40px;
  text-align: center;
  padding: 0;
}
.page-main.analyse-main-skills-analyse .analyse_resultaat .skill-line span.cat img {
  width: 30px;
  height: 30px;
  vertical-align: middle;
  border-radius: 5px;
}
.page-main.analyse-main-skills-analyse .analyse_resultaat .skill-line span.titel {
  flex: 1;
}
.page-main.analyse-main-skills-analyse .analyse_resultaat .skill-line span.aantal {
  width: 40px;
  text-align: center;
}
.page-main.analyse-main-skills-analyse .analyse_resultaat .skill-line span.feedback {
  width: 200px;
}
.page-main.analyse-main-skills-analyse .analyse_resultaat .skill-line span.trend {
  width: 40px;
  text-align: center;
}
.page-main.analyse-main-skills-analyse .analyse_resultaat .skill-line span.feedforward {
  width: 90px;
  text-align: right;
  padding-right: 10px;
}

.page-tab-analyse-skill main.page-main > header.skill-header {
  position: relative;
  padding: 20px;
}
.page-tab-analyse-skill main.page-main > header.skill-header > img {
  width: 50px;
}
.page-tab-analyse-skill main.page-main > header.skill-header h1 {
  font-size: 15px;
  font-weight: normal;
  line-height: 35px;
}
.page-tab-analyse-skill main.page-main > header.skill-header h2 {
  font-size: 20px;
  font-weight: bold;
  line-height: 35px;
}
.page-tab-analyse-skill main.page-main > header.skill-header p {
  margin: 10px 0 0 0;
  font-size: 14px;
}
.page-tab-analyse-skill main.page-main .skill-tegel {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  padding-bottom: 5px;
  margin: 20px;
}
.page-tab-analyse-skill main.page-main .skill-tegel > header {
  padding: 25px 20px 25px 20px;
}
.page-tab-analyse-skill main.page-main .skill-tegel > header h1 {
  text-align: left;
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}
.page-tab-analyse-skill main.page-main .skill-tegel > header p {
  margin: 10px 0 0 0;
}
.page-tab-analyse-skill main.page-main .skill-tegel > main .graphic {
  width: auto;
}
.page-tab-analyse-skill main.page-main .skill-tegel > main .commentaar-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 5px;
  padding: 10px;
  line-height: 21px;
}
.page-tab-analyse-skill main.page-main .skill-tegel > main .commentaar-grid .commentaar-blok {
  padding: 5px;
  border: 1px solid #eee;
}
.page-tab-analyse-skill main.page-main .skill-tegel > footer .onder-buttons {
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  text-align: center;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--theme-link-color);
  -webkit-user-select: none;
  user-select: none;
}
.page-tab-analyse-skill main.page-main .skill-tegel > footer .skill-regel {
  display: flex;
  height: 30px;
  align-items: center;
  overflow: hidden;
  padding: 0 20px;
}
.page-tab-analyse-skill main.page-main .skill-tegel > footer .skill-regel .titel {
  color: var(--theme-light-fg-color);
  flex: 1;
  font-size: 13px;
  overflow: hidden;
  white-space: nowrap;
  line-height: 200%;
}
.page-tab-analyse-skill main.page-main .skill-tegel > footer .skill-regel .titel.vaardigheid_titel {
  width: 335px;
  line-height: 50px;
  color: #606060;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
}
.page-tab-analyse-skill main.page-main .skill-tegel > footer .skill-regel .titel .projectfoto {
  display: inline-block;
}
.page-tab-analyse-skill main.page-main .skill-tegel > footer .skill-regel .titel .datum {
  display: inline-block;
  color: var(--theme-light-fg-color);
  width: 66px;
  overflow: hidden;
  vertical-align: top;
  padding-top: 0px;
}
.page-tab-analyse-skill main.page-main .skill-tegel > footer .skill-regel .linebar {
  width: 200px;
}
.page-tab-analyse-skill main.page-main .skill-tegel > footer .skill-regel .trend {
  width: 40px;
  text-align: right;
}
.page-tab-analyse-skill main.page-main .skill-tegel > footer .skill-regel .feedforward {
  width: 25px;
  text-align: right;
  color: var(--theme-link-color);
}

.hc_tooltip_header {
  margin-bottom: 5px;
  background-color: green;
  clear: both;
  font-weight: bold;
  border: 3px solid green;
}

#confirm.update {
  width: 500px;
  padding: 0;
  color: unset;
  font-size: unset;
  text-shadow: 0 0 2px white;
}
#confirm.update .sg1-buttons {
  margin: 0;
}
#confirm.update header {
  padding: 20px;
}
#confirm.update header h1 {
  line-height: 30px;
  margin: 0;
  font-weight: bold;
  font-size: 24px;
  color: #3ba700;
}
#confirm.update main {
  padding: 0 20px;
  font-size: 14px;
}
#confirm.update main p {
  margin: 0 0 10px 0;
}
#confirm.update main p:last-of-type {
  padding-top: 10px;
}
#confirm.update main a {
  font-weight: bold;
}
#confirm.update main img {
  max-width: unset;
}
#confirm.update .sg1-buttons {
  padding: 20px;
}
/**
 * @param $font-weight: 300 = light, 400 = regular, 700 = solid
 */
.header-menu.standaard-header {
  background-color: rgba(0, 0, 0, 0.4);
  border: none;
}
.header-menu.standaard-header .container {
  display: flex;
  width: var(--content-width);
  height: var(--header-height);
  line-height: var(--header-height);
  padding: 0 10px;
}
.header-menu.standaard-header .container .logo.peppels img {
  position: relative;
  top: 2px;
  width: 222px;
  vertical-align: middle;
}
.header-menu.standaard-header .container .logo.owik img {
  position: relative;
  width: 180px;
  vertical-align: middle;
}
.header-menu.standaard-header .container .home-slogan {
  line-height: inherit;
  margin-left: 50px;
  white-space: preserve;
  font-size: 28px;
  color: white;
}
.header-menu.standaard-header .container .home-slogan.owik {
  padding-top: 7px;
}
@media only screen and (max-width: 767.99px) {
  .header-menu.standaard-header .container .home-slogan {
    display: none;
  }
}
.header-menu.standaard-header .container .info-link {
  height: 35px;
  line-height: 35px;
  margin-left: auto;
  border: none;
  border-radius: 17.5px;
  background-color: white;
  color: #222;
  align-self: center;
  padding: 0 15px;
  font-weight: bold;
}
.header-menu.standaard-header .container .info-link.owik {
  position: relative;
  top: 7px;
}
@media only screen and (max-width: 370px) {
  .header-menu.standaard-header .container .info-link {
    display: none;
  }
}

body.betaalpagina {
  --content-width: calc(min(100vw, 940px));
  --header-height: 80px;
  font-size: 14px;
  background-color: #c3d632;
}
body.betaalpagina div.info.peppels {
  margin-top: 200px;
}
body.betaalpagina div.info.peppels div.form {
  width: 640px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 5px;
  border: 1px solid #ccc;
  background-color: white;
}
body.betaalpagina div.info.peppels div.form h1 {
  font-size: 24px;
}
body.betaalpagina div.info.peppels form {
  border: 1px solid #ccc;
  padding: 0;
  width: 640px;
  margin: 0 auto;
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 240px 400px;
  border-radius: 5px;
}
body.betaalpagina div.info.peppels form div.left {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  background-color: #d8d8d8;
  min-height: 300px;
  height: auto;
  padding: 20px;
}
body.betaalpagina div.info.peppels form div.left h2 {
  font-size: 24px;
  margin-top: 12px;
}
body.betaalpagina div.info.peppels form div.right {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color: white;
  padding: 20px;
  width: 100%;
}
body.betaalpagina div.info.peppels form div.right div.row {
  display: grid;
  grid-gap: 8px;
  grid-template-columns: 1fr 1fr;
  justify-items: stretch;
  align-items: center;
  margin-top: 10px;
  height: 40px;
}
body.betaalpagina div.info.peppels form div.right div.row:first-child {
  margin-top: 0px;
}
body.betaalpagina div.info.peppels form div.right div.row.message {
  display: none;
}
body.betaalpagina div.info.peppels form div.right div.row.message.error {
  margin: 10px 0;
  padding: 8px;
  background-color: #fed;
  color: red;
  display: block;
}
body.betaalpagina div.info.peppels form div.right div.row h2 {
  font-size: 24px;
  grid-column: 1/3;
}
body.betaalpagina div.info.peppels form div.right div.row > input, body.betaalpagina div.info.peppels form div.right div.row > label {
  display: inline-block;
  margin: 0;
  grid-column: 1/3;
}
body.betaalpagina div.info.peppels form div.right div.row > input.half, body.betaalpagina div.info.peppels form div.right div.row > label.half {
  grid-column: unset;
}
body.betaalpagina div.info.peppels form div.right div.row div.fr {
  justify-self: end;
}
body.betaalpagina div.info.peppels form div.right div.row input[type=text].error,
body.betaalpagina div.info.peppels form div.right div.row input[type=password].error,
body.betaalpagina div.info.peppels form div.right div.row input[type=email].error {
  box-shadow: 0 0 6px 3px red;
  position: relative;
}
body.betaalpagina div.info.peppels form div.right div.row input[type=text]:invalid,
body.betaalpagina div.info.peppels form div.right div.row input[type=password]:invalid,
body.betaalpagina div.info.peppels form div.right div.row input[type=email]:invalid {
  box-shadow: 0 0 6px 3px red;
  position: relative;
}
body.betaalpagina div.info.peppels form div.right div.row input[type=text],
body.betaalpagina div.info.peppels form div.right div.row input[type=password],
body.betaalpagina div.info.peppels form div.right div.row input[type=email] {
  height: 40px;
  padding: 8px;
  padding-left: 8px;
  margin: 0;
  border-radius: 3px;
  background-color: var(--theme-accent4-bg-color);
  color: var(--theme-fg-color);
  border: 1px solid var(--theme-border-color);
  font-size: 14px;
}
body.betaalpagina div.info.peppels form div.right div.row input[type=text]:focus,
body.betaalpagina div.info.peppels form div.right div.row input[type=password]:focus,
body.betaalpagina div.info.peppels form div.right div.row input[type=email]:focus {
  border: 1px solid var(--theme-input-focused-border-color);
}
body.betaalpagina div.info.peppels form div.right div.row label {
  font-size: 13px;
}
body.betaalpagina div.info.peppels form div.right div.row.pay {
  font-size: 18px;
  font-weight: bold;
}
body.betaalpagina div.info.peppels div.return {
  width: 680px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  background-color: white;
}
body.betaalpagina div.info.peppels div.return p.buttons {
  height: 30px;
  padding-top: 20px;
}
body.betaalpagina div.info.peppels div.return h1 {
  font-size: 24px;
}
body.betaalpagina .password_test + .password-policy-message {
  display: none;
}
body.betaalpagina .password_test.error + .password-policy-message {
  display: inline-block;
  position: absolute;
  background-color: #fee;
  padding: 10px;
  margin-left: 10px;
  width: 300px;
  box-shadow: 0 0 4px 1px rgba(255, 0, 0, 0.5);
}
body.betaalpagina .password_test.error + .password-policy-message ul {
  padding-left: 0;
  list-style-position: inside;
  list-style-type: none;
}
body.betaalpagina .password_test.error + .password-policy-message ul li::before {
  display: inline-block;
  font-family: "Font Awesome 6 Pro";
  width: 1.5em;
  font-size: initial;
  content: "\f00d";
  color: red;
}
body.betaalpagina .password_test.error + .password-policy-message ul li.ok::before {
  content: "\f00c";
  color: green;
}
body.betaalpagina .password_test.valid + .password-policy-message {
  display: none;
}
body.betaalpagina .password_test.valid::after {
  font-family: "Font Awesome 6 Pro";
  content: "\f058";
  color: green;
  display: inline-block;
}
body.betaalpagina .row .password_test.error + .password-policy-message {
  margin-top: 130px;
  margin-left: 60px;
}

.analyse-main-dashboard .dashboard-grid {
  display: grid;
  grid-gap: 20px 20px;
  grid-template: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 20px 20px 0px 20px;
  background-color: var(--theme-accent3-bg-color);
}
@media only screen and (max-width: 767.99px) {
  .analyse-main-dashboard .dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.analyse-main-dashboard .widget {
  --header-height: 75px;
  grid-column: 1/span 2;
  min-height: 340px;
  height: 340px;
  overflow: hidden;
  background-color: white;
  border: 1px solid var(--theme-grey-line-color);
  border-radius: 5px;
}
.analyse-main-dashboard .widget:has(> header.no-analyse) {
  --header-height: 45px;
}
.analyse-main-dashboard .widget.widget-rapporten, .analyse-main-dashboard .widget.widget-domeinen {
  height: unset;
  min-height: unset;
  grid-column: span 1;
}
.analyse-main-dashboard .widget .button-rounded {
  --height: 24px;
  font-size: 1rem;
}
.analyse-main-dashboard .widget > header {
  height: var(--header-height);
  padding: 10px;
}
.analyse-main-dashboard .widget > header > div {
  height: 37px;
}
.analyse-main-dashboard .widget > header .h1-dashboard {
  display: inline-block;
  margin: 0;
  margin-right: 10px;
  font-size: 18px;
}
.analyse-main-dashboard .widget > header .rechts-boven {
  float: right;
  margin-top: 3px;
  margin-right: 0px;
  font-size: 20px;
}
.analyse-main-dashboard .widget .head {
  min-height: 20px;
  border-bottom: 1px solid var(--theme-border-color);
  border-top: 1px solid var(--theme-border-color);
  color: var(--theme-light-fg-color);
  font-size: 10px;
}
.analyse-main-dashboard .widget .head.first {
  margin-left: -15px;
  padding-left: 15px;
}
.analyse-main-dashboard .widget .head.last {
  margin-right: -15px;
  padding-right: 15px;
}
.analyse-main-dashboard .widget.widget-logberichten .werklog-berichten {
  overflow-y: auto;
  height: 280px;
}
.analyse-main-dashboard .widget.widget-logberichten .werklog-berichten .logberichten-grid {
  padding: 0;
  background: none;
}
.analyse-main-dashboard .widget.widget-logberichten .werklog-berichten .logberichten-grid > article.logbericht {
  display: grid;
  gap: 10px 0;
  grid-template-columns: 40px auto;
  align-items: baseline;
  padding: 10px;
}
@media only screen and (max-width: 575.99px) {
  .analyse-main-dashboard .widget.widget-logberichten .werklog-berichten .logberichten-grid > article.logbericht {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 20px;
  }
}
.analyse-main-dashboard .widget.widget-logberichten .werklog-berichten .logberichten-grid > article.logbericht > aside.blogtype {
  text-align: left;
}
.analyse-main-dashboard .widget.widget-logberichten .werklog-berichten .logberichten-grid > article.logbericht .aanhangsels,
.analyse-main-dashboard .widget.widget-logberichten .werklog-berichten .logberichten-grid > article.logbericht .reacties,
.analyse-main-dashboard .widget.widget-logberichten .werklog-berichten .logberichten-grid > article.logbericht .leerlingen,
.analyse-main-dashboard .widget.widget-logberichten .werklog-berichten .logberichten-grid > article.logbericht .knoppen {
  display: none;
}
.analyse-main-dashboard .widget .widget-skills-grid {
  display: grid;
  grid-gap: 10px 0px;
  grid-template: auto;
  grid-template-columns: auto 30px 40px 30px;
  padding: 10px;
  align-items: center;
  text-align: left;
}
.analyse-main-dashboard .widget .widget-skills-grid > div {
  height: 26px;
}
.analyse-main-dashboard .widget .widget-skills-grid > div.head {
  height: 20px;
  line-height: 20px;
}
.analyse-main-dashboard .widget .widget-skills-grid .c {
  text-align: center;
}
.analyse-main-dashboard .widget .widget-skills-grid .trend-joined {
  grid-column: 3/5;
}
.analyse-main-dashboard .widget .widget-skills-grid .skill {
  white-space: nowrap;
  overflow: hidden;
}
.analyse-main-dashboard .widget .widget-skills-grid .trend-arrow {
  font-size: 18px;
  color: var(--theme-link-active-color);
  opacity: 1;
}
.analyse-main-dashboard .widget .widget-skills-grid .trend {
  color: var(--theme-light-fg-color);
}
.analyse-main-dashboard .widget .widget-beoordelingen-grid {
  display: grid;
  grid-gap: 10px 0px;
  grid-template: auto;
  grid-template-columns: 40px auto 50px;
  padding: 10px;
  align-items: center;
  text-align: left;
}
.analyse-main-dashboard .widget .widget-beoordelingen-grid .c {
  text-align: center;
}
.analyse-main-dashboard .widget .widget-beoordelingen-grid .trend-joined {
  grid-column: 3/5;
}
.analyse-main-dashboard .widget .widget-beoordelingen-grid > div {
  height: 26px;
  vertical-align: bottom;
}
.analyse-main-dashboard .widget .widget-beoordelingen-grid > div.feedback .fa-light {
  font-size: 17px;
}
.analyse-main-dashboard .widget .widget-beoordelingen-grid > div.head {
  height: 20px;
  line-height: 20px;
  color: var(--theme-light-fg-color);
}
.analyse-main-dashboard .widget .week-overview-grid {
  display: grid;
  grid-gap: 0px 5px;
  grid-template-columns: repeat(7, 1fr);
  height: auto;
  margin-top: 10px;
  padding: 0px 10px;
  align-items: center;
  justify-items: stretch;
  border-top: 1px solid var(--theme-border-color);
}
.analyse-main-dashboard .widget .week-overview-grid > div {
  text-align: center;
  height: 223px;
  font-size: 8px;
  color: var(--theme-light-fg-color);
}
.analyse-main-dashboard .widget .week-overview-grid > div.week {
  font-size: 12px;
}
.analyse-main-dashboard .widget .week-overview-grid > div div.wstatus {
  width: 100%;
  background-color: var(--theme-accent-bg-color);
}
.analyse-main-dashboard .widget .week-overview-grid > div div.wstatus.thisweek {
  background-color: var(--theme-accent2-bg-color);
}
.analyse-main-dashboard .widget .week-overview-grid > div div.wstatus.todo {
  background-color: #ff5b1b;
}
.analyse-main-dashboard .widget .week-overview-grid > div div.wstatus.ingeleverd {
  background-color: #ffee00;
}
.analyse-main-dashboard .widget .week-overview-grid > div div.wstatus.afgerond {
  background-color: #74f137;
}
.analyse-main-dashboard .widget.widget-workload, .analyse-main-dashboard .widget.widget-leerdoelen, .analyse-main-dashboard .widget.widget-logberichten, .analyse-main-dashboard .widget.widget-skills, .analyse-main-dashboard .widget.widget-evaluaties, .analyse-main-dashboard .widget.widget-kwalificaties, .analyse-main-dashboard .widget.widget-beoordelingen {
  grid-column: span 1;
}
.analyse-main-dashboard .widget.widget-evaluaties {
  height: auto;
  min-height: auto;
}
.analyse-main-dashboard .widget.widget-evaluaties .widget-evaluaties-grid {
  grid-template-columns: repeat(2, 1fr);
}
.analyse-main-dashboard .widget.widget-leerdoelen table thead {
  font-size: 10px;
}
.analyse-main-dashboard .widget.widget-leerdoelen table thead th {
  border-bottom: 1px solid var(--theme-border-color);
  border-top: 1px solid var(--theme-border-color);
}
.analyse-main-dashboard .widget.widget-leerdoelen table td.vak {
  text-align: unset;
}
.analyse-main-dashboard .widget.widget-leerdoelen table td.score {
  width: 100%;
  text-align: right;
}
.analyse-main-dashboard .widget.widget-kwalificaties > header {
  border-bottom: 1px solid var(--theme-grey-line-color);
}
.analyse-main-dashboard .widget.widget-kwalificaties > main {
  height: calc(100% - var(--header-height));
  overflow-y: auto;
}
.analyse-main-dashboard .widget.widget-kwalificaties > main section + section > main {
  border-top: 1px solid var(--theme-grey-line-color);
}
.analyse-main-dashboard .widget.widget-kwalificaties > main section {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  height: 100px;
  align-items: center;
}
.analyse-main-dashboard .widget.widget-kwalificaties > main section > img {
  height: 60px;
  padding: 0 20px;
}
.analyse-main-dashboard .widget.widget-kwalificaties > main section > main {
  display: flex;
  width: 100%;
  max-width: calc(100% - 100px - 10px);
  height: inherit;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 10px 0;
}
.analyse-main-dashboard .widget.widget-kwalificaties > main section > main > h2 {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: bold;
}
.analyse-main-dashboard .widget.widget-kwalificaties > main section > main > table {
  width: 100%;
  line-height: 1.3;
}
.analyse-main-dashboard .widget.widget-kwalificaties > main section > main > table > thead > tr > th {
  color: var(--theme-light-fg-color);
  text-transform: uppercase;
  font-size: 11px;
  width: 33%;
}
.analyse-main-dashboard .widget.widget-kwalificaties > main section > main > table > tbody > tr > td {
  padding: 0;
}
.analyse-main-dashboard .widget.widget-kwalificaties > main section > main > table > tbody > tr > td .meter {
  --color: var(--theme-skill-badge-color);
  --height: 8px;
  width: 50%;
}
.analyse-main-dashboard .widget.widget-kwalificaties > main section > main > table > tbody > tr > td:last-child {
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
}
.analyse-main-dashboard .widget.widget-kwalificaties > main section > main > table > tbody > tr > td:last-child > :first-child {
  color: var(--theme-skill-badge-color);
}
.analyse-main-dashboard .widget.widget-kwalificaties > main section > main > table > tbody > tr > td:last-child > :last-child {
  color: var(--theme-light-fg-color);
}
.analyse-main-dashboard .dashboard-rest {
  display: grid;
  padding: 20px;
  gap: 20px 20px;
  grid-template-columns: 1fr 1fr;
  background-color: var(--theme-accent3-bg-color);
}
.analyse-main-dashboard .dashboard-rest .wide-widget {
  background-color: white;
  height: auto;
  min-height: auto;
}
.analyse-main-dashboard .dashboard-rest .wide-widget > header {
  padding: 0 20px;
  line-height: 75px;
}
.analyse-main-dashboard .dashboard-rest .wide-widget > header h1 {
  margin: 0;
  font-size: 22px;
  font-weight: bold;
  text-align: left;
}
.analyse-main-dashboard .dashboard-rest .wide-widget.widget-plan .toevoegregel {
  display: flex;
  line-height: 68px;
  padding: 0 20px;
  border-bottom: 1px solid var(--theme-border-color);
}
.analyse-main-dashboard .dashboard-rest .wide-widget.widget-plan .toevoegregel > :first-child {
  flex: 1;
}
.analyse-main-dashboard .dashboard-rest .wide-widget.widget-plan .toevoegregel > :last-child {
  margin-left: auto;
}
.analyse-main-dashboard .dashboard-rest .wide-widget.widget-plan .page-main.analyse-main-ontwikkelplan {
  --page-main-height: auto;
}
.analyse-main-dashboard .dashboard-rest .wide-widget.widget-plan .page-main.analyse-main-ontwikkelplan article.ontwikkelplan-melding > header {
  flex-direction: row;
  align-items: center;
  height: 60px;
  line-height: 60px;
  padding: 0 20px;
  background-color: unset;
}
.analyse-main-dashboard .dashboard-rest .wide-widget.widget-plan .page-main.analyse-main-ontwikkelplan article.ontwikkelplan-melding > header .sluitkruisje,
.analyse-main-dashboard .dashboard-rest .wide-widget.widget-plan .page-main.analyse-main-ontwikkelplan article.ontwikkelplan-melding > header .button:not(.bespreek-button),
.analyse-main-dashboard .dashboard-rest .wide-widget.widget-plan .page-main.analyse-main-ontwikkelplan article.ontwikkelplan-melding > header > h2 {
  display: none;
}
.analyse-main-dashboard .dashboard-rest .wide-widget.widget-plan .page-main.analyse-main-ontwikkelplan article.ontwikkelplan-melding > header h1 {
  color: initial;
}
.analyse-main-dashboard .dashboard-rest .wide-widget.widget-plan .page-main.analyse-main-ontwikkelplan article.ontwikkelplan-melding > header > div {
  display: flex;
  align-items: center;
  height: inherit;
  line-height: inherit;
  width: unset;
  margin: unset;
  margin-left: auto;
}

.dialog.page-container.dialog-analytics-dashboard-settings {
  height: auto;
}
.dialog.page-container.dialog-analytics-dashboard-settings > header {
  position: relative;
}
.dialog.page-container.dialog-analytics-dashboard-settings > header h1 {
  font-size: 22px;
}
.dialog.page-container.dialog-analytics-dashboard-settings > header a {
  position: absolute;
  right: 20px;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: normal;
}
.dialog.page-container.dialog-analytics-dashboard-settings > main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 20px;
  padding: 20px;
  border-bottom-right-radius: inherit;
  background-color: var(--theme-accent-bg-color);
}
@media only screen and (max-width: 575.99px) {
  .dialog.page-container.dialog-analytics-dashboard-settings > main {
    grid-template-columns: minmax(0, 1fr);
  }
}
.dialog.page-container.dialog-analytics-dashboard-settings > main > div {
  height: 220px;
  line-height: 60px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: normal;
  background-color: white;
  cursor: pointer;
}
.dialog.page-container.dialog-analytics-dashboard-settings > main > div::after {
  font-size: 18px;
  float: right;
  content: "\e90c";
  font-family: "pepicon3";
}
.dialog.page-container.dialog-analytics-dashboard-settings > main > div .toggle {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  background-color: var(--theme-link-color);
  border-radius: 2px;
  border: solid 1px var(--theme-link-color);
}
.dialog.page-container.dialog-analytics-dashboard-settings > main > div .toggle.off {
  background-color: transparent;
}

.analyse-main-workload .workload-grid {
  margin-top: 6px;
  height: auto;
  padding: 4px 10px 0;
  border-top: 1px solid var(--theme-border-color);
  display: grid;
  grid-gap: 0px 5px;
  grid-template-columns: repeat(13, 1fr);
  align-items: center;
  justify-items: stretch;
}
.analyse-main-workload .workload-grid > .week {
  text-align: center;
  height: 273px;
  font-size: 13px;
  color: var(--theme-light-fg-color);
  filter: brightness(100%);
  text-transform: uppercase;
}
.analyse-main-workload .workload-grid > .week:hover {
  cursor: pointer;
  filter: brightness(70%);
}
.analyse-main-workload .workload-grid > .week div.wstatus {
  width: 100%;
  background-color: var(--theme-accent-bg-color);
}
.analyse-main-workload .workload-grid > .week div.wstatus.thisweek {
  background-color: var(--theme-accent2-bg-color);
}
.analyse-main-workload .workload-grid > .week div.wstatus.selected {
  filter: brightness(80%);
}
.analyse-main-workload .workload-grid > .week div.wstatus.todo {
  background-color: #ff5b1b;
}
.analyse-main-workload .workload-grid > .week div.wstatus.ingeleverd {
  background-color: #ffee00;
}
.analyse-main-workload .workload-grid > .week div.wstatus.afgerond {
  background-color: #74f137;
}
.analyse-main-workload .workload-list {
  padding-bottom: 20px;
}
.analyse-main-workload .workload-list .header {
  display: flex;
  justify-content: space-between;
  gap: 0 10px;
  line-height: 60px;
  padding: 0 10px;
}
.analyse-main-workload .workload-list .header .titel {
  white-space: nowrap;
  font-size: 18px;
  font-weight: bold;
}
.analyse-main-workload .workload-list .header .show-all {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  text-transform: uppercase;
}
@media only screen and (max-width: 575.99px) {
  .analyse-main-workload .workload-list table .afrond,
  .analyse-main-workload .workload-list table .plan {
    display: none;
  }
}

.page-submenu-leerdoelen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: var(--page-submenu-height);
}
.page-submenu-leerdoelen .vakkenkiezer {
  height: 40px;
}
.page-submenu-leerdoelen .vakkenkiezer .vakkenkiezer-vak {
  line-height: 40px;
}
.page-submenu-leerdoelen .vakkenkiezer .vakkenkiezer-vak .vakkenkiezer-vak-icon {
  width: 40px;
  height: 40px;
}
.page-submenu-leerdoelen .vak-select {
  padding: 0 10px;
  display: flex;
  align-items: center;
}
.page-submenu-leerdoelen .vak-select img {
  width: 25px;
  height: 25px;
  border-radius: 2px;
  display: inline-block;
  margin-right: 10px;
}
.page-submenu-leerdoelen .vak-select a {
  display: inline-block;
  padding: 10px 0;
}
.page-submenu-leerdoelen .leerdoelen-balk {
  flex: 0 1 290px;
  margin-left: 20px;
}
.page-submenu-leerdoelen .leerdoelen-balk .progress-resultaat .perc {
  font-size: 18px;
  font-weight: bold;
}

.analyse-main-leerdoelen .leerdoelen-list table th.leertaak {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.analyse-main-leerdoelen .leerdoelen-list table td.check i {
  color: #3ba700;
}
.analyse-main-leerdoelen .leerdoelen-list table td.titel,
.analyse-main-leerdoelen .leerdoelen-list table td.leertaak {
  width: 50%;
}
.analyse-main-leerdoelen .leerdoelen-list table td.titel {
  min-width: 5em;
}
.analyse-main-leerdoelen .leerdoelen-list table td.leertaak {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.widget-evaluaties-grid {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 15px;
  align-items: center;
}
@media only screen and (max-width: 575.99px) {
  .widget-evaluaties-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.widget-evaluaties-grid > article {
  display: grid;
  grid-template-rows: 55px 25px 40px;
  align-items: center;
  border: 1px solid var(--theme-border-color);
  text-align: center;
}
.widget-evaluaties-grid > article.status-4 {
  color: #74f137;
}
.widget-evaluaties-grid > article.status-3 {
  color: var(--theme-fg-color);
}
.widget-evaluaties-grid > article.status-2 {
  color: #ffee00;
}
.widget-evaluaties-grid > article.status-1 {
  color: #ff5b1b;
}
.widget-evaluaties-grid > article.active:hover {
  background-color: #aaa;
  color: white;
  cursor: pointer;
}
.widget-evaluaties-grid > article.active:hover .studiepunten {
  background-color: var(--theme-accent2-bg-color);
}
.widget-evaluaties-grid > article.active.selected {
  background-color: #aaa;
  color: white;
}
.widget-evaluaties-grid > article.active.selected.selected:hover {
  background-color: #999;
}
.widget-evaluaties-grid > article > div {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  padding: 0 5px;
}
.widget-evaluaties-grid > article > .percentage {
  font-size: 45px;
}
.widget-evaluaties-grid > article > .voldaan {
  font-size: 14px;
}
.widget-evaluaties-grid > article > .studiepunten {
  height: 40px;
  line-height: 40px;
  font-weight: normal;
  background-color: var(--theme-accent-bg-color);
  color: var(--theme-fg-color);
}

.evaluatie-overzicht {
  padding: 5px 0;
  background-color: white;
  color: #606060;
}
.evaluatie-overzicht.new {
  background-color: white;
}
.evaluatie-overzicht p {
  padding: 0 20px;
}

table.evaluatielijst th {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
table.evaluatielijst td.bewijzen, table.evaluatielijst td.gewicht {
  text-align: center;
}
table.evaluatielijst td.resultaat {
  padding: 0;
  min-width: 0;
}
table.evaluatielijst td.resultaat .voldaan-knop {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  max-width: 100%;
  overflow: hidden;
  vertical-align: middle;
  text-overflow: ellipsis;
  padding: 0 10px;
  border-radius: 3px;
  text-align: center;
  font-size: 12px;
  color: white;
}
table.evaluatielijst td.resultaat .voldaan-knop.voldaan {
  background-color: #64c300;
}
table.evaluatielijst td.resultaat .voldaan-knop.niet-voldaan {
  background-color: var(--theme-fg-color);
}
@media only screen and (max-width: 575.99px) {
  table.evaluatielijst th.bewijzen, table.evaluatielijst th.gewicht, table.evaluatielijst th.resultaat {
    max-width: 3ch;
  }
  table.evaluatielijst th.opdracht-plaatje,
  table.evaluatielijst td.opdracht-plaatje {
    display: none;
  }
  table.evaluatielijst td.resultaat {
    max-width: 0;
    min-width: 5ch;
  }
}

.rapport-menu > div {
  margin: 0 auto;
}
.rapport-menu i {
  font-size: 22px;
}

.analyse-main-rapport img {
  border-radius: 5px;
}
.analyse-main-rapport nav {
  padding: 20px 20px 10px 20px;
  text-align: center;
}
.analyse-main-rapport nav span {
  display: inline-block;
  height: 25px;
  line-height: 25px;
  border: 1px solid var(--theme-border-color);
  border-radius: 3px;
  padding: 0 12px;
}
.analyse-main-rapport nav li {
  white-space: nowrap;
}
.analyse-main-rapport h3 {
  margin-top: 40px;
  margin-left: 20px;
  font-size: 18px;
  font-weight: bold;
}

.analyse-main-rapport.rapport-competentierapport {
  padding-top: 10px;
  padding-bottom: 30px;
}
.analyse-main-rapport.rapport-competentierapport h2.ind {
  padding: 0;
  font-weight: bold;
  font-size: 18px;
  text-align: left;
  margin-bottom: 10px;
}
.analyse-main-rapport.rapport-competentierapport br.ind {
  line-height: 30px;
}
.analyse-main-rapport.rapport-competentierapport .indicator-blok {
  padding-left: 20px;
}
.analyse-main-rapport.rapport-competentierapport .block-level-element {
  margin-bottom: 30px;
}
.analyse-main-rapport.rapport-competentierapport .regel-blok {
  display: table-row;
  height: 60px;
  position: relative;
}
.analyse-main-rapport.rapport-competentierapport .regel-blok div {
  display: table-cell;
  height: inherit;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.analyse-main-rapport.rapport-competentierapport .regel-blok div.indicator {
  border-top: none;
  border-bottom: none;
}
.analyse-main-rapport.rapport-competentierapport .regel-blok div:first-child {
  border-left: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.analyse-main-rapport.rapport-competentierapport .regel-blok div:first-child span {
  width: 180px;
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
}
.analyse-main-rapport.rapport-competentierapport .regel-blok .opener {
  position: relative;
  top: -20px;
  left: 10px;
  background: url(/gfx/algemeen/chevron-circle-down-regular.svg);
  filter: invert(24%) sepia(0%) saturate(0%) hue-rotate(347deg) brightness(97%) contrast(89%);
  background-size: 18px 18px;
  display: inline-block;
  width: 18px;
  height: 18px;
}
.analyse-main-rapport.rapport-competentierapport .regel-blok .opener.toggle-on {
  background: url(/gfx/algemeen/chevron-circle-up-regular.svg);
}
.analyse-main-rapport.rapport-competentierapport .regel-blok .titel {
  height: inherit;
  width: 240px;
  overflow: hidden;
  padding: 10px 5px 10px 10px;
  line-height: 150%;
}
.analyse-main-rapport.rapport-competentierapport .regel-blok .titel.indicator {
  font-weight: bold;
}
.analyse-main-rapport.rapport-competentierapport .regel-blok .titel.competentie {
  color: var(--theme-light-fg-color);
}
.analyse-main-rapport.rapport-competentierapport .regel-blok .desc-blok {
  color: var(--theme-light-fg-color);
  padding: 7px 10px;
  vertical-align: middle;
}
.analyse-main-rapport.rapport-competentierapport .regel-blok .desc-blok.indicator {
  font-weight: bold;
  font-size: 12px;
}
.analyse-main-rapport.rapport-competentierapport .regel-blok .desc-blok.yellow {
  background-color: #ffdd43;
}
.analyse-main-rapport.rapport-competentierapport .regel-blok .desc-blok.yellow-bg {
  background-color: #fff1b4;
}
.analyse-main-rapport.rapport-competentierapport .regel-blok .desc-blok.darkgreen {
  background-image: url(/gfx/algemeen/arrow-right-solid.svg);
  background-size: 13px 13px;
  background-repeat: no-repeat;
  background-position: center;
}
.analyse-main-rapport.rapport-competentierapport .regel-blok .desc-blok.darkgreen.indicator {
  background-color: #a0f646;
}
.analyse-main-rapport.rapport-competentierapport .regel-blok .desc-blok.darkgreen-bg {
  background-color: #cffaa2;
}
.analyse-main-rapport.rapport-competentierapport .regel-blok .desc-blok.lightgreen {
  background-color: #e1fcc3;
}
.analyse-main-rapport.rapport-competentierapport .regel-blok .desc-blok.lightgreen.indicator {
  background-color: #cffaa2;
}
.analyse-main-rapport.rapport-competentierapport .regel-blok .desc-blok.lightgreen-bg {
  background-color: #eeffdc;
}
.analyse-main-rapport.rapport-competentierapport .regel-blok .desc-blok.lightred {
  background-color: #ffe4e3;
}
.analyse-main-rapport.rapport-competentierapport .regel-blok .desc-blok.lightred.indicator {
  background-color: #ffb2b2;
}
.analyse-main-rapport.rapport-competentierapport .regel-blok .desc-blok.lightred-bg {
  background-color: #ffdddd;
}
.analyse-main-rapport.rapport-competentierapport .regel-blok .desc-blok.darkred {
  background-image: url(/gfx/algemeen/arrow-left-solid.svg);
  background-size: 13px 13px;
  background-repeat: no-repeat;
  background-position: center;
}
.analyse-main-rapport.rapport-competentierapport .regel-blok .desc-blok.darkred.indicator {
  background-color: #ff4c4c;
}
.analyse-main-rapport.rapport-competentierapport .regel-blok .desc-blok.darkred-bg {
  background-color: #ffb2b2;
}
.analyse-main-rapport.rapport-competentierapport .regel-blok .desc-blok.white {
  background-color: white;
}
.analyse-main-rapport.rapport-competentierapport .regel-blok .desc-blok.grey {
  background-color: var(--theme-accent-bg-color);
}
.analyse-main-rapport.rapport-competentierapport .regel-blok .desc-blok.bold {
  color: var(--theme-fg-color);
}
.analyse-main-rapport.rapport-competentierapport .regel-blok.indic-bar {
  background-color: var(--theme-accent-bg-color);
  height: 15px;
  border-color: red;
}
.analyse-main-rapport.rapport-competentierapport .regel-blok.indic-bar .indicator-top {
  height: inherit;
  border-bottom: none;
  border-top: none;
  border-left: solid 1px #eee;
}
.analyse-main-rapport.rapport-competentierapport .regel-blok.indic-bar div {
  padding: 0;
  height: inherit;
}
.analyse-main-rapport.rapport-competentierapport .compblok .regel-blok .indicator-top {
  background-color: white;
  border-left: solid 1px #eee;
  border-bottom: none;
  border-right: solid 1px #eee;
  border-top: none;
}
.analyse-main-rapport.rapport-competentierapport .compblok .regel-blok div {
  border-top: none;
}

.analyse-main-rapport.rapport-cijferrapport table.rapport {
  width: 100%;
}
.analyse-main-rapport.rapport-cijferrapport table.rapport .rapport_popup:not(.leeg) {
  cursor: pointer;
}
.analyse-main-rapport.rapport-cijferrapport table.rapport .rapport_popup.selected {
  background-color: #042f85;
  color: white;
}
.analyse-main-rapport.rapport-cijferrapport table.rapport .rapport_popup:not(.leeg):not(.selected):hover,
.analyse-main-rapport.rapport-cijferrapport table.rapport .setmark:hover {
  background-color: var(--theme-accent-bg-color);
  color: var(--theme-fg-color);
}
.analyse-main-rapport.rapport-cijferrapport table.rapport td {
  padding: 10px 5px 10px 10px;
  padding-left: 10px;
  border-top: 1px solid var(--theme-border-color);
  border-bottom: 1px solid var(--theme-border-color);
}
.analyse-main-rapport.rapport-cijferrapport table.rapport td:first-child,
.analyse-main-rapport.rapport-cijferrapport table.rapport th:first-child {
  padding-left: 20px;
}
.analyse-main-rapport.rapport-cijferrapport table.rapport td.indicator {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 0;
  font-weight: normal;
}
.analyse-main-rapport.rapport-cijferrapport table.rapport td.categorie {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 0;
  font-weight: bold;
  font-size: 18px;
}
.analyse-main-rapport.rapport-cijferrapport table.rapport th.marked {
  background-color: var(--theme-accent3-bg-color);
}
.analyse-main-rapport.rapport-cijferrapport table.rapport td.marked {
  background-color: var(--theme-accent3-bg-color);
}
.analyse-main-rapport.rapport-cijferrapport table.rapport td.cijfer {
  text-align: right;
  padding-right: 10px;
  border-left: solid 1px #eee;
  border-right: solid 1px #eee;
}
.analyse-main-rapport.rapport-cijferrapport table.rapport td.cijfer .transparent * {
  color: transparent;
}
.analyse-main-rapport.rapport-cijferrapport table.rapport td.cijfer.categorie {
  text-align: center;
}
.analyse-main-rapport.rapport-cijferrapport table.rapport .setmark {
  font-weight: bold;
  cursor: pointer;
  width: 80px !important;
  text-align: center;
  padding: 5px;
  border-top: solid 1px #eee;
  border-left: solid 1px #eee;
  border-right: solid 1px #eee;
}
.analyse-main-rapport.rapport-cijferrapport .opmerking-box {
  width: 100%;
  padding: 20px 20px 40px 20px;
}
.analyse-main-rapport.rapport-cijferrapport .opmerking-box textarea {
  width: 100%;
  margin-bottom: 10px;
}

.analyse-main-rapport.rapport-plusdocument img {
  max-width: 100%;
}
.analyse-main-rapport.rapport-plusdocument section h2 {
  margin: 0;
  padding: 20px;
  font-size: 20px;
  font-weight: normal;
  color: var(--theme-fg-color);
  border-bottom: 1px solid #e5e5e5;
}
.analyse-main-rapport.rapport-plusdocument section article {
  display: flex;
  border-bottom: 1px solid #e5e5e5;
  padding: 10px 20px;
}
.analyse-main-rapport.rapport-plusdocument section article > img {
  vertical-align: top;
  width: 60px;
  height: 60px;
  margin-right: 20px;
}
.analyse-main-rapport.rapport-plusdocument section article > div {
  flex: 1;
}
.analyse-main-rapport.rapport-plusdocument section article > div > h3 {
  margin: 0 0 10px 0;
}
.analyse-main-rapport.rapport-plusdocument section article > div > span {
  color: #888;
}
.analyse-main-rapport.rapport-plusdocument section article > aside {
  display: inline-block;
  text-align: center;
  line-height: 25px;
}
.analyse-main-rapport.rapport-plusdocument section article > aside > label {
  display: block;
  text-transform: uppercase;
  color: #888;
}
.analyse-main-rapport.rapport-plusdocument section article > aside.geplaatst {
  width: 110px;
}
.analyse-main-rapport.rapport-plusdocument section article > aside.pluspunten {
  width: 120px;
}
.analyse-main-rapport.rapport-plusdocument section article > aside.pluspunten span {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  width: 40px;
  border-radius: 10px;
  border: 1px solid rgb(169, 230, 105);
  background-color: rgb(229, 248, 209);
  color: black;
}

.popup-cijferrapport-indicator {
  position: absolute;
}
.popup-cijferrapport-indicator > header h1 {
  margin-bottom: 5px;
  margin-top: 5px;
  font-size: 16px;
}
.popup-cijferrapport-indicator > main textarea {
  width: 100%;
  margin-bottom: 10px;
}
.popup-cijferrapport-indicator > main table.uitwerkingen {
  margin-top: 10px;
}
.popup-cijferrapport-indicator > main table.uitwerkingen thead tr th {
  line-height: 24px;
  font-size: 12px;
  color: #999;
  background-color: white;
  text-transform: uppercase;
  border: 1px solid var(--theme-border-color);
  text-align: center;
}
.popup-cijferrapport-indicator > main table.uitwerkingen thead tr th:first-child {
  border-left: none;
  text-align: left;
}
.popup-cijferrapport-indicator > main table.uitwerkingen thead tr th:last-child {
  border-right: none;
}
.popup-cijferrapport-indicator > main table.uitwerkingen tr td {
  text-align: center;
  border-left: 1px solid var(--theme-border-color);
  border-right: 1px solid var(--theme-border-color);
}
.popup-cijferrapport-indicator > main table.uitwerkingen tr td:first-child {
  border-left: none;
  text-align: left;
}
.popup-cijferrapport-indicator > main table.uitwerkingen tr td:last-child {
  border-right: none;
}

form.ontwikkelplan-nieuwe-melding {
  width: 400px;
  padding: 20px;
}
form.ontwikkelplan-nieuwe-melding .regel {
  margin-bottom: 20px;
}
form.ontwikkelplan-nieuwe-melding select {
  color: var(--theme-fg-color);
  padding: 2px 10px;
  font-size: 13px;
}
form.ontwikkelplan-nieuwe-melding select option {
  padding: 2px 10px;
}
form.ontwikkelplan-nieuwe-melding input.text {
  width: 360px;
  background-color: var(--theme-accent-bg-color);
  color: var(--theme-fg-color);
  padding: 5px;
  border-radius: 0;
  font-size: 13px;
  border: 1px solid transparent;
}

.pop_popup,
.toegang_blok {
  width: 350px;
}
.pop_popup div.regel,
.toegang_blok div.regel {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid var(--theme-border-color);
  padding: 10px 20px;
}
.pop_popup div.regel.noborder,
.toegang_blok div.regel.noborder {
  border: none;
}
.pop_popup div.regel.nopadding,
.toegang_blok div.regel.nopadding {
  padding: 0;
}
.pop_popup div.regel.header,
.toegang_blok div.regel.header {
  padding: 20px;
  font-size: 13px;
  margin-bottom: 10px;
  height: 40px;
  border-bottom: none;
}
.pop_popup div.regel.header h1,
.toegang_blok div.regel.header h1 {
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: bold;
  color: #222;
}
.pop_popup div.regel.header a,
.toegang_blok div.regel.header a {
  margin-top: -10px;
  margin-right: -10px;
}
.pop_popup div.regel span,
.toegang_blok div.regel span {
  display: inline-block;
  height: inherit;
  overflow: hidden;
  color: var(--theme-fg-color);
  margin: 0;
}
.pop_popup div.regel span.naam,
.toegang_blok div.regel span.naam {
  width: 160px;
  padding: 0px;
}
.pop_popup div.regel span.check,
.toegang_blok div.regel span.check {
  width: 70px;
  text-align: center;
}

article.ontwikkelplan-melding > header {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 180px;
  margin: 0;
  padding: 15px 20px;
  background-color: #878787;
  color: white;
  /*
  a {
  	color: white;

  	&:hover {
  		color: #ccc;
  	}
  }
  */
}
article.ontwikkelplan-melding > header .sluitkruisje {
  font-size: 24px;
  color: white;
}
article.ontwikkelplan-melding > header h2 {
  margin: 0;
  font-size: 15px;
}
article.ontwikkelplan-melding > header h1 {
  margin: 0;
  padding: 0;
  color: white;
  font-size: 24px;
}
article.ontwikkelplan-melding > header > div {
  display: flex;
}
article.ontwikkelplan-melding > header > div .button {
  --fg-color: white;
  --bg-color: #6c6c6c;
}
article.ontwikkelplan-melding > header > div .button.white {
  --bg-color: rgba(256, 256, 256, 0.85);
  --fg-color: #222;
}
article.ontwikkelplan-melding > header > div .button.bespreek-button {
  margin-left: auto;
}
article.ontwikkelplan-melding > header > div .button.bespreek-button i {
  color: #aaa;
}
article.ontwikkelplan-melding > header > div .button.bespreek-button.bespreken i {
  color: red;
}
article.ontwikkelplan-melding > header > div .button-group .button + .button {
  border-left: 1px solid rgba(0, 0, 0, 0.25);
  text-align: center;
  font-size: 16px;
  --fg-color: var(--theme-link-color);
}
article.ontwikkelplan-melding > main {
  background-color: white;
}
article.ontwikkelplan-melding > main section {
  padding: 20px;
}
article.ontwikkelplan-melding > main section + section {
  border-top: 1px solid var(--theme-grey-line-color);
}
article.ontwikkelplan-melding > main section h2 {
  font-size: 16px;
  font-weight: normal;
  margin-top: 10px;
  margin-bottom: 10px;
}
article.ontwikkelplan-melding > main section textarea {
  width: 100%;
  height: 90px;
  line-height: 150%;
  margin-bottom: 10px;
}
article.ontwikkelplan-melding > main section.aanleiding p {
  margin: 0;
}
article.ontwikkelplan-melding > main section.bijlagenbox {
  margin: 0;
}
article.ontwikkelplan-melding > main section.ontwikkelplan-melding-activiteiten > header {
  display: flex;
  justify-content: space-between;
}
article.ontwikkelplan-melding > main section.ontwikkelplan-melding-activiteiten > header > * {
  flex: 1;
  margin: 0;
}
article.ontwikkelplan-melding > main section.ontwikkelplan-melding-activiteiten > header > *:last-child {
  text-align: right;
}
article.ontwikkelplan-melding > main section.ontwikkelplan-melding-activiteiten > header .toggle-afgerond {
  text-transform: uppercase;
}
article.ontwikkelplan-melding > main section.ontwikkelplan-melding-activiteiten > main {
  display: grid;
  grid-template-columns: 40px auto 90px 90px 50px;
  margin-top: 20px;
}
article.ontwikkelplan-melding > main section.ontwikkelplan-melding-activiteiten > main.met-border {
  border-top: 1px solid var(--theme-border-color);
}
article.ontwikkelplan-melding > main section.ontwikkelplan-melding-activiteiten > main > .melding-activiteit {
  display: contents;
  height: 50px;
}
article.ontwikkelplan-melding > main section.ontwikkelplan-melding-activiteiten > main > .melding-activiteit > span {
  padding: 0 2px;
  font-size: 1rem;
  line-height: 30px;
}
article.ontwikkelplan-melding > main section.ontwikkelplan-melding-activiteiten > main > .melding-activiteit > span a {
  color: var(--theme-fg-color);
}
article.ontwikkelplan-melding > main section.ontwikkelplan-melding-activiteiten > main > .melding-activiteit > span.link {
  text-align: center;
}
article.ontwikkelplan-melding > main section.ontwikkelplan-melding-activiteiten > main > .melding-activiteit > span.link i {
  font-size: 1em;
}
article.ontwikkelplan-melding > main section.ontwikkelplan-melding-activiteiten > main > .melding-activiteit > span.link .dimmed {
  opacity: 0.4;
}
article.ontwikkelplan-melding > main section.ontwikkelplan-melding-activiteiten > main > .melding-activiteit > span.titel {
  line-height: 20px;
  margin: 2px;
  padding: 2px;
}
article.ontwikkelplan-melding > main section.ontwikkelplan-melding-activiteiten > main > .melding-activiteit > span.titel textarea {
  background-color: inherit;
}
article.ontwikkelplan-melding > main section.ontwikkelplan-melding-activiteiten > main > .melding-activiteit > span.titel.new {
  grid-column: 1/3;
}
article.ontwikkelplan-melding > main section.ontwikkelplan-melding-activiteiten > main > .melding-activiteit > span .act_titel {
  height: 46px;
  line-height: 20px;
  border: none;
  margin: 0px;
  padding: 1px;
  resize: none;
}
article.ontwikkelplan-melding > main section.ontwikkelplan-melding-activiteiten > main > .melding-activiteit > span .act_titel:hover {
  background-color: #eff4ff;
}
article.ontwikkelplan-melding > main section.ontwikkelplan-melding-activiteiten > main > .melding-activiteit > span input {
  width: 100%;
  padding: 0;
  border-color: transparent;
}
article.ontwikkelplan-melding > main section.ontwikkelplan-melding-activiteiten > main > .melding-activiteit > span input.act_titel {
  height: 24px;
}
article.ontwikkelplan-melding > main section.ontwikkelplan-melding-activiteiten > main > .melding-activiteit > span input:hover {
  background-color: #eff4ff;
}
article.ontwikkelplan-melding > main section.ontwikkelplan-melding-activiteiten > main > .melding-activiteit > span.inactief,
article.ontwikkelplan-melding > main section.ontwikkelplan-melding-activiteiten > main > .melding-activiteit > span .inactief {
  color: var(--theme-light-fg-color);
}
article.ontwikkelplan-melding > main section.ontwikkelplan-melding-activiteiten > main > .melding-activiteit > span.inactief a,
article.ontwikkelplan-melding > main section.ontwikkelplan-melding-activiteiten > main > .melding-activiteit > span .inactief a {
  color: var(--theme-light-fg-color);
}
article.ontwikkelplan-melding > main section.ontwikkelplan-melding-activiteiten > main > .melding-activiteit > span.uitvoerders {
  position: relative;
}
article.ontwikkelplan-melding > main section.ontwikkelplan-melding-activiteiten > main > .melding-activiteit > span.uitvoerders .popup-uitvoerders {
  right: 0;
  width: 350px;
  max-width: 100vw;
  color: #222;
}
article.ontwikkelplan-melding > main section.ontwikkelplan-melding-activiteiten > main > .melding-activiteit > span.uitvoerders .popup-uitvoerders .actorlijst {
  display: grid;
  grid-template-columns: 1fr 1fr;
  line-height: 30px;
}
article.ontwikkelplan-melding > main section.ontwikkelplan-melding-activiteiten > main > .melding-activiteit > span.uitvoerders .popup-uitvoerders .actorlijst + .actorlijst {
  border-top: 1px solid var(--theme-border-color);
}
article.ontwikkelplan-melding > main section.ontwikkelplan-melding-activiteiten > main > .melding-activiteit > span.uitvoerders .popup-uitvoerders .actorlijst span {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
article.ontwikkelplan-melding > main section.ontwikkelplan-melding-activiteiten > main .save-activiteit {
  font-size: 18px;
  font-weight: normal;
  color: var(--theme-link-color);
}
article.ontwikkelplan-melding > main section.berichten .edit-fields {
  margin-bottom: 10px;
}
article.ontwikkelplan-melding > main section.berichten .edit-fields > h2 {
  float: left;
}
article.ontwikkelplan-melding > main section.berichten h2 {
  margin: 0;
}
article.ontwikkelplan-melding > main section.berichten > p {
  margin: 0px 0 40px 0;
}
article.ontwikkelplan-melding > main section.berichten > p textarea {
  margin-top: 10px;
}
article.ontwikkelplan-melding > main section.berichten .bericht {
  margin-bottom: 30px;
}
article.ontwikkelplan-melding > main section.berichten .bericht p {
  margin: 0;
}
article.ontwikkelplan-melding > main section.berichten .bericht .reacties .reactie {
  border: 1px solid var(--theme-grey-line-color);
  margin-top: 10px;
  padding: 5px;
}
article.ontwikkelplan-melding > main section.berichten .bericht .reacties .reactie .datumtijd {
  color: var(--theme-light-fg-color);
}
article.ontwikkelplan-melding > main section.berichten .bericht .knoppen {
  margin-top: 10px;
  font-size: 11px;
}
html.mobile article.ontwikkelplan-melding > main section.berichten .bericht .knoppen {
  opacity: 0;
}

article.ontwikkelplan-melding > main section.berichten .bericht:hover .knoppen {
  opacity: 1;
}
article.ontwikkelplan-melding > main section.berichten .bericht .popbericht-reactie-popup {
  position: relative;
  margin-top: 10px;
  border-radius: 4px;
  background-color: white;
  padding: 10px 20px 40px 20px;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
article.ontwikkelplan-melding > main section.berichten .bericht .popbericht-reactie-popup h3 {
  margin: 0;
  font-size: 15px;
  font-weight: bold;
}
article.ontwikkelplan-melding > main section.berichten .bericht .popbericht-reactie-popup textarea {
  width: 100%;
  height: 90px;
}
article.ontwikkelplan-melding > main section.berichten .bericht .popbericht-reactie-popup footer {
  text-align: right;
}

.analyse-main-ontwikkelplan table td, .analyse-main-ontwikkelplan table th,
.ontwikkelplan-activiteitenlijst table td,
.ontwikkelplan-activiteitenlijst table th,
.analyse-main-dashboard table td,
.analyse-main-dashboard table th {
  text-align: left;
}
.analyse-main-ontwikkelplan table td.planning, .analyse-main-ontwikkelplan table td.status, .analyse-main-ontwikkelplan table td.overleg, .analyse-main-ontwikkelplan table th.planning, .analyse-main-ontwikkelplan table th.status, .analyse-main-ontwikkelplan table th.overleg,
.ontwikkelplan-activiteitenlijst table td.planning,
.ontwikkelplan-activiteitenlijst table td.status,
.ontwikkelplan-activiteitenlijst table td.overleg,
.ontwikkelplan-activiteitenlijst table th.planning,
.ontwikkelplan-activiteitenlijst table th.status,
.ontwikkelplan-activiteitenlijst table th.overleg,
.analyse-main-dashboard table td.planning,
.analyse-main-dashboard table td.status,
.analyse-main-dashboard table td.overleg,
.analyse-main-dashboard table th.planning,
.analyse-main-dashboard table th.status,
.analyse-main-dashboard table th.overleg {
  text-align: center;
}
.analyse-main-ontwikkelplan table td.overleg,
.ontwikkelplan-activiteitenlijst table td.overleg,
.analyse-main-dashboard table td.overleg {
  font-size: 20px;
}
.analyse-main-ontwikkelplan table td.naam,
.ontwikkelplan-activiteitenlijst table td.naam,
.analyse-main-dashboard table td.naam {
  white-space: nowrap;
}
.analyse-main-ontwikkelplan table td.planning,
.ontwikkelplan-activiteitenlijst table td.planning,
.analyse-main-dashboard table td.planning {
  white-space: nowrap;
}
.analyse-main-ontwikkelplan table td.status,
.ontwikkelplan-activiteitenlijst table td.status,
.analyse-main-dashboard table td.status {
  text-align: left;
}
.analyse-main-ontwikkelplan table td.status i,
.ontwikkelplan-activiteitenlijst table td.status i,
.analyse-main-dashboard table td.status i {
  color: red;
}

@media only screen and (max-width: 575.99px) {
  .analyse-main-ontwikkelplan table th {
    overflow-x: hidden;
    text-overflow: ellipsis;
  }
  .analyse-main-ontwikkelplan table td.link .button {
    padding: 0 10px;
  }
}

.ontwikkelplan-activiteitenlijst table.activiteiten tbody tr {
  border-bottom: 1px solid var(--theme-border-color);
}
.ontwikkelplan-activiteitenlijst table.activiteiten tbody tr.greyedout td {
  color: #ccc;
}

.domein_container.leerling tr.uitwerking {
  cursor: pointer;
}
.domein_container.domein {
  width: 100%;
}
.domein_container.domein > header {
  height: 275px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.domein_container.domein > header .button {
  float: right;
  margin-right: 20px;
  margin-top: 20px;
}
.domein_container.domein > main {
  padding: 0 0 20px 0;
}
.domein_container.domein > main .domein-balk {
  display: block;
  width: 100%;
  height: 124px;
  padding: 20px 30px;
}
.domein_container.domein > main .omschrijving {
  padding: 20px 30px;
}
.domein_container.domein > main table.domeinen td.vak {
  width: 60px;
  min-width: 60px;
  padding: 5px 10px;
}
.domein_container.domein > main table.domeinen td.vak img {
  width: 40px;
  height: 40px;
  border-radius: 5px;
}
.domein_container.domein h1 {
  font-size: 24px;
  margin-top: 10px;
  color: white;
}
.domein_container.domein h2 {
  font-size: 18px;
  color: white;
  margin-top: 20px;
}
.domein_container .overzicht {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto;
  gap: 10px;
  justify-items: center;
  padding: 10px;
}
@media only screen and (max-width: 575.99px) {
  .domein_container .overzicht {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.domein_container .overzicht div.domeinblok {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.domein_container .overzicht div.domeinblok:hover {
  opacity: 0.8;
  cursor: pointer;
}
.domein_container .overzicht div.domeinblok header {
  height: 50%;
  display: grid;
}
.domein_container .overzicht div.domeinblok header img {
  width: 100%;
  height: 100%;
}
.domein_container .overzicht div.domeinblok main {
  height: 50%;
  padding: 15px 20px 10px 20px;
  color: white;
}
.domein_container .overzicht div.domeinblok main div.status {
  background-color: transparent;
  height: 50px;
}
.domein_container .overzicht div.domeinblok main div.status div {
  height: 14px;
  padding: 0;
  line-height: 14px;
  vertical-align: middle;
  font-size: 11px;
}
.domein_container .overzicht div.domeinblok main div.status div span.balk {
  display: inline-block;
  height: 6px;
  padding: 0;
}
.domein_container .overzicht div.domeinblok main div.status div span.balk.todo {
  background-color: #ff5b1b;
}
.domein_container .overzicht div.domeinblok main div.status div span.balk.ingeleverd {
  background-color: #ffee00;
}
.domein_container .overzicht div.domeinblok main div.status div span.balk.afgerond {
  background-color: #74f137;
}
.domein_container .overzicht div.domeinblok main h1, .domein_container .overzicht div.domeinblok main h2 {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: white;
}
.domein_container .overzicht div.domeinblok main h1 {
  font-size: 17px;
}
.domein_container .overzicht div.domeinblok main h2 {
  font-size: 13px;
}

@media only screen and (max-width: 575.99px) {
  .analyse-main-beoordelingen table.analyse-beoordelingen th.afrond, .analyse-main-beoordelingen table.analyse-beoordelingen td.afrond,
  .analyse-main-beoordelingen table.analyse-beoordelingen th.beoordeling, .analyse-main-beoordelingen table.analyse-beoordelingen td.beoordeling {
    display: none;
  }
}

.analyse-eduv-results {
  display: grid;
  grid-template-columns: repeat(12, auto);
  padding: 0 10px;
}
.analyse-eduv-results.with-leerling-naam {
  grid-template-columns: repeat(13, auto);
}
.analyse-eduv-results > .analyse-eduv-assessment {
  display: contents;
}
.analyse-eduv-results > .analyse-eduv-assessment > b {
  background-color: #eee;
  line-height: 20px;
}
.analyse-eduv-results > .analyse-eduv-assessment > span {
  line-height: 30px;
}
.analyse-eduv-results > .analyse-eduv-assessment abbr {
  text-decoration: underline dashed blue 1px;
}

.page-tab-analyse-kwalificaties {
  --page-submenu-height: 100px;
}
.page-tab-analyse-kwalificaties:has(+ .page-tab) {
  display: none;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificaties {
  padding: 20px;
  background-color: var(--theme-accent3-bg-color);
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificaties .kwalificatie-categorieen-container {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media only screen and (max-width: 767.99px) {
  .page-tab-analyse-kwalificaties .analyse-main-kwalificaties .kwalificatie-categorieen-container {
    grid-template-columns: minmax(0, 1fr);
  }
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificaties .kwalificatie-categorieen-container .kwalificatie-categorie-widget {
  display: inline-block;
  background-color: var(--theme-bg-color);
  border-radius: 5px;
  border: 1px solid var(--theme-grey-line-color);
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificaties .kwalificatie-categorieen-container .kwalificatie-categorie-widget > header {
  display: flex;
  gap: 20px;
  height: 100px;
  line-height: 99px;
  padding: 0 20px;
  align-items: center;
  border-bottom: 1px solid var(--theme-grey-line-color);
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificaties .kwalificatie-categorieen-container .kwalificatie-categorie-widget > header > img {
  height: 70px;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificaties .kwalificatie-categorieen-container .kwalificatie-categorie-widget > header > h2 {
  font-weight: normal;
  font-size: 18px;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificaties .kwalificatie-categorieen-container .kwalificatie-categorie-widget > header > i {
  margin-left: auto;
  font-size: 20px;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificaties .kwalificatie-categorieen-container .kwalificatie-categorie-widget > main figure {
  margin: 0;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificaties .kwalificatie-categorieen-container .kwalificatie-categorie-widget > main table {
  margin-top: 10px;
  border-top: 1px solid var(--theme-grey-line-color);
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > header {
  position: relative;
  display: flex;
  gap: 20px;
  line-height: 100px;
  padding: 0 20px;
  align-items: center;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > header > img {
  height: 70px;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > header > h2 {
  font-weight: bold;
  font-size: 24px;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 640fr) minmax(0, 310fr);
  padding: 0 20px 20px 20px;
}
@media only screen and (max-width: 767.99px) {
  .page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main {
    grid-template-columns: minmax(0, 1fr);
  }
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main > div {
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main > div:first-child {
  --header-height: 80px;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main > div:last-child {
  --header-height: 60px;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main section {
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main section > header {
  display: flex;
  gap: 10px;
  line-height: var(--header-height);
  padding: 0 20px;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main section > header h2 {
  font-size: 18px;
  font-weight: normal;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main section > header h2 + * {
  margin-left: auto;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main section > header h2 + * > .status-bolletje {
  --size: 16px;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main section > header h2 + * > .status-bolletje + .status-bolletje {
  margin-left: 4px;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main section > main {
  padding: 0 20px 20px 20px;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main section > main > p {
  margin: 0;
  padding: 0;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main section > main .meter {
  --color: var(--theme-skill-badge-color);
  --height: 16px;
  margin-top: 20px;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main section > main > div:has(> .skill-badge) {
  padding-top: 20px;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main section > main .skill-trend {
  display: flex;
  gap: 10px;
  max-width: 100%;
  cursor: pointer;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main section > main .skill-trend:hover > :last-child {
  text-decoration: underline;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main section > main .skill-trend > :first-child {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 6ch;
  line-height: 25px;
  align-items: center;
  justify-items: center;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main section > main .skill-trend > :first-child > :first-child {
  font-size: 18px;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main section > main .skill-trend > :first-child > :last-child {
  color: var(--theme-light-fg-color);
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main section > main .skill-trend > :last-child {
  flex: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
  line-height: 49px;
  font-size: 14px;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main section > main .skill-trend:not(:last-child) > :last-child {
  border-bottom: 1px solid var(--theme-grey-line-color);
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main section.kwalificatie-evaluatie-lijst > main {
  max-height: 570px;
  overflow: auto;
  padding: 0;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main section.kwalificatie-commentaar-lijst > main {
  max-height: 570px;
  overflow-y: auto;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main section.kwalificatie-commentaar-lijst > main .skill-comment {
  margin: 10px 0;
  padding: 5px;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main section.kwalificatie-commentaar-lijst > main .skill-comment > header {
  display: flex;
  gap: 5px;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main section.kwalificatie-commentaar-lijst > main .skill-comment > header .what {
  font-style: italic;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main section.kwalificatie-commentaar-lijst > main .skill-comment > main {
  padding: 5px 0 0 0;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main section.kwalificatie-badges > main .skill-badge {
  margin-right: 4px;
  margin-bottom: 4px;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main section.kwalificatie-cursusoverzicht header {
  line-height: 80px;
  color: darkblue;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main section.kwalificatie-cursusoverzicht header > i {
  font-size: 25px;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main section.kwalificatie-cursusoverzicht header > a {
  color: inherit;
}
.page-tab-analyse-kwalificaties .analyse-main-kwalificatie-categorie > main figure {
  margin: 0;
}

.presentatie-kwalificatie-categorieen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  aspect-ratio: 2.85;
  overflow-y: auto;
  padding: 6px;
}
@media only screen and (max-width: 767.99px) {
  .presentatie-kwalificatie-categorieen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    aspect-ratio: 2;
  }
}
@media only screen and (max-width: 575.99px) {
  .presentatie-kwalificatie-categorieen {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    aspect-ratio: 1;
  }
}
.presentatie-kwalificatie-categorieen section {
  --footer-height: 20px;
  display: inline-block;
  aspect-ratio: 1;
  margin: 6px;
  padding-bottom: 10px;
  background-color: #f8f8f8;
}
.presentatie-kwalificatie-categorieen section.clickable {
  cursor: pointer;
}
.presentatie-kwalificatie-categorieen section > main figure {
  margin: 0;
  aspect-ratio: 1;
  padding-bottom: var(--footer-height);
  margin-bottom: calc(var(--footer-height) * -1);
}
.presentatie-kwalificatie-categorieen section > footer {
  display: flex;
  justify-content: center;
  line-height: 30px;
  padding: 0 15px;
}
.presentatie-kwalificatie-categorieen section > footer > span {
  max-width: 100%;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}

figure[data-highcharts-chart] .highcharts-label .kwalificatie-category-label {
  display: inline-flex;
  align-items: center;
}
figure[data-highcharts-chart] .highcharts-label .kwalificatie-category-label i {
  margin: 0 4px 0 0;
}

.skill-badge {
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: inherit;
  vertical-align: middle;
  font-size: 20px;
}
.skill-badge > img {
  display: inline-block;
  vertical-align: top;
  width: 21px;
  height: 21px;
}
.skill-badge.skill-badge-on > img.skill-badge-off {
  display: none;
}
.skill-badge.skill-badge-off > img.skill-badge-on {
  display: none;
}

.page-menu.analyse-menu {
  flex: 1;
  display: flex;
}
.page-menu.analyse-menu > * {
  flex: 1;
  font-size: 18px;
  text-transform: uppercase;
  text-align: left;
}
.page-menu.analyse-menu > *.close {
  flex: 0 1 40px;
}
body:not(.docent-pagina) .page-menu.analyse-menu > *.close {
  display: none;
}

.page-menu.analyse-menu > *.settings {
  text-align: right;
  font-size: 28px;
}
.page-menu.analyse-menu ul.select-pagina-menu {
  width: 180px;
}
.page-menu.analyse-menu ul.select-pagina-menu li {
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
}
.page-menu.analyse-menu ul.select-pagina-menu li a {
  font-size: 14px;
}

#periodeselect-menu {
  width: 165px;
  height: 210px;
  font-size: 13px;
  margin-left: -80px;
}

#vakselect-menu {
  width: 200px;
  font-size: 13px;
  margin-left: -60px;
}

#catselect-menu {
  width: 268px;
  font-size: 13px;
  margin-left: -60px;
}

.small-tooltip {
  width: 200px;
  height: auto;
  background-color: orange;
}

.analyse-main > h1 {
  line-height: 60px;
  margin: 0;
  padding: 0px 20px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  color: var(--theme-fg-color);
  background-color: white;
  font-size: 22px;
  font-weight: bold;
}
.analyse-main > h1 > a {
  position: absolute;
  right: 1em;
  font-size: 18px;
}
.analyse-main.dashboard > h1 {
  line-height: 75px;
}
.analyse-main .analyse-blok {
  width: 100%;
  min-height: 100px;
  padding: 20px 20px;
  border-top: 1px solid var(--theme-border-color);
  background-color: var(--theme-accent-bg-color);
}
.analyse-main .analyse-blok .vraag {
  padding: 0 5px;
  line-height: 35px;
}
.analyse-main .analyse-blok .vraag .as-white-button {
  display: inline-block;
  position: relative;
  height: 25px;
  line-height: 25px;
  padding: 0 10px;
  border-radius: 5px;
  margin-right: 5px;
  text-transform: lowercase;
  background-color: white;
  color: var(--theme-fg-color);
}
.analyse-main .analyse-blok .vraag.selected .as-white-button {
  background-color: var(--theme-link-active-bg-color);
  color: var(--theme-link-active-fg-color);
}
.analyse-main .message {
  width: 100%;
  text-align: center;
  padding: 20px;
  font-size: 17px;
  margin-bottom: 20px;
  border-top: 1px solid var(--theme-border-color);
}

tr.row {
  height: 55px;
  border-bottom: 1px solid var(--theme-border-color);
}

.page-submenu.page-submenu-analyse {
  display: flex;
}
.page-submenu.page-submenu-analyse .links {
  flex: 1;
  display: flex;
  align-items: center;
  text-align: left;
  font-size: 14px;
}
.page-submenu.page-submenu-analyse .links .button {
  --height: 30px;
}
.page-submenu.page-submenu-analyse .links a.pepicon3 {
  font-size: 16px;
  margin-left: 10px;
}
.page-submenu.page-submenu-analyse .links .close-analyse {
  font-size: 22px;
}
.page-submenu.page-submenu-analyse .middle {
  flex: 10;
  display: flex;
  align-items: center;
}
.page-submenu.page-submenu-analyse .rechts {
  white-space: nowrap;
}
.page-submenu.page-submenu-analyse .rechts a, .page-submenu.page-submenu-analyse .rechts label, .page-submenu.page-submenu-analyse .rechts span {
  display: inline-block;
  height: 22px;
  line-height: 22px;
  padding: 0px 15px;
  border-radius: 10px;
}
.page-submenu.page-submenu-analyse .rechts a input, .page-submenu.page-submenu-analyse .rechts label input, .page-submenu.page-submenu-analyse .rechts span input {
  height: 12px;
  margin-top: 0;
  color: var(--theme-link-color);
}
.page-submenu.page-submenu-analyse .rechts label {
  cursor: pointer;
  padding: 0px 15px 0 10px;
}
@media only screen and (max-width: 575.99px) {
  .page-submenu.page-submenu-analyse .menu-collapse-container {
    position: relative;
    justify-content: right;
    margin: 0 20px 0 auto;
  }
  .page-submenu.page-submenu-analyse .menu-collapse-container::before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-weight: 400;
    font-family: "Font Awesome 6 Pro";
    content: "\e0ad";
    display: grid;
    background-color: var(--theme-accent-bg-color);
    border-radius: 100%;
    width: 35px;
    height: 35px;
    align-content: center;
    justify-content: center;
    font-size: 16px;
  }
  .page-submenu.page-submenu-analyse .menu-collapse-container:not(.open) .menu-collapse {
    display: none;
  }
  .page-submenu.page-submenu-analyse .menu-collapse-container .menu-collapse {
    position: absolute;
    z-index: 1;
    right: 0;
    display: block;
    height: unset;
    padding: 0;
    border-radius: 4px;
    background-color: white;
    box-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
  }
  .page-submenu.page-submenu-analyse .menu-collapse-container .menu-collapse > * {
    display: block;
    line-height: 40px;
    height: 40px;
    border-radius: 0;
  }
}
.page-submenu.page-submenu-analyse .menu-collapse-container .analyse-filter {
  position: relative;
}
.page-submenu.page-submenu-analyse .menu-collapse-container .analyse-filter .popup-menu {
  right: 0;
}

.progress-resultaat {
  display: flex;
  align-items: center;
  justify-content: right;
  font-size: 18px;
}
.progress-resultaat .perc {
  display: inline-block;
  line-height: 30px;
  margin-right: 20px;
  color: #3ba700;
  font-size: 12px;
}
.progress-resultaat .progress-bar {
  position: relative;
  display: inline-block;
  width: calc(100% - 40px);
  height: 12px;
  border-radius: 12px;
  background-color: var(--theme-accent2-bg-color);
}
.progress-resultaat .progress-bar.groot {
  height: 16px;
  border-radius: 16px;
}
.progress-resultaat .progress-bar > span {
  background-color: #3ba700;
  border-radius: inherit;
  display: block;
  text-indent: -9999px;
  height: inherit;
}

.werklog .werklog-geen-berichten {
  text-align: center;
  margin-top: 30px;
}
.werklog .edit-werklog-bericht {
  padding: 0 20px 0 120px;
  background-color: var(--theme-accent3-bg-color);
}
@media only screen and (max-width: 575.99px) {
  .werklog .edit-werklog-bericht {
    padding-left: 20px;
  }
}
.werklog .edit-werklog-bericht .emoji-bar {
  height: 50px;
  align-content: center;
}
.werklog .edit-werklog-bericht textarea {
  width: 100%;
  min-height: 100px;
  height: 100px;
  resize: vertical;
  background-color: white;
}
.werklog .edit-werklog-bericht .buttonbar {
  position: relative;
  height: 60px;
  line-height: 60px;
  display: flex;
}
.werklog .edit-werklog-bericht .buttonbar > * {
  flex: 1;
}
.werklog .edit-werklog-bericht .buttonbar > :last-child {
  text-align: right;
}
.werklog .edit-werklog-bericht .buttonbar .button {
  --height: 30px;
}
.werklog .edit-werklog-bericht .buttonbar .button-add::before {
  background-color: white;
}
.werklog .edit-werklog-bericht div.aanhangsel.ahbijlage.new {
  margin: 5px 20px;
}
.werklog .edit-werklog-bericht a.blogbijlage {
  margin-right: 5px;
}
.werklog .edit-werklog-bericht .youtube-popup {
  width: 300px;
}
.werklog .edit-werklog-bericht .youtube-popup input {
  width: 100%;
  line-height: 30px;
}

.werklog-berichten .werklog-filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  line-height: 60px;
  padding-right: 20px;
  border-bottom: 1px solid var(--theme-border-color);
}
.werklog-berichten .werklog-filter > .datum {
  flex: 0 1 120px;
  width: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.werklog-berichten .werklog-filter > .datum input {
  width: 90px;
  height: 30px;
  padding: 6px 12px;
}
.werklog-berichten .werklog-filter .button-circle {
  --height: 34px;
}
.werklog-berichten .werklog-filter .popup-menu {
  right: 0;
}
.werklog-berichten .logberichten-grid {
  padding: 20px 0;
  min-height: 280px;
}
@media only screen and (min-width: 576px) {
  .werklog-berichten .logberichten-grid {
    background: linear-gradient(var(--theme-grey-border-color), var(--theme-grey-border-color)) no-repeat 59px/2px 100%, var(--theme-bg-color);
  }
}
.werklog-berichten .logberichten-grid[data-vak_id] .vak {
  display: none;
}
.werklog-berichten .logberichten-grid > article {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  padding: 0 20px 20px 0;
}
@media only screen and (max-width: 575.99px) {
  .werklog-berichten .logberichten-grid > article {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 20px;
  }
}
.werklog-berichten .logberichten-grid > article > aside.blogtype {
  text-align: center;
  color: var(--theme-middlegrey-fg-color);
  font-size: 16px;
}
@media only screen and (max-width: 575.99px) {
  .werklog-berichten .logberichten-grid > article > aside.blogtype {
    display: none;
  }
}
.werklog-berichten .logberichten-grid > article > aside.blogtype > img {
  width: 26px;
  height: 26px;
  border-radius: 13px;
  border: 1px solid #aaa;
}
.werklog-berichten .logberichten-grid > article > aside.blogtype > .werklog-bolletje {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  border: 2px solid var(--theme-grey-border-color);
  background-color: var(--theme-bg-color);
}
.werklog-berichten .logberichten-grid > article > aside.blogtype > .pepicon3 {
  background-color: var(--theme-bg-color);
}
.werklog-berichten .logberichten-grid > article > aside.blogtype > .docentmelding {
  font-size: 15px;
  color: #dd3333;
}
.werklog-berichten .logberichten-grid > article > aside.blogtype > .feedback {
  font-size: 25px;
}
.werklog-berichten .logberichten-grid > article > .bericht .knoppen {
  margin-top: 10px;
}
.werklog-berichten .logberichten-grid > article > .bericht.new .bloghead {
  color: red;
}
.werklog-berichten .logberichten-grid > article .edit_blogtext {
  height: auto;
  text-align: right;
}
.werklog-berichten .logberichten-grid > article .edit_blogtext textarea {
  width: 100%;
  min-height: 130px;
  height: auto;
  line-height: 21px;
  text-align: left;
  padding: 0;
  border-radius: 0;
  border: 1px solid var(--theme-border-color);
  background-color: var(--theme-accent-bg-color);
  color: var(--theme-fg-color);
}
.werklog-berichten .logberichten-grid > article .blogtext {
  line-height: 21px;
  text-align: justify;
}
@media only screen and (max-width: 767.99px) {
  .werklog-berichten .logberichten-grid > article .blogtext {
    word-break: break-all;
  }
}
.werklog-berichten .logberichten-grid > article .blogtext.editable:hover {
  cursor: pointer;
  background-color: var(--theme-accent-bg-color);
}
.werklog-berichten .logberichten-grid > article .blogtext .tekst {
  white-space: pre-line;
}
.werklog-berichten .logberichten-grid > article .blogtext > .blog-inhoud {
  display: inline-block;
  white-space: pre-line;
}
.werklog-berichten .logberichten-grid > article .blogtext a {
  display: inline-block;
  line-height: 21px;
  vertical-align: top;
}
.werklog-berichten .logberichten-grid > article .vak {
  text-transform: uppercase;
  color: var(--theme-light-fg-color);
}
body.docent-pagina .werklog-berichten .logberichten-grid > article .vak .leerling-vak {
  display: none;
}

body.leerling-pagina .werklog-berichten .logberichten-grid > article .vak .docent-vak {
  display: none;
}

.werklog-berichten .logberichten-grid > article .reacties .reactie {
  width: 100%;
  text-align: justify;
  border: 1px solid var(--theme-border-color);
  border-radius: 4px;
  padding: 10px;
  margin: 0;
}
.werklog-berichten .logberichten-grid > article .reacties .reactie.new .auteur, .werklog-berichten .logberichten-grid > article .reacties .reactie.new .datumtijd {
  color: red;
}
.werklog-berichten .logberichten-grid > article .reacties .reactie span.blogtext {
  white-space: pre-line;
}
.werklog-berichten .logberichten-grid > article .reacties .reactie .datumtijd {
  color: var(--theme-light-fg-color);
}
.werklog-berichten .logberichten-grid > article .leerlingen {
  font-style: italic;
  color: var(--theme-light-fg-color);
}
.werklog-berichten .logberichten-grid + .load-more {
  margin: -20px 0 0 120px;
  padding-bottom: 40px;
}
.werklog-berichten .popup-werklog-reactie {
  position: static;
  margin: 10px 10px 0 0;
}
.werklog-berichten .popup-werklog-reactie textarea {
  width: 100%;
}

.page-container-notificaties .page-filter ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.page-container-notificaties .page-filter ul li {
  padding: 15px 10px;
  border-bottom: solid 1px var(--theme-border-color);
  cursor: pointer;
}
.page-container-notificaties .page-filter ul li.active {
  background-color: var(--theme-accent-bg-color);
}

.indicator_beoordeling {
  margin-top: 40px;
}
.indicator_beoordeling div.indicator_titel {
  position: relative;
  font-size: 15px;
  font-weight: normal;
  line-height: 1;
  color: var(--theme-fg-color);
  margin-bottom: 10px;
}
.indicator_beoordeling div.indicator_titel .open-historie i.pepicon3 {
  line-height: inherit;
  vertical-align: middle;
}
.indicator_beoordeling div.cijfer_rij {
  height: 10px;
  line-height: 10px;
}
.indicator_beoordeling div.cijfer_rij div {
  height: inherit;
}
.indicator_beoordeling div.cijfer_rij div.compblokjes div.cell {
  height: inherit;
  padding-top: 0;
  font-size: 11px;
}
.indicator_beoordeling div.indicator {
  height: 40px;
  margin-bottom: 0;
  padding: 1px 0;
}
.indicator_beoordeling div.indicator .rechts > div,
.indicator_beoordeling div.indicator > div {
  display: inline-block;
  height: 30px;
}
.indicator_beoordeling div.indicator div.score {
  width: 440px;
  float: left;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  padding-top: 4px;
  text-align: left;
}
@media only screen and (max-width: 767.99px) {
  .indicator_beoordeling div.indicator div.score {
    width: 162px;
    max-width: 162px;
    overflow: hidden;
  }
}
.indicator_beoordeling div.indicator div.score div.score_waarde {
  display: block;
  float: right;
  width: 124px;
  margin-left: 10px;
  padding-right: 10px;
  padding-top: 4px;
  text-align: right;
  font-size: 14px;
}
.indicator_beoordeling div.indicator div.score div.score_waarde div.cijfer {
  float: right;
  width: 30px;
  height: 20px;
  text-align: center;
  line-height: 140%;
}
.indicator_beoordeling div.indicator div.score div.score_waarde input.indicator {
  width: 50px;
  height: 22px;
  padding: 0 5px;
  border-radius: 3px;
  text-align: center;
  font-size: 13px;
  border-width: 1px;
  border-style: solid;
}
.indicator_beoordeling div.indicator div.score div.score_waarde input.indicator.opleiding {
  border-color: #54a3ff;
}
.indicator_beoordeling div.indicator div.score div.score_waarde input.indicator.student, .indicator_beoordeling div.indicator div.score div.score_waarde input.indicator.leerling {
  border-color: #a1c600;
}
.indicator_beoordeling div.indicator div.score div.score_waarde input.indicator.extern {
  border-color: #9b9b9b;
}
.indicator_beoordeling div.indicator div.sigaar_container {
  width: 140px;
}
.indicator_beoordeling div.indicator div.sigaar_container.feedback {
  width: 86px;
}
.indicator_beoordeling div.indicator div.sigaar_container div.indicator_descriptoren {
  display: none;
}
.indicator_beoordeling div.indicator_commentaar {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  text-align: left;
}
.indicator_beoordeling div.indicator_commentaar .skill-commentaar {
  margin-top: 20px;
}
.indicator_beoordeling div.indicator_commentaar .skill-commentaar textarea {
  width: 100%;
  height: 60px;
}
.indicator_beoordeling div.indicator_commentaar .skill-commentaar .buttons {
  text-align: right;
}

.opdrachtbeoordeling,
.popup-feedback,
#indicator_oordeel_popup #indicator_beoordeling {
  font-size: 12px;
  color: #636363;
}
.opdrachtbeoordeling img,
.popup-feedback img,
#indicator_oordeel_popup #indicator_beoordeling img {
  border-radius: 5px;
}
.opdrachtbeoordeling div.buttons,
.popup-feedback div.buttons,
#indicator_oordeel_popup #indicator_beoordeling div.buttons {
  margin-top: 10px;
  height: 30px;
  text-align: right;
}
.opdrachtbeoordeling td.categorie,
.opdrachtbeoordeling h1.categorie,
.popup-feedback td.categorie,
.popup-feedback h1.categorie,
#indicator_oordeel_popup #indicator_beoordeling td.categorie,
#indicator_oordeel_popup #indicator_beoordeling h1.categorie {
  font-size: 15px;
  color: var(--theme-fg-color);
  margin: 10px 0 20px 0;
  font-weight: bold;
  line-height: 1;
}
.opdrachtbeoordeling div.cijfer_rij,
.opdrachtbeoordeling div.competentie,
.popup-feedback div.cijfer_rij,
.popup-feedback div.competentie,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij,
#indicator_oordeel_popup #indicator_beoordeling div.competentie {
  height: 30px;
  line-height: 30px;
  font-size: 0;
  color: var(--theme-light-fg-color);
}
.opdrachtbeoordeling div.cijfer_rij.uitschuiver::after,
.opdrachtbeoordeling div.competentie.uitschuiver::after,
.popup-feedback div.cijfer_rij.uitschuiver::after,
.popup-feedback div.competentie.uitschuiver::after,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij.uitschuiver::after,
#indicator_oordeel_popup #indicator_beoordeling div.competentie.uitschuiver::after {
  display: none;
  content: "\f078";
  font-family: "Font Awesome 6 Pro";
  font-size: 13px;
  vertical-align: top;
}
.opdrachtbeoordeling div.cijfer_rij.uitschuiver:hover, .opdrachtbeoordeling div.cijfer_rij.uitschuiver.toggle-on,
.opdrachtbeoordeling div.competentie.uitschuiver:hover,
.opdrachtbeoordeling div.competentie.uitschuiver.toggle-on,
.popup-feedback div.cijfer_rij.uitschuiver:hover,
.popup-feedback div.cijfer_rij.uitschuiver.toggle-on,
.popup-feedback div.competentie.uitschuiver:hover,
.popup-feedback div.competentie.uitschuiver.toggle-on,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij.uitschuiver:hover,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij.uitschuiver.toggle-on,
#indicator_oordeel_popup #indicator_beoordeling div.competentie.uitschuiver:hover,
#indicator_oordeel_popup #indicator_beoordeling div.competentie.uitschuiver.toggle-on {
  background-color: #f3f3f3;
  color: var(--theme-fg-color);
}
.opdrachtbeoordeling div.cijfer_rij.uitschuiver:hover::after, .opdrachtbeoordeling div.cijfer_rij.uitschuiver.toggle-on::after,
.opdrachtbeoordeling div.competentie.uitschuiver:hover::after,
.opdrachtbeoordeling div.competentie.uitschuiver.toggle-on::after,
.popup-feedback div.cijfer_rij.uitschuiver:hover::after,
.popup-feedback div.cijfer_rij.uitschuiver.toggle-on::after,
.popup-feedback div.competentie.uitschuiver:hover::after,
.popup-feedback div.competentie.uitschuiver.toggle-on::after,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij.uitschuiver:hover::after,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij.uitschuiver.toggle-on::after,
#indicator_oordeel_popup #indicator_beoordeling div.competentie.uitschuiver:hover::after,
#indicator_oordeel_popup #indicator_beoordeling div.competentie.uitschuiver.toggle-on::after {
  display: inline-block;
}
.opdrachtbeoordeling div.cijfer_rij.uitschuiver.toggle-on::after,
.opdrachtbeoordeling div.competentie.uitschuiver.toggle-on::after,
.popup-feedback div.cijfer_rij.uitschuiver.toggle-on::after,
.popup-feedback div.competentie.uitschuiver.toggle-on::after,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij.uitschuiver.toggle-on::after,
#indicator_oordeel_popup #indicator_beoordeling div.competentie.uitschuiver.toggle-on::after {
  content: "\f077";
}
.opdrachtbeoordeling div.cijfer_rij.uitschuiver + .gekoppelde-beoordelingen,
.opdrachtbeoordeling div.competentie.uitschuiver + .gekoppelde-beoordelingen,
.popup-feedback div.cijfer_rij.uitschuiver + .gekoppelde-beoordelingen,
.popup-feedback div.competentie.uitschuiver + .gekoppelde-beoordelingen,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij.uitschuiver + .gekoppelde-beoordelingen,
#indicator_oordeel_popup #indicator_beoordeling div.competentie.uitschuiver + .gekoppelde-beoordelingen {
  margin-bottom: 5px;
  background-color: #f3f3f3;
  padding: 10px;
}
.opdrachtbeoordeling div.cijfer_rij.uitschuiver + .gekoppelde-beoordelingen .pepicon3,
.opdrachtbeoordeling div.competentie.uitschuiver + .gekoppelde-beoordelingen .pepicon3,
.popup-feedback div.cijfer_rij.uitschuiver + .gekoppelde-beoordelingen .pepicon3,
.popup-feedback div.competentie.uitschuiver + .gekoppelde-beoordelingen .pepicon3,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij.uitschuiver + .gekoppelde-beoordelingen .pepicon3,
#indicator_oordeel_popup #indicator_beoordeling div.competentie.uitschuiver + .gekoppelde-beoordelingen .pepicon3 {
  padding: 0 0.5em;
}
.opdrachtbeoordeling div.cijfer_rij.uitschuiver + .gekoppelde-beoordelingen .comp_bol,
.opdrachtbeoordeling div.competentie.uitschuiver + .gekoppelde-beoordelingen .comp_bol,
.popup-feedback div.cijfer_rij.uitschuiver + .gekoppelde-beoordelingen .comp_bol,
.popup-feedback div.competentie.uitschuiver + .gekoppelde-beoordelingen .comp_bol,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij.uitschuiver + .gekoppelde-beoordelingen .comp_bol,
#indicator_oordeel_popup #indicator_beoordeling div.competentie.uitschuiver + .gekoppelde-beoordelingen .comp_bol {
  cursor: default;
}
.opdrachtbeoordeling div.cijfer_rij div,
.opdrachtbeoordeling div.competentie div,
.popup-feedback div.cijfer_rij div,
.popup-feedback div.competentie div,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij div,
#indicator_oordeel_popup #indicator_beoordeling div.competentie div {
  display: inline-block;
}
.opdrachtbeoordeling div.cijfer_rij div.competentie_titel,
.opdrachtbeoordeling div.competentie div.competentie_titel,
.popup-feedback div.cijfer_rij div.competentie_titel,
.popup-feedback div.competentie div.competentie_titel,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij div.competentie_titel,
#indicator_oordeel_popup #indicator_beoordeling div.competentie div.competentie_titel {
  font-size: 13px;
  width: 430px;
}
@media only screen and (max-width: 767.99px) {
  .opdrachtbeoordeling div.cijfer_rij div.competentie_titel,
  .opdrachtbeoordeling div.competentie div.competentie_titel,
  .popup-feedback div.cijfer_rij div.competentie_titel,
  .popup-feedback div.competentie div.competentie_titel,
  #indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij div.competentie_titel,
  #indicator_oordeel_popup #indicator_beoordeling div.competentie div.competentie_titel {
    width: 150px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.opdrachtbeoordeling div.cijfer_rij div.compblokjes,
.opdrachtbeoordeling div.competentie div.compblokjes,
.popup-feedback div.cijfer_rij div.compblokjes,
.popup-feedback div.competentie div.compblokjes,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij div.compblokjes,
#indicator_oordeel_popup #indicator_beoordeling div.competentie div.compblokjes {
  font-size: 0;
  vertical-align: top;
  width: 160px;
}
.opdrachtbeoordeling div.cijfer_rij div.compblokjes div.cell,
.opdrachtbeoordeling div.competentie div.compblokjes div.cell,
.popup-feedback div.cijfer_rij div.compblokjes div.cell,
.popup-feedback div.competentie div.compblokjes div.cell,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij div.compblokjes div.cell,
#indicator_oordeel_popup #indicator_beoordeling div.competentie div.compblokjes div.cell {
  display: inline-block;
  text-align: center;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.opdrachtbeoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol,
.opdrachtbeoordeling div.competentie div.compblokjes div.cell div.comp_bol,
.popup-feedback div.cijfer_rij div.compblokjes div.cell div.comp_bol,
.popup-feedback div.competentie div.compblokjes div.cell div.comp_bol,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol,
#indicator_oordeel_popup #indicator_beoordeling div.competentie div.compblokjes div.cell div.comp_bol {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  border-radius: 100%;
  border-width: 1px;
  border-style: solid;
}
.opdrachtbeoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol.feedback,
.opdrachtbeoordeling div.competentie div.compblokjes div.cell div.comp_bol.feedback,
.popup-feedback div.cijfer_rij div.compblokjes div.cell div.comp_bol.feedback,
.popup-feedback div.competentie div.compblokjes div.cell div.comp_bol.feedback,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol.feedback,
#indicator_oordeel_popup #indicator_beoordeling div.competentie div.compblokjes div.cell div.comp_bol.feedback {
  width: 12px;
  height: 12px;
}
.opdrachtbeoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol.opleiding,
.opdrachtbeoordeling div.competentie div.compblokjes div.cell div.comp_bol.opleiding,
.popup-feedback div.cijfer_rij div.compblokjes div.cell div.comp_bol.opleiding,
.popup-feedback div.competentie div.compblokjes div.cell div.comp_bol.opleiding,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol.opleiding,
#indicator_oordeel_popup #indicator_beoordeling div.competentie div.compblokjes div.cell div.comp_bol.opleiding {
  border-color: #54a3ff;
}
.opdrachtbeoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol.student, .opdrachtbeoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol.leerling,
.opdrachtbeoordeling div.competentie div.compblokjes div.cell div.comp_bol.student,
.opdrachtbeoordeling div.competentie div.compblokjes div.cell div.comp_bol.leerling,
.popup-feedback div.cijfer_rij div.compblokjes div.cell div.comp_bol.student,
.popup-feedback div.cijfer_rij div.compblokjes div.cell div.comp_bol.leerling,
.popup-feedback div.competentie div.compblokjes div.cell div.comp_bol.student,
.popup-feedback div.competentie div.compblokjes div.cell div.comp_bol.leerling,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol.student,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol.leerling,
#indicator_oordeel_popup #indicator_beoordeling div.competentie div.compblokjes div.cell div.comp_bol.student,
#indicator_oordeel_popup #indicator_beoordeling div.competentie div.compblokjes div.cell div.comp_bol.leerling {
  border-color: #a1c600;
}
.opdrachtbeoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol.extern,
.opdrachtbeoordeling div.competentie div.compblokjes div.cell div.comp_bol.extern,
.popup-feedback div.cijfer_rij div.compblokjes div.cell div.comp_bol.extern,
.popup-feedback div.competentie div.compblokjes div.cell div.comp_bol.extern,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol.extern,
#indicator_oordeel_popup #indicator_beoordeling div.competentie div.compblokjes div.cell div.comp_bol.extern {
  border-color: #9b9b9b;
}
.opdrachtbeoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol.active.opleiding,
.opdrachtbeoordeling div.competentie div.compblokjes div.cell div.comp_bol.active.opleiding,
.popup-feedback div.cijfer_rij div.compblokjes div.cell div.comp_bol.active.opleiding,
.popup-feedback div.competentie div.compblokjes div.cell div.comp_bol.active.opleiding,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol.active.opleiding,
#indicator_oordeel_popup #indicator_beoordeling div.competentie div.compblokjes div.cell div.comp_bol.active.opleiding {
  background-color: #54a3ff;
}
.opdrachtbeoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol.active.student, .opdrachtbeoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol.active.leerling,
.opdrachtbeoordeling div.competentie div.compblokjes div.cell div.comp_bol.active.student,
.opdrachtbeoordeling div.competentie div.compblokjes div.cell div.comp_bol.active.leerling,
.popup-feedback div.cijfer_rij div.compblokjes div.cell div.comp_bol.active.student,
.popup-feedback div.cijfer_rij div.compblokjes div.cell div.comp_bol.active.leerling,
.popup-feedback div.competentie div.compblokjes div.cell div.comp_bol.active.student,
.popup-feedback div.competentie div.compblokjes div.cell div.comp_bol.active.leerling,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol.active.student,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol.active.leerling,
#indicator_oordeel_popup #indicator_beoordeling div.competentie div.compblokjes div.cell div.comp_bol.active.student,
#indicator_oordeel_popup #indicator_beoordeling div.competentie div.compblokjes div.cell div.comp_bol.active.leerling {
  background-color: #a1c600;
}
.opdrachtbeoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol.active.extern,
.opdrachtbeoordeling div.competentie div.compblokjes div.cell div.comp_bol.active.extern,
.popup-feedback div.cijfer_rij div.compblokjes div.cell div.comp_bol.active.extern,
.popup-feedback div.competentie div.compblokjes div.cell div.comp_bol.active.extern,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol.active.extern,
#indicator_oordeel_popup #indicator_beoordeling div.competentie div.compblokjes div.cell div.comp_bol.active.extern {
  background-color: #9b9b9b;
}
.opdrachtbeoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol:not(.feedback):hover,
.opdrachtbeoordeling div.competentie div.compblokjes div.cell div.comp_bol:not(.feedback):hover,
.popup-feedback div.cijfer_rij div.compblokjes div.cell div.comp_bol:not(.feedback):hover,
.popup-feedback div.competentie div.compblokjes div.cell div.comp_bol:not(.feedback):hover,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol:not(.feedback):hover,
#indicator_oordeel_popup #indicator_beoordeling div.competentie div.compblokjes div.cell div.comp_bol:not(.feedback):hover {
  cursor: pointer;
}
.opdrachtbeoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol:not(.feedback):hover:not(.active).opleiding,
.opdrachtbeoordeling div.competentie div.compblokjes div.cell div.comp_bol:not(.feedback):hover:not(.active).opleiding,
.popup-feedback div.cijfer_rij div.compblokjes div.cell div.comp_bol:not(.feedback):hover:not(.active).opleiding,
.popup-feedback div.competentie div.compblokjes div.cell div.comp_bol:not(.feedback):hover:not(.active).opleiding,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol:not(.feedback):hover:not(.active).opleiding,
#indicator_oordeel_popup #indicator_beoordeling div.competentie div.compblokjes div.cell div.comp_bol:not(.feedback):hover:not(.active).opleiding {
  background-color: #edf5ff;
}
.opdrachtbeoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol:not(.feedback):hover:not(.active).student, .opdrachtbeoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol:not(.feedback):hover:not(.active).leerling,
.opdrachtbeoordeling div.competentie div.compblokjes div.cell div.comp_bol:not(.feedback):hover:not(.active).student,
.opdrachtbeoordeling div.competentie div.compblokjes div.cell div.comp_bol:not(.feedback):hover:not(.active).leerling,
.popup-feedback div.cijfer_rij div.compblokjes div.cell div.comp_bol:not(.feedback):hover:not(.active).student,
.popup-feedback div.cijfer_rij div.compblokjes div.cell div.comp_bol:not(.feedback):hover:not(.active).leerling,
.popup-feedback div.competentie div.compblokjes div.cell div.comp_bol:not(.feedback):hover:not(.active).student,
.popup-feedback div.competentie div.compblokjes div.cell div.comp_bol:not(.feedback):hover:not(.active).leerling,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol:not(.feedback):hover:not(.active).student,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol:not(.feedback):hover:not(.active).leerling,
#indicator_oordeel_popup #indicator_beoordeling div.competentie div.compblokjes div.cell div.comp_bol:not(.feedback):hover:not(.active).student,
#indicator_oordeel_popup #indicator_beoordeling div.competentie div.compblokjes div.cell div.comp_bol:not(.feedback):hover:not(.active).leerling {
  background-color: #e1ff60;
}
.opdrachtbeoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol:not(.feedback):hover:not(.active).extern,
.opdrachtbeoordeling div.competentie div.compblokjes div.cell div.comp_bol:not(.feedback):hover:not(.active).extern,
.popup-feedback div.cijfer_rij div.compblokjes div.cell div.comp_bol:not(.feedback):hover:not(.active).extern,
.popup-feedback div.competentie div.compblokjes div.cell div.comp_bol:not(.feedback):hover:not(.active).extern,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol:not(.feedback):hover:not(.active).extern,
#indicator_oordeel_popup #indicator_beoordeling div.competentie div.compblokjes div.cell div.comp_bol:not(.feedback):hover:not(.active).extern {
  background-color: #e8e8e8;
}
.opdrachtbeoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol:not(.feedback):hover.active.opleiding,
.opdrachtbeoordeling div.competentie div.compblokjes div.cell div.comp_bol:not(.feedback):hover.active.opleiding,
.popup-feedback div.cijfer_rij div.compblokjes div.cell div.comp_bol:not(.feedback):hover.active.opleiding,
.popup-feedback div.competentie div.compblokjes div.cell div.comp_bol:not(.feedback):hover.active.opleiding,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol:not(.feedback):hover.active.opleiding,
#indicator_oordeel_popup #indicator_beoordeling div.competentie div.compblokjes div.cell div.comp_bol:not(.feedback):hover.active.opleiding {
  background-color: #2188ff;
}
.opdrachtbeoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol:not(.feedback):hover.active.student, .opdrachtbeoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol:not(.feedback):hover.active.leerling,
.opdrachtbeoordeling div.competentie div.compblokjes div.cell div.comp_bol:not(.feedback):hover.active.student,
.opdrachtbeoordeling div.competentie div.compblokjes div.cell div.comp_bol:not(.feedback):hover.active.leerling,
.popup-feedback div.cijfer_rij div.compblokjes div.cell div.comp_bol:not(.feedback):hover.active.student,
.popup-feedback div.cijfer_rij div.compblokjes div.cell div.comp_bol:not(.feedback):hover.active.leerling,
.popup-feedback div.competentie div.compblokjes div.cell div.comp_bol:not(.feedback):hover.active.student,
.popup-feedback div.competentie div.compblokjes div.cell div.comp_bol:not(.feedback):hover.active.leerling,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol:not(.feedback):hover.active.student,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol:not(.feedback):hover.active.leerling,
#indicator_oordeel_popup #indicator_beoordeling div.competentie div.compblokjes div.cell div.comp_bol:not(.feedback):hover.active.student,
#indicator_oordeel_popup #indicator_beoordeling div.competentie div.compblokjes div.cell div.comp_bol:not(.feedback):hover.active.leerling {
  background-color: #789300;
}
.opdrachtbeoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol:not(.feedback):hover.active.extern,
.opdrachtbeoordeling div.competentie div.compblokjes div.cell div.comp_bol:not(.feedback):hover.active.extern,
.popup-feedback div.cijfer_rij div.compblokjes div.cell div.comp_bol:not(.feedback):hover.active.extern,
.popup-feedback div.competentie div.compblokjes div.cell div.comp_bol:not(.feedback):hover.active.extern,
#indicator_oordeel_popup #indicator_beoordeling div.cijfer_rij div.compblokjes div.cell div.comp_bol:not(.feedback):hover.active.extern,
#indicator_oordeel_popup #indicator_beoordeling div.competentie div.compblokjes div.cell div.comp_bol:not(.feedback):hover.active.extern {
  background-color: #828282;
}
.opdrachtbeoordeling div.opmerkingen,
.popup-feedback div.opmerkingen,
#indicator_oordeel_popup #indicator_beoordeling div.opmerkingen {
  word-wrap: break-word;
  margin-bottom: 20px;
}
.opdrachtbeoordeling div.opmerkingen div.opmerking,
.popup-feedback div.opmerkingen div.opmerking,
#indicator_oordeel_popup #indicator_beoordeling div.opmerkingen div.opmerking {
  font-weight: normal;
  max-width: 400px;
  white-space: pre-line;
}

table.beoordeling,
table.feedback_uitlezen {
  border-collapse: collapse;
  background-color: white;
  empty-cells: show;
  width: 100%;
}
table.beoordeling .competentie.naam,
table.feedback_uitlezen .competentie.naam {
  width: 100%;
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media only screen and (max-width: 767.99px) {
  table.beoordeling .competentie.naam,
  table.feedback_uitlezen .competentie.naam {
    max-width: 150px;
  }
}
table.beoordeling tr:first-child th,
table.feedback_uitlezen tr:first-child th {
  height: 25px;
  border: none;
  overflow: hidden;
  padding-top: 2px;
  padding-bottom: 2px;
  white-space: normal;
  background: white;
}
table.beoordeling tr:first-child th:first-child,
table.feedback_uitlezen tr:first-child th:first-child {
  background: none;
}
table.beoordeling tr.indicator_titel,
table.feedback_uitlezen tr.indicator_titel {
  height: 50px;
}
table.beoordeling tr.indicator_titel td.indicator_titel,
table.feedback_uitlezen tr.indicator_titel td.indicator_titel {
  padding-top: 10px;
  font-size: 14px;
}
table.beoordeling tr.competentie,
table.feedback_uitlezen tr.competentie {
  line-height: 21px;
}
table.beoordeling tr.indicator th,
table.beoordeling tr.indicator td,
table.feedback_uitlezen tr.indicator th,
table.feedback_uitlezen tr.indicator td {
  background: white;
  font-size: 13px;
}
table.beoordeling th,
table.feedback_uitlezen th {
  background: white;
  padding: 0px 0;
  vertical-align: top;
}
table.beoordeling th:first-child,
table.feedback_uitlezen th:first-child {
  border-left: none;
}
table.beoordeling th.beoordelaar:last-child,
table.feedback_uitlezen th.beoordelaar:last-child {
  padding-right: 0;
}
table.beoordeling td.competentie_oordeel:last-child,
table.feedback_uitlezen td.competentie_oordeel:last-child {
  padding-right: 0;
}
table.beoordeling td.categorie,
table.feedback_uitlezen td.categorie {
  font-size: 18px;
}
table.beoordeling td.indicator_titel,
table.beoordeling th.competentie.naam,
table.feedback_uitlezen td.indicator_titel,
table.feedback_uitlezen th.competentie.naam {
  font-size: 12px;
}
table.beoordeling th.score.indicator,
table.feedback_uitlezen th.score.indicator {
  text-transform: uppercase;
}
table.beoordeling td.feedback_sigaar,
table.feedback_uitlezen td.feedback_sigaar {
  padding: 0 5px;
  vertical-align: top;
  width: 100px;
}
table.beoordeling table.beoordeling .cijfer,
table.feedback_uitlezen table.beoordeling .cijfer {
  display: inline-block;
  color: navy;
}
table.beoordeling td.schaal,
table.feedback_uitlezen td.schaal {
  display: inline-block;
  width: 20px;
  padding: 1px 0 0 0;
  font-size: 80%;
  text-align: left;
  color: #ccc;
}
table.beoordeling tr.indicator td.schaal,
table.feedback_uitlezen tr.indicator td.schaal {
  display: inline-block;
  width: 30px;
  padding: 14px 0 0 0;
  font-size: 80%;
  text-align: left;
  color: #ccc;
}
table.beoordeling th.competentie,
table.feedback_uitlezen th.competentie {
  color: var(--theme-light-fg-color);
}
table.beoordeling div.competentie-blokje,
table.feedback_uitlezen div.competentie-blokje {
  width: 16px;
  height: 10px;
  float: left;
  padding-top: 0px;
  line-height: 140%;
  text-align: center;
  border: 1px solid white;
  border-radius: 3px;
  background-color: #e5e5e5;
  color: #e5e5e5;
}
table.beoordeling div.competentie-blokje.active,
table.feedback_uitlezen div.competentie-blokje.active {
  color: white;
}
table.beoordeling div.competentie-blokje.active.opleiding,
table.feedback_uitlezen div.competentie-blokje.active.opleiding {
  background-color: #54a3ff;
}
table.beoordeling div.competentie-blokje.active.student,
table.feedback_uitlezen div.competentie-blokje.active.student {
  background-color: #a1c600;
}
table.beoordeling div.competentie-blokje.active.extern,
table.feedback_uitlezen div.competentie-blokje.active.extern {
  background-color: #9b9b9b;
}
table.beoordeling td.competentie_oordeel,
table.feedback_uitlezen td.competentie_oordeel {
  padding: 0 5px;
  width: 100px;
  font-size: 0;
}
table.beoordeling td.competentie_oordeel div.cell,
table.feedback_uitlezen td.competentie_oordeel div.cell {
  display: inline-block;
  text-align: center;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
table.beoordeling td.competentie_oordeel div.cell div.comp_bol,
table.feedback_uitlezen td.competentie_oordeel div.cell div.comp_bol {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  border-radius: 100%;
  border-width: 1px;
  border-style: solid;
}
table.beoordeling td.competentie_oordeel div.cell div.comp_bol.feedback,
table.feedback_uitlezen td.competentie_oordeel div.cell div.comp_bol.feedback {
  width: 12px;
  height: 12px;
}
table.beoordeling td.competentie_oordeel div.cell div.comp_bol.opleiding,
table.feedback_uitlezen td.competentie_oordeel div.cell div.comp_bol.opleiding {
  border-color: #54a3ff;
}
table.beoordeling td.competentie_oordeel div.cell div.comp_bol.student, table.beoordeling td.competentie_oordeel div.cell div.comp_bol.leerling,
table.feedback_uitlezen td.competentie_oordeel div.cell div.comp_bol.student,
table.feedback_uitlezen td.competentie_oordeel div.cell div.comp_bol.leerling {
  border-color: #a1c600;
}
table.beoordeling td.competentie_oordeel div.cell div.comp_bol.extern,
table.feedback_uitlezen td.competentie_oordeel div.cell div.comp_bol.extern {
  border-color: #9b9b9b;
}
table.beoordeling td.competentie_oordeel div.cell div.comp_bol.active.opleiding,
table.feedback_uitlezen td.competentie_oordeel div.cell div.comp_bol.active.opleiding {
  background-color: #54a3ff;
}
table.beoordeling td.competentie_oordeel div.cell div.comp_bol.active.student, table.beoordeling td.competentie_oordeel div.cell div.comp_bol.active.leerling,
table.feedback_uitlezen td.competentie_oordeel div.cell div.comp_bol.active.student,
table.feedback_uitlezen td.competentie_oordeel div.cell div.comp_bol.active.leerling {
  background-color: #a1c600;
}
table.beoordeling td.competentie_oordeel div.cell div.comp_bol.active.extern,
table.feedback_uitlezen td.competentie_oordeel div.cell div.comp_bol.active.extern {
  background-color: #9b9b9b;
}
table.beoordeling td.competentie_oordeel div.cell div.comp_bol:not(.feedback):hover,
table.feedback_uitlezen td.competentie_oordeel div.cell div.comp_bol:not(.feedback):hover {
  cursor: pointer;
}
table.beoordeling td.competentie_oordeel div.cell div.comp_bol:not(.feedback):hover:not(.active).opleiding,
table.feedback_uitlezen td.competentie_oordeel div.cell div.comp_bol:not(.feedback):hover:not(.active).opleiding {
  background-color: #edf5ff;
}
table.beoordeling td.competentie_oordeel div.cell div.comp_bol:not(.feedback):hover:not(.active).student, table.beoordeling td.competentie_oordeel div.cell div.comp_bol:not(.feedback):hover:not(.active).leerling,
table.feedback_uitlezen td.competentie_oordeel div.cell div.comp_bol:not(.feedback):hover:not(.active).student,
table.feedback_uitlezen td.competentie_oordeel div.cell div.comp_bol:not(.feedback):hover:not(.active).leerling {
  background-color: #e1ff60;
}
table.beoordeling td.competentie_oordeel div.cell div.comp_bol:not(.feedback):hover:not(.active).extern,
table.feedback_uitlezen td.competentie_oordeel div.cell div.comp_bol:not(.feedback):hover:not(.active).extern {
  background-color: #e8e8e8;
}
table.beoordeling td.competentie_oordeel div.cell div.comp_bol:not(.feedback):hover.active.opleiding,
table.feedback_uitlezen td.competentie_oordeel div.cell div.comp_bol:not(.feedback):hover.active.opleiding {
  background-color: #2188ff;
}
table.beoordeling td.competentie_oordeel div.cell div.comp_bol:not(.feedback):hover.active.student, table.beoordeling td.competentie_oordeel div.cell div.comp_bol:not(.feedback):hover.active.leerling,
table.feedback_uitlezen td.competentie_oordeel div.cell div.comp_bol:not(.feedback):hover.active.student,
table.feedback_uitlezen td.competentie_oordeel div.cell div.comp_bol:not(.feedback):hover.active.leerling {
  background-color: #789300;
}
table.beoordeling td.competentie_oordeel div.cell div.comp_bol:not(.feedback):hover.active.extern,
table.feedback_uitlezen td.competentie_oordeel div.cell div.comp_bol:not(.feedback):hover.active.extern {
  background-color: #828282;
}
table.beoordeling th.beoordelaar,
table.feedback_uitlezen th.beoordelaar {
  padding: 5px 20px 0px 0px;
  text-align: left;
  font-size: 13px;
  color: var(--theme-light-fg-color);
  font-weight: normal;
}
table.beoordeling th.comptitel,
table.feedback_uitlezen th.comptitel {
  width: 320px !important;
  font-size: 12px;
}
table.beoordeling td.skill-commentaar-cell,
table.feedback_uitlezen td.skill-commentaar-cell {
  width: 100%;
  max-width: 0;
  white-space: normal;
}
table.beoordeling td.skill-commentaar-cell .skill-commentaar,
table.feedback_uitlezen td.skill-commentaar-cell .skill-commentaar {
  max-width: 100%;
  background-color: #e8efff;
  font-size: 12px;
  padding: 5px;
  font-weight: normal;
}
table.beoordeling .opmerkingen h2,
table.feedback_uitlezen .opmerkingen h2 {
  font-size: 16px;
}
table.beoordeling .opmerkingen .opmerking,
table.feedback_uitlezen .opmerkingen .opmerking {
  white-space: pre-line;
}

div.sigaar_container {
  height: 30px;
  padding: 12px 0;
}
div.sigaar_container div.indicator_sigaar {
  display: block;
  height: 6px;
  border-radius: 3px;
  margin-left: -3px;
  margin-right: 3px;
  background-color: var(--theme-accent2-bg-color);
}
div.sigaar_container div.indicator_sigaar div.filled_sigaar {
  display: block;
  position: relative;
  height: 8px;
  top: -1px;
  border-radius: 4px;
  border: none;
}
div.sigaar_container div.indicator_sigaar div.filled_sigaar.opleiding {
  background-color: #54a3ff;
}
div.sigaar_container div.indicator_sigaar div.filled_sigaar.student, div.sigaar_container div.indicator_sigaar div.filled_sigaar.leerling {
  border-color: #a1c600;
}
div.sigaar_container div.indicator_sigaar div.filled_sigaar.extern {
  background-color: #9b9b9b;
}
div.sigaar_container div.bol_sigaar {
  display: block;
  width: 16px;
  height: 16px;
  position: relative;
  top: -11px;
  border: 1px solid white;
  margin-left: -16px;
  border-radius: 8px;
}
div.sigaar_container div.bol_sigaar.opleiding {
  background-color: #54a3ff;
}
div.sigaar_container div.bol_sigaar.student, div.sigaar_container div.bol_sigaar.leerling {
  background-color: #a1c600;
}
div.sigaar_container div.bol_sigaar.extern {
  background-color: #9b9b9b;
}
div.sigaar_container div.bol_sigaar.feedback {
  width: 14px;
  height: 14px;
  top: -10px;
  margin-left: -14px;
  border-radius: 7px;
}
div.sigaar_container div.cijfer_sigaar {
  display: block;
  width: 46px;
  height: 16px;
  position: relative;
  top: -10px;
  margin-left: -32px;
  font-size: 11px;
  text-align: center;
}
div.sigaar_container div.cijfer_sigaar.opleiding {
  color: #54a3ff;
}
div.sigaar_container div.cijfer_sigaar.student {
  color: #61a131;
}
div.sigaar_container div.cijfer_sigaar.extern {
  color: #9b9b9b;
}
div.sigaar_container div.cijfer_sigaar.feedback {
  font-size: 10px;
}

#indicator_oordeel_popup {
  width: 1000px;
  min-height: 200px;
  position: relative;
  z-index: 1;
  margin-left: -630px;
  margin-top: -150px;
  padding: 20px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
}
#indicator_oordeel_popup .opmerking textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
}

div.popup_historie div.feedback_blok div.indicator_oordeel {
  width: 108px;
  height: 2px;
  position: relative;
  top: 8px;
  background-color: #ccc;
}
div.popup_historie div.feedback_blok div.indicator_oordeel div.bol {
  width: 10px;
  height: 10px;
  position: relative;
  top: -5px;
  border-radius: 10px;
}
div.popup_historie div.feedback_blok div.indicator_oordeel div.bol:nth-child(1) {
  top: -5px;
}
div.popup_historie div.feedback_blok div.indicator_oordeel div.bol:nth-child(2) {
  top: -15px;
}
div.popup_historie div.feedback_blok div.indicator_oordeel div.bol:nth-child(3) {
  top: -25px;
}

div.competentie div.beoordelingen1,
div.legenda div.bol1 {
  background-color: #54a3ff;
}

.panel {
  width: 800px;
  border-radius: 5px;
  background-color: white;
  box-sizing: border-box;
  box-shadow: 0 0 15px -4px rgba(0, 0, 0, 0.5);
}
.panel .panel-header {
  box-sizing: border-box;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 20px 20px 20px 20px;
  overflow: auto;
  width: 100%;
}
.panel .panel-body {
  box-sizing: border-box;
  overflow: auto;
  width: 100%;
  padding: 0 20px 20px;
}
.panel p {
  padding: 0 0px 20px 0px;
}
.panel .panel-footer {
  box-sizing: border-box;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding: 20px;
}
.panel h2 {
  margin: 0px;
  font-size: 24px;
  font-weight: bold;
}
.panel h3 {
  font-size: 20px;
  font-weight: bold;
  margin-top: 20px;
}
.panel h4 {
  font-size: 14px;
  font-weight: bold;
  margin-top: 0;
}
.panel .control {
  display: block;
  overflow: auto;
  width: 97%;
  margin-top: 10px;
}
.panel .control label {
  width: 160px;
  float: left;
  height: 22px;
  font-size: 12px;
}
.panel .control div.text {
  float: left;
  padding: 0;
}
.panel select {
  background-color: white;
  border: 1px solid #eee;
}
.panel.mijn_account .panel-header {
  padding: 30px 20px 10px;
}
.panel.mijn_account h3 {
  margin-top: 10px;
}
.panel.mijn_account .panel-body p {
  margin-bottom: 5px;
}
.panel.mijn_account table {
  margin-top: 10px;
}
.panel.mijn_account table th {
  border-bottom: 1px solid var(--theme-border-color);
  border-top: 1px solid var(--theme-border-color);
  text-transform: uppercase;
  font-size: 12px;
  color: var(--theme-light-fg-color);
}

body.saml-pagina .container {
  width: 920px;
  margin: 0 auto;
}
body.saml-pagina form {
  margin-bottom: 2em;
}
body.saml-pagina form button {
  color: white;
  background-color: blue;
  border-radius: 2px;
  border: none;
  padding: 4px 8px;
  font-size: larger;
  cursor: pointer;
}
body.saml-pagina form button:hover {
  background-color: darkblue;
}
body.saml-pagina table.saml-attributes th {
  text-align: right;
}
body.saml-pagina table.saml-attributes th, body.saml-pagina table.saml-attributes td {
  padding: 0.3em;
}
body.saml-pagina table.saml-attributes td {
  background-color: rgba(0, 0, 0, 0.1);
}

.checkbox3 {
  cursor: pointer;
}

body.wachtwoord-reset .panel {
  margin: 100px auto;
}
body.wachtwoord-reset form.wachtwoord-reset {
  display: inline-block;
  width: auto;
}
body.wachtwoord-reset form.wachtwoord-reset .control {
  width: unset;
}
body.wachtwoord-reset form.wachtwoord-reset .error {
  color: red;
}
body.wachtwoord-reset .wachtwoord-tips {
  margin-top: 3em;
  padding-top: 1em;
  border-top: 2px solid var(--theme-grey-line-color);
}

.password_test + .password-policy-message {
  display: none;
}

.password_test.error + .password-policy-message {
  display: inline-block;
  position: absolute;
  background-color: #fee;
  padding: 10px;
  margin-left: 10px;
  width: 300px;
  box-shadow: 0 0 4px 1px rgba(255, 0, 0, 0.5);
}
.password_test.error + .password-policy-message ul {
  padding-left: 0;
  list-style-position: inside;
  list-style-type: none;
}
.password_test.error + .password-policy-message ul li::before {
  display: inline-block;
  font-family: "Font Awesome 6 Pro";
  width: 1.5em;
  font-size: initial;
  content: "\f00d";
  color: red;
}
.password_test.error + .password-policy-message ul li.ok::before {
  content: "\f00c";
  color: green;
}

.password_test.valid + .password-policy-message {
  display: none;
}
.password_test.valid::after {
  font-family: "Font Awesome 6 Pro";
  content: "\f058";
  color: green;
  display: inline-block;
}

.row .password_test.error + .password-policy-message {
  margin-top: 130px;
  margin-left: 60px;
}

.portfolio-overzicht-container .portfolio-overzicht-toevoegregel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  line-height: 68px;
}
.portfolio-overzicht-container .portfolio-overzicht-toevoegregel > .button-add {
  font-size: 15px;
}
.portfolio-overzicht-container .portfolio-overzicht-toevoegregel > label {
  margin-left: 1em;
  text-align: right;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
.portfolio-overzicht-container .portfolio-overzicht {
  display: flex;
  flex-flow: row wrap;
  gap: 0 20px;
  width: 100%;
  padding: 0 20px;
}
.portfolio-overzicht-container .portfolio-overzicht .portfolio-thumb .info .titel {
  font-size: 14px;
  font-weight: bold;
}
.portfolio-overzicht-container .portfolio-overzicht .portfolio-thumb .info .auteur-naam {
  display: none;
}

@media only screen and (max-width: 575.99px) {
  .dialog.page-container.dialog-portfolio {
    --page-container-height: 100vh;
  }
}
.dialog.page-container.dialog-portfolio > header .button-circle {
  --height: 32px;
  --fg-color: var(--theme-link-color);
  --hover-fg-color: var(--fg-color);
  --hover-bg-color: var(--bg-color);
}
.dialog.page-container.dialog-portfolio .portfolio > aside {
  height: 100%;
  overflow-y: auto;
}
.dialog.page-container.dialog-portfolio .portfolio > main {
  height: calc(var(--page-main-height) - var(--portfolio-header-height));
  max-height: calc(var(--page-main-height) - var(--portfolio-header-height));
  overflow-y: scroll;
}

a.portfolio-thumb {
  color: var(--theme-fg-color);
}

.portfolio-thumb {
  position: relative;
  display: inline-block;
  width: 300px;
  color: var(--theme-fg-color);
}
.portfolio-thumb.portfolio-thumb-type-portfolio {
  width: 100%;
}
@container (width > 600px) {
  .portfolio-thumb.portfolio-thumb-type-portfolio {
    width: calc((100% - 20px) / 2);
  }
}
@container (width > 760px) {
  .portfolio-thumb.portfolio-thumb-type-portfolio {
    width: calc((100% - 40px) / 3);
  }
}
.portfolio-thumb.portfolio-thumb-type-portfolio > .pepicon3-zichtbaar {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  font-size: 21px;
  color: #ccc;
}
.portfolio-thumb.portfolio-thumb-type-portfolio .stats {
  display: none;
}
.portfolio-thumb.portfolio-thumb-type-portfolio img {
  display: block;
  border-radius: 3px;
  aspect-ratio: 1.5;
}
@media only screen and (max-width: 767.99px) {
  .portfolio-thumb.portfolio-thumb-type-portfolio img {
    aspect-ratio: unset;
    height: auto;
  }
}
.portfolio-thumb.portfolio-thumb-type-portfolio .info {
  margin-bottom: 30px;
}
.portfolio-thumb.portfolio-thumb-type-portfolio .info .titel {
  height: 30px;
  line-height: 30px;
}
.portfolio-thumb.portfolio-thumb-type-portfolio .info .auteur-naam {
  line-height: 20px;
}
.portfolio-thumb.portfolio-thumb-type-portfolio .file {
  border-radius: 3px;
}
.portfolio-thumb.portfolio-thumb-type-page > .pepicon3-zichtbaar {
  display: none;
}
.portfolio-thumb.portfolio-thumb-type-page .info .titel {
  font-size: 13px;
  line-height: 1.3;
}
.portfolio-thumb.portfolio-thumb-type-page .info .auteur-naam {
  font-size: 11px;
}
.portfolio-thumb img {
  width: 100%;
  aspect-ratio: 1.5;
  object-fit: cover;
}
html.mouse .portfolio-thumb:not(:hover) .info .titel > i {
  display: none;
}

.portfolio-thumb .info .titel {
  position: relative;
  display: flex;
  white-space: nowrap;
  font-size: 16px;
}
.portfolio-thumb .info .titel > span {
  display: flex;
  max-width: 100%;
  overflow: hidden;
  gap: 5px;
}
.portfolio-thumb .info .titel > span:has(+ i) {
  max-width: calc(100% - 20px);
}
.portfolio-thumb .info .titel > span > span {
  text-overflow: ellipsis;
  overflow-x: hidden;
  max-width: 100%;
}
.portfolio-thumb .info .titel > span > span:has(+ i) {
  max-width: calc(100% - 20px);
}
.portfolio-thumb .info .titel > i {
  margin-left: auto;
  color: red;
  width: 20px;
  text-align: center;
}
.portfolio-thumb .info .auteur-naam {
  font-size: 13px;
}

.portfolio {
  --portfolio-header-height: 90px;
  --portfolio-page-header-height: 55px;
  position: relative;
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  grid-template-rows: var(--portfolio-header-height) auto;
  margin: 0 auto;
  border-radius: 5px;
  background-color: white;
  font-size: 13px;
}
@media only screen and (max-width: 575.99px) {
  .portfolio {
    --portfolio-header-height: 60px;
    grid-template-columns: 60px minmax(0, 1fr);
  }
}
.portfolio > header {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  display: flex;
  line-height: var(--portfolio-header-height);
  padding: 0 20px;
}
@media only screen and (max-width: 575.99px) {
  .portfolio > header {
    max-width: calc(100vw - 60px);
    padding: 0 10px;
  }
  .portfolio > header .toets-rood,
  .portfolio > header .titel {
    font-size: 17px !important;
  }
}
.portfolio > header > .toets-rood {
  margin-right: 10px;
  font-size: 24px;
}
.portfolio > header :not(input).titel {
  display: flex;
  max-width: calc(100% - 90px);
  font-size: 24px;
  font-weight: bold;
  white-space: nowrap;
}
.portfolio > header :not(input).titel > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
.portfolio > header :not(input).titel > i {
  margin-left: 10px;
  color: var(--theme-link-color);
}
.portfolio > header :not(input).titel > span:last-of-type {
  margin-left: 10px;
}
.portfolio > header :not(input).titel > span:last-of-type .status-bolletje {
  --size: 18px;
}
.portfolio > header input.titel {
  flex: 1;
  min-width: 0;
  height: 45px;
  align-self: center;
  border: 1px solid var(--theme-grey-line-color);
  background-color: var(--theme-accent3-bg-color);
  border-radius: 3px;
  padding: 0 5px;
  font-size: 24px;
  font-weight: bold;
}
.portfolio > header input.titel:focus {
  border-color: #99bfff;
  background-color: white;
}
.portfolio > header input.titel + i {
  margin-left: 10px;
  color: var(--theme-link-color);
  font-size: 24px;
}
.portfolio > header ul {
  flex: 0;
  display: inline-block;
  margin-left: auto;
  white-space: nowrap;
}
.portfolio > header ul > li {
  display: inline-block;
  padding: 0 0.5em;
  cursor: pointer;
  color: var(--theme-link-color);
  margin-left: 10px;
}
.portfolio > header ul > li.selected {
  color: black;
}
.portfolio > header ul > li::before {
  font-size: 20px;
}
.portfolio > header ul > li[data-mode=briefing]::before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  font-weight: 300;
  font-family: "Font Awesome 6 Pro";
  content: "\f039";
}
.portfolio > header ul > li[data-mode=scroll]::before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  font-weight: 300;
  font-family: "Font Awesome 6 Pro";
  content: "\f70e";
}
.portfolio > header ul > li[data-mode=grid]::before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  font-weight: 300;
  font-family: "Font Awesome 6 Pro";
  content: "\e195";
}
.portfolio > aside {
  grid-column: 1;
  grid-row: 1/span 2;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  text-align: center;
  background-color: var(--theme-accent-bg-color);
}
.portfolio > aside .mobile-toggle-aside {
  display: none;
}
@media only screen and (max-width: 575.99px) {
  .portfolio > aside .mobile-toggle-aside {
    display: inline-block;
    font-size: 18px;
    width: 100%;
  }
  .portfolio > aside:not(.mobile-menu-visible) {
    grid-row: 1;
    min-height: unset !important;
    padding-top: unset;
    display: flex;
    align-items: center;
  }
  .portfolio > aside:not(.mobile-menu-visible) .when-mobile-menu-visible {
    display: none;
  }
  .portfolio > aside:not(.mobile-menu-visible) > *:not(:first-child) {
    display: none;
  }
  .portfolio > aside:not(.mobile-menu-visible) ~ main {
    grid-row: 2;
    grid-column: 1/span 2;
  }
  .portfolio > aside.mobile-menu-visible .mobile-toggle-aside {
    padding: 0;
    line-height: var(--portfolio-header-height);
  }
  .portfolio > aside.mobile-menu-visible .when-not-mobile-menu-visible {
    display: none;
  }
  .portfolio > aside.mobile-menu-visible .avatar-container {
    width: 60px;
  }
}
.portfolio > aside .avatar-container {
  width: var(--portfolio-header-height);
  height: var(--portfolio-header-height);
  display: grid;
  justify-items: center;
}
.portfolio > aside .avatar-container .avatar {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  align-self: center;
}
.portfolio > aside .share-options {
  line-height: 40px;
  margin: 15px 0 0 0;
  font-size: 30px;
  cursor: pointer;
}
.portfolio > aside .menu-item {
  cursor: pointer;
  margin-bottom: 10px;
}
.portfolio > aside .menu-item.menu-item-meer-marge-onder {
  margin-bottom: 30px;
}
.portfolio > aside .circle {
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  border-radius: 20px;
  text-align: center;
  background-color: white;
  font-size: 20px;
}
.portfolio > aside .circle > .popup-menu.hint {
  margin-left: calc((var(--portfolio-header-height) - 40px) / 2);
  padding: 0 1em;
  height: 40px;
}
.portfolio > aside .circle > .popup-menu.hint::before {
  content: "<";
  font-family: pepicon3;
  padding-right: 10px;
}
.portfolio > aside .circle > .popup-menu > .selected {
  background-color: var(--theme-input-focused-border-color);
}
.portfolio > aside .circle.uitgelicht {
  line-height: 40px;
  background-color: black;
}
.portfolio > aside .circle.uitgelicht.uitgelicht-on {
  color: gold;
}
.portfolio > aside .circle.uitgelicht.uitgelicht-off {
  color: #888;
}
.portfolio > aside .label {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--theme-grey-fg-color);
  margin-bottom: 5px;
}
.portfolio > aside:has(.popup-menu:not(.hidden)) + main .portfolio-page > header {
  display: none !important;
}
.portfolio > main h2.briefing {
  font-size: 18px;
  font-weight: bold;
  line-height: 20px;
  margin-bottom: 10px;
}
.portfolio > main .portfolio-page {
  position: relative;
  min-height: 100px;
  max-width: 100vw;
  margin-bottom: 0;
}
.portfolio > main .portfolio-page.portfolio-page-invisible > .foto,
.portfolio > main .portfolio-page.portfolio-page-invisible > .file,
.portfolio > main .portfolio-page.portfolio-page-invisible > .film {
  opacity: 0.5;
}
.portfolio > main .portfolio-page:not(:hover) > header {
  display: none !important;
}
.portfolio > main .portfolio-page > header {
  position: absolute;
  z-index: 1;
  display: flex;
  width: 100%;
  height: var(--portfolio-page-header-height);
  line-height: var(--portfolio-page-header-height);
  align-items: center;
  -webkit-user-select: none;
  user-select: none;
}
.portfolio > main .portfolio-page > header > *:not(.popup-menu) {
  margin-left: 15px;
  font-size: 18px;
  cursor: pointer;
}
.portfolio > main .portfolio-page > header .button {
  --height: 35px;
  --bg-color: rgba(255, 255, 255, 0.7);
  --fg-color: var(--theme-fg-color);
  --hover-bg-color: var(--theme-accent2-bg-color);
  --hover-fg-color: var(--fg-color);
  --border-color: var(--theme-accent-bg-color);
  font-size: 14px;
  flex-shrink: 0;
}
.portfolio > main .portfolio-page > header .button > i {
  font-size: 17px;
}
.portfolio > main .portfolio-page > header .button:has(> .popup-menu) {
  position: relative;
}
.portfolio > main .portfolio-page > header .button:has(> .popup-menu) .popup-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  margin-top: 10px;
}
.portfolio > main .portfolio-page > header .button.page-verborgen {
  cursor: default;
  --hover-bg-color: var(--bg-color);
}
.portfolio > main .portfolio-page > header .feedback-menu {
  padding-left: 10px;
  display: inline-flex;
  align-items: center;
}
.portfolio > main .portfolio-page > header .feedback-menu > i:first-child {
  display: flex;
  align-items: center;
  font-size: 14px;
  vertical-align: top;
  padding-right: 5px;
}
.portfolio > main .portfolio-page > header .feedback-menu > i:first-child::after {
  content: " ";
  display: inline-block;
  width: 1px;
  height: calc(var(--height) * 0.7);
  padding-left: 5px;
  vertical-align: middle;
  border-right: 1px solid var(--theme-accent-bg-color);
}
.portfolio > main .portfolio-page > header .feedback-menu > i:not(:first-child) {
  margin-left: 5px;
}
.portfolio > main .portfolio-page > header > .button.portfolio-page-titel {
  flex: 0 auto;
  margin-left: 10px;
  padding: 0 15px;
  max-width: 20%;
}
.portfolio > main .portfolio-page > header > .button.portfolio-page-titel:not(.editable) {
  overflow: hidden;
  text-overflow: ellipsis;
}
.portfolio > main .portfolio-page > header > .button.portfolio-page-titel.editable {
  padding-right: 5px;
  display: inline-flex;
  align-items: center;
}
.portfolio > main .portfolio-page > header > .button.portfolio-page-titel.editable > span {
  min-width: 5ch;
  max-width: calc(100% - 25px);
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}
@media only screen and (max-width: 575.99px) {
  .portfolio > main .portfolio-page > header > .button.portfolio-page-titel.editable {
    display: none;
  }
}
.portfolio > main .portfolio-page > header > .button.portfolio-page-titel .pepicon3 {
  padding-left: 0.5em;
  vertical-align: top;
}
.portfolio > main .portfolio-page > header > .button.portfolio-page-titel .pepicon3::before {
  border-radius: 100%;
  padding: 3px;
  background-color: black;
  color: white;
}
.portfolio > main .portfolio-page > header .divider {
  margin-left: auto;
}
.portfolio > main .portfolio-page > header > .tools {
  display: flex;
  margin: 0 15px;
  padding: 3px 10px;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}
.portfolio > main .portfolio-page > header > .tools > .stats {
  height: 22px;
  line-height: 22px;
  margin-right: 10px;
  font-size: 12px;
  align-self: center;
}
.portfolio > main .portfolio-page > header > .tools > .toggle-review {
  display: inline-block;
  height: 21px;
  line-height: 21px;
  padding: 0 5px 0 5px;
  border-radius: 10px;
  background-color: black;
  color: white;
  font-size: 12px;
  font-weight: normal;
  cursor: pointer;
  align-self: center;
}
.portfolio > main .portfolio-page > header > .tools > .toggle-review::before {
  font-family: pepicon3;
  color: gold;
  font-size: 12px;
}
.portfolio > main .portfolio-page > header > .tools > .toggle-review.on::before {
  content: "\e938";
}
.portfolio > main .portfolio-page > header > .tools > .toggle-review.on .toggle-review-off {
  display: none;
}
.portfolio > main .portfolio-page > header > .tools > .toggle-review:not(.on)::before {
  content: "\e939";
  color: white;
}
.portfolio > main .portfolio-page > header > .tools > .toggle-review:not(.on) > .toggle-review-on {
  display: none;
}
.portfolio > main .portfolio-page > header > .tools > .toggle-review > span {
  display: inline-block;
  vertical-align: top;
}
.portfolio > main .portfolio-page .popup-nieuwe-opdracht {
  top: 0;
}
.portfolio > main .portfolio-page .popup-nieuwe-opdracht .vaardigheden-select-popup {
  top: 0;
}
.portfolio > main .portfolio-page .uitwerking-talk {
  z-index: 1;
}
.portfolio > main .portfolio-page .info-titel > .portfolio-page-titel {
  padding-left: 20px;
}
.portfolio > main .portfolio-page img {
  cursor: pointer;
}
.portfolio > main .portfolio-page .wysiwyg-toolbar {
  z-index: 1;
}
.portfolio > main .portfolio-page .reviews,
.portfolio > main .portfolio-page .comments {
  display: none;
}
.portfolio > main .portfolio-page.portfolio-page-type-opdracht:not(.opdracht-type-portfolio_pagina_opdracht) .portfolio-page-titel .pepicon3 {
  display: none;
}
.portfolio > main .portfolio-page.portfolio-page-type-bestand .file {
  cursor: pointer;
}
.portfolio > main .portfolio-page.portfolio-page-type-film .film iframe, .portfolio > main .portfolio-page.portfolio-page-type-film .film video {
  width: 100%;
}
.portfolio > main .portfolio-page.portfolio-page-type-film .film::after {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.portfolio > main .portfolio-page.portfolio-page-type-film .portfolio-page-titel {
  display: none;
  height: 50px;
  border-radius: 0;
}
.portfolio > main .portfolio-page:not(:hover) .popup-page-menu {
  display: none;
}
.portfolio > main .portfolio-page .popup-page-menu {
  border-radius: 3px;
  min-width: 130px;
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}
.portfolio > main .portfolio-page .popup-page-menu > header {
  padding: 0 15px;
  border-bottom: 1px solid var(--theme-grey-line-color);
}
.portfolio > main .portfolio-page .popup-page-menu > header > h3 {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  line-height: 35px;
  padding: 0;
}
.portfolio > main .portfolio-page .popup-page-menu > main {
  margin: 0;
}
.portfolio > main .portfolio-page .popup-page-menu > main li {
  line-height: 35px;
  border-bottom: 1px solid var(--theme-grey-line-color);
  padding: 0 15px;
  cursor: pointer;
}
.portfolio.mode-grid > main {
  padding: 0 20px;
  display: flex;
  flex-flow: row wrap;
  align-content: baseline;
  overflow-y: auto;
}
.portfolio.mode-grid > main .portfolio-pages-container {
  display: flex;
  width: 100%;
  flex-flow: wrap;
  gap: 3px;
  padding: 3px 0;
}
.portfolio.mode-grid > main .portfolio-page {
  display: inline-block;
  --pf-grid-width: calc(min(100%, 1000px - 90px));
  width: calc((var(--pf-grid-width) - var(--scrollbar-width)) / 3 - 3px - 1px);
  aspect-ratio: 1.5;
  vertical-align: top;
  cursor: pointer;
}
@media only screen and (max-width: 575.99px) {
  .portfolio.mode-grid > main .portfolio-page {
    width: calc(50% - 3px);
    height: unset;
    max-height: unset;
    min-height: unset;
  }
}
.portfolio.mode-grid > main .portfolio-page.dragging {
  opacity: 0.1;
}
.portfolio.mode-grid > main .portfolio-page.portfolio-page-droptarget {
  border: 2px dashed green;
}
.portfolio.mode-grid > main .portfolio-page > header {
  --portfolio-page-header-height: 37px;
}
.portfolio.mode-grid > main .portfolio-page > header .portfolio-page-menu {
  --height: 20px;
}
.portfolio.mode-grid > main .portfolio-page > header .portfolio-page-menu > i {
  font-size: 13px;
}
.portfolio.mode-grid > main .portfolio-page > header .feedback-menu,
.portfolio.mode-grid > main .portfolio-page > header .maak-beoordeelbaar {
  --height: 20px;
  padding: 0 5px;
}
.portfolio.mode-grid > main .portfolio-page > header .feedback-menu, .portfolio.mode-grid > main .portfolio-page > header .feedback-menu > i,
.portfolio.mode-grid > main .portfolio-page > header .maak-beoordeelbaar,
.portfolio.mode-grid > main .portfolio-page > header .maak-beoordeelbaar > i {
  font-size: 11px;
}
.portfolio.mode-grid > main .portfolio-page > header .talk-button,
.portfolio.mode-grid > main .portfolio-page > header .button-rounded:not(.tools):not(.feedback-menu):not(.maak-beoordeelbaar) {
  display: none;
}
.portfolio.mode-grid > main .portfolio-page > header .tools {
  height: 20px;
  line-height: 20px;
  padding: 0 2px 0 5px;
  align-items: center;
}
.portfolio.mode-grid > main .portfolio-page > header .tools .stats {
  font-size: 10px;
  line-height: 16px;
  height: 16px;
  margin-right: 5px;
}
.portfolio.mode-grid > main .portfolio-page > header .tools .toggle-review {
  height: 15px;
  width: 15px;
  line-height: 13px;
  text-align: center;
  padding: 0;
}
.portfolio.mode-grid > main .portfolio-page > header .tools .toggle-review::before {
  font-size: 9px;
  line-height: 13px;
  padding: 1px;
}
.portfolio.mode-grid > main .portfolio-page > header .tools .toggle-review .toggle-review-on,
.portfolio.mode-grid > main .portfolio-page > header .tools .toggle-review .toggle-review-off {
  display: none;
}
.portfolio.mode-grid > main .portfolio-page .portfolio-page-titel {
  display: none;
}
.portfolio.mode-grid > main .portfolio-page:not(:hover) .portfolio-page-titel {
  display: none;
}
.portfolio.mode-grid > main .portfolio-page img {
  aspect-ratio: 1.5;
  object-fit: cover;
}
.portfolio.mode-grid > main .portfolio-page.portfolio-page-type-film .film, .portfolio.mode-grid > main .portfolio-page.portfolio-page-type-film .film > video {
  height: 100%;
}
.portfolio.mode-briefing > main {
  padding: 0 20px;
  align-content: baseline;
  overflow-y: auto;
}
.portfolio .popup-portfolio-options {
  display: flex;
  max-width: 100vw;
}
@media only screen and (max-width: 575.99px) {
  .portfolio .popup-portfolio-options {
    left: 5vw !important;
    width: 90vw;
    margin-top: 50px;
  }
}
@media only screen and (min-width: 576px) {
  .portfolio .popup-portfolio-options > main {
    min-width: 400px;
  }
}
.portfolio .popup-portfolio-options > main h1 {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}
.portfolio .popup-portfolio-options > main > section {
  margin-top: 20px;
  line-height: 30px;
}
.portfolio .popup-portfolio-options > main > section h2 {
  font-size: 15px;
  font-weight: bold;
}
.portfolio .popup-portfolio-options > main > section label {
  display: block;
  -webkit-user-select: none;
  user-select: none;
}
.portfolio .popup-portfolio-options > main > section label.solitary {
  line-height: 40px;
}
.portfolio .popup-portfolio-options > main > section label[key="0"] + label.solitary {
  margin-top: 5px;
}
.portfolio .popup-portfolio-options > main > section label input[type=checkbox], .portfolio .popup-portfolio-options > main > section label input[type=radio] {
  margin: 0 0.5em 0 0;
}
.portfolio .popup-portfolio-options > main > section label input:disabled + span {
  color: var(--theme-dimmed-fg-color);
}
.portfolio .popup-portfolio-options > main > section label .copy-text {
  margin-left: 1em;
}
.portfolio .popup-portfolio-options > main > section .portfolio-categories-selector .portfolio-categories-line {
  position: relative;
  display: block;
  border: 1px solid var(--theme-grey-line-color);
  border-radius: 3px;
  line-height: 28px;
  height: 30px;
  padding: 0 0.4em;
}
.portfolio .popup-portfolio-options > main > section .portfolio-categories-selector .portfolio-categories-line::after {
  position: absolute;
  right: 0.4em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  font-weight: 400;
  font-family: "Font Awesome 6 Pro";
  content: "\f078";
}
.portfolio .popup-portfolio-options > main > section .portfolio-categories-selector .popup-default {
  width: calc(100% - 40px);
}
.portfolio .popup-portfolio-options > main > section .portfolio-categories-selector .popup-default select {
  width: 100%;
  height: 200px;
  border: none;
}
.portfolio .popup-portfolio-options > main > footer {
  margin: 20px 0;
}
.portfolio .popup-portfolio-options > main > footer > button {
  margin-left: 10px;
}
.portfolio .popup-portfolio-page-type-menu {
  min-width: 180px;
  -webkit-user-select: none;
  user-select: none;
}
.portfolio .popup-portfolio-page-type-menu label {
  display: block;
  line-height: inherit;
}
.portfolio .popup-portfolio-page-type-menu label input[type=file] {
  display: none;
}
.portfolio > .popup-feedback {
  top: var(--portfolio-header-height);
}
.portfolio .popup-portfolio-filter-skills {
  max-width: min(100vw - 90px, 90%);
}
.portfolio .popup-portfolio-filter-skills > div {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media only screen and (max-width: 575.99px) {
  .popup-portfolio-info {
    left: 5vw !important;
    width: 90vw;
    margin-top: 50px;
  }
}
.popup-portfolio-info > header > h1 {
  font-size: 18px;
  font-weight: bold;
  line-height: 70px;
}
.popup-portfolio-info > main dl {
  margin: 0;
}
.popup-portfolio-info > main dl dt {
  font-size: 15px;
  font-weight: bold;
  line-height: 30px;
}
.popup-portfolio-info > main dl dd {
  margin-inline-start: unset;
  line-height: 30px;
}
.popup-portfolio-info > main dl dd + dt {
  margin-top: 10px;
}

.popup-portfolio-uitwerking-info {
  right: 0;
  bottom: 100%;
}
.popup-portfolio-uitwerking-info > main > table {
  font-size: 14px;
  font-weight: normal;
  margin: 10px;
}
.popup-portfolio-uitwerking-info > main > table tr {
  height: 30px;
}
.popup-portfolio-uitwerking-info > main > table th {
  color: #999;
  padding-right: 10px;
}
.popup-portfolio-uitwerking-info > main > table td {
  padding: 4px 10px 4px 10px;
}
.popup-portfolio-uitwerking-info > main > table td.relevantie div {
  width: 5px;
  float: left;
  height: 16px;
  background-color: #929292;
  border-right: 2px solid white;
}

.portfolio-page img {
  display: block;
  width: 100%;
}
.portfolio-page .info-tekst {
  padding: 10px 20px 0;
  margin-bottom: 0;
  text-align: left;
  line-height: 1.5;
  background-color: white;
}
.portfolio-page .info-tekst h1 {
  font-size: 20px;
  font-weight: normal;
  margin: 10px 0 5px;
}
.portfolio-page .info-tekst h2 {
  font-size: 120%;
  font-weight: normal;
  margin: 10px 0 5px;
}
.portfolio-page.portfolio-page-type-film iframe {
  aspect-ratio: 1.5;
}
.portfolio-page.portfolio-page-type-opdracht .opdracht-image-container {
  position: relative;
}
.portfolio-page.portfolio-page-type-opdracht .opdracht-image-container .opdracht-info {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 140px;
  width: 100%;
  padding-top: 34px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
  display: grid;
  grid-template-areas: "titel" "vak" "datum";
  grid-template-rows: 36px 25px 25px;
  align-items: center;
  color: white;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
}
.portfolio-page.portfolio-page-type-opdracht .opdracht-image-container .opdracht-info .titel {
  grid-area: titel;
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  font-size: 20px;
  font-weight: bold;
  line-height: 30px;
}
.portfolio-page.portfolio-page-type-opdracht .opdracht-image-container .opdracht-info .titel > span {
  flex: 0 1 fit-content;
  overflow: hidden;
  text-overflow: ellipsis;
}
.portfolio-page.portfolio-page-type-opdracht .opdracht-image-container .opdracht-info .titel .button {
  margin-left: 15px;
  --bg-color: var(--theme-link-color);
  --hover-fg-color: var(--theme-link-color);
}
.portfolio-page.portfolio-page-type-opdracht .opdracht-image-container .opdracht-info .vak {
  grid-area: vak;
  font-size: 14px;
  font-weight: bold;
}
.portfolio-page.portfolio-page-type-opdracht .opdracht-image-container .opdracht-info .datum {
  grid-area: datum;
  font-size: 12px;
}
.portfolio-page.portfolio-page-type-opdracht .opdracht-image-container .opdracht-info .pepicon3 {
  font-size: 20px;
}
.portfolio-page.portfolio-page-type-opdracht:not(.opdracht-type-portfolio_pagina_opdracht) .portfolio-page-titel {
  display: none;
}
.portfolio-page.portfolio-page-type-opdracht:not(.opdracht-type-portfolio_pagina_opdracht) img {
  width: 100%;
  object-fit: cover;
}
.portfolio-page.portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-media .portfolio-page-titel {
  display: none;
}
.portfolio-page .werkblad {
  padding: 10px;
  line-height: 1.5;
}
.portfolio-page .wysiwyg .werkblad {
  min-height: 200px;
  border: 1px solid var(--theme-grey-line-color);
}
.portfolio-page .wysiwyg .werkblad:focus {
  border-color: #99bfff;
  background-color: white;
}

.portfolio.mode-scroll .portfolio-page + .portfolio-page {
  margin-top: 7px;
}

.portfolio.mode-scroll .portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-media:not(:hover) .portfolio-page-titel,
.portfolio.mode-scroll .portfolio-page-type-foto:not(:hover) .portfolio-page-titel,
.portfolio-review-page-container .portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-media:not(:hover) .portfolio-page-titel,
.portfolio-review-page-container .portfolio-page-type-foto:not(:hover) .portfolio-page-titel {
  display: none;
}
.portfolio.mode-scroll .portfolio-page-type-text .placeholder {
  height: var(--portfolio-page-header-height);
}
.portfolio.mode-scroll .portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text .placeholder {
  height: var(--portfolio-page-header-height);
}
.portfolio.mode-scroll .portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text .info-titel {
  display: inline-flex;
  align-items: center;
  line-height: 50px;
  padding: 0;
}
.portfolio.mode-scroll .portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text .info-titel .portfolio-page-titel {
  height: inherit;
  line-height: inherit;
  font-size: 20px;
  font-weight: bold;
  margin: 0;
}

.portfolio-review-page-container .portfolio-page-type-text .info-tekst {
  min-height: 200px;
}

.portfolio.mode-scroll .portfolio-page-type-opdracht .opdracht-image-container .opdracht-info .button-circle {
  display: none;
}

.portfolio.mode-grid .portfolio-page-type-opdracht .opdracht-image-container .opdracht-info {
  display: flex;
  padding: 0 10px;
  height: 70px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
}
.portfolio.mode-grid .portfolio-page-type-opdracht .opdracht-image-container .opdracht-info .titel {
  flex: 1;
  display: flex;
  overflow: hidden;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
}
.portfolio.mode-grid .portfolio-page-type-opdracht .opdracht-image-container .opdracht-info .titel > span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.portfolio.mode-grid .portfolio-page-type-opdracht .opdracht-image-container .opdracht-info .button-circle {
  display: none;
}
.portfolio.mode-grid .portfolio-page-type-opdracht .opdracht-image-container .opdracht-info .vak, .portfolio.mode-grid .portfolio-page-type-opdracht .opdracht-image-container .opdracht-info .datum {
  display: none;
}

.portfolio-review-page-container .portfolio-page.portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text .info-titel {
  display: none;
}
.portfolio-review-page-container .portfolio-page.portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text .info-tekst {
  min-height: 450px;
}
.portfolio-review-page-container .portfolio-page.portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text .opdracht-info > .titel > span {
  font-size: 20px;
  font-weight: bold;
}
.portfolio-review-page-container .portfolio-page.portfolio-page-type-opdracht .opdracht-info {
  position: unset;
  display: block;
  height: unset;
  background: unset;
  background-color: var(--theme-accent3-bg-color);
  color: unset;
  padding: 0 20px;
  line-height: 60px;
}
.portfolio-review-page-container .portfolio-page.portfolio-page-type-opdracht .opdracht-info .titel {
  position: relative;
  display: flex;
  align-items: center;
  line-height: 60px;
}
.portfolio-review-page-container .portfolio-page.portfolio-page-type-opdracht .opdracht-info .titel > span:first-child {
  flex: 1;
}
.portfolio-review-page-container .portfolio-page.portfolio-page-type-opdracht .opdracht-info .titel .button-circle {
  --bg-color: var(--theme-bg-color);
  --fg-color: var(--theme-fg-color);
  flex: 0 0 var(--size);
}
.portfolio-review-page-container .portfolio-page.portfolio-page-type-opdracht .opdracht-info .titel .popup-portfolio-uitwerking-info {
  bottom: unset;
  top: 100%;
}
.portfolio-review-page-container .portfolio-page.portfolio-page-type-opdracht .opdracht-info .vak,
.portfolio-review-page-container .portfolio-page.portfolio-page-type-opdracht .opdracht-info .datum {
  display: none;
}

.portfolio.mode-scroll .portfolio-page-type-bestand .portfolio-page-titel {
  display: none;
}
.portfolio.mode-scroll .portfolio-page-type-bestand::before {
  content: " ";
  position: absolute;
  top: 0;
  display: block;
  width: 100%;
  height: var(--portfolio-page-header-height);
  background-color: var(--theme-grey-line-color);
}
.portfolio.mode-scroll .portfolio-page-type-bestand:hover::before {
  background-color: var(--theme-grey-line-color);
}
.portfolio.mode-scroll .portfolio-page-type-bestand:hover > header {
  background: unset;
}
.portfolio.mode-scroll .portfolio-page-type-bestand .file {
  --file-section-size: 300px;
  --file-type-size: 200px;
  --padding-size: calc( ( var(--file-section-size) - var(--file-type-size) ) * 0.5 );
  display: flex;
  padding: var(--padding-size);
  padding-top: calc(var(--padding-size) + var(--portfolio-page-header-height));
  background-color: var(--theme-accent-bg-color);
}
@media only screen and (max-width: 575.99px) {
  .portfolio.mode-scroll .portfolio-page-type-bestand .file {
    --file-type-size: 100px;
    --file-section-size: 200px;
  }
}
.portfolio.mode-scroll .portfolio-page-type-bestand .file .file-type {
  width: var(--file-type-size);
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.12);
}
.portfolio.mode-scroll .portfolio-page-type-bestand .file .filename {
  align-self: center;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-left: 20px;
  font-size: 20px;
  font-weight: bold;
}
.portfolio.mode-scroll .portfolio-page-type-bestand .file .filename + .button {
  margin-left: 15px;
}
.portfolio.mode-scroll .portfolio-page-type-bestand .file .button {
  align-self: center;
  --bg-color: var(--theme-link-color);
  --fg-color: var(--theme-bg-color);
}
.portfolio.mode-scroll .portfolio-page-type-bestand .file .button-circle {
  display: none;
}

.portfolio-review-page-container .portfolio-page-type-bestand {
  position: relative;
}
.portfolio-review-page-container .portfolio-page-type-bestand .file {
  display: flex;
  padding: 20px;
  padding-top: 57px;
  background-color: var(--theme-accent-bg-color);
}
.portfolio-review-page-container .portfolio-page-type-bestand .file .file-type {
  width: 60px;
}
.portfolio-review-page-container .portfolio-page-type-bestand .file .filename {
  flex: 1;
  align-self: center;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-left: 13px;
  border-radius: 0 0 5px 5px;
  font-size: 18px;
}
.portfolio-review-page-container .portfolio-page-type-bestand .file .button {
  align-self: center;
  --bg-color: var(--theme-link-color);
  --fg-color: var(--theme-bg-color);
}
.portfolio-review-page-container .portfolio-page-type-bestand .file .button-circle {
  --bg-color: var(--theme-bg-color);
  --fg-color: var(--theme-fg-color);
}
.portfolio-review-page-container .portfolio-page-type-bestand .popup-portfolio-uitwerking-info {
  bottom: unset;
}

.portfolio.mode-grid,
.portfolio-thumb-grid {
  container-type: inline-size;
}
.portfolio.mode-grid .portfolio-page-type-bestand .file,
.portfolio-thumb-grid .portfolio-page-type-bestand .file {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-areas: "image image" "titel button";
  grid-template-rows: calc(100% - 70px) 70px;
  grid-template-columns: 1fr auto;
  padding: 10px 10px 0 10px;
  background-color: #eee;
}
.portfolio.mode-grid .portfolio-page-type-bestand .file img.file-type,
.portfolio-thumb-grid .portfolio-page-type-bestand .file img.file-type {
  grid-area: image;
  display: block;
  width: 60px;
  height: 60px;
  object-fit: contain;
}
.portfolio.mode-grid .portfolio-page-type-bestand .file .filename,
.portfolio-thumb-grid .portfolio-page-type-bestand .file .filename {
  grid-area: titel;
  align-self: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}
.portfolio.mode-grid .portfolio-page-type-bestand .file .button.anders-bij-hover,
.portfolio-thumb-grid .portfolio-page-type-bestand .file .button.anders-bij-hover {
  grid-area: button;
  align-self: center;
  margin-left: 15px;
}
.portfolio.mode-grid .portfolio-page-type-bestand .file .button-circle,
.portfolio-thumb-grid .portfolio-page-type-bestand .file .button-circle {
  display: none;
}

.portfolio-thumb-grid .portfolio-page-type-bestand .file {
  height: unset;
  aspect-ratio: 1.5;
}
.portfolio-thumb-grid .portfolio-page-type-bestand .file img.file-type {
  width: unset;
  height: unset;
  max-width: 50%;
}

.portfolio-review-page-container .portfolio-page-type-bestand {
  margin-left: 0;
  margin-right: 0;
  min-height: 500px;
  background-color: white;
}
.portfolio-review-page-container .portfolio-page-type-bestand .file {
  background-color: var(--theme-accent3-bg-color);
  padding: 10px;
}

.portfolio.mode-grid .portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text.portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text .info-titel,
.portfolio.mode-grid .portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text.portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text .info-tekst,
.portfolio.mode-grid .portfolio-page-type-text.portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text .info-titel,
.portfolio.mode-grid .portfolio-page-type-text.portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text .info-tekst,
.portfolio-thumb-grid .portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text.portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text .info-titel,
.portfolio-thumb-grid .portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text.portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text .info-tekst,
.portfolio-thumb-grid .portfolio-page-type-text.portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text .info-titel,
.portfolio-thumb-grid .portfolio-page-type-text.portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text .info-tekst {
  display: none;
}
.portfolio.mode-grid .portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text .text-info,
.portfolio.mode-grid .portfolio-page-type-text .text-info,
.portfolio-thumb-grid .portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text .text-info,
.portfolio-thumb-grid .portfolio-page-type-text .text-info {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-areas: "image" "titel";
  grid-template-rows: calc(100% - 70px) 70px;
  padding: 10px 10px 0 10px;
  background-color: #eee;
}
.portfolio.mode-grid .portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text .text-info .placeholder,
.portfolio.mode-grid .portfolio-page-type-text .text-info .placeholder,
.portfolio-thumb-grid .portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text .text-info .placeholder,
.portfolio-thumb-grid .portfolio-page-type-text .text-info .placeholder {
  display: none;
}
.portfolio.mode-grid .portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text .text-info img.text-image,
.portfolio.mode-grid .portfolio-page-type-text .text-info img.text-image,
.portfolio-thumb-grid .portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text .text-info img.text-image,
.portfolio-thumb-grid .portfolio-page-type-text .text-info img.text-image {
  grid-area: image;
  width: 60px;
  height: 60px;
  object-fit: contain;
}
.portfolio.mode-grid .portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text .text-info .titel-nogmaals,
.portfolio.mode-grid .portfolio-page-type-text .text-info .titel-nogmaals,
.portfolio-thumb-grid .portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text .text-info .titel-nogmaals,
.portfolio-thumb-grid .portfolio-page-type-text .text-info .titel-nogmaals {
  grid-area: titel;
  align-self: center;
  display: flex;
  overflow: hidden;
  max-width: 100%;
  align-content: center;
  align-items: center;
}
.portfolio.mode-grid .portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text .text-info .titel-nogmaals > :first-child,
.portfolio.mode-grid .portfolio-page-type-text .text-info .titel-nogmaals > :first-child,
.portfolio-thumb-grid .portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text .text-info .titel-nogmaals > :first-child,
.portfolio-thumb-grid .portfolio-page-type-text .text-info .titel-nogmaals > :first-child {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
}
.portfolio.mode-grid .portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text .text-info .titel-nogmaals > .button,
.portfolio.mode-grid .portfolio-page-type-text .text-info .titel-nogmaals > .button,
.portfolio-thumb-grid .portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text .text-info .titel-nogmaals > .button,
.portfolio-thumb-grid .portfolio-page-type-text .text-info .titel-nogmaals > .button {
  margin-left: auto;
}

.portfolio-thumb-grid .portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text,
.portfolio-thumb-grid .portfolio-page-type-text {
  background-color: #eee;
}
.portfolio-thumb-grid .portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text img,
.portfolio-thumb-grid .portfolio-page-type-text img {
  object-fit: contain;
}
.portfolio-thumb-grid .portfolio-page-type-opdracht.opdracht-type-portfolio_pagina_opdracht.opdracht-format-text .info,
.portfolio-thumb-grid .portfolio-page-type-text .info {
  background-color: white;
  margin-bottom: unset;
  padding-bottom: 20px;
}

.portfolio-page .button.anders-bij-hover,
.portfolio-page .button.button-circle,
.portfolio-review-page-container .button.anders-bij-hover,
.portfolio-review-page-container .button.button-circle {
  --bg-color: var(--theme-link-color);
  --fg-color: var(--theme-bg-color);
  --hover-bg-color: var(--theme-link-hover-color);
  --hover-fg-color: var(--theme-bg-color);
}
.portfolio-page .button.anders-bij-hover,
.portfolio-review-page-container .button.anders-bij-hover {
  margin-left: 15px;
}
.portfolio-page .button.anders-bij-hover:not(:hover),
.portfolio-review-page-container .button.anders-bij-hover:not(:hover) {
  padding: 0;
  width: var(--height);
  text-align: center;
}
.portfolio-page .button.anders-bij-hover:not(:hover) > .text,
.portfolio-review-page-container .button.anders-bij-hover:not(:hover) > .text {
  display: none;
}
.portfolio-page .button.anders-bij-hover:hover,
.portfolio-review-page-container .button.anders-bij-hover:hover {
  width: unset;
  color: var(--theme-bg-color);
  --hover-bg-color: var(--theme-link-color);
}
.portfolio-page .button.anders-bij-hover:hover > :not(.text),
.portfolio-review-page-container .button.anders-bij-hover:hover > :not(.text) {
  display: none;
}

body > .modal-overlay .portfolio-review-page-container {
  display: inline-block;
  max-width: 1200px;
  max-height: 100vh;
}
@media only screen and (min-width: 576px) {
  body > .modal-overlay .portfolio-review-page-container {
    width: calc(100% - 160px);
    margin: 20px 80px 20px 80px;
  }
}
@media only screen and (max-width: 575.99px) {
  body > .modal-overlay .portfolio-review-page-container {
    width: 100%;
  }
}
@media (min-width: 1360px) {
  body > .modal-overlay .portfolio-review-page-container {
    width: 1200px;
  }
}
body > .modal-overlay .portfolio-review-page-container img {
  width: 100%;
}
body > .modal-overlay .portfolio-review-page-container > header {
  position: relative;
  display: flex;
  height: 70px;
  padding: 10px 10px 10px 20px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-color: var(--theme-accent8-bg-color);
  color: white;
}
body > .modal-overlay .portfolio-review-page-container > header .portfolio-permalink {
  color: white;
}
body > .modal-overlay .portfolio-review-page-container > header .portfolio-permalink:hover {
  text-decoration: underline;
}
body > .modal-overlay .portfolio-review-page-container > header > nav {
  flex: 1;
  display: inline-block;
  padding-right: 40px;
  color: #eee;
  text-align: right;
  font-size: 40px;
}
body > .modal-overlay .portfolio-review-page-container > header .auteur {
  flex: 1;
  display: inline-grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto auto;
  margin: 0px 0;
}
body > .modal-overlay .portfolio-review-page-container > header .auteur .avatar {
  grid-column: 1/1;
  grid-row: 1/span 2;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  align-self: center;
}
body > .modal-overlay .portfolio-review-page-container > header .auteur .titel {
  grid-column: 2/2;
  grid-row: 1/1;
  padding: 0 20px 0 20px;
  line-height: 35px;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body > .modal-overlay .portfolio-review-page-container > header .auteur .naam {
  grid-column: 2/2;
  grid-row: 2/2;
  padding-left: 20px;
  line-height: 25px;
}
body > .modal-overlay .portfolio-review-page-container > main {
  margin-bottom: 101px;
  height: calc(100vh - 70px - 20px - 20px);
  overflow: auto;
  background-color: white;
}
@media only screen and (max-width: 575.99px) {
  body > .modal-overlay .portfolio-review-page-container > main {
    height: calc(100vh - 70px);
  }
}
body > .modal-overlay .portfolio-review-page-container > main > .portfolio-page > header,
body > .modal-overlay .portfolio-review-page-container > main > .portfolio-page .portfolio-page-titel,
body > .modal-overlay .portfolio-review-page-container > main > .portfolio-page .tools {
  display: none;
}
body > .modal-overlay .portfolio-review-page-container > main > .portfolio-page section.reviews {
  background-color: white;
  min-height: 500px;
}
body > .modal-overlay .portfolio-review-page-container > main > .portfolio-page section.reviews > header {
  display: flex;
  font-size: 20px;
  font-weight: bold;
  padding: 0px 20px;
  height: 90px;
  line-height: 90px;
  border-bottom: 1px solid var(--theme-border-color);
}
body > .modal-overlay .portfolio-review-page-container > main > .portfolio-page section.reviews > header > .stars {
  font-size: 16px;
  margin-left: auto;
  font-weight: normal;
}
body > .modal-overlay .portfolio-review-page-container > main > .portfolio-page section.reviews > header > .stars > .avg {
  margin-right: 0.5em;
  font-weight: bold;
}
body > .modal-overlay .portfolio-review-page-container > main > .portfolio-page section.reviews > header > .stars > .count {
  margin-left: 0.5em;
  display: inline-block;
}
body > .modal-overlay .portfolio-review-page-container > main > .portfolio-page section.reviews > header > .stars > i {
  color: gold;
}
body > .modal-overlay .portfolio-review-page-container > main > .portfolio-page section.reviews > header > .stars > em {
  margin-left: 1em;
}
body > .modal-overlay .portfolio-review-page-container > main > .portfolio-page section.reviews > main {
  padding: 0 20px 40px 20px;
}
body > .modal-overlay .portfolio-review-page-container > main > .portfolio-page section.reviews > main .comment {
  display: grid;
  grid-template-columns: 70px 1fr;
  margin: 30px 0;
}
body > .modal-overlay .portfolio-review-page-container > main > .portfolio-page section.reviews > main .comment > aside {
  grid-column: 1;
  grid-row: 1/span 2;
}
body > .modal-overlay .portfolio-review-page-container > main > .portfolio-page section.reviews > main .comment > aside .avatar {
  width: 50px;
  height: 50px;
  border-radius: 25px;
}
body > .modal-overlay .portfolio-review-page-container > main > .portfolio-page section.reviews > main .comment > header {
  grid-column: 2;
}
body > .modal-overlay .portfolio-review-page-container > main > .portfolio-page section.reviews > main .comment > header span {
  display: block;
  padding-bottom: 5px;
}
body > .modal-overlay .portfolio-review-page-container > main > .portfolio-page section.reviews > main .comment > header span.naam {
  font-weight: bold;
  font-size: 16px;
}
body > .modal-overlay .portfolio-review-page-container > main > .portfolio-page section.reviews > main .comment > header span.info {
  display: flex;
  font-weight: bold;
  width: 100%;
}
body > .modal-overlay .portfolio-review-page-container > main > .portfolio-page section.reviews > main .comment > header span.info span {
  flex: 1;
}
body > .modal-overlay .portfolio-review-page-container > main > .portfolio-page section.reviews > main .comment > header span.info span.rating {
  flex: 1;
  font-size: 14px;
  text-align: right;
  color: gold;
}
body > .modal-overlay .portfolio-review-page-container > main > .portfolio-page section.reviews > main .comment > header .rating {
  line-height: 2.5;
  font-size: 16px;
  text-align: right;
  color: gold;
}
body > .modal-overlay .portfolio-review-page-container > main > .portfolio-page section.reviews > main .comment > header .rating.editable .portfolio-page-star {
  cursor: pointer;
}
body > .modal-overlay .portfolio-review-page-container > main > .portfolio-page section.reviews > main .comment > main {
  grid-column: 2;
  margin-top: 10px;
  line-height: 1.5;
}
body > .modal-overlay .portfolio-review-page-container > main > .portfolio-page section.reviews > main .comment > footer {
  grid-column: 2;
  text-align: right;
}
body > .modal-overlay .portfolio-review-page-container > main > .portfolio-page section.reviews > main .comment > footer > article {
  text-align: left;
}
body > .modal-overlay .portfolio-review-page-container > main .portfolio-page-prevnext {
  position: absolute;
  z-index: 1;
  background: transparent;
  border: none;
  color: white;
  padding: 100px 20px 0 20px;
}
body > .modal-overlay .portfolio-review-page-container > main .portfolio-page-prevnext > .portfolio-page-nav {
  cursor: pointer;
}
body > .modal-overlay .portfolio-review-page-container > main .portfolio-page-prevnext > .portfolio-page-nav > i {
  font-size: 40px;
  vertical-align: middle;
}

.dialog.dialog-portfolio-selecteer-uitwerkingen h2 {
  margin: 30px 20px 10px 20px;
  font-size: 20px;
  font-weight: bold;
}
.dialog.dialog-portfolio-selecteer-uitwerkingen h3 {
  margin: 10px 10px 15px 20px;
  display: inline-block;
  text-transform: uppercase;
  font-size: 13px;
}
.dialog.dialog-portfolio-selecteer-uitwerkingen h3.selected a {
  color: var(--theme-fg-color);
}
.dialog.dialog-portfolio-selecteer-uitwerkingen h3:last-child {
  margin-left: 6px;
}
.dialog.dialog-portfolio-selecteer-uitwerkingen ul.vakken {
  margin: 0 20px;
  padding: 8px 0px;
  list-style-type: none;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  height: 80px;
}
.dialog.dialog-portfolio-selecteer-uitwerkingen ul.vakken li {
  margin: 0;
  display: block;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  padding: 4px 4px;
}
.dialog.dialog-portfolio-selecteer-uitwerkingen ul.vakken li img {
  width: 48px;
  height: 48px;
}
.dialog.dialog-portfolio-selecteer-uitwerkingen ul.vakken li div {
  display: none;
}
.dialog.dialog-portfolio-selecteer-uitwerkingen ul.vakken li.selected div {
  width: 56px;
  height: 56px;
  display: block;
  background-color: rgba(0, 50, 152, 0.9);
  color: white;
  text-align: center;
  font-size: 12px;
  line-height: 56px;
  position: relative;
  top: -52px;
  left: -4px;
  border-radius: 3px;
}
.dialog.dialog-portfolio-selecteer-uitwerkingen table td.relevantie {
  padding-right: 20px;
}
.dialog.dialog-portfolio-selecteer-uitwerkingen table td.relevantie div {
  width: 5px;
  float: left;
  height: 16px;
  background-color: #929292;
  border-right: 2px solid white;
}
.dialog.dialog-portfolio-selecteer-uitwerkingen main.page-main {
  max-height: calc(var(--page-main-height) - 60px);
}
.dialog.dialog-portfolio-selecteer-uitwerkingen footer {
  text-align: right;
  line-height: 60px;
  padding: 0 20px;
}
.dialog.dialog-portfolio-selecteer-uitwerkingen footer .button {
  --height: 30px;
}

@media screen and (max-width: 706px) {
  .portfolio-overzicht {
    width: 471px;
  }
}
@media screen and (max-width: 470px) {
  .portfolio-overzicht {
    width: 312px;
  }
  .portfolio-overzicht .portfolio-blok .portable-portfolio-thumb {
    width: 300px;
    height: 225px;
  }
}
/**
 *
 *
 */
body.pakhuis-container {
  margin: 0 auto;
  background-color: var(--theme-accent5-bg-color);
}
@media only screen and (max-width: 575.99px) {
  body.pakhuis-container .responsive-visible-desktop {
    display: none !important;
  }
}
@media only screen and (min-width: 576px) {
  body.pakhuis-container .responsive-visible-mobile {
    display: none;
  }
}
body.pakhuis-container > .header-menu {
  position: unset;
}
body.pakhuis-container > .pakhuis-review,
body.pakhuis-container > .pakhuis-filter-container,
body.pakhuis-container > .pakhuis-portfolio-list-container {
  margin: 0 auto;
}
@media (max-width: 1200px) {
  body.pakhuis-container > .pakhuis-review,
  body.pakhuis-container > .pakhuis-filter-container,
  body.pakhuis-container > .pakhuis-portfolio-list-container {
    margin: 0 17px;
  }
}
body.pakhuis-container > .pakhuis-review > *,
body.pakhuis-container > .pakhuis-filter-container > *,
body.pakhuis-container > .pakhuis-portfolio-list-container > * {
  max-width: 1200px;
  margin: 0 auto;
}
body.pakhuis-container > .pakhuis-header {
  height: 60px;
  line-height: 60px;
  margin-bottom: 20px;
  font-size: 20px;
  background-color: white;
}
@media only screen and (max-width: 575.99px) {
  body.pakhuis-container > .pakhuis-header {
    margin-bottom: 0 20px;
  }
}
body.pakhuis-container > .pakhuis-header > .container {
  container-type: inline-size;
  width: unset;
  max-width: min(100vw, 1200px);
  height: 100%;
  line-height: inherit;
  display: flex;
  margin: 0 auto;
}
@media only screen and (width <= 1220px) {
  body.pakhuis-container > .pakhuis-header > .container {
    padding: 0 10px;
  }
}
body.pakhuis-container > .pakhuis-header > .container > .logo-container {
  flex: 1;
}
body.pakhuis-container > .pakhuis-header > .container > .logo-container > .pakhuis-logo {
  display: flex;
  align-items: center;
  height: inherit;
  line-height: inherit;
}
body.pakhuis-container > .pakhuis-header > .container > .logo-container > .pakhuis-logo > img {
  height: 22px;
}
@media only screen and (max-width: 600px) {
  body.pakhuis-container > .pakhuis-header > .container > .logo-container > .pakhuis-logo > img {
    height: 23px;
  }
}
body.pakhuis-container > .pakhuis-header > .container > .schoolnaam {
  flex: 2;
  font-size: 24px;
  text-align: center;
}
@media only screen and (max-width: 575.99px) {
  body.pakhuis-container > .pakhuis-header > .container > .schoolnaam {
    display: none;
  }
}
body.pakhuis-container > .pakhuis-header > .container > .login {
  flex: 1;
  text-align: right;
  margin-left: auto;
  line-height: inherit;
  white-space: nowrap;
  font-size: 14px;
}
body.pakhuis-container > .pakhuis-header > .container > .login a.avatar {
  display: inline-flex;
  height: 60px;
  align-items: center;
}
body.pakhuis-container > .pakhuis-header > .container > .login a.avatar img.avatar {
  display: inline-block;
  vertical-align: text-bottom;
  border-radius: 100%;
  width: 30px;
}
@media only screen and (max-width: 600px) {
  body.pakhuis-container > .pakhuis-header > .container > .login a.avatar img.avatar {
    width: 22px;
  }
}
body.pakhuis-container > .pakhuis-header > .container > .login a.avatar img.site-logo {
  color: white;
  margin-left: 10px;
  height: 18px;
}
body.pakhuis-container > .pakhuis-header > .container > .login a.avatar img.site-logo.site-logo-owik {
  height: 15px;
}
body.pakhuis-container > .pakhuis-header > .container > .login a.avatar i {
  display: block;
  margin-left: 10px;
  color: var(--theme-fg-color);
}
body.pakhuis-container > .pakhuis-header > .container > .login a.logout {
  display: inline-block;
  height: 60px;
  vertical-align: top;
  margin-left: 10px;
  color: white;
  font-size: 21px;
}
@media only screen and (max-width: 600px) {
  body.pakhuis-container > .pakhuis-header > .container > .login a.logout {
    font-size: 18px;
  }
}
body.pakhuis-container > .pakhuis-header > .container > .login a.sigaar {
  display: inline-block;
  --height: 27px;
  height: var(--height);
  line-height: calc(var(--height) - 2px);
  border-radius: calc(var(--height) * 0.5);
  padding: 0 15px;
  border: 1px solid white;
  color: white;
}
@media only screen and (max-width: 600px) {
  body.pakhuis-container > .pakhuis-header > .container > .login a.sigaar {
    --height: 19px;
  }
}
body.pakhuis-container > .pakhuis-header > .container > .login a.sigaar.login {
  background-color: #444;
  border: 1px solid #444;
}
body.pakhuis-container > .pakhuis-header > .container > .login a.sigaar.order {
  border: 1px solid rgba(255, 255, 255, 0.5);
}
body.pakhuis-container > .pakhuis-header > .container > .login a.sigaar + a.sigaar {
  margin-left: 5px;
}
body.pakhuis-container > .pakhuis-view-header {
  max-width: 100vw;
}
body.pakhuis-container > .pakhuis-view-header > .container {
  width: 1000px;
  max-width: 100%;
  height: inherit;
  line-height: inherit;
  display: flex;
}
body.pakhuis-container > .pakhuis-view-header > .container .logo-container {
  height: inherit;
  flex: 0 1 190px;
}
@media only screen and (max-width: 1010px) {
  body.pakhuis-container > .pakhuis-view-header > .container .logo-container {
    margin-left: 10px;
  }
}
body.pakhuis-container > .pakhuis-view-header > .container .logo-container .pakhuis-logo {
  display: flex;
  align-items: center;
  height: 100%;
}
body.pakhuis-container > .pakhuis-view-header > .container .logo-container .pakhuis-logo > img {
  height: 25px;
}
body.pakhuis-container > .modal-overlay {
  background-color: rgba(0, 0, 0, 0.8);
}
body.pakhuis-container > .modal-overlay > .modal-wrapper {
  vertical-align: top;
}
body.pakhuis-container.view-reviews > .pakhuis-filter-container {
  padding: 0;
}
body.pakhuis-container.view-reviews > .pakhuis-filter-container > h2 {
  display: none;
}
body.pakhuis-container .button-add::before {
  color: red;
}
body.pakhuis-container > .pakhuis-filter-container {
  margin-top: 20px;
}
@media only screen and (max-width: 600px) {
  body.pakhuis-container > .pakhuis-filter-container {
    margin-top: 8px;
  }
}
body.pakhuis-container > .pakhuis-filter-container > h2 {
  margin: 0 auto;
  line-height: 50px;
  font-size: 18px;
}
@media only screen and (max-width: 600px) {
  body.pakhuis-container > .pakhuis-filter-container > h2 {
    font-size: 15px;
  }
}
body.pakhuis-container > .pakhuis-filter-container > h2 a {
  color: #777;
  font-weight: normal;
}
body.pakhuis-container > .pakhuis-filter-container > p {
  margin-bottom: 10px;
}
body.pakhuis-container > .pakhuis-filter-container > main > form {
  display: flex;
  margin: 0 auto 14px auto;
  flex-wrap: nowrap;
  overflow: hidden;
  font-size: 15px;
}
body.pakhuis-container > .pakhuis-filter-container > main > form .pakhuis-filter {
  flex: 1;
  display: inline-block;
  height: 40px;
  line-height: 38px;
  white-space: nowrap;
  padding: 0 10px;
  border: 1px solid var(--theme-grey-line-color);
  border-radius: 20px;
  font-size: inherit;
  background-color: white;
  color: var(--theme-fg-color);
  -webkit-appearance: none;
}
@media only screen and (max-width: 600px) {
  body.pakhuis-container > .pakhuis-filter-container > main > form .pakhuis-filter {
    font-size: 13px;
    height: 30px;
    line-height: 28px;
    padding: 0 5px;
  }
}
body.pakhuis-container > .pakhuis-filter-container > main > form .pakhuis-filter.pakhuis-filter-search {
  flex: 2;
  margin-right: 5px;
}
body.pakhuis-container > .pakhuis-filter-container > main > form .pakhuis-filter.pakhuis-filter-search + .pakhuis-filter {
  margin-left: auto;
}
@media only screen and (max-width: 600px) {
  body.pakhuis-container > .pakhuis-filter-container > main > form .pakhuis-filter.pakhuis-filter-school, body.pakhuis-container > .pakhuis-filter-container > main > form .pakhuis-filter.pakhuis-filter-categorie {
    max-width: 90px;
    text-overflow: ellipsis;
  }
}
body.pakhuis-container > .pakhuis-filter-container > main > form .pakhuis-filter + .pakhuis-filter {
  margin-left: 5px;
}
body.pakhuis-container > .pakhuis-filter-container > main > form .pakhuis-filter option {
  background-color: white;
  height: 30px;
  border: 1px dotted red;
}
body.pakhuis-container > .pakhuis-filter-container > main > form .pakhuis-filter.filter-reset {
  flex: 0 0;
}
body.pakhuis-container > .pakhuis-filter-container > main > form .pakhuis-filter.filter-reset > i::before {
  font-size: 18px;
}
@media only screen and (max-width: 600px) {
  body.pakhuis-container > .pakhuis-filter-container > main > form .pakhuis-filter.filter-reset > i::before {
    font-size: 13px;
  }
}
body.pakhuis-container > .pakhuis-portfolio-list-container {
  max-width: 1200px;
}
body.pakhuis-container > .pakhuis-portfolio-container {
  position: relative;
  margin-top: 20px;
}
body.pakhuis-container > .pakhuis-portfolio-container .portfolio {
  max-width: 1000px;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);
}
body.pakhuis-container > .pakhuis-portfolio-container .portfolio > aside {
  min-height: calc(100vh - 60px - 40px);
}
body.pakhuis-container.view-reviews > .pakhuis-review > header > a.show-reviews {
  display: none;
}
body.pakhuis-container.view-reviews > .pakhuis-review > .pakhuis-review-strip {
  display: none;
}
body.pakhuis-container.view-mijn-portfolios > .pakhuis-review > header > a.back, body.pakhuis-container.view-default > .pakhuis-review > header > a.back {
  display: none;
}
body.pakhuis-container > .pakhuis-review > header {
  display: flex;
  width: 100%;
  max-width: 1200px;
  line-height: 50px;
}
@media only screen and (max-width: 600px) {
  body.pakhuis-container > .pakhuis-review > header {
    line-height: 40px;
  }
}
body.pakhuis-container > .pakhuis-review > header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  flex: 3;
}
@media only screen and (max-width: 600px) {
  body.pakhuis-container > .pakhuis-review > header h2 {
    font-size: 15px;
  }
}
body.pakhuis-container > .pakhuis-review > header a {
  text-transform: uppercase;
  text-align: right;
  white-space: nowrap;
  flex: 1;
}
@media only screen and (min-width: 600px) {
  body.pakhuis-container > .pakhuis-review > header a {
    font-size: 14px;
  }
}
body.pakhuis-container > .pakhuis-review > header a.show-reviews {
  color: #222;
}
body.pakhuis-container > .pakhuis-review > header a.back {
  margin-left: 0;
  margin-right: 10px;
  text-align: left;
  width: 20px;
  flex: unset;
}
body.pakhuis-container > .pakhuis-review > .pakhuis-review-strip {
  width: 100%;
  height: 114px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fit, 169px);
  grid-template-rows: 1fr 1fr;
  grid-gap: 2px 2px;
}
body.pakhuis-container > .pakhuis-review > .pakhuis-review-strip .portfolio-thumb {
  display: inline-block;
  width: 169px;
  height: 112px;
}
body.pakhuis-container.view-reviews > .pakhuis-portfolio-list-container > .pakhuis-portfolio-list > .portfolio-thumb.portfolio-thumb-type-page {
  width: 169px;
  height: 112px;
}
body.pakhuis-container .pakhuis-portfolio-list {
  display: flex;
  flex-flow: row wrap;
  padding: 0;
  gap: 2px 20px;
}
body.pakhuis-container:not(.view-mijn-portfolios) .pakhuis-portfolio-list .portfolio-thumb > .pepicon3-zichtbaar {
  display: none;
}
body.pakhuis-container.view-reviews .pakhuis-portfolio-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, 169px);
  grid-gap: 2px;
}
body.pakhuis-container.view-reviews .pakhuis-portfolio-list .portfolio-thumb.portfolio-thumb-type-page,
body.pakhuis-container .pakhuis-review-strip .portfolio-thumb.portfolio-thumb-type-page {
  position: relative;
  display: flex;
}
body.pakhuis-container.view-reviews .pakhuis-portfolio-list .portfolio-thumb.portfolio-thumb-type-page img,
body.pakhuis-container .pakhuis-review-strip .portfolio-thumb.portfolio-thumb-type-page img {
  height: 100%;
}
body.pakhuis-container.view-reviews .pakhuis-portfolio-list .portfolio-thumb.portfolio-thumb-type-page:not(:hover) .info,
body.pakhuis-container .pakhuis-review-strip .portfolio-thumb.portfolio-thumb-type-page:not(:hover) .info {
  display: none;
}
body.pakhuis-container.view-reviews .pakhuis-portfolio-list .portfolio-thumb.portfolio-thumb-type-page .stats,
body.pakhuis-container .pakhuis-review-strip .portfolio-thumb.portfolio-thumb-type-page .stats {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: rgba(245, 245, 245, 0.75);
  padding: 0px 5px;
  border-radius: 18px;
  height: 16px;
  line-height: 16px;
  font-size: 8px;
}
body.pakhuis-container.view-reviews .pakhuis-portfolio-list .portfolio-thumb.portfolio-thumb-type-page .info,
body.pakhuis-container .pakhuis-review-strip .portfolio-thumb.portfolio-thumb-type-page .info {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  padding: 5px 8px 8px 8px;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
  color: white;
}

.popup-nieuwe-opdracht {
  contain: none;
  width: 320px;
  border: 1px solid var(--theme-grey-line-color);
  -webkit-user-select: none;
  user-select: none;
}
.popup-nieuwe-opdracht > main {
  margin: 0;
}
.popup-nieuwe-opdracht > main > section {
  line-height: 34px;
  border-bottom: 1px solid var(--theme-grey-line-color);
  padding-bottom: 10px;
  padding: 0 20px 10px 20px;
}
.popup-nieuwe-opdracht > main > section + section {
  padding-top: 10px;
}
.popup-nieuwe-opdracht > main > section > h2 {
  font-size: 16px;
  font-weight: bold;
}
.popup-nieuwe-opdracht > main > section > *:not(.leerling-vakkenkiezer-popup) {
  display: flex;
  align-items: center;
  line-height: inherit;
  height: 34px;
}
.popup-nieuwe-opdracht > main > section label {
  display: flex;
  align-items: center;
}
.popup-nieuwe-opdracht > main > section label > input {
  line-height: 30px;
  height: 30px;
}
.popup-nieuwe-opdracht > main > section label > input[type=checkbox] {
  vertical-align: unset;
  margin: 0;
  margin-right: 0.5em;
}
.popup-nieuwe-opdracht > main > section label > input[name=titel] {
  width: 100%;
}
.popup-nieuwe-opdracht > main > section label > .datetime-picker {
  margin-left: auto;
}
.popup-nieuwe-opdracht > main > section label > .datetime-picker input {
  height: 30px;
  line-height: 30px;
}
.popup-nieuwe-opdracht > main > section.vakkenkiezer {
  position: relative;
  line-height: 23px;
  font-size: 14px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.popup-nieuwe-opdracht > main > section.vakkenkiezer img {
  width: 23px;
  height: 23px;
  margin-right: 0.5em;
  vertical-align: top;
}
.popup-nieuwe-opdracht > main > section.vakkenkiezer span {
  font-weight: normal;
}
.liniaal-main .popup-nieuwe-opdracht > main > section.vakkenkiezer .leerling-vakkenkiezer-popup {
  height: auto;
}

.popup-nieuwe-opdracht > main > section.options .sg1-koppel-skills {
  margin-left: auto;
}
.popup-nieuwe-opdracht > footer {
  margin: 0;
  line-height: 30px;
  padding: 15px 20px 25px 20px;
}

body > .modal-overlay > .modal-wrapper:has(> .popup-nieuwe-opdracht) {
  vertical-align: middle;
}
body > .modal-overlay > .modal-wrapper:has(> .popup-nieuwe-opdracht) > .popup-nieuwe-opdracht {
  position: unset;
  margin-left: calc(50vw - 150px);
}

.popup-externe-uitnodiging {
  width: 300px;
}
.popup-externe-uitnodiging.absoluut {
  position: fixed;
  top: 75px;
  left: calc(50vw + var(--content-width) * 0.5 - 455px + 5px);
}
.popup-externe-uitnodiging select, .popup-externe-uitnodiging input, .popup-externe-uitnodiging textarea {
  display: block;
  margin: 10px 0;
  width: 100%;
}
.popup-externe-uitnodiging select, .popup-externe-uitnodiging input {
  line-height: 30px;
  height: 30px;
}
.popup-externe-uitnodiging :invalid,
.popup-externe-uitnodiging .error {
  border-color: red;
  color: black;
}

body > .modal-overlay > .modal-wrapper:has(> .popup-externe-uitnodiging) {
  vertical-align: middle;
}
body > .modal-overlay > .modal-wrapper:has(> .popup-externe-uitnodiging) > .popup-externe-uitnodiging {
  position: unset;
  margin-left: calc(50vw - 150px);
}

.opdracht-header {
  position: relative;
  display: flex;
  --height: 250px;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  background-image: var(--bg-img);
  background-size: cover;
  height: var(--height);
}
.opdracht-header .upload-overlay {
  left: 0;
  height: 100%;
}
.opdracht-header.leerling .upload-overlay {
  flex: 100;
}
.opdracht-header:not(:hover) .upload-overlay:has(.popup-wijzig-image.hidden) {
  opacity: 0;
}
.opdracht-header:hover .upload-overlay:has(.popup-wijzig-image.hidden) {
  opacity: 1;
  cursor: pointer;
}
.opdracht-header .short-setter .fa-arrows-up-down {
  display: none;
}
.opdracht-header .short-setter .fa-arrows-to-line {
  display: inline;
}
.opdracht-header.short {
  --height: 80px;
}
.opdracht-header.short .short-setter .fa-arrows-up-down {
  display: inline;
}
.opdracht-header.short .short-setter .fa-arrows-to-line {
  display: none;
}
.opdracht-header .alt-sluitkruisje {
  margin: 0 10px 0 auto;
  line-height: 50px;
  font-size: 27px;
  --fa-primary-color: white;
  --fa-primary-opacity: 1;
  --fa-secondary-color: #888;
  --fa-secondary-opacity: 1;
}
.opdracht-header.darktext .info-blok select, .opdracht-header.darktext .info-blok textarea, .opdracht-header.darktext .info-blok input {
  color: var(--theme-fg-color);
}
.opdracht-header select, .opdracht-header textarea, .opdracht-header input {
  border: 1px solid var(--theme-border-color);
  background-color: color-mix(in hsl, var(--image-color), rgb(255, 255, 255) 20%);
  color: inherit;
}
.opdracht-header select:focus, .opdracht-header select:hover, .opdracht-header textarea:focus, .opdracht-header textarea:hover, .opdracht-header input:focus, .opdracht-header input:hover {
  border: 1px solid var(--theme-input-focused-border-color);
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--theme-fg-color);
}
.opdracht-header select:focus::placeholder, .opdracht-header select:hover::placeholder, .opdracht-header textarea:focus::placeholder, .opdracht-header textarea:hover::placeholder, .opdracht-header input:focus::placeholder, .opdracht-header input:hover::placeholder {
  color: reset;
}
.opdracht-header > h3 {
  line-height: 30px;
}
.opdracht-header > textarea[name=titel] {
  display: inline-block;
  width: 100%;
  height: 58px;
  padding: 5px;
  font-size: 14px;
}
.opdracht-header > h1 {
  max-width: 100%;
  max-height: 50px;
  line-height: 25px;
  margin-bottom: 15px;
  overflow-y: hidden;
  font-size: 18px;
  display: flex;
}
.opdracht-header > h1.prioriteit {
  color: #d0021a !important;
}
.opdracht-header > h1 a.domein {
  display: inline-block;
  height: 22px;
  margin-left: 20px;
  padding: 0 10px;
  border: 1px solid #aaa;
  border-radius: 3px;
  line-height: 22px;
  vertical-align: middle;
  font-size: 13px;
  background-color: white;
}
.opdracht-header > h1 a.domein:hover {
  opacity: 0.7;
}
.opdracht-header label.versie {
  display: flex;
  gap: 10px;
  line-height: 25px;
  margin-top: 10px;
}
.opdracht-header > h2 {
  max-width: 100%;
  margin-top: 5px;
  margin-bottom: 30px;
  font-size: 15px;
}
.opdracht-header > h2 img {
  width: 40px;
  height: 40px;
  border-radius: 100%;
}
.opdracht-header > h2 h3 {
  font-size: 14px;
  font-weight: bold;
}
.opdracht-header .avatar-image {
  position: absolute;
  left: var(--side-padding, 60px);
  top: calc((var(--height) - 20px - 35px) * 0.5 - 40px);
  width: 80px;
  height: 80px;
  border-radius: 100%;
  border: 1px solid rgba(119, 119, 119, 0.4);
}
.opdracht-header.short .avatar-image {
  position: relative;
  left: unset;
  top: unset;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  border: 1px solid rgba(119, 119, 119, 0.4);
}
.opdracht-header .uitwerking-buttons {
  position: absolute;
  bottom: 20px;
  left: var(--side-padding, 60px);
  display: flex;
  width: calc(100% - 2 * var(--side-padding, 60px));
  justify-content: space-between;
  font-size: 0;
}
.opdracht-header .uitwerking-buttons > div {
  font-size: 0;
  display: flex;
  align-items: center;
  flex: 1;
}
.opdracht-header .uitwerking-buttons > div.buttons {
  justify-content: right;
}
.opdracht-header .uitwerking-buttons > div:first-child > .button {
  --bg-color: rgba(255, 255, 255, 90%);
  --border-color: rgba(181, 181, 181, 0.35);
  --hover-bg-color: var(--theme-accent2-bg-color);
}
.opdracht-header .uitwerking-buttons > div:first-child > .button > i {
  font-size: 18px;
}
@media only screen and (max-width: 767.99px) {
  .opdracht-header .uitwerking-buttons > div:first-child > .button > i {
    font-size: 13px;
  }
}
.opdracht-header .uitwerking-buttons > div:first-child > .button .status-bolletje {
  vertical-align: unset;
}
@media only screen and (max-width: 767.99px) {
  .opdracht-header .uitwerking-buttons > div:first-child > .button .status-bolletje {
    width: 11px;
    height: 11px;
  }
}
.opdracht-header .uitwerking-buttons > div:first-child > .talk-button.unseen {
  background-color: #d0021a;
}
.opdracht-header .uitwerking-buttons > div:first-child > .talk-button.unseen i.icon-talk {
  color: white !important;
  font-size: 18px;
}
.opdracht-header .uitwerking-buttons .historie-popup {
  left: 0;
}
.opdracht-header .uitwerking-buttons .popup_verander_status {
  right: unset;
  top: 100%;
}

#profielbody > #content > .uitwerking {
  border-radius: 10px;
}

.uitwerking {
  --side-padding: var(--uitwerking-side-padding, 60px);
  background-color: white;
  border-radius: inherit;
}
@media only screen and (max-width: 767.99px) {
  .uitwerking {
    --side-padding: 20px;
  }
}
.uitwerking .button-white {
  --bg-color: rgba(255, 255, 255, 90%);
  --border-color: rgba(181, 181, 181, 0.35);
  --hover-bg-color: var(--theme-accent2-bg-color);
  --hover-fg-color: var(--fg-color);
}
.uitwerking > main {
  border-bottom: 1px solid var(--theme-border-color);
}
.uitwerking > main:not(.show-details) > section:not(.uitwerking-beoordeling):not(.opdracht-titel):not(.uitwerking-samenwerken):not(.uitwerking-historie) > h1 {
  display: none;
}
.uitwerking > main:not(.show-details) > section.opdracht-briefing {
  display: none;
}
.uitwerking > main:not(.show-details) > section.opdracht-titel .hide-briefing {
  display: none;
}
.uitwerking > main.show-details > section.opdracht-titel .show-briefing {
  display: none;
}
.uitwerking > main .section-nav {
  width: 100%;
  line-height: 81px;
  padding: 0px var(--side-padding) 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-top: 1px solid var(--theme-border-color);
}
.uitwerking > main .section-nav a {
  text-transform: uppercase;
}
@media only screen and (max-width: 767.99px) {
  .uitwerking > main .section-nav {
    flex-direction: column;
    line-height: normal;
    align-items: center;
    padding: 10px 0 0 0;
  }
  .uitwerking > main .section-nav > span {
    display: block;
    line-height: 35px;
  }
  .uitwerking > main .section-nav > span.rechts {
    text-align: center;
    font-size: 12px;
    width: 90%;
  }
}
.uitwerking > main .section-nav .button {
  --bg-color: var(--theme-accent-bg-color);
  --border-color: var(--theme-accent-bg-color);
  --hover-bg-color: var(--theme-accent2-bg-color);
  --hover-fg-color: var(--fg-color);
}
.uitwerking > main .section-nav .button.actief {
  --bg-color: var(--theme-link-active-bg-color);
  --border-color: var(--theme-link-active-bg-color);
  --fg-color: white;
  --hover-bg-color: var(--theme-link-active2-color);
}
.uitwerking > main > section {
  padding: 0px var(--side-padding) 0px;
}
.uitwerking > main > section.info-section > main {
  padding-bottom: 20px;
}
@media only screen and (max-width: 767.99px) {
  .uitwerking > main > section.info-section > main {
    overflow-x: auto;
  }
}
.uitwerking > main > section.collapsible > h1 {
  display: flex;
  align-items: center;
  line-height: 60px;
  -webkit-user-select: none;
  user-select: none;
}
.uitwerking > main > section.collapsible > h1::after {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  font-weight: 300;
  font-family: "Font Awesome 6 Pro";
  content: "\f077";
  margin-left: auto;
  line-height: inherit;
}
.uitwerking > main > section.collapsible:not(.open) > h1::after {
  content: "\f078";
}
.uitwerking > main > section.collapsible:not(.open) > main {
  display: none;
}
.uitwerking > main > section > h1 {
  font-size: 18px;
  font-weight: bold;
  line-height: 40px;
}
.uitwerking > main > section.opdracht-titel {
  padding-top: 30px;
}
.uitwerking > main > section.opdracht-titel > h2 {
  display: flex;
  line-height: 30px;
  font-size: 18px;
  font-weight: bold;
  color: #777;
}
.uitwerking > main > section.opdracht-titel > h2 img {
  border-radius: 100%;
  margin-right: 10px;
}
@media only screen and (max-width: 575.99px) {
  .uitwerking > main > section.opdracht-titel > h2 {
    margin-bottom: 10px;
  }
}
.uitwerking > main > section.opdracht-titel > h2 .avatar-image {
  width: 30px;
  vertical-align: middle;
  margin-left: 10px;
}
.uitwerking > main > section.opdracht-titel > h2 .button {
  margin-left: auto;
}
.uitwerking > main > section.opdracht-titel > h1 {
  line-height: 40px;
  font-size: 28px;
}
.uitwerking > main > section.opdracht-titel > h1 > span {
  font-size: 20px;
  opacity: 0.2;
  color: var(--theme-link-color);
}
.uitwerking > main > section.opdracht-titel > h1:hover > span {
  opacity: 1;
}
.uitwerking > main > section.opdracht-titel > input[name=titel] {
  width: min(400px, 100%);
  line-height: 40px;
  margin: 0;
  font-size: 28px;
}
.uitwerking > main > section.opdracht-titel.show-edit input.h1 {
  display: block;
}
.uitwerking > main > section.opdracht-titel.show-edit h1 {
  display: none;
}
.uitwerking > main > section.opdracht-titel:not(.show-edit) input.h1 {
  display: none;
}
.uitwerking > main > section.opdracht-titel:not(.show-edit) h1 {
  display: block;
}
.uitwerking > main > section.opdracht-briefing {
  padding-top: 20px;
  padding-bottom: 20px;
}
.uitwerking > main > section.opdracht-briefing .briefing_edit {
  color: var(--theme-grey-fg-color);
  margin-top: -5px;
  margin-bottom: 5px;
}
.uitwerking > main > section.uitwerking-samenwerken .status-1 {
  color: #ff5b1b;
}
.uitwerking > main > section.uitwerking-samenwerken .status-2 {
  color: #ffee00;
}
.uitwerking > main > section.uitwerking-samenwerken .status-3 {
  color: #74f137;
}
.uitwerking > main > section.uitwerking-samenwerken .left {
  display: inline-block;
  width: 240px;
  border-right: 1px solid var(--theme-grey-line-color);
  margin-left: -20px;
}
.uitwerking > main > section.uitwerking-samenwerken .left .deleerling {
  padding: 5px 0;
  padding-left: 20px;
  line-height: 40px;
  background-color: var(--theme-link-active-bg-color);
  color: var(--theme-link-active-fg-color);
}
.uitwerking > main > section.uitwerking-samenwerken .left img {
  width: 30px;
  margin-right: 0.7em;
}
.uitwerking > main > section.uitwerking-samenwerken .left ul {
  list-style-type: none;
  padding: 0;
}
.uitwerking > main > section.uitwerking-samenwerken .left ul li {
  padding: 5px 0;
  padding-left: 20px;
  border-bottom: 1px solid var(--theme-grey-line-color);
  line-height: 40px;
  font-size: 14px;
  font-weight: bold;
  opacity: 0.7;
}
.uitwerking > main > section.uitwerking-samenwerken .left ul li:first-child {
  border-top: 1px solid var(--theme-grey-line-color);
}
.uitwerking > main > section.uitwerking-samenwerken .left ul li:hover {
  opacity: 1;
  cursor: pointer;
}
.uitwerking > main > section.uitwerking-samenwerken .right {
  display: inline-block;
  width: calc(100% - 240px - 4px + 20px);
  vertical-align: top;
  padding: 0 0 0 10px;
}
.uitwerking > main > section.uitwerking-samenwerken .right .groep {
  border-radius: 5px;
  padding: 0;
  margin-bottom: 30px;
}
.uitwerking > main > section.uitwerking-samenwerken .right .groep .groep-header {
  border-radius: 2em;
  height: 2em;
  line-height: 2em;
  padding: 0 0 0 1em;
  background-color: var(--theme-accent2-bg-color);
  color: black;
  font-weight: bold;
}
.uitwerking > main > section.uitwerking-samenwerken .right .groep .placeholder-leerling,
.uitwerking > main > section.uitwerking-samenwerken .right .groep .leerling {
  border-bottom: 1px solid var(--theme-grey-line-color);
  padding: 0 4px;
  line-height: 40px;
  display: flex;
  align-items: center;
}
.uitwerking > main > section.uitwerking-samenwerken .right .groep .placeholder-leerling.pending .leerling-avatar,
.uitwerking > main > section.uitwerking-samenwerken .right .groep .placeholder-leerling.pending .leerling-naam,
.uitwerking > main > section.uitwerking-samenwerken .right .groep .leerling.pending .leerling-avatar,
.uitwerking > main > section.uitwerking-samenwerken .right .groep .leerling.pending .leerling-naam {
  opacity: 0.5;
}
.uitwerking > main > section.uitwerking-samenwerken .right .groep .placeholder-leerling .leerling-avatar,
.uitwerking > main > section.uitwerking-samenwerken .right .groep .leerling .leerling-avatar {
  border-radius: 100%;
  width: 30px;
  margin-right: 0.7em;
}
.uitwerking > main > section.uitwerking-samenwerken .right .groep .placeholder-leerling .placeholder-avatar,
.uitwerking > main > section.uitwerking-samenwerken .right .groep .leerling .placeholder-avatar {
  vertical-align: middle;
  border-radius: 100%;
  background-color: #bbb;
  border: 1px solid #888;
  width: 30px;
  height: 30px;
  display: inline-block;
  margin-right: 0.7em;
}
.uitwerking > main > section.uitwerking-samenwerken .right .groep .placeholder-leerling {
  font-style: italic;
  color: #aaa;
  cursor: pointer;
}
.uitwerking > main > section.de-uitwerking {
  position: relative;
  padding-top: 20px;
  padding-bottom: 20px;
}
.uitwerking > main > section.de-uitwerking > .message {
  border-top: 1px solid var(--theme-grey-line-color);
  width: 100%;
  font-size: 14px;
  text-transform: uppercase;
  line-height: 40px;
}
.uitwerking > main > section.de-uitwerking > .werkblad {
  min-height: 200px;
}
.uitwerking > main > section.de-uitwerking .filler,
.uitwerking > main > section.de-uitwerking .wysiwyg:not(.sw-veld) {
  min-height: 200px;
}
.uitwerking > main > section.de-uitwerking div.limited-melding {
  background-color: white;
  border-radius: 4px;
  color: darkred;
  padding: 0px;
  width: 100%;
  text-align: center;
}
.uitwerking > main > section.de-uitwerking .regels {
  position: relative;
  width: 15px;
  float: left;
  cursor: pointer;
  left: -20px;
}
.uitwerking > main > section.de-uitwerking .regels.nakijken {
  background: white url(../gfx/docent/regelblokje.png) repeat-y;
  left: 0;
}
.uitwerking > main > section.de-uitwerking .regels img {
  position: absolute;
  display: block;
  margin-top: 2px;
}
.regel_opmerking {
  width: 220px;
  height: 120px;
  position: absolute;
  z-index: 1;
  margin-left: -10px;
  background: white;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.5);
}
.regel_opmerking textarea {
  width: 100%;
  height: 64px;
}
.regel_opmerking .knopjes {
  height: 20px;
}
.regel_opmerking .knopjes .kleur {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
  border: none;
  color: transparent;
}
.regel_opmerking .knopjes .kleur.rood {
  background-color: #f40e0d;
}
.regel_opmerking .knopjes .kleur.oranje {
  background-color: #f5a623;
}
.regel_opmerking .knopjes .kleur.groen {
  background-color: #b7cf3a;
}
.regel_opmerking .knopjes .kleur.blauw {
  background-color: #4a90e2;
}
.regel_opmerking .knopjes .sluitkruisje {
  top: 0.2em;
  right: 0.2em;
}
.regel_opmerking::after {
  content: " ";
  position: absolute;
  display: block;
  right: -10px;
  top: calc(50% - 10px - 2px);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid magenta;
}
.regel_opmerking[kleur=r] {
  border-color: #f40e0d;
}
.regel_opmerking[kleur=o] {
  border-color: #f5a623;
}
.regel_opmerking[kleur=g] {
  border-color: #b7cf3a;
}
.regel_opmerking[kleur=b] {
  border-color: #4a90e2;
}
.regel_opmerking[kleur=r]::after {
  border-left-color: #f40e0d;
}
.regel_opmerking[kleur=o]::after {
  border-left-color: #f5a623;
}
.regel_opmerking[kleur=g]::after {
  border-left-color: #b7cf3a;
}
.regel_opmerking[kleur=b]::after {
  border-left-color: #4a90e2;
}

.uitwerking > main > section.de-uitwerking img.ballon_klein[kleur=r] {
  background: #f40e0d;
}
.uitwerking > main > section.de-uitwerking img.ballon_klein[kleur=o] {
  background: #f5a623;
}
.uitwerking > main > section.de-uitwerking img.ballon_klein[kleur=g] {
  background: #b7cf3a;
}
.uitwerking > main > section.de-uitwerking img.ballon_klein[kleur=b] {
  background: #4a90e2;
}
.uitwerking > main > section.de-uitwerking .lti-score {
  border: 1px solid #00cc00;
  padding: 0.5em;
  margin-top: 20px;
}
.uitwerking > main > section.de-uitwerking .lti-score .lti-score-header {
  text-transform: uppercase;
}
.uitwerking > main > section.de-uitwerking #pop_uitw {
  background-color: #c9c7c7;
  padding: 6px;
}
.uitwerking > main > section.de-uitwerking #pop_uitw div.shortlist {
  width: 160px;
  height: auto;
  float: left;
  margin: 0 24px 0 0;
}
.uitwerking > main > section.de-uitwerking #pop_uitw div.shortlist h2 {
  width: 151px;
  height: 22px;
  margin: 0px 0 2px 10px;
  background-repeat: no-repeat;
  font-size: 1px;
  overflow: hidden;
  text-indent: -100px;
}
.uitwerking > main > section.de-uitwerking #pop_uitw div.shortlist#competenties h2 {
  background-image: url(/gfx/leerling/pop/mijn_competenties_pop.gif);
}
.uitwerking > main > section.de-uitwerking #pop_uitw div.shortlist#beroepen h2 {
  background-image: url(/gfx/leerling/pop/mijn_beroepen_pop.gif);
}
.uitwerking > main > section.de-uitwerking #pop_uitw div.shortlist#interesses h2 {
  background-image: url(/gfx/leerling/pop/mijn_interesses_pop.gif);
}
.uitwerking > main > section.de-uitwerking #pop_uitw div.shortlist#competenties ul {
  background: url(/gfx/leerling/pop/bg_sl_comp2.png) no-repeat;
}
.uitwerking > main > section.de-uitwerking #pop_uitw div.shortlist#beroepen ul {
  background: url(/gfx/leerling/pop/bg_sl_beroep2.png) no-repeat;
}
.uitwerking > main > section.de-uitwerking #pop_uitw div.shortlist#interesses ul {
  background: url(/gfx/leerling/pop/bg_sl_opl2.png) no-repeat;
}
.uitwerking > main > section.de-uitwerking #pop_uitw div.shortlist ul {
  width: 172px;
  height: 86px;
  margin: 0;
  padding: 1px 0 0 0;
  list-style-type: none;
}
.uitwerking > main > section.de-uitwerking #pop_uitw div.shortlist ul li {
  font-style: italic;
  padding: 2px 0 2px 20px;
  margin: 1px 0 1px;
}
.uitwerking > main > section.de-uitwerking #pop_uitw div.shortlist ul li.nr1 {
  background: url(../gfx/leerling/pop/bg_sl_nummer1.png) no-repeat;
}
.uitwerking > main > section.de-uitwerking #pop_uitw div.shortlist ul li.nr2 {
  background: url(../gfx/leerling/pop/bg_sl_nummer2.png) no-repeat;
}
.uitwerking > main > section.de-uitwerking #pop_uitw div.shortlist ul li.nr3 {
  background: url(../gfx/leerling/pop/bg_sl_nummer3.png) no-repeat;
}
.uitwerking > main > section.de-uitwerking #pop_uitw #pop {
  padding: 12px 0 0 0;
  clear: left;
}
.uitwerking > main > section.de-uitwerking #pop_uitw #pop dl {
  margin-left: 10px;
}
.uitwerking > main > section.de-uitwerking #pop_uitw #pop dt {
  font-weight: bold;
}
.uitwerking > main > section.de-uitwerking #pop_uitw #pop dd {
  margin: 2px 10px;
}
.uitwerking > main > section.de-uitwerking #pop_uitw #pop div.footer {
  display: none;
}
.uitwerking > main > section.uitwerking-media {
  padding: 20px var(--side-padding);
}
.uitwerking > main > section.uitwerking-media .edit-media {
  padding-top: 20px;
}
.uitwerking > main > section.uitwerking-portfolio {
  padding: 20px var(--side-padding) 20px var(--side-padding);
}
.uitwerking > main > section.uitwerking-portfolio .portfolio-thumb-container {
  text-align: center;
}
.uitwerking > main > section.uitwerking-portfolio .portfolio-thumb-container .portfolio-thumb.portfolio-thumb-type-portfolio {
  width: 386px;
  aspect-ratio: unset;
}
.uitwerking > main > section.uitwerking-portfolio .portfolio-thumb-container .portfolio-thumb.portfolio-thumb-type-portfolio > .info {
  display: none;
}
.uitwerking > main > section.uitwerking-portfolio .button-container {
  text-align: center;
}
.uitwerking > main > section.uitwerking-portfolio .button-container .button {
  display: inline-block;
  position: relative;
  height: 30px;
  line-height: 28px;
  padding: 0 40px 0 0;
  margin: 5px 0 0 0;
  border: none;
  text-align: right;
  font-size: 14px;
  color: var(--theme-fg-color);
}
.uitwerking > main > section.uitwerking-portfolio .button-container .button:hover {
  background-color: inherit;
}
.uitwerking > main > section.uitwerking-portfolio .button-container .button:hover::after {
  background-color: var(--theme-accent8-bg-color);
}
.uitwerking > main > section.uitwerking-portfolio .button-container .button::after {
  box-sizing: content-box;
  position: absolute;
  right: 0;
  height: 30px;
  width: 30px;
  border-radius: inherit;
  text-align: center;
  background-color: #777;
  color: white;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  font-weight: 400;
  font-family: "Font Awesome 6 Pro";
  content: "\f08e";
}
.uitwerking > main > section.uitwerking-historie > main {
  padding-bottom: 20px;
}
.uitwerking > main > section.uitwerking-historie > main > div {
  display: grid;
  grid-template-areas: "datum label auteur" "text text text";
  grid-template-columns: auto auto 1fr;
  gap: 0 10px;
  align-items: center;
  padding: 15px 0;
}
.uitwerking > main > section.uitwerking-historie > main > div span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.uitwerking > main > section.uitwerking-historie > main > div span .initials {
  display: none;
}
@media only screen and (max-width: 767.99px) {
  .uitwerking > main > section.uitwerking-historie > main > div span .initials {
    display: inline-block;
  }
  .uitwerking > main > section.uitwerking-historie > main > div span .full {
    display: none;
  }
}
.uitwerking > main > section.uitwerking-historie > main > div > div.bestanden {
  grid-area: text;
  margin-top: 10px;
}
.uitwerking > main > section.uitwerking-historie > main > div > div.bestanden > div > a {
  display: flex;
  align-items: center;
  gap: 5px;
}
.uitwerking > main > section.uitwerking-historie > main > div > div.bestanden > div > a > img {
  width: 25px;
}
.uitwerking > main > section.uitwerking-historie > main > div .werkblad {
  grid-area: text;
  margin-top: 10px;
}
.uitwerking > main > section.uitwerking-beoordeling > h1 > .sg1-koppel-skills,
.uitwerking > main > section.uitwerking-samenwerken > h1 > .sg1-koppel-skills {
  font-size: 14px;
  margin-left: 20px;
  font-weight: normal;
}
.uitwerking > main > section.uitwerking-beoordeling > h1 .externe-feedback,
.uitwerking > main > section.uitwerking-samenwerken > h1 .externe-feedback {
  margin-left: auto;
  position: relative;
}
.uitwerking > main > section.uitwerking-beoordeling > h1:has(.externe-feedback)::after,
.uitwerking > main > section.uitwerking-samenwerken > h1:has(.externe-feedback)::after {
  margin-left: 10px;
}
.uitwerking > main > section.uitwerking-beoordeling > main,
.uitwerking > main > section.uitwerking-samenwerken > main {
  padding-bottom: 20px;
}
.uitwerking > main > section.uitwerking-beoordeling .opleiding-beoordeling .indicator_grid,
.uitwerking > main > section.uitwerking-samenwerken .opleiding-beoordeling .indicator_grid {
  display: grid;
  grid-template-columns: 80px auto;
  margin-top: 10px;
}
@media only screen and (max-width: 767.99px) {
  .uitwerking > main > section.uitwerking-beoordeling .opleiding-beoordeling .indicator_grid,
  .uitwerking > main > section.uitwerking-samenwerken .opleiding-beoordeling .indicator_grid {
    grid-template-columns: 0px 1fr;
  }
}
.uitwerking > main > section.uitwerking-beoordeling .opleiding-beoordeling .indicator_grid > .grid-cell:nth-child(2n) > h1,
.uitwerking > main > section.uitwerking-beoordeling .opleiding-beoordeling .indicator_grid > .grid-cell:nth-child(2n) > .indicator_beoordeling > *,
.uitwerking > main > section.uitwerking-samenwerken .opleiding-beoordeling .indicator_grid > .grid-cell:nth-child(2n) > h1,
.uitwerking > main > section.uitwerking-samenwerken .opleiding-beoordeling .indicator_grid > .grid-cell:nth-child(2n) > .indicator_beoordeling > * {
  padding-left: 20px !important;
}
.uitwerking > main > section.uitwerking-beoordeling .opleiding-beoordeling .buttons,
.uitwerking > main > section.uitwerking-samenwerken .opleiding-beoordeling .buttons {
  margin-top: 10px;
  height: 30px;
  text-align: right;
}
.uitwerking > main > section.uitwerking-beoordeling .opleiding-beoordeling div.opmerking,
.uitwerking > main > section.uitwerking-samenwerken .opleiding-beoordeling div.opmerking {
  margin-top: 10px;
  display: flex;
}
.uitwerking > main > section.uitwerking-beoordeling .opleiding-beoordeling .opmerking.beoordeling span.icoon,
.uitwerking > main > section.uitwerking-samenwerken .opleiding-beoordeling .opmerking.beoordeling span.icoon {
  flex: 0 1 65px;
  display: inline-block;
  height: 80px;
  font-size: 50px;
  color: var(--theme-light-fg-color);
}
.uitwerking > main > section.uitwerking-beoordeling .opleiding-beoordeling .opmerking.beoordeling .wysiwyg,
.uitwerking > main > section.uitwerking-samenwerken .opleiding-beoordeling .opmerking.beoordeling .wysiwyg {
  flex: 1;
}
.uitwerking > main > section.uitwerking-beoordeling .opleiding-beoordeling .opmerking.beoordeling textarea,
.uitwerking > main > section.uitwerking-samenwerken .opleiding-beoordeling .opmerking.beoordeling textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  color: #636363;
}
.uitwerking > main > section.uitwerking-beoordeling .opleiding-beoordeling .opmerking.beoordeling div.werkblad,
.uitwerking > main > section.uitwerking-samenwerken .opleiding-beoordeling .opmerking.beoordeling div.werkblad {
  width: 100%;
  resize: vertical;
  color: #636363;
  min-height: 120px;
}
.uitwerking > main > section.uitwerking-beoordeling .uitnodigen,
.uitwerking > main > section.uitwerking-beoordeling .sg1-feedback-link,
.uitwerking > main > section.uitwerking-samenwerken .uitnodigen,
.uitwerking > main > section.uitwerking-samenwerken .sg1-feedback-link {
  margin-left: 20px;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 13px;
}
.uitwerking > main > section.uitwerking-evaluatie-uitslag {
  line-height: 40px;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  color: white;
}
.uitwerking > main > section.uitwerking-evaluatie-uitslag.evaluatie-voldaan {
  background-color: #3ba700;
}
.uitwerking > main > section.uitwerking-evaluatie-uitslag.evaluatie-niet-voldaan {
  background-color: #444;
}
.uitwerking > main #uitwerking .sw-alineas .sw-veld {
  padding-bottom: 10px;
}
.uitwerking > main .lti {
  text-align: center;
}
.uitwerking > main .lti .lti-launch {
  background-color: #3faae1;
  font-size: 14px;
  height: 42px;
}
.uitwerking > footer {
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  line-height: 90px;
  padding: 0 var(--side-padding);
}
.uitwerking > footer .left select {
  height: 30px;
  line-height: 30px;
}
.uitwerking > footer > .right,
.uitwerking > footer .footer_right {
  width: auto;
  text-align: right;
}
.uitwerking > footer > .right #bewaard,
.uitwerking > footer .footer_right #bewaard {
  margin-right: 10px;
}
@media only screen and (max-width: 767.99px) {
  .uitwerking > footer > .right #bewaard,
  .uitwerking > footer .footer_right #bewaard {
    display: none;
  }
}
.uitwerking > footer > .footer_left {
  width: auto;
  display: flex;
  flex-direction: row;
}
.uitwerking > footer > .footer_left .caps {
  text-transform: uppercase;
  font-size: 12px;
  color: var(--theme-grey-fg-color);
}
.uitwerking > footer > .footer_left form {
  line-height: 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.uitwerking > footer > .footer_left form > * {
  line-height: 20px;
}
.uitwerking > footer > .footer_left form > * select {
  height: 120x;
}
.uitwerking > footer > .footer_left form select {
  border: 1px solid var(--theme-border-color);
  border-radius: 3px;
  padding: 3px;
  background-color: var(--theme-accent4-bg-color);
}
.uitwerking > footer > .footer_left .pas-periode-leerjaar-aan {
  margin-right: 2em;
}
.uitwerking > footer form {
  display: inline-block;
}
.uitwerking > footer .button > .status-bolletje {
  --size: 12px;
}
.uitwerking .vaardigheden-select-popup {
  margin-left: -500px;
}
@media only screen and (max-width: 767.99px) {
  .uitwerking .vaardigheden-select-popup {
    width: 100%;
    left: 0;
    margin-top: -100px;
    margin-left: 0;
  }
}
.uitwerking .popup-externe-uitnodiging {
  margin-left: -150px;
}
@media only screen and (max-width: 767.99px) {
  .uitwerking .popup-externe-uitnodiging {
    margin-left: -80px;
  }
}

form#uitwerking_edit {
  border-radius: inherit;
}
form#uitwerking_edit main textarea[name=opdracht_omschrijving] {
  min-height: 200px;
  width: 100%;
  resize: vertical;
}
form#uitwerking_edit main .de-uitwerking .wysiwyg .werkblad {
  min-height: 400px;
}
form#uitwerking_edit main .de-uitwerking .vragenlijst > .vraag-blok {
  padding-top: 20px;
  border-top: 1px solid var(--theme-grey-line-color);
}
form#uitwerking_edit main .de-uitwerking .vragenlijst > .vraag-blok td.vraag-kop-td {
  padding: 0px;
}
form#uitwerking_edit main .de-uitwerking .vragenlijst > .vraag-blok .vraagtitel {
  font-size: 20px;
}
form#uitwerking_edit main .de-uitwerking .vragenlijst > .vraag-blok .vraag {
  padding: 10px 0 10px 0;
}
form#uitwerking_edit main .de-uitwerking .vragenlijst > .vraag-blok:first-of-type {
  display: block;
}
form#uitwerking_edit main .de-uitwerking .wizard-container .wysiwyg .werkblad {
  height: 200px;
  min-height: 200px;
}
form#uitwerking_edit main .de-uitwerking .wizard-container .vragenlijst > .vraag-blok {
  display: none;
  min-height: 285px;
}
form#uitwerking_edit main .de-uitwerking .wizard-container .vragenlijst > .vraag-blok .vraag-kop {
  line-height: 20px;
}
form#uitwerking_edit main .de-uitwerking .wizard-container .vragenlijst > .vraag-blok .vraagtitel {
  font-size: 20px;
}
form#uitwerking_edit main .de-uitwerking .wizard-container .vragenlijst > .vraag-blok .vraag {
  padding: 10px 0 10px 0;
}
form#uitwerking_edit main .de-uitwerking .wizard-container .vragenlijst > .vraag-blok:first-of-type {
  display: block;
}
form#uitwerking_edit main .de-uitwerking .wizard-container > footer {
  text-align: center;
  padding: 20px 0;
}
form#uitwerking_edit main .de-uitwerking .wizard-container > footer .wizard-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
form#uitwerking_edit main .de-uitwerking .wizard-container > footer .wizard-buttons button {
  flex-grow: 1;
  height: 23px;
  line-height: 23px;
  width: 200px;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  font-size: 15px;
}
form#uitwerking_edit main .de-uitwerking .wizard-container > footer .wizard-buttons button.wizard-previous {
  justify-content: flex-end;
}
form#uitwerking_edit main .de-uitwerking .wizard-container > footer .wizard-buttons button.wizard-previous:not(:disabled) {
  cursor: pointer;
}
form#uitwerking_edit main .de-uitwerking .wizard-container > footer .wizard-buttons button.wizard-next {
  justify-content: flex-start;
}
form#uitwerking_edit main .de-uitwerking .wizard-container > footer .wizard-buttons button.wizard-next:not(:disabled) {
  cursor: pointer;
}
form#uitwerking_edit main .de-uitwerking .wizard-container > footer .wizard-buttons button .pepicon3 {
  font-size: 19px;
}
form#uitwerking_edit main .de-uitwerking .wizard-container > footer .wizard-buttons button:hover {
  background: inherit;
}
form#uitwerking_edit main .de-uitwerking .wizard-container > footer .wizard-buttons button:hover:not(:disabled) {
  color: var(--theme-link-color);
}
form#uitwerking_edit main .de-uitwerking .wizard-container > footer .wizard-buttons button:not(:disabled) .pepicon3 {
  color: var(--theme-link-color);
}
form#uitwerking_edit main .de-uitwerking .wizard-container > footer .wizard-buttons .button-separator {
  border-left: 1px solid #999;
  width: 0;
  height: 15px;
}
form#uitwerking_edit main .de-uitwerking .wizard-container > footer .wizard-progress {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  gap: 5px;
}
form#uitwerking_edit main .de-uitwerking .wizard-container > footer .wizard-progress .wizard-before,
form#uitwerking_edit main .de-uitwerking .wizard-container > footer .wizard-progress .wizard-current,
form#uitwerking_edit main .de-uitwerking .wizard-container > footer .wizard-progress .wizard-after {
  width: 12px;
  height: 12px;
  border-radius: 100%;
  border: 1px solid #eee;
  background: #eee;
}
form#uitwerking_edit main .de-uitwerking .wizard-container > footer .wizard-progress .wizard-current {
  background-color: #86cb31;
  border: 1px solid #86cb31;
}
form#uitwerking_edit main .de-uitwerking .sw-alineas:not(.sw-editing) .sw-veld.wysiwyg:hover {
  margin-left: -8px;
  margin-right: -8px;
  margin-bottom: 22px;
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 8px;
  border: 1px solid var(--theme-alt2-border-color);
}
form#uitwerking_edit main .de-uitwerking .sw-alineas:not(.sw-editing) .sw-veld.wysiwyg:hover[data-sw-lock]:not([data-sw-lock=""]), form#uitwerking_edit main .de-uitwerking .sw-alineas:not(.sw-editing) .sw-veld.wysiwyg:hover[data-sw-lock]:not([data-sw-lock=""]) .sw-buttons-view {
  border-color: #ed9da7;
}
form#uitwerking_edit main .de-uitwerking .sw-alineas:not(.sw-editing) .sw-veld.wysiwyg:hover .sw-buttons-view {
  border-bottom: 1px solid var(--theme-alt2-border-color);
  margin-left: -8px;
  margin-right: -8px;
  margin-bottom: 4px;
  margin-top: -30px;
}
form#uitwerking_edit main .de-uitwerking .sw-alineas:not(.sw-editing) .sw-veld.wysiwyg:hover .sw-buttons-view > .button,
form#uitwerking_edit main .de-uitwerking .sw-alineas:not(.sw-editing) .sw-veld.wysiwyg:hover .sw-buttons-view > .locked-for-editing {
  top: 2px;
}
form#uitwerking_edit main .de-uitwerking .sw-alineas .sw-veld.wysiwyg {
  margin-bottom: 30px;
  margin-top: 5px;
  border: 1px solid transparent;
}
form#uitwerking_edit main .de-uitwerking .sw-alineas .sw-veld.wysiwyg.focused .sw-buttons-view {
  display: none;
}
form#uitwerking_edit main .de-uitwerking .sw-alineas .sw-veld.wysiwyg:not(.focused) .sw-buttons-edit {
  display: none;
}
form#uitwerking_edit main .de-uitwerking .sw-alineas .sw-veld.wysiwyg:not(.focused):not(:hover) .sw-buttons-view {
  display: none;
}
form#uitwerking_edit main .de-uitwerking .sw-alineas .sw-veld.wysiwyg .sw-buttons-view {
  position: relative;
  line-height: 25px;
  margin-top: -25px;
}
form#uitwerking_edit main .de-uitwerking .sw-alineas .sw-veld.wysiwyg .sw-buttons-view:hover {
  cursor: grab;
}
form#uitwerking_edit main .de-uitwerking .sw-alineas .sw-veld.wysiwyg .sw-buttons-view a.button {
  position: relative;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
  font-size: 13px;
  border: none;
  background-color: transparent;
  color: var(--theme-link-color);
}
form#uitwerking_edit main .de-uitwerking .sw-alineas .sw-veld.wysiwyg .sw-buttons-view a.button::before {
  font-family: "Font Awesome 6 Pro";
  padding-right: 0.5em;
}
form#uitwerking_edit main .de-uitwerking .sw-alineas .sw-veld.wysiwyg .sw-buttons-view a.button.edit-icon::before {
  content: "\f044";
}
form#uitwerking_edit main .de-uitwerking .sw-alineas .sw-veld.wysiwyg .sw-buttons-view a.button.save-icon::before {
  content: "\f0c7";
}
form#uitwerking_edit main .de-uitwerking .sw-alineas .sw-veld.wysiwyg .sw-buttons-view a.button.delete-icon::before {
  content: "\f1f8";
}
form#uitwerking_edit main .de-uitwerking .sw-alineas .sw-veld.wysiwyg .sw-buttons-view a.button::before {
  display: none;
}
form#uitwerking_edit main .de-uitwerking .sw-alineas .sw-veld.wysiwyg .sw-buttons-view a.button.delete-icon::before {
  display: inline-block;
  position: relative;
  top: 5px;
}
form#uitwerking_edit main .de-uitwerking .sw-alineas .sw-veld.wysiwyg .sw-buttons-view a.button.delete-icon {
  position: absolute;
  right: 0;
}
form#uitwerking_edit main .de-uitwerking .sw-alineas .sw-veld.wysiwyg .sw-buttons-view a.button:hover {
  background-color: inherit !important;
  color: inherit !important;
}
form#uitwerking_edit main .de-uitwerking .sw-alineas .sw-veld.wysiwyg .sw-buttons-view .locked-for-editing {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  margin-left: 33%;
  position: relative;
}
form#uitwerking_edit main .de-uitwerking .sw-alineas .sw-veld.wysiwyg .sw-buttons-view .locked-for-editing .editor {
  width: 16px;
  border-radius: 100%;
}
form#uitwerking_edit main .de-uitwerking .sw-alineas .sw-veld.wysiwyg .sw-buttons-edit {
  text-align: right;
  height: 25px;
  margin-bottom: -25px;
}
form#uitwerking_edit main .de-uitwerking .sw-alineas .sw-veld.wysiwyg .sw-buttons-edit .button {
  display: inline-block;
  height: 100%;
  background-color: #4b8eff;
  color: white;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-color: #99bfff;
  border-top: none;
}
form#uitwerking_edit main .de-uitwerking .sw-alineas .sw-veld.wysiwyg .werkblad {
  min-height: 100px;
}
form#uitwerking_edit main .de-uitwerking .sw-alineas .sw-veld.wysiwyg.sw-loading .sw-buttons-view {
  visibility: hidden;
}
form#uitwerking_edit main .de-uitwerking .sw-alineas .sw-veld.wysiwyg.sw-loading .wysiwyg-wb {
  border-color: orange;
  background-color: rgba(0, 0, 0, 0.3);
}
form#uitwerking_edit main .de-uitwerking .sw-alineas .sw-veld.wysiwyg.sw-loading .wysiwyg-wb::before {
  content: "laden...";
  position: absolute;
  display: block;
  color: white;
  padding: 0.5em;
}
form#uitwerking_edit main .de-uitwerking .sw-alineas .sw-veld.wysiwyg.sw-saving .sw-buttons-view .edit-alinea {
  visibility: hidden;
}
form#uitwerking_edit main .de-uitwerking .sw-alineas .sw-veld.wysiwyg.sw-saving .wysiwyg-wb {
  border-color: orange;
  background-color: rgba(0, 0, 0, 0.3);
}
form#uitwerking_edit main .de-uitwerking .sw-alineas .sw-veld.wysiwyg.sw-saving .wysiwyg-wb::before {
  content: "opslaan...";
  position: absolute;
  display: block;
  color: white;
  padding: 0.5em;
}
form#uitwerking_edit main .de-uitwerking .sw-alineas .sw-veld.wysiwyg.ui-sortable-helper {
  background-color: var(--theme-accent-bg-color);
  box-shadow: 4px 4px 15px 2px rgba(0, 0, 0, 0.5);
}
form#uitwerking_edit main .de-uitwerking .sw-alineas .sw-veld.wysiwyg.ui-sortable-helper .sw-buttons-view,
form#uitwerking_edit main .de-uitwerking .sw-alineas .sw-veld.wysiwyg.ui-sortable-helper .sw-buttons-edit,
form#uitwerking_edit main .de-uitwerking .sw-alineas .sw-veld.wysiwyg.ui-sortable-helper .wysiwyg-toolbar {
  display: none;
}
form#uitwerking_edit main .de-uitwerking .sw-alineas.sw-editing .sw-veld.wysiwyg .sw-buttons-view {
  display: none;
}
form#uitwerking_edit main .de-uitwerking .sw-alineas.sw-editing .sw-veld.wysiwyg:not(.focused) .werkblad {
  opacity: 0.5;
}
form#uitwerking_edit main .de-uitwerking .add-alinea {
  margin-top: 40px;
  text-align: center;
}
form#uitwerking_edit main .de-uitwerking .add-alinea .explain-add {
  width: 50%;
  margin: 0 auto;
  padding: 1em;
}
form#uitwerking_edit main .de-uitwerking .add-alinea span {
  font-size: 16px;
  font-weight: bold;
  display: block;
  line-height: 30px;
}
form#uitwerking_edit main .de-uitwerking .sw-alineas.sw-editing + .add-alinea {
  opacity: 0.5;
}
form#uitwerking_edit main .de-uitwerking section {
  padding-top: 20px;
}
.rubrics-grid {
  display: grid;
  grid-template-columns: 80px auto;
  grid-gap: 20px;
}
.rubrics-grid > .rubrics-category h1 {
  line-height: 1;
  margin: 10px 0 20px 0;
  font-size: 16px;
  font-weight: bold;
}
.rubrics-grid > .rubrics-category > .rubrics-skill h2 {
  line-height: 20px;
  margin: 10px 0 10px 0;
  font-size: 14px;
  font-weight: bold;
}
.rubrics-grid > .rubrics-category > .rubrics-skill > .rubrics-competentie {
  line-height: 30px;
  height: 30px;
}
.rubrics-grid > .rubrics-category > .rubrics-skill > .rubrics-competentie h3 {
  display: inline-block;
  width: 390px;
  margin: 0;
  line-height: inherit;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  color: #999;
}
.rubrics-grid > .rubrics-category > .rubrics-skill > .rubrics-competentie .schaal {
  display: inline-block;
  margin: 0;
  float: right;
}
.rubrics-grid > .rubrics-category > .rubrics-skill > .rubrics-competentie .bolletje {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 100%;
  border: 1px solid grey;
  margin: 8px 13px;
}

.historie-popup-uitwerking {
  top: 100%;
  left: 0;
  width: 480px;
}
.historie-popup-uitwerking.absoluut {
  position: fixed;
  top: 75px;
  left: calc(50vw + var(--content-width) * 0.5 - 455px + 5px);
}
.historie-popup-uitwerking > main {
  margin: 0;
}
.historie-popup-uitwerking > main > h2 {
  display: flex;
  line-height: 20px;
  padding: 0 20px;
  padding-bottom: 15px;
  font-size: 16px;
  font-weight: normal;
  border-bottom: 1px solid var(--theme-grey-line-color);
}
.historie-popup-uitwerking > main > h2 .laatst-gewijzigd {
  margin-left: auto;
  font-size: 12px;
  font-style: italic;
  color: var(--theme-grey-fg-color);
}
.historie-popup-uitwerking > main > .historie-grid {
  display: grid;
  grid-template-columns: 60px auto 1fr;
  grid-gap: 3px 10px;
  width: auto;
  height: auto;
  min-height: 100px;
  line-height: 21px;
  padding: 15px 20px 20px 20px;
}
.historie-popup-uitwerking > main > .historie-grid .auteur {
  font-weight: bold;
}
.historie-popup-uitwerking > main > .historie-grid .datum {
  white-space: nowrap;
}
.historie-popup-uitwerking > main > .historie-grid .titel .tekst {
  white-space: pre-line;
}

body.docent-pagina .werkblad.nakijken {
  cursor: url("/fonts/cursor_commentaar.png") 14 15, crosshair;
}

.werkblad .docent-commentaar-icon {
  cursor: pointer;
  margin: 0 0.2em;
}
.werkblad .docent-commentaar-icon::before {
  content: "‚";
  font-family: pepicon3;
  color: red;
}

.werkblad .docent-commentaar {
  border-bottom: 2px solid red;
}

.docent-commentaar-popup {
  position: absolute;
  z-index: 1;
  border: 1px solid var(--theme-border-color);
  border-radius: 4px;
  padding: 15px;
  background-color: white;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.docent-commentaar-popup main {
  padding: 10px 0;
}
.docent-commentaar-popup main textarea {
  min-width: 300px;
  min-height: 40px;
  resize: both;
}
.docent-commentaar-popup footer {
  text-align: right;
}

#statuspopup .statuskeuze {
  display: block;
}
#statuspopup .statuskeuze > i {
  display: inline-block;
  width: 30px;
  text-align: center;
  font-size: 150%;
}
#statuspopup .statuskeuze.selected {
  color: black;
}
#statuspopup .statuskeuze.selected:hover {
  color: inherit;
}
#statuspopup .statuskeuze span.status-bolletje {
  display: inline-block;
  margin-right: 4px;
}

.uitwerking-talk {
  width: 420px;
  max-width: 100vw;
  max-height: 80vh;
  position: absolute;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
  background-color: #fffcde;
  overflow-y: auto;
}
.uitwerking-talk.inactive form, .uitwerking-talk.inactive header {
  opacity: 0.5;
}
.uitwerking-talk > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 13px 10px;
}
.uitwerking-talk > header h1 {
  display: inline-block;
  margin: 0;
  padding-right: 2em;
  font-weight: bold;
  font-size: 15px;
}
.uitwerking-talk > header .talk-actions {
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
}
.uitwerking-talk > main > form {
  padding: 0 10px 10px 10px;
}
.uitwerking-talk > main > form header {
  padding-bottom: 5px;
}
.uitwerking-talk > main > form header span, .uitwerking-talk > main > form header a {
  padding-right: 0.4em;
  text-transform: uppercase;
  font-size: 14px;
}
.uitwerking-talk > main > form main .werkblad {
  min-height: 100px;
  background-color: white !important;
}
.uitwerking-talk > main article {
  padding: 10px 10px 10px 10px;
  border-bottom: 1px solid var(--theme-alt-border-color);
}
.uitwerking-talk > main article:first-of-type {
  padding-top: 10px;
  border-top: 1px solid var(--theme-alt-border-color);
}
.uitwerking-talk > main article > header {
  margin-bottom: 10px;
}
.uitwerking-talk > main article > header .entry-author {
  font-size: 13px;
  font-weight: bold;
}
.uitwerking-talk > main article > header .entry-timestamp {
  font-size: 13px;
  color: #999;
  padding-left: 1em;
}
.uitwerking-talk > main article > footer {
  padding-top: 5px;
  padding-bottom: 10px;
}
.uitwerking-talk > main article > footer form {
  display: inline;
}
.uitwerking-talk > main article > footer form button, .uitwerking-talk > main article > footer form button:hover {
  height: auto;
  margin: 0 0.5em 0 0;
  padding: 0;
  border: none;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--theme-link-color);
  background-color: transparent;
}
.uitwerking-talk > main article:last-of-type > footer {
  padding-bottom: 0;
  border-bottom: none;
}

:not(section.talkpage) .uitwerking-talk > header {
  padding: 24px 20px 10px 20px;
}
:not(section.talkpage) .uitwerking-talk > header h1 {
  font-size: 18px;
}
:not(section.talkpage) .uitwerking-talk main {
  padding: 0px 5px 5px 5px;
}
:not(section.talkpage) .uitwerking-talk main form {
  padding-bottom: 5px;
}
:not(section.talkpage) .uitwerking-talk main article header {
  padding: 0px 5px 5px 5px;
}
:not(section.talkpage) .uitwerking-talk main article footer {
  margin-top: 0;
  padding-top: 0;
}
:not(section.talkpage) .uitwerking-talk footer {
  margin-top: 10px;
  padding: 5px;
}

section.talkpage {
  height: auto;
  padding: 0;
  overflow-y: auto;
}
section.talkpage .links {
  padding: 15px 20px;
}
section.talkpage .uitwerking-talk {
  width: 100%;
  height: auto;
  position: relative;
  border-radius: 3px;
  box-shadow: none;
  background-color: #fffcde;
}
section.talkpage .uitwerking-talk .close {
  display: none;
}
section.talkpage .uitwerking-talk > header {
  padding: 18px 10px;
}
section.talkpage .uitwerking-talk > header h1 {
  font-size: 15px;
}
section.talkpage .uitwerking-talk main {
  padding: 0;
}
section.talkpage .uitwerking-talk main form {
  padding-bottom: 10px;
}
section.talkpage .uitwerking-talk main button:disabled:hover {
  background-color: white;
  color: #ccc;
}
section.talkpage .uitwerking-talk main article header {
  padding: 0;
}
section.talkpage .uitwerking-talk main article footer {
  margin-top: 0;
  margin-bottom: 0px;
  padding-top: 5px;
  padding-bottom: 0px;
}
section.talkpage .uitwerking-talk footer {
  padding: 0;
  margin-top: 10px;
}

.icon-talk.unseen {
  color: #d0021a;
}

.uitwerking .talkpage .icon-talk {
  color: white !important;
}
.uitwerking .talkpage .icon-talk.unseen {
  color: #d0021a !important;
}

table .icon-talk::before, .nakijken .icon-talk::before {
  padding: 4px;
}

table .icon-talk {
  vertical-align: top;
}

table .icon-talk.unseen::before, .nakijken:not(.selected) .icon-talk.unseen::before {
  border-radius: 100%;
  color: white;
  background-color: #d0021a;
}

.popup-activiteit .icon-talk {
  padding: 2px;
}
.popup-activiteit .icon-talk.unseen {
  border-radius: 100%;
  background-color: #d0021a;
  color: white;
}

#planneritem {
  position: absolute;
  width: 665px;
  height: auto;
  padding: 0;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
  background-color: white;
  border-radius: 4px;
}

.planneritem {
  display: flex;
}
.planneritem .left {
  width: 430px;
  min-height: 320px;
}
.planneritem .left > header {
  line-height: 60px;
  padding: 0 20px;
}
.planneritem .left > header h1 {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
}
.planneritem .left > header h1 i {
  margin-right: 0px;
  margin-top: -2px;
  font-size: 24px;
}
.planneritem .left > main .regel {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 10px 15px;
  margin-top: 0px;
}
.planneritem .left > main .regel:last-child {
  padding-bottom: 15px;
}
.planneritem .left > main .regel.no-bottom-padding {
  padding-bottom: 0;
}
.planneritem .left > main .regel.no-top-padding {
  padding-top: 0;
}
.planneritem .left > main .regel.media {
  min-height: 0px;
  padding: 0px 20px;
}
.planneritem .left > main .regel.media img {
  max-width: calc(100% - 40px);
}
.planneritem .left > main .regel.foto img:not([src=""]) + i.fa-spin {
  display: none;
}
.planneritem .left > main .regel.foto img[src=""] {
  display: none;
}
.planneritem .left > main .regel.foto img[src=""] + i.fa-spin {
  margin-left: auto;
  font-size: 20px;
}
.planneritem .left > main .regel.leerdoelen .leerdoel {
  padding-bottom: 10px;
}
.planneritem .left > main .regel.leerdoelen .leerdoel .wysiwyg-toolbar .wysiwyg-menusection-fonts,
.planneritem .left > main .regel.leerdoelen .leerdoel .wysiwyg-toolbar .wysiwyg-menusection-lists,
.planneritem .left > main .regel.leerdoelen .leerdoel .wysiwyg-toolbar .wysiwyg-menusection-alignments,
.planneritem .left > main .regel.leerdoelen .leerdoel .wysiwyg-toolbar .wysiwyg-menusection-colors {
  display: none !important;
}
.planneritem .left > main .regel.leerdoelen .leerdoel .wysiwyg-toolbar .wysiwyg-menu-invoegen .wysiwyg-menuitem-insert-image,
.planneritem .left > main .regel.leerdoelen .leerdoel .wysiwyg-toolbar .wysiwyg-menu-invoegen .wysiwyg-menuitem-insert-video,
.planneritem .left > main .regel.leerdoelen .leerdoel .wysiwyg-toolbar .wysiwyg-menu-invoegen .wysiwyg-menuitem-insert-table,
.planneritem .left > main .regel.leerdoelen .leerdoel .wysiwyg-toolbar .wysiwyg-menu-invoegen .wysiwyg-menuitem-insert-textbox {
  display: none !important;
}
.planneritem .left > main .regel.leerdoelen .leerdoel .werkblad {
  min-height: 40px;
  padding: 5px 10px;
}
.planneritem .left > main .regel .plannerlink {
  display: block;
  width: 400px;
  height: 50px;
  line-height: 50px;
  padding: 0px 10px;
  border-radius: 3px;
  background-color: #eff4ff;
  overflow: hidden;
  white-space: normal;
  font-size: 15px;
  font-weight: bold;
  vertical-align: middle;
}
.planneritem .left > main .regel img,
.planneritem .left > main .regel video {
  width: 400px;
}
.planneritem .left > main .regel span.r {
  text-align: right;
}
.planneritem .left > main .regel span.r label {
  width: 100px;
}
.planneritem .left > main .regel span.r label input[name=is_toets] {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
}
.planneritem .left > main .regel > a {
  display: inline-block;
  height: 45px;
  line-height: 45px;
  font-size: 14px;
}
.planneritem .left > main .regel input,
.planneritem .left > main .regel textarea {
  padding: 5px;
  border-radius: 3px;
  font-size: 13px;
}
.planneritem .left > main .regel input.full,
.planneritem .left > main .regel textarea.full {
  width: 100%;
}
.planneritem .left > main .regel .werkblad {
  height: 180px;
  width: 100%;
  padding: 5px;
}
.planneritem .left > main .regel input {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}
.planneritem .left > main .regel input.planneritem-invoer {
  width: 100%;
  height: 50px;
  line-height: 50px;
  border: 1px solid var(--theme-border-color);
  background-color: #eff4ff;
  font-size: 14px;
  font-weight: bold;
}
.planneritem .left > main .regel input.planneritem-invoer:focus {
  border: 1px solid var(--theme-input-focused-border-color);
}
.planneritem .left > main .regel .plannerbestand {
  background-color: var(--theme-bg-color);
  width: 100%;
  height: 50px;
  padding: 0px;
  border-radius: 3px;
  display: flex;
}
.planneritem .left > main .regel .plannerbestand .extensie {
  display: inline-block;
  width: 60px;
  height: 50px;
  line-height: 50px;
  background-color: #3e74e3;
  color: white;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  overflow: hidden;
  border-radius: 3px;
}
.planneritem .left > main .regel .plannerbestand .doctitel {
  display: inline-block;
  flex: 1;
  margin-left: 5px;
  border-radius: 3px;
  background-color: #eff4ff;
  color: var(--theme-fg-color);
  float: right;
  font-size: 14px;
  font-weight: bold;
  padding-left: 10px;
  padding: 0;
  height: 50px;
  line-height: 50px;
}
.planneritem .left > main .regel .plannerbestand .doctitel.in_activiteitspopup {
  background-color: white;
  color: var(--theme-fg-color);
}
.planneritem .left > main .regel .plannerbestand .doctitel:hover {
  color: var(--theme-link-hover-color);
}
.planneritem .left > main .regel .plannerbestand .doctitel.geen-link {
  padding-left: 10px;
  white-space: nowrap;
  overflow: hidden;
}
.planneritem .left > main .regel .plannerbestand .doctitel.geen-link:hover {
  color: var(--theme-fg-color);
}
.planneritem .left > main .regel .plannerbestand .doctitel .titel {
  display: block;
  height: 40px;
  margin-top: 0px;
  overflow: hidden;
}
.planneritem .left > main .regel .plannerbestand .doctitel .titel a {
  line-height: 40px;
  color: var(--theme-fg-color);
}
.planneritem .left > main .regel .plannerbestand .doctitel .titel a:hover {
  color: var(--theme-link-hover-color);
}
.planneritem .left > main .regel .plannerbestand span.oog {
  display: none;
}
.planneritem .left > main .regel .plannerbestand:hover a.plaatje {
  overflow: hidden;
}
.planneritem .left > main .regel .plannerbestand:hover a.plaatje .oog {
  line-height: 80px;
  background-image: url(/gfx/algemeen/zwart50prc.png);
  filter: brightness(1);
}
.planneritem .left > main .regel .plannerbestand:hover a.plaatje .oog.viewer {
  margin-top: -60px;
  width: 60px;
  float: left;
}
.planneritem .left > main .regel .plannerbestand:hover span.oog {
  display: block;
  line-height: 66px;
  margin-top: -60px;
}
.planneritem .left > main .regel .plannerbestand:hover span.oog i {
  font-size: 36px;
  color: white;
}
.planneritem .right {
  width: 235px;
  background-color: var(--theme-accent-bg-color);
}
.planneritem .right h2 {
  font-size: 20px;
  font-weight: bold;
  line-height: 60px;
  padding: 0 15px;
}
.planneritem .right section {
  line-height: 34px;
  padding: 15px 15px 10px 15px;
  border-bottom: 1px solid var(--theme-grey-line-color);
}
.planneritem .right section + section {
  padding-top: 10px;
}
.planneritem .right section > h3 {
  font-size: 16px;
  font-weight: bold;
}
.planneritem .right section > label {
  display: flex;
  align-items: center;
}
.planneritem .right section > label > :last-child:not(:first-child) {
  margin-left: auto;
}
.planneritem .right section > label > input:first-child {
  margin-right: 10px;
}
.planneritem .right section > label select,
.planneritem .right section > label input {
  height: 30px;
  line-height: 30px;
  font-size: 1rem;
}
.planneritem .right section > label select {
  -webkit-appearance: textfield;
  -ms-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
  width: 100%;
  height: 30px;
  line-height: 30px;
  border: none;
  background: transparent;
  text-align: right;
}
.planneritem .right section > label input.duur {
  margin-right: 10px;
}
.planneritem .right section > label .fake-checkbox {
  display: inline-block;
  width: 13.2px;
  margin-right: 10px;
}
.planneritem .right > footer {
  padding: 10px 15px 25px 15px;
  text-align: right;
  font-size: 0;
}

.vragenlijst .nieuwe-vraag-menu-header {
  line-height: 30px;
  padding-left: 10px;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-size: 13px;
  background-color: #dff4d5;
  color: #222;
}
.vragenlijst ul.nieuwe-vraag-menu {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  padding: 0;
}
.vragenlijst ul.nieuwe-vraag-menu > li {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 125px;
  text-align: center;
}
.vragenlijst ul.nieuwe-vraag-menu > li > a {
  position: relative;
  display: inline-block;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: var(--theme-fg-color);
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
}
.vragenlijst ul.nieuwe-vraag-menu > li > a > img {
  margin-top: 10px;
}
.vragenlijst ul.nieuwe-vraag-menu > li > a:hover, .vragenlijst ul.nieuwe-vraag-menu > li > a.open {
  border-color: #aaa;
  background-color: white;
}
.vragenlijst ul.nieuwe-vraag-menu > li > a:hover > img, .vragenlijst ul.nieuwe-vraag-menu > li > a.open > img {
  visibility: hidden;
}
.vragenlijst ul.nieuwe-vraag-menu > li > a:hover::before, .vragenlijst ul.nieuwe-vraag-menu > li > a.open::before {
  position: absolute;
  bottom: 20px;
  color: #3ba700;
  display: block;
  width: calc(100% - 20px);
  line-height: 42px;
  text-align: center;
  font-family: pepicon3;
  content: "Q";
  font-size: 42px;
  text-transform: none;
}
.vragenlijst ul.nieuwe-vraag-menu > li:not(:last-of-type) {
  margin-right: 10px;
}
.vragenlijst ul.nieuwe-vraag-menu > li ul.add-sc-mc-menu {
  padding: 0;
  text-align: left;
}
.vragenlijst ul.nieuwe-vraag-menu > li ul.add-sc-mc-menu > li {
  display: block;
}
.vragenlijst ul.nieuwe-vraag-menu > li ul.add-sc-mc-menu > li > a {
  color: var(--theme-fg-color);
}
.vragenlijst ul.nieuwe-vraag-menu > li ul.add-sc-mc-menu > li > a > img {
  display: none;
}
.vragenlijst .vragenlijst-punten-overzicht {
  margin-top: 10px;
  margin-bottom: 20px;
  text-transform: uppercase;
  color: #777;
}
.vragenlijst .vraag {
  margin: 0 0 15px 0;
  padding: 10px 0px;
}
.vragenlijst .vraag-type-open .vraag {
  margin-bottom: 15px;
}
.vragenlijst .vraag-type-open .antwoord {
  min-height: 120px;
}
.vragenlijst .vraag-type-open .antwoord:not(.show) {
  width: 100%;
}
.vragenlijst .wijzig .antwoord:not(.show) {
  width: 100%;
}
.vragenlijst .wijzig .antwoord:not(.show):empty::before {
  content: attr(placeholder);
  font-style: italic;
  color: #999;
}
.vragenlijst .wijzig-blok {
  margin: 0 -10px;
  background: white;
  border: none;
  padding: 20px 15px;
  margin-bottom: 10px;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.vragenlijst .wijzig-blok .wijzig .buttons {
  height: 30px;
  line-height: 30px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-top: 15px;
}
.vragenlijst .wijzig-blok .wijzig .buttons .button {
  --height: 30px;
  line-height: 30px;
}
.vragenlijst .wijzig-blok .wijzig .buttons .button ~ .button {
  margin-top: 0px;
}
.vragenlijst .wijzig-blok .wijzig .buttons .button.save {
  --bg-color: green;
  --fg-color: white;
  --hover-bg-color: rgb(0, 109, 0);
}
.vragenlijst .wijzig-blok .volgnummer {
  position: absolute;
  left: 38%;
  visibility: hidden;
}
.vragenlijst .wijzig-blok input.vraagtitel {
  height: 40px;
  line-height: 40px;
  margin-bottom: 10px;
  width: 360px;
  font-size: 15px;
}
.vragenlijst .wijzig-blok .vraag-kop {
  margin-bottom: 19px;
  margin-top: 10px;
  font-weight: normal;
  font-size: 15px;
}
.vragenlijst .wijzig-blok .vraag-kop > i {
  margin-left: 1em;
}
.tooltip-vraag-type-uitleg {
  width: 220px;
  padding: 20px;
  background-color: var(--theme-accent-bg-color);
  color: black;
}
.tooltip-vraag-type-uitleg > b:first-child {
  font-size: 16px;
}

.vragenlijst .wijzig-blok .vraag-punten {
  float: right;
  padding: 0 5px;
  border-radius: 3px;
  font-size: 1rem;
}
.vragenlijst .wijzig-blok .vraag-punten .vraag-max-punten {
  text-align: right;
}
.vragenlijst .wijzig-blok .vraag-punten .popup-menu {
  right: 20px;
}
.vragenlijst .wijzig-blok .vraag-punten .popup-menu li {
  cursor: default;
}
.vragenlijst .wijzig-blok .vraag-punten .popup-menu label {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.vragenlijst .wijzig-blok div.vraag {
  min-height: 100px;
  border-color: var(--theme-grey-border-color);
}
.vragenlijst div.wijzig div.vraag {
  min-height: 100px;
  border-color: var(--theme-grey-border-color);
}
.vragenlijst div.keuzes .tr {
  display: flex;
  margin-bottom: 3px;
}
.vragenlijst div.keuzes .tr .antw-text, .vragenlijst div.keuzes .tr .vraag-stuk {
  flex: 1;
}
.vragenlijst div.keuzes .tr td.antw-controle {
  width: 24px;
}
.vragenlijst div.keuzes .tr .antw-llkeuze,
.vragenlijst div.keuzes .tr .antw-letter,
.vragenlijst div.keuzes .tr .checklist-cijfer {
  width: 3.5ch;
  padding-left: 5px;
  line-height: 35px;
  text-align: center;
  background-color: var(--theme-accent4-bg-color);
  border-bottom: solid 2px white;
}
.vragenlijst div.keuzes .tr .antw-text {
  border-bottom: solid 2px white;
  background-color: var(--theme-accent4-bg-color);
  line-height: 35px;
}
.vragenlijst table.keuzes {
  border-collapse: collapse;
  border: 0;
  width: 100%;
}
.vragenlijst table.keuzes > tbody tr.is-goed td.antw-letter, .vragenlijst table.keuzes > tbody tr.is-goed td.antw-text {
  color: rgb(89, 206, 5);
}
.vragenlijst table.keuzes > tbody td.antw-controle {
  width: 24px;
}
.vragenlijst table.keuzes > tbody td.antw-llkeuze,
.vragenlijst table.keuzes > tbody td.antw-letter,
.vragenlijst table.keuzes > tbody td.checklist-cijfer {
  width: 3.5ch;
  line-height: 35px;
  vertical-align: top;
  text-align: center;
  background-color: var(--theme-accent4-bg-color);
  border-bottom: solid 5px white;
}
.vragenlijst table.keuzes > tbody td.antw-text {
  border-bottom: solid 5px white;
  background-color: var(--theme-accent4-bg-color);
  line-height: 25px;
}
.vragenlijst table.keuzes > tbody td.antw-text .antwoord {
  padding: 0;
}
.vragenlijst table.keuzes > tbody > tr > td {
  background: white;
  padding: 0;
  border: 0;
}
.vragenlijst table.keuzes > tbody > tr > td input {
  margin: 0;
  margin-bottom: 2px !important;
  vertical-align: middle;
}
.vragenlijst .vraag-blok {
  margin: 0 0 25px 0;
}
.vragenlijst .vraag-blok.wijzigbaar {
  border: 1px solid transparent;
}
.vragenlijst .vraag-blok.wijzigbaar:hover {
  border: 1px solid rgba(77, 167, 30, 0.5);
}
.vragenlijst .vraag-blok.wijzigbaar:hover .heading {
  background-color: #3ba700;
  color: white;
}
.vragenlijst .vraag-blok.wijzigbaar:hover .heading .wijzig, .vragenlijst .vraag-blok.wijzigbaar:hover .heading .delete, .vragenlijst .vraag-blok.wijzigbaar:hover .heading .clone, .vragenlijst .vraag-blok.wijzigbaar:hover .heading .vraag-kop {
  background-color: inherit !important;
  color: inherit !important;
}
.vragenlijst .vraag-blok.wijzigbaar:hover .heading .wijzig, .vragenlijst .vraag-blok.wijzigbaar:hover .heading .delete, .vragenlijst .vraag-blok.wijzigbaar:hover .heading .clone, .vragenlijst .vraag-blok.wijzigbaar:hover .heading .volgnummer {
  display: initial;
}
.vragenlijst .vraag-blok.wijzigbaar:hover .heading > span.fa-light {
  margin-left: 10px;
}
.vragenlijst .vraag-blok.wijzigbaar:hover .heading .vraag-punten {
  margin-right: 0;
}
.vragenlijst .vraag-blok.wijzigbaar .input-default,
.vragenlijst .vraag-blok.wijzigbaar .input-default:hover {
  border: none;
  background-color: var(--theme-accent4-bg-color);
}
.vragenlijst .vraag-blok.wijzigbaar .vraag-type-tekstblok .input-default {
  background-color: white;
}
.vragenlijst .vraag-blok.wijzigbaar .heading {
  line-height: 30px;
  padding-left: 10px;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-size: 13px;
  background-color: #dff4d5;
  color: var(--theme-fg-color);
}
.vragenlijst .vraag-blok.wijzigbaar .heading .delete,
.vragenlijst .vraag-blok.wijzigbaar .heading .clone,
.vragenlijst .vraag-blok.wijzigbaar .heading .wijzig {
  display: none;
  float: right;
  border: 0;
  line-height: inherit;
  background-color: transparent;
  width: 30px;
  text-align: center;
  font-size: 18px;
  cursor: pointer;
}
.vragenlijst .vraag-blok.wijzigbaar .heading .volgnummer {
  position: absolute;
  left: 38%;
}
.vragenlijst .vraag-blok.wijzigbaar .heading .vraag-kop {
  font-size: inherit;
}
.vragenlijst .vraag-blok.wijzigbaar .heading .vraag-punten {
  float: right;
  margin-right: 60px;
}
.vragenlijst .vraag-blok.wijzigbaar .vraag-specifiek {
  padding: 5px;
}
.vragenlijst .vraag-blok:not(.wijzigbaar) .heading {
  line-height: 25px;
  padding-left: 0.3em;
}
.vragenlijst .vraag-blok .vraag-kop {
  font-size: 15px;
  font-weight: normal;
}
.vragenlijst .vraag-blok .vraag-kop .vraag-punten {
  font-size: 1rem;
  float: right;
}
.vragenlijst .vraag-blok .vraag-kop .vraag-punten input {
  width: 3rem;
  text-align: right;
}
.vragenlijst .vraag-blok .vraag-kop .vraag-met-nr {
  text-transform: uppercase;
}
.vragenlijst .vraag-blok .vraagtitel {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 0 0;
  height: 40px;
  line-height: 40px;
}
.vragenlijst .vraag-blok.wijzigbaar div.vraagtitel {
  margin: 10px 0 0 5px;
}
.vragenlijst .vraag-blok.wijzigbaar input.vraagtitel {
  display: none;
}
.vragenlijst .vraag-blok .edit-blok {
  margin: 10px 0 0 0;
}
.vragenlijst .vraag-type-open .vraag-kop .vraag-checklist,
.vragenlijst .vraag-type-open .vraag-kop .vraag-tekstblok,
.vragenlijst .vraag-type-mc .vraag-kop .vraag-checklist,
.vragenlijst .vraag-type-mc .vraag-kop .vraag-tekstblok,
.vragenlijst .vraag-type-kies .vraag-kop .vraag-checklist,
.vragenlijst .vraag-type-kies .vraag-kop .vraag-tekstblok,
.vragenlijst .vraag-type-invul .vraag-kop .vraag-checklist,
.vragenlijst .vraag-type-invul .vraag-kop .vraag-tekstblok {
  display: none;
}
.vragenlijst .vraag-type-tekstblok .vraag-kop .vraag-checklist,
.vragenlijst .vraag-type-tekstblok .vraag-kop .vraag-met-nr, .vragenlijst .vraag-type-tekstblok .vraag-kop .vraag-met-nr + .vraagnr {
  display: none;
}
.vragenlijst .wijzig .vraag-type-tekstblok .werkblad {
  margin-top: 0px;
}
.vragenlijst .vraag-type-checklist.wijzig-blok .vraag-kop .vraag-met-nr, .vragenlijst .vraag-type-checklist.wijzig-blok .vraag-kop .vraagnr,
.vragenlijst .vraag-type-checklist.wijzig-blok .vraag-kop .vraag-tekstblok,
.vragenlijst .vraag-type-checklist.wijzigbaar .vraag-kop .vraag-met-nr,
.vragenlijst .vraag-type-checklist.wijzigbaar .vraag-kop .vraagnr,
.vragenlijst .vraag-type-checklist.wijzigbaar .vraag-kop .vraag-tekstblok {
  display: none;
}
.vragenlijst .vraag-type-checklist:not(.wijzigbaar) .vraag-kop .vraagnr,
.vragenlijst .vraag-type-checklist:not(.wijzigbaar) .vraag-kop .vraag-tekstblok {
  display: none;
}
.vragenlijst .vraag-type-checklist input[type=checkbox] {
  display: none;
}
.vragenlijst .vraag-type-checklist input[type=checkbox] + i.fa {
  display: inline-block;
  color: #dedede;
  font-size: 16px;
}
.vragenlijst .vraag-type-checklist input[type=checkbox]:checked + i.fa {
  color: rgb(125, 231, 133);
}
.vragenlijst .vraag-type-checklist input[type=checkbox]:hover + i.fa {
  color: rgb(95, 95, 251);
  cursor: pointer;
}
.vragenlijst .vraag-type-invul.wijzig-blok .antwoord {
  min-height: 120px;
}
.vragenlijst .wijzig-blok .vraag {
  padding: 2px 5px;
  margin-bottom: 10px;
}
.vragenlijst .vraag-blok.wijzigbaar .input-default.text {
  background-color: transparent;
  border: none;
}

#docent_opdracht .vragenlijst div.show.antwoord,
.vragenlijst div.show.antwoord,
.vragenlijst div.invul.antwoord {
  width: auto;
  padding: 5px 10px;
  background-color: var(--theme-accent4-bg-color);
}

#docent_opdracht .readonly td.antw-llkeuze, #docent_opdracht .readonly td.antw-letter, #docent_opdracht .readonly td.antw-text {
  background: white;
}
#docent_opdracht .keuzes td.antw-llkeuze, #docent_opdracht .keuzes td.antw-letter, #docent_opdracht .keuzes td.antw-text {
  background: white;
}

.vragenlijst .antwoord {
  padding-top: 5px;
  min-height: 35px;
}
.vragenlijst .antwoord .invulvraag-veld {
  border-top: none;
  border-right: none;
  border-left: none;
  background-color: transparent;
  border-radius: 0;
  border-bottom: 1px solid var(--theme-fg-color);
}
.vragenlijst .vraag-type-tekstblok .antwoord .vraag-blok,
.vragenlijst .vraag-type-open .antwoord .vraag-blok, .vragenlijst.readonly .vraag-blok {
  border-top: 1px solid var(--theme-grey-line-color);
  padding-top: 20px;
}
.vragenlijst .vraag-type-tekstblok .antwoord .vraag-type-checklist,
.vragenlijst .vraag-type-open .antwoord .vraag-type-checklist, .vragenlijst.readonly .vraag-type-checklist {
  padding-top: 10px;
}

div.vragen-resultaat {
  padding: 5px 10px 5px 10px;
  margin: 30px 0 5px 0;
  background-color: #ecf8e5;
  line-height: 25px;
}
div.vragen-resultaat .vragen-resultaat-titel {
  font-size: 18px;
  font-weight: bold;
}
div.vragen-resultaat .conclusie {
  font-weight: bold;
}
div.vragen-resultaat p {
  margin: 0;
}

.vragenlijst .ui-sortable-placeholder {
  border: 2px dashed grey !important;
  visibility: visible !important;
}

.vragenlijst .ui-sortable-helper {
  background-color: white;
  opacity: 0.8;
  cursor: grabbing;
}

.vragenlijst .ui-sortable .ui-sortable-handle,
.vragenlijst .ui-sortable .vraag-blok.wijzigbaar .heading {
  cursor: grab;
}

.uitwerking main section.de-uitwerking .filler, .uitwerking main section.de-uitwerking .wysiwyg:not(.sw-veld) {
  min-height: initial;
  position: relative;
}

.page-content-analyse-skills-feedforward header.page-submenu {
  position: relative;
}
.page-content-analyse-skills-feedforward header.feedforward {
  padding: 20px 20px 0 20px;
  background-color: white;
  color: black;
  font-size: 14px;
  height: auto;
  border-radius: inherit;
  border-bottom: 1px solid var(--theme-grey-line-color);
}
.page-content-analyse-skills-feedforward header.feedforward h1 {
  font-size: 18px;
  font-weight: bold;
}
.page-content-analyse-skills-feedforward header.feedforward div.ff-info-line {
  display: flex;
}
.page-content-analyse-skills-feedforward header.feedforward div.ff-info-line h3 {
  flex: 1;
  font-size: 16px;
  margin: 0;
  font-weight: normal;
}
.page-content-analyse-skills-feedforward header.feedforward div.ff-info-line .buttons {
  flex: 1;
  text-align: right;
}
.page-content-analyse-skills-feedforward header.feedforward .indicator-name {
  font-size: 24px;
  width: 460px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-content-analyse-skills-feedforward header.feedforward input {
  font-size: 14px;
}
.page-content-analyse-skills-feedforward main input.pickdatum {
  width: 90px;
  border: none;
  border-radius: 3px;
  padding: 5px 10px;
  line-height: 16px;
}
.page-content-analyse-skills-feedforward main span.nivo {
  color: white;
  font-weight: bold;
}
.page-content-analyse-skills-feedforward main p {
  font-size: 15px;
}
.page-content-analyse-skills-feedforward main div.topbuttons {
  width: 100%;
}
.page-content-analyse-skills-feedforward main button.create_feedforward {
  display: block;
  float: right;
  margin-left: 10px;
}
.page-content-analyse-skills-feedforward main button.reset {
  margin: 0;
  background-color: rgba(0, 0, 0, 0.35);
  border: 0px solid rgba(0, 0, 0, 0.35);
  color: white;
  margin-top: -4px;
  margin-left: 10px;
}
.page-content-analyse-skills-feedforward main button.reset:hover {
  background-color: white;
  color: var(--theme-fg-color);
}
.page-content-analyse-skills-feedforward main .competenties {
  height: auto;
  position: relative;
  overflow: hidden;
  padding: 0 20px 0 20px;
  margin: 1em 0 20px 0;
}
.page-content-analyse-skills-feedforward main .competenties .gemiddeld {
  position: absolute;
  width: 6px;
  display: block;
  border-right: 2px dotted #999;
  height: 1000px;
  top: 27px;
}
.page-content-analyse-skills-feedforward main .competenties .gemiddeldbox {
  position: absolute;
  width: 100px;
  display: block;
  background-color: #ccc;
  color: white;
  height: 20px;
  line-height: 20px;
  top: 6px;
  text-align: center;
  border-radius: 3px;
}
.page-content-analyse-skills-feedforward main .competenties div.row {
  display: block;
  height: 34px;
  width: 680px;
  border-bottom: 1px solid #e0e0e0;
  overflow: hidden;
}
.page-content-analyse-skills-feedforward main .competenties div.row div.competentie_cell {
  display: block;
  float: left;
  height: 34px;
  padding: 5px 0;
  width: 280px;
  border-right: 1px solid #e0e0e0;
}
.page-content-analyse-skills-feedforward main .competenties div.row div.competentie_cell.header {
  border: none;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
}
.page-content-analyse-skills-feedforward main .competenties div.row div.indicator_cell {
  display: block;
  float: left;
  height: 34px;
  padding: 5px 0;
  width: 280px;
  font-size: 17px;
  white-space: nowrap;
  overflow: hidden;
  border-right: 1px solid #e0e0e0;
}
.page-content-analyse-skills-feedforward main .competenties div.row div.schaal_cell {
  display: block;
}
.page-content-analyse-skills-feedforward main .competenties div.row div.cell {
  display: block;
  float: left;
  height: 33px;
  padding: 5px 0;
  width: 40px;
  border-right: 1px solid #e0e0e0;
}
.page-content-analyse-skills-feedforward main .competenties div.row div.greybar {
  width: 399px;
  left: 300px;
  top: 50px;
  height: 6px;
  border-radius: 3px;
  background-color: var(--theme-accent2-bg-color);
  position: absolute;
}
.page-content-analyse-skills-feedforward main .competenties div.row div.greybar div.markerbullet {
  height: 18px;
  width: 18px;
  background-color: transparent;
  border: 2px solid #999;
  position: relative;
  border-radius: 9px;
  margin-top: -7px;
  margin-left: -13px;
}
.page-content-analyse-skills-feedforward main .competenties div.row:hover span.fa-light,
.page-content-analyse-skills-feedforward main .competenties div.row:hover span.fa-solid,
.page-content-analyse-skills-feedforward main .competenties div.row:hover div.schaal_cell div span.fa-light,
.page-content-analyse-skills-feedforward main .competenties div.row:hover div.schaal_cell div span.fa-solid {
  background-color: var(--theme-accent-bg-color);
}
.page-content-analyse-skills-feedforward main .competenties div.hrow {
  display: block;
  height: 34px;
  width: 680px;
  border-bottom: 1px solid #ccc;
}
.page-content-analyse-skills-feedforward main .competenties div.schaal_cell.pointer {
  cursor: pointer;
}
.page-content-analyse-skills-feedforward main .competenties div.schaal_cell div.startvalue {
  position: absolute;
  margin-top: 10px;
  color: #d8d8d8;
}
.page-content-analyse-skills-feedforward main .competenties div.schaal_cell div.targetvalue {
  position: absolute;
  margin-top: 6px;
  font-size: 20px;
}
.page-content-analyse-skills-feedforward main .competenties div.schaal_cell div.curvalue {
  position: absolute;
  margin-top: 6px;
}
.page-content-analyse-skills-feedforward main .competenties div.schaal_cell div.curvalue::after {
  font-size: 20px;
  margin-left: 3px;
  color: var(--theme-link-color);
  vertical-align: bottom;
}
.page-content-analyse-skills-feedforward main .competenties div.schaal_cell div.curvalue::after:hover {
  color: var(--theme-link-hover-color);
}
.page-content-analyse-skills-feedforward main .competenties div.schaal_cell .targetvalue .fa-light,
.page-content-analyse-skills-feedforward main .competenties div.schaal_cell .targetvalue .fa-solid, .page-content-analyse-skills-feedforward main .competenties div.schaal_cell .curvalue .fa-light,
.page-content-analyse-skills-feedforward main .competenties div.schaal_cell .curvalue .fa-solid {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  font-size: 14px;
  padding: 2px;
  background-color: #d8d9dd;
  color: white;
  text-align: center;
  vertical-align: middle;
}
.page-content-analyse-skills-feedforward main .competenties div.schaal_cell .targetvalue .fa-light.green,
.page-content-analyse-skills-feedforward main .competenties div.schaal_cell .targetvalue .fa-solid.green, .page-content-analyse-skills-feedforward main .competenties div.schaal_cell .curvalue .fa-light.green,
.page-content-analyse-skills-feedforward main .competenties div.schaal_cell .curvalue .fa-solid.green {
  color: #00a54f;
}
.page-content-analyse-skills-feedforward main .competenties div.schaal_cell div.startvalue.oranje,
.page-content-analyse-skills-feedforward main .competenties div.schaal_cell div.curvalue span.oranje {
  color: #ff8400;
}
.page-content-analyse-skills-feedforward main .competenties div.schaal_cell div.line {
  position: absolute;
  margin-top: 16px;
  margin-left: 3px;
  background-color: #d8d8d8;
  height: 3px;
  border-radius: 3px;
}
.page-content-analyse-skills-feedforward main .competenties div.schaal_cell div.line.oranje {
  background-color: #ff8400;
}
.page-content-analyse-skills-feedforward main .competenties div.schaal_cell div.line.red {
  background-color: #ffaaaa;
}
.page-content-analyse-skills-feedforward main .competenties div.schaal_cell div.startvalue.nietbeoordeeld {
  color: #ddd;
}
.page-content-analyse-skills-feedforward main .planner {
  border-top: 1px solid var(--theme-border-color);
}

.popup-feedforward-leerdoel {
  width: 240px;
  cursor: default;
}
.popup-feedforward-leerdoel div {
  line-height: 210%;
}
.popup-feedforward-leerdoel input.number {
  width: 4em;
}

.notificatie-container {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1;
  padding-top: 20px;
  padding-right: 20px;
  background-color: transparent;
}
.notificatie-container > article {
  display: grid;
  grid-template-rows: 40px auto;
  grid-row-gap: 15px;
  max-width: 300px;
  padding: 20px 20px 20px 15px;
  margin-bottom: 20px;
  background-color: white;
  border-radius: 4px;
  border: 1px solid var(--theme-grey-line-color);
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
@media only screen and (max-width: 767.99px) {
  .notificatie-container > article {
    max-width: 95vw;
  }
}
.notificatie-container > article > header, .notificatie-container > article > main {
  position: relative;
  max-width: 100%;
  word-wrap: anywhere;
  display: grid;
  grid-template-columns: 35px auto;
  grid-column-gap: 10px;
}
.notificatie-container > article aside {
  text-align: center;
}
.notificatie-container > article section {
  line-height: 1.2;
}
.notificatie-container > article .notificatie-type {
  display: inline-block;
  width: 24px;
  height: 24px;
}
.notificatie-container > article .notificatie-type::before {
  font-size: 24px;
  color: #777;
}
.notificatie-container > article .notificatie-type.notificatie-type-systeem::before {
  font-family: "Font Awesome 6 Pro";
  content: "\f10c";
}
.notificatie-container > article .notificatie-type.notificatie-type-docentmelding::before {
  font-family: pepicon3;
  content: "p";
  color: #d33;
}
.notificatie-container > article .notificatie-type.notificatie-type-blogbericht::before {
  font-family: "Font Awesome 6 Pro";
  content: "\f09e";
}
.notificatie-container > article .notificatie-type.notificatie-type-feedback::before {
  font-family: pepicon3;
  content: "‚";
}
.notificatie-container > article .notificatie-type.notificatie-type-talkpage::before {
  font-family: pepicon3;
  content: "*";
}
.notificatie-container > article .notificatie-timestamp {
  font-size: 12px;
  color: #777;
}
.notificatie-container > article .notificatie-auteur-naam {
  font-size: 15px;
  font-weight: bold;
}
.notificatie-container > article img.notificatie-auteur-avatar {
  width: 35px;
  height: 35px;
}
.notificatie-container > article .notificatie-vak {
  font-size: 12px;
}
.notificatie-container > article .notificatie-vak img {
  width: 25px;
  height: 25px;
  display: none;
}
.notificatie-container > article .notificatie-titel {
  font-size: 13px;
  font-weight: bold;
  line-height: 21px;
}
.notificatie-container > article .notificatie-content {
  line-height: 21px;
}

body.docent-pagina .notificatie-container .leerling-vak {
  display: none;
}

body.leerling-pagina .notificatie-container .docent-vak {
  display: none;
}

.popup-indicator-beoordeling .titel {
  font-size: 16px;
  font-weight: normal;
  margin-bottom: 20px;
  width: 530px;
}
.popup-indicator-beoordeling .opmerking .subtitel {
  font-size: 14px;
  font-weight: normal;
  margin-bottom: 20px;
}

span.assessment.score {
  padding-right: 20px;
}

td.oordeel {
  width: 70px;
  border: none;
}

div.indicator_oordeel div.bol.assessment {
  border: none !important;
}
div.indicator_oordeel div.bol.extern {
  background-color: #9b9b9b;
}
div.indicator_oordeel td.buttons {
  padding-top: 1em;
}
div.indicator_oordeel td.buttons div {
  margin-right: 0.2em;
  padding-top: 2px;
}
div.indicator_oordeel td.buttons.r input {
  margin-left: 1em;
  float: right;
}

a.bol_ass {
  display: block;
  width: 0px;
  height: 0px;
  position: relative;
  top: -4px;
  left: 10px;
  overflow: visible;
}
a.bol_ass div.bol {
  width: 14px;
  height: 14px;
  margin-left: -7px;
  box-sizing: border-box;
  border-radius: 100%;
  border: 2px solid white;
}

a.bol_uitw {
  display: block;
  width: 0px;
  height: 0px;
  position: relative;
  top: -4px;
  left: 10px;
  overflow: visible;
}
a.bol_uitw div.bol {
  display: block;
  width: 14px;
  height: 14px;
  margin-left: -8px;
  box-sizing: border-box;
  border-radius: 100%;
}

a.bol_uitw.bol1 div.bol,
a.bol_ass.bol1 div.bol {
  background-color: #54a3ff;
}
a.bol_uitw.bol1 div.bol:hover,
a.bol_ass.bol1 div.bol:hover {
  background-color: #a1ccff;
}

a.bol_uitw.bol2 div.bol,
a.bol_ass.bol2 div.bol {
  background-color: #a1c600;
}
a.bol_uitw.bol2 div.bol:hover,
a.bol_ass.bol2 div.bol:hover {
  background-color: #d3ff14;
}

a.bol_uitw.bol3 div.bol,
a.bol_ass.bol3 div.bol {
  background-color: #9b9b9b;
}
a.bol_uitw.bol3 div.bol:hover,
a.bol_ass.bol3 div.bol:hover {
  background-color: #c1c1c1;
}

a.bol_ass.bol1 div.bol {
  box-shadow: 0 0 0 2px #54a3ff;
}

a.bol_ass.bol2 div.bol {
  box-shadow: 0 0 0 2px #a1c600;
}

a.bol_ass.bol3 div.bol {
  box-shadow: 0 0 0 2px #9b9b9b;
}

div.competentie div.beoordelingen1:hover {
  background-color: #3c8aba;
}
div.competentie div.beoordelingen2 {
  background-color: #a1c600;
}
div.competentie div.beoordelingen2:hover {
  background-color: #899c2c;
}
div.competentie div.beoordelingen3 {
  background-color: #9b9b9b;
}
div.competentie div.beoordelingen3:hover {
  background-color: #443AC9;
}

.popup-feedback {
  right: 0;
  min-width: 320px;
  max-width: var(--content-width);
  width: min-content;
}
.popup-feedback > main {
  max-width: 100%;
  overflow-x: auto;
}
.popup-feedback table.feedback_uitlezen {
  margin-top: 15px;
}
.popup-feedback table.feedback_uitlezen .competentie.naam {
  min-width: 150px;
}

@media only screen and (max-width: 575.99px) {
  .externe-feedback {
    position: static !important;
  }
  .externe-feedback > .popup-feedback {
    right: unset;
    left: 0;
    width: 100vw;
  }
}

.popup-activiteit + .popup-feedback {
  top: 70px;
  left: calc((100vw - var(--content-width)) * 0.5);
  right: unset;
  margin: 0 auto;
}
@media only screen and (max-width: 1259.99px) {
  .popup-activiteit + .popup-feedback {
    left: calc((100vw - var(--content-width) - 65px) * 0.5);
  }
}
@media only screen and (max-width: 767.99px) {
  .popup-activiteit + .popup-feedback {
    left: 0;
  }
}

.page-container.bronnen > .page-menu .vaknaam {
  display: none;
}
@media only screen and (max-width: 575.99px) {
  .page-container.bronnen {
    --page-filter-width: 0px;
  }
  .page-container.bronnen > .page-menu:has(> .page-tabs [data-page=bronnen].selected) .vaknaam {
    display: inline;
  }
}
@media only screen and (max-width: 991.99px) {
  .page-container.bronnen .page-tab-bronnen .page-main.onderwijscatalogus table.dataTable .soort,
  .page-container.bronnen .page-tab-bronnen .page-main.onderwijscatalogus table.dataTable .description {
    display: none;
  }
}
@media only screen and (max-width: 575.99px) {
  .page-container.bronnen .page-tab-bronnen .page-main.onderwijscatalogus table.dataTable .owner {
    display: none;
  }
}
.page-content-onderwijscatalogus .page-filter > section.filter-uitgever {
  width: 100%;
  height: 210px;
  padding: 0;
  margin-top: 0;
  background-color: white;
  text-align: center;
}
.page-content-onderwijscatalogus .page-filter > section.filter-uitgever .logo {
  padding: 20px 10px;
  height: 170px;
  border-bottom: 1px dotted var(--theme-border-color);
}
.page-content-onderwijscatalogus .page-filter > section.filter-uitgever .logo img,
.page-content-onderwijscatalogus .page-filter > section.filter-uitgever .logo .als-img {
  display: block;
  width: 125px;
  height: 125px;
  border-radius: 5px;
  text-align: center;
  line-height: 90px;
  margin: 0px auto 10px auto;
}
.page-content-onderwijscatalogus .page-filter > section.filter-uitgever .logo img i.fa,
.page-content-onderwijscatalogus .page-filter > section.filter-uitgever .logo .als-img i.fa {
  font-size: 125px;
  color: #f7b500;
}
.page-content-onderwijscatalogus .page-submenu {
  padding: 0 20px;
}
.page-content-onderwijscatalogus .page-submenu .uitgever-naam {
  font-size: 22px;
  font-weight: bold;
}
.page-content-onderwijscatalogus .page-main table tbody tr td.vaknaam,
.page-content-onderwijscatalogus .page-main table tbody tr td.leerweg {
  font-size: 12px;
  color: var(--theme-grey-fg-color);
  max-width: 120px;
}
.page-content-onderwijscatalogus .page-main table tbody tr td.vaknaam > span,
.page-content-onderwijscatalogus .page-main table tbody tr td.leerweg > span {
  display: inline-block;
  max-width: 100%;
  overflow-x: hidden;
  vertical-align: top;
  text-overflow: ellipsis;
}
.page-content-onderwijscatalogus .page-main table tbody tr .button-rounded.button-no-border {
  --bg-color: #7447d5;
  --fg-color: white;
  --hover-bg-color: #6f44cc;
  --hover-fg-color: white;
}
.page-content-onderwijscatalogus .page-main table tbody tr .favoriet {
  color: #f7b500;
}
.page-content-onderwijscatalogus .page-main table tbody tr .favoriet.is-favoriet > .is-not-favoriet {
  display: none;
}
.page-content-onderwijscatalogus .page-main table tbody tr .favoriet:not(.is-favoriet) > .is-favoriet {
  display: none;
}

.uitgevers_selectie {
  padding: 20px;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.uitgevers_selectie h1 {
  margin-bottom: 10px;
}
.uitgevers_selectie .uitgevers-grid {
  padding: 0px;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media only screen and (max-width: 767.99px) {
  .uitgevers_selectie .uitgevers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media only screen and (max-width: 575.99px) {
  .uitgevers_selectie .uitgevers-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
.uitgevers_selectie .uitgevers-grid .uitgever {
  display: flex;
  height: 110px;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid var(--theme-border-color);
  opacity: 0.8;
  background-color: var(--theme-accent-bg-color);
  cursor: pointer;
}
.uitgevers_selectie .uitgevers-grid .uitgever:hover {
  opacity: 1;
  background-color: var(--theme-accent2-bg-color);
}
.uitgevers_selectie .uitgevers-grid .uitgever.special {
  background-color: #e1eaff;
}
.uitgevers_selectie .uitgevers-grid .uitgever.special:hover {
  background-color: var(--theme-accent2-bg-color);
}
.uitgevers_selectie .uitgevers-grid .uitgever.special .als-img i.fa {
  background-color: white;
}
.uitgevers_selectie .uitgevers-grid .uitgever img,
.uitgevers_selectie .uitgevers-grid .uitgever .als-img {
  width: 80px;
  height: 80px;
  border-radius: 3px;
  vertical-align: top;
  display: inline-block;
  border: 1px solid var(--theme-border-color);
  text-align: center;
  line-height: 80px;
}
.uitgevers_selectie .uitgevers-grid .uitgever img i.fa,
.uitgevers_selectie .uitgevers-grid .uitgever .als-img i.fa {
  font-size: 80px;
  color: #f7b500;
}
.uitgevers_selectie .uitgevers-grid .uitgever > .info {
  display: inline-block;
  margin-left: 15px;
  width: 150px;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
.uitgevers_selectie .uitgevers-grid .uitgever > .info > span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}
.uitgevers_selectie .uitgevers-grid .uitgever > .info > span.naam {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 3px;
}
.uitgevers_selectie .uitgevers-grid .uitgever > .info > span.byline {
  font-size: 13px;
  height: 32px;
  color: var(--theme-grey-fg-color);
  line-height: 15px;
  white-space: normal;
  margin-bottom: 6px;
}
.uitgevers_selectie .uitgevers-grid .uitgever > .info > span.buttons {
  font-size: 13px;
  height: 27px;
}

.tooltip.catalogus-popup {
  padding: 20px;
  width: 380px;
}
.tooltip.catalogus-popup h1 {
  display: block;
  margin-bottom: 15px;
  height: 60px;
}
.tooltip.catalogus-popup h1 img {
  display: block;
  float: left;
  width: 60px;
  height: 60px;
  margin-right: 15px;
}
.tooltip.catalogus-popup h1 span {
  font-size: 18px;
  margin: 0;
  display: block;
  float: left;
  height: 60px;
  line-height: 60px;
}
.tooltip.catalogus-popup h2 {
  font-size: 14px;
  font-weight: bold;
  color: var(--theme-fg-color);
}

.popup-koppel-labels {
  width: 400px;
  min-height: 480px;
  margin-left: -380px;
  margin-top: -40px;
}
.popup-koppel-labels main .filter-labelplat {
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  padding: 5px;
  border: 1px solid var(--theme-alt-border-color);
  border-radius: 3px;
  background-color: var(--theme-accent-bg-color);
}
.popup-koppel-labels main .lijst {
  max-height: 322px;
  margin-top: 5px;
  overflow-y: scroll;
  padding: 0;
}
.popup-koppel-labels footer {
  text-align: left;
}

.popup-edit-label {
  width: 320px;
}
.popup-edit-label label > div {
  margin: 20px 0 10px 0;
}
.popup-edit-label input, .popup-edit-label select {
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  padding: 0 5px;
}

.page-filter > section.labels i[data-toggle]:last-child {
  flex: 0 0 16px;
  margin-left: auto;
  text-align: center;
  position: relative;
}
.page-filter > section.labels i[data-toggle]:last-child > .popup-menu {
  right: 0;
}
.page-filter > section.labels > .filter-labels {
  padding-top: 10px;
}
.page-filter > section.labels > .filter-labels .filter-label {
  display: flex;
  line-height: 28px;
  height: 28px;
  border-radius: 3px;
  white-space: nowrap;
  color: var(--theme-fg-color);
  background-color: transparent;
}
.page-filter > section.labels > .filter-labels .filter-label.sublabel {
  padding-left: 22px;
}
.page-filter > section.labels > .filter-labels .filter-label.selected {
  background-color: #ddd;
  color: #444;
}
.page-filter > section.labels > .filter-labels .filter-label:hover {
  background-color: #e5e5e5;
  cursor: pointer;
}
.page-filter > section.labels > .filter-labels .filter-label.selected:hover {
  background-color: #ddd;
}
.page-filter > section.labels > .filter-labels .filter-label .left-marker {
  flex: 0 0 10px;
  font-size: 15px;
  color: var(--theme-fg-color);
}
.page-filter > section.labels > .filter-labels .filter-label .titel {
  flex: 1;
  overflow-x: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  padding-left: 5px;
}
.page-filter > section.labels > .filter-labels .filter-label:not(:hover) > i:last-child::before {
  color: transparent;
}

.selecteer-label {
  display: block;
  width: 100%;
  height: 24px;
  line-height: 24px;
  padding: 0px 0 0 5px;
  margin: 0px;
  border-radius: 3px;
  overflow: hidden;
  white-space: nowrap;
  color: var(--theme-fg-color);
  background-color: transparent;
  font-size: 13px;
}
.selecteer-label > i.fa-solid {
  color: var(--theme-link-active-bg-color);
}
.selecteer-label:hover {
  background-color: var(--theme-accent3-bg-color);
  cursor: pointer;
}

.modal-wrapper .dialog.page-container {
  --page-container-height: calc(100vh - 2 * 20px);
  --page-menu-height: 75px;
  width: var(--content-width);
  height: var(--page-container-height);
  overflow: auto;
  margin: 0 auto;
  border: none;
}
.modal-wrapper .dialog.page-container header.page-menu {
  position: relative;
}
.modal-wrapper .dialog.page-container header.page-menu .sluitkruisje {
  font-size: 22px;
}
.modal-wrapper .dialog.page-container header.page-menu .titel {
  text-align: center;
}
.modal-wrapper .dialog.page-container:has(header.page-submenu) main.page-main {
  --page-main-height: calc(var(--page-container-height) - var(--page-submenu-height) - var(--page-menu-height));
}
.modal-wrapper .dialog.page-container:not(:has(header.page-submenu)) main.page-main {
  --page-main-height: calc(var(--page-container-height) - var(--page-menu-height));
}
.modal-wrapper .dialog.page-container main.page-main {
  height: var(--page-main-height);
  overflow-y: auto;
}

.dialog-bijlage-viewer {
  border: 0px;
}
.dialog-bijlage-viewer header .button {
  margin-right: 3em;
}
.dialog-bijlage-viewer .sluitkruisje {
  color: #aaa;
}
.dialog-bijlage-viewer .page-main.bijlage {
  padding: 0;
  background-color: white;
}
.dialog-bijlage-viewer .page-main.bijlage p {
  padding: 15px;
}
.dialog-bijlage-viewer .page-main.bijlage img {
  width: 100%;
}

.dialog-small {
  width: min-content;
  max-height: calc(100vh - 20px);
  margin: 0 auto;
  border-radius: 4px;
  background-color: white;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
  --header-height: 60px;
  --footer-height: 0px;
}
.dialog-small:has(> footer) {
  --footer-height: 70px;
}
.dialog-small > header {
  position: relative;
  line-height: var(--header-height);
}
.dialog-small > header > h1 {
  padding: 0 20px;
  font-size: 18px;
  font-weight: bold;
  white-space: nowrap;
}
.dialog-small > main {
  --max-height: calc(100vh - 20px - var(--header-height) - var(--footer-height));
  max-height: var(--max-height);
  overflow-y: auto;
}
.dialog-small > main > section {
  --line-height: 34px;
  line-height: var(--line-height);
  padding: 0 20px 10px 20px;
}
.dialog-small > main > section + section {
  border-top: 1px solid var(--theme-grey-line-color);
  padding-top: 10px;
}
.dialog-small > main > section > h2 {
  font-size: 16px;
  font-weight: bold;
}
.dialog-small > main > section > label > input:first-child[type=checkbox] {
  margin-right: 10px;
}
.dialog-small > main > section > label > .dummy-checkbox:first-child {
  display: inline-block;
  width: 13.2px;
  margin-right: 10px;
  visibility: hidden;
}
.dialog-small > main > section input,
.dialog-small > main > section select {
  line-height: 30px;
  height: 30px;
}
.dialog-small > main > section span:has(> select) {
  position: relative;
}
.dialog-small > main > section span:has(> select)::after {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  font-weight: 400;
  font-family: "Font Awesome 6 Pro";
  content: "\f078";
  position: absolute;
  right: 0;
}
.dialog-small > main > section span:has(> select) > select {
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 30px;
  padding: 0 20px 0 10px;
  background: transparent;
  border: none;
  text-align: right;
}
.dialog-small > footer {
  line-height: 30px;
  padding: 15px 20px 25px 20px;
  border-top: 1px solid var(--theme-grey-line-color);
  text-align: right;
  font-size: 0;
}

.page-container.page-container-search .page-submenu form {
  flex: 1;
  display: flex;
}
.page-container.page-container-search .page-submenu form input {
  flex: 1;
  align-self: center;
  height: 40px;
  width: 100%;
  font-size: 24px;
}

.chat-sonar-ping1 {
  background-color: rgba(255, 0, 0, 0.5);
}

.chat-sonar-ping2 {
  transition-property: background-color;
  transition-duration: 3s;
  transition-delay: 1s;
}

.chat-thumb {
  width: 40px;
  height: 40px;
  border-radius: 100%;
}

span.chat-thumb {
  display: inline-block;
  background-color: #3e74e3;
  color: white;
  line-height: 40px;
  text-align: center;
}

.dialog_chat > .page-main {
  overflow: auto;
}
.dialog_chat > main {
  display: grid;
  grid-template-columns: auto 1fr;
}
.dialog_chat .left {
  display: flex;
  flex-direction: column;
  width: 388px;
  height: var(--main-height);
  max-height: var(--main-height);
  overflow-y: auto;
}
.dialog_chat .left .chat-zoekresultaat {
  flex: auto;
  background: white;
  overflow-y: scroll;
  overflow-x: hidden;
}
.dialog_chat .left .chat-zoekresultaat .checkbox {
  display: none;
}
.dialog_chat .left .chat-zoekresultaat .item.selected div.tijd span.tijd {
  display: none;
}
.dialog_chat .left .chat-zoekresultaat .item:not(.selected) div.tijd a.delete {
  display: none;
}
.dialog_chat .left .chat-zoekresultaat .naam {
  font-size: 14px;
}
.dialog_chat .left .chat-zoekresultaat .laatste-bericht {
  font-size: 10pt;
}
.dialog_chat .left .chat-zoekresultaat .item.selectable {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}
.dialog_chat .left .chat-zoekresultaat .item.selectable.selected {
  background-color: var(--theme-link-active-bg-color);
}
.dialog_chat .left .chat-zoekresultaat .item.selectable.selected *:not(.pepicon3) {
  color: var(--theme-link-active-fg-color);
}
.dialog_chat .left .chat-zoekresultaat .item.selectable.selected:hover {
  background-color: var(--theme-link-selected-hover-color) !important;
}
.dialog_chat .left .chat-zoekresultaat span.tijd {
  font-size: 11px;
  color: #999;
}
.dialog_chat .left .chat-zoekresultaat a.delete {
  display: block;
  font-size: 20px;
  text-align: right;
}
.dialog_chat .left .chat-zoekresultaat a.delete:hover {
  color: red !important;
}
.dialog_chat .left .chat-zoekresultaat .pepicon3-groep-netwerk {
  margin-right: 0.2ex;
  font-size: 160%;
}
.dialog_chat .left .nieuwegroep {
  flex: 0 0 50px;
  height: 50px;
  line-height: 49px;
  border-top: 1px solid var(--theme-border-color);
  cursor: pointer;
  text-align: center;
  color: var(--theme-link-color);
  font-size: 14px;
  font-weight: bold;
}
.dialog_chat .left .nieuwegroep:hover {
  background-color: var(--theme-link-bg-color);
  color: var(--theme-link-fg-color);
}
.dialog_chat .left .nieuwegroep.selected {
  background-color: var(--theme-link-active-bg-color);
  color: var(--theme-link-active-fg-color);
}
.dialog_chat .right {
  height: var(--main-height);
  max-height: var(--main-height);
  overflow-y: auto;
  border-left: 1px solid var(--theme-border-color);
}
@media only screen and (max-width: 575.99px) {
  .dialog_chat {
    display: flex !important;
    flex-direction: column;
    width: 100vw;
    height: var(--real100vh);
  }
  .dialog_chat > main {
    flex: auto;
    background-color: white;
  }
  .dialog_chat > main .sg1-scroll::-webkit-scrollbar {
    width: 0;
  }
  .dialog_chat > main .left {
    width: 100vw;
    height: 100%;
  }
  .dialog_chat > main .right {
    width: 100vw;
    height: 100%;
    display: none;
  }
  .dialog_chat > main.mobile-show-right .left {
    display: none;
  }
  .dialog_chat > main.mobile-show-right .right {
    display: block;
  }
}
.dialog_chat #chat-info {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow-y: hidden; /* wordt gereset in javascript */
  overflow-x: hidden;
  text-align: left;
}
.dialog_chat #chat-info > * {
  padding-left: 25px;
  padding-right: 25px;
}
.dialog_chat #chat-info header {
  flex-basis: 70px;
  min-height: 70px;
  position: relative;
  overflow: visible;
  border-bottom: 1px solid var(--theme-border-color);
  background: white;
  padding-top: 15px;
  padding-right: 0;
}
.dialog_chat #chat-info header .visible-mobile {
  float: left;
  margin-right: 10px;
  line-height: 41px;
  color: #777;
  font-size: 18pt;
}
.dialog_chat #chat-info header img.show-groep-info {
  float: left;
  position: relative;
  top: -7px;
  left: -2px;
  width: 54px;
  height: 54px;
  margin-right: 23px;
  cursor: pointer;
  border-radius: 100%;
  border: 2px solid white;
  background-color: var(--theme-accent2-bg-color);
  color: black;
}
.dialog_chat #chat-info header img.show-groep-info:hover {
  border-color: var(--theme-link-color);
}
.dialog_chat #chat-info header #groep-deelnemers > * {
  display: block;
  float: left;
}
.dialog_chat #chat-info header #groep-deelnemers > *:not(:last-child) {
  margin-right: 8px;
}
.dialog_chat #chat-info header .toevoegen {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  border: 1px solid var(--theme-border-color);
  background: white;
  padding-top: 9px;
  text-align: center;
  font-size: 18px;
}
.dialog_chat #chat-info header .toevoegen:hover {
  background-color: #3e74e3;
  color: white;
  border-color: #3e74e3;
}
.dialog_chat #chat-info > .chatbox {
  flex: auto;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-top: 15px;
  padding-bottom: 15px;
}
.dialog_chat #chat-info > .chatbox p {
  text-align: left;
}
.dialog_chat #chat-info blockquote {
  margin: 0;
  border-left: 4px solid #5b90ff;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.05);
  padding-left: 1ex;
  font-size: 90%;
  text-align: left;
}
.dialog_chat #chat-info blockquote .geciteerde {
  margin-bottom: 0.5ex;
  color: #5b90ff;
}
.dialog_chat #chat-info .chat-form {
  flex: 0 0 91px;
  width: 100%;
  margin: 0;
  border-top: 1px solid var(--theme-border-color);
  background: var(--theme-accent4-bg-color);
  padding-top: 20px;
  padding-bottom: 20px;
}
.dialog_chat #chat-info .chat-form .reply-line {
  display: none;
  padding-bottom: 10px;
  max-width: 100%;
}
.dialog_chat #chat-info .chat-form .reply-line .flex {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}
.dialog_chat #chat-info .chat-form .reply-line .flex a.close-reply {
  display: block;
}
.dialog_chat #chat-info .chat-form .reply-line .naam {
  color: #5b90ff;
}
.dialog_chat #chat-info .chat-form .reply-line .pepicon3-close-small-18px {
  font-size: 18px; /* tja :) */
}
.dialog_chat #chat-info .chat-form .reply-line .close-reply {
  margin-right: 1ex;
  color: #888;
}
.dialog_chat #chat-info .chat-form .reply-line .close-reply:hover {
  color: var(--theme-fg-color);
}
.dialog_chat #chat-info .chat-form .input-line {
  display: flex;
}
.dialog_chat #chat-info .chat-form .sg1-buttons {
  margin-top: 15px;
}
.dialog_chat #chat-info .chat-form .popup-filepicker {
  margin-top: -170px;
}
.dialog_chat #chat-info .chat-form .chat-bijlage {
  height: 40px;
  width: 40px;
  line-height: 40px;
  margin-top: 5px;
  margin-right: 5px;
  padding: 0;
  font-size: 18pt;
  text-align: center;
  color: var(--theme-link-color);
}
.dialog_chat #chat-info .chat-form .chat-bijlage::after {
  display: none;
}
.dialog_chat #chat-info .chat-form .chat-bijlage:hover {
  color: var(--theme-link-hover-color);
}
.dialog_chat #chat-info .chat-form input {
  flex: auto;
  height: 50px;
  margin-right: 2%;
  background: white;
  border: 1px solid var(--theme-border-color);
  border-radius: 4px;
  padding: 0 10px;
  color: black;
}
.dialog_chat #chat-info .chat-form input::placeholder {
  color: #999;
  font-style: italic;
}
.dialog_chat #chat-info .chat-form input:disabled {
  cursor: progress;
  color: #bbb;
}
.dialog_chat #chat-info .chat-form input:disabled::placeholder {
  opacity: 0;
}
.dialog_chat #chat-info .chat-form .chat-send {
  width: 30px;
  height: 50px;
  line-height: 50px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--theme-link-color);
  font-size: 18pt;
  text-align: right;
}
.dialog_chat #chat-info .chat-form .chat-send:hover {
  color: black;
}
.dialog_chat #chat-info .chat-form .chat-send:disabled {
  color: #ddd;
}
.dialog_chat #nieuwegroep {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.dialog_chat #nieuwegroep > :not(:first-child) {
  border-top: 1px solid var(--theme-border-color);
}
.dialog_chat #nieuwegroep header {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 90px;
}
.dialog_chat #nieuwegroep header > * {
  margin: 15px;
}
.dialog_chat #nieuwegroep header h1 {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
}
.dialog_chat #nieuwegroep header img {
  height: 60px;
  width: 60px;
  border-radius: 100%;
  background-color: var(--theme-accent2-bg-color);
}
.dialog_chat #nieuwegroep header .input-wrapper {
  flex: auto;
  text-align: right;
}
.dialog_chat #nieuwegroep header .input-wrapper input {
  padding: 5px 10px;
  width: 250px;
}
.dialog_chat .chatline {
  display: flex;
  width: 100%;
}
.dialog_chat .chatnotice {
  margin: 3px 0;
  width: 100%;
  text-align: center;
  color: #666;
  font-style: italic;
}
.dialog_chat .chatbubbel {
  margin-right: auto;
  display: flex;
  column-gap: 15px;
  line-height: normal;
  min-width: 50%;
  max-width: 85%;
  margin: 8px 0;
}
.dialog_chat .chatbubbel .thumb-column {
  flex: 0 1 35px;
  min-width: 35px;
}
.dialog_chat .chatbubbel .rest {
  flex: auto;
}
.dialog_chat .chatbubbel .chat-thumb {
  width: 35px;
  height: 35px;
}
.dialog_chat .chatbubbel .metadata {
  color: #999;
  font-size: 12px;
}
.dialog_chat .chatbubbel blockquote {
  cursor: pointer;
}
.dialog_chat .chatbubbel blockquote:hover {
  background: rgba(0, 0, 0, 0.1);
}
.dialog_chat .chatbubbel .bericht {
  display: inline-block;
  position: relative;
  max-width: 80%;
  margin: 3px 0;
  padding: 5px 10px;
  border-radius: 5px;
  background-color: #f0f0f0;
  overflow: initial;
}
.dialog_chat .chatbubbel .bericht.plaatje {
  padding: 5px;
}
.dialog_chat .chatbubbel .bericht a.ogp-link {
  text-align: left;
  padding: 5px;
}
.dialog_chat .chatbubbel .bericht video {
  max-width: 100%;
}
.dialog_chat .chatbubbel .bericht a.bericht-reply {
  position: absolute;
  left: 100%;
  top: 0;
  visibility: hidden;
  padding: 0 1ex;
  font-size: 16pt;
}
.dialog_chat .chatbubbel .bericht:hover a.bericht-reply {
  visibility: visible;
}
.dialog_chat .chatbubbel.uitgaand {
  margin-right: 0;
  margin-left: auto;
  text-align: right;
}
.dialog_chat .chatbubbel.uitgaand .bericht {
  background-color: #e8efff;
}
.dialog_chat .chatbubbel.uitgaand a.bericht-reply {
  left: auto;
  right: 100%;
}
.dialog_chat .chatbubbel .fancy_link {
  font-size: 95%;
}
.dialog_chat .chatbubbel p {
  display: inline-block;
  margin: 0;
  text-align: left;
}
.dialog_chat li {
  list-style-type: none;
}

.chat-zoek-form {
  width: inherit;
}
.chat-zoek-form .zoekbalk {
  flex: 0 0 86px;
  border-bottom: 1px solid var(--theme-border-color);
  padding: 20px 15px;
}
.chat-zoek-form .zoekbalk .inputwrapper {
  position: relative;
  height: 45px;
}
.chat-zoek-form .zoekbalk .inputwrapper > a {
  display: inline-block;
  position: absolute;
  right: 1ex;
  top: 0;
  line-height: 45px;
  font-size: 18px;
}
.chat-zoek-form .zoekbalk .inputwrapper > a.reset-search {
  display: none;
}
.chat-zoek-form .zoekbalk input {
  width: 100%;
  height: 45px;
  line-height: 150%;
  padding-left: 1ex;
  border: 1px solid var(--theme-border-color);
  border-radius: 3px;
  font-style: italic;
  font-size: 14px;
  background-color: var(--theme-accent4-bg-color);
  color: var(--theme-fg-color);
}
.chat-zoek-form .zoekbalk input::placeholder {
  color: #999;
  font-style: italic;
}

.chat-toevoegen {
  flex: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.chat-toevoegen .chat-toevoeg-heading {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  position: relative;
  width: 100%;
  padding: 15px;
  padding-bottom: 0;
}
.chat-toevoegen .chat-toevoeg-heading h4 {
  margin: 0;
  padding: 0;
  font-size: 18px;
  font-weight: bold;
}
.chat-toevoegen .chat-toevoeg-heading a {
  display: block;
  text-transform: uppercase;
  font-size: 13px;
}
.chat-toevoegen form {
  flex: auto;
  display: flex;
  flex-direction: column;
}
.chat-toevoegen form .chat-zoekresultaat {
  flex: auto;
  height: 0;
  min-height: 300px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: -10px 0;
}
.chat-toevoegen form .chat-zoekresultaat .tijd, .chat-toevoegen form .chat-zoekresultaat .delete {
  display: none;
}
.chat-toevoegen .sg1-buttons {
  margin: 0;
  padding: 10px;
}

.chat-import {
  flex-direction: column;
  height: 100%;
}
.chat-import[style*="display: block"] {
  display: flex !important;
}
.chat-import .chat-zoekresultaat {
  flex: auto;
  height: 100px;
  overflow-x: hidden;
  overflow-y: scroll;
}
.chat-import .sg1-buttons {
  margin: 0;
  padding: 10px;
}
.chat-import .sg1-buttons button {
  text-transform: lowercase;
}

.chat-zoekresultaat .item {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  height: 60px;
  padding: 0 15px;
}
.chat-zoekresultaat .item.selectable:hover {
  cursor: pointer;
  background-color: var(--theme-accent-bg-color);
}
.chat-zoekresultaat .item.selectable:hover .leerlingen-toevoegen {
  font-weight: bold;
  opacity: 1;
}
.chat-zoekresultaat h5 {
  margin: 0;
  border-bottom: 1px solid var(--theme-border-color);
  background: white;
  padding: 1px 15px;
  line-height: 25px;
  font-size: 12px;
  text-transform: uppercase;
}
.chat-zoekresultaat div {
  line-height: normal;
}
.chat-zoekresultaat div.checkbox {
  width: 20px;
}
.chat-zoekresultaat div.checkbox div.vierkantje {
  width: 10px;
  height: 10px;
  border: 1px solid #888;
  border-radius: 2px;
}
.chat-zoekresultaat .item.selected .checkbox .vierkantje {
  background-color: var(--theme-link-active-bg-color);
}
.chat-zoekresultaat.chat-zoekresultaat-docentgroepen .item.selected {
  background-color: var(--theme-link-active-bg-color);
  color: var(--theme-link-active-fg-color);
}
.chat-zoekresultaat div.thumb {
  margin-right: 15px;
}
.chat-zoekresultaat .item.chatgroep span.naam {
  position: relative;
  top: -3px;
}
.chat-zoekresultaat div.naam {
  flex: auto;
  height: 40px;
}
.chat-zoekresultaat div.laatste-bericht, .chat-zoekresultaat div.leerlingen-toevoegen {
  position: absolute;
  bottom: 11px;
  width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  opacity: 0.5;
  white-space: nowrap;
}

.popup-chat-groepsinfo {
  width: 400px;
  min-height: 250px;
  border: 0px solid #aaa;
  border-radius: 4px;
  background: white;
  padding: 0;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.popup-chat-groepsinfo header {
  height: 100px;
  background-color: #3e74e3;
  text-align: center;
}
.popup-chat-groepsinfo header img {
  width: 60px;
  height: 60px;
  margin: 20px auto;
  border-radius: 100%;
}
.popup-chat-groepsinfo header img.upload {
  cursor: pointer;
}
.popup-chat-groepsinfo header img.upload:hover {
  opacity: 0.5;
}
.popup-chat-groepsinfo input#groep-naam {
  margin: 15px;
  width: calc(100% - 30px);
  height: 35px;
  border-radius: 3px;
  border: 1px solid var(--theme-border-color);
  font-size: 13px;
  color: black;
}
.popup-chat-groepsinfo input#groep-naam::placeholder {
  font-style: italic;
  color: #999;
}
.popup-chat-groepsinfo input#groep-naam:disabled {
  color: #bbb;
}
.popup-chat-groepsinfo img.upload {
  cursor: pointer;
}
.popup-chat-groepsinfo .ledenlijst {
  max-height: 350px;
}
.popup-chat-groepsinfo .ledenlijst .item {
  position: relative;
  border-top: 1px solid var(--theme-border-color);
}
.popup-chat-groepsinfo .ledenlijst .item .popup-menu {
  right: 0;
}
.popup-chat-groepsinfo .chat-zoekresultaat {
  height: 300px;
}
.popup-chat-groepsinfo .chat-zoekresultaat .tijd, .popup-chat-groepsinfo .chat-zoekresultaat .delete {
  display: none;
}
.popup-chat-groepsinfo .chat-zoekresultaat .checkbox {
  line-height: 50px;
}
.popup-chat-groepsinfo .chat-zoekresultaat span.naam {
  position: relative;
  top: 2px;
}
.popup-chat-groepsinfo .chat-zoekresultaat .laatste-bericht {
  bottom: 7px;
}
.popup-chat-groepsinfo .ledenlijst, .popup-chat-groepsinfo .chat-zoekresultaat {
  -webkit-user-select: none;
  user-select: none;
  overflow-y: auto;
  overflow-x: hidden;
}
.popup-chat-groepsinfo .ledenlijst .item, .popup-chat-groepsinfo .chat-zoekresultaat .item {
  position: relative;
  height: 50px;
  padding: 5px 15px;
  line-height: 40px;
}
.popup-chat-groepsinfo .ledenlijst .item .pepicon3, .popup-chat-groepsinfo .chat-zoekresultaat .item .pepicon3 {
  font-size: 18px;
}
.popup-chat-groepsinfo .ledenlijst .item:hover .menu-icon, .popup-chat-groepsinfo .chat-zoekresultaat .item:hover .menu-icon {
  background-color: var(--theme-accent-bg-color);
}
.popup-chat-groepsinfo .ledenlijst .item.selectable, .popup-chat-groepsinfo .chat-zoekresultaat .item.selectable {
  cursor: pointer;
}
.popup-chat-groepsinfo .ledenlijst .item .menu-icon, .popup-chat-groepsinfo .chat-zoekresultaat .item .menu-icon {
  display: block;
  position: absolute;
  right: 13px;
  top: 13px;
  height: 24px;
  width: 24px;
  border-radius: 100%;
  text-align: center;
  line-height: 22px;
  color: var(--theme-link-color);
}
.popup-chat-groepsinfo .ledenlijst .item img.chat-thumb, .popup-chat-groepsinfo .chat-zoekresultaat .item img.chat-thumb {
  margin-right: 0.2ex;
}

.button {
  --height: 30px;
  --bg-color: var(--theme-bg-color);
  --fg-color: unset;
  --border-color: var(--theme-border-color);
  --hover-bg-color: var(--theme-button-hover-bg-color);
  --hover-fg-color: var(--theme-button-hover-fg-color);
  --hover-border-color: var(--theme-button-hover-bg-color);
  position: static;
  display: inline-block;
  width: unset;
  height: var(--height);
  line-height: calc(var(--height) - 2px);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  padding: 0 10px;
  white-space: nowrap;
  font-size: 14px;
  background-color: var(--bg-color);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.button, .button:any-link {
  color: var(--fg-color);
}
.button ~ .button {
  margin-left: 10px;
}
.button:hover:where(:not(.input-default):not([disabled])) {
  background-color: var(--hover-bg-color);
}
.button:hover:where(:not(.input-default):not([disabled])), .button:hover:where(:not(.input-default):not([disabled])):any-link {
  color: var(--hover-fg-color);
}
.button[disabled] {
  cursor: not-allowed;
  color: #ccc;
  background-color: var(--bg-color);
}
.button.button-large {
  --height: 35px;
  font-size: 15px;
  font-weight: normal;
}
@media only screen and (max-width: 767.99px) {
  .button.button-large {
    --height: 25px;
    font-size: 12px;
  }
}
.button.button-no-border {
  line-height: var(--height);
  border: none;
}
.button.button-rounded {
  padding: 0 20px;
  border-radius: calc(var(--height) * 0.5);
}
@media only screen and (max-width: 767.99px) {
  .button.button-rounded {
    padding: 0 10px;
  }
}
.button.button-circle {
  --bg-color: #eee;
  --hover-fg-color: var(--fg-color);
  border-radius: 100%;
  width: var(--height);
  padding: 0;
  text-align: center;
  font-size: calc(var(--height) * 0.5);
}
.button.button-square {
  width: var(--height);
}
.button:where(.button-next) {
  background-color: var(--theme-link-color);
  color: white;
}

table.dataTable .button {
  --height: 26px;
  font-size: 14px;
}

.button-group {
  display: inline-flex;
}
.button-group > .button {
  margin: 0;
}
.button-group :not(.hidden) + :not(.hidden) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left-width: 0.5px;
}
.button-group :not(.hidden):has(+ :not(.hidden)) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-width: 0.5px;
}

.button + .button-group {
  margin-left: 10px;
}

.button-group-rounded {
  display: flex;
  margin: 0 auto;
  align-self: center;
  align-items: center;
  width: min-content;
  line-height: 36px;
  height: 36px;
  border-radius: 36px;
  padding: 0 5px;
  background-color: var(--theme-accent-bg-color);
}
.button-group-rounded .button-rounded {
  --height: calc(36px - 2 * 5px);
  --selected-bg-color: #00339b;
  --selected-fg-color: white;
  padding: 0 20px;
  margin-left: 0;
}
.button-group-rounded .button-rounded.selected, .button-group-rounded .button-rounded.selected:hover {
  background-color: var(--selected-bg-color);
  color: var(--selected-fg-color);
  cursor: default;
}
.button-group-rounded .button-rounded:not(.selected), .button-group-rounded .button-rounded:not(.selected):hover {
  background-color: transparent;
  color: unset;
}

.button-zet-klaar {
  --bg-color: white;
  --fg-color: #338605;
  --hover-bg-color: #3ba700;
  --hover-fg-color: white;
  border-color: rgba(59, 167, 0, 0.5);
}
.button-zet-klaar:hover {
  border-color: #3ba700;
}

.button-add {
  display: inline-block;
  font-size: 13px;
  font-weight: bold;
  color: var(--theme-fg-color);
  cursor: pointer;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  --size: 30px;
}
.button-add.button-add-small {
  --size: 26px;
}
.button-add.button-add-large {
  --size: 40px;
  font-size: 14px;
}
.button-add.button-add-medium {
  --size: 35px;
}
.button-add::before {
  display: inline-block;
  width: var(--size);
  height: var(--size);
  line-height: var(--size);
  margin-right: 5px;
  border-radius: 100%;
  vertical-align: middle;
  text-transform: none;
  font-size: calc(var(--size) * 0.6);
  text-align: center;
  background-color: var(--theme-accent-bg-color);
  color: var(--theme-link-color);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  font-weight: 400;
  font-family: "Font Awesome 6 Pro";
  content: "\+";
}
.button-add:link {
  color: var(--theme-fg-color);
}
.button-add.disabled {
  opacity: 0.5;
  --color: var(--theme-dimmed-fg-color);
}
.button-add.disabled::before {
  background-color: #ccc;
}

.sg1-koppel-skills {
  display: inline-block;
  height: 22px;
  width: auto;
  line-height: 22px;
  padding: 0 12px;
  border-radius: 11px;
  white-space: nowrap;
  margin-left: 10px;
  background-color: var(--theme-link-color);
  color: white;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.sg1-koppel-skills:hover {
  background-color: var(--theme-link-active-bg-color);
  color: var(--theme-link-active-fg-color);
}
.sg1-koppel-skills[disabled] {
  background-color: #ccc;
  cursor: default;
}

.on-off-switch {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 14px;
}
.on-off-switch input {
  display: none;
}
.on-off-switch .on-off-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 14px;
}
.on-off-switch .on-off-slider::before {
  border-radius: 50%;
}
.on-off-switch .on-off-slider::before {
  position: absolute;
  content: "";
  height: 10px;
  width: 10px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.on-off-switch input:checked + .on-off-slider {
  background-color: var(--theme-link-color);
}
.on-off-switch input:focus + .on-off-slider {
  box-shadow: 0 0 1px var(--theme-link-color);
}
.on-off-switch input:checked + .on-off-slider::before {
  -webkit-transform: translateX(10px);
  -ms-transform: translateX(10px);
  transform: translateX(10px);
}
.on-off-switch input:disabled + .on-off-slider {
  background-color: #ccc;
}
.on-off-switch input:disabled + .on-off-slider::before {
  display: none;
}

.on-off-switch.large {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}
.on-off-switch.large input {
  display: none;
}
.on-off-switch.large .on-off-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0s;
  transition: 0s;
  border-radius: 20px;
}
.on-off-switch.large .on-off-slider::before {
  border-radius: 50%;
}
.on-off-switch.large .on-off-slider::before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: 0s;
  transition: 0s;
}
.on-off-switch.large input:checked + .on-off-slider {
  background-color: var(--theme-link-color);
}
.on-off-switch.large input:focus + .on-off-slider {
  box-shadow: 0 0 1px var(--theme-link-color);
}
.on-off-switch.large input:checked + .on-off-slider::before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}
.on-off-switch.large input:disabled + .on-off-slider {
  background-color: #ccc;
}
.on-off-switch.large input:disabled + .on-off-slider::before {
  display: none;
}

.on_off_switch2 {
  display: inline-block;
  height: 35px;
  line-height: 35px;
  box-sizing: border-box;
  font-size: 0;
  font-weight: bold;
  -webkit-user-select: none;
  user-select: none;
}
.on_off_switch2 .off_switch {
  display: inline-block;
  padding: 0 20px;
  border: 1px solid #4da71e;
  border-radius: 4px 0 0 4px;
  background-color: #4da71e;
  color: white;
  font-size: 14px;
  line-height: inherit;
  cursor: pointer;
}
.on_off_switch2 .on_switch {
  display: inline-block;
  line-height: inherit;
  padding: 0 20px;
  border: 1px solid var(--theme-border-color);
  border-radius: 0 4px 4px 0;
  background-color: var(--theme-accent-bg-color);
  color: black;
  font-size: 14px;
  cursor: pointer;
}
.on_off_switch2.switched_on .off_switch {
  border-color: var(--theme-border-color);
  background-color: var(--theme-accent-bg-color);
  color: black;
}
.on_off_switch2.switched_on .on_switch {
  border-color: #4da71e;
  background-color: #4da71e;
  color: white;
}

.on_off_switch2.alt {
  border-radius: 4px;
  border: 1px solid var(--theme-border-color);
  background-color: var(--theme-accent-bg-color);
}
.on_off_switch2.alt .off_switch {
  height: 27px;
  line-height: 27px;
  margin: 3px;
  padding: 0 12px;
  border-radius: inherit;
  border-color: transparent;
}
.on_off_switch2.alt .on_switch {
  height: 27px;
  line-height: 27px;
  margin: 3px 3px 3px 0;
  padding: 0 12px;
  border-radius: inherit;
  color: #999;
  border-color: transparent;
}
.on_off_switch2.alt.switched_on .on_switch {
  color: white;
}
.on_off_switch2.alt.switched_on .off_switch {
  color: #999;
}

.status-bolletje {
  --size: 14px;
  display: inline-block;
  box-sizing: border-box;
  width: var(--size);
  height: var(--size);
  line-height: calc(var(--size) - 2px);
  border-radius: 100%;
  border: 1px solid #ccc;
  font-size: 11px;
  text-align: center;
  background-color: transparent;
  vertical-align: middle;
}
.status-bolletje.todo, .status-bolletje.status-kleur-1 {
  background-color: #ff5b1b;
  border: 1px solid #ee3f14;
  color: white;
}
.status-bolletje.todo.again, .status-bolletje.status-kleur-1.again {
  border: 2px solid #700000;
}
.status-bolletje.ingeleverd, .status-bolletje.status-kleur-2 {
  background-color: #ffee00;
  border: 1px solid #f0e090;
  color: black;
}
.status-bolletje.afgerond, .status-bolletje.status-kleur-3 {
  background-color: #74f137;
  border: 1px solid #76d93f;
  color: white;
}
.status-bolletje.afgerond.niet-voldaan, .status-bolletje.status-kleur-3.niet-voldaan {
  background-color: #888;
  border-color: #444;
}
.status-bolletje.wit {
  background-color: white;
  border: 1px solid white;
  color: white;
}
.status-bolletje.greyed {
  background-color: var(--theme-accent-bg-color);
  border: 1px solid #eee;
  color: transparent;
}
.status-bolletje.notincluded {
  width: 28px;
  border-color: var(--theme-border-color);
  border-radius: 8px;
}
.status-bolletje.notincluded.sw-opdracht {
  cursor: default;
}
.status-bolletje.notincluded i.fa {
  font-size: 8px;
  display: inline-block;
  margin-left: 2px;
}

.period-picker, .datetime-picker, .date-picker {
  display: inline-flex;
}
.period-picker > span, .datetime-picker > span, .date-picker > span {
  position: relative;
  white-space: nowrap;
}
.period-picker > span + span, .datetime-picker > span + span, .date-picker > span + span {
  margin-left: 10px;
}
.period-picker > span > .inline-datepicker, .datetime-picker > span > .inline-datepicker, .date-picker > span > .inline-datepicker {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 1;
  font-size: 1rem;
  line-height: 1;
}
.period-picker input:not([type=hidden]), .datetime-picker input:not([type=hidden]), .date-picker input:not([type=hidden]) {
  flex: 1;
}
.period-picker input:not([type=hidden]):not[readonly], .datetime-picker input:not([type=hidden]):not[readonly], .date-picker input:not([type=hidden]):not[readonly] {
  cursor: pointer;
}
.period-picker input:not([type=hidden]).datepicker, .datetime-picker input:not([type=hidden]).datepicker, .date-picker input:not([type=hidden]).datepicker {
  width: 10ch;
  padding: 0 3px;
}
.period-picker input:not([type=hidden]).timepicker, .datetime-picker input:not([type=hidden]).timepicker, .date-picker input:not([type=hidden]).timepicker {
  width: 7ch;
}
.period-picker input:not([type=hidden]) input:invalid, .datetime-picker input:not([type=hidden]) input:invalid, .date-picker input:not([type=hidden]) input:invalid {
  border: 1px solid red;
}

.tabs-container.tabs-container-icon-tabs > .tabs-nav {
  height: 60px;
  padding-left: 10px;
}
.tabs-container.tabs-container-icon-tabs > .tabs-nav > .tabs-tab {
  height: 100%;
  text-align: center;
  padding: 0 5px;
  min-width: 60px;
  margin: 0 10px 0 0;
  cursor: pointer;
}
.tabs-container.tabs-container-icon-tabs > .tabs-nav > .tabs-tab.selected {
  background-color: transparent;
  color: rgb(113, 142, 200);
}
.tabs-container.tabs-container-icon-tabs > .tabs-nav > .tabs-tab > .tabs-tab-icon {
  font-size: 20px;
  line-height: 40px;
}
.tabs-container.tabs-container-icon-tabs > .tabs-nav > .tabs-tab > h3 {
  font-size: 12px;
  font-weight: normal;
  margin: 0;
  line-height: 20px;
}
.tabs-container.tabs-container-icon-tabs > .tabs-content {
  margin-top: 20px;
  border-top: 1px solid var(--theme-grey-line-color);
}

.beoordelingsvinkjes {
  display: inline-block;
  background-color: #e0fbd6;
  font-size: 12px;
  width: 60px;
  height: 20px;
  line-height: 20px;
  border-radius: 10px;
  white-space: nowrap;
  text-align: center;
}
.beoordelingsvinkjes i.fa {
  background-color: transparent;
  font-size: 12px;
  color: white;
}
.beoordelingsvinkjes i.fa.docent {
  color: #54a3ff;
}
.beoordelingsvinkjes i.fa.student {
  color: #a1c600;
}
.beoordelingsvinkjes i.fa.extern {
  color: #9b9b9b;
}

.popup_verander_status a i.fa, .popup_verander_status a i.pepicon3 {
  line-height: 12px;
  margin-right: 12px;
}
.popup_verander_status .status-bolletje {
  margin-right: 11px;
}
.popup_verander_status .prioriteit,
.popup_verander_status .uitwerking-is-publiek {
  color: #d0021a !important;
}

/**
 * Usage:
 *
 * <span class="widget-zoeken">
 *   <input type="text" class="js-filter-text" placeholder="[% tl('action_search_word') %]"/>
 *   <i class="fa-regular fa-search" data-toggle="open" data-target=":parent"></i>
 * </span>
 */
.widget-zoeken {
  display: inline-block;
  --height: 34px;
  height: var(--height);
  line-height: calc(var(--height) - 2px);
  border-radius: calc(var(--height) * 0.5);
  border: 1px solid var(--theme-border-color);
  padding: 0 10px;
  font-size: 14px;
}
.widget-zoeken:not(.open) {
  padding: 0;
  width: var(--height);
  text-align: center;
  background-color: var(--theme-accent-bg-color);
  border-color: #eee;
}
.widget-zoeken:not(.open) > input {
  display: none;
}
.widget-zoeken > input {
  padding: 3px 0;
  border: none;
}

.toggle-archiveer {
  background-color: transparent;
  border-radius: 3px;
  font-size: 14px;
  font-weight: bold;
  color: var(--theme-fg-color);
}
.toggle-archiveer > i {
  font-size: 24px;
  color: var(--theme-link-color);
}
.toggle-archiveer:hover {
  background-color: transparent;
  cursor: pointer;
}
.toggle-archiveer:hover[data-status="3"] > i::before {
  content: "\f058";
}
.toggle-archiveer:hover[data-status="1"] > i::before {
  content: "\f111";
}

.toggle-afronden-dup {
  margin: 0;
  border: 0;
  background-color: transparent;
  color: var(--theme-fg-color);
}
.toggle-afronden-dup:hover {
  background-color: transparent;
  color: var(--theme-fg-color);
}
.toggle-afronden-dup:hover i {
  background-color: transparent;
}
.toggle-afronden-dup:hover i::after {
  color: var(--theme-link-color);
}

.meter {
  --color: blue;
  --height: 16px;
  height: var(--height);
  border-radius: calc(var(--height) * 0.5);
  background: linear-gradient(to right, var(--color) 0%, var(--color) var(--value), var(--theme-accent-bg-color) 0%);
}

/*# sourceMappingURL=algemeen.css.map */