@media (max-width: 900px) {
  #sidebar-container {
    width: 8%;

    & .sidebar {
      padding-left: 0.5rem;

      & .logo-wrapper {
        & .logo-text {
          white-space: nowrap;
        }
      }
    }

    & .sidebar-content {
      padding-right: 0.5rem;

      & .sidebar-item-wrapper {
        & .sidebar-item {
          white-space: nowrap;

          & span:first-child {
            padding-left: 0.75rem;
            margin-right: 2rem;
          }
        }
      }
    }

    &.sidebar-off {
      width: 40%;
      position: absolute;

      & .logo-text {
        display: block;
      }

      & .sidebar-content {
        & .sidebar-item-wrapper {
          & .sidebar-item {
            & span:last-child {
              display: block;
            }

            & span:first-child {
              padding-left: 0px;
              margin-right: 10px;
            }

            & span:last-child {
              width: 100%;

              & a {
                width: 100%;
              }
            }
          }
        }
      }
    }
  }

  .right-side-container {
    width: 92%;

    &.right-side-off {
      width: 100%;
    }
  }
}

@media (max-width: 600px) {
  .header {
    padding: 0 0.5rem;
  }

  #sidebar-container {
    width: 20%;

    & .sidebar {
      padding-left: 0.5rem;

      & .logo-wrapper {
        & .logo-text {
          white-space: nowrap;
        }
      }
    }

    & .sidebar-content {
      padding-right: 0.5rem;

      & .sidebar-item-wrapper {
        & .sidebar-item {
          white-space: nowrap;

          & span:first-child {
            padding-left: 0.75rem;
            margin-right: 2rem;
          }
        }
      }
    }

    &.sidebar-off {
      width: 100%;
      position: absolute;
      z-index: 999;

      & .logo-text {
        display: block;
      }

      & .sidebar-content {
        & .sidebar-item-wrapper {
          & .sidebar-item {
            & span:last-child {
              display: block;
            }

            & span:first-child {
              padding-left: 0px;
              margin-right: 10px;
            }

            & span:last-child {
              width: 100%;

              & a {
                width: 100%;
              }
            }
          }
        }
      }
    }
  }

  .right-side-container {
    width: 80%;
    padding: 0 0.25rem;

    &.right-side-off {
      width: 100%;
    }
  }
}