nav {
  position: fixed;
  z-index: 3;
  top: 0;
  padding-top: 41px; }
  nav .menu-button {
    font-size: 1.8em;
    position: absolute;
    right: 10px;
    top: 5px;
    display: none;
    color: white;
    cursor: pointer; }
  nav .logo {
    text-align: center;
    margin-top: 5px;
    height: 50px; }
  nav .account {
    height: 200px;
    padding-top: 15px; }
    nav .account .profile {
      width: 90px;
      height: 90px;
      margin: 0 auto;
      border-radius: 50%;
      background-color: #3e606f;
      padding-top: 0px;
      box-sizing: border-box;
      position: relative;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; }
    nav .account .greeting {
      width: 100%;
      text-align: center;
      display: block;
      position: relative;
      top: 1px;
      font-size: .95em; }
      nav .account .greeting select {
        border: none;
        background-color: transparent;
        color: white;
        text-align: center;
        display: inline-block;
        text-align-last: center;
        padding: 0 3px; }
        nav .account .greeting select option {
          text-align: center;
          color: black;
          display: block; }
    nav .account .actions {
      overflow: hidden;
      text-align: center;
      position: relative; }
      nav .account .actions:not(.no-separator):after {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-1px);
        height: 50px;
        width: 1px;
        background-color: white;
        opacity: .8; }
      nav .account .actions .action-item {
        text-align: center;
        overflow: hidden;
        display: inline-block;
        margin: 0 50px;
        opacity: .8;
        cursor: pointer; }
        nav .account .actions .action-item:hover {
          opacity: 1; }
        nav .account .actions .action-item .icon * {
          display: block;
          text-align: center; }
        nav .account .actions .action-item .icon .fa {
          font-size: 3em; }
  nav .menu {
    background-color: #3e606f;
    height: 100%;
    padding-bottom: 10px;
    height: calc(100% - 245px); }
    nav .menu > ul {
      list-style: none;
      margin: 0;
      padding: 0 20px;
      padding-top: 20px;
      max-height: 100%;
      overflow-y: auto; }
      nav .menu > ul li {
        position: relative; }
        nav .menu > ul li:last-of-type a {
          border: none; }
        nav .menu > ul li > a {
          font-family: 'Assistant', sans-serif;
          font-size: 1.4em;
          margin: 2px 10px;
          display: block;
          border-bottom: 1px solid rgba(255, 255, 255, 0.5);
          padding: 10px 0 5px 0;
          opacity: .8;
          cursor: pointer;
          text-decoration: none;
          color: white; }
          nav .menu > ul li > a:hover {
            opacity: 1; }
          nav .menu > ul li > a .icon {
            margin-left: 10px;
            margin-right: 7px;
            font-size: .9em;
            width: 25px;
            display: inline-block;
            vertical-align: middle;
            text-align: center; }
          nav .menu > ul li > a .span {
            display: inline-block;
            vertical-align: middle; }
        nav .menu > ul li > span {
          font-family: 'Assistant', sans-serif;
          font-size: 1.4em;
          margin: 2px 10px;
          display: block;
          border-bottom: 1px solid rgba(255, 255, 255, 0.5);
          padding: 10px 0 5px 0;
          opacity: .8;
          cursor: pointer;
          text-decoration: none;
          color: white; }
          nav .menu > ul li > span:hover {
            opacity: 1; }
          nav .menu > ul li > span .icon {
            margin-left: 10px;
            margin-right: 7px;
            font-size: .9em;
            width: 25px;
            display: inline-block;
            vertical-align: middle;
            text-align: center; }
          nav .menu > ul li > span .span {
            display: inline-block;
            vertical-align: middle; }
        nav .menu > ul li > a.active {
          background-color: #51798b; }
        nav .menu > ul li > span.active {
          background-color: #51798b; }
      nav .menu > ul li.active .sub-menu {
        height: auto; }
      nav .menu > ul li[sub-menu]:before {
        content: '\f0d9';
        font-family: 'FontAwesome';
        position: absolute;
        left: 15px;
        top: 15px;
        opacity: .6; }
      nav .menu > ul li[sub-menu].active:before {
        content: '\f0d7' !important; }
      nav .menu > ul .sub-menu {
        display: block;
        height: 0px;
        overflow: hidden;
        margin-right: 15px;
        transition: height .2s ease-in-out; }
        nav .menu > ul .sub-menu ul {
          width: 100%;
          margin: 0;
          padding: 0;
          overflow-y: auto; }
          nav .menu > ul .sub-menu ul li {
            font-family: 'Assistant', sans-serif;
            font-size: 1.4em;
            margin: 2px 10px;
            display: block;
            padding: 10px 0 5px 0;
            opacity: .8;
            cursor: pointer;
            text-decoration: none;
            color: white; }
            nav .menu > ul .sub-menu ul li a {
              margin: 0;
              padding: 0;
              font-size: 1em;
              border: none; }
            nav .menu > ul .sub-menu ul li:hover {
              opacity: 1; }
          nav .menu > ul .sub-menu ul li.active {
            background-color: #51798b; }

.content {
  color: black; }

@media screen and (max-width: 1300px) {
  nav {
    right: -0;
    transition: all .1s ease-in-out; }
    nav .menu-button {
      display: block; }
  nav.minimized {
    right: -295px;
    color: #193441;
    background-color: transparent; }
    nav.minimized .menu {
      background-color: transparent; }
    nav.minimized .menu-button {
      left: 10px;
      right: auto;
      right: initial; } }

@media screen and (max-width: 1336px) {
  nav .menu {
    max-height: 472px; } }