/*! 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;
    }
}