/* frontend ***************************************************************** */
.bg_od {
  background-color: #FF8500 !important;
}
.bg_ol {
  background-color: #FDD282 !important;
}
.bg_mb {
  background-color: #B7BCE1;
}
/* Midden Blauw  */
.bg_mo {
  background-color: #FDD282;
}
/* Midden Oranje */
.bg_gd {
  background-color: #47B64D !important;
}
.bg_gl {
  background-color: #7FDA7A !important;
}
/* licht groen   */
.bg_rd {
  background-color: #CE4747;
}
.bg_qf {
  background-color: #CCCCCC;
}
/* question fout */
.bg_qg {
  background-color: #009304;
}
/* mja.          */
.tx_od {
  color: #FF8500;
}
.tx_bd {
  color: #006EB3;
}
.bg_st {
  @zilver Background;
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url('/fonts/roboto-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/roboto-v19-latin-regular.woff2') format('woff2'), Super Modern Browsers url('/fonts/roboto-v19-latin-regular.woff') format('woff'), /* Modern Browsers */ url('/fonts/roboto-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/roboto-v19-latin-regular.svg#Roboto') format('svg');
  /* Legacy iOS */
}
@font-face {
  font-family: 'Architects Daughter';
  font-style: normal;
  font-weight: 400;
  src: local('ArchitectsDaughter'), url('/fonts/ArchitectsDaughter.ttf') format('truetype');
}
/* deze wordt gebruikt in de plaatjes die we versturen bij Rekenen */
@font-face {
  font-family: '';
  font-style: normal;
  font-weight: 400;
  src: local('Josefin Sans'), url('/fonts/JosefinSans-VariableFont_wght.ttf');
}
/* 20230417 font toegevoegd om in chrome de formules mooi te maken (grote haakjes) */
@font-face {
  font-family: 'Fira Math';
  font-style: normal;
  font-weight: 400;
  src: local('Fira Math'), url('/fonts/FiraMath-Regular.otf');
}
/*
@font-face {
    font-family: 'Noticia Text';
    font-weight: 400;
    font-style: normal;
    src: url('https://fonts.googleapis.com/css2?family=Noticia+Text&display=swap')
}
*/
html {
  height: 100%;
  overflow: hidden;
}
body {
  overscroll-behavior: none;
  margin: 0px;
  height: 100%;
  overflow: hidden;
  touch-action: manipulation;
}
#__blaze-root {
  min-height: 100%;
  height: 100%;
}
#curtainsScroll {
  min-height: 100%;
  height: 100%;
  background-color: #ececec;
}
#curtains {
  height: 100%;
  background-color: #fbfbfb;
  padding: 0px 0px 0px 0px;
  max-width: 1350px;
  margin-left: auto;
  margin-right: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
/* dit is de div op de HP voordat je in logt */
.homepage {
  width: 1200px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  overflow: hidden;
}
#inlog {
  float: left;
  width: 240px;
  padding-left: 20px;
}
#inlog h3 {
  border: none;
}
#ffWachten {
  padding-top: 50px;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: white;
  text-align: center;
  color: #FF8500;
}
#header {
  width: 100%;
  top: 0px;
  padding: 10px 0px 0px 0px;
  height: 100px;
  padding-right: 12px;
  z-index: 60;
  position: relative;
  background-color: #616FBD;
}
.messagesD {
  width: 800px;
  height: 88px;
  display: block;
  border: 1px solid black;
  position: absolute;
  left: 100px;
  top: 100px;
  border: 2px solid #FF8500;
  border-bottom: 8px solid #FF8500;
  padding: 10px;
  background-color: #fbfbfb;
  z-index: 10;
  overflow: auto;
}
/******************************************************************************
  homepage na inloggen
 ******************************************************************************/
#userDashboard {
  height: 100%;
  overflow-y: auto;
  width: 100%;
  padding-bottom: 100px;
  height: 400px;
  background-color: #fbfbfb;
  padding: 15px;
  overflow: auto;
  z-index: 100;
  position: relative;
}
#LoginDashboard {
  background-color: #616FBD;
  display: inline-block;
  padding: 25px;
}
#headsUp {
  border: 4px solid #FF8500;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding: 1em;
  background-color: white;
  color: #1E2447;
  height: 375px;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.47);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.47);
  box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  display: block;
}
#headsUp.mHeadsUp {
  margin: 0em 0em 1em 0em;
  overflow-y: auto;
}
#userDashboard .CourseWrapper {
  height: 375px;
  padding: 0px;
  margin-bottom: 1em;
  border: 2px solid #1E2447;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  1-moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  position: relative;
  overflow: scroll;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.47);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.47);
  box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.3);
  background-repeat: no-repeat;
}
#userDashboard #divTekst {
  border: 4px solid #616FBD;
}
#userDashboard #divReclame {
  border: 4px solid #616FBD;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}
#userDashboard .CourseWrapper.homepageHelp {
  border: 4px solid #616FBD;
}
#userDashboard .Course {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px;
  margin: 10px 0px 0px 10px;
  flex-grow: 1;
}
#userDashboard .mCourse {
  margin: 0.3em !important;
}
#userDashboard .Shelf .col-sm-4 {
  width: 400px;
}
#userDashboard.mUserDashboard .Shelf .col-sm-4 {
  width: 100%;
}
.divRekenen {
  display: inline-block;
  margin: 0px;
  padding: 1em 0em 0em 0em;
  min-width: 100%;
  width: max-content;
}
#divAccordionRekenen {
  margin-bottom: 2em;
}
.divRekenenWrapper {
  overflow-x: auto;
  padding: 0px;
  border: 4px solid #616FBD;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-top-left-radius: 0px;
  min-width: 100%;
}
.divAbboExpired {
  height: 100%;
  position: absolute;
  width: 100%;
  background-color: #dddddd6b;
  padding: 10px;
  cursor: not-allowed;
  z-index: 99;
}
.divAbboExpiredSub {
  width: 80%;
  height: 60%;
  background-color: white;
  border: 2px solid #1E2447;
  margin: auto;
  margin-top: 20%;
  text-align: center;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
/*
 * Dit is de progressbar op de HP onderaan de courses
 *
 * heel raar, maar dit hele stuk CSS was kwijt geraakt...
 * IC515
 */
.progressBar {
  background: #fff375;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  padding-left: 5px;
  margin: 5px 5px 5px 12px;
  height: 10px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border: 2px solid #1E2447;
}
#LoginDashboard {
  width: 100%;
  height: 70%;
  margin-top: 50px;
}
#LoginDashboard .LoginDashboardSub {
  width: 365px;
  height: 100%;
  overflow-y: auto;
  width: 30%;
  float: right;
  min-height: 407px;
}
.headerStudentName {
  float: left;
  color: white;
  font-size: 15px;
  padding: 12px 10px 10px 10px;
}
.iconCourse {
  position: relative;
  float: left;
  top: 5px !important;
  cursor: pointer;
  font-size: 22px;
  padding-right: 7px;
}
/* groen icon wanneer je CursusQuiz gehaald hebt
 * deze wordt niet gebruikt
 */
/*
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 102.2 121.5">
        <path d="M65 90h72c2 0 3 2 3 4v90c0 2-1 3-3 3H65c-8 0-15-7-15-15V81a15 15 0 0 1 15-15h84c1 0 3 1 3 3v105a3 3 0 0 1-6 0V72H65c-5 0-9 4-9 9v1c0 4 4 8 9 8z" style="stroke-width:.264583"
              transform="translate(-50 -66)" />
        <path d="M97 100a28 28 0 0 0-28 28 28 28 0 0 0 9 21l-10 23 1 1 10-4h2l4 11h1l11-24 10 24h1l4-11h2l11 4 1-1-11-23a28 28 0 0 0 10-21 28 28 0 0 0-28-28z" style="color:#000;isolation:auto;mix-blend-mode:normal;solid-color:#000;fill:#ff8500;fill-opacity:1;stroke:none;stroke-width:.264583;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto"
              transform="translate(-50 -66)" />
    </svg>
*/
.iconCourseMedalOrange {
  top: -1px;
  background-position: 0px 0px;
  background-image: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiB2aWV3Qm94PSIwIDAgMTAyLjIgMTIxLjUiPgogICAgPHBhdGggZD0iTTY1IDkwaDcyYzIgMCAzIDIgMyA0djkwYzAgMi0xIDMtMyAzSDY1Yy04IDAtMTUtNy0xNS0xNVY4MWExNSAxNSAwIDAgMSAxNS0xNWg4NGMxIDAgMyAxIDMgM3YxMDVhMyAzIDAgMCAxLTYgMFY3Mkg2NWMtNSAwLTkgNC05IDl2MWMwIDQgNCA4IDkgOHoiIHN0eWxlPSJzdHJva2Utd2lkdGg6LjI2NDU4MyIgCiAgICAgICAgICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01MCAtNjYpIiAvPgogICAgPHBhdGggZD0iTTk3IDEwMGEyOCAyOCAwIDAgMC0yOCAyOCAyOCAyOCAwIDAgMCA5IDIxbC0xMCAyMyAxIDEgMTAtNGgybDQgMTFoMWwxMS0yNCAxMCAyNGgxbDQtMTFoMmwxMSA0IDEtMS0xMS0yM2EyOCAyOCAwIDAgMCAxMC0yMSAyOCAyOCAwIDAgMC0yOC0yOHoiIHN0eWxlPSJjb2xvcjojMDAwO2lzb2xhdGlvbjphdXRvO21peC1ibGVuZC1tb2RlOm5vcm1hbDtzb2xpZC1jb2xvcjojMDAwO2ZpbGw6I2ZmODUwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6LjI2NDU4MztzdHJva2Utb3BhY2l0eToxO2NvbG9yLXJlbmRlcmluZzphdXRvO2ltYWdlLXJlbmRlcmluZzphdXRvO3NoYXBlLXJlbmRlcmluZzphdXRvIiAKICAgICAgICAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTUwIC02NikiIC8+Cjwvc3ZnPgo=");
  width: 25px;
  height: 25px;
  background-repeat: no-repeat;
}
.iconCourseMedalWhite {
  position: relative;
  top: -2px;
  background-position: 0px 0px;
  background-image: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiB2aWV3Qm94PSIwIDAgMTAyLjIgMTIxLjUiPgogIDxwYXRoIGQ9Ik02NSA5MGg3MmMyIDAgMyAyIDMgNHY5MGMwIDItMSAzLTMgM0g2NWMtOCAwLTE1LTctMTUtMTVWODFhMTUgMTUgMCAwIDEgMTUtMTVoODRjMSAwIDMgMSAzIDN2MTA1YTMgMyAwIDAgMS02IDBWNzJINjVjLTUgMC05IDQtOSA5djFjMCA0IDQgOCA5IDh6IiBzdHlsZT0ic3Ryb2tlLXdpZHRoOi4yNjQ1ODMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01MCAtNjYpIi8+CiAgPHBhdGggZD0iTTk3IDEwMGEyOCAyOCAwIDAgMC0yOCAyOCAyOCAyOCAwIDAgMCA5IDIxbC0xMCAyMyAxIDEgMTAtNGgybDQgMTFoMWwxMS0yNCAxMCAyNGgxbDQtMTFoMmwxMSA0IDEtMS0xMS0yM2EyOCAyOCAwIDAgMCAxMC0yMSAyOCAyOCAwIDAgMC0yOC0yOHoiIHN0eWxlPSJjb2xvcjojMDAwO2lzb2xhdGlvbjphdXRvO21peC1ibGVuZC1tb2RlOm5vcm1hbDtzb2xpZC1jb2xvcjojMDAwO2ZpbGw6I2ZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6LjI2NDU4MztzdHJva2Utb3BhY2l0eToxO2NvbG9yLXJlbmRlcmluZzphdXRvO2ltYWdlLXJlbmRlcmluZzphdXRvO3NoYXBlLXJlbmRlcmluZzphdXRvIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTAgLTY2KSIvPgo8L3N2Zz4K");
  width: 25px;
  height: 25px;
  background-repeat: no-repeat;
}
.iconCourseMedalGray {
  position: relative;
  top: -2px;
  background-position: 0px 0px;
  background-image: url('data:image/svg+xml,<svg width="100%" viewBox="0 0 102.2 121.5" version="1.1" id="svg13" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <path d="M65 90h72c2 0 3 2 3 4v90c0 2-1 3-3 3H65c-8 0-15-7-15-15V81a15 15 0 0 1 15-15h84c1 0 3 1 3 3v105a3 3 0 0 1-6 0V72H65c-5 0-9 4-9 9v1c0 4 4 8 9 8z" style="stroke-width:.264583" transform="translate(-50 -66)"/> <path d="M97 100a28 28 0 0 0-28 28 28 28 0 0 0 9 21l-10 23 1 1 10-4h2l4 11h1l11-24 10 24h1l4-11h2l11 4 1-1-11-23a28 28 0 0 0 10-21 28 28 0 0 0-28-28z" style="fill:%23ffffff;fill-opacity:0.7;" transform="translate(-50 -66)" /></svg>');
  width: 25px;
  height: 25px;
  background-repeat: no-repeat;
}
.btnRond {
  color: #EEE;
  background-color: #FF8500;
  padding: 6px 20px 7px 20px;
  margin: 5px 6px 5px 6px;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  font-weight: 500;
  font-size: 15px;
  border: none;
  border-radius: 30px;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  cursor: pointer;
  font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
  .btnRond:hover {
    color: #1E2447;
  }
}
.btnRond[disabled] {
  color: #ddd;
  cursor: not-allowed !important;
}
.btnStreepje {
  color: #1E2447;
  background-color: #FDD282 !important;
  font-weight: 500;
  font-size: 1em;
  border: none !important;
  border-bottom: 4px solid #FF8500 !important;
  border-right: 4px solid #FF8500 !important;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  padding: 0.15em;
  border-radius: 8px;
}
.btnStreepje:hover {
  border-bottom: 4px solid #1E2447 !important;
  border-right: 4px solid #1E2447 !important;
  color: #1E2447;
}
#bntCurveBackground {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 118.5 118.5"> <g transform="translate(-44 -84)"> <path d="m139 113-22 30-31-19-21 44" style="fill:none;stroke:%23fff;stroke-width:8;" /> <circle cx="66.1" cy="169.1" r="10" style="fill:%23fff;" /> <circle cx="136.7" cy="115.4" r="10" style="fill:%23fff;" /> <circle cx="87.2" cy="125.9" r="10" style="fill:%23fff;" /> <circle cx="117.4" cy="141.1" r="10" style="fill:%23fff;" /> </g></svg>');
  background-repeat: no-repeat;
  background-position: 1px 1px;
  height: 28px;
  width: 30px;
  top: 3px;
  left: 0px;
  z-index: 10;
}
/* START voor in jQ Dialog*****************************************************/
.btnForceLeft {
  float: left !important;
}
.btnForceRight {
  float: right !important;
}
button.btnStreepje[disabled],
button.btnStreepje:disabled {
  border-bottom: 4px solid gray !important;
  border-right: 4px solid gray !important;
  cursor: not-allowed !important;
}
.btnRood {
  background-color: #f1680c !important;
}
.btnGroen {
  background-color: #009304 !important;
}
.btnPaddingGroter5151 {
  padding: 0.5em 1em 0.5em 1em;
}
.btnPaddingGroter1111 {
  padding: 0.5em 1em 0.5em 1em;
}
/* EINDE voor in jQ Dialog*****************************************************/
#btnShopTerug {
  font-weight: 800;
}
#btnShopVolgende {
  font-weight: 800;
}
#timerHolder {
  color: #1E2447;
  font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
  display: none;
  text-align: center;
  font-weight: 800;
  font-size: 16px;
  position: relative;
  padding: 5px 20px 3px 20px;
}
.loginAtForm {
  background-color: #EEE;
  padding-right: 20px;
}
.titleCourse {
  font-family: 'Trebuchet MS';
  font-size: 1.4em;
  line-height: 1.2em;
  color: #1E2447;
  border-bottom: 2px solid #1E2447;
  margin-bottom: 10px;
}
/* dit is een experiment om plaatjes achter de titel te kunnen leggen. */
.SubCourseModules {
  margin-bottom: 5px;
}
#userDashboard .ModuleRow {
  display: table;
  width: 100%;
  font-size: 16px;
  padding-bottom: 4px;
  cursor: pointer;
}
#userDashboard .HelpRow {
  padding-top: 10px;
}
#userDashboard .module {
  display: table-cell;
  overflow: hidden;
}
/* dit is het driehoekje op de HP voor elke rij van een module */
#userDashboard .ModuleRow .moduleDriehoek {
  color: #FDD282;
  display: table-cell;
  width: 16px;
  vertical-align: top;
  -webkit-transition: color 0.5s;
  -ms-transition: color 0.5s;
  -moz-transition: color 0.5s;
  -o-transition: color 0.5s;
  transition: color 0.5s;
  padding-top: 3px;
}
#userDashboard .HelpRow .moduleDriehoek {
  top: 0px;
  left: -1px;
}
#userDashboard .ModuleRow:hover .moduleDriehoek {
  color: #1E2447;
}
#userDashboard .ModuleRow.ExamDontOpen {
  color: #888;
  cursor: not-allowed;
}
#userDashboard .HelpRow .moduleDriehoek {
  color: #1E2447;
}
#userDashboard .HelpRow:hover .moduleDriehoek {
  color: #FDD282;
}
#userDashboard .modulesSterren {
  color: #FF8500;
  display: table-cell;
  text-align: right;
  font-size: 22px;
  vertical-align: top;
  max-height: 19px !important;
  line-height: 1px !important;
  -webkit-transition: color 0.5s;
  -ms-transition: color 0.5s;
  -moz-transition: color 0.5s;
  -o-transition: color 0.5s;
  transition: color 0.5s;
  white-space: nowrap;
}
/* de twee volgende regels staan er om de gevulde sterren wat
 * in elkaar te drukken en de open juist de volle breedte te geven
 */
#userDashboard .modulesSterren div {
  width: 7px;
  color: #FF8500;
}
#userDashboard .modulesSterren div:nth-last-child(2) {
  width: 7px;
}
#userDashboard .modulesSterren div:nth-last-child(1) {
  width: 35px;
}
#userDashboard .modulesSterren div.icon-medal-full {
  width: 14px;
}
#userDashboard .modulesSterren div.icon-medal-full:nth-licon-medal-emptyast-child(2) {
  width: 14px;
}
#userDashboard .modulesSterren div.icon-medal-full:nth-last-child(1) {
  width: 22px;
}
#userDashboard .modulesSterren div.icon-medal-empty {
  width: 14px;
}
#userDashboard .modulesSterren div.icon-medal-empty:nth-last-child(2) {
  width: 14px;
}
#userDashboard .modulesSterren div.icon-medal-empty:nth-last-child(1) {
  width: 22px;
}
#userDashboard .ModuleRow:hover .modulesSterren {
  color: #1E2447;
}
#userDashboard .modulesSterren {
  color: gray;
}
/* 20200104 toegevoegd om cijfer op HP wat netter te zetten*/
#userDashboard .examGrade {
  font-weight: 450;
  color: #FF8500;
  display: table-cell;
  text-align: right;
  font-size: 17px;
  vertical-align: top;
}
#buttonsHeader {
  margin-top: 0.5em;
  margin-right: 1em;
  width: 90%;
  position: absolute;
  top: 0px;
  right: 0px;
}
#buttonsHeader button,
#buttonsHeader div {
  float: right;
}
/* 
 * START ronde knopje HP 
 * dit zijn de buttons helemaal bovenin, met de icons er op
 */
.rondKnupke {
  width: 34px;
  height: 34px;
  border-radius: 18px;
  -moz-border-radius: 18px;
  -webkit-border-radius: 18px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  float: left;
  margin: 5px 6px 5px 6px;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  cursor: pointer;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  font-size: 19px;
}
.rondKnupke.oranje {
  background-color: #FF8500;
}
@media (hover: hover) and (pointer: fine) {
  .rondKnupke.oranje:hover {
    background-color: #1E2447;
  }
}
.rondKnupke .glyphicon {
  top: -1px;
  left: 1px;
}
.rondKnupke.courier {
  font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
  font-weight: 600;
  font-size: 30px;
}
/* EINDE ronde knopje HP */
.rotate-180 {
  transform: rotate(180deg);
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
.rotate-0 {
  transform: rotate(0deg);
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
/******************************************************************************
  cursus inhoud scherm
 ******************************************************************************/
#courseComplete {
  display: flex;
  height: 100%;
  background-color: #fbfbfb;
  z-index: 10;
  overflow: hidden;
}
#courseContent {
  flex-grow: 1;
  padding: 0px 0px 60px 15px;
  top: 58px;
  min-height: 100%;
  overflow-y: auto;
  margin-bottom: 200px;
  width: 100%;
  position: relative;
}
#contentVraag {
  margin: 0px;
  padding-top: 10px;
  margin-top: -10px;
  height: 100%;
}
#contentTheorieBody {
  padding: 10px 10px 150px 10px ;
}
#contentFBT {
  padding: 20px;
  margin-bottom: 50px;
}
#headerContentDeel {
  padding-top: 15px;
  width: 1000px;
  height: 56px;
  border-bottom: #ececec 2px solid;
  position: absolute;
  z-index: 60;
  top: 101px;
  left: 345px;
}
#contentTheorieTitle {
  font-size: 24px;
  color: #1E2447;
}
.vraagHeaderText {
  float: left;
  font-size: 24px;
  color: #1E2447;
}
#deVraag {
  position: relative;
  padding-bottom: 200px;
}
.divBlocked {
  cursor: not-allowed;
}
/* ************************************************************************** */
#vraag {
  padding: 10px 10px 10px 10px;
  display: flow-root;
}
#messages,
.messages {
  display: none;
  width: 100%;
  border: 2px #FF8500 solid;
  padding: 1em;
}
.accounts-dialog {
  border: 2px solid #006EB3;
  border-radius: 0px;
  text-align: center;
}
.accounts-dialog .login-button {
  background-color: #006EB3;
  border: 1px solid #006EB3;
  border-radius: 0px;
  font-weight: bold;
}
/* stomme default van BT overriden */
select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
  line-height: 23px;
  /*    padding: 4px 3px 3px 3px; */
}
input[readonly="readonly"],
textarea[readonly="readonly"],
textarea[disabled="disabled"],
select:disabled {
  background-color: #ebebeb !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: not-allowed;
  border: 2px solid #cacedd !important;
}
#spreadsheet input[readonly] {
  background-color: #FFF !important;
  border: none !important;
  cursor: default;
}
.glyphicon {
  cursor: inherit;
}
h3.ui-accordion-header {
  line-height: 1em;
  /* achterlijk bootstrap maakt er 40px van... */
}
.ui-widget-header {
  background-color: white;
}
.ui-tabs-nav {
  border: none;
  outline: none;
}
.ui-state-focus {
  border: none;
}
.ui-tabs.ui-widget-content {
  border: none !important;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
  z-index: 99;
  top: 2px;
}
.koopCursusTable {
  width: 100%;
  margin-top: 5px;
}
.koopCursusTable td {
  padding: 3px;
}
.koopCursusTable tr {
  border: solid #FDD282 1px;
}
#dialogShopA .ui-accordion .ui-accordion-content {
  padding: 0.7em 0.5em 0.5em 0.7em;
  border-top: 0;
  overflow: auto;
}
h3 {
  color: #1E2447;
  text-transform: none;
  font-weight: 400;
  padding: 24px 10px 10px 0px;
  margin: 0px 0px 15px 0px;
  border-bottom: 2px solid #ececec;
}
h4 {
  color: #1E2447;
  text-transform: none;
  font-weight: 400;
  padding-top: 13px;
  margin: 6px 0px 6px 0px;
  font-size: 18px;
}
.divRekenButtonShop {
  border: 2px solid #FFA500 !important;
  border-radius: 5px;
  padding: 1em;
  text-align: center;
}
/* 20190731 toegevoegd op verzoek van Henk */
h5 {
  color: #5CABB4;
  text-transform: none;
  font-weight: 400;
  padding-top: 13px;
  font-size: 16px;
}
#blockVraag {
  font-family: 'Architects Daughter';
  font-weight: 500;
  z-index: 50;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  left: 0px;
  padding: 10px 10px 10px 50px;
  z-index: 51;
  margin-top: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' height='30px' width='30px' viewBox='0 0 80 80'%3E%3Cellipse cx='40' cy='40' fill='none' rx='35' ry='35' style='stroke:%23d43a2f99;stroke-width:8;'/%3E%3Cpath fill='none' d='m14.55 65.932 48.99-48.99' style='stroke:%23d43a2f99;stroke-width:8;'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.3em 0.35em;
}
#blockVraag.fout {
  border: 3px #e38780 solid;
  animation: switch-animation 2s 3 linear;
}
@keyframes switch-animation {
  0% {
    border-color: #FFF;
  }
  100% {
    border-color: #FF8500;
  }
}
#blockVraag.goed {
  border: 3px #009304 solid;
}
/* type velden */
td.fin {
  text-align: right;
  font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
}
input.fin {
  text-align: right;
  font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
}
/* deze zorgt ervoor dat de textareas in een sub-array in de autoform de volle breedte kunnen beslaan. Om een of andere reden doet bootstrap dat anders niet */
.list-group-item.autoform-array-item > div {
  width: 100%;
}
#dialogQuestionTest {
  width: 800px;
  height: 500px;
  display: none;
}
/* close button weg op de modal voor de demo en zo;
 * dit is de officiele methode
 * die .no-close is een extra class die hiervoor zorgt
 */
.no-close .ui-dialog-titlebar-close {
  display: none;
}
/* 20200505 toegevoegd */
.iconHulp {
  float: left;
  padding-left: 10px;
  font-size: 1.5em;
  position: relative;
  top: -1px;
  left: -10px;
}
/* al die dialogs moeten standaard display none hebben */
.dialogDefault {
  display: none;
}
#buyCourse {
  height: 100%;
  overflow-y: auto;
}
/* **************************************************************************
    START dit is de dialog om pincode in te geven
    ************************************************************************* */
#dialogClaimSlot,
#dialogDelSlot {
  display: none;
  background-color: #FDD282;
  height: 100%;
  /* 20200824 */
}
.ui-dialog.nopadding > div.ui-dialog-content {
  padding: 0px;
}
/* streepjes vulling */
.eromheen {
  border: 5px solid #FDD282;
  height: 100%;
  /* 20200824 */
}
.fraaiForm {
  background-image: linear-gradient(136deg, #ffffff 35.71%, #FDD282 35.71%, #FDD282 50%, #ffffff 50%, #ffffff 85.71%, #FDD282 85.71%, #FDD282 100%);
  background-size: 10.08px 9.73px;
  padding: 25px;
  height: 100%;
  /* 20200824 */
}
.fraaiForm .header {
  width: 100%;
  height: 40px;
  color: #FDD282;
  font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
  font-weight: 800;
  font-size: 25px;
  background-color: #162133;
  text-align: center;
  line-height: 1.8em;
}
.fraaiForm .content {
  width: 100%;
  background-color: #FFF;
  padding: 30px;
  border: 2px solid #162133;
  overflow: hidden;
  height: 100%;
  /* 20200824 */
}
#inpDIVPIN {
  height: 1.4em;
  margin: auto;
  width: 4em;
  display: block;
  margin-right: auto;
  margin-left: auto;
  font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
  font-weight: 800;
  font-size: 40px;
  text-align: center;
}
/* EINDE dit is de dialog om pincode in te geven */
table.border2 td {
  border: 2px solid #A6CCE4;
  padding: 5px;
  vertical-align: top;
}
table.border2 td {
  border: 2px solid #A6CCE4;
  padding: 5px;
  vertical-align: top;
}
hr {
  border: 2px solid #FF8500;
}
/* zorgen dat je knopjes en zo niet kunt selecteren */
.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
}
/* 20190802 aangepast naar geel. */
hr {
  border: 2px solid #FF8500;
}
/******************************************************************************
  profielform
 ******************************************************************************/
#formProfile > table {
  margin: auto;
}
#formProfile > table td {
  padding: 5px;
  vertical-align: top;
}
.formWarning {
  margin: 10px 10px 10px 10px;
  background-color: #FCEAC7;
  color: #1E2447;
  padding: 10px;
  border: 2px #FF8500 solid;
  border-bottom: 10px #FF8500 solid;
}
#dialogRsystTerms {
  display: none;
}
#dialogProfile {
  display: none;
  overflow-x: hidden;
}
#dialogShop {
  display: none;
  overflow: hidden;
}
#dialogShopA,
#dialogShopB {
  width: 95%;
  height: 480px;
  position: absolute;
}
.shopAccordion {
  margin-top: 10px;
}
#dialogShopA .ui-widget-content {
  border: 2px solid #FF8500 !important;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
#dialogRsyst {
  display: none;
}
#dialogContact {
  display: none;
}
/* 20180724 toegevoegd om die tooltip wat op te tillen... staat wat mooier */
.ui-tooltip {
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.47);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.47);
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.47);
  background-color: rgba(253, 210, 130, 0.9);
  border: none;
  top: 20px;
  padding: 5px 15px 5px 15px;
  max-width: 1000px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  opacity: 1;
}
#resultSearchStudent th {
  background-color: #FDD282;
}
#resultSearchStudent td,
#resultSearchStudent th {
  padding: 5px 20px 5px 5px;
}
#resultSearchStudent tr:nth-child(2n+1) {
  background: #EEE;
}
#resultSearchStudent tr:hover {
  background: #DDD;
  cursor: pointer;
}
/** START kleurtjes voor de datepicker voor de Rsyst ***************************/
.ui-datepicker-calendar .ui-state-default,
.ui-datepicker-calendar .ui-state-highlight {
  background-color: #FDD282;
  color: black;
}
.ui-datepicker-unselectable {
  color: white;
}
.ui-datepicker-calendar .ui-state-active {
  border: 1px #1E2447 solid;
  background-color: #FF8500;
  color: white;
}
/** EINDE kleurtjes voor de datepicker voor de Rsyst ****************************/
#rsyst_datepicker {
  margin: 5px !important;
  color: #F00;
}
/* dit is het info-knopje voor in de shop */
.courseDescription {
  float: right;
  width: 24px;
  height: 24px;
  border-radius: 18px;
  -moz-border-radius: 18px;
  -webkit-border-radius: 18px;
  text-align: center;
  color: #1E2447;
  font-size: 19px;
  font-weight: 500;
  cursor: pointer;
  background-color: #FDD282;
  font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
  font-weight: 800;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  width: 100%;
}
.ui-dialog-buttonset .ui-button {
  float: right;
}
/*
licht oranje
background: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 10 10'><line x1='0' y1='8' x2='10' y2='2' style='stroke:rgb(253, 210, 130);stroke-width:1.5' /></svg>");
*/
.streepjeErdoor {
  background: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 10 10'><line x1='0' y1='8' x2='10' y2='2' style='stroke:rgb(255, 165, 0);stroke-width:1.5' /></svg>");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%, auto;
}
.embed-responsive.embed-responsive-1by1 {
  padding-bottom: 100%;
}
/* *****************************************************************************
 * Hier staat wat meuk om die select op het tentamen-reserverings-scherm
 * er wat christelijker uit te laten zien
 *
 */
#selectExam {
  width: 100%;
  padding: 5px;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.dropdown-menu > li > a {
  white-space: normal !important;
}
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
  width: 100%;
}
div.dropdown-menu.open {
  max-height: 300px !important;
  overflow: hidden;
}
ul.dropdown-menu.inner {
  max-height: 290px !important;
  overflow-y: auto;
}
.dropdown-menu .dropdown-item {
  white-space: normal !important;
}
/* EINDE Dropdown *********************************************************** */
/* deze is voor de notifications in de frontend */
#notificationsHeader {
  width: 800px;
  height: 88px;
  display: block;
  border: 1px solid black;
  position: absolute;
  left: 100px;
  top: 100px;
  border: 2px solid #FF8500;
  border-bottom: 8px solid #FF8500;
  padding: 10px;
  background-color: #fbfbfb;
  z-index: 10;
  overflow: auto;
}
/* deze wordt op een aantal plekken gebruikt om aan te geven dat we ergens op wachten
   https://css-tricks.com/single-element-loaders-the-spinner/
 */
.loadingspinner {
  width: 50%;
  /* the size */
  margin: 25%;
  padding: 25px;
  /* the border thickness min(10%, 20px)*/
  background: #FF8500;
  /* the color */
  aspect-ratio: 1;
  border-radius: 50%;
  --_m: conic-gradient(#0000, #000),
      linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
  mask: var(--_m);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  box-sizing: border-box;
  animation: loadingspinnerAnimation 1.5s linear infinite;
}
@keyframes loadingspinnerAnimation {
  to {
    transform: rotate(1turn);
  }
}
/* dit is wat handel om voor de popup van het reserveringssysteem */
.ZZZoohoog {
  z-index: 9999;
}
#selectExam {
  white-space: normal !important;
}
#txtNotebook {
  width: 100%;
  height: 410px;
  font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
}