Backend-Api/ServiceHost/wwwroot/AssetsClient/css/table-style.css

/* List & Table */
.list-box {
    border-radius: 10px;
    /* padding: 4px; */
    padding: 2px 6px;
}
/* End List & Table */


.ellipsed {
    display: block;
    width: 100%;
    text-overflow: ellipsis;
    overflow-x: clip;
    white-space: nowrap;
    text-align:start
}

/*********************************** Start Apply Table styles ***********************************/
.wrapper {
    width: 100%;
    /* max-width: 1000px; */
    /* margin: 1em auto; */
    /* padding: 1em; */
    /* text-align: right; */
    /* font-family: 'IranYekanEXBold' !important; */
}

.is-striped {
    background-color: rgba(233, 200, 147, 0.2);
}

.date-cell {
    width: 20%;
}

.topic-cell {
    width: 41%;
}

.access-link-cell {
    width: 13%;
}

.replay-link-cell {
    width: 13%;
}

.pdf-cell {
    width: 13%;
}

.Rtable {
    display: flex;
    flex-wrap: wrap;
    /* margin: 0 0 3em 0; */
    padding: 0;
    /* box-shadow: 0 0 40px rgba(0, 0, 0, 0.2); */
}

.Rtable .Rtable-row {
    width: 100%;
    display: flex;
    /* border: 2px solid white; */
    padding: 0.1em 0.4em;
    /* margin: 5px 2px auto; */
    margin: 2px auto;
}

.Rtable .Rtable-row .Rtable-cell {
    box-sizing: border-box;
    flex-grow: 1;
    padding: 0.2em;
    /* این هایدن برای همتراز بودن خوبه، ولی موقع رسپانسیو مقدار همتراز نامیزان میشود */
    /* overflow: hidden; */
    list-style: none;
    text-align: right;
    font-size: 12px;
    /* این قسمت برای همتراز کردن ستون های جدول است */
    width: 100%;
}


.Rtable .Rtable-row:nth-child(even) {
    border-radius: 10px;
    background-color: #ECFFFF;
}

.Rtable .Rtable-row:nth-child(odd) {
    border-radius: 10px;
    background-color: #DDF4F4;
}

.Rtable .Rtable-row:nth-child(even),
.table-workshop .Rtable .Rtable-row:nth-child(4n+2),
.table-personals .Rtable .Rtable-row:nth-child(4n+2) {
    border-radius: 10px;
    background-color: #ECFFFF;
    transition: all .3s ease;
    border: 1px solid #eee;
}

.Rtable .Rtable-row:nth-child(even):hover,
.table-workshop .Rtable .Rtable-row:nth-child(4n+2):hover,
.table-personals .Rtable .Rtable-row:nth-child(4n+2):hover {
    background-color: #C9F0F0;
    /*transform: scale(1.006);*/
}

.Rtable .Rtable-row:nth-child(odd),
.table-workshop .Rtable .Rtable-row:nth-child(4n+4),
.table-personals .Rtable .Rtable-row:nth-child(4n+4) {
    border-radius: 10px;
    background-color: #DDF4F4;
    transition: all .3s ease;
    border: 1px solid #eee;
}

.Rtable .Rtable-row:nth-child(odd):hover,
.table-workshop .Rtable .Rtable-row:nth-child(4n+4):hover,
.table-personals .Rtable .Rtable-row:nth-child(4n+4):hover {
    background-color: #C9F0F0;
    /*transform: scale(1.006);*/
}


.Rtable .Rtable-row:first-child {
    background: linear-gradient(180deg, #41D1D1 0%, #2CD0D0 100%);
    border: none !important;
    /* padding: auto 1px; */
}

.Rtable .Rtable-row:first-child:hover {
    transform: none !important;
    border: none !important;
}

.Rtable .Rtable-row .Rtable-cell.column-heading {
    color: white;
    /* padding: 1em 0.5em; */
    margin: 0.4em 0;
}

/* TH */
.Rtable .Rtable-row .Rtable-cell.column-heading:last-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.Rtable .Rtable-row .Rtable-cell.column-heading:first-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.Rtable .Rtable-row .Rtable-cell .Rtable-cell--heading {
    display: none;
}

.Rtable .Rtable-row .Rtable-cell .Rtable-cell--content {
    font-size: 12px;
    /* padding: 0 0.5em; */
    text-align: right;
    color: #0B5959;
    /* white-space: nowrap; */
}

.Rtable .Rtable-row .Rtable-cell .Rtable-cell--content .webinar-date {
    font-weight: 700;
}

.Rtable .Rtable-row .Rtable-cell .Rtable-cell--content > span {
    border-radius: 5px;
    background: rgba(87, 227, 227, 0.25);
    width: 32px;
    height: 32px;
    display: inline-block;
    padding: 6px;
}


.no-flexbox .Rtable {
    display: block;
}

.no-flexbox .Rtable.Rtable-cell {
    width: 100%;
}
/*********************************** END Apply Table styles ***********************************/










/*********************************** Start Table Contract List ***********************************/
.table-contracts .Rtable .Rtable-row .column-heading > span {
    border-radius: 5px;
    /* background: rgba(87, 227, 227, 0.25); */
    width: 60px;
    /* height: 32px; */
    padding: 0 10px;
}

    .table-contracts .Rtable .Rtable-row .column-heading > span input {
        margin: 0 0 0 5px;
    }

.table-contracts .Rtable .Rtable-row .Rtable-cell .Rtable-cell--content > span {
    border-radius: 5px;
    background: rgba(87, 227, 227, 0.25);
    width: 60px;
    height: 32px;
    display: inline-block;
    padding: 0 10px;
    font-weight: 600;
}


.table-contracts .Rtable .Rtable-row .Rtable-cell .column-heading > span {
    border-radius: 5px;
    background: rgba(87, 227, 227, 0.25);
    width: 60px;
    height: 32px;
    display: inline-block;
    padding: 6px;
    font-weight: 400;
}

.table-contracts .form-check-input {
    padding: 8px !important;
    border: 0 !important;
    outline: 1px solid #1dc9a0;
}

    .table-contracts .form-check-input:checked[type="checkbox"] {
        padding: 8px !important;
        /* outline: none; */
        outline: 1px solid #1dc9a0;
    }

    .table-contracts .form-check-input:checked {
        background-color: #1dc9a0;
        padding: 8px !important;
        outline: 1px solid #1dc9a0;
    }

    .table-contracts .form-check-input.checkAll:checked {
        background-color: #128888;
        padding: 8px !important;
        outline: 1px solid #1dc9a0;
    }

    .table-contracts .form-check-input:focus, .form-control:focus {
        border-color: #1dc9a0;
        outline: 0;
        box-shadow: none;
        outline: 1px solid #1dc9a0;
    }

.table-contracts .select-all {
    border-radius: 7px;
    padding: 6px 8px;
    background-color: #3AD1D1;
}

    .table-contracts .select-all input:checked[type="checkbox"] + label {
        color: #ffffff;
    }

    .table-contracts .select-all label {
        color: #ffffff;
        margin: 0 3px;
    }



    
    .table-contracts .contract-list .Rtable--collapse .Rtable-row--head {
        display: flex;
    }

    .table-contracts .contract-list .width1 {
        width: 10%;
    }

    .table-contracts .contract-list .width2 {
        width: 10%;
    }

    .table-contracts .contract-list .width3 {
        width: 10%;
    }

    .table-contracts .contract-list .width4 {
        width: 20%;
    }

    .table-contracts .contract-list .width5 {
        width: 10%;
    }
    .table-contracts .contract-list .width6 {
        width: 10%;
    }
    .table-contracts .contract-list .width7 {
        width: 20%;
        display: flex;
        justify-content: center;
    }

    .table-contracts .contract-list .width8 {
        width: 10%;
        display: flex;
        justify-content: end;
    }

/*********************************** End Table Contract List ***********************************/






/*********************************** Start Table Checkout List ***********************************/
.table-contracts .checkout-list .Rtable--collapse .Rtable-row--head {
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.table-contracts .checkout-list .width1 {
    width: 5%;
}

.table-contracts .checkout-list .width2 {
    width: 10%;
}

.table-contracts .checkout-list .width3 {
    width: 5%;
}

.table-contracts .checkout-list .width4 {
    width: 5%;
}

.table-contracts .checkout-list .width5 {
    width: 10%;
}

.table-contracts .checkout-list .width6 {
    width: 22%;
}

.table-contracts .checkout-list .width7 {
    width: 10%;
}

.table-contracts .checkout-list .width8 {
    width: 10%;
}

.table-contracts .checkout-list .width9 {
    width: 8%;
    display: flex;
    justify-content: center;
}

.table-contracts .checkout-list .width10 {
    width: 10%;
    display: flex;
    justify-content: end;
}
.table-contracts .checkout-list .width11 {
    width: 5%;
    display: flex;
    justify-content: end;
}
/*********************************** End Table Checkout List ***********************************/




/* ********************************************** Start Table Personal List ********************************************** */
.personalListModal .personal-list .Rtable--collapse .Rtable-row {
    padding: 4px 5px;
    outline: none;
    margin: 0.1em 0;
}

.personalListModal .personal-list .withdraw {
    background-color: rgb(177 195 195);
}

.personalListModal .personal-list .Rtable--collapse .Rtable-row--head {
    display: flex;
}

.personalListModal .personal-list .width1 {
    width: 10%;
}

.personalListModal .personal-list .width2 {
    width: 15%;
}

.personalListModal .personal-list .width3 {
    width: 20%;
}

.personalListModal .personal-list .width4 {
    width: 15%;
    display: flex;
    justify-content: center;
}

.personalListModal .personal-list .width5 {
    width: 15%;
    display: flex;
    justify-content: center;
}
.personalListModal .personal-list .width6 {
    width: 25%;
    display: flex;
    justify-content: end;
}

.personalListModal .personal-list .Rtable--collapse .Rtable-row .Rtable-cell:last-child .Rtable-cell--content {
    text-align: center;
}
/* ********************************************** End Table Personal List ********************************************** */




/* ********************************************** Start Table Personal Info List ********************************************** */
.personalListModal .personal-info-list .Rtable--collapse .Rtable-row {
    padding: 4px 5px;
    outline: none;
    margin: 0.1em 0 4px 0;
}

.personalListModal .personal-info-list .withdraw {
    background-color: rgb(177 195 195);
}

.personalListModal .personal-info-list .Rtable--collapse .Rtable-row--head {
    display: flex;
}

.personal-info-list .Rtable .Rtable-row .Rtable-cell {
    font-size: 12px;
    font-weight: 600;
}

.personalListModal .personal-info-list .width1 {
    width: 2.50%;
}

.personalListModal .personal-info-list .width2 {
    width: 10%;
}

.personalListModal .personal-info-list .width3 {
    width: 5%;
    text-align: center;
}

.personalListModal .personal-info-list .width4 {
    width: 5%;
    text-align: center;
}

.personalListModal .personal-info-list .width5 {
    width: 6.25%;
    text-align: center;
}

.personalListModal .personal-info-list .width6 {
    width: 6.25%;
    text-align: center;
}

.personalListModal .personal-info-list .width7 {
    width: 6.25%;
    text-align: center;
}

.personalListModal .personal-info-list .width8 {
    width: 5.25%;
}

.personalListModal .personal-info-list .width9 {
    width: 5.25%;
    text-align: center;
}

.personalListModal .personal-info-list .width10 {
    width: 4.25%;
    text-align: center;
}

.personalListModal .personal-info-list .width11 {
    width: 4.25%;
    text-align: center;
}

.personalListModal .personal-info-list .width12 {
    width: 10%;
    text-align: center;
}

.personalListModal .personal-info-list .width13 {
    width: 7.25%;
    text-align: center;
}

.personalListModal .personal-info-list .width14 {
    width: 10%;
    text-align: center;
}

.personalListModal .personal-info-list .width15 {
    width: 6.25%;
    text-align:center;
}

.personalListModal .personal-info-list .width16 {
    width: 2.1%;
}

.personalListModal .personal-info-list .Rtable--collapse .Rtable-row .Rtable-cell:last-child .Rtable-cell--content {
    justify-content: end;
}

.Rtable .Rtable-row .Rtable-cell.column-heading:last-child {
    justify-content: end;
}

@media (max-width: 767px) {
    .Rtable--collapse .Rtable-row .Rtable-cell {
        border-bottom: none !important;
    }
}
/* ********************************************** End Table Personal Info List ********************************************** */




    /* ********************************************** Start Table Workshop List ********************************************** */
    .table-workshop .Rtable--collapse .Rtable-row {
        padding: 1px 6px;
        outline: none;
        margin: 5px 0px 0;
    }

    .table-workshop .workshop-list .Rtable--collapse .Rtable-row--head {
        /*display: flex;*/
    }

    .table-workshop .workshop-list .width1 {
        width: 5%;
    }

    .table-workshop .workshop-list .width2 {
        width: 20%;
    }

    .table-workshop .workshop-list .width3 {
        width: 20%;
    }

    .table-workshop .workshop-list .width4 {
        width: 35%;
    }

    .table-workshop .workshop-list .width5 {
        width: 10%;
    }

    .table-workshop .workshop-list .width6 {
        width: 10%;
        display: flex;
        justify-content: end;
    }

    .table-workshop .workshop-list .Rtable--collapse .Rtable-row .Rtable-cell:last-child .Rtable-cell--content {
        /*text-align: center;*/
    }
    /* ********************************************** End Table Workshop List ********************************************** */