@import url('normalize.css');
@import url('jqdatepicker.css');
@import url('selectize.css');
@import url('material-design.css');


/* Animations */

@keyframes blink {
    50% {
        opacity: 0;
    }
}


/* Global Styles */

* {
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
    background: #133751;
    margin: 0;
    padding: 1.5rem;
    line-height: 1.2;
    font-weight: 300;
    -webkit-overflow-scrolling: touch;
}

.pagecontainer {
    background-color: #fff;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0.75rem;
    border-radius: 5px;
    transition: 0.2s;
    clear: both;
}

.pagecontainer + .pagecontainer {
    margin-top: 2rem;
}

.clearfix:before,
.clearfix:after {
    content: '';
    display: table;
    clear: both;
}

#overlay {
    background: #000 url('../images/loading.gif') no-repeat center center;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9999999;
    opacity: 0.13;
}


/* Structure */

.row {
    display: flex;
    width: 100%;
    margin: 0 0 1rem;
    padding: 0;
    flex-wrap: wrap;
    border: 0 none;
}

.full {
    width: 100%;
}

.half {
    display: flex;
    width: 50%;
    align-content: flex-start;
    flex-wrap: wrap;
}

.third {
    width: 33.3%;
}

.twothirds {
    width: 66.6%;
}

.quarter {
    display: flex;
    width: 25%;
    align-items: flex-start;
    flex-wrap: wrap;
}

.threequarters {
    width: 75%;
}

.fifth {
    width: 20%;
}

.row .full,
.row .half,
.row .third,
.row .twothirds,
.row .quarter,
.row .threequarters,
.row .fifth,
.row .onefifths {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.row.full,
.row.half,
.row.third,
.row.twothirds,
.row.quarter,
.row.threequarters,
.row.fifth,
.row.onefifths {
    padding: 0;
}

.narrow {
    width: 100%;
    max-width: 25rem;
    margin: 0 auto;
}

.row .nopadding {
    padding: 0;
}


/* Header */

header {
    display: flex;
    margin-bottom: 1rem;
    padding: 0.5rem 0.5rem 1rem;
    border-bottom: 1px solid #e3e3e3;
    justify-content: space-between;
}

header h1 {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
    font-size: 1.85rem;
    line-height: 1;
}

.system {
    display: flex;
    margin: 0 0 0 1rem;
    padding: 0;
    align-items: center;
    list-style: none;
}

.system li {
    margin-left: 0.75rem;
    vertical-align: middle;
}

.system li:first-of-type {
    margin-left: 0;
}

.system .account {
    position: relative;
}

.system .account > i,
.system .switch i {
    display: block;
    color: #333;
}

.system .account > i:hover,
.system .switch i:hover {
    cursor: pointer;
    color: #0073c6;
}

.system .account > i.active {
    color: #0073c6;
}

.system .account > i.active:after {
    content: '';
    display: block;
    position: absolute;
    bottom: -50%; left: 50%;
    width: 0;
    height: 0;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #333;
    border-left: 10px solid transparent;
    transform: translateX(-50%);
    z-index: 11;
}

.system .account #user {
    display: none;
    position: absolute;
    top: 150%; right: -50%;
    background: #333;
    width: 18.75rem;
    padding: 0.75rem;
    border-radius: 5px;
    text-align: center;
    font-weight: 300;
    z-index: 11;
    color: #fff;
}

.system .account #user.active {
    display: block;
}

.system .account #user .user-icon {
    float: left;
    background: transparent;
    font-size: 50px;
    color: #666;
}

.system .account #user .current-user {
    margin: 0 0 0.75rem;
    padding: 0 0 0.75rem 3.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    text-align: left;
    line-height: 1.4;
    font-size: 100%;
}

.system .account #user .current-user em {
    font-size: 90%;
}

.system .account #user .actions {
    display: block;
    padding: 0;
    border-top: 0 none;
}

.system .account #user .actions .button {
    display: block;
    margin: 0.75rem 0 0;
    padding: 0.625rem;
    text-align: center;
    box-shadow: none;
    font-size: 90%;
}

.system .account #user .actions .button:first-child {
    margin-top: 0;
}

.system .menu-icon {
    width: 1.875rem;
    padding: 0.3125rem 0;
}

.system .menu-icon:hover {
    cursor: pointer;
}

.system .menu-icon span {
    display: block;
    background: #333;
    width: 100%;
    height: 0.25rem;
    border-radius: 1px;
    transition: 0.2s;
}

.system .menu-icon span:nth-of-type(1) {
    width: 100%;
}

.system .menu-icon span:nth-of-type(2) {
    width: 80%;
    margin: 0.25rem 0;
}

.system .menu-icon span:nth-of-type(3) {
    width: 60%;
}

.system .menu-icon:hover span:nth-of-type(1),
.system .menu-icon.active span:nth-of-type(1),
.system .menu-icon:hover span:nth-of-type(2),
.system .menu-icon.active span:nth-of-type(2),
.system .menu-icon:hover span:nth-of-type(3),
.system .menu-icon.active span:nth-of-type(3) {
    background: #0073c6;
    width: 100%;
    transition: 0.2s;
}


/* Nav */

nav {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    clear: both;
}

nav#main {
    display: none;
    position: absolute;
    top: 50%; right: 0; left: 0;
    background: #fff;
    max-width: 1140px;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 5px;
    transform: translateY(-50%);
    z-index: 11;
}

nav#main.active {
    display: block;
}

nav#main.mobile {
    position: fixed;
    top: 0.75rem; right: 0.75rem; bottom: 0.75rem; left: 0.75rem;
    margin: 0;
    overflow-y: scroll;
    transform: none;
}


/* Sub Nav */

#subnav {
    background: #0073c6;
    width: 100%;
    margin: 0 0 1rem;
    border-radius: 3px;
    overflow: hidden;
    clear: both;
}

#subnav ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

#subnav ul li a {
    display: block;
    padding: 0.75rem 1rem;
    color: #fff;
}

#subnav ul li a:hover {
    background-color: #0062A6;
}

#subnav ul li a.active {
    background-color: #004677;
}


/* Footer */

footer {
    padding: 1rem;
    text-align: right;
    font-size: 90%;
    color: #999;
}


/* Default Styles */

h1 {
    margin: 0 0 1rem;
    font-weight: bold;
    font-size: 2rem;
    color: #333;
}

h2 {
    margin: 0 0 0.875rem;
    font-weight: bold;
    font-size: 1.8rem;
    color: #333;
}

h3 {
    position: relative;
    width: 100%;
    margin: 0 0 1rem;
    padding: 0.5rem;
    border-bottom: 1px solid #333;
    font-weight: bold;
    font-size: 1rem;
    color: #333;
}

h4 {
    margin: 0 0 0.75rem;
    font-weight: bold;
    font-size: 1.4rem;
    color: #0073c6;
}

h5 {
    margin: 0 0 0.625em;
    font-weight: normal;
    font-size: 1.2rem;
}

h6 {
    margin: 0 0 0.5rem;
    font-weight: bold;
    font-size: 1rem;
    color: #0073c6;
}

p {
    margin: 0 0 0.75rem;
    font-size: 80%;
}

a {
    text-decoration: none;
    color: #0073c6;
}

a:not(.button):hover {
    color: #333;
}

a:not(.button).positive {
    color: #4cbd52;
}

a:not(.button).warning {
    color: #ed7d31;
}

a:not(.button).negative {
    color: #df3535;
}

strong {
    font-weight: bold;
}

img {
    display: block;
    max-width: 100%;
}

hr {
    background-color: #ccc;
    height: 1px;
    margin: 0 0 2rem;
    border: 0 none;
}

ul, ol {
    margin: 0 0 1rem 1.1rem;
}

ul li,
ol li {
    line-height: 1.5;
    font-size: 80%;
}

li li {
    font-size: 100%;
}


/* Tables */

.blend-instructions {
    display: inline-block;
}

table {
    width: 100%;
    margin: 0 auto;
    border-spacing: 0;
    border-radius: 3px;
    border: 0 none;
    overflow: hidden;
}

th {
    padding: 0.5rem;
    vertical-align: middle;
    font-weight: 400;
    font-size: 80%;
}

td {
    padding: 0.5rem;
    vertical-align: middle;
    text-align: center;
    font-size: 80%;
}

th.text,
td.text,
table td.text input {
    text-align: left;
}

td.currency,
table td.currency input {
    text-align: right;
}

td.total {
    border-top: 1px solid;
    border-bottom: 4px double;
    font-weight: bold;
}

td.notes {
    font-style: italic;
}

td.cap {
    text-transform: capitalize;
}

thead th {
    background-color: #0073c6;
    color: #fff;
}

thead th.sortable {
    padding: 0;
    overflow: hidden;
}

thead th.sortable a {
    margin: -2rem 0;
    padding: 2rem 0.5rem;
}

thead th.sortable a:hover {
    background: #005694;
    text-decoration: none;
    color: #fff;
}

thead th.sortable a i {
    vertical-align: text-bottom;
    font-size: 125%;
}

thead a {
    display: block;
    font-weight: inherit;
    color: #fff;
}

tbody tr:nth-child(2n),
tfoot tr:nth-child(2n) {
    background-color: #f7f7f7;
}

tbody tr:hover {
    background-color: #eef4fb;
}

tbody tr.reconciled {
	background-color: antiquewhite;
}

tbody a:not(.button) {
    padding: 0.25rem;
    border-bottom: 1px solid transparent;
    color: #333;
}

tbody a:not(.button):hover {
    border-bottom-color: #005694;
    color: #005694;
}

tbody a.grade {
    padding: 0px;
}

tbody .button {
    display: block;
    padding: 0.375rem 1rem;
    font-size: 100%;
}

table input[type="email"],
table input[type="file"],
table input[type="image"],
table input[type="number"],
table input[type="password"],
table input[type="range"],
table input[type="search"],
table input[type="tel"],
table input[type="text"],
table input[type="url"] {
    margin: 0;
    text-align: center;
    font-size: 100%;
}

table textarea,
table select {
    margin: 0;
    font-size: 100%;
}

.cdvalue {
    vertical-align: text-top;
    font-size: 80%;
}

.floatingHeader {
    display: none;
    position: fixed;
    top: 0;
}

.floatingHeader.active {
    display: table;
}


/* Quicklinks */

table .quicklinks {
    position: relative;
    padding-right: 0;
}

table .quicklinks a {
    display: inline-block;
    vertical-align: middle;
    font-size: 95%;
}

table .quicklinks .more {
    position: relative;
    padding: 0.125rem 0.25rem;
    border-bottom: 0 none;
    border-radius: 3px;
}

table .quicklinks .more:hover {
    background: #e3e3e3;
    color: #333;
}

table .quicklinks .more.active:after {
    content: '';
    display: block;
    position: absolute;
    bottom: -40%; left: 50%;
    width: 0;
    height: 0;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #0073c6;
    border-left: 10px solid transparent;
    transform: translateX(-50%);
    z-index: 11;
}

table .quicklinks .more i {
    display: block;
}

table .quicklinks .more.active i {
    transform: rotate(180deg);
}

table .quicklinks .links {
    position: absolute;
    top: 100%; right: 0;
    background: #0073c6;
    margin: 0;
    padding: 0;
    border-radius: 3px;
    list-style: none;
    overflow: hidden;
    z-index: 11;
}

table .quicklinks .links li {
    font-size: 90%;
}

table .quicklinks .links li a {
    display: block;
    padding: 0.5rem 1rem;
    border: 0 none;
    font-size: 100%;
    color: #fff;
}

table .quicklinks .links li a:hover {
    background: #005694;
}


/* Definition Lists */

dl {
    margin: 0;
    overflow: hidden;
}

dt {
    margin: 0 0.5rem;
    font-weight: bold;
    line-height: 1.5;
    font-size: 80%;
}

dd {
    margin: 0 0.5rem;
    line-height: 1.5;
    font-size: 80%;
}

dl.table {
    display: flex;
    flex-wrap: wrap;
}

dl.table dt {
    width: 50%;
    margin: 0;
    padding: 0;
}

dl.table dd {
    width: 50%;
    margin: 0;
    padding: 0;
}

dl i.material-icons {
    padding-bottom: 1px;
    vertical-align: middle;
    font-size: 100%;
}

dl dd + dt {
    margin-top: 1rem;
}


/* Pagination */

.pagination {
    display: flex;
    width: auto;
    margin: 1.25rem 0 0.5rem;
    padding: 0;
    justify-content: center;
    text-align: center;
}

.pagination li {
    display: block;
    list-style: none;
}

.pagination :first-child span,
.pagination :first-child a {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.pagination :last-child span,
.pagination :last-child a {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.pagination li a,
.pagination li span {
    display: block;
    background: #f7f7f7;
    min-width: 2rem;
    line-height: 2rem;
    text-decoration: none;
    color: #333;
}

.pagination li.current span {
    background-color: #0073c6;
    color: #fff;
}

.pagination li a:hover {
    background: #eee;
}


/* Forms */

form {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

legend {
    display: block;
    width: 100%;
    padding: 0.5rem;
    border-bottom: 1px solid #333;
    font-weight: bold;
}

fieldset {
    margin: 0;
    padding: 0;
    border: 0 none;
}

label {
    display: block;
    width: 100%;
    padding: 0.25rem;
    font-size: 80%;
}

input[type="email"],
input[type="file"],
input[type="image"],
input[type="number"],
input[type="password"],
input[type="range"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
textarea {
    display: block;
    background: #fff;
    width: 100%;
    margin: 0 0 1rem 0;
    padding: 0.625rem;
    border: 1px solid #d0d0d0;
    border-radius: 3px;
    font-size: 80%;
}

input[type="file"] {
    padding: 0.5rem;
    font-size: 75%;
}

textarea {
    height: 10rem;
}

select {
    display: block;
    background: #fff url('../images/arrow.gif') no-repeat;
    background-position: right 0.75rem top 50%;
    width: 100%;
    margin: 0 0 1rem 0;
    padding: 0.625rem 2.25rem 0.625rem 0.625rem;
    text-overflow: ellipsis;
    border: 1px solid #d0d0d0;
    border-radius: 3px;
    line-height: normal;
    font-size: 80%;
    clear: left;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select.timeSelect {
    background-position: right 0.5rem top 50%;
    width: auto;
    padding: 0.375rem 2rem 0.375rem 0.5rem;
    font-size: 90%;
}

select.timeSelect.hour {
    margin: 0 0.25rem 0 0;
}

select.timeSelect.min {
    margin: 0 0 0 0.25rem;
}

input[disabled],
input[readonly],
textarea[disabled],
textarea[readonly] {
    background: #f7f7f7;
    border-color: transparent;
    font-weight: 300;
    opacity: 0.8;
}

select[disabled],
select[readonly] {
    background-color: #f7f7f7;
    background-image: url('../images/arrow-disabled.gif');
    border-color: transparent;
}

input[disabled]:focus,
input[readonly]:focus,
select[disabled]:focus,
select[readonly]:focus,
textarea[disabled]:focus,
textarea[readonly]:focus {
    border-color: #e7e7e7;
}

select::-ms-expand {
    display: none;
}

.display {
    display: inline-block;
    padding: 0.625rem;
    border: 1px solid transparent;
    line-height: 1.15;
    font-size: 80%;
}


/* Radios & Checkboxes */

.radiochecks {
    margin: 0 0 1rem;
}

.radiochecks input[type="radio"],
.radiochecks input[type="checkbox"] {
    display: inline-block;
    width: 1rem;
    margin: 0.25rem 0.375rem 0.25rem 0;
    padding: 0;
}

.radiochecks label {
    display: inline-block;
    width: calc(100% - 1.75rem);
}

.radiochecks.inline label.checked {
    background: #f7f7f7;
    border-color: transparent;
    border-radius: 3px;
}

.radiochecks.inline label.checked:before {
    content: "\2713";
    padding: 5px;
}

.radiochecks fieldset {
    margin-left: 2.4em;
    clear: both;
}

.radiochecks fieldset input,
.radiochecks fieldset label {
    float: none;
    display: block;
    width: 80%;
    line-height: 1em;
}

.radiochecks fieldset label {
    width: 100%;
    margin-bottom: 0.25em;
}

.radiochecks.inline {
    display: flex;
}

.radiochecks.inline label {
    width: auto;
    margin-right: 1rem;
    padding-left: 0;
}

.radiochecks.inline select {
    display: inline;
}


/* Buttons */

.actions {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0.75rem 0.375rem;
    border-top: 1px solid #e3e3e3;
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: center;
    text-align: right;
}

.actions:last-child {
    padding-bottom: 0;
}

.actions .action {
    padding: 0.5rem 1rem;
    font-size: 75%;
}

.actions .action.negative {
    color: #df3535;
}

.actions .action.negative:hover {
    color: #333;
}

.actions button,
.actions .button {
    margin-right: 1rem;
}

.actions :first-child {
    margin-right: 0;
}

.actions * + .action {
    margin-right: 0;
}

.actions .delete {
    margin-right: auto;
    order: 1;
}

.actions .close {
    margin-right: auto;
    order: 1;
}

.actions .cancelJob {
    margin-right: auto;
    order: 1;
}

.buttons {
    display: flex;
    margin-bottom: 1rem;
    flex-direction: row-reverse;
    align-items: center;
    overflow: hidden;
}

.searchBox + .buttons {
    float: right;
}

.buttons button,
.buttons .button {
    margin-right: 0.75rem;
}

.buttons button:first-child,
.buttons .button:first-child {
    margin-right: 0;
}

button,
.button {
    background: #0073c6;
    margin: 0;
    padding: 0.625rem 1.25rem;
    border: 1px solid #0073c6;
    text-decoration: none;
    border-radius: 3px;
    font-weight: 400;
    font-size: 80%;
    color: #fff;
}

button:hover,
.button:hover {
    background: #005694;
    border-color: #005694;
    cursor: pointer;
}

button {
    line-height: normal;
}

button.slim,
.button.slim {
    padding: 0.375rem 1.25rem;
}

button.positive,
.button.positive {
    background: #4cbd52;
    border-color: #4cbd52;
}

button.positive:hover,
.button.positive:hover {
    background: #3a9c3f;
    border-color: #3a9c3f;
}

button.warning,
.button.warning {
    background: #ffa63c;
    border-color: #ffa63c;
}

button.warning:hover,
.button.warning:hover {
    background: #ed7d31;
    border-color: #ed7d31;
}

button.negative,
.button.negative {
    background: #df3535;
    border-color: #df3535;
}

button.negative:hover,
.button.negative:hover {
    background: #c21e1e;
    border-color: #c21e1e;
}

button.secondary,
.button.secondary {
    background: transparent;
    border-color: #0073c6;
    color: #0073c6;
}

button.secondary:hover,
.button.secondary:hover {
    background: transparent;
    border-color: #005694;
    box-shadow: 0 0 0 1px inset;
    color: #005694;
}

button.secondary.positive,
.button.secondary.positive {
    border-color: #4cbd52;
    color: #4cbd52;
}

button.secondary.positive:hover,
.button.secondary.positive:hover {
    background: transparent;
    border-color: #3a9c3f;
    color: #3a9c3f;
}

button.secondary.warning,
.button.secondary.warning {
    border-color: #ffa63c;
    color: #ffa63c;
}

button.secondary.warning:hover,
.button.secondary.warning:hover {
    background: transparent;
    border-color: #ed7d31;
    color: #ed7d31;
}

button.secondary.negative,
.button.secondary.negative {
    border-color: #df3535;
    color: #df3535;
}

button.secondary.negative:hover,
.button.secondary.negative:hover {
    background: transparent;
    border-color: #c21e1e;
    color: #c21e1e;
}

button.tertiary,
.button.tertiary {
    background: transparent;
    border-color: transparent;
    color: #0073c6;
}

button.tertiary:hover,
.button.tertiary:hover {
    background: #d3e3f4;
    border-color: transparent;
    color: #005694;
}

button.tertiary.positive,
.button.tertiary.positive {
    color: #4cbd52;
}

button.tertiary.positive:hover,
.button.tertiary.positive:hover {
    background: #dbecd9;
    color: #3a9c3f;
}

button.tertiary.warning,
.button.tertiary.warning {
    color: #ffa63c;
}

button.tertiary.warning:hover,
.button.tertiary.warning:hover {
    background: #fce5d8;
    color: #ed7d31;
}

button.tertiary.negative,
.button.tertiary.negative {
    color: #df3535;
}

button.tertiary.negative:hover,
.button.tertiary.negative:hover {
    background: #f4d5d3;
    color: #c21e1e;
}

.inline {
    float: right;
    padding: 0.375rem 1rem;
}

.button.icon {
    display: inline-block;
    width: 25px;
    padding: 0.25rem;
}

.button.icon i {
    display: block;
    line-height: 1.2;
    font-size: 100%;
}

.buttons h2 {
    margin: 0 auto 0 0.5rem;
}

.buttons h4 {
    margin: 0 auto 0 0.5rem;
}

.tabs {
    display: flex;
    margin: 0 0 1rem;
}

.buttons .tabs {
    margin: 0 auto 0 0;
}

.searchBox + .tabs {
    float: right;
}

.tabs a.tab {
    background-color: #f7f7f7;
    margin: 0;
    padding: 0.625rem 1rem;
    border: 1px solid transparent;
    text-align: center;
    font-size: 80%;
    color: #999;
}

.tabs a.tab:first-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.tabs a.tab:last-child {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.tabs a.tab:hover {
    background-color: #ececec;
}

.tabs a.tab.active {
    background-color: #0073c6;
    color: #fff;
}

/* Note: Remove if we put Supplier Contacts / Address to own screens */
                    .tabContent {
                        display: none;
                        width: 100%;
                    }

                    .tabContent.active {
                        display: block;
                    }


/* Messages & Errors */

ul.errorMessage,
ul.errorMessagePermanent,
ul.vehicleHistory {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.errorMessage li,
ul.errorMessagePermanent li,
ul.vehicleHistory li {
    line-height: 1.2;
}

.alert,
ul.errorMessage li,
ul.errorMessagePermanent li,
ul.vehicleHistory li {
    position: relative;
    margin: 0 auto 1rem;
    padding: 1rem 0.75rem 1rem 3.25rem;
    border-radius: 3px;
    border: 1px solid #333;
    color: #333;
}

.alert:after,
ul.errorMessage li:after,
ul.errorMessagePermanent li:after,
ul.vehicleHistory li:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%; left: 0.75rem;
    width: 1rem;
    height: 1rem;
    padding: 0.25rem;
    border: 1px solid;
    border-radius: 10rem;
    text-align: center;
    line-height: 1rem;
    font-size: 90%;
    transform: translate(0, -50%);
}

.alert:last-child {
    margin-bottom: 0;
}

.alert.success {
    background: rgba(76, 189, 82, 0.05);
    border-color: rgba(76, 189, 82, 0.5);
    color: #4cbd52;
}

.alert.success:after {
    content: '\2713';
}

.alert.info {
    background: rgba(0, 115, 198, .05);
    border-color: rgba(0, 115, 198, 0.5);
    color: #0073c6;
}

.alert.info:after {
    content: 'i';
    font-style: italic;
    font-family: 'Nunito Sans', 'Helvetica', 'Arial', sans-serif;
    font-size: 110%;
}

.alert.warning {
    background: rgba(255, 166, 60, 0.05);
    border-color: rgba(255, 166, 60, 0.5);
    color: #ffa63c;
}

.alert.warning:after {
    content: '!';
    font-weight: bold;
}

.alert.error,
ul.errorMessage li,
ul.errorMessagePermanent li,
ul.vehicleHistory li {
    background: rgba(223, 53, 53, .05);
    border-color: rgba(223, 53, 53, 0.5);
    color: #df3535;
}

.alert.error:after {
    content: '\2715';
    font-size: 70%;
}

ul.errorMessage li:after,
ul.errorMessagePermanent li:after,
ul.vehicleHistory li:after {
    content: '\2715';
    font-size: 90%;
}

.alert p {
    margin: 1rem 0 0;
}

.alert p:first-child {
    margin: 0;
}

.alert ul {
    margin: 0;
    padding: 0;
}

.alert li {
    margin: 1rem 0 0;
    list-style: none;
}

.alert li:first-child {
    margin-top: 0;
}

p.error {
    display: block;
    background: #df3535;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 70%;
    color: #fff;
}

input.error {
    border-color: #df3535;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom: 0 none;
}

span.error {
    display: block;
    background: #df3535;
    width: 100%;
    padding: 0.5rem;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    text-align: left;
    font-size: 70%;
    color: #fff;
}


/* Search */

.searchBox {
    float: left;
    margin: 0 1rem 1rem 0;
}

.searchBox :first-child {
    margin-left: 0;
}

.searchBox input {
    display: inline-block;
    width: 10rem;
    margin: 0 0 0 1rem;
    line-height: normal;
}

.searchBox select {
    width: 10rem;
    margin: 0 0 0 1rem;
}

.searchBox button {
    margin: 0 0 0 1rem;
    padding: 0.625rem 1rem;
}

.searchBox .date {
    width: 5.7rem;
}

.searchBox .selectize-control {
    flex: 1;
}

.searchBox .selectize-control + button {
    margin-left: 1rem;
    padding: 0.5rem 1rem;
}

.searchBox #search {
    border-right: 0 none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.searchBox #search + button {
    margin-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.searchBox .action {
    padding: 0.5rem 1rem;
    align-self: center;
    font-size: 75%;
}

.searchBox .action.negative {
    color: #df3535;
}

.searchBox .action.negative:hover {
    color: #333;
}

input.date_picker {
    width: 5.625rem;
}


/* Legend */

.legend {
    display: flex;
    margin: 0;
    padding: 0.5rem;
    justify-content: flex-end;
    font-weight: bold;
    list-style: none;
    flex-wrap: wrap;
}

.legend li {
    margin: 0 0 0 1rem;
}

.legend li:before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 2px 5px 2px 0;
    vertical-align: text-bottom;
    border-radius: 100%;
}

.legend .new:before {
    background-color: #731e7b;
}

.legend .approved:before {
    background-color: #d23736;
}

.legend .accepted:before {
    background-color: #fad834;
}

.legend .completed:before {
    background-color: #4cbd52;
}


/* Maps */

.updatemap {
    display: inline-block;
    margin-top: 1.625rem;
    padding: 0.375rem 1.25rem;
}

#viewmap,
#panorama {
    width: calc(50% - 1rem);
    height: 300px;
    margin: 0 0.5rem 1.5em;
}

#locationEditMap {
    border-radius: 5px;
}

#locationEditMap input {
    float: left;
    width: auto;
    margin: 0.5rem 0 0.5rem 0.5rem;
}

#locationEditMap button {
    display: inline-block;
    margin: 0.75rem 0 0.5rem 0.5rem;
    padding: 0.375rem 1.25rem;
}

#locationEditMap #editmap {
    width: 100%;
    height: 31.75rem;
}

.maps {
    display: flex;
    margin-top: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.maps .map {
    width: calc(100% / 4);
    padding: 0.25rem;
}


/* Uploaded Files */

.uploaded-files {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}

.uploaded-files li {
    position: relative;
    width: calc((100% - 5rem) / 5);
    margin: 0.5rem;
    padding: 0.5rem;
    border: 1px solid;
    border-radius: 3px;
}

.delete-file {
    position: absolute;
    top: 0; right: 0;
    background: #fdf5f5;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid #f19996;
    border-left: 1px solid #f19996;
    border-bottom-left-radius: 3px;
    text-align: center;
    font-weight: bold;
    line-height: 0;
    color: #df3535;
}

a.delete-file:hover {
    background: #df3535;
    color: #fff;
}


/* PDFs */

.organisation-header {
    display: flex;
    width: 100%;
    margin: 0 0 1rem;
    padding: 1rem 0;
    border-top: 1px solid #e3e3e3;
    border-bottom: 1px dashed #999;
    align-items: center;
}

.organisation-header .organisation-logo {
    width: 19.25rem;
}

.organisation-header .organisation-details {
    width: calc(100% - 19.25rem);
    text-align: right;
}

.organisation-header .organisation-details h1 {
    margin: 0;
    text-transform: uppercase;
    line-height: 1;
    font-size: 210%;
}

.organisation-header .organisation-details h6 {
    margin: 0.375rem 0 0.375rem 0;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 80%;
}

.organisation-header .contact {
    display: flex;
    margin: 0;
    justify-content: flex-end;
    align-items: center;
}

.organisation-header .contact dt {
    margin: 0 0 0 1rem;
}

.organisation-header .contact dt.abn {
    font-weight: normal;
    font-size: 70%;
}

.organisation-header .contact dt i {
    display: block;
    font-size: 100%;
}

.organisation-header .contact dd {
    margin: 0 0 0 0.5rem;
    font-size: 75%;
}

.envelope {
    display: flex;
    align-items: center;
}

.envelope .window {
    margin-bottom: 1rem;
    padding: 0 1rem 1rem;
    border: 1px solid #333;
    border-radius: 3px;
}

.envelope .window legend {
    width: auto;
    border-bottom: 0 none;
}

.envelope .window dl {
    float: left;
    width: 50%;
}

.envelope .window dl dt {
    margin: 0 0.5rem 0.25rem;
    font-weight: bold;
}

.envelope .window dl dd {
    margin: 0 0.5rem;
}

.envelope .window i {
    padding-bottom: 1px;
    vertical-align: middle;
    font-size: 100%;
}

.envelope .issued-info {
    padding: 0 3rem;
}

.envelope .issued-info h3 {
    margin-bottom: 0.5rem;
    padding-top: 0;
    text-transform: uppercase;
    border-bottom: 2px solid #0073c6;
    font-size: 120%;
    color: #0073c6;
}

.envelope .issued-info p {
    margin: 0 0 0.25rem;
    text-align: right;
}

.envelope .issued-info p strong {
    float: left;
}

.envelope .issued-info .valid {
    background: #eee;
    margin: 0.5rem 0 0;
    padding: 0.375rem;
    text-align: center;
    font-weight: bold;
    font-size: 75%;
}

.additional-info {
    display: flex;
    margin-top: 2rem;
    justify-content: space-between;
    align-items: center;
}

.additional-info dl {
    display: flex;
    margin: 0;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.additional-info dl dt {
    width: 50%;
    margin-top: 0;
    font-weight: bold;
}

.invoice-message {
    width: 100%;
    margin-bottom: 2rem;
    text-align: center;
    color: #ff0000;
}

.pdf tbody tr:nth-child(2n),
.pdf tfoot tr:nth-child(2n) {
    background: #fff;
}

.pdf tbody tr:first-child {
    background: #f3f3f3;
}

.pdf tbody tr:not(:first-child):not(:nth-last-child(2)):not(:last-child) {
    border-bottom: 1px dashed #ddd;
}

.pdf tbody tr:not(:first-child) td:first-child {
    padding-left: 1.5rem;
}

.pdf tbody.summary tr:first-child {
    background: transparent;
}

.pdf tbody.summary tr:first-child td {
    border-top: 1px solid;
}

.pdf tbody.summary tr:not(:first-child) td:first-child {
    padding: 0.5rem;
}

.pdf tfoot tr:first-child td:nth-last-child(-n+2) {
    border-top: 1px solid;
}

.pdf tfoot tr:last-child td:nth-last-child(-n+2) {
    border-top: 1px solid;
    border-bottom: 4px double;
}


/* Charts */

.chart-filters .buttons {
    margin-top: 1.375rem;
}

.dateRange {
    display: flex;
}

.dateRange .from,
.dateRange .to {
    width: 50%;
}

.dateRange .from {
    padding-right: 0.5rem;
}

.dateRange .to {
    padding-left: 0.5rem;
}

.dateRange label {

}

.dateRange input {
    margin: 0;
}

.chart {
    width: 100%;
}


/* Modals */

.overlay {
    display: none;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background-color: rgba(0, 0, 0, 0.75);
    cursor: pointer;
    z-index: 10;
}

.overlay:hover {
    cursor: default;
}

.overlay.account {
    background: transparent;
}

.blendOverlay {
    display: none;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 8;
}

.modal {
    display: none;
    position: fixed;
    top: 50%; right: 0; left: 0;
    background: #fff;
    width: 30rem;
    margin: 0 auto;
    padding: 2rem;
    border-radius: 3px;
    text-align: center;
    transform: translate(0, -50%);
    z-index: 11;
}

.modal h5 {
    font-size: 100%;
}

.modal .actions {
    padding: 0;
    border: 0 none;
    justify-content: center;
}

.modal.active,
.overlay.active,
.blendOverlay.active,
#blendForm.active {
    display: block;
}

.modal .close {
    display: block;
    position: absolute;
    top: 8px;
    right: 8px;
    line-height: 0;
    color: #666;
}

.modal .close i {
    font-size: 20px;
}

.jsa-modal-overlay {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 11;
}


/* -- Logistics -- */

#truck-schedules .searchBox {
    margin-left: 23.75rem;
}

#scheduleForm {
    margin-top: 1rem;
}

#scheduleForm h3 {
    margin-bottom: 0.75rem;
}

#scheduleForm > dl {
    display: flex;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

#scheduleForm > dl dt {
    display: flex;
    width: 40%;
    margin: 0;
    align-items: center;
    font-weight: 300;
    font-size: 80%;
}

#scheduleForm > dl dt label {
    font-size: 100%;
}

#scheduleForm > dl dd {
    display: flex;
    width: 60%;
    margin: 0;
    align-items: baseline;
    font-size: 80%;
}

#scheduleForm > dl dd input {
    width: 5.5rem;
    margin: 0 0.5rem 0 0;
    padding: 0.5rem 0.625rem;
    text-align: right;
    font-size: 100%;
}

#scheduleForm > dl dd input.date_picker {
    width: 5.625rem;
}

#scheduleForm > dl dd select {
    margin: 0;
    padding: 0.5rem 2.25rem 0.5rem 0.625rem;
    font-size: 100%;
}

#scheduleForm > dl dd p {
    margin: 0;
    font-size: 100%;
}

#scheduleForm .toCustomer,
#scheduleForm .toSupplier {
    margin-top: 0.75rem;
}

#scheduleForm .divider {
    padding-top: 0.75rem;
    border-top: 1px solid #ccc;
}

#scheduleForm .initial-options {
    display: flex;
    align-items: center;
    font-size: 100%;
}

#scheduleForm .initial-options #scheduling_date {
    margin: 0;
}

#scheduleForm .initial-options .radiochecks {
    margin: 0;
}

#scheduleForm .initial-options .radiochecks :last-child {
    margin-right: 0;
}

#scheduleForm .filters {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#scheduleForm .filters select {
    width: calc(50% - 0.5rem);
    font-size: 75%;
}

#scheduleForm .salesOrderList,
#scheduleForm .purchaseOrderList {
    background: #f7f7f7;
    max-height: 25rem;
    margin-bottom: 0.75rem;
    overflow-y: auto;
}

#scheduleForm .salesOrderList > dt,
#scheduleForm .purchaseOrderList > dt {
    background-color: #0073c6;
    width: 100%;
    margin: 0;
    padding: 0.5rem;
    line-height: 1;
    color: #fff;
}

#scheduleForm .salesOrderList > dd,
#scheduleForm .purchaseOrderList > dd {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0.375rem;
}

#scheduleForm .salesOrderList > dd:hover,
#scheduleForm .purchaseOrderList > dd:hover {
    background: #eee;
    cursor: pointer;
}

#scheduleForm .salesOrderList > dd.selected,
#scheduleForm .purchaseOrderList > dd.selected {
    background: #d3edd5;
}

#scheduleForm .salesOrderList > dd span,
#scheduleForm .purchaseOrderList > dd span {
    width: 3.5rem;
    margin-right: 0.5rem;
    padding-right: 0.5rem;
    border-right: 1px solid #ccc;
    text-align: right;
    font-size: 90%;
}

#scheduleForm .salesOrderList > dd.selected span,
#scheduleForm .purchaseOrderList > dd.selected span {
    border-right-color: #98c9a4;
}

#scheduleForm .salesOrderList > dd dl,
#scheduleForm .purchaseOrderList > dd dl {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    flex: 1;
}

#scheduleForm .salesOrderList > dd dl dt,
#scheduleForm .purchaseOrderList > dd dl dt {
    width: calc(34% - 0.375rem);
    margin: 0 0.375rem 0 0;
    font-weight: 300;
    font-size: 90%;
}

#scheduleForm .salesOrderList > dd dl dd,
#scheduleForm .purchaseOrderList > dd dl dd {
    width: 66%;
    margin: 0;
    font-weight: bold;
    font-size: 90%;
}

#scheduleForm .totalProductQty {
    margin-left: auto;
}

#scheduleForm .supplierTable {
    margin: 0.75rem 0 0;
}

#scheduleForm .supplierTable .refresh {
    float: left;
    padding: 0 0.25rem;
    fill: #666;
}

#scheduleForm .supplierTable .refresh:hover {
    fill: #0073c6;
}

#scheduleForm .supplierTable .refresh svg {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
}

#scheduleForm .supplierTable .create-purchase-order {
    float: right;
    padding: 0.125rem 0.25rem;
    font-size: 70%;
}

#scheduleForm .supplier-options {
    background: #f7f7f7;
    clear: both;
}

#scheduleForm .supplier-options p {
    margin: 0;
    padding: 0.5rem;
    text-align: center;
}

#scheduleForm .supplier-options p a {
    display: block;
}

#scheduleForm .supplier-options > input {
    display: none;
}

#scheduleForm .supplier-options label {
    display: flex;
    position: relative;
    padding: 0.375rem;
    font-size: 90%;
}

#scheduleForm .supplier-options label:hover {
    background: #eee;
    cursor: pointer;
}

#scheduleForm .supplier-options input:checked + label {
    background: #d3edd5;
}

#scheduleForm .supplier-options dl {
    display: flex;
    align-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    flex: 1;
}

#scheduleForm .supplier-options dl dt {
    width: calc(34% - 0.375rem);
    margin: 0 0.375rem 0 0;
    font-weight: 300;
}

#scheduleForm .supplier-options dl dd {
    width: 66%;
    margin: 0;
    font-weight: bold;
}

#scheduleForm .supplier-options dl.orderId {
    width: 5.5rem;
    margin-right: 0.5rem;
    padding-right: 0.3rem;
    border-right: 1px solid #ccc;
    flex: none;
}

#scheduleForm .supplier-options input:checked + label dl.orderId {
    border-right-color: #98c9a4;
}

#scheduleForm .supplier-options dl.orderId dt {
    width: 50%;
    margin: 0;
}

#scheduleForm .supplier-options dl.orderId dd {
    width: 50%;
    margin: 0;
    text-align: right;
}

#scheduleForm .supplier-options dl dd .supplierQty {
    margin: 0 0 0.25rem;
    font-size: 100%;
}

#scheduleForm .supplier-options dl dd select {
    font-size: 100%;
}

#scheduleForm .notesContainer {
    flex-direction: column;
}

#scheduleForm .notesContainer dd {
    width: 100%;
}

#scheduleForm .notesContainer dd textarea {
    height: 6rem;
    margin: 0.25rem 0 0.75rem;
    font-size: 100%;
}

#scheduleForm #saveJob {
    margin: 0 auto;
    font-size: 100%;
}

#scheduleForm .rangeDate {
    flex-wrap: nowrap;
}

#scheduleForm .rangeDate dt {
    width: auto;
    margin-right: 1rem;
}

#scheduleForm .rangeDate dd:last-of-type {
    flex: 0;
}

#scheduleForm .vehicle {
    margin-top: 0.75rem;
}

.scheduleList {
    margin-top: 1rem;
}

.scheduleList .jobsHeader {
    display: flex;
    background: #0073c6;
    width: 100%;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}

.scheduleList .jobsHeader:before,
.scheduleList .job .preview:before {
    content: '';
    display: inline-block;
    background: transparent;
    width: 12px;
    height: 12px;
    margin: 0 0.5rem;
    border-radius: 12px;
}

.scheduleList .jobsHeader span,
.scheduleList .preview span {
    display: block;
    padding: 0.5rem;
    text-align: center;
    font-size: 80%;
}

.scheduleList .jobsHeader span {
    font-weight: 400;
}

.scheduleList .jobsHeader span.driver,
.scheduleList .preview span.driver {
    max-width: 9rem;
}

.scheduleList .preview span.driver {
    text-align: left;
}

.scheduleList .jobsHeader span.order,
.scheduleList .preview span.order {
    max-width: 4rem;
}

.scheduleList .jobsHeader span.customer,
.scheduleList .preview span.customer {
    max-width: 12rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.scheduleList .preview span.customer {
    text-align: left;
}

.scheduleList .jobsHeader span.product,
.scheduleList .preview span.product {
    max-width: 12rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.scheduleList .preview span.product {
    text-align: left;
}

.scheduleList .jobsHeader span.destination,
.scheduleList .preview span.destination {
    max-width: 9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.scheduleList .preview span.destination {
    text-align: left;
}

.scheduleList .jobsHeader span.bookingno,
.scheduleList .preview span.bookingno {
    max-width: 6rem;
}

.scheduleList .jobsHeader span.eta,
.scheduleList .preview span.eta {
    max-width: 6rem;
}

.scheduleList .jobsHeader span.rego,
.scheduleList .preview span.rego {
    max-width: 7rem;
}

.scheduleList .jobsHeader span.qty,
.scheduleList .preview span.qty {
    max-width: 4.75rem;
}

.scheduleList .jobsHeader span.ticket,
.scheduleList .preview span.ticket {
    max-width: 9rem;
}

.scheduleList .jobsHeader span.delete,
.scheduleList .preview span.delete {
    width: 2.75rem;
    margin-left: auto;
}

.scheduleList .job {
    width: 100%;
    border-bottom: 1px solid #ccc;
}

.scheduleList .job.active {
    background: #f7f7f7;
}

.scheduleList .job .preview {
    display: flex;
    width: 100%;
    margin: 0;
    justify-content: space-between;
    align-items: center;
    font-weight: normal;
    overflow: hidden;
    font-size: 100%;
}

.scheduleList .job .preview:hover {
    background: #f7f7f7;
    cursor: pointer;
}

.scheduleList .job.active .preview {
    color: #fff;
}

.scheduleList .job.active .preview:before {
    width: 10px;
    height: 10px;
    border: 1px solid #fff;
}

.scheduleList .job.active.new .preview,
.scheduleList .new .preview:before {
    background-color: #731e7b;
}

.scheduleList .job.active.approved .preview,
.scheduleList .approved .preview:before {
    background-color: #d23736;
}

.scheduleList .job.active.accepted .preview,
.scheduleList .accepted .preview:before {
    background-color: #fad834;
}

.scheduleList .job.active.completed .preview,
.scheduleList .completed .preview:before {
    background-color: #4cbd52;
}

.scheduleList .job .preview span {
    padding: 0.5rem;
    font-size: 75%;
}

.scheduleList .job .complete {
    display: none;
    margin: 0;
    padding: 0.375rem 0.5rem 0;
}

.scheduleList .job.active .complete {
    display: flex;
}

.scheduleList .empty {
    width: 100%;
    padding: 0.5rem;
    text-align: center;
}

.scheduleList .alert {
    display: none;
    width: 100%;
    padding: 0.75rem 0.75rem 0.75rem 3.25rem;
    font-size: 100%;
}

.scheduleList h3 {
    font-size: 100%;
}

.scheduleList select {
    margin: 0;
    font-size: 90%;
}

.scheduleList input {
    margin: 0;
    font-size: 90%;
}

.scheduleList .job .complete p {
    font-size: 90%;
}

.scheduleList .job .complete fieldset {
    padding: 0;
}

.scheduleList .job .complete dl {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
}

.scheduleList .job .complete dl dt {
    width: 40%;
    margin: 2px 0 0 0;
    line-height: 3;
    font-size: 90%;
}

.scheduleList .job .complete dl dd {
    width: 60%;
    margin: 2px 0 0 0;
    line-height: 3;
    font-size: 90%;
}

.scheduleList input.quantity {
    display: inline;
    width: 5rem;
}

.scheduleList .job .complete .packaging-label {
    width: 100%;
    margin: 0;
    font-size: 90%;
}

.scheduleList .job .complete .packaging-options {
    display: block;
    width: 100%;
}

.scheduleList .job .complete .packaging-options label {
    font-size: 90%;
}

.scheduleList .job .complete .packaging-options input[type="checkbox"] {
    margin: 0;
}

.scheduleList .job .complete .notesContainer {
    width: 100%;
}

.scheduleList .job .complete .notesLabel,
.scheduleList .job .complete .notesBox {
    width: 100%;
}

.scheduleList .job .complete .notesBox textarea {
    max-width: 100%;
    height: auto;
    min-height: 2.5rem;
    font-size: 100%;
}

#truckSchedule .scheduleList .job .complete .notesBox textarea {
    height: 11rem;
}

.scheduleList .from,
.scheduleList .to {
    margin-bottom: 1rem
}

.scheduleList .from p,
.scheduleList .to p {
    margin: 0 0.5rem 0.75rem;
    font-size: 95%;
}

.scheduleList .date-time {
    display: flex;
    width: 100%;
    align-items: center;
}

.scheduleList .date-time select,
.scheduleList .date-time input {
    margin: 0 0.5rem;
    font-size: 90%;
}

.scheduleList .timeSelect {
    display: inline;
    width: auto;
}

.scheduleList .schedulingTime {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #ccc;
}

.scheduleList .job .complete .schedulingTime dt {
    width: auto;
    margin-right: 1rem;
}

.scheduleList .drivervalues {
    display: flex;
    margin: 0.75rem auto 0;
    padding: 0.75rem 0 0 0;
    border-top: 1px solid #ccc;
    justify-content: space-around;
}

.scheduleList .job .buttons {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #ccc;
}

.scheduleList .job .buttons .button {
    padding: 0.5rem 1.25rem;
    font-size: 80%;
}

.scheduleList table {
    margin-top: 0.5rem;
}

.scheduleList th {
    background: none;
    padding: 0.25rem;
    border-bottom: 1px solid #0073c6;
    font-size: 90%;
    color: #0073c6;
}

.scheduleList td {
    font-size: 90%;
}

.scheduleList .job table a {
    padding: 0;
}

.scheduleList .notes {
    width: 100%;
}

.scheduleList .notes p {
    margin: 0.25rem 0.5rem;
    font-size: 90%;
}

.scheduleList .notes textarea {
    max-width: 100%;
    height: auto;
    min-height: 2.5rem;
    font-size: 100%;
}

#spreaderOnFarmSchedules select {
    width: 8rem;
}

.week-selector {
    float: left;
    display: flex;
    padding: 0.375rem 0;
    align-items: center;
    font-size: 85%;
}

.week-selector i {
    display: block;
}

.scheduleList > h3.day {
    margin: 1.5rem 0 0;
}

.scheduleList .jobsHeader + h3.day {
    margin-top: 0;
}

.scheduleList .job .preview span.delete {
    font-size: 100%;
}

.scheduleList .job.active .preview .delete a {
    border-color: #fff;
    color: #fff;
}

.scheduleList .job.active .preview .delete a i {
    padding-bottom: 0;
}

.productDetails table {
    margin-top: 0;
}

.productDetails > td {
    padding: 0;
}

.productDetails table th,
.productDetails table td {
    padding: 0.25rem 0.5rem;
    font-size: 100%;
}


/* Overviews */

.scheduleOverview {
    background: #fff;
    padding: 0;
}

.drag-placeholder {
    background: #fafafa;
    height: 5rem !important;
    margin: 0;
    border: 1px dashed #ccc;
    border-radius: 0.5rem;
}


/* -- Overview Header -- */

.scheduleOverview .overviewHeader {
    display: flex;
    position: fixed;
    top: 0;
    background: #fff;
    width: 100%;
    padding: 0.75rem;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid #ccc;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    z-index: 9;
}

.scheduleOverview .overviewHeader h1 {
    margin: 0;
    text-transform: uppercase;
    font-size: 190%;
    order: 2;
}

.scheduleOverview .dateContainer {
    display: flex;
    order: 1;
}

.scheduleOverview .dateContainer input {
    width: 7.5rem;
    margin: 0;
    padding: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0 none;
    text-align: center;
    font-size: 120%;
}

.scheduleOverview .dateContainer button {
    padding: 0.5rem 1.25rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.scheduleOverview .legend {
    display: flex;
    width: 11rem;
    padding: 0;
    flex-wrap: wrap;
    font-size: 95%;
    order: 3;
}

.scheduleOverview .legend li {
    width: 50%;
    margin: 0;
    line-height: 1;
}


/* -- Vehicles -- */

.scheduleOverview .vehicles {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: 61px 0 0 15rem;
    padding: 0 1rem 1rem;
    white-space: nowrap;
    overflow: auto;
}

.scheduleOverview .vehicle {
    display: inline-block;
    width: 15rem;
    padding: 0.5rem 0 0;
    vertical-align: top;
}

.scheduleOverview .vehicle h2 {
    display: flex;
    margin: 0;
    padding: 0 0.25rem;
    align-items: center;
    line-height: 1.5;
    font-size: 115%;
    color: #0073c6;
}

.scheduleOverview .vehicle h2 .approveVehicle {
    display: inline-block;
    width: 19px;
    margin: 4px 0.5rem 4px 0;
    padding: 0px;
    font-size: 2px;
    vertical-align: text-top;
}

.scheduleOverview .vehicle h2 .approveVehicle i {
    font-size: 17px;
}

.scheduleOverview h2 .toggle-note {
    margin: 0 0 0 auto;
    padding: 0px;
    line-height: 0;
}

.scheduleOverview h2 .toggle-note i {
    font-size: 17px;
}

.scheduleOverview .vehicle .capacity {
    margin: 0;
    padding: 0.25rem 0.25rem 0;
    font-size: 75%;
}

.scheduleOverview .vehicle .driver {
    margin: 0;
    padding: 0.125rem 0.25rem 0.75rem;
    font-size: 75%;
}

.scheduleOverview .vehicle .capacity strong,
.scheduleOverview .vehicle .driver strong {
    display: inline-block;
    width: 3.75rem;
}

.scheduleOverview .vehicle .driver + .load {
    margin-bottom: 0;
}

.scheduleOverview .vehicle h3,
.scheduleOverview .vehicle h4,
.scheduleOverview .vehicle h5,
.ui-sortable-helper h5 {
    position: relative;
    background-color: #195D8E;
    margin: 0;
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid #fff;
    line-height: 1.3;
    font-weight: 300;
    font-size: 80%;
    color: #fff;
}

.scheduleOverview .vehicle h4 {
    background-color: #0073c6;
}

.scheduleOverview .vehicle h5,
.ui-sortable-helper h5 {
    background-color: #8495a0;
}

.scheduleOverview .vehicle h3:hover,
.scheduleOverview .vehicle h4:hover,
.scheduleOverview .vehicle h5:hover {
    cursor: move;
}

.scheduleOverview .vehicle h5:after,
.ui-sortable-helper h5:after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%; right: 0.375rem;
    width: 12px;
    height: 12px;
    margin: 0;
    transform: translate(0, -50%);
    vertical-align: text-bottom;
    border: 1px solid #fff;
    border-radius: 100%;
}

.scheduleOverview .vehicle h5.new:after,
.ui-sortable-helper h5.new:after {
    background-color: #731e7b;
}

.scheduleOverview .vehicle h5.approved:after,
.ui-sortable-helper h5.approved:after {
    background-color: #d23736;
}

.scheduleOverview .vehicle h5.accepted:after,
.ui-sortable-helper h5.accepted:after {
    background-color: #fad834;
}

.scheduleOverview .vehicle h5.completed:after,
.ui-sortable-helper h5.completed:after {
    background-color: #4cbd52;
}

.scheduleOverview .alert {
    display: none;
    margin: 0 auto 0.5rem;
    padding: 0.37rem;
    text-align: center;
    font-size: 70%;
    color: #fff;
}

.scheduleOverview .alert:after {
    content: none;
}

.scheduleOverview .alert.active {
    display: block;
}

.scheduleOverview .alert.success {
    background-color: #4abe52;
}

.scheduleOverview .alert.error {
    background-color: #c45555;
}

.scheduleOverview .vehicle .details,
.ui-sortable-helper .details {
    background-color: #f7f7f7;
    padding: 0.5rem;
    overflow: hidden;
}

.scheduleOverview .reminder h5 {
    background-color: #dd408f;
}

.scheduleOverview .reminder h5::after {
    content: none;
}

.scheduleOverview .reminder h5 .delete_reminder {
    display: flex;
    position: absolute;
    top: 50%; right: 11px;
    width: 24px;
    height: 24px;
    border-radius: 3px;
    transition: all 0.25s ease;
    transform: translate(0, -50%);
    justify-content: center;
    align-items: center;
    color: #fff;
}

.scheduleOverview .reminder h5 .delete_reminder:hover {
    background: #fff;
    color: #dd408f;
}

.scheduleOverview .reminder h5 .delete_reminder span {
    font-size: 20px;
}

.scheduleOverview .unassigned .reminder h5 .delete_reminder {
    display: none;
}

.scheduleOverview .unassigned .reminder h5 {
    background-color: #8495a0;
}

.scheduleOverview .vehicles .reminder h5 {
    /* animation: pulse 2.5s infinite 2.5s; */
}

@keyframes pulse {
    0% {
        background-color: rgba(221, 64, 143, 1);
    }

    40% {
        background-color: rgba(221, 64, 143, 0.5);
    }

    80% {
        background-color: rgba(221, 64, 143, 1);
    }

    100% {
        background-color: rgba(221, 64, 143, 1);
    }
}

.scheduleOverview dl {
    display: flex;
    margin: 0 0 0.5rem;
    align-items: baseline;
    flex-wrap: wrap;
}

.scheduleOverview dl dt {
    width: 3.75rem;
    margin: 0;
    padding: 0 0 0.25rem;
    font-weight: 300;
    font-size: 75%;
}

.scheduleOverview dl dd {
    margin: 0;
    padding: 0 0 0.25rem;
    white-space: initial;
    text-align: right;
    font-weight: bold;
    font-size: 75%;
    flex: 1 1 calc(100% - 3.75rem);
}

.scheduleOverview .pickupTime,
.scheduleOverview .deliveryTime {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

.scheduleOverview .pickupTime label,
.scheduleOverview .deliveryTime label {
    margin-right: auto;
    padding: 0;
}

.scheduleOverview .timeSelect {
    background-position: right 0.5rem top 50%;
    width: auto;
    padding: 0.375rem 2rem 0.375rem 0.5rem;
    font-size: 90%;
}

.scheduleOverview .pickupHour,
.scheduleOverview .deliveryHour {
    margin: 0 0.25rem 0 0;
}

.scheduleOverview .pickupMin,
.scheduleOverview .deliveryMin {
    margin: 0 0 0 0.25rem;
}

.scheduleOverview .vehicle .bookingNumber {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.scheduleOverview .vehicle .bookingNumber input {
    width: 6rem;
    margin: 0;
    padding: 0.375rem 0.5rem;
    font-size: 90%;
}

.scheduleOverview .vehicle dt.notes {
    width: 100%;
}

.scheduleOverview .vehicle dd.notes {
    width: 100%;
    text-align: left;
}

.scheduleOverview .vehicle .notes textarea {
    min-width: 14rem;
    max-width: 14rem;
    height: auto;
    margin: 0;
    padding: 0.375rem 0.5rem;
    resize: vertical;
    font-size: 90%;
}

.scheduleOverview .vehicle .buttons {
    display: flex;
    margin: 0.5rem 0 0;
    justify-content: space-evenly;
}

.scheduleOverview .vehicle .buttons .button {
    margin: 0;
    padding: 0.5rem 1.25rem;
    font-size: 70%;
}

.scheduleOverview .vehicle .buttons .button.newload {
    border-color: #195D8E;
}

.scheduleOverview .vehicleGeneralNotes h3 {
    display: flex;
}

.scheduleOverview .vehicleGeneralNotes h3 .date {
    margin: auto 0 auto auto;
    font-weight: 300;
    font-size: 80%;
}

.scheduleOverview .vehicleGeneralNotes .actions {
    padding-top: 0;
    border-top: 0 none;
}

.scheduleOverview .movement-unassigned .show-assigned,
.scheduleOverview .movement-assigned .show-unassigned {
    display: none;
}


/* -- Unassigned -- */

.scheduleOverview .unassigned {
    position: fixed;
    top: 61px; bottom: 0; left: 0;
    background: #fff;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
    overflow-y: scroll;
    z-index: 10;
}

.scheduleOverview .unassigned h2 {
    margin-bottom: 1.625rem;
    justify-content: center;
}

.scheduleOverview .unassigned h5:after {
    content: none;
}


/* -- Calendar -- */

.scrollableTable {
    margin: 61px 0 0;
}

.scrollable-table-x {
    padding-bottom: 1.5rem;
}

.scrollable-table-y {
    width: 100%;
}

.calendarOverview {
    min-height: 100%;
    border-radius: 0;
}

.calendarOverview > thead > tr > th:not(.weekday) {
    white-space: nowrap;
}

.calendarOverview tbody tr {
    background: #fff;
}

.calendarOverview > tbody > tr > td {
    border: 1px solid #e3e3e3;
    padding: 0;
}

.calendarOverview .weekday {
    width: 62px;
    min-width: 62px;
    max-width: 62px;
    padding: 1.5rem 0.875rem;
}

.calendarOverview tbody .weekday p {
    margin: auto;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    line-height: 1;
    font-weight: 400;
    font-size: 150%;
}

.calendarOverview tbody .weekday p span {
    font-weight: 300;
    font-size: 75%;
}

.calendarOverview .preview {
    position: relative;
    background: #f7f7f7;
    width: 7.875rem;
    margin: 0.25rem;
    padding: 0.375rem 0.5rem;
    border-left: 5px solid transparent;
    border-radius: 3px;
    text-align: left;
}

.calendarOverview .preview:hover {
    background: #f3f3f3;
    cursor: pointer;
}

.calendarOverview .preview.new {
    border-left-color: #731e7b;
}

.calendarOverview .preview.approved {
    border-left-color: #d23736;
}

.calendarOverview .preview.accepted {
    border-left-color: #fad834;
}

.calendarOverview .preview.completed {
    border-left-color: #4cbd52;
}

.calendarOverview .preview .delete {
    position: absolute;
    top: 0; right: 0;
    border-top-right-radius: 3px;
    border: 0 none;
}

.calendarOverview .preview .delete:hover {
    background: #e3e3e3;
    color: #333;
}

.calendarOverview .preview .delete i {
    display: block;
    font-size: 13px;
}

.calendarOverview .preview p {
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
    overflow: hidden;
    font-size: 100%;
}

.calendarOverview .complete {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    background: #fff;
    width: calc(100% - 3rem);
    max-width: 30rem;
    max-height: calc(100% - 3rem);
    padding: 1rem;
    border-radius: 5px;
    transform: translate(-50%, -50%);
    overflow-y: scroll;
    z-index: 11;
}

.calendarOverview .complete .rego-note {
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid #333;
    margin-bottom: 10px;
}

.calendarOverview .complete .rego-note h3 {
    float: left;
    border-bottom: none;
    width: unset;
    margin: 0 0 0rem;
}

.calendarOverview .complete .rego-note .toggle-note {
    float: right;
    margin: 0 0 0 auto;
    padding: 0px;
    line-height: 0;
}

.calendarOverview .complete.active {
    display: block;
}

.calendarOverview .complete .info {
    float: left;
    width: calc(100% - 10rem);
    padding-right: 1rem;
}

.calendarOverview .complete dt {
    width: 4rem;
    text-align: left;
    font-size: 100%;
}

.calendarOverview .complete dd {
    flex: 1 1 calc(100% - 4rem);
    text-align: left;
    font-size: 100%;
}

.calendarOverview .complete table {
    margin: 0 0 0.75rem;
}

.calendarOverview .complete table.spread {
    width: 10rem;
}

.calendarOverview .complete table th {
    font-size: 100%;
}

.calendarOverview .complete table td {
    font-size: 100%;
}

.calendarOverview .complete .notes dt {
    width: 100%;
    text-align: left;
}

.calendarOverview .complete .notes dd {
    width: 100%;
    margin: 0 0 0.75rem;
    font-weight: bold;
    text-align: left;
}

.calendarOverview .complete .actions {
    font-size: 85%;
}

.calendarOverview .complete .actions .button {
    padding: 0.625rem 1.25rem;
}

.calendarOverview .complete .actions .action {
    border-bottom: 0 none;
    font-size: 100%;
}


/* Page Specific */

/* -- Auth -- */

.auth {
    position: absolute;
    top: 50%; right: 0; left: 0;
    background: #f9f9f9;
    width: 100%;
    max-width: 25rem;
    margin: 0 auto;
    padding: 2rem;
    border-radius: 5px;
    text-align: center;
    transform: translateY(-50%);
}

.static .auth {
    top: 0;
    margin: 1rem auto;
    transform: none;
}

.auth .logo {
    display: block;
    max-width: 100%;
    margin: 0 auto 1.5rem;
}

.auth p.error {
    padding: 0.75rem 0.75rem 0;
}

.auth p.error:first-of-type {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}

.auth p.error:last-of-type {
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

.auth label {
    margin: 0 0 0.75rem;
    font-size: 90%;
}

.auth input {
    margin: 1rem 0 0;
    padding: 0.75rem;
}

.auth input:first-of-type {
    margin-top: 0;
}

.auth .actions {
    margin-top: 1.5rem;
    padding: 0;
    border: 0 none;
}

.auth .actions .forgot {
    margin: 0 auto 0 0;
    padding: 0.5rem;
    font-weight: 400;
    font-size: 75%;
    color: #999;
}

.auth .actions .forgot:hover {
    color: #333;
}

.auth .actions button {
    margin: 0;
    padding: 0.625rem 1.5rem;
    font-weight: 400;
}


/* -- Dashboard -- */

#dashboard .menu-icon {
    display: none;
}

#dashboard #dashSections {
    padding-bottom: 1rem;
}

#dashSections {
    display: flex;
    margin: 0;
    padding: 0 0 0.5rem;
    list-style: none;
    overflow: hidden;
    flex-wrap: wrap;
}

#dashSections > li {
    width: 33.33%;
    margin: 1.5rem 0 0;
    padding: 0 0.75rem;
    vertical-align: top;
}

#dashSections > li:nth-of-type(1),
#dashSections > li:nth-of-type(2),
#dashSections > li:nth-of-type(3) {
    margin-top: 0;
}

#dashSections li h3 {
    display: flex;
    margin: 0;
    padding: 0.25rem;
    border-bottom: 1px solid #0073c6;
    align-items: center;
    font-weight: 600;
    font-size: 1.5em;
    line-height: 2;
    color: #0073c6;
}

#dashSections li h3 i {
    margin-right: 0.5rem;
    vertical-align: middle;
    font-size: 30px;
    color: #333;
}

#dashSections li ul {
    margin: 0.75rem 0 0;
    padding: 0 0.5rem;
    list-style: none;
}

#dashSections li ul li {
    width: 100%;
}

#dashSections li ul ul {
    display: none;
}

#dashSections a {
    color: #505050;
}

#dashSections a:hover {
    color: #0073c6;
}


/* -- Customers -- */

#customers table {
    overflow: initial;
}


/* -- Jobs -- */

#viewJob .organisation-header,
#viewJob .envelope {
    display: none;
}

#viewJob .grade-analysis .blend-name span {
    display: block;
    max-height: 46px;
    overflow: hidden;
}

#viewJob .blend-instructions-block {
    width: auto;
    margin-top: 0.25rem;
    font-size: 110%;
}

#viewJob .blend-instructions-block tr {
    background: transparent;
}

#viewJob .blend-instructions-block td {
    padding: 0.25rem;
}

#edit-job .serviceOnly {
    display: block;
    width: 100%;
    padding: 0.25rem;
    font-size: 80%;
}

.job-notes {
    padding: 0 2rem 0 0;
    vertical-align: top;
}

.job-notes fieldset {
    padding: 0.75rem 1rem 1rem;
    border: 1px solid;
}

.job-notes fieldset legend {
    width: auto;
    padding: 0 0.5rem;
    border: 0 none;
}

table.additional-information tr td {
    border-top: 1px solid;
    line-height: 1.5;
}

table.additional-information tr td a {
    padding: 0;
}

.expectedDeliveryDate {
    text-align: center;
}

.expectedDeliveryDate p {
    margin: 0.375rem 0;
    font-weight: bold;
    font-size: 125%;
}

.allTotalHa {
    border: 5px solid #f7f7f7;
    border-top: 0 none;
    font-weight: bold;
}

.collapseInfoJob,
.collapseInfoBlend {
    display: block;
    width: 1rem;
}

.collapseInfoJob i,
.collapseInfoBlend i {
    display: block;
    animation: blink 3s linear infinite;
}

.jobCreationInfo,
.blendCreationInfo {
    display: none;
}

.jobCreationInfo ol,
.blendCreationInfo ol {
    margin: 1rem 0 0;
    padding: 0;
}

.jobCreationInfo ol li,
.blendCreationInfo ol li {
    margin: 0;
}

.jobCreationInfo :first-child,
.blendCreationInfo :first-child {
    margin-top: 0;
}

#badCredit {
    margin: 0 auto;
}

#jobs {
    padding-top: 1rem;
}

.paddockBlends {
    margin-bottom: 1.25rem;
}

.paddockBlends .editBlend {
    text-decoration: underline;
}

.paddockBlends .editBlend:hover {
    text-decoration: none;
}

.paddockBlends th #useAll {
    margin-top: 0.25rem;
}

.paddockBlends th label[for="useAll"] {
    display: inline;
    padding: 0 0 0 0.375rem;
    vertical-align: text-top;
}

.paddockBlends td {
    background-color: #fff;
}

.paddockBlends .section td {
    background-color: #f3f3f3;
    font-weight: bold;
}

.paddockBlends .paddock td:first-child {
    padding-left: 1rem;
}

.paddockBlends td label {
    display: none;
}

label[for="fixedFreight"] {
    display: inherit;
    font-size: 90%;
}

#fixedFreight {
    margin-right: 0.125rem;
    vertical-align: baseline;
}

.paddock {
    border-bottom: 1px dashed #ddd;
}

.paddock:last-child {
    border-bottom: 0 none;
}

.paddock .usePaddockHa {
    margin: 0 0.5rem 0 0;
}

.paddock .usePaddockHaValue {
    display: inline;
    width: calc(100% - 2rem);
}

.paddock .usePaddockHaValue + .error {
    display: block;
    margin: 0.5rem 0 0;
}

#jobs tfoot td {
    background: #f7f7f7;
    padding: 1rem 0.5rem;
    font-weight: bold;
}

#jobs .buttons {
    width: 100%;
}

#newBlend[disabled] {
    background: #f7f7f7;
    border-color: #ccc;
    color: #ccc;
}

#newBlend[disabled]:hover {
    box-shadow: none;
    cursor: default;
}

#blendForm {
    display: none;
    position: absolute;
    background-color: #fff;
    top: 0; right: 0; left: 0;
    max-width: 1092px;
    margin: 2rem auto;
    padding: 1rem;
    border: 1px solid #ccc;
    z-index: 9;
}

.blendingWorksheet h3 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

#addProduct {
    padding: 0.375rem 0.75rem;
    font-size: 70%;
}

#blendingWorksheet {
    margin-bottom: 1rem;
}

#saveBlend .totals td {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    font-weight: bold;
}

#blendingWorksheet .totals td {
    padding: 1rem 0.5rem;
}

#blendingWorksheet + .buttons {
    width: 100%;
}

#heavyMetals,
#blendingInstructions,
#viewingOptions {
    margin-bottom: 2rem;
}

#costCalculations tbody tr {
    background: #fff;
    border-top: 1px dashed #ccc;
}

#costCalculations tbody tr:first-child {
    border-top: 0 none;
}

.scheduleType {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.scheduleType label {
    display: flex;
    width: auto;
    margin-right: auto;
    align-items: center;
}

.scheduleType label i {
    margin: 0 0.25rem;
}


/* -- Quote -- */

#view-quote .quoteBox > tr:first-child > td:first-child,
#view-quote .quoteBox > tr:first-child > td:nth-child(2) {
    border-top: 1px solid;
}

#view-quote .quoteBox > tr > td:first-child {
    border-left: 1px solid;
}

#view-quote .quoteBox > tr > td:nth-child(2) {
    border-right: 1px solid;
}

#view-quote .quoteBox > tr:last-child > td:first-child,
#view-quote .quoteBox > tr:last-child > td:nth-child(2) {
    border-bottom: 1px solid;
}


/* -- Sales Order -- */

#view-sales-order table.pdf tfoot tr:first-child td.orderBox {
    border-top: 1px solid;
}

#view-sales-order table.pdf tfoot tr td.orderBox:first-child {
    border-left: 1px solid;
}

#view-sales-order table.pdf tfoot tr td.orderBox:nth-child(2) {
    border-right: 1px solid;
}

#view-sales-order table.pdf tfoot tr:last-child td.orderBox {
    border-bottom: 1px solid;
}

.productFarm {
    font-size: 115%;
}

#view-sales-order .supplier-to-customer {
    background-color: #d23736;
    padding: 8px;
    display: inline-block;
    margin: 17px 1.5rem;
    border-radius: 12px;
}

#view-sales-order .depot-to-customer {
    background-color: #4cbd52;
    padding: 8px;
    display: inline-block;
    margin: 17px 1.5rem;
    border-radius: 12px;
}

/* -- Quick Sale -- */

#quick-sale .serviceOnly {
    margin-left: 50px;
}

#quick-sale .serviceOnly input[type='checkbox'] {
    -webkit-appearance: none;
    width: 30px;
    height: 30px;
    background: white;
    border-radius: 5px;
    border: 1px solid #555;
    margin-left: 25px;
}

#quick-sale .serviceOnly input[type='checkbox']:checked {
    background: #abd;
}


/* -- Stock Movements -- */

#stock-movements table tbody tr {
    background: #fff;
}

#stock-movements table tbody tr:nth-child(4n+1),
#stock-movements table tbody tr:nth-child(4n+2) {
    background-color: #f7f7f7;
}


/* -- Logistics -- */

#depotSchedule .scheduleList .job .complete dl dt {
    line-height: 1.5;
}

#depotSchedule .scheduleList .job .complete dl dd {
    line-height: 1.5;
}

.quicksale {
    position: absolute;
    top: 50%; right: 0.5rem;
    transform: translate(0, -50%);
    font-size: 75%;
}

#holiday_modal {
    text-align: left;
}

#holiday_modal #scheduleForm {
    margin-top: 0;
}


/* -- Purchase Orders -- */

#purchaseOrder .actions {
    margin-top: 3rem;
}


/* -- Partial Invoices -- */

#partial-invoices .searchBox {
    width: 50%;
}

#view-preview-partial-invoice tr.notes-box,
#view-partial-invoice tr.notes-box {
    background: #dff1ff;
}


/* -- Spreading & Freight Rate -- */

.rateTables {
    display: flex;
    flex-wrap: wrap;
}

.rateTables .spreadingRates,
.rateTables .freightRates {
    width: calc(50% - 1rem);
    margin: 0 0.5rem;
}

.rateTables h2 {
    font-size: 150%;
}


/* -- Weighbridge Ticket -- */

.weighbridge-ticket.carbon-copy {
    display: none;
}

.weighbridge-ticket .customerdetails h5 {
    margin-bottom: 0.25rem;
}

.weighbridge-ticket .customerdetails span {
    display: inline-block;
    width: 4.5rem;
    margin-right: 0.5rem;
}

.weighbridge-ticket .vehicledetails span {
    display: inline-block;
    width: 3rem;
}

.weighbridge-ticket .vehicledetails strong {
    margin-left: 0.5rem;
}

.weighbridge-ticket .weightDetails {
    margin-top: 3.25rem;
}

.weighbridge-ticket .weightDetails .actual {
    border-bottom: 4px solid #0073c6;
    border-left: 4px solid #0073c6;
    font-weight: 700;
    font-size: 100%;
}

.weighbridge-ticket .weightDetails .ticket {
    border-right: 4px solid #0073c6;
    border-bottom: 4px solid #0073c6;
    border-left: 4px solid #0073c6;
    font-weight: 700;
    font-size: 100%;
}

.weighbridge-ticket #productDetails {
    /* margin-top: 2.875rem; */
}

.weighbridge-ticket .ticket-info {
    display: flex;
    width: 100%;
    margin: 1rem 0 2rem;
    padding: 0 2rem;
    justify-content: space-between;
    align-items: center;
    font-size: 100%;
}

.weighbridge-ticket .ticket-info h5 {
    margin: 0;
    font-size: 100%;
}

.weighbridge-ticket .ticket-info p {
    margin: 0;
}

.weighbridge-ticket .signoff {
    float: left;
    display: none;
    width: 100%;
    margin-top: 2.5rem;
    text-align: center;
}

.weighbridge-ticket .signoff dt {
    display: inline-block;
    margin: 0 0.5rem 0 auto;
}

.weighbridge-ticket .signoff dt.signature {
    margin-left: 5rem;
}

.weighbridge-ticket .signoff dd {
    display: inline-block;
    width: 35%;
    border-bottom: 1px dotted;
}

.weighbridge-ticket .signoff :last-child {
    margin-right: auto;
}


/* -- Driver Dashboard -- */

#driverDashboard {
    display: block;
}

#driverDashboard #dashSections li {
    width: 50%;
}

#driverDashboard #dashSections li label {
    position: relative;
    background: #f7f7f7;
    width: calc(100% - 1rem);
    margin: 0.5rem 0.5rem 0;
    padding: 0.75rem;
    border-radius: 3px;
    text-align: center;
    overflow: hidden;
    font-size: 150%;
}

#driverDashboard #dashSections li label:hover {
    background: #eee;
    cursor: pointer;
}

#driverDashboard #dashSections li label.active {
    background: #4cbd52;
    color: #fff;
}

#driverDashboard #dashSections li label input[type="radio"] {
    position: absolute;
    right: 100%; bottom: 100%;
}

#driverDashboard h5 {
    margin: 0;
    padding: 1.25rem 0 0.5rem;
    text-align: center;
}

#driverDashboard .actions {
    margin-top: 2rem;
}


/* -- Driver Checklists -- */

#driverCheckList ul {
    display: flex;
    margin: 0;
    padding: 0;
    justify-content: center;
    flex-wrap: wrap;
}

#driverCheckList li {
    display: flex;
    position: relative;
    background: #f3f3f3;
    width: calc(25% - 1rem);
    margin: 0 0.5rem 1rem;
    border-radius: 3px;
    text-align: center;
    overflow: hidden;
    flex-wrap: wrap;
}

#driverCheckList li:first-of-type {
    width: 100%;
}

#driverCheckList input {
    position: absolute;
    top: 50%; left: 0;
    width: auto;
    margin: 0;
    transform: translate(-200%, -50%);
}

#driverCheckList label {
    display: flex;
    padding: 1.125rem;
    justify-content: center;
    align-items: center;
    font-size: 110%;
}

#driverCheckList label:hover {
    background: #e3e3e3;
    cursor: pointer;
}

#driverCheckList input:checked ~ label {
    background: #4cbd52;
    color: #fff;
}

#driverCheckList li span.error {
    font-size: 100%;
    text-align: center;
}


/* -- Driver Schedules -- */

#driver-schedule-overview #current_date {
    margin-left: 0;
}

.driverScheduleOverview .vehicle {
    width: 50%;
    padding: 0 0.5rem 0.5rem;
}

.driverScheduleOverview .vehicle legend {
    border-bottom: 0 none;
    text-align: center;
    font-size: 130%;
    color: #0073c6;
}

.driverScheduleOverview .vehicle .notes textarea {
    max-width: 100%;
    font-size: 100%;
}

.driverScheduleOverview .vehicle h3:hover,
.driverScheduleOverview .vehicle h4:hover,
.driverScheduleOverview .vehicle h5:hover {
    cursor: default;
}

.driverScheduleOverview .vehicle h5.completed:hover {
    background-color: #95a4af;
    cursor: pointer;
}

.driverScheduleOverview .details.completed {
    display: none;
}

.driverScheduleOverview .details.completed.active {
    display: block;
}

.driverScheduleOverview .completeSchedule {
    display: none;
}

#driverDailyInfo {
    display: none;
    position: fixed;
    top: 0; left: 50%;
    background: #fff;
    width: 100%;
    max-width: 25rem;
    max-height: calc(100vh - 4rem);
    margin: 2rem auto;
    padding: 1rem 1.5rem 1.5rem;
    transform: translate(-50%, 0);
    border-radius: 3px;
    overflow-y: scroll;
    z-index: 11;
}

.vehicleGeneralNotes {
    display: none;
    position: fixed;
    top: 0; left: 50%;
    background: #fff;
    width: 100%;
    max-width: 25rem;
    margin: 2rem auto;
    padding: 1rem 1.5rem 1.5rem;
    transform: translate(-50%, 0);
    border-radius: 3px;
    z-index: 11;
}

#driverDailyInfo.active,
.vehicleGeneralNotes.active {
    display: block;
}

#driverDailyInfo h2 {
    margin: 0;
    text-align: center;
}

#driverDailyInfo h3 {
    margin: 0 0 0.5rem;
    text-align: center;
}

#driverDailyInfo h4 {
    margin: 0;
    font-size: 110%;
}

#driverDailyInfo h4.date {
    float: left;
}

#driverDailyInfo h4.vehicle {
    float: right;
}

#driverDailyInfo #dailyWorksheet {
    margin-top: 2.5rem;
}

#driverDailyInfo dl {
    display: flex;
    flex-wrap: wrap;
}

#driverDailyInfo dl dt {
    display: flex;
    width: 50%;
    margin: 0;
    padding: 0.25rem 0 0.25rem 0.5rem;
    align-items: center;
    font-weight: 300;
}

#driverDailyInfo dl dd {
    display: flex;
    width: 50%;
    margin: 0;
    padding: 0.25rem 0.5rem 0.25rem 0;
    align-items: center;
}

#driverDailyInfo .divider {
    margin: 0.75rem 0 0;
    padding: 0.75rem 0 0;
    border-top: 1px solid #ccc;
}

#driverDailyInfo .timeSelect {
    background-position: right 0.5rem top 50%;
    width: auto;
    margin: 0;
    padding: 0.375rem 2rem 0.375rem 0.5rem;
    font-size: 90%;
}

#driverDailyInfo .timeSelect.hour {
    margin-right: 0.25rem;
}

#driverDailyInfo .timeSelect.min {
    margin-left: 0.25rem;
}

#driverDailyInfo input {
    margin: 0;
    padding: 0.375rem 0.5rem;
    font-size: 90%;
    line-height: normal;
}

#driverDailyInfo select {
    margin: 0;
    padding: 0.375rem 0.5rem;
    font-size: 90%;
}

#driverDailyInfo .addBreak,
#driverDailyInfo .adBlueInput .addFuel,
#driverDailyInfo .removeBreak,
#driverDailyInfo .removeFuel {
    display: none;
    margin-left: auto;
    padding-left: 0.5rem;
    font-size: 90%;
}


#driverDailyInfo .removeBreakExisting,
#driverDailyInfo .removeFuelExisting {
    margin-left: auto;
    padding-left: 0.5rem;
    font-size: 90%;
}

#driverDailyInfo .previousbreak dt,
#driverDailyInfo .previousbreak dd,
#driverDailyInfo .previousfuel dt,
#driverDailyInfo .previousfuel dd {
    background-color: #f3f3f3;
}

#driverDailyInfo .previousbreak input,
#driverDailyInfo .previousfuel input,
#driverDailyInfo .previousbreak select,
#driverDailyInfo .previousfuel select {
    background: 0 none;
    border-color: transparent;
    padding: 0.375rem 0;
    font-weight: 300;
    cursor: default;
}


/* -- Driver Spreader Calendar -- */

#driverCalendarOverview {
    table-layout: fixed;
}

#driverCalendarOverview th {
    font-size: 160%;
}

#driverCalendarOverview th span {
    font-size: 60%;
}

#driverCalendarOverview td {
    width: calc(100% / 7);
    padding: 0 0.5rem 0.5rem;
    border: 1px solid #e3e3e3;
}

#driverCalendarOverview td .preview {
    background: #f7f7f7;
    margin: 0.5rem 0 0;
    padding: 0.375rem 0.5rem;
    border-radius: 3px;
    border-left: 5px solid transparent;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}

#driverCalendarOverview td .preview:hover {
    background: #f3f3f3;
    cursor: pointer;
}

#driverCalendarOverview td .preview.new {
    border-left-color: #731e7b;
}

#driverCalendarOverview td .preview.approved {
    border-left-color: #d23736;
}

#driverCalendarOverview td .preview.accepted {
    border-left-color: #fad834;
}

#driverCalendarOverview td .preview.completed {
    border-left-color: #4cbd52;
}

#driverCalendarOverview .complete {
    display: none;
    position: absolute;
    top: 1rem; left: 50%;
    background: #fff;
    width: 90%;
    max-width: 1140px;
    max-height: calc(100vh - 2rem);
    margin: 0 auto;
    padding: 1.5em;
    transform: translate(-50%, 0);
    border-radius: 3px;
    overflow-y: scroll;
    z-index: 11;
}

#driverCalendarOverview .complete.active {
    display: block;
}

#driverCalendarOverview .complete.active.static {
    top: 0;
    margin: 2rem auto;
    transform: translate(-50%, 0);
}

#driverCalendarOverview .complete > h3:first-child {
    text-align: center;
}

#driverCalendarOverview .complete .flex-container {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

#driverCalendarOverview .complete dl {
    display: flex;
    width: calc(50% - 1rem);
    margin: 0 1rem 1rem 0;
    align-items: baseline;
    text-align: left;
    flex-wrap: wrap;
}

#driverCalendarOverview .complete dl dt {
    width: 8.25rem;
    margin: 0;
    font-weight: 300;
    font-size: 100%;
}

#driverCalendarOverview .complete dl dd {
    width: calc(100% - 8.25rem);
    margin: 0;
    font-weight: bold;
    font-size: 100%;
}

#driverCalendarOverview .complete .map {
    display: flex;
    background: #f7f7f7;
    width: calc(50% - 1rem);
    margin: 0 0 1rem 1rem;
    padding: 0.5rem;
    justify-content: flex-end;
    align-items: flex-start;
    flex-wrap: wrap;
}

#driverCalendarOverview .complete .map > * {
    width: calc(50% - 0.5rem);
}

#driverCalendarOverview .complete .map > *:nth-child(2n) {
    margin-left: 1rem;
}

#driverCalendarOverview .complete .map > *:nth-child(n+3) {
    margin-top: 1rem;
}

#driverCalendarOverview .complete th {
    text-align: center;
    font-size: 100%;
}

#driverCalendarOverview .complete td {
    width: auto;
    padding: 0.5rem;
    border: 0 none;
    font-size: 100%;
}

#driverCalendarOverview .complete .blend-instructions {
    width: calc(100% / 3);
    margin-bottom: 2rem;
}

#driverCalendarOverview .complete .paddocks {
    width: calc(100% / 3 * 2 - 1rem);
    margin: 0 0 2rem 1rem;
}

#driverCalendarOverview .complete .paddocks tbody tr:not(:first-child) td:first-child {
    padding-left: 1.5rem;
}

#driverCalendarOverview .complete .paddocks tbody tr:first-child {
    background: #f3f3f3;
}

#driverCalendarOverview .complete .paddocks tbody tr,
#driverCalendarOverview .complete .paddocks tfoot tr {
    background: #fff;
    border-bottom: 1px dashed #ddd;
}

#driverCalendarOverview .complete .schedulerNotes {
    width: calc(50% - 1rem);
    margin: 0 1rem 2rem 0;
    text-align: left;
}

#driverCalendarOverview .complete .driverNotes {
    width: 50%;
    margin-bottom: 2rem;
    text-align: left;
}

#driverCalendarOverview .complete .schedulerNotes label,
#driverCalendarOverview .complete .driverNotes label {
    padding: 0 0 0.5rem;
    font-size: 100%;
}

#driverCalendarOverview .complete .schedulerNotes p,
#driverCalendarOverview .complete .driverNotes p {
    margin: 0;
    padding: 0.625rem;
    font-size: 100%;
}

#driverCalendarOverview .complete #spreadingSetup {
    margin-bottom: 2rem;
    padding-right: 0.5rem;
}

#driverCalendarOverview .complete #spreadingCompleted {
    margin-bottom: 2rem;
    padding-left: 0.5rem;
}

#driverCalendarOverview .complete #spreadingSetup h3,
#driverCalendarOverview .complete #spreadingCompleted h3 {
    text-align: left;
}

#driverCalendarOverview .complete .actions button,
#driverCalendarOverview .complete .actions .button,
#driverCalendarOverview .complete .actions .action {
    font-size: 95%;
}

#driverCalendarOverview #spreaderonfarmdrivernotes {
    height: 5rem;
}

#driverCalendarOverview .paddocks .highlight {
    font-size: 15px;
    background: rgb(255, 75, 75);
    padding: 5px;
    border-radius: 5px;
}


/* -- JSA -- */

#jsa-form-overview .selectize-control {
    margin-bottom: 1rem;
}

#jsa-form-overview table tbody tr {
    background: transparent;
}

#jsa-form-overview table tbody tr.question:nth-child(4n + 3) td,
#jsa-form-overview table tbody tr.question-notes:nth-child(4n + 4) td {
    background-color: #f7f7f7;
}

#jsa-form-overview table tbody tr.question:nth-child(2n + 3) td {
    border-top: 1px solid #ccc;
}

#jsa-form-overview table tbody tr.question-notes td {
    padding-top: 0;
}

#jsa-form-overview table tbody tr.question-notes label {
    padding-right: 0;
    padding-left: 0;
}

#jsa-form-overview table .radiochecks {
    margin: 0;
    padding: 0;
}

#jsa-form-overview table label {
    font-size: 100%;
}

#jsa-form-overview table .question-notes textarea {
    height: 3.25rem;
}

#jsa-form-overview input.static {
    padding-right: 0;
    padding-left: 0;
    border: none;
}

#jsa-form-overview .date-row td {
    padding-top: 1rem;
}

#jsa-form-overview .scores input {
    font-weight: bold;
}

#jsa-form-overview_notes {
    height: 6.375rem;
}

#jsa-form-overview .risk-calculator {
    margin: 1rem 0 2rem;
}

#jsa-form-overview .risk-calculator-table tr:nth-child(2n) {
    background: transparent;
}

#jsa-form-overview .risk-calculator-table th {
    font-size: 87.5%;
}

#jsa-form-overview .risk-calculator-table td {
    position: relative;
    padding: 0;
    font-size: 100%;
    border-bottom: 1px solid red;
    border-left: 1px solid red;
}

#jsa-form-overview .risk-calculator-table td:last-child {
    border-right: 1px solid red;
}

#jsa-form-overview .risk-calculator-table input {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    opacity: 0;
}

#jsa-form-overview .risk-calculator-table label {
    width: 100%;
    padding: 0.5rem;
    line-height: 1.5;
    font-size: 87.5%;
    cursor: pointer;
}

#jsa-form-overview .risk-calculator-table input:checked + label {
    background: #fbe6a2;
}

#jsa-form-overview .risk-calculator-table.driver td {
    text-align: left;
}

#jsa-form-overview .risk-calculator-table.driver td:first-child {
    padding: 0.5rem;
    font-size: 87.5%;
}

#jsa-form-overview .risk-calculator-table.driver label {
    display: flex;
    align-items: center;
}

#jsa-form-overview .risk-calculator-table.driver label .score {
    display: flex;
    background: #4cbd52;
    width: 2rem;
    height: 2rem;
    margin-right: 0.5rem;
    border-radius: 5rem;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    color: #fff
}

#jsa-form-overview .toggle {
    display: flex;
    position: relative;
    background: #eee;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
}

#jsa-form-overview .toggle input {
    position: absolute;
    top: 0; left: 0;
    visibility: hidden;
    opacity: 0;
}

#jsa-form-overview .toggle label {
    position: relative;
    width: 50%;
    padding: 0.5rem;
    transition: all 0.25s ease;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
}

#jsa-form-overview .toggle label::before {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all 0.25s ease;
    z-index: -1;
}

#jsa-form-overview .toggle label[for$="yes"]::before {
    left: 0;
    background: #4cbd52;
    transform: translate(100%, 0);
}

#jsa-form-overview .toggle label[for$="no"]::before {
    left: 0;
    background: #df3535;
    transform: translate(-100%, 0);
}

#jsa-form-overview .toggle :checked + label {
    color: #fff;
}

#jsa-form-overview .toggle :checked + label::before,
#jsa-form-overview .toggle :checked + label::before {
    transform: translate(0, 0);
}

#jsa-form-overview .legend-table {
    font-weight: 500;
}

#jsa-form-overview .legend-table .low {
    background: #c7fba2;
}

#jsa-form-overview .legend-table .medium {
    background: #fbe6a2;
}

#jsa-form-overview .legend-table .high {
    background: #fbcfa2;
}

#jsa-form-overview .legend-table .extreme {
    background: #fba2a2;
}

#jsa-form-overview .score-table {
    margin-top: 1rem;
}

#jsa-form-overview #coordinators_comments {
    height: 5rem;
}

.scheduleOverview #jsa-form-overview {
    width: calc(100% - 2rem);
    max-width: 900px;
    height: calc(100% - 2rem);
    max-height: 900px;
    padding-bottom: 1rem;
}

.scheduleOverview #jsa-form-overview .modal-content {
    height: calc(100% - 3rem);
    overflow: scroll;
}

.scheduleOverview #jsa-form-overview .actions {
    margin-top: 1rem;
}

.scheduleOverview #jsa-form-overview .legend-table {
    margin-top: 1rem;
}

.scheduleOverview #jsa-form-overview label {
    text-align: left;
}

.scheduleOverview #jsa-form-overview .toggle label {
    text-align: center;
}

.risk-level {
    display: flex;
    max-width: 30rem;
    margin: 0 auto;
    padding: 1rem 2rem 1rem 1rem;
    border-radius: 0.5rem;
    border: 3px solid var(--risk-color);
    align-items: center;
}

.risk-level.low {
    --risk-color: #4cbd52;
}

.risk-level.medium {
    --risk-color: #fac833;
}

.risk-level.high {
    --risk-color: #fa9633;
}

.risk-level.extreme {
    --risk-color: #d23736;
}

.risk-level .symbol {
    margin-right: 1rem;
    font-size: 48px;
    color: var(--risk-color);
}

.risk-level .message h4 {
    margin: 0;
    color: var(--risk-color);
}

.risk-level .message p {
    margin: 0;
    font-weight: 400;
    font-size: 100%;
    color: var(--risk-color);
}


/* Misc */

.hide {
    display: none !important;
}

.multiFiles input {
    margin: 0.5rem 0 0;
}

.multiFiles input:first-child {
    margin-top: 0;
}

.multiFiles a {
    float: right;
    margin: 0.5rem 0 0;
    font-size: 70%;
}

.file-list {
    margin: 0 0 1rem;
}

.downloadCsvModal {
    display: flex;
    flex-wrap: nowrap;
}

.downloadCsvModal input {
    display: inline-block;
    width: calc(auto - 1rem);
    margin: 0 1rem 0 0;
}

.addItem {
    display: flex;
    margin: 0 0 1rem;
}

.addItem select {
    display: inline-block;
    width: 17rem;
    margin: 0;
    border-right: 0 none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.addItem a.button.add {
    margin: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.address {
    background: #f3f3f3;
    margin: 0 0.5rem;
    padding: 0.325rem 0.75rem;
    border-radius: 3px;
}

.address.full {
    width: calc(100% - 1rem);
}

.address.half {
    width: calc(50% - 1rem);
}

.address.third {
    width: calc(33.3% - 1rem);
}

.address.twothirds {
    width: calc(66.6% - 1rem);
}

.address.quarter {
    width: calc(25% - 1rem);
}

.address.threequarters {
    width: calc(75% - 1rem);
}

.address :last-child {
    margin-bottom: 0;
}

.selectize-input {
    display: block;
}

.selectize-input input {
    display: inline-block;
    font-size: 100%;
}

form dd fieldset.radiochecks {
    margin: 0;
}

dd input {
    margin: 0;
}

form dd fieldset.radiochecks.inline label {
    margin-right: 0;
}

form dd fieldset.radiochecks.inline input[type="radio"],
form dd fieldset.radiochecks.inline input[type="checkbox"] {
    margin-left: 1em;
}

/* Responsive */

@media only screen and (max-width: 1280px) {
}

@media only screen and (max-width: 1140px) {
    nav#main {
        width: auto;
        margin: 0 2em;
    }
}

@media only screen and (max-width: 1024px) {
}

@media only screen and (max-width: 940px) {
}

@media only screen and (max-width: 850px) {
}

@media only screen and (max-width: 768px) {
    body {
        padding: 0;
    }

    .pagecontainer {
        border-radius: 0;
    }

    #dashSections > li {
        width: 48%;
    }

    #dashSections > li:nth-of-type(3) {
        margin-top: 1.5rem;
    }

    #driverCheckList li {
        width: calc(33.33% - 1rem);
    }
}

@media only screen and (max-width: 700px) {
}

@media only screen and (max-width: 650px) {
}

@media only screen and (max-width: 600px) {
}

@media only screen and (max-width: 568px) {
    .system .account #user {
        left: 50%;
        margin: 0 auto;
        transform: translate(-50%, 0);
    }

    header {
        flex-direction: column;
        align-items: center;
    }

    header h1 {
        margin-bottom: 1rem;
        text-align: center;
    }

    #dashSections > li {
        width: 100%;
        margin-top: 1.5rem;
    }

    #dashSections > li:nth-of-type(2) {
        margin-top: 1.5rem;
    }

    #driverCheckList li {
        width: calc(48% - 1rem);
    }
}

@media only screen and (max-width: 450px) {
    .auth {
        width: 90%;
    }
}

@media only screen and (max-width: 400px) {
    body:not(#dashboard) .system .account #user {
        left: 120%;
    }

    #driverCheckList li {
        width: calc(100% - 1rem);
    }
}

@media only screen and (max-width: 320px) {
}


/* Print CSS */

@media print {
    body {
        background: none;
        padding: 0;
        @font-face {
            font-family: 'Nunito Sans', Helvetica;
            src: url('file:///usr/share/fonts/truetype/helvetica/Helvetica.ttf');
        }
    }

    .pagecontainer {
        background: none;
        max-width: 100%;
        padding: 0;
    }

    header,
    #subnav,
    .content > .buttons,
    .actions,
    .hide-pdf {
        display: none;
    }

    .show-pdf {
        display: inherit !important;
    }

    .row {
        break-inside: avoid;
    }

    .row:before,
    .row:after {
        content: '';
        display: table;
        clear: both;
    }

    .full,
    .half,
    .third,
    .twothirds,
    .quarter,
    .threequarters,
    .onefifths {
        float: left;
    }

    .material-icons {
        display: none !important;
    }

    .organisation-header {
        padding-top: 0;
        border-top: 0 none;
    }

    .organisation-header .organisation-logo {
        float: left;
    }

    .organisation-header .organisation-details {
        width: 100%;
    }

    .organisation-header .organisation-details h6 {
        font-size: 70%;
    }

    .organisation-header .organisation-details .contact {
        display: block;
        padding-right: 0.125rem;
    }

    .organisation-header .organisation-details .contact dt {
        display: inline;
        margin: 0;
    }

    .organisation-header .organisation-details .contact dd {
        display: inline;
        margin: 0 0 0 1rem;
    }

    .organisation-header .organisation-details .contact dt.abn {
        margin-left: 1rem;
    }

    .organisation-header .organisation-details .contact dt.abn + dd {
        margin-left: 0;
    }

    .organisation-header .organisation-details .contact dt.abn:after {
        content: ': ';
    }

    .organisation-header .organisation-details .contact dd a {
        color: #000;
    }

    #viewJob .organisation-header,
    #viewJob .envelope {
        display: block;
    }

    #viewJob .grade-analysis {
        width: 75%;
    }

    #viewJob .heavy-metals {
        width: 25%;
    }

    .page-break {
        page-break-before: always;
        break-before: always;
    }

    .envelope .issued-info {
        margin-top: 1rem;
        margin-bottom: 1rem;
        padding-right: 0;
        padding-left: 2rem;
    }

    .envelope .issued-info .status {
        display: none;
    }

    .envelope .issued-info .valid {
        float: left;
        width: 100%;
    }

    .uploaded-files li {
        border: 0 none;
        border-radius: 0;
    }

    .uploaded-files img.landscape {
        width: 100%;
        margin: 0 auto;
    }

    .uploaded-files img.portrait {
        height: 29cm;
        margin: 0 auto;
    }

    .ticket-info {
        float: left;
        display: table;
        width: 100%;
        margin: 0;
    }

    .ticket-info h5 {
        display: table-cell;
    }

    .ticket-info p {
        display: table-cell;
    }

    .ticket-info p.sales-order {
        width: 9rem;
    }

    .ticket-info p.date {
        width: 11rem;
    }

    .ticket-info p.time {
        width: 7rem;
    }

    .weighbridge-ticket .row {
        margin-bottom: 0;
    }

    .weighbridge-ticket.carbon-copy {
        display: block;
    }

    .weighbridge-ticket.carbon-copy .organisation-header {
        margin-top: 46px;
        padding-top: 46px;
        border-top: 1px dotted #ccc;
    }

    .weighbridge-ticket .signoff {
        display: block;
        margin-top: 1.5rem;
    }

    .weighbridge-ticket p:empty {
        display: none;
    }

    .weighbridge-ticket .ticket-info {
        margin: 0.5rem 0 0;
    }

    .weighbridge-ticket .weightDetails input {
        background: transparent;
        padding: 0;
        border: 0 none;
        opacity: 1;
    }
}

.region-customer-cell{
    background-color: #008ef4;
    color: #fff;
    font-weight: bold;
   	text-align: left;
   	padding: 0.6rem 0.7rem;
}

.region-customer-row{
	border-top: 3px solid white;
}

@media screen and (orientation: portrait) {
    #driverCalendarOverview .complete .blend-instructions {
        display: table;
        width: 100%;
    }

    #driverCalendarOverview .complete .paddocks {
        width: 100%;
    }

    #driverCalendarOverview .complete #spreadingSetup {
        width: 100%;
    }

    #driverCalendarOverview .complete #spreadingCompleted {
        width: 100%;
    }
}