body #menu{
  z-index: 9999999;
  overflow: hidden;
}

.menu * {
  color: white;
}

.menu-content {
  height: calc(100% - 100px);
  overflow: auto;
  overflow: overlay;
}

.menu-item {
  display: block;
  height: 50px;
  background: rgba(0, 0, 0, 0);
  overflow: hidden;
}

.menu-item-text i {
  position: absolute;
  right: 25px;
  top: 0;
  bottom: 0;
  line-height: 50px;
  transform: rotate(0deg);
}

.navbar-toggler{
  color: black;
  border: 1px solid #ced4da;
  height: 38px;
  margin-right: 15px;
}

.navbar-toggler-icon{
  pointer-events: none;
  width: 1em;
  height: 1em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

.navbar-active .menu{
  box-shadow: -13px 0px 20px 6px #000000b0;
}

/* Zwinietenu dla mobilek itp */
@media (max-width: 768px) {
  body #menu{
    left: -250px;
  }

  body.navbar-active #menu{
    left: 0;
  }

  .menu {
    background: #1D2D50;
    width: 100%;
    max-width: 250px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 333;
  }


  .menu-item-text {
    display: inline-block;
    width: calc(100% - 84px);
    line-height: 50px;
    position: relative;
    text-transform: uppercase;
    font-weight: bold;
    transform: translate(0, -20px);
  }

  .menu-item-logo {
    display: inline-block;
    height: 50px;
    width: 50px;
    margin-left: 30px;
    text-align: center;
    line-height: 50px;
  }


  .sub-menu .menu-item-logo {
    margin-left: 50px;
  }
}

/* Zwiniete menu dla desktopow */
@media (min-width: 768px) {
  body #content{
    margin-left: 50px;
  }

  body.navbar-active #content{
    margin-left: 250px;
  }

  .menu{
    background: #1D2D50;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 333;
    max-width: 50px;
  }

  .menu img{
    padding: 2px;
  }

  .navbar-active .menu img{
    padding: 0;
  }

  .navbar-active .menu {
    max-width: 250px;
  }

  .menu-item-text {
    display: none;
    width: calc(100% - 84px);
    line-height: 50px;
    position: relative;
    text-transform: uppercase;
    font-weight: bold;
    transform: translate(0, -20px);
  }

  .navbar-active .menu-item-text{
    display: inline-block;
  }

  .menu-item-logo {
    display: inline-block;
    height: 50px;
    width: 50px;
    margin-left: 0;
    text-align: center;
    line-height: 50px;
  }

  .navbar-active .menu-item-logo {
    margin-left: 30px;
  }

  .sub-menu .menu-item-logo {
    margin-left: 0;
  }

  .navbar-active .sub-menu .menu-item-logo {
    margin-left: 50px;
  }

  .menu-header h1 {
    display: none;
  }

  .navbar-active .menu-header h1 {
    display: block;
  }
}