:root {
    --dt-row-selected: 231, 255, 218;
    --dt-row-selected-text: 0, 0, 0;
    --dt-row-selected-link: 0, 97, 0;
}

table {
    border-collapse: collapse;
    caption-side: top;

    thead {
        border-bottom: 2px solid $table-border-color;
    }

    tfoot {
        border-top: 2px solid $table-border-color;
    }

    .btn-group {
        white-space: nowrap;

        .btn {
            display: inline-block;
            float: none;
        }
    }

    &.indexes {
        td {
            vertical-align: middle;
        }
    }

    > caption {
        span {
            &.actions {
                font-size: 66%;
                font-weight: normal;
                margin: 0 .5em 0 0;
            }
        }

        button {
            &.dt-button {
                background: transparent none;
                border: 0;
                color: #595959;
                font-size: 60%;
                margin: 0 .5em;

                &:hover:not( .disabled ):active:not( .disabled ) {
                    background: transparent none;
                    border: 0;
                    box-shadow: none;
                    color: #000;
                }

                &:hover:not( .disabled ) {
                    background: transparent none;
                    border: 0;
                    color: #000;
                }
            }
        }

        div.dt-button-collection {
            font-size: 70%;
        }
    }

    &.invis {
        border: 0;

        tr,
        td {
            border: 0;
        }
    }

    +table {
        margin-top: 1em;
    }

    &.dataTable {
        border-collapse: collapse;
        margin-bottom: .5em;
        margin-top: .5em;

        &.fixedHeader-floating {
            margin-top: 0;
        }

        tfoot {
            td,
            th {
                padding: .5em;
            }

            & > tr {
                & th[scope="row"] {
                    background-color: $table-odd-row;
                    text-align: right;
                }
            }
        }

        thead {
            th,
            td {
                border-bottom: 1px solid $table-border-color;
                border-left: 1px solid $table-border-color;
                padding: .5em;

                &:first-child {
                    border-left: 0;
                }

                &:last-child {
                    border-right: 0;
                }
            }

            & > tr {
                th {
                    padding: .5em;
                    text-align: center;

                    &.dt-type-date,
                    &.dt-type-numeric {
                        text-align: center;
                    }

                    &.dt-orderable-asc span.dt-column-order,
                    &.dt-orderable-desc span.dt-column-order,
                    &.dt-ordering-asc span.dt-column-order,
                    &.dt-ordering-desc span.dt-column-order {
                        bottom: 0;
                        position: absolute;
                        right: 10px;
                        top: 0;
                        width: 7px;
                     }

                    &.dt-orderable-asc span.dt-column-order::before,
                    &.dt-ordering-asc span.dt-column-order::before {
                        content: "\f0d8";
                        font-family: "Font Awesome 6 Free";
                        font-size: 1rem;
                        line-height: .5rem;
                    }

                    &.dt-orderable-asc span.dt-column-order::before,
                    &.dt-orderable-asc span.dt-column-order::before,
                    &.dt-orderable-desc span.dt-column-order::after,
                    &.dt-orderable-desc span.dt-column-order::after {
                        color: #000;
                        opacity: .2;
                    }

                    &.dt-orderable-desc span.dt-column-order::after,
                    &.dt-ordering-desc span.dt-column-order::after {
                        content: "\f0d7";
                        font-family: "Font Awesome 6 Free";
                        font-size: 1rem;
                        line-height: .5rem;
                    }

                    &.dt-ordering-asc span.dt-column-order::before,
                    &.dt-ordering-asc span.dt-column-order::before,
                    &.dt-ordering-desc span.dt-column-order::after,
                    &.dt-ordering-desc span.dt-column-order::after {
                        color: $green-text-color;
                        opacity: 1;
                    }
                }
            }
        }

        tbody {
            td {
                padding: .5em;
            }
            tr.dtrg-group {
                td {
                    background: #e0e0e0;
                }
            }
        }
    }

    /* Row grouping */
    &.group {
        tr {
            &.odd td {
                background-color: #F3F3F3;
                border: 1px solid $table-border-color;
                border-right: 1px solid $table-border-color;
            }

            &.even td {
                background-color: #FFF;
                border-right: 1px solid $table-border-color;
            }
        }

        td.group {
            background-color: #D1CFD0;
            border-bottom: 2px solid #A19B9E;
            border-top: 2px solid #A19B9E;
        }
    }
}

td,
th {
    border-bottom: 1px solid $table-border-color;
    border-left: 1px solid $table-border-color;
    padding: .2em .9em;

    &:first-child {
        border-left: none;
    }

    &:last-child {
        border-right: none;
    }
}

td {
    background-color: #FFFFFF;
    vertical-align: top;

    &.actions {
        white-space: nowrap;
    }

    &.data {
        font-family: $font-monospace;
        text-align: right;
    }

    &.total {
        text-align: right;
    }

    input {
        &.approve {
            background-color: #FFC;
        }
    }

    /* Row grouping */
    &.group {
        background-color: #D1CFD0;
        border-bottom: 2px solid #A19B9E;
        border-top: 2px solid #A19B9E;
    }
}

th {
    background-color: $table-header-background;
    font-weight: bold;
    text-align: center;

    &[scope="row"] {
        text-align: right;
    }

    &.data {
        font-family: $font-monospace;
        text-align: right;
    }
}

tr {
    &.clickable {
        cursor: pointer;
    }

    &.expired {
        td {
            color: #999999;
        }
    }

    &.highlight {
        td {
            background-color: #F6F6F6;
            border-color: $table-border-color;
        }

        th {
            &[scope="row"] {
                background-color: #DDDDDD;
                border-color: $table-border-color;
            }
        }

        table {
            &.invis {
                td {
                    border: 0;
                }
            }
        }
    }

    &.odd {
        &.onissue {
            td {
                background-color: #FFFFE1;
            }
        }
    }

    &.ok {
        td {
            background-color: #FFFFCC;
        }

        &:nth-child( odd ) {
            td {
                background-color: #FFFFCC;
            }
        }

        &:nth-child( even ) {
            td {
                background-color: #FFFFCC;
            }
        }
    }

    &.onissue {
        td {
            background-color: #FFFFCC;
        }
    }

    &.reserved {
        td {
            background-color: #EEFFD4;
        }
    }

    &.transferred {
        td {
            background-color: #E8F0F6;
        }
    }

    &.warn {
        td {
            background-color: #FF9090;
        }

        &:nth-child( odd ) {
            td {
                background-color: #FF9090;
            }
        }
    }

    &.default {
        td {
            font-weight: bold;
        }
    }
}

.selections-table {
    tr {
        &:hover {
            td {
                background-color: #FFFF99;
            }
        }
    }
}

tfoot {
    td {
        background-color: $table-odd-row;
        font-weight: bold;
        vertical-align: middle;
    }
}

caption {
    color: #000;
    font-size: 133.9%;
    font-weight: bold;
    margin: .3em 0;
}

.highlighted-row,
.highlighted-row td {
    background-color: #FFD000;
}

.selected-row,
.selected-row td {
    background-color: #e6fa8e;
}

.warned-row,
.warned-row td {
    background-color: #FF9000;
}

.high-warned-row,
.high-warned-row td {
    background-color: #FF0000;
}

tbody {
    tr {
        &:nth-child( odd ):not( .dtrg-group, .active, .ok, .highlighted-row, .selected-row ) {
            td {
                &:not( .bg-danger, .bg-warning, .bg-info, .bg-success, .bg-primary, .highlighted-row ) {
                    background-color: $table-odd-row;
                }
            }
        }

        &.onissue {
            &:nth-child( odd ):not( .dtrg-group, .active, .ok ) {
                td {
                    &:not( .bg-danger, .bg-warning, .bg-info, .bg-success, .bg-primary ) {
                        background-color: #F9FAE0;
                    }
                }
            }
        }
    }
}

div {
    &.dt-container {
        .dt-processing {
            background-color: #F4F8F9;
            border: 2px solid $background-color-primary;
            border-radius: 3px;
            box-shadow: 2px 2px 3px 1px rgba( 0, 0, 0, .2 );
            color: #333;
            height: unset;
            left: 50%;
            padding: 1.5em;
            position: fixed;
            text-align: center;
            top: 50%;
            width: auto;

            & > div {
                &:last-child {
                    & > div {
                        background: $background-color-secondary;
                    }
                }
            }
        }

        .dt-info {
            float: none;
            line-height: 1.9em;
            padding-right: 1em;
            padding-top: 0;
        }

        .dt-length {
            display: none;
            float: none;
            line-height: 1.5em;
            padding-right: 1em;
        }

        .dt-input {
            float: none;
            padding-right: 1em;
            white-space: nowrap;

            input {
                border-radius: 0;
                padding: 1px 2px;
            }
        }

        .dt-buttons {
            display: flex;
            flex-grow: 1;
            justify-content: flex-end;

            > .dt-button {
                background: transparent none;
                border: 1px solid transparent;
                font-size: .9rem;
                padding: .3rem .5rem;

                &:hover:not( .disabled ) {
                    background: #EEE none;
                    border: 1px solid #666;
                }

                &.dt_button_clear_filter {
                    margin-right: auto;
                }
            }
        }

        .dt-paging {
            float: none;
            line-height: 1.5em;
            padding: 0;
            padding-right: 1em;

            span {
                .dt-paging-button,
                .ellipsis {
                    display: none;
                }
            }

            .dt-paging-button {
                border: 1px solid transparent;
                border-radius: 0;
                color: $green-text-color;
                padding: .2em 1em .5em 1em;

                &:hover,
                &:active {
                    background: transparent none;
                    border: 1px solid transparent;
                    box-shadow: none;
                    color: darken( $green-text-color, 5 );
                    text-decoration: underline;
                }

                &.current {
                    background: transparent none;
                    border: 0;
                    color: #666;
                    font-weight: bold;

                    &:hover,
                    &:active {
                        background: transparent none;
                        border: 0;
                        box-shadow: none;
                        color: #666;
                        cursor: default;
                    }
                }

                &.disabled {
                    opacity: .5;
                }

                &.first,
                &.previous,
                &.next,
                &.last {
                    &::before,
                    &::after {
                        display: inline-block;
                        font-family: "Font Awesome 6 Free";
                        width: 1em;
                    }
                }

                &.first {
                    display: none;

                    &::before {
                        content: "\f100";
                        padding-right: .5em;
                    }
                    /*rtl:raw:
                      &::before{
                        transform: scaleX(-1);
                        padding-left: 0em;
                        padding-right: .5em;
                     }
                      */
                }

                &.previous {
                    &::before {
                        content: "\f104";
                        padding-right: .5em;
                    }
                  /*rtl:raw:
                    &::before{
                      transform: scaleX(-1);
                      padding-left: 0em;
                      padding-right: .5em;
                   }
                    */
                }

                &.next {
                    &::after {
                        content: "\f105";
                        padding-left: .5em;
                    }

                 /*rtl:raw:
                   &::after{
                     transform: scaleX(-1);
                     padding-left: 0.9em;
                     padding-right: 0;
                  }
                   */
                }

                &.last {
                    display: none;

                    &::after {
                        content: "\f101";
                        padding-left: .5em;
                    }

                    /*rtl:raw:
                      &::after{
                        transform: scaleX(-1);
                        padding-left: 0.9em;
                        padding-right: 0;
                     }
                      */
                }
            }
        }
    }

    .dt-button-collection {
        width: auto;

        .dt-button {
            &.buttons-columnVisibility {
                display: flex;

                > span {
                    border: 1px solid transparent;
                    display: block;
                    flex-grow: 1;
                }

                &:hover {
                    background: #EEE none;
                }
            }
        }

        button {
            &.dt-button {
                margin: 0;
                text-align: left;

                &.buttons-csv,
                &.buttons-excel,
                &.buttons-html5,
                &.buttons-print {
                    background: #FFF none;
                    box-shadow: none;
                    font-size: 1.2em;
                    padding: .5em .7em;
                    text-shadow: none;

                    &:hover {
                        background: #EEE none;
                    }
                }

                &.buttons-html5:not( .disabled )::before {
                    color: $background-color-primary;
                    display: inline-block;
                    font-family: "Font Awesome 6 Free";
                    margin-right: .5em;
                    width: 1em;
                }

                &.buttons-excel:not( .disabled )::before {
                    content: "\f1c3";
                }

                &.buttons-csv:not( .disabled )::before {
                    content: "\f0ce";
                }

                &.buttons-copy:not( .disabled )::before {
                    content: "\f0c5";
                }

                &.buttons-print:not( .disabled )::before {
                    color: $background-color-primary;
                    content: "\f02f";
                    display: inline-block;
                    font-family: "Font Awesome 6 Free";
                    margin-right: .5em;
                    width: 1em;
                }
            }
        }

        .dt-button-active::after {
            color: $green-text-color;
            display: inline-block;
            font-weight: bold;
            margin-top: unset;
            padding-left: 1em;
            position: relative;
            right: unset;
            top: unset;
        }
    }

}

.dt-button-down-arrow {
    color: #787878;
    font-size: 90%;
    padding-left: .3rem;
}

.dt-info {
    margin-top: .5em;

    & + .pager {
        border-top: 1px solid $table-border-color;
        margin-top: .3em;
    }
}

.pager {
    display: flex;
    flex-wrap: wrap;
    font-size: 90%;

    &.top {
        padding-top: 1em;
    }

    &.bottom {
        border-bottom: 1px solid $table-border-color;
        padding-bottom: 1em;
    }



    input {
        &[type="search"] {
            border: 1px solid #CCC;
        }
    }

    &:empty {
        border: 0;
        padding: 0;
    }
}

.toptabs {
    .pager {
        margin: 0;
        padding-bottom: .7em;
        padding-top: .7em;

        &.bottom {
            border-bottom: 0;
            padding-bottom: 0;
        }
    }
}

.filter_column {
    & > input {
        &[type="text"] {
            border: 0;
            color: #999;
            font-size: 85%;
            width: 100%;
        }
    }
}

.table_entries {
    clear: both;
    display: flex;
}

.table_controls {
    border-top: 1px solid #EEE;
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    margin-top: .5em;
    padding-top: .5em;
}

@media ( min-width: 1275px ) {
    .dt-button-text {
        display: inline;
    }

    div {
        .dt-container {
            .dt-paging {
                .dt-paging-button {
                    &.first,
                    &.last {
                        display: inline-block;
                    }
                }
            }
        }
    }
}

@media only screen and ( min-width: 500px ) {
    div {
        .dt-container {
            .dt-length {
                display: block;
            }
        }
    }
}

@media only screen and ( max-width: 767px ) {
    div {
        .dt-container {
            .dt-info,
            .dt-paging {
                float: none;
                text-align: left;
            }
        }
    }
}

@media only screen and ( min-width: 950px ) and ( max-width: 1125px ) {
    .dt-button-text {
        display: none;
    }
}

@media only screen and ( min-width: 950px ) {
    .table_entries,
    .table_controls {
        border-top: 0;
        clear: none;
        margin: 0;
        padding: 0;
    }
}

@media only screen and ( min-width: 1500px ) {
    div {
        .dt-container {
            .dt-paging {
                span {
                    .dt-paging-button,
                    .ellipsis {
                        display: inline-block;
                    }
                }
            }
        }
    }
}
