body {
    line-height: 1.4;
    background: #f4f4f4;
    color: #444;
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important;
}

.mdl-layout__drawer footer {
    text-align: center;
    color: darkgray;
    position: absolute;
    bottom: 10px;
    width: 100%;
    font-size: small;
}

.mdl-navigation__link .material-icons {
    font-size: 14px;
}

code {
    background-color: #EEEEEE;
    border-radius: 3px;
    padding: 0 6px;
}

a.current {
    text-decoration: underline !important;
}

a:link {
    text-decoration: none;
    color: #3F51B5;
}

a:visited {
    color: #3F51B5;
}

.header-title {
    margin-left: 24px;
}

.logo {
    height: 48px;
}

h1 {
    font-weight: normal;
    font-size: 2em;
    margin: 2px;
}

h4 {
    margin: 5px;
}

p, pre, ul, ol {
    margin: 0;
}

.indented {
    margin-left: 30px;
}

ul.indented {
    margin-left: 0;
}

aside {
    margin: 8px;
}

ul.noBullets {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.noBullets li {
    margin: 0 8px;
    display: inline-block;
}

select {
    height: 1.4em;
    border: none;
    border-bottom: 1px solid #e3e3e3;
    background: transparent;
}

article {
    overflow: hidden;
    margin: 8px;
}

table {
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 0 4px #e0e0e0;
    border-collapse: collapse;
    width: 100%;
}

tr {
    border-top: 1px solid #f4f4f4;
}

tr.changed {
    border-top: 1px solid #a4a4a4;
}

td:first-child, th:first-child {
    padding-left: 16px;
}

td:last-child, th:last-child {
    padding-right: 16px;
}

td, th {
    text-align: left;
    padding: 8px;
}

th {
    color: #333;
}

.hidden {
    display: none;
}

.blocked {
    color: #EF5350;
}

.icon-cell-32 {
    width: 32px;
}

/**
 * ProwJob State style
 */
i.state {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

.state.triggered, .state.pending, .state.triggered.mdl-list__item-icon.material-icons,
.state.pending.mdl-list__item-icon.material-icons {
    color: #FFCA28;
}

.state.success, .state.success.mdl-list__item-icon.material-icons {
    color: #66BB6A;
}

.state.failure, .state.failure.mdl-list__item-icon.material-icons {
    color: #EF5350;
}

.state.error, .state.aborted, .state.error.mdl-list__item-icon.material-icons,
.state.aborted.mdl-list__item-icon.material-icons {
    color: #BDBDBD;
}

.state.context-warning.mdl-list__item-icon.material-icons {
    color: #F4C20D;
}

#filter-list {
    display: flex;
    flex-wrap: wrap;
}

#filter-list li:last-child {
    margin-left: auto;
}

#job-histogram-content tr {
    border: 0;
}

#job-histogram-content td {
    padding: 0;
    height: 12px;
    width: 12px;
}

#job-histogram-content td.success-10 { background-color: #43A047; }
#job-histogram-content td.success-9 { background-image: linear-gradient(#43A047 90%, #EF5350 90%); }
#job-histogram-content td.success-8 { background-image: linear-gradient(#43A047 80%, #EF5350 80%); }
#job-histogram-content td.success-7 { background-image: linear-gradient(#43A047 70%, #EF5350 70%); }
#job-histogram-content td.success-6 { background-image: linear-gradient(#43A047 60%, #EF5350 60%); }
#job-histogram-content td.success-5 { background-image: linear-gradient(#43A047 50%, #EF5350 50%); }
#job-histogram-content td.success-4 { background-image: linear-gradient(#43A047 40%, #EF5350 40%); }
#job-histogram-content td.success-3 { background-image: linear-gradient(#43A047 30%, #EF5350 30%); }
#job-histogram-content td.success-2 { background-image: linear-gradient(#43A047 20%, #EF5350 20%); }
#job-histogram-content td.success-1 { background-image: linear-gradient(#43A047 10%, #EF5350 10%); }
#job-histogram-content td.success-0 { background-color: #EF5350; }

#job-histogram-content td.active:hover {
    opacity: 1 !important;
    cursor: pointer;
}

#job-histogram-labels {
    text-align: center;
}

#job-histogram-labels > span {
    padding: 0 6px;
    font-size: 12px;
    color: #777;
}

#job-histogram-start {
    float: right;
}

#job-histogram-end {
    float: left;
}

#job-histogram-container {
    position: relative;
}

#job-histogram-labels-y-max {
    position: absolute;
    top: 0;
    left: 6px;
    font-size: 0.75rem;
    color: #888;
}

#job-histogram-labels-y-mid {
    position: absolute;
    top: 42%;
    left: 6px;
    font-size: 0.75rem;
    color: #666;
}

#job-count {
    float: right;
    font-size: 12px;
}

#job-bar {
    align-items: center;
    color: #ffffff;
    display: flex;
    height: 14px;
    font-size: 12px;
    font-weight: bold;
    line-height: 14px;
    text-align: center;
}

.job-bar-state {
    cursor: pointer;
    outline: none;
}
/** Job bar **/
#job-bar-success {
    background-color: #66BB6A;
}

#job-bar-pending {
    background-color: #FBC02D;
    color: #000000;
}

#job-bar-triggered {
    background-color: #FFEB3B;
    color: #000000;
}

#job-bar-failure {
    background-color: #F44336;
}

#job-bar-error {
    background-color: #795548;
}

#job-bar-aborted {
    background-color: #BDBDBD;
}

#job-bar-unknown {
    background-color: #673AB7;
}
/** --- **/
#top-navigator {
    background-color: #e5e5e5;
    bottom: 32px;
    height: 52px;
    min-width: 52px;
    position: fixed;
    right: 32px;
    width: 52px;
}

#toastAlert {
    background-color: #F44336;
}

#rerun {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    margin: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.rerun-content {
    font-family: monospace;
    background-color: #fefefe;
    margin: auto;
    padding: 40px;
    border: 1px solid #888;
    width: 50%;
    max-width: 1500px;
    color: #444;
    border-radius: 10px;
    box-shadow: 0px 20px 80px 0px;
}

.abort-content {
    font-family: monospace;
    background-color: #fefefe;
    margin: auto;
    padding: 40px;
    border: 1px solid #888;
    width: 25%;
    max-width: 1500px;
    color: #444;
    border-radius: 10px;
    box-shadow: 0px 20px 80px 0px;
}

.abortModal-title {
    font-size: 35px;
    margin-top: 0px;
}

.abortModal-description {
    font-size: 16px;
    margin-bottom: 24px;
}

.abortModal-buttonDiv {
    display: flex;
    justify-content: space-around;
}

.rerunModal-title {
    font-size: 35px;
    margin-top: 0px;
}

.rerunModal-description {
    font-size: 16px;
    margin-bottom: 24px;
}

.rerunModal-openOut {
    /* HACK: "open out" icon scaling is off otherwise. */
    transform: scale(.75);
    margin: 0px -7px;
}

.rerunModal-radioButtonGroup {
    margin: 10px 0px;
}

.rerunModal-radioButtonRow {
    margin: 10px;
}

.rerunModal-radioLabel {
    min-width: 250px;
}

.rerunModal-accordion {
    margin-bottom: 20px;
}

.rerunModal-accordionButton {
    background-color: #ccc;
    color: #444;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
    height: 40px;
    border: none;
    text-align: left;
    outline: none;
}

.rerunModal-expandIcon {
    transition: all 0.2s ease-out;
}

.rerunModal-expandIcon--expanded {
    transform: rotate(-180deg);
}

.rerunModal-accordionPanel {
    background-color: #e5e5e5;
    max-height: 0px;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.rerunModal-accordionPanel--expanded {
    max-height: 250px;
}

.accordion-panel-content {
    padding: 20px;
}

.rerunModal-accordionDescription {
    font-size: 16px;
}

.rerunModal-commandContent {
    display: flex;
    background-color: lightgrey;
    padding: 10px;
    border-radius: 5px;
}

.rerunModal-commandDescription {
    font-size: 16px;
}

.rerunModal-command {
    overflow-x: auto;
    white-space: nowrap;
    background-color: #efefef;
    margin-right: 5px;
}

#queries li {
    padding: .5em .35em;
    line-height: 1.75;
    color: black;
    list-style-type: disc;
}

#info-div h4 {
    cursor: pointer;
    margin-top: 0.6em;
}


span.label {
    padding: .11em .35em;
    border-radius: .2em;
    border: .1em solid transparent;
    transition: opacity 0.2s linear;
    font-weight: bold;
    margin: 0 .1em;
    text-align: center;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    white-space: nowrap;
}

span.label:not(.merge-table-label):hover {
    opacity: 0.85;
}

.table-container {
    overflow-x: auto;
}

/**
 * Command help style sheet.
 */
.emphasis {
    font-weight: bold;
}

.card-box {
    background-color: white;
    border-radius: 2px;
    box-shadow: 0 0 4px #e0e0e0;
    padding: 8px 8px;
}

#command-table {
    display: none;
    margin: 8px;
    width: calc(100% - 16px);
}

.command-examples {
    background-color: #e5e5e5;
    border-radius: 2px;
    box-shadow: 1px 1px 2px #ededed;
    display: inline-block;
    font-size: 15px;
    margin: 4px 0;
    padding: 2px 8px;
}

.command-usage {
    color: #757575;
    font-size: 15px;
    font-weight: bolder;
    max-width: 170px;
}

.command-example-list {
  list-style-type: none;
  padding: 0;
}

.table-cell {
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
}

.command-desc-text {
    font-size: 15px;
    overflow-wrap: break-word;
}

#dialog {
  width: 500px;
}

.dialog-section-title {
  font-weight: bold;
}

#usage-col {
    min-width: 200px;
}

#description-col {
    min-width: 200px;
}

.fuzzy-search {
    position: relative;
}

.fuzzy-search-input {
    border-width: 0 0 1px 0;
    outline: none;
}

.fuzzy-search, .fuzzy-search-input {
    font-size: 14px;
    width: 450px;
}

#job-list li {
    display: block;
    margin: 0;
    padding: 8px 8px;
}

.job-selected {
    background-color: #e5e5e5;
}

.fuzzy-search-list {
    background-color: #fff;
    box-shadow: 0 0 4px #e0e0e0;
    display: none;
    height: 300px;
    left: 0;
    overflow-y: scroll;
    padding: 0;
    position: absolute;
}

.active-fuzzy-search {
    display: block;
}

.featured-icon {
    color: #FDD835;
}

.external-icon, .link-icon {
    color: #607D8B;
}

.icon-button {
    color: #757575;
}

/*
Plugin Help style
 */
#plugin-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.plugin-help-card.mdl-card {
    justify-content: space-between;
    margin: 8px;
    min-height: 0;
    width: 400px;
}

.plugin-help-card > .mdl-card__supporting-text {
    font-size: 15px;
}

.plugin-help-card > .mdl-card__title, .mdl-dialog__title {
    color: #3f51b5;
}

.plugin-help-card.deprecated > .mdl-card__title {
    color: #e57373;
}

.plugin-help-command-link {
    background-color: #e5e5e5;
    border-radius: 2px;
    box-shadow: 1px 1px 2px #ededed;
    color: #757575;
    display: inline-block;
    font-size: 15px;
    font-weight: bold;
    margin: 0 8px;
    padding: 8px 16px;
}

/*
 * PR dashboard style sheet
 */
#loading-progress {
    margin: 0 8px;
    width: calc(100% - 16px);
}

#pr-container {
    display: flex;
    flex-direction: column;
}

#pr-container .message {
    padding-top: 72px;
    text-align: center;
}

#merge-help-dialog.mdl-dialog, #status-help-dialog.mdl-dialog, #search-dialog.mdl-dialog {
    width: 600px;
}

#query-dialog.mdl-dialog {
    width: 600px;
}

#query-dialog .label {
    line-height: 18px;
}

#search-action {
    align-items: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-left: 8px;
}

#search-input-ctn {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#search-card h6 {
    color: #3F51B5;
    margin: 0;
}

#search-card.mdl-card {
    min-height: 0;
    padding: 8px 24px;
}

#search-input {
    align-self: center;
    background-color: #FAFAFA;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    line-height: 40px;
    font-size: 15px;
    overflow: hidden;
    padding: 0 8px;
    width: 100%;
}

.arrow-icon {
    margin-left: auto;
}

.help-icon-button .icon-button {
    color: #607D8B;
}

.job-list a {
    color: rgba(0, 0, 0, .87);
}

.job-list.mdl-list {
    border: 1px solid #E0E0E0;
    border-top: none;
    max-height: 240px;
    padding: 0;
    overflow-y: auto;
}

.job-list-item.mdl-list__item {
    min-height: 32px;
    padding: 4px;
}

.job-list-item:hover {
    background-color: #CFD8DC;
}

.job-list-item.mdl-list__item .mdl-list__item-primary-content .mdl-list__item-icon {
    margin-right: 17px;
}

.merge-table {
    box-shadow: none;
    background-color: #F5F5F5;
    user-select: none;
}

.merge-table tbody td:not(.merge-table-icon) {
    width: 47%;
}

.merge-table-icon {
    padding: 0;
    width: 6%;
    text-align: center;
}

.merge-table thead td {
    font-weight: bold;
}

.merge-table thead tr:last-child {
    border-top: 2px solid #BDBDBD;
    color: #424242;
}

.merge-table-label.label {
    display: inline-block;
    margin: 2px 2px;
}

.merge-table thead tr {
    border-top: none;
}

.merge-table tr {
    border: 1px solid #E0E0E0;
    box-shadow: none;
    height: 40px;
    min-height: 40px;
}

.message-icon.material-icons {
    color: #444444;
    font-size: 28px;
    margin-left: 12px;
}

.no-status.status {
    padding-left: 54px;
    cursor: unset;
}

.title-label {
    font-size: 13px;
    font-weight: bold;
    border-radius: 4px;
    margin-left: 8px;
    padding: 4px 8px;
}

.title-label.failed {
    background-color: #EF5350;
    color: #ffffff;
}

.title-label.succeeded {
    background-color: #43A047;
    color: #ffffff;
}
.title-label.pending {
    background-color: #FFD54F;
}

.title-label.batching, .title-label.passing {
    background-color: #1E88E5;
    color: #ffffff;
}

.title-label.merging {
    background-color: #673AB7;
    color: #ffffff;
}

.title-label.unknown {
    background-color: #757575;
    color: #ffffff;
}

.pr-card {
    align-self: center;
    flex-shrink: 0;
    justify-content: center;
    margin: 4px 0;
}

.pr-card.mdl-card {
    border: 1px solid #e5e5e5;
    max-width: 800px;
    min-width: 500px;
    width: 100%;
}

.pr-card > .mdl-card__supporting-text {
    color: #3c3c3c;
    padding-top: 0;
    width: auto;
}

.pr-card > .mdl-card__supporting-text h3 {
    color: #616161;
    margin: 0 0 12px 0;
    font-size: 24px;
}

.pr-card > .mdl-card__title {
    justify-content: space-between;
}

.pr-card > .mdl-card__title h4 {
    color: #3F51B5;
}

.pr-card > .mdl-card__title a {
    padding: 0;
}

.pr-title-text {
    align-items: center;
    display: flex;
    justify-content: center;
}

.pr-title-text > .mdl-card__subtitle-text {
    padding-left: 8px;
}

.pr-status-dialog > .mdl-dialog__title {
    font-size: 32px;
}

.detail-data {
    color: #3c3c3c;
    margin: 0;
}

.detail-branch {
    margin-right: 8px;
}

.detail-title {
    color: #3f51b5;
    font-size: 16px;
    margin: 8px 0;
}

.status {
    align-items: center;
    cursor: pointer;
    background-color: #ffffff;
    display: flex;
    font-size: 16px;
    height: 24px;
    line-height: 24px;
    padding: 12px 16px 2px 17px;
    user-select: none;
}

.status.expandable {
    border-bottom: 1px solid #EFEBE9;
}

.status > .status-icon {
    margin: 0 12px 4px 0;
}

.status-icon.failed {
    color: #D32F2F;
}

.status-icon.succeeded {
    color: #2E7D32;
}

.status-icon.pending {
    color: #FFB300;
}

.status > .mdl-button--icon > .material-icons {
    font-size: 20px;
    user-select: none;
}

.status > .help-icon-button.mdl-button--icon {
    margin: 0 0 2px 2px;
}

.status-container {
    background-color:  #F5F5F5;
    position: relative;
    margin-top: 2px;
}

.state.mdl-list__item-icon.material-icons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    margin-left: 16px;
}

.search-title {
    align-items: center;
    display: flex;
    margin-top: 8px;
}

.search-title .mdl-button--icon {
    margin-left: 2px;
}

.search-title .mdl-button--icon .material-icons {
    font-size: 20px;
}

@media (max-device-width: 768px) {
    .job-list-item.mdl-list__item {
        font-size: 12px;
    }

    .job-list-item.mdl-list__item .mdl-list__item-primary-content .mdl-list__item-icon {
        margin-right: 14px;
    }

    .no-status.status {
        padding-left: 40px;
    }

    .pr-card.mdl-card {
        margin: 0 0 8px 0;
    }

    .pr-card.mdl-card {
        width: 100%;
        min-width: 0;
    }

    .pr-card > .mdl-card__title h4 {
        font-size: 16px;
    }

    .pr-card > .mdl-card__supporting-text h3 {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 8px;
    }

    .pr-title-text {
        flex-direction: column;
        align-items: flex-start;
    }

    .pr-title-text > .mdl-card__subtitle-text {
        padding-left: 0;
    }

    .title-label {
        margin: 0;
        font-size: 10px;
    }

    .status {
        font-size: 14px;
        padding: 4px 8px;
    }

    .merge-table-label {
        font-size: 10px;
    }

    .merge-table tr {
        font-size: 12px;
    }

    .status .material-icons, .status > .mdl-button--icon > .material-icons {
        font-size: 16px;
    }

    .status-icon.material-icons {
        margin: 0 14px 2px 0;
    }

    .state.mdl-list__item-icon.material-icons {
        margin-left: 4px;
    }

    #merge-help-dialog.mdl-dialog, #query-dialog.mdl-dialog, #status-help-dialog.mdl-dialog,
    #search-dialog.mdl-dialog {
        width: 320px;
    }

}

.alert{
    padding: 15px;
    background-color: #FFCB50;
}

.closebutton {
    color: black;
    float: right;
    font-size: 24px;
    cursor: pointer;
}


@-moz-keyframes spin {
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    to {transform:rotate(360deg);}
}


.loading-spinner {
    animation: spin 1800ms linear infinite;
    margin: 0 auto;
    margin-top: 2px;
    padding: 0;
    max-width: 50px;
    display: block;
    transform-origin: 50% 50%;
}

/* fix tooltips should not copy */
.mdl-tooltip {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version */
}