*{
	  margin: 0px;
      }
  
  
   body{
	  font-family: 'Nunito Sans',Arial,Helvetica,sans-serif;
      word-break: break-word;
      font-size: 18px;
      line-height: 28px;
	  overflow-x: hidden;
   }	
	
	#leftBarAccess {
	    display: none;
	}
	
	#searchBarAccess {
	    display: none;
	}
	
	
	#small-screen-logo {
	    display: none;
	}
	
	
    .header-top {
	  display: flex;
      flex-direction: row;	  	  
	  height: 80px;
	  position: sticky;
	  top: 0px;
	  margin: 0px;
	  background-color: #000033;
	  z-index: 9;
	}
	
	.header-top > .main-logo{	  
	  width: 20%;
      padding: 9px 8px -1px 22px;
	}
	
	
	 .headerIcons path {
        fill: #fff; 
    }

	span#closeSearch {
        display: none;
	}
	
.search {
    
    margin: 2px auto;
    width: 25%;
    height: 29px;
    position: absolute;
    right: 263px;
    top: 12px;
	font-size: 14px;
}
	
#search_text_input {    
	 border: solid thin #f3f3f3;
	 float: left;
	 width: 110px;
	 max-width: 180px;
     height: 27px;	 
}

#search_text_input:focus {
	outline: none;
}
 	
 .button_holder{ 	
     float: left;
	 border: solid thin #f3f3f3;
	 width: 54px;
	 height: 27px;
	 border-top-right-radius: 3px;
	 border-bottom-right-radius: 3px;
	 padding: 0.5px 1px;
	 cursor: pointer;
	 background-color: #f2f2f2;
 }	
 
 .button_holder img{ 
    position: relative;
    left: 14px;
    height: 20px;
    bottom: 2px;
  }
	
 .header-top > .top-links{
	  width: 80%;
 }
	
	.mobile_menu {
	    display: none;
	}
	
	
 .mobileMenuDiv {
	        //display: none;
	    }

	
	.top-links a{	 
      color: #fff;
      padding: 6px;
      position: relative;
      top: 43px;
      left: 70px;
      margin-right: 5px;
      text-decoration: none;
      font-size: 17px;
	}
	
	.header-bottom{
	  display: flex;
      flex-direction: row;	
      height: 58px;
      background-color: #0066cc;  
      /* border: solid thin wheat;	 */  
	}
	
	
	.header-bottom > .bottom-links{	
	  
	  width: 100%;
      border: solid thin transparent;
      z-index: 2;	
      margin: 0px auto;	  
	  position: relative;
	}
	
	.header-bottom > .loginlogout{	  	  
	  width: 30%;
      padding: 9px 8px 4px 22px;	  
      margin: auto;
      text-align: center;
	}
	
	.bottom-links h2{
      color: #fff;
      position: relative;
      left: 76px;
      top: 5px;      
	  font-family: Arial, Helvetica, sans-serif;
	  font-size: 21px;
	  width: 80%;
      
   }
   
	.bottom-links h6{
      color: #fff;
      position: relative;
      left: 113px;
      top: 1px;      
	  font-family: Arial, Helvetica, sans-serif;
	  font-size: 16px;
	  width: 80%;
      
   }
   
   .bottom-links span{
      color: #fff;
      position: relative;
	  display: initial;
	  height: 100%;
      font-size: 15px;
	  font-family: Arial, Helvetica, sans-serif;
	  /* border: solid thin transparent; */
	    
   }
   
   #closeMobileheader {
       
       display: none;
   }
   
   
   .mobile-header {
       display: none;
   }
   
   
    .loggen-in-nav{
	  /*border: solid thin red; */
      position: relative;
      top: 18px;
	  color: #fff;
	  margin: 0px 11px;	 
      cursor: pointer;	
	  left: 115px;
	  font-size: 14px;
    }
	
	
   .loggen-in-nav:hover {
	   border-bottom: solid 2px #000033;
	   //border: solid 2px red;
	   text-decoration: none;
	   color: #fff;
	   padding-bottom: 4px;
   }
   
   
	
	.loginlogout{
	  color: #fff;
      font-family: Arial, Helvetica, sans-serif;
      width: 200px;
      position: relative;
      right: -28px;
      bottom: -18px;
	}
	
	.loginlogout a {
	  position: relative;
      left: 10px;
      top: 5px;
	  color: #fff;
	  margin-right: 16px;
	  font-size: 16px;
	  text-decoration: none;
	}
	



  .logged-out{
	   top: 0px;
       position: relative;
       right: 0px;
       //color: #333;
       color: #f1f1f1;
	   padding:  16px 6px;
	   font-family: Arial, Helvetica, sans-serif;
	   //border: solid thin white;
  }
	
	
 a.logged-out {
	border: solid thin #007bff;
    position: relative;
    top: 204px;
    margin: 2px 1px;
    width: 98%;
    display: inline-block;
    text-align: center;
    padding: 6px 1px;
    border-radius: 5px;
    background-color: #007bff;
	color: #000033;
	
 }
 
 a.logged-out:hover {
	  color: #000033; 
	  text-decoration:  none;
	  
 }	
	

.loggedin-firstname{
	border: solid thin transparent;
	position: relative;
    top: 16px;
    left: 450px;
   	font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
	color: #fff;
	padding: 2px 0px 17px 2px;
	cursor: pointer;
	
}	


.loggedin-firstname img{
	transition: transform 0.9s ease-in-out;
	//transform: rotate(0deg);
	
}


	
/* drop down logout div speed  */



.profile-space{
	border: solid thin white;
    /* position: absolute; */
    position: fixed;
    top: 120px;	    
	
	margin-right: 80px; /* Center the element horizontally */
    opacity: 0; /* Start with opacity 0 to make it gradually appear */
    animation: slideInFromTop 2s ease-in-out forwards; /* Adjust the duration for a slower slide-in */       
	
   	font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
	color: #fff;
	padding: 2px 0px 17px 2px;
	cursor: pointer;	
	background-color: #000033;	
	right: 100px;
	z-index: 1;
	display: none;
	width: 184px;
	height: 330px;
	border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
	
}		
	
.profile-space:hover{
	display: block; 
}

	
 @keyframes slideInFromTop {
            to {
                top: 23%; 
                opacity: 1; 
            }
        }
		
		
.search_results {
	background-color: #fff;
    border: 1px solid #DADADA;
    border-bottom: none;
    border-top: none;
    margin-top: 30px;
	width: 234px;
}

.search_results_footer{
	padding: 7px 4px 0px 4px;
    height: 30px;
    border: 1px solid #DADADA;
    border-top: none;
    background-color: #20AAE5;
    text-align: center;
	width: 234px;
	margin-top: 0px;
}

.search_results_footer a {
	color: #fff;
}

.search_result {
	padding: 10px;
    height: 117px;
}

.result_profile_pic a img{
	height: 62px;
}


.searchPageFriendButtons {
	float: right;
}

.searchPageFriendButtons input[type="submit"] {
	border: none;
    padding: 7px 12px;
    border-radius: 5px;
    color: #fff;
}

.result_profile_pic {
	float: left;
    margin-right: 10px;
}

#search_hr {
	margin-bottom: 0px;
}
	


  .loggedin-profile-pic ul {
  	color: #fff;
      list-style: none;
      font-size: 12px;
      padding: 1px 2px 1px 6px;
      position: relative;
      top: 11px;
  }

  .dropdownSettings a{
	  color: #fff;
	  padding: 6px 1px;
  }	
	
  .dropdownSettings a:hover{
	  color: #fff;
	  text-decoration: none;
  }
	
  .invite-friends{
	border: solid thin #9bbbea;
    position: absolute;
    height: 300px;
    width: 615px;
    background-color: aliceblue;
    border-radius: 5px;
	top: 84px;
    z-index: 9;    
    box-shadow: 6px 5px 5px lightblue;
	display: none;
}  
  	

 .invite-friends form{
	vertical-align: middle;
    border: solid thin #ccc;
    width: 70%;
    position: relative;
    padding: 56px 20px;
    margin: 10% auto;
    border-radius: 5px;	
	background-color: #eff6f9;
  }	
	
 .invite-friends form:hover{
	box-shadow: 5px 5px 12px lightblue;
		
	}
	
	
 .invite-friends form input#email{
	margin-right: -6px;
 }

span.closeInvite{
    color: #000;
    cursor: pointer;
    font-size: 20px;
    margin: 2px 6px;
    position: absolute;
    right: 8px;
    top: 4px;
 }
 
 span.closeInvite:hover{	
     color: red;
 
 }
	




 
 /* Styles for desktops  Larger screens (Monitors) */
 
  @media only screen and (min-width: 1366px) {
    span.loggedin-firstname {
        /*
        left: 540px; 
        border: solid thin transparent; */
        
        left: 83%;
        border: solid thin transparent;
        position: absolute;
    }
    
 .search {
    right: 236px;
    border: solid thin transparent;
    margin-right: 71px;
   }
    
    
    .profile-space {
		 right: 41px;
		 margin-top: 0px;
		 
	  }
    
    
}



 /* Large screens  ********/
 @media only screen and (min-width: 1025px ) and (max-width: 1290px ){
 
 
 	  .search {
		   
		   border: solid thin transparent;
		   width: 24%;
		   right: 210px; 		   
	  }
	  
	 #search_text_input {
		  width: 120px;		  
		  
	 }
	 
	   .loggedin-firstname {        
        right: 133px;
		border: solid thin transparent;
    }
    
    
    
    .bottom-links span {    
       position: relative;	
       margin-right: 27px;	   
		
        }
	 
	 
	 .profile-space {
		 right: 44px;
		 margin-top: 11px;
		 border: solid thin transparent;
		 
	  }
	
	
	  #unread_message.notification_badge {
		 /* left:-21px; */
		 left: 90px;         
	  }	
	
	  #unread_requests.notification_badge {
		 left: 94px;
         
	  }
	
	  #unread_notification.notification_badge {
		 /* left:-21px; */
		 left: 89px;
         z-index: ;
	  }
	  
	.search_results {
	   width: 234px;
	}
	.search_results_footer {
		width: 234px;
	}
	
 }	
 
 

   /* Styles for laptops */
   
  @media only screen and (min-width: 769px) and (max-width: 1024px) {  
    
    		
		
		#large-screen-logo {
		    display: block;
		    left: -7px;
            position: relative;
		}
		
		#small-screen-logo {
		    display: none;
		}
		
		
    .index-learningstyleD {
        top: 442px;
        position: static;
     }
    
    .loggedin-firstname {        
       /* right: 133px; */
       left: 637px;
		border: solid thin transparent;
    }
	 
	.loggedin-firstname {
		  left: 51%; 
		 border: solid thin transparent;
	 }
	  
	 
	  .profile-space {
		 right: -10%;
		 border: solid thin transparent;
		 margin-top: 41px;
		 
	  }

	 
	 .loggen-in-nav {
         left: 11px;
         font-size: 11px;
	 }
	 
   .notification_badge {
    left: -15px;		 
  } 
	 
  span#unread_notification.notification_badge {    
    left: -15px;    
  }
  	 
  span#unread_message.notification_badge {    
    left: -14px;    
  }
  span#unread_requests.notification_badge {
	 left: -14px; 
  }
  
  .search {
	right: 22%; 
	width: 236px;
	//border: solid thin red;
  }

}

  
 
  /* Styles for tablets */
  
  @media only screen and (min-width: 481px) and (max-width: 768px) {
   
	   
 
        .header-top {
			width: 100%;
			z-index: 2;
		}
		
		#large-screen-logo {
		    display: none;
		}
		
		#small-screen-logo {
		    display: block;
		}
		
		.header-top > .top-links {
		   width: 57%;
           border: solid 1px transparent;
           height: 100%;
           position: absolute;
           top: 0px;
           left: 173px;
		    
		}
		
		
		.top-links a {
		   padding: 0px;
		   font-size: 10px; 
		   margin-right: 5px;
		   position: relative;
           top: 35px;
		    left: 10px;
		}
		
		
		.headerIcons{
		   position: absolute;
           top: -23px;
           left: inherit;
		}
		
		
		span#small-screen-logo {
         position: absolute;
          left: -8px;
        }
		
  		
	  .mobile_menu {
	      display: block;
	      position: absolute;
          right: 33px;
          top: 35px;
          cursor: pointer;
	    }
		
		
	  .header-bottom {
	    height: 70px;
        z-index: 1;
        background-color: rgba(0, 102, 204, 0.9);
        border: solid thin transparent;
        position: relative;
	}
   
   
     .header-bottom > .bottom-links {
        top: 21px;
        width: 75%;
        position: absolute;
        display: flex;
        flex-direction: column;
        right: 0px;
        border: solid thin transparent;
       // border: solid thin red;
        
    }
    
    
  .mobileMenuDiv {
    display: none;
    border: solid thin #f2f2f291;
    width: 400px;
    height: 500px;
    background-color: #0000ffd9;
    top: 79px;
    position: fixed;
    z-index: 3;
    right: 0px;
    border-top-left-radius: 3px;
  }
  
   .loggen-in-nav {
       margin: 7px 9px
       font-size: 12px;
       left: 0px;
   }
   
   .profile-space {
        display: block;
        border: solid thin #f7f1f14a;
        position: fixed;
        right: -82px;
        width: 375px;
        background-color: #1852dee8;
        margin-top: -17px;
        height: 850px;
        z-index: 1;
    }
    
    a.logged-out {
        width: 28%; 
        padding: 0px 0px;    
        background-color: transparent;
        border: solid thin #f3f3f3;
        color: #f3f3f3;
    }
   
   .loggedin-profile-pic ul {
       font-size: 15px;
       top: 55px;
       line-height: 3em;
   }
   
   .search {
        border: solid thin transparent;
        margin: 2px auto;
        width: 70%;
        top: 14px;
        z-index: 2;
        position: absolute;
        left: 220px;
        display: none;
 }
   
   span.loggedin-firstname {
        
        display: none;
    }
 
     .bottom-links h2 {
        left: 1px;
        border: solid thin transparent;
        font-size: 13px;
        max-width: 100%;
        z-index:0;
     }
   
     .bottom-links h6 {
        left: 3px;
        border: solid thin transparent;
        font-size: 14px;
        max-width: 100%;
     }
   
 
   
   /********* hide loginlogout div**********/
    .header-bottom > .loginlogout {
      visibility: hidden;
      border: solid thin transparent;
      position: absolute;
      width: 27%;
      font-size: 16px;
      text-align: left;
      right: 1px;
      height: 59px;
      padding-top: 13px;
    }
    
    
    .loginlogout {
       color: #fff;
       border: solid 1px #000;
       position: static;
       height: 90px;
       width: 52px;
       line-height: 2em;
       font-size: 16px;
       margin-top: 16px;
   }
    
    
     
    .loginlogout a {
      position: relative;
      left: 3px;
      font-size: 12px;
      margin: 0 2px;
    
    } 
     
     
    #closeMobileheader {
    display: block;
    font-size: 45px;
    position: absolute;
    top: 24px;
    right: 29px;
    color: #f2f2f2;
    cursor: pointer;
    
  }
     
    #closeMobileheader:hover {
         color: red;
     }
   
   .mobile-header {
        display: block;
        border: solid thin red;
        margin: 0px auto  10px auto;
        height: 70px;
    }
           
 #leftBarAccess {
      //border: solid thin #f9f9fb;
      position: absolute;
      top: 33px;
      left: 8px;
      //background-color: #000033;
      padding: 0px 0px 3px 0px;
      border-radius: 3px;
      display: block;
    }
    
 .subjects-left-bar {
       display:  none; 
        width: 65%;
    }
    
    #searchBarAccess {
        border: solid thin transparent;
        position: absolute;
        left: 40px;
        bottom: 4px;
        display: block;
    }
    
    
    .headerLinkIcons {
        top: -18px;
        position: absolute;
        left: 5px;
        color: #000033;
    }
    
    i.fas.fa-share.headerLinkIcons {
        font-size: 15px;
        left: 13px;
        text-shadow: 1px 1px 0 #FFFFFF, -1px 1px 0 #FFFFFF, 1px -1px 0 #FFFFFF, -1px -1px 0 #FFFFFF;
    }
    
    
    
   
    span#unread_notification.notification_badge {
        left: -24px;
        top: 3px;
        font-size: 12px;
        height: initial;
        
    }
    
    
    #unread_message.notification_badge {
        font-size: 12px;
        left: -24px;
        top: 3px;
    }
    
    span span#unread_requests.notification_badge {
        position: absolute;
        font-size: 12px;
        left: 346px;
        top: 10px;
        height: initial;
    }
    
    
}


 
 

   /*  mobile phones */
   
   @media only screen and (max-width: 480px) {
     .header-top {
			
			width: 100%;
			z-index: 2;
		}
				
		
		#large-screen-logo {
		    display: none;
		}
		
		#small-screen-logo {
		    display: block;
		}
	
		
		.header-top > .top-links {
		   width: 57%;
           border: solid 1px transparent;
           height: 100%;
           position: absolute;
           top: 0px;
           left: 124px;
		    
		}
		
		
		.top-links a {
		   padding: 0px;
		   font-size: 10px; 
		   margin-right: 5px;
		   position: relative;
           top: 35px;
		    left: 10px;
		}
		
		
		.headerIcons{
		   position: absolute;
           top: -23px;
           left: inherit;
		}
		
		
		span#small-screen-logo {
         position: absolute;
          left: -8px;
        }
		
  		
	  .mobile_menu {
	      display: block;
	      position: absolute;
          right: 10px;
          top: 35px;
          cursor: pointer;
	    }
		
		
	  .header-bottom {
	    height: 70px;
        z-index: 1;
        background-color: rgba(0, 102, 204, 0.9);
        border: solid thin transparent;
        position: relative;
	}
   
   
     .header-bottom > .bottom-links {
        top: 21px;
        width: 98%;
        position: absolute;
        display: flex;
        flex-direction: column;
        right: -90px;
        border: solid thin transparent;
        
    }
    
    
  .mobileMenuDiv {
    display: none;
    border: solid thin #f2f2f291;
    width: 400px;
    height: 500px;
    background-color: #0000ffd9;
    top: 79px;
    position: fixed;
    z-index: 3;
    right: 0px;
    border-top-left-radius: 3px;
  }
  
   .loggen-in-nav {
       margin: 0px 6px;
       font-size: 12px;
       left: 0px;
   }
   
   .profile-space {
        display: block;
        border: solid thin #f7f1f14a;
        position: fixed;
        right: -10px;
        width: 375px;
        background-color: #1852dee8;
        margin-top: -33px;
        height: 850px;
        z-index: 1;
    }
    
    a.logged-out {
        width: 28%; 
        padding: 0px 0px;    
        background-color: transparent;
        border: solid thin #f3f3f3;
        color: #f3f3f3;
    }
   
   .loggedin-profile-pic ul {
       font-size: 15px;
       top: 55px;
       line-height: 3em;
   }
  

   
    .search {
        border: solid thin #f5efef;
        margin: 1px auto;
        width: 100%;
        top: -23px;
        z-index: 2;
        position: absolute;
        left: -81px;
        display: none;
        height: 700px;
        padding: 31px 34px;
        background-color: #0000cdc9;
    }
   
        span#closeSearch {
        display: block;
        font-size: 45px;
        position: absolute;
        top: 24px;
        right: 29px;
        color: #f2f2f2;
        cursor: pointer;
    }
   
   
  
  input#search_text_input {
          width: 178px;
    }
  
   
   span.loggedin-firstname {
        
        display: none;
    }
 
     .bottom-links h2 {
        left: 1px;
        border: solid thin transparent;
        font-size: 15px;
        max-width: 100%;
        z-index:0;
     }
   
    .bottom-links h6 {
        left: 3px;
        border: solid thin transparent;
        font-size: 14px;
        max-width: 100%;
     }
 
 
  h6.signedOutHtags {
    left: -74px;
    top: -13px;
    width: 100%;
   // border: solid thin white;
   }
   
    h2.signedOutHtags {
    left: -74px;
    top: -13px;
    width: 100%;
    //border: solid thin white;
   }
 
 
   
   /********* hide loginlogout div**********/
    .header-bottom > .loginlogout {
      visibility: hidden;
      border: solid thin transparent;
      position: absolute;
      width: 27%;
      font-size: 16px;
      text-align: left;
      right: 1px;
      height: 59px;
      padding-top: 13px;
    }
    
    
    .loginlogout {
       color: #fff;
       border: solid 1px transparent;
       position: static;
       height: 90px;
       width: 52px;
       line-height: 2em;
       font-size: 16px;
       margin-top: 16px;
   }
    
    
     
    .loginlogout a {
      position: relative;
      left: 3px;
      font-size: 12px;
      margin: 0 2px;
    
    } 
     
     
    #closeMobileheader {
    display: block;
    font-size: 45px;
    position: absolute;
    top: 24px;
    right: 29px;
    color: #f2f2f2;
    cursor: pointer;
    
  }
     
    #closeMobileheader:hover {
         color: red;
     }
   
   .mobile-header {
        display: block;
        border: solid thin red;
        margin: 0px auto  10px auto;
        height: 70px;
    }
           

    
    #leftBarAccess {
        position: absolute;
        top: 44px;
        left: 6px;
        //background-color: #000033;
        border-radius: 3px;
        display: block;
        width: 20px;
        height: 19px;
    }
    
    #searchBarAccess {
      border: solid thin transparent;
      position: absolute;
      left: 40px;
      bottom: 4px;
      display: block;
     }
   

    
    
    svg.courseProfile {
        vertical-align: baseline;
        left: -2px;
        position: absolute;
        bottom: 0px;
    }
    
 
  .headerLinkIcons {
      top: -18px;
      position: absolute;
      left: 5px;
      color: #000033;
      
    }
    
    
    span#unread_notification.notification_badge {
        left: -15px;
        //left: -36px;
        top: 3px;
        font-size: 12px;
        
    }
  
    
    .fas.fa-bell {
        font-size:16px;
        /* margin-left: 12px; */
        margin: 0px -3px 0 12px;
    }
    
    #unread_message.notification_badge {
       font-size: 12px;
       left: -24px;
       top: 3px; 
    }
    
    
    span#unread_requests.notification_badge {
      font-size: 12px;
      left: -14px;
      top: 3px;
    }
    
    
    .far.fa-comment-dots {
        margin: 0px 5px 0 2px;
        border: solid thin transparent;
        
    }
    
    .fas.fa-user-friends {
        border: solid thin transparent;
        margin: 0px -8px 0 -10px;
    }
    
    
    
    
    i.fas.fa-share.headerLinkIcons {
      font-size: 15px;
      left: 13px;  
      text-shadow: 
        1px 1px 0 #FFFFFF, 
       -1px 1px 0 #FFFFFF, 
        1px -1px 0 #FFFFFF, 
       -1px -1px 0 #FFFFFF;
        
    }
    
    
     .logginPlus path {
        fill: #fff; 
    }
    
    
   .loggedin-profile-pic.dropdown_data_window {
      top: 51px;
      left: -21px;
    }
    
    #main_column.main_column.column.request {
    top: 49px;
    width: 97%;
    left: 2px;
    }

     button#submit {
       width: 50%;0
     }
     
     
     .invite-friends {
         top: 55px;
         left: -93px;
         height: 260px;
         width: 100%;
     }
      
      .invite-friends form {
          margin: 8% auto;
          width: 100%;
      }

    
    
 }