.tabContainer{
  $tabPopHeight:3px;
  $tabHeight:34px;

  .tab{
    margin-right:3px;
    color:$middleFontColor;
    background-color:$contentColor;
    cursor:pointer;
    height:$tabHeight;
    z-index:10;
    border:{
      left:solid 1px $thirdColor;
      top:solid 1px $thirdColor;
      right:solid 1px $thirdColor;
    }
    float:left;
    padding:3px 10px 3px 10px;
    @include relative('' '' '-$tabPopHeight*2' '');
    @extend .smallText;
    @include noUserSelect();

    &:hover{bottom:-$tabPopHeight;}

    &.active{
      cursor:default;
      color:$darkFontColor;
      bottom:-$tabPopHeight;
      height:$tabHeight;
      z-index: 30;
      background-color:$contentColor;
    }
  }
  .container{
    clear:left;
    display:none;
    padding:$space;
    z-index:20;
    position:relative;
    background-color:$contentColor;
    border:{
      top:solid 3px $thirdColor;
      left:solid 1px $thirdColor;
      right:solid 1px $thirdColor;
      bottom:solid 1px $thirdColor;
    }
    &.active{display:block;}
  }
}

.tabContainerAlt{
  .tab{
    display: inline-block;
    @extend .button;

    &.active{
      cursor:default;
      background-color:darken($buttonFirstColor, 10%);
      color:$lightFontColor;
    }
    a {
      color:inherit;
    }
  }
  .container{
    border-top:dashed 1px $thirdColor;
    margin-top:$space;
    clear:left;
    display:none;
    padding: 0px;
    padding-top:$space;
    padding-bottom:$space;
    z-index:20;
    position:relative;
    width: 100%;
    &.active{display:block;}
  }
}

.accordionContainer {
  display: table;
  height: 100%;
  width: 100%;
    
  .accordion{
    display: table-row;
    >div{
      display: table-cell;
      @extend .button;
    }
    &.active{
      cursor:default;
      background-color:darken($buttonFirstColor, 10%);
      color:$lightFontColor;
      >div{background-color:darken($buttonFirstColor, 10%);}          
    }
  }
  .container-accordion{
    display: none;
    &.active{
      display: table-row;
      .accordion-cell {
        display: table-cell;
        height: 100%;
        .accordion-wrapper{
          height: 100%;
          display:block; 
          position: relative;
          >.mb-element,>div{
            display:block;
            position: absolute;
            bottom:0;
            top:0;
            overflow-y: auto;
            overflow-x: hidden;
            width:100%;
          }
          >.mb-element{padding-top:$space/2}
        }
      }
    }
  }
}