/* General page styles */

html {
 scroll-behavior: smooth;
scroll-padding-top: var(--scroll-padding, 300px);
}

    html, body {
    height: auto;
    margin: 0;
    padding: 0;
}
body {
    height: auto;
    font-family: Helvetica, sans-serif; 
    min-width: 1024px; /* Adjust this value to your desired base width */
    overflow-x: auto; /* Enable horizontal scrolling if content exceeds the viewport */
    margin: 0;
    padding: 0 0 60px; /* Add padding-bottom to ensure space for footer */
    background-color: #000;
    font-size: 14px;
}

/* Container styling for content area */
.container {
    font-family: Helvetica, sans-serif; 
    padding: 20px;
    margin-bottom: 60px; /* Add bottom margin to create space above the footer */
}

/* Container styling for content area */
.container2 {
    font-family: Helvetica, sans-serif; 
    padding: 0px;
    margin-bottom: 60px; /* Add bottom margin to create space above the footer */
    width: 100%;
}



/* Profile page specific container styling */
.profile-container {
    font-family: Helvetica, sans-serif; 
    max-width: 600px;
    margin: 50px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Profile page specific container styling */
.edit-container {
    max-height: auto; /* Adjust as needed */
    font-family: Helvetica, sans-serif; 
    width: 400px;
    margin: 50px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        margin-top: 0px !important;
        margin-bottom: 0px !important;
}

.edit-wrapper {
    display: flex;
    flex-wrap: wrap; /* Allows the divs to wrap when they don't fit on the same line */
    gap: 20px; /* Optional: adds space between the divs */
    justify-content: center; /* Centers the items horizontally */
    align-items: flex-start; /* Aligns the items at the top */
    min-height: 100vh; /* Ensures the container takes full viewport height */
        margin-top: 10px !important;
        margin-bottom: 0px !important;
}

/* Profile page header */
.profile-header {
    text-align: center;
    font-family: Helvetica, sans-serif; 
    color: #333;
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: bold;
}

/* Profile form styling */
.profile-form label {
    font-family: Helvetica, sans-serif; 
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 5px;
}

.profile-form input[type="email"],
.profile-form input[type="password"],
.profile-form input[type="number"],
.profile-form input[type="text"],
.profile-form input[type="file"],
.profile-form textarea {
    font-family: Helvetica, sans-serif; 
    width: 100%;
    padding: 10px;
    margin: 8px 0 15px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.profile-form input[type="email"]:focus,
.profile-form input[type="password"]:focus,
.profile-form input[type="number"]:focus,
.profile-form input[type="text"]:focus,
.profile-form textarea:focus {
    font-family: Helvetica, sans-serif; 
    border-color: #007bff;
}

/* Profile form button styling */
.profile-form button {
    width: 100%;
    font-family: Helvetica, sans-serif; 
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.profile-form button:hover {
    font-family: Helvetica, sans-serif; 
    background-color: #0056b3;
}


/* Profile form dropdown styling */
.profile-form select {
    font-family: Helvetica, sans-serif; 
    width: 100%;
    padding: 10px;
    margin: 8px 0 15px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.profile-form select:focus {
    font-family: Helvetica, sans-serif; 
    border-color: #007bff;
}





/* Profile form styling */
.edit-form label {
    font-family: Helvetica, sans-serif; 
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 5px;
}

.edit-form input[type="email"],
.edit-form input[type="password"],
.edit-form input[type="number"],
.edit-form input[type="text"],
.edit-form input[type="file"],
.edit-form textarea {
    font-family: Helvetica, sans-serif; 
    width: 100%;
    padding: 10px;
    margin: 8px 0 15px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.edit-form input[type="email"]:focus,
.edit-form input[type="password"]:focus,
.edit-form input[type="number"]:focus,
.edit-form input[type="text"]:focus,
.edit-form textarea:focus {
    font-family: Helvetica, sans-serif; 
    border-color: #007bff;
}

/* Profile form button styling */
.edit-form button {
    width: 100%;
    font-family: Helvetica, sans-serif; 
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.edit-form button:hover {
    font-family: Helvetica, sans-serif; 
    background-color: #0056b3;
}


/* Profile form dropdown styling */
.edit-form select {
    font-family: Helvetica, sans-serif; 
    width: 400px;
    padding: 10px;
    margin: 8px 0 15px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.edit-form select:focus {
    font-family: Helvetica, sans-serif; 
    border-color: #007bff;
}

/* Shifts page specific container styling */
.shifts-container {
    font-family: Helvetica, sans-serif; 
    max-height: 500px; /* Adjust as needed */
    overflow-y: scroll;
        width: 90%;
    margin: 50px auto;
    padding: 30px;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.all-container {
    font-family: Helvetica, sans-serif; 
    max-height: auto; /* Adjust as needed */
        width: 90%;
    margin: 50px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


/* Shifts page specific container styling */
.totals-container {
    font-family: Helvetica, sans-serif; 
    max-height: auto; /* Adjust as needed */
    overflow-y: scroll;
        width: 90%;
    margin: 50px auto;
    padding: 30px;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


/* Shifts page specific container styling */
.map-container {
    font-family: Helvetica, sans-serif; 
    max-height: 750px; /* Adjust as needed */
    overflow-y: scroll;
        width: 90%;
    margin: 50px auto;
    padding: 30px;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}



/* Shifts page specific container styling */
.production-container {
    font-family: Helvetica, sans-serif; 
    max-height: 400px; /* Adjust as needed */
    overflow-y: scroll;
    width: 100%; /* Adjust as needed */
    max-width: 450px; /* Adjust as needed */
    align: left;
    margin: 50px auto;
    padding: 30px;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.summary-container {
    font-family: Helvetica, sans-serif; 
    max-height: 500px; /* Adjust as needed */
    width: 300px; /* Adjust as needed */
    align: right;
    padding: 0px;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


.worked-container {
    display: inline-block;
    text-align: left; /* Aligns text to the left */
    vertical-align: bottom; /* Aligns the element to the bottom */
}

.productions-wrapper {
    display: flex;
    flex-wrap: wrap; /* Allows the divs to wrap when they don't fit on the same line */
    gap: 20px; /* Optional: adds space between the divs */
}

.production-container {
    flex: 1 1 calc(33.333% - 20px); /* Adjust the width of each div */
    box-sizing: border-box; /* Ensure padding and border are included in the element's total width */
}


        /* Default header sizes for larger screens */
        .dynamic-h3 {
            font-size: 10px; /* Default size */
            color: blue; /* Ensure the color remains consistent */
        }

        /* Responsive adjustments for smaller screens */
        @media (max-width: 768px) {
            .dynamic-h3 {
                font-size: 6px; /* Smaller font for mobile */
            }
        }

        /* Responsive adjustments for smaller screens */
        @media (max-width: 1024px) {
            .dynamic-h3 {
                font-size: 6px; /* Adjusted size for small laptops */
            }
        }


/* Shifts page specific container styling */
.wrap-container {
    display: flex; /* Enables Flexbox */
    align-items: stretch; /* Makes all containers the same height */
    gap: 20px; /* Optional: Adds space between containers */
    font-family: Helvetica, sans-serif; 
    max-width: 90%;
        width: 90%;
    margin: 50px auto;
    padding: 0px;
    background-color: #000;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Shifts page specific container styling */
.wrap-container2 {
    display: flex; /* Enables Flexbox */
    flex-wrap: wrap; /* Allows wrapping to the next line */
    align-items: flex-start; /* Aligns items at the start of each row */
    gap: 20px; /* Adds space between items */
    font-family: Helvetica, sans-serif; 
    max-width: 80%;
    margin: auto;
    padding: 0px;
    background-color: #000;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.wrap-container2 > * {
    flex: 1 1 calc(25% - 20px); /* Four items per row with space */
    box-sizing: border-box; /* Ensures padding is included in the width */
}

/* Shifts page specific container styling */
.news-container {
    font-family: Helvetica, sans-serif; 
    max-width: 90%;
    margin: 30px auto;
    padding: 20px;
    background-color: #ffe6ff;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Shifts page header */
.shifts-header {
    font-family: Helvetica, sans-serif; 
    text-align: center;
    color: #333;
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: bold;
}

/* Shifts form styling */
.shifts-form label {
    font-family: Helvetica, sans-serif; 
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 5px;
}

.shifts-form input[type="email"],
.shifts-form input[type="password"],
.shifts-form input[type="number"],
.shifts-form input[type="text"],
.shifts-form input[type="file"],
.shifts-form textarea {
    width: 100%;
    padding: 10px;
    margin: 8px 0 15px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 10px;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.shifts-form input[type="email"]:focus,
.shifts-form input[type="password"]:focus,
.shifts-form input[type="number"]:focus,
.shifts-form input[type="text"]:focus,
.shifts-form textarea:focus {
    border-color: #007bff;
}

/* Shifts form button styling */
.shifts-form button {
    width: 100%;
    font-family: Helvetica, sans-serif; 
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 10px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.shifts-form button:hover {
    font-family: Helvetica, sans-serif; 
    background-color: #0056b3;
}



/* Specific styles for the login page */
.login-container {
    font-family: Helvetica, sans-serif; 
    max-width: 400px;
    margin: auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.warning-container {
    font-family: Helvetica, sans-serif; 
    max-width: 400px;
    margin: auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    margin-bottom: 40px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.login-form h2 {
    text-align: center;
    color: #333;
    font-size: 24px;
    margin-bottom: 20px;
    font-family: Helvetica, sans-serif; 
    font-weight: bold;
}

.login-form input[type="email"],
.login-form input[type="password"] {
    width: 100%;
    font-family: Helvetica, sans-serif; 
    padding: 12px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.login-form input[type="email"]:focus,
.login-form input[type="password"]:focus {
    font-family: Helvetica, sans-serif; 
    border-color: #007bff;
}

.login-form button {
    width: 90%;
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    font-family: Helvetica, sans-serif; 
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.login-form button:hover {
    font-family: Helvetica, sans-serif; 
    background-color: #0056b3;
}

/* Footer styling */
footer {
    position: fixed;
    bottom: 0;
    font-family: Helvetica, sans-serif; 
    left: 0;
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: white;
    text-align: center;
    font-size: 8px;
    z-index: 10;
}

/* Ensure the div is centered above the bottom */
.centered-redfooter-div {
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    position: fixed; /* Fix position relative to the viewport */
    left: 50%; /* Start at the middle of the viewport horizontally */
    bottom: 60px; /* Position 40px above the bottom of the screen */
    transform: translateX(-50%); /* Offset horizontally by half the element's width */
    padding: 5px;
    width: 80%; /* Width of the div */
    background-color: red; /* Background color */
    color: white; /* Text color */
    text-align: center; /* Center text inside the div */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: add a shadow for emphasis */
    border-radius: 8px; /* Optional: rounded corners */
}


        .icon {
            font-size: 24px;
        }
        .edit-mode .icon {
            cursor: pointer;
        }
        .edit-button, .save-button {
            margin-top: 0px;
        }


.data-container {
            background-color: white; /* White background */
	    font-family: Helvetica, sans-serif; 
    	    font-size: 10px;
            padding: 25px; /* Add some padding */
            width: 100%; /* Full width of the page */
            border-radius: 10px; /* Optional: rounded corners */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow */
            box-sizing: border-box; /* Include padding in the total width */
        }

        /* Make the table take 100% of the container's width and set fixed layout */
        table {
            width: 100%; /* Set table width to 100% */
	    font-family: Helvetica, sans-serif; 
            border-collapse: collapse; /* Collapse borders for cleaner look */
            table-layout: fixed; /* Ensure columns have fixed sizes */
        }

        th, td {
            border: 1px solid #ddd; /* Add border to table cells */
            padding: 8px; /* Add some padding for cell contents */
	    font-family: Helvetica, sans-serif; 
            text-align: left; /* Align text to the left */
            overflow: hidden; /* Hide overflow content */
            text-overflow: ellipsis; /* Add ellipsis for overflowed text */
            font-size: 10px;
        }

	p {
            font-size: 10px;
	}	   

	a {
            font-size: 10px;
	}	   

.icon-bright, .icon-shaded {
    text-align: center;
    vertical-align: middle;
    font-size: 1.2em; /* Adjust size as needed */
    text-decoration: none;
}

.icon-bright, .icon-shaded i {
    text-align: center;
    vertical-align: middle;
    font-size: 1.2em; /* Adjust size as needed */
    text-decoration: none;
    margin-right: 10px;
}

/* Mobile-friendly adjustments */
	@media screen and (max-width: 768px) {
    	.data-container p {
            font-size: 10px;
    	}

body {
    height: auto;
    font-family: Helvetica, sans-serif; 
    min-width: 1024px; /* Adjust this value to your desired base width */
    margin: 0;
    padding: 0 0 60px; /* Add padding-bottom to ensure space for footer */
    background-color: #000;
    font-size: 14px;
}
    	.data-container a {
            font-size: 10px;
    	}

        }

        /* Set fixed width for each column */
        th:nth-child(1), td:nth-child(1) { width: 10%; } /* Date */
        th:nth-child(2), td:nth-child(2) { width: 20%; } /* Name */
        th:nth-child(3), td:nth-child(3) { width: 10%; } /* Department */
        th:nth-child(4), td:nth-child(4) { width: 10%; } /* Duty */
        th:nth-child(5), td:nth-child(5) { width: 20%; } /* Location */
        th:nth-child(6), td:nth-child(6) { width: 5%; } /* Travel Start */
        th:nth-child(7), td:nth-child(7) { width: 5%; } /* In */
        th:nth-child(8), td:nth-child(8) { width: 5%; } /* Out */
        th:nth-child(9), td:nth-child(9) { width: 5%; } /* Travel End */
        th:nth-child(10), td:nth-child(10) { width: 5%; } /* Total Hours */
        th:nth-child(11), td:nth-child(11) { width: 5%; } /* Meal Allowance */
        th:nth-child(12), td:nth-child(12) { width: 5%; } /* Cell Allowance */
        th:nth-child(13), td:nth-child(13) { width: 5%; } /* Car Allowance */
        th:nth-child(14), td:nth-child(14) { width: 5%; } /* Shelter Allowance */
        th:nth-child(15), td:nth-child(15) { width: 5%; } /* Line Number */

        th {
            background-color: #f2f2f2; /* Header background color */
	    font-family: Helvetica, sans-serif; 
            font-weight: bold; /* Bold header text */
        }

        /* Optional: Add hover effect on rows */
        tr:hover {
	    font-family: Helvetica, sans-serif; 
            background-color: #f5f5f5; /* Highlight row on hover */
        }

tfoot th {
    background-color: #f2f2f2; /* Match header background color */
    font-family: Helvetica, sans-serif; /* Match font */
    font-weight: bold; /* Bold text */
    text-align: right; /* Align text for totals */
    padding: 8px; /* Optional: Add padding for better spacing */
}
tfoot td {
    background-color: #f9f9f9; /* Slightly lighter background for contrast */
    font-family: Helvetica, sans-serif; /* Match font */
    font-weight: bold; /* Bold totals */
    text-align: right; /* Align text for totals */
    padding: 8px; /* Optional: Add padding for better spacing */
}

        
.header {
    background-color: #FFD700; /* Gold background */
    font-family: Helvetica, sans-serif;
    color: black;
    padding: 10px;
    position: sticky;
    top: 0; /* Stick to the top */
    z-index: 1000; /* Ensure it stays above other content */
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow for visibility */
}


.header a {
    color: #000000;
    padding: 14px 20px;
    text-decoration: none;
    display: inline-block;
    font-weight: bold !important;
    font-family: Helvetica, sans-serif; 
}

.header a:hover {
    background-color: #a6a6a6;
    font-family: Helvetica, sans-serif; 
    font-weight: bold !important;
}


.header-left {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Aligns the items to the left */
}

.header-left a, .header-right a {
    color: #000000;
    margin-right: 15px;
    font-weight: bold !important;
    font-size: 8px;
    font-family: Helvetica, sans-serif; 
    white-space: nowrap;
}



/* Add rounded corners on hover over the logo */
.header-left a:hover {
    font-family: Helvetica, sans-serif; 
    font-size: 8px;
    border-radius: 10px; /* Adjust the value to your preference */
}

    .second-menu {
        margin-left: 100px; /* Adjust to your liking */
    margin-left: 10px; /* Space between the two menus */
    }

    .client-menu {
        margin-left: 100px; /* Adjust to your liking */
    margin-left: 10px; /* Space between the two menus */
    }

.header-right {
    text-align: right; /* Align text to the right */
    padding-right: 20px; /* Add some padding for consistent spacing */
    margin: 20px; /* Remove extra margin */
    -webkit-font-smoothing: antialiased; /* Smooth fonts in WebKit */
    color: #000000; /* Text color */
    font-weight: bold !important; /* Ensure bold text */
    font-size: 12px; /* Small font size */
    font-family: Helvetica, sans-serif; /* Font family */
    box-sizing: border-box; /* Include padding in width calculation */
    width: 100%; /* Make paragraph take the full width */
    overflow: hidden; /* Prevent overflow issues */
    white-space: nowrap; /* Prevent text wrapping */
}


/* Styling for the paragraph inside header-right */
.header-right p {
    text-align: right; /* Align text to the right */
    padding-right: 10px; /* Add some padding for consistent spacing */
    margin: 0; /* Remove extra margin */
    -webkit-font-smoothing: antialiased; /* Smooth fonts in WebKit */
    color: #000000; /* Text color */
    font-weight: bold !important; /* Ensure bold text */
    font-size: aspx; /* Small font size */
    font-family: Helvetica, sans-serif; /* Font family */
    box-sizing: border-box; /* Include padding in width calculation */
    width: 100%; /* Make paragraph take the full width */
    overflow: hidden; /* Prevent overflow issues */
    white-space: nowrap; /* Prevent text wrapping */
}


/* Dropdown styles */
.dropdown {
    position: relative;
    font-family: Helvetica, sans-serif; 
    display: inline-block;
}

/* Nested dropdown styling */
.nested-dropdown {
    display: none;
    position: absolute;
    left: 150%; /* Default: Align submenu to the right */
    top: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
}

.submenu-title:hover + .nested-dropdown,
.nested-dropdown:hover {
    display: block;
}

/* Mobile-friendly adjustments */
@media screen and (max-width: 768px) {
    .nested-dropdown {
        left: 100px; /* Aligns submenu below parent */
        top: 100%; /* Places it right below the parent menu item */
        position: absolute; /* Ensures no growth in the parent menu size */
    }
}


.dropbtn {
    color: white;
    padding: 14px 20px;
    font-size: 14px;
    font-family: Helvetica, sans-serif; 
    font-weight: bold !important;
    border: none;
    cursor: pointer;
    text-decoration: none;
}



.dropdown .dropbtn {
    border-radius: 10px; /* Rounded corners for the dropdown button */
    font-family: Helvetica, sans-serif; 
    transition: background-color 0.3s, border-radius 0.3s; /* Smooth transition */
    font-size: 14px;
}

.dropdown-content {
    border-radius: 10px; /* Rounded corners for the dropdown button */
    display: none;
    position: absolute;
    background-color: #ffffff;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    font-family: Helvetica, sans-serif; 
    font-size: 14px;
}


.dropdown-content a {
    color: black;
    font-size: 10px;
    padding: 12px 16px;
    font-family: Helvetica, sans-serif; 
    text-decoration: none;
    display: block;
    font-size: 14px;
}

.dropdown-content a:hover {
    font-family: Helvetica, sans-serif; 
    background-color: #a6a6a6;
    color: white;
    font-size: 12px;
}

.dropdown:hover .dropdown-content {
    font-family: Helvetica, sans-serif; 
    display: block;
    font-size: 12px;
}

.dropdown:hover > .dropdown-content {
    display: block;
    font-size: 12px;
}

.dropdown:hover .dropbtn {
    font-family: Helvetica, sans-serif; 
    background-color: #a6a6a6;
    border-radius: 5px; /* Maintain rounded corners on hover */
    font-size: 12px;
}

/* Filter form styling */
.filter-container {
    align: left;
    background-color: #ffffff;
    font-family: Helvetica, sans-serif; 
    font-size: 8px;
    padding: 25px;
    width: 80%;
    margin-bottom: 20px;
    margin-left: 35px;
    border-radius: 18px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.filter2-container {
    align: left;
    background-color: #ffffff;
    font-family: Helvetica, sans-serif; 
    font-size: 8px;
    padding: 25px;
    width: 20%;
    margin-bottom: 20px;
    align-items: center; /* Centers items horizontally */
    justify-content: center; /* Centers items vertically */
    padding-left: 25px;
    border-radius: 18px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


.filter-container form {
    font-family: Helvetica, sans-serif; 
    display: flex;
    font-size: 8px;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    justify-content: space-around;
}

.filter-container label {
    font-size: 8px;
    font-family: Helvetica, sans-serif; 
    margin-right: 5px;
}

.filter-container input[type="date"],
.filter-container input[type="text"] {
    padding: 8px;
    font-family: Helvetica, sans-serif; 
    font-size: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 150px;
}

.filter-container input[type="submit"],
.filter-container button {
    padding: 5px;
    background-color: #4CAF50;
    font-family: Helvetica, sans-serif; 
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.filter-container button {
    font-family: Helvetica, sans-serif; 
    background-color: #333;
    padding: 5px;
}

.filter-container button:hover,
.filter-container input[type="submit"]:hover {
    font-family: Helvetica, sans-serif; 
    padding: 5px;
    background-color: #45a049;
}

.filter-container button:disabled {
    font-family: Helvetica, sans-serif; 
    background-color: #ccc;
    padding: 5px;
    cursor: not-allowed;
}



.filter2-container button {
    align-items: center; /* Centers items horizontally */
    justify-content: center; /* Centers items vertically */
    font-family: Helvetica, sans-serif; 
    padding: 5px;
    background-color: #333;
}

.filter2-container button:hover,
.filter2-container input[type="submit"]:hover {
    font-family: Helvetica, sans-serif; 
    padding: 5px;
    background-color: #45a049;
}

.filter2-container button:disabled {
    font-family: Helvetica, sans-serif; 
    background-color: #ccc;
    padding: 5px;
    cursor: not-allowed;
}



.filter-container2 form {
    background-color: #ffffff;
    font-family: Helvetica, sans-serif; 
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.filter-container2 form label, 
.filter-container2 form input, 
.filter-container2 form button {
    font-family: Helvetica, sans-serif; 
    margin-right: 10px;
}

.filter-container2 input[type="date"],
.filter-container2 input[type="text"] {
    padding: 8px;
    font-family: Helvetica, sans-serif; 
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 150px;
}

.filter-container2 input[type="submit"],
.filter-container2 button {
    padding: 8px 12px;
    background-color: #4CAF50;
    font-family: Helvetica, sans-serif; 
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.filter2-container button {
    padding: 8px 12px;
    background-color: #4CAF50;
    font-family: Helvetica, sans-serif; 
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.h1-blue {
    font-family: Helvetica, sans-serif; 
    font-size: 2em; /* Optional: Adjusts font size */
    color: #333; /* Optional: Sets a specific color */
}    

/* Centered H1 header */
.h1-header {
    text-align: center; /* Centers the text */
    font-family: Helvetica, sans-serif; 
    font-size: 2em; /* Optional: Adjusts font size */
    margin-top: 20px; /* Optional: Adds some spacing above */
    color: #333; /* Optional: Sets a specific color */
}

.filters label, .filters input {
    font-family: Helvetica, sans-serif; 
    display: inline-block;
    margin-bottom: 10px;
}

/* Style for the user info */
.user-info {
    font-size: 14px;
    font-family: Helvetica, sans-serif; 
    font-weight: bold;
    color: #fff;
    margin-right: 20px;
}

/* Optionally, you can add some spacing to the user-info text */
.user-info span {
    font-family: Helvetica, sans-serif; 
    margin-left: 10px;
}

/* Grid layout */
.grid-view {
    display: flex;
    font-family: Helvetica, sans-serif; 
    flex-wrap: wrap;             /* Allow items to wrap if needed */
    justify-content: flex-start; /* Align items to the left */
    gap: 20px;                   /* Space between items */
    width: 100%;                 /* Ensure grid takes full width */
    box-sizing: border-box;      /* Ensure padding/margins don't break layout */
    border: 1px solid red;       /* Add border to see the grid area */
}

/* User card styling */
.user-card {
    border: 1px solid #ddd;     /* Border for user cards */
    padding: 20px;
    width: 250px;                /* Fixed card width */
    font-family: Helvetica, sans-serif; 
    border-radius: 8px;
    background-color: #f9f9f9;
    text-align: center;
    flex: 0 0 250px;             /* Ensures cards don't grow or shrink */
    box-sizing: border-box;      /* Ensure padding is inside the card */
    max-width: 250px;            /* Prevent cards from growing too wide */
    border: 1px solid blue;      /* Border for each card to inspect layout */
}


.user-card .actions {
    font-family: Helvetica, sans-serif; 
    margin-top: 10px;
}


/* Dropdown Styling */
.select-dropdown {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    font-family: Helvetica, sans-serif; 
    border-radius: 5px;
    font-size: 14px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s, background-color 0.3s;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    color: #333;
}

.select-dropdown:hover, .select-dropdown:focus {
    border-color: #007bff;
    background-color: #f0f8ff;
    outline: none;
}

/* Dropdown Arrow Icon */
.select-dropdown::after {
    content: "▼";
    font-size: 10px;
    color: #007bff;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Positioning for dropdown container */
.dropdown-container {
    position: relative;
    display: inline-block;
    width: 100%; /* Ensures it stretches across the container */
    margin-bottom: 15px; /* Adjust for spacing between form elements */
}

/* Optional: Center text alignment */
.select-dropdown option {
    text-align: left;
    padding: 8px;
}


/* Mobile Responsiveness - Main Media Query */
@media (max-width: 768px) {
    /* Remove min-width constraint on mobile */
    body {
        min-width: auto;
        overflow-x: hidden;
        font-size: 14px;
    }
    
    /* Force mobile viewport */
    html {
        overflow-x: hidden;
    }
    
    /* Make all containers responsive */
    .container, .container2, .all-container, .totals-container, 
    .map-container, .shifts-container, .profile-container, 
    .edit-container, .wrap-container, .wrap-container2, .news-container {
        width: 95%;
        max-width: 100vw;
        margin: 10px auto;
        padding: 15px;
        box-sizing: border-box;
    }
    
    /* Responsive Header Navigation */
    .header {
        flex-direction: column;
        padding: 5px;
        height: auto;
    }
    
    .header-left {
        width: 100%;
        justify-content: center;
        margin-bottom: 10px;
    }
    
    .header-left a {
        font-size: 10px;
        padding: 8px 12px;
        margin-right: 8px;
    }
    
    .header-right {
        width: 100%;
        text-align: center;
        padding-right: 0;
        font-size: 10px;
    }
    
    /* Compact dropdowns for mobile */
    .dropdown {
        display: inline-block;
        margin-right: 5px;
    }
    
    .dropdown-content {
        min-width: 140px;
        font-size: 11px;
    }
    
    .dropdown-content a {
        font-size: 10px;
        padding: 8px 12px;
    }
    
    /* Mobile-specific header fixes */
    .header img {
        height: 60px;
        width: auto;
        max-width: 120px;
    }
    
    /* Prevent horizontal scrolling on mobile */
    body {
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    /* Make all data containers responsive */
    .data-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .data-container table {
        min-width: 600px;
    }
    
    /* Prevent any potential horizontal overflow */
    * {
        box-sizing: border-box;
    }
    
    html, body {
        max-width: 100vw;
        overflow-x: hidden;
    }
}

.logo-container {
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px; /* Reduce this value to bring the logo closer */
}

.logo {
    max-width: 100%;
    height: auto;
    width: 300px; /* Adjust as needed */
}

/* Remove underlines from links */
.no-underline {
    text-decoration: none;
}

/* Ensure proper spacing between icons */
.no-underline i {
    margin-right: 10px;
}

/* Highlight today's column in light blue */
.today-header {
    background-color: #e6f7ff; /* Light blue */
}

/* Highlight tomorrow's column in light faded yellow */
.tomorrow-header {
    background-color: #fff9e6; /* Light faded yellow */
}
    .name-link {
        text-decoration: none; /* Removes underline */
        color: inherit; /* Keeps default text color */
        cursor: pointer; /* Changes cursor on hover */
    }
    .name-link:hover {
        color: blue; /* Optional: change color on hover */
    }
    .double-booked {
        background-color: #ffcccc; /* Light red color */
    }

.flash-red {
  color: red;
  animation: flash 1s infinite;
}

@keyframes flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}