/************************************
* side-panel
*************************************/
.side-panel {
  position: fixed;
  top: $navbar-height;
  right: -310px;
  width: 300px;
  bottom: 0;
  z-index: 999;
  transition: right .5s;
  background: #fff;
  box-shadow: -2px 0 4px rgba(0,0,0,.08);
  
  &.open {
    right: 0;
  }
  
  .nav-tabs {
    border-bottom: none;
  }

  .nav-tabs .nav-item {
    margin: 0;
    width: 33.33%;
  }

  .nav-tabs .nav-link {
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    padding: 0;
    font-size: 14px;
    border-radius: 0;
    border: none;
    border-bottom-style: solid;
    border-bottom-width: 1px;
  }
  
  .nav-tabs .nav-item + .nav-item > .nav-link{
    border-left-style: solid;
    border-left-width: 1px;
  }

  .side-panel-tabs,
  .tab-pane {
    height: 100%;
  }
  
  .tab-content {
    height: calc(100% - 60px);
    overflow: auto;
  }

  @include media-breakpoint-down(sm) {
    width: 100%;
    right: calc(-100% - 10px);
    body.navbar-collapse-in & {
      top: (2 * $navbar-height);
      height: calc(100% - #{2 * $navbar-height});
    }
  }
}

.side-panel {
  .nav-tabs .nav-link {
    border-left-color: #f0f0f0;
    border-bottom-color: #f0f0f0;
    background: #fbfbfb;
    
    &:focus,
    &.active {
      border-bottom: none;
      border-left-color: #f0f0f0;
      background: transparent;
    }
  }
}