Moved alerts to the bottom middle of every page

static/css/alerts.css

@@ -1,7 +1,9 @@
 .alert {
-    position: relative;
-    top: 10;
-    left: 0;
+    position: fixed;
+    bottom: 3em;
+    left: 50%;
+    transform: translate(-50%, 50%);
+    z-index: 1;
     width: auto;
     height: auto;
     padding: 10px;
@@ -12,59 +14,59 @@
     cursor: pointer;
     font-family: sans-serif;
     font-weight: 400;
-  }
+}
   
-  .alertCheckbox {
+.alertCheckbox {
     display: none;
-  }
+}
   
-  :checked + .alert {
+:checked + .alert {
     display: none;
-  }
+}
   
-  .alertText {
+.alertText {
     display: table;
     margin: 0 auto;
     text-align: center;
     font-size: 16px;
-  }
+}
   
-  .alertClose {
+.alertClose {
     float: right;
     padding-top: 5px;
     font-size: 10px;
-  }
+}
   
-  .clear {
+.clear {
     clear: both;
-  }
+}
   
-  .info {
+.info {
     background-color: #EEE;
     border: 1px solid #DDD;
     color: #999;
-  }
+}
   
-  .success {
+.success {
     background-color: #EFE;
     border: 1px solid #DED;
     color: #9A9;
-  }
+}
   
-  .notice {
+.notice {
     background-color: #EFF;
     border: 1px solid #DEE;
     color: #9AA;
-  }
+}
   
-  .warning {
+.warning {
     background-color: #FDF7DF;
     border: 1px solid #FEEC6F;
     color: #C9971C;
-  }
+}
   
-  .error {
+.error {
     background-color: #FEE;
     border: 1px solid #EDD;
     color: #A66;
-  }
+}