From 3932f0a2fa2b6f4bc34b16eb925b5fd9a6969cd3 Mon Sep 17 00:00:00 2001
From: Ramazan APAYDIN <apaydin541@gmail.com>
Date: Fri, 17 Apr 2020 06:18:30 +0300
Subject: [PATCH] Symfony 5 Upgrade

---
 assets/admin/js/app.js                        |  12 +-
 assets/admin/js/modules/selectize.js          | 191 +++++
 assets/admin/scss/app.scss                    | 189 ++++-
 assets/admin/scss/modules/content-nav.scss    |   2 +-
 assets/admin/scss/modules/selectize.scss      | 548 ++++++++++++++
 assets/admin/scss/modules/sumoselect.scss     | 439 ------------
 assets/admin/scss/modules/variables.scss      | 670 ++++++++++++------
 assets/admin/scss/vendor.scss                 |   4 +-
 config/defaults.yaml                          |   2 +-
 config/packages/security.yaml                 |   7 +-
 config/routes.yaml                            |   2 +-
 package.json                                  |   4 +-
 src/Controller/AccountController.php          |   2 -
 src/Listener/LocaleListener.php               |  36 +
 templates/Admin/Account/edit.html.twig        |   1 -
 .../Admin/Account/rolesTemplate.html.twig     |  36 +-
 templates/Admin/_other/bootstrap-4.html.twig  |   8 +-
 templates/homepage.html.twig                  |  19 +-
 translations/messages.en.yml                  |   8 +-
 translations/messages.tr.yml                  |   8 +-
 yarn.lock                                     | 146 +---
 21 files changed, 1467 insertions(+), 867 deletions(-)
 create mode 100644 assets/admin/js/modules/selectize.js
 create mode 100644 assets/admin/scss/modules/selectize.scss
 delete mode 100644 assets/admin/scss/modules/sumoselect.scss
 create mode 100644 src/Listener/LocaleListener.php

diff --git a/assets/admin/js/app.js b/assets/admin/js/app.js
index 3e9a482..057c083 100644
--- a/assets/admin/js/app.js
+++ b/assets/admin/js/app.js
@@ -7,6 +7,7 @@ require('./modules/modal');
 require('./modules/content-nav');
 require('./modules/datepicker');
 require('./modules/menu');
+require('./modules/selectize');
 require('./modules/dashboard');
 
 // Load APP SCSS
@@ -16,15 +17,4 @@ require('../scss/app.scss');
  Page Load
  ==================================*/
 $(document).ready(function () {
-  /**
-   * Custom Select
-   */
-  $('select').SumoSelect({
-    search: true,
-    placeholder: lang['search_placeholder'],
-    searchText: lang['search_text'],
-    captionFormat: lang['select_caption'],
-    captionFormatAllSelected: lang['select_caption_all'],
-    noMatch: lang['select_no_matches']
-  });
 });
diff --git a/assets/admin/js/modules/selectize.js b/assets/admin/js/modules/selectize.js
new file mode 100644
index 0000000..4b01f67
--- /dev/null
+++ b/assets/admin/js/modules/selectize.js
@@ -0,0 +1,191 @@
+Selectize.define('no_results', function (options) {
+    let self = this;
+
+    options = $.extend({
+        message: 'No results found.',
+
+        html: function (data) {
+            return (
+                '<div class="selectize-dropdown ' + data.classNames + '">' +
+                '<div class="selectize-dropdown-content">' +
+                '<div class="no-results">' + data.message + '</div>' +
+                '</div>' +
+                '</div>'
+            );
+        }
+    }, options);
+
+    self.displayEmptyResultsMessage = function () {
+        this.$empty_results_container.css('top', this.$control.outerHeight());
+        this.$empty_results_container.css('width', this.$control.outerWidth());
+        this.$empty_results_container.show();
+        this.$control.addClass("dropdown-active");
+    };
+
+    self.refreshOptions = (function () {
+        let original = self.refreshOptions;
+
+        return function () {
+            original.apply(self, arguments);
+            if (this.hasOptions || !this.lastQuery) {
+                this.$empty_results_container.hide()
+            } else {
+                this.displayEmptyResultsMessage();
+            }
+        }
+    })();
+
+    self.onKeyDown = (function () {
+        let original = self.onKeyDown;
+
+        return function (e) {
+            original.apply(self, arguments);
+            if (e.keyCode === 27) {
+                this.$empty_results_container.hide();
+            }
+        }
+    })();
+
+    self.onBlur = (function () {
+        let original = self.onBlur;
+
+        return function () {
+            original.apply(self, arguments);
+            this.$empty_results_container.hide();
+            this.$control.removeClass("dropdown-active");
+        };
+    })();
+
+    self.setup = (function () {
+        let original = self.setup;
+        return function () {
+            original.apply(self, arguments);
+            self.$empty_results_container = $(options.html($.extend({
+                classNames: self.$input.attr('class')
+            }, options)));
+            self.$empty_results_container.insertBefore(self.$dropdown);
+            self.$empty_results_container.hide();
+        };
+    })();
+});
+
+window.selectReload = function (container) {
+    /**
+     * Remote Select for Ajax Search
+     */
+    let remote = container ? $(container).find('[data-remote]') : $('[data-remote]');
+    let url = '';
+    if (remote.length > 0) {
+        let tags = remote.data('tags');
+        let config = {
+            valueField: 'id',
+            labelField: 'name',
+            searchField: 'name',
+            allowEmptyOption: true,
+            create: false,
+            maxOptions: 100,
+            loadThrottle: 500,
+            placeholder: 'Search...',
+            onInitialize: function () {
+                url = this.$input.data('remote');
+            },
+            load: function (query, callback) {
+                if (!query.length) return callback();
+                $.ajax({
+                    url: url,
+                    dataType: 'json',
+                    data: {
+                        filter: query
+                    },
+                    error: function () {
+                        callback();
+                    },
+                    success: function (res) {
+                        callback(res);
+                    }
+                });
+            }
+        };
+
+        if (tags) {
+            config = {
+                ...config, ...{
+                    plugins: ['remove_button'],
+                    delimiter: ',',
+                    persist: false,
+                    loadThrottle: 500,
+                    allowEmptyOption: false,
+                    create: true,
+                    valueField: 'name'
+                }
+            }
+        }
+
+        $(remote).selectize(config);
+    }
+
+    /**
+     * Tags
+     */
+    let tags = container ? $(container).find('[data-tags]:not([data-remote])') : $('[data-tags]:not([data-remote])');
+    $.each(tags, function (index, item) {
+        $(item).selectize({
+            plugins: ['remove_button'],
+            delimiter: ',',
+            persist: false,
+            create: function (input) {
+                return {
+                    value: input,
+                    text: input
+                }
+            }
+        });
+    });
+
+    /**
+     * Custom Select
+     */
+    let select = container ? $(container).find('select:not([data-remote], [data-geo])') : $('select:not([data-remote], [data-geo])');
+    $.each(select, function (index, item) {
+        let data = {};
+        $.each(item.dataset, function (key, val) {
+            data[key] = val;
+        });
+
+        // Add Remove Button for Multiple
+        if (item.getAttribute('multiple')) {
+            data['plugins'] = ['remove_button', 'no_results'];
+            data['delimiter'] = ',';
+            data['persist'] = false;
+            data['dropdownDirection'] = 'top';
+        } else {
+            // Search No Result Plugin
+            data['plugins'] = ['no_results'];
+
+            data['onDropdownOpen'] = function () {
+                if (this.settings.allowEmptyOption) {
+                    this.oldVal = this.getValue();
+                } else {
+                    this.oldVal = this.getValue() === '' ? this.oldVal : this.getValue();
+                }
+
+                this.clear(true);
+            };
+            data['onBlur'] = function () {
+                if (this.items.length === 0) {
+                    this.setValue(this.oldVal);
+                }
+            };
+
+            if (select.find('option[value=""]')) {
+                data['allowEmptyOption'] = true
+            }
+        }
+
+        $(item).selectize(data);
+    });
+};
+
+$(function () {
+    selectReload();
+});
diff --git a/assets/admin/scss/app.scss b/assets/admin/scss/app.scss
index 893b612..e82593e 100755
--- a/assets/admin/scss/app.scss
+++ b/assets/admin/scss/app.scss
@@ -2,13 +2,13 @@
  Dependencies
 =======================================================*/
 @import "./modules/variables";
-@import "./modules/sumoselect";
 @import "./modules/left-navigation";
 @import "./modules/dashboard";
 @import "./modules/action-menu";
 @import "./modules/content-nav";
 @import "./modules/datepicker";
 @import "./modules/ajaxLoader";
+@import "./modules/selectize";
 
 /*======================================================
  Typography
@@ -26,7 +26,7 @@ html, body {
   font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica, Arial, sans-serif;
 }
 
-body{
+body {
   height: 100vh;
 }
 
@@ -40,12 +40,14 @@ body{
   text-align: left;
   min-height: 100%;
   padding-left: 150px;
+
   .left-nav {
     float: left;
     width: 150px;
     margin-left: -150px;
     min-height: 100vh;
   }
+
   .content-wrapper {
     background: $content-wrapper-background;
     width: 100%;
@@ -91,6 +93,7 @@ button:focus, a:focus {
 @media only screen and (max-width: 768px) {
   #wrapper {
     padding-left: 120px;
+
     .left-nav {
       width: 120px;
       margin-left: -120px;
@@ -101,6 +104,7 @@ button:focus, a:focus {
 @media only screen and (max-width: 544px) {
   #wrapper {
     padding-left: 60px;
+
     .left-nav {
       width: 60px;
       margin-left: -60px;
@@ -108,10 +112,14 @@ button:focus, a:focus {
   }
 }
 
+.line-height-clear {
+  line-height: 0;
+}
+
 /*======================================================
  Other
 =======================================================*/
-.word-break{
+.word-break {
   word-break: break-all;
 }
 
@@ -120,21 +128,26 @@ button:focus, a:focus {
 =======================================================*/
 header {
   z-index: 1;
+
   .wrap {
     background: $header_back;
     padding: 0 $gutter-padding;
     box-shadow: 0 2px 15px -4px rgba(0, 0, 0, 0.2);
     position: relative;
-    z-index:1;
+    z-index: 1;
+
     &.scrolled {
       box-shadow: 0 2px 7px 0 rgba(0, 0, 0, .2);
     }
+
     > nav > ul {
       margin: 0;
       padding: 0;
+
       > li {
         list-style: none;
         float: left;
+
         &.divider {
           display: inline-block;
           width: 1px;
@@ -142,15 +155,17 @@ header {
           height: 19px;
           margin: 10px 10px;
         }
+
         > a {
           border: none;
           color: $header-color;
           cursor: pointer;
           display: inline-block;
-          padding: 20px 14px;
+          padding: 14px 12px;
           box-shadow: none;
           position: relative;
           transition: $transition;
+
           .badge {
             font-size: 10px;
             position: absolute;
@@ -161,29 +176,36 @@ header {
             padding: 3px 4px 2px 3px;
             color: #ddd;
           }
+
           > i {
             vertical-align: middle;
+
             + i {
               margin-left: 10px;
             }
+
             + .text {
               margin-left: 6px;
               vertical-align: middle;
             }
           }
+
           > .text {
             + i {
               margin-left: 10px;
             }
           }
+
           &:focus {
             //color: #FFF;
           }
+
           &:hover {
             //background: $a-link-hover-bg;
             color: $a-link-hover-color;
           }
         }
+
         &.show {
           > a {
             color: #222;
@@ -197,39 +219,45 @@ header {
 
 #search {
   position: relative;
-  margin: 12px 0;
+  margin: 8px 0 7px;
   width: 250px;
+
   input {
     border: none;
-    background: RGBA(226, 228, 230, .4);
+    background: RGBA(226, 228, 230, .5);
     display: inline-block;
     color: $search-color;
     font-weight: 300;
     padding: 6px 20px 6px 50px;
     transition: all .15s;
-    border-radius: 50px;
-    height: 40px;
+    border-radius: $input-border-radius;
+    height: 38px;
+
     &:focus {
       background: darken($search-background, 5%);
       box-shadow: none;
     }
+
     &::placeholder {
       color: $search-color;
     }
+
     &::-moz-placeholder {
       color: $search-color;
     }
   }
+
   button {
     border: none;
     background: transparent;
     position: absolute;
     line-height: 0;
-    padding: 8px 6px 7px 15px;
+    padding: 7px 6px 7px 15px;
     color: $search-button-color;
     left: 0;
     top: 0;
     cursor: pointer;
+
     &:focus {
       outline: 0;
     }
@@ -248,13 +276,16 @@ header {
     width: auto;
     left: 20px;
     right: 20px;
+
     input {
       width: 140px;
       transition: $transition;
+
       &:focus {
         position: absolute;
         width: 100%;
         z-index: 1;
+
         & + button {
           z-index: 2;
         }
@@ -267,23 +298,28 @@ header {
   header {
     .wrap {
       padding: 0 15px;
+
       > nav > ul {
         > li {
           &.divider {
             margin: 8px 6px;
           }
+
           > a {
             padding: 13px 8px;
+
             > i {
               font-size: $font-size-base + .5;
               line-height: 24px;
             }
+
             .text {
               display: none;
             }
           }
         }
       }
+
       .flag-icon {
         font-size: $font-size-base + .3;
       }
@@ -296,17 +332,20 @@ header {
     left: 15px;
     right: 15px;
     margin: 5px 0;
+
     input {
       width: 40px;
       padding: 6px 20px 6px 25px;
       transition: $transition;
       z-index: 2;
       position: relative;
+
       &:focus {
         position: absolute;
         width: 100%;
         padding: 6px 20px 6px 50px;
         z-index: 1;
+
         & + button {
           padding: 8px 6px 6px 15px;
           visibility: visible;
@@ -314,6 +353,7 @@ header {
         }
       }
     }
+
     button {
       padding: 8px 6px 6px 12px;
       transition: $transition;
@@ -332,36 +372,42 @@ header {
     margin-bottom: $gutter-padding;
     padding: $gutter-padding+.2 $gutter-padding 0;
     display: block;
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 -1px 1px rgba(0, 0, 0, .1) inset;
     position: relative;
+
     a.back-icon {
       color: $text-color;
       float: left;
       line-height: 55px;
       padding: 4px 0;
+
       i {
         margin-right: 1.3rem;
         font-size: $font-size-base + 2.3;
         vertical-align: middle;
       }
+
       &:hover {
         color: $color;
       }
     }
+
     h2 {
       margin: 0;
       font-weight: 300;
       display: block;
-      font-size: $font-size-base + 1.2;
-      line-height: $font-size-base + 1.5;
-      padding-bottom: 1.5rem;
+      font-size: $font-size-base + 1;
+      line-height: $font-size-base + 1.2;
+      padding-bottom: 1rem;
       position: relative;
+
       .text {
         display: block;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
       }
+
       .desc {
         display: block;
         font-size: $font-size-base + .1;
@@ -372,15 +418,17 @@ header {
         text-overflow: ellipsis;
       }
     }
+
     .addbtn {
       position: absolute;
       right: 0;
-      top: .7rem;
+      top: .6rem;
       border-radius: 100px;
       line-height: 0;
+
       i {
         font-size: $font-size-base + .5;
-        padding: .8rem;
+        padding: .6rem;
         color: #FFF;
       }
     }
@@ -391,20 +439,20 @@ header {
   }
 
   .content-form {
-    background: #FFF;
-    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
-    padding: $gutter-padding;
+    //padding: $gutter-padding;
     border-radius: $border-radius;
   }
 
   .editor-area {
     position: relative;
+
     .editor {
       width: 100%;
       min-height: 500px;
       border: 1px solid $input-border-color;
       border-radius: $border-radius + .1;
       z-index: 3;
+
       &.fullscreen {
         position: fixed;
         left: 0;
@@ -412,12 +460,14 @@ header {
         top: 0;
         bottom: 0;
       }
+
       .ace_search {
         top: 40px;
         border-top-left-radius: $border-radius;
         border-bottom-left-radius: $border-radius;
       }
     }
+
     .buttons {
       background: rgba(255, 255, 255, 0.2);
       border-bottom-left-radius: $border-radius;
@@ -428,11 +478,13 @@ header {
       z-index: 98;
       line-height: 0;
       padding: 0 2px;
+
       a {
         padding: 3px;
         display: inline-block;
       }
     }
+
     &.fullscreen {
       .editor {
         min-height: 0;
@@ -442,10 +494,12 @@ header {
         right: 0;
         top: 0;
         bottom: 0;
+
         .ace_content {
           height: 100% !important;
         }
       }
+
       .buttons {
         position: fixed;
       }
@@ -455,15 +509,19 @@ header {
   #pagination {
     margin-top: 1.3rem;
     text-align: left;
+
     .pagination {
       display: inline-flex;
       box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
+
       li:first-child a {
         border-left: none;
       }
+
       li a {
         border-left: 1px solid $pagination-border-color;
       }
+
       i {
         line-height: 0;
         vertical-align: middle;
@@ -484,6 +542,7 @@ header {
       h2 {
         font-size: $font-size-base + 1;
       }
+
       a.back-icon {
 
         i {
@@ -503,8 +562,10 @@ header {
   .content-wrapper {
     .content-title {
       overflow: hidden;
+
       .addbtn {
         top: 1rem;
+
         i {
           padding: .6rem;
           color: #FFF;
@@ -524,15 +585,19 @@ header {
   position: relative;
   display: inline-block;
   width: 100%;
+
   .table-responsive {
     overflow-y: hidden;
   }
+
   form {
     .custom-upload {
       position: relative;
+
       input[type="file"] {
         display: none;
       }
+
       > img {
         background: lighten($input-border-color, 10%);
         border-radius: $border-radius;
@@ -540,19 +605,23 @@ header {
         max-width: 100%;
         max-height: 60px;
         height: 100%;
+
         & + label {
           opacity: 0;
         }
       }
+
       > span {
         padding-left: 50px;
         overflow: hidden;
         text-overflow: ellipsis;
+
         & + label {
           padding: 8px;
           border-radius: $border-radius 0 0 $border-radius;
         }
       }
+
       img, span {
         & + label {
           margin: 0;
@@ -561,20 +630,24 @@ header {
           top: 0;
           transition: $transition;
           min-width: 1px;
+
           i {
             vertical-align: middle;
             line-height: 0;
           }
+
           .text {
             vertical-align: middle;
             display: none;
           }
+
           &:hover {
             color: #FFF;
             cursor: pointer;
           }
         }
       }
+
       &:hover {
         label {
           opacity: 1;
@@ -582,9 +655,11 @@ header {
         }
       }
     }
+
     .files {
       float: left;
       margin-bottom: -10px;
+
       img, span {
         border-radius: 3px;
         border: 1px solid $input-border-color;
@@ -604,11 +679,12 @@ header {
   .table-responsive table {
     table-layout: fixed;
     min-width: 600px;
+
     & th, & td {
-      padding: .7rem;
       vertical-align: middle;
       text-align: left;
     }
+
     .wid-15 {
       width: 15%;
       white-space: nowrap;
@@ -616,6 +692,7 @@ header {
       overflow: hidden;
       text-overflow: ellipsis;
     }
+
     .wid-20 {
       width: 20%;
       white-space: nowrap;
@@ -623,6 +700,7 @@ header {
       overflow: hidden;
       text-overflow: ellipsis;
     }
+
     .wid-25 {
       width: 25%;
       white-space: nowrap;
@@ -630,6 +708,7 @@ header {
       overflow: hidden;
       text-overflow: ellipsis;
     }
+
     .wid-30 {
       width: 30%;
       white-space: nowrap;
@@ -637,6 +716,7 @@ header {
       overflow: hidden;
       text-overflow: ellipsis;
     }
+
     .wid-40 {
       width: 40%;
       white-space: nowrap;
@@ -644,6 +724,7 @@ header {
       overflow: hidden;
       text-overflow: ellipsis;
     }
+
     .wid-50 {
       width: 50%;
       white-space: nowrap;
@@ -651,18 +732,21 @@ header {
       overflow: hidden;
       text-overflow: ellipsis;
     }
+
     thead th {
       text-transform: uppercase;
       font-size: $font-size-base - 0.2;
       line-height: $font-size-base + .5;
       letter-spacing: 0.03em;
       color: $blue;
+
       a {
         width: 100%;
         display: inline-block;
         vertical-align: middle;
         white-space: normal;
         font-size: $font-size-base - .2;
+
         i {
           font-size: $font-size-base + .3;
           line-height: 1;
@@ -673,51 +757,64 @@ header {
         }
       }
     }
+
     .check {
-      width: 34px;
+      width: 40px;
+
       label {
         vertical-align: middle;
       }
     }
+
     .process {
       width: 40px;
       text-align: center;
       position: relative;
+
       > a, .btn-group > a {
         line-height: 0;
         transition: $transition;
         color: #666;
         display: inline-block;
         vertical-align: middle;
+
         i {
           font-size: $font-size-base + .5;
           vertical-align: middle;
           transition: $transition;
         }
+
         &:hover {
           color: #222;
         }
+
         &.danger {
           color: #a94442;
         }
+
         &.success {
           color: #37B539;
         }
       }
+
       .btn-group {
         display: inline-block;
+
         .dropdown-menu {
           top: 30px;
           right: -10px;
           min-width: 170px;
+
           li.divider {
             margin: 5px 0;
           }
         }
+
         &.open {
           .dropdown-toggle {
             color: #222;
             box-shadow: none;
+
             i {
               transform: rotate(45deg);
             }
@@ -732,6 +829,7 @@ header {
       margin-top: 15px;
       margin-bottom: 15px;
     }
+
     li {
       a {
         background: rgba(0, 0, 0, 0.1);
@@ -739,34 +837,42 @@ header {
         display: block;
         padding: 10px;
         transition: $transition;
+
         i {
           margin-right: 10px;
         }
+
         .label {
           padding: 0.5em .6em .3em;
           margin-left: 10px;
         }
       }
+
       &:hover {
         a {
           background: rgba(0, 0, 0, 0.2);
           color: #000;
         }
       }
+
       &:first-child a {
         border-radius: 3px 3px 0 0;
       }
+
       &:last-child a {
         border-radius: 0 0 3px 3px;
       }
+
       > ul {
         padding: 0 10px;
         margin: 0;
         background: rgba(0, 0, 0, 0.03);
+
         li {
           display: inline-block;
           padding-top: 10px;
           min-width: 25%;
+
           &:last-child {
             padding-bottom: 10px;
           }
@@ -779,12 +885,13 @@ header {
 .info-text {
   position: absolute;
   top: 0;
+
   i {
     font-size: $font-size-base + .1;
   }
 }
 
-.table .custom-control-inline{
+.table .custom-control-inline {
   min-height: 1rem;
   vertical-align: top;
 }
@@ -793,34 +900,42 @@ header {
   position: relative;
   margin-bottom: 20px;
   width: 100%;
+
   input[type=text], input[type=search] {
     height: 34px;
     padding: 5px 12px 5px 35px;
   }
+
   .form-group {
     i {
       color: $text-color;
       left: 10px;
     }
   }
+
   > ul {
     list-style: none;
     margin: 0;
     padding: 0;
+
     > li {
       float: left;
     }
   }
+
   .left, .right {
     display: inline-block;
   }
+
   .left {
     > li {
       margin-right: 5px;
     }
   }
+
   .right {
     float: right;
+
     > li {
       margin-left: 5px;
     }
@@ -837,37 +952,61 @@ header {
 }
 
 .accordion-menu {
+  & > .panel {
+    &:first-child a{
+      border-radius: $border-radius-lg $border-radius-lg 0 0;
+    }
+
+    &:last-child a {
+      border-radius: 0 0 $border-radius-lg $border-radius-lg;
+    }
+  }
+
+  hr{
+    margin: 0;
+    border-color: $input-border-color;
+  }
+
   li {
     list-style-type: none;
   }
+
   .badge {
     margin-left: 5px;
     font-weight: 400;
     border-radius: 2px;
   }
+
   .panel-title {
     font-size: $font-size-base;
     margin: 0;
+
     a {
       background: #EEE;
       font-weight: normal;
       color: #222;
-      padding: 10px;
+      padding: 10px 14px;
       display: block;
       transition: $transition;
+
       &:hover {
         background: #DDD;
       }
     }
   }
+
   .panel-collapse {
     .panel-content {
       padding: 10px;
     }
+
     .custom-control {
-      width: 49%;
+      width: 33%;
       margin-right: 0;
-      .custom-control-description{
+      margin-top: .1rem;
+      margin-bottom: .1rem;
+
+      .custom-control-description {
         overflow: hidden;
         text-overflow: ellipsis;
       }
diff --git a/assets/admin/scss/modules/content-nav.scss b/assets/admin/scss/modules/content-nav.scss
index c85bde3..a788b47 100644
--- a/assets/admin/scss/modules/content-nav.scss
+++ b/assets/admin/scss/modules/content-nav.scss
@@ -21,7 +21,7 @@ nav#content_nav {
       display: inline-block;
       color: inherit;
       border-radius: 0;
-      padding: .5rem 0 1.1rem 0;
+      padding: .5rem 0 .9rem 0;
       transition: $transition;
       position: relative;
       &:hover,
diff --git a/assets/admin/scss/modules/selectize.scss b/assets/admin/scss/modules/selectize.scss
new file mode 100644
index 0000000..01be59f
--- /dev/null
+++ b/assets/admin/scss/modules/selectize.scss
@@ -0,0 +1,548 @@
+/*!
+ * Selectize Theme for Bootstrap 4 v2.0.2
+ *
+ * Copyright 2018 Constantine Seleznyoff <const.seoff@gmail.com>
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@import "~selectize/dist/css/selectize.css";
+
+// Input
+
+$selectize-input-bg: $input-bg !default;
+$selectize-input-bg-disabled: $input-disabled-bg !default;
+$selectize-input-bg-focus: $input-focus-bg !default;
+$selectize-input-border-color: $input-border-color !default;
+$selectize-input-border-color-focus: $input-focus-border-color !default;
+$selectize-input-border-color-invalid: $form-feedback-invalid-color !default;
+$selectize-input-border-color-valid: $form-feedback-valid-color !default;
+$selectize-input-border-radius: $input-border-radius !default;
+$selectize-input-border-width: $input-border-width !default;
+$selectize-input-box-shadow: $input-box-shadow !default;
+$selectize-input-box-shadow-focus: $input-focus-box-shadow !default;
+$selectize-input-box-shadow-spread-invalid: $input-focus-width !default;
+$selectize-input-box-shadow-spread-valid: $input-focus-width !default;
+$selectize-input-color: $input-color !default;
+$selectize-input-color-disabled: $selectize-input-color !default;
+$selectize-input-color-focus: $input-focus-color !default;
+$selectize-input-font-size: $font-size-base !default;
+$selectize-input-height: $input-height !default;
+$selectize-input-padding-x: $input-padding-x !default;
+$selectize-input-padding-y: $input-padding-y !default;
+$selectize-input-placeholder-color: $input-placeholder-color !default;
+$selectize-input-transition: $input-transition !default;
+
+// Large Input
+
+$selectize-input-border-radius-lg: $input-border-radius-lg !default;
+$selectize-input-font-size-lg: $font-size-lg !default;
+$selectize-input-height-lg: $input-height-lg !default;
+$selectize-input-padding-y-lg: $input-padding-y-lg !default;
+$selectize-input-padding-x-lg: $input-padding-x-lg !default;
+
+// Small Input
+
+$selectize-input-border-radius-sm: $input-border-radius-sm !default;
+$selectize-input-font-size-sm: $font-size-sm !default;
+$selectize-input-height-sm: $input-height-sm !default;
+$selectize-input-padding-y-sm: $input-padding-y-sm !default;
+$selectize-input-padding-x-sm: $input-padding-x-sm !default;
+
+// Input Caret
+
+$selectize-input-caret-margin: 0 2px 0 0 !default;
+$selectize-input-caret-margin-rtl: 0 0 0 2px !default;
+
+// Input Arrow
+
+$selectize-input-arrow-color: $body-color !default;
+$selectize-input-arrow-width: .625rem !default;
+
+// Input Item
+
+$selectize-input-item-bg: $primary !default;
+$selectize-input-item-border-radius: $badge-border-radius !default;
+$selectize-input-item-color: color-yiq($selectize-input-item-bg) !default;
+$selectize-input-item-font-size: $badge-font-size !default;
+$selectize-input-item-font-weight: $font-weight-normal !default;
+$selectize-input-item-margin: 0 3px 0 0 !default;
+$selectize-input-item-margin-rtl: 0 0 0 3px !default;
+$selectize-input-item-padding-x: $badge-padding-x !default;
+$selectize-input-item-padding-y: $badge-padding-y !default;
+
+// Dropdown
+
+$selectize-dropdown-bg: $dropdown-bg !default;
+$selectize-dropdown-border-color: $selectize-input-border-color !default;
+$selectize-dropdown-border-radius: $dropdown-border-radius !default;
+$selectize-dropdown-border-width: $selectize-input-border-width !default;
+$selectize-dropdown-box-shadow: $dropdown-box-shadow !default;
+$selectize-dropdown-color: $body-color !default;
+$selectize-dropdown-font-size: $font-size-base !default;
+$selectize-dropdown-height-max: 14.5rem !default;
+$selectize-dropdown-padding: $dropdown-padding-y 0 !default;
+$selectize-dropdown-zindex: $zindex-dropdown !default;
+
+// Dropdown Option
+
+$selectize-dropdown-option-bg: transparent !default;
+$selectize-dropdown-option-bg-active: transparentize($primary, 0.2) !default;
+$selectize-dropdown-option-bg-disabled: transparent !default;
+$selectize-dropdown-option-color: $dropdown-link-color !default;
+$selectize-dropdown-option-color-active: $dropdown-link-active-color !default;
+$selectize-dropdown-option-color-disabled: $dropdown-link-disabled-color !default;
+$selectize-dropdown-option-font-weight: $font-weight-normal !default;
+$selectize-dropdown-option-padding-x: $input-padding-x !default;
+$selectize-dropdown-option-padding-y: $dropdown-padding-y + .13 !default;
+
+// Dropdown Group
+
+$selectize-dropdown-group-margin-bottom: $nav-divider-margin-y !default;
+
+// Dropdown Group Header
+
+$selectize-dropdown-group-header-color: $dropdown-header-color !default;
+$selectize-dropdown-group-header-font-size: $font-size-sm !default;
+$selectize-dropdown-group-header-padding-x: $selectize-dropdown-option-padding-x !default;
+$selectize-dropdown-group-header-padding-y: $selectize-dropdown-option-padding-y !default;
+
+// Dropdown Group Divider
+
+$selectize-dropdown-group-divider-bg: $dropdown-divider-bg !default;
+$selectize-dropdown-group-divider-width: 1px !default;
+
+@mixin selectize-control-size($height, $border-radius, $font-size, $padding-x, $padding-y) {
+  height: $height;
+  padding: 0;
+
+  .selectize-input {
+    font-size: $font-size;
+    padding: $padding-y $padding-x;
+    @include border-radius($border-radius);
+  }
+
+  &.single {
+    $arrow-padding: calc(#{$padding-x} + #{$selectize-input-arrow-width} + #{$padding-y});
+
+    .selectize-input {
+      padding-right: $arrow-padding;
+    }
+
+    &.rtl {
+      .selectize-input {
+        padding-left: $arrow-padding;
+        padding-right: $padding-x;
+      }
+    }
+  }
+
+  &.multi {
+    min-height: $height;
+  }
+}
+
+@mixin selectize-control-validation-state($state, $color, $spread) {
+  &.is-#{$state} {
+    .selectize-input {
+      border-color: $color;
+
+      &:focus {
+        border-color: $color;
+        box-shadow: 0 0 0 $spread rgba($color, .25);
+      }
+    }
+  }
+}
+
+.form-control {
+  &.selectize-control {
+    background-color: transparent;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    height: $selectize-input-height;
+    padding: 0;
+    position: relative;
+    transition: none;
+
+    .selectize-input {
+      box-shadow: none;
+      line-height: $input-line-height;
+      background-clip: padding-box;
+      background-color: $selectize-input-bg;
+      border: $selectize-input-border-width solid $selectize-input-border-color;
+      color: $selectize-input-color;
+      cursor: text;
+      display: inline-flex;
+      align-items: center;
+      font-size: $selectize-input-font-size;
+      height: 100%;
+      overflow: hidden;
+      padding: $selectize-input-padding-y $selectize-input-padding-x;
+      position: relative;
+      width: 100%;
+
+      @include border-radius($selectize-input-border-radius);
+      @include box-shadow($selectize-input-box-shadow);
+      @include transition($selectize-input-transition);
+
+      * {
+        display: -moz-inline-stack;
+        display: inline-block;
+        *display: inline;
+        zoom: 1;
+        vertical-align: baseline;
+      }
+
+      input {
+        background: none !important;
+        border: none !important;
+        box-shadow: none !important;
+        color: inherit;
+        display: inline-block !important;
+        font-size: inherit;
+        line-height: inherit !important;
+        margin: $selectize-input-caret-margin !important;
+        max-height: none !important;
+        max-width: 100% !important;
+        min-height: 0 !important;
+        padding: 0 !important;
+        text-indent: 0 !important;
+        -webkit-user-select: auto !important;
+
+        @include hover-focus {
+          outline: none !important;
+        }
+
+        &::-ms-clear {
+          display: none;
+        }
+
+        &::placeholder {
+          color: $selectize-input-placeholder-color;
+          opacity: 1;
+        }
+      }
+
+      &.focus {
+        color: $selectize-input-color-focus;
+        background-color: $selectize-input-bg-focus;
+        border-color: $selectize-input-border-color-focus;
+        outline: 0;
+
+        @if $enable-shadows {
+          box-shadow: $selectize-input-box-shadow, $selectize-input-box-shadow-focus;
+        } @else {
+          box-shadow: $selectize-input-box-shadow-focus;
+        }
+      }
+
+      &.disabled {
+        background-color: $selectize-input-bg-disabled;
+        color: $selectize-input-color-disabled;
+        opacity: 1;
+      }
+
+      &.dropdown-active {
+        @include border-bottom-radius(0);
+      }
+
+    }
+
+    .selectize-dropdown {
+      background-color: transparent;
+      border: none;
+      border-radius: 0;
+      box-shadow: 0 4px 8px -6px rgba(0,0,0,.5);
+      display: none;
+      height: auto;
+      left: 0;
+      padding: 0;
+      position: absolute;
+      transition: none;
+      width: 100% !important;
+      z-index: $selectize-dropdown-zindex;
+      padding-top: 1px;
+
+      .selectize-dropdown-content {
+        background-color: $selectize-dropdown-bg;
+        background-clip: padding-box;
+        border: $selectize-dropdown-border-width solid $selectize-input-border-color-focus;
+        border-top: none;
+        border-radius: 0 0 $selectize-dropdown-border-radius $selectize-dropdown-border-radius;
+        border-top-width: 0;
+        color: $selectize-dropdown-color;
+        font-size: $selectize-dropdown-font-size;
+        max-height: $selectize-dropdown-height-max;
+        overflow-x: hidden;
+        overflow-y: auto;
+        padding: $selectize-dropdown-padding;
+        position: relative;
+        text-align: left;
+        -webkit-overflow-scrolling: touch;
+        @include box-shadow($selectize-dropdown-box-shadow);
+
+        .option,
+        .create {
+          background-color: $selectize-dropdown-option-bg;
+          color: $selectize-dropdown-option-color;
+          font-weight: $selectize-dropdown-option-font-weight;
+          padding: $selectize-dropdown-option-padding-y $selectize-dropdown-option-padding-x;
+          text-align: inherit;
+          white-space: nowrap;
+        }
+
+        .create {
+          cursor: pointer;
+          padding: .1rem $selectize-dropdown-option-padding-y;
+        }
+
+        .option {
+          @include hover-focus {
+            color: $selectize-dropdown-option-color-active;
+            text-decoration: none;
+            @include gradient-bg($selectize-dropdown-option-bg-active);
+          }
+
+          &.active,
+          &:active {
+            color: $selectize-dropdown-option-color-active;
+            text-decoration: none;
+            @include gradient-bg($selectize-dropdown-option-bg-active);
+          }
+
+          &.disabled,
+          &:disabled,
+          &[data-disabled] {
+            background-color: $selectize-dropdown-option-bg-disabled;
+            color: $selectize-dropdown-option-color-disabled;
+
+            @if $enable-gradients {
+              background-image: none;
+            }
+          }
+
+          &[data-selectable] {
+            cursor: pointer;
+            overflow: hidden;
+          }
+        }
+
+        .optgroup {
+          border-bottom: $selectize-dropdown-group-divider-width solid $selectize-dropdown-group-divider-bg;
+          margin-bottom: $selectize-dropdown-group-margin-bottom;
+          padding-bottom: $selectize-dropdown-group-margin-bottom;
+
+          &:last-child {
+            border-bottom-width: 0;
+            margin-bottom: 0;
+            padding-bottom: 0;
+          }
+
+          .optgroup-header {
+            color: $selectize-dropdown-group-header-color;
+            display: block;
+            font-size: $selectize-dropdown-group-header-font-size;
+            margin-bottom: 0;
+            padding: $selectize-dropdown-group-header-padding-y $selectize-dropdown-group-header-padding-x;
+            white-space: nowrap;
+          }
+        }
+      }
+    }
+
+    &.single {
+      &:after {
+        $selectize-input-arrow-width-half: $selectize-input-arrow-width / 2;
+        $selectize-arrow-height: 1.732050808 * $selectize-input-arrow-width-half;
+
+        border-color: $selectize-input-arrow-color transparent transparent transparent;
+        border-style: solid;
+        border-width: $selectize-arrow-height $selectize-input-arrow-width-half 0 $selectize-input-arrow-width-half;
+        content: '';
+        display: block;
+        height: 0;
+        margin-top: -1 * $selectize-arrow-height / 2;
+        position: absolute;
+        top: 50%;
+        right: $selectize-input-padding-x;
+        width: 0;
+      }
+
+      .selectize-input {
+        padding-right: calc(#{$selectize-input-padding-x} + #{$selectize-input-arrow-width} + #{$selectize-input-padding-y});
+      }
+    }
+
+    &.multi {
+      height: auto;
+      min-height: $selectize-input-height;
+
+      .selectize-input {
+        height: auto;
+        min-height: 100%;
+        overflow: auto;
+        flex-flow: row wrap;
+
+        .item {
+          margin: $selectize-input-item-margin;
+          margin-top: .125rem;
+          margin-bottom: .125rem;
+          &:hover .remove{
+            background: rgba(0, 0, 0, 0.05);
+          }
+        }
+
+        &.has-items {
+          padding: calc(.3rem - .112rem) $selectize-input-padding-y;
+        }
+      }
+    }
+
+    .selectize-dropdown-content .create strong,
+    &.multi .selectize-input .item {
+      background-color: transparentize($selectize-input-item-bg, 0.2);
+      color: $selectize-input-item-color;
+      display: inline-flex;
+      font-size: $font-size-base - .1;
+      font-weight: $selectize-input-item-font-weight;
+      padding: 0 $selectize-input-item-padding-x * 2.5;
+      text-align: center;
+      white-space: nowrap;
+      margin-right: .25rem;
+      border-radius: $border-radius;
+      align-items: center;
+    }
+
+    .selectize-dropdown-content .create strong {
+      padding: .2rem .7rem;
+    }
+
+    &.multi .selectize-input .item {
+      padding-right: 0 !important;
+    }
+
+    &.rtl {
+      direction: rtl;
+
+      .selectize-input {
+        text-align: right;
+
+        input {
+          margin: $selectize-input-caret-margin-rtl !important;
+        }
+      }
+
+      .selectize-dropdown {
+        .selectize-dropdown-content {
+          text-align: right !important;
+        }
+      }
+
+      &.single {
+        &:after {
+          left: $selectize-input-padding-x;
+          right: auto;
+        }
+
+        .selectize-input {
+          padding-left: calc(#{$selectize-input-padding-x} + #{$selectize-input-arrow-width} + #{$selectize-input-padding-y});
+          padding-right: $selectize-input-padding-x;
+        }
+      }
+
+      &.multi {
+        .selectize-input {
+          .item {
+            margin: $selectize-input-item-margin-rtl;
+          }
+        }
+      }
+    }
+
+    @include selectize-control-validation-state('valid', $selectize-input-border-color-valid, $selectize-input-box-shadow-spread-valid);
+    @include selectize-control-validation-state('invalid', $selectize-input-border-color-invalid, $selectize-input-box-shadow-spread-invalid);
+  }
+}
+
+.form-control-lg {
+  &.selectize-control {
+    @include selectize-control-size($selectize-input-height-lg, $selectize-input-border-radius-lg, $selectize-input-font-size-lg, $selectize-input-padding-x-lg, $selectize-input-padding-y-lg);
+  }
+}
+
+.form-control-sm {
+  &.selectize-control {
+    @include selectize-control-size($selectize-input-height-sm, $selectize-input-border-radius-sm, $selectize-input-font-size-sm, $selectize-input-padding-x-sm, $selectize-input-padding-y-sm);
+  }
+}
+
+.input-group {
+  > .form-control {
+    &.selectize-control {
+      &.multi {
+        height: $selectize-input-height;
+      }
+    }
+
+    &:not(:first-child) {
+      &.selectize-control {
+        .selectize-input {
+          @include border-left-radius(0);
+        }
+      }
+    }
+
+    &:not(:last-child) {
+      &.selectize-control {
+        .selectize-input {
+          @include border-right-radius(0);
+        }
+      }
+    }
+  }
+}
+
+.selectize-control.plugin-remove_button [data-value] .remove {
+  position: static;
+  width: auto;
+  font-size: 21px;
+  font-weight: 300;
+  border-radius: 0 $border-radius $border-radius 0;
+  margin-left: .25rem;
+  padding: 13px 8px 15px 8px;
+  line-height: 0;
+  border: none;
+}
+
+.selectize-input.dropdown-active::before {
+  background: $selectize-input-border-color-focus;
+}
+
+.selectize-input,
+.selectize-control.single .selectize-input.input-active {
+  display: inline-flex;
+  border-bottom: none;
+}
+
+.selectize-dropdown-content {
+  .no-results {
+    padding: 0 $selectize-input-padding-x;
+    color: $text-muted;
+  }
+}
+.multi {
+  .selectize-input.dropdown-active::before{
+    display: none;
+  }
+}
diff --git a/assets/admin/scss/modules/sumoselect.scss b/assets/admin/scss/modules/sumoselect.scss
deleted file mode 100644
index 77cd940..0000000
--- a/assets/admin/scss/modules/sumoselect.scss
+++ /dev/null
@@ -1,439 +0,0 @@
-.SumoSelect p {
-  margin: 0;
-}
-
-.SumoSelect {
-  width: auto;
-  min-width: 100px;
-  label {
-    margin-bottom: 0;
-  }
-}
-
-.SelectBox {
-  padding: $input-btn-padding-y $input-btn-padding-x;
-}
-
-.sumoStopScroll {
-  overflow: hidden;
-}
-
-/* Filtering style */
-.SumoSelect .hidden {
-  display: none;
-}
-
-.SumoSelect .search-txt {
-  display: none;
-  outline: none;
-}
-
-.SumoSelect .no-match {
-  display: none;
-  padding: 6px;
-}
-
-.SumoSelect.open .search-txt {
-  display: inline-block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  margin: 0;
-  padding: $input-btn-padding-y $input-btn-padding-x;
-  border: none;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  border-radius: 5px;
-}
-
-.SumoSelect.open > .search > span, .SumoSelect.open > .search > label {
-  visibility: hidden;
-}
-
-.SumoSelect.open .CaptionCont {
-  border-color: $input-focus-border-color;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-/*this is applied on that hidden select. DO NOT USE display:none; or visiblity:hidden; and Do not override any of these properties. */
-.SelectClass, .SumoUnder {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 100%;
-  width: 100%;
-  border: none;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-  filter: alpha(opacity=0);
-  -moz-opacity: 0;
-  -khtml-opacity: 0;
-  opacity: 0;
-}
-
-.SelectClass {
-  z-index: 1;
-}
-
-.SumoSelect > .optWrapper > .options li.opt label, .SumoSelect > .CaptionCont, .SumoSelect .select-all > label {
-  user-select: none;
-  -o-user-select: none;
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-}
-
-.SumoSelect {
-  display: inline-block;
-  position: relative;
-  outline: none;
-  width: 100%;
-}
-
-.SumoSelect > .CaptionCont {
-  position: relative;
-  border: 1px solid $input-border-color;
-  min-height: 14px;
-  line-height: $input-btn-line-height;
-  background-color: #fff;
-  border-radius: $input-border-radius;
-  margin: 0;
-}
-
-.SumoSelect > .CaptionCont > span {
-  display: block;
-  padding-right: 30px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  cursor: default;
-}
-
-/*placeholder style*/
-.SumoSelect > .CaptionCont > span.placeholder {
-  color: #ccc;
-  font-style: italic;
-}
-
-.SumoSelect > .CaptionCont > label {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 30px;
-}
-
-.SumoSelect > .CaptionCont > label > i {
-  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wMdBhAJ/fwnjwAAAGFJREFUKM9jYBh+gBFKuzEwMKQwMDB8xaOWlYGB4T4DA0MrsuapDAwM//HgNwwMDDbYTJuGQ8MHBgYGJ1xOYGNgYJiBpuEpAwODHSF/siDZ+ISBgcGClEDqZ2Bg8B6CkQsAPRga0cpRtDEAAAAASUVORK5CYII=');
-  background-position: center center;
-  width: 16px;
-  height: 16px;
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-  background-repeat: no-repeat;
-  opacity: 0.8;
-}
-
-.SumoSelect > .optWrapper {
-  display: none;
-  z-index: 1000;
-  top: 30px;
-  width: 100%;
-  position: absolute;
-  left: 0;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  background: #fff;
-  border: 1px solid $input-focus-border-color;
-  box-shadow: 0 3px 10px -1px rgba(0, 0, 0, 0.1);
-  border-top: none;
-  border-radius: 0 0 $border-radius+.1 $border-radius+.1;
-  overflow: hidden;
-  margin-bottom: 10px;
-  label {
-    font-weight: 400;
-  }
-}
-
-.SumoSelect.open > .optWrapper {
-  top: 34px;
-  display: block;
-}
-
-.SumoSelect.open > .optWrapper.up {
-  top: auto;
-  bottom: 100%;
-  margin-bottom: 5px;
-}
-
-.SumoSelect > .optWrapper ul {
-  list-style: none;
-  display: block;
-  padding: 0;
-  margin: 0;
-  overflow: auto;
-}
-
-.SumoSelect > .optWrapper > .options {
-  position: relative;
-  /*Set the height of pop up here (only for desktop mode)*/
-  max-height: 250px;
-  /*height*/
-}
-
-.SumoSelect > .optWrapper.okCancelInMulti > .options {
-  border-radius: 2px 2px 0 0;
-}
-
-.SumoSelect > .optWrapper.selall > .options {
-  border-radius: 0 0 2px 2px;
-}
-
-.SumoSelect > .optWrapper.selall.okCancelInMulti > .options {
-  border-radius: 0;
-}
-
-.SumoSelect > .optWrapper > .options li.group.disabled > label {
-  opacity: 0.5;
-}
-
-.SumoSelect > .optWrapper > .options li ul li.opt {
-  padding-left: 22px;
-}
-
-.SumoSelect > .optWrapper.multiple > .options li ul li.opt {
-  padding-left: 50px;
-}
-
-.SumoSelect > .optWrapper.isFloating > .options {
-  //max-height: 100%;
-}
-
-.SumoSelect > .optWrapper > .options li.opt {
-  padding: $input-btn-padding-y $input-btn-padding-x;
-  line-height: $input-btn-line-height;
-  position: relative;
-}
-
-.SumoSelect > .optWrapper > .options > li.opt:first-child {
-}
-
-.SumoSelect > .optWrapper.selall > .options > li.opt:first-child {
-  border-radius: 0;
-}
-
-.SumoSelect > .optWrapper > .options > li.opt:last-child {
-  border-bottom: none;
-}
-
-.SumoSelect > .optWrapper.okCancelInMulti > .options > li.opt:last-child {
-  border-radius: 0;
-}
-
-.SumoSelect > .optWrapper > .options li.opt:hover {
-  background-color: $dropdown-link-active-bg;
-  color: #FFF;
-}
-
-.SumoSelect > .optWrapper > .options li.opt.sel, .SumoSelect .select-all.sel {
-  background-color: #a1c0e4;
-}
-
-.SumoSelect > .optWrapper > .options li label {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  display: block;
-  cursor: pointer;
-}
-
-.SumoSelect > .optWrapper > .options li span {
-  display: none;
-}
-
-.SumoSelect > .optWrapper > .options li.group > label {
-  cursor: default;
-  padding: 8px 6px;
-  font-weight: 300;
-}
-
-/*Floating styles*/
-.SumoSelect > .optWrapper.isFloating {
-  /*  position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    width: 90%;
-    bottom: 0;
-    margin: auto;
-    max-height: 90%;*/
-}
-
-/*disabled state*/
-.SumoSelect > .optWrapper > .options li.opt.disabled {
-  background-color: inherit;
-  pointer-events: none;
-}
-
-.SumoSelect > .optWrapper > .options li.opt.disabled * {
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 5-7 */
-  filter: alpha(opacity=50); /* Netscape */
-  -moz-opacity: 0.5; /* Safari 1.x */
-  -khtml-opacity: 0.5; /* Good browsers */
-  opacity: 0.5;
-}
-
-/*styling for multiple select*/
-.SumoSelect > .optWrapper.multiple > .options li.opt {
-  padding-left: 35px;
-  cursor: pointer;
-}
-
-.SumoSelect > .optWrapper.multiple > .options li.opt span,
-.SumoSelect .select-all > span {
-  position: absolute;
-  display: block;
-  width: 30px;
-  top: 0;
-  bottom: 0;
-  margin-left: -35px;
-}
-
-.SumoSelect > .optWrapper.multiple > .options li.opt span i,
-.SumoSelect .select-all > span i {
-  position: absolute;
-  margin: auto;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  width: $custom-control-indicator-size;
-  height: $custom-control-indicator-size;
-  //border: 1px solid #AEAEAE;
-  border-radius: $custom-checkbox-indicator-border-radius;
-  box-shadow: $custom-control-indicator-box-shadow;
-  background-color: $custom-control-indicator-bg;
-}
-
-.SumoSelect > .optWrapper > .MultiControls {
-  display: none;
-  border-top: 1px solid #ddd;
-  background-color: #fff;
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.13);
-  border-radius: 0 0 3px 3px;
-}
-
-.SumoSelect > .optWrapper.multiple.isFloating > .MultiControls {
-  /*  display: block;
-    margin-top: 5px;
-    position: absolute;
-    bottom: 0;
-    width: 100%;*/
-}
-
-.SumoSelect > .optWrapper.multiple.okCancelInMulti > .MultiControls {
-  display: block;
-}
-
-.SumoSelect > .optWrapper.multiple.okCancelInMulti > .MultiControls > p {
-  padding: 6px;
-}
-
-.SumoSelect > .optWrapper.multiple.okCancelInMulti > .MultiControls > p:focus {
-  box-shadow: 0 0 2px #a1c0e4;
-  border-color: #a1c0e4;
-  outline: none;
-  background-color: #a1c0e4;
-}
-
-.SumoSelect > .optWrapper.multiple > .MultiControls > p {
-  display: inline-block;
-  cursor: pointer;
-  padding: 12px;
-  width: 50%;
-  box-sizing: border-box;
-  text-align: center;
-}
-
-.SumoSelect > .optWrapper.multiple > .MultiControls > p:hover {
-  background-color: #f1f1f1;
-}
-
-.SumoSelect > .optWrapper.multiple > .MultiControls > p.btnOk {
-  border-right: 1px solid #DBDBDB;
-  border-radius: 0 0 0 3px;
-}
-
-.SumoSelect > .optWrapper.multiple > .MultiControls > p.btnCancel {
-  border-radius: 0 0 3px 0;
-}
-
-/*styling for select on popup mode*/
-.SumoSelect > .optWrapper.isFloating > .options li.opt {
-}
-
-/*styling for only multiple select on popup mode*/
-.SumoSelect > .optWrapper.multiple.isFloating > .options li.opt {
-  ///padding-left: 35px;
-}
-
-.SumoSelect > .optWrapper.multiple.isFloating {
-  // padding-bottom: 43px;
-}
-
-.SumoSelect > .optWrapper.multiple > .options li.opt.selected span i,
-.SumoSelect .select-all.selected > span i,
-.SumoSelect .select-all.partial > span i {
-  box-shadow: none;
-  border-color: transparent;
-  background: $custom-checkbox-indicator-indeterminate-bg url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAMAAABhq6zVAAAAOVBMVEUAAAD///////////////////////////////////////////////////////////////////////8KOjVvAAAAEnRSTlMAmZC4na+U06WLfldIPCojEg2xkue8AAAAQklEQVQI12PADviYeRAcRiFmJLYQI4MgN5jNIiTExsDALMQJEWeDCHEJANlMMAXsIDYEcAiB2DDAisRm4GXlx+IIAKHOAiXV9MrtAAAAAElFTkSuQmCC) no-repeat center center;
-}
-
-/*disabled state*/
-.SumoSelect.disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
-}
-
-.SumoSelect.disabled > .CaptionCont {
-  border-color: #ccc;
-  box-shadow: none;
-}
-
-/**Select all button**/
-.SumoSelect .select-all {
-  border-radius: 3px 3px 0 0;
-  position: relative;
-  border-bottom: 1px solid #ddd;
-  background-color: #fff;
-  padding: 8px 0 3px 35px;
-  height: 20px;
-  cursor: pointer;
-}
-
-.SumoSelect .select-all > label, .SumoSelect .select-all > span i {
-  cursor: pointer;
-}
-
-.SumoSelect .select-all.partial > span i {
-  background-color: #ccc;
-}
-
-/*styling for optgroups*/
-.SumoSelect > .optWrapper > .options li.optGroup {
-  padding-left: 5px;
-  text-decoration: underline;
-}
-
diff --git a/assets/admin/scss/modules/variables.scss b/assets/admin/scss/modules/variables.scss
index 42dd8fa..6ca3cbc 100644
--- a/assets/admin/scss/modules/variables.scss
+++ b/assets/admin/scss/modules/variables.scss
@@ -1,16 +1,13 @@
 @import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/mixins";
 
 // Variables
 //
 // Variables should follow the `$component-state-property-size` formula for
 // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
 
-
-//
 // Color system
-//
 
-// stylelint-disable
 $white:    #fff !default;
 $gray-100: #f8f9fa !default;
 $gray-200: #e9ecef !default;
@@ -24,17 +21,21 @@ $gray-900: #212529 !default;
 $black:    #000 !default;
 
 $grays: () !default;
-$grays: map-merge((
-        "100": $gray-100,
-        "200": $gray-200,
-        "300": $gray-300,
-        "400": $gray-400,
-        "500": $gray-500,
-        "600": $gray-600,
-        "700": $gray-700,
-        "800": $gray-800,
-        "900": $gray-900
-), $grays);
+// stylelint-disable-next-line scss/dollar-variable-default
+$grays: map-merge(
+                (
+                        "100": $gray-100,
+                        "200": $gray-200,
+                        "300": $gray-300,
+                        "400": $gray-400,
+                        "500": $gray-500,
+                        "600": $gray-600,
+                        "700": $gray-700,
+                        "800": $gray-800,
+                        "900": $gray-900
+                ),
+                $grays
+);
 
 $blue:    #007bff !default;
 $indigo:  #6610f2 !default;
@@ -48,21 +49,25 @@ $teal:    #20c997 !default;
 $cyan:    #17a2b8 !default;
 
 $colors: () !default;
-$colors: map-merge((
-        "blue":       $blue,
-        "indigo":     $indigo,
-        "purple":     $purple,
-        "pink":       $pink,
-        "red":        $red,
-        "orange":     $orange,
-        "yellow":     $yellow,
-        "green":      $green,
-        "teal":       $teal,
-        "cyan":       $cyan,
-        "white":      $white,
-        "gray":       $gray-600,
-        "gray-dark":  $gray-800
-), $colors);
+// stylelint-disable-next-line scss/dollar-variable-default
+$colors: map-merge(
+                (
+                        "blue":       $blue,
+                        "indigo":     $indigo,
+                        "purple":     $purple,
+                        "pink":       $pink,
+                        "red":        $red,
+                        "orange":     $orange,
+                        "yellow":     $yellow,
+                        "green":      $green,
+                        "teal":       $teal,
+                        "cyan":       $cyan,
+                        "white":      $white,
+                        "gray":       $gray-600,
+                        "gray-dark":  $gray-800
+                ),
+                $colors
+);
 
 $primary:       $blue !default;
 $secondary:     $gray-600 !default;
@@ -74,40 +79,56 @@ $light:         $gray-100 !default;
 $dark:          $gray-800 !default;
 
 $theme-colors: () !default;
-$theme-colors: map-merge((
-        "primary":    $primary,
-        "secondary":  $secondary,
-        "success":    $success,
-        "info":       $info,
-        "warning":    $warning,
-        "danger":     $danger,
-        "light":      $light,
-        "dark":       $dark
-), $theme-colors);
-// stylelint-enable
+// stylelint-disable-next-line scss/dollar-variable-default
+$theme-colors: map-merge(
+                (
+                        "primary":    $primary,
+                        "secondary":  $secondary,
+                        "success":    $success,
+                        "info":       $info,
+                        "warning":    $warning,
+                        "danger":     $danger,
+                        "light":      $light,
+                        "dark":       $dark
+                ),
+                $theme-colors
+);
 
 // Set a specific jump point for requesting color jumps
 $theme-color-interval:      8% !default;
 
 // The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
-$yiq-contrasted-threshold: 150 !default;
+$yiq-contrasted-threshold:  150 !default;
 
 // Customize the light and dark text colors for use in our YIQ color contrast function.
-$yiq-text-dark: $gray-900 !default;
-$yiq-text-light: $white !default;
+$yiq-text-dark:             $gray-900 !default;
+$yiq-text-light:            $white !default;
+
+// Characters which are escaped by the escape-svg function
+$escaped-characters: (
+                ("<","%3c"),
+                (">","%3e"),
+                ("#","%23"),
+) !default;
+
 
 // Options
 //
 // Quickly modify global styling by enabling or disabling optional features.
 
-$enable-caret:              true !default;
-$enable-rounded:            true !default;
-$enable-shadows:            false !default;
-$enable-gradients:          false !default;
-$enable-transitions:        true !default;
-$enable-hover-media-query:  false !default; // Deprecated, no longer affects any compiled CSS
-$enable-grid-classes:       true !default;
-$enable-print-styles:       true !default;
+$enable-caret:                                true !default;
+$enable-rounded:                              true !default;
+$enable-shadows:                              false !default;
+$enable-gradients:                            false !default;
+$enable-transitions:                          true !default;
+$enable-prefers-reduced-motion-media-query:   true !default;
+$enable-hover-media-query:                    false !default; // Deprecated, no longer affects any compiled CSS
+$enable-grid-classes:                         true !default;
+$enable-pointer-cursor-for-buttons:           true !default;
+$enable-print-styles:                         true !default;
+$enable-responsive-font-sizes:                false !default;
+$enable-validation-icons:                     true !default;
+$enable-deprecation-messages:                 true !default;
 
 
 // Spacing
@@ -116,27 +137,35 @@ $enable-print-styles:       true !default;
 // variables. Mostly focused on spacing.
 // You can add more entries to the $spacers map, should you need more variation.
 
-// stylelint-disable
 $spacer: 1rem !default;
 $spacers: () !default;
-$spacers: map-merge((
-        0: 0,
-        1: ($spacer * .25),
-        2: ($spacer * .5),
-        3: $spacer,
-        4: ($spacer * 1.5),
-        5: ($spacer * 3)
-), $spacers);
+// stylelint-disable-next-line scss/dollar-variable-default
+$spacers: map-merge(
+                (
+                        0: 0,
+                        1: ($spacer * .25),
+                        2: ($spacer * .5),
+                        3: $spacer,
+                        4: ($spacer * 1.5),
+                        5: ($spacer * 3)
+                ),
+                $spacers
+);
 
 // This variable affects the `.h-*` and `.w-*` classes.
 $sizes: () !default;
-$sizes: map-merge((
-        25: 25%,
-        50: 50%,
-        75: 75%,
-        100: 100%
-), $sizes);
-// stylelint-enable
+// stylelint-disable-next-line scss/dollar-variable-default
+$sizes: map-merge(
+                (
+                        25: 25%,
+                        50: 50%,
+                        75: 75%,
+                        100: 100%,
+                        auto: auto
+                ),
+                $sizes
+);
+
 
 // Body
 //
@@ -145,14 +174,17 @@ $sizes: map-merge((
 $body-bg:                   $white !default;
 $body-color:                $gray-900 !default;
 
+
 // Links
 //
 // Style anchor elements.
 
-$link-color:                theme-color("primary") !default;
-$link-decoration:           none !default;
-$link-hover-color:          darken($link-color, 15%) !default;
-$link-hover-decoration:     underline !default;
+$link-color:                              theme-color("primary") !default;
+$link-decoration:                         none !default;
+$link-hover-color:                        darken($link-color, 15%) !default;
+$link-hover-decoration:                   underline !default;
+// Darken percentage for links with `.text-*` class (e.g. `.text-success`)
+$emphasized-link-hover-darken-percentage: 15% !default;
 
 // Paragraphs
 //
@@ -175,7 +207,7 @@ $grid-breakpoints: (
 ) !default;
 
 @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
-@include _assert-starts-at-zero($grid-breakpoints);
+@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
 
 
 // Grid containers
@@ -198,6 +230,8 @@ $container-max-widths: (
 
 $grid-columns:                12 !default;
 $grid-gutter-width:           30px !default;
+$grid-row-columns:            6 !default;
+
 
 // Components
 //
@@ -213,33 +247,54 @@ $border-radius:               .25rem !default;
 $border-radius-lg:            .3rem !default;
 $border-radius-sm:            .2rem !default;
 
+$rounded-pill:                50rem !default;
+
+$box-shadow-sm:               0 .125rem .25rem rgba($black, .075) !default;
+$box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;
+$box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;
+
 $component-active-color:      $white !default;
 $component-active-bg:         theme-color("primary") !default;
 
 $caret-width:                 .3em !default;
+$caret-vertical-align:        $caret-width * .85 !default;
+$caret-spacing:               $caret-width * .85 !default;
 
 $transition-base:             all .2s ease-in-out !default;
 $transition-fade:             opacity .15s linear !default;
 $transition-collapse:         height .35s ease !default;
 
-
-// Fonts
+$embed-responsive-aspect-ratios: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$embed-responsive-aspect-ratios: join(
+                        (
+                                        (21 9),
+                                        (16 9),
+                                        (4 3),
+                                        (1 1),
+                        ),
+                $embed-responsive-aspect-ratios
+);
+
+// Typography
 //
 // Font, line-height, and color for body text, headings, and more.
 
 // stylelint-disable value-keyword-case
-$font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 $font-family-base:            $font-family-sans-serif !default;
 // stylelint-enable value-keyword-case
 
 $font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
-$font-size-lg:                ($font-size-base * 1.25) !default;
-$font-size-sm:                ($font-size-base * .875) !default;
+$font-size-lg:                $font-size-base * 1.25 !default;
+$font-size-sm:                $font-size-base * .875 !default;
 
+$font-weight-lighter:         lighter !default;
 $font-weight-light:           300 !default;
 $font-weight-normal:          400 !default;
 $font-weight-bold:            700 !default;
+$font-weight-bolder:          bolder !default;
 
 $font-weight-base:            $font-weight-normal !default;
 $line-height-base:            1.5 !default;
@@ -251,11 +306,11 @@ $h4-font-size:                $font-size-base * 1.5 !default;
 $h5-font-size:                $font-size-base * 1.25 !default;
 $h6-font-size:                $font-size-base !default;
 
-$headings-margin-bottom:      ($spacer / 2) !default;
-$headings-font-family:        inherit !default;
+$headings-margin-bottom:      $spacer / 2 !default;
+$headings-font-family:        null !default;
 $headings-font-weight:        500 !default;
 $headings-line-height:        1.2 !default;
-$headings-color:              inherit !default;
+$headings-color:              null !default;
 
 $display1-size:               6rem !default;
 $display2-size:               5.5rem !default;
@@ -268,7 +323,7 @@ $display3-weight:             300 !default;
 $display4-weight:             300 !default;
 $display-line-height:         $headings-line-height !default;
 
-$lead-font-size:              ($font-size-base * 1.25) !default;
+$lead-font-size:              $font-size-base * 1.25 !default;
 $lead-font-weight:            300 !default;
 
 $small-font-size:             80% !default;
@@ -276,7 +331,8 @@ $small-font-size:             80% !default;
 $text-muted:                  $gray-600 !default;
 
 $blockquote-small-color:      $gray-600 !default;
-$blockquote-font-size:        ($font-size-base * 1.25) !default;
+$blockquote-small-font-size:  $small-font-size !default;
+$blockquote-font-size:        $font-size-base * 1.25 !default;
 
 $hr-border-color:             rgba($black, .1) !default;
 $hr-border-width:             $border-width !default;
@@ -299,25 +355,35 @@ $hr-margin-y:                 $spacer !default;
 //
 // Customizes the `.table` component with basic values, each used across all table variations.
 
-$table-cell-padding:          .75rem !default;
+$table-cell-padding:          .6rem !default;
 $table-cell-padding-sm:       .3rem !default;
 
-$table-bg:                    transparent !default;
+$table-color:                 $body-color !default;
+$table-bg:                    null !default;
 $table-accent-bg:             rgba($black, .05) !default;
+$table-hover-color:           $table-color !default;
 $table-hover-bg:              rgba($black, .075) !default;
 $table-active-bg:             $table-hover-bg !default;
 
 $table-border-width:          $border-width !default;
-$table-border-color:          $gray-300 !default;
+$table-border-color:          $border-color !default;
 
 $table-head-bg:               $gray-200 !default;
 $table-head-color:            $gray-700 !default;
 
-$table-dark-bg:               $gray-900 !default;
+$table-dark-color:            $white !default;
+$table-dark-bg:               $gray-800 !default;
 $table-dark-accent-bg:        rgba($white, .05) !default;
+$table-dark-hover-color:      $table-dark-color !default;
 $table-dark-hover-bg:         rgba($white, .075) !default;
-$table-dark-border-color:     lighten($gray-900, 7.5%) !default;
-$table-dark-color:            $body-bg !default;
+$table-dark-border-color:     lighten($table-dark-bg, 7.5%) !default;
+
+$table-striped-order:         odd !default;
+
+$table-caption-color:         $text-muted !default;
+
+$table-bg-level:              -9 !default;
+$table-border-level:          -6 !default;
 
 
 // Buttons + Forms
@@ -326,6 +392,8 @@ $table-dark-color:            $body-bg !default;
 
 $input-btn-padding-y:         .375rem !default;
 $input-btn-padding-x:         .75rem !default;
+$input-btn-font-family:       null !default;
+$input-btn-font-size:         $font-size-base !default;
 $input-btn-line-height:       $line-height-base !default;
 
 $input-btn-focus-width:       .2rem !default;
@@ -334,10 +402,12 @@ $input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-colo
 
 $input-btn-padding-y-sm:      .25rem !default;
 $input-btn-padding-x-sm:      .5rem !default;
+$input-btn-font-size-sm:      $font-size-sm !default;
 $input-btn-line-height-sm:    $line-height-sm !default;
 
 $input-btn-padding-y-lg:      .5rem !default;
 $input-btn-padding-x-lg:      1rem !default;
+$input-btn-font-size-lg:      $font-size-lg !default;
 $input-btn-line-height-lg:    $line-height-lg !default;
 
 $input-btn-border-width:      $border-width !default;
@@ -349,14 +419,19 @@ $input-btn-border-width:      $border-width !default;
 
 $btn-padding-y:               $input-btn-padding-y !default;
 $btn-padding-x:               $input-btn-padding-x !default;
+$btn-font-family:             $input-btn-font-family !default;
+$btn-font-size:               $input-btn-font-size !default;
 $btn-line-height:             $input-btn-line-height !default;
+$btn-white-space:             null !default; // Set to `nowrap` to prevent text wrapping
 
 $btn-padding-y-sm:            $input-btn-padding-y-sm !default;
 $btn-padding-x-sm:            $input-btn-padding-x-sm !default;
+$btn-font-size-sm:            $input-btn-font-size-sm !default;
 $btn-line-height-sm:          $input-btn-line-height-sm !default;
 
 $btn-padding-y-lg:            $input-btn-padding-y-lg !default;
 $btn-padding-x-lg:            $input-btn-padding-x-lg !default;
+$btn-font-size-lg:            $input-btn-font-size-lg !default;
 $btn-line-height-lg:          $input-btn-line-height-lg !default;
 
 $btn-border-width:            $input-btn-border-width !default;
@@ -382,16 +457,23 @@ $btn-transition:              color .15s ease-in-out, background-color .15s ease
 
 // Forms
 
+$label-margin-bottom:                   .5rem !default;
+
 $input-padding-y:                       $input-btn-padding-y !default;
 $input-padding-x:                       $input-btn-padding-x !default;
+$input-font-family:                     $input-btn-font-family !default;
+$input-font-size:                       $input-btn-font-size !default;
+$input-font-weight:                     $font-weight-base !default;
 $input-line-height:                     $input-btn-line-height !default;
 
 $input-padding-y-sm:                    $input-btn-padding-y-sm !default;
 $input-padding-x-sm:                    $input-btn-padding-x-sm !default;
+$input-font-size-sm:                    $input-btn-font-size-sm !default;
 $input-line-height-sm:                  $input-btn-line-height-sm !default;
 
 $input-padding-y-lg:                    $input-btn-padding-y-lg !default;
 $input-padding-x-lg:                    $input-btn-padding-x-lg !default;
+$input-font-size-lg:                    $input-btn-font-size-lg !default;
 $input-line-height-lg:                  $input-btn-line-height-lg !default;
 
 $input-bg:                              $white !default;
@@ -413,17 +495,17 @@ $input-focus-width:                     $input-btn-focus-width !default;
 $input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
 
 $input-placeholder-color:               $gray-600 !default;
+$input-plaintext-color:                 $body-color !default;
 
 $input-height-border:                   $input-border-width * 2 !default;
 
-$input-height-inner:                    ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;
-$input-height:                          calc(#{$input-height-inner} + #{$input-height-border}) !default;
+$input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2) !default;
+$input-height-inner-half:               add($input-line-height * .5em, $input-padding-y) !default;
+$input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y / 2) !default;
 
-$input-height-inner-sm:                 ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default;
-$input-height-sm:                       calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;
-
-$input-height-inner-lg:                 ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default;
-$input-height-lg:                       calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
+$input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
+$input-height-sm:                       add($input-line-height-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
+$input-height-lg:                       add($input-line-height-lg * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
 
 $input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 
@@ -436,80 +518,134 @@ $form-check-input-margin-x:             .25rem !default;
 $form-check-inline-margin-x:            .75rem !default;
 $form-check-inline-input-margin-x:      .3125rem !default;
 
+$form-grid-gutter-width:                10px !default;
 $form-group-margin-bottom:              1rem !default;
 
 $input-group-addon-color:               $input-color !default;
 $input-group-addon-bg:                  $gray-200 !default;
 $input-group-addon-border-color:        $input-border-color !default;
 
+$custom-forms-transition:               background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
 $custom-control-gutter:                 .5rem !default;
 $custom-control-spacer-x:               1rem !default;
+$custom-control-cursor:                 null !default;
 
-$custom-control-indicator-size:         1.1rem !default;
-$custom-control-indicator-bg:           $gray-300 !default;
-$custom-control-indicator-bg-size:      60% 60% !default;
-$custom-control-indicator-box-shadow:   inset 0 .25rem .25rem rgba($black, .1) !default;
+$custom-control-indicator-size:         1.09rem !default;
+$custom-control-indicator-bg:           $input-bg !default;
 
-$custom-control-indicator-disabled-bg:          $gray-200 !default;
-$custom-control-label-disabled-color:     $gray-600 !default;
+$custom-control-indicator-bg-size:      50% 50% !default;
+$custom-control-indicator-box-shadow:   $input-box-shadow !default;
+$custom-control-indicator-border-color: $gray-500 !default;
+$custom-control-indicator-border-width: $input-border-width !default;
+
+$custom-control-label-color:            null !default;
+
+$custom-control-indicator-disabled-bg:          $input-disabled-bg !default;
+$custom-control-label-disabled-color:           $gray-600 !default;
 
 $custom-control-indicator-checked-color:        $component-active-color !default;
 $custom-control-indicator-checked-bg:           $component-active-bg !default;
 $custom-control-indicator-checked-disabled-bg:  rgba(theme-color("primary"), .5) !default;
 $custom-control-indicator-checked-box-shadow:   none !default;
+$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default;
 
-$custom-control-indicator-focus-box-shadow:     0 0 0 0px $body-bg !default;
+$custom-control-indicator-focus-box-shadow:     $input-focus-box-shadow !default;
+$custom-control-indicator-focus-border-color:   $input-focus-border-color !default;
 
 $custom-control-indicator-active-color:         $component-active-color !default;
 $custom-control-indicator-active-bg:            lighten($component-active-bg, 35%) !default;
 $custom-control-indicator-active-box-shadow:    none !default;
+$custom-control-indicator-active-border-color:  $custom-control-indicator-active-bg !default;
 
-$custom-checkbox-indicator-border-radius:       $border-radius - 0.05 !default;
-$custom-checkbox-indicator-icon-checked:        str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default;
+$custom-checkbox-indicator-border-radius:       $border-radius !default;
+$custom-checkbox-indicator-icon-checked:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>") !default;
 
-$custom-checkbox-indicator-indeterminate-bg:    $component-active-bg !default;
-$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
-$custom-checkbox-indicator-icon-indeterminate:  str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default;
-$custom-checkbox-indicator-indeterminate-box-shadow: none !default;
+$custom-checkbox-indicator-indeterminate-bg:           $component-active-bg !default;
+$custom-checkbox-indicator-indeterminate-color:        $custom-control-indicator-checked-color !default;
+$custom-checkbox-indicator-icon-indeterminate:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'><path stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/></svg>") !default;
+$custom-checkbox-indicator-indeterminate-box-shadow:   none !default;
+$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;
 
 $custom-radio-indicator-border-radius:          50% !default;
-$custom-radio-indicator-icon-checked:           str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default;
+$custom-radio-indicator-icon-checked:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-control-indicator-checked-color}'/></svg>") !default;
+
+$custom-switch-width:                           $custom-control-indicator-size * 1.75 !default;
+$custom-switch-indicator-border-radius:         $custom-control-indicator-size / 2 !default;
+$custom-switch-indicator-size:                  subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default;
 
-$custom-select-padding-y:           .375rem !default;
-$custom-select-padding-x:          .75rem !default;
+$custom-select-padding-y:           $input-padding-y !default;
+$custom-select-padding-x:           $input-padding-x !default;
+$custom-select-font-family:         $input-font-family !default;
+$custom-select-font-size:           $input-font-size !default;
 $custom-select-height:              $input-height !default;
 $custom-select-indicator-padding:   1rem !default; // Extra padding to account for the presence of the background-image based indicator
-$custom-select-line-height:         $input-btn-line-height !default;
+$custom-select-font-weight:         $input-font-weight !default;
+$custom-select-line-height:         $input-line-height !default;
 $custom-select-color:               $input-color !default;
 $custom-select-disabled-color:      $gray-600 !default;
-$custom-select-bg:                  $white !default;
+$custom-select-bg:                  $input-bg !default;
 $custom-select-disabled-bg:         $gray-200 !default;
 $custom-select-bg-size:             8px 10px !default; // In pixels because image dimensions
 $custom-select-indicator-color:     $gray-800 !default;
-$custom-select-indicator:           str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default;
-$custom-select-border-width:        $input-btn-border-width !default;
+$custom-select-indicator:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !default;
+$custom-select-background:          escape-svg($custom-select-indicator) no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
+
+$custom-select-feedback-icon-padding-right: add(1em * .75, (2 * $custom-select-padding-y * .75) + $custom-select-padding-x + $custom-select-indicator-padding) !default;
+$custom-select-feedback-icon-position:      center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;
+$custom-select-feedback-icon-size:          $input-height-inner-half $input-height-inner-half !default;
+
+$custom-select-border-width:        $input-border-width !default;
 $custom-select-border-color:        $input-border-color !default;
 $custom-select-border-radius:       $border-radius !default;
+$custom-select-box-shadow:          inset 0 1px 2px rgba($black, .075) !default;
 
 $custom-select-focus-border-color:  $input-focus-border-color !default;
-$custom-select-focus-box-shadow:    inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
+$custom-select-focus-width:         $input-focus-width !default;
+$custom-select-focus-box-shadow:    0 0 0 $custom-select-focus-width $input-btn-focus-color !default;
 
-$custom-select-font-size-sm:        75% !default;
+$custom-select-padding-y-sm:        $input-padding-y-sm !default;
+$custom-select-padding-x-sm:        $input-padding-x-sm !default;
+$custom-select-font-size-sm:        $input-font-size-sm !default;
 $custom-select-height-sm:           $input-height-sm !default;
 
-$custom-select-font-size-lg:        125% !default;
+$custom-select-padding-y-lg:        $input-padding-y-lg !default;
+$custom-select-padding-x-lg:        $input-padding-x-lg !default;
+$custom-select-font-size-lg:        $input-font-size-lg !default;
 $custom-select-height-lg:           $input-height-lg !default;
 
+$custom-range-track-width:          100% !default;
+$custom-range-track-height:         .5rem !default;
+$custom-range-track-cursor:         pointer !default;
+$custom-range-track-bg:             $gray-300 !default;
+$custom-range-track-border-radius:  1rem !default;
+$custom-range-track-box-shadow:     inset 0 .25rem .25rem rgba($black, .1) !default;
+
+$custom-range-thumb-width:                   1rem !default;
+$custom-range-thumb-height:                  $custom-range-thumb-width !default;
+$custom-range-thumb-bg:                      $component-active-bg !default;
+$custom-range-thumb-border:                  0 !default;
+$custom-range-thumb-border-radius:           1rem !default;
+$custom-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
+$custom-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;
+$custom-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in IE/Edge
+$custom-range-thumb-active-bg:               lighten($component-active-bg, 35%) !default;
+$custom-range-thumb-disabled-bg:             $gray-500 !default;
+
 $custom-file-height:                $input-height !default;
+$custom-file-height-inner:          $input-height-inner !default;
 $custom-file-focus-border-color:    $input-focus-border-color !default;
-$custom-file-focus-box-shadow:      $input-btn-focus-box-shadow !default;
-
-$custom-file-padding-y:             $input-btn-padding-y !default;
-$custom-file-padding-x:             $input-btn-padding-x !default;
-$custom-file-line-height:           $input-btn-line-height !default;
+$custom-file-focus-box-shadow:      $input-focus-box-shadow !default;
+$custom-file-disabled-bg:           $input-disabled-bg !default;
+
+$custom-file-padding-y:             $input-padding-y !default;
+$custom-file-padding-x:             $input-padding-x !default;
+$custom-file-line-height:           $input-line-height !default;
+$custom-file-font-family:           $input-font-family !default;
+$custom-file-font-weight:           $input-font-weight !default;
 $custom-file-color:                 $input-color !default;
 $custom-file-bg:                    $input-bg !default;
-$custom-file-border-width:          $input-btn-border-width !default;
+$custom-file-border-width:          $input-border-width !default;
 $custom-file-border-color:          $input-border-color !default;
 $custom-file-border-radius:         $input-border-radius !default;
 $custom-file-box-shadow:            $input-box-shadow !default;
@@ -521,40 +657,32 @@ $custom-file-text: (
 
 
 // Form validation
+
 $form-feedback-margin-top:          $form-text-margin-top !default;
 $form-feedback-font-size:           $small-font-size !default;
 $form-feedback-valid-color:         theme-color("success") !default;
 $form-feedback-invalid-color:       theme-color("danger") !default;
 
-
-// Dropdowns
-//
-// Dropdown menu container and contents.
-
-$dropdown-min-width:                12rem !default;
-$dropdown-padding-y:                .5rem !default;
-$dropdown-spacer:                   .125rem !default;
-$dropdown-bg:                       $white !default;
-$dropdown-border-color:             rgba($black, .15) !default;
-$dropdown-border-radius:            $border-radius !default;
-$dropdown-border-width:             0 !default;
-$dropdown-divider-bg:               $gray-200 !default;
-$dropdown-box-shadow:               0 .5rem 1rem rgba($black, .175) !default;
-
-$dropdown-link-color:               $gray-900 !default;
-$dropdown-link-hover-color:         darken($gray-900, 5%) !default;
-$dropdown-link-hover-bg:            rgba(17, 81, 138, 0.1) !default;
-
-$dropdown-link-active-color:        $component-active-color !default;
-$dropdown-link-active-bg:           $component-active-bg !default;
-
-$dropdown-link-disabled-color:      $gray-600 !default;
-
-$dropdown-item-padding-y:           .50rem !default;
-$dropdown-item-padding-x:           1.2rem !default;
-
-$dropdown-header-color:             $gray-600 !default;
-
+$form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
+$form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
+$form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
+$form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
+
+$form-validation-states: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$form-validation-states: map-merge(
+                (
+                        "valid": (
+                                "color": $form-feedback-valid-color,
+                                "icon": $form-feedback-icon-valid
+                        ),
+                        "invalid": (
+                                "color": $form-feedback-invalid-color,
+                                "icon": $form-feedback-icon-invalid
+                        ),
+                ),
+                $form-validation-states
+);
 
 // Z-index master list
 //
@@ -569,6 +697,7 @@ $zindex-modal:                      1050 !default;
 $zindex-popover:                    1060 !default;
 $zindex-tooltip:                    1070 !default;
 
+
 // Navs
 
 $nav-link-padding-y:                .5rem !default;
@@ -587,16 +716,20 @@ $nav-pills-border-radius:           $border-radius !default;
 $nav-pills-link-active-color:       $component-active-color !default;
 $nav-pills-link-active-bg:          $component-active-bg !default;
 
+$nav-divider-color:                 $gray-200 !default;
+$nav-divider-margin-y:              $spacer / 2 !default;
+
+
 // Navbar
 
-$navbar-padding-y:                  ($spacer / 2) !default;
+$navbar-padding-y:                  $spacer / 2 !default;
 $navbar-padding-x:                  $spacer !default;
 
 $navbar-nav-link-padding-x:         .5rem !default;
 
 $navbar-brand-font-size:            $font-size-lg !default;
 // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
-$nav-link-height:                   ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
+$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
 $navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
 $navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) / 2 !default;
 
@@ -609,16 +742,55 @@ $navbar-dark-color:                 rgba($white, .5) !default;
 $navbar-dark-hover-color:           rgba($white, .75) !default;
 $navbar-dark-active-color:          $white !default;
 $navbar-dark-disabled-color:        rgba($white, .25) !default;
-$navbar-dark-toggler-icon-bg:       str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
+$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
 $navbar-dark-toggler-border-color:  rgba($white, .1) !default;
 
 $navbar-light-color:                rgba($black, .5) !default;
 $navbar-light-hover-color:          rgba($black, .7) !default;
 $navbar-light-active-color:         rgba($black, .9) !default;
 $navbar-light-disabled-color:       rgba($black, .3) !default;
-$navbar-light-toggler-icon-bg:      str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
+$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
 $navbar-light-toggler-border-color: rgba($black, .1) !default;
 
+$navbar-light-brand-color:                $navbar-light-active-color !default;
+$navbar-light-brand-hover-color:          $navbar-light-active-color !default;
+$navbar-dark-brand-color:                 $navbar-dark-active-color !default;
+$navbar-dark-brand-hover-color:           $navbar-dark-active-color !default;
+
+
+// Dropdowns
+//
+// Dropdown menu container and contents.
+
+$dropdown-min-width:                12rem !default;
+$dropdown-padding-y:                .5rem !default;
+$dropdown-spacer:                   .125rem !default;
+$dropdown-font-size:                $font-size-base !default;
+$dropdown-color:                    $body-color !default;
+$dropdown-bg:                       $white !default;
+$dropdown-border-color:             rgba($black, .15) !default;
+$dropdown-border-radius:            $border-radius !default;
+$dropdown-border-width:             0 !default;
+$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width) !default;
+$dropdown-divider-bg:               $gray-200 !default;
+$dropdown-divider-margin-y:         $nav-divider-margin-y !default;
+$dropdown-box-shadow:               0 .5rem 1rem rgba($black, .175) !default;
+
+$dropdown-link-color:               $gray-900 !default;
+$dropdown-link-hover-color:         darken($gray-900, 5%) !default;
+$dropdown-link-hover-bg:            $gray-200 !default;
+
+$dropdown-link-active-color:        $component-active-color !default;
+$dropdown-link-active-bg:           $component-active-bg !default;
+
+$dropdown-link-disabled-color:      $gray-600 !default;
+
+$dropdown-item-padding-y:           .5rem !default;
+$dropdown-item-padding-x:           1.5rem !default;
+
+$dropdown-header-color:             $gray-600 !default;
+
+
 // Pagination
 
 $pagination-padding-y:              .5rem !default;
@@ -635,6 +807,7 @@ $pagination-border-width:           $border-width !default;
 $pagination-border-color:           $gray-300 !default;
 
 $pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;
+$pagination-focus-outline:          0 !default;
 
 $pagination-hover-color:            $link-hover-color !default;
 $pagination-hover-bg:               $gray-200 !default;
@@ -652,6 +825,7 @@ $pagination-disabled-border-color:  $gray-300 !default;
 // Jumbotron
 
 $jumbotron-padding:                 2rem !default;
+$jumbotron-color:                   null !default;
 $jumbotron-bg:                      $gray-200 !default;
 
 
@@ -662,13 +836,16 @@ $card-spacer-x:                     1.25rem !default;
 $card-border-width:                 $border-width !default;
 $card-border-radius:                $border-radius !default;
 $card-border-color:                 rgba($black, .125) !default;
-$card-inner-border-radius:          calc(#{$card-border-radius} - #{$card-border-width}) !default;
+$card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
 $card-cap-bg:                       rgba($black, .03) !default;
+$card-cap-color:                    null !default;
+$card-height:                       null !default;
+$card-color:                        null !default;
 $card-bg:                           $white !default;
 
 $card-img-overlay-padding:          1.25rem !default;
 
-$card-group-margin:                 ($grid-gutter-width / 2) !default;
+$card-group-margin:                 $grid-gutter-width / 2 !default;
 $card-deck-margin:                  $card-group-margin !default;
 
 $card-columns-count:                3 !default;
@@ -678,19 +855,27 @@ $card-columns-margin:               $card-spacer-y !default;
 
 // Tooltips
 
-$tooltip-font-size:           $font-size-sm !default;
-$tooltip-max-width:           200px !default;
-$tooltip-color:               $white !default;
-$tooltip-bg:                  $black !default;
-$tooltip-border-radius:        $border-radius !default;
-$tooltip-opacity:             .9 !default;
-$tooltip-padding-y:           .25rem !default;
-$tooltip-padding-x:           .5rem !default;
-$tooltip-margin:              0 !default;
-
-$tooltip-arrow-width:         .8rem !default;
-$tooltip-arrow-height:        .4rem !default;
-$tooltip-arrow-color:         $tooltip-bg !default;
+$tooltip-font-size:                 $font-size-sm !default;
+$tooltip-max-width:                 200px !default;
+$tooltip-color:                     $white !default;
+$tooltip-bg:                        $black !default;
+$tooltip-border-radius:             $border-radius !default;
+$tooltip-opacity:                   .9 !default;
+$tooltip-padding-y:                 .25rem !default;
+$tooltip-padding-x:                 .5rem !default;
+$tooltip-margin:                    0 !default;
+
+$tooltip-arrow-width:               .8rem !default;
+$tooltip-arrow-height:              .4rem !default;
+$tooltip-arrow-color:               $tooltip-bg !default;
+
+// Form tooltips must come after regular tooltips
+$form-feedback-tooltip-padding-y:     $tooltip-padding-y !default;
+$form-feedback-tooltip-padding-x:     $tooltip-padding-x !default;
+$form-feedback-tooltip-font-size:     $tooltip-font-size !default;
+$form-feedback-tooltip-line-height:   $line-height-base !default;
+$form-feedback-tooltip-opacity:       $tooltip-opacity !default;
+$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
 
 
 // Popovers
@@ -698,13 +883,14 @@ $tooltip-arrow-color:         $tooltip-bg !default;
 $popover-font-size:                 $font-size-sm !default;
 $popover-bg:                        $white !default;
 $popover-max-width:                 276px !default;
-$popover-border-width:              $border-width !default;
-$popover-border-color:              rgba($black, 0) !default;
+$popover-border-width:              0 !default;
+$popover-border-color:              rgba($black, .2) !default;
 $popover-border-radius:             $border-radius-lg !default;
+$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;
 $popover-box-shadow:                0 .25rem .5rem rgba($black, .2) !default;
 
-$popover-header-bg:                 $primary !default;
-$popover-header-color:              #FFF !default;
+$popover-header-bg:                 darken($primary, 3%) !default;
+$popover-header-color:              $white !default;
 $popover-header-padding-y:          .6rem !default;
 $popover-header-padding-x:          .75rem !default;
 
@@ -719,6 +905,24 @@ $popover-arrow-color:               $popover-bg !default;
 $popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
 
 
+// Toasts
+
+$toast-max-width:                   350px !default;
+$toast-padding-x:                   .75rem !default;
+$toast-padding-y:                   .25rem !default;
+$toast-font-size:                   .875rem !default;
+$toast-color:                       null !default;
+$toast-background-color:            rgba($white, .85) !default;
+$toast-border-width:                1px !default;
+$toast-border-color:                rgba(0, 0, 0, .1) !default;
+$toast-border-radius:               .25rem !default;
+$toast-box-shadow:                  0 .25rem .75rem rgba($black, .1) !default;
+
+$toast-header-color:                $gray-600 !default;
+$toast-header-background-color:     rgba($white, .85) !default;
+$toast-header-border-color:         rgba(0, 0, 0, .05) !default;
+
+
 // Badges
 
 $badge-font-size:                   75% !default;
@@ -727,6 +931,9 @@ $badge-padding-y:                   .25em !default;
 $badge-padding-x:                   .4em !default;
 $badge-border-radius:               $border-radius !default;
 
+$badge-transition:                  $btn-transition !default;
+$badge-focus-width:                 $input-btn-focus-width !default;
+
 $badge-pill-padding-x:              .6em !default;
 // Use a higher than normal value to ensure completely rounded edges when
 // customizing padding or font-size on labels.
@@ -736,32 +943,44 @@ $badge-pill-border-radius:          10rem !default;
 // Modals
 
 // Padding applied to the modal body
-$modal-inner-padding:         1rem !default;
+$modal-inner-padding:               1rem !default;
 
-$modal-dialog-margin:         .5rem !default;
-$modal-dialog-margin-y-sm-up: 1.75rem !default;
+// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
+$modal-footer-margin-between:       .5rem !default;
 
-$modal-title-line-height:           $line-height-base !default;
-
-$modal-content-bg:               $white !default;
-$modal-content-border-color:     rgba($black, .2) !default;
-$modal-content-border-width:     $border-width !default;
-$modal-content-box-shadow-xs:    0 .25rem .5rem rgba($black, .5) !default;
-$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;
+$modal-dialog-margin:               .5rem !default;
+$modal-dialog-margin-y-sm-up:       1.75rem !default;
 
-$modal-backdrop-bg:           $black !default;
-$modal-backdrop-opacity:      .5 !default;
-$modal-header-border-color:   $gray-200 !default;
-$modal-footer-border-color:   $modal-header-border-color !default;
-$modal-header-border-width:   $modal-content-border-width !default;
-$modal-footer-border-width:   $modal-header-border-width !default;
-$modal-header-padding:        1rem !default;
+$modal-title-line-height:           $line-height-base !default;
 
+$modal-content-color:               null !default;
+$modal-content-bg:                  $white !default;
+$modal-content-border-color:        rgba($black, .2) !default;
+$modal-content-border-width:        $border-width !default;
+$modal-content-border-radius:       $border-radius-lg !default;
+$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
+$modal-content-box-shadow-xs:       0 .25rem .5rem rgba($black, .5) !default;
+$modal-content-box-shadow-sm-up:    0 .5rem 1rem rgba($black, .5) !default;
+
+$modal-backdrop-bg:                 $black !default;
+$modal-backdrop-opacity:            .5 !default;
+$modal-header-border-color:         $border-color !default;
+$modal-footer-border-color:         $modal-header-border-color !default;
+$modal-header-border-width:         $modal-content-border-width !default;
+$modal-footer-border-width:         $modal-header-border-width !default;
+$modal-header-padding-y:            1rem !default;
+$modal-header-padding-x:            1rem !default;
+$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
+
+$modal-xl:                          1140px !default;
 $modal-lg:                          800px !default;
 $modal-md:                          500px !default;
 $modal-sm:                          300px !default;
 
+$modal-fade-transform:              translate(0, -50px) !default;
+$modal-show-transform:              none !default;
 $modal-transition:                  transform .3s ease-out !default;
+$modal-scale-transform:             scale(1.02) !default;
 
 
 // Alerts
@@ -783,7 +1002,7 @@ $alert-color-level:                 6 !default;
 // Progress bars
 
 $progress-height:                   1rem !default;
-$progress-font-size:                ($font-size-base * .75) !default;
+$progress-font-size:                $font-size-base * .75 !default;
 $progress-bg:                       $gray-200 !default;
 $progress-border-radius:            $border-radius !default;
 $progress-box-shadow:               inset 0 .1rem .1rem rgba($black, .1) !default;
@@ -792,8 +1011,10 @@ $progress-bar-bg:                   theme-color("primary") !default;
 $progress-bar-animation-timing:     1s linear infinite !default;
 $progress-bar-transition:           width .6s ease !default;
 
+
 // List group
 
+$list-group-color:                  null !default;
 $list-group-bg:                     $white !default;
 $list-group-border-color:           rgba($black, .125) !default;
 $list-group-border-width:           $border-width !default;
@@ -835,6 +1056,8 @@ $figure-caption-color:              $gray-600 !default;
 
 // Breadcrumbs
 
+$breadcrumb-font-size:              null !default;
+
 $breadcrumb-padding-y:              .75rem !default;
 $breadcrumb-padding-x:              1rem !default;
 $breadcrumb-item-padding:           .5rem !default;
@@ -844,29 +1067,47 @@ $breadcrumb-margin-bottom:          1rem !default;
 $breadcrumb-bg:                     $gray-200 !default;
 $breadcrumb-divider-color:          $gray-600 !default;
 $breadcrumb-active-color:           $gray-600 !default;
-$breadcrumb-divider:                "/" !default;
+$breadcrumb-divider:                quote("/") !default;
+
+$breadcrumb-border-radius:          $border-radius !default;
 
 
 // Carousel
 
-$carousel-control-color:            $white !default;
-$carousel-control-width:            15% !default;
-$carousel-control-opacity:          .5 !default;
+$carousel-control-color:             $white !default;
+$carousel-control-width:             15% !default;
+$carousel-control-opacity:           .5 !default;
+$carousel-control-hover-opacity:     .9 !default;
+$carousel-control-transition:        opacity .15s ease !default;
+
+$carousel-indicator-width:           30px !default;
+$carousel-indicator-height:          3px !default;
+$carousel-indicator-hit-area-height: 10px !default;
+$carousel-indicator-spacer:          3px !default;
+$carousel-indicator-active-bg:       $white !default;
+$carousel-indicator-transition:      opacity .6s ease !default;
+
+$carousel-caption-width:             70% !default;
+$carousel-caption-color:             $white !default;
+
+$carousel-control-icon-width:        20px !default;
 
-$carousel-indicator-width:          30px !default;
-$carousel-indicator-height:         3px !default;
-$carousel-indicator-spacer:         3px !default;
-$carousel-indicator-active-bg:      $white !default;
+$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>") !default;
+$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>") !default;
 
-$carousel-caption-width:            70% !default;
-$carousel-caption-color:            $white !default;
+$carousel-transition-duration:       .6s !default;
+$carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
 
-$carousel-control-icon-width:       20px !default;
 
-$carousel-control-prev-icon-bg:     str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default;
-$carousel-control-next-icon-bg:     str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default;
+// Spinners
 
-$carousel-transition:               transform .6s ease !default;
+$spinner-width:         2rem !default;
+$spinner-height:        $spinner-width !default;
+$spinner-border-width:  .25em !default;
+
+$spinner-width-sm:        1rem !default;
+$spinner-height-sm:       $spinner-width-sm !default;
+$spinner-border-width-sm: .2em !default;
 
 
 // Close
@@ -876,6 +1117,7 @@ $close-font-weight:                 $font-weight-bold !default;
 $close-color:                       $black !default;
 $close-text-shadow:                 0 1px 0 $white !default;
 
+
 // Code
 
 $code-font-size:                    87.5% !default;
@@ -891,7 +1133,15 @@ $pre-color:                         $gray-900 !default;
 $pre-scrollable-max-height:         340px !default;
 
 
+// Utilities
+
+$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;
+$overflows: auto, hidden !default;
+$positions: static, relative, absolute, fixed, sticky !default;
+
+
 // Printing
+
 $print-page-size:                   a3 !default;
 $print-body-min-width:              map-get($grid-breakpoints, "lg") !default;
 
@@ -899,7 +1149,7 @@ $print-body-min-width:              map-get($grid-breakpoints, "lg") !default;
   Custom Styles
  =====================================*/
 $background: rgb(226, 237, 247);
-$content-wrapper-background: #F0F3F4;
+$content-wrapper-background: #FFF;
 
 // Spinner
 $spinner-color: #FFF;
diff --git a/assets/admin/scss/vendor.scss b/assets/admin/scss/vendor.scss
index cee6a48..402be67 100644
--- a/assets/admin/scss/vendor.scss
+++ b/assets/admin/scss/vendor.scss
@@ -73,8 +73,8 @@ label {
     margin-bottom: 0;
   }
   .custom-control {
-    margin-top: .3rem;
-    margin-bottom: .3rem;
+    margin-top: .4rem;
+    margin-bottom: .4rem;
   }
 }
 
diff --git a/config/defaults.yaml b/config/defaults.yaml
index 3dd2c2d..a7c2bb9 100644
--- a/config/defaults.yaml
+++ b/config/defaults.yaml
@@ -16,7 +16,7 @@ parameters:
     head_title: 'pdAdmin'
     head_title_pattern: '&T - &P'
     head_description: ''
-    head_author: 'pdAdmin '
+    head_author: 'pdAdmin'
     head_keywords: 'pdAdmin, opensource'
     footer_copyright: 'pdAdmin Developed for Symfony 5'
     default_locale: 'en'
diff --git a/config/packages/security.yaml b/config/packages/security.yaml
index f28cde2..074fcf3 100644
--- a/config/packages/security.yaml
+++ b/config/packages/security.yaml
@@ -14,7 +14,7 @@ security:
             pattern: ^/(_(profiler|wdt)|css|images|js)/
             security: false
         main:
-            pattern:    ^/
+            pattern: ^/(admin|login|logout|register|resetting)
             provider: pdadmin_auth
             user_checker: Pd\UserBundle\Security\UserChecker
             access_denied_handler: App\Security\AccessDeniedHandler
@@ -35,8 +35,5 @@ security:
                 lifetime: 604800 # 1 Week - 1 Month -> 2592000
                 path:     /
     access_control:
-        # Force HTTPS
-        #- { path: '^/', requires_channel: https }
-
         # Admin Panel
-        - { path: '^/admin', role: [ROLE_ADMIN] }
+        - { path: '^/admin', role: 'ROLE_ADMIN' }
diff --git a/config/routes.yaml b/config/routes.yaml
index 231d8f4..ecf3e4a 100644
--- a/config/routes.yaml
+++ b/config/routes.yaml
@@ -3,7 +3,6 @@
 ##
 authorization:
     resource: "@PdUserBundle/Resources/config/routing.yaml"
-    prefix: 'auth'
 
 ##
 # Admin
@@ -11,6 +10,7 @@ authorization:
 admin:
     resource: ../src/Controller/
     type: annotation
+    prefix: 'admin'
 admin_widget:
     resource: "@PdWidgetBundle/Resources/config/routing.yml"
     prefix: 'admin'
diff --git a/package.json b/package.json
index 750fc29..47ffdc1 100644
--- a/package.json
+++ b/package.json
@@ -6,8 +6,8 @@
     "chart.js": "2.*",
     "hammerjs": "2.*",
     "html5sortable": "^0.9.3",
-    "jquery": "3.*",
-    "popper.js": "1.*",
+    "jquery": "3.4.*",
+    "popper.js": "1.16.*",
     "selectize": "^0.12.6",
     "sortablejs": "1.*"
   },
diff --git a/src/Controller/AccountController.php b/src/Controller/AccountController.php
index 89c222e..15e8326 100755
--- a/src/Controller/AccountController.php
+++ b/src/Controller/AccountController.php
@@ -221,8 +221,6 @@ public function changePassword(Request $request, User $user, EntityManagerInterf
      */
     public function roles(Request $request, User $user, EntityManagerInterface $em, SecurityService $security): Response
     {
-        dump(array_intersect($security->getACL(), $user->getRolesUser()));
-
         // Set Form & Request
         $form = $this->createForm(RolesType::class, null, [
             'roles' => $security->getRoles(),
diff --git a/src/Listener/LocaleListener.php b/src/Listener/LocaleListener.php
new file mode 100644
index 0000000..539871d
--- /dev/null
+++ b/src/Listener/LocaleListener.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Listener;
+
+use App\Service\ConfigBag;
+use Symfony\Component\EventDispatcher\EventSubscriberInterface;
+use Symfony\Component\HttpKernel\Event\KernelEvent;
+use Symfony\Component\HttpKernel\KernelEvents;
+
+/**
+ * Change System Default Language
+ *
+ * @author Ramazan APAYDIN <apaydin541@gmail.com>
+ */
+class LocaleListener implements EventSubscriberInterface
+{
+    /**
+     * @var ConfigBag
+     */
+    private $bag;
+
+    public function __construct(ConfigBag $bag)
+    {
+        $this->bag = $bag;
+    }
+
+    public function setDefaultLocale(KernelEvent $event): void
+    {
+        $event->getRequest()->setDefaultLocale($this->bag->get('default_locale'));
+    }
+
+    public static function getSubscribedEvents()
+    {
+        return [KernelEvents::REQUEST => [['setDefaultLocale', 99]]];
+    }
+}
diff --git a/templates/Admin/Account/edit.html.twig b/templates/Admin/Account/edit.html.twig
index 90ec819..7ae5f84 100755
--- a/templates/Admin/Account/edit.html.twig
+++ b/templates/Admin/Account/edit.html.twig
@@ -6,7 +6,6 @@
 
 {# Content Title #}
 {% block content_head %}
-    <a href="{{ app.session.get('backUrl') }}" class="back-icon"><i class="material-icons">arrow_back</i></a>
     <span class="text">{{ page_title|trans }}</span>
     <span class="desc">{{ page_description|trans }}</span>
 {% endblock %}
diff --git a/templates/Admin/Account/rolesTemplate.html.twig b/templates/Admin/Account/rolesTemplate.html.twig
index d853ba0..8141b6a 100644
--- a/templates/Admin/Account/rolesTemplate.html.twig
+++ b/templates/Admin/Account/rolesTemplate.html.twig
@@ -52,26 +52,26 @@
         </div>
     {% endfor %}
 </div>
-{{ form_row(form.submit) }}
+{{ form_widget(form.submit) }}
 {{ form_end(form) }}
 
 <script>
-  $(function () {
-    $('[name="roles[acl]"]').change(function () {
-      var val = $(this).val();
-      var selector = '.accordion-menu input[type*=checkbox], .accordion-menu input[name*="aclprocess"]';
+    $(function () {
+        $('[name="roles[acl]"]').change(function () {
+            var val = $(this).val();
+            var selector = '.accordion-menu input[type*=checkbox], .accordion-menu input[name*="aclprocess"]';
 
-      // Disable Admin Access to ROLE_USER
-      if (val === 'ROLE_SUPER_ADMIN') {
-        $.each($(selector), function (index, el) {
-          $(el).attr('disabled', true)
-        })
-      } else {
-        $.each($(selector), function (index, el) {
-          $(el).attr('disabled', false)
-        })
-      }
-    });
-    $('[name="roles[acl]"]:checked').trigger('change');
-  })
+            // Disable Admin Access to ROLE_USER
+            if (val === 'ROLE_SUPER_ADMIN') {
+                $.each($(selector), function (index, el) {
+                    $(el).attr('disabled', true)
+                })
+            } else {
+                $.each($(selector), function (index, el) {
+                    $(el).attr('disabled', false)
+                })
+            }
+        });
+        $('[name="roles[acl]"]:checked').trigger('change');
+    })
 </script>
diff --git a/templates/Admin/_other/bootstrap-4.html.twig b/templates/Admin/_other/bootstrap-4.html.twig
index 442ee21..173c768 100644
--- a/templates/Admin/_other/bootstrap-4.html.twig
+++ b/templates/Admin/_other/bootstrap-4.html.twig
@@ -26,11 +26,11 @@
         </div>
     {% elseif type is defined and type == 'range' %}
         {%- set attr = attr|merge({'data-range': '', 'class': 'custom-range' }) -%}
-        <div class="row">
-            <div class="col-10">
+        <div class="d-flex">
+            <div class="btn-block line-height-clear">
                 {{- parent() -}}
             </div>
-            <div class="col text-center range-count">
+            <div class="ml-2 px-2 range-count bg-primary rounded text-white font-weight-bold">
                 {{ value }}
             </div>
         </div>
@@ -45,7 +45,7 @@
 {%- endblock textarea_widget %}
 
 {% block button_widget -%}
-    {% set attr = attr|merge({class: (attr.class|default('btn-default') ~ ' btn')|trim}) %}
+    {% set attr = attr|merge({class: (attr.class|default('btn-primary') ~ ' btn')|trim}) %}
     {{- parent() -}}
 {%- endblock %}
 
diff --git a/templates/homepage.html.twig b/templates/homepage.html.twig
index c244cc4..a4fb6cc 100644
--- a/templates/homepage.html.twig
+++ b/templates/homepage.html.twig
@@ -2,20 +2,27 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport"
-          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>pdAdmin</title>
-
     <style>
         body {
             text-align: center;
-            font-family: "Helvetica Neue";
+            display: flex;
+            flex: 1;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            margin: 0;
+            padding: 0;
         }
     </style>
 </head>
 <body>
-<h3>pdAdmin - Powerful Admin Dashboard for Symfony 4</h3>
-<a href="{{ path('security_login') }}">Go Dashboard</a>
+    <div class="wrap">
+        <h3>pdAdmin - Powerful Admin Dashboard for Symfony 5</h3>
+        <a href="https://github.com/appaydin/pd-admin" target="_blank">Documentation</a>
+        <a href="{{ path('security_login') }}">Go Dashboard</a>
+    </div>
 </body>
 </html>
diff --git a/translations/messages.en.yml b/translations/messages.en.yml
index 26a6dc7..6f012d4 100644
--- a/translations/messages.en.yml
+++ b/translations/messages.en.yml
@@ -26,10 +26,10 @@ ROLE_ACCOUNT:
     title: Admin Account Management
     LIST: Listing
     EDIT: Editing
-    CHANGEPASSWORD: Change Password
+    PASSWORD: Change Password
     ROLES: Authorization
     ACTIVATE: Activation
-    ADDGROUP: Add/Remove Group
+    GROUP: Add/Remove Group
     DELETE: Delete
     FREEZE: Account Freeze
     ALLREAD: All Read
@@ -38,7 +38,7 @@ ROLE_GROUP:
     title: Admin Group Management
     LIST: Listing
     EDIT: Editing
-    NEW: New Group
+    CREATE: New Group
     DELETE: Delete
     ROLES: Authorization
 ROLE_SETTINGS:
@@ -49,7 +49,7 @@ ROLE_SETTINGS:
     CONTACT: Contact
 ROLE_MAIL:
     title: Admin Mail Manager
-    TEMPLATELIST: Template Listing
+    TEMPLATE: Template Listing
     TEMPLATEADD: New Template
     TEMPLATEEDIT: Edit Template
     TEMPLATEACTIVE: Enable Template
diff --git a/translations/messages.tr.yml b/translations/messages.tr.yml
index 9e93d7c..be2d148 100644
--- a/translations/messages.tr.yml
+++ b/translations/messages.tr.yml
@@ -26,10 +26,10 @@ ROLE_ACCOUNT:
     title: Admin Hesap Yönetimi
     LIST: Listeleme
     EDIT: Düzenleme
-    CHANGEPASSWORD: Şifre Değiştirme
+    PASSWORD: Şifre Değiştirme
     ROLES: Yetkilendirme
     ACTIVATE: Etkinleştirme
-    ADDGROUP: Grup Ekle/Çıkar
+    GROUP: Grup Ekle/Çıkar
     DELETE: Sil
     FREEZE: Hesap Dondurma
     ALLREAD: Tüm Hesapları Okuma
@@ -38,7 +38,7 @@ ROLE_GROUP:
     title: Admin Grup İzinleri
     LIST: Listeleme
     EDIT: Düzenleme
-    NEW: Yeni Grup
+    CREATE: Yeni Grup
     DELETE: Sil
     ROLES: Yetkilendirme
 ROLE_SETTINGS:
@@ -49,7 +49,7 @@ ROLE_SETTINGS:
     CONTACT: İletişim
 ROLE_MAIL:
     title: Admin Posta Yöneticisi
-    TEMPLATELIST: Şablon Listeleme
+    TEMPLATE: Şablon Listeleme
     TEMPLATEADD: Yeni Şablon
     TEMPLATEEDIT: Şablon Düzenle
     TEMPLATEACTIVE: Şablon Etkinleştir
diff --git a/yarn.lock b/yarn.lock
index a78eae4..20be7c9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2257,7 +2257,7 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
   dependencies:
     ms "2.0.0"
 
-debug@^3.0.0, debug@^3.1.1, debug@^3.2.5, debug@^3.2.6:
+debug@^3.0.0, debug@^3.1.1, debug@^3.2.5:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
   integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
@@ -2293,11 +2293,6 @@ deep-equal@^1.0.1:
     object-keys "^1.1.1"
     regexp.prototype.flags "^1.2.0"
 
-deep-extend@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
-  integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
-
 default-gateway@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
@@ -2381,11 +2376,6 @@ detect-file@^1.0.0:
   resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-1.0.0.tgz#f0d66d03672a825cb1b73bdb3fe62310c8e552b7"
   integrity sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=
 
-detect-libc@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
-  integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
-
 detect-node@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c"
@@ -3038,13 +3028,6 @@ fs-extra@^7.0.0:
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
-fs-minipass@^1.2.5:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.7.tgz#ccff8570841e7fe4265693da88936c55aed7f7c7"
-  integrity sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==
-  dependencies:
-    minipass "^2.6.0"
-
 fs-write-stream-atomic@^1.0.8:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9"
@@ -3486,7 +3469,7 @@ humanize@^0.0.9:
   resolved "https://registry.yarnpkg.com/humanize/-/humanize-0.0.9.tgz#1994ffaecdfe9c441ed2bdac7452b7bb4c9e41a4"
   integrity sha1-GZT/rs3+nEQe0r2sdFK3u0yeQaQ=
 
-iconv-lite@0.4.24, iconv-lite@^0.4.4:
+iconv-lite@0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -3515,13 +3498,6 @@ iferr@^0.1.5:
   resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
   integrity sha1-xg7taebY/bazEEofy8ocGS3FtQE=
 
-ignore-walk@^3.0.1:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.3.tgz#017e2447184bfeade7c238e4aefdd1e8f95b1e37"
-  integrity sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==
-  dependencies:
-    minimatch "^3.0.4"
-
 import-cwd@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
@@ -3602,7 +3578,7 @@ inherits@2.0.3:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
   integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
 
-ini@^1.3.4, ini@^1.3.5, ini@~1.3.0:
+ini@^1.3.4, ini@^1.3.5:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
   integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
@@ -3926,7 +3902,12 @@ isstream@~0.1.2:
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
   integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
 
-jquery@3.*, "jquery@>=2.0.0 <4.0.0":
+jquery@3.4.*:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2"
+  integrity sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==
+
+"jquery@>=2.0.0 <4.0.0":
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.5.0.tgz#9980b97d9e4194611c36530e7dc46a58d7340fc9"
   integrity sha512-Xb7SVYMvygPxbFMpTFQiHh1J7HClEaThguL15N/Gg37Lri/qKyhRGZYzHRyLH8Stq3Aow0LsHO2O2ci86fCrNQ==
@@ -4385,21 +4366,6 @@ minimist@~0.0.1:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
   integrity sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=
 
-minipass@^2.6.0, minipass@^2.8.6, minipass@^2.9.0:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.9.0.tgz#e713762e7d3e32fed803115cf93e04bca9fcc9a6"
-  integrity sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==
-  dependencies:
-    safe-buffer "^5.1.2"
-    yallist "^3.0.0"
-
-minizlib@^1.2.1:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.3.3.tgz#2290de96818a34c29551c8a8d301216bd65a861d"
-  integrity sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==
-  dependencies:
-    minipass "^2.9.0"
-
 mississippi@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-3.0.0.tgz#ea0a3291f97e0b5e8776b363d5f0a12d94c67022"
@@ -4505,15 +4471,6 @@ nanomatch@^1.2.9:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-needle@^2.2.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/needle/-/needle-2.4.1.tgz#14af48732463d7475696f937626b1b993247a56a"
-  integrity sha512-x/gi6ijr4B7fwl6WYL9FwlCvRQKGlUNvnceho8wxkwXqN8jvVmmmATTmZPRRG7b/yC1eode26C2HO9jl78Du9g==
-  dependencies:
-    debug "^3.2.6"
-    iconv-lite "^0.4.4"
-    sax "^1.2.4"
-
 negotiator@0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
@@ -4597,22 +4554,6 @@ node-notifier@^5.1.2:
     shellwords "^0.1.1"
     which "^1.3.0"
 
-node-pre-gyp@*:
-  version "0.14.0"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83"
-  integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA==
-  dependencies:
-    detect-libc "^1.0.2"
-    mkdirp "^0.5.1"
-    needle "^2.2.1"
-    nopt "^4.0.1"
-    npm-packlist "^1.1.6"
-    npmlog "^4.0.2"
-    rc "^1.2.7"
-    rimraf "^2.6.1"
-    semver "^5.3.0"
-    tar "^4.4.2"
-
 node-releases@^1.1.53:
   version "1.1.53"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.53.tgz#2d821bfa499ed7c5dffc5e2f28c88e78a08ee3f4"
@@ -4648,14 +4589,6 @@ node-sass@^4.*:
   dependencies:
     abbrev "1"
 
-nopt@^4.0.1:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.3.tgz#a375cad9d02fd921278d954c2254d5aa57e15e48"
-  integrity sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==
-  dependencies:
-    abbrev "1"
-    osenv "^0.1.4"
-
 normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -4688,27 +4621,6 @@ normalize-url@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
   integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
-npm-bundled@^1.0.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.1.tgz#1edd570865a94cdb1bc8220775e29466c9fb234b"
-  integrity sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA==
-  dependencies:
-    npm-normalize-package-bin "^1.0.1"
-
-npm-normalize-package-bin@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz#6e79a41f23fd235c0623218228da7d9c23b8f6e2"
-  integrity sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==
-
-npm-packlist@^1.1.6:
-  version "1.4.8"
-  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.8.tgz#56ee6cc135b9f98ad3d51c1c95da22bbb9b2ef3e"
-  integrity sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==
-  dependencies:
-    ignore-walk "^3.0.1"
-    npm-bundled "^1.0.1"
-    npm-normalize-package-bin "^1.0.1"
-
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -4716,7 +4628,7 @@ npm-run-path@^2.0.0:
   dependencies:
     path-key "^2.0.0"
 
-"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.2:
+"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
   integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
@@ -4922,7 +4834,7 @@ os-tmpdir@^1.0.0, os-tmpdir@~1.0.2:
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
 
-osenv@0, osenv@^0.1.4:
+osenv@0:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
   integrity sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==
@@ -5166,7 +5078,7 @@ pkg-up@^2.0.0:
   dependencies:
     find-up "^2.1.0"
 
-popper.js@1.*:
+popper.js@1.16.*:
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
   integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
@@ -5691,16 +5603,6 @@ raw-body@2.4.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-rc@^1.2.7:
-  version "1.2.8"
-  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
-  integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
-  dependencies:
-    deep-extend "^0.6.0"
-    ini "~1.3.0"
-    minimist "^1.2.0"
-    strip-json-comments "~2.0.1"
-
 read-pkg-up@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
@@ -6059,7 +5961,7 @@ sass-loader@^7.*:
     pify "^4.0.1"
     semver "^6.3.0"
 
-sax@^1.2.4, sax@~1.2.4:
+sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
@@ -6117,7 +6019,7 @@ selfsigned@^1.10.7:
   dependencies:
     node-forge "0.9.0"
 
-"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.6.0:
+"semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0, semver@^5.6.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
@@ -6629,11 +6531,6 @@ strip-indent@^1.0.1:
   dependencies:
     get-stdin "^4.0.1"
 
-strip-json-comments@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
-  integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
-
 style-loader@^0.21.0:
   version "0.21.0"
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.21.0.tgz#68c52e5eb2afc9ca92b6274be277ee59aea3a852"
@@ -6703,19 +6600,6 @@ tar@^2.0.0:
     fstream "^1.0.12"
     inherits "2"
 
-tar@^4.4.2:
-  version "4.4.13"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525"
-  integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==
-  dependencies:
-    chownr "^1.1.1"
-    fs-minipass "^1.2.5"
-    minipass "^2.8.6"
-    minizlib "^1.2.1"
-    mkdirp "^0.5.0"
-    safe-buffer "^5.1.2"
-    yallist "^3.0.3"
-
 terser-webpack-plugin@^1.1.0, terser-webpack-plugin@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.3.tgz#5ecaf2dbdc5fb99745fd06791f46fc9ddb1c9a7c"
@@ -7322,7 +7206,7 @@ yallist@^2.1.2:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
   integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=
 
-yallist@^3.0.0, yallist@^3.0.2, yallist@^3.0.3:
+yallist@^3.0.2:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
   integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==