// --------------------------------------------------------- VIEW SERVICE
.content-toggle-container {
  &.closed >.content-toggle-target {
    display: none;
  }
  .content-toggle {
    // Prevent undesired double-click => select all behaviour on quick toggles
    user-select: none;
  }
  // Fix calculated height on floating icon (see instance form vendor specific panel toggle)
  >.content-toggle i.fa-lg.pull-right {
    margin-top: 0.25em;
  }
}
.serviceContainer{
  tbody th {
    font-weight: bold;
    vertical-align: top;
    &:first-child {
      width: 1%;
      white-space: nowrap;
      padding-right: 0.5em;
    }
  }
  td {
    overflow-wrap: break-word;
    word-break: break-word;
  }
  table {
    margin-bottom: 1em;
  }
  .indent {
    margin-left: 1em;
  }
  table.lighter-headings {
    tbody th {
      font-weight: 600;
    }
  }
  .list {
    margin-left: 1.5em;
  }
  .list, .list table, .indent table {
    margin-bottom: 0.5em;
  }
}

// --------------------------------------------------------- EDIT SERVICE
.instanceContainer{
  .extendedGroup {
    .collectionAdd {
      display: block;
    }
    .collectionItem {
      display: inline-block;
    }
    .labelInput {width:90px;}
    .collectionRemove {
      right: -1.5em;
    }
    .mb-slider{margin-top: 10px;}
    .form-group .checkbox {
      margin-top: 0;
    }
    .vendorspecifics-form .collectionItem .col-sm-2 {
      width: 25%;
    }
  }
}

.instanceTable{
  .checkboxColumn{
    text-align:center;
  }
  .group-start {
    border-left: 2px solid #ccc;
  }
  .group-end {
    border-right: 2px solid #ccc;
  }

  &.table {
    >tbody>tr>td {
      // Overrule Bootstrap .table to nicely align
      // inputs vs smaller icons / checkboxes
      vertical-align: middle;
    }
  }
  .level1 .itemType{margin-left: 0.4em;}
  .level2 .itemType{margin-left: 0.8em;}
  .level3 .itemType{margin-left: 1.2em;}
  .level4 .itemType{margin-left: 1.6em;}
  .dummy{display:none;}

  .titleColumn {
    width: 99%;   // Expand to maximum remaining width
  }
  td.itemType, .checkboxColumn {
    width: 1%;    // Contract as far as possible
  }
  td {
    .minScale, .maxScale {
      width: 90px;
    }
  }
  .form-check-input {
      text-align: center;
      float: none;
      &[disabled] {
        border: 1px solid rgba(128,128,128, 0.5);
      }
  }
  th.checkboxColumn {
    padding: .5rem .2rem;
  }
}
