/* Center the results content */
.results-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    width: 100vw;
}
.results-container h1{
    padding: 20px;
}

/* Button styling */
.btn {
    font-size: 1.2em;
    padding: 10px 20px;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 20px;
}

#download {
    background-color: black;
}

#upload {
    background-color: #898989;
}

#download:hover {
    background-color: blue;
    opacity: 0.6;
}

#upload:hover {
    background-color: blue;
    opacity: 0.6;
}

/* Button container styling */
#buttons {
    display: inline-block;
    padding: 12px 20px;
    margin: 20px 5px 10px 5px;
    text-align: center;
}

/* Visualization container styling */
.visualization-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 20px;
    width: 100vw;
}

.doubleplot {
    width:100%;
    margin: 20px;
    max-width: 700px;
    display: inline-block;
}
.singleplot {
    width:100%;
    margin: 20px;
    max-width: 1000px;
    display: inline-block;
}

#weath {
    margin-bottom: 0;
}
#weather-plot{
    margin-bottom: 0;
    margin-right: 0px;
}
.weather-icons-container {
    width: 100%;
    margin: 20px 20px 0px 0px;
    padding-left: 5px;
    max-width: 300px;
    display: inline-block;
    background-color: #fff;
}

.text-container {
    text-align: center;
    margin: 10px 5px 20px 5px;
    width: 100%;
}

/* Weather icons styling */
.weather-icons {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-items: center;
    flex-wrap: wrap;
    height: 100%;
}

.weather-icon-item {
    display: inline-flex;
    max-height: 120px; /* Adjust this value as needed */
    max-width: 600px; /* Adjust this value as needed */
    flex-wrap: wrap;
    align-items: first baseline;
}

.text-container p a:link{
    color: blue;
}
.text-container p a:visited{
    color: purple;
}
.text-container p a:hover{
    text-decoration: none
}
.vertical {
    /* border-left: 3px solid green; */
    height: auto;
    display: inline-block;
    margin: 0px 20px;
}

.icondesc {
    display: inline-block;
    /* margin-top: 30px; */
}
/* .weather-icon-item strong{
    position: relative;
    top:-1em;
} */

.separator {
    font-size: 24px;  /* Make the separator larger */
    position: relative;
    top: -10px;  /* Move the separator vertically */
}
.code-cont{
    display: inline-block;
}
.legend-gradient {
    background: linear-gradient(to right, #00ff00, yellow, red); /* Green to red gradient */
    width: 100px;
    height: 10px;
    border: 1px solid #555;
    margin: 5px;
}
.legend-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight:bolder;
}
#map{
    z-index: 2;
}
.input-container{
    text-align: center;
    margin: 10px 5px 0px 5px;
    width: 100%;
}
.input-container {
    text-align: center;
    margin: 10px 5px 0px 5px;
    width: 100%;
    gap: 10px; /* Adds space between the label, input, and button */
}

.input-container label {
    font-size: 1.2em; /* Sets the font size of the label */
    margin-right: 10px; /* Adds some space to the right of the label */
}

.input-container input[type="number"] {
    padding: 5px 10px; /* Adds padding inside the input field */
    font-size: 1.2em; /* Sets the font size of the input text */
    border: 1px solid #ccc; /* Adds a border around the input field */
    border-radius: 4px; /* Rounds the corners of the input field */
    width: 60px; /* Sets a fixed width for the input field */
    outline: none; /* Removes the default focus outline */
    transition: border-color 0.3s; /* Adds a transition effect for the border color */
}

.input-container input[type="number"]:focus {
    border-color: #007bff; /* Changes border color on focus */
}
.des-container {
    text-align: center;
    margin: 20px 5px 10px 5px;
    width: 80%;
    font-size: 1.2em;
}
.results-container {
    --hr-line-offset: 25%;
    --hr-color: lightsalmon;
}

.custom-hr {
    border: 0; /* Remove default border */
    border-top: 3px solid; /* Set a default thickness */
    border-image-slice: 1;
    border-image-source: linear-gradient(
        to right,
        transparent,
        var(--hr-color) calc(50% - var(--hr-line-offset)),
        var(--hr-color) calc(50% + var(--hr-line-offset)),
        transparent
    );
    margin: 20px 0; /* Add some margin above and below */
    width: 100%; /* Full width */
}


.error {
    background-color: #f8d7da; /* Light red background for warning */
    border-left: 5px solid #f44336; /* Red border for emphasis */
    padding: 16px;
    margin: 20px 0;
    border-radius: 4px;
    color: #721c24;
    font-family: 'Arial', sans-serif;
}

.error h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: #f44336;
}

.error ul {
    list-style-type: disc;
    padding-left: 20px;
}

.error ul li {
    margin-bottom: 8px;
}

.error p {
    margin-top: 10px;
}

.error a {
    color: #007bff; /* Link color */
    text-decoration: none; /* Remove underline */
}

.error a:hover {
    text-decoration: underline; /* Underline on hover */
}