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

  .col1{width:$col1Width;}
  .col2{
    margin-left: $col1Width;
    min-height: $fontSize*7;
  }
}

/**
 * .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,
.serviceLayersContainer{
  $labeText:85px;

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

    // no margin for labeltext lists ...
    ul.left li{
      margin-left:0;
      // ... and metatext below lists
      .metaText{margin-left:0;}
    }
  }
  .labelText{
    width:$labeText;
    margin-right:$space/2;
  }
  .openCloseTitle{
    color:$darkFontColor;
    cursor:pointer;
    display: inline-block;
    margin-left:-10px !important;
    background-color:$contentColor;
    padding-left:5px;
    height:17px;
    font-style:italic;
    &:before {
      font-style: normal;
    }

    @include opacity(1);

    &.iconSmall:before{margin-right:$space/2;}
  }
  .closed .openCloseTitle{background-color:$contentColor;}
  .metaText{
    display: block;
    margin-left:$labeText + $space/2;
    word-wrap: break-word;
  }
}
// --------------------------------------------------------- EDIT SERVICE
.instanceContainer{
  .linkButton{display:inline-block;}
  .leftContainer {
    .inputWrapper, .dropdown {
      margin-bottom:$space/2;
    }
    .inputWrapper input {
      width: 100%;
    }
  }
  .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;
    }
    .labelCheck{
      margin: 0 0 0 0.25em;
      height: auto;
    }
    .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;

  .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;
      }
      &.minScaleColumn,
      &.maxScaleColumn {
        padding-left: 4px;
      }
    }
  }

  tbody{
    .dropdown{min-width:100%;}
    .minScaleColumn, .maxScaleColumn, .styleColumn{width:80px;}
    .checkboxColumn{padding:5px 3px 5px 3px;}
    .checkWrapper{margin-top:5px;width: 100%;}
  }
  .level0{margin-left:4px;}
  .level1{margin-left:10px;}
  .level2{margin-left:16px;}
  .level3{margin-left:22px;}
  .level4{margin-left:28px;}
  .dummy{display:none;}
  .itemType{
    line-height:$inputHeight + 10;
    padding:0px;
    cursor:ns-resize;
  }
  .moreColumn{padding-left:0px;}
  .iconMore{
    position: relative;
    line-height:$inputHeight;
  }
  .input{width:80px;}
  .titleColumn .input{width:200px;}
}
.infoMsgBox{
  z-index: 10;
  min-width: 260px;
  padding: 3px $space/2 3px $space/2;
  background-color: white;
  border:solid 1px $thirdColor;
  @include pos(-8px,$space + $space/2,'','');

  @include opacity(1);
  @include border-radius($radius);
  @include transition(all 0.2s ease-in-out);

  &.hide{
    @include opacity(0);
    @include pos('',1000px,'','');
  }

  // small arrow left
  &:after, &:before {
    position: absolute;
    left: 100%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
  }
  &:after{
    border-left-color: $firstColor;
    border-width: 4px;
    top: $space - 7px;
    margin-top: -4px;
  }
  &:before{
    border-left-color: $firstColor;
    border-width: 6px;
    top: $space - 7px;
    margin-top: -5px;
  }

  .labelText{
    width:100px;
    display:inline-block;
  }
  .dropdown{min-width:130px !important;}
}
