div.resizecontainer {
  @extend %clear-float; 
  margin: 0 auto;
}

@media (max-width: 798px) {

  #arangoCollectionUl {
    display: none;
  }

  #collectionsDropdown ul {
    width: auto !important;
  }

  #arangoCollectionSelect {
    display: inline-block;
  }
}

@media (min-width: 799px) and (max-width: 1041px) {

  #arangoCollectionUl a {
    font-size: 12px;
    padding: 10px 5px;
  }
}

@media (min-width: 1042px) and (max-width: 1284px) {

  #arangoCollectionUl a {
    font-size: 14px;
  }

}

@for $i from 0 through 11 {
  $min: 242px * $i;
  @media (min-width: $min + 6) and (max-width: $min + 242 + 5) {

    div.resizecontainer {
      width: $min;
    }

    div.modalChartDetail {
      left: 50%;
      margin-left: -$min/2;
      width: $min;
    }
  }
}

div.centralRow {
  margin: {
    top: 65px;
    bottom: 65px;
  }
}

div.centralContent {
  @extend %pull-left;
  background-color: $c-content-transp;
  height: 100%;
  margin-left: -5px;
  margin-right: -5px;
  min-height: 80px;
  padding: 5px;
  width: 100%;
}

.contentDiv {
  list-style: none;
  padding: 13px 0 0;

  li {
    @extend %pull-left;
    background-color: $c-very-transp;
  }

  a.add {
    display: block;
    font-weight: 400;
    padding: 40px 0;
    text-align: left;
  }

  .icon {
    @extend %clickable;
    padding: {
      left: 5px;
      right:5px;
      top: 10px;
    }
  }

  &:after {
    clear: both;
  }

  &:after,
  &:before {
    content: '';
    display: table;
    line-height: 0;
  }
}