

/*
 _____                _           _ 
/  __ \              | |         | |
| /  \/_ __ ___  __ _| |_ ___  __| |
| |   | '__/ _ \/ _` | __/ _ \/ _` |
| \__/\ | |  __/ (_| | ||  __/ (_| |
 \____/_|  \___|\__,_|\__\___|\__,_|
                                    
                                    
 _                                  
| |                                 
| |__  _   _                        
| '_ \| | | |                       
| |_) | |_| |                       
|_.__/ \__, |                       
        __/ |                       
       |___/                        
  ___                               
 / _ \                              
/ /_\ \_      ____ _ _ __           
|  _  \ \ /\ / / _` | '_ \          
| | | |\ V  V / (_| | | | |         
\_| |_/ \_/\_/ \__,_|_| |_|         
                                    
                                                                                                            
*/
        body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.navbar {
    display: flex;
    justify-content: space-between;
    background-color: #a6bbf7;
    padding: 10px 2px;
    align-items: center;
    
}

.nav-left,
.nav-right {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.nav-left li,
.nav-right li {
    margin: 0 15px;
}

.nav-left a,
.nav-right a {
    color: black    ;
    text-decoration: none;
    font-size: 18px;
    display: flex;
    align-items: center;
}

.nav-left a:hover,
.nav-right a:hover {
    color: #ddd;
}

.nav-left i,
.nav-right i {
    margin-right: 8px;
}

.nav-right i.fa-sign-out-alt {
    color: red;
}


.tooltip {
  position: relative;
  display: inline-block;

}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color:rgb(124, 117, 117);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}