--- a/sat_templates/templates/bulma/static/styles.css	Mon Jul 10 15:43:49 2023 +0200
+++ b/sat_templates/templates/bulma/static/styles.css	Wed Aug 09 00:11:39 2023 +0200
@@ -18,6 +18,12 @@
     overflow: hidden;
 }
 
+.is-full-below-menu {
+    /* full viewport minus top menu height */
+    position:relative;
+    height: calc(100vh - 52px);
+}
+
 .has-whitespace-pre-wrap {
     white-space: pre-wrap;
 }
@@ -613,3 +619,148 @@
     transform: rotate(359deg);
   }
 }
+
+
+/**************
+ * animations *
+ *************/
+
+/* Fade In */
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.fade-in {
+  animation: fade-in 0.5s ease-in forwards;
+}
+
+@keyframes fade-in-x {
+  0% {
+    opacity: 0;
+    transform: scaleX(0);
+  }
+  100% {
+    opacity: 1;
+    transform: scaleX(1);
+  }
+}
+
+.fade-in-x {
+  animation: fade-in-x 0.5s ease-in forwards;
+}
+
+@keyframes fade-in-y {
+  0% {
+    opacity: 0;
+    transform: scaleY(0);
+  }
+  100% {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+
+.fade-in-y {
+  animation: fade-in-y 0.5s ease-in forwards;
+}
+
+@keyframes fade-in-xy {
+  0% {
+    opacity: 0;
+    transform: scale(0);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.fade-in-xy {
+  animation: fade-in-xy 0.5s ease-in forwards;
+}
+
+/* Fade Out */
+
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.fade-out {
+  animation: fade-out 0.5s ease-in forwards;
+}
+
+@keyframes fade-out-x {
+  0% {
+    opacity: 1;
+    transform: scaleX(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scaleX(0);
+  }
+}
+
+.fade-out-x {
+  animation: fade-out-x 0.5s ease-in forwards;
+}
+
+@keyframes fade-out-y {
+  0% {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scaleY(0);
+  }
+}
+
+.fade-out-y {
+  animation: fade-out-y 0.5s ease-in forwards;
+}
+
+@keyframes fade-out-xy {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0);
+  }
+}
+
+.fade-out-xy {
+  animation: fade-out-xy 0.5s ease-in forwards;
+}
+
+/* Slide In */
+@keyframes slide-in {
+  0% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.slide-in {
+  animation: slide-in 0.5s ease-in-out forwards;
+}
+
+.animation-reverse {
+  animation-direction: reverse;
+}