src/styles/base/main.scss

-* {
-  outline: none;
-}
-
-:root {
-  font-size: 10px;
-  font-family: Open Sans, sans-serif;
-  --sib-notifications-theme: var(--color-primary);
-
-  body {
-    background-color: var(--color-main-background);
-    color: var(--color-main-text);
-    font-size: 1.6rem;
-    min-height: 100vh;
-    overflow-wrap: break-word;
-    overflow-x: hidden; /* To stop getting horizontal scrolling if anything overflows the width */
-  }
-
-  main {
-    display: flex;
-    overflow: hidden;
-    height: calc(100vh - 83px); /* 83px = height of the header */
-    position: relative;
-    width: 100%;
-    
-    backface-visibility: hidden;
-    /*will-change: overflow;*/
-  }
-
-  .notLoggedIn {
-    visibility: hidden;
-  }
-}
-
-/* Add scrollbar to the left and right menu, and to the content */
-nav, .views-container {
-  overflow: auto;
-  height: auto;
-  -webkit-overflow-scrolling: touch;
-  -ms-overflow-style: none;
-}
-
-/* Custom scrollbar of the left-menu */
-nav {
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-scrollbar-left-track) var(--color-scrollbar-left-background);
-
-  &::-webkit-scrollbar-track {
-    background: var(--color-scrollbar-left-background);
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: var(--color-scrollbar-left-track);
-    border-radius: 6px;
-    border: 3px solid var(--color-scrollbar-left-background);
-  }
-
-  &::-webkit-scrollbar {
-    width: 11px;
-  }
-}
-
-/* Custom scrollbar of the content */
-.views-container {
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-scrollbar-right-track) var(--color-scrollbar-right-background);
-
-  &::-webkit-scrollbar-track {
-    background: var(--color-scrollbar-right-background);
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: var(--color-scrollbar-right-track);
-    border-radius: 6px;
-    border: 3px solid var(--color-scrollbar-right-background);
-  }
-
-  &::-webkit-scrollbar {
-    width: 11px;
-  }
-}
-
-/* Quick fix. Will be removed later */
-#admin-circles,
-#admin-projects,
-#admin-users {
-  display: contents;
-}
-
-[hidden],
-.hidden {
-  display: none !important;
-}
-
-img {
-  max-height: 100%;
-  max-width: 100%;
-}
-
-h1,
-.h1-like,
-h2,
-.h2-like,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: bold;
-
-  /*span {
-    font-weight: 400;
-    padding-left: 0.85rem;
-
-    &:before {
-      content: '// ';
-    }
-  }*/
-}
-
-h1, .h1-like {
-  color: var(--color-h1);
-  font-size: 2rem;
-  text-transform: uppercase;
-
-  &.without-margin {
-    margin: 0;
-  }
-}
-
-h2, .h2-like {
-  color: var(--color-h2);
-  font-size: 1.8rem;
-  text-transform: uppercase;
-}
-
-.h2-like {
-  display: block;
-  margin: 14.94px 0;
-  width: 100%;
-}
-
-h3 {
-  color: var(--color-title);
-  font-size: 1.7rem;
-}
-
-h4 {
-  font-size: 1.2rem;
-}
-
-h5 {
-  font-size: 2rem;
-}
-
-%padding-main {
-  padding: 5rem;
-}
-
-%padding-block {
-  padding: 3.2rem;
-}
-
-.content-box {
-  @include window-style-modal();
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  margin: 2rem 1rem 5rem 2rem;
-
-  &.full-width {
-    background: var(--color-white);
-    flex: 1;
-    font-size: 1.6rem;
-    margin: 0 auto;
-    min-height: 100%;
-  }
-
-  &.with-padding {
-    @extend %padding-main;
-  }
-}
-
-/* Header inside circle, project view  */
-.content-box__header {
-  border-bottom: 1px solid var(--color-content-header);
-  padding: 3rem;
-
-  @include breakpoint(sm) {
-    background: var(--color-grey-10);
-  }
-
-  sib-display {
-    @include breakpoint(sm) {
-      float: left;
-    }
-  }
-
-  .mobile-sidebar-button {
-    @include breakpoint(sm) {
-      float: right;
-      color: var(--color-secondary);
-      font-size: 1.8rem;
-      font-weight: bold!important;
-
-      &::before {
-        font-size: 2.2rem;
-        font-weight: normal;
-        margin-right: 1.2rem;
-      }
-    }
-
-    @include breakpoint($min: 1025px, $max: 0) {
-      display: none;
-    }
-  }
-
-  div {
-
-    .h1-aside {
-      font-size: 1.8rem;
-
-      &:not(:empty)::before {
-        color: var(--color-grey-4);
-        content: ' - ';
-        font-size: 2rem;
-        font-weight: bold;
-      }
-    }
-
-    .description {
-      color: var(--color-grey-4);
-
-    }
-
-    .name {
-      color: var(--color-grey-4);
-      font-weight: normal;
-    }
-  }
-}
-
-.content-box__info {
-  @extend %padding-block;
-  display: flex;
-  flex-direction: column;
-}
-
-.modal {
-  color: var(--color-white);
-  margin: 75px;
-  padding: 40px;
-  max-height: 85vh;
-  text-align: center;
-
-  img {
-    max-width: 75%;
-  }
-
-  sib-link {
-    font-size: 2.7rem;
-    position: absolute;
-    right: 32px;
-    top: 32px;
-
-    button {
-      color: var(--color-secondary);
-    }
-  }
-}
-
-.backlink {
-  @include icon('arrow-left-circle');
-  color: var(--color-backlink);
-  font-size: 1.5rem;
-  margin: 2rem 0 0 2rem;
-  text-decoration: underline;
-
-  &::before {
-    font-size: 2rem;
-    margin-right: 1rem;
-    text-decoration: none;
-  }
-
-  &.right {
-    display: block;
-    text-align: right;
-  }
-}
-
-.name {
-  color: var(--color-grey-1);
-  font-size: 2rem;
-  font-weight: bold;
-}
-
-.username {
-
-  &::before {
-    content: '@';
-  }
-}
-
-.space-between {
-  display: flex;
-  justify-content: space-between;
-  padding-bottom: 1.4rem;
-}
-
-.position-end {
-  text-align: end;
-}
-
-.section {
-  border-bottom: 1px solid var(--color-grey-10);
-  padding: 4.5rem;
-}
-
-.word-spacing-left {
-  margin-left: 0.60rem;
-}
-
-.word-spacing-right {
-  margin-right: 0.60rem;
-}
-
-// Compatibility layer for non-updated components
-@import 'compat';
-// Other base components
-@import 'form';
-@import 'table';
-@import 'header';
-@import 'menu-left';
-@import 'user-thumb';
-
-// Button global CSS
-sib-delete,
-sib-route,
-sib-link,
-button,
-input[type='submit'],
-a,
-.button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  display: inline-block;
-  padding: 0;
-
-  &.button {
-    padding: 0.55rem 2.5rem;
-    border-radius: 100em;
-
-    *,
-    & {
-      font-size: 1.4rem;
-    }
-
-    &.btn-margin-left {
-      margin-left: 2.2rem;
-    }
-
-    &.small {
-
-      *,
-      & {
-        font-size: 1rem;
-      }
-    }
-
-    &.text-bold {
-
-      *,
-      & {
-        font-weight: bold;
-      }
-    }
-
-    &.text-uppercase {
-
-      *,
-      & {
-        text-transform: uppercase;
-      }
-    }
-
-    &.rounded {
-      border-radius: 50%;
-      font-size: 1.8rem;
-      padding: 1rem;
-    }
-
-    &.button-link {
-      border-radius: 100em;
-
-      *,
-      & {
-        text-decoration: underline;
-      }
-
-      &:hover {
-        text-decoration: none;
-      }
-    }
-
-    &.with-icon::before {
-      font-size: 1.6rem;
-      margin-right: 1rem;
-    }
-
-    &.button-primary{
-      background-color: var(--color-white);
-
-      *,
-      & {
-        color: var(--color-primary);
-      }
-
-      &.bordered {
-        border: 1px solid var(--color-primary);
-      }
-
-      &:hover {
-        background-color: var(--color-primary);
-
-        *,
-        & {
-          color: var(--color-white);
-        }
-      }
-    }
-
-    &.button-secondary {
-      background-color: var(--color-white);
-
-      *,
-      & {
-        color: var(--color-secondary);
-      }
-
-      &.bordered {
-        border: 1px solid var(--color-secondary);
-      }
-
-      &:hover {
-        background-color: var(--color-secondary);
-
-        *,
-        & {
-          color: var(--color-white);
-        }
-      }
-    }
-
-    &.button-complementary {
-      color: var(--color-complementary);
-      background-color: var(--color-white);
-
-      &.bordered {
-        border: 1px solid var(--color-complementary);
-      }
-
-      &:hover {
-        background-color: var(--color-complementary);
-        color: var(--color-white);
-      }
-    }
-
-    &.flex {
-      display: flex;
-    }
-
-    &.reversed {
-      &.button-primary {
-        background-color: var(--color-primary);
-
-        *,
-        & {
-          color: var(--color-white);
-        }
-
-        &:hover {
-          background-color: var(--color-white);
-          color: var(--color-primary);
-
-          *,
-          & {
-            color: var(--color-primary);
-          }
-
-          &.bordered {
-            border: 1px solid var(--color-primary);
-          }
-        }
-      }
-
-      &.button-secondary {
-        background-color: var(--color-secondary);
-
-        *,
-        & {
-          color: var(--color-white);
-        }
-
-        &:hover {
-          background-color: var(--color-white);
-
-          *,
-          & {
-            color: var(--color-secondary);
-          }
-
-          &.bordered {
-            border: 1px solid var(--color-secondary);
-          }
-        }
-      }
-
-      &.button-complementary {
-        background-color: var(--color-complementary);
-
-        *,
-        & {
-          color: var(--color-white);
-        }
-
-        &:hover {
-          background-color: var(--color-white);
-
-          *,
-          & {
-            color: var(--color-complementary);
-          }
-
-          &.bordered {
-            border: 1px solid var(--color-complementary);
-          }
-        }
-      }
-    }
-  }
-}

src/styles/base/menu-left.scss

-#main__menu {
-  background-color: var(--color-menu-background);
-  color: var(--color-menu-text);
-  display: block;
-  max-width: 250px;
-  min-height: calc(100vh - 83px); /* 83px = nav height */
-  flex: 1;
-  /*transition: flex-basis 0.5s ease-in-out;*/
-
-  &.open {
-    transform: translateX(0);
-  }
-
-  .unread {
-    font-weight: bolder;
-  }
-  
-  sib-router {
-  
-    .menu-wrapper {
-      &.is-closed {
-        .sub-menu {
-          display: none;
-        }
-        .menu-chevron {
-          transform: rotate(180deg);
-        }
-      }
-    }
-  
-    .menu {
-      cursor: pointer;
-      display: flex;
-      flex-direction: row-reverse;
-      font-weight: bold;
-      padding: 1.2rem;
-  
-      &[active] {
-        background-color: var(--color-menu-highlight-primary);
-  
-        .menu-icon:before {
-          background-color: var(--color-menu-icon-background-active);
-        }
-  
-        .menu-notification > sib-display > div:first-child {
-          background-color: var(--color-menu-badge-background);
-        }
-      }
-
-      .menu-icon {
-        align-items: center;
-        display: flex;
-        justify-content: center;
-        flex-grow: 0;
-        flex-shrink: 0;
-        font-size: 1.7rem;
-        width: 3.2em;
-  
-        &:before {
-          border-radius: 100%;
-          height: 1.9em;
-          line-height: 1.9em;
-          width: 1.9em;
-        }
-      }
-      
-      .menu-label {
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-        flex-shrink: 0;
-        font-weight: 600;
-        justify-content: center;
-        letter-spacing: 0.017rem;
-        text-transform: uppercase;
-        width: 8em;
-      }
-
-      .menu-chevron {
-        align-items: center;
-        display: flex;
-        flex-grow: 0;
-        flex-shrink: 0;
-        justify-content: center;
-        width: 2em;
-      }
-  
-      > sib-display {
-        display: block;
-      }
-    }
-
-    .sub-menu {
-
-      /* Specific styles for the "Projects" tab */
-
-      .project-tab>div>sib-display>div:nth-child(1) {
-
-        sib-set-default[name='project'] {
-
-          .project-customer,
-          .project-name>div {
-            display: block;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-
-          .project-customer {
-            font-weight: bold;
-            width: 150px;
-          }
-
-          .project-name {
-            display: block;
-            padding-left: 14px;
-            width: calc(150px - 10px);
-            /* 10px = padding of the sib-set-default = better alignment */
-          }
-        }
-
-        hubl-counter {
-          margin-top: 16px;
-        }
-      }
-      /* End of specific styles of "Projects" tab */
-
-      sib-display.nosub>sib-form[fields="name"]>hubl-search-users>input {
-        margin: auto;
-        display: block;
-        background-color: var(--color-secondary);
-        color: var(--color-grey-6);
-        border: 1px solid var(--color-grey-4);
-        border-radius: 3px;
-        padding: 4px;
-      }
-
-      sib-display.nosub>nav {
-        text-align: center;
-        display: grid;
-        grid-template-columns: auto 50% auto;
-        grid-template-areas: "left middle right";
-        >* {
-          color: var(--color-grey-6);
-        }
-        >[data-id="prev"] {
-          grid-area: left;
-        }
-        >[data-id="next"] {
-          grid-area: right;
-        }
-        >span {
-          grid-area: middle;
-        }
-      }
-
-      hubl-menu-publicprivate {
-        display: inline-block;
-        text-align: center;
-        div {
-          font-family: simple-line-icons;
-          width: 20px;
-          font-size: 0.8em;
-          padding-top: 0.1em;
-        }
-      }
-
-      >sib-display.nosub>div>sib-display>div {
-        padding: 1rem 1rem 1rem 3rem;
-      }
-
-      sib-display>div {
-
-        .create {
-          color: var(--color-white);
-          margin: 1rem 1rem 2.2rem 3.2rem;
-        }
-      
-        &>sib-display {
-          
-          &:last-child>div {
-            margin-bottom: 2.2rem;
-          }
-        
-          >div {
-            color: var(--color-grey-6);
-            cursor: pointer;
-            >hubl-menu-fix-url-circle>sib-display>div,
-            >hubl-menu-fix-url-project>sib-display>div {
-              padding: 1rem 1rem 1rem 3rem;
-            }
-          }
-
-          &[fields="project(customer.name, name), badge"]>div {
-            padding: 0;
-          }
-        }
-
-        &>sib-display[active]>div,
-        &>sib-display>div>hubl-menu-fix-url-circle>sib-display[active]>div,
-        &>sib-display>div>hubl-menu-fix-url-project>sib-display[active]>div {
-          background-color: var(--color-menu-highlight-primary);
-          color: var(--color-menu-text-active);
-          font-weight: bold;
-        }
-      }
-
-      &.menu-notification {
-        > sib-display > div > sib-display > div > hubl-menu-fix-url-circle,
-        > sib-display > div > sib-display > div > hubl-menu-fix-url-project {
-          flex: 1;
-        }
-        > sib-display > div > sib-display > div,
-        > sib-display > div > sib-display > div > hubl-menu-fix-url-circle  > sib-display > div,
-        > sib-display > div > sib-display > div > hubl-menu-fix-url-project  > sib-display > div {
-            display: flex;
-            sib-display-div {
-              flex: 3;
-            }
-            hubl-counter {
-              height: 20px;
-              width: 20px;
-              margin-right: 1em;
-              div.counter:not([data-nb-unread="0"]) {
-                text-align: center;
-                display: block;
-                background-color: var(--sib-notifications-theme, gray);
-                border-radius: 50%;
-                font-size: 12px;
-                line-height: 20px;
-                width: 20px;
-                height: 20px;
-                padding-bottom: 0;
-                color: var(--color-secondary);
-              }
-            }
-          }
-        }
-      }
-
-    .divider {
-      height: 1px;
-      background-color: var(--color-grey-11);
-      opacity: 0.2;
-    }
-  }
-
-  &.jsLeftMenu {
-
-    @include breakpoint(sm) {
-      display: none;
-    }
-  }
-
-  &.jsLeftMenu[open] {
-
-    @include breakpoint(sm) {
-      display: block;
-      bottom: 0;
-      box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5);
-      min-width: 80%;
-      position: fixed;
-      right: 0;
-      top: 0;
-      z-index: 1;
-    }
-  }
-}
-
-// Temporary fix for badges
-sib-fix-badge {
-  display: none;
-  box-sizing: border-box;
-  font-family: sans-serif;
-  font-size: 12px;
-  background-color: var(--sib-notifications-theme, gray);
-  color: #36383a;
-  border-radius: 50%;
-  line-height: 20px;
-  width: 20px;
-  height: 20px;
-  text-align: center;
-  font-weight: bold;
-  padding-bottom: 0;
-}
\ No newline at end of file

src/styles/base/table.scss

-#circle-information,
-#circle-edit,
-#admin-circle-list,
-#admin-circle-create,
-#project-edit,
-#admin-project-list,
-#admin-project-create,
-#admin-users-list {
-
-  [widget="hubl-team-template-edit"]>div {
-    flex: 1;
-  }
-
-  .table {
-
-    .table-header {
-      display: flex;
-      flex: 1;
-      font-size: 1.6rem;
-      font-weight: 600;
-      justify-content: space-around;
-      text-align: center;
-
-      &.grey-color {
-        background: var(--color-table-header-background);
-        color: var(--color-table-header-text);
-      }
-
-      >* {
-        border-right: 1px solid var(--color-table-border);
-        padding: 2.1rem 0;
-        text-align: center;
-      }
-
-      >*:last-of-type {
-        border-right: 1px solid --color-table-header-background;
-      }
-    }
-
-    .table-body, .table-header {
-
-      >div:first-of-type>sib-display>div,
-      hubl-team-template-edit[name='members'] {
-        display: flex;
-        border-left: 1px solid var(--color-table-border);
-      }
-
-      .border {
-        border-bottom: 1px solid var(--color-table-border);
-        border-right: 1px solid var(--color-table-border);
-      }
-
-      .cell {
-        text-align: center;
-        word-wrap: break-word;
-        white-space: nowrap;
-      }
-
-      .w25 {
-        width: 25%;
-      }
-
-      .w33 {
-        width: 33.3333%;
-      }
-
-      .w50 {
-        width: 50%;
-      }
-
-      .w66 {
-        width: 66.6666%;
-      }
-
-      .w75 {
-        width: 75%;
-      }
-
-      .hashtag::before {
-        content: '#';
-      }
-    }
-
-    .cell-with-buttons {
-      align-items: center;
-      display: flex;
-      justify-content: center;
-
-      [name='button'] {
-
-        input[type='submit'] {
-          @extend .button,
-          .text-bold,
-          .text-uppercase,
-          .reversed,
-          .button-secondary,
-          .bordered,
-          .btn-margin-left;
-        }
-      }
-    }
-
-    .cell-with-name {
-      color: var(--color-secondary);
-      font-weight: 600;
-      padding-top: 2.5rem;
-    }
-
-    sib-multiple {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .user-thumb>div /* for the table in circle-edit and captain's cell in project-admin */,
-    [name='user-thumb'] {
-      @extend %user-thumb__grid;
-      padding: 0 2.2rem;
-
-      >.user-thumb__picture {
-        @extend %user-thumb__picture;
-      }
-
-      >[name='sup'] {
-        @extend %user-thumb__grid-sup;
-
-        .user-thumb__name {
-          @extend %user-thumb__name;
-        }
-
-        .user-thumb__groups {
-          @extend %user-thumb__groups;
-        }
-      }
-
-      >[name='sub'] {
-        @extend %user-thumb__grid-inf;
-
-        >.user-thumb__username:not(:empty) {
-          @extend %user-thumb__username;
-        }
-
-        >.user-thumb__city:not(:empty) {
-          @extend %user-thumb__city;
-        }
-      }
-    }
-
-    sib-ac-checker {
-      align-items: center;
-      display: flex;
-      justify-content: center;
-    }
-  }
-}

src/styles/base/user-thumb.scss

-%user-thumb__grid {
-  display: grid;
-  grid-column-gap: 1.6rem;
-  grid-template-columns: 7vh auto;
-  grid-template-rows: repeat(2, 5.2vh);
-}
-
-%user-thumb__grid-sup {
-  align-items: center;
-  align-self: end;
-  display: flex;
-  grid-column: 2 / span 1;
-  grid-row: 1 / span 1;
-  margin-bottom: 0.50rem;
-}
-
-%user-thumb__grid-inf {
-  align-self: start;
-  grid-column: 2 / span 1;
-  grid-row: 2 / span 1;
-  margin-top: 0.50rem;
-}
-
-%user-thumb__picture {
-  align-items: center;
-  align-self: center;
-  background-color: var(--color-avatar-background);
-  border-radius: 50%;
-  display: flex;
-  grid-column: 1 / span 1;
-  grid-row: 1 / span 2;
-  height: 7vh;
-  justify-content: center;
-  overflow: hidden;
-  position: relative;
-  width: 7vh;
-
-  img {
-    background-color: white;
-    height: 100%;
-    left: 0;
-    object-fit: cover;
-    position: absolute;
-    top: 0;
-    width: 100%;
-  }
-
-  object {
-    height: 45%;
-    width: 45%;
-  }
-}
-
-%user-thumb__name {
-  color: var(--color-user-thumb-name);
-  font-weight: 600;
-  margin-right: 1rem;
-}
-
-%user-thumb__groups {
-  display: flex;
-  margin-bottom: 1px;
-  margin-left: 0.6rem;
-
-  [name='groups'],
-  [name='user.groups'] {
-    @extend %tag-role;
-  }
-}
-
-%user-thumb__admin {
-  @extend %tag-admin;
-}
-
-%user-thumb__username {
-  align-items: center;
-  display: flex;
-
-  &::before {
-    content: '@';
-  }
-}
-
-%user-thumb__city {
-  @include mdi('atom');
-  align-items: center;
-  display: flex;
-  margin-right: 1.6rem;
-
-  &::before {
-    color: var(--color-icon);
-    margin-right: 0.50rem;
-  }
-}
-
-%user-thumb__lead {
-  @include icon('eyeglass');
-  align-items: center;
-  display: flex;
-
-  &::before {
-    color: var(--color-icon);
-    font-size: 1.9rem;
-    font-weight: bold;
-    margin-left: 0;
-    margin-right: 0.50rem;
-  }
-}

src/styles/chat/_index.scss

+.chat-view {
+  height: calc(100vh - 50px - 78px);
+
+  @media (max-width: 768px) {
+    height: calc(100vh - 50px - 68px);
+  }
+}
+
+#messages {
+
+  @media (max-width: 768px) {
+
+    height: calc(100vh - 50px);
+
+    .messages-header {
+      display: flex;
+    }
+
+    solid-set-default[name="segment2"] {
+      font-size: 14px;
+      line-height: 16px;
+      width: 75%;
+    }
+
+    orbit-user-avatar {
+      height: 31px;
+      width: 31px;
+    }
+
+    solid-display-value[name="name"] {
+      display: block;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 210px;
+    }
+
+    solid-display-value[name="hyphen"] {
+        display: none;
+    }
+
+    solid-link {
+      vertical-align: super;
+    }
+  }
+}

src/styles/components/_index.scss

-@import 'chat';
-@import 'comment';
-@import 'filters';
-@import 'howto';
-@import 'sidebar';
-@import 'skills';
-@import 'tags';
\ No newline at end of file

src/styles/components/chat.scss

-.chat-view {
-  padding: 0;
-  height: calc(100vh - 84px - 83px);
-  position: relative;
-  overflow: hidden;
-
-  > sib-chat {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    max-height: calc(100vh - 84px - 83px);
-    z-index: 0;
-  }
-}
-

src/styles/components/comment.scss

-/* #job-offers {
-
-  details {
-
-    summary {
-      color: $color-244-73-62;
-      cursor: pointer;
-      display: flex;
-      padding: 1.3rem 2.1rem;
-
-      &::-moz-list-bullet {
-        list-style-type: none;
-      }
-
-      &::-webkit-details-marker {
-        display: none;
-      }
-
-      span {
-        @include icon('speech');
-        font-weight: 600;
-
-        &::before {
-          margin: 0 1rem 0 0;
-        }
-      }
-
-      .icon-arrow-up {
-        margin-left: auto;
-      }
-    }
-
-    &[open] {
-
-      .icon-arrow-up {
-        transform: rotate(180deg);
-      }
-    }
-
-    sib-conversation.conversation {
-
-      .sib-conversation {
-        font-family: Open Sans;
-
-        [name='conversation-wrapper'] {
-          display: flex;
-
-          [name='conversation-avatar'] {
-            margin-right: 6px;
-
-            .avatar {
-              height: 35px;
-              width: 35px;
-            }
-          }
-
-          [name='conversation-content'] {
-
-            [name='author_user.name'] {
-              color: $color-0-0-29;
-              font-size: 1.5rem;
-            }
-
-            .conversation__messages {
-              display: none;
-            }
-          }
-        }
-
-        >sib-display.conversation>div>sib-display:first-child {
-          margin-bottom: 4.5rem;
-        }
-
-        sib-ac-checker {
-          border-top: 1px solid $color-210-17-91;
-
-          sib-form-textarea {
-
-            >label div {
-              color: $color-210-5-56;
-              font-size: 1.4rem;
-              margin-bottom: 1rem;
-              visibility: hidden;
-
-              &::before {
-                content: 'Add a comment';
-                visibility: visible;
-              }
-            }
-
-            textarea {
-              border: none;
-              font-size: 1.5rem;
-              resize: none;
-            }
-          }
-
-          input[type='submit'] {
-            border: 1px solid $color-244-73-62;
-            border-radius: 100em;
-            color: $color-244-73-62;
-            font-size: 1.3rem;
-            padding: 0.8rem 1.5rem;
-            text-transform: lowercase;
-
-            &:hover {
-              background-color: $color-244-73-62;
-              border: 1px solid $color-244-73-62;
-              color: white;
-            }
-          }
-        }
-
-        .conversation>div>sib-display,
-        .conversation-form {
-          border: none;
-          margin: 1rem 2.1rem;
-        }
-      }
-    }
-  }
-}*/

src/styles/components/filters.scss

-/*%filters {
-  display: grid;
-  grid-gap: 0px 15px;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 3.5em 3.5em;
-
-  label {
-    display: block;
-  }
-
-  input, select {
-    appearance: none;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    border-style: none;
-    box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
-    color: $color-210-5-56;
-    font-size: 1.36rem;
-    line-height: 1.80;
-    margin-top: 1.36rem;
-    padding: 0.9rem;
-    width: 95%;
-  }
-
-  input[type="submit"] {
-    display: none;
-  }
-
-  select {
-    background: $color-0-0-100;
-    background-image: url("/images/chevron-down.png");
-    background-position: right 12px top 60%;
-    background-repeat: no-repeat;
-    background-size: 14px 9px;
-    box-sizing: border-box;
-    display: inline-block;
-    width: 100%;
-
-    > option:not(:first-child) {
-      color: black;
-    }
-  }
-
-  sib-form-label-text {
-    display: flex;
-    flex-direction: column;
-  }
-
-  sib-form-placeholder-dropdown[name="skills"] {
-    grid-column-end: 3;
-    grid-column-start: 1;
-  }
-}
-
-.job-board, #members-list {
-  sib-form[naked] {
-    @extend %filters;
-  }
-}*/

src/styles/components/howto.scss

-.howto {
-  padding: 0.85rem;
-  margin-bottom: 1.7rem;
-  margin-left: 8.5rem;
-  flex-basis: auto;
-  border-radius: 2em;
-
-  div[class*="icon-"] {
-    align-items: center;
-    display: flex;
-    flex-grow: 0;
-    flex-shrink: 0;
-  }
-}

src/styles/components/icons/_index.scss

-@import 'custom-icons';
-@import 'icons';
-@import 'material-design-icons';
\ No newline at end of file

src/styles/components/icons/custom-icons.scss

-/* Custom icons */
-
-$ci-filename:         "custom-icons";
-$ci-font-name:        "custom-icons";
-$ci-font-family:      "custom-icons";
-$ci-font-weight:      "regular";
-$ci-font-path:        "../fonts" !default;
-$ci-css-prefix:       ci !default;
-$ci-version:          "tlnzh2" !default;
-
-@font-face {
-  font-family: '#{$ci-font-name}';
-  src:  url('#{$ci-font-path}/#{$ci-filename}.eot?#{$ci-version}');
-  src:  url('#{$ci-font-path}/#{$ci-filename}.eot?#{$ci-version}#iefix') format('embedded-opentype'),
-    url('#{$ci-font-path}/#{$ci-filename}.ttf?#{$ci-version}') format('truetype'),
-    url('#{$ci-font-path}/#{$ci-filename}.woff?#{$ci-version}') format('woff'),
-    url('#{$ci-font-path}/#{$ci-filename}.svg?#{$ci-version}##{$ci-filename}') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-
-$ci-icons: (
-  awareness: '\e900',
-  businessman: '\e901',
-  information: '\e902',
-  list-1: '\e903',
-  sale: '\e904',
-  armor: '\e905',
-  chat: '\e906',
-  list: '\e907',
-  network: '\e908',
-  offer: '\e909',
-  reaction: '\e90a',
-  add: '\e90b',
-  appointment: '\e90c',
-  desk: '\e90d',
-  file: '\e90e',
-  premium: '\e90f',
-  team: '\e910',
-  beer: '\e911',
-  networking: '\e912',
-  receipt: '\e913',
-  robot: '\e914',
-  team-1: '\e915',
-  croupier: '\e916',
-  learning: '\e917',
-  review: '\e918',
-  surf: '\e919',
-  document: '\e91a',
-  code: '\e91b',
-  hat: '\e91c',
-  beer1: '\e91d',
-  alien: '\e91e',
-  add-user: '\e91f',
-  feedback: '\e920',
-  globe: '\e921',
-  bubble-add: '\e922'
-);
-
-%ci,
-[class^='ci-']::before,
-[class*='ci-']::before {
-  display: inline-block;
-  /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: '#{$ci-font-name}' !important;
-  font-size: 25px;
-  font-style: normal;
-  font-weight: normal;
-  line-height: 1;
-  speak: none;
-  text-align: center;
-  text-decoration: inherit;
-  width: 1em;
-  
-  /* For safety - reset parent styles, that can break glyph codes*/
-  font-variant: normal;
-  text-transform: none;
-
-  /* Better Font Rendering */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-@function char($character-code) {
-  @if function-exists("selector-append") {
-    @return unquote("\"\\#{$character-code}\"");
-  }
-
-  @if "\\#{'x'}" == "\\x" {
-    @return str-slice("\x", 1, 1) + $character-code;
-  }
-  @else {
-    @return #{"\"\\"}#{$character-code + "\""};
-  }
-}
-
-@function ci($name) {
-  @if map-has-key($ci-icons, $name) == false {
-    @warn "Icon #{$name} not found.";
-    @return "";
-  }
-  @return char(map-get($ci-icons, $name));
-}
-
-@each $key, $value in $ci-icons {
-  .#{$ci-css-prefix}-#{$key}:before {
-    content: char($value);
-  }
-}
-
-@mixin ci($value) {
-  &:before {
-    @extend %ci;
-    @extend .#{$ci-css-prefix}-#{$value};
-  }
-}

src/styles/components/icons/icons.scss

-@font-face {
-  font-family: 'simple-line-icons';
-  src: url('../fonts/simple-line-icons.eot?23594131');
-  src: url('../fonts/simple-line-icons.eot?23594131#iefix')
-      format('embedded-opentype'),
-    url('../fonts/simple-line-icons.woff2?23594131') format('woff2'),
-    url('../fonts/simple-line-icons.woff?23594131') format('woff'),
-    url('../fonts/simple-line-icons.ttf?23594131') format('truetype'),
-    url('../fonts/simple-line-icons.svg?23594131#simple-line-icons')
-      format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
-/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
-/*
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-  @font-face {
-    font-family: 'simple-line-icons';
-    src: url('../font/simple-line-icons.svg?23594131#simple-line-icons') format('svg');
-  }
-}
-*/
-%icon,
-[class^='icon-']:before,
-[class*=' icon-']:before {
-  font-family: 'simple-line-icons';
-  font-style: normal;
-  font-weight: normal;
-  speak: none;
-
-  display: inline-block;
-  text-decoration: inherit;
-  width: 1em;
-  margin-right: 0.2em;
-  text-align: center;
-  /* opacity: .8; */
-
-  /* For safety - reset parent styles, that can break glyph codes*/
-  font-variant: normal;
-  text-transform: none;
-
-  /* fix buttons height, for twitter bootstrap */
-  line-height: 1em;
-
-  /* Animation center compensation - margins should be symmetric */
-  /* remove if not needed */
-  margin-left: 0.2em;
-
-  /* you can be more comfortable with increased icons size */
-  /* font-size: 120%; */
-
-  /* Font smoothing. That was taken from TWBS */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  /* Uncomment for 3D effect */
-  // text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);
-}
-
-$icons: (
-  user-female: '\e000',
-  people: '\e001',
-  user-follow: '\e002',
-  user-following: '\e003',
-  user-unfollow: '\e004',
-  user: '\e005',
-  trophy: '\e006',
-  speedometer: '\e007',
-  social-youtube: '\e008',
-  social-twitter: '\e009',
-  social-tumblr: '\e00a',
-  social-facebook: '\e00b',
-  social-dropbox: '\e00c',
-  social-dribbble: '\e00d',
-  shield: '\e00e',
-  screen-tablet: '\e00f',
-  screen-smartphone: '\e010',
-  screen-desktop: '\e011',
-  plane: '\e012',
-  notebook: '\e013',
-  mustache: '\e014',
-  mouse: '\e015',
-  magnet: '\e016',
-  magic-wand: '\e017',
-  hourglass: '\e018',
-  graduation: '\e019',
-  ghost: '\e01a',
-  game-controller: '\e01b',
-  fire: '\e01c',
-  eyeglass: '\e01d',
-  envelope-open: '\e01e',
-  envelope-letter: '\e01f',
-  energy: '\e020',
-  emotsmile: '\e021',
-  disc: '\e022',
-  cursor-move: '\e023',
-  crop: '\e024',
-  credit-card: '\e025',
-  chemistry: '\e026',
-  bell: '\e027',
-  badge: '\e028',
-  anchor: '\e029',
-  wallet: '\e02a',
-  vector: '\e02b',
-  speech: '\e02c',
-  puzzle: '\e02d',
-  printer: '\e02e',
-  present: '\e02f',
-  playlist: '\e030',
-  pin: '\e031',
-  picture: '\e032',
-  map: '\e033',
-  layers: '\e034',
-  handbag: '\e035',
-  globe-alt: '\e036',
-  globe: '\e037',
-  frame: '\e038',
-  folder-alt: '\e039',
-  film: '\e03a',
-  feed: '\e03b',
-  earphones-alt: '\e03c',
-  earphones: '\e03d',
-  drop: '\e03e',
-  drawar: '\e03f',
-  docs: '\e040',
-  directions: '\e041',
-  direction: '\e042',
-  diamond: '\e043',
-  cup: '\e044',
-  compass: '\e045',
-  call-out: '\e046',
-  call-in: '\e047',
-  call-end: '\e048',
-  calculator: '\e049',
-  bubbles: '\e04a',
-  briefcase: '\e04b',
-  book-open: '\e04c',
-  basket-loaded: '\e04d',
-  basket: '\e04e',
-  bag: '\e04f',
-  action-undo: '\e050',
-  action-redo: '\e051',
-  wrench: '\e052',
-  umbrella: '\e053',
-  trash: '\e054',
-  tag: '\e055',
-  support: '\e056',
-  size-fullscreen: '\e057',
-  size-actual: '\e058',
-  shuffle: '\e059',
-  share-alt: '\e05a',
-  share: '\e05b',
-  rocket: '\e05c',
-  question: '\e05d',
-  pie-chart: '\e05e',
-  pencil: '\e05f',
-  note: '\e060',
-  music-tone-alt: '\e061',
-  music-tone: '\e062',
-  microphone: '\e063',
-  loop: '\e064',
-  logout: '\e065',
-  login: '\e066',
-  list: '\e067',
-  like: '\e068',
-  home: '\e069',
-  grid: '\e06a',
-  graph: '\e06b',
-  equalizer: '\e06c',
-  dislike: '\e06d',
-  cursor: '\e06e',
-  control-start: '\e06f',
-  control-rewind: '\e070',
-  control-play: '\e071',
-  control-pause: '\e072',
-  control-forward: '\e073',
-  control-end: '\e074',
-  calender: '\e075',
-  bulb: '\e076',
-  chart: '\e077',
-  arrow-up-circle: '\e078',
-  arrow-right-circle: '\e079',
-  arrow-left-circle: '\e07a',
-  arrow-down-circle: '\e07b',
-  ban: '\e07c',
-  bubble: '\e07d',
-  camrecorder: '\e07e',
-  camera: '\e07f',
-  check: '\e080',
-  clock: '\e081',
-  close: '\e082',
-  cloud-download: '\e083',
-  cloud-upload: '\e084',
-  doc: '\e085',
-  envelope: '\e086',
-  eye: '\e087',
-  flag: '\e088',
-  folder: '\e089',
-  heart: '\e08a',
-  info: '\e08b',
-  key: '\e08c',
-  link: '\e08d',
-  lock: '\e08e',
-  lock-open: '\e08f',
-  magnifier: '\e090',
-  magnifier-add: '\e091',
-  magnifier-remove: '\e092',
-  paper-clip: '\e093',
-  paper-plane: '\e094',
-  plus: '\e095',
-  location-pin: '\e096',
-  power: '\e097',
-  refresh: '\e098',
-  reload: '\e099',
-  settings: '\e09a',
-  star: '\e09b',
-  symble-female: '\e09c',
-  symbol-male: '\e09d',
-  target: '\e09e',
-  volume-1: '\e09f',
-  volume-2: '\e0a0',
-  volume-off: '\e0a1',
-  phone: '\e600',
-  menu: '\e601',
-  options-vertical: '\e602',
-  options: '\e603',
-  arrow-down: '\e604',
-  arrow-left: '\e605',
-  arrow-right: '\e606',
-  arrow-up: '\e607',
-  paypal: '\e608',
-  social-instagram: '\e609',
-  social-linkedin: '\e60a',
-  social-pintarest: '\e60b',
-  social-github: '\e60c',
-  social-google: '\e60d',
-  social-reddit: '\e60e',
-  social-skype: '\e60f',
-  social-behance: '\e610',
-  social-foursqare: '\e611',
-  social-soundcloud: '\e612',
-  social-spotify: '\e613',
-  social-stumbleupon: '\e614',
-  minus: '\e615',
-  organization: '\e616',
-  exclamation: '\e617',
-  social-vkontakte: '\e618',
-  event: '\e619',
-  social-steam: '\e620',
-  idea:'\e076'
-);
-
-
-@each $name, $code in $icons {
-  .icon-#{$name} {
-    &:before {
-      content: $code;
-    }
-  }
-}
-@mixin icon($code) {
-  &:before {
-    @extend %icon;
-    @extend .icon-#{$code};
-  }
-}

src/styles/components/icons/material-design-icons.scss

-/* MaterialDesignIcons.com */
-
-$mdi-filename:         "material-design-icons";
-$mdi-font-name:        "material-design-icons";
-$mdi-font-family:      "material-design-icons";
-$mdi-font-weight:      "regular";
-$mdi-font-path:        "../fonts" !default;
-$mdi-css-prefix:       mdi !default;
-$mdi-version:          "3.3.92" !default;
-
-@font-face {
-  font-family: '#{$mdi-font-name}';
-  src: url('#{$mdi-font-path}/#{$mdi-filename}.eot?v=#{$mdi-version}');
-  src: url('#{$mdi-font-path}/#{$mdi-filename}.eot?#iefix&v=#{$mdi-version}') format('embedded-opentype'),
-    url('#{$mdi-font-path}/#{$mdi-filename}.woff2?v=#{$mdi-version}') format('woff2'),
-    url('#{$mdi-font-path}/#{$mdi-filename}.woff?v=#{$mdi-version}') format('woff'),
-    url('#{$mdi-font-path}/#{$mdi-filename}.ttf?v=#{$mdi-version}') format('truetype'),
-    url('#{$mdi-font-path}/#{$mdi-filename}.svg?v=#{$mdi-version}##{$mdi-filename}#{$mdi-font-weight}') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-
-$mdi-icons: (
-  account-outline: '\F013',
-  atom: '\F767',
-  cellphone-iphone: '\F120',
-  check: '\F12C',
-  email-outline: '\F1F0',
-  link-variant: '\F339'
-);
-
-%mdi,
-[class^='mdi-']::before,
-[class*='mdi-']::before {
-  display: inline-block;
-  font-family: '#{$mdi-font-name}' !important;
-  font-size: 25px;
-  font-style: normal;
-  font-weight: normal;
-  line-height: 0.5em;
-  margin-left: -0.15em;
-  text-align: center;
-  text-decoration: inherit;
-  width: 1em;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  /* For safety - reset parent styles, that can break glyph codes*/
-  font-variant: normal;
-  text-transform: none;
-}
-
-@function char($character-code) {
-  @if function-exists("selector-append") {
-    @return unquote("\"\\#{$character-code}\"");
-  }
-
-  @if "\\#{'x'}" == "\\x" {
-    @return str-slice("\x", 1, 1) + $character-code;
-  }
-  @else {
-    @return #{"\"\\"}#{$character-code + "\""};
-  }
-}
-
-@function mdi($name) {
-  @if map-has-key($mdi-icons, $name) == false {
-    @warn "Icon #{$name} not found.";
-    @return "";
-  }
-  @return char(map-get($mdi-icons, $name));
-}
-
-@each $key, $value in $mdi-icons {
-  .#{$mdi-css-prefix}-#{$key}:before {
-    content: char($value);
-  }
-}
-
-@mixin mdi($value) {
-  &:before {
-    @extend %mdi;
-    @extend .#{$mdi-css-prefix}-#{$value};
-  }
-}
-
-
-.#{$mdi-css-prefix}-blank:before {
-  content: "\F68C";
-  visibility: hidden;
-}

src/styles/components/sidebar.scss

-.no-sidebar {
-  flex: 1;
-  @extend %padding-main;
-}
-
-.with-sidebar {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: row;
-  align-items: stretch;
-  overflow: hidden;
-
-  .views-container {
-    flex: 1 0 0;
-    /*-webkit-backface-visibility: hidden;*/
-
-    &.sidebar-is-closed {
-      @include breakpoint(769px, 0) {
-        margin-left: -15.5rem;
-        transform: translate(15.5rem);
-      }
-    }
-  }
-
-  >div {
-    transition: all 0.5s;
-  }
-
-  nav {
-    background: var(--color-right-menu-background);
-    transition: all 0.5s;
-    width: 25rem;
-
-    >sib-router {
-      color: var(--color-right-menu-text);
-      flex: 0 0 auto;
-      font-weight: 600;
-
-      >ul {
-        cursor: pointer;
-        display: flex;
-        flex-direction: column;
-        list-style: none;
-        margin: 0;
-        padding-left: 0;
-
-        li {
-          align-items: center;
-          border-bottom: 1px solid var(--color-right-menu-link-border);
-          display: flex;
-          margin: 0;
-          padding: 2.15rem 2.55rem;
-          position: relative;
-          /*width: 12em;*/
-          
-          &::before {
-            float: left;
-            font-size: 4rem;
-            margin-left: 0;
-            margin-right: 2.85rem;
-          }
-        }
-
-        >li {
-          @include icon('arrow-right-circle');
-        }
-
-        >sib-route {
-
-          &[name*='circle'],
-          &[name*='project'] {
-
-            >li::before {
-              font-size: 4rem;
-            }
-          }
-
-          &[name*='users'] {
-            
-            >li::before {
-              font-size: 5rem;
-            }
-          }
-
-          &[name$='chat']>li {
-            @include ci('chat');
-          }
-
-          &[name$='create']>li {
-            @include ci('offer');
-          }
-
-          &[name$='edit']>li {
-            @include ci('list');
-          }
-
-          &[name$='profile']>li, &[name$='information']>li  {
-            @include ci('information');
-          }
-
-          &[name$='drive']>li {
-            @include ci('file');
-          }
-
-          &[name='admin-users']>li::before {
-            background-color: var(--color-secondary);
-            content: '';
-            display: inline-block;
-            height: 40px;
-            mask: url('/images/add-user.svg') 1% 1% / 1px 1px no-repeat;
-            mask-size: cover;
-            -webkit-mask: url('/images/add-user.svg') 1% 1% / 1px 1px no-repeat;
-            -webkit-mask-size: cover;
-            width: 40px;
-          }
-
-          &[name='admin-circles']>li {
-            @include ci('bubble-add');
-          }
-
-          &[name='admin-projects']>li {
-            @include ci('add');
-          }
-
-          &[active] {
-            background-color: var(--color-right-menu-active-background);
-            color: var(--color-right-menu-active-text);
-            display: inline-block;
-          }
-
-          &.active-color[active] {
-            >li::before {
-              background-color: var(--color-right-menu-active-icon);
-            }
-          }
-        }
-      }
-    }
-
-    &.jsRightMenu {
-
-      @include breakpoint(sm) {
-        display: none;
-      }
-    }
-
-    &.jsRightMenu:not([open]) {
-      transform: translate(15.5rem);
-
-      & .jsOffsiteToggle::before {
-        transform: rotate(180deg);
-      }
-    }
-    
-    &.jsRightMenu[open] {
-
-      @include breakpoint(sm) {
-        display: block;
-        background: var(--color-right-menu-background);
-        bottom: 0;
-        box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.12);
-        min-width: 60%;
-        position: fixed;
-        right: 0;
-        top: 83px;
-        z-index: 1;
-      }
-    }
-  }
-}

src/styles/components/skills.scss

-sib-multiple[name*='skills'] {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.skill {
-  background-color: var(--color-skill-background);
-  border: 1px solid var(--color-skill-background);
-  border-radius: 2em;
-  color: var(--color-skill-text);
-  display: block;
-  font-size: 1.4rem;
-  font-weight: bold;
-  margin: 0.4rem 1rem 0.4rem 0;
-  padding: 0.5rem 2rem;
-}
\ No newline at end of file

src/styles/components/tags.scss

-%tag-role {
-  border: 1px solid var(--color-tag-group-border);
-  border-radius: 3px;
-  color: var(--color-tag-group-text);
-  font-size: 1.4rem;
-  font-weight: 400;
-  margin-right: 0.6rem;
-  padding: 0.2rem 0.98rem;
-}
-
-%tag-admin {
-  border: 1px solid var(--color-tag-admin-border);
-  border-radius: 3px;
-  color: var(--color-tag-admin-text);
-  font-size: 1.4rem;
-  font-weight: 400;
-  margin-left: 0.6rem;
-  padding: 0.35rem 0.98rem;
-}
\ No newline at end of file

src/styles/content/_index.scss

+main {
+  height: 100vh;
+}
+
+.no-background-image {
+  background-image: none !important;
+}
+
+/* Styles of the right-hand menu + pages with that menu */
+.with-sidebar {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  /*margin-top: 50px;*/
+  overflow: hidden;
+
+  .views-container {
+    flex: 1 0 0;
+    /*-webkit-backface-visibility: hidden;*/
+
+    &.sidebar-is-closed {
+
+      @media(min-width: 768.01px) {
+        margin-left: -157px;
+        transform: translate(157px);
+      }
+    }
+  }
+
+  >div {
+    transition: all 0.5s;
+  }
+
+  .sidebar {
+    background: #F1F1F1;
+    height: calc(100vh - 50px);
+    transition: all 0.5s;
+    width: 217px;
+
+    @media (max-width: 768px) {
+      width: 60px;
+    }
+
+    ul {
+
+      &>li:first-child>a {
+        vertical-align: middle;
+      }
+
+      >solid-route {
+
+        &[active]>li {
+          background-color: var(--color-heading);
+          color: white;
+        }
+        &:hover:not([active])>li {
+          background: #E4E4E4;
+        }
+      }
+    }
+
+    /* Styles use with JS to open/close the sidebar */
+    &.jsRightMenu {
+      @media (min-width: 768,01px) {
+        display: block;
+      }
+
+      @media (max-width: 768px) {
+        position: fixed;
+        top: 99px;
+        right: 0;
+        height: auto;
+        z-index: 2999;
+        box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.14);
+      }
+
+      solid-link[active] {
+        color: white;
+        background: var(--color-heading);
+
+        >li {
+          border-bottom: 1px solid var(--color-heading);
+        }
+      }
+
+      solid-link:not([active]):hover {
+        background: #e4e4e4;
+      }
+    }
+
+    &.jsRightMenu:not([open]) {
+      @media (min-width: 768.01px) {
+        transform: translate(157px);
+      }
+    }
+
+    &.jsRightMenu[open] {
+      display: block;
+      bottom: 0;
+      right: 0;
+    }
+  }
+
+  .jsMobileRightMenuButton {
+    float: right;
+  }
+}
+
+/* Add scrollbar to the left menu and to the content */
+.scrollbar-nav,
+.scrollbar-content {
+  overflow-y: auto;
+  height: calc(100vh - 50px); /* 50px == header's height */
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: none;
+}
+
+.scrollbar-content {
+
+  @media (max-width: 768px) {
+    position: relative;
+  }
+}
+
+/* Custom scrollbar of the right-menu */
+/* Works on Firefox*/
+.scrollbar-nav {
+  scrollbar-width: thin;
+  scrollbar-color:#E4E9F1 var(--color-heading);
+}
+
+/* Works on Chrome, Edge, and Safari */
+.scrollbar-nav {
+  &::-webkit-scrollbar {
+    width: 12px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--color-heading);          /* color of the tracking area */
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color:#E4E9F1;                /* color of the scroll thumb */
+    border-radius: 6px;                        /* roundness of the scroll thumb */
+    border: 3px solid var(--color-heading);    /* creates padding around scroll thumb */
+  }
+}
+
+/* Custom scrollbar of the content */
+/* Works on Firefox */
+.scrollbar-content {
+  scrollbar-width: thin;
+  scrollbar-color:#E4E9F1 white;            /* scroll thumb and track */
+}
+
+/* Works on Chrome, Edge, and Safari */
+.scrollbar-content {
+  &::-webkit-scrollbar {
+    width: 12px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: white;                        /* color of the tracking area */
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color:#E4E9F1;                 /* color of the scroll thumb */
+    border-radius: 6px;                         /* roundness of the scroll thumb */
+    border: 3px solid white;                  /* creates padding around scroll thumb */
+  }
+}
+/* End scrollbar*/
+
+orbit-circle-headline,
+solid-display-value-markdown {
+  p {
+    margin: 0;
+  }
+
+  a {
+    vertical-align: baseline;
+  }
+}

src/styles/forms/_index.scss

+/*.search-form {
+  [type="submit"] {
+    margin-bottom: 20px;
+    @media (min-width: 768.01px) {
+      margin-bottom: 0;
+      float: none !important;
+      margin-top: 0 !important;
+    }
+  }
+}*/
\ No newline at end of file

src/styles/header/_index.scss

+header {
+  height: 50px;
+  position: fixed;
+  z-index: 10000;
+
+  >div {
+    display: flex;
+
+    >div {
+      display: flex;
+      margin-left: auto;
+    }
+  }
+
+  solid-link {
+    align-self: center;
+  }
+
+  .tag {
+    align-self: flex-start;
+    height: auto !important;
+    letter-spacing: 0.16px !important;
+    line-height: normal !important;
+    padding: 1px 8px !important;
+    margin-top: 10px;
+  }
+
+  solid-notifications {
+    color: var(--color-heading);
+    align-self: center;
+
+    height: 25px;
+    width: 25px;
+
+    .solid-notifications__container {
+      position: relative;
+
+      &[open] summary {
+        background-color: white;
+        color: var(--color-heading);
+      }
+
+      .solid-notifications__button {
+        font-size: 25px;
+        padding: 0;
+        line-height: 1;
+        height: auto;
+        width: auto;
+
+        &:hover, &:focus {
+          background: white;
+        }
+
+        img {
+          display: none;
+        }
+
+        .solid-notifications__counter {
+          left: 12px;
+          position: absolute;
+          top: -4px;
+          width: 18px;
+          height: 18px;
+
+          span {
+            background-color: var(--color-primary);
+            color: white;
+            font-size: 11px;
+            line-height: 18px;
+          }
+        }
+      }
+
+      .solid-notifications__triangle-back {
+        display: none;
+      }
+
+      .solid-notifications__triangle-shadow {
+        display: none;
+
+        @media(min-width: 768.01px) {
+          background: white;
+          display: block;
+          position: absolute;
+          left: auto;
+          right: -1.9em;
+          top: 4em;
+          transform: initial;
+          width: 0;
+          z-index: 4;
+
+          &::after {
+            content: "";
+            position: absolute;
+            width: 0;
+            height: 0;
+            margin-left: -4.2em;
+            top: 0px;
+            left: 50%;
+            border: 1em solid black;
+            border-color: #fff #fff transparent transparent;
+            transform-origin: 0 0;
+            transform: rotate(-45deg);
+            box-shadow: 6px -6px 10px -3px rgba(92, 97, 104, 0.14);
+          }
+        }
+      }
+
+      .solid-notifications__list {
+        border: none;
+        border-radius: 0;
+        box-shadow: 0 0 7px 0 rgba(92, 97, 104, 0.24);
+        max-height: calc(100vh - 50px);
+        position: fixed;
+        left: 0;
+        top: 2.5em;
+        width: 100vw;
+
+        /* Custom scrollbar */
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+        -ms-overflow-style: none;
+        scrollbar-width: thin;
+        scrollbar-color: #C9C8C8 #F1F1F1;
+
+        @media(min-width: 768.01px) {
+          max-height: calc(100vh - 93px);
+          position: absolute;
+          left: auto;
+          right: -2.3em;
+          top: 2.95em;
+          width: 347px;
+        }
+
+        &::-webkit-scrollbar-track {
+          background: #F1F1F1;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background-color: #C9C8C8;
+          border-radius: 8px;
+        }
+
+        &::-webkit-scrollbar {
+          width: 8px;
+        }
+
+        /* End of custom scrollbar */
+
+        .solid-notifications__item {
+          border-bottom: none;
+
+          &:hover {
+            background-color: transparent;
+
+            & solid-notification__title,
+            & solid-notification__summary {
+              color: var(--color-secondary);
+            }
+          }
+
+          .solid-notification {
+            padding: 16px 0 5px;
+
+            &[data-read] {
+              opacity: 0.5;
+            }
+
+            .solid-notification__avatar {
+              align-items: center;
+              background: #f6f6f6;
+              display: flex;
+              height: 35px;
+              justify-content: center;
+              margin-left: 16px;
+              margin-right: 14px;
+              overflow: hidden;
+              position: relative;
+              vertical-align: middle;
+              width: 35px;
+
+              img {
+                background-color: #f6f6f6;
+                height: 100%;
+                object-fit: cover;
+                object-position: center center;
+                width: 100%;
+              }
+
+              object {
+                height: 45%;
+                width: 45%;
+              }
+            }
+
+            .solid-notification__content {
+              font-family: Open Sans, sans-serif;
+
+              .solid-notification__title {
+                color: var(--color-heading);
+                font-size: 13px;
+                font-weight: 600;
+
+                .solid-notification__title__side {
+                  font-weight: normal;
+
+                  >span:first-child {
+                    margin-right: 4px;
+                  }
+                }
+
+                .solid-notification__title__icon {
+                  display: inline-block;
+                  font-family: simple-line-icons;
+                }
+              }
+
+              .solid-notification__summary {
+                color: var(--color-text, #636363);
+                font-size: 12px;
+                line-height: 17px;
+                margin-top: 4px;
+
+                @media(min-width: 768.01px) {
+                  max-width: 256px;
+                }
+              }
+            }
+
+            .solid-notification__date {
+              display: none;
+            }
+
+            .solid-notification__read {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  details {
+
+    &[open] {
+      summary {
+        background-color: var(--color-heading);
+        color: #fff;
+        .text-color-heading {
+          color: #fff;
+        }
+        .labelled-avatar>div {
+          line-height: normal;
+        }
+      }
+    }
+    summary {
+      display: block; /* To remove the disclosure triangle on Firefox v.>=69 */
+      cursor: pointer;
+      height: 50px;
+
+      /* To remove the disclosure triangle on Chrome (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#Customizing_the_disclosure_widget) */
+      &::marker,
+      &::-webkit-details-marker {
+        display: none;
+      }
+      /* End */
+
+      solid-display {
+        padding-top: 13px;
+      }
+    }
+  }
+
+  .panel {
+    height: 0;
+    position: absolute;
+    right: 0;
+    z-index: 1;
+    /* Quick fix for mobile version */
+    width: 227px;
+    top: 50px;
+
+    >nav {
+      box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16);
+      height: auto;
+      width: 100%;
+
+      solid-route,
+      solid-link,
+      button {
+        display: block;
+      }
+
+      li,
+      button {
+        width: 100%;
+        text-align: left;
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    height: 50px;
+
+    .icon-menu {
+      font-size: 24px;
+    }
+
+    .tag {
+      align-self: center;
+      margin: 0;
+      margin-left: 15px;
+    }
+
+    details.user-menu {
+
+      .user-firstname {
+        display: none;
+      }
+
+      summary {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        height: 50px;
+        padding: 0;
+
+        solid-display {
+          padding-top: 0;
+        }
+
+        >.labelled-avatar .avatar {
+          height: 32px;
+          width: 32px;
+        }
+
+        .sm-arrow-down {
+          width: 16px;
+          height: 16px;
+          background: white;
+          border-radius: 50%;
+          text-align: center;
+          position: absolute;
+          top: 26px;
+          right: -1px;
+          box-shadow: 0 0 4px 0 rgba(46, 63, 87, 0.18);
+
+          .icon::before {
+            font-size: 10px;
+          }
+        }
+      }
+
+      &[open] {
+        width: 100%;
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 72px;
+
+        summary {
+          display: flex;
+          height: 72px;
+        }
+
+        .labelled-avatar {
+          display: none;
+        }
+
+        .user-firstname {
+          display: flex;
+          align-items: center;
+          padding: 13px;
+          width: 100%;
+
+          [name="segment3"] {
+            margin-left: auto;
+
+            .icon::before {
+              font-size: 20px;
+            }
+          }
+        }
+
+        .panel {
+          top: 72px;
+          height: calc(100vh - 72px);
+          background: white;
+          width: calc(100vw);
+
+          >nav {
+            box-shadow: none;
+
+            >ul>li:last-child {
+              border-bottom: 1px solid #E4E9F1;
+            }
+          }
+        }
+      }
+    }
+  }
+  .solid-notifications__item:hover * {
+    color: var(--color-secondary)!important;
+  }
+  .solid-notification__content {
+    max-width: calc(100% - 65px);
+  }
+  .solid-notification__summary {
+    text-overflow: ellipsis;
+    display: block;
+    width: 100%;
+  }
+  .solid-notification__title {
+    overflow: hidden;
+    white-space: break-spaces;
+    text-overflow: ellipsis;
+    display: block;
+    width: 100%;
+  }
+}