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

.table-sticky {
    /*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 {
    font-weight: var(--font-weight-medium);
}
.table-sticky td, .table-sticky th {
    border: 1px solid var(--border-light);
}

.table-sticky .left {
    position: sticky;
    left: 0px;
    background-color: var(--white);
    z-index: 1;
    /*width: 100px;
    min-width: 100px;
    max-width: 150px;*/
    box-shadow: inset -1px 0px 0px 0px var(--border-medium); /*to give border like effect when table collapse and scrolled*/
}
.table-sticky .right {
    position: sticky;
    right: 0px;
    background-color: var(--white);
    /*width: 100px;
    min-width: 100px;
    max-width: 150px;*/
    box-shadow: inset 1px 0px 0px 0px var(--border-medium); /*to give border like effect when table collapse and scrolled*/
}

.table-sticky thead {
    height: 40px;
    vertical-align: middle;
    position: sticky;
    top: 0px;
    background-color: var(--white);
    z-index: 2;
    box-shadow: inset 0px -1px 0px 0px var(--border-light); /*to give border like effect when table collapse and scrolled*/
}
.table-sticky thead .left {
    box-shadow: inset -1px 0px 0px 0px var(--border-medium), inset 0px -1px 0px 0px var(--border-light); /*to give border like effect when table collapse and scrolled*/
}
.table-sticky thead .right {
    box-shadow: inset 1px 0px 0px 0px var(--border-medium), inset 0px -1px 0px 0px var(--border-light); /*to give border like effect when table collapse and scrolled*/
}
.table-sticky th, .table-sticky td {
    padding: 0.5rem 0.75rem;
}
.table-sticky thead th {
    padding: 0px 0.75rem 0px 0.75rem;
}

/*removing outer borders*/
.table-sticky thead th {
    border-top: none;
}
.table-sticky th:first-child, .table-sticky td:first-child {
    border-left: none;
}
.table-sticky th:last-child, .table-sticky td:last-child {
    border-right: none;
}
.table-sticky tbody tr:last-child td{
    border-bottom: none;
}

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

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

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

.table-candidate .left:first-child {
    box-shadow: inset -1px 0px 0px 0px var(--border-light);
}
.table-candidate .left:nth-child(2) {
    left: 40.5px;
}
.table-candidate.table-sticky thead .left:first-child {
    box-shadow: inset -1px 0px 0px 0px var(--border-light), inset 0px -1px 0px 0px var(--border-light); /*to give border like effect when table collapse and scrolled*/
}


.table-candidate.table-sticky .candidate-td {
    padding: 0.75rem 1.25rem 0.75rem 0rem;
    min-width: 284px;
    max-width: 284px;
}
.table-candidate.table-sticky .candidate-td > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
}
.table-candidate.table-sticky .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 {
    padding: 12px;
}
.table-candidate.table-sticky .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 {
    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 {
    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 {
        min-width: 224px;
        max-width: 224px;
    }
}


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