body {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}
a {
    text-decoration: none
}
p{text-align: justify}
.bg-service-status {
    background: linear-gradient(180deg, rgba(2, 0, 36, 1) 0%, rgba(1, 1, 69, 1) 35%, rgba(1, 58, 119, 1) 100%, rgba(1, 85, 143, 1) 100%, rgba(0, 212, 255, 1) 100%);
}

.section-header {
    height: auto;
    padding-bottom: 67px;
    background: rgb(2, 0, 36);
    background: linear-gradient(180deg, rgba(2, 0, 36, 1) 0%, rgba(1, 1, 69, 1) 35%, rgba(1, 58, 119, 1) 100%, rgba(1, 85, 143, 1) 100%, rgba(0, 212, 255, 1) 100%);
}

.btn-action {
    background: #f39756;
    color: #ffffff;
    font-size: 15px;
    border-radius: 0 !important;
}

.btn-action:hover {
    border: 0.5px solid rgba(255, 255, 255, 0.58);
    color: #ffffff;
}

.legend {
    padding-top: 15vh !important;
    color: #ffffff
}

.legend .bi {
    font-size: 40px
}
.legend span{font-size: 13px}

.operational {
    color: green
}

.d-performance, .p-outage {
    color: orange
}

.m-outage {
    color: orangered
}

.maintenance {
    color: #1d1ded
}

.app-status {
    margin-top: 7vh;
    min-height: 80vh;
    margin-bottom: 200px !important;
}

.app-card, .sub-app-card {
    border: 1px solid #2d2d39;
    padding: 12px
}

.app-card .bi {
    font-size: 27px
}

.sub-app-card .bi {
    font-size: 27px
}
.btn{border-radius: 0 !important;}
.card {border: none !important;}
.bi-plus-square {
    font-size: 16px !important;
}
.btn-lg-light{border: 1px solid #2d2d39 !important;border-radius: 0;width: 240px}
.history-content{margin-top: 5vh}
.show-more{border: 1px solid #2d2d39}
.show-more:hover{border: 1px solid #2d2d39; transition: 0.3s; opacity: 0.6}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1100px !important;
    }
}