#mainContainer {
  
  > div {

    nav {

      > sib-router {
        background-color: $color-link-water;
        color: $color-purple-dark;
        flex: 0 0 auto;
        font-size: 16px;
        font-weight: 600;

        > ul {  
          cursor: pointer;
          list-style: none;
          margin: 0;
          padding-left: 0;

          li {
            align-items: center;
            border-bottom: 1px solid $color-lavender-gray;
            display: flex;
            margin-bottom: 0;
            margin-left: 0;
            margin-top: 0;
            padding: 1.5em 1.5em;
            position: relative;
            width: 12em;

            &::before {
              float: left;
              font-size: 40px;
              margin-left: 0;
              margin-right: 1.5rem;
            }
          }

          > li {
            @include icon('arrow-right-circle');
          }
          
          > sib-route {
            
            &[active] {
              background-color: $color-purple-dark;
              color: $color-mustard;
              display: inline-block;
            }

            &[name^='circle'],
            &[name^='project'] {
              
              > li::before {
                font-size: 40px;
              }
            }
            
            &[name$='chat'] > li {
              @include ci('chat');
            }
            
            &[name$='create'] > li {
              @include ci('offer');
            }
            
            &[name$='edit'] > li {
              @include ci('list');
            }
            
            &[name$='profile'] > li {
              @include ci('information');
            }          
          }
        }
      }
      
      &.offsite-is-closed {
        transform: translate(12rem);
        
        & #jsOffsiteToggle::before {
          transform: rotate(180deg);
        }

        & ~ #project-views-container {
          flex-basis: 95%;
          transform: translate(12rem);
        }
      }
    }
  }
}