/* formats the navigation links and items */
/* =======================================*/


/* format sidebar for mobile (green background) */
#sidebar {
    padding: 0.5rem 1rem 0.5rem 1rem;
    height: 5rem;
    z-index: 1; /* Stay on top */
    background-color: rgba(18, 71, 71, 1) !important;
}

/* The navigation menu links */
#sidebar a {
    /*padding: 0.5rem 1rem 0.5rem 1rem !important;*/
    line-height: 1.25rem;
    text-decoration: none;
    text-align: center;
    font-size: 1rem;
    font-family: Nexa;
    color: white;
    display: block;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.5);
    border-radius: 0px !important;
}

/*single nav items: remove bullet points */
ul.nav {
    padding-left: 0;
    content: 'none';
    list-style-type: none;
}

/* set the margin on both sides for nice gap */
.nav-link a {
    margin-left: 1rem;
    margin-right: 1rem;
    padding: 0.75rem;
}

.nav-link.active {
    border-left: 7px solid var(--secondary);
    background-color: var(--secondary) !important; /* format link with position differently */
    border-radius: 0px !important;
}

/*hover over links */
ul.nav a:hover {
    font-weight: bold;
    /*background-color: rgb(65, 108, 108) !important;*/
    background-color: rgb(169, 130, 81) !important;
    border-left: 7px solid var(--secondary);
}

.nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
}


/*add triangle to active page link */
.nav-link.active:before {
    content: '\25B6' ' ';
}

/* adjust the page content downwards on mobile */
#page-content {
    margin-top: 6rem;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
}


/* this is the green background on the mobile version. hide it on desktop */
/*#topbar {*/
/*    display: none;*/
/*    position: fixed; !* Fixed Sidebar (stay in place on scroll) *!*/
/*    z-index: 1; !* Stay on top *!*/
/*    top: 0;*/
/*    width: 20rem !important;*/
/*    height: 5rem;*/
/*    background-color: rgba(18, 71, 71, 0.8)*/
/*}*/

/* hide the logo and the topbar, when the sidebar is shown */
#logo_full_side {
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    top: 0.5rem; /* Stay at the top */
    left: 1rem;
    /*display: none;*/
    /*width: 100%;*/
    background-color: rgba(18, 71, 71, 0.5);
}

/*#topbar_side {*/
/*    width: 100%;*/
/*    height: 5rem;*/
/*    background-color: var(--primary) !important;*/
/*    display: none;*/
/*}*/


/* formats the bird */
/* =======================================*/
#logo_bird {
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    top: 1.5rem; /* Stay at the top */
    left: 10rem;
    margin-left: -25px;
    display: none;
}

/* formats the button */
/* =======================================*/

/* set the location */
#toggle {
    position: fixed;
    z-index: 1; /* Stay on top */
    top: 1rem; /* Stay at the top */
    right: 1rem;
}

/* add the three horizontal bars icon for the toggle */
.navbar-toggler-icon {
    background-image: url('list_transparent.png') !important;
    background-size: 25px;
    background-position: center;
    /*background-color: var(--secondary);*/
    border: 1px solid white !important;
    border-radius: 25px;
    height: 35px;
    width: 45px;
    /*box-shadow: 0px 0px 2px 2px rgba(243, 198, 153, 0.3);*/
}

/*change color of button on hover*/
.navbar-toggler-icon:hover {
    background-color: white;
    background-image: url('list_green_inverted.png') !important;

}

@media (max-width: 48rem) {
    #sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
    }
    #collapse {
        position: fixed;
        left: 0;
        top: 5rem;
        width: 100%;
    }

    /* set background color for nav-links */
    #collapse > * {
        background-color: rgba(18, 71, 71, 0.8);
    }
}

/* formats big screen */
/* =======================================*/
@media (min-width: 48rem) {
    #logo_bird {
        display: block;
    }

    /* hide full logo */
    #logo_full_side {
        display: none;
    }

    /*move links on the sidebar to the bottom a bit*/
    #collapse {
        margin-top: 5rem;
    }

    #sidebar {
        height: 100%; /* Full-height: remove this if you want "auto" height */
        width: 20rem !important; /* Set the width of the sidebar */
        position: fixed; /* Fixed Sidebar (stay in place on scroll) */
        z-index: 1; /* Stay on top */
        top: 0; /* Stay at the top */
        left: 0;
        overflow-x: hidden; /* Disable horizontal scroll */
        padding-top: 5rem;
    }

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

    #collapse {
        display: block;
    }

    #collapse *:first-child {
        margin-top: 0;
    }

    #page-content {
        margin-top: 0;
        margin-left: 22rem;
        margin-right: 2rem;
    }
}