.table-success {
    background-color: #18bc9c !important;
}

@media screen and (min-width: 650.02px) {

    .table2 {
        display: table;
        width: 100%;
        border-collapse: separate;
        font-family: 'Roboto', sans-serif;
        font-weight: 400;
        font-size: 80%;
    }

    .table_row2 {
        display: table-row;
    }

    .tbody:nth-child(4n+1) {
        background-color: rgba(0, 0, 0, 0.03);
    }

    .theader {
        display: table-row;
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .edit {
        text-align: center;
    }

    .editbox {
        text-align: center;
        width: 50px;
        display: inline-block;
        float: initial;
    }

        .editbox:first-child {
            border-right: 2px solid #ced4da;
        }

        .editbox > a > i {
            transition: transform .2s;
        }

            .editbox > a > i:hover {
                transform: scale(1.6);
            }

    .table_header2 {
        display: table-cell;
        border: 1px solid #ced4da;
        color: #212529;
        padding: 10px;
        font-weight: bold;
        white-space: nowrap;
    }

        .table_header2:first-child {
            border-left: #ccc 1px solid;
            border-top-left-radius: 5px;
        }

        .table_header2:last-child {
            border-right: #ccc 1px solid;
            border-top-right-radius: 5px;
        }

    .table_small2 {
        display: table-cell;
        min-height: 40px;
        border: 1px solid #ced4da;
    }

        .table_small2:last-child {
            display: table-cell;
            min-height: 40px;
        }

    .table_cell_button {
        text-align: center;
    }

    .table_row2 > .table_small2 > .table_cell2:nth-child(odd) {
        display: none;
        background: #bdbdbd;
        padding: 0.625rem;
        white-space: nowrap;
    }

    .table_row2 > .table_small2 > .table_cell2 {
        padding: 0.625rem;
        white-space: nowrap;
    }

    .table_row2 > .table_small2:first-child > .table_cell2:nth-child(odd) {
        border-left: #ccc 1px solid;
        white-space: nowrap;
    }

    .table_row2 > .table_small2:last-child > .table_cell2:nth-child(odd) {
        border-right: #ccc 1px solid;
        white-space: nowrap;
    }

    .tbody:last-child > .table_row2:last-child > .table_small2:last-child {
        border-bottom-right-radius: 5px;
    }

    .tbody:last-child > .table_row2:last-child > .table_small2:first-child {
        border-bottom-left-radius: 5px;
    }

    .table_row2:nth-child(2n+3) {
        background: #e9e9e9;
        color: #5b5b5b;
    }

    .table_row2:hover {
        background-color: #c7e1ff !important;
    }

    .cheader {
        display: none;
    }

    .tbody.collapse {
        display: table-row-group;
        height: auto !important;
        visibility: visible;
    }
}

@media screen and (max-width: 650px) {
    .table2 {
        position: relative;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        background-color: #fff;
        background-clip: border-box;
        border: 1px solid rgba(0, 0, 0, 0.3);
        border-radius: 0.25rem;
    }

    .table_row2:nth-child(2n+3) {
        background: none;
    }

    .theader {
        display: none;
    }

    .tbody {
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    }

    .cheader {
        padding: 0.75rem 1.25rem;
        margin-bottom: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.07);
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
        display: flex !important;
        -ms-flex-pack: justify !important;
        justify-content: space-between !important;
    }

        .cheader:nth-child(4n) {
            background-color: rgba(0, 0, 0, 0.07);
        }

        .cheader:nth-child(4n+2) {
            background-color: rgba(0, 0, 0, 0.02);
        }

    .table_header2 {
        display: table-cell;
        border: 1px solid #ced4da;
        color: #212529;
        padding: 10px;
        font-weight: bold;
        white-space: nowrap;
    }

    .table_cell2 {
        display: table-cell;
        width: auto;
        max-width: 50%;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 180px;
    }

    .table_cell_button {
        text-align: left;
    }

    .table_row2 {
        display: table;
        width: 100%;
        border-collapse: separate;
        padding: 0 1rem 0 1rem;
    }

    .table_small2 {
        display: table-row;
    }

    .table_row2 > .table_small2 > .table_cell2 {
        border: none;
        border-bottom: #ccc 1px solid
    }

    .table_row2 > .table_small2:last-child > .table_cell2 {
        border: none;
    }

    .editbox {
        text-align: right;
        width: 50px;
        display: inline-block;
        float: right;
    }

    .table_row2 > .table_small2 > .table_cell2 {
        padding: 0.625rem;
    }

    .table_row2:nth-child(2n+3) {
        background: #e9e9e9;
    }

    .swipe-btn {
        width: 50px;
        height: 50px;
        background: #ddd;
        position: absolute;
        top: 0;
        right: 50px;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-align: center !important;
        align-items: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important;
    }

    .swipe-left {
        right: 100px;
        background: #ccc;
    }
}