.nav-pills .nav-link.active {
    color: #fff;
    background-color: #DC3545;
}
.nav-pills .nav-link {
    color: #DC3545;
    padding-left: 0.5rem;
}


html, body{
    height: 100%;
  }
  
body {
background-color:#ecf0f5;
height: 100%;
margin: 0;
padding: 0;
}

.input-group{
    margin-top: 1rem !important;
}

.row{
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

#sidebar {
text-align: center;
padding: 2rem 1rem;
background-color: #f8f9fa;
}

#sidebar h2 {
text-align: left;
margin-bottom: 0;
}

/* Hide the blurb on a small screen */
#blurb {
display: none;
}

#sidebar-toggle {
display: none;
}

/* add the three horizontal bars icon for the toggle */
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

#page-content {
padding: 2rem 1rem;
}

@media (min-width: 48em) {
#sidebar {
    position: absolute;
    top: 3rem;
    left: 0;
    /* bottom: 0; */
    width: 18rem;
    text-align: left;
    transition: margin 0.3s ease-in-out, padding 0.3s ease-in-out;
}

#sidebar-toggle {
    display: inline-block;
    top: 3rem;
    transition: top 0.3s ease-in-out;
}

/* add negative margin to sidebar to achieve the collapse */
#sidebar.collapsed {
    margin-left: -15.5rem;
    padding-right: 0.5rem;
}

/* move the sidebar toggle up to the top left corner */
#sidebar.collapsed #sidebar-toggle {
    top: -2rem;
}

/* also adjust margin of page content */
#sidebar.collapsed ~ #page-content {
    margin-left: 3.5rem;
}

/* move all contents of navbar other than header (containing toggle) further
    off-screen */
#sidebar.collapsed > *:not(:first-child) {
    margin-left: -6rem;
    margin-right: 6rem;
}

/* reveal the blurb on a large screen */
#blurb {
    display: block;
}

/* Hide the toggle on a large screen */
#navbar-toggle {
    display: none;
}

#collapse {
    display: block;
}

/* set margins of the main content so that it doesn't overlap the sidebar */
#page-content {
    margin-left: 20rem;
    margin-right: 2rem;
    transition: margin-left 0.3s ease-in-out;
}
}
  
.fa-chevron-right {
    transition: transform 0.2s ease-in-out 0s;
}

/* rotate the chevron when the open class is applied */
li.open .fa-chevron-right {
    transform: rotate(90deg);
}

.nav li {
    color: #DC3545;
}