*{
    scrollbar-width: none;         /* Firefox */
  -ms-overflow-style: none;      /* IE 10+ */
}


*::-webkit-scrollbar {
  display: none;                 /* Chrome, Safari, Opera */
}


ul {
  list-style: none;
}

.text-icon-container span{
   margin: 0 .8em ;
}

.container{
 display: flex;
 flex-direction: row;
 height: 100vh;
 position: relative;
}

h2{
  line-height: 1;
}

aside{
  width: 250px;
  height: 100%;
  padding: .5em;
  padding-right: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--dark-blue);
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
  overflow-y: scroll; 
  overflow-x: hidden;
  transition: all 0.3s ease-in-out;
}

.pop-upcontainer{
  position: absolute;
 background: rgba(0, 0, 0, 0.5);;
  width: 100%;
  z-index: 1000;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
}

.pop-upcontainer.close{
  display: none;
}
.pop-upcontainer.show{
  display: flex;
}

header{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.profile-pic-container{
  width: 60px;
  border: 1px solid var(--dark-blue);
  aspect-ratio: 1;
  border-radius: 50%;
  margin-right: 2em;
}


.user-info-container >*{
 margin: 0;
}

.user-info-container p{
  font-size: 1.1rem;
}



ul{
  min-width: 230px;
}

aside svg{
  fill: var(--white);
}

aside ul li{
  margin: .5em 0;
  list-style: none;
  background-color: transparent;
}

.around-campus-logo-container{
  width: 40px;
  border-radius: 50%;

}

.around-campus-logo-container.hidden{
    position: absolute;
  transform: translateY(-150%);  
  transition: all 0.3s ease-in-out;
}

.active{
  background-color: var(--light-blue);
  color: var(--dark-blue);
}

.active-svg{
   fill: var(--dark-blue);
}

aside a{
  color: var(--white);
  border-top-left-radius: .5rem;
  border-bottom-left-radius: .5rem;
}
aside a:hover{
  background-color: var(--light-blue);
  color: var(--white);
}
aside hr{
  margin: 1em 0;
}


.sidebar-toggle-button{
  padding: 1em; 
  background-color: transparent;
  box-shadow: none;
  flex: 1;
  display: flex;
  justify-content: end;
}

.sidebar-toggle-button.rotate svg{
  transform: rotate(180deg);
  transition: all 0.3s ease-in-out;
}
.sidebar-toggle-button:hover{
  background-color: transparent;
}

.sidebar-toggle-button:hover svg{
  transform: scale(1.2);
}





aside.collapsed {
  width: 55px;
}

main{
 flex: 1;
 padding: .3em;
 position: relative;
 overflow: hidden;
 overflow-y: scroll;
}

.add-listings-container{
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  padding-bottom: 1em;
  padding-inline: 2em;
  z-index: 10;
}

.add-listing-btn{
  border-radius: 50%;
  height: 70px;
  width: 70px;
  background-color: var(--dark-blue);
}

.add-listing-btn svg{
  fill: var(--white);
}
.chart-with-us-btn{
  border-radius: 50%;
  height: 60px;
  width: 60px;
  background-color: var(--dark-blue);
  outline: 2px solid var(--dark-blue);
  border: 2px solid var(--white);
}

.dashboard-tabs ul{
  width: 100%;
  max-width: 800px;
  align-items: center;
}




.dashboard-tabs ul a{
  border-bottom: 2px solid  transparent;
  padding: 0;
}
.dashboard-tabs ul a:hover{
  border-bottom: 2px solid  var(--light-blue);
  padding: 0;
}
.dashboard-tabs{
  margin-top: 2em;
  flex: 1;
}
.tab-content-wrapper{
  width: 100%;
   flex: 1;
   display: flex;
  padding: 2em;
   position: relative;
  overflow: hidden;
}

.tab-content{
  width: 100%;
  position: absolute;
  top: 0;
  left: 100%; /* Hide offscreen to the right */
  opacity: 0;
  transition: all .3s ease-in-out;
  height: 100%;
  background-color: var(--white);
  overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  display: grid;
  place-items: center;
}

.tab-content::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.tab-content figure{
  width: 320px;
}

.active-tab{
  left: 0;
  opacity: 1;
  z-index: 2;
}
.active-link{
  color: var(--dark-blue);
}

.edith-profile-form{
  padding: 1em 1.5em;
  background-color: var(--white);
  border-radius: 1rem;
  position: relative;
}

.close-reset-form-btn{
  position: absolute;
  top: 0.2em;
  right: 0.2em;
  width: 60px;
  height: 60px;
   border-radius: 50%;
}
.edith-profile-form-btn{
  width: 100%;
 
}

/* classses of  error element to hide them */
.error{
transform: translateY(-10px); 
 transition: all 350ms ease;
 width: 100%;
 opacity: 0;
 visibility: hidden;
}
.username-error.show,
.fullname-error.show,
.phone-number-error.show{
    transform: translateY(0px); 
 transition: all 350ms ease;
 width: 100%;
 opacity: 1;
 visibility: visible;
}



@media(max-width: 700px){
  .container{
    flex-direction: column-reverse;
  }

  aside{
    width: 100%;
    flex-direction: row;
    height: 70px;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  aside>*{
    width: 100%;
    padding: 0 .5em;
  }

  aside ul{
    display: flex;
    justify-content: space-evenly;
    margin: 0;
    min-width: 350px;
  }
   aside ul hr{
    display: none;
   }

  aside ul a{
    display: flex;
    flex-direction: column;
    border-radius: .5em;
    padding: 0;
  }

  .toggle-btn-container{
    border: 2px solid red;
    display: none;
  }
}

@media(max-width: 500px){
  aside{
    overflow-x: scroll;
  }
   aside ul a span{
    display: none;
   }

   aside ul a {
     border-radius: none;
     margin: 0;
     width: 50px;
     aspect-ratio: 1;
     padding: .5em;
   }

   ul a svg{
      transform: scale(1.5);
   }
}