akaunting 3.0 (the last dance)

public/akaunting-js/generalAction.js

@@ -0,0 +1,278 @@
+// remove dropdown menu when mouseleave in index more actions
+document.querySelectorAll("[data-table-list]").forEach((row) => {
+  row.addEventListener("mouseleave", function() {
+      if (row.querySelector("[data-dropdown-actions]")) {
+          row.querySelector("[data-dropdown-actions]").classList.remove("block");
+          row.querySelector("[data-dropdown-actions]").classList.add("hidden");
+      }
+  });
+});
+// remove dropdown menu when mouseleave in index more actions
+
+//redirect edit or show page for table row click
+document.querySelectorAll("[data-table-body]").forEach((table) => {
+  let rows = table.querySelectorAll("tr");
+
+  rows.forEach((row) => {
+      let row_href = row.getAttribute("href");
+
+      if (! row_href) {
+          return;
+      }
+
+      let td = row.getElementsByTagName("td");
+      let first_selector = row.querySelector('[data-bulkaction]') && row.querySelector('[data-bulkaction]') !== null ? 1 : 0;
+
+      if (row_href) {
+        for (let i=first_selector; i<td.length-1; i++) {
+            let td_item = td[i];
+            td_item.addEventListener("click", () => {
+                window.location.href = row_href;
+            });
+        }
+    }
+  });
+});
+//redirect edit or show page for table row click
+
+//collapse accordion
+function toggleSub(key, event) {
+  let isExpanded =
+      document.querySelectorAll(
+          `[data-collapse="${key}"]` + ".active-collapse"
+      ).length > 0;
+
+  if (isExpanded) {
+      this.collapseSub(key, event);
+  } else {
+      this.expandSub(key, event);
+  }
+}
+
+function collapseSub(key, event) {
+  event.stopPropagation();
+  event.target.classList.add("rotate-90");
+
+  document
+      .querySelectorAll(`[data-collapse="${key}"]` + ".active-collapse")
+      .forEach(function(element) {
+          element.classList.toggle("active-collapse");
+          element.classList.toggle("collapse-sub");
+      });
+
+  // if collapsed key has childs(table row constantly), they will be collapsed as well
+  document
+      .querySelectorAll(`[data-collapse="${key}"]` + " button[node|='child']")
+      .forEach(function(element) {
+              element.childNodes[0].classList.add("rotate-90")
+
+              this.collapseSub(element.getAttribute("node"), event);
+          }.bind(this)
+      );
+}
+
+function expandSub(key, event) {
+  event.stopPropagation();
+  event.target.classList.remove("rotate-90");
+
+  document
+      .querySelectorAll(`[data-collapse="${key}"]`)
+      .forEach(function(element) {
+          if (element.getAttribute("data-animation")) {
+              element.classList.toggle("active-collapse-animation");
+          }
+
+          element.classList.toggle("active-collapse");
+          element.classList.toggle("collapse-sub");
+      });
+}
+//collapse accordion
+
+// run dropdown and tooltip functions for Virtual DOM
+document.addEventListener("DOMContentLoaded", () => {
+    const triggers = [
+        { event: "mouseover", checker: isHoverable },
+        { event: "mouseout", checker: isHoverable },
+        { event: "click", checker: isClickable },
+    ];
+
+    triggers.forEach(({ event, checker, fn }) => {
+        document.addEventListener(
+            event,
+            (e) => {
+                const dropdownToggleEl = e.target.closest(
+                    "[data-dropdown-toggle]"
+                );
+                const tooltipToggleEl = e.target.closest(
+                    "[data-tooltip-target]"
+                );
+                if (dropdownToggleEl !== null && event == "click") {
+                    runDropdown(dropdownToggleEl);
+                }
+
+                if (tooltipToggleEl !== null && event == "mouseover") {
+                  runTooltip(tooltipToggleEl);
+              }
+            },
+            false
+        );
+    });
+});
+
+function isClickable(dropdownToggleEl) {
+    return dropdownToggleEl.getAttribute("data-dropdown-toggle") === "click";
+}
+
+function isHoverable(tooltipToggleEl) {
+    return tooltipToggleEl.getAttribute("data-tooltip-target") === "hover";
+}
+//run dropdown and tooltip functions for Virtual DOM
+
+// Toggle dropdown elements using [data-dropdown-toggle]
+function runDropdown(dropdownToggleEl) {
+    const dropdownMenuId = dropdownToggleEl.getAttribute(
+        "data-dropdown-toggle"
+    );
+    const dropdownMenuEl = document.getElementById(dropdownMenuId); // options
+
+    const placement = dropdownToggleEl.getAttribute("data-dropdown-placement");
+
+    var element = dropdownToggleEl;
+
+    while (element.nodeName !== "BUTTON") {
+        element = element.parentNode;
+    }
+
+    Popper.createPopper(element, dropdownMenuEl, {
+        placement: placement ? placement : "bottom-start",
+        modifiers: [
+            {
+                name: "offset",
+                options: {
+                    offset: [0, 10],
+                },
+            },
+        ],
+    }); // toggle when click on the button
+
+    dropdownMenuEl.classList.toggle("hidden");
+    dropdownMenuEl.classList.toggle("block");
+
+    function handleDropdownOutsideClick(event) {
+        var targetElement = event.target; // clicked element
+
+        if (
+            targetElement !== dropdownMenuEl &&
+            targetElement !== dropdownToggleEl &&
+            !dropdownToggleEl.contains(targetElement)
+        ) {
+            dropdownMenuEl.classList.add("hidden");
+            dropdownMenuEl.classList.remove("block");
+            document.body.removeEventListener(
+                "click",
+                handleDropdownOutsideClick,
+                true
+            );
+        }
+    } // hide popper when clicking outside the element
+
+    document.body.addEventListener("click", handleDropdownOutsideClick, true);
+
+    if (dropdownMenuEl.getAttribute("data-click-outside-none") != null) {
+        if (event.target.getAttribute("data-click-outside") != null || event.target.parentElement.getAttribute("data-click-outside") != null) {
+            dropdownMenuEl.classList.add("hidden");
+            dropdownMenuEl.classList.remove("block");
+            return;
+        }
+        dropdownMenuEl.classList.add("block");
+        dropdownMenuEl.classList.remove("hidden");
+    }
+}
+// Toggle dropdown elements using [data-dropdown-toggle]
+
+// Tooltip elements using [data-tooltip-target], [data-tooltip-placement]
+function runTooltip(tooltipToggleEl) {
+    const tooltipEl = document.getElementById(
+        tooltipToggleEl.getAttribute("data-tooltip-target")
+    );
+    const placement = tooltipToggleEl.getAttribute("data-tooltip-placement");
+    const trigger = tooltipToggleEl.getAttribute("data-tooltip-trigger");
+    const popperInstance = Popper.createPopper(tooltipToggleEl, tooltipEl, {
+        placement: placement ? placement : "top",
+        modifiers: [
+            {
+                name: "offset",
+                options: {
+                    offset: [0, 8],
+                },
+            },
+        ],
+    });
+
+    function show() {
+        // Make the tooltip visible
+        tooltipEl.classList.remove("opacity-0");
+        tooltipEl.classList.add("opacity-100");
+        tooltipEl.classList.remove("invisible");
+        tooltipEl.classList.add("visible"); // Enable the event listeners
+
+        popperInstance.setOptions((options) => ({
+            ...options,
+            modifiers: [
+                ...options.modifiers,
+                {
+                    name: "eventListeners",
+                    enabled: true,
+                },
+            ],
+        })); // Update its position
+
+        popperInstance.update();
+    }
+
+    function hide() {
+        // Hide the tooltip
+        tooltipEl.classList.remove("opacity-100");
+        tooltipEl.classList.add("opacity-0");
+        tooltipEl.classList.remove("visible");
+        tooltipEl.classList.add("invisible"); // Disable the event listeners
+
+        popperInstance.setOptions((options) => ({
+            ...options,
+            modifiers: [
+                ...options.modifiers,
+                {
+                    name: "eventListeners",
+                    enabled: false,
+                },
+            ],
+        }));
+    }
+
+    var showEvents = [];
+    var hideEvents = [];
+
+    switch (trigger) {
+        case "hover":
+            showEvents = ["mouseenter", "focus"];
+            hideEvents = ["mouseleave", "blur"];
+            break;
+
+        case "click":
+            showEvents = ["click", "focus"];
+            hideEvents = ["focusout", "blur"];
+            break;
+
+        default:
+            showEvents = ["mouseenter", "focus"];
+            hideEvents = ["mouseleave", "blur"];
+    }
+
+    showEvents.forEach((event) => {
+        tooltipToggleEl.addEventListener(event, show);
+    });
+    hideEvents.forEach((event) => {
+        tooltipToggleEl.addEventListener(event, hide);
+    });
+}
+// Tooltip elements using [data-tooltip-target], [data-tooltip-placement]

public/akaunting-js/hotkeys.js

@@ -0,0 +1,62 @@
+let shortcuts;
+
+axios.get('public/shortcuts-config.json')
+  .then(function (response) {
+    shortcuts = response.data
+  })
+
+const handlePageEvent = (event, routeData) => {
+    const hotkeys = Object.keys(routeData);
+
+    hotkeys.includes([event.code])
+        ? routeData[event.code]() //type of function - to execute when the event happens
+        : {}
+};
+
+const handlePrint = () => {
+    window.location.replace(window.location.href + '/print');
+};
+
+const handleKeydown = (event) => {
+    const keyName = event.key;
+    const urlPath = window.location.href;
+    const constainsDocID = !isNaN(urlPath.substr(-1));
+
+    if (keyName === ('Meta' || 'Control' || 'Alt')) {
+        return;
+    }
+
+    if (event.metaKey || event.ctrlKey) {
+        const action = shortcuts.ctrlKey[event.code];
+
+        action
+            ? (event.preventDefault(), handleShortCuts(action))
+            : {};
+    }
+
+    if (event.altKey) {
+        const action = shortcuts.altKey[event.code];
+
+        action
+            ? handleShortCuts(action)
+            : {};
+    }
+
+    const matchingRoute = Object.keys(shortcuts.pages).filter(route => urlPath.includes(route));
+
+    matchingRoute 
+        ? constainsDocID && event.code === 'KeyP'
+            ? handlePrint()
+            : handlePageEvent(event, matchingRoute)
+        : {};
+};
+
+const handleShortCuts = (target) => {
+    let targetURL = url + target;
+
+    window.location.replace(targetURL);
+};
+
+document.addEventListener('keydown', (event) => {
+    handleKeydown(event)
+}, false);

public/css/element.css

@@ -15438,7 +15438,7 @@
 
 .el-color-picker__color
 {
-    margin-top: 10 !important;
+    margin-top: 10px !important;
     height: 18px !important;
     margin-left: 7px !important;
 }

public/css/fonts/material-icons/style.css

@@ -0,0 +1,141 @@
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 100;
+  src: url(./Regular/MaterialIcons-Regular.eot); /* For IE6-8 */
+  src: local('Material Icons'),
+    local('MaterialIcons-Regular'),
+    url(./Regular/MaterialIcons-Regular.woff2) format('woff2'),
+    url(./Regular/MaterialIcons-Regular.woff) format('woff'),
+    url(./Regular/MaterialIcons-Regular.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Material Icons Outlined';
+  font-style: normal;
+  font-weight: 100;
+  src: url(./Outlined/MaterialIconsOutlined-Regular.eot); /* For IE6-8 */
+  src: local('Material Icons Outlined'),
+    local('MaterialIconsOutlined-Regular'),
+    url(./Outlined/MaterialIconsOutlined-Regular.woff2) format('woff2'),
+    url(./Outlined/MaterialIconsOutlined-Regular.woff) format('woff'),
+    url(./Outlined/MaterialIconsOutlined-Regular.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Material Icons Round';
+  font-style: normal;
+  font-weight: 400;
+  src: url(./Rounded/MaterialIconsRound-Regular.eot); /* For IE6-8 */
+  src: local('Material Icons Round'),
+    local('MaterialIconsRound-Regular'),
+    url(./Rounded/MaterialIconsRound-Regular.woff2) format('woff2'),
+    url(./Rounded/MaterialIconsRound-Regular.woff) format('woff'),
+    url(./Rounded/MaterialIconsRound-Regular.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Material Icons Sharp';
+  font-style: normal;
+  font-weight: 400;
+  src: url(./Sharp/MaterialIconsSharp-Regular.eot); /* For IE6-8 */
+  src: local('Material Icons Sharp'),
+    local('MaterialIconsSharp-Regular'),
+    url(./Sharp/MaterialIconsSharp-Regular.woff2) format('woff2'),
+    url(./Sharp/MaterialIconsSharp-Regular.woff) format('woff'),
+    url(./Sharp/MaterialIconsSharp-Regular.ttf) format('truetype');
+}
+
+.material-icons-outlined.active {
+  font-family: 'Material Icons';
+}
+
+.material-icons.active {
+  font-family: 'Material Icons';
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}
+
+.material-icons-outlined {
+  font-family: 'Material Icons Outlined';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
+.material-icons-round {
+  font-family: 'Material Icons Round';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
+.material-icons-sharp {
+  font-family: 'Material Icons Sharp';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
+.material-icons.text-red, .material-icons-outlined.text-red, .material-icons-round.text-red, .material-icons-sharp.text-red   { color: #CC0000; }
+
+.material-icons.text-green, .material-icons-outlined.text-green, .material-icons-round.text-green, .material-icons-sharp.text-green { color: #6EA152; }
+
+.material-icons.text-purple, .material-icons-outlined.text-purple, .material-icons-round.text-purple, .material-icons-sharp.text-purple { color: #55588B; }
+
+.material-icons.text-yellow, .material-icons-outlined.text-yellow, .material-icons-round.text-yellow, .material-icons-sharp.text-yellow { color: #FFD600; }
+
+.material-icons.text-blue { color: #006EA6; }
+
+.material-icons.text-orange { color: #FABC2A; }
+

public/css/maintenance.css

@@ -1,32 +0,0 @@
-@charset "UTF-8";
-
-html, body {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    background-color: #333;
-    -webkit-transform-style: preserve-3d;
-    -moz-transform-style: preserve-3d;
-    transform-style: preserve-3d;
-    font-family: 'Open Sans', sans-serif;
-}
-
-header {
-    color: #fff;
-    position: relative;
-    top: 50%;
-    transform: translateY(-50%);
-    text-align: center;
-    margin: 0 auto;
-}
-
-header h1, header p  {
-    margin: 0;
-    padding: .25em 0;
-}
-
-header p {
-    color: #999;
-    font-size: .8em;
-}

public/css/print.css

@@ -1,11 +1,7 @@
 @charset "UTF-8";
 
 /*--General Start--*/
-body
-{
-    margin: 0;
-    padding: 0;
-    font-family: Arial, sans-serif;
+.print-content {
     color: #3c3f72;
 }
 
@@ -16,7 +12,41 @@ table
 
 th, td
 {
-    padding: 18px 9px 18px 9px;
+    padding: 10px 9px 10px 9px;
+}
+
+p {
+    color: #424242;
+    margin-bottom: 9px;
+}
+
+.spacing {
+    display: inline-block;
+    margin-bottom: 9px;
+}
+
+.right-column {
+    text-align: right;
+}
+
+.small-text {
+    font-size: 10px;
+}
+
+.text-medium {
+    font-weight: 500;
+}
+
+.text-normal {
+    font-size: 14px;
+}
+
+.text-default {
+    font-size: 12px;
+}
+
+.text-semibold {
+    font-weight: 600;
 }
 
 .row
@@ -39,6 +69,11 @@ th, td
     margin-left: 8px;
 }
 
+.pl-head
+{
+    padding-left: 18px;
+}
+
 .mt-0
 {
     margin-top: 0 !important;
@@ -101,24 +136,36 @@ th, td
 
 .py-1
 {
-    padding-bottom: 8px;
-    padding-top: 8px;
+    padding-bottom: 3px;
+    padding-top: 3px;
 }
 
-.py-2
+.py-top
 {
     padding-bottom: 16px;
     padding-top: 16px;
 }
 
-.pr-2
-{
-    padding-right: 16px;
+.p-index-left {
+    padding: 0 15px 0 0;
 }
 
-.pl-2
+.p-index-right {
+    padding: 0 0 0 15px;
+}
+
+.p-modern {
+    padding: 0 10px 0 10px;
+}
+
+.pt-2
 {
-    padding-left: 16px;
+    padding-top: 16px;
+}
+
+.pb-2
+{
+    padding-bottom: 16px;
 }
 
 .pl-3
@@ -163,12 +210,12 @@ th, td
 
 .border-top-1
 {
-     border-top: 1px solid #e5e5e5;
+    border-top: 1px solid #adadad;
 }
 
 .border-bottom-1
 {
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid #adadad;
 }
 
 .border-radius-default
@@ -176,6 +223,22 @@ th, td
     border-radius: 0.25rem
 }
 
+html[dir='ltr'] .border-radius-first {
+    border-radius: 10px 0px 0px 10px;
+}
+
+html[dir='rtl'] .border-radius-first {
+    border-radius: 0px 10px 10px 0px;
+}
+
+html[dir='ltr'] .border-radius-last {
+    border-radius: 0px 10px 10px 0px;
+}
+
+html[dir='rtl'] .border-radius-last {
+    border-radius: 10px 0px 0px 10px;
+}
+
 .float-left
 {
     float: left !important;
@@ -193,9 +256,13 @@ th, td
 
 .text
 {
-    color: #3c3f72;
+    color: #595959;
     margin-top:8px;
-    font-size: 13px;
+    font-size: 12px;
+}
+
+.text-dark {
+    color: black;
 }
 
 .text-nowrap
@@ -208,6 +275,22 @@ th, td
     text-align: left;
 }
 
+html[dir='ltr'] .text-alignment-left {
+    text-align: left;
+}
+
+html[dir='rtl'] .text-alignment-left {
+    text-align: right;
+}
+
+html[dir='lte'] .text-alignment-right {
+    text-align: right;
+}
+
+html[dir='rtl'] .text-alignment-right {
+    text-align: left;
+}
+
 .text-right
 {
     text-align: right;
@@ -223,18 +306,30 @@ th, td
     color: #ffffff;
 }
 
+.mt-classic
+{
+    margin-top: 6px;
+}
+
 .bg-default
 {
     background-color: #3c3f72;
 }
 
-.bg-primary
-{
-    background-color: #55588b;
+.radius-circle {
+    border-radius: 50%;
 }
+
 /*--General Finish--*/
 
 /*--Print Template Default Start--*/
+.col-60
+{
+    display: inline-block;
+    width: 60%;
+    vertical-align: top;
+}
+
 .col-58
 {
     display: inline-block;
@@ -242,6 +337,13 @@ th, td
     vertical-align: top;
 }
 
+.col-50
+{
+    display: inline-block;
+    width: 50%;
+    vertical-align: top;
+}
+
 .col-42
 {
     display: inline-block;
@@ -249,6 +351,13 @@ th, td
     vertical-align: top;
 }
 
+.col-40
+{
+    display: inline-block;
+    width: 40%;
+    vertical-align: top;
+}
+
 .col-16
 {
     display: inline-block;
@@ -263,27 +372,43 @@ th, td
     vertical-align: top;
 }
 
+.w-image {
+    width: 70px;
+}
+
+.w-numbers {
+    width: 93px;
+}
+
 .lines
 {
     border-collapse: collapse;
     table-layout: fixed;
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid #adadad;
 }
 
+.lines thead {
+    -moz-border-radius: 10px;
+	-webkit-border-radius: 10px;
+	border-radius: 10px;
+}
+
+
 .lines tbody td
 {
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid #adadad;
 }
 
+
 .lines .item
 {
-    width: 50%;
+    width: 40%;
 }
 
 .lines .quantity
 {
     width: 10%;
-    text-align: center;
+    text-align: right;
 }
 
 .lines .price
@@ -304,10 +429,18 @@ th, td
     text-align: right;
 }
 
+.modern-lines {
+    border-bottom: unset;
+}
+
+.modern-lines tbody td {
+    border-bottom: unset;
+}
+
 .d-logo
 {
-    padding-top: 35px;
-    padding-bottom:64.5px;
+    padding-top: 18px;
+    padding-bottom: 30px;
 }
 
 .d-note
@@ -330,22 +463,29 @@ th, td
 
 .invoice-classic-line
 {
-    border: 2px solid #3c3f72;
+    height: 1px;
+    background-color: #adadad;
 }
 
 .invoice-classic-frame
 {
     width: 90%;
-    height:70px;
-    border: 3px solid #3c3f72;
+    height: 60px;
+    border: 1px solid #adadad;
+    border-radius: 10px;
 }
 
 .invoice-classic-inline-frame
 {
-    margin: 0.3% 1% 0.3% 1%;
+    margin: 4.5px auto;
     width: 95% !important;
-    height: 59px;
-    border: 3px solid #3c3f72;
+    height: 50px;
+    border: 1px solid #adadad;
+    border-radius: 10px;
+}
+
+.modern-head {
+    border-radius: 10px;
 }
 
 .col-33
@@ -357,7 +497,7 @@ th, td
 
 .c-lines thead th
 {
-    border-top: 1px dashed #e5e5e5;
+    border-bottom: 1px dashed #e5e5e5;
 }
 
 .c-lines tbody td
@@ -367,13 +507,13 @@ th, td
 
 .c-lines .item
 {
-    width: 50%;
+    width: 40%;
 }
 
 .c-lines .quantity
 {
     width: 10%;
-    text-align: center;
+    text-align: right;
 }
 
 .c-lines .price
@@ -394,9 +534,14 @@ th, td
     text-align: right;
 }
 
-.border-top-dashed
+.border-bottom-dashed
 {
-    border-top: 1px dashed #e5e5e5;
+    border-bottom: 1px dashed #e5e5e5;
+}
+
+.border-bottom-dashed-black
+{
+    border-bottom: 1px dashed #595959;
 }
 /*--Print Template Classic Finish--*/
 
@@ -416,36 +561,36 @@ th, td
     width: 80%;
 }
 
-.m-lines
+.modern-lines
 {
     border-collapse: collapse;
     table-layout: fixed;
 }
 
-.m-lines .item
+.modern-lines .item
 {
-    width: 50%;
+    width: 40%;
 }
 
-.m-lines .quantity
+.modern-lines .quantity
 {
     width: 10%;
     text-align: center;
 }
 
-.m-lines .price
+.modern-lines .price
 {
     width: 20%;
     text-align: right;
 }
 
-.m-lines .discount
+.modern-lines .discount
 {
     width: 10%;
     text-align: right;
 }
 
-.m-lines .total
+.modern-lines .total
 {
     width: 20%;
     text-align: right;
@@ -460,7 +605,7 @@ th, td
 
 .rp-border-bottom-1
 {
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid #adadad;
 }
 
 .rp-border-top-1
@@ -489,13 +634,6 @@ th, td
 }
 /*--Print Reports Finish--*/
 
-.lines .empty-items:hover,
-.c-lines .empty-items:hover,
-.m-lines .empty-items:hover {
-    background-color: #f6f9fc;
-    text-decoration: none;
-}
-
 .clearfix:after {
 	display: block;
 	clear: both;
@@ -533,6 +671,55 @@ th, td
     min-height: 52px;
 }
 
+.extra-spacing {
+    margin-top: 30px;
+}
+
+.top-spacing {
+    margin-top: 20px;
+}
+
+/*--Print--*/
+
+.col-2 {
+    width: 16.666667%;
+}
+
+.col-4 {
+    width: 33.333333%;
+}
+
+html[dir='ltr'] .print-alignment {
+    text-align: right;
+}
+
+html[dir='rtl'] .print-alignment {
+    text-align: left;
+}
+
+.print-heading {
+    color: #55588b;
+    font-weight: bold;
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+    border-bottom: 1px solid;
+}
+
+html[dir='ltr'] .print-heading {
+    text-align: left;
+}
+
+html[dir='rtl'] .print-heading {
+    text-align: right;
+}
+/*--Print --*/
+
+@media (max-width: 1600px) {
+    .p-index-right {
+        padding: 0;
+    }
+}
+
 @media (max-width: 1200px) {
     .transaction-head-text {
         max-width: 100px !important;

public/css/third_party/dropzone_custom.css

@@ -0,0 +1,99 @@
+.dropzone {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  margin-top: 0.25rem;
+}
+
+.dropzone-column {
+  height: calc(100% - 23px);
+  height: -webkit-calc(100% - 23px);
+  height: -moz-calc(100% - 23px);
+}
+
+.dz-preview-cover, .dz-preview-single {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: .375rem;
+}
+
+.dz-message {
+  padding: 5rem 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  border: 1px dashed #C7C9D9;
+  border-radius: .375rem;
+  text-align: center;
+  color: #595959;
+  transition: all .15s ease;
+  order: -1;
+  cursor: pointer;
+  z-index: 9;
+}
+
+.dz-message:hover {
+  border-color: #424242;
+}
+
+.dropzone-multiple .dz-message {
+  height: 5rem;
+  padding: 0;
+}
+
+.dropzone-single .dz-message {
+  height: 100%;
+  padding: 0.5rem 1rem;
+}
+
+.dropzone-column .dz-message {
+  height: 100%;
+  padding: 0;
+}
+
+.dropzone-single.dz-max-files-reached .dz-message {
+  background-color: rgba(0,0,0,.2);
+  color: #fff;
+  opacity: 0;
+}
+
+.dropzone-single.dz-max-files-reached .dz-message:hover {
+  opacity:1
+}
+
+.dz-message .dz-button {
+  background: hsla(0,0%,100%,0);
+  border: none;
+  color: #C7C9D9;
+}
+
+.dz-preview-img {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  border-radius: .375rem;
+}
+
+.dropzone-single.dz-max-files-reached .dz-message {
+  background-color: rgba(0,0,0,.9);
+  color: #fff;
+  opacity: 0;
+}
+
+.dropzone .avatar {
+    color: #fff;
+    background-color: #adb5bd;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: .375rem;
+    font-size: 1rem;
+    height: 45px;
+    width: 45px;
+}
+
+

public/css/third_party/vue-html-editor.css

@@ -0,0 +1,945 @@
+/*!
+ * Quill Editor v1.3.6
+ * https://quilljs.com/
+ * Copyright (c) 2014, Jason Chen
+ * Copyright (c) 2013, salesforce.com
+ */
+.ql-container {
+  box-sizing: border-box;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  height: 100%;
+  margin: 0px;
+  position: relative;
+}
+.ql-container.ql-disabled .ql-tooltip {
+  visibility: hidden;
+}
+.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
+  pointer-events: none;
+}
+.ql-clipboard {
+  left: -100000px;
+  height: 1px;
+  overflow-y: hidden;
+  position: absolute;
+  top: 50%;
+}
+.ql-clipboard p {
+  margin: 0;
+  padding: 0;
+}
+.ql-editor {
+  box-sizing: border-box;
+  line-height: 1.42;
+  height: 100%;
+  outline: none;
+  overflow-y: auto;
+  padding: 12px 15px;
+  tab-size: 4;
+  -moz-tab-size: 4;
+  text-align: left;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+.ql-editor > * {
+  cursor: text;
+}
+.ql-editor p,
+.ql-editor ol,
+.ql-editor ul,
+.ql-editor pre,
+.ql-editor blockquote,
+.ql-editor h1,
+.ql-editor h2,
+.ql-editor h3,
+.ql-editor h4,
+.ql-editor h5,
+.ql-editor h6 {
+  margin: 0;
+  padding: 0;
+  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol,
+.ql-editor ul {
+  padding-left: 1.5em;
+}
+.ql-editor ol > li,
+.ql-editor ul > li {
+  list-style-type: none;
+}
+.ql-editor ul > li::before {
+  content: '\2022';
+}
+.ql-editor ul[data-checked=true],
+.ql-editor ul[data-checked=false] {
+  pointer-events: none;
+}
+.ql-editor ul[data-checked=true] > li *,
+.ql-editor ul[data-checked=false] > li * {
+  pointer-events: all;
+}
+.ql-editor ul[data-checked=true] > li::before,
+.ql-editor ul[data-checked=false] > li::before {
+  color: #777;
+  cursor: pointer;
+  pointer-events: all;
+}
+.ql-editor ul[data-checked=true] > li::before {
+  content: '\2611';
+}
+.ql-editor ul[data-checked=false] > li::before {
+  content: '\2610';
+}
+.ql-editor li::before {
+  display: inline-block;
+  white-space: nowrap;
+  width: 1.2em;
+}
+.ql-editor li:not(.ql-direction-rtl)::before {
+  margin-left: -1.5em;
+  margin-right: 0.3em;
+  text-align: right;
+}
+.ql-editor li.ql-direction-rtl::before {
+  margin-left: 0.3em;
+  margin-right: -1.5em;
+}
+.ql-editor ol li:not(.ql-direction-rtl),
+.ql-editor ul li:not(.ql-direction-rtl) {
+  padding-left: 1.5em;
+}
+.ql-editor ol li.ql-direction-rtl,
+.ql-editor ul li.ql-direction-rtl {
+  padding-right: 1.5em;
+}
+.ql-editor ol li {
+  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+  counter-increment: list-0;
+}
+.ql-editor ol li:before {
+  content: counter(list-0, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-1 {
+  counter-increment: list-1;
+}
+.ql-editor ol li.ql-indent-1:before {
+  content: counter(list-1, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-1 {
+  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-2 {
+  counter-increment: list-2;
+}
+.ql-editor ol li.ql-indent-2:before {
+  content: counter(list-2, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-2 {
+  counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-3 {
+  counter-increment: list-3;
+}
+.ql-editor ol li.ql-indent-3:before {
+  content: counter(list-3, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-3 {
+  counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-4 {
+  counter-increment: list-4;
+}
+.ql-editor ol li.ql-indent-4:before {
+  content: counter(list-4, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-4 {
+  counter-reset: list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-5 {
+  counter-increment: list-5;
+}
+.ql-editor ol li.ql-indent-5:before {
+  content: counter(list-5, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-5 {
+  counter-reset: list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-6 {
+  counter-increment: list-6;
+}
+.ql-editor ol li.ql-indent-6:before {
+  content: counter(list-6, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-6 {
+  counter-reset: list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-7 {
+  counter-increment: list-7;
+}
+.ql-editor ol li.ql-indent-7:before {
+  content: counter(list-7, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-7 {
+  counter-reset: list-8 list-9;
+}
+.ql-editor ol li.ql-indent-8 {
+  counter-increment: list-8;
+}
+.ql-editor ol li.ql-indent-8:before {
+  content: counter(list-8, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-8 {
+  counter-reset: list-9;
+}
+.ql-editor ol li.ql-indent-9 {
+  counter-increment: list-9;
+}
+.ql-editor ol li.ql-indent-9:before {
+  content: counter(list-9, decimal) '. ';
+}
+.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
+  padding-left: 3em;
+}
+.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
+  padding-left: 4.5em;
+}
+.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
+  padding-right: 3em;
+}
+.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
+  padding-right: 4.5em;
+}
+.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
+  padding-left: 6em;
+}
+.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
+  padding-left: 7.5em;
+}
+.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
+  padding-right: 6em;
+}
+.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
+  padding-right: 7.5em;
+}
+.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
+  padding-left: 9em;
+}
+.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
+  padding-left: 10.5em;
+}
+.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
+  padding-right: 9em;
+}
+.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
+  padding-right: 10.5em;
+}
+.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
+  padding-left: 12em;
+}
+.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
+  padding-left: 13.5em;
+}
+.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
+  padding-right: 12em;
+}
+.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
+  padding-right: 13.5em;
+}
+.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
+  padding-left: 15em;
+}
+.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
+  padding-left: 16.5em;
+}
+.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
+  padding-right: 15em;
+}
+.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
+  padding-right: 16.5em;
+}
+.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
+  padding-left: 18em;
+}
+.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
+  padding-left: 19.5em;
+}
+.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
+  padding-right: 18em;
+}
+.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
+  padding-right: 19.5em;
+}
+.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
+  padding-left: 21em;
+}
+.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
+  padding-left: 22.5em;
+}
+.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
+  padding-right: 21em;
+}
+.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
+  padding-right: 22.5em;
+}
+.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
+  padding-left: 24em;
+}
+.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
+  padding-left: 25.5em;
+}
+.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
+  padding-right: 24em;
+}
+.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
+  padding-right: 25.5em;
+}
+.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
+  padding-left: 27em;
+}
+.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
+  padding-left: 28.5em;
+}
+.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
+  padding-right: 27em;
+}
+.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
+  padding-right: 28.5em;
+}
+.ql-editor .ql-video {
+  display: block;
+  max-width: 100%;
+}
+.ql-editor .ql-video.ql-align-center {
+  margin: 0 auto;
+}
+.ql-editor .ql-video.ql-align-right {
+  margin: 0 0 0 auto;
+}
+.ql-editor .ql-bg-black {
+  background-color: #000;
+}
+.ql-editor .ql-bg-red {
+  background-color: #e60000;
+}
+.ql-editor .ql-bg-orange {
+  background-color: #f90;
+}
+.ql-editor .ql-bg-yellow {
+  background-color: #ff0;
+}
+.ql-editor .ql-bg-green {
+  background-color: #008a00;
+}
+.ql-editor .ql-bg-blue {
+  background-color: #06c;
+}
+.ql-editor .ql-bg-purple {
+  background-color: #93f;
+}
+.ql-editor .ql-color-white {
+  color: #fff;
+}
+.ql-editor .ql-color-red {
+  color: #e60000;
+}
+.ql-editor .ql-color-orange {
+  color: #f90;
+}
+.ql-editor .ql-color-yellow {
+  color: #ff0;
+}
+.ql-editor .ql-color-green {
+  color: #008a00;
+}
+.ql-editor .ql-color-blue {
+  color: #06c;
+}
+.ql-editor .ql-color-purple {
+  color: #93f;
+}
+.ql-editor .ql-font-serif {
+  font-family: Georgia, Times New Roman, serif;
+}
+.ql-editor .ql-font-monospace {
+  font-family: Monaco, Courier New, monospace;
+}
+.ql-editor .ql-size-small {
+  font-size: 0.75em;
+}
+.ql-editor .ql-size-large {
+  font-size: 1.5em;
+}
+.ql-editor .ql-size-huge {
+  font-size: 2.5em;
+}
+.ql-editor .ql-direction-rtl {
+  direction: rtl;
+  text-align: inherit;
+}
+.ql-editor .ql-align-center {
+  text-align: center;
+}
+.ql-editor .ql-align-justify {
+  text-align: justify;
+}
+.ql-editor .ql-align-right {
+  text-align: right;
+}
+.ql-editor.ql-blank::before {
+  color: rgba(0,0,0,0.6);
+  content: attr(data-placeholder);
+  font-style: italic;
+  left: 15px;
+  pointer-events: none;
+  position: absolute;
+  right: 15px;
+}
+.ql-snow.ql-toolbar:after,
+.ql-snow .ql-toolbar:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+.ql-snow.ql-toolbar button,
+.ql-snow .ql-toolbar button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: inline-block;
+  float: left;
+  height: 24px;
+  padding: 3px 5px;
+  width: 28px;
+}
+.ql-snow.ql-toolbar button svg,
+.ql-snow .ql-toolbar button svg {
+  float: left;
+  height: 100%;
+}
+.ql-snow.ql-toolbar button:active:hover,
+.ql-snow .ql-toolbar button:active:hover {
+  outline: none;
+}
+.ql-snow.ql-toolbar input.ql-image[type=file],
+.ql-snow .ql-toolbar input.ql-image[type=file] {
+  display: none;
+}
+.ql-snow.ql-toolbar button:hover,
+.ql-snow .ql-toolbar button:hover,
+.ql-snow.ql-toolbar button:focus,
+.ql-snow .ql-toolbar button:focus,
+.ql-snow.ql-toolbar button.ql-active,
+.ql-snow .ql-toolbar button.ql-active,
+.ql-snow.ql-toolbar .ql-picker-label:hover,
+.ql-snow .ql-toolbar .ql-picker-label:hover,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active,
+.ql-snow.ql-toolbar .ql-picker-item:hover,
+.ql-snow .ql-toolbar .ql-picker-item:hover,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
+  color: #06c;
+}
+.ql-snow.ql-toolbar button:hover .ql-fill,
+.ql-snow .ql-toolbar button:hover .ql-fill,
+.ql-snow.ql-toolbar button:focus .ql-fill,
+.ql-snow .ql-toolbar button:focus .ql-fill,
+.ql-snow.ql-toolbar button.ql-active .ql-fill,
+.ql-snow .ql-toolbar button.ql-active .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
+.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
+  fill: #06c;
+}
+.ql-snow.ql-toolbar button:hover .ql-stroke,
+.ql-snow .ql-toolbar button:hover .ql-stroke,
+.ql-snow.ql-toolbar button:focus .ql-stroke,
+.ql-snow .ql-toolbar button:focus .ql-stroke,
+.ql-snow.ql-toolbar button.ql-active .ql-stroke,
+.ql-snow .ql-toolbar button.ql-active .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
+.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
+.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
+.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
+.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
+.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
+  stroke: #06c;
+}
+@media (pointer: coarse) {
+  .ql-snow.ql-toolbar button:hover:not(.ql-active),
+  .ql-snow .ql-toolbar button:hover:not(.ql-active) {
+    color: #444;
+  }
+  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
+  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
+  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
+  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
+    fill: #444;
+  }
+  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
+  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
+  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
+  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
+    stroke: #444;
+  }
+}
+.ql-snow {
+  box-sizing: border-box;
+}
+.ql-snow * {
+  box-sizing: border-box;
+}
+.ql-snow .ql-hidden {
+  display: none;
+}
+.ql-snow .ql-out-bottom,
+.ql-snow .ql-out-top {
+  visibility: hidden;
+}
+.ql-snow .ql-tooltip {
+  position: absolute;
+  transform: translateY(10px);
+}
+.ql-snow .ql-tooltip a {
+  cursor: pointer;
+  text-decoration: none;
+}
+.ql-snow .ql-tooltip.ql-flip {
+  transform: translateY(-10px);
+}
+.ql-snow .ql-formats {
+  display: inline-block;
+  vertical-align: middle;
+}
+.ql-snow .ql-formats:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+.ql-snow .ql-stroke {
+  fill: none;
+  stroke: #444;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+}
+.ql-snow .ql-stroke-miter {
+  fill: none;
+  stroke: #444;
+  stroke-miterlimit: 10;
+  stroke-width: 2;
+}
+.ql-snow .ql-fill,
+.ql-snow .ql-stroke.ql-fill {
+  fill: #444;
+}
+.ql-snow .ql-empty {
+  fill: none;
+}
+.ql-snow .ql-even {
+  fill-rule: evenodd;
+}
+.ql-snow .ql-thin,
+.ql-snow .ql-stroke.ql-thin {
+  stroke-width: 1;
+}
+.ql-snow .ql-transparent {
+  opacity: 0.4;
+}
+.ql-snow .ql-direction svg:last-child {
+  display: none;
+}
+.ql-snow .ql-direction.ql-active svg:last-child {
+  display: inline;
+}
+.ql-snow .ql-direction.ql-active svg:first-child {
+  display: none;
+}
+.ql-snow .ql-editor h1 {
+  font-size: 2em;
+}
+.ql-snow .ql-editor h2 {
+  font-size: 1.5em;
+}
+.ql-snow .ql-editor h3 {
+  font-size: 1.17em;
+}
+.ql-snow .ql-editor h4 {
+  font-size: 1em;
+}
+.ql-snow .ql-editor h5 {
+  font-size: 0.83em;
+}
+.ql-snow .ql-editor h6 {
+  font-size: 0.67em;
+}
+.ql-snow .ql-editor a {
+  text-decoration: underline;
+}
+.ql-snow .ql-editor blockquote {
+  border-left: 4px solid #ccc;
+  margin-bottom: 5px;
+  margin-top: 5px;
+  padding-left: 16px;
+}
+.ql-snow .ql-editor code,
+.ql-snow .ql-editor pre {
+  background-color: #f0f0f0;
+  border-radius: 3px;
+}
+.ql-snow .ql-editor pre {
+  white-space: pre-wrap;
+  margin-bottom: 5px;
+  margin-top: 5px;
+  padding: 5px 10px;
+}
+.ql-snow .ql-editor code {
+  font-size: 85%;
+  padding: 2px 4px;
+}
+.ql-snow .ql-editor pre.ql-syntax {
+  background-color: #23241f;
+  color: #f8f8f2;
+  overflow: visible;
+}
+.ql-snow .ql-editor img {
+  max-width: 100%;
+}
+.ql-snow .ql-picker {
+  color: #444;
+  display: inline-block;
+  float: left;
+  font-size: 14px;
+  font-weight: 500;
+  height: 24px;
+  position: relative;
+  vertical-align: middle;
+}
+.ql-snow .ql-picker-label {
+  cursor: pointer;
+  display: inline-block;
+  height: 100%;
+  padding-left: 8px;
+  padding-right: 2px;
+  position: relative;
+  width: 100%;
+}
+.ql-snow .ql-picker-label::before {
+  display: inline-block;
+  line-height: 22px;
+}
+.ql-snow .ql-picker-options {
+  background-color: #fff;
+  display: none;
+  min-width: 100%;
+  padding: 4px 8px;
+  position: absolute;
+  white-space: nowrap;
+}
+.ql-snow .ql-picker-options .ql-picker-item {
+  cursor: pointer;
+  display: block;
+  padding-bottom: 5px;
+  padding-top: 5px;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #ccc;
+  z-index: 2;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #ccc;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #ccc;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  display: block;
+  margin-top: -1px;
+  top: 100%;
+  z-index: 1;
+}
+.ql-snow .ql-color-picker,
+.ql-snow .ql-icon-picker {
+  width: 28px;
+}
+.ql-snow .ql-color-picker .ql-picker-label,
+.ql-snow .ql-icon-picker .ql-picker-label {
+  padding: 2px 4px;
+}
+.ql-snow .ql-color-picker .ql-picker-label svg,
+.ql-snow .ql-icon-picker .ql-picker-label svg {
+  right: 4px;
+}
+.ql-snow .ql-icon-picker .ql-picker-options {
+  padding: 4px 0px;
+}
+.ql-snow .ql-icon-picker .ql-picker-item {
+  height: 24px;
+  width: 24px;
+  padding: 2px 4px;
+}
+.ql-snow .ql-color-picker .ql-picker-options {
+  padding: 3px 5px;
+  width: 152px;
+}
+.ql-snow .ql-color-picker .ql-picker-item {
+  border: 1px solid transparent;
+  float: left;
+  height: 16px;
+  margin: 2px;
+  padding: 0px;
+  width: 16px;
+}
+.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
+  position: absolute;
+  margin-top: -9px;
+  right: 0;
+  top: 50%;
+  width: 18px;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
+  content: attr(data-label);
+}
+.ql-snow .ql-picker.ql-header {
+  width: 98px;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item::before {
+  content: 'Normal';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+  content: 'Heading 1';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+  content: 'Heading 2';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+  content: 'Heading 3';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+  content: 'Heading 4';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+  content: 'Heading 5';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+  content: 'Heading 6';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+  font-size: 2em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+  font-size: 1.5em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+  font-size: 1.17em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+  font-size: 1em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+  font-size: 0.83em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+  font-size: 0.67em;
+}
+.ql-snow .ql-picker.ql-font {
+  width: 108px;
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item::before {
+  content: 'Sans Serif';
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
+  content: 'Serif';
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
+  content: 'Monospace';
+}
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
+  font-family: Georgia, Times New Roman, serif;
+}
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
+  font-family: Monaco, Courier New, monospace;
+}
+.ql-snow .ql-picker.ql-size {
+  width: 98px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item::before {
+  content: 'Normal';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
+  content: 'Small';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
+  content: 'Large';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
+  content: 'Huge';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
+  font-size: 10px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
+  font-size: 18px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
+  font-size: 32px;
+}
+.ql-snow .ql-color-picker.ql-background .ql-picker-item {
+  background-color: #fff;
+}
+.ql-snow .ql-color-picker.ql-color .ql-picker-item {
+  background-color: #000;
+}
+.ql-toolbar.ql-snow {
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+  padding: 8px;
+}
+.ql-toolbar.ql-snow .ql-formats {
+  margin-right: 15px;
+}
+.ql-toolbar.ql-snow .ql-picker-label {
+  border: 1px solid transparent;
+}
+.ql-toolbar.ql-snow .ql-picker-options {
+  border: 1px solid transparent;
+  box-shadow: rgba(0,0,0,0.2) 0 2px 8px;
+}
+.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  border-color: #ccc;
+}
+.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  border-color: #ccc;
+}
+.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
+.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
+  border-color: #000;
+}
+.ql-toolbar.ql-snow + .ql-container.ql-snow {
+  border-top: 0px;
+}
+.ql-snow .ql-tooltip {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  box-shadow: 0px 0px 5px #ddd;
+  color: #444;
+  padding: 5px 12px;
+  white-space: nowrap;
+}
+.ql-snow .ql-tooltip::before {
+  content: "Visit URL:";
+  line-height: 26px;
+  margin-right: 8px;
+}
+.ql-snow .ql-tooltip input[type=text] {
+  display: none;
+  border: 1px solid #ccc;
+  font-size: 13px;
+  height: 26px;
+  margin: 0px;
+  padding: 3px 5px;
+  width: 170px;
+}
+.ql-snow .ql-tooltip a.ql-preview {
+  display: inline-block;
+  max-width: 200px;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  vertical-align: top;
+}
+.ql-snow .ql-tooltip a.ql-action::after {
+  border-right: 1px solid #ccc;
+  content: 'Edit';
+  margin-left: 16px;
+  padding-right: 8px;
+}
+.ql-snow .ql-tooltip a.ql-remove::before {
+  content: 'Remove';
+  margin-left: 8px;
+}
+.ql-snow .ql-tooltip a {
+  line-height: 26px;
+}
+.ql-snow .ql-tooltip.ql-editing a.ql-preview,
+.ql-snow .ql-tooltip.ql-editing a.ql-remove {
+  display: none;
+}
+.ql-snow .ql-tooltip.ql-editing input[type=text] {
+  display: inline-block;
+}
+.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
+  border-right: 0px;
+  content: 'Save';
+  padding-right: 0px;
+}
+.ql-snow .ql-tooltip[data-mode=link]::before {
+  content: "Enter link:";
+}
+.ql-snow .ql-tooltip[data-mode=formula]::before {
+  content: "Enter formula:";
+}
+.ql-snow .ql-tooltip[data-mode=video]::before {
+  content: "Enter video:";
+}
+.ql-snow a {
+  color: #06c;
+}
+.ql-container.ql-snow {
+  border: 1px solid #ccc;
+}

public/css/third_party/vue-html-editor_custom.css

@@ -0,0 +1,278 @@
+.quill {
+  @apply mt-1;
+}
+
+.ql-container {
+  height: 18rem !important;
+  font-family: "Quicksand", sans-serif !important;
+}
+
+.ql-editor p {
+  color: #424242;
+}
+
+.ql-toolbar {
+  @apply text-black;
+  position: relative;
+  padding: .625rem .75rem;
+  background-color: #fff;
+  border: 1px solid #dee2e6;
+  border-radius: 0.5rem 0.5rem 0 0;
+}
+
+.ql-editor {
+  @apply text-sm text-light-gray;
+  display: block;
+  width: 100%;
+  padding: .625rem .75rem;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid;
+  border-top: unset;
+  border-bottom-left-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+}
+
+.ql-toolbar button:hover {
+  color: #55588B !important;
+}
+
+.ql-snow .ql-editor a {
+  @apply text-green no-underline;
+}
+
+.quillWrapper {
+  @apply mt-1;
+}
+
+.ql-container.ql-snow {
+  border: unset !important;
+}
+
+.ql-tooltip {
+  position: absolute;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  width: 18.5rem;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 0.4375rem;
+  padding: 0.625rem 0.75rem;
+  margin-top: 0.6rem;
+  -webkit-box-shadow: 0 0.5rem 2rem 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0.5rem 2rem 0 rgba(0, 0, 0, 0.2);
+}
+.ql-tooltip:after,
+.ql-tooltip:before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  bottom: 100%;
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+}
+.ql-tooltip:before {
+  border-bottom: 0.6rem solid rgba(0, 0, 0, 0.05);
+  border-left: 0.6rem solid transparent;
+  border-right: 0.6rem solid transparent;
+}
+.ql-tooltip:after {
+  border-bottom: 0.5rem solid #fff;
+  border-left: 0.5rem solid transparent;
+  border-right: 0.5rem solid transparent;
+}
+.ql-container .ql-tooltip:hover {
+  display: -webkit-box !important;
+  display: -ms-flexbox !important;
+  display: flex !important;
+}
+.ql-tooltip .ql-preview {
+  width: 100%;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  border-radius: 0.25rem;
+  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ql-tooltip .ql-preview {
+      -webkit-transition: none;
+      transition: none;
+  }
+}
+.ql-tooltip.ql-editing .ql-preview {
+  display: none;
+}
+.ql-tooltip input {
+  display: none;
+  width: 100%;
+  padding-top: calc(0.25rem + 1px);
+  padding-bottom: calc(0.25rem + 1px);
+  background-color: transparent;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  border: none;
+  color: #8898aa;
+}
+.ql-tooltip input:focus {
+  outline: none;
+}
+.ql-tooltip.ql-editing input {
+  display: block;
+}
+.ql-tooltip .ql-action,
+.ql-tooltip .ql-remove {
+  margin-left: 0.25rem;
+}
+.ql-tooltip .ql-action:before,
+.ql-tooltip .ql-remove:before {
+  display: inline-block;
+  font-weight: 600;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border: 1px solid transparent;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  border-radius: 0.25rem;
+  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ql-tooltip .ql-action:before,
+  .ql-tooltip .ql-remove:before {
+      -webkit-transition: none;
+      transition: none;
+  }
+}
+.ql-tooltip .ql-action:before:focus,
+.ql-tooltip .ql-action:before:hover,
+.ql-tooltip .ql-remove:before:focus,
+.ql-tooltip .ql-remove:before:hover {
+  text-decoration: none;
+}
+.ql-tooltip .ql-action:before.focus,
+.ql-tooltip .ql-action:before:focus,
+.ql-tooltip .ql-remove:before.focus,
+.ql-tooltip .ql-remove:before:focus {
+  outline: 0;
+  -webkit-box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
+}
+.ql-tooltip .ql-action:before,
+.ql-tooltip.ql-editing .ql-action:before {
+  color: #fff;
+  background-color: #5e72e4;
+  border-color: #5e72e4;
+  -webkit-box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+.ql-tooltip .ql-action:before:hover,
+.ql-tooltip.ql-editing .ql-action:before:hover {
+  color: #fff;
+  background-color: #5e72e4;
+  border-color: #5e72e4;
+}
+.ql-tooltip .ql-action:before.focus,
+.ql-tooltip .ql-action:before:focus,
+.ql-tooltip.ql-editing .ql-action:before.focus,
+.ql-tooltip.ql-editing .ql-action:before:focus {
+  -webkit-box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 0 rgba(94, 114, 228, 0.5);
+  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 0 rgba(94, 114, 228, 0.5);
+}
+.ql-tooltip .ql-action:before.disabled,
+.ql-tooltip .ql-action:before:disabled,
+.ql-tooltip.ql-editing .ql-action:before.disabled,
+.ql-tooltip.ql-editing .ql-action:before:disabled {
+  color: #fff;
+  background-color: #5e72e4;
+  border-color: #5e72e4;
+}
+.ql-tooltip .ql-action:before:not(:disabled):not(.disabled).active,
+.ql-tooltip .ql-action:before:not(:disabled):not(.disabled):active,
+.ql-tooltip.ql-editing .ql-action:before:not(:disabled):not(.disabled).active,
+.ql-tooltip.ql-editing .ql-action:before:not(:disabled):not(.disabled):active,
+.show > .ql-tooltip .ql-action:before.dropdown-toggle,
+.show > .ql-tooltip.ql-editing .ql-action:before.dropdown-toggle {
+  color: #fff;
+  background-color: #324cdd;
+  border-color: #5e72e4;
+}
+.ql-tooltip .ql-action:before:not(:disabled):not(.disabled).active:focus,
+.ql-tooltip .ql-action:before:not(:disabled):not(.disabled):active:focus,
+.ql-tooltip.ql-editing .ql-action:before:not(:disabled):not(.disabled).active:focus,
+.ql-tooltip.ql-editing .ql-action:before:not(:disabled):not(.disabled):active:focus,
+.show > .ql-tooltip .ql-action:before.dropdown-toggle:focus,
+.show > .ql-tooltip.ql-editing .ql-action:before.dropdown-toggle:focus {
+  -webkit-box-shadow: none, 0 0 0 0 rgba(94, 114, 228, 0.5);
+  box-shadow: none, 0 0 0 0 rgba(94, 114, 228, 0.5);
+}
+.ql-tooltip .ql-action:before {
+  content: "Edit";
+}
+.ql-tooltip.ql-editing .ql-action:before {
+  content: "Save";
+}
+.ql-tooltip .ql-remove:before {
+  color: #212529;
+  background-color: #fff;
+  -webkit-box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
+  content: "Remove";
+  border-color: #dee2e6;
+}
+.ql-tooltip .ql-remove:before:hover {
+  color: #212529;
+  background-color: #fff;
+  border-color: #fff;
+}
+.ql-tooltip .ql-remove:before.focus,
+.ql-tooltip .ql-remove:before:focus {
+  -webkit-box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 0 hsla(0, 0%, 100%, 0.5);
+  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 0 hsla(0, 0%, 100%, 0.5);
+}
+.ql-tooltip .ql-remove:before.disabled,
+.ql-tooltip .ql-remove:before:disabled {
+  color: #212529;
+  background-color: #fff;
+  border-color: #fff;
+}
+.ql-tooltip .ql-remove:before:not(:disabled):not(.disabled).active,
+.ql-tooltip .ql-remove:before:not(:disabled):not(.disabled):active,
+.show > .ql-tooltip .ql-remove:before.dropdown-toggle {
+  color: #212529;
+  background-color: #e6e5e5;
+  border-color: #fff;
+}
+.ql-tooltip .ql-remove:before:not(:disabled):not(.disabled).active:focus,
+.ql-tooltip .ql-remove:before:not(:disabled):not(.disabled):active:focus,
+.show > .ql-tooltip .ql-remove:before.dropdown-toggle:focus {
+  -webkit-box-shadow: none, 0 0 0 0 hsla(0, 0%, 100%, 0.5);
+  box-shadow: none, 0 0 0 0 hsla(0, 0%, 100%, 0.5);
+}
+.ql-tooltip.ql-editing .ql-remove:before {
+  display: none;
+}
+
+.ql-snow .ql-tooltip::before {
+    display: none;
+}
+
+.ql-snow .ql-tooltip a.ql-action::after {
+    display: none;
+}

public/img/akaunting-logo-golden.svg

@@ -1,6 +0,0 @@
-<svg width="171" height="171" viewBox="0 0 171 171" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M50.0172 124.228C39.9895 115.037 33.5416 102.004 33.0079 87.4609H0.0833359C0.63564 111.994 11.5302 133.973 28.5783 149.212L50.0172 124.228Z" fill="#C1B55E"/>
-<path d="M85.4885 0.0717087C39.0374 0.0717087 1.24593 37.1456 0.0871658 83.3171H33.017C34.1613 55.325 57.2156 32.9836 85.4885 32.9836C114.493 32.9836 138.005 56.4959 138.005 85.5C138.005 105.011 127.365 122.037 111.571 131.092L127.065 160.145C153.225 145.543 170.917 117.587 170.917 85.5C170.917 38.3194 132.669 0.0717087 85.4885 0.0717087Z" fill="#C1B55E"/>
-<path d="M107.897 133.008C101.101 136.219 93.5037 138.017 85.4881 138.017C73.3042 138.017 62.0888 133.868 53.1792 126.905L31.7331 151.898C46.4132 163.798 65.1181 170.928 85.4882 170.928C99.1043 170.928 111.976 167.741 123.399 162.075L107.897 133.008Z" fill="#C1B55E"/>
-<path d="M170.917 85.5H138.005V170.928H170.917V85.5Z" fill="#C1B55E"/>
-</svg>

public/img/akaunting-logo-horizontal.svg

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="1400px" height="400px" viewBox="0 0 1400 400" enable-background="new 0 0 1400 400" xml:space="preserve">
+<g>
+	<path fill="#6DA252" d="M137.25,256.894c-14.731-13.501-24.204-32.647-24.988-54.013H63.894
+		c0.812,36.041,16.816,68.329,41.861,90.717L137.25,256.894z"/>
+	<path fill="#6DA252" d="M189.359,74.5c-68.24,0-123.758,54.464-125.46,122.293h48.376c1.681-41.122,35.549-73.943,77.084-73.943
+		c42.609,0,77.15,34.542,77.15,77.15c0,28.662-15.631,53.676-38.833,66.978l22.762,42.681
+		c38.431-21.451,64.421-62.521,64.421-109.658C314.859,130.688,258.671,74.5,189.359,74.5"/>
+	<path fill="#6DA252" d="M222.28,269.792c-9.985,4.718-21.145,7.358-32.92,7.358c-17.899,0-34.375-6.095-47.464-16.323
+		l-31.506,36.717c21.566,17.481,49.045,27.956,78.97,27.956c20.003,0,38.912-4.682,55.693-13.005L222.28,269.792z"/>
+	<rect x="266.509" y="200" fill="#6DA252" width="48.35" height="125.5"/>
+</g>
+<g>
+	<path fill="#404041" d="M393.526,270.249l54.733-137.635h22.309l55.205,137.635H501.48l-13.896-35.26h-56.718l-13.612,35.26
+		H393.526z M437.767,215.8h42.161c-5.799-16.573-12.762-36.205-20.892-58.892C449.583,183.125,442.493,202.756,437.767,215.8z"/>
+	<path fill="#404041" d="M542.128,270.249V131.385h21.175v82.052l37.718-40.175h29.115l-47.36,46.509l50.573,50.479h-28.17
+		l-41.876-43.483v43.483H542.128z"/>
+	<path fill="#404041" d="M688.744,272.423c-7.563,0-14.402-1.403-20.514-4.205c-6.114-2.805-11.06-6.571-14.841-11.297
+		c-3.781-4.727-6.664-10.034-8.649-15.928c-1.985-5.892-2.978-12.084-2.978-18.576c0-6.807,1.055-13.296,3.166-19.473
+		c2.111-6.176,5.119-11.658,9.028-16.448c3.906-4.789,8.899-8.603,14.983-11.438c6.08-2.836,12.809-4.254,20.181-4.254
+		c6.429,0,12.162,1.371,17.205,4.112c5.041,2.741,9.074,6.413,12.099,11.013v-12.667h20.702v96.988h-21.079v-14.557
+		c-2.9,5.042-6.888,9.091-11.958,12.146C701.017,270.896,695.233,272.423,688.744,272.423z M691.675,255.219
+		c9.263,0,16.163-3.072,20.701-9.217c4.537-6.145,6.806-14.353,6.806-24.624c0-10.082-2.349-18.181-7.042-24.296
+		c-4.695-6.11-11.611-9.168-20.75-9.168c-9.391,0-16.48,3.072-21.268,9.217c-4.791,6.145-7.186,14.29-7.186,24.436
+		c0,9.959,2.411,18.056,7.232,24.294S682.158,255.219,691.675,255.219z"/>
+	<path fill="#404041" d="M804.164,272.423c-12.163,0-21.443-3.481-27.839-10.445c-6.397-6.961-9.595-16.243-9.595-27.839v-60.877
+		h20.985v60.689c0,7.122,1.78,12.446,5.342,15.975c3.56,3.532,8.615,5.294,15.172,5.294c7.562,0,13.296-2.016,17.203-6.05
+		c3.906-4.032,5.862-10.021,5.862-17.961v-57.947h21.174v71.655c0,8.067,0.315,16.512,0.945,25.333h-21.741l-0.378-14.746
+		c-0.757,1.766-1.796,3.53-3.12,5.293c-1.323,1.766-3.059,3.579-5.198,5.435c-2.145,1.86-4.855,3.357-8.131,4.492
+		C811.568,271.856,808.007,272.423,804.164,272.423z"/>
+	<path fill="#404041" d="M883.002,270.249v-63.996c0-5.86-0.128-11.532-0.378-17.016c-0.253-5.483-0.506-9.516-0.756-12.1
+		l-0.379-3.876h22.216v13.708c3.338-5.167,7.876-9.153,13.611-11.959c5.733-2.802,11.5-4.206,17.299-4.206
+		c11.973,0,20.953,3.592,26.941,10.776c5.986,7.185,8.98,18.622,8.98,34.315v54.354h-21.175v-55.016
+		c0-9.579-1.403-16.527-4.206-20.845c-2.806-4.315-7.737-6.475-14.794-6.475c-6.114,0-12.006,2.348-17.678,7.043
+		s-8.508,10.067-8.508,16.116v59.176H883.002z"/>
+	<path fill="#404041" d="M1053.346,270.154h-9.075c-6.934,0-12.636-0.439-17.11-1.322c-4.476-0.882-8.446-2.554-11.91-5.011
+		c-3.467-2.458-5.972-5.986-7.516-10.587c-1.545-4.6-2.315-10.524-2.315-17.771v-48.022h-19.285v-14.18h19.853v-23.632l20.513-6.144
+		v29.776h26.468v14.18h-26.468v49.25c0,3.971,0.345,7.043,1.04,9.217c0.692,2.174,2.14,3.894,4.348,5.153
+		c2.206,1.262,4.853,2.049,7.941,2.363c3.086,0.315,7.593,0.472,13.518,0.472V270.154z"/>
+	<path fill="#404041" d="M1076.316,270.249v-96.988h20.702v96.988H1076.316z M1076.411,151.52v-18.906h20.607v18.906H1076.411z"/>
+	<path fill="#404041" d="M1126.89,270.249v-63.996c0-5.86-0.128-11.532-0.378-17.016c-0.253-5.483-0.505-9.516-0.757-12.1
+		l-0.378-3.876h22.216v13.708c3.339-5.167,7.877-9.153,13.612-11.959c5.732-2.802,11.499-4.206,17.299-4.206
+		c11.972,0,20.952,3.592,26.94,10.776c5.986,7.185,8.98,18.622,8.98,34.315v54.354h-21.175v-55.016
+		c0-9.579-1.403-16.527-4.207-20.845c-2.805-4.315-7.736-6.475-14.794-6.475c-6.114,0-12.005,2.348-17.677,7.043
+		c-5.671,4.695-8.508,10.067-8.508,16.116v59.176H1126.89z"/>
+	<path fill="#404041" d="M1282.298,309.385c-12.92,0-25.146-2.586-36.678-7.752l3.497-18.339
+		c10.271,5.923,20.952,8.886,32.046,8.886c9.514,0,16.903-2.302,22.168-6.9c5.259-4.601,7.893-11.471,7.893-20.607v-9.169
+		c-6.178,9.074-15.158,13.611-26.941,13.611c-13.801,0-25.019-4.283-33.653-12.855c-8.636-8.568-12.95-20.135-12.95-34.692
+		c0-7.121,0.96-13.721,2.884-19.804c1.921-6.081,4.727-11.438,8.412-16.071c3.688-4.632,8.462-8.271,14.322-10.917
+		c5.86-2.647,12.509-3.971,19.945-3.971c6.618,0,12.272,1.34,16.97,4.018c4.693,2.679,8.396,6.129,11.105,10.351v-11.911h22.215
+		c-1.009,9.831-1.512,19.852-1.512,30.06v53.032c0,5.546-0.442,10.729-1.323,15.55c-0.885,4.821-2.476,9.596-4.773,14.322
+		c-2.303,4.727-5.28,8.744-8.934,12.052c-3.656,3.309-8.429,5.986-14.321,8.035C1296.774,308.359,1289.984,309.385,1282.298,309.385
+		z M1285.7,252.949c4.663,0,8.744-0.864,12.242-2.599c3.497-1.732,6.254-4.143,8.271-7.231c2.016-3.086,3.497-6.522,4.441-10.304
+		c0.946-3.781,1.419-7.941,1.419-12.478c0-9.769-2.207-17.614-6.617-23.539c-4.413-5.922-10.714-8.885-18.905-8.885
+		c-8.509,0-15.096,3.136-19.757,9.406c-4.665,6.272-6.995,14.291-6.995,24.059c0,10.02,2.188,17.787,6.569,23.301
+		C1270.748,250.195,1277.192,252.949,1285.7,252.949z"/>
+</g>
+</svg>

public/img/akaunting-logo-purple.svg

@@ -0,0 +1,6 @@
+<svg width="1200" height="1200" viewBox="0 0 1200 1200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M392.296 826.698C333.597 772.9 295.853 696.609 292.729 611.478H100C103.233 755.087 167.006 883.743 266.8 972.949L392.296 826.698Z" fill="#55588B"/>
+<path d="M599.931 99.932C328.022 99.932 106.804 316.95 100.021 587.222H292.781C299.479 423.366 434.431 292.587 599.931 292.587C769.712 292.587 907.347 430.22 907.347 600C907.347 714.208 845.062 813.877 752.612 866.879L843.308 1036.94C996.438 951.471 1100 787.826 1100 600C1100 323.821 876.108 99.932 599.931 99.932Z" fill="#55588B"/>
+<path d="M731.105 878.093C691.32 896.892 646.851 907.414 599.93 907.414C528.61 907.414 462.959 883.129 410.805 842.373L285.267 988.674C371.199 1058.33 480.691 1100.07 599.931 1100.07C679.635 1100.07 754.982 1081.41 821.849 1048.25L731.105 878.093Z" fill="#55588B"/>
+<path d="M1100 600H907.347V1100.07H1100V600Z" fill="#55588B"/>
+</svg>

public/img/tailwind_icons/not-equal.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 14.25C4.5 13.6805 4.96171 13.2188 5.53125 13.2188H18.4688C19.0383 13.2188 19.5 13.6805 19.5 14.25C19.5 14.8195 19.0383 15.2812 18.4688 15.2812H5.53125C4.96171 15.2812 4.5 14.8195 4.5 14.25Z" fill="#242424"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 9.75C4.5 9.18046 4.96171 8.71875 5.53125 8.71875H18.4688C19.0383 8.71875 19.5 9.18046 19.5 9.75C19.5 10.3195 19.0383 10.7812 18.4688 10.7812H5.53125C4.96171 10.7812 4.5 10.3195 4.5 9.75Z" fill="#242424"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.89309 18.506C8.39985 18.2212 8.23085 17.5905 8.51562 17.0973L14.9844 5.89306C15.2691 5.39982 15.8998 5.23083 16.3931 5.5156C16.8863 5.80037 17.0553 6.43107 16.7706 6.92431L10.3018 18.1285C10.017 18.6218 9.38633 18.7908 8.89309 18.506Z" fill="#242424"/>
+</svg>