.sideNavMobileComponent {
  display: none;
  background-color: #fff;
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  z-index: 9999;
  height: 100vh;
  width: calc(100vw - 15px);
}
.sideNavMobileComponent.show {
  display: block;
}
.sideNavMobileComponent .side-nav-header {
  background: var(--headerFooterBackgroundColor);
  display: flex;
  gap: 10px;
  padding: 10px;
  height: 72px;
}
.sideNavMobileComponent .side-nav-header h2 {
  color: #fff;
  font-size: 20px;
  font-weight: 200;
  margin-bottom: 0;
}
.sideNavMobileComponent .side-nav-header h3 {
  color: #fff;
  font-size: 16px;
  font-weight: 200;
}
.sideNavMobileComponent .side-nav-header button {
  margin: auto;
  margin-inline-end: 0;
  color: #fff;
  border: 0;
  background-color: transparent;
}
.sideNavMobileComponent .side-nav-header img {
  filter: brightness(5);
}
.sideNavMobileComponent > ul {
  background-color: #fff;
  height: calc(100% - 72px);
  overflow: auto;
}
.sideNavMobileComponent > ul li {
  /*&.active {
      padding-bottom: 0;

      &::before {
          content: ' ';
          transform: rotate(180deg);
          border-inline-start: 1px solid #f0edef;
          border-inline-end: 0;
      }
  }*/
}
.sideNavMobileComponent > ul li .nav-item-elem {
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  display: flex;
  flex-wrap: wrap;
}
.sideNavMobileComponent > ul li::before {
  content: " ";
  background-image: url("/img/tum.img/angle-arrow-down-black.svg");
  background-size: 13px;
  background-position: center;
  background-repeat: no-repeat;
  padding-inline-end: 20px;
  padding-inline-start: 20px;
  border-inline-end: 1px solid #f0edef;
  margin-inline-end: 20px;
  width: 53px;
  height: 20px;
  display: inline-block;
  position: relative;
  transition: ease-in-out 1s;
}
.sideNavMobileComponent > ul li span,
.sideNavMobileComponent > ul li a {
  width: calc(100% - 90px);
  display: inline-block;
  color: var(--textColor);
}
.sideNavMobileComponent > ul li ul {
  flex: 1;
  /*margin-top: 10px;*/
  /* & :last-child {
      border-bottom: 0;
  }*/
}
.sideNavMobileComponent > ul li ul li::before {
  background-image: none;
}
.sideNavMobileComponent > ul li ul li:hover, .sideNavMobileComponent > ul li ul li.active {
  /* background-color: #eff7fc;*/
  /*  padding-bottom: 10px;

  &::before {
      border-inline-end: 2px solid $secondary;
      transform: rotate(0deg);
  }*/
}

/*overried*/
.sideNavMobileComponent ul.first-level li a {
  margin-inline-start: 15px;
}
.sideNavMobileComponent ul.second-level li a {
  margin-inline-start: 25px;
}
.sideNavMobileComponent ul.third-level li a {
  margin-inline-start: 35px;
  width: calc(100% - 100px);
}
.sideNavMobileComponent ul.fourth-level li a {
  margin-inline-start: 45px;
  width: calc(100% - 120px);
}
.sideNavMobileComponent ul li .nav-item-elem {
  /*.open-sub-nav img {
      border-inline-end: 1px solid #f0edef;
  }*/
  /*.nav-item {
      margin-inline-start: 15px;
  }*/
}
.sideNavMobileComponent ul li .nav-item-elem.active-parent a {
  font-weight: 600;
}
    .sideNavMobileComponent ul li .nav-item-elem.active {
        background-color: var(--componentLightBlueColor);
    }
.sideNavMobileComponent ul li .nav-item-elem.active a {
  font-weight: 600;
}
.sideNavMobileComponent ul li .nav-item-elem.active .open-sub-nav {
  border-inline-end: 2px solid #4297de;
}
.sideNavMobileComponent ul li .nav-item-elem.active li {
  background-color: #fff;
  border-inline-end: 1px solid #f0edef;
}
.sideNavMobileComponent ul li .nav-item-elem .open-sub-nav {
  width: 60px;
  height: 20px;
  border-inline-end: 1px solid #f0edef;
}
.sideNavMobileComponent ul li .nav-item-elem .open-sub-nav button {
  border: none;
  background: none;
  /* border-inline-end: 1px solid #f0edef;
  margin-inline-end: 20px;
  padding-inline-end: 20px;
  display: inline-block;
  position: relative;
  transition: ease-in-out 1s;*/
}
.sideNavMobileComponent ul li .nav-item-elem .open-sub-nav button::before {
  content: " ";
  background-image: url("/img/tum.img/angle-arrow-up-black.svg");
  background-size: 13px;
  background-position: center;
  background-repeat: no-repeat;
  width: 53px;
  height: 20px;
  display: inline-block;
  /* padding-inline-end: 20px;
  padding-inline-start: 20px;
  border-inline-end: 1px solid #f0edef;
  margin-inline-end: 20px;
  display: inline-block;
  position: relative;
  transition: ease-in-out 1s;*/
}
.sideNavMobileComponent ul li .nav-item-elem .open-sub-nav button.collapsed::before {
  background-image: url("/img/tum.img/angle-arrow-down-black.svg");
}
.sideNavMobileComponent ul li::before {
  content: none;
}