#mainContainer {
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
  overflow-y: auto;


  >div#project,
  >div#circle {
    flex-grow: 1;
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
    overflow-x: hidden;
    
    .views-container {
      flex: 1 0 0;
      overflow-y: auto;
    }

    >div {
      transition: all 0.5s;
    }
  }

  >div {

    nav {
      transition: all 0.5s;

      >sib-router {
        background-color: $color-222-52-90;
        color: $color-233-18-29;
        flex: 0 0 auto;
        font-weight: 600;

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

          li {
            align-items: center;
            border-bottom: 1px solid $color-229-25-79;
            display: flex;
            margin: 0;
            padding: 2.55rem 2.55rem;
            position: relative;
            width: 12em;

            &::before {
              float: left;
              font-size: 4rem;
              margin-left: 0;
              margin-right: 2.55rem;
            }
          }

          >li {
            @include icon('arrow-right-circle');
          }

          >sib-route {

            &[active] {
              background-color: $color-233-18-29;
              color: $color-46-100-67;
              display: inline-block;
            }

            &[name^='circle'],
            &[name^='project'] {

              >li::before {
                font-size: 4rem;
              }
            }

            &[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(15.5rem);

        & .jsOffsiteToggle::before {
          transform: rotate(180deg);
        }

        &~.views-container {
          margin-left: -15.5rem;
          transform: translate(15.5rem);
        }
      }
    }
  }
}