.overview-list{
  @include list-unstyled;
  @include horizional-flex-align-center;
  li{
    @include flex-adapter;
    &:not(:first-child){
      border-left:$border-width solid $border-color;
    }
  }
}
.overview-model{
  background: $important-color;
  text-align: center;
  color: #fff;
  overflow:hidden;
  position: relative;
  &:after, &:before {
    content: " ";
    display: table;
  }
  .icon-block {
    width: 8rem;
    height: 8rem;
    display: block;
    float: left;
    padding-top: $component-span;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 3.5rem;
    line-height:  3.5rem;
    i {
      color: #fff;
      opacity: 0.1;
      margin-left: - 3.5rem;
      font-size: 1.1rem;
      line-height: 1.1rem;
    }
  }
  .details {
    position: absolute;
    right: $component-span;
    padding-top:$component-span;
    .key{
      display:block;
      color: #fff;
      @include user-select-none;
      text-align: right;
      font-size:$font-size;
      opacity: 0.8;
      font-weight:bold;
    }
    .value{
      display:block;
      color: #fff;
      @include user-select-none;
      text-align: right;
      font-size: 3rem;
    }
  }
  .more {
    clear: both;
    display: block;
    padding: $component-span;
    position: relative;
    text-transform: uppercase;
    font-weight: 300;
    font-size: $font-size;
    opacity: 0.7;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.3);
    text-align:left;
    i {
      display: inline-block;
      margin-top: 0.1rem;
      float: right;
      border:$border-width solid rgba(255, 255, 255, 0.8);
      border-radius:50%;
      width:1.6rem;
      height:1.6rem;
      line-height:1.4rem;
      text-align:center;
    }
  }
}