/* options records */
    
    .options-action{
        display: flex;
        position: absolute;
        width: min-content;
        top: 50%;
        right: 60%;
        padding: .5em 1em;
        border-radius: 1em;
        background-color: white;
        box-shadow: 0 0 10px lightgrey;
        font-size: .8em;
        font-weight: 500;
        z-index: 20;
    }
    
    .options-action ul{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
        margin: 0;
        gap: .3em
    }
    
    .options-action li{
        display: block;
        text-align: start;
        width: 100%;
        white-space: nowrap;
        margin: 0;
        cursor: pointer;
    }
    
    .options-action li:hover{
        color: var(--dark-accent-color);
    }
   
   
   /* table */
    .table-container{
        position: relative;
    }
    
    .table-wrapper{
        padding: .8em 0;
        margin: 1.2em .5em .8em;
        overflow: auto;
    }
    
    .table-container .loader{
        display: none;
    }
    
    .table-container.loading .loader{
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fbfbfba6;
        z-index: 1;
    }
        
    table.table-records {
        border: none;
        width: 100%;
        min-width: max-content;
        margin: 0;
        --size-profile: 2.2em;
    }
    
    table.table-records .v-align{
        vertical-align: middle;
    }
    
    table.table-records .h-align{
        text-align: center;
    }
    
    table.table-records tr {
        border-top: solid 2px #efefef;
        border-bottom: solid 2px #efefef;
        --lines: 1;
    }
    
    table.table-records tbody tr{
        background-color: white;
    }
    
    table.table-records tr:nth-child(even){
        background-color: #f5f5f5;
    }
    
    table.table-records tr td:first-child, table.table-records tr th:first-child{
        padding-left: 1em;
    }
    
    table.table-records tr td:last-child, table.table-records tr th:last-child{
        padding-right: 1em;
    }
    
    table.table-records td, table.table-records th{
        border: none;
        padding: .5em;
        width: auto;
    }
    
    table td.focus-trigger-cell{
        position: relative;
        --node-display: none;
    }
    
    table td.focus-trigger-cell:focus, table td.focus-trigger-cell:focus-within{
        --node-display: flex;
    }
    
    table td.focus-trigger-cell .focus-node{
        display: var(--node-display);
    }
    
    table td.clickeable-cell{
        cursor: pointer;
    }
    
    table td.clickeable-cell:hover{
        color: var(--dark-accent-color);
    }
    
    table.table-records .trc-text{ /*truncated text*/
        display: -webkit-box;
        max-width: 100%;
        max-width: var(--max);
        -webkit-line-clamp: 1;
        -webkit-line-clamp: var(--lines);
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        word-wrap: break-word;
        overflow: hidden;
    }
    
    table.table-records .trc-text.trc-centered{
        text-align: center;
        margin: auto;
    }
    
    table.table-records .fixed-right-col{
        position: sticky;
        background-color: inherit;
        right: 0;
        z-index: 2;
    }
    
    table.table-records .fixed-left-col{
        position: sticky;
        background-color: inherit;
        left: 0;
        z-index: 2;
    }
    
    table.table-records thead tr{
        background-color: var(--dark-accent-color);
    }
    
    table.table-records{
        padding: .8em .5em;
        font-size: 1em;
        font-weight: 500;
        color: white;
    }
    
    table.table-records td{
        font-size: .9em;
        padding: .8em;
        color: grey;
    }
    
    table.table-records td.cell-thin-padding{
        padding: .4em;
    }
    
    table.table-records .text-name-record{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: .5em
    }
    
    table.table-records .statuses{
        display: flex;
        flex-direction: row;
        gap: .5em;
    }
    
    table.table-records .circle-percentage{
        width: 3.5em;
        height: 3.5em;
        font-size: .8em;
        margin: auto;
    }
    
    table.table-records .circle-percentage .counter{
        font-size: .85em;
    }
    
    .status-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1em;
        height: 1em;
        padding: 1em;
        border-radius: 50%;
        background-color: var(--accent-color);
        font-size: .7em;
        color: white;
    }
    
    table.table-records td .link-source-item{
        position: absolute;
        max-width: 300%;
        white-space: nowrap;
        right: calc(50% + 1.5em);
        top: 50%;
        transform: translateY(-50%);
        background-color: white;
        border-radius: 2em;
        font-size: .9em;
        padding: .1em .5em;
        box-shadow: 0 0 .5em lightgrey;
        z-index: 5;
    }
    
    table.table-records td .link-source-item span{
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
    }
    
    
    table.table-records button{
        padding: .3em 1em;
        background-color: var(--dark-accent-color);
    }
    
    
    /* seller */
    
    .lead-seller .profile{
        display: flex;
        justify-content: center;
    }
    
    
    /* no records message */
    
    .table-wrapper .no-records-message{
        display: none;
        position: sticky;
        left: 0;
        padding: 1.5em 0 1em;
        text-align: center;
    }
    
    .empty-table .no-records-message{
        display: block;
    }
    
    .table-wrapper .no-records-message .message-wrapper{
        display: flex;
        flex-direction: column;
        line-height: 1.3;
        color: #a3a3a3;
    }
    
    .table-wrapper .no-records-message .icon-no-records{
        font-size: 2em;
    }
    
    .table-wrapper .no-records-message .message-no-records h4{
        font-size: 1.1em;
        color: #a3a3a3;
    }
    
    
    /* table details */
    
    table .lead-details{
        display: flex;
        flex-direction: row;
        gap: .5em;
    }
    
    table .lead-details .initials-icon{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1.8em;
        height: 1.8em;
        min-width: 1.8em;
        background-color: grey;
        background-color: var(--accent-color);
        border-radius: 50%;
        font-weight: 500;
        color: white;
    }