/*
==========================================================================
    Submemu
==========================================================================
*/

.submemu, .tab3 {
  margin-top: 20px;
  padding: 0 3px;
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    @include flexbox();
    li {
      padding: 0 2px;
      width: 190px;
      margin-bottom: 4px;
      font-size: $large;
      a {
        padding: 0;
        @include border-radius(0);
        display: block;
        line-height: 30px;
        background: #e2f0d9;
        color: #131111;
        width: 100%;
        text-align: center;
        border: none;
      }
      a:hover {
        background: #e2f0d9;
        color: #131111;
      }
      &.active a {
        background: #85cdc1;
      }
      &.active a:hover {
        color: $c-white;
        text-decoration: none;
      }
    }

  }
}

//different version of tab
.vtabs-area {
  overflow: hidden;
  margin-bottom: 5px;
  .vtabs {
    padding: 0;
    margin: 0;
    .btn {
      min-width: 240px;
      line-height: 30px;
      @include linear-gradient(#ebebeb, #d1d1d1);
      @include border-radius(0px);
      &.active {
        background: $c-lsky2 !important;
      }
    }
  }
  .vtab-section {
    display: none;
    &.current {
      display: block;
    }
  }
}

.mars-tab {
  overflow: hidden;
  margin-bottom: 5px;
  .btn {
    @include border-radius(0px);
    height: 30px;
    min-width: 127px;
    line-height: 30px;
    display: block;
    float: left;
    text-align: center;
    text-decoration: none !important;
    margin-right: 5px;
    font-size: $large;
    background: #e2f0d9;
    color: $c-black !important;
  }

  .btn.active {
    background: #85cdc1;
  }
}

/* Bootstrap Tabs change style */
.mars-nav-tabs {
  margin: 0;
  padding: 0;
  border: none;
  @include linear-gradient(#dde0ec, #9da8ce);
  li {
    float: left;
    margin: 0;
    a {
      margin: 0;
      display: block;
      padding: 5px 10px;
      color: color('black2') !important;
      font-family: $base-font-semibold;
      cursor: pointer;
      @include border-radius(0);
      border: none !important;
      background-color: transparent;
    }
    a:hover {
      background-color: transparent;
      border: none;
    }
    &.active a {
      background-color: color('alice-blue') !important;
    }
  }
  &.tabs-green {
    li.active a {
      background-color: color('bermuda') !important;
    }
  }
  &.tabs-sky-gradient {
    li.active a {
      @include linear-gradient(#b1bdeb, #7c8ecd);
    }
  }
}