.activeURL{
  background-color:var(--footer-main-color);
  border-left: 5px solid var(--green-ugly-color);
  box-sizing: border-box;
  font-weight:700;
  padding:20px 30px 20px 25px !important;
}
.activeURL i{
  color:var(--green-ugly-color);
}

a ~ .sub-nav{
  display:none;
}
a.activeURL ~ .sub-nav{
  display:block;
}
.sub-nav a.activeURL{
  border-left:0;
}

.sub-nav{
  margin:0;
  padding:0 0 15px 0;
  border-top:2px solid var(--main-color);
  background-color:var(--footer-main-color);
  border-left:5px solid var(--green-ugly-color);
}
.sub-nav li a{
  padding:5px 30px 5px 53px!important;
}
.header{
  box-shadow:0 2px 6px 2px rgba(0,0,0,0.04);
  padding:15px;
  display:flex;
  justify-content: space-between;
  align-items:center;
}
.header nav{
  display:flex;
  justify-content:flex-end;
}

.header nav .login-info-image{
  width:38px;
  height:38px;
  margin-left:20px;
}
header nav .login-info-image img{
  display:block;
  width:100%;
  height:auto;
  border-radius:50%;
}
header nav .login-info-container{
  display:flex;
  justify-content:space-between;
  align-content:center;
}
header nav .login-info-text{
  display:flex;
  align-items: center;
  border-left:1px solid #EBEBF2;
  position:relative;
}
header nav .login-info-username{
  padding:0 15px 0 20px;
}

#showopt{
  cursor:pointer;
}

.user-sidebar{
  display:none;
  padding: 15px;
  box-shadow:0 2px 6px 2px rgba(0,0,0,0.04);
  border-radius:8px;
  width:120px;
  position:absolute;
  background-color:#fff;
  top:100%;
  left:50%;
  transform:translate(-50%, 0);
  font-size:16px;
}
.user-sidebar a{
  color:#000;
  padding:0 6px;
}
.user-sidebar.short-logout{
  display:block;
}

.user-sidebar button i,
.user-sidebar a > i{
  padding: 0 4px 0 0px;
}

#mobile-menu-close{
  background-color:transparent;
  border:none;
  font-size:36px;
  color:#fff;
}

.mobile-menu-icon .bar1,.mobile-menu-icon .bar2,.mobile-menu-icon .bar3 {
  width: 25px;
  height: 3px;
  background-color: var(--main-color);
  margin: 6px 0;
  transition: 0.4s;
}


.menu-icon::after{
  background-color: var(--main-color);
  box-shadow: 0 7px  var(--main-color), 0 14px  var(--main-color);
  position:absolute;
  top:0;
  left:0;
  display:block;
  width:100%;
  height:2px;
  content:'';
}

.right-side header > button{
  -webkit-appearance:none;
  appearance:none;
  background-color:transparent;
  border:none;
}
.right-side header > button::-ms-expand{
  display:none;
}


.menu-icon{
  position:relative;
  display:inline-block;
  vertical-align: middle;
  width:20px;
  height:16px;
  cursor:pointer;
}



#menu-left .off-canvas-content{
  height:100%;
}

#menu-left{
  z-index:1011;
  position:fixed;
}
#menu-left .button-right{
  display:flex;
  justify-content: flex-end;
  background-color:var(--footer-main-color);
}

.off-canvas.is-open{
  -webkit-transform: translate(0);
  transform: translate(0);
}
@media print, screen and (min-width: 50em){
  #menu-left #footer-left > button,
  .right-side header > button{
    display:none;
  }
  .header{
    justify-content: flex-end;
  }
  #menu-left .button-right{
    display:none;
  }
}