.uplot {
    display: inline-block;
    vertical-align: top;
    width: min-content;
    background-color: #212121;
    color: #FFFFFF;
    text-align: left;
}

.u-over {
    box-shadow: 0px 0px 0px 0.5px #FFF;
    color: #000000;
}

.u-under {
    width: 0px;
    height: 0px;
}

.u-legend {
    text-align: left;
    color: #FFFFFF;
    font-family: monospace;
}

.u-title {
    text-align: left;
    padding-left: 10px;
    margin-left: 0px;
    color: #FFFFFF;
    font-family: monospace;
    font-size: 10pt;
}

.u-inline tr {
    margin-right: 8px;
}

.u-label {
    font-size: 10px;
    color: #FFFFFF;
    font-family: monospace;
}

.top-table-class {
    flex: 1;
}

.top-table-class th,
td {
    font-family: Arial, sans-serif;
    font-size: 10px;
    margin-right: 10px;
    text-align: left;
}

.recent-table-container {
    display: flex;
    width: 600px;
    height: 350px;
    overflow-y: auto;
    background-color: #212121;
    align-items:start;
}

#recent-traffic {
    font-family: Arial, sans-serif;
    font-size: 10px;
    flex: 1;
    color: #FFFFFF;
}

#recent-traffic th {
    text-align: left;
    white-space: nowrap;
    position: sticky;
    top: 0;
    background-color: #212121;
}

#recent-traffic td {
    text-align: left;
}

.tdwrap{
    white-space: unset;
    word-wrap: normal;
}
.tdnowrap{
    white-space: nowrap;
    word-wrap: normal;
}

#latest-anomalies {
    font-family: Arial, sans-serif;
    font-size: 10px;
    flex: 1;
    color: #FFFFFF;
}

#latest-anomalies th {
    text-align: left;
    white-space: nowrap;
    position: sticky;
    top: 0;
    background-color: #212121;
}

#latest-anomalies td {
    text-align: left;
    vertical-align: top;
}

#latest-anomalies tr {
    text-align: left;
    vertical-align: top;
}

#top-networks-chart {
    width: 480px;
    background-color: #212121;
}        

#top-countries-chart {
    width: 480px;
    background-color: #212121;
}