diff --git a/.jshintignore b/.jshintignore
index c9c5d3eb8..b7a1c570e 100644
--- a/.jshintignore
+++ b/.jshintignore
@@ -1,6 +1,7 @@
 node_modules/
 www/bower_components/
 www/common/pdfjs/
+www/common/tippy/
 
 server.js
 www/common/media-tag.js
@@ -8,7 +9,6 @@ www/scratch
 
 www/common/toolbar.js
 www/common/hyperscript.js
-www/common/tippy.min.js
 
 www/pad/wysiwygarea-plugin.js
 www/pad/mediatag-plugin.js
diff --git a/customize.dist/pages.js b/customize.dist/pages.js
index 4cd33f038..6fd5d418e 100644
--- a/customize.dist/pages.js
+++ b/customize.dist/pages.js
@@ -633,12 +633,95 @@ define([
                     src: '/customize/cryptpad-new-logo-colors-logoonly.png?' + urlArgs
                 }),
                 h('div.cp-loading-spinner-container',
-                    h('span.fa.fa-circle-o-notch.fa-spin.fa-4x.fa-fw')),
+                    h('span.fa.fa-circle-o-notch.fa-spin.fa-8x.fa-fw')),
                 h('p'),
             ])
         );
     };
 
+    Pages.createCheckbox = function (id, labelTxt, checked, opts) {
+        opts = opts|| {};
+        // Input properties
+        var inputOpts = {
+            type: 'checkbox',
+            id: id
+        };
+        if (checked) { inputOpts.checked = 'checked'; }
+        $.extend(inputOpts, opts.input || {});
+
+        // Label properties
+        var labelOpts = {};
+        $.extend(labelOpts, opts.label || {});
+        if (labelOpts.class) { labelOpts.class += ' cp-checkmark'; }
+
+        // Mark properties
+        var markOpts = { tabindex: 0 };
+        $.extend(markOpts, opts.mark || {});
+
+        var input = h('input', inputOpts);
+        var mark = h('span.cp-checkmark-mark', markOpts);
+        var label = h('span.cp-checkmark-label', labelTxt);
+
+        $(mark).keydown(function (e) {
+            if (e.which === 32) {
+                e.stopPropagation();
+                e.preventDefault();
+                $(input).prop('checked', !$(input).is(':checked'));
+                $(input).change();
+            }
+        });
+
+        $(input).change(function () { $(mark).focus(); });
+
+        return h('label.cp-checkmark', labelOpts, [
+            input,
+            mark,
+            label
+        ]);
+    };
+
+    Pages.createRadio = function (name, id, labelTxt, checked, opts) {
+        opts = opts|| {};
+        // Input properties
+        var inputOpts = {
+            type: 'radio',
+            id: id,
+            name: name
+        };
+        if (checked) { inputOpts.checked = 'checked'; }
+        $.extend(inputOpts, opts.input || {});
+
+        // Label properties
+        var labelOpts = {};
+        $.extend(labelOpts, opts.label || {});
+        if (labelOpts.class) { labelOpts.class += ' cp-checkmark'; }
+
+        // Mark properties
+        var markOpts = { tabindex: 0 };
+        $.extend(markOpts, opts.mark || {});
+
+        var input = h('input', inputOpts);
+        var mark = h('span.cp-radio-mark', markOpts);
+        var label = h('span.cp-checkmark-label', labelTxt);
+
+        $(mark).keydown(function (e) {
+            if (e.which === 32) {
+                e.stopPropagation();
+                e.preventDefault();
+                $(input).prop('checked', !$(input).is(':checked'));
+                $(input).change();
+            }
+        });
+
+        $(input).change(function () { $(mark).focus(); });
+
+        return h('label.cp-radio', labelOpts, [
+            input,
+            mark,
+            label
+        ]);
+    };
+
     var hiddenLoader = function () {
         var loader = loadingScreen();
         loader.style.display = 'none';
@@ -688,27 +771,10 @@ define([
                         placeholder: Msg.login_confirm,
                     }),
                     h('div.checkbox-container', [
-                        h('input#import-recent', {
-                            name: 'import-recent',
-                            type: 'checkbox',
-                            checked: true
-                        }),
-                        // hscript doesn't generate for on label for some
-                        // reason... use jquery as a temporary fallback
-                        setHTML($('<label for="import-recent"></label>')[0], Msg.register_importRecent)
-                        /*h('label', {
-                            'for': 'import-recent',
-                        }, Msg.register_importRecent),*/
+                        Pages.createCheckbox('import-recent', Msg.register_importRecent, true)
                     ]),
                     h('div.checkbox-container', [
-                        h('input#accept-terms', {
-                            name: 'accept-terms',
-                            type: 'checkbox'
-                        }),
-                        setHTML($('<label for="accept-terms"></label>')[0], Msg.register_acceptTerms)
-                        /*setHTML(h('label', {
-                            'for': 'accept-terms',
-                        }), Msg.register_acceptTerms),*/
+                        $(Pages.createCheckbox('accept-terms')).find('.cp-checkmark-label').append(Msg.register_acceptTerms).parent()[0]
                     ]),
                     h('button#register.btn.cp-login-register', Msg.login_register)
                 ])
@@ -750,17 +816,7 @@ define([
                             placeholder: Msg.login_password,
                         }),
                         h('div.checkbox-container', [
-                            h('input#import-recent', {
-                                name: 'import-recent',
-                                type: 'checkbox',
-                                checked: true
-                            }),
-                            // hscript doesn't generate for on label for some
-                            // reason... use jquery as a temporary fallback
-                            setHTML($('<label for="import-recent"></label>')[0], Msg.register_importRecent)
-                            /*h('label', {
-                                'for': 'import-recent',
-                            }, Msg.register_importRecent),*/
+                            Pages.createCheckbox('import-recent', Msg.register_importRecent, true),
                         ]),
                         h('div.extra', [
                             h('button.login.first.btn', Msg.login_login)
diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less
index b845a5d6f..24c63e570 100644
--- a/customize.dist/src/less2/include/alertify.less
+++ b/customize.dist/src/less2/include/alertify.less
@@ -12,14 +12,11 @@
 
     @alertify-btn-fg: @alertify-fore;
 
-    @alertify-btn-bg: rgba(200, 200, 200, 0.1);
-    @alertify-btn-bg-hover: rgba(200, 200, 200, .3);
-
     @alertify-bg: @colortheme_modal-dim;
     @alertify-fg: @alertify-fore;
 
     @alertify-input-bg: @colortheme_modal-input;
-    @alertify-input-fg: @colortheme_modal-fg;
+    @alertify-input-fg: @colortheme_modal-input-fg;
 
     @alertify_padding-base: @variables_padding;
     @alertify_box-shadow: @variables_shadow;
@@ -34,7 +31,7 @@
         }
         > * {
             padding: @alertify_padding-base @alertify_padding-base * 4;
-            color: @alertify-fore;
+            color: @colortheme_notification-color;
 
             font-family: @colortheme_font;
             font-size: large;
@@ -65,6 +62,8 @@
         width: 100%;
         height: 100%;
         z-index: 100000; // alertify container
+        font: @colortheme_app-font;
+
         &.forefront {
             z-index: @max-z-index; // alertify max forefront
         }
@@ -112,10 +111,6 @@
         }
 
         .dialog, .alert {
-            .bright {
-                color: @colortheme_light-base;
-            }
-
             & > div {
                 background-color: @alertify-dialog-bg;
                 &.half {
@@ -227,7 +222,7 @@
 
                 button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) {
 
-                    background-color: @alertify-btn-bg;
+                    background-color: @colortheme_alertify-cancel;
                     box-sizing: border-box;
                     position: relative;
                     outline: 0;
@@ -247,7 +242,7 @@
                     border-radius: 0;
 
                     color: @alertify-btn-fg;
-                    border: 1px solid transparent;
+                    border: 1px solid @colortheme_alertify-cancel-border;
 
                     &.safe, &.danger {
                         color: @colortheme_old-base;
@@ -256,32 +251,40 @@
                     }
                     &.danger {
                         background-color: @colortheme_alertify-red;
+                        border-color: @colortheme_alertify-red-border;
+                        color: @colortheme_alertify-red-color;
                         &:hover, &:active {
-                            background-color: lighten(@colortheme_alertify-red, 5%);
+                            background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-red, 10%), lighten(@colortheme_alertify-red, 10%));
                         }
                     }
 
                     &.safe {
                         background-color: @colortheme_alertify-green;
+                        border-color: @colortheme_alertify-green-border;
+                        color: @colortheme_alertify-green-color;
                         &:hover, &:active {
-                            background-color: lighten(@colortheme_alertify-green, 10%);
+                            background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-green, 10%), lighten(@colortheme_alertify-green, 10%));
                         }
                     }
 
                     &.primary {
                         background-color: @colortheme_alertify-primary;
                         color: @colortheme_alertify-primary-text;
+                        border-color: @colortheme_alertify-primary-border;
+                        font-weight: bold;
                         &:hover, &:active {
-                            background-color: darken(@colortheme_alertify-primary, 10%);
+                            background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-primary, 10%), lighten(@colortheme_alertify-primary, 10%));
                         }
                     }
 
                     &:hover, &:active {
-                        background-color: @alertify-btn-bg-hover;
+                        background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-cancel, 10%), lighten(@colortheme_alertify-cancel, 10%));
                     }
 
                     &:focus {
-                        border: 1px dotted @alertify-base;
+                        //border: 1px dotted @alertify-base;
+                        box-shadow: 0px 0px 5px @colortheme_alertify-primary;
+                        outline: none;
                     }
                     &::-moz-focus-inner {
                         border: 0;
diff --git a/customize.dist/src/less2/include/app-noscroll.less b/customize.dist/src/less2/include/app-noscroll.less
index c66019d61..f0a760b5f 100644
--- a/customize.dist/src/less2/include/app-noscroll.less
+++ b/customize.dist/src/less2/include/app-noscroll.less
@@ -7,6 +7,7 @@
     overflow: hidden;
     box-sizing: border-box;
     position: relative;
+    border: 0;
     body {
         height: 100%;
         width: 100%;
@@ -15,6 +16,7 @@
         overflow: hidden;
         box-sizing: border-box;
         position: relative;
+        border: 0;
     }
 }
 
diff --git a/customize.dist/src/less2/include/checkmark.less b/customize.dist/src/less2/include/checkmark.less
index 30c6e7d4a..adbc70750 100644
--- a/customize.dist/src/less2/include/checkmark.less
+++ b/customize.dist/src/less2/include/checkmark.less
@@ -5,7 +5,7 @@
     @width: round(@size / 8);
     @dim1: round(@size / 3);
     @dim2: round(2 * @size / 3);
-    @top: round(@size / 12);
+    @top: round(@size / 12) - 1;
     // <label.cp-checkmark><input><span.cp-checkmark-mark></span>Text</label>
     .cp-checkmark {
         margin: 0;
@@ -17,6 +17,10 @@
         -ms-user-select: none;
         user-select: none;
 
+        & > a {
+            margin-left: 0.25em;
+        }
+
         &.cp-checkmark-secondary {
             .cp-checkmark-mark {
                 &:after {
@@ -26,6 +30,7 @@
             input {
                 &:checked ~ .cp-checkmark-mark {
                     background-color: @colortheme_checkmark-back2;
+                    border-color: @colortheme_checkmark-back2;
                 }
             }
         }
@@ -37,12 +42,19 @@
             display: none;
             &:checked ~ .cp-checkmark-mark {
                 background-color: @colortheme_checkmark-back1;
+                border-color: @colortheme_checkmark-back1;
                 &:after {
                     display: block;
                 }
             }
         }
 
+        .cp-checkmark-label {
+            cursor: default;
+            &:empty {
+                display: none;
+            }
+        }
         .cp-checkmark-mark {
             margin-right: 10px;
             position: relative;
@@ -51,6 +63,8 @@
             background-color: @colortheme_checkmark-back0;
             display: flex;
             justify-content: center;
+            border: 1px solid @colortheme_form-border;
+            flex-shrink: 0;
             &:after {
                 content: "";
                 display: none;
@@ -60,6 +74,90 @@
                 transform: rotate(45deg);
                 border: solid @colortheme_checkmark-col1;
                 border-width: 0 @width @width 0;
+                position: absolute;
+            }
+            &:focus {
+                //border-color: #FF007C !important;
+                box-shadow: 0px 0px 5px @colortheme_checkmark-back1;
+                outline: none;
+            }
+        }
+
+    }
+
+    .cp-radio {
+        margin: 0;
+        display: flex;
+        align-items: center;
+        position: relative;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+
+        &.cp-radio-secondary {
+            .cp-radio-mark {
+                &:after {
+                    border-color: @colortheme_checkmark-col2;
+                }
+            }
+            input {
+                &:checked ~ .cp-radio-mark {
+                    background-color: @colortheme_checkmark-back2;
+                }
+            }
+        }
+        &:hover .cp-radio-mark {
+            background-color: @colortheme_checkmark-back0-active;
+        }
+
+        input {
+            display: none;
+            &:checked ~ .cp-radio-mark {
+                background-color: @colortheme_checkmark-back1;
+                border-color: @colortheme_checkmark-back1;
+                &:after {
+                    display: block;
+                }
+            }
+        }
+
+        .cp-checkmark-label {
+            cursor: default;
+            &:empty {
+                display: none;
+            }
+        }
+
+        @radio-size: @dim1 * 3;
+        .cp-radio-mark {
+            margin-right: 10px;
+            position: relative;
+            height: @radio-size;
+            width: @radio-size;
+            background-color: @colortheme_checkmark-back0;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border: 1px solid @colortheme_form-border;
+            flex-shrink: 0;
+            &:after {
+                display: none;
+                content: "";
+                border-radius: 50%;
+                background: white;
+                width: @dim1;
+                height: @dim1;
+
+                //transform: rotate(45deg);
+                //border: solid @colortheme_checkmark-col1;
+                //border-width: 0 @width @width 0;
+            }
+            &:focus {
+                //border-color: #FF007C !important;
+                box-shadow: 0px 0px 5px @colortheme_checkmark-back1;
+                outline: none;
             }
         }
 
diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less
index 1bdb69291..da2404b79 100644
--- a/customize.dist/src/less2/include/colortheme.less
+++ b/customize.dist/src/less2/include/colortheme.less
@@ -2,6 +2,9 @@
 @colortheme_app-font-size: 16px;
 @colortheme_app-font: @colortheme_app-font-size @colortheme_font;
 
+@colortheme_logo-1: #326599;
+@colortheme_logo-2: #4591c4;
+
 @colortheme_link-color: #0275D8;
 @colortheme_link-color-visited: #005999;
 @colortheme_info-background: #fafafa;
@@ -15,23 +18,42 @@
 @colortheme_cp-red: #FA5858; // remove red
 @colortheme_cp-green: #46E981;
 
-@colortheme_modal-bg: #222;
-@colortheme_modal-fg: #fff;
+@colortheme_form-border: #bbbbbb;
+@colortheme_form-bg: @colortheme_logo-2;
+@colortheme_form-color: #ffffff;
+@colortheme_form-bg-alt: #ffffff;
+@colortheme_form-color-alt: @colortheme_logo-1;
+@colortheme_form-warning: #f49842;
+@colortheme_form-warning-hov: darken(@colortheme_form-warning, 5%);
+
+@colortheme_modal-bg: @colortheme_form-bg-alt; // TODO Modals bg
+@colortheme_modal-fg: @colortheme_form-color-alt;
 @colortheme_modal-link: #eee;
 @colortheme_modal-link-visited: lighten(@colortheme_modal-link, 10%);
-@colortheme_modal-dim: rgba(0, 0, 0, 0.4);
+@colortheme_modal-dim: fade(@colortheme_logo-2, 50%); // TODO transparent background behind modals
+@colortheme_modal-input: @colortheme_form-bg;
+@colortheme_modal-input-fg: @colortheme_form-color;
 
-@colortheme_loading-bg: #222;
+@colortheme_loading-bg: @colortheme_logo-1;
+@colortheme_loading-bg-alt: @colortheme_logo-2;
 @colortheme_loading-color: @colortheme_old-fore;
 
-@colortheme_modal-input: #111;
 
+// TODO modals buttons
 @colortheme_alertify-red: #E55236;
+@colortheme_alertify-red-color: #FFF;
+@colortheme_alertify-red-border: transparent;
 @colortheme_alertify-green: #77C825;
-@colortheme_alertify-primary: #fff;
-@colortheme_alertify-primary-text: #000;
-
-@colortheme_notification-log: rgba(0, 0, 0, 0.8);
+@colortheme_alertify-green-color: #FFF;
+@colortheme_alertify-green-border: transparent;
+@colortheme_alertify-primary: @colortheme_form-bg;
+@colortheme_alertify-primary-text: @colortheme_form-color;
+@colortheme_alertify-primary-border: transparent;
+@colortheme_alertify-cancel: @colortheme_modal-bg;
+@colortheme_alertify-cancel-border: #ccc;
+
+@colortheme_notification-log: fade(@colortheme_logo-1, 90%);
+@colortheme_notification-color: #fff;;
 @colortheme_notification-warn: rgba(205, 37, 50, 0.8);
 
 @colortheme_dropdown-bg: #f9f9f9;
@@ -110,9 +132,9 @@
 @cryptpad_header_col: #1E1F1F;
 @cryptpad_text_col: #3F4141;
 
-@colortheme_checkmark-back0: #ffffff;
-@colortheme_checkmark-back0-active: #bbbbbb;
-@colortheme_checkmark-back1: #FF0073;
-@colortheme_checkmark-col1: #ffffff;
-@colortheme_checkmark-back2: #FFFFFF;
-@colortheme_checkmark-col2: #000000;
+@colortheme_checkmark-back0: @colortheme_form-bg-alt;
+@colortheme_checkmark-back0-active: @colortheme_form-border;
+@colortheme_checkmark-back1: @colortheme_form-bg;
+@colortheme_checkmark-col1: @colortheme_form-color;
+@colortheme_checkmark-back2: @colortheme_form-bg-alt;
+@colortheme_checkmark-col2: @colortheme_form-color-alt;
diff --git a/customize.dist/src/less2/include/creation.less b/customize.dist/src/less2/include/creation.less
index 4fd0a5a1d..b2f6fa46b 100644
--- a/customize.dist/src/less2/include/creation.less
+++ b/customize.dist/src/less2/include/creation.less
@@ -1,47 +1,78 @@
 @import (once) "./colortheme-all.less";
 @import (once) "./tools.less";
-@import (once) "./checkmark.less";
 @import (once) './icon-colors.less';
 
-.creation_main() {
-    .tippy-popper {
-        z-index: 100000001 !important;
-    }
+.creation_main(
+    @color: @colortheme_default-color, // Color of the text for the toolbar
+    @bg-color: @colortheme_default-bg, // color of the toolbar background
+    @warn-color: @colortheme_default-warn, // color of the warning text in the toolbar
+) {
+    @colortheme_creation-modal-bg: #fff;
+    @colortheme_creation-modal: #666;
+    @colortheme_creation-modal-title: @colortheme_loading-bg;
+
     #cp-creation-container {
         position: absolute;
         z-index: 100000000; // #loading * 10
         top: 0px;
-        background: @colortheme_loading-bg;
+        //background: @colortheme_loading-bg;
+        background: linear-gradient(to right, @colortheme_loading-bg 0%, @colortheme_loading-bg 50%, @colortheme_loading-bg-alt 50%, @colortheme_loading-bg-alt 100%);
         color: @colortheme_loading-color;
         display: flex;
         flex-flow: column; /* we need column so that the child can shrink vertically */
         justify-content: center;
+        align-items: center;
         width: 100%;
         height: 100%;
         overflow: auto;
+        .cp-creation-logo {
+            height: 300px;
+            width: 300px;
+            margin-top: 50px;
+            flex: 0 1 auto; /* allows shrink */
+            min-height: 0;
+            text-align: center;
+            img {
+                max-width: 100%;
+                max-height: 100%;
+            }
+        }
     }
     #cp-creation {
-        flex: 0 1 auto; /* allows shrink */
-        min-height: 0;
         overflow: auto;
         text-align: center;
+        background: @colortheme_creation-modal-bg;
+        color: @colortheme_creation-modal;
         font: @colortheme_app-font;
-        width: 100%;
         outline: none;
+        width: 700px;
+        max-width: 90vw;
+        height: 500px;
+        max-height: calc(~"100vh - 20px");
+        margin: 50px;
+        flex-shrink: 0;
+        display: flex;
+        flex-flow: column;
+
         & > div {
-            width: 60vw;
+            width: 100%;
             max-width: 100%;
-            margin: 40px auto;
+            margin: auto;
             text-align: left;
         }
 
-        .cp-creation-create, .cp-creation-settings {
+        .cp-creation-title {
+            color: @colortheme_creation-modal-title;
+            font-weight: bold;
+            margin: 15px;
+        }
+
+        .cp-creation-create {
             margin-top: 0px;
-            @creation-button: #30B239;
             button {
                 .tools_unselectable();
                 padding: 15px;
-                background: @creation-button;
+                background: linear-gradient(to right, @colortheme_logo-2, @colortheme_logo-1);
                 color: #FFF;
                 font-weight: bold;
                 margin: 3px 10px;
@@ -50,8 +81,9 @@
                 outline: none;
                 width: 100%;
                 &:hover {
+                    background: linear-gradient(to right, lighten(@colortheme_logo-2, 5%), lighten(@colortheme_logo-1, 5%));
                     //background: darken(@creation-button, 5%);
-                    background: lighten(@creation-button, 5%);
+                    //background: lighten(@creation-button, 5%);
                 }
             }
         }
@@ -70,6 +102,7 @@
             display: flex;
             flex-flow: column;
             align-items: center;
+            flex: 1 0 auto;
             & > div {
                 width: 400px;
                 max-width: 100%;
@@ -78,6 +111,8 @@
                 flex-wrap: wrap;
                 font-size: 16px;
                 margin: 10px 0;
+                min-height: 28px;
+                line-height: 28px;
                 label {
                     flex: 1;
                 }
@@ -88,31 +123,51 @@
                         padding: 0 10px;
                     }
                 }
-                .cp-creation-help {
-                    font-size: 18px;
-                    color: white;
-                    &:hover {
-                        color: #AAA;
-                        text-decoration: none;
-                    }
+            }
+            .cp-creation-help, .cp-creation-warning {
+                font-size: 18px;
+                color: @colortheme_form-warning;
+                &:hover {
+                    color: @colortheme_form-warning-hov;
+                    text-decoration: none;
                 }
             }
             .cp-creation-slider {
                 display: block;
                 overflow: hidden;
                 max-height: 0px;
-                transition: max-height 0.5s ease-in-out;
-                width: 100%;
-                margin-top: 10px;
+                max-width: 0px;
+                //margin-top: 10px;
                 &.active {
-                    max-height: 40px;
+                    transition: max-height 0.5s ease-in-out;
+                    max-width: unset;
+                    max-height: 100px;
                 }
             }
             .cp-creation-expire {
                 .cp-creation-expire-picker {
                     text-align: center;
+                    input, select {
+                        font-size: 14px;
+                        border: 1px solid @colortheme_form-border;
+                        height: 26px;
+                        background-color: @colortheme_form-bg;
+                        color: @colortheme_form-color;
+                    }
                     input {
-                        width: 100px;
+                        width: 50px;
+                        margin: 0 5px;
+                    }
+                    select {
+                        margin-right: 5px;
+                    }
+                }
+                &.active {
+                    label {
+                        flex: unset;
+                    }
+                    .cp-creation-slider {
+                        flex: 1;
                     }
                 }
             }
@@ -125,31 +180,51 @@
             }
 
             div.cp-creation-remember {
-                margin-top: 30px;
                 .cp-creation-remember-help {
-                    font-style: italic;
+                    width: 100%;
+                    //font-style: italic;
+                    font-size: 12px;
+                    font-weight: bold;
+                    color: @colortheme_form-bg;
+                    line-height: 20px;
+                    .fa {
+                        margin-right: 10px;
+                    }
                 }
             }
             div.cp-creation-template {
                 width: 100%;
-                background-color: darken(@colortheme_modal-bg, 3%);
-                padding: 20px;
-                margin: 30px 0;
-                .cp-creation-title {
-                    padding: 0 0 10px 10px;
-                    margin: auto;
+                flex: 1 0 auto;
+                flex-wrap: nowrap;
+                .cp-creation-template-more {
+                    font-size: 30px;
+                    cursor: pointer;
+                    margin: 0 5px;
+                    text-align: center;
+                    &:first-child {
+                        left: 5px;
+                    }
+                    &:last-child {
+                        right: 5px;
+                    }
+                    &:hover {
+                        color: #888;
+                    }
+                    &.hidden {
+                        visibility: hidden;
+                    }
                 }
             }
             .cp-creation-template-container {
                 width: 100%;
+                flex: 1;
                 display: flex;
                 flex-wrap: wrap;
                 justify-content: center;
-                overflow-y: auto;
+                //overflow-y: auto;
                 align-items: center;
                 .cp-creation-template-element {
-                    @darker: darken(@colortheme_modal-fg, 30%);
-
+                    box-shadow: 2px 2px 7px @colortheme_form-border;
                     width: 135px;
                     padding: 5px;
                     margin: 5px;
@@ -162,19 +237,23 @@
                     line-height: 1em;
                     cursor: pointer;
 
-                    background-color: #111;
-                    color: @darker;
+                    color: black;
                     border: 1px solid transparent;
 
                     &.cp-creation-template-selected {
-                        border: 1px solid white;
-                        background-color: #222;
+                        color: @color !important;
+                        background-color: @bg-color !important;
+                        .fa {
+                            color: @color;
+                        }
                     }
 
                     transition: all 0.1s;
 
                     &:hover {
-                        color: @colortheme_modal-fg;
+                        //color: @colortheme_modal-fg;
+                        background-color: @colortheme_form-border;
+                        box-shadow: none;
                     }
 
                     align-items: center;
@@ -196,6 +275,7 @@
                         max-width: 100%;
                     }
                     .fa {
+                        color: @bg-color;
                         cursor: pointer;
                         width: 100px;
                         height: 100px;
@@ -217,45 +297,69 @@
                 display: inline-block;
             }
         }
+    }
 
-        .checkmark_main(30px);
-
-        @media screen and (max-width: @browser_media-narrow-screen) {
-            & > div {
-                width: 95%;
-                margin: 10px auto;
+        @media screen and (max-height: 700px) {
+            #cp-creation-container {
+                .cp-creation-logo {
+                    //flex-shrink: 0;
+                    display: none;
+                }
             }
         }
-        @media screen and (max-width: @browser_media-medium-screen) {
-            #cp-creation-form {
-                div.cp-creation-template {
-                    margin: 0;
-                    padding: 5px;
-                    .cp-creation-template-container {
-                        .cp-creation-template-element {
-                            flex-flow: row;
-                            margin: 1px;
-                            padding: 5px;
-                            width: 155px;
-                            img {
-                                display: none;
+        @media screen and (max-width: 500px) {
+            #cp-creation {
+                #cp-creation-form {
+                    & > div {
+                        width: 95%;
+                        margin: 10px auto;
+                    }
+                    .cp-creation-expire {
+                        &.active {
+                            label {
+                                flex: 1;
                             }
-                            .fa {
-                                font-size: 18px;
-                                width: 20px;
-                                height: 20px;
-                                line-height: 20px;
-                                display: inline !important;
+                            .cp-creation-slider {
+                                flex: unset;
+                                order: 10;
+                                width: 100%;
                             }
-                            .cp-creation-template-element-name {
-                                margin: 0;
-                                margin-left: 5px;
+                        }
+                    }
+                }
+            }
+        }
+        @media screen and (max-width: @browser_media-medium-screen) {
+            #cp-creation {
+                height: auto;
+                #cp-creation-form {
+                    div.cp-creation-template {
+                        margin: 0;
+                        padding: 5px;
+                        .cp-creation-template-container {
+                            .cp-creation-template-element {
+                                flex-flow: row;
+                                margin: 1px;
+                                padding: 5px;
+                                width: 155px;
+                                img {
+                                    display: none;
+                                }
+                                .fa {
+                                    font-size: 18px;
+                                    width: 20px;
+                                    height: 20px;
+                                    line-height: 20px;
+                                    display: inline !important;
+                                }
+                                .cp-creation-template-element-name {
+                                    margin: 0;
+                                    margin-left: 5px;
+                                }
                             }
                         }
                     }
                 }
             }
         }
-
-    }
 }
diff --git a/customize.dist/src/less2/include/framework.less b/customize.dist/src/less2/include/framework.less
index 4bdb2b0b8..9dfab39f6 100644
--- a/customize.dist/src/less2/include/framework.less
+++ b/customize.dist/src/less2/include/framework.less
@@ -1,8 +1,11 @@
+@import (once) "./colortheme-all.less";
 @import (once) "./toolbar.less";
 @import (once) './fileupload.less';
 @import (once) './alertify.less';
 @import (once) './tokenfield.less';
 @import (once) './creation.less';
+@import (once) './tippy.less';
+@import (once) "./checkmark.less";
 
 .framework_main(@bg-color, @warn-color, @color) {
     .toolbar_main(
@@ -13,6 +16,29 @@
     .fileupload_main();
     .alertify_main();
     .tokenfield_main();
-    .creation_main();
+    .tippy_main();
+    .checkmark_main(20px);
+    .creation_main(
+        @bg-color: @bg-color,
+        @warn-color: @warn-color,
+        @color: @color
+    );
+}
+
+.framework_min_main(
+    @color: @colortheme_default-color, // Color of the text for the toolbar
+    @bg-color: @colortheme_default-bg, // color of the toolbar background
+    @warn-color: @colortheme_default-warn, // color of the warning text in the toolbar
+) {
+    .toolbar_main(
+        @bg-color: @bg-color,
+        @warn-color: @warn-color,
+        @color: @color
+    );
+    .fileupload_main();
+    .alertify_main();
+    .tippy_main();
+    .checkmark_main(20px);
 }
 
+
diff --git a/customize.dist/src/less2/include/icons.less b/customize.dist/src/less2/include/icons.less
index 03a6af5ab..c2ddfef32 100644
--- a/customize.dist/src/less2/include/icons.less
+++ b/customize.dist/src/less2/include/icons.less
@@ -10,7 +10,6 @@
         text-overflow: ellipsis;
         padding-top: 5px;
         padding-bottom: 5px;
-        border: 1px solid white;
 
         .cp-icons-name {
             width: 100%;
@@ -26,7 +25,7 @@
             word-wrap: break-word;
         }
         &.cp-icons-element-selected {
-            background-color: white;
+            background-color: rgba(0,0,0,0.2);
             color: #666;
         }
         .fa {
diff --git a/customize.dist/src/less2/include/modal.less b/customize.dist/src/less2/include/modal.less
index 3bd674527..e7e39ad96 100644
--- a/customize.dist/src/less2/include/modal.less
+++ b/customize.dist/src/less2/include/modal.less
@@ -57,7 +57,7 @@
 
         input {
             background-color: @colortheme_modal-input;
-            color: @colortheme_modal-fg;
+            color: @colortheme_modal-input-fg;
             border: 0;
             padding: 8px 12px;
             margin: 1em;
diff --git a/customize.dist/src/less2/include/sidebar-layout.less b/customize.dist/src/less2/include/sidebar-layout.less
index ede03942e..5640e014b 100644
--- a/customize.dist/src/less2/include/sidebar-layout.less
+++ b/customize.dist/src/less2/include/sidebar-layout.less
@@ -52,6 +52,12 @@
                         margin-bottom: 0;
                     }
                 }
+                label.noTitle {
+                    display: inline-flex;
+                    .fa {
+                        margin-left: 10px;
+                    }
+                }
                 margin-bottom: 20px;
             }
             [type="text"], button {
diff --git a/customize.dist/src/less2/include/tippy.less b/customize.dist/src/less2/include/tippy.less
new file mode 100644
index 000000000..afec36e96
--- /dev/null
+++ b/customize.dist/src/less2/include/tippy.less
@@ -0,0 +1,14 @@
+@import (once) './colortheme-all.less';
+
+.tippy_main() {
+    .tippy-tooltip.cryptpad-theme {
+        /* Your styling here. Example: */
+        background-color: white;
+        box-shadow: 2px 2px 10px #000;
+        font-weight: bold;
+        color: #333;
+        [x-circle] {
+            background-color: unset;
+        }
+    }
+}
diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index 50c51f611..602868fe4 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -183,8 +183,13 @@
     #cp-app-toolbar-creation-dialog.cp-modal-container {
         .icons_main();
 
-        li:hover {
-            border: 1px solid white;
+        li {
+            border: 1px solid @colortheme_modal-fg;
+            &:hover {
+                //border: 1px solid @colortheme_modal-fg;
+                background: @colortheme_modal-fg;
+                color: @colortheme_modal-bg;
+            }
         }
         .cp-modal {
             display: flex;
diff --git a/customize.dist/src/less2/pages/page-login.less b/customize.dist/src/less2/pages/page-login.less
index 77dead84c..dafb447ed 100644
--- a/customize.dist/src/less2/pages/page-login.less
+++ b/customize.dist/src/less2/pages/page-login.less
@@ -1,11 +1,13 @@
 @import (once) "../include/infopages.less";
 @import (once) "../include/colortheme-all.less";
 @import (once) "../include/alertify.less";
+@import (once) "../include/checkmark.less";
 @import (once) "../loading.less";
 
 .infopages_main();
 .infopages_topbar();
 .alertify_main();
+.checkmark_main(20px);
 
 .form-group {
     .extra {
diff --git a/customize.dist/src/less2/pages/page-register.less b/customize.dist/src/less2/pages/page-register.less
index e8f49a850..28edd8613 100644
--- a/customize.dist/src/less2/pages/page-register.less
+++ b/customize.dist/src/less2/pages/page-register.less
@@ -1,11 +1,13 @@
 @import (once) "../include/infopages.less";
 @import (once) "../include/colortheme-all.less";
 @import (once) "../include/alertify.less";
+@import (once) "../include/checkmark.less";
 @import (once) "../loading.less";
 
 .infopages_main();
 .infopages_topbar();
 .alertify_main();
+.checkmark_main(20px);
 
 .cp-container {
     .form-group {
diff --git a/www/common/common-interface.js b/www/common/common-interface.js
index 24c7098c0..eafdaca78 100644
--- a/www/common/common-interface.js
+++ b/www/common/common-interface.js
@@ -6,13 +6,13 @@ define([
     '/common/common-notifier.js',
     '/customize/application_config.js',
     '/bower_components/alertifyjs/dist/js/alertify.js',
-    '/common/tippy.min.js',
+    '/common/tippy/tippy.min.js',
     '/customize/pages.js',
     '/common/hyperscript.js',
     '/common/test.js',
 
     '/bower_components/bootstrap-tokenfield/dist/bootstrap-tokenfield.js',
-    'css!/common/tippy.css',
+    'css!/common/tippy/tippy.css',
 ], function ($, Messages, Util, Hash, Notifier, AppConfig,
             Alertify, Tippy, Pages, h, Test) {
     var UI = {};
@@ -539,16 +539,16 @@ define([
 
     var LOADING = 'cp-loading';
 
-    var getRandomTip = function () {
+    /*var getRandomTip = function () {
         if (!Messages.tips || !Object.keys(Messages.tips).length) { return ''; }
         var keys = Object.keys(Messages.tips);
         var rdm = Math.floor(Math.random() * keys.length);
         return Messages.tips[keys[rdm]];
-    };
+    };*/
     UI.addLoadingScreen = function (config) {
         config = config || {};
         var loadingText = config.loadingText;
-        var hideTips = config.hideTips || AppConfig.hideLoadingScreenTips;
+        //var hideTips = config.hideTips || AppConfig.hideLoadingScreenTips;
         var hideLogo = config.hideLogo;
         var $loading, $container;
         if ($('#' + LOADING).length) {
@@ -557,9 +557,9 @@ define([
             $loading.removeClass('cp-loading-hidden');
             $('.cp-loading-spinner-container').show();
             if (loadingText) {
-                $('#' + LOADING).find('p').text(loadingText);
+                $('#' + LOADING).find('p').show().text(loadingText);
             } else {
-                $('#' + LOADING).find('p').text('');
+                $('#' + LOADING).find('p').hide().text('');
             }
             $container = $loading.find('.cp-loading-container');
         } else {
@@ -574,14 +574,14 @@ define([
             $spinner.show();
             $('body').append($loading);
         }
-        if (Messages.tips && !hideTips) {
+        /*if (Messages.tips && !hideTips) {
             var $loadingTip = $('<div>', {'id': 'cp-loading-tip'});
             $('<span>', {'class': 'tips'}).text(getRandomTip()).appendTo($loadingTip);
             $loadingTip.css({
                 'bottom': $('body').height()/2 - $container.height()/2 + 20 + 'px'
             });
             $('body').append($loadingTip);
-        }
+        }*/
     };
     UI.removeLoadingScreen = function (cb) {
         // Release the test blocker, hopefully every test has been registered.
@@ -610,8 +610,8 @@ define([
         }
         $('.cp-loading-spinner-container').hide();
         $('#cp-loading-tip').remove();
-        if (transparent) { $('#' + LOADING).css('opacity', 0.8); }
-        $('#' + LOADING).find('p').html(error || Messages.error);
+        if (transparent) { $('#' + LOADING).css('opacity', 0.9); }
+        $('#' + LOADING).find('p').show().html(error || Messages.error);
         if (exitable) {
             $(window).focus();
             $(window).keydown(function (e) {
@@ -660,18 +660,38 @@ define([
         });
     };
 
+    var delay = typeof(AppConfig.tooltipDelay) === "number" ? AppConfig.tooltipDelay : 500;
+    $.extend(true, Tippy.defaults, {
+        placement: 'bottom',
+        performance: true,
+        delay: [delay, 0],
+        //sticky: true,
+        theme: 'cryptpad',
+        arrow: true,
+        maxWidth: '200px',
+        flip: true,
+        popperOptions: {
+            modifiers: {
+                preventOverflow: { boundariesElement: 'window' }
+            }
+        },
+        //arrowType: 'round',
+        arrowTransform: 'scale(2)',
+        zIndex: 100000001
+    });
     UI.addTooltips = function () {
         var MutationObserver = window.MutationObserver;
-        var delay = typeof(AppConfig.tooltipDelay) === "number" ? AppConfig.tooltipDelay : 500;
         var addTippy = function (i, el) {
             if (el.nodeName === 'IFRAME') { return; }
-            Tippy(el, {
-                position: 'bottom',
-                distance: 0,
-                performance: true,
-                delay: [delay, 0],
-                sticky: true
+            var opts = {
+                distance: 15
+            };
+            Array.prototype.slice.apply(el.attributes).filter(function (obj) {
+                return /^data-tippy-/.test(obj.name);
+            }).forEach(function (obj) {
+                opts[obj.name.slice(11)] = obj.value;
             });
+            Tippy(el, opts);
         };
         // This is the robust solution to remove dangling tooltips
         // The mutation observer does not always find removed nodes.
@@ -720,5 +740,9 @@ define([
         });
     };
 
+    UI.createCheckbox = Pages.createCheckbox;
+
+    UI.createRadio = Pages.createRadio;
+
     return UI;
 });
diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 036d63bc8..100377fcb 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -13,8 +13,6 @@ define([
     '/customize/messages.js',
     '/customize/application_config.js',
     '/bower_components/nthen/index.js',
-
-    'css!/common/tippy.css',
 ], function ($, Config, Util, Hash, Language, UI, Constants, Feedback, h, MediaTag, Clipboard,
              Messages, AppConfig, NThen) {
     var UIElements = {};
@@ -237,7 +235,11 @@ define([
         var link = h('div.cp-share-modal', [
             h('label', Messages.share_linkAccess),
             h('br'),
-            h('input#cp-share-editable-true.cp-share-editable-value', {
+            UI.createRadio('cp-share-editable', 'cp-share-editable-true',
+                           Messages.share_linkEdit, true, { mark: {tabindex:1} }),
+            UI.createRadio('cp-share-editable', 'cp-share-editable-false',
+                           Messages.share_linkView, false, { mark: {tabindex:1} }),
+            /*h('input#cp-share-editable-true.cp-share-editable-value', {
                 type: 'radio',
                 name: 'cp-share-editable',
                 value: 1,
@@ -248,25 +250,14 @@ define([
                 name: 'cp-share-editable',
                 value: 0
             }),
-            h('label', { 'for': 'cp-share-editable-false' }, Messages.share_linkView),
-            h('br'),
+            h('label', { 'for': 'cp-share-editable-false' }, Messages.share_linkView),*/
             h('br'),
             h('label', Messages.share_linkOptions),
             h('br'),
-            h('input#cp-share-embed', {
-                type: 'checkbox',
-                name: 'cp-share-embed'
-            }),
-            h('label', { 'for': 'cp-share-embed' }, Messages.share_linkEmbed),
+            UI.createCheckbox('cp-share-embed', Messages.share_linkEmbed, false, { mark: {tabindex:1} }),
+            UI.createCheckbox('cp-share-present', Messages.share_linkPresent, false, { mark: {tabindex:1} }),
             h('br'),
-            h('input#cp-share-present', {
-                type: 'checkbox',
-                name: 'cp-share-present'
-            }),
-            h('label', { 'for': 'cp-share-present' }, Messages.share_linkPresent),
-            h('br'),
-            h('br'),
-            UI.dialog.selectable('', { id: 'cp-share-link-preview' })
+            UI.dialog.selectable('', { id: 'cp-share-link-preview', tabindex: 1 })
         ]);
         if (!hashes.editHash) {
             $(link).find('#cp-share-editable-false').attr('checked', true);
@@ -1685,14 +1676,10 @@ define([
         var priv = common.getMetadataMgr().getPrivateData();
         var c = (priv.settings.general && priv.settings.general.creation) || {};
         if (AppConfig.displayCreationScreen && common.isLoggedIn() && c.skip) {
-            $advanced = $('<input>', {
-                type: 'checkbox',
-                checked: 'checked',
-                id: 'cp-app-toolbar-creation-advanced'
-            }).appendTo($advancedContainer);
-            $('<label>', {
-                for: 'cp-app-toolbar-creation-advanced'
-            }).text(Messages.creation_newPadModalAdvanced).appendTo($advancedContainer);
+            var $cboxLabel = $(UI.createCheckbox('cp-app-toolbar-creation-advanced',
+                                                 Messages.creation_newPadModalAdvanced, true))
+                                 .appendTo($advancedContainer);
+            $advanced = $cboxLabel.find('input');
             $description.append('<br>');
             $description.append(Messages.creation_newPadModalDescriptionAdvanced);
         }
@@ -1782,11 +1769,15 @@ define([
         var sframeChan = common.getSframeChannel();
         var focus;
 
-        var pickerCfg = {
+        var pickerCfgInit = {
             types: [type],
             where: ['template'],
             hidden: true
         };
+        var pickerCfg = {
+            types: [type],
+            where: ['template'],
+        };
         var onConfirm = function (yes) {
             if (!yes) {
                 if (focus) { focus.focus(); }
@@ -1814,7 +1805,7 @@ define([
 
         sframeChan.query("Q_TEMPLATE_EXIST", type, function (err, data) {
             if (data) {
-                common.openFilePicker(pickerCfg);
+                common.openFilePicker(pickerCfgInit);
                 focus = document.activeElement;
                 if (force) { return void onConfirm(true); }
                 UI.confirm(Messages.useTemplate, onConfirm, {
@@ -1858,11 +1849,15 @@ define([
 
         var $body = $('body');
         var $creationContainer = $('<div>', { id: 'cp-creation-container' }).appendTo($body);
+        var urlArgs = (Config.requireConf && Config.requireConf.urlArgs) || '';
+        var l = h('div.cp-creation-logo', h('img', { src: '/customize/alt-favicon.png?' + urlArgs }));
+        $(l).appendTo($creationContainer);
         var $creation = $('<div>', { id: 'cp-creation', tabindex: 1 }).appendTo($creationContainer);
 
         // Title
-        var colorClass = 'cp-icon-color-'+type;
-        $creation.append(h('h2.cp-creation-title', Messages.newButtonTitle));
+        //var colorClass = 'cp-icon-color-'+type;
+        //$creation.append(h('h2.cp-creation-title', Messages.newButtonTitle));
+        $creation.append(h('h3.cp-creation-title', Messages['button_new'+type]));
         //$creation.append(h('h2.cp-creation-title.'+colorClass, Messages.newButtonTitle));
 
         // Deleted pad warning
@@ -1874,10 +1869,11 @@ define([
 
         var origin = common.getMetadataMgr().getPrivateData().origin;
         var createHelper = function (href, text) {
-            var q = h('a.cp-creation-help.fa.fa-question', {
+            var q = h('a.cp-creation-help.fa.fa-question-circle', {
                 title: text,
                 href: origin + href,
-                target: "_blank"
+                target: "_blank",
+                'data-tippy-placement': "right"
             });
             return q;
         };
@@ -1885,30 +1881,14 @@ define([
         // Owned pads
         // Default is Owned pad
         var owned = h('div.cp-creation-owned', [
-            h('label.cp-checkmark', [
-                h('input', {
-                    type: 'checkbox',
-                    id: 'cp-creation-owned',
-                    checked: 'checked'
-                }),
-                h('span.cp-checkmark-mark'),
-                Messages.creation_owned
-            ]),
+            UI.createCheckbox('cp-creation-owned', Messages.creation_owned, true),
             createHelper('/faq.html#keywords-owned', Messages.creation_owned1)
         ]);
 
         // Life time
         var expire = h('div.cp-creation-expire', [
-            h('label.cp-checkmark', [
-                h('input', {
-                    type: 'checkbox',
-                    id: 'cp-creation-expire'
-                }),
-                h('span.cp-checkmark-mark'),
-                Messages.creation_expire
-            ]),
-            createHelper('/faq.html#keywords-expiring', Messages.creation_expire2),
-            h('div.cp-creation-expire-picker.cp-creation-slider', [
+            UI.createCheckbox('cp-creation-expire', Messages.creation_expire, false),
+            h('span.cp-creation-expire-picker.cp-creation-slider', [
                 h('input#cp-creation-expire-val', {
                     type: "number",
                     min: 1,
@@ -1923,106 +1903,142 @@ define([
                         selected: 'selected'
                     }, Messages.creation_expireMonths)
                 ])
-            ])
+            ]),
+            createHelper('/faq.html#keywords-expiring', Messages.creation_expire2),
         ]);
 
-        var createDiv = h('div.cp-creation-create');
-        var $create = $(createDiv);
-
+        var right = h('span.fa.fa-chevron-right.cp-creation-template-more');
+        var left = h('span.fa.fa-chevron-left.cp-creation-template-more');
         var templates = h('div.cp-creation-template', [
-            h('h3.cp-creation-title.'+colorClass, Messages['button_new'+type]),
+            left,
             h('div.cp-creation-template-container', [
                 h('span.fa.fa-circle-o-notch.fa-spin.fa-4x.fa-fw')
             ]),
-            createDiv
+            right
         ]);
 
         var settings = h('div.cp-creation-remember', [
-            h('label.cp-checkmark', [
-                h('input', {
-                    type: 'checkbox',
-                    id: 'cp-creation-remember'
-                }),
-                h('span.cp-checkmark-mark'),
-                Messages.creation_saveSettings
-            ]),
+            UI.createCheckbox('cp-creation-remember', Messages.creation_saveSettings, false),
             createHelper('/settings/#creation', Messages.creation_settings),
-            h('div.cp-creation-remember-help.cp-creation-slider', Messages.creation_rememberHelp)
+            h('div.cp-creation-remember-help.cp-creation-slider', [
+                h('span.fa.fa-exclamation-circle.cp-creation-warning'),
+                Messages.creation_rememberHelp
+            ])
         ]);
 
+        var createDiv = h('div.cp-creation-create');
+        var $create = $(createDiv);
+
         $(h('div#cp-creation-form', [
             owned,
             expire,
             settings,
-            templates
+            templates,
+            createDiv
         ])).appendTo($creation);
 
         // Display templates
-        var selected = 0;
+
+        var selected = 0; // Selected template in the list (highlighted)
+        var TEMPLATES_DISPLAYED = 4; // Max templates displayed per page
+        var next = function () {}; // Function called when pressing tab to highlight the next template
+        var i = 0; // Index of the first template displayed in the current page
         sframeChan.query("Q_CREATE_TEMPLATES", type, function (err, res) {
             if (!res.data || !Array.isArray(res.data)) {
                 return void console.error("Error: get the templates list");
             }
-            var data = res.data.slice().sort(function (a, b) {
-                if (a.name === b.name) { return 0; }
-                return a.name < b.name ? -1 : 1;
-            });
-            data.unshift({
-                name: Messages.creation_noTemplate,
-                id: 0,
-                icon: h('span.fa.fa-file')
+            var allData = res.data.slice().sort(function (a, b) {
+                if (a.used === b.used) {
+                    // Sort by name
+                    if (a.name === b.name) { return 0; }
+                    return a.name < b.name ? -1 : 1;
+                }
+                return b.used - a.used;
             });
-            data.push({
+            allData.unshift({
                 name: Messages.creation_newTemplate,
                 id: -1,
                 icon: h('span.fa.fa-bookmark')
             });
-            var $container = $(templates).find('.cp-creation-template-container').html('');
-            data.forEach(function (obj, idx) {
-                var name = obj.name;
-                var $span = $('<span>', {
-                    'class': 'cp-creation-template-element',
-                    'title': name,
-                }).appendTo($container);
-                $span.data('id', obj.id);
-                if (idx === 0) { $span.addClass('cp-creation-template-selected'); }
-                $span.append(obj.icon || UI.getFileIcon({type: type}));
-                $('<span>', {'class': 'cp-creation-template-element-name'}).text(name)
-                    .appendTo($span);
-                $span.click(function () {
-                    $container.find('.cp-creation-template-selected')
-                        .removeClass('cp-creation-template-selected');
-                    $span.addClass('cp-creation-template-selected');
-                    selected = idx;
-                });
+            allData.unshift({
+                name: Messages.creation_noTemplate,
+                id: 0,
+                icon: h('span.fa.fa-file')
+            });
+            var redraw = function (index) {
+                if (index < 0) { i = 0; }
+                else if (index > allData.length - 1) { return; }
+                else { i = index; }
+                var data = allData.slice(i, i + TEMPLATES_DISPLAYED);
+                var $container = $(templates).find('.cp-creation-template-container').html('');
+                data.forEach(function (obj, idx) {
+                    var name = obj.name;
+                    var $span = $('<span>', {
+                        'class': 'cp-creation-template-element',
+                        'title': name,
+                    }).appendTo($container);
+                    $span.data('id', obj.id);
+                    if (idx === selected) { $span.addClass('cp-creation-template-selected'); }
+                    $span.append(obj.icon || UI.getFileIcon({type: type}));
+                    $('<span>', {'class': 'cp-creation-template-element-name'}).text(name)
+                        .appendTo($span);
+                    $span.click(function () {
+                        $container.find('.cp-creation-template-selected')
+                            .removeClass('cp-creation-template-selected');
+                        $span.addClass('cp-creation-template-selected');
+                        selected = idx;
+                    });
 
-                // Add thumbnail if it exists
-                if (obj.thumbnail) {
-                    common.addThumbnail(obj.thumbnail, $span, function () {});
+                    // Add thumbnail if it exists
+                    if (obj.thumbnail) {
+                        common.addThumbnail(obj.thumbnail, $span, function () {});
+                    }
+                });
+                $(right).off('click').removeClass('hidden').click(function () {
+                    selected = 0;
+                    redraw(i + TEMPLATES_DISPLAYED);
+                });
+                if (i >= allData.length - TEMPLATES_DISPLAYED ) { $(right).addClass('hidden'); }
+                $(left).off('click').removeClass('hidden').click(function () {
+                    selected = TEMPLATES_DISPLAYED - 1;
+                    redraw(i - TEMPLATES_DISPLAYED);
+                });
+                if (i < TEMPLATES_DISPLAYED) { $(left).addClass('hidden'); }
+            };
+            redraw(0);
+
+            // Change template selection when Tab is pressed
+            next = function (revert) {
+                var max = $creation.find('.cp-creation-template-element').length;
+                if (selected + 1 === max && !revert) {
+                    selected = i + TEMPLATES_DISPLAYED < allData.length ? 0 : max;
+                    return void redraw(i + TEMPLATES_DISPLAYED);
                 }
-            });
-        });
-        // Change template selection when Tab is pressed
-        var next = function (revert) {
-            var max = $creation.find('.cp-creation-template-element').length;
-            selected = revert ?
-                        (--selected < 0 ? max-1 : selected) :
-                        ++selected % max;
-            $creation.find('.cp-creation-template-element')
-                .removeClass('cp-creation-template-selected');
-            $($creation.find('.cp-creation-template-element').get(selected))
-                .addClass('cp-creation-template-selected');
-        };
+                if (selected === 0 && revert) {
+                    selected = i - TEMPLATES_DISPLAYED >= 0 ? TEMPLATES_DISPLAYED - 1 : 0;
+                    return void redraw(i - TEMPLATES_DISPLAYED);
+                }
+                selected = revert ?
+                            (--selected < 0 ? 0 : selected) :
+                            ++selected >= max ? max-1 : selected;
+                $creation.find('.cp-creation-template-element')
+                    .removeClass('cp-creation-template-selected');
+                $($creation.find('.cp-creation-template-element').get(selected))
+                    .addClass('cp-creation-template-selected');
+            };
 
+        });
 
         // Display expiration form when checkbox checked
         $creation.find('#cp-creation-expire').on('change', function () {
             if ($(this).is(':checked')) {
                 $creation.find('.cp-creation-expire-picker:not(.active)').addClass('active');
+                $creation.find('.cp-creation-expire:not(.active)').addClass('active');
                 $creation.find('#cp-creation-expire-val').focus();
                 return;
             }
             $creation.find('.cp-creation-expire-picker').removeClass('active');
+            $creation.find('.cp-creation-expire').removeClass('active');
             $creation.focus();
         });
 
diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js
index 0a9a27f0d..d4adb1ee0 100644
--- a/www/common/cryptpad-common.js
+++ b/www/common/cryptpad-common.js
@@ -424,6 +424,7 @@ define([
         // it allows us to add owners and expiration time if it is a new file
         var parsed = Hash.parsePadUrl(href);
         if(!parsed) { throw new Error("Cannot get template hash"); }
+        postMessage("INCREMENT_TEMPLATE_USE", href);
         Crypt.get(parsed.hash, function (err, val) {
             if (err) { throw new Error(err); }
             var p = Hash.parsePadUrl(window.location.href);
diff --git a/www/common/loading.js b/www/common/loading.js
index a5f96b62a..c45dabdcd 100644
--- a/www/common/loading.js
+++ b/www/common/loading.js
@@ -1,3 +1,5 @@
+// dark #326599
+// light #4591c4
 define([], function () {
     var loadingStyle = (function(){/*
 #cp-loading {
@@ -9,31 +11,74 @@ define([], function () {
   bottom: 0px;
   left: 0px;
   right: 0px;
-  background: #222;
+  background: linear-gradient(to right, #326599 0%, #326599 50%, #4591c4 50%, #4591c4 100%);
   color: #fafafa;
-  text-align: center;
   font-size: 1.5em;
   opacity: 1;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
 }
 #cp-loading.cp-loading-hidden {
   opacity: 0;
   visibility: hidden;
 }
+#cp-loading .cp-loading-logo {
+    height: 300px;
+    width: 300px;
+    margin-top: 50px;
+    flex: 0 1 auto;
+    min-height: 0;
+    text-align: center;
+}
+#cp-loading .cp-loading-logo img {
+    max-width: 100%;
+    max-height: 100%;
+}
 #cp-loading .cp-loading-container {
-  margin-top: 50vh;
-  transform: translateY(-50%);
+    width: 700px;
+    max-width: 90vw;
+    height: 500px;
+    max-height: calc(100vh - 20px);
+    margin: 50px;
+    flex-shrink: 0;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: center;
+}
+@media screen and (max-height: 800px) {
+    #cp-loading .cp-loading-container {
+        height: auto;
+    }
+}
+@media screen and (max-width: 600px) {
+    #cp-loading .cp-loading-container {
+        height: auto;
+    }
 }
 #cp-loading .cp-loading-cryptofist {
   margin-left: auto;
   margin-right: auto;
-  height: 300px;
+  //height: 300px;
+  max-width: 90vw;
+  max-height: 300px;
+  width: auto;
+  height: auto;
   margin-bottom: 2em;
 }
 @media screen and (max-height: 450px) {
   #cp-loading .cp-loading-cryptofist {
-    display: none;
   }
 }
+#cp-loading-message {
+    background: #FFF;
+    padding: 20px;
+    width: 100%;
+    color: #000;
+    display: none;
+}
 #cp-loading .cp-loading-spinner-container {
   position: relative;
   height: 100px;
@@ -75,8 +120,10 @@ define([], function () {
         '<style>',
         loadingStyle,
         '</style>',
+        '<div class="cp-loading-logo">',
+            '<img class="cp-loading-cryptofist" src="/customize/alt-favicon.png?' + urlArgs + '">',
+        '</div>',
         '<div class="cp-loading-container">',
-            '<img class="cp-loading-cryptofist" src="/customize/cryptpad-new-logo-colors-logoonly.png?' + urlArgs + '">',
             '<div class="cp-loading-spinner-container">',
                 '<span class="fa fa-circle-o-notch fa-spin fa-4x fa-fw"></span>',
             '</div>',
diff --git a/www/common/outer/async-store.js b/www/common/outer/async-store.js
index f3f1e1450..0125e6018 100644
--- a/www/common/outer/async-store.js
+++ b/www/common/outer/async-store.js
@@ -660,6 +660,15 @@ define([
         });
         cb(res);
     };
+    Store.incrementTemplateUse = function (href) {
+        store.userObject.getPadAttribute(href, 'used', function (err, data) {
+            // This is a not critical function, abort in case of error to make sure we won't
+            // create any issue with the user object or the async store
+            if (err) { return; }
+            var used = typeof data === "number" ? ++data : 1;
+            store.userObject.setPadAttribute(href, 'used', used);
+        });
+    };
 
     // Pads
     Store.moveToTrash = function (data, cb) {
diff --git a/www/common/outer/store-rpc.js b/www/common/outer/store-rpc.js
index 1043f9dcf..1713d7a2a 100644
--- a/www/common/outer/store-rpc.js
+++ b/www/common/outer/store-rpc.js
@@ -126,6 +126,9 @@ define([
             case 'GET_STRONGER_HASH': {
                 Store.getStrongerHash(data, cb); break;
             }
+            case 'INCREMENT_TEMPLATE_USE': {
+                Store.incrementTemplateUse(data); break;
+            }
             // Messaging
             case 'INVITE_FROM_USERLIST': {
                 Store.inviteFromUserlist(data, cb); break;
diff --git a/www/common/sframe-common-outer.js b/www/common/sframe-common-outer.js
index 11d20ce56..014914b50 100644
--- a/www/common/sframe-common-outer.js
+++ b/www/common/sframe-common-outer.js
@@ -431,6 +431,8 @@ define([
             // File picker
             var FP = {};
             var initFilePicker = function (cfg) {
+                // cfg.hidden means pre-loading the filepicker while keeping it hidden.
+                // if cfg.hidden is true and the iframe already exists, do nothing
                 if (!FP.$iframe) {
                     var config = {};
                     config.onFilePicked = function (data) {
@@ -449,7 +451,7 @@ define([
                     };
                     FP.$iframe = $('<iframe>', {id: 'sbox-filePicker-iframe'}).appendTo($('body'));
                     FP.picker = FilePicker.create(config);
-                } else {
+                } else if (!cfg.hidden) {
                     FP.$iframe.show();
                     FP.picker.refresh(cfg);
                 }
@@ -491,7 +493,8 @@ define([
                                 res.push({
                                     id: el,
                                     name: data[el].filename || data[el].title || '?',
-                                    thumbnail: thumb
+                                    thumbnail: thumb,
+                                    used: data[el].used || 0
                                 });
                             }));
                         });
diff --git a/www/common/tippy.css b/www/common/tippy.css
deleted file mode 100644
index 819caa330..000000000
--- a/www/common/tippy.css
+++ /dev/null
@@ -1 +0,0 @@
-.tippy-touch{cursor:pointer!important}.tippy-notransition{transition:none!important}.tippy-popper{max-width:400px;-webkit-perspective:800px;perspective:800px;z-index:10000000 !important;outline:0;transition-timing-function:cubic-bezier(.165,.84,.44,1);pointer-events:none}.tippy-popper.html-template{max-width:96%;max-width:calc(100% - 20px)}.tippy-popper[x-placement^=top] [x-arrow]{border-top:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;bottom:-7px;margin:0 9px}.tippy-popper[x-placement^=top] [x-arrow].arrow-small{border-top:5px solid #333;border-right:5px solid transparent;border-left:5px solid transparent;bottom:-5px}.tippy-popper[x-placement^=top] [x-arrow].arrow-big{border-top:10px solid #333;border-right:10px solid transparent;border-left:10px solid transparent;bottom:-10px}.tippy-popper[x-placement^=top] [x-circle]{-webkit-transform-origin:0 33%;transform-origin:0 33%}.tippy-popper[x-placement^=top] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-55%);transform:scale(1) translate(-50%,-55%);opacity:1}.tippy-popper[x-placement^=top] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow]{border-top:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-top:5px solid #fff;border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-top:10px solid #fff;border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow]{border-top:7px solid rgba(0,0,0,.7);border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-top:5px solid rgba(0,0,0,.7);border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-top:10px solid rgba(0,0,0,.7);border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=top] [data-animation=perspective]{-webkit-transform-origin:bottom;transform-origin:bottom}.tippy-popper[x-placement^=top] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateY(-10px) rotateX(0);transform:translateY(-10px) rotateX(0)}.tippy-popper[x-placement^=top] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateY(0) rotateX(90deg);transform:translateY(0) rotateX(90deg)}.tippy-popper[x-placement^=top] [data-animation=fade].enter{opacity:1;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=fade].leave{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift].enter{opacity:1;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift].leave{opacity:0;-webkit-transform:translateY(0);transform:translateY(0)}.tippy-popper[x-placement^=top] [data-animation=scale].enter{opacity:1;-webkit-transform:translateY(-10px) scale(1);transform:translateY(-10px) scale(1)}.tippy-popper[x-placement^=top] [data-animation=scale].leave{opacity:0;-webkit-transform:translateY(0) scale(0);transform:translateY(0) scale(0)}.tippy-popper[x-placement^=bottom] [x-arrow]{border-bottom:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;top:-7px;margin:0 9px}.tippy-popper[x-placement^=bottom] [x-arrow].arrow-small{border-bottom:5px solid #333;border-right:5px solid transparent;border-left:5px solid transparent;top:-5px}.tippy-popper[x-placement^=bottom] [x-arrow].arrow-big{border-bottom:10px solid #333;border-right:10px solid transparent;border-left:10px solid transparent;top:-10px}.tippy-popper[x-placement^=bottom] [x-circle]{-webkit-transform-origin:0 -50%;transform-origin:0 -50%}.tippy-popper[x-placement^=bottom] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-45%);transform:scale(1) translate(-50%,-45%);opacity:1}.tippy-popper[x-placement^=bottom] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-5%);transform:scale(.15) translate(-50%,-5%);opacity:0}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow]{border-bottom:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-bottom:5px solid #fff;border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-bottom:10px solid #fff;border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow]{border-bottom:7px solid rgba(0,0,0,.7);border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-bottom:5px solid rgba(0,0,0,.7);border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-bottom:10px solid rgba(0,0,0,.7);border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=bottom] [data-animation=perspective]{-webkit-transform-origin:top;transform-origin:top}.tippy-popper[x-placement^=bottom] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateY(10px) rotateX(0);transform:translateY(10px) rotateX(0)}.tippy-popper[x-placement^=bottom] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateY(0) rotateX(-90deg);transform:translateY(0) rotateX(-90deg)}.tippy-popper[x-placement^=bottom] [data-animation=fade].enter{opacity:1;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=fade].leave{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift].enter{opacity:1;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift].leave{opacity:0;-webkit-transform:translateY(0);transform:translateY(0)}.tippy-popper[x-placement^=bottom] [data-animation=scale].enter{opacity:1;-webkit-transform:translateY(10px) scale(1);transform:translateY(10px) scale(1)}.tippy-popper[x-placement^=bottom] [data-animation=scale].leave{opacity:0;-webkit-transform:translateY(0) scale(0);transform:translateY(0) scale(0)}.tippy-popper[x-placement^=left] [x-arrow]{border-left:7px solid #333;border-top:7px solid transparent;border-bottom:7px solid transparent;right:-7px;margin:6px 0}.tippy-popper[x-placement^=left] [x-arrow].arrow-small{border-left:5px solid #333;border-top:5px solid transparent;border-bottom:5px solid transparent;right:-5px}.tippy-popper[x-placement^=left] [x-arrow].arrow-big{border-left:10px solid #333;border-top:10px solid transparent;border-bottom:10px solid transparent;right:-10px}.tippy-popper[x-placement^=left] [x-circle]{-webkit-transform-origin:50% 0;transform-origin:50% 0}.tippy-popper[x-placement^=left] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%);opacity:1}.tippy-popper[x-placement^=left] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow]{border-left:7px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-left:5px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-left:10px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow]{border-left:7px solid rgba(0,0,0,.7);border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-left:5px solid rgba(0,0,0,.7);border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-left:10px solid rgba(0,0,0,.7);border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=left] [data-animation=perspective]{-webkit-transform-origin:right;transform-origin:right}.tippy-popper[x-placement^=left] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateX(-10px) rotateY(0);transform:translateX(-10px) rotateY(0)}.tippy-popper[x-placement^=left] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateX(0) rotateY(-90deg);transform:translateX(0) rotateY(-90deg)}.tippy-popper[x-placement^=left] [data-animation=fade].enter{opacity:1;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=fade].leave{opacity:0;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift].enter{opacity:1;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift].leave{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}.tippy-popper[x-placement^=left] [data-animation=scale].enter{opacity:1;-webkit-transform:translateX(-10px) scale(1);transform:translateX(-10px) scale(1)}.tippy-popper[x-placement^=left] [data-animation=scale].leave{opacity:0;-webkit-transform:translateX(0) scale(0);transform:translateX(0) scale(0)}.tippy-popper[x-placement^=right] [x-arrow]{border-right:7px solid #333;border-top:7px solid transparent;border-bottom:7px solid transparent;left:-7px;margin:6px 0}.tippy-popper[x-placement^=right] [x-arrow].arrow-small{border-right:5px solid #333;border-top:5px solid transparent;border-bottom:5px solid transparent;left:-5px}.tippy-popper[x-placement^=right] [x-arrow].arrow-big{border-right:10px solid #333;border-top:10px solid transparent;border-bottom:10px solid transparent;left:-10px}.tippy-popper[x-placement^=right] [x-circle]{-webkit-transform-origin:-50% 0;transform-origin:-50% 0}.tippy-popper[x-placement^=right] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%);opacity:1}.tippy-popper[x-placement^=right] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow]{border-right:7px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-right:5px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-right:10px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow]{border-right:7px solid rgba(0,0,0,.7);border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-right:5px solid rgba(0,0,0,.7);border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-right:10px solid rgba(0,0,0,.7);border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=right] [data-animation=perspective]{-webkit-transform-origin:left;transform-origin:left}.tippy-popper[x-placement^=right] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateX(10px) rotateY(0);transform:translateX(10px) rotateY(0)}.tippy-popper[x-placement^=right] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateX(0) rotateY(90deg);transform:translateX(0) rotateY(90deg)}.tippy-popper[x-placement^=right] [data-animation=fade].enter{opacity:1;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=fade].leave{opacity:0;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift].enter{opacity:1;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift].leave{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}.tippy-popper[x-placement^=right] [data-animation=scale].enter{opacity:1;-webkit-transform:translateX(10px) scale(1);transform:translateX(10px) scale(1)}.tippy-popper[x-placement^=right] [data-animation=scale].leave{opacity:0;-webkit-transform:translateX(0) scale(0);transform:translateX(0) scale(0)}.tippy-popper .tippy-tooltip.transparent-theme{background-color:rgba(0,0,0,.7)}.tippy-popper .tippy-tooltip.transparent-theme[data-animatefill]{background-color:transparent}.tippy-popper .tippy-tooltip.light-theme{color:#26323d;box-shadow:0 4px 20px 4px rgba(0,20,60,.1),0 4px 80px -8px rgba(0,20,60,.2);background-color:#fff}.tippy-popper .tippy-tooltip.light-theme[data-animatefill]{background-color:transparent}.tippy-tooltip{position:relative;color:#fff;border-radius:4px;font-size:.95rem;padding:.4rem .8rem;text-align:center;will-change:transform;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#333}.tippy-tooltip--small{padding:.25rem .5rem;font-size:.8rem}.tippy-tooltip--big{padding:.6rem 1.2rem;font-size:1.2rem}.tippy-tooltip[data-animatefill]{overflow:hidden;background-color:transparent}.tippy-tooltip[data-interactive]{pointer-events:auto}.tippy-tooltip[data-inertia]{transition-timing-function:cubic-bezier(.53,2,.36,.85)}.tippy-tooltip [x-arrow]{position:absolute;width:0;height:0}.tippy-tooltip [x-circle]{position:absolute;will-change:transform;background-color:#333;border-radius:50%;width:130%;width:calc(110% + 2rem);left:50%;top:50%;z-index:-1;overflow:hidden;transition:all ease}.tippy-tooltip [x-circle]:before{content:"";padding-top:90%;float:left}@media (max-width:450px){.tippy-popper{max-width:96%;max-width:calc(100% - 20px)}}
diff --git a/www/common/tippy.min.js b/www/common/tippy.min.js
deleted file mode 100644
index 302888e9c..000000000
--- a/www/common/tippy.min.js
+++ /dev/null
@@ -1 +0,0 @@
-(function(e,t){'object'==typeof exports&&'undefined'!=typeof module?module.exports=t():'function'==typeof define&&define.amd?define(t):e.tippy=t()})(this,function(){'use strict';function t(e){Pe.forEach(function(t){var i=t.popper,o=t.tippyInstance,n=t.settings,r=n.appendTo,s=n.hideOnClick,a=n.trigger;if(r.contains(i)){var p=!0===s||-1!==a.indexOf('focus'),d=!e||i!==e.popper;p&&d&&o.hide(i)}})}function o(t,i){var o=Element.prototype.closest||function(t){for(var i=this;i;){if(e.call(i,t))return i;i=i.parentElement}};return o.call(t,i)}function n(e,t){return Array.prototype.find?e.find(t):e.filter(t)[0]}function r(){var i=function(){Ae.touch=!0,Ae.iOS()&&document.body.classList.add('tippy-touch'),Ae.dynamicInputDetection&&window.performance&&document.addEventListener('mousemove',r)},r=function(){var e;return function(){var t=performance.now();20>t-e&&(Ae.touch=!1,document.removeEventListener('mousemove',r),!Ae.iOS()&&document.body.classList.remove('tippy-touch')),e=t}}();document.addEventListener('click',function(e){if(!(e.target instanceof Element))return t();var i=o(e.target,Ce.TOOLTIPPED_EL),r=o(e.target,Ce.POPPER);if(r){var s=n(Pe,function(e){return e.popper===r}),a=s.settings.interactive;if(a)return}if(i){var p=n(Pe,function(e){return e.el===i}),d=p.settings,l=d.hideOnClick,c=d.multiple,f=d.trigger;if(!c&&Ae.touch||!c&&-1!==f.indexOf('click'))return t(p);if(!0!==l||-1!==f.indexOf('click'))return}o(e.target,Ce.CONTROLLER)||!document.querySelector(Ce.POPPER)||t()}),document.addEventListener('touchstart',i),window.addEventListener('blur',function(){var t=document,i=t.activeElement;i&&i.blur&&e.call(i,Ce.TOOLTIPPED_EL)&&i.blur()}),!Ae.SUPPORTS_TOUCH&&(0<navigator.maxTouchPoints||0<navigator.msMaxTouchPoints)&&document.addEventListener('pointerdown',i)}function s(){return!s.done&&(s.done=!0,ke.appendTo=document.body,r(),!0)}function a(e){window.requestAnimationFrame(function(){setTimeout(e,0)})}function p(e){for(var t=[!1,'webkit'],o=e.charAt(0).toUpperCase()+e.slice(1),n=0;n<t.length;n++){var i=t[n],r=i?''+i+o:e;if('undefined'!=typeof window.document.body.style[r])return r}return null}function d(e,t){return Array.prototype.findIndex?e.findIndex(t):e.indexOf(n(e,t))}function l(e){var t=e.getAttribute('title');e.setAttribute('data-original-title',t||'html'),e.removeAttribute('title')}function c(e){var t=e.getBoundingClientRect();return 0<=t.top&&0<=t.left&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}function f(e,t){t?window.getComputedStyle(t)[p('transform')]:window.getComputedStyle(e).opacity}function m(e,t){e.forEach(function(e){e&&t(e.classList)})}function h(t,i){t.forEach(function(t){if(t){var o=e.call(t,Ce.CONTENT),n=o?xe(i/1.3):i;t.style[p('transitionDuration')]=n+'ms'}})}function u(e){return'visible'===e.style.visibility}function g(){}function b(e){return e.replace(/-.+/,'')}function y(t){var e,i,o=this,r=n(Pe,function(e){return e.el===o}),s=r.popper,a=r.settings.offset,d=b(s.getAttribute('x-placement')),l=xe(s.offsetWidth/2),c=xe(s.offsetHeight/2),f=5,m=document.documentElement.offsetWidth||document.body.offsetWidth,h=t.pageX,u=t.pageY;'top'===d?(e=h-l+a,i=u-2.25*c):'left'===d?(e=h-2*l-10,i=u-c+a):'right'===d?(e=h+c,i=u-c+a):'bottom'===d?(e=h-l+a,i=u+c/1.5):void 0;('top'===d||'bottom'===d)&&(h+f+l+a>m&&(e=m-f-2*l),0>h-f-l+a&&(e=f)),s.style[p('transform')]='translate3d('+e+'px, '+i+'px, 0)'}function v(e){return e instanceof Element||/Element/.test(Object.prototype.toString.call(e))?[e]:Array.isArray(e)?e:[].slice.call(document.querySelectorAll(e))}function E(e,t,i){if(!t)return i();var o=e.popper.querySelector(Ce.TOOLTIP),n=!1,r=function t(r){r.target!==o||(n=!0,o.removeEventListener('webkitTransitionEnd',t),o.removeEventListener('transitionend',t),i())};o.addEventListener('webkitTransitionEnd',r),o.addEventListener('transitionend',r),clearTimeout(e._transitionendTimeout),e._transitionendTimeout=setTimeout(function(){n||i()},t)}function O(e){return e&&'[object Function]'==={}.toString.call(e)}function w(e,t){if(1!==e.nodeType)return[];var i=window.getComputedStyle(e,null);return t?i[t]:i}function T(e){return'HTML'===e.nodeName?e:e.parentNode||e.host}function L(e){if(!e||-1!==['HTML','BODY','#document'].indexOf(e.nodeName))return window.document.body;var t=w(e),i=t.overflow,o=t.overflowX,n=t.overflowY;return /(auto|scroll)/.test(i+n+o)?e:L(T(e))}function S(e){var t=e&&e.offsetParent,i=t&&t.nodeName;return i&&'BODY'!==i&&'HTML'!==i?-1!==['TD','TABLE'].indexOf(t.nodeName)&&'static'===w(t,'position')?S(t):t:window.document.documentElement}function x(e){var t=e.nodeName;return'BODY'!==t&&('HTML'===t||S(e.firstElementChild)===e)}function A(e){return null===e.parentNode?e:A(e.parentNode)}function P(e,t){if(!e||!e.nodeType||!t||!t.nodeType)return window.document.documentElement;var i=e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING,o=i?e:t,n=i?t:e,r=document.createRange();r.setStart(o,0),r.setEnd(n,0);var s=r.commonAncestorContainer;if(e!==s&&t!==s||o.contains(n))return x(s)?s:S(s);var a=A(e);return a.host?P(a.host,t):P(e,A(t).host)}function C(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:'top',i='top'===t?'scrollTop':'scrollLeft',o=e.nodeName;if('BODY'===o||'HTML'===o){var n=window.document.documentElement,r=window.document.scrollingElement||n;return r[i]}return e[i]}function k(e,t){var i=2<arguments.length&&void 0!==arguments[2]&&arguments[2],o=C(t,'top'),n=C(t,'left'),r=i?-1:1;return e.top+=o*r,e.bottom+=o*r,e.left+=n*r,e.right+=n*r,e}function I(e,t){var i='x'===t?'Left':'Top',o='Left'==i?'Right':'Bottom';return+e['border'+i+'Width'].split('px')[0]+ +e['border'+o+'Width'].split('px')[0]}function D(e,t,i,o){return Se(t['offset'+e],i['client'+e],i['offset'+e],_e()?i['offset'+e]+o['margin'+('Height'===e?'Top':'Left')]+o['margin'+('Height'===e?'Bottom':'Right')]:0)}function R(){var e=window.document.body,t=window.document.documentElement,i=_e()&&window.getComputedStyle(t);return{height:D('Height',e,t,i),width:D('Width',e,t,i)}}function H(e){return je({},e,{right:e.left+e.width,bottom:e.top+e.height})}function N(e){var t={};if(_e())try{t=e.getBoundingClientRect();var i=C(e,'top'),o=C(e,'left');t.top+=i,t.left+=o,t.bottom+=i,t.right+=o}catch(e){}else t=e.getBoundingClientRect();var n={left:t.left,top:t.top,width:t.right-t.left,height:t.bottom-t.top},r='HTML'===e.nodeName?R():{},s=r.width||e.clientWidth||n.right-n.left,a=r.height||e.clientHeight||n.bottom-n.top,p=e.offsetWidth-s,d=e.offsetHeight-a;if(p||d){var l=w(e);p-=I(l,'x'),d-=I(l,'y'),n.width-=p,n.height-=d}return H(n)}function M(e,t){var i=_e(),o='HTML'===t.nodeName,n=N(e),r=N(t),s=L(e),a=w(t),p=+a.borderTopWidth.split('px')[0],d=+a.borderLeftWidth.split('px')[0],l=H({top:n.top-r.top-p,left:n.left-r.left-d,width:n.width,height:n.height});if(l.marginTop=0,l.marginLeft=0,!i&&o){var c=+a.marginTop.split('px')[0],f=+a.marginLeft.split('px')[0];l.top-=p-c,l.bottom-=p-c,l.left-=d-f,l.right-=d-f,l.marginTop=c,l.marginLeft=f}return(i?t.contains(s):t===s&&'BODY'!==s.nodeName)&&(l=k(l,t)),l}function B(e){var t=window.document.documentElement,i=M(e,t),o=Se(t.clientWidth,window.innerWidth||0),n=Se(t.clientHeight,window.innerHeight||0),r=C(t),s=C(t,'left'),a={top:r-i.top+i.marginTop,left:s-i.left+i.marginLeft,width:o,height:n};return H(a)}function W(e){var t=e.nodeName;return'BODY'===t||'HTML'===t?!1:'fixed'===w(e,'position')||W(T(e))}function U(e,t,i,o){var n={top:0,left:0},r=P(e,t);if('viewport'===o)n=B(r);else{var s;'scrollParent'===o?(s=L(T(e)),'BODY'===s.nodeName&&(s=window.document.documentElement)):'window'===o?s=window.document.documentElement:s=o;var a=M(s,r);if('HTML'===s.nodeName&&!W(r)){var p=R(),d=p.height,l=p.width;n.top+=a.top-a.marginTop,n.bottom=d+a.top,n.left+=a.left-a.marginLeft,n.right=l+a.left}else n=a}return n.left+=i,n.top+=i,n.right-=i,n.bottom-=i,n}function q(e){var t=e.width,i=e.height;return t*i}function _(e,t,i,o,n){var r=5<arguments.length&&void 0!==arguments[5]?arguments[5]:0;if(-1===e.indexOf('auto'))return e;var s=U(i,o,r,n),a={top:{width:s.width,height:t.top-s.top},right:{width:s.right-t.right,height:s.height},bottom:{width:s.width,height:s.bottom-t.bottom},left:{width:t.left-s.left,height:s.height}},p=Object.keys(a).map(function(e){return je({key:e},a[e],{area:q(a[e])})}).sort(function(e,t){return t.area-e.area}),d=p.filter(function(e){var t=e.width,o=e.height;return t>=i.clientWidth&&o>=i.clientHeight}),l=0<d.length?d[0].key:p[0].key,c=e.split('-')[1];return l+(c?'-'+c:'')}function F(e,t,i){var o=P(t,i);return M(i,o)}function Y(e){var t=window.getComputedStyle(e),i=parseFloat(t.marginTop)+parseFloat(t.marginBottom),o=parseFloat(t.marginLeft)+parseFloat(t.marginRight),n={width:e.offsetWidth+o,height:e.offsetHeight+i};return n}function z(e){var t={left:'right',right:'left',bottom:'top',top:'bottom'};return e.replace(/left|right|bottom|top/g,function(e){return t[e]})}function j(e,t,i){i=i.split('-')[0];var o=Y(e),n={width:o.width,height:o.height},r=-1!==['right','left'].indexOf(i),s=r?'top':'left',a=r?'left':'top',p=r?'height':'width',d=r?'width':'height';return n[s]=t[s]+t[p]/2-o[p]/2,n[a]=i===a?t[a]-o[d]:t[z(a)],n}function K(e,t){return Array.prototype.find?e.find(t):e.filter(t)[0]}function X(e,t,i){if(Array.prototype.findIndex)return e.findIndex(function(e){return e[t]===i});var o=K(e,function(e){return e[t]===i});return e.indexOf(o)}function G(e,t,i){var o=void 0===i?e:e.slice(0,X(e,'name',i));return o.forEach(function(e){e.function&&console.warn('`modifier.function` is deprecated, use `modifier.fn`!');var i=e.function||e.fn;e.enabled&&O(i)&&(t.offsets.popper=H(t.offsets.popper),t.offsets.reference=H(t.offsets.reference),t=i(t,e))}),t}function V(){if(!this.state.isDestroyed){var e={instance:this,styles:{},attributes:{},flipped:!1,offsets:{}};e.offsets.reference=F(this.state,this.popper,this.reference),e.placement=_(this.options.placement,e.offsets.reference,this.popper,this.reference,this.options.modifiers.flip.boundariesElement,this.options.modifiers.flip.padding),e.originalPlacement=e.placement,e.offsets.popper=j(this.popper,e.offsets.reference,e.placement),e.offsets.popper.position='absolute',e=G(this.modifiers,e),this.state.isCreated?this.options.onUpdate(e):(this.state.isCreated=!0,this.options.onCreate(e))}}function J(e,t){return e.some(function(e){var i=e.name,o=e.enabled;return o&&i===t})}function Z(e){for(var t=[!1,'ms','Webkit','Moz','O'],o=e.charAt(0).toUpperCase()+e.slice(1),n=0;n<t.length-1;n++){var i=t[n],r=i?''+i+o:e;if('undefined'!=typeof window.document.body.style[r])return r}return null}function $(){return this.state.isDestroyed=!0,J(this.modifiers,'applyStyle')&&(this.popper.removeAttribute('x-placement'),this.popper.style.left='',this.popper.style.position='',this.popper.style.top='',this.popper.style[Z('transform')]=''),this.disableEventListeners(),this.options.removeOnDestroy&&this.popper.parentNode.removeChild(this.popper),this}function Q(e,t,i,o){var n='BODY'===e.nodeName,r=n?window:e;r.addEventListener(t,i,{passive:!0}),n||Q(L(r.parentNode),t,i,o),o.push(r)}function ee(e,t,i,o){i.updateBound=o,window.addEventListener('resize',i.updateBound,{passive:!0});var n=L(e);return Q(n,'scroll',i.updateBound,i.scrollParents),i.scrollElement=n,i.eventsEnabled=!0,i}function te(){this.state.eventsEnabled||(this.state=ee(this.reference,this.options,this.state,this.scheduleUpdate))}function ie(e,t){return window.removeEventListener('resize',t.updateBound),t.scrollParents.forEach(function(e){e.removeEventListener('scroll',t.updateBound)}),t.updateBound=null,t.scrollParents=[],t.scrollElement=null,t.eventsEnabled=!1,t}function oe(){this.state.eventsEnabled&&(window.cancelAnimationFrame(this.scheduleUpdate),this.state=ie(this.reference,this.state))}function ne(e){return''!==e&&!isNaN(parseFloat(e))&&isFinite(e)}function re(e,t){Object.keys(t).forEach(function(i){var o='';-1!==['width','height','top','right','bottom','left'].indexOf(i)&&ne(t[i])&&(o='px'),e.style[i]=t[i]+o})}function se(e,t){Object.keys(t).forEach(function(i){var o=t[i];!1===o?e.removeAttribute(i):e.setAttribute(i,t[i])})}function ae(e,t,i){var o=K(e,function(e){var i=e.name;return i===t}),n=!!o&&e.some(function(e){return e.name===i&&e.enabled&&e.order<o.order});if(!n){var r='`'+t+'`';console.warn('`'+i+'`'+' modifier is required by '+r+' modifier in order to work, be sure to include it before '+r+'!')}return n}function pe(e){return'end'===e?'start':'start'===e?'end':e}function de(e){var t=1<arguments.length&&void 0!==arguments[1]&&arguments[1],i=Xe.indexOf(e),o=Xe.slice(i+1).concat(Xe.slice(0,i));return t?o.reverse():o}function le(e,t,i,o){var n=e.match(/((?:\-|\+)?\d*\.?\d*)(.*)/),r=+n[1],s=n[2];if(!r)return e;if(0===s.indexOf('%')){var a;switch(s){case'%p':a=i;break;case'%':case'%r':default:a=o;}var p=H(a);return p[t]/100*r}if('vh'===s||'vw'===s){var d;return d='vh'===s?Se(document.documentElement.clientHeight,window.innerHeight||0):Se(document.documentElement.clientWidth,window.innerWidth||0),d/100*r}return r}function ce(e,t,i,o){var n=[0,0],r=-1!==['right','left'].indexOf(o),s=e.split(/(\+|\-)/).map(function(e){return e.trim()}),a=s.indexOf(K(s,function(e){return-1!==e.search(/,|\s/)}));s[a]&&-1===s[a].indexOf(',')&&console.warn('Offsets separated by white space(s) are deprecated, use a comma (,) instead.');var p=/\s*,\s*|\s+/,d=-1===a?[s]:[s.slice(0,a).concat([s[a].split(p)[0]]),[s[a].split(p)[1]].concat(s.slice(a+1))];return d=d.map(function(e,o){var n=(1===o?!r:r)?'height':'width',s=!1;return e.reduce(function(e,t){return''===e[e.length-1]&&-1!==['+','-'].indexOf(t)?(e[e.length-1]=t,s=!0,e):s?(e[e.length-1]+=t,s=!1,e):e.concat(t)},[]).map(function(e){return le(e,n,t,i)})}),d.forEach(function(e,t){e.forEach(function(i,o){ne(i)&&(n[t]+=i*('-'===e[o-1]?-1:1))})}),n}function fe(e){return-(e-ke.distance)+'px'}function me(e){var t=e.el,i=e.popper,o=e.settings,n=o.position,r=o.popperOptions,s=o.offset,a=o.distance,p=o.flipDuration,d=i.querySelector(Ce.TOOLTIP),l=$e({placement:n},r||{},{modifiers:$e({},r?r.modifiers:{},{flip:$e({padding:a+5},r&&r.modifiers?r.modifiers.flip:{}),offset:$e({offset:s},r&&r.modifiers?r.modifiers.offset:{})}),onUpdate:function(){var e=d.style;e.top='',e.bottom='',e.left='',e.right='',e[b(i.getAttribute('x-placement'))]=fe(a)}});return new Ve(t,i,l)}function he(e){var t=e.el,i=e.popper,o=e.settings,n=o.appendTo,r=o.followCursor,s=o.flipDuration;if(!n.contains(i)){if(n.appendChild(i),!!e.popperInstance)e.popperInstance.update(),(!r||Ae.touch)&&e.popperInstance.enableEventListeners();else if(e.popperInstance=me(e),window.MutationObserver){var d=i.style,l=new MutationObserver(function(){d[p('transitionDuration')]='0ms',e.popperInstance.update(),a(function(){d[p('transitionDuration')]=s+'ms'})});l.observe(i,{childList:!0,subtree:!0,characterData:!0}),e._mutationObserver=l}r&&!Ae.touch&&(t.addEventListener('mousemove',y),e.popperInstance.disableEventListeners())}}function ue(e){var t=e.popper,i=e.popperInstance,o=e.settings.stickyDuration,n=function(){return t.style[p('transitionDuration')]=o+'ms'},r=function(){return t.style[p('transitionDuration')]=''};a(function e(){i&&i.scheduleUpdate(),n(),u(t)?window.requestAnimationFrame(e):r()})}function ge(e,t){var i=Ie.reduce(function(i,o){var n=e.getAttribute('data-'+o.toLowerCase())||t[o];return'false'===n&&(n=!1),'true'===n&&(n=!0),isFinite(n)&&!isNaN(parseFloat(n))&&(n=parseFloat(n)),'string'==typeof n&&'['===n.trim().charAt(0)&&(n=JSON.parse(n)),i[o]=n,i},{});return $e({},t,i)}function be(e,t,i){var o=i.position,n=i.distance,r=i.arrow,s=i.animateFill,a=i.inertia,p=i.animation,d=i.arrowSize,l=i.size,c=i.theme,f=i.html,m=i.zIndex,h=i.interactive,u=document.createElement('div');u.setAttribute('class','tippy-popper'),u.setAttribute('role','tooltip'),u.setAttribute('aria-hidden','true'),u.setAttribute('id','tippy-tooltip-'+e),u.style.zIndex=m;var g=document.createElement('div');if(g.setAttribute('class','tippy-tooltip tippy-tooltip--'+l+' leave'),g.setAttribute('data-animation',p),c.split(' ').forEach(function(e){g.classList.add(e+'-theme')}),r){var y=document.createElement('div');y.setAttribute('class','arrow-'+d),y.setAttribute('x-arrow',''),g.appendChild(y)}if(s){g.setAttribute('data-animatefill','');var v=document.createElement('div');v.setAttribute('class','leave'),v.setAttribute('x-circle',''),g.appendChild(v)}a&&g.setAttribute('data-inertia',''),h&&g.setAttribute('data-interactive','');var E=document.createElement('div');if(E.setAttribute('class','tippy-tooltip-content'),f){var O;f instanceof Element?(E.appendChild(f),O='#'+f.id||'tippy-html-template'):(E.innerHTML=document.getElementById(f.replace('#','')).innerHTML,O=f),u.classList.add('html-template'),h&&u.setAttribute('tabindex','-1'),g.setAttribute('data-template-id',O)}else E.innerHTML=t;return g.style[b(o)]=fe(n),g.appendChild(E),u.appendChild(g),u}function ye(e,t,i,o){var n=[];return'manual'===e?n:(t.addEventListener(e,i.handleTrigger),n.push({event:e,handler:i.handleTrigger}),'mouseenter'===e&&(Ae.SUPPORTS_TOUCH&&o&&(t.addEventListener('touchstart',i.handleTrigger),n.push({event:'touchstart',handler:i.handleTrigger}),t.addEventListener('touchend',i.handleMouseleave),n.push({event:'touchend',handler:i.handleMouseleave})),t.addEventListener('mouseleave',i.handleMouseleave),n.push({event:'mouseleave',handler:i.handleMouseleave})),'focus'===e&&(t.addEventListener('blur',i.handleBlur),n.push({event:'blur',handler:i.handleBlur})),n)}function ve(e,t,i){if(!t.getAttribute('x-placement'))return!0;var o=e.clientX,n=e.clientY,r=i.interactiveBorder,s=i.distance,a=t.getBoundingClientRect(),p=b(t.getAttribute('x-placement')),d=r+s,l={top:a.top-n>r,bottom:n-a.bottom>r,left:a.left-o>r,right:o-a.right>r};return'top'===p?l.top=a.top-n>d:'bottom'===p?l.bottom=n-a.bottom>d:'left'===p?l.left=a.left-o>d:'right'===p?l.right=o-a.right>d:void 0,l.top||l.bottom||l.left||l.right}function Ee(e,t,i){var n,r,s=this,a=i.position,p=i.delay,d=i.duration,l=i.interactive,c=i.interactiveBorder,f=i.distance,m=i.hideOnClick,h=i.trigger,g=i.touchHold,b=i.touchWait,y=function(){clearTimeout(n),clearTimeout(r)},v=function(){if(y(),!u(t)){var e=Array.isArray(p)?p[0]:p;p?n=setTimeout(function(){return s.show(t)},e):s.show(t)}},E=function(e){return s.callbacks.wait?s.callbacks.wait.call(t,v,e):v()},O=function(){y();var e=Array.isArray(p)?p[1]:p;p?r=setTimeout(function(){return s.hide(t)},e):s.hide(t)};return{handleTrigger:function(i){var o='mouseenter'===i.type&&Ae.SUPPORTS_TOUCH&&Ae.touch;if(!(o&&g)){var n='click'===i.type;n&&u(t)&&'persistent'!==m?O():E(i),o&&Ae.iOS()&&e.click&&e.click()}},handleMouseleave:function(n){if(!('mouseleave'===n.type&&Ae.SUPPORTS_TOUCH&&Ae.touch&&g)){if(l){var r=function n(r){var s=function(){document.body.removeEventListener('mouseleave',O),document.removeEventListener('mousemove',n),O()},a=o(r.target,Ce.TOOLTIPPED_EL),p=o(r.target,Ce.POPPER)===t,d=-1!==h.indexOf('click');return a&&a!==e?s():void(p||a===e||d||ve(r,t,i)&&s())};return document.body.addEventListener('mouseleave',O),void document.addEventListener('mousemove',r)}O()}},handleBlur:function(e){!e.relatedTarget||Ae.touch||o(e.relatedTarget,Ce.POPPER)||O()}}}function Oe(e){var t=this;return e.reduce(function(e,i){var o=Qe,n=t.settings.performance?t.settings:ge(i,t.settings);n.arrow&&(n.animateFill=!1);var r=n.html,s=n.trigger,a=n.touchHold,p=i.getAttribute('title');if(!p&&!r)return e;i.setAttribute('data-tooltipped',''),i.setAttribute('aria-describedby','tippy-tooltip-'+o),l(i);var d=be(o,p,n),c=Ee.call(t,i,d,n),f=[];return s.trim().split(' ').forEach(function(e){return f=f.concat(ye(e,i,c,a))}),e.push({id:o,el:i,popper:d,settings:n,listeners:f,tippyInstance:t}),Qe++,e},[])}function we(e,t){return new et(e,t)}var Te=Math.min,Le=Math.floor,Se=Math.max,xe=Math.round,Ae={};'undefined'!=typeof window&&(Ae.SUPPORTED='requestAnimationFrame'in window,Ae.SUPPORTS_TOUCH='ontouchstart'in window,Ae.touch=!1,Ae.dynamicInputDetection=!0,Ae.iOS=function(){return /iPhone|iPad|iPod/.test(navigator.userAgent)&&!window.MSStream});for(var Pe=[],Ce={POPPER:'.tippy-popper',TOOLTIP:'.tippy-tooltip',CONTENT:'.tippy-tooltip-content',CIRCLE:'[x-circle]',ARROW:'[x-arrow]',TOOLTIPPED_EL:'[data-tooltipped]',CONTROLLER:'[data-tippy-controller]'},ke={html:!1,position:'top',animation:'shift',animateFill:!0,arrow:!1,arrowSize:'regular',delay:0,trigger:'mouseenter focus',duration:350,interactive:!1,interactiveBorder:2,theme:'dark',size:'regular',distance:10,offset:0,hideOnClick:!0,multiple:!1,followCursor:!1,inertia:!1,flipDuration:350,sticky:!1,stickyDuration:200,appendTo:null,zIndex:9999,touchHold:!1,performance:!1,dynamicTitle:!1,popperOptions:{}},Ie=Ae.SUPPORTED&&Object.keys(ke),De=Element.prototype,e=De.matches||De.matchesSelector||De.webkitMatchesSelector||De.mozMatchesSelector||De.msMatchesSelector||function(e){for(var t=(this.document||this.ownerDocument).querySelectorAll(e),o=t.length;0<=--o&&t.item(o)!==this;);return-1<o},Re=['native code','[object MutationObserverConstructor]'],He=function(e){return Re.some(function(t){return-1<(e||'').toString().indexOf(t)})},Ne='undefined'!=typeof window,Me=['Edge','Trident','Firefox'],Be=0,We=0;We<Me.length;We+=1)if(Ne&&0<=navigator.userAgent.indexOf(Me[We])){Be=1;break}var i,Ue=Ne&&He(window.MutationObserver),qe=Ue?function(e){var t=!1,o=0,i=document.createElement('span'),n=new MutationObserver(function(){e(),t=!1});return n.observe(i,{attributes:!0}),function(){t||(t=!0,i.setAttribute('x-index',o),++o)}}:function(e){var t=!1;return function(){t||(t=!0,setTimeout(function(){t=!1,e()},Be))}},_e=function(){return void 0==i&&(i=-1!==navigator.appVersion.indexOf('MSIE 10')),i},Fe=function(e,t){if(!(e instanceof t))throw new TypeError('Cannot call a class as a function')},Ye=function(){function e(e,t){for(var o,n=0;n<t.length;n++)o=t[n],o.enumerable=o.enumerable||!1,o.configurable=!0,'value'in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}return function(t,i,o){return i&&e(t.prototype,i),o&&e(t,o),t}}(),ze=function(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e},je=Object.assign||function(e){for(var t,o=1;o<arguments.length;o++)for(var i in t=arguments[o],t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},Ke=['auto-start','auto','auto-end','top-start','top','top-end','right-start','right','right-end','bottom-end','bottom','bottom-start','left-end','left','left-start'],Xe=Ke.slice(3),Ge={FLIP:'flip',CLOCKWISE:'clockwise',COUNTERCLOCKWISE:'counterclockwise'},Ve=function(){function e(t,i){var o=this,n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{};Fe(this,e),this.scheduleUpdate=function(){return requestAnimationFrame(o.update)},this.update=qe(this.update.bind(this)),this.options=je({},e.Defaults,n),this.state={isDestroyed:!1,isCreated:!1,scrollParents:[]},this.reference=t.jquery?t[0]:t,this.popper=i.jquery?i[0]:i,this.options.modifiers={},Object.keys(je({},e.Defaults.modifiers,n.modifiers)).forEach(function(t){o.options.modifiers[t]=je({},e.Defaults.modifiers[t]||{},n.modifiers?n.modifiers[t]:{})}),this.modifiers=Object.keys(this.options.modifiers).map(function(e){return je({name:e},o.options.modifiers[e])}).sort(function(e,t){return e.order-t.order}),this.modifiers.forEach(function(e){e.enabled&&O(e.onLoad)&&e.onLoad(o.reference,o.popper,o.options,e,o.state)}),this.update();var r=this.options.eventsEnabled;r&&this.enableEventListeners(),this.state.eventsEnabled=r}return Ye(e,[{key:'update',value:function(){return V.call(this)}},{key:'destroy',value:function(){return $.call(this)}},{key:'enableEventListeners',value:function(){return te.call(this)}},{key:'disableEventListeners',value:function(){return oe.call(this)}}]),e}();Ve.Utils=('undefined'==typeof window?global:window).PopperUtils,Ve.placements=Ke,Ve.Defaults={placement:'bottom',eventsEnabled:!0,removeOnDestroy:!1,onCreate:function(){},onUpdate:function(){},modifiers:{shift:{order:100,enabled:!0,fn:function(e){var t=e.placement,i=t.split('-')[0],o=t.split('-')[1];if(o){var n=e.offsets,r=n.reference,s=n.popper,a=-1!==['bottom','top'].indexOf(i),p=a?'left':'top',d=a?'width':'height',l={start:ze({},p,r[p]),end:ze({},p,r[p]+r[d]-s[d])};e.offsets.popper=je({},s,l[o])}return e}},offset:{order:200,enabled:!0,fn:function(e,t){var i,o=t.offset,n=e.placement,r=e.offsets,s=r.popper,a=r.reference,p=n.split('-')[0];return i=ne(+o)?[+o,0]:ce(o,s,a,p),'left'===p?(s.top+=i[0],s.left-=i[1]):'right'===p?(s.top+=i[0],s.left+=i[1]):'top'===p?(s.left+=i[0],s.top-=i[1]):'bottom'===p&&(s.left+=i[0],s.top+=i[1]),e.popper=s,e},offset:0},preventOverflow:{order:300,enabled:!0,fn:function(e,t){var i=t.boundariesElement||S(e.instance.popper);e.instance.reference===i&&(i=S(i));var o=U(e.instance.popper,e.instance.reference,t.padding,i);t.boundaries=o;var n=t.priority,r=e.offsets.popper,s={primary:function(e){var i=r[e];return r[e]<o[e]&&!t.escapeWithReference&&(i=Se(r[e],o[e])),ze({},e,i)},secondary:function(e){var i='right'===e?'left':'top',n=r[i];return r[e]>o[e]&&!t.escapeWithReference&&(n=Te(r[i],o[e]-('right'===e?r.width:r.height))),ze({},i,n)}};return n.forEach(function(e){var t=-1===['left','top'].indexOf(e)?'secondary':'primary';r=je({},r,s[t](e))}),e.offsets.popper=r,e},priority:['left','right','top','bottom'],padding:5,boundariesElement:'scrollParent'},keepTogether:{order:400,enabled:!0,fn:function(e){var t=e.offsets,i=t.popper,o=t.reference,n=e.placement.split('-')[0],r=Le,s=-1!==['top','bottom'].indexOf(n),a=s?'right':'bottom',p=s?'left':'top',d=s?'width':'height';return i[a]<r(o[p])&&(e.offsets.popper[p]=r(o[p])-i[d]),i[p]>r(o[a])&&(e.offsets.popper[p]=r(o[a])),e}},arrow:{order:500,enabled:!0,fn:function(e,t){if(!ae(e.instance.modifiers,'arrow','keepTogether'))return e;var i=t.element;if('string'==typeof i){if(i=e.instance.popper.querySelector(i),!i)return e;}else if(!e.instance.popper.contains(i))return console.warn('WARNING: `arrow.element` must be child of its popper element!'),e;var o=e.placement.split('-')[0],n=e.offsets,r=n.popper,s=n.reference,a=-1!==['left','right'].indexOf(o),p=a?'height':'width',d=a?'top':'left',l=a?'left':'top',c=a?'bottom':'right',f=Y(i)[p];s[c]-f<r[d]&&(e.offsets.popper[d]-=r[d]-(s[c]-f)),s[d]+f>r[c]&&(e.offsets.popper[d]+=s[d]+f-r[c]);var m=s[d]+s[p]/2-f/2,h=m-H(e.offsets.popper)[d];return h=Se(Te(r[p]-f,h),0),e.arrowElement=i,e.offsets.arrow={},e.offsets.arrow[d]=xe(h),e.offsets.arrow[l]='',e},element:'[x-arrow]'},flip:{order:600,enabled:!0,fn:function(e,t){if(J(e.instance.modifiers,'inner'))return e;if(e.flipped&&e.placement===e.originalPlacement)return e;var i=U(e.instance.popper,e.instance.reference,t.padding,t.boundariesElement),o=e.placement.split('-')[0],n=z(o),r=e.placement.split('-')[1]||'',s=[];switch(t.behavior){case Ge.FLIP:s=[o,n];break;case Ge.CLOCKWISE:s=de(o);break;case Ge.COUNTERCLOCKWISE:s=de(o,!0);break;default:s=t.behavior;}return s.forEach(function(a,p){if(o!==a||s.length===p+1)return e;o=e.placement.split('-')[0],n=z(o);var d=e.offsets.popper,l=e.offsets.reference,c=Le,f='left'===o&&c(d.right)>c(l.left)||'right'===o&&c(d.left)<c(l.right)||'top'===o&&c(d.bottom)>c(l.top)||'bottom'===o&&c(d.top)<c(l.bottom),m=c(d.left)<c(i.left),h=c(d.right)>c(i.right),u=c(d.top)<c(i.top),g=c(d.bottom)>c(i.bottom),b='left'===o&&m||'right'===o&&h||'top'===o&&u||'bottom'===o&&g,y=-1!==['top','bottom'].indexOf(o),v=!!t.flipVariations&&(y&&'start'===r&&m||y&&'end'===r&&h||!y&&'start'===r&&u||!y&&'end'===r&&g);(f||b||v)&&(e.flipped=!0,(f||b)&&(o=s[p+1]),v&&(r=pe(r)),e.placement=o+(r?'-'+r:''),e.offsets.popper=je({},e.offsets.popper,j(e.instance.popper,e.offsets.reference,e.placement)),e=G(e.instance.modifiers,e,'flip'))}),e},behavior:'flip',padding:5,boundariesElement:'viewport'},inner:{order:700,enabled:!1,fn:function(e){var t=e.placement,i=t.split('-')[0],o=e.offsets,n=o.popper,r=o.reference,s=-1!==['left','right'].indexOf(i),a=-1===['top','left'].indexOf(i);return n[s?'left':'top']=r[t]-(a?n[s?'width':'height']:0),e.placement=z(t),e.offsets.popper=H(n),e}},hide:{order:800,enabled:!0,fn:function(e){if(!ae(e.instance.modifiers,'hide','preventOverflow'))return e;var t=e.offsets.reference,i=K(e.instance.modifiers,function(e){return'preventOverflow'===e.name}).boundaries;if(t.bottom<i.top||t.left>i.right||t.top>i.bottom||t.right<i.left){if(!0===e.hide)return e;e.hide=!0,e.attributes['x-out-of-boundaries']=''}else{if(!1===e.hide)return e;e.hide=!1,e.attributes['x-out-of-boundaries']=!1}return e}},computeStyle:{order:850,enabled:!0,fn:function(e,t){var i=t.x,o=t.y,n=e.offsets.popper,r=K(e.instance.modifiers,function(e){return'applyStyle'===e.name}).gpuAcceleration;void 0!==r&&console.warn('WARNING: `gpuAcceleration` option moved to `computeStyle` modifier and will not be supported in future versions of Popper.js!');var s,a,p=void 0===r?t.gpuAcceleration:r,d=S(e.instance.popper),l=N(d),c={position:n.position},f={left:Le(n.left),top:Le(n.top),bottom:Le(n.bottom),right:Le(n.right)},m='bottom'===i?'top':'bottom',h='right'===o?'left':'right',u=Z('transform');if(a='bottom'==m?-l.height+f.bottom:f.top,s='right'==h?-l.width+f.right:f.left,p&&u)c[u]='translate3d('+s+'px, '+a+'px, 0)',c[m]=0,c[h]=0,c.willChange='transform';else{var g='bottom'==m?-1:1,b='right'==h?-1:1;c[m]=a*g,c[h]=s*b,c.willChange=m+', '+h}var y={"x-placement":e.placement};return e.attributes=je({},y,e.attributes),e.styles=je({},c,e.styles),e},gpuAcceleration:!0,x:'bottom',y:'right'},applyStyle:{order:900,enabled:!0,fn:function(e){return re(e.instance.popper,e.styles),se(e.instance.popper,e.attributes),e.offsets.arrow&&re(e.arrowElement,e.offsets.arrow),e},onLoad:function(e,t,i,o,n){var r=F(n,t,e),s=_(i.placement,r,t,e,i.modifiers.flip.boundariesElement,i.modifiers.flip.padding);return t.setAttribute('x-placement',s),re(t,{position:'absolute'}),i},gpuAcceleration:void 0}}};var Je=function(e,t){if(!(e instanceof t))throw new TypeError('Cannot call a class as a function')},Ze=function(){function e(e,t){for(var o,n=0;n<t.length;n++)o=t[n],o.enumerable=o.enumerable||!1,o.configurable=!0,'value'in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}return function(t,i,o){return i&&e(t.prototype,i),o&&e(t,o),t}}(),$e=Object.assign||function(e){for(var t,o=1;o<arguments.length;o++)for(var i in t=arguments[o],t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},Qe=1,et=function(){function e(t){var i=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};Je(this,e),Ae.SUPPORTED&&(s(),this.state={destroyed:!1},this.selector=t,this.settings=$e({},ke,i),this.callbacks={wait:i.wait,show:i.onShow||i.show||g,shown:i.onShown||i.shown||g,hide:i.onHide||i.hide||g,hidden:i.onHidden||i.hidden||g},this.store=Oe.call(this,v(t)),Pe.push.apply(Pe,this.store))}return Ze(e,[{key:'getPopperElement',value:function(e){try{return n(this.store,function(t){return t.el===e}).popper}catch(t){console.error('[getPopperElement]: Element passed as the argument does not exist in the instance')}}},{key:'getReferenceElement',value:function(e){try{return n(this.store,function(t){return t.popper===e}).el}catch(t){console.error('[getReferenceElement]: Popper passed as the argument does not exist in the instance')}}},{key:'getReferenceData',value:function(e){return n(this.store,function(t){return t.el===e||t.popper===e})}},{key:'show',value:function(e,t){var i=this;if(!this.state.destroyed){this.callbacks.show.call(e);var o=n(this.store,function(t){return t.popper===e}),r=e.querySelector(Ce.TOOLTIP),s=e.querySelector(Ce.CIRCLE),p=e.querySelector(Ce.CONTENT),d=o.el,c=o.settings,g=c.appendTo,b=c.sticky,y=c.interactive,v=c.followCursor,O=c.flipDuration,w=c.duration,T=c.dynamicTitle;if(T){var L=d.getAttribute('title');L&&(p.innerHTML=L,l(d))}var S=void 0===t?Array.isArray(w)?w[0]:w:t;h([e,r,s],0),he(o),e.style.visibility='visible',e.setAttribute('aria-hidden','false'),a(function(){u(e)&&((!v||Ae.touch)&&o.popperInstance.update(),h([r,s],S),(!v||Ae.touch)&&h([e],O),s&&(p.style.opacity=1),y&&d.classList.add('active'),b&&ue(o),f(r,s),m([r,s],function(e){e.contains('tippy-notransition')&&e.remove('tippy-notransition'),e.remove('leave'),e.add('enter')}),E(o,S,function(){!u(e)||o._onShownFired||(y&&e.focus(),r.classList.add('tippy-notransition'),o._onShownFired=!0,i.callbacks.shown.call(e))}))})}}},{key:'hide',value:function(e,t){var i=this;if(!this.state.destroyed){this.callbacks.hide.call(e);var o=n(this.store,function(t){return t.popper===e}),r=e.querySelector(Ce.TOOLTIP),s=e.querySelector(Ce.CIRCLE),a=e.querySelector(Ce.CONTENT),p=o.el,d=o.settings,l=d.appendTo,f=d.sticky,g=d.interactive,b=d.followCursor,v=d.html,O=d.trigger,w=d.duration,T=void 0===t?Array.isArray(w)?w[1]:w:t;o._onShownFired=!1,g&&p.classList.remove('active'),e.style.visibility='hidden',e.setAttribute('aria-hidden','true'),h([r,s,s?a:null],T),s&&(a.style.opacity=0),m([r,s],function(e){e.contains('tippy-tooltip')&&e.remove('tippy-notransition'),e.remove('enter'),e.add('leave')}),v&&-1!==O.indexOf('click')&&c(p)&&p.focus(),E(o,T,function(){u(e)||!l.contains(e)||(p.removeEventListener('mousemove',y),o.popperInstance.disableEventListeners(),l.removeChild(e),i.callbacks.hidden.call(e))})}}},{key:'update',value:function(e){if(!this.state.destroyed){var t=n(this.store,function(t){return t.popper===e}),i=e.querySelector(Ce.CONTENT),o=t.el,r=t.settings.html;return r instanceof Element?void console.warn('Aborted: update() should not be used if `html` is a DOM element'):void(i.innerHTML=r?document.getElementById(r.replace('#','')).innerHTML:o.getAttribute('title')||o.getAttribute('data-original-title'),!r&&l(o))}}},{key:'destroy',value:function(e,t){var i=this;if(!this.state.destroyed){var o=n(this.store,function(t){return t.popper===e}),r=o.el,s=o.popperInstance,a=o.listeners,p=o._mutationObserver;u(e)&&this.hide(e,0),a.forEach(function(e){return r.removeEventListener(e.event,e.handler)}),r.setAttribute('title',r.getAttribute('data-original-title')),r.removeAttribute('data-original-title'),r.removeAttribute('data-tooltipped'),r.removeAttribute('aria-describedby'),s&&s.destroy(),p&&p.disconnect(),Pe.splice(d(Pe,function(t){return t.popper===e}),1),(void 0===t||t)&&(this.store=Pe.filter(function(e){return e.tippyInstance===i}))}}},{key:'destroyAll',value:function(){var e=this;if(!this.state.destroyed){var t=this.store.length;this.store.forEach(function(i,o){var n=i.popper;e.destroy(n,o===t-1)}),this.store=null,this.state.destroyed=!0}}}]),e}();return we.Browser=Ae,we.Defaults=ke,we.disableDynamicInputDetection=function(){return Ae.dynamicInputDetection=!1},we.enableDynamicInputDetection=function(){return Ae.dynamicInputDetection=!0},we});
diff --git a/www/common/tippy/tippy.css b/www/common/tippy/tippy.css
new file mode 100644
index 000000000..80a840fde
--- /dev/null
+++ b/www/common/tippy/tippy.css
@@ -0,0 +1 @@
+.tippy-touch{cursor:pointer!important}.tippy-notransition{transition:none!important}.tippy-popper{max-width:350px;perspective:700px;z-index:9999;outline:0;transition-timing-function:cubic-bezier(.165,.84,.44,1);pointer-events:none;line-height:1.4}.tippy-popper[data-html]{max-width:96%;max-width:calc(100% - 20px)}.tippy-popper[x-placement^=top] .tippy-backdrop{border-radius:40% 40% 0 0}.tippy-popper[x-placement^=top] .tippy-roundarrow{bottom:-8px;transform-origin:50% 0}.tippy-popper[x-placement^=top] .tippy-roundarrow svg{position:absolute;left:0;transform:rotate(180deg)}.tippy-popper[x-placement^=top] .tippy-arrow{border-top:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;bottom:-7px;margin:0 6px;transform-origin:50% 0}.tippy-popper[x-placement^=top] .tippy-backdrop{transform-origin:0 90%}.tippy-popper[x-placement^=top] .tippy-backdrop[data-state=visible]{transform:scale(6) translate(-50%,25%);opacity:1}.tippy-popper[x-placement^=top] .tippy-backdrop[data-state=hidden]{transform:scale(1) translate(-50%,25%);opacity:0}.tippy-popper[x-placement^=top] [data-animation=shift-toward][data-state=visible]{opacity:1;transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift-toward][data-state=hidden]{opacity:0;transform:translateY(-20px)}.tippy-popper[x-placement^=top] [data-animation=perspective]{transform-origin:bottom}.tippy-popper[x-placement^=top] [data-animation=perspective][data-state=visible]{opacity:1;transform:translateY(-10px) rotateX(0)}.tippy-popper[x-placement^=top] [data-animation=perspective][data-state=hidden]{opacity:0;transform:translateY(0) rotateX(90deg)}.tippy-popper[x-placement^=top] [data-animation=fade][data-state=visible]{opacity:1;transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=fade][data-state=hidden]{opacity:0;transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift-away][data-state=visible]{opacity:1;transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift-away][data-state=hidden]{opacity:0;transform:translateY(0)}.tippy-popper[x-placement^=top] [data-animation=scale][data-state=visible]{opacity:1;transform:translateY(-10px) scale(1)}.tippy-popper[x-placement^=top] [data-animation=scale][data-state=hidden]{opacity:0;transform:translateY(0) scale(0)}.tippy-popper[x-placement^=bottom] .tippy-backdrop{border-radius:0 0 30% 30%}.tippy-popper[x-placement^=bottom] .tippy-roundarrow{top:-8px;transform-origin:50% 100%}.tippy-popper[x-placement^=bottom] .tippy-roundarrow svg{position:absolute;left:0;transform:rotate(0)}.tippy-popper[x-placement^=bottom] .tippy-arrow{border-bottom:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;top:-7px;margin:0 6px;transform-origin:50% 100%}.tippy-popper[x-placement^=bottom] .tippy-backdrop{transform-origin:0 -90%}.tippy-popper[x-placement^=bottom] .tippy-backdrop[data-state=visible]{transform:scale(6) translate(-50%,-125%);opacity:1}.tippy-popper[x-placement^=bottom] .tippy-backdrop[data-state=hidden]{transform:scale(1) translate(-50%,-125%);opacity:0}.tippy-popper[x-placement^=bottom] [data-animation=shift-toward][data-state=visible]{opacity:1;transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift-toward][data-state=hidden]{opacity:0;transform:translateY(20px)}.tippy-popper[x-placement^=bottom] [data-animation=perspective]{transform-origin:top}.tippy-popper[x-placement^=bottom] [data-animation=perspective][data-state=visible]{opacity:1;transform:translateY(10px) rotateX(0)}.tippy-popper[x-placement^=bottom] [data-animation=perspective][data-state=hidden]{opacity:0;transform:translateY(0) rotateX(-90deg)}.tippy-popper[x-placement^=bottom] [data-animation=fade][data-state=visible]{opacity:1;transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=fade][data-state=hidden]{opacity:0;transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift-away][data-state=visible]{opacity:1;transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift-away][data-state=hidden]{opacity:0;transform:translateY(0)}.tippy-popper[x-placement^=bottom] [data-animation=scale][data-state=visible]{opacity:1;transform:translateY(10px) scale(1)}.tippy-popper[x-placement^=bottom] [data-animation=scale][data-state=hidden]{opacity:0;transform:translateY(0) scale(0)}.tippy-popper[x-placement^=left] .tippy-backdrop{border-radius:50% 0 0 50%}.tippy-popper[x-placement^=left] .tippy-roundarrow{right:-16px;transform-origin:33.33333333% 50%}.tippy-popper[x-placement^=left] .tippy-roundarrow svg{position:absolute;left:0;transform:rotate(90deg)}.tippy-popper[x-placement^=left] .tippy-arrow{border-left:7px solid #333;border-top:7px solid transparent;border-bottom:7px solid transparent;right:-7px;margin:3px 0;transform-origin:0 50%}.tippy-popper[x-placement^=left] .tippy-backdrop{transform-origin:100% 0}.tippy-popper[x-placement^=left] .tippy-backdrop[data-state=visible]{transform:scale(6) translate(40%,-50%);opacity:1}.tippy-popper[x-placement^=left] .tippy-backdrop[data-state=hidden]{transform:scale(1.5) translate(40%,-50%);opacity:0}.tippy-popper[x-placement^=left] [data-animation=shift-toward][data-state=visible]{opacity:1;transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift-toward][data-state=hidden]{opacity:0;transform:translateX(-20px)}.tippy-popper[x-placement^=left] [data-animation=perspective]{transform-origin:right}.tippy-popper[x-placement^=left] [data-animation=perspective][data-state=visible]{opacity:1;transform:translateX(-10px) rotateY(0)}.tippy-popper[x-placement^=left] [data-animation=perspective][data-state=hidden]{opacity:0;transform:translateX(0) rotateY(-90deg)}.tippy-popper[x-placement^=left] [data-animation=fade][data-state=visible]{opacity:1;transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=fade][data-state=hidden]{opacity:0;transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift-away][data-state=visible]{opacity:1;transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift-away][data-state=hidden]{opacity:0;transform:translateX(0)}.tippy-popper[x-placement^=left] [data-animation=scale][data-state=visible]{opacity:1;transform:translateX(-10px) scale(1)}.tippy-popper[x-placement^=left] [data-animation=scale][data-state=hidden]{opacity:0;transform:translateX(0) scale(0)}.tippy-popper[x-placement^=right] .tippy-backdrop{border-radius:0 50% 50% 0}.tippy-popper[x-placement^=right] .tippy-roundarrow{left:-16px;transform-origin:66.66666666% 50%}.tippy-popper[x-placement^=right] .tippy-roundarrow svg{position:absolute;left:0;transform:rotate(-90deg)}.tippy-popper[x-placement^=right] .tippy-arrow{border-right:7px solid #333;border-top:7px solid transparent;border-bottom:7px solid transparent;left:-7px;margin:3px 0;transform-origin:100% 50%}.tippy-popper[x-placement^=right] .tippy-backdrop{transform-origin:-100% 0}.tippy-popper[x-placement^=right] .tippy-backdrop[data-state=visible]{transform:scale(6) translate(-140%,-50%);opacity:1}.tippy-popper[x-placement^=right] .tippy-backdrop[data-state=hidden]{transform:scale(1.5) translate(-140%,-50%);opacity:0}.tippy-popper[x-placement^=right] [data-animation=shift-toward][data-state=visible]{opacity:1;transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift-toward][data-state=hidden]{opacity:0;transform:translateX(20px)}.tippy-popper[x-placement^=right] [data-animation=perspective]{transform-origin:left}.tippy-popper[x-placement^=right] [data-animation=perspective][data-state=visible]{opacity:1;transform:translateX(10px) rotateY(0)}.tippy-popper[x-placement^=right] [data-animation=perspective][data-state=hidden]{opacity:0;transform:translateX(0) rotateY(90deg)}.tippy-popper[x-placement^=right] [data-animation=fade][data-state=visible]{opacity:1;transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=fade][data-state=hidden]{opacity:0;transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift-away][data-state=visible]{opacity:1;transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift-away][data-state=hidden]{opacity:0;transform:translateX(0)}.tippy-popper[x-placement^=right] [data-animation=scale][data-state=visible]{opacity:1;transform:translateX(10px) scale(1)}.tippy-popper[x-placement^=right] [data-animation=scale][data-state=hidden]{opacity:0;transform:translateX(0) scale(0)}.tippy-tooltip{position:relative;color:#fff;border-radius:4px;font-size:.9rem;padding:.3rem .6rem;text-align:center;will-change:transform;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#333}.tippy-tooltip[data-size=small]{padding:.2rem .4rem;font-size:.75rem}.tippy-tooltip[data-size=large]{padding:.4rem .8rem;font-size:1rem}.tippy-tooltip[data-animatefill]{overflow:hidden;background-color:transparent}.tippy-tooltip[data-animatefill] .tippy-content{transition:-webkit-clip-path cubic-bezier(.46,.1,.52,.98);transition:clip-path cubic-bezier(.46,.1,.52,.98);transition:clip-path cubic-bezier(.46,.1,.52,.98),-webkit-clip-path cubic-bezier(.46,.1,.52,.98)}.tippy-tooltip[data-interactive],.tippy-tooltip[data-interactive] path{pointer-events:auto}.tippy-tooltip[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.53,2,.36,.85)}.tippy-tooltip[data-inertia][data-state=hidden]{transition-timing-function:ease}.tippy-arrow,.tippy-roundarrow{position:absolute;width:0;height:0}.tippy-roundarrow{width:24px;height:8px;fill:#333;pointer-events:none}.tippy-backdrop{position:absolute;will-change:transform;background-color:#333;border-radius:50%;width:26%;left:50%;top:50%;z-index:-1;transition:all cubic-bezier(.46,.1,.52,.98);-webkit-backface-visibility:hidden;backface-visibility:hidden}.tippy-backdrop:after{content:"";float:left;padding-top:100%}body:not(.tippy-touch) .tippy-tooltip[data-animatefill][data-state=visible] .tippy-content{-webkit-clip-path:ellipse(100% 100% at 50% 50%);clip-path:ellipse(100% 100% at 50% 50%)}body:not(.tippy-touch) .tippy-tooltip[data-animatefill][data-state=hidden] .tippy-content{-webkit-clip-path:ellipse(5% 50% at 50% 50%);clip-path:ellipse(5% 50% at 50% 50%)}body:not(.tippy-touch) .tippy-popper[x-placement=right] .tippy-tooltip[data-animatefill][data-state=visible] .tippy-content{-webkit-clip-path:ellipse(135% 100% at 0 50%);clip-path:ellipse(135% 100% at 0 50%)}body:not(.tippy-touch) .tippy-popper[x-placement=right] .tippy-tooltip[data-animatefill][data-state=hidden] .tippy-content{-webkit-clip-path:ellipse(40% 100% at 0 50%);clip-path:ellipse(40% 100% at 0 50%)}body:not(.tippy-touch) .tippy-popper[x-placement=left] .tippy-tooltip[data-animatefill][data-state=visible] .tippy-content{-webkit-clip-path:ellipse(135% 100% at 100% 50%);clip-path:ellipse(135% 100% at 100% 50%)}body:not(.tippy-touch) .tippy-popper[x-placement=left] .tippy-tooltip[data-animatefill][data-state=hidden] .tippy-content{-webkit-clip-path:ellipse(40% 100% at 100% 50%);clip-path:ellipse(40% 100% at 100% 50%)}@media (max-width:360px){.tippy-popper{max-width:96%;max-width:calc(100% - 20px)}}
\ No newline at end of file
diff --git a/www/common/tippy/tippy.min.js b/www/common/tippy/tippy.min.js
new file mode 100644
index 000000000..e274f5025
--- /dev/null
+++ b/www/common/tippy/tippy.min.js
@@ -0,0 +1 @@
+(function(e,t){'object'==typeof exports&&'undefined'!=typeof module?module.exports=t():'function'==typeof define&&define.amd?define(t):e.tippy=t()})(this,function(){'use strict';function t(e){return'[object Object]'==={}.toString.call(e)}function o(e){return[].slice.call(e)}function n(e){if(e instanceof Element||t(e))return[e];if(e instanceof NodeList)return o(e);if(Array.isArray(e))return e;try{return o(document.querySelectorAll(e))}catch(e){return[]}}function r(e){e.refObj=!0,e.attributes=e.attributes||{},e.setAttribute=function(t,o){e.attributes[t]=o},e.getAttribute=function(t){return e.attributes[t]},e.removeAttribute=function(t){delete e.attributes[t]},e.addEventListener=function(){},e.removeEventListener=function(){},e.classList={classNames:{},add:function(t){return e.classList.classNames[t]=!0},remove:function(t){return delete e.classList.classNames[t],!0},contains:function(t){return!!e.classList.classNames[t]}}}function a(e){for(var t=['','webkit'],o=e.charAt(0).toUpperCase()+e.slice(1),n=0;n<t.length;n++){var i=t[n],r=i?i+o:e;if('undefined'!=typeof document.body.style[r])return r}return null}function s(e,t,o){var i=document.createElement('div');i.setAttribute('class','tippy-popper'),i.setAttribute('role','tooltip'),i.setAttribute('id','tippy-'+e),i.style.zIndex=o.zIndex,i.style.maxWidth=o.maxWidth;var n=document.createElement('div');if(n.setAttribute('class','tippy-tooltip'),n.setAttribute('data-size',o.size),n.setAttribute('data-animation',o.animation),n.setAttribute('data-state','hidden'),o.theme.split(' ').forEach(function(e){n.classList.add(e+'-theme')}),o.arrow){var r=document.createElement('div');r.style[a('transform')]=o.arrowTransform,'round'===o.arrowType?(r.classList.add('tippy-roundarrow'),r.innerHTML='<svg viewBox="0 0 24 8" xmlns="http://www.w3.org/2000/svg"><path d="M3 8s2.021-.015 5.253-4.218C9.584 2.051 10.797 1.007 12 1c1.203-.007 2.416 1.035 3.761 2.782C19.012 8.005 21 8 21 8H3z"/></svg>'):r.classList.add('tippy-arrow'),n.appendChild(r)}if(o.animateFill){n.setAttribute('data-animatefill','');var s=document.createElement('div');s.setAttribute('data-state','hidden'),s.classList.add('tippy-backdrop'),n.appendChild(s)}o.inertia&&n.setAttribute('data-inertia',''),o.interactive&&n.setAttribute('data-interactive','');var p=document.createElement('div');p.setAttribute('class','tippy-content');var l=o.html;if(l){var d;l instanceof Element?(p.appendChild(l),d='#'+l.id||'tippy-html-template'):(p.innerHTML=document.querySelector(l).innerHTML,d=l),i.setAttribute('data-html',''),n.setAttribute('data-template-id',d),o.interactive&&i.setAttribute('tabindex','-1')}else p[o.allowTitleHTML?'innerHTML':'textContent']=t;return n.appendChild(p),i.appendChild(n),i}function p(e,t,o,i){var n=o.onTrigger,r=o.onMouseLeave,a=o.onBlur,s=o.onDelegateShow,p=o.onDelegateHide,l=[];if('manual'===e)return l;var d=function(e,o){t.addEventListener(e,o),l.push({event:e,handler:o})};return i.target?(ze.supportsTouch&&i.touchHold&&(d('touchstart',s),d('touchend',p)),'mouseenter'===e&&(d('mouseover',s),d('mouseout',p)),'focus'===e&&(d('focusin',s),d('focusout',p)),'click'===e&&d('click',s)):(d(e,n),ze.supportsTouch&&i.touchHold&&(d('touchstart',n),d('touchend',r)),'mouseenter'===e&&d('mouseleave',r),'focus'===e&&d(qe?'focusout':'blur',a)),l}function l(e,t){var o=Ke.reduce(function(o,i){var n=e.getAttribute('data-tippy-'+i.toLowerCase())||t[i];return'false'===n&&(n=!1),'true'===n&&(n=!0),isFinite(n)&&!isNaN(parseFloat(n))&&(n=parseFloat(n)),'target'!==i&&'string'==typeof n&&'['===n.trim().charAt(0)&&(n=JSON.parse(n)),o[i]=n,o},{});return Qe({},t,o)}function d(e,t){return t.arrow&&(t.animateFill=!1),t.appendTo&&'function'==typeof t.appendTo&&(t.appendTo=t.appendTo()),'function'==typeof t.html&&(t.html=t.html(e)),t}function c(e){var t=function(t){return e.querySelector(t)};return{tooltip:t(je.TOOLTIP),backdrop:t(je.BACKDROP),content:t(je.CONTENT),arrow:t(je.ARROW)||t(je.ROUND_ARROW)}}function f(e){var t=e.getAttribute('title');t&&e.setAttribute('data-original-title',t),e.removeAttribute('title')}function m(e){return e&&'[object Function]'==={}.toString.call(e)}function u(e,t){if(1!==e.nodeType)return[];var o=getComputedStyle(e,null);return t?o[t]:o}function h(e){return'HTML'===e.nodeName?e:e.parentNode||e.host}function g(e){if(!e)return document.body;switch(e.nodeName){case'HTML':case'BODY':return e.ownerDocument.body;case'#document':return e.body;}var t=u(e),o=t.overflow,i=t.overflowX,n=t.overflowY;return /(auto|scroll|overlay)/.test(o+n+i)?e:g(h(e))}function b(e){return 11===e?ot:10===e?it:ot||it}function v(e){if(!e)return document.documentElement;for(var t=b(10)?document.body:null,o=e.offsetParent;o===t&&e.nextElementSibling;)o=(e=e.nextElementSibling).offsetParent;var i=o&&o.nodeName;return i&&'BODY'!==i&&'HTML'!==i?-1!==['TD','TABLE'].indexOf(o.nodeName)&&'static'===u(o,'position')?v(o):o:e?e.ownerDocument.documentElement:document.documentElement}function y(e){var t=e.nodeName;return'BODY'!==t&&('HTML'===t||v(e.firstElementChild)===e)}function w(e){return null===e.parentNode?e:w(e.parentNode)}function E(e,t){if(!e||!e.nodeType||!t||!t.nodeType)return document.documentElement;var o=e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING,i=o?e:t,n=o?t:e,r=document.createRange();r.setStart(i,0),r.setEnd(n,0);var a=r.commonAncestorContainer;if(e!==a&&t!==a||i.contains(n))return y(a)?a:v(a);var s=w(e);return s.host?E(s.host,t):E(e,w(t).host)}function T(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:'top',o='top'===t?'scrollTop':'scrollLeft',i=e.nodeName;if('BODY'===i||'HTML'===i){var n=e.ownerDocument.documentElement,r=e.ownerDocument.scrollingElement||n;return r[o]}return e[o]}function L(e,t){var o=!!(2<arguments.length&&void 0!==arguments[2])&&arguments[2],i=T(t,'top'),n=T(t,'left'),r=o?-1:1;return e.top+=i*r,e.bottom+=i*r,e.left+=n*r,e.right+=n*r,e}function O(e,t){var o='x'===t?'Left':'Top',i='Left'==o?'Right':'Bottom';return parseFloat(e['border'+o+'Width'],10)+parseFloat(e['border'+i+'Width'],10)}function x(e,t,o,i){return Fe(t['offset'+e],t['scroll'+e],o['client'+e],o['offset'+e],o['scroll'+e],b(10)?o['offset'+e]+i['margin'+('Height'===e?'Top':'Left')]+i['margin'+('Height'===e?'Bottom':'Right')]:0)}function A(){var e=document.body,t=document.documentElement,o=b(10)&&getComputedStyle(t);return{height:x('Height',e,t,o),width:x('Width',e,t,o)}}function k(e){return st({},e,{right:e.left+e.width,bottom:e.top+e.height})}function C(e){var t={};try{if(b(10)){t=e.getBoundingClientRect();var o=T(e,'top'),i=T(e,'left');t.top+=o,t.left+=i,t.bottom+=o,t.right+=i}else t=e.getBoundingClientRect()}catch(t){}var n={left:t.left,top:t.top,width:t.right-t.left,height:t.bottom-t.top},r='HTML'===e.nodeName?A():{},a=r.width||e.clientWidth||n.right-n.left,s=r.height||e.clientHeight||n.bottom-n.top,p=e.offsetWidth-a,l=e.offsetHeight-s;if(p||l){var d=u(e);p-=O(d,'x'),l-=O(d,'y'),n.width-=p,n.height-=l}return k(n)}function S(e,t){var o=!!(2<arguments.length&&void 0!==arguments[2])&&arguments[2],i=b(10),n='HTML'===t.nodeName,r=C(e),a=C(t),s=g(e),p=u(t),l=parseFloat(p.borderTopWidth,10),d=parseFloat(p.borderLeftWidth,10);o&&'HTML'===t.nodeName&&(a.top=Fe(a.top,0),a.left=Fe(a.left,0));var c=k({top:r.top-a.top-l,left:r.left-a.left-d,width:r.width,height:r.height});if(c.marginTop=0,c.marginLeft=0,!i&&n){var f=parseFloat(p.marginTop,10),m=parseFloat(p.marginLeft,10);c.top-=l-f,c.bottom-=l-f,c.left-=d-m,c.right-=d-m,c.marginTop=f,c.marginLeft=m}return(i&&!o?t.contains(s):t===s&&'BODY'!==s.nodeName)&&(c=L(c,t)),c}function P(e){var t=!!(1<arguments.length&&void 0!==arguments[1])&&arguments[1],o=e.ownerDocument.documentElement,i=S(e,o),n=Fe(o.clientWidth,window.innerWidth||0),r=Fe(o.clientHeight,window.innerHeight||0),a=t?0:T(o),s=t?0:T(o,'left'),p={top:a-i.top+i.marginTop,left:s-i.left+i.marginLeft,width:n,height:r};return k(p)}function I(e){var t=e.nodeName;return'BODY'!==t&&'HTML'!==t&&('fixed'===u(e,'position')||I(h(e)))}function D(e){if(!e||!e.parentElement||b())return document.documentElement;for(var t=e.parentElement;t&&'none'===u(t,'transform');)t=t.parentElement;return t||document.documentElement}function R(e,t,o,i){var n=!!(4<arguments.length&&void 0!==arguments[4])&&arguments[4],r={top:0,left:0},a=n?D(e):E(e,t);if('viewport'===i)r=P(a,n);else{var s;'scrollParent'===i?(s=g(h(t)),'BODY'===s.nodeName&&(s=e.ownerDocument.documentElement)):'window'===i?s=e.ownerDocument.documentElement:s=i;var p=S(s,a,n);if('HTML'===s.nodeName&&!I(a)){var l=A(),d=l.height,c=l.width;r.top+=p.top-p.marginTop,r.bottom=d+p.top,r.left+=p.left-p.marginLeft,r.right=c+p.left}else r=p}return r.left+=o,r.top+=o,r.right-=o,r.bottom-=o,r}function _(e){var t=e.width,o=e.height;return t*o}function H(e,t,o,i,n){var r=5<arguments.length&&void 0!==arguments[5]?arguments[5]:0;if(-1===e.indexOf('auto'))return e;var a=R(o,i,r,n),s={top:{width:a.width,height:t.top-a.top},right:{width:a.right-t.right,height:a.height},bottom:{width:a.width,height:a.bottom-t.bottom},left:{width:t.left-a.left,height:a.height}},p=Object.keys(s).map(function(e){return st({key:e},s[e],{area:_(s[e])})}).sort(function(e,t){return t.area-e.area}),l=p.filter(function(e){var t=e.width,i=e.height;return t>=o.clientWidth&&i>=o.clientHeight}),d=0<l.length?l[0].key:p[0].key,c=e.split('-')[1];return d+(c?'-'+c:'')}function N(e,t,o){var i=3<arguments.length&&void 0!==arguments[3]?arguments[3]:null,n=i?D(t):E(t,o);return S(o,n,i)}function M(e){var t=getComputedStyle(e),o=parseFloat(t.marginTop)+parseFloat(t.marginBottom),i=parseFloat(t.marginLeft)+parseFloat(t.marginRight),n={width:e.offsetWidth+i,height:e.offsetHeight+o};return n}function W(e){var t={left:'right',right:'left',bottom:'top',top:'bottom'};return e.replace(/left|right|bottom|top/g,function(e){return t[e]})}function B(e,t,o){o=o.split('-')[0];var i=M(e),n={width:i.width,height:i.height},r=-1!==['right','left'].indexOf(o),a=r?'top':'left',s=r?'left':'top',p=r?'height':'width',l=r?'width':'height';return n[a]=t[a]+t[p]/2-i[p]/2,n[s]=o===s?t[s]-i[l]:t[W(s)],n}function U(e,t){return Array.prototype.find?e.find(t):e.filter(t)[0]}function F(e,t,o){if(Array.prototype.findIndex)return e.findIndex(function(e){return e[t]===o});var i=U(e,function(e){return e[t]===o});return e.indexOf(i)}function Y(e,t,o){var i=void 0===o?e:e.slice(0,F(e,'name',o));return i.forEach(function(e){e['function']&&console.warn('`modifier.function` is deprecated, use `modifier.fn`!');var o=e['function']||e.fn;e.enabled&&m(o)&&(t.offsets.popper=k(t.offsets.popper),t.offsets.reference=k(t.offsets.reference),t=o(t,e))}),t}function q(e){for(var t=[!1,'ms','Webkit','Moz','O'],o=e.charAt(0).toUpperCase()+e.slice(1),n=0;n<t.length;n++){var i=t[n],r=i?''+i+o:e;if('undefined'!=typeof document.body.style[r])return r}return null}function z(){if(!this.state.isDestroyed){var e={instance:this,styles:{},arrowStyles:{},attributes:{},flipped:!1,offsets:{}},t=this.popper.style;t.top='',t.left='',t[q('transform')]='',e.offsets.reference=N(this.state,this.popper,this.reference,this.options.positionFixed),e.placement=H(this.options.placement,e.offsets.reference,this.popper,this.reference,this.options.modifiers.flip.boundariesElement,this.options.modifiers.flip.padding),e.originalPlacement=e.placement,e.positionFixed=this.options.positionFixed,e.offsets.popper=B(this.popper,e.offsets.reference,e.placement),e.offsets.popper.position=this.options.positionFixed?'fixed':'absolute',e=Y(this.modifiers,e),this.state.isCreated?this.options.onUpdate(e):(this.state.isCreated=!0,this.options.onCreate(e))}}function j(e,t){return e.some(function(e){var o=e.name,i=e.enabled;return i&&o===t})}function X(){return this.state.isDestroyed=!0,j(this.modifiers,'applyStyle')&&(this.popper.removeAttribute('x-placement'),this.popper.style.position='',this.popper.style.top='',this.popper.style.left='',this.popper.style.right='',this.popper.style.bottom='',this.popper.style.willChange='',this.popper.style[q('transform')]=''),this.disableEventListeners(),this.options.removeOnDestroy&&this.popper.parentNode.removeChild(this.popper),this}function K(e){var t=e.ownerDocument;return t?t.defaultView:window}function V(e,t,o,i){var n='BODY'===e.nodeName,r=n?e.ownerDocument.defaultView:e;r.addEventListener(t,o,{passive:!0}),n||V(g(r.parentNode),t,o,i),i.push(r)}function G(e,t,o,i){o.updateBound=i,K(e).addEventListener('resize',o.updateBound,{passive:!0});var n=g(e);return V(n,'scroll',o.updateBound,o.scrollParents),o.scrollElement=n,o.eventsEnabled=!0,o}function Q(){this.state.eventsEnabled||(this.state=G(this.reference,this.options,this.state,this.scheduleUpdate))}function Z(e,t){return K(e).removeEventListener('resize',t.updateBound),t.scrollParents.forEach(function(e){e.removeEventListener('scroll',t.updateBound)}),t.updateBound=null,t.scrollParents=[],t.scrollElement=null,t.eventsEnabled=!1,t}function $(){this.state.eventsEnabled&&(cancelAnimationFrame(this.scheduleUpdate),this.state=Z(this.reference,this.state))}function J(e){return''!==e&&!isNaN(parseFloat(e))&&isFinite(e)}function ee(e,t){Object.keys(t).forEach(function(o){var i='';-1!==['width','height','top','right','bottom','left'].indexOf(o)&&J(t[o])&&(i='px'),e.style[o]=t[o]+i})}function te(e,t){Object.keys(t).forEach(function(o){var i=t[o];!1===i?e.removeAttribute(o):e.setAttribute(o,t[o])})}function oe(e,t,o){var i=U(e,function(e){var o=e.name;return o===t}),n=!!i&&e.some(function(e){return e.name===o&&e.enabled&&e.order<i.order});if(!n){var r='`'+t+'`';console.warn('`'+o+'`'+' modifier is required by '+r+' modifier in order to work, be sure to include it before '+r+'!')}return n}function ie(e){return'end'===e?'start':'start'===e?'end':e}function ne(e){var t=!!(1<arguments.length&&void 0!==arguments[1])&&arguments[1],o=lt.indexOf(e),i=lt.slice(o+1).concat(lt.slice(0,o));return t?i.reverse():i}function re(e,t,o,i){var n=e.match(/((?:\-|\+)?\d*\.?\d*)(.*)/),r=+n[1],a=n[2];if(!r)return e;if(0===a.indexOf('%')){var s;switch(a){case'%p':s=o;break;case'%':case'%r':default:s=i;}var p=k(s);return p[t]/100*r}if('vh'===a||'vw'===a){var l;return l='vh'===a?Fe(document.documentElement.clientHeight,window.innerHeight||0):Fe(document.documentElement.clientWidth,window.innerWidth||0),l/100*r}return r}function ae(e,t,o,i){var n=[0,0],r=-1!==['right','left'].indexOf(i),a=e.split(/(\+|\-)/).map(function(e){return e.trim()}),s=a.indexOf(U(a,function(e){return-1!==e.search(/,|\s/)}));a[s]&&-1===a[s].indexOf(',')&&console.warn('Offsets separated by white space(s) are deprecated, use a comma (,) instead.');var p=/\s*,\s*|\s+/,l=-1===s?[a]:[a.slice(0,s).concat([a[s].split(p)[0]]),[a[s].split(p)[1]].concat(a.slice(s+1))];return l=l.map(function(e,i){var n=(1===i?!r:r)?'height':'width',s=!1;return e.reduce(function(e,t){return''===e[e.length-1]&&-1!==['+','-'].indexOf(t)?(e[e.length-1]=t,s=!0,e):s?(e[e.length-1]+=t,s=!1,e):e.concat(t)},[]).map(function(e){return re(e,n,t,o)})}),l.forEach(function(e,t){e.forEach(function(o,i){J(o)&&(n[t]+=o*('-'===e[i-1]?-1:1))})}),n}function se(e,t){var o,i=t.offset,n=e.placement,r=e.offsets,a=r.popper,s=r.reference,p=n.split('-')[0];return o=J(+i)?[+i,0]:ae(i,a,s,p),'left'===p?(a.top+=o[0],a.left-=o[1]):'right'===p?(a.top+=o[0],a.left+=o[1]):'top'===p?(a.left+=o[0],a.top-=o[1]):'bottom'===p&&(a.left+=o[0],a.top+=o[1]),e.popper=a,e}function pe(e){void e.offsetHeight}function le(e,t,o){var i=e.popper,n=e.options,r=n.onCreate,a=n.onUpdate;n.onCreate=n.onUpdate=function(){pe(i),t&&t(),a(),n.onCreate=r,n.onUpdate=a},o||e.scheduleUpdate()}function de(e){return e.getAttribute('x-placement').replace(/-.+/,'')}function ce(e,t,o){if(!t.getAttribute('x-placement'))return!0;var i=e.clientX,n=e.clientY,r=o.interactiveBorder,a=o.distance,s=t.getBoundingClientRect(),p=de(t),l=r+a,d={top:s.top-n>r,bottom:n-s.bottom>r,left:s.left-i>r,right:i-s.right>r};return'top'===p?d.top=s.top-n>l:'bottom'===p?d.bottom=n-s.bottom>l:'left'===p?d.left=s.left-i>l:'right'===p?d.right=i-s.right>l:void 0,d.top||d.bottom||d.left||d.right}function fe(e,t,o,i){if(!t.length)return'';var n={scale:function(){return 1===t.length?''+t[0]:o?t[0]+', '+t[1]:t[1]+', '+t[0]}(),translate:function(){return 1===t.length?i?-t[0]+'px':t[0]+'px':o?i?t[0]+'px, '+-t[1]+'px':t[0]+'px, '+t[1]+'px':i?-t[1]+'px, '+t[0]+'px':t[1]+'px, '+t[0]+'px'}()};return n[e]}function me(e,t){if(!e)return'';return t?e:{X:'Y',Y:'X'}[e]}function ue(e,t,o){var i=de(e),n='top'===i||'bottom'===i,r='right'===i||'bottom'===i,s=function(e){var t=o.match(e);return t?t[1]:''},p=function(e){var t=o.match(e);return t?t[1].split(',').map(parseFloat):[]},l={translate:/translateX?Y?\(([^)]+)\)/,scale:/scaleX?Y?\(([^)]+)\)/},d={translate:{axis:s(/translate([XY])/),numbers:p(l.translate)},scale:{axis:s(/scale([XY])/),numbers:p(l.scale)}},c=o.replace(l.translate,'translate'+me(d.translate.axis,n)+'('+fe('translate',d.translate.numbers,n,r)+')').replace(l.scale,'scale'+me(d.scale.axis,n)+'('+fe('scale',d.scale.numbers,n,r)+')');t.style[a('transform')]=c}function he(e){return-(e-Xe.distance)+'px'}function ge(e){requestAnimationFrame(function(){setTimeout(e,1)})}function be(t,o){var i=Element.prototype.closest||function(t){for(var o=this;o;){if(e.call(o,t))return o;o=o.parentElement}};return i.call(t,o)}function ye(e,t){return Array.isArray(e)?e[t]:e}function ve(e,t){e.forEach(function(e){e&&e.setAttribute('data-state',t)})}function we(e,t){e.filter(Boolean).forEach(function(e){e.style[a('transitionDuration')]=t+'ms'})}function Ee(e){var t=window.scrollX||window.pageXOffset,o=window.scrollY||window.pageYOffset;e.focus(),scroll(t,o)}function Te(){var e=this._(ut).lastTriggerEvent;return this.options.followCursor&&!ze.usingTouch&&e&&'focus'!==e.type}function Le(e){var t=be(e.target,this.options.target);if(t&&!t._tippy){var o=t.getAttribute('title')||this.title;o&&(t.setAttribute('title',o),Me(t,Qe({},this.options,{target:null})),Oe.call(t._tippy,e))}}function Oe(e){var t=this,o=this.options;if(Se.call(this),!this.state.visible){if(o.target)return void Le.call(this,e);if(this._(ut).isPreparingToShow=!0,o.wait)return void o.wait.call(this.popper,this.show.bind(this),e);if(Te.call(this)){this._(ut).followCursorListener||Pe.call(this);var i=c(this.popper),n=i.arrow;n&&(n.style.margin='0'),document.addEventListener('mousemove',this._(ut).followCursorListener)}var r=ye(o.delay,0);r?this._(ut).showTimeout=setTimeout(function(){t.show()},r):this.show()}}function xe(){var e=this;if(Se.call(this),!!this.state.visible){this._(ut).isPreparingToShow=!1;var t=ye(this.options.delay,1);t?this._(ut).hideTimeout=setTimeout(function(){e.state.visible&&e.hide()},t):this.hide()}}function Ae(){var e=this;return{onTrigger:function(t){if(e.state.enabled){var o=ze.supportsTouch&&ze.usingTouch&&-1<['mouseenter','mouseover','focus'].indexOf(t.type);o&&e.options.touchHold||(e._(ut).lastTriggerEvent=t,'click'===t.type&&'persistent'!==e.options.hideOnClick&&e.state.visible?xe.call(e):Oe.call(e,t),o&&ze.iOS&&e.reference.click&&e.reference.click())}},onMouseLeave:function(t){if(!(-1<['mouseleave','mouseout'].indexOf(t.type)&&ze.supportsTouch&&ze.usingTouch&&e.options.touchHold)){if(e.options.interactive){var o=xe.bind(e),i=function t(i){var n=be(i.target,je.REFERENCE),r=be(i.target,je.POPPER)===e.popper,a=n===e.reference;r||a||ce(i,e.popper,e.options)&&(document.body.removeEventListener('mouseleave',o),document.removeEventListener('mousemove',t),xe.call(e,t))};return document.body.addEventListener('mouseleave',o),void document.addEventListener('mousemove',i)}xe.call(e)}},onBlur:function(t){if(!(t.target!==e.reference||ze.usingTouch)){if(e.options.interactive){if(!t.relatedTarget)return;if(be(t.relatedTarget,je.POPPER))return}xe.call(e)}},onDelegateShow:function(t){be(t.target,e.options.target)&&Oe.call(e,t)},onDelegateHide:function(t){be(t.target,e.options.target)&&xe.call(e)}}}function ke(){var e=this,t=this.popper,o=this.reference,i=this.options,n=c(t),r=n.tooltip,a=i.popperOptions,s='round'===i.arrowType?je.ROUND_ARROW:je.ARROW,p=r.querySelector(s),l=Qe({placement:i.placement},a||{},{modifiers:Qe({},a?a.modifiers:{},{arrow:Qe({element:s},a&&a.modifiers?a.modifiers.arrow:{}),flip:Qe({enabled:i.flip,padding:i.distance+5,behavior:i.flipBehavior},a&&a.modifiers?a.modifiers.flip:{}),offset:Qe({offset:i.offset},a&&a.modifiers?a.modifiers.offset:{})}),onCreate:function(){r.style[de(t)]=he(i.distance),p&&i.arrowTransform&&ue(t,p,i.arrowTransform)},onUpdate:function(){var e=r.style;e.top='',e.bottom='',e.left='',e.right='',e[de(t)]=he(i.distance),p&&i.arrowTransform&&ue(t,p,i.arrowTransform)}});return De.call(this,{target:t,callback:function(){e.popperInstance.update()},options:{childList:!0,subtree:!0,characterData:!0}}),new ct(o,t,l)}function Ce(e){var t=this.options;if(this.popperInstance?(this.popperInstance.scheduleUpdate(),t.livePlacement&&!Te.call(this)&&this.popperInstance.enableEventListeners()):(this.popperInstance=ke.call(this),!t.livePlacement&&this.popperInstance.disableEventListeners()),!Te.call(this)){var o=c(this.popper),i=o.arrow;i&&(i.style.margin=''),this.popperInstance.reference=this.reference}le(this.popperInstance,e,!0),t.appendTo.contains(this.popper)||t.appendTo.appendChild(this.popper)}function Se(){var e=this._(ut),t=e.showTimeout,o=e.hideTimeout;clearTimeout(t),clearTimeout(o)}function Pe(){var e=this;this._(ut).followCursorListener=function(t){var o=e._(ut).lastMouseMoveEvent=t,i=o.clientX,n=o.clientY;e.popperInstance&&(e.popperInstance.reference={getBoundingClientRect:function(){return{width:0,height:0,top:n,left:i,right:i,bottom:n}},clientWidth:0,clientHeight:0},e.popperInstance.scheduleUpdate())}}function Ie(){var e=this,t=function(){e.popper.style[a('transitionDuration')]=e.options.updateDuration+'ms'},o=function(){e.popper.style[a('transitionDuration')]=''};ge(function i(){e.popperInstance&&e.popperInstance.scheduleUpdate(),t(),e.state.visible?requestAnimationFrame(i):o()})}function De(e){var t=e.target,o=e.callback,i=e.options;if(window.MutationObserver){var n=new MutationObserver(o);n.observe(t,i),this._(ut).mutationObservers.push(n)}}function Re(e,t){if(!e)return t();var o=c(this.popper),i=o.tooltip,n=function(e,t){t&&i[e+'EventListener']('ontransitionend'in window?'transitionend':'webkitTransitionEnd',t)},r=function o(r){r.target===i&&(n('remove',o),t())};n('remove',this._(ut).transitionendListener),n('add',r),this._(ut).transitionendListener=r}function _e(e,t){return e.reduce(function(e,o){var i=bt,n=d(o,t.performance?t:l(o,t)),r=o.getAttribute('title');if(!r&&!n.target&&!n.html&&!n.dynamicTitle)return e;o.setAttribute(n.target?'data-tippy-delegate':'data-tippy',''),f(o);var a=s(i,r,n),m=new gt({id:i,reference:o,popper:a,options:n,title:r,popperInstance:null});n.createPopperInstanceOnInit&&(m.popperInstance=ke.call(m),m.popperInstance.disableEventListeners());var u=Ae.call(m);return m.listeners=n.trigger.trim().split(' ').reduce(function(e,t){return e.concat(p(t,o,u,n))},[]),n.dynamicTitle&&De.call(m,{target:o,callback:function(){var e=c(a),t=e.content,i=o.getAttribute('title');i&&(t[n.allowTitleHTML?'innerHTML':'textContent']=m.title=i,f(o))},options:{attributes:!0}}),o._tippy=m,a._tippy=m,a._reference=o,e.push(m),bt++,e},[])}function He(e){var t=o(document.querySelectorAll(je.POPPER));t.forEach(function(t){var o=t._tippy;if(o){var i=o.options;(!0===i.hideOnClick||-1<i.trigger.indexOf('focus'))&&(!e||t!==e.popper)&&o.hide()}})}function Ne(){var t=function(){ze.usingTouch||(ze.usingTouch=!0,ze.iOS&&document.body.classList.add('tippy-touch'),ze.dynamicInputDetection&&window.performance&&document.addEventListener('mousemove',i),ze.onUserInputChange('touch'))},i=function(){var e;return function(){var t=performance.now();20>t-e&&(ze.usingTouch=!1,document.removeEventListener('mousemove',i),!ze.iOS&&document.body.classList.remove('tippy-touch'),ze.onUserInputChange('mouse')),e=t}}();document.addEventListener('click',function(e){if(!(e.target instanceof Element))return He();var t=be(e.target,je.REFERENCE),o=be(e.target,je.POPPER);if(!(o&&o._reference._tippy.options.interactive)){if(t){var i=t._tippy.options;if(!i.multiple&&ze.usingTouch||!i.multiple&&-1<i.trigger.indexOf('click'))return He(t._tippy);if(!0!==i.hideOnClick||-1<i.trigger.indexOf('click'))return}He()}}),document.addEventListener('touchstart',t),window.addEventListener('blur',function(){var t=document,o=t.activeElement;o&&o.blur&&e.call(o,je.REFERENCE)&&o.blur()}),window.addEventListener('resize',function(){o(document.querySelectorAll(je.POPPER)).forEach(function(e){var t=e._tippy;t.options.livePlacement||t.popperInstance.scheduleUpdate()})}),!ze.supportsTouch&&(navigator.maxTouchPoints||navigator.msMaxTouchPoints)&&document.addEventListener('pointerdown',t)}function Me(e,o){return ze.supported&&!yt&&(Ne(),yt=!0),t(e)&&r(e),o=Qe({},Xe,o),{selector:e,options:o,tooltips:ze.supported?_e(n(e),o):[],destroyAll:function(){this.tooltips.forEach(function(e){return e.destroy()}),this.tooltips=[]}}}var We=Math.min,Be=Math.round,Ue=Math.floor,Fe=Math.max,Ye='undefined'!=typeof window,qe=Ye&&/MSIE |Trident\//.test(navigator.userAgent),ze={};Ye&&(ze.supported='requestAnimationFrame'in window,ze.supportsTouch='ontouchstart'in window,ze.usingTouch=!1,ze.dynamicInputDetection=!0,ze.iOS=/iPhone|iPad|iPod/.test(navigator.platform)&&!window.MSStream,ze.onUserInputChange=function(){});for(var je={POPPER:'.tippy-popper',TOOLTIP:'.tippy-tooltip',CONTENT:'.tippy-content',BACKDROP:'.tippy-backdrop',ARROW:'.tippy-arrow',ROUND_ARROW:'.tippy-roundarrow',REFERENCE:'[data-tippy]'},Xe={placement:'top',livePlacement:!0,trigger:'mouseenter focus',animation:'shift-away',html:!1,animateFill:!0,arrow:!1,delay:0,duration:[350,300],interactive:!1,interactiveBorder:2,theme:'dark',size:'regular',distance:10,offset:0,hideOnClick:!0,multiple:!1,followCursor:!1,inertia:!1,updateDuration:350,sticky:!1,appendTo:function(){return document.body},zIndex:9999,touchHold:!1,performance:!1,dynamicTitle:!1,flip:!0,flipBehavior:'flip',arrowType:'sharp',arrowTransform:'',maxWidth:'',target:null,allowTitleHTML:!0,popperOptions:{},createPopperInstanceOnInit:!1,onShow:function(){},onShown:function(){},onHide:function(){},onHidden:function(){}},Ke=ze.supported&&Object.keys(Xe),Ve=function(e,t){if(!(e instanceof t))throw new TypeError('Cannot call a class as a function')},Ge=function(){function e(e,t){for(var o,n=0;n<t.length;n++)o=t[n],o.enumerable=o.enumerable||!1,o.configurable=!0,('value'in o)&&(o.writable=!0),Object.defineProperty(e,o.key,o)}return function(t,o,i){return o&&e(t.prototype,o),i&&e(t,i),t}}(),Qe=Object.assign||function(e){for(var t,o=1;o<arguments.length;o++)for(var i in t=arguments[o],t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},Ze='undefined'!=typeof window&&'undefined'!=typeof document,$e=['Edge','Trident','Firefox'],Je=0,et=0;et<$e.length;et+=1)if(Ze&&0<=navigator.userAgent.indexOf($e[et])){Je=1;break}var i=Ze&&window.Promise,tt=i?function(e){var t=!1;return function(){t||(t=!0,window.Promise.resolve().then(function(){t=!1,e()}))}}:function(e){var t=!1;return function(){t||(t=!0,setTimeout(function(){t=!1,e()},Je))}},ot=Ze&&!!(window.MSInputMethodContext&&document.documentMode),it=Ze&&/MSIE 10/.test(navigator.userAgent),nt=function(e,t){if(!(e instanceof t))throw new TypeError('Cannot call a class as a function')},rt=function(){function e(e,t){for(var o,n=0;n<t.length;n++)o=t[n],o.enumerable=o.enumerable||!1,o.configurable=!0,'value'in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}return function(t,o,i){return o&&e(t.prototype,o),i&&e(t,i),t}}(),at=function(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e},st=Object.assign||function(e){for(var t,o=1;o<arguments.length;o++)for(var i in t=arguments[o],t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},pt=['auto-start','auto','auto-end','top-start','top','top-end','right-start','right','right-end','bottom-end','bottom','bottom-start','left-end','left','left-start'],lt=pt.slice(3),dt={FLIP:'flip',CLOCKWISE:'clockwise',COUNTERCLOCKWISE:'counterclockwise'},ct=function(){function e(t,o){var i=this,n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{};nt(this,e),this.scheduleUpdate=function(){return requestAnimationFrame(i.update)},this.update=tt(this.update.bind(this)),this.options=st({},e.Defaults,n),this.state={isDestroyed:!1,isCreated:!1,scrollParents:[]},this.reference=t&&t.jquery?t[0]:t,this.popper=o&&o.jquery?o[0]:o,this.options.modifiers={},Object.keys(st({},e.Defaults.modifiers,n.modifiers)).forEach(function(t){i.options.modifiers[t]=st({},e.Defaults.modifiers[t]||{},n.modifiers?n.modifiers[t]:{})}),this.modifiers=Object.keys(this.options.modifiers).map(function(e){return st({name:e},i.options.modifiers[e])}).sort(function(e,t){return e.order-t.order}),this.modifiers.forEach(function(e){e.enabled&&m(e.onLoad)&&e.onLoad(i.reference,i.popper,i.options,e,i.state)}),this.update();var r=this.options.eventsEnabled;r&&this.enableEventListeners(),this.state.eventsEnabled=r}return rt(e,[{key:'update',value:function(){return z.call(this)}},{key:'destroy',value:function(){return X.call(this)}},{key:'enableEventListeners',value:function(){return Q.call(this)}},{key:'disableEventListeners',value:function(){return $.call(this)}}]),e}();ct.Utils=('undefined'==typeof window?global:window).PopperUtils,ct.placements=pt,ct.Defaults={placement:'bottom',positionFixed:!1,eventsEnabled:!0,removeOnDestroy:!1,onCreate:function(){},onUpdate:function(){},modifiers:{shift:{order:100,enabled:!0,fn:function(e){var t=e.placement,o=t.split('-')[0],i=t.split('-')[1];if(i){var n=e.offsets,r=n.reference,a=n.popper,s=-1!==['bottom','top'].indexOf(o),p=s?'left':'top',l=s?'width':'height',d={start:at({},p,r[p]),end:at({},p,r[p]+r[l]-a[l])};e.offsets.popper=st({},a,d[i])}return e}},offset:{order:200,enabled:!0,fn:se,offset:0},preventOverflow:{order:300,enabled:!0,fn:function(e,t){var o=t.boundariesElement||v(e.instance.popper);e.instance.reference===o&&(o=v(o));var i=R(e.instance.popper,e.instance.reference,t.padding,o,e.positionFixed);t.boundaries=i;var n=t.priority,r=e.offsets.popper,a={primary:function(e){var o=r[e];return r[e]<i[e]&&!t.escapeWithReference&&(o=Fe(r[e],i[e])),at({},e,o)},secondary:function(e){var o='right'===e?'left':'top',n=r[o];return r[e]>i[e]&&!t.escapeWithReference&&(n=We(r[o],i[e]-('right'===e?r.width:r.height))),at({},o,n)}};return n.forEach(function(e){var t=-1===['left','top'].indexOf(e)?'secondary':'primary';r=st({},r,a[t](e))}),e.offsets.popper=r,e},priority:['left','right','top','bottom'],padding:5,boundariesElement:'scrollParent'},keepTogether:{order:400,enabled:!0,fn:function(e){var t=e.offsets,o=t.popper,i=t.reference,n=e.placement.split('-')[0],r=Ue,a=-1!==['top','bottom'].indexOf(n),s=a?'right':'bottom',p=a?'left':'top',l=a?'width':'height';return o[s]<r(i[p])&&(e.offsets.popper[p]=r(i[p])-o[l]),o[p]>r(i[s])&&(e.offsets.popper[p]=r(i[s])),e}},arrow:{order:500,enabled:!0,fn:function(e,t){var o;if(!oe(e.instance.modifiers,'arrow','keepTogether'))return e;var i=t.element;if('string'==typeof i){if(i=e.instance.popper.querySelector(i),!i)return e;}else if(!e.instance.popper.contains(i))return console.warn('WARNING: `arrow.element` must be child of its popper element!'),e;var n=e.placement.split('-')[0],r=e.offsets,a=r.popper,s=r.reference,p=-1!==['left','right'].indexOf(n),l=p?'height':'width',d=p?'Top':'Left',c=d.toLowerCase(),f=p?'left':'top',m=p?'bottom':'right',h=M(i)[l];s[m]-h<a[c]&&(e.offsets.popper[c]-=a[c]-(s[m]-h)),s[c]+h>a[m]&&(e.offsets.popper[c]+=s[c]+h-a[m]),e.offsets.popper=k(e.offsets.popper);var g=s[c]+s[l]/2-h/2,b=u(e.instance.popper),y=parseFloat(b['margin'+d],10),v=parseFloat(b['border'+d+'Width'],10),w=g-e.offsets.popper[c]-y-v;return w=Fe(We(a[l]-h,w),0),e.arrowElement=i,e.offsets.arrow=(o={},at(o,c,Be(w)),at(o,f,''),o),e},element:'[x-arrow]'},flip:{order:600,enabled:!0,fn:function(e,t){if(j(e.instance.modifiers,'inner'))return e;if(e.flipped&&e.placement===e.originalPlacement)return e;var o=R(e.instance.popper,e.instance.reference,t.padding,t.boundariesElement,e.positionFixed),i=e.placement.split('-')[0],n=W(i),r=e.placement.split('-')[1]||'',a=[];switch(t.behavior){case dt.FLIP:a=[i,n];break;case dt.CLOCKWISE:a=ne(i);break;case dt.COUNTERCLOCKWISE:a=ne(i,!0);break;default:a=t.behavior;}return a.forEach(function(s,p){if(i!==s||a.length===p+1)return e;i=e.placement.split('-')[0],n=W(i);var l=e.offsets.popper,d=e.offsets.reference,c=Ue,f='left'===i&&c(l.right)>c(d.left)||'right'===i&&c(l.left)<c(d.right)||'top'===i&&c(l.bottom)>c(d.top)||'bottom'===i&&c(l.top)<c(d.bottom),m=c(l.left)<c(o.left),u=c(l.right)>c(o.right),h=c(l.top)<c(o.top),g=c(l.bottom)>c(o.bottom),b='left'===i&&m||'right'===i&&u||'top'===i&&h||'bottom'===i&&g,y=-1!==['top','bottom'].indexOf(i),v=!!t.flipVariations&&(y&&'start'===r&&m||y&&'end'===r&&u||!y&&'start'===r&&h||!y&&'end'===r&&g);(f||b||v)&&(e.flipped=!0,(f||b)&&(i=a[p+1]),v&&(r=ie(r)),e.placement=i+(r?'-'+r:''),e.offsets.popper=st({},e.offsets.popper,B(e.instance.popper,e.offsets.reference,e.placement)),e=Y(e.instance.modifiers,e,'flip'))}),e},behavior:'flip',padding:5,boundariesElement:'viewport'},inner:{order:700,enabled:!1,fn:function(e){var t=e.placement,o=t.split('-')[0],i=e.offsets,n=i.popper,r=i.reference,a=-1!==['left','right'].indexOf(o),s=-1===['top','left'].indexOf(o);return n[a?'left':'top']=r[o]-(s?n[a?'width':'height']:0),e.placement=W(t),e.offsets.popper=k(n),e}},hide:{order:800,enabled:!0,fn:function(e){if(!oe(e.instance.modifiers,'hide','preventOverflow'))return e;var t=e.offsets.reference,o=U(e.instance.modifiers,function(e){return'preventOverflow'===e.name}).boundaries;if(t.bottom<o.top||t.left>o.right||t.top>o.bottom||t.right<o.left){if(!0===e.hide)return e;e.hide=!0,e.attributes['x-out-of-boundaries']=''}else{if(!1===e.hide)return e;e.hide=!1,e.attributes['x-out-of-boundaries']=!1}return e}},computeStyle:{order:850,enabled:!0,fn:function(e,t){var o=t.x,i=t.y,n=e.offsets.popper,r=U(e.instance.modifiers,function(e){return'applyStyle'===e.name}).gpuAcceleration;void 0!==r&&console.warn('WARNING: `gpuAcceleration` option moved to `computeStyle` modifier and will not be supported in future versions of Popper.js!');var a,s,p=void 0===r?t.gpuAcceleration:r,l=v(e.instance.popper),d=C(l),c={position:n.position},f={left:Ue(n.left),top:Be(n.top),bottom:Be(n.bottom),right:Ue(n.right)},m='bottom'===o?'top':'bottom',u='right'===i?'left':'right',h=q('transform');if(s='bottom'==m?-d.height+f.bottom:f.top,a='right'==u?-d.width+f.right:f.left,p&&h)c[h]='translate3d('+a+'px, '+s+'px, 0)',c[m]=0,c[u]=0,c.willChange='transform';else{var g='bottom'==m?-1:1,b='right'==u?-1:1;c[m]=s*g,c[u]=a*b,c.willChange=m+', '+u}var y={"x-placement":e.placement};return e.attributes=st({},y,e.attributes),e.styles=st({},c,e.styles),e.arrowStyles=st({},e.offsets.arrow,e.arrowStyles),e},gpuAcceleration:!0,x:'bottom',y:'right'},applyStyle:{order:900,enabled:!0,fn:function(e){return ee(e.instance.popper,e.styles),te(e.instance.popper,e.attributes),e.arrowElement&&Object.keys(e.arrowStyles).length&&ee(e.arrowElement,e.arrowStyles),e},onLoad:function(e,t,o,i,n){var r=N(n,t,e,o.positionFixed),a=H(o.placement,r,t,e,o.modifiers.flip.boundariesElement,o.modifiers.flip.padding);return t.setAttribute('x-placement',a),ee(t,{position:o.positionFixed?'fixed':'absolute'}),o},gpuAcceleration:void 0}}};var ft={};if(Ye){var mt=Element.prototype;ft=mt.matches||mt.matchesSelector||mt.webkitMatchesSelector||mt.mozMatchesSelector||mt.msMatchesSelector||function(e){for(var t=(this.document||this.ownerDocument).querySelectorAll(e),o=t.length;0<=--o&&t.item(o)!==this;);return-1<o}}var e=ft,ut={},ht=function(e){return function(t){return t===ut&&e}},gt=function(){function e(t){for(var o in Ve(this,e),t)this[o]=t[o];this.state={destroyed:!1,visible:!1,enabled:!0},this._=ht({mutationObservers:[]})}return Ge(e,[{key:'enable',value:function(){this.state.enabled=!0}},{key:'disable',value:function(){this.state.enabled=!1}},{key:'show',value:function(e){var t=this;if(!this.state.destroyed&&this.state.enabled){var o=this.popper,i=this.reference,n=this.options,r=c(o),s=r.tooltip,p=r.backdrop,l=r.content;return n.dynamicTitle&&!i.getAttribute('data-original-title')?void 0:i.refObj||document.documentElement.contains(i)?void(n.onShow.call(o,this),e=ye(void 0===e?n.duration:e,0),we([o,s,p],0),o.style.visibility='visible',this.state.visible=!0,Ce.call(this,function(){if(t.state.visible){if(Te.call(t)||t.popperInstance.scheduleUpdate(),Te.call(t)){t.popperInstance.disableEventListeners();var r=ye(n.delay,0),d=t._(ut).lastTriggerEvent;d&&t._(ut).followCursorListener(r&&t._(ut).lastMouseMoveEvent?t._(ut).lastMouseMoveEvent:d)}we([s,p,p?l:null],e),p&&getComputedStyle(p)[a('transform')],n.interactive&&i.classList.add('tippy-active'),n.sticky&&Ie.call(t),ve([s,p],'visible'),Re.call(t,e,function(){n.updateDuration||s.classList.add('tippy-notransition'),n.interactive&&Ee(o),i.setAttribute('aria-describedby','tippy-'+t.id),n.onShown.call(o,t)})}})):void this.destroy()}}},{key:'hide',value:function(e){var t=this;if(!this.state.destroyed&&this.state.enabled){var o=this.popper,i=this.reference,n=this.options,r=c(o),a=r.tooltip,s=r.backdrop,p=r.content;n.onHide.call(o,this),e=ye(void 0===e?n.duration:e,1),n.updateDuration||a.classList.remove('tippy-notransition'),n.interactive&&i.classList.remove('tippy-active'),o.style.visibility='hidden',this.state.visible=!1,we([a,s,s?p:null],e),ve([a,s],'hidden'),n.interactive&&-1<n.trigger.indexOf('click')&&Ee(i),ge(function(){Re.call(t,e,function(){t.state.visible||!n.appendTo.contains(o)||(!t._(ut).isPreparingToShow&&(document.removeEventListener('mousemove',t._(ut).followCursorListener),t._(ut).lastMouseMoveEvent=null),i.removeAttribute('aria-describedby'),t.popperInstance.disableEventListeners(),n.appendTo.removeChild(o),n.onHidden.call(o,t))})})}}},{key:'destroy',value:function(){var e=this,t=!(0<arguments.length&&void 0!==arguments[0])||arguments[0];if(!this.state.destroyed){this.state.visible&&this.hide(0),this.listeners.forEach(function(t){e.reference.removeEventListener(t.event,t.handler)}),this.title&&this.reference.setAttribute('title',this.title),delete this.reference._tippy;['data-original-title','data-tippy','data-tippy-delegate'].forEach(function(t){e.reference.removeAttribute(t)}),this.options.target&&t&&o(this.reference.querySelectorAll(this.options.target)).forEach(function(e){return e._tippy&&e._tippy.destroy()}),this.popperInstance&&this.popperInstance.destroy(),this._(ut).mutationObservers.forEach(function(e){e.disconnect()}),this.state.destroyed=!0}}}]),e}(),bt=1,yt=!1;return Me.version='2.5.0',Me.browser=ze,Me.defaults=Xe,Me.one=function(e,t){return Me(e,t).tooltips[0]},Me.disableAnimations=function(){Xe.updateDuration=Xe.duration=0,Xe.animateFill=!1},Me});
diff --git a/www/contacts/app-contacts.less b/www/contacts/app-contacts.less
index 0beffa75c..34702d6a3 100644
--- a/www/contacts/app-contacts.less
+++ b/www/contacts/app-contacts.less
@@ -1,17 +1,13 @@
 @import (once) "../../customize/src/less2/include/browser.less";
-@import (once) "../../customize/src/less2/include/toolbar.less";
 @import (once) "../../customize/src/less2/include/markdown.less";
-@import (once) '../../customize/src/less2/include/fileupload.less';
-@import (once) '../../customize/src/less2/include/alertify.less';
 @import (once) '../../customize/src/less2/include/avatar.less';
+@import (once) '../../customize/src/less2/include/framework.less';
 
-.toolbar_main(
+.framework_min_main(
     @bg-color: @colortheme_friends-bg,
     @warn-color: @colortheme_friends-warn,
     @color: @colortheme_friends-color
 );
-.fileupload_main();
-.alertify_main();
 
 // body
 &.cp-app-contacts {
diff --git a/www/debug/app-debug.less b/www/debug/app-debug.less
index da305f120..2a4af9c37 100644
--- a/www/debug/app-debug.less
+++ b/www/debug/app-debug.less
@@ -1,15 +1,11 @@
 @import (once) "../../customize/src/less2/include/browser.less";
-@import (once) "../../customize/src/less2/include/toolbar.less";
 @import (once) "../../customize/src/less2/include/markdown.less";
-@import (once) '../../customize/src/less2/include/fileupload.less';
-@import (once) '../../customize/src/less2/include/alertify.less';
 @import (once) '../../customize/src/less2/include/tools.less';
 @import (once) '../../customize/src/less2/include/tokenfield.less';
+@import (once) '../../customize/src/less2/include/framework.less';
 
-.toolbar_main();
-.fileupload_main();
-.alertify_main();
 .tokenfield_main();
+.framework_min_main();
 
 // body
 &.cp-app-debug {
diff --git a/www/drive/app-drive.less b/www/drive/app-drive.less
index 29870f560..0348cf89e 100644
--- a/www/drive/app-drive.less
+++ b/www/drive/app-drive.less
@@ -1,20 +1,17 @@
 @import (once) "../../customize/src/less2/include/browser.less";
-@import (once) "../../customize/src/less2/include/toolbar.less";
 @import (once) "../../customize/src/less2/include/markdown.less";
-@import (once) '../../customize/src/less2/include/fileupload.less';
-@import (once) '../../customize/src/less2/include/alertify.less';
 @import (once) '../../customize/src/less2/include/leftside-menu.less';
 @import (once) "../../customize/src/less2/include/tools.less";
 @import (once) "../../customize/src/less2/include/limit-bar.less";
 @import (once) "../../customize/src/less2/include/tokenfield.less";
+@import (once) '../../customize/src/less2/include/framework.less';
 
-.toolbar_main(
+.framework_min_main(
     @bg-color: @colortheme_drive-bg,
     @warn-color: @colortheme_drive-warn,
     @color: @colortheme_drive-color
 );
-.fileupload_main();
-.alertify_main();
+
 .limit-bar_main();
 .tokenfield_main();
 
diff --git a/www/file/app-file.less b/www/file/app-file.less
index ec22a2e0c..a0141293b 100644
--- a/www/file/app-file.less
+++ b/www/file/app-file.less
@@ -1,26 +1,17 @@
 @import (once) "../../customize/src/less2/include/browser.less";
-@import (once) "../../customize/src/less2/include/toolbar.less";
 @import (once) "../../customize/src/less2/include/markdown.less";
-@import (once) '../../customize/src/less2/include/fileupload.less';
-@import (once) '../../customize/src/less2/include/alertify.less';
 @import (once) '../../customize/src/less2/include/tokenfield.less';
+@import (once) '../../customize/src/less2/include/framework.less';
 
-.toolbar_main(
+.framework_min_main(
     @bg-color: @colortheme_file-bg,
     @warn-color: @colortheme_file-warn,
     @color: @colortheme_file-color
 );
-.fileupload_main();
-.alertify_main();
 .tokenfield_main();
 
 @button-border: 2px;
 
-/*html, body {
-    margin: 0px;
-    height: 100%;
-}*/
-
 // body
 display: flex;
 flex-flow: column;
diff --git a/www/filepicker/app-filepicker.less b/www/filepicker/app-filepicker.less
index df1fec8fb..952a4d857 100644
--- a/www/filepicker/app-filepicker.less
+++ b/www/filepicker/app-filepicker.less
@@ -3,10 +3,12 @@
 @import (once) '../../customize/src/less2/include/icon-colors.less';
 @import (once) '../../customize/src/less2/include/fileupload.less';
 @import (once) '../../customize/src/less2/include/alertify.less';
+@import (once) '../../customize/src/less2/include/tippy.less';
 
 .iconColors_main();
 .fileupload_main();
 .alertify_main();
+.tippy_main();
 
 #cp-filepicker-dialog {
     display: none;
@@ -36,7 +38,8 @@
             line-height: 1em;
             cursor: pointer;
 
-            background-color: #111;
+            background-color: @colortheme_modal-bg;
+            box-shadow: 2px 2px 5px #000;
             color: @darker;
 
             transition: all 0.1s;
diff --git a/www/poll/app-poll.less b/www/poll/app-poll.less
index c86653a6c..1b56b99bd 100644
--- a/www/poll/app-poll.less
+++ b/www/poll/app-poll.less
@@ -1,22 +1,15 @@
 @import (once) "../../customize/src/less2/include/browser.less";
-@import (once) "../../customize/src/less2/include/toolbar.less";
 @import (once) "../../customize/src/less2/include/markdown.less";
-@import (once) '../../customize/src/less2/include/fileupload.less';
-@import (once) '../../customize/src/less2/include/alertify.less';
-@import (once) '../../customize/src/less2/include/tokenfield.less';
 @import (once) '../../customize/src/less2/include/tools.less';
 @import (once) '../../customize/src/less2/include/avatar.less';
-@import (once) '../../customize/src/less2/include/creation.less';
+@import (once) "../../customize/src/less2/include/framework.less";
 
-.toolbar_main(
+
+.framework_main(
     @bg-color: @colortheme_poll-bg,
     @warn-color: @colortheme_poll-warn,
     @color: @colortheme_poll-color
 );
-.fileupload_main();
-.alertify_main();
-.tokenfield_main();
-.creation_main();
 
 @poll-fore: #555;
 
diff --git a/www/profile/app-profile.less b/www/profile/app-profile.less
index d36233782..4bbc377e4 100644
--- a/www/profile/app-profile.less
+++ b/www/profile/app-profile.less
@@ -1,19 +1,15 @@
 @import (once) "../../customize/src/less2/include/browser.less";
-@import (once) "../../customize/src/less2/include/toolbar.less";
 @import (once) "../../customize/src/less2/include/markdown.less";
-@import (once) '../../customize/src/less2/include/fileupload.less';
-@import (once) '../../customize/src/less2/include/alertify.less';
+@import (once) '../../customize/src/less2/include/framework.less';
 
 @import (once) '../../customize/src/less2/include/avatar.less';
 @import (once) '../../customize/src/less2/include/sidebar-layout.less';
 
-.toolbar_main(
+.framework_min_main(
     @bg-color: @colortheme_profile-bg,
     @warn-color: @colortheme_profile-warn,
     @color: @colortheme_profile-color
 );
-.fileupload_main();
-.alertify_main();
 .sidebar-layout_main();
 
 // body
diff --git a/www/register/main.js b/www/register/main.js
index dea51dad1..8ea17eba7 100644
--- a/www/register/main.js
+++ b/www/register/main.js
@@ -118,15 +118,10 @@ define([
         }, 500);
 
         $register.on('keypress', function (e) {
-            e.preventDefault();
-            e.stopPropagation();
-
-            console.error(e.which);
-            switch (e.which) {
-                case 13: return clickRegister();
-                case 13: return clickRegister();
-                default:
-                    //console.log(e.which);
+            if (e.which === 13) {
+                e.preventDefault();
+                e.stopPropagation();
+                return clickRegister();
             }
         });
 
diff --git a/www/settings/app-settings.less b/www/settings/app-settings.less
index bb033c6dc..a47dd88f6 100644
--- a/www/settings/app-settings.less
+++ b/www/settings/app-settings.less
@@ -1,18 +1,15 @@
-@import (once) "../../customize/src/less2/include/colortheme-all.less";
 @import (once) "../../customize/src/less2/include/browser.less";
-@import (once) "../../customize/src/less2/include/toolbar.less";
 @import (once) "../../customize/src/less2/include/markdown.less";
-@import (once) '../../customize/src/less2/include/alertify.less';
 @import (once) '../../customize/src/less2/include/sidebar-layout.less';
 @import (once) "../../customize/src/less2/include/limit-bar.less";
 @import (once) "../../customize/src/less2/include/creation.less";
+@import (once) '../../customize/src/less2/include/framework.less';
 
-.toolbar_main(
+.framework_min_main(
     @bg-color: @colortheme_settings-bg,
     @warn-color: @colortheme_settings-warn,
     @color: @colortheme_settings-color
 );
-.alertify_main();
 .sidebar-layout_main();
 .limit-bar_main();
 .creation_main();
@@ -21,6 +18,7 @@
 &.cp-app-settings {
     display: flex;
     flex-flow: column;
+    font: @colortheme_app-font;
     #cp-sidebarlayout-container {
         #cp-sidebarlayout-rightside {
             input[type="checkbox"] {
diff --git a/www/settings/inner.js b/www/settings/inner.js
index 21763714d..bb5fc3319 100644
--- a/www/settings/inner.js
+++ b/www/settings/inner.js
@@ -233,16 +233,14 @@ define([
         // Disable
         $('<span>', {'class': 'cp-sidebarlayout-description'})
             .text(Messages.settings_disableThumbnailsDescription).appendTo($div);
-        var $label = $('<label>', { 'for': 'disableThumbnails', 'class': 'noTitle' })
-            .text(Messages.settings_disableThumbnailsAction);
 
         var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
         var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
 
-        var $checkbox = $('<input>', {
-            'type': 'checkbox',
-            id: 'disableThumbnails'
-        }).on('change', function () {
+        var $cbox = $(UI.createCheckbox('disableThumbnails',
+                                   Messages.settings_disableThumbnailsAction,
+                                   false, { label: {class: 'noTitle'} }));
+        var $checkbox = $cbox.find('input').on('change', function () {
             $spinner.show();
             $ok.hide();
             var val = $checkbox.is(':checked') || false;
@@ -252,11 +250,10 @@ define([
             });
         });
 
-        $checkbox.appendTo($div);
-        $label.appendTo($div);
+        $cbox.appendTo($div);
 
-        $ok.hide().appendTo($div);
-        $spinner.hide().appendTo($div);
+        $ok.hide().appendTo($cbox);
+        $spinner.hide().appendTo($cbox);
 
         common.getAttribute(['general', 'disableThumbnails'], function (e, val) {
             $checkbox[0].checked = typeof(val) === "undefined" || val;
@@ -283,9 +280,6 @@ define([
 
         $('<span>', {'class': 'label'}).text(Messages.settings_userFeedbackTitle).appendTo($div);
 
-        var $label = $('<label>', { 'for': 'cp-settings-userfeedback', 'class': 'noTitle' })
-            .text(Messages.settings_userFeedback);
-
         $('<span>', {'class': 'cp-sidebarlayout-description'})
             .append(Messages.settings_userFeedbackHint1)
             .append(Messages.settings_userFeedbackHint2).appendTo($div);
@@ -293,10 +287,10 @@ define([
         var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
         var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
 
-        var $checkbox = $('<input>', {
-            'type': 'checkbox',
-            id: 'cp-settings-userfeedback'
-        }).on('change', function () {
+        var $cbox = $(UI.createCheckbox('cp-settings-userfeedback',
+                                   Messages.settings_userFeedback,
+                                   false, { label: {class: 'noTitle'} }));
+        var $checkbox = $cbox.find('input').on('change', function () {
             $spinner.show();
             $ok.hide();
             var val = $checkbox.is(':checked') || false;
@@ -306,11 +300,10 @@ define([
             });
         });
 
-        $checkbox.appendTo($div);
-        $label.appendTo($div);
+        $cbox.appendTo($div);
 
-        $ok.hide().appendTo($div);
-        $spinner.hide().appendTo($div);
+        $ok.hide().appendTo($cbox);
+        $spinner.hide().appendTo($cbox);
 
         if (privateData.feedbackAllowed) {
             $checkbox[0].checked = true;
@@ -730,30 +723,28 @@ define([
         var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
         var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
 
-        var $label = $('<label>', { 'for': 'cp-settings-padwidth', 'class': 'noTitle' })
-                    .text(Messages.settings_padWidthLabel);
-        var $input = $('<input>', {
-            type: 'checkbox',
-            id: 'cp-settings-padwidth'
-        }).on('change', function () {
+        var $cbox = $(UI.createCheckbox('cp-settings-padwidth',
+                                   Messages.settings_padWidthLabel,
+                                   false, { label: {class: 'noTitle'} }));
+        var $checkbox = $cbox.find('input').on('change', function () {
             $spinner.show();
             $ok.hide();
-            var val = $input.is(':checked');
+            var val = $checkbox.is(':checked');
             common.setAttribute(['pad', 'width'], val, function () {
                 $spinner.hide();
                 $ok.show();
             });
-        }).appendTo($div);
-        $label.appendTo($div);
+        });
+        $cbox.appendTo($div);
 
-        $ok.hide().appendTo($div);
-        $spinner.hide().appendTo($div);
+        $ok.hide().appendTo($cbox);
+        $spinner.hide().appendTo($cbox);
 
 
         common.getAttribute(['pad', 'width'], function (e, val) {
             if (e) { return void console.error(e); }
             if (val) {
-                $input.attr('checked', 'checked');
+                $checkbox.attr('checked', 'checked');
             }
         });
         return $div;
@@ -805,13 +796,14 @@ define([
         }).css('flex-flow', 'column')
         .appendTo($div);
 
-        var $input = $('<input>', {
-            type: 'checkbox',
-        }).on('change', function () {
-            var val = $input.is(':checked');
+
+        var $cbox = $(UI.createCheckbox('cp-settings-codeindent'));
+        var $checkbox = $cbox.find('input').on('change', function () {
+            var val = $checkbox.is(':checked');
             if (typeof(val) !== 'boolean') { return; }
             common.setAttribute(['codemirror', key], val);
-        }).appendTo($inputBlock);
+        });
+        $cbox.appendTo($inputBlock);
 
         /*proxy.on('change', ['settings', 'codemirror', key], function (o, n) {
             $input[0].checked = !!n;
@@ -819,7 +811,7 @@ define([
 
         common.getAttribute(['codemirror', key], function (e, val) {
             if (e) { return void console.error(e); }
-            $input[0].checked = !!val;
+            $checkbox[0].checked = !!val;
         });
         return $div;
     };
diff --git a/www/slide/inner.js b/www/slide/inner.js
index 88e534b44..76dfeceda 100644
--- a/www/slide/inner.js
+++ b/www/slide/inner.js
@@ -153,53 +153,33 @@ define([
             $('<b>').text(Messages.printOptions).appendTo($p);
             $p.append($('<br>'));
             // Slide number
-            $('<input>', {
-                type: 'checkbox',
-                id: 'cp-app-slide-options-number',
-                checked: slideOptionsTmp.slide
-            }).on('change', function () {
+            var cbox = UI.createCheckbox('cp-app-slide-options-number', Messages.printSlideNumber,
+                                         slideOptionsTmp.slide);
+            $(cbox).appendTo($p).find('input').on('change', function () {
                 var c = this.checked;
                 slideOptionsTmp.slide = c;
-            }).appendTo($p).css('width', 'auto');
-            $('<label>', {'for': 'cp-app-slide-options-number'}).text(Messages.printSlideNumber)
-                .appendTo($p);
-            $p.append($('<br>'));
+            }).css('width', 'auto');
             // Date
-            $('<input>', {
-                type: 'checkbox',
-                id: 'cp-app-slide-options-date',
-                checked: slideOptionsTmp.date
-            }).on('change', function () {
+            var cboxDate = UI.createCheckbox('cp-app-slide-options-date', Messages.printDate,
+                                         slideOptionsTmp.date);
+            $(cboxDate).appendTo($p).find('input').on('change', function () {
                 var c = this.checked;
                 slideOptionsTmp.date = c;
-            }).appendTo($p).css('width', 'auto');
-            $('<label>', {'for': 'cp-app-slide-options-date'}).text(Messages.printDate)
-                .appendTo($p);
-            $p.append($('<br>'));
+            }).css('width', 'auto');
             // Title
-            $('<input>', {
-                type: 'checkbox',
-                id: 'cp-app-slide-options-title',
-                checked: slideOptionsTmp.title
-            }).on('change', function () {
+            var cboxTitle = UI.createCheckbox('cp-app-slide-options-title', Messages.printTitle,
+                                         slideOptionsTmp.title);
+            $(cboxTitle).appendTo($p).find('input').on('change', function () {
                 var c = this.checked;
                 slideOptionsTmp.title = c;
-            }).appendTo($p).css('width', 'auto');
-            $('<label>', {'for': 'cp-app-slide-options-title'}).text(Messages.printTitle)
-                .appendTo($p);
-            $p.append($('<br>'));
+            }).css('width', 'auto');
             // Transition
-            $('<input>', {
-                type: 'checkbox',
-                id: 'cp-app-slide-options-transition',
-                checked: slideOptionsTmp.transition
-            }).on('change', function () {
+            var cboxTransition = UI.createCheckbox('cp-app-slide-options-transition', Messages.printTransition,
+                                         slideOptionsTmp.transition);
+            $(cboxTransition).appendTo($p).find('input').on('change', function () {
                 var c = this.checked;
                 slideOptionsTmp.transition = c;
-            }).appendTo($p).css('width', 'auto');
-            $('<label>', {'for': 'cp-app-slide-options-transition'}).text(Messages.printTransition)
-                .appendTo($p);
-            $p.append($('<br>'));
+            }).css('width', 'auto');
             $p.append($('<br>'));
             // Background image
             $('<label>', {'for': 'cp-app-slide-options-bg'}).text(Messages.printBackground)
diff --git a/www/todo/app-todo.less b/www/todo/app-todo.less
index 5008498b1..1c3d8ed97 100644
--- a/www/todo/app-todo.less
+++ b/www/todo/app-todo.less
@@ -1,17 +1,13 @@
 @import (once) "../../customize/src/less2/include/browser.less";
-@import (once) "../../customize/src/less2/include/toolbar.less";
 @import (once) "../../customize/src/less2/include/markdown.less";
-@import (once) '../../customize/src/less2/include/fileupload.less';
-@import (once) '../../customize/src/less2/include/alertify.less';
 @import (once) '../../customize/src/less2/include/avatar.less';
+@import (once) '../../customize/src/less2/include/framework.less';
 
-.toolbar_main(
+.framework_min_main(
     @bg-color: @colortheme_todo-bg,
     @warn-color: @colortheme_todo-warn,
     @color: @colortheme_todo-color
 );
-.fileupload_main();
-.alertify_main();
 
 // body
 &.cp-app-todo {
diff --git a/www/whiteboard/app-whiteboard.less b/www/whiteboard/app-whiteboard.less
index 1aba715a9..1874c7fd3 100644
--- a/www/whiteboard/app-whiteboard.less
+++ b/www/whiteboard/app-whiteboard.less
@@ -1,21 +1,13 @@
 @import (once) "../../customize/src/less2/include/browser.less";
-@import (once) "../../customize/src/less2/include/toolbar.less";
 @import (once) "../../customize/src/less2/include/markdown.less";
-@import (once) '../../customize/src/less2/include/fileupload.less';
-@import (once) '../../customize/src/less2/include/alertify.less';
 @import (once) '../../customize/src/less2/include/tools.less';
-@import (once) '../../customize/src/less2/include/tokenfield.less';
-@import (once) '../../customize/src/less2/include/creation.less';
+@import (once) "../../customize/src/less2/include/framework.less";
 
-.toolbar_main(
+.framework_main(
     @bg-color: @colortheme_whiteboard-bg,
     @warn-color: @colortheme_whiteboard-warn,
     @color: @colortheme_whiteboard-color
 );
-.fileupload_main();
-.alertify_main();
-.tokenfield_main();
-.creation_main();
 
 // body
 &.cp-app-whiteboard {
diff --git a/www/worker/app-worker.less b/www/worker/app-worker.less
index 9e437ecdc..2e0a9f94e 100644
--- a/www/worker/app-worker.less
+++ b/www/worker/app-worker.less
@@ -1,14 +1,9 @@
 @import (once) "../../customize/src/less2/include/browser.less";
-@import (once) "../../customize/src/less2/include/toolbar.less";
 @import (once) "../../customize/src/less2/include/markdown.less";
-@import (once) '../../customize/src/less2/include/fileupload.less';
-@import (once) '../../customize/src/less2/include/alertify.less';
 @import (once) '../../customize/src/less2/include/avatar.less';
+@import (once) '../../customize/src/less2/include/framework.less';
 
-
-.toolbar_main();
-.fileupload_main();
-.alertify_main();
+.framework_min_main();
 
 // body
 &.cp-app-worker {