html, body, .sample-content {
    width: 100%;
    height: 100%;
    margin: 0px;
}

#router-target {
    float: right;
    width: 100%;
    height: 100%;
}

.nav-bar-expanded {
    width: 17rem !important;
    display: block !important;
    /* padding: 1rem; */
}
.with-nav-bar {
    width: calc(100% - 17rem) !important;
}

#nav-bar {
    float:left;
    height: 100%;
    display: none;
    /* background: gainsboro; */
    background: white;
    overflow-y: scroll;
    overflow-x: scroll;

    /* color: #ffffff; */
    color: #dbdbdb;
    background: #2c2c2c;
    /* height: calc(100% - 20px); */
    /* padding: 10px; */

    font-size: medium;
    font-family: 'Kanit', sans-serif;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    -o-user-select: none;
        user-select: none; /* Non-prefixed version, currently*/
}

#nav-bar label {
    text-decoration: none;
    white-space: nowrap;
    display: block;
    cursor: pointer;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.65rem;
    padding-right: 0px;
    color: #dbdbdb;
    /* text-transform: uppercase; */
}
#nav-bar label:hover {
    background: rgba(204, 204, 204, 0.123);
    transition: "all 0.0s";
}

#nav-bar a {
    text-decoration: none;
    display: block;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.75rem;
    padding-right: 0px;
    color: #3e9feb;
}

#nav-bar a:hover {
    background: rgba(204, 204, 204, 0.123);
    transition: "all 0.0s";
}

#nav-bar a > span  {
    padding-left: 0.5rem;
    white-space: nowrap;
}

#nav-content {
    display: block;
    background: rgb(255, 134, 134);
    /* overflow-y: scroll; */
    /* padding: 1rem; */
    /* margin: 10px; */
}

.nav-list {
    margin: 0rem;
    font-size: medium;
    font-family: 'Kanit', sans-serif;
    background: rgb(39, 39, 39);
}

#nav-list-expanded {
    /* width: 220px !important; */
    /* height: 100%; */
    display: block;
    background: #b6fc87;
}

#nav-list-collapsed {
    /* width: 220px !important; */
    height: 100%;
    display: none;
    background: #ff9a9a;
}

.nav-group {
    padding-top: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 0px;
    text-transform: uppercase;
    cursor: default;
}

.nav-logo {
    padding-top: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
    /* background: #444444; */
    cursor: default;
}

.nav-logo > div {
    padding: 0px;
    padding-left: 5px;
    width: "20px";
    height: "20px";
    display: inline-block;
}

.nav-logo > img {
    padding: 0px;
    padding-top: 5px;
    padding-left: 5px;
    width: 20px;
    height: 20px;
    display: inline-block;
}