From 8a7af84c5c9e15e6008d653bcd07581edc9e16d2 Mon Sep 17 00:00:00 2001
From: Juan Carlos Ponce Campuzano <37394697+jcponce@users.noreply.github.com>
Date: Thu, 29 Feb 2024 13:29:06 +1000
Subject: [PATCH] updated

---
 velfields/Aizawa/index.html             |   1 +
 velfields/Aizawa/style.css              | 142 ----------------------
 velfields/Chen/index.html               |   1 +
 velfields/Chen/style.css                | 151 +-----------------------
 velfields/Dadras/index.html             |   1 +
 velfields/Dadras/style.css              | 143 ----------------------
 velfields/Halvorsen/index.html          |   1 +
 velfields/Halvorsen/style.css           | 142 ----------------------
 velfields/Lorenz/index.html             |   1 +
 velfields/Lorenz/style.css              | 143 ----------------------
 velfields/Lorenz84/index.html           |   1 +
 velfields/Lorenz84/style.css            | 144 ----------------------
 velfields/Nose-Hoover-draft/index.html  |   1 +
 velfields/RabinovichFabrikant/style.css | 144 ----------------------
 velfields/Rossler/index.html            |   1 +
 velfields/Rossler/style.css             | 144 ----------------------
 velfields/Sprott/index.html             |   1 +
 velfields/Sprott/style.css              | 142 ----------------------
 velfields/Thomas/index.html             |   1 +
 velfields/Thomas/style.css              | 142 ----------------------
 velfields/Tscus/index.html              |   1 +
 velfields/Tscus/style.css               | 144 +---------------------
 velfields/Wang-Sun/index.html           |   1 +
 velfields/Wang-Sun/style.css            | 143 ----------------------
 velfields/libraries/message.css         | 141 ++++++++++++++++++++++
 25 files changed, 155 insertions(+), 1722 deletions(-)
 create mode 100644 velfields/libraries/message.css

diff --git a/velfields/Aizawa/index.html b/velfields/Aizawa/index.html
index ebbcaea..6eaf76c 100755
--- a/velfields/Aizawa/index.html
+++ b/velfields/Aizawa/index.html
@@ -16,6 +16,7 @@
             <!-- This line removes any default padding and style.
              You might only need one of these values set. -->
             <link rel="stylesheet" type="text/css" href="style.css">
+            <link rel="stylesheet" type="text/css" href="../libraries/message.css">
             <link rel="icon" type="image/png" href="https://jcponce.github.io/images/icon/infinity32.png" sizes="32x32">
             <link rel="icon" type="image/png" href="https://jcponce.github.io/images/icon/infinity16.png" sizes="16x16">
  <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/velfields/Aizawa/style.css b/velfields/Aizawa/style.css
index d062ab2..d9a6d57 100644
--- a/velfields/Aizawa/style.css
+++ b/velfields/Aizawa/style.css
@@ -90,146 +90,4 @@ ul .green {
 
 ul .orange {
   color: rgb(255, 128, 0);
-}
-
-
-.support {
-  position: fixed;
-  font-size: 1.2em;
-  left: 10;
-  bottom: 25;
-}
-
-.support a {
-  color: aqua;
-}
-
-.support a:hover {
-  color:rgba(4, 112, 162, .976);
-}
-
-
-.modal {
-  display: none;
-  position: fixed;
-  z-index: 9998;
-  padding-top: 70px;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  background-color: #000;
-  background-color: rgba(0, 0, 0, .4)
-}
-
-.modal-content {
-  position: relative;
-  background-color: #f2f2f2;
-  margin: auto;
-  padding: 0;
-  border: 1px solid #888;
-  width: 80%;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
-  -webkit-animation-name: animatetop;
-  -webkit-animation-duration: .4s;
-  animation-name: animatetop;
-  animation-duration: .4s;
-  font-size: 17px;
-  font-family: Verdana, Geneva, Tahoma, sans-serif;
-  line-height: 1.6em;
-  color: #262626
-}
-
-.button-container {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center
-}
-
-.button-container button {
-  margin-top: 10;
-  margin-left: 7px;
-  margin-right: 7px;
-  margin-bottom: 10px
-}
-
-#modal-link {
-  padding: 9px;
-  background-color: #d8d8d8;
-  border: 1px #d8d8d8;
-  border-radius: 8px;
-  font-weight: 700;
-  font-size: 17px;
-  text-decoration: none !important
-}
-
-#modal-link a {
-  text-decoration: none !important;
-  color: #000 !important
-}
-
-#modal-link a:hover {
-  color: rgba(4, 112, 162, .976) !important
-}
-
-@-webkit-keyframes animatetop {
-  from {
-    top: -300px;
-    opacity: 0
-  }
-
-  to {
-    top: 0;
-    opacity: 1
-  }
-}
-
-@keyframes animatetop {
-  from {
-    top: -300px;
-    opacity: 0
-  }
-
-  to {
-    top: 0;
-    opacity: 1
-  }
-}
-
-.close {
-  margin-top: 10px;
-  color: #fff;
-  float: right;
-  font-size: 48px;
-  font-weight: 700
-}
-
-.close:focus,
-.close:hover {
-  color: #000;
-  text-decoration: none;
-  cursor: pointer
-}
-
-.modal-header {
-  padding: 2px 16px;
-  background-color: #595959;
-  color: #f7f7f7f3;
-  text-align: center;
-  font-size: 1.5em
-}
-
-.modal-body {
-  padding: 2px 16px
-}
-
-.modal-footer {
-  padding: 20px 20px 20px 20px;
-  background-color: #595959;
-  color: #f7f7f7f3;
-  text-align: center !important;
-  font-weight: 700
 }
\ No newline at end of file
diff --git a/velfields/Chen/index.html b/velfields/Chen/index.html
index a9ff806..857c1b5 100755
--- a/velfields/Chen/index.html
+++ b/velfields/Chen/index.html
@@ -17,6 +17,7 @@
     <link rel="icon" type="image/png" href="https://jcponce.github.io/images/icon/infinity32.png" sizes="32x32">
     <link rel="icon" type="image/png" href="https://jcponce.github.io/images/icon/infinity16.png" sizes="16x16">
     <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="stylesheet" type="text/css" href="../libraries/message.css">
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-JPYTNF6MB4"></script>
     <script>
diff --git a/velfields/Chen/style.css b/velfields/Chen/style.css
index 6d20f23..d9b3a05 100644
--- a/velfields/Chen/style.css
+++ b/velfields/Chen/style.css
@@ -90,153 +90,4 @@ ul .green{
 }
 ul .orange{
   color: rgb(255,128,0);
-}
-
-
-.support {
-  position: fixed;
-  font-size: 1.2em;
-  left: 10;
-  bottom: 25;
-}
-
-.support a {
-  color: aqua;
-}
-
-.support a:hover {
-  color:rgba(4, 112, 162, .976);
-}
-
-
-.modal {
-  display: none;
-  position: fixed;
-  z-index: 9998;
-  padding-top: 70px;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  background-color: #000;
-  background-color: rgba(0, 0, 0, .4)
-}
-
-.modal-content {
-  position: relative;
-  background-color: #f2f2f2;
-  margin: auto;
-  padding: 0;
-  border: 1px solid #888;
-  width: 80%;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
-  -webkit-animation-name: animatetop;
-  -webkit-animation-duration: .4s;
-  animation-name: animatetop;
-  animation-duration: .4s;
-  font-size: 18px;
-  font-family: Verdana, Geneva, Tahoma, sans-serif;
-  line-height: 1.6em;
-  color: #262626
-}
-
-.button-container {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center
-}
-
-.button-container button {
-  margin-top: 10;
-  margin-left: 7px;
-  margin-right: 7px;
-  margin-bottom: 10px
-}
-
-#modal-link {
-  padding: 9px;
-  background-color: #d8d8d8;
-  border: 1px #d8d8d8;
-  border-radius: 8px;
-  font-weight: 700;
-  font-size: 1em;
-  text-decoration: none !important
-}
-
-#modal-link a {
-  text-decoration: none !important;
-  color: #000 !important
-}
-
-#modal-link a:hover {
-  color: rgba(4, 112, 162, .976) !important
-}
-
-@-webkit-keyframes animatetop {
-  from {
-    top: -300px;
-    opacity: 0
-  }
-
-  to {
-    top: 0;
-    opacity: 1
-  }
-}
-
-@keyframes animatetop {
-  from {
-    top: -300px;
-    opacity: 0
-  }
-
-  to {
-    top: 0;
-    opacity: 1
-  }
-}
-
-.close {
-  margin-top: 10px;
-  color: #fff;
-  float: right;
-  font-size: 48px;
-  font-weight: 700
-}
-
-.close:focus,
-.close:hover {
-  color: #000;
-  text-decoration: none;
-  cursor: pointer
-}
-
-.modal-header {
-  padding: 2px 16px;
-  background-color: #595959;
-  color: #f7f7f7f3;
-  text-align: center;
-  font-size: 1.5em
-}
-
-.modal-body {
-  padding: 2px 16px
-}
-
-.modal-footer {
-  padding: 20px 20px 20px 20px;
-  background-color: #595959;
-  color: #f7f7f7f3;
-  text-align: center !important;
-  font-weight: 700
-}
-
-
-
-
-
-
-
+}
\ No newline at end of file
diff --git a/velfields/Dadras/index.html b/velfields/Dadras/index.html
index 4d7895f..e85ea2f 100755
--- a/velfields/Dadras/index.html
+++ b/velfields/Dadras/index.html
@@ -15,6 +15,7 @@
     <!-- This line removes any default padding and style.
              You might only need one of these values set. -->
     <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="stylesheet" type="text/css" href="../libraries/message.css">
     <link rel="icon" type="image/png" href="https://jcponce.github.io/images/icon/infinity32.png" sizes="32x32">
     <link rel="icon" type="image/png" href="https://jcponce.github.io/images/icon/infinity16.png" sizes="16x16">
     <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/velfields/Dadras/style.css b/velfields/Dadras/style.css
index 043785b..d9b3a05 100644
--- a/velfields/Dadras/style.css
+++ b/velfields/Dadras/style.css
@@ -90,147 +90,4 @@ ul .green{
 }
 ul .orange{
   color: rgb(255,128,0);
-}
-
-
-
-.support {
-  position: fixed;
-  font-size: 1.2em;
-  left: 10;
-  bottom: 25;
-}
-
-.support a {
-  color: aqua;
-}
-
-.support a:hover {
-  color:rgba(4, 112, 162, .976);
-}
-
-
-.modal {
-  display: none;
-  position: fixed;
-  z-index: 9998;
-  padding-top: 70px;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  background-color: #000;
-  background-color: rgba(0, 0, 0, .4)
-}
-
-.modal-content {
-  position: relative;
-  background-color: #f2f2f2;
-  margin: auto;
-  padding: 0;
-  border: 1px solid #888;
-  width: 80%;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
-  -webkit-animation-name: animatetop;
-  -webkit-animation-duration: .4s;
-  animation-name: animatetop;
-  animation-duration: .4s;
-  font-size: 18px;
-  font-family: Verdana, Geneva, Tahoma, sans-serif;
-  line-height: 1.6em;
-  color: #262626
-}
-
-.button-container {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center
-}
-
-.button-container button {
-  margin-top: 10;
-  margin-left: 7px;
-  margin-right: 7px;
-  margin-bottom: 10px
-}
-
-#modal-link {
-  padding: 9px;
-  background-color: #d8d8d8;
-  border: 1px #d8d8d8;
-  border-radius: 8px;
-  font-weight: 700;
-  font-size: 1em;
-  text-decoration: none !important
-}
-
-#modal-link a {
-  text-decoration: none !important;
-  color: #000 !important
-}
-
-#modal-link a:hover {
-  color: rgba(4, 112, 162, .976) !important
-}
-
-@-webkit-keyframes animatetop {
-  from {
-    top: -300px;
-    opacity: 0
-  }
-
-  to {
-    top: 0;
-    opacity: 1
-  }
-}
-
-@keyframes animatetop {
-  from {
-    top: -300px;
-    opacity: 0
-  }
-
-  to {
-    top: 0;
-    opacity: 1
-  }
-}
-
-.close {
-  margin-top: 10px;
-  color: #fff;
-  float: right;
-  font-size: 48px;
-  font-weight: 700
-}
-
-.close:focus,
-.close:hover {
-  color: #000;
-  text-decoration: none;
-  cursor: pointer
-}
-
-.modal-header {
-  padding: 2px 16px;
-  background-color: #595959;
-  color: #f7f7f7f3;
-  text-align: center;
-  font-size: 1.5em
-}
-
-.modal-body {
-  padding: 2px 16px
-}
-
-.modal-footer {
-  padding: 20px 20px 20px 20px;
-  background-color: #595959;
-  color: #f7f7f7f3;
-  text-align: center !important;
-  font-weight: 700
 }
\ No newline at end of file
diff --git a/velfields/Halvorsen/index.html b/velfields/Halvorsen/index.html
index 4b8c7f1..3f485fc 100755
--- a/velfields/Halvorsen/index.html
+++ b/velfields/Halvorsen/index.html
@@ -15,6 +15,7 @@
     <!-- This line removes any default padding and style.
              You might only need one of these values set. -->
     <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="stylesheet" type="text/css" href="../libraries/message.css">
     <link rel="icon" type="image/png" href="https://jcponce.github.io/images/icon/infinity32.png" sizes="32x32">
     <link rel="icon" type="image/png" href="https://jcponce.github.io/images/icon/infinity16.png" sizes="16x16">
     <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/velfields/Halvorsen/style.css b/velfields/Halvorsen/style.css
index 57cefcb..438349c 100644
--- a/velfields/Halvorsen/style.css
+++ b/velfields/Halvorsen/style.css
@@ -90,146 +90,4 @@ ul .green{
 }
 ul .orange{
   color: rgb(255,128,0);
-}
-
-
-.support {
-  position: fixed;
-  font-size: 1.2em;
-  left: 10;
-  bottom: 25;
-}
-
-.support a {
-  color: aqua;
-}
-
-.support a:hover {
-  color:rgba(4, 112, 162, .976);
-}
-
-
-.modal {
-  display: none;
-  position: fixed;
-  z-index: 9998;
-  padding-top: 70px;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  background-color: #000;
-  background-color: rgba(0, 0, 0, .4)
-}
-
-.modal-content {
-  position: relative;
-  background-color: #f2f2f2;
-  margin: auto;
-  padding: 0;
-  border: 1px solid #888;
-  width: 80%;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
-  -webkit-animation-name: animatetop;
-  -webkit-animation-duration: .4s;
-  animation-name: animatetop;
-  animation-duration: .4s;
-  font-size: 18px;
-  font-family: Verdana, Geneva, Tahoma, sans-serif;
-  line-height: 1.6em;
-  color: #262626
-}
-
-.button-container {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center
-}
-
-.button-container button {
-  margin-top: 10;
-  margin-left: 7px;
-  margin-right: 7px;
-  margin-bottom: 10px
-}
-
-#modal-link {
-  padding: 9px;
-  background-color: #d8d8d8;
-  border: 1px #d8d8d8;
-  border-radius: 8px;
-  font-weight: 700;
-  font-size: 1em;
-  text-decoration: none !important
-}
-
-#modal-link a {
-  text-decoration: none !important;
-  color: #000 !important
-}
-
-#modal-link a:hover {
-  color: rgba(4, 112, 162, .976) !important
-}
-
-@-webkit-keyframes animatetop {
-  from {
-    top: -300px;
-    opacity: 0
-  }
-
-  to {
-    top: 0;
-    opacity: 1
-  }
-}
-
-@keyframes animatetop {
-  from {
-    top: -300px;
-    opacity: 0
-  }
-
-  to {
-    top: 0;
-    opacity: 1
-  }
-}
-
-.close {
-  margin-top: 10px;
-  color: #fff;
-  float: right;
-  font-size: 48px;
-  font-weight: 700
-}
-
-.close:focus,
-.close:hover {
-  color: #000;
-  text-decoration: none;
-  cursor: pointer
-}
-
-.modal-header {
-  padding: 2px 16px;
-  background-color: #595959;
-  color: #f7f7f7f3;
-  text-align: center;
-  font-size: 1.5em
-}
-
-.modal-body {
-  padding: 2px 16px
-}
-
-.modal-footer {
-  padding: 20px 20px 20px 20px;
-  background-color: #595959;
-  color: #f7f7f7f3;
-  text-align: center !important;
-  font-weight: 700
 }
\ No newline at end of file
diff --git a/velfields/Lorenz/index.html b/velfields/Lorenz/index.html
index e969f87..9e79d82 100755
--- a/velfields/Lorenz/index.html
+++ b/velfields/Lorenz/index.html
@@ -15,6 +15,7 @@
     <!-- This line removes any default padding and style.
              You might only need one of these values set. -->
     <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="stylesheet" type="text/css" href="../libraries/message.css">
     <link rel="icon" type="image/png" href="https://jcponce.github.io/images/icon/infinity32.png" sizes="32x32">
     <link rel="icon" type="image/png" href="https://jcponce.github.io/images/icon/infinity16.png" sizes="16x16">
     <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/velfields/Lorenz/style.css b/velfields/Lorenz/style.css
index 043785b..a2006ef 100644
--- a/velfields/Lorenz/style.css
+++ b/velfields/Lorenz/style.css
@@ -91,146 +91,3 @@ ul .green{
 ul .orange{
   color: rgb(255,128,0);
 }
-
-
-
-.support {
-  position: fixed;
-  font-size: 1.2em;
-  left: 10;
-  bottom: 25;
-}
-
-.support a {
-  color: aqua;
-}
-
-.support a:hover {
-  color:rgba(4, 112, 162, .976);
-}
-
-
-.modal {
-  display: none;
-  position: fixed;
-  z-index: 9998;
-  padding-top: 70px;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  background-color: #000;
-  background-color: rgba(0, 0, 0, .4)
-}
-
-.modal-content {
-  position: relative;
-  background-color: #f2f2f2;
-  margin: auto;
-  padding: 0;
-  border: 1px solid #888;
-  width: 80%;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
-  -webkit-animation-name: animatetop;
-  -webkit-animation-duration: .4s;
-  animation-name: animatetop;
-  animation-duration: .4s;
-  font-size: 18px;
-  font-family: Verdana, Geneva, Tahoma, sans-serif;
-  line-height: 1.6em;
-  color: #262626
-}
-
-.button-container {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center
-}
-
-.button-container button {
-  margin-top: 10;
-  margin-left: 7px;
-  margin-right: 7px;
-  margin-bottom: 10px
-}
-
-#modal-link {
-  padding: 9px;
-  background-color: #d8d8d8;
-  border: 1px #d8d8d8;
-  border-radius: 8px;
-  font-weight: 700;
-  font-size: 1em;
-  text-decoration: none !important
-}
-
-#modal-link a {
-  text-decoration: none !important;
-  color: #000 !important
-}
-
-#modal-link a:hover {
-  color: rgba(4, 112, 162, .976) !important
-}
-
-@-webkit-keyframes animatetop {
-  from {
-    top: -300px;
-    opacity: 0
-  }
-
-  to {
-    top: 0;
-    opacity: 1
-  }
-}
-
-@keyframes animatetop {
-  from {
-    top: -300px;
-    opacity: 0
-  }
-
-  to {
-    top: 0;
-    opacity: 1
-  }
-}
-
-.close {
-  margin-top: 10px;
-  color: #fff;
-  float: right;
-  font-size: 48px;
-  font-weight: 700
-}
-
-.close:focus,
-.close:hover {
-  color: #000;
-  text-decoration: none;
-  cursor: pointer
-}
-
-.modal-header {
-  padding: 2px 16px;
-  background-color: #595959;
-  color: #f7f7f7f3;
-  text-align: center;
-  font-size: 1.5em
-}
-
-.modal-body {
-  padding: 2px 16px
-}
-
-.modal-footer {
-  padding: 20px 20px 20px 20px;
-  background-color: #595959;
-  color: #f7f7f7f3;
-  text-align: center !important;
-  font-weight: 700
-}
\ No newline at end of file
diff --git a/velfields/Lorenz84/index.html b/velfields/Lorenz84/index.html
index af6688d..f767d44 100755
--- a/velfields/Lorenz84/index.html
+++ b/velfields/Lorenz84/index.html
@@ -15,6 +15,7 @@
     <!-- This line removes any default padding and style.
              You might only need one of these values set. -->
     <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="stylesheet" type="text/css" href="../libraries/message.css">
     <link rel="icon" type="image/png" href="https://dynamicmath.xyz/images/icon/infinity32.png" sizes="32x32">
     <link rel="icon" type="image/png" href="https://dynamicmath.xyz/images/icon/infinity16.png" sizes="16x16">
     <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/velfields/Lorenz84/style.css b/velfields/Lorenz84/style.css
index fd9e5d7..a2006ef 100644
--- a/velfields/Lorenz84/style.css
+++ b/velfields/Lorenz84/style.css
@@ -91,147 +91,3 @@ ul .green{
 ul .orange{
   color: rgb(255,128,0);
 }
-
-
-
-
-.support {
-  position: fixed;
-  font-size: 1.2em;
-  left: 10;
-  bottom: 25;
-}
-
-.support a {
-  color: aqua;
-}
-
-.support a:hover {
-  color:rgba(4, 112, 162, .976);
-}
-
-
-.modal {
-  display: none;
-  position: fixed;
-  z-index: 9998;
-  padding-top: 70px;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  background-color: #000;
-  background-color: rgba(0, 0, 0, .4)
-}
-
-.modal-content {
-  position: relative;
-  background-color: #f2f2f2;
-  margin: auto;
-  padding: 0;
-  border: 1px solid #888;
-  width: 80%;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
-  -webkit-animation-name: animatetop;
-  -webkit-animation-duration: .4s;
-  animation-name: animatetop;
-  animation-duration: .4s;
-  font-size: 18px;
-  font-family: Verdana, Geneva, Tahoma, sans-serif;
-  line-height: 1.6em;
-  color: #262626
-}
-
-.button-container {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center
-}
-
-.button-container button {
-  margin-top: 10;
-  margin-left: 7px;
-  margin-right: 7px;
-  margin-bottom: 10px
-}
-
-#modal-link {
-  padding: 9px;
-  background-color: #d8d8d8;
-  border: 1px #d8d8d8;
-  border-radius: 8px;
-  font-weight: 700;
-  font-size: 1em;
-  text-decoration: none !important
-}
-
-#modal-link a {
-  text-decoration: none !important;
-  color: #000 !important
-}
-
-#modal-link a:hover {
-  color: rgba(4, 112, 162, .976) !important
-}
-
-@-webkit-keyframes animatetop {
-  from {
-    top: -300px;
-    opacity: 0
-  }
-
-  to {
-    top: 0;
-    opacity: 1
-  }
-}
-
-@keyframes animatetop {
-  from {
-    top: -300px;
-    opacity: 0
-  }
-
-  to {
-    top: 0;
-    opacity: 1
-  }
-}
-
-.close {
-  margin-top: 10px;
-  color: #fff;
-  float: right;
-  font-size: 48px;
-  font-weight: 700
-}
-
-.close:focus,
-.close:hover {
-  color: #000;
-  text-decoration: none;
-  cursor: pointer
-}
-
-.modal-header {
-  padding: 2px 16px;
-  background-color: #595959;
-  color: #f7f7f7f3;
-  text-align: center;
-  font-size: 1.5em
-}
-
-.modal-body {
-  padding: 2px 16px
-}
-
-.modal-footer {
-  padding: 20px 20px 20px 20px;
-  background-color: #595959;
-  color: #f7f7f7f3;
-  text-align: center !important;
-  font-weight: 700
-}
\ No newline at end of file
diff --git a/velfields/Nose-Hoover-draft/index.html b/velfields/Nose-Hoover-draft/index.html
index 40f3d0c..0f98254 100755
--- a/velfields/Nose-Hoover-draft/index.html
+++ b/velfields/Nose-Hoover-draft/index.html
@@ -13,6 +13,7 @@
             <!-- This line removes any default padding and style.
              You might only need one of these values set. -->
             <link rel="stylesheet" type="text/css" href="style.css">
+            <link rel="stylesheet" type="text/css" href="../libraries/message.css">
             <link rel="icon" type="image/png" href="https://dynamicmath.xyz/images/icon/infinity32.png" sizes="32x32">
             <link rel="icon" type="image/png" href="https://dynamicmath.xyz/images/icon/infinity16.png" sizes="16x16">
     <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/velfields/RabinovichFabrikant/style.css b/velfields/RabinovichFabrikant/style.css
index fd9e5d7..d9b3a05 100644
--- a/velfields/RabinovichFabrikant/style.css
+++ b/velfields/RabinovichFabrikant/style.css
@@ -90,148 +90,4 @@ ul .green{
 }
 ul .orange{
   color: rgb(255,128,0);
-}
-
-
-
-
-.support {
-  position: fixed;
-  font-size: 1.2em;
-  left: 10;
-  bottom: 25;
-}
-
-.support a {
-  color: aqua;
-}
-
-.support a:hover {
-  color:rgba(4, 112, 162, .976);
-}
-
-
-.modal {
-  display: none;
-  position: fixed;
-  z-index: 9998;
-  padding-top: 70px;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  background-color: #000;
-  background-color: rgba(0, 0, 0, .4)
-}
-
-.modal-content {
-  position: relative;
-  background-color: #f2f2f2;
-  margin: auto;
-  padding: 0;
-  border: 1px solid #888;
-  width: 80%;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
-  -webkit-animation-name: animatetop;
-  -webkit-animation-duration: .4s;
-  animation-name: animatetop;
-  animation-duration: .4s;
-  font-size: 18px;
-  font-family: Verdana, Geneva, Tahoma, sans-serif;
-  line-height: 1.6em;
-  color: #262626
-}
-
-.button-container {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center
-}
-
-.button-container button {
-  margin-top: 10;
-  margin-left: 7px;
-  margin-right: 7px;
-  margin-bottom: 10px
-}
-
-#modal-link {
-  padding: 9px;
-  background-color: #d8d8d8;
-  border: 1px #d8d8d8;
-  border-radius: 8px;
-  font-weight: 700;
-  font-size: 1em;
-  text-decoration: none !important
-}
-
-#modal-link a {
-  text-decoration: none !important;
-  color: #000 !important
-}
-
-#modal-link a:hover {
-  color: rgba(4, 112, 162, .976) !important
-}
-
-@-webkit-keyframes animatetop {
-  from {
-    top: -300px;
-    opacity: 0
-  }
-
-  to {
-    top: 0;
-    opacity: 1
-  }
-}
-
-@keyframes animatetop {
-  from {
-    top: -300px;
-    opacity: 0
-  }
-
-  to {
-    top: 0;
-    opacity: 1
-  }
-}
-
-.close {
-  margin-top: 10px;
-  color: #fff;
-  float: right;
-  font-size: 48px;
-  font-weight: 700
-}
-
-.close:focus,
-.close:hover {
-  color: #000;
-  text-decoration: none;
-  cursor: pointer
-}
-
-.modal-header {
-  padding: 2px 16px;
-  background-color: #595959;
-  color: #f7f7f7f3;
-  text-align: center;
-  font-size: 1.5em
-}
-
-.modal-body {
-  padding: 2px 16px
-}
-
-.modal-footer {
-  padding: 20px 20px 20px 20px;
-  background-color: #595959;
-  color: #f7f7f7f3;
-  text-align: center !important;
-  font-weight: 700
 }
\ No newline at end of file
diff --git a/velfields/Rossler/index.html b/velfields/Rossler/index.html
index 5290727..8acc52d 100755
--- a/velfields/Rossler/index.html
+++ b/velfields/Rossler/index.html
@@ -15,6 +15,7 @@
     <!-- This line removes any default padding and style.
              You might only need one of these values set. -->
     <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="stylesheet" type="text/css" href="../libraries/message.css">
     <link rel="icon" type="image/png" href="https://jcponce.github.io/images/icon/infinity32.png" sizes="32x32">
     <link rel="icon" type="image/png" href="https://jcponce.github.io/images/icon/infinity16.png" sizes="16x16">
     <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/velfields/Rossler/style.css b/velfields/Rossler/style.css
index fd9e5d7..d9b3a05 100644
--- a/velfields/Rossler/style.css
+++ b/velfields/Rossler/style.css
@@ -90,148 +90,4 @@ ul .green{
 }
 ul .orange{
   color: rgb(255,128,0);
-}
-
-
-
-
-.support {
-  position: fixed;
-  font-size: 1.2em;
-  left: 10;
-  bottom: 25;
-}
-
-.support a {
-  color: aqua;
-}
-
-.support a:hover {
-  color:rgba(4, 112, 162, .976);
-}
-
-
-.modal {
-  display: none;
-  position: fixed;
-  z-index: 9998;
-  padding-top: 70px;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  background-color: #000;
-  background-color: rgba(0, 0, 0, .4)
-}
-
-.modal-content {
-  position: relative;
-  background-color: #f2f2f2;
-  margin: auto;
-  padding: 0;
-  border: 1px solid #888;
-  width: 80%;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
-  -webkit-animation-name: animatetop;
-  -webkit-animation-duration: .4s;
-  animation-name: animatetop;
-  animation-duration: .4s;
-  font-size: 18px;
-  font-family: Verdana, Geneva, Tahoma, sans-serif;
-  line-height: 1.6em;
-  color: #262626
-}
-
-.button-container {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center
-}
-
-.button-container button {
-  margin-top: 10;
-  margin-left: 7px;
-  margin-right: 7px;
-  margin-bottom: 10px
-}
-
-#modal-link {
-  padding: 9px;
-  background-color: #d8d8d8;
-  border: 1px #d8d8d8;
-  border-radius: 8px;
-  font-weight: 700;
-  font-size: 1em;
-  text-decoration: none !important
-}
-
-#modal-link a {
-  text-decoration: none !important;
-  color: #000 !important
-}
-
-#modal-link a:hover {
-  color: rgba(4, 112, 162, .976) !important
-}
-
-@-webkit-keyframes animatetop {
-  from {
-    top: -300px;
-    opacity: 0
-  }
-
-  to {
-    top: 0;
-    opacity: 1
-  }
-}
-
-@keyframes animatetop {
-  from {
-    top: -300px;
-    opacity: 0
-  }
-
-  to {
-    top: 0;
-    opacity: 1
-  }
-}
-
-.close {
-  margin-top: 10px;
-  color: #fff;
-  float: right;
-  font-size: 48px;
-  font-weight: 700
-}
-
-.close:focus,
-.close:hover {
-  color: #000;
-  text-decoration: none;
-  cursor: pointer
-}
-
-.modal-header {
-  padding: 2px 16px;
-  background-color: #595959;
-  color: #f7f7f7f3;
-  text-align: center;
-  font-size: 1.5em
-}
-
-.modal-body {
-  padding: 2px 16px
-}
-
-.modal-footer {
-  padding: 20px 20px 20px 20px;
-  background-color: #595959;
-  color: #f7f7f7f3;
-  text-align: center !important;
-  font-weight: 700
 }
\ No newline at end of file
diff --git a/velfields/Sprott/index.html b/velfields/Sprott/index.html
index 7cf7c0c..0073814 100755
--- a/velfields/Sprott/index.html
+++ b/velfields/Sprott/index.html
@@ -15,6 +15,7 @@
     <!-- This line removes any default padding and style.
              You might only need one of these values set. -->
     <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="stylesheet" type="text/css" href="../libraries/message.css">
     <link rel="icon" type="image/png" href="https://dynamicmath.xyz/images/icon/infinity32.png" sizes="32x32">
     <link rel="icon" type="image/png" href="https://dynamicmath.xyz/images/icon/infinity16.png" sizes="16x16">
 
diff --git a/velfields/Sprott/style.css b/velfields/Sprott/style.css
index 4fad1e9..d39d4cb 100644
--- a/velfields/Sprott/style.css
+++ b/velfields/Sprott/style.css
@@ -90,146 +90,4 @@ ul .green{
 }
 ul .orange{
   color: rgb(255,128,0);
-}
-
-
-.support {
-  position: fixed;
-  font-size: 1.2em;
-  left: 10;
-  bottom: 25;
-}
-
-.support a {
-  color: aqua;
-}
-
-.support a:hover {
-  color:rgba(4, 112, 162, .976);
-}
-
-
-.modal {
-  display: none;
-  position: fixed;
-  z-index: 9998;
-  padding-top: 70px;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  background-color: #000;
-  background-color: rgba(0, 0, 0, .4)
-}
-
-.modal-content {
-  position: relative;
-  background-color: #f2f2f2;
-  margin: auto;
-  padding: 0;
-  border: 1px solid #888;
-  width: 80%;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
-  -webkit-animation-name: animatetop;
-  -webkit-animation-duration: .4s;
-  animation-name: animatetop;
-  animation-duration: .4s;
-  font-size: 18px;
-  font-family: Verdana, Geneva, Tahoma, sans-serif;
-  line-height: 1.6em;
-  color: #262626
-}
-
-.button-container {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center
-}
-
-.button-container button {
-  margin-top: 10;
-  margin-left: 7px;
-  margin-right: 7px;
-  margin-bottom: 10px
-}
-
-#modal-link {
-  padding: 9px;
-  background-color: #d8d8d8;
-  border: 1px #d8d8d8;
-  border-radius: 8px;
-  font-weight: 700;
-  font-size: 1em;
-  text-decoration: none !important
-}
-
-#modal-link a {
-  text-decoration: none !important;
-  color: #000 !important
-}
-
-#modal-link a:hover {
-  color: rgba(4, 112, 162, .976) !important
-}
-
-@-webkit-keyframes animatetop {
-  from {
-    top: -300px;
-    opacity: 0
-  }
-
-  to {
-    top: 0;
-    opacity: 1
-  }
-}
-
-@keyframes animatetop {
-  from {
-    top: -300px;
-    opacity: 0
-  }
-
-  to {
-    top: 0;
-    opacity: 1
-  }
-}
-
-.close {
-  margin-top: 10px;
-  color: #fff;
-  float: right;
-  font-size: 48px;
-  font-weight: 700
-}
-
-.close:focus,
-.close:hover {
-  color: #000;
-  text-decoration: none;
-  cursor: pointer
-}
-
-.modal-header {
-  padding: 2px 16px;
-  background-color: #595959;
-  color: #f7f7f7f3;
-  text-align: center;
-  font-size: 1.5em
-}
-
-.modal-body {
-  padding: 2px 16px
-}
-
-.modal-footer {
-  padding: 20px 20px 20px 20px;
-  background-color: #595959;
-  color: #f7f7f7f3;
-  text-align: center !important;
-  font-weight: 700
 }
\ No newline at end of file
diff --git a/velfields/Thomas/index.html b/velfields/Thomas/index.html
index 0310997..17e3823 100755
--- a/velfields/Thomas/index.html
+++ b/velfields/Thomas/index.html
@@ -14,6 +14,7 @@
     <!-- This line removes any default padding and style.
              You might only need one of these values set. -->
     <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="stylesheet" type="text/css" href="../libraries/message.css">
     <link rel="icon" type="image/png" href="https://dynamicmath.xyz/images/icon/infinity32.png" sizes="32x32">
     <link rel="icon" type="image/png" href="https://dynamicmath.xyz/images/icon/infinity16.png" sizes="16x16">
     <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/velfields/Thomas/style.css b/velfields/Thomas/style.css
index 57cefcb..438349c 100644
--- a/velfields/Thomas/style.css
+++ b/velfields/Thomas/style.css
@@ -90,146 +90,4 @@ ul .green{
 }
 ul .orange{
   color: rgb(255,128,0);
-}
-
-
-.support {
-  position: fixed;
-  font-size: 1.2em;
-  left: 10;
-  bottom: 25;
-}
-
-.support a {
-  color: aqua;
-}
-
-.support a:hover {
-  color:rgba(4, 112, 162, .976);
-}
-
-
-.modal {
-  display: none;
-  position: fixed;
-  z-index: 9998;
-  padding-top: 70px;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  background-color: #000;
-  background-color: rgba(0, 0, 0, .4)
-}
-
-.modal-content {
-  position: relative;
-  background-color: #f2f2f2;
-  margin: auto;
-  padding: 0;
-  border: 1px solid #888;
-  width: 80%;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
-  -webkit-animation-name: animatetop;
-  -webkit-animation-duration: .4s;
-  animation-name: animatetop;
-  animation-duration: .4s;
-  font-size: 18px;
-  font-family: Verdana, Geneva, Tahoma, sans-serif;
-  line-height: 1.6em;
-  color: #262626
-}
-
-.button-container {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center
-}
-
-.button-container button {
-  margin-top: 10;
-  margin-left: 7px;
-  margin-right: 7px;
-  margin-bottom: 10px
-}
-
-#modal-link {
-  padding: 9px;
-  background-color: #d8d8d8;
-  border: 1px #d8d8d8;
-  border-radius: 8px;
-  font-weight: 700;
-  font-size: 1em;
-  text-decoration: none !important
-}
-
-#modal-link a {
-  text-decoration: none !important;
-  color: #000 !important
-}
-
-#modal-link a:hover {
-  color: rgba(4, 112, 162, .976) !important
-}
-
-@-webkit-keyframes animatetop {
-  from {
-    top: -300px;
-    opacity: 0
-  }
-
-  to {
-    top: 0;
-    opacity: 1
-  }
-}
-
-@keyframes animatetop {
-  from {
-    top: -300px;
-    opacity: 0
-  }
-
-  to {
-    top: 0;
-    opacity: 1
-  }
-}
-
-.close {
-  margin-top: 10px;
-  color: #fff;
-  float: right;
-  font-size: 48px;
-  font-weight: 700
-}
-
-.close:focus,
-.close:hover {
-  color: #000;
-  text-decoration: none;
-  cursor: pointer
-}
-
-.modal-header {
-  padding: 2px 16px;
-  background-color: #595959;
-  color: #f7f7f7f3;
-  text-align: center;
-  font-size: 1.5em
-}
-
-.modal-body {
-  padding: 2px 16px
-}
-
-.modal-footer {
-  padding: 20px 20px 20px 20px;
-  background-color: #595959;
-  color: #f7f7f7f3;
-  text-align: center !important;
-  font-weight: 700
 }
\ No newline at end of file
diff --git a/velfields/Tscus/index.html b/velfields/Tscus/index.html
index a886cee..5a4798a 100755
--- a/velfields/Tscus/index.html
+++ b/velfields/Tscus/index.html
@@ -15,6 +15,7 @@
     <!-- This line removes any default padding and style.
              You might only need one of these values set. -->
     <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="stylesheet" type="text/css" href="../libraries/message.css">
     <link rel="icon" type="image/png" href="https://dynamicmath.xyz/images/icon/infinity32.png" sizes="32x32">
     <link rel="icon" type="image/png" href="https://dynamicmath.xyz/images/icon/infinity16.png" sizes="16x16">
     <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/velfields/Tscus/style.css b/velfields/Tscus/style.css
index a3af7f2..d39d4cb 100644
--- a/velfields/Tscus/style.css
+++ b/velfields/Tscus/style.css
@@ -90,146 +90,4 @@ ul .green{
 }
 ul .orange{
   color: rgb(255,128,0);
-}
-
-
-.support {
-  position: fixed;
-  font-size: 1.2em;
-  left: 10;
-  bottom: 25;
-}
-
-.support a {
-  color: aqua;
-}
-
-.support a:hover {
-  color:rgba(4, 112, 162, .976);
-}
-
-
-.modal {
-  display: none;
-  position: fixed;
-  z-index: 9998;
-  padding-top: 70px;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  background-color: #000;
-  background-color: rgba(0, 0, 0, .4)
-}
-
-.modal-content {
-  position: relative;
-  background-color: #f2f2f2;
-  margin: auto;
-  padding: 0;
-  border: 1px solid #888;
-  width: 80%;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
-  -webkit-animation-name: animatetop;
-  -webkit-animation-duration: .4s;
-  animation-name: animatetop;
-  animation-duration: .4s;
-  font-size: 18px;
-  font-family: Verdana, Geneva, Tahoma, sans-serif;
-  line-height: 1.6em;
-  color: #262626
-}
-
-.button-container {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center
-}
-
-.button-container button {
-  margin-top: 10;
-  margin-left: 7px;
-  margin-right: 7px;
-  margin-bottom: 10px
-}
-
-#modal-link {
-  padding: 9px;
-  background-color: #d8d8d8;
-  border: 1px #d8d8d8;
-  border-radius: 8px;
-  font-weight: 700;
-  font-size: 1em;
-  text-decoration: none !important
-}
-
-#modal-link a {
-  text-decoration: none !important;
-  color: #000 !important
-}
-
-#modal-link a:hover {
-  color: rgba(4, 112, 162, .976) !important
-}
-
-@-webkit-keyframes animatetop {
-  from {
-    top: -300px;
-    opacity: 0
-  }
-
-  to {
-    top: 0;
-    opacity: 1
-  }
-}
-
-@keyframes animatetop {
-  from {
-    top: -300px;
-    opacity: 0
-  }
-
-  to {
-    top: 0;
-    opacity: 1
-  }
-}
-
-.close {
-  margin-top: 10px;
-  color: #fff;
-  float: right;
-  font-size: 48px;
-  font-weight: 700
-}
-
-.close:focus,
-.close:hover {
-  color: #000;
-  text-decoration: none;
-  cursor: pointer
-}
-
-.modal-header {
-  padding: 2px 16px;
-  background-color: #595959;
-  color: #f7f7f7f3;
-  text-align: center;
-  font-size: 1.5em
-}
-
-.modal-body {
-  padding: 2px 16px
-}
-
-.modal-footer {
-  padding: 20px 20px 20px 20px;
-  background-color: #595959;
-  color: #f7f7f7f3;
-  text-align: center !important;
-  font-weight: 700
-}
+}
\ No newline at end of file
diff --git a/velfields/Wang-Sun/index.html b/velfields/Wang-Sun/index.html
index 846d4d0..2c4a45e 100755
--- a/velfields/Wang-Sun/index.html
+++ b/velfields/Wang-Sun/index.html
@@ -15,6 +15,7 @@
     <!-- This line removes any default padding and style.
              You might only need one of these values set. -->
     <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="stylesheet" type="text/css" href="../libraries/message.css">
     <link rel="icon" type="image/png" href="https://dynamicmath.xyz/images/icon/infinity32.png" sizes="32x32">
     <link rel="icon" type="image/png" href="https://dynamicmath.xyz/images/icon/infinity16.png" sizes="16x16">
     <!-- Global site tag (gtag.js) - Google Analytics -->
diff --git a/velfields/Wang-Sun/style.css b/velfields/Wang-Sun/style.css
index b7326b2..d39d4cb 100644
--- a/velfields/Wang-Sun/style.css
+++ b/velfields/Wang-Sun/style.css
@@ -90,147 +90,4 @@ ul .green{
 }
 ul .orange{
   color: rgb(255,128,0);
-}
-
-
-
-.support {
-  position: fixed;
-  font-size: 1.2em;
-  left: 10;
-  bottom: 25;
-}
-
-.support a {
-  color: aqua;
-}
-
-.support a:hover {
-  color:rgba(4, 112, 162, .976);
-}
-
-
-.modal {
-  display: none;
-  position: fixed;
-  z-index: 9998;
-  padding-top: 70px;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  background-color: #000;
-  background-color: rgba(0, 0, 0, .4)
-}
-
-.modal-content {
-  position: relative;
-  background-color: #f2f2f2;
-  margin: auto;
-  padding: 0;
-  border: 1px solid #888;
-  width: 80%;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
-  -webkit-animation-name: animatetop;
-  -webkit-animation-duration: .4s;
-  animation-name: animatetop;
-  animation-duration: .4s;
-  font-size: 18px;
-  font-family: Verdana, Geneva, Tahoma, sans-serif;
-  line-height: 1.6em;
-  color: #262626
-}
-
-.button-container {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center
-}
-
-.button-container button {
-  margin-top: 10;
-  margin-left: 7px;
-  margin-right: 7px;
-  margin-bottom: 10px
-}
-
-#modal-link {
-  padding: 9px;
-  background-color: #d8d8d8;
-  border: 1px #d8d8d8;
-  border-radius: 8px;
-  font-weight: 700;
-  font-size: 1em;
-  text-decoration: none !important
-}
-
-#modal-link a {
-  text-decoration: none !important;
-  color: #000 !important
-}
-
-#modal-link a:hover {
-  color: rgba(4, 112, 162, .976) !important
-}
-
-@-webkit-keyframes animatetop {
-  from {
-    top: -300px;
-    opacity: 0
-  }
-
-  to {
-    top: 0;
-    opacity: 1
-  }
-}
-
-@keyframes animatetop {
-  from {
-    top: -300px;
-    opacity: 0
-  }
-
-  to {
-    top: 0;
-    opacity: 1
-  }
-}
-
-.close {
-  margin-top: 10px;
-  color: #fff;
-  float: right;
-  font-size: 48px;
-  font-weight: 700
-}
-
-.close:focus,
-.close:hover {
-  color: #000;
-  text-decoration: none;
-  cursor: pointer
-}
-
-.modal-header {
-  padding: 2px 16px;
-  background-color: #595959;
-  color: #f7f7f7f3;
-  text-align: center;
-  font-size: 1.5em
-}
-
-.modal-body {
-  padding: 2px 16px
-}
-
-.modal-footer {
-  padding: 20px 20px 20px 20px;
-  background-color: #595959;
-  color: #f7f7f7f3;
-  text-align: center !important;
-  font-weight: 700
 }
\ No newline at end of file
diff --git a/velfields/libraries/message.css b/velfields/libraries/message.css
new file mode 100644
index 0000000..a2e151b
--- /dev/null
+++ b/velfields/libraries/message.css
@@ -0,0 +1,141 @@
+
+.support {
+    position: fixed;
+    font-size: 1.2em;
+    left: 10;
+    bottom: 25;
+  }
+  
+  .support a {
+    color: aqua;
+  }
+  
+  .support a:hover {
+    color:rgba(4, 112, 162, .976);
+  }
+  
+  
+  .modal {
+    display: none;
+    position: fixed;
+    z-index: 9998;
+    padding-top: 70px;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: #000;
+    background-color: rgba(0, 0, 0, .4)
+  }
+  
+  .modal-content {
+    position: relative;
+    background-color: #f2f2f2;
+    margin: auto;
+    padding: 0;
+    border: 1px solid #888;
+    width: 80%;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
+    -webkit-animation-name: animatetop;
+    -webkit-animation-duration: .4s;
+    animation-name: animatetop;
+    animation-duration: .4s;
+    font-size: 17px;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    line-height: 1.6em;
+    color: #262626
+  }
+  
+  .button-container {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center
+  }
+  
+  .button-container button {
+    margin-top: 10;
+    margin-left: 7px;
+    margin-right: 7px;
+    margin-bottom: 10px
+  }
+  
+  #modal-link {
+    padding: 9px;
+    background-color: #d8d8d8;
+    border: 1px #d8d8d8;
+    border-radius: 8px;
+    font-weight: 700;
+    font-size: 17px;
+    text-decoration: none !important
+  }
+  
+  #modal-link a {
+    text-decoration: none !important;
+    color: #000 !important
+  }
+  
+  #modal-link a:hover {
+    color: rgba(4, 112, 162, .976) !important
+  }
+  
+  @-webkit-keyframes animatetop {
+    from {
+      top: -300px;
+      opacity: 0
+    }
+  
+    to {
+      top: 0;
+      opacity: 1
+    }
+  }
+  
+  @keyframes animatetop {
+    from {
+      top: -300px;
+      opacity: 0
+    }
+  
+    to {
+      top: 0;
+      opacity: 1
+    }
+  }
+  
+  .close {
+    margin-top: 10px;
+    color: #fff;
+    float: right;
+    font-size: 48px;
+    font-weight: 700
+  }
+  
+  .close:focus,
+  .close:hover {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer
+  }
+  
+  .modal-header {
+    padding: 2px 16px;
+    background-color: #595959;
+    color: #f7f7f7f3;
+    text-align: center;
+    font-size: 1.5em
+  }
+  
+  .modal-body {
+    padding: 2px 16px
+  }
+  
+  .modal-footer {
+    padding: 20px 20px 20px 20px;
+    background-color: #595959;
+    color: #f7f7f7f3;
+    text-align: center !important;
+    font-weight: 700
+  }
\ No newline at end of file