@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');


body {

  background: rgb(58, 56, 56);
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  color: white;
 
}

.content {


  padding: 3%;
  display: flex;
 
} 

/*CSS for Login*/

@media (max-width: 768px) { 
  
  .box {
    text-align: center;
    padding: 5%;
    width: 100%;
    background-color: rgb(80, 80, 80);
    border-radius: 1vw;
    box-shadow: 5px 5px 5px rgba(80, 80, 80, 0.477) ;
  }
  

} 

@media (min-width: 768px) { 

  .box {
    text-align: center;
    padding: 5%;
    width: 50%;
    background-color: rgb(80, 80, 80);
    border-radius: 1vw;
    box-shadow: 5px 5px 5px rgba(80, 80, 80, 0.477) ;
  }


} 



.box form {

  margin: 4%;
  
}

.box form input {

  border-style: hidden;
  border-radius: 1vw;
  transition: all 0.2s ease 0s;
  padding-left: 1vw;

}

.box form input:hover {

  box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.477) ;

}


.box form input:focus {

  box-shadow: 5px 5px 5px rgba(0, 174, 255, 0.477) ;

}


.box form .inp {

  margin: 2%;
}

.box button {

  border-style:solid;
  border-radius: 1vw;
  border-color: white;
  padding: 1%;
  margin: 3%;
  transition: all 0.2s ease 0s;
  color: white;
  background-color: transparent;
}

.box button:hover {

  background: white;
  color: black;
  border-color: transparent;
  box-shadow: 2px 2px 5px rgba(0, 174, 255, 0.477);

}

.box button:active {

  border-style:solid;
  border-radius: 1vw;
  padding: 1%;
  margin: 3%;
  transition: all 0.2s ease 0s;
  color: white;
  background-color: transparent;
  border-color: white;
  box-shadow: none;
}



#remindus:hover {
  box-shadow: 1px 1px 5px rgba(0, 174, 255, 0.477);

}


#info {

  color: #ff0012;
  font-size: larger;
 
}

/*CSS for Dashboard*/


.header {
  
  justify-content: space-between;
  text-align: center;
  margin: 0%;
  font-family: 'Barlow', sans-serif;
  --bs-gutter-x: 0rem;
}

.header p {

  cursor: pointer;

}


.viewbar {

  display: block !important;

}

.edropdown-content a {
  display: block;
  color: white;
  padding: 4%;
  text-decoration: none;
  transition: all 0.1s ease 0s;
}



.edropdown-content .logout {

  color: red;

}

.edropdown-content .logout:hover {
  color: white;
  background-color: red;
}

.edropdown-content a:hover {
  color: black;
  background-color: white;
}


.edropdown-content p {
  display: block;
  color: white;
  padding: 4%;
  text-decoration: none;
  transition: all 0.1s ease 0s;
}

.edropdown-content p:hover {
  color: black;
  background-color: white;
}




@media (min-width: 992px) { 

    
  .edropdown {
    display: inline-block;
    position: relative;
    --bs-gutter-x: 0rem;
    
  }
  .edropdown-content {

    display: none;
    background-color: rgb(80, 80, 80);
    position: absolute;
    width: 90%;
    right: 5%;
    padding: 0%;
    bottom: 15%;
    overflow: auto;
    border-radius: 1vw;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
    transition: all 0.1s ease 0s;
    margin-left: 1%;

}
  
  .logo {

    content: url("/images/minlogo.png");
    transition: all 0.3s ease 0s;

  }
  

  .sidebar:hover .logo {
    content: url("/images/logo.png");
    transform: scale(0.85);
   
  }
  
  .sidebar {
      
      
      width: 5%;
      position: fixed;
      height: 100%;
      background-color: rgb(32, 32, 32);
      transition: all 0.4s ease 0s;
      
  }
  
  .sidebar:hover {
  
    width: 15%;

  
  }

  .d-content {
   

    margin-left: 5%;
    position: fixed;
    height: 100%;
    width: 100%;
    padding: 3%;
    padding-right: 8%;
    transition: all 0.4s ease 0s;
    overflow:scroll;
    overflow-x:hidden;
 
}

  .sidecontent{
    
      
    margin-left: 15% !important;
    padding-right: 15%;

  }
  
  .sidebar-content {

    
    height: 83%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
   
  }

  .middle {

    display: flex;
    justify-content: start;
    flex-direction: column;
    gap: 1vw;
  }

  .sidebar:hover .middle{
    gap: 0;
  }

  .sidebar:hover .middle {
    width: 100%;
   
  }

  .sidebar:hover .sidebar-content {

    height: 80%;
  }

  .sidebar:hover .sidebar-footer{

    text-align: unset;
    padding-top: 5%;
    padding-left: 10%;
  }

  .sidebar-footer {

    height: 10%;
    text-align: center;
    
  }

  .sidebar-footer:hover {

    background-color: white;
    color: black;
    cursor: pointer;
    height: 10%;
   
    
  }

  .sidebar-image {
    border-radius: 100%;
     vertical-align: center;
     align-items: center;
     align-self: center;
     transform: scale(1.7);
  }

  .sidebar:hover .sidebar-image {

    display: unset;
    transform: scale(1);
  }


  .sidebar-text {

    display: none;
    -moz-user-select: none; /* Firefox */
    -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
    -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
    user-select: none; /* Propriété standard */
    margin-left: 2%;
    text-align: center;
  }

  .username {
    
 
    display: none;
    -moz-user-select: none; /* Firefox */
    -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
    -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
    user-select: none; /* Propriété standard */
    
  }

  .account {

    display: flex;
    justify-content: center;
    vertical-align: center;
  
  }



  .sidebar:hover .username {

    display: unset;
    
    
    
  }

  .sidebar:hover .sidebar-text {

    display: unset;
  }


  .sidebar-item {

    transition: all 0.2s ease 0s;
    padding: 10%;
    width: 100%;

  }

  .sidebar-item:hover {

    background-color: white;
    color: black;
    cursor: pointer;
    
    
  }



  


} 

@media (max-width: 992px) { 

  
  .edropdown {
    display: inline-block;
    position: relative;
    --bs-gutter-x: 0rem;
    
  }
  .edropdown-content {
    display: none;
    background-color: rgb(80, 80, 80);
    position: absolute;
    width: 90%;
    right: 5%;
    padding: 0%;
    overflow: auto;
    border-radius: 1vw;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
    transition: all 0.1s ease 0s;
    margin-left: 1%;

  }

  .sidebar {
      
    font-size: 7vw;
    width: 100%;
    background-color: rgb(32, 32, 32);
    transition: all 0.4s ease 0s;
    
  }

  .sidebar-content {

    text-align: center;
    height: 80%;
   
  }



  .sidebar-footer {

    height: 5%;
    text-align: unset;
    padding-top: 5%;
    padding-left: 30%;
    
  }

  .sidebar-footer:hover {

    background-color: white;
    color: black;
    cursor: pointer;
    height: 10%;
   
    
  }

  .sidebar-image {
    border-radius: 100%;
   
  }

  


  .sidebar-text {

    -moz-user-select: none; /* Firefox */
    -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
    -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
    user-select: none; /* Propriété standard */
  }
  


  .sidebar-item {

    transition: all 0.2s ease 0s;
    padding: 5%;
    margin-top: 5%;
    margin-bottom: 5%;
  }

  .sidebar-item:hover {

    background-color: white;
    color: black;
    cursor: pointer;
   
    
  }

}