.box{
  border: solid 1px $thirdColor;
  background-color: $contentColor;
}
.listFilterBoxes{
  li {
    margin-bottom: $space;
    display: flex;
    flex-direction: row;
  }
  .col1 {
    flex: 0 0 auto;  // no growth
    text-align:center;
    color:$lightFontColor;
    background-color:$firstColor;
  }
  .col2 {
    padding:$space/2;
    flex: 1 1 auto;  // fit available space
  }
  .buttonGroup {
    float: right;
    font-size: 20px;
    line-height: 1;
    white-space: nowrap;
    > * + * {
      margin-left: .2em;
    }
  }
  .description{
    margin-top:$space/2;
    padding-top:$space/2;
    border-top:dashed 1px darken(#fff, 30%);
  }
}
.messageBox{
  /** @deprecated; use bootstrap alert.alert-info or alert.alert-danger as appropriate */
  /** @todo: remove, mark custom template BC break */
  padding:$space/2;
  margin-bottom:$space;

  &.error{
    color:$errorColor;
    background-color: lighten($errorColor, 50%);
    border:solid 1px lighten($errorColor, 40%);
  }
  &.hint{
    color:$hintColor;
    background-color: lighten($hintColor, 50%);
    border:solid 1px lighten($hintColor, 40%);
  }
}
.flashBox{
  $width:280px;

  padding:($space/4) ($space/2);
  background-color:$contentColor;
  text-align: center;
  width: $width;
  margin-left:-$width/2;
  @include absolute(0 '' '' 50%);
  @include transition(all 1s ease-in-out);
  opacity: 1;

  &.success{
    @extend .iconThumbsUp;
    color:darken($noticeColor, 10%);
    background-color: lighten($noticeColor, 50%);
  }
  &.error{
    @extend .iconThumbsDown;
    color:darken($errorColor, 10%);
    background-color: lighten($errorColor, 50%);
  }
  &.warning{
    @extend .iconThumbsUp;
    color:darken($warningColor, 10%);
    background-color: lighten($warningColor, 50%);
  }
  &.kill{
    top:-100px;
    opacity: 0;
  }
}
fieldset{
  padding:$space;

  legend{
    @extend .subTitle;
    margin:0;
    padding:0 5px 0 5px;
  }
}
