@media (max-width: 48em) {
  .sidebar-logo {
    max-width: 50%;
    margin: 0 auto;
  }
  .sidebar-nav-item a img,.sidebar-nav-item a svg {
    display: none;
  }
  body .sidebar-nav-item  {
    padding-left: 0;
  }
}
@media (min-width: 48em) {
  .sidebar-logo__img {
    margin-left: -5%;
  }
  .sidebar-nav {
    text-align: left;
  }
  .sidebar-nav img,.sidebar-nav svg {
    display: inline-block;
    margin: 0 .5em 0 0;
    vertical-align: middle;
    object-fit: contain;
  }
}
.sidebar-logo {
  position: relative;
}
.sidebar-logo:after {
  display: block;
  padding-bottom: 100%;
  content: '';
}
.sidebar-logo__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.sidebar-nav-item {
  position: relative;
  padding-left: 5%;
  border-right: 1.25rem solid transparent;
}
.sidebar-nav-item.active{
  background: skyblue;
  background-clip: content-box;
  -webkit-filter: hue-rotate(45deg);
  filter: hue-rotate(45deg)
}
.sidebar-nav-item::before {
  display: inline-block;
  width: 5%;
  content: '';
}
.sidebar-nav-item.active:after {
  position: absolute;
  left: 100%;
  border: 1.25rem solid skyblue;
  border-top-color: transparent;
  border-right: 0 none;
  border-bottom-color: transparent;
  background: inherit;
  content: '';
}
.sidebar-nav-item.active a {
  color:  #2b6b84;
}