diff --git a/.gitignore b/.gitignore
index 758ea31..97a61c8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,6 @@
+# -- etherpad
+etherpad-lite/
+
 # ---> macOS
 *.DS_Store
 .AppleDouble
diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..94bff5b
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,18 @@
+#makefile 
+
+all: skin docker-build
+	
+docker-settings:
+	cp pppad.settings.json.docker etherpad-lite/settings.json.docker
+
+skin:
+	cp -r pppad-skin etherpad-lite/src/static/skins/pppad
+
+docker-build: docker-settings
+	docker build --tag gauthiier/pppad etherpad-lite/
+
+
+
+clean:
+	rm -Rf etherpad-lite/src/static/skins/pppad
+	docker image rm gauthiier/pppad
\ No newline at end of file
diff --git a/pppad-skin/images/le-fond.png b/pppad-skin/images/le-fond.png
new file mode 100644
index 0000000..abeaa63
Binary files /dev/null and b/pppad-skin/images/le-fond.png differ
diff --git a/pppad-skin/images/screenshot.png b/pppad-skin/images/screenshot.png
new file mode 100644
index 0000000..d461192
Binary files /dev/null and b/pppad-skin/images/screenshot.png differ
diff --git a/pppad-skin/index.css b/pppad-skin/index.css
new file mode 100644
index 0000000..e3f9686
--- /dev/null
+++ b/pppad-skin/index.css
@@ -0,0 +1,88 @@
+#button,
+body,
+form {
+  border: none
+}
+
+body {
+  background: url(images/le-fond.png) center center no-repeat fixed #fff;
+  font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  line-height: 1.42857143;
+  color: #333;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-size: cover;
+}
+
+#wrapper {
+  border-top: none;
+  margin-top: 0;
+  padding: 0;
+  background: 0 0;
+  box-shadow: none
+}
+
+input {
+  color: #4a5d5c;
+}
+
+#inner {
+  background: transparent;
+  padding-top: 0;
+  width: 350px;
+  max-width: 350px;
+  text-align: center;
+  color:#FFF;
+}
+
+#label {
+  text-shadow: none;
+  color: #FFF;
+  font-weight: normal;
+  text-align: center;
+}
+
+#button {
+  margin: 0 auto;
+  text-align: center;
+  width: 100%;
+  text-shadow: none;
+  font-size: 23px;
+  line-height: 1.8;
+  color: #6c02fd;
+  background: #585d6a;
+  border-radius: 3px;
+  box-shadow: none;
+  height: 53px;
+  border: none;
+  display: block;
+}
+
+
+button[type=submit] {
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+  left: 305px;
+  color: #6c02fd;
+  background: #585d6a;
+  border: none;
+  top: 0;
+  opacity: 1;
+  transition: .2s background;
+}
+
+#button:hover,
+button[type=submit]:hover {
+  cursor: pointer;
+  background: #585d6a;
+  color: #6c02fd;
+}
+
+#padname {
+  height: 38px;
+  max-width: 350px;
+  padding: 0 12px;
+  position: relative;
+}
\ No newline at end of file
diff --git a/pppad-skin/index.js b/pppad-skin/index.js
new file mode 100644
index 0000000..633db72
--- /dev/null
+++ b/pppad-skin/index.js
@@ -0,0 +1,7 @@
+'use strict';
+
+window.customStart = () => {
+  // define your javascript here
+  // jquery is available - except index.js
+  // you can load extra scripts with $.getScript http://api.jquery.com/jQuery.getScript/
+};
diff --git a/pppad-skin/pad.css b/pppad-skin/pad.css
new file mode 100644
index 0000000..a12bec3
--- /dev/null
+++ b/pppad-skin/pad.css
@@ -0,0 +1,70 @@
+@import url("src/general.css");
+@import url("src/layout.css");
+@import url("src/pad-editor.css");
+
+@import url("src/components/scrollbars.css");
+@import url("src/components/buttons.css");
+@import url("src/components/popup.css");
+
+@import url("src/components/chat.css");
+@import url("src/components/sidediv.css");
+@import url("src/components/gritter.css");
+@import url("src/components/table-of-content.css");
+@import url("src/components/toolbar.css");
+@import url("src/components/users.css");
+@import url("src/components/form.css");
+@import url("src/components/import-export.css");
+
+@import url("src/plugins/brightcolorpicker.css");
+@import url("src/plugins/font_color.css");
+@import url("src/plugins/tables2.css");
+@import url("src/plugins/set_title_on_pad.css");
+@import url("src/plugins/author_hover.css");
+@import url("src/plugins/comments.css");
+
+@import url("src/pad-variants.css");
+
+/* -----------------------------------------------------------------
+ * COLORS
+ * If you want to change main colors, please replace following CSS variables
+ * -----------------------------------------------------------------
+ */
+
+:root {
+  --super-dark-color: #485365; /*#374256;*/
+  --dark-color: #576273; /*#4d5d77*/
+
+  --primary-color: #64d29b;
+  --middle-color: #d2d2d2; /* kind of grey, use for border for examples */
+
+  --light-color: #f2f3f4; /*#f9f9f9;*/
+  --super-light-color: white;
+
+  --text-color: var(--super-dark-color);
+  --text-soft-color: var(--dark-color);
+  --border-color: var(--middle-color);
+  --bg-soft-color: var(--light-color);
+  --bg-color: var(--super-light-color);
+
+  --toolbar-border: none;
+
+  --main-font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+
+  /* Those padding like an external padding. Basic padding of 15px is always applied */
+  --editor-horizontal-padding: 40px;
+  --editor-vertical-padding: 25px;
+}
+
+@media (max-width:1000px) {
+  :root {
+    --editor-horizontal-padding: 0px;
+    --editor-vertical-padding: 0px;
+  }
+}
+
+/* Default scrollbar values */
+body {
+  --scrollbar-bg: var(--light-color);
+  --scrollbar-track: var(--super-light-color);
+  --scrollbar-thumb: var(--dark-color);
+}
diff --git a/pppad-skin/pad.js b/pppad-skin/pad.js
new file mode 100644
index 0000000..1987f32
--- /dev/null
+++ b/pppad-skin/pad.js
@@ -0,0 +1,7 @@
+'use strict';
+
+window.customStart = () => {
+  $('#pad_title').show();
+  $('.buttonicon').mousedown(function () { $(this).parent().addClass('pressed'); });
+  $('.buttonicon').mouseup(function () { $(this).parent().removeClass('pressed'); });
+};
diff --git a/pppad-skin/src/components/buttons.css b/pppad-skin/src/components/buttons.css
new file mode 100644
index 0000000..9a34454
--- /dev/null
+++ b/pppad-skin/src/components/buttons.css
@@ -0,0 +1,25 @@
+button, .btn
+{
+  padding: 5px 20px;
+  border-radius: 4px;
+  line-height: 1.5;
+  width: auto;
+  border: none;
+  font-weight: bold;
+  text-transform: uppercase;
+  position: relative;
+  background: none;
+  cursor: pointer;
+}
+
+.btn-primary
+{
+  background-color: #64d29b;
+  background-color: var(--primary-color);
+  color: #ffffff;
+  color: var(--bg-color);
+}
+.btn-default {
+  color: #485365;
+  color: var(--text-color);
+}
diff --git a/pppad-skin/src/components/chat.css b/pppad-skin/src/components/chat.css
new file mode 100644
index 0000000..4e92342
--- /dev/null
+++ b/pppad-skin/src/components/chat.css
@@ -0,0 +1,91 @@
+#chatbox {
+  background-color: transparent !important;
+  color: var(--text-color);
+}
+.chat-content {
+  background: none;
+  padding: 0;
+  width: 400px;
+  height: 300px;
+  background-color: #f2f3f4;
+  background-color: var(--bg-soft-color);
+}
+
+.chat-content, #chaticon {
+  box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
+  border: none;
+}
+
+#chaticon {
+  padding: 10px 20px;
+  background-color: #f2f3f4;
+  background-color: var(--bg-soft-color);
+  color: #485365;
+  color: var(--text-color);
+  right: 30px;
+}
+
+#chatbox.stickyChat .chat-content {
+  border: none;
+  box-shadow: none;
+  background-color: #f2f3f4;
+  background-color: var(--bg-soft-color);
+}
+
+#titlebar {
+  bottom: 0;
+  line-height: 44px;
+  height: 44px;
+  padding: 0 7px;
+  z-index: 20000;
+}
+
+#titlelabel, #chatlabel {
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
+#titlebar #titlelabel { font-size: 16px; }
+#chatlabel { margin-right: 15px; }
+
+#chattext {
+  padding: 0;
+  border-top: 1px solid #ffffff;
+  border-top: 1px solid var(--bg-color);
+  border-bottom: 1px solid #ffffff;
+  border-bottom: 1px solid var(--bg-color);
+  background-color: inherit;
+  color: inherit;
+}
+#chattext p {
+  padding: 4px 10px;
+}
+#chattext:not(.authorColors) p:first-child {
+  padding-top: 10px;
+}
+#chattext:not(.authorColors) p:last-child {
+  padding-bottom: 10px;
+}
+
+#chatinputbox {
+  padding: 8px;
+}
+#chatinputbox #chatinput {
+  background-color: #ffffff;
+  background-color: var(--bg-color);
+}
+
+@media (prefers-reduced-motion) {
+  .chat-content {
+    transform: scale(1);
+    transition: none;
+  }
+}
+
+@media (max-width: 800px) {
+  #chaticon {
+    right: 0;
+  }
+
+  .stick-to-screen-btn { display: none; }
+}
diff --git a/pppad-skin/src/components/form.css b/pppad-skin/src/components/form.css
new file mode 100644
index 0000000..8903c31
--- /dev/null
+++ b/pppad-skin/src/components/form.css
@@ -0,0 +1,117 @@
+input[type="text"], select, textarea, .nice-select {
+  border-radius: 3px;
+  box-shadow: none;
+  border: none;
+  outline: 0;
+}
+
+input[type="text"], textarea {
+  padding: 8px 10px;
+  background-color: #f2f3f4;
+  background-color: var(--bg-soft-color);
+  border: none;
+  color: #485365;
+  color: var(--text-color);
+}
+input[type="text"]::placeholder, textarea::placeholder {
+  color: #576273;
+  color: var(--text-soft-color);
+}
+select, .nice-select {
+  background-color: #f2f3f4;
+  background-color: var(--bg-soft-color);
+  border: 1px solid var(--bg-soft-color);
+  padding: 4px 10px;
+  padding-right: 25px;
+  font-weight: bold;
+  line-height: inherit;
+}
+select:hover, .nice-select:hover {
+  border-color: var(--bg-soft-color)
+}
+.nice-select .list {
+  background-color: #f2f3f4;
+  background-color: var(--bg-soft-color);
+}
+.nice-select .option:hover,.nice-select .option.focus,.nice-select .option.selected.focus {
+  background-color: #ffffff;
+  background-color: var(--bg-color);
+}
+.nice-select .option {
+  padding: 0 15px;
+}
+.popup .nice-select .list {
+  right: 0;
+  left: auto;
+}
+
+
+/* Checkboxes
+   ========================================================================== */
+/* Remove default checkbox */
+[type="checkbox"]:not(:checked),
+[type="checkbox"]:checked {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+[type="checkbox"] + label {
+  position: relative;
+  padding-left: 2.5rem;
+  cursor: pointer;
+  display: inline-block;
+  height: 1.4rem;
+  line-height: 1.4rem;
+  font-size: 1rem;
+}
+
+[type="checkbox"] + label:before,
+[type="checkbox"] + label:after {
+  content: '';
+  position: absolute;
+  margin-top: 4px;
+  transition: all .2s ease-in-out;
+}
+
+/* BEFORE, the container*/
+[type="checkbox"] + label:before {
+  width: 24px;
+  height: 14px;
+  top: 0;
+  left: 0;
+  border-radius: 6px;
+  border: 2px solid #576273;
+  border: 2px solid var(--text-soft-color);
+  background-color: #f2f3f4;
+  background-color: var(--bg-soft-color);
+  opacity: .7;
+}
+[type="checkbox"]:checked + label:before {
+  background-color: transparent;
+  border-color: #64d29b;
+  border-color: var(--primary-color);
+}
+
+/* AFTER, the circle moving */
+[type="checkbox"] + label:after {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: #576273;
+  background-color: var(--text-soft-color);
+  top: -1px;
+  left: -3px;
+}
+[type="checkbox"]:checked + label:after {
+  background-color: #64d29b;
+  background-color: var(--primary-color);
+  transform: translateX(14px);
+}
+
+[type="checkbox"]:checked:disabled + label,
+[type="checkbox"]:checked:disabled + label:before,
+[type="checkbox"]:checked:disabled + label:after {
+  cursor: not-allowed;
+  opacity: .4;
+}
diff --git a/pppad-skin/src/components/gritter.css b/pppad-skin/src/components/gritter.css
new file mode 100644
index 0000000..f0c8610
--- /dev/null
+++ b/pppad-skin/src/components/gritter.css
@@ -0,0 +1,82 @@
+.gritter-item:not(.error) .popup-content{
+  background-color: #64d29b;
+  background-color: var(--primary-color);
+  color: #ffffff;
+  color: var(--super-light-color);
+}
+.gritter-item .popup-content {
+  padding: 15px;
+  box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
+}
+#gritter-container.bottom .gritter-item .popup-content {
+  margin-top: 10px;
+}
+#gritter-container.top .gritter-item .popup-content {
+  margin-bottom: 10px;
+}
+.gritter-item p {
+  margin: 0 !important;
+}
+.gritter-item .gritter-title {
+  margin-bottom: 10px;
+}
+.gritter-item .gritter-close {
+  margin-left: 15px;
+  margin-right: 0px;
+}
+.gritter-item:not(.error) .gritter-close .buttonicon {
+  color: #ffffff;
+  color: var(--super-light-color);
+}
+
+/* CHAT GRIITER ITEM */
+.gritter-item.chat-gritter-msg:not(.error) .popup-content {
+  background-color: white;
+  background-color: var(--bg-color);
+  color: #485365;
+  color: var(--text-color);
+}
+.gritter-item.chat-gritter-msg .gritter-content {
+  text-align: left;
+}
+.gritter-item.chat-gritter-msg .author-name {
+  font-weight: bold;
+  margin-right: 5px;
+}
+.gritter-item.chat-gritter-msg:not(.error) .gritter-close .buttonicon {
+  color: #485365;
+  color: var(--text-color);
+}
+
+.gritter-item.saved-revision {
+  max-width: 600px;
+}
+
+#gritter-container.top .gritter-item.popup > .popup-content {
+  transform: scale(0.8) translateY(-100px);
+}
+#gritter-container.bottom .gritter-item.popup > .popup-content {
+  transform: scale(0.8) translateY(0px);
+}
+
+.gritter-item.popup.popup-show > .popup-content {
+  transform: scale(1) translateY(0) !important;
+  transition: all 0.4s cubic-bezier(0.74, -0.05, 0.27, 1.75) !important;
+}
+@media (prefers-reduced-motion) {
+  #gritter-container.top .gritter-item.popup > .popup-content {
+    transform: scale(1) translateY(0px) !important;
+  }
+  #gritter-container.bottom .gritter-item.popup > .popup-content {
+    transform: scale(1) translateY(0px) !important;
+  }
+  .gritter-item.popup.popup-show > .popup-content {
+    transform: scale(1) translateY(0px) !important;
+    transition: none;
+  }
+}
+
+/* for ep_deleted_after_delay */
+.gritter-item #close_expiration_notif {
+  display: none;
+}
diff --git a/pppad-skin/src/components/import-export.css b/pppad-skin/src/components/import-export.css
new file mode 100644
index 0000000..d8425d8
--- /dev/null
+++ b/pppad-skin/src/components/import-export.css
@@ -0,0 +1,17 @@
+#importmessageabiword {
+  font-style: italic;
+  color: #64d29b;
+  color: var(--primary-color);
+}
+#importmessageabiword > a {
+  font-weight: bold;
+  text-decoration: underline;
+  color: #64d29b;
+  color: var(--primary-color);
+}
+
+#importmessagefail {
+  margin-top: 10px;
+}
+
+#importsubmitinput[disabled] { opacity: .6; }
\ No newline at end of file
diff --git a/pppad-skin/src/components/popup.css b/pppad-skin/src/components/popup.css
new file mode 100644
index 0000000..0fe67e5
--- /dev/null
+++ b/pppad-skin/src/components/popup.css
@@ -0,0 +1,83 @@
+.popup-content {
+  border-radius: 5px;
+  padding: 25px;
+  background: none;
+  background-color: #ffffff;
+  background-color: var(--bg-color);
+  color: #576273;
+  color: var(--text-soft-color);
+  border: none;
+  box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
+}
+
+#mycolorpicker, #users {
+  min-width: 0;
+}
+
+.popup h1 {
+  margin-bottom: 20px;
+  font-size: 1.6rem;
+}
+
+.popup h2 {
+  margin-bottom: 15px;
+  margin-top: 20px;
+  color: #485365;
+  color: var(--text-color);
+}
+
+.popup:not(.comment-modal) p {
+  margin: 10px 0;
+}
+
+.popup .dropdowns-container .dropdown-line {
+  margin-top: 15px;
+}
+.popup .dropdowns-container label {
+  width: 120px;
+  display: inline-block;
+}
+.popup .dropdowns-container .nice-select {
+  min-width: 180px;
+}
+
+@media (prefers-reduced-motion) {
+  .popup>.popup-content {
+    transform: scale(1);
+    transition: none;
+  }
+  .nice-select .list {
+    transform: scale(1) translateY(0px);
+    -webkit-transform: scale(1) translateY(0px);
+    -ms-transform: scale(1) translateY(0px);
+    transition: none;
+  }
+}
+
+@media (max-width: 800px) {
+  .popup-content {
+    padding: 1rem;
+    box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), -1px 1px 16px 3px rgba(27, 39, 51, 0.12);
+  }
+  .popup .dropdowns-container select {
+    min-width: 0;
+  }
+}
+
+/* SKIN Variants Popup */
+#skin-variants {
+  bottom: 0;
+  left: 0;
+  right: auto;
+  top: auto;
+}
+#skin-variants .popup-content > p {
+  margin-top: 25px;
+}
+#skin-variants-result{
+  background-color: #f2f3f4;
+  background-color: var(--bg-soft-color);
+}
+.skin-variant-container {
+  text-transform: capitalize;
+}
diff --git a/pppad-skin/src/components/scrollbars.css b/pppad-skin/src/components/scrollbars.css
new file mode 100644
index 0000000..85f942b
--- /dev/null
+++ b/pppad-skin/src/components/scrollbars.css
@@ -0,0 +1,41 @@
+@media (min-width: 721px) {
+  ::-webkit-scrollbar-track {
+    background-color: white;
+    background-color: var(--scrollbar-track);
+    border-radius: 10px;
+    border: 7px solid #f2f3f4;
+    border: 7px solid var(--scrollbar-bg);
+  }
+
+  ::-webkit-scrollbar {
+    width: 22px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    min-height: 40px;
+    border-radius: 10px;
+    background-color: #576273;
+    background-color: var(--scrollbar-thumb);
+    border: 7px solid #f2f3f4;
+    border: 7px solid var(--scrollbar-bg);
+  }
+}
+
+.thin-scrollbar::-webkit-scrollbar-track {
+  background-color: #f2f3f4;
+  background-color: var(--bg-soft-color);
+  border-radius: 0px;
+  border: none;
+}
+
+.thin-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.thin-scrollbar::-webkit-scrollbar-thumb {
+  border-radius: 0px;
+  min-height: 40px;
+  background-color: #d2d2d2;
+  background-color: var(--middle-color);
+  border: none;
+}
\ No newline at end of file
diff --git a/pppad-skin/src/components/sidediv.css b/pppad-skin/src/components/sidediv.css
new file mode 100644
index 0000000..c48d38f
--- /dev/null
+++ b/pppad-skin/src/components/sidediv.css
@@ -0,0 +1,31 @@
+#sidediv {
+  background-color: transparent;
+  border: none;
+  opacity: .8;
+}
+
+#sidedivinner>div:before {
+  font-family: var(--main-font-family); /* the parent div have font-family monospace (line number) */
+  color: #485365;
+  color: var(--text-color);
+  font-weight: bold;
+}
+
+#sidedivinner>div .line-number {
+  line-height: inherit;
+  font-family: RobotoMono;
+  display: inline-block;
+  color: #576273;
+  color: var(--text-soft-color);
+  height:100%;
+}
+
+#sidedivinner>div .line-number:hover {
+  background-color: var(--bg-soft-color);
+  border-radius: 5px 0 0 5px;  
+  font-weight: bold;
+  color: var(--text-color);
+}
+.plugin-ep_author_neat #sidedivinner>div .line-number:hover {
+  background-color: transparent;
+}
diff --git a/pppad-skin/src/components/table-of-content.css b/pppad-skin/src/components/table-of-content.css
new file mode 100644
index 0000000..fd6c5ea
--- /dev/null
+++ b/pppad-skin/src/components/table-of-content.css
@@ -0,0 +1,21 @@
+#toc {
+  padding: 20px 20px 10px 10px !important;
+  min-width: 146px !important;
+  background-color: transparent !important;
+  border: none !important;
+  order: -2;
+}
+
+#tocItems {
+  line-height: 40px !important;
+}
+
+.plugin-ep_resizable_bars #toc {
+  min-width: 186px !important;
+}
+
+@media (max-width: 1200px) {
+  #toc {
+    padding-top: 10px !important
+  }
+}
\ No newline at end of file
diff --git a/pppad-skin/src/components/toolbar.css b/pppad-skin/src/components/toolbar.css
new file mode 100644
index 0000000..7f3e714
--- /dev/null
+++ b/pppad-skin/src/components/toolbar.css
@@ -0,0 +1,154 @@
+.toolbar {
+  border-bottom: none;
+  padding: 0;
+  background-color: #ffffff;
+  background-color: var(--bg-color);
+  color: #576273;
+  color: var(--text-soft-color);
+  border-bottom: none;
+}
+
+#editbar.editor-scrolled {
+  border-bottom: 1px solid #d2d2d2;
+  border-bottom: var(--toolbar-border);
+}
+
+.toolbar ul {
+  align-items: center;
+}
+
+.toolbar ul.menu_left {
+  padding-left: 5px;
+}
+
+.toolbar ul li {
+  margin: 7px 1px;
+}
+
+.toolbar ul li a, .toolbar .buttonicon {
+  color: inherit;
+}
+
+.toolbar .buttonicon {
+  background-color: transparent;
+  font-size: 15px;
+}
+.buttonicon-insertorderedlist:before,
+.buttonicon-insertunorderedlist:before,
+.buttonicon-indent:before,
+.buttonicon-outdent:before {
+  font-size: 16px !important;
+}
+
+.toolbar ul li.separator {
+  visibility: hidden;
+  width: 1px;
+  margin: 0 10px;
+  position: relative;
+}
+
+.toolbar.condensed ul li {
+  margin-left: 0;
+}
+
+.toolbar.condensed ul li.separator {
+  margin: 0 5px;
+}
+
+.toolbar ul li a {
+  background-color: transparent;
+  background: none;
+  border: none;
+  border-radius: 3px !important;
+  transition: background-color .1s;
+}
+
+.toolbar ul li a:hover, .toolbar ul li select:hover  {
+  background-color: #f2f3f4;
+  background-color: var(--bg-soft-color);
+  color: #485365;
+  color: var(--text-color);
+}
+.toolbar ul li a.selected {
+  background-color: #f2f3f4;
+  background-color: var(--bg-soft-color);
+}
+.toolbar ul li a.pressed,
+.toolbar ul li select:active {
+  color: #64d29b;
+  color: var(--primary-color);
+}
+
+.toolbar ul li select:active option {
+  background-color: #ffffff;
+  background-color: var(--bg-color);
+  color: #576273;
+  color: var(--text-soft-color);
+  padding: 5px;
+}
+
+.toolbar .menu_right li a.selected {
+  background-color: #576273;
+  background-color: var(--text-soft-color);
+  color: #ffffff;
+  color: var(--bg-color);
+}
+
+.toolbar ul li[data-key=showusers] {
+  margin: 0;
+  margin-left: 15px;
+  width: 45px;
+  height: 100%;
+}
+.toolbar ul li[data-key=showusers] > a {
+  width: 100%;
+  height: 100%;
+  border-radius: 0 !important;
+}
+
+.toolbar .menu_right .separator {
+  display: none;
+}
+.toolbar .menu_right li {
+  margin-left: 10px;
+}
+
+.toolbar.cropped .menu_left {
+  height: 39px;
+  padding-top: 1px;
+}
+.toolbar .show-more-icon-btn {
+  font-size: 1.8rem;
+  color: #64d29b;
+  color: var(--primary-color);
+}
+
+@media (max-width: 1000px) {
+  .toolbar ul li.separator {
+    margin: 0 5px;
+    background: none;
+    display: block;
+  }
+}
+
+.mobile-layout .toolbar ul li {
+  margin: 5px 2px;
+}
+.mobile-layout .toolbar ul li.separator {
+  margin: 0 5px;
+}
+@media (max-width: 800px) {
+  .mobile-layout .toolbar ul li.separator {
+    display: none;
+  }
+}
+.mobile-layout .toolbar .menu_right {
+  border-top: 1px solid #d2d2d2;
+  border-top: var(--toolbar-border);
+  background-color: #ffffff;
+  background-color: var(--bg-color);
+  padding: 0;
+}
+.mobile-layout .toolbar ul li a:hover {
+  /* background-color: transparent; */
+}
diff --git a/pppad-skin/src/components/users.css b/pppad-skin/src/components/users.css
new file mode 100644
index 0000000..beb498e
--- /dev/null
+++ b/pppad-skin/src/components/users.css
@@ -0,0 +1,52 @@
+table#otheruserstable {
+  margin-top: 20px;
+}
+
+.popup#users.chatAndUsers > .popup-content {
+  padding: 20px 10px;
+  height: 250px;
+  border-left: none;
+  transition: none;
+  border-bottom-color: #d2d2d2;
+  border-bottom-color: var(--border-color);
+}
+.popup#users.chatAndUsers #mycolorpicker.popup {
+  right: calc(100% + 30px);
+  top: 15px;
+}
+
+#otheruserstable .swatch {
+  border: none !important;
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+  margin: 0;
+  margin-left: 1px;
+  margin-right: 15px;
+}
+
+#myusernameform {
+  margin-left: 35px;
+}
+
+input#myusernameedit {
+  min-width: 110px;
+  border: none !important;
+  background-color: transparent !important;
+  border-bottom: 1px solid #d2d2d2 !important;
+  border-bottom: 1px solid var(--border-color) !important;
+  border-radius: 0;
+  padding-bottom: 5px;
+}
+
+#myswatch {
+  border-radius: 50%;
+}
+
+#colorpicker {
+  margin-bottom: 25px;
+}
+
+#mycolorpickerpreview {
+  border-radius: 50%;
+}
\ No newline at end of file
diff --git a/pppad-skin/src/general.css b/pppad-skin/src/general.css
new file mode 100644
index 0000000..1caf6a0
--- /dev/null
+++ b/pppad-skin/src/general.css
@@ -0,0 +1,11 @@
+body {
+  color: #485365;
+  color: var(--text-color);
+  font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-family: var(--main-font-family);
+}
+
+h1 {
+  color: #64d29b;
+  color: var(--primary-color);
+}
\ No newline at end of file
diff --git a/pppad-skin/src/layout.css b/pppad-skin/src/layout.css
new file mode 100644
index 0000000..1ec3886
--- /dev/null
+++ b/pppad-skin/src/layout.css
@@ -0,0 +1,48 @@
+#outerdocbody {
+  margin: 0 auto;
+  padding-top: 20px;
+  width: 100%;
+}
+
+#editorcontainerbox {
+  background-color: #f2f3f4;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+}
+
+#editorcontainerbox .sticky-container {
+  width: 250px;
+}
+
+#outerdocbody iframe, #outerdocbody > #innerdocbody {
+  max-width: 900px;
+  padding: 40px 55px;
+  padding-left: var(--editor-horizontal-padding);
+  padding-right: var(--editor-horizontal-padding);
+  padding-top: var(--editor-vertical-padding);
+  padding-bottom: var(--editor-vertical-padding);
+  box-shadow: none;
+  border: 0;
+  border-radius: 8px 8px 0 0;
+  background-color: #ffffff;
+  background-color: var(--bg-color);
+  color: #485365;
+  color: var(--text-color);
+}
+#sidediv {
+  /* Padding must be the same than editor, otherwise it creates problem */
+  padding-top: 40px; /* = #innerdocbody iframe vertical padding */
+  padding-bottom: 40px;
+  padding-top: calc(var(--editor-vertical-padding) + 15px);
+  padding-bottom: calc(var(--editor-vertical-padding) + 15px);
+}
+
+@media (max-width:1000px) {
+  #outerdocbody {
+    padding-top: 0;
+  }
+  #outerdocbody iframe, #outerdocbody > #innerdocbody {
+    max-width: none;
+    border-radius: 0;
+  }
+}
diff --git a/pppad-skin/src/pad-editor.css b/pppad-skin/src/pad-editor.css
new file mode 100644
index 0000000..7a4c8ec
--- /dev/null
+++ b/pppad-skin/src/pad-editor.css
@@ -0,0 +1,5 @@
+#innerdocbody {
+  background: transparent;
+  color: #485365;
+  color: var(--text-color);
+}
diff --git a/pppad-skin/src/pad-variants.css b/pppad-skin/src/pad-variants.css
new file mode 100644
index 0000000..1b335d3
--- /dev/null
+++ b/pppad-skin/src/pad-variants.css
@@ -0,0 +1,228 @@
+/* =========================== */
+/* === Super Light Toolbar === */
+/* =========================== */
+.super-light-toolbar .toolbar, .super-light-toolbar .popup-content, .super-light-toolbar #pad_title  {
+  --text-color: var(--super-dark-color);
+  --text-soft-color: var(--dark-color);
+  --border-color: #e4e6e9;
+  --bg-soft-color: var(--light-color);
+  --bg-color: var(--super-light-color);
+}
+/* ===================== */
+/* === Light Toolbar === */
+/* ===================== */
+.light-toolbar .toolbar, .light-toolbar .popup-content, .light-toolbar #pad_title {
+  --text-color: var(--super-dark-color);
+  --text-soft-color: var(--dark-color);
+  --border-color: var(--middle-color);
+  --bg-soft-color: var(--super-light-color);
+  --bg-color: var(--light-color);
+}
+/* ========================== */
+/* === Super Dark Toolbar === */
+/* ========================== */
+.super-dark-toolbar .toolbar, .super-dark-toolbar .popup-content, .super-dark-toolbar #pad_title {
+  --text-color: var(--super-light-color);
+  --text-soft-color: var(--light-color);
+  --border-color: var(--dark-color);
+  --bg-soft-color: var(--dark-color);
+  --bg-color: var(--super-dark-color);
+}
+.super-dark-toolbar.super-dark-editor .popup-content {
+  border: 1px solid var(--dark-color);
+  box-shadow: none;
+}
+/* ==================== */
+/* === Dark Toolbar === */
+/* ==================== */
+.dark-toolbar .toolbar, .dark-toolbar .popup-content, .dark-toolbar #pad_title  {
+  --text-color: var(--super-light-color);
+  --text-soft-color: var(--light-color);
+  --border-color: var(--super-dark-color);
+  --bg-soft-color: var(--super-dark-color);
+  --bg-color: var(--dark-color);
+}
+
+
+
+
+
+/* ============================ */
+/* == Super Light Background == */
+/* ============================ */
+.super-light-background #editorcontainerbox, .super-light-background #sidediv,
+.super-light-background #chatbox, .super-light-background #outerdocbody, .super-light-background {
+  --text-color: var(--super-dark-color);
+  --text-soft-color: var(--dark-color);
+  --border-color: #e4e6e9;
+  --bg-soft-color: var(--light-color);
+  --bg-color: var(--super-light-color);
+}
+.super-light-background  body, .full-width-editor.super-light-editor body:not(.comments-active) {
+  --scrollbar-bg: var(--super-light-color);
+  --scrollbar-track: var(--light-color);
+  --scrollbar-thumb: var(--dark-color);
+}
+.super-light-background .compact-display-content {
+  background-color: var(--super-light-color);
+}
+/* ====================== */
+/* == Light Background == */
+/* ====================== */
+.light-background #editorcontainerbox, .light-background #sidediv,
+.light-background #chatbox, .light-background #outerdocbody, .light-background {
+  --text-color: var(--super-dark-color);
+  --text-soft-color: var(--dark-color);
+  --border-color: var(--middle-color);
+  --bg-soft-color: var(--super-light-color);
+  --bg-color: var(--light-color);
+}
+.light-background  body, .full-width-editor.light-editor body:not(.comments-active) {
+  --scrollbar-bg: var(--light-color);
+  --scrollbar-track: var(--super-light-color);
+  --scrollbar-thumb: var(--dark-color);
+}
+.light-background .compact-display-content {
+  background-color: var(--light-color);
+}
+/* =========================== */
+/* == Super Dark Background == */
+/* =========================== */
+.super-dark-background #editorcontainerbox, .super-dark-background #sidediv,
+.super-dark-background #chatbox, .super-dark-background #outerdocbody, .super-dark-background {
+  --text-color: var(--super-light-color);
+  --text-soft-color: var(--light-color);
+  --border-color: var(--dark-color);
+  --bg-soft-color: var(--dark-color);
+  --bg-color: var(--super-dark-color);
+}
+.super-dark-background body, .full-width-editor.super-dark-editor body:not(.comments-active) {
+  --scrollbar-bg: var(--super-dark-color);
+  --scrollbar-track: var(--dark-color);
+  --scrollbar-thumb: var(--light-color);
+}
+.super-dark-background .compact-display-content {
+  background-color: var(--super-dark-color);
+}
+/* Special combinaison with toolbar */
+.super-dark-background.super-dark-toolbar .popup-content {
+  border: 1px solid var(--dark-color);
+  box-shadow: none;
+}
+/* ===================== */
+/* == Dark Background == */
+/* ===================== */
+.dark-background #editorcontainerbox, .dark-background #sidediv,
+.dark-background #chatbox, .dark-background #outerdocbody, .dark-background  {
+  --text-color: var(--super-light-color);
+  --text-soft-color: var(--light-color);
+  --border-color: var(--super-dark-color);
+  --bg-soft-color: var(--super-dark-color);
+  --bg-color: var(--dark-color);
+}
+.dark-background  body, .full-width-editor.dark-editor body:not(.comments-active) {
+  --scrollbar-bg: var(--dark-color);
+  --scrollbar-track: var(--super-dark-color);
+  --scrollbar-thumb: var(--light-color);
+}
+.dark-background .compact-display-content {
+  background-color: var(--dark-color);
+}
+/* Special combinaison with toolbar */
+.dark-background.dark-toolbar .popup-content, .dark-editor.dark-toolbar .popup-content {
+  box-shadow: 0 0 14px 0px var(--super-dark-color);
+}
+
+
+
+
+
+/* ======================== */
+/* == Super Light Editor == */
+/* ======================== */
+.super-light-editor #outerdocbody iframe, .super-light-editor #outerdocbody > #innerdocbody {
+  --bg-color: var(--super-light-color);
+}
+.super-light-editor #innerdocbody {
+  --text-color: var(--super-dark-color);
+}
+/* ================== */
+/* == Light Editor == */
+/* ================== */
+.light-editor #outerdocbody iframe, .light-editor #outerdocbody > #innerdocbody {
+  --bg-color: var(--light-color);
+}
+.light-editor #innerdocbody {
+  --text-color: var(--super-dark-color);
+}
+/* ======================= */
+/* == Super Dark Editor == */
+/* ======================= */
+.super-dark-editor #outerdocbody iframe, .super-dark-editor #outerdocbody > #innerdocbody {
+  --bg-color: var(--super-dark-color);
+}
+.super-dark-editor #innerdocbody {
+  --text-color: var(--super-light-color);
+}
+/* ================= */
+/* == Dark Editor == */
+/* ================= */
+.dark-editor #outerdocbody iframe, .dark-editor #outerdocbody > #innerdocbody {
+  --bg-color: var(--dark-color);
+}
+.dark-editor #innerdocbody {
+  --text-color: var(--super-light-color);
+}
+
+
+/* ======================================== */
+/* == Combinaison with background/editor == */
+/* ======================================== */
+.super-light-editor.super-light-background #outerdocbody,
+.light-editor.light-background #outerdocbody,
+.super-dark-editor.super-dark-background #outerdocbody,
+.dark-editor.dark-background #outerdocbody {
+  padding-top: 0;
+}
+@media (min-width: 1001px) {
+  .super-light-editor.super-light-background,
+  .light-editor.light-background,
+  .super-dark-editor.super-dark-background,
+  .dark-editor.dark-background {
+    --editor-horizontal-padding: 20px;
+    --editor-vertical-padding: 5px;
+  }
+}
+
+/* ===================================== */
+/* == Combinaison with toolbar/editor == */
+/* ===================================== */
+.super-light-editor.super-light-toolbar .toolbar,
+.light-editor.light-toolbar .toolbar,
+.super-dark-editor.super-dark-toolbar .toolbar,
+.dark-editor.dark-toolbar .toolbar {
+  --toolbar-border: 1px solid var(--border-color);
+}
+
+
+/* ======================= */
+/* == Full Width Editor == */
+/* ======================= */
+.full-width-editor #outerdocbody iframe, .full-width-editor #outerdocbody > #innerdocbody {
+  max-width: none !important;
+  border-radius: 0;
+}
+.full-width-editor #outerdocbody {
+  padding: 0;
+  margin: 0;
+}
+@media (min-width: 1001px) {
+  .full-width-editor {
+    --editor-horizontal-padding: 20px !important;
+    --editor-vertical-padding: 5px !important;
+  }
+}
+.full-width-editor ::-webkit-scrollbar-track,
+.full-width-editor ::-webkit-scrollbar-thumb {
+  border-radius: 0px;
+}
\ No newline at end of file
diff --git a/pppad-skin/src/plugins/author_hover.css b/pppad-skin/src/plugins/author_hover.css
new file mode 100644
index 0000000..6a0fbe4
--- /dev/null
+++ b/pppad-skin/src/plugins/author_hover.css
@@ -0,0 +1,10 @@
+.authortooltip {
+  opacity: 1!important;
+  border-radius: 2px;
+  padding: 4px 10px 3px!important;
+  text-transform: uppercase;
+  font-size: 13px!important;
+  font-weight: 700;
+  color: #000;
+  background-color: rgba(255, 255, 255, 0.85) !important;
+}
\ No newline at end of file
diff --git a/pppad-skin/src/plugins/brightcolorpicker.css b/pppad-skin/src/plugins/brightcolorpicker.css
new file mode 100644
index 0000000..8db2880
--- /dev/null
+++ b/pppad-skin/src/plugins/brightcolorpicker.css
@@ -0,0 +1,14 @@
+#colorpicker a.brightColorPicker-cancelButton {
+    background: none;
+    padding: 0;
+    padding-top: 10px;
+    font-weight: bold;
+    border: none;
+}
+
+.brightColorPicker-colorPanel {
+    background-color: white !important;
+    box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08) !important;
+    border-radius: 3px !important;
+    padding: 15px !important;
+}
\ No newline at end of file
diff --git a/pppad-skin/src/plugins/comments.css b/pppad-skin/src/plugins/comments.css
new file mode 100644
index 0000000..005890e
--- /dev/null
+++ b/pppad-skin/src/plugins/comments.css
@@ -0,0 +1,112 @@
+.sidebar-comment .btn {
+  margin-top: 10px;
+  padding: 3px 8px;
+  font-size: .9rem;
+  margin: 10px 0 5px 0;
+}
+.sidebar-comment .btn.btn-primary:not(#comment-create-btn) {
+  background-color: #576273;
+  background-color: var(--text-soft-color);
+}
+.sidebar-comment .suggestion-create {
+  margin-top: 10px;
+}
+.suggestion-display .from-value, .suggestion-display .to-value {
+  color: #64d29b;
+  color: var(--primary-color);
+  font-weight: bold;
+  opacity: 1;
+}
+.suggestion-display .from-value {
+  margin-right: 5px;
+}
+.comment-actions-wrapper .buttonicon {
+  opacity: .8;
+}
+.comment-actions-wrapper .buttonicon:hover {
+  opacity: 1;
+}
+.comment-actions-wrapper .comment-edit {
+  margin-right: 5px;
+}
+[type="checkbox"] + label.label-suggestion-checkbox {
+  margin-left: 5px;
+  padding-left: 2.4rem;
+}
+.sidebar-comment .full-display-content {
+  margin-left: -10px;
+  box-shadow: none;
+  background-color: #f2f3f4;
+  background-color: var(--bg-soft-color);
+  border: 1px solid #ffffff;
+  border: 1px solid var(--bg-color);
+}
+.comment-reply {
+  border-top: 1px solid #ffffff;
+  border-top: 1px solid var(--bg-color);
+  background-color: inherit;
+}
+.comment-reply textarea, .comment-reply input[type="text"] {
+  background-color: #ffffff;
+  background-color: var(--bg-color);
+}
+.btn.revert-suggestion-btn {
+  padding-left: 0;
+}
+.comment-edit-form {
+  margin-top: 15px;
+}
+
+/* MODAL */
+.comment-modal .full-display-content {
+  box-shadow: none;
+  margin: 0 !important;
+  border: none;
+  background-color: #ffffff;
+  background-color: var(--bg-color);
+}
+.comment-modal .comment-modal-comment {
+  padding: 0;
+}
+.comment-modal .comment-reply textarea, .comment-modal .comment-reply input[type="text"] {
+  background-color: #f2f3f4;
+  background-color: var(--bg-soft-color);
+}
+.comment-modal .comment-reply {
+  border-top: 1px solid #f2f3f4;
+  border-top: 1px solid var(--bg-soft-color);
+}
+.comment-modal .full-display-content .comment-title-wrapper,
+.comment-modal .full-display-content .comment-reply {
+  padding: 15px;
+}
+
+
+/* NEW COMMENT POPUP */
+.new-comment-popup textarea {
+  background-color: #f2f3f4;
+  background-color: var(--bg-soft-color);
+}
+.new-comment-popup .suggestion {
+  margin-bottom: 10px;
+}
+
+
+/* EDITOR COMMENTEED LINE */
+#innerdocbody .ace-line .comment {
+  background-color: #fffacc;
+  color: var(--super-dark-color);
+}
+
+
+@media (min-width: 1200px) {
+  #comments {
+    width: 300px;
+  }
+  .sidebar-comment .full-display-content {
+    margin-left: 10px;
+  }
+  .compact-display-content {
+    padding-left: 20px;
+  }
+}
\ No newline at end of file
diff --git a/pppad-skin/src/plugins/font_color.css b/pppad-skin/src/plugins/font_color.css
new file mode 100644
index 0000000..43647ac
--- /dev/null
+++ b/pppad-skin/src/plugins/font_color.css
@@ -0,0 +1,41 @@
+.font-color-icon {
+  display: none !important;
+}
+
+#font-color {
+  display: list-item !important;
+}
+.readonly #font-color {
+  display: none !important;
+}
+
+.color\:black,
+[data-color=black] {
+  color: #485365;
+  color: var(--text-color);
+}
+
+.color\:red,
+[data-color=red] {
+  color: #F44336;
+}
+
+.color\:green,
+[data-color=green] {
+  color: #66d29c;
+}
+
+.color\:blue,
+[data-color=blue] {
+  color: #2196f3;
+}
+
+.color\:yellow,
+[data-color=yellow] {
+  color: #ffeb3b;
+}
+
+.color\:orange,
+[data-color=orange] {
+  color: #FF9800;
+}
\ No newline at end of file
diff --git a/pppad-skin/src/plugins/set_title_on_pad.css b/pppad-skin/src/plugins/set_title_on_pad.css
new file mode 100644
index 0000000..9ab1e2a
--- /dev/null
+++ b/pppad-skin/src/plugins/set_title_on_pad.css
@@ -0,0 +1,7 @@
+#pad_title {
+  border-bottom: 1px solid var(--border-color) !important;
+  background-color: var(--bg-color) !important;
+}
+#edit_title {
+  color: var(--text-soft-color);
+}
\ No newline at end of file
diff --git a/pppad-skin/src/plugins/tables2.css b/pppad-skin/src/plugins/tables2.css
new file mode 100644
index 0000000..d24056d
--- /dev/null
+++ b/pppad-skin/src/plugins/tables2.css
@@ -0,0 +1,239 @@
+/* MENU ICON*/
+#editbar #tbl_menu_list {
+  width: auto !important;
+}
+#tbl-menu {
+  background: none !important;
+  width: 18px !important;
+  padding-left: 2px !important;
+}
+#tbl-menu:before {
+  content: "\F0CE";
+}
+
+#tbl_menu_list > a {
+  font-size: 16px;
+  margin-top: 8px;
+  padding-left: 0;
+  padding-right: 2px;
+  padding-bottom: 4px;
+}
+
+/* DROP DOWN MENU */
+#tbl_context_menu {
+  margin-left: -24px;
+  border: none;
+  margin-top: 9px;
+  box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
+  border-radius: 3px;
+  background-color: white;
+  font-size: 100%;
+  line-height: 1.7;
+}
+
+#tbl_context_menu > .bd {
+  border: none;
+  background-color: transparent;
+}
+
+#tbl_context_menu > .bd > ul {
+  padding: 6px 0;
+}
+
+/* TABLE SIZE PICKER */
+#tbl_insert  {
+  background-color: white;
+  box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
+  border-radius: 3px;
+}
+
+#tbl_insert .bd {
+  border: none;
+  text-align: center;
+  background-color: transparent;
+  padding-top: 4px;
+}
+
+#tbl_insert .yuimenuitemlabel { text-align: center; }
+
+#tbl_insert .ft {
+  margin: 0;
+  border: none;
+  background-color: transparent;
+  padding: 6px;
+  padding-top: 0;
+}
+
+#matrix_table tr td {
+  border: 1px solid #d7d7d7;
+  height: 1px;
+  padding: 7px;
+  width: 11px;
+  background-color: #fbfbfb;
+  border-radius: 1px;
+}
+#matrix_table tr td.selected {
+  border: 1px solid #789dce;
+  background-color: #b3d4ff;
+}
+
+/* TABLE SETTINGS POPUP */
+.yui-skin-sam .yui-panel-container {
+  padding: 0;
+  margin: 0;
+  background-color: #fff;
+  box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
+  border-radius: 5px;
+  padding-bottom: 15px;
+}
+
+.yui-skin-sam .yui-panel-container .yui-panel {
+  border: none !important;
+  background: none;
+  box-shadow: none !important;
+}
+
+.yui-skin-sam .yui-panel-container .yui-panel .hd {
+  cursor: move;
+  padding: 0;
+  border: 0;
+  background: 0;
+  margin: 0;
+  font-size: 14px;
+  line-height: 40px;
+  text-transform: uppercase;
+  padding: 0 15px;
+  padding-top: 5px;
+  font-weight: bold;
+  border-bottom: 1px solid #d2d2d2;
+}
+
+.yui-skin-sam .yui-panel-container .yui-panel .container-close {
+  top: 15px;
+  border: none;
+  background: none;
+  color: white;
+  text-indent: 0;
+}
+.yui-skin-sam .yui-panel-container .yui-panel .container-close::before {
+  content: "x";
+  color: #6f757a;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.yui-skin-sam .yui-panel-container .yui-panel .bd {
+  background: none;
+  border: none;
+  box-shadow: none;
+  padding: 15px;
+  background-color: transparent !important;
+}
+
+.yui-panel .underlay, .yui-skin-sam .yui-panel-container.shadow .underlay {
+  display: none !important;
+}
+
+#div_tbl_btn_close {
+  float: right;
+  position: relative;
+  width: 100%;
+  margin-top: 10px;
+  right: 0;
+  bottom: 0;
+}
+
+#tbl_btn_close {
+  border: none;
+  color: #ffffff;
+  height: 30px;
+  width: 100%;
+  border-radius: 3px;
+  text-transform: uppercase;
+}
+#tbl_btn_close:hover { cursor: pointer; }
+
+.yui-skin-sam .yui-button {
+  background: none;
+  background-color: white;
+  border: none;
+  height: 24px;
+  margin-bottom: -4px;
+  margin-top: 5px;
+}
+
+.yui-skin-sam .yui-button .first-child { margin: 0; border: none; }
+
+.yui-skin-sam .yui-split-button button {
+  padding: 0;
+  background: none !important;
+}
+
+.yui-skin-sam .yui-split-button button em:not(.color-picker-button) {
+  font-style: normal !important;
+  border-bottom: 1px solid #b5b7b7;
+  padding: 0 5px;
+  margin: 0 5px;
+  padding-bottom: 3px;
+}
+
+button#yui-gen13-button {
+  margin-left: -5px;
+}
+
+button .color-picker-button {
+  border: 1px solid #c1c2c2;
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+}
+
+#even-row-bg-color, #single-row-bg-color {
+  margin-right: 5px;
+}
+#single-col-bg-color, #odd-row-bg-color {
+  margin-left: 7px;
+}
+
+#yui-tbl-prop-panel .text-input[type=text] {
+  border: 1px solid #d2d2d2;
+  float: right;
+  height: 10px;
+  border-radius: 3px;
+  padding: 8px 10px;
+}
+
+#text_input_message {
+  background-color: #64d29b;
+  padding: 0 5px;
+  color: white;
+  font-size: 12px;
+  border-radius: 5px;
+  font-weight: bold;
+  display: none;
+}
+
+/* TABLES INSIDE THE PAD */
+td[name=tData] {
+  /*border: 1px solid grey !important;*/
+}
+
+#yui-picker-panel_c
+{
+  padding-bottom: 40px;
+}
+
+div#yui-picker-panel_h {
+  line-height: 1.8em;
+  font-size: 13px;
+  padding: 9px 15px 5px;
+}
+
+#yui-picker-panel .ft {
+  position: relative;
+  border: none;
+  width: 100%;
+  padding: 0;
+  margin-top: 20px;
+}
\ No newline at end of file
diff --git a/pppad-skin/timeslider.css b/pppad-skin/timeslider.css
new file mode 100644
index 0000000..263e0e5
--- /dev/null
+++ b/pppad-skin/timeslider.css
@@ -0,0 +1,98 @@
+#timeslider-slider #ui-slider-handle {
+  border-radius: 3px;
+  width: 12px;
+  height: 28px;
+  background-color: #64d29b;
+  background-color: var(--primary-color);
+}
+
+#timeslider-slider #ui-slider-bar {
+  border-radius: 3px;
+  background-color: #d2d2d2;
+  background-color: var(--border-color);
+}
+#slider-btn-container {
+  margin: -18px 15px 0 20px;
+}
+#slider-btn-container #playpause_button_icon {
+  color: #ffffff;
+  color: var(--bg-color);
+  background-color: #64d29b;
+  background-color: var(--primary-color);
+  border: none;
+  margin-right: 5px;
+  padding-top: 3px;
+  width: 45px;
+  height: 45px;
+}
+#slider-btn-container #playpause_button_icon:not(.pause) {
+  padding-left: 4px;
+}
+#slider-btn-container .stepper {
+  border: 2px solid !important;
+  height: 30px;
+  width: 30px;
+  line-height: 28px;
+  margin-left: 5px;
+  font-size: 13px;
+  color: #64d29b;
+  color: var(--primary-color);
+  border-color: #64d29b;
+  border-color: var(--primary-color);
+}
+#slider-btn-container .stepper.disabled {
+  opacity: .5;
+}
+
+.timeslider #editbar .buttontext {
+  background-color: #576273;
+  background-color: var(--text-soft-color);
+  color: #ffffff;
+  color: var(--bg-color);
+  margin: 0;
+}
+
+#editbar {
+  display: block;
+  padding-bottom: 5px;
+}
+
+#editbar li > a {
+  border-radius: 3px;
+}
+
+#timeslider-slider #timer {
+  opacity: .7;
+  top: -12px;
+  font-size: .8em;
+}
+
+.timeslider #authorsList .author {
+  padding: 2px 5px;
+  border-radius: 3px;
+  margin-right: 4px;
+  margin-bottom: 4px;
+}
+
+.timeslider-title {
+  font-size: 1.8rem !important;
+}
+.timeslider-subtitle {
+  margin-top: 6px;
+  font-size: .9em;
+}
+
+@media (max-width: 800px) {
+
+  #slider-btn-container {
+    margin-top: 0;
+    margin-right: 5px;
+  }
+  #slider-btn-container #playpause_button_icon {
+    width: 30px;
+    height: 30px;
+  }
+  #slider-btn-container #playpause_button_icon:before {
+    font-size: 18px;
+  }
+}
\ No newline at end of file
diff --git a/pppad-skin/timeslider.js b/pppad-skin/timeslider.js
new file mode 100644
index 0000000..5fa8ae3
--- /dev/null
+++ b/pppad-skin/timeslider.js
@@ -0,0 +1,4 @@
+'use strict';
+
+window.customStart = () => {
+};
diff --git a/pppad.settings.json.docker b/pppad.settings.json.docker
new file mode 100644
index 0000000..e188ada
--- /dev/null
+++ b/pppad.settings.json.docker
@@ -0,0 +1,591 @@
+/**
+ * THIS IS THE SETTINGS FILE THAT IS COPIED INSIDE THE DOCKER CONTAINER.
+ *
+ * By default, some runtime customizations are supported (see the
+ * documentation).
+ *
+ * If you need more control, edit this file and rebuild the container.
+ */
+
+/*
+ * This file must be valid JSON. But comments are allowed
+ *
+ * Please edit settings.json, not settings.json.template
+ *
+ * Please note that starting from Etherpad 1.6.0 you can store DB credentials in
+ * a separate file (credentials.json).
+ *
+ *
+ * ENVIRONMENT VARIABLE SUBSTITUTION
+ * =================================
+ *
+ * All the configuration values can be read from environment variables using the
+ * syntax "${ENV_VAR}" or "${ENV_VAR:default_value}".
+ *
+ * This is useful, for example, when running in a Docker container.
+ *
+ * DETAILED RULES:
+ *   - If the environment variable is set to the string "true" or "false", the
+ *     value becomes Boolean true or false.
+ *   - If the environment variable is set to the string "null", the value
+ *     becomes null.
+ *   - If the environment variable is set to the string "undefined", the setting
+ *     is removed entirely, except when used as the member of an array in which
+ *     case it becomes null.
+ *   - If the environment variable is set to a string representation of a finite
+ *     number, the string is converted to that number.
+ *   - If the environment variable is set to any other string, including the
+ *     empty string, the value is that string.
+ *   - If the environment variable is unset and a default value is provided, the
+ *     value is as if the environment variable was set to the provided default:
+ *       - "${UNSET_VAR:}" becomes the empty string.
+ *       - "${UNSET_VAR:foo}" becomes the string "foo".
+ *       - "${UNSET_VAR:true}" and "${UNSET_VAR:false}" become true and false.
+ *       - "${UNSET_VAR:null}" becomes null.
+ *       - "${UNSET_VAR:undefined}" causes the setting to be removed (or be set
+ *         to null, if used as a member of an array).
+ *   - If the environment variable is unset and no default value is provided,
+ *     the value becomes null. THIS BEHAVIOR MAY CHANGE IN A FUTURE VERSION OF
+ *     ETHERPAD; if you want the default value to be null, you should explicitly
+ *     specify "null" as the default value.
+ *
+ * EXAMPLE:
+ *    "port":     "${PORT:9001}"
+ *    "minify":   "${MINIFY}"
+ *    "skinName": "${SKIN_NAME:colibris}"
+ *
+ * Would read the configuration values for those items from the environment
+ * variables PORT, MINIFY and SKIN_NAME.
+ *
+ * If PORT and SKIN_NAME variables were not defined, the default values 9001 and
+ * "colibris" would be used.
+ * The configuration value "minify", on the other hand, does not have a
+ * designated default value. Thus, if the environment variable MINIFY were
+ * undefined, "minify" would be null.
+ *
+ * REMARKS:
+ * 1) please note that variable substitution always needs to be quoted.
+ *
+ *    "port":     9001,            <-- Literal values. When not using
+ *    "minify":   false                substitution, only strings must be
+ *    "skinName": "colibris"           quoted. Booleans and numbers must not.
+ *
+ *    "port":     "${PORT:9001}"   <-- CORRECT: if you want to use a variable
+ *    "minify":   "${MINIFY:true}"     substitution, put quotes around its name,
+ *    "skinName": "${SKIN_NAME}"       even if the required value is a number or
+ *                                     a boolean.
+ *                                     Etherpad will take care of rewriting it
+ *                                     to the proper type if necessary.
+ *
+ *    "port":     ${PORT:9001}     <-- ERROR: this is not valid json. Quotes
+ *    "minify":   ${MINIFY}            around variable names are missing.
+ *    "skinName": ${SKIN_NAME}
+ *
+ * 2) Beware of undefined variables and default values: nulls and empty strings
+ *    are different!
+ *
+ *    This is particularly important for user's passwords (see the relevant
+ *    section):
+ *
+ *    "password": "${PASSW}"  // if PASSW is not defined would result in password === null
+ *    "password": "${PASSW:}" // if PASSW is not defined would result in password === ''
+ *
+ *    If you want to use an empty value (null) as default value for a variable,
+ *    simply do not set it, without putting any colons: "${ABIWORD}".
+ *
+ * 3) if you want to use newlines in the default value of a string parameter,
+ *    use "\n" as usual.
+ *
+ *    "defaultPadText" : "${DEFAULT_PAD_TEXT}Line 1\nLine 2"
+ */
+{
+  /*
+   * Name your instance!
+   */
+  "title": "${TITLE:PPPaaad}",
+
+  /*
+   * Pathname of the favicon you want to use. If null, the skin's favicon is
+   * used if one is provided by the skin, otherwise the default Etherpad favicon
+   * is used. If this is a relative path it is interpreted as relative to the
+   * Etherpad root directory.
+   */
+  "favicon": "${FAVICON:null}",
+
+  /*
+   * Skin name.
+   *
+   * Its value has to be an existing directory under src/static/skins.
+   * You can write your own, or use one of the included ones:
+   *
+   * - "no-skin":  an empty skin (default). This yields the unmodified,
+   *               traditional Etherpad theme.
+   * - "colibris": the new experimental skin (since Etherpad 1.8), candidate to
+   *               become the default in Etherpad 2.0
+   */
+  "skinName": "${SKIN_NAME:pppad}",
+
+  /*
+   * Skin Variants
+   *
+   * Use the UI skin variants builder at /p/test#skinvariantsbuilder
+   *
+   * For the colibris skin only, you can choose how to render the three main
+   * containers:
+   * - toolbar (top menu with icons)
+   * - editor (containing the text of the pad)
+   * - background (area outside of editor, mostly visible when using page style)
+   *
+   * For each of the 3 containers you can choose 4 color combinations:
+   * super-light, light, dark, super-dark.
+   *
+   * For example, to make the toolbar dark, you will include "dark-toolbar" into
+   * skinVariants.
+   *
+   * You can provide multiple skin variants separated by spaces. Default
+   * skinVariant is "super-light-toolbar super-light-editor light-background".
+   *
+   * For the editor container, you can also make it full width by adding
+   * "full-width-editor" variant (by default editor is rendered as a page, with
+   * a max-width of 900px).
+   */
+  "skinVariants": "${SKIN_VARIANTS:super-light-toolbar super-light-editor light-background}",
+
+  /*
+   * IP and port which Etherpad should bind at.
+   *
+   * Binding to a Unix socket is also supported: just use an empty string for
+   * the ip, and put the full path to the socket in the port parameter.
+   *
+   * EXAMPLE USING UNIX SOCKET:
+   *    "ip": "",                             // <-- has to be an empty string
+   *    "port" : "/somepath/etherpad.socket", // <-- path to a Unix socket
+   */
+  "ip": "${IP:0.0.0.0}",
+  "port": "${PORT:9001}",
+
+  /*
+   * Option to hide/show the settings.json in admin page.
+   *
+   * Default option is set to true
+   */
+  "showSettingsInAdminPage": "${SHOW_SETTINGS_IN_ADMIN_PAGE:true}",
+
+  /*
+   * Node native SSL support
+   *
+   * This is disabled by default.
+   * Make sure to have the minimum and correct file access permissions set so
+   * that the Etherpad server can access them
+   */
+
+  /*
+  "ssl" : {
+            "key"  : "/path-to-your/epl-server.key",
+            "cert" : "/path-to-your/epl-server.crt",
+            "ca": ["/path-to-your/epl-intermediate-cert1.crt", "/path-to-your/epl-intermediate-cert2.crt"]
+          },
+  */
+
+  /*
+   * The type of the database.
+   *
+   * You can choose between many DB drivers, for example: dirty, postgres,
+   * sqlite, mysql.
+   *
+   * You shouldn't use "dirty" for for anything else than testing or
+   * development.
+   *
+   *
+   * Database specific settings are dependent on dbType, and go in dbSettings.
+   * Remember that since Etherpad 1.6.0 you can also store this information in
+   * credentials.json.
+   *
+   * For a complete list of the supported drivers, please refer to:
+   * https://www.npmjs.com/package/ueberdb2
+   */
+
+  "dbType": "${DB_TYPE:mysql}",
+  "dbSettings": {
+    "host":     "${DB_HOST:192.168.111.22}",
+    "port":     "${DB_PORT:3306}",
+    "database": "${DB_NAME:pppad}",
+    "user":     "${DB_USER:root}",
+    "password": "${DB_PASS:kritik}",
+    "charset":  "${DB_CHARSET:utf8}",
+    "filename": "${DB_FILENAME:var/dirty.db}",
+    "collection": "${DB_COLLECTION:undefined}",
+    "url":      "${DB_URL:undefined}"
+  },
+
+  /*
+   * The default text of a pad
+   */
+  "defaultPadText" : "${DEFAULT_PAD_TEXT:PPPaaad!!}",
+
+  /*
+   * Default Pad behavior.
+   *
+   * Change them if you want to override.
+   */
+  "padOptions": {
+    "noColors":         "${PAD_OPTIONS_NO_COLORS:false}",
+    "showControls":     "${PAD_OPTIONS_SHOW_CONTROLS:true}",
+    "showChat":         "${PAD_OPTIONS_SHOW_CHAT:true}",
+    "showLineNumbers":  "${PAD_OPTIONS_SHOW_LINE_NUMBERS:true}",
+    "useMonospaceFont": "${PAD_OPTIONS_USE_MONOSPACE_FONT:false}",
+    "userName":         "${PAD_OPTIONS_USER_NAME:false}",
+    "userColor":        "${PAD_OPTIONS_USER_COLOR:false}",
+    "rtl":              "${PAD_OPTIONS_RTL:false}",
+    "alwaysShowChat":   "${PAD_OPTIONS_ALWAYS_SHOW_CHAT:false}",
+    "chatAndUsers":     "${PAD_OPTIONS_CHAT_AND_USERS:false}",
+    "lang":             "${PAD_OPTIONS_LANG:en-gb}"
+  },
+
+  /*
+   * Pad Shortcut Keys
+   */
+  "padShortcutEnabled" : {
+    "altF9":     "${PAD_SHORTCUTS_ENABLED_ALT_F9:true}",      /* focus on the File Menu and/or editbar */
+    "altC":      "${PAD_SHORTCUTS_ENABLED_ALT_C:true}",       /* focus on the Chat window */
+    "cmdShift2": "${PAD_SHORTCUTS_ENABLED_CMD_SHIFT_2:true}", /* shows a gritter popup showing a line author */
+    "delete":    "${PAD_SHORTCUTS_ENABLED_DELETE:true}",
+    "return":    "${PAD_SHORTCUTS_ENABLED_RETURN:true}",
+    "esc":       "${PAD_SHORTCUTS_ENABLED_ESC:true}",         /* in mozilla versions 14-19 avoid reconnecting pad */
+    "cmdS":      "${PAD_SHORTCUTS_ENABLED_CMD_S:true}",       /* save a revision */
+    "tab":       "${PAD_SHORTCUTS_ENABLED_TAB:true}",         /* indent */
+    "cmdZ":      "${PAD_SHORTCUTS_ENABLED_CMD_Z:true}",       /* undo/redo */
+    "cmdY":      "${PAD_SHORTCUTS_ENABLED_CMD_Y:true}",       /* redo */
+    "cmdI":      "${PAD_SHORTCUTS_ENABLED_CMD_I:true}",       /* italic */
+    "cmdB":      "${PAD_SHORTCUTS_ENABLED_CMD_B:true}",       /* bold */
+    "cmdU":      "${PAD_SHORTCUTS_ENABLED_CMD_U:true}",       /* underline */
+    "cmd5":      "${PAD_SHORTCUTS_ENABLED_CMD_5:true}",       /* strike through */
+    "cmdShiftL": "${PAD_SHORTCUTS_ENABLED_CMD_SHIFT_L:true}", /* unordered list */
+    "cmdShiftN": "${PAD_SHORTCUTS_ENABLED_CMD_SHIFT_N:true}", /* ordered list */
+    "cmdShift1": "${PAD_SHORTCUTS_ENABLED_CMD_SHIFT_1:true}", /* ordered list */
+    "cmdShiftC": "${PAD_SHORTCUTS_ENABLED_CMD_SHIFT_C:true}", /* clear authorship */
+    "cmdH":      "${PAD_SHORTCUTS_ENABLED_CMD_H:true}",       /* backspace */
+    "ctrlHome":  "${PAD_SHORTCUTS_ENABLED_CTRL_HOME:true}",   /* scroll to top of pad */
+    "pageUp":    "${PAD_SHORTCUTS_ENABLED_PAGE_UP:true}",
+    "pageDown":  "${PAD_SHORTCUTS_ENABLED_PAGE_DOWN:true}"
+  },
+
+  /*
+   * Should we suppress errors from being visible in the default Pad Text?
+   */
+  "suppressErrorsInPadText": "${SUPPRESS_ERRORS_IN_PAD_TEXT:false}",
+
+  /*
+   * If this option is enabled, a user must have a session to access pads.
+   * This effectively allows only group pads to be accessed.
+   */
+  "requireSession": "${REQUIRE_SESSION:false}",
+
+  /*
+   * Users may edit pads but not create new ones.
+   *
+   * Pad creation is only via the API.
+   * This applies both to group pads and regular pads.
+   */
+  "editOnly": "${EDIT_ONLY:false}",
+
+  /*
+   * If true, all css & js will be minified before sending to the client.
+   *
+   * This will improve the loading performance massively, but makes it difficult
+   * to debug the javascript/css
+   */
+  "minify": "${MINIFY:true}",
+
+  /*
+   * How long may clients use served javascript code (in seconds)?
+   *
+   * Not setting this may cause problems during deployment.
+   * Set to 0 to disable caching.
+   */
+  "maxAge": "${MAX_AGE:21600}", // 60 * 60 * 6 = 6 hours
+
+  /*
+   * Absolute path to the Abiword executable.
+   *
+   * Abiword is needed to get advanced import/export features of pads. Setting
+   * it to null disables Abiword and will only allow plain text and HTML
+   * import/exports.
+   */
+  "abiword": "${ABIWORD:null}",
+
+  /*
+   * This is the absolute path to the soffice executable.
+   *
+   * LibreOffice can be used in lieu of Abiword to export pads.
+   * Setting it to null disables LibreOffice exporting.
+   */
+  "soffice": "${SOFFICE:null}",
+
+  /*
+   * Path to the Tidy executable.
+   *
+   * Tidy is used to improve the quality of exported pads.
+   * Setting it to null disables Tidy.
+   */
+  "tidyHtml": "${TIDY_HTML:null}",
+
+  /*
+   * Allow import of file types other than the supported ones:
+   * txt, doc, docx, rtf, odt, html & htm
+   */
+  "allowUnknownFileEnds": "${ALLOW_UNKNOWN_FILE_ENDS:true}",
+
+  /*
+   * This setting is used if you require authentication of all users.
+   *
+   * Note: "/admin" always requires authentication.
+   */
+  "requireAuthentication": "${REQUIRE_AUTHENTICATION:false}",
+
+  /*
+   * Require authorization by a module, or a user with is_admin set, see below.
+   */
+  "requireAuthorization": "${REQUIRE_AUTHORIZATION:false}",
+
+  /*
+   * When you use NGINX or another proxy/load-balancer set this to true.
+   *
+   * This is especially necessary when the reverse proxy performs SSL
+   * termination, otherwise the cookies will not have the "secure" flag.
+   *
+   * The other effect will be that the logs will contain the real client's IP,
+   * instead of the reverse proxy's IP.
+   */
+  "trustProxy": "${TRUST_PROXY:false}",
+
+  /*
+   * Settings controlling the session cookie issued by Etherpad.
+   */
+  "cookie": {
+    /*
+     * Value of the SameSite cookie property. "Lax" is recommended unless
+     * Etherpad will be embedded in an iframe from another site, in which case
+     * this must be set to "None". Note: "None" will not work (the browser will
+     * not send the cookie to Etherpad) unless https is used to access Etherpad
+     * (either directly or via a reverse proxy with "trustProxy" set to true).
+     *
+     * "Strict" is not recommended because it has few security benefits but
+     * significant usability drawbacks vs. "Lax". See
+     * https://stackoverflow.com/q/41841880 for discussion.
+     */
+    "sameSite": "${COOKIE_SAME_SITE:Lax}"
+  },
+
+  /*
+   * Privacy: disable IP logging
+   */
+  "disableIPlogging": "${DISABLE_IP_LOGGING:false}",
+
+  /*
+   * Time (in seconds) to automatically reconnect pad when a "Force reconnect"
+   * message is shown to user.
+   *
+   * Set to 0 to disable automatic reconnection.
+   */
+  "automaticReconnectionTimeout": "${AUTOMATIC_RECONNECTION_TIMEOUT:1}",
+
+  /*
+   * By default, when caret is moved out of viewport, it scrolls the minimum
+   * height needed to make this line visible.
+   */
+  "scrollWhenFocusLineIsOutOfViewport": {
+
+    /*
+     * Percentage of viewport height to be additionally scrolled.
+     *
+     * E.g.: use "percentage.editionAboveViewport": 0.5, to place caret line in
+     *       the middle of viewport, when user edits a line above of the
+     *       viewport
+     *
+     * Set to 0 to disable extra scrolling
+     */
+    "percentage": {
+      "editionAboveViewport": "${FOCUS_LINE_PERCENTAGE_ABOVE:0}",
+      "editionBelowViewport": "${FOCUS_LINE_PERCENTAGE_BELOW:0}"
+    },
+
+    /*
+     * Time (in milliseconds) used to animate the scroll transition.
+     * Set to 0 to disable animation
+     */
+    "duration": "${FOCUS_LINE_DURATION:0}",
+
+    /*
+     * Flag to control if it should scroll when user places the caret in the
+     * last line of the viewport
+     */
+    "scrollWhenCaretIsInTheLastLineOfViewport": "${FOCUS_LINE_CARET_SCROLL:false}",
+
+    /*
+     * Percentage of viewport height to be additionally scrolled when user
+     * presses arrow up in the line of the top of the viewport.
+     *
+     * Set to 0 to let the scroll to be handled as default by Etherpad
+     */
+    "percentageToScrollWhenUserPressesArrowUp": "${FOCUS_LINE_PERCENTAGE_ARROW_UP:0}"
+  },
+
+  /*
+   * User accounts. These accounts are used by:
+   *   - default HTTP basic authentication if no plugin handles authentication
+   *   - some but not all authentication plugins
+   *   - some but not all authorization plugins
+   *
+   * User properties:
+   *   - password: The user's password. Some authentication plugins will ignore
+   *     this.
+   *   - is_admin: true gives access to /admin. Defaults to false. If you do not
+   *     uncomment this, /admin will not be available!
+   *   - readOnly: If true, this user will not be able to create new pads or
+   *     modify existing pads. Defaults to false.
+   *   - canCreate: If this is true and readOnly is false, this user can create
+   *     new pads. Defaults to true.
+   *
+   * Authentication and authorization plugins may define additional properties.
+   *
+   * WARNING: passwords should not be stored in plaintext in this file.
+   *          If you want to mitigate this, please install ep_hash_auth and
+   *          follow the section "secure your installation" in README.md
+   */
+
+  "users": {
+    "dvd": {
+      // 1) "password" can be replaced with "hash" if you install ep_hash_auth
+      // 2) please note that if password is null, the user will not be created
+      "password": "${ADMIN_PASSWORD:1qazse4}",
+      "is_admin": true
+    },
+    "user": {
+      // 1) "password" can be replaced with "hash" if you install ep_hash_auth
+      // 2) please note that if password is null, the user will not be created
+      "password": "${USER_PASSWORD:null}",
+      "is_admin": false
+    }
+  },
+
+  /*
+   * Restrict socket.io transport methods
+   */
+  "socketTransportProtocols" : ["xhr-polling", "jsonp-polling", "htmlfile"],
+
+  "socketIo": {
+    /*
+     * Maximum permitted client message size (in bytes). All messages from
+     * clients that are larger than this will be rejected. Large values make it
+     * possible to paste large amounts of text, and plugins may require a larger
+     * value to work properly, but increasing the value increases susceptibility
+     * to denial of service attacks (malicious clients can exhaust memory).
+     */
+    "maxHttpBufferSize": "${SOCKETIO_MAX_HTTP_BUFFER_SIZE:10000}"
+  },
+
+  /*
+   * Allow Load Testing tools to hit the Etherpad Instance.
+   *
+   * WARNING: this will disable security on the instance.
+   */
+  "loadTest": "${LOAD_TEST:false}",
+
+  /**
+  * Disable dump of objects preventing a clean exit
+  */
+  "dumpOnUncleanExit": "${DUMP_ON_UNCLEAN_EXIT:false}",
+
+  /*
+   * Disable indentation on new line when previous line ends with some special
+   * chars (':', '[', '(', '{')
+   */
+
+  /*
+  "indentationOnNewLine": false,
+  */
+
+  /*
+   * From Etherpad 1.8.3 onwards, import and export of pads is always rate
+   * limited.
+   *
+   * The default is to allow at most 10 requests per IP in a 90 seconds window.
+   * After that the import/export request is rejected.
+   *
+   * See https://github.com/nfriedly/express-rate-limit for more options
+   */
+  "importExportRateLimiting": {
+    // duration of the rate limit window (milliseconds)
+    "windowMs": "${IMPORT_EXPORT_RATE_LIMIT_WINDOW:90000}",
+
+    // maximum number of requests per IP to allow during the rate limit window
+    "max": "${IMPORT_EXPORT_MAX_REQ_PER_IP:10}"
+  },
+
+  /*
+   * From Etherpad 1.8.3 onwards, the maximum allowed size for a single imported
+   * file is always bounded.
+   *
+   * File size is specified in bytes. Default is 50 MB.
+   */
+  "importMaxFileSize": "${IMPORT_MAX_FILE_SIZE:52428800}", // 50 * 1024 * 1024
+
+  /*
+   * From Etherpad 1.8.5 onwards, when Etherpad is in production mode commits from individual users are rate limited
+   *
+   * The default is to allow at most 10 changes per IP in a 1 second window.
+   * After that the change is rejected.
+   *
+   * See https://github.com/animir/node-rate-limiter-flexible/wiki/Overall-example#websocket-single-connection-prevent-flooding for more options
+   */
+  "commitRateLimiting": {
+    // duration of the rate limit window (seconds)
+    "duration": "${COMMIT_RATE_LIMIT_DURATION:1}",
+
+    // maximum number of changes per IP to allow during the rate limit window
+    "points": "${COMMIT_RATE_LIMIT_POINTS:10}"
+  },
+
+  /*
+   * Toolbar buttons configuration.
+   *
+   * Uncomment to customize.
+   */
+
+  /*
+  "toolbar": {
+    "left": [
+      ["bold", "italic", "underline", "strikethrough"],
+      ["orderedlist", "unorderedlist", "indent", "outdent"],
+      ["undo", "redo"],
+      ["clearauthorship"]
+    ],
+    "right": [
+      ["importexport", "timeslider", "savedrevision"],
+      ["settings", "embed"],
+      ["showusers"]
+    ],
+    "timeslider": [
+      ["timeslider_export", "timeslider_returnToPad"]
+    ]
+  },
+  */
+
+  /*
+   * Expose Etherpad version in the web interface and in the Server http header.
+   *
+   * Do not enable on production machines.
+   */
+  "exposeVersion": "${EXPOSE_VERSION:false}",
+
+  /*
+   * The log level we are using.
+   *
+   * Valid values: DEBUG, INFO, WARN, ERROR
+   */
+  "loglevel": "${LOGLEVEL:INFO}",
+
+  /* Override any strings found in locale directories */
+  "customLocaleStrings": {}
+}