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