.dashboard {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            max-width: 1400px;
            margin: 10px auto;
            border-radius: 10px;
        }

        .iframe-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            /* This will space out the iframes evenly */
        }

        .iframe-row iframe {
            flex: 1;
            /* This means grow at the same rate */
            width: 100%;
            /* Full width of their parent container */
            height: 300px;
            /* Set a suitable height for your iframes */
            border: none;
        }

        /* Target the third iframe to make it larger, taking about half the row's width */
        .iframe-row iframe:nth-child(3) {
            flex: 2;
            /* This makes the third iframe grow twice as much as the others */
        }

        iframe {
            border: none;
            border-radius: 5px;
        }

        .dashboard>iframe {
            width: 100%;
            height: 600px;
            /* Adjust the height for the single full-width iframe */
        }

        .wind-stats {
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* Align the top of the divs if the h3 should line up */
            margin: 20px 0;
            flex-wrap: wrap;
            justify-content: center;
        }

        .wind-stats>div {
            flex: 1 0 auto;
            padding: 0.5em;
            box-sizing: border-box;
            display: flex;
            /* This ensures the internal layout of the div is also flex, only if needed */
            flex-direction: column;
            /* Stack children vertically */
            justify-content: center;
            /* Center the items vertically, if needed */
            border: 1px solid #0c20d3;
            border-radius: 5px;
            margin-top: 10px;
            text-align: center;
        }

        /*.wind-stats>div:not(:last-child) {
            margin-right: 20px;
        } */

        .wind-stats>div>p {
            text-align: center;
            margin: 5px 0;
            /* Adjust margin to ensure consistent spacing between p tags */
        }

        .compass-rose {
            display: block;
            margin: 0 auto;
            width: 400px;
            /* or whatever size fits best */
            height: auto;
            /* keeps the aspect ratio */
            background-color: cadetblue;
            border-radius: 50px;
        }

        .gusts {
            display: flex;
            flex-direction: row;
            align-items: center;
            text-align: center;
        }

        .maxGustCal {
            max-width: fit-content;
            padding: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 1px solid #085502;
            border-radius: 5px;
            align-self: center;
        }

        .date-selection {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* Style for the date inputs */
        input[type="date"] {
            padding: 10px;
            border: 2px solid #394a6d;
            /* Slightly lighter border for visibility */
            background-color: #2a2f45;
            /* Darker background to match the theme */
            color: #8eaeff;
            /* Text color to match the links */
            border-radius: 5px;
            margin: 5px 10px 5px 0;
        }

        input[type="date"]:hover {
            background-color: #394a6d;
            /* Slightly lighter on hover */
        }

        input[type="date"]:focus {
            outline: none;
            /* Removing the default focus outline */
            border-color: #7491c7;
            /* Highlighting with a blue border */
            box-shadow: 0 0 5px #7491c7;
            /* Adding a glow effect for focus */
        }

        /* Style for the action button */
        button {
            padding: 10px 15px;
            margin-bottom: 10px;
            background-color: #121725;
            /* Darker blue background */
            color: #fff;
            /* White text color */
            border: none;
            border-radius: 5px;
            cursor: pointer;
            /* Pointer cursor on hover */
            transition: background-color 0.3s ease;
            /* Smooth transition for hover effect */
        }

        button:hover {
            background-color: #7491c7;
            /* Lighter blue background on hover */
        }

        button:focus {
            outline: none;
            /* Removes the outline to keep the style clean */
            box-shadow: 0 0 0 2px #7491c7;
            /* Adds a focus shadow */
        }

        input[type="number"],
        select,
        input[type="date"] {
            width: 10em;
            /* Full width within the form */
            padding: 10px;
            margin-bottom: 10px;
            background-color: #1c243f;
            /* Dark blue background */
            border: 1px solid #413c3c;
            /* Dark border to fit the theme */
            color: #fff;
            /* White text color */
            border-radius: 5px;
            text-align: center;
            /* Centers text inside input fields */
        }

        input[type="number"]:focus,
        select:focus,
        input[type="date"]:focus {
            outline: none;
            border-color: #7491c7;
            box-shadow: 0 0 5px #7491c7;
            /* Focus effect */
        }