1 files changed, 90 insertions, 4 deletions

diff --git a/web/source/settings/style.css b/web/source/settings/style.css
index d46df683a..7affd8269 100644
--- a/web/source/settings/style.css
+++ b/web/source/settings/style.css
@@ -69,6 +69,10 @@ section {
 			&:last-child {
 				margin-bottom: 0;
 			}
+
+			&.without-border {
+				border-left: 0;
+			}
 		}
 	}
 
@@ -370,7 +374,8 @@ span.form-info {
 
 .checkbox-list {
 	.header, .entry {
-		gap: 1rem;
+		display: grid;
+		gap: 0 1rem;
 	}
 }
 
@@ -629,7 +634,6 @@ span.form-info {
 
 		.checkbox-list {
 			.entry {
-				display: grid;
 				grid-template-columns: auto auto 1fr;
 			}
 
@@ -688,9 +692,14 @@ button.with-padding {
 
 .suspend-import-list {
 	.checkbox-list {
-		.header, .entry {
-			display: grid;
+		.entry {
 			grid-template-columns: auto 25ch auto 1fr;
+			grid-template-rows: auto 1fr;
+
+			p {
+				grid-column: 4;
+				grid-row: 1 / span 2;
+			}
 		}
 	}
 
@@ -704,6 +713,10 @@ button.with-padding {
 			color: $green1;
 		}
 
+		#icon .suggest-changes {
+			color: $orange2;
+		}
+
 		p {
 			align-self: center;
 			margin: 0;
@@ -711,6 +724,75 @@ button.with-padding {
 	}
 }
 
+.import-export {
+	p {
+		margin: 0;
+	}
+
+	.export-file {
+		display: flex;
+		gap: 0.7rem;
+		align-items: center;
+	}
+
+	.button-grid {
+		display: inline-grid;
+		grid-template-columns: auto auto auto;
+		align-self: start;
+		gap: 0.5rem;
+
+		button {
+			width: 100%;
+		}
+	}
+}
+
+.update-hints {
+	background: $list-entry-alternate-bg;
+	border: 0.1rem solid $border-accent;
+	/* border-radius: $br; */
+	padding: 0.5rem;
+	display: flex;
+	flex-direction: column;
+
+	.hints {
+		max-width: 100%;
+		align-self: start;
+		align-items: center;
+		margin: 1rem 0;
+		display: inline-grid;
+		grid-template-columns: auto auto auto auto;
+		gap: 1rem;
+	}
+}
+
+.export-format-table {
+	width: 100%;
+	background: $list-entry-alternate-bg;
+	border-collapse: collapse;
+
+	th, td {
+		border: 0.1rem solid $gray1;
+		padding: 0.3rem;
+	}
+
+	th {
+		background: $list-entry-bg;
+	}
+
+	td {
+		text-align: center;
+
+		.fa-check {
+			color: $green1;
+		}
+
+		.fa-times {
+			color: $error3;
+		}
+	}
+}
+
 .form-field.radio {
 	&, label {
 		display: flex;
@@ -723,6 +805,10 @@ button.with-padding {
 	}
 }
 
+[role="button"] {
+	cursor: pointer;
+}
+
 @keyframes fadeout {
 	from {
 		opacity: 1;