energylink/public/sass/components/_thresholds.scss

.thresholds {
  display: flex;
  margin-top: 30px;
}

.threshold-rows {
  margin-left: 5px;
}

.threshold-row {
  display: flex;
  align-items: center;
  margin: 5px 0;
  padding: 5px;

  &::before {
    font-family: 'FontAwesome';
    content: '\f0d9';
    color: $input-label-border-color;
  }
}

.threshold-row-inner {
  border: 1px solid $input-label-border-color;
  border-radius: $border-radius;
  display: flex;
  overflow: hidden;
  width: 300px;
  height: 37px;
}

.threshold-row-color {
  width: 36px;
  border-right: 1px solid $input-label-border-color;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: $input-bg;
}

.threshold-row-color-inner {
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.threshold-row-input {
  padding: 8px 10px;
  width: 230px;
}

.threshold-row-label {
  background-color: $input-label-bg;
  padding: 5px;
  width: 36px;
  display: flex;
  align-items: center;
}

.threshold-row-add-label {
  align-items: center;
  display: flex;
  padding: 5px 8px;
}

.threshold-row-min {
  margin-top: -22px;
}

.threshold-row-max {
  margin-bottom: -22px;
}

.threshold-row-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  cursor: pointer;
}

.threshold-row-add {
  border-right: $border-width solid $input-label-border-color;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  background-color: $green;
}

.threshold-row-label {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.indicator-section {
  width: 100%;
  cursor: pointer;
}

.color-indicators {
  width: 15px;
  border-radius: $border-radius;
  overflow: hidden;
}