:root {
  --header_color: #009ee2;
  --radiocheckbox_color: #59779b;
}

.toggle_visibility {
  display: inline-block;
}

.toggle_nee, .toggle_ja, .toggle {
  cursor: pointer;
  background-color: #fff;
  width: 40px;
  display: inline-block;
  border: 1px solid #dfdfdf !important;
  color: #c7c7c7;
  font-size: 15px;
  text-align: center;
  transition: all 0.3s ease;
  float: left;
}

.toggle_nee {
  border-right: 0 !important;
}

.toggle + .toggle {
  border-left: 0 !important;
}

.toggle_active {
  background-color: #009ee2 !important;
  color: #ffffff;
}

@font-face {
  font-family: "BundaySlab-Light";
  src: url("/css/fonts/35F324_0_0.eot");
  src: url("/css/fonts/35F324_0_0.eot?#iefix") format("embedded-opentype"), url("/css/fonts/35F324_0_0.woff2") format("woff2"), url("/css/fonts/35F324_0_0.woff") format("woff"), url("/css/fonts/35F324_0_0.ttf") format("truetype");
}
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-padding-top: 100px;
  scroll-behavior: smooth;
}

h1, h2, h3 {
  font-family: "BundaySlab-Light", serif;
}

h1 {
  font-size: 60px;
  color: #009ee2;
  line-height: 1;
  font-weight: normal;
}

h2 {
  font-size: 30px;
  font-weight: 600;
}

h2.big {
  font-size: 50px;
}

h2.accent {
  color: #009ee2;
}

h3 {
  font-weight: normal;
  font-size: 20px;
}

iframe.mp3_player {
  width: 400px;
  height: 40px;
  max-width: 100%;
}

h1.white {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
  display: inline-block;
  margin-top: -10px;
  padding: 10px;
}

a {
  color: #000;
  transition: all 0.3s ease;
}

.question__intro a,
.content_container a,
a.scrub {
  text-decoration: underline;
}

#header {
  height: 80px;
  width: 100%;
  position: fixed;
  z-index: 100;
  transition: all 0.2s ease-in-out;
}

#logo {
  position: absolute;
  top: 27px;
  left: 0;
  transition: all 0.3s ease;
}

#navmenu {
  margin: 0;
  margin-left: 180px;
  position: relative;
  list-style-type: none;
  height: 100%;
  padding: 0;
}

#userbar {
  position: absolute;
  right: 0;
  top: 0;
  list-style-type: none;
  margin-top: 0;
  height: 100%;
}

#main_search {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  padding: 10px;
  background-color: #009ee2;
  width: 250px;
}
#main_search input {
  border: 1px solid #666666;
}

#navmenu > li,
#userbar > li {
  float: left;
  color: #fff;
  height: 100%;
  transition: all 0.3s ease;
  padding: 27px 10px 0;
  position: relative;
}
#navmenu > li:hover,
#userbar > li:hover {
  background-color: #16b9ff;
  box-shadow: inset 1px 1px 2px 0 #000, inset -1px -1px 2px 0 #000;
}

#navmenu > li > a,
#userbar > li > a {
  color: inherit;
}

#header-container {
  background-color: var(--header_color);
  /*background-image: url('/img/l2018/header_bg.png');*/
  height: 80px;
  width: 100%;
  z-index: 100;
  transition: all 0.2s ease-in-out;
}

.tiny #header-container {
  height: 50px;
}

.tiny #logo {
  top: 12px;
}

.tiny #userbar > li:first-child {
  padding-top: 12px;
}

.tiny #navmenu > li {
  padding-top: 10px;
}

#breadcrumb {
  width: 100%;
  font-size: 17px;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.9);
}
#breadcrumb a {
  color: #000;
  transition: all 0.3s ease;
}
#breadcrumb a:hover {
  color: #009ee2;
}
#breadcrumb ul {
  list-style-type: none;
  margin: 0;
  padding: 10px 0;
  display: table;
  height: 100%;
}
#breadcrumb ul li {
  padding-right: 15px;
  display: table-cell;
  vertical-align: middle;
  white-space: nowrap;
}
#breadcrumb ul ul.breadcrumb-two-col {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}
#breadcrumb ul ul {
  display: none;
  height: auto;
  list-style-type: none;
  background-color: #fff;
  border-top: 0;
  position: absolute;
  margin-top: 1px;
  z-index: 1;
  -moz-box-shadow: 1px 1px 1px #cccccc;
  -webkit-box-shadow: 1px 1px 1px #cccccc;
  box-shadow: 1px 1px 1px #cccccc;
  margin-left: 10px;
}
#breadcrumb ul ul li {
  float: none;
  color: #000;
  cursor: pointer;
  padding: 5px 15px;
  border-bottom: 0;
  box-sizing: border-box;
  display: list-item;
}
#breadcrumb ul ul li a {
  color: #666666;
}
#breadcrumb ul ul li:hover {
  background-color: #009ee2;
  color: #fff;
}
#breadcrumb ul ul li:hover a {
  color: inherit;
}
#breadcrumb ul ul li:hover i {
  color: #fff;
}
#breadcrumb i {
  margin-right: 10px;
  font-size: 15px;
  color: #aaaaaa;
}

#test_progress {
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: 5px;
  width: 300px;
  max-width: 50vw;
  background-color: #bbbbbb;
}
#test_progress .test_progress_percentage {
  position: absolute;
  left: 10px;
  color: #fff;
}
#test_progress .test_progress_bar {
  background-color: #009ee2;
  height: 100%;
}

@media (hover: none) {
  #breadcrumb a {
    transition: none;
  }
}
#footer {
  background-color: #3C3C3C;
  padding: 30px 0;
}

#footer a {
  color: #fff;
  font-size: 15px;
}

#planner_table th {
  display: table-cell;
}
#planner_table tr.planner_this_week td {
  background-color: #FFFF99;
}

.popup th {
  display: inline-block;
  font-weight: 500;
  margin-bottom: 10px;
}
.popup .data_table th, .popup .termen th {
  display: table-cell;
}
.popup optgroup {
  color: #009ee2;
  font-weight: 500;
  font-size: 17px;
  padding: 0 10px 10px;
}
.popup optgroup:first-child {
  padding-top: 10px;
}
.popup optgroup option {
  color: #000;
  font-weight: 300;
  font-size: 17px;
  overflow: hidden;
  transition: all 0.3s ease;
}
.popup optgroup option:before {
  display: none;
}

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

.error {
  padding: 5px 10px;
  margin-top: 15px;
  margin-right: 10px;
  margin-bottom: 10px;
  border: 0;
  background-color: #ce2900;
  color: #fff;
  font-weight: 600;
}

.right {
  float: right;
}

.usp {
  font-size: 25px;
  font-family: "BundaySlab-Light", serif;
  font-weight: normal;
  line-height: 1.2;
}

.usp img {
  margin-bottom: 20px;
}

.header-login {
  background-color: #fff;
  color: #000;
  font-size: 18px;
  padding: 10px 30px;
  white-space: nowrap;
}

.header-login i {
  color: #009ee2;
  margin-right: 10px;
  font-size: 20px;
}

a.header-login {
  color: #000 !important;
}

.header-logout {
  background-color: #fff;
  color: #000;
  padding: 10px;
  white-space: nowrap;
}

.header-logout i {
  color: #009ee2;
  font-size: 20px;
}

.leerjaar_select {
  background-color: #f8235f;
  padding: 0 23px 20px;
}

.input_search_wrapper {
  display: inline-block;
  position: relative;
}
.input_search_wrapper.menu {
  width: 100%;
  margin: 5px 0 0;
}
.input_search_wrapper input {
  width: calc(100% - 41px);
}

#grades_left_box h3 {
  margin: 15px 0;
}

.filter-block li {
  background: rgba(224, 228, 203, 0.5);
  border-bottom: 1px solid #fff;
  padding: 10px;
}

.cover-image {
  min-height: 600px;
  height: 100vh;
  background-size: cover;
  position: relative;
}

.center-bottom {
  position: absolute;
  bottom: 60px;
  color: #fff;
  left: 50%;
  display: table;
}

.vertical-center {
  display: table-cell;
  vertical-align: middle;
}

.scroll-indicator {
  border: 2px solid #fff;
  font-size: 35px;
  border-radius: 15px;
  padding: 10px 5px;
  float: left;
  margin-right: 10px;
}

.container-texture,
.container-plain {
  background-color: #E0E4CB;
  background-position: right;
  background-repeat: no-repeat;
  padding: 40px;
}

.container-white {
  background-color: #fff;
  padding: 40px;
}

.container-texture {
  background-image: url("/img/l2018/circle.svg");
}

.content_container .container-texture,
.content_container .container-plain {
  padding: 20px;
  margin-left: -20px;
  margin-right: -20px;
  margin-bottom: 20px;
}

.content_container.transparent__container {
  background: transparent;
}
.content_container.transparent__container .question_container {
  padding: 30px;
  background: #fff;
}
.content_container.transparent__container .question_container:nth-child(even) {
  background: #E0E4CB;
  background-image: url(/img/l2018/circle.svg);
  background-position: center right;
}

.mp3_container {
  height: 40px !important;
}

.container-texture .mp3_container {
  padding: 10px;
  background-color: #fff;
  display: inline-block;
}

.container-texture h1 {
  color: #000;
}

#content {
  padding-top: 180px;
  padding-bottom: 20px;
  position: relative;
}

#container_questions {
  background-color: #fff;
  /*box-shadow: 0 5px 10px rgba(0,0,0,0.2);*/
}

.cover-image #content {
  position: static;
}

a.button {
  background-color: #009ee2;
  color: #fff;
  padding: 10px 15px;
  display: inline-block;
  font-size: 20px;
  transition: all 0.2s ease-in-out;
}

a.button:hover {
  background-color: #007aaf;
}

a.button i {
  margin-right: 10px;
}

button.button {
  background-color: #B4CF3E;
  color: #fff;
  padding: 10px 15px;
  font-size: 17px;
  border: 0;
}

button.button i {
  margin-right: 10px;
}

.content_container {
  background-color: #fff;
  padding: 30px;
  margin-bottom: 30px;
}

.admin_content_container {
  margin-top: 20px;
  padding: 30px;
  background-color: #ffffff;
  font-size: 17px;
}

.admin_content_container h3 {
  font-size: 17px;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 600;
  margin: 5px;
}

.admin_content_container .content_block a {
  color: #000;
}

.add_button, .save_button, .search_button, .delete_button, .nav_button {
  background-color: #B4CF3E;
  color: #fff !important;
  padding: 10px 20px;
  font-size: 17px;
  display: inline-block;
  border: 1px solid transparent;
  white-space: nowrap;
  text-decoration: none !important;
  line-height: 1.4285em;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

table + .add_button {
  margin-top: 10px;
}

.search_button {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 41px;
  text-align: center;
  padding: 0;
  outline: none;
}
.search_button:focus {
  outline: none;
}

.search_button,
.nav_button {
  background-color: #009ee2;
}

.delete_button {
  background-color: #F8235F;
}

a.action_link {
  color: #F8235F;
}

.add_button.compact, .save_button.compact, .nav_button.compact {
  padding: 2px 20px;
}

.search_button.compact {
  padding: 7px 11px 8px;
  cursor: pointer;
}

.add_button:hover,
.add_button:focus,
.save_button:hover,
.save_button:focus,
.delete_button:hover,
.delete_button:focus,
.nav_button:hover,
.nav_button:focus {
  transform: scale(1.1);
}

.add_button.fluid,
.nav_button.fluid {
  display: block;
}

.add_button i,
.save_button i,
.delete_button i,
.nav_button i {
  margin-right: 10px;
}

.login-container {
  width: 50%;
  margin: 0 auto;
}

/**
  * Achtergrondafbeelding die de hele pagina afdekt en waarover de content scrollt
  */
.background_cover {
  min-height: 100vh;
  background: url("/img/l2018/shutterstock_147430808_synthesizer.jpg") no-repeat center center fixed;
  background-size: cover;
}

.background_cover_filter {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  filter: blur(4px);
  -webkit-filter: blur(4px);
}

/**
  * Achtergrondafbeelding over de viewport die mee uit beeld scrollt
  */
.background_cover_scroll {
  height: calc(100vh + 180px);
  width: 100vw;
  background: url("/img/l2018/default.jpg") no-repeat center center fixed;
  background-size: cover;
  position: fixed;
  z-index: -1;
}

.method_menu {
  font-size: 17px;
  font-weight: normal;
  width: 100%;
}
.method_menu select {
  border: none;
  padding: 11px 15px;
}
.method_menu .sub {
  font-style: italic;
  color: #666666;
  font-size: 80%;
  line-height: 20px;
}
.method_menu h3 {
  font-size: 25px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 65px;
  background-color: #ff8831;
  color: #fff;
  line-height: 65px;
  padding-left: 20px;
  margin: 0;
}
.method_menu h3 a {
  color: inherit;
}
.method_menu h4 {
  font-size: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 45px;
  background-color: #d6d6d6;
  color: #333;
  line-height: 45px;
  padding-left: 20px;
  margin: 0;
}
.method_menu h4 a {
  color: inherit;
}
.method_menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  background-color: #fff;
}
.method_menu ul li {
  height: 65px;
  width: 100%;
  display: table;
  border-bottom: 1px solid #dcdcdc;
  color: #000;
  font-weight: 600;
  transition: all 0.2s ease-in-out;
  position: relative;
}
.method_menu ul li:hover {
  background-color: #f5f5f5;
}
.method_menu ul li:hover a:hover:after {
  right: 10px;
}
.method_menu ul li a {
  color: inherit;
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  padding: 20px 30px 20px 20px;
  word-break: break-word;
  margin: 0;
  line-height: 23px;
  position: relative;
}
.method_menu ul li a:not(.no_arrow):after {
  color: inherit;
  position: absolute;
  top: calc(50% - 11px);
  right: 15px;
  font-size: 20px;
  font-family: "Font Awesome";
  content: "\f105";
  pointer-events: none;
  transition: all 0.3s ease;
}
.method_menu ul li.has_search {
  color: inherit;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  padding: 20px;
  word-break: break-word;
  margin: 0;
}
.method_menu ul li.has_search a {
  padding: 0;
  display: block;
  height: auto;
}
.method_menu.color0 h3 {
  background-color: #009ee2;
}
.method_menu.color0 ul li {
  background-color: #F2F4EA;
  height: 50px;
}
.method_menu.color0 .grade {
  background-image: url(/img/l2018/circlebgw.svg);
  top: 7px;
}
.method_menu.color0 .menu_label_stars {
  top: 7px;
}
.method_menu.color1 h3 {
  background-color: #ff8831;
}
.method_menu.color1 ul a:after {
  color: #ff8831;
}
.method_menu.color1 ul.border-left li {
  border-left: 5px solid #ff8831;
}
.method_menu.color1 ul.border-left li:after {
  color: #ff8831;
}
.method_menu.color2 h3 {
  background-color: #797c43;
}
.method_menu.color2 ul a:after {
  color: #797c43;
}
.method_menu.color2 ul.border-left li {
  border-left: 5px solid #797c43;
}
.method_menu.color2 ul.border-left li:after {
  color: #797c43;
}
.method_menu.color3 h3 {
  background-color: #66261d;
}
.method_menu.color3 ul a:after {
  color: #66261d;
}
.method_menu.color3 ul.border-left li {
  border-left: 5px solid #66261d;
}
.method_menu.color3 ul.border-left li:after {
  color: #66261d;
}
.method_menu.color4 h3 {
  background-color: #6785a7;
}
.method_menu.color4 ul a:after {
  color: #6785a7;
}
.method_menu.color4 ul.border-left li {
  border-left: 5px solid #6785a7;
}
.method_menu.color4 ul.border-left li:after {
  color: #6785a7;
}

.planner_container {
  display: flex;
  justify-content: center;
  margin-top: 60px;
}

.planner_period {
  color: #fff;
  border: 2px solid #fff;
  padding: 15px;
  display: inline-block;
  transition: all 0.3s ease;
  background-color: rgba(0, 0, 0, 0.4);
}
.planner_period i {
  margin-right: 15px;
}
.planner_period a {
  color: inherit;
}
.planner_period:hover {
  border-color: #009ee2;
  background: #009ee2;
}

.grade, .menu_label {
  color: #00577c;
  text-align: center;
  width: 35px;
  height: 35px;
  line-height: 35px;
  background-color: #F2F4EA;
  border-radius: 18px;
}

.menu_label_stars {
  text-align: center;
  line-height: 40px;
}

.method_menu .grade,
.method_menu .menu_label,
.method_menu .menu_label_stars {
  position: absolute;
  right: 10px;
  top: calc(50% - 18px);
  z-index: 10;
}

.grade2 {
  margin: 0 auto;
  color: #fff;
  background-color: #009ee2;
}

.grade2 a {
  color: #fff !important;
  text-decoration: none !important;
}

/************************************************************************************************
*              VERTICAL MENU                                                                    *
************************************************************************************************/
.vert_menu-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
  display: inline-block;
}

ul.vert_menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul.vert_menu a {
  text-decoration: none;
}
ul.vert_menu li.has_subs li {
  color: #000;
}
ul.vert_menu li.has_subs li:before {
  content: "";
}
ul.vert_menu ul {
  list-style-type: none;
}
ul.vert_menu ul li {
  color: #fff;
  background: none;
}
ul.vert_menu ul li:hover {
  color: #000;
}
ul.vert_menu ul li:hover:before {
  color: #000;
}
ul.vert_menu ul li:before {
  color: #fff;
  position: absolute;
  left: 50px;
  font-size: 20px;
  font-family: "Font Awesome";
  content: "\f105";
  pointer-events: none;
  transition: all 0.3s ease;
}
ul.vert_menu ul li a {
  height: 100%;
  width: 100%;
}
ul.vert_menu li {
  margin: 0;
  margin-bottom: 2px;
  padding: 15px;
  background-color: #ecefe0;
  font-size: 17px;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}
ul.vert_menu li a {
  color: inherit;
  display: flex;
  align-items: center;
}
ul.vert_menu li.active, ul.vert_menu li:hover {
  background-color: #009ee2;
  color: #fff;
}
ul.vert_menu li.active i.fa.blue-circle, ul.vert_menu li:hover i.fa.blue-circle {
  background-color: #fff;
  color: #009ee2;
}
ul.vert_menu li.active:after, ul.vert_menu li:hover:after {
  color: #fff;
}
ul.vert_menu.arrow li:not(.has_subs) {
  position: relative;
}
ul.vert_menu.arrow li:not(.has_subs):after {
  color: #E0E4CB;
  position: absolute;
  right: 25px;
  font-size: 20px;
  font-family: "Font Awesome";
  content: "\f105";
  pointer-events: none;
  transition: all 0.3s ease;
  top: calc(50% - 13px);
}
ul.vert_menu.arrow li:not(.has_subs).active:after, ul.vert_menu.arrow li:not(.has_subs):hover:after {
  color: #fff;
}
ul.vert_menu.compact ul li {
  padding: 5px;
}
ul.vert_menu.compact li {
  margin-bottom: 1px;
}

i.fa.blue-circle {
  background-color: #009ee2;
  width: 45px;
  height: 45px;
  border-radius: 23px;
  line-height: 45px;
  text-align: center;
  color: #fff;
  font-size: 21px;
  margin-right: 25px;
  transition: all 0.3s ease;
}

i.fa-play.blue-circle {
  padding-left: 3px;
}

/************************************************************************************************
*              POST-ITS                                                                         *
************************************************************************************************/
.post-it {
  background: #fefabc;
  padding: 10px;
  font-size: 15px;
  color: #000;
  width: 200px;
  position: absolute;
  left: -10px;
  border: 1px solid #333;
  cursor: move;
  z-index: 998;
  text-align: left;
  opacity: 0.85;
  box-shadow: 0 2px 3px #333;
  -moz-box-shadow: 0 2px 3px #333;
  -webkit-box-shadow: 0 2px 3px #333;
}

.post-it-collapse {
  padding: 0;
  border: 0;
}

.post-it-other {
  background: #BCDBFE;
  border: 1px dashed #666666;
  cursor: default;
}

.post-it:hover {
  opacity: 1;
  -webkit-transition: opacity 0.15s ease-in-out;
  -moz-transition: opacity 0.15s ease-in-out;
  -ms-transition: opacity 0.15s ease-in-out;
  -o-transition: opacity 0.15s ease-in-out;
  transition: opacity 0.15s ease-in-out;
}

.post-it-edit-mode {
  opacity: 1 !important;
  cursor: default;
}

.post-it-edit i {
  font-size: 18px;
  color: #AAAAAA;
  margin-right: 5px;
}

.post-it-edit {
  position: absolute;
  right: -1px;
  top: -35px;
  height: 35px;
  padding: 5px;
  padding-right: 0;
  padding-top: 10px;
  display: none;
  border: 1px solid #333;
  border-bottom: 0;
  z-index: 999;
}

.post-it-collapse .post-it-edit {
  border-bottom: 1px solid #333;
  right: 48px;
  top: -34px;
}

.post-it-edit-background {
  background: #fefabc;
}

.post-it-private {
  background: #bcfabc;
}

.post-it ul, .post-it ol {
  padding-left: 20px;
  margin: 0;
}

.post-it-date-time {
  display: none;
  border-top: 1px dashed #999999;
  background-color: #999999;
  color: #fff;
  font-size: 90%;
  margin: -10px;
  margin-top: 10px;
  padding-left: 10px;
}

.post-it:hover .post-it-date-time {
  display: block;
}

.post-it-other {
  z-index: 997;
}

.post-it-other .post-it-edit {
  background: #bcdbfe;
  border: 1px dashed #666;
  border-bottom: 0;
}

.post-it-other .post-it-edit i {
  color: #111111;
}

/************************************************************************************************
*              PRIKBORD                                                                         *
************************************************************************************************/
.prikbord__container {
  display: block;
  width: 100%;
  margin-bottom: 20px;
}
.prikbord__container:last-child {
  margin-bottom: 10px;
}

.prikbord__heading {
  padding: 14px 20px;
  background-color: #E0E4CB;
  display: flex;
  align-items: center;
}
.prikbord__heading.new {
  background-color: #c7d09e;
}
.prikbord__heading.new .prikbord__author {
  font-weight: bold;
}

.prikbord__edit {
  margin-left: auto;
}

.prikbord__edit-date {
  padding-right: 20px;
}

.prikbord__message {
  padding: 20px 20px;
  background-color: #F8F9F4;
}

/**
  * data_table
  */
table.data_table, table.input_table {
  border-spacing: 0;
  border-collapse: collapse;
  border: 0;
  font-size: 17px;
  width: 100%;
}

table.data_table a {
  color: #000;
  text-decoration: underline;
}

table.data_table.nounderline a {
  text-decoration: none;
}

table.wb td, table.wb th {
  border: 0;
  border-left: 1px solid #a7ab98;
  border-top: 1px solid #a7ab98;
}

table.wb thead tr:first-child td,
table.wb thead tr:first-child th {
  border-top: 0;
}

table.wb td:first-child,
table.wb th:first-child {
  border-left: 0;
}

table.data_table.lines td, table.data_table.lines th {
  border: 1px solid #747474;
}

table.data_table th {
  padding: 15px;
  background-color: #E0E4CB;
  text-align: left;
  vertical-align: top;
  font-weight: 600;
}

table.input_table th {
  text-align: left;
  vertical-align: top;
}

table.input_table.wb th {
  background-color: #E0E4CB;
}

table.data_table td {
  vertical-align: top;
  padding: 15px;
}
table.data_table td.plain {
  font-weight: 700;
}

table.data_table_compact td {
  padding: 7px 15px;
}

table.data_table_compact_full td,
table.data_table_compact_full th {
  padding: 7px 15px;
}

table.input_table td,
table.input_table th {
  padding: 5px 10px;
}

table.data_table th a, table.input_table th a {
  color: inherit;
}

table.stripe > tr:nth-child(even),
table.stripe > tbody > tr:nth-child(even) {
  background-color: rgba(224, 228, 203, 0.2);
}

/**
  * term-table
  */
table.termen {
  border-spacing: 0;
  border-collapse: collapse;
  border: 0;
  width: 100%;
}

table.termen td,
table.termen th {
  padding: 15px 20px;
  vertical-align: top;
  border: 1px solid #afb497;
  color: #000;
}

.bron__block-paragraph table.termen td {
  background-color: #f6f6f6;
}

table.termen th {
  background-color: #E0E4CB;
  background-image: none;
  font-weight: 700;
  width: 180px;
  text-align: left;
}

.termen th.sub {
  text-align: right;
  color: #000;
}

table.termen th.plain a {
  color: inherit;
}

table.termen td p:first-child, table.termen td ul:first-child {
  margin-top: 0;
}

table.termen a {
  color: #666666;
}

.odd, .normal {
  background-color: rgba(224, 228, 203, 0.2);
}

.click_for_answer_container {
  padding: 5px;
  position: relative;
  background-color: #fff;
  cursor: pointer;
  margin-top: 10px;
}

.click_for_answer div {
  position: absolute;
  background-color: #999;
  color: #fff;
  padding: 5px;
  right: 0;
  top: 0;
  margin-left: 10px;
  margin-bottom: 5px;
  cursor: pointer;
}

.show_answer i {
  background-image: url("/img/l2018/circle35.svg");
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  margin-right: 10px;
}

h2.title {
  color: #009ee2;
  font-size: 55px;
  line-height: 55px;
  font-family: "BundaySlab-Light", serif;
  font-weight: 700;
}

h3.title {
  font-size: 25px;
}

.sfeer-foto img {
  width: 100%;
  height: auto;
}

.quote-foto {
  color: #009ee2;
  text-align: center;
  font-size: 34px;
  font-weight: 700;
  padding: 40px 40px 0;
}

.opdracht_block {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  background: #fff;
  width: 100%;
}

.blue-circle {
  position: relative;
  height: 35px;
  width: 35px;
  border-radius: 18px;
  margin-right: 15px;
  background: #009ee2;
  color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.blue-circle:after, .blue-circle:before {
  font-family: "Font Awesome";
}
.blue-circle.video:after {
  content: "\f03d";
  font-size: 16px;
  font-weight: 700;
}
.blue-circle.opdracht:after {
  content: "\f303";
  font-size: 16px;
  font-weight: 700;
}

.overview-container {
  display: block;
  width: 100%;
}
.overview-container a {
  text-decoration: none;
}

.movie-buttons span {
  float: left;
  margin-right: 10px;
}
.movie-buttons .small_button {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: #009ee2;
  margin-right: 5px;
  float: left;
}
.movie-buttons .small_button:last-child {
  margin-right: 0;
}

.movie-fixed {
  position: fixed;
  width: 300px;
  bottom: 20px;
  right: 20px;
  border: 2px solid #666666;
  z-index: 100;
  background-color: #fff;
}
.movie-fixed iframe {
  max-width: 100%;
}

.movie-fixed .youtube_responsive169 {
  margin-bottom: 0;
}

.scroll_along .expand {
  display: none;
}

.scroll_along.movie-fixed .expand {
  position: absolute;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 100;
  display: block;
  cursor: pointer;
  font-size: 15px;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
}

a.overview-item {
  text-decoration: none;
}

.overview-item {
  display: flex;
  flex-direction: row;
  padding: 0 !important;
}

.overview-item--image {
  position: relative;
  width: 200px;
  background-size: cover;
  background-position: center center;
}
.overview-item--image img {
  width: 100%;
  height: 100%;
}

.overview-item--content {
  flex: 1;
  padding: 20px;
  color: #000;
}

.overview-item--button {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background: #009ee2;
  color: #fff;
  width: 75px;
}
.overview-item--button:after {
  position: absolute;
  font-family: "Font Awesome";
  font-size: 25px;
  content: "\f105";
}

.content_block {
  padding: 15px;
  background-color: #E0E4CB;
  overflow: hidden;
  font-size: 17px;
  margin-bottom: 15px;
}

.content_block .read_more {
  padding: 5px 10px;
  position: relative;
  background-color: #fff;
  cursor: pointer;
}

.youtube_right {
  float: right;
  margin-left: 40px;
  margin-bottom: 10px;
}

.vimeo {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  max-width: 100%;
  height: auto;
}

.vimeo iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.image169 {
  position: relative;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center center;
}

.youtube_responsive169 {
  margin-bottom: 30px;
}

.youtube_responsive169 iframe {
  aspect-ratio: 16/9;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  border: 0;
}

.youtube_lazy {
  background-color: #000;
  margin-bottom: 30px;
  cursor: pointer;
  position: relative;
  aspect-ratio: 16/9;
}

.youtube_lazy img {
  width: 100%;
  height: 100%;
  opacity: 0.7;
  aspect-ratio: 16/9;
}

.youtube_lazy .play-button,
.image-with-play-button .play-button {
  width: 90px;
  height: 60px;
  background-color: #333;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
  z-index: 1;
  opacity: 0.8;
  border-radius: 6px;
}

.youtube_lazy .play-button:before,
.image-with-play-button .play-button:before {
  content: "";
  border-style: solid;
  border-width: 15px 0 15px 26px;
  border-color: transparent transparent transparent #fff;
}

.youtube_lazy img,
.youtube_lazy .play-button,
.image-with-play-button .play-button {
  cursor: pointer;
}

.youtube_lazy img,
.youtube_lazy iframe,
.youtube_lazy .play-button,
.youtube_lazy .play-button:before,
.image-with-play-button .play-button,
.image-with-play-button .play-button:before {
  position: absolute;
}

.youtube_lazy .play-button,
.youtube_lazy .play-button:before,
.image-with-play-button .play-button,
.image-with-play-button .play-button:before {
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.youtube_lazy iframe {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

/************************************************************************************************
*              WIDGET BAR                                                                       *
************************************************************************************************/
#widget-bar {
  height: 148px;
  top: -20px;
  left: 0;
  right: 0;
  position: absolute;
  display: block;
  z-index: -10;
  transition: all 0.2s ease-in-out;
}
#widget-bar.fold-out {
  height: 130px;
  top: 128px;
  background-color: #E0E4CB;
}

.widget__toggle {
  position: absolute;
  top: 100%;
  left: calc(50% - 32.5px);
}

.tiny #widget-bar {
  top: -50px;
}
.tiny #widget-bar.fold-out {
  top: 98px;
}

#widget-bar-img {
  z-index: 2;
  cursor: pointer;
  width: 65px;
  height: 21px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  position: relative;
  fill: rgba(255, 255, 255, 0.9);
  transition: all 0.2s ease-in-out;
}

#widget-bar-img i.fa {
  position: absolute;
  left: 26px;
  top: 2px;
  color: #3C3C3C;
}

#widget-bar.fold-out #widget-bar-img {
  fill: #E0E4CB;
}

#widget-bar-content {
  padding-top: 20px;
  height: 100%;
  position: relative;
}

#widget-bar-scroll {
  position: relative;
  overflow: hidden;
  float: left;
  height: 100px;
  width: 100%;
}

.widget {
  width: 230px;
  float: left;
  padding: 10px;
  margin: 0;
  font-size: 15px;
  position: relative;
  display: flex;
}
.widget a {
  color: #000;
}
.widget .widget-icon {
  width: 55px;
  height: 55px;
  border-radius: 28px;
  background: #009ee2;
  color: #fff;
  float: left;
  line-height: 56px;
  font-size: 25px;
  text-align: center;
  margin-right: 15px;
}
.widget .widget-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 22px;
  width: calc(100% - 70px);
}
.widget .widget-title {
  font-size: 17px;
  font-weight: 700;
}

.mCSB_horizontal > .mCSB_container {
  padding-bottom: 10px;
}

.pma, .pmr {
  position: absolute;
  right: 5px;
  top: 5px;
  font-size: 20px;
  cursor: pointer;
}

.wrapper-dropdown {
  position: relative;
  transition: all 0.2s ease-in-out;
  height: calc(100% - 1px);
  color: #fff;
  border-top: 1px solid transparent;
  display: flex;
  align-items: center;
  z-index: 10;
}
.wrapper-dropdown a {
  color: inherit;
}
.wrapper-dropdown ul {
  list-style-type: none;
  background-color: #16b9ff;
  text-align: left;
  position: absolute;
  top: 100%;
  padding: 0;
  display: none;
  color: #fff;
  font-size: 17px;
  min-width: 150px;
  max-height: 100vh;
  overflow: auto;
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.wrapper-dropdown ul li {
  white-space: nowrap;
  border-bottom: 1px solid #009ee2;
  transition: all 0.3s ease;
}
.wrapper-dropdown ul li:last-child {
  border-bottom: 0;
}
.wrapper-dropdown ul li i {
  margin-right: 10px;
  width: 20px;
  text-align: center;
}
.wrapper-dropdown ul li:hover {
  background-color: #00a5ec;
  box-shadow: inset 1px 1px 2px 0 #000, inset -1px -1px 2px 0px #000;
}
.wrapper-dropdown ul li a {
  color: inherit;
  text-decoration: none;
  padding: 10px 20px;
  display: inline-block;
  height: 100%;
  width: 100%;
}

#navmenu .wrapper-dropdown ul {
  left: -10px;
}

#userbar .wrapper-dropdown ul {
  right: -10px;
}

.teacher_notice {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  margin-bottom: 20px;
  border-left: 10px solid #ff8831;
}

.teacher_content {
  background-color: #eeeeee;
  padding: 10px;
  border: 1px dotted #bbbbbb;
}
.teacher_content h2 {
  color: #888888;
  position: relative;
  padding-left: 60px;
}
.teacher_content h2:before {
  position: absolute;
  left: 10px;
  font-family: "Font Awesome";
  content: "\f070";
}

.image_copyright, .imfacebox {
  position: relative;
  display: inline-block;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.imfacebox div {
  position: absolute;
  right: 0;
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 10px;
  color: #ffffff;
  font-size: 20px;
  bottom: auto;
  top: 0;
  max-height: 100%;
}

.image_copyright_text {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 2px 5px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #BBBBBB;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
}

.image_copyright_text a {
  color: inherit;
}

.emph {
  font-weight: bold;
}

.arrow-list {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.arrow-list li {
  position: relative;
  padding-left: 20px;
}
.arrow-list li:before {
  position: absolute;
  font-family: "Font Awesome";
  top: 2px;
  left: 0;
  content: "\f105";
  color: #009ee2;
}

.number-list {
  list-style: none;
  padding: 0;
}
.number-list > li {
  list-style-position: outside;
  margin-left: 40px;
}
.number-list a {
  color: #000;
  text-decoration: underline;
}

.number-list-item {
  color: #009ee2;
  margin-right: 15px;
  margin-left: -40px;
  width: 25px;
  text-align: center;
  display: inline-block;
}

.dash-list {
  list-style: none;
  padding-left: 20px;
}
.dash-list a {
  color: #000;
  text-decoration: underline;
}
.dash-list > li {
  position: relative;
}
.dash-list > li:before {
  content: "-";
  position: absolute;
  top: 0;
  left: -20px;
}

.column-layout {
  margin-top: -1rem;
  margin-bottom: -1rem;
  margin-left: -1rem;
  margin-right: -1rem;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-box-align: stretch;
  align-items: stretch;
  padding: 0;
}

.column-text,
.column-sources,
.column-halve,
.column-third,
.column-quarter {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  vertical-align: top;
  position: relative;
  display: inline-block;
}

.column-halve {
  width: 50% !important;
}

.column-third {
  width: 33.33% !important;
}

.column-quarter {
  width: 25% !important;
}

.column-text {
  width: 56.25% !important;
}

.column-sources {
  width: 43.75% !important;
}

.adresboek-button {
  position: relative;
  display: block;
  height: 36px;
  width: 36px;
  font-size: 23px;
  color: #fff;
  border-radius: 18px;
  background-color: #009ee2;
  transition: all 0.3s ease;
}
.adresboek-button:hover {
  color: #fff;
  background-color: #007aaf;
}
.adresboek-button.adresboek-button-add:before {
  position: absolute;
  font-family: "Font Awesome";
  top: calc(50% - 13px);
  left: calc(50% - 3px);
  content: "\f105";
}
.adresboek-button.adresboek-button-remove:before {
  position: absolute;
  font-family: "Font Awesome";
  top: calc(50% - 13px);
  left: calc(50% - 5px);
  content: "\f104";
}

/**
  * Standaard inputs
  */
input,
select {
  border: 1px solid #009ee2;
  padding: 9px 15px;
  margin-left: 0;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 17px;
}
input:focus,
select:focus {
  outline: none;
}

input[type=text] {
  min-height: 44px;
}

select {
  min-height: 42px;
  line-height: 1.2;
}

input.fluid,
.fluid select,
.select-container.fluid,
textarea.fluid,
button.fluid {
  width: 100%;
}

input[type=text]:focus {
  outline: none;
}

.select-container select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; /* remove default arrow */
  padding-right: 55px;
  background-color: #fff;
  border-radius: 0;
  max-width: 100%;
}

.select-container select::-ms-expand {
  display: none; /* hide the default arrow in ie10 and ie11 */
}

.select-container {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.select-container:after {
  background: #009ee2;
  font-family: "Font Awesome";
  content: "\f107";
  text-align: center;
  right: 0;
  top: 0;
  bottom: 0;
  width: 41px;
  position: absolute;
  display: block;
  line-height: 41px;
  color: #fff;
  z-index: 10;
  margin: 0 0 0 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

input[type=radio] {
  width: 22px;
  height: 22px;
  vertical-align: middle;
  accent-color: var(--header_color);
}

.checkbox {
  line-height: 1.4;
}

.checkbox input[type=checkbox] {
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  margin: 0;
  margin-right: 10px;
  font: inherit;
  color: currentColor;
  width: 22px;
  height: 22px;
  border: 1px solid #A4A4A4;
  border-radius: 0;
  position: relative;
  cursor: pointer;
  transform: translateY(4px);
}

.checkbox input[type=checkbox]:hover {
  border: 2px solid var(--radiocheckbox_color);
}

.checkbox input[type=checkbox]:checked {
  border: 1px solid var(--radiocheckbox_color);
}

.checkbox input[type=checkbox]:checked::before {
  content: "\f00c";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: var(--radiocheckbox_color);
  color: #fff;
  font-family: "Font Awesome";
  font-size: 80%;
  text-align: center;
  line-height: 20px;
}

.checkbox input[type=checkbox]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.checkbox input[type=checkbox]:disabled:hover {
  border: 1px solid #A4A4A4;
}

.checkbox input[type=checkbox]:focus {
  outline: max(2px, 0.15em) solid #666666;
  outline-offset: max(2px, 0.15em);
}

.question_container td .checkbox input[type=checkbox],
.question__footer .checkbox input[type=checkbox] {
  transform: none;
}

ul.list4col {
  float: left;
  width: 100%;
  margin: 0 0 1em 0;
}

ul.list4col li {
  float: left;
  width: 24%;
}

ul.list3col {
  float: left;
  width: 100%;
  margin: 0 0 1em 0;
}

ul.list3col li {
  float: left;
  width: 33%;
}

ul.list2col {
  float: left;
  width: 100%;
  margin: 0 0 1em 0;
}

ul.list2col li {
  float: left;
  width: 49%;
}

/**
  * MAP-list
  */
ul.maplist, ul.maplist li ul {
  list-style-type: none;
  margin: 0;
  padding-left: 8px;
}

ul.maplist li {
  margin: 0;
  padding: 0;
  padding-left: 15px;
  position: relative;
}
ul.maplist li:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 1px;
  background: #000;
}
ul.maplist li:after {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;
  height: 1px;
  width: 7px;
  background: #000;
}
ul.maplist li:last-child:before {
  height: calc(100% - 14px);
}
ul.maplist li.active_map {
  font-weight: bold;
}

ul.maplist li .label {
  background-color: #009ee2;
  color: #ffffff;
  padding: 1px 5px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  border-radius: 12px;
  line-height: 1.4;
  font-weight: normal !important;
  height: 24px;
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0;
  top: 0;
  font-size: 14px;
}

ul.maplist a {
  text-decoration: none;
}

.files-title {
  display: block;
  font-weight: bold;
}

.progressbar {
  margin-top: 5px;
  display: block;
  width: 100%;
  height: 21px;
  border-radius: 11px;
  background-color: #E0E4CB;
  overflow: hidden;
}
.progressbar .progressbar-filler {
  background-color: #F8235F;
  height: 100%;
  transition: all 0.3s ease;
}

.selection a {
  margin-right: 10px;
}
.selection a:last-child {
  margin-right: 0;
}
.selection a i {
  margin-right: 5px;
  font-size: 14px;
}

/**
  * Treeview
  */
.treeview ul {
  margin: 0;
  padding: 0;
}

.treeview li {
  list-style-type: none;
  padding-left: 22px;
  margin-bottom: 3px;
  font-size: 17px;
  line-height: 22px;
}

.treeview li:before {
  content: "\f15b";
  font-family: "Font Awesome";
  display: inline-block;
  font-weight: 700;
  width: 22px;
  margin-left: -22px;
}

.treeview li.submenu:before {
  content: "";
}

.treeview a {
  text-decoration: none;
  border-bottom: 1px solid #CCCCCC;
}

.treeview a:hover {
  color: #24c0eb;
  border-bottom: 1px solid #24c0eb;
}

.treeview li.submenu {
  background: white url("/img/tree/closed.gif") no-repeat left 1px;
  cursor: pointer;
}

.treeview li.submenu ul {
  display: none;
}

.treeview .submenu ul li:not(.submenu) {
  cursor: default;
}

/**
  * Inpage navigation
  */
#inpage_nav {
  background: rgba(255, 255, 255, 0.8);
  height: 50px;
  margin-top: 30px;
  font-size: 17px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  overflow-x: auto;
  overflow-y: hidden;
}
#inpage_nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: table;
}
#inpage_nav li {
  position: relative;
  cursor: pointer;
  padding-left: 30px;
  padding-right: 30px;
  height: 50px;
  border-right: 1px solid rgba(112, 112, 122, 0.2);
  display: table-cell;
  vertical-align: middle;
  white-space: nowrap;
  transition: all 0.3s ease;
}
#inpage_nav li:hover, #inpage_nav li.active, #inpage_nav li.selected {
  background-color: #ffffff;
  color: #009ee2;
}
#inpage_nav a {
  color: inherit;
}

/************************************************************************************************
* COLUMNS (LEGACY)                                                                              *
************************************************************************************************/
.columns .column > *,
.columns .column2 > *,
.columns .column3 > * {
  padding: 5px 20px;
}

.columns .column ol,
.columns .column ul,
.columns .column2 ol,
.columns .column2 ul,
.columns .column3 ol,
.columns .column3 ul {
  padding-left: 50px;
}

.columns .column .attention_block {
  margin-left: 20px;
}

.column2, .column3 {
  float: left;
}

.column2 {
  width: 50%;
}

.column3 {
  width: 33.33333%;
}

.column2 p, .column3 p {
  text-align: justify;
}

/************************************************************************************************
* ASSIGNMENT BLOCK                                                                              *
************************************************************************************************/
.assignment_subtitle {
  padding-left: 15px;
  margin-top: -15px;
  display: block;
  color: #fff;
  font-weight: 600;
  background-color: rgba(0, 0, 0, 0.3);
}

.assignment_block {
  position: relative;
  padding: 10px;
  background-color: #E0E4CB;
  padding-right: 50px;
  min-height: 80px;
}

.assignment_status {
  font-size: 11px;
  color: #666666;
}

.assignment_title {
  font-size: 18px;
  color: #000;
}

.assignment_grade, .assignment_trash {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  font-size: 25px;
  background-color: #009ee2;
  color: #fff;
  line-height: 80px;
  width: 50px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.assignment_trash {
  padding-top: 20px;
  opacity: 0;
}

.assignment_block:hover .assignment_trash {
  opacity: 1;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -ms-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

/************************************************************************************************
* RTTI                                                                                          *
************************************************************************************************/
.rtti {
  margin: auto;
  margin-top: 5px;
  padding: 4px;
  font-size: 14px;
  line-height: 12px;
  background-color: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  font-weight: bold;
  width: 25px;
  text-align: center;
}

.question__type.clil {
  width: 45px;
  font-weight: 700;
  margin-top: -15px;
  color: #3a8555;
  border-color: #3a8555;
}

.question__type.dimensies {
  width: 45px;
  fill: #666666;
  border: 0;
}

.rtti_score {
  background-color: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  display: inline-block;
  padding: 3px 3px;
  line-height: 12px;
  margin-right: 5px;
  margin-bottom: 5px;
  color: #333333 !important;
}

.rtti_cum {
  padding: 3px;
  font-size: 12px;
  border: 0 !important;
  text-align: left;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

.rtti_cum span {
  float: right;
}

.rtti_r {
  border: 1px solid #48D870;
  color: #48D870;
}

.rtti_t1 {
  border: 1px solid #4BACC6;
  color: #4BACC6;
}

.rtti_r_bg, .rtti_t1_bg, .rtti_t2_bg, .rtti_i_bg {
  background-color: #4BACC6;
}

.rtti_t2 {
  border: 1px solid #F89648;
  color: #F89648;
}

.rtti_i {
  border: 1px solid #ADE845;
  color: #ADE845;
}

.rtti_- {
  border: 1px solid #666666;
  color: #666666;
}

.rtti_label {
  width: 15px;
  display: inline-block;
  font-weight: bold;
}

.rtti_perc_container {
  display: inline-block;
  width: 70px;
  height: 8px;
  background-color: #CCCCCC;
  position: relative;
}

.rtti_perc_container > div {
  height: 100%;
  position: absolute;
}

.rtti_select {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 50px;
  padding: 5px;
  padding-top: 0;
  background-color: #fff;
  border: 1px solid #999999;
  z-index: 5;
}

.label {
  background-color: #666666;
  padding: 3px 5px;
  color: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
}

/************************************************************************************************
* Grades tabel with 45 degrees rotated column headers                                           *
************************************************************************************************/
#content table.data_table td.rotate,
#content table.data_table th.rotate {
  height: 140px;
  white-space: nowrap;
  background-color: #fff;
  background-image: none;
  color: #111;
}

#grades_table td {
  min-width: 40px;
  padding: 10px;
}

td.rotate > div,
th.rotate > div {
  transform: translate(25px, 95px) rotate(315deg);
  width: 30px;
}

td.wrench {
  text-align: center;
  background-color: #fff;
  border-left: 1px dashed #cccccc;
  border-bottom: 1px dashed #cccccc;
}

td.rotate > div > span,
th.rotate > div > span {
  border-bottom: 1px dashed #ccc;
  padding-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #666666;
}

td.highlight, tr.highlight td, div.highlight, .odd.highlight .first_column {
  background-color: #eaeddc;
}

span.progress_points.highlight {
  color: #009ee2;
  border-bottom: 1px solid #000;
}

#grades_table {
  table-layout: fixed;
  width: auto;
}

.table_fixed_first_column {
  position: relative;
}

.table_fixed_first_column > div {
  overflow: auto;
  margin-left: 220px;
}

.table_fixed_first_column table td {
  min-width: 20px;
}

.table_fixed_first_column table tr td:nth-child(1), .table_fixed_first_column table tr th:nth-child(1) {
  position: absolute;
  width: 221px;
  left: 0;
  white-space: nowrap;
  margin-top: -0.5px; /* IE-fix */
  border-bottom: 0;
}

.ui.negative.message {
  padding: 10px 15px;
  font-size: 15px;
  margin: 0 14px 5px;
  width: 100%;
}

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

/************************************************************************************************
* YouTube subtitles																				*
************************************************************************************************/
.yt_subs_window {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  text-align: center;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #cccccc;
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
  font-size: 16px;
}

.yt_subs span {
  display: none;
}

/************************************************************************************************
* PRINT																							*
************************************************************************************************/
@media print {
  #header, #footer, .no_print {
    display: none;
  }
  #content {
    padding: 0;
  }
  .bron_image, p {
    page-break-inside: avoid;
  }
  #show_answers, #show_answers *, .question_options_container, .question_options_container *, .no-print, .bron__intro, #question_bar {
    display: none !important;
  }
  .stretch {
    background-image: none !important;
  }
  .bron, .explain, .explain2, .source_number, .credits, .bron emph, .explanation {
    color: #000 !important;
  }
  @page {
    margin: 1cm;
  }
}
/************************************************************************************************
* Responsiveness                                                                                *
************************************************************************************************/
.fa-menu-icon {
  display: none;
}

.wrapper-dropdown .fa-circle-user {
  margin-right: 10px;
}

.small-width-only {
  display: none;
}

#planner {
  min-width: 900px;
}

/************************************************************************************************
* Buttons                                                                                       *
************************************************************************************************/
.btn {
  min-width: 120px;
  display: inline-block;
  padding: 12px 20px;
  margin: 0 5px 0 0;
  background-color: #6D7E20;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 17px;
  line-height: 17px;
  font-weight: 500;
  text-align: center;
  text-transform: none;
  cursor: pointer;
  border-radius: 0;
  transition: all 0.3s ease;
  -webkit-appearance: none;
  border: 1px solid transparent;
  letter-spacing: 0;
}
.btn:hover {
  background-color: #4a5516;
  color: #fff;
}
.btn:focus {
  outline: none;
  color: #fff;
}
.btn:last-child {
  margin-right: 0;
}
.btn a {
  color: #fff;
  text-decoration: none;
}
.btn a:hover, .btn a:focus {
  color: #fff;
}

button.btn:disabled,
button.btn[disabled] {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
}

a.btn {
  color: #fff;
}
a.btn:hover, a.btn:focus {
  color: #fff;
}

.btn--clean {
  border: 0;
  background-color: transparent;
  padding: 0;
}

.btn--secondary {
  background-color: #E90747;
}
.btn--secondary:hover {
  background-color: #b70638;
}

.btn--third {
  background-color: #009ee2;
}
.btn--third:hover {
  background-color: #008cc9;
}

.btn--color1 {
  background-color: #ff8831;
}
.btn--color1:hover {
  background-color: #fd6b00;
}

.btn--color2 {
  background-color: #797c43;
}
.btn--color2:hover {
  background-color: #595b31;
}

.btn--color3 {
  background-color: #66261d;
}
.btn--color3:hover {
  background-color: #3e1712;
}

.btn--color4 {
  background-color: #6785a7;
}
.btn--color4:hover {
  background-color: #506c8b;
}

.btn--icon {
  position: relative;
  display: inline-block;
  text-align: left;
}
.btn--icon:after, .btn--icon:before {
  position: absolute;
  font-family: "Font Awesome";
  left: 17px;
  top: calc(50% - 9px);
}

.btn--next {
  padding-right: 35px;
}
.btn--next:after {
  right: 13px;
  left: auto;
  content: "\f105";
  font-size: 19px;
  font-weight: 300;
}

.btn--prev {
  padding-left: 35px;
}
.btn--prev:before {
  content: "\f104";
  font-size: 19px;
  font-weight: 300;
}

.btn--plus {
  padding-left: 45px;
}
.btn--plus:before {
  content: "\f067";
  font-size: 15px;
}

.btn--min {
  padding-left: 45px;
}
.btn--min:before {
  content: "\f068";
  font-size: 14px;
}

.btn--check {
  padding-left: 45px;
}
.btn--check:before {
  content: "\f00c";
  font-size: 15px;
  font-weight: 700;
}

.btn--save {
  padding-left: 45px;
}
.btn--save:before {
  content: "\f0c7";
  font-size: 17px;
  font-weight: 300;
}

.btn--speaker {
  padding-left: 45px;
}
.btn--speaker:before {
  content: "\f028";
  font-size: 17px;
  font-weight: 800;
}

.btn--sync {
  padding-left: 45px;
}
.btn--sync:before {
  content: "\f021";
  font-size: 15px;
  font-weight: 700;
}

.btn--login {
  padding-left: 45px;
}
.btn--login:before {
  content: "\f090";
  font-size: 17px;
  font-weight: 500;
}

.btn--signout {
  padding-left: 45px;
}
.btn--signout:before {
  content: "\f08b";
  font-size: 17px;
  font-weight: 500;
}

.btn--edit {
  padding-left: 45px;
}
.btn--edit:before {
  content: "\f040";
  font-size: 15px;
  font-weight: 700;
}

.btn--camera {
  padding-left: 45px;
}
.btn--camera:before {
  content: "\f332";
  font-size: 17px;
  font-weight: 500;
}

.btn--copy {
  padding-left: 45px;
}
.btn--copy:before {
  content: "\f0c5";
  font-size: 15px;
  font-weight: 500;
}

.btn--upload {
  padding-left: 45px;
}
.btn--upload:before {
  content: "\f093";
  font-size: 15px;
  font-weight: 500;
}

.btn--download {
  padding-left: 45px;
}
.btn--download:before {
  content: "\f019";
  font-size: 15px;
  font-weight: 500;
}

.btn--eye {
  padding-left: 45px;
}
.btn--eye:before {
  content: "\f06e";
  font-size: 15px;
  font-weight: 500;
}

.btn--pdf {
  padding-left: 45px;
}
.btn--pdf:before {
  content: "\f1c1";
  font-size: 17px;
  font-weight: 300;
}

.btn--print {
  padding-left: 45px;
}
.btn--print:before {
  content: "\f02f";
  font-size: 15px;
  font-weight: 500;
}

.btn--book {
  padding-left: 45px;
}
.btn--book:before {
  content: "\f02d";
  font-size: 15px;
  font-weight: 700;
}

.btn--play {
  padding-left: 45px;
}
.btn--play:before {
  content: "\f04b";
  font-size: 12px;
  font-weight: 700;
}

.btn--filter {
  padding-left: 45px;
}
.btn--filter:before {
  content: "\f01e";
  font-size: 12px;
}

.btn--email {
  padding-left: 45px;
}
.btn--email:before {
  content: "\f0e0";
  font-size: 15px;
  font-weight: 300;
}

.btn--search {
  padding-left: 45px;
}
.btn--search:before {
  content: "\f002";
  font-size: 14px;
}

.btn--menu {
  padding-left: 45px;
}
.btn--menu:before {
  content: "\f0c9";
  font-size: 14px;
}

.btn--delete {
  padding-left: 45px;
}
.btn--delete:before {
  content: "\f00d";
  font-size: 17px;
}

.btn--call {
  padding-left: 45px;
}
.btn--call:before {
  content: "\f095";
  font-size: 14px;
  font-weight: 700;
  transform: rotate(90deg);
}

.btn--send {
  padding-left: 45px;
}
.btn--send:before {
  content: "\f1d8";
  font-size: 17px;
  font-weight: 300;
}

.btn--folder {
  padding-left: 45px;
}
.btn--folder:before {
  content: "\f07b";
  font-size: 17px;
  font-weight: 300;
}

.footer__social b {
  display: block;
}
.footer__social ul {
  list-style: none;
  display: inline-block;
  margin: 10px 0 0 0;
  padding: 0;
}
.footer__social ul li {
  float: left;
  margin-right: 10px;
}
.footer__social ul li:last-child {
  margin-right: 0;
}
.footer__social ul li a {
  margin: 0;
  transition: all 0.3s ease;
}
.footer__social ul li a:hover {
  color: #fff;
  background: #007aaf;
}

.toets__drop-btn {
  background-color: #4a5516;
  color: white;
  padding: 5px 16px;
  font-size: 16px;
  border: none;
  transition: all 0.3s ease;
}

.toets__dropdown {
  position: relative;
  display: inline-block;
  text-align: left;
}
.toets__dropdown:hover .toets__dropdown-content {
  display: block;
}
.toets__dropdown:hover .toets__drop-btn {
  background-color: #3e8e41;
}

.toets__dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 280px;
  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.5);
  z-index: 1;
  top: 100%;
  right: 0;
}
.toets__dropdown-content a {
  color: black;
  padding: 10px 20px 10px 10px;
  text-decoration: none;
  display: block;
}
.toets__dropdown-content a:hover {
  background-color: #ddd;
}
.toets__dropdown-content a i {
  width: 30px;
  text-align: center;
  margin-right: 5px;
}

.black_transparent_bg {
  background-color: rgba(0, 0, 0, 0.7);
}

.inline-edit {
  opacity: 0;
  transition: all 0.5s ease;
}

.text_content:hover .inline-edit {
  opacity: 1;
}

.fixed_table_container {
  overflow: scroll;
  max-width: 100%;
  min-height: 200px;
  max-height: 50vh;
  position: relative;
  border-top: 1px solid #747474;
  border-left: 1px solid #747474;
}
.fixed_table_container table {
  position: relative;
  border-collapse: collapse;
}
.fixed_table_container thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  border-top: 0 !important;
}
.fixed_table_container thead th:first-child {
  left: 0;
  z-index: 2;
  border-left: 0;
}
.fixed_table_container tbody tr td:first-of-type,
.fixed_table_container tbody tr th:first-of-type {
  position: sticky;
  left: 0;
  z-index: 1;
  border-left: 0;
}
.fixed_table_container tbody tr td:first-of-type {
  background: #fff;
}

/** 
  * Question bar
  */
#question_bar {
  position: fixed;
  background-color: #E0E4CB;
  left: 20px;
  top: 148px;
  bottom: 20px;
  width: 55px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 17px;
  color: #dddddd;
  display: none;
  z-index: 99;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
  border-radius: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
#question_bar .mCSB_scrollTools {
  opacity: 0;
  visibility: hidden;
}
#question_bar li {
  height: 36px;
  width: 36px;
  margin: 5px auto;
  line-height: 34px;
  text-align: center;
  color: #000;
  font-size: 15px;
}
#question_bar li.no_circle {
  color: #3C3C3C;
  font-size: 18px;
  height: 30px;
}
#question_bar li.no_circle a {
  height: auto;
  width: auto;
  background-color: transparent;
  border-radius: 0;
}
#question_bar li.section {
  height: 25px;
  background-color: #68713a;
  overflow: hidden;
  color: #fff;
  line-height: 25px;
  margin-left: 0;
  width: 100%;
}
#question_bar li.section a {
  padding: 0;
  outline: none;
  background-color: transparent;
  display: inline-block;
  width: 100%;
  height: 100%;
}
#question_bar li.has_answer {
  color: #fff;
}
#question_bar li.has_answer a {
  background-color: #6bb56b;
}
#question_bar li ul {
  list-style-type: none;
  margin-top: 0;
  margin-left: -5px;
  padding-left: 0;
  background-color: #fff;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 10px 0 rgba(0, 0, 0, 0.16);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 10px 0 rgba(0, 0, 0, 0.16);
  z-index: 101;
  border: 1px solid #c1b08a;
}
#question_bar li ul li {
  height: auto;
  width: auto;
  color: #fff;
  background-color: #796945;
  font-size: 16px;
  line-height: 20px;
  border-bottom: 1px solid #c1b08a;
  margin: 0;
  text-align: left;
  background-image: none;
  padding: 3px 6px;
}
#question_bar li ul li:hover {
  background-color: #998558;
}
#question_bar li ul li:last-child {
  border-bottom: 0;
}
#question_bar li ul li a {
  display: block;
  padding: 5px 10px;
  height: 100%;
  width: 100%;
}
#question_bar li a {
  height: 36px;
  width: 36px;
  text-decoration: none;
  color: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 20px;
}

.mCSB_container {
  margin-right: 0;
}

.mCustomScrollBox > .mCSB_scrollTools {
  width: 5px;
}

@media screen and (max-width: 1100px) {
  #question_bar {
    left: 0;
    width: 45px;
  }
}
.question_counter {
  background-image: url("/img/l2018/circle35r.svg");
}

.rs_addtools a,
.rs_addtools span,
.rsbtn a, .rsbtn span {
  font-family: "Source Sans Pro", sans-serif !important;
}

.teacher_only {
  background-color: #f6f6f6;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 5px;
}
.teacher_only h2 {
  color: #777777;
  font-size: 20px;
  margin-bottom: 10px;
  font-family: "Source Sans Pro";
}

@media (max-width: 991px) {
  .mobile-only {
    display: block !important;
  }
  .desktop-only {
    display: none !important;
  }
  #planner {
    min-width: 0;
  }
}
/**
  * Username verdwijnt bij schermen< 1200px
  */
@media (max-width: 1199px) {
  #header_user_name {
    font-size: 16px;
  }
}
/**
  * Override van semantic voor het header menu
  */
@media (max-width: 991px) {
  #header-container .ui.container {
    width: auto;
    margin-left: 1em !important;
    margin-right: 1em !important;
  }
}
/**
  * Iconen in userbar
  */
@media (max-width: 1199px) {
  .login-container {
    width: 100%;
  }
  .fa-menu-icon {
    display: inline-block;
  }
  .menu-text-link {
    display: none;
  }
  #breadcrumb ul.breadcrumb-two-col {
    columns: 1 !important;
    -webkit-columns: 1 !important;
    -moz-columns: 1 !important;
  }
}
@media (max-width: 800px) {
  #header_user_name {
    display: none;
  }
  .column-layout {
    width: auto;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .column-text,
  .column-sources,
  .column-halve,
  .column-third,
  .column-quarter {
    width: 100% !important;
    margin: 0 0 !important;
  }
  #logo {
    display: none;
  }
  #breadcrumb ul {
    padding: 0;
    padding-left: 12px;
  }
  #navmenu {
    margin-left: 0;
  }
  #widget-bar {
    top: -40px;
  }
  .tiny #widget-bar {
    top: -70px;
  }
  #widget-bar.fold-out {
    top: 108px;
  }
  .tiny #widget-bar.fold-out {
    top: 78px;
  }
}
@media (max-width: 600px) {
  .question__match-option {
    flex-direction: column !important;
  }
  .ui.container {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .content_container {
    padding-left: 10px;
    padding-right: 10px;
  }
  #navmenu > li {
    display: none;
  }
  #navmenu .small-width-only {
    display: block;
  }
  .wrapper-dropdown ul {
    position: fixed;
    left: 0;
    right: 0;
    top: 80px;
  }
  .tiny .wrapper-dropdown ul {
    top: 40px;
  }
  h1 {
    font-size: 40px;
  }
  .admin_content_container {
    padding: 10px;
  }
  .question__intro:before {
    display: none !important;
  }
}
/************************************************************************************************
* SLIDES																						*
************************************************************************************************/
.slides {
  min-height: 600px;
  height: auto !important;
}

#content .slides h1 {
  padding-left: 0;
}

.slide {
  display: none;
  padding: 20px;
}

.slides_nav_bar {
  background: rgba(255, 255, 255, 0.8);
  position: relative;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
  margin-left: -30px;
  margin-top: -85px;
  margin-right: -30px;
  height: 55px;
  overflow-x: hidden;
}

.slides_nav_bar_prev, .slides_nav_bar_next {
  position: absolute;
  top: 14px;
  font-size: 22px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #555;
}
.slides_nav_bar_prev:hover, .slides_nav_bar_next:hover {
  color: #000;
}

.slides_nav_bar_prev {
  left: 17px;
}

.slides_nav_bar_next {
  right: 17px;
}

.slide_nav {
  position: relative;
  cursor: pointer;
  padding-left: 30px;
  padding-right: 30px;
  height: 50px;
  border-right: 1px solid rgba(112, 112, 122, 0.2);
  display: table-cell;
  vertical-align: middle;
  white-space: nowrap;
  transition: all 0.3s ease;
}
.slide_nav:first-child {
  border-left: 1px solid rgba(112, 112, 122, 0.2);
}

.slide_compact .slide_nav {
  padding-left: 10px;
  padding-right: 10px;
  font-size: 16px;
}

.slide_nav[data-slide-id="1"] {
  margin-left: 30px;
}

.active_nav {
  background-color: #fff;
  color: #009ee2;
}

.youtube_right {
  float: right;
  margin-left: 40px;
  margin-bottom: 10px;
}

.click_for_answer {
  display: none;
}

.click_for_answer ul {
  margin: 0;
  padding-left: 20px;
  list-style-type: square;
  text-align: left;
}

.log_item_content textarea {
  width: 100%;
  height: 150px;
}

.log_item_content {
  padding: 30px;
}

.log_edit_buttons {
  float: right;
  background-color: #666666;
  color: #fff;
  margin-left: 10px;
  margin-bottom: 15px;
  font-size: 20px;
  padding: 5px;
}

.log_edit_buttons i.fa {
  display: inline-block;
  margin-left: 5px;
  cursor: pointer;
}

.log_item {
  background-color: #f8f9f4;
  margin-bottom: 20px;
}

.log_item_datetime {
  font-weight: bold;
  background-color: #E0E4CB;
  padding: 15px;
}

/************************************************************************************************
*              QUESTIONS                                                                        *
************************************************************************************************/
table.question_fillin {
  line-height: 25px;
}

.question_type_GapQuestion2 .correct_answer,
.question_type_GapQuestion .correct_answer,
table.question_fillin .correct_answer,
table.question_match .correct_answer {
  background-color: #33b100;
  padding: 1px 5px;
  color: #fff;
}

table.question_gap .given_answer, table.question_fillin .given_answer {
  background-color: #2ea2cc;
  padding: 1px 5px;
  color: #fff;
}

.question_gap p {
  line-height: 23px;
}

/* BEGIN JASPER */
.question_container {
  background: transparent;
  padding: 0;
  margin: 30px 0;
  overflow: inherit;
  position: relative;
  -webkit-print-color-adjust: exact;
}
.question_container:first-child {
  margin-top: 0;
}
.question_container .select-container {
  margin: 0 5px;
}
.question_container input[type=text], .question_container textarea {
  resize: none;
  outline: none;
  color: rgba(0, 0, 0, 0.87);
  border: none;
  font-size: 17px;
  font-weight: 300;
}
.question_container input[type=text]::placeholder, .question_container textarea::placeholder {
  color: #757575;
}
.question_container input[type=text] {
  padding: 8px 10px;
  margin: 0 5px;
}
.question_container textarea {
  width: 100%;
  padding: 20px;
  border: 1px solid #68713a;
}

.question__content-container {
  display: flex;
  flex-direction: row;
  position: relative;
  font-size: 17px;
}
.question__content-container .section {
  font-family: "BundaySlab-Light";
  font-size: 30px;
  font-weight: 600;
}

.question__intro {
  background-color: #F6F7F1;
  padding: 20px 29px;
  position: relative;
  margin: 0 0 4px;
  z-index: 1;
  font-size: 17px;
  /*
  &:before {
  	content: '\f129';
  	position: absolute;
  	top: -12px;
  	left: -12px;
  	width: 25px;
  	height: 25px;
  	font-size: 11px;
  	font-weight: 700;
  	font-family: "Font Awesome";
  	color: #E0E4CB;
  	border: 2px solid #E0E4CB;
  	border-radius: 26px;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	background-color: #fff;
  }*/
}
.question__intro:after {
  content: "";
  position: absolute;
  top: calc(100% - 7px);
  left: calc(50% - 8px);
  width: 16px;
  height: 16px;
  background-color: #fff;
  transform: rotate(45deg);
}

.question__menu-left {
  background-color: #E0E4CB;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
  color: #63674d;
  padding: 20px 0;
}

.question__number {
  width: 35px;
  height: 35px;
  border-radius: 18px;
  font-size: 17px;
  font-weight: 600;
  background-color: #009ee2;
  display: flex;
  justify-content: center;
  padding-top: 3px;
  color: #fff;
}

.question__points {
  margin-top: 7px;
  font-size: 16px;
}

.question__type {
  background-color: transparent;
  color: inherit;
  margin-top: 11px;
  border: 2px solid #8F9570;
  border-radius: 4px;
  height: 26px;
  width: 25px;
  margin-bottom: 20px;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.question__circles {
  margin-top: auto;
}

.question__circle {
  margin-top: 15px;
  width: 35px;
  height: 35px;
  border-radius: 18px;
  font-size: 20px;
  background-color: #EEF1E2;
  display: flex;
  justify-content: center;
  transition: all 0.3s ease;
  font-family: "Font Awesome";
  font-size: 18px;
  position: relative;
  cursor: pointer;
}
.question__circle:hover {
  background-color: #fff;
}
.question__circle.question__circle-teacher:after {
  content: "";
  position: absolute;
  background-image: url(/img/l2018/teacher.svg);
  background-repeat: no-repeat;
  width: 17px;
  height: 24px;
  top: 6px;
  left: calc(50% - 6px);
}
.question__circle.question__circle-lightbulb {
  z-index: 6;
}
.question__circle.question__circle-lightbulb:after {
  content: "\f0eb";
  position: absolute;
  top: 4px;
  font-weight: 300;
}
.question__circle.question__circle-ka {
  z-index: 6;
}
.question__circle.question__circle-ka:after {
  font-family: "Open Sans";
  content: "KA";
  position: absolute;
  top: 4px;
  font-weight: 600;
  color: #888;
  font-size: 16px;
}

.question__circle-lightbulb--content {
  position: absolute;
  z-index: 5;
  top: calc(100% - 56px);
  left: 12px;
  transition: all 0.3s ease;
  min-height: 35px;
  background-color: #fff;
  color: #6B6B6B;
  padding: 4px 15px 6px 50px;
  border-radius: 18px;
  font-weight: 300;
  font-size: 17px;
  width: auto;
  max-width: calc(100% - 23px);
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}
.question__circle-lightbulb--content.show {
  opacity: 1;
  visibility: visible;
}

.question__circle-lightbulb--title {
  font-weight: 700;
  color: #A6AB8C;
  padding-right: 10px;
}

.question__content {
  background-color: #EFF1E4;
  padding: 28px 30px;
  flex: 1;
}

.question__title {
  font-size: 17px;
  font-weight: 700;
  display: block;
  margin-bottom: 20px;
}

.question__sortable {
  background: #fff;
  display: block;
  padding: 10px 50px 10px 20px;
  position: relative;
  margin-bottom: 8px;
  position: relative;
  cursor: move;
}
.question__sortable:last-child {
  margin-bottom: 0;
}
.question__sortable i.fa-arrows,
.question__sortable i.fa-arrows-up-down-left-right {
  position: absolute;
  top: calc(50% - 10px);
  right: 15px;
  color: #CACFAE;
}

.question__group-container .droppable-active, .question__match-container .droppable-active {
  transition: all 0.3s ease;
  background-color: #ccf5cc !important;
}
.question__group-container .droppable-hover, .question__match-container .droppable-hover {
  transition: all 0.3s ease;
  background-color: #E0E4CB !important;
}

.question__group-option--item {
  padding: 8px 8px;
  background: #fff;
  margin-bottom: 20px;
}

.question__group-option--title {
  display: block;
  padding: 10px 0 10px 10px;
  font-weight: 600;
}

.question__group-option--dropbox, .question__match-option--dropbox {
  padding: 10px 10px 0;
  width: 100%;
  background-color: #F3F3F3;
}
.question__group-option--dropbox .question__awnsers-item, .question__group-option--dropbox .block, .question__match-option--dropbox .question__awnsers-item, .question__match-option--dropbox .block {
  border: 2px solid #fff;
  background-color: #fff;
  padding: 5px 18px;
  margin-right: 11px;
}

.question__group-option--dropbox {
  min-height: 100px;
  display: inline-block;
}

.question__awnsers {
  display: block;
  width: 100%;
  float: left;
}

.question__awnsers-item, .block {
  border: 2px solid #fff;
  background-color: #F3F3F3;
  padding: 5px 18px;
  margin-right: 11px;
}

.match_small .question__awnsers-item,
.match_small .block {
  font-size: 16px;
  line-height: 19px;
  padding: 5px;
}

.question__match-container .question__match-option--dropbox .question__awnsers-item, .question__match-container .question__match-option--dropbox .block {
  margin: 0 !important;
}

.question__match-answer-container {
  display: block;
  width: 100%;
}

.question__match-option {
  width: calc(100% - 10px);
  margin: 0 20px 20px 0;
  background: #fff;
  float: left;
  display: flex;
  flex-direction: row;
}

.question__match-option-2col {
  width: calc(50% - 10px);
}
.question__match-option-2col:nth-child(even) {
  margin-right: 0;
}

.question__match-option-3col {
  width: calc(33.3% - 20px);
}
.question__match-option-3col:nth-child(3) {
  margin-right: 0;
}

.question__match-option--title {
  flex: 1;
  padding: 17px 20px;
  border-right: 1px solid #D4D4D4;
}

.question__match-option--dropbox-container {
  flex: 1;
  padding: 5px;
  min-height: 62px;
}

.question__match-option--dropbox {
  height: 100%;
  width: 100%;
  background: #E3E3E3 !important;
  display: flex;
  flex-direction: column;
  min-height: 52px;
  padding: 5px;
}

.question__options-container {
  padding-left: 10px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  position: absolute;
  bottom: -30px;
  right: -260px;
  width: 260px;
  z-index: 999;
}
.question__options-container.open {
  opacity: 1;
  visibility: visible;
}

.question__options-inner {
  position: relative;
  list-style: none;
  background: #fff;
  padding: 3px;
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.question__options-inner:before {
  content: "";
  position: absolute;
  bottom: 22px;
  left: -8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 8px 8px 0;
  border-color: transparent #fff transparent transparent;
}

.question__options-item {
  margin-bottom: 3px;
  background-color: #F3F3F3;
  color: #6B6B6B;
  padding: 4px 20px;
  cursor: pointer;
}
.question__options-item:last-child {
  margin-bottom: 0;
}

.question__footer {
  display: flex;
  background-color: #F6F7F1;
  position: relative;
  margin: 4px 0 0;
  z-index: 1;
}
.question__footer textarea {
  resize: none;
  outline: none;
  color: rgba(0, 0, 0, 0.87);
  border: none;
  font-size: 17px;
  font-weight: 300;
  width: 100%;
  padding: 20px;
}
.question__footer textarea::placeholder {
  color: #A5A5A5;
}

.question__footer_inverse {
  background-color: #666666;
  color: #fff;
}
.question__footer_inverse:after {
  content: "";
  position: absolute;
  top: -8px;
  left: calc(50% - 8px);
  width: 16px;
  height: 16px;
  background-color: #fff;
  transform: rotate(45deg);
}

.question__footer.review {
  margin-top: -5px;
  margin-bottom: 10px;
}

.question__footer-content {
  padding: 20px 29px;
  float: left;
  flex: 1;
}
.question__footer-content .toggle_visibility {
  vertical-align: middle;
  height: 33px;
}

.question__footer-content-feedback {
  color: #333333;
}

.question__footer-checkbox {
  padding: 0 5px;
}

.question__footer-title {
  font-weight: bold;
  font-size: 20px;
  display: block;
}
.question__footer-title .fa {
  color: #888888;
  margin-right: 7px;
}

.question__footer-points {
  margin-left: auto;
  text-align: right;
}
.question__footer-points span {
  font-size: 15px;
}

.question__footer-menu {
  margin-left: auto;
}
.question__footer-menu.stacked {
  display: flex;
  flex-direction: column;
}
.question__footer-menu.stacked .question__footer-menu--item {
  border-bottom: 1px solid #E2E2E2;
}
.question__footer-menu.stacked .question__footer-menu--item:last-child {
  border-bottom: none;
}

.question__footer-menu--item {
  color: #5A5A5A !important;
  background: #EFF1EA;
  padding: 20px 25px;
  border-left: 1px solid #E2E2E2;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  float: left;
}
.question__footer-menu--item:hover {
  background: #e8ebe1;
}
.question__footer-menu--item i {
  padding-right: 15px;
  margin-top: 1px;
  font-size: 18px;
}
.question__footer-menu--item i.delete {
  font-size: 21px;
}

.question__footer-content-half {
  float: left;
  width: 50%;
}

.question__footer-content-item {
  align-items: center;
  margin-bottom: 10px;
  min-height: 35px;
}
.question__footer-content-item .btn {
  margin-bottom: 0;
}

@media (max-width: 769px) {
  .question__match-option {
    width: 100%;
  }
}
/* EIND JASPER */
.question_container.question_type_Text {
  border-bottom: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  background: none;
}

.question_container .question_td {
  vertical-align: top;
}

.question_container .question_td_split {
  vertical-align: top;
  width: 400px;
}

.question_counter {
  background-image: url("/img/l2018/circle35.svg");
  width: 35px;
  height: 35px;
  line-height: 32px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  margin-left: -55px;
  margin-right: 20px;
  float: left;
}

.intro {
  margin-bottom: 10px;
  margin-left: -45px;
}

.question {
  font-weight: bold;
}

.question_type_OpenQuestion .question_td textarea {
  width: 100%;
  border: 1px solid #707070;
  margin-top: 10px;
}

.instruction:before {
  content: "\f0da";
  font-family: "Font Awesome";
  margin-right: 15px;
  font-size: 125%;
  color: #ea1010;
  position: relative;
  top: 2px;
  font-weight: 900;
}

div.correct_answer {
  color: #fff;
  background-color: #33b100;
  position: absolute;
  margin: 0;
  margin-left: -35px;
  margin-top: -5px;
  padding: 5px;
  width: 10px;
}

td.correct_answer {
  border: 1px solid #33b100;
  border-left: 5px solid #33b100;
  padding-left: 5px !important;
}

.given_answer {
  color: #fff;
  background-color: #2ea2cc !important;
}

.given_answer_preresit {
  background-color: #ffa500;
}

.given_answer a {
  color: inherit;
}

#grade {
  z-index: 3;
  float: right;
  width: 175px;
  border: 1px solid #767676;
  font-size: 25px;
  padding: 10px;
  text-align: center;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.9);
  right: -185px;
}

#grade a {
  text-decoration: none;
  border-bottom: 1px solid #666666;
}

.grade_big {
  float: right;
  display: inline-block;
  font-size: 30px;
  padding: 15px 20px;
  text-align: center;
  color: #fff;
  margin-top: -20px;
  margin-bottom: 10px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  border-radius: 2px;
}

.question_options_container {
  z-index: 3;
  text-align: right;
  display: none;
  position: absolute;
  left: 40px;
  font-family: "Source Sans Pro";
}

.question_options {
  background-color: #424242;
  padding: 4px 10px;
  color: #fff;
  text-align: center;
  z-index: 3;
  margin-bottom: 3px;
  cursor: pointer;
}

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

.max_points {
  position: absolute;
  margin-left: -30px;
  border: 1px solid #999999;
  color: #666666;
  font-size: 90%;
  padding: 4px;
}

.max_points_inline {
  font-size: 70%;
  display: block;
  font-weight: normal;
  color: #666666;
  padding-top: 5px;
}

.question_fillin table {
  border-spacing: 0;
  border-collapse: collapse;
  border: 0;
}

.question_fillin table td, .question_fillin table th {
  padding: 5px 10px;
  color: #000000;
  border: 0;
  vertical-align: top;
}

.question_fillin table th {
  padding: 5px 10px;
  color: #333333;
  font-weight: normal;
  font-size: 14px;
  background-color: #cccccc;
  text-align: left;
}

.question_fillin table.lines td, .question_fillin table.lines th {
  border: 1px solid #aaaaaa;
}

.question_fillin table th a {
  color: inherit;
}

.question_fillin table a {
  color: #666666;
}

.levende_grafiek {
  clear: both;
  position: relative;
}
.levende_grafiek > .levende_grafiek_option {
  position: absolute;
}

.levende_grafiek_option {
  align-items: center;
  border-radius: 4px;
  background-color: #70a7b4;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-weight: 700;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 2;
  padding: 3px 6px;
  min-width: 45px;
}

.levende_grafiek_options .levende_grafiek_tab {
  display: inline-block;
  padding: 5px 10px;
  text-align: center;
  min-width: 50px;
  background-color: #a7ab98;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  cursor: pointer;
  color: #fff;
  user-select: none;
  border: 1px solid #a7ab98;
  border-bottom: 0;
  margin-bottom: -1px;
}
.levende_grafiek_options .levende_grafiek_tab.active {
  background-color: #e0e4cb;
  color: #000;
}
.levende_grafiek_options .levende_grafiek_items {
  background-color: #e0e4cb;
  border: 1px solid #a7ab98;
}
.levende_grafiek_options .levende_grafiek_item {
  display: none;
  padding: 10px;
  min-height: 100px;
}
.levende_grafiek_options .levende_grafiek_item.visible {
  display: block;
}
.levende_grafiek_options .studentlist {
  background-color: #f6f6f6;
  padding: 10px;
  display: none;
}

.levende_grafiek_option0 {
  border: 1px solid #B4A9AF;
}

.levende_grafiek_option1 {
  border: 1px solid #A3BF91;
}

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

.question_list .question_container {
  cursor: move;
}

.question_footer {
  background-color: #cccccc;
  padding: 5px;
}

.pos .question_footer {
  background-color: #88CC88;
}

div.block {
  border: 2px solid #fff;
  padding: 5px 15px;
  cursor: move;
  margin-bottom: 11px;
  margin-right: 20px;
  float: left;
  background-color: #F3F3F3;
  box-sizing: border-box;
}

div.block img {
  border: 1px solid #CCCCCC;
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

div.block.green {
  /*@include linear-gradient(#d6e3bc, darken(#d6e3bc, 12));*/
}

div.block.blue {
  /*	@include linear-gradient(#ccc0d9, darken(#ccc0d9, 12)); */
}

div.block.orange {
  /* @include linear-gradient(#fabf8f, darken(#fabf8f, 12)); */
}

div.block_error, span.block_error div {
  background-color: #fab6c4;
  /*@include linear-gradient(#fab6c4, darken(#fab6c4, 12));*/
  cursor: pointer;
  border: 1px solid #cc0000 !important;
}

div.block_correct, span.block_correct div {
  background-color: #b6fac4;
  /*@include linear-gradient(#b6fac4, darken(#b6fac4, 12));*/
  cursor: pointer;
  border: 1px solid #00cc00 !important;
}

.drop {
  background-color: #C0C0C0;
  box-sizing: border-box;
}

.drop_group {
  background-color: #CCCCCC;
  width: 250px;
  padding: 10px;
  margin: 10px;
  margin-top: 0px;
  min-height: 100px;
}

.drop_group h3 {
  margin-top: 0;
}

.drop div.block {
  margin-bottom: 0;
}

div.blockItem {
  border: 2px solid #fff;
  padding: 5px 15px;
  cursor: move;
  margin-bottom: 11px;
  margin-right: 20px;
  float: left;
  background-color: #F3F3F3;
  box-sizing: border-box;
}

.cross {
  color: #000;
  float: right;
  margin: 0;
  margin-top: -6px;
  margin-right: -6px;
  font-size: 10px;
  font-weight: bold;
  text-decoration: none;
  height: 20px;
  transition: all 0.3s ease;
}
.cross:hover {
  color: #009ee2;
}
.cross:after {
  content: "\f00d";
  font-family: "Font Awesome";
}

.answerID {
  display: none;
}

.open_given_answer, .open_correct_answer, .open_given_answer_preresit {
  background-color: #fff;
  padding: 15px 22px;
  font-size: 17px;
}
.open_given_answer ul, .open_correct_answer ul, .open_given_answer_preresit ul {
  margin-top: 0;
  margin-bottom: 0;
}

.open_given_answer {
  border-left: 10px solid #2ea2cc;
}
.open_given_answer span {
  color: #2ea2cc;
}

.open_given_answer_preresit {
  border-left: 10px solid #ffa500;
}
.open_given_answer_preresit span {
  color: #ffa500;
}

.open_correct_answer {
  border-left: 8px solid #247E00;
}
.open_correct_answer span {
  color: #247E00;
  font-weight: 600;
}

.invulsamenvatting .question__content p, .inline-input .question__content p {
  line-height: 30px;
}
.invulsamenvatting input[type=text], .inline-input input[type=text] {
  border: 0;
  border-bottom: 1px solid #707070;
  padding: 0px 5px;
  font-size: 17px;
  outline: 0;
  color: #0d7694;
  min-height: 25px;
}
.invulsamenvatting .student_answer, .inline-input .student_answer {
  font-weight: 600;
}

.question_hidden {
  /*@include linear-gradient(#ececec, #cccccc);*/
  padding: 10px;
  border-left: 10px solid #cccccc;
  color: #444444;
  font-size: 15px;
  cursor: pointer;
}

.match_question_answer_container {
  border: 1px dashed #24c0eb;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f6f6f6;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.match_question_answer {
  font-family: "Open Sans";
  font-weight: 600;
}

.hr_questions {
  border: none;
  border-bottom: 1px solid #CCCCCC;
  height: 0;
}

.samenvatting_field {
  border: 1px solid #666666;
  height: 400px;
}

.gap_inline {
  cursor: pointer;
}

.gap_inline span {
  background-color: #e0e0e0;
  padding-right: 5px;
  margin-right: 3px;
  padding-left: 5px;
  border-bottom: 1px solid #cccccc;
}

.gap_inline .gap_inline_active {
  background-color: #00aaff;
  color: #fff;
}

.gap_inline .gap_inline_inactive {
  text-decoration: line-through;
  opacity: 0.5;
}

table.puzzle {
  border-spacing: 0;
  border-collapse: collapse;
  border: 0;
}

table.puzzle td, table.puzzle th {
  padding: 5px 5px;
  color: #666666;
  border: 1px solid #CCCCCC;
}

table.puzzle td.sel {
  border-left: 2px solid #cc0000 !important;
  border-right: 2px solid #cc0000 !important;
}

table.puzzle tr:first-child td.sel {
  border-top: 2px solid #cc0000 !important;
}

table.puzzle tr:last-child td.sel {
  border-bottom: 2px solid #cc0000 !important;
}

table.puzzle input {
  text-align: center;
  text-transform: uppercase;
}

.marked, .marked_correct {
  color: #ffffff;
  padding: 3px;
  border: 1px solid #666666;
  font-weight: bold;
}

.marked {
  background-color: #b13300;
}

.marked_correct {
  background-color: #33b100;
}

.marked.marked_correct:after {
  content: "\f00c";
  font-family: "Font Awesome";
  margin-left: 5px;
}

.question_type_MarkWordsQuestion .mark_words span {
  cursor: pointer;
}

.question_type_SchemeQuestion .question__content-container input[type=text],
.question_type_WordWebQuestion .question__content-container input[type=text] {
  border: 0;
  border-bottom: 1px solid #707070;
  outline: 0;
  color: #0d7694;
}

.question_type_SchemeQuestion .question__content-container input[type=text] {
  padding: 0px 5px;
  font-size: 17px;
  min-height: 25px;
}

.question_type_GapQuestion .correct_answer {
  font-weight: bold;
  color: #247e00;
  margin: 0;
  font-style: italic;
}

.keyboard_image {
  position: relative;
}

.keyboard_image .key {
  font-size: 20px;
  font-family: "Font Awesome";
  color: #CCCCCC;
  position: absolute;
  cursor: pointer;
}

.keyboard_image .circle_correct {
  color: #2ecca2;
}

.keyboard_image .circle_active {
  color: #2ea2cc;
}

.keyboard_image .circle_good_answer:after {
  content: "\f00c";
  font-family: "Font Awesome";
  color: #ffffff;
  position: absolute;
  left: 2px;
  top: 6px;
  font-size: 80%;
}

.keyboard_image .circle_wrong_answer:after {
  content: "\f00d";
  font-family: "Font Awesome";
  color: #ffffff;
  position: absolute;
  left: 5px;
  top: 6px;
  font-size: 80%;
}

.question_note_correct_answer {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  position: absolute;
  border: 2px solid #00cc00;
  width: 20px;
  height: 20px;
}

.notation_button button {
  font-size: 15px;
}

.canvas_container {
  padding-bottom: 10px;
}

.question_type_GapQuestion .select-container select,
.question_type_GapQuestion2 .select-container select {
  min-height: auto;
  padding-top: 3px;
  padding-bottom: 4px;
}

.question_type_GapQuestion .select-container,
.question_type_GapQuestion2 .select-container {
  line-height: 1.2;
}

.question_type_GapQuestion .select-container:after,
.question_type_GapQuestion2 .select-container:after {
  line-height: 28px;
  top: 0;
  bottom: 0;
}

.question_type_MatchQuestionLayout .drop {
  background-color: rgba(243, 243, 243, 0.7);
  box-sizing: border-box;
  min-height: 42px;
}

.uploaded_files {
  background-color: #dfe4cb;
  padding: 10px 30px;
}

.question__group-option--item .block,
.question__match-option .block {
  position: relative;
}

.question__match-option--dropbox {
  cursor: pointer;
}

.question__match-option--dropbox-container {
  position: relative;
}

.question__match-option--dropbox:before {
  position: absolute;
  font-family: "Font Awesome";
  content: "\f0fe";
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999999;
}

.question__match-option--dropbox.ui-droppable-active:before {
  font-family: inherit;
  content: "Drop!";
  font-weight: bold;
}

.block .block_delete {
  position: absolute;
  top: 0;
  right: 0;
  width: 15px;
  height: 15px;
  content: "x";
  background-color: #f3f3f3;
  color: #000;
  line-height: 15px;
  font-size: 12px;
  text-align: center;
  font-weight: bold;
  display: none;
  cursor: pointer;
}

body {
  font-family: "Mukta Vaani", sans-serif;
}

h1, h2, h3, #facebox h1 {
  font-family: "Mukta Vaani", sans-serif;
}

h1.white {
  background-color: rgba(0, 0, 0, 0.3);
}

.film {
  text-align: center;
  display: block;
  margin-top: 30px;
  margin-bottom: 30px;
}

.film span {
  background-color: #73775d;
  color: #fff;
  padding: 15px 30px;
  font-size: 25px;
}

.film span:before {
  font-family: "Font Awesome";
  content: "\f03d";
  margin-right: 20px;
}

.odd, .normal {
  background-color: rgba(224, 228, 203, 0.5);
}

.background_cover {
  /*background: url(/img/wwjmd/computer-1149148_1920-e1528450701384.jpg) no-repeat center center fixed;*/
  background: url(/img/l2018/shutterstock_168085664.jpg) no-repeat center center fixed;
  background-size: cover;
}

.module_container {
  background-color: #eeeeee;
}

.module {
  background-color: #ffffff;
  padding: 20px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
  margin-bottom: 15px;
  padding-bottom: 10px;
}

.module h2 {
  font-weight: 600;
}

table th {
  text-align: left;
}

.tiny #logo {
  top: 10px;
}

#logo.custom_logo {
  height: 80px;
  display: table;
  top: 0;
}

#logo.custom_logo a {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
}

.tiny #logo.custom_logo {
  height: 50px;
}

#logo.custom_logo img {
  max-height: 70px;
  max-width: 170px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.tiny #logo.custom_logo img {
  max-height: 40px;
}

#footer {
  color: #fff;
  font-size: 15px;
}

@media (max-width: 600px) {
  #opdrachten .question_container:not(.question_type_Text) {
    margin-left: -10px;
    margin-right: -10px;
  }
}
#content {
  padding-top: 120px;
}

.score {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 10px;
  background-color: rgba(255, 136, 49, 0.8);
  font-size: 25px;
}

.les {
  height: 150px;
  color: #fff;
  position: relative;
  background-color: #1e3368;
  transition: all 0.3s ease;
}

.les h2 {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
  font-size: 22px;
}

.les.passed:after,
.les.failed:after {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  font-family: "Font Awesome";
  color: #fff;
  text-align: center;
  line-height: 200px;
  font-size: 80px;
}

.les.passed:after {
  background-color: rgba(0, 150, 0, 0.5);
  content: "\f00c";
}

.les.failed:after {
  background-color: rgba(150, 0, 0, 0.5);
  content: "\f00d";
}

a .les:hover {
  transform: scale(1.1);
}

.green_button {
  min-width: 120px;
  display: inline-block;
  padding: 12px 20px;
  margin: 0 5px 0 0;
  background-color: #B4CF3E;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 17px;
  line-height: 17px;
  font-weight: 500;
  text-align: center;
  text-transform: none;
  cursor: pointer;
  border-radius: 0;
  transition: all 0.3s ease;
  -webkit-appearance: none;
  border: 1px solid transparent;
}
.green_button:hover {
  background-color: #96af2b;
  color: #fff;
}
.green_button:focus {
  outline: none;
  color: #fff;
}
.green_button:last-child {
  margin-right: 0px;
}
.green_button a {
  color: #fff;
  text-decoration: none;
}
.green_button a:hover, .green_button a:focus {
  color: #fff;
}

.instruction:before {
  display: none;
}

a.tooltip_css {
  text-decoration: underline;
  font-weight: bold;
}

.question_container.question_type_Text {
  margin-bottom: 30px;
}

.question__title table {
  font-weight: normal;
}

.question_type_GapQuestion .select-container:after,
.question_type_GapQuestion2 .select-container:after {
  margin-top: 0;
}

.question_type_MCQuestion table td {
  vertical-align: top;
}

.question_type_MCQuestion table td .iradio_square-blue {
  margin-top: 4px;
}

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