body {
  margin: 0;
  padding: 0;
}

.pf-c-title {
    padding-bottom: 10px;
}

a.refresh {
  cursor: pointer;
  border-bottom-style: none;
  text-decoration: none;
}

.time {
  white-space: nowrap;
}

/* Navigation bar */
.zuul-brand {
    /* TODO (felix): If we can define a size in the logo.svg itself, this
       shouldn't be necessary. */
    height: 40px;
}

.zuul-select-tz {
    /* That's the color PF4 uses for the dropdown items in the navbar */
    color: var(--pf-global--Color--dark-100);
}

/* Config error modal */
.zuul-config-errors-title {
    font-size: var(--pf-global--FontSize--xl);
}

.zuul-config-errors-count {
    margin-left: var(--pf-global--spacer--md);
}

/*
 * Build Lists and Tables
 */

/* Improve the hover effect of selected lines in the selectable data list*/
.pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected),
.pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected) {
    --pf-c-data-list__item--before--BackgroundColor: var(
        --pf-c-data-list__item--m-selected--before--BackgroundColor
    );
    font-weight: bold;
}

.zuul-build-list:hover a {
    text-decoration: none;
}

/* Keep the normal font-size for compact tables */
.zuul-build-table td {
    font-size: var(--pf-global--FontSize--md);
}

/* Use the same hover effect on table rows like for the selectable data list */
.zuul-build-table tbody tr:hover {
    box-shadow: var(--pf-global--BoxShadow--sm-top),
      var(--pf-global--BoxShadow--sm-bottom);
}

@media screen and (max-width: 768px) {
    /* For the small-screen table layout the before element is already used to
       show the column names. Thus, we fall back to the border to show the hover
       effect. The drawback with that is, that we can't show a nice transition.
       */
    .zuul-build-table tbody tr:hover {
        border-left-color: var(--pf-global--active-color--100);
        border-left-width: var(--pf-global--BorderWidth--lg);
        border-left-style: solid;
        /* Compensate the border width with a negative margin */
        margin-left: -3px;
    }
}

@media screen and (min-width: 769px) {
    /* For the larger screens (normal table layout) we can use the before
       element on the first table cell to show the same hover effect like for
       the data list */
    .zuul-build-table tbody tr td:first-child::before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: var(--pf-global--BorderWidth--lg);
        content: "";
        background-color: transparent;
        transition: var(--pf-global--Transition);
    }

    .zuul-build-table tbody tr:hover td:first-child::before {
        background-color: var(--pf-global--active-color--100);
    }
}

/* Make a link stretch the whole parent element (in this case the whole table
   cell) */
.zuul-stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    pointer-events: auto;
    content: "";
    background-color: rgba(0,0,0,0);
}

/*
 * Build/Buildset result page
 */
.zuul-build-attributes > .pf-l-flex > * {
    padding-bottom: var(--pf-global--spacer--sm);
    padding-left: var(--pf-global--spacer--sm);
    padding-right: var(--pf-global--spacer--sm);
}

/* Status page */
.zuul-pipeline-header h3 {
    font-weight: var(--pf-global--FontWeight--bold);
}

.zuul-change {
    margin-bottom: 10px;
}

.zuul-change-id {
    float: right;
}

.zuul-job-result {
    float: right;
    width: 70px;
    height: 20px;
    margin: 2px 0 0 0;
    padding: 4px;
}

.zuul-change-total-result {
    height: 10px;
    width: 100px;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
}

.zuul-spinner,
.zuul-spinner:hover {
    opacity: 0;
    transition: opacity 0.5s ease-out;
    cursor: default;
    pointer-events: none;
}

.zuul-spinner-on,
.zuul-spinner-on:hover {
    opacity: 1;
    transition-duration: 0.2s;
    cursor: progress;
}

.zuul-change-cell {
    padding-left: 5px;
}

.zuul-change-job {
    padding: 2px 8px;
}

/* Force_break_very_long_non_hyphenated_repo_names */
.change_project {
    word-break: break-all;
}

.zuul-job-name {
    font-size: small;
}

.zuul-non-voting-desc {
    font-size: smaller;
}

.zuul-patchset-header {
    font-size: small;
    padding: 8px 12px;
}

.zuul-log-output {
    color: black;
}

.zuul-log-output a,
.zuul-log-output a:hover {
    color: inherit;
    text-decoration: none;
}

.zuul-log-sev-0 {
    color: black;
}
.zuul-log-sev-1 {
    color: black;
}
.zuul-log-sev-2 {
    color: #0000aa;
}
.zuul-log-sev-3 {
    color: #883300;
}
.zuul-log-sev-4 {
    color: #aa0000;
}
.zuul-log-sev-5 {
    color: #aa0000;
}
.zuul-log-sev-6 {
    color: #aa0000;
}
.zuul-log-sev-7 {
    color: #aa0000;
}

.form-inline > .form-group {
    padding-right: 5px;
}

.zuul-change-row {
    height: 100%;
    padding: 0 0 10px 0;
    margin: 0;
    width: 16px;
    min-width: 16px;
    overflow: hidden;
    vertical-align: top;
}

.zuul-build-status {
    background: white;
    font-size: 16px;
}

.zuul-build-merge-conflict:before {
    color: black;
}

.zuul-change-row-line {
    background-image: url('images/line.png');
    background-repeat: 'repeat-y';
}

.progress-bar-animated {
    animation: progress-bar-stripes 1s linear infinite;
}

/* Stream page */
.xterm-selection-layer {
  mix-blend-mode: exclusion;
}

/* Job Tree View group gap */
div.tree-view-container ul.list-group {
  margin: 0px 0px;
}

/* OpenAPI page */
pre.version {
    background-color: lightgrey;
    color: black;
}
.swagger-ui .servers {
    padding-top: 5px
}

/* Console */
.zuul-console .list-group-item-header,
.zuul-console .list-view-pf-actions,
.zuul-console .list-view-pf-expand,
.zuul-console .list-view-pf-main-info
{
    margin-top: 1px;
    margin-bottom: 1px;
}
.zuul-console .list-view-pf-main-info
{
    padding-top: 1px;
    padding-bottom: 1px;
}
.zuul-console .list-view-pf-additional-info-item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    font-size: 14px;
}
.zuul-console .list-view-pf-expand
{
    padding: 0;
}
.zuul-console .list-view-pf-left
{
    padding-right: 17px;
}
.zuul-console .list-group-item-heading
{
    line-height: 16px;
    font-size: 14px;
    margin-bottom: 0;
}
.zuul-console .list-group-item-text
{
    line-height: 16px;
    font-size: 14px;
    margin-bottom: 0;
}
.zuul-console .task-skipped
{
    color: white;
    background-color: #00729b;
    width: 6em;
    cursor: pointer;
}
.zuul-console .task-changed
{
    color: white;
    background-color: #a28301;
    width: 6em;
    cursor: pointer;
}
.zuul-console .task-ok
{
    color: white;
    background-color: #018200;
    width: 6em;
    cursor: pointer;
}
.zuul-console .task-failed
{
    color: white;
    background-color: #9b0000;
    width: 6em;
    cursor: pointer;
}
.zuul-console .additionalinfo-icon
{
    cursor: default;
    margin-right: 8px;
}
.zuul-console .task-details-icon
{
    cursor: pointer;
    margin-right: 8px;
}
.zuul-console-modal-header-link
{
    margin-left: 2em;
    font-size: 18px;
}
.zuul-console-task-detail
{
    width: 80%;
}
.zuul-console-task-result
{
    padding-left: 4em;
}
pre.zuul-log-output
{
    overflow-x: auto;
    background-color: inherit;
    border: none;
}
.zuul-log-output .line-number
{
  display: inline;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-align: right;
  padding-right: 1em;
  cursor: pointer;
  color: #555;
}

.highlight {
  background: rgb(255, 255, 204);
}

details.foldable pre {
    white-space: pre-wrap;
}

details.stderr pre {
    color: #9b0000;
}

pre.cmd {
    font-weight: bold;
}

/* Used to make the "more/less" fold,  look like a normal hyperlink */
details.foldable summary
{
    color: #0088ce;
    text-decoration: none;
    cursor: pointer;
}

details.foldable summary:hover
{
    text-decoration: underline;
}

details.foldable summary::before {
    content: "more";
}

details.foldable[open] summary::before {
    content: "less";
}

/* Overwrite PF4 navbar rules to enforce the 'lg' layout of the navbar also for
   'xl' sized screens. This will keep the navbar stacked (like it was in Zuul
   before) and prevent PF4 to put all elements in a single line with horizontal
   scrolling (which would look something like:
   ZUUL | < Status Projects Jobs Labels No... > | API Documentation Tenant */
@media screen and (min-width: 1200px) {
    .pf-c-page__header-nav {
        grid-column: 1/-1;
        grid-row: 2/3;
    }

    .pf-c-page {
        --pf-c-page__header-nav--PaddingRight: var(
            --pf-c-page__header-nav--lg--PaddingRight
        );
        --pf-c-page__header-nav--PaddingLeft: var(
            --pf-c-page__header-nav--lg--PaddingLeft
        );
    }
}