/* Custom Styles */

body {
position: relative;
/* required */
}

ul.nav-tabs {
width: 140px;
margin-top: 20px;
border-radius: 4px;
background: #fff;
z-index: 999;
border: 1px solid #ddd;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
}

ul.nav-tabs li {
margin: 0;
border-top: 1px solid #ddd;
}

ul.nav-tabs li:first-child {
border-top: none;
}

ul.nav-tabs li a {
margin: 0;
padding: 8px 16px;
border-radius: 0;
}

ul.nav-tabs li.active a,
ul.nav-tabs li.active a:hover {
color: #fff;
background: #0088cc;
border: 1px solid #0088cc;
}

ul.nav-tabs li:first-child a {
border-radius: 4px 4px 0 0;
}

ul.nav-tabs li:last-child a {
border-radius: 0 0 4px 4px;
}

ul.nav-tabs.affix {
top: 0px;
/* set the top position of pinned element */
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
ul.nav-tabs {
width: 180px;
/* set nav width on medium devices */
}
}

@media screen and (min-width: 1200px) {
ul.nav-tabs {
width: 220px;
/* set nav width on large devices */
}
}