/**
 * #.# Styles
 *
 * CSS for both Frontend+Backend.
*/
.acb-tabs-block{
  margin-bottom: 30px;

  .acb-tabs-block-head{
    text-align: left;
    border-bottom: 1px solid #e8e8e8;
    border-left: 1.5px solid #e8e8e8;
    position: relative;
    z-index: 2;
    font-size: 0;
    list-style: none;
    margin: 0;

    &:before, &:after{
      content: " ";
      display: table;
      clear: both;
    }

    .acb-tabs-block-tab{
      text-align: center;
      float: left;
      line-height: 30px;
      font-size: 13px;
      cursor: default;
      margin: 0;
      list-style: none;
      text-decoration: none;
      border: 1px solid #e8e8e8;
      padding: 0 20px;
      border-bottom: 0;
      border-left: 0;
      height: 30px;
      color: #777;
      background: #f7f7f7;
      box-sizing: border-box;
      transition: all 0.15s ease-in-out;

      &.active{
        background: white;
        height: 31px;
        margin-bottom: -1px;
        color: #000;
      }

      &:hover{
        color: #000;
      }

      &:not(.active){
        cursor: pointer;
      }
    }

    @media only screen and (max-width: 767px){
      .acb-tabs-block-tab{
        width: 100% !important;
        text-align: left;
      }
    }
  }

  .acb-tabs-block-body{
    position: relative;
    z-index: 1;
    padding: 15px 15px;
    border: 1px solid #e8e8e8;
    border-top: 0;
    .acb-tabs-block-content{
      display: none;
      font-size: 13px;

      p:last-child{
        margin-bottom: 0;
      }

      &.active{
        display: block;
      }
    }
  }
}