/* Global styles for the body */
body {
    font-family: 'Work Sans';
    background-color: #191C20;
    color: white;
    margin: 0; /* Remove default margin */
    height: 100%; /* Set height to 100% of the viewport */
}

/* Main container for the dashboard layout */
.container {
    display: flex; /* Use flexbox for layout */
    height: 100%; /* Full height of the viewport */
    overflow: auto; /* Allow scrolling if content overflows */
}

/* Sidebar styles */
.sidebar {
    display: flex; /* Use flexbox for layout */
    box-sizing: border-box; /* Include padding and border in element's total width and height */
    flex-direction: column; /* Arrange children in a column */
    align-items: center; /* Center align items horizontally */
    height: 100vh; /* Full height of the viewport */
    width: 9.5vw; /* Fixed width for sidebar */
    background-color: #222;
    color: white; /* Text color for sidebar */
    padding: 1vh; /* Padding inside the sidebar */
    z-index: 2; /* Ensure sidebar is above other content */
    font-size: 1vw;
    box-shadow: 0.7vw 0 1.3vw rgba(0, 0, 0, 0.5); /* Shadow effect for sidebar */
}

/* Logo in the sidebar */
.logo1 {
    width: 3vw;
}

/* Paragraph styles in the sidebar */
.sidebar p {
    margin-top: 1.5vh;
    margin-bottom: 1.5vh;
}

/* Horizontal divider styles */
.horizontal-divider-top,
.horizontal-divider-bottom {
    width: 8vw;
    border-top: 0.1em solid #555;
}

/* Sidebar navigation links */
.sidebar ul li a {
    text-align: center; /* Center align text */
    display: block; /* Display as block element */
    text-decoration: none; /* Remove underline from links */
    color: white; /* Text color */
    font-size: 0.9vw;
    padding: 1.2vh 1.5vh; /* Padding inside the link */
    background-color: transparent;
    border-radius: 0.8vw;
    transition: background-color 0.3s, color 0.3s;
    margin-bottom: 1vh;
}

/* Sidebar navigation list */
.sidebar ul {
    flex: 1; /* Allow list to grow */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Arrange items in a column */
    justify-content: center; /* Center items vertically */
    list-style: none; /* Remove default list styling */
    padding: 0vh; /* Remove default padding */
}

/* Hover effect for sidebar navigation links */
.sidebar ul li a:hover {
    background-color: #555; /* Background color on hover */
}

/* Bottom horizontal divider in the sidebar */
.horizontal-divider-bottom {
    width: 8vw;
    border-top: 0.1em solid #555;
    margin-top: 6vh;
    margin-bottom: 0.5vh;
}

/* Second logo in the sidebar */
.logo2 {
    width: 6vw;
}

/* Main content styles */
main {
    flex: 1; /* Grow to fill remaining space */
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center content horizontally */
    position: relative; /* Set position */
    z-index: 1; /* Set z-index */
    height: 100vh; /* Set full height of the viewport */
    overflow: auto; /* Allow overflow */
    box-sizing: border-box; /* Include padding and border in element's total width and height */
}

/* Table styles */
table {
    flex: 1; /* Grow to fill remaining space */
    display: flex; /* Use flexbox for layout */
    padding: 3vh;
}

/* Table body styles */
tbody {
    flex: 1; /* Grow to fill remaining space */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Arrange items vertically */
}

/* Table row styles */
tr {
    flex: 1; /* Grow to fill remaining space */
    display: flex; /* Use flexbox for layout */
}

/* Table data cell styles */
td {
    flex: 1; /* Grow to fill remaining space */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Arrange items vertically */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
}

/* Historical data date styles */
.historical-data-date p {
    display: flex; /* Use flexbox for layout */
    margin: 0; /* Remove default margin */
    font-size: 1.2vw;
    color: gray;
}

/* Historical data time styles */
.historical-data-time p {
    display: flex; /* Use flexbox for layout */
    margin: 0; /* Remove default margin */
    font-size: 2vw;
    margin-bottom: 0.2vh;
}

/* Vehicle count styles */
.vehicle-count p {
    display: flex; /* Use flexbox for layout */
    font-size: 1vw;
    margin: 0.1vh;
    justify-content: center; /* Center items horizontally */
}

/* Video and CSV download styles */
.video,
.csv-download {
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Arrange items vertically */
    color: white;
    font-size: 1vw;
    margin-top: 1vh;
}

/* Video container styles */
.video {
    overflow: hidden;
    border: 0.1vw solid #5cfdc6;
    border-radius: 1vw;
}

/* Video styles */
.video > video {
    width: 11vw;
    height: 8.25vw;
}

/* CSV download link styles */
.csv-download a {
    flex-direction: column; /* Arrange items vertically */
    text-align: center; /* Center text */
    display: block; /* Display as block */
    text-decoration: none; /* Remove underline */
    color: white;
    font-size: 0.9vw;
    padding: 0.7vh 1.5vh;
    background-color: #555;
    border-radius: 0.8vw;
    transition: background-color 0.3s, color 0.3s; /* Add transition effect */
}

/* Horizontal divider styles */
.horizontal-divider {
    flex: 0; /* Do not grow or shrink */
    margin: auto; /* Center horizontally */
    width: 80vw;
    border-top: 0.5vh solid #555;
}