/* TABLE
----------------------------------------------------------*/

table {
    border: solid 1px #e8eef4;
    border-collapse: collapse;
    border-spacing: 0;
}

    table td {
        padding: 5px;
        border: solid 1px #e8eef4;
    }

        table td.tight {
            padding: 0;
            border: solid 1px #e8eef4;
            font-size: 0.85em
        }

    table th {
        padding: 6px 5px;
        text-align: left;
        color: #393939;
    }

        table th.tight {
            padding: 0;
            text-align: left;
            background-color: #e8eef4;
            border: solid 1px #e8eef4;
            color: #393939;
        }

        table th.col-action-buttons {
            min-width: 100px;
            width: 100px;
        }

/*----------------- generic table ----------------------------*/
.table-container {
    WIDTH: 100%;
    DISPLAY: table
}

    .table-container > .table-interaction-container > * {
        padding-bottom: 0.5em;
    }


    .table-container > *:not(.table-interaction-container) {
        margin-bottom: 0.5em;
    }

    .table-container > table {
        width: 100%;
    }

        .table-container > table th.hidden, .table-container > table tr.hidden, .table-container > table td.hidden {
            display: none;
        }

        .table-container > table tr:nth-child(2n+2) > td {
            background-color: #EEEEEF;
        }

        .table-container > table > thead > tr > th[data-sorting] {
            cursor: pointer;
        }

            .table-container > table > thead > tr > th[data-sorting]:after {
                content: "\f07d";
                font-family: FontAwesome;
                right: -5px;
                position: relative;
            }

            .table-container > table > thead > tr > th[data-sorting][data-sorting-direction="Ascending"]:after {
                content: "\f107";
            }

            .table-container > table > thead > tr > th[data-sorting][data-sorting-direction="Descending"]:after {
                content: "\f106";
            }

        .table-container > table > tbody a, .table-container > table > tbody a:active, .table-container > table > tbody a:hover, .table-container > table > tbody a:visited {
            color: #000;
        }

    .table-container > .pagination-wrapper > .pagination-container {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-align-content: center;
        -ms-flex-line-pack: center;
        align-content: center;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

        .table-container > .pagination-wrapper > .pagination-container > a.pagination-button {
            -webkit-order: 0;
            -ms-flex-order: 0;
            order: 0;
            -webkit-flex: 0 1 auto;
            -ms-flex: 0 1 auto;
            flex: 0 1 auto;
            -webkit-align-self: auto;
            -ms-flex-item-align: auto;
            align-self: auto;
            font-size: 1.1em;
            margin-left: 0.25em;
            margin-right: 0.25em;
            width: 1em;
        }

            .table-container > .pagination-wrapper > .pagination-container > a.pagination-button.disabled, .table-container > .pagination-wrapper > .pagination-container > a.pagination-button[disabled], .table-container > .pagination-wrapper > .pagination-container > a.pagination-button.active {
                color: #d1d1d1;
                background-color: #fff;
                background-color: initial;
                text-decoration: none;
                cursor: default;
            }

    .table-container > .table-interaction-container {
        display: table-row;
        display: flex;
        display: -webkit-flex;
        display: -ms-flexbox;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-align-content: flex-start;
        -ms-flex-line-pack: start;
        align-content: flex-start;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

        .table-container > .table-interaction-container > * {
            display: table-cell
        }

        .table-container > .table-interaction-container > .pagination-selection {
            -webkit-order: 0;
            -ms-flex-order: 0;
            order: 0;
            -webkit-flex: 0 1 auto;
            -ms-flex: 0 1 auto;
            flex: 0 1 auto;
            -webkit-align-self: auto;
            -ms-flex-item-align: auto;
            align-self: auto;
        }

        .table-container > .table-interaction-container > .searchbar-container {
            -webkit-order: 0;
            -ms-flex-order: 0;
            order: 0;
            -webkit-flex: 1 1 auto;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            -webkit-align-self: auto;
            -ms-flex-item-align: auto;
            align-self: auto;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-direction: row;
            -ms-flex-direction: row;
            flex-direction: row;
            -webkit-flex-wrap: nowrap;
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
            -webkit-justify-content: flex-start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            -webkit-align-content: flex-start;
            -ms-flex-line-pack: start;
            align-content: flex-start;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
        }

            .table-container > .table-interaction-container > .searchbar-container > label {
                margin-right: 0.25em;
            }

            .table-container > .table-interaction-container > .searchbar-container > input {
                flex: 1 1 auto;
                -webkit-align-self: auto;
                -ms-flex-item-align: auto;
                margin: 0px;
            }

    .table-container > .pagination-wrapper {
        text-align: center;
    }

.message-container {
    border-radius: 10px;
    margin-bottom: 0.25em;
    color: #000;
    font-weight: bold;
    text-align: center;
}

    .message-container > span.close {
        float: right;
        position: relative;
        right: 0.5em;
        font-size: 1em;
        top: 2px;
        cursor: pointer;
    }