/* fonts */
@font-face { font-family:FontRegular; src:url(../fonts/hamburg-ah-regular.woff2) format("woff2"),url(../fonts/hamburg-ah-regular.woff) format("woff"),url(../fonts/hamburg-ah-regular.ttf) format("ttf"),url(../fonts/hamburg-ah-regular.eot) format("eot"); font-weight:100; font-style:normal}
@font-face { font-family:FontMedium; src:url(../fonts/hamburg-ah-medium.woff2) format("woff2"),url(../fonts/hamburg-ah-medium.woff) format("woff"),url(../fonts/hamburg-ah-medium.ttf) format("ttf"),url(../fonts/hamburg-ah-medium.eot) format("eot"); font-weight:400; font-style:normal}
@font-face { font-family:FontSemiBold; src:url(../fonts/hamburg-ah-demibold.woff2) format("woff2"),url(../fonts/hamburg-ah-demibold.woff) format("woff"),url(../fonts/hamburg-ah-demibold.ttf) format("ttf"),url(../fonts/hamburg-ah-demibold.eot) format("eot"); font-weight:700; font-style:normal}
@font-face { font-family:FontBold; src:url(../fonts/hamburg-ah-bold.woff2) format("woff2"),url(../fonts/hamburg-ah-bold.woff) format("woff"),url(../fonts/hamburg-ah-bold.ttf) format("ttf"),url(../fonts/hamburg-ah-bold.eot) format("eot"); font-weight:900; font-style:normal}

html { box-sizing: border-box; } 
*, *:before, *:after { box-sizing: inherit;  } 
html, body { padding: 0px; margin: 0px; font-family: FontMedium; font-size: 16px; line-height: 24px; color: #303030; overflow: hidden; }
body { background-color: #00ade6; }
body { width: 100vw; height: 100vh; max-height: -webkit-fill-available; } 

input { border-radius: 6px; padding: 0px; margin: 0px; font-family: FontMedium; font-size: 16px; line-height: 24px; color: #303030; border: 1px solid #e0e0e0; padding: 6px 12px; }
input:focus { outline: none; }

form#prognose { position: absolute; top: 0px; left: -360px; width: 360px; height: 100vh; max-height: -webkit-fill-available; overflow: auto; padding: 48px; background-color: #FFFFFF;  } 
form#werkelijk { position: absolute; top: 0px; right: -360px; width: 360px; height: 100vh; max-height: -webkit-fill-available; overflow: auto; padding: 48px; background-color: #FFFFFF; } 
form {  }
form h1 { padding: 0px; margin: 0px 0px 24px 0px; }
form p { padding: 0px; margin: 0px 0px 24px 0px; }
form .controllers { display: flex; flex-wrap: wrap; flex-direction: column; gap: 24px; margin-top: 96px; }
form .controllers .controller { display: flex; flex-wrap: wrap; flex-direction: column; gap: 12px; }
form .controllers .controller button[type="submit"] { cursor: pointer; border: 0px; background-color: #00ade6; color: #FFFFFF; border-radius: 6px; font-family: FontMedium; font-size: 16px; line-height: 24px; padding: 6px 12px; }
form .controllers .controller button[type="button"] { cursor: pointer; border: 0px; background-color: #F5F5F5; color: #757589; border-radius: 6px; font-family: FontMedium; font-size: 16px; line-height: 24px; padding: 6px 12px; }
form .controllers .controller button[type="submit"]:hover { background-color: #303030; }
form .controllers .controller button[type="button"]:hover { background-color: #DBDBDB; }

#cog {  color: #FFFFFF; cursor: pointer; position: absolute; top: 48px; left: 48px; width: 24px; height: 24px; }
#time { color: #FFFFFF; cursor: pointer; position: absolute; top: 48px; right: 48px; width: 24px; height: 24px; }
#reload { color: #FFFFFF; cursor: pointer; position: absolute; bottom: 48px; left: calc((100% - 48px) / 2); width: 24px; height: 24px; }
#previous { color: #FFFFFF; cursor: pointer; position: absolute; bottom: 48px; left: 48px; width: 24px; height: 24px; }
#next { color: #FFFFFF; cursor: pointer; position: absolute; bottom: 48px; right: 48px; width: 24px; height: 24px; }
body.cog form#prognose { z-index: 9999; left: 0px; box-shadow: rgba(0, 0, 0, 0.176) 0px 16px 48px 0px; }
body.time form#werkelijk { z-index: 9999; right: 0px; box-shadow: rgba(0, 0, 0, 0.176) 0px 16px 48px 0px; }
#overlay { position: absolute; top: 0px; left: 0px; background-color: rgba(0, 0, 0, 0.00); width: 100vw; height: 100vh; max-height: -webkit-fill-available; display: none; }
body.cog #overlay { display: block; background-color: rgba(0, 0, 0, 0.25); }
body.time #overlay { display: block; background-color: rgba(0, 0, 0, 0.25); }
#time { transition: top .2s ease-in-out; }
#cog { transition: top .2s ease-in-out; }
form#prognose { transition: left .2s ease-in-out; }
form#werkelijk { transition: right .2s ease-in-out; }
#overlay { z-index: 9000; transition: background-color .2s ease-in-out; }

body.cog #time { top: -48px; }
body.time #cog { top: -48px; }


body.cog #reload,
body.time #reload { display: none; }
body.cog #previous,
body.time #previous { display: none; }
body.cog #next,
body.time #next { display: none; }

*::-webkit-scrollbar { background-color: transparent; }
*::-webkit-scrollbar { width: 0.375rem!important; }
*::-webkit-scrollbar { height: 0.375rem!important; }
*::-webkit-scrollbar-thumb { --tw-bg-opacity: 1!important; background-color: #CDCDCD; }
*::-webkit-scrollbar-thumb { border-radius: 0.25rem!important; }
*::-webkit-scrollbar-track { --tw-bg-opacity: 1!important; background-color: #F5F5F5; }
*::-webkit-scrollbar-track { border-radius: 0.25rem!important; }

#kantine { width: 100vw; height: 100vh; max-height: -webkit-fill-available; position: absolute; top: 0px; left: 0px; }

.kantine {  width: 100%; height: 100%; padding: 48px 120px 120px 120px; display: flex; flex-wrap: nowrap; flex-direction: column; gap: 24px; color: #FFFFFF; }
.kantine .kantine-datum { font-size: 24px; line-height: 24px; font-family: FontSemiBold; text-align: center; }
.kantine .kantine-tekst { font-size: 48px; line-height: 48px; font-family: FontSemiBold; text-align: center;  }
.kantine .kantine-eindtijd { font-size: 192px; line-height: 192px; font-family: FontBold; text-align: center;}
.kantine .kantine-informaties { }
.kantine .kantine-informaties .informaties { max-width: 1200px; margin: 0px auto; display: flex; flex-wrap: nowrap; flex-direction: row; gap: 24px; } 
.kantine .kantine-informaties .informaties .informatie { flex: 1; font-size: 18px; line-height: 24px; display: flex; flex-wrap: nowrap; flex-direction: column; gap: 12px; }
.kantine .kantine-informaties .informaties .informatie .informatie-regel { display: flex; flex-wrap: nowrap; flex-direction: row; gap: 24px; }
.kantine .kantine-informaties .informaties .informatie .informatie-regel div { flex: 1; }
.kantine .kantine-informaties .informaties .informatie .informatie-regel div:nth-child(2) { font-family: FontSemiBold;}

.kantine-grow { flex-grow: 1; display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; justify-content: center; }

.kantine .kantine-rapportages .rapportages { max-width: 1200px; margin: 0px auto; display: flex; flex-wrap: nowrap; flex-direction: row; gap: 48px; margin-top: 48px; } 

.kantine-rapportages {  }
.kantine-rapportages .rapportages {  }
.kantine-rapportages .rapportages .rapportage {  }
.kantine-rapportages .rapportages .rapportage.rapportage-table { flex-basis: 80%; }
.kantine-rapportages .rapportages .rapportage table { width: 100%; border: 1px solid #FFFFFF; border-radius: 6px; overflow: hidden; }
.kantine-rapportages .rapportages .rapportage table thead  {  }
.kantine-rapportages .rapportages .rapportage table thead tr {  }
.kantine-rapportages .rapportages .rapportage table thead tr td { text-align: center; width: calc(100% / 7); vertical-align: top; padding: 6px 12px; }
.kantine-rapportages .rapportages .rapportage table thead tr td:not(:first-child) {   border-left: 1px solid #FFFFFF; }
.kantine-rapportages .rapportages .rapportage table tbody {  }
.kantine-rapportages .rapportages .rapportage table tbody tr {  }
.kantine-rapportages .rapportages .rapportage table tbody tr td { vertical-align: top; cursor: pointer; padding: 6px 12px; }
.kantine-rapportages .rapportages .rapportage table tbody tr td:not(:first-child) {   border-left: 1px solid #FFFFFF; }
.kantine-rapportages .rapportages .rapportage table tbody tr td {  border-top: 1px solid #FFFFFF; }
.kantine-rapportages .rapportages .rapportage.rapportage-scores { flex-basis: 20%; }
.kantine-rapportages .rapportages .rapportage.rapportage-scores {  }
.kantine-rapportages .rapportages .rapportage.rapportage-scores .scores { border-radius: 6px; border: 1px solid #FFFFFF; padding: 6px 12px; }

.kantine-rapportages .rapportages .rapportage > strong { margin-bottom: 12px; display: block; }

.agenda { display: flex; }
.agenda .agenda-vulploegleider {  }
.agenda .agenda-score { margin-left: auto; }

strong { font-family: FontBold; }