$border-color: #e2e2e2;
$bg-heading : #F8F8F8;
$bg-main : #f0f2f5;

.inspius-list-demo{
  li{
    display: inline-block;
    border: 3px solid #f0f0f0;
    margin-right: 10px;
    cursor: pointer;
    &.active,
    &:hover{
      border-color: #0085ba;
    }
  }
}

.inspius_sample_data{
  max-width: 940px;
  margin-top: 30px;
  border: 1px solid $border-color;
  background-color: $bg-main;
  .header{
    border-bottom: 1px solid $border-color;
    background-color: $bg-heading;
    a{
      padding: 20px 0;
      display: block;
      text-align: center;
      outline: 0;
      -webkit-box-shadow: none;
      box-shadow: none;
    }
  }
  .box-content{
    background-color: #fff;
    margin: 30px 15px;
    border: 1px solid $border-color;
    h3{
      background-color: $bg-heading;
      margin: 0;
      padding: 15px 30px;
      text-transform: uppercase;
      font-size: 18px;
      border-bottom: 1px solid $border-color;
    }
    .inner{
      padding: 15px 30px;
    }
    ul{
      margin: 0;
    }
    .list-action{
      li{
        display: none;
        margin: 20px 0;
        &.visible{
          display: block;
        }
      }
    }
  }
  .desc{
    ul{
      list-style: disc;
      padding-left: 15px;
    }
  }
  .success,
  .loading{
    display: none;
    &.active{
      display: block;
    }
  }
  .success{
    padding: 15px 30px;
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
  }
  .loading{
    padding: 20px 15px 20px 80px;
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
    position: relative;
    &:before{
      content: "";
      display: inline-block;
      width: 40px;
      height: 40px;
      position: absolute;
      top: 50%;
      left: 30px;
      margin-top: -20px;
      background: url(../images/loading.gif) no-repeat;
    }
  }
}

@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}