#side-nav-menu-wrapper {
  width: 100%;
  position: relative;
}
#side-nav-menu *,
#side-nav-menu *::before,
#side-nav-menu *::after {
  box-sizing: border-box;
}

#side-nav-menu * {
  margin: 0;
}

#side-nav-menu {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  font-family: "RubFlama", sans-serif;
  font-size: large;
  font-weight: 600;
  background-color: rgb(0, 53, 96);
  border-radius: 2.5px;
  border: 1px solid rgb(255, 255, 255);
  width: 100%;
}

#side-nav-menu .layer {
  list-style: none;
  padding: 0;
}

#side-nav-menu .layer li {
  width: 100%;
}

#side-nav-menu .layer li a {
  color: white;
  text-decoration: none;
  padding: 1rem;
  flex-grow: 1;
  background-color: transparent;
}
#side-nav-menu .layer li a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

#side-nav-menu .layer .menu-item-has-children > a {
  border-right: 1px solid rgb(162, 202, 45);
}

#side-nav-menu .layer .current-menu-parent a {
  color: rgb(0, 53, 96);
  border-bottom: 1px solid rgba(0, 53, 96, 0.1);
}
#side-nav-menu .layer li a:hover,
#side-nav-menu .layer .current-menu-item > a {
  background-color: rgb(170, 194, 76);
  color: white;
}
#side-nav-menu .layer .current-menu-parent > .sibling-toggler svg {
  color: rgb(0, 53, 96);
}
#side-nav-menu .layer .current-menu-parent {
  background-color: rgb(227, 227, 227);
}

#side-nav-menu .layer {
  flex-grow: 1;
  min-width: 100%;
}

#side-nav-menu-wrapper .flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}

#side-nav-menu-wrapper button.open-side-nav-menu,
#side-nav-menu-backdrop button.close-side-nav-menu,
#side-nav-menu-wrapper button.dispose {
  display: none;
}
#side-nav-menu-wrapper button.open-side-nav-menu,
#side-nav-menu .layer li .sibling-toggler {
  background-color: transparent;
  border: unset;
  width: auto;
  color: white;
  transition: box-shadow 0.2s ease;
}
#side-nav-menu .layer li .sibling-toggler {
  transform: rotate(0deg);
  transition: transform 0.5s ease;
}

#side-nav-menu-wrapper > button:focus,
#side-nav-menu .layer li .sibling-toggler:focus {
  box-shadow: none;
  outline: none;
}
#side-nav-menu-wrapper > button:hover,
#side-nav-menu .layer li .sibling-toggler:hover {
  box-shadow: none;
}

#side-nav-menu .layer li .sibling-toggler svg {
  transform: translateY(0.5px);
}

#side-nav-menu .layer .wrapper {
  width: 100%;
  flex-grow: 1;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s ease-out;
  min-height: 0px;
}

#side-nav-menu .layer .wrapper .layer {
  overflow: hidden;
}

#side-nav-menu .layer .wrapper.open {
  grid-template-rows: 1fr;
  border-left: 0.4rem solid rgb(170, 194, 76);
}

#side-nav-menu .layer li .sibling-toggler.active {
  transform: rotate(90deg);
}
/* @media screen and (max-width: 1020px) {
  #side-nav-menu-wrapper button.open-side-nav-menu:not(.dispose) {
    display: block;
    position: fixed;
    background-color: rgb(162, 202, 45);
    top: 15%;
    right: 8.8%;
    z-index: 9999;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  }
}
@media screen and (max-width: 641px) {
  #side-nav-menu-wrapper button.open-side-nav-menu:not(.dispose) {
    display: block;
    position: fixed;
    background-color: rgb(162, 202, 45);
    top: 24%;
    right: 4.8%;
    z-index: 9999;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  }
} */
@media (min-width: 300px) and (max-width: 1023px) {
  #side-nav-menu-wrapper button.open-side-nav-menu:not(.dispose) {
    display: block;
    position: fixed;
    background-color: rgb(162, 202, 45);
    top: 28%;
    right: 6.5%;
    z-index: 9999;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  }

  body:has(#side-nav-menu-backdrop.open) {
    overflow: hidden;
  }

  #side-nav-menu-backdrop {
    position: fixed;
    bottom: 0;
    top: 0;
    left: 100%;
    right: 0;
    z-index: 9999;
    width: 100vh;
    transition: all 0.3s ease;
    height: 100vh;
    overflow: hidden;
    overflow-y: auto;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px,
      rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
      rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
    background-color: rgba(0, 0, 0, 0.6);
    margin: auto;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    display: none;
  }

  #side-nav-menu {
    width: unset;
    max-height: 68%;
    min-width: 80%;
    overflow: auto;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px,
      rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
      rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
    border: 10px solid rgb(227, 227, 227);
    margin: 2rem;
  }

  #side-nav-menu-backdrop.open {
    left: 0;
  }

  #side-nav-menu::-webkit-scrollbar {
    width: 0px;
    height: 10px;
  }
  #side-nav-menu::-webkit-scrollbar-thumb {
    background: transparent;
  }
}