body {
    font-family: sans-serif;
    background: #000000;
    color: #fefefe;
    font-size: 14px;
}

div.pipeline-loading-icon {
    content: url("dark-load.gif");
}

section.pipeline-component {
    padding-left: 20px;
}

section.pipeline-component h1 {
    font-size: 38px;
    font-weight: bold;
}

section.pipeline-component h2 {
    font-size: 24px;
}

div.changes h1 {
    font-size: 14px;
}

div.stage {
    border-radius: 0;
    border: solid #404040 1px;
    background: #404040;
}

div.stage-header {
    background: #808080;
    border-bottom: solid #808080 1px;
}

div.stage-task {
    min-height: 36px;
}

div.task-progress {
    min-height: 36px;
}

div.task-abort {
    bottom: 4px;
}

div.task-details {
    padding-top: 5px;
}

.stage-name {
    padding: 10px 10px 10px 10px;
}

.stage-version {
    padding: 10px 10px 10px 10px;
}

.timestamp {
    font-size: 12px;
}

.duration {
    font-size: 12px;
}

.pipeline-message {
    position: fixed;
    font-size: 36px;
    top: 50%;
    left: 50%;
    width: 30em;
    height: 18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
}

.pipeline-message a:visited {
    color: inherit;
}

.IDLE {
    border-left: 6px solid #d3d3d3;
}

.QUEUED {
    border-left: 6px solid #2e6e9e;
}

.FAILED {
    border-left: 6px solid #c20000;
    color: white;
    background-color: red;
}

.UNSTABLE {
    border-left: 6px solid #ec8b04;
    font-weight: bold;
    color: black;
    background-color: #fcae3f;
}

.SUCCESS {
    border-left: 6px solid #228b22;
    background-color: rgba(68, 239, 11, 0.7);
}

.CANCELLED {
    border-left: 6px solid #8b8989;
    font-weight: bold;
    background-color: inherit;
}

.NOT_BUILT {
    border-left: 6px solid #8b8989;
    font-weight: bold;
    background-color: inherit;
}

.DISABLED {
    border-left: 6px solid transparent;
    color: #a9a9a9;
    background-color: inherit;
}

.RUNNING {
    border-left: 6px solid #0092ef;
}

.PAUSED_PENDING_INPUT {
    animation-duration: 1s;
    animation-name: grayPulse;
    animation-iteration-count: infinite;

    -webkit-animation-name: grayPulse;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    border-left: 6px solid lightskyblue;
}

svg.relation path {
    stroke: #fefefe;
    stroke-width: 3;
}

div.infoPanel {
    border: none;
    background: none;
}

div.infoPanelOuter {
    color: #fefefe;
    background-color: #646060;
    border: 1px solid darkgray;
}

div.aggregatedChangesPanelOuter {
    margin: 8px;
    border: 1px solid lightgray;
    background-color: #646060;
}
