/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

*/

/*System Status Page */
.c-system-status {
    font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
    padding: 20px;
}

.c-system-status__list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;
    height:30px;
}

.c-system-status__item {
    flex: 0 0 auto;
    flex-grow: 1;
    flex-basis: 0;
    margin-right: 3px;
    padding: 0;
    background-color: limegreen;
    cursor: pointer;
}

.c-system-status-ight {
    color: #aaaaaa;
    opacity: 0.5;
}

.c-system-status__item:hover {
    background-color: green;
}

.c-system-status__item--outage-mild {
    background-color: yellowgreen;
}

.c-system-status__item--outage-mild:hover {
    background-color: orange;
}

.c-system-status__item--outage-severe {
    background-color: tomato;
}

.c-system-status__item--outage-severe:hover {
    background-color: crimson;
}

.legend {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.legend-item {
    flex: 0 0 auto;
}

.spacer {
    flex: 1;
    margin: 0.75rem 1rem 0 1rem;
    height: 1px;
    background: #aaaaaa;
    opacity: 0.3;
}