:root {
    --main-bg-colour: #000;
    --main-accent-colour: #ccc;
    --main-font-colour:#FFF;
    --content-font-colour:#000;
    --notice-colour:#F1A208;
    --error-colour:tomato;
    --content-bg-colour:#D5C67A;
}

* {
    box-sizing: border-box;
    padding:0;
    margin:0;
    max-width: 100vw;
    max-height: 100vh;
    font-family: verdana,sans-serif;
}

.menu-bar {
    padding:3vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: var(--main-bg-colour);
    color:var(--main-font-colour);
    border-bottom:solid 2px #FFF;
}

body {
    background-color: var(--main-accent-colour);
    color: var(--content-font-colour);
}

.auth-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5vw;
}

.auth-page input {
    padding:5vw;
    font-size:5vw;
    margin:2vw;
    width:80vw;
}

.notice {
    width:90vw;
    background-color: #000;
    color:var(--error-colour);
    text-align: center;
    font-weight: bold;
    padding:4vw;
    border-radius:5vw;
    margin:5vw auto;
}

.notice:empty {
    display: none;
}

div.footer {
    height:4vh;
    font-size:3vw;
    background-color: #000;
    color:#FFF;
    text-align: center;
    border-top:solid 2px #FFF;
    line-height:4vh;
}

div.content {
    height: 96vh;
    padding-bottom:2vh;
    overflow: scroll;
}

.menu-bar a {
    color:var(--main-font-colour);
    text-decoration: none;
}

div.nav div {
    color:#FFF;
    height:14vw;
    line-height:14vw;
    text-align: center;
    background-color: #000;
    border:#FFF 2px solid;
    width:80vw;
    margin:3vw auto;
    border-radius: 2vw;
}

div.nav a {
    color:#FFF;
    text-decoration: none;
    display: inline-block;
    width:100%;
    height:100%;
}

.flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

form input[type="radio"]:checked + label {
    background-color:var(--notice-colour);
    color:var(--content-font-colour);
}

input.hidden {
    visibility: hidden;
}

input.hidden+label {
    width:90vw;
    display: block;
    text-align: center;
    margin:0 auto;
    padding:4vh;
    border:solid 2px #ccc;
    border-radius:4vw;
    background-color: var(--main-bg-colour);
    color:var(--main-font-colour);
}

form button, .generic-button {
    width:90vw;
    display: block;
    margin:4vw auto;
    height: 2rem;
    border-radius:4vw;
    background-color: var(--main-bg-colour);
    color:var(--main-font-colour);
    height:12vw;
}

.generic-button a {
    color:var(--main-font-colour);
    text-decoration: none;
    text-align: center;
    display: inline-block;
    width:100%;
    height:100%;
    line-height: 12vw;
}

.change-lpn a {
    color:var(--content-font-colour);
    text-decoration: none;
    border-bottom: solid 1px var(--main-bg-colour);
}

div.value {
    padding:1vw;
    border:solid 1px #ccc;
}

.label {
    padding:1vw;
}

div.scan-history {
    width:90vw;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-size:12px;
    margin:3vw auto;
    border:solid 2px var(--notice-colour);
    border-radius:3vw;
    background-color: var(--main-bg-colour);
    color:var(--main-font-colour);
}

div.scan-history div:nth-child(n+2) {
    margin:3vw 0 0 0;
}

div.scan-history div.description {
    padding:3vw;
    line-height:1.2rem;
}

div.scan-history div.main-info div:nth-child(1) {
    font-size:18px;
    text-align: center;
    padding:1vw;
    border-top-right-radius: 2vw;
    border-top-left-radius: 2vw;
    color:var(--content-font-colour);
    background-color: var(--notice-colour);
    font-weight:bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

div.scan-history div.main-info div:nth-child(2) {
    font-size:16px;
    text-align: center;
    padding:1vw;
    font-weight: bold;
}

div.scan-history div.main-info div:nth-child(3) {
    font-size:12px;
    text-align: center;
    padding:1vw;
}

div.scan-history div.description {
    background-color: #000;
    margin-top:2vw;
    border-bottom-right-radius: 3vw;
    border-bottom-left-radius: 3vw;
}

.scan-history .delivery-zone {
    padding:1vw;
    font-size:16px;
    text-align: center;
}

label .destination-name {
    font-size:8vw;
}

label .vehicle-count {
    font-size:4vw;
    margin-top:2vw;
}

.schedule-title {
    font-size:8vw;
}

.linehaul-item {
    padding:1vw;
    margin:1vw;
    border:solid 2px var(--main-font-colour);
    border-radius: 4vw;
    background-color: var(--main-bg-colour);
    color:var(--main-font-colour);
}

.linehaul-item div {
    padding:1vw;
}

.linehaul-item .description {
    background: var(--main-bg-colour);
    color:var(--main-font-colour);
    padding:2vw;
    border:solid 2px var(--main-font-colour);
    margin:1vw 0 0 0;
}

.linehaul-item .description:empty {
    display: none;
}

.picked {
    background-color: green;
    color:var(--main-font-colour);
}

.linehaul-item .client {
    text-overflow: ellipsis;
    overflow: hidden;
    width:100%;
    white-space: nowrap;
    font-size:1.2rem;
    border-bottom:solid 1px var(--main-font-colour);
}

.linehaul-item .dimensions {
    font-weight:bold;
}

.missing {
    background-color: tomato;
}

.wrong-depot {
    background-color: #F94;
    color:#000;
}