// Bootstrap override - looks like this is missing?
.nav-tabs>li.active>a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid #ddd;
	border-bottom-color: transparent;
    border-radius: 4px 4px 0 0;
}

// Documentation Navigation Bar
.doc-nav {
  display: block;
  margin-bottom: $spacing--xxxl;
  margin-top: $spacing--m;
	.doc-caret {
		margin-right: 10px;
		@media (min-width: $tablet) {
			display: none;
		}
	}

	.tab {
		display: inline-block;

		&.docs-tab a {
            border-bottom: 2px solid $gray;
            display: inline-block;
            font-weight: 300;

			@media (min-width: $tablet) {
				display: none;
			}
		}

		a {
            border-bottom: 2px solid transparent;
            color: $gray;
            display: none;
            font-size: .85rem;
            font-weight: 400;
            letter-spacing: 0.5px;
            margin-right: 16px;

			&:hover {
				border-bottom: 2px solid $gray;
			}

			@media (min-width: $tablet) {
                display: inline-block;
                font-weight: 300;
			}
		}

		.current {
            border-bottom: 2px solid $gray;
            color: $gray;
            display: inline-block;

			@media (min-width: $tablet) {
				border-bottom: 2px solid $secondBrandColor !important;
				color: $secondBrandColor;
			}
		}
	}
}

// Documentation Side Navigation
.doc-side-nav {
    margin-bottom: 20px;

    @media (min-width: $tablet) {
        margin-bottom: 0;
        padding: $spacing--xs 0 $spacing--xl;
    }

	.current {
  		color: $popBrandColor;
 		font-weight: bold;
  	}

  	.doc-side-nav-title {
		padding: $spacing--s;
		font-weight: bold;
	}

	.doc-side-nav-list-item {
		display: inline-block;
		padding: 2px $spacing--s;
		width: 100%;
	}

    a {
        font-weight: normal;
    }
}

.tree li {
    padding-left: 20px;
}

.tree-toggle {
    cursor: pointer;
    margin-left: -1em;

	.tree-toggle-link{
		&, &:focus, &:hover{
			color:#535f61 !important;
			text-decoration: none;
		}
	}
}