Add Material Design for Public and Admin

resources/theme/material-kit/assets/demo/demo.css

@@ -0,0 +1,862 @@
+.tim-row {
+  margin-bottom: 20px;
+}
+
+.presentation-page {
+  overflow-x: hidden;
+}
+
+.tim-white-buttons {
+  background-color: #777777;
+}
+
+.title {
+  margin-top: 30px;
+  /*margin-bottom: 25px;*/
+  min-height: 32px;
+  /*position: relative;
+    display: inline-block;
+    width: 100%;*/
+}
+
+.title.text-center {
+  margin-bottom: 50px;
+}
+
+.tim-typo {
+  padding-left: 25%;
+  margin-bottom: 40px;
+  position: relative;
+  width: 100%;
+}
+
+.tim-typo .tim-note {
+  bottom: 5px;
+  color: #c0c1c2;
+  display: block;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 15px;
+  left: 0;
+  margin-left: 20px;
+  position: absolute;
+  width: 260px;
+}
+
+.tim-row {
+  padding-top: 50px;
+}
+
+.tim-row h3 {
+  margin-top: 0;
+}
+
+#typography h1,
+#typography h2,
+#typography h3,
+#typography h4,
+#typography h5,
+#typography h6 {
+  margin-bottom: 0;
+}
+
+.switch {
+  margin-right: 20px;
+}
+
+#navbar-full .navbar {
+  border-radius: 0 !important;
+  margin-bottom: 15px;
+  z-index: 2;
+}
+
+.space {
+  height: 130px;
+  display: block;
+}
+
+.space-110 {
+  height: 110px;
+  display: block;
+}
+
+.space-50 {
+  height: 50px;
+  display: block;
+}
+
+.space-70 {
+  height: 70px;
+  display: block;
+}
+
+.navigation-example .img-src {
+  background-attachment: scroll;
+}
+
+.tim-container .noUi-horizontal {
+  margin: 30px 0;
+}
+
+.navigation-example {
+  background-position: center center;
+  background-size: cover;
+  margin-top: 0;
+  min-height: 740px;
+}
+
+#notifications {
+  background-color: #FFFFFF;
+  display: block;
+  width: 100%;
+  position: relative;
+}
+
+#notifications .alert-danger {
+  margin-bottom: 0px;
+}
+
+.tim-note {
+  text-transform: capitalize;
+}
+
+#buttons .btn {
+  margin: 0 0px 15px;
+}
+
+.space-100 {
+  height: 100px;
+  display: block;
+  width: 100%;
+}
+
+.be-social {
+  padding-bottom: 20px;
+  /*     border-bottom: 1px solid #aaa; */
+  margin: 0 auto 40px;
+}
+
+.txt-white {
+  color: #FFFFFF;
+}
+
+.txt-gray {
+  color: #ddd !important;
+}
+
+.parallax {
+  width: 100%;
+  height: 570px;
+  display: block;
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center center;
+}
+
+.logo-container .logo {
+  overflow: hidden;
+  border-radius: 50%;
+  border: 1px solid #333333;
+  width: 50px;
+  float: left;
+}
+
+.logo-container .brand {
+  font-size: 16px;
+  line-height: 18px;
+  float: left;
+  margin-left: 10px;
+  margin-top: 7px;
+  color: #fff;
+  width: 70px;
+  height: 40px;
+  text-align: left;
+}
+
+.navbar-default .logo-container .brand {
+  color: #999999;
+}
+
+.navbar-transparent .logo-container .brand {
+  color: #FFFFFF;
+}
+
+.logo-container .brand-material {
+  font-size: 18px;
+  margin-top: 15px;
+  height: 25px;
+  width: auto;
+}
+
+.logo-container .logo img {
+  width: 100%;
+}
+
+.navbar-small .logo-container .brand {
+  color: #333333;
+}
+
+.fixed-section {
+  top: 90px;
+  max-height: 71vh;
+  overflow: scroll;
+  border-bottom: 1px solid rgba(220, 220, 220, .8);
+}
+
+.fixed-section ul li {
+  list-style: none;
+}
+
+.fixed-section li a {
+  font-size: 14px;
+  padding: 2px;
+  display: block;
+  color: #666666;
+}
+
+.fixed-section li a.active {
+  color: #00bbff;
+}
+
+.fixed-section.float {
+  position: fixed;
+  top: 100px;
+  width: 200px;
+  margin-top: 0;
+}
+
+.parallax .parallax-image {
+  width: 100%;
+  overflow: hidden;
+  position: absolute;
+}
+
+.parallax .parallax-image img {
+  width: 100%;
+}
+
+@media (max-width: 768px) {
+  .parallax .parallax-image {
+    width: 100%;
+    height: 640px;
+    overflow: hidden;
+  }
+  .parallax .parallax-image img {
+    height: 100%;
+    width: auto;
+  }
+}
+
+.separator {
+  content: "Separator";
+  color: #FFFFFF;
+  display: block;
+  width: 100%;
+  padding: 20px;
+}
+
+.separator-line {
+  background-color: #EEE;
+  height: 1px;
+  width: 100%;
+  display: block;
+}
+
+.separator.separator-gray {
+  background-color: #EEEEEE;
+}
+
+.social-buttons-demo .btn {
+  /*margin-right: 5px;
+    margin-bottom: 7px;*/
+  margin: 10px 5px 7px 1px;
+}
+
+.img-container {
+  width: 100%;
+  overflow: hidden;
+}
+
+.img-container img {
+  width: 100%;
+}
+
+.lightbox img {
+  width: 100%;
+}
+
+.lightbox .modal-content {
+  overflow: hidden;
+}
+
+.lightbox .modal-body {
+  padding: 0;
+}
+
+@media screen and (min-width: 991px) {
+  .lightbox .modal-dialog {
+    width: 960px;
+  }
+}
+
+@media (max-width: 991px) {
+  .fixed-section.affix {
+    position: relative;
+    margin-bottom: 100px;
+  }
+}
+
+@media (max-width: 768px) {
+  .btn,
+  .btn-morphing {
+    margin-bottom: 10px;
+  }
+  .parallax .motto {
+    top: 170px;
+    margin-top: 0;
+    font-size: 60px;
+    width: 270px;
+  }
+}
+
+/*       Loading dots  */
+
+/*      transitions */
+
+.presentation .front,
+.presentation .front:after,
+.presentation .front .btn,
+.logo-container .logo,
+.logo-container .brand {
+  -webkit-transition: all .2s;
+  -moz-transition: all .2s;
+  -o-transition: all .2s;
+  transition: all .2s;
+}
+
+#images h4 {
+  margin-bottom: 30px;
+}
+
+#javascriptComponents {
+  padding-bottom: 0;
+}
+
+#javascriptComponents .btn-raised {
+  margin: 10px 0px;
+}
+
+/*      layer animation          */
+
+.layers-container {
+  display: block;
+  margin-top: 50px;
+  position: relative;
+}
+
+.layers-container img {
+  position: absolute;
+  width: 100%;
+  height: auto;
+  top: 0;
+  left: 0;
+  text-align: center;
+}
+
+.section-black {
+  background-color: #333;
+}
+
+.animate {
+  transition: 1.5s ease-in-out;
+  -moz-transition: 1.5s ease-in-out;
+  -webkit-transition: 1.5s ease-in-out;
+}
+
+.navbar-default.navbar-small .logo-container .brand {
+  color: #333333;
+}
+
+.navbar-transparent.navbar-small .logo-container .brand {
+  color: #FFFFFF;
+}
+
+.navbar-default.navbar-small .logo-container .brand {
+  color: #333333;
+}
+
+.sharing-area {
+  margin-top: 80px;
+}
+
+.sharing-area .btn {
+  margin: 15px 4px 0;
+  color: #FFFFFF;
+}
+
+.sharing-area .btn i {
+  font-size: 18px;
+  position: relative;
+  top: 2px;
+  margin-right: 5px;
+}
+
+#navbar {
+  margin-bottom: -20px;
+}
+
+.sharing-area .btn-twitter {
+  background-color: #55acee;
+}
+
+.sharing-area .btn-twitter:active:focus {
+  background-color: #55acee;
+}
+
+.sharing-area .btn-facebook {
+  background-color: #3b5998;
+}
+
+.sharing-area .btn-facebook:active:focus {
+  background-color: #3b5998;
+}
+
+.sharing-area .btn-google-plus {
+  background-color: #dd4b39;
+}
+
+.sharing-area .btn-google-plus:active:focus {
+  background-color: #dd4b39;
+}
+
+.sharing-area .btn-github {
+  background-color: #333333;
+}
+
+.sharing-area .btn-github:active:focus {
+  background-color: #333333;
+}
+
+.section-thin,
+.section-notifications {
+  padding: 0;
+}
+
+.section-navbars {
+  padding-top: 0;
+}
+
+#navbar .navbar {
+  border-radius: 0;
+}
+
+.section-tabs {
+  background: #EEEEEE;
+}
+
+.section-pagination {
+  padding-bottom: 0;
+}
+
+.section-download h4 {
+  margin-bottom: 50px;
+}
+
+.section-examples a {
+  text-decoration: none;
+}
+
+.section-examples h5 {
+  margin-top: 30px;
+}
+
+.components-page .wrapper>.header,
+.tutorial-page .wrapper>.header {
+  height: 400px;
+  padding-top: 100px;
+  background-size: cover;
+  background-position: center center;
+}
+
+.components-page .title,
+.tutorial-page .title {
+  color: #FFFFFF;
+}
+
+@media (max-width: 830px) {
+  .main-raised {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+}
+
+/*@media all and (min-width: 1200px){
+    #modal-row [class*="col-"]:nth-child(1),
+    #modal-row [class*="col-"]:nth-child(4),
+    #javascriptComponents [class*="col-"]:nth-child(2),
+    #javascriptComponents [class*="col-"]:nth-child(5){
+        padding-right: 3px;
+    }
+
+    #modal-row [class*="col-"]:nth-child(2),
+    #javascriptComponents [class*="col-"]:nth-child(3){
+        padding-right: 3px;
+        padding-left: 3px;
+    }
+
+    #modal-row [class*="col-"]:nth-child(3),
+    #modal-row [class*="col-"]:nth-child(5),
+    #javascriptComponents [class*="col-"]:nth-child(4),
+    #javascriptComponents [class*="col-"]:nth-child(6){
+        padding-left: 3px;
+    }
+}*/
+
+.components-page .footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.components-page .page-header:after {
+  background: rgba(132, 13, 121, 0.88);
+  background: linear-gradient(45deg, rgba(132, 13, 121, 0.88) 0%, rgba(208, 44, 180, 0.31) 100%);
+  background: -moz-linear-gradient(135deg, rgba(132, 13, 121, 0.88) 0%, rgba(208, 44, 180, 0.31) 100%);
+  background: -webkit-linear-gradient(135deg, rgba(132, 13, 121, 0.88) 0%, rgba(208, 44, 180, 0.31) 100%);
+}
+
+.components-page .page-header.header-filter:before {
+  display: none;
+}
+
+.components-page .page-header .title-container {
+  position: relative;
+  z-index: 10;
+}
+
+.components-page .footer .container {
+  padding-top: 0;
+}
+
+.components-page .footer .btn i {
+  color: #fff;
+}
+
+.components-page .page-header {
+  height: 100vh !important;
+  min-height: auto !important;
+}
+
+/*  PRESENTION PAGE   */
+
+/* Section Components */
+
+.section-components .title {
+  margin-top: 60px;
+  margin-bottom: 5px;
+}
+
+.section-components .description {
+  margin-top: 35px;
+}
+
+.section-components .image-container {
+  height: 560px;
+  position: relative;
+}
+
+.section-components .components-macbook {
+  width: auto;
+  left: -100px;
+  top: 0;
+  height: 100%;
+  position: absolute;
+}
+
+.section-components .table-img,
+.section-components .share-btn-img,
+.section-components .coloured-card-btn-img,
+.section-components .coloured-card-img,
+.section-components .social-img,
+.section-components .pin-btn-img {
+  position: absolute;
+  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
+}
+
+.section-components .coloured-card-img {
+  left: 90%;
+  top: 11%;
+  height: 90px;
+  border-radius: 2px;
+}
+
+.section-components .social-img {
+  left: 70%;
+  top: 67%;
+  height: 40px;
+}
+
+.section-components .coloured-card-btn-img {
+  left: 35%;
+  top: 2%;
+  height: 125px;
+  border-radius: 6px;
+}
+
+.section-components .table-img {
+  left: -13%;
+  top: 27%;
+  height: 175px;
+  border-radius: 2px;
+}
+
+.section-components .pin-btn-img {
+  left: 0%;
+  top: 68%;
+  height: 25px;
+  border-radius: 3px;
+}
+
+.section-components .share-btn-img {
+  left: 3%;
+  top: -3%;
+  height: 25px;
+}
+
+/* Section Content */
+
+.section-content .section-description {
+  margin-top: 100px;
+}
+
+.section-content .title {
+  margin-bottom: 5px;
+}
+
+.section-content .section-description .title+.description {
+  margin-top: 0;
+}
+
+.section-content .description {
+  margin-top: 35px;
+}
+
+.section-content .image-container {
+  max-width: 900px;
+  position: relative;
+}
+
+.section-content .image-container .ipad-img {
+  width: 100%;
+  transition: transform .6s .9s;
+  z-index: 2;
+}
+
+.section-content .image-container .area-img,
+.section-content .image-container .info-img {
+  position: absolute;
+  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
+  opacity: 0;
+  transform: translate3D(0px, 100px, 0px);
+  -webkit-transform: translate3D(0px, 100px, 0px);
+}
+
+.section-content .image-container .area-img {
+  top: 10%;
+  left: 60%;
+  height: 300px;
+  width: 250px;
+  z-index: 2;
+  -webkit-transition: all 1s ease-out 0s;
+  -moz-transition: all 1s ease-out 0s;
+  -o-transition: all 1s ease-out 0s;
+  -ms-transition: all 1s ease-out 0s;
+  transition: all 1s ease-out 0s;
+}
+
+.section-content .image-container .info-img {
+  top: 50%;
+  left: 0%;
+  height: 200px;
+  width: 300px;
+  -webkit-transition: all 1s ease-out 0s;
+  -moz-transition: all 1s ease-out 0s;
+  -o-transition: all 1s ease-out 0s;
+  -ms-transition: all 1s ease-out 0s;
+  transition: all 1s ease-out 0s;
+}
+
+.animated {
+  transform: translate3D(0px, 0px, 0px) !important;
+  -webkit-transform: translate3D(0px, 0px, 0px) !important;
+  opacity: 1 !important;
+}
+
+/*  animated images  */
+
+@-webkit-keyframes Floatingy {
+  from {
+    -webkit-transform: translate(0, 0px);
+  }
+  65% {
+    -webkit-transform: translate(50px, 0);
+  }
+  to {
+    -webkit-transform: translate(0, -0px);
+  }
+}
+
+@-moz-keyframes Floatingy {
+  from {
+    -moz-transform: translate(0, 0px);
+  }
+  65% {
+    -moz-transform: translate(50px, 0);
+  }
+  to {
+    -moz-transform: translate(0, -0px);
+  }
+}
+
+@-webkit-keyframes Floatingx {
+  from {
+    -webkit-transform: translate(50px, 0px);
+  }
+  65% {
+    -webkit-transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(50px, -0px);
+  }
+}
+
+@-moz-keyframes Floatingx {
+  from {
+    -moz-transform: translate(50px, 0px);
+  }
+  65% {
+    -moz-transform: translate(0, 0);
+  }
+  to {
+    -moz-transform: translate(50px, -0px);
+  }
+}
+
+.table-img,
+.coloured-card-img,
+.coloured-card-btn-img,
+.pin-btn-img,
+.share-btn-img,
+.social-img {
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-timing-function: ease-in-out;
+  -moz-animation-iteration-count: infinite;
+  -moz-animation-timing-function: ease-in-out;
+  -webkit-animation-name: Floatingy;
+  -moz-animation-name: Floatingy;
+  float: left;
+}
+
+.table-img {
+  -webkit-animation-duration: 14s;
+  -moz-animation-duration: 14s;
+  -webkit-animation-name: Floatingx;
+  -moz-animation-name: Floatingx;
+}
+
+.coloured-card-img {
+  -webkit-animation-duration: 10s;
+  -moz-animation-duration: 10s;
+  -webkit-animation-name: Floatingx;
+  -moz-animation-name: Floatingx;
+}
+
+.coloured-card-btn-img {
+  -webkit-animation-duration: 18s;
+  -moz-animation-duration: 18s;
+}
+
+.pin-btn-img {
+  -webkit-animation-duration: 15s;
+  -moz-animation-duration: 15s;
+}
+
+.share-btn-img {
+  -webkit-animation-duration: 11s;
+  -moz-animation-duration: 11s;
+}
+
+.social-img {
+  -webkit-animation-duration: 16s;
+  -moz-animation-duration: 16s;
+  -webkit-animation-name: Floatingx;
+  -moz-animation-name: Floatingx;
+}
+
+/* Presentation Page OnScroll Animation */
+
+.animated {
+  animation-duration: 1s;
+  animation-fill-mode: both;
+}
+
+.animated.infinite {
+  animation-iteration-count: infinite;
+}
+
+.animated.hinge {
+  animation-duration: 2s;
+}
+
+.animated.flipOutX,
+.animated.flipOutY,
+.animated.bounceIn,
+.animated.bounceOut {
+  animation-duration: .75s;
+}
+
+@keyframes bounce {
+  from,
+  20%,
+  53%,
+  80%,
+  to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transform: translate3d(0, 0, 0);
+  }
+  40%,
+  43% {
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transform: translate3d(0, -30px, 0);
+  }
+  70% {
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transform: translate3d(0, -15px, 0);
+  }
+  90% {
+    transform: translate3d(0, -4px, 0);
+  }
+}
+
+.bounce {
+  animation-name: bounce;
+  transform-origin: center bottom;
+}
+
+@keyframes flash {
+  from,
+  50%,
+  to {
+    opacity: 1;
+  }
+  25%,
+  75% {
+    opacity: 0;
+  }
+}
+
+.flash {
+  animation-name: flash;
+}

resources/theme/material-kit/assets/js/core/popper.min.js

@@ -0,0 +1,834 @@
+/*
+ Copyright (C) Federico Zivolo 2017
+ Distributed under the MIT License (license terms are at http://opensource.org/licenses/MIT).
+ */
+(function(e, t) {
+    'object' == typeof exports && 'undefined' != typeof module ? module.exports = t() : 'function' == typeof define && define.amd ? define(t) : e.Popper = t()
+})(this, function() {
+    'use strict';
+
+    function e(e) {
+        return e && '[object Function]' === {}.toString.call(e)
+    }
+
+    function t(e, t) {
+        if (1 !== e.nodeType) return [];
+        var o = window.getComputedStyle(e, null);
+        return t ? o[t] : o
+    }
+
+    function o(e) {
+        return 'HTML' === e.nodeName ? e : e.parentNode || e.host
+    }
+
+    function n(e) {
+        if (!e || -1 !== ['HTML', 'BODY', '#document'].indexOf(e.nodeName)) return window.document.body;
+        var i = t(e),
+            r = i.overflow,
+            p = i.overflowX,
+            s = i.overflowY;
+        return /(auto|scroll)/.test(r + s + p) ? e : n(o(e))
+    }
+
+    function r(e) {
+        var o = e && e.offsetParent,
+            i = o && o.nodeName;
+        return i && 'BODY' !== i && 'HTML' !== i ? -1 !== ['TD', 'TABLE'].indexOf(o.nodeName) && 'static' === t(o, 'position') ? r(o) : o : window.document.documentElement
+    }
+
+    function p(e) {
+        var t = e.nodeName;
+        return 'BODY' !== t && ('HTML' === t || r(e.firstElementChild) === e)
+    }
+
+    function s(e) {
+        return null === e.parentNode ? e : s(e.parentNode)
+    }
+
+    function d(e, t) {
+        if (!e || !e.nodeType || !t || !t.nodeType) return window.document.documentElement;
+        var o = e.compareDocumentPosition(t) & Node.DOCUMENT_POSITION_FOLLOWING,
+            i = o ? e : t,
+            n = o ? t : e,
+            a = document.createRange();
+        a.setStart(i, 0), a.setEnd(n, 0);
+        var f = a.commonAncestorContainer;
+        if (e !== f && t !== f || i.contains(n)) return p(f) ? f : r(f);
+        var l = s(e);
+        return l.host ? d(l.host, t) : d(e, s(t).host)
+    }
+
+    function a(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 = window.document.documentElement,
+                r = window.document.scrollingElement || n;
+            return r[o]
+        }
+        return e[o]
+    }
+
+    function f(e, t) {
+        var o = 2 < arguments.length && void 0 !== arguments[2] && arguments[2],
+            i = a(t, 'top'),
+            n = a(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 l(e, t) {
+        var o = 'x' === t ? 'Left' : 'Top',
+            i = 'Left' == o ? 'Right' : 'Bottom';
+        return +e['border' + o + 'Width'].split('px')[0] + +e['border' + i + 'Width'].split('px')[0]
+    }
+
+    function m(e, t, o, i) {
+        return _(t['offset' + e], o['client' + e], o['offset' + e], ie() ? o['offset' + e] + i['margin' + ('Height' === e ? 'Top' : 'Left')] + i['margin' + ('Height' === e ? 'Bottom' : 'Right')] : 0)
+    }
+
+    function h() {
+        var e = window.document.body,
+            t = window.document.documentElement,
+            o = ie() && window.getComputedStyle(t);
+        return {
+            height: m('Height', e, t, o),
+            width: m('Width', e, t, o)
+        }
+    }
+
+    function c(e) {
+        return se({}, e, {
+            right: e.left + e.width,
+            bottom: e.top + e.height
+        })
+    }
+
+    function g(e) {
+        var o = {};
+        if (ie()) try {
+            o = e.getBoundingClientRect();
+            var i = a(e, 'top'),
+                n = a(e, 'left');
+            o.top += i, o.left += n, o.bottom += i, o.right += n
+        } catch (e) {} else o = e.getBoundingClientRect();
+        var r = {
+                left: o.left,
+                top: o.top,
+                width: o.right - o.left,
+                height: o.bottom - o.top
+            },
+            p = 'HTML' === e.nodeName ? h() : {},
+            s = p.width || e.clientWidth || r.right - r.left,
+            d = p.height || e.clientHeight || r.bottom - r.top,
+            f = e.offsetWidth - s,
+            m = e.offsetHeight - d;
+        if (f || m) {
+            var g = t(e);
+            f -= l(g, 'x'), m -= l(g, 'y'), r.width -= f, r.height -= m
+        }
+        return c(r)
+    }
+
+    function u(e, o) {
+        var i = ie(),
+            r = 'HTML' === o.nodeName,
+            p = g(e),
+            s = g(o),
+            d = n(e),
+            a = t(o),
+            l = +a.borderTopWidth.split('px')[0],
+            m = +a.borderLeftWidth.split('px')[0],
+            h = c({
+                top: p.top - s.top - l,
+                left: p.left - s.left - m,
+                width: p.width,
+                height: p.height
+            });
+        if (h.marginTop = 0, h.marginLeft = 0, !i && r) {
+            var u = +a.marginTop.split('px')[0],
+                b = +a.marginLeft.split('px')[0];
+            h.top -= l - u, h.bottom -= l - u, h.left -= m - b, h.right -= m - b, h.marginTop = u, h.marginLeft = b
+        }
+        return (i ? o.contains(d) : o === d && 'BODY' !== d.nodeName) && (h = f(h, o)), h
+    }
+
+    function b(e) {
+        var t = window.document.documentElement,
+            o = u(e, t),
+            i = _(t.clientWidth, window.innerWidth || 0),
+            n = _(t.clientHeight, window.innerHeight || 0),
+            r = a(t),
+            p = a(t, 'left'),
+            s = {
+                top: r - o.top + o.marginTop,
+                left: p - o.left + o.marginLeft,
+                width: i,
+                height: n
+            };
+        return c(s)
+    }
+
+    function y(e) {
+        var i = e.nodeName;
+        return 'BODY' === i || 'HTML' === i ? !1 : 'fixed' === t(e, 'position') || y(o(e))
+    }
+
+    function w(e, t, i, r) {
+        var p = {
+                top: 0,
+                left: 0
+            },
+            s = d(e, t);
+        if ('viewport' === r) p = b(s);
+        else {
+            var a;
+            'scrollParent' === r ? (a = n(o(e)), 'BODY' === a.nodeName && (a = window.document.documentElement)) : 'window' === r ? a = window.document.documentElement : a = r;
+            var f = u(a, s);
+            if ('HTML' === a.nodeName && !y(s)) {
+                var l = h(),
+                    m = l.height,
+                    c = l.width;
+                p.top += f.top - f.marginTop, p.bottom = m + f.top, p.left += f.left - f.marginLeft, p.right = c + f.left
+            } else p = f
+        }
+        return p.left += i, p.top += i, p.right -= i, p.bottom -= i, p
+    }
+
+    function v(e) {
+        var t = e.width,
+            o = e.height;
+        return t * o
+    }
+
+    function E(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 p = w(o, i, r, n),
+            s = {
+                top: {
+                    width: p.width,
+                    height: t.top - p.top
+                },
+                right: {
+                    width: p.right - t.right,
+                    height: p.height
+                },
+                bottom: {
+                    width: p.width,
+                    height: p.bottom - t.bottom
+                },
+                left: {
+                    width: t.left - p.left,
+                    height: p.height
+                }
+            },
+            d = Object.keys(s).map(function(e) {
+                return se({
+                    key: e
+                }, s[e], {
+                    area: v(s[e])
+                })
+            }).sort(function(e, t) {
+                return t.area - e.area
+            }),
+            a = d.filter(function(e) {
+                var t = e.width,
+                    i = e.height;
+                return t >= o.clientWidth && i >= o.clientHeight
+            }),
+            f = 0 < a.length ? a[0].key : d[0].key,
+            l = e.split('-')[1];
+        return f + (l ? '-' + l : '')
+    }
+
+    function x(e, t, o) {
+        var i = d(t, o);
+        return u(o, i)
+    }
+
+    function O(e) {
+        var t = window.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 L(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 S(e, t, o) {
+        o = o.split('-')[0];
+        var i = O(e),
+            n = {
+                width: i.width,
+                height: i.height
+            },
+            r = -1 !== ['right', 'left'].indexOf(o),
+            p = r ? 'top' : 'left',
+            s = r ? 'left' : 'top',
+            d = r ? 'height' : 'width',
+            a = r ? 'width' : 'height';
+        return n[p] = t[p] + t[d] / 2 - i[d] / 2, n[s] = o === s ? t[s] - i[a] : t[L(s)], n
+    }
+
+    function T(e, t) {
+        return Array.prototype.find ? e.find(t) : e.filter(t)[0]
+    }
+
+    function C(e, t, o) {
+        if (Array.prototype.findIndex) return e.findIndex(function(e) {
+            return e[t] === o
+        });
+        var i = T(e, function(e) {
+            return e[t] === o
+        });
+        return e.indexOf(i)
+    }
+
+    function N(t, o, i) {
+        var n = void 0 === i ? t : t.slice(0, C(t, 'name', i));
+        return n.forEach(function(t) {
+            t.function && console.warn('`modifier.function` is deprecated, use `modifier.fn`!');
+            var i = t.function || t.fn;
+            t.enabled && e(i) && (o.offsets.popper = c(o.offsets.popper), o.offsets.reference = c(o.offsets.reference), o = i(o, t))
+        }), o
+    }
+
+    function k() {
+        if (!this.state.isDestroyed) {
+            var e = {
+                instance: this,
+                styles: {},
+                attributes: {},
+                flipped: !1,
+                offsets: {}
+            };
+            e.offsets.reference = x(this.state, this.popper, this.reference), e.placement = E(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 = S(this.popper, e.offsets.reference, e.placement), e.offsets.popper.position = 'absolute', e = N(this.modifiers, e), this.state.isCreated ? this.options.onUpdate(e) : (this.state.isCreated = !0, this.options.onCreate(e))
+        }
+    }
+
+    function W(e, t) {
+        return e.some(function(e) {
+            var o = e.name,
+                i = e.enabled;
+            return i && o === t
+        })
+    }
+
+    function B(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 D() {
+        return this.state.isDestroyed = !0, W(this.modifiers, 'applyStyle') && (this.popper.removeAttribute('x-placement'), this.popper.style.left = '', this.popper.style.position = '', this.popper.style.top = '', this.popper.style[B('transform')] = ''), this.disableEventListeners(), this.options.removeOnDestroy && this.popper.parentNode.removeChild(this.popper), this
+    }
+
+    function H(e, t, o, i) {
+        var r = 'BODY' === e.nodeName,
+            p = r ? window : e;
+        p.addEventListener(t, o, {
+            passive: !0
+        }), r || H(n(p.parentNode), t, o, i), i.push(p)
+    }
+
+    function P(e, t, o, i) {
+        o.updateBound = i, window.addEventListener('resize', o.updateBound, {
+            passive: !0
+        });
+        var r = n(e);
+        return H(r, 'scroll', o.updateBound, o.scrollParents), o.scrollElement = r, o.eventsEnabled = !0, o
+    }
+
+    function A() {
+        this.state.eventsEnabled || (this.state = P(this.reference, this.options, this.state, this.scheduleUpdate))
+    }
+
+    function M(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 I() {
+        this.state.eventsEnabled && (window.cancelAnimationFrame(this.scheduleUpdate), this.state = M(this.reference, this.state))
+    }
+
+    function R(e) {
+        return '' !== e && !isNaN(parseFloat(e)) && isFinite(e)
+    }
+
+    function U(e, t) {
+        Object.keys(t).forEach(function(o) {
+            var i = ''; - 1 !== ['width', 'height', 'top', 'right', 'bottom', 'left'].indexOf(o) && R(t[o]) && (i = 'px'), e.style[o] = t[o] + i
+        })
+    }
+
+    function Y(e, t) {
+        Object.keys(t).forEach(function(o) {
+            var i = t[o];
+            !1 === i ? e.removeAttribute(o) : e.setAttribute(o, t[o])
+        })
+    }
+
+    function F(e, t, o) {
+        var i = T(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 j(e) {
+        return 'end' === e ? 'start' : 'start' === e ? 'end' : e
+    }
+
+    function K(e) {
+        var t = 1 < arguments.length && void 0 !== arguments[1] && arguments[1],
+            o = ae.indexOf(e),
+            i = ae.slice(o + 1).concat(ae.slice(0, o));
+        return t ? i.reverse() : i
+    }
+
+    function q(e, t, o, i) {
+        var n = e.match(/((?:\-|\+)?\d*\.?\d*)(.*)/),
+            r = +n[1],
+            p = n[2];
+        if (!r) return e;
+        if (0 === p.indexOf('%')) {
+            var s;
+            switch (p) {
+                case '%p':
+                    s = o;
+                    break;
+                case '%':
+                case '%r':
+                default:
+                    s = i;
+            }
+            var d = c(s);
+            return d[t] / 100 * r
+        }
+        if ('vh' === p || 'vw' === p) {
+            var a;
+            return a = 'vh' === p ? _(document.documentElement.clientHeight, window.innerHeight || 0) : _(document.documentElement.clientWidth, window.innerWidth || 0), a / 100 * r
+        }
+        return r
+    }
+
+    function G(e, t, o, i) {
+        var n = [0, 0],
+            r = -1 !== ['right', 'left'].indexOf(i),
+            p = e.split(/(\+|\-)/).map(function(e) {
+                return e.trim()
+            }),
+            s = p.indexOf(T(p, function(e) {
+                return -1 !== e.search(/,|\s/)
+            }));
+        p[s] && -1 === p[s].indexOf(',') && console.warn('Offsets separated by white space(s) are deprecated, use a comma (,) instead.');
+        var d = /\s*,\s*|\s+/,
+            a = -1 === s ? [p] : [p.slice(0, s).concat([p[s].split(d)[0]]), [p[s].split(d)[1]].concat(p.slice(s + 1))];
+        return a = a.map(function(e, i) {
+            var n = (1 === i ? !r : r) ? 'height' : 'width',
+                p = !1;
+            return e.reduce(function(e, t) {
+                return '' === e[e.length - 1] && -1 !== ['+', '-'].indexOf(t) ? (e[e.length - 1] = t, p = !0, e) : p ? (e[e.length - 1] += t, p = !1, e) : e.concat(t)
+            }, []).map(function(e) {
+                return q(e, n, t, o)
+            })
+        }), a.forEach(function(e, t) {
+            e.forEach(function(o, i) {
+                R(o) && (n[t] += o * ('-' === e[i - 1] ? -1 : 1))
+            })
+        }), n
+    }
+    for (var z = Math.min, V = Math.floor, _ = Math.max, X = ['native code', '[object MutationObserverConstructor]'], Q = function(e) {
+            return X.some(function(t) {
+                return -1 < (e || '').toString().indexOf(t)
+            })
+        }, J = 'undefined' != typeof window, Z = ['Edge', 'Trident', 'Firefox'], $ = 0, ee = 0; ee < Z.length; ee += 1)
+        if (J && 0 <= navigator.userAgent.indexOf(Z[ee])) {
+            $ = 1;
+            break
+        }
+    var i, te = J && Q(window.MutationObserver),
+        oe = te ? 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()
+                }, $))
+            }
+        },
+        ie = function() {
+            return void 0 == i && (i = -1 !== navigator.appVersion.indexOf('MSIE 10')), i
+        },
+        ne = function(e, t) {
+            if (!(e instanceof t)) throw new TypeError('Cannot call a class as a function')
+        },
+        re = 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
+            }
+        }(),
+        pe = function(e, t, o) {
+            return t in e ? Object.defineProperty(e, t, {
+                value: o,
+                enumerable: !0,
+                configurable: !0,
+                writable: !0
+            }) : e[t] = o, e
+        },
+        se = 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
+        },
+        de = ['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'],
+        ae = de.slice(3),
+        fe = {
+            FLIP: 'flip',
+            CLOCKWISE: 'clockwise',
+            COUNTERCLOCKWISE: 'counterclockwise'
+        },
+        le = function() {
+            function t(o, i) {
+                var n = this,
+                    r = 2 < arguments.length && void 0 !== arguments[2] ? arguments[2] : {};
+                ne(this, t), this.scheduleUpdate = function() {
+                    return requestAnimationFrame(n.update)
+                }, this.update = oe(this.update.bind(this)), this.options = se({}, t.Defaults, r), this.state = {
+                    isDestroyed: !1,
+                    isCreated: !1,
+                    scrollParents: []
+                }, this.reference = o.jquery ? o[0] : o, this.popper = i.jquery ? i[0] : i, this.options.modifiers = {}, Object.keys(se({}, t.Defaults.modifiers, r.modifiers)).forEach(function(e) {
+                    n.options.modifiers[e] = se({}, t.Defaults.modifiers[e] || {}, r.modifiers ? r.modifiers[e] : {})
+                }), this.modifiers = Object.keys(this.options.modifiers).map(function(e) {
+                    return se({
+                        name: e
+                    }, n.options.modifiers[e])
+                }).sort(function(e, t) {
+                    return e.order - t.order
+                }), this.modifiers.forEach(function(t) {
+                    t.enabled && e(t.onLoad) && t.onLoad(n.reference, n.popper, n.options, t, n.state)
+                }), this.update();
+                var p = this.options.eventsEnabled;
+                p && this.enableEventListeners(), this.state.eventsEnabled = p
+            }
+            return re(t, [{
+                key: 'update',
+                value: function() {
+                    return k.call(this)
+                }
+            }, {
+                key: 'destroy',
+                value: function() {
+                    return D.call(this)
+                }
+            }, {
+                key: 'enableEventListeners',
+                value: function() {
+                    return A.call(this)
+                }
+            }, {
+                key: 'disableEventListeners',
+                value: function() {
+                    return I.call(this)
+                }
+            }]), t
+        }();
+    return le.Utils = ('undefined' == typeof window ? global : window).PopperUtils, le.placements = de, le.Defaults = {
+        placement: 'bottom',
+        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,
+                            p = n.popper,
+                            s = -1 !== ['bottom', 'top'].indexOf(o),
+                            d = s ? 'left' : 'top',
+                            a = s ? 'width' : 'height',
+                            f = {
+                                start: pe({}, d, r[d]),
+                                end: pe({}, d, r[d] + r[a] - p[a])
+                            };
+                        e.offsets.popper = se({}, p, f[i])
+                    }
+                    return e
+                }
+            },
+            offset: {
+                order: 200,
+                enabled: !0,
+                fn: function(e, t) {
+                    var o, i = t.offset,
+                        n = e.placement,
+                        r = e.offsets,
+                        p = r.popper,
+                        s = r.reference,
+                        d = n.split('-')[0];
+                    return o = R(+i) ? [+i, 0] : G(i, p, s, d), 'left' === d ? (p.top += o[0], p.left -= o[1]) : 'right' === d ? (p.top += o[0], p.left += o[1]) : 'top' === d ? (p.left += o[0], p.top -= o[1]) : 'bottom' === d && (p.left += o[0], p.top += o[1]), e.popper = p, e
+                },
+                offset: 0
+            },
+            preventOverflow: {
+                order: 300,
+                enabled: !0,
+                fn: function(e, t) {
+                    var o = t.boundariesElement || r(e.instance.popper);
+                    e.instance.reference === o && (o = r(o));
+                    var i = w(e.instance.popper, e.instance.reference, t.padding, o);
+                    t.boundaries = i;
+                    var n = t.priority,
+                        p = e.offsets.popper,
+                        s = {
+                            primary: function(e) {
+                                var o = p[e];
+                                return p[e] < i[e] && !t.escapeWithReference && (o = _(p[e], i[e])), pe({}, e, o)
+                            },
+                            secondary: function(e) {
+                                var o = 'right' === e ? 'left' : 'top',
+                                    n = p[o];
+                                return p[e] > i[e] && !t.escapeWithReference && (n = z(p[o], i[e] - ('right' === e ? p.width : p.height))), pe({}, o, n)
+                            }
+                        };
+                    return n.forEach(function(e) {
+                        var t = -1 === ['left', 'top'].indexOf(e) ? 'secondary' : 'primary';
+                        p = se({}, p, s[t](e))
+                    }), e.offsets.popper = p, 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 = V,
+                        p = -1 !== ['top', 'bottom'].indexOf(n),
+                        s = p ? 'right' : 'bottom',
+                        d = p ? 'left' : 'top',
+                        a = p ? 'width' : 'height';
+                    return o[s] < r(i[d]) && (e.offsets.popper[d] = r(i[d]) - o[a]), o[d] > r(i[s]) && (e.offsets.popper[d] = r(i[s])), e
+                }
+            },
+            arrow: {
+                order: 500,
+                enabled: !0,
+                fn: function(e, t) {
+                    if (!F(e.instance.modifiers, 'arrow', 'keepTogether')) return e;
+                    var o = t.element;
+                    if ('string' == typeof o) {
+                        if (o = e.instance.popper.querySelector(o), !o) return e;
+                    } else if (!e.instance.popper.contains(o)) return console.warn('WARNING: `arrow.element` must be child of its popper element!'), e;
+                    var i = e.placement.split('-')[0],
+                        n = e.offsets,
+                        r = n.popper,
+                        p = n.reference,
+                        s = -1 !== ['left', 'right'].indexOf(i),
+                        d = s ? 'height' : 'width',
+                        a = s ? 'top' : 'left',
+                        f = s ? 'left' : 'top',
+                        l = s ? 'bottom' : 'right',
+                        m = O(o)[d];
+                    p[l] - m < r[a] && (e.offsets.popper[a] -= r[a] - (p[l] - m)), p[a] + m > r[l] && (e.offsets.popper[a] += p[a] + m - r[l]);
+                    var h = p[a] + p[d] / 2 - m / 2,
+                        g = h - c(e.offsets.popper)[a];
+                    return g = _(z(r[d] - m, g), 0), e.arrowElement = o, e.offsets.arrow = {}, e.offsets.arrow[a] = Math.round(g), e.offsets.arrow[f] = '', e
+                },
+                element: '[x-arrow]'
+            },
+            flip: {
+                order: 600,
+                enabled: !0,
+                fn: function(e, t) {
+                    if (W(e.instance.modifiers, 'inner')) return e;
+                    if (e.flipped && e.placement === e.originalPlacement) return e;
+                    var o = w(e.instance.popper, e.instance.reference, t.padding, t.boundariesElement),
+                        i = e.placement.split('-')[0],
+                        n = L(i),
+                        r = e.placement.split('-')[1] || '',
+                        p = [];
+                    switch (t.behavior) {
+                        case fe.FLIP:
+                            p = [i, n];
+                            break;
+                        case fe.CLOCKWISE:
+                            p = K(i);
+                            break;
+                        case fe.COUNTERCLOCKWISE:
+                            p = K(i, !0);
+                            break;
+                        default:
+                            p = t.behavior;
+                    }
+                    return p.forEach(function(s, d) {
+                        if (i !== s || p.length === d + 1) return e;
+                        i = e.placement.split('-')[0], n = L(i);
+                        var a = e.offsets.popper,
+                            f = e.offsets.reference,
+                            l = V,
+                            m = 'left' === i && l(a.right) > l(f.left) || 'right' === i && l(a.left) < l(f.right) || 'top' === i && l(a.bottom) > l(f.top) || 'bottom' === i && l(a.top) < l(f.bottom),
+                            h = l(a.left) < l(o.left),
+                            c = l(a.right) > l(o.right),
+                            g = l(a.top) < l(o.top),
+                            u = l(a.bottom) > l(o.bottom),
+                            b = 'left' === i && h || 'right' === i && c || 'top' === i && g || 'bottom' === i && u,
+                            y = -1 !== ['top', 'bottom'].indexOf(i),
+                            w = !!t.flipVariations && (y && 'start' === r && h || y && 'end' === r && c || !y && 'start' === r && g || !y && 'end' === r && u);
+                        (m || b || w) && (e.flipped = !0, (m || b) && (i = p[d + 1]), w && (r = j(r)), e.placement = i + (r ? '-' + r : ''), e.offsets.popper = se({}, e.offsets.popper, S(e.instance.popper, e.offsets.reference, e.placement)), e = N(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,
+                        p = -1 !== ['left', 'right'].indexOf(o),
+                        s = -1 === ['top', 'left'].indexOf(o);
+                    return n[p ? 'left' : 'top'] = r[t] - (s ? n[p ? 'width' : 'height'] : 0), e.placement = L(t), e.offsets.popper = c(n), e
+                }
+            },
+            hide: {
+                order: 800,
+                enabled: !0,
+                fn: function(e) {
+                    if (!F(e.instance.modifiers, 'hide', 'preventOverflow')) return e;
+                    var t = e.offsets.reference,
+                        o = T(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,
+                        p = T(e.instance.modifiers, function(e) {
+                            return 'applyStyle' === e.name
+                        }).gpuAcceleration;
+                    void 0 !== p && console.warn('WARNING: `gpuAcceleration` option moved to `computeStyle` modifier and will not be supported in future versions of Popper.js!');
+                    var s, d, a = void 0 === p ? t.gpuAcceleration : p,
+                        f = r(e.instance.popper),
+                        l = g(f),
+                        m = {
+                            position: n.position
+                        },
+                        h = {
+                            left: V(n.left),
+                            top: V(n.top),
+                            bottom: V(n.bottom),
+                            right: V(n.right)
+                        },
+                        c = 'bottom' === o ? 'top' : 'bottom',
+                        u = 'right' === i ? 'left' : 'right',
+                        b = B('transform');
+                    if (d = 'bottom' == c ? -l.height + h.bottom : h.top, s = 'right' == u ? -l.width + h.right : h.left, a && b) m[b] = 'translate3d(' + s + 'px, ' + d + 'px, 0)', m[c] = 0, m[u] = 0, m.willChange = 'transform';
+                    else {
+                        var y = 'bottom' == c ? -1 : 1,
+                            w = 'right' == u ? -1 : 1;
+                        m[c] = d * y, m[u] = s * w, m.willChange = c + ', ' + u
+                    }
+                    var v = {
+                        "x-placement": e.placement
+                    };
+                    return e.attributes = se({}, v, e.attributes), e.styles = se({}, m, e.styles), e
+                },
+                gpuAcceleration: !0,
+                x: 'bottom',
+                y: 'right'
+            },
+            applyStyle: {
+                order: 900,
+                enabled: !0,
+                fn: function(e) {
+                    return U(e.instance.popper, e.styles), Y(e.instance.popper, e.attributes), e.offsets.arrow && U(e.arrowElement, e.offsets.arrow), e
+                },
+                onLoad: function(e, t, o, i, n) {
+                    var r = x(n, t, e),
+                        p = E(o.placement, r, t, e, o.modifiers.flip.boundariesElement, o.modifiers.flip.padding);
+                    return t.setAttribute('x-placement', p), U(t, {
+                        position: 'absolute'
+                    }), o
+                },
+                gpuAcceleration: void 0
+            }
+        }
+    }, le
+});

resources/theme/material-kit/assets/js/material-kit.js

@@ -0,0 +1,254 @@
+ // 
+ // =========================================================
+ // * Material Kit - v2.0.5
+ // =========================================================
+ //
+ // * Product Page: https://www.creative-tim.com/product/material-kit
+ // * Copyright 2019 Creative Tim (http://www.creative-tim.com)
+ //   Licensed under MIT (https://github.com/creativetimofficial/material-kit/blob/master/LICENSE.md)
+ //
+ //
+ // =========================================================
+ //
+ // * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+
+<!DOCTYPE html>
+var big_image;
+
+$(document).ready(function() {
+  BrowserDetect.init();
+
+  // Init Material scripts for buttons ripples, inputs animations etc, more info on the next link https://github.com/FezVrasta/bootstrap-material-design#materialjs
+  $('body').bootstrapMaterialDesign();
+
+  window_width = $(window).width();
+
+  $navbar = $('.navbar[color-on-scroll]');
+  scroll_distance = $navbar.attr('color-on-scroll') || 500;
+
+  $navbar_collapse = $('.navbar').find('.navbar-collapse');
+
+  //  Activate the Tooltips
+  $('[data-toggle="tooltip"], [rel="tooltip"]').tooltip();
+
+  // Activate Popovers
+  $('[data-toggle="popover"]').popover();
+
+  if ($('.navbar-color-on-scroll').length != 0) {
+    $(window).on('scroll', materialKit.checkScrollForTransparentNavbar);
+  }
+
+  materialKit.checkScrollForTransparentNavbar();
+
+  if (window_width >= 768) {
+    big_image = $('.page-header[data-parallax="true"]');
+    if (big_image.length != 0) {
+      $(window).on('scroll', materialKit.checkScrollForParallax);
+    }
+
+  }
+
+
+});
+
+$(document).on('click', '.navbar-toggler', function() {
+  $toggle = $(this);
+
+  if (materialKit.misc.navbar_menu_visible == 1) {
+    $('html').removeClass('nav-open');
+    materialKit.misc.navbar_menu_visible = 0;
+    $('#bodyClick').remove();
+    setTimeout(function() {
+      $toggle.removeClass('toggled');
+    }, 550);
+
+    $('html').removeClass('nav-open-absolute');
+  } else {
+    setTimeout(function() {
+      $toggle.addClass('toggled');
+    }, 580);
+
+
+    div = '<div id="bodyClick"></div>';
+    $(div).appendTo("body").click(function() {
+      $('html').removeClass('nav-open');
+
+      if ($('nav').hasClass('navbar-absolute')) {
+        $('html').removeClass('nav-open-absolute');
+      }
+      materialKit.misc.navbar_menu_visible = 0;
+      $('#bodyClick').remove();
+      setTimeout(function() {
+        $toggle.removeClass('toggled');
+      }, 550);
+    });
+
+    if ($('nav').hasClass('navbar-absolute')) {
+      $('html').addClass('nav-open-absolute');
+    }
+
+    $('html').addClass('nav-open');
+    materialKit.misc.navbar_menu_visible = 1;
+  }
+});
+
+materialKit = {
+  misc: {
+    navbar_menu_visible: 0,
+    window_width: 0,
+    transparent: true,
+    fixedTop: false,
+    navbar_initialized: false,
+    isWindow: document.documentMode || /Edge/.test(navigator.userAgent)
+  },
+
+  initFormExtendedDatetimepickers: function() {
+    $('.datetimepicker').datetimepicker({
+      icons: {
+        time: "fa fa-clock-o",
+        date: "fa fa-calendar",
+        up: "fa fa-chevron-up",
+        down: "fa fa-chevron-down",
+        previous: 'fa fa-chevron-left',
+        next: 'fa fa-chevron-right',
+        today: 'fa fa-screenshot',
+        clear: 'fa fa-trash',
+        close: 'fa fa-remove'
+      }
+    });
+  },
+
+  initSliders: function() {
+    // Sliders for demo purpose
+    var slider = document.getElementById('sliderRegular');
+
+    noUiSlider.create(slider, {
+      start: 40,
+      connect: [true, false],
+      range: {
+        min: 0,
+        max: 100
+      }
+    });
+
+    var slider2 = document.getElementById('sliderDouble');
+
+    noUiSlider.create(slider2, {
+      start: [20, 60],
+      connect: true,
+      range: {
+        min: 0,
+        max: 100
+      }
+    });
+  },
+
+  checkScrollForParallax: function() {
+    oVal = ($(window).scrollTop() / 3);
+    big_image.css({
+      'transform': 'translate3d(0,' + oVal + 'px,0)',
+      '-webkit-transform': 'translate3d(0,' + oVal + 'px,0)',
+      '-ms-transform': 'translate3d(0,' + oVal + 'px,0)',
+      '-o-transform': 'translate3d(0,' + oVal + 'px,0)'
+    });
+  },
+
+  checkScrollForTransparentNavbar: debounce(function() {
+    if ($(document).scrollTop() > scroll_distance) {
+      if (materialKit.misc.transparent) {
+        materialKit.misc.transparent = false;
+        $('.navbar-color-on-scroll').removeClass('navbar-transparent');
+      }
+    } else {
+      if (!materialKit.misc.transparent) {
+        materialKit.misc.transparent = true;
+        $('.navbar-color-on-scroll').addClass('navbar-transparent');
+      }
+    }
+  }, 17)
+};
+
+// Returns a function, that, as long as it continues to be invoked, will not
+// be triggered. The function will be called after it stops being called for
+// N milliseconds. If `immediate` is passed, trigger the function on the
+// leading edge, instead of the trailing.
+
+function debounce(func, wait, immediate) {
+  var timeout;
+  return function() {
+    var context = this,
+      args = arguments;
+    clearTimeout(timeout);
+    timeout = setTimeout(function() {
+      timeout = null;
+      if (!immediate) func.apply(context, args);
+    }, wait);
+    if (immediate && !timeout) func.apply(context, args);
+  };
+};
+
+var BrowserDetect = {
+  init: function() {
+    this.browser = this.searchString(this.dataBrowser) || "Other";
+    this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
+  },
+  searchString: function(data) {
+    for (var i = 0; i < data.length; i++) {
+      var dataString = data[i].string;
+      this.versionSearchString = data[i].subString;
+
+      if (dataString.indexOf(data[i].subString) !== -1) {
+        return data[i].identity;
+      }
+    }
+  },
+  searchVersion: function(dataString) {
+    var index = dataString.indexOf(this.versionSearchString);
+    if (index === -1) {
+      return;
+    }
+
+    var rv = dataString.indexOf("rv:");
+    if (this.versionSearchString === "Trident" && rv !== -1) {
+      return parseFloat(dataString.substring(rv + 3));
+    } else {
+      return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
+    }
+  },
+
+  dataBrowser: [{
+      string: navigator.userAgent,
+      subString: "Chrome",
+      identity: "Chrome"
+    },
+    {
+      string: navigator.userAgent,
+      subString: "MSIE",
+      identity: "Explorer"
+    },
+    {
+      string: navigator.userAgent,
+      subString: "Trident",
+      identity: "Explorer"
+    },
+    {
+      string: navigator.userAgent,
+      subString: "Firefox",
+      identity: "Firefox"
+    },
+    {
+      string: navigator.userAgent,
+      subString: "Safari",
+      identity: "Safari"
+    },
+    {
+      string: navigator.userAgent,
+      subString: "Opera",
+      identity: "Opera"
+    }
+  ]
+
+};
+
+var better_browser = '<div class="container"><div class="better-browser row"><div class="col-md-2"></div><div class="col-md-8"><h3>We are sorry but it looks like your Browser doesn\'t support our website Features. In order to get the full experience please download a new version of your favourite browser.</h3></div><div class="col-md-2"></div><br><div class="col-md-4"><a href="https://www.mozilla.org/ro/firefox/new/" class="btn btn-warning">Mozilla</a><br></div><div class="col-md-4"><a href="https://www.google.com/chrome/browser/desktop/index.html" class="btn ">Chrome</a><br></div><div class="col-md-4"><a href="http://windows.microsoft.com/en-us/internet-explorer/ie-11-worldwide-languages" class="btn">Internet Explorer</a><br></div><br><br><h4>Thank you!</h4></div></div>';

resources/theme/material-kit/assets/js/material-kit.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["_site_kit_free/assets/js/kit-free.js"],"names":["big_image","debounce","func","wait","immediate","timeout","context","this","args","arguments","clearTimeout","setTimeout","apply","$","document","ready","BrowserDetect","init","bootstrapMaterialDesign","window_width","window","width","$navbar","scroll_distance","attr","$navbar_collapse","find","tooltip","popover","length","on","materialKit","checkScrollForTransparentNavbar","checkScrollForParallax","$toggle","misc","navbar_menu_visible","removeClass","remove","addClass","div","appendTo","click","hasClass","transparent","fixedTop","navbar_initialized","isWindow","documentMode","test","navigator","userAgent","initFormExtendedDatetimepickers","datetimepicker","icons","time","date","up","down","previous","next","today","clear","close","initSliders","slider","getElementById","noUiSlider","create","start","connect","range","min","max","slider2","oVal","scrollTop","css","transform","-webkit-transform","-ms-transform","-o-transform","browser","searchString","dataBrowser","version","searchVersion","appVersion","data","i","dataString","string","versionSearchString","subString","indexOf","identity","index","rv","parseFloat","substring","better_browser"],"mappings":"AAiBA,IAAIA,UAgKJ,SAASC,SAASC,EAAMC,EAAMC,GAC7B,IAAIC,EACJ,OAAO,WACN,IAAIC,EAAUC,KAAMC,EAAOC,UAC3BC,aAAaL,GACbA,EAAUM,WAAW,WACpBN,EAAU,KACLD,GAAWF,EAAKU,MAAMN,EAASE,IAClCL,GACCC,IAAcC,GAASH,EAAKU,MAAMN,EAASE,IAvKjDK,EAAEC,UAAUC,MAAM,WACdC,cAAcC,OAGdJ,EAAE,QAAQK,0BAEVC,aAAeN,EAAEO,QAAQC,QAEzBC,QAAUT,EAAE,4BACZU,gBAAkBD,QAAQE,KAAK,oBAAsB,IAErDC,iBAAmBZ,EAAE,WAAWa,KAAK,oBAGrCb,EAAE,4CAA4Cc,UAG9Cd,EAAE,2BAA2Be,UAEc,GAAvCf,EAAE,2BAA2BgB,QAC7BhB,EAAEO,QAAQU,GAAG,SAAUC,YAAYC,iCAGvCD,YAAYC,kCAEQ,KAAhBb,cAEwB,IADxBnB,UAAYa,EAAE,uCACAgB,QACVhB,EAAEO,QAAQU,GAAG,SAAUC,YAAYE,0BAQ/CpB,EAAEC,UAAUgB,GAAG,QAAS,kBAAmB,WACvCI,QAAUrB,EAAEN,MAE+B,GAAxCwB,YAAYI,KAAKC,qBAChBvB,EAAE,QAAQwB,YAAY,YACtBN,YAAYI,KAAKC,oBAAsB,EACvCvB,EAAE,cAAcyB,SACd3B,WAAW,WACTuB,QAAQG,YAAY,YACpB,KAEJxB,EAAE,QAAQwB,YAAY,uBAEtB1B,WAAW,WACTuB,QAAQK,SAAS,YAChB,KAGHC,IAAM,6BACN3B,EAAE2B,KAAKC,SAAS,QAAQC,MAAM,WAC5B7B,EAAE,QAAQwB,YAAY,YAEnBxB,EAAE,OAAO8B,SAAS,oBACjB9B,EAAE,QAAQwB,YAAY,qBAE1BN,YAAYI,KAAKC,oBAAsB,EACvCvB,EAAE,cAAcyB,SACf3B,WAAW,WACRuB,QAAQG,YAAY,YACpB,OAGHxB,EAAE,OAAO8B,SAAS,oBACjB9B,EAAE,QAAQ0B,SAAS,qBAGvB1B,EAAE,QAAQ0B,SAAS,YACnBR,YAAYI,KAAKC,oBAAsB,KAI/CL,YAAc,CACVI,KAAM,CACFC,oBAAqB,EACrBjB,aAAc,EACdyB,aAAa,EACbC,UAAU,EACVC,oBAAoB,EACpBC,SAAUjC,SAASkC,cAAgB,OAAOC,KAAKC,UAAUC,YAG7DC,gCAAiC,WAC7BvC,EAAE,mBAAmBwC,eAAe,CAChCC,MAAO,CACHC,KAAM,gBACNC,KAAM,iBACNC,GAAI,mBACJC,KAAM,qBACNC,SAAU,qBACVC,KAAM,sBACNC,MAAO,mBACPC,MAAO,cACPC,MAAO,mBAKnBC,YAAa,WAEV,IAAIC,EAASnD,SAASoD,eAAe,iBAErCC,WAAWC,OAAOH,EAAQ,CACtBI,MAAO,GACPC,QAAS,EAAC,GAAM,GAChBC,MAAO,CACHC,IAAK,EACLC,IAAK,OAIb,IAAIC,EAAU5D,SAASoD,eAAe,gBAEtCC,WAAWC,OAAOM,EAAS,CACvBL,MAAO,CAAC,GAAI,IACZC,SAAS,EACTC,MAAO,CACHC,IAAK,EACLC,IAAK,QAKhBxC,uBAAwB,WACpB0C,KAAQ9D,EAAEO,QAAQwD,YAAc,EAChC5E,UAAU6E,IAAI,CACVC,UAAa,iBAAmBH,KAAO,QACvCI,oBAAqB,iBAAmBJ,KAAO,QAC/CK,gBAAiB,iBAAmBL,KAAO,QAC3CM,eAAgB,iBAAmBN,KAAO,WAIlD3C,gCAAiC/B,SAAS,WAClCY,EAAEC,UAAU8D,YAAcrD,gBACtBQ,YAAYI,KAAKS,cACjBb,YAAYI,KAAKS,aAAc,EAC/B/B,EAAE,2BAA2BwB,YAAY,uBAGxCN,YAAYI,KAAKS,cAClBb,YAAYI,KAAKS,aAAc,EAC/B/B,EAAE,2BAA2B0B,SAAS,wBAG/C,KAqBP,IAAIvB,cAAgB,CAChBC,KAAM,WACFV,KAAK2E,QAAU3E,KAAK4E,aAAa5E,KAAK6E,cAAgB,QACtD7E,KAAK8E,QAAU9E,KAAK+E,cAAcpC,UAAUC,YAAc5C,KAAK+E,cAAcpC,UAAUqC,aAAe,WAE1GJ,aAAc,SAAUK,GACpB,IAAK,IAAIC,EAAI,EAAGA,EAAID,EAAK3D,OAAQ4D,IAAK,CAClC,IAAIC,EAAaF,EAAKC,GAAGE,OAGzB,GAFApF,KAAKqF,oBAAsBJ,EAAKC,GAAGI,WAEY,IAA3CH,EAAWI,QAAQN,EAAKC,GAAGI,WAC3B,OAAOL,EAAKC,GAAGM,WAI3BT,cAAe,SAAUI,GACrB,IAAIM,EAAQN,EAAWI,QAAQvF,KAAKqF,qBACpC,IAAe,IAAXI,EAAJ,CAIA,IAAIC,EAAKP,EAAWI,QAAQ,OAC5B,MAAiC,YAA7BvF,KAAKqF,sBAA6C,IAARK,EACnCC,WAAWR,EAAWS,UAAUF,EAAK,IAErCC,WAAWR,EAAWS,UAAUH,EAAQzF,KAAKqF,oBAAoB/D,OAAS,MAIzFuD,YAAa,CACT,CAACO,OAAQzC,UAAUC,UAAW0C,UAAW,SAAUE,SAAU,UAC7D,CAACJ,OAAQzC,UAAUC,UAAW0C,UAAW,OAAQE,SAAU,YAC3D,CAACJ,OAAQzC,UAAUC,UAAW0C,UAAW,UAAWE,SAAU,YAC9D,CAACJ,OAAQzC,UAAUC,UAAW0C,UAAW,UAAWE,SAAU,WAC9D,CAACJ,OAAQzC,UAAUC,UAAW0C,UAAW,SAAUE,SAAU,UAC7D,CAACJ,OAAQzC,UAAUC,UAAW0C,UAAW,QAASE,SAAU,WAKhEK,eAAiB"}

resources/theme/material-kit/assets/js/material-kit.min.js

@@ -0,0 +1,17 @@
+ //
+ // =========================================================
+ // * Material Kit - v2.0.5
+ // =========================================================
+ //
+ // * Product Page: https://www.creative-tim.com/product/material-kit
+ // * Copyright 2019 Creative Tim (http://www.creative-tim.com)
+ //   Licensed under MIT (https://github.com/creativetimofficial/material-kit/blob/master/LICENSE.md)
+ //
+ //
+ // =========================================================
+ //
+ // * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+
+var big_image;function debounce(a,t,n){var i;return function(){var e=this,r=arguments;clearTimeout(i),i=setTimeout(function(){i=null,n||a.apply(e,r)},t),n&&!i&&a.apply(e,r)}}$(document).ready(function(){BrowserDetect.init(),$("body").bootstrapMaterialDesign(),window_width=$(window).width(),$navbar=$(".navbar[color-on-scroll]"),scroll_distance=$navbar.attr("color-on-scroll")||500,$navbar_collapse=$(".navbar").find(".navbar-collapse"),$('[data-toggle="tooltip"], [rel="tooltip"]').tooltip(),$('[data-toggle="popover"]').popover(),0!=$(".navbar-color-on-scroll").length&&$(window).on("scroll",materialKit.checkScrollForTransparentNavbar),materialKit.checkScrollForTransparentNavbar(),768<=window_width&&0!=(big_image=$('.page-header[data-parallax="true"]')).length&&$(window).on("scroll",materialKit.checkScrollForParallax)}),$(document).on("click",".navbar-toggler",function(){$toggle=$(this),1==materialKit.misc.navbar_menu_visible?($("html").removeClass("nav-open"),materialKit.misc.navbar_menu_visible=0,$("#bodyClick").remove(),setTimeout(function(){$toggle.removeClass("toggled")},550),$("html").removeClass("nav-open-absolute")):(setTimeout(function(){$toggle.addClass("toggled")},580),div='<div id="bodyClick"></div>',$(div).appendTo("body").click(function(){$("html").removeClass("nav-open"),$("nav").hasClass("navbar-absolute")&&$("html").removeClass("nav-open-absolute"),materialKit.misc.navbar_menu_visible=0,$("#bodyClick").remove(),setTimeout(function(){$toggle.removeClass("toggled")},550)}),$("nav").hasClass("navbar-absolute")&&$("html").addClass("nav-open-absolute"),$("html").addClass("nav-open"),materialKit.misc.navbar_menu_visible=1)}),materialKit={misc:{navbar_menu_visible:0,window_width:0,transparent:!0,fixedTop:!1,navbar_initialized:!1,isWindow:document.documentMode||/Edge/.test(navigator.userAgent)},initFormExtendedDatetimepickers:function(){$(".datetimepicker").datetimepicker({icons:{time:"fa fa-clock-o",date:"fa fa-calendar",up:"fa fa-chevron-up",down:"fa fa-chevron-down",previous:"fa fa-chevron-left",next:"fa fa-chevron-right",today:"fa fa-screenshot",clear:"fa fa-trash",close:"fa fa-remove"}})},initSliders:function(){var e=document.getElementById("sliderRegular");noUiSlider.create(e,{start:40,connect:[!0,!1],range:{min:0,max:100}});var r=document.getElementById("sliderDouble");noUiSlider.create(r,{start:[20,60],connect:!0,range:{min:0,max:100}})},checkScrollForParallax:function(){oVal=$(window).scrollTop()/3,big_image.css({transform:"translate3d(0,"+oVal+"px,0)","-webkit-transform":"translate3d(0,"+oVal+"px,0)","-ms-transform":"translate3d(0,"+oVal+"px,0)","-o-transform":"translate3d(0,"+oVal+"px,0)"})},checkScrollForTransparentNavbar:debounce(function(){$(document).scrollTop()>scroll_distance?materialKit.misc.transparent&&(materialKit.misc.transparent=!1,$(".navbar-color-on-scroll").removeClass("navbar-transparent")):materialKit.misc.transparent||(materialKit.misc.transparent=!0,$(".navbar-color-on-scroll").addClass("navbar-transparent"))},17)};var BrowserDetect={init:function(){this.browser=this.searchString(this.dataBrowser)||"Other",this.version=this.searchVersion(navigator.userAgent)||this.searchVersion(navigator.appVersion)||"Unknown"},searchString:function(e){for(var r=0;r<e.length;r++){var a=e[r].string;if(this.versionSearchString=e[r].subString,-1!==a.indexOf(e[r].subString))return e[r].identity}},searchVersion:function(e){var r=e.indexOf(this.versionSearchString);if(-1!==r){var a=e.indexOf("rv:");return"Trident"===this.versionSearchString&&-1!==a?parseFloat(e.substring(a+3)):parseFloat(e.substring(r+this.versionSearchString.length+1))}},dataBrowser:[{string:navigator.userAgent,subString:"Chrome",identity:"Chrome"},{string:navigator.userAgent,subString:"MSIE",identity:"Explorer"},{string:navigator.userAgent,subString:"Trident",identity:"Explorer"},{string:navigator.userAgent,subString:"Firefox",identity:"Firefox"},{string:navigator.userAgent,subString:"Safari",identity:"Safari"},{string:navigator.userAgent,subString:"Opera",identity:"Opera"}]},better_browser='<div class="container"><div class="better-browser row"><div class="col-md-2"></div><div class="col-md-8"><h3>We are sorry but it looks like your Browser doesn\'t support our website Features. In order to get the full experience please download a new version of your favourite browser.</h3></div><div class="col-md-2"></div><br><div class="col-md-4"><a href="https://www.mozilla.org/ro/firefox/new/" class="btn btn-warning">Mozilla</a><br></div><div class="col-md-4"><a href="https://www.google.com/chrome/browser/desktop/index.html" class="btn ">Chrome</a><br></div><div class="col-md-4"><a href="http://windows.microsoft.com/en-us/internet-explorer/ie-11-worldwide-languages" class="btn">Internet Explorer</a><br></div><br><br><h4>Thank you!</h4></div></div>';
+//# sourceMappingURL=_site_kit_free/assets/js/kit-free.js.map

resources/theme/material-kit/assets/js/plugins/jquery.sharrre.js

@@ -0,0 +1,619 @@
+/*!
+ *  Sharrre.com - Make your sharing widget!
+ *  Version: beta 1.3.5
+ *  Author: Julien Hany
+ *  License: MIT http://en.wikipedia.org/wiki/MIT_License or GPLv2 http://en.wikipedia.org/wiki/GNU_General_Public_License
+ */
+
+;
+(function($, window, document, undefined) {
+
+  /* Defaults
+  ================================================== */
+  var pluginName = 'sharrre',
+    defaults = {
+      className: 'sharrre',
+      share: {
+        googlePlus: false,
+        facebook: false,
+        twitter: false,
+        digg: false,
+        delicious: false,
+        stumbleupon: false,
+        linkedin: false,
+        pinterest: false
+      },
+      shareTotal: 0,
+      template: '',
+      title: '',
+      url: document.location.href,
+      text: document.title,
+      urlCurl: 'sharrre.php', //PHP script for google plus...
+      count: {}, //counter by social network
+      total: 0, //total of sharing
+      shorterTotal: true, //show total by k or M when number is to big
+      enableHover: true, //disable if you want to personalize hover event with callback
+      enableCounter: true, //disable if you just want use buttons
+      enableTracking: false, //tracking with google analitycs
+      hover: function() {}, //personalize hover event with this callback function
+      hide: function() {}, //personalize hide event with this callback function
+      click: function() {}, //personalize click event with this callback function
+      render: function() {}, //personalize render event with this callback function
+      buttons: { //settings for buttons
+        googlePlus: { //http://www.google.com/webmasters/+1/button/
+          url: '', //if you need to personnalize button url
+          urlCount: false, //if you want to use personnalize button url on global counter
+          size: 'medium',
+          lang: 'en-US',
+          annotation: ''
+        },
+        facebook: { //http://developers.facebook.com/docs/reference/plugins/like/
+          url: '', //if you need to personalize url button
+          urlCount: false, //if you want to use personnalize button url on global counter
+          action: 'like',
+          layout: 'button_count',
+          width: '',
+          send: 'false',
+          faces: 'false',
+          colorscheme: '',
+          font: '',
+          lang: 'en_US'
+        },
+        twitter: { //http://twitter.com/about/resources/tweetbutton
+          url: '', //if you need to personalize url button
+          urlCount: false, //if you want to use personnalize button url on global counter
+          count: 'horizontal',
+          hashtags: '',
+          via: '',
+          related: '',
+          lang: 'en'
+        },
+        digg: { //http://about.digg.com/downloads/button/smart
+          url: '', //if you need to personalize url button
+          urlCount: false, //if you want to use personnalize button url on global counter
+          type: 'DiggCompact'
+        },
+        delicious: {
+          url: '', //if you need to personalize url button
+          urlCount: false, //if you want to use personnalize button url on global counter
+          size: 'medium' //medium or tall
+        },
+        stumbleupon: { //http://www.stumbleupon.com/badges/
+          url: '', //if you need to personalize url button
+          urlCount: false, //if you want to use personnalize button url on global counter
+          layout: '1'
+        },
+        linkedin: { //http://developer.linkedin.com/plugins/share-button
+          url: '', //if you need to personalize url button
+          urlCount: false, //if you want to use personnalize button url on global counter
+          counter: ''
+        },
+        pinterest: { //http://pinterest.com/about/goodies/
+          url: '', //if you need to personalize url button
+          media: '',
+          description: '',
+          layout: 'horizontal'
+        }
+      }
+    },
+    /* Json URL to get count number
+    ================================================== */
+    urlJson = {
+      googlePlus: "",
+
+      //new FQL method by Sire
+      facebook: "https://graph.facebook.com/fql?q=SELECT%20url,%20normalized_url,%20share_count,%20like_count,%20comment_count,%20total_count,commentsbox_count,%20comments_fbid,%20click_count%20FROM%20link_stat%20WHERE%20url=%27{url}%27&callback=?",
+      //old method facebook: "http://graph.facebook.com/?id={url}&callback=?",
+      //facebook : "http://api.ak.facebook.com/restserver.php?v=1.0&method=links.getStats&urls={url}&format=json"
+
+      twitter: "http://cdn.api.twitter.com/1/urls/count.json?url={url}&callback=?",
+      digg: "http://services.digg.com/2.0/story.getInfo?links={url}&type=javascript&callback=?",
+      delicious: 'http://feeds.delicious.com/v2/json/urlinfo/data?url={url}&callback=?',
+      //stumbleupon: "http://www.stumbleupon.com/services/1.01/badge.getinfo?url={url}&format=jsonp&callback=?",
+      stumbleupon: "",
+      linkedin: "http://www.linkedin.com/countserv/count/share?format=jsonp&url={url}&callback=?",
+      pinterest: "http://api.pinterest.com/v1/urls/count.json?url={url}&callback=?"
+    },
+    /* Load share buttons asynchronously
+    ================================================== */
+    loadButton = {
+      googlePlus: function(self) {
+        var sett = self.options.buttons.googlePlus;
+        //$(self.element).find('.buttons').append('<div class="button googleplus"><g:plusone size="'+self.options.buttons.googlePlus.size+'" href="'+self.options.url+'"></g:plusone></div>');
+        $(self.element).find('.buttons').append('<div class="button googleplus"><div class="g-plusone" data-size="' + sett.size + '" data-href="' + (sett.url !== '' ? sett.url : self.options.url) + '" data-annotation="' + sett.annotation + '"></div></div>');
+        window.___gcfg = {
+          lang: self.options.buttons.googlePlus.lang
+        };
+        var loading = 0;
+        if (typeof gapi === 'undefined' && loading == 0) {
+          loading = 1;
+          (function() {
+            var po = document.createElement('script');
+            po.type = 'text/javascript';
+            po.async = true;
+            po.src = '//apis.google.com/js/plusone.js';
+            var s = document.getElementsByTagName('script')[0];
+            s.parentNode.insertBefore(po, s);
+          })();
+        } else {
+          gapi.plusone.go();
+        }
+      },
+      facebook: function(self) {
+        var sett = self.options.buttons.facebook;
+        $(self.element).find('.buttons').append('<div class="button facebook"><div id="fb-root"></div><div class="fb-like" data-href="' + (sett.url !== '' ? sett.url : self.options.url) + '" data-send="' + sett.send + '" data-layout="' + sett.layout + '" data-width="' + sett.width + '" data-show-faces="' + sett.faces + '" data-action="' + sett.action + '" data-colorscheme="' + sett.colorscheme + '" data-font="' + sett.font + '" data-via="' + sett.via + '"></div></div>');
+        var loading = 0;
+        if (typeof FB === 'undefined' && loading == 0) {
+          loading = 1;
+          (function(d, s, id) {
+            var js, fjs = d.getElementsByTagName(s)[0];
+            if (d.getElementById(id)) {
+              return;
+            }
+            js = d.createElement(s);
+            js.id = id;
+            js.src = '//connect.facebook.net/' + sett.lang + '/all.js#xfbml=1';
+            fjs.parentNode.insertBefore(js, fjs);
+          }(document, 'script', 'facebook-jssdk'));
+        } else {
+          FB.XFBML.parse();
+        }
+      },
+      twitter: function(self) {
+        var sett = self.options.buttons.twitter;
+        $(self.element).find('.buttons').append('<div class="button twitter"><a href="https://twitter.com/share" class="twitter-share-button" data-url="' + (sett.url !== '' ? sett.url : self.options.url) + '" data-count="' + sett.count + '" data-text="' + self.options.text + '" data-via="' + sett.via + '" data-hashtags="' + sett.hashtags + '" data-related="' + sett.related + '" data-lang="' + sett.lang + '">Tweet</a></div>');
+        var loading = 0;
+        if (typeof twttr === 'undefined' && loading == 0) {
+          loading = 1;
+          (function() {
+            var twitterScriptTag = document.createElement('script');
+            twitterScriptTag.type = 'text/javascript';
+            twitterScriptTag.async = true;
+            twitterScriptTag.src = '//platform.twitter.com/widgets.js';
+            var s = document.getElementsByTagName('script')[0];
+            s.parentNode.insertBefore(twitterScriptTag, s);
+          })();
+        } else {
+          $.ajax({
+            url: '//platform.twitter.com/widgets.js',
+            dataType: 'script',
+            cache: true
+          }); //http://stackoverflow.com/q/6536108
+        }
+      },
+      digg: function(self) {
+        var sett = self.options.buttons.digg;
+        $(self.element).find('.buttons').append('<div class="button digg"><a class="DiggThisButton ' + sett.type + '" rel="nofollow external" href="http://digg.com/submit?url=' + encodeURIComponent((sett.url !== '' ? sett.url : self.options.url)) + '"></a></div>');
+        var loading = 0;
+        if (typeof __DBW === 'undefined' && loading == 0) {
+          loading = 1;
+          (function() {
+            var s = document.createElement('SCRIPT'),
+              s1 = document.getElementsByTagName('SCRIPT')[0];
+            s.type = 'text/javascript';
+            s.async = true;
+            s.src = '//widgets.digg.com/buttons.js';
+            s1.parentNode.insertBefore(s, s1);
+          })();
+        }
+      },
+      delicious: function(self) {
+        if (self.options.buttons.delicious.size == 'tall') { //tall
+          var css = 'width:50px;',
+            cssCount = 'height:35px;width:50px;font-size:15px;line-height:35px;',
+            cssShare = 'height:18px;line-height:18px;margin-top:3px;';
+        } else { //medium
+          var css = 'width:93px;',
+            cssCount = 'float:right;padding:0 3px;height:20px;width:26px;line-height:20px;',
+            cssShare = 'float:left;height:20px;line-height:20px;';
+        }
+        var count = self.shorterTotal(self.options.count.delicious);
+        if (typeof count === "undefined") {
+          count = 0;
+        }
+        $(self.element).find('.buttons').append(
+          '<div class="button delicious"><div style="' + css + 'font:12px Arial,Helvetica,sans-serif;cursor:pointer;color:#666666;display:inline-block;float:none;height:20px;line-height:normal;margin:0;padding:0;text-indent:0;vertical-align:baseline;">' +
+          '<div style="' + cssCount + 'background-color:#fff;margin-bottom:5px;overflow:hidden;text-align:center;border:1px solid #ccc;border-radius:3px;">' + count + '</div>' +
+          '<div style="' + cssShare + 'display:block;padding:0;text-align:center;text-decoration:none;width:50px;background-color:#7EACEE;border:1px solid #40679C;border-radius:3px;color:#fff;">' +
+          '<img src="http://www.delicious.com/static/img/delicious.small.gif" height="10" width="10" alt="Delicious" /> Add</div></div></div>');
+
+        $(self.element).find('.delicious').on('click', function() {
+          self.openPopup('delicious');
+        });
+      },
+      stumbleupon: function(self) {
+        var sett = self.options.buttons.stumbleupon;
+        $(self.element).find('.buttons').append('<div class="button stumbleupon"><su:badge layout="' + sett.layout + '" location="' + (sett.url !== '' ? sett.url : self.options.url) + '"></su:badge></div>');
+        var loading = 0;
+        if (typeof STMBLPN === 'undefined' && loading == 0) {
+          loading = 1;
+          (function() {
+            var li = document.createElement('script');
+            li.type = 'text/javascript';
+            li.async = true;
+            li.src = '//platform.stumbleupon.com/1/widgets.js';
+            var s = document.getElementsByTagName('script')[0];
+            s.parentNode.insertBefore(li, s);
+          })();
+          s = window.setTimeout(function() {
+            if (typeof STMBLPN !== 'undefined') {
+              STMBLPN.processWidgets();
+              clearInterval(s);
+            }
+          }, 500);
+        } else {
+          STMBLPN.processWidgets();
+        }
+      },
+      linkedin: function(self) {
+        var sett = self.options.buttons.linkedin;
+        $(self.element).find('.buttons').append('<div class="button linkedin"><script type="in/share" data-url="' + (sett.url !== '' ? sett.url : self.options.url) + '" data-counter="' + sett.counter + '"></script></div>');
+        var loading = 0;
+        if (typeof window.IN === 'undefined' && loading == 0) {
+          loading = 1;
+          (function() {
+            var li = document.createElement('script');
+            li.type = 'text/javascript';
+            li.async = true;
+            li.src = '//platform.linkedin.com/in.js';
+            var s = document.getElementsByTagName('script')[0];
+            s.parentNode.insertBefore(li, s);
+          })();
+        } else {
+          window.IN.init();
+        }
+      },
+      pinterest: function(self) {
+        var sett = self.options.buttons.pinterest;
+        $(self.element).find('.buttons').append('<div class="button pinterest"><a href="http://pinterest.com/pin/create/button/?url=' + (sett.url !== '' ? sett.url : self.options.url) + '&media=' + sett.media + '&description=' + sett.description + '" class="pin-it-button" count-layout="' + sett.layout + '">Pin It</a></div>');
+
+        (function() {
+          var li = document.createElement('script');
+          li.type = 'text/javascript';
+          li.async = true;
+          li.src = '//assets.pinterest.com/js/pinit.js';
+          var s = document.getElementsByTagName('script')[0];
+          s.parentNode.insertBefore(li, s);
+        })();
+      }
+    },
+    /* Tracking for Google Analytics
+    ================================================== */
+    tracking = {
+      googlePlus: function() {},
+      facebook: function() {
+        //console.log('facebook');
+        fb = window.setInterval(function() {
+          if (typeof FB !== 'undefined') {
+            FB.Event.subscribe('edge.create', function(targetUrl) {
+              _gaq.push(['_trackSocial', 'facebook', 'like', targetUrl]);
+            });
+            FB.Event.subscribe('edge.remove', function(targetUrl) {
+              _gaq.push(['_trackSocial', 'facebook', 'unlike', targetUrl]);
+            });
+            FB.Event.subscribe('message.send', function(targetUrl) {
+              _gaq.push(['_trackSocial', 'facebook', 'send', targetUrl]);
+            });
+            //console.log('ok');
+            clearInterval(fb);
+          }
+        }, 1000);
+      },
+      twitter: function() {
+        //console.log('twitter');
+        tw = window.setInterval(function() {
+          if (typeof twttr !== 'undefined') {
+            twttr.events.bind('tweet', function(event) {
+              if (event) {
+                _gaq.push(['_trackSocial', 'twitter', 'tweet']);
+              }
+            });
+            //console.log('ok');
+            clearInterval(tw);
+          }
+        }, 1000);
+      },
+      digg: function() {
+        //if somenone find a solution, mail me !
+        /*$(this.element).find('.digg').on('click', function(){
+          _gaq.push(['_trackSocial', 'digg', 'add']);
+        });*/
+      },
+      delicious: function() {},
+      stumbleupon: function() {},
+      linkedin: function() {
+        function LinkedInShare() {
+          _gaq.push(['_trackSocial', 'linkedin', 'share']);
+        }
+      },
+      pinterest: function() {
+        //if somenone find a solution, mail me !
+      }
+    },
+    /* Popup for each social network
+    ================================================== */
+    popup = {
+      googlePlus: function(opt) {
+        window.open("https://plus.google.com/share?hl=" + opt.buttons.googlePlus.lang + "&url=" + encodeURIComponent((opt.buttons.googlePlus.url !== '' ? opt.buttons.googlePlus.url : opt.url)), "", "toolbar=0, status=0, width=900, height=500");
+      },
+      facebook: function(opt) {
+        window.open("http://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent((opt.buttons.facebook.url !== '' ? opt.buttons.facebook.url : opt.url)) + "&t=" + opt.text + "", "", "toolbar=0, status=0, width=900, height=500");
+      },
+      twitter: function(opt) {
+        window.open("https://twitter.com/intent/tweet?text=" + encodeURIComponent(opt.text) + "&url=" + encodeURIComponent((opt.buttons.twitter.url !== '' ? opt.buttons.twitter.url : opt.url)) + (opt.buttons.twitter.via !== '' ? '&via=' + opt.buttons.twitter.via : ''), "", "toolbar=0, status=0, width=650, height=360");
+      },
+      digg: function(opt) {
+        window.open("http://digg.com/tools/diggthis/submit?url=" + encodeURIComponent((opt.buttons.digg.url !== '' ? opt.buttons.digg.url : opt.url)) + "&title=" + opt.text + "&related=true&style=true", "", "toolbar=0, status=0, width=650, height=360");
+      },
+      delicious: function(opt) {
+        window.open('http://www.delicious.com/save?v=5&noui&jump=close&url=' + encodeURIComponent((opt.buttons.delicious.url !== '' ? opt.buttons.delicious.url : opt.url)) + '&title=' + opt.text, 'delicious', 'toolbar=no,width=550,height=550');
+      },
+      stumbleupon: function(opt) {
+        window.open('http://www.stumbleupon.com/badge/?url=' + encodeURIComponent((opt.buttons.stumbleupon.url !== '' ? opt.buttons.stumbleupon.url : opt.url)), 'stumbleupon', 'toolbar=no,width=550,height=550');
+      },
+      linkedin: function(opt) {
+        window.open('https://www.linkedin.com/cws/share?url=' + encodeURIComponent((opt.buttons.linkedin.url !== '' ? opt.buttons.linkedin.url : opt.url)) + '&token=&isFramed=true', 'linkedin', 'toolbar=no,width=550,height=550');
+      },
+      pinterest: function(opt) {
+        window.open('http://pinterest.com/pin/create/button/?url=' + encodeURIComponent((opt.buttons.pinterest.url !== '' ? opt.buttons.pinterest.url : opt.url)) + '&media=' + encodeURIComponent(opt.buttons.pinterest.media) + '&description=' + opt.buttons.pinterest.description, 'pinterest', 'toolbar=no,width=700,height=300');
+      }
+    };
+
+  /* Plugin constructor
+  ================================================== */
+  function Plugin(element, options) {
+    this.element = element;
+
+    this.options = $.extend(true, {}, defaults, options);
+    this.options.share = options.share; //simple solution to allow order of buttons
+
+    this._defaults = defaults;
+    this._name = pluginName;
+
+    this.init();
+  };
+
+  /* Initialization method
+  ================================================== */
+  Plugin.prototype.init = function() {
+    var self = this;
+    if (this.options.urlCurl !== '') {
+      urlJson.googlePlus = this.options.urlCurl + '?url={url}&type=googlePlus'; // PHP script for GooglePlus...
+      urlJson.stumbleupon = this.options.urlCurl + '?url={url}&type=stumbleupon'; // PHP script for Stumbleupon...
+    }
+    $(this.element).addClass(this.options.className); //add class
+
+    //HTML5 Custom data
+    if (typeof $(this.element).data('title') !== 'undefined') {
+      this.options.title = $(this.element).attr('data-title');
+    }
+    if (typeof $(this.element).data('url') !== 'undefined') {
+      this.options.url = $(this.element).data('url');
+    }
+    if (typeof $(this.element).data('text') !== 'undefined') {
+      this.options.text = $(this.element).data('text');
+    }
+
+    //how many social website have been selected
+    $.each(this.options.share, function(name, val) {
+      if (val === true) {
+        self.options.shareTotal++;
+      }
+    });
+
+    if (self.options.enableCounter === true) { //if for some reason you don't need counter
+      //get count of social share that have been selected
+      $.each(this.options.share, function(name, val) {
+        if (val === true) {
+          //self.getSocialJson(name);
+          try {
+            self.getSocialJson(name);
+          } catch (e) {}
+        }
+      });
+    } else if (self.options.template !== '') { //for personalized button (with template)
+      this.options.render(this, this.options);
+    } else { // if you want to use official button like example 3 or 5
+      this.loadButtons();
+    }
+
+    //add hover event
+    $(this.element).hover(function() {
+      //load social button if enable and 1 time
+      if ($(this).find('.buttons').length === 0 && self.options.enableHover === true) {
+        self.loadButtons();
+      }
+      self.options.hover(self, self.options);
+    }, function() {
+      self.options.hide(self, self.options);
+    });
+
+    //click event
+    $(this.element).click(function() {
+      self.options.click(self, self.options);
+      return false;
+    });
+  };
+
+  /* loadButtons methode
+  ================================================== */
+  Plugin.prototype.loadButtons = function() {
+    var self = this;
+    $(this.element).append('<div class="buttons"></div>');
+    $.each(self.options.share, function(name, val) {
+      if (val == true) {
+        loadButton[name](self);
+        if (self.options.enableTracking === true) { //add tracking
+          tracking[name]();
+        }
+      }
+    });
+  };
+
+  /* getSocialJson methode
+  ================================================== */
+  Plugin.prototype.getSocialJson = function(name) {
+    var self = this,
+      count = 0,
+      url = urlJson[name].replace('{url}', encodeURIComponent(this.options.url));
+    if (this.options.buttons[name].urlCount === true && this.options.buttons[name].url !== '') {
+      url = urlJson[name].replace('{url}', this.options.buttons[name].url);
+    }
+    //console.log('name : ' + name + ' - url : '+url); //debug
+    if (url != '' && self.options.urlCurl !== '') { //urlCurl = '' if you don't want to used PHP script but used social button
+      $.getJSON(url, function(json) {
+          if (typeof json.count !== "undefined") { //GooglePlus, Stumbleupon, Twitter, Pinterest and Digg
+            var temp = json.count + '';
+            temp = temp.replace('\u00c2\u00a0', ''); //remove google plus special chars
+            count += parseInt(temp, 10);
+          }
+          //get the FB total count (shares, likes and more)
+          else if (json.data && json.data.length > 0 && typeof json.data[0].total_count !== "undefined") { //Facebook total count
+            count += parseInt(json.data[0].total_count, 10);
+          } else if (typeof json[0] !== "undefined") { //Delicious
+            count += parseInt(json[0].total_posts, 10);
+          } else if (typeof json[0] !== "undefined") { //Stumbleupon
+          }
+          self.options.count[name] = count;
+          self.options.total += count;
+          self.renderer();
+          self.rendererPerso();
+          //console.log(json); //debug
+        })
+        .error(function() {
+          self.options.count[name] = 0;
+          self.rendererPerso();
+        });
+    } else {
+      self.renderer();
+      self.options.count[name] = 0;
+      self.rendererPerso();
+    }
+  };
+
+  /* launch render methode
+  ================================================== */
+  Plugin.prototype.rendererPerso = function() {
+    //check if this is the last social website to launch render
+    var shareCount = 0;
+    for (e in this.options.count) {
+      shareCount++;
+    }
+    if (shareCount === this.options.shareTotal) {
+      this.options.render(this, this.options);
+    }
+  };
+
+  /* render methode
+  ================================================== */
+  Plugin.prototype.renderer = function() {
+    var total = this.options.total,
+      template = this.options.template;
+    if (this.options.shorterTotal === true) { //format number like 1.2k or 5M
+      total = this.shorterTotal(total);
+    }
+
+    if (template !== '') { //if there is a template
+      template = template.replace('{total}', total);
+      $(this.element).html(template);
+    } else { //template by defaults
+      $(this.element).html(
+        '<div class="box"><a class="count" href="#">' + total + '</a>' +
+        (this.options.title !== '' ? '<a class="share" href="#">' + this.options.title + '</a>' : '') +
+        '</div>'
+      );
+    }
+  };
+
+  /* format total numbers like 1.2k or 5M
+  ================================================== */
+  Plugin.prototype.shorterTotal = function(num) {
+    if (num >= 1e6) {
+      num = (num / 1e6).toFixed(2) + "M"
+    } else if (num >= 1e3) {
+      num = (num / 1e3).toFixed(1) + "k"
+    }
+    return num;
+  };
+
+  /* Methode for open popup
+  ================================================== */
+  Plugin.prototype.openPopup = function(site) {
+    popup[site](this.options); //open
+    if (this.options.enableTracking === true) { //tracking!
+      var tracking = {
+        googlePlus: {
+          site: 'Google',
+          action: '+1'
+        },
+        facebook: {
+          site: 'facebook',
+          action: 'like'
+        },
+        twitter: {
+          site: 'twitter',
+          action: 'tweet'
+        },
+        digg: {
+          site: 'digg',
+          action: 'add'
+        },
+        delicious: {
+          site: 'delicious',
+          action: 'add'
+        },
+        stumbleupon: {
+          site: 'stumbleupon',
+          action: 'add'
+        },
+        linkedin: {
+          site: 'linkedin',
+          action: 'share'
+        },
+        pinterest: {
+          site: 'pinterest',
+          action: 'pin'
+        }
+      };
+      _gaq.push(['_trackSocial', tracking[site].site, tracking[site].action]);
+    }
+  };
+
+  /* Methode for add +1 to a counter
+  ================================================== */
+  Plugin.prototype.simulateClick = function() {
+    var html = $(this.element).html();
+    $(this.element).html(html.replace(this.options.total, this.options.total + 1));
+  };
+
+  /* Methode for add +1 to a counter
+  ================================================== */
+  Plugin.prototype.update = function(url, text) {
+    if (url !== '') {
+      this.options.url = url;
+    }
+    if (text !== '') {
+      this.options.text = text;
+    }
+  };
+
+  /* A really lightweight plugin wrapper around the constructor, preventing against multiple instantiations
+  ================================================== */
+  $.fn[pluginName] = function(options) {
+    var args = arguments;
+    if (options === undefined || typeof options === 'object') {
+      return this.each(function() {
+        if (!$.data(this, 'plugin_' + pluginName)) {
+          $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
+        }
+      });
+    } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
+      return this.each(function() {
+        var instance = $.data(this, 'plugin_' + pluginName);
+        if (instance instanceof Plugin && typeof instance[options] === 'function') {
+          instance[options].apply(instance, Array.prototype.slice.call(args, 1));
+        }
+      });
+    }
+  };
+})(jQuery, window, document);

resources/theme/material-kit/assets/scss/material-kit.scss

@@ -0,0 +1,66 @@
+ //
+ // =========================================================
+ // * Material Kit - v2.0.5
+ // =========================================================
+ //
+ // * Product Page: https://www.creative-tim.com/product/material-kit
+ // * Copyright 2019 Creative Tim (http://www.creative-tim.com)
+ //   Licensed under MIT (https://github.com/creativetimofficial/material-kit/blob/master/LICENSE.md)
+ //
+ //
+ // =========================================================
+ //
+ // * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+
+ @import "material-kit/variables";
+ @import "material-kit/mixins";
+ @import "material-kit/core-bootstrap";
+ @import "material-kit/reboot";
+
+ // Core Components
+ @import "material-kit/layout";
+ @import "material-kit/buttons";
+ @import "material-kit/misc";
+ @import "material-kit/checkboxes";
+ @import "material-kit/custom-forms";
+ @import "material-kit/switches";
+ @import "material-kit/radios";
+ @import "material-kit/carousel";
+ @import "material-kit/forms";
+ @import "material-kit/input-group";
+ @import "material-kit/list-group";
+ @import "material-kit/nav";
+ @import "material-kit/images";
+ @import "material-kit/navbar";
+ @import "material-kit/badges";
+ @import "material-kit/alerts";
+ @import "material-kit/pagination";
+ @import "material-kit/pills";
+ @import "material-kit/info-areas";
+ @import "material-kit/type";
+ @import "material-kit/tabs";
+ @import "material-kit/tooltip";
+ @import "material-kit/popover";
+ @import "material-kit/modal";
+ @import "material-kit/dropdown";
+ @import "material-kit/drawer";
+ @import "material-kit/progress";
+ @import "material-kit/togglebutton";
+ @import "material-kit/ripples";
+ @import "material-kit/headers";
+ @import "material-kit/footers";
+
+ // Cards
+ @import 'material-kit/cards';
+ //@import 'material-kit/cards/card-carousel';
+ @import 'material-kit/cards/card-login';
+ @import 'material-kit/cards/card-plain';
+
+ // Core Plugins
+ @import 'material-kit/plugins/plugin-datetime-picker';
+ @import 'material-kit/plugins/plugin-nouislider';
+
+ // Sections and Example pages
+ @import "material-kit/example-pages";
+ @import "material-kit/responsive";

resources/theme/material-kit/assets/scss/material-kit/_alerts.scss

@@ -0,0 +1,53 @@
+.alert {
+    border: 0;
+    border-radius: 0;
+
+    padding: 20px 15px;
+    line-height: 20px;
+
+    //@include shadow-z-2();
+
+    b{
+        font-weight: $font-weight-bold;
+        text-transform: uppercase;
+        font-size: $font-size-small;
+    }
+    // SASS conversion note: please mirror any content change in _mixins-shared.scss alert-variations-content
+    @include alert-variations(unquote(".alert"), unquote(""), $mdb-text-color-light);
+
+    &-info, &-danger, &-warning, &-success {
+        color: $mdb-text-color-light;
+    }
+
+    &-default {
+        a, .alert-link {
+            color: $mdb-text-color-primary;
+        }
+    }
+
+    .alert-icon{
+        display: block;
+        float: left;
+        margin-right: $margin-base;
+
+        i{
+            margin-top: -7px;
+            top: 5px;
+            position: relative;
+        }
+    }
+    .close{
+        color: $white-color;
+        text-shadow: none;
+        opacity: .9;
+
+        i{
+            font-size: 20px;
+        }
+
+        &:hover,
+        &:focus{
+            opacity: 1;
+        }
+    }
+}

resources/theme/material-kit/assets/scss/material-kit/_badges.scss

@@ -0,0 +1,43 @@
+.badge {
+    padding: 5px 12px;
+    text-transform: uppercase;
+    font-size: 10px;
+    color: $white-color;
+
+    @include badge-color();
+}
+
+.badge-default[href]:hover,
+.badge-default[href]:focus {
+  background-color: darken($brand-default, 5%);
+}
+
+.badge-primary[href]:hover,
+.badge-primary[href]:focus {
+  background-color: darken($brand-primary, 5%);
+}
+
+.badge-info[href]:hover,
+.badge-info[href]:focus {
+  background-color: darken($brand-info, 5%);
+}
+
+.badge-success[href]:hover,
+.badge-success[href]:focus {
+  background-color: darken($brand-success, 5%);
+}
+
+.badge-warning[href]:hover,
+.badge-warning[href]:focus {
+  background-color: darken($brand-warning, 5%);
+  color: $white-color;
+}
+
+.badge-danger[href]:hover,
+.badge-danger[href]:focus {
+  background-color: darken($brand-danger, 5%);
+}
+.badge-rose[href]:hover,
+.badge-rose[href]:focus {
+  background-color: darken($brand-rose, 5%);
+}

resources/theme/material-kit/assets/scss/material-kit/_buttons.scss

@@ -0,0 +1,228 @@
+.btn{
+  position: relative;
+  padding: 12px 30px;
+  margin: $bmd-btn-margin-bottom 1px;
+  font-size: .75rem; //  12px
+  font-weight: 400;
+  line-height: $bmd-line-height;
+  text-decoration: none;
+  text-transform: uppercase;
+  letter-spacing: 0;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  border-radius: $border-radius-sm;
+  outline: 0;
+  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: box-shadow, transform;
+  @include undo-bs-tab-focus();
+
+  //--
+  // Colors
+  @include bmd-raised-button-color();
+  &.btn-white {
+      &,
+      &:focus,
+      &:hover {
+          background-color: $white-color;
+          color: $gray-color;
+      }
+      &.btn-link {
+          color: $white-color;
+          background: transparent;
+          box-shadow: none;
+      }
+  }
+  &.btn-link:hover,
+  &.btn-link:focus,
+  &.btn-link:active {
+      text-decoration: none !important;
+  }
+
+  &.btn-disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+
+    &:hover {
+      box-shadow: none;
+    }
+  }
+
+  @include hover-focus();
+
+  //---
+  // btn-raised
+  &.btn-raised,
+  .btn-group-raised & {
+    // baseline shadow
+    // @include box-shadow($bmd-shadow-2dp);
+
+    // reverse any of the above for links
+    &.btn-link {
+      box-shadow: none;
+      @include bmd-hover-focus-active() {
+        box-shadow: none;
+      }
+    }
+
+    @include bmd-disabled() {
+      box-shadow: none;
+    }
+  }
+
+  //---
+  // btn-outline
+  @include bmd-outline-button-color();
+
+  // Size variations
+  &.btn-lg,
+  .btn-group-lg & {
+    @include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $bmd-btn-font-size, $btn-lg-line-height, $border-radius-sm);
+  }
+  &.btn-sm,
+  .btn-group-sm & {
+    @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $bmd-btn-font-size-sm, $line-height-sm, $border-radius-sm);
+  }
+
+  &.btn-round {
+    border-radius: $border-radius-extreme;
+  }
+
+  &.btn-fab,
+  &.btn-just-icon {
+      // see above for color variations
+      font-size: $mdb-btn-fab-font-size;
+      height: $mdb-btn-fab-size;
+      min-width: $mdb-btn-fab-size;
+      width: $mdb-btn-fab-size;
+      // margin: auto;
+      padding: 0;
+      overflow: hidden;
+      position: relative;
+      line-height: $mdb-btn-fab-size;
+
+        &.btn-round{
+            border-radius: 50%;
+        }
+
+      .btn-group-sm &,
+      &.btn-sm,
+      &.btn-fab-mini{
+          height: $mdb-btn-fab-size-mini + 1;
+          min-width: $mdb-btn-fab-size-mini + 1;
+          width: $mdb-btn-fab-size-mini + 1;
+
+          .material-icons,
+          .fa{
+              font-size: $mdb-btn-icon-size-mini;
+              line-height: $mdb-btn-fab-size-mini;
+          }
+      }
+
+      .btn-group-lg &,
+      &.btn-lg{
+          height: $mdb-btn-fab-size-lg + 1;
+          min-width: $mdb-btn-fab-size-lg + 1;
+          width: $mdb-btn-fab-size-lg + 1;
+          line-height: $mdb-btn-fab-size-lg;
+
+          .material-icons,
+          .fa{
+              font-size: $mdb-btn-icon-size;
+              line-height: $mdb-btn-fab-size-lg;
+          }
+      }
+
+      .material-icons,
+      .fa {
+        margin-top: 0;
+        position: absolute;
+        width: 100%;
+        transform: none;
+        left: 0;
+        top: 0;
+        height: 100%;
+
+        line-height: $mdb-btn-fab-size;
+        font-size: $mdb-btn-just-icon-font-size;
+      }
+  }
+}
+
+.btn-just-icon{
+    &.btn-lg{
+        font-size: $mdb-btn-fab-font-size;
+        height: $mdb-btn-fab-size;
+        min-width: $mdb-btn-fab-size;
+        width: $mdb-btn-fab-size;
+    }
+}
+
+.input-group-btn > .btn{
+    border: 0;
+}
+
+
+// Align icons inside buttons with text
+.btn .material-icons,
+.btn:not(.btn-just-icon):not(.btn-fab) .fa{
+      position: relative;
+      display: inline-block;
+      top: 0;
+      margin-top: -1em;
+      margin-bottom: -1em;
+      font-size: 1.1rem;
+      vertical-align: middle;
+    }
+
+// Disabled buttons and button groups
+.btn,
+.input-group-btn .btn,
+.btn-group,
+.btn-group-vertical {
+  // have to ratchet up the specificity to kill drop shadows on disabled raised buttons
+  @include bmd-disabled() {
+    .bg-inverse & {
+      color: $bmd-inverse-btn-disabled;
+    }
+
+    // flat buttons shouldn't lose transparency on disabled hover/focus
+  }
+}
+
+// btn-group variations
+.btn-group,
+.btn-group-vertical {
+  position: relative;
+  margin: 10px 1px;
+
+  // spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons
+  //&.open {
+  //  .dropdown-toggle {
+  //  }
+  //
+  //  > .dropdown-toggle.btn {
+  //    @include bmd-raised-button-color-bg();
+  //  }
+  //}
+
+  .dropdown-menu {
+    border-radius: 0 0 $border-radius $border-radius;
+  }
+
+  &.btn-group-raised {
+    @include box-shadow($bmd-shadow-2dp);
+  }
+
+  .btn + .btn,
+  .btn,
+  .btn:active,
+  .btn-group {
+    margin: 0;
+  }
+
+  // remove margin from nested btn-group(s) to properly align them with the outer buttons
+  > .btn-group {
+    margin: 0;
+  }
+}

resources/theme/material-kit/assets/scss/material-kit/_cards.scss

@@ -0,0 +1,327 @@
+//https://www.google.com/design/spec/components/cards.html#cards-content-blocks
+// Card resting elevation: 2dp
+.card {
+  border: 0;
+  margin-bottom: 30px;
+  margin-top: 30px;
+  border-radius: $border-radius-large;
+  color: $gray-dark;
+  background: $white-color;
+  width: 100%;
+
+    .card-category:not([class*="text-"]) {
+      color: $gray-color;
+    }
+    .card-category{
+      margin-top: 10px;
+
+      .material-icons{
+        position: relative;
+        top: 8px;
+        line-height: 0;
+      }
+  }
+
+  .form-check {
+    margin-top: 15px;
+  }
+
+  .card-title{
+    margin-top: 0.625rem;
+
+    &:last-child{
+        margin-bottom: 0;
+    }
+  }
+
+  // Cards have a default elevation of 2dp.
+  @include box-shadow($bmd-shadow-2dp);
+  @extend %std-font;
+
+
+  &.no-shadow {
+    .card-header-image,
+    .card-header-image img {
+      box-shadow: none !important;
+      }
+  }
+
+  .card-body,
+  .card-footer {
+    padding: $padding-card-body-y $padding-card-body-x;
+  }
+
+  .card-body {
+    & + .card-footer{
+      padding-top: 0rem;
+      border: 0;
+      border-radius: $border-radius-large;
+    }
+  }
+
+  .card-footer {
+    display: flex;
+    align-items: center;
+    background-color: transparent;
+    border: 0;
+
+    .author,
+    .stats {
+        display: inline-flex;
+    }
+
+    .stats {
+      color: $gray-color;
+
+      .material-icons {
+        position: relative;
+        top: 3px;
+        margin-right: 3px;
+        margin-left: 3px;
+        font-size: 18px;
+      }
+    }
+  }
+
+  &.bmd-card-raised {
+    // Card raised elevation: 8dp
+    @include box-shadow($bmd-shadow-8dp);
+  }
+
+  @include media-breakpoint-up(lg) {
+    // On desktop, cards can have a resting elevation of 0dp and gain an elevation of 8dp on hover.
+    &.bmd-card-flat {
+      box-shadow: none;
+    }
+  }
+
+    .card-header {
+      border-radius: $border-radius-base;
+      padding: $bmd-label-top-margin-base 15px;
+      margin-left: 15px;
+      margin-right: 15px;
+      margin-top: -30px;
+      border: 0;
+      background: linear-gradient(60deg, $grey-200, $grey-400);
+
+      .title{
+        color: $white-color;
+      }
+
+      &:not([class*="header-"]){
+        @include shadow-big();
+      }
+
+      .nav-tabs {
+        padding: 0;
+      }
+
+      &.card-header-image {
+        position: relative;
+        padding: 0;
+        z-index: 1;
+        margin-left: 15px;
+        margin-right: 15px;
+        margin-top: -30px;
+        border-radius: $border-radius-large;
+
+        a {
+          display: block;
+        }
+
+        img {
+          width: 100%;
+          border-radius: $border-radius-large;
+          pointer-events: none;
+          @include shadow-big-image();
+        }
+        .card-title {
+          position: absolute;
+          bottom: 15px;
+          left: 15px;
+          color: $white-color;
+          font-size: $font-size-h4;
+          text-shadow: 0 2px 5px rgba(33, 33, 33, 0.5);
+        }
+
+        .colored-shadow{
+          transform: scale(0.94);
+          top: 12px;
+          filter: blur(12px);
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          background-size: cover;
+          z-index: -1;
+          transition: opacity .45s;
+          opacity: 0;
+        }
+
+        &.no-shadow{
+          box-shadow: none;
+
+          &.shadow-normal{
+              @include shadow-big();
+          }
+
+          .colored-shadow{
+              display: none !important;
+          }
+        }
+      }
+    }
+
+    .card-header-primary,
+    &.bg-primary,
+    &.card-rotate.bg-primary .front,
+    &.card-rotate.bg-primary .back{
+      background: linear-gradient(60deg, $purple-400, $purple-700);
+    }
+    .card-header-info,
+    &.bg-info,
+    &.card-rotate.bg-info .front,
+    &.card-rotate.bg-info .back{
+      background: linear-gradient(60deg, $cyan-400, $cyan-700);
+    }
+    .card-header-success,
+    &.bg-success,
+    &.card-rotate.bg-success .front,
+    &.card-rotate.bg-success .back{
+      background: linear-gradient(60deg, $green-400, $green-700);
+    }
+    .card-header-warning,
+    &.bg-warning,
+    &.card-rotate.bg-warning .front,
+    &.card-rotate.bg-warning .back{
+      background: linear-gradient(60deg, $orange-400, $orange-700);
+    }
+    .card-header-danger,
+    &.bg-danger,
+    &.card-rotate.bg-danger .front,
+    &.card-rotate.bg-danger .back{
+      background: linear-gradient(60deg, $red-400, $red-700);
+    }
+
+    .card-header-rose,
+    &.bg-rose,
+    &.card-rotate.bg-rose .front,
+    &.card-rotate.bg-rose .back{
+      background: linear-gradient(60deg, $pink-400, $pink-700);
+    }
+
+    .card-header-primary{
+      @include shadow-big-color($brand-primary);
+    }
+    .card-header-danger{
+      @include shadow-big-color($brand-danger);
+    }
+
+    .card-header-rose{
+      @include shadow-big-color($brand-rose);
+    }
+
+    .card-header-warning{
+      @include shadow-big-color($brand-warning);
+    }
+
+    .card-header-info{
+      @include shadow-big-color($brand-info);
+    }
+
+    .card-header-success{
+      @include shadow-big-color($brand-success);
+    }
+
+    [class*="header-"],
+    &[class*="bg-"]{
+      color: $white-color;
+
+      .card-title a,
+      .card-title,
+      .icon i{
+        color: $white-color;
+      }
+
+      .icon i{
+        border-color: rgba(255, 255, 255, 0.25);
+      }
+      .author a,
+      .stats,
+      .card-category,
+      .card-description{
+        color: $white-transparent;
+      }
+
+      .author a{
+        &:hover,
+        &:focus,
+        &:active{
+          color: $white-color;
+        }
+      }
+    }
+
+    .author{
+      .avatar{
+        width: 30px;
+        height: 30px;
+        overflow: hidden;
+        border-radius: 50%;
+        margin-right: 5px;
+      }
+
+      a{
+        color: $black-color;
+        text-decoration: none;
+
+        .ripple-container{
+          display: none;
+        }
+      }
+    }
+
+    .card-category-social{
+      .fa{
+        font-size: 24px;
+        position: relative;
+        margin-top: -4px;
+        top: 2px;
+        margin-right: 5px;
+      }
+
+      .material-icons{
+        position: relative;
+        top: 5px;
+      }
+    }
+
+    &[class*="bg-"],
+    &[class*="bg-"] .card-body{
+      border-radius: $border-radius-large;
+
+      h1,
+      h2,
+      h3{
+        small{
+          color: $white-transparent;
+        }
+      }
+    }
+
+    .card-stats{
+      background: transparent;
+      display: flex;
+
+      .author,
+      .stats{
+        display: inline-flex;
+      }
+    }
+}
+
+// some jss/css to make the cards look a bit better on Internet Explorer
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .card{
+    display: inline-block;
+  }
+}

resources/theme/material-kit/assets/scss/material-kit/_carousel.scss

@@ -0,0 +1,95 @@
+.carousel{
+    .carousel-control{
+        &.left,
+        &.right{
+            background-image: none;
+        }
+
+        &.right{
+            i{
+                right: 0;
+            }
+        }
+    }
+
+    .card{
+        margin-top: 0;
+    }
+
+    .item{
+        text-align: center;
+    }
+    &.carousel-full-nagivation{
+      .carousel-control{
+          width: 50%;
+
+          &.left,
+          &.right{
+              background-image: none;
+          }
+
+          .material-icons,
+          .fa{
+              display: none;
+          }
+      }
+  }
+
+    .carousel-control{
+        height: 15%;
+        margin: auto;
+    }
+
+    .carousel-control-prev,
+    .carousel-control-next{
+        .material-icons{
+            z-index: 5;
+            display: inline-block;
+            font-size: 50px;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            height: 50px;
+            margin: auto;
+        }
+    }
+    .carousel-indicators{
+        bottom: 5px;
+
+        li,
+        .active{
+            margin: 11px 10px;
+        }
+
+        li{
+            display: inline-block;
+            width: 10px;
+            height: 10px;
+            text-indent: -999px;
+            cursor: pointer;
+            border: 1px solid #fff;
+            border-radius: 10px;
+            background: #FFFFFF;
+            @include shadow-2dp();
+            @extend .animation-transition-general;
+            border-radius: $border-radius-small;
+        }
+        .active{
+            margin-top: 10px;
+            @include transform-scale(1.5);
+            @include shadow-4dp();
+        }
+    }
+
+    .carousel-caption{
+        padding-bottom: 45px;
+
+        .material-icons{
+            position: relative;
+            top: 5px;
+        }
+    }
+
+}

resources/theme/material-kit/assets/scss/material-kit/_checkboxes.scss

@@ -0,0 +1,201 @@
+.form-check {
+  margin-bottom: .5rem;
+  padding-left: 0;
+
+    .form-check-label {
+        cursor: pointer;
+        padding-left: 0; // Reset for Bootstrap rule
+        // color: $mdb-checkbox-label-color;
+        @include mdb-label-color-toggle-focus();
+    }
+
+  // Hide native checkbox
+    .form-check-input{
+        opacity: 0;
+        position: absolute;
+        margin: 0;
+        z-index: -1;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+        left: 0;
+        pointer-events: none;
+    }
+
+    .form-check-sign{
+        vertical-align: middle;
+        position: relative;
+        top: -2px;
+        float: left;
+        padding-right: 10px;
+        display: inline-block;
+
+        &:before {
+            display: block;
+            position: absolute;
+            left: 0;
+            content: "";
+            background-color: rgba(0,0,0,.84);
+            height: $mdb-checkbox-size;
+            width: $mdb-checkbox-size;
+            border-radius: 100%;
+            z-index: 1;
+            opacity: 0;
+            margin: 0;
+            top: 0;
+            @include transform-scale3d(unquote('2.3,2.3,1'));
+        }
+
+        .check {
+            position: relative;
+            display: inline-block;
+            width: $mdb-checkbox-size;
+            height: $mdb-checkbox-size;
+            border: 1px solid $mdb-checkbox-border-color;
+            overflow: hidden;
+            z-index: 1;
+            border-radius: $border-radius-base;
+
+            &:before {
+                position: absolute;
+                content: "";
+                transform: rotate(45deg);
+                display: block;
+                margin-top: -3px;
+                margin-left: 7px;
+                width: 0;
+                color: $white-color;
+                height: 0;
+                box-shadow:
+                0 0 0 0,
+                0 0 0 0,
+                0 0 0 0,
+                0 0 0 0,
+                0 0 0 0,
+                0 0 0 0,
+                0 0 0 0 inset;
+                @include animation(checkbox-off $mdb-checkbox-animation-check forwards);
+            }
+        }
+
+    }
+
+    .form-check-input{
+
+        &:focus + .form-check-sign .check:after {
+            opacity: 0.2;
+        }
+
+        &:checked {
+            & + .form-check-sign .check {
+                background: $mdb-checkbox-checked-color;
+            }
+
+            & + .form-check-sign .check:before {
+                color: #FFFFFF;
+                box-shadow: 0 0 0 10px,
+                            10px -10px 0 10px,
+                            32px 0 0 20px,
+                            0px 32px 0 20px,
+                            -5px 5px 0 10px,
+                            20px -12px 0 11px;
+                @include animation(checkbox-on $mdb-checkbox-animation-check forwards);
+            }
+
+            & + .form-check-sign:before {
+            @include animation(rippleOn $mdb-checkbox-animation-ripple);
+            }
+
+            & + .form-check-sign .check:after {
+            //background-color: $brand-success; // FIXME: seems like tho wrong color, test and make sure it can be removed
+            @include animation(rippleOn $mdb-checkbox-animation-ripple forwards);
+            }
+        }
+
+        &:not(:checked) {
+          & + .form-check-sign:before {
+            @include animation(rippleOff $mdb-checkbox-animation-ripple);
+          }
+
+          & + .form-check-sign .check:after {
+            @include animation(rippleOff $mdb-checkbox-animation-ripple); // Ripple effect on uncheck
+
+          }
+        }
+  }
+
+  // Style for disabled inputs
+  fieldset[disabled] &,
+  fieldset[disabled] & .form-check-input,
+  .form-check-input[disabled] ~ .form-check-sign .check,
+  .form-check-input[disabled] + .circle {
+    opacity: 0.5;
+  }
+
+  .form-check-input[disabled] ~ .form-check-sign .check{
+      border-color: #000000;
+      opacity: .26;
+  }
+
+  .form-check-input[disabled] + .form-check-sign .check:after {
+    background-color: $mdb-text-color-primary;
+    transform: rotate(-45deg);
+  }
+
+  .form-check-input[disabled][checked] + .form-check-sign .check{
+      background-color: $black;
+  }
+}
+
+@keyframes checkbox-on {
+  0% {
+    box-shadow:
+      0 0 0 10px,
+      10px -10px 0 10px,
+      32px 0 0 20px,
+      0px 32px 0 20px,
+      -5px 5px 0 10px,
+      15px 2px 0 11px;
+  }
+  50% {
+    box-shadow:
+      0 0 0 10px,
+      10px -10px 0 10px,
+      32px 0 0 20px,
+      0px 32px 0 20px,
+      -5px 5px 0 10px,
+      20px 2px 0 11px;
+  }
+  100% {
+    box-shadow:
+      0 0 0 10px,
+      10px -10px 0 10px,
+      32px 0 0 20px,
+      0px 32px 0 20px,
+      -5px 5px 0 10px,
+      20px -12px 0 11px;
+  }
+}
+
+@keyframes rippleOn {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes rippleOff {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}

resources/theme/material-kit/assets/scss/material-kit/_core-bootstrap.scss

@@ -0,0 +1,66 @@
+// FIXME: only necessary because there isn't an underscored file - see https://github.com/twbs/bootstrap/issues/18350
+//@import "../bower_components/bootstrap/scss/
+//@import "../../bootstrap/scss/
+
+// Core variables and mixins
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+
+// #853 start - https://github.com/twbs/bootstrap/pull/18976/files
+// hack
+@mixin pull-left {
+  float: left !important;
+  @if $enable-flex {
+    margin-right: auto;
+  }
+}
+@mixin pull-right {
+  float: right !important;
+  @if $enable-flex {
+    margin-left: auto;
+  }
+}
+// #853 end - https://github.com/twbs/bootstrap/pull/18976/files
+
+// Reset and dependencies
+@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/print";
+
+// Core CSS
+@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/images";
+@import "bootstrap/scss/code";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/tables";
+@import "bootstrap/scss/forms";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/transitions";
+
+// Components
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/input-group";
+@import "bootstrap/scss/custom-forms";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/card";
+@import "bootstrap/scss/breadcrumb";
+@import "bootstrap/scss/pagination";
+@import "bootstrap/scss/jumbotron";
+@import "bootstrap/scss/alert";
+@import "bootstrap/scss/progress";
+@import "bootstrap/scss/media";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/close";
+@import "bootstrap/scss/badge";
+
+// Components w/ JavaScript
+@import "bootstrap/scss/modal";
+@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/popover";
+@import "bootstrap/scss/carousel";
+
+// Utility classes
+@import "bootstrap/scss/utilities";

resources/theme/material-kit/assets/scss/material-kit/_custom-forms.scss

@@ -0,0 +1,10 @@
+.custom-file-control {
+  // @extend .form-control;
+  // @include bmd-form-color($bmd-label-color, $bmd-label-color-focus, $input-border-color);
+  //
+  // &::before {
+  //   @extend .btn;
+  //   position: absolute;
+  //   height: calc(100% - 1px);
+  // }
+}

resources/theme/material-kit/assets/scss/material-kit/_drawer.scss

@@ -0,0 +1,121 @@
+// Implementation specification in https://github.com/FezVrasta/bootstrap-material-design/issues/822
+
+// Drawer.
+.bmd-layout-drawer {
+  position: absolute;
+  z-index: 5; // over a header and content
+  box-sizing: border-box;
+  display: flex;
+
+  flex-direction: column;
+  flex-wrap: nowrap;
+
+  max-height: 100%;
+  overflow: visible;
+  overflow-y: auto;
+  font-size: .875rem;
+  //color: $bmd-layout-drawer-text-color;
+  //background: $bmd-layout-drawer-bg-color;
+
+  // Transform offscreen.
+  transition: transform;
+  will-change: transform;
+  transform-style: preserve-3d;
+  @include box-shadow($bmd-shadow-2dp);
+  @include material-animation-default();
+
+  > * {
+    flex-shrink: 0;
+  }
+
+  // Placement of common components within the drawer
+  //  You might say this is opinionated - feedback welcome.
+  > header {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    padding: 1rem;
+
+    .navbar-brand {
+      padding-left: 1.5rem;
+      font-size: 1.25rem;
+    }
+  }
+
+  > .list-group {
+    padding-top: 1rem;
+
+    .list-group-item {
+      padding-right: 2.5rem;
+      padding-left: 2.5rem;
+      font-size: .8125rem;
+      font-weight: 500;
+    }
+  }
+}
+
+//----------------
+// Sizing and positioning below here
+
+// for left or right drawers, setup widths, heights and positions
+@include bmd-drawer-x-out($bmd-drawer-x-size);
+
+// for top or bottom drawers, setup widths, heights and positions
+@include bmd-drawer-y-out($bmd-drawer-y-size);
+
+// Marker class for both triggering the opening of the drawer (i.e. javascript #addClass('.bmd-drawer-in')), as well
+//  as responsive sizes (i.e. bmd-drawer-in-md will open once the browser is wider than 768px).
+//
+//
+// bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg
+//  We iterate over the standard grid breakpoints, but we also need styles for the simpler `bmd-drawer-in`
+//  without a size (for triggered openings).  Since the xs size is 0, instead of using `bmd-drawer-in-xs`
+//  (which is mostly meaningless), we create `bmd-drawer-in` meaning always open.
+//
+//  NOTE: bmd-drawer-in-* uses media-breakpoint-up()
+//
+// bmd-drawer-out
+//  A marker class that will _force_ the drawer closed regardless of the responsive class present. If (for some
+//  strange reason) both bmd-drawer-out and bmd-drawer-in are present, it appears that the closed option wins.
+//
+// bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg
+//  We iterate over the standard grid breakpoints, but we also need styles for the simpler `bmd-drawer-overlay`.
+//  Since the xs size is 0, instead of using `bmd-drawer-overlay-xs`, we create `bmd-drawer-overlay` meaning always overlay.
+//
+//  NOTE: bmd-drawer-overlay-* uses media-breakpoint-down() - this is because we usually want a responsive overlay to be used in small screen scenarios.
+//
+
+//
+// Drawer open positioning, and style options (push is default, overlay is optional)
+:not(.bmd-drawer-out) {
+  // first eliminate positioning or sizing rules if the drawer is already forced closed
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    @include bmd-drawer-x-in-up($bmd-drawer-x-size, $breakpoint);
+    @include bmd-drawer-y-in-up($bmd-drawer-y-size, $breakpoint);
+
+    @include bmd-drawer-x-overlay-down($breakpoint);
+    @include bmd-drawer-y-overlay-down($breakpoint);
+  }
+}
+
+////----
+//// Example 1: creates a media responsive kitchen-sink-drawer that pairs with bmd-drawer-in-lg and allows for the bmd-drawer-in trigger
+//.kitchen-sink-drawer {
+//  $custom-size: 500px;
+//  @include bmd-drawer-x-out($custom-size);
+//  &:not(.bmd-drawer-out) {
+//    @each $breakpoint in map-keys($grid-breakpoints) {
+//      @include bmd-drawer-x-in-up($custom-size, $breakpoint);
+//    }
+//  }
+//}
+//
+////
+////----
+//// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for the bmd-drawer-in trigger
+//.kitchen-sink-drawer-static {
+//  $custom-size: 500px;
+//  @include bmd-drawer-x-out($custom-size); // closed by default
+//  @include bmd-drawer-x-in($custom-size); // triggered with bmd-drawer-in
+//  @include bmd-drawer-x-overlay(); // overlay by default, no other classes necessary
+//}

resources/theme/material-kit/assets/scss/material-kit/_dropdown.scss

@@ -0,0 +1,205 @@
+// Menus https://www.google.com/design/spec/components/menus.html#menus-specs
+// Dropdown buttons (mobile and desktop) https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons
+
+.dropdown-menu {
+  display: none;
+  padding: $bmd-dropdown-margin-y 0;
+  border: 0;
+  opacity: 0;
+  transform: scale(0);
+  transform-origin: 0 0;
+  will-change: transform, opacity;
+  transition: transform $bmd-menu-expand-duration $bmd-animation-curve-default,
+              opacity $bmd-menu-fade-duration $bmd-animation-curve-default;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+
+  &.showing {
+    animation-name: bmd-dropdown-animation;
+    animation-duration: $bmd-menu-expand-duration;
+    animation-fill-mode: forwards;
+    animation-timing-function: $bmd-animation-curve-default;
+  }
+
+  .open > &,
+  &.show {
+    display: block;
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  &.hiding {
+    display: block;
+    opacity: 0;
+    transform: scale(0);
+  }
+
+  &[x-placement="bottom-start"] {
+    transform-origin: 0 0;
+  }
+
+  &[x-placement="bottom-end"] {
+    transform-origin: 100% 0;
+  }
+
+  &[x-placement="top-start"] {
+    transform-origin: 0 100%;
+  }
+
+  &[x-placement="top-end"] {
+    transform-origin: 100% 100%;
+  }
+
+  .disabled > a{
+        color: $bmd-dropdown-header-color;
+
+        &:focus,
+        &:hover{
+            text-decoration: none;
+            background-color: transparent;
+            background-image: none;
+            color: $bmd-dropdown-header-color;
+        }
+    }
+
+    &.dropdown-with-icons .dropdown-item{
+        padding: $dropdown-item-padding-y + 0.125 $dropdown-item-padding-x $dropdown-item-padding-y + 0.125 $dropdown-item-padding-y + 0.125;
+
+        & .material-icons{
+            vertical-align: middle;
+            font-size: 24px;
+            position: relative;
+            margin-top: -4px;
+            top: 1px;
+            margin-right: 12px;
+            opacity: .5;
+        }
+    }
+
+
+  // https://www.google.com/design/spec/components/menus.html#menus-specs
+  .dropdown-item,
+  li > a{    // used to properly size the ripple container
+    position: relative;
+    width: auto;
+
+    display: flex;
+    flex-flow: nowrap;
+    align-items: center;
+    color: $bmd-dropdown-link-color;
+    font-weight: normal;
+    text-decoration: none;
+
+    font-size: .8125rem;
+    border-radius: $border-radius / 2;
+    margin: 0 $bmd-dropdown-margin-y;
+    @include transitions($fast-transition-time, $transition-linear);
+
+    min-width: $bmd-menu-item-min-width;
+
+    padding: $dropdown-item-padding-y  $dropdown-item-padding-x;
+
+    overflow: hidden;
+    line-height: $bmd-line-height;
+    text-overflow: ellipsis;
+    word-wrap: break-word;
+
+    @include media-breakpoint-up(md) {
+      padding-right: $bmd-menu-item-padding-right-md;
+      padding-left: $bmd-menu-item-padding-left-md;
+    }
+  }
+
+  .dropdown-item:hover,
+  .dropdown-item:focus,
+  a:hover,
+  a:focus,
+  a:active {
+    @include shadow-small-color($brand-primary);
+    background-color: $brand-primary;
+    color: #FFFFFF;
+  }
+}
+
+// this could be in a .btn-group or .dropdown
+.dropdown-toggle {
+  &.bmd-btn-icon,
+  &.bmd-btn-fab {
+    // remove the dropdown icon
+    &::after {
+      display: none;
+    }
+
+    ~ .dropdown-menu {
+      &.dropdown-menu-top-left,
+      &.dropdown-menu-top-right {
+        bottom: $bmd-btn-icon-size; // push up the bottom of the menu the height of the button
+      }
+    }
+  }
+
+  &:after{
+      will-change: transform;
+      transition: transform $bmd-animation-dropdown-caret linear;
+  }
+
+  .show &:after{
+    @include rotate-180();
+  }
+
+  &.bmd-btn-fab-sm {
+    ~ .dropdown-menu {
+      &.dropdown-menu-top-left,
+      &.dropdown-menu-top-right {
+        bottom: $bmd-btn-fab-size-sm; // push up the bottom of the menu the height of the button
+      }
+    }
+  }
+
+  &.bmd-btn-icon {
+    ~ .dropdown-menu {
+      // collapse some spacing
+      margin: 0;
+    }
+  }
+}
+
+.dropdown-header{
+    font-size: 0.75rem;
+    padding-top: $dropdown-header-padding-y;
+    padding-bottom: $dropdown-header-padding-y;
+    text-transform: none;
+    color: $bmd-dropdown-header-color;
+    line-height: $bmd-line-height;
+    font-weight: inherit;
+}
+
+@keyframes bmd-dropdown-animation {
+  from {
+    opacity: 0;
+    transform: scale(0);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.dropdown-menu.bootstrap-datetimepicker-widget{
+    opacity: 0;
+    transform: scale(0);
+    transition-duration: $bmd-menu-expand-duration;
+    transition-timing-function: $bmd-animation-curve-default;
+    transform-origin: 0 0;
+    will-change: transform, opacity;
+    top: 0;
+}
+
+.dropdown-menu.bootstrap-datetimepicker-widget.top{
+    transform-origin: 0 100%;
+}
+
+.dropdown-menu.bootstrap-datetimepicker-widget.open{
+    opacity: 1;
+    transform: scale(1);
+    top: 0;
+}

resources/theme/material-kit/assets/scss/material-kit/_example-pages.scss

@@ -0,0 +1,164 @@
+.index-page{
+    .section-components h6.description{
+        margin-top: 5px;
+        margin-bottom: 30px;
+    }
+
+    .page-header{
+        height: 90vh;
+        overflow: hidden;
+    }
+    .brand{
+        color: $white-color;
+        text-align: center;
+
+        h1{
+            font-size: 4.2rem;
+            font-weight: 600;
+            display: inline-block;
+            position: relative;
+        }
+        h3{
+            font-size: 1.313rem;
+            max-width: 500px;
+            margin: 10px auto 0;
+        }
+    }
+
+    h4.description{
+        font-size: 1.5em;
+    }
+}
+.section{
+  padding: 70px 0;
+}
+.profile-page{
+    .page-header{
+        height: 380px;
+        background-position: top center;
+    }
+    .profile{
+        text-align: center;
+
+        img{
+            max-width: 160px;
+            width: 100%;
+            margin: 0 auto;
+            @include transform-translate-y(-50%);
+        }
+        .name{
+            margin-top: -80px;
+        }
+    }
+    .follow{
+        position: absolute;
+        top: 0;
+        right: 0;
+    }
+    .description{
+        margin: $margin-base auto 0;
+        max-width: 600px;
+    }
+    .profile-tabs{
+        margin-top: $margin-base * 4;
+    }
+    .gallery{
+        margin-top: $margin-base * 3;
+        padding-bottom: 50px;
+
+        img{
+            width: 100%;
+            margin-bottom: $margin-base * 2;
+        }
+    }
+    .follow{
+        .btn-fab{
+            margin-top: -28px;
+        }
+    }
+    .card-background{
+        .content{
+            padding: 30% 0;
+            min-width: 160px;
+        }
+    }
+    .work{
+        padding: 40px 0px;
+        .collections{
+            margin-top: 20px;
+        }
+
+        .stats{
+            ul > li{
+                padding: 5px 0px;
+                font-size: 1em;
+                b{
+                    font-size: 1.2em;
+                }
+
+            }
+        }
+    }
+
+    .connections{
+        padding: 40px 0px;
+        .card-profile{
+            text-align: left;
+        }
+    }
+
+    .tab-content{
+        .collections{
+            .card .card-body{
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+
+                .badge{
+                    display: inline-table;
+                    margin: 0 auto;
+                }
+            }
+        }
+    }
+}
+
+.signup-page{
+    .page-header{
+        min-height: 100vh;
+        height: auto;
+        display: inherit;
+
+        .container{
+            padding-top: 20vh;
+        }
+    }
+
+    .card-signup{
+        border-radius: $border-radius-base * 2;
+        @include shadow-16dp();
+        margin-bottom: 100px;
+        padding: 40px 0px;
+    }
+    .info-horizontal{
+        padding: 0px 0px 20px;
+    }
+    .social{
+        .btn{
+            margin: 5px;
+        }
+        h4{
+            margin-top: 20px;
+        }
+    }
+    .footer{
+        .container{
+            padding: 0;
+        }
+        .copyright,
+        a{
+            color: #FFFFFF;
+        }
+    }
+
+}

resources/theme/material-kit/assets/scss/material-kit/_footers.scss

@@ -0,0 +1,93 @@
+footer{
+    padding: $padding-general-x 0;
+    text-align: center;
+    display: -webkit-flex; /* Safari */ /* Safari 6.1+ */
+    display: flex;
+
+    ul{
+        margin-bottom: 0;
+        padding: 0;
+        list-style: none;
+
+        li{
+            display: inline-block;
+
+            a{
+                color: inherit;
+                padding: $padding-general-x;
+                font-weight: $font-weight-bold;
+                font-size: $mdb-btn-font-size-base;
+                text-transform: uppercase;
+                border-radius: $border-radius-base;
+                text-decoration: none;
+                position: relative;
+                display: block;
+
+                &:hover{
+                    text-decoration: none;
+                }
+            }
+
+            .btn{
+                margin: 0;
+            }
+        }
+
+        &.links-horizontal{
+            &:first-child a{
+                padding-left: 0;
+            }
+
+            &:last-child a{
+                padding-right: 0;
+            }
+        }
+
+        &.links-vertical{
+            li{
+                display: block;
+                margin-left: -5px;
+                margin-right: -5px;
+
+                a{
+                    padding: 5px;
+                }
+            }
+        }
+    }
+
+    .social-buttons{
+        a,
+        .btn{
+            margin-top: 5px;
+            margin-bottom: 5px;
+        }
+    }
+
+    .footer-brand{
+        float: left;
+        height: 50px;
+        padding: 15px 15px;
+        font-size: 18px;
+        line-height: 20px;
+        margin-left: -15px;
+
+        &:hover,
+        &:focus{
+            color: $black-color;
+        }
+    }
+    .copyright{
+        padding: 15px 0;
+        .material-icons{
+            font-size: 18px;
+            position: relative;
+            top: 3px;
+        }
+    }
+
+    .pull-center{
+        display: inline-block;
+        float: none;
+    }
+}

resources/theme/material-kit/assets/scss/material-kit/_forms.scss

@@ -0,0 +1,360 @@
+form {
+  // ensure enough room at the bottom of any form to display a one-line bmd-help
+  margin-bottom: ($bmd-help-size-ratio * $font-size-base) * $line-height-base;
+
+  .card &{
+      margin: 0;
+  }
+  // reverse the above for navbars (no help expected in a navbar form)
+  .navbar & {
+    margin-bottom: 0; // only adjust bottom so that pull-xs-right flexed margin-left: auto works
+
+    .bmd-form-group {
+      display: inline-block;
+      padding-top: 0;
+    }
+
+    .btn {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// -----
+// Inputs
+//
+// Reference http://www.google.com/design/spec/components/text-fields.html
+// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
+.form-control {
+  background: $bmd-form-control-bg-repeat-y $bmd-form-control-bg-position;
+  background-size: $bmd-form-control-bg-size;
+  border: 0;
+  height: 36px;
+  transition: background 0s ease-out;
+  padding-left: 0;
+  padding-right: 0;
+  border-radius: 0;
+  font-size: $mdb-input-font-size-base;
+
+  // The border bottom should be static in all states, the decorator will be animated over this.
+  &:focus,
+  .bmd-form-group.is-focused & {
+    background-size: $bmd-form-control-bg-size-active;
+    //border-bottom: $input-btn-border-width solid $input-border-color;
+    transition-duration: 0.3s;
+    box-shadow: none;
+  }
+
+  @include material-placeholder() {
+      color: $mdb-input-placeholder-color;
+      font-weight: 400;
+      font-size: $mdb-input-font-size-base;
+}
+
+  .has-white &{
+      @include material-placeholder(){
+          color: $white-color;
+      }
+  }
+}
+
+
+
+// Help blocks (not in v4)
+//  position: absolute approach - uses no vertical space and there is no form jumping, but text wrapping - not so good.
+//  FIXME: width/wrapping isn't automatic and overflows occur.  What are some solutions?
+//
+.bmd-help {
+  position: absolute;
+  display: none;
+  font-size: .8rem;
+  font-weight: normal;
+  @extend .text-muted;
+
+  .bmd-form-group.is-focused & {
+    display: block;
+  }
+
+  //--------------------------------------
+  // Multiple help blocks
+  // - absolute positioning is used above to prevent bouncing
+  // - when there is more than one, this will bounce but will at least show
+  &:nth-of-type(2) {
+    padding-top: 1rem; // the first one requires top padding to push it below the first one which is absolute positioned
+  }
+
+  + .bmd-help {
+    position: relative;
+    margin-bottom: 0;
+  }
+}
+
+// -----
+// State coloring: default, success, info, warning, danger
+//
+@include bmd-selection-color();
+@include bmd-form-color($bmd-label-color, $bmd-label-color-focus, $input-border-color, $input-border-color);
+
+.has-success {
+  @include bmd-form-color($brand-success, $brand-success, $brand-success, $input-border-color);
+}
+
+.has-info {
+  @include bmd-form-color($brand-info, $brand-info, $brand-info, $input-border-color);
+}
+
+.has-white{
+  @include bmd-form-color($white-color, $white-color, $white-color, $input-border-color-white);
+
+    .form-control{
+        &:focus{
+            color: $white-color;
+        }
+    }
+}
+
+.has-warning {
+  @include bmd-form-color($brand-warning, $brand-warning, $brand-warning, $input-border-color);
+}
+
+.has-danger {
+  @include bmd-form-color($brand-danger, $brand-danger, $brand-danger, $input-border-color);
+}
+
+.has-rose {
+  @include bmd-form-color($brand-rose, $brand-rose, $brand-rose, $input-border-color);
+}
+
+// Reference http://www.google.com/design/spec/components/text-fields.html
+// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
+//.variations(unquote(" label"), color, $bmd-input-placeholder-color);  // default label color variations
+
+// Whereas .form-group adds structure, bmd-form-group just needs to make sure we have enough padding for our labels to work.  That's the only purpose.
+.bmd-form-group {
+  position: relative;
+  padding-top: 27px;
+
+  // -----
+  // Labels
+  //
+  // Reference http://www.google.com/design/spec/components/text-fields.html
+  // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
+
+    &:not(.has-success):not(.has-danger){
+        [class^='bmd-label'],
+        [class*=' bmd-label']{
+            &.bmd-label-floating{
+                color: $mdb-input-placeholder-color;
+            }
+        }
+    }
+  [class^='bmd-label'],
+  [class*=' bmd-label'] {
+    position: absolute;
+    pointer-events: none;
+    transition: 0.3s ease all;
+
+    // hint to browser for optimization
+    &.bmd-label-floating {
+      will-change: left, top, contents;
+      margin: 0;
+      line-height: 1.4;
+      font-weight: 400;
+    }
+  }
+
+  // hide label-placeholders when the field is filled
+  &.is-filled .bmd-label-placeholder {
+    display: none;
+  }
+
+  // Optional class to make the text field inline collapsible/expandable (collapsed by default)
+  //    This uses the BS collapse js to make the width expand.
+  //    `width` class must also be on the element FIXME: do this with JS, it is a marker class and should be implicit because after all, we are an bmd-collapse-inline
+  //    FIXME: js needs to do the focus on shown.bs.collapse event http://v4-alpha.getbootstrap.com/components/collapse/#events
+  &.bmd-collapse-inline {
+    display: flex;
+    align-items: center;
+    padding: 0; // get rid of any padding as this is a width transition
+    min-height: 2.1em;
+
+    // Expandable Holder.
+    .collapse {
+      flex: 1;
+      display: none;
+      &.show {
+        // This is an unfortunate hack. Animating between widths in percent (%)
+        // in many browsers (Chrome, Firefox) only animates the inner visual style
+        // of the input - the outer bounding box still 'jumps'.
+        // Thus assume a sensible maximum, and animate to/from that value.
+        max-width: 1200px;
+      }
+    }
+
+    .collapsing,
+    .width:not(.collapse),
+    // collapsing is removed and momentarily only width is present
+    .collapse.show {
+      display: block;
+    }
+
+    .collapsing {
+      @include material-animation-default();
+    }
+  }
+
+  // default floating size/location with an bmd-form-group
+  @include bmd-form-size-variant($font-size-base, $bmd-label-top-margin-base, $input-padding-y, $bmd-form-line-height, "bmd-form-group default");
+
+  // sm floating size/location
+  &.bmd-form-group-sm {
+    @include bmd-form-size-variant($font-size-sm, $bmd-label-top-margin-sm, $input-padding-y-sm, $bmd-form-line-height-sm, "bmd-form-group sm");
+  }
+
+  // lg floating size/location
+  &.bmd-form-group-lg {
+    @include bmd-form-size-variant($font-size-lg, $bmd-label-top-margin-lg, $input-padding-y-lg, $bmd-form-line-height-sm, "bmd-form-group lg");
+  }
+}
+
+// default floating size/location without a form-group (will skip form-group styles, and just render default sizing variation) - IMPORTANT for non-form-group spacing such as radio/checkbox/switch
+@include bmd-form-size-variant($font-size-base, $bmd-label-top-margin-base, $input-padding-y, $bmd-form-line-height);
+
+select {
+  &,
+  &.form-control {
+    // Use vendor prefixes as `appearance` isn't part of the CSS spec. OSX doesn't obey the border-radius: 0 without this.
+    -moz-appearance: none;
+    -webkit-appearance: none;
+  }
+}
+
+// Input files - hide actual input - requires specific markup in the sample.
+//.bmd-form-group input[type=file] {
+//  opacity: 0;
+//  position: absolute;
+//  top: 0;
+//  right: 0;
+//  bottom: 0;
+//  left: 0;
+//  width: 100%;
+//  height: 100%;
+//  z-index: 100;
+//}
+
+//
+//
+//.form-horizontal {
+//
+//  // Consistent vertical alignment of radios and checkboxes
+//  .radio,
+//  .checkbox,
+//  .radio-inline,
+//  .checkbox-inline {
+//    padding-top: 0;
+//  }
+//
+//  .radio {
+//    margin-bottom: 10px;
+//  }
+//
+//  label {
+//    text-align: right;
+//  }
+//
+//  label {
+//    margin: 0;
+//  }
+//}
+
+
+.form-inline {
+  @include media-breakpoint-up(sm) {
+    .input-group {
+      display: inline-flex;
+      align-items: center;
+    }
+  }
+}
+
+.form-control-feedback{
+    position: absolute;
+    top: 33px;
+    right: 0;
+    z-index: 2;
+    display: block;
+    width: 34px;
+    height: 34px;
+    line-height: 34px;
+    text-align: center;
+    pointer-events: none;
+    opacity: 0;
+
+    .has-success &{
+        color: $green;
+        opacity: 1;
+    }
+
+    .has-danger &{
+        color: $red;
+        opacity: 1;
+    }
+}
+
+.form-group{
+    margin-bottom: 17px;
+    position: relative;
+}
+
+textarea{
+    height: auto !important;
+    resize: none;
+    line-height: $bmd-line-height !important;
+}
+
+.form-group input[type=file] {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+
+.form-newsletter{
+    .input-group,
+    .form-group{
+        float: left;
+        width: 78%;
+        margin-right: 2%;
+        margin-top: 9px;
+        padding-top: 5px;
+    }
+
+    .btn{
+        float: left;
+        width: 20%;
+        margin: 9px 0 0;
+    }
+}
+
+.form-file-upload{
+    .input-group-btn:last-child>.btn-round{
+        border-radius: 30px;
+    }
+
+    .input-group-btn .btn{
+        margin: 0;
+    }
+
+    .input-group{
+        width: 100%;
+    }
+}
+
+.input-group .input-group-btn{
+    padding: 0 12px;
+}

resources/theme/material-kit/assets/scss/material-kit/_headers.scss

@@ -0,0 +1,71 @@
+.page-header{
+    height: 100vh;
+    background-position: center center;
+    background-size: cover;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    display: flex;
+    align-items: center;
+
+    .carousel .carousel-indicators{
+        bottom: 60px;
+    }
+
+    > .container{
+        color: $white-color;
+    }
+
+    .title{
+        color: $white-color;
+    }
+
+    &.header-small{
+        height: 65vh;
+        min-height: 65vh;
+    }
+
+    .iframe-container{
+        iframe{
+            width: 100%;
+            box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56),
+                        0 4px 25px 0px rgba(0, 0, 0, 0.12),
+                        0 8px 10px -5px rgba(0, 0, 0, 0.2);
+        }
+    }
+}
+
+.header-filter{
+    position: relative;
+
+    &:before,
+    &:after{
+        position: absolute;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        display: block;
+        left: 0;
+        top: 0;
+        content: "";
+    }
+
+    &::before{
+    background: rgba(0,0,0,.5);
+    }
+
+    .container{
+        z-index: 2;
+        position: relative;
+    }
+}
+.clear-filter::before {
+  background: none;
+}
+
+.purple-filter:after{
+  background: rgba(101, 47, 142, 0.64);
+  background: linear-gradient(45deg, rgba(101, 47, 142, 0.88) 0%, rgba(125, 46, 185, 0.45) 100%);
+  background: -moz-linear-gradient(135deg, rgba(101, 47, 142, 0.88) 0%, rgba(125, 46, 185, 0.45) 100%);
+  background: -webkit-linear-gradient(135deg, rgba(101, 47, 142, 0.88) 0%, rgba(125, 46, 185, 0.45) 100%);
+}

resources/theme/material-kit/assets/scss/material-kit/_images.scss

@@ -0,0 +1,10 @@
+.img-thumbnail{
+    border-radius: 16px;
+}
+.img-raised{
+    @include shadow-big-image();
+}
+
+.rounded{
+    border-radius: $border-radius-large !important;
+}

resources/theme/material-kit/assets/scss/material-kit/_info-areas.scss

@@ -0,0 +1,57 @@
+.info{
+    max-width: 360px;
+    margin: 0 auto;
+    padding: 70px 0 30px;
+
+    .icon{
+        color: $gray-color;
+
+        > i{
+            font-size: 3.85rem;
+        }
+    }
+    .info-title{
+        color: $black-color;
+        margin: 0.875rem * 2 0 0.875rem;
+    }
+    p{
+        color: $gray-color;
+    }
+}
+
+.info-horizontal{
+    .icon{
+        float: left;
+        margin-top: 24px;
+        margin-right: 10px;
+
+        >i{
+            font-size: $font-size-h2;
+        }
+    }
+    .description{
+        overflow: hidden;
+    }
+
+}
+
+.icon {
+  &.icon-primary {
+    color: $brand-primary;
+    }
+  &.icon-info {
+    color: $brand-info;
+  }
+  &.icon-success {
+    color: $brand-success;
+  }
+  &.icon-warning {
+    color: $brand-warning;
+  }
+  &.icon-danger {
+    color: $brand-danger;
+  }
+  &.icon-rose {
+    color: $brand-rose;
+}
+}

resources/theme/material-kit/assets/scss/material-kit/_input-group.scss

@@ -0,0 +1,43 @@
+// -----------------------------------------
+// input-group and input-group-addon styles
+//  note: form-groups are not required
+//
+@mixin input-group-button-variation($vertical-padding) {
+  .input-group-btn {
+    .btn {
+      //margin: 0 0 $vertical-padding 0;
+    }
+  }
+}
+
+// default margin - no form-group required
+@include input-group-button-variation(input-padding-y);
+
+.bmd-form-group-sm {
+  @include input-group-button-variation($input-padding-y-sm);
+}
+
+.bmd-form-group-lg {
+  @include input-group-button-variation($input-padding-y-lg);
+}
+
+.input-group {
+  // may be in or outside of form-group
+
+  .input-group-text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 15px 0 15px;
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  .input-group-btn {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    padding-right: 0;
+  }
+
+}

resources/theme/material-kit/assets/scss/material-kit/_layout.scss

@@ -0,0 +1,81 @@
+// This is a set of flex-based layout containers necessary for components such as the drawer.
+//  It allows for flex based positioning such as sticky header and footer inside an bmd-layout, with a
+//  bmd-layout-content that scrolls.
+
+// mobile webkit smooth scrolling: http://stackoverflow.com/a/15147497/2363935
+
+// First element
+.bmd-layout-canvas {
+  // added by js?
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+// Primary layout container, belongs inside a bmd-layout-canvas.
+.bmd-layout-container {
+  position: relative;
+  display: flex;
+  flex-direction: column; // allows for sticky header and footer
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch; // mobile webkit smooth scrolling
+}
+
+// Header layout (fixed top), belongs in a bmd-layout-container
+.bmd-layout-header {
+  z-index: 3;
+  display: flex;
+  flex-direction: column; // since this is a column, it is necessary that something like an actual navbar is a child
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+  justify-content: flex-start;
+  width: 100%;
+  max-height: 1000px;
+  transform: translateZ(0); // mobile webkit smooth scrolling
+  @include material-animation-default();
+}
+
+// Content layout, belongs in a bmd-layout-container
+.bmd-layout-content {
+  position: relative;
+  z-index: 1; // under a header
+  display: inline-block;
+  //-ms-flex: 0 1 auto; // Fix IE10 bug.
+  flex-grow: 1;
+  overflow-x: hidden;
+  overflow-y: auto; // mobile webkit smooth scrolling may need scroll, but auto seems to be working and omits the scroll border
+  -webkit-overflow-scrolling: touch; // mobile webkit smooth scrolling
+  @include material-animation-default();
+}
+
+// Pushes flex-based content to the other end (x or y)
+.bmd-layout-spacer {
+  flex-grow: 1;
+}
+
+// Backdrop - generic backdrop to be used by other components i.e. drawer in overlay mode
+.bmd-layout-backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 4;
+  width: 100%;
+  height: 100%;
+  visibility: hidden;
+  background-color: transparent;
+  transition-property: background-color;
+  @include material-animation-default();
+
+  @supports (pointer-events: auto) {
+    background-color: rgba(0, 0, 0, 0.5);
+    opacity: 0;
+    transition-property: opacity;
+    visibility: visible;
+    pointer-events: none;
+  }
+
+  // NOTE: the &.in style is responsive, generated by @mixin bmd-layout-backdrop-in() where needed.
+}

resources/theme/material-kit/assets/scss/material-kit/_list-group.scss

@@ -0,0 +1,102 @@
+// https://www.google.com/design/spec/components/lists.html#lists-specs
+
+// - single line 48dp
+// - single line avatar 56dp
+// - double line (with and w/o avatar) 72dp
+// - triple line 88dp
+
+.list-group {
+  // #853 start -- https://github.com/twbs/bootstrap/pull/18981/files
+  @if $enable-flex {
+    display: flex;
+    flex-direction: column;
+  }
+  // #853 end -- https://github.com/twbs/bootstrap/pull/18981/files
+
+  flex-grow: 1;
+
+  // Add 8dp of padding at the top and bottom of a list. One exception is at the top of a list with a subheader, because subheaders contain their own padding.
+  padding: .5rem 0;
+
+  // dense size variation
+  &.bmd-list-group-sm {
+    padding: .25rem 0;
+
+    .list-group-item {
+      padding: .5rem 1rem;
+    }
+  }
+}
+
+.bmd-list-group-col {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  //flex-shrink: 0;
+}
+
+.list-group-item {
+  // #853 start -- https://github.com/twbs/bootstrap/pull/18981/files
+  @if $enable-flex {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+  } @else {
+    display: block;
+  }
+  // #853 end -- https://github.com/twbs/bootstrap/pull/18981/files
+  padding: 1rem;
+  line-height: 1;
+
+  .list-group-item-text {
+    // word wrap? http://stackoverflow.com/a/26535469/2363935
+    //flex-flow: row wrap;
+    min-width: 0;
+    max-height: 2.188rem; // 88dp tile total height
+    // FIXME: text overflow with ellipsis is not working
+    //flex: 0 1 auto; //    http://stackoverflow.com/questions/12022288/how-to-keep-a-flex-item-from-overflowing-due-to-its-text
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  //------
+  // NOTE: there are many variations of icons/labels in a list, each one of these rules exist for a reason.
+
+  // first icon/label on the left
+  :first-child {
+    margin-right: 2rem; // single line icon is 72dp to text (16 pad + 24 icon + 32 margin)
+  }
+
+  // second icon/label, or only icon/label marked as 'pull-*-right', or any direct child element marked as right
+  > .pull-xs-right,
+  > .pull-sm-right,
+  > .pull-md-right,
+  > .pull-lg-right,
+  > .pull-xl-right,
+  > * ~ .label:last-child,
+  > * ~ .material-icons:last-child {
+    margin-right: 0; // some variations actually match the first-child
+    margin-left: auto;
+  }
+
+  // add the padding to icons (margin-left is used for alignment)
+  .material-icons.pull-xs-right,
+  // need the specificity
+  .material-icons.pull-sm-right,
+  .material-icons.pull-md-right,
+  .material-icons.pull-lg-right,
+  .material-icons.pull-xl-right,
+  .material-icons ~ .material-icons:last-child {
+    padding-left: 1rem; // guarantee space per spec
+  }
+  //------
+
+  .list-group-item-heading {
+    //font-size: 1rem;
+  }
+
+  .list-group-item-text {
+    font-size: .875rem;
+    color: $gray;
+  }
+}

resources/theme/material-kit/assets/scss/material-kit/_misc.scss

@@ -0,0 +1,550 @@
+body{
+    background-color: #eee;
+    color: $black-color;
+    font-weight: 300;
+}
+
+legend {
+  border-bottom: 0;
+}
+
+.serif-font{
+    font-family: $font-family-serif;
+}
+
+// Prevent highlight on mobile
+* {
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  -webkit-tap-highlight-color: transparent;
+  &:focus {
+    outline: 0;
+  }
+}
+
+a{
+  color: $link-color;
+  &:hover,
+  &:focus{
+      color: darken($link-color, 5%);
+      text-decoration: none;
+  }
+
+  &.text-info{
+      &:hover, &:focus{
+          color: darken($brand-info, 5%);
+      }
+  }
+
+  & .material-icons {
+    vertical-align: middle;
+  }
+}
+
+.main{
+    background: #FFFFFF;
+    position: relative;
+    z-index: 3;
+}
+
+.form-check,
+label{
+    font-size: 14px;
+    line-height: 1.42857;
+    color: $checkboxes-text-color;
+    font-weight: 400;
+}
+
+.main-raised{
+    margin: -60px 30px 0px;
+    border-radius: $border-radius-base * 2;
+    @include shadow-16dp();
+}
+
+/*           Animations              */
+.animation-transition-general{
+    @include transitions($general-transition-time, $transition-linear);
+}
+
+.animation-transition-slow{
+    @include transitions($slow-transition-time, $transition-linear);
+}
+
+.animation-transition-fast{
+    @include transitions($fast-transition-time, $transition-ease);
+}
+
+
+.animation-transition-fast,
+.navbar,
+.bootstrap-tagsinput .tag,
+.bootstrap-tagsinput [data-role="remove"],
+.card-collapse .card-header a i{
+    @include transitions($fast-transition-time, $transition-ease);
+}
+
+.signup-page{
+  .card-signup{
+    form{
+      .form-check{
+        padding-left: 20px;
+
+        .form-check-label{
+          padding-left: 35px;
+        }
+      }
+    }
+  }
+}
+
+// style for index.html (free version)
+
+.section-signup{
+  .card-signup{
+    .card-header{
+      width: auto;
+    }
+    .card-body{
+      .input-group{
+        padding-bottom: 7px;
+        margin: 27px 0 0 0;
+      }
+    }
+  }
+}
+
+
+// offline-doc
+.offline-doc,
+.offline-free-doc {
+  .page-header {
+    height: 100vh !important;
+
+    &:after {
+      background: rgba(0, 0, 0, 0.5) !important;
+      content: "";
+      display: block;
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      z-index: 2;
+    }
+
+    .container {
+      z-index: 3;
+    }
+  }
+  .footer {
+    position: absolute;
+    width: 100%;
+    background: transparent;
+    bottom: 0;
+    color: $white-color;
+    z-index: 2;
+
+    .copyright a{
+      color: $white-color;
+    }
+  }
+
+  .navbar {
+    .navbar-brand,
+    .navbar-collapse .nav-link {
+      color: $white-color;
+    }
+  }
+}
+
+
+// hinge card
+
+
+
+@-webkit-keyframes hinge {
+  0% {
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  20%, 60% {
+    -webkit-transform: rotate3d(0, 0, 1, 80deg);
+    transform: rotate3d(0, 0, 1, 80deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  40%, 80% {
+    -webkit-transform: rotate3d(0, 0, 1, 60deg);
+    transform: rotate3d(0, 0, 1, 60deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 700px, 0);
+    transform: translate3d(0, 700px, 0);
+    opacity: 0;
+  }
+}
+
+@keyframes hinge {
+  0% {
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  20%, 60% {
+    -webkit-transform: rotate3d(0, 0, 1, 80deg);
+    transform: rotate3d(0, 0, 1, 80deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  40%, 80% {
+    -webkit-transform: rotate3d(0, 0, 1, 60deg);
+    transform: rotate3d(0, 0, 1, 60deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 700px, 0);
+    transform: translate3d(0, 700px, 0);
+    opacity: 0;
+  }
+}
+
+.hinge {
+  -webkit-animation-name: hinge;
+  animation-name: hinge;
+}
+
+.animated.hinge {
+  -webkit-animation-duration: 2s;
+  animation-duration: 2s;
+}
+
+.animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.tim-row{
+    margin-bottom: 20px;
+}
+
+.tim-white-buttons {
+    background-color: #777777;
+}
+.title{
+    margin-top: 30px;
+    margin-bottom: 25px;
+    min-height: 32px;
+}
+
+#map {
+    position: relative;
+    z-index: 2;
+    width: 100%;
+    height: calc(100vh - 70px);
+    margin-top: 70px;
+}
+
+.tim-typo{
+    padding-left: 25%;
+    margin-bottom: 40px;
+    position: relative;
+    width: 100%;
+}
+.tim-typo .tim-note{
+    bottom: 5px;
+    color: #c0c1c2;
+    display: block;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 15px;
+    left: 0;
+    margin-left: 20px;
+    position: absolute;
+    width: 260px;
+}
+.tim-row{
+    padding-top: 50px;
+}
+.tim-row h3{
+    margin-top: 0;
+}
+#typography h1, #typography h2, #typography h3,
+#typography h4, #typography h5, #typography h6{
+    margin-bottom: 0;
+}
+
+.switch{
+    margin-right: 20px;
+}
+#navbar-full .navbar{
+    border-radius: 0 !important;
+    margin-bottom: 15px;
+    z-index: 2;
+}
+.space{
+    height: 130px;
+    display: block;
+}
+.space-110{
+    height: 110px;
+    display: block;
+}
+.space-50{
+    height: 50px;
+    display: block;
+}
+.space-70{
+    height: 70px;
+    display: block;
+}
+.navigation-example .img-src{
+    background-attachment: scroll;
+}
+
+.navigation-example{
+    background-position: center center;
+    background-size: cover;
+    margin-top:0;
+    min-height: 740px;
+}
+#notifications{
+    background-color: $white-color;
+    display: block;
+    width: 100%;
+    position: relative;
+}
+#notifications .alert-danger{
+    margin-bottom: 0px;
+}
+.tim-note{
+    text-transform: capitalize;
+}
+
+#buttons .btn{
+    margin: 0 0px 15px;
+}
+.space-100{
+    height: 100px;
+    display: block;
+    width: 100%;
+}
+
+  // PARALLAX
+
+.parallax{
+  width:100%;
+  height:570px;
+
+  display: block;
+  background-attachment: fixed;
+    background-repeat:no-repeat;
+    background-size:cover;
+    background-position: center center;
+
+}
+.parallax .parallax-image{
+    width: 100%;
+    overflow: hidden;
+    position: absolute;
+}
+.parallax .parallax-image img{
+    width: 100%;
+}
+
+@media (max-width: 768px){
+    .parallax .parallax-image{
+         width: 100%;
+         height: 640px;
+         overflow: hidden;
+     }
+    .parallax .parallax-image img{
+       height: 100%;
+       width: auto;
+   }
+}
+
+.separator{
+    content: "Separator";
+    color: #FFFFFF;
+    display: block;
+    width: 100%;
+    padding: 20px;
+}
+.separator-line{
+    background-color: #EEE;
+    height: 1px;
+    width: 100%;
+    display: block;
+}
+.separator.separator-gray{
+    background-color: #EEEEEE;
+}
+.social-buttons-demo .btn{
+  margin: 10px 5px 7px 1px;
+}
+
+.img-container{
+    width: 100%;
+    overflow: hidden;
+}
+.img-container img{
+    width: 100%;
+}
+
+.section-black {
+  background-color: #333;
+}
+
+.animate {
+  transition: 1.5s ease-in-out;
+  -moz-transition: 1.5s ease-in-out;
+  -webkit-transition: 1.5s ease-in-out;
+}
+
+.sharing-area{
+    margin-top: 80px;
+}
+.sharing-area .btn{
+    margin: 15px 4px 0;
+    color: #FFFFFF;
+}
+.sharing-area .btn i{
+    font-size: 18px;
+    position: relative;
+    top: 2px;
+    margin-right: 5px;
+}
+#navbar{
+    margin-bottom: -20px;
+}
+.sharing-area .btn-twitter{
+    background-color: #55acee;
+}
+.sharing-area .btn-facebook{
+    background-color: #3b5998;
+}
+.sharing-area .btn-google-plus{
+    background-color: #dd4b39;
+}
+.sharing-area .btn-github{
+    background-color: #333333;
+}
+#navbar .navbar{
+    border-radius: 0;
+}
+
+@media (max-width: 830px){
+  .main-raised{
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+}
+@media (max-width: 767px){
+  .tab-pane#schedule-2 {
+    padding-top: 20px;
+  }
+}
+
+.bd-docs .bd-example.bd-example-popover-static .popover,
+.bd-docs .bd-example.bd-example-tooltip-static .tooltip {
+  z-index: 3!important;
+}
+
+@media all and (max-width: 375px) {
+  .page-header {
+    height: calc(100vh + 270px);
+  }
+
+  .index-page {
+    overflow-x: hidden;
+  }
+
+  .pagination {
+    &.pagination-primary {
+      .page-item:nth-of-type(3),
+      .page-item:nth-of-type(7) {
+        display: none;
+      }
+    }
+    &.pagination-info {
+      .page-item:nth-of-type(2) {
+        display: none;
+      }
+    }
+  }
+
+  .main.main-raised {
+    margin-top: -30px;
+  }
+
+  .form-group.is-focused {
+    .bootstrap-datetimepicker-widget {
+      left: -32px !important;
+    }
+  }
+}
+
+.show.modal .dropdown-toggle:after {
+  -webkit-transform: rotate(0deg);
+  -moz-transform: rotate(0deg);
+  -o-transform: rotate(0deg);
+  -ms-transform: rotate(0deg);
+  transform: rotate(0deg);
+}
+
+// timepicker increase/decrease buttons
+
+.bootstrap-datetimepicker-widget .timepicker {
+  .table-condesed .btn{
+    .ripple-container {
+      width: 40px;
+      height: 40px;
+      margin: -11px 3px;
+    }
+  }
+}
+
+// docs
+
+ .bd-docs {
+  .bd-toc-item {
+    .bd-sidenav a span {
+      float: right;
+      margin-top: 5px;
+      padding: 3px 7px;
+      font-size: 8px;
+      line-height: 9px;
+      background-color: $brand-primary;
+    }
+  }
+
+  .bd-content .bd-title {
+    .btn {
+      padding: 7px 20px;
+      margin-bottom: 10px;
+    }
+  }
+}

resources/theme/material-kit/assets/scss/material-kit/_mixins.scss

@@ -0,0 +1,13 @@
+@import "mixins/utilities";
+@import "mixins/breakpoints";
+@import "mixins/animations";
+@import "mixins/type";
+@import "mixins/layout";
+@import "mixins/drawer";
+@import "mixins/forms";
+@import "mixins/buttons";
+@import "mixins/hover";
+@import "mixins/navs";
+@import "mixins/colored-shadows";
+@import "mixins/navbar-colors";
+@import "mixins/alert";

resources/theme/material-kit/assets/scss/material-kit/_modal.scss

@@ -0,0 +1,91 @@
+//
+// Modals
+// Material Design element Dialogs
+// --------------------------------------------------
+.modal-dialog {
+  & .modal-content{
+    @include shadow-z-5();
+    border-radius: $border-radius-large;
+    border: none;
+
+    .card-signup{
+      margin: 0;
+
+      .modal-header{
+        padding-top: 0;
+      }
+    }
+  }
+
+  // Modal header
+  // Top section of the modal w/ title and dismiss
+  .modal-header {
+    border-bottom: none;
+    padding-top:    24px;
+    padding-right:  24px;
+    padding-bottom: 0;
+    padding-left:   24px;
+  }
+  // Modal body
+  // Where all modal content resides (sibling of .modal-header and .modal-footer)
+  .modal-body {
+    padding-top:    24px;
+    padding-right:  24px;
+    padding-bottom: 16px;
+    padding-left:   24px;
+  }
+  // Footer (for actions)
+  .modal-footer {
+    border-top: none;
+    padding: 24px;
+
+    &.text-center{
+        text-align: center;
+    }
+
+    button {
+      margin: 0;
+      padding-left: 16px;
+      padding-right: 16px;
+      width: auto;
+      &.pull-left {
+        padding-left: 5px;
+        padding-right: 5px;
+        position: relative;
+        left: -5px;
+      }
+    }
+  }
+  .modal-body + .modal-footer {
+    padding-top: 0;
+  }
+}
+.modal-backdrop {
+  background: rgba(0,0,0,0.5);
+}
+
+.modal{
+  .modal-dialog{
+    margin-top: 130px;
+  }
+  .modal-header .close{
+    color: $gray-light;
+
+    &:hover,
+    &:focus{
+        opacity: 1;
+    }
+
+    i{
+        font-size: 16px;
+    }
+  }
+}
+
+.show:not(.modal) .dropdown-toggle:after {
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -o-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+}

resources/theme/material-kit/assets/scss/material-kit/_nav.scss

@@ -0,0 +1,38 @@
+// https://www.google.com/design/spec/components/tabs.html#tabs-specs
+
+.nav-link {
+  //line-height: $bmd-nav-link-line-height; // set baseline line-height and font sizes
+  text-transform: uppercase;
+}
+
+// navbars
+.navbar-nav {
+  .nav-link {
+    padding: $bmd-navbar-link-padding;
+    font-size: $bmd-navbar-link-font-size;
+    font-weight: $bmd-navbar-link-font-weight;
+  }
+}
+
+//pills and tabs
+.nav-tabs,
+.nav-pills {
+    border: 0;
+    border-radius: 3px;
+    padding: 0 15px;
+
+  .nav-link {
+    padding: $bmd-nav-tabs-pills-link-padding;
+    font-size: $bmd-nav-tabs-pills-font-size;
+    font-weight: $bmd-nav-tabs-pills-font-weight;
+    border: 0;
+  }
+}
+
+
+// used to correctly size ripple container
+.nav {
+  .nav-item {
+    position: relative;
+  }
+}

resources/theme/material-kit/assets/scss/material-kit/_navbar.scss

@@ -0,0 +1,160 @@
+.navbar {
+    border: 0;
+    border-radius: $border-radius-base;
+    padding: 0.625rem 0;
+    margin-bottom: 20px;
+    @include navbar-colors($white-color, $navbar-color);
+
+    &.fixed-top{
+        border-radius: 0;
+    }
+
+    .navbar-nav{
+        .nav-item .nav-link{
+            position: relative;
+            color: inherit;
+            padding: $padding-general-x;
+            font-weight: $font-weight-default;
+            font-size: $mdb-btn-font-size-base;
+            text-transform: uppercase;
+            border-radius: $border-radius-base;
+            line-height: 20px;
+
+            &:not(.btn-just-icon) .fa{
+                position: relative;
+                top: 2px;
+                margin-top: -4px;
+                margin-right: 4px;
+            }
+
+            & .material-icons,
+            & .fa{
+                font-size: $font-size-lg;
+                max-width: 24px;
+                margin-top: -1.1em;
+            }
+
+            &:not(.btn) .material-icons{
+                margin-top: -7px;
+                top: 3px;
+                position: relative;
+                margin-right: 3px;
+            }
+
+            &.profile-photo{
+                padding: 0;
+                margin: 0 3px;
+
+                &:after{
+                    display: none;
+                }
+
+                & .profile-photo-small{
+                    height: 40px;
+                    width: 40px;
+                }
+
+                .ripple-container{
+                    border-radius: 50%;
+                }
+            }
+        }
+
+        .dropdown-menu-right{
+            transform-origin: 100% 0;
+        }
+
+        .nav-item.active .nav-link{
+            &,
+            &:hover,
+            &:focus {
+              background-color: rgba(255, 255, 255, 0.1);
+            }
+        }
+    }
+
+    .btn,
+    .navbar-nav .nav-item .btn{
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+    .navbar-toggler{
+        cursor: pointer;
+
+        .navbar-toggler-icon{
+          position: relative;
+          width: 22px;
+          height: 2px;
+          vertical-align: middle;
+          outline: 0;
+          display: block;
+          border-radius: 1px;
+
+            & + .navbar-toggler-icon{
+                margin-top: 4px;
+            }
+        }
+    }
+
+    &.navbar-absolute{
+        position: absolute;
+        width: 100%;
+        padding-top: 10px;
+        z-index: 1029;
+    }
+
+    .navbar-wrapper{
+        display: inline-flex;
+        align-items: center;
+    }
+
+    // give correct size to ripple container
+    .navbar-brand {
+        position: relative;
+        color: inherit;
+        height: 50px;
+        font-size: $navbar-brand-font-size - 0.125;
+        line-height: 30px;
+        padding: $padding-general-y 0;
+    }
+
+    &.bg-primary{
+        @include navbar-colors($bg-primary, $white-color);
+    }
+    &.bg-info{
+        @include navbar-colors($bg-info, $white-color);
+    }
+
+    &.bg-warning{
+        @include navbar-colors($bg-warning, $white-color);
+    }
+
+    &.bg-rose{
+        @include navbar-colors($bg-rose, $white-color);
+    }
+
+    &.bg-danger{
+        @include navbar-colors($bg-danger, $white-color);
+    }
+
+    &.bg-success{
+        @include navbar-colors($bg-success, $white-color);
+    }
+    &.bg-dark{
+        @include navbar-colors($grey-900, $white-color);
+    }
+
+    &.navbar-transparent{
+        background-color: transparent !important;
+        box-shadow: none;
+        padding-top: 25px;
+        color: $white-color;
+    }
+
+}
+
+// for demo
+#navbar .navbar{
+    border-radius: 0;
+}

resources/theme/material-kit/assets/scss/material-kit/_pagination.scss

@@ -0,0 +1,98 @@
+.pagination{
+    > .page-item > .page-link,
+    > .page-item > span{
+        border: 0;
+        border-radius: 30px !important;
+        transition: all .3s;
+        padding: 0px 11px;
+        margin: 0 3px;
+        min-width: 30px;
+        height: 30px;
+        line-height: 30px;
+        color: $gray-color;
+        font-weight: $font-weight-default;
+        font-size: $mdb-btn-font-size-base;
+        text-transform: uppercase;
+        background: transparent;
+        text-align: center;
+
+        &:hover,
+        &:focus{
+            color: $gray-color;
+        }
+    }
+
+    > .page-item.active > a,
+    > .page-item.active > span{
+        color: $gray-color;
+
+        &,
+        &:focus,
+        &:hover{
+            background-color: $brand-primary;
+            border-color: $brand-primary;
+            color: $white-color;
+            @include shadow-4dp-color($brand-primary);
+        }
+
+    }
+
+    // Colors
+    &.pagination-info{
+        > .page-item.active > a,
+        > .page-item.active > span{
+            &,
+            &:focus,
+            &:hover{
+                background-color: $brand-info;
+                border-color: $brand-info;
+                @include shadow-4dp-color($brand-info);
+            }
+        }
+    }
+
+    &.pagination-success{
+        > .page-item.active > a,
+        > .page-item.active > span{
+            &,
+            &:focus,
+            &:hover{
+                background-color: $brand-success;
+                border-color: $brand-success;
+                @include shadow-4dp-color($brand-success);
+            }
+        }
+    }
+
+    &.pagination-warning{
+        > .page-item.active > a,
+        > .page-item.active > span{
+            &,
+            &:focus,
+            &:hover{
+                background-color: $brand-warning;
+                border-color: $brand-warning;
+                @include shadow-4dp-color($brand-warning);
+            }
+        }
+    }
+
+    &.pagination-danger{
+        > .page-item.active > a,
+        > .page-item.active > span{
+            &,
+            &:focus,
+            &:hover{
+                background-color: $brand-danger;
+                border-color: $brand-danger;
+                @include shadow-4dp-color($brand-danger);
+            }
+        }
+    }
+}
+
+.pagination {
+  .page-item .page-link:focus {
+    box-shadow: none;
+  }
+}

resources/theme/material-kit/assets/scss/material-kit/_pills.scss

@@ -0,0 +1,125 @@
+.nav-pills{
+
+    &:not(.flex-column) .nav-item + .nav-item:not(:first-child){
+        margin-left: 5px;
+    }
+
+    &.flex-column{
+        .nav-item + .nav-item{
+            margin-top: 5px;
+        }
+    }
+
+    .nav-item {
+        .nav-link{
+            line-height: $mdb-btn-font-size-base * 2;
+            text-transform: uppercase;
+            font-size: $mdb-btn-font-size-base;
+            font-weight: $font-weight-bold;
+            min-width: 100px;
+            text-align: center;
+            color: $pills-color;
+            transition: all .3s;
+            border-radius: 30px;
+            padding: 10px 15px;
+
+            &:hover{
+                background-color: rgba(200, 200, 200, 0.2);
+            }
+
+            &.active{
+                color: $white-color;
+                background-color: $brand-primary;
+                @include shadow-big-color($brand-primary);
+            }
+        }
+
+        i{
+            display: block;
+            font-size: 30px;
+            padding: 15px 0;
+        }
+
+    }
+
+    &.nav-pills-info{
+        .nav-item {
+            .nav-link.active{
+                &,
+                &:focus,
+                &:hover{
+                    background-color: $brand-info;
+                    @include shadow-big-color($brand-info);
+                    color: $white-color;
+                }
+            }
+        }
+    }
+
+    &.nav-pills-rose{
+        .nav-item {
+            .nav-link.active{
+                &,
+                &:focus,
+                &:hover{
+                    background-color: $brand-rose;
+                    @include shadow-big-color($brand-rose);
+                    color: $white-color;
+                }
+            }
+        }
+    }
+
+    &.nav-pills-success{
+        .nav-item {
+            .nav-link.active{
+                &,
+                &:focus,
+                &:hover{
+                    background-color: $brand-success;
+                    @include shadow-big-color($brand-success);
+                    color: $white-color;
+                }
+            }
+        }
+    }
+
+    &.nav-pills-warning{
+        .nav-item {
+            .nav-link.active{
+                &,
+                &:focus,
+                &:hover{
+                    background-color: $brand-warning;
+                    @include shadow-big-color($brand-warning);
+                    color: $white-color;
+                }
+            }
+        }
+    }
+
+    &.nav-pills-danger{
+        .nav-item {
+            .nav-link.active{
+                &,
+                &:focus,
+                &:hover{
+                    background-color: $brand-danger;
+                    @include shadow-big-color($brand-danger);
+                    color: $white-color;
+                }
+            }
+        }
+    }
+
+    &.nav-pills-icons{
+        .nav-item{
+            .nav-link{
+                border-radius: 4px;
+            }
+        }
+    }
+}
+.tab-space{
+    padding: 20px 0 50px 0px;
+}

resources/theme/material-kit/assets/scss/material-kit/_popover.scss

@@ -0,0 +1,53 @@
+.popover, .tooltip-inner {
+    line-height: 1.5em;
+    background: $white-color;
+    border: none;
+    border-radius: $border-radius-base;
+    @include shadow-8dp();
+    color: $popover-color;
+}
+
+
+.popover{
+    padding: 0;
+    @include shadow-16dp();
+
+    &.left,
+    &.right,
+    &.top,
+    &.bottom{
+        > .arrow{
+            border: none;
+        }
+    }
+
+
+    &.bs-popover-top,
+    &.bs-popover-auto[x-placement^="top"],
+    &.bs-popover-bottom,
+    &.bs-popover-auto[x-placement^="bottom"],
+    &.bs-popover-right,
+    &.bs-popover-auto[x-placement^="right"],
+    &.bs-popover-left,
+    &.bs-popover-auto[x-placement^="left"]{
+        & .arrow::before{
+            border: 0;
+        }
+    }
+
+}
+
+.popover-header{
+    background-color: $white-color;
+    border: none;
+    padding: 15px 15px 5px;
+    font-size: $font-size-h4;
+    margin: 0;
+    color: $popover-color;
+}
+
+.popover-body{
+    padding: 10px 15px 15px;
+    line-height: 1.4;
+    color: $popover-color;
+}

resources/theme/material-kit/assets/scss/material-kit/_progress.scss

@@ -0,0 +1,42 @@
+.progress {
+    height: 4px;
+    border-radius: 0;
+    box-shadow: none;
+    background: #DDDDDD;
+    margin-bottom: 20px;
+    .progress-bar {
+        box-shadow: none;
+        @include variations(unquote(".progress-bar"), unquote(""), background-color, $brand-primary);
+        &.progress-bar-primary{
+            background: $brand-primary !important;
+        }
+        &.progress-bar-info{
+            background: $brand-info;
+        }
+        &.progress-bar-success{
+            background: $brand-success;
+        }
+        &.progress-bar-warning{
+            background: $brand-warning;
+        }
+        &.progress-bar-danger{
+            background: $brand-danger;
+        }
+    }
+
+    &.progress-line-primary{
+        background: rgba($brand-primary,.2);
+    }
+    &.progress-line-info{
+        background: rgba($brand-info,.2);
+    }
+    &.progress-line-success{
+        background: rgba($brand-success,.2);
+    }
+    &.progress-line-warning{
+        background: rgba($brand-warning,.2);
+    }
+    &.progress-line-danger{
+        background: rgba($brand-danger,.2);
+    }
+}

resources/theme/material-kit/assets/scss/material-kit/_radios.scss

@@ -0,0 +1,186 @@
+@mixin radio-color($color, $opacity){
+  & ~ .check,
+  & ~ .circle  {
+    opacity: $opacity;
+  }
+
+  & ~ .check {
+    background-color: $color;
+  }
+
+  & ~ .circle  {
+    border-color: $color;
+  }
+}
+
+.form-check{
+    .form-check-label {
+        cursor: pointer;
+        padding-left: 25px;
+        position: relative;
+        @include mdb-label-color-toggle-focus();
+
+    span {
+        display: block;
+        position: absolute;
+        left: -1px;
+        top: -1px;
+        transition-duration: 0.2s;
+    }
+    .circle {
+        border: 1px solid $mdb-radio-color-off;
+        height: 15px;
+        width: 15px;
+        border-radius: 100%;
+        top: 1px;
+
+        .check {
+            height: 15px;
+            width: 15px;
+            border-radius: 100%;
+            background-color: $mdb-radio-color-on;
+            @include transform-scale3d(unquote('0,0,0'));
+
+
+        }
+    }
+
+  }
+
+    .form-check-input {
+        opacity: 0;
+        height: 0;
+        width: 0;
+        overflow: hidden;
+
+
+        &:checked {
+            @include radio-color($mdb-radio-color-on, 1);
+
+            .check:before {
+                animation: checkboxOn .5s forwards;
+            }
+        }
+        &:checked ~ .circle .check {
+            @include transform-scale3d(unquote('0.65, 0.65, 1'));
+        }
+
+    }
+
+    .form-check-input[disabled] {
+
+        // light theme spec: Disabled: #000000, Opacity  26%
+        @include radio-color($black, 0.26);
+
+        & + .circle .check{
+            background-color: $black;
+        }
+    }
+
+
+    .form-check-sign{
+        vertical-align: middle;
+        position: relative;
+        top: -2px;
+        float: left;
+        padding-right: 10px;
+        display: inline-block;
+
+    }
+
+}
+
+.form-check {
+  .form-check-label {
+    .circle {
+      &:before {
+        display: block;
+        position: absolute;
+        left: -1px;
+        content: "";
+        background-color: rgba(0, 0, 0, 0.84);
+        height: 15px;
+        width: 15px;
+        border-radius: 100%;
+        z-index: 1;
+        opacity: 0;
+        margin: 0;
+        top: -1px;
+        -webkit-transform: scale3d(2.3,2.3,1);
+        -moz-transform: scale3d(2.3,2.3,1);
+        -o-transform: scale3d(2.3,2.3,1);
+        -ms-transform: scale3d(2.3,2.3,1);
+        transform: scale3d(2.3,2.3,1);
+      }
+    }
+
+    .form-check-input:checked + .circle:before {
+      animation: rippleOn .5s;
+    }
+
+    .form-check-input:checked + .circle .check:before {
+      color: #FFFFFF;
+      box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
+      animation: checkboxOn 0.3s forwards;
+    }
+  }
+}
+
+.form-check + .form-check {
+  margin-top: 0;
+}
+
+@keyframes checkboxOn {
+  0% {
+    box-shadow:
+      0 0 0 10px,
+      10px -10px 0 10px,
+      32px 0 0 20px,
+      0px 32px 0 20px,
+      -5px 5px 0 10px,
+      15px 2px 0 11px;
+  }
+  50% {
+    box-shadow:
+      0 0 0 10px,
+      10px -10px 0 10px,
+      32px 0 0 20px,
+      0px 32px 0 20px,
+      -5px 5px 0 10px,
+      20px 2px 0 11px;
+  }
+  100% {
+    box-shadow:
+      0 0 0 10px,
+      10px -10px 0 10px,
+      32px 0 0 20px,
+      0px 32px 0 20px,
+      -5px 5px 0 10px,
+      20px -12px 0 11px;
+  }
+}
+
+
+@keyframes rippleOn {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes rippleOff {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}

resources/theme/material-kit/assets/scss/material-kit/_reboot.scss

@@ -0,0 +1,24 @@
+body {
+  background-color: #FFFFFF;
+}
+
+a {
+  &:focus {
+    outline: none; // remove the terrible @include tab-focus();
+  }
+}
+
+button:focus {
+  outline: none;
+  //outline: 1px dotted;
+  //outline: 5px auto -webkit-focus-ring-color;
+}
+
+//// Prevent highlight on mobile
+//* {
+//  -webkit-tap-highlight-color: rgba($white, 0);
+//  -webkit-tap-highlight-color: transparent;
+//  &:focus {
+//    outline: 0;
+//  }
+//}

resources/theme/material-kit/assets/scss/material-kit/_responsive.scss

@@ -0,0 +1,441 @@
+@media all and (max-width: 991px) {
+    [class*="navbar-expand-"] > .container,
+    [class*="navbar-expand-"] > .container-fluid{
+        padding-left: 15px;
+        padding-right: 15px;
+    }
+
+    // multilevel dropdown-menu
+
+    .dropdown-menu.show {
+      .dropdown-item.open + .dropdown-menu.show {
+        right: 101% !important;
+
+        .dropdown-item.open + .dropdown-menu,
+        .dropdown-item.open + .dropdown-menu.show,{
+          left: -165px !important;
+        }
+      }
+    }
+
+    .navbar .navbar-collapse .navbar-nav > li.button-container{
+        padding: 15px;
+    }
+
+    .carousel .card .card-body{
+      max-width: 340px;
+      margin: 0 auto;
+      min-height: 400px;
+    }
+
+    .navbar-collapse{
+        position: fixed;
+        display: block;
+        top: 0px;
+        height: 100vh;
+        width: 230px;
+        right: 0;
+        margin-right: 0 !important;
+        z-index: 1032;
+        visibility: visible;
+        background-color: #999;
+        overflow-y: visible;
+        border-top: none;
+        text-align: left;
+        padding-right: 0;
+        padding-left: 0;
+
+        max-height: none !important;
+
+        @include transform-translate-x(230px);
+        @include transitions (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+
+        &::after{
+            top: 0;
+            left: 0;
+            height: 100%;
+            width: 100%;
+            position: absolute;
+            background-color: $white-color;
+            display: block;
+            content: "";
+            z-index: 1;
+        }
+
+        .dropdown-toggle:after{
+            position: absolute;
+            right: 16px;
+            margin-top: 8px;
+        }
+
+        .navbar-nav{
+            position: relative;
+            z-index: 3;
+
+            .nav-item{
+                .nav-link{
+                  color: $black-color;
+                  margin: 5px 15px;
+                }
+
+                &.active .nav-link,
+                &.active .nav-link:hover,
+                &.active .nav-link:focus,
+                &.active .nav-link:active{
+                  background-color: rgba(236, 237, 239, 1);
+                  color: $black-color;
+                }
+
+                &.button-container .nav-link{
+                  margin: 15px;
+                }
+
+                &:after{
+                  width: calc(100% - 30px);
+                  content: "";
+                  display: block;
+                  height: 1px;
+                  margin-left: 15px;
+                  background-color: #e5e5e5;
+                }
+
+                &:last-child {
+                    &:after{
+                        display: none;
+                    }
+                }
+            }
+        }
+
+        .nav-open &{
+            @include transform-translate-x(0px);
+        }
+    }
+
+    .nav-open{
+        .navbar-translate{
+            @include transform-translate-x(-230px);
+        }
+    }
+
+    .navbar{
+        .navbar-translate{
+            width: 100%;
+            position: relative;
+            display: flex;
+            -ms-flex-pack: justify !important;
+            justify-content: space-between !important;
+            -ms-flex-align: center;
+            align-items: center;
+            @include transitions-property (transform, 0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+        }
+
+        .dropdown.show .dropdown-menu{
+            display: block;
+        }
+
+        .dropdown .dropdown-menu{
+            display: none;
+        }
+
+        .dropdown-menu{
+            .dropdown-item{
+                margin-left: 1.5rem;
+                margin-right: 1.5rem;
+            }
+        }
+
+        .dropdown.show .dropdown-menu,
+        .dropdown .dropdown-menu{
+            background-color: transparent;
+            border: 0;
+            padding-bottom: 15px;
+            transition: none;
+            -webkit-box-shadow: none;
+            box-shadow: none;
+            transform: none !important;
+            width: auto;
+            margin-bottom: 15px;
+            padding-top: 0;
+            height: 300px;
+            animation: none;
+            opacity: 1;
+            overflow-y: scroll;
+        }
+    }
+
+    .navbar.navbar-transparent{
+        .navbar-toggler{
+            .navbar-toggler-icon{
+                background-color: $white-color;
+            }
+        }
+    }
+
+    #bodyClick {
+        height: 100%;
+        width: 100%;
+        position: fixed;
+        opacity: 0;
+        top: 0;
+        left: auto;
+        right: 230px;
+        content: "";
+        z-index: 1029;
+        overflow-x: hidden;
+    }
+
+    // for demo
+    #navbar .navbar-collapse,
+    #navigation .navbar-collapse{
+        display: none !important;
+    }
+
+}
+
+@media all and (min-width: 991px) {
+  .navbar .navbar-nav{
+    align-items: center;
+
+    .button-container{
+      margin-left: 0.1875px;
+    }
+  }
+  .contactus-2{
+    .card-contact{
+      margin: 80px 0 80px 150px;
+    }
+  }
+
+  .index-page {
+    .fileinput-new.thumbnail.img-circle {
+      margin-top: 50px;
+    }
+  }
+}
+
+@media screen and (max-width: 991px) {
+  .presentation-page {
+    .section-components {
+      .components-macbook {
+        max-width: 850px !important;
+        max-height: 480px !important;
+        margin-top: 12vh;
+        left: -12px;
+      }
+      .coloured-card-img,
+      .table-img {
+        display: none;
+      }
+      .social-img {
+        left: 47%;
+        top: 37%;
+      }
+      .pin-btn-img {
+        top: 54%;
+      }
+      .share-btn-img {
+        top: 12%;
+      }
+      .coloured-card-btn-img {
+        top: -2%;
+        left: 65%;
+      }
+    }
+    .section-content {
+      .area-img {
+        max-width: 130px;
+        max-height: 170px;
+      }
+      .info-img {
+        max-width: 170px;
+        max-height: 120px;
+      }
+    }
+  }
+
+    @include topbar-x-rotation();
+    @include topbar-back-rotation();
+    @include bottombar-x-rotation();
+    @include bottombar-back-rotation();
+
+  .navbar {
+    .navbar-toggler{
+      .navbar-toggler-icon:nth-child(2){
+        top: 0px;
+        @include bar-animation(topbar-back);
+      }
+      .navbar-toggler-icon:nth-child(3){
+        opacity: 1;
+      }
+      .navbar-toggler-icon:nth-child(4){
+        bottom: 0px;
+        @include bar-animation(bottombar-back);
+      }
+
+      &.toggled{
+        .navbar-toggler-icon:nth-child(2){
+          top: 6px;
+          @include bar-animation(topbar-x);
+        }
+        .navbar-toggler-icon:nth-child(3){
+          opacity: 0;
+        }
+        .navbar-toggler-icon:nth-child(4){
+          bottom: 6px;
+          @include bar-animation(bottombar-x);
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .presentation-page {
+    .section-components {
+      .components-macbook {
+        max-width: 350px !important;
+        max-height: 250px !important;
+        margin-top: 12vh;
+        left: -12px;
+      }
+      .coloured-card-img,
+      .table-img {
+        display: none;
+      }
+      .social-img {
+        left: -7%;
+        top: 37%;
+      }
+      .pin-btn-img {
+        top: 54%;
+      }
+      .share-btn-img {
+        top: 7%;
+      }
+      .coloured-card-btn-img {
+        top: -2%;
+      }
+    }
+  }
+
+  .card.card-form-horizontal {
+    .input-group {
+      padding-bottom: 10px;
+    }
+  }
+
+  .presentation-page,
+  .index-page,
+  .section-page{
+    #cd-vertical-nav{
+      display: none;
+    }
+  }
+
+  .index-page{
+    .cd-section{
+      .tim-typo .tim-note{
+        width: 60px;
+      }
+    }
+  }
+
+  .login-page {
+    .page-header {
+      min-height: 100vh;
+      max-height: 1000px;
+      height: 100%;
+
+      > .container {
+        padding-top: 20vh;
+        padding-bottom: 200px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 400px){
+  .cd-vertical-nav{
+    display: none !important;
+  }
+}
+
+@media screen and (min-width: 767px){
+  .bd-docs .bd-example {
+    .card.card-profile {
+      .card-header-image {
+        max-height: 100% !important;
+      }
+    }
+  }
+  .card-profile {
+    .card-header-image {
+      max-height: 215px;
+    }
+  }
+}
+
+
+// Menu on LEFT
+
+@media screen and (max-width: 991px){
+  .menu-on-left{
+    .page-header,
+    .main,
+    .navbar > div {
+      @include transform-translate-x(0px);
+      transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
+    }
+
+    .navbar .collapse{
+        left: 0;
+        top: -25px;
+        right: auto;
+        @include transform-translate-x(-230px);
+    }
+
+    .navbar .navbar-translate{
+      .navbar-brand {
+        position: absolute;
+        right: 0;
+        top: -15px;
+      }
+    }
+  }
+
+  .nav-open {
+    .menu-on-left {
+      .page-header,
+      .main {
+        @include transform-translate-x(230px);
+      }
+
+      .navbar .collapse{
+        @include transform-translate-x(0px);
+      }
+
+      .navbar > div .navbar-translate {
+        @include transform-translate-x(230px);
+        transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
+      }
+    }
+  }
+}
+
+@media (min-width: 575px) and (max-width: 991px){
+  .menu-on-left {
+    .navbar .collapse {
+      @include transform-translate-x(-255px);
+    }
+  }
+
+  .nav-open {
+    .menu-on-left {
+      .navbar .collapse {
+        @include transform-translate-x(-25px);
+        width: 245px;
+      }
+    }
+  }
+}

resources/theme/material-kit/assets/scss/material-kit/_ripples.scss

@@ -0,0 +1,41 @@
+// marker class (used as a selector for one-off elements to decorate)
+.ripple {
+  position: relative;
+}
+
+.ripple-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  pointer-events: none;
+  border-radius: inherit;
+
+  .ripple-decorator {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    margin-top: -10px;
+    margin-left: -10px;
+    pointer-events: none;
+    background-color: rgba($black, 0.05);
+    border-radius: 100%;
+    opacity: 0;
+    transform: scale(1);
+    transform-origin: 50%;
+
+    &.ripple-on {
+      opacity: 0.1;
+      transition: opacity 0.15s ease-in 0s,
+        transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
+    }
+
+    &.ripple-out {
+      opacity: 0;
+      transition: opacity 0.1s linear 0s !important;
+    }
+  }
+}

resources/theme/material-kit/assets/scss/material-kit/_switches.scss

@@ -0,0 +1,86 @@
+// http://codepen.io/rosskevin/pen/EPPwRR?editors=110
+.switch {
+  label {
+    position: relative;
+    padding-left: $bmd-switch-width + $bmd-switch-label-padding; // absolutely positioned so add the radio size
+
+    .bmd-switch-track {
+      position: absolute;
+      top: calc-top($line-height-base, $font-size-base, $bmd-switch-height);
+      left: 0;
+      display: inline-block;
+      width: $bmd-switch-width;
+      height: $bmd-switch-height;
+      cursor: pointer;
+      background-image: linear-gradient(
+        to right,
+        $bmd-switch-unchecked-bg 0%,
+        $bmd-switch-unchecked-bg 50%,
+        $bmd-switch-checked-bg 50%,
+        $bmd-switch-checked-bg 100%
+      );
+      background-position: 0%;
+      background-size: $bmd-switch-width * 2 $bmd-switch-height;
+      border-radius: $bmd-switch-width;
+      transition: background-position 0.2s ease-in;
+
+      &::after {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        display: block;
+        align-self: center;
+        width: $bmd-switch-handle-size;
+        height: $bmd-switch-handle-size;
+        content: "";
+        background: $bmd-switch-handle-unchecked-bg;
+        border-radius: 100%;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+        transition: left 0.2s ease-in, background-color 0.2s ease-in,
+          transform 0.3s ease;
+        transform: translateY(-50%);
+      }
+
+      // Jelly effect on click
+      &:active::after {
+        transform: translateY(-50%) scale3d(1.15, 0.85, 1);
+      }
+    }
+
+    input {
+      // Hide original checkbox, but don't use `display: none` to allow focus on it using keyboard
+      position: absolute;
+      display: block;
+      width: 0;
+      height: 0;
+      opacity: 0;
+
+      &:checked {
+        + .bmd-switch-track {
+          background-position: -100%;
+          &::after {
+            left: unquote(
+              "calc(100% - #{$bmd-switch-handle-size})"
+            ); //calc(100% - $bmd-switch-handle-size);
+            background-color: $bmd-switch-handle-checked-bg;
+          }
+        }
+      }
+
+      &:disabled {
+        // No jelly effect on disabled switchs
+        + .bmd-switch-track:active::after {
+          transform: translateY(-50%);
+        }
+
+        + .bmd-switch-track {
+          cursor: default;
+          background: $bmd-switch-disabled-bg;
+          &::after {
+            background: $bmd-switch-handle-disabled-bg;
+          }
+        }
+      }
+    }
+  }
+}

resources/theme/material-kit/assets/scss/material-kit/_tabs.scss

@@ -0,0 +1,73 @@
+
+.nav-tabs {
+    border: 0;
+    border-radius: $border-radius-base;
+    padding: 0 15px;
+
+    .nav-item {
+        .nav-link {
+            color: $white-color;
+            border: 0;
+            margin: 0;
+            border-radius: $border-radius-base;
+            line-height: $mdb-btn-font-size-base * 2;
+            text-transform: uppercase;
+            font-size: $mdb-btn-font-size-base;
+            padding: 10px 15px;
+            background-color: transparent;
+            transition: 0.3s background-color 0s;
+
+            &:hover {
+                border: 0;
+            }
+        }
+        .nav-link,
+        .nav-link:hover,
+        .nav-link:focus {
+            border: 0 !important;
+            color: $white-color !important;
+            font-weight: $font-weight-bold;
+        }
+        &.disabled .nav-link,
+        &.disabled .nav-link:hover {
+            color: rgba(255,255,255,0.5);
+        }
+
+        .material-icons{
+            margin: -1px 5px 0 0;
+        }
+
+        .nav-link.active{
+            background-color: rgba(255,255,255, .2);
+            transition: 0.3s background-color 0.2s;
+        }
+    }
+}
+
+
+.nav-tabs {
+  .nav-link {
+    border-bottom: $bmd-nav-tabs-border-size solid transparent;
+  }
+
+  // colors
+  @include bmd-tabs-color($bmd-nav-tabs-color, $bmd-nav-tabs-active-color, $bmd-nav-tabs-active-border-color, $bmd-nav-tabs-disabled-link-color, $bmd-nav-tabs-disabled-link-color-hover);
+
+  &.header-primary {
+    @include bmd-tabs-color($bmd-nav-tabs-primary-color, $bmd-nav-tabs-primary-active-color, $bmd-nav-tabs-primary-active-border-color, $bmd-nav-tabs-primary-disabled-link-color, $bmd-nav-tabs-primary-disabled-link-color-hover);
+  }
+
+  &.bg-inverse {
+    @include bmd-tabs-color($bmd-nav-tabs-inverse-color, $bmd-nav-tabs-inverse-active-color, $bmd-nav-tabs-inverse-active-border-color, $bmd-nav-tabs-inverse-disabled-link-color, $bmd-nav-tabs-inverse-disabled-link-color-hover);
+  }
+}
+
+
+
+.card-nav-tabs{
+    margin-top: 45px;
+
+    .card-header{
+        margin-top: -30px !important;
+    }
+}

resources/theme/material-kit/assets/scss/material-kit/_togglebutton.scss

@@ -0,0 +1,85 @@
+.togglebutton {
+  vertical-align: middle;
+  &, label, input, .toggle {
+    user-select: none;
+  }
+  label {
+    cursor: pointer;
+    color: $mdb-toggle-label-color;
+    @include mdb-label-color-toggle-focus();
+
+    // Hide original checkbox
+    input[type=checkbox] {
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+
+    .toggle {
+      text-align: left; // Issue #737 horizontal form
+      margin-left: 5px;
+    }
+    // Switch bg off and disabled
+    .toggle,
+    input[type=checkbox][disabled] + .toggle {
+      content: "";
+      display: inline-block;
+      width: 30px;
+      height: 15px;
+      background-color: rgba(80, 80, 80, 0.7);
+      border-radius: 15px;
+      margin-right: 15px;
+      transition: background 0.3s ease;
+      vertical-align: middle;
+    }
+    // Handle off
+    .toggle:after {
+      content: "";
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      background-color: #FFFFFF;
+      border-radius: 20px;
+      position: relative;
+      box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
+      left: -5px;
+      top: -2.5px;
+      border: 1px solid $mdb-checkbox-border-color;
+      transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
+    }
+    input[type=checkbox] {
+      // Handle disabled
+      &[disabled] {
+        & + .toggle:after,
+        &:checked + .toggle:after {
+          background-color: #BDBDBD;
+        }
+      }
+
+      & + .toggle:active:after,
+      &[disabled] + .toggle:active:after {
+        box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
+      }
+
+      // Ripple off and disabled
+      &:checked + .toggle:after {
+        left: 15px;
+      }
+    }
+
+    // set bg when checked
+    input[type=checkbox]:checked {
+      + .toggle {
+        background-color: rgba($brand-primary, (70/100)); // Switch bg on
+      }
+
+      + .toggle:after {
+        border-color: $brand-primary; // Handle on
+      }
+
+      + .toggle:active:after {
+        box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba($brand-primary, (10/100)); // Ripple on
+      }
+    }
+  }
+}

resources/theme/material-kit/assets/scss/material-kit/_tooltip.scss

@@ -0,0 +1,49 @@
+// specs https://material.google.com/components/tooltips.html#tooltips-tooltips-desktop-
+
+.tooltip-arrow {
+  display: none;
+}
+
+.tooltip.show{
+    opacity: 1;
+    @include transform-translate-y(0px);
+
+
+}
+.tooltip{
+    opacity: 0;
+    transition: opacity, transform .2s ease;
+    @include transform-translate-y(5px);
+    font-size: $tooltip-font-size;
+
+    &.bs-tooltip-top,
+    &.bs-tooltip-auto[x-placement^="top"]{
+        & .arrow::before{
+            border-top-color: $white-color;
+        }
+    }
+
+    &.bs-tooltip-right,
+    &.bs-tooltip-auto[x-placement^="right"]{
+        & .arrow::before{
+            border-right-color: $white-color;
+        }
+    }
+    &.bs-tooltip-left,
+    &.bs-tooltip-auto[x-placement^="left"]{
+        & .arrow::before{
+            border-left-color: $white-color;
+        }
+    }
+    &.bs-tooltip-bottom,
+    &.bs-tooltip-auto[x-placement^="bottom"]{
+        & .arrow::before{
+            border-bottom-color: $white-color;
+        }
+    }
+}
+
+.tooltip-inner{
+    padding: 10px 15px;
+    min-width: 130px;
+}

resources/theme/material-kit/assets/scss/material-kit/_type.scss

@@ -0,0 +1,145 @@
+body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
+  font-family: $font-family-sans-serif;
+  font-weight: 300;
+  line-height: 1.5em;
+}
+
+h1,h2,h3,.h1,.h2,.h3{
+    margin-top: 20px;
+    margin-bottom: 10px;
+}
+
+h4,h5,h6,.h4,.h5,.h6{
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+html *{
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+h1, .h1 {
+    font-size: $font-size-h1;
+    line-height: 1.15em;
+}
+h2, .h2{
+    font-size: $font-size-h2;
+    line-height: 1.5em;
+}
+h3, .h3{
+    font-size: $font-size-h3;
+    line-height: 1.4em;
+}
+h4, .h4{
+    font-size: $font-size-h4;
+    line-height: 1.5em;
+}
+h5, .h5 {
+    font-size: $font-size-h5;
+    line-height: 1.55em;
+    margin-bottom: 15px;
+}
+h6, .h6{
+    font-size: $font-size-h6;
+    text-transform: uppercase;
+    font-weight: $font-weight-bold;
+}
+p{
+    font-size: $font-paragraph;
+    margin: 0 0 10px;
+}
+
+b{
+    font-weight: 700;
+}
+
+small,
+.small{
+    font-size: 75%;
+    color: #777;
+}
+
+.title,
+.card-title,
+.info-title,
+.footer-brand,
+.footer-big h5,
+.footer-big h4,
+.media .media-heading{
+    font-weight: $font-weight-extra-bold;
+    font-family: $font-family-serif;
+
+    &,
+    a{
+        color: $black-color;
+        text-decoration: none;
+    }
+}
+
+h2.title{
+    margin-bottom: $headings-margin-bottom * 2;
+}
+
+.description,
+.card-description,
+.footer-big p{
+    color: $gray-light;
+}
+
+.text-warning {
+  color: $brand-warning !important;
+}
+.text-primary {
+  color: $brand-primary !important;
+}
+.text-danger {
+  color: $brand-danger !important;
+}
+.text-success {
+  color: $brand-success !important;
+}
+.text-info {
+  color: $brand-info !important;
+}
+.text-rose{
+    color: $brand-rose !important;
+}
+.text-gray{
+    color: $gray-color !important;
+}
+
+.space{
+    height: 130px;
+    display: block;
+}
+.space-110{
+    height: 110px;
+    display: block;
+}
+.space-50{
+    height: 50px;
+    display: block;
+}
+.space-70{
+    height: 70px;
+    display: block;
+}
+
+.blockquote{
+    padding: 10px 20px;
+    margin: 0 0 20px;
+    border-left: 5px solid #eee;
+
+    p{
+        font-size: 1.063rem;
+        font-style: italic;
+    }
+
+    small{
+        display: block;
+        font-size: 80%;
+        line-height: 1.42857143;
+        color: #777;
+    }
+}

resources/theme/material-kit/assets/scss/material-kit/_variables.scss

@@ -0,0 +1,39 @@
+@import "variables/colors";
+@import "variables/shadow";
+
+@import "variables/bootstrap-material-design-base";
+
+// Customized BS variables
+@import "variables/custom-forms";
+@import "variables/spacing";
+@import "variables/body";
+@import "variables/brand";
+@import "variables/buttons";
+@import "variables/card";
+@import "variables/code";
+@import "variables/dropdown";
+@import "variables/forms";
+@import "variables/list-group";
+@import "variables/nav";
+@import "variables/pagination";
+@import "variables/state";
+@import "variables/tables";
+@import "variables/tooltip";
+@import "variables/type";
+@import "variables/modals";
+@import "variables/carousel";
+
+// import their vars after customization for use below
+$enable-flex: true; // fully adopt flexbox layouts
+$enable-shadows: true; // enable shadows, set to false to turn off shadows
+
+// Core Bootstrap Variables
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+
+@import "variables/layout";
+@import "variables/menu";
+@import "variables/drawer";
+@import "variables/snackbar";
+
+@import "variables/bootstrap-material-design";

resources/theme/material-kit/assets/scss/material-kit/bootstrap/scss/_alert.scss

@@ -0,0 +1,51 @@
+//
+// Base styles
+//
+
+.alert {
+  position: relative;
+  padding: $alert-padding-y $alert-padding-x;
+  margin-bottom: $alert-margin-bottom;
+  border: $alert-border-width solid transparent;
+  @include border-radius($alert-border-radius);
+}
+
+// Headings for larger alerts
+.alert-heading {
+  // Specified to prevent conflicts of changing $headings-color
+  color: inherit;
+}
+
+// Provide class for links that match alerts
+.alert-link {
+  font-weight: $alert-link-font-weight;
+}
+
+
+// Dismissible alerts
+//
+// Expand the right padding and account for the close button's positioning.
+
+.alert-dismissible {
+  padding-right: ($close-font-size + $alert-padding-x * 2);
+
+  // Adjust close link position
+  .close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: $alert-padding-y $alert-padding-x;
+    color: inherit;
+  }
+}
+
+
+// Alternate styles
+//
+// Generate contextual modifier classes for colorizing the alert.
+
+@each $color, $value in $theme-colors {
+  .alert-#{$color} {
+    @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
+  }
+}

resources/theme/material-kit/assets/scss/material-kit/bootstrap/scss/_badge.scss

@@ -0,0 +1,47 @@
+// Base class
+//
+// Requires one of the contextual, color modifier classes for `color` and
+// `background-color`.
+
+.badge {
+  display: inline-block;
+  padding: $badge-padding-y $badge-padding-x;
+  font-size: $badge-font-size;
+  font-weight: $badge-font-weight;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  @include border-radius($badge-border-radius);
+
+  // Empty badges collapse automatically
+  &:empty {
+    display: none;
+  }
+}
+
+// Quick fix for badges in buttons
+.btn .badge {
+  position: relative;
+  top: -1px;
+}
+
+// Pill badges
+//
+// Make them extra rounded with a modifier to replace v3's badges.
+
+.badge-pill {
+  padding-right: $badge-pill-padding-x;
+  padding-left: $badge-pill-padding-x;
+  @include border-radius($badge-pill-border-radius);
+}
+
+// Colors
+//
+// Contextual variations (linked badges get darker on :hover).
+
+@each $color, $value in $theme-colors {
+  .badge-#{$color} {
+    @include badge-variant($value);
+  }
+}

resources/theme/material-kit/assets/scss/material-kit/bootstrap/scss/_breadcrumb.scss

@@ -0,0 +1,38 @@
+.breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  padding: $breadcrumb-padding-y $breadcrumb-padding-x;
+  margin-bottom: $breadcrumb-margin-bottom;
+  list-style: none;
+  background-color: $breadcrumb-bg;
+  @include border-radius($border-radius);
+}
+
+.breadcrumb-item {
+  // The separator between breadcrumbs (by default, a forward-slash: "/")
+  + .breadcrumb-item::before {
+    display: inline-block; // Suppress underlining of the separator in modern browsers
+    padding-right: $breadcrumb-item-padding;
+    padding-left: $breadcrumb-item-padding;
+    color: $breadcrumb-divider-color;
+    content: "#{$breadcrumb-divider}";
+  }
+
+  // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
+  // without `<ul>`s. The `::before` pseudo-element generates an element
+  // *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
+  //
+  // To trick IE into suppressing the underline, we give the pseudo-element an
+  // underline and then immediately remove it.
+  + .breadcrumb-item:hover::before {
+    text-decoration: underline;
+  }
+  // stylelint-disable-next-line no-duplicate-selectors
+  + .breadcrumb-item:hover::before {
+    text-decoration: none;
+  }
+
+  &.active {
+    color: $breadcrumb-active-color;
+  }
+}

resources/theme/material-kit/assets/scss/material-kit/bootstrap/scss/_button-group.scss

@@ -0,0 +1,166 @@
+// stylelint-disable selector-no-qualifying-type
+
+// Make the div behave like a button
+.btn-group,
+.btn-group-vertical {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle; // match .btn alignment given font-size hack above
+
+  > .btn {
+    position: relative;
+    flex: 0 1 auto;
+
+    // Bring the hover, focused, and "active" buttons to the front to overlay
+    // the borders properly
+    @include hover {
+      z-index: 1;
+    }
+    &:focus,
+    &:active,
+    &.active {
+      z-index: 1;
+    }
+  }
+
+  // Prevent double borders when buttons are next to each other
+  .btn + .btn,
+  .btn + .btn-group,
+  .btn-group + .btn,
+  .btn-group + .btn-group {
+    margin-left: -$btn-border-width;
+  }
+}
+
+// Optional: Group multiple button groups together for a toolbar
+.btn-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+
+  .input-group {
+    width: auto;
+  }
+}
+
+.btn-group {
+  > .btn:first-child {
+    margin-left: 0;
+  }
+
+  // Reset rounded corners
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .btn {
+    @include border-right-radius(0);
+  }
+
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) > .btn {
+    @include border-left-radius(0);
+  }
+}
+
+// Sizing
+//
+// Remix the default button sizing classes into new ones for easier manipulation.
+
+.btn-group-sm > .btn { @extend .btn-sm; }
+.btn-group-lg > .btn { @extend .btn-lg; }
+
+
+//
+// Split button dropdowns
+//
+
+.dropdown-toggle-split {
+  padding-right: $btn-padding-x * .75;
+  padding-left: $btn-padding-x * .75;
+
+  &::after {
+    margin-left: 0;
+  }
+}
+
+.btn-sm + .dropdown-toggle-split {
+  padding-right: $btn-padding-x-sm * .75;
+  padding-left: $btn-padding-x-sm * .75;
+}
+
+.btn-lg + .dropdown-toggle-split {
+  padding-right: $btn-padding-x-lg * .75;
+  padding-left: $btn-padding-x-lg * .75;
+}
+
+
+// The clickable button for toggling the menu
+// Set the same inset shadow as the :active state
+.btn-group.show .dropdown-toggle {
+  @include box-shadow($btn-active-box-shadow);
+
+  // Show no shadow for `.btn-link` since it has no other button styles.
+  &.btn-link {
+    @include box-shadow(none);
+  }
+}
+
+
+//
+// Vertical button groups
+//
+
+.btn-group-vertical {
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+
+  .btn,
+  .btn-group {
+    width: 100%;
+  }
+
+  > .btn + .btn,
+  > .btn + .btn-group,
+  > .btn-group + .btn,
+  > .btn-group + .btn-group {
+    margin-top: -$btn-border-width;
+    margin-left: 0;
+  }
+
+  // Reset rounded corners
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .btn {
+    @include border-bottom-radius(0);
+  }
+
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) > .btn {
+    @include border-top-radius(0);
+  }
+}
+
+
+// Checkbox and radio options
+//
+// In order to support the browser's form validation feedback, powered by the
+// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
+// `display: none;` or `visibility: hidden;` as that also hides the popover.
+// Simply visually hiding the inputs via `opacity` would leave them clickable in
+// certain cases which is prevented by using `clip` and `pointer-events`.
+// This way, we ensure a DOM element is visible to position the popover from.
+//
+// See https://github.com/twbs/bootstrap/pull/12794 and
+// https://github.com/twbs/bootstrap/pull/14559 for more information.
+
+.btn-group-toggle {
+  > .btn,
+  > .btn-group > .btn {
+    margin-bottom: 0; // Override default `<label>` value
+
+    input[type="radio"],
+    input[type="checkbox"] {
+      position: absolute;
+      clip: rect(0, 0, 0, 0);
+      pointer-events: none;
+    }
+  }
+}

resources/theme/material-kit/assets/scss/material-kit/bootstrap/scss/_buttons.scss

@@ -0,0 +1,143 @@
+// stylelint-disable selector-no-qualifying-type
+
+//
+// Base styles
+//
+
+.btn {
+  display: inline-block;
+  font-weight: $btn-font-weight;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+  border: $btn-border-width solid transparent;
+  @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius);
+  @include transition($btn-transition);
+
+  // Share hover and focus styles
+  @include hover-focus {
+    text-decoration: none;
+  }
+
+  &:focus,
+  &.focus {
+    outline: 0;
+    box-shadow: $btn-focus-box-shadow;
+  }
+
+  // Disabled comes first so active can properly restyle
+  &.disabled,
+  &:disabled {
+    opacity: $btn-disabled-opacity;
+    @include box-shadow(none);
+  }
+
+  // Opinionated: add "hand" cursor to non-disabled .btn elements
+  &:not(:disabled):not(.disabled) {
+    cursor: pointer;
+  }
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active {
+    background-image: none;
+    @include box-shadow($btn-active-box-shadow);
+
+    &:focus {
+      @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+    }
+  }
+}
+
+// Future-proof disabling of clicks on `<a>` elements
+a.btn.disabled,
+fieldset:disabled a.btn {
+  pointer-events: none;
+}
+
+
+//
+// Alternate buttons
+//
+
+@each $color, $value in $theme-colors {
+  .btn-#{$color} {
+    @include button-variant($value, $value);
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .btn-outline-#{$color} {
+    @include button-outline-variant($value);
+  }
+}
+
+
+//
+// Link buttons
+//
+
+// Make a button look and behave like a link
+.btn-link {
+  font-weight: $font-weight-normal;
+  color: $link-color;
+  background-color: transparent;
+
+  @include hover {
+    color: $link-hover-color;
+    text-decoration: $link-hover-decoration;
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  &:focus,
+  &.focus {
+    text-decoration: $link-hover-decoration;
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  &:disabled,
+  &.disabled {
+    color: $btn-link-disabled-color;
+  }
+
+  // No need for an active state here
+}
+
+
+//
+// Button Sizes
+//
+
+.btn-lg {
+  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
+}
+
+.btn-sm {
+  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
+}
+
+
+//
+// Block button
+//
+
+.btn-block {
+  display: block;
+  width: 100%;
+
+  // Vertically space out multiple block buttons
+  + .btn-block {
+    margin-top: $btn-block-spacing-y;
+  }
+}
+
+// Specificity overrides
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  &.btn-block {
+    width: 100%;
+  }
+}

resources/theme/material-kit/assets/scss/material-kit/bootstrap/scss/_card.scss

@@ -0,0 +1,270 @@
+//
+// Base styles
+//
+
+.card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: $card-bg;
+  background-clip: border-box;
+  border: $card-border-width solid $card-border-color;
+  @include border-radius($card-border-radius);
+
+  > hr {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  > .list-group:first-child {
+    .list-group-item:first-child {
+      @include border-top-radius($card-border-radius);
+    }
+  }
+
+  > .list-group:last-child {
+    .list-group-item:last-child {
+      @include border-bottom-radius($card-border-radius);
+    }
+  }
+}
+
+.card-body {
+  // Enable `flex-grow: 1` for decks and groups so that card blocks take up
+  // as much space as possible, ensuring footers are aligned to the bottom.
+  flex: 1 1 auto;
+  padding: $card-spacer-x;
+}
+
+.card-title {
+  margin-bottom: $card-spacer-y;
+}
+
+.card-subtitle {
+  margin-top: -($card-spacer-y / 2);
+  margin-bottom: 0;
+}
+
+.card-text:last-child {
+  margin-bottom: 0;
+}
+
+.card-link {
+  @include hover {
+    text-decoration: none;
+  }
+
+  + .card-link {
+    margin-left: $card-spacer-x;
+  }
+}
+
+//
+// Optional textual caps
+//
+
+.card-header {
+  padding: $card-spacer-y $card-spacer-x;
+  margin-bottom: 0; // Removes the default margin-bottom of <hN>
+  background-color: $card-cap-bg;
+  border-bottom: $card-border-width solid $card-border-color;
+
+  &:first-child {
+    @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
+  }
+
+  + .list-group {
+    .list-group-item:first-child {
+      border-top: 0;
+    }
+  }
+}
+
+.card-footer {
+  padding: $card-spacer-y $card-spacer-x;
+  background-color: $card-cap-bg;
+  border-top: $card-border-width solid $card-border-color;
+
+  &:last-child {
+    @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
+  }
+}
+
+
+//
+// Header navs
+//
+
+.card-header-tabs {
+  margin-right: -($card-spacer-x / 2);
+  margin-bottom: -$card-spacer-y;
+  margin-left: -($card-spacer-x / 2);
+  border-bottom: 0;
+}
+
+.card-header-pills {
+  margin-right: -($card-spacer-x / 2);
+  margin-left: -($card-spacer-x / 2);
+}
+
+// Card image
+.card-img-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: $card-img-overlay-padding;
+}
+
+.card-img {
+  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
+  @include border-radius($card-inner-border-radius);
+}
+
+// Card image caps
+.card-img-top {
+  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
+  @include border-top-radius($card-inner-border-radius);
+}
+
+.card-img-bottom {
+  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
+  @include border-bottom-radius($card-inner-border-radius);
+}
+
+
+// Card deck
+
+.card-deck {
+  display: flex;
+  flex-direction: column;
+
+  .card {
+    margin-bottom: $card-deck-margin;
+  }
+
+  @include media-breakpoint-up(sm) {
+    flex-flow: row wrap;
+    margin-right: -$card-deck-margin;
+    margin-left: -$card-deck-margin;
+
+    .card {
+      display: flex;
+      // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
+      flex: 1 0 0%;
+      flex-direction: column;
+      margin-right: $card-deck-margin;
+      margin-bottom: 0; // Override the default
+      margin-left: $card-deck-margin;
+    }
+  }
+}
+
+
+//
+// Card groups
+//
+
+.card-group {
+  display: flex;
+  flex-direction: column;
+
+  // The child selector allows nested `.card` within `.card-group`
+  // to display properly.
+  > .card {
+    margin-bottom: $card-group-margin;
+  }
+
+  @include media-breakpoint-up(sm) {
+    flex-flow: row wrap;
+    // The child selector allows nested `.card` within `.card-group`
+    // to display properly.
+    > .card {
+      // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
+      flex: 1 0 0%;
+      margin-bottom: 0;
+
+      + .card {
+        margin-left: 0;
+        border-left: 0;
+      }
+
+      // Handle rounded corners
+      @if $enable-rounded {
+        &:first-child {
+          @include border-right-radius(0);
+
+          .card-img-top,
+          .card-header {
+            border-top-right-radius: 0;
+          }
+          .card-img-bottom,
+          .card-footer {
+            border-bottom-right-radius: 0;
+          }
+        }
+
+        &:last-child {
+          @include border-left-radius(0);
+
+          .card-img-top,
+          .card-header {
+            border-top-left-radius: 0;
+          }
+          .card-img-bottom,
+          .card-footer {
+            border-bottom-left-radius: 0;
+          }
+        }
+
+        &:only-child {
+          @include border-radius($card-border-radius);
+
+          .card-img-top,
+          .card-header {
+            @include border-top-radius($card-border-radius);
+          }
+          .card-img-bottom,
+          .card-footer {
+            @include border-bottom-radius($card-border-radius);
+          }
+        }
+
+        &:not(:first-child):not(:last-child):not(:only-child) {
+          @include border-radius(0);
+
+          .card-img-top,
+          .card-img-bottom,
+          .card-header,
+          .card-footer {
+            @include border-radius(0);
+          }
+        }
+      }
+    }
+  }
+}
+
+
+//
+// Columns
+//
+
+.card-columns {
+  .card {
+    margin-bottom: $card-columns-margin;
+  }
+
+  @include media-breakpoint-up(sm) {
+    column-count: $card-columns-count;
+    column-gap: $card-columns-gap;
+
+    .card {
+      display: inline-block; // Don't let them vertically span multiple columns
+      width: 100%; // Don't let their width change
+    }
+  }
+}

resources/theme/material-kit/assets/scss/material-kit/bootstrap/scss/_carousel.scss

@@ -0,0 +1,191 @@
+// Wrapper for the slide container and indicators
+.carousel {
+  position: relative;
+}
+
+.carousel-inner {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.carousel-item {
+  position: relative;
+  display: none;
+  align-items: center;
+  width: 100%;
+  @include transition($carousel-transition);
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+
+.carousel-item.active,
+.carousel-item-next,
+.carousel-item-prev {
+  display: block;
+}
+
+.carousel-item-next,
+.carousel-item-prev {
+  position: absolute;
+  top: 0;
+}
+
+// CSS3 transforms when supported by the browser
+.carousel-item-next.carousel-item-left,
+.carousel-item-prev.carousel-item-right {
+  transform: translateX(0);
+
+  @supports (transform-style: preserve-3d) {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.carousel-item-next,
+.active.carousel-item-right {
+  transform: translateX(100%);
+
+  @supports (transform-style: preserve-3d) {
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+.carousel-item-prev,
+.active.carousel-item-left {
+  transform: translateX(-100%);
+
+  @supports (transform-style: preserve-3d) {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+
+//
+// Left/right controls for nav
+//
+
+.carousel-control-prev,
+.carousel-control-next {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  // Use flex for alignment (1-3)
+  display: flex; // 1. allow flex styles
+  align-items: center; // 2. vertically center contents
+  justify-content: center; // 3. horizontally center contents
+  width: $carousel-control-width;
+  color: $carousel-control-color;
+  text-align: center;
+  opacity: $carousel-control-opacity;
+  // We can't have a transition here because WebKit cancels the carousel
+  // animation if you trip this while in the middle of another animation.
+
+  // Hover/focus state
+  @include hover-focus {
+    color: $carousel-control-color;
+    text-decoration: none;
+    outline: 0;
+    opacity: .9;
+  }
+}
+.carousel-control-prev {
+  left: 0;
+  @if $enable-gradients {
+    background: linear-gradient(90deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001));
+  }
+}
+.carousel-control-next {
+  right: 0;
+  @if $enable-gradients {
+    background: linear-gradient(270deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001));
+  }
+}
+
+// Icons for within
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  display: inline-block;
+  width: $carousel-control-icon-width;
+  height: $carousel-control-icon-width;
+  background: transparent no-repeat center center;
+  background-size: 100% 100%;
+}
+.carousel-control-prev-icon {
+  background-image: $carousel-control-prev-icon-bg;
+}
+.carousel-control-next-icon {
+  background-image: $carousel-control-next-icon-bg;
+}
+
+
+// Optional indicator pips
+//
+// Add an ordered list with the following class and add a list item for each
+// slide your carousel holds.
+
+.carousel-indicators {
+  position: absolute;
+  right: 0;
+  bottom: 10px;
+  left: 0;
+  z-index: 15;
+  display: flex;
+  justify-content: center;
+  padding-left: 0; // override <ol> default
+  // Use the .carousel-control's width as margin so we don't overlay those
+  margin-right: $carousel-control-width;
+  margin-left: $carousel-control-width;
+  list-style: none;
+
+  li {
+    position: relative;
+    flex: 0 1 auto;
+    width: $carousel-indicator-width;
+    height: $carousel-indicator-height;
+    margin-right: $carousel-indicator-spacer;
+    margin-left: $carousel-indicator-spacer;
+    text-indent: -999px;
+    background-color: rgba($carousel-indicator-active-bg, .5);
+
+    // Use pseudo classes to increase the hit area by 10px on top and bottom.
+    &::before {
+      position: absolute;
+      top: -10px;
+      left: 0;
+      display: inline-block;
+      width: 100%;
+      height: 10px;
+      content: "";
+    }
+    &::after {
+      position: absolute;
+      bottom: -10px;
+      left: 0;
+      display: inline-block;
+      width: 100%;
+      height: 10px;
+      content: "";
+    }
+  }
+
+  .active {
+    background-color: $carousel-indicator-active-bg;
+  }
+}
+
+
+// Optional captions
+//
+//
+
+.carousel-caption {
+  position: absolute;
+  right: ((100% - $carousel-caption-width) / 2);
+  bottom: 20px;
+  left: ((100% - $carousel-caption-width) / 2);
+  z-index: 10;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  color: $carousel-caption-color;
+  text-align: center;
+}

resources/theme/material-kit/assets/scss/material-kit/bootstrap/scss/_close.scss

@@ -0,0 +1,34 @@
+.close {
+  float: right;
+  font-size: $close-font-size;
+  font-weight: $close-font-weight;
+  line-height: 1;
+  color: $close-color;
+  text-shadow: $close-text-shadow;
+  opacity: .5;
+
+  @include hover-focus {
+    color: $close-color;
+    text-decoration: none;
+    opacity: .75;
+  }
+
+  // Opinionated: add "hand" cursor to non-disabled .close elements
+  &:not(:disabled):not(.disabled) {
+    cursor: pointer;
+  }
+}
+
+// Additional properties for button version
+// iOS requires the button element instead of an anchor tag.
+// If you want the anchor version, it requires `href="#"`.
+// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+
+// stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type
+button.close {
+  padding: 0;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+}
+// stylelint-enable

resources/theme/material-kit/assets/scss/material-kit/bootstrap/scss/_code.scss

@@ -0,0 +1,56 @@
+// Inline and block code styles
+code,
+kbd,
+pre,
+samp {
+  font-family: $font-family-monospace;
+}
+
+// Inline code
+code {
+  font-size: $code-font-size;
+  color: $code-color;
+  word-break: break-word;
+
+  // Streamline the style when inside anchors to avoid broken underline and more
+  a > & {
+    color: inherit;
+  }
+}
+
+// User input typically entered via keyboard
+kbd {
+  padding: $kbd-padding-y $kbd-padding-x;
+  font-size: $kbd-font-size;
+  color: $kbd-color;
+  background-color: $kbd-bg;
+  @include border-radius($border-radius-sm);
+  @include box-shadow($kbd-box-shadow);
+
+  kbd {
+    padding: 0;
+    font-size: 100%;
+    font-weight: $nested-kbd-font-weight;
+    @include box-shadow(none);
+  }
+}
+
+// Blocks of code
+pre {
+  display: block;
+  font-size: $code-font-size;
+  color: $pre-color;
+
+  // Account for some code outputs that place code tags in pre tags
+  code {
+    font-size: inherit;
+    color: inherit;
+    word-break: normal;
+  }
+}
+
+// Enable scrollable blocks of code
+.pre-scrollable {
+  max-height: $pre-scrollable-max-height;
+  overflow-y: scroll;
+}

resources/theme/material-kit/assets/scss/material-kit/bootstrap/scss/_custom-forms.scss

@@ -0,0 +1,297 @@
+// Embedded icons from Open Iconic.
+// Released under MIT and copyright 2014 Waybury.
+// https://useiconic.com/open
+
+
+// Checkboxes and radios
+//
+// Base class takes care of all the key behavioral aspects.
+
+.custom-control {
+  position: relative;
+  display: block;
+  min-height: (1rem * $line-height-base);
+  padding-left: $custom-control-gutter;
+}
+
+.custom-control-inline {
+  display: inline-flex;
+  margin-right: $custom-control-spacer-x;
+}
+
+.custom-control-input {
+  position: absolute;
+  z-index: -1; // Put the input behind the label so it doesn't overlay text
+  opacity: 0;
+
+  &:checked ~ .custom-control-label::before {
+    color: $custom-control-indicator-checked-color;
+    @include gradient-bg($custom-control-indicator-checked-bg);
+    @include box-shadow($custom-control-indicator-checked-box-shadow);
+  }
+
+  &:focus ~ .custom-control-label::before {
+    // the mixin is not used here to make sure there is feedback
+    box-shadow: $custom-control-indicator-focus-box-shadow;
+  }
+
+  &:active ~ .custom-control-label::before {
+    color: $custom-control-indicator-active-color;
+    background-color: $custom-control-indicator-active-bg;
+    @include box-shadow($custom-control-indicator-active-box-shadow);
+  }
+
+  &:disabled {
+    ~ .custom-control-label {
+      color: $custom-control-label-disabled-color;
+
+      &::before {
+        background-color: $custom-control-indicator-disabled-bg;
+      }
+    }
+  }
+}
+
+// Custom control indicators
+//
+// Build the custom controls out of psuedo-elements.
+
+.custom-control-label {
+  margin-bottom: 0;
+
+  // Background-color and (when enabled) gradient
+  &::before {
+    position: absolute;
+    top: (($line-height-base - $custom-control-indicator-size) / 2);
+    left: 0;
+    display: block;
+    width: $custom-control-indicator-size;
+    height: $custom-control-indicator-size;
+    pointer-events: none;
+    content: "";
+    user-select: none;
+    background-color: $custom-control-indicator-bg;
+    @include box-shadow($custom-control-indicator-box-shadow);
+  }
+
+  // Foreground (icon)
+  &::after {
+    position: absolute;
+    top: (($line-height-base - $custom-control-indicator-size) / 2);
+    left: 0;
+    display: block;
+    width: $custom-control-indicator-size;
+    height: $custom-control-indicator-size;
+    content: "";
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: $custom-control-indicator-bg-size;
+  }
+}
+
+
+// Checkboxes
+//
+// Tweak just a few things for checkboxes.
+
+.custom-checkbox {
+  .custom-control-label::before {
+    @include border-radius($custom-checkbox-indicator-border-radius);
+  }
+
+  .custom-control-input:checked ~ .custom-control-label {
+    &::before {
+      @include gradient-bg($custom-control-indicator-checked-bg);
+    }
+    &::after {
+      background-image: $custom-checkbox-indicator-icon-checked;
+    }
+  }
+
+  .custom-control-input:indeterminate ~ .custom-control-label {
+    &::before {
+      @include gradient-bg($custom-checkbox-indicator-indeterminate-bg);
+      @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
+    }
+    &::after {
+      background-image: $custom-checkbox-indicator-icon-indeterminate;
+    }
+  }
+
+  .custom-control-input:disabled {
+    &:checked ~ .custom-control-label::before {
+      background-color: $custom-control-indicator-checked-disabled-bg;
+    }
+    &:indeterminate ~ .custom-control-label::before {
+      background-color: $custom-control-indicator-checked-disabled-bg;
+    }
+  }
+}
+
+// Radios
+//
+// Tweak just a few things for radios.
+
+.custom-radio {
+  .custom-control-label::before {
+    border-radius: $custom-radio-indicator-border-radius;
+  }
+
+  .custom-control-input:checked ~ .custom-control-label {
+    &::before {
+      @include gradient-bg($custom-control-indicator-checked-bg);
+    }
+    &::after {
+      background-image: $custom-radio-indicator-icon-checked;
+    }
+  }
+
+  .custom-control-input:disabled {
+    &:checked ~ .custom-control-label::before {
+      background-color: $custom-control-indicator-checked-disabled-bg;
+    }
+  }
+}
+
+
+// Select
+//
+// Replaces the browser default select with a custom one, mostly pulled from
+// http://primercss.io.
+//
+
+.custom-select {
+  display: inline-block;
+  width: 100%;
+  height: $custom-select-height;
+  padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
+  line-height: $custom-select-line-height;
+  color: $custom-select-color;
+  vertical-align: middle;
+  background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
+  background-size: $custom-select-bg-size;
+  border: $custom-select-border-width solid $custom-select-border-color;
+  @if $enable-rounded {
+    border-radius: $custom-select-border-radius;
+  } @else {
+    border-radius: 0;
+  }
+  appearance: none;
+
+  &:focus {
+    border-color: $custom-select-focus-border-color;
+    outline: 0;
+    box-shadow: $custom-select-focus-box-shadow;
+
+    &::-ms-value {
+      // For visual consistency with other platforms/browsers,
+      // suppress the default white text on blue background highlight given to
+      // the selected option text when the (still closed) <select> receives focus
+      // in IE and (under certain conditions) Edge.
+      // See https://github.com/twbs/bootstrap/issues/19398.
+      color: $input-color;
+      background-color: $input-bg;
+    }
+  }
+
+  &[multiple],
+  &[size]:not([size="1"]) {
+    height: auto;
+    padding-right: $custom-select-padding-x;
+    background-image: none;
+  }
+
+  &:disabled {
+    color: $custom-select-disabled-color;
+    background-color: $custom-select-disabled-bg;
+  }
+
+  // Hides the default caret in IE11
+  &::-ms-expand {
+    opacity: 0;
+  }
+}
+
+.custom-select-sm {
+  height: $custom-select-height-sm;
+  padding-top: $custom-select-padding-y;
+  padding-bottom: $custom-select-padding-y;
+  font-size: $custom-select-font-size-sm;
+}
+
+.custom-select-lg {
+  height: $custom-select-height-lg;
+  padding-top: $custom-select-padding-y;
+  padding-bottom: $custom-select-padding-y;
+  font-size: $custom-select-font-size-lg;
+}
+
+
+// File
+//
+// Custom file input.
+
+.custom-file {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  height: $custom-file-height;
+  margin-bottom: 0;
+}
+
+.custom-file-input {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  height: $custom-file-height;
+  margin: 0;
+  opacity: 0;
+
+  &:focus ~ .custom-file-control {
+    border-color: $custom-file-focus-border-color;
+    box-shadow: $custom-file-focus-box-shadow;
+
+    &::before {
+      border-color: $custom-file-focus-border-color;
+    }
+  }
+
+  @each $lang, $value in $custom-file-text {
+    &:lang(#{$lang}) ~ .custom-file-label::after {
+      content: $value;
+    }
+  }
+}
+
+.custom-file-label {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1;
+  height: $custom-file-height;
+  padding: $custom-file-padding-y $custom-file-padding-x;
+  line-height: $custom-file-line-height;
+  color: $custom-file-color;
+  background-color: $custom-file-bg;
+  border: $custom-file-border-width solid $custom-file-border-color;
+  @include border-radius($custom-file-border-radius);
+  @include box-shadow($custom-file-box-shadow);
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 3;
+    display: block;
+    height: calc(#{$custom-file-height} - #{$custom-file-border-width} * 2);
+    padding: $custom-file-padding-y $custom-file-padding-x;
+    line-height: $custom-file-line-height;
+    color: $custom-file-button-color;
+    content: "Browse";
+    @include gradient-bg($custom-file-button-bg);
+    border-left: $custom-file-border-width solid $custom-file-border-color;
+    @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
+  }
+}

resources/theme/material-kit/assets/scss/material-kit/bootstrap/scss/_dropdown.scss

@@ -0,0 +1,131 @@
+// The dropdown wrapper (`<div>`)
+.dropup,
+.dropdown {
+  position: relative;
+}
+
+.dropdown-toggle {
+  // Generate the caret automatically
+  @include caret;
+}
+
+// The dropdown menu
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: $zindex-dropdown;
+  display: none; // none by default, but block on "open" of the menu
+  float: left;
+  min-width: $dropdown-min-width;
+  padding: $dropdown-padding-y 0;
+  margin: $dropdown-spacer 0 0; // override default ul
+  font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues
+  color: $body-color;
+  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
+  list-style: none;
+  background-color: $dropdown-bg;
+  background-clip: padding-box;
+  border: $dropdown-border-width solid $dropdown-border-color;
+  @include border-radius($dropdown-border-radius);
+  @include box-shadow($dropdown-box-shadow);
+}
+
+// Allow for dropdowns to go bottom up (aka, dropup-menu)
+// Just add .dropup after the standard .dropdown class and you're set.
+.dropup {
+  .dropdown-menu {
+    margin-top: 0;
+    margin-bottom: $dropdown-spacer;
+  }
+
+  .dropdown-toggle {
+    @include caret(up);
+  }
+}
+
+.dropright {
+  .dropdown-menu {
+    margin-top: 0;
+    margin-left: $dropdown-spacer;
+  }
+
+  .dropdown-toggle {
+    @include caret(right);
+    &::after {
+      vertical-align: 0;
+    }
+  }
+}
+
+.dropleft {
+  .dropdown-menu {
+    margin-top: 0;
+    margin-right: $dropdown-spacer;
+  }
+
+  .dropdown-toggle {
+    @include caret(left);
+    &::before {
+      vertical-align: 0;
+    }
+  }
+}
+
+// Dividers (basically an `<hr>`) within the dropdown
+.dropdown-divider {
+  @include nav-divider($dropdown-divider-bg);
+}
+
+// Links, buttons, and more within the dropdown menu
+//
+// `<button>`-specific styles are denoted with `// For <button>s`
+.dropdown-item {
+  display: block;
+  width: 100%; // For `<button>`s
+  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+  clear: both;
+  font-weight: $font-weight-normal;
+  color: $dropdown-link-color;
+  text-align: inherit; // For `<button>`s
+  white-space: nowrap; // prevent links from randomly breaking onto new lines
+  background-color: transparent; // For `<button>`s
+  border: 0; // For `<button>`s
+
+  @include hover-focus {
+    color: $dropdown-link-hover-color;
+    text-decoration: none;
+    @include gradient-bg($dropdown-link-hover-bg);
+  }
+
+  &.active,
+  &:active {
+    color: $dropdown-link-active-color;
+    text-decoration: none;
+    @include gradient-bg($dropdown-link-active-bg);
+  }
+
+  &.disabled,
+  &:disabled {
+    color: $dropdown-link-disabled-color;
+    background-color: transparent;
+    // Remove CSS gradients if they're enabled
+    @if $enable-gradients {
+      background-image: none;
+    }
+  }
+}
+
+.dropdown-menu.show {
+  display: block;
+}
+
+// Dropdown section headers
+.dropdown-header {
+  display: block;
+  padding: $dropdown-padding-y $dropdown-item-padding-x;
+  margin-bottom: 0; // for use with heading elements
+  font-size: $font-size-sm;
+  color: $dropdown-header-color;
+  white-space: nowrap; // as with > li > a
+}