body {
    font-family: 'Roboto', sans-serif;
    background-color: #eee;
}

/* Header Styles */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #000;
    color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 10;
}

.noscroll {
    overflow: hidden;
}

.brand-section {
    display: flex;
    align-items: center;
}

.brand-logo {
    height: 50px;
}

.brand-name {
    font-size: 1.9rem;
    font-weight: bold;
    color: white;
    margin-left: 10px;
}

.image-initials {
    color: #fff;
    font-size: 20px;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.header .user-info {
    display: flex;
    align-items: center;
    position: relative;
}

.user-info img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
}

.user-info span {
    margin-left: 10px;
    font-size: 1.1rem;
}

.user-info .arrow {
    margin-left: 5px;
    cursor: pointer;
}

#consultantName {
    cursor: pointer;
}

.logout-menu {
    display: none;
    position: absolute;
    top: 40px;
    right: 0;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    width: 150px;
}

    .logout-menu.show {
        display: block;
    }

    .logout-menu a {
        padding: 10px;
        display: block;
        color: #e53935;
        text-decoration: none;
        border-radius: 5px;
    }

        .logout-menu a:hover {
            background-color: #f0f0f0;
        }

/* Sidebar Styles */
.sidebar {
    height: 100%;
    background-color: #f4f4f4;
    padding: 20px;
    width: 250px;
    position: fixed;
    top: 80px;
    left: 0;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

.firm-info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

    .firm-info img {
        width: 40px;
        height: 40px;
        object-fit: cover;
        border-radius: 50%;
    }

    .firm-info #firmName {
        font-size: 1.5rem;
        font-weight: bold;
        margin-left: 10px;
        max-width: 160px;
    }

.nav-link {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;
    color: #000;
    text-decoration: none;
}

    .nav-link i {
        margin-right: 10px;
    }

    .nav-link.selected {
        background-color: #0288d1 !important;
        color: #ffffff !important;
        border-radius: 5px;
    }

    .nav-link:hover {
        background-color: #b3e5fc;
        border-radius: 5px;
    }


/* Footer Styles */
.footer {
    padding: 10px;
    background-color: #000;
    color: white;
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 10;
}

/* Inner Content Styles */
.main-content {
    background-color: #fafafa;
    color: #333333;
    padding: 5px 40px 40px 40px;
    margin: 110px 30px 70px 280px;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    min-height: 640px;
}

    .main-content h1 {
        font-size: 2rem; /* Adjusts the heading size */
        color: #333333; /* Dark gray for a modern look */
        margin-bottom: 20px; /* Space beneath the heading */
        font-weight: bold;
        border-bottom: 2px solid #d1d1d1; /* Optional underline */
        padding-bottom: 10px;
    }

.visibilityhidden, .visibilityHidden {
    visibility: hidden;
}

.project-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 2px solid #d1d1d1;
    margin-bottom: 20px;
}

    .project-header h1 {
        border-bottom: none;
        margin-bottom: 5px;
    }

    .project-navigation-buttons {
        display: flex;
        gap: 20px;
        justify-content: center;
    }

    .project-navigation-buttons button {
        border-radius: 60px;
        display: flex;
        gap: 5px;
    }

        .project-navigation-buttons button.grey.lighten-2 {
            color: inherit;
        }

.nx-modal {
    width: 25%;
    max-height: none;
}

.nx-modal.medium {
    width: 30%;
    max-height: none;
}

    .nx-modal h5 {
        display: flex;
        gap: 10px;
        justify-content: center;
    }
    .nx-modal .modal-content {
        padding: 24px 24px 0 24px;
        text-align: center;
    }

    .nx-modal .long-description p {
        text-align: left;
    }
.nx-modal .modal-footer {
    display: flex;
    justify-content: center;
    padding-bottom: 60px;
    gap: 20px;
}

.dropdown-content {
    max-height: 300px; /* Set your desired max height */
}

ul.dropdown-content {
    min-width: 150px;
}

p.nx-items-empty {
    text-align: center;
    margin-top: 60px;
    font-size: 1.5rem;
}


.nx-items-table.vertical-table td.actions-menu-cell div {
display:flex;
gap: 20px;
}

.nx-items-table.vertical-table td.actions-menu-cell div a {
    display: flex;
    align-items: end;
    gap: 5px;
}

.nx-items-table .action-btn {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    margin-top: -2px;
}

.nx-items-table .action-btn:focus {
    outline: none;
    background-color: transparent; /* Remove background color change */
}

.nx-items-table td:first-of-type, .nx-items-table th:first-of-type {
    padding-left: 20px;
}
    .nx-items-table .action-btn i {
        font-size: 2.0rem;
    }

.nx-items-table .toggle-btn i {
    font-size: 2.7rem;
}

.nx-items-table .action-btn.active i {
    color: #0288d1;
}

.nx-items-table .action-btn.inactive i {
    color: #e53935;
}


.nx-items-table .action-btn.toggle-btn.disabled i {
    color: #b3b2b2!important;
}

.dropdown-content li > a.disabled {
    color: #b3b2b2 !important;
}

.actions-menu-cell a.disabled {
    color: #b3b2b2 !important;
}

.buttons.disabled {
    background-color: #b3b2b2 !important;
}


/* Rename (Edit) Icon Color */
.nx-items-table .action-btn.rename-btn i {
    color: #0288d1; /* Blue */
}

.nx-items-table .action-btn.rename-btn:hover i {
    color: #0277bd; /* Darker Blue */
}

.nx-items-table .action-btn.rename-btn.disabled i {
    color: #B0BEC5; /* Light Gray */
}

/* Delete Icon Color */
/*.nx-items-table .action-btn.delete-btn i {
    color: #e53935;*/ /* Red */
/*}*/

.delete-btn:hover {
    color: #d32f2f; /* Darker Red */
}

.delete-btn.disabled {
    color: #ffcdd2; /* Light Red */
}

.actions-menu-cell {
    text-align: right;
}

.dropdown-trigger i:hover {
    background-color: #eee;
}
.dropdown-content li > a > i {
    margin-right: 5px;
}

.delete-btn {
    color: #e53935!important; /* Red */
}

    .delete-btn.disabled {
        color: #ffcdd2 !important; /* Light Red */
    }

.dropdown-content .manage-roles-btn.disabled,
.dropdown-content .invite-btn.disabled {
    color: #B0BEC5;
}

#toast-container {
    position: absolute;
    top: auto !important;
    right: auto !important;
    bottom: 10%;
    left: 20% !important;
}

/* Current Page Specific styling */

/* Table Styling */
.nx-items-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}


.label-cell {
    background: #e0e0e0!important;
    font-weight: bold;
    width: 160px;
}

    .nx-items-table th {
        background-color: #e0e0e0;
        color: #333333;
        font-weight: bold;
        padding: 10px;
        border-bottom: 2px solid #dddddd;
    }

    .nx-items-table th div.sortable {
        display: flex;
        cursor: pointer;
    }

        .nx-items-table th div.sortable i {
            font-family: 'Material Icons';
            font-size: 20px;
        }

            .nx-items-table th div.sortable i::before {
                content: 'swap_vert';
            }

            .nx-items-table th div.sortable.selected-asc i::before {
                content: 'arrow_downward';
            }

        .nx-items-table th div.sortable.selected-desc i::before {
            content: 'arrow_upward';
        }

    .nx-items-table td {
        padding: 10px;
        border-bottom: 1px solid #d1d1d1;
        color: #424242;
        background-color: #f5f5f5;
    }

/* Slider Panel */
.slider-panel {
    position: fixed;
    top: 0;
    right: -100%; /* Initially hidden */
    width: 500px;
    height: 100%;
    background-color: white;
    box-shadow: -4px 0 10px rgba(0, 0, 0, 0.2);
    transition: right 0.3s ease-in-out;
    z-index: 1000;
    padding: 20px;
    overflow-y: scroll;
}

/* Content inside the slider */
.slider-content h5 {
    margin-bottom: 35px;
    border-bottom: 2px solid #d1d1d1;
    padding-bottom: 10px;
}

.slider-content .buttons {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* When slider is open (used for transition) */
.slider-panel.open {
    right: 0;
}

/* Button positioning */
.nx-items-addBtn {
    position: fixed;
    right: 20px;
    bottom: 60px;
    z-index: 900;
    border-radius: 60px;
    display: flex;
    gap: 5px
}

.kickoffBtn-cont {
    text-align: center;
}
#kickoffBtn, #kickoffBtnStarted, #kickoffBtnFinished {
    border-radius: 60px;
    display: flex;
    gap: 5px;
    margin: auto;
    margin-top: 40px;
}

#kickoffBtnStarted, #kickoffBtnFinished {
    cursor: auto;
}

.sub-btn-1 {
    bottom: 125px;
}
.sub-btn-2 {
    bottom: 170px;
}
.sub-btn-3 {
    bottom: 215px;
}
.sub-btn-4 {
    bottom: 260px;
}
.sub-btn-5 {
    bottom: 305px;
}
.sub-btn-6 {
    bottom: 350px;
}
.sub-btn-7 {
    bottom: 395px;
}

.disclaimer {
    font-size: 0.9rem;
    border: 1px solid #4db6ac; /* Matches the teal accent color */
    border-radius: 5px; /* Optional rounded corners */
    padding: 10px; /* Spacing inside the disclaimer */
    display: flex; /* Align icon and text horizontally */
    align-items: center; /* Center the icon vertically with the text */
    margin: 15px 0; /* Space above the disclaimer */
}

    .disclaimer i {
        margin-right: 10px; /* Space between the icon and the text */
    }

.search-panel {
    display: flex;
    justify-content: space-between;
}

    .search-panel .search-panel-buttons {
        display: flex;
        gap: 15px;
    }

.resetSearchProjectBtn {
    color: inherit;
}

.search-panel .search-panel-buttons button {
    border-radius: 60px;
    display: flex;
    gap: 5px;
}

.searchStatusStage {
    display: flex;
    gap: 110px;
    margin-top: 25px;
}

.searchDateRange {
    display: flex;
    justify-content: space-between;
    /*margin-top: 25px;*/
}

    .searchDateRange .input-field {
        width: 48%;
    }

    [type="radio"]:checked + span:after,
    [type="radio"].with-gap:checked + span:before,
    [type="radio"].with-gap:checked + span:after {
        border: 2px solid #0288d1;
    }

[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:after {
    background-color: #0288d1;
}

input:not([type]):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=url]:not(.browser-default):focus:not([readonly]),
input[type=time]:not(.browser-default):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
input[type=datetime]:not(.browser-default):focus:not([readonly]),
input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
    border-color: #0288d1;
    -webkit-box-shadow: 0 1px 0 0 #0288d1;
    box-shadow: 0 1px 0 0 #0288d1;
}

    input:not([type]):focus:not([readonly]) + label, 
    input[type=text]:not(.browser-default):focus:not([readonly]) + label, 
    input[type=password]:not(.browser-default):focus:not([readonly]) + label, 
    input[type=email]:not(.browser-default):focus:not([readonly]) + label, 
    input[type=url]:not(.browser-default):focus:not([readonly]) + label, 
    input[type=time]:not(.browser-default):focus:not([readonly]) + label, 
    input[type=date]:not(.browser-default):focus:not([readonly]) + label, 
    input[type=datetime]:not(.browser-default):focus:not([readonly]) + label, 
    input[type=datetime-local]:not(.browser-default):focus:not([readonly]) + label, 
    input[type=tel]:not(.browser-default):focus:not([readonly]) + label, 
    input[type=number]:not(.browser-default):focus:not([readonly]) + label, 
    input[type=search]:not(.browser-default):focus:not([readonly]) + label, 
    textarea.materialize-textarea:focus:not([readonly]) + label {
        color: #0288d1;
    }

input.valid:not([type]), 
input.valid[type=text]:not(.browser-default), 
input.valid[type=password]:not(.browser-default), 
input.valid[type=email]:not(.browser-default), 
input.valid[type=url]:not(.browser-default), 
input.valid[type=time]:not(.browser-default), 
input.valid[type=date]:not(.browser-default), 
input.valid[type=datetime]:not(.browser-default), 
input.valid[type=datetime-local]:not(.browser-default), 
input.valid[type=tel]:not(.browser-default),  
input.valid[type=number]:not(.browser-default), 
input.valid[type=search]:not(.browser-default), 
textarea.materialize-textarea.valid, 
.select-wrapper.valid > input.select-dropdown {
    border-bottom: 1px solid #9e9e9e;
    -webkit-box-shadow: 0 0px 0 0 #9e9e9e;
    box-shadow: 0 0px 0 0 #9e9e9e;
}

.dropdown-content li > a, .dropdown-content li > span {
    color: #0288d1;
}

.select-wrapper input.select-dropdown:focus {
    border-bottom-color: #0288d1;
}

[type="checkbox"].filled-in:checked + span:not(.lever):after {
    border: 2px solid #0288d1;
    background-color: #0288d1;
}

.datepicker-date-display {
    background-color: #0288d1;
}

.datepicker-table td.is-today {
    color: #0288d1;
}

.datepicker-cancel, .datepicker-clear, .datepicker-today, .datepicker-done {
    color: #0288d1;
}

.datepicker-table td.is-selected {
    background-color: #0288d1;
}

.datepicker-calendar button:focus {
    background-color: #0288d1;
    color: #fff;
}

.horizontal-radio {
    display: flex;
    gap: 40px;
}

.select-helper-text {
    font-size: 12px;
    color: #F44336;
}

.input-div-with-custom-label {
    margin-top: 30px;
}

.input-div-with-custom-label .input-field {
    margin-top: 0;
}

.input-div-with-custom-label span.custom-label {
    font-weight: bold;
}

.input-field.invalid .select-dropdown {
    border-bottom: 1px solid #F44336 !important;
    -webkit-box-shadow: 0 1px 0 0 #F44336;
    box-shadow: 0 1px 0 0 #F44336;
}

.main-content-timeline {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    margin: 0;
}

.timeline-container {
    position: relative;
    width: 80%;
    max-width: 800px;
    padding: 20px;
}

.timeline-line {
    position: absolute;
    top: 40px;
    bottom: 20px;
    left: 50%;
    width: 4px;
    background-color: #d1d1d1;
    transform: translateX(-50%);
}

.timeline-step {
    position: relative;
    width: 65%;
    padding: 10px 20px;
    margin: 40px 0 0 0;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.timeline-sub-step {
    position: relative;
    width: 50%;
    padding: 10px 20px;
    margin: 10px 0 0 0;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

    .timeline-step.timelineleft {
        margin: 40px 0 0 -152px;
    }

    .timeline-step.timelineright {
        margin-left: 419px;
        text-align: left;
    }

.timeline-sub-step.timelineleft {
    margin: 10px 0 0 -38px;
}

.timeline-sub-step.timelineright {
    margin-left: 419px;
    text-align: left;
}

.timeline-step .title-cont {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.timeline-sub-step .step-members-cont {
    display: flex;
    align-items: center;
    gap: 10px;
}

.timeline-dot {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #9e9e9e;
    z-index: 1;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}

.timeline-sub-step .timeline-dot {
    width: 25px;
    height: 25px;
}

    .timeline-dot.not-started {
        background-color: #9e9e9e;
    }

    .timeline-dot.in-progress {
        background-color: #0288d1;
    }

    .timeline-dot.completed {
        background-color: #4CAF50;
    }

    .timeline-dot i {
        color: white;
        font-size: 25px;
        line-height: 35px;
        text-align: center;
        display: block;
    }

.timeline-step.timelineleft .timeline-dot {
    right: -56px;
}

.timeline-step.timelineright .timeline-dot {
    left: -56px;
}

.timeline-sub-step.timelineleft .timeline-dot {
    right: -51px;
}

.timeline-sub-step.timelineright .timeline-dot {
    left: -51px;
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-date {
    font-size: 11px;
    display: block;
}

.chat-sub-step {
    box-shadow: none;
    border: 1px solid #ffcdd2;
}

.timeline-dot.chat {
    box-shadow: none;
    border: 3px solid #F44336;
    width: 31px;
    height: 31px;
}

.chat-box textarea {
    background: #fff;
    border: none;
    padding: 5px;
    border-bottom: 1px solid;
    margin: 10px 0 5px 0;
}

#sendChatBtn {
    display: flex;
    gap: 5px;
}

.chat-box {
    width: 100%;
    padding-bottom: 10px;
}

.timelineleft .timeline-dot.chat {
    right: -55px;
}

.timelineright .timeline-dot.chat {
    left: -55px;
}

.timeline-dot.chat i {
    font-size: 17px;
    line-height: 26px;
    color: #fff;
}

.timeline-chat-group {
    position: relative;
    width: 100%;
    padding: 10px 20px;
    margin: 10px 0 0 0;
    height: 65px;
}

    .timeline-chat-group .timeline-dot {
        margin-left: 338px;
        border: none;
        cursor: pointer;
        color: #fff;
        width: 45px;
        height: 45px;
        display: flex;
        align-items: center;
        gap:4px;
        justify-content: center;
    }

    .timeline-chat-group .timeline-dot i {
        font-size: 25px;
        color: #fff;
        display: inline-block;
        width: 17px;
        margin-left: -6px;
    }

.timeline-step h6 {
    font-weight: bold;
}

.step-members-cont.approver-cont {
    margin-top: 10px;
}

.step-members-cont span.assignees-label {
    font-style: italic;
    font-size: smaller;
    display:block;
    margin-bottom: 10px;
}

.step-role-assignee {
    background-color: #4CAF50;
    display: inline-block;
    padding: 2px 10px;
    color: #fff;
    border-radius: 12px;
}

.legend-box {
    display: flex;
    gap: 20px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.legend-box .legend-item span {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
}

.member-avatar-container {
    display: inline-block;
    position: relative;
}

.member-avatar {
    display: inline-block;
    position: relative;
    width: 37px;
    height: 37px;
    margin-left: -10px;
    border-radius: 50%;
    z-index: 5;
    text-align: center;
    line-height: 40px;
    color: #fff;
    cursor: default;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
    overflow: hidden;
}

    .member-avatar-container i {
        position: absolute;
        top: -7px;
        right: -7px;
        color: white;
        background-color: black;
        z-index: 7;
    }

        .member-avatar-container i.action-completed {
            background: #2e7d32;
            border-radius: 50%;
            font-size: 10px;
            padding: 3px;
            border: #fff 2px solid;
        }

.member-avatar.first {
    margin-left: 0px!important;
}

.member-avatar.spaced {
    margin-left: 5px !important;
}

.member-avatar.action-expired {
    filter: grayscale(80%);
    opacity: 0.5;
}

.member-avatar:hover {
    z-index: 6;
    opacity: 1;
}

.member-avatar img {
    width: 37px;
    height: 37px;
    border-radius: 50%;
    object-fit: cover;
    margin: auto;
    border: 3px solid;
}

    .member-avatar.joined {
        background: #4CAF50;
    }

        .member-avatar.joined img {
            border-color: #4CAF50;
        }

    .member-avatar.awaiting {
        background: #ff9800;
    }

        .member-avatar.awaiting img {
            border-color: #ff9800;
        }

    .member-avatar.not-invited {
        background: #9e9e9e;
    }

        .member-avatar.not-invited img {
            border-color: #9e9e9e;
        }

    .member-avatar.member-left {
        background: #F44336;
    }

        .member-avatar.member-left img {
            border-color: #F44336;
        }

.project-name-lnk {
    font-weight: bold;
    text-decoration: underline;
}

.project-name-lnk.not-allowed {
    cursor: not-allowed;
}

span.project-name-status {
    font-weight: bold;
}

    span.project-name-status.project-on-hold {
        color: #ff9800;
    }

    span.project-name-status.project-finished {
        color: #4CAF50;
    }

    span.project-name-status.project-cancelled, span.project-name-status.project-error {
        color: #F44336;
    }

#assigneesSelections, #approversSelections {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

.slider-panel.wide {
    width: 660px;
}

#assigneesSelections p, #approversSelections p {
    width: 33%;
    padding-right: 10px;
}

    #assigneesSelections p span, #approversSelections p span {
        padding-left: 25px;
        line-height: 20px;
    }

.deleted-blocked-user {
    color: #E53935 !important;
}

.progress {
    background-color: #b3e5fc;
}

    .progress .indeterminate {
        background-color: #0288d1;
    }