@font-face {
    font-family: 'Gilroy-Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Bold ☞'), url('/fonts/Gilroy-Bold.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Gilroy-Heavy ☞';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Heavy ☞'), url('/fonts/Gilroy-Heavy.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Gilroy-Light ☞';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Light ☞'), url('/fonts/Gilroy-Light.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Gilroy-Medium ☞';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Medium ☞'), url('/fonts/Gilroy-Medium.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Gilroy-Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Regular'), url('/fonts/Gilroy-Regular.woff') format('woff');
    }


body {
    width:100%;
    height:100%;
    background-color:rgb(249, 249, 249);
    margin:0;
    font-size: 100%;
    font-family:Gilroy-Bold, helveticaneue, "helvetica neue", helvetica, arial, "lucida grande", sans-serif;
}

.container {
    float:left;
    width:100%;
    height:100vh;
    /*background-color:#269094;*/
}


.topmenuright{
    float:left;
    width:100%;
    height:40px;
    line-height:40px;
    /*border-bottom:1px solid black;*/
    box-shadow: 0 2px 0px 0 rgb(0 0 0 / 8%);
    color:white;
    background-color:#00ce80;
    box-sizing:border-box;
    padding-left:20px;
    margin-bottom:30px;
}

.left{
    float:left;
    width:25%;
    height:100vh;
    box-sizing:border-box;
    background-color: #333;
    
}

.right{
    float:left;
    width:75%;
    height:auto;
    /*min-height:100vh;*/
    box-sizing:border-box;
    /*background-color:#e3ca6f;*/
}


.menuitem{
    font-family:Gilroy-Bold, helveticaneue, "helvetica neue", helvetica, arial, "lucida grande", sans-serif;
    color:white;
    float:left;
    width:100%;
    font-size:1.2rem;
    box-sizing:border-box;
    padding-left:5%;
    height:3rem;
    line-height:3rem;
    cursor:pointer;
}

.menuitem:hover {
    background-color: #555;
}

.menuitemactive{
    font-family:Gilroy-Bold, helveticaneue, "helvetica neue", helvetica, arial, "lucida grande", sans-serif;
    color:white;
    float:left;
    width:100%;
    font-size:1.2rem;
    box-sizing:border-box;
    padding-left:5%;
    height:3rem;
    line-height:3rem;
    cursor:pointer;
    background-color:#00ce80;
}

.cursus_home{
     width:100vw;
    height:100vh;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
}

.cursus_title{
    position:absolute;
    font-size:3rem;
    top:60%;
    width:60%;
    left:10%;
    color:#fff;
}


.cursus_title h1{
    font-size:3rem;
    margin-top:0;
    margin-bottom:0;

}

.cursus_title h5{
    font-size:1.6rem;
     margin-top:1rem;
    margin-bottom:0;
}

.cursus_knop{
    background-color:rgb(0, 206, 128);
    height:3rem;
    line-height:3rem;
    font-size:1.2rem;
    padding-right:1rem;
    padding-left:1rem;
    border-radius:1.5rem;
    color:#fff;
    border:none;
    cursor:pointer;
    font-family:Gilroy-Bold, helveticaneue, "helvetica neue", helvetica, arial, "lucida grande", sans-serif;

}

.cursus_knop:hover {
    background-color:rgb(0, 179, 110);
}


.close{
    position:absolute;
    left:2rem;
    top:2rem;
     font-size:3rem;
     cursor:pointer;
     color:white;
}


.regel1{
    height:5vh;
    line-height:5vh;
    width:100%;

}


.regelblok{
    float:left;
     width:100%;
     box-sizing:border-box;
     padding-left:10%;

}
  select{
        border-radius:5px;
        padding:2px;
    }
.regel2{
    height:5vh;
    width:100%;
    padding-left:2rem;
    padding-right:2rem;
    box-sizing:border-box;
}


.rl{
    float:left;
    width:32%;
    text-align:left;
    padding-left:2rem;
    box-sizing:border-box;
}

.rm{
    float:left;
    width:60%;
    text-align:center;
    box-sizing:border-box;
}

.rr{
    float:left;
    width:8%;
    text-align:right;
    padding-right:1rem;
    box-sizing:border-box;
}

.r50{
    float:left;
    text-align:center;
    width:50%;
}

progress{
    width:100%;
    height:0.5rem;
   
}

/* background: */
progress::-webkit-progress-bar {background-color: #eee; width: 100%;}
progress {background-color: #eee;}

/* value: */
progress::-webkit-progress-value {background-color: rgb(0, 206, 128) !important;}
progress::-moz-progress-bar {background-color: rgb(0, 206, 128) !important;}
progress {color: rgb(0, 206, 128);}

progress {
    border: 0;
    border-radius: 0.25rem;
}
progress::-webkit-progress-bar {
    border: 0;
    border-radius:  0.25rem;
}
progress::-webkit-progress-value {
    border: 0;
    border-radius:  0.25rem;
}
progress::-moz-progress-bar {
    border: 0;
    border-radius: 0.25rem;
}




.regel3{
    font-family:Gilroy-Regular;
    margin-left:20%;
    width:60%;
    position:absolute;
    min-height:10vh;
    padding-left:2rem;
    padding-right:2rem;
    box-sizing:border-box;
}

.regel3 h1{
    font-family:Gilroy-Bold;
}

.regel3 .bold{
    font-family:Gilroy-Bold;
}


.antwoordregel{
    height:3rem;
    line-height:3rem;
    background-color:#fff;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.08);
    margin-bottom:0.75rem;
    cursor:pointer;
}


.blokactie{
    float:left;
      height:auto;
    line-height:3rem;
    min-height:300px;
    background-color:#fff;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.08);
    margin-bottom:0.75rem;
    cursor:pointer;
    width:90%;
    margin-left:5%;
    padding:10px;
    box-sizing:border-box;
    margin-top:20px;
    display:none;
}





.blokjeleeg{
    float:left;
    width:3rem;
    height:3rem;
    
    font-size:1.8rem;
    padding-left:1rem;
    color:#9b9b9b;
    box-sizing:border-box;
    cursor:pointer;
}


.blokjeleegklein{
    float:left;
    width:2rem;
    height:3rem;
    
    font-size:1.8rem;
    padding-left:1rem;
    color:#9b9b9b;
    box-sizing:border-box;
    cursor:pointer;
}

.antwoord{
    line-height:2.9rem;
    font-size:1.2rem;
}

.knoponder{
    text-align:right;
    margin-top:20px;
}


.knop_not{
    background-color:rgb(206, 206, 206);
    height:3rem;
    line-height:3rem;
    font-size:1.2rem;
    padding-right:1rem;
    padding-left:1rem;
    border-radius:1.5rem;
    color:#fff;
    border:none;
    cursor:pointer;
    font-family:Gilroy-Bold, helveticaneue, "helvetica neue", helvetica, arial, "lucida grande", sans-serif;
}

.knop{
    background-color:rgb(0, 206, 128);
    height:3rem;
    line-height:3rem;
    font-size:1.2rem;
    padding-right:1rem;
    padding-left:1rem;
    border-radius:1.5rem;
    color:#fff;
    border:none;
    cursor:pointer;
    font-family:Gilroy-Bold, helveticaneue, "helvetica neue", helvetica, arial, "lucida grande", sans-serif;
}

.green{
    color:rgb(0, 206, 128);
}

.red{
    color:#ff4f42;
}

.small{
    font-size:0.5rem;
}

.none{
    display:none !important ;
}


#popuptekst{
    position:absolute;
    display:none;
    background-color:rgba(0,0,0,0.8);
    border:0px solid black;
    border-radius:5px;
    padding:10px;
    width:40%;
    color:white;
}

.layer{
    width:100%;
    height:100%;
    top:0%;
    left:0%;
    position:fixed;
    z-index:19;
    background-color:rgba(0,0,0,0.4);
    display:none;
}

.popoptie{
    width:60%;
    height:auto;
    min-height:50%;
    position:fixed;
    box-sizing:border-box;
    padding:20px;
    left:20%;
    top:25%;
    background-color:white;
    display:none;
     z-index:65537;
     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5);

}


.popimg{
    width:60%;
    height:50%;
    position:fixed;
    box-sizing:border-box;
    padding:20px;
    left:20%;
    top:25%;
    background-color:white;
    display:none;
     z-index:65537;
     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5);

}


.right h1{
    float:left;
    width:100%;
    box-sizing:border-box;
    padding-left:12%;
    padding-top:3%;
    font-size:2.5rem;
 font-family:Gilroy-Bold, helveticaneue, "helvetica neue", helvetica, arial, "lucida grande", sans-serif;
}



.trainingregel{
    height:8rem;
    line-height:2rem;
    background-color:#fff;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.08);
    margin-bottom:0.75rem;
}

.afbeelding{
    float:left;
    margin-top:1rem;
    height:6rem;
    width:25%;
    margin-bottom:1rem;
    background-size:cover;
    cursor:pointer;
}

.regel4{
    float:left;
    font-family:Gilroy-Regular;
    margin-left:12%;
    width:76%;
    
    
   
    box-sizing:border-box;
}

.ttekst{
    float:left;
    margin-top:1rem;
    height:6rem;
    width:60%;
    margin-left:4rem;
    margin-bottom:1rem;
    
}

.trainingregel h2{
    float:left;
    width:90%;
    font-size:1.2rem;
    cursor:pointer;
}

.trainingregel h3{
    float:left;
    width:10%;
    font-size:1.2rem;
    text-align:right;
}

.textra{
    float:left;
    width:100%;
    display:none;
    box-sizing:border-box;
    padding:20px;
}


.left{
    float:left;
}

.right{
    float:right;
}

.statblok{
    float:left;
    margin-left:5%;
    margin-right:5%;
    color:white;
    height:36rem;
    width:40%;
    line-height:1.2rem;
    background-color:#fff;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.08);
    margin-bottom:0.75rem;
    
}

.platregel{
     float:left;
    margin-left:5%;
    margin-right:5%;
    color:black;
    height:2rem;
    width:90%;
    line-height:2rem;
    background-color:#fff;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.08);
    margin-bottom:0.75rem;
    box-sizing:border-box;
}

.asmall{
    color:white;
    font-size:1rem;
    float:right;
    margin-right:20px;
}

.h18{
    height:18rem;
    margin-bottom:40px;
    cursor:pointer;
}

.b100{
    height:15rem;
    float:left;
    width:90%;
    color:black;
    box-sizing:border-box;
    padding:20px;
    padding-left:10px;
    font-size:1.3rem;
}

.fnorm{
    font-size:1rem;
    font-weight:100;
    line-height:2rem;
}


.statblok p{
    color:#000;
    font-size:1.3rem;
    padding-left:10px;
    box-sizing:border-box;
    float:left;
    width:100%;
    height:1.3rem;
}


.selfilt{
    border:1px solid #00ce80;
    border-radius:5px;
    color:#00ce80;
    display:inline-block;
    padding-left:5px;
    padding-right:5px;
    margin-right:10px;
    height:1.4rem;
    line-height:1.4rem;
}

.selfilt:after{
    content:"  x"
}

.selfiltp{
     border:1px solid #00ce80;
    border-radius:5px;
    color:#00ce80;
    display:inline-block;
    padding-left:5px;
    padding-right:5px;
    height:1.4rem;
    line-height:1.4rem;
}


.gcont{
    float:left;
    width:100%;
    height:12rem;
    text-align:center;
    transform: scale(1.5);
}

.cri{
    text-align:right;
    
     color:#000;
    font-size:1.8rem;
    padding-right:10px;
    box-sizing:border-box;
    float:right;
    width:100%;
    height:1.3rem;
}

.cri div{
    margin-top:10px;
     font-size:1rem;
}

.lijn{
    background-color:#eee;
    width:90%;
    height:1px;
    float:left;
    margin-top:3.6rem;
    box-sizing:border-box;
    margin-left:5%;
    margin-right:5%;
}

.detf{
    float:left;
    width:100%;
    line-height:1.8rem;
    padding-top:20px;
    padding-left:10px;
    padding-right:10px;
    box-sizing:border-box;
}

.detfin1{
    float:left;
    width:1.2rem;
    height:1.2rem;
    background-color:black;
    border-radius:0.6rem;
    margin-top:4px;
}

.detfin2{
    float:left;
    width:50%;
    color:black;
    margin-left:10px;
}

.detfin3{
    float:right;
    color:black;
}

.agreen{
    background-color:#00ce80;
}

.agray{
    background-color:#787878;
}


.gray{
    color:#d9d9d9;
}

.ared{
    background-color:#ff4040;
}


.knopd{
background-color:#00ce80;
border-radius:1rem;
height:2rem;
line-height:2rem;
padding-left:10px;
padding-right:10px;
color:white;
float:left;
margin-top:40px;
margin-left:5%;
    margin-right:5%;
    width:90%;
    box-sizing:border-box;
    text-align:center;
}




.statblok .t{
    color:black;
    text-align:center;
    font-size:0.9rem;
    border:1px solid black;
    border-radius:10px;
    width:10%;
    float:right;
    margin-top:30px;
    margin-right:10px;

}

.statblok .c{
     float:left;
    color:black;
    text-align:center;
    font-size:9rem;
    width:100%;
    margin-top:30px;
}

.statblok .b{
     float:left;
    color:black;
    text-align:center;
    font-size:1.2rem;
    width:100%;
    margin-top:20px;
}

.cell{
    float:left;
    width:60%
}

.kl{
    margin-top:30px;
    float:left;
    width:100%;
    font-size:1.1rem;
    height:auto;
    /*height:2.2rem;*/
    line-height:2.2rem;
}


.kr{
    margin-top:10px;
    float:right;
    width:100%; 
    /*height:2.2rem;*/
    height:auto;
    line-height:2.2rem;

}


.popoptie .kl{
      margin-top:5px;
}

.popoptie .kr{
      margin-top:0px;
}

.hh{
min-height:16.5rem;
}

.tre{
    float:left;
    width:100%;
    margin-bottom:10px;
}





.kr input{
    width:100%;
    height:1.5rem;
    line-height:1.5rem;
}

.kr textarea{
    width:100%;
    height:6.5rem;
    line-height:1.5rem;
}

.kr select{
    width:100%;
    height:1.5rem;
    line-height:1.5rem;
}

.trv{
    width:40% !important;
    height:25px !important;
    line-height:25px !important;
}

.rrv{
    margin-bottom:20px;
}


.persinlijst{
    float:left;
    border:1px solid black;
    border-radius:5px;
    width:100%;
    box-sizing:border-box;
    padding-top:5px;
    font-size:11px;
    height:300px;
    overflow-y:scroll;
}

.naaminlijst{
    cursor:pointer;
    padding-left:5px;
    padding-right:5px;
    box-sizing:border-box;
}

.naaminlijst:hover{
    background-color:#eee;
   
}

.tb{
    border-radius:5px;
    margin-bottom:10px;
    border:1px solid black;
}

.fa-caret-right{
    margin-left:20px;
}

.fa-caret-left{
    margin-right:20px;
}


.regel{
    width:100%;
    height:auto;
    float:left;
}

.p5{width:5%;}
.p10{width:10%;}
.p15{width:15%;}
.p20{width:20%;}
.p25{width:25%;}
.p30{width:30%;}
.p35{width:35%;}
.p40{width:40%;}
.p45{width:45%;}
.p50{width:50%;}
.p55{width:55%;}
.p60{width:60%;}
.p65{width:65%;}
.p70{width:70%;}
.p75{width:75%;}
.p80{width:80%;}
.p85{width:85%;}
.p90{width:90%;}
.p95{width:95%;}
.p100{width:100%;}

.flag{
    float:left;
    width:30px;
    margin:5px;
    cursor:pointer;
    /*border:1px solid black;*/

}


.tree1{
    float:left;
    font-size:0.9rem;
    padding-left:10px;
    height:25px;
    line-height:25px;
    width:100%;
    box-sizing:border-box;
    font-weight:normal;
    color:#5d5d5d;
}

.tree2{
    float:left;
    font-size:0.9rem;
    padding-left:30px;
    height:25px;
    line-height:25px;
    width:100%;
    box-sizing:border-box;
    color:#5d5d5d;
}

.tree3{
    float:left;
    font-size:0.9rem;
    padding-left:50px;
    height:25px;
    line-height:25px;
    width:100%;
    box-sizing:border-box;
    color:#5d5d5d;
}

.tree3 label{
    display:inline;
    float:left;
}

.tree3 input{
             width:15px;
    
}


.selblock{
    float:left;
    margin:5px;
    box-sizing:border-box;
    height:25px;
    line-height:25px;
    padding-left:10px;
    padding-right:5px;
    border:1px solid black;
    border-radius:10px;
    font-size:12px;
}