/*nav ul li a:focus,
nav ul li a:hover {
    color: #fff;
    background-color: #000;
}*/

.mobile-only {
    display: none;
    visibility: hidden;
}

@media screen and (max-width: 820px) {
    #mobile-nav-btn {
        width: 100%;
        text-align: center;
    }

    .mobile-only {
        display: block;
        visibility: visible;
    }

    /*nav {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    nav ul {
        display: none;
        width: 100%;
        margin: 0;
        padding: 0;
        background-color: #DDD;
    }

    nav ul li {
        display: block;
        margin: 0.3rem;
    }

    nav ul li a {
        font-size: 12pt;
        padding: 0;
        margin: 0;
    }*/
}

#contents {
    display: flex;
    flex-direction: column;
}

#contents #sidebar {
    display: flex;
    flex-direction: row;
    width: 100%;
    /*background-color: #C2C2C2;*/
    padding: 20px;
}

#contents #sidebar nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 auto;
}

#contents #sidebar nav ul {
    /*display: flex;*/
    width: 100%;
    margin: 0;
    padding: 0;
}

#contents #sidebar nav ul li {
    display: inline-flex;
    list-style-type: none;
    width: 100%;
    margin: 0.2rem;
    padding: 0;
    flex: 0 1 9rem;
}

#contents #sidebar nav ul li i {
    display: inline-block;
    width: 2rem;
    text-align: center;
    margin-right: 0.5rem;
}

#contents #sidebar nav ul li a {
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: 14pt;
    font-weight: bold;
    margin: 0;
    padding: 0.2rem;
    color: light-dark(var(--user-theme-light-text-colour), var(--user-theme-dark-text-colour));
    text-decoration: none;
}
#contents #sidebar nav ul li div {
    margin: 0;
    padding: 0;
}

#contents #sidebar .nav-btn-area {
    display: flex;
    align-items: center;
    margin-left: 1rem;
    flex: 0 1 10rem;
}

#contents #sidebar .dropdown-pane li {
    list-style-type: none;
}

#contents #sidebar button:hover {
    cursor: pointer;
}

#contents #sidebar button:hover,
#contents #sidebar button:focus,
#contents #sidebar li:hover,
#contents #sidebar li:focus {
    background-color: light-dark(var(--user-theme-light-nav-link-hover-background-colour), var(--user-theme-dark-nav-link-hover-background-colour));
    color: light-dark(var(--user-theme-light-nav-link-hover-text-colour), var(--user-theme-dark-nav-link-hover-text-colour));
}

#contents #sidebar .dropdown-pane {
    background-color: light-dark(var(--user-theme-light-background-colour), var(--user-theme-dark-background-colour));
    color: light-dark(var(--user-theme-light-text-colour), var(--user-theme-dark-text-colour));
}

#contents #sidebar .dropdown-pane a:hover,
#contents #sidebar .dropdown-pane a:focus {
    background-color: light-dark(var(--user-theme-light-nav-link-hover-background-colour), var(--user-theme-dark-nav-link-hover-background-colour));
    color: light-dark(var(--user-theme-light-nav-link-hover-text-colour), var(--user-theme-dark-nav-link-hover-text-colour));
}

#contents #sidebar hr {
    background-color: #000000;
    width: 1px;
    height: 2.5rem;
}

#contents main {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 20px;
}

/*.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #C2C2C2;
    color: #000000;
    text-decoration: none;
    text-align: center;
    border-radius: 5px;
    border: 1px solid #000000;
}*/

.btn-panel {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 20px;
}