.DataContainer {
    background-color: #ffffff;
    border-radius: 10px;
}

    .DataContainer .Criteria {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 20px;
        margin-top: 20px;
        padding-bottom: 20px;
        padding-top: 20px;
    }

        .DataContainer .Criteria .FieldContainer {
            margin-left: 10px;
            margin-right: 10px;
            width: 200px;
        }

            .DataContainer .Criteria .FieldContainer input {
                line-height: normal;
            }

        .DataContainer .Criteria .ButtonsContainer {
            margin-right: 10px;
        }

            .DataContainer .Criteria .ButtonsContainer button {
                background-color: var(--custom-color-4);
                border: none;
                border-radius: 8px;
                color: #ffffff;
                outline: none;
                padding: 17px;
            }

table.DataTable {
    width: 100%;
}

    table.DataTable thead {
    }

        table.DataTable thead tr {
            background-color: rgba(233, 234, 235, 1);
        }

            table.DataTable thead tr th {
                color: rgba(86, 91, 96, 1);
                font-size: 15px;
                padding: 10px;
            }

    table.DataTable tbody {
    }

        table.DataTable tbody tr {
        }

            table.DataTable tbody tr td {
                border-bottom: solid 1px rgba(233, 234, 235, 1);
                color: rgba(86, 91, 96, 0.6);
                font-size: 16px;
                font-weight: 400;
                padding-bottom: 5px;
                padding-left: 10px;
                padding-right: 10px;
                padding-top: 5px;
            }

                table.DataTable tbody tr td .Important {
                    color: rgba(86, 91, 96, 1);
                }

                table.DataTable tbody tr td .Link {
                    cursor: pointer;
                }

            table.DataTable tbody tr:hover td {
                background-color: rgba(244, 245, 245, 1);
            }

                table.DataTable tbody tr:hover td .Link {
                    color: rgba(255, 151, 62, 1);
                }

table.DataTableModal {
    width: 100%;
}

    table.DataTableModal thead {
    }

        table.DataTableModal thead tr {
            background-color: #ffffff;
        }

            table.DataTableModal thead tr th {
                border-bottom: solid 1px rgba(233, 234, 235, 1);
                border-top: solid 1px rgba(233, 234, 235, 1);
                color: rgba(86, 91, 96, 1);
                font-size: 15px;
                padding: 10px;
            }

    table.DataTableModal tbody {
    }

        table.DataTableModal tbody tr {
        }

            table.DataTableModal tbody tr td {
                border-bottom: solid 1px rgba(233, 234, 235, 1);
                color: rgba(86, 91, 96, 0.6);
                font-size: 16px;
                font-weight: 400;
                padding-bottom: 15px;
                padding-left: 10px;
                padding-right: 10px;
                padding-top: 15px;
            }

                table.DataTableModal tbody tr td.Important,
                table.DataTableModal tbody tr td .Important {
                    color: rgba(86, 91, 96, 1);
                }

                table.DataTableModal tbody tr td .Link {
                    cursor: pointer;
                }

            table.DataTableModal tbody tr:hover td {
                background-color: rgba(244, 245, 245, 1);
            }

                table.DataTableModal tbody tr:hover td .Link {
                    color: rgba(255, 151, 62, 1);
                }

    table.DataTableModal tfoot {
    }

        table.DataTableModal tfoot tr {
            background-color: #ffffff;
        }

            table.DataTableModal tfoot tr td {
                color: rgba(86, 91, 96, 0.6);
                font-size: 15px;
                font-weight: 400;
                padding-left: 10px;
                padding-right: 10px;
                padding-top: 15px;
            }

            table.DataTableModal tfoot tr:last-child td {
                border-bottom: solid 1px rgba(233, 234, 235, 1);
                padding-bottom: 10px;
            }

            table.DataTableModal tfoot tr td.Important,
            table.DataTableModal tfoot tr td .Important {
                color: rgba(86, 91, 96, 1);
            }


.DataElements {
    margin-left: 40px;
    margin-right: 40px;
}

.DataElement {
    background-color: #ffffff;
    border-radius: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    padding-bottom: 20px;
    padding-top: 20px;
}

    .DataElement .FieldContainer {
        display: flex;
        margin-top: 5px;
        padding-left: 20px;
        padding-right: 20px;
    }

        .DataElement .FieldContainer .Title {
            color: rgba(86, 91, 96, 0.7);
            font-size: 14px;
            margin-top: 1px;
            width: 100px;
        }

        .DataElement .FieldContainer .Value {
            color: rgba(86, 91, 96, 0.7);
            font-size: 16px;
            width: calc(100% - 110px);
        }

            .DataElement .FieldContainer .Value.Important {
                color: rgba(86, 91, 96, 1);
                font-weight: 500;
            }

        .DataElement .FieldContainer .Link {
            cursor: pointer;
        }

    .DataElement .Separator {
        background-color: rgba(86, 91, 96, 0.5);
        height: 1px;
        margin-bottom: 20px;
        margin-top: 20px;
    }

    .DataElement:hover {
        background-color: rgba(244, 245, 245, 1);
    }

        .DataElement:hover .FieldContainer .Link {
            color: rgba(255, 151, 62, 1);
        }


@media (max-width: 575px) {
    .DataContainer {
        margin-left: 10px;
        margin-right: 10px;
    }

    .DataElements {
        margin-left: 0px;
        margin-right: 0px;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .DataContainer {
        margin-left: 30px;
        margin-right: 30px;
    }

    .DataElements {
        margin-left: 20px;
        margin-right: 20px;
    }
}

@media (min-width: 768px) {
    .DataContainer {
        margin-left: 50px;
        margin-right: 50px;
    }

    .DataElements {
        margin-left: 40px;
        margin-right: 40px;
    }
}