html,body{height:100%;width:100%;}
body{margin:0;border-top: 1px solid #C0C0C0;font: -apple-system-body;overflow:hidden;}

#title_bar, #bottom_bar {position:fixed;left:0;right:0;text-align:center;line-height:32px;font-size:24px;z-index:50;}
#title_bar {top:0;height:32px;border-bottom:1px solid #FF0099;}
#title_text {font-weight:bold;}
#title_mainmenu {position:absolute;right:0;top:-4px;width:40px;text-align:left;font-size:44px;}
#mainmenu {width:170px;position:fixed;top:38px;right:4px;border:1px solid #FF0099; z-index:100;text-align:left;line-height:20px;display:none;}
#mainmenu li {list-style-type:none;padding:3px;margin-left: 3px;}

@media screen and (min-width: 501px) {
#Content {position:fixed;top:33px;bottom:70px;left:0;right:0;width:100%;max-width:450px;height:calc(100% - 103px);padding-top:5px;overflow-y:auto;}
}
@media screen and (max-width: 500px) {
#Content {position:fixed;top:33px;bottom:70px;left:0;right:0;width:100%;max-width:450px;height:calc(100% - 103px);padding-top:5px;overflow-y:auto;padding-bottom:120px;}
}
#Content p, #Content form, #Content table{margin:0;}

#bottom_bar {bottom:0px;height:64px;border-top:1px solid #FF0099; font-weight:bold;}
#bottom_bar #bottom_theme {position:absolute; left: 20px; top: 10px;width:40px; height:40px; border-radius:20px;}

#dagnotitie {text-align:left;}
#weeknummer {float:right;text-align:right;}

#Agenda_Kalender table{margin-left:auto;margin-right:auto;margin-bottom:10px;margin-top:10px;border:1px solid #333;}
#Agenda_Kalender td{border:1px solid #333;text-align:center;font-size:20px;width:45px;height:45px;}
#Agenda_Kalender a {text-decoration: none;}

.BGblack {background:#000;}
.BGblue {background:#0000FF;}
.BGdarkblue {background: #0033FF;}
.BGdarkred {background: #800000;}
.BGgreen {background:#008000;}
.BGlightblue {background:#0099FF;}
.BGorange {background:#FF9900;}
.BGred {background:#FF0000;}
.BGwhite{background:#FFF;}

.TxTblack {color:#000;}
.TxTblue {color:#0000FF;}
.TxTgray {color:#C0C0C0;}
.TxTgreen {color:#008000;}
.TxTred {color:#FF0000;}
.TxTwhite {color:#FFF;}

.TxT15 {font-size:15px;}
.TxT18 {font-size:18px;}
.TxT20 {font-size:20px;}
.TxT25 {font-size:25px;}

.TxTbold {font-weight:bold;}

.TxTcenter {text-align:center;}

.AlertMessage {width:100%;padding: 20px;background: #04AA6D;color: white;opacity: 1;transition: opacity 0.6s;margin-bottom: 15px;text-align:left;clear:both;}
.AlertMessage.warning {background: #f44336;}
.AlertMessage.info {background: #2196F3;}
.AlertMessage.notification {background: #ff9800;}
.AlertMessage.result {background: #6C3F6A;}
.Alertclosebtn {margin-right: 30px;color: #FFF;font-weight: bold;float: right;font-size: 22px;line-height: 12px;cursor: pointer;transition: 0.3s;}
.Alertclosebtn:hover {color: #000;}

/* Hierboven alles OK */
select,input,textarea,.formButton {font-size:14px;max-width:340px;border:0.8px solid #0099FF;vertical-align:middle;margin:0;border-radius:4px;}
.formButton {font-weight:bold;}
textarea {width:96%;max-width:450px;}
input[type=date] {width: 120px;}
input[type=datetime-local] {min-width:150px;}
input[type=submit] {background:#0000FF; color:#FFF;font-size:18px !important;margin:1px 0;padding:2px 5px;}
.formButton {background:#0000FF; color:#FFF;font-size:17px !important;margin:1px 0;padding:2px 5px; font-weight:normal;}

.tileSt {border-radius:13px;width:86px;height:86px;margin: 6px 0 6px 9px;float:left;font-size:13px;text-align:center;display:table;}
.MediumTile {border-radius:13px;width: 46%; height: 30px; margin-bottom:10px; font-size: 18px; text-align: center; display: table; cursor:pointer;}
.MediumTile:hover {color: #000;}
.LargeTile {border-radius:13px;width: 96%; height: 30px; margin: 0 auto; font-size: 18px; text-align: center; display: table; cursor:pointer;}
.tileSt span, .MediumTile span, .LargeTile span{vertical-align:middle;display:table-cell;color: #FFF;}

#Agenda_Inhoud {margin-bottom:34px;}
#Agenda_Inhoud a:link, #Agenda_Inhoud a:visited {color:#0000FF;text-decoration:none;}
#Agenda_Inhoud img{vertical-align:middle;border:none;}

#Agenda_Items p {width:calc(98% - 5px);max-width:390px;margin:3px auto;padding:3px;}
#Agenda_Items table {width:calc(98% - 5px);max-width:390px;border:0;margin-left:auto;margin-right:auto;}
#Agenda_Items .td  {height: 20px; background: #CCC; color: #000; font-size: 20px; line-height: 20px;padding:4px;}
#Agenda_Items .td1 {border:2px solid #808080}
#Agenda_Items .td2 {border:2px solid #99CCFF;}
#Agenda_Items .td3 {border:2px solid #996600;}
#Agenda_Items .td4 {background:#CC0000;font-size: 15px;text-align:center;}
#Agenda_Items .td5 {background:#808080}
#Agenda_Items .td6 {background:#99CCFF;}
#Agenda_Items .td7 {background:#996600;}
#Agenda_Items .td8 {background:#CC0000;font-size: 15px;text-align:center;}
#Agenda_Items a:link, #Agenda_Items a:visited {color:#3300FF;text-decoration:none;}
#Agenda_Items hr {width:100%;max-width:390px;height: 2px;background: #C0C0C0;border:none;margin: 2px auto 5px auto;}

.OudenNieuw     {background:#FFF;color:#000;}
.Carnaval       {background:#6633CC;color:#FFF;}
.Pasen          {background:#FFFF00;color:#000;}
.Koninginnedag, .Koningsdag, .EKVoetbal, .WKVoetbal {background:#FF9933;color:#FFF;}
.Bevrijdingsdag, .Kerst  {background:#339933;color:#FFF;}
.Hemelvaartsdag {background:#0099FF;color:#FFF;}
.Pinksteren     {background:#33CC99;color:#FFF;}
.Vakantie       {background:#3333FF;color:#FFF;}

@media screen and (min-width: 600px) and (orientation: Landscape) {
    body {font-family:Verdana,sans-serif;font-size:15px;}
}