UI changes for problems

static/css/gruvbox/gruvbox.css

@@ -13,3 +13,12 @@ body {
   background-color: #a00;
   text-align: center;
 }
+span.error {
+  color: #f66;
+}
+input[type="datetime-local"] {
+  background-color: #202020;
+  color: #ccc;
+  border: 1px solid #535353;
+  padding: 6px;
+}

static/css/gruvbox/main.css

@@ -213,6 +213,12 @@ span.time {
 span.seconds {
   display: none;
 }
+span.ok {
+  color: #0a0;
+}
+span.error {
+  color: #a00;
+}
 label {
   user-select: none;
 }
@@ -233,6 +239,9 @@ label {
   width: min-content;
   border-radius: 6px;
 }
+#time-selector.hidden {
+  display: none;
+}
 #time-selector button {
   width: 100px;
   margin-top: 12px;

static/css/gruvbox/notifications.css

@@ -21,9 +21,3 @@ input[type="datetime-local"] {
   font-weight: 800;
   color: #777;
 }
-#notifications .ok {
-  color: #0a0;
-}
-#notifications .error {
-  color: #a00;
-}

static/css/gruvbox/problems.css

@@ -45,7 +45,7 @@
 }
 #areas .area .section {
   display: grid;
-  grid-template-columns: repeat(3, min-content);
+  grid-template-columns: repeat(4, min-content);
   grid-gap: 8px 12px;
 }
 #areas .area .section .name {