Added auto-closing of popup windows when clicked outside of the element. Fixed positioning of settings bar

css/popup.css

@@ -85,10 +85,9 @@ i {
 }
 
 .settings {
-    position: absolute;
-    bottom: 0px;
-    right: 0px;
+    position: relative;
     display: flex;
+    float: right;
     vertical-align: middle;
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
     transition: 0.3s;
@@ -358,7 +357,7 @@ input[type=number]::-webkit-outer-spin-button {
 .simple-menu-option:hover {
     background-color: rgba(177, 175, 175, 0.200);
     transition-duration: 0.4s;
-    color: #FF9800;
+    /* color: #FF9800; */
 }
 
 .simple-menu-option:focus {

js/popup.js

@@ -2,8 +2,8 @@ var courses;
 
 setCourseList();
 getSemesters();
-var can_remove = true;
 
+var can_remove = true;
 
 function setCourseList() {
 	$("#courseList").empty()
@@ -79,6 +79,19 @@ function formatShortenedCourseName(course) {
 	return `${department} ${number} (${course.unique})`;
 }
 
+$(document).click(function(event) {
+	$target = $(event.target);
+	console.log($target);
+	// If we're not clicking on search button or search popup, and popup is visible, hide it
+	if (!$target.closest('#search').length && !$target.closest('#search-popup').length && $('#search-popup').is(":visible")) {
+		hideSearchPopup();
+	}
+
+	// If we're not clicking on import/export button or imp/exp popup, and popup is visible, hide it
+	if (!$target.closest('#impexp').length && !$target.closest('#import-export-popup').length && $('#import-export-popup').is(":visible")) {
+		hideImportExportPopup();
+	}
+});
 
 $("#clear").click(function () {
 	chrome.storage.sync.set({

popup.html

@@ -19,7 +19,7 @@
 
   <div>
     <ul id="courseList" style="list-style-type: none;padding: 5px;"></ul>
-    <h2 id="empty" style="font-weight: normal;font-size: large;margin: 60px 30px 40px 30px ;text-align: center">
+    <h2 id="empty" style="font-weight: normal;font-size: large;margin: 60px 30px 180px 30px ;text-align: center">
       <div id="main" style="margin-bottom: 5px;">Doesn't Look Like
         Anything
         To Me.