--- a/client/src/assets/application.scss	Tue Feb 05 13:34:29 2019 +0100
+++ b/client/src/assets/application.scss	Tue Feb 05 13:55:59 2019 +0100
@@ -81,12 +81,9 @@
   max-height: 0;
   max-width: 0;
   overflow: hidden;
-  margin-left: 0;
-  margin-right: 0;
-  margin-bottom: 0;
+  margin: 0;
   box-shadow: $shadow-xs;
-  transition: max-width 0.4s, max-height 0.4s, margin-left 0.4s,
-    margin-right 0.4s, margin-bottom 0.4s;
+  transition: max-width 0.4s, max-height 0.4s, margin 0.4s;
 }
 
 .box h6,
@@ -98,9 +95,21 @@
 .expanded {
   max-height: 999px;
   max-width: 999px;
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-  margin-bottom: 1rem;
+  margin: 0 0.5rem 1rem 0.5rem;
+}
+
+.popup {
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  margin-left: -150px;
+  width: 300px;
+  max-width: 300px;
+}
+
+.popup.show {
+  margin: 0.5rem 0 0 -150px;
+  max-height: 999px;
 }
 
 // needed to fix the whitespace problem of