﻿.tableContainer {
    border-collapse: separate;
    border-radius: 10px;
    -moz-border-radius: 10px;
    box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: #FAFAFA;
    position: relative;
}

    .tableContainer .tableHeaderContainer {
        flex: 0;
        background: #001040;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .tableContainer .tableBodyContainer {
        min-height: 400px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border: solid lightgray 1px;
        display: flex;
        flex-direction: column;
        padding: 0;
        overflow-y: auto;
    }

    .tableContainer table tr {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .tableContainer .table-body tr {
        cursor: pointer;
    }

        .tableContainer .table-body tr td.description {
            color: #002fb0;
        }

    .tableContainer table tr td {
        padding-left: 8.5px;
        display: flex;
    }

        .tableContainer table tr td:last-child {
            margin-left: auto;
            padding-right: 8.5px;
            display: flex;
            align-items: center;
            height: 100%;
        }

    .tableContainer .table-header {
        background-color: #001040;
        height: 40px;
        width: 100%;
    }

        .tableContainer .table-header tr {
            height: 40px;
        }

            .tableContainer .table-header tr td {
                color: #799dff;
            }

                .tableContainer .table-header tr td.link {
                    margin-right: 0;
                    margin-left: auto;
                    padding-right: 0;
                    display: flex;
                }

                    .tableContainer .table-header tr td.link a {
                        display: flex;
                        padding: 0;
                        margin: 5px;
                        height: 30px;
                        border-radius: 6px;
                        -moz-border-radius: 6px;
                        color: #799DFF;
                        padding-left: 10px;
                        padding-right: 10px;
                        text-decoration: none;
                        right: 0px;
                        margin-left: auto;
                        align-items: center;
                        cursor: pointer;
                        transition: 0.2s;
                    }

                        .tableContainer .table-header tr td.link a:hover {
                            background-color: #002FB0;
                            color: #FFF;
                        }

                        .tableContainer .table-header tr td.link a.selected {
                            background-color: #3B6FFF;
                        }

                            .tableContainer .table-header tr td.link a.selected .dot {
                                background-color: #FFF;
                            }

            .tableContainer .table-header tr th {
                height: 100%;
            }

    .tableContainer .table-body {
        background-color: #FFFFFF;
        width: 100%;
    }

        .tableContainer .table-body tr .name a {
            color: #333;
        }

        .tableContainer .table-body tr:hover {
            background-color: #FAFAFA;
        }

            .tableContainer .table-body tr:hover .name a {
                color: #3B6FFF;
            }

    .tableContainer.multi-select tr td.selectedIndicator {
        width: 50px;
        transition: ease-in-out 0.3s;
    }

    .tableContainer.multi-select .table-body tr td.selectedIndicator {
        padding: 15px;
        background-clip: content-box;
        border-radius: 20px;
        background-color: #FAFAFA;
    }

    .tableContainer.multi-select .table-body tr:hover td.selectedIndicator {
        background-color: #ECECEC;
    }

    .tableContainer.multi-select .table-body tr.selected td.selectedIndicator {
        background-color: #3B6FFF;
    }

    .tableContainer.multi-select .table-body tr.selected:hover td.selectedIndicator {
        background-color: #799DFF;
    }

    .tableContainer tr td.selectedIndicator {
        width: 6px;
        padding: 0;
        height: 100%;
        transition: width ease 0.3s;
    }

    .tableContainer .table-body tr {
        height: 50px;
        border-bottom: solid lightgray 1px;
        opacity: 1;
        overflow-y: hidden;
    }

        .tableContainer .table-body tr.hidden {
            height: 0;
            opacity: 0;
            display: flex !important;
            border: none;
        }

        .tableContainer .table-body tr.transition {
            transition: 0.3s;
        }

        .tableContainer .table-body tr.selected td.selectedIndicator {
            background-color: #3B6FFF;
        }


        .tableContainer .table-body tr.disabled td.display-icon .img.ident,
        .tableContainer .table-body tr.disabled td .svg-container {
            background-color: lightgray;
        }

        .tableContainer .table-body tr.disabled td.centered,
        .tableContainer .table-body tr.disabled td.title {
            color: lightgray;
        }

        .tableContainer .table-body tr.disabled td .img.svg.replaced-svg {
            fill: lightgray;
        }


        .tableContainer .table-body tr td .iconContainer {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #00207a;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin-right: 5px;
            font-family: roboto-medium;
            font-size: 14px;
            color: #fff;
        }

        .tableContainer .table-body tr td .img {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background-color: #00207a;
            border: none;
            box-shadow: 2px 3px 6px rgba(0,0,0,0.16);
            object-fit: cover;
        }

.tableBodyContainer table tr .centered .option-image .img.svg {
    display: flex;
}

    .tableBodyContainer table tr .centered .option-image .img.svg.disabled {
        filter: invert(80%);
    }

        .tableBodyContainer table tr .centered .option-image .img.svg.disabled.replaced-svg {
            fill: lightgrey;
            filter: none;
        }

.tableContainer .table-body tr td .img.svg {
    width: 30px;
    height: 20px;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    border: none;
    background: none;
    box-shadow: none;
    object-fit: contain;
    filter: invert(7%) sepia(56%) saturate(7459%) hue-rotate(224deg) brightness(100%) contrast(106%);
}

    .tableContainer .table-body tr td .img.svg.replaced-svg {
        fill: #00207a;
        filter: none;
    }

    .tableContainer .table-body tr td .img.svg.svg-disabled {
        filter: invert(82.42%);
    }

        .tableContainer .table-body tr td .img.svg.svg-disabled.replaced-svg {
            fill: #d3d3d3;
            filter: none;
        }

.tableContainer .table-body tr td .svg-container .img.svg {
    width: 20px;
    filter: invert(100%);
}

    .tableContainer .table-body tr td .svg-container .img.svg.replaced-svg {
        fill: #fff;
        filter: none;
    }


.tableContainer .table-body tr td .imgStack {
    width: 29px;
    height: 29px;
    margin-left: -10px;
    margin-right: 0;
    border: 2px solid white;
    box-shadow: none;
}

.tableContainer .table-body tr td .flex-row.reverse .imgStack:first-of-type {
    margin-left: -10px;
}

.tableContainer .table-body tr td .flex-row.reverse .imgStack:last-of-type,
.tableContainer .table-body tr td .flex-row .imgStack:first-of-type {
    margin-left: 0;
}


.tableContainer .table-body tr td .imgStack .img.svg {
    width: 12px;
    height: 12px;
}

.tableContainer .table-body tr td.display-icon .img.ident,
.tableContainer .table-body tr td .svg-container {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #00207a;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .tableContainer .table-body tr td.display-icon .img.ident text {
        flex: 1;
        text-align: center;
        align-content: center;
        color: white;
    }

    .tableContainer .table-body tr td.display-icon .img.ident img {
        width: 20px;
        height: 20px;
    }

.tableContainer .table-body tr td .groupItemsCount {
    margin-left: 15px;
    color: #3b6fff
}









/*.tableContainer .table-body tr td.icon .img {
        width: 35px;
        height: 35px;
        border: none;
    }*/

.tableContainer .table-body tr td.icon .img.rounded {
    border-radius: 50%;
}

.tableContainer .table-body tr td.icon .img.img-small {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.tableContainer .table-body tr td.icon .svg-filter,
.tableContainer .table-body tr td.display-icon .svg-filter,
.tableContainer .table-body tr td.centered .svg-filter {
    border-radius: 0;
    box-shadow: none;
    background: none;
    /*fill: #003BDD;*/
    filter: invert(11%) sepia(94%) saturate(3038%) hue-rotate(222deg) brightness(85%) contrast(110%);
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.tableContainer .table-body tr td.icon .svg-disabled,
.tableContainer .table-body tr td.display-icon .svg-disabled,
.tableContainer .table-body tr td.centered .svg-disabled {
    border-radius: 0;
    box-shadow: none;
    background: none;
    filter: invert(82.42%);
    width: 20px;
    height: 20px;
}

.tableContainer .table-header tr td.icon,
.tableContainer .table-body tr td.icon,
.tableContainer .table-header tr td.display-icon,
.tableContainer .table-body tr td.display-icon {
    width: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.tableContainer .table-header tr td.centered,
.tableContainer .table-body tr td.centered {
    width: 120px;
    text-align: center;
    display: flex;
    justify-content: center;
}

.tableContainer .table-header tr td.title,
.tableContainer .table-body tr td.title {
    width: 200px;
}

.tableContainer .table-header tr td.title-x2,
.tableContainer .table-body tr td.title-x2 {
    width: 300px;
}

.tableContainer .table-header tr td.link {
    margin-left: auto;
}

.tableContainer .table-body tr td.link {
    margin-left: auto;
    padding-right: 15px;
}

.tableContainer .table-header tr td.link a {
    text-decoration: none;
    /*color: #3B6FFF;*/
    cursor: pointer;
}

.tableContainer .table-body tr td.link a {
    color: #003BDD;
    cursor: pointer;
}

    .tableContainer .table-body tr td.link a:hover {
        color: #3B6FFF;
    }

.tableContainer .tableBodyContainer div.create {
    margin: 6.5px 7px 0 7px;
    height: 36px;
    border: none;
    border-radius: 5px;
    flex: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-family: roboto-light;
    font-size: 16px;
    color: #b4b4b4;
    cursor: pointer;
    transition: 0.3s;
}

    .tableContainer .tableBodyContainer div.create div.first {
        width: 50px;
        padding: 0;
        margin-right: 8.5px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tableContainer .tableBodyContainer div.create:hover {
        background-color: #ececec;
    }

    .tableContainer .tableBodyContainer div.create.create-active {
        font-family: roboto-regular;
        color: #434343;
    }

    .tableContainer .tableBodyContainer div.create:last-of-type {
        margin-bottom: 100px;
    }


@media screen and (max-height: 600px) {
    .tableContainer {
        flex: 1;
    }

        .tableContainer .tableBodyContainer {
            min-height: 0;
            flex: 1;
        }
}
