/**
 * ------------------------
 * interactive tables outer
 * ------------------------
 */

.interactive-table-outer {
    position: relative;
    border: 1px solid var( --color-panthablack );
    border-radius: 2px;
    overflow: hidden;
}

    /**
     * --------------------------
     * interactive table tooblars
     * --------------------------
     */

    .interactive-table-outer > .toolbar {
        display: flex;
        display: -webkit-flex;
        display: -ms-flexbox;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        row-gap: 10px;
        column-gap: 10px;
        padding: 10px;
        background-color: var( --color-pearlwhite );
        color: var( --color-panthagray );
    }

        /**
         * ---------------------------------
         * interactive table tooblars search
         * ---------------------------------
         */

        .interactive-table-outer > .toolbar > .search-table {
            flex: none;
            position: relative;
            text-align: left;
            height: 32px;
            width: 200px;
        }

        @media( max-width: 783px ) {
            .interactive-table-outer > .toolbar > .search-table {
                order: 1;
            }
        }

        .interactive-table-outer > .toolbar > .search-table > i {
            pointer-events: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 32px;
            height: 32px;
            line-height: 1.6em;
            text-align: center;
            padding: 5px 10px;

        }

        .interactive-table-outer > .toolbar > .search-table > input {
            display: inline-block;
            padding-left: 32px;
            height: 32px;
            width: 100%;
        }

        /**
         * -------------------------------------
         * interactive table tooblars pagination
         * -------------------------------------
         */

        .interactive-table-outer > .toolbar > nav.pagination {
            flex: auto;
            text-align: center;
            height: 32px;
        }

        @media( max-width: 783px ) {
            .interactive-table-outer > .toolbar > nav.pagination {
                order: 4;
                width: 100%;
            }
        }

        .interactive-table-outer > .toolbar > nav.pagination > ul {
            justify-content: center;
        }

        /**
         * ----------------------------------
         * interactive table tooblars perpage
         * ----------------------------------
         */

        .interactive-table-outer > .toolbar > .cols-per-page {
            flex: auto;
            position: relative;
            text-align: right;
            height: 32px;
            max-width: 158px;
        }

        @media( max-width: 783px ) {
            .interactive-table-outer > .toolbar > .cols-per-page {
                flex: auto;
                order: 2;
                max-width: unset;
            }
        }

        .interactive-table-outer > .toolbar > .cols-per-page > .select-wrap {
            position: relative;
            display: inline-block;
        }

        .interactive-table-outer > .toolbar > .cols-per-page > .select-wrap > i {
            pointer-events: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 32px;
            height: 32px;
            line-height: 1.6em;
            text-align: center;
            padding: 5px 10px;
        }

        .interactive-table-outer > .toolbar > .cols-per-page > .select-wrap > select {
            padding-left: 32px;
        }

        /**
         * -----------------------------------
         * interactive table tooblars download
         * -----------------------------------
         */

        .interactive-table-outer > .toolbar > .download-pfd {
            flex: none;
        }

        @media( max-width: 783px ) {
            .interactive-table-outer > .toolbar > .download-pfd {
                order: 3;
            }
        }

    /**
     * ------------------------
     * interactive tables inner
     * ------------------------
     */

        .interactive-table-outer > .interactive-table-inner > .scroll-indicators-wrapper > .scroll-indicator-left {
            margin-left: 200px;
        }

        @media( max-width: 783px ) {
            .interactive-table-outer > .interactive-table-inner > .scroll-indicators-wrapper > .scroll-indicator-left {
                margin-left: 50vw;
            }
        }

        .interactive-table-outer > .interactive-table-inner > .scroll-indicators-wrapper > .scroll-indicator-top,
        .interactive-table-outer > .interactive-table-inner > .scroll-indicators-wrapper > .scroll-indicator-bottom {
            margin-left: 100px;
        }

        @media( max-width: 783px ) {
            .interactive-table-outer > .interactive-table-inner > .scroll-indicators-wrapper > .scroll-indicator-top,
            .interactive-table-outer > .interactive-table-inner > .scroll-indicators-wrapper > .scroll-indicator-bottom {
                margin-left: 25vw;
            }
        }

        /**
         * ------------------------------
         * interactive tables inner table
         * ------------------------------
         */

        .interactive-table-outer > .interactive-table-inner > table {
            border-radius: 0 !important;
            border: none !important;
        }

        .interactive-table-outer > .interactive-table-inner > table th, .interactive-table-outer > .interactive-table-inner > table td {
            border-radius: 0 !important;
        }

        .interactive-table-outer > .interactive-table-inner > table thead tr td,  .interactive-table-outer > .interactive-table-inner > table thead tr th {
            border-top: none !important;
            border-bottom: none !important;
        }

        .interactive-table-outer > .interactive-table-inner > table > *:last-child tr:last-child td,  .interactive-table-outer > .interactive-table-inner > table > *:last-child tr:last-child th {
            border-bottom-color: var( --color-pearlgray-light );
        }

        /*.interactive-table-outer > .interactive-table-inner > table tr > td, .interactive-table-outer > .interactive-table-inner > table tr > th {
            min-width: 200px;
            max-width: 200px;
        }

        @media( max-width: 783px ) {
            .interactive-table-outer > .interactive-table-inner > table tr > td, .interactive-table-outer > .interactive-table-inner > table tr > th {
                min-width: 50vw;
                max-width: 50vw;
            }
        } */  

        .interactive-table-outer > .interactive-table-inner > table tr > td:first-child, .interactive-table-outer > .interactive-table-inner > table tr > th:first-child {
            position: sticky;
            left: 0;
            z-index: 1;
            border-left: none !important;
        }

        .interactive-table-outer > .interactive-table-inner > table tr > td:last-child, .interactive-table-outer > .interactive-table-inner > table tr > th:last-child {
            border-right: none !important;
        }

            /**
             * ------------------------------------
             * interactive tables inner table thead
             * ------------------------------------
             */

            .interactive-table-outer > .interactive-table-inner > table > thead > tr > th > .col-heading {
                display: flex;
                display: -webkit-flex;
                display: -ms-flexbox;
                flex-wrap: nowrap;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                column-gap: 10px;
            }

            .interactive-table-outer > .interactive-table-inner > table > thead > tr > th > .col-heading > .col-name {
                flex: auto;
                font-size: 12px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .interactive-table-outer > .interactive-table-inner > table > thead > tr > th > .col-heading > .col-sort {
                flex: none;
                cursor: pointer;
                display: flex;
                display: -webkit-flex;
                display: -ms-flexbox;
                flex-wrap: nowrap;
                flex-direction: column;
                width: 20px;
                height: 32px;
                color: var( --color-pearlgray-dark );
                border: 1px solid var( --color-pearlgray-dark );
                background-color: var( --color-panthagray );
                border-radius: 2px;
            }

            .interactive-table-outer > .interactive-table-inner > table > thead > tr > th > .col-heading > .col-sort > i {
                display: block;
                width: 18px;
                height: 50%;
                transition: all 0.1s;
            }

            .interactive-table-outer > .interactive-table-inner > table > thead > tr > th > .col-heading > .col-sort > i:hover {
                background-color: var( --color-panthablack );
            }

            .interactive-table-outer > .interactive-table-inner > table > thead > tr > th > .col-heading > .col-sort > i:first-child {
                border-bottom: 1px solid var( --color-pearlgray-dark );
            }

            .interactive-table-outer > .interactive-table-inner > table > thead > tr > th > .col-heading > .col-sort > i:before {
                display: block;
                line-height: 100%;
                text-align: center;
            }

            /**
             * ------------------------------------
             * interactive tables inner table tbody
             * ------------------------------------
             */

            .interactive-table-outer > .interactive-table-inner > table > tbody {
                max-height: 640px;
            }

            .interactive-table-outer > .interactive-table-inner > table > tbody > tr.ignore {
                display: none;
            }

            .interactive-table-outer > .interactive-table-inner > table > tbody > tr > th, .interactive-table-outer > .interactive-table-inner > table > tbody > tr > td {
                position: relative;
                font-size: 12px;
            }

            .interactive-table-outer > .interactive-table-inner > table > tbody > tr > th.result::before, .interactive-table-outer > .interactive-table-inner > table > tbody > tr > td.result::before {
                pointer-events: none;
                content: '';
                position: absolute;
                top: -1px;
                left: -1px;
                width: calc( 100% + 2px );
                height: calc( 100% + 2px );
                border: 1px double var( --color-lime );
                background: repeating-linear-gradient( 45deg, var( --color-lime ), var( --color-lime ) 5px, var( --color-white ) 5px, var( --color-white ) 10px );
                opacity: 0.2;
            }