/*! Tabulasi MAIN */
#scroller {
    border: none;
}

.tab-content {
    padding: 10px 10px;
}

.nav-tabs a {
    border: 0 !important;
    background-color: transparent !important;
}

.nav-tabs li.active {
    /* border-bottom: 2px solid #3d84a8; */
    background-color: var(--nav-hover);
}

.nav-tabs li a {
    width: 100%;
    text-align: center;
    height: 23px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #666;
    padding-left: 2px;
    margin-top: 2px;
}

ul.nav.nav-tabs {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    overflow: hidden;
}

.nav-tabs li {
    flex-basis: fit-content;
    min-width: fit-content;
    display: flex;
    align-items: flex-start;
    margin: 0 !important;
}

.tabs-wrapper {
    position: relative;
}

.scroller-btn.inactive {
    opacity: 0.3;
    pointer-events: none;
}

/*! Tabulasi MAIN */


/*! Tabulasi Content */
.wrapperx {
    background-color: var(--wrapperx);
    width: 100%;
    border-radius: 0px;
    border: 1px solid var(--border);
    font-size: 10px;
}

.nav-tabs-content a {
    border: 0 !important;
    background-color: transparent !important;
}

.nav-tabs-content li.active {
    border-bottom: 2px solid #e59603;
    background-color: transparent;
    font-weight: 600;
}

.nav-tabs-content li {
    border-bottom: 2px solid transparent;
}

.nav-tabs-content li a {
    width: 100%;
    text-align: center;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: var(--text-color);
}

ul.nav.nav-tabs-content {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    overflow: hidden;
}

.nav-tabs-content li {
    padding-left: 10px;
    padding-right: 10px;
    flex-basis: fit-content;
    min-width: fit-content;
    display: flex;
    align-items: flex-start;
    margin: 0 !important;
}

.tabs-wrapperx {
    position: relative;
    border-bottom: 1px solid var(--border);
}

/*! Tabulasi Content */

/*! Image Preview */
.avatar-upload {
    position: relative;

    .avatar-edit {
        margin-top: 15px;
        z-index: 1;

        input {
            display: flex;

            +label {
                display: inline-block;
                width: 34px;
                height: 34px;
                margin-bottom: 0;
                border-radius: 0%;
                background: #FFFFFF;
                border: 1px solid transparent;
                box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
                cursor: pointer;
                font-weight: normal;
                transition: all .2s ease-in-out;

                &:hover {
                    background: #f1f1f1;
                    border-color: #d6d6d6;
                }

                &:after {
                    content: "\f040";
                    font-family: 'FontAwesome';
                    color: #757575;
                    position: absolute;
                    top: 10px;
                    left: 0;
                    right: 0;
                    text-align: center;
                    margin: auto;
                }
            }
        }
    }

    .avatar-preview {
        width: 100%;
        height: 100%;
        position: relative;
        border-radius: 0%;
        border: 1px solid #F8F8F8;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);

        >div {
            width: 100%;
            height: 100%;
            border-radius: 0%;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }
    }

    .avatar-input {
        margin-top: 15px;
        z-index: 1;

        input {
            display: flex;

            +label {
                display: inline-block;
                width: 34px;
                height: 34px;
                margin-bottom: 0;
                border-radius: 0%;
                background: #FFFFFF;
                border: 1px solid transparent;
                box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
                cursor: pointer;
                font-weight: normal;
                transition: all .2s ease-in-out;

                &:hover {
                    background: #f1f1f1;
                    border-color: #d6d6d6;
                }

                &:after {
                    content: "\f093";
                    font-family: 'FontAwesome';
                    color: #757575;
                    position: absolute;
                    top: 10px;
                    left: 0;
                    right: 0;
                    text-align: center;
                    margin: auto;
                }
            }
        }
    }
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background-color: #c3c3c3 !important;
    font-weight: 600 !important;
}

#tabel_daftar_pelanggan_length {
    display: none;
}

#tabel_daftar_pelanggan_filter {
    display: none;
}

#tabel_daftar_pelanggan_paginate {
    float: inline-start;
}

table.dataTable thead>tr>th.sorting_asc:before,
table.dataTable thead>tr>th.sorting_desc:after,
table.dataTable thead>tr>td.sorting_asc:before,
table.dataTable thead>tr>td.sorting_desc:after,
table.dataTable thead>tr>th.sorting:before,
table.dataTable thead>tr>th.sorting_asc:before,
table.dataTable thead>tr>th.sorting_desc:before,
table.dataTable thead>tr>th.sorting_asc_disabled:before,
table.dataTable thead>tr>th.sorting_desc_disabled:before,
table.dataTable thead>tr>td.sorting:before,
table.dataTable thead>tr>td.sorting_asc:before,
table.dataTable thead>tr>td.sorting_desc:before,
table.dataTable thead>tr>td.sorting_asc_disabled:before,
table.dataTable thead>tr>td.sorting_desc_disabled:before {
    display: none;
}

table.dataTable thead>tr>th.sorting:after,
table.dataTable thead>tr>th.sorting_asc:after,
table.dataTable thead>tr>th.sorting_desc:after,
table.dataTable thead>tr>th.sorting_asc_disabled:after,
table.dataTable thead>tr>th.sorting_desc_disabled:after,
table.dataTable thead>tr>td.sorting:after,
table.dataTable thead>tr>td.sorting_asc:after,
table.dataTable thead>tr>td.sorting_desc:after,
table.dataTable thead>tr>td.sorting_asc_disabled:after,
table.dataTable thead>tr>td.sorting_desc_disabled:after {
    display: none;
}

table.dataTable thead>tr>th.sorting,
table.dataTable thead>tr>th.sorting_asc,
table.dataTable thead>tr>th.sorting_desc,
table.dataTable thead>tr>th.sorting_asc_disabled,
table.dataTable thead>tr>th.sorting_desc_disabled,
table.dataTable thead>tr>td.sorting,
table.dataTable thead>tr>td.sorting_asc,
table.dataTable thead>tr>td.sorting_desc,
table.dataTable thead>tr>td.sorting_asc_disabled,
table.dataTable thead>tr>td.sorting_desc_disabled {
    padding-right: 10px !important;
}