@import url(http://fonts.googleapis.com/css?family=Open+Sans);
*,
*:before,
*:after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    font-family: "Open Sans", sans-serif;
    background: #f0f0f0;
}

#window_wrap {
    min-height: 100%;
}

.the_nav {
    color: #888;
    font-weight: 500;
    padding: 24px 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    height: 100%;
}

.the_nav ul {
    list-style: none;
    padding: 0;
    margin: 0 0;
}

.the_nav li {
    position: relative;
    font-size: 14px;
    line-height: 30px;
    padding: 0 5px;
    white-space: nowrap;
    transition: all 0.2s;
    cursor: pointer;
}

.the_nav li span {
    margin-left: 12px;
    opacity: 1;
    transition: opacity 0.4s, visibility 0;
}

.the_nav li:hover {
    color: #eee;
    background: #1c1c1c;
}

.the_nav li.active {
    color: #111;
    background: #03A9F4;
}

.the_nav li i {
    display: inline-block;
    width: 24px;
    text-align: center;
}

.the_nav .submenu {
    position: absolute;
    transform: translate3d(-200%, 0, 0);
    top: -6px;
    left: 100%;
    padding: 6px 0;
    background: #292929;
    z-index: -1;
    transition: transform 0.2s, z-index 0 0;
}

.the_nav .submenu li {
    width: auto;
    min-width: 120px;
    color: #ddd;
}

.the_nav .submenu li:hover {
    background: #363636;
}

.the_nav .has_submenu:hover .submenu {
    z-index: 1;
    transform: translate3d(0, 0, 0);
    transition: transform 0.2s, z-index 0 0.2s;
}

#primary_nav,
.the_nav,
.the_nav_bg {
    width: 36px;
    background: #212121;
    transition: all 0.6s;
}

.the_nav_bg {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    z-index: -1;
}


/*Menu collpase*/

.open #primary_nav,
.open .the_nav,
.open .the_nav_bg {
    width: 180px;
    transition: all 0.6s;
}
.open_c #container {
    position: absolute !important;
    left: 180px !important;
    transition: all 0.6s;
}

/* LOGOUT */
#logout-ul {
  bottom: 1vh;
  position: absolute;
  overflow: hidden;
  width: 100%;
}