html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    font: -apple-system-body;
    overflow: hidden;
}

/* P */
p {
    margin: 3px 0;
}

/* table */
table {
    width: 100%;
    margin: 0;
    border: none;
    border-spacing: 0;
}

th, td {
    padding: 0 4px;
}

/* Label */
label {
    width: 75px;
    font-weight: bold;
    display: inline-block;
    vertical-align: middle;
}

form {
    margin: 0;
    clear: both;
}

/* Inputs */
input,
select,
textarea {
    font-size: 16px;
    border: 0.8px solid #333;
    border-radius: 4px;
    vertical-align: middle;
}

input[type=date] {width: 120px;}
input[type=datetime-local] {min-width:150px;}
input[type=submit],
.formButton {
    background: #0000FF;
    color: #FFF;
    font-size: 18px;
    margin: 4px 0;
    padding: 2px 5px;
}

.formButton {
    margin-left: 8px;
    margin-bottom: -5px;
    border-radius: 4px;
    font-weight: bold;
}

.input-km,
.input-uren,
.input-bedrag,
.input-postcode {
    width: 70px;
}

.input-kenteken {
    width: 90px;
}

.input-pytha {
    width: 150px;
}

.input-maxwidth {
    width: 100%;
    max-width: 350px;
    margin: 3px auto 0 auto;
}

img,
hr {
    border: none;
}

hr {
    height: 2px;
    width: 100%;
}

#error_script_text {
    width: calc(100% -20px);
    max-width: 450px;
    height: 20px;
    background: orange;
    color: #FFF;
    text-align: center;
    margin: 8px auto;
    padding: 5px;
    clear:both;
}

#Login {
    width: 380px;
    height: 150px;
    margin: 20px auto;
    font-size: 12px;
    border: 1px solid #000;
    z-index: 5;
}

#Login input {
    width: 350px;
    padding: 8px;
    margin: 10px auto 10px auto;
    border: none;
    border-bottom: 1px solid #000;
    display: block;
}

#Login input[type=submit] {
    width: auto;
    padding: 8px;
    margin-left: 8px;
}

#Login i {
    cursor: pointer;
    float: right;
    margin: -36px 18px 0 0;
    font-size: 18px;
}

.tileSt,
.tileFill {
    width: 76px;
    height: 76px;
    border-radius: 13px;
    font-size: 13px;
    color: #FFF;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
    text-align: center;
    cursor: pointer;
}

.tileFill {
    background-color: transparent;
}

.tileWide {
    width: calc(100% -16px);
    max-width: 434px;
    height: 52px;
    border-radius: 13px;
    margin: 8px auto;
    padding: 5px;
    display: flex;
    align-items: center;
    text-align: center;
}

.Rit {
    font-size: 16px;
    font-weight: bold;
    color: white;
     }

.datum {
    width: 100%;
    max-width: 450px;
}

.feestdag {
    width: calc(100% - 14px);
    padding: 3px 5px;
    margin: 0;
    font-size: 18px;
    font-weight: bold;
}

/* Balk onder feestdag */
.feestbalk {
    width: 100%;
    height: 3px;
    margin-bottom: 4px;
}

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

#voorkeuren_tabel label {
    width: 180px;
}

.agenda-nav {
    display: flex;
    justify-content: center; /* horizontaal centreren */
    align-items: center;     /* verticaal centreren */
    gap: 10px;               /* ruimte tussen knoppen en select */
    margin: 0 0 8px 0;          /* optioneel: ruimte rondom */
}

.agenda-nav button {
    font-size: 16px !important;
    max-width: 340px;
    border: 0.8px solid #0099FF;
    margin: 0;
    vertical-align: middle;
    padding: 3px;
    border-radius: 4px;
    font-weight: bold;
    color: #666;
}

.agenda-nav select {
    padding: 3px 4px;
}

.AlertMessage {
    width: calc(100% - 40px);
    max-width:410px;
    padding: 20px;
    background-color: #04AA6D;
    color: white;
    opacity: 1;
    transition: opacity 0.6s;
    margin: 15px auto;
    text-align: left;
}

.AlertMessage.warning { background: #f44336; }
.AlertMessage.info { background: #2196F3; }
.AlertMessage.notification { background: #ff9800; }
.Alertclosebtn {
    margin-left: 15px;
    color: #FFF;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 12px;
    cursor: pointer;
    transition: 0.3s;
}

.Alertclosebtn:hover { color: #000; }

.AlertMessage.fade-out {
    opacity: 0;
    transition: opacity 0.6s;
    pointer-events: none;
}

.BGblack     { background-color: #000000; }
.BGblue      { background-color: #0000FF; }
.BGdarkgray  { background-color: #333333; }
.BGdarkred   { background-color: #993333; }
.BGgray      { background-color: #C2C2C2; }
.BGgreen     { background-color: #008000; }
.BGlightblue { background-color: #0099FF; }
.BGorange    { background-color: #FF9900; }
.BGpurple    { background-color: purple; }
.BGred       { background-color: #FF0000; }
.BGwhite     { background-color: #FFFFFF; }

.rijkleur1 { background-color: #CCCCCC; }
.rijkleur2 { background-color: #999999; }

.TxTblack  { color: black; }
.TxTblue   { color: blue; }
.TxTgray   { color: #C2C2C2; }
.TxTgreen  { color: #008000; }
.TxTred    { color: #FF0000; }
.TxTwhite  { color: white; }

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

.TxTbold {font-weight:bold;}
.TxTnormal {font-weight:normal;}

.lb12 { margin-top: 12px; } /* Extra line-break */

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

table {
    max-width: 450px;
}

/* Boven- en onderbalk */
header,
footer {
    position: fixed;
    left: 0;
    right: 0;
    text-align: center;
    line-height: 32px;
    font-size: 24px;
    z-index: 50;
    font-weight: bold;
}

header {
    top: 0;
    height: 32px;
    border-bottom: 1px solid #FF0099;
    text-align: center;
}

/* Titelbalk elementen */
#title_agendamenu,
#title_mainmenu {
    position: absolute;
    width: 40px;
    font-size: 44px;
    font-weight: normal;
}

#title_agendamenu { left: 0; text-align: right; }
#title_mainmenu   { right: 0; text-align: left; }

/* Menu’s */
#mainmenu,
#agendamenu {
    position: absolute;
    top: 38px;
    border: 1px solid #FF0099;
    z-index: 100;
    text-align: left;
    line-height: 20px;
    display: none;
    background-color: #000000;
    font-weight: normal;
    padding: 5px;
    font-size: 15px;
}

#mainmenu { width: 170px; right: 4px; }
#agendamenu { width: 250px; left: 4px; }

#mainmenu a,
#agendamenu a {
    color: #FFF;
    text-decoration: none;
    float:left;
    clear:both;
}

#content {
    width: calc(100% - 16px);
    max-width: 450px;
    height: calc(100% - 113px);
    position: relative;
    top: 33px; bottom: 65px;
    margin: 0 auto;
    padding: 0 0 15px 0;
    overflow-y: auto;
    overscroll-behavior: none;
}

a {
    color: #000;
    text-decoration: none;
}

footer {
    bottom: 0;
    height: 64px;
    border-top: 1px solid #FF0099;
    font-weight: bold;
}

/* Onderbalk knoppen */
footer #edit_span {
    width: 60px;
    float: left;
    text-align: right;
    margin: 10px 0 0 60px;
    font-size: 44px;
}

footer #delete_span {
    width: 60px;
    float: right;
    text-align: left;
    margin-top: 10px;
    font-size: 44px;
}

footer #bottom_theme {
    position: absolute;
    left: 20px;
    top: 10px;
    width: 40px;
    height: 40px;
    border-radius: 20px;
}

.cube {
    width: 20px;
    height: 20px;
    margin: auto;
}

.tile-menu-c {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 10px;
    margin-top:8px;
    justify-content: center;
    clear:both;
}

.tile-menu-l {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 10px;
    margin-top:8px;
    clear:both;
}

.tile-menu-c a {
    color: #FFF;
    text-decoration: none;
}

.icon_con {
    float: right;
    padding: 10px 0;
}

.icon_con40 {
    width: 40px;
    height: 30px;
    float: right;
}

.icon_div50 {
    width: 50px;
    height: 24px;
    float: left;
    text-align: center;
    line-height: 24px;
}

.icon_div50 img {
    width: 20px;
    vertical-align: top;
}

#agenda_content {
    width: 100%;
    max-width: 450px;
    position: relative;
    left: 0; top: 0;
    padding-top: 8px;
}

#Agenda_Kalender table {
    width: 98%;
    border-spacing: 0;
    margin: 0 auto 5px auto;
    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;
}

select[name="maanjaar"] {
    color: #666;
    background: #F0F0F0;
    font-weight: bold;
    border-radius: 4px;
    border: 0.8px solid #0099FF;
    font-size:15px;
}

table.agenda-item {
    margin-top: 5px;
}

table.agenda-item td {
    padding: 3px;
}

table.agenda-item img {
    margin: 0 auto;
    vertical-align: middle;
}

#Agenda_Items p {width:calc(98%);max-width:450px;margin:3px auto;padding:3px;}
#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 {width: 44px; text-align: center; background:#808080}
#Agenda_Items .td6 {width: 44px; text-align: center; background:#99CCFF;}
#Agenda_Items .td7 {width: 44px; text-align: center; background:#996600;}
#Agenda_Items .td8 {background:#CC0000;font-size: 15px;text-align:center;}
#Agenda_Items hr {width:100%;max-width:390px;height: 2px;background: #C0C0C0;border:none;margin: 5px auto;}

#Signdocs table {
    width: 98%;
    border-spacing: 3px;
    margin: 0 auto 5px auto;
}

.form_werklijst label {
    width: 140px;
}

.form_werklijst textarea {
    width: 350px;
}

.form_combined-points label {
    width: 100px;
    vertical-align: top;
}
.form_ritregistratie label {
    width: 130px;
    vertical-align: top;
}

#form_opd label {
    width: 190px;
}

#form_opd span {
    float:right;
}

.form_betaling label {
    width: 115px;
}

.div_sitetool label {
    width: 100px;
}

.opddiv {
    width: calc(100% - 10px);
    max-width: 440px;
    border-radius: 4px;
    background-color: #CCCC95;
    color: black;
    margin: 8px auto;
    padding: 5px;
}

.opddiv h4 {
    font-size: 16px;
    margin: 2px;
    padding: 3px 10px;
    background-color: brown;
    color: white;
    border-radius: 6px;
}

.opddiv h4 a {
    color: white;
}

.opddiv h4 img {
    margin: 0 16px;
}

.opddiv p {
    margin: 0;
    padding:2px 6px;
}

.opddiv p label {
    width: 100px;
}

#agenda-details .opddiv p label {
    width: 130px;
    vertical-align: top;
}

#agenda-details .opddiv span {
    display: inline-block;
    max-width: calc(100% - 144px);
}

#agenda-details .opddiv img {
    display: inline-block;
    height: 14px;
}

.opddiv#planning-details p label {
    width: 60px;
    vertical-align: top;
}

.opddiv#planning-details span {
    display: inline-block;
    max-width: calc(100% - 70px);
}

.Facturen table {
    width: 100%;
    border-spacing: 0;
    margin-bottom: 5px;
    border: 1px solid #333;
    color: #000;
}

.Facturen th,
.Facturen td {
    border: 1px solid #333;
    padding: 3px;
}

/* REKENMACHINE */

@font-face{
 font-family:'digital-clock-font-italic';
 src: url('../fonts/digital-7.italic.ttf');
}
#calcu {width:100%;font-weight:bold;}
#calcu #input {font-family: 'digital-clock-font-italic';font-size:70px;width: calc(100% - 12px); max-width:368px; margin:20px auto 8px auto;padding:8px 6px;caret-color: transparent;border:none;background-color:#F4F5A8;text-align:right;}
#calcu .tileSt {
    font-size: 32px;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background: rgb(0,0,0); /* Fallback color */
    background: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background: #F2F2F7;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background: #993333;
    color: white;
}

.modal-body {padding: 2px 16px;max-height:65vh;overflow:auto;}

.modal-footer {
    padding: 2px 16px;
    background: #333;
    color: white;
}

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