/* frontend ***************************************************************** */

html{
    height: 100%;
    overflow: hidden;                                                           /* 20210319 dit blijkt de regel te zijn die dat witte vlak onderaan de content weg haalt... */
}

body{
    overscroll-behavior: none;                                                  /* dit voorkomt in chrome mobile dat hij gaat refreshen bij scrollen */
    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: var(--zilverBackground);
    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: var(--oranjeDonker);
}

#header{
    width: 100%;
    top:0px;
    padding: 10px 0px 0px 0px;
    height: 100px;
    padding-right: 12px;
    z-index: 60;
    position: relative;
    background-color: var(--MFBlauwMiddel);
}

.messagesD{
    width: 800px;
    height: 88px;
    display: block;
    border: 1px solid black;
    position: absolute;
    left: 100px;
    top: 100px;
    border: 2px solid var(--oranjeDonker);
    border-bottom: 8px solid var(--oranjeDonker);
    padding:10px;
    background-color: var(--zilverBackground);
    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: var(--MFBlauwMiddel);
    display: inline-block;
    padding: 25px;
}

#headsUp{
    border: 4px solid var(--oranjeDonker);

    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

    padding:1em;

    background-color: white;
    color: var(--menuAchtergrond);

    height: var(--courseHeight);

    -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: var(--courseHeight);
    padding: 0px;
    margin-bottom: 1em;
    border: 2px solid var(--menuAchtergrond);
    display: flex;
    flex-direction: column;

    border-radius: 5px;
    position: relative;                                                         /* 20210601 om te zorgen dat de ventuele divAbboExpired de volle breedte weet */
    overflow: scroll;

    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.3);
    background-repeat: no-repeat;
}

#userDashboard #divTekst{
    border: 4px solid var(--MFBlauwMiddel);
}

#userDashboard #divReclame{
    border: 4px solid var(--MFBlauwMiddel);
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

#userDashboard .CourseWrapper.homepageHelp{
    border: 4px solid var(--MFBlauwMiddel);
}

#userDashboard .Course{
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px;
    margin: 10px 0px 0px 10px;                                                  /* 20240205 right naar 0 gezet */
    flex-grow: 1;
}

#userDashboard .mCourse{
    margin: .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;                                                         /* zorg dfat alle courses zichtbaar zijn */
}

#divAccordionRekenen{
    margin-bottom: 2em;;
}

.divRekenenWrapper{
    overflow-x: auto;
    padding: 0px;

    border: 4px solid var(--MFBlauwMiddel);
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

    border-top-left-radius: 0px;                                                /* zodat je bij de tab geen wit stukje overhoudt */

    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 var(--menuAchtergrond);
    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: rgb(255, 243, 117);                                           /* we hebben die kleur geel nog niet in het systeem  */

    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 var(--menuAchtergrond);
}
 /* EINDE IC515 */

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

/* icon op de HP voor de cursus-titel uit */
.iconCourse{
    position: relative;
    float: left;
    top: 5px !important;
    cursor: pointer;
    font-size: 22px;
    padding-right: 7px;
}

.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: var(--oranjeDonker);
    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;
}

/* (niet op mobiel) kleur veranderen wanneer je boven een rond knopje hangt */
@media (hover: hover) and (pointer: fine) {
    .btnRond:hover{
        color: var(--menuAchtergrond);
    }
}

.btnRond[disabled]{
    color: #ddd;
    cursor: not-allowed !important;
}

.btnStreepje{
    color: var(--menuAchtergrond);
    background-color: var(--oranjeLicht) !important;
    font-weight: 500;
    font-size: 1em;
    border: none !important;
    border-bottom: 4px solid var(--oranjeDonker) !important;
    border-right: 4px solid var(--oranjeDonker) !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 var(--menuAchtergrond) !important;
    border-right: 4px solid var(--menuAchtergrond) !important;
    color: var(--menuAchtergrond);
}

#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*****************************************************/

.objForceLeft{
    float: left !important;
}

.objForceRight{
    float: right !important;
}

.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: .5em 1em .5em 1em;
}

.btnPaddingGroter1111{
    padding: .5em 1em .5em 1em;
}

.btnHeavy{
    font-weight: 800;
}

/* EINDE voor in jQ Dialog*****************************************************/

/* 202512 deze is voor de gemiste abo-betalingen in de frontend */
.btnAboLosseBetaling{
    margin:0px;
    padding: 1em; 
}

#timerHolder{
    color: var(--menuAchtergrond);
    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: var(--menuAchtergrond);
    border-bottom: 2px solid var(--menuAchtergrond);
    margin-bottom: 10px;
}

.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: var(--oranjeLicht);
  display: table-cell;
  width: 16px;
  vertical-align: top;
  -webkit-transition: color .5s;
  -ms-transition:     color .5s;
  -moz-transition:    color .5s;
  -o-transition:      color .5s;
  transition:         color .5s;
  padding-top: 3px;
}

#userDashboard .HelpRow .moduleDriehoek{
  top: 0px;
  left: -1px;
}

#userDashboard .ModuleRow:hover .moduleDriehoek{
    color: var(--menuAchtergrond);
}

#userDashboard .ModuleRow.ExamDontOpen{
    color: #888;
    cursor: not-allowed;
}

#userDashboard .HelpRow .moduleDriehoek{
    color: var(--menuAchtergrond);
}

#userDashboard .HelpRow:hover .moduleDriehoek{
    color: var(--oranjeLicht);
}

#userDashboard .modulesSterren{
  color: var(--oranjeDonker);
  display: table-cell;
  text-align: right;
  font-size: 22px;
  vertical-align: top;
  max-height: 19px !important;
  line-height: 1px !important;
  -webkit-transition: color .5s;
  -ms-transition:     color .5s;
  -moz-transition:    color .5s;
  -o-transition:      color .5s;
  transition:         color .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: var(--oranjeDonker);
}
#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: var(--menuAchtergrond);
}

#userDashboard .modulesSterren{
    color: gray;
}

/* 20200104 toegevoegd om cijfer op HP wat netter te zetten*/
#userDashboard .examGrade {
    font-weight: 450;
    color: var(--oranjeDonker);
    display: table-cell;
    text-align: right;
    font-size: 17px;
    vertical-align: top;
}

#buttonsHeader{
    margin-top: .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: var(--oranjeDonker);
}

@media (hover: hover) and (pointer: fine) {
    .rondKnupke.oranje:hover{
        background-color: var(--menuAchtergrond);
    }
}

.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;                                                          /* anders hou ik een lijntje achter de vraagHeader... */
    height:100%;                                                                /* 20241221 oplossen scrollprobleem */
}

#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: var(--menuAchtergrond);
}

.vraagHeaderText{
    float: left;
    font-size:24px;
    color: var(--menuAchtergrond);
}

#deVraag{
    position: relative;
    padding-bottom: 200px;                                                      /* 20241221 oplossen scrollprobleem van margin naar padding omgezet */
}

.divBlocked{
    cursor: not-allowed;
}


/* ************************************************************************** */

#vraag{
    padding: 10px 10px 10px 10px;
    display: flow-root;                                                         /* 20241108 scrollprobleem bij BH vragen die hoger worden */
}

#messages, .messages{
    display: none;
    width: 100%;
    border: 2px var(--oranjeDonker) solid;
    padding:1em;
}

.accounts-dialog {
    border: 2px solid var(--blauwDonker);
    border-radius: 0px;
    text-align: center;
}

.accounts-dialog .login-button {
    background-color: var(--blauwDonker);
    border: 1px solid var(--blauwDonker);
    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;
}

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 var(--oranjeLicht) 1px;
}


#dialogShopA .ui-accordion .ui-accordion-content {
    padding: .7em .5em .5em .7em;
    border-top: 0;
    overflow: auto;
}

h3{
    color: var(--menuAchtergrond);
    text-transform: none;
    font-weight: 400;
    padding: 24px 10px 10px 0px;
    margin: 0px 0px 15px 0px;
    border-bottom: 2px solid #ececec;
}


h4{
    color: var(--menuAchtergrond);
    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: var(--demin);
    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: var(--oranjeDonker);
    }
}


#blockVraag.goed{
    border: 3px var(--questionGoed) 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: var(--oranjeLicht);
    height: 100%; /* 20200824 */
}

.ui-dialog.nopadding > div.ui-dialog-content{
    padding: 0px;
}

/* streepjes vulling */
.eromheen{
  border: 5px solid var(--oranjeLicht);
  height: 100%; /* 20200824 */
}

.fraaiForm{
    background-image: linear-gradient(136deg, #ffffff 35.71%, var(--oranjeLicht) 35.71%, var(--oranjeLicht) 50%, #ffffff 50%, #ffffff 85.71%, var(--oranjeLicht) 85.71%, var(--oranjeLicht) 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 var(--oranjeDonker);
}

/* 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 var(--oranjeDonker);
}

/******************************************************************************
  profielform
 ******************************************************************************/
#formProfile > table{
    margin: auto;
}

#formProfile > table td{
    padding: 5px;
    vertical-align: top;
}

.formWarning{
    margin: 10px 10px 10px 10px;
    background-color: var(--oranjeHeelLicht);
    color: var(--menuAchtergrond);
    padding: 10px;
    border: 2px var(--oranjeDonker) solid;
    border-bottom: 10px var(--oranjeDonker) 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 var(--oranjeDonker) !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: var(--oranjeLicht);
}
#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: var(--oranjeLicht);
    color: black;
}

.ui-datepicker-unselectable{
    color: white;
}

.ui-datepicker-calendar .ui-state-active{
    border: 1px var(--menuAchtergrond) solid;
    background-color: var(--oranjeDonker);
    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: var(--menuAchtergrond);
    font-size: 19px;
    font-weight: 500;
    cursor: pointer;
    background-color: var(--oranjeLicht);
    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;
}


/* gebruikt voor het doorstrepen van prijzen */
.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 var(--oranjeDonker);
    border-bottom: 8px solid var(--oranjeDonker);
    padding:10px;
    background-color: var(--zilverBackground);
    z-index: 10;
    overflow: auto;
}

/* 
 * deze wordt op een aantal plekken gebruikt om aan te geven dat we ergens op wachten
 */

.loadingspinner {
    width: 50%;               /* the size */
    margin: 25%;
    padding: 25px;  /* the border thickness min(10%, 20px)*/
    background: var(--oranjeDonker);      /* 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;
}