web_defender/static/ddos/css/ddos.css

.ipSection {
    padding: 10px 15px;
    background: #102d3c;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.ipIconImage {
    width: 50px;
    height: 50px;
    padding: 10px;
    margin-right: 10px;
    background: #0c212b;
}

.ipIconImage img {
    display: block;
    width: 100%;
}

.ipNumber {
    color: #ffffff;
    font-size: 22px;
}

.graphTitle {
    display: flex;
    justify-content: space-between;
    color: #ffffff;
    padding-bottom: 20px;
}

.gridGraphSection {
    padding: 10px 15px;
    background: #102d3c;
    margin-bottom: 10px;
}

.gridBox {
    width: 10px;
    height: 10px;
    display: block;
    background: #274654;
    margin: 1px;
    animation: colorChange 5s;
    animation-fill-mode: forwards;
}

text,
text[text-anchor="start"] {
    fill: #ffffff !important;
}

text[text-anchor="end"] {
    fill: #ffffff !important;
}

text[text-anchor="middle"] {
    fill: #ffffff !important;
}

.chart-flex {
    display: flex;
    align-items: flex-start;
    background: #0c212b;
}

#columnInThreeChart svg g rect,
#columnInTwoChart svg g rect,
#columnInHTTPChart svg g rect,
#columnInBarHTTPChart svg g rect,
#columnInBarSimillarChart svg g rect,
#columnInBarChart svg g rect {
    opacity: 0;
}

#ScatterDDoSPCAChart svg g rect {
    opacity: 0;
}

#ScatterDDoSSneChart svg g rect {
    opacity: 0;
}

#ScatterDDoSChart svg g rect {
    opacity: 0;
}


/* Tab */
.tabSectionHeader {
    background: #0c212b;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.tabTitle {
    font-size: 15px;
    color: #fff;
}

.svgIcon {
    display: block;
    width: 20px;
    height: 20px;
}

.svgIcon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.chartOpenClose {
    height: 43px;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-bottom: 10px;
    border: 1px solid transparent;
}

.chartActiveOpenClose {
    height: 100%;
    transition: all 0.3s ease;
    border-color: #5589a9;
}

.chartActiveOpenClose .svgIcon {
    transform: rotate(-180deg);
}

.tabNetworkData span {
    display: none;
}

.tabNetworkData span:first-child {
    display: inline;
}

.warmingMode {
    display: flex;
    align-items: center;
}

.attackMode {
    font-size: 10px;
    max-width: 300px;
    text-align: right;
    color: #ff5339;
    margin-right: 20px;
    display: none;
}
.chartTitleLable {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: #0c212b;
    padding-top: 10px;
}
.chartTitleLable p{
    display: flex;
    align-items: center;
    margin-right: 10px;
    color: #54A3A8;
}
.chartTitleLable p:nth-child(2){
    display: flex;
    align-items: center;
    margin-right: 10px;
    color: #8590A8;
}
.chartTitleLable p:nth-child(3){
    display: flex;
    align-items: center;
    margin-right: 10px;
    color: #5589A9;
}
.chartTitleLable p:nth-child(4){
    display: flex;
    align-items: center;
    margin-right: 10px;
    color: #54A892;
}
.chartTitleLable p:nth-child(5){
    display: flex;
    align-items: center;
    margin-right: 10px;
    color: #5554A8;
}
.chartTitleLable p:nth-child(6){
    display: flex;
    align-items: center;
    margin-right: 10px;
    color: #1c5e63;
}
.chartTitleLable p span{
    margin-right: 5px;
    background: #54A3A8;
    display: block;
    width: 15px;
    height: 15px;
}
.chartTitleLable p:nth-child(2) span{
    margin-right: 5px;
    background: #8590A8;
    display: block;
    width: 15px;
    height: 15px;
}
.chartTitleLable p:nth-child(3) span{
    margin-right: 5px;
    background: #5589A9;
    display: block;
    width: 15px;
    height: 15px;
}
.chartTitleLable p:nth-child(4) span{
    margin-right: 5px;
    background: #54A892;
    display: block;
    width: 15px;
    height: 15px;
}
.chartTitleLable p:nth-child(5) span{
    margin-right: 5px;
    background: #5554A8;
    display: block;
    width: 15px;
    height: 15px;
}
.chartTitleLable p:nth-child(6) span{
    margin-right: 5px;
    background: #1c5e63;
    display: block;
    width: 15px;
    height: 15px;
}