web_defender/Device/static/dashboard/index.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 svg {
    display: block;
    width: 100%;
    height: auto;
}

.ipIconImage svg path {
    animation: ipIconAnimation 10s infinite;
    animation-delay: 3s;
}

@keyframes ipIconAnimation {
    0% {
        fill: green;
    }

    25% {
        fill: orange;
    }

    50% {
        fill: red;
    }

    75% {
        fill: orange;
    }

    100% {
        fill: green;
    }
}

.ipNumber {
    color: #ffffff;
    font-size: 17px;
    font-weight: 300;
}

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

.graphTitle select {
    width: 120px;
    height: 27px;
    border-radius: 4px;
    border: 1px solid #5589a9;
}

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

.gridBox {
    width: 10px;
    height: 10px;
    display: block;
    background: #274654;
    margin: 1px;
    /* animation: colorChange 10s infinite; */
    /* Added 'infinite' here */
    /* animation-fill-mode: forwards; */
}

.gridBox:nth-child(5n+0) {
    background: #5a8cab;
}

.gridBox:nth-child(3n+0) {
    background: #bbbbbb;
}

.gridDivSection {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 10px);
    /* display: grid;
    width: calc(100% - 10px);
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto; */
}

/* @keyframes colorChange {

    20% {
        background: #1d86c7;
    }

    40% {
        background: #5589a9;
    }

    60% {
        background: #4fa0d3;
    }

    80% {
        background: #2f6689;
    }

    90% {
        background: #274654;
    }
} */

/* Staggering animation start times for individual boxes */
.gridBox:nth-child(5n+1) {
    animation-delay: 0s;
}

.gridBox:nth-child(5n+3) {
    animation-delay: 1s;
}

.gridBox:nth-child(5n+6) {
    animation-delay: 2s;
}

.gridBox:nth-child(5n+5) {
    animation-delay: 3s;
}

.gridBox:nth-child(5n+4) {
    animation-delay: 4s;
}

.graphSideDay {
    display: flex;
    margin-right: 8px;
}

.weeksCountDay {}

.weeksCountDay p {
    color: #5589a9;
    font-size: 11px;
}

.weeksDay {}

.weeksDay p {
    color: #bbbbbb;
    font-size: 11px;
    margin-right: 5px;
}

.graphContentFlex {
    display: flex;
    flex-wrap: wrap;
    color: #bbbbbb;
}

.monthListFlex {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-left: 5px;
    padding-right: 15px;
    padding-bottom: 10px;
}

#DayIndicator p {
    font-size: smaller;
    text-align: center;
}

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

.LessMoreText {
    margin: 0 5px;
}

.boxesSpan {
    width: 10px;
    height: 10px;
    display: block;
    background: #274654;
    margin: 1px;
}

.boxesSpan:nth-child(2) {
    background: #1d86c7;
}

.boxesSpan:nth-child(3) {
    background: #5589a9;
}

.boxesSpan:nth-child(4) {
    background: #4fa0d3;
}

.boxesSpan:nth-child(5) {
    background: #2f6689;
}

.boxesSpan:last-child {
    background: #1d86c7;
}

rect[fill="#cccccc"],
rect[fill="#5b6d76"],
rect[fill="#333333"] {
    fill: #13384B !important;
}

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

/* text[text-anchor="middle"], */
text[text-anchor="end"] {
    display: none;
}

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

.date-text {
    color: #1d86c7;
    font-size: 20px;
}

.day-text {
    color: #1d86c7;
    font-size: 15px;
}

.month-text {
    color: #bbbbbb;
    font-size: 20px;
}

.year-text {
    color: #bbbbbb;
    font-size: 20px;
}

.mainCalendarSection {
    border: 1px solid #153549;
}

.dateCalendarContentFlex {
    display: flex;
    align-items: center;
    overflow: auto;
}

.dateCalendarContentFlex::-webkit-scrollbar {
    height: 0;
    width: 0;
}

.dateSection {
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.dateActiveSection {
    background: #153549;
}

.YearSection {
    padding: 10px;
}

.DateText {
    font-size: 17px;
    color: #fff;
    text-align: center;
}

.DaysText {
    font-size: 16px;
    color: #bbbbbb;
    text-align: center;
    padding-bottom: 10px;
}

.monthText {
    text-align: center;
    font-size: 20px;
    color: #bbbbbb;
    text-transform: uppercase;
}

.YearText {
    text-align: center;
    font-size: 15px;
    color: #7c7c7c;
}

.roundSection {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #1d86c7;
}

.dateActiveSection .roundSection {
    background: #1d86c7;
}

#running-proccesses {
    font-size: 11px;
    line-height: 1.5;
    word-break: break-all;
    text-wrap: pretty;
    color: #ffffff;
}

.running-title {
    font-size: 14px;
    color: #ffffff;
    padding-bottom: 13px;
}

.variablenames {
    overflow: hidden auto;
    color: #ffffff;
    height: calc(100vh - 102px);
}

.chartTitleLable {
    display: flex;
    justify-content: flex-end;
    padding: 15px 0 0;
    background-color: #153549;
}

.chartTitleLable p {
    color: #ffffff;
    display: flex;
    align-items: center;
    margin-left: 15px;
}


.chartTitleLable p span {
    width: 15px;
    height: 15px;
    display: block;
    background: #1d86c7;
    margin-right: 10px;
}

.chartTitleLable p:nth-child(2) span {
    width: 15px;
    height: 15px;
    display: block;
    background: #5589a9;
}

.chartTitleLable p:nth-child(3) span {
    width: 15px;
    height: 15px;
    display: block;
    background: #274654;
}