/* ----------------DataTable styles----------------
------------------*/
#action-container {
    display: inline-flex;
}

#filter-container, #action-container {
    * [class^=col-2] {
        padding-left: 3px;
        padding-right: 3px;
    }
    .btn-primary {
        background-color: #2185d0;
        border-color: #2185d0;
    }

    .button {
        border-radius: 3px;
    }

    select {
        @extend .base-select;
        float: left;
        margin-right: 6px;
        max-width: 10.5rem;

        option:hover {
            background-color: $admin-color!important;
        }
    }
    div:not([class^='col']) {
        margin-right: 6px;
    }
}
#table-init {
    position: relative;
    z-index: 1;
    th {
        &:first-child {
            width: 20px!important;
            min-width: 20px;
        }
    }
    td {
        .in_stock {
            color: #7ad03a;
            font-weight: 700;
        }
        .out_of_stock {
            color: #a44;
            font-weight: 700;
        }
    }
}
#DataTables_Table_0 {
    width: 100% !important;
}
.dataTables_wrapper {
    .searchBox {
        margin-bottom: 0;
        .dataTables_filter {
            label {
                margin-right: 4px;
                input {
                    width: 200px;
                    box-sizing: border-box;
                }
            }
            button {
                @extend .btn-outline, .button;
            }
        }
    }
    .dataTables_paginate ul.pagination {
        font-size: 14px;
        .page-item {
            .page-link {
                color: #1b2330;
                padding: 0 8px;
                height: 32px;
                line-height: 32px;
                &:focus { box-shadow: unset; }
            }
            &.active .page-link {
                background-color: #f6f7f7;
                border-color: #ced4da;
                color: #214569;
            }
        }
    }
    .dataTables_info { font-size: 14px; }

    .card-footer {
        background: transparent;
        border: 0;
        button {
            @extend .button, .btn-primary;
            margin-left: 15px;
        }
    }
}

.dataTables_wrapper {
    .top.row.mr-30 { margin-right: -30px; }
    .dataTables_filter label {
        padding-left: 10px;
        border-radius: 4px;
        font-size: 13px;
        color: #214569;
        input {
            border: 1px solid #ced4da;
            border-radius: 3px;
            //margin-left: 10px;
            height: 32px;
            max-width: 200px;
        }
    }
    .dataTables_length label {
        font-weight: 600;
    }
    table.table {
        #select-all {
            border: 1px solid #8c8f94;
        }
        .sorting-image {
            display: block;
            width: 14px;
            margin: auto;
        }
        .category-title {
            text-transform: capitalize;
        }
        th {
            &.sorting:before, &.sorting:after {
                content: "\279C";
                font-size: 12px;
                opacity: .7;
                top: 10px;
            }
            &.sorting:before {
                transform: rotate(270deg);
                right: 7px;
            }
            &.sorting:after {
                transform: rotate(90deg);
                right: 10px;
            }
        }

        tbody tr {
            td {
                input {
                    @extend .base-checkbox;
                }
                p {
                    border-radius: 5px;
                    width: fit-content;
                    font-weight: 400;
                    margin-bottom: 0;
                    font-size: 13px;
                    padding: 0;
                    &.status_completed {
                        background: #c8d7e1;
                        color: #2e4453;
                    }
                    &.status_processing {
                        background: #c6e1c6;
                        color: #5b841b;
                    }
                    &.status_refunded {
                        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
                        text-transform: capitalize;
                        justify-content: center;
                        display: inline-flex;
                        align-items: center;
                        line-height: 2.5em;
                        width: 100%;
                        background: #e5e5e5;
                        color: #777;
                    }
                    &.status_failed {
                        background: #eba3a3;
                        color: #761919;
                    }
                }
                a, button {
                    width: auto;
                    min-width: auto;
                    background: transparent;
                    max-width: 90px;
                    font-size: 14px;
                    padding: 2px;
                }
                a.btn {
                    text-transform: uppercase;
                    color: $admin-color;
                    margin-bottom: 5px;
                }
                button.btn {
                    vertical-align: baseline;
                    color: #c63d3d;
                }
                a, button {
                    &:focus,
                    &:active {
                        box-shadow: none!important;
                    }
                }
                .btn-info:active {
                    color: $admin-color;
                }
                .btn-danger:active {
                    color: #db2828;
                }
                .btn-info:active, .btn-danger:active {
                    background-color: transparent;
                    border-color: transparent;
                }
            }
            .row-title {
                font-size: 14px;
                font-weight: 600;
                color: #135e96;
            }
        }
    }
}
.table,
#table-init {
    max-width: 100% !important;
    border: 0;
    color: #50575e;
    tbody {
        tr {
            &:nth-child(odd) { background-color: #f6f7f7; }
            &:nth-child(even) { background-color: #fff; }
            &:last-child td { border-bottom: 1px solid #c3c3c3; }
        }
    }
    thead tr th {
        border-top: 1px solid #c3c3c3;
    }
    thead tr,
    tfoot tr {
        background: #fff;
        th {
            border-bottom: 1px solid #c3c3c3;
            padding: 7px 13px 7px 10px;
            font-weight: 400;
            min-width: 100px;
            font-size: 14px;
            color: #214569;
            vertical-align: middle;
            &:after, &:before { display: none; }
            &:first-child {
                border-left: 1px solid #c3c3c3;
                width: 20px;
                padding: 7px 13px;
                &:before, &:after { display: none; }
            }
            &:last-child {
                border-right: 1px solid #c3c3c3;
                &:before, &:after { display: none; }
            }
        }
    }
    tr, td, th { border: 0; }
    tr {
        td {
            padding: 8px 10px;
            font-size: 14px;
            &:first-child {
                border-left: 1px solid #c3c3c3;
            }
            &:last-child {
                border-right: 1px solid #c3c3c3;
                padding: 8px 13px;
            }
            img {
                width: 40px;
                height: 40px;
                display: block;
                object-fit: cover;
                margin: auto;
            }
            .actions-list {
                list-style: none;
                display: flex;
                align-items: center;
                margin-bottom: 0;
                opacity: 0;
                visibility: hidden;

                li {
                    color: #999;
                    display: flex;
                    align-items: center;
                    &:not(:last-child) {
                        &::after {
                            content: '|';
                            display: inline-block;
                            margin: 0 6px;
                            color: #999;
                            vertical-align: middle;
                        }
                    }
                    a, button, span {
                        text-transform: capitalize;
                        font-size: 13px;
                        height: auto;
                        line-height: 1.2;
                        margin-bottom: 0;
                        padding: 0;
                        vertical-align: middle;
                    }
                    span {
                        color: #999;
                    }
                    a, button {
                        color: #2271b1;
                    }
                    .delete-confirm-btn {
                        color: #c63d3d;
                    }
                }
            }
            .delete_form {
                color: #c63d3d;
            }
        }
    }
    tr:hover {
        .actions-list {
            opacity: 1;
            visibility: visible;
        }
    }
}