--- a/client/src/components/systemconfiguration/DataAccuracy.vue	Tue Jun 04 16:50:17 2019 +0200
+++ b/client/src/components/systemconfiguration/DataAccuracy.vue	Tue Jun 04 16:54:45 2019 +0200
@@ -1,246 +1,262 @@
 <template>
-  <div class="d-flex flex-column mt-4 pt-4 border-top">
-    <div class="d-flex flex-row justify-content-between">
-      <h5><translate>Data Availability/Accuracy</translate></h5>
-    </div>
-    <div class="mt-1">
-      <h6 class="font-weight-bold">
-        <translate>Currency of Bottleneck Surveys</translate>
-      </h6>
-
-      <div class="d-flex text-center">
-        <div class="card rounded-left">
-          <div class="card-header text-white bg-success">OK</div>
-          <div
-            class="card-body d-flex align-items-center justify-content-center"
-          >
-            Last survey within revisiting time.
-          </div>
-        </div>
-        <div class="card border-left-0 border-right-0 rounded-0">
-          <div class="card-header text-white bg-warning rounded-0">Warning</div>
-          <div
-            class="card-body d-flex flex-column align-items-center justify-content-center"
-          >
-            <div>Last survey within revisiting time</div>
-            <div>
-              x
-              <input
-                type="number"
-                step="0.1"
-                min="1"
-                class="form-control form-control-sm d-inline"
-                style="width: 70px"
-                v-model="bn_revtime_multiplier"
-              />
+  <div class="d-flex flex-column pb-4">
+    <h5 class="py-2 px-3 mb-2 m-0">
+      <translate>Data Availability/Accuracy</translate>
+    </h5>
+    <div class="px-3 container-fluid">
+      <div class="row">
+        <div class="col-sm-6">
+          <h6 class="font-weight-bold">
+            <translate>Currency of Bottleneck Surveys</translate>
+          </h6>
+          <div class="d-flex text-center small">
+            <div class="card rounded-left">
+              <div class="card-header text-white bg-success">OK</div>
+              <div
+                class="card-body d-flex align-items-center justify-content-center"
+              >
+                Last survey within revisiting time.
+              </div>
+            </div>
+            <div class="card border-left-0 border-right-0 rounded-0">
+              <div class="card-header text-white bg-warning rounded-0">
+                Warning
+              </div>
+              <div
+                class="card-body d-flex flex-column align-items-center justify-content-center"
+              >
+                <div>Last survey within revisiting time</div>
+                <div>
+                  x
+                  <input
+                    type="number"
+                    step="0.1"
+                    min="1"
+                    class="form-control form-control-sm d-inline"
+                    style="width: 70px"
+                    v-model="bn_revtime_multiplier"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="card rounded-right">
+              <div class="card-header text-white bg-danger">Critical</div>
+              <div
+                class="card-body d-flex align-items-center justify-content-center"
+              >
+                <div>
+                  Last survey older than revisiting time x
+                  <b>{{ Number(bn_revtime_multiplier).toLocaleString() }}</b>
+                </div>
+              </div>
             </div>
           </div>
         </div>
-        <div class="card rounded-right">
-          <div class="card-header text-white bg-danger">Critical</div>
-          <div
-            class="card-body d-flex align-items-center justify-content-center"
-          >
-            <div>
-              Last survey older than revisiting time x
-              <b>{{ Number(bn_revtime_multiplier).toLocaleString() }}</b>
+        <div class="col-sm-6">
+          <h6 class="font-weight-bold">
+            <translate>Availability of Gauge Measurements</translate>
+          </h6>
+          <div class="d-flex text-center small">
+            <div class="card rounded-left">
+              <div class="card-header text-white bg-success">OK</div>
+              <div
+                class="card-body d-flex align-items-center justify-content-center"
+              >
+                <div>
+                  Latest measurement not older than
+                  <b>{{ Number(gm_latest_hours).toLocaleString() }}</b> hours
+                  and at least
+                  <b>{{ Number(gm_min_values_14d).toLocaleString() }}</b>
+                  measurements in the last 14 days
+                </div>
+              </div>
+            </div>
+            <div class="card border-left-0 border-right-0 rounded-0">
+              <div class="card-header text-white bg-warning rounded-0">
+                Warning
+              </div>
+              <div
+                class="card-body d-flex flex-column align-items-center justify-content-center"
+              >
+                <div>Minimum number of measurements in the last 14 days:</div>
+                <div>
+                  <input
+                    type="number"
+                    step="1"
+                    min="1"
+                    class="form-control form-control-sm d-inline"
+                    style="width: 90px"
+                    v-model="gm_min_values_14d"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="card rounded-right">
+              <div class="card-header text-white bg-danger">Critical</div>
+              <div
+                class="card-body d-flex flex-column align-items-center justify-content-center"
+              >
+                <div>Latest measurement older than</div>
+                <div>
+                  <input
+                    type="number"
+                    step="1"
+                    min="1"
+                    class="form-control form-control-sm d-inline"
+                    style="width: 70px"
+                    v-model="gm_latest_hours"
+                  />
+                  hours
+                </div>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-
-      <h6 class="mt-4 font-weight-bold">
-        <translate>Availability of Gauge Measurements</translate>
-      </h6>
-
-      <div class="d-flex text-center">
-        <div class="card rounded-left">
-          <div class="card-header text-white bg-success">OK</div>
-          <div
-            class="card-body d-flex align-items-center justify-content-center"
-          >
-            <div>
-              Latest measurement not older than
-              <b>{{ Number(gm_latest_hours).toLocaleString() }}</b> hours and at
-              least
-              <b>{{ Number(gm_min_values_14d).toLocaleString() }}</b>
-              measurements in the last 14 days
+        <div class="col-sm-6">
+          <h6 class="font-weight-bold">
+            <translate>Gauge Forecast Confidence</translate>
+          </h6>
+          <div class="d-flex text-center small">
+            <div class="card rounded-left">
+              <div class="card-header text-white bg-success">OK</div>
+              <div
+                class="card-body d-flex align-items-center justify-content-center"
+              >
+                <div>
+                  Confidence offset within last 24 hours less than
+                  <b
+                    >{{ Number(gm_forecast_offset_24h).toLocaleString() }} cm</b
+                  >
+                  and within last 72 hours less than
+                  <b
+                    >{{ Number(gm_forecast_offset_72h).toLocaleString() }} cm</b
+                  >
+                </div>
+              </div>
+            </div>
+            <div class="card border-left-0 border-right-0 rounded-0">
+              <div class="card-header text-white bg-warning rounded-0">
+                Warning
+              </div>
+              <div
+                class="card-body d-flex flex-column align-items-center justify-content-center"
+              >
+                <div>Confidence offset within last 24 hours greater than:</div>
+                <div>
+                  <input
+                    type="number"
+                    step="1"
+                    min="1"
+                    class="form-control form-control-sm d-inline"
+                    style="width: 70px"
+                    v-model="gm_forecast_offset_24h"
+                  />
+                  cm
+                </div>
+              </div>
+            </div>
+            <div class="card rounded-right">
+              <div class="card-header text-white bg-danger">Critical</div>
+              <div
+                class="card-body d-flex flex-column align-items-center justify-content-center"
+              >
+                <div>Confidence offset within last 72 hours greater than:</div>
+                <div>
+                  <input
+                    type="number"
+                    step="1"
+                    min="1"
+                    class="form-control form-control-sm d-inline"
+                    style="width: 70px"
+                    v-model="gm_forecast_offset_72h"
+                  />
+                  cm
+                </div>
+              </div>
             </div>
           </div>
         </div>
-        <div class="card border-left-0 border-right-0 rounded-0">
-          <div class="card-header text-white bg-warning rounded-0">Warning</div>
-          <div
-            class="card-body d-flex flex-column align-items-center justify-content-center"
-          >
-            <div>Minimum number of measurements in the last 14 days:</div>
-            <div>
-              <input
-                type="number"
-                step="1"
-                min="1"
-                class="form-control form-control-sm d-inline"
-                style="width: 90px"
-                v-model="gm_min_values_14d"
-              />
+        <div class="col-sm-6">
+          <h6 class="font-weight-bold">
+            <translate>Gauge Forecast vs. Reality</translate>
+          </h6>
+          <div class="d-flex text-center small">
+            <div class="card rounded-left">
+              <div class="card-header text-white bg-success">OK</div>
+              <div
+                class="card-body d-flex align-items-center justify-content-center"
+              >
+                <div>
+                  Nash-Sutcliffe-Coefficient for last 24 hours greater than
+                  <b>{{
+                    Number(gm_forecast_vs_reality_nsc_24h).toLocaleString()
+                  }}</b>
+                  and for last 72 hours greater than
+                  <b
+                    >{{
+                      Number(gm_forecast_vs_reality_nsc_72h).toLocaleString()
+                    }}
+                    cm</b
+                  >
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-        <div class="card rounded-right">
-          <div class="card-header text-white bg-danger">Critical</div>
-
-          <div
-            class="card-body d-flex flex-column align-items-center justify-content-center"
-          >
-            <div>Latest measurement older than</div>
-            <div>
-              <input
-                type="number"
-                step="1"
-                min="1"
-                class="form-control form-control-sm d-inline"
-                style="width: 70px"
-                v-model="gm_latest_hours"
-              />
-              hours
+            <div class="card border-left-0 border-right-0 rounded-0">
+              <div class="card-header text-white bg-warning rounded-0">
+                Warning
+              </div>
+              <div
+                class="card-body d-flex flex-column align-items-center justify-content-center"
+              >
+                <div>
+                  Nash-Sutcliffe-Coefficient for last 24 hours less than:
+                </div>
+                <div>
+                  <input
+                    type="number"
+                    step="1"
+                    class="form-control form-control-sm d-inline"
+                    style="width: 70px"
+                    v-model="gm_forecast_vs_reality_nsc_24h"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="card rounded-right">
+              <div class="card-header text-white bg-danger">Critical</div>
+              <div
+                class="card-body d-flex flex-column align-items-center justify-content-center"
+              >
+                <div>
+                  Nash-Sutcliffe-Coefficient for last 72 hours less than:
+                </div>
+                <div>
+                  <input
+                    type="number"
+                    step="1"
+                    class="form-control form-control-sm d-inline"
+                    style="width: 70px"
+                    v-model="gm_forecast_vs_reality_nsc_72h"
+                  />
+                </div>
+              </div>
             </div>
           </div>
         </div>
       </div>
-
-      <h6 class="mt-4 font-weight-bold">
-        <translate>Gauge Forecast Confidence</translate>
-      </h6>
-
-      <div class="d-flex text-center">
-        <div class="card rounded-left">
-          <div class="card-header text-white bg-success">OK</div>
-          <div
-            class="card-body d-flex align-items-center justify-content-center"
-          >
-            <div>
-              Confidence offset within last 24 hours less than
-              <b>{{ Number(gm_forecast_offset_24h).toLocaleString() }} cm</b>
-              and within last 72 hours less than
-              <b>{{ Number(gm_forecast_offset_72h).toLocaleString() }} cm</b>
-            </div>
-          </div>
-        </div>
-        <div class="card border-left-0 border-right-0 rounded-0">
-          <div class="card-header text-white bg-warning rounded-0">Warning</div>
-          <div
-            class="card-body d-flex flex-column align-items-center justify-content-center"
-          >
-            <div>Confidence offset within last 24 hours greater than:</div>
-            <div>
-              <input
-                type="number"
-                step="1"
-                min="1"
-                class="form-control form-control-sm d-inline"
-                style="width: 70px"
-                v-model="gm_forecast_offset_24h"
-              />
-              cm
-            </div>
-          </div>
-        </div>
-        <div class="card rounded-right">
-          <div class="card-header text-white bg-danger">Critical</div>
-
-          <div
-            class="card-body d-flex flex-column align-items-center justify-content-center"
-          >
-            <div>Confidence offset within last 72 hours greater than:</div>
-            <div>
-              <input
-                type="number"
-                step="1"
-                min="1"
-                class="form-control form-control-sm d-inline"
-                style="width: 70px"
-                v-model="gm_forecast_offset_72h"
-              />
-              cm
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <h6 class="mt-4 font-weight-bold">
-        <translate>Gauge Forecast vs. Reality</translate>
-      </h6>
+    </div>
 
-      <div class="d-flex text-center">
-        <div class="card rounded-left">
-          <div class="card-header text-white bg-success">OK</div>
-          <div
-            class="card-body d-flex align-items-center justify-content-center"
-          >
-            <div>
-              Nash-Sutcliffe-Coefficient for last 24 hours greater than
-              <b>{{
-                Number(gm_forecast_vs_reality_nsc_24h).toLocaleString()
-              }}</b>
-              and for last 72 hours greater than
-              <b
-                >{{
-                  Number(gm_forecast_vs_reality_nsc_72h).toLocaleString()
-                }}
-                cm</b
-              >
-            </div>
-          </div>
-        </div>
-        <div class="card border-left-0 border-right-0 rounded-0">
-          <div class="card-header text-white bg-warning rounded-0">Warning</div>
-          <div
-            class="card-body d-flex flex-column align-items-center justify-content-center"
-          >
-            <div>Nash-Sutcliffe-Coefficient for last 24 hours less than:</div>
-            <div>
-              <input
-                type="number"
-                step="1"
-                class="form-control form-control-sm d-inline"
-                style="width: 70px"
-                v-model="gm_forecast_vs_reality_nsc_24h"
-              />
-            </div>
-          </div>
-        </div>
-        <div class="card rounded-right">
-          <div class="card-header text-white bg-danger">Critical</div>
-
-          <div
-            class="card-body d-flex flex-column align-items-center justify-content-center"
-          >
-            <div>Nash-Sutcliffe-Coefficient for last 72 hours less than:</div>
-            <div>
-              <input
-                type="number"
-                step="1"
-                class="form-control form-control-sm d-inline"
-                style="width: 70px"
-                v-model="gm_forecast_vs_reality_nsc_72h"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="mt-4">
-        <a @click.prevent="submit" class="btn btn-info btn-sm text-white">
-          <translate>Send</translate>
-        </a>
-      </div>
+    <div class="mt-4">
+      <a @click.prevent="submit" class="btn btn-info btn-sm text-white">
+        <translate>Send</translate>
+      </a>
     </div>
   </div>
 </template>
 
 <style lang="sass" scoped>
 .card
-  width: 33%
+  width: 33.333%
 .rounded-left,
 .rounded-left .card-header
   border-top-right-radius: 0