/* General styles for settings container */
.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    background-color: #f9f9f9; /* Optional background */
    border-bottom: 1px solid #ddd; /* Optional border */
}

.settings-row:hover {
    background-color: #eaeaea; /* Optional hover effect */
}

.settings-row::after {
    content: '>';
    font-size: 18px;
    color: #888; /* Icon color */
}





.sidebar-footer {
    position: absolute; /* Position relative to the sidebar */
    bottom: 60px; /* Adjust distance from the bottom */
    width: 100%; /* Take up full width of the sidebar */
    text-align: center; /* Center the text */
    font-size: 12px; /* Adjust font size */
    color: #000000; /* Subtle text color */
}




.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.popup-content {
    padding: 20px;
    font-size: 14px;
    text-align: center;
}

.popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 16px;
    color: #333;
}

.popup-close:hover {
    color: #ff0000;
}





.settings-container {
    position: absolute; /* Center positioning */
    top: 50%; /* Center vertically */
    left: 55%; /* Center horizontally */
    margin-top: 10px;
    transform: translate(-50%, -50%); /* Adjust for center alignment */
    width: 50%; /* Adjust width as needed */
    background-color: #f9f9f9; /* Light background color */
    border: 1px solid #ddd; /* Subtle border */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Drop shadow */
    padding: 20px; /* Inner spacing */
    visibility: hidden; /* Hidden by default */
    display: none; /* Hidden by default */
    transition: all 0.3s ease-in-out; /* Smooth transitions */
}

/* Heading styles */
.settings-container h2 {
    text-align: center; /* Center-align heading */
    color: #333; /* Dark text color */
    margin-bottom: 20px; /* Spacing below heading */
}

/* Form group styles */
.form-group {
    margin-bottom: 20px; /* Spacing between groups */
}

/* Input labels */
.form-group label {
    display: block; /* Block-level display */
    font-weight: bold; /* Bold labels */
    margin-bottom: 5px; /* Spacing below label */
}

/* Input fields */
.form-group input {
    width: 100%; /* Full width */
    padding: 10px; /* Inner spacing */
    border: 1px solid #ccc; /* Subtle border */
    border-radius: 5px; /* Rounded corners */
    font-size: 16px; /* Comfortable font size */
}

/* Input group for icons */
.input-group {
    position: relative; /* Position for icon adjustment */
}

/* Toggle visibility icon */
.toggle-visibility {
    position: absolute; /* Position relative to input */
    top: 50%; /* Center vertically */
    right: 10px; /* Adjust position */
    transform: translateY(-50%); /* Adjust for vertical centering */
    cursor: pointer; /* Indicate clickable */
    color: #888; /* Neutral icon color */
}


/* Individual buttons */
.settings-button {
    background-color: #007bff; /* Primary blue color */
    color: white; /* White text */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    padding: 10px 20px; /* Inner spacing */
    font-size: 16px; /* Comfortable font size */
    cursor: pointer; /* Indicate clickable */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

/* Button hover effect */
.settings-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

.widget {
  width: 150px; /* Set the widget width */
  margin : 20px;/* Add some space between widgets */
  justify-content: center;
  padding: 20px; /* Add some padding inside the widget */
  background-color: #FDDF5F; /* White background for the widget */
  border-radius: 15px; /* Curved edges for the widget */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow for the widget */
  transition: all 0.3s ease; /* Smooth transition for hover effect */
}

.widget:hover {
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
}

.widget-text {
  font-size: 12px;
  color: #333; /* Dark text color for better readability */
  margin: 0;
  text-align: center; /* Center-align the text */
}

#clearAllButton {
    display: block;
    margin: 10px auto; /* Center the button horizontally */
    padding: 10px 20px;
    font-size: 14px;
    color: #fff;
    background-color: #ff0000; /* Red background */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#clearAllButton:hover {
    background-color: #cc0000; /* Darker red on hover */
}


.progress-row {
  display: flex;
  gap: 20px; /* Space between the progress items */
}

.progress-item {
  display: flex;
  flex-direction: column; /* Stack text above the progress circle */
  align-items: center; /* Center align text and progress circle */
  text-align: center; /* Ensure text is centered */
}

.progress-text {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px; /* Add space between text and the circle */
  color: #333;
}

.progress-container {
  width: 120px;
  height: 160px; /* Increased height to accommodate temperature values */
  position: relative;
}

.progress-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    #0055ff 0%,
    #00b4ff 0%,
    #e0e0e0 0%,
    #e0e0e0 100%
  );
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-inner {
  width: 85%;
  height: 85%;
  background: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-value {
  font-size: 32px;
  font-weight: bold;
  color: #333;
}

.temperature-values {
  margin-top: 8px; /* Space between circle and temperature values */
  text-align: center;
}

.temperature-min, .temperature-max {
  font-size: 12px;
  font-weight: 600;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  margin: 4px 0; /* Space between min and max values */
}






body {
            font-family: Arial, sans-serif;
            margin: 0;
            display: flex;
        }
        .sidebar {
            width: 150px;
            background-color: white;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: fixed;
            height: 100%;
            z-index : 9999;
            box-shadow: 5px 0 10px rgba(0, 0, 0, 0.2);
        }
        .sidebar img {
            width: 150px;
            height: auto;
            margin-bottom: 20px;
        }

        .popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            display: none;
            text-align: center;
        }

        .popup img {
            max-width: 400px;
            margin: 30px auto;
            display: block;
        }

        .popup .close-btn {
            position: absolute;
            top: 5px;
            right: 5px;
            font-size: 24px;
            cursor: pointer;
            color: red;
            background: transparent;
            border: none;
        }
        .slider-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.slider-section {
    margin-bottom: 20px;
}

.slider-section h3 {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 10px;
    text-align: center;
}

.slider-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.slider-group .slider-value {
    margin-left: 10px;
    font-size: 1rem;
    color: #333;
    width: 40px;
    text-align: center;
}


.slider-group label {
    flex: 1;
    font-size: 1rem;
    color: #555;
    text-align: left;
}

.slider-group .slider {
    flex: 3;
    appearance: none;
    width: 100%;
    height: 8px;
    background: #ddd;
    border-radius: 5px;
    outline: none;
    transition: background 0.3s;
}

.slider-group .slider:hover {
    background: #ccc;
}

.slider-group .slider::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #007bff;
    cursor: pointer;
    transition: background 0.3s;
}

.slider-group .slider::-webkit-slider-thumb:hover {
    background: #0056b3;
}
        .sidebar a {
            text-decoration: none;
            color: black;
            font-size: 18px;
            margin: 10px 0;
            padding: 10px 15px;
            border-radius: 10px;
            transition: background-color 0.2s, color 0.2s;
            display: flex;
            align-items: center;
            gap: 10px;
            width: 120px;
            height: 25px;
        }
        .sidebar a.active {
            background-color: #157FFB;
            color: white;
        }
        .sidebar a i {
            font-size: 18px;
        }
        #containerforhead {
            position: fixed;
            display: inline-flex;
            bottom: 0;
            left: 0;
            margin-bottom:60px;
            margin-left : 10px;
            background-color: #f8f9fa;
            padding: 8px;
            align-items: center;
            font-size: 12px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            z-index: 9999;
        }
        .clock-container {
            display: flex;
            padding-right: 2px;
            flex-direction: column;
            z-index:9999;
        }
.room-container {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px;
}

.room {
    margin-bottom: 40px; /* Space between rooms */
}

.room-title {
    font-size: 16px;
    font-weight: bold;
    color: #444;
    text-align: left; /* Align to the left edge */
    margin-bottom: 10px; /* Space below the room title */
}

.status-container {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between items */
    padding-left: 20px; /* Indent from the room title */
}

.status-item {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between text and dot */
}

.status-text {
    font-size: 14px;
    color: #333;
    font-weight: bold;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: gray; /* Default color */
}


        #current-time {
            margin: 0;
            font-size: 12px;
        }
        #current-date {
            margin: 0;
            font-size: 12px;
        }
        .main-content {
            margin-left: 180px;
            margin-top : 50px;
            padding: 20px;
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }



        /* Hover effect for shadow */
        .chart-container:hover {
            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); /* Darker shadow on hover */
        }
        /* Header styling */
        /* Header styling */
        /* Header styling */
.header {
    position: fixed; /* Add fixed positioning */
    top: 0; /* Position it at the top */
    left: 190px; /* Start the header after the sidebar (sidebar width) */
    right: 0; /* Stretch it to the right */
    display: flex;
    justify-content: space-between; /* Position elements at left and right */
    align-items: center; /* Vertically align content */
    padding: 20px; /* Padding around the header */
    background-color: #fff; /* Background color */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Shadow effect */
    border-radius: 0 10px 10px 0; /* Rounded corners on the right only */
    z-index: 1000; /* Ensure the header stays on top of other content */
}



.header-left {
    flex: 1; /* Allow the left section to take up available space */
}

.header-left h1 {
    margin: 0; /* Remove default margin from h1 */
    font-size: 24px;
    color: #333;
}

.header-right {
    display: flex;
    align-items: center; /* Center align items vertically */
}

.right-content {
    display: flex;
    align-items: center; /* Center the email and icon vertically */
    gap: 10px; /* Add spacing between the email and the bell icon */
}

.email-text {
    font-size: 14px; /* Adjust font size for the email text */
    color: #555; /* Set text color */
    white-space: nowrap; /* Prevent text from wrapping */
}

.fa-bell {
    font-size: 18px; /* Set icon size */
    color: #555; /* Match color with the email text */
    cursor: pointer; /* Add pointer cursor on hover */
    transition: color 0.3s ease; /* Add smooth color transition */
}

.fa-bell:hover {
    color: #007bff; /* Change color on hover */
}









/* Left side styling (Dashboard text) */
.header-left h1 {
    margin: 0;
    font-size: 24px;
    color: #333; /* Text color */
}

/* Right side styling (Bell icon) */
.header-right i {
    font-size: 24px; /* Icon size */
    color: #333; /* Icon color */
    cursor: pointer; /* Make the icon clickable */
}
.rectangular-container {
    flex: 1; /* Allow containers to take equal space */
    width: 45%; /* Start with a responsive width */
    max-width: 100%; /* Ensure it can grow to fill larger screens */
    background-color: #fff; /* White background */
    border-radius: 15px; /* Rounded edges */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Shadow effect */
    padding: 10px; /* Inner spacing */
    text-align: center; /* Center align content */
    transition: box-shadow 0.3s ease, width 0.3s ease; /* Smooth transition for shadow and size changes */
    box-sizing: border-box; /* Include padding and border in width calculations */
}

/* Hover effect for the containers */
.rectangular-container:hover {
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); /* Darker shadow on hover */
}




.chart-button {
    background-color: #007bff; /* Default blue color */
    color: white;
    width: 70px;
    margin-top: 10px;
    height: 35px;
    border: none;
    border-radius: 20px;
    padding: 10px 15px;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.chart-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.3);
}

/* Selected button style */
.chart-button.selected {
    background-color: #28a745; /* Green color for selected */
    color: white;
}

#graph {
    width: 100%;
    height: 500px;
}



.chart-button2 {
    background-color: #007bff; /* Default blue color */
    color: white;
    width: 70px;
    margin-top: 10px;
    height: 35px;
    border: none;
    border-radius: 20px;
    padding: 10px 15px;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.chart-button2:hover {
    background-color: #0056b3; /* Darker blue on hover */
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.3);
}

/* Selected button style */
.chart-button2.selected {
    background-color: #28a745; /* Green color for selected */
    color: white;
}


.chart-wrapper {
    display: inline-block;
    width: 49%; /* Use width instead of min-width to lock the size */
    max-width: 49%; /* Prevent unexpected stretching */
    box-sizing: border-box; /* Include padding and border in width calculation */
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    overflow: hidden; /* Prevent content from breaking layout */
}
.button-group {
    display: flex;
    justify-content: flex-center;
    gap: 10px;
    height : 50px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: #f9f9f9;
}
.date-picker-container {
    display: flex;
    flex-direction: column; /* Align label and date picker vertically */
    align-items: flex-start; /* Align items to the left */
    gap: 5px; /* Space between label and date picker */
    max-width: 150px; /* Container width to match the date picker */
}

.date-picker-label {
    font-size: 14px; /* Professional font size */
    font-family: 'Roboto', sans-serif; /* Match the font style */
    color: #333; /* Neutral color for text */
    font-weight: 500; /* Slightly bold for emphasis */
    margin-bottom: 4px; /* Space below the label */
}

.date-picker {
    border: 1px solid #ddd; /* Subtle border for a clean look */
    border-radius: 8px; /* Smooth, curved edges */
    padding: 6px; /* More padding for better usability */
    font-size: 16px; /* Professional font size */
    font-family: 'Roboto', sans-serif; /* Modern and clean font */
    width: 100%; /* Ensures it adapts well to containers */
    max-width: 130px; /* Optional: Limit maximum width */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    outline: none; /* Removes default browser outline */
    transition: all 0.3s ease; /* Smooth hover and focus transitions */
}

.date-picker:focus {
    border: 1px solid #0056b3; /* Highlight border on focus */
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2); /* Enhance shadow on focus */
}

.date-picker:hover {
    box-shadow: 0px 5px 7px rgba(0, 0, 0, 0.15); /* Slightly stronger shadow on hover */
    background-color: #f9f9f9; /* Subtle background change on hover */
}

/* Chart container */
.chart-container {
    display: none;
    width: 100%;
    height: 200px;
    border-radius: 15px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Responsive design */
@media screen and (max-width: 768px) {
    .chart-wrapper {
        width: 90%;
        margin: 10px auto;
    }

    .button-group {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .chart-button {
        width: 100%;
    }
}


.container-group {
  display: flex;
  gap: 20px;
}

.widget-row {
  display: flex;
  align-items: center; /* Aligns bar chart and progress bar vertically */
  gap: 42px; /* Adds spacing between the bar chart and progress bar */
}

#bar-chart1,
#bar-chart2 {
  width: 200px; /* Adjust width of the bar chart */
  height: 150px; /* Adjust height of the bar chart */
}
.progress-row {
  display: flex;
  gap: 20px; /* Space between the progress items */
}

.progress-item {
  display: flex;
  flex-direction: column; /* Stack text above the progress circle */
  align-items: center; /* Center align text and progress circle */
  text-align: center; /* Ensure text is centered */
}

.progress-text {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;/* Add space between text and the circle */
  margin-right : 8px;
  color: #333;
}

.container-text-first {
  font-size: 15px;
  font-weight: 800;
  color: #333;
}


.progress-container {
  width: 120px;
  height: 120px;
  margin : 17px;
  position: relative;
}

.progress-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    #0055ff 0%,
    #00b4ff 0%,
    #e0e0e0 0%,
    #e0e0e0 100%
  );
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-inner {
  width: 85%;
  height: 85%;
  background: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-value {
  font-size: 32px;
  font-weight: bold;
  color: #333;
}

/* Export Button Wrapper */
.export-wrapper {
    display: flex;
    justify-content: flex-start; /* Align button to the left */
}

/* Export Button Style */
.export-button {
    display: flex;
    padding: 8px 15px;
    font-size: 14px;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Icon and Text inside Export Button */
.export-button i {
    margin-right: 8px; /* Space between icon and text */
}

/* Hover effect on Export Button */
.export-button:hover {
    background-color: #45a049;
}
.dropdown-menu {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 10px; /* Curved edges */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    font-size: 14px;
    background-color: #ffffff; /* White background */
    color: #333; /* Text color */
    cursor: pointer;
    margin-top : 10px;
    margin-bottom : 5px;
    outline: none; /* Remove focus outline */
    width: 120px; /* Set a fixed width */
    transition: box-shadow 0.3s ease, border-color 0.3s ease; /* Smooth hover effect */

    /* Custom arrow for the dropdown */
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"%3E%3Cpath d="M7 10l5 5 5-5z"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 22px;
    appearance: none; /* Remove default dropdown styling for consistency */
}

.dropdown-menu:hover {
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Darker shadow on hover */
    border-color: #007bff; /* Change border color on hover */
}

.dropdown-menu:focus {
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5); /* Add focus ring */
    border-color: #007bff; /* Highlight border on focus */
}

.dropdown-menu option {
    padding: 8px; /* Add padding to options */
    background-color: #fff; /* Option background color */
    color: #333; /* Option text color */
}

.sidenav {
  height: 94%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0; /* Position the sidenav on the right */
  background-color: #fff; /* Set background to white */
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  z-index : 9999;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2); /* Optional: adds shadow to the right edge */
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #333; /* Change text color to dark gray */
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  font-size: 36px;
  color: #333; /* Set close button color */
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
/* Optional styling to make the button responsive (adjust width if necessary) */
@media (max-width: 768px) {
    .export-wrapper {
        justify-content: center; /* Center the button on smaller screens */
    }
}






.container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.input-group {
    display: flex;
    flex-direction: column;
    margin: 10px 0;
}

.section-title {
    font-size: 18px;
    font-weight: bold;
    margin: 20px 0 10px;
    text-align: center;
    color: #333;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}


label {
    margin-bottom: 8px;
    font-weight: bold;
}

input {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    grid-column: span 2;
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}