body {
        font-family: Arial, sans-serif;
        background-color: #1e1e1e;
        color: #ffffff;
        margin: 15px;
        padding: 0;
        font-size: 120%; /* Increase all font sizes by 20% */
    }

    /* Header styles */
    .header {
        display: flex;
        flex-direction: row; /* Arrange in a row */
        justify-content: center; /* Center the content horizontally */
        align-items: center; /* Align items vertically */
        position: relative;
        margin-bottom: 10px;
        text-align: center; /* Center align for smaller screens */
    }
    .temperature-status-container {
        position: absolute;
        top: -5px;
        left: 0;
        font-size: 0.9em;
        color: #ffffff;
        line-height: 1.4em;
        margin-left: 10px;
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .temp-row {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        gap: 4px;
    }

    .label {
        min-width: 70px;
        text-align: left;
        font-weight: normal;
    }
    

    .location {
        font-size: 1.4em;
        font-weight: normal;
        margin-right: 20px; /* Add spacing to the right of the location */
    }

    .node-name {
        font-size: 1.4em; /* Match the font size of location */
        font-weight: normal;
    }

    .status-container {
        position: absolute;
        top: -15px; /* Adjust the vertical position of the container */
        right: 0;
        text-align: right;
    }

    .battery {
        font-size: 0.9em;
        margin-top:3px; /* Increased margin to add vertical spacing */
    }

    .last-update {
        font-size: 0.9em;
        margin-top: 10px; /* Increased margin to add vertical spacing */
    }

    /* Chart controls */
    .chart-controls {
        display: flex;
        justify-content: flex-end; /* Align dropdown to the right */
        margin-right: 40px; /* Add space on the right */
        margin-top: 7px; /* Add vertical space between the table and the dropdown */
    }

    #time-span {
        padding: 4px 8px; /* Adjust padding */
        font-size: 0.7em; /* Smaller font size */
        color: #ffffff; /* Dropdown text color */
        background-color: #333333; /* Background color for dropdown */
        border: 1px solid #555555; /* Border color */
        border-radius: 4px; /* Rounded corners */
        margin-top: 5px;
    }

    .table-container {
        margin-left: 40px; /* Increase distance from the left border */
        margin-right: 40px; /* Optional: Adjust right margin */
        margin-top: 20px; /* Increase the vertical space between the battery and the table */
        margin-bottom: 0px;
        padding: 4px; /* Add padding inside the frame */
        border: 1.1px solid #ffffff; /* Frame with a solid white border */
        border-radius: 12px; /* Rounded edges */
        background-color: #1a1a1a; /* Darker background color */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: Add a subtle shadow for a floating effect */
    }

    .signals-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 0px; /* Add 10px vertical spacing between rows */
        margin-bottom: 4px;
        background: transparent;
        table-layout: fixed; /* Ensures equal column widths */
    }

    .signals-table th, .signals-table td {
        text-align: left;
        padding: 8px;
        white-space: nowrap; /* Prevent text wrapping for consistent alignment */
        overflow: hidden; /* Prevent overflow of content */
        text-overflow: ellipsis; /* Add ellipsis for overflowing content */
    }

    .signals-table th {
        font-size: 95%;
        background: transparent;
    }

    .signals-table td {
        font-size: 100%;
        background: transparent;
        padding-left: 10px;
    }

    /* Chart container styles */
    .chart-container {
        width: 100%; /* Make charts take the full width */
        height: 320px; /* Increase the height of the charts */
        margin-top: 0px; /* Add space between the table and the first chart */
        margin-bottom: 0px; /* Add space between the charts */
    }

    canvas {
        display: block;
        margin: 0 auto; /* Center the canvas */
        height: 100%; /* Ensure canvas uses the full height of the container */
        width: 95%; /* Ensure the canvas is nearly full width */
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        body {
            font-size: 100%; /* Slightly smaller font for smaller screens */
        }

        .header {
            flex-direction: column; /* Stack items vertically on smaller screens */
        }

        .location {
            font-size: 1.3em;
            margin-top: -7px;
            margin-right: 0; /* Remove margin on smaller screens */
        }

        .node-name {
            font-size: 1.1em;
            margin-top: 0px; /* Add spacing between rows */
        }

        .status-container {
            text-align: right;
            margin-top: -5x;
            line-height: 1.0em;
        }

        .last-update {
            font-size: 0.8em;
        }

        .battery {
            font-size: 0.8em;
            maring-top:-20px;
        }

        .temperature-status-container {
            display: flex;
            flex-direction: column;
            align-self: flex-start;
            font-size: 0.8em;
            margin: 0px 0 5px -5px;
            text-align: left;
            line-height: 1.4em;
        }

        .temp-row {
            display: flex;
            flex-direction: row;
            align-items: baseline;
        }

        .label {
            min-width: 55px;   /* gleiche Breite für beide Labels */
            text-align: left;  /* linksbündig – das ist jetzt korrekt */
            font-weight: normal;
            padding-right: 2px; /* Abstand zwischen Label und Wert */
        }

        .chart-controls {
            justify-content: center; /* Center the dropdown for smaller screens */
        }

        #time-span {
            font-size: 0.8em; /* Smaller font size for mobile */
            margin-bottom: -10px;
        }

        .chart-container {
            height: 300px;
            margin-top: 15px;
            margin-bottom: -15px;
            margin-left: -15px;
        }
    }

    /* node data collapsible panel */
    .node-panel {
        margin: 40px 40px 10px 40px;
        border: 1.1px solid #ffffff;
        border-radius: 12px;
        background-color: #1a1a1a;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        overflow: hidden;
        font-size: 0.95em;
    }

    .node-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px;
        cursor: pointer;
        user-select: none;
        background: #262626;
    }

    .node-panel-title {
        font-weight: 500;
    }

    .node-panel-toggle {
        font-size: 1.1em;
        transition: transform 0.2s ease;
    }



    .node-panel-content {
        display: none;  /* collapsed by default */
        padding: 10px 12px 12px 12px;
    }

    .node-panel.open .node-panel-content {
        display: block;
    }

    @media (max-width: 768px) {
        .node-panel {
            margin: 15px 10px 5px 10px;
        }
    }

    .node-panel-row {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
        margin: 8px 0;
        color: #cccccc;
    }

    .node-panel-label {
        min-width: 130px;
        color: #cccccc;
        font-weight: 400;
    }