/* Using OOCSS (Object-oriented CSS) is a CSS methodology */

@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@200&display=swap');

:root {
  --agnav-font-sans-serif: 'Mulish', sans-serif;
  --agnav-body-font-family: var(--agnav-font-sans-serif);

  /* AgNav Platform Primary Colors */
  --agnav-color-primary-lightGreen: #2CBC5B;
  --agnav-color-primary-cream: #f9f0e5;
  --agnav-color-primary-chrysocolla: #004838;
  --agnav-color-primary-limeGreen: #8DFF22;
  --agnav-color-primary-white: #FFF;
  --agnav-color-primary-black: #000;
  --agnav-sidebar-width-open: 230px;
  --agnav-sidebar-width-closed: -230px;
  --agnav-sidebar-color-text: var(--agnav-color-primary-black);
  --agnav-sidebar-bg-color: var(--agnav-color-primary-white);
  --agnav-sidebar-brand-bg-color: var(--agnav-color-primary-chrysocolla);
  --agnav-topbar-bg-color: var(--agnav-color-primary-chrysocolla);
  --agnav-platform-content-bg-color: #F6F8FA;
  /* AgNav Platform Secondary Colors */
  --agnav-color-secondary-red: #FF6B6D;
  --agnav-color-secondary-blue: #359BE8;
  --agnav-color-secondary-yellow: #FFB933;
  --agnav-color-secondary-cream: #EEDFA6;
  --agnav-color-secondary-tealWave: #8B9FA3;
  --agnav-color-secondary-grey: #757575;
  --agnav-color-secondary-brown: #A5885D;

  /* Tints */
  --agnav-color-primary-lightGreen-tint: #80d79d;
  --agnav-color-primary-lightGreen-tint1: #5cd985;
  --agnav-color-primary-lightGreen-tint2: #abe4bd;
  --agnav-color-primary-chrysocolla-tint1: #3F676A;
  --agnav-color-primary-chrysocolla-tint2: #CCDAD7;
  --agnav-color-secondary-chrysocolla-tint1: #336d60;
  --agnav-color-secondary-red-tint1: #ffb5b6;
  --agnav-color-secondary-blue-tint1: #aed7f6;
  --agnav-color-secondary-yellow-tint1: #ffdc99;
  --agnav-color-secondary-yellow-tint2: #fff8eb;
  --agnav-color-secondary-tealWave-tint1: #b9c5c8;
  --agnav-color-secondary-tealWave-tint2: #dce2e3;
  --agnav-color-secondary-brown-tint1: #c0ac8e;
  --agnav-color-secondary-brown-tint2: #e4dbce;
  /* Complementary colors */
  --agnav-comp-color-chrysocolla: #5F2A07;
  --agnav-comp-color-chrysocolla2: #a5885dba;

  /* Fonts */
  --agnav-secondary-font-weight: 600;

  /* Buttons */
  --agnav-primary-btn-color: var(--agnav-color-primary-chrysocolla);

  --agnav-secondary-btn-color: var(--agnav-color-primary-chrysocolla-tint2);

  /* Forecaster  */
  --fcaster-grey-primary-font: #969696;
  --fcaster-primary-font-size: 13px;
  --fcaster-primary-font-weight: bolder;
  --fcaster-secondary-font-weight: 600;
  --fcaster-grey-secondary-font: #afafaf;

  --fcaster-color-secondary-blue: var(--agnav-color-secondary-blue);
  --fcaster-color-primary-chrysocolla: var(--agnav-color-primary-chrysocolla);
  --fcaster-color-primary-lightGreen: var(--agnav-color-primary-lightGreen);
  --fcaster-color-secondary-tealWave: var(--agnav-color-secondary-tealWave);
  --fcaster-color-guages-green: #99b898;


  /* Forecaster Fert Tab */
  --fcaster-color-total: var(--slurry-autumn);
  --fcaster-color-total-tint1: var(--agnav-color-primary-white);


  --fcaster-color-urea: var(--agnav-color-secondary-blue);
  --fcaster-color-urea-tint1: var(--agnav-color-secondary-blue-tint1);

  --fcaster-color-pUrea: var(--agnav-color-secondary-yellow);
  --fcaster-color-pUrea-tint1: var(--agnav-color-secondary-yellow-tint2);

  --fcaster-color-oNFert: var(--agnav-color-secondary-tealWave);
  --fcaster-color-oNFert-tint1: var(--agnav-color-secondary-tealWave-tint2);

  /* Forecaster Slurry Tab */
  --fcaster-color-spring: var(--agnav-color-secondary-chrysocolla-tint1);
  --fcaster-color-spring-tint1: var(--agnav-color-primary-chrysocolla-tint2);

  --fcaster-color-summer: var(--agnav-color-secondary-yellow);
  --fcaster-color-summer-tint1: var(--agnav-color-secondary-yellow-tint2);

  --fcaster-color-autumn: var(--agnav-color-secondary-brown);
  --fcaster-color-autumn-tint1: var(--agnav-color-secondary-brown-tint2);

  --fcaster-color-winter: var(--agnav-color-secondary-tealWave);
  --fcaster-color-winter-tint1: var(--agnav-color-secondary-tealWave-tint2);

  /* Forecaster Finishing Age Tab */
  --fcaster-color-steers: var(--agnav-color-secondary-chrysocolla-tint1);
  --fcaster-color-steers-tint1: var(--agnav-color-primary-chrysocolla-tint2);

  --fcaster-color-heifers: var(--agnav-color-secondary-yellow);
  --fcaster-color-heifers-tint1: var(--agnav-color-secondary-yellow-tint2);

  --fcaster-color-young-bulls: var(--agnav-color-secondary-brown);
  --fcaster-color-young-bulls-tint1: var(--agnav-color-secondary-brown-tint2);

  /* Forecaster EBI Tab */
  --fcaster-color-ebi-slider: var(--agnav-color-secondary-chrysocolla-tint1);
  --fcaster-color-ebi-slider-tint1: var(--agnav-color-primary-chrysocolla-tint2);

  /* Forecaster Concentrates Tab */
  --fcaster-color-quantity-adjuster: var(--agnav-color-secondary-chrysocolla-tint1);
  --fcaster-color-quantity-adjuster-tint1: var(--agnav-color-primary-chrysocolla-tint2);

  --fcaster-color-crude-protein-pct: var(--agnav-color-secondary-yellow);
  --fcaster-color-crude-protein-pct-tint1: var(--agnav-color-secondary-yellow-tint2);

  --fcaster-color-sustainable-sourced-ingredients: var(--agnav-color-secondary-blue);
  --fcaster-color-sustainable-sourced-ingredients-tint1: var(--agnav-color-secondary-blue-tint2);

  /* AgNav Platform Loader Colors */
  --agnav-loader-color-one: var(--agnav-color-secondary-red);
  --agnav-loader-color-two: var(--agnav-color-secondary-blue);
  --agnav-loader-color-three: var(--agnav-color-secondary-yellow);
  --agnav-loader-color-four: var(--agnav-color-secondary-tealWave);
  --agnav-loader-color-five: var(--agnav-color-secondary-lightGreen);
  --agnav-loader-color-six: var(--agnav-color-secondary-cream);


  /* AgNav Platform Loader Times */
  --agnav-loader-time-one: 0.5s;
  --agnav-loader-time-two: 0.4s;
  --agnav-loader-time-three: 0.3s;
  --agnav-loader-time-four: 0.2s;
  --agnav-loader-time-five: 0.1s;
  --agnav-loader-time-six: 0s;

  /* AgNav Tabs Color */
  --agnav-tab: #004838;

  /* Note To Review the CSS Variables Below*/
  --dusty-red: #ab3428;
  --black: #000;
  --grey: #808080;
  --shadow: #95929291;
  --icbf-blue: #2d69a8;

  --icbf-green: #6ead2b;
  --slider-purple: #4f90d9;
  --slider-yellow: #fdcb6e;
  --slider-red: #d9534f;


  --white: #ffffff;
  --sidebar-hover: #b8bfce;
  --box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
  --color-background-weak: #fff;
  --color-box-shadow-bottom-small: 0 1px 4px 0 rgba(109, 110, 111, 0.08);

  --green: #6aa84f;
  --greenHover: #96C482;


  --dusty-red: #ab3428;
  --black: #000;
  --grey: #808080;
  --green: #28ab34;
  --shadow: #e4e4e4;
  --icbf-blue: #2d69a8;
  --border: #ccc;
  --icbf-green: #6ead2b;
  --slider-purple: #4f90d9;
  --slider-green: #99b898;
  --slider-red: #d9534f;

  --slider-fert: #A5885D;
  --slurry-autumn: #A5885D;

  --border-rad: 6px;


  --circle-size: 8px;
  --circle-neg-size: 0px;
  --slurry-spring: #99b898;
  --slurry-summer: #FED168;

  --slurry-winter: #939da3;

  --agnav-info-agnav-timeline-panel: #77ccad;
  --agnav-info-agnav-timeline-panel-dark: #469b7e;
  --agnav-info-agnav-timeline-panel-table-non-survey: #fff;
  --agnav-info-agnav-timeline-panel-table-non-survey-light: #b3e5fc66;

  --blue: #5e72e4;
  --indigo: #5603ad;
  --purple: #8965e0;
  --pink: #f3a4b5;
  --red: #f5365c;
  --orange: #fb6340;
  --yellow: #ffd600;
  --green: #2dce89;
  --teal: #11cdef;
  --cyan: #2bffc6;
  --white: #fff;
  --gray: #8898aa;
  --gray-dark: #32325d;
  --light: #ced4da;
  --lighter: #e9ecef;
  --primary: #5e72e4;
  --secondary: #f7fafc;
  --success: #2dce89;
  --info: #11cdef;
  --warning: #fb6340;
  --danger: #f5365c;
  --light: #adb5bd;
  --dark: #212529;
  --default: var(--agnav-color-primary-chrysocolla);
  --white: #fff;
  --neutral: #fff;
  --darker: black;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;



}

@-ms-viewport {
  width: device-width;
}

body,
.ui-widget,
main.main-platform-page-content {
  font-family: var(--agnav-body-font-family) !important;
}

.agnav-main {
  display: none;
  background-attachment: fixed;
  background-color: var(--agnav-color-primary-white);

}

/* Loader */
.platformContentContainer {
  display: none;
  position: relative;
  /* top: 5em; */
}

.agnavPlatformContent {
  position: relative;
  overflow-x: hidden;
  top: 4.6em;
  background-color: var(--agnav-platform-content-bg-color);
}

.loader {
  height: 20px;
  /* width: 223px; */
  position: absolute;
  width: 50%;
  top: 50%;
  /* left: calc(50% - var(--agnav-sidebar-width-open)); */
  z-index: 9;
  transform: translateX(50%);
  ;
}

.agnavloader-container {
  /* min-height: 340px; */
  font-family: Helvetica;
  width: 100%;
  position: relative;
  height: 100vh;

}

.loader--dot {
  animation-name: loader;
  animation-timing-function: ease-in-out;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  background-color: black;
  position: absolute;
  border: 2px solid white;
}


.loader--dot:first-child {
  background-color: var(--agnav-loader-color-one);
  animation-delay: var(--agnav-loader-time-one);
}

.loader--dot:nth-child(2) {
  background-color: var(--agnav-loader-color-two);
  animation-delay: var(--agnav-loader-time-two);
}

.loader--dot:nth-child(3) {
  background-color: var(--agnav-loader-color-three);
  animation-delay: var(--agnav-loader-time-three);
}

.loader--dot:nth-child(4) {
  background-color: var(--agnav-loader-color-four);
  animation-delay: var(--agnav-loader-time-four);
}

.loader--dot:nth-child(5) {
  background-color: var(---agnav-loader-color-five);
  animation-delay: var(--agnav-loader-time-five);
}

.loader--dot:nth-child(6) {
  background-color: var(--agnav-loader-color-six);
  animation-delay: var(--agnav-loader-time-six);
}

.loader--text {
  position: absolute;
  top: 200%;
  left: 0;
  right: 0;
  width: 4rem;
  margin: auto;
}

.loader--text:after {
  content: "Loading";
  font-weight: bold;
  animation-name: loading-text;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}





@keyframes loader {
  15% {
    transform: translateX(0);
  }

  45% {
    transform: translateX(230px);
  }

  65% {
    transform: translateX(230px);
  }

  95% {
    transform: translateX(0);
  }
}

@keyframes loading-text {
  0% {
    content: "Loading";
  }

  25% {
    content: "Loading.";
  }

  50% {
    content: "Loading..";
  }

  75% {
    content: "Loading...";
  }
}

/* Footer */



.footer-section {
  background: var(--agnav-color-primary-white);
  position: fixed;
  text-align: center;
  bottom: 0;
  width: 100%;
}

.footer-content {
  position: relative;
  z-index: 2;
}

.footer-logo {
  margin-bottom: 1rem;
}

.footer-logo img {
  max-width: 200px;
}

.footer-text p {
  margin-bottom: 14px;
  font-size: 14px;
  color: #7e7e7e;
  line-height: 28px;
}

.footer-widget-heading h3 {
  color: var(--agnav-color-primary-chrysocolla);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 40px;
  position: relative;
}

.footer-widget-heading h3::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -15px;
  height: 2px;
  width: 50px;
  background: var(--agnav-color-primary-white);
}

.footer-widget ul li {
  display: inline-block;
  float: left;
  width: 50%;
  margin-bottom: 12px;
}

.footer-widget ul li a:hover {
  color: var(--agnav-color-primary-chrysocolla);
}

.footer-widget ul li a {
  color: #878787;
  text-transform: capitalize;
}


/* Test */
.container.agnav-footer {

  height: 10em;
  position: relative;
  bottom: 0;

}

.agnav-logo-set-a {
  width: 20% !important;
  max-width: 20% !important;
  height: 20% !important;
  max-height: 20% !important;

}

.agnav-logo-set-b {
  width: 60%;
  max-width: 60%;
  height: 100%;
  max-height: 100%;
}

.agnav-logo-set-c {
  width: 35% !important;
  max-width: 35% !important;
  height: 35% !important;
  max-height: 35% !important;
}

/* Tables */
td.details-super-header-td {
  font-size: 14px;
  font-weight: revert;
  text-transform: none;
  background-color: var(--agnav-color-primary-chrysocolla);
  color: #fff;
  text-align: center;
}

table.responsive-child-table {
  width: 100%;
  max-width: 100%;
}


tr.cardTable {
  box-shadow: 0 0 8px var(--shadow);
  cursor: pointer;
}

/* Components */

/* Modal */

.agnav-modal-title {
  color: var(--agnav-color-primary-black) !important;
}

.agnav-modal-btn-close {
  color: var(--agnav-color-primary-white) !important;
  background-color: var(--agnav-color-primary-chrysocolla) !important;
}

.agnav-modal {
  --bs-modal-width: 850px;
}

@media (min-width: 768px) {
  .agnav-modal .modal-dialog {
    max-width: 850px;
  }
}

.toggle-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin-top: 20px;
}

.form-check-label {
  margin-left: 10px;
  font-weight: 200;
  font-size: 14px;
}

.form-check-input {
  background-color: #ddd;
  border-color: #ddd;
}

.form-check-input:checked {
  background-color: #4caf50 !important;
  border-color: #ddd !important;
}

/* Adjust focus so its not blue*/
.form-check-input:focus {
  background-color: unset;
  box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
  border-color: #4caf50;
}

body:not(.home) .navbar>ul>li.only-home {
  display: none;
}

body header .dropdown-item.active,
body header .dropdown-item:active {
  background-color: transparent;
}

body header .dropdown-item.active:hover,
body header .dropdown-item:active:hover {
  background-color: #ccdad7;
}

body h1,
body .h1 {
  margin-bottom: 24px;
}

.pdf_list {
  display: flex;
  flex-direction: column;
}

.pdf_list a {
  font-size: 18px;
}

body:not(.home) .agNavLandingMain {
  min-height: 85vh;
  margin-top: 83px;
}

.site_content.sec_space section {
  padding: 60px 0px;
}

.site_content.with_bg {
  background-color: #F6F8FA;
}

.site_content.main_space {
  padding-top: 26px;
  padding-bottom: 110px;
}

.site_content.main_space section{
   padding-left: 20px;
  padding-right: 20px;
}

.secondary_table h3 {
    margin: 35px 0 16px 0;
}