/**
 * Collapsible Job Log
 */

.collapse-toggle {
  color: #555555;
  cursor: pointer;
  font-size: smaller;
}
.collapse-toggle .icon-closed,
.collapse-toggle .icon-opened {
  width: 10px;
}
.collapse-toggle .icon-closed {
  display: none;
}
.collapse-toggle .icon-opened {
  display: inline-block;
}
.collapse-toggle.collapsed .icon-closed {
  display: inline-block;
}
.collapse-toggle.collapsed .icon-opened {
  display: none;
}

/**
 * Job Progress Bar
 */

.ui-progress {
  margin-top: .5em;
}

.ui-progress-bar {
  background-image:-moz-repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.2) 5px, transparent 5px, transparent 10px);
  background-repeat: repeat;
  background-color: #077537 !important;
  background-position: left;
  -moz-animation-duration: 0.2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-name: progress-animation;
  -moz-animation-timing-function: linear;
}

@-moz-keyframes progress-animation {
  0% {background-position: -14.142px 0;}
  100% {background-position: 0px 0;}
}

.ui-progress-background {
  background-color: transparent;
  border-radius: 10px 10px 10px 10px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) inset, 0 1px 0 0 #FFFFFF;
  height: 8px;
  /* Avoid that the progress bar is behind floating elements, like the rating of an extension. */
  display: flow-root;
}

.ui-progress-bar {
  background-color: #fafafa;
  border-radius: 10px 10px 10px 10px;
  height: 8px;
}

.ui-progress-bar.green {
  box-shadow:
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);

  background-image:
     -webkit-gradient(linear, 0 0, 100% 100%,
        color-stop(.25, rgba(255, 255, 255, .2)),
        color-stop(.25, transparent), color-stop(.5, transparent),
        color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.75, rgba(255, 255, 255, .2)),
        color-stop(.75, transparent), to(transparent)
     );

  -webkit-background-size: 50px 50px;
  -moz-background-size: 50px 50px;
}

.ui-progress-bar.orange {
  /*other*/ background: -moz-repeating-linear-gradient(left top -30deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.17) 15px, rgba(255, 255, 255, 0) 15px, rgba(255, 255, 255, 0) 30px) repeat scroll 0 0%, -moz-linear-gradient(center top , #F1A165, #D09000) repeat scroll 0 0 transparent;
}

.ui-progress-bar.red {
  /*other*/ background: -moz-repeating-linear-gradient(left top -30deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.17) 15px, rgba(255, 255, 255, 0) 15px, rgba(255, 255, 255, 0) 30px) repeat scroll 0 0%, -moz-linear-gradient(center top , #F0A3A3, #F42323) repeat scroll 0 0 transparent;
}

.ui-progress-message {
  color: #555555;
  font-size: .85em;
  line-height: inherit;
  margin: 0;
  min-width: 100px;
  overflow-wrap: break-word;
}