Fix DOM problems and styling

.gitignore

@@ -1,2 +1,2 @@
 *~
-\#*
+\#*

css/style.scss

@@ -0,0 +1,246 @@
+.server-info-wrapper {
+	max-width: 100vw;
+}
+
+.table-wrapper {
+	overflow-x: auto;
+}
+
+.server-infos-table {
+	margin-bottom: 25px;
+}
+
+.server-infos-table td:first-child {
+	width: 120px;
+}
+
+.monitoring-wrapper {
+	display: -webkit-flex;
+	display: flex;
+}
+
+.monitoring-wrapper > input {
+	flex: 1 0 auto;
+}
+
+.monitoring-wrapper + .settings-hint {
+	margin-top: 0;
+}
+
+.rambox {
+	height: 10px;
+	width: 10px;
+	background-color: #555;
+}
+
+.swapbox {
+	height: 10px;
+	width: 10px;
+	background-color: #222;
+}
+
+.info {
+	font-weight: bold;
+	color: #777;
+}
+
+.smallinfo {
+	color: #888;
+	font-size: 11px;
+}
+
+.infobox {
+	display: flex;
+	flex-wrap: nowrap;
+	align-items: center;
+
+	border: 1px solid #ddd;
+	padding: 15px;
+	margin: 15px 0;
+	color: #555;
+	background-color: #f9f9f9;
+	border-radius: 6px;
+	box-shadow: 1px 1px 9px 1px #eee;
+}
+
+.diskchart-container {
+	width: 100px;
+	border: 1px black;
+}
+
+@media only screen and (max-width: $breakpoint-mobile){
+	.infobox {
+		display: block;
+		text-align: center;
+	}
+	.diskchart-container {
+		margin: 0 auto;
+	}
+}
+
+.diskinfo-container {
+	flex: 1 0 auto;
+}
+
+.infobox h2 {
+	color: #555;
+	font-size: 18px;
+	font-weight: bold;
+	padding: 5px;
+	margin: 0;
+}
+
+.infobox h3 {
+	color: #555;
+	font-size: 22px;
+	font-weight: bold;
+	padding: 5px 0 10px 0;
+	margin: 0;
+}
+
+.infoicon {
+	width: 28px;
+	float: left;
+	padding: 5px;
+}
+
+.chart-container {
+	position: relative;
+	margin: 10px;
+}
+
+.clipboardButton {
+	display: inline-block;
+	position: relative;
+	top: 2px;
+	margin-left: 5px;
+}
+
+/* GRID SYSTEM */
+
+.row {
+	display: -webkit-flex;
+	display: flex;
+	flex: 0 1 auto;
+	flex-direction: row;
+	flex-wrap: wrap;
+	margin-left: -15px;
+	margin-right: -15px;
+}
+
+.col {
+	flex-grow: 1;
+	flex-basis: 0;
+	max-width: 100%;
+	padding-left: 15px;
+	padding-right: 15px;
+}
+
+.col-1 {
+	flex-basis: 8.333%;
+	max-width: 8.333%;
+	min-width: 8.333%;
+}
+
+.col-2 {
+	flex-basis: 16.666%;
+	max-width: 16.666%;
+	min-width: 16.666%;
+}
+
+.col-3 {
+	flex-basis: 25%;
+	max-width: 25%;
+	min-width: 25%;
+}
+
+.col-4 {
+	flex-basis: 33.333%;
+	max-width: 33.333%;
+	min-width: 33.333%;
+}
+
+.col-5 {
+	flex-basis: 41.666%;
+	max-width: 41.666%;
+	min-width: 41.666%;
+}
+
+.col-6 {
+	flex-basis: 50%;
+	max-width: 50%;
+	min-width: 50%;
+}
+
+.col-7 {
+	flex-basis: 58.333%;
+	max-width: 58.333%;
+	min-width: 58.333%;
+}
+
+.col-8 {
+	flex-basis: 66.666%;
+	max-width: 66.666%;
+	min-width: 66.666%;
+}
+
+.col-9 {
+	flex-basis: 75%;
+	max-width: 75%;
+	min-width: 75%;
+}
+
+.col-10 {
+	flex-basis: 83.333%;
+	max-width: 83.333%;
+	min-width: 83.333%;
+}
+
+.col-11 {
+	flex-basis: 91.666%;
+	max-width: 91.666%;
+	min-width: 91.666%;
+}
+
+.col-12 {
+	flex-basis: 100%;
+	max-width: 100%;
+	min-width: 100%;
+}
+
+
+@media only screen and (max-width: 1200px) {
+	.col-xl-6 {
+		flex-basis: 50%;
+		max-width: 50%;
+		min-width: 50%;
+	}
+}
+
+@media only screen and (max-width: 1024px) {
+	.col-l-6 {
+		flex-basis: 50%;
+		max-width: 50%;
+		min-width: 50%;
+	}
+
+	.col-l-12 {
+		flex-basis: 100%;
+		max-width: 100%;
+		min-width: 100%;
+	}
+}
+
+@media only screen and (max-width: $breakpoint-mobile) {
+	.col-m-6 {
+		flex-basis: 50%;
+		max-width: 50%;
+		min-width: 50%;
+	}
+
+	.col-m-12 {
+		flex-basis: 100%;
+		max-width: 100%;
+		min-width: 100%;
+	}
+}