/* General styles */
body {
    font-family: 'Montserrat';
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* Stack elements vertically */
    height: 100vh;
}



/* Main container that now stacks the sidebar on top and content below */
.main-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.sidebar {
    width: 100%;
    background-color: #003e49;
    color: #fff;
    padding: 15px;
    padding-top: 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.logo img {
    max-width: 200px;
    margin-right: 30px;
    /* Space after logo if needed */
}

/* Sidebar link styles placed horizontally */
.sidebar ul {
    list-style: none;
    padding: 30px;
    margin: 0;
    /* Reset margin to avoid centering issues */
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Space buttons evenly within the container */
    width: 90%;
    /* Ensure ul spans the entire width of the .sidebar */
}

.sidebar .main-heading {
    font-family: 'Montserrat';
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    text-decoration: none;
}

.sub-heading-dashboard {
    font-family: 'Montserrat';
    font-size: 18px;
    font-weight: bold;
    margin: 1px 0 0 0;

    /* Ensure it spans the full width */
    padding-left: 15px;
    /* Optional for better spacing */
    border-top: 1px solid #fff;
    /* White line above the sub-heading */
    background-color: #003e49;
    color: #2db8c5;
    /* Optional spacing if needed */
}

.timesheetH2 {
    background-color: #767260;
    color: #c3ff3a;
    padding: 10px;
    margin: 0px;
}

.expensesH2 {
    background-color: #643e50;
    color: #ff8ee5;
    padding: 10px;
    margin: 0px;
}

.leaveH2 {
    background-color: #272727;
    color: #ff9439;
    padding: 10px;
    margin: 0px;
}

.sidebar ul li a {
    font-family: 'Montserrat';
    font-size: 20px;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    color: #ccc;
}

.sidebar ul li.dashboard a {
    color: #2db8c5;
    font-weight: bold;
    font-family: 'Montserrat';
}

.sidebar ul li.timesheet a {
    color: #c3ff3a;
    font-weight: bold;
    font-family: 'Montserrat';

}

.sidebar ul li.expense a {
    color: #ff8ee5;
    font-weight: bold;
    font-family: 'Montserrat';
}

.sidebar ul li.leave a {
    color: #ff9439;
    font-weight: bold;
    font-family: 'Montserrat';
}

.sidebar ul li.admin a {
    color: #ccc;
    font-weight: bold;
    font-family: 'Montserrat';
}

.sidebar ul li.logout a {
    color: #ccc;
    font-weight: bold;
    font-family: 'Montserrat';
}

.sidebar ul li a:hover {
    background-color: #000000;
}

/* Align the h2 and ul in a single row */
.expenses-container {
    display: flex;
    align-items: center;
    /* Align items vertically */
    gap: 20px;
    /* Add spacing between the h2 and ul */
    background-color: #643e50;
    color: #ff8ee5;
    padding: 10px;
    margin-top: 1px;
}


/* Style for the ul in expenses */
.expenses-container ul {
    list-style: none;
    /* Remove default bullet points */
    margin: 0;
    padding: 0;
    display: flex;
    /* Align list items in a row */
    gap: 15px;
    /* Add spacing between list items */
}

/* Style for the expense links */
.expenses-container ul li.expense a {
    font-size: 20px;
    font-family: 'Montserrat';
    /* Match sidebar font size */
    padding: 15px;
    /* Match sidebar padding */
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    color: #ff8ee5;
    /* Match sidebar color */
    font-weight: bold;
}

/* Add hover effect for consistency */
.expenses-container ul li.expense a:hover {
    background-color: #e6e6e6;
    /* Optional hover effect */
    color: #ff66cc;
    /* Darker shade for hover */
}

.timesheet-container {
    display: flex;
    align-items: center;
    /* Align items vertically */
    gap: 20px;
    /* Add spacing between the h2 and ul */
    background-color: #767260;
    color: #c3ff3a;
    padding: 10px;
    margin-top: 1px;
}

.leave-container {
    display: flex;
    align-items: center;
    /* Align items vertically */
    gap: 20px;
    /* Add spacing between the h2 and ul */
    background-color: #272727;
    color: #ff9439;
    padding: 10px;
    margin-top: 1px;
}


/* Style for the ul in leave-container */
.leave-container ul {
    list-style: none;
    /* Remove default bullet points */
    margin: 0;
    padding: 0;
    display: flex;
    /* Align list items in a row */
    gap: 15px;
    /* Add spacing between list items */
}

/* Style for the leave links */
.leave-container ul li.leave a {
    font-family: 'Montserrat';
    font-size: 20px;
    /* Match sidebar font size */
    padding: 15px;
    /* Match sidebar padding */
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    color: #ff9439;
    /* Text color for leave links */
    background-color: #272727;
    /* Optional background for links */
    font-weight: bold;
}

/* Add hover effect for leave links */
.leave-container ul li.leave a:hover {
    background-color: #000000;
    /* Darker shade for hover effect */
    color: #ff9439;
    /* Slightly brighter text color on hover */
}

.leave-dashboard {
    display: flex;
    flex-direction: row;
    margin: 20px;
}

/* Calendar container styling */
#leave-calendar {
    flex: 3;
    /* Takes more space */
    min-width: 1000px;
    height: 600px;
    /* Adjust height as needed */
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    background-color: #fff;
}

/* Leave summary container styling */
#leave-summary {
    flex: 0.5;
    /* Takes less space */
    min-width: 250px;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Leave Summary Table Styling */
.leave-summary-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
}

.leave-summary-table th,
.leave-summary-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

/* Content area fills remaining space below the top bar */
.content {
    flex: 1;
    padding: 20px;
    background-color: #fff;
    overflow-y: auto;
}

h1 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

/* Form group styles for all forms */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: #555;
}

.form-group input,
.form-group select,
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.week-navigation {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 15px;
}

.week-nav-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.button-style {
    padding: 10px;
    background-color: #003e49;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    font-family: 'Montserrat';
}

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

#week-ending {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
    font-family: 'Montserrat';
}

/* Table styles */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

table thead {
    background-color: #007bff;
    color: #fff;
}

table th,
table td {
    padding: 10px;
    text-align: center;
    border-top: 1px solid #ddd;
    /* Add top border */
    border-bottom: 1px solid #ddd;
    /* Add bottom border */
    border-left: none;
    /* Remove left border */
    border-right: none;
    /* Remove right border */
}

table th {
    font-family: 'Montserrat';
    font-weight: bold;
    background-color: #003e49;
    border-left: none;
    /* Remove left border */
    border-right: none;
    /* Remove right border */
}

table td select,
table td input,
table td textarea {
    width: 100%;
    padding: 5px;
    border: 1px solid #ddd;
    /* Retain input-specific borders */
    border-radius: 4px;
    box-sizing: border-box;
    text-align: center;
}

/* Remove outer table borders if needed */
table {
    border: none;
}


textarea {
    resize: none;
    text-align: left;
}

/* Button styles */
button {
    width: auto;
    height: auto;
    min-height: 50px;
    padding: 5px 10px;
    background-color: #003e49;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 10px;
    line-height: normal;

    white-space: nowrap;
}

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

#weekly-timesheet-form {
    display: flex;
    flex-direction: column;
}

#copy {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

/* Leave section: balance and form side by side */
.leave-section {
    display: flex;
    gap: 20px;
    /* Space between the two sections */
    align-items: flex-start;
}

.leave-section h2 {
    color: #ff9439;
}

.leaveOh2 {
    color: #ff9439;
}

/* Leave Balance Box */
.leave-balance-box {
    flex: 1;
    /* Take up equal space */
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
}

/* Leave Balance Box Styling */
.leave-balance-box {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.leave-balance-box h2 {
    color: #ff9439;
}

.balance-row label {
    font-weight: bold;
    text-align: left;
    /* Align text to the left */
    padding-top: 10px;
    font-family: 'Montserrat';
}

.balance-row output {
    text-align: left;
    font-family: 'Montserrat';
    /* Align output to the right */
    font-size: 16px;
    font-weight: bold;
    color: #333;
    background-color: #fff;
    /* Optional background for output */
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 10px;
    display: block;
    /* Ensures outputs are styled as boxes */
}


/* Leave Request Form Box */
.leave-request-form-box {
    flex: 1;
    /* Take up equal space */
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #272727;
    color: #ff9439;
}

.form-group label {
    font-family: 'Montserrat';
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #ff9439;
}

.leave-request-form-box h2 {
    margin-bottom: 15px;
    color: #ff9439;
}

#button-row {
    display: flex;
    flex-direction: row;
}

.submit-button {
    margin-left: auto;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

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

#add-row-button {
    margin-right: auto;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.timesheet-button {
    background-color: #c3ff3a;
    color: #000000;
}

.expense-button {
    background-color: #643e50;
    color: #ff8ee5;
}

.leave-button {
    color: #272727;
    /* Text color for leave links */
    background-color: #ff9439;
}

.cancel-btn {
    color: #ff9439;
    /* Text color for leave links */
    background-color: #272727;
}

#download-button {
    margin-right: auto;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#download-pdf-button {
    margin-right: auto;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
#download-word-button {
            margin-right: auto;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

#copy-timesheet-button,
#copy-next-week-button {
    margin-right: 10px;
}

.spinner-container {
    display: none;
    /* Hidden by default */
    align-items: center;
    justify-content: center;
    margin-left: 10px;
}

.spinner {
    border: 4px solid #ccc;
    border-top: 4px solid #333;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Total hours display */
.total-hours {
    font-family: 'Montserrat';
    margin-top: 20px;
    font-size: 18px;
    text-align: right;
}

/* Login container styles */
.login-container {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 60%;
    width: 100%;
    margin: auto;
    align-self: center;
}

.loginbackground {
    background-image: url('login.jpg');
    background-size: cover;
    /* Optional: Ensures the image covers the entire area */
    background-repeat: no-repeat;
    /* Optional: Prevents the image from repeating */
    background-position: center;
    /* Optional: Centers the image */
}

#login-form {
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
}

.logintoprow {
    display: flex;
    /* Use flexbox to arrange items in a row */
    justify-content: space-between;
    /* Place images at either end */
    align-items: center;
    /* Center items vertically within the row */
    padding: 20px;
    /* Optional: Add some padding to the entire row */
}

.logintoprow .solomonslogo img,
.logintoprow .sycnlogo img {
    max-width: 150px;
    /* Ensure images scale properly */
    height: auto;
    /* Maintain aspect ratio */
}

#login-form H1 {
    color: #003e49;
}

.forgot-password {
    margin-top: 10px;
}

.loginbottombox {
    padding: 10px;
    background-color: #003e49;
}

/* Login header style */
.login-container h1 {
    text-align: left;
    margin-bottom: 15px;
    color: #333;
}

/* Responsive design */
@media (max-width: 1200px) {
    .login-container {
        padding: 15px 20px;
    }

    .sidebar {
        padding: 10px;
    }

    .logo img {
        max-width: 100px;
    }

    .sidebar .main-heading {
        font-size: 12px;
    }

    .sidebar ul li a {
        font-size: 12px;
        padding: 6px;
    }

    .sidebar .main-heading {
        font-size: 16px;
        font-weight: bold;
        margin: 0 15px 0 0;
        /* Optional spacing if needed */
    }
}

/* Modal styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Status Table Styles */
#timesheet-status-table {
    width: 100%;
    border-collapse: collapse;
}

#timesheet-status-table th {
    border-left: none;
    /* Remove left border */
    border-right: none;
    /* Remove right border */
}

#timesheet-status-table td {
    border: 1px solid #ccc;
    padding: 8px;
    border-top: 1px solid #afafaf;
    /* Add top border */
    border-bottom: 1px solid #afafaf;
    /* Add bottom border */
    border-left: none;
    /* Remove left border */
    border-right: none;
    /* Remove right border */
}

#timesheet-status-table th {
    background-color: #003e49;
}

/* Unsubmitted timesheet row */
.unsubmitted-row {
    background-color: #f8d7da;
}

/* Submitted timesheet row */
.submitted-row {
    background-color: #fff3cd;
}

/* Approved timesheet row */
.approved-row {
    background-color: #d4edda;
}

/* Default row */
.default-row {
    background-color: #ffffff;
}

/* Content styling remains */
.content {
    flex-grow: 1;
    padding: 20px;
}

/* Side-by-side container for Timesheets and Expenses */
.side-by-side-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

#timesheets-section,
#expenses-section {
    width: 100%;
}

#expenses-edit {
    width: 100%;
}

thead {
    background-color: #f1f1f1;
}

.custom-report-container {
    background-color: rgb(170, 169, 169);
    padding: 20px;
    margin: 20px 0;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.filter-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.filter-container label {
    flex: 1 1 200px;
    font-weight: bold;
}

.filter-container input,
.filter-container select {
    flex: 1 1 300px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}


.content>div:not(:last-child) {
    margin-bottom: 20px;
}


@media (max-width: 768px) {
    .sidebar {
        padding: 10px;
    }

    .logo img {
        max-width: 100px;
    }

    .sidebar .main-heading {
        font-size: 14px;
    }

    .sidebar ul li a {
        font-size: 12px;
        padding: 6px;
    }
}



/* Style for the checkbox input with a 50px offset (right margin) */
.no-expenses-form-group[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 50px;
    /* 50px offset from the label */
    cursor: pointer;
}

/* Style for the label next to the checkbox */
.no-expenses-form-group {
    font-size: 1rem;
    color: #333;
}