p {
  margin-bottom: 0.5em;
}

h1, h2, h3, h4, h5 {
  color: #333;
}

h2, h3 {
  margin-bottom: 0.5em;
}

input[type="submit"], .sendbutton, .btn {
  border-radius: 0 !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-color: #000;
  color: #000;
  background-color: #fff200;
  font-weight: normal;
  padding: 11px 23px !important;
  font-size: 13px;
  line-height: 16px;
}
input[type="submit"]:hover, .sendbutton:hover, .btn:hover {
  background-color: #fff;
  font-weight: bold;
  color: #000;
}
.main-header-bar {
  background-image: url("/res/header_background.png");
  background-repeat: repeat-x;
}
.ast-footer-overlay {
  padding-top: 1em;
  padding-bottom: 1em;
  background-color: #fff200 
}
.site-footer {
  color: #000;
}
.ast-small-footer {
  border: 0;
}
label {
  margin-right: 8px;
}
 
.itembox-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
    
.itembox {
  display: flex;
  flex-direction: column;
  margin: 5px;
  padding: 10px;
  border: 1px solid #aaa;
  width: 225px;
  text-align: center;
	
  position: relative;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
	
}
.itembox h4 {
  flex: 1;
  line-height: 1.2em;
}
.itembox .btn {
  margin: 5px;
  width: 90%;
}

.itembox .overlay {
  position: absolute;
  top: 0px;
  right: 7px;
  font-size: 16px;
}

.btn {
  display: inline-block;
  margin-bottom: 5px;
}

.itembox img {
  width: 200px;
  height: 200px;
}

.elearning h1 {
  font-size: 150%;
  margin-bottom: 0.25em;
}

.elearning h2 {
  font-size: 125%;
  margin-bottom: 0.25em;
}

.elearning h3 {
  font-size: 100%;
  font-weight: bold;
  margin-bottom: 0.1em;
}

.elearning h4 {
  font-size: 100%;
  font-weight: normal;
  margin-bottom: 0;
  font-style: italic;
}

.elearning p {
  margin-bottom: 0.8em;
  line-height: 150%;
}

.elearning blockquote {
  line-height: 150%;
  font-size: 100%;
  font-style: normal;
  margin: 1em 1em 1em 0em;
  padding: 1em;
}

.elearning ul {
  list-style: square;
  margin: 0 0 0.8em 1em;
}

.elearning li {
  line-height: 150%;
}

.elearning ol {
  margin: 0 0 0.8em 1.8em;
}

.elearning ul p, .elearning ol p {
  margin-bottom: 0;
}

.elearning p + ul, .elearning p + ol {
  margin-top: -0.8em;
}

.elearning ul ul, .elearning ol ul {
  margin-top: 0;
  margin-bottom: 0;  
}

.elearning .video-js {
  display: block;
  margin-left: auto;
  margin-right: auto;  
}

.elearning table {
  margin-bottom: 0.8em;
  font-size: 90%;
  line-height: normal;
}

.elearning table th {
  background-color: #D9D9D9;
}

.elearning table tr:nth-child(even) {
  background-color: #F2F2F2;
}

.elearning table th, .elearning table td {
  padding: 4px;
}

.elearning table td:empty::after {
  content: "\00a0";
}
 
.elearning pre {
  line-height: normal;
  background: inherit;
  margin-bottom: 0.8em;
  padding: 1em;
}  
	
.elearningstap {
  margin: 5px;
  padding: 10px;
  border: 1px solid #aaa;
}

.elearningstap.actief {
  background-color: #fffcd1;
}

.elearningstap.nietactief {
  background-color: #e9eaee;
}

.sectie {
  margin-bottom: 20px;
}

.elearning .toets h5 {
  font-size: 100%;
}

.elearning img {
  margin-bottom: 10px;
}

.elearning figure img {
  width: auto;
  height: auto;
  max-height: 500px;
  margin-bottom: 0;
  margin: auto;
  display: block;
  cursor: pointer;
}

.elearning figure img.fullwidth {
  max-width: 100%;
  max-height: 100%;
}

/* Limit layout shifting */
@media screen and (min-width: 550px) {
  .elearning figure img {
    min-height: 300px;  
  }
}
@media screen and (max-width: 550px) and (min-width: 250px) {
  .elearning figure img {
    min-height: 200px;  
  }
}

/* Force max width on larger screen, don't do this to allow responsiveness on mobile */
@media all and (min-width: 550px) {
  .elearning figure img {
    max-width: 500px;
  }
}

.elearning figure {
    margin-bottom: 10px;
}
.elearning figcaption {
    font-size: 80%;
	text-align: center;
}

/* Fullscreen overlay */
#fullscreen-image-overlay {
  display: none;

  position: fixed;
  inset: 0;
  justify-content: center;
  align-items: center;

  z-index: 9999;
  background: rgba(0,0,0,.85);
}
#fullscreen-image-overlay.active {
  display: flex;
}
#fullscreen-image-overlay-img {
  width: auto;
  height: auto;
  max-width: 98%;
  max-height: 98%;
  object-fit: contain;
  cursor: pointer;
}


table.header {
  border: 0px;
  margin-bottom: 5px;
}
table.header td {
  border: 0px;
  padding: 0px;
}

table.header img {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

.inschrijving-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.inschrijvingdagbox {
  display: flex;
  flex-direction: column;
  margin: 3px;
  padding: 5px;
  border: 1px solid #aaa;
  font-size: 90%;
  line-height: 1.4em;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

.inschrijvingdagbox {
  background-color: #fffcd1;
}

.inschrijvingdagboxhistorie {
  background-color: #e9eaee;
}

.inschrijvingdagbox h5 {
  text-align: center;
  max-width: 300px;
  line-height: 1.2em;
  margin-bottom: 5px;
}

.inschrijvingdagbox .itembutton {
  margin-top: 5px;
  text-align: center;
}

.certificaat-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.certificaatbox {
  display: flex;
  flex-direction: column;
  margin: 3px;
  padding: 5px;
  border: 1px solid #aaa;
  font-size: 90%;
  line-height: 1.4em;
}

.certificaatbox {
  background-color: #fffcd1;
}

.certificaatboxnietgedaan {
  background-color: #e9eaee;
}

.certificaatboxbox h5 {
  line-height: 1.2em;
  margin-bottom: 5px;
}


table.invoer {
  border: 0px;
  width: auto;
  display: block;
  overflow-x: auto;
}
table.invoer th, table.invoer td {
  border: 0px;
  padding: 4px;
}

table.invoer.centreerdata td:not(:first-child) {
  text-align: center;
}


input[disabled],button[disabled],select[disabled] {
  background-color: #eee !important;
}

.benadrukken,
.fielderror {
  color: #fb6600;
}

.video-js {
  margin-top: 20px;
  margin-bottom: 20px;
}

.inactief {
  filter: grayscale(1.0);
}


.toets .antwoord {
  display: block;
  position: relative;
  padding: 5px 5px 5px 40px;
  margin-bottom: 10px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid black;
}


.toets .antwoord:enabled {
  cursor: pointer;
}

/* Hide the browser's default radio button */
.toets .antwoord input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.toets .checkmark {
  position: absolute;
  top: 5px;
  left: 5px;
  xheight: 25px;
  xwidth: 25px;
  xbackground-color: #eee;
  xborder-radius: 50%;
}

.toets .checkmark:before {
  font-family: "Font Awesome 6 Free";
  display: inline-block;
  padding-right: 3px;
  vertical-align: top;
  font-weight: 400;
		
  font-size: 25px;
  line-height: 25px;
  content: "\f111";
}  

.toets .checkmark.goed:before {
  font-weight: 900;
  content: "\f058";
}

.toets .checkmark.fout:before {
  font-weight: 400;
  content: "\f057";
}

/* When the radio button is checked, */
.toets .antwoord ~ .checkmark:before {
  font-weight: 900;
  content: "\f105";
}

/* On mouse-over */
.toets .antwoord:hover input:not(:checked):enabled  ~ .checkmark:before {
  font-weight: 400;
  content: "\f058";
}

.toets .antwoord input:checked:enabled ~ .checkmark:before {
  font-weight: 900;
  content: "\f058";
}

.toets .antwoord input:checked ~ .checkmark.goed {
  color: green;
}

.toets .antwoord input:checked ~ .checkmark.fout {
  color: red;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.toets .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.toets .antwoord input:checked ~ .checkmark:after {
  display: block;
}


.bestanden .groep {
  padding-left: 1em;
}

.bestanden .beschrijving {
  margin-left: 0.7em;
}

.bestanden .beschrijving ul {
  list-style: square;
  margin: 0 0 0 1em;
  margin-bottom: 0.8em;
}	
  
.bestanden .box {
  border-left: 1px solid gray;
  margin-bottom: 2px;
}

.bestanden .box .ending {
  border-top: 1px solid gray;
  width: 1em;
}
.bestanden .box .beschrijving {
  margin-left: 0.5em;
}
.bestanden .box .beschrijving p {
  margin-bottom: 0;
}

.bestanden p.bestandsnaam {
  margin-bottom: 0px;
  padding-left: 0.5em;
}

.bestanden .directorynaam a {
  color: #000;
}

.bestanden .inactief .directorynaam i {
  color: lightgray;
}