@import url('https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap');

html,
/* Make h1 bold */
h1 {
    font-weight: bold; /* Bold the h1 headers */
}

/* Spread out h3 and reduce size */
h3 {
    letter-spacing: 0.5px; /* Increase letter spacing */
    font-size: 14px; /* Adjust size as needed */
}

/* General text size adjustment */
body {
    font-size: 14px; /* Smaller text size for general content */
}

/* General page styles */
body {
    font-family: Arial, sans-serif;
    color: #333;
    background-color: #f9f9f9;
}

/* Header styles */
.header {
    background-color: #fff;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Main content styles */
.main-content {
    padding: 20px;
    background-color: #fff;
    margin: 20px;
    border-radius: 5px;
}

/* Steps or actions styles */
.step {
    background-color: #e8f5e9;
    padding: 15px;
    margin-top: 10px;
    border-radius: 5px;
}

body {
    width: 100%;
    padding: 0;
    margin: 0;
}

.top {
    align-items: center;
}

.navbar {
    display: flex;
    align-items: center;
    font-size: .875rem;
    background-color: rgb(155, 162, 172);
    padding: 10px;
    border-color: rgb(155, 162, 172);
    z-index: 2;
}

.title {
    padding-top: 0px;
    align-items: center;
    font-size: 18px;
    text-transform: none;
    color: #000000;
    vertical-align: center;
    font-weight: 700;
}

.sidebar_overview {
    width: 25%;
}

.homepage-body {
    display: flex;
    align-items: center;
}

.bold-text {
    font-weight: bolder;
}

html {
    font-family: "open sans", sans-serif;
}

body>.container-fluid:first-child {
    padding: 0 !important;
}

.homepage-content {
    padding-top: 75px;
    display: flex;
    flex-direction: column;
}

.homepage-head {
    display: flex;
    justify-content: center;
    /* background-color: peachpuff; */
}


.homepage-background {
    background-image: url("/img/home.jpg");
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    min-height: calc(100vh - 75px);
    margin: -24px;
}

.homepage-background:before {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to bottom right, #002F4B, #DC4225);
    opacity: .6;
    z-index: 0
}

.homepage-background>* {
    z-index: 1;
}

.light h1,
.light h2,
.light h3,
.light h4 {
    color: #fff;
}

.light .lead,
.light {
    color: #eee;
}

.homepage-lead-text-block {
    max-width: 100%;
    text-align: justify;
}

.indicator-section {
    margin: 40px;
}

.indicators-title {
    font-variant-caps: small-caps;
    text-align: center;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.indicator-boxes {
    justify-content: center;
    display: flex;
}

.indicators-boxes-row {
    background-color: white;
    padding: 15px;
}

.indicator-box-title {
    color: #02735E;
    text-align: center;
    padding: 15px;
    font-variant-caps: small-caps;
    font-size: 20px;
}

.indicator-text {
    text-shadow: #05A688;
    color: #FFB800;
    text-align: center;
    padding: 15px;
    font-weight: bolder;
    font-size: 24px;
    border-top: 2px solid #02735E;
}

@media(min-width: 768px) {
    .homepage-lead-text-block {
        max-width: 66%;
    }
}

@media(min-width: 992px) {
    .homepage-lead-text-block {
        max-width: 33%;
    }
}

.bottom {
    margin-top: auto;
}

.ackn-elt {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ackn-elt:not(:last-child) {
    margin-bottom: 15px;
}

.light a:not(.btn) {
    text-decoration: underline;
    color: #ccc;
}

.light a:not(.btn):hover {
    text-decoration: underline;
    color: #fff;
}

.bamboo{
    color: #53c5ff;
    text-decoration: none;
}

.cactus{
    color: #49d1d5;
    text-decoration: none;
}

.climber{
    color: #dbb448;
    text-decoration: none;
}

.herb{
    color: #f8827a;
    text-decoration: none;
}

.palm{
    color: #ff8fda;
    text-decoration: none;
}

.shurb{
    color: #45d090;
    text-decoration: none;
}

.subshurb{
    color: #779137;
    text-decoration: none;
}

.tree{
    color: #d7a0ff;
    text-decoration: none;
}

.card_title{
    font-weight: bold;
    text-align: center;
}

.map{
    align-items: center;
}
.climate-image-container {
    /* display: flex; */
    justify-content: center;
    align-items: center;
    /* width: 80%; */
    /* height: 60vh;
    margin: 0 auto; */
}

.climate-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: fill;
}

.full-height {
    height: 100vh;  /* 100% of the viewport height */
    overflow: hidden; /* Prevents scrolling */
    display: flex;
    flex-direction: column;
}
.content-column {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: start; /* Aligns content to the start horizontally */
    overflow: hidden;
}
.image-column img {
    height: auto;
    width: 100%;  /* Full width of the column */
    max-height: 100vh; /* Maximum height to fit the viewport */
    object-fit: cover; /* Cover the area without losing aspect ratio */
}

/* Custom for home page split between image and text */
.row-equal-height {
    display: flex;
    flex-wrap: wrap;
}

.column-equal-height {
    display: flex;
    flex-direction: column;
}

.content-fill {
    flex: 1;  /* This will make the content expand to fill available space */
}


/* General styling for the location tab */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    }

/* Top section styling */
.top-options {
    background-color: #CCCCCC;
    padding: 20px;
    border-bottom: 1px solid #ccc;
    text-align: center;
    }

.top-options h3 {
    margin-bottom: 20px;
    font-size: 1.5em;
    }

.input-selectize {
    margin: 10px auto;
    width: 80%;
    }

.top-options input[type="text"] {
    margin: 5px;
    padding: 10px;
    width: calc(40% - 20px);
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 5px;
    }

.top-options button {
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.top-options button:hover {
    background-color: #45a049;
}

/* Map section styling */
.map {
    margin: 20px auto;
    text-align: center;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    max-width: 90%;
}

.map h3 {
    margin-bottom: 20px;
    font-size: 1.5em;
}

/* Flexbox container to align left and right sections */
.flex-container {
    display: flex;
    justify-content: space-between; /* Space between left and right sections */
    align-items: stretch; /*flex-start; Align items to the top */
    gap: 20px; /* Add spacing between sections */
    margin-bottom: 20px;
    padding: 20px;
    background-color: #d5d2d2; /* Light background for the container */
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 85%; /* Adjust width for smaller container */
    max-width: 950px; /* Set a maximum width */
    margin: 0 auto; /* Center the container horizontally */
    height: 300px;
}

/* Left section styling */
.left-section {
    flex: 1; /* Left section takes up equal space */
    padding: 15px;
    border-right: 1px solid #ddd; /* Add a divider between left and right */
    display: flex; /* Enable flexbox */
    flex-direction: column; /* Stack elements vertically */
    justify-content: center; /* Center vertically */
    align-items: flex-start; /* Align items to the left horizontally */
    height: 100%; /* Ensure the section takes up the full available height */
}



.left-section h4 {
font-size: 1.2em;
margin-bottom: 10px;
font-weight: bold;
}

.left-section h5 {
font-size: 1em;
margin-bottom: 5px;
color: #555;
}

.left-section p {
font-size: 0.9em;
color: #666;
}

/* Right section styling */
.right-section {
flex: 1; /* Right section takes up equal space */
padding: 15px;
display: flex; /* Enable flexbox */
flex-direction: column; /* Stack elements vertically */
justify-content: center; /* Center vertically */
align-items: flex-start; /* Align items to the left horizontally */
height: 100%; /* Ensure the section takes up the full available height */
}

.right-section h4 {
font-size: 1.2em;
margin-bottom: 10px;
}

.right-section .input-selectize {
margin-top: 10px;
}

.right-section button {
margin-top: 15px;
padding: 10px 20px;
/* background-color: #4CAF50; */
/* color: white; */
/* border: none; */
border-radius: 5px;
cursor: pointer;
}

/* .right-section button:hover {
background-color: #45a049;
} */

/* Map styling */
.map {
margin: 20px auto;
text-align: center;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
max-width: 90%;
}

/* Custom styling for the red button */
.red-button {
    background-color: #ff4d4d; /* Red background */
    color: white; /* White text */
    border: none;
    padding: 10px 20px;
    border-radius: 5px; /* Rounded corners */
    cursor: pointer;
    font-size: 1em;
}

.red-button:hover {
background-color: #ff1a1a; /* Darker red on hover */
}


.coordinates-container {
    display: flex;
    align-items: center; /* Vertically align the input and button */
    gap: 10px; /* Add space between the input and button */
}

.coordinates-container input[type="text"] {
    flex: 1; /* Make the input field take most of the available space */
}

.coordinates-container button {
    padding: 10px 20px; /* Ensure the button has a consistent size */
}

/* Grey container styling */
/* .grey-container {
    background-color: #d5d2d2; /* Light grey background */
    /* padding: 20px;
    border-radius: 8px;
    border: 1px solid #ccc;
    max-width: 950px; /* Set max width */
    /* margin: 0 auto; /* Center horizontally */
/* }

/* Bold text styling */
/* .bold-text {
    font-weight: bold;
    font-size: 18px;
} */

/* Select input styling */
/* .input-selectize {
    width: 100%;
    max-width: 500px;
} */

/* Flexbox container for potential layout adjustments */
/* .flex-container-ms {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
} */


/* Grey container styling */
.grey-container {
    background-color: #d5d2d2; /* Light grey background */
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #ccc;
    max-width: 50%; /* Adjust width dynamically */
    min-width: 100px; /* Prevent excessive shrinking */
    margin: 0 auto; /* Center horizontally */
    transition: width 0.3s ease-in-out; /* Smooth transition */
}

/* Flexbox container for left (input) and right (text) */
.flex-container-ms {
    display: flex;
    justify-content: space-between; /* Push left and right sections apart */
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

/* Left section: input */
.left-section-sm {
    flex: 0.1;
    min-width: 350px;
}

/* Right section: text */
.right-section-sm {
    flex: 1;
    min-width: 300px;
}

/* Make input-selectize larger */
/* .input-selectize .selectize-control {
    height: 50px; /* Adjust height */
    /* width: 500px;
    font-size: 16px; /* Make text more readable */
/* } */
/* Ensure input container takes proper width */
.input-container {
    width: 100%; /* Make input-container expand */
    max-width: 500px; /* Adjust max width for better alignment */
}
/* Make input-selectize larger */
.input-selectize .selectize-control {
    height: 60px; /* Increased height */
    width: 100%; /* Make it responsive */
    font-size: 18px; /* Increase text size */
    padding: 10px; /* More padding for better UX */
}

/* Ensure input inside selectize expands properly */
.input-selectize .selectize-input {
    min-height: 60px; /* Ensure text area expands */
    font-size: 18px; /* Match font size */
}

.center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
}