/* variabelen */
:root {
    --h: 60;
    --fontsz: 15px;
}
/* algemeen */
html{
    box-sizing:border-box
}
*,*:before,*:after{
    box-sizing:inherit
}
html{
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
    font-family:Verdana,sans-serif;
    font-size:var(--fontsz);
    line-height:1.5
}
body{
    color: black;
    background-color: hsl(var(--h),70%,95%)!important;
    margin:0;
    font-family:Verdana,sans-serif;
    font-size:var(--fontsz);
    line-height:1.5
}
svg{
    background-color: hsl(var(--h),70%,85%);
}
a:link,a:visited{
    color:black;
}
button, .button{
    background-color: hsl(var(--h),50%,50%); 
    color: white;
    border: 1px solid black;
    padding: 5px;
    margin: 5px;
    font-size:var(--fontsz);
    border-radius: 8px;
}
/* navigatie en indeling typische pagina vd website */
.menuitem{
    width:90%;
    display:block;
    margin: 6px;
    padding:0px 8px;
    text-align:left;
    border:none;
    white-space:normal;
    float:none;
    outline:0
}
.menuitem:link, .menuitem:visited{
    color:hsl(var(--h),100%,10%);
    background-color: hsl(var(--h),60%,70%);
   text-decoration:none;
}
.menuitem:hover{
    color: hsl(var(--h),60%,70%);
    background-color: hsl(var(--h),100%,10%);
    text-decoration:none;
}
#sidenav{
    color: hsl(var(--h),100%,10%);
    background-color: hsl(var(--h),70%,95%);
    height:100%;
    width:200px;
    position:fixed;
    z-index:1;
    overflow:auto;
    background-image:linear-gradient(to right, hsl(var(--h),80%,60%), hsl(var(--h),70%,95%));
} 
#menuclose{
    width:100%;
    display:block;
    padding:4px 8px;
    text-align:center;
    border:none;
    white-space:normal;
    float:none;
    outline:0;
}
#menuopen{
    border:none;
    display:inline-block;
    padding:4px 8px;
    text-align:center;
    white-space:normal;
    float:none;
    outline:0;
    font-size:24px;
}
#home{
    padding:8px 16px
}
#inhoud{
    padding:8px 16px
}
@media (min-width:993px){
    #sidenav{display:block} 
    #menuclose{display:none} 
    #main{margin-left: 200px} 
    #menuopen{display:none}
}
@media (max-width:992px){
    #sidenav{display:none} 
    #menuclose{display:block} 
    #main{margin-left: 0px} 
    #menuopen{display:block}}
/* andere elementen */
#commandos{
    margin: 20px;
}
.error {
    color: red;
    background-color: hsl(var(--h),70%,95%)!important;
}
.inform {
    color: black;
    background-color: hsl(var(--h),50%,50%);
}
.informbold {
    color: black;
    background-color: hsl(var(--h),75%,50%);
    font-weight:bolder;
}
.adaptsize{
    font-size:15px!important
}
.centreer{
    text-align:center
}
.tlinks{
    text-align:left
}
.trechts{
    text-align:right
}
.rechts{
    float:right!important
}
.links{
    float:left!important
}
/* inline knopjes */
.edt{
    color: black;
    background-color: hsl(var(--h),75%,50%);
    margin:0px 4px;
    padding:0px 6px;
    border-radius: 4px;
}
.plus{
    color: black;
    background-color: hsl(var(--h),75%,50%);
    margin:0px 4px;
    padding:0px 6px;
    border-radius: 4px;
}
.del{
    color: hsl(var(--h),100%,50%);
    background-color: black;
    margin:0px 4px;
    padding:0px 6px;
    border-radius: 4px;
}
/* cancel knop */
button.cancel{
    background-color: hsl(var(--h),50%,75%); 
    color: black;
    border: 1px solid black;
    padding: 5px;
    margin: 5px;
    font-size:var(--fontsz);
}
/* kolommen */
.kolom{
    display:inline-block;
    margin:0px;
    padding: 6px;
    vertical-align:top;
}
/* modale dialoog */
.modaal{
    z-index:3;
    display:none;
    padding-top:100px;
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow:auto;
    background-color:rgb(0,0,0);
    background-color:rgba(0,0,0,0.4)
}
.modale-inhoud{
    margin:auto;
    background-color:hsl(var(--h),80%,90%);
    position:relative;
    padding:0;
    outline:0;
    width:600px
}
/* flex container */
.flex-container {
    display: flex;
    flex-wrap: wrap;
}
.flex-container > div {
    margin: 10px;
    padding: 20px;
}
/* adaptive */
@media (min-width:992px){
    .hidelarge{display:none}
    .kolomhalf{width:49%}
    .kolomderde{width:33%}}
@media (max-width:991px){
    .hidesmall{display:none}
    .kolomhalf{width:100%}
    .kolomderde{width:100%}
}