:root {
  --color_primary: #28a745;
  --color_dark: #434348;
  --color_light: #ccc;
  --color_light_2: #f4f4f4;
  --color_light_3: #f9f9f9;
  --map-y-position: 50px;
  --mode-primary: transparent;
  --mode-accent: transparent;
  --soil-primary: #3C8515;
  --manure-primary: #632112;
  --nutrient-primary: #43157C;
  --crop-primary: #C8590C;
  --soil-accent: #629F22;
  --manure-accent: #A33906;
  --nutrient-accent: #8D3AC4;
  --crop-accent: #D76F0F;
  --soil-opacity: 0.2;
  --manure-opacity: 0.2;
  --nutrient-opacity: 0.2;
  --crop-opacity: 0.2;
  scrollbar-color: var(--color_primary);
  transition: all 1s;
}

@font-face {
  font-family: 'Pixelify Sans';
  src: url('/fonts/Pixelify_Sans/PixelifySans-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

body {
  background-color: #ffffff;
}

.btn-success {
  background-color: var(--mode-accent);
  border-color: var(--mode-accent);
}

.btn-success:hover {
  background-color: var(--mode-accent);
  border-color: var(--mode-accent);
  transform: scale(1.02);
  transform-origin: center;
}

.btn-success:active {
  background-color: var(--mode-accent) !important;
  border-color: var(--mode-accent) !important;
  transform: scale(1.02) !important;
}

.btn-success:focus {
  background-color: var(--mode-accent);
  border-color: var(--mode-accent);
  transform: scale(1.02);
}

.btn-soil {
  background-color: var(--soil-primary);
  border-color: var(--soil-primary);
  color: #fff;
}

.btn-soil:hover {
  background-color: var(--soil-primary);
  border-color: var(--soil-primary);
  transform: scale(1.02);
}

.btn-soil:focus {
  background-color: var(--soil-primary);
  border-color: var(--soil-primary);
}



.start_country_modal {
  background-color: #fff;
  width: 540px;
  padding: 15px 40px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  border-radius: 30px;
}

.start_mode_modal {
  background-color: #fff;
  width: 540px;
  padding: 15px 40px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  border-radius: 30px;
}

.start_modal {
  background-color: #fff;
  width: 400px;
  padding: 15px 40px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  border-radius: 30px;
}

.start_map_modal {
  margin: 0px auto 0 auto;
  background-color: #fff;
  width: 95%;
  padding: 15px 15px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  border-radius: 30px;
}

.start_osid_modal {
  margin: 110px auto 0 auto;
  background-color: #fff;
  width: 400px;
  padding: 15px 40px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  border-radius: 30px;
}

.start_snake_modal {
  margin: 110px auto 0 auto;
  background-color: #fff;
  width: 400px;
  padding: 15px 40px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  border-radius: 30px;
}

.slow-ani > * {
  animation-duration: 4s;
}

.important-button {
  background-color: var(--mode-accent);
  color: #fff; /* Text color, assuming you want it to be white */
  padding: 10px 20px; /* Adjust padding as needed */
  border: none; /* Remove default button border */
  cursor: pointer; /* Add a pointer cursor on hover */
  transition: background-color 0.3s, transform 0.3s; /* Smooth transition */
}

.important-button:hover {
  background-color: var(--mode-primary);
  transform: scale(1.025); /* Increase in size on hover */
}

.upgrade-button {
  background-color: #deb604; /* Bright green */
  color: #fff; /* Text color, assuming you want it to be white */
  border: none; /* Remove default button border */
  border-radius: 4px;
  cursor: pointer; /* Add a pointer cursor on hover */
  transition: background-color 0.3s, transform 0.3s; /* Smooth transition */
}

.upgrade-button:hover {
  background-color: #cfa902; /* Dark green on hover */
  transform: scale(1.025); /* Increase in size on hover */
}

.info-button {
  background-color: none;
  border: none;
  color: lightgrey;
  font-size: 18px;
  height: 33px;
  pointer-events: auto;
}

#controls {
  /* Appearance */
  background-color: white;
  padding: 0 20px 20px 20px;
  cursor: move;
  /* Fade out while not hovering */
  opacity: 0.95;
  zoom: 0.9;
  transition: opacity 10ms 20ms;
}

#controls:hover {
  /* Fade in while hovering */
  opacity: 0.95;
  transition-delay: 0;
}

.field_summary_panel {
  /* Appearance */
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1);
  background-color: white;
  border-radius: 10px;
  padding: 0px 20px 10px 20px;
  /* Fade out while not hovering */
  opacity: 1;
  zoom: 0.9;
  transition: opacity 500ms 1s;
}

@property --farm-details-panel-right {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 0%
}

.farm-actions-bar-shadow {
height: 20px; 
background: transparent; 
border-top-right-radius: 10px; 
border-top-left-radius: 10px; 
box-shadow: 0px -10px var(--mode-primary); 
position: fixed; 
right: 0; 
left: 0; 
top: var(--map-y-position);
transition: all 1s;
}

.farm_summary_panel {
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1);
  background-color: white;
  border-radius: 10px;
  border: 3px solid var(--mode-primary);
  padding: 10px 20px 10px 20px;
  opacity: 0.95;
  position: fixed;
  transform: translateX(var(--farm-details-panel-right));
  top: 60px;
  right: 10px;
  width: 410px; 
  height: auto;
  transition: right 0.5s ease, transform 1s;
  z-index: 1000;
}

#farm-details-collapse {
  background-color: white;
  padding: 17.5px 10px;
  cursor: pointer;
  width:25px;
  position: absolute;
  right: 100%;
  height:50px;
  border-radius: 10px 0 0 10px;
}

.farm_summary_panel>div>ul {
  font-size: 16px;
  font-weight: bold;
}


.farm_summary_panel>div>ul>li {
  width: 50%;
}

.farm_summary_panel>div>ul>li>a {
  width: 100%;
  text-align: center;
}

.livestock-text-extra {
  width: 50px !important;
  padding: 2px !important;
}

.defaults-text-extra {
  width: 95px !important;
  padding: 2px !important;
}

.manure-text-extra {
  width: 80px !important;
  padding: 2px !important;
}

.right_top_panel {
  /* Appearance */
  background-color: transparent;
  outline: none;
  border-radius: 10px;
  padding: 10px 20px 0px 20px;
  cursor: move;
  /* Fade out while not hovering */
  opacity: 1;
  zoom: 1;
  transition: background-color 0.3s ease;
  z-index: 100;
}

.right_top_panel:hover {
  background-color: white;
}


#manure_reactable .rt-tr-header {
height: 50px !important;
}

#livestock_reactable .rt-tr {
height: 40px !important;
}

#livestock_reactable .rt-tr-header {
height: 35px !important;
}

#farm_summary_module-cereal_reactable_div .rt-align-center .rt-td-inner {
  display: flex;
  justify-content: center !important;
}

#farm_summary_module-grass_reactable_div .rt-align-center .rt-td-inner {
  display: flex;
  justify-content: center !important;
}

.sam1_value_panel {
  position: absolute;
  top: 55px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0px;
  display: flex;
  justify-content: center;
  gap: 0px;
  background-color: transparent;
  opacity: 1;
  outline: none;
  padding: 0px 0px 0px 0px;
}

.logo_panel {
  position: absolute;
  bottom: 21px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background-color: transparent;
  opacity: 1;
  outline: none;
}

.left_top_panel {
  /* Appearance */
  background-color: transparent;
  outline: none;
  border-radius: 10px;
  padding: 0px 20px 10px 20px;
  cursor: move;
  /* Fade out while not hovering */
  opacity: 1;
  zoom: 1;
  z-index: 100;
}

.farm_actions_bar {
  /* Appearance */
  background-color: transparent;
  outline: none;
  border-radius: 10px;
  padding: 0px 20px 10px 20px;
  cursor: move;
  /* Fade out while not hovering */
  opacity: 1;
  zoom: 1;
  z-index: 99;
}

.sign_out_panel {
  /* Appearance */
  background-color: transparent;
  outline: none;
  border-radius: 10px;
  padding: 0px 20px 10px 20px;
  cursor: move;
  /* Fade out while not hovering */
  opacity: 1;
  zoom: 1;
  transition: opacity 500ms 1s;
}

.snapshot_panel {
  /* Appearance */
  background-color: transparent;
  outline: none;
  border-radius: 0px;
  padding: 0px 0px 0px 0px;
  cursor: move;
  /* Fade out while not hovering */
  opacity: 1;
  zoom: 1;
  transition: opacity 500ms 1s;
}

#right_hand_panel {
  /* Appearance */
  background-color: transparent;
  padding: 0 0px 0px 0px;
  cursor: move;
  /* Fade out while not hovering */
  opacity: 1;
  zoom: 0.9;
  transition: opacity 500ms 1s;
}

#right_hand_panel:hover {
  /* Fade in while hovering */
  opacity: 1;
  transition-delay: 0;
}

#sbi_button {
  /* Appearance */
  color: #06cc3b;
}

#scrape_spatial_button {
  /* Appearance */
  background-color: white;
  color: black;

  cursor: select;
  /* Fade out while not hovering */
  opacity: 0.8;
  zoom: 0.9;
}

#scrape_spatial_button:hover {
  /* Fade in while hovering */
  opacity: 1;
  transition-delay: 0;
}

#view_table_button {
  /* Appearance */
  background-color: white;
  color: black;

  cursor: select;
  /* Fade out while not hovering */
  opacity: 0.8;
  zoom: 0.9;
}

#view_table_button:hover {
  /* Fade in while hovering */
  opacity: 1;
  transition-delay: 0;
}

/* Customize fonts */
body,
label,
input,
button,
select {
  font-family: "Helvetica Neue", Helvetica;
  font-weight: 400;
}
h1,
h2,
h3,
h4 {
  font-weight: 400;
}

#sbi_error_text {
  color: red;
  font-size: 10px;
}

.modal-lg {
  min-width: 900px;
  width: 90% !important;
}

hr.divider {
  margin-top: 0em;
  margin-bottom: 10px;
  border-width: 2px;
}

.feature_items {
  list-style: none;
  padding-left: 0;
}

.feature_items li {
  text-align: left;
  margin-bottom: 5px;
}

.stopwatch {
  background-color: #ffffff;
  border-radius: 15px;
  padding: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stopwatch_unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 15px;
}

.stopwatch_number {
  font-size: 48px;
  font-weight: bold;
  color: #333;
}
.stopwatch_label {
  font-size: 14px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 5px;
}
.stopwatch_separator {
  font-size: 48px;
  color: #06cc3b;
  margin: 0 5px;
  align-self: flex-start;
  padding-top: 5px;
}

#modal_with_close_button .modal-header {
  position: relative;
}

#modal_with_close_button .close {
  position: absolute;
  right: 15px;
  top: 15px;
  font-size: 24px;
  font-weight: bold;
  color: #000;
  opacity: 0.5;
  transition: opacity 0.2s;
}

#modal_with_close_button .close:hover {
  opacity: 1;
  text-decoration: none;
}

.credit-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #2c3e50;
}
.credit-subtitle {
  font-size: 16px;
  color: #7f8c8d;
  margin-bottom: 20px;
}
.discount-alert {
  background-color: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 15px;
}
.discount-list {
  background-color: #e9ecef;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 15px;
}
.discount-list ul {
  padding-left: 20px;
  margin-bottom: 0;
}
.buy-button {
  width: 100%;
  background-color: #27ae60;
  border-color: #27ae60;
  color: white;
  font-size: 18px;
  padding: 10px;
}
.buy-button:hover {
  background-color: #2ecc71;
  border-color: #2ecc71;
}
.total-price {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 15px;
  color: #2c3e50;
}

#main-previous_spreading_events {
  font-size: 13px;
}

.demo-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mapboxgl-ctrl-right {
  display: flex;
  flex-direction: row-reverse;
  top: unset;
  transform: unset;
  right: 75px;
  bottom: 20px;
}

.mapboxgl-ctrl-right>div {
  display: flex;
}

.mapboxgl-ctrl-group button+button {
  border: 0;
}

/* Add new styles */
.logo-container {
  height: 75px;
  position: relative;
  display: flex;
  align-items: center;
  pointer-events: auto;
  margin-bottom: 0;
  gap: 10px;
}

.logo-container div {
  transition: transform 0.3s ease;
  transform: scale(1.1);
  margin-bottom: 0;
}

.logo-container img {
  height: 75%;
  width: 40px;
}

.logo-container img:hover {
  margin-top: 0px;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: scale(1.1);
  opacity: 1;
}

.logo-container img:not(:hover) {
  transition: transform 0.3s ease;
  transform: scale(1);
}

.selected-app-name {
  margin-left: 5px;
  color: white;
  font-family: "Pixelify Sans";
  font-size: 20px;
  font-weight: 400;
  line-height: 1.05;
}

.go-to-landing-page-button {
  background: var(--mode-accent);
  border: 3px solid var(--mode-accent);
  border-radius: 10px;
  width: 40px;
  height: 40px;
  color: white;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.soil-sage-avatar img {
  opacity: var(--soil-opacity);
}

.manure-maestro-avatar img {
  opacity: var(--manure-opacity);
}

.nutrient-navigator-avatar img {
  opacity: var(--nutrient-opacity);
}

.crop-rex-avatar img {
  opacity: var(--crop-opacity);
}

.soil-sage-landing {
  background: var(--soil-accent);
  border: 3px solid var(--soil-primary);
  border-radius: 10px;
}

.soil-sage-landing:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

.manure-maestro-landing {
  background: var(--manure-accent);
  border: 3px solid var(--manure-primary);
  border-radius: 10px;
}

.manure-maestro-landing:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

.nutrient-navigator-landing {
  background: var(--nutrient-accent);
  border: 3px solid var(--nutrient-primary);
  border-radius: 10px;
}

.nutrient-navigator-landing:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

.crop-rex-landing {
  background: var(--crop-accent);
  border: 3px solid var(--crop-primary);
  border-radius: 10px;
}

.crop-rex-landing:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

/* Default states for logos */
#soil_sage_logo {
  transform: translateY(0);
  opacity: 1; /* Fully visible */
}

#manure_maestro_logo {
  transform: translateY(100%); /* Off-screen */
  opacity: 0; /* Fully transparent */
}

/* States for when Manure Maestro is active */
.manure-maestro-active #soil_sage_logo {
  transform: translateY(100%); /* Move off-screen */
  opacity: 0; /* Fully transparent */
}

.manure-maestro-active #manure_maestro_logo {
  transform: translateY(0); /* Bring it into view */
  opacity: 1; /* Fully visible */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Ensure transition is applied */
}

.top-bar-dropdowns .form-group {
  margin-bottom: 0px;
}

.customTooltip {
  border-radius: 10px !important;
}
.customTooltip * {
  color: #4a4a4a;
  font-size: 16px;
  font-weight: 400;
}
 
.customTooltip .introjs-tooltip-title {
  color: #0a41c9;
}

.add-fertiliser-div .form-control {
  font-size: 14px; 
  font-family: 'Helvetica Neue', Helvetica; 
  font-weight: 400; 
}

.add-fertiliser-div .control-label {
  font-size: 14px; 
  font-family: 'Helvetica Neue', Helvetica; 
  font-weight: 400; 
}

.add-fertiliser-div .shiny-options-group {
  font-size: 14px; 
  font-family: 'Helvetica Neue', Helvetica; 
  font-weight: 400; 
}

.add-fertiliser-alert button.cancel {
  font-size: 14px; 
  font-family: 'Helvetica Neue', Helvetica; 
}

.add-fertiliser-alert button.confirm {
  font-size: 14px; 
  font-family: 'Helvetica Neue', Helvetica; 
}

.tooltip-arrow {
    border-bottom-color: var(--mode-accent) !important
}
.tooltip>div:nth-child(2) {
    background: var(--mode-accent)
}
.tooltip>div:nth-child(1) {
    border-top-color: var(--mode-accent) !important
}

#help-button-container {
  display: flex;
  position: absolute;
  left: 10px;
  bottom: 35px;
  width: 200px;
}

.check-spend-credit-div {
  display: flex;
  justify-content: center;
}

.blurred {
  filter: blur(4px);
}

/* Replace the mapbox gl draw default linestring tool icon we use for splitting fields */
.mapbox-gl-draw_line {
  background-image: url('/images/scissors.svg') !important;
  background-size: 50% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
/* Replace the mapbox gl draw default polygon tool icon we use for drawing fields */
.mapbox-gl-draw_polygon {
  background-image: url('/images/plus.svg') !important;
  background-size: 50% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
/* Replace the mapbox gl draw default combine tool icon we use for combining fields */
.mapbox-gl-draw_combine {
  background-image: url('/images/combine.svg') !important;
  background-size: 50% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.space-grotesk-font {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.legend-text {
 text-align: left !important;
}

.accordion-header {
  display: flex;
  justify-content: space-between;
}

.collapsed > div > div > i {
  transform: rotate(180deg);
}

.panel-default>.panel-heading {
background-color: var(--mode-primary); 
color: white;
}

.mapboxgl-legend {
  border: 3px solid var(--mode-primary);
}

.mode-button-description {
  display: none;
  text-align: center;
  text-wrap: wrap;
  width: 140px;
  height: 140px;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-family: 'Pixelify Sans';
  border-radius: 10px;
}

.hover-text:hover .show-on-default { display: none; }
.hover-text:hover .show-on-hover { display: flex !important; }