/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

@import url("/styles/header.css");
@import url("/styles/welcome.css");
@import url("/styles/addproject.css");
@import url("/styles/addfield.css");
@import url("/styles/addplan.css");
@import url("/styles/editproject.css");
@import url("/styles/definefield.css");
@import url("/styles/manageprojects.css");
@import url("/styles/managefields.css");
@import url("/styles/manageplans.css");
@import url("/styles/manageprofile.css");
@import url("/styles/share.css?v=2.1");
@import url("/styles/shareedit.css?v=2.1");
@import url("/styles/planner.css");
@import url("/styles/planner-popups.css");
@import url("/styles/compareprojects.css");
@import url("/styles/compareplans.css");
@import url("/styles/autocomplete.css");
@import url("/styles/beta.css");
@import url("/styles/regenerative_practices.css");

@font-face {
  font-family: "Noto Sans";
  font-display: block;
  src: url("/fonts/NotoSans-VariableFont_wdth,wght.woff2")  format("woff2");
}

* {
  padding: 0;
  margin: 0;
  font-family: "Noto Sans";
  outline: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.keyboard-user *:focus-visible {
  outline: 2px dashed #2d4763;
  outline-offset: -1px;
  box-shadow: inset 0 0 0 2px #ffffff;
}

html, body {
  width: 100%;
  height: 100%;          /* don't rely on % heights */
  min-height: 100vh;     /* fallback */
  min-height: 100dvh;    /* modern browsers: stable viewport height */
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

:root {
  /* Layout Variables */
  --grid-gap: 3px;

  /* Primary Colors */
  --grid-blue: #0377c4;  /* Used in planner buttons, actions */
  --grid-purple: #562789;  /* Used in planner grid elements */
  --grid-pink: #a63caa;  /* Used in planner grid and text highlights */
  --grid-green-active: #459941;  /* Used in buttons, success states, active elements */
  --grid-green-opacity: #4599413d;  /* Used for semi-transparent green overlays */
  --grid-green-filled: #2f5b2f;  /* Used in planner filled states */
  --grid-orange: #f25806;  /* Used in warnings, important actions */

  /* Neutral Colors */
  --color-white: #ffffff;  /* Used in text on dark backgrounds, backgrounds */
  --color-black: #000000;  /* Used in text, borders */
  --color-black-light: #000000a9;  /* Used in secondary text */
  --color-gray-light: #f1f1f1;  /* Used in backgrounds */
  --color-gray-medium: #b6b6b6;  /* Used in disabled states */
  --color-gray-dark: #666666;  /* Used in text, backgrounds */

  /* Accent Colors */
  --color-lime-light: #c4de32;  /* Used in planner states */
  --color-lime: #a6bc26;  /* Used in planner elements */
  --color-lime-dark: #929e1e;  /* Used in hover states */
  --color-navy: #3d4091;  /* Used in special states */
  --color-teal: #338c7b;  /* Used in field elements */
  --color-yellow: #fab420;  /* Used in plan elements */
  
  /* Status Colors */
  --color-success: #24771f;  /* Used in success states */
  --color-error: #ff0000;  /* Used in error messages */
  --color-error-dark: #da0000;  /* Used in error text */
  
  /* Background Colors */
  --color-beige: #ebe3d3;  /* Used in share backgrounds */
  --color-cream: #fff1d2;  /* Used in select hover states */
  --color-brown: #513b36;  /* Used in shadows */
  --color-brown-dark: #33220a; /* Used in header */

  /* Semi-transparent Colors */
  --color-white-transparent: #ffffff86; /* Used in compare tables */
  --color-white-transparent-light: #ffffff25; /* Used in compare tables */
  --color-green-transparent: #2f5b2f99;  /* Used in overlays */
  --color-black-transparent: #00000077;  /* Used in disabled states */
  --color-black-transparent-dark: #00000082; /* Used in compare tables */
}

h1, h2, h3, h4, h5 {
  font-weight: 600;
}

.noselect,
.noselectall * {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

#main-body {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  flex: 1 1 auto;        /* lets it fill remaining height */
}

.max-view {
  width: 100%;
  height: 100%;
  max-width: 1310px;
}

#content-body {
  position: relative;
  width: 100%;
  -webkit-box-flex: 2;
      -ms-flex-positive: 2;
          flex-grow: 2;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  background-color: var(--color-black);
}

#temp {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--color-white);
  font-size: 36px;
}

.custom-select {
  position: relative;
  width: 400px;
  font-size: 15px;
  margin-bottom: 1.2em;
}

.custom-select select {
  position: absolute;
  padding: .8em 1em;
  width: 400px;
  z-index: 1;
  opacity: 0;
}

.custom-select .select-selected {
  position: relative;
  padding: .8em 1em;
  border: 1px solid var(--color-gray-medium);
  background-color: var(--color-white);
  z-index: 2;
}

.custom-select .select-selected.disabled {
  color: var(--color-black-light);
}

/*style the arrow inside the select element:*/
.custom-select .select-selected:after {
  position: absolute;
  content: "";
  top: 20px;
  right: 15px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: var(--color-black) transparent transparent transparent;
}

/*point the arrow upwards when the select box is open (active):*/
.custom-select .select-selected.select-arrow-active:after {
  border-color: transparent transparent var(--color-black) transparent;
  top: 14px;
}

/*style the items (options), including the selected item:*/
.custom-select .select-items div, .select-selected {
  color: var(--color-black);
  padding: .6em 1em;
  border: 1px solid var(--color-gray-medium);
  border-top: none;
  /*border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;*/
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

/*style items (options):*/
.custom-select .select-items {
  position: absolute;
  background-color: var(--color-white);
  top: 100%;
  left: 0;
  right: 0;
  z-index: 9999;
  max-height: 400px;
  overflow: auto;
}

/*hide the items when the select box is closed:*/
.custom-select .select-hide {
  display: none;
}

.custom-select .select-items div:hover, .same-as-selected {
  /*background-color: rgba(0, 0, 0, 0.1);*/
  background-color: var(--color-cream);
}


.print-table {
  border-radius: 8px;
  overflow: hidden;
  display: none;
  background-color: var(--color-white);
}

.print-table .header {
  background-color: var(--color-gray-dark);
  color: var(--color-white);
}

.print-table .table,
.print-table > table {
  border-radius: 8px;
  margin: 4px 4px 8px 4px;
  width: calc(100% - 8px) !important;
  overflow: hidden;
  -webkit-box-shadow: 1px 1px 4px #000000;
          box-shadow: 1px 1px 4px #000000;
}

.sub-title,
.print-table .header.main td {
  padding: .5em .5em .4em .5em;
  font-size: 16px;
  background-color: #424242;
  color: var(--color-white);
}

.print-table .header.sub-main td {
  font-size: 15px;
  padding: .3em .3em .2em .3em;
  background-color: #424242;
  color: var(--color-white);
}

.sub-table p {
  font-size: 14px;
}

.print-table .sub-header {
  background-color: var(--color-gray-medium);
  border-bottom: 1px solid var(--color-gray-dark);
}

.print-table td {
  padding: 2px;
  background: none;
  border-bottom: 1px solid #aaaaaa;
}

.print-table tr {
  border-bottom: none;
}

.print-table table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.print-table td:first-child {
  max-width: 250px;
}

.print-table .header td {
  padding: 4px 2px;
}

.print-table .sub-table {
  border-radius: 6px;
  -webkit-box-shadow: 1px 1px 4px #000000;
          box-shadow: 1px 1px 4px #000000;
  overflow: hidden;
  width: calc(100% - 1em);
  margin: .5em;
  
}

.print-table .sub-rows {
  background-color: var(--color-gray-medium);
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 10px 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: .5em;
  align-items: start;
}

.print-table .sub-rows.plan {
  -ms-grid-columns: (1fr)[1];
  grid-template-columns: repeat(1, 1fr);
}

.print-table .sub-rows > table {
  border-radius: 6px;
  -webkit-box-shadow: 1px 1px 5px #000000;
          box-shadow: 1px 1px 5px #000000;
  overflow: hidden;
}

.print-table #graph-attach {
  padding: .5em;
}

.print-table #planner-output #plan-display {
  border-radius: 8px;
  width: 400px;
}

.login-note {
  position: absolute;
  bottom: 2.5em;
}

.beta-text-main {
  position: absolute;
  bottom: 1em;
  font-size: 18px;
  font-weight: 500;
}