// ------------------------------------------------------------- SERVICES
.listFilterServiceBoxes{
  $col1Width: 60px;

  .col1 {
    width: $col1Width;
    padding: $space/4;

    .icon {
        // undo built-in cursor: pointer on .icon*
        cursor: default;
    }
  }
}

/**
 * .box adds a border. If a fieldset has .box, that border appears at "strikethrough" height for the fieldset legend,
 * which looks pretty bad. For this combination, remove the standard bottom border and minimize legend width to allow the
 * border to at least fill the sides of the legend text.
 */
fieldset.box {
  legend {
    display: inline-block;
    width: auto;
    border-bottom: none;
  }
}

// --------------------------------------------------------- VIEW SERVICE
.serviceContainer{
  .labelText{float:left;}
  .metaText{@extend .smallText;}
  margin-bottom:$space;
}
.serviceMetaContainer {
  $padding: 5px;
  .labelText {
    float: none;
  }
  .metaText {
    line-height: 16px;
    margin-bottom: 5px;
    text-align: justify;
    padding-bottom: $padding;
  }

  .metaUrl {
    word-wrap: break-word;

  }
}

.serviceContactContainer{
  $labelWidth:90px;

  .labelText{width:$labelWidth; }
  .metaText{margin-left:$labelWidth + $space/2; }
}
.serviceServiceContainer {
  $labeText:85px;

  .list, li{clear:both;}
  .list{
    border-left:dashed 1px darken(#fff, 20%);
    margin-bottom:$space/2;
    li{margin-left:$space;}

    // no margin for labeltext lists ...
    ul.left li{
      margin-left:0;
      // ... and metatext below lists
      .metaText{margin-left:0;}
    }
  }
  .list.closed {
    li.openCloseTitle~li {
      display: none;
    }
  }
  .labelText{
    width:$labeText;
    margin-right:$space/2;
  }
  li.openCloseTitle {
    cursor:pointer;
    margin-left: -5px;  // push ~halfway on top of the border-left
    &:before {
      margin-right: .5em;
    }
    &~li {
      margin-left: 1em;
    }
  }
  .metaText{
    display: block;
    margin-left:$labeText + $space/2;
    word-wrap: break-word;
  }
}
// --------------------------------------------------------- EDIT SERVICE
.instanceContainer{
  .origin-url {
      display: inline-block;
      max-width: 60%;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
      white-space: nowrap;
  }

  .extendedGroup {
    .on-off{
      border: solid 1px darken($contentColor,55%);
      background-color:darken($contentColor,25%);
      &.active {
        background-color:darken($contentColor,35%);
      }
      &:hover {
        background-color:darken($contentColor,20%);
        &.active {
          background-color:darken($contentColor,30%);
        }
      }
    }
    .blockgroup {
      .labelInput{width:80px;}
      .inputWrapper, div.dropdown {
        width:200px;
        margin:0.25em 0;
        display: inline-block;
      }
    }
    .on-off-content{
      background-color: darken($contentColor, 9%);
    }
    .vendorspecific-content,.on-off-content .on-off-content{
      padding: $space/2 $space/2 $space/2 $space/2;
    }
    .on-off-title {
      padding: 0 $space/2 0 $space/2;
    }
    .blockgroup {
      margin-bottom: 1em;
    }
    .vendorspecific-content{
      input {width:100%;}
      a.collectionRemove {
        float: right;
      }
    }
    .mb-slider{margin-top: $space/2;}
  }
}

.instanceTable{
  margin-top:$space;
  margin-bottom:$space;
  .checkWrapper.left {
    /** @todo: remove float from checkbox_widget block globally */
    float: none;
  }

  .checkboxColumn{
    text-align:center;
  }
  .odd{background-color:darken($contentColor, 6%);}

  &.table {
    background-color: lighten($contentColor, 2%);
    > thead > tr > .checkboxColumn {
      padding-left: 2px;
      padding-right: 2px;
    }
    > tbody > tr > td {
      &.titleColumn {
        width: 260px;
      }
      &.itemType {
        padding-right: 0;
        padding-left: 0;
        cursor:ns-resize;
        line-height:$inputHeight;
      }
      &.minScaleColumn,
      &.maxScaleColumn {
        padding-left: 4px;
      }
    }
  }

  tbody{
    .dropdown{min-width:100%;}
    .minScaleColumn, .maxScaleColumn, .styleColumn{width:80px;}
    .checkboxColumn {
      .checkWrapper {
        line-height: $inputHeight;
      }
    }
  }
  .level0 .itemType{margin-left:4px;}
  .level1 .itemType{margin-left:10px;}
  .level2 .itemType{margin-left:16px;}
  .level3 .itemType{margin-left:22px;}
  .level4 .itemType{margin-left:28px;}
  .dummy{display:none;}
  .moreColumn {
    position: relative;
    line-height:$inputHeight;
  }
  .input{width:80px;}
  .titleColumn .input{width:200px;}
}
.infoMsgBox {
  &.popover {
    &:not(.hidden) {
      display: initial;
    }
    left: unset;
  }
  min-width: 260px;
  right: 2.5em;

  .labelText, label {
    width: 4.5em;
    display:inline-block;
  }
  // also revert 100% set by .instanceTable... selector
  .dropdown, .instanceTable tbody & .dropdown {
    min-width: 130px;
  }
  // also revert 100% set by contentPane... selector
  .dropdown, .contentPane > .content form & .dropdown {
    width: auto;
  }
}
