/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}body {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 16.41px;
    color: #333;
}

#template-topbar {
    background: #000000;
    color: #ffffff
}

/* ========================================================================
 * Miscellaneous stylings
 */

h1, h2, h3, h4, h5, h6 { margin: 0px 0px; font-weight: 700; }

.search-box { width: 400px; }


input[type="checkbox"] {
    width: 24px;
    height: 24px;
}

input:not([type="color"]), select {
    background: #FFFFFF;
    border: 1px solid #BDBDBD;
    border-radius: 4px;
    padding: 14px 16px;
}

/* General rule for error condition */
.error { border: 4px solid #ff0000; }

/* A more specific rule for error conditions on input widgets */
input:not([type="color"]).error,
select.error {
    border: 4px solid #ff0000;
}

button, .button, .button-primary {
    display: inline-block;
    background: #ffffff;
    border-radius: 4px;
    padding: 14px 16px;
    color: #00233a;
    font-weight: 700;
    font-size: 15px;
    line-height: 18px;
    border: 1.5px solid #00233A;
}

button:hover, .button:hover {
    text-decoration: underline;
}

.button-primary {
    background: #00233A;
    color: #ffffff;
}

.button-primary:hover {
    background: #f5e5e5;
    color: #00233a;
}

#undelete-job-button {
    max-width: 12em;
}

h1 { font-size: 40px; line-height: 46.88px; }
h2 { font-size: 32px; line-height: 37.5px; }
h3 { font-size: 24px; line-height: 28.13px; }
h4 { font-size: 18px; line-height: 21.09px; }
h5 { font-size: 15px; line-height: 17.58px; }
h6 { font-size: 13px; line-height: 15.23px; }

input:not([type="color"])  { height: 18px; }

textarea {
    width: 480px;
    height: 10em;
}

.icon-span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.icon { height: 16px; }
.icon19 { height: 19px; }

.flat-button {
    font-weight: 500;
    font-size: 13px;
    line-height: 15px;
    display: inline-block;
    border: 0px;
    background-color: transparent;
    cursor: pointer;
}

a, a:visited {
    color: #00739e;
    font-weight: 400;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.titleblock {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#bcbar-buttons {
    display: flex;
    gap: 24px;
    align-items: center;
}

/* ========================================================================
 * Map tools styles
 */

.map-properties-dialog {
    background: #fff;
    border: 1px solid black;
    padding: 0.5em;
}

.map-properties-dialog button {
    margin-right: 0.5em;
}

.map-toolbar button {
    margin-top: 0.5em;
    margin-left: 0.5em;
    pointer-events: auto;
}

.map-toolbar button:not(.button-primary) {
    background: #ffffff;
}

.map-toolbar {
    position: absolute;
    zIndex: 1;
    left: 0px;
    top: 0px;
    pointer-events: none;
}

.map-toolbar-sub {
    pointer-events: auto;
}

.map-urbar {
    position: absolute;
    zIndex: 1;
    left: 0px;
    bottom: 0px;
}

.map-urbar button {
    margin-left: 0.5em;
    margin-bottom: 0.5em;
    width: 38px;
    height: 38px;
    background: #ffffff;
    padding: 0;
    font-size: 120%;
}

.map-zoombar {
    position: absolute;
    zIndex: 1;
    right: 0px;
    bottom: 0px;
}

/* The div that holds the top level of the on-map menu */
#map-menu-div {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0.5em;
  background-color: white;
  overflow-x: hidden;
  transition: 0.5s;
  margin: 0.5em;
  opacity: 100%;
  display: flex;
  flex-direction: column
}

.map-menu-container-div button {
    /* On map menu close buttons are smaller */
    padding:0.5em;
}

.map-menu-default-width {
    width:16em;
}

#map-layers-close-btn, #map-menu-open-btn, #map-zones-open-btn {
    opacity:100%;
}


#map-menu-open-btn {
  background-color: #dbd9d7;
}


.on-map-menu-close-btn {
    position:absolute;
    top:0;
    right:0;
    margin:0.5em;
}

.map-menu-button {
    margin: 0.5em;
    margin-right: 4em;
    padding: 0.5em;
}

/* The layers dialogue */
.map-menu-container-div {
    color: black;
    background: white;
    padding-right: 1em;
    padding-bottom: 1em;
    padding-left: 1em;

    border-radius: 10px;

    position: absolute;
    margin:0.5em;

    /* Ensure there is space for the buttons (full screen, zoom in/out)
       down the right hand side */
    right: 3em;

    /* Ensure the display (rate and area totas) are not obscured */
    max-height: calc(100% - 21em);

    /* Ensure the close buttin is fully visible in empty menu */
    min-width: 2.5em;

    /* Ensure the menu is below the main menu div */
    top: 11em;

    overflow-y: auto;
}

#map-menu-basemaps-set {
    display: inline-flex;
    flex-direction: column;
}

.onmap-menu-header{
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid green;
  display: flex;
  justify-content: space-between;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 10;
}

.onmap-menu-header .on-map-menu-close-btn {
    position:relative;
    float:right;
}

.onmap-menu-header span {
    /* legible menu titles */
    font-size:x-large;
    text-align: center;
    flex-grow: 1;
}


.map-field-set {
    display: inline-flex;
    flex-direction: column;
    gap: 20px;
    max-height:50vh;
}

.map-menu-item {
    cursor: pointer;
}

.map-zoombar button {
    margin-right: 0.5em;
    margin-bottom: 0.5em;
    background: #ffffff;
    display: block;
    width: 38px;
    height: 38px;
    padding: 0;
}

.map-menubar button {
    margin-top: 0.5em;
}

.map-label {
    color: #fc8;
    font-weight: bold;
    text-stroke: 1px solid #000;
    display: inline-block;
    white-space: nowrap;
}

.map-area-quantity {
    /* zIndex: 1; */
    align-items: center;
    background: #fff;
    border-radius: 4px;
    bottom: 0px;
    display: flex;
    font-size: larger;
    font-weight: bold;
    height: 38px;
    justify-content: center;
    left: 50%;
    margin-bottom: 0.5em;
    padding-left:0.5em;
    padding-right:0.5em;
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
    zIndex: 1;
}

/* Styling for a spinner that spins in an HTMLElement while we wait */
.spinner {
  width: 3em;
  height: 3em;
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
/* ========================================================================
 * Client picker styles
 */

.clientpick-title {
    font-size: 20px;
    font-weight: 700;
}

.clientpick-summary {
    background: #f6f6f6;
    padding: 20px;
}

/*
 * Styles for clients page header
*/
#all-clients-label {
    font-size: large;
    font-weight: bold;
}

#client-search {
    padding-right:2em;
}
/* ========================================================================
 * Map picker styles
 */

.mappicker-item {
    display: inline-block;
    margin-right: 1em;
    vertical-align: top;
}

.mappicker-thumbnail {
    margin-top: 1em;
    width: 15em;
    height: 15em;
    cursor: pointer;
    border: 2px solid rgba(0, 0, 0, 0);
}

.mappicker-selected {
    border: 2px solid red;
}

/* ========================================================================
 * Search picker styles
 */

.searchpick > input {
    margin-bottom: 0;
}

.searchpick-list {
    overflow-y: scroll;
    width: 20em;
    height: 10em;
    border: 1px solid black;
    background: #fff;
}

.searchpick-row {
    cursor: pointer;
    padding: 0.25em;
}

.searchpick-row:hover { background: #99e1f8; }

/* ========================================================================
 * Column-list styles
 */

td, th {
    padding: 1px 12px;
    font-size: 16px;
    line-height: 24px;
    text-align: left;
}

thead {
    background: #F6F6F6;
}

th {
    font-weight: 700;
}

.clist-flip-y {
    transform: scaleY(-1);
}
.clist-row:nth-child(odd) {
  background-color: #fff9f9; /* Apply background color to odd rows */
}

.clist-row:nth-child(even) {
  background-color: #ffffff; /* Apply background color to even rows */
}

.clist-row:hover {
    background: #00233A;
    color: #ffffff;
}

.clist-href-1st {
    color: #00739E;
    font-weight: 700;
}

.clist-href-1st:hover {
    color: #ffffff;
    text-decoration: underline;
}

.clist a, .clist a:visited { text-decoration: none; color: #333333; }

/* ========================================================================
 * Layout utilities
 */

html, body {
    width: 100%;
    height: 100%;
}

.body-print {
    width: 750px;
    margin-left: auto;
    margin-right: auto;
}

.scrollable {
    overflow: auto;
    width: 100%;
    height: 100%;
}

.vbox-gap, .hbox-gap {
    gap: 24px;
}

.vbox {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
    align-items: stretch;
}

.hbox {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: auto;
    align-items: stretch;
}

.box-grow2 {
    flex: 2;
    overflow: auto;
}

.box-grow {
    flex: 1;
    overflow: auto;
}

.hspread {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* The title on the "Manage" page */
#manage-title-span{
  display: flex;
  align-items: center;
}
#manage-title-span input {
    margin-left: 0.5em;
}

.stack {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.stack-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}

/* ========================================================================
 * Root template
 */

#template-logo { height: 50px; }

#template-topbar {
    font-weight: 700;
    padding: 16px 40px;
}

#template-topbar a {
    color: #ffffff;
}

/* ========================================================================
 * Auth: sidebar
 */

.auth-padwrap {
    padding: 40px 40px 80px;
    width: calc(100% - 80px);
    height: calc(100% - 120px);
    overflow: auto;
}

#auth-sidebar {
    width: 233px;
    background: #f6f6f6;

    flex-direction: column;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#auth-sidebar > div {
    width: 100%;
}

.auth-sidebar-item {
    display: block;
    padding: 16px;
    border-bottom: 1px solid #dddddd;
}

.auth-sidebar-selected {
    background: #ffffff;
}

.auth-sidebar-item label {
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
    color: #00233a;
    padding-left: 12px;
}

#auth-sidebar a:hover { text-decoration: none; }

#auth-powered-by {
    color: #757575;
    padding: 32px;
    display: none;
}

#auth-powered-by span {
    display: block;
    font-size: 12px;
    line-height: 14px;
    margin-bottom: 8px;
}

#auth-powered-by img {
    width: 100%;
}

/* ========================================================================
 * Maps/jobs: details view
 */

#details { background: #eee; }

.job-edit-qrow {
    display: inline-flex;
    flex-direction: row;
    gap: 12px;
    width: 100%;
    justify-content: left;
}

.job-edit-qrow input {
    width: 64px;
}

/* ========================================================================
 * Jobs: navigation topbar
 */

.navbar {
    display: flex;
    gap: 32px;
    border-bottom: 1px solid #BDBDBD;
}

.navbar-item {
    display: inline-block;
    cursor: pointer;
    font-weight: 700;
    font-size: 18px;
    line-height: 21px;
    color: #00739E;
}

a.navbar-item:hover { text-decoration: none; }

.navbar-selected {
    color: #333333 !important;
    border-bottom: 3px solid #333333;
}

/* ========================================================================
 * Proof of Application report UI
 */

.waiting {
    cursor:wait;
}

#div-poa-ui {
    margin:1em;
}

#poa_ui_div {
    border: 1px solid black;
    border-radius: 7px;
    background: #D6E8EF;
    padding: 0.4em; /* Minimal white space */
    display: inline-block;
    flex-direction: column; /* Arrange items vertically */
    align-items: flex-start; /* Align items to the start */
}

#poa_buttons_span {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#poa_ui_div button,h4 {
    margin: 0.2em 0;
}

#line_thickness {
    width: 3em;
    margin: 0.5em 0;
}

#poa_status_div {
    width: inherit;
    font-size: small;
    font-weight: bold;
    text-align: center;
    margin-top: 0.5em;
}

#poa-line-thickness-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0.2em 0;
    background: #b4cdd7;
    border-radius: 10px;
}
/* ========================================================================
 * Airstrip list: field labels
 */

.airstrip-line {
    display: block;
    vertical-align: top;
}

.airstrip-list-cell {
    display: inline-block;
    vertical-align: top;
}

.airstrip-key {
    width: 10em;
    font-weight: bold;
}

.airstrip-item {
    border-bottom: 1px solid black;
    vertical-align: top;
    padding-bottom: 1em;
    padding-top: 1em;
}

.airstrip-content {
    display: inline-block;
    vertical-align: top;
}

/* ========================================================================
 * Simple set selector widget: item strips
 */

.set-selector-strip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: 30%;
    overflow: hidden;
}

/* ========================================================================
 * Labelled fields
 */

.field-set {
    display: inline-flex;
    flex-direction: column;
    gap: 20px;
}

.field-span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.field-pair {
    display: inline-flex;
    flex-direction: column;
    gap: 8px;
}

.field-label {
    display: inline-block;
    font-size: 13px;
    line-height: 15px;
    font-weight: 700;
}

/* ========================================================================
 * Scrolltabs
 */

.scrolltabs-outer hr {
    margin-top: 24px;
    margin-bottom: 24px;
}

.scrolltabs-page {
    margin-bottom: 12px; /* will collapse */
}

.scrolltabs-title {
    margin-bottom: 12px;
}

/* ========================================================================
 * Report header
 */

.report-header {
    padding: 16px;
}

.report-key {
    width: 30%;
    display: inline-block;
    font-weight: bold;
}

.report-value {
    width: 70%;
    display: inline-block;
}

.report-pair {
    width: 50%;
    display: inline-block;
}

.report-dkey {
    width: 15%;
    display: inline-block;
    font-weight: bold;
}

.report-dvalue {
    width: 85%;
    display: inline-block;
}

.report-dpair {
    width: 100%;
    display: inline-block;
}

/* ========================================================================
 * Scrolltabs
 */

/* Matches with <h4> */
.scrolltabs-collapser {
    font-size: 2.4rem;
    line-height: 1.35;
    cursor: pointer;
}

/* ========================================================================
 * Misc. styles
 */

.small-button {
    padding-left: 1rem;
    padding-right: 1rem;
    margin-right: 0.5em;
}

.input-small {
    width: 4em;
}

/* Colouring the "Save" buttons
   When the button is not going to do anything (!dirty)
   Make inactive
*/

.inactive_colour {
    background: #B9C1C6;
}

.active_colour {
    background: #00233A;
}

/* For widgets that display data that is possibly inactive */
.inactive {
    text-decoration: line-through;
    color: #a7a7c7;
}

/* Farmer's Login */
#farmer_login_div {
    display: flex;
    flex-direction: column;
    justify-content: center;
 }

/* Hiding elements not available to the farmer when logged in */
.hidden_element {
    display: none !important;
}

#add_farmer_login_button,#cancel_login_button,#edit_farmer_login_button,#cancel_farmer_login_button
{
    float:left;
}


#farmer_login_div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 10px;
    padding: 20px;
}

#fl_label_span{
    padding-bottom:1em;
}

#fl_button_span {
    padding-top: 1em;
}

#fl_login_span {
    margin-bottom: 1em;
}

#fl_label_span,
#fl_login_span,
#fl_pw_span
 {
    margin-bottom: 1em;
    display: flex;
    justify-content: space-between;
    width: 62%; /* An odd value */
}

#fl_button_span {
    margin-bottom: 1em;
    display: flex;
    justify-content: space-between;
}

.flbutton{
    margin:1em;
}

#fl_login_span label,
#fl_pw_span label {
    align-self: flex-end;
}

#fl_login_span input,
#fl_pw_span input {
    align-self: flex-start;
}


/* ========================================================================
 * job_edit/Invoice tab
 */

/* Make the button to calculate an invoice look like a buttin */
#button-invoice-calc-rate{
    border-radius: 10px;
    background-color: black;
    color: white;
}

/* For the price and units, some space between them */
#div-invoice-price-unit .field-pair {
    padding-right:1em;
}


/* Multi job styles */
#div-map-tab-client-list   {
    overflow:auto;
}
#client-set-selector {
    max-height: 20em; /* 20 lines of client names */
    overflow:auto; /* Scroll for more */
    border: 2px inset #7d0707;
    border-radius: 0.5em;
}

/* For use in front/jobs.ts lists where there can be too many clients to show */
.multijob-placeholder {
    color:red;
}

#sub-job-list-inactive-header {
  background-color: beige;
  text-align: center;
  padding: 1em;
  margin: 0 auto;
}

#sub-job-list-inactive-header h3,
#sub-job-list-inactive-header h4 {
    /* some vertical spacing between elements headings*/
    margin: 0.5em 0;
}

/* The checkboxes for selecting sub-jobs on the Map tab */
/* Visual indicator that the check box is disabled for the label*/
.sub-job-checkbox:disabled + label {
    opacity: 0.5;
    cursor: not-allowed;
}
/* Change cursor for the checkbox when disabled */
.custom-checkbox:disabled {
    cursor: not-allowed;
}

/* ---------------- */
/* Debugging map tiles */

/* Borders around each tile
Slightly transparent map
*/
.dbg-tile{
    border: 2px inset #7d0707;
    border-radius: 0.5em;
    opacity:0.2;
}

/* Slippy refs printed on screen */
.dbg-label {
    border: 1px solid red;
}
/* ---------------- */

/* ========================================================================
 * Tracking page: right-hand device sidebar
 *
 * The map keeps `box-grow` so it consumes remaining width; the sidebar
 * is a fixed-width column that scrolls independently when the device
 * list grows long.
 */

.tracking-pane {
    /* `auth-padwrap` handles outer padding; we just need both children
       to share the available space. */
    min-height: 0;
}

/* When the pane goes fullscreen (button in the map zoombar), the
   browser strips its surrounding layout and paints whatever is behind
   the `:fullscreen` element black.  We need an explicit background
   here, plus to claim the full viewport so the flex layout (sidebar +
   map) gets the correct dimensions.  These two rules MUST stay split
   into separate blocks: a single unrecognised pseudo-class invalidates
   the whole selector list, so combining `:fullscreen` and the WebKit
   prefix would break both. */
.tracking-pane:fullscreen {
    background: #ffffff;
    width: 100vw;
    height: 100vh;
    padding: 0;
    gap: 0;
}

.tracking-pane:-webkit-full-screen {
    background: #ffffff;
    width: 100vw;
    height: 100vh;
    padding: 0;
    gap: 0;
}

.tracking-sidebar {
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    background: #f6f6f6;
    border-radius: 6px;
    overflow: hidden;
    min-height: 0;
}

.tracking-sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
    display: flex;
    flex-direction: column;
    /* Tight gap so 20-ish collapsed cards fit on a typical screen. */
    gap: 3px;
}

.tracking-sidebar-empty {
    color: #888;
    font-style: italic;
    padding: 8px;
    text-align: center;
}

/* Cards are collapsed to a single line by default for density.  The
   header (id + job + status pill) is the only always-visible content;
   clicking the card body expands it to show details and controls. */
.tracking-card {
    background: #fff;
    border: 1px solid #d8d8d8;
    border-left: 4px solid #d8d8d8;
    border-radius: 3px;
    padding: 4px 8px;
    cursor: pointer;
    user-select: none;
    /* Stack header above the (optional) expanded body. */
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tracking-card:hover {
    background: #fbfbfb;
}

.tracking-card:focus-visible {
    outline: 2px solid #00739e;
    outline-offset: -2px;
}

/* Card with an active coverage overlay gets a coloured left edge so the
   user can see at a glance which cards are contributing overlays. */
.tracking-card-coverage-on {
    border-left-color: #ff8000;
    background: #fffaf2;
}

.tracking-card-coverage-on:hover {
    background: #fff5e8;
}

/* The card whose device is currently being followed on the map gets a
   distinct blue left edge so the operator can quickly find it in the
   list (sidebar order is independent of follow status). */
.tracking-card-followed {
    border-left-color: #1f7ad6;
}

/* Hidden devices stay listed but are visually demoted. */
.tracking-card-hidden {
    opacity: 0.55;
}

.tracking-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Subtle chevron on the right hints at expandability. */
    position: relative;
}

.tracking-card-header::after {
    content: '\25BE'; /* down-pointing small triangle */
    color: #aaa;
    font-size: 10px;
    margin-left: 2px;
    transform: rotate(-90deg);
    transition: transform 100ms ease-out;
}

.tracking-card-expanded .tracking-card-header::after {
    transform: rotate(0deg);
}

.tracking-card-id {
    font-weight: 700;
    font-family: "Roboto Mono", monospace, sans-serif;
    letter-spacing: 0.5px;
    font-size: 13px;
}

/* Job number sits between id and the speed/pill, takes the slack,
   ellipsises if ever too long.  When no job is assigned the slot is
   blank but reserved so the columns line up across cards. */
.tracking-card-job {
    flex: 1;
    color: #555;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Current speed slot, shown right of the job and left of the pill on
   the always-visible header line.  Right-aligned within its own width
   for tidy column-style scanning down the list. */
.tracking-card-speed {
    color: #666;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    min-width: 50px;
    text-align: right;
}

.tracking-card-pill {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 999px;
    line-height: 1.4;
    flex-shrink: 0;
    /* Fixed width + centred text so Active / Idle / Hidden all occupy
       the same pill footprint.  The speed slot sits immediately to the
       left of the pill, so when the pill width is constant the speed
       column lines up neatly across cards. */
    box-sizing: border-box;
    min-width: 56px;
    text-align: center;
}

/* Active = matches the orange marker rule (formatTimeAgo === undefined,
   i.e. tracking sample under ~60 s old).  Idle = anything older.
   Hidden takes precedence when the user has stashed the device — they
   need to see "this is hidden" without expanding the card. */
.tracking-card-pill-active {
    background: #ff8000;
    color: #fff;
}

.tracking-card-pill-idle {
    background: #e0e0e0;
    color: #555;
}

.tracking-card-pill-hidden {
    background: #888;
    color: #fff;
}

/* Expanded body block — only present when the user has clicked the
   card open.  Holds comment line, speed/seen line, optional "no job"
   note, and the three control buttons. */
.tracking-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Visually separate the body from the header so the click target
       boundaries are obvious. */
    border-top: 1px solid #ececec;
    padding-top: 6px;
    margin-top: 2px;
}

.tracking-card-comment {
    font-size: 12px;
    color: #555;
}

.tracking-card-row {
    font-size: 12px;
    color: #333;
}

.tracking-card-meta {
    color: #666;
}

.tracking-card-muted {
    color: #999;
    font-style: italic;
}

.tracking-card-ctrls {
    display: flex;
    gap: 4px;
    margin-top: 2px;
}

.tracking-card-btn {
    flex: 1;
    background: #fff;
    border: 1px solid #bdbdbd;
    border-radius: 3px;
    padding: 4px 4px;
    font-size: 11px;
    font-weight: 700;
    color: #00233a;
    cursor: pointer;
    line-height: 1.2;
}

.tracking-card-btn:hover:not(:disabled) {
    background: #f0f7fb;
}

.tracking-card-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Pressed/on state for any card button (toggle look, not a momentary
   click).  `aria-pressed` carries the same info for assistive tech. */
.tracking-card-btn-on {
    background: #00233a;
    color: #fff;
    border-color: #00233a;
}

.tracking-card-btn-on:hover:not(:disabled) {
    background: #013a5f;
}

/* Mode banner — bottom-centre of the map, mirroring the
   `.map-area-quantity` placement used on the job map view.  The button
   is hidden entirely in 'auto' mode (the implicit, "everything-is-fine"
   state) and only appears when the user needs to know that the map is
   no longer auto-fitting:

     follow = orange "Follow" — re-centring on a clicked device
     off    = grey   "Manual" — user has panned/wheel-zoomed

   Clicking either form returns to auto-zoom (and so removes the
   banner).  Mounted inside the same `.stack` container as the map
   layers so `position: absolute` resolves against the map area, which
   keeps the banner in place when the user goes fullscreen. */
button.tracking-mode-banner {
    /* Hidden by default; the JS adds a state class when in
       follow / off, which sets `display: flex` and a colour.
       z-index: 200 keeps us safely above the map-viewer's input
       shield (z-index: 100) regardless of which container we end up
       mounted in — defensive, since the banner is currently mounted
       OUTSIDE the shield's stacking context anyway. */
    display: none;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0.5em;
    z-index: 200;

    align-items: center;
    height: 38px;
    padding: 0 14px;
    border: none;
    border-radius: 4px;
    color: #ffffff;
    font-size: larger;
    font-weight: bold;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

button.tracking-mode-banner:hover {
    filter: brightness(0.96);
}

button.tracking-mode-banner.tracking-mode-banner-follow {
    display: flex;
    background: #ff8000;
}

button.tracking-mode-banner.tracking-mode-banner-off {
    display: flex;
    background: #888888;
}

/* Stack sidebar below map on narrow screens. */
@media (max-width: 800px) {
    .tracking-pane {
        flex-direction: column;
    }
    .tracking-sidebar {
        flex: 0 0 240px;
    }
}

/* -------------------------------------------------------------------------
 * Order tab: viewport-locked panel-card grid.
 *
 * 3-column × 2-row CSS grid that fills the viewport (no page scroll;
 * individual cards scroll internally if their content overflows).
 * Each section is a "panel card" with shaded chrome:
 *
 *   sec1 (col 1, both rows)  client + farm + geozone + Order ID
 *   sec2 (col 2, row 1)      product / quantity / app-rate
 *   sec3 (col 3, row 1)      job metadata (name, supplier, ...)
 *   sec4 (cols 2-3, row 2)   notes + customer notes
 *
 * Rows are equal-height (1fr 1fr) so sec2, sec3 and sec4 share the
 * same vertical real-estate.
 *
 * The label/control rows inside every card use `display: contents` so
 * their labels and inputs flow directly into the card's 2-column
 * grid, which means every label in a card lines up in one column
 * regardless of insertion order or wrapping <div>s (e.g. the legacy
 * `#order-tab-qrow` group container).
 * ------------------------------------------------------------------------- */
.order-tab-outer {
    /* Design tokens for the Order tab.  Tweak in one place. */
    --order-tab-label-width: 9em;
    --order-tab-row-gap: 6px;
    --order-tab-col-gap: 0.75em;
    --order-tab-card-gap: 12px;
    --order-tab-card-pad-y: 12px;
    --order-tab-card-pad-x: 16px;
    --order-tab-control-height: 28px;
    --order-tab-card-bg: #f6f6f6;
    --order-tab-card-border: 2px solid #ccc;
    --order-tab-card-radius: 4px;

    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
.order-tab-page {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: var(--order-tab-card-gap);
    overflow: hidden;
}
.order-tab-grid {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: 1fr 1fr 1fr;
    /* Top row (sec2/sec3) is allowed to expand up to its natural
     * content height when there's space, so the input-heavy cards
     * don't trigger their internal scrollbars on typical viewports.
     * The notes row keeps at least 8em so the textareas stay
     * usable, but is happy to share the rest with the top row. */
    grid-template-rows: minmax(auto, 1.1fr) minmax(8em, 0.9fr);
    gap: var(--order-tab-card-gap);
    align-items: stretch;
    box-sizing: border-box;
    overflow: hidden;
}

/* Section positioning in the grid. */
.order-tab-sec1 {
    grid-column: 1;
    grid-row: 1 / 3;
    min-width: 0;
    min-height: 0;
}
.order-tab-sec2 {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
}
.order-tab-sec3 {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
}
.order-tab-sec4 {
    grid-column: 2 / 4;
    grid-row: 2;
    min-width: 0;
    min-height: 0;
}

/* All four cards: shaded chrome + internal scroll if content overflows
 * the equal-height grid cell. */
.order-tab-sec1,
.order-tab-sec2,
.order-tab-sec3,
.order-tab-sec4 {
    background: var(--order-tab-card-bg);
    border: var(--order-tab-card-border);
    border-radius: var(--order-tab-card-radius);
    padding: var(--order-tab-card-pad-y) var(--order-tab-card-pad-x);
    box-sizing: border-box;
    overflow: auto;
}

/* sec2/sec3 are card-grids: labels left, controls right, all labels
 * aligned in column 1 across the card. */
.order-tab-sec2,
.order-tab-sec3 {
    display: grid;
    grid-template-columns: var(--order-tab-label-width) minmax(0, 1fr);
    column-gap: var(--order-tab-col-gap);
    row-gap: var(--order-tab-row-gap);
    align-content: start;
    align-items: center;
}

/* sec1 is a flex column holding three blocks:
 *   .order-tab-client-block  – Client picker (+ summary)
 *   .order-tab-farm-block    – Farm ID picker (+ summary)  (SAFW only)
 *   .order-tab-bottom-block  – Geozone (SAFW) or Order ID (non-SAFW),
 *                              pinned to the bottom of the card.
 *
 * The client and farm blocks share the remaining vertical space
 * equally (`flex: 1 1 0`), with each block scrolling internally if
 * its summary is taller than the slot.  The bottom block keeps its
 * natural height. */
.order-tab-sec1 {
    display: flex;
    flex-direction: column;
    gap: var(--order-tab-row-gap);
}
.order-tab-client-block,
.order-tab-farm-block {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
    display: grid;
    grid-template-columns: var(--order-tab-label-width) minmax(0, 1fr);
    column-gap: var(--order-tab-col-gap);
    row-gap: var(--order-tab-row-gap);
    align-content: start;
    align-items: center;
}
.order-tab-bottom-block {
    flex: 0 0 auto;
    margin-top: auto;
    display: grid;
    grid-template-columns: var(--order-tab-label-width) minmax(0, 1fr);
    column-gap: var(--order-tab-col-gap);
    row-gap: var(--order-tab-row-gap);
    align-items: center;
}

/* Labeled rows (and the legacy `#order-tab-qrow` wrapper) dissolve
 * into their parent card grid via `display: contents`, so each
 * label/control pair flows into the surrounding 2-column grid. */
.order-tab-client-block .order-tab-labeled-row,
.order-tab-farm-block .order-tab-labeled-row,
.order-tab-bottom-block .order-tab-labeled-row,
.order-tab-sec2 .order-tab-labeled-row,
.order-tab-sec3 .order-tab-labeled-row,
.order-tab-sec2 > #order-tab-qrow {
    display: contents;
}

/* Full-width banner (used by the unDelete button when the job has
 * been deleted).  sec1 is a flex column, so just stretch to the
 * card's full width. */
.order-tab-undelete-row {
    flex: 0 0 auto;
    width: 100%;
    margin-bottom: var(--order-tab-row-gap);
}

/* Fallback for `.order-tab-labeled-row` outside a card-grid section,
 * e.g. anywhere `addOrderRow()` is reused in the future. */
.order-tab-labeled-row {
    display: grid;
    grid-template-columns: var(--order-tab-label-width) minmax(0, 1fr);
    column-gap: var(--order-tab-col-gap);
    row-gap: var(--order-tab-row-gap);
    align-items: center;
}

.order-tab-control-wrap {
    width: 100%;
    min-width: 0;
}

/* Pin the immediate child of `.order-tab-control-wrap` (typically the
 * freezable widget's <span> wrapper, which defaults to inline) to
 * block-level so the inner <input> / <select> fills the cell. */
.order-tab-client-block .order-tab-control-wrap > *,
.order-tab-farm-block .order-tab-control-wrap > *,
.order-tab-bottom-block .order-tab-control-wrap > *,
.order-tab-sec2 .order-tab-control-wrap > *,
.order-tab-sec3 .order-tab-control-wrap > * {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Input sizing: consistent 28px control row across every card. */
.order-tab-sec1 input,
.order-tab-sec1 select,
.order-tab-sec2 input:not(.order-tab-date-input),
.order-tab-sec2 select,
.order-tab-sec3 input,
.order-tab-sec3 select {
    width: 100%;
    height: var(--order-tab-control-height);
    padding: 2px 6px;
    box-sizing: border-box;
    min-width: 0;
}

/* searchpick widget (client picker, product picker, farm picker) sits
 * inside a wrap and needs its inner <input> to fill the cell. */
.order-tab-sec1 .searchpick,
.order-tab-sec2 .searchpick,
.order-tab-sec3 .searchpick {
    display: block;
    width: 100%;
}
.order-tab-sec1 .searchpick input,
.order-tab-sec2 .searchpick input,
.order-tab-sec3 .searchpick input {
    width: 100%;
    height: var(--order-tab-control-height);
    box-sizing: border-box;
}

/* Date input: native <input type=date> sizing is browser-specific, so
 * pin the internal parts to a known height. */
.order-tab-date-wrap {
    display: block;
    width: 100%;
}
input.order-tab-date-input {
    width: 100%;
    height: var(--order-tab-control-height);
    margin: 0;
    padding: 0 6px;
    line-height: 1.2;
    text-align: left;
    box-sizing: border-box;
}
input.order-tab-date-input::-webkit-datetime-edit,
input.order-tab-date-input::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
    margin: 0;
    text-align: left;
    line-height: 1.2;
}
input.order-tab-date-input::-webkit-calendar-picker-indicator {
    margin: 0;
    align-self: center;
    vertical-align: middle;
}

/* The Client row in sec1 holds a tall ClientPicker widget (search
 * input plus summary panel); pin its label to the top of the row so
 * the label sits next to the search input rather than centred on the
 * full picker height. */
.order-tab-row-client > label.field-label {
    align-self: start;
    padding-top: 4px;
}

/* The Multijob client set-selector lives inside sec1 too; cap its
 * height so it scrolls instead of pushing the rest of the card. */
#order-tab-sec-client #client-set-selector {
    max-height: 12em;
    overflow: auto;
}

/* -------------------------------------------------------------------------
 * sec1: third-party widget internals (ClientPicker, SapFarmPicker).
 *
 * Both widgets default to `inline-flex` (shrink-to-fit) wrappers and to
 * stacked label-above-input pairs inside their own summary panels.
 * Inside an Order-tab card the cell width is fixed, so:
 *
 *   1. Stretch every `.field-set` / `.field-pair` to 100% width.
 *   2. Hide the internal "Client" label inside ClientPicker (the
 *      external "Client" label is provided via addOrderRow).
 *   3. Drop the summary panel's separate shaded chrome (the card
 *      already provides chrome — no need for a second one).
 *   4. Lay each summary detail row out as label-beside-value (5em
 *      label column + flexible value column) instead of stacked.
 * ------------------------------------------------------------------------- */
.order-tab-sec1 .field-set,
.order-tab-sec1 .field-pair {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    gap: 0;
    box-sizing: border-box;
}

/* Hide the duplicate "Client" label that lives inside ClientPicker's
 * own field-pair wrapper — we already provide one from addOrderRow. */
.order-tab-sec1 #clientpicker-ordertab > .field-pair > .field-label {
    display: none;
}

/* Summary panel (Phone / Email / Address / Notes for either the
 * client or the farm).  The TypeScript moves each summary out of
 * its picker widget and into its own block (`.order-tab-client-block`
 * or `.order-tab-farm-block`), so it becomes a grid item spanning
 * both columns (full block width).  Drop the inherited shaded chrome
 * — the card already provides it. */
.order-tab-client-block > .clientpick-summary,
.order-tab-farm-block > .clientpick-summary {
    grid-column: 1 / -1;
    background: transparent;
    padding: 4px 0 0 0;
    border-top: 1px solid rgba(0,0,0,0.08);
    margin-top: -2px;
    width: 100%;
    box-sizing: border-box;
}
/* Empty summary panel (no client / farm selected) collapses to zero
 * height so it doesn't leave an orphaned separator line. */
.order-tab-client-block > .clientpick-summary:empty,
.order-tab-client-block > .clientpick-summary:has(> .field-set:empty),
.order-tab-farm-block > .clientpick-summary:empty,
.order-tab-farm-block > .clientpick-summary:has(> .field-set:empty) {
    display: none;
}
.order-tab-sec1 .clientpick-summary > .field-set {
    gap: 2px;
}
.order-tab-sec1 .clientpick-title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 4px 0;
}

/* Each detail row inside the summary: label on the left (5em column),
 * value on the right.  Replaces the inherited stacked field-pair. */
.order-tab-sec1 .clientpick-summary .field-pair {
    display: grid;
    grid-template-columns: 5em minmax(0, 1fr);
    column-gap: 0.5em;
    align-items: baseline;
    width: 100%;
    margin: 0;
    gap: 0;
}
.order-tab-sec1 .clientpick-summary .field-pair > .field-label {
    font-size: 12px;
    line-height: 1.25;
    margin: 0;
}
.order-tab-sec1 .clientpick-summary .field-pair > div:last-child {
    font-size: 12px;
    line-height: 1.25;
    word-break: break-word;
}
.order-tab-sec1 .clientpick-summary .field-pair p {
    margin: 0;
}

/* sec4 (notes card): two columns side by side, each a flex column with
 * a header label and a <textarea> that grows to fill the column. */
.order-tab-sec4 {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.order-tab-sec4 .order-tab-notes-box {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: row;
    gap: var(--order-tab-card-gap);
    box-sizing: border-box;
}
.order-tab-notes-col {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.order-tab-notes-col > .field-label {
    flex: 0 0 auto;
    margin-bottom: var(--order-tab-row-gap);
}
.order-tab-notes-textarea-wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    width: 100%;
    overflow: hidden;
}
.order-tab-notes-textarea-wrap > span {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    width: 100%;
}
.order-tab-notes-textarea-wrap textarea {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    resize: none;
    box-sizing: border-box;
}