/*Write your custom css in this file.*/
/* Variables */
:root {
    --color-primary: #3D77FF;
    --color-primary-100: #ECF1FF;
    --color-gray: #F2F4F7;
    --color-success: #079455;
    --color-success-100: #DCFAE6;
    --color-danger: #D92D20;
    --color-danger-100: #FEE4E2;
    --color-warning: #DC6803;
    --color-warning-100: #FFE6D5;
    --text-light: #667085;
    --text-dark: #101828;
    --border-radius: 10px;
    --border-color: #EAECF0;
    --border-color-light: #f2f4f7;
    --border-color-gray: #D0D5DD;
    --bg-color: #EAECF0;
    --bg-color-gray: #F2F4F7;
}



.page-scrum {
    display: flex;
    gap: 30px;
}

.page-scrum .page-content {
    flex: 1;
    padding-right: 0;
}

.page-sidebar {
    width: 510px;
    background: #fff;
    border-radius: 10px;
    padding: 25px 25px 50px;
    margin-top: 50px;
}

.page-header {
    display: flex;
    align-items: center;
    padding: 0 0 20px;
    gap: 12px;

    span {
        font-size: 16px;
        font-weight: 500;
        color: var(--text-light);

        span {
            color: #98A2B3;
        }
    }
}

.page-header__title {
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    color: var(--text-dark);
}

.scrum-stats {
    background-color: #fff;
    border-radius: var(--border-radius);
    padding: 26px 30px;
    display: flex;
    align-items: center;
    gap: 20px;


}


.scrum-stats__progress {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 15px;
}

.scrum-stats__progress .progress {
    flex: 1;
    height: 16px;
    border-radius: 25px;
}

.scrum-stats__progress .progress-bar {
    background-color: var(--color-primary);
}

.scrum-stats__progress .progress-percentage {
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    color: var(--color-primary);
}

.scrum-stats__info {
    flex: 2;
    display: flex;
    align-items: center;
    gap: 20px;
}

.scrum-stats__info span {
    font-weight: 500;
    font-size: 16px;
    color: var(--text-light);
    white-space: nowrap;
}

.scrum-stats__info span strong {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
}

.scrum-contents {
    background-color: #fff;
    border-radius: var(--border-radius);
    padding: 26px 30px;
    gap: 20px;
    margin-top: 30px;
}

.scrum-contents__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.scrum-contents__header h1 {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}

.scrum-contents__header span {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-light);
    white-space: nowrap;
}

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


.scrum-contents__action__left,
.scrum-contents__action__right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.swerp-btn-primary {
    border-radius: 8px;
    background: var(--color-primary);
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 500;
}

.swerp-btn-primary svg {
    margin: 0;
    width: 16px;
    height: 16px;
}

.swerp-btn-light {
    border-radius: 8px;
    background: var(--color-gray);
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 500;
}

.swerp-btn-light svg {
    stroke: var(--text-light);
    width: 20px;
    height: 20px;
}

.swerp-btn-primary.swerp-btn-sm {
    padding: 7px 12px;
}

.scrum-search-input {
    position: relative;
}

.scrum-search-input input {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    height: 40px;
    padding: 0 40px 0 15px;
}

.scrum-search-input span {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.scrum-search-input span svg {
    stroke: #98a2b3;

}

.scrum-filter .dropdown-menu {
    width: 270px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 20px;
}

.scrum-filter__header {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color-light);
}

.scrum-filter__header h3 {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

.scrum-filter__types {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}

.scrum-filter__types .form-check,
.scrum-filter__types .form-check-label {
    margin-bottom: 0;
}

.scrum-filter__items .accordion-item {
    border: 0 none;
    margin-top: -1px;
}

.scrum-filter__items .accordion-header {
    margin: 0;
    border: 1px solid var(--border-color);
}

.scrum-filter__items .accordion-item:first-child .accordion-header {
    border-radius: 4px 4px 0 0;
}

.scrum-filter__items .accordion-item:last-child .accordion-header {
    border-radius: 0 0 4px 4px;
}

.scrum-filter__items .accordion-button {
    padding: 12px 15px;
    box-shadow: none;
}

.scrum-filter__items .accordion-button:not(.collapsed) {
    background: var(--border-color);
    color: var(--text-dark);
}

.scrum-filter__items .accordion-button::after {
    background-size: 12px;
    width: 12px;
    height: 12px;
    transform: rotate(-90deg);
}

.scrum-filter__items .accordion-button:not(.collapsed)::after {
    transform: rotate(0);
}

.scrum-filter__items .accordion-body {
    padding: 0;
}

.scrum-filter__list-items {
    margin: 8px 0 16px 0;
}

.scrum-filter__list-items li {
    background-color: #f9f9fb;
    cursor: pointer;
    transition: 0.3s ease;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.scrum-filter__list-items li:hover {
    background: none;
}

.scrum-filter__list-items li:not(:last-child) {
    margin-bottom: 8px;
}

.scrum-filter__list-items__count {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e9e9e9;
    font-size: 10px;
}

.scrum-filter__list-items--img .scrum-filter__list-items__left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.scrum-filter__list-items--img .scrum-filter__list-items__left img {
    width: 25px;
    height: 25px;
    object-fit: cover;
    border-radius: 50%;
}

.scrum-filter__list-items--status li {
    position: relative;
}

.scrum-filter__list-items--status li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: var(--color-primary);
}

.scrum-filter__list-items--status .scrum-filter__list-items__status-new::before {
    background: #adb5bd;
}

.scrum-filter__list-items--status .scrum-filter__list-items__status-ready::before {
    background: #0dcaf0;
}

.scrum-filter__list-items--status .scrum-filter__list-items__status-inProgress::before {
    background: #fd7e14;
}

.scrum-filter__list-items--status .scrum-filter__list-items__status-ready-for-test::before {
    background: #ffc107;
}

.scrum-filter__list-items--status .scrum-filter__list-items__status-done::before {
    background: var(--color-success);
}

.scrum-filter__list-items--status .scrum-filter__list-items__status-archived::before {
    background: #dee2e6;
}

.scrum-filter__filtered-by,
.scrum-filter__excluded {
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 20px;
}

.scrum-filter__filtered-by {
    background: var(--color-success-100);
}

.scrum-filter__excluded {
    background: var(--color-danger-100);
}

.scrum-filter__filtered-by h4,
.scrum-filter__excluded h4 {
    margin: 0 0 10px;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
}

.scrum-filter__filtered-by h4 {
    color: var(--color-success);
}

.scrum-filter__excluded h4 {
    color: var(--color-danger);
}

.scrum-filter__filtered-by__items,
.scrum-filter__excluded__items {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
}

.scrum-filter__filtered-by__items li,
.scrum-filter__excluded__items li {
    background: #fff;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 13px;
}

.scrum-filter__filtered-by__items li span,
.scrum-filter__excluded__items li span {
    line-height: normal;
    cursor: pointer;
}

.scrum-filter__filtered-by__items li span:hover,
.scrum-filter__excluded__items li span:hover {
    svg {
        stroke: red;
    }
}

.scrum-filter__filtered-by__items li svg,
.scrum-filter__excluded__items li svg {
    width: 14px;
    height: 14px;
    transition: 0.3s ease;
}

/* Modals general style */
.add-user-story-modal .modal-content,
.user-story-bulk-insert-modal .modal-content,
.user-story-delete-modal .modal-content,
.task-to-user-story-modal .modal-content,
.sprint-add-modal .modal-content,
.block-task-modal .modal-content,
.epic-relationship-modal .modal-content,
.assign-to-user-modal .modal-content,
.set-due-date-modal .modal-content,
.block-epic-modal .modal-content,
.move-task-modal .modal-content {
    border-radius: 20px;
    padding: 30px 50px 50px;
}

.user-story-bulk-insert-modal .modal-content,
.user-story-delete-modal .modal-content,
.task-to-user-story-modal .modal-content,
.assign-to-user-modal .modal-content,
.sprint-add-modal .modal-content {
    padding-bottom: 30px;
}

.add-user-story-modal .btn-close,
.user-story-bulk-insert-modal .btn-close,
.user-story-delete-modal .btn-close,
.task-to-user-story-modal .btn-close,
.sprint-add-modal .btn-close,
.block-task-modal .btn-close,
.block-epic-modal .btn-close,
.move-task-modal .btn-close,
.epic-relationship-modal .btn-close,
.assign-to-user-modal .btn-close,
.set-due-date-modal .btn-close {
    width: 20px;
    height: 20px;
    right: 26px;
    top: 26px;
    position: absolute;
}

.add-user-story-modal .modal-title,
.user-story-bulk-insert-modal .modal-title,
.sprint-add-modal .modal-title,
.block-task-modal .modal-title,
.block-epic-modal .modal-title,
.move-task-modal .modal-title,
.epic-relationship-modal .modal-title,
.assign-to-user-modal .modal-title,
.set-due-date-modal .modal-title {
    text-align: center;
    margin: 0 0 30px 0;
    font-size: 24px;
    font-weight: 600;
    color: var(--text-dark);
}

/* Add user story modal */
.add-user-story {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.add-user-story__content {
    width: calc(65% - 10px);
}

.add-user-story__sidebar {
    width: calc(35% - 10px);
}

.create-new-story-btn {
    width: 100%;
}

.add-user-story__content {
    .form-control {
        border-radius: 8px;
        border: 1px solid var(--border-color-gray);
        height: 40px;
        padding: 0 15px;
    }

    textarea.form-control {
        height: 218px;
        padding: 15px;
        resize: none;
    }
}

.add-attachments {
    background: var(--bg-color);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px;
    padding: 0 0 0 20px !important;
    margin-bottom: 15px;
    cursor: pointer;
    position: relative;

    .add-attachments__count {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-dark);
    }

    .add-attachments__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 13px 12px;
        background: var(--color-primary);
        border-radius: 6px;

        svg {
            stroke: #fff;
        }
    }
}

.uploaded-items {
    margin-bottom: 20px;

    .uploaded-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 0;
        gap: 10px;

        .delete-button {
            background: none;
            border: 0 none;
            padding: 0;
            margin: 0;
            cursor: pointer;
            box-shadow: none;

            svg {
                width: 14px;
                height: 14px;
            }
        }
    }

    .uploaded-item:not(:last-child) {
        margin-bottom: 5px;
        border-bottom: 1px solid #efefef;
    }
}

.file-upload-input {
    opacity: 0;
    width: 100%;
    background: red;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    cursor: pointer;
}

.add-attachments-dropzone {
    border: 3px dashed var(--border-color);
    border-radius: 8px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 400;
    color: #475467;
    cursor: pointer;
    transition: 0.3s ease;
}

.add-attachments-dropzone.dragover {
    border-color: var(--color-primary);
    background: var(--bg-color-gray);
}

/* user story status select */
.add-user-story__status {
    margin-bottom: 20px;

    select {
        background-color: #475467;
        color: #fff;
        cursor: pointer;
        height: 40px;
        border-radius: 8px;
        padding: 0 15px;
        box-shadow: none;
        border: 0 none;
        background-blend-mode: color-burn;

        option {
            background: #fff;
            color: var(--text-light);
            cursor: pointer;
        }
    }
}

.status--new {
    select {
        background-color: #adb5bd;
    }
}

.status--ready {
    select {
        background-color: #0dcaf0;
    }
}

.status--in-progress {
    select {
        background-color: #fd7e14;
    }
}

.status--ready-for-test {
    select {
        background-color: #e6ac00;
    }
}

.status--done {
    select {
        background-color: var(--color-success);
    }
}

.status--archived {
    select {
        background-color: #adb7c0;
    }
}

.add-user-story__placement {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 30px;

    h4 {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-dark);
        margin: 0 0 6px 0;
        flex: 0 0 100%;
    }
}

.assign-user-wrapper {
    a {
        font-size: 14px;
        font-weight: 600;
        color: var(--color-primary);
    }

    .assign-multiple-user {
        span {
            display: none;
        }
    }

    .dropdown-menu {
        padding: 15px;
    }

    .user-list {
        li {
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            transition: 0.3s ease;
            padding: 6px 5px;
            border-radius: 4px;

            img {
                width: 28px;
                height: 28px;
                border-radius: 50%;
            }
        }

        li:hover {
            background: var(--color-gray);
        }

        .remove-assigned {
            margin-left: auto;
            cursor: pointer;
            display: none;
            transition: 0.3s ease;

            svg {
                width: 15px;
                height: 15px;
                stroke: var(--text-dark);
                transition: 0.3s ease;
            }

            &:hover {
                svg {
                    stroke: var(--color-danger);
                }
            }
        }

        li:not(:last-child) {
            margin-bottom: 3px;
        }

        .user-list__added {
            background: var(--color-gray);

            .remove-assigned {
                display: block;
                visibility: hidden;
                opacity: 0;
            }
        }

        .user-list__added:hover {
            .remove-assigned {
                visibility: visible;
                opacity: 1;
            }
        }
    }
}

.assignees--added {
    display: flex;
    flex-direction: column;

    .user-assigned-wrapper {
        order: 0;
    }

    .dropdown {
        order: 1;
    }

    .add-user-story__or,
    .assign-self {
        display: none;
    }

    .assign-multiple-user {
        span {
            display: inline-block;

            svg {
                width: 15px;
                height: 15px;
            }
        }
    }
}

.details-page-sidebar__contents .assignees--added {
    .user-assigned-wrapper {
        margin-bottom: 15px;
    }
}

.user-assigned-wrapper {
    margin: 6px 0 10px;

    .user-assigned-single {
        display: flex;
        align-items: center;
        gap: 12px;

        img {
            width: 50px;
            height: 50px;
            border-radius: 4px;
        }

        .remove-assigned {
            margin-left: auto;
            cursor: pointer;
            visibility: hidden;
            opacity: 0;
            transition: 0.3s ease;

            svg {
                width: 15px;
                height: 15px;
                stroke: var(--text-dark);
                transition: 0.3s ease;
            }

            &:hover {
                svg {
                    stroke: var(--color-danger);
                }
            }
        }
    }

    .user-assigned-single:hover .remove-assigned {
        visibility: visible;
        opacity: 1;
    }

    .user-assigned-multiple {
        display: flex;
        align-items: center;
        gap: 8px;

        img {
            width: 50px;
            height: 50px;
            border-radius: 4px;
        }
    }
}

/* Add user story: user story points */
.add-user-story__points {
    h4 {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-dark);
        margin: 0 0 6px 0;
        flex: 0 0 100%;
    }
}

.add-user-story__point-single a,
.add-user-story__total-points {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px 10px 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-light);
}

.add-user-story__total-points {
    background: var(--bg-color);
    border-radius: 6px;
}

.add-user-story__point-popover {
    align-items: center;
    flex-wrap: wrap;
    padding: 10px;
}

.add-user-story__point-popover.show {
    display: flex;
}

.add-user-story__point-popover li {
    flex: 0 0 25%;
}

.add-user-story__point-popover li a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s ease;
    padding: 0;
}

.add-user-story__point-popover li a:hover {
    background: var(--bg-color);
}

.add-user-story__point-popover li a.user-story-point--active {
    background: var(--color-primary);
    color: #fff;
}

/* Add user story: Actions */
.add-user-story__action {
    display: flex;
    align-items: center;
    gap: 15px;
}

.add-user-story__action__btn {
    border-radius: 6px;
    background: var(--color-primary-100);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.add-user-story__action__btn svg {
    width: 24px;
    height: 24px;
    stroke: var(--color-primary);
    margin: 0;
}

.item-blocked,
.task-raise-sos--active {
    background: var(--color-danger);

    svg,
    svg path {
        stroke: #fff;
    }
}

.add-user-story__action__due-date.due-date--over,
.add-user-story__action__due-date.due-date--today,
.edit-user-story__action__due-date.due-date--today,
.edit-user-story__action__due-date.due-date--over {
    background: var(--color-danger);

    svg {
        stroke: #fff;
    }
}

.add-user-story__action__due-date.due-date--future,
.edit-user-story__action__due-date.due-date--future {
    background: #fd7e14;

    svg {
        stroke: #fff;
    }
}

/* Add user story: Description */
.add-user-story__description {
    margin: 15px 0 0 0;
}

/* Add user story: bulk insert */
.add-user-story__bulk-insert textarea {
    height: 218px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

/* Backlog table */
.scrum-contents__table {
    margin-top: 15px;
}

.scrum-contents__table table {
    border-collapse: separate;
    border-spacing: 0 16px;
}

.scrum-contents__table thead tr th {
    padding: 0 15px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-light);
}

.scrum-contents__table thead tr th:first-child {
    padding-left: 35px;
}

.scrum-contents__table tbody tr {
    background: #F9FAFB;
    vertical-align: middle;
    cursor: move;
}

.scrum-contents__table tbody tr:active {
    cursor: grabbing;
}

.scrum-contents__table tbody tr:hover {
    box-shadow: 0 5px 10px rgba(16, 24, 40, 0.08);
}

.scrum-contents__table tbody tr td {
    padding: 11px 15px;
    box-shadow: 0 1px 0 rgba(16, 24, 40, 0.05);
    transition: 0.3s ease;
}

.scrum-contents__table tbody tr td:first-child {
    border-radius: 10px 0 0 10px;
}

.scrum-contents__table tbody tr td:last-child {
    border-radius: 0 10px 10px 0;
}

.scrum-contents__table .scrum-contents__user-story-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.scrum-contents__table .scrum-contents__user-story-move {
    cursor: pointer;
}

.scrum-contents__table .scrum-contents__user-story-move svg path {
    stroke: #98a2b3;
    transition: 0.3s ease;
}

.scrum-contents__table .scrum-contents__user-story-move:hover svg path {
    stroke: var(--color-primary);
}

.scrum-contents__table .scrum-contents__user-story-name {
    display: flex;
    gap: 10px;
}

.scrum-contents__table .scrum-contents__user-story-name strong {
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 500;
}

.scrum-contents__table .scrum-contents__user-story-name a {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
}

.scrum-contents__table--sprint {

    .scrum-contents__user-story-move,
    .scrum-contents__user-story-select,
    .scrum-contents__user-story-action {
        display: none;
    }

    tbody {
        position: relative;
    }

    tbody.sprint-items::after {
        content: 'Drag & drop user story here';
        background: var(--color-gray);
        width: 100%;
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 0;
        top: calc(100% + 12px);
        border-radius: 10px;
        border: 3px dashed #D0D5DD;
        color: #344054;
        font-size: 18px;
        font-weight: 600;
    }
}

.scrum-contents__points-wrapper {
    width: 135px;
}

.scrum-contents__user-story-priority .form-select {
    border: 0 none;
    border-radius: 4px;
    width: auto;
    font-size: 14px;
    font-weight: 500;
    background-size: 10px;
    background-blend-mode: color-burn;
    cursor: pointer;
}

.scrum-contents__user-story-priority .form-select option {
    background-color: #fff;
    color: var(--text-light);
}

.scrum-contents__user-story-priority--high select {
    background-color: var(--color-danger-100);
    color: var(--color-danger);
}

.scrum-contents__user-story-priority--medium select {
    background-color: var(--color-success-100);
    color: var(--color-success);
}

.scrum-contents__user-story-priority--low select {
    background-color: var(--color-warning-100);
    color: var(--color-warning);
}

.scrum-contents__user-story-point-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.scrum-contents__user-story-point {
    font-size: 14px;
    font-weight: 500;

    .custom-dropdown-contents .add-user-story__point-single a {
        padding-left: 0;
        padding-right: 0;
    }

    .custom-dropdown {
        .user-story-total-points {
            background: #f3f3f3;
            display: block;
            border-radius: 4px;
            text-align: center;
            cursor: pointer;
            font-size: 13px;
            color: var(--text-light);
            padding: 2px 7px;
            line-height: normal;
        }
    }
}

.scrum-contents__user-story-action button {
    background: none;
    box-shadow: none;
    border: 0 none;
}

.scrum-contents__user-story-action button svg {
    width: 16px;
    height: 16px;
    stroke: var(--text-light);
}

/* User story delete modal */
.user-story-delete-modal .modal-body,
.task-to-user-story-modal .modal-body {
    text-align: center;
}

.user-story-delete-modal .modal-body h3,
.task-to-user-story-modal .modal-body h3 {
    font-size: 24px;
    font-weight: 500;
    color: var(--text-dark);
    margin: 0 0 10px;
}

.user-story-delete-modal .modal-body p,
.task-to-user-story-modal .modal-body p {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-light);
    margin: 0;
}

.user-story-delete-modal .user-story-delete-modal-action,
.task-to-user-story-modal .user-story-delete-modal-action {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

/* Custom dropdown */
.custom-dropdown {
    position: relative;

    .custom-dropdown-contents {
        display: none;
        position: absolute;
        right: 0px;
        background: rgb(255, 255, 255);
        padding: 5px 15px;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 15px;
        min-width: 12rem;
        z-index: 999;
        border-radius: 6px;
    }
}

/* backlog Sidebar content */
.page-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 17px;

    h2 {
        font-size: 24px;
        font-weight: 600;
        color: var(--text-dark);
        margin: 0;
    }
}

.sprint-tabs {
    margin-bottom: 16px;

    .btn {
        padding: 10px 15px;
        border-radius: 6px;
        font-size: 16px;
        font-weight: 600;
    }

    .btn-primary {
        background: var(--color-primary);
    }

    .btn-light {
        background: var(--bg-color);
        color: #475467;
    }
}

.sprint-info {
    background: #f9fafb;
    border-radius: 10px;
    padding: 20px 20px 30px;
    margin-bottom: 25px;

    h2 {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        font-size: 18px;
        font-weight: 500;
        color: var(--text-dark);
        margin: 0 0 16px;

        span {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-light);
        }
    }

    .scrum-contents__table--sprint {
        table thead th {
            padding: 0 10px;
        }

        table tbody tr {
            background: none;
            box-shadow: none !important;
        }

        table thead th:first-child,
        table tbody td:first-child {
            padding-left: 0;
        }

        table tr td {
            padding: 0 10px;
            box-shadow: none;
        }
    }
}

.current-sprint {
    padding-bottom: 132px;
}

.upcoming-sprints__badge {
    margin: 0 0 15px;
    display: inline-block;
    background: var(--bg-color);
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    color: #475467;
    padding: 8px 15px;
}

/* Details page style */
.details-page-wrapper {
    display: flex;
    gap: 25px;
    padding: 30px;
}

.details-page-content {
    flex: 1;
}

.details-page-sidebar {
    width: 510px;
    background: #fff;
    border-radius: 10px;
    padding: 25px 25px 50px;
    margin-top: 79px;
    box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
}

.details-header {
    position: relative;
    padding: 30px 30px 22px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
    margin-bottom: 25px;
}

.details-navigation {
    position: absolute;
    right: 20px;
    top: 20px;
    display: flex;
    align-items: center;
    gap: 8px;

    span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

    svg {
        width: 15px;
        height: 15px;
        stroke: #98A2B3;
        transition: 0.3s ease;
        margin: 0;
    }

    span:hover {
        svg {
            stroke: #344054;
        }
    }
}

.details-title-type {
    margin-bottom: 20px;

    h1 {
        font-size: 24px;
        font-weight: 600;
        color: var(--text-dark);
        margin: 0 0 6px;

        span {
            color: var(--color-primary);
        }
    }

    .details-type {
        font-size: 16px;
        font-weight: 500;
        text-transform: uppercase;
        color: var(--text-light);
        padding-left: 48px;
        display: block;
    }
}

.details-item-blocked {
    background-color: #ff1200;
    padding: 7px 12px;
    color: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 15px;

    span {
        color: #e1dddd;
    }

    svg {
        width: 16px;
        height: 16px;
        margin: 0;
    }
}

.details-linked-to {
    .linked-epics {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 12px;
    }

    .linked-epics--multiple {
        flex-direction: column;
        align-items: flex-start;
    }

    .linked-epics--multiple .linked-epic-info:after {
        content: ':';
    }

    .linked-epic {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        font-weight: 500;
        color: var(--text-light);

        a {
            color: var(--color-primary);
        }
    }

    .remove-linked-item {
        transition: 0.3s ease;
        opacity: 0;
        visibility: hidden;
        cursor: pointer;
        margin-left: 15px;

        svg {
            width: 15px;
            height: 15px;
            stroke: var(--color-danger);
        }
    }

    .linked-epic:hover {
        .remove-linked-item {
            opacity: 1;
            visibility: visible;
        }
    }

    .link-to-epic {
        font-size: 14px;
        font-weight: 500;
        color: var(--color-primary);
        display: flex;
        align-items: center;
        gap: 5px;

        svg {
            width: 16px;
            height: 16px;
            stroke: var(--color-primary);
        }
    }
}

.details-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;

    .btn-back-to-sprint {
        padding: 8px 12px;
        border-radius: 8px;
        background: var(--color-primary-100);
        border: 0 none;
        box-shadow: none;
        font-size: 14px;
        font-weight: 600;
        color: var(--color-primary);
    }

    .author-info {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-left: auto;
    }

    .author-name {
        a {
            display: block;
            font-size: 14px;
            font-weight: 500;
            color: var(--color-primary);
        }

        span {
            font-size: 12px;
            font-weight: 500;
            color: var(--text-light);
        }
    }

    .author-avatar {
        img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
        }
    }
}

.details-body {
    border-radius: 10px;
    background: #fff;
    box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
    padding: 30px;
}

.details-description,
.comment-editor-wrapper {
    margin-bottom: 30px;
    position: relative;
    display: none;

    .ck-editor__editable[role="textbox"] {
        min-height: 145px;
    }

    .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content {
        border: solid var(--border-color);
        border-width: 1px 1px 0;
        border-radius: 8px 8px 0 0 !important;
    }

    .ck-rounded-corners .ck.ck-toolbar,
    .ck.ck-toolbar.ck-rounded-corners {
        border-radius: 6px;
    }

    .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused) {
        border-color: var(--border-color);
    }

    .ck-rounded-corners .ck.ck-editor__main>.ck-editor__editable,
    .ck.ck-editor__main>.ck-editor__editable.ck-rounded-corners {
        border-radius: 0 0 8px 8px !important;
        padding-bottom: 50px;
    }

    .description-action,
    .comment-action {
        position: absolute;
        right: 15px;
        bottom: 15px;
        display: flex;
        align-items: center;
        gap: 10px;

        .btn {
            padding: 8px 12px;
        }

        .btn-primary {
            background: var(--color-primary);
        }
    }
}

.details-description--editing {
    display: block;
}

.ck.ck-balloon-panel {
    display: none !important;
}

.details-description-saved {
    display: none;
    padding-bottom: 40px;
    cursor: pointer;
}

.details-description-saved--show {
    display: block;
}

.details-media {
    margin-bottom: 30px;
}

.task-list-wrapper {
    margin-bottom: 30px;

    .add-task {
        background: var(--bg-color);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        border-radius: 8px;
        padding: 0 0 0 20px !important;
        margin-bottom: 15px;
        position: relative;
    }

    .add-task__title {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-dark);
    }

    .add-task__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 13px 12px;
        background: var(--color-primary);
        border-radius: 6px;
        cursor: pointer;

        svg {
            stroke: #fff;
        }
    }

    .task-single {
        padding: 20px 15px;
        transition: 0.3s ease;
        display: flex;
        align-items: center;
        gap: 30px;
        border-radius: 6px;
    }

    .task-single:not(:last-child) {
        border-bottom: 1px solid var(--border-color);
    }

    .task-name {
        width: 65%;
        display: flex;
        align-items: center;

        .task-move {
            margin-right: 16px;

            svg {
                width: 16px;
                height: 16px;
                margin: 0;

                path {
                    stroke: var(--text-light);
                    transition: 0.3s ease;
                }
            }
        }

        .task-id {
            margin-right: 10px;
            font-size: 14px;
            font-weight: 500;
            color: var(--color-primary);
        }

        .task-title {
            font-size: 14px;
            font-weight: 500;
            color: #344054;
        }

        .task-edit-input {
            display: none;
        }

        .task-edit-input--active {
            display: block;
        }
    }

    .task-action {
        width: 7%;
        display: flex;
        align-items: center;
        gap: 11px;

        span {
            transition: 0.3s ease;
            opacity: 0;
            visibility: hidden;
            cursor: pointer;
        }

        svg {
            margin: 0;
            width: 15px;
            height: 15px;
            stroke: var(--color-primary);
        }
    }

    .task-status {
        width: 14%;

        .dropdown-toggle {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-light);
            display: flex;
            align-items: center;

            svg {
                margin: 2px 0 0 5px;
                width: 16px;
                height: 16px;
                stroke: var(--text-light);
            }
        }

        .dropdown-menu {
            padding: 8px 15px;
        }

        li {
            cursor: pointer;
            padding: 5px 0;
            font-size: 14px;
            font-weight: 500;
            color: var(--text-light);
        }
    }

    .task-assigned-to {
        width: 14%;

        .select2-container {
            width: 100% !important;
        }

        .select2-container--default .select2-selection--single {
            border: 0 none;
            background: transparent;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered span {
            img {
                border-radius: 50%;
                margin-right: 5px;
                width: 25px;
                height: 25px;
            }
        }
    }

    .task-single:hover {
        background: var(--color-primary-100);

        .task-action span {
            visibility: visible;
            opacity: 1;
        }

        .task-name .task-move svg path {
            stroke: var(--color-primary);
        }
    }

    .add-task-action {
        display: none;
    }

    .add-task-action--active {
        display: flex;
    }
}

.select2-container--open .select2-dropdown {
    left: 0;
    min-width: 200px !important;
    border: 1px solid var(--border-color) !important;
}

.select2-container--default .select2-results__option span {
    display: flex;
    align-items: center;
    gap: 5px;

    img {
        border-radius: 50%;
        width: 25px;
        height: 25px;
    }
}

.task-status--closed.task-single .task-name .task-title {
    text-decoration: line-through;
    font-style: italic;
    color: var(--text-light);
}

.task-status--new.task-single .task-status .dropdown-toggle {
    color: var(--text-light);

    svg {
        stroke: var(--text-light);
    }
}

.task-status--in_progress.task-single .task-status .dropdown-toggle {
    color: var(--color-warning);

    svg {
        stroke: var(--color-warning);
    }
}

.task-status--ready_for_test.task-single .task-status .dropdown-toggle {
    color: #e6ac00;

    svg {
        stroke: #e6ac00;
    }
}

.task-status--closed.task-single .task-status .dropdown-toggle {
    color: var(--color-success);

    svg {
        stroke: var(--color-success);
    }
}

.task-status--needs_info.task-single .task-status .dropdown-toggle {
    color: var(--color-primary);

    svg {
        stroke: var(--color-primary);
    }
}

.comment-activities__header {
    background: var(--bg-color);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    border-radius: 8px;
    padding: 0 20px;
    margin: 0 0 15px;

    li {
        margin: 0;
        padding: 0;
    }

    .nav-link {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--text-light);
        padding: 12px 0;
        transition: 0.3s ease;
    }

    .nav-link.active {
        color: var(--text-dark);
    }

    .nav-link:hover {
        color: var(--text-dark);
    }
}

.comment-area .comment-area-input {
    height: 80px;
    resize: none;
}

.comment-area {
    display: none;

    .ck-editor__editable[role="textbox"] {
        min-height: 145px;
    }

    .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content {
        border: solid var(--border-color);
        border-width: 1px 1px 0;
        border-radius: 8px 8px 0 0 !important;
    }

    .ck-rounded-corners .ck.ck-toolbar,
    .ck.ck-toolbar.ck-rounded-corners {
        border-radius: 6px;
    }

    .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused) {
        border-color: var(--border-color);
    }

    .ck-rounded-corners .ck.ck-editor__main>.ck-editor__editable,
    .ck.ck-editor__main>.ck-editor__editable.ck-rounded-corners {
        border-radius: 0 0 8px 8px !important;
        padding-bottom: 50px;
    }
}

.comment-area--show {
    display: block;
}

.comment-editor-wrapper--show {
    display: block;
}

.comment-single,
.activity-single {
    padding: 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.comment-single:not(:last-child),
.activity-single:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
}

.comment-single__media img,
.activity-single__media img {
    border-radius: 50%;
    width: 48px;
    height: 48px;
}

.comment-single__author,
.activity-single__author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.comment-single__author-name,
.activity-single__author-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-primary);
}

.comment-single__time,
.activity-single__time {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-light);
}

.comment-single__comment-text {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-dark);

    .user-tagged {
        color: var(--color-primary);
    }

    p {
        margin: 0;
    }
}

.activity-single__details {
    display: flex;
    align-items: center;
    gap: 10px;
}

.activity-single__type {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    display: block;
    border-radius: 4px;
    background: #F2F4F7;
    padding: 2px 6px;
}

.activity-single__changes {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-dark);

    svg {
        margin: 0;
        width: 14px;
    }
}

/* user story single sidebar */
.details-page-sidebar {}

.details-page-sidebar__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;

    h2 {
        font-size: 24px;
        font-weight: 600;
        color: var(--text-dark);
        margin: 0;
    }

    .add-user-story__status {
        select {
            height: 28px;
            border-radius: 4px;
            padding: 0 9px;
        }
    }
}

.details-page-sidebar__contents {

    .add-user-story__points,
    .assign-user-wrapper,
    .add-user-story__points {
        h4 {
            font-size: 18px;
            font-weight: 500;
            color: var(--text-dark);
        }
    }

    .assign-user-wrapper,
    .add-user-story__points {
        margin-bottom: 30px;
        padding-bottom: 30px;
        border-bottom: 1px solid var(--border-color);
    }

    .user-assigned-wrapper {
        margin: 0;
    }

    .assign-user-wrapper .assign-multiple-user span {
        display: block;
    }

    .assign-user-wrapper {
        .dropdown {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .assign-multiple-user,
        .assign-self {
            display: flex;
            align-items: center;
            gap: 6px;
            background: var(--color-primary-100);
            border-radius: 8px;
            padding: 8px 12px;

            svg {
                margin: 0;
                width: 16px;
            }
        }
    }
}

/* Set due date modal */
.set-due-date-modal {
    .select-due-date-input {
        margin-bottom: 20px;
    }

    .predefined-due-dates {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 30px;

        .btn {
            padding: 8px 12px;
        }

        .btn:hover {
            background: var(--color-primary);
            border-color: var(--color-primary);
            color: #fff;
        }
    }

    .due-date-reason {
        margin-bottom: 30px;

        h3 {
            margin: 0 0 10px 0;
            font-size: 16px;
            font-weight: 500;
            color: var(--text-dark);
        }

        textarea {
            height: 147px;
            padding: 20px;
            resize: none;
        }
    }
}

/* Block task modal */
.block-task-modal,
.block-epic-modal {
    textarea {
        height: 147px;
        padding: 20px;
        resize: none;
        margin-bottom: 30px;
    }
}

/* Move task modal */
.move-task-modal {
    .total-movable-items {
        display: block;
        text-align: center;
        margin-bottom: 30px;
    }
}

/* Sprint board header */
.sprint-stats {
    gap: 50px;

    .sprint-progresses {
        min-width: 494px;
        display: flex;
        align-items: center;
        gap: 30px;
    }

    .scrum-stats__progress {
        width: 70%;
        flex: none;
    }

    .sprint-stats__info {
        width: 30%;
        flex: none !important;
    }

    .sprint-progresses,
    .sprint-task-summary {
        position: relative;
    }

    .sprint-progresses:after,
    .sprint-task-summary:after {
        content: '';
        width: 1px;
        height: 100%;
        background: var(--border-color);
        position: absolute;
        right: -25px;
        top: 50%;
        transform: translateY(-50%);
    }

    .sprint-stats__info {
        display: flex;
        align-items: center;
        gap: 30px;
        width: 100%;
    }

    .sprint-stats__info span {
        font-weight: 500;
        font-size: 16px;
        color: var(--text-light);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .sprint-stats__info span strong {
        font-size: 18px;
        font-weight: 600;
        color: var(--text-dark);
    }

    .sprint-stats__info span svg {
        width: 22px;
        height: 22px;
        margin: 0 5px 0 0;
        stroke: var(--text-dark);
    }

    .sprint-move-task {
        cursor: pointer;
    }

    .sprint-stats__sos {
        gap: 5px;
    }
}

.sprint-table-wrapper {
    margin-top: 28px;
    width: 100%;
    overflow: auto;
}

.sprint-table {
    width: 1550px;

    .sprint-table-head,
    .sprint-table-row {
        display: flex;
        gap: 4px;
    }

    .sprint-table-head {
        align-items: center;
        margin-bottom: 8px;

        .sprint-table-data {
            border-radius: 8px 8px 0 0;
            padding: 14px 12px;
            font-size: 14px;
            font-weight: 500;
            text-transform: uppercase;
            border-bottom: 3px solid var(--bg-color);
        }

        .sprint-table-data--new {
            border-bottom-color: var(--text-light);
        }

        .sprint-table-data--in-progress {
            border-bottom-color: var(--color-warning);
        }

        .sprint-table-data--ready-for-test {
            border-bottom-color: #ffc107;
        }

        .sprint-table-data--closed {
            border-bottom-color: var(--color-success);
        }

        .sprint-table-data--info {
            border-bottom-color: var(--color-primary);
        }
    }

    .sprint-table-row {
        margin-bottom: 4px;
        align-items: stretch;
    }

    .sprint-table-data {
        width: 255px;
        background: var(--bg-color-gray);
        padding: 15px;
    }

    .sprint-table-body {
        .sprint-table-data {
            min-height: 180px;
        }
    }

    .sprint-table-head .sprint-table-data:first-child,
    .sprint-table-row .sprint-table-data:first-child {
        background: #F9FAFB;
    }

    .sprint-table-row .sprint-table-data.blocked-sprint {
        background: var(--color-danger-100);
    }

    .sprint-table-data-inner-content {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 20px;

        a {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-dark);

            span {
                font-size: 14px;
                font-weight: 500;
                color: var(--color-primary);
            }
        }
    }

    .sprint-table-data-inner-action {
        display: flex;
        align-items: center;

        span {
            cursor: pointer;
            width: 25px;
            height: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            transition: 0.3s ease;
        }

        svg {
            width: 16px;
            height: 16px;
            stroke: #98A2B3;
            transition: 0.3s ease;
            margin: 0;
        }

        span:hover {
            background: var(--color-primary-100);

            svg {
                stroke: var(--color-primary);
            }
        }
    }

    .sprint-table-data-inner-status {
        margin-top: 15px;
        display: flex;
        align-items: center;
        gap: 8px;

        svg {
            margin: 0;
            width: 16px;
            height: 16px;
        }

        .sprint-has-due-date svg {
            stroke: var(--color-warning);
        }

        .sprint-is-blocked svg {
            stroke: var(--color-danger);
        }
    }

    .sprint-table-task-single {
        background: #fff;
        border-radius: 4px;
        padding: 15px 32px 15px 12px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        margin-bottom: 15px;
        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
        cursor: move;

        .dropdown {
            position: absolute;
            right: 5px;
            top: 6px;
        }

        .dropdown-toggle {
            cursor: pointer;

            svg {
                margin: 0;
                width: 16px;
                height: 16px;
                stroke: var(--text-light);
            }
        }

        .dropdown-menu {
            padding: 4px;

            svg {
                width: 14px;
                height: 14px;
                stroke: var(--text-light);
                margin: 0 6px 0 0;
                transition: 0.3s ease;
            }

            a {
                font-size: 12px;
                font-weight: 400;
                color: var(--text-light);
                border-radius: 3px;
                transition: 0.3s ease;
            }

            a:hover {
                background: var(--color-primary);
                color: #fff;

                svg {
                    stroke: #fff;
                }
            }
        }

        .sprint-table-task-name {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-dark);
            cursor: pointer;

            span {
                color: var(--color-primary);
            }
        }

        .sprint-table-task-assigned-to img {
            border-radius: 50%;
            cursor: pointer;
        }
    }

    .sprint-table-task-single.blocked-task {
        background: var(--color-danger-100);
        border: 1px solid var(--color-danger);
    }
}

/* Epic table */
.epic-contents,
.sprint-board-contents {
    min-height: 350px;
    max-width: calc(100vw - 310px);
    overflow: hidden;
}

.epic-table-wrapper {
    width: 100%;
    min-height: inherit;
    overflow-x: auto;
    overflow-y: visible;
}

.epic-table {
    width: 1550px;

    .epic-table-head,
    .epic-table-row {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .epic-table-head {
        margin-bottom: 15px;

        .epic-table-data {
            font-size: 16px;
            font-weight: 500;
            color: var(--text-light);
        }
    }

    .epic-table-data--name {
        width: 445px;
    }

    .epic-table-data--project {
        width: 200px;
    }

    .epic-table-data--sprint {
        width: 165px;
    }

    .epic-table-data--assigned {
        width: 200px;
    }

    .epic-table-data--status {
        width: 165px;
    }

    .epic-table-data--progress {
        width: 300px;
    }

    .epic-table-row--primary {
        background: #F9FAFB;
        padding: 14px 0;
        border-radius: 10px;
        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
        transition: 0.3s ease;
    }

    .epic-table-row--active {
        box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
    }

    .epic-table-row {
        .epic-table-data:first-child {
            padding-left: 20px;
        }

        .epic-table-data:last-child {
            padding-right: 20px;
        }
    }

    .epic-table-sub-item {
        margin: 20px 0;
        display: none;

        .epic-table-row {
            margin-bottom: 14px;
        }

        .epic-table-data:first-child {
            padding-left: 60px;
        }
    }

    .epic-table-sub-item--active {
        display: block;
    }

    .epic-table-single {
        margin-bottom: 20px;

        .epic-table-data--name {
            display: flex;
            align-items: center;
            gap: 10px;

            svg {
                margin: 0;
                width: 16px;
                height: 16px;
                stroke: var(--text-light);
            }
        }

        .epic-title {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-dark);
            transition: 0.3s ease;

            span {
                color: var(--color-primary);
            }
        }

        .epic-title:hover {
            color: var(--color-primary);
        }

        .epic-sort,
        .epic-toggle {
            cursor: pointer;

            svg {
                stroke: var(--text-light);
                width: 16px;
                height: 16px;
                transition: 0.3s ease;
            }
        }

        .epic-toggle--active {
            transform: rotate(180deg);

            svg {
                stroke: var(--color-primary);
            }
        }

        .epic-sort:hover {
            svg path {
                stroke: var(--color-primary);
            }
        }

        .epic-project-logo {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--color-primary-100);

            img {
                border-radius: 50%;
            }
        }

        .epic-sprint-name {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-light);
        }

        .epic-assigned-to {
            span img {
                border-radius: 50%;
            }
        }

        .epic-assigned-to--multiple {
            display: flex;
            align-items: center;
            margin-left: 8px;

            span {
                display: block;
                border: 2px solid #fff;
                margin-left: -8px;
                width: 32px;
                height: 32px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                font-weight: 600;
                color: #475467;
                background: #F2F4F7;

                img {
                    width: 100%;
                }
            }
        }

        .epic-table-data--status {
            .dropdown-toggle {
                font-size: 14px;
                font-weight: 500;
                padding: 4px 6px 4px 8px;
                border-radius: 4px;
                background: #475467;

                svg {
                    stroke: #fff;
                    margin: -2px 0 0;
                    width: 12px;
                    height: 12px;
                }

                .task-status__text {
                    color: #fff;
                }
            }

            .dropdown-menu {
                padding: 8px 15px;

                li {
                    cursor: pointer;
                    padding: 5px 0;
                    font-size: 14px;
                    font-weight: 500;
                    color: var(--text-light);
                }
            }
        }

        .task-status--in_progress .dropdown-toggle {
            background: var(--color-danger);
        }

        .task-status--ready_for_test .dropdown-toggle {
            background: var(--color-warning);
        }

        .task-status--closed .dropdown-toggle {
            background: var(--color-success);
        }

        .task-status--needs_info .dropdown-toggle {
            background: var(--color-primary);
        }

        .epic-table-data--status.task-status--in_progress.task-single .task-status .dropdown-toggle {
            color: #fff;
        }

        .epic-table-data--progress {
            .progress {
                background-color: #c1d3fd;
            }

            .progress-bar {
                background-color: var(--color-primary);
            }
        }
    }
}

/* Epic add modal */
.epic-add-modal {
    textarea.form-control {
        height: 150px;
        resize: none;
        padding: 15px;
    }
}

/* Epic details: related user stories */
.related-user-stories {
    margin-bottom: 30px;
}

.related-user-stories__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-color);
    border-radius: 6px;
    padding-left: 20px;

    span {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-dark);
    }

    .related-user-stories__add {
        background: var(--color-primary);
        border: 0 none;
        border-radius: 6px;
        box-shadow: none;
        outline: 0;
        width: 47px;
        height: 47px;
        display: flex;
        align-items: center;
        justify-content: center;

        svg {
            width: 24px;
            height: 24px;
            stroke: #fff;
        }
    }
}

.related-user-stories__list {
    .related-user-story {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 20px 15px;
    }

    .related-user-story:not(:last-child) {
        border-bottom: 1px solid var(--border-color);
    }
}

.related-user-story__title {
    width: 58%;
    font-size: 14px;
    font-weight: 500;

    span {
        display: inline-block;
        padding-right: 10px;
        color: var(--color-primary);
    }

    a {
        color: #344054;
        transition: 0.3s ease;
    }

    a:hover {
        color: var(--color-primary);
    }
}

.related-user-story__project {
    width: 12%;
    display: flex;
    align-items: center;
    gap: 15px;
}

.related-user-story__unlink {
    visibility: hidden;
    opacity: 0;
    transition: 0.3s ease;

    svg {
        width: 16px;
        height: 16px;
        stroke: var(--text-light);
        transition: 0.3s ease;
    }
}

.related-user-story__unlink:hover {
    svg {
        stroke: var(--color-primary);
    }
}

.related-user-story__project-logo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primary-100);
    display: flex;
    align-items: center;
    justify-content: center;

    img {
        border-radius: 50%;
    }
}

.related-user-story__status {
    width: 12%;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-light);
}

.related-user-story__status--done {
    color: var(--color-success);
}

.related-user-story__assigned-to {
    width: 18%;
    display: flex;
    align-items: center;
    padding-left: 7px;

    img {
        border-radius: 50%;
        width: 32px;
        height: 32px;
    }

    span {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-dark);
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--color-primary-100);
        flex: none;
        margin-left: -7px;
    }
}

.related-user-stories__list .related-user-story:hover {
    .related-user-story__unlink {
        visibility: visible;
        opacity: 1;
    }
}

/* Epic relationship modal */
.new-user-story-subject__tab-panel {
    display: none;
}

.new-user-story-subject__tab-panel.active {
    display: block;
}

.epic-relationship-modal {
    ul {
        display: flex;
        align-items: center;
        gap: 10px;

        li button {
            background: var(--color-primary-100);
            font-size: 14px;
            font-weight: 600;
            padding: 10px 14px;
            border-radius: 8px;
            color: var(--color-primary);
            box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
            border: 0 none;
            outline: 0;
        }

        li button.active {
            background: var(--color-primary) !important;
            color: #fff !important;
        }
    }

    .epic-relationship-tab-content {
        .form-label {
            font-size: 16px;
            font-weight: 500;
            color: var(--text-dark);
            margin-bottom: 11px;
        }

        input.form-control,
        select.form-select {
            height: 40px;
            border-radius: 8px;
        }
    }
}

.epic-relationship-modal {
    .form-label {
        font-size: 16px;
        font-weight: 500;
        color: var(--text-dark);
        margin-bottom: 11px;
    }

    select.form-select {
        height: 40px;
        border-radius: 8px;
    }
}

.new-user-story-subject__input-method {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: -21px;
}

.new-user-story-subject__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0 none;
    box-shadow: none;
    width: 40px;
    height: 40px;
    background: var(--bg-color-gray);
    border-radius: 8px;
    transition: 0.3s ease;

    svg {
        width: 20px;
        height: 20px;
        stroke: var(--text-light);
        transition: 0.3s ease;
        margin: 0;
    }
}

.new-user-story-subject__tab:hover,
.new-user-story-subject__tab.active {
    background: var(--color-primary);

    svg {
        stroke: #fff;
    }
}

.choose-epics {
    .select-epics {
        max-height: 175px;
        border: 1px solid var(--border-color-gray);
        border-radius: 8px;
        overflow-y: scroll;
        padding: 9px;
        margin-top: 5px;
    }

    .select-epics--warning {
        border-color: var(--color-danger);
    }

    .select-epics__option {
        padding: 6px;
        color: #475467;
        font-size: 16px;
        font-weight: 400;
        cursor: pointer;
        border-radius: 6px;
    }

    .select-epics__option.active {
        background: var(--color-primary);
        color: #fff;
    }

    .no-epic-found {
        text-align: center;
        padding: 5px;
    }
}

.select2-container {
    z-index: 9999999;
}

.sv-inside_menu {
    list-style-type: none;
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0;
    padding: 0;
}

.edit .select2-container--default .select2-selection--single {
    border: none;
}


/* select-2 */

.select2-container--default .select2-selection--multiple {
    border-color: #f6f8f9;
    background-color: #f6f8f9;
    transition: 0.3s ease;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: transparent;
    background-color: #ebeff2;
}

.select2-container--default .select2-selection--single {
    border-color: #f6f8f9;
    background-color: #f6f8f9;
    transition: 0.3s ease;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #4e5e6a;

}







/* responsive css */

@media screen and (max-width: 991px) {
    .page-scrum {
        flex-direction: column;

    }

    .page-sidebar {
        margin-top: 0px;
        margin-left: 10px;
    }
}


@media screen and (max-width: 1400px) {

    .scrum-stats {
        display: block;
    }

    .scrum-stats__progress {
        margin-bottom: 15px;
    }
}


@media screen and (max-width: 1450px) {
    .scrum-contents__action {
        flex-direction: column;
        gap: 20px;

    }
}

@media screen and (max-width: 579px) {
    .page-sidebar {
        width: auto;
        max-width: 510px;
    }
}


@media screen and (max-width: 545px) {
    .scrum-stats__info {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-sidebar__header {
        flex-direction: column;
        gap: 15px
    }
}

@media screen and (max-width: 425px) {
    .scrum-contents__action__left {
        flex-direction: column;
    }

    .scrum-contents__table thead tr th:first-child {
        padding-left: 0px;
    }
}

@media screen and (max-width: 360px) {
    .scrum-contents__action__right {
        flex-direction: column;
    }
}