/* file voor het via nmaogenda-php.php file gegenereerde HTML*/

.titel{
    width: 100%;
    max-width: 900px;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
    font-weight: bold;
    font-size: 35px;
    color: var(--page-titel-text);
    line-height: 55px;
    background-color: var(--page-titel-bg);

}


#agenda{
    width: 100%;
    max-width: 900px;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--blocks-css-bg);
}

#agenda #agenda-kop{
    display: block;
    width: 100%;
}

#agenda #agenda-koptext{
    display: block;
    width: 100%;
    text-align: center;
}

#agenda #agenda-selector{
    display: block;
    width: 100%;
    text-align: center;
}

#agenda #agendabreed{
    display: none;
}

#agenda .agenda-kl{
    display: flex;
    padding-top: 10px;
    border-bottom-color: var(--page-pagina-text);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    width: 100%;
}

#agenda .agendakleur{
    width: 20px;
    margin-right: 10px;
}

#agenda .agenda-dag-kl{
    width: 120px;
}

#agenda .agenda-tijd-kl{
    width: 100%;
}

#agenda .agenda-datum-kl{
    font-weight: bold;
}

#agenda .agenda-kleur-1{background-color:#000}
#agenda .agenda-kleur-2{background-color:#FFFF00}
#agenda .agenda-kleur-3{background-color:#0066FF}
#agenda .agenda-kleur-4{background-color:#FF0000}
#agenda .agenda-kleur-5{background-color:#274707}
#agenda .agenda-kleur-6{background-color:#000}
#agenda .agenda-kleur-7{background-color:#E0A716}
#agenda .agenda-kleur-8{background-color:#BBFF00}
#agenda .agenda-kleur-9{background-color:#F013F0}
#agenda .agenda-kleur-10{background-color:#000}
#agenda .agenda-kleur-11{background-color:#B3C9C6}
#agenda .agenda-kleur-12{background-color:#000}
#agenda .agenda-kleur-13{background-color:#000}
#agenda .agenda-kleur-14{background-color:#0099FF}
#agenda .agenda-kleur-15{background-color:#000}
#agenda .agenda-kleur-16{background-color:#FFCC00}
#agenda .agenda-kleur-17{background-color:#660000}
#agenda .agenda-kleur-18{background-color:#6633FF}
#agenda .agenda-kleur-19{background-color:#FFFF00}
#agenda .agenda-kleur-20{background-color:#006633}
#agenda .agenda-kleur-21{background-color:#FF0000}
#agenda .agenda-kleur-22{background-color:#00CCFF}
#agenda .agenda-kleur-23{background-color:#000}
#agenda .agenda-kleur-24{background-color:#FFFF00}
#agenda .agenda-kleur-25{background-color:#000}
#agenda .agenda-kleur-26{background-color:#0066FF}
#agenda .agenda-kleur-27{background-color:#000}
#agenda .agenda-kleur-28{background-color:#000}
#agenda .agenda-kleur-29{background-color:#000}
#agenda .agenda-kleur-30{background-color:#000}

#agenda .agenda-vet{
    font-weight: bold;
}

#agendaiframe{
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;

}

#agendalistbox{
    color:var(--page-pagina-text);
    background-color: var(--page-titel-bg);
}
/* =============   begin breedscherm ===================*/
@media screen and (min-width: 900px){
    #agenda #agendasmal{
        display: none;
    }
    
    #agenda #agendabreed{
        display: block;
    }
    
    #agenda #agenda-kop{
        display: flex;
        width: 100%;
    }
    
    #agenda #agenda-koptext{
        display: block;
        width: 100%;
        text-align: right;
        margin-right: 10px;
        font-weight: bold;
    }
    
    #agenda #agenda-selector{
        display: block;
        width: 100%;
        text-align: left;
    }
    
    #agenda .agenda-gr{
        display: flex;
        padding-top: 10px;
        border-bottom-color: var(--page-pagina-text);
        border-bottom-style: solid;
        border-bottom-width: 1px;
        width: 100%;
    }
    
    #agenda .agenda-dag-gr{
        width: 120px;
        margin-right: 10px;
    }
    
    #agenda .agenda-tijd-gr{
        width: 100px;
    }

    #agenda .agenda-datum-gr{
        font-weight: bold;
    }
    
}