body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}


#root {
    flex: 0 0 auto;
}

.hero.is-primary {
    background: #000000 !important;
    border-bottom: 10px solid #000000;
}

.hero.is-primary .title, .hero.is-primary .subtitle {
    color: #ffffff !important;
}

#header-image {
    display: inline-block;
    float: left;
    margin-right: 3em;
    height: inherit
}

#header-text {
    display: inline-block;
}

.status-good {
    background: #21bd1c !important;
    color: #ffffff;
}

#status-bar.notification {
    padding: 10px 0;
}

.section {
    flex: 1 0 auto;
}

#outage_history h2 {
    border-bottom: 1px solid #e0e0e0
}

.message {
    background-color: #fdfdfd !important;
}

.hidden {
    display: none;
}

/** Social Navbar **/
.social {
    text-decoration: none!important;
    padding: 0 5px 0 0;
}

.social:not(:last-of-type):after {
    content: '|';
    padding-left: 5px;
}

/** BEGIN SERVICES **/

.singleton-container:not(:first-of-type) {
    padding: 15px 0;
}

.singleton-container:first-of-type {
    padding: 0 0 15px;
}

.singleton-container.opened {
    padding: 0;
}

/** Icons before entries **/
.singleton-container .singleton-parent .level-left:before {
    font-smooth: always;
    -webkit-font-smoothing: subpixel-antialiased;
    font-size: 90%;
    content: '\f054';
    padding-right: 10px;
    padding-left: 1px;
    font-family: "Font Awesome 5 Pro";
}

.singleton-container.opened .singleton-parent .level-left:before {
    font-smooth: always;
    -webkit-font-smoothing: subpixel-antialiased;
    font-size: 90%;
    content: '\f078';
    padding-right: 10px;
    padding-left: 1px;
    font-family: "Font Awesome 5 Pro";
}

.singleton-container .single-status .level-left:before {
    font-smooth: always;
    -webkit-font-smoothing: subpixel-antialiased;
    font-size: 70%;
    content: '\f192';
    padding-right: 10px;
    padding-left: 1px;
    font-family: "Font Awesome 5 Pro";
}

.singleton-parent {
    cursor: pointer;
}

.singleton-children {
    font-size: 90%;
    padding-left: 15px;
    color: #7f7f7f;
}

.singleton-with-parent {
    padding: 0 0 5px 0;
}

.singleton-container:not(:last-child) {
    border-bottom: 1px inset #e0e0e0
}

.single-status:not(:last-child), .status-container:not(:last-child) {
/*    padding-top: 15px;*/
/*    padding-bottom: 15px;*/

}

.content ul {
    margin: 0 !important;
}

.tabs li {
    margin: 0 !important;
}

.tabs li.is-active a {
    color: #9c00db;
    border-color: #9c00db;
}

#susbcribe_button {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

.singleton-with-parent {
    margin-top: 10px;
    margin-bottom: 5px;
}

/** END SERVICES **/

.level-left {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 85%;
}

.level {
    min-width: 0;
}

.level:not(:last-child) {
    margin-bottom: 0px;
}

.is-light {
    color: #7f7f7f !important;
}

.metric-block {
    margin-top: 15px;
}

.metric-block .postfix, .metric-block .prefix {
    font-size: 75% !important;
}

.metric-no-data {
    font-size: 75% !important;
    font-style: italic;
    border-radius: 3px;
}

.event {
    border-left: 4px solid #bfbfbf;
    border-radius: 3px;
    padding-left: 15px;
}

.event.black {
    border-color: #000000;
}

.event.blue {
    border-color: #25AAE1;
}

.event.pink {
    border-color: #ED217C;
}

.event.red {
    border-color: #BF1E2D;
}

.event.green {
    border-color: #8CC63F;
}

.event.orange {
    border-color: #F7941E;
}

.event.yellow {
    border-color: #DDB70A;
}

/** Announcement **/
.message-body p {
    margin-bottom: 10px;
}
.message-header.black {
    background-color: #000000;
}

.message-header.blue {
    background-color: #25AAE1;
}

.message-header.pink {
    background-color: #ED217C;
}

.message-header.red {
    background-color: #BF1E2D;
}

.message-header.green {
    background-color: #8CC63F;
}

.message-header.orange {
    background-color: #F7941E;
}

.message-header.yellow {
    background-color: #DDB70A;
}


/** Text Elements **/
a {
    color: #63305a;
}

/** Layout elements **/
.footer {
    padding: 1rem 6rem 1rem !important;
    /*position: absolute;
    bottom: 0;
    width:100%;*/
    border-top: 3px solid #dfdfdf;
}

/** Icons **/
.icon.is-xlarge .fa {
    font-size: 100px;
    background-color: white;
}

/** Graph changes **/
.ct-line {
    stroke-width: 2px !important;
    stroke: #63305a !important;
}

.ct-point {
    stroke: #63305a !important;
    stroke-width: 7px !important;
}

.timeline {
    border-left: 4px solid #EEE;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    margin: 50px auto;
    letter-spacing: 0.5px;
    position: relative;
    line-height: 1.4em;
    font-size: 1.03em;
    padding: 25px 50px;
    list-style: none !important;
    text-align: left;
    max-width: 75%;
}
.timeline h1 {
    letter-spacing: 1.5px;
    font-weight: 100;
    font-size: 1.4em;
}
.timeline h2,
.timeline h3 {
    margin-bottom: 5px;
    border-bottom: 1px solid #CCCCCC;
    letter-spacing: 1.5px;
    font-weight: 400;
    font-size: 1.4em;
}
.timeline .entry {
    padding-bottom: 25px;
    margin-bottom: 50px;
    position: relative;
}
.timeline .entry:last-of-type {
    padding-bottom: 0;
    margin-bottom: 0;
    border: none;
}
.timeline .entry:before,
.timeline .entry:after {
    position: absolute;
    display: block;
    top: 0;
}
.timeline .entry:before {
    left: -217.5px;
    text-align: right;
    font-weight: 100;
    font-size: 0.9em;
    min-width: 120px;
}
.timeline .entry:after {
    box-shadow: 0 0 0 4px #CCC;
    left: -58px;
    background: #FFF;
    border-radius: 50%;
    height: 11px;
    width: 11px;
    content: "";
    top: 5px;
}