table.scss

.table {
    display: table;
    min-width: 100%;
    &--no--before {
        padding: 0 !important;
        &::before {
            display: none !important;
        }
        &::after {
            display: none !important;
        }
    }
    &--subaccount {
        position: relative;
        @include media(768px) {
            padding: 0 20px 20px 20px;
        }
        .table__header {
            background-color: $table-header-background;
        }
    }
    &--padded {
        position: relative;
        @include media(768px) {
            padding: 0 20px 20px 20px;
        }
        .table__header {
            background-color: $table-header-background;
        }

        @include media(768px) {
            &::before {
                position: absolute;
                top: 0;
                left: -1px;
                height: 58px;
                width: 22px;
                content: '';
                background-color: $table-header-background;
            }
            &::after {
                position: absolute;
                top: 0;
                right: -1px;
                height: 58px;
                width: 22px;
                content: '';
                background-color: $table-header-background;
            }
        }
    }

    &__row {
        display: flex;
        align-items: center;
        .btn-delete-link {
          opacity: 0;
        }
        @include media(max-width 767px) {
            padding: 20px 14px;
            border-bottom: 1px solid $default-border-color;
        }
        @include media(768px) {
            display: table-row;
            color: inherit;
            text-decoration: none;
            &:hover {
                .table__data {
                    background-color: lighten($brand-color, 34%);
                    box-shadow: inset 0 -1px 0 0 lighten($brand-color, 30%);
                }

                .copy__action {
                    opacity: 1;
                }
                .btn-delete-link {
                    opacity: 1;
                }
            }
        }
        .company__list__item__badge {
            opacity: 1;
            top: 16px;
            right: 40px;
        }
    }

    &__section {
        &--head {
            display: table-header-group;
            font-weight: $font-semi-bold;
            @include media(max-width 767px) {
                display: none;
            }
        }
        &--body {
            display: table-row-group;
        }
    }

    &__header, &__data {
        @include media(768px) {
            display: table-cell;
            vertical-align: middle;
            border-width: 0 0 1px 0;
            border-style: solid;
            border-color: lighten($default-border-color, 4%);
            cursor: pointer;
            transition: all 0.3s ease-in-out;
            &.table__checkbox {
                width: 30px;
            }

            &.table__action {
                width: 60px;
            }
        }
    }

    &__data {
        @include media(max-width 767px) {
            &--status {
                padding-right: 14px;
            }

            &--main {
                font-size: 16px;
                color: #000000;
                font-weight: $font-medium;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                width: 170px;
            }

            &--extra {
                font-size: 12px;
                color: $other-text-color;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                width: 170px;
            }

            &--link {
                color: $other-text-color;

                .link {
                    color: $other-text-color;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    width: 200px;
                }
            }

            &--full {
                width: 100%;
            }

            &--right {
                display: flex;
                align-items: center;
            }

            &--value {
                color: #4a4a4a;
                font-size: 12px;
                text-align: right;

                &--2 {
                    margin-top: 3px;
                }
            }

            &--moreicon {
                display: block;
                padding-left: 12px;
                padding-top: 4px;
            }
        }
    }

    &__header {
        @include media(768px) {
            padding: 18px 16px;
            background-color: #eceffa;
        }
    }
    &__data {
        @include media(768px) {
            padding: 12px 16px;
        }
    }

    &__dropdown {
        position: absolute;
        top: 35px;
        right: -15px;
        width: 180px;
        border-radius: 3px;
        background-color: #ffffff;
        box-shadow: 0 2px 16px 0 rgba(33, 43, 54, 0.08), 0 0 0 1px rgba(6, 44, 82, 0.1);
        z-index: 3;
        &::before {
            position: absolute;
            top: -9px;
            right: 21px;
            content: '';
            z-index: 2;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid #fff;
        }
        &::after {
            position: absolute;
            z-index: 1;
            top: -10px;
            right: 21px;
            content: '';
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid #E0E2E6;
        }
        &__container{}
        &__item {
            &__link {
                padding: 10px 15px;
                &:hover {
                    color: #fff;
                    cursor: pointer;
                    background-color: lighten($brand-color, 5%);
                }
            }
        }
    }
}

.table__data--image {
    width: 40px;
    display: block;
}

.copy {
    position: relative;
    &__action {
        display: flex;
        position: absolute;
        right: -25px;
        top: -20px;
        width: 120px;
        bottom: 0;
        justify-content: flex-end;
        align-items: center;
        opacity: 0;
        transition: all 0.3s ease-in-out;
        @include media(768px) {
            background-image: linear-gradient(to right, rgba(lighten($brand-color, 34%), 0.3), lighten($brand-color, 34%));
            right: 0;
            top: 0;
            width: 120px;
            bottom: 0;
        }

        button {
            height: 50px;
            @include media(768px) {
                height: auto;
            }
        }
        &__item {
            background-color: $brand-color;
            font-size: 10px;
            padding: 3px 6px;
            border-radius: 3px;
            color: #fff;
        }
    }
}

.table-bulk-status {
    display: flex !important;
    svg {
        margin-right: 5px;
    }
}
.bulkTransferStatus.FAILED {
    background-color: rgba(237, 99, 71, 0.32);
}
.bulkTransferStatus.PENDING {
    background-color: #ffea8a;
}
.bulkTransferStatus.NEW {
    background-color: #ffea8a;
}
.bulkTransferStatus.SUCCESSFUL {
    background-color: rgba(187, 229, 179, 0.34);
}
.bulkTransferStatus {
    .checkbox__label::before {
        background: white !important;
    }
    a {
        color: #4a90e2;
        text-decoration: none;
    }
}

.image-pad--top {
    padding-top: 2px;
}

.zIndex--off {
    z-index: -1;
}
.special-width{
    max-width: 190px;
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    @include media (768px){
        max-width: 300px;

    }
}