* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.logo-container {
  text-align: center;
}

.topnav {
  margin: 0 auto;
}

@media (min-width: 767px) {
  .logo-container {
    text-align: left;
  }
}
.logo-link {
  display: inline-block;
}

#whole-flex {
  position: absolute;
  flex-direction: column;
  text-align: center;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -10;
}


/* NavBar */

.sidenav {
  max-width: 380px;
  width: 85%;
  overflow: hidden;
  height: 100%;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  background-color: white;
  /* background-color: lightgray; */
  transform-origin: left center;
  transform: translateX(-380px)

}

.sidenavHeader {
  color: white;
  font-weight: bold;
  background-color: var(--mainColor);
  padding: 10px 0 10px 30px;
  font-size: 23px;
}

.sidenavContentHeader {
  margin-top: 5px;
  padding: 15px 0 15px 25px;
  font-size: 20px;
  font-weight: bold;
}

.sidenavContent {
  padding: 15px 0 15px 25px;

}

.sidenavContent:hover {
  background-color: #eaeded;
}

hr {
  height: 1px;
  border:0;
  color:grey;
  background-color: gray;
  margin: 0 auto 0 auto;
}

.sidenavRow, .menu__ul__li {
  /* display: flex; */
  width: 100%;
  justify-content: space-between;
  padding: 15px 25px 15px 25px;
}

.menu__ul.level3 {
  display: none;
}

.sidenavRow:hover, .menu__ul__li:hover {
  background-color: #eaeded;
}

.sidenavRow:hover i {
  color: #111111 !important;
}

#closeBtn {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 390px;
  color: white;
  font-size: 50px;
  cursor: pointer;
  z-index: 75;
  transform: translateY(-5px);
  transition: visibility 0.5s;
}

.sidenav a, .sidenav a:link, .sidenav a:visited, .sidenav a:hover, .sidenav a.active {
  text-decoration: none;
  color: black;
}

/* animation */

@keyframes collapse {
  0% {
      z-index: 100;
      transform: translateX(0px);
  }
  100% {
      transform: translateX(-380px);
  }
}


@keyframes expand {
  0% {
      z-index: 100;
      transform: translateX(-380px);
  }
  100% {
      transform: translateX(0);
  }
}

@keyframes show {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

@keyframes hide {
  0% {
      opacity: 1;
  }
  100% {
      opacity: 0;
  }
}

/* Overlay */

#overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  background-color: rgba(0, 0, 0, 0.7);
}
/* Dropdown     */

.sidenavContainer hr {
  width: 85%;
}


.sidenavRowDropdown {
  display: flex;
  width: 100%;
  justify-content: start;
  align-items: center;
  padding: 15px 25px;
  cursor: pointer;
}

.sidenavRowDropdown:hover {
  background-color: #eaeded;
}

.sidenavRowDropdown:hover i{
  color: #111111 !important;
}

.sidenavContainer {
  display:    none;
  height: 0;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: center top;
}


.menu-item {
  display: block;
  width: 100%;
  position: relative;
}

a.expand-btn::after {
  position: absolute;
  content: "";
  top: 0;
  transform: translateY(50%);
  right: 0;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%230E0E0E' viewBox='0 0 32 32'%3E%3Cpath d='M30.485 7.244L16 21.729 1.515 7.244 0 8.757l16 16 16-16z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 10px 10px;
  background-position: 50%;
  padding: 10px 20px;
  transition: transform 0.3s cubic-bezier(0, 0.52, 0, 1);
  display: inline-block;
  transform: rotate(-90deg);
}

@keyframes expandDropDown {
  0% {
      transform: scaleY(0);
      opacity: 0;
  }
  100% {
      transform: scaleY(1);
      opacity: 1;
  }
}


@keyframes collapseDropDown {
  0% {
      transform: scaleY(1);
      opacity: 1;
  }
  100% {
      transform: scaleY(0);
      opacity: 0;
  }
}

/* Container Part */
#main-container {
  position: absolute;
  width: 100%;
  height:calc(100% - 47px);
  overflow-y: scroll;
}

@keyframes mainAway {
  0% {
      transform: translateX(0)
  }
  100% {
      transform: translateX(-380px)
  }
}


@keyframes mainBack {
  0% {
      transform: translateX(-380px)
  }
  100% {
      transform: translateX(0px)
  }
}


#sub-container {
  position: absolute;
  width: 100%;
  height: calc(100% - 50px);

  overflow-y: scroll;
  background-color: white;
  transform: translateX(-380px);
}


@keyframes subBack {
  0% {
      transform: translateX(380px)
  }
  100% {
      transform: translateX(0px)
  }
}

@keyframes subPush {
  0% {
      transform: translateX(0px)
  }
  100% {
      transform: translateX(380px)
  }
}

#mainMenu {
  margin-top: 5px;
  padding: 15px 0 15px 25px;
  font-weight: bold;
}


#mainMenu:hover {
  background-color: #eaeded;
  cursor: pointer;
}