@import './../../../../../assets/styles/variables.less';
@import './../../../../../assets/styles/variables-old.less';
@import './../../../../../assets/styles/mixins_old.less';
@import './../../../../../assets/styles/sprite.less';

.service-consumption {
  min-height: 100px;
  .no-operations-text {
    text-align: center;
    padding: 30px;
    opacity: 0.7;
    font-size: 14px;
  }
  .interface-operations-group {
    &:first-of-type {
      margin-top: 1px;
    }
    .interface-title {
      display: flex;
      .title-text {
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 90%;
        padding-left: 4px;
      }
      &.expanded {
        background-color: @tlv_color_v;
        border-left: 4px solid @main_color_a;
        box-shadow: 0 0px 3px -1px rgba(0, 0, 0, 0.3);
        margin-bottom: 2px;
        padding-left: 4px !important;
        .expand-collapse-icon {
          .expand-collapse-minus-icon;
        }
      }
      .expand-collapse-icon {
        margin: 0 6px;
        display: inline-block;
        margin-top: 4px;
      }
    }
    .operation-data {
      border-bottom: 1px solid #c8cdd1;
      padding: 5px 10px 5px 18px;
      min-height: 61px;
      display: flex;
      align-items: center;
    }

    .operation-name {
      .s_1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 220px;
      display: inline-block;
      &:not(.readonly):hover {
        .a_7;
      }
      &.readonly {
        opacity: 0.5;
      }
    }
  }
}