/**
    Margin Section
*/
/**
    Padding Section
*/
/**
    Color section
*/
/**
    Info icon
*/
/**
    Font
*/
.deployment-groups-progress-grid {
  width: 114px;
  height: 42px;
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  vertical-align: top;
}

.deployment-groups-progress-grid .deployment-groups-progress-grid-container {
  display: inline-flex;
  flex-wrap: wrap;
}

.deployment-groups-progress-grid .deployment-groups-progress-grid-container .machine-status-icon {
  font-size: 12px;
}

.deployment-groups-progress-grid .single-row {
  margin-top: 14px;
  height: 14px;
}

.deployment-groups-progress-grid .double-row {
  margin-top: 7px;
  height: 28px;
}

.deployment-groups-progress-grid .phase-item {
  height: 14px;
  overflow: hidden;
  width: 14px;
  display: inline-flex;
  margin-right: 2px;
  margin-top: 2px;
  align-items: center;
  justify-content: center;
}

@media screen and (-ms-high-contrast: active) {
  .deployment-groups-progress-grid .phase-item {
    border:  1px solid;
    border-color: rgba( 218, 218, 218 ,  1 );
  }
}

.deployment-groups-progress-grid .variable-item-size.phase-item:hover, .deployment-groups-progress-grid .variable-item-size.phase-item:focus {
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}

.deployment-groups-progress-grid .phase-running {
  background: linear-gradient(to right, rgba( 16, 110, 190 ,  1 ), rgba(0, 120, 212, 1), rgba( 43, 136, 216 ,  1 ), rgba( 43, 136, 216 ,  1 ), rgba( 199, 224, 244 ,  1 ));
  background: linear-gradient(to right, rgba( var(--palette-primary-shade-10,16, 110, 190) ,  1 ), var(--status-info-background,rgba(0, 120, 212, 1)), rgba( var(--palette-primary-tint-10,43, 136, 216) ,  1 ), rgba( var(--palette-primary-tint-10,43, 136, 216) ,  1 ), rgba( var(--palette-primary-tint-20,199, 224, 244) ,  1 ));
  background-size: 2000% 2000%;
  animation: phase-running-animation 3s ease infinite;
  -webkit-animation: phase-running-animation 3s ease infinite;
  -moz-animation: phase-running-animation 3s ease infinite;
}

.deployment-groups-progress-grid .phase-skipped {
  background-color: rgba( 255, 255, 255 ,  1 );
  background-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
  border:  2px solid;
  border-color: rgba( 218, 10, 0 ,  1 );
  border-color: rgba( var(--palette-accent1,218, 10, 0) ,  1 );
}

.deployment-groups-progress-grid .phase-completed {
  background-color: rgba( 16, 124, 16 ,  1 );
  background-color: rgba( var(--palette-accent2-dark,16, 124, 16) ,  1 );
}

.deployment-groups-progress-grid .phase-partially-succeeded {
  background-color: rgba( 214, 127, 60 ,  1 );
  background-color: rgba( var(--palette-accent3,214, 127, 60) ,  1 );
}

.deployment-groups-progress-grid .phase-failed {
  background-color: rgba( 218, 10, 0 ,  1 );
  background-color: rgba( var(--palette-accent1,218, 10, 0) ,  1 );
}

.deployment-groups-progress-grid .phase-empty {
  border-color: rgba( 166, 166, 166 ,  1 );
  border-color: rgba( var(--palette-neutral-30,166, 166, 166) ,  1 );
  border-width: 1px;
  border-style: solid;
}

.deployment-groups-progress-grid .phase-empty .machine-status-icon.bowtie-status-waiting {
  color: rgba( 166, 166, 166 ,  1 );
  color: rgba( var(--palette-neutral-30,166, 166, 166) ,  1 );
}

.deployment-groups-progress-grid .machine-status-icon.bowtie-status-warning-outline, .deployment-groups-progress-grid .machine-status-icon.bowtie-edit-remove {
  color: rgba( 255, 255, 255 ,  1 );
  color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
}

.deployment-groups-progress-grid .variable-item-size {
  cursor: pointer;
}

.deployment-groups-progress-grid .variable-item-size .machine-status-icon {
  color: rgba( 255, 255, 255 ,  1 );
  color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
}

.deployment-groups-progress-grid .variable-item-size.item-size-s {
  height: 24px;
  width: 24px;
  margin-right: 4px;
  margin-top: 4px;
}

.deployment-groups-progress-grid .variable-item-size.item-size-m {
  height: 32px;
  width: 32px;
  margin-right: 5px;
  margin-top: 2px;
}

.deployment-groups-progress-grid .variable-item-size.item-size-l {
  height: 40px;
  width: 40px;
  margin-right: 5px;
  margin-top: 2px;
}

.deployment-groups-progress-grid .variable-item-size.item-size-xl {
  height: 56px;
  width: 56px;
  margin-right: 5px;
  margin-top: 2px;
}

.deployment-groups-progress-grid .variable-item-size.item-size-xl .machine-status-icon {
  font-size: 42px;
  padding-left: 4px;
}

.deployment-groups-progress-grid .variable-item-size.item-size-xxl {
  height: 80px;
  width: 80px;
  margin-right: 15px;
  margin-top: 12px;
}

.deployment-groups-progress-grid .variable-item-size.item-size-xxl .machine-status-icon {
  font-size: 60px;
  padding-left: 5px;
}

.variable-grid-size {
  width: 430px;
  height: 100%;
}

.variable-grid-size.variable-grid-wider {
  width: 450px;
}

.extra-machine-count-container {
  position: absolute;
  right: 0px;
  bottom: 0px;
  margin-right: 4px;
  min-width: 14px;
  font-size: 10px;
  font-weight: 700;
}

.extra-machine-count-container .extra-machine-fadeout {
  float: left;
  width: 10px;
  height: 14px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba( 222, 236, 249 ,  1 ));
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba( var(--palette-primary-tint-30,222, 236, 249) ,  1 ));
}

.extra-machine-count-container .extra-machine-count {
  text-align: right;
  color: rgba(0, 120, 212, 1);
  color: var(--status-info-foreground,rgba(0, 120, 212, 1));
  min-width: 12px;
  height: 14px;
  float: right;
  background: rgba( 222, 236, 249 ,  1 );
  background: rgba( var(--palette-primary-tint-30,222, 236, 249) ,  1 );
}

@keyframes phase-running-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}