:root {
      --background: #1D1D1A;
    --main_text: #F8F9FA;
    --purple: #8C6BB1;
    --sidebar: #252523;
    --sidebar_containers: #313130;
    --secondary_text: #ADB5BD;
    --main_containers: #252523;
    --primary_text: #DDDDDD;  
    --blue: #4477AA;
    --dark_blue: #386594;
    --yellow: #E5B567;
    --green: #5A9F88;
    --orange: #D17A49;
    --pink: #C56C86;
    --purple: #a646a6;
    --cyan: #44abab;
    --lines: #31312F;
    --course_labels: #1E1E1E;
    --red: #A54657;
    --static_primary_text: #252523;
    /* --background: #e9ecef;
    --main_text: #F8F9FA;
    --purple: #DBCDF0;
    --sidebar: #252523;
    --sidebar_containers: #313130;
    --secondary_text: #ADB5BD;
    --main_containers: #F8F9FA;
     */
    /* --blue: #99C1DE; */
    /* --yellow: #FAEDCB; */
    /* --green: #C5DEDD; */
    /* --orange: #F7D9C4; */
    /* --pink: #F2C6DE; */
    
    /* --red: #FFE6E8; */
    /* --purple: #f2c7eb; */
    /* --cyan: #99dede; */
    --lines: #E9ECEF;
    --course_labels: #6C757D;
    --static_sidebar: #252523;
    --static_background:#e9ecef;
    --static_main_containers: #F8F9FA;
    --static_primary_text: #252523;
    --static_blue: #4477AA;
    --static_main_text: #F8F9FA;
    --static_secondary_text: #ADB5BD;
    --static_course_labels: #6C757D;
    --static_red: #A54657;
  }
html, body {
    margin: 0;
    padding: 0;
    font-family: 'Inter';
    background: var(--background);
    
    
}

.topnav{
    overflow: hidden;
    background-color: var(--blue);
}

.nav_container{
    background-color: var(--blue);
    float: right;
    color:var(--main_text);
    overflow: hidden;
    margin: 5px;
    border-radius: 5px;
}
.topnav h1{
    font-size: 20px;
    color:var(--main_text);
    float:left;
    margin: auto 20px;
    padding-top: 7px;
    overflow: hidden;
    /* background-color: red; */
    box-sizing: content-box;
    /* width: 100px; */
    
}
.nav_container a{
    text-align: center;
    padding: 30px 16px;
    color:var(--main_text);
    text-decoration: none;
    font-size: 20px;
}
.nav_container_non a{
    text-align: center;
    padding: 30px 16px;
    color:var(--main_text);
    text-decoration: none;
    cursor: default;
    font-size: 20px;
}
.nav_container_non{
    background-color: var(--blue);
    float: right;
    color:var(--main_text);
    overflow: hidden;
    margin: 5px;
    border-radius: 5px;
}
.nav_container:hover{
    background-color: var(--dark_blue);
}
.nav_container a.hover{
    background-color: #ddd;
}
/* .nav_container a.active{

} */
.pageTitle{
    margin: 20px 30px;
    padding-top: 20px;
}
.tooltip {
    position: relative; 
    cursor: pointer; 
    border-bottom: 1px solid var(--primary_text);
}

.tooltip:hover .tooltiptext {
    visibility: visible;
  }
.tooltip .tooltiptext{
    visibility: hidden;
  /* width: 100px; */
  background-color: var(--static_main_containers);
  color: var(--static_primary_text);
  text-align: center;
  border-radius: 6px;
  padding: 25px 20;

  position: absolute;
  z-index: 1;
}