From b8fa0246803dab40cf57d40b45984c53046f2d55 Mon Sep 17 00:00:00 2001
From: "Dzial Techniczny WMW Projekt s.c" <techniczna@wmwprojekt.pl>
Date: Tue, 10 Dec 2019 11:34:53 +0100
Subject: Plugins directory and local modifications

---
 plugins/Customizer/Assets/css/README.md            |   39 +
 plugins/Customizer/Assets/css/customizer.css       |  316 ++
 plugins/Customizer/Assets/css/theme.css            |    1 +
 plugins/Customizer/Assets/css/themes/Blueboard.css |  265 ++
 plugins/Customizer/Assets/css/themes/Breathe.css   |  327 ++
 plugins/Customizer/Assets/css/themes/Clemson.css   |  341 ++
 plugins/Customizer/Assets/css/themes/Galaxy.css    | 2713 ++++++++++++++++
 plugins/Customizer/Assets/css/themes/Github.css    | 3260 ++++++++++++++++++++
 plugins/Customizer/Assets/css/themes/KindaDark.css |  685 ++++
 plugins/Customizer/Assets/css/themes/Material.css  | 1427 +++++++++
 .../Customizer/Assets/css/userthemes/niebieski.css |    1 +
 plugins/Customizer/Assets/img/logo-gen.png         |  Bin 0 -> 7850 bytes
 plugins/Customizer/Assets/js/customizer.js         |  248 ++
 .../Assets/rgbaColorPicker/rgbaColorPicker.css     |  167 +
 .../Assets/rgbaColorPicker/rgbaColorPicker.js      |  492 +++
 15 files changed, 10282 insertions(+)
 create mode 100644 plugins/Customizer/Assets/css/README.md
 create mode 100644 plugins/Customizer/Assets/css/customizer.css
 create mode 100644 plugins/Customizer/Assets/css/theme.css
 create mode 100644 plugins/Customizer/Assets/css/themes/Blueboard.css
 create mode 100644 plugins/Customizer/Assets/css/themes/Breathe.css
 create mode 100644 plugins/Customizer/Assets/css/themes/Clemson.css
 create mode 100644 plugins/Customizer/Assets/css/themes/Galaxy.css
 create mode 100644 plugins/Customizer/Assets/css/themes/Github.css
 create mode 100644 plugins/Customizer/Assets/css/themes/KindaDark.css
 create mode 100644 plugins/Customizer/Assets/css/themes/Material.css
 create mode 100644 plugins/Customizer/Assets/css/userthemes/niebieski.css
 create mode 100644 plugins/Customizer/Assets/img/logo-gen.png
 create mode 100644 plugins/Customizer/Assets/js/customizer.js
 create mode 100644 plugins/Customizer/Assets/rgbaColorPicker/rgbaColorPicker.css
 create mode 100644 plugins/Customizer/Assets/rgbaColorPicker/rgbaColorPicker.js

(limited to 'plugins/Customizer/Assets')

diff --git a/plugins/Customizer/Assets/css/README.md b/plugins/Customizer/Assets/css/README.md
new file mode 100644
index 00000000..7b7416b3
--- /dev/null
+++ b/plugins/Customizer/Assets/css/README.md
@@ -0,0 +1,39 @@
+
+Preset Themes that come with Customizer
+--------
+
+<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/Clemson_Tigers_logo.svg/2000px-Clemson_Tigers_logo.svg.png" height="20"> **Clemson Theme (Go Tigers!):**
+
+![image](https://user-images.githubusercontent.com/26339368/48094361-fccc3c80-e1df-11e8-9695-6b9c510aa522.png)
+
+:octocat: Github:
+
+![image](https://user-images.githubusercontent.com/26339368/47761386-8636b880-dc8e-11e8-9b6e-c46e7b5dcc44.png)
+
+:milky_way: Galaxy:
+
+![image](https://user-images.githubusercontent.com/26339368/47761350-68695380-dc8e-11e8-9e87-a9471e5e1adf.png)
+
+
+:partly_sunny: Breathe:
+
+![image](https://user-images.githubusercontent.com/26339368/47761312-47086780-dc8e-11e8-9460-5b1ce4b54d5e.png)
+
+:blue_book: Blueboard 
+
+![image](https://user-images.githubusercontent.com/26339368/49310748-29a50400-f4ad-11e8-9734-eca2e5a558fc.png)
+
+:sparkles: Material
+
+![image](https://user-images.githubusercontent.com/26339368/49310723-1003bc80-f4ad-11e8-8c03-8390ecc78d20.png)
+
+:8ball: KindaDark 
+   
+<img src="https://i.imgur.com/Rg9RYwf.png" />   
+<br/>   
+   
+   
+   
+## How to add your own css
+
+To add your own custom css files to Customizer, simply place your files in the `DATA_DIR . '/files/customizer/themes` folder. If that folder doesn't exist, create it, and then place your files in there. This will retain your custom themes through upgrades of both Kanboard or Customizer.
diff --git a/plugins/Customizer/Assets/css/customizer.css b/plugins/Customizer/Assets/css/customizer.css
new file mode 100644
index 00000000..9423a4d5
--- /dev/null
+++ b/plugins/Customizer/Assets/css/customizer.css
@@ -0,0 +1,316 @@
+/* KANBOARD PLUGIN - CUSTOMIZER CSS FILE */
+
+/*------ PAGE HEADER ------*/
+.logo > a > img {vertical-align:middle;} /* This aligns the logo certically to the text */
+
+.logo a {
+	opacity:1.0;
+}
+
+/*------ LOGIN PAGE-SPECIFIC STYLES MOVED TO logintop.php SO THEY WON'T AFFECT OTHER PARTS OF KANBOARD ------*/
+
+
+/*------ PLUGIN SETTINGS PAGE ------*/
+.form-help {margin-top: 5px;} /* This gives line spacing above the help text */
+
+code {
+	margin: 0;
+	/*padding: 2px 0.4em;*/
+	background-color: rgba(27, 31, 35, 0.32);
+	border-radius: 3px;
+	color: #FFF;
+	font-family: Tahoma;
+	font-size: 95%!important;
+	letter-spacing: 1px;
+} /* This styles the url link examples */
+
+.login-link-block > label {
+	font-weight: bold;
+	margin-bottom: 5px;
+} /* This is to highlight the title fields */
+
+.panel-heading {
+	margin: -2px -25px;
+	float: right;
+	font-size: 1.2em;
+} /* This adds a heading area to each section */
+
+.panel-title {
+	margin-top: 0;
+	font-weight: bold;
+} /* This is the title text for the heading area */
+
+.links-title {
+	margin: -2px 25px;
+} /* This is the title text for the links heading area, styled uniquely as the type is fieldset */
+
+.upload-link {
+	float: left;
+	list-style: outside none none;
+	width: auto;
+	display: block;
+	margin: 0px 10px;
+} /* This places the upload link on the same line as the remove link */
+
+.remove-link {
+	float: left;
+	list-style: outside none none;
+	width: auto;
+	display: block;
+	margin: 0px 10px;
+} /* This places the upload link on the same line as the remove link */
+
+.upload-link > a > i {
+	color: green;
+} /* This colours the upload icon to green */
+
+.remove-link > a > i {
+	color: red;
+} /* This colours the upload icon to red */
+
+/* Style the buttons that are used to open and close the accordion panel */
+.login-accordion {
+    font-weight: bold;
+    background-color: rgba(136,136,136,0.7);
+    cursor: pointer;
+    padding: 18px;
+    width: 100%;
+    text-align: left;
+    border: none;
+    outline: none;
+    transition: 0.4s;
+    color: #f5f5f5;
+    border-radius: 4px;
+    margin-bottom: 5px;
+    box-shadow: 0 1px 3px 0px rgba(70, 70, 70, 0.10);
+}
+
+/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
+.login-accordion:hover {
+    background-color: #f5f5f5;
+    color: #777777;
+    transition: 0.4s;
+}
+
+.current {
+    background-color: #f5f5f5;
+    color: #777777;
+    transition: 0.4s;
+}
+
+/* Style the accordion panel. Note: hidden by default */
+.login-accordian-panel {
+    max-height: 0;
+    overflow: hidden;
+    transition: 0.4s ease-in-out;
+    opacity: 0;
+}
+
+div.login-accordian-panel.show {
+    opacity: 1;
+    max-height: 5000px;
+}
+
+.title-creator {
+	border-left: 5px solid #333;
+    padding-left: 8px;
+}
+
+/* 
+* Short classes 
+* m - for classes that set margin
+* p - for classes that set padding
+* t - for classes that set margin-top or padding-top
+* b - for classes that set margin-bottom or padding-bottom
+* l - for classes that set margin-left or padding-left
+* r - for classes that set margin-right or padding-right
+* number(5) - for classes that set the margin or padding 
+*/
+
+.mt-5 {
+	margin-top: 5px;
+}
+
+.mt-10 {
+	margin-top: 10px;
+}
+
+.mt-15 {
+	margin-top: 15px;
+}
+
+.mt-20 {
+	margin-top: 20px;
+}
+
+.mb-5 {
+	margin-bottom: 5px;
+}
+
+.mb-10 {
+	margin-bottom: 10px;
+}
+
+.mb-15 {
+	margin-bottom: 15px;
+}
+
+.mb-20 {
+	margin-bottom: 20px;
+}
+
+.ml-5 {
+	margin-left: 5px;
+}
+
+.ml-10 {
+	margin-left: 10px;
+}
+
+.ml-15 {
+	margin-left: 15px;
+}
+
+.ml-20 {
+	margin-left: 20px;
+}
+
+.mr-5 {
+	margin-right: 5px;
+}
+
+.mr-10 {
+	margin-right: 10px;
+}
+
+.mr-15 {
+	margin-right: 15px;
+}
+
+.mr-20 {
+	margin-right: 20px;
+}
+
+.pt-5 {
+	padding-top: 5px;
+}
+
+.pt-10 {
+	padding-top: 10px;
+}
+
+.pt-15 {
+	padding-top: 15px;
+}
+
+.pt-20 {
+	padding-top: 20px;
+}
+
+.pb-5 {
+	padding-bottom: 5px;
+}
+
+.pb-10 {
+	padding-bottom: 10px;
+}
+
+.pb-15 {
+	padding-bottom: 15px;
+}
+
+.pb-20 {
+	padding-bottom: 20px;
+}
+
+.pl-5 {
+	padding-left: 5px;
+}
+
+.pl-10 {
+	padding-left: 10px;
+}
+
+.pl-15 {
+	padding-left: 15px;
+}
+
+.pl-20 {
+	padding-left: 20px;
+}
+
+.pr-5 {
+	padding-right: 5px;
+}
+
+.pr-10 {
+	padding-right: 10px;
+}
+
+.pr-15 {
+	padding-right: 15px;
+}
+
+.pr-20 {
+	padding-right: 20px;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input { 
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
diff --git a/plugins/Customizer/Assets/css/theme.css b/plugins/Customizer/Assets/css/theme.css
new file mode 100644
index 00000000..8b137891
--- /dev/null
+++ b/plugins/Customizer/Assets/css/theme.css
@@ -0,0 +1 @@
+
diff --git a/plugins/Customizer/Assets/css/themes/Blueboard.css b/plugins/Customizer/Assets/css/themes/Blueboard.css
new file mode 100644
index 00000000..1fa8097b
--- /dev/null
+++ b/plugins/Customizer/Assets/css/themes/Blueboard.css
@@ -0,0 +1,265 @@
+/*!
+ * Blueboard by bgibout - Theme for Kanboard
+ * Licensed under the MIT license - blueboard/LICENSE
+ * https://github.com/bgibout/blueboard
+ * Copyright (c) 2017 bgibout
+ */
+
+body {
+    color: #868ba1;
+    background-color: #e9ecef;
+    font-family: "Roboto", "Helvetica Neue", Arial, sans-s
+}
+
+.page {
+    margin: 0;
+}
+
+header {
+    margin: 0 !important;
+    border: 0 !important;
+    background-color : #3B6998 !important;
+}
+
+.action-menu {
+	padding: 10px;
+}
+
+.views {
+	line-height: 30px;
+}
+
+.filter-box-component {
+	padding-top: 5px;
+}
+
+.project-header .dropdown-component {
+    margin-top: 4px;
+    margin-right: 5px;
+    float: left;
+    line-height: 30px;
+}
+
+header h1 {
+    color: #ffffff;
+    font-weight: 600;
+    font-size: 1.1rem;
+    line-height: 2rem
+}
+
+.tooltip i.fa {
+    color: #fff;
+}
+
+.btn {
+    text-decoration: none;
+    border-radius: 0;
+    min-height: 30px;
+    line-height: 30px;
+    color: #fff;
+    background-color: #3B6998;
+    border-color: #386491;
+    font-size: 12px;
+    text-align: center;
+    padding-left: 15px;
+    padding-right: 15px
+}
+
+label {
+    padding: 0px 40px 0 0px;
+	line-height: 25px;
+    vertical-align: middle;
+    font-size: .9rem;
+}
+
+/*
+	form {
+    margin-top: 40px;
+}
+*/
+
+fieldset {
+	background: #ffffff;
+}
+
+select, span.select2 {
+	width: 95% !important;
+}
+
+input[type="number"], input[type="date"], input[type="email"], input[type="password"], input[type="text"]:not(.input-addon-field) {
+	padding: 0.65rem 0.75rem;
+    font-size: 0.875rem;
+    line-height: 1.25;
+    color: #495057;
+    background-color: #fff;
+    background-image: none;
+    background-clip: padding-box;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 2px;
+    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+    height: auto
+}
+
+.select-dropdown-input {
+	border: none !important;
+}
+
+.select-dropdown-input-container .select-dropdown-chevron {
+	top: 10px;
+}
+
+.js-submit-buttons-rendered {
+    margin-top: 40px;
+}
+
+.page .page-header {
+    padding: 10px;
+    background: #343a40;
+    font-size: 0.9rem;
+    margin: 0;
+}
+
+.page-header a {
+    color: #ffffff;
+    text-decoration: none;
+}
+
+#config-section .page-header a {
+    color: #000;
+    font-size: 0.8rem;
+}
+
+.page-header a .fa {
+    color: #868e96;
+}
+
+.menus-container a .fa {
+    color: #ffffff;
+}
+
+.margin-bottom {
+    margin-bottom: 20px;
+    padding: 10px;
+}
+
+.accordion-section {
+    margin: 20px;
+    background: #fff;
+    padding: 50px 30px;
+}
+
+.project-overview-column {
+    background: #fff;
+}
+
+.table-list {
+    font-size: 0.85em;
+    margin-bottom: 20px;
+    padding: 10px;
+    background: #ffffff;
+}
+
+.table-list-header {
+    background: #fbfbfb;
+    border: 1px solid #e5e5e5;
+    border-radius: 5px 5px 0 0;
+    line-height: 30px;
+    padding-left: 10px;
+    padding-right: 3px;
+    height: 30px;
+}
+
+.table-list-row {
+    padding: 10px;
+}
+
+.sidebar-content {
+    background: #f8f9fa;
+    margin-top: 10px;
+    padding: 10px;
+}
+
+.sidebar-container {
+    height: 100%;
+    width: 100%;
+}
+
+.sidebar-container .page-header {
+    background: none;
+}
+
+.sidebar {
+    margin-top: 20px;
+}
+
+.sidebar .js-select-dropdown-autocomplete-rendered {
+    padding: 10px;
+}
+
+
+.sidebar ul {
+    margin-top: 10px;
+}
+
+.sidebar ul:before {
+    content: "Navigation";
+    text-transform: uppercase;
+    font-size: 11px;
+    padding: 7px 15px;
+    display: block;
+    margin-bottom: 0;
+    font-weight: 500;
+    letter-spacing: 0.5px;
+}
+
+.sidebar ul>li {
+    padding: 5px 0 0 15px;
+    border-top: 1px solid #ced4da;
+}
+
+.sidebar ul>li:last-child {
+    border-bottom: 1px solid #ced4da;
+}
+
+.sidebar ul>li a {
+  color: #868e96;
+  font-size: 0.9rem;
+}
+
+.sidebar>ul li.active {
+    background-color: #f8f9fa    
+}
+
+.sidebar ul>li.active a {
+    color: #343a40;
+}
+
+#modal-box {
+    padding: 20px 20px 30px 20px;
+}
+
+table {
+    color: #000;
+}
+
+table.table-fixed th {
+    background: #3B6998;
+}
+table.table-fixed th, table.table-fixed th a {
+    color: #ffffff ;
+}
+
+table.table-fixed th, table.table-fixed td {
+    padding-left: 10px;
+}
+
+.board-add-icon i {
+	color: #3B6998;
+}
+
+
+@media (max-width: 768px) {
+	.sidebar {
+	max-width: 100%;
+	}
+}
diff --git a/plugins/Customizer/Assets/css/themes/Breathe.css b/plugins/Customizer/Assets/css/themes/Breathe.css
new file mode 100644
index 00000000..b262244c
--- /dev/null
+++ b/plugins/Customizer/Assets/css/themes/Breathe.css
@@ -0,0 +1,327 @@
+/*!
+ * Modified version of Oxygen - Theme for Kanboard
+ * Licensed under the MIT license - Oxygen/LICENSE
+ * https://github.com/kenlog/Oxygen
+ * Copyright (c) 2018 Valentino Pesce - https://iltuobrand.it
+ */
+
+body {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+h1{
+	color:#007BA8;
+}
+a{
+	color:#007BA8;
+}
+.js-modal-medium{
+	color:#007BA8;
+}
+.sidebar>ul a:hover{
+	color:#007BA8;
+}
+div.task-board-recent {
+	box-shadow: none;
+	border-bottom: 6px solid rgba(0, 0, 0, 0.3);
+}
+div.ganttview-vtheader-series-name {
+	padding: 0 6px;
+}
+th,td {
+	padding: 10px;
+}
+header {
+	border-bottom: none;
+	box-shadow: 0px 1px 3px 0 rgba(46,61,73,.12);
+	padding: 15px 10px;
+	margin-bottom: 15px;
+	background-color: #e8fbff!important;
+}
+.header img {
+  float: left;
+}
+.header h2 {
+  position: relative;
+  color:#007BA8;
+  top: 13px;
+  left: 10px;
+  margin: 0;
+}
+label {
+	font-weight: bold;
+	margin-top: 18px;
+}
+.task-board {
+	margin-bottom: 8px;
+	padding: 12px;
+	border-radius: 6px;
+	box-shadow: 0px 5px 5px 0 rgba(46,61,73,.12);
+	border: none;
+}
+.task-board-title {
+	font-size: 1.25em;
+	font-weight: 600;
+}
+.task-show-details {
+	border-radius: 10px;
+	margin-bottom: 20px;
+}
+.task-show-details h2 {
+	background-color: rgba(0, 0, 0, 0.3);
+	padding: 20px;
+	border-radius: 8px 8px 0 0;
+	color: #fff;
+}
+.task-show-details ul {
+	padding: 20px;
+}
+.task-summary-container {
+	border: none;
+	border-radius: 7px;
+	border-bottom: 5px solid;
+	padding: 20px;
+}
+.table-small {
+	font-size: 1em;
+}
+table th {
+	text-align: left;
+	padding: 0.7em 3px;
+	border: 1px solid #eee;
+	background: #fbfbfb;
+}
+table td {
+    border: none;
+    padding: 0.5em 7px;
+    vertical-align: top;
+}
+.sidebar ul {
+	padding-bottom: 20px;
+	border-bottom: 1px solid #ddd;
+}
+.sidebar ul:last-of-type {
+	border-bottom: none;
+}
+.sidebar-collapse i,.sidebar-collapsed .sidebar {
+	background-color: #999;
+	border-radius: 24px;
+	padding: 5px 10px 5px 8px;
+}
+.sidebar-collapse i,.sidebar-collapsed .sidebar i {
+	color: #fff;
+}
+.sidebar-collapse i:hover,.sidebar-collapsed .sidebar:hover {
+	background-color: #ccc;
+}
+.page-header {
+	margin: 15px 0;
+	background-color: #eee;
+	padding: 6px 10px 10px 10px;
+	border-bottom: 1px solid #ddd;
+	border-top: 1px solid #ddd;
+}
+.page-header li {
+	font-size: 1.1em;
+}
+.page-header h2 {
+	border-bottom: none;
+}
+.listing {
+	border: none;
+}
+.fa-play {
+	font-size: 1.2em;
+	background-color: #ddd;
+	border-radius: 100%;
+	width: 25px;
+	height: 28px;
+	padding: 8px 0 0 15px;
+	margin-right: 8px;
+}
+.fa-play:hover {
+	background-color: #999;
+	color: #fff;
+}
+.fc-event .fc-content {
+	padding: 4px 8px;
+}
+.board-add-icon {
+    float: left;
+    padding: 0 5px
+}
+.board-add-icon i {
+    text-decoration: none;
+    color: #289E7B;
+    font-size: 1.4em
+}
+.board-add-icon i:focus,
+.board-add-icon i:hover {
+    text-decoration: none;
+    color: #23292d
+}
+.form-column select {
+	font-size: 1.2em;
+	margin: 10px 0 2px 0;
+}
+.form-column:nth-of-type(2) {
+	padding: 10px 25px;
+	background-color: #f7f7f7;
+}
+.form-actions {
+	font-size: 1.2em;
+}
+.page-header ul.dropdown-submenu-open {
+	margin: 10px 0 0 -10px;
+	padding: 0;
+}
+.select-dropdown-input-container {
+    max-width: 300px;
+}
+.dropdown-submenu-open li:nth-child(even) {
+	background-color: #f7f7f7;
+}
+.dropdown-submenu-open li {
+	padding: 6px 10px;
+}
+.dropdown-submenu-open li:hover {
+	background-color: #eee;
+}
+.filters {
+	border: none;
+}
+.filters ul.dropdown-submenu-open {
+	margin: 6px 0 0 8px;
+}
+.markdown pre {
+	background: #3333330d;
+	max-height: 600px;
+	overflow: auto;
+	margin-bottom: 1em;
+	padding: 5px;
+	color: #242729;
+	font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif;
+}
+a i.web-notification-icon {
+	color: #D45353;
+}
+.fa-play {
+	font-size:1.2em;
+	background-color: #ddd;
+	border-radius: 100%;
+	width: 25px;
+	height: 25px!important;
+	padding: 9px 3px 0 9px!important;
+	margin-right: 8px;
+}
+#modal-box {
+	padding: 10px;
+}
+.table-list-category {
+    padding: 2px 2px 2px 5px;
+}
+.table-list-row:hover {
+	background: #f5f5f5;
+	border-bottom: 1px solid #f7f7f7;
+	border-right: 1px solid #f7f7f7;
+}
+.page-header {
+	margin: 15px 0;
+	background-color: #ffffff;
+	padding: 6px 10px 10px 10px;
+	border-bottom: 1px solid #f7f7f7;
+	border-top: 1px solid #f7f7f7;
+}
+.comments .comment-highlighted {
+	background-color: #fff;
+	border: 2px solid #F5E982;
+	border-radius: 5px;
+}
+.comments .comment:hover {
+	background: #f5f5f5;
+	border-radius: 5px;
+}
+.comments .comment:nth-child(even):not(.comment-highlighted):hover {
+	border-radius: 5px;
+	background: #f5f5f5;
+}
+.comments .comment:nth-child(even):not(.comment-highlighted) {
+	background: #fbfbfb;
+	border-radius: 5px;
+}
+.sidebar {
+	background-color: #f7f7f7;
+	padding: 7px;
+	border-radius: 7px;
+	border-left: 2px solid #e9e9e9;
+	box-shadow: 1px 0px 7px 0 rgba(46,61,73,.12);
+}
+input[type="number"]:focus, input[type="date"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="text"]:focus {
+	color: #000;
+	border-color: #007BA8;
+	outline: 0;
+	box-shadow: 0 0 0 0.2rem rgba(222,222,222,0.25);
+}
+textarea:focus {
+	color: #000;
+	border-color: #007BA8;
+	outline: 0;
+	box-shadow: 0 0 0 0.2rem rgba(222,222,222,0.25);
+}
+input[type="number"], input[type="date"], input[type="email"], input[type="password"], input[type="text"]:not(.input-addon-field) {
+	padding:3px;
+	transition: box-shadow 1s;
+}
+.text-editor textarea{
+	padding:3px;
+	transition: box-shadow 1s;
+}
+select{
+	border: 1px solid #ccc;
+	background: #f9f9f9;
+	padding: 3px;
+}
+.btn-blue {
+	border-color: #007BA8;
+	background: #007BA8;
+	color: #fff;
+	background-image: linear-gradient(-180deg, #007BA8 0%, #007387 90%);
+}
+.btn-blue:hover, .btn-blue:focus {
+	border-color: #007BA8;
+	background: #ffffff;
+	color: #007BA8;
+}
+.select2-container--default.select2-container--focus .select2-selection--multiple {
+	border: solid #007BA8 1px;
+	outline: 0;
+}
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+	background-color: #007BA8;
+	color: white;
+}
+.board-add-icon i:focus, .board-add-icon i:hover {
+	text-decoration: none;
+	color: #91C259;
+}
+.board-add-icon i {
+	text-decoration: none;
+	color: #007BA8;
+	font-size: 1.4em;
+}
+.dropdown-submenu-open li:not(.no-hover):hover {
+	background: #007BA8;
+	color: #fff;
+}
+.sidebar>ul li.active a {
+	color: #007BA8;
+	font-weight: bold;
+}
+.table-list-row .table-list-title a:hover, .table-list-row .table-list-title a:focus {
+	text-decoration: underline;
+	color: #007BA8;
+}
+.image-slideshow-overlay img {
+    display: block;
+    margin: auto;
+    max-width: 100%;
+}
diff --git a/plugins/Customizer/Assets/css/themes/Clemson.css b/plugins/Customizer/Assets/css/themes/Clemson.css
new file mode 100644
index 00000000..d7406315
--- /dev/null
+++ b/plugins/Customizer/Assets/css/themes/Clemson.css
@@ -0,0 +1,341 @@
+/*!
+ * Modified version of Oxygen - Theme for Kanboard
+ * Licensed under the MIT license - Oxygen/LICENSE
+ * https://github.com/kenlog/Oxygen
+ * Copyright (c) 2018 Valentino Pesce - https://iltuobrand.it
+ */
+
+@import url("https://fonts.googleapis.com/css?family=Raleway:400,700");
+
+body {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+h1{
+	color:#FF6200;
+}
+a{
+	color:#FF6200;
+}
+.js-modal-medium{
+	color:#FF6200;
+}
+.sidebar>ul a:hover{
+	color:#FF6200;
+}
+div.ganttview-vtheader-series-name {
+	padding: 0 6px;
+}
+th,td {
+	padding: 10px;
+}
+header {
+	border-bottom: none;
+	box-shadow: 0px 1px 3px 0 rgba(46,61,73,.12);
+	padding: 15px 10px;
+	margin-bottom: 15px;
+	background-color: #ff6200; /* Old browsers */
+	background: -moz-linear-gradient(-45deg, #ff6200 36%, #9d00ff 100%); /* FF3.6-15 */
+	background: -webkit-linear-gradient(-45deg, #ff6200 36%,#9d00ff 100%); /* Chrome10-25,Safari5.1-6 */
+	background: linear-gradient(135deg, #ff6200 36%,#9d00ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6200', endColorstr='#9d00ff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+}
+.header img {
+  float: left;
+}
+.header h2 {
+  position: relative;
+  color:#FFFFFF;!important;
+  top: 13px;
+  left: 10px;
+  margin: 0;
+}
+header h1 {
+    font-size: 1.4em!important;
+    color: #FFFFFF!important;
+}
+label {
+	font-weight: bold;
+	margin-top: 18px;
+}
+
+.task-board {
+    margin-bottom: 8px;
+    padding: 9px;
+    border-radius: 3px;
+    box-shadow: 0px 1px 4px 0.6px rgba(157,0,255,0.6);
+    border: 2px solid;
+    background-color: #ffffff!important;
+}
+.task-board-title {
+	font-size: 1.25em;
+	font-weight: 600;
+}
+.task-show-details {
+	border-radius: 10px;
+	margin-bottom: 20px;
+}
+.task-show-details h2 {
+	background-color: rgba(0, 0, 0, 0.3);
+	padding: 20px;
+	border-radius: 8px 8px 0 0;
+	color: #fff;
+}
+.task-show-details ul {
+	padding: 20px;
+}
+.task-summary-container {
+	border: none;
+	border-radius: 7px;
+	border-bottom: 5px solid;
+	padding: 20px;
+}
+.table-small {
+	font-size: 1em;
+}
+table th {
+	text-align: left;
+	padding: 0.7em 3px;
+	border: 1px solid #F2DCD3;
+	background: #FFEFEB;
+}
+table td {
+    border: none;
+    padding: 0.5em 7px;
+    vertical-align: top;
+}
+.sidebar ul {
+	padding-bottom: 20px;
+	border-bottom: 1px solid #ddd;
+}
+.sidebar ul:last-of-type {
+	border-bottom: none;
+}
+.sidebar-collapse i,.sidebar-collapsed .sidebar {
+	background-color: #999;
+	border-radius: 24px;
+	padding: 5px 10px 5px 8px;
+}
+.sidebar-collapse i,.sidebar-collapsed .sidebar i {
+	color: #fff;
+}
+.sidebar-collapse i:hover,.sidebar-collapsed .sidebar:hover {
+	background-color: #ccc;
+}
+.page-header {
+	margin: 15px 0;
+	background-color: #F2DCD3;
+	padding: 6px 10px 10px 10px;
+	border-bottom: 1px solid #ddd;
+	border-top: 1px solid #ddd;
+}
+.page-header li {
+	font-size: 1.1em;
+}
+.page-header h2 {
+	border-bottom: none;
+}
+.listing {
+	border: none;
+}
+.fa-play {
+	font-size: 1.2em;
+	background-color: #ddd;
+	border-radius: 100%;
+	width: 25px;
+	height: 28px;
+	padding: 8px 0 0 15px;
+	margin-right: 8px;
+}
+.fa-play:hover {
+	background-color: #999;
+	color: #fff;
+}
+.fc-event .fc-content {
+	padding: 4px 8px;
+}
+.board-add-icon {
+    float: left;
+    padding: 0 5px
+}
+.board-add-icon i {
+    text-decoration: none;
+    color: #9D00FF;
+    font-size: 1.4em
+}
+.board-add-icon i:focus,
+.board-add-icon i:hover {
+    text-decoration: none;
+    color: #23292d
+}
+.form-column select {
+	font-size: 1.2em;
+	margin: 10px 0 2px 0;
+}
+.form-column:nth-of-type(2) {
+	padding: 10px 25px;
+	background-color: #f7f7f7;
+}
+.form-actions {
+	font-size: 1.2em;
+}
+.page-header ul.dropdown-submenu-open {
+	margin: 10px 0 0 -10px;
+	padding: 0;
+}
+.select-dropdown-input-container {
+    max-width: 300px;
+}
+.dropdown-submenu-open li:nth-child(even) {
+	background-color: #f7f7f7;
+}
+.dropdown-submenu-open li {
+	padding: 6px 10px;
+}
+.dropdown-submenu-open li:hover {
+	background-color: #F2DCD3;
+}
+.filters {
+	border: none;
+}
+.filters ul.dropdown-submenu-open {
+	margin: 6px 0 0 8px;
+}
+.markdown pre {
+	background: #FFF;
+	max-height: 600px;
+	overflow: auto;
+	margin-bottom: 1em;
+	padding: 5px;
+	color: #242729;
+	font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif;
+}
+code {
+  background-color: rgba(249, 161, 0, 0.12)!important;
+  color: #ab05ff!important;
+}
+a i.web-notification-icon {
+	color: #FF6200;
+}
+.fa-play {
+	font-size:1.2em;
+	background-color: #ddd;
+	border-radius: 100%;
+	width: 25px;
+	height: 25px!important;
+	padding: 9px 3px 0 9px!important;
+	margin-right: 8px;
+}
+#modal-box {
+	padding: 10px;
+}
+.table-list-category {
+    padding: 2px 2px 2px 5px;
+}
+.table-list-row:hover {
+	background: #f5f5f5;
+	border-bottom: 1px solid #f7f7f7;
+	border-right: 1px solid #f7f7f7;
+}
+.page-header {
+	margin: 15px 0;
+	background-color: #ffffff;
+	padding: 6px 10px 10px 10px;
+	border-bottom: 1px solid #f7f7f7;
+	border-top: 1px solid #f7f7f7;
+}
+.comments .comment-highlighted {
+	background-color: #fff;
+	border: 2px solid #AD3BFF;
+	border-radius: 5px;
+}
+.comments .comment:hover {
+	background: #f5f5f5;
+	border-radius: 5px;
+}
+.comments .comment:nth-child(even):not(.comment-highlighted):hover {
+	border-radius: 5px;
+	background: #f5f5f5;
+}
+.comments .comment:nth-child(even):not(.comment-highlighted) {
+	background: #FFEFEB;
+	border-radius: 5px;
+}
+.sidebar {
+	background-color: #f7f7f7;
+	padding: 7px;
+	border-radius: 7px;
+	border-left: 2px solid #e9e9e9;
+	box-shadow: 1px 0px 7px 0 rgba(46,61,73,.12);
+}
+input[type="number"]:focus, input[type="date"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="text"]:focus {
+	color: #000;
+	border-color: #FF6200;
+	outline: 0;
+	box-shadow: 0 0 0 0.2rem rgba(222,222,222,0.25);
+}
+textarea:focus {
+	color: #000;
+	border-color: #FF6200;
+	outline: 0;
+	box-shadow: 0 0 0 0.2rem rgba(222,222,222,0.25);
+}
+input[type="number"], input[type="date"], input[type="email"], input[type="password"], input[type="text"]:not(.input-addon-field) {
+	padding:3px;
+	transition: box-shadow 1s;
+}
+.text-editor textarea{
+	padding:3px;
+	transition: box-shadow 1s;
+}
+select{
+	border: 1px solid #ccc;
+	background: #f9f9f9;
+	padding: 3px;
+}
+.btn-blue {
+	border-color: #FF6200;
+	background: #FF6200;
+	color: #fff;
+	background-image: linear-gradient(-180deg, #FF6200 0%, #4B00B5 90%);
+}
+.btn-blue:hover, .btn-blue:focus {
+	border-color: #FF6200;
+	background: #ffffff;
+	color: #FF6200;
+}
+.select2-container--default.select2-container--focus .select2-selection--multiple {
+	border: solid #FF6200 1px;
+	outline: 0;
+}
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+	background-color: #FF6200;
+	color: white;
+}
+.board-add-icon i:focus, .board-add-icon i:hover {
+	text-decoration: none;
+	color: #E68332;
+}
+.board-add-icon i {
+	text-decoration: none;
+	color: #FF6200;
+	font-size: 1.4em;
+}
+.dropdown-submenu-open li:not(.no-hover):hover {
+	background: #FF6200;
+	color: #fff;
+}
+.sidebar>ul li.active a {
+	color: #FF6200;
+	font-weight: bold;
+}
+.table-list-row .table-list-title a:hover, .table-list-row .table-list-title a:focus {
+	text-decoration: underline;
+	color: #FF6200;
+}
+.image-slideshow-overlay img {
+    display: block;
+    margin: auto;
+    max-width: 100%;
+}
+
diff --git a/plugins/Customizer/Assets/css/themes/Galaxy.css b/plugins/Customizer/Assets/css/themes/Galaxy.css
new file mode 100644
index 00000000..9517cecc
--- /dev/null
+++ b/plugins/Customizer/Assets/css/themes/Galaxy.css
@@ -0,0 +1,2713 @@
+/*!
+ * Modified version of Nebula - Theme for Kanboard
+ * Licensed under the MIT license - Nebula/LICENSE
+ * https://github.com/kenlog/Nebula
+ * Copyright (c) 2018 Valentino Pesce - https://iltuobrand.it
+ */
+
+ h1,li,ul,ol,table,tr,td,th,p,blockquote,body {
+	margin:0;
+	padding:0;
+	font-size:100%
+}
+body {
+	padding-bottom:10px;
+	color:#ced4da;
+	background-color: #222;
+	font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+	text-rendering:optimizeLegibility
+}
+code {
+	background-color: #cccccc52!important;
+}
+small {
+	font-size:0.8em
+}
+::selection{background:rgba(113,113,113,0.5);color:#ffffff}::-moz-selection{background:rgba(113,113,113,0.5);color:#ffffff}
+hr {
+	border:0;
+	height:0;
+	border-top:0px solid rgba(0,0,0,0.1);
+	border-bottom:0px solid rgba(255,255,255,0.3)
+}
+::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+    color: #ffffff!important;
+    opacity: 1; /* Firefox */
+}
+
+:-ms-input-placeholder { /* Internet Explorer 10-11 */
+    color: #ffffff!important;
+}
+
+::-ms-input-placeholder { /* Microsoft Edge */
+    color: #ffffff!important;
+}
+.select-dropdown-input-container {
+    background-color: #252525!important;
+    max-width: 300px;
+}
+.page {
+	margin-left:10px;
+	margin-right:10px
+}
+.margin-top {
+	margin-top:20px
+}
+.margin-bottom {
+	margin-bottom:20px
+}
+.pull-right {
+	text-align:right
+}
+ul.no-bullet li {
+	list-style-type:none;
+	margin-left:0
+}
+#app-loading-icon {
+	position:fixed;
+	right:3px;
+	bottom:3px
+}
+.assign-me {
+	vertical-align:bottom
+}
+a {
+	color:#00bc8c;
+	border:none;
+	text-decoration:none;
+}
+a:focus {
+	outline:0;
+	color:#20c997;
+	text-decoration:none
+}
+a:hover {
+	color:#ced4da;
+	text-decoration:none
+}
+a .fa {
+	padding-right:3px;
+	text-decoration:none;
+	color:#ced4da
+}
+h1,h2,h3 {
+	font-weight:normal;
+	color:#ffffff
+}
+h1 {
+	font-size:1.5em
+}
+h2 {
+	font-size:1.4em;
+	margin-bottom:10px
+}
+h3 {
+	margin-top:10px;
+	font-size:1.2em
+}
+table {
+	width:100%;
+	border-collapse:collapse;
+	border-spacing:0;
+	margin-bottom:20px
+}
+table.table-fixed {
+	table-layout:fixed;
+	white-space:nowrap
+}
+table.table-fixed th {
+	overflow:hidden
+}
+table.table-fixed td {
+	white-space:nowrap;
+	overflow:hidden;
+	text-overflow:ellipsis
+}
+table.table-small {
+	font-size:0.8em
+}
+table.table-striped tr:nth-child(odd) {
+	background:#252525
+}
+@media (max-width: 768px) {
+	table.table-scrolling {
+		overflow-x:auto;
+		display:inline-block;
+		vertical-align:top;
+		max-width:100%;
+		white-space:nowrap
+	}
+}
+table th {
+	text-align:left;
+	padding:0.5em 3px;
+	border:0px solid #eee;
+	background:#252525
+}
+table th a {
+	text-decoration:none;
+	color:#ced4da
+}
+table th a:focus,table th a:hover {
+	text-decoration:underline
+}
+table td {
+	border:0px solid #eee;
+	padding:0.5em 3px;
+	vertical-align:top
+}
+table td li {
+	margin-left:20px
+}
+.column-1 {
+	width:1%
+}
+.column-2 {
+	width:2%
+}
+.column-3 {
+	width:3%
+}
+.column-4 {
+	width:4%
+}
+.column-5 {
+	width:5%
+}
+.column-6 {
+	width:6%
+}
+.column-7 {
+	width:7%
+}
+.column-8 {
+	width:8%
+}
+.column-9 {
+	width:9%
+}
+.column-10 {
+	width:10%
+}
+.column-11 {
+	width:11%
+}
+.column-12 {
+	width:12%
+}
+.column-13 {
+	width:13%
+}
+.column-14 {
+	width:14%
+}
+.column-15 {
+	width:15%
+}
+.column-16 {
+	width:16%
+}
+.column-17 {
+	width:17%
+}
+.column-18 {
+	width:18%
+}
+.column-19 {
+	width:19%
+}
+.column-20 {
+	width:20%
+}
+.column-21 {
+	width:21%
+}
+.column-22 {
+	width:22%
+}
+.column-23 {
+	width:23%
+}
+.column-24 {
+	width:24%
+}
+.column-25 {
+	width:25%
+}
+.column-26 {
+	width:26%
+}
+.column-27 {
+	width:27%
+}
+.column-28 {
+	width:28%
+}
+.column-29 {
+	width:29%
+}
+.column-30 {
+	width:30%
+}
+.column-31 {
+	width:31%
+}
+.column-32 {
+	width:32%
+}
+.column-33 {
+	width:33%
+}
+.column-34 {
+	width:34%
+}
+.column-35 {
+	width:35%
+}
+.column-36 {
+	width:36%
+}
+.column-37 {
+	width:37%
+}
+.column-38 {
+	width:38%
+}
+.column-39 {
+	width:39%
+}
+.column-40 {
+	width:40%
+}
+.column-41 {
+	width:41%
+}
+.column-42 {
+	width:42%
+}
+.column-43 {
+	width:43%
+}
+.column-44 {
+	width:44%
+}
+.column-45 {
+	width:45%
+}
+.column-46 {
+	width:46%
+}
+.column-47 {
+	width:47%
+}
+.column-48 {
+	width:48%
+}
+.column-49 {
+	width:49%
+}
+.column-50 {
+	width:50%
+}
+.column-51 {
+	width:51%
+}
+.column-52 {
+	width:52%
+}
+.column-53 {
+	width:53%
+}
+.column-54 {
+	width:54%
+}
+.column-55 {
+	width:55%
+}
+.column-56 {
+	width:56%
+}
+.column-57 {
+	width:57%
+}
+.column-58 {
+	width:58%
+}
+.column-59 {
+	width:59%
+}
+.column-60 {
+	width:60%
+}
+.column-61 {
+	width:61%
+}
+.column-62 {
+	width:62%
+}
+.column-63 {
+	width:63%
+}
+.column-64 {
+	width:64%
+}
+.column-65 {
+	width:65%
+}
+.column-66 {
+	width:66%
+}
+.column-67 {
+	width:67%
+}
+.column-68 {
+	width:68%
+}
+.column-69 {
+	width:69%
+}
+.column-70 {
+	width:70%
+}
+.column-71 {
+	width:71%
+}
+.column-72 {
+	width:72%
+}
+.column-73 {
+	width:73%
+}
+.column-74 {
+	width:74%
+}
+.column-75 {
+	width:75%
+}
+.column-76 {
+	width:76%
+}
+.column-77 {
+	width:77%
+}
+.column-78 {
+	width:78%
+}
+.column-79 {
+	width:79%
+}
+.column-80 {
+	width:80%
+}
+.column-81 {
+	width:81%
+}
+.column-82 {
+	width:82%
+}
+.column-83 {
+	width:83%
+}
+.column-84 {
+	width:84%
+}
+.column-85 {
+	width:85%
+}
+.column-86 {
+	width:86%
+}
+.column-87 {
+	width:87%
+}
+.column-88 {
+	width:88%
+}
+.column-89 {
+	width:89%
+}
+.column-90 {
+	width:90%
+}
+.column-91 {
+	width:91%
+}
+.column-92 {
+	width:92%
+}
+.column-93 {
+	width:93%
+}
+.column-94 {
+	width:94%
+}
+.column-95 {
+	width:95%
+}
+.column-96 {
+	width:96%
+}
+.column-97 {
+	width:97%
+}
+.column-98 {
+	width:98%
+}
+.column-99 {
+	width:99%
+}
+.column-100 {
+	width:100%
+}
+.draggable-row-handle {
+	cursor:move;
+	color: #ced4da;
+	padding-left: 10px;
+}
+.draggable-row-handle:hover {
+	color:#ced4da
+}
+.ui-widget-content {
+    color: #00bc8c;
+}
+tr.draggable-item-selected {
+	background:#fff;
+	border:2px solid #666;
+	box-shadow:4px 2px 10px -4px rgba(0,0,0,0.55)
+}
+tr.draggable-item-selected td {
+	border-top:none;
+	border-bottom:none
+}
+tr.draggable-item-selected td:first-child {
+	border-left:none
+}
+tr.draggable-item-selected td:last-child {
+	border-right:none
+}
+.table-stripped tr.draggable-item-hover,.table-stripped tr.draggable-item-hover {
+	background:#FEFFF2
+}
+.table-list {
+	font-size:0.85em;
+	margin-bottom:20px
+}
+.table-list-header {
+	background:#222;
+	border:0px solid #e5e5e5;
+	border-radius:5px 5px 0 0;
+	line-height:28px;
+	padding-left:3px;
+	padding-right:3px
+}
+.table-list-header a {
+	color:#ced4da;
+	font-weight:500;
+	text-decoration:none;
+	margin-right:10px
+}
+.table-list-header a:hover,.table-list-header a:focus {
+	color:#767676
+}
+.table-list-header .table-list-header-count {
+	color:#ced4d1;
+	display:inline-block;
+	float:left
+}
+.table-list-header .table-list-header-menu {
+	text-align:right
+}
+.table-list-row {
+	padding-left:3px;
+	padding-right:3px;
+	padding: 10px;
+	border-bottom:0px solid #e5e5e5;
+	border-right:0px solid #e5e5e5
+}
+.table-list-row.table-border-left {
+	border-left:0px solid #e5e5e5
+}
+.table-list-row:nth-child(odd) {
+	background:#252525
+}
+.table-list-row:last-child {
+	border-radius:0 0 5px 5px
+}
+.table-list-row:hover {
+	background:#252525;
+	border-bottom:0px solid #ffeb8e;
+	border-right:0px solid #ffeb8e
+}
+.table-list-row .table-list-title {
+	font-weight:500;
+	line-height:23px
+}
+.table-list-row .table-list-title.status-closed {
+	text-decoration:line-through;
+	margin-right:10px
+}
+.table-list-row .table-list-title.status-closed a {
+	font-style:italic
+}
+.table-list-row .table-list-title a {
+	color:#ced4da;
+	text-decoration:none
+}
+.table-list-row .table-list-title a:hover,.table-list-row .table-list-title a:focus {
+	text-decoration:underline
+}
+.table-list-row .table-list-details {
+	color:#f7f7f7;
+	font-weight:300;
+	line-height:20px
+}
+.table-list-row .table-list-details span {
+	margin-left:5px
+}
+.table-list-row .table-list-details span:first-child {
+	margin-left:0
+}
+.table-list-row .table-list-details li {
+	display:inline;
+	list-style-type:none
+}
+.table-list-row .table-list-details li:after {
+	content:', '
+}
+.table-list-row .table-list-details li:last-child:after {
+	content:''
+}
+.table-list-row .table-list-details strong {
+	font-weight:400;
+	color:#f7f7f7
+}
+.table-list-row .table-list-details-with-icons {
+	float:left
+}
+@media (max-width: 768px) {
+	.table-list-row .table-list-details-with-icons {
+		float:none
+	}
+}
+.table-list-row .table-list-icons {
+	font-size:0.8em;
+	text-align:right;
+	line-height:30px
+}
+@media (max-width: 768px) {
+	.table-list-row .table-list-icons {
+		text-align:left;
+		line-height:20px
+	}
+}
+.table-list-row .table-list-icons span {
+	margin-left:5px
+}
+.table-list-row .table-list-icons a {
+	text-decoration:none
+}
+.table-list-row .table-list-icons a:hover {
+	color:#ced4da
+}
+.table-list-row .table-list-icons a:hover i {
+	color:#ced4da
+}
+.table-list-category {
+	font-size:0.9em;
+	font-weight:500;
+	color:#000;
+	padding:1px 2px 1px 2px;
+	border-radius:3px;
+	background:#fcfcfc;
+	border:0px solid #ccc
+}
+.table-list-category a {
+	text-decoration:none;
+	color:#000
+}
+.table-list-category a:hover {
+	color:#00bc8c
+}
+fieldset {
+	border:0px solid #ddd;
+	margin-top:10px
+}
+legend {
+	font-weight:500;
+	font-size:1.2em
+}
+label {
+	cursor:pointer;
+	display:block;
+	margin-top:10px;
+	font-weight:400
+}
+input[type="number"],input[type="date"],input[type="email"],input[type="password"],input[type="text"]:not(.input-addon-field) {
+	width:300px;
+	max-width:95%;
+	font-size:1em;
+	height:25px;
+	padding-bottom:0;
+	padding-left:4px;
+
+	line-height: 1.5;
+	color: #fff;
+	background-color: #252525;
+	border: 2px solid #4a5368;
+	border-radius: .25rem;
+	-webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+	transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+
+	font-family:sans-serif;
+	-webkit-appearance:none;
+	-moz-appearance:none
+	
+}
+input[type="number"]::-webkit-input-placeholder,input[type="date"]::-webkit-input-placeholder,input[type="email"]::-webkit-input-placeholder,input[type="password"]::-webkit-input-placeholder,input[type="text"]:not(.input-addon-field)::-webkit-input-placeholder {
+	color:#222
+}
+input[type="number"]::-moz-placeholder,input[type="date"]::-moz-placeholder,input[type="email"]::-moz-placeholder,input[type="password"]::-moz-placeholder,input[type="text"]:not(.input-addon-field)::-moz-placeholder {
+	color:#222
+}
+input[type="number"]:-ms-input-placeholder,input[type="date"]:-ms-input-placeholder,input[type="email"]:-ms-input-placeholder,input[type="password"]:-ms-input-placeholder,input[type="text"]:not(.input-addon-field):-ms-input-placeholder {
+	color:#222
+}
+input[type="number"]:focus,input[type="date"]:focus,input[type="email"]:focus,input[type="password"]:focus,input[type="text"]:focus {
+	color:#ced4da;
+	border-color:rgba(82,168,236,0.8);
+	outline:0;
+	box-shadow:0 0 8px rgb(45, 60, 93)
+}
+input[type="number"] {
+	width:70px
+}
+input[type="text"]:not(.input-addon-field).form-numeric {
+	width:70px
+}
+input[type="text"]:not(.input-addon-field).form-datetime,input[type="text"]:not(.input-addon-field).form-date {
+	width:150px
+}
+input[type="text"]:not(.input-addon-field).form-input-large {
+	width:400px
+}
+input[type="text"]:not(.input-addon-field).form-input-small {
+	width:150px
+}
+textarea:focus {
+	color:#fff;
+	border-color:rgba(82,168,236,0.8);
+	outline:0;
+	box-shadow:0 0 8px rgba(82,168,236,0.6)
+}
+textarea {
+	padding:10px;
+	border:0px solid #ccc;
+	width:400px;
+	max-width:99%;
+	height:200px;
+	font-family:sans-serif;
+	font-size:1em;
+	line-height: 1.5;
+	color: #fff;
+	background-color: #252525;
+	border: 2px solid #4a5368;
+	border-radius: .25rem;
+	-webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+	transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+}
+textarea::-webkit-input-placeholder {
+	color:#222
+}
+textarea::-moz-placeholder {
+	color:#222
+}
+textarea:-ms-input-placeholder {
+	color:#222
+}
+select{
+	max-width:95%;
+	border: 3px solid #4a5368;
+	background: #252525;
+	padding: 3px;
+    color:#eee;
+}
+select:focus {
+	outline:0
+}
+select[multiple] {
+	width:300px
+}
+.select2-container--default .select2-selection--multiple .select2-selection__choice {
+    background-color: #3b3e47;
+    border: 1px solid #3b3e47;
+    border-radius: 4px;
+    cursor: default;
+    float: left;
+    margin-right: 5px;
+    margin-top: 5px;
+    padding: 0 5px;
+}
+.tag-autocomplete {
+	width:400px
+}
+span.select2-container {
+	margin-top:2px
+}
+.form-actions {
+	padding-top:20px;
+	clear:both;
+}
+.form-required {
+	color:red;
+	padding-left:5px;
+	font-weight:bold
+}
+@media (max-width: 480px) {
+	.form-required {
+		display:none
+	}
+}
+input[type="text"].form-max-width {
+	width:100%
+}
+input.form-error,textarea.form-error {
+	border:2px solid #b94a48
+}
+input.form-error:focus,textarea.form-error:focus {
+	box-shadow:none;
+	border:2px solid #b94a48
+}
+.form-errors {
+	color:#b94a48;
+	list-style-type:none
+}
+ul.form-errors li {
+	margin-left:0
+}
+.form-help {
+	font-size: 0.9em;
+	color: #00c9ff;
+	margin-bottom:15px
+}
+.form-inline {
+	padding:0;
+	margin:0;
+	border:none
+}
+.form-inline label {
+	display:inline;
+	padding-right:3px
+}
+.form-inline input,.form-inline select {
+	margin:0 15px 0 0
+}
+.form-inline .form-required {
+	display:none
+}
+.form-inline .form-actions {
+	display:inline-block
+}
+.form-inline .js-submit-buttons-rendered {
+	display:inline-block
+}
+.form-inline-group {
+	display:inline
+}
+.form-columns {
+	display:-webkit-flex;
+	display:flex;
+	-webkit-flex-direction:row;
+	flex-direction:row;
+	-webkit-flex-wrap:wrap;
+	flex-wrap:wrap;
+	-webkit-justify-content:flex-start;
+	justify-content:flex-start
+}
+.form-columns .form-column {
+	margin-right:25px;
+	flex-grow:1
+}
+.form-columns fieldset {
+	margin-top:0
+}
+.form-login {
+	max-width:350px;
+	margin:5% auto 0
+}
+@media (max-width: 480px) {
+	.form-login {
+		margin-left:5px
+	}
+}
+.form-login li {
+	margin-left:25px;
+	line-height:25px
+}
+.form-login h2 {
+	margin-bottom:30px;
+	font-weight:bold
+}
+.reset-password {
+	margin-top:20px;
+	margin-bottom:20px
+}
+.reset-password a {
+	color:#999
+}
+.input-addon {
+	display:flex
+}
+.input-addon-field {
+	flex:1;
+	font-size:1em;
+	color:#ced4da;
+	background: #3e424d;
+	margin:0;
+	-webkit-appearance:none;
+	-moz-appearance:none
+}
+.input-addon-field:first-child {
+	border-radius:5px 0 0 5px
+}
+.input-addon-field:last-child {
+	border-radius:0 5px 5px 0
+}
+.input-addon-item {
+	background-color:rgba(147,128,108,0.1);
+	color:#666;
+	font:inherit;
+	font-weight:normal
+}
+.input-addon-item:first-child {
+	border-radius:5px 0 0 5px
+}
+.input-addon-item:last-child {
+	border-radius:0 5px 5px 0
+}
+@media (max-width: 480px) {
+	.input-addon-item .dropdown .fa-caret-down {
+		display:none
+	}
+}
+.input-addon-field,.input-addon-item {
+	border:0px solid rgba(147,128,108,0.25);
+	padding:4px 0.75em
+}
+.input-addon-field:not(:first-child),.input-addon-item:not(:first-child) {
+	border-left:0
+}
+.icon-success {
+	color:#468847
+}
+.icon-error {
+	color:#b94a48
+}
+.icon-fade-out {
+	opacity:1;
+	animation:icon-fadeout 5s linear forwards
+}
+@keyframes icon-fadeout {
+	0% {
+		opacity:1
+	}
+	100% {
+		opacity:0
+	}
+}
+.alert {
+	padding:8px 35px 8px 14px;
+	margin-top:5px;
+	margin-bottom:5px;
+	color:#fff;
+	background-color:#20c997;
+	border:0px solid #20c997;
+	border-radius:4px
+}
+.alert-success {
+	color: #ffffff;
+    background-color: #20c997;
+    border-color: #20c997;
+}
+.alert-error {
+	color:#b94a48;
+	background-color:#f2dede;
+	border-color:#eed3d7
+}
+.alert-info {
+	color:#3a87ad;
+	background-color:#d9edf7;
+	border-color:#bce8f1
+}
+.alert-normal {
+	color:#ced4da;
+	background-color:#f0f0f0;
+	border-color:#ddd
+}
+.alert ul {
+	margin-top:10px;
+	margin-bottom:10px
+}
+.alert li {
+	margin-left:25px
+}
+.alert-fade-out {
+	text-align:center;
+	position:fixed;
+	bottom:0;
+	left:20%;
+	width:60%;
+	padding-top:5px;
+	padding-bottom:5px;
+	margin-bottom:0;
+	border-width:1px 0 0;
+	border-radius:4px 4px 0 0;
+	z-index:9999;
+	opacity:1;
+	animation:fadeout 5s linear forwards
+}
+@keyframes fadeout {
+	0% {
+		opacity:1
+	}
+	100% {
+		opacity:0
+	}
+}
+a.btn {
+	text-decoration:none
+}
+.btn {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    font-size: 1.2em;
+    font-weight: normal;
+    cursor: pointer;
+    display: inline-block;
+    border-radius: 5px;
+    padding: 3px 10px;
+    margin: 0;
+    border: 0px solid #ddd;
+    background: #00bc8c;
+    color: #fbfbfb;
+}
+.btn:hover,.btn:focus {
+	border-color:#bbb;
+	background:#fafafa;
+	color:#000
+}
+.btn-red {
+	border-color:#b0281a;
+	background:#d14836;
+	color:#fff
+}
+.btn-red:hover,.btn-red:focus {
+	border-color:#b0281a;
+	background:#c53727;
+	color:#fff
+}
+.btn-blue {
+	border-color:#188ae2;
+	background:#188ae2;
+	color:#fff
+}
+.btn-blue:hover,.btn-blue:focus {
+	border-color:#1475bf;
+	background:#1475bf;
+	color:#fff
+}
+.btn:disabled {
+	color:#ccc;
+	border-color:#ccc;
+	background:#f7f7f7
+}
+.buttons-header {
+	font-size:0.8em;
+	margin-top:5px;
+	margin-bottom:15px
+}
+.tooltip i.fa {
+	cursor:pointer
+}
+.tooltip .fa-info-circle {
+	color:#999
+}
+#tooltip-container {
+	padding: 5px;
+    background: #3a404c;
+    border: 2px solid #ddd;
+    border-radius: 4px;
+    box-shadow: -1px -1px 7px #aaa;
+    position: absolute;
+    min-width: 350px;
+}
+#tooltip-container .markdown p {
+	margin-bottom:0
+}
+#tooltip-container .tooltip-large {
+	width:600px
+}
+h2 .dropdown ul {
+	display:none
+}
+.dropdown {
+	display:inline;
+	position:relative
+}
+.dropdown ul {
+	display:none
+}
+.dropdown-smaller {
+	font-size:0.85em
+}
+ul.dropdown-submenu-open {
+	display:block;
+	position:absolute;
+	z-index:1000;
+	min-width:285px;
+	list-style:none;
+	margin:3px 0 0 1px;
+	padding:6px 0;
+	background-color:#fff;
+	border:0px solid #b2b2b2;
+	border-radius:3px;
+	box-shadow:0 1px 3px rgba(0,0,0,0.15)
+}
+.dropdown-submenu-open li {
+	display:block;
+	margin:0;
+	padding:8px 10px;
+	font-size:0.9em;
+	border-bottom:0px solid #f8f8f8;
+	cursor:pointer
+}
+.dropdown-submenu-open li.no-hover {
+	cursor:default
+}
+.dropdown-submenu-open li:last-child {
+	border:none
+}
+.dropdown-submenu-open li:not(.no-hover):hover {
+	background:#222;
+	transition-duration: .05s;
+	color:#fff
+}
+.dropdown-submenu-open li:hover a {
+	color:#fff;
+	transition-duration: .05s;
+}
+.dropdown-submenu-open a {
+	text-decoration:none;
+	color:#3b3e47;
+	transition-duration: .05s;
+}
+.dropdown-submenu-open a:focus {
+	text-decoration:underline
+}
+.dropdown-menu-link-text,.dropdown-menu-link-icon {
+	color:#ced4da;
+	text-decoration:none
+}
+.dropdown-menu-link-text:hover {
+	text-decoration:underline
+}
+td a.dropdown-menu strong {
+	color:#ced4da
+}
+td a.dropdown-menu strong i {
+	color:#ced4da
+}
+td a.dropdown-menu i {
+	color:#ced4da
+}
+td a.dropdown-menu:hover strong {
+	color:#555
+}
+td a.dropdown-menu:hover strong i {
+	color:#555
+}
+td a.dropdown-menu:hover i {
+	color:#ced4da
+}
+.accordion-title {
+	background: #222;
+}
+.accordion-title h3 {
+	display:inline;
+	padding-right:5px;
+	background:#222;
+}
+.accordion-content {
+	margin-top:15px;
+	margin-bottom:25px
+}
+.accordion-toggle {
+	color:#ced4da;
+	text-decoration:none
+}
+.accordion-toggle:focus {
+	color:#ced4da
+}
+.accordion-toggle:hover {
+	color:#999
+}
+.accordion-toggle:before {
+	content:"\f0d7"
+}
+.accordion-collapsed {
+	margin-bottom:25px
+}
+.accordion-collapsed .accordion-toggle:before {
+	content:"\f0da"
+}
+.accordion-collapsed .accordion-content {
+	display:none
+}
+.select2-container--default .select2-selection--single {
+    background-color: #3b4658;
+    border: 1px solid #aaa;
+    border-radius: 4px;
+}
+.select2-container--default .select2-selection--single .select2-selection__rendered {
+    color: #fff;
+    line-height: 28px;
+}
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+    background-color: #3b4658;
+    color: white;
+}
+.select2-container--default .select2-results>.select2-results__options {
+    max-height: 200px;
+    overflow-y: auto;
+    background-color: #3b4658;
+}
+.select2-container--default .select2-results__option[aria-selected="true"] {
+    background-color: #4e5663!important;
+    color: #fff!important;
+}
+#select-dropdown-menu {
+	position:absolute;
+	display:block;
+	z-index:1000;
+	min-width:160px;
+	padding:5px 0;
+	background:#3b4658;
+	list-style:none;
+	border:0px solid #ccc;
+	border-radius:3px;
+	box-shadow:0 6px 12px rgba(0,0,0,0.175);
+	overflow-x: hidden;
+}
+.select-dropdown-menu-item {
+	white-space:nowrap;
+	overflow:hidden;
+	padding:3px 10px;
+	color:#ced4da;
+	cursor:pointer;
+	border-bottom:0px solid #f8f8f8;
+	line-height:1.5em;
+	font-weight:400
+}
+.select-dropdown-menu-item.active {
+	color:#fff;
+	background:#428bca
+}
+.select-dropdown-menu-item:last-child {
+	border:none
+}
+.select-dropdown-input-container {
+	position:relative;
+	border:0px solid #ccc;
+	border-radius:5px;
+	background-color:#fff
+}
+.select-dropdown-input-container input.select-dropdown-input {
+	margin:0 0 0 5px;
+	border:none;
+	height:23px
+}
+.select-dropdown-input-container input.select-dropdown-input:focus {
+	border:none;
+	box-shadow:none
+}
+.select-dropdown-input-container .select-dropdown-chevron {
+	color:#555;
+	position:absolute;
+	top:4px;
+	right:5px;
+	cursor:pointer
+}
+.select-dropdown-input-container .select-loading-icon {
+	color:#555;
+	position:absolute;
+	top:4px;
+	right:5px;
+}
+#suggest-menu {
+	position:absolute;
+	display:block;
+	z-index:1000;
+	min-width:160px;
+	padding:5px 0;
+	background:#fff;
+	list-style:none;
+	border:0px solid #ccc;
+	border-radius:3px;
+	box-shadow:0 6px 12px rgba(0,0,0,0.175)
+}
+.suggest-menu-item {
+	white-space:nowrap;
+	padding:3px 10px;
+	color:#ced4da;
+	font-weight:bold;
+	cursor:pointer
+}
+.suggest-menu-item.active {
+	color:#fff;
+	background:#428bca
+}
+.suggest-menu-item.active small {
+	color:#fff
+}
+.suggest-menu-item small {
+	color:#999;
+	font-weight:normal
+}
+#modal-overlay {
+	position:fixed;
+	top:0;
+	left:0;
+	width:100%;
+	height:100%;
+	background:rgba(0,0,0,0.9);
+	overflow:auto;
+	z-index:100
+}
+#modal-box {
+	position:fixed;
+	max-height:calc(100% - 30px);
+	top:0%;
+	padding: 20px;
+	left:50%;
+	transform:translateX(-50%);
+	background:#252525;
+	overflow:auto;
+	border-radius:5px
+}
+#modal-content {
+	padding:0 5px 5px
+}
+#modal-header {
+	text-align:right;
+	padding-right:5px
+}
+#modal-close-button {
+	color:#ced4da
+}
+#modal-close-button:hover {
+	color:#b94a48
+}
+.pagination {
+	text-align:center;
+	font-size:0.9em
+}
+.pagination-showing {
+	margin-right:5px;
+	padding-right:5px;
+	border-right:0px solid #999
+}
+.pagination-next {
+	margin-left:5px
+}
+.pagination-previous {
+	margin-right:5px
+}
+header {
+	border-bottom: none;
+	box-shadow: 0px 1px 3px 0 rgba(46,61,73,.12);
+	padding: 15px 10px;
+	margin-bottom: 15px;
+	background: #303030;
+}
+.header img {
+  float: left;
+}
+.header h2 {
+  position: relative;
+  color:#ced4da;
+  top: 16px;
+  left: 10px;
+  margin: 0;
+}
+header .title-container {
+	flex:1;
+	min-width:300px
+}
+@media (max-width: 480px) {
+	header .title-container {
+		order:3
+	}
+}
+header .board-selector-container {
+	min-width:320px;
+	display:flex;
+	align-items:center
+}
+@media (max-width: 480px) {
+	header .board-selector-container {
+		order:2;
+		min-width:300px
+	}
+	header .board-selector-container input[type=text] {
+		max-width:280px
+	}
+}
+header .menus-container {
+	min-width:120px;
+	display:flex;
+	align-items:center;
+	justify-content:flex-end
+}
+@media (max-width: 480px) {
+	header .menus-container {
+		order:1;
+		margin-bottom:5px;
+		margin-left:auto
+	}
+}
+header h1 {
+	font-size:1.33em!important;
+}
+header h1 .tooltip {
+	opacity:0.3;
+	font-size:0.7em
+}
+a i.web-notification-icon {
+	color:#00bc8c
+}
+a i.web-notification-icon:focus,a i.web-notification-icon:hover {
+	color:#000
+}
+.logo a {
+	opacity:0.5;
+	color:#d40000;
+	text-decoration:none
+}
+.logo span {
+	color:#ced4da
+}
+.logo a:hover {
+	opacity:0.8;
+	color:#ced4da
+}
+.logo a:focus span,.logo a:hover span {
+	color:#d40000
+}
+.page-header {
+	margin-bottom:20px
+}
+.page-header .dropdown {
+	padding-right:10px
+}
+.page-header h2 {
+	margin:0;
+	padding:0;
+	font-weight:bold;
+	border-bottom:0px dotted #ccc
+}
+.page-header h2 a {
+	color:#ced4da;
+	text-decoration:none
+}
+.page-header h2 a:focus,.page-header h2 a:hover {
+	color:#999
+}
+.page-header ul {
+	text-align:left;
+	margin-top:5px;
+	display:inline-block
+}
+.page-header li {
+	display:inline;
+	padding-right:15px
+}
+@media (max-width: 480px) {
+	.page-header li {
+		display:block;
+		line-height:1.5em
+	}
+}
+.page-header li.active a {
+	color:#ced4da;
+	text-decoration:none;
+	font-weight:bold
+}
+.page-header li.active a:hover,.page-header li.active a:focus {
+	text-decoration:underline
+}
+.menu-inline {
+	margin-bottom:5px
+}
+.menu-inline li {
+	display:inline;
+	padding-right:15px
+}
+.menu-inline li .active a {
+	font-weight:bold;
+	color:#000;
+	text-decoration:none
+}
+.sidebar-container {
+	height:100%;
+	display:flex;
+	flex-flow:row
+}
+@media (max-width: 768px) {
+	.sidebar-container {
+		flex-flow:wrap
+	}
+}
+.sidebar-content {
+	padding-left:10px;
+	flex:1 100%;
+	max-width:85%;
+	overflow-wrap:break-word
+}
+@media (max-width: 768px) {
+	.sidebar-content {
+		padding-left:0;
+		order:1;
+		max-width:100%
+	}
+}
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
+	.sidebar-content {
+		max-width:75%
+	}
+}
+.sidebar {
+	max-width:25%;
+	min-width:230px;
+	background-color: #252525;
+	padding: 20px;
+}
+@media (max-width: 768px) {
+	.sidebar {
+		flex:1 auto;
+		order:2
+	}
+}
+.sidebar h2 {
+	margin-top:0
+}
+.sidebar>ul a {
+	text-decoration:none;
+	color:#ced4da;
+	font-weight:300
+}
+.sidebar>ul a:hover {
+	color:#ced4da
+}
+.sidebar>ul li {
+	list-style-type:none;
+	line-height:35px;
+	border-bottom:0px dotted #efefef;
+	padding-left:13px
+}
+.sidebar>ul li:hover {
+	border-left:5px solid #00bc8c;
+	padding-left:8px
+}
+.sidebar>ul li.active {
+	border-left:5px solid #00bc8c;
+	padding-left:8px
+}
+.sidebar>ul li.active a {
+	color:#ced4da;
+	font-weight:bold
+}
+.sidebar-icons>ul li {
+	padding-left:10px
+}
+.sidebar-icons>ul li:hover,.sidebar-icons>ul li.active {
+	padding-left: 10px;
+	border-left: none;
+	background-color: #3b404b;
+}
+.sidebar>ul li.active a:focus,.sidebar>ul li.active a:hover {
+	color:#ced4da
+}
+.sidebar>ul li:last-child {
+	margin-bottom:15px
+}
+.avatar img {
+	vertical-align:bottom
+}
+.avatar-left {
+	float:left;
+	margin-right:10px
+}
+.avatar-inline {
+	display:inline-block;
+	margin-right:3px
+}
+.avatar-48 img,.avatar-48 div {
+	border-radius:30px
+}
+.avatar-48 .avatar-letter {
+	line-height:48px;
+	width:48px;
+	font-size:25px
+}
+.avatar-20 img,.avatar-20 div {
+	border-radius:10px
+}
+.avatar-20 .avatar-letter {
+	line-height:20px;
+	width:20px;
+	font-size:11px
+}
+.avatar-letter {
+	color:#fff;
+	text-align:center
+}
+#file-dropzone,#screenshot-zone {
+	position:relative;
+	border:2px dashed #ccc;
+	width:99%;
+	height:250px;
+	overflow:auto
+}
+#file-dropzone-inner,#screenshot-inner {
+	position:absolute;
+	left:0;
+	bottom:48%;
+	width:100%;
+	text-align:center;
+	color:#aaa
+}
+#screenshot-zone.screenshot-pasted {
+	border:2px solid #ced4da
+}
+#file-list {
+	margin:20px
+}
+#file-list li {
+	list-style-type:none;
+	padding-top:8px;
+	padding-bottom:8px;
+	border-bottom:0px dotted #ddd;
+	width:95%
+}
+#file-list li .file-error {
+	font-weight:bold;
+	color:#b94a48
+}
+.file-thumbnails {
+	display:-webkit-flex;
+	display:flex;
+	-webkit-flex-direction:row;
+	flex-direction:row;
+	-webkit-flex-wrap:wrap;
+	flex-wrap:wrap;
+	-webkit-justify-content:flex-start;
+	justify-content:flex-start
+}
+.file-thumbnail {
+	width:250px;
+	border:0px solid #efefef;
+	border-radius:5px;
+	margin-bottom:20px;
+	box-shadow:4px 2px 10px -6px rgba(0,0,0,0.55);
+	margin-right:15px
+}
+.file-thumbnail img {
+	cursor:pointer;
+	border-top-left-radius:5px;
+	border-top-right-radius:5px
+}
+.file-thumbnail img:hover {
+	opacity:0.5
+}
+.file-thumbnail-content {
+	padding-left:8px;
+	padding-right:8px
+}
+.file-thumbnail-title {
+	font-weight:700;
+	font-size:0.9em;
+	color:#555;
+	overflow:hidden;
+	text-overflow:ellipsis
+}
+.file-thumbnail-description {
+	font-size:0.8em;
+	color:#999;
+	margin-top:8px;
+	margin-bottom:5px
+}
+.file-viewer {
+	position:relative
+}
+.file-viewer img {
+	max-width:95%;
+	max-height:85%;
+	margin-top:10px
+}
+.color-picker {
+	width:180px
+}
+.color-picker-option {
+	height:25px
+}
+.color-picker-square {
+	display:inline-block;
+	width:18px;
+	height:18px;
+	margin-right:5px;
+	border:0px solid #000
+}
+.color-picker-label {
+	display:inline-block;
+	vertical-align:bottom;
+	padding-bottom:3px
+}
+.filter-box {
+	max-width:1024px
+}
+.action-menu {
+	color:#ced4da;
+	text-decoration:none
+}
+.action-menu:hover,.action-menu:focus {
+	text-decoration:underline
+}
+.js-project-creation-options {
+	max-width:500px;
+	border-left:1px solid #6e727b;
+	margin-top:20px;
+	padding-left:15px;
+	padding-bottom:5px;
+	padding-top:5px
+}
+.project-overview-columns {
+	display:-webkit-flex;
+	display:flex;
+	-webkit-flex-direction:row;
+	flex-direction:row;
+	-webkit-flex-wrap:wrap;
+	flex-wrap:wrap;
+	-webkit-align-items:center;
+	align-items:center;
+	-webkit-justify-content:center;
+	justify-content:center;
+	margin-bottom:20px;
+	font-size:1.4em
+}
+@media (max-width: 480px) {
+	.project-overview-columns {
+		display:block
+	}
+}
+.project-overview-column {
+	text-align:center;
+	margin-right:3%;
+	margin-top:5px;
+	padding:3px 15px 3px 15px;
+	border:1px dashed #999
+}
+@media (max-width: 480px) {
+	.project-overview-column {
+		text-align:left
+	}
+}
+.project-overview-column small {
+	color:#e5e5e5
+}
+.project-overview-column strong {
+	color:#eee;
+	display:block
+}
+@media (max-width: 480px) {
+	.project-overview-column strong {
+		display:inline
+	}
+}
+.project-header {
+	margin-bottom:8px
+}
+.project-header .dropdown-component {
+	margin-top:4px;
+	margin-right:5px;
+	float:left
+}
+@media (max-width: 768px) {
+	.project-header .dropdown-component {
+		float:none
+	}
+}
+.project-header .views-switcher-component {
+	margin-top:4px;
+	float:left
+}
+@media (max-width: 768px) {
+	.project-header .views-switcher-component {
+		float:none;
+		margin-bottom:10px
+	}
+}
+.project-header .filter-box-component form {
+	margin:0
+}
+.views {
+	margin-right:10px;
+	margin-top:1px;
+	font-size:0.9em
+}
+@media (max-width: 560px) {
+	.views {
+		width:100%
+	}
+}
+@media (max-width: 768px) {
+	.views {
+		margin-top:10px;
+		font-size:1em
+	}
+}
+@media (max-width: 480px) {
+	.views {
+		margin-top:5px
+	}
+}
+.views li {
+	white-space:nowrap;
+	background:rgba(147,128,108,0.1);
+	border:0px solid #ddd;
+	border-right:none;
+	padding:4px 8px;
+	display:inline
+}
+@media (max-width: 560px) {
+	.views li {
+		display:block;
+		margin-top:5px;
+		border-radius:5px;
+		border:0px solid #ddd
+	}
+}
+.views li.active a {
+	font-weight:bold;
+	color:#00bc8c;
+	text-decoration:none
+}
+.views li:first-child {
+	border-top-left-radius:5px;
+	border-bottom-left-radius:5px
+}
+.views li:last-child {
+	border-right:0px solid #ddd;
+	border-top-right-radius:5px;
+	border-bottom-right-radius:5px
+}
+.views a {
+	color:#ced4da;
+	text-decoration:none
+}
+.views a:hover {
+	color:#fff;
+	text-decoration:none;
+}
+.dashboard-project-stats small {
+	margin-right:10px;
+	color:#999
+}
+.dashboard-table-link {
+	font-weight:bold;
+	color:#000;
+	text-decoration:none
+}
+.dashboard-table-link:focus,.dashboard-table-link:hover {
+	color:#999
+}
+.public-board {
+	margin-top:5px
+}
+.public-task {
+	max-width:800px;
+	margin:5px auto 0
+}
+#board-container {
+	overflow-x:auto
+}
+#board {
+	table-layout:fixed;
+	margin-bottom:0
+}
+#board th.board-column-header {
+	width:240px
+}
+#board td {
+	vertical-align:top
+}
+.board-container-compact {
+	overflow-x:initial
+}
+@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+	.board-container-compact #board {
+		table-layout:auto
+	}
+}
+#board th.board-column-header.board-column-compact {
+	width:initial
+}
+.board-column-collapsed {
+	display:none
+}
+td.board-column-task-collapsed {
+	font-weight:bold;
+	background-color:#222
+}
+#board th.board-column-header-collapsed {
+	width:28px;
+	min-width:28px;
+	text-align:center;
+	overflow:hidden
+}
+.board-rotation-wrapper {
+	position:relative;
+	padding:8px 4px;
+	min-height:150px;
+	overflow:hidden
+}
+.board-rotation {
+	white-space:nowrap;
+	-webkit-backface-visibility:hidden;
+	-webkit-transform:rotate(90deg);
+	-moz-transform:rotate(90deg);
+	-ms-transform:rotate(90deg);
+	transform:rotate(90deg);
+	-webkit-transform-origin:0 100%;
+	-moz-transform-origin:0 100%;
+	-ms-transform-origin:0 100%;
+	transform-origin:0 100%
+}
+.board-column-title .dropdown-menu {
+	text-decoration:none
+}
+.board-add-icon {
+	float:left;
+	padding:0 5px
+}
+.board-add-icon i {
+	text-decoration:none;
+	color:#00bc8c;
+	font-size:1.4em
+}
+.board-add-icon i:focus,.board-add-icon i:hover {
+	text-decoration:none;
+	color:#20c997
+}
+.board-column-header-task-count {
+	color:#999;
+	font-weight:normal
+}
+a.board-swimlane-toggle {
+	text-decoration:none
+}
+a.board-swimlane-toggle:hover,a.board-swimlane-toggle:focus {
+	color:#000;
+	text-decoration:none;
+	border:none
+}
+.board-task-list {
+	min-height:60px
+}
+.board-task-list .task-board:last-child {
+	margin-bottom:0
+}
+.board-task-list-limit {
+	background-color:#DF5353
+}
+.draggable-item {
+	cursor:pointer;
+	user-select:none;
+	-webkit-user-select:none;
+	-moz-user-select:none
+}
+.draggable-placeholder {
+	border:2px dashed #000;
+	background:#fafafa;
+	height:70px;
+	margin-bottom:10px
+}
+div.draggable-item-selected {
+	border:0px solid #000
+}
+.task-board-sort-handle {
+	float:left;
+	padding-right:5px
+}
+.task-board {
+	position:relative;
+	margin-bottom:4px;
+	border:2px solid;
+	padding:10px;
+	word-wrap:break-word;
+	font-size:0.9em;
+	border-radius:6px;
+	background-color:#252525!important;
+}
+div.task-board-recent {
+	border-width:2px
+}
+div.task-board-status-closed {
+	user-select:none;
+	border:0px dotted #555
+}
+.task-board a {
+	color:#00bc8c;
+	text-decoration:none
+}
+.task-board-collapsed {
+	overflow:hidden;
+	white-space:nowrap;
+	text-overflow:ellipsis
+}
+.task-board-title {
+	margin-top:5px;
+	margin-bottom:8px
+}
+.task-board-title a:hover {
+	text-decoration:underline
+}
+.task-board-saving-state {
+	opacity:0.3
+}
+.task-board-saving-icon {
+	position:absolute;
+	margin:auto;
+	width:100%;
+	text-align:center;
+	color:#000
+}
+.task-board-avatars {
+	text-align:right;
+	float:right
+}
+.task-board-change-assignee {
+	cursor:pointer
+}
+.task-board-change-assignee:hover {
+	opacity:0.6
+}
+.task-list-avatars {
+	display:inline-block;
+	float:left
+}
+.c3-chart-arc path {
+    stroke: #fff0;
+}
+@media (max-width: 768px) {
+	.task-list-avatars {
+		float:none;
+		display:block
+	}
+}
+.task-list-avatars .task-avatar-assignee {
+	font-weight:300;
+	color:#999
+}
+.task-list-avatars:hover .task-avatar-assignee {
+	font-weight:400;
+	color:#000
+}
+.task-board-icons,.task-list-icons {
+	font-size:0.8em;
+	text-align:right
+}
+.task-board-icons a,.task-list-icons a {
+	text-decoration:none
+}
+.task-board-icons a:hover,.task-list-icons a:hover {
+	color:#ced4da
+}
+.task-board-icons a:hover i,.task-list-icons a:hover i {
+	color:#ced4da
+}
+.task-board-icons .task-score,.task-list-icons .task-score {
+	font-weight:bold
+}
+.task-board-icons .flag-milestone,.task-list-icons .flag-milestone {
+	color:green
+}
+.task-board-icons {
+	margin-top:7px
+}
+.task-board-icons a {
+	opacity:0.5;
+}
+.task-board-icons span {
+	opacity:0.5;
+	margin-left:4px;
+	color:#97d2ff;
+}
+.task-board-icons a:hover {
+	opacity:1.0;
+	font-weight:bold
+}
+.task-board-icons .task-board-icons-row {
+	line-height:22px
+}
+.task-list-icons {
+	line-height:22px
+}
+.task-list-icons a,.task-list-icons span,.task-list-icons i {
+	color:#999;
+	opacity:1.0
+}
+.task-list-icons span {
+	margin-left:5px
+}
+@media (max-width: 768px) {
+	.task-list-icons {
+		text-align:left
+	}
+}
+.task-icon-age {
+	display:inline-block
+}
+span.task-icon-age-total {
+	border:0px solid #e5e5e5;
+	padding:1px 3px 1px 3px;
+	border-top-left-radius:3px;
+	border-bottom-left-radius:3px
+}
+span.task-icon-age-column {
+	border:0px solid #e5e5e5;
+	border-left:none;
+	margin-left:-5px;
+	padding:1px 3px 1px 3px;
+	border-top-right-radius:3px;
+	border-bottom-right-radius:3px
+}
+.task-board span.task-icon-age-total,.task-board span.task-icon-age-column {
+	border-color:#666
+}
+.task-board-category-container {
+	text-align:right;
+	margin-top:8px;
+	margin-bottom:8px
+}
+.task-board-category {
+	border:0px solid #555;
+	font-size:0.9em;
+	font-weight:500;
+	color:#000;
+	padding:1px 3px 1px 2px;
+	border-radius:3px
+}
+.task-board-category a:hover {
+	text-decoration:underline
+}
+.task-date {
+	font-weight:500;
+	color:#000
+}
+span.task-date-today {
+	opacity:1.0;
+	color:#00bc8c
+}
+span.task-date-overdue {
+	opacity:1.0;
+	color:#b94a48
+}
+.task-tags li {
+	display:inline-block;
+	margin:3px 3px 0 0;
+	padding:1px 3px 1px 3px;
+	border:0px solid #ced4da;
+	border-radius:4px;
+	background:#20c997;
+}
+.select2-container--default .select2-results__option[aria-selected="true"] {
+    background-color: #e5e5e5;
+    color: #333;
+} 
+.task-summary-container .task-tags {
+	margin-top:10px
+}
+.task-list-tag {
+	background:#20c997;
+	border-color:#20c997;
+	padding-left: 3px;
+}
+#task-summary {
+	margin-bottom:15px
+}
+#task-summary h2 {
+	color:#f7f7f7;
+	font-size:1.6em;
+	margin-top:0;
+	padding-top:0
+}
+.task-summary-container {
+	border: 2px solid;
+	border-radius: 8px;
+	padding: 10px;
+	background-color:#29303e!important;
+}
+.task-summary-columns {
+	display:flex;
+	flex-flow:row;
+	justify-content:space-between
+}
+@media (max-width: 768px) {
+	.task-summary-columns {
+		flex-flow:column
+	}
+}
+.task-summary-column {
+	color:#ced4da
+}
+.task-summary-column span {
+	color:#ced4cb
+}
+.task-summary-column li {
+	line-height:23px
+}
+#external-task-view {
+	padding:10px;
+	margin-top:10px;
+	margin-bottom:10px;
+	border:0px dotted #ccc
+}
+.task-form-container {
+	box-sizing:border-box;
+	display:flex;
+	flex-wrap:wrap
+}
+.task-form-container>* {
+	box-sizing:border-box
+}
+.task-form-container>* {
+	width:1%
+}
+.task-form-main-column {
+	width:60%
+}
+@media (max-width: 1000px) {
+	.task-form-main-column {
+		width:100%
+	}
+}
+.task-form-main-column input[type="text"] {
+	width:700px;
+	max-width:99%
+}
+.task-form-secondary-column {
+	max-width:250px;
+	min-width:200px;
+	max-height:600px;
+	padding-left:10px;
+	overflow:auto;
+	width:20%
+}
+@media (max-width: 1000px) {
+	.task-form-secondary-column {
+		width:100%;
+		max-width:99%;
+		max-height:none
+	}
+}
+@media (max-width: 768px) {
+	.task-form-secondary-column {
+		padding-left:0
+	}
+}
+.task-form-secondary-column label:first-child {
+	margin-top:0
+}
+@media (max-width: 1000px) {
+	.task-form-secondary-column label:first-child {
+		margin-top:10px
+	}
+}
+.task-form-bottom {
+	width:100%
+}
+.comment-sorting {
+	text-align:right
+}
+.comment-sorting a {
+	color:#f7f7f7;
+	font-weight:normal;
+	text-decoration:none
+}
+.comment-sorting a:hover {
+	color:#999
+}
+.comment {
+	padding:5px;
+	margin-bottom:15px
+}
+.comment-title {
+	border-bottom:0px dotted #eee;
+	margin-left:55px
+}
+.comment-date {
+	color:#999;
+	font-weight:200
+}
+.comment-actions {
+	text-align:right
+}
+.comment-content {
+	margin-left:55px
+}
+.comments .text-editor textarea {
+	height:90px
+}
+.comments .text-editor .text-editor-preview-area {
+	height:90px
+}
+.comments .comment-highlighted {
+	background-color:#252525;
+	border:2px solid #ffeb8e
+}
+.comments .comment-highlighted:hover {
+	background-color:#252525
+}
+.comments .comment:hover {
+	background:#252525
+}
+.comments .comment:nth-child(even):not(.comment-highlighted) {
+	background:#222
+}
+.comments .comment:nth-child(even):not(.comment-highlighted):hover {
+	background:#252525
+}
+.subtask-cell {
+	padding:4px 10px;
+	border-top:0px dotted #222;
+	border-left:0px dotted #222;
+	display:table-cell;
+	vertical-align:middle;
+}
+.subtask-cell a {
+	color:#ced4da;
+	text-decoration:none
+}
+.subtask-cell a:hover,.subtask-cell a:focus {
+	color:#00bc8c;
+}
+.subtask-cell:first-child {
+	border-left:none
+}
+@media (max-width: 768px) {
+	.subtask-cell {
+		width:90%;
+		display:block;
+		border-left:none
+	}
+}
+.task-list-subtasks {
+	display:table;
+	width:100%
+}
+@media (max-width: 768px) {
+	.task-list-subtasks {
+		display:block
+	}
+}
+.task-list-subtask {
+	display:table-row
+}
+@media (max-width: 768px) {
+	.task-list-subtask {
+		display:block
+	}
+}
+@media (max-width: 768px) {
+	.subtask-assignee,.subtask-time-tracking-cell {
+		display:none
+	}
+}
+.task-links-table td {
+	vertical-align:middle
+}
+.task-links-task-count {
+	color:#999;
+	font-weight:normal
+}
+.task-link-closed {
+	text-decoration:line-through
+}
+.text-editor {
+	margin-top:10px
+}
+.text-editor-toolbar {
+	margin-bottom: 10px;
+}
+.text-editor a {
+	font-size:1em;
+	color:#999;
+	text-decoration:none;
+	margin-right:10px
+}
+.text-editor a:hover {
+	color:#00bc8c
+}
+.text-editor .text-editor-preview-area {
+	border:0px solid #222;
+	width:700px;
+	max-width:99%;
+	height:250px;
+	overflow:auto;
+	padding:2px
+}
+.text-editor textarea {
+	width:700px;
+	max-width:98%;
+	height:250px
+}
+.markdown {
+	line-height:1.4em
+}
+.markdown h1 {
+	margin-top:5px;
+	margin-bottom:10px;
+	font-weight:bold
+}
+.markdown h2 {
+	font-weight:bold
+}
+.markdown p {
+	margin-bottom:10px
+}
+.markdown ol,.markdown ul {
+	margin-left:25px;
+	margin-top:10px;
+	margin-bottom:10px
+}
+.markdown pre {
+	background:#242729;
+	padding:10px;
+	border-radius:5px;
+	border:0px solid #ddd;
+	overflow:auto;
+	overflow-wrap:initial;
+	color:#555
+}
+.markdown blockquote {
+	font-style:italic;
+	border-left:3px solid #ddd;
+	padding-left:10px;
+	margin-bottom:10px;
+	margin-left:20px
+}
+.markdown img {
+	display:block;
+	max-width:80%;
+	margin-top:10px
+}
+.documentation {
+	margin:0 auto;
+	padding:20px;
+	max-width:850px;
+	background:#fefefe;
+	border:0px solid #ccc;
+	border-radius:5px;
+	color:#555
+}
+.documentation img {
+	border:0px solid #ced4da
+}
+.documentation h1 {
+	text-decoration:none;
+	margin-bottom:30px
+}
+.documentation h2 {
+	text-decoration:none;
+	border-bottom:0px solid #ccc;
+	margin-bottom:25px
+}
+.documentation li {
+	line-height:30px
+}
+.panel {
+	border-radius:4px;
+	padding:8px 35px 8px 10px;
+	margin-top:10px;
+	margin-bottom:15px;
+	border:0px solid #ddd;
+	color:#ced4da;
+	background-color:#252525;
+	overflow:auto
+}
+.panel li {
+	list-style-type:square;
+	margin-left:20px;
+	line-height:1.35em
+}
+.activity-event {
+	margin-bottom:15px;
+	padding:10px
+}
+.activity-event:nth-child(even) {
+	background:#252525
+}
+.activity-event:hover {
+	background:#252525
+}
+.activity-date {
+	margin-left:10px;
+	font-weight:normal;
+	color:#999
+}
+.activity-content {
+	margin-left:55px
+}
+.activity-title {
+	font-weight:bold;
+	color:#ced4da;
+	border-bottom:0px dotted #efefef
+}
+.activity-description {
+	color:#f7f7f7;
+	margin-top:10px
+}
+@media (max-width: 480px) {
+	.activity-description {
+		overflow:auto
+	}
+}
+.activity-description li {
+	list-style-type:circle
+}
+.activity-description ul {
+	margin-top:10px;
+	margin-left:20px
+}
+.user-mention-link {
+	font-weight:bold;
+	color:#5897fb;
+	text-decoration:none
+}
+.user-mention-link:hover {
+	color:#fff
+}
+.image-slideshow-overlay {
+	position:fixed;
+	top:0;
+	left:0;
+	width:100%;
+	height:100%;
+	background:rgba(0,0,0,0.95);
+	overflow:auto;
+	z-index:100
+}
+.image-slideshow-overlay img {
+	display:block;
+	margin:auto;
+	max-width: 100%;
+}
+.image-slideshow-overlay figcaption {
+	color:#fff;
+	opacity:0.7;
+	position:absolute;
+	bottom:5px;
+	right:15px
+}
+.slideshow-icon {
+	color:#fff;
+	position:absolute;
+	font-size:2.5em;
+	opacity:0.6
+}
+.slideshow-icon:hover {
+	opacity:0.9;
+	cursor:pointer
+}
+.slideshow-previous-icon {
+	left:10px;
+	top:45%
+}
+.slideshow-next-icon {
+	right:10px;
+	top:45%
+}
+.slideshow-close-icon {
+	right:10px;
+	top:10px;
+	font-size:1.4em
+}
+.slideshow-download-icon {
+	left:10px;
+	bottom:10px;
+	font-size:1.3em
+}
+.list-item-links,.list-item-actions {
+	display:inline-block;
+	float:left;
+	margin-left:10px
+}
+.list-item-links a {
+	margin:0
+}
+.list-item-action-hidden {
+	display:none
+}
+.bulk-change-checkbox {
+	float:left
+}
+.bulk-change-inputs {
+	float:left;
+	padding-left:10px
+}
+.bulk-change-inputs label {
+	margin-top:0;
+	margin-bottom:3px
+}
+/* style plugin-gantt */
+div.ganttview-hzheader-month, div.ganttview-hzheader-day, div.ganttview-vtheader, div.ganttview-vtheader-item-name, div.ganttview-vtheader-series, div.ganttview-grid, div.ganttview-grid-row-cell {
+    float: left;
+}
+
+div.ganttview-hzheader-month, div.ganttview-hzheader-day {
+    text-align: center;
+}
+
+div.ganttview-grid-row-cell.last, div.ganttview-hzheader-day.last, div.ganttview-hzheader-month.last {
+    border-right: none;
+}
+
+div.ganttview {
+    border: 1px solid #999;
+}
+
+div.ganttview-hzheader-month {
+    width: 60px;
+    height: 20px;
+    border-right: 1px solid #d0d0d0;
+    line-height: 20px;
+    overflow: hidden;
+}
+
+div.ganttview-hzheader-day {
+    width: 20px;
+    height: 20px;
+    border-right: 1px solid #f0f0f0;
+    border-top: 1px solid #d0d0d0;
+    line-height: 20px;
+    color: #f5f5f5!important;
+}
+
+div.ganttview-vtheader {
+    margin-top: 41px;
+    width: 400px;
+    overflow: hidden;
+    background-color: #fff;
+}
+
+div.ganttview-vtheader-item {
+    color: #555;
+}
+
+div.ganttview-vtheader-series-name {
+    width: 400px;
+    height: 31px;
+    line-height: 31px;
+	padding-left: 3px;
+	color: #eee!important;
+	background: #2f3948!important;
+    border-top: 1px solid #d0d0d0;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+div.ganttview-vtheader-series-name a {
+    color: #f5f5f5!important;
+    text-decoration: none;
+}
+
+div.ganttview-vtheader-series-name a:hover {
+    color: #333;
+    text-decoration: underline;
+}
+
+div.ganttview-vtheader-series-name a i {
+    color: #f5f5f5!important;
+}
+
+div.ganttview-vtheader-series-name a:hover i {
+    color: #eee!important;
+}
+
+div.ganttview-slide-container {
+    overflow: auto;
+    border-left: 1px solid #999;
+}
+
+div.ganttview-grid-row-cell {
+    width: 20px;
+    height: 31px;
+    border-right: 1px solid #f0f0f0;
+    border-top: 1px solid #f0f0f0;
+}
+
+div.ganttview-grid-row-cell.ganttview-weekend {
+    background-color: #2f3948!important;
+}
+
+div.ganttview-grid-row-cell.ganttview-today {
+    background-color: #0979b6!important;
+}
+
+div.ganttview-blocks {
+    margin-top: 40px;
+}
+
+div.ganttview-block-container {
+    height: 28px;
+    padding-top: 4px;
+}
+
+div.ganttview-block {
+    position: relative;
+    height: 25px;
+    background-color: #E5ECF9;
+    border: 1px solid #c0c0c0;
+    border-radius: 3px;
+}
+
+.ganttview-block-movable {
+    cursor: move;
+}
+
+div.ganttview-block-text {
+    position: absolute;
+    height: 12px;
+    font-size: 0.7em;
+    color: #666;
+    padding: 2px 3px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+div.ganttview-block div.ui-resizable-handle.ui-resizable-s {
+    bottom: 0;
+}
+
+div.ganttview-progress-bar {
+    z-index: 0;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    opacity: 0.4;
+}
diff --git a/plugins/Customizer/Assets/css/themes/Github.css b/plugins/Customizer/Assets/css/themes/Github.css
new file mode 100644
index 00000000..5fe5a3d3
--- /dev/null
+++ b/plugins/Customizer/Assets/css/themes/Github.css
@@ -0,0 +1,3260 @@
+/*!
+ * Derived from Moon - Theme for Kanboard by kenlog
+ * Licensed under the MIT license - Moon/LICENSE
+ * https://github.com/kenlog/Moon
+ * Copyright (c) 2018 Valentino Pesce - https://iltuobrand.it
+ */
+
+h1,
+li,
+ul,
+ol,
+table,
+tr,
+td,
+th,
+p,
+blockquote,
+body {
+    margin: 0;
+    padding: 0;
+    font-size: 100%
+}
+
+body {
+    padding-bottom: 10px;
+    color: #8d9498;
+    background-color: #fefefe;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    text-rendering: optimizeLegibility
+}
+
+::selection{background:rgba(113,113,113,0.5);color:#ffffff}::-moz-selection{background:rgba(113,113,113,0.5);color:#ffffff}
+
+small {
+    font-size: 0.8em
+}
+
+hr {
+    border: 0;
+    height: 0;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.3)
+}
+
+.page {
+    margin-left: 10px;
+    margin-right: 10px
+}
+
+.margin-top {
+    margin-top: 20px
+}
+
+.margin-bottom {
+    margin-bottom: 20px
+}
+
+.pull-right {
+    text-align: right
+}
+
+ul.no-bullet li {
+    list-style-type: none;
+    margin-left: 0
+}
+
+#app-loading-icon {
+    position: fixed;
+    right: 3px;
+    bottom: 3px
+}
+
+.assign-me {
+    vertical-align: bottom
+}
+
+a {
+    color: #0366d6;
+    border: none;
+    text-decoration: none;
+}
+
+a:focus {
+    outline: 0;
+    color: #0366d6;
+    text-decoration: none
+}
+
+a:hover {
+    color: #333;
+    text-decoration: none
+}
+
+a .fa {
+    padding-right: 3px;
+    text-decoration: none;
+    color: #acafb1
+}
+
+h1,
+h2,
+h3 {
+    font-weight: normal;
+    color: #333
+}
+
+h1 {
+    font-size: 1.5em
+}
+
+h2 {
+    font-size: 1.4em;
+    margin-bottom: 10px
+}
+
+h3 {
+    margin-top: 10px;
+    font-size: 1.2em
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    margin-bottom: 20px
+}
+
+table.table-fixed {
+    table-layout: fixed;
+    white-space: nowrap
+}
+
+table.table-fixed th {
+    overflow: hidden
+}
+
+table.table-fixed td {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis
+}
+
+table.table-small {
+    font-size: 0.8em
+}
+
+table.table-striped tr:nth-child(odd) {
+    background: #fefefe
+}
+
+@media (max-width: 768px) {
+    table.table-scrolling {
+        overflow-x: auto;
+        display: inline-block;
+        vertical-align: top;
+        max-width: 100%;
+        white-space: nowrap
+    }
+}
+
+table th {
+    text-align: left;
+    padding: 0.5em 5px;
+    border: 1px solid #eee;
+    background: #fafbfc;
+}
+
+table th a {
+    text-decoration: none;
+    color: #333
+}
+
+table th a:focus,
+table th a:hover {
+    text-decoration: underline
+}
+
+table td {
+    border: 1px solid #f5f5f5;
+    padding: 0.5em 7px;
+    vertical-align: top
+}
+
+table td li {
+    margin-left: 20px
+}
+
+.column-1 {
+    width: 1%
+}
+
+.column-2 {
+    width: 2%
+}
+
+.column-3 {
+    width: 3%
+}
+
+.column-4 {
+    width: 4%
+}
+
+.column-5 {
+    width: 5%
+}
+
+.column-6 {
+    width: 6%
+}
+
+.column-7 {
+    width: 7%
+}
+
+.column-8 {
+    width: 8%
+}
+
+.column-9 {
+    width: 9%
+}
+
+.column-10 {
+    width: 10%
+}
+
+.column-11 {
+    width: 11%
+}
+
+.column-12 {
+    width: 12%
+}
+
+.column-13 {
+    width: 13%
+}
+
+.column-14 {
+    width: 14%
+}
+
+.column-15 {
+    width: 15%
+}
+
+.column-16 {
+    width: 16%
+}
+
+.column-17 {
+    width: 17%
+}
+
+.column-18 {
+    width: 18%
+}
+
+.column-19 {
+    width: 19%
+}
+
+.column-20 {
+    width: 20%
+}
+
+.column-21 {
+    width: 21%
+}
+
+.column-22 {
+    width: 22%
+}
+
+.column-23 {
+    width: 23%
+}
+
+.column-24 {
+    width: 24%
+}
+
+.column-25 {
+    width: 25%
+}
+
+.column-26 {
+    width: 26%
+}
+
+.column-27 {
+    width: 27%
+}
+
+.column-28 {
+    width: 28%
+}
+
+.column-29 {
+    width: 29%
+}
+
+.column-30 {
+    width: 30%
+}
+
+.column-31 {
+    width: 31%
+}
+
+.column-32 {
+    width: 32%
+}
+
+.column-33 {
+    width: 33%
+}
+
+.column-34 {
+    width: 34%
+}
+
+.column-35 {
+    width: 35%
+}
+
+.column-36 {
+    width: 36%
+}
+
+.column-37 {
+    width: 37%
+}
+
+.column-38 {
+    width: 38%
+}
+
+.column-39 {
+    width: 39%
+}
+
+.column-40 {
+    width: 40%
+}
+
+.column-41 {
+    width: 41%
+}
+
+.column-42 {
+    width: 42%
+}
+
+.column-43 {
+    width: 43%
+}
+
+.column-44 {
+    width: 44%
+}
+
+.column-45 {
+    width: 45%
+}
+
+.column-46 {
+    width: 46%
+}
+
+.column-47 {
+    width: 47%
+}
+
+.column-48 {
+    width: 48%
+}
+
+.column-49 {
+    width: 49%
+}
+
+.column-50 {
+    width: 50%
+}
+
+.column-51 {
+    width: 51%
+}
+
+.column-52 {
+    width: 52%
+}
+
+.column-53 {
+    width: 53%
+}
+
+.column-54 {
+    width: 54%
+}
+
+.column-55 {
+    width: 55%
+}
+
+.column-56 {
+    width: 56%
+}
+
+.column-57 {
+    width: 57%
+}
+
+.column-58 {
+    width: 58%
+}
+
+.column-59 {
+    width: 59%
+}
+
+.column-60 {
+    width: 60%
+}
+
+.column-61 {
+    width: 61%
+}
+
+.column-62 {
+    width: 62%
+}
+
+.column-63 {
+    width: 63%
+}
+
+.column-64 {
+    width: 64%
+}
+
+.column-65 {
+    width: 65%
+}
+
+.column-66 {
+    width: 66%
+}
+
+.column-67 {
+    width: 67%
+}
+
+.column-68 {
+    width: 68%
+}
+
+.column-69 {
+    width: 69%
+}
+
+.column-70 {
+    width: 70%
+}
+
+.column-71 {
+    width: 71%
+}
+
+.column-72 {
+    width: 72%
+}
+
+.column-73 {
+    width: 73%
+}
+
+.column-74 {
+    width: 74%
+}
+
+.column-75 {
+    width: 75%
+}
+
+.column-76 {
+    width: 76%
+}
+
+.column-77 {
+    width: 77%
+}
+
+.column-78 {
+    width: 78%
+}
+
+.column-79 {
+    width: 79%
+}
+
+.column-80 {
+    width: 80%
+}
+
+.column-81 {
+    width: 81%
+}
+
+.column-82 {
+    width: 82%
+}
+
+.column-83 {
+    width: 83%
+}
+
+.column-84 {
+    width: 84%
+}
+
+.column-85 {
+    width: 85%
+}
+
+.column-86 {
+    width: 86%
+}
+
+.column-87 {
+    width: 87%
+}
+
+.column-88 {
+    width: 88%
+}
+
+.column-89 {
+    width: 89%
+}
+
+.column-90 {
+    width: 90%
+}
+
+.column-91 {
+    width: 91%
+}
+
+.column-92 {
+    width: 92%
+}
+
+.column-93 {
+    width: 93%
+}
+
+.column-94 {
+    width: 94%
+}
+
+.column-95 {
+    width: 95%
+}
+
+.column-96 {
+    width: 96%
+}
+
+.column-97 {
+    width: 97%
+}
+
+.column-98 {
+    width: 98%
+}
+
+.column-99 {
+    width: 99%
+}
+
+.column-100 {
+    width: 100%
+}
+
+.draggable-row-handle {
+    cursor: move;
+    color: #dedede
+}
+
+.draggable-row-handle:hover {
+    color: #333
+}
+
+tr.draggable-item-selected {
+    background: #fff;
+    border: 2px solid #666;
+    box-shadow: 4px 2px 10px -4px rgba(0, 0, 0, 0.55)
+}
+
+tr.draggable-item-selected td {
+    border-top: none;
+    border-bottom: none
+}
+
+tr.draggable-item-selected td:first-child {
+    border-left: none
+}
+
+tr.draggable-item-selected td:last-child {
+    border-right: none
+}
+
+.table-stripped tr.draggable-item-hover,
+.table-stripped tr.draggable-item-hover {
+    background: #FEFFF2
+}
+
+.table-list {
+    font-size: 0.85em;
+    margin-bottom: 20px
+}
+
+.table-list-header {
+    background: #f6f8fa;
+    border: 1px solid #d1d5da;
+    border-radius: 3px 3px 0px 0px;
+    line-height: 28px;
+    padding-left: 7px;
+    padding-right: 7px;
+}
+
+.table-list-header a {
+    color: #333;
+    font-weight: 500;
+    text-decoration: none;
+    margin-right: 10px
+}
+
+.table-list-header a:hover,
+.table-list-header a:focus {
+    color: #767676
+}
+
+.table-list-header .table-list-header-count {
+    color: #767676;
+    display: inline-block;
+    float: left
+}
+
+.table-list-header .table-list-header-menu {
+    text-align: right
+}
+
+.table-list-row {
+    padding-left: 7px;
+    padding-right: 7px;
+    border-bottom: 1px solid #e5e5e5;
+    border-right: 1px solid #e5e5e5
+}
+
+.table-list-row.table-border-left {
+    border-left: 1px solid #e5e5e5
+}
+
+.table-list-row:nth-child(odd) {
+    background: #fefefe
+}
+
+.table-list-row:last-child {
+    border-radius: 0 0 5px 5px
+}
+
+.table-list-row:hover {
+    background: #f6f8fa;
+    border-bottom: 1px solid #f6f8fa;
+    border-right: 1px solid #f6f8fa
+}
+
+.table-list-row .table-list-title {
+    font-weight: 500;
+    line-height: 23px
+}
+
+.table-list-row .table-list-title.status-closed {
+    text-decoration: line-through;
+    margin-right: 10px
+}
+
+.table-list-row .table-list-title.status-closed a {
+    font-style: italic
+}
+
+.table-list-row .table-list-title a {
+    color: #333;
+    text-decoration: none
+}
+
+.table-list-row .table-list-title a:hover,
+.table-list-row .table-list-title a:focus {
+    text-decoration: underline
+}
+
+.table-list-row .table-list-details {
+    color: #999;
+    font-weight: 300;
+    line-height: 20px
+}
+
+.table-list-row .table-list-details span {
+    margin-left: 5px
+}
+
+.table-list-row .table-list-details span:first-child {
+    margin-left: 0
+}
+
+.table-list-row .table-list-details li {
+    display: inline;
+    list-style-type: none
+}
+
+.table-list-row .table-list-details li:after {
+    content: ', '
+}
+
+.table-list-row .table-list-details li:last-child:after {
+    content: ''
+}
+
+.table-list-row .table-list-details strong {
+    font-weight: 400;
+    color: #555
+}
+
+.table-list-row .table-list-details-with-icons {
+    float: left
+}
+
+@media (max-width: 768px) {
+    .table-list-row .table-list-details-with-icons {
+        float: none
+    }
+}
+
+.table-list-row .table-list-icons {
+    font-size: 0.8em;
+    text-align: right;
+    line-height: 30px
+}
+
+@media (max-width: 768px) {
+    .table-list-row .table-list-icons {
+        text-align: left;
+        line-height: 20px
+    }
+}
+
+.table-list-row .table-list-icons span {
+    margin-left: 5px
+}
+
+.table-list-row .table-list-icons a {
+    text-decoration: none
+}
+
+.table-list-row .table-list-icons a:hover {
+    color: #333
+}
+
+.table-list-row .table-list-icons a:hover i {
+    color: #333
+}
+
+.table-list-category {
+    font-size: 0.9em;
+    font-weight: 500;
+    color: #000;
+    padding: 1px 2px 1px 2px;
+    border-radius: 3px;
+    background: #fcfcfc;
+    border: 1px solid #ccc
+}
+
+.table-list-category a {
+    text-decoration: none;
+    color: #000
+}
+
+.table-list-category a:hover {
+    color: #0366d6
+}
+
+fieldset {
+    border: 1px solid #ddd;
+    margin-top: 10px
+}
+
+legend {
+    font-weight: 500;
+    font-size: 1.2em
+}
+
+label {
+    cursor: pointer;
+    display: block;
+    margin-top: 10px;
+    font-weight: 400
+}
+
+.select2-container--default .select2-selection--multiple .select2-selection__choice {
+    background-color: #f9f9f9;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    cursor: default;
+    float: left;
+    margin-right: 5px;
+    margin-top: 5px;
+    padding: 0 5px;
+}
+
+input[type="number"],
+input[type="date"],
+input[type="email"],
+input[type="password"],
+input[type="text"]:not(.input-addon-field) {
+    color: #999;
+    border: 1px solid #ccc;
+    width: 300px;
+    max-width: 95%;
+    font-size: 1em;
+    height: 25px;
+    border-radius: 3px;
+    padding-bottom: 0;
+    padding-left: 4px;
+    font-family: sans-serif;
+    -webkit-appearance: none;
+    -moz-appearance: none
+}
+
+input[type="number"]::-webkit-input-placeholder,
+input[type="date"]::-webkit-input-placeholder,
+input[type="email"]::-webkit-input-placeholder,
+input[type="password"]::-webkit-input-placeholder,
+input[type="text"]:not(.input-addon-field)::-webkit-input-placeholder {
+    color: #dedede
+}
+
+input[type="number"]::-moz-placeholder,
+input[type="date"]::-moz-placeholder,
+input[type="email"]::-moz-placeholder,
+input[type="password"]::-moz-placeholder,
+input[type="text"]:not(.input-addon-field)::-moz-placeholder {
+    color: #dedede
+}
+
+input[type="number"]:-ms-input-placeholder,
+input[type="date"]:-ms-input-placeholder,
+input[type="email"]:-ms-input-placeholder,
+input[type="password"]:-ms-input-placeholder,
+input[type="text"]:not(.input-addon-field):-ms-input-placeholder {
+    color: #dedede
+}
+
+input[type="number"]:focus,
+input[type="date"]:focus,
+input[type="email"]:focus,
+input[type="password"]:focus,
+input[type="text"]:focus {
+    color: #000;
+    border-color: rgba(82, 168, 236, 0.8);
+    outline: 0;
+    box-shadow: 0 0 0 2px rgba(222,222,222,0.25)
+}
+
+input[type="number"] {
+    width: 70px
+}
+
+input[type="text"]:not(.input-addon-field).form-numeric {
+    width: 70px
+}
+
+input[type="text"]:not(.input-addon-field).form-datetime,
+input[type="text"]:not(.input-addon-field).form-date {
+    width: 150px
+}
+
+input[type="text"]:not(.input-addon-field).form-input-large {
+    width: 400px
+}
+
+input[type="text"]:not(.input-addon-field).form-input-small {
+    width: 150px
+}
+
+textarea:focus {
+    color: #000;
+    border-color: rgba(82, 168, 236, 0.8);
+    outline: 0;
+    box-shadow: 0 0 0 2px rgba(222,222,222,0.25)
+}
+
+.text-editor-toolbar {
+    margin-bottom: 10px!important;
+}
+
+textarea {
+    padding: 4px;
+    border: 1px solid #ccc;
+    width: 400px;
+    max-width: 99%;
+    height: 200px;
+    border-radius: 3px;
+    font-family: sans-serif;
+    font-size: 1em
+}
+
+textarea::-webkit-input-placeholder {
+    color: #dedede
+}
+
+textarea::-moz-placeholder {
+    color: #dedede
+}
+
+textarea:-ms-input-placeholder {
+    color: #dedede
+}
+
+select {
+    font-size: 1.0em;
+    max-width: 95%;
+    border: 1px solid #AAA;
+    color: #555;
+    font-size: inherit;
+    overflow: hidden;
+    border-radius: 3px;
+    padding: 5px 10px;
+    background-color: #fff; 
+}
+
+select:focus {
+    outline: 0
+}
+
+select[multiple] {
+    width: 300px
+}
+
+.tag-autocomplete {
+    width: 400px
+}
+
+span.select2-container {
+    margin-top: 2px
+}
+
+.form-actions {
+    padding-top: 20px;
+    clear: both
+}
+
+.form-required {
+    color: red;
+    padding-left: 5px;
+    font-weight: bold
+}
+
+@media (max-width: 480px) {
+    .form-required {
+        display: none
+    }
+}
+
+input[type="text"].form-max-width {
+    width: 100%
+}
+
+input.form-error,
+textarea.form-error {
+    border: 2px solid #b94a48
+}
+
+input.form-error:focus,
+textarea.form-error:focus {
+    box-shadow: none;
+    border: 2px solid #b94a48
+}
+
+.form-errors {
+    color: #b94a48;
+    list-style-type: none
+}
+
+ul.form-errors li {
+    margin-left: 0
+}
+
+.form-help {
+    font-size: 0.8em;
+    color: brown;
+    margin-bottom: 15px
+}
+
+.form-inline {
+    padding: 0;
+    margin: 0;
+    border: none
+}
+
+.form-inline label {
+    display: inline;
+    padding-right: 3px
+}
+
+.form-inline input,
+.form-inline select {
+    margin: 0 15px 0 0
+}
+
+.form-inline .form-required {
+    display: none
+}
+
+.form-inline .form-actions {
+    display: inline-block
+}
+
+.form-inline .js-submit-buttons-rendered {
+    display: inline-block
+}
+
+.form-inline-group {
+    display: inline
+}
+
+.form-columns {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -webkit-justify-content: flex-start;
+    justify-content: flex-start
+}
+
+.form-columns .form-column {
+    margin-right: 25px;
+    flex-grow: 1
+}
+
+.form-columns fieldset {
+    margin-top: 0
+}
+
+.form-login {
+    max-width: 350px;
+    margin: 5% auto 0
+}
+
+@media (max-width: 480px) {
+    .form-login {
+        margin-left: 5px
+    }
+}
+
+.form-login li {
+    margin-left: 25px;
+    line-height: 25px
+}
+
+.form-login h2 {
+    margin-bottom: 30px;
+    font-weight: bold
+}
+
+.reset-password {
+    margin-top: 20px;
+    margin-bottom: 20px
+}
+
+.reset-password a {
+    color: #999
+}
+
+.input-addon {
+    display: flex
+}
+
+.input-addon-field {
+    flex: 1;
+    font-size: 1em;
+    color: #999;
+    margin: 0;
+    -webkit-appearance: none;
+    -moz-appearance: none
+}
+
+.input-addon-field:first-child {
+    border-radius: 5px 0 0 5px
+}
+
+.input-addon-field:last-child {
+    border-radius: 0 5px 5px 0
+}
+
+.input-addon-item {
+    background-image: linear-gradient(-180deg, #fafbfc 0%, #eff3f6 90%);
+    color: #666;
+    font: inherit;
+    font-weight: normal;
+}
+
+.input-addon-item:first-child {
+    border-radius: 5px 0 0 5px
+}
+
+.input-addon-item:last-child {
+    border-radius: 0 5px 5px 0
+}
+
+@media (max-width: 480px) {
+    .input-addon-item .dropdown .fa-caret-down {
+        display: none
+    }
+}
+
+.input-addon-field,
+.input-addon-item {
+    border: 1px solid rgba(147, 128, 108, 0.25);
+    padding: 4px 0.75em
+}
+
+.input-addon-field:not(:first-child),
+.input-addon-item:not(:first-child) {
+    border-left: 0
+}
+
+.icon-success {
+    color: #468847
+}
+
+.icon-error {
+    color: #b94a48
+}
+
+.icon-fade-out {
+    opacity: 1;
+    animation: icon-fadeout 5s linear forwards
+}
+
+@keyframes icon-fadeout {
+    0% {
+        opacity: 1
+    }
+    100% {
+        opacity: 0
+    }
+}
+
+.alert {
+    padding: 8px 35px 8px 14px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    color: #464646;
+    background-color: #FFEB3B;
+    border: 1px solid #f9df00;
+    border-radius: 4px
+}
+
+.alert-success {
+    color: #468847;
+    background-color: #dff0d8;
+    border-color: #d6e9c6
+}
+
+.alert-error {
+    color: #b94a48;
+    background-color: #f2dede;
+    border-color: #eed3d7
+}
+
+.alert-info {
+    color: #464646;
+    background-color: #92ddff;
+    border-color: #83d8ff;
+}
+
+.alert-normal {
+    color: #333;
+    background-color: #f0f0f0;
+    border-color: #ddd
+}
+
+.alert ul {
+    margin-top: 10px;
+    margin-bottom: 10px
+}
+
+.alert li {
+    margin-left: 25px
+}
+
+.alert-fade-out {
+    text-align: center;
+    position: fixed;
+    bottom: 0;
+    left: 20%;
+    width: 60%;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    margin-bottom: 0;
+    border-width: 1px 0 0;
+    border-radius: 4px 4px 0 0;
+    z-index: 9999;
+    opacity: 1;
+    animation: fadeout 5s linear forwards
+}
+
+@keyframes fadeout {
+    0% {
+        opacity: 1
+    }
+    100% {
+        opacity: 0
+    }
+}
+
+a.btn {
+    text-decoration: none
+}
+
+.btn {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    font-size: 1.2em;
+    font-weight: normal;
+    cursor: pointer;
+    display: inline-block;
+    border-radius: 2px;
+    padding: 3px 10px;
+    margin: 0;
+    border: 1px solid #ddd;
+    background: #f5f5f5;
+    color: #333
+}
+
+.btn:hover,
+.btn:focus {
+    background-color: #eee;
+    color: #000;
+    border-color: #eee;
+    border-color: #e5e5e5;
+}
+
+.btn-red {
+    border-color: #b0281a;
+    background: #d14836;
+    color: #fff
+}
+
+.btn-red:hover,
+.btn-red:focus {
+    background-color: #28a745;
+    background-image: linear-gradient(-180deg, #34d058 0%, #28a745 90%);
+    color: #fff;
+    border-color: #28a745;
+}
+
+.btn-blue {
+    border-color: #3079ed;
+    background-image: linear-gradient(-180deg, #4d90fe 0%, #335996 90%);
+    color: #fff
+}
+
+.btn-blue:hover,
+.btn-blue:focus {
+    background-color: #28a745;
+    background-image: linear-gradient(-180deg, #34d058 0%, #28a745 90%);
+    color: #fff;
+    border-color: #28a745;
+}
+
+.btn:disabled {
+    color: #ccc;
+    border-color: #ccc;
+    background: #f7f7f7
+}
+
+.buttons-header {
+    font-size: 0.8em;
+    margin-top: 5px;
+    margin-bottom: 15px
+}
+
+.tooltip i.fa {
+    cursor: pointer
+}
+
+.tooltip .fa-info-circle {
+    color: #999
+}
+
+#tooltip-container {
+    padding: 5px;
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    box-shadow: 0 6px 12px #aaa;
+    position: absolute;
+    min-width: 350px
+}
+
+#tooltip-container .markdown p {
+    margin-bottom: 0
+}
+
+#tooltip-container .tooltip-large {
+    width: 600px
+}
+
+h2 .dropdown ul {
+    display: none
+}
+
+.dropdown {
+    display: inline;
+    position: relative
+}
+
+.dropdown ul {
+    display: none
+}
+
+.dropdown-smaller {
+    font-size: 0.85em
+}
+
+ul.dropdown-submenu-open {
+    display: block;
+    position: absolute;
+    z-index: 1000;
+    min-width: 285px;
+    list-style: none;
+    margin: 3px 0 0 1px;
+    padding: 6px 0;
+    background-color: #fff;
+    border: 1px solid #b2b2b2;
+    border-radius: 3px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15)
+}
+
+.dropdown-submenu-open li {
+    display: block;
+    margin: 0;
+    padding: 9px 20px;
+    font-size: 0.9em;
+    border-bottom: none;
+    cursor: pointer;
+}
+
+.dropdown-submenu-open li.no-hover {
+    cursor: default
+}
+
+.dropdown-submenu-open li:last-child {
+    border: none
+}
+
+.dropdown-submenu-open li:not(.no-hover):hover {
+    background: #f6f8fa;
+    color: #8d9498
+}
+
+.dropdown-submenu-open li:hover a {
+    color: #262626
+}
+
+.dropdown-submenu-open a {
+    text-decoration: none;
+    color: #333
+}
+
+.dropdown-submenu-open a:focus {
+    text-decoration: underline
+}
+
+.dropdown-menu-link-text,
+.dropdown-menu-link-icon {
+    color: #333;
+    text-decoration: none
+}
+
+.dropdown-menu-link-text:hover {
+    text-decoration: underline
+}
+
+td a.dropdown-menu strong {
+    color: #cb2431
+}
+
+td a.dropdown-menu strong i {
+    color: #cb2431
+}
+
+td a.dropdown-menu i {
+    color: #dedede
+}
+
+td a.dropdown-menu:hover strong {
+    color: #555
+}
+
+td a.dropdown-menu:hover strong i {
+    color: #555
+}
+
+td a.dropdown-menu:hover i {
+    color: #333
+}
+
+.accordion-title {
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAYAAABS3WWCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NEQ5RDgxQzc2RjQ5MTFFMjhEMUNENzFGRUMwRjhBRTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NEQ5RDgxQzg2RjQ5MTFFMjhEMUNENzFGRUMwRjhBRTciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0RDlEODFDNTZGNDkxMUUyOEQxQ0Q3MUZFQzBGOEFFNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0RDlEODFDNjZGNDkxMUUyOEQxQ0Q3MUZFQzBGOEFFNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvXFWFAAAAAYSURBVHjaYvj//z8D0/Pnz/8zgFgAAQYAS5UJscReGMIAAAAASUVORK5CYII=) repeat-x scroll 0 10px
+}
+
+.accordion-title h3 {
+    display: inline;
+    padding-right: 5px;
+    background: #fff
+}
+
+.accordion-content {
+    margin-top: 15px;
+    margin-bottom: 25px
+}
+
+.accordion-toggle {
+    color: #333;
+    text-decoration: none
+}
+
+.accordion-toggle:focus {
+    color: #333
+}
+
+.accordion-toggle:hover {
+    color: #999
+}
+
+.accordion-toggle:before {
+    content: "\f0d7"
+}
+
+.accordion-collapsed {
+    margin-bottom: 25px
+}
+
+.accordion-collapsed .accordion-toggle:before {
+    content: "\f0da"
+}
+
+.accordion-collapsed .accordion-content {
+    display: none
+}
+
+#select-dropdown-menu {
+    position: absolute;
+    display: block;
+    z-index: 1000;
+    min-width: 160px;
+    padding: 5px 0;
+    background: #fff;
+    list-style: none;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+    overflow-x: hidden;
+}
+
+.select-dropdown-menu-item {
+    white-space: nowrap;
+    overflow: hidden;
+    padding: 3px 10px;
+    color: #555;
+    cursor: pointer;
+    border-bottom: 1px solid #f8f8f8;
+    line-height: 1.5em;
+    font-weight: 400
+}
+
+.select-dropdown-menu-item.active {
+    color: #fff;
+    background: #0366d6
+}
+
+.select-dropdown-menu-item:last-child {
+    border: none
+}
+
+.select-dropdown-input-container {
+    position: relative;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    background-color: #fff;
+    max-width: 300px;
+}
+
+.select-dropdown-input-container input.select-dropdown-input {
+    margin: 0 0 0 5px;
+    border: none;
+    height: 23px
+}
+
+.select-dropdown-input-container input.select-dropdown-input:focus {
+    border: none;
+    box-shadow: none
+}
+
+.select-dropdown-input-container .select-dropdown-chevron {
+    color: #555;
+    position: absolute;
+    top: 4px;
+    right: 5px;
+    cursor: pointer
+}
+
+.select-dropdown-input-container .select-loading-icon {
+    color: #555;
+    position: absolute;
+    top: 4px;
+    right: 5px
+}
+
+#suggest-menu {
+    position: absolute;
+    display: block;
+    z-index: 1000;
+    min-width: 160px;
+    padding: 5px 0;
+    background: #fff;
+    list-style: none;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175)
+}
+
+.suggest-menu-item {
+    white-space: nowrap;
+    padding: 3px 10px;
+    color: #333;
+    font-weight: bold;
+    cursor: pointer
+}
+
+.suggest-menu-item.active {
+    color: #fff;
+    background: #0366d6
+}
+
+.suggest-menu-item.active small {
+    color: #fff
+}
+
+.suggest-menu-item small {
+    color: #999;
+    font-weight: normal
+}
+
+#modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.9);
+    overflow: auto;
+    z-index: 100
+}
+
+#modal-box {
+    position: fixed;
+    max-height: calc(100% - 30px);
+    top: 0;
+    padding: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: #fafbfc;
+    overflow: auto;
+    border-radius: 0px 0px 3px 3px;
+}
+
+#modal-content {
+    padding: 0 5px 5px
+}
+
+#modal-header {
+    text-align: right;
+    padding-right: 5px
+}
+
+#modal-close-button {
+    color: #333
+}
+
+#modal-close-button:hover {
+    color: #b94a48
+}
+
+.pagination {
+    text-align: center;
+    font-size: 0.9em
+}
+
+.pagination-showing {
+    margin-right: 5px;
+    padding-right: 5px;
+    border-right: 1px solid #999
+}
+
+.pagination-next {
+    margin-left: 5px
+}
+
+.pagination-previous {
+    margin-right: 5px
+}
+
+.header img {
+  float: left;
+}
+
+.header h2 {
+  position: relative;
+  color:#fff;
+  top: 16px;
+  left: 10px;
+  margin: 0;
+}
+
+header {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 5px 10px;
+    margin-bottom: 5px;
+    border-bottom: 0px solid #dedede;
+    padding: 15px 10px;
+    margin-bottom: 15px;
+    background: #24292e;
+}
+
+header .title-container {
+    flex: 1;
+    min-width: 300px
+}
+
+@media (max-width: 480px) {
+    header .title-container {
+        order: 3
+    }
+}
+
+header .board-selector-container {
+    min-width: 320px;
+    display: flex;
+    align-items: center
+}
+
+@media (max-width: 480px) {
+    header .board-selector-container {
+        order: 2;
+        min-width: 300px
+    }
+    header .board-selector-container input[type=text] {
+        max-width: 280px
+    }
+}
+
+header .menus-container {
+    min-width: 120px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end
+}
+
+@media (max-width: 480px) {
+    header .menus-container {
+        order: 1;
+        margin-bottom: 5px;
+        margin-left: auto
+    }
+}
+
+header h1 {
+    font-size: 1.4em!important;
+    color: #dddddd!important
+}
+
+header h1 .tooltip {
+    opacity: 0.3;
+    font-size: 0.7em
+}
+
+a i.web-notification-icon {
+    color: #0366d6
+}
+
+a i.web-notification-icon:focus,
+a i.web-notification-icon:hover {
+    color: #000
+}
+
+.logo a {
+    opacity: 0.5;
+    color: #d40000;
+    text-decoration: none
+}
+
+.logo span {
+    color: #333
+}
+
+.logo a:hover {
+    opacity: 0.8;
+    color: #333
+}
+
+.logo a:focus span,
+.logo a:hover span {
+    color: #d40000
+}
+
+.page-header {
+    margin-bottom: 20px;
+    padding: 10px;
+    background-color: #fafbfc;
+    border-radius: 3px;
+}
+
+.page-header .dropdown {
+    padding-right: 10px
+}
+
+.page-header h2 {
+    margin: 0;
+    padding: 0;
+    font-weight: bold;
+    border-bottom: none;
+}
+
+.page-header h2 a {
+    color: #333;
+    text-decoration: none
+}
+
+.page-header h2 a:focus,
+.page-header h2 a:hover {
+    color: #999
+}
+
+.page-header ul {
+    text-align: left;
+    margin-top: 5px;
+    display: inline-block
+}
+
+.page-header li {
+    display: inline;
+    padding-right: 15px
+}
+
+@media (max-width: 480px) {
+    .page-header li {
+        display: block;
+        line-height: 1.5em
+    }
+}
+
+.page-header li.active a {
+    color: #333;
+    text-decoration: none;
+    font-weight: bold
+}
+
+.page-header li.active a:hover,
+.page-header li.active a:focus {
+    text-decoration: underline
+}
+
+.menu-inline {
+    margin-bottom: 5px
+}
+
+.menu-inline li {
+    display: inline;
+    padding-right: 15px
+}
+
+.menu-inline li .active a {
+    font-weight: bold;
+    color: #000;
+    text-decoration: none
+}
+
+.sidebar-container {
+    height: 100%;
+    display: flex;
+    flex-flow: row
+}
+
+@media (max-width: 768px) {
+    .sidebar-container {
+        flex-flow: wrap
+    }
+}
+
+.sidebar-content {
+    padding-left: 10px;
+    flex: 1 100%;
+    max-width: 85%;
+    overflow-wrap: break-word
+}
+
+@media (max-width: 768px) {
+    .sidebar-content {
+        padding-left: 0;
+        order: 1;
+        max-width: 100%
+    }
+}
+
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
+    .sidebar-content {
+        max-width: 75%
+    }
+}
+
+.sidebar {
+    max-width: 25%;
+    border: 1px solid #d1d5da;
+    min-width: 230px;
+    padding: 8px 10px;
+    border-radius: 3px;
+    background: #fafbfc;
+}
+
+@media (max-width: 768px) {
+    .sidebar {
+        flex: 1 auto;
+        order: 2
+    }
+}
+
+.sidebar h2 {
+    margin-top: 0
+}
+
+.sidebar>ul a {
+    text-decoration: none;
+    color: #586069;
+    font-weight: 500
+}
+
+.sidebar>ul a:hover {
+    color: #23292d
+}
+
+.sidebar>ul li {
+    list-style-type: none;
+    line-height: 35px;
+    border-bottom: 1px dotted #e5e5e5;
+    padding-left: 13px
+}
+
+.sidebar>ul li:hover {
+    border-left: 5px solid #555;
+    padding-left: 8px
+}
+
+.sidebar>ul li.active {
+    border-left: 5px solid #23292d;
+    padding-left: 8px
+}
+
+.sidebar>ul li.active a {
+    color: #23292d;
+    font-weight: bold
+}
+
+.sidebar-icons>ul li {
+    padding-left: 0
+}
+
+.sidebar-icons>ul li:hover,
+.sidebar-icons>ul li.active {
+    padding-left: 0;
+    border-left: none
+}
+
+.sidebar>ul li.active a:focus,
+.sidebar>ul li.active a:hover {
+    color: #555
+}
+
+.sidebar>ul li:last-child {
+    margin-bottom: 15px
+}
+
+.avatar img {
+    vertical-align: bottom
+}
+
+.avatar-left {
+    float: left;
+    margin-right: 10px
+}
+
+.avatar-inline {
+    display: inline-block;
+    margin-right: 3px
+}
+
+.avatar-48 img,
+.avatar-48 div {
+    border-radius: 30px
+}
+
+.avatar-48 .avatar-letter {
+    line-height: 48px;
+    width: 48px;
+    font-size: 25px
+}
+
+.avatar-20 img,
+.avatar-20 div {
+    border-radius: 10px
+}
+
+.avatar-20 .avatar-letter {
+    line-height: 20px;
+    width: 20px;
+    font-size: 11px
+}
+
+.avatar-letter {
+    color: #fff;
+    text-align: center
+}
+
+#file-dropzone,
+#screenshot-zone {
+    position: relative;
+    border: 2px dashed #ccc;
+    width: 99%;
+    height: 250px;
+    overflow: auto
+}
+
+#file-dropzone-inner,
+#screenshot-inner {
+    position: absolute;
+    left: 0;
+    bottom: 48%;
+    width: 100%;
+    text-align: center;
+    color: #aaa
+}
+
+#screenshot-zone.screenshot-pasted {
+    border: 2px solid #333
+}
+
+#file-list {
+    margin: 20px
+}
+
+#file-list li {
+    list-style-type: none;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    border-bottom: 1px dotted #ddd;
+    width: 95%
+}
+
+#file-list li .file-error {
+    font-weight: bold;
+    color: #b94a48
+}
+
+.file-thumbnails {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -webkit-justify-content: flex-start;
+    justify-content: flex-start
+}
+
+.file-thumbnail {
+    width: 250px;
+    border: 1px solid #efefef;
+    border-radius: 5px;
+    margin-bottom: 20px;
+    box-shadow: 4px 2px 10px -6px rgba(0, 0, 0, 0.55);
+    margin-right: 15px
+}
+
+.file-thumbnail img {
+    cursor: pointer;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px
+}
+
+.file-thumbnail img:hover {
+    opacity: 0.5
+}
+
+.file-thumbnail-content {
+    padding-left: 8px;
+    padding-right: 8px
+}
+
+.file-thumbnail-title {
+    font-weight: 700;
+    font-size: 0.9em;
+    color: #555;
+    overflow: hidden;
+    text-overflow: ellipsis
+}
+
+.file-thumbnail-description {
+    font-size: 0.8em;
+    color: #999;
+    margin-top: 8px;
+    margin-bottom: 5px
+}
+
+.file-viewer {
+    position: relative
+}
+
+.file-viewer img {
+    max-width: 95%;
+    max-height: 85%;
+    margin-top: 10px
+}
+
+.color-picker {
+    width: 180px
+}
+
+.color-picker-option {
+    height: 25px
+}
+
+.color-picker-square {
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    margin-right: 5px;
+    border: 1px solid #000
+}
+
+.color-picker-label {
+    display: inline-block;
+    vertical-align: bottom;
+    padding-bottom: 3px
+}
+
+.filter-box {
+    max-width: 1024px
+}
+
+.action-menu {
+    color: #333;
+    text-decoration: none
+}
+
+.action-menu:hover,
+.action-menu:focus {
+    text-decoration: underline
+}
+
+.js-project-creation-options {
+    max-width: 500px;
+    border-left: 3px solid #efefef;
+    margin-top: 20px;
+    padding-left: 15px;
+    padding-bottom: 5px;
+    padding-top: 5px
+}
+
+.project-overview-columns {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -webkit-align-items: center;
+    align-items: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    margin-bottom: 20px;
+    font-size: 1.4em
+}
+
+@media (max-width: 480px) {
+    .project-overview-columns {
+        display: block
+    }
+}
+
+.project-overview-column {
+    text-align: center;
+    margin-right: 3%;
+    margin-top: 5px;
+    padding: 3px 15px 3px 15px;
+    border: 1px dashed #ddd
+}
+
+@media (max-width: 480px) {
+    .project-overview-column {
+        text-align: left
+    }
+}
+
+.project-overview-column small {
+    color: #999
+}
+
+.project-overview-column strong {
+    color: #555;
+    display: block
+}
+
+@media (max-width: 480px) {
+    .project-overview-column strong {
+        display: inline
+    }
+}
+
+.project-header {
+    margin-bottom: 8px
+}
+
+.project-header .dropdown-component {
+    margin-top: 4px;
+    margin-right: 5px;
+    float: left
+}
+
+@media (max-width: 768px) {
+    .project-header .dropdown-component {
+        float: none
+    }
+}
+
+.project-header .views-switcher-component {
+    margin-top: 4px;
+    float: left
+}
+
+@media (max-width: 768px) {
+    .project-header .views-switcher-component {
+        float: none;
+        margin-bottom: 10px
+    }
+}
+
+.project-header .filter-box-component form {
+    margin: 0
+}
+
+.views {
+    margin-right: 10px;
+    margin-top: 1px;
+    font-size: 0.9em
+}
+
+@media (max-width: 560px) {
+    .views {
+        width: 100%
+    }
+}
+
+@media (max-width: 768px) {
+    .views {
+        margin-top: 10px;
+        font-size: 1em
+    }
+}
+
+@media (max-width: 480px) {
+    .views {
+        margin-top: 5px
+    }
+}
+
+.views li {
+    white-space: nowrap;
+    background-color: #e6ebf1;
+    background-image: linear-gradient(-180deg, #f0f3f6 0%, #e6ebf1 90%);
+    background-position: -.5em;
+    border-color: rgba(27,31,35,0.35);
+    border: 1px solid #ddd;
+    border-right: none;
+    padding: 4px 8px;
+    display: inline;
+}
+
+.views li:hover {
+    white-space: nowrap;
+    background-image: linear-gradient(-180deg, #fafbfc 0%, #eff3f6 90%);
+    border: 1px solid #ddd;
+    border-right: none;
+    padding: 4px 8px;
+    display: inline;
+}
+
+@media (max-width: 560px) {
+    .views li {
+        display: block;
+        margin-top: 5px;
+        border-radius: 5px;
+        border: 1px solid #ddd
+    }
+}
+
+.views li.active a {
+    font-weight: bold;
+    color: #000;
+    text-decoration: none
+}
+
+.views li:first-child {
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px
+}
+
+.views li:last-child {
+    border-right: 1px solid #ddd;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px
+}
+
+.views a {
+    color: #555;
+    text-decoration: none
+}
+
+.views a:hover {
+    color: #333;
+    text-decoration: none;
+}
+
+.dashboard-project-stats small {
+    margin-right: 10px;
+    color: #999
+}
+
+.dashboard-table-link {
+    font-weight: bold;
+    color: #000;
+    text-decoration: none
+}
+
+.dashboard-table-link:focus,
+.dashboard-table-link:hover {
+    color: #999
+}
+
+.public-board {
+    margin-top: 5px
+}
+
+.public-task {
+    max-width: 800px;
+    margin: 5px auto 0
+}
+
+#board-container {
+    overflow-x: auto
+}
+
+#board {
+    table-layout: fixed;
+    margin-bottom: 0
+}
+
+#board th.board-column-header {
+    width: 240px
+}
+
+#board td {
+    vertical-align: top
+}
+
+.board-container-compact {
+    overflow-x: initial
+}
+
+@media all and (-ms-high-contrast: active),
+(-ms-high-contrast: none) {
+    .board-container-compact #board {
+        table-layout: auto
+    }
+}
+
+#board th.board-column-header.board-column-compact {
+    width: initial
+}
+
+.board-column-collapsed {
+    display: none
+}
+
+td.board-column-task-collapsed {
+    font-weight: bold;
+    background-color: #f6f8fa
+}
+
+#board th.board-column-header-collapsed {
+    width: 28px;
+    min-width: 28px;
+    text-align: center;
+    overflow: hidden
+}
+
+.board-rotation-wrapper {
+    position: relative;
+    padding: 8px 4px;
+    min-height: 150px;
+    overflow: hidden
+}
+
+.board-rotation {
+    white-space: nowrap;
+    -webkit-backface-visibility: hidden;
+    -webkit-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+    -webkit-transform-origin: 0 100%;
+    -moz-transform-origin: 0 100%;
+    -ms-transform-origin: 0 100%;
+    transform-origin: 0 100%
+}
+
+.board-column-title .dropdown-menu {
+    text-decoration: none
+}
+
+.board-add-icon {
+    float: left;
+    padding: 0 5px
+}
+
+.board-add-icon i {
+    text-decoration: none;
+    color: #279f43;
+    font-size: 1.4em
+}
+
+.board-add-icon i:focus,
+.board-add-icon i:hover {
+    text-decoration: none;
+    color: #23292d
+}
+
+.board-column-header-task-count {
+    color: #999;
+    font-weight: normal
+}
+
+a.board-swimlane-toggle {
+    text-decoration: none
+}
+
+a.board-swimlane-toggle:hover,
+a.board-swimlane-toggle:focus {
+    color: #000;
+    text-decoration: none;
+    border: none
+}
+
+.board-task-list {
+    min-height: 60px
+}
+
+.board-task-list .task-board:last-child {
+    margin-bottom: 0
+}
+
+.board-task-list-limit {
+    background-color: #DF5353
+}
+
+.draggable-item {
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none
+}
+
+.draggable-placeholder {
+    border: 2px dashed #000;
+    background: #fafafa;
+    height: 70px;
+    margin-bottom: 10px
+}
+
+div.draggable-item-selected {
+    border: 1px solid #000
+}
+
+.task-board-sort-handle {
+    float: left;
+    padding-right: 5px
+}
+
+.task-board {
+    margin-bottom: 8px;
+    padding: 12px;
+    border-radius: 3px;
+    box-shadow: 0px 1px 1px 0 rgba(46, 61, 73, 0.30);
+    border-bottom: none;
+    border-left: none;
+    border-right: 2px solid;
+    border-top: none;
+    background-color: #f9f9f9!important;
+}
+
+div.task-board-recent {
+    border-width: 2px
+}
+
+div.task-board-status-closed {
+    user-select: none;
+    border: 1px dotted #555
+}
+
+.task-board a {
+    color: #0366d6;
+    font-weight: 600;
+    text-decoration: none
+}
+
+.task-board-collapsed {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis
+}
+
+.task-board-title {
+    margin-top: 5px;
+    margin-bottom: 8px
+}
+
+.task-board-title a:hover {
+    text-decoration: underline
+}
+
+.task-board-saving-state {
+    opacity: 0.3
+}
+
+.task-board-saving-icon {
+    position: absolute;
+    margin: auto;
+    width: 100%;
+    text-align: center;
+    color: #000
+}
+
+.task-board-avatars {
+    text-align: right;
+    float: right
+}
+
+.task-board-change-assignee {
+    cursor: pointer
+}
+
+.task-board-change-assignee:hover {
+    opacity: 0.6
+}
+
+.task-list-avatars {
+    display: inline-block;
+    float: left
+}
+
+@media (max-width: 768px) {
+    .task-list-avatars {
+        float: none;
+        display: block
+    }
+}
+
+.task-list-avatars .task-avatar-assignee {
+    font-weight: 300;
+    color: #999
+}
+
+.task-list-avatars:hover .task-avatar-assignee {
+    font-weight: 400;
+    color: #000
+}
+
+.task-board-icons,
+.task-list-icons {
+    font-size: 0.8em;
+    text-align: right
+}
+
+.task-board-icons a,
+.task-list-icons a {
+    text-decoration: none
+}
+
+.task-board-icons a:hover,
+.task-list-icons a:hover {
+    color: #333
+}
+
+.task-board-icons a:hover i,
+.task-list-icons a:hover i {
+    color: #333
+}
+
+.task-board-icons .task-score,
+.task-list-icons .task-score {
+    font-weight: bold
+}
+
+.task-board-icons .flag-milestone,
+.task-list-icons .flag-milestone {
+    color: green
+}
+
+.task-board-icons {
+    margin-top: 7px
+}
+
+.task-board-icons a {
+    opacity: 0.5
+}
+
+.task-board-icons span {
+    opacity: 0.5;
+    color: #1e252a;
+    margin-left: 4px
+}
+
+.task-board-icons a:hover {
+    opacity: 1.0;
+    font-weight: bold
+}
+
+.task-board-icons .task-board-icons-row {
+    line-height: 22px
+}
+
+.task-list-icons {
+    line-height: 22px
+}
+
+.task-list-icons a,
+.task-list-icons span,
+.task-list-icons i {
+    color: #999;
+    opacity: 1.0
+}
+
+.task-list-icons span {
+    margin-left: 5px
+}
+
+@media (max-width: 768px) {
+    .task-list-icons {
+        text-align: left
+    }
+}
+
+.task-icon-age {
+    display: inline-block
+}
+
+span.task-icon-age-total {
+    border: 1px solid #e5e5e5;
+    padding: 1px 3px 1px 3px;
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px
+}
+
+span.task-icon-age-column {
+    border: 1px solid #e5e5e5;
+    border-left: none;
+    margin-left: -5px;
+    padding: 1px 3px 1px 3px;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px
+}
+
+.task-board span.task-icon-age-total,
+.task-board span.task-icon-age-column {
+    border-color: #666
+}
+
+.task-board-category-container {
+    text-align: right;
+    margin-top: 8px;
+    margin-bottom: 8px
+}
+
+.task-board-category {
+    border: 1px solid #555;
+    font-size: 0.9em;
+    font-weight: 500;
+    color: #000;
+    padding: 1px 3px 1px 2px;
+    border-radius: 3px
+}
+
+.task-board-category a:hover {
+    text-decoration: underline
+}
+
+.task-date {
+    font-weight: 500;
+    color: #000
+}
+
+span.task-date-today {
+    opacity: 1.0;
+    color: #0366d6
+}
+
+span.task-date-overdue {
+    opacity: 1.0;
+    color: #b94a48
+}
+
+.task-tags li {
+    display: inline-block;
+    margin: 3px 3px 0 0;
+    padding: 1px 3px 1px 3px;
+    color: #333;
+    border: 1px solid #333;
+    border-radius: 4px
+}
+
+.task-summary-container .task-tags {
+    margin-top: 10px
+}
+
+.task-list-tag {
+    padding: 0.1em 0.9em;
+    margin: 0 0.5em 0.5em 0;
+    white-space: nowrap;
+    background-color: #f9f9f9;
+    border-radius: 3px;
+}
+
+#task-summary {
+    margin-bottom: 15px
+}
+
+#task-summary h2 {
+    color: #555;
+    font-size: 1.6em;
+    margin-top: 0;
+    padding-top: 0
+}
+
+.task-summary-container {
+    border: none;
+    border-radius: 3px;
+    border-bottom: 5px solid;
+    padding: 20px;
+}
+
+.task-summary-columns {
+    display: flex;
+    flex-flow: row;
+    justify-content: space-between
+}
+
+@media (max-width: 768px) {
+    .task-summary-columns {
+        flex-flow: column
+    }
+}
+
+.task-summary-column {
+    color: #333
+}
+
+.task-summary-column span {
+    color: #555
+}
+
+.task-summary-column li {
+    line-height: 23px
+}
+
+#external-task-view {
+    padding: 10px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    border: 1px dotted #ccc
+}
+
+.task-form-container {
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap
+}
+
+.task-form-container>* {
+    box-sizing: border-box
+}
+
+.task-form-container>* {
+    width: 1%
+}
+
+.task-form-main-column {
+    width: 60%
+}
+
+@media (max-width: 1000px) {
+    .task-form-main-column {
+        width: 100%
+    }
+}
+
+.task-form-main-column input[type="text"] {
+    width: 700px;
+    max-width: 99%
+}
+
+.task-form-secondary-column {
+    max-width: 250px;
+    min-width: 200px;
+    max-height: 600px;
+    padding-left: 10px;
+    overflow: auto;
+    width: 20%
+}
+
+@media (max-width: 1000px) {
+    .task-form-secondary-column {
+        width: 100%;
+        max-width: 99%;
+        max-height: none
+    }
+}
+
+@media (max-width: 768px) {
+    .task-form-secondary-column {
+        padding-left: 0
+    }
+}
+
+.task-form-secondary-column label:first-child {
+    margin-top: 0
+}
+
+@media (max-width: 1000px) {
+    .task-form-secondary-column label:first-child {
+        margin-top: 10px
+    }
+}
+
+.task-form-bottom {
+    width: 100%
+}
+
+.comment-sorting {
+    text-align: right
+}
+
+.comment-sorting a {
+    color: #555;
+    font-weight: normal;
+    text-decoration: none
+}
+
+.comment-sorting a:hover {
+    color: #999
+}
+
+.comment {
+    padding: 5px;
+    margin-bottom: 15px
+}
+
+.comment-title {
+    border-bottom: 1px dotted #eee;
+    margin-left: 55px
+}
+
+.comment-date {
+    color: #999;
+    font-weight: 200
+}
+
+.comment-actions {
+    text-align: right
+}
+
+.comment-content {
+    margin-left: 55px
+}
+
+.comments .text-editor textarea {
+    height: 90px
+}
+
+.comments .text-editor .text-editor-preview-area {
+    height: 90px
+}
+
+.comments .comment-highlighted {
+    background-color: #f6f8fa;
+    border: 2px solid #ffeb8e
+}
+
+.comments .comment-highlighted:hover {
+    background-color: #f6f8fa
+}
+
+.comments .comment:hover {
+    background: #f6f8fa
+}
+
+.comments .comment:nth-child(even):not(.comment-highlighted) {
+    background: #f6f8fa
+}
+
+.comments .comment:nth-child(even):not(.comment-highlighted):hover {
+    background: #f6f8fa
+}
+
+.subtask-cell {
+    padding: 4px 10px;
+    border-top: 1px dotted #dedede;
+    border-left: 1px dotted #dedede;
+    display: table-cell;
+    vertical-align: middle
+}
+
+.subtask-cell a {
+    color: #333;
+    text-decoration: none
+}
+
+.subtask-cell a:hover,
+.subtask-cell a:focus {
+    color: #0366d6
+}
+
+.subtask-cell:first-child {
+    border-left: none
+}
+
+@media (max-width: 768px) {
+    .subtask-cell {
+        width: 90%;
+        display: block;
+        border-left: none
+    }
+}
+
+.task-list-subtasks {
+    display: table;
+    width: 100%
+}
+
+@media (max-width: 768px) {
+    .task-list-subtasks {
+        display: block
+    }
+}
+
+.task-list-subtask {
+    display: table-row
+}
+
+@media (max-width: 768px) {
+    .task-list-subtask {
+        display: block
+    }
+}
+
+@media (max-width: 768px) {
+    .subtask-assignee,
+    .subtask-time-tracking-cell {
+        display: none
+    }
+}
+
+.task-links-table td {
+    vertical-align: middle
+}
+
+.task-links-task-count {
+    color: #999;
+    font-weight: normal
+}
+
+.task-link-closed {
+    text-decoration: line-through
+}
+
+.text-editor {
+    margin-top: 10px
+}
+
+.text-editor a {
+    font-size: 1em;
+    color: #999;
+    text-decoration: none;
+    margin-right: 10px
+}
+
+.text-editor a:hover {
+    color: #0366d6
+}
+
+.text-editor .text-editor-preview-area {
+    border: none;
+    width: 700px;
+    max-width: 99%;
+    height: 250px;
+    overflow: auto;
+    padding: 2px
+}
+
+.text-editor textarea {
+    width: 700px;
+    max-width: 98%;
+    height: 250px;
+    padding: 10px;
+}
+
+.markdown {
+    line-height: 1.4em
+}
+
+.markdown h1 {
+    margin-top: 5px;
+    margin-bottom: 10px;
+    font-weight: bold
+}
+
+.markdown h2 {
+    font-weight: bold
+}
+
+.markdown p {
+    margin-bottom: 10px
+}
+
+.markdown ol,
+.markdown ul {
+    margin-left: 25px;
+    margin-top: 10px;
+    margin-bottom: 10px
+}
+
+.markdown pre {
+    background: #3333330d;
+    padding: 10px;
+    border-radius: 5px;
+    border: 1px solid #ddd;
+    overflow: auto;
+    overflow-wrap: initial;
+    color: #555
+}
+
+.markdown blockquote {
+    font-style: italic;
+    border-left: 3px solid #ddd;
+    padding-left: 10px;
+    margin-bottom: 10px;
+    margin-left: 20px
+}
+
+.markdown img {
+    display: block;
+    max-width: 80%;
+    margin-top: 10px
+}
+
+.documentation {
+    margin: 0 auto;
+    padding: 20px;
+    max-width: 850px;
+    background: #fefefe;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    color: #555
+}
+
+.documentation img {
+    border: 1px solid #333
+}
+
+.documentation h1 {
+    text-decoration: none;
+    margin-bottom: 30px
+}
+
+.documentation h2 {
+    text-decoration: none;
+    border-bottom: 1px solid #ccc;
+    margin-bottom: 25px
+}
+
+.documentation li {
+    line-height: 30px
+}
+
+.panel {
+    border-radius: 4px;
+    padding: 8px 35px 8px 10px;
+    margin-top: 10px;
+    margin-bottom: 15px;
+    border: 1px solid #ddd;
+    color: #333;
+    background-color: #fcfcfc;
+    overflow: auto
+}
+
+.panel li {
+    list-style-type: square;
+    margin-left: 20px;
+    line-height: 1.35em
+}
+
+.activity-event {
+    margin-bottom: 15px;
+    padding: 10px
+}
+
+.activity-event:nth-child(even) {
+    background: #fafafa
+}
+
+.activity-event:hover {
+    background: #f6f8fa
+}
+
+.activity-date {
+    margin-left: 10px;
+    font-weight: normal;
+    color: #999
+}
+
+.activity-content {
+    margin-left: 55px
+}
+
+.activity-title {
+    font-weight: bold;
+    color: #000;
+    border-bottom: 1px dotted #efefef
+}
+
+.activity-description {
+    color: #555;
+    margin-top: 10px
+}
+
+@media (max-width: 480px) {
+    .activity-description {
+        overflow: auto
+    }
+}
+
+.activity-description li {
+    list-style-type: circle
+}
+
+.activity-description ul {
+    margin-top: 10px;
+    margin-left: 20px
+}
+
+.user-mention-link {
+    font-weight: bold;
+    color: #000;
+    text-decoration: none
+}
+
+.user-mention-link:hover {
+    color: #555
+}
+
+.image-slideshow-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.95);
+    overflow: auto;
+    z-index: 100
+}
+
+.image-slideshow-overlay img {
+    display: block;
+    margin: auto
+}
+
+.image-slideshow-overlay figcaption {
+    color: #fff;
+    opacity: 0.7;
+    position: absolute;
+    bottom: 5px;
+    right: 15px
+}
+
+.slideshow-icon {
+    color: #fff;
+    position: absolute;
+    font-size: 2.5em;
+    opacity: 0.6
+}
+
+.slideshow-icon:hover {
+    opacity: 0.9;
+    cursor: pointer
+}
+
+.slideshow-previous-icon {
+    left: 10px;
+    top: 45%
+}
+
+.slideshow-next-icon {
+    right: 10px;
+    top: 45%
+}
+
+.slideshow-close-icon {
+    right: 10px;
+    top: 10px;
+    font-size: 1.4em
+}
+
+.slideshow-download-icon {
+    left: 10px;
+    bottom: 10px;
+    font-size: 1.3em
+}
+
+.list-item-links,
+.list-item-actions {
+    display: inline-block;
+    float: left;
+    margin-left: 10px
+}
+
+.list-item-links a {
+    margin: 0
+}
+
+.list-item-action-hidden {
+    display: none
+}
+
+.bulk-change-checkbox {
+    float: left
+}
+
+.bulk-change-inputs {
+    float: left;
+    padding-left: 10px
+}
+
+.bulk-change-inputs label {
+    margin-top: 0;
+    margin-bottom: 3px
+}
+
+#to-top {
+    margin: 0 0px 30px 0px;
+}
+
+#backToTop {
+    position: fixed;
+    left: 50%;
+    bottom: -25px;
+    display: block;
+    width: 50px;
+    height: 50px;
+    z-index: 10000;
+    transition: all 0.4s;
+    -webkit-transition: all 0.4s;
+    -moz-transition: all 0.4s;
+    -o-transition: all 0.4s;
+    -ms-transition: all 0.4s;
+}
+
+#backToTop.topshow {
+    bottom: 0;
+}
+
+#backToTop span {
+    position: absolute;
+    left: -25px;
+    bottom: -25px;
+    display: block;
+    width: 50px;
+    height: 50px;
+    background: rgba(50, 50, 50, 0.15);
+    text-decoration: none;
+    -webkit-border-radius: 35px;
+    -moz-border-radius: 35px;
+    border-radius: 35px;
+    transition: all 0.4s;
+    -webkit-transition: all 0.4s;
+    -moz-transition: all 0.4s;
+    -o-transition: all 0.4s;
+    -ms-transition: all 0.4s;
+}
+
+#backToTop span:hover {
+    bottom: 5px;
+    background: rgba(70, 70, 70, 0.9);
+}
+
+#backToTop i:before {
+    position: relative;
+    left: 12px;
+    top: 0;
+    display: block;
+    margin: 0;
+    width: 50px;
+    color: #fff;
+    font-size: 27px;
+    -webkit-transition: all 0.6s ease;
+    -moz-transition: all 0.6s ease;
+    -ms-transition: all 0.6s ease;
+    -o-transition: all 0.6s ease;
+    transition: all 0.6s ease;
+}
+
+#backToTop:hover i:before {
+    top: 9px;
+}
diff --git a/plugins/Customizer/Assets/css/themes/KindaDark.css b/plugins/Customizer/Assets/css/themes/KindaDark.css
new file mode 100644
index 00000000..542c69f8
--- /dev/null
+++ b/plugins/Customizer/Assets/css/themes/KindaDark.css
@@ -0,0 +1,685 @@
+/*
+ * Modified version of "Breathe" Theme for Kanboard
+ * Licensed under the MIT license - Oxygen/LICENSE
+ *  - https://github.com/kenlog/Oxygen
+ * Copyright (c) 2019 Samm Du [https://sammdu.com]
+ */
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+input,
+textarea {
+  background-color: #fff;
+  color: #000;
+}
+
+::-webkit-input-placeholder {
+	/* Chrome/Opera/Safari */
+  color: #3c3c3c;
+}
+
+::-moz-placeholder {
+	/* Firefox 19+ */
+  color: #3c3c3c;
+}
+
+:-ms-input-placeholder {
+	/* IE 10+ */
+  color: #3c3c3c;
+}
+
+:-moz-placeholder {
+	/* Firefox 18- */
+  color: #3c3c3c;
+}
+
+::placeholder {
+  color: #3c3c3c;
+}
+
+h1 {
+  color: #fff;
+}
+
+a {
+  color: #2c52e3;
+}
+
+.js-modal-medium {
+  color: #2c52e3;
+}
+
+.js-modal-large {
+}
+
+.page-header ul li .fa {
+  color: #2c52e3;
+}
+
+.page-header ul li a {
+  text-decoration: none;
+}
+
+#modal-overlay .fa {
+  color: #222427;
+}
+
+a .fa {
+  color: #fff;
+}
+
+.project-header * {
+  border-radius: 0 !important;
+}
+
+.project-header li .fa {
+  color: #222427;
+}
+
+.table-list-row .fa {
+  color: #222427;
+}
+
+.dropdown-submenu-open .fa {
+  color: #222427;
+}
+
+.project-header .action-menu .fa {
+  color: #222427;
+}
+
+.text-editor .fa {
+  color: #222427;
+}
+
+.sidebar .fa {
+  color: #222427;
+}
+
+.board-column-title .fa {
+  color: #222427;
+}
+
+.task-board a {
+  color: #222427;
+  text-decoration: none;
+}
+
+.sidebar>ul a:hover {
+  color: #2c52e3;
+}
+
+.logo>a>img {
+  vertical-align: middle;
+  padding: 0.5em 1em 0.5em 0.5em;
+}
+
+div.ganttview-vtheader-series-name {
+  padding: 0 6px;
+}
+
+th,
+td {
+  padding: 10px;
+}
+
+header {
+  border-bottom: none;
+  box-shadow: 0px 1px 3px 0 rgba(46, 61, 73, .12);
+  padding: 1em 0.6em;
+  margin-bottom: 1em;
+  background-color: #222427 !important;
+}
+
+.header img {
+  float: left;
+}
+
+.header h2 {
+  position: relative;
+  color: #2c52e3;
+  top: 13px;
+  left: 10px;
+  margin: 0;
+}
+
+header .title-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+label {
+  font-weight: bold;
+  margin-top: 18px;
+}
+
+.table-list-header {
+  background: #222427;
+  border-radius: 0;
+  border-color: #222427;
+  line-height: 28px;
+  padding: 0.2em;
+}
+
+.table-list-header .table-list-header-count {
+  color: #fff;
+  display: inline-block;
+  float: left;
+  margin-left: 0.4em;
+}
+
+.table-list-header a {
+  color: #fff;
+  font-weight: 500;
+}
+
+.table-list-header a:hover {
+  color: #fff;
+  font-weight: 500;
+}
+
+.table-list-row:last-child {
+  border-radius: 0;
+}
+
+.task-board {
+  margin-bottom: 8px;
+  padding: 12px;
+  border-radius: 0;
+  border-top: none;
+  border-right: none;
+  border-left: none;
+  border-bottom: 0.4em solid rgba(0, 0, 0, 0.3);
+}
+
+div.task-board-recent {
+  border-width: 0.4em;
+}
+
+.task-board-title {
+  font-size: 1.25em;
+  font-weight: 600;
+}
+
+.task-board-header i {
+  color: #222427 !important;
+}
+
+.task-show-details {
+  border-radius: 0;
+  margin-bottom: 20px;
+}
+
+.task-show-details h2 {
+  background-color: rgba(0, 0, 0, 0.3);
+  padding: 20px;
+  border-radius: 0;
+  color: #fff;
+}
+
+.task-show-details ul {
+  padding: 20px;
+}
+
+.task-summary-container {
+  border: none;
+  border-radius: 0;
+  border-bottom: 5px solid;
+  padding: 20px;
+}
+
+.table-small {
+  font-size: 1em;
+}
+
+table th {
+  text-align: left;
+  padding: 0.8em 3px 0.6em 3px;
+  border: 1px solid #eee;
+  background: #fbfbfb;
+}
+
+table td {
+  border: none;
+  padding: 0.5em 7px;
+  vertical-align: top;
+}
+
+.sidebar ul {
+  padding-bottom: 20px;
+  border-bottom: 1px solid #ddd;
+  border-radius: 0;
+}
+
+.sidebar ul:last-of-type {
+  border-bottom: none;
+}
+
+.sidebar-collapse i,
+.sidebar-collapsed .sidebar {
+  background-color: #999;
+  border-radius: 0;
+  padding: 5px 10px 5px 8px;
+}
+
+.sidebar-collapse i,
+.sidebar-collapsed .sidebar i {
+  color: #fff;
+}
+
+.sidebar-collapse i:hover,
+.sidebar-collapsed .sidebar:hover {
+  background-color: #ccc;
+}
+
+.page-header {
+  margin: 15px 0;
+  background-color: #eee;
+  padding: 6px 10px 10px 10px;
+  border-bottom: 1px solid #ddd;
+  border-top: 1px solid #ddd;
+}
+
+.page-header li {
+  font-size: 1.1em;
+}
+
+.page-header h2 {
+  border-bottom: none;
+}
+
+header .avatar img {
+  width: 48px;
+  border-radius: 0;
+  margin-left: 0.5em;
+  margin-right: 0.4em;
+}
+
+.menus-container .avatar+i {
+  display: none;
+}
+
+.listing {
+  border: none;
+}
+
+.fa-play {
+  font-size: 1.2em;
+  background-color: #ddd;
+  border-radius: 100%;
+  width: 25px;
+  height: 28px;
+  padding: 8px 0 0 15px;
+  margin-right: 8px;
+}
+
+.fa-play:hover {
+  background-color: #999;
+  color: #fff;
+}
+
+.fc-event .fc-content {
+  padding: 4px 8px;
+}
+
+.board-add-icon {
+  float: left;
+  padding: 0 5px;
+}
+
+.board-add-icon i {
+  text-decoration: none;
+  color: #289E7B;
+  font-size: 1.4em;
+}
+
+.board-add-icon i:focus,
+.board-add-icon i:hover {
+  text-decoration: none;
+  color: #23292d;
+}
+
+.form-column select {
+  font-size: 1.2em;
+  margin: 10px 0 2px 0;
+}
+
+.form-column:nth-of-type(2) {
+  padding: 10px 25px;
+  background-color: #f7f7f7;
+}
+
+.form-actions {
+  font-size: 1.2em;
+}
+
+.page-header ul.dropdown-submenu-open {
+  margin: 10px 0 0 -10px;
+  padding: 0;
+}
+
+.select-dropdown-input-container {
+  position: relative;
+  border: 2px solid #3c3c3c;
+  width: 20em;
+  max-width: 20em;
+  border-radius: 0;
+  background-color: #222427;
+  margin-right: 1em;
+}
+
+header input {
+  color: #fff !important;
+}
+
+.board-selector-container input,
+.board-selector-container textarea {
+  background-color: inherit;
+  color: #fff;
+}
+
+.select-dropdown-input-container .select-dropdown-chevron {
+  position: relative;
+  color: #fff;
+  top: auto;
+  right: -5%;
+}
+
+ul.dropdown-submenu-open {
+  margin: 10px 0 0 -10px;
+  padding: 0;
+  background-color: #fff;
+  border: 1px solid #222427;
+  border-radius: 0;
+  box-shadow: 0 0.1em 0.5em rgba(0, 0, 0, 0.5);
+}
+
+.dropdown-submenu-open .no-hover {
+  cursor: default;
+  padding: 1em;
+  font-size: 1em;
+  background-color: #222427;
+  color: #fff;
+}
+
+.dropdown-submenu-open li {
+  padding: 6px 10px;
+}
+
+#select-dropdown-menu {
+  background-color: #222427;
+  border-color: #222427;
+}
+
+.select-dropdown-menu-item.active {
+  color: #fff;
+  background: #2c52e3;
+}
+
+.views li {
+  padding: 0.4em;
+}
+
+.filters {
+  border: none;
+}
+
+.filters ul.dropdown-submenu-open {
+  margin: 6px 0 0 8px;
+}
+
+.markdown pre {
+  background: #3333330d;
+  max-height: 600px;
+  overflow: auto;
+  margin-bottom: 1em;
+  padding: 5px;
+  color: #242729;
+  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif;
+}
+
+a i.web-notification-icon {
+  color: #D45353;
+}
+
+.fa-play {
+  font-size: 1.2em;
+  background-color: #ddd;
+  border-radius: 100%;
+  width: 25px;
+  height: 25px !important;
+  padding: 9px 3px 0 9px !important;
+  margin-right: 8px;
+}
+
+#modal-box {
+  padding: 10px;
+}
+
+.table-list-category {
+  padding: 2px 2px 2px 5px;
+}
+
+.table-list-row {
+  transition: 0.15s;
+}
+
+.table-list-row:hover {
+  background: #f5f5f5;
+  border: none;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+}
+
+.page-header {
+  margin: 15px 0;
+  background-color: #ffffff;
+  padding: 6px 10px 10px 10px;
+  border-bottom: 1px solid #f7f7f7;
+  border-top: 1px solid #f7f7f7;
+}
+
+.comments .comment-highlighted {
+  background-color: #fff;
+  border: 2px solid #F5E982;
+  border-radius: 0;
+}
+
+.comments .comment:hover {
+  background: #f5f5f5;
+  border-radius: 0;
+}
+
+.comments .comment:nth-child(even):not(.comment-highlighted):hover {
+  border-radius: 0;
+  background: #f5f5f5;
+}
+
+.comments .comment:nth-child(even):not(.comment-highlighted) {
+  background: #fbfbfb;
+  border-radius: 0;
+}
+
+.sidebar {
+  background-color: #f7f7f7;
+  padding: 7px;
+  border-radius: 0;
+  border-left: 2px solid #e9e9e9;
+  box-shadow: 1px 0px 7px 0 rgba(46, 61, 73, .12);
+}
+
+.input-addon * {
+  border-radius: 0 !important;
+}
+
+input[type="number"]:focus,
+input[type="date"]:focus,
+input[type="email"]:focus,
+input[type="password"]:focus,
+input[type="text"]:focus {
+  color: #000;
+  border-color: #2c52e3;
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(222, 222, 222, 0.25);
+}
+
+textarea:focus {
+  color: #000;
+  border-color: #2c52e3;
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(222, 222, 222, 0.25);
+}
+
+input[type="number"],
+input[type="date"],
+input[type="email"],
+input[type="password"],
+input[type="text"]:not(.input-addon-field) {
+  padding: 0.4em;
+  transition: box-shadow 1s;
+}
+
+.select-dropdown-input-container input.select-dropdown-input {
+  width: 80%;
+}
+
+.text-editor textarea {
+  padding: 3px;
+  transition: box-shadow 1s;
+}
+
+.table-list-row {
+  padding: 0.4em;
+}
+
+select {
+  border: 1px solid #ccc;
+  background: #f9f9f9;
+  padding: 3px;
+}
+
+.btn-blue {
+  border-color: #2c52e3;
+  background-color: #2c52e3;
+  color: #fff;
+}
+
+.btn-blue:hover,
+.btn-blue:focus {
+  border-color: #2c52e3;
+  background: #ffffff;
+  color: #2c52e3;
+}
+
+.select2-container--default.select2-container--focus .select2-selection--multiple {
+  border: solid #2c52e3 1px;
+  outline: 0;
+}
+
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+  background-color: #2c52e3;
+  color: #fff;
+}
+
+.board-column-header-task-count {
+  display: none;
+}
+
+.board-add-icon i:focus,
+.board-add-icon i:hover {
+  text-decoration: none;
+  color: #91C259;
+}
+
+.board-column-title *:hover {
+  color: #aaa;
+}
+/*
+.board-column-title *:hover {
+  color: #aaa;
+} */
+
+.board-add-icon i {
+  text-decoration: none;
+  color: #2c52e3;
+  font-size: 1.4em;
+}
+
+.dropdown-submenu-open li:not(.no-hover):hover {
+  background: #2c52e3;
+  color: #fff;
+}
+
+.sidebar>ul li.active a {
+  color: #2c52e3;
+  font-weight: bold;
+}
+
+.table-list-row .table-list-title a:hover,
+.table-list-row .table-list-title a:focus {
+  text-decoration: underline;
+  color: #2c52e3;
+}
+
+.image-slideshow-overlay img {
+  display: block;
+  margin: auto;
+  max-width: 100%;
+}
+
+.input-addon-item {
+  background-color: #222427;
+  color: #fff;
+}
+
+span.task-date-overdue {
+  opacity: 1.0;
+  color: #e90529;
+}
+
+.board-add-icon i:focus,
+.board-add-icon i:hover {
+  text-decoration: none;
+  color: #2BBF5F;
+}
+
+span.task-date-today {
+  opacity: 1.0;
+  color: #2c52e3;
+}
+
+#task-summary h2 {
+  color: #222427;
+}
+
+.input-addon {
+  position: relative;
+  top: -0.07em;
+}
+
+.input-addon-field, .input-addon-item {
+  padding: 0.25em 0.75em;
+}
+
+#modal-box {
+  border-radius: 0;
+}
+
+.selection * {
+  border-radius: 0 !important;
+}
+
+.task-date {
+  font-size: 1.5em;
+  color: #000;
+}
+
+.task-board-icons-row {
+  font-size: 1.2em;
+}
+
+.sidebar > ul a {
+  color: #222427;
+}
diff --git a/plugins/Customizer/Assets/css/themes/Material.css b/plugins/Customizer/Assets/css/themes/Material.css
new file mode 100644
index 00000000..706afaf0
--- /dev/null
+++ b/plugins/Customizer/Assets/css/themes/Material.css
@@ -0,0 +1,1427 @@
+/*!
+ * Material Like - Theme for Kanboard
+ * Licensed under the MIT license - kanboard-theme-material-like/LICENSE
+ * https://github.com/erichk4/kanboard-theme-material-like
+ * Copyright (c) 2017 Erich Munz
+ */
+
+@import "https://fonts.googleapis.com/css?family=Open+Sans";
+
+/* CSSTidy 1.5.2: Mon, 25 Sep 2017 09:04:23 -0700 */
+body
+{
+	font-family:'Open Sans',sans-serif;
+	font-size:14px;
+	background-color:#f1f1f1!important
+}
+
+div#modal-box {
+    width: max-content!important;
+}
+
+.logo a {
+    opacity: 1;
+    color: inherit;
+    text-decoration: none;
+}
+
+.title-container .logo {
+    display: block;
+	margin-bottom: 4px;
+}
+
+.title-container .title:before {
+	font-family: FontAwesome;
+    content: "\f054";
+    display: inline-block;
+    padding-right: 2px;
+    vertical-align: middle;
+	font-size: 0.6em;
+}
+
+#task-summary h2:before {
+	font-family: FontAwesome;
+    content: "\f017";
+    display: inline-block;
+    padding-right: 8px;
+    vertical-align: middle;
+	font-size: 0.6em;
+}
+
+@media only screen and (max-width: 1024px) {
+	body
+	{
+		font-size:12px
+	}
+}
+
+.ui-widget-shadow {
+    -webkit-box-shadow: 0 0 5px #ccc;
+    box-shadow: 0 0 5px #ccc;
+}
+
+.ui-widget.ui-widget-content {
+    border: 1px solid #ccc;
+}
+
+.sidebar-content .task-list-avatars .avatar
+{
+	border:none;
+	background:none;
+	padding:0;
+	overflow:initial;
+	margin:0;
+	margin-right:3px;
+	margin-top:5px
+}
+
+tr td:last-child {
+    border-right:1px solid #e5e5e5;
+}
+
+tr:last-child td {
+	border-bottom:1px solid #e5e5e5;
+}
+
+.sidebar-content .accordion-section
+{
+	box-shadow:0 1px 1px rgba(0,0,0,.04);
+	background-color:#fff;
+	border:1px solid #e5e5e5;
+	padding:12px
+}
+
+.accordion-section.accordion-collapsed	.accordion-title
+{
+	border-bottom:none
+}
+
+.project-overview-columns
+{
+	box-shadow:0 1px 1px rgba(0,0,0,.04);
+	background-color:#fff;
+	border:1px solid #e5e5e5;
+	padding:12px
+}
+
+.accordion-section
+{
+	box-shadow:0 1px 1px rgba(0,0,0,.04);
+	background-color:#fff;
+	border:1px solid #e5e5e5;
+	padding:12px;
+	margin-bottom:25px
+}
+
+.sidebar-content .accordion-title h3
+{
+	margin-top:12px;
+	background-color:none;
+	border:none;
+	box-shadow:none;
+	position:relative;
+	padding:12px;
+	padding-left:0;
+	margin-bottom:-11px
+}
+
+.sidebar-content .filter-box
+{
+	float:none;
+	border:1px solid #e5e5e5;
+	box-shadow:0 1px 1px rgba(0,0,0,.04);
+	max-width:inherit;
+	margin-top:12px
+}
+
+.sidebar-content .filter-box form
+{
+	margin-top:0
+}
+
+.filter-box form
+{
+	border:none;
+	box-shadow:none
+}
+
+.js-chart-task-time-column-rendered
+{
+	background:#fff;
+	margin-top:10px;
+	padding:20px 0;
+	margin-bottom:14px;
+	border:1px solid #e5e5e5;
+	box-shadow:0 1px 1px rgba(0,0,0,.04)
+}
+
+.panel li
+{
+	list-style-type:square;
+	margin-left:20px;
+	line-height:1.8em
+}
+
+.sidebar-content .activity-event .avatar
+{
+	border-radius:0;
+	padding:8px 35px 8px 10px;
+	margin-top:10px;
+	margin-bottom:15px;
+	border:none;
+	color:#333;
+	background-color:transparent;
+	overflow:auto;
+	box-shadow:none
+}
+
+.project-header
+{
+	background:#fff;
+	padding:0;
+	margin-top:10px;
+	margin-bottom:10px
+}
+
+.task-board-title
+{
+	margin-top:5px;
+	margin-bottom:20px
+}
+
+#modal-overlay
+{
+	position:fixed;
+	top:0;
+	left:0;
+	width:100%;
+	height:100%;
+	background:rgba(0,0,0,0.36);
+	overflow:auto;
+	z-index:100
+}
+
+#modal-box .page-header
+{
+	box-shadow:none;
+	background:#fff;
+	padding:10px 20px 10px 0;
+	border:none;
+	border-bottom:1px solid #e5e5e5;
+	margin-top:0;
+	margin-bottom:10px
+}
+
+.task-form-secondary-column
+{
+	max-width:250px;
+	min-width:200px;
+	max-height:600px;
+	overflow:auto;
+	width:20%;
+	background:#f2f2f2;
+	padding:20px
+}
+
+#modal-box form
+{
+	margin-top:10px;
+	background-color:#fff;
+	border:none;
+	box-shadow:none;
+	position:relative;
+	padding-left:0
+}
+
+.table-list-row:hover
+{
+	background: rgba(51, 146, 204, 0.1);
+	border-bottom:none;
+	border-right:none
+}
+
+.table-list-row.table-border-left
+{
+	border-left:none
+}
+
+.filter-box
+{
+	float:right
+}
+
+.project-header .views-switcher-component
+{
+	margin-top:16px;
+	float:left
+}
+
+.project-header .dropdown-component
+{
+	margin-top:16px;
+	margin-right:5px;
+	float:left
+}
+
+.sidebar-title
+{
+	padding:8px
+}
+
+input[type="number"],input[type="date"],input[type="email"],input[type="password"],input[type="text"]:not(.input-addon-field)
+{
+	color:#999;
+	border:2px solid #ccc;
+	max-width:88.5%;
+	font-size:1em;
+	height:25px;
+	padding:8px;
+	font-family:inherit
+}
+
+.select-dropdown-input-container input[type="text"]
+{
+	border:none
+}
+
+.select-dropdown-input-container
+{
+	position:relative;
+	border:2px solid #ccc;
+	border-radius:0
+}
+
+.select-dropdown-input-container .select-dropdown-chevron
+{
+	color:#555;
+	position:absolute;
+	top:12px;
+	right:8px;
+	cursor:pointer
+}
+
+textarea
+{
+	max-width:99%;
+	height:200px;
+	font-size:1em;
+	color:#999;
+	border:2px solid #ccc;
+	width:300px;
+	padding:8px;
+	font-family:inherit
+}
+
+select
+{
+	padding:8px;
+	max-width:95%;
+	width:200px;
+	border:#ccc 2px solid
+}
+
+.sidebar>ul li.active a
+{
+	color:#3392cc;
+	font-weight:700
+}
+
+.sidebar>ul li.active
+{
+	border-left:5px solid #3392cc;
+	padding-left:8px
+}
+
+.page-header
+{
+	margin-top:14px;
+	margin-bottom:0
+}
+
+.btn
+{
+	padding:10px 16px
+}
+
+.page-header,header
+{
+	border:1px solid #e5e5e5;
+	box-shadow:0 1px 1px rgba(0,0,0,.04);
+	background:#fff;
+	padding:20px
+}
+
+header {
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    border-bottom: 1px solid #dedede;
+}
+
+header .menus-container
+{
+	width:10%;
+	margin-top:12px
+}
+
+header .title-container
+{
+	width:65%;
+	margin-top:10px
+}
+
+.sidebar-content fieldset
+{
+	margin-top:10px;
+	margin-bottom:10px;
+	position:relative
+}
+
+.sidebar-content .panel,.sidebar-content fieldset
+{
+	border:none;
+	border-bottom:1px solid #efefef
+}
+
+.sidebar-content .avatar,.sidebar-content .panel
+{
+	border-radius:0;
+	padding:8px 35px 8px 10px;
+	margin-top:10px;
+	margin-bottom:15px;
+	border:1px solid #e5e5e5;
+	color:#333;
+	background-color:#fff;
+	overflow:auto;
+	box-shadow:0 1px 1px rgba(0,0,0,.04)
+}
+
+.table-list
+{
+	box-shadow:0 1px 1px rgba(0,0,0,.04);
+	background-color:#fff;
+	border:1px solid #e5e5e5
+}
+
+.table-list-header,.table-list-row
+{
+	border:none
+}
+
+.sidebar
+{
+	max-width:240px;
+	min-width:190px;
+	width:18%;
+	border:1px solid #e5e5e5;
+	box-shadow:0 1px 1px rgba(0,0,0,.04);
+	background-color:#fff;
+	margin-top:12px
+}
+
+label
+{
+	cursor:pointer;
+	display:block;
+	margin-top:10px;
+	margin-bottom:4px;
+	font-weight:700
+}
+
+.sidebar-content legend
+{
+	top:14px;
+	left:0;
+	right:0;
+	padding-bottom:7px;
+	font-size:1.2em
+}
+
+.sidebar-icons>ul li
+{
+	padding-left:12px
+}
+
+.sidebar-icons>ul li:hover,.sidebar-icons>ul li.active
+{
+	padding-left:12px;
+	border-left:none
+}
+
+.sidebar-content h3,form h3
+{
+	margin-top:12px;
+	background-color:#fff;
+	border:1px solid #e5e5e5;
+	box-shadow:0 1px 1px rgba(0,0,0,.04);
+	position:relative;
+	padding:12px;
+	margin-bottom:-11px
+}
+
+#task-summary h2
+{
+	margin-top:12px;
+	background-color:#fff;
+	border:1px solid #e5e5e5;
+	box-shadow:0 1px 1px rgba(0,0,0,.04);
+	position:relative;
+	padding:12px
+}
+
+.activity-date,.activity-description,.btn,.buttons-header,.documentation,.dropdown-submenu-open li,.fc-event,.form-help,.menu-inline li,.page-header li,.project-overview-column span,.project-overview-columns,.sidebar,.subtasks-table,.table-list,.table-list-row .table-list-icons,.table-small,.task-board,.task-board-category,.task-board-title,.task-summary-buttons,.task-summary-column,.textarea-dropdown li,.tooltip .fa-info-circle,.views,div.ganttview-vtheader-series-name,header ul,legend,table
+{
+	font-size:1em
+}
+
+.ui-widget
+{
+	font-family:'Open Sans',sans-serif;
+	font-size:1em
+}
+
+#ui-datepicker-div,.ui-datepicker table,div.ui-tooltip
+{
+	font-size:1em
+}
+
+.assign-me,.comment-actions,.comment-date,.dashboard-project-stats span
+{
+	font-size:.85em
+}
+
+input[type=date],input[type=email],input[type=number],input[type=password],input[type=text]
+{
+	font-family:'Open Sans',sans-serif;
+	font-size:14px
+}
+
+input[type=file]
+{
+	font-family:'Open Sans',sans-serif;
+	font-size:14px
+}
+
+select
+{
+	font-family:'Open Sans',sans-serif;
+	font-size:14px
+}
+
+.filter-box input[type=text]
+{
+	font-size:14px
+}
+
+.chosen-container
+{
+	font-size:14px
+}
+
+.CodeMirror,.editor-toolbar,.filter-box div.dropdown:last-child,.filter-box input[type=text],.input-addon-item:last-child,.panel,.table-list-header,.table-list-row:last-child,.views li:first-child,.views li:last-child
+{
+	border-bottom-left-radius:0;
+	border-top-left-radius:0;
+	border-bottom-right-radius:0;
+	border-top-right-radius:0
+}
+
+#modal-box,.alert,.btn,.documentation,.listing,.markdown pre,.task-board,.task-show-title,.task-summary-container,ul.dropdown-submenu-open
+{
+	border-radius:0
+}
+
+.ui-corner-all,.ui-corner-bottom,.ui-corner-br,.ui-corner-right
+{
+	border-bottom-right-radius:0;
+	border-bottom-left-radius:0;
+	border-top-right-radius:0;
+	border-top-left-radius:0
+}
+
+.select2-container--default .select2-selection--multiple,.select2-container--default .select2-selection--single
+{
+	border-radius:0
+}
+
+#select-dropdown-menu,.select-dropdown-input-container
+{
+	border-radius:0
+}
+
+#select-dropdown-menu
+{
+	border-top:none
+}
+
+.chosen-container .chosen-results li.highlighted
+{
+	background-color:#36c;
+	background-image:none
+}
+
+.chosen-container-single .chosen-single
+{
+	-webkit-box-shadow:none;
+	box-shadow:none;
+	background:#fff
+}
+
+.chosen-container-active.chosen-with-drop .chosen-single
+{
+	background:#fff
+}
+
+.color-picker-square.color-yellow,.task-board.color-yellow,.task-summary-container.color-yellow
+{
+	background-color:#ffeb8e!important;
+	border-color:#e4c600!important
+}
+
+.alert
+{
+	background-color:#f7e400;
+	border-color:#e8d700;
+	color:#776e00
+}
+
+a
+{
+	color:#3392cc
+}
+
+a:hover
+{
+	color:#3392cc
+}
+
+a:focus
+{
+	color:#3392cc
+}
+
+h2
+{
+	font-size:1.3em;
+	font-weight:700
+}
+
+h3
+{
+	font-size:1.3em;
+	font-weight:700
+}
+
+legend
+{
+	font-weight:700
+}
+
+input[type=date],input[type=email],input[type=number],input[type=password],input[type=text]
+{
+	padding-left:5px;
+	border-color:#ccc;
+	color:#333
+}
+
+input[type=date]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=text]:focus
+{
+	-webkit-box-shadow:none;
+	box-shadow:none
+}
+
+input[type=text]:not(.input-addon-field)
+{
+	color:#333
+}
+
+textarea
+{
+	padding:5px
+}
+
+textarea:focus
+{
+	-webkit-box-shadow:none;
+	box-shadow:none
+}
+
+.select2-container--default,.select2-selection--single
+{
+	min-width:200px;
+	border-color:#ccc
+}
+
+.select2-container--default .select2-selection__rendered,.select2-selection--single .select2-selection__rendered
+{
+	color:#333
+}
+
+.select2-container--default .select2-selection--multiple,.select2-selection--single .select2-selection--multiple
+{
+	border-color:#ccc;
+	border-width:2px
+}
+
+.select2-container--default .select2-selection--single
+{
+	background-color:#fff;
+	border:2px solid #ccc;
+	border-radius:0
+}
+
+.color-picker-option
+{
+	height:20px
+}
+
+#select-dropdown-menu
+{
+	overflow:auto
+}
+
+table select
+{
+	margin-top:0
+}
+
+.filter-box input[type=text]
+{
+	padding-left:5px
+}
+
+.form-actions
+{
+	margin-bottom:4px
+}
+
+.form-column ul
+{
+	margin-top:5px
+}
+
+.form-help
+{
+	margin-top:5px;
+	font-size:.85em;
+	color:gray;
+	font-style:italic
+}
+
+.form-required
+{
+	color:#900
+}
+
+.buttons-header
+{
+	font-size:.8em;
+	margin-top:10px;
+	margin-bottom:15px
+}
+
+.btn
+{
+	font-size:1.2em;
+	font-weight:400;
+	cursor:pointer;
+	display:inline-block;
+	border-radius:2px;
+	padding:8px 18px;
+	margin:0;
+	border:1px solid #ccc;
+	background:#fff;
+	color:#000
+}
+
+.btn-blue
+{
+	background:#3392cc;
+	border:none;
+	color:#fff
+}
+
+.btn-blue:focus,.btn-blue:hover
+{
+	background:#036;
+	border:none
+}
+
+.btn-red
+{
+	background:#900;
+	border:none;
+	color: #fff;
+}
+
+.btn-red:focus,.btn-red:hover
+{
+	background:#600;
+	border:none
+}
+
+table
+{
+	border-collapse:separate;
+	margin-bottom:30px;
+	padding:20px;
+	background-color:#fff;
+	border:1px solid #e5e5e5;
+	box-shadow:0 1px 1px rgba(0,0,0,.04)
+}
+
+.table-small {
+	border-collapse:separate;
+	margin-bottom:0;
+	padding:4px;
+	background-color:#fff;
+	border:none;
+	box-shadow:none
+}
+
+table th
+{
+	background:#eee
+}
+
+table td,table th
+{
+	border-top:1px solid #e5e5e5;
+	/*border-right:1px solid #e5e5e5;*/
+	border-bottom:none;
+	border-left:1px solid #e5e5e5;
+	padding:10px;
+	border-collapse:collapse
+}
+
+.table-list-header
+{
+	background:#fff;
+	border-color:#ccc;
+	border-bottom:1px solid #efefef
+}
+
+.table-list-header .table-list-header-count
+{
+	margin-left:15px;
+	font-weight:700
+}
+
+.table-list-row
+{
+	padding:10px 15px;
+	border-color:#e5e5e5
+}
+
+.table-list-row.color-yellow
+{
+	border-left:solid 5px #e4c600!important
+}
+
+.table-list-row:hover
+{
+	border-right-color:#e5e5e5;
+	border-bottom-color:#e5e5e5;
+	border-top-color:#e5e5e5
+}
+
+.table-list-row .table-list-details
+{
+	line-height:22px;
+	margin-bottom:5px
+}
+
+.sidebar-content
+{
+	width:calc(100% - 240px)
+}
+
+@media (max-width: 480px) {
+	.sidebar-content
+	{
+		width:100%
+	}
+}
+
+.page-header
+{
+	background:#fff;
+	padding:10px 20px 10px 15px;
+	border:1px solid #e5e5e5;
+	box-shadow:0 1px 1px rgba(0,0,0,.04);
+	margin-top:15px;
+	margin-bottom:5px
+}
+
+.page-header:first-child
+{
+	border-top:none
+}
+
+.page-header h2
+{
+	font-size:1.3em;
+	border:none
+}
+
+.page-header ul
+{
+	margin-top:5px;
+	margin-bottom:5px
+}
+
+.page-header ul .fa
+{
+	color:#036
+}
+
+.page-header ul a
+{
+	text-decoration:none
+}
+
+.project-header
+{
+	background:#fff;
+	padding:12px;
+	margin-top:10px;
+	margin-bottom:10px;
+	overflow:auto;
+	border:1px solid #e5e5e5;
+	box-shadow:0 1px 1px rgba(0,0,0,.04)
+}
+
+.project-header .input-addon-item
+{
+	background:#fff;
+	border-color:#ccc
+}
+
+.sidebar-content .page-header ul
+{
+	margin-top:7px;
+	margin-bottom:3px
+}
+
+#board-container
+{
+	overflow-x:inherit
+}
+
+.board-add-icon
+{
+	padding-top:2px;
+	line-height:10px
+}
+
+.board-add-icon a i
+{
+	font-size:1em;
+	color:#3392cc
+}
+
+.board-add-icon a:hover i
+{
+	color:#036
+}
+
+.board-column-header-task-count
+{
+	color:#999;
+	font-size:.85em
+}
+
+.task-board
+{
+	padding:10px;
+	margin:2px 2px 6px
+}
+
+div.task-board-recent
+{
+	border-width:0
+}
+
+.task-board-icons,.task-list-icons
+{
+	font-size:.8em;
+	padding:4px;
+	background:rgba(255,255,255,0.41)
+}
+
+.task-board-category,.task-tags li
+{
+	padding:2px 6px
+}
+
+.task-tags li
+{
+	border-color:rgba(102,102,102,0.5);
+	color:#666;
+	background-color:rgba(255,255,255,0.5);
+	font-size:.9em
+}
+
+.project-overview-column strong
+{
+	font-size:2em
+}
+
+.project-overview-column
+{
+	border-radius:0;
+	min-width:100px;
+	margin-right:20px
+}
+
+.activity-event
+{
+	border-bottom:1px solid #e5e5e5;
+	padding:12px;
+	overflow:auto;
+	background:#fff
+}
+
+.activity-event:nth-child(even) {
+	background: #fff;
+}
+
+.activity-event:nth-child(even):hover
+{
+	background:rgba(51, 146, 204, 0.1)
+}
+
+.activity-event:hover {
+    background: rgba(51, 146, 204, 0.1);
+}
+
+.activity-title
+{
+	border:none
+}
+
+.editor-toolbar
+{
+	border-top-color:#ccc;
+	border-left-color:#ccc;
+	border-right-color:#ccc
+}
+
+.CodeMirror
+{
+	border-color:#ccc
+}
+
+#task-summary h2
+{
+	font-size:1.6em;
+	color:#333
+}
+
+.task-show-title h2
+{
+	font-size:1.6em;
+	color:#333
+}
+
+.comment-sorting
+{
+	font-size:11px
+}
+
+.task-summary-column
+{
+	color:#333
+}
+
+.task-list-tag
+{
+	background:#eee;
+	border-color:#ccc
+}
+
+.table-list-category
+{
+	border-color:#ccc
+}
+
+.subtask-cell
+{
+	border-color:#ccc
+}
+
+.subtask-cell:first-child
+{
+	padding-left:0
+}
+
+.task-list-subtasks
+{
+	margin-top:5px
+}
+
+.task-list-subtask:last-child .subtask-cell
+{
+	border-bottom:1px dotted #e5e5e5
+}
+
+.text-editor .text-editor-toolbar
+{
+	width:687px;
+	max-width:98%;
+	margin-top:20px;
+	margin-bottom:5px;
+	padding:12px;
+	background:#f2f2f2
+}
+
+.text-editor textarea
+{
+	width:696px;
+	max-width:98%
+}
+
+.alert
+{
+	margin-bottom:30px
+}
+
+.dropdown-submenu-open li:hover:not(.no-hover),.textarea-dropdown .active,.textarea-dropdown li:hover
+{
+	background:#3392cc
+}
+
+.accordion-title
+{
+	background:#fff;
+	padding:4px 0;
+	border-bottom:1px solid #ccc
+}
+
+.accordion-title h3
+{
+	background:0 0;
+	padding-left:0
+}
+
+.views li
+{
+	white-space:nowrap;
+	background:#fafafa;
+	border:1px solid #ddd;
+	border-right:none;
+	padding:8px;
+	display:inline
+}
+
+.pagination
+{
+	margin-bottom:30px
+}
+
+.activity-content
+{
+	margin-left:65px
+}
+
+#board_selector_chosen
+{
+	width:350px!important
+}
+
+#login-top
+{
+	margin-bottom: 20px;
+    text-align: center;
+}
+
+#login-bottom
+{
+	margin-top:40px
+}
+
+#login-bottom ul
+{
+	list-style-type:none
+}
+
+#login-bottom ul li
+{
+	margin-left:0
+}
+
+#modal-header
+{
+	margin-top:5px;
+	margin-bottom:5px;
+	font-size:1.5em;
+	float:right
+}
+
+#modal-content
+{
+	padding:0 20px
+}
+
+.documentation img
+{
+	border-color:#ccc;
+	margin-top:40px;
+	margin-bottom:20px
+}
+
+.documentation li
+{
+	line-height:1.6em
+}
+
+.documentation h1
+{
+	padding-bottom:5px;
+	border-bottom:1px solid #e5e5e5;
+	margin-top:40px;
+	margin-bottom:30px
+}
+
+.documentation h1:first-child
+{
+	margin-top:5px
+}
+
+.documentation h2
+{
+	padding-bottom:5px;
+	border-color:#e5e5e5;
+	margin-top:25px;
+	margin-bottom:10px
+}
+
+.documentation h3
+{
+	margin-top:25px;
+	margin-bottom:10px
+}
+
+.markdown h1
+{
+	margin-top:20px;
+	margin-bottom:10px;
+	padding-bottom:5px;
+	border-bottom:1px solid #e5e5e5
+}
+
+.markdown h2
+{
+	margin-top:20px;
+	margin-bottom:10px;
+	padding-bottom:5px;
+	border-bottom:1px solid #e5e5e5
+}
+
+.markdown h3
+{
+	margin-top:20px;
+	margin-bottom:10px
+}
+
+.markdown p
+{
+	margin-bottom:5px
+}
+
+@media print {
+	a.btn
+	{
+		display:none
+	}
+	
+	header
+	{
+		display:block
+	}
+	
+	header nav ul
+	{
+		display:none
+	}
+	
+	.page-header
+	{
+		display:block
+	}
+	
+	.page-header ul
+	{
+		display:none
+	}
+	
+	.project-header
+	{
+		display:none
+	}
+	
+	.filter-box
+	{
+		display:none
+	}
+	
+	.dropdown ul
+	{
+		display:none
+	}
+	
+	#board-container .board-add-icon
+	{
+		display:none
+	}
+	
+	#board-container a.dropdown-menu i
+	{
+		display:none
+	}
+	
+	#task-view .sidebar
+	{
+		display:block
+	}
+	
+	#task-view .sidebar h2
+	{
+		display:none
+	}
+	
+	#task-view .sidebar ul
+	{
+		display:none
+	}
+	
+	#task-view .sidebar h2:first-child
+	{
+		display:block
+	}
+	
+	#task-summary h2,.task-show-title h2,.task-summary-column span
+	{
+		color:#000
+	}
+	
+	.task-summary-column .smaller
+	{
+		display:none
+	}
+	
+	.accordion-collapsed
+	{
+		display:none
+	}
+	
+	#comments .comment-sorting
+	{
+		display:none
+	}
+	
+	#comments .comment-actions
+	{
+		display:none
+	}
+	
+	a,th a
+	{
+		color:#000;
+		text-decoration:none
+	}
+	
+	.table-fixed
+	{
+		white-space:normal
+	}
+	
+	.table-fixed td
+	{
+		-o-text-overflow:clip;
+		text-overflow:clip;
+		white-space:normal
+	}
+	
+	header nav h1 .logo
+	{
+		display:block
+	}
+	
+	.page-header
+	{
+		background:0 0;
+		padding:0 0 10px
+	}
+	
+	.page-header h2
+	{
+		margin:0
+	}
+	
+	header nav h1 .tooltip i
+	{
+		display:none
+	}
+	
+	#board-container
+	{
+		overflow-x:visible
+	}
+	
+	#board-container .board-column-header
+	{
+		padding-left:7px
+	}
+	
+	#task-view .sidebar h2:first-child
+	{
+		margin-top:50px;
+		margin-bottom:5px;
+		font-size:1.6em;
+		font-weight:400
+	}
+	
+	#task-summary .task-summary-container
+	{
+		padding-right:80px
+	}
+	
+	.accordion-title
+	{
+		background:0 0;
+		padding:0;
+		margin-top:40px
+	}
+	
+	.accordion-title h3
+	{
+		margin:0
+	}
+	
+	#comments .avatar
+	{
+		float:left;
+		width:48px
+	}
+	
+	#comments .avatar .avatar-letter
+	{
+		color:#fff;
+		text-align:center
+	}
+	
+	#comments .avatar-48 .avatar-letter
+	{
+		font-size:25px;
+		line-height:48px;
+		width:48px
+	}
+	
+	#comments .avatar-48 div,#comments .avatar-48 img
+	{
+		border-radius:30px
+	}
+}
diff --git a/plugins/Customizer/Assets/css/userthemes/niebieski.css b/plugins/Customizer/Assets/css/userthemes/niebieski.css
new file mode 100644
index 00000000..2d68776c
--- /dev/null
+++ b/plugins/Customizer/Assets/css/userthemes/niebieski.css
@@ -0,0 +1 @@
+header{background-color:#006;background-image:linear-gradient(-180deg,transparent 0%,#FF3333 90%)}header h1,header a .fa{color:#36F}a i.web-notification-icon{color:}body{background:;color:}ul.dropdown-submenu-open,.accordion-title h3{background-color:}.dropdown-submenu-open a{color:}a:hover{color:}a .fa{color:}h1,h2,h3,.accordion-toggle{color:}.table-list-header a{color:}.table-list-header .table-list-header-count{color:}.table-list-row .table-list-title a{color:}.table-list-row .table-list-details strong{color:}.dropdown-menu-link-icon{color:}.page-header h2 a{color:}.sidebar>ul a:hover{color:}.sidebar>ul li.active a{color:}.task-list-icons a:hover{color:}.task-list-icons a:hover i{color:}.subtask-cell a{color:}a{color:}.table-list-category a:hover{color:}.subtask-cell a:hover,.subtask-cell a:focus{color:}a:focus,a:hover{color:}.table-list-header a:hover,.table-list-header a:focus,.task-board a{color:}.table-list-row .table-list-details{color:}.input-addon-field{color:}.page-header h2 a:focus,.page-header h2 a:hover,code{color:}.sidebar>ul a{color:}.task-list-avatars .task-avatar-assignee{color:}.task-list-icons a,.task-list-icons span,.task-list-icons i,.task-date{color:}span.task-date-overdue{color:}.sidebar>ul li.active{border-left:5px solid}.sidebar>ul li.active a:focus,.sidebar>ul li.active a:hover{color:}.sidebar>ul li:hover{border-left:5px solid}.panel{color:}td a.dropdown-menu strong,td a.dropdown-menu strong i{color:}#task-summary h2{color:unset}.comments .comment:hover{background:#efefef40}.comments .comment:nth-child(even):not(.comment-highlighted):hover{background:#efefef40}.comments .comment:nth-child(even):not(.comment-highlighted){background:#efefef40}table.table-striped tr:nth-child(odd){background:#efefef40}header{box-shadow:0 -1px 5px 1px;border-bottom:none}.project-header{margin-bottom:8px;margin-top:8px}.panel{background-color:#efefef40;border:1px solid #efefef40}.task-board{border-width:2px;background:#efefef22!important}div.task-board-recent{border-width:2px}table td{border:none}table th:first-child{border-top-left-radius:8px}table th:last-child{border-top-right-radius:8px}.table-list-header{background:#efefef40;border:1px solid #efefef40;border-radius:5px 5px 0 0;line-height:28px;padding-left:3px;padding-right:3px}.table-list-row{padding-left:3px;padding-right:3px;border-bottom:1px solid #efefef40;border-right:1px solid #efefef40}.table-list-row.table-border-left{border-left:1px solid #efefef40}.table-list-row:nth-child(odd){background:#efefef30}.table-list-row:hover{background:#efefef32;border-bottom:1px solid #efefef32;border-right:1px solid #efefef32}.dropdown-menu-link-icon{text-decoration:none}.dropdown-submenu-open li{border-bottom:1px solid #efefef40}.page-header h2{margin:0;padding:0;font-weight:700;border-bottom:1px dotted #efefef40}.sidebar>ul li{list-style-type:none;line-height:35px;border-bottom:1px dotted #efefef40;padding-left:13px}span.task-icon-age-total{border:1px solid #efefef40;padding:1px 3px 1px 3px;border-top-left-radius:3px;border-bottom-left-radius:3px}span.task-icon-age-column{border:1px solid #efefef40;border-left:none;margin-left:-5px;padding:1px 3px 1px 3px;border-top-right-radius:3px;border-bottom-right-radius:3px}.subtask-cell{padding:4px 10px;border-top:1px dotted #efefef42;border-left:1px dotted #efefef40;display:table-cell;vertical-align:middle}table th{text-align:left;padding:.5em 3px;border:none;background:#efefef40}.views li{white-space:nowrap;background:#efefef40;border:none;border-right:none;padding:4px 8px;display:inline}
\ No newline at end of file
diff --git a/plugins/Customizer/Assets/img/logo-gen.png b/plugins/Customizer/Assets/img/logo-gen.png
new file mode 100644
index 00000000..1df1986f
Binary files /dev/null and b/plugins/Customizer/Assets/img/logo-gen.png differ
diff --git a/plugins/Customizer/Assets/js/customizer.js b/plugins/Customizer/Assets/js/customizer.js
new file mode 100644
index 00000000..ae7c4f13
--- /dev/null
+++ b/plugins/Customizer/Assets/js/customizer.js
@@ -0,0 +1,248 @@
+//Functionality for a slider value feedback
+
+var header_logo_output = $('header_logo_output')[0];
+
+$(document).on('input', 'input[name="headerlogo_size"]', function(e) {
+  header_logo_output.innerHTML = e.currentTarget.value;
+  document.getElementById("hl1").style.height = e.currentTarget.value + "px";
+});
+
+var login_logo_output = $('login_logo_output')[0];
+
+$(document).on('input', 'input[name="loginlogo_size"]', function(e) {
+  login_logo_output.innerHTML = e.currentTarget.value;
+  document.getElementById("ll1").style.height = e.currentTarget.value + "px";
+});
+
+var av_icon_output = $('av_icon_output')[0];
+
+$(document).on('input', 'input[name="av_size"]', function(e) {
+  var siz = e.currentTarget.value;
+  av_icon_output.innerHTML = siz;
+  if (document.querySelector(".avatar-preview .avatar-letter") !== null) {
+  document.querySelector(".avatar-preview .avatar-letter").style.lineHeight = siz + "px";
+  document.querySelector(".avatar-preview .avatar-letter").style.width = siz + "px";
+  document.querySelector(".avatar-preview .avatar-letter").style.fontSize = (siz / 2) + "px";
+  } else {
+  var link = document.querySelector(".avatar-preview img").src;
+  var changedLink = link.substring(0, link.length-2);
+  document.querySelector(".avatar-preview img").src = changedLink + siz;
+  }
+});
+
+var av_radius_output = $('av_radius_output')[0];
+
+$(document).on('input', 'input[name="av_radius"]', function(e) {
+  var rad = e.currentTarget.value;
+  av_radius_output.innerHTML = rad;
+  if (document.querySelector(".avatar-preview .avatar-letter") !== null) {
+  document.querySelector(".avatar-preview .avatar-letter").style.borderRadius = rad + "%";
+  } else {
+  document.querySelector(".avatar-preview img").style.borderRadius = rad + "%";
+  }
+});
+
+var b_av_icon_output = $('b_av_icon_output')[0];
+
+$(document).on('input', 'input[name="b_av_size"]', function(e) {
+  var siz = e.currentTarget.value;
+  b_av_icon_output.innerHTML = siz;
+  if (document.querySelector(".b-avatar-preview .avatar-letter") !== null) {
+  document.querySelector(".b-avatar-preview .avatar-letter").style.lineHeight = siz + "px";
+  document.querySelector(".b-avatar-preview .avatar-letter").style.width = siz + "px";
+  document.querySelector(".b-avatar-preview .avatar-letter").style.fontSize = (siz / 2) + "px";
+  } else {
+  var link = document.querySelector(".b-avatar-preview img").src;
+  var changedLink = link.substring(0, link.length-2);
+  document.querySelector(".b-avatar-preview img").src = changedLink + siz;
+  }
+});
+
+var b_av_radius_output = $('b_av_radius_output')[0];
+
+$(document).on('input', 'input[name="b_av_radius"]', function(e) {
+  var rad = e.currentTarget.value;
+  b_av_radius_output.innerHTML = rad;
+  if (document.querySelector(".b-avatar-preview .avatar-letter") !== null) {
+  document.querySelector(".b-avatar-preview .avatar-letter").style.borderRadius = rad + "%";
+  } else {
+  document.querySelector(".b-avatar-preview img").style.borderRadius = rad + "%";
+  }
+});
+
+
+//Accordion for settings page
+
+document.addEventListener("DOMContentLoaded", function(event) { 
+
+
+    var acc = document.getElementsByClassName("login-accordion");
+    var panel = document.getElementsByClassName('login-accordian-panel');
+    
+    for (var i = 0; i < acc.length; i++) {
+        acc[i].onclick = function() {
+            var setClasses = !this.classList.contains('current');
+            setClass(acc, 'current', 'remove');
+            setClass(panel, 'show', 'remove');
+    
+            if (setClasses) {
+                this.classList.toggle("current");
+                this.nextElementSibling.classList.toggle("show");
+            }
+        }
+    }
+    
+    function setClass(els, className, fnName) {
+        for (var i = 0; i < els.length; i++) {
+            els[i].classList[fnName](className);
+        }
+    }
+});
+
+// Valid for the form id="settings" checkboxes, when the "change" event occurs, the module is sent.
+
+$(document).ready(function(){
+    $("#settings").on("change", "input:checkbox", function(){
+        $("#settings").submit();
+    });
+});
+
+// auto submit on change for user theme
+if (document.getElementById('userthemeSelection')) {
+    document.getElementById('userthemeSelection').onchange = function() {
+        document.getElementById('ts').submit();
+    }
+}
+
+//Live Preview
+
+if (document.getElementById('loginpanel_color')) {
+  document.getElementById('loginpanel_color').oninput = function() {
+    document.getElementById('preview-form-login').style.backgroundColor = document.getElementById('loginpanel_color').value;
+    document.getElementById('preview-form-note').style.backgroundColor = document.getElementById('loginpanel_color').value;
+  }
+
+  document.getElementById('loginbackground_color').oninput = function() {
+    document.getElementById('preview').style.backgroundColor = document.getElementById('loginbackground_color').value;
+  }
+  
+  document.getElementById('form-login_note').oninput = function() {
+    document.getElementById('preview-form-note').innerHTML = document.getElementById('form-login_note').value;
+  }
+
+  document.getElementById('login_shadow_color').oninput = function() {
+    var slider = document.getElementById("login_shadow").value;
+    var color = document.getElementById('login_shadow_color').value;
+    document.getElementById('preview-form-login').style.boxShadow = '0px 0px ' + slider + 'px ' + slider * 0.1 + 'px ' + color;
+    document.getElementById('preview-form-note').style.boxShadow = '0px 0px ' + slider + 'px ' + slider * 0.1 + 'px ' + color;
+  }
+  
+  document.getElementById('login_border_color').oninput = function() {
+    document.getElementById('preview-form-login').style.borderColor = document.getElementById('login_border_color').value;
+    document.getElementById('preview-form-note').style.borderColor = document.getElementById('login_border_color').value;
+  }
+
+  document.getElementById('login_btn_color').oninput = function() {
+    document.getElementById('preview-login-btn').style.backgroundColor = document.getElementById('login_btn_color').value;
+  }
+
+  document.getElementById('login_btn_shadow_color').oninput = function() {
+    var slider = document.getElementById("login_btn_shadow").value;
+    var color = document.getElementById('login_btn_shadow_color').value;
+    document.getElementById('preview-login-btn').style.boxShadow = '0px 0px ' + slider + 'px ' + slider * 0.1 + 'px ' + color;
+  }
+
+  document.getElementById('login_btn_font_color').oninput = function() {
+    document.getElementById('preview-login-btn').style.color = document.getElementById('login_btn_font_color').value;
+  }
+
+  document.getElementById('login_btn_shade_color').oninput = function() {
+    var color = document.getElementById('login_btn_shade_color').value;
+    document.getElementById('preview-login-btn').style.backgroundImage = 'linear-gradient(-180deg, transparent 0%, ' + color + ' 90%';
+  }
+
+  document.getElementById('login_btn_shadow').oninput = function() {
+    var slider = document.getElementById("login_btn_shadow").value;
+    var color = document.getElementById('login_btn_shadow_color').value;
+    document.getElementById('preview-login-btn').style.boxShadow = '0px 0px ' + slider + 'px ' + slider * 0.1 + 'px ' + color;
+  }
+
+  document.getElementById('login_btn_border').oninput = function() {
+    var slider = document.getElementById("login_btn_border").value;
+    var color = document.getElementById('login_btn_border_color').value;
+    document.getElementById('preview-login-btn').style.border = slider + 'px solid ' + color;
+  }
+
+  document.getElementById('login_border').oninput = function() {
+    var slider = document.getElementById("login_border").value;
+    var color = document.getElementById('login_border_color').value;
+    document.getElementById('preview-form-login').style.border = slider + 'px solid ' + color;
+    document.getElementById('preview-form-note').style.border = slider + 'px solid ' + color;
+  }
+
+  document.getElementById('login_shadow').oninput = function() {
+    var slider = document.getElementById("login_shadow").value;
+    var color = document.getElementById('login_shadow_color').value;
+    document.getElementById('preview-form-login').style.boxShadow = '0px 0px ' + slider + 'px ' + slider * 0.1 + 'px ' + color;
+    document.getElementById('preview-form-note').style.boxShadow = '0px 0px ' + slider + 'px ' + slider * 0.1 + 'px ' + color;
+  }
+  
+  document.getElementById('login_btn_width').oninput = function() {
+    var slider = document.getElementById("login_btn_width").value;
+    document.getElementById('preview-login-btn').style.width = slider + 'px';
+  }
+
+  document.getElementById('preview-login-btn').onmouseover = function() {
+    document.getElementById('preview-login-btn').style.color = document.getElementById('login_btn_color').value;
+    document.getElementById('preview-login-btn').style.backgroundColor = document.getElementById('login_btn_font_color').value;
+  }
+
+  document.getElementById('preview-login-btn').onmouseout = function() {
+    document.getElementById('preview-login-btn').style.backgroundColor = document.getElementById('login_btn_color').value;
+    document.getElementById('preview-login-btn').style.color = document.getElementById('login_btn_font_color').value;
+  }
+
+  document.getElementById('form-background_url').oninput = function() {
+    var val = document.getElementById("form-background_url").value;
+    document.getElementById('preview').style.background = 'url("' + val +'") no-repeat center center';
+    document.getElementById('preview').style.backgroundSize = 'cover';
+  }
+}
+
+function OnColorChanged(selectedColor, inputId) {
+              if (inputId == "login_shadow_color") {
+                var slider = document.getElementById("login_shadow").value;
+                document.getElementById("preview-form-login").style.color = selectedColor;
+                document.getElementById("preview-form-note").style.boxShadow = '0px 0px ' + slider + 'px ' + slider * 0.1 + 'px ' + selectedColor;
+              }
+              if (inputId == "loginbackground_color") {
+                var rgbaBox = document.getElementById("preview");
+                rgbaBox.style.backgroundColor = selectedColor;
+              }
+              if (inputId == "loginpanel_color") {
+                document.getElementById("preview-form-login").style.backgroundColor = selectedColor;
+                document.getElementById("preview-form-note").style.backgroundColor = selectedColor;
+              }
+              if (inputId == "login_border_color") {
+                document.getElementById("preview-form-login").style.borderColor = selectedColor;
+                document.getElementById("preview-form-note").style.borderColor = selectedColor;
+              }
+              if (inputId == "login_btn_color") {
+                var rgbaBox = document.getElementById("preview-login-btn");
+                rgbaBox.style.backgroundColor = selectedColor;
+              }
+              if (inputId == "login_btn_shadow_color") {
+                var rgbaBox = document.getElementById("preview-login-btn");
+                var slider = document.getElementById("login_btn_shadow").value;
+                rgbaBox.style.boxShadow = '0px 0px ' + slider + 'px ' + slider * 0.1 + 'px ' + selectedColor;
+              }
+              if (inputId == "login_btn_font_color") {
+                var rgbaBox = document.getElementById("preview-login-btn");
+                rgbaBox.style.color = selectedColor;
+              }
+              if (inputId == "login_btn_shade_color") {
+                var rgbaBox = document.getElementById("preview-login-btn");
+                rgbaBox.style.backgroundImage = 'linear-gradient(-180deg, transparent 0%, ' + selectedColor + ' 90%';
+              }
+}
+
diff --git a/plugins/Customizer/Assets/rgbaColorPicker/rgbaColorPicker.css b/plugins/Customizer/Assets/rgbaColorPicker/rgbaColorPicker.css
new file mode 100644
index 00000000..6db3d7b3
--- /dev/null
+++ b/plugins/Customizer/Assets/rgbaColorPicker/rgbaColorPicker.css
@@ -0,0 +1,167 @@
+/*! Menucool rgba Color Picker v2018.9.12. www.menucool.com/rgba-color-picker */
+
+input.color{
+    width:110px;
+    height: 18px;
+    font-size:11px;
+    border:1px solid #dadada;
+    box-sizing:content-box;
+    padding-left:4px;
+}
+
+#colorpicker
+{
+    padding: 20px;
+    position: absolute;
+    top: 22px;
+    left:auto; right:0;/*If need align to the right, set: left:0;right:auto; */
+    background-color: #FFF;
+    border: 1px solid #BBB;
+    display: none;
+    z-index: 200;
+    box-sizing:content-box;
+    font: normal 10px verdana;
+    color: #666;
+    border-radius:4px;
+    box-shadow:0 1px 8px rgba(0,0,0,0.5);
+}
+
+input.color.up + .colorChooser > #colorpicker {
+    top: -306px;
+}
+
+#colorpicker div
+{
+    float:left;
+    padding:0;
+    box-sizing:content-box;
+}
+#colorpicker div.clear, #colorpicker div.separator
+{
+    float: none;
+    clear: both;
+    border: 0;
+    overflow:hidden;
+    height:0;
+    font-size:0;
+}
+#colorpicker div.separator
+{
+    margin-bottom:8px;
+}
+        
+#colorpicker #colorContainer
+{
+    border:0;
+    border-right: 1px solid black;
+    border-bottom: 1px solid black;
+    cursor: pointer;
+    font-size:0;
+    width:234px;
+}
+#colorContainer div
+{
+    border:0;
+    border-top: solid 1px black;
+    border-left: solid 1px black;
+    width:12px;
+    height:12px;
+    overflow:hidden;
+}
+#colorpicker .w1, #colorpicker .w2 {
+    width:80px;
+    padding-left:4px;
+    border: 1px solid #999;
+    border-radius:3px;
+    position:relative;
+}
+div.w1, div.w2 {
+    height: 22px;
+    line-height: 22px;
+}
+input.w1, input.w2 {
+    font: normal 10px verdana;
+    height: 18px;
+    line-height: 18px;
+}
+#colorpicker .w2 {
+    width:120px;
+    float:right;
+
+}
+#colorpicker div.w2::before {
+    content: " ";
+    width:100%;
+    height:22px;
+    position:absolute;
+    left:0;top:0;
+    z-index:-1;
+}
+.opacitySpan {display:inline-block;padding-top:4px;}
+
+input.rgbaRange {
+    width:118px;
+    margin-left:20px;
+    vertical-align:middle;
+}
+/*brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html*/
+input[type=range]{
+    -webkit-appearance: none;
+    border:none;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+    width: 118px;
+    height: 5px;
+    background: #ddd;
+    border: none;
+    border-radius: 2px;
+}
+
+input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    border: none;
+    height: 15px;
+    width: 15px;
+    border-radius: 50%;
+    background: #888;
+    margin-top: -5px;
+}
+
+input[type=range]:focus {
+    outline: none;
+}
+
+input[type=range]:focus::-webkit-slider-runnable-track {
+    background: #ccc;
+}
+
+#colorpicker .btnOK {
+    width:40px;
+    float:right;
+    height:22px;
+    font-size: 12px;
+    vertical-align:middle;
+    cursor:pointer;
+}
+
+.transChooser, #colorpicker div.w2::before {
+    background: white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAB90RVh0U29mdHdhcmUATWFjcm9tZWRpYSBGaXJld29ya3MgOLVo0ngAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvMDcvMTgBUiN5AAAAKklEQVQokWNkYGDwZcAC/v//j02YgQmrKB4wHDSw4AoNRkZG6tgwHDQAAMuIBmTkVeR2AAAAAElFTkSuQmCC') repeat;
+}
+
+/*Click span.colorChooser will popup the div#colorpicker */
+.colorChooser {
+    width: 46px;
+    height: 20px;
+    border: 1px solid rgba(0,0,0,0.3);
+    display: inline-block;
+    overflow: visible;
+    vertical-align: middle;
+    position: relative;
+    box-sizing: content-box;
+    border-radius: 0 3px 3px 0;
+    user-select: none;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAICAYAAAAftBSpAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAB90RVh0U29mdHdhcmUATWFjcm9tZWRpYSBGaXJld29ya3MgOLVo0ngAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvMjIvMThMTIArAAAAvklEQVQokZXMrw6CUBiG8dc/xUICIpliOHMjH4vZeQU2LV6BmWD2DrwYNgMJyqGQSNC4gMfEpk5xftvbnu83ASTpLmmu/y+QtBYgYO+cI4oiJP2c53lkWQZwAxYDIuBUliW+748CQRCQ5znAFfABPSMCjm3bEsfxRyAMQ5qmATg//70jU2BXFAVJkrwAxhiccwAHYDaGDNv0fY+1FklYa6nrGmD7qf+GCDBVVZGmKV3XAay+tWOIAANcgOVY9wCltDLGu2gdigAAAABJRU5ErkJggg==');
+    background-position:center center;
+    background-repeat:no-repeat;
+}  
diff --git a/plugins/Customizer/Assets/rgbaColorPicker/rgbaColorPicker.js b/plugins/Customizer/Assets/rgbaColorPicker/rgbaColorPicker.js
new file mode 100644
index 00000000..6e7de940
--- /dev/null
+++ b/plugins/Customizer/Assets/rgbaColorPicker/rgbaColorPicker.js
@@ -0,0 +1,492 @@
+/*r
+ColorPickerCallback:cpC
+element:r
+hexInput:a
+bgDiv1:b
+bgDiv2:c
+initIt:d
+dColorContainer:e
+appendSeparator:f
+createColorDivs:g
+stopPropagation:h
+addColorElements:j
+createElm:k
+
+clrContainerEvtHdler_getSelectedColorAndThenUpdateInnerValues:m
+
+createDropdownSpans:o
+
+
+initColorPickerValues:s
+setColorPickerInsideValues:t
+
+rgbaInput:v
+iRgbaRange:w
+getParsedColors:x
+r*/
+
+/*
+Knowledge:  1. backgound-color:none; color:none; are not a valid color.
+            2. Convert rgba to similar hex color: https://stackoverflow.com/questions/15898740/how-to-convert-rgba-to-a-transparency-adjusted-hex
+*/
+
+/*! Menucool rgba Color Picker v2018.9.23. menucool.com/rgba-color-picker */
+var MenuCoolRgbaColorPickerOptions = {
+    initOnPageLoad: true
+};
+
+var rgbaColorPicker = (function (myOptions) {
+    'use strict';
+    // Private members    
+    var addEvent = function (elem, evtType, func) {
+        if (elem.addEventListener) {
+            elem.addEventListener(evtType, func, false);
+        } else if (elem.attachEvent) {
+            elem.attachEvent("on" + evtType, func);
+        }
+        else {
+            // for IE/Mac, NN4, and older
+            elem["on" + evtType] = func;
+        }
+    };
+    var classIsColor = function (myClass) {
+        if (!myClass) return 0;
+        var pattern = /\bcolor\b/;
+        return pattern.test(myClass);
+    };
+    var len = "length";
+    var documentCreateElement = function (tagName) {
+        return document.createElement(tagName);
+    };
+    var hexToRgb = function (hex) {
+        var retVal = 0;
+        if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
+            var c = hex.substring(1).split('');
+            if (c[len] == 3) {
+                c = [c[0], c[0], c[1], c[1], c[2], c[2]];
+            }
+            c = '0x' + c.join('');
+            retVal = [(c >> 16) & 255, (c >> 8) & 255, c & 255];
+        }
+        return retVal;
+    };
+    var hexAlphaToRgba = function (hex, alpha) {
+        var retVal = hexToRgb(hex);
+        return retVal ? 'rgba(' + retVal.join(',') + ',' + alpha + ')' : _invalid;
+    };
+
+    var rgbaToSimilarHex = function (rgba, bgHexColor) {
+        var hex = '';
+        var match = rgba.match(/rgba\((\d+),(\d+),(\d+),([.\d]+)/i);
+        if (match) {
+            var rgbBg = hexToRgb(bgHexColor);
+            var rgbConverted = [];
+            var alpha = +match[4];
+            //now convert hex+alpha to similar hex. //rgba to similar rbg: Color = Color * alpha + Bkg * (1 - alpha);
+            for (var i = 0; i < 3; i++) {
+                rgbConverted.push(Math.floor(+match[i+1] * alpha + (+rgbBg[i]) * (1 - alpha)));
+            }
+            hex = rgbToHex(rgbConverted.join(','));
+            //console.log(hex, rgba);
+        }
+        return hex;
+    };
+
+    var componentToHex = function (c) {
+        var hex = c.toString(16).toUpperCase();
+        return hex[len] == 1 ? "0" + hex : hex;
+    };
+    var rgbToHex = function (rgbStr) {
+        var rgb = rgbStr.split(',');
+        return "#" + componentToHex(+rgb[0]) + componentToHex(+rgb[1]) + componentToHex(+rgb[2]);
+    };
+    /* //jsfiddle.net/salman/f9Re3/
+    var invertColor = function (color) {
+        color = parseInt(color.substring(1), 16); // convert to integer
+        color = 0xFFFFFF ^ color; // invert three bytes
+        color = color.toString(16); // convert to hex
+        color = "#" + ("000000" + color).slice(-6); // pad with leading zeros, also prepend #
+        return color;
+    };*/
+    var validColorNumbers = function (nums) {
+        var numArr = nums.split(',');
+        for (var i = 0; i < numArr[len]; i++) {
+            if (+numArr[i] < 0 || +numArr[i] > 255) return 0;
+        }
+        return 1;
+    };
+
+    var isiOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false);
+
+    var clickOrTouch = isiOS ? "touchstart" : "click";
+
+    var clsNm = "className", sty = "style", bgClr = "backgroundColor", dspl = "display", val = "value", _invalid = "invalid", appendCld = "appendChild", trans = "transparent", undef = "undefined";
+
+    var getStyle = function (elm) {
+        if (window.getComputedStyle) //modern browsers
+            var computedStyle = window.getComputedStyle(elm, null); //null can be replaced with pseudo such as 'hover'
+        else if (elm.currentStyle) //IE
+            computedStyle = elm.currentStyle;
+        else
+            computedStyle = elm[sty];
+
+        return computedStyle;
+    };
+
+    var picker, //the picker instance
+        HexInSession;//unconfirmed chosen hex color
+
+    var btnOKClickHandler = function () {
+        if (picker) {
+            if (+picker.iRgbaRange[val] == 1)
+                var color = picker.hexInput[val];
+            else
+                color = picker.rgbaInput[val];
+            picker.R[picker.i][val] = color;
+            picker.R[picker.i].onchange();
+            picker.element[sty][dspl] = "none";
+            if (typeof OnColorChanged !== "undefined") OnColorChanged(color, picker.R[picker.i].id);
+        }
+    };
+
+    //Picker class constructor
+    var Picker = function () {
+        var that = this;
+        that.hexInput =  //div elelment for displaying selected color as its text
+        that.bgDiv1 = //div elelment for displaying selected color as its background
+        that.bgDiv2 =
+        that.dColorContainer = null; //div element containing colors
+        that.i = -1; //current target index
+        that.R = []; //target inputs that class contains "color"
+        that.S = []; //span elements after the R target inputs: the chooser
+
+        that.initIt();
+    };
+
+    Picker.prototype = {
+        appendSeparator: function (div) {
+            var sep = documentCreateElement("div");
+            if (!div) {
+                div = this.element;
+                sep[clsNm] = "separator";
+            }
+            else
+                sep[clsNm] = "clear";
+            div[appendCld](sep);
+        },
+
+        createColorDivs: function (r, b, g) {
+            var colorCell = documentCreateElement("div");
+            if (r == "TT") {
+                colorCell[clsNm] = "transChooser";
+                colorCell.setAttribute("rgb", trans);
+            }
+            else {
+                colorCell[sty][bgClr] = "#" + r + g + b;
+                colorCell.setAttribute("rgb", "#" + r + g + b);
+            }
+            return colorCell;
+        },
+
+        stopPropagation: function (e) {
+            e = e ? e : window.event;
+            e.cancelBubble = true;
+            if (e.stopPropagation) e.stopPropagation();
+        },
+
+        addColorElements: function () {
+            var that = this;
+            var colorCell;
+            var div = that.dColorContainer;
+
+            //add grayscales to div
+            var grays = ["00", "11", "22", "33", "44", "55", "66", "77", "88", "99", "AA", "BB", "CC", "DD", "EE", "F6", "FF", "TT"];
+            for (var a = 0; a < 18; a++) {
+                colorCell = that.createColorDivs(grays[a], grays[a], grays[a]);
+                div[appendCld](colorCell);
+            }
+            that.appendSeparator(div);
+
+            //add colors to div (first group)
+            var c = ["00", "33", "66", "99", "CC", "FF"];
+            for (var b = 0; b < 6; b++) {
+                for (var r = 0; r < 3; r++) {
+                    for (var g = 0; g < 6; g++) {
+                        colorCell = that.createColorDivs(c[r], c[g], c[b]);
+                        div[appendCld](colorCell);
+                    }
+                }
+                that.appendSeparator(div);
+            }
+            that.appendSeparator(div);
+
+            //add colors to div (second group)
+            for (var b = 0; b < 6; b++) {
+                for (var r = 3; r < 6; r++) {
+                    for (var g = 0; g < 6; g++) {
+                        colorCell = that.createColorDivs(c[r], c[g], c[b]);
+                        div[appendCld](colorCell);
+                    }
+                }
+                that.appendSeparator(div);
+            }
+        },
+        //type: null-div, 1-span, 2-input[type=text], 3-input[type=range], 4-button
+        createElm: function (id, type) {
+            var tagName;
+            switch (type) {
+                case 1:
+                    tagName = "span";
+                    break;
+                case 2:
+                case 3:
+                    tagName = "input";
+                    break;
+                case 4:
+                    tagName = "button";
+                    break;
+                default:
+                    tagName = "div";
+                    break;
+            }
+            var el = documentCreateElement(tagName);
+            if (id[0] == '#')
+                el.id = id.substring(1);
+            else
+                el[clsNm] = id;
+
+            if (type == 2) {
+                el.type = "text";
+                el.setAttribute("spellcheck", "false");
+            }
+            else if (type == 3) {
+                el.type = "range";
+            }
+            if (id != "#colorpicker" && id != "colorChooser")
+                this.element[appendCld](el);
+            return el;
+        },
+
+        initIt: function () {
+            var that = this;
+            // 1. create color picker
+            that.element = that.createElm("#colorpicker");
+            addEvent(that.element, clickOrTouch, that.stopPropagation);
+
+            that.bgDiv1 = that.createElm("w1");
+            that.bgDiv2 = that.createElm("w2");
+            that.appendSeparator();//----------
+            that.hexInput = that.createElm("w1", 2);
+            that.rgbaInput = that.createElm("w2", 2);
+            that.appendSeparator();//----------
+            var btnOK = that.createElm("btnOK", 4);//it will float to right
+            btnOK.setAttribute("type", "button");//avoid submitting form
+            btnOK.innerHTML = "OK";
+            var opacitySpan = that.createElm("opacitySpan", 1);
+            opacitySpan.innerHTML = "Opacity";
+            that.iRgbaRange = that.createElm("rgbaRange", 3);
+            that.appendSeparator();//----------
+
+            that.dColorContainer = that.createElm("#colorContainer");
+            addEvent(that.dColorContainer, "mouseover", function (e) { that.clrContainerEvtHdler_getSelectedColorAndThenUpdateInnerValues(e, 1); });
+            addEvent(that.dColorContainer, "mouseout", function (e) { that.clrContainerEvtHdler_getSelectedColorAndThenUpdateInnerValues(e, 2); });
+            //The following eventType ==3 will also update HexInSession
+            addEvent(that.dColorContainer, clickOrTouch, function (e) { that.clrContainerEvtHdler_getSelectedColorAndThenUpdateInnerValues(e, 3); });
+
+            //that.iRgbaRange.type = "range";
+            that.iRgbaRange[val] = 1;
+            that.iRgbaRange.min = 0;
+            that.iRgbaRange.max = 1;
+            that.iRgbaRange.step = 0.1;
+            addEvent(that.iRgbaRange, "input", function () { that.setColorPickerInsideValues(that.hexInput[val]); });
+
+
+            // 2. populate color picker cells
+            that.addColorElements();
+
+            // 3. create spans after all class="color" elements, set popup events for them
+            that.createDropdownSpans();
+
+            // 4. click on body will hide the #colorpicker
+            //I add this event to document.documentElement other than document.body as sometimes I clicked <html> instead of <body>
+            addEvent(document.documentElement, clickOrTouch, function () { that.element[sty][dspl] = "none"; });
+            addEvent(btnOK, clickOrTouch, btnOKClickHandler);
+
+            //if (typeof OnColorPickerLoaded != undef) OnColorPickerLoaded();
+
+        },
+
+        clrContainerEvtHdler_getSelectedColorAndThenUpdateInnerValues: function (e, eventType) {
+            if (eventType == 2) //mouseout of colorContainer
+            {
+                var selectedColor = HexInSession;
+            }
+            else{ //mouseover, or clickOrTouch
+                if (e.target) var target = e.target; //recognized by all except IE
+                else target = e.srcElement; //IE only knows srcElement. Chrome, Safari, Opera also knows it.
+                if (target.id != "colorContainer"){
+                    selectedColor = target.getAttribute("rgb");
+                    if (eventType == 3) HexInSession = selectedColor;
+                }
+            }
+            if(selectedColor)
+                picker.setColorPickerInsideValues(selectedColor);
+            //picker.stopPropagation(e);//don't need it anymore as we now have: addEvent(that.element, "click", that.stopPropagation);
+        },
+
+        // create choosers(span) after all class="color" elements, set popup events for them
+        createDropdownSpans: function () {
+            var colorInputs = document.getElementsByTagName("input");
+            var that = this;
+            for (var j = 0; j < colorInputs[len]; j++) {
+                if (classIsColor(colorInputs[j][clsNm])) { //search all input element who has "color" class
+                    var i = that.R[len];
+                    that.R[i] = colorInputs[j]; //that.R.push(colorInputs); will make the R[i].parentNode throw exception
+                    that.R[i].i = i;
+                    //create choosers
+                    that.S[i] = that.createElm("colorChooser", 1);
+                    that.S[i].i = i;
+                    that.S[i].id = colorInputs[j]['name'];
+
+                    //that.S[i].arrow = that.createElm("colorChooserArrow", 1);
+                    //that.S[i][appendCld](that.S[i].arrow);
+
+                    that.R[i].parentNode.insertBefore(that.S[i], that.R[i].nextSibling);
+                    that.S[i][sty][bgClr] = that.R[i][val];
+                    addEvent(that.S[i], clickOrTouch, function (e) {
+                        if (that.element.parentNode == this && that.element[sty][dspl] == "block") that.element[sty][dspl] = "none";
+                        else {
+                            that.i = this.i;
+                            this[appendCld](that.element)[sty][dspl] = "block";
+                            that.initColorPickerValues();
+                        }
+                        that.stopPropagation(e);
+                    });
+                        
+                    //now we know what is S, so we can add the following event
+                    that.R[i].onchange = function () {
+                        that.S[this.i][sty][bgClr] = this[val];
+                    };
+
+                    if (typeof OnColorChanged !== "undefined") OnColorChanged(that.R[i][val], that.R[i].id);
+                }
+            }
+        },
+
+
+        //called by chooser click event handler: it will set values and BGs based on R[i][val]
+        initColorPickerValues: function () {
+            var that = this;
+            var parsedColor = that.getParsedColors(that.R[that.i][val]);
+            HexInSession = parsedColor[0];
+            that.iRgbaRange[val] = parsedColor[len] == 2 ? parsedColor[1] : 1;
+            if (HexInSession == _invalid) {
+                that.bgDiv1[sty][bgClr] = that.bgDiv2[sty][bgClr] = trans;
+                that.hexInput[val] = that.rgbaInput[val] = _invalid;
+            }
+            else
+                that.setColorPickerInsideValues(HexInSession);
+
+        },
+        ///possible return values: [''], ['transparent'], ['invalid'], ['#......'], ['#......', num <=1]
+        getParsedColors: function (color) { //,chooser
+            color = color.replace(/\s+/g, '').toLowerCase();
+            var retVal = [_invalid];
+            if (!color || color == trans) {
+                retVal = [color];
+            }
+            else if (color[0] == '#') {
+                if (/^#([a-f0-9]{3}){1,2}$/.test(color)) {
+                    retVal = [color];
+                }
+            }
+            else if (/^rgba\(\d+,\d+,\d+,[\.\d]+\)$/.test(color)) {
+                var match = color.match(/^rgba\((\d+,\d+,\d+),([\.\d]+)\)$/);
+                if (match) {
+                    if (validColorNumbers(match[1]) && +match[2] <= 1) {
+                        retVal = [rgbToHex(match[1]), +match[2]];
+                    }
+                }
+            }
+            else if (/^rgb\(\d+,\d+,\d+\)$/.test(color)) {
+                var match = color.match(/^rgb\((\d+,\d+,\d+)\)$/);
+                if (validColorNumbers(match[1])) {
+                    retVal = [rgbToHex(match[1])];
+                }
+            }
+            else { //color name such as red, gray. Chrome will change bad name to 'rgba(0,0,0,0)', IE will be 'transparent'
+                var testBox = this.bgDiv1; //chooser ? chooser : this.bgDiv1;
+                testBox[sty][bgClr] = trans;//why having this line of code? It is a bug fix: If color is not a valid color, the next line won't change the previous color, and computedColor will still get the previous color. So we first change it to "transparent"
+                testBox[sty][bgClr] = color;
+                var computedColor = getStyle(testBox)[bgClr];
+
+                //console.log("computedColor", computedColor, color, chooser);
+                if (computedColor.indexOf('rgb(') != -1) {
+                    retVal = [rgbToHex(computedColor.replace('rgb(', '').replace(')', ''))];
+                }
+            }
+            return retVal;
+        },
+
+        //called by many events. It will update two inputs and two bg divs
+        setColorPickerInsideValues: function (hex) {
+            var alpha = +picker.iRgbaRange[val];
+            picker.bgDiv1[sty][bgClr] = picker.hexInput[val] =  (hex && hex[0] == '#' ? hex.toUpperCase() : hex);
+            picker.bgDiv2[sty][bgClr] = picker.rgbaInput[val] = (hex && hex[0] == '#' ? hexAlphaToRgba(hex, alpha) : hex);//the later hex will be (!hex || hex == 'transparent') 
+        }
+    };
+
+    var buildPicker = function () {
+        if (!picker) picker = new Picker();
+        /*if (isiOS) {
+            //stackoverflow.com/questions/17567344/detect-left-right-swipe-on-touch-devices-but-allow-up-down-scrolling
+            //The following defines the touch event handlers for: fast click : 'fc', swipe horizontal: 'swh', swipe vertical: 'swv'
+            (function (d) {
+                var
+                ce = function (e, n) { var a = document.createEvent("CustomEvent"); a.initCustomEvent(n, true, true, e.target); e.target.dispatchEvent(a); a = null; return false },
+                nm = true, sp = { x: 0, y: 0 }, ep = { x: 0, y: 0 },
+                touch = {
+                    touchstart: function (e) { sp = { x: e.touches[0].pageX, y: e.touches[0].pageY } },
+                    touchmove: function (e) { nm = false; ep = { x: e.touches[0].pageX, y: e.touches[0].pageY } },
+                    touchend: function (e) { if (nm) { ce(e, 'fc') } else { var x = ep.x - sp.x, xr = Math.abs(x), y = ep.y - sp.y, yr = Math.abs(y); if (Math.max(xr, yr) > 20) { ce(e, (xr > yr ? 'swh' : 'swv')) } }; nm = true },
+                    touchcancel: function (e) { nm = false }
+                };
+                for (var a in touch) { d.addEventListener(a, touch[a], false); }
+            })(picker.element);
+        }*/
+    };
+
+    if (myOptions.initOnPageLoad)
+        addEvent(window, "load", buildPicker);
+
+    return {
+        //reload code below not work. Maybe the removed stuff is still there as it might be referenced somewhere else. So comment it out!
+        //reload: function () {
+        //    if (picker.S && picker.S.length) {
+        //        console.log(picker.S.length);
+        //        for (var i = 0; i < picker.S.length; i++) {
+        //            picker.S[i].parentNode.removeChild(picker.S[i]);
+        //            picker.S[i] = null;
+        //        }
+        //    }
+        //    picker.R=picker.S=[];
+        //    picker.createDropdownSpans();
+        //},
+        hexAlphaToRgba: hexAlphaToRgba, //(hex, alpha) such as hexAlphaToRgba("#DD9999", 0.5)
+        rgbToHex: rgbToHex, //(rgbStr) such as rgbToHex("255,0,0")
+        rgbaToHex: rgbaToSimilarHex, //(rgba, bgHexColor) such as rgbaToSimilarHex("rgba(255,0,0,0.2)", "#DD9999")
+        init: buildPicker //when option is !MenuCool.cpInitOnLoad, you need to call init() manually when you are ready to populate color picker
+    };
+})(MenuCoolRgbaColorPickerOptions);
+
+/*
+ChangeSet #1 (2012-2-10): I use colorContainerEventDelegate to replace each color cell's onclick event. Greatly decreased the number of event listeners.
+ChangeSet #2 (2012-2-10): Use stopPropagation instead of timer to fix the event bubbling to body that will hide the color picker.
+ChangeSet #3 (2012-2-11): add if(target.id!="colorContainer") to fix the IE7 bug that the even responde to element "colorContainer".
+ChangeSet #4 (2012-6-27): add to support Ajax by calling reload. Requested by Birger on 6.26 (check email)
+ChangeSet #5 (2012-6-28): add transparent color to mcColorPicker. 
+ChangeSet #6 (2012-8-30): Don't need the menucool link anymore.
+ChangeSet #7 (2014-9-29): DOMContentLoaded instead of window.onload; added DOMContentLoaded handler
+ChangeSet #8 (2014-10-27): If color fields are added quite late like my ddmenu skinBuilder, the buildPicker cannot run onDomReady or even window.onload. So I added option cpInitOnLoad and init() function.
+ChangeSet #9 (2014-11-??): Click color chooser will toggle the display.
+*/
-- 
cgit v1.2.3