:host {
  ::ng-deep {
    .ant-divider.ant-divider-horizontal {
      margin-top: 5px;
      margin-bottom: 5px;

      font-size: 12px;
    }

    .color-picker {
      margin-top: 21.5px;

      .ant-color-picker-trigger {
        min-width: 28px;
        height: 28px;
        padding: 1px;
      }
    }
  }
}

nz-form-item {
  nz-collapse {
    width: 100%;
  }
}

.volume-highlight-options {
  width: 100%;
  display: flex;
  align-items: flex-start;
  column-gap: 5px;

  .ant-form-item-control {
    flex-basis: content;
    flex-shrink: 1;

    .ant-form-item-label {
      padding: 0;

      ::ng-deep label{
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}

.add-volume-highlight-option-btn {
  width: 100%;
  margin-top: 5px;
}

.volume-highlight-options-remove-btn {
  margin-top: 21px;
  flex-shrink: 0;
}

.working-volumes {
  .hint {
    margin-bottom: 2em;
  }

  .working-volume-option {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    column-gap: 5px;
    padding-bottom: 5px;

    .ant-form-item-label {
      padding: 0;
      flex-basis: initial;

      ::ng-deep label {
        line-height: 25px;
        display: inline-block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }

    .ant-form-item-control {
      flex-grow: 1;
      flex-basis: initial;
    }

    .ant-input-number {
      width: 100%;
    }
  }
}

:host {
  ::ng-deep {
    .ant-slider-with-marks {
      margin-right: 10px;
    }
  }
}

