.table-sticky-wrapper, .table-fix-header-wrapper {
    position: relative;
    overflow: auto;
    white-space: nowrap;
    /*height: 210px;*/
    border-radius: var(--border-radius-default);
}

.table-sticky,
.table-fixed-header {
    /*border-collapse: separate;*/
    border-collapse: collapse;
    border-spacing: 0;
    background-color: var(--white);
    width: 100%;
    /*body-sm*/
    font-size: 12px;
    line-height: 16px;
    font-weight: var(--font-weight-light);
}

    .table-sticky th,
    .table-fixed-header th {
        font-weight: var(--font-weight-medium);
    }

    .table-sticky .left {
        position: sticky;
        left: 0px;
        background-color: var(--white);
        z-index: 1;
    }

    .table-sticky .right {
        position: sticky;
        right: 0px;
        background-color: var(--white);
        /*width: 100px;
min-width: 100px;
max-width: 150px;*/
    }


    .table-sticky thead,
    .table-fixed-header thead {
        height: 40px;
        vertical-align: middle;
        position: sticky;
        top: 0px;
        background-color: var(--white);
        z-index: 2;
    }

    .table-sticky th, .table-sticky td,
    .table-fixed-header th, .table-fixed-header td {
        padding: 0.5rem 0.75rem;
    }

    .table-sticky thead th,
    .table-fixed-header thead th {
        padding: 0px 0.75rem 0px 0.75rem;
    }

    /*removing outer borders*/
    .table-sticky thead th,
    .table-fixed-header thead th {
        border-top: none;
    }

    .table-sticky th:first-child, .table-sticky td:first-child,
    .table-fixed-header th:first-child, .table-fixed-header td:first-child {
        border-left: none;
    }

    .table-sticky th:last-child, .table-sticky td:last-child,
    .table-fixed-header th:last-child, .table-fixed-header td:last-child {
        border-right: none;
    }

    .table-sticky tbody tr:last-child td,
    .table-fixed-header tbody tr:last-child td {
        border-bottom: none;
    }

    .table-sticky th:has( input[type=checkbox]), .table-sticky td:has( input[type=checkbox]),
    .table-fixed-header th:has(input[type=checkbox]), .table-fixed-header td:has(input[type=checkbox]) {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }

    .table-sticky td > div,
    .table-fixed-header td > div {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

        .table-sticky td > div > div,
        .table-fixed-header td > div > div {
            display: flex;
            gap: 0.5rem;
        }

    /* Candidate table*/
    .table-candidate td:not(:has( input[type=checkbox])),
    .table-fixed-header td:not(:has( input[type=checkbox])) {
        min-width: 112px;
    }

.table-candidate .left:nth-child(2) {
    left: 40px;
}

.table-candidate.table-sticky .candidate-td,
.table-candidate.table-fixed-header .candidate-td {
    padding: 0.75rem 1.25rem 0.75rem 0rem;
    min-width: 284px;
    max-width: 284px;
}

.table-candidate.table-sticky .candidate-td > div,
.table-candidate.table-fixed-header .candidate-td > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
}

.table-candidate.table-sticky .candidate-td > div > div,
.table-candidate.table-fixed-header .candidate-td > div > div {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-grow: 1;
    overflow: hidden; /*for ellipses*/
}

.candidate-td-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden; /*for ellipses*/
}

.candidate-td-name {
    display: flex;
    gap: 8px;
    font-weight: var(--font-weight-medium);
}

.candidate-td-name span:last-child {
    overflow: hidden; /*for ellipses*/
    text-overflow: ellipsis;
}

.table-candidate.table-sticky .candidate-status-td,
.table-candidate.table-fixed-header .candidate-status-td {
    padding: 12px;
}

.table-candidate.table-sticky .candidate-status-td > div,
.table-candidate.table-fixed-header .candidate-status-td > div {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.75rem;
}

.candidate-status-td > div > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 88px;
}

.table-candidate.table-sticky .assignee-td > div,
.table-candidate.table-fixed-header .assignee-td > div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.assignee-td > div > div {
    display: flex;
    gap: 0.5rem;
}

.assignee-td > div > div > span:first-child {
    text-decoration-line: underline;
}

.table-candidate.table-sticky .verification-td,
.table-candidate.table-fixed-header .verification-td {
    min-width: 200px;
}

.verification-td > div > div:first-child {
    display: flex;
    gap: 0.5rem;
}

    .verification-td > div > div:first-child > span:first-child {
        flex-grow: 1;
    }

.verification-td > div > div:last-child {
    display: flex;
    gap: 0.25rem;
}

@media (max-width: 1040px) {
    .table-candidate .left:nth-child(2) {
        position: static;
    }

    .table-candidate.table-sticky .candidate-td,
    .table-candidate.table-fixed-header .candidate-td {
        min-width: 224px;
        max-width: 224px;
    }
}


/*Pagination*/
.pagination-group {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

/*TODO V2*/
/*Remove table border*/
/*thead, tbody, tfoot, td, th {
    border-color: inherit;
    border-style: solid;
    border-width: 0 !important;
    outline: 0.5px solid var(--color-grey-light);
}*/

/*thead:not(.table-condensed thead),
tbody:not(.table-condensed tbody),
tfoot:not(.table-condensed tfoot),
td:not(.table-condensed td),
th:not(.table-condensed th) {
    border-color: inherit;
    border-style: solid;
    border-width: 0 !important;
    outline: 0.5px solid var(--color-grey-light);
}*/

.table-sticky td,
.table-sticky th,
.table-sticky thead {
    border-color: inherit;
    border-style: solid;
    border-width: 0 !important;
    outline: 0.5px solid var(--color-grey-light);
}

.table-fixed-header td,
.table-fixed-header th:not(:last-child)
 {
    border-color: inherit;
    border-style: solid;
    border-width: 0 !important;
    outline: none;
    box-shadow: inset -1px 0 0 0 var(--color-grey-light), inset 0px -1px 0 0 var(--color-grey-light);
}

.table-fixed-header tr:last-child td{
    
    box-shadow: inset -1px 0 0 0 var(--color-grey-light), inset 0px 0 0 0 var(--color-grey-light);
}


/* Remove right and bottom shadow from last header cell */
.table-fixed-header th:last-child {
    box-shadow: inset 0 -1px 0 0 var(--color-grey-light),inset 0px -1px 0 0 var(--color-grey-light);
}

/* Remove right shadow from all last cells in each row */
.table-fixed-header tr td:last-child {
  box-shadow: inset 0 -1px 0 0 var(--color-grey-light);
}

/* Remove both right and bottom shadow from the last cell in the last row */
.table-fixed-header tr:last-child td:last-child {
  box-shadow: none;
}

/*table-candidate Except column 1, 2 and last....apply the light border*/
.table-candidate.table-sticky tbody tr td:not(:nth-child(1)):not(:nth-child(2)):not(:last-child) {
    outline: none;
    box-shadow: inset -1px 0 0 0 var(--color-grey-light), inset 0px -1px 0 0 var(--color-grey-light);
}

/*table-sticky body but not table-candidate.....add dark right column border*/
.table-sticky tbody tr .left:not(.table-candidate .left) {
    outline: none;
    box-shadow: inset -1px 0 0 0 var(--color-grey-medium), inset 0px -1px 0 0 var(--color-grey-light);
}
/*table-candidate body.....add dark border on 2nd column right*/
.table-candidate.table-sticky tbody tr .left:nth-child(2) {
    /*outline: none;*/
    box-shadow: inset -1px 0 0 0 var(--color-grey-medium), inset 0px -1px 0 0 var(--color-grey-light);
}
/*candidate last right colum...added dark border*/
.table-sticky tbody tr .right:last-child {
    outline: none;
    box-shadow: inset 1px 0 0 0 var(--color-grey-medium), inset 0px -1px 0 0 var(--color-grey-light);
}

/*table-candidate thead...added light vertical border except column 1,2 and last*/
.table-candidate.table-sticky thead tr th:not(:nth-child(1)):not(:nth-child(2)):not(:last-child) {
    outline: none;
    box-shadow: inset -1px 0 0 0 var(--color-grey-light);
}
/*table-candidate thead ... added dark border to the right side of column 2*/
.table-candidate.table-sticky thead tr .left:nth-child(2) {
    outline: none;
    box-shadow: inset -1px 0 0 0 var(--color-grey-medium);
}
/* only table-sticky thead....first column added dark border right side*/
.table-sticky thead tr .left:nth-child(1):not(.table-candidate .left) {
    outline: none;
    box-shadow: inset -1px 0 0 0 var(--color-grey-medium);
}
/*add dark vertical border on both tables*/
.table-sticky thead tr .right:last-child {
    outline: none;
    box-shadow: inset 1px 0 0 0 var(--color-grey-medium);
}
/*table-sticky tbody..... added light border except 1st and last column*/
.table-sticky tbody tr td:not(:nth-child(1)):not(:last-child) {
    outline: none;
    box-shadow: inset -1px 0 0 0 var(--color-grey-light), inset 0px -1px 0 0 var(--color-grey-light);
}
/*table-sticky thead.....added light border except 1st and last column*/
.table-sticky thead tr th:not(:nth-child(1)):not(:last-child) {
    outline: none;
    box-shadow: inset -1px 0 0 0 var(--color-grey-light);
}

/*styling for last row of the tables*/

/*table candidate last row added dark border to the right side column and light border to horizontal side*/
.table-candidate.table-sticky tbody tr:last-child td:not(:nth-child(1)):not(:nth-child(2)):not(:last-child) {
    outline: none;
    box-shadow: inset -1px 0 0 0 var(--color-grey-light), inset 0px 0px 0 0 var(--color-grey-light);
}

/*table-sticky tbody..... at the last row added light border except 1st and last column*/
.table-sticky tbody tr:last-child td:not(:nth-child(1)):not(:last-child) {
    outline: none;
    box-shadow: inset -1px 0 0 0 var(--color-grey-light), inset 0px 0px 0 0 var(--color-grey-light);
}
/*table-candidate tbody...... last row's second column added dark border to the right and remove bottom border*/
.table-candidate.table-sticky tbody tr:last-child .left:nth-child(2) {
    outline: none;
    box-shadow: inset -1px 0 0 0 var(--color-grey-medium), inset 0px 0px 0 0 var(--color-grey-light);
}
/*sticky table  ..... hide last row's first column's bottom border*/
.table-sticky tbody tr:last-child .left:nth-child(1):not(.table-candidate .left) {
    outline: none;
    box-shadow: inset -1px 0 0 0 var(--color-grey-medium), inset 0px 0px 0 0 var(--color-grey-light);
}
/*add last column dark border on both tables*/
.table-sticky tbody tr:last-child .right:last-child {
    outline: none;
    box-shadow: inset 1px 0 0 0 var(--color-grey-medium), inset 0px 0px 0 0 var(--color-grey-light);
}

/*commented for select dropdown menu in the fixed header table and in the modal*/

/*.table-sticky tbody tr td:last-child .dropdown-menu,
.table-fixed-header tbody tr td:last-child .dropdown-menu {
    min-width: fit-content;
}*/

/*.table-sticky .ph-trash,
.table-fixed-header .ph-trash {
    color: var(--danger-color);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}*/
.table-sticky .ph-trash {
    color: var(--danger-color);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}

.table-container-border {
    border: 1px solid var(--grey-medium);
    /*border-radius: var(--border-radius-default);*/
}
/*table-candidate first column right border handel*/
@media(min-width:1080px) {
    .table-candidate.table-sticky thead tr .left:nth-child(1),
    .table-candidate.table-sticky tbody tr .left:nth-child(1),
    .table-candidate.table-sticky tbody tr:last-child .left:nth-child(1) {
        box-shadow: inset -1px 0 0 0 var(--color-grey-light);
    }
}
@media(max-width:575px){
    .table-sticky .left {
         left: unset; 
    }
    .table-sticky .right {
        right: unset;
    }
}