:root {
        --bg: #F2F2F7;
        --bg1: #C0C0C0;
        --bg2: #000;
        --text: #333;
        --border: 1px solid #333;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg: #333;
        --bg1: #000;
        --bg2: #C0C0C0;
        --text: #FFF;
        --border: 1px solid #C0C0C0;
    }
}

:root[data-theme="dark"] {
        --bg: #333;
        --bg1: #000;
        --bg2: #C0C0C0;
        --text: #FFF;
        --border: 1px solid #C0C0C0;
}

:root[data-theme="light"] {
        --bg: #F2F2F7;
        --bg1: #C0C0C0;
        --bg2: #000;
        --text: #333;
        --border: 1px solid #333;
}

body {background: var(--bg);}
header, footer {background: var(--bg1); color: var(--text);}
footer #edit_span, footer #delete_span{color: var(--text);}
#content {background: var(--bg); color: var(--text);}
a {color: var(--text); text-decoration: none;}
#Agenda_Kalender table, #Agenda_Kalender td{border: var(--border);}
#Agenda_Items table.td1, #Agenda_Items table.td2, #Agenda_Items table.td3 {color: var(--text);}
span.txt {color:  var(--text);}
#bottom_theme {background: var(--bg2);}

/* Tijdelijk */
#title_bar, #bottom_bar {background: var(--bg1); color: var(--text);}
#bottom_bar #edit_span, #bottom_bar #delete_span{color: var(--text);}
#Content {background: var(--bg); color: var(--text);}

.BGdarklight {background: var(--bg);}
.TxTdarklight {color: var(--text);}

#player_popupfield h6 {color: var(--text);}