/* Primary Colors: #073857, #4E91DD, #A13764, #7D9099, #FCFCFC
Secondary Colors: #32C3A4, #DADADA, #2F63A0, #484848
Conditional Formatting Colors: #2C707E, #D1A34F, #E34A46 */


/*       -------- GENERAL - BODY   ---------  */

html,
body {
    height: 100%;
}


body {
    font-family: 'Helvetica', sans-serif;
    /* background-color: #f7f7f7; */
    color: #073857;
    margin: 0;
    padding: 0;
    /* Subtle light grey background for the entire page */
}


main {
    min-height: 100%;
    padding-top: 65px;
    /* Adjust this based on the height of your header */
    padding-bottom: 30px;
    /* This should be equal to or larger than your footer's height */
    padding-left: 10px;
    box-sizing: border-box;
}


h2 {
    color: #164e6d;
    /* Teal color for h2 headings */
}

h3 {
    color: #008282;
    /* Blue color for h3 headings */
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

p{
    font-size: 1.17em;
}

.loading-indicator {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner {
    border: 5px solid #f3f3f3;
    border-radius: 50%;
    border-top: 5px solid #3498db;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

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

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



/*     ---------    HEADER    ---------*/


.header-border {
    border-bottom: 1px solid #9E9E9E;
    /* Grey line with color #9E9E9E */
}


header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: white;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.header-content {
    display: flex;
    align-items: center;
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    /* Adjusted padding for top and bottom */
}

.header-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-right: 20px;
}

.logo {
    height: 65px;
    margin-right: 10px;
    /* Space between logo and company name */
}

.company-name {
    font-size: 24px;
    font-weight: bold;
    color: #164e6d;
    white-space: nowrap;
}

.header-menu {
    width: 100%;
    display: flex;
    justify-content: center;
}



/*      ---------    HEADER USER MENU    ---------    */

/* Common styles for both icon wrappers */
.icon-wrapper {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-right: 15px;
    /* Adjust spacing as needed */
}

.header-user {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Align the user icon to the right */
    padding-right: 30px;
    /* Add some spacing to the right edge */
}


.user-icon {
    height: 25px;
    width: 25px;
}


/* Help Icon Styles */
.help-icon {
    height: 25px;
    width: 25px;
}


/* Dropdown Content */
.dropdown-content {
    display: none;
    /* Hidden by default */
    position: absolute;
    background-color: #f9f9f9;
    min-width: 250px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    top: 100%;
    left: 0;
}

/* Dropdown Link Styles */
.dropdown-content a {
    color: #073857;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change dropdown links color on hover */
.dropdown-content a:hover {
    background-color: #ddd;
}


/* Dropdown Content Left-aligned */
.dropdown-content-left {
    display: none;
    /* Hidden by default */
    position: absolute;
    background-color: #f9f9f9;
    min-width: 200px;
    /* Adjust width as necessary */
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    top: calc(100% + 0px);
    right: 0;
    /* Align dropdown to the right of the icon */
    left: auto;
    /* Overrides the previous left alignment */
}

/* Apply same link styles as .dropdown-content */
.dropdown-content-left a {
    color: #164e6d;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Hover effect for links in .dropdown-content-left */
.dropdown-content-left a:hover {
    background-color: #ddd;
}


.icon-wrapper:hover .dropdown-content-left {
    display: block;
}

.extended-icon-wrapper {
    display: flex;
    align-items: center;
    padding-bottom: 0x;
    /* Or set a fixed height larger than the icon */
}



/*        ---------     HEADER MENU     ---------   */

#topMenu {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center menu items */
}

#topMenu ul {
    display: flex;
    justify-content: center;
    /* Center the list items */
    width: 100%;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#topMenu li {
    display: inline-block;
    /* Displays list items inline */
    margin-right: 20px;
    /* Space between menu items */
    position: relative;
    margin: 0 10px;
    /* Space between menu items */
}

#topMenu a {
    color: #164e6d;
    /* Default color: Blue */
    text-decoration: none;
    padding: 10px 15px;
    display: block;
}

#topMenu a:hover {
    text-decoration: underline;
    /* Hover effect */
}

#topMenu a.active {
    color: #008282;
    /* Active color: Teal */
    /*  border-bottom: 3px solid #008282; */
    /* Thicker bottom border for active item */
    /* padding-bottom: 7px; */
    /* Adjust padding to align with the header border */
}

#topMenu a.active::after {
    content: '';
    /* Required for pseudo-elements */
    position: absolute;
    bottom: -15px;
    /* Adjust this to align with the header's grey line */
    left: 0;
    width: 100%;
    height: 3px;
    /* Thickness of the colored line */
    background-color: #008282;
    /* Color of the line */
}

/* Style for active dropdown menu item */
#topMenu .dropdown.active a.dropbtn {
    color: #008282;
    /* Change text color to Teal (or any color you prefer) */
    /* Additional styles to match your design, such as underlining or border adjustments */
}

#topMenu .dropdown.active a.dropbtn::after {
    content: '';
    /* Required for pseudo-elements */
    position: absolute;
    bottom: -15px;
    /* Adjust this to align with your design */
    left: 0;
    width: 100%;
    height: 3px;
    /* Thickness of the colored line */
    background-color: #008282;
    /* Color of the line to indicate active state */
}


/* TOP MENU Dropdown Content (Hidden by default) */

.dropdown {
    position: relative;
    /* Ensure the dropdown is positioned relative to this container */
}

/* Dropdown Button */
.dropbtn {
    background-color: inherit;
    color: #164e6d;
    /* Adjusted to blue for visibility */
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* Static visibility for dropdown content for testing */



/*      ---------     FOOTER     ---------*/
footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #f1f1f1;
    /* Footer background color */
    text-align: center;
    height: 30px;
    /* Footer height */
    line-height: 0px;
    /* Line height for vertical centering */
    padding: 0;
    border: none;
    font-size: 16px;
    /* Adjust font size as needed */
    box-sizing: border-box;
    /* Ensures padding and border are included in the height */
}






/*        ---------    GENERAL - LINKS     ---------  */

a {
    color: #164e6d;
    /* Blue color for links */
    text-decoration: none;
    /* Optional: removes underline from links */
}

a:hover,
a:focus {
    color: #122d42;
    /* Darker blue for hover/focus states */
    text-decoration: underline;
    /* Optional: adds underline on hover/focus */
}




/*     ---------      BASE.HTML    ---------    */
#home-introduction .intro-container {
    max-width: 600px;
    /* Adjust as needed */
    margin: 0 auto;
    /* Centers the container */
    text-align: center;
    /* Center aligns the text */
    padding: 20px;
    /* Adds some padding around the text */
}



/* Additional styling for the nav bar */
#topMenu {
    background-color: white;
    text-align: center;
}






/*       -------------   TABLES    ------------- */



.dataTables_wrapper {
    margin-top: 0px;
    /* Adjust as needed */
}

.dataTables_wrapper th {
    color: white;
    /* Text color */
    background-color: #008282;
    /* Background color */
    /* Additional styles as needed */
}

#runbookTable.dataTable {
    padding-top: 10px;
    /* Adjust the top margin as needed */
}


.details {
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    /* margin-bottom: 20px; */
}

.details strong {
    font-weight: bold;
}

table {
    width: auto;
    border-collapse: collapse;
    table-layout: auto;
}

th,
td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    min-width: 5px;
    /* Adjust minimum width as needed */
    max-width: 350px;
    /* Adjust maximum width as needed */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

th {
    max-width: 300px;
    /* Maximum width for headers */
    vertical-align: top;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

.column-header-teal {
    color: white;
    /* Text color */
    background-color: #008282;
    /* Background color */
}

.teal-header-table th {
    color: white;
    /* Text color */
    background-color: #008282;
    /* Background color */
}

.column-header-teal-large {
    /* For Activity Name */
    min-width: 200px;
    max-width: 200px;
}

.column-header-standard {
    min-width: 130px;
    max-width: 130px;
}

.column-header-large {
    /* For Activity Name */
    min-width: 220px;
    max-width: 220px;
}

.column-header-datetime {
    /* For Planned Start/End */
    min-width: 125px;
    max-width: 125px;
}

.column-header-status {
    /* For Status Start/End */
    min-width: 90px;
    max-width: 90px;
}

.column-header-task {
    /* For Status Start/End */
    min-width: 100px;
    max-width: 100px;
}

#activity-overview tr {
    background-color: #fff;
    /* Override the alternating row colors */
}

#activity-overview {
    margin-bottom: 20px;
    /* Adjust the value as needed */
}

.domain-SalesAccount {
    background-color: #fcbad3;
}

/* Pastel Pink */
.domain-PPA {
    background-color: #a7e9af;
}

/* Pastel Green */
.domain-Commerce {
    background-color: #ace7ef;
}

/* Pastel Blue */
.domain-Procurement {
    background-color: #fddba7;
}

/* Pastel Orange */
.domain-FleetOps {
    background-color: #f9cb9c;
}

/* Pastel Coral */
.domain-Finance {
    background-color: #ffd1dc;
}

/* Pastel Rose */
.domain-Generic {
    background-color: #d6e0f0;
}

/* Pastel Light Blue */
.domain-DX {
    background-color: #fde2e4;
}

/* Pastel Pinkish */

/* Default alternating row colors */
tr:nth-child(odd) {
    background-color: #f2f2f2;
    /* Light grey for odd rows */
}

tr:nth-child(even) {
    background-color: #ffffff;
    /* White for even rows */
}



.hour-column {
    width: 5px !important;
    margin: 0;
    padding: 0 !important;
    text-align: center;
    font-weight: normal;
    font-size: 13px;
    overflow: hidden;
    writing-mode: tb-rl;
    /* Rotates the text */
    transform: rotate(-180deg);
    /* Adjust as necessary */
}


.actual-start-column,
.actual-end-column {
    min-width: 133px;
    /* Adjust this value as needed */
    max-width: 300px;
    /* Adjust this value as needed */
}



.expandable {
    cursor: pointer;
    overflow: hidden;
    -webkit-line-clamp: 2;
    /* Show 2 lines initially */
    -webkit-box-orient: vertical;
    max-width: 150px;
    /* Initial max width */
    word-wrap: break-word;
    /* Enable word wrapping */
}

.task-name {
    max-width: 300px;
    /* Default width for Task Name */
}

.predecessor {
    max-width: 103px;
    /* Default width for Task Name */
}

.responsible_resource {
    max-width: 125px;
    /* Default width for Task Name */
}

.expanded {
    -webkit-line-clamp: unset;
    /* Show all lines on expansion */
    min-width: 300px;
    max-width: 700px;
    /* Max width when expanded */
    max-height: none;
    /* Removes height restriction when expanded */
    white-space: normal !important;
}

td.expanded .form-edit textarea {
    width: 290px !important;
    /* Adjust width, accounting for the icon */
    box-sizing: border-box;
    /* Include padding and border in the element's total width */
}

.expanded .remarks-text {
    white-space: normal !important;
    /* Allow wrapping */
}

.expanded .task-name-text {
    white-space: normal !important;
    /* Override to allow wrapping */
    max
}



.remarks-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: calc(100% - 20px);
    /* Adjust as needed to leave space for the icon */
    display: inline-block;
}

.remarks-display textarea {
    border: none;
    background-color: transparent;
    /* Hide the textarea in display mode */
    resize: none;
    /* Prevent resizing in display mode */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
    display: inline-block;
}



.task-name-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
    /* Use the full width of the column */
    display: inline-block;
}


.predecessor-text {
    /* Your CSS styles here */
    max-width: 50px;
    /* adjust as needed */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.form textarea {
    width: 100%;
    /* Adjust width as needed */
    resize: vertical;
    /* Allow vertical resizing only */
}

.form button {
    display: block;
    /* Ensure button appears below the textarea */
    margin-top: 5px;
    /* Add a small space above the button */
}

.form-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-display textarea,
.form-display input {
    border: none !important;
    background-color: transparent;
}

.form-edit {
    display: none;
    /* display: block; */
    /* Use flex layout */
}

/* Show text box with standard styling in edit mode */
.form-edit textarea {
    border: 1px solid #cc;
    /* Example border style c */
    background-color: white;
    color: #073857;
    /* Ensure text color is visible */
    resize: vertical;
    /* Allow vertical resizing */
    height: auto;
    /* Auto height based on content */
    width: calc(100% - 40px);
    /* Adjust width to leave space for the icon */
    box-sizing: border-box;
    /* Include padding and border in the element's total width */
    resize: vertical;
    /* Allow only vertical resizing */
    min-height: 80px;
    /* Minimum height of the textarea */
    overflow: auto;
    /* Add scroll if text exceeds the area */
}

/* Button adjustments */
.form-edit button {
    flex-shrink: 0;
    /* Prevent the button from shrinking */
    /* Other button styles if necessary */
}

.status-column {
    min-width: 110px;
    /* Adjust this value as needed */
    max-width: 200px;
    /* Adjust this value as needed */
    padding: 0px 0px 0px 8px !important;
}


.status-dropdown {
    -webkit-appearance: none; /* For WebKit browsers */
    -moz-appearance: none;    /* For Mozilla browsers */
    appearance: none;         /* Standard syntax */
    background-color: transparent; /* Adjust if your row has a specific background color */
    border: none;             /* Removes the border */
    padding: 0px 0px !important;           /* Adjust padding to only show the dropdown arrow */
    cursor: pointer;          /* Changes the cursor to indicate it's clickable */
    font-family: inherit;     /* Optional: ensures the font matches the rest of the table */
    font-size: inherit;       /* Optional: ensures the font size matches the rest of the table */
    color: inherit;           /* Optional: ensures the text color matches the rest of the table */
}

.status-dropdown-edit {
    display: block; /* Ensure the status dropdown is always visible */
    padding: 0px !important;
}


/* Custom arrow - you can use a background image for the arrow */
.status-dropdown {
    background-image: url('../images/arrow_down.webp');
    background-repeat: no-repeat;
    background-position: right center; /* Positions the arrow to the right */
    background-size: 12px; /* Adjust the size of your arrow image */
}

/* Hide the default arrow for Firefox */
.status-dropdown::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* Display flex layout when in edit mode */
.edit-mode .form-edit {
    display: flex;
    /* Use flex layout */
    align-items: center;
    /* Align items vertically in the center */
    gap: 10px;
    /* Space between textarea and button */
}

.edit-mode .form-display {
    display: none;
}

.edit-mode .form-edit textarea {
    flex-grow: 1;
    /* Let the textarea grow to fill available space */
}

.edit-mode .form-edit button {
    flex-shrink: 0;
    /* Prevent the button from shrinking */
}

.icon-small {
    font-size: 0.8em !important;
    /* 800% of the original size */
}

.zero-duration {
    color: red;
}

.attention {
    color: orange !important;
}

.red-text {
    color: red !important;
}

.overdue {
    color: #d14545 !important;
}

.blue-text {
    color: #008282 !important;
}

.activity-blue {
    color: #164e6d;
    /* Text color */
    background-color: #164e6d;
    /* Background color */
}

.activity-teal {
    color: #008282;
    /* Text color */
    background-color: #008282;
    /* Background color */
}


.fixedHeader-floating {
    position: fixed !important;
    top: 65px !important;
    z-index: 102;
    /* Ensure it's above other elements */
}

/* Subtle light pastel blue for status In Progress */
.row-pastel-blue {
    background-color: #e0f7fa !important;
    /* Light pastel blue */
}

/* Subtle light green for rows where both statuses are 'Done' */
.row-pastel-green, .row-pastel-green.odd, .row-pastel-green.even{
    background-color: #e6f4ea !important;
    /* Light pastel green */
}

/* Current Task Highlighting */
.row-highlight-current {
    background-color: #fff3e0 !important;
    /* Light pastel orange for current tasks */
}


#runbookTable tr.odd {
    background-color: #fafafa;
    /* Your color for odd rows */
}

#runbookTable tr.even {
    background-color: #f0f0f0;
    /* Your color for even rows */
}

#runbookTable th {
    background-color: #008282;
    /* Your color for even rows */
}

#runbookTable .fixedHeader-floating {
    background-color: #008282 !important;
}





/* RUNBOOK - FILTER + DROPDOWN Container for both filters and search box */


.filter-row {
    display: flex;
    align-items: center;
    /* Align items vertically */
    justify-content: flex-start;
    /* Align items to the left */
    gap: 10px;
    /* Spacing between each item */
    margin-bottom: 1em;
    /* Optional: Bottom margin */
}

/* Individual filter container */
.filter-container {
    flex-grow: 0;
    /* Prevent filters from growing */
    margin-right: 10px;
    /* Space between filters */
    max-width: 150px;
    /* Maximum width for each filter container */
}

.filter-container select {
    width: 100%;
    /* Make the select box fill the container */
    overflow: hidden;
    /* Hide overflowing content */
    text-overflow: ellipsis;
    /* Add ellipsis for overflowed text */
}


/* Button for Expending columns */
.toggle-button-container {
    margin-right: 10px;
    /* Spacing between button and the first filter */
}


#toggleColumnsBtn {
    background-color: #164e6d;
    /* Your blue color */
    color: white;
    /* Text color */
    border: none;
    /* Remove default border */
    padding: 6px 12px;
    /* Adjust padding as needed */
    border-radius: 4px;
    /* Rounded corners */
    cursor: pointer;
    /* Cursor style on hover */
}

#toggleColumnsBtn:hover {
    background-color: #133b57;
    /* Slightly darker shade for hover effect */
}


/* Search box styling */
#searchBox {
    flex-grow: 1;
    /* Allow the search box to fill up the remaining space */
    /* Additional styling for the search box */
}

/* Hide the default DataTable Search box styling */
.dataTables_filter {
    display: none;
}


.total-row td {
    font-weight: bold;
}




/*       ----------   FORMS    ----------     */



.form-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.form-row label {
    font-weight: bold;
    font-size: 16px;
    margin-right: 10px;
}

.form-row select,
.form-row input {
    margin-right: 10px;
    padding: 0.375rem 0.75rem;
    /* Increase padding to match the button */
    font-size: 1rem;
    /* Adjust font size to match the button */
    border-radius: 0.25rem;
    /* Optional: to match button's rounded corners */
    height: 30px;
    /* Adjust height to match button */
    margin-bottom: 0
}

.form-inline {
    display: flex;
    align-items: center;
}

.form-group {
    margin-right: 10px;
    /* Adjust as needed */
}

/* Specific styles for the button */
.form-row button {
    background-color: #008282;
    color: white;
    border: 1px solid #008282;
    padding: 0.375rem 0.75rem;
    line-height: 1;
    border-radius: 0.25rem;
    font-size: 1rem;
    cursor: pointer;
    height: 30px;
    /* Maintain explicit height */
    align-self: center;
    /* Align the button to the center of the flex container */
    margin-bottom: 0;
    /* Remove any additional bottom margin */
}


/* Adjust the size of the checkbox */
.form-check-input {
    width: 20px;   /* Or any size you prefer */
    height: 20px;  /* Or any size you prefer */
    margin-top: 0.3rem;
    margin-left: 0;
    vertical-align: middle;
}

/* Align the text of the label with the checkbox */
.form-check-label {
    margin-left: 30px;  /* Adjust as necessary */
    vertical-align: middle;
    padding-top: 4px;
}

/* Ensure the form check is aligned properly */
.form-check {
    align-items: center;  /* Aligns the checkbox and label on the center line */
    padding-left: 0;
}



/*   -----   LOGON and PWD Reset    -----   */

.centered-button {
    display: block; /* Allows margin to auto to actually center the element */
    min-width: 150px;
    width: auto; /* Auto width based on content */
    padding: 3px 30px; /* Adjust padding as needed */
    margin: 10px auto; /* Top and bottom margins and auto side margins for centering */
    text-align: center; /* Center the text inside the button */
}


.login-container {
    max-width: 400px;
    /* Adjust the maximum width as needed */
    margin: auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.login-container h2 {
    text-align: center;
}

.login-container form {
    display: flex;
    flex-direction: column;
}

.login-container form button {
    margin-top: 10px;
}

.password-reset-container,
.password-reset-done-container,
.password-reset-confirm-container,
.password-reset-complete-container {
    max-width: 500px;
    margin: auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.password-reset-container h2,
.password-reset-done-container h2,
.password-reset-confirm-container h2,
.password-reset-complete-container h2 {
    text-align: center;
}

form {
    display: flex;
    flex-direction: column;
}

form button {
    margin-top: 10px;
}



.error {
    color: red;
    text-align: center;
    margin-bottom: 10px;
}


/*     ----------  ADMIN FORMS   --------- */
/*     ----------  Upload CSV    --------- */
/*     ----------  Populate Load stats   --------- */
/*     ----------  COPY Runbook   --------- */


.form-container {
    max-width: 500px;
    /* Adjust as needed */
    margin: auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.form-container h2 {
    text-align: center;
}

.form-container form {
    display: flex;
    flex-direction: column;
}

.form-container .form-table {
    width: 100%;
    margin-bottom: 10px;
    /* table-layout: fixed;  newly added */
}

.form-container .form-table td {
    padding: 5px;
}

.form-container .btn {
    display: block;
    /* Make the button a block element */
    margin: 20px auto;
    /* Center the button with top and bottom margin */
    /* Keep your existing margin-top if needed or adjust as shown */
}

.note {
    font-size: 0.9em;
    margin-top: 5px;
    text-align: center;
    /* Ensure the note is also centered */
}

.error {
    color: red;
    text-align: center;
    margin-bottom: 10px;
}



/*     ----------  OTHER  --------- */

/* Style for the anchor target */
.anchor-target {
    display: block;
    position: relative;
    top: -100px;
    /* Height of your fixed header plus some extra space */
    visibility: hidden;
}

/* Style for the actual content */
.anchor-content {
    padding-top: 100px;
    /* Same as the offset in .anchor-target */
}


ul li {
    margin-bottom: 10px;
    /* Adjust the pixel value as desired */
    margin-top: 10px;
}





/*     ----------    HOME.html     1ST SECTION--------- */


/* Header Styles */
.header {
    background: #164e6d;
    color: #fff;
    padding: 20px 0;
}

/* Hero Section Styles */
.hero-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 0 20px;
    background: #008282;
    color: #fff;
    margin-bottom: 0;
}

.hero-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    /* Align with .container width */
    margin: auto;
}

.hero-text {
    flex: 1;
    font-size: 1.2em;
}

.hero-text h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

.cta-button {
    display: inline-block;
    padding: 10px 20px;
    background: #164e6d;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 20px;
}

.hero-image {
    flex: 1;
    max-width: 50%;
}

.hero-image img {
    max-width: 700px;
    height: auto;
}

/* Responsive adjustments for Hero Section */
@media (max-width: 768px) {
    .hero-content {
        flex-direction: column;
        text-align: center;
    }

    .hero-image {
        max-width: 100%;
        margin-top: 20px;
    }

    main {
        padding-left: 10px;
    }
}

/* Key Features Section Styles */
.features-section {
    margin-top: 0;
    padding: 0;
    padding-top: 0 !important;
}

.feature-panel {
    margin: 0;
    /* Full width and no vertical margin */
    padding: 20px 20px;
    /* Vertical padding for content */
    text-align: center;
    width: 100%;
    /* Full width */
}

.feature-panel:nth-child(odd) {
    background: #ffffff;
    /* White background */
}

/* Background color for even-numbered feature panels */
.feature-panel:nth-child(even) {
    background: #e0e0e0;
    /* Light grey background */
}

.feature-content {
    margin: auto;
    max-width: 600px;
    /* Set a maximum width for the text */
    padding: 20px 20px;
}

.feature-panel:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

#key-features {
    padding-top: 0;
}

.main-content .features-section {
    padding-top: 0;
}


.login-box,
.register-box {
    width: 500px;
    max-width: 100%;
}





/*     ----------     DASHBOARD & CHARTs    --------- */

.graphs-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 650px));
    justify-content: center;
    max-width: 1360px;
    margin: auto; /* Zorgt ervoor dat de container gecentreerd is */
    gap: 20px; /* Stelt de ruimte in tussen de kolommen */
    padding: 20px 5px; /* Optionele padding binnen de container */
    box-sizing: border-box;
    /* background-color: #f7f7f7; */
}

.content-container {
    height: 460px;
    /* Ensure a minimum height for consistency */
    /* padding: 5px; */
    background-color: #ffffff;
    /* Ensure background color is white */
    box-sizing: border-box;
    border-radius: 5px;
}

.kpi-dashboard-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px 10px;
    justify-content: center;
    padding: 0 calc((100% - (3 * 185px + 2 * 20px)) / 2);
    margin: 20px auto;
    justify-items: center;
    align-items: center;
}

.two-row-dashboard-container{
    display: grid;
    grid-template-rows: auto 1fr 1fr; /* 30px for header, remaining space divided between two charts */
    height: 100%; /* Make the container fill the entire height of its parent */
    width: 100%; /* Make the container fill the entire width of its parent */
    align-items: center; /* Center align the content of each cell */
    justify-items: center; /* Center justify the content of each cell */
    gap: 0px;
    box-sizing: border-box;
}

.chart-header {
    width: 100%;
    /* Ensure header takes full width */
    text-align: center;
    margin: 0; /* 10px margin under */
    color: #008282;
    /* Blue color for h3 headings */
    display: block;
    font-size: 1.17em;
    padding-top: 15px;
    font-weight: bold;
}

.chart-container{
    height: 100%;
    width: 100%;
}

.table-container {
    margin: 0 0 10px;
    /* Adjusted margin to remove right margin */
    padding-top: 17px;
    color: #073857;
    font-weight: normal;
    overflow-y: auto;
    max-height: 365px;
    box-sizing:border-box;

}

.kpi-box {
    display: grid;
    grid-template-rows: repeat(3, 30%);
    align-content: center;
    padding-top: 10px;
    background-color: #f0f0f0;
    border-radius: 5px;
    text-align: center;
    width: 100%;
    height: 110px;
    box-sizing: border-box;

}

.kpi-header {
    /* margin-bottom: 15px; */
    font-size: 15px;
    color: #164e6d;
}

.kpi-value {
    font-size: 24px;
    font-weight: bold;
    color: #073857;
    /* padding-top: 4px; */

}

.kpi-target, .kpi-delta{
    font-size: 20px;
    font-weight: normal;
    color: #333;
    align-self: center;
}


/* Mobiele apparaten (klein) */
@media (max-width: 480px) {
    /* Stijlen voor mobiele apparaten */
}

/* Tablets in portretmodus en grote telefoons */
@media (min-width: 481px) and (max-width: 768px) {
    /* Stijlen voor tablets in portretmodus */
}

/* Tablets in landschapsmodus en kleine laptops/netbooks */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Stijlen voor tablets in landschapsmodus en kleine laptops */
}

/* Kleine tot middelgrote schermen, inclusief standaard laptops */
@media (min-width: 1025px) and (max-width: 1280px) {
    /* Stijlen voor kleine tot middelgrote schermen */
}

/* Desktopschermen */
@media (min-width: 1281px) {
    /* Stijlen voor desktopschermen */
}

/* If you need specific styling for each graph or adjustments */
#table_div_current,
/* #chart_div_trend, */
#chart_div_3,
#chart_div_4 {
    /* Example: Specific height for the charts */
    width: auto;
    margin: auto;
}


#table_div_container {
    width: auto;
    max-width: 1100px;
    /* Example max width */
    margin: auto;
}

#chart_div_trend {
    height: 100%; /* This makes the span take full height of its container */
}


/* .positive { color: #6AB188; } */
.good { color: #2C707E; }
.neutral { color: darkgray; }
.bad { color: #D32D42; }




.cssHeaderRow {
    background-color: #2A94D6;
}

.cssTableRow {
    background-color: #06182a;
}

.cssOddTableRow {
    background-color: #F0F1F2;
}

.cssSelectedTableRow {
    font-size: 20px;
    font-weight: bold;
}

.cssHoverTableRow {
    background: #ccc;
}

.cssHeaderCell {
    color: white;
    /* Text color */
    background-color: #008282;
    /* Background color */
    font-size: 16px;
    padding: 10px !important;
    border: solid 1px #FFFFFF;
}

.cssTableCell {
    font-size: 16px;
    padding: 10px !important;
    border: solid 1px #FFFFFF;
}

.cssRowNumberCell {
    text-align: center;
}



/*     ----------    FEATURE DOCUMETATION    --------- */

h1 {
    color: #164e6d;
    /* Additional styling as needed (font size, color, etc.) */
}

/* If you have other levels of headers (like <h2>, <h3>, etc.) that you also want to center, you can add them here */


.documentation {
    /* font-family: Helvetica, sans-serif; */
    padding: 20px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.documentation h1,
.documentation h2,
.documentation h3,
.documentation h4,
.documentation h5,
.documentation h6 {
    text-align: left;
    color: #164e6d;
    /* Additional styling for these headers */
}


.documentation h1 {
    padding: 30px 20px 10px 0px;
}

.documentation h2 {
    padding: 10px 20px 10px 0px;
}



.custom-table th,
.custom-table td {
    word-wrap: break-word;
    /* Allow long words to be broken and wrapped onto the next line */
    padding: 8px;
    /* Adds padding for readability */
    vertical-align: top;
    /* Aligns the content to the top of the cell, useful for cells with varying line counts */
    border: 1px solid #ddd;
}

.custom-table th:first-child,
.custom-table td:first-child {
    /* Set a maximum width for the first column */
    max-width: 250px;
    /* Maximum width for the first column */
    /* Optionally, you can also use 'min-width' to prevent the column from becoming too narrow */
    min-width: 250px;
    /* Adjust this value based on your content needs */
    /* Allow the first column to wrap to multiple lines */
    white-space: normal;
    /* Allow wrapping for the first column */
}

.custom-table th:nth-child(2),
.custom-table td:nth-child(2) {
    /* Allow the second column to fill the available space */
    width: 100%;
    /* Allow the second column to take up the remaining space */
    white-space: normal;
    /* Revert to normal white-space behavior for the second column */
}



.custom-table th {
    background-color: #008282;
    color: white;
}



/* ----------------------- ADMIN JAZZMIN ------------------- */

body.theme-darkly p {
    color: pink;
}


.module caption.tenant-app{
    color: white;
}

caption {
    caption-side: top !important;
  }