h1 + fieldset, h1 + ul {
  clear: both;
}

.button-to.action.new.service {
  margin-bottom: -48px;
  font-weight: bold;
  float: right;
  padding-bottom: 3px;
  position: relative;
  z-index: 100;
}

#cboxWrapper #delete-service {
  button + button {
    margin-left: 3em;
  }
}

h1 .breadcrumb-separator {
  color: lighten(gray, 20%);
  font-size: 70%;
  line-height: 130%;
}

@mixin overview-widget-accordion {
  // accordion
  //overflow: hidden;

  .title-toggle {
    cursor: pointer;
    height: 28px;
    $size: 24px;
    overflow-y: hidden;

    &:before {
      font-size: 16px;
      content: '▼ ';
    }

    padding: {
      left: $size;
      top: $size;
      right: $size;
      bottom: $size;
    }
    margin: {
      left: -$size;
      top: -$size;
      right: -$size;
      bottom: -$size;
    }
  }
}

@mixin overview-widget {
  padding: 24px;
  clear: left;
  @include pie-clearfix;
  border-bottom: 1px solid $border-color;
  clear: both;

  .title {

    a {
      color: $font-color;
      text-decoration: underline;
      margin-bottom: 12px;
    }
  }

  .title {

    float: none;
    font-size: 200%;
    @include pie-clearfix;

    .button-to {
      margin-top: -0.2em;
      @include text-shadow();

      &.delete {
        float: right;
        margin-top: 0.5em;
      }

      &.edit {
        color: $link-color;
        font-weight: normal;
        margin: 0 0 0 0.5em;
      }
    }
  }

  // BUTTONS
  .button-to {
    padding: 0.3em 0.7em;
    padding-left: 7px;
    font-weight: bold;
    background-position: 12% center;

    // same like margin wich heading does
    &, .helpButton {
      // to line up with heading
      vertical-align: middle;
      @include inline-block;
    }

    &.new {
      position: relative;
      float: right;
      top: -2em;
      padding-bottom: 3px;
    }

  }

  ul.listing {
    clear: left;

    list-style: none;
    @include border-radius(6px);
    padding: 24px;

    border: 1px solid $border-color;

    &[data-hint] {
      min-height: 3em;
    }

    position: relative;

    li {
      line-height: 2.3;
      position: relative;
      margin-left: 0;
      line-height: 1.7;
      border-bottom: 1px solid $border-color;

      .name {
        font-weight: bold;
        //margin-right: 0.5em;
      }

      &:last-child {
        border-bottom: none;
      }

    }
  }
}

.overview-widget {
  @include overview-widget;
}

.service-widget {
  @extend .overview-widget;
  @include overview-widget-accordion;

  section {
    margin-top: 24px;

    h2 {
      margin-top: 48px;
      font-weight: normal;

      &:first-of-type {
          margin-top: 0;
      }

      .button-to, & + .button-to {
          margin-top: -2px;
      }

      & + .button-to {
          float: right;
          margin-right: 0.5em;
      }

      a {
        text-decoration: underline;
        color: $link-hover-color;
        &:hover { color: $link-color }
      }
    }

    &[name='settings'] {
      width: 60%;
      margin-right: 2%;
      padding-right: 2.2%;
      float: left;
        clear: left;
        border-right: 1px solid $border-color;
      }

      &[name='activity'] {
        float: right;
        width: 36%;
        margin-right: -1%;

        #mini-charts {
          @include fluid-charts;
        }
      }
    }


  .latest-alerts, .latest-apps, .service-settings, .service-plans, .application-plans, #mini-charts, .integration {
    @extend ul.listing;
  }

  .latest-alerts li { max-width: 90%; }

  .integration {
    @include clearfix;
    background-color: ivory;
    margin: -24px -24px 24px -24px !important;
    border: none;
    border-bottom: 1px solid $border-color;
    @include border-bottom-radius(0);

    p {
      margin-top: 0;
    }
    .outline-button.next {
      margin: 12px 0 0 0;
    }
  }

  .integration li {
    max-width: 99%;

    img {
      width: 65%;
      margin: 0.1em 1em 1em 5em;
    }
  }
}

form.service #service_description {
    width: 71%;
}

table.data.notification-settings {
  margin-bottom: 48px;

  .spacer {
    padding-top: 24px;
    visibility: hidden;
  }
}

.is-closed {

  .content-service {
    display: none;
  }

  .title-toggle:before {
    content: '► ';
  }
}
