/* #################################################################################################### */
/* ############################################# algemeen ############################################# */
/* #################################################################################################### */

:root {
    --hoofd_achtergrond_kleur: #C2EDCE; /* #C2EDCE --> MAGIC MINT */
    --secundaire_achtergrond_kleur: #6FB3B8; /* #6FB3B8 --> MOONSTONE BLUE */
    --achtergrond_kleur: #F6F6F2; /* #F6F6F2 --> WHITE SMOKE */
    --tekst_kleur: #388087; /* #388087 --> TEAL BLUE */
}

html {
	font-family: Arial;
	color: var(--tekst_kleur);
    margin: 0px;
    padding: 0px;
}

body {
    margin: 0px;
    padding: 0px;
}

iframe {
    border-style: none;
    width: 100%;
    height: 100%;
}

/* #################################################################################################### */
/* ############################################ beeldscherm ########################################### */
/* #################################################################################################### */

.container {
    background-color: var(--hoofd_achtergrond_kleur);
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

/* #################################################################################################### */
/* ############################################# bovenbalk ############################################ */
/* #################################################################################################### */

.bovenbalk {
    background-color: var(--achtergrond_kleur);
    position: sticky;
    text-align: center;
    line-height: 50px;
    top: 0px;
    height: 50px;
    width: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

.bovenbalk_homeknop {
    position: relative;
    height: 50px;
    width: 50px;
    float: left;
}

.bovenbalk_tekst {
    position: relative;
    height: 50px;
    width: calc(100% - 100px);
    float: left;
    font-size: 32px;
    font-weight: bold;
}

.bovenbalk_persoonlijk {
    position: relative;
    height: 50px;
    width: 50px;
    float: left;
}

/* #################################################################################################### */
/* ############################################# Kolomlinks ########################################### */
/* #################################################################################################### */

.kolomlinks {
    background-color: var(--achtergrond_kleur);
    position: absolute;
    top: 100px;
    bottom: 0px;
    left: 0px;
    width: 300px;
    border-color: var(--tekst_kleur);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

.kolomlinks_groot {
    background-color: var(--achtergrond_kleur);
    position: absolute;
    top: 100px;
    bottom: 0px;
    left: 0px;
    width: 400px;
    border-color: var(--tekst_kleur);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

.kolomlinks_gebruikers {
    width: 100%;
    height: 100%;
    margin-left: 0px;
    margin-top: 0px;
}

.kolomlinks_gebruikers_titel {
    width: 100%;
    height: 50px;
    line-height: 47px;
    margin-left: 0px;
    margin-top: 0px;
}

.kolomlinks_gebruikers_titel h2 {
    position: sticky;
    top: 0px;
    padding-left: 8px;
    margin: 0px;
    border-style: none none solid none;
}

.kolomlinks_gebruikers_gebruikers {
    width: 100%;
    height: calc(100% - 50px);
    margin-left: 0px;
    margin-top: 0px;
    overflow-y: scroll;
}

.kolomlinks_gebruikers_gebruikers p {
    padding: 0px;
    padding-left: 8px;
    padding-top: 16px;
    margin: 0px;
    font-weight: bold;
}

.kolomlinks_gebruikers_gebruikers li {
    padding: 0px;
    padding-left: 26px;
    margin: 0px;
    list-style-type: '- ';
    list-style-position: outside;
    text-indent: -10px;
}

.kolomlinks_keuzelijst {
    width: 100%;
    height: 100%;
    margin-left: 0px;
    margin-top: 0px;
}

.kolomlinks_keuzelijst_titel {
    width: 100%;
    height: 50px;
    line-height: 47px;
    margin-left: 0px;
    margin-top: 0px;
}

.kolomlinks_keuzelijst_titel h2 {
    position: sticky;
    top: 0px;
    padding-left: 8px;
    margin: 0px;
    border-style: none none solid none;
}

.kolomlinks_keuzelijst_tekst {
    position: relative;
    width: 100%;
    height: calc(100% - 50px);
    margin-left: 0px;
    margin-top: 0px;
    overflow-y: scroll;
}

.kolomlinks_keuzelijst_optie {
    position: relative;
    top: 0px;
    padding: 0px;
    padding-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    height: 40px;
}

.kolomlinks_keuzelijst_optie h3 {
    padding: 0px;
    margin: 0px;
}

.kolomlinks_keuzelijst_optie a:link {
    color: var(--tekst_kleur);
    text-decoration: none;
}

.kolomlinks_keuzelijst_optie a:visited {
    color: var(--tekst_kleur);
    text-decoration: none;
}

.kolomlinks_keuzelijst_optie a:hover {
    color: var(--achtergrond_kleur);
    text-decoration: none;
}

.kolomlinks_keuzelijst_optie a:hover
.kolomlinks_keuzelijst_optie_optie {
    background-color: var(--tekst_kleur);
    text-decoration: none;
}

.kolomlinks_keuzelijst_optie a:active {
    color: var(--achtergrond_kleur);
    text-decoration: none;
}

.kolomlinks_keuzelijst_optie_optie {
    position: relative;
    top: 0px;
    padding-left: 10px;
    height: calc(40px - 10px);
    line-height: calc(40px - 10px);
    border-radius: calc((40px - 10px) / 2);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}

.kolomlinks_keuzelijst_optie_optie:hover {
    background-color: var(--tekst_kleur);
}

/* #################################################################################################### */
/* ############################################ Kolommidden ########################################### */
/* #################################################################################################### */

.kolommidden {
    background-color: var(--achtergrond_kleur);
    position: relative;
    top: 50px;
    height: calc(100% - 100px);
    margin: 0 auto;
    width: calc(100% - 700px);
    /* max-width: 1700px; */
    border-color: var(--tekst_kleur);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

.kolommidden_klein {
    background-color: var(--achtergrond_kleur);
    position: relative;
    top: 50px;
    height: calc(100% - 100px);
    margin: 0 auto;
    width: calc(100% - 900px);
    /* max-width: 1500px; */
    border-color: var(--tekst_kleur);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

.kolommidden_keuze {
    width: 100%;
    height: 100%;
    margin-left: 0px;
    margin-top: 0px;
}

.kolommidden_keuze_titel {
    width: 100%;
    height: 50px;
    line-height: 47px;
    margin-left: 0px;
    margin-top: 0px;
}

.kolommidden_keuze_titel h2 {
    position: sticky;
    text-align: center;
    top: 0px;
    padding-left: 8px;
    margin: 0px;
    border-style: none none solid none;
}

.kolommidden_keuze_menu {
    width: 100%;
    height: calc(100% - 50px);
    margin-left: 0px;
    margin-top: 0px;
    overflow-y: scroll;
}

.kolommidden_keuze_menu_tekst {
    width: 100%;
    float: left;
    padding-top: 50px;
}

.kolommidden_keuze_menu_plaatje {
    width: 100%;
    float: left;
    padding-bottom: 50px;
}

.kolommidden_keuze_menu_1 {
    width: 100%;
    float: left;
    text-align: center;
}

.kolommidden_keuze_menu_afbeelding_1 {
    width: 100%;
    border-radius: 30px;
    max-width: 300px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

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

.kolommidden_keuze_menu_afbeelding_2 {
    width: 50%;
    border-radius: 30px;
    max-width: 300px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

.kolommidden_keuze_menu_3 {
    width: calc(100% / 3);
    float: left;
    text-align: center;
}

.kolommidden_keuze_menu_afbeelding_3 {
    width: calc(50% * 3 / 2);
    border-radius: 30px;
    max-width: 300px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

.kolommidden_afbeelding_fout {
    width: 100%;
    max-width: 400px;
}

/* #################################################################################################### */
/* ############################################ Kolomrechts ########################################### */
/* #################################################################################################### */

.kolomrechts {
    background-color: var(--achtergrond_kleur);
    position: absolute;
    top: 100px;
    bottom: 0px;
    right: 0px;
    width: 300px;
    border-color: var(--tekst_kleur);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

.kolomrechts_groot {
    background-color: var(--achtergrond_kleur);
    position: absolute;
    top: 100px;
    bottom: 0px;
    right: 0px;
    width: 400px;
    border-color: var(--tekst_kleur);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

.kolomrechts_logboek {
    width: 100%;
    height: 100%;
    margin-left: 0px;
    margin-top: 0px;
}

.kolomrechts_logboek_titel {
    width: 100%;
    height: 50px;
    line-height: 47px;
    margin-left: 0px;
    margin-top: 0px;
}

.kolomrechts_logboek_titel h2 {
    position: sticky;
    top: 0px;
    padding-left: 8px;
    margin: 0px;
    border-style: none none solid none;
}

.kolomrechts_logboek_wijzigingen {
    width: 100%;
    height: calc(100% - 50px);
    margin-left: 0px;
    margin-top: 0px;
    overflow-y: scroll;
}

.kolomrechts_logboek_wijzigingen p {
    padding: 0px;
    padding-left: 8px;
    padding-top: 16px;
    margin: 0px;
    font-weight: bold;
}

.kolomrechts_logboek_wijzigingen li {
    padding: 0px;
    padding-left: 26px;
    margin: 0px;
    list-style: none;
}

.kolomrechts_logboek_wijzigingen li::before {
    content: "- ";
    position: absolute;
    left: 10px;
}