diff --git a/css/dialog.css b/css/dialog.css
index 313ec29..70d7ff7 100644
--- a/css/dialog.css
+++ b/css/dialog.css
@@ -75,4 +75,4 @@
 	font-weight: bold;
 	font-size: 20px;
 	margin: 0;
-}
\ No newline at end of file
+}
diff --git a/css/general.css b/css/general.css
index eda32ac..27e07e1 100644
--- a/css/general.css
+++ b/css/general.css
@@ -10,4 +10,3 @@
 	user-select: none !important;
 	font-family: 'Roboto';
 }
-
diff --git a/css/graf.css b/css/graf.css
index de6a5a6..d977170 100644
--- a/css/graf.css
+++ b/css/graf.css
@@ -8,4 +8,4 @@
 span {
 	position: relative;
 	z-index: -1;
-}
\ No newline at end of file
+}
diff --git a/css/option-buttons.css b/css/option-buttons.css
index f23168b..2c4ddff 100644
--- a/css/option-buttons.css
+++ b/css/option-buttons.css
@@ -40,4 +40,4 @@
 
 #zoomout.touch {
 	display: none;
-}
\ No newline at end of file
+}
diff --git a/css/search-bar.css b/css/search-bar.css
index 46d121e..48da607 100644
--- a/css/search-bar.css
+++ b/css/search-bar.css
@@ -102,6 +102,8 @@
 	color: black;
 	box-shadow: 0 2px 5px 0 rgba(255, 255, 255, 0.258824), 0 2px 10px 0
 		rgba(255, 255, 255, 0.156863) !important;
+	max-height: 510px;
+  overflow-y: auto;
 }
 
 .autocomplete-item {
@@ -117,7 +119,7 @@
 .autocomplete-year {
 	position: relative;
 	z-index: 120;
-	
+
 	color: #222;
 }
 
@@ -133,4 +135,4 @@
 	#min-dialog {
 		display: block !important;
 	}
-}
\ No newline at end of file
+}
diff --git a/css/styles.css b/css/styles.css
index 29a342a..cb36762 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,304 +1,303 @@
-/* ********** HERE STARTS general.css ****** */
-
-html, body {
-	margin: 0;
-	width: 100%;
-	height: 100%;
-	background-color: #060606;
-	color: white;
-	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-	user-select: none !important;
-	font-family: 'Roboto';
-}
-
-
-/* ********** HERE STARTS graf.css ****** */
-
-#graf {
-	width: 100%;
-	height: 100%;
-}
-
-span {
-	position: relative;
-	z-index: -1;
-}
-
-
-/* ********** HERE STARTS dialog.css ****** */
-
-#dialog {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	width: 300px;
-	height: 100%;
-	background-color: white;
-	color: black;
-	z-index: 120;
-	overflow-y: auto;
-}
-
-#backdrop {
-	display: none;
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background-color: rgba(0, 0, 0, .5);
-	z-index: 110;
-}
-
-#dialog-vertex, #dialog-edge {
-	padding: 8px;
-	user-select: auto;
-}
-
-#dialog h2 {
-	font-weight: bold;
-	font-size: 20px;
-}
-
-#dialog h3 {
-	font-weight: bold;
-	font-size: 16px;
-	margin-bottom: 0;
-}
-
-#quit-dialog, #quit2-dialog {
-	position: absolute;
-	top: 8px;
-	right: 8px;
-}
-
-#min-dialog, #max-dialog {
-	position: absolute;
-	top: 8px;
-	right: 48px;
-}
-
-#min-dialog {
-	display: none;
-}
-
-#summary-dialog {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	width: 100%;
-	height: 100px;
-	background-color: white;
-	color: black;
-	z-index: 120;
-}
-
-#summary-vertex {
-	padding: 8px;
-	user-select: auto;
-}
-
-#summary-dialog h2 {
-	font-weight: bold;
-	font-size: 20px;
-	margin: 0;
-}
-
-/* ********** HERE STARTS search-bar.css ****** */
-#circle-mode {
-	position: absolute;
-	right: 10px;
-	bottom: 210px;
-	z-index: 100;
-}
-
-#settings {
-	position: absolute;
-	right: 10px;
-	bottom: 160px;
-	z-index: 100;
-}
-
-#search {
-	position: absolute;
-	right: 10px;
-	bottom: 110px;
-	z-index: 100;
-}
-
-#zoomin {
-	position: absolute;
-	right: 10px;
-	bottom: 60px;
-	z-index: 100;
-}
-
-#zoomout {
-	position: absolute;
-	right: 10px;
-	bottom: 10px;
-	z-index: 100;
-}
-
-#zoomin.touch {
-	display: none;
-}
-
-#zoomout.touch {
-	display: none;
-}
-
-/* ********** HERE STARTS year-list.css ****** */
-#year-list {
-	padding: 10px;
-	padding-top: 0px;
-	float: right;
-	position:relative;
-	z-index:10;
-	display:none
-}
-
-#year-list-span {
-	position:relative;
-	z-index:10;
-}
-
-
-/* ********** HERE STARTS search-bar.css ****** */
-.md-google-search__metacontainer {
-	position: absolute;
-	top: 10px;
-	height: 48px;
-	width: 100%;
-	z-index: 100;
-}
-
-.md-google-search__container {
-	display: block;
-	margin-left: auto;
-	margin-right: auto;
-	height: 48px;
-	width: Calc(100% - 66px);
-	max-width: 720px;
-	white-space: nowrap;
-}
-
-.md-google-search {
-	height: 48px;
-	background-color: rgba(245, 245, 245, 1);
-	border: 1px solid rgba(0, 0, 0, 0);
-	-webkit-border-radius: 4px;
-	border-radius: 4px;
-	max-width: 720px;
-	position: relative;
-	-webkit-transition: background-color 100ms ease-in, width 100ms ease-out;
-	transition: background-color 100ms ease-in, width 100ms ease-out;
-}
-
-.md-google-search:focus-within {
-	border: 1px solid rgba(0, 0, 0, 0.45);
-	background-color: rgba(255, 255, 255, 1);
-	-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, .5);
-	box-shadow: 0 1px 1px rgba(255, 255, 255, .5);
-}
-
-.md-google-search__search-btn {
-	float: left;
-	background: none;
-	border: none;
-	opacity: .54;
-	outline: none;
-	padding: 0 4px;
-	line-height: 0;
-	color: #212121;
-}
-
-.md-google-search__search-btn svg, .md-google-search__empty-btn svg {
-	padding: 7px;
-	margin: 4px;
-}
-
-.md-google-search__field-container {
-	height: 46px;
-	padding: 0 11px;
-	margin-right: 48px;
-}
-
-.md-google-search__field {
-	border: none;
-	font: normal 16px Roboto, sans-serif;
-	height: 24px;
-	outline: none;
-	padding: 11px 0 11px 16px;
-	width: 100%;
-	background: transparent;
-}
-
-.md-google-search__empty-btn {
-	position: absolute;
-	right: 0;
-	top: 0;
-	background: none;
-	border: none;
-	opacity: .54;
-	outline: none;
-	padding: 0 4px;
-	line-height: 0;
-	color: #212121;
-	cursor: pointer;
-}
-
-/**
-  * Search Box Autocomplete
-  */
-.autocomplete-container {
-	z-index: 110;
-	position: absolute;
-	top: 60px;
-	width: 100%;
-}
-
-.autocomplete-items {
-	display: block;
-	margin-left: auto;
-	margin-right: auto;
-	width: Calc(100% - 66px);
-	max-width: 720px;
-	background-color: white;
-	color: black;
-	box-shadow: 0 2px 5px 0 rgba(255, 255, 255, 0.258824), 0 2px 10px 0
-		rgba(255, 255, 255, 0.156863) !important;
-  max-height: 510px;
-  overflow-y: auto;
-}
-
-.autocomplete-item {
-	font-size: 16px;
-	padding: 12px 14px;
-	cursor: pointer;
-}
-
-.autocomplete-item:hover, .autocomplete-active {
-	background: #eee;
-}
-
-.autocomplete-year {
-	position: relative;
-	z-index: 120;
-	
-	color: #222;
-}
-
-@media ( max-width : 700px) {
-	#dialog {
-		width: Calc(100% - 32px) !important;
-		height: Calc(100% - 32px) !important;
-		margin: 16px;
-	}
-	#backdrop {
-		display: block;
-	}
-	#min-dialog {
-		display: block !important;
-	}
-}
+/* ********** HERE STARTS general.css ****** */
+
+html, body {
+	margin: 0;
+	width: 100%;
+	height: 100%;
+	background-color: #060606;
+	color: white;
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+	user-select: none !important;
+	font-family: 'Roboto';
+}
+/* ********** HERE STARTS graf.css ****** */
+
+#graf {
+	width: 100%;
+	height: 100%;
+}
+
+span {
+	position: relative;
+	z-index: -1;
+}
+/* ********** HERE STARTS dialog.css ****** */
+
+#dialog {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 300px;
+	height: 100%;
+	background-color: white;
+	color: black;
+	z-index: 120;
+	overflow-y: auto;
+}
+
+#backdrop {
+	display: none;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, .5);
+	z-index: 110;
+}
+
+#dialog-vertex, #dialog-edge {
+	padding: 8px;
+	user-select: auto;
+}
+
+#dialog h2 {
+	font-weight: bold;
+	font-size: 20px;
+}
+
+#dialog h3 {
+	font-weight: bold;
+	font-size: 16px;
+	margin-bottom: 0;
+}
+
+#quit-dialog, #quit2-dialog {
+	position: absolute;
+	top: 8px;
+	right: 8px;
+}
+
+#min-dialog, #max-dialog {
+	position: absolute;
+	top: 8px;
+	right: 48px;
+}
+
+#min-dialog {
+	display: none;
+}
+
+#summary-dialog {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 100px;
+	background-color: white;
+	color: black;
+	z-index: 120;
+}
+
+#summary-vertex {
+	padding: 8px;
+	user-select: auto;
+}
+
+#summary-dialog h2 {
+	font-weight: bold;
+	font-size: 20px;
+	margin: 0;
+}
+/* ********** HERE STARTS search-bar.css ****** */
+#circle-mode {
+	position: absolute;
+	right: 10px;
+	bottom: 210px;
+	z-index: 100;
+}
+
+#settings {
+	position: absolute;
+	right: 10px;
+	bottom: 160px;
+	z-index: 100;
+}
+
+#search {
+	position: absolute;
+	right: 10px;
+	bottom: 110px;
+	z-index: 100;
+}
+
+#zoomin {
+	position: absolute;
+	right: 10px;
+	bottom: 60px;
+	z-index: 100;
+}
+
+#zoomout {
+	position: absolute;
+	right: 10px;
+	bottom: 10px;
+	z-index: 100;
+}
+
+#zoomin.touch {
+	display: none;
+}
+
+#zoomout.touch {
+	display: none;
+}
+/* ********** HERE STARTS year-list.css ****** */
+
+#year-list {
+	padding: 16px;
+	padding-top: 0;
+	position:absolute;
+	right: 0;
+	top: 68px;
+	z-index:10;
+	display:none
+}
+
+#year-list-span {
+	position:relative;
+	z-index:10;
+}
+
+.custom-checkbox .mdl-checkbox__box-outline {
+	border: 2px solid rgba(0,0,0,.8)!important;
+	background-color: white!important;
+}
+/* ********** HERE STARTS search-bar.css ****** */
+.md-google-search__metacontainer {
+	position: absolute;
+	top: 10px;
+	height: 48px;
+	width: 100%;
+	z-index: 100;
+}
+
+.md-google-search__container {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	height: 48px;
+	width: Calc(100% - 66px);
+	max-width: 720px;
+	white-space: nowrap;
+}
+
+.md-google-search {
+	height: 48px;
+	background-color: rgba(245, 245, 245, 1);
+	border: 1px solid rgba(0, 0, 0, 0);
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+	max-width: 720px;
+	position: relative;
+	-webkit-transition: background-color 100ms ease-in, width 100ms ease-out;
+	transition: background-color 100ms ease-in, width 100ms ease-out;
+}
+
+.md-google-search:focus-within {
+	border: 1px solid rgba(0, 0, 0, 0.45);
+	background-color: rgba(255, 255, 255, 1);
+	-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, .5);
+	box-shadow: 0 1px 1px rgba(255, 255, 255, .5);
+}
+
+.md-google-search__search-btn {
+	float: left;
+	background: none;
+	border: none;
+	opacity: .54;
+	outline: none;
+	padding: 0 4px;
+	line-height: 0;
+	color: #212121;
+}
+
+.md-google-search__search-btn svg, .md-google-search__empty-btn svg {
+	padding: 7px;
+	margin: 4px;
+}
+
+.md-google-search__field-container {
+	height: 46px;
+	padding: 0 11px;
+	margin-right: 48px;
+}
+
+.md-google-search__field {
+	border: none;
+	font: normal 16px Roboto, sans-serif;
+	height: 24px;
+	outline: none;
+	padding: 11px 0 11px 16px;
+	width: 100%;
+	background: transparent;
+}
+
+.md-google-search__empty-btn {
+	position: absolute;
+	right: 0;
+	top: 0;
+	background: none;
+	border: none;
+	opacity: .54;
+	outline: none;
+	padding: 0 4px;
+	line-height: 0;
+	color: #212121;
+	cursor: pointer;
+}
+
+/**
+  * Search Box Autocomplete
+  */
+.autocomplete-container {
+	z-index: 110;
+	position: absolute;
+	top: 60px;
+	width: 100%;
+}
+
+.autocomplete-items {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	width: Calc(100% - 66px);
+	max-width: 720px;
+	background-color: white;
+	color: black;
+	box-shadow: 0 2px 5px 0 rgba(255, 255, 255, 0.258824), 0 2px 10px 0
+		rgba(255, 255, 255, 0.156863) !important;
+	max-height: 510px;
+  overflow-y: auto;
+}
+
+.autocomplete-item {
+	font-size: 16px;
+	padding: 12px 14px;
+	cursor: pointer;
+}
+
+.autocomplete-item:hover, .autocomplete-active {
+	background: #eee;
+}
+
+.autocomplete-year {
+	position: relative;
+	z-index: 120;
+
+	color: #222;
+}
+
+@media ( max-width : 700px) {
+	#dialog {
+		width: Calc(100% - 32px) !important;
+		height: Calc(100% - 32px) !important;
+		margin: 16px;
+	}
+	#backdrop {
+		display: block;
+	}
+	#min-dialog {
+		display: block !important;
+	}
+}
diff --git a/css/year-list.css b/css/year-list.css
index 45993b2..d30f7d8 100644
--- a/css/year-list.css
+++ b/css/year-list.css
@@ -1,9 +1,11 @@
 /* ********** HERE STARTS year-list.css ****** */
+
 #year-list {
-	padding: 10px;
-	padding-top: 0px;
-	float: right;
-	position:relative;
+	padding: 16px;
+	padding-top: 0;
+	position:absolute;
+	right: 0;
+	top: 68px;
 	z-index:10;
 	display:none
 }
@@ -11,4 +13,9 @@
 #year-list-span {
 	position:relative;
 	z-index:10;
-}
\ No newline at end of file
+}
+
+.custom-checkbox .mdl-checkbox__box-outline {
+	border: 2px solid rgba(0,0,0,.8)!important;
+	background-color: white!important;
+}