/*.ajax__html_editor_extender_backcolorclass {
    width: 23px !important;
    height: 21px !important;
    background-color: #e4e4e4 !important;
}
.ajax__html_editor_extender_button {
   
 
    background-color: #e4e4e4 !important;
}
.ajax__html_editor_extender_forecolorclass {
    width: 23px !important;
    height: 21px !important;
    background-color: #e4e4e4 !important;
}*/

/* Center the pagination buttons */

div.dt-scroll {
    height: 80% !important;
    /*min-height: 80% !important;
    max-height: 80% !important;*/
}

div.dt-scroll-body {

    overflow-x:hidden !important;
}

#PanelLLGRID div.dt-container .dt-search input {
    border: 2px solid rgba(31, 31, 35, 0.3) !important;
    border-radius: 3px !important;
    padding: 5px !important;
    background-color: #cfb9e5 !important;
    color: #000 !important;
    width: 90%;
    max-width: 300px;
    margin-top: 10px !important;
    margin-left: 5% !important;
    margin-right: 5% !important;
    margin-bottom: 20px !important;
}

div.dt-container .dt-search input {
    border: 2px solid rgba(31, 31, 35, 0.3) !important;
    border-radius: 3px !important;
    padding: 5px !important;
    /*background-color: #cfb9e5 !important;*/
    color: #000 !important;
    width: 90%;
    /*max-width: 300px;*/
    margin-top: 10px !important;
    margin-left: 5% !important;
    margin-right: 5% !important;
    margin-bottom: 20px !important;
}
#PanelGebruiker div.dt-container .dt-search input {
    background-color: #fff !important;
}

    .paging_full_numbers {
    list-style-type: none; /* Remove default list bullets */
    padding: 5px 5px 0px 5px; /* Remove padding */
    margin: 0; /* Remove margin */
    display: flex; /* Align items in a row */
    justify-content: center; /* Center the pagination controls */
}
div.dt-paging.paging_simple ul.pagination {
    list-style-type: none; /* Remove default list bullets */
    padding: 5px 5px 0px 5px; /* Remove padding */
    margin: 0; /* Remove margin */
    display: flex; /* Align items in a row */
    justify-content: center; /* Center the pagination controls */
}

button.page-link.first,
button.page-link.last {
    border: none !important; /* Remove the border */
    background: none !important; /* Ensure no background styling */
    padding: 0 !important; /* Reset padding if needed */
    margin: 0 !important; /* Reset margin if needed */
    box-shadow: none !important; /* Remove any box shadow */
}

button.page-link.previous,
button.page-link.next {
    border: none !important; /* Remove the border */
    background: none !important; /* Ensure no background styling */
    padding: 0 !important; /* Reset padding if needed */
    margin: 0 !important; /* Reset margin if needed */
    box-shadow: none !important; /* Remove any box shadow */
}

div.dt-container .dt-paging .dt-paging-button {
    all: unset !important; /* Removes all styles applied to the buttons */
}
.pagination-container {
    text-align: center;
    margin-top: 10px;
}

/* Style the "Previous" button */
.custom-prev,
button.page-link {
    border: 4px solid rgba(31, 31, 35, 0.3);
    display: inline-block;
    padding: 10px 10px;
    background-color: #B388DD; /* Button color */
    color: white; /* Text color */
    border-radius: 5px; /* Rounded corners */
    margin-right: 1px;
    cursor: pointer;
    font-weight: 700;
    text-decoration: none;
}

/* Style the "Next" button */
.custom-next {
    border: 4px solid rgba(31, 31, 35, 0.3);
    display: inline-block;
    padding: 10px 10px;
    background-color: #B388DD; /* Button color */
    color: white; /* Text color */
    border-radius: 5px; /* Rounded corners */
    margin-left: 1px;
    font-weight:700;
    cursor: pointer;
    text-decoration: none;
}

    /* Add hover effects for buttons */
    .custom-prev:hover,
    .custom-next:hover {
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        background-color: #8f49d3; /* Darker shade on hover */
        color: white;
    }

.ajax__html_editor_extender_container {
margin:auto;
}
.ajax__html_editor_extender_texteditor {
height:auto !important;

}

:root {
    --main: #33a4b4;
    --mainhover: #09788b;
    --hover-color: #09788b;
    --text-color: #fff;
    --main-color: #33a4b4;
    --del-color: #e43030;
    --niet-color: #5736de;
    --purple: #7c6ecf;
    --purplehover: #6256a9;
    --blue: #0099FF;
    --bluehover: #0075c3;
    --pinkred: #CC6699;
    --pinkredhover: #b53073;
    --grayborder: #d9d9d9;
    --grayback: #eaeaea;
    --grayfore: #393939;
    --white: #fff;
    --red: rgb(255,80,80);
}

.WelcomeBox {
    /*float: left;*/
    /*margin-top:10%;*/
    position: relative;
    max-width: 80%;
    text-align: center;
    height: 500px;
    /*left: 20%;*/
    /*margin-right: 50%;*/
    /*height: 80%;
    top: 55%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);*/
    /*top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);*/
}

.mascot {
    position: relative;
    float: left;
    margin-right:100px;
    height: 500px;
    width: 200px;
}
.raket {
    position: relative;
    float: left;
    margin-right: 100px;
    height: 500px;
    width: 200px;
}
.world {
    position: relative;
    float: left;
    margin-top: -40px;
    height: 400px;
    width: 400px;
}
.Welcome {
    position: relative;
    margin-left: 50px;
    padding-top: 60px;
    height: 400px;
    max-width: 600px;
    float:left;
    text-align: left;
}

    .Welcome span {
        
        font-family: 'roboto', sans-serif;
        font-size: 3.8em;
        font-weight: 100;
        line-height: 1em;
        width: 100%;
        color: #fff;
    }

.Hoofdtext3 {
    padding-top: 40px;
    padding-left: 10%;
    padding-right: 10%;
    font-family: 'roboto', sans-serif;
    font-size: 3.8em;
    font-weight: 100;
    line-height: 1.0em;
    height: 475px;
    position: relative;
    float: middle;
    width: 100%;
    color: #fff;
}

.outer-ring {
    position: absolute;
    left: calc(50% - 85px);
    margin-top: -2px;
    height: 170px;
    width: 170px;
    background-image: linear-gradient(135deg, #FEED07 0%, #FE6A50 5%, #ED00AA 15%, #2FE3FE 50%, #8900FF 100%);
    border-radius: 50%;
    /*  Rotate  */
    animation-duration: 2s;
    animation-name: rotate;
    animation-iteration-count: infinite;
}



@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.contentarea {
    font-size: 16px;
    width: 760px;
}


* {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    overflow-y: scroll;
}



.Fieldvalidator {
    color: #FF5050;
    text-align: left;
}



.boxtextNO {
    min-height: 40px;
    padding: 5px 0px 5px 0px;
    overflow: hidden;
}

.boxtextodd {
    float:left;
    min-height: 40px;
    padding: 20px 0px 0px 0px;
    overflow: hidden;
}

.boxtextodd2 {
    float: left;
    min-height: 60px;
    padding: 28px 0px 0px 28px;
    overflow: hidden;
}

.buttonimage {
    float: right;
    margin-top: -8px;
    margin-right: 8px;
    color: #000;
}


.boxheader50 {
    float: left;
    width: 50%;
    
 
}

/*BOXTEXT EN CHECK*/
/*BOXTEXT EN CHECK*/
/*BOXTEXT EN CHECK*/
/*BOXTEXT EN CHECK*/

.boxtext75 {
    float: left;
    width: 75%;
    min-height: 40px;
    padding: 5px 15px 0px 15px;
    overflow: hidden;
}

    .boxtext75 span {
        float: left;
        margin: 0px auto;
        text-align: left;
        padding-top: 4px;
        padding-bottom: 4px;
    }

.boxtext25 {
    float: left;
    width: 25%;
    min-height: 40px;
    padding: 15px 15px 5px 15px;
    overflow: hidden;
}

    .boxtext25 span {
        float: left;
        margin: 0px auto;
        text-align: left;
        padding-top: 4px;
        padding-bottom: 4px;
    }

.boxtext25C {
    width: 25%;
    text-align: left;
    float: left;
    padding: 26px 10px 26px 10px;
    overflow: hidden;
    height: 50px;
}

.boxtext33 {
    width: 33%;
    text-align: left;
    float: left;
    padding: 0px 10px 0px 10px;
    overflow: hidden;
    min-height: 40px;
}

.boxtext66 {
    width: 66%;
    text-align: left;
    float: left;
    padding: 5px 10px 5px 10px;
    overflow: hidden;
    min-height: 40px;
}

.boxtext44 {
    width: 44%;
    text-align: left;
    float: left;
    padding: 0px 10px 0px 0px;
    overflow: hidden;
}

    .boxtext44 span {
        width: 100%;
        float: left;
        border-top: 1px solid #e4e4e4;
        border-left: 1px solid #e4e4e4;
        border-right: 1px solid #e4e4e4;
        background-color: #f2f2f2;
        text-align: left;
        padding: 4px;
    }


.boxtext22 {
    width: 22%;
    text-align: left;
    float: left;
    padding: 0px 10px 0px 0px;
    overflow: hidden;
}

    .boxtext22 span {
        width: 100%;
        float: left;
        border-top: 1px solid #e4e4e4;
        border-left: 1px solid #e4e4e4;
        border-right: 1px solid #e4e4e4;
        background-color: #f2f2f2;
        text-align: left;
        padding: 4px;
    }

.boxcheck50 {
    float: left;
    width: 50%;
    min-height: 40px;
    padding: 15px 15px 0px 15px;
    overflow: hidden;
}



.boxtext50 {
    float: left;
    width: 50%;
    min-height: 40px;
    padding: 10px 15px 0px 15px;
    overflow: hidden;
}

    .boxtext50 span {

        width: 100%;
        float: left;
        border-top: 1px solid #e4e4e4;
        border-left: 1px solid #e4e4e4;
        border-right: 1px solid #e4e4e4;
        background-color: #f2f2f2;
        text-align: left;
        padding: 4px;
    }
        .boxtext50 span:last-child {
         
            float: left;
           
            border-top: 1px solid #e4e4e4;
            border-left: 1px solid #e4e4e4;
            border-right: 1px solid #e4e4e4;
            border-bottom: 1px solid #e4e4e4;
            background-color: #f2f2f2;
            text-align: left;
            padding: 4px;
        }

.debreedte {
   
    width: 200px !important;
    
}
.PanelCellBox {
    opacity: 1;
    border-radius: 5px;
    /* border: 1px solid #e6e6e6; */
    vertical-align: middle;
    text-align: center;
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
    padding: 5px 5px 5px 5px;
    margin-right: 10px;
    margin-left: 10px;
    display: inline-block;
    position: relative;
    line-height: 1em;
}

    .PanelCellBox span {
        line-height: 1.0;
        /*width: 100%;
        float:left;*/
        vertical-align: middle;
        padding-top: 20px;
        display: inline-block;
        font-size: 16px;
        font-weight: 600;
        /*color: #fff;*/
    }


    .PanelCellBox img {
        width: 50px;
        float: left;
        vertical-align: middle;
        text-align: center;
        max-height: 62px;
    }

    .PanelCellBox:hover {
        opacity: 0.9;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        animation: 0.4s fadeIn 0.1s;
        animation-name: boxTransitionScale;
        animation-duration: 0.4s;
        animation-fill-mode: forwards;
    }
.boxtext50NN {
    float: left;
    width: 50%;
    min-height: 40px;
    overflow: hidden;
}


    .boxtext50NN span {
        width: 100%;
        float: left;
        border-top: 1px solid #e4e4e4;
        border-left: 1px solid #e4e4e4;
        border-right: 1px solid #e4e4e4;
        border-bottom: 1px solid #e4e4e4;
        background-color: #f2f2f2;
        text-align: left;
        padding: 4px;
    }

.boxtextNN {
    float: left;
    width: 100%;
    min-height: 40px;
    overflow: hidden;
}


    .boxtextNN span {
        width: 100%;
        float: left;
        border-top: 1px solid #e4e4e4;
        border-left: 1px solid #e4e4e4;
        border-right: 1px solid #e4e4e4;
        border-bottom: 1px solid #e4e4e4;
        background-color: #f2f2f2;
        text-align: left;
        padding: 4px;
    }

.boxtext50N {
    float: left;
    width: 50%;
    min-height: 40px;
    padding: 15px 15px 0px 15px;
    overflow: hidden;
}


    .boxtext50N span {
        width: 100%;
        float: left;
        border-top: 1px solid #e4e4e4;
        border-left: 1px solid #e4e4e4;
        border-right: 1px solid #e4e4e4;
        border-bottom: 1px solid #e4e4e4;
        background-color: #f2f2f2;
        text-align: left;
        padding: 4px;
    }
    
    /*BOXTEXT EN CHECK*/
/*BOXTEXT EN CHECK*/


/*CHECKBOX*/

.boxtext .lblrequiredOrange {
    /*border-top: 1px solid #e4e4e4;
    border-left: 1px solid #e4e4e4;
    border-right: 1px solid #e4e4e4;*/
    /*position:absolute;*/
    /*background-color: #f2f2f2;*/
    width: 100%;
    height: 2px;
    float: left;
    border-top: 2px solid #eb8911;
    border-left: 0px;
    border-right: 0px;
    background-color: #f2f2f2;
    text-align: left;
    padding: 0px;
}
.boxtext50 .lblrequiredOrange {
    /*border-top: 1px solid #e4e4e4;
    border-left: 1px solid #e4e4e4;
    border-right: 1px solid #e4e4e4;*/
    /*position:absolute;*/
    /*background-color: #f2f2f2;*/
    width: 100%;
    height: 2px;
    float: left;
    border-top: 2px solid #eb8911;
    border-left: 0px;
    border-right: 0px;
    background-color: #f2f2f2;
    text-align: left;
    padding: 0px;
}


.boxtext .lblrequired {
    /*border-top: 1px solid #e4e4e4;
    border-left: 1px solid #e4e4e4;
    border-right: 1px solid #e4e4e4;*/
    /*position:absolute;*/
    /*background-color: #f2f2f2;*/
    width: 100%;
    height: 2px;
    float: left;
    border-top: 2px solid #e41c1c;
    border-left: 0px;
    border-right: 0px;
    background-color: #f2f2f2;
    text-align: left;
    padding: 0px;
}

.boxtext50 .lblrequired {
    /*border-top: 1px solid #e4e4e4;
    border-left: 1px solid #e4e4e4;
    border-right: 1px solid #e4e4e4;*/
    /*position:absolute;*/
    /*background-color: #f2f2f2;*/
    width: 100%;
    height: 2px;
    float: left;
    border-top: 2px solid #e41c1c;
    border-left: 0px;
    border-right: 0px;
    background-color: #f2f2f2;
    text-align: left;
    padding: 0px;
}
.boxtext50NO {
    float: left;
    width: 50%;
    overflow: hidden;
}


.boxtextlos {
    float: left;
    width: 100%;
    min-height: 40px;
    padding: 10px 15px 0px 15px;
    overflow: hidden;
}

.boxHeight {
    float: left;
    width: 100%;
    padding: 10px 15px 0px 15px;
    overflow: hidden;
}

.boxtext {
    float: left;
    width: 100%;
    min-height: 40px;
    padding: 10px 15px 0px 15px;
    overflow: hidden;
}

.boxtext required {
    float: left;
    width: 100%;
    min-height: 40px;
    padding: 10px 15px 0px 15px;
    overflow: hidden;
}
  


    .boxtext span {
        border-top: 1px solid #e4e4e4;
        border-left: 1px solid #e4e4e4;
        border-right: 1px solid #e4e4e4;
        width: 100%;
        background-color: #f2f2f2;
        text-align: left;
        float: left;
        padding: 4px;
    }
    .boxtext span:last-child {
        border-top: 1px solid #e4e4e4;
        border-left: 1px solid #e4e4e4;
        border-right: 1px solid #e4e4e4;
        border-bottom: 1px solid #e4e4e4;
       
        background-color: #f2f2f2;
        text-align: left;
        float: left;
        padding: 4px;
    }

 


    .PanelBlue {
        float:left;
        width:100%;

    }

    .contayner span {
    width: 25px;
    /*border-bottom: 1px solid #e4e4e4;*/
}


.contayner {
    display: block;
    position: relative;
   
    float: left;
    padding-top: 2px;
    padding-left: 35px;
    margin-left: 5px;
   
    
     cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
    font-size: 1em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


   
    .contayner input {
        position: absolute;
        opacity: 0;
        cursor: url('../images/iconsM/pointer.svg'), pointer;
    }


.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #3586a5;
    height: 25px;
    width: 25px;
    background-color: #eee;

   
  
   
}



.contayner:hover input ~ .checkmark {
    background-color: #3586a5;
}


.contayner input:checked ~ .checkmark {
    background-color: #3586a5;
}


.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}


.contayner input:checked ~ .checkmark:after {
    display: block;
}


.contayner .checkmark:after {
    left: 8px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


.checkmarkY:after {
    content: "";
    position: absolute;
    display: none;
}

.contayner input:checked ~ .checkmarkY {
    background-color: #3586a5;
}

.checkmarky {

    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #3586a5;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

.contayner .checkmarkY {
    left: 8px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*CHECKBOX EINDE*/


.verzuimLabelHoofd {
    padding-top: 24px;
    padding-left: 0px;
    background-color: #56b273;
    height: 70px;
    width: 70px;
    border-radius: 50px;
    border: 2px solid rgba(31, 31, 35, 0.8);
    text-align: center;
    float: left;
    top: 20px;
    left: 40px;
    color: #fff;
    /*position: absolute;*/
    opacity: 1;
    z-index: 0;
    line-height: 1em;
}


.BoxTextC {
    color: #fff;
    padding:16px;
    margin:0;
    vertical-align: middle;
    height:100%;
}


.BoxinhoudC {
    text-align: center;
    height: 60px;
 
    color: #fff;
    position: relative;
    opacity: 0.9;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}

    .BoxinhoudC:hover {
        opacity: 1;
         cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        animation: 0.4s fadeIn 0.1s;
        animation-name: boxTransitionScale;
        animation-duration: 0.2s;
        animation-fill-mode: forwards;
    }


.boxImageText {
    padding-top: 20px;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.0;
    color: #fff;
    /*height: 100%;*/
    position: relative;
  
}

    .boxImageText span {
        color: #fff;
        height: 40px;
        vertical-align: middle;
        /*box-shadow: 0px 0px 2px #000;*/
    }

    .boxImageText .N {
        line-height: 1.0;
        padding-top: 10px;
        padding-bottom: 15px;
        height: 40px;
        
        vertical-align: middle;
        text-align: center;
        font-size: 16px;
        font-weight: 600;
        color: #fff;
    }

    .boxImageText img {
        max-height: 64px;
        max-width: 64px;
       
    }


.boxImageText2 {
    padding-top: 40px;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.0;
    color: #fff;
    /*height: 100%;*/
    position: relative;
}

    .boxImageText2 span {
        color: #fff;
        height: 40px;
        vertical-align: middle;
        /*box-shadow: 0px 0px 2px #000;*/
    }

    .boxImageText2 .N {
        line-height: 1.0;
        padding-top: 10px;
        padding-bottom: 15px;
        height: 40px;
        vertical-align: middle;
        text-align: center;
        font-size: 16px;
        font-weight: 600;
        color: #fff;
    }

    .boxImageText2 img {
        max-height: 64px;
        max-width: 64px;
    }


.BoxOutside {
    opacity: 1;
  
    min-width: 100%;
    /*padding: 10px 10px 10px 10px;*/
    float: left;
    display: inline-block;
    position: relative;
    line-height: 1em;
    border-style: none;
    border-color: inherit;
    border: 6px solid rgba(31, 31, 35, 0.3);
    border-radius: 15px;
    text-align: center;
    min-height: 157px;
    background-color: #6256a9;
    color: #fff;
    opacity: 1;
}


    .BoxOutside:hover {
        opacity: 1;
         cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
    
    }


.BoxOutsideNo {
    opacity: 1;
  height:100%;
    min-width: 100%;
    /*padding: 10px 10px 10px 10px;*/
    float: left;
    display: inline-block;
    position: relative;
    line-height: 1em;
    border-style: none;
    border-color: inherit;
    border: 6px solid rgba(31, 31, 35, 0.3);
    border-radius: 15px;
    text-align: center;
    /*min-height: 157px;*/
    background-color: #6256a9;
    color: #fff;
    opacity: 1;
}


    .BoxOutsideNo:hover {
        opacity: 1;
         cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
      
    }

.BoxInside {
    /*padding-top: 20px;*/
   vertical-align:middle;
    text-align: center;
    
    padding:20px;
    padding-left: 10px;
    padding-right: 10px;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.0;
    color: #fff;
    height: 100%;
    position: relative;
}

    .BoxInside span {
        color: #fff;
        
        vertical-align: middle;
        /*box-shadow: 0px 0px 2px #000;*/
    }

    .BoxInside .N {
        line-height: 1.0;
        /*padding-top: 20%;*/
        
        
     
        text-align: center;
       
 
       
        vertical-align: middle;
        font-size: 1.2em;
        line-height: 1.3em;
        color: #fff;
    }

    .BoxImage1 img {
        max-height: 64px;
        max-width: 64px;
    }



.PanelFooter {
    height: 50px;
    width: 100%;
    z-index: 1;
    text-align: left;
    background: #484848;
    box-shadow: 0px 0px 3px #000;
   
    bottom: 0;
    left: 0;
}

.PanelFooterInner {
    position: relative;
    
    text-align: center;
    width: 90%;
    margin: auto;
   
    left: 0;
    right: 0;
    top: 0px;
    bottom: 0;
}

.circleS {
    position: absolute;
    left: 160px;
    top: 80px;
    width: 350px;
    height: 420px;
    border-radius: 40%;
    border: 10px solid red;
    z-index: 999;
}



.deFotoLL {
   
   
   
    margin-top: 0px;
    margin-left: 0px;
    Height: 40px;
    Width: 40px;
    background-size: cover;
    background-position: 15% 15%;
    background-repeat: none;
   
}

.deFotoLLFrame {
    border-radius: 50%;
    position: relative;
    display: inline-block;
    overflow: hidden;
    float: left;
   
   
   
    Height: 36px;
    Width: 36px;
   
}

.outer-ring {
    position: absolute;
    left: calc(50% - 86px);
    margin-top: -3px;
    height: 172px;
    width: 172px;
    background-image: linear-gradient(135deg, #FEED07 0%, #FE6A50 5%, #ED00AA 15%, #2FE3FE 50%, #8900FF 100%);
    border-radius: 50%;
    /*  Rotate  */
    animation-duration: 2s;
    animation-name: rotate;
    animation-iteration-count: infinite;
}

.ImageL {
    padding: 80px;
    /*Height: 164px;
    Width: 164px;*/
    border-radius: 50%;
    position: relative;
    display: inline-block;
    overflow: hidden;
    z-index: 10;
    background-size: cover;
    background-position: 15% 15%;
    background-repeat: none;
    border: 3px solid #484848;
    opacity: 1;
}
.ImageL:hover {
  
}

.ImageLB {

    Height: 164px;
    Width: 164px;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    overflow: hidden;
    z-index: 10;
    background-size: cover;
    background-position: 15% 15%;
    background-repeat: none;
    border: none;
    opacity: 1;
}

    .ImageLB:hover {
        opacity: 0.5;
    }


.ImageArt {
    padding: 25px;
    /*width: 50px;
    Height: 50px;*/
 border:none;
    /*border-radius: 50%;*/
    position: relative;
    display: inline-block;
    overflow: hidden;
    z-index: 10;
    background-size: contain;
    background-position: 15% 15%;
    background-repeat: no-repeat;
    border: none;
    opacity: 1;
}

 


.ImagePanelArt {
    width: 50px;
    Height: 50px;
    /*margin-top: 5px;*/
    margin-right: 10px;
    color: #0d99b2;
    float: left;
    /*display: inline-block;*/
    /*margin-left: -40px;*/
    /*position: relative;*/
    opacity: 1;
}

.Blok20vh {
    margin: 10px 5px 0px 10px;
    float: left;
    position: relative;
    display: block;
    overflow-x: hidden;
    overflow-y: scroll;
    line-height: 1em;
    /*box-shadow: 0px 0px 7px #000;*/
    height: 20vh;
    /*opacity: 0.6;*/
    /*max-width: 800px;*/
    width: 400px;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}

.Blok40vh {
    margin: 10px 5px 0px 10px;
    float: left;
    position: relative;
    display: block;
    overflow-x: hidden;
    overflow-y: scroll;
    line-height: 1em;
    /*box-shadow: 0px 0px 7px #000;*/
    height: 40vh;
    /*opacity: 0.6;*/
    /*max-width: 800px;*/
    width: 400px;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}
.Blok100vh {
   
    float: left;
    position: relative;
    display: block;
    overflow-x: hidden;
    overflow-y: scroll;
    line-height: 1em;
    /*box-shadow: 0px 0px 7px #000;*/
    height: 100vh;
    /*opacity: 0.6;*/
    /*max-width: 800px;*/
    width: 440px;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}

.Blok400 {
    margin: 10px 5px 0px 10px;
    float: left;
    position: relative;
    display: block;
    overflow-x: hidden;
    overflow-y: scroll;
    line-height: 1em;
    /*box-shadow: 0px 0px 7px #000;*/
    height: 400px;
    /*opacity: 0.6;*/
    /*max-width: 800px;*/
    width: 400px;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}


.item444{
    /*margin-top: 40px;*/
    /*float: left;*/
    text-align: center;
    height: 100%;
    display: block;
    padding-top: 10px;
    padding-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}

.item444 {
    width: 100%;
}



.item22 {
   
    float: left;
    text-align: center;
    /*height: 100%;*/

    display: block;
    
   height:20px;
    margin-left: 15%;
    margin-right: auto;
    width: 100%;
}


.item44 {
    margin-top: 40px;
    float: left;
    text-align: center;
    /*height: 100%;*/
    display: block;
    padding-top: 10px;
    padding-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}



.item55 {
    float: left;
    text-align: center;
    height: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.item8 {
    margin: 10px 5px 0px 10px;
    float: left;
    position: relative;
    display: block;
    overflow-x: hidden;
    overflow-y: hidden;
    line-height: 1em;
    /*box-shadow: 0px 0px 7px #000;*/
    border: 6px solid rgba(31, 31, 35, 0.3);
    border-radius: 24px;
    /*opacity: 0.6;*/
    height: 90%;
   
    /*max-width: 800px;*/
    min-width: 800px;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}


.item8 .resize-handle {
    position: absolute;
    top: 50%;
    right: -4px; /* sticks out slightly */
    transform: translateY(-50%);
    width: 18px;
    height: 120px;
    cursor: ew-resize;
    user-select: none;
    touch-action: none;
    /* Button look */
    background: #f3f3f3;
    border: 1px solid #bbb;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* Grip dots */
.item8 .resize-handle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 18px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, #666 1.5px, transparent 2px) 0 0 / 6px 6px, radial-gradient(circle, #666 1.5px, transparent 2px) 3px 3px / 6px 6px;
}

/* Hover feedback */
.item8:hover .resize-handle {
    background: #e8e8e8;
}

/* Active drag feedback */
.item8[data-block-click="1"] .resize-handle {
    background: #dcdcdc;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
}

    .item8:hover {
        opacity: 1;
    }

@media screen and (max-width: 1200px) {

    .item8 {
        min-width: 400px;
       
    }
}

@media screen and (max-width: 768px) {

    .item8 {
        max-width: calc(100% - 20px);
        width: calc(100% - 20px);
        height: 80px;
    }
}



.item12 {
    margin: 10px 5px 0px 10px;
    float: left;
    position: relative;
    display: block;
    overflow-x: hidden;
    overflow-y: hidden;
    line-height: 1em;
    /*box-shadow: 0px 0px 7px #000;*/
    border: 6px solid rgba(31, 31, 35, 0.3);
    border-radius: 24px;
    /*opacity: 0.6;*/
    height: 90%;
    /*max-width: 800px;*/
    /*min-width: 800px;*/
    width: 1200px;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}

    .item8:hover {
        opacity: 1;
    }

@media screen and (max-width: 1200px) {

    .item8 {
        min-width: 400px;
    }
}

@media screen and (max-width: 768px) {

    .item8 {
        max-width: calc(100% - 20px);
        width: calc(100% - 20px);
        height: 80px;
    }
}





.item4 {
    /*padding: 10px 0px 0px 10px;*/
    margin: 10px 5px 0px 10px;
    float: left;
    position: relative;
    display: block;
    overflow-x: hidden;
    overflow-y: hidden;
    line-height: 1em;
    max-width: 400px;
    min-width: 400px;
    /*box-shadow: 0px 0px 7px #000;*/
    border: 6px solid rgba(31, 31, 35, 0.3);
    border-radius: 24px;
    /*opacity: 0.6;*/
    height: 90%;
    /*max-width: 400px;
    min-width: 400px;*/
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}

    .item4:hover {
        opacity: 1;
    }


@media screen and (max-width: 1980px) {


    .item4 {
        /*height: 70vh;*/
        /*zoom: 0.9;*/
    }
}

@media screen and (max-width: 768px) {

    .item4 {
        max-width: calc(100% - 20px);
        width: calc(100% - 20px);
        height: 80px;
    }
    
}

@media screen and (max-width: 480px) {


    .item4 {
      
       
    }
}

.itemMain {
    color: #000;
    background-color: rgba(34, 32, 32, 0.90);
  width: auto !important;
    margin: auto;
    position: Fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
}

    .itemMain:hover {
        cursor: url(../images/iconsM/reply.png) 16 16, pointer;
    }



.itemMainF {
    color: #000;
    background-color: rgba(34, 32, 32, 1);
    margin: auto;
    position: Fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
}

    .itemMainF:hover {
        cursor: url(../images/iconsM/reply.png) 16 16, pointer;
    }


.itemMainArt {
    color: #000;
    background-color: rgba(255, 255, 255, 1.0);
     cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
    margin: auto;
    position: Fixed;
    left: 0;
    right: 0;
    top: 55px;
    bottom: 0;
    z-index: 9999;
}

.itemMainLight {
    color: #000;
    background-color: rgba(255, 255, 255, 0.60);
    cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
    margin: auto;
    position: Fixed;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
}

#PanelOP.itemMainLight {
    color: #000;
    background-color: rgba(255, 255, 255, 0.60);
    cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
    margin: auto;
    position: relative;
    display: block;
    height: 100vh;
    width: 250px;
    float: right;
    z-index: 9999;
}
@media screen and (min-width: 1200px) {
    #PanelOP.itemMainLight {
        color: #000;
        background-color: rgba(255, 255, 255, 0.20);
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        margin: auto;
        position: relative;
        display: block !important;
        height: 100vh;
        width: 250px;
        float: right;
        z-index: 9999;
    }
}
    @media screen and (max-width: 1200px) {


        #PanelOP.itemMainLight {
            color: #000;
            background-color: rgba(255, 255, 255, 0.60);
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            margin: auto;
            position: Fixed;
            width: 100%;
            height: 100%;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 9999;
        }
    }



    .itemMainW {
        color: #000;
        background-color: rgba(255, 255, 255, 1);
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        margin: auto;
        position: Fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 9999;
    }




    .itemMenu {
        padding: 5px 0px 0px 0px;
        float: left;
        position: fixed;
        display: block;
        line-height: 1em;
        left: 80px;
        top: 50px;
        max-width: 220px;
        height: 100%;
        transition: opacity .5s ease-out;
        -moz-transition: opacity .5s ease-out;
        -webkit-transition: opacity .5s ease-out;
        -o-transition: opacity .5s ease-out;
    }

        .itemMenu:hover {
            opacity: 1;
        }

    .itemMenuG2 {
        padding: 10px 5px 0px 5px;
        /*float: right;*/
        display: inline-block;
        position: relative;
        line-height: 1em;
        transition: opacity .5s ease-out;
        -moz-transition: opacity .5s ease-out;
        -webkit-transition: opacity .5s ease-out;
        -o-transition: opacity .5s ease-out;
        /*height: 80%;
    top: 55%;
    left: 10%;
    margin-right: -10%;
    transform: translate(-50%, -50%);*/
        /*transform: rotateX(45deg) rotateZ(45deg) translateZ(0px);
    transform-style: preserve-3d;*/
    }

        .itemMenuG2:hover {
            opacity: 1;
        }

    .itemMenuG {
        /*padding: 10px 5px 0px 5px;*/
        /*float: left;*/
        position: relative;
        display: flex;
        /*overflow-y: scroll;*/
        line-height: 1em;
        width: 90%;
        text-align: center;
        max-width: 1700px;
        transition: opacity .5s ease-out;
        -moz-transition: opacity .5s ease-out;
        -webkit-transition: opacity .5s ease-out;
        -o-transition: opacity .5s ease-out;
        height: 90%;
        top: 60%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
        flex-wrap: nowrap;
        justify-content: center;
        align-items: flex-start;
        flex-direction: row;
        align-content: flex-end;
        /*transform: rotateX(45deg) rotateZ(45deg) translateZ(0px);
    transform-style: preserve-3d;*/
    }


    @media screen and (max-width: 1980px) {


        .itemMenuG {
            max-width: 1700px;
            /*zoom: 0.9;*/
        }
    }



    @media screen and (max-width: 1400px) {


        .itemMenuG {
            /*zoom: 0.7;*/
        }
    }

    @media screen and (max-width: 1200px) {


        .itemMenuG {
            zoom: 0.5;
            /*zoom: 0.6;*/
        }
    }

    @media screen and (max-width: 720px) {


        .itemMenuG {
            zoom: 0.5;
        }
    }

    @media screen and (max-width: 480px) {


        .itemMenuG {
        }
    }


    .Groepscherm100 {
        /*padding: 100px;*/
        height: 100%;
        width: 100%;
        position: relative;
        float: left;
    }

    .Groepscherm75 {
        /*padding: 5%;*/
        height: 100%;
        width: 75%;
        position: relative;
        float: left;
    }

    .Groepscherm50A {
        background-color: rgba(31, 31, 35, 0.3);
        /*padding: 100px;*/
        height: 100%;
        width: 40%;
        position: relative;
        float: left;
    }

    .Groepscherm50B {
        /*padding-top: 110px;*/
        /*padding: 100px;*/
        height: 100%;
        width: 60%;
        position: relative;
        float: left;
    }


    .Groepscherm {
        height: 100%;
        width: 100%;
        position: relative;
        overflow-y: hidden;
        overflow-x: hidden;
    }




    .itemNN {
        position: relative;
        float: left;
        padding: 0px 0px 0px 0px;
        /*background-color: #484848;*/
        -webkit-transition: all 200ms ease-out;
        -moz-transition: all 200ms ease-out;
        -ms-transition: all 200ms ease-out;
        -o-transition: all 200ms ease-out;
        transition: all 200ms ease-out;
        line-height: 1em;
        overflow-y: scroll;
        overflow-x: hidden;
        width: 270px;
        height: calc(100vh - 80px);
        z-index: 999;
        /*-webkit-animation-name: animateMenu;
    -webkit-animation-duration: 1.4s;*/
    }


        .itemNN::-webkit-scrollbar {
            width: 7px;
        }


        .itemNN::-webkit-scrollbar-track {
        }


        .itemNN::-webkit-scrollbar-thumb {
        }


            .itemNN::-webkit-scrollbar-thumb:hover {
            }



        .itemNN:hover {
            width: 270px;
            -webkit-transition: all 100ms ease-in-out;
            -moz-transition: all 100ms ease-in-out;
            -ms-transition: all 100ms ease-in-out;
            -o-transition: all 100ms ease-in-out;
            transition: all 100ms ease-in-out;
        }


    .itemMM {
        position: relative;
        float: left;
        padding: 0px 0px 0px 0px;
        /*background-color: #484848;*/
        background: rgba(18, 34, 47, 0.2);
        display: inline-block;
        -webkit-transition: all 200ms ease-out;
        -moz-transition: all 200ms ease-out;
        -ms-transition: all 200ms ease-out;
        -o-transition: all 200ms ease-out;
        transition: all 200ms ease-out;
        line-height: 1em;
        overflow-y: scroll;
        overflow-x: hidden;
        width: 86px;
        height: calc(100% - 80px);
        z-index: 999;
        /*-webkit-animation-name: animateMenu;
    -webkit-animation-duration: 1.4s;*/
    }

    @media screen and (max-width: 768px) {
        .itemMM {
            margin-right: 30px;
            width: 270px;
            display: none;
        }
    }



    @-webkit-keyframes animateMenu {
        from {
            width: 270px;
        }

        to {
            width: 270px;
        }
    }

    @keyframes animateMenu {
        from {
            width: 270px;
        }

        to {
            width: 270px;
        }
    }




    .itemMM::-webkit-scrollbar {
        width: 7px;
    }


    .itemMM::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.4);
    }


    .itemMM::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.4);
    }


        .itemMM::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.4);
        }



    .itemMM:hover {
        width: 270px;
        -webkit-transition: all 100ms ease-in-out;
        -moz-transition: all 100ms ease-in-out;
        -ms-transition: all 100ms ease-in-out;
        -o-transition: all 100ms ease-in-out;
        transition: all 100ms ease-in-out;
    }



    .itemM1L {
        position: relative;
        /*float: left;*/
        /*overflow-y: scroll;
    overflow-x: hidden;*/
        /*width:200px;
    height:70vh;*/
        /*padding: 20px 0px 0px 0px;
    line-height: 1em;
    overflow-y: scroll;
    overflow-x: hidden;
    text-align: center;
    min-width: 500px;
  
   
    height: 100%;
    z-index: 999;*/
        max-height: 85%;
        /*max-width: 65%;*/
        max-width: 1010px;
    }

    .itemM1R {
        position: relative;
        float: left;
        z-index: 99;
        margin-left: 20px;
        max-height: 90vh;
        top: 20px;
        max-width: 415px;
        /*display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: flex-end;
    align-items: baseline;*/
    }

    @media screen and (max-width: 768px) {
        .itemM1R {
            padding: 10px;
            margin-left: 0px;
            width: calc(100% - 90px);
        }
    }

    .itemM1RR {
        position: relative;
        z-index: 99;
        width: 200px;
        /*padding: 20px 0px 0px 0px;
    line-height: 1em;
    overflow-y: scroll;
    overflow-x: hidden;
    text-align: center;

    min-width: 150px;
    width: 200px;
    height: 100%;
    z-index: 999;*/
    }


    .itemRM {
        /*position: relative;*/
        /*float: right;*/
        background: rgba(0, 0, 0, 0.2);
        padding: 20px 0px 0px 0px;
        border-top: 2px solid rgba(0, 0, 0, 0.2);
        -webkit-transition: all 200ms ease-out;
        -moz-transition: all 200ms ease-out;
        -ms-transition: all 200ms ease-out;
        -o-transition: all 200ms ease-out;
        transition: all 200ms ease-out;
        line-height: 1em;
        overflow-y: scroll;
        overflow-x: hidden;
        text-align: center;
        bottom: -60px;
        width: 100%;
        height: 240px;
        z-index: 999;
        /*-webkit-animation-name: animateMenu;
    -webkit-animation-duration: 1.4s;*/
    }

        /*@-webkit-keyframes animateMenu {
    from {
        width: 270px;
    }

    to {
        width: 270px;
    }
}

@keyframes animateMenu {
    from {
        width: 270px;
    }

    to {
        width: 270px;
    }
}*/




        .itemRM::-webkit-scrollbar {
            width: 7px;
        }


        .itemRM::-webkit-scrollbar-track {
            background: #424242;
        }


        .itemRM::-webkit-scrollbar-thumb {
            background: #484848;
        }


            .itemRM::-webkit-scrollbar-thumb:hover {
                background: #282828;
            }



        .itemRM:hover {
            -webkit-transition: all 100ms ease-in-out;
            -moz-transition: all 100ms ease-in-out;
            -ms-transition: all 100ms ease-in-out;
            -o-transition: all 100ms ease-in-out;
            transition: all 100ms ease-in-out;
        }

    .itemMI2 {
        display: inline-block;
        position: relative;
    }



.itemLL {
    position: relative;
    /*float: left;*/
    /*top: 100px;*/
    height: calc(100% - 185px);
    padding: 10px 0px 0px 10px;
    /*margin-left: 15px;*/
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -ms-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
    line-height: 1em;
    /*width: 270px;*/
    z-index: 9;
}


        .itemLL:hover {
            -webkit-transition: all 200ms ease-in-out;
            -moz-transition: all 200ms ease-in-out;
            -ms-transition: all 200ms ease-in-out;
            -o-transition: all 200ms ease-in-out;
            transition: all 200ms ease-in-out;
        }


    @-webkit-keyframes animateMenu1 {
        from {
            left: 80px;
        }

        to {
            left: 80px;
        }
    }

    @keyframes animateMenu1 {
        from {
            left: 80px;
        }

        to {
            left: 80px;
        }
    }



    .itemRIGHT {
        position: absolute;
        float: right;
        padding: 0px 0px 0px 0px;
        -webkit-transition: all 200ms ease-out;
        -moz-transition: all 200ms ease-out;
        -ms-transition: all 200ms ease-out;
        -o-transition: all 200ms ease-out;
        transition: all 200ms ease-out;
        line-height: 1em;
        overflow-y: scroll;
        overflow-x: hidden;
        right: -190px;
        width: 270px;
        height: 100%;
        z-index: 999;
        -webkit-animation-name: animateMenuRIGHT;
        -webkit-animation-duration: 1.4s;
        right: 0px;
        -webkit-transition: all 200ms ease-in-out;
        -moz-transition: all 200ms ease-in-out;
        -ms-transition: all 200ms ease-in-out;
        -o-transition: all 200ms ease-in-out;
        transition: all 200ms ease-in-out;
    }


        .itemRIGHT:hover {
        }


    @-webkit-keyframes animateMenuRIGHT {
        from {
            right: 0;
        }

        to {
            right: 0;
        }
    }

    @keyframes animateMenuRIGHT {
        from {
            right: 0;
        }

        to {
            right: 0;
        }
    }




    .itemRIGHT::-webkit-scrollbar {
        width: 7px;
    }


    .itemRIGHT::-webkit-scrollbar-track {
        background: #d9d9d9;
    }


    .itemRIGHT::-webkit-scrollbar-thumb {
        background: #C1C1C1;
    }


        .itemRIGHT::-webkit-scrollbar-thumb:hover {
            background: #666;
        }


    .PanelCenter {
        display: inline-block;
        text-align: center;
    }

    .itemBoxCenter {
        opacity: 0.8;
        transition: opacity .5s ease-out;
        -moz-transition: opacity .5s ease-out;
        -webkit-transition: opacity .5s ease-out;
        -o-transition: opacity .5s ease-out;
        width: 100%;
        padding: 10px 10px 10px 10px;
        display: inline-block;
        position: relative;
        line-height: 1em;
        text-align: center;
    }


        .itemBoxCenter:hover {
            opacity: 0.9;
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            animation: 0.4s fadeIn 0.1s;
            animation-name: boxTransitionScale;
            animation-duration: 0.4s;
            animation-fill-mode: forwards;
        }

    @media screen and (max-width: 1724px) {


        .itemBoxCenter {
        }
    }

    @media screen and (max-width: 768px) {


        .itemBoxCenter {
        }
    }

    @media screen and (max-width: 720px) {


        .itemBoxCenter {
        }
    }

    @media screen and (max-width: 480px) {


        .itemBoxCenter {
        }
    }


    .itemBoxCenterNo {
        opacity: 0.8;
        text-align: center;
        width: 100%;
        padding: 10px 10px 10px 10px;
        display: inline-block;
        position: relative;
        line-height: 1em;
    }


    .itemBoxCenter:hover {
        opacity: 0.9;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
    }


    .itemBoxH {
        float: left;
        position: relative;
        line-height: 1em;
        width: 280px;
    }



    .BoxBluelight {
        border-style: none;
        border-color: inherit;
        border: 6px solid rgba(31, 31, 35, 0.3);
        border-radius: 15px;
        text-align: center;
        height: 157px;
        background-color: #3586a5;
        color: #fff;
        opacity: 1;
        /*box-shadow: 0px 8px 20px #0d99b2;*/
    }

    .itemBox {
        opacity: 1;
        transition: opacity .5s ease-out;
        -moz-transition: opacity .5s ease-out;
        -webkit-transition: opacity .5s ease-out;
        -o-transition: opacity .5s ease-out;
        width: 200px;
        padding: 10px 10px 10px 10px;
        float: left;
        display: inline-block;
        position: relative;
        line-height: 1em;
    }


        .itemBox:hover {
            opacity: 1;
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            animation: 0.4s fadeIn 0.1s;
            animation-name: boxTransitionScale;
            animation-duration: 0.4s;
            animation-fill-mode: forwards;
        }

    @media screen and (max-width: 1724px) {


        .itemBox {
        }
    }

    @media screen and (max-width: 768px) {


        .itemBox {
            width: 50%;
        }
    }

    @media screen and (max-width: 720px) {
    }

    @media screen and (max-width: 480px) {
    }



    @keyframes boxTransitionScale {


        0% {
            transform: scale(1);
        }


        75% {
            transform: scale(1.1);
        }

        100% {
            transform: scale(1);
            /*border: solid 2px rgba(255, 255, 255, 0.3);*/
        }
    }

    @keyframes boxTransitionScaleR {


        0% {
            transform: scale(0.9);
        }


        75% {
            transform: scale(1);
        }

        100% {
            transform: scale(0.9);
            /*border: solid 2px rgba(255, 255, 255, 0.3);*/
        }
    }

    .itemBoxR {
        opacity: 0.8;
        transition: opacity .5s ease-out;
        -moz-transition: opacity .5s ease-out;
        -webkit-transition: opacity .5s ease-out;
        -o-transition: opacity .5s ease-out;
        transform: scale(0.9);
        width: 200px;
        padding: 10px 10px 10px 10px;
        float: left;
        display: inline-block;
        position: relative;
        line-height: 1em;
    }


        .itemBoxR:hover {
            opacity: 1;
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            animation: 0.4s fadeIn 0.1s;
            animation-name: boxTransitionScaleR;
            animation-duration: 0.4s;
            animation-fill-mode: forwards;
            transform: scale(0.9);
        }

    @media screen and (max-width: 768px) {


        .itemBoxR {
            width: 50%;
        }
    }


    /*.boxLogo {
    text-align: left;
    color: #fff;
    opacity: 1;
    height: 157px;
    border: 6px solid rgba(31, 31, 35, 0.3);
    border-radius: 15px;
    position: relative;
    background-color: #006cbc;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-image: url(../images/LOGOSCHOOL/logoS1.Png);
    background-size: 90%;
}

@media screen and (max-width: 720px) {

    .boxLogo {
        background-size: 80%;
    }
}
@media screen and (max-width: 940px) {

    .boxLogo {
        background-size: 80%;
    }
}*/

    .boxLogo {
        right: 0px;
        height: 80px;
        width: 190px;
        position: relative;
        float: right;
        margin-right: 20px;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-image: url(../images/LOGOT.png);
        background-size: 100%;
    }

    @media screen and (max-width: 520px) {

        .boxLogo {
            height: 70px;
            float: left;
            position: relative;
            background-size: 80%;
        }
    }

    .PanelboxhoofdC {
        padding: 7px 7px 7px 7px;
        color: #0d99b2;
        background: #d9d9d9;
        width: 100%;
        float: left;
        position: relative;
    }

    .Panelboxhoofd {
        padding: 10px 2px 10px 10px;
        color: #0d99b2;
        background: #f8f8f8;
        width: 100%;
        float: left;
        position: relative;
    }




    .PanelboxFF {
        padding: 10px 2px 0px 0px;
        color: #0d99b2;
        position: relative;
        float: left;
        position: relative;
        border-radius: 10px;
    }

.PanelH {
    float: left;
    position: relative;
    width: 250px;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 0px;
    height: 100%;
    text-align: center;
    margin-right: 20px;
    z-index:1000;
   
    background-color: #4b4b4b;
}

.PanelLader {
    float: left;
    position: fixed;
    width: 250px;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 0px;
    height: 100%;
    opacity: 0.8;
    text-align: center;
    margin-right: 20px;
    z-index:9000;
    background-color: #4b4b4b;
}

.Headerlabelwacht {
    text-decoration: none;
    text-align: left;
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    font-size: 18px;
    padding-top: 30px;
    /*width: 100%;*/
    font-weight: 900;
    cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
    color: #fff;
}

    .PanelboxmainC {
        color: #0d99b2;
        /*height: 69px;*/
        width: 300%;
        margin: 0px;
        /*margin-top:4px;*/
        float: left;
        position: relative;
    }

    .PanelboxmainCHover {
        height: 68px;
        background-color: #fec956;
        width: 300%;
        float: left;
        position: relative;
    }

    .PanelboxC {
        padding: 5px 5px 5px 5px;
        color: #0d99b2;
        height: 69px;
        width: 70px;
        margin: 0px;
        float: left;
        position: relative;
    }

    .BlokG {
        display: block;
        float: left;
        position: relative;
        overflow: hidden;
        opacity: 1;
        width: 100%;
    }

    .buttonG {
        background-color: #2e2f35;
        border: none;
        color: white;
        text-align: left;
        padding: 6px 10px 10px 10px;
        height: 40px;
        width: 100%;
        float: left;
        border: 2px solid rgb(31, 31, 35);
        font-weight: 600;
        text-decoration: none;
        font-size: 20px;
    }

    .PanelboxCHover {
        height: 69px;
        background: #b388dd;
        padding: 5px 5px 5px 5px;
        color: #0d99b2;
        width: 70px;
        margin: 0px;
        float: left;
        position: relative;
    }

    .PanelboxCsmall {
        padding: 2px 2px 2px 2px;
        color: #0d99b2;
        width: 35px;
        margin: 0px;
        float: left;
        position: relative;
    }


.PanelboxCC {
    padding: 5px 0px 0px 0px;
    color: #0d99b2;
    border-top: 1px solid #babebf;
    margin: 0px;
    width: 300px;
    float: left;
    position: relative;
}


    .PanelboxCC .buttonStyleSelect {
        background: #f8f8f8;
        border-bottom: 0px;
        color: #000;
        /*padding: 22px;*/
        padding: 6px;
        display: inline-block;
        width: 100%;
        /*cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;*/
        text-decoration: none;
    }



.PanelboxCCHover {
    background-color: #b388dd;
    padding: 4px 5px 5px 5px;
    color: #0d99b2;
   
    width: 300px;
    float: left;
    position: relative;
}

        .PanelboxCCHover .buttonStyleSelect {
            background: #b388dd;
            color: #fff;
            display: inline-block;
            /*padding: 20px;*/
            padding: 6px;
            width: 100%;
            border: 0px;
            text-decoration: none;
            /*cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;*/
        }


    .PanelboxCCsmall {
        padding: 2px 2px 2px 2px;
        color: #0d99b2;
        height: 69px;
        margin: 0px;
        width: 120px;
        float: left;
        position: relative;
    }

    .PanelboxCCC {
        padding: 5px 5px 5px 5px;
        color: #0d99b2;
        /*height: 69px;*/
        border-radius: 20%;
        bottom: 0;
        width: 70px;
        float: left;
        position: relative;
    }

    .PanelboxCCCsmall {
        padding: 2px 2px 2px 2px;
        color: #0d99b2;
        bottom: 0;
        width: 35px;
        float: left;
        position: relative;
    }

.PanelboxCCB {
    padding: 5px 5px 5px 5px;
    color: #0d99b2;
    /*margin-left: 10px;*/
    /*background: #ffb961;*/
    /*height: 67px;*/
    bottom: 0;
    width: 70px;
    float: left;
    position: relative;
}

.PanelboxCCBHover {
    padding: 5px 5px 5px 5px;
    color: #0d99b2;
    /*border-radius: 20%;*/
    background: #b388dd;
    bottom: 0;
    /*margin-left: 10px;*/
    width: 70px;
    float: left;
    position: relative;
}



    .PanelboxCCBsmall {
        padding: 2px 2px 2px 2px;
        color: #0d99b2;
        background: #ffb961;
        bottom: 0;
        width: 35px;
        float: left;
        position: relative;
    }

    .pie {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: conic-gradient(#655 40%, yellowgreen 0);
    }




    .PanelboxChartHori {
        color: #fff;
        font-size: 14px;
        margin: 3px;
        margin-left: 30px;
        width: 100%;
        float: left;
        position: relative;
    }

    .PanelBoxPlainH {
        color: #000;
        background: #f8f8f8;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        position: absolute;
        height: 80%;
        display: inline-block;
        width: 80%;
        transform: rotate(-90deg);
        overflow-y: visible;
    }



    .buttonStyleChartHori {
        display: block;
        background-color: #4e90a4;
        border: 1px solid rgba(255, 255, 255, 1);
        padding: 7px;
        color: #fff;
        float: left;
        font-weight: 600;
        font-size: 14px;
        position: relative;
        text-align: center;
        text-decoration: none;
        height: 34px;
    }

    .buttonStyleChart1Hori {
        padding: 7px;
        display: inline-block;
        float: left;
        border: 1px solid rgba(255, 255, 255, 1);
        color: #000;
        font-weight: 600;
        position: relative;
        margin-right: 5px;
        text-align: center;
        vertical-align: middle;
        text-decoration: none;
        font-size: 14px;
        height: 34px;
        min-width: 150px;
    }






    .PanelbackChart {
        position: absolute;
        padding: 15px 15px 10px 15px;
        width: 100%;
        height: 300px;
        overflow: hidden;
        opacity: 1;
    }


    .PanelboxChart {
        padding: 5px 30px 5px 5px;
        color: #fff;
        font-size: 14px;
        margin: 5px 5px 5px 5px;
        height: 500px;
        float: left;
        position: relative;
    }


    .buttonStyleChartH {
        display: block;
        background-color: #4e90a4;
        border: 1px solid rgba(255, 255, 255, 1);
        padding: 15px 10px 25px 10px;
        color: #fff;
        margin-bottom: 5px;
        font-weight: 600;
        font-size: 14px;
        position: absolute;
        text-align: center;
        text-decoration: none;
        height: 60px;
        width: 100%;
    }

    .buttonStyleChart1 {
        padding: 15px 0;
        display: inline-block;
        border: 1px solid rgba(255, 255, 255, 1);
        color: #000;
        font-weight: 600;
        position: absolute;
        text-align: center;
        vertical-align: middle;
        text-decoration: none;
        font-size: 14px;
        height: 60px;
        width: 100%;
    }

    .buttonStyleChart0 {
        margin: 5px 5px 5px 5px;
        display: inline-block;
        border: none;
        color: white;
        position: absolute;
        text-align: center;
        text-decoration: none;
        font-size: 12px;
        height: 60px;
        width: 100%;
    }

    .buttonStyleChart2 {
        margin: 5px 5px 5px 5px;
        display: block;
        background-color: #4e90a4;
        border: none;
        color: white;
        position: absolute;
        text-align: center;
        text-decoration: none;
        font-size: 14px;
        height: 60px;
        width: 100%;
    }

    .buttonStyleChart3 {
        margin: 5px 5px 5px 5px;
        display: block;
        background-color: #b388dd;
        border: none;
        color: white;
        position: absolute;
        text-align: center;
        text-decoration: none;
        font-size: 14px;
        height: 60px;
        width: 100%;
    }

    .buttonStyleChart4 {
        margin: 5px 5px 5px 5px;
        display: block;
        background-color: #4e90a4;
        border: none;
        color: white;
        position: absolute;
        text-align: center;
        text-decoration: none;
        font-size: 14px;
        height: 60px;
        width: 100%;
    }



    .PanelbackGrid {
        display: block;
        padding: 5px 5px 5px 5px;
        width: 100%;
        height: 90%;
        overflow: hidden;
        float: left;
        opacity: 1;
        -webkit-animation-name: animateChart;
        -webkit-animation-duration: 3.4s;
    }

    @-webkit-keyframes animateChart {
        from {
            height: 0px;
        }

        to {
            height: 500px;
        }
    }

    @keyframes animateChart {
        from {
            height: 0px;
        }

        to {
            height: 500px;
        }
    }


    /**/

    /**/


    .PanelbackScroll {
        display: block;
        padding: 15px 15px 10px 15px;
        width: 100%;
        overflow: scroll;
        height: 100%;
        opacity: 1;
    }




    #myBox {
        display: none;
        text-align: left;
    }

    #loader {
        position: absolute;
        left: 100px;
        top: 15px;
        z-index: 1;
        /*margin: -75px 0 0 -75px;*/
        border: 12px solid rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        border-top: 12px solid #3498db;
        width: 50px;
        height: 50px;
        -webkit-animation: spin 1s linear infinite;
        animation: spin 1s linear infinite;
    }


    #loading {
        position: absolute;
        left: 55%;
        top: 50%;
        z-index: 1;
        margin: -75px 0 0 -75px;
        margin: -75px 0 0 -75px;
        border: 12px solid rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        border-top: 12px solid #3498db;
        width: 100px;
        height: 100px;
        -webkit-animation: spin 1s linear infinite;
        animation: spin 1s linear infinite;
    }

    @-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }


    #Page {
        min-height: 100%;
        height: 100%;
        opacity: 1;
        position: relative;
        /*-webkit-animation-name: animateBox;
    -webkit-animation-duration: 0.4s;
    animation-name: animateBox;
    animation-duration: 0.4s*/
    }

    @-webkit-keyframes animateBox {
        from {
            bottom: -100px;
            opacity: 0;
        }

        to {
            bottom: 0px;
            opacity: 1;
        }
    }

    @keyframes animateBox {
        from {
            bottom: -100px;
            opacity: 0;
        }

        to {
            bottom: 0;
            opacity: 1;
        }
    }

    hr {
        border-width: 0px;
        text-decoration: none;
    }

    .PaneltextMain {
        padding: 15px 10px 15px 15px;
        color: #4f4f4f;
        background: #f8f8f8;
        font-size: 1em;
    }


    .PanelHeaderBlank {
        padding: 0px 0px 0px 0px;
        color: #4f4f4f;
        /*background: #efefef;*/
        min-height: 50px;
        /*border-top-left-radius: 25px;
    border-top-right-radius: 25px;*/
        /*-moz-border-radius-topleft: 25px;
    -moz-border-radius-topright: 25px;*/
        font-size: 1em;
    }

    .PanelHeaderMainI {
        padding: 15px 10px 15px 15px;
        color: #4f4f4f;
        /*display: flow-root;*/
        /*background: #efefef;*/
        min-height: 70px;
        /*border-top-left-radius: 25px;
    border-top-right-radius: 25px;*/
        /*-moz-border-radius-topleft: 25px;
    -moz-border-radius-topright: 25px;*/
        font-size: 1em;
    }

    .PanelHeaderMain {
        padding: 15px 10px 15px 15px;
        color: #4f4f4f;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        /*display: flow-root;*/
        /*background: #efefef;*/
        min-height: 50px;
        /*border-top-left-radius: 25px;
    border-top-right-radius: 25px;*/
        /*-moz-border-radius-topleft: 25px;
    -moz-border-radius-topright: 25px;*/
        font-size: 1em;
    }

    .PanelHeaderMainLL {
        padding: 15px 20px 15px 15px;
        color: #4f4f4f;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        display: flex;
    }

    .PanelHeaderMainB {
        float: left;
        margin-top: -10px;
        color: #4f4f4f;
        background: #efefef;
        font-size: 1em;
    }


    .backF {
        position: fixed;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -1;
        transform: translateX(-50%) translateY(-50%);
        background-size: cover;
        transition: 1s opacity;
    }


    .LabelWaarde {
        text-decoration: none;
        text-align: center;
        display: inline-block;
        vertical-align: middle;
        padding-top: 7px;
        height: 30px;
        width: 23%;
        font-weight: 600;
        font-size: 12px;
        text-shadow: -2px -2px 6px rgba(0,0,0,0.5);
        color: #fff;
    }

    .LabelOmschrijving {
        text-decoration: none;
        margin-right: 1px;
        text-align: left;
        float: left;
        display: inline-block;
        vertical-align: middle;
        padding-top: 7px;
        padding-bottom: 7px;
        padding-left: 5px;
        padding-right: 5px;
        height: 30px;
        font-size: 12px;
        font-weight: 600;
        color: #fff;
    }

    .LabelOmschrijving2 {
        text-decoration: none;
        margin-top: 1px;
        margin-right: 1px;
        text-align: left;
        display: inline-block;
        vertical-align: middle;
        padding-top: 7px;
        padding-bottom: 7px;
        padding-left: 5px;
        padding-right: 5px;
        height: 80px;
        width: 72%;
        font-size: 12px;
        font-weight: 600;
        color: #fff;
    }

    .LabelOmschrijving3 {
        text-decoration: none;
        margin-right: 8px;
        text-align: left;
        display: inline-block;
        vertical-align: middle;
        padding-top: 7px;
        padding-bottom: 7px;
        padding-left: 5px;
        padding-right: 5px;
        height: 80px;
        width: 23%;
        font-size: 12px;
        font-weight: 600;
        color: #fff;
    }

    .LabelOmschrijvingKop {
        text-decoration: none;
        text-align: center;
        display: inline-block;
        vertical-align: middle;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 5px;
        padding-right: 5px;
        height: 50px;
        width: 100%;
        font-size: 16px;
        font-weight: 600;
        color: #000;
    }

    .Panelback33 {
        display: block;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 30px;
        padding-top: 30px;
        border: none;
        width: 32%;
        float: left;
        height: 40vh;
        overflow: hidden;
        opacity: 1;
    }


    .ImageBack2 {
        padding: 25px;
        /*width: 50px;
    Height: 50px;*/
        border: none;
        /*border-radius: 50%;*/
        position: relative;
        display: inline-block;
        overflow: hidden;
        z-index: 10;
        background-size: contain;
        background-position: 15% 15%;
        background-repeat: no-repeat;
        border: none;
        opacity: 1;
    }

    .ImageBackB {
        width: 100%;
        height: 100%;
        position: Fixed;
        top: 0px;
        left: 0px;
        list-style-type: none;
        text-decoration: none;
        color: transparent;
        background-color: #b3cdd1;
        opacity: 1;
        z-index: -1;
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: none;
    }

    .ImageBack {
        width: 100%;
        height: 100vh;
        position: relative;
        display: inline-block;
        overflow: hidden;
        top: 0px;
        left: 0px;
        list-style-type: none;
        text-decoration: none;
        color: transparent;
        background-color: #b3cdd1;
        opacity: 1;
        z-index: -1;
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: none;
        /*background-image: url(../images/Background/backEG.png);*/
    }


    /*html,
body {
    min-height: 100vh;
    margin: 0;
}

html {
    background: #090000;
    font-size: calc(1em + 3vmax);
    line-height: 1.1;
    text-align: center;
}

body {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: repeat(auto-fit, minmax(0, 12ch));
    align-items: center;
    align-content: center;
    justify-content: center;
}*/

    x-sign {
        --interval: 1s;
        display: block;
        text-shadow: 0 0 10px var(--color1), 0 0 20px var(--color2), 0 0 40px var(--color3), 0 0 80px var(--color4);
        will-change: filter, color;
        filter: saturate(60%);
        animation: flicker steps(100) var(--interval) 1s infinite;
    }

        x-sign:nth-of-type(1) {
            color: yellow;
            --color1: goldenrod;
            --color2: orangered;
            --color3: mediumblue;
            --color4: purple;
            font-family: Gruppo;
        }

        x-sign:nth-of-type(2) {
            color: lightpink;
            --color1: pink;
            --color2: orangered;
            --color3: red;
            --color4: magenta;
            font-family: Bad Script;
        }

        x-sign:nth-of-type(3) {
            color: lightyellow;
            --color1: yellow;
            --color2: lime;
            --color3: green;
            --color4: mediumblue;
            font-family: Kumar One Outline;
        }

        x-sign:nth-of-type(4) {
            color: lightyellow;
            --color1: gold;
            --color2: firebrick;
            --color3: pink;
            --color4: red;
            font-family: Londrina Outline;
        }


        x-sign:nth-of-type(5) {
            color: azure;
            --color1: azure;
            --color2: aqua;
            --color3: dodgerblue;
            --color4: blue;
            font-family: Sriracha;
        }

        x-sign:nth-of-type(6) {
            color: tomato;
            --color1: orangered;
            --color2: firebrick;
            --color3: maroon;
            --color4: darkred;
            font-family: Yellowtail;
        }

        x-sign:nth-of-type(7) {
            color: lightyellow;
            --color1: yellow;
            --color2: orange;
            --color3: brown;
            --color4: purple;
            font-family: Bad Script;
        }

        x-sign:nth-of-type(8) {
            color: yellow;
            --color1: yellow;
            --color2: lime;
            --color3: green;
            --color4: darkgreen;
            font-family: Monoton;
        }

        x-sign:nth-of-type(9) {
            color: lightyellow;
            --color1: yellow;
            --color2: gold;
            --color3: orange;
            --color4: darkred;
            font-family: Sriracha;
        }

    @keyframes flicker {
        50% {
            color: white;
            filter: saturate(200%) hue-rotate(20deg);
        }
    }


    .LabelBedrijfA {
        position: Fixed;
        font-family: Pacifico, cursive;
        top: -20px;
        left: 110px;
        font-size: 120px;
        font-weight: 500;
        color: #000;
        /*background: radial-gradient(#00ff0d, #e5ff00, #00ff0d, #e5ff00, #00ff0d);*/
    }


    .LabelBedrijfA {
        text-align: center;
        text-shadow: rgba(0, 0, 0, 0.6) 8px 3px 0px;
    }

    .LabelBedrijfB {
        position: Fixed;
        font-family: Pacifico, cursive;
        top: -18px;
        left: 117px;
        font-size: 120px;
        font-weight: 500;
        color: #fff;
        background: radial-gradient(#00ff0d, #e5ff00, #00ff0d, #e5ff00, #00ff0d);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: gradient2 5s ease infinite;
    }
    /*background: radial-gradient(#00ff0d, #e5ff00, #00ff0d, #e5ff00, #00ff0d);*/

    .LabelBedrijfB {
        text-align: center;
        /*text-shadow: rgba(0, 0, 0, 1) 5px 4px 0px;*/
    }

    @keyframes gradient2 {
        0% {
            background-size: 500% 500%;
        }


        50% {
            background-size: 100% 100%;
        }


        100% {
            background-size: 500% 500%;
        }
    }

    @keyframes flip {
        0%,80% {
            transform: rotateY(360deg);
        }
    }

    @keyframes hue-rotate1 {
        from {
            -webkit-filter: hue-rotate(0);
            -moz-filter: hue-rotate(0);
            -ms-filter: hue-rotate(0);
            filter: hue-rotate(0);
        }

        to {
            -webkit-filter: hue-rotate(360deg);
            -moz-filter: hue-rotate(360deg);
            -ms-filter: hue-rotate(360deg);
            filter: hue-rotate(360deg);
        }
    }


    .PanelboxLijstExtra {
        /*padding: 4px 4px 4px 4px;*/
        /*color: #0d99b2;*/
        padding-top: 10px;
        padding-bottom: 10px;
        /*box-shadow: 0px 1px 1px #fff;*/
        width: 100%;
        float: left;
        position: absolute;
        bottom: 0px;
        left: 0px;
        /*border-radius: 10px;*/
    }

    .boxboxKopLijst {
        text-decoration: none;
        margin-right: 8px;
        text-align: left;
        display: inline-block;
        vertical-align: middle;
        /*padding-top: 15px;
    padding-bottom: 15px;*/
        width: 63%;
        font-size: 2em;
        font-weight: 600;
    }

    .boxboxtekstLijst2 {
        text-decoration: none;
        text-align: right;
        display: inline-block;
        vertical-align: middle;
        float: right;
        /*padding-top: 15px;
    padding-bottom: 15px;*/
        width: 32%;
        font-weight: 600;
        font-size: 2em;
        /*text-shadow: -2px -2px 6px rgba(0,0,0,0.5);*/
        color: #fff;
    }

    .boxboxtekstLijst {
        text-decoration: none;
        margin-right: 8px;
        text-align: left;
        display: inline-block;
        vertical-align: middle;
        float: left;
        /*padding-top: 15px;*/
        /*padding-bottom: 15px;*/
        width: 63%;
        font-weight: 600;
        color: #fff;
    }




    .boxboxtekstLijst2K {
        text-decoration: none;
        text-align: right;
        display: inline-block;
        vertical-align: middle;
        float: left;
        /*padding-top: 15px;
    padding-bottom: 15px;*/
        width: 80px;
        font-weight: 600;
        font-size: 2em;
        /*text-shadow: -2px -2px 6px rgba(0,0,0,0.5);*/
        color: #fff;
    }

    .boxboxtekstLijst2H {
        text-decoration: none;
        text-align: right;
        display: inline-block;
        vertical-align: middle;
        float: left;
        /*padding-top: 15px;
    padding-bottom: 15px;*/
        width: 60px;
        font-weight: 600;
        font-size: 2em;
        /*text-shadow: -2px -2px 6px rgba(0,0,0,0.5);*/
        color: #fff;
    }

    .boxboxtekstLijst3K {
        text-decoration: none;
        text-align: right;
        display: inline-block;
        vertical-align: middle;
        padding-left: 10px;
        float: right;
        /*padding-top: 15px;
    padding-bottom: 15px;*/
        /*width: 15%;*/
        font-weight: 600;
        font-size: 2em;
        /*text-shadow: -2px -2px 6px rgba(0,0,0,0.5);*/
        color: #fff;
    }

    .boxboxtekstLijstK {
        text-decoration: none;
        margin-right: 8px;
        text-align: left;
        display: inline-block;
        vertical-align: middle;
        float: left;
        /*padding-top: 15px;*/
        /*padding-bottom: 15px;*/
        width: 55%;
        font-weight: 600;
        color: #fff;
    }


    .boxboxKopLogo {
        text-decoration: none;
        margin-right: 8px;
        position: inherit;
        text-align: center;
        display: inline-block;
        vertical-align: middle;
        padding-top: 55px;
        right: 0%;
        top: 0;
        left: 0%;
        height: 300px;
        width: 100%;
        font-size: 15em;
        line-height: 1em;
        font-weight: 600;
        opacity: 0.8;
        color: #000;
    }

    .boxboxKopLogo2 {
        text-decoration: none;
        margin-right: 8px;
        position: inherit;
        text-align: center;
        display: inline-block;
        vertical-align: middle;
        padding-top: 55px;
        right: 0%;
        left: 0%;
        height: 400px;
        width: 100%;
        font-size: 15em;
        line-height: 1em;
        font-weight: 600;
        opacity: 0.8;
        color: #000;
    }

    .PanelBackLijst {
        padding: 8px 8px 8px 8px;
        color: #000;
        background: #f8f8f8;
        margin: auto;
        border: solid 8px #3586a5;
        position: absolute;
        display: block;
        max-width: 1038px;
        right: 0px;
        transform: scale(1);
        z-index: 99;
        height: 100%;
        /*top: 40%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)*/
    }

    .Delijn {
        width: 100%;
        position: absolute;
        height: 40px;
        background-color: rgba(189, 138, 189, 0.40);
        border-bottom: solid 2px #B388DD;
        z-index: 99;
        font-size: 28px;
        text-align: right;
        padding-right: 10px;
        vertical-align: middle;
        color: #fff;
        text-decoration: none;
    }

        .Delijn:hover {
            color: #fff;
        }




    .PanelCell {
        width: 100px;
        max-width: 20%;
        float: left;
        height: 36px;
        border-left: solid 1px #d9d9d9;
        border-bottom: solid 1px #d9d9d9;
        position: relative;
    }

    .PanelRow {
        width: 80%;
        float: left;
        position: relative;
        height: 35px;
        border-right: solid 1px #d9d9d9;
    }

    .PanelKolom {
        width: 20%;
        float: left;
        height: 100%;
        position: relative;
    }



    .PanelRowFull {
        width: 80%;
        float: left;
        position: relative;
        height: 100%;
        border-right: solid 1px #d9d9d9;
    }

    .PanelOneTextC {
        text-decoration: none;
        text-align: center;
        display: inline-block;
        vertical-align: middle;
        padding-top: 9px;
        z-index: 999;
        float: left;
        padding-left: 8px;
        padding-right: 8px;
        height: 100%;
        width: 25%;
        font-size: 17px;
        font-weight: 600;
        color: #fff;
    }

        .PanelOneTextC:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            padding-top: 7px;
            border: 2px solid #484848;
            color: #fff;
        }

    .PanelOneTextL {
        text-decoration: none;
        text-align: left;
        display: inline-block;
        vertical-align: middle;
        padding-top: 9px;
        z-index: 999;
        float: left;
        padding-left: 15px;
        padding-right: 8px;
        height: 100%;
        width: 25%;
        font-size: 17px;
        font-weight: 600;
        color: #fff;
    }

        .PanelOneTextL:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            padding-top: 7px;
            border: 2px solid #484848;
            color: #fff;
        }

    .PanelOneText {
        text-decoration: none;
        text-align: left;
        display: inline-block;
        vertical-align: middle;
        padding-top: 9px;
        z-index: 999;
        float: left;
        padding-left: 8px;
        padding-right: 8px;
        height: 100%;
        width: 50%;
        font-size: 17px;
        font-weight: 600;
        color: #fff;
    }

        .PanelOneText:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            padding-top: 7px;
            border: 2px solid #484848;
            color: #fff;
        }

    .PanelRowOne {
        width: 100%;
        float: left;
        position: relative;
        border-right: solid 1px #d9d9d9;
    }

    .PanelCellOne {
        height: 40px;
        display: inline-block;
        width: 100%;
        z-index: 99;
    }

        .PanelCellOne:hover {
            z-index: 9999;
            /*min-height: 300px;*/
        }

    .PanelCellB {
        display: inline-block;
        width: 100px;
        z-index: 99;
        position: absolute;
    }

        .PanelCellB:hover {
            z-index: 9999;
            min-height: 300px;
        }



    .PanelTellerCell {
        color: #fff;
        border-radius: 16px;
        margin-left: -15px;
        margin-top: 5px;
        background-color: #56b273;
        height: 20px;
        width: 20px;
        box-shadow: 0px 1px 2px #000;
        text-align: center;
        vertical-align: middle;
        float: right;
        position: absolute;
        opacity: 1;
        line-height: 1.2em;
        z-index: 999;
    }

    .PanelCellKolom {
        width: 100%;
        float: left;
        height: 35px;
        border-left: solid 1px #d9d9d9;
        border-bottom: solid 1px #d9d9d9;
        position: relative;
    }


    .PanelCellTextItem {
        text-decoration: none;
        /*text-align: center;*/
        overflow: hidden;
        display: block;
        vertical-align: middle;
        border: 2px solid rgba(31, 31, 35, 0.3);
        padding-top: 19px;
        padding-bottom: 19px;
        z-index: 999;
        float: left;
        padding-left: 8px;
        padding-right: 8px;
        height: 100%;
        width: 100%;
        font-size: 17px;
        font-weight: 600;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        color: #fff;
    }

        .PanelCellTextItem:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            opacity: 0.5;
            /*padding-top: 7px;*/
            /*border: 2px solid #484848;*/
            color: #fff;
        }




    .LabelCell {
        /*float: left;*/
        /*margin-top: -4px;*/
        padding: 5px;
        border: 1px solid #676767;
        border-radius: 5px;
        text-align: left;
        background-color: #e4e4e4;
        color: #000;
        display: inline-block;
        overflow: hidden;
        /*width: 40px;*/
        font-size: 13px;
        font-weight: 800;
        /*margin-left: 150px;*/
    }


    .Agendablok {
        margin: 10px;
        position: relative;
        float: left;
        max-width: 150px;
        width: 150px;
        /*background-color:#a0a0a0;*/
        min-width: 100px;
        min-height: 150px;
        text-decoration: none;
        text-align: center;
        display: inline-block;
        font-size: 13px;
        font-weight: 600;
    }



    .Agendaitem {
        float: left;
        padding: 10px;
        margin: 10px;
        position: relative;
        border-radius: 10px;
        border: 3px solid #000;
        height: 80px;
        width: 130px;
        text-decoration: none;
        text-align: center;
        display: block;
        font-size: 13px;
        font-weight: 600;
    }

        .Agendaitem:hover {
            border: 3px solid #fff;
        }

        .Agendaitem span {
            width: 100%;
            float: left;
            text-align: left;
            font-size: 13px;
            font-weight: 600;
        }

    .Agendalabeluur {
        float: left;
        margin: 10px;
        padding: 2px;
        width: 24px;
        border-radius: 3px;
        border: 1px dashed #000;
        height: 24px;
        text-decoration: none;
        text-align: center;
        display: block;
        font-size: 16px;
        font-weight: 600;
        color: #fff;
    }

    .Agendalabeltijd {
        float: left;
        width: 82px;
        height: 48px;
        text-decoration: none;
        text-align: center;
        display: block;
        font-size: 13px;
        padding-top: 15px;
        padding-bottom: 15px;
        font-weight: 600;
        color: #fff;
    }


    .PanelCellText {
        text-decoration: none;
        text-align: center;
        display: block;
        vertical-align: middle;
        /*margin: 10px;*/
        padding-top: 9px;
        overflow: hidden;
        /*padding-bottom: 19px;*/
        z-index: 999;
        float: left;
        padding-left: 8px;
        padding-right: 8px;
        height: 100%;
        width: 100%;
        font-size: 13px;
        font-weight: 600;
        color: #fff;
    }

        .PanelCellText:hover {
            padding-top: 7px;
            border: 2px solid #484848;
            color: #fff;
        }

    .Box1 {
        width: 60px;
        height: 60px;
        padding-top: 10px;
        position: relative;
        float: left;
    }

        .Box1 img {
            width: 40px;
            height: 40px;
        }

    .Box2 {
        float: left;
        text-align: left;
        position: relative;
        width: 150px;
        font-weight: 600;
        height: 100%;
    }

    .BoxAlgemeen {
        opacity: 1;
        transition: opacity .5s ease-out;
        -moz-transition: opacity .5s ease-out;
        -webkit-transition: opacity .5s ease-out;
        -o-transition: opacity .5s ease-out;
        border-radius: 5px;
        /* border: 1px solid #e6e6e6; */
        vertical-align: middle;
        text-align: center;
        box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
        /*padding: 10px 10px 10px 10px;*/
        margin: 5px;
        display: inline-block;
        position: relative;
        line-height: 1em;
    }

        .BoxAlgemeen:hover {
            background-color: var(--mainhover);
        }


    .boxLabel1 {
        text-decoration: none;
        text-align: left;
        display: inline-block;
        vertical-align: middle;
        padding-top: 22px;
        padding-bottom: 22px;
        height: 100%;
        width: 100%;
        color: #000;
    }

    .BoxAlgemeen:hover .boxLabel1 {
        color: var(--text-color);
    }


    .itemBoxK {
        opacity: 1;
        transition: opacity .5s ease-out;
        -moz-transition: opacity .5s ease-out;
        -webkit-transition: opacity .5s ease-out;
        -o-transition: opacity .5s ease-out;
        border-radius: 5px;
        /* border: 1px solid #e6e6e6; */
        vertical-align: middle;
        text-align: center;
        box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
        /*padding: 10px 10px 10px 10px;*/
        /* margin: 5px; */
        width: 60px;
        display: inline-block;
        position: relative;
        line-height: 1em;
    }

    .itemBoxT {
        float: left;
        position: relative;
        line-height: 1em;
        width: 280px;
        border-left: 4px solid #484848;
        /*border-bottom: 2px solid #484848;*/
    }

    .PanelboxB {
        /*padding: 10px 10px 10px 10px;*/
        /*margin-left: 10px;*/
        color: #0d99b2;
        min-width: 440px;
        margin: 5px;
        float: left;
        /*border: 1px solid #b9b9b9;*/
        /*margin: 10px 10px 10px 10px;
    padding: 10px 10px 10px 10px;*/
        position: relative;
        /*padding-top: 4px;
    padding-bottom: 4px;*/
        /*padding-left: 5px;
    padding-right: 15px;*/
        /*background-color: #fff;*/
        border-radius: 10px;
        /*border-bottom : 4px solid #4b4b4b;*/
    }

    .PanelboxBB {
        margin: 10px;
        color: #0d99b2;
        min-width: 655px;
        float: left;
        /*border: 1px solid #b9b9b9;*/
        /*margin: 10px 10px 10px 10px;
    padding: 10px 10px 10px 10px;*/
        position: relative;
        padding: 4px;
        /*padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 15px;*/
        /*background-color: #fff;*/
        border-radius: 10px;
        /*border-bottom : 4px solid #4b4b4b;*/
    }

    .PanelboxRow {
        /*margin: 10px 10px 10px 10px;*/
        display: inline-flex;
        color: #0d99b2;
        border-radius: 10px;
        /*width:500px;
    height:500px;*/
        float: left;
        position: relative;
        /*border-bottom: 1px solid #d9d9d9;*/
        /*box-shadow: 0px 0px 4px #bbbbbb;*/
    }

    PanelboxSquare {
        margin: 10px 10px 10px 10px;
        /*display: inline-flex;*/
        color: #0d99b2;
        border-radius: 10px;
        width: 500px;
        height: 500px;
        float: left;
        position: relative;
        border-bottom: 1px solid #d9d9d9;
        box-shadow: 0px 0px 4px #bbbbbb;
    }

    .PanelboxBlok {
        /*margin: 10px 10px 10px 10px;*/
        color: #0d99b2;
        border-radius: 10px;
        width: 300px;
        float: left;
        position: relative;
        border-bottom: 1px solid #d9d9d9;
        /*box-shadow: 0px 0px 4px #bbbbbb;*/
    }

    .boxboxL {
        text-decoration: none;
        text-align: center;
        display: block;
        vertical-align: middle;
        height: 50px;
        border-radius: 10px;
        width: 100%;
        font-weight: 600;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        /*background-color: #0092ff;*/
        color: #000;
        font-size: 1.2em;
    }

        .boxboxL:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            /*background-color: #b388dd;*/
            border: none;
        }






    .LabelH1 {
        font-size: 1.0em;
    }

    .LabelH2 {
        font-weight: 600;
        /*margin:10px;*/
        vertical-align: middle;
        font-size: 1.3em;
        line-height: 1em;
    }


    .LabelH3 {
        font-size: 3.0em;
    }

    .LabelH4 {
        font-size: 4.0em;
    }

    .PanelbackNota {
        display: block;
        position: fixed;
        padding: 10px 10px 10px 10px;
        width: 700px;
        height: 100%;
        /*box-shadow: 0px 0px 25px rgba(0,0,0, 0.3);*/
        overflow: hidden;
        right: 600px;
        top: 0px;
        /*padding-right: 30px;*/
        /*padding-left: 30px;*/
        background: #f9faff;
        opacity: 1;
    }



    .PanelBoxTop {
        border-radius: 10px;
        /*background-color: #fff;*/
        text-align: center;
        width: 100%;
        height: 120px;
        padding-top: 10px;
        padding-bottom: 10px;
        display: inline-block;
        position: relative;
        line-height: 1em;
        /*box-shadow: 0px 0px 5px #000;*/
    }

    .PanelBoxLeft {
        border-radius: 10px;
        /*background-color: #fff;*/
        text-align: center;
        width: 100%;
        height: 120px;
        padding: 10px;
        display: inline-block;
        position: relative;
        line-height: 1em;
        /*box-shadow: 0px 0px 5px #000;*/
    }

    .PanelBox400 {
        /*border: 3px solid rgba(0, 0, 0, 0.7);*/
        border-radius: 10px;
        background-color: #fff;
        text-align: center;
        width: 200px;
        height: 200px;
        float: left;
        /*margin: 10px;*/
        /*margin-top: 20px;
    margin-left: 20px;*/
        /*height:200px;*/
        padding: 20px;
        display: inline-block;
        position: relative;
        line-height: 1em;
        box-shadow: 0 0px 0px rgba(0, 0, 0, 0.3);
    }

    .PanelBoxCenter {
        /*border: 3px solid rgba(0, 0, 0, 0.7);*/
        border-radius: 10px;
        background-color: #fff;
        text-align: center;
        width: 100%;
        /*float: left;*/
        height: 150px;
        /*padding: 10px;*/
        display: inline-block;
        position: relative;
        line-height: 1em;
        box-shadow: 0 0px 0px rgba(0, 0, 0, 0.3);
    }

    .PanelBoxCenter50 {
        /*border: 3px solid rgba(0, 0, 0, 0.7);*/
        border-radius: 10px;
        background-color: #fff;
        text-align: center;
        width: 100%;
        float: left;
        /*margin:10px;*/
        /*margin-top: 20px;
    margin-left: 20px;*/
        /*height:200px;*/
        /*padding: 20px;*/
        display: inline-block;
        position: relative;
        line-height: 1em;
        box-shadow: 0 0px 0px rgba(0, 0, 0, 0.3);
    }

    .PanelBoxLabelbottom {
        text-decoration: none;
        /*text-align: center;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    align-content: stretch;*/
        vertical-align: middle;
        width: 150px;
        padding-bottom: 20px;
        float: left;
    }


    .PanelBoxKnop {
        text-decoration: none;
        /*text-align: center;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    align-content: stretch;*/
        vertical-align: middle;
        padding-top: 50px;
        height: 120px;
        float: left;
        width: 100%;
    }

    .PanelBoxLabel {
        text-decoration: none;
        /*text-align: center;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    align-content: stretch;*/
        vertical-align: middle;
        padding-top: 20px;
        padding-bottom: 20px;
        float: left;
        width: 100%;
    }

    .Button1 {
        text-decoration: none;
        /*text-align: center;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    align-content: stretch;*/
        vertical-align: middle;
        height: 100px;
        /*font-family: 'Harmatten', sans-serif;*/
        width: 80%;
        font-weight: 600;
        font-size: 1.1em;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        /*border-radius: 10px;*/
        background-color: #000;
        color: #fff;
        border: 6px solid rgba(31, 31, 35, 0.3);
        border-radius: 15px;
        text-align: center;
        background-color: #6256a9;
    }

    .Button2 {
        text-decoration: none;
        text-align: center;
        display: inline-block;
        vertical-align: middle;
        padding-top: 15px;
        padding-bottom: 10px;
        height: 50px;
        border-radius: 15px;
        width: 100px;
        font-weight: 600;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        background-color: #4e90a4;
        color: #fff;
    }

    .PanelKassaBox {
        padding: 10px;
        width: 100%;
        float: left;
        text-align: center;
    }


    .boxboxKK {
        text-decoration: none;
        text-align: center;
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
        align-content: stretch;
        vertical-align: middle;
        margin-left: 10px;
        /*padding-top: 35px;
    padding-bottom: 35px;
    padding-left: 25px;
    padding-right: 15px;*/
        /*float: left;*/
        height: 100%;
        border: none;
        border-radius: 10px;
        width: 100%;
        font-weight: 600;
        font-size: 1.2em;
        line-height: 2em;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        background-color: #000;
        color: #fff;
    }

        .boxboxKK:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            /*background-color: #b388dd;*/
            border: none;
        }

    .boxboxKH {
        text-decoration: none;
        text-align: center;
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
        align-content: stretch;
        vertical-align: middle;
        margin-left: 10px;
        /*padding-top: 35px;
    padding-bottom: 35px;
    padding-left: 25px;
    padding-right: 15px;*/
        /*float: left;*/
        height: 100px;
        border: none;
        border-radius: 10px;
        width: 100px;
        font-weight: 600;
        font-size: 1.3em;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        background-color: #000;
        color: #fff;
    }

        .boxboxKH:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            /*background-color: #b388dd;*/
            border: none;
        }

    .boxboxK {
        text-decoration: none;
        text-align: center;
        vertical-align: middle;
        margin-left: 10px;
        height: 100%;
        border: none;
        border-radius: 10px;
        width: 100px;
        font-weight: 600;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        /*background-color: #eaeaea;*/
        color: #000;
    }

        .boxboxK:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            background-color: #b388dd;
            border: none;
        }



    .boxboxtekstA {
        text-decoration: none;
        text-align: left;
        display: inline-block;
        vertical-align: middle;
        padding-top: 15px;
        padding-bottom: 10px;
        padding-left: 15px;
        padding-right: 15px;
        height: 50px;
        width: 100%;
        font-weight: 600;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        background-color: #006cbc;
        color: #fff;
    }

        .boxboxtekstA:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            background-color: #b388dd;
            border: none;
        }


    .boxboxtekstB {
        text-decoration: none;
        text-align: left;
        display: inline-block;
        vertical-align: middle;
        border-radius: 10px;
        padding-top: 15px;
        padding-bottom: 10px;
        padding-left: 15px;
        padding-right: 15px;
        border: none;
        width: 200px;
        font-weight: 600;
        padding: 12px;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        background-color: #efefef;
        color: #4f4f4f;
    }

        .boxboxtekstB:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            /*background-color: #b388dd;*/
            border: none;
        }

    .boxboxtekstC {
        text-decoration: none;
        text-align: center;
        display: inline-block;
        vertical-align: middle;
        margin-left: 10px;
        border: 4px solid;
        height: 50px;
        border-radius: 15px;
        width: 100px;
        padding: 12px;
        font-weight: 600;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        background-color: #4e90a4;
        color: #fff;
    }



    .boxboxtekstG {
        text-decoration: none;
        text-align: left;
        display: inline-block;
        vertical-align: middle;
        padding-top: 14px;
        height: 100%;
        width: 100%;
        font-weight: 600;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        color: #fff;
    }

    .boxboxtekstT {
        text-decoration: none;
        text-align: left;
        display: inline-block;
        vertical-align: middle;
        height: 100%;
        margin-right: 40px;
        padding-top: 14px;
        width: 100%;
        font-weight: 600;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        color: #fff;
    }


    .buttonStyleF {
        background-color: #33a4b4;
        border: none;
        color: white;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 5px;
        margin-right: 5px;
        height: 50px;
        width: 100%;
        border: 1px #288b8b;
        text-decoration: none;
        font-size: 16px;
    }
    /*aanmeldingformlier*/
    /*aanmeldingformlier*/
    /*aanmeldingformlier*/

    .btnAan {
        background: var(--main-color);
        border: .2rem solid var(--main-color);
        color: var(--text-color);
        text-align: center;
        height: 70px;
        float: left;
        border: 1px solid rgba(31, 31, 35, 0.3);
        font-weight: 600;
        text-decoration: none;
        font-size: 15px;
        transition: .5s;
    }

        .btnAan:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            background: var(--hover-color);
        }

    .btnNiet {
        background: var(--niet-color);
        border: .2rem solid var(--niet-color);
        color: var(--text-color);
        text-align: center;
        height: 40px;
        float: left;
        border: 1px solid rgba(31, 31, 35, 0.3);
        font-weight: 600;
        text-decoration: none;
        font-size: 15px;
        transition: .5s;
    }

        .btnNiet:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            background: var(--hover-color);
        }


    .btnDel {
        background: var(--del-color);
        border: .2rem solid var(--del-color);
        color: var(--text-color);
        text-align: center;
        height: 40px;
        float: right;
        border: 1px solid rgba(31, 31, 35, 0.3);
        font-weight: 600;
        text-decoration: none;
        font-size: 15px;
        transition: .5s;
    }

        .btnDel:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            background: var(--hover-color);
        }

    .btnLeft {
        background: var(--main-color);
        border: .2rem solid var(--main-color);
        color: var(--text-color);
        text-align: center;
        height: 40px;
        float: left;
        border: 1px solid rgba(31, 31, 35, 0.3);
        font-weight: 600;
        text-decoration: none;
        font-size: 15px;
        transition: .5s;
    }

        .btnLeft:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            background: var(--hover-color);
        }

    .btnRight {
        background: var(--main-color);
        border: .2rem solid var(--main-color);
        color: var(--text-color);
        text-align: center;
        height: 40px;
        float: right;
        /*border: 1px #288b8b;*/
        border: 1px solid rgba(31, 31, 35, 0.3);
        font-weight: 600;
        text-decoration: none;
        font-size: 15px;
        transition: .5s;
        /*position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 15rem;
    height: 100%;
    background: var(--main-color);
    border: .2rem solid var(--main-color);
    border-radius: .8rem;
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: .1rem;
    color: var(--bg-color);
    z-index: 1;
    overflow: hidden;
    transition: .5s;*/
    }

        .btnRight:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            background: var(--hover-color);
        }

    .buttonUpload {
        background-color: var(--purple);
        border: none;
        color: white;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        margin: 10px 10px;
        display: inline-block;
        /*margin-left: 5px;
    margin-right: 5px;*/
        height: 46px;
        width: 100%;
        /*border: 1px #288b8b;*/
        border-radius: 7px;
        border: 2px solid rgba(31, 31, 35, 0.3);
        font-weight: 600;
        text-decoration: none;
        font-size: 15px;
    }

        .buttonUpload:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            background-color: var(--purplehover);
        }

    .ajax__fileupload_fileItemInfo {
        height: 60px !important;
    }

        .ajax__fileupload_fileItemInfo div.removeButton {
            background-color: var(--pinkred);
            border: none;
            color: white;
            text-align: center;
            padding-left: 10px;
            padding-right: 10px;
            padding-top: 7px;
            padding-bottom: 7px;
            /*margin-left: 5px;
    margin-right: 5px;*/
            height: 40px;
            width: 80px;
            /*border: 1px #288b8b;*/
            border-radius: 7px;
            border: 2px solid rgba(31, 31, 35, 0.3);
            font-weight: 600;
            text-decoration: none;
            font-size: 15px;
        }

            .ajax__fileupload_fileItemInfo div.removeButton:hover {
                cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
                background-color: var(--pinkredhover);
            }


.buttonStyleMid2 {
    background-color: #2488f5;
    border: none;
    color: white;
    padding: 10px;
    width:200px;
    margin-top:10px;
    text-align: center;
    text-decoration: none;
  display:inline-block;
    position: relative;
    font-weight: 600;
    font-size: 16px;
    /*text-align: Right;*/
}

    .buttonStyleMid:hover {
        cursor: pointer;
        background-color: #2d7c87;
    }


    .buttonStyle1 {
        background-color: var(--grayback);
        border: none;
        color: var(--grayfore);
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
        /*margin-left: 5px;
    margin-right: 5px;*/
        height: 40px;
        width: 100%;
        /*border: 1px #288b8b;*/
        border-radius: 7px;
        border: 1px solid rgba(31, 31, 35, 0.3);
        font-weight: 600;
        text-decoration: none;
        font-size: 13px;
    }

        .buttonStyle1:hover {
            color: var(--white);
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            background-color: var(--bluehover);
        }

    .buttonStyle1Active {
        background-color: var(--bluehover);
        border: none;
        color: var(--white);
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
        /*margin-left: 5px;
    margin-right: 5px;*/
        height: 40px;
        width: 100%;
        /*border: 1px #288b8b;*/
        border-radius: 7px;
        border: 1px solid rgba(31, 31, 35, 0.3);
        font-weight: 600;
        text-decoration: none;
        font-size: 15px;
    }



    .buttonStyle2 {
        background-color: var(--main);
        border: none;
        color: white;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
        /*margin-left: 5px;
    margin-right: 5px;*/
        height: 40px;
        width: 100%;
        /*border: 1px #288b8b;*/
        border-radius: 7px;
        border: 2px solid rgba(31, 31, 35, 0.3);
        font-weight: 600;
        text-decoration: none;
        font-size: 15px;
    }

        .buttonStyle2:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            background-color: var(--mainhover);
        }



    .buttonStyle3 {
        background-color: var(--grayback);
        border: none;
        color: var(--grayfore);
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
        /*margin-left: 5px;
    margin-right: 5px;*/
        height: 40px;
        width: 100%;
        /*border: 1px #288b8b;*/
        border-radius: 7px;
        border: 2px solid rgba(31, 31, 35, 0.3);
        font-weight: 600;
        text-decoration: none;
        font-size: 15px;
    }


        .buttonStyle3:hover {
            color: var(--white);
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            background-color: var(--red);
        }

    .buttonStyle3Active {
        background-color: var(--red);
        border: none;
        color: var(--white);
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
        /*margin-left: 5px;
    margin-right: 5px;*/
        height: 40px;
        width: 100%;
        /*border: 1px #288b8b;*/
        border-radius: 7px;
        border: 1px solid rgba(31, 31, 35, 0.3);
        font-weight: 600;
        text-decoration: none;
        font-size: 15px;
    }


    .buttonStyle4 {
        background-color: var(--pinkred);
        border: none;
        color: white;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
        /*margin-left: 5px;
    margin-right: 5px;*/
        height: 40px;
        width: 100%;
        /*border: 1px #288b8b;*/
        border-radius: 7px;
        border: 2px solid rgba(31, 31, 35, 0.3);
        font-weight: 600;
        text-decoration: none;
        font-size: 15px;
    }


        .buttonStyle4:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            background-color: var(--pinkredhover);
        }


    .buttonStyle5 {
        background-color: #33a4b4;
        border: none;
        border-radius: 10px;
        position: relative;
        color: white;
        text-align: center;
        font-weight: 700;
        height: 150px;
        border: 1px #288b8b;
        max-width: 200px;
        text-decoration: none;
        font-size: 16px;
        margin: 0;
    }


        .buttonStyle5:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            background-color: #B388DD;
        }

    .buttonStyle6 {
        background-color: var(--blue);
        border: none;
        color: white;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
        /*margin-left: 5px;
    margin-right: 5px;*/
        height: 40px;
        width: 100%;
        /*border: 1px #288b8b;*/
        border-radius: 7px;
        border: 2px solid rgba(31, 31, 35, 0.3);
        font-weight: 600;
        text-decoration: none;
        font-size: 15px;
    }


        .buttonStyle6:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            background-color: var(--bluehover);
        }

    .buttonStyle7 {
        background-color: var(--purple);
        border: none;
        color: white;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
        /*margin-left: 5px;
    margin-right: 5px;*/
        height: 40px;
        width: 100%;
        /*border: 1px #288b8b;*/
        border-radius: 7px;
        border: 2px solid rgba(31, 31, 35, 0.3);
        font-weight: 600;
        text-decoration: none;
        font-size: 15px;
    }


        .buttonStyle7:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            background-color: var(--purplehover);
        }



    .labelstyle1 {
        color: #0c5b5b;
        font-size: 40px;
        font-weight: 900;
    }

    .labelstyle2 {
        color: #303d3d;
        font-size: 25px;
        font-weight: 700;
    }

    .labelstyle3 {
        color: #222727;
        font-size: 20px;
        font-style: italic;
        font-weight: 700;
    }

    .buttonStyle2width {
        background-color: #33a4b4;
        border: none;
        color: white;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
        /*margin-left: 5px;
    margin-right: 5px;*/
        height: 40px;
        /*border: 1px #288b8b;*/
        border: 2px solid rgba(31, 31, 35, 0.3);
        font-weight: 600;
        text-decoration: none;
        font-size: 15px;
    }

        .buttonStyle2width:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            background-color: #09788b;
        }
    /*aanmeldingformlier*/
    /*aanmeldingformlier*/
    /*aanmeldingformlier*/

    .buttonStyleK {
        background-color: #33a4b4;
        border: none;
        color: white;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 2px;
        padding-bottom: 2px;
        float: right;
        /*margin-left: 5px;
    margin-right: 5px;*/
        height: 30px;
        /*width: 100%;*/
        /*border: 1px #288b8b;*/
        border-radius: 5px;
        border: 1px solid rgba(31, 31, 35, 0.3);
        font-weight: 600;
        text-decoration: none;
        font-size: 14px;
    }

        .buttonStyleK:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            background-color: #B388DD;
        }


    .buttonStyleNum {
        background-color: rgb(34, 34, 38);
        border: none;
        border-radius: 10px;
        color: white;
        text-align: center;
        height: 80px;
        width: 80px;
        text-decoration: none;
        font-size: 16px;
        font-weight: 700;
    }

    .buttonStyleA {
        background-color: #000;
        border: none;
        border-radius: 10px;
        color: white;
        text-align: center;
        height: 70px;
        width: 70px;
        text-decoration: none;
        font-size: 16px;
        font-weight: 700;
    }

    .buttonStyleStudie {
        background-color: #484848;
        border: none;
        color: white;
        border-radius: 7px;
        min-width: 180px;
        margin-right: 10px;
        text-align: center;
        height: 56px;
        font-weight: 600;
        text-decoration: none;
        font-size: 14px;
        border: 4px solid rgba(31, 31, 35, 0.3);
    }

        .buttonStyleStudie:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            background-color: #B388DD;
        }

    .buttonStyleHoofd {
        background-color: #33a4b4;
        border: none;
        color: white;
        border-radius: 7px;
        min-width: 180px;
        margin-right: 10px;
        text-align: center;
        height: 50px;
        font-weight: 600;
        text-decoration: none;
        font-size: 14px;
    }

        .buttonStyleHoofd:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            background-color: #B388DD;
        }

    .boxbox {
        width: 70px;
        height: 60px;
        padding-right: 10px;
        position: relative;
        float: left;
        margin-right: 10px;
    }

    .boxbox2 {
        float: left;
        text-align: left;
        position: relative;
        width: 150px;
        font-weight: 600;
        height: 100%;
    }

    .FootLijst {
        /*height: 60px;
    width: 100%;
    z-index: 997;
    opacity: 1;
    position: relative;
    left: 0;*/
        /*float: left;*/
        /*left: 80px;*/
        height: 60px;
        width: 100%;
        z-index: 100;
        opacity: 1;
        /*top: 80px;*/
        left: 420px;
        bottom: 0;
        background: rgba(31, 31, 35, 0.8);
        /*border-bottom: 2px solid #35363a;
    box-shadow: 0px 0px 3px #000;*/
        position: fixed;
    }

    .HeaderLL {
        padding: 0px 0px 0px 10px;
        left: 0px;
        height: 85px;
        min-width: 500px;
        z-index: 100;
        opacity: 1;
        /* top: 80px; */
        /* background: rgba(31, 31, 35, 0.8); */
        position: relative;
    }

    .HeaderRes {
        height: 50px;
        width: 100px;
        z-index: 999;
        opacity: 1;
        /*margin-top: 30px;
    margin-left: 110px;*/
        right: 0px;
        margin-top: 30px;
        position: fixed;
    }

    .HeaderLLknop {
        height: 85px;
        /*left: 30px;*/
        padding: 25px 0px 0px 0px;
        /*margin-bottom: 10px;*/
        width: 270px;
        z-index: 9;
        opacity: 1;
        /*margin-top: 30px;
    margin-left: 110px;*/
        position: relative;
    }

    .PanelStudie {
        float: left;
        padding: 25px 0px 0px 0px;
        /*max-width: 200px;*/
        text-align: left;
        position: relative;
    }

    .PanelNav {
        padding: 25px 0px 0px 6px;
        /*width: 140px;*/
        float: left;
        height: 50px;
        text-align: left;
        position: relative;
    }

    .buttonstyleNavLL {
        text-decoration: none;
        border-radius: 7px;
        text-align: left;
        vertical-align: middle;
        padding: 9px;
        width: 56px;
        height: 56px;
        margin-left: 12px;
        float: left;
        background-color: #B388DD;
        color: #fff;
        border: 4px solid rgba(31, 31, 35, 0.3);
    }

        .buttonstyleNavLL:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            background-color: #8459ad;
        }

    .buttonstyleNavLLL {
        text-decoration: none;
        border-radius: 7px;
        text-align: left;
        vertical-align: middle;
        margin-top: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 40%;
        padding-right: 40%;
        /*height: 54px;*/
        float: left;
        background-color: #B388DD;
        color: #fff;
        border: 4px solid rgba(31, 31, 35, 0.3);
    }

        .buttonstyleNavLLL:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            background-color: #8459ad;
        }



    .buttonstyleNav {
        text-decoration: none;
        border-radius: 7px;
        text-align: left;
        vertical-align: middle;
        padding: 9px;
        height: 56px;
        width: 56px;
        margin-right: 10px;
        float: left;
        font-weight: 600;
        font-size: 14px;
        background-color: #3586A5;
        color: #fff;
        border: 4px solid rgba(31, 31, 35, 0.3);
    }

        .buttonstyleNav:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            background-color: #246e8a;
        }

    .buttonstyleNavP {
        text-decoration: none;
        border-radius: 7px;
        text-align: left;
        /*height: 54px;*/
      
        border: 4px solid rgba(31, 31, 35, 0.3);
        vertical-align: middle;
        padding: 9px;
        margin-left: 10px;
        float: right;
        background-color: #56b273;
        color: #fff;
    }

        .buttonstyleNavP:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            background-color: #53d079;
        }

.buttonstyleNavZ {
    text-decoration: none;
    border-radius: 7px;
    text-align: left;
    /*height: 54px;*/
    margin-top: -5px;
    border: 4px solid rgba(31, 31, 35, 0.3);
    vertical-align: middle;
    padding: 9px;
    margin-left: 10px;
    
    background-color: #56b273;
    color: #fff;
}

    .buttonstyleNavZ:hover {
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        background-color: #47bf6d;
    }



.buttonstyleNavB {
    text-decoration: none;
    border-radius: 7px;
    text-align: left;
    /*height: 54px;*/
    margin-top: -5px;
    border: 4px solid rgba(31, 31, 35, 0.3);
    vertical-align: middle;
    padding: 9px;
    margin-left: 10px;
    float: right;
    background-color: #3586a5;
    color: #fff;
}

    .buttonstyleNavB:hover {
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        background-color: #30738d;
    }

    .buttonstyleNavMode {
        text-decoration: none;
        text-align: left;
        vertical-align: middle;
        text-align: center;
        padding: 15px;
        width: 120px;
        /*height: 62px;*/
        margin-left: 10px;
        float: left;
        background-color: #B388DD;
        color: #fff;
        border: 4px solid rgba(31, 31, 35, 0.3);
        border-radius: 7px;
        font-weight: 600;
        font-size: 14px;
    }

        .buttonstyleNavMode:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            background-color: #2f7a47;
        }

    .buttonstyleNavTdl {
        text-decoration: none;
        border-radius: 7px;
        text-align: center;
        vertical-align: middle;
        padding: 14px;
        height: 56px;
        width: 56px;
        margin-left: 10px;
        margin-right: 4px;
        float: right;
        font-weight: 600;
        font-size: 14px;
        background-color: #56b273;
        color: #fff;
        border: 4px solid rgba(31, 31, 35, 0.3);
    }

        .buttonstyleNavTdl:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            background-color: #2f7a47;
        }

    .buttonstyleNavLes {
        text-decoration: none;
        border-radius: 3px;
        text-align: left;
        vertical-align: middle;
        padding: 8px 10px 8px 10px;
        /*margin-left: 10px;
    margin-right: 4px;*/
        float: right;
        position: relative;
        background-color: #56b273;
        color: #fff;
        /*border: 4px solid rgba(31, 31, 35, 0.3);*/
    }

        .buttonstyleNavLes:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            background-color: #B388DD;
        }



    .boxboxImage {
        text-decoration: none;
        text-align: left;
        vertical-align: middle;
        padding-top: 14px;
        padding-left: 10px;
        color: #fff;
    }

    .boxboxImage2 {
        text-decoration: none;
        width: 48px;
        height: 48px;
        text-align: left;
        vertical-align: middle;
        padding-top: 12px;
        padding-left: 10px;
        color: #fff;
    }

        .boxboxImage2:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        }

    .ImageKnop {
        width: 52px;
        height: 52px;
        color: #fff;
        text-decoration: none;
        border-radius: 7px;
        text-align: left;
        /* height: 54px; */
        margin-top: -5px;
        /*border: 4px solid rgba(31, 31, 35, 0.3);*/
        vertical-align: middle;
        padding: 7px;
        margin-right: 10px;
        background-color: rgba(31, 31, 35, 0.6);
        color: #fff;
    }


        .ImageKnop:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        }





    .PanelKnopBox {
        width: 100%;
        height: 110px;
        color: #fff;
        text-decoration: none;
        text-align: left;
        float: left;
        padding-left: 4px;
        vertical-align: middle;
        margin-right: 10px;
        color: #fff;
    }


    .PanelKnopBack:hover {
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
    }


    .PanelKnopBack {
        width: 190px;
        height: 160px;
        color: #fff;
        text-decoration: none;
        border-radius: 7px;
        text-align: left;
        float: left;
        /* height: 54px; */
        margin-left: 5px;
        /*border: 4px solid rgba(31, 31, 35, 0.3);*/
        vertical-align: middle;
        padding-top: 80px;
        padding-left: 29px;
        padding-right: 0px;
        /*background-color: rgba(31, 31, 35, 0.6);*/
        background-size: cover;
        background-position: 70% 20%;
        background-repeat: none;
        background-image: url(../images/iconsM/calendar_week.svg);
    }


        .PanelKnopBack:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        }

    .Panel50 {
        float: left;
        width: 50%;
    }

    .PanelKnopBack .Panel50 .DatumDag {
        height: 50px;
        color: #000;
        font-weight: 600;
        background-color: rgba(31, 31, 35, 0.0);
        border: 0px solid #e4e4e4;
        width: 100%;
        text-align: center;
        /* border: solid 1px #b388dd; */
        border-radius: 0px;
        box-shadow: none;
        box-sizing: border-box;
        font-family: inherit;
        font-size: 50px;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
    }



    .PanelLabelsmall {
        color: #fff;
        text-decoration: none;
        border-radius: 7px;
        text-align: left;
        float: left;
        /* height: 54px; */
        /*border: 4px solid rgba(31, 31, 35, 0.3);*/
        vertical-align: middle;
        color: #000;
        /*background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    background-image: url(../images/iconsM/calendar_week.svg);*/
    }


        .PanelLabelsmall:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        }


    .PanelKnopBacksmall {
        margin-left: 5px;
        color: #fff;
        height: 70px;
        width: 80px;
        text-decoration: none;
        border-radius: 7px;
        text-align: left;
        float: left;
        /* height: 54px; */
        /*border: 4px solid rgba(31, 31, 35, 0.3);*/
        vertical-align: middle;
        color: #000;
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: none;
        background-image: url(../images/iconsM/calendar_week.svg);
    }


        .PanelKnopBacksmall:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        }

    /*.PanelKnopBacksmall .DatumDag {
        height: 34px;
        color: #000;
        font-weight: 600;
        padding: 6px 5px;
        background-color: rgba(31, 31, 35, 0.0);
        border: 0px solid #e4e4e4;
        width: 100%;
        text-align: center;
      
        border-radius: 0px;
        box-shadow: none;
        box-sizing: border-box;
        font-family: inherit;
        font-size: 30px;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
    }*/


    .PanelLabelsmall .DatumMaand {
        height: 34px;
        color: #000;
        font-weight: 600;
        padding: 6px 5px;
        background-color: rgba(31, 31, 35, 0.0);
        border: 0px solid #e4e4e4;
        width: 100%;
        text-align: center;
        /* border: solid 1px #b388dd; */
        border-radius: 0px;
        box-shadow: none;
        box-sizing: border-box;
        font-family: inherit;
        font-size: 25px;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
    }


    .PanelLabelsmall .DatumJaar {
        height: 34px;
        color: #000;
        font-weight: 600;
        padding: 6px 5px;
        background-color: rgba(31, 31, 35, 0.0);
        border: 0px solid #e4e4e4;
        width: 100%;
        text-align: center;
        /* border: solid 1px #b388dd; */
        border-radius: 0px;
        box-shadow: none;
        box-sizing: border-box;
        font-family: inherit;
        font-size: 15px;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
    }

    .boxboxtekst {
        text-decoration: none;
        text-align: left;
        display: inline-block;
        vertical-align: middle;
        padding-top: 22px;
        height: 100%;
        width: 100%;
        color: #fff;
    }

        .boxboxtekst:hover {
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        }

    .BoxAM {
        text-align: center;
        height: 60px;
        color: #fff;
        position: relative;
        opacity: 1;
        transition: opacity .5s ease-out;
        -moz-transition: opacity .5s ease-out;
        -webkit-transition: opacity .5s ease-out;
        -o-transition: opacity .5s ease-out;
        /*border-top: 2px solid #484848;
    display:block;*/
    }

        .BoxAM:hover {
            opacity: 1;
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            animation: 0.4s fadeIn 0.1s;
            animation-name: boxTransitionScale;
            animation-duration: 0.2s;
            animation-fill-mode: forwards;
        }


    .BoxAL {
        text-align: center;
        height: 60px;
        color: #fff;
        position: relative;
        opacity: 0.9;
        transition: opacity .5s ease-out;
        -moz-transition: opacity .5s ease-out;
        -webkit-transition: opacity .5s ease-out;
        -o-transition: opacity .5s ease-out;
    }

        .BoxAL:hover {
            opacity: 1;
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            animation: 0.4s fadeIn 0.1s;
            animation-name: boxTransitionScale;
            animation-duration: 0.2s;
            animation-fill-mode: forwards;
        }

    .boxBlue {
        text-align: center;
        height: 155px;
        background-color: #006cbc;
        color: #fff;
        opacity: 1;
        position: relative;
    }

    .BoxGroep {
        text-align: center;
        height: 40px;
        width: 240px;
        color: #fff;
        position: relative;
        opacity: 0.9;
        transition: opacity .5s ease-out;
        -moz-transition: opacity .5s ease-out;
        -webkit-transition: opacity .5s ease-out;
        -o-transition: opacity .5s ease-out;
    }


    .BoxAL:hover {
        opacity: 1;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        animation: 0.4s fadeIn 0.1s;
        animation-name: boxTransitionScale;
        animation-duration: 0.2s;
        animation-fill-mode: forwards;
    }

    .BoxFloat {
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        width: 100%;
        border: none;
        height: 100%;
        position: absolute;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        top: 0px;
        left: 0px;
        opacity: 0;
    }

.PanelboxFloatT {
    width: 164px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 6px 10px;
    color: #0d99b2;
    position: relative;
    border-radius: 10px;
    /* optional subtle hover feedback */
    transition: transform .15s ease, box-shadow .15s ease;
}

    .PanelboxFloatT:hover,
    .PanelboxFloatT:focus-within {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,.08);
    }

/* The image “tile” (you’re using background-image inline) */
.ImageLZ {
    width: 164px;
    height: 164px;
    border-radius: 50%;
    display: block;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; /* fix: use no-repeat */
    border: 3px solid #484848;
    opacity: 1;
    transition: opacity .15s ease, transform .15s ease;
    position: relative; /* keep if you later add overlays */
    z-index: 1; /* above the label if needed */
}

.PanelboxFloatT:hover .ImageLZ,
.PanelboxFloatT:focus-within .ImageLZ {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* The label (now below the image, centered) */
.BoxFloatT {
    width: 100%;
    border: none;
    background-color: transparent;
    font-size: 0.95em;
    font-weight: bold; /* you had inline bold; keep it here */
    padding: 0;
    position: static; /* no absolute positioning */
    text-align: center;
    cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
    color: #111; /* readable on white */
    opacity: 1; /* always visible under the image */
    z-index: auto;
    /* tidy line-height for multi-word names */
    line-height: 1.25;
    /* prevent layout jump if names wrap */
    min-height: 1.25em;
}

/* Optional: slight color change on hover/focus for feedback */
.PanelboxFloatT:hover .BoxFloatT,
.PanelboxFloatT:focus-within .BoxFloatT {
    color: #0d99b2;
    text-decoration: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .PanelboxFloatT,
    .ImageLZ {
        transition: none;
    }
}


    .BoxGreen {
        text-align: center;
        height: 155px;
        background-color: #56b273;
        color: #fff;
        opacity: 1;
        position: relative;
    }

    .BoxYellow {
        text-align: center;
        height: 155px;
        border: 6px solid rgba(31, 31, 35, 0.3);
        border-radius: 15px;
        background-color: #f6cd61;
        color: #fff;
        opacity: 1;
        position: relative;
    }

    .BoxOrange {
        text-align: center;
        height: 155px;
        border: 6px solid rgba(31, 31, 35, 0.3);
        border-radius: 15px;
        background-color: #f58840;
        color: #fff;
        opacity: 1;
        position: relative;
    }

    .BoxThema {
        text-align: center;
        height: 155px;
        border: 6px solid rgba(14, 14, 14, 0.3);
        border-radius: 15px;
        color: #fff;
        opacity: 1;
        position: relative;
    }

    .BoxPink {
        border: 6px solid rgba(31, 31, 35, 0.3);
        text-align: center;
        border-radius: 15px;
        height: 157px;
        background-color: #FF5050;
        color: #fff;
        opacity: 1;
        position: relative;
    }



    .BoxPurple {
        text-align: center;
        height: 155px;
        border: 6px solid rgba(31, 31, 35, 0.3);
        border-radius: 15px;
        background-color: #B388DD;
        color: #fff;
        opacity: 1;
        position: relative;
    }




    .deIframe {
        width: 100%;
        z-index: 100;
        position: relative;
        overflow-x: hidden;
        overflow-y: hidden;
        opacity: 1;
        border-radius: 17px;
        -webkit-border-radius: 17px;
        -o-border-radius: 17px;
        height: calc(100% - 50px);
        /*background-color: #f8f8f8;*/
    }

    .deIframeA {
        background-color: #f8f8f8;
        width: 100%;
        display: block;
        position: relative;
        height: 100%;
        overflow: hidden;
        overflow-x: hidden;
        overflow-y: hidden;
        opacity: 1;
    }

    .deIframeK {
        width: 100%;
        display: block;
        position: relative;
        height: 100%;
        overflow: hidden;
        overflow-x: hidden;
        overflow-y: hidden;
        opacity: 1;
    }

    .deIframePW {
        width: 100%;
        position: relative;
        height: 90%;
        overflow: hidden;
        overflow-x: hidden;
        overflow-y: hidden;
        opacity: 1;
    }

    .PanelGeb {
        color: #000;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        margin: auto;
        float: left;
        position: absolute;
        max-width: 80%;
        height: 90%;
        top: 75%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
    }

    .PanelGebBox {
        color: #000;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        margin: auto;
        float: left;
        text-align: center;
        z-index: 50;
        position: relative;
    }

    .PanelGebBoxS {
        color: #000;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        margin: auto;
        text-align: center;
        position: absolute;
        max-width: 80%;
        height: 100%;
        top: 58%;
        right: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
    }

    .PanelWindowAlgemeen {
        color: #000;
        /*background: #f8f8f8;*/
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        /*border-radius: 17px;*/
        /*border: solid 8px #3586a5;*/
        position: absolute;
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
    }

    .PanelWindowPurpleBox {
        color: #000;
        background: #f8f8f8;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        border-radius: 17px;
        border: solid 8px #b388dd;
        position: absolute;
        width: 88%;
        height: 88%;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
    }

    .PaneltextPurpleBox {
        color: #000;
        background: #f8f8f8;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        border-radius: 17px;
        border: solid 8px #b388dd;
        position: absolute;
        width: 80%;
        height: 90%;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
    }

    .PaneltextBlueA {
        color: #000;
        background: #f8f8f8;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        border: solid 8px #3586a5;
        position: absolute;
        width: 500px;
        height: 75%;
        top: 45%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
    }

    /*.image1 {
    height: 50px;
   
}*/

    .boxImageA {
        text-decoration: none;
        text-align: left;
        vertical-align: middle;
        padding-top: 8px;
        /*padding-left: 10px;*/
        color: #fff;
    }

    .boxLabel {
        text-decoration: none;
        text-align: left;
        display: inline-block;
        vertical-align: middle;
        height: 100%;
        font-size: 18px;
        padding-top: 13px;
        width: 100%;
        font-weight: 900;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        color: #fff;
    }

        .boxLabel:hover {
            color: #B388DD;
        }

    .boxboxA {
        width: 70px;
        height: 100%;
        padding: 15px 5px 15px 5px;
        position: relative;
        float: left;
        /*border-left: 2px solid rgba(31, 31, 35, 0.8);*/
    }

    @media screen and (max-width: 768px) {


        .boxboxA {
            width: 50px;
        }
    }

    .boxbox2A {
        float: left;
        height: 100%;
        text-align: left;
        position: relative;
        padding: 15px 10px 10px 10px;
        width: 125px;
        border-right: 2px solid rgba(31, 31, 35, 0.8);
        font-size: 14px;
        font-weight: 600;
        height: 100%;
    }

    @media screen and (max-width: 720px) {

        .boxbox2A {
            display: none;
        }
    }


    .boxbox3A {
        float: left;
        height: 100%;
        text-align: left;
        padding: 15px 10px 10px 15px;
        position: relative;
        padding: 15px 10px 10px 15px;
        font-size: 14px;
        font-weight: 600;
    }

    @media screen and (max-width: 1340px) {

        .boxbox3A {
            display: none;
        }
    }

    .boxLabel3 {
        text-decoration: none;
        text-align: right;
        display: inline-block;
        vertical-align: middle;
        height: 100%;
        font-size: 18px;
        padding-top: 13px;
        width: 100%;
        font-weight: 900;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        color: #fff;
    }

        .boxLabel3:hover {
            color: #B388DD;
        }


    .BoxHeaderLogo {
        text-align: center;
        height: 80px;
        float: left;
        color: #fff;
        opacity: 1;
        width: 270px;
        position: relative;
        opacity: 0.9;
        transition: opacity .5s ease-out;
        -moz-transition: opacity .5s ease-out;
        -webkit-transition: opacity .5s ease-out;
        -o-transition: opacity .5s ease-out;
        background-repeat: no-repeat;
        background-position: 40% 50%;
        background-image: url(../images/LOGOS/jmklogo.png);
    }



    .BoxHeader1S {
        text-align: center;
        height: 80px;
        color: #fff;
        opacity: 1;
        display: inline-block;
        /*float: left;
    position: relative;*/
        opacity: 0.9;
        border-bottom: 4px solid #B388DD;
        transition: opacity .5s ease-out;
        -moz-transition: opacity .5s ease-out;
        -webkit-transition: opacity .5s ease-out;
        -o-transition: opacity .5s ease-out;
    }

        .BoxHeader1S:hover {
            opacity: 1;
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        }

        .BoxHeader1S .boxLabel {
            color: #B388DD;
        }


    .BoxHeaderLogo {
        text-align: center;
        height: 80px;
        float: left;
        color: #fff;
        opacity: 1;
        width: 70px;
        position: relative;
        opacity: 1;
        transition: opacity .5s ease-out;
        -moz-transition: opacity .5s ease-out;
        -webkit-transition: opacity .5s ease-out;
        -o-transition: opacity .5s ease-out;
        background-repeat: no-repeat;
        background-position: 40% 50%;
        background-size: 120px;
        background-image: url(../images/LOGOS/logoSF.png);
    }

        .BoxHeaderLogo:hover {
            opacity: 1;
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            animation: 0.4s fadeIn 0.1s;
            animation-name: boxTransitionScale;
            animation-duration: 0.2s;
            animation-fill-mode: forwards;
        }

    @media screen and (max-width: 940px) {

        .BoxHeaderLogo {
            width: 0px;
        }
    }


    @media screen and (max-width: 720px) {


        .BoxHeaderLogo {
            width: 0px;
        }
    }

    @media screen and (max-width: 480px) {


        .BoxHeaderLogo {
            width: 0px;
        }
    }

    .BoxHeaderLL {
        text-align: center;
        height: 80px;
        color: #fff;
        opacity: 1;
        /*float: left;*/
        position: relative;
        opacity: 0.9;
        transition: opacity .5s ease-out;
        -moz-transition: opacity .5s ease-out;
        -webkit-transition: opacity .5s ease-out;
        -o-transition: opacity .5s ease-out;
    }

        .BoxHeaderLL:hover {
            opacity: 1;
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            animation: 0.4s fadeIn 0.1s;
            animation-name: boxTransitionScale;
            animation-duration: 0.2s;
            animation-fill-mode: forwards;
        }

    @media screen and (max-width: 768px) {


        .BoxHeaderLL {
            display: inline-block;
        }
    }

    @media screen and (min-width: 768px) {


        .BoxHeaderLL {
            display: none !important;
        }
    }



    .BoxHeader1 {
        text-align: center;
        height: 80px;
        color: #fff;
        opacity: 1;
        display: inline-block;
        /*float: left;
    position: relative;*/
        opacity: 0.9;
        transition: opacity .5s ease-out;
        -moz-transition: opacity .5s ease-out;
        -webkit-transition: opacity .5s ease-out;
        -o-transition: opacity .5s ease-out;
    }

        .BoxHeader1:hover {
            opacity: 1;
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            animation: 0.4s fadeIn 0.1s;
            animation-name: boxTransitionScale;
            animation-duration: 0.2s;
            animation-fill-mode: forwards;
        }

    @media screen and (max-width: 768px) {

        #ContentPlaceHolder1_BH0 {
            display: none !important;
        }
    }


    .BoxHeader2 {
        text-align: center;
        height: 80px;
        float: right;
        color: #fff;
        opacity: 1;
        position: relative;
        opacity: 0.9;
        transition: opacity .5s ease-out;
        -moz-transition: opacity .5s ease-out;
        -webkit-transition: opacity .5s ease-out;
        -o-transition: opacity .5s ease-out;
    }

        .BoxHeader2:hover {
            opacity: 1;
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            animation: 0.4s fadeIn 0.1s;
            animation-name: boxTransitionScale;
            animation-duration: 0.2s;
            animation-fill-mode: forwards;
        }

    .BoxHeader0 {
        text-align: center;
        height: 80px;
        float: right;
        color: #fff;
        opacity: 1;
        padding-left: 13px;
        position: relative;
        opacity: 0.9;
        transition: opacity .5s ease-out;
        -moz-transition: opacity .5s ease-out;
        -webkit-transition: opacity .5s ease-out;
        -o-transition: opacity .5s ease-out;
    }

        .BoxHeader0:hover {
            opacity: 1;
            cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
            animation: 0.4s fadeIn 0.1s;
            animation-name: boxTransitionScale;
            animation-duration: 0.2s;
            animation-fill-mode: forwards;
        }

    .BoxHeaderM {
        height: 80px;
    }

    .PanelKop {
        padding: 4px 4px 4px 4px;
        color: #56b273;
        background: #efefef;
        height: 50px;
        text-align: center;
        font-size: 1em;
    }

    .buttonStyleFree {
        background-color: #33a4b4;
        border: none;
        border-radius: 5px;
        color: white;
        text-align: center;
        width: 100%;
        height: 39px;
        border: 1px #288b8b;
        text-decoration: none;
        font-size: 16px;
    }

    .buttonStyleEEmail {
        background-color: #33a4b4;
        border: none;
        color: white;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
        height: 39px;
        float: right;
        border: 1px #288b8b;
        text-decoration: none;
        font-size: 16px;
    }


    .PanelFill {
        color: #000;
        background: #f8f8f8;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        border-radius: 17px;
        /*border: solid 8px #3a464a;*/
        position: fixed;
        /*width: 1000px;*/
        height: 100%;
        width: 100%;
        /*max-height: 900px;*/
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
    }

    .PaneltextBlueB {
        color: #000;
        background: #f8f8f8;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        /*border-radius: 17px;*/
        border: solid 8px #e7e7e7;
        position: absolute;
        max-width: 1000px;
        height: 95%;
        /*max-height: 900px;*/
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
    }

    .PaneltextBlueG {
        padding: 8px 8px 8px 8px;
        color: #000;
        background: #f8f8f8;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        display: block;
        margin: auto;
        border: solid 8px #e7e7e7;
        /*border-radius: 17px;*/
        position: absolute;
        display: block;
        max-width: 1050px;
        z-index: 99;
        /*height: 80%;*/
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
    }

    .PanelFrameYellow {
        color: #000;
        background: #f8f8f8;
        border: solid 10px #fec956;
        border-radius: 17px;
        height: 100%;
        overflow: hidden;
        width: 100%;
    }

    .PaneltextOrangeVakken {
        padding: 10px 5px 10px 10px;
        color: #000;
        background: #f8f8f8;
        border-right: solid 1px #d9d9d9;
        border-left: solid 1px #d9d9d9;
        border-top: solid 1px #d9d9d9;
        font-size: 0.8em;
    }

    .PaneltextOrangeVakkenU {
        padding: 10px 0px 10px 10px;
        color: #000;
        background: #f8f8f8;
        border-right: solid 1px #d9d9d9;
        border-left: solid 1px #d9d9d9;
        border-bottom: solid 1px #d9d9d9;
        border-top: solid 1px #d9d9d9;
        font-size: 0.8em;
    }

    .PanelBoxBlueC {
        color: #000;
        background: #f8f8f8;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        border-right: solid 1px #d9d9d9;
        border-bottom: solid 1px #d9d9d9;
        border-left: solid 8px #3586a5;
        position: absolute;
        max-width: 2000px;
        min-height: 100%;
        max-height: 1700px;
        top: 45%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
    }



    .PanelWindowYellow {
        color: #000;
        background: #f8f8f8;
        border: solid 8px #fec956;
        position: relative;
        margin: auto;
        display: block;
        width: 500px;
        height: 90%;
        left: 0;
        right: 0;
        top: 80px;
        bottom: 0;
        z-index: 99;
    }


    .PanelWindowPurple {
        color: #000;
        border: solid 8px #b388dd;
        background: #f8f8f8;
        position: relative;
        margin: auto;
        display: block;
        width: 500px;
        height: 90%;
        left: 0;
        right: 0;
        top: 40px;
        bottom: 0;
        z-index: 99;
    }



    .PanelWindowOrange {
        color: #000;
        background: #f8f8f8;
        border: solid 8px #ff8750;
        position: relative;
        display: block;
        margin: auto;
        width: 500px;
        height: 90%;
        left: 0;
        right: 0;
        top: 80px;
        bottom: 0;
        z-index: 99;
    }

    .PanelEmailInner {
        color: #000;
        display: block;
        margin: auto;
        height: 400px;
        position: relative;
        background: #f8f8f8;
        overflow: hidden;
        left: 0;
        right: 0;
        top: 20%;
        bottom: 0;
        border: solid 8px #3586a5;
        z-index: 1;
        width: 80%;
    }


    .labelitEmail {
        font-size: 1.2em;
        line-height: 1.3;
        font-weight: 300;
        font-family: 'Calibri', serif;
        color: #000000;
        margin-top: 20px;
        margin-bottom: 20px;
        text-align: center;
    }

    .itemMainEmail {
        color: #000;
        background-color: rgba(255, 255, 255, 0.3);
        margin: auto;
        position: Fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 99;
    }

    .PanelEmail {
        height: 25px;
        text-align: left;
        position: relative;
        z-index: 900;
    }

    .emailLabel {
        padding: 5px 8px 5px 8px;
        border: 2px solid rgba(31, 31, 35, 0.8);
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        background-color: #56b273;
        height: 34px;
        width: 40px;
        text-align: center;
        right: 20px;
        top: 0px;
        color: #fff;
        position: absolute;
        text-decoration: none;
        opacity: 7;
        line-height: 1em;
    }

    .LabelVR {
        background-color: #c05c7e;
        border: none;
        color: white;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        margin: 5px;
        text-align: center;
        float: left;
        text-decoration: none;
        font-size: 12px;
        font-weight: 700;
        height: 40px;
        width: 40px;
    }

    .PaneltextHoofdInner {
        padding: 5px 10px 10px 15px;
        background: #3586a5;
        margin-top: 10px;
        height: 38px;
        width: 100%;
        background: #f8f8f8;
        border-bottom: solid 1px #d9d9d9;
        font-size: 1em;
    }

   
    .PanelHeaderHoofd {
        padding: 10px 10px 10px 15px;
        display:inline-block;
        height: 38px;
        width: 100%;
        background: #ddd;
        min-height: 40px;
        border-bottom: solid 1px #d9d9d9;
        font-size: 1em;
    }

    .PanelHeaderKlas {
    padding: 10px 10px 10px 15px;
    
    height: 38px;
    width: 100%;
    background: #3586a5;
    min-height: 40px;
    border-bottom: solid 1px #d9d9d9;
    font-size: 1em;
    }


    .PaneltextHoofdA {
        padding: 10px 10px 10px 10px;
        /*background: #3586a5;
   
   
    background: #f8f8f8;*/
        font-size: 1em;
    }



    .PaneltextHoofd25 {
        position: relative;
        float: left;
        padding: 5px 0px 5px 5px;
        /*background: #3586a5;*/
        width: 100%;
        /*background: #f8f8f8;*/
        /*border-bottom: solid 1px #d9d9d9;*/
        font-size: 1em;
    }


    .PaneltextHoofd2 {
        padding: 5px 13px 10px 15px;
        margin-top: 10px;
        text-align: center;
        vertical-align: middle;
        height: 100%;
        width: 100%;
        border-bottom: solid 1px #d9d9d9;
        font-size: 1em;
    }

    .PaneltextHoofdR {
        padding: 5px 10px 10px 15px;
        float: left;
        display: flex;
        position: inherit;
        font-size: 1em;
    }

    .PaneltextHoofdT {
        padding: 0px 5px 30px 0px;
        float: left;
        width: 100%;
        display: flex;
        align-content: center;
        flex-wrap: wrap;
        flex-direction: row;
        position: inherit;
        font-size: 1em;
        gap: 4px 30px;
    }

    .PaneltextHoofdmin {
        margin-top: -12px;
        margin-left: 0px;
        float: left;
        position: inherit;
        font-size: 1em;
    }



    .Lader,
    .Lader:before,
    .Lader:after {
        background: #a6a6a6;
        -webkit-animation: load1 1s infinite ease-in-out;
        animation: load1 1s infinite ease-in-out;
        width: 1em;
        height: 4em;
    }

    .Lader {
        color: #a6a6a6;
        text-indent: -9999em;
        margin: 88px auto;
        left: 50%;
        top: 30%;
        opacity: 0;
        position: absolute;
        font-size: 11px;
        z-index: 0;
        animation: fadeOut 10s forwards;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
    }

        .Lader:before,
        .Lader:after {
            position: absolute;
            top: 0;
            content: '';
        }

        .Lader:before {
            left: -1.5em;
            -webkit-animation-delay: -0.32s;
            animation-delay: -0.32s;
        }

        .Lader:after {
            left: 1.5em;
        }

    @-webkit-keyframes load1 {
        0%, 80%, 100% {
            box-shadow: 0 0;
            height: 4em;
        }

        40% {
            box-shadow: 0 -2em;
            height: 5em;
        }
    }

    @keyframes load1 {
        0%, 80%, 100% {
            box-shadow: 0 0;
            height: 4em;
        }

        40% {
            box-shadow: 0 -2em;
            height: 5em;
        }
    }


    @keyframes fadeOut {
        0% {
            opacity: 0;
            z-index: 0;
        }

        50% {
            opacity: 1;
            z-index: 0;
        }

        100% {
            opacity: 0;
            z-index: -1;
        }
    }

    /*.Lader {
    position: absolute;
    left: 55%;
    top: 50%;
    z-index: 0;
    margin: -75px 0 0 -75px;
    border: 12px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border-top: 12px solid #3498db;
    width: 100px;
    height: 100px;
    animation: spin 1s linear infinite;
 
    opacity: 1;
}




@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 0;
        z-index: -1;
    }

    50% {
        opacity: 1;
        z-index: 1000;
    }

    100% {
        opacity: 0;
        z-index: -1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 0;
        z-index: -1;
    }

    50% {
        opacity: 1;
        z-index: 1000;
    }

    100% {
        opacity: 0;
        z-index: -1;
    }
}*/

    .fadeOut {
        -webkit-animation-name: fadeOut;
        animation-name: fadeOut;
    }



    .PanelFrameGreen {
        color: #000;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        display: block;
        height: 100%;
        background: #f8f8f8;
        overflow: hidden;
        border-radius: 17px;
        border: solid 10px #56b273;
        z-index: 1;
        width: 100%;
    }

    .PaneltextPurpleLL {
        color: #000;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        display: block;
        background: #B388DD;
        overflow: hidden;
        opacity: 1;
        border-radius: 17px;
        border-left: solid 5px #B388DD;
        border-right: solid 5px #B388DD;
        border-top: solid 10px #B388DD;
        border-bottom: solid 10px #B388DD;
        z-index: 1;
        width: 100%;
        /*-webkit-animation: fader 1s;
    animation: fader 1s;*/
    }

        .PaneltextPurpleLL:hover {
            opacity: 1;
        }

    @keyframes fader {
        0% {
            opacity: 1;
        }

        16% {
            opacity: 1;
        }

        84% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }


.PanelMainPurple {
    border: 6px solid rgba(31, 31, 35, 0.3);
    /*padding: 15px 15px 10px 20px;*/
    border-radius: 24px;
    display: flex;
   
    height: 95%;
    width: 258px;
    /*flex-shrink: 0;*/
}

    @media screen and (max-width: 1980px) {


        .PanelMainPurple {
            /*max-height: 70vh;*/
            /*zoom: 0.9;*/
        }
    }
    /*white-space: nowrap;*/
    .PanelFramePurple {
        color: #000;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        display: block;
        height: 100%;
        background: #f8f8f8;
        overflow: hidden;
        border-radius: 17px;
        border: solid 10px #B388DD;
        z-index: 1;
        width: 100%;
    }


    .itemframeL {
        margin: 10px 10px 10px 10px;
        float: left;
        position: relative;
        display: block;
        overflow-x: hidden;
        overflow-y: hidden;
        line-height: 1em;
        max-width: 330px;
        min-width: 300px;
        /*box-shadow: 0px 0px 7px #000;*/
        border: 6px solid rgba(31, 31, 35, 0.3);
        border-radius: 24px;
        /*opacity: 0.6;*/
        height: 81%;
        /*max-width: 400px;
    min-width: 400px;*/
        transition: opacity .5s ease-out;
        -moz-transition: opacity .5s ease-out;
        -webkit-transition: opacity .5s ease-out;
        -o-transition: opacity .5s ease-out;
    }

    @media screen and (max-width: 768px) {


        .itemframeL {
            max-width: calc(100% - 20px);
            width: calc(100% - 20px);
            height: 80px;
        }
    }


    .PanelFrameL {
        color: #000;
        display: block;
        /*max-width: 330px;
    min-width: 300px;*/
        height: 100%;
        background-color: #3586a5;
        overflow: hidden;
        border: solid 10px #3586a5;
        border-radius: 17px;
        /*background: url(../images/back4.jpg) center center no-repeat;*/
        z-index: 1;
        width: 100%;
        /*  Rotate  */
    }

    .PanelFrame {
        color: #000;
        display: block;
        height: 100%;
        background-color: #f8f8f8;
        overflow: hidden;
        border: solid 10px #3586a5;
        border-radius: 17px;
        /*background: url(../images/back4.jpg) center center no-repeat;*/
        z-index: 1;
        width: 100%;
        /*  Rotate  */
    }




    .PanelWindowL {
        color: #000;
        background: #3586a5;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        border-radius: 17px;
        margin: auto;
        border: solid 8px #3586a5;
        position: relative;
        display: block;
        width: 500px;
        max-width: 100%;
        height: 90%;
        left: 0;
        right: 0;
        top: 80px;
        bottom: 0;
        z-index: 99;
    }

    .PanelWindow {
        color: #000;
        /*background: #f8f8f8;*/
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        border-radius: 17px;
        margin: auto;
        border: solid 8px #3586a5;
        position: relative;
        display: block;
        width: 500px;
        max-width: 100%;
        height: 90%;
        left: 0;
        right: 0;
        top: 80px;
        bottom: 0;
        z-index: 99;
    }

    @media screen and (max-width: 768px) {
    }

    @media screen and (max-width: 768px) {
    }

    @media screen and (max-width: 480px) {
    }


    .PanelWindowBox {
        color: #000;
        background: #f8f8f8;
        cursor: url(../images/iconsM/pointer.png) 14 2, pointer;
        border: none;
        display: block;
        border-radius: 17px;
        border: solid 16px #000;
        position: absolute;
        width: 90%;
        height: 95%;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
    }




    .PanelFrameBlue {
        color: #000;
        display: block;
        height: 100%;
        background-color: #f8f8f8;
        overflow: hidden;
        border: solid 10px #3586a5;
        border-radius: 17px;
        /*background: url(../images/back4.jpg) center center no-repeat;*/
        z-index: 1;
        width: 100%;
        /*  Rotate  */
    }



    .PanelWindowBlue {
        color: #000;
        background: #f8f8f8;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        border-radius: 17px;
        margin: auto;
        border: solid 8px #3586a5;
        position: relative;
        display: block;
        width: 500px;
        height: 90%;
        left: 0;
        right: 0;
        top: 80px;
        bottom: 0;
        z-index: 99;
    }

    @media screen and (max-width: 768px) {


        .PanelWindowBlue {
            top: 20px;
        }
    }

    @media screen and (max-width: 768px) {


        .PanelWindowBlue {
            top: 0px;
        }
    }

    @media screen and (max-width: 480px) {


        .PanelWindowBlue {
            top: 0px;
        }
    }


    .PanelWindowBlueBox {
        color: #000;
        background: #f8f8f8;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        border-radius: 17px;
        border: solid 4px #3586a5;
        position: absolute;
        /*width: 88%;*/
        height: 88%;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
    }

    .PanelOverlay {
        color: #000;
        background: #f8f8f8;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        /*max-width: 600px;*/
        position: absolute;
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
    }



    .PanelFrameOrange {
        color: #000;
        background: #f8f8f8;
        border: solid 10px #ff8750;
        border-radius: 17px;
        width: 100%;
        overflow: hidden;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        display: block;
        height: 100%;
    }

    .PanelWindowGreen {
        color: #000;
        background: #f8f8f8;
        border-radius: 17px;
        border: solid 8px #56b273;
        position: absolute;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        width: 500px;
        height: 75%;
        top: 45%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
    }



    .PaneltextBlank {
        /*padding: 4px 0px 4px 4px;*/
        color: #000;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        display: block;
        margin: auto;
        padding-top: 80px;
        position: absolute;
        display: block;
        width: 90%;
        max-width: 1700px;
        overflow-y: scroll;
        z-index: 99;
        height: 90%;
        top: 55%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
    }

    @media screen and (max-width: 1980px) {


        .PaneltextBlank {
            max-width: 1700px;
            /*padding: 2x 4px 4px 4px;*/
            /*zoom: 0.9;*/
        }
    }

    @media screen and (max-width: 1400px) {


        .PaneltextBlank {
            /*zoom: 0.7;*/
        }
    }

    @media screen and (max-width: 1200px) {


        .PaneltextBlank {
            zoom: 0.5;
            /*zoom: 0.6;*/
        }
    }

    @media screen and (max-width: 720px) {


        .PaneltextBlank {
            zoom: 0.5;
        }
    }

    @media screen and (max-width: 480px) {


        .PaneltextBlank {
        }
    }


    .PaneltextBlueGroot {
        padding: 8px 8px 8px 8px;
        color: #000;
        background: #f8f8f8;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        display: block;
        margin: auto;
        border: solid 8px #3586a5;
        position: absolute;
        display: block;
        max-width: 1050px;
        overflow-y: scroll;
        z-index: 99;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
    }


    .PaneltextBlueF {
        color: #000;
        background: #f8f8f8;
        cursor: url(../images/iconsM/pointer.png) 14 2, pointer;
        margin: auto;
        border: solid 8px #3586a5;
        position: relative;
        display: block;
        width: 90%;
        max-width: 1000px;
        height: 85%;
        left: 0;
        right: 0;
        top: 80px;
        bottom: 0;
        z-index: 99;
    }


    .PanelBlanko {
        background-color: rgba(34, 32, 32, 0.90);
        color: #000;
        /*background: #f8f8f8;*/
        padding-left: 20px;
        /*border: solid 8px #3586a5;*/
        position: relative;
        display: block;
        width: calc(100% - 80px);
        height: 85%;
        left: 80px;
        top: 80px;
        cursor: url(../images/iconsM/pointer.png) 14 2, pointer;
        z-index: 99;
    }



    .PaneltextGreenF {
        color: #000;
        background: #f8f8f8;
        cursor: initial;
        margin: auto;
        border: solid 8px #56b273;
        position: relative;
        display: block;
        width: 100%;
        max-width: 800px;
        height: 85%;
        left: 0;
        right: 0;
        top: 80px;
        bottom: 0;
        z-index: 99;
    }

    .wrapperAll {
        position: relative;
        height: 100%;
        overflow: auto;
        margin: auto;
        /*padding: 100px 0px 90px 80px;*/
        /*margin-right: 90px;*/
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .wrapperAllScroll {
        position: relative;
        height: 100%;
        overflow: auto;
        /*padding: 100px 0px 90px 80px;*/
        /*margin-right: 90px;*/
        /*overflow-x: hidden;
    overflow-y: hidden;*/
    }

    .wrapperH {
        /*position: relative;*/
        /*height: 100%;*/
        display: block;
        max-width: 1400px;
        text-align: center;
        margin: auto;
        padding-top: 140px;
        /*padding: 100px 0px 90px 80px;*/
        /*margin-right: 90px;*/
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .PanelL {
        /*display: flex;*/
        /*padding: 15px 15px 15px 5px;*/
        float: left;
        display: block;
        height: 90%;
        opacity: 1;
        overflow-x: auto;
        /*white-space: nowrap;*/
        /*padding: 30px 50px 50px 50px;*/
    }

    .PanelWrapper {
        /*display: flex;*/
        /*padding: 15px 15px 15px 5px;*/
        height: 90%;
        opacity: 1;
        /*white-space: nowrap;*/
        /*padding: 30px 50px 50px 50px;*/
        overflow-x: auto;
    }

    @media screen and (max-width: 768px) {


        .PanelWrapper {
            min-width: 350px;
            width: 100%;
            height: 80%;
        }
    }


    .PanelWrapperI {
        /*padding: 15px 15px 10px 20px;*/
        /*display:flex;*/
        /*height: 80vh;*/
        width: 100%;
        /*flex-shrink: 0;*/
        /*white-space: nowrap;*/
    }

    .wrapper {
        position: relative;
        /*height: 100%;*/
        padding: 0px 0px 0px 0px;
        /*margin-right: 90px;*/
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .wrappergroep {
        position: relative;
        /*float: left;
    display: flex;*/
        /*left: 30px;*/
        top: 10px;
        display: flex;
        margin-right: 20px;
        /*padding: 10px 0px 10px 30px;*/
        /*width: 90%;*/
        /*padding-top: 5%;
    padding-left: 5%;*/
        height: 100%;
        /*width: 340px;*/
        flex-direction: column;
        flex-wrap: wrap;
    }

    @media screen and (max-width: 768px) {


        .wrappergroep {
        }
    }


    .wrapper::-webkit-scrollbar-track {
        background: #424242;
    }


    .wrapper::-webkit-scrollbar-thumb {
        background: #484848;
    }


        .wrapper::-webkit-scrollbar-thumb:hover {
            background: #282828;
        }

    .wrapper::-webkit-scrollbar {
        width: 20px;
    }

    /**/

    .LabelFloat {
        background-color: #3586a5;
        border: none;
        top: -6px;
        left: 49%;
        position: absolute;
        color: white;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        margin: 5px;
        text-align: center;
        text-decoration: none;
        font-size: 14px;
        font-weight: 700;
        padding: 10px 10px 10px 10px;
        height: 40px;
        width: 140px;
        z-index: 9999;
    }

    .LabelMiddel {
        border: none;
        color: white;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        margin: 5px;
        text-align: center;
        text-decoration: none;
        font-size: 14px;
        font-weight: 700;
        padding: 10px 10px 10px 10px;
        height: 80px;
        width: 80px;
    }

    .LabelGroen {
        background-color: #56b273;
        border: none;
        float: left;
        color: white;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        margin: 5px;
        display: inline-table;
        text-align: center;
        text-decoration: none;
        font-size: 14px;
        font-weight: 700;
        height: 40px;
        width: 40px;
    }

    .LabelGroenspan {
        background-color: #56b273;
        border: none;
        float: left;
        color: white;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        margin: 5px;
        display: inline-table;
        text-align: center;
        text-decoration: none;
        font-size: 14px;
        line-height: 2.9em;
        font-weight: 700;
        height: 40px;
        width: 40px;
    }

    .LabelGrijs {
        background-color: #c1c1c1;
        border: none;
        color: white;
        display: inline-table;
        float: left;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        margin: 5px;
        text-align: center;
        text-decoration: none;
        font-size: 12px;
        font-weight: 700;
        height: 40px;
        width: 40px;
    }

    .LabelBlauw {
        background-color: #3586a5;
        border: none;
        color: white;
        float: left;
        display: inline-table;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        margin: 5px;
        text-align: center;
        text-decoration: none;
        font-size: 12px;
        font-weight: 700;
        height: 40px;
        width: 40px;
    }

    .LabelYellow {
        background-color: #ceaa63;
        border: none;
        display: inline-table;
        color: white;
        float: left;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        margin: 5px;
        text-align: center;
        text-decoration: none;
        font-size: 12px;
        font-weight: 700;
        height: 40px;
        width: 40px;
    }


    .lblVerzuim {
        background-color: #4e90a4;
        border: 1px solid rgba(255, 255, 255, 1);
        bottom: 0;
        padding: 3px 10px 15px 15px;
        position: absolute;
        float: left;
        text-decoration: none;
        font-size: 1.6em;
        font-weight: 800;
        text-align: center;
        color: #fff;
        width: 100%;
    }

    .verzuimLabel {
        margin: 2px 2px 2px 2px;
        height: 15px;
        width: 20px;
        float: left;
        border-radius: 50px;
        font-size: 0.6em;
        padding-top: 1px;
        font-weight: 300;
    }

    .Panelbackbox2 {
        display: block;
        margin: auto;
        padding: 15px 15px 15px 15px;
        width: 95%;
        height: 100%;
        opacity: 1;
    }

    .Panelbackbox {
        display: block;
        margin: auto;
        padding: 15px 10px 15px 15px;
        width: 100%;
        height: 100%;
        text-align: center;
        float: left;
        left: 0;
        right: 0;
        opacity: 1;
    }


    .PanelOverBox {
        color: #000;
        background: #f8f8f8;
        cursor: url(../images/iconsM/hand_point.png) 14 2, pointer;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
        z-index: 999;
    }


    .PanelbackScrollX {
        display: block;
        padding: 5px 5px 5px 5px;
        width: 100%;
        overflow-x: hidden;
        overflow-y: scroll;
        height: 90%;
        float: left;
        opacity: 1;
    }

    .PanelbackR {
        display: block;
        padding: 5px 5px 5px 5px;
        width: calc(100% - 280px);
        overflow-y: scroll;
        height: 100%;
        float: left;
        opacity: 1;
    }


    .Panelback800 {
        display: block;
        padding: 15px 15px 10px 15px;
        width: 780px;
        float: left;
        height: 100%;
        overflow: hidden;
        opacity: 1;
    }


    .PanelVerzuimBox {
        height: 200px;
        float: left;
        position: relative;
        text-decoration: none;
        width: 33%;
    }



    .PanelVerzuim {
        height: 190px;
        float: left;
        position: relative;
        text-decoration: none;
        width: 33%;
    }

    .PanelPadding {
        position: relative;
        padding: 15px 15px 15px 0px;
        background: #3586a5;
        width: 100%;
        background: #f8f8f8;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
        font-size: 1em;
    }

    .deFoto {
        border-radius: 50%;
        position: relative;
        margin-top: 5px;
        Height: 80px;
        Width: 80px;
    }


    .deFoto2 {
        position: relative;
        margin-top: 5px;
        Height: 80px;
        Width: 80px;
        border: solid 1px #bdbdbd;
    }


    .PanelLabel {
        color: #fff;
        border-radius: 5px;
        padding: 7px;
        float: left;
        margin-top: -5px;
        margin-left: -4px;
        margin-right: 9px;
        border: 2px solid rgba(31, 31, 35, 0.3);
    }

    .PanelLabelR {
        color: #fff;
        border-radius: 5px;
        padding: 7px;
        float: right;
        margin-top: -5px;
        border: 2px solid rgba(31, 31, 35, 0.3);
        margin-right: 0px;
    }

    .PanelUpdateLabelTop {
        text-align: center;
        color: rgba(31, 31, 35, 0.8);
        width: 80%;
        padding: 25px;
        height: 30px;
        display: inline-block;
        min-height: 50px;
        vertical-align: middle;
        margin-top: 30px;
        margin-bottom: 5px;
        font-weight: 700;
        font-size: 1.5em;
        border-radius: 7px;
        text-decoration: none;
    }

    .PanelUpdateLabelmidden {
        text-align: center;
        color: rgba(31, 31, 35, 0.8);
        width: 80%;
        padding: 15px;
        display: inline-block;
        min-height: 50px;
        vertical-align: middle;
        margin-top: 0px;
        margin-bottom: 5px;
        font-weight: 700;
        font-size: 1.0em;
        border-radius: 7px;
        text-decoration: none;
    }

.PanelUpdateLabel {
    text-align: center;
    color: #fff;
    /* width: 100%; */
    padding: 4px;
    float: left;
    min-height: 26px;
    vertical-align: middle;
    border-radius: 7px;
    background-color: #56b273;
}

    .PanelUpdate {
        position: relative;
        margin-top: -3px;
        margin-left: 4px;
        float: left;
        /* width: 100%; */
        text-align: center;
        opacity: 1;
        line-height: 1em;
        z-index: 999;
    }

    .PanelUpdate1 {
        min-height: 50px;
        width: 100%;
        text-align: center;
        position: relative;
        opacity: 1;
        padding: 10px;
        line-height: 1em;
        z-index: 999;
    }


    .PanelUpdateLabelF {
        color: #fff;
        width: 100%;
        padding: 15px;
        float: right;
        min-height: 30px;
        vertical-align: middle;
        background-color: #56b273;
    }

    .PanelUpdateLabelF1 {
        color: #fff;
        width: 100%;
        padding: 15px;
        float: left;
        min-height: 50px;
        vertical-align: middle;
        margin-top: 5px;
        margin-bottom: 5px;
        background-color: #db3636;
    }

    .PanelUpdateF {
        text-align: center;
        float: left;
        position: relative;
        opacity: 1;
        width: 100%;
        line-height: 1em;
    }


    .PanelTellerLabel {
        color: #fff;
        border-radius: 16px;
        margin-left: -5px;
        margin-top: 5px;
        background-color: #56b273;
        height: 20px;
        width: 20px;
        box-shadow: 0px 1px 2px #000;
        vertical-align: middle;
        float: right;
        position: absolute;
        opacity: 1;
        line-height: 1.3em;
    }

    .PanelTellerLabelGroep {
        color: #fff;
        border-radius: 0;
        float: left;
        margin-left: 38%;
        margin-top: -20px;
        font-size: 33px;
        height: 30px;
        width: 40px;
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
        text-align: center;
        vertical-align: middle;
        float: left;
        position: relative;
        opacity: 1;
        line-height: 1.2em;
        z-index: -1;
    }

    .PanelVH30 {
        display: block;
        padding: 5px 5px 5px 5px;
        width: 100%;
        overflow: hidden;
        float: left;
        opacity: 1;
    }

    .PanelbackLogo {
        display: block;
        padding: 5px 5px 5px 5px;
        width: 100%;
        overflow: hidden;
        float: left;
        background-size: cover;
        background-position: -20% 50%;
        background-repeat: no-repeat;
        background-image: url(../images/back5.png);
        opacity: 1;
    }

    .BoxBack {
        display: block;
        width: 100%;
        height: 90%;
        padding: 10px;
        overflow: hidden;
        float: left;
    }

    .Panelback {
        display: block;
        width: 100%;
        height: 95%;
        overflow: hidden;
        float: left;
        opacity: 1;
    }


    .PanelbackFoto {
        display: block;
        width: 100%;
        height: 95%;
        padding: 100px;
        text-align: center;
        vertical-align: middle;
        overflow: hidden;
        float: left;
        opacity: 1;
    }


    .PanelbackH {
        display: block;
        padding: 10px 10px 10px 10px;
        width: 100%;
        float: left;
        height: 95%;
        overflow: hidden;
        opacity: 1;
    }

    .PanelbackHalf {
        display: block;
        width: 50%;
        overflow: hidden;
        opacity: 1;
    }

    .Panelback75 {
        display: block;
        padding: 15px 15px 10px 15px;
        width: 75%;
        float: left;
        height: 100%;
        overflow: hidden;
        opacity: 1;
    }




    .PanelbackFULL {
        display: block;
        padding: 10px 10px 0px 10px;
        overflow: hidden;
        height: 100%;
        /*background-color: #fff;*/
        opacity: 1;
    }

    .PanelbackFULLOVER {
        display: block;
        padding: 15px 15px 15px 15px;
        /*overflow: hidden;*/
        height: 100%;
        opacity: 1;
    }

    .PanelbackFULLVH {
        display: block;
        background-color: #fff;
        /*padding: 15px 15px 15px 15px;*/
        overflow: hidden;
        height: 90vh;
        opacity: 1;
    }

    .PanelbackFULLNO {
        display: block;
        overflow: hidden;
        height: 100%;
        opacity: 1;
    }

    .Panelback50 {
        display: block;
        padding: 10px 10px 0px 10px;
        width: 50%;
        float: left;
        height: 99%;
        overflow: hidden;
        opacity: 1;
    }

    .Panelback25NO {
        display: block;
        padding: 10px 10px 0px 10px;
        position: static;
        /*width: 300px;*/
        float: left;
        height: 100%;
        overflow: hidden;
        opacity: 1;
    }

    .Panelback25 {
        display: block;
        padding: 10px 10px 0px 10px;
        /*position: static;*/
        /*width: 300px;*/
        float: left;
        height: 100%;
        overflow: hidden;
        opacity: 1;
    }

    .PanelbackBlank {
        display: block;
        padding: 15px 35px 0px 35px;
        position: relative;
        height: 100%;
        overflow: hidden;
        opacity: 1;
    }

    @media screen and (max-width:768px) {


        .Panelback50 {
            width: 100%;
            height: 50%;
        }
    }


#PanelLLGRID::-webkit-scrollbar-thumb {
    background: #8f49d3 !important;
}


    #PanelLLGRID::-webkit-scrollbar-thumb:hover {
        background: #802cd3 !important;
    }


#PanelLLGRID:hover::-webkit-scrollbar {
    width: 7px !important;
}


    ::-webkit-scrollbar {
        width: 15px;
    }



    ::-webkit-scrollbar-track {
    }


::-webkit-scrollbar-thumb {
    background: #d0d0d0;
}


    ::-webkit-scrollbar-thumb:hover {
        background: #a3a3a3;
    }


    :hover::-webkit-scrollbar {
        width: 15px;
    }



    :hover::-webkit-scrollbar-track {
    }


    ::-webkit-scrollbar-thumb {
    }


    :hover::-webkit-scrollbar-thumb:hover {
    }




    .wrapper::-webkit-scrollbar-track {
        background: #424242;
    }


    .wrapper::-webkit-scrollbar-thumb {
        background: #484848;
    }


        .wrapper::-webkit-scrollbar-thumb:hover {
            background: #282828;
        }

    .wrapper::-webkit-scrollbar {
        width: 20px;
    }

    body::-webkit-scrollbar {
        width: 7px;
        display: none;
    }



    body::-webkit-scrollbar-track {
    }


    body::-webkit-scrollbar-thumb {
    }


        body::-webkit-scrollbar-thumb:hover {
        }




    .Panelback::-webkit-scrollbar-track {
    }


    .Panelback::-webkit-scrollbar-thumb {
    }


        .Panelback::-webkit-scrollbar-thumb:hover {
        }




    .PanelbackH::-webkit-scrollbar-track {
        background: #d9d9d9;
    }


    .PanelbackH::-webkit-scrollbar-thumb {
        background: #c1c1c1;
    }


        .PanelbackH::-webkit-scrollbar-thumb:hover {
            background: #666;
        }


    .PanelWrapper::-webkit-scrollbar-track {
        background: #424242;
    }


    .PanelWrapper::-webkit-scrollbar-thumb {
        background: #484848;
    }


        .PanelWrapper::-webkit-scrollbar-thumb:hover {
            background: #282828;
        }

    .PanelWrapper::-webkit-scrollbar {
        width: 40px;
    }




    .Blok50 {
        display: block;
        float: left;
        position: relative;
        overflow: hidden;
        opacity: 1;
        width: 80px;
        height: 80px;
        border-top: 1px solid rgb(31, 31, 35);
        /*border: 2px solid rgb(31, 31, 35);*/
    }

    .buttonblok50 {
        /*background-color: #2e2f35;*/
        border: none;
        color: #000;
        text-align: center;
        vertical-align: middle;
        padding: 0px 0px 0px 0px;
        /*height: 40px;*/
        width: 100%;
        height: 100%;
        float: left;
        border-bottom: 1px solid rgb(31, 31, 35);
        border-right: 1px solid rgb(31, 31, 35);
        border-left: 1px solid rgb(31, 31, 35);
        font-weight: 600;
        text-decoration: none;
        font-size: 18px;
    }

    .PanelBlok {
        display: block;
        float: left;
        position: relative;
        overflow: hidden;
        opacity: 1;
        width: 100%;
        border: 2px solid rgb(31, 31, 35);
    }

    .buttonblok {
        /*background-color: #2e2f35;*/
        border: none;
        color: #000;
        /* text-align: center; */
        padding: 6px 6px 6px 6px;
        /*height: 40px;*/
        width: 100%;
        float: left;
        /*border-bottom: 2px solid rgb(31, 31, 35);
    border-right: 2px solid rgb(31, 31, 35);
    border-left: 2px solid rgb(31, 31, 35);*/
        font-weight: 600;
        text-decoration: none;
        font-size: 18px;
    }