@import "bootstrap/functions";
@import "variables"; // Bootstrap + AdminLTE variables in temp folder
@import "bootstrap/variables-dark";
@import "adminlte/variables-alt";
@import "bootstrap/maps";
@import "bootstrap/mixins";
@import "adminlte/mixins";

// Style conversion file, bootstrap to tabulator

//Main Theme Variables
$backgroundColor: $body-bg !default; //background color of tabulator //***
$borderColor:$table-border-color !default; //border to tabulator
$textSize:16px !default; //table text size

//header theming
$headerBackgroundColor:$body-bg !default; //border to tabulator //***
$headerForegroundColor:inherit !default; //border to tabulator
$headerSeparatorColor:$table-border-color !default; //header bottom separator color
$headerTextColor: $table-color !default; //header text color //***
$headerBorderColor:#aaa !default;  //header border color //***
$headerMargin:4px !default; //padding round header //***
$cellPadding:12px !default; //padding round header

//column header arrows
$sortArrowHover: #555 !default; //***
$sortArrowActive: #666 !default; //***
$sortArrowInactive: #bbb !default; //***

//row theming
$rowBackgroundColor:$backgroundColor !default; //table row background color
$rowAltBackgroundColor:$table-striped-bg !default; //table row background color
$rowBorderColor:$table-border-color !default; //table border color
$rowHoverBackground:$table-hover-bg !default; //row background color on hover
$rowTextColor:#333 !default; //table text color //***
$rowHoverBackground:#bbb !default; //row background color on hover //***
$rowSelectedBackground: #9ABCEA !default; //row background color when selected
$rowSelectedBackgroundHover: #769BCC !default;//row background color when selected and hovered
$editBoxColor:#1D68CD !default; //border color for edit boxes
$errorColor:#dd0000 !default; //error indication

//footer theming
$footerBorderColor:$pagination-border-color !default; //footer border color
$footerSeparatorColor:$table-border-color !default; //footer bottom separator color
$footerActiveColor:$pagination-active-color !default; //footer bottom active text color
$footerBackgroundColor:#e6e6e6 !default; //border to tabulator //***
$footerTextColor:#555 !default; //footer text color //***
$table-cell-padding-sm: 5px;

// tabulator.scss

//Tabulator Containing Element
.tabulator{
    position: relative;
    border: 1px solid $borderColor;
    background-color: $backgroundColor;
    font-size:$textSize;
    text-align: left;
    overflow:hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    &[tabulator-layout="fitDataFill"]{
        .tabulator-tableholder{
            .tabulator-table{
                min-width:100%;
            }
        }
    }
    &[tabulator-layout="fitDataTable"]{
        display: inline-block;
    }
    &.tabulator-block-select{
        user-select: none;
    }

    //column header containing element
    .tabulator-header{
        position:relative;
        box-sizing: border-box;
        width:100%;
        border-bottom:1px solid $headerSeparatorColor;
        background-color: $headerBackgroundColor;
        color: $headerTextColor;
        font-weight:bold;
        white-space: nowrap;
        overflow:hidden;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
        &.tabulator-header-hidden{
            display:none;
        }
        .tabulator-header-contents{
            position: relative;
            overflow: hidden;
            .tabulator-headers{
                display: inline-block;
            }
        }

        //individual column header element
        .tabulator-col{
            display:inline-flex;
            position:relative;
            box-sizing:border-box;
            flex-direction: column;
            justify-content: flex-start;
            border-right:1px solid $headerBorderColor;
            background:$headerBackgroundColor;
            text-align:left;
            vertical-align: bottom;
            overflow: hidden;
            &.tabulator-moving{
                position: absolute;
                border:1px solid $headerSeparatorColor;
                background:darken($headerBackgroundColor, 10%);
                pointer-events: none;
            }

            //hold content of column header
            .tabulator-col-content{
                box-sizing:border-box;
                position: relative;
                padding:4px;

                //header menu button
                .tabulator-header-popup-button{
                    padding: 0 8px;
                    &:hover{
                        cursor: pointer;
                        opacity: .6;
                    }
                }

                //hold title and sort arrow
                .tabulator-col-title-holder{
                    position: relative;
                }

                //hold title of column header
                .tabulator-col-title{
                    box-sizing:border-box;
                    width: 100%;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    vertical-align:bottom;
                    &.tabulator-col-title-wrap{
                        white-space: normal;
                        text-overflow: initial;
                    }

                    //element to hold title editor
                    .tabulator-title-editor{
                        box-sizing: border-box;
                        width: 100%;
                        border:1px solid #999;
                        padding:1px;
                        background: #fff;
                    }
                    .tabulator-header-popup-button + .tabulator-title-editor{
                        width:calc(100% - 22px);
                    }
                }

                //column sorter arrow
                .tabulator-col-sorter{
                    display: flex;
                    align-items: center;
                    position: absolute;
                    top:0;
                    bottom:0;
                    right:4px;
                    .tabulator-arrow{
                        width: 0;
                        height: 0;
                        border-left: 6px solid transparent;
                        border-right: 6px solid transparent;
                        border-bottom: 6px solid $sortArrowInactive;
                    }
                }
            }

            //complex header column group
            &.tabulator-col-group{
                //gelement to hold sub columns in column group
                .tabulator-col-group-cols{
                    position:relative;
                    display: flex;
                    border-top:1px solid $headerBorderColor;
                    overflow: hidden;
                    margin-right:-1px;
                }
            }

            //header filter containing element
            .tabulator-header-filter{
                position: relative;
                box-sizing: border-box;
                margin-top:2px;
                width:100%;
                text-align: center;

                //styling adjustment for inbuilt editors
                textarea{
                    height:auto !important;
                }
                svg{
                    margin-top: 3px;
                }
                input{
                    &::-ms-clear {
                        width : 0;
                        height: 0;
                    }
                }
            }

            //styling child elements for sortable columns
            &.tabulator-sortable{
                .tabulator-col-title{
                    padding-right:25px;
                }
                @media (hover:hover) and (pointer:fine){
                    &.tabulator-col-sorter-element:hover{
                        cursor:pointer;
                        background-color:darken($headerBackgroundColor, 10%);
                    }
                }
                &[aria-sort="none"]{
                    .tabulator-col-content .tabulator-col-sorter{
                        color: $sortArrowInactive;
                        @media (hover:hover) and (pointer:fine){
                            &.tabulator-col-sorter-element .tabulator-arrow:hover{
                                cursor:pointer;
                                border-bottom: 6px solid $sortArrowHover;
                            }
                        }
                        .tabulator-arrow{
                            border-top: none;
                            border-bottom: 6px solid $sortArrowInactive;
                        }
                    }
                }
                &[aria-sort="ascending"]{
                    .tabulator-col-content .tabulator-col-sorter{
                        color: $sortArrowActive;
                        @media (hover:hover) and (pointer:fine){
                            &.tabulator-col-sorter-element .tabulator-arrow:hover{
                                cursor:pointer;
                                border-bottom: 6px solid $sortArrowHover;
                            }
                        }
                        .tabulator-arrow{
                            border-top: none;
                            border-bottom: 6px solid $sortArrowActive;
                        }
                    }
                }
                &[aria-sort="descending"]{
                    .tabulator-col-content .tabulator-col-sorter{
                        color: $sortArrowActive;
                        @media (hover:hover) and (pointer:fine){
                            &.tabulator-col-sorter-element .tabulator-arrow:hover{
                                cursor:pointer;
                                border-top: 6px solid $sortArrowHover;
                            }
                        }
                        .tabulator-arrow{
                            border-bottom: none;
                            border-top: 6px solid $sortArrowActive;
                            color: $sortArrowActive;
                        }
                    }
                }
            }
            &.tabulator-col-vertical{
                .tabulator-col-content{
                    .tabulator-col-title{
                        writing-mode: vertical-rl;
                        text-orientation: mixed;
                        display:flex;
                        align-items:center;
                        justify-content:center;
                    }
                }
                &.tabulator-col-vertical-flip{
                    .tabulator-col-title{
                        transform: rotate(180deg);
                    }
                }
                &.tabulator-sortable{
                    .tabulator-col-title{
                        padding-right:0;
                        padding-top:20px;
                    }
                    &.tabulator-col-vertical-flip{
                        .tabulator-col-title{
                            padding-right:0;
                            padding-bottom:20px;
                        }
                    }
                    .tabulator-col-sorter{
                        justify-content: center;
                        left:0;
                        right:0;
                        top:4px;
                        bottom:auto;
                    }
                }
            }
        }
        .tabulator-frozen{
            position: sticky;
            left:0;

            // background-color: inherit;
            z-index: 10;
            &.tabulator-frozen-left{
                border-right:2px solid $rowBorderColor;
            }
            &.tabulator-frozen-right{
                border-left:2px solid $rowBorderColor;
            }
        }
        .tabulator-calcs-holder{
            box-sizing:border-box;
            background:lighten($headerBackgroundColor, 5%) !important;
            border-top:1px solid $rowBorderColor;
            border-bottom:1px solid $headerBorderColor;

            // overflow: hidden;
            .tabulator-row{
                background:lighten($headerBackgroundColor, 5%) !important;
                .tabulator-col-resize-handle{
                    display: none;
                }
            }
        }
        .tabulator-frozen-rows-holder{
            &:empty{
                display: none;
            }
        }
    }

    //scrolling element to hold table
    .tabulator-tableholder{
        position:relative;
        width:100%;
        white-space: nowrap;
        overflow:auto;
        -webkit-overflow-scrolling: touch;
        &:focus{
            outline: none;
        }

        //default placeholder element
        .tabulator-placeholder{
            box-sizing:border-box;
            display: flex;
            align-items:center;
            justify-content: center;
            &[tabulator-render-mode="virtual"]{
                min-height:100%;
                min-width:100%;
            }
            width:100%;
            .tabulator-placeholder-contents {
                display: inline-block;
                text-align: center;
                padding:10px;
                color:#ccc;
                font-weight: bold;
                font-size: 20px;
                white-space: normal;
            }
        }

        //element to hold table rows
        .tabulator-table{
            position:relative;
            display:inline-block;
            background-color:$rowBackgroundColor;
            white-space: nowrap;
            overflow:visible;
            color:$rowTextColor;

            //row element
            .tabulator-row{
                &.tabulator-calcs{
                    font-weight: bold;
                    background:$table-active-bg !important; //***
                    &.tabulator-calcs-top{
                        border-bottom:2px solid $rowBorderColor;
                    }
                    &.tabulator-calcs-bottom{
                        border-top:2px solid $rowBorderColor;
                    }
                }
            }
        }
    }

    //footer element
    .tabulator-footer{
        border-top:1px solid $footerSeparatorColor;
        background-color: $footerBackgroundColor;
        color: $footerTextColor;
        font-weight:bold;
        white-space:nowrap;
        user-select:none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
        .tabulator-footer-contents {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            padding:5px 10px;
            &:empty{
                display: none;
            }
        }
        .tabulator-calcs-holder{
            box-sizing:border-box;
            width:100%;
            text-align: left;
            background:lighten($footerBackgroundColor, 5%) !important;
            border-bottom:1px solid $rowBorderColor;
            border-top:1px solid $rowBorderColor;
            overflow: hidden;
            .tabulator-row{
                display: inline-block;
                background:lighten($footerBackgroundColor, 5%) !important;
                .tabulator-col-resize-handle{
                    display: none;
                }
            }
            &:only-child{
                margin-bottom:-5px;
                border-bottom:none;
            }
        }
        &>*+.tabulator-page-counter{
            margin-left:10px;
        }
        .tabulator-page-counter {
            font-weight: normal;
        }
        .tabulator-paginator{
            flex:1;
            text-align: right;
            color: $footerTextColor;
            font-family:inherit;
            font-weight:inherit;
            font-size:inherit;
        }

        //pagination container element
        .tabulator-page-size{
            display:inline-block;
            margin:0 5px;
            padding:2px 5px;
            border:1px solid $footerBorderColor;
            border-radius:3px;
        }
        .tabulator-pages{
            margin:0 7px;
        }

        //pagination button
        .tabulator-page{
            display:inline-block;
            margin:0 2px;
            padding:2px 5px;
            border:1px solid $footerBorderColor;
            border-radius:3px;
            background:rgba(255,255,255,.2);
            &.active{
                color:$footerActiveColor;
            }
            &:disabled{
                opacity:.5;
            }
            &:not(.disabled){
                @media (hover:hover) and (pointer:fine){
                    &:hover{
                        cursor:pointer;
                        background:rgba(0,0,0,.2);
                        color:#fff;
                    }
                }
            }
        }
    }

    //column resize handles
    .tabulator-col-resize-handle{
        position: relative;
        display: inline-block;
        width: 6px;
        margin-left: -3px;
        margin-right: -3px;
        z-index: 10;
        vertical-align: middle;
        @media (hover:hover) and (pointer:fine){
            &:hover{
                cursor:ew-resize;
            }
        }
        &:last-of-type{
            width:3px;
            margin-right:0;
        }
    }

    //holding div that contains loader and covers tabulator element to prevent interaction
    .tabulator-alert{
        position:absolute;
        display: flex;
        align-items:center;
        top:0;
        left:0;
        z-index:100;
        height:100%;
        width:100%;
        background:rgba(0,0,0,.4);
        text-align:center;

        //loading message element
        .tabulator-alert-msg {
            display:inline-block;
            margin:0 auto;
            padding:10px 20px;
            border-radius:10px;
            background:#fff;
            font-weight:bold;
            font-size:16px;

            //loading message
            &.tabulator-alert-state-msg {
                border:4px solid #333;
                color:#000;
            }

            //error message
            &.tabulator-alert-state-error {
                border:4px solid #D00;
                color:#590000;
            }
        }
    }
}

//row element
.tabulator-row{
    position: relative;
    box-sizing: border-box;
    min-height:$textSize + ($headerMargin * 2);
    background-color: $rowBackgroundColor;
    &.tabulator-row-even{
        background-color: $rowAltBackgroundColor;
    }
    @media (hover:hover) and (pointer:fine){
        &.tabulator-selectable:hover{
            background-color:$rowHoverBackground;
            cursor: pointer;
        }
    }
    &.tabulator-selected{
        background-color:$rowSelectedBackground;
    }
    @media (hover:hover) and (pointer:fine){
        &.tabulator-selected:hover{
            background-color:$rowSelectedBackgroundHover;
            cursor: pointer;
        }
    }
    &.tabulator-row-moving{
        border:1px solid #000;
        background:#fff;
    }
    &.tabulator-moving{
        position: absolute;
        border-top:1px solid  $rowBorderColor;
        border-bottom:1px solid  $rowBorderColor;
        pointer-events: none;
        z-index:15;
    }

    //row resize handles
    .tabulator-row-resize-handle{
        position:absolute;
        right:0;
        bottom:0;
        left:0;
        height:5px;
        &.prev{
            top:0;
            bottom:auto;
        }
        @media (hover:hover) and (pointer:fine){
            &:hover{
                cursor:ns-resize;
            }
        }
    }
    .tabulator-responsive-collapse{
        box-sizing:border-box;
        padding:5px;
        border-top:1px solid $rowBorderColor;
        border-bottom:1px solid $rowBorderColor;
        &:empty{
            display:none;
        }
        table{
            font-size:$textSize;
            tr{
                td{
                    position: relative;
                    &:first-of-type{
                        padding-right:10px;
                    }
                }
            }
        }
    }

    //cell element
    .tabulator-cell{
        display:inline-block;
        position: relative;
        box-sizing:border-box;
        padding:4px;
        border-right:1px solid $rowBorderColor;
        vertical-align:middle;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        &.tabulator-frozen{
            display: inline-block;
            position: sticky;
            left:0;
            background-color: inherit;
            z-index: 10;
            &.tabulator-frozen-left{
                border-right:2px solid $rowBorderColor;
            }
            &.tabulator-frozen-right{
                border-left:2px solid $rowBorderColor;
            }
        }
        &.tabulator-editing{
            border:1px solid $editBoxColor;
            outline:none;
            padding: 0;
            input, select{
                border:1px;
                background:transparent;
                outline:none;
            }
        }
        &.tabulator-validation-fail{
            border:1px solid $errorColor;
            input, select{
                border:1px;
                background:transparent;
                color: $errorColor;
            }
        }

        //movable row handle
        &.tabulator-row-handle{
            display: inline-flex;
            align-items:center;
            justify-content:center;
            -moz-user-select: none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            -o-user-select: none;

            //handle holder
            .tabulator-row-handle-box{
                width:80%;

                //Hamburger element
                .tabulator-row-handle-bar{
                    width:100%;
                    height:3px;
                    margin-top:2px;
                    background:#666;
                }
            }
        }
        .tabulator-data-tree-branch{
            display:inline-block;
            vertical-align:middle;
            height:9px;
            width:7px;
            margin-top:-9px;
            margin-right:5px;
            border-bottom-left-radius:1px;
            border-left:2px solid $rowBorderColor;
            border-bottom:2px solid $rowBorderColor;
        }
        .tabulator-data-tree-control{
            display:inline-flex;
            justify-content:center;
            align-items:center;
            vertical-align:middle;
            height:11px;
            width:11px;
            margin-right:5px;
            border:1px solid $rowTextColor;
            border-radius:2px;
            background:rgba(0, 0, 0, .1);
            overflow:hidden;
            @media (hover:hover) and (pointer:fine){
                &:hover{
                    cursor:pointer;
                    background:rgba(0, 0, 0, .2);
                }
            }
            .tabulator-data-tree-control-collapse{
                display:inline-block;
                position: relative;
                height: 7px;
                width: 1px;
                background: transparent;
                &:after {
                    position: absolute;
                    content: "";
                    left: -3px;
                    top: 3px;
                    height: 1px;
                    width: 7px;
                    background: $rowTextColor;
                }
            }
            .tabulator-data-tree-control-expand{
                display:inline-block;
                position: relative;
                height: 7px;
                width: 1px;
                background: $rowTextColor;
                &:after {
                    position: absolute;
                    content: "";
                    left: -3px;
                    top: 3px;
                    height: 1px;
                    width: 7px;
                    background: $rowTextColor;
                }
            }
        }
        .tabulator-responsive-collapse-toggle{
            display: inline-flex;
            align-items:center;
            justify-content:center;
            -moz-user-select: none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            -o-user-select: none;
            height:15px;
            width:15px;
            border-radius:20px;
            background:#666;
            color:$rowBackgroundColor;
            font-weight:bold;
            font-size:1.1em;
            @media (hover:hover) and (pointer:fine){
                &:hover{
                    opacity:.7;
                    cursor: pointer;
                }
            }
            &.open{
                .tabulator-responsive-collapse-toggle-close{
                    display:initial;
                }
                .tabulator-responsive-collapse-toggle-open{
                    display:none;
                }
            }
            svg{
                stroke:$rowBackgroundColor;
            }
            .tabulator-responsive-collapse-toggle-close{
                display:none;
            }
        }
        .tabulator-traffic-light{
            display: inline-block;
            height:14px;
            width:14px;
            border-radius:14px;
        }
    }

    //row grouping element
    &.tabulator-group{
        box-sizing:border-box;
        border-bottom:1px solid #999;
        border-right:1px solid $rowBorderColor;
        border-top:1px solid #999;
        padding:5px;
        padding-left:10px;
        background:#ccc;
        font-weight:bold;
        min-width: 100%;
        @media (hover:hover) and (pointer:fine){
            &:hover{
                cursor:pointer;
                background-color:rgba(0,0,0,.1);
            }
        }
        &.tabulator-group-visible{
            .tabulator-arrow{
                margin-right:10px;
                border-left: 6px solid transparent;
                border-right: 6px solid transparent;
                border-top: 6px solid $sortArrowActive;
                border-bottom: 0;
            }
        }
        &.tabulator-group-level-1{
            padding-left:30px;
        }
        &.tabulator-group-level-2{
            padding-left:50px;
        }
        &.tabulator-group-level-3{
            padding-left:70px;
        }
        &.tabulator-group-level-4{
            padding-left:90px;
        }
        &.tabulator-group-level-5{
            padding-left:110px;
        }
        .tabulator-group-toggle{
            display: inline-block;
        }

        //sorting arrow
        .tabulator-arrow{
            display: inline-block;
            width: 0;
            height: 0;
            margin-right:16px;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            border-right: 0;
            border-left: 6px solid $sortArrowActive;
            vertical-align:middle;
        }
        span{
            margin-left:10px;
            color:#d00;
        }
    }
}
.tabulator-popup-container{
    position: absolute;
    display:inline-block;
    box-sizing:border-box;
    background:$rowBackgroundColor;
    border:1px solid $rowBorderColor;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);
    font-size:$textSize;
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
    z-index: 10000;
}
.tabulator-popup{
    padding:5px;
    border-radius: 3px;
}
.tabulator-tooltip{
    max-width: Min(500px, 100%);
    padding:3px 5px;
    border-radius: 2px;
    box-shadow:none;
    font-size:12px;
    pointer-events: none;
}
.tabulator-menu{
    .tabulator-menu-item{
        position:relative;
        box-sizing:border-box;
        padding:5px 10px;
        user-select: none;
        &.tabulator-menu-item-disabled{
            opacity: .5;
        }
        @media (hover:hover) and (pointer:fine){
            &:not(.tabulator-menu-item-disabled):hover{
                cursor: pointer;
                background: $rowAltBackgroundColor;
            }
        }
        &.tabulator-menu-item-submenu{
            padding-right:25px;
            &::after {
                display: inline-block;
                position: absolute;
                top: calc(5px + .4em);
                right: 10px;
                height: 7px;
                width: 7px;
                content: '';
                border-width: 1px 1px 0 0;
                border-style: solid;
                border-color: $rowBorderColor;
                vertical-align: top;
                transform: rotate(45deg);
            }
        }
    }
    .tabulator-menu-separator{
        border-top:1px solid $rowBorderColor;
    }
}
.tabulator-edit-list{
    max-height:200px;
    font-size:$textSize;
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
    .tabulator-edit-list-item{
        padding:4px;
        color:$rowTextColor;
        outline:none;
        &.active{
            color:$rowBackgroundColor;
            background:$editBoxColor;
            &.focused{
                outline:1px solid rgba($rowBackgroundColor, .5);
            }
        }
        &.focused{
            outline:1px solid $editBoxColor;
        }
        @media (hover:hover) and (pointer:fine){
            &:hover{
                cursor:pointer;
                color:$rowBackgroundColor;
                background:$editBoxColor;
            }
        }
    }
    .tabulator-edit-list-placeholder{
        padding:4px;
        color:$rowTextColor;
        text-align: center;
    }
    .tabulator-edit-list-group{
        border-bottom:1px solid $rowBorderColor;
        padding:4px;
        padding-top:6px;
        color:$rowTextColor;
        font-weight:bold;
    }
    .tabulator-edit-list-item, .tabulator-edit-list-group{
        &.tabulator-edit-list-group-level-2{
            padding-left:12px;
        }
        &.tabulator-edit-list-group-level-3{
            padding-left:20px;
        }
        &.tabulator-edit-list-group-level-4{
            padding-left:28px;
        }
        &.tabulator-edit-list-group-level-5{
            padding-left:36px;
        }
    }
}

//RTL Styling
.tabulator.tabulator-ltr{
    direction: ltr;
}
.tabulator.tabulator-rtl{
    text-align: initial;
    direction: rtl;
    .tabulator-header {
        .tabulator-col{
            text-align: initial;
            border-left:1px solid $headerBorderColor;
            border-right:initial;
            &.tabulator-col-group{
                .tabulator-col-group-cols{
                    margin-right:initial;
                    margin-left:-1px;
                }
            }
            &.tabulator-sortable{
                .tabulator-col-title{
                    padding-right:0;
                    padding-left:25px;
                }
            }
            .tabulator-col-content{
                .tabulator-col-sorter{
                    left:8px;
                    right:initial;
                }
            }
        }
    }
    .tabulator-row{
        .tabulator-cell{
            border-right:initial;
            border-left:1px solid $rowBorderColor;
            .tabulator-data-tree-branch{
                margin-right:initial;
                margin-left:5px;
                border-bottom-left-radius:initial;
                border-bottom-right-radius:1px;
                border-left:initial;
                border-right:2px solid $rowBorderColor;
            }
            .tabulator-data-tree-control{
                margin-right:initial;
                margin-left:5px;
            }
            &.tabulator-frozen{
                &.tabulator-frozen-left{
                    border-left:2px solid $rowBorderColor;
                }
                &.tabulator-frozen-right{
                    border-right:2px solid $rowBorderColor;
                }
            }
        }
        .tabulator-col-resize-handle{
            &:last-of-type{
                width:3px;
                margin-left:0;
                margin-right:-3px;
            }
        }
    }
    .tabulator-footer {
        .tabulator-calcs-holder{
            text-align: initial;
        }
    }
}

// Table print styling
.tabulator-print-fullscreen{
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index: 10000;
}
body.tabulator-print-fullscreen-hide>*:not(.tabulator-print-fullscreen){
    display:none !important;
}
.tabulator-print-table{
    border-collapse: collapse;
    .tabulator-data-tree-branch{
        display:inline-block;
        vertical-align:middle;
        height:9px;
        width:7px;
        margin-top:-9px;
        margin-right:5px;
        border-bottom-left-radius:1px;
        border-left:2px solid $rowBorderColor;
        border-bottom:2px solid $rowBorderColor;
    }

    //row grouping element
    .tabulator-print-table-group{
        box-sizing:border-box;
        border-bottom:1px solid #999;
        border-right:1px solid $rowBorderColor;
        border-top:1px solid #999;
        padding:5px;
        padding-left:10px;
        background:#ccc;
        font-weight:bold;
        min-width: 100%;
        @media (hover:hover) and (pointer:fine){
            &:hover{
                cursor:pointer;
                background-color:rgba(0,0,0,.1);
            }
        }
        &.tabulator-group-visible{
            .tabulator-arrow{
                margin-right:10px;
                border-left: 6px solid transparent;
                border-right: 6px solid transparent;
                border-top: 6px solid $sortArrowActive;
                border-bottom: 0;
            }
        }
        &.tabulator-group-level-1{
            td{
                padding-left:30px !important;
            }
        }
        &.tabulator-group-level-2{
            td{
                padding-left:50px !important;
            }
        }
        &.tabulator-group-level-3{
            td{
                padding-left:70px !important;
            }
        }
        &.tabulator-group-level-4{
            td{
                padding-left:90px !important;
            }
        }
        &.tabulator-group-level-5{
            td{
                padding-left:110px !important;
            }
        }
        .tabulator-group-toggle{
            display: inline-block;
        }

        //sorting arrow
        .tabulator-arrow{
            display: inline-block;
            width: 0;
            height: 0;
            margin-right:16px;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            border-right: 0;
            border-left: 6px solid $sortArrowActive;
            vertical-align:middle;
        }
        span{
            margin-left:10px;
            color:#d00;
        }
    }
    .tabulator-data-tree-control{
        display:inline-flex;
        justify-content:center;
        align-items:center;
        vertical-align:middle;
        height:11px;
        width:11px;
        margin-right:5px;
        border:1px solid $rowTextColor;
        border-radius:2px;
        background:rgba(0, 0, 0, .1);
        overflow:hidden;
        @media (hover:hover) and (pointer:fine){
            &:hover{
                cursor:pointer;
                background:rgba(0, 0, 0, .2);
            }
        }
        .tabulator-data-tree-control-collapse{
            display:inline-block;
            position: relative;
            height: 7px;
            width: 1px;
            background: transparent;
            &:after {
                position: absolute;
                content: "";
                left: -3px;
                top: 3px;
                height: 1px;
                width: 7px;
                background: $rowTextColor;
            }
        }
        .tabulator-data-tree-control-expand{
            display:inline-block;
            position: relative;
            height: 7px;
            width: 1px;
            background: $rowTextColor;
            &:after {
                position: absolute;
                content: "";
                left: -3px;
                top: 3px;
                height: 1px;
                width: 7px;
                background: $rowTextColor;
            }
        }
    }
}

// tabulator_bootstrap5.scss
.tabulator{
    background-color: $backgroundColor;
    border:none;
    .tabulator-header{
        border-top:1px solid $headerSeparatorColor;
        border-bottom:2px solid $headerSeparatorColor;
        color:$headerForegroundColor;
        .tabulator-col{
            border-right:none;
            background-color: $headerBackgroundColor;
            .tabulator-col-content{
                padding:$cellPadding;
                .tabulator-col-sorter{
                    right:0;
                }
            }
            &.tabulator-col-group{
                .tabulator-col-group-cols{
                    border-top:1px solid $borderColor;
                }
            }
            .tabulator-header-filter{
                input{
                    padding: .375rem .75rem;
                    background-color: #fff;
                    background-clip: padding-box;
                    border: 1px solid #ced4da;
                    border-radius: .25rem;
                    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
                    font-size: 1rem;
                    line-height: 1.5;
                    color: #495057;
                    &:focus {
                        color: #495057;
                        background-color: #fff;
                        border:1px solid  $editBoxColor;
                        outline: 0;
                        // box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
                    }
                }
            }
        }
        .tabulator-calcs-holder{
            width:100%;
            border-bottom:1px solid $headerSeparatorColor;
        }
    }
    .tabulator-tableholder{
        .tabulator-placeholder{
            span{
                color:#000;
            }
        }
        .tabulator-table{
            color:inherit;
        }
    }
    .tabulator-footer{
        color:inherit;
        .tabulator-paginator{
            color:inherit;
        }
        .tabulator-pages{
            margin:0;
        }
        .tabulator-page{
            margin:0;
            margin-top:5px;
            padding:8px 12px;
            &[data-page="first"]{
                border-top-left-radius:4px;
                border-bottom-left-radius:4px;
            }
            &[data-page="last"]{
                border:1px solid $footerBorderColor;
                border-top-right-radius:4px;
                border-bottom-right-radius:4px;
            }
            &.active{
                border-color:$pagination-active-border-color;
                background-color:$pagination-active-bg;
                color:$footerActiveColor;
            }
            &:disabled{
                border-color:$pagination-disabled-border-color;
                background:$pagination-disabled-bg;
                color:$pagination-disabled-color;
            }
            &:not(.disabled){
                @media (hover:hover) and (pointer:fine){
                    &:hover{
                        border-color:$pagination-hover-border-color;
                        background:$pagination-hover-bg;
                        color:$pagination-hover-color;
                    }
                }
            }
        }
    }

    //Bootstrap theming classes
    &.thead-dark{
        .tabulator-header{
            border-color: $borderColor;
            background-color: $backgroundColor;
            color: $table-color;
            .tabulator-col{
                border-color: $borderColor;
                background-color: $backgroundColor;
                color: $table-color;
            }
        }
    }
    &.table{
        background-color: $backgroundColor;
        &:not(.thead-light) .tabulator-header{
            border-color: $borderColor;
            background-color: $backgroundColor;
            color: $table-color;
            .tabulator-col{
                border-color: $borderColor;
                background-color: $backgroundColor;
                color: $table-color;
            }
        }
        .tabulator-tableholder{
            color: $table-color;
        }
        .tabulator-row{
            border-color: $borderColor;
            background-color: $backgroundColor;
            color: $table-color;
            @media (hover:hover) and (pointer:fine){
                &:hover{
                    background-color: $borderColor;
                    .tabulator-cell{
                        background-color: $table-hover-bg;
                    }
                }
            }
            &.tabulator-selected{
                background-color:$rowSelectedBackground;
            }
        }
        .tabulator-footer{
            border-color: $borderColor !important;
            .tabulator-calcs-holder{
                border-color: $borderColor !important;
                background:$backgroundColor !important;
                .tabulator-row{
                    border-color: $borderColor !important;
                    background-color: $backgroundColor !important;
                    color: $table-color !important;
                }
            }
        }
    }
    &.table-striped{
        &:not(.table){
            .tabulator-row{
                &.tabulator-row-even{
                    background-color: $rowAltBackgroundColor;
                    &.tabulator-selected{
                        background-color:$rowSelectedBackground;
                    }
                    @media (hover:hover) and (pointer:fine){
                        &.tabulator-selectable:hover{
                            background-color:$rowHoverBackground;
                            cursor: pointer;
                        }
                        &.tabulator-selected:hover{
                            background-color:$rowSelectedBackgroundHover;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
        &.table{
            .tabulator-row{
                &:nth-child(even){
                    .tabulator-cell{
                        background-color: $table-accent-bg;
                    }
                }
            }
        }
    }
    &.table-bordered{
        border:1px solid $borderColor;
        .tabulator-header{
            .tabulator-col{
                border-right:1px solid $borderColor;
            }
        }
        .tabulator-tableholder{
            .tabulator-table{
                .tabulator-row{
                    .tabulator-cell{
                        border-right:1px solid $borderColor;
                    }
                }
            }
        }
    }
    &.table-borderless{
        .tabulator-header{
            border:none;
        }
        .tabulator-row{
            border:none;
        }
    }
    &.table-sm{
        .tabulator-header{
            .tabulator-col{
                .tabulator-col-content{
                    padding:$table-cell-padding-sm !important;
                }
            }
        }
        .tabulator-tableholder{
            .tabulator-table{
                .tabulator-row{
                    min-height:$textSize + ($table-cell-padding-sm * 2);
                    .tabulator-cell{
                        padding:$table-cell-padding-sm !important;
                    }
                }
            }
        }
        .tabulator-row{
            padding-top: 0;
            padding-bottom: 0;
        }
        .tabulator-col-resize-handle{
            padding:0;
        }
    }

    //row colors
    .tabulator-tableholder{
        .tabulator-table{
            .tabulator-row{
                &.table-primary{
                    background:map-get($table-variants, "primary") !important;
                }
                &.table-secondary{
                    background:map-get($table-variants, "secondary") !important;
                }
                &.table-success{
                    background:map-get($table-variants, "success") !important;
                }
                &.table-info{
                    background:map-get($table-variants, "info") !important;
                }
                &.table-warning{
                    background:map-get($table-variants, "warning") !important;
                }
                &.table-danger{
                    background:map-get($table-variants, "danger") !important;
                }
                &.table-light{
                    background:map-get($table-variants, "light") !important;
                }
                &.table{
                    background:map-get($table-variants, "dark") !important;
                }
                &.table-active{
                    background:$table-active-bg !important;
                }
                &.bg-primary{
                    background:map-get($table-variants, "primary") !important;
                }
                &.bg-secondary{
                    background:map-get($table-variants, "secondary") !important;
                }
                &.bg-success{
                    background:map-get($table-variants, "success") !important;
                }
                &.bg-info{
                    background:map-get($table-variants, "info") !important;
                }
                &.bg-warning{
                    background:map-get($table-variants, "warning") !important;
                }
                &.bg-danger{
                    background:map-get($table-variants, "danger") !important;
                }
                &.bg-light{
                    background:map-get($table-variants, "light") !important;
                }
                &.bg-dark{
                    background:map-get($table-variants, "dark") !important;
                }
                &.bg-active{
                    background:$table-active-bg !important;
                }
                .tabulator-cell{
                    &.table-primary{
                        background:map-get($table-variants, "primary") !important;
                    }
                    &.table-secondary{
                        background:map-get($table-variants, "secondary") !important;
                    }
                    &.table-success{
                        background:map-get($table-variants, "success") !important;
                    }
                    &.table-info{
                        background:map-get($table-variants, "info") !important;
                    }
                    &.table-warning{
                        background:map-get($table-variants, "warning") !important;
                    }
                    &.table-danger{
                        background:map-get($table-variants, "danger") !important;
                    }
                    &.table-light{
                        background:map-get($table-variants, "light") !important;
                    }
                    &.table{
                        background:map-get($table-variants, "dark") !important;
                    }
                    &.table-active{
                        background:$table-active-bg !important;
                    }
                    &.bg-primary{
                        background:map-get($table-variants, "primary") !important;
                    }
                    &.bg-secondary{
                        background:map-get($table-variants, "secondary") !important;
                    }
                    &.bg-success{
                        background:map-get($table-variants, "success") !important;
                    }
                    &.bg-info{
                        background:map-get($table-variants, "info") !important;
                    }
                    &.bg-warning{
                        background:map-get($table-variants, "warning") !important;
                    }
                    &.bg-danger{
                        background:map-get($table-variants, "danger") !important;
                    }
                    &.bg-light{
                        background:map-get($table-variants, "light") !important;
                    }
                    &.bg-dark{
                        background:map-get($table-variants, "dark") !important;
                    }
                    &.bg-active{
                        background:$table-active-bg !important;
                    }
                }
            }
        }
    }
}
.tabulator-row{
    min-height:$textSize + ($cellPadding * 2);
    border-bottom:1px solid $rowBorderColor;
    .tabulator-cell{
        padding:$cellPadding;
        border-right:none;
        &:last-of-type{
            border-right: none;
        }
        .tabulator-data-tree-control{
            border:1px solid #ccc;
            .tabulator-data-tree-control-collapse{
                &:after {
                    background: #ccc;
                }
            }
            .tabulator-data-tree-control-expand{
                background: #ccc;
                &:after {
                    background: #ccc;
                }
            }
        }
    }
    &.tabulator-group{
        background:#fafafa;
        span{
            color:#666;
        }
    }
}
.tabulator-edit-select-list{
    background:$headerBackgroundColor;
    .tabulator-edit-select-list-item{
        &.active{
            color:$headerBackgroundColor;
            &.focused{
                outline:1px solid rgba($headerBackgroundColor, .5);
            }
        }
        @media (hover:hover) and (pointer:fine){
            &:hover{
                color:$headerBackgroundColor;
            }
        }
    }
    .tabulator-edit-select-list-notice{
        color:inherit;
    }
    .tabulator-edit-select-list-group{
        color:inherit;
    }
}
.tabulator.tabulator-rtl{
    .tabulator-header {
        .tabulator-col{
            text-align: initial;
            border-left:initial;
        }
    }
}
.tabulator-print-table{
    .tabulator-print-table-group{
        background:#fafafa;
        span{
            color:#666;
        }
    }
    .tabulator-data-tree-control{
        color:inherit;
        .tabulator-data-tree-control-collapse{
            &:after {
                background: #ccc;
            }
        }
        .tabulator-data-tree-control-expand{
            background: #ccc;
            &:after {
                background: #ccc;
            }
        }
    }
}
.tabulator-popup-container{
    background:#fff;
}
.tabulator-edit-list{
    .tabulator-edit-list-item{
        &.active{
            color:#fff;
            &.focused{
                outline:1px solid rgba(#fff, .5);
            }
        }
        @media (hover:hover) and (pointer:fine){
            &:hover{
                color:#fff;
            }
        }
    }
}
@include dark-mode() { //***
    $background: map-get($table-variants, "dark");
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));
    $table-border-color: mix($color, $background, percentage($table-border-factor));
    .tabulator{
        .tabulator-header{
            border-color: $table-border-color;
            background-color: $backgroundColor;
            color: $table-color;
            .tabulator-col{
                border-color: $table-border-color;
                background-color: $backgroundColor;
                color: $table-color;

                //styling child elements for sortable columns
                &.tabulator-sortable{
                    @media (hover:hover) and (pointer:fine){
                        &.tabulator-col-sorter-element:hover{
                            background-color: darken($background, 10%);
                        }
                    }
                }
            }
        }

        //column header containing element
        .tabulator-header{
            background-color: $background;
            //individual column header element
            .tabulator-col{
                background: $background;
            }
        }

        //row colors
        .tabulator-tableholder{
            .tabulator-table{
                .tabulator-row{
                    background: $background;
                    &.tabulator-row-odd {
                        background-color: $striped-bg;
                    }
                    &.tabulator-calcs{
                        background: $active-bg !important; //***
                    }
                    @media (hover:hover) and (pointer:fine){
                        &.tabulator-selectable:hover{
                            background-color: $hover-bg;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }
}