body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0; /* Remove default body margin */
}

.form-range {
    width: 100%;
    height: 10px; /* Ensure the slider is tall enough to be visible */
    -webkit-appearance: none; /* Remove default styling for WebKit browsers */
    appearance: none;
    background: transparent; /* Remove default background */
}

/* WebKit (Chrome, Safari) */
.form-range::-webkit-slider-runnable-track {
    height: 8px;
    background: #4A4A4A; /* Dark gray track */
    border-radius: 4px;
}

.form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #007bff; /* Blue thumb */
    border-radius: 50%;
    margin-top: -6px; /* Center the thumb on the track */
    cursor: pointer;
}

/* Mozilla (Firefox) */
.form-range::-moz-range-track {
    height: 8px;
    background: #4A4A4A; /* Dark gray track */
    border-radius: 4px;
}

.form-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #007bff; /* Blue thumb */
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.image-holder {
    background-color: #2e435b; /* Updated fallback color */
    background-size: cover; /* Ensure the background image covers the div */
    background-position: center; /* Center the background image */
    transition: border 0.3s ease;
    cursor: pointer;
    width: 150px; /* Reintroduced width */
    height: 150px; /* Reintroduced height */
}

.image-holder.highlighted {
    border: 4px solid red;
}

.result-image-holder {
    position: relative;
    width: 300px; /* Reintroduced width */
    height: 302px; /* Reintroduced height */
}

#weather-info {
    min-height: 100px; /* Set minimum height to 100px */
}

.j-scale-value {
    font-size: 80px;
}
.result_image_bg {
    position: relative;
    width: 300px;
    height: 300px;
}
.image {
    position: absolute;
    width: 300px;
    height: 300px;
}
.imageone {
    z-index: 0;
}
.imagetwo {
    z-index: 1;
}
.imagethree {
    z-index: 2;
}
.imagefour {
    z-index: 3;
}
.imagefive {
    z-index: 4;
}
.imagesix {
    z-index: 5;
}
.imageseven {
    z-index: 6;
}
.logo {
    max-width: 100%;
    max-height: auto;
}
.no-select {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE10+ */
    user-select: none; /* Standard */
}
#column2 {
    width:350px;
}