html {
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: scroll;
    height: 100%
}

body {
    background-color: #f7f7f7;
    font-family: Verdana, sans-serif;
    font-size: 15px;
    line-height: 1.4;
    margin: 0;
    height: 100%
}

.topcontainer {
    padding: 20px;
    margin-top: 3em;
}

.container {
    padding: 20px;
}

.hidden {
    display: none !important;
}

.acenter {
    text-align: center;
}

.aright {
    text-align: right;
}

.bordered {
    border: 1px #ddd solid;
}

.small {
    font-size: .8em;
}

.smallgrey {
    font-size: .7em;
    color: #aaa;
}

.big {
    font-size: 1.2em;
    color: #5971cf;
}

.fullwidth {
    width: 100%;
}

hr, .hr {
    border-color: #777;
    border-width: 1px;
}

#loginbox {
    background-color: #eee;
    background-image: url('/media/promo/PromoBackground.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    overflow: hidden;
}

#logincontent {
    background: rgba(0, 0, 0, 0.7);
    border: 1px #000 solid;
    color: #fff;
    margin: 10% auto;
    width: 70%;
    padding: 1em;
    overflow: hidden;
}

#logincontent h1 {
    margin: 0.2em 0;
    font-size: 2em;
    color: #fff;
    text-shadow: 4px 4px 10px #333;
}

#navlogo {
    overflow: hidden;
    float: right;
}

#navlogo img {
    width: 90%;
    height: auto;
}

#mainnav {
    position: fixed;
    top: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding-bottom: 1em;
    background-color: #000;
    color: #fff;
    padding: 4px 20px;
    z-index: 1000;
}

.mainnavitem {
    display: inline-block;
}

.fabutton {
    display: inline-block;
    color: #5971cf;
    padding: .2em .4em;
    text-decoration: none;
    font-size: 1.5em;
    margin: .2em;
    cursor: pointer;
    border-radius: .2em;
    user-select: none;
}

.dashboardbutton {
    font-size: 2.5em;
    margin: 0;
    padding: 0;
}

#messages {
    border-top: 1px #fff solid;
    background: #eee;
    color: #000;
    padding: 20px;
    z-index: 1000;
    margin: 1em;
}

#savebutton {
    color: #009000;
}

#cancelbutton {
    color: #c00000;
}

.boxbutton, .button {
    display: inline-block;
    border-radius: .5em;
    text-align: center;
    background-color: #5971cf;
    color: #fff;
    padding: .5em 1em;
    margin: .3em .1em;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}

#mobileheader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: .5em 1em;
    background: #000 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF8AAAAjCAIAAAB9zkEYAAAAFXRFWHRDcmVhdGlvbiBUaW1lAAfnBBAIGRrffJJvAAAAB3RJTUUH5wQQCCcJzwYrvAAAAAlwSFlzAAALEgAACxIB0t1+/AAAB1JJREFUeNrtmHlsTVsUxk9rHmKexyJmoqaqITW1f4gIjSAihCAIQXliCGImEjGERCKoljSlNaViHouY51lMbc3E0BhqfL93VrLsnHt6e115RHrXHzf77LPP3mt/+1vfWvtaVsACFrCABSxgf4cF/WkH/LSSJUtGRUXly5evSJEiWVlZPBYsWPDZs2ffv3//+PEjAzIyMlJTU2vWrPnixYu3b9/mLnQmTpy4Y8eOBw8efPnyZePGjcOGDXvy5EmePHkAq1SpUkFBQZUrV65UqdLnz58fP358/Phx/1YJ/tPb9MeqVasGLleuXMnMzAQCeh49evTt2zeweP369d27d+/cuXPkyJHixYsfPXq0Xbt2fi/0V6ITERGxe/duaTdq1Oj69euuw7Zt2xYWFga5ypQpk4vQqV+//qtXr6QNjy5evOg6jFgrVKgQ9OnUqVNuQad8+fK3bt3Sx8aNG6enp7uORKrfvXt38+bN5s2b+7dW3j+92Z+2Bg0aIDc0goODEeCKFSueO3fOHAB8aE1ycvLs2bN5/Pr1K8GVW9CBLG3atBk0aJD2jBo1ColR9UGMS5QoERoaWr16dR5r1apFjke8nz59ClI/tdb/ntGLFi3KCZNT/D5AtVatWg0cOLBKlSqubwm3FStWkLBoUweR5vPm/e/st27dCptat25Nm9QO427cuHHhwgVUibjzFZ3evXv379/f8fratWusunnzZlFBzzFUYg8fPkQXt2zZokop/vXo0aNnz54UINKDKziK06Re6Zk3bx5EkEmGDx9O2aafN2nSZM6cOdLev3//kiVLwIXZvG+GJaZMmSIARUZGjhkzhkZSUhK1j6Bj2u3bt9Hs2NhYKoPsYPqhypRSnq8Jcja5Zs0a0oTrmAIFClCPRkdHr1q1qnbt2tJJBl25cuWAAQMUGox2v379ON4KFSpID6qpk3Ts2NGclr1pu3DhwpadnqlivKPDEiCOP7T37du3aNEiL4PxFhpOnTp19erVECoHdLwYFEXhQNrLGHY4bdo0aU+YMKFcuXKuw3AoJibGs79bt27aZqEOHTo4BnAwZkyRiQB68eLFKSkpUM8EaOTIkdI+dOhQfHx8+/bta9So4R3T8ePHu9ZE7qo8adIkgpOby9ixY8PDw2XzEgVqcJi4Q1aYumnTppbNBWozRsI4GcMFB1jhcNWqVadPn162bFnL5iNMOXjwoDkb35J3z549S7tt27bmK64F/MJEZpae5cuXazV44MABopVVRIOxOnXq9OrVizsXbWJKFvVuEbbNnz/fcedw586HDx+Qd6Jx+/bt2om4mmN4y5g3b97s3bvX3KQZ4RwvKDPs/v37bEn7W7Zs6bmofti9e3ezn4tl/vz5NfQgi0Ijht6pSIkB5T+2ea8DURzOQ6kH5R2Sn0NkUYmacLiOIZWYjtarV0/aEMc8CtKEzuBK9c6dO6PlpUuXDgkJsWyp1lcmbXfu3On5LQno/Pnzls8GswjAyZMnz5gxY+jQoWfOnLFsAenbt685zD2yKCiQYYCMiorSTuLIhHbEiBFgQchoJ3BwGiq6jv8NSFWMF512HNHhw4dRB5wDIKoVekj/u3btUhKJMItx53b1Gb77js7cuXPT0tL0RAlMkhfEZ+MotGZVd3T69Onj6CEZv3z50uxRjqgtW7bMshUqR+cctc/JkydRNz7EOYGPy9GnT590wPv377VNcawbMw2V9BGa58+fS9ZXA449e/awa04I5upbn2rlxMTE9evXex+zcOFCNmnZ2aRu3bqWrUHmOZCJVCAJBPNbFI14oXQQdcdOnTplavPly5e1DZ3JwY7VUd9mzZpJG41zzK8mGca1LtVDNd+6o0MuZAE2xu+JEydcSUtFw4xa0SMNqampll2zCjqwgHjR3MTO1QPHfw4EDqkHdOSRkGQqlQByFjw6ffq0aDnDKHzwUD/nGBBU3dvMmTPNwtK0DRs2FCtWDPaBJkWs+QpXpZGRkZEDOhTH9+7ds7waO4SBYWFhDRs25LFLly4kL5I3cGjxgvKhxJw8pdfo0aP1WxB3zMZyyKpwhwuk+YqcxS/k1UxHDQGzoCqooY+0tbBEAbKDxrIVXUSDIpD8LRFKQhw3bpzMwCEp2bNFR0oMX2zTpk2CjmBBfQRAx44dk7gwS0S1q1evEjieU5HgQEf02NMZTiIuLo5ULZ3htjlmIG+sW7fOi7dATF0Dd0gLVBscG5kR1gupOUiHgPzq/zvUC5cuXZI2t2H5J2Xp0qWoj+t4gmLWrFmur9BF3E1ISDA12HESa9euze42y5F4noSnLViwQApFy1aDFi1aKDTUtwi2OfgHd6S+4JeaPbvSBr9xDmHPsk06uWFR0cu3Q4YMAS90ikqsa9eu0Fg5z8IQmx3qbKwikwgcUBr/9G1mZqYAQcGpnYQ8FGNmyjwUxLKFBlygG8WEL8cJBwcPHkwxTfiLb/iAJnBZdSTl32FgTWC7XnF/0YJt+/VJfjciAQtYwAIWMD/tX19uuRyDd9XHAAAAAElFTkSuQmCC') right 1em center no-repeat;
    margin-bottom: 2em;
    border-bottom: 1px #333 solid;
}

.mobilenavbutton {
    display: inline-block;
    color: #b3b3b3;
    text-decoration: none;
    font-size: 1.5em;
    cursor: pointer;
    user-select: none;
}

.mobilecontainer {
    background-color: #000;
    color: #fff;
    padding: 1em;
    overflow: hidden;
}

.mobilebutton {
    display: block;
    border-radius: .5em;
    text-align: center;
    background-color: #5971cf;
    color: #fff;
    padding: 1em;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}

.mobilediv p {
    background-color: #333;
    color: #777;
    text-align: center;
    padding: .5em;
}

.mobilediv .fileinfo {
    border: 1px #333 solid;
    background-color: #333;
    padding: .5em;
}

#sidepanel p {
    color: #aaa;
    display: block;
    margin: .5em;
    text-align: center;
}

#sidepanel .button {
    display: block;
    margin: .3em .5em;
}

.adminbutton {
    background-color: #800000;
}

.adminbutton:hover {
    background-color: #500000;
}

.boxbutton:hover, .button:hover, .navbutton:hover {
    color: #fff;
}

.editgroup {
    margin-top: 2em;
}

.grouplabel, .toplabel {
    text-transform: uppercase;
    color: #5971cf;
    font-weight: bold;
    font-size: 1.5em;
    border-bottom: 2px #5971cf solid;
    word-break: break-all;
}

.lblandfld {
    margin: 10px 0;
}

.molabel {
    display: inline-block;
    width: 15%;
    text-align: right;
    vertical-align: middle;
    padding: 0 1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.editfield {
    margin: .2em 0;
    padding: .75em .5em;
    box-sizing: border-box;
    width: 70%;
    border: #ccc 1px solid;
    font-family: inherit;
    font-size: inherit;
}

.printinput {
    width: 10em;
    margin-right: .5em;
    flex-shrink: 0;
}

#fileuploadprogress {
    display: inline-block;
    margin: 0 1em;
    font-size: .9em;
    color: #aaa;
}

.memo {
    width: 100%;
    min-height: 200px;
    resize: none;
}

.pwarning {
    color: red;
}

.keuringwrapper {
    overflow-x: scroll;
    border: #ccc 1px solid;
}

table {
    background-color: #fff;
    border-collapse: collapse;
    width: 100%;
}

table th {
    background: #5971cf;
    text-align: left;
    color: #fff;
    padding: 10px;
}

table tr {
    border: #ccc 1px solid;
    vertical-align: top;
}

table td {
    padding: 10px;
}

.pre {
    white-space: pre-wrap;
}

.nowrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flexdiv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    overflow: hidden;
}

.machine {
    background-color: #fff;
    border: 1px #ddd solid;
    margin: .5em 0;
    padding: .2em .5em;
    cursor: pointer;
}

.machine.selected .machinenumber {
    background-color: #5971cf;
    color: #fff;
}

.machine p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 .5em;
}

.machinenumber {
    margin: 0;
    padding: .5em;
    min-width: 4em;
    background: #eee;
    text-align: center;
    border-radius: .5em;
}

.machinethumbnail {
    background: #eee;
    object-fit: cover;
    width: 3.2em;
    height: 3.2em;
    border-radius: .5em;
    overflow: hidden;
    margin: 0 .5em;
}

.machinethumbnail img {
    display: block;
}

.machinekeywords {
    display: none;
}

.mobilemachine {
    border-bottom: 1px #ccc solid;
}

.mobilemachine.selected {
    color: #5971cf;
}

.mobilemachine p {
    margin: 0;
    padding: 1em 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

#mobilemachinelabel {
    color: #5971cf;
    word-break: break-all;
}

.mobileinforow {
    padding-top: 1em;
    border-top: 1px #777 solid;
    white-space: pre-line;
}

#printdata p.mobileinforow {
    padding: .2em;
    margin: 0;
    border: none;
}

.printheader {
    font-size: 1.5em;
    border-bottom: 1px solid #000;
}

#filterbox {
    margin: 1em 0;
}

#filterfield {
    padding: .75em .5em;
    box-sizing: border-box;
    border: #ccc 1px solid;
    font-family: inherit;
    font-size: inherit;
}

#cardcontainer {
    margin: 0 auto;
    padding: 1em;
    max-width: 800px;
    text-align: center;
}

.card {
    display: inline-block;
    width: 300px;
    border: #ccc 1px solid;
    background: #fff;
    margin: 1em;
    padding: 1em;
    text-align: center;
    box-shadow: 5px 5px 10px #ccc;
    cursor: pointer;
}

.card h1 {
    font-size: 2.5em;
    color: #777;
    margin: 0;
}

.card p {
    color: #777;
    margin: 0;
}

.card .fabutton {
    color: #5971cf;
}

#sidepanel {
    position: fixed;
    box-sizing: border-box;
    top: 0;
    bottom: 0;
    z-index: 5000;
    background: #ddd;
    min-width: 250px;
    padding: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translateX(-110%);
    transition: transform 1s ease-in-out;
}

.shadow {
    box-shadow: 0px 0px 25px #222;
}

.shadow2 {
    box-shadow: 0px 0px 15px #777;
}

.slideIn {
    animation: slideIn 0.8s forwards;
}

.slideOut {
    animation: slideOut 0.8s forwards;
}

@keyframes slideIn {
    100% {
        transform: translateX(0%);
    }
}

@keyframes slideOut {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-110%);
    }
}

#debug {
    border: 1px #aaa solid;
    overflow: scroll;
    background-color: #eee;
    margin: 20px;
    padding: 20px;
    font-size: .7em;
    word-break: break-all;
}

.fileinfo, .userinfo, .onderhoudinfo {
    overflow: hidden;
    display: block;
    padding: 1em;
    margin: .5em 0;
    border: #ddd 1px solid;
    background-color: #fff;
    text-align: left;
    cursor: pointer;
    position: relative;
}

.onderhoud2machine {
    text-align: right;
    margin: 0;
}

.onderhoud2machine a {
    color: #5971cf;
    font-size: .8em;
    padding: .5em 1em;
    text-decoration: none;
}

.filename {
    word-break: break-all;
    user-select: none;
}

.adminlinkcontainer {
    display: inline-block;
    position: absolute;
    right: 10px;
    bottom: 8px;
    z-index: 2;
}

.downloadlink {
    background-color: #fff;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAIAAAC0Ujn1AAAAFXRFWHRDcmVhdGlvbiBUaW1lAAffChENMzCCwgm+AAAAB3RJTUUH3woRDTgchu9f5gAAAAlwSFlzAAALEgAACxIB0t1+/AAAAKpJREFUeNrt1lEKgCAMBmCTjqWn8hzeygdPpf0h+FCbW0SB4B7r96OWk7acs/mm7Efuon+ldzGRUiKvO+de0XBDCOStGONYn7PXi170uOiR4SaQi5GzQ9DWnq/CDWGvHsBYYkkpRW4IQt57LNA8OGII313D9brWqtGbizB5l/2MWIAODvR2PHGuEXcIp4vHnkyTusZV0Rdd6aI2/X9I28VK9xn9tOY8Q+akD9K0Ti0HieR3AAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
    display: inline-block;
    height: 30px;
    width: 30px;
    margin: 2px;
    cursor: pointer;
}

.approvelink {
    background-color: #fff;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeBAMAAADJHrORAAAAFXRFWHRDcmVhdGlvbiBUaW1lAAffChcNERrboNmUAAAAB3RJTUUH3woXDS0iVVD7hQAAAAlwSFlzAAALEgAACxIB0t1+/AAAACRQTFRFxsbGe3t75+fn1tbW////7+/vvb299/f33t7ezs7OjIyMlJSUHi9GjQAAAGRJREFUeNpjYBg4IIDKZWxE4SZIeKIoYGzxEETmS7h4CKBIu8D0M25AlZYQQJVuKUSRlnJxFUCSZkhc7qIohGy4pIuziUsjilVALUh2i7u4BLIh8cVQpRkYTQJRvSqE7nWahTEAENQSIhyJdbEAAAAASUVORK5CYII=);
    background-repeat: no-repeat;
    display: inline-block;
    height: 30px;
    width: 30px;
    margin: 2px;
    cursor: pointer;
}

.editlink {
    background-color: #fff;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeBAMAAADJHrORAAAAFXRFWHRDcmVhdGlvbiBUaW1lAAfgAQgVMjlf3e7vAAAAB3RJTUUH4AEIFTgLuOS0lQAAAAlwSFlzAAAK8AAACvABQqw0mAAAABtQTFRFxsbGe3t7////zs7OlJSU7+/vjIyM9/f35+fnYcXK3gAAAE9JREFUeNpjYKAbSEHlCgoKIHMZxZVQ+EKKTYLI0kpKEsjyQkpKigko0uqKqNKqAijSSoHkS5uiSjMKo0gzMIaYhqF4RUjYAYUviOwT+gIAupYJKKfOusUAAAAASUVORK5CYII=);
    background-repeat: no-repeat;
    display: inline-block;
    height: 30px;
    width: 30px;
    margin: 2px;
    cursor: pointer;
}

.deletelink {
    background-color: #fff;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAIAAAC0Ujn1AAAAFHRFWHRDcmVhdGlvbiBUaW1lAAffChENNSz0qnUAAAAHdElNRQffChENOCZA44ZUAAAACXBIWXMAAAsSAAALEgHS3X78AAAA6klEQVR42u2WTQqDMBCFOyYH8DRCxCN4m2xduvUAOU9EvY1LXah0wBIKZsa/umjrrF6Gx8fkGUygaZrHNRVcxP1atNxiqqpqmqbXLEEQx/Fn0GVZaq3fO0VRJElyNpAlFws72D8+dV3XwzD0fT8vsywTQozjmOc5Lruus9ZKKZVSFAG859o7rLeYcPyB4IBbuLzTj8Zt4jizxr1TAj1MIORndKfNGEMJ59mHxvM7i7ZtKeE8+9CuAIASfK0HEoYhJe5A/jmQZTJLcRYdRRElzqLTNKXEQfSWnx/vAeYdsnqV8NcY3E+cX0A/AZwnhsf8EfBRAAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
    display: inline-block;
    height: 30px;
    width: 30px;
    margin: 2px;
    cursor: pointer;
}

.machineimage {
    position: relative;
    overflow: hidden;
    display: inline-block;
    margin: .1em .2em;
    max-width: 32%;
    user-select: none;
    cursor: pointer;
    box-sizing: border-box;
}

.machineimage img {
    display: block;
    width: 100%;
    height: auto;
}

.overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
}

#samenvattingtext {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.onderhoud {
    border: 1px #ddd solid;
    padding: .5em;
    margin: .5em 0;
}

.onderhoud p {
    margin: .2em;
}

.machineprintlist {
    overflow: hidden;
}

#printcontrols {
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    margin: .5em 0;
    padding: .5em;
    border: 1px #ddd solid;
}

.printmachine {
    background: #fff;
    border: 1px #ddd solid;
    margin: .2em 0;
    padding: .4em;
    overflow: hidden;
}

.printinfo {
    margin: 0;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
}

.printmachinenumber {
    display: inline-block;
    width: 4em;
    background-color: #eee;
    padding: .1em;
    text-align: center;
}

.printmachinename {
    margin-left: 1em;
}

.printmachinedetails {
    font-size: .8em;
    color: #777;
    margin-left: 1em;
}

#log {
    background: #fff;
    margin: 1em 0;
    border: #ddd 1px solid;
    padding: .5em;
    overflow: hidden;
}

#log .logrow {
    border-bottom: 1px #eee solid;
    padding: .2em;
}

#log p {
    margin: .1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.logdatetime {
    color: #ddd;
    float: right;
    padding-left: 1em;
}

#qrcode, #parkbuttons, #deletebuttons {
    overflow: hidden;
    display: inline-block;
}

.printqrcode {
    float: right;
}

.blink {
    opacity: 0;
    animation: blinking 1s linear infinite;
}

@keyframes blinking {
    from, 49.9% {
        opacity: 0;
    }
    50%, to {
        opacity: 1;
    }
}

@media (max-width: 700px) {

    #navlogo {
        display: none;
    }

    .boxbutton, .button {
        display: block;
    }

    .fabutton {
        margin: .3em .01em;
    }

    .card {
        display: block;
        width: auto;
        margin: 1em 0;
    }

    .molabel {
        display: block;
        width: initial;
        text-align: left;
        padding: 0;
    }

    .flexdiv, .flexitem {
        display: block;
    }

    #printcontrols {
        display: block;
    }
    
    .machinecell {
        text-align: center;
        margin: .2em;
    }

    .machine {
        border: 1px #bbb solid;
        padding: .5em;
        margin: 1em 0;
        box-shadow: 0px 0px 5px #ccc;
    }

    .machinethumbnail {
        display: none;
    }
    
    .machinenumber {
        display: inline-block;
    }

    .machineimage {
        margin: 0;
        max-width: initial;
        width: 100%;
        height: auto;
    }

    .editfield {
        width: 100%;
    }

    #debug {
        display: none;
    }

    #log {
        font-size: .8em;
    }

}

@media print {

    html, body {
        border: 1px solid white;
        height: 95%;
        page-break-after: avoid;
        page-break-before: avoid;
    }

    #sidepanel, #mainnav, #printcontrols, .toplabel {
        display: none;
    }

    #main {
        margin: 0;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
    }

}