Archive: Namaste PHP AMQP framework v1.0 (2017-2020)

952 days continuous production uptime, 40k+ tp/s single node.
Original corpo Bitbucket history not included — clean archive commit.

html/sass/mdb/free/_badge.scss

@@ -0,0 +1,20 @@
+//Badges
+.badge {
+  color: #fff;
+}
+
+@each $name, $color in $material-colors {
+  .badge-#{$name} {
+    background-color: $color;
+  }
+}
+
+.badge-pill {
+  padding-right: $badge-pill-padding-x;
+  padding-left: $badge-pill-padding-x;
+  @include border-radius($badge-pill-border-radius);
+}
+
+.badge-warning {
+  color: #FFF !important;
+}

html/sass/mdb/free/_breadcrumb.scss

@@ -0,0 +1 @@
+// Breadcrumbs

html/sass/mdb/free/_buttons.scss

@@ -0,0 +1,125 @@
+// Buttons
+button:focus {
+  outline:0 !important;
+}
+.btn {
+  @extend .z-depth-1;
+  font-size: 0.8rem;
+  padding: 0.85rem 2.13rem;
+  margin: 6px;
+  @extend .white-text;
+  border-radius: 2px;
+  border: 0;
+  transition: .2s ease-out;
+  text-transform: uppercase;
+  white-space: normal !important;
+  word-wrap: break-word;
+  cursor: pointer;
+  &:hover,
+  &:active,
+  &:focus,
+  &:active:focus {
+    @extend .z-depth-1-half;
+    outline: 0;
+  }
+  .fa {
+    font-size: 1rem;
+    position: relative;
+    vertical-align: middle;
+    margin-top: -2px;
+    &.right {
+      margin-left: 3px;
+    }
+    &.left {
+      margin-right: 3px;
+    }
+  }
+  &.btn-lg {
+    font-size: 0.9rem;
+    padding: 1rem 2.4rem;
+    .fa {
+      font-size: 1.2rem;
+    }
+  }
+  &.btn-md {
+    font-size: 0.7rem;
+    padding: 0.7rem 1.6rem;
+    .fa {
+      font-size: 0.9rem;
+    }
+  }
+  &.btn-sm {
+    font-size: 0.6rem;
+    padding:  0.5rem 1.6rem;
+    &.btn-table {
+      padding: 0.5rem 0.9rem;
+    }
+    .fa {
+      font-size: 0.7rem;
+    }
+  }
+  &.btn-tb {
+    padding: 0.3rem 1rem;
+  }
+  &.disabled,
+  &:disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+  &[class*="btn-outline-"] {
+    padding-top:.76rem;
+    padding-bottom: .76rem;
+    &.btn-sm {
+      padding-top:.42rem;
+      padding-bottom: .42rem;
+    }
+    &.btn-md {
+      padding-top:.58rem;
+      padding-bottom: .58rem;
+    }
+    &.btn-lg {
+      padding-top:.9rem;
+      padding-bottom: .9rem;
+    }
+  }
+}
+
+.btn-secondary.disabled, .btn-secondary:disabled {
+  background-color: #b579d2!important;
+  border-color: #b579d2 !important;
+}
+
+.btn-group {
+  .btn {
+    margin: 0;
+  }
+}
+.btn-block {
+  margin: inherit;
+}
+.btn-split {
+  padding-left: 0.85rem;
+  padding-right: 1.25rem;
+}
+.btn-link {
+  background-color: transparent;
+  @extend .black-text;
+  box-shadow: none !important;
+  &:hover,
+  &:focus {
+    background-color: transparent;
+    box-shadow: none !important;
+  }
+}
+.btn-flat {
+  box-shadow: none;
+  &:active,
+  &:focus,
+  &:hover {
+    box-shadow: none !important;
+  }
+}
+@each $btn-name, $color-value in $material-colors {
+  @include make-button($btn-name, $color-value);
+  @include make-outline-button($btn-name, $color-value);
+}

html/sass/mdb/free/_cards-basic.scss

@@ -0,0 +1,58 @@
+// Card Basic
+.card {
+  font-weight: 400;
+  border-radius: .3rem;
+  &:not([class*="card-outline-"]) {
+    border: 0;
+    @extend .z-depth-1;
+  }
+  img {
+    border-radius: 2px 2px 0 0;
+  }
+  .card-body {
+    position: relative;
+    h5 {
+      margin-bottom: 1rem;
+      font-size: 1rem;
+      font-weight: 400;
+    }
+    h3 {
+      margin-bottom: 1rem;
+      font-weight: 400;
+    }
+    h4 {
+      font-weight: 400;
+    }
+    p {
+      margin-bottom: 1rem;
+    }
+  }
+  .card-title {
+    a {
+      transition: 0.3s;
+      &:hover {
+        transition: 0.3s;
+      }
+    }
+  }
+  .card-text {
+    font-size: 0.9rem;
+    color: #747373;
+    font-weight: 400;
+  }
+  .card-footer {
+    &.links-light {
+      a {
+        font-size: 15px;
+        color: #757575;
+        &:hover {
+          color: #d50000;
+          transition: 0.4s;
+        }
+        .fa {
+          font-size: 17px;
+        }
+      }
+    }
+  }
+}

html/sass/mdb/free/_carousel-basic.scss

@@ -0,0 +1,57 @@
+// CAROUSELS BASIC
+.carousel {
+  .carousel-control-prev-icon,
+  .carousel-control-next-icon {
+    width: 36px;
+    height: 36px;
+  }
+  .carousel-control-prev-icon {
+    background-image: url(#{$image-path}/svg/arrow_left.svg);
+  }
+  .carousel-control-next-icon {
+    background-image: url(#{$image-path}/svg/arrow_right.svg);
+  }
+  .carousel-indicators {
+    li {
+      max-width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      cursor:pointer;
+    }
+  }
+  .video-fluid {
+    height: 100%;
+    width: 100%;
+  }
+}
+
+.carousel-fade {
+  .carousel-item {
+    opacity: 0;
+    transition-duration: .6s;
+    transition-property: opacity;
+  }
+
+  .carousel-item.active,
+  .carousel-item-next.carousel-item-left,
+  .carousel-item-prev.carousel-item-right {
+    opacity: 1;
+  }
+
+  .active.carousel-item-left,
+  .active.carousel-item-right {
+    opacity: 0;
+  }
+
+  .carousel-item-next,
+  .carousel-item-prev,
+  .carousel-item.active,
+  .active.carousel-item-left,
+  .active.carousel-item-prev {
+    transform: translateX(0);
+
+    @supports (transform-style: preserve-3d) {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+}

html/sass/mdb/free/_carousels-basic.scss

@@ -0,0 +1,82 @@
+// CAROUSELS BASIC
+.carousel-control:hover {
+    @include transition-duration($duration: 400ms);
+}
+
+.carousel-fade .carousel-inner {
+    .carousel-item {
+        opacity: 0;
+        transition-property: opacity;
+    }
+    .active {
+        opacity: 1;
+    }
+    .active.left,
+    .active.right {
+        left: 0;
+        opacity: 0;
+        z-index: 1;
+    }
+    .next.left,
+    .prev.right {
+        opacity: 1;
+    }
+}
+
+.carousel-fade .carousel-control {
+    z-index: 2;
+}
+
+@media all and (transform-3d),
+(-webkit-transform-3d) {
+    .carousel-fade .carousel-inner > .carousel-item.next,
+    .carousel-fade .carousel-inner > .carousel-item.active.right {
+        opacity: 0;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+    .carousel-fade .carousel-inner > .carousel-item.prev,
+    .carousel-fade .carousel-inner > .carousel-item.active.left {
+        opacity: 0;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+    .carousel-fade .carousel-inner > .carousel-item.next.left,
+    .carousel-fade .carousel-inner > .carousel-item.prev.right,
+    .carousel-fade .carousel-inner > .carousel-item.active {
+        opacity: 1;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.carousel {
+    .carousel-control-prev-icon,
+    .carousel-control-next-icon {
+        width: 36px;
+        height: 36px;
+    }
+    .carousel-control-prev-icon {
+        background-image: url(../img/svg/arrow_left.svg);
+    }
+    .carousel-control-next-icon {
+        background-image: url(../img/svg/arrow_right.svg);
+    }
+    .carousel-indicators {
+        li {
+            max-width: 10px;
+            height: 10px;
+            border-radius: 50%;
+        }
+    }
+    .video-fluid {
+        height: 100%;
+    }
+    &.no-flex {
+        .carousel-item.active,
+        .carousel-item-next,
+        .carousel-item-prev {
+            display: block;
+        }
+    }
+}

html/sass/mdb/free/_collapse.scss

@@ -0,0 +1,38 @@
+// ACCORDION
+.accordion {
+  .card {
+    border-bottom: 1px solid color('grey', 'lighten-3');
+    box-shadow: none;
+    .card-header {
+      padding: 1rem 1.5rem;
+      background: transparent;
+      border-bottom: 0;
+      a:not(.collapsed) {
+        .rotate-icon {
+          transform: rotate(180deg);
+        }
+      }
+    }
+    .fa-angle-down {
+      float: right;
+    }
+    .card-block {
+      padding-top: .25rem;
+    }
+    .card-body {
+      line-height: 1.7;
+      color: #626262;
+      font-size: 0.9rem;
+      font-weight: 300;
+    }
+    h5 {
+      font-size: 1.1rem;
+      font-weight: 400;
+    }
+  }
+}
+
+// Collapsible body
+.collapsible-body {
+  display: none;
+}

html/sass/mdb/free/_deprecated.scss

@@ -0,0 +1,4 @@
+// Buttons
+// .btn-mdb was replaced by .btn-mdb-color
+
+@include make-button('mdb', map-get($mdb-color, base));

html/sass/mdb/free/_dropdowns.scss

@@ -0,0 +1,13 @@
+// Dropdowns free
+.dropdown {
+  .dropdown-menu {
+    .dropdown-item {
+      &:hover,
+      &:active,
+      &:focus {
+        color: #1d1e1f;
+        background-color: #f7f7f9;
+      }
+    }
+  }
+}

html/sass/mdb/free/_footer.scss

@@ -0,0 +1,65 @@
+// FOOTER
+footer {
+  &.page-footer {
+    margin-top: $footer-margin-top;
+    padding-top: $footer-padding-top;
+    color: $white;
+    .container-fluid {
+      width:auto;
+    }
+    .footer-copyright {
+      overflow: hidden;
+      height: $footer-copyright-height;
+      line-height: $footer-copyright-line-height;
+      color: rgba($white, .6);
+      background-color: rgba($black, .2);
+      text-align: center;
+      font-size: 0.9rem;
+    }
+    a {
+      color: $white;
+    }
+    .title {
+      text-transform: uppercase;
+    }
+    .call-to-action {
+      text-align: center;
+      padding-top: $footer-call-to-action-pt;
+      padding-bottom: $footer-call-to-action-pb;
+      ul li {
+        display: inline-block;
+        padding-right: $footer-call-to-action-pr;
+      }
+    }
+    .social-section {
+      ul li  {
+        display: inline-block;
+      }
+      ul {
+        a {
+          margin-left: 0;
+          padding-left: 0;
+        }
+      }
+    }
+    ul {
+      list-style-type:none;
+      padding:0;
+    }
+  }
+}
+
+/* Instagram photos */ 
+ul.instagram-photos {
+  list-style-type: none;
+  padding:0;
+  li {
+    display: inline-block;
+    max-width: $footer-insta-photos-max-width;
+    margin: $footer-insta-photos-margin;
+    img {
+      margin: 0;
+      @extend .z-depth-1-half;
+    }
+  }
+}

html/sass/mdb/free/_forms-basic.scss

@@ -0,0 +1,233 @@
+// Forms basic
+// Text inputs
+input[type=text],
+input[type=password],
+input[type=email],
+input[type=url],
+input[type=time],
+input[type=date],
+input[type=datetime-local],
+input[type=tel],
+input[type=number],
+input[type=search-md],
+input[type=search],
+textarea.md-textarea {
+  // General Styles
+  background-color: transparent;
+  border: none;
+  border-bottom: 1px solid $input-border-color;
+  border-radius: 0;
+  outline: none;
+  height: 2.1rem;
+  width: 100%;
+  font-size: $input-font-size;
+  box-shadow: none;
+  box-sizing: content-box;
+  @include transition(all .3s);
+
+  // Disabled & readonly
+  &:disabled, &[readonly="readonly"] {
+    color: $input-disabled-color;
+    border-bottom: 1px dotted $input-disabled-color;
+    background-color: transparent;
+    + label {
+      color: $input-disabled-color;
+      background-color: transparent;
+    }
+  }
+  // Focused input style
+  &:focus:not([readonly]) {
+    border-bottom: 1px solid $input-focus-color;
+    box-shadow: 0 1px 0 0 $input-focus-color;
+    // Focused label style
+    + label {
+      color: $input-focus-color;
+    }
+  }
+
+  // Valid input style
+  &.valid, &:focus.valid {
+    border-bottom: 1px solid $input-success-color;
+    box-shadow: 0 1px 0 0 $input-success-color;
+  }
+
+  &.valid + label:after, &:focus.valid + label:after {
+    content: attr(data-success);
+    color: $input-success-color;
+    opacity: 1;
+  }
+  // Invalid input style
+  &.invalid, &:focus.invalid {
+    border-bottom: 1px solid $input-error-color;
+    box-shadow: 0 1px 0 0 $input-error-color;
+  }
+  &.invalid + label:after, &:focus.invalid + label:after {
+    content: attr(data-error);
+    color: $input-error-color;
+    opacity: 1;
+  }
+  // Form message shared styles
+  + label:after {
+    display: block;
+    content: "";
+    position: absolute;
+    top: 65px;
+    opacity: 0;
+    transition: .2s opacity ease-out, .2s color ease-out;
+  }
+
+  &.input-alternate {
+    padding: 0 15px;
+    height: 2.1rem;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
+    font-size: 0.875rem;
+    border-bottom: 0;
+    transition: none !important;
+    &:hover,
+    &:focus {
+      box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .2), 0 0 0 1px rgba(0, 0, 0, .08) !important;
+      border-bottom: 0;
+    }
+  }
+}
+
+// Input with label
+.form-control {
+  padding: 0;
+  padding-bottom: 0.6rem;
+  padding-top: 0.5rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  background-color: transparent;
+  background-image: none;
+  border-radius: 0;
+  margin-top: 0.2rem;
+  margin-bottom: 1rem;
+  &:focus {
+    background: transparent;
+    box-shadow: none;
+  }
+  &:disabled,
+  &[readonly] {
+    background-color: transparent;
+    border-bottom: 1px solid #bdbdbd;
+  }
+}
+// Input + label wrapper styles
+.md-form {
+  position: relative;
+  margin-bottom: 1.5rem;
+  label {
+    @include transition(.2s ease-out);
+    color: #757575;
+    position: absolute;
+    top: 0.8rem;
+    left: 0;
+    font-size: 1rem;
+    cursor: text;
+    &.active {
+      @include transform(translateY(-140%));
+      font-size: $label-font-size;
+    }
+  }
+  // Icon
+  .prefix {
+    @include transition(color .2s);
+    position: absolute;
+    width: 3rem;
+    font-size: 2rem;
+    padding-top: .5rem;
+    ~ input, ~ textarea {
+      margin-left: 3rem;
+      width: 92%;
+      width: calc(100% - 3rem);
+    }
+    ~ label {
+      margin-left: 3rem;
+    }
+    &.active {
+      color: $input-focus-color;
+    } 
+  }
+
+  @media #{$medium-and-down} {
+    .prefix ~ input {
+      width: 86%;
+      width: calc(100% - 3rem);
+    }
+  }
+  @media #{$small-and-down} {
+    .prefix ~ input {
+      width: 80%;
+      width: calc(100% - 3rem);
+    }
+  }
+  .btn {
+    margin-bottom: 1.5rem;
+  }
+
+  &.form-sm {
+    input {
+      padding-bottom: 0.2rem;
+      padding-top: 0.2rem;
+      font-size: 0.8rem;
+      line-height: 0.5;
+    }
+    label {
+      font-size: 0.9rem;
+    }
+    .prefix {
+      font-size: 1.5rem;
+      top: 0.4rem;
+    }
+    .prefix ~ input, .prefix ~ textarea, .prefix ~ label  {
+      margin-left: 2.2rem;
+    }
+  }
+
+  &.input-group {
+    padding-left: 1rem;
+    @include placeholder {
+      color: #999;
+      padding-top: 2px;
+    }
+  }
+}
+
+.form-group {
+  display:block;
+}
+
+.form-inline {
+  fieldset {
+    margin-right: 1.5rem;
+  }
+  .form-group {
+    margin-right: 2rem;
+  }
+}   
+// Default textarea
+textarea {
+  width: 100%;
+  height: 3rem;
+  background-color: transparent;
+  &.md-textarea {
+    overflow-y: hidden;
+    padding: 1.6rem 0;
+    resize: none;
+    min-height: 3rem;
+  }
+}
+
+// For textarea autoresize
+.hiddendiv {
+  display: none;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  padding-top: 1.2rem;
+}
+
+.orange-gradient{
+  background: linear-gradient(40deg, #FFD86F, #FC6262);
+}

html/sass/mdb/free/_global.scss

@@ -0,0 +1,88 @@
+.z-depth-0 {
+  box-shadow: none !important;
+}
+
+.z-depth-1 {
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+}
+
+.z-depth-1-half {
+  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
+}
+
+.z-depth-2 {
+  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+.z-depth-3 {
+  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
+}
+
+.z-depth-4 {
+  box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
+}
+
+.z-depth-5 {
+  box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
+}
+
+.hoverable {
+  @include transition(box-shadow .55s);
+  box-shadow: 0;
+  &:hover {
+    @include transition(box-shadow .45s);
+    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  }
+}
+
+a {
+  color: $link-color;
+  text-decoration: none;
+  cursor: pointer;
+  // Gets rid of tap active state
+  -webkit-tap-highlight-color: transparent;
+  &:hover,
+  &:focus {
+    text-decoration: none;
+  }
+}
+
+a:not([href]):not([tabindex]), a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+//Disabled cursor
+.disabled {
+  cursor: not-allowed!important;
+}
+
+// .list-group,
+.jumbotron,
+.navbar,
+.badge,
+.chip {
+  @extend .z-depth-1;
+}
+
+.list-group .list-group-item,
+.jumbotron,
+.navbar-toggler,
+.badge {
+  @include border-radius(2px);
+}
+
+.flex-center {
+  ul {
+    list-style-type:none;
+    padding:0;
+  }
+}
+
+// Media
+.media {
+  .avatar-sm {
+    width: 56px;
+    border-radius: 50%;
+  }
+}

html/sass/mdb/free/_helpers.scss

@@ -0,0 +1,162 @@
+// Margin and Padding
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    @each $prop, $abbrev in (margin: m, padding: p) {
+      @each $size, $length in $spacers {
+
+        .#{$abbrev}#{$infix}-#{$size}  { #{$prop}:        $length !important; }
+        .#{$abbrev}t#{$infix}-#{$size} { #{$prop}-top:    $length !important; }
+        .#{$abbrev}r#{$infix}-#{$size} { #{$prop}-right:  $length !important; }
+        .#{$abbrev}b#{$infix}-#{$size} { #{$prop}-bottom: $length !important; }
+        .#{$abbrev}l#{$infix}-#{$size} { #{$prop}-left:   $length !important; }
+        .#{$abbrev}x#{$infix}-#{$size} {
+          #{$prop}-right: $length !important;
+          #{$prop}-left:  $length !important;
+        }
+        .#{$abbrev}y#{$infix}-#{$size} {
+          #{$prop}-top:    $length !important;
+          #{$prop}-bottom: $length !important;
+        }
+      }
+    }
+
+    // Some special margin utils
+    .m#{$infix}-auto  { margin:        auto !important; }
+    .mt#{$infix}-auto { margin-top:    auto !important; }
+    .mr#{$infix}-auto { margin-right:  auto !important; }
+    .mb#{$infix}-auto { margin-bottom: auto !important; }
+    .ml#{$infix}-auto { margin-left:   auto !important; }
+    .mx#{$infix}-auto {
+      margin-right: auto !important;
+      margin-left:  auto !important;
+    }
+    .my#{$infix}-auto {
+      margin-top:    auto !important;
+      margin-bottom: auto !important;
+    }
+  }
+}
+
+@each $key, $val in $grid-breakpoints {
+  @include media-breakpoint-up($key) {
+    $y: map-get($extreme-padding, $key);
+    .e-px {
+      padding-left: $y;
+      padding-right: $y;
+    }
+  }
+}
+
+.img-fluid {
+  max-width: 100%;
+  height:auto;
+}
+
+.inline-ul>li {
+  display: inline;
+}
+
+.list-inline-div>div {
+  display: inline-block;
+}
+
+// Center text on mobile
+.center-on-small-only {
+  @media #{$medium-and-down} {
+    text-align: center;
+    .img-fluid {
+      display: inline;
+    }
+  }
+}
+
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  p {
+    margin: 0;
+  }
+  ul {
+    text-align: center;
+    li {
+      margin-bottom: 1rem;
+    }
+  }
+}
+
+.hidden-md-down {
+  @media (max-width: $medium-screen){
+    display: none!important;
+  }  
+}
+
+.mb-r {
+  @media (min-width: $medium-screen){
+    margin-bottom: 3rem!important;
+  }   
+  @media (max-width: $medium-screen){
+    margin-bottom: 2rem!important;
+  }  
+}
+
+.font-bold {
+  font-weight: 500;
+}
+
+.font-up {
+  text-transform: uppercase;
+}
+
+// Dividers light and dark variations
+.hr-light {
+  border-top: 1px solid #fff;
+}
+
+.hr-dark {
+  border-top: 1px solid #666;
+}
+
+// Blockquote contextual 
+.blockquote {
+  .bq-title {
+    font-weight: 400;
+    font-size: 1.5rem;
+    margin-bottom: 0;
+  }
+  p {
+    font-size: 1.1rem;
+  }
+}
+
+.bq-primary {
+  border-left: 3px solid $primary-color;
+  .bq-title {
+    color: $primary-color;
+  }
+}
+
+.bq-warning {
+  border-left: 3px solid $warning-color;
+  .bq-title {
+    color: $warning-color;
+  }
+}
+
+.bq-danger {
+  border-left: 3px solid $danger-color;
+  .bq-title {
+    color: $danger-color;
+  }
+}
+
+.bq-success {
+  border-left: 3px solid $success-color;
+  .bq-title {
+    color: $success-color;
+  }
+}

html/sass/mdb/free/_hover-effects.scss

@@ -0,0 +1,418 @@
+/* MDB HOVER EFFECTS */
+
+// MDB Hover effects
+.view {
+    overflow: hidden;
+    position: relative;
+    cursor: default;
+    .mask,
+    .content {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        overflow: hidden;
+        top: 0;
+        left: 0
+    }
+    img, video {
+        display: block;
+        position: relative
+    }
+}
+.view .mask {
+	background-attachment: fixed;
+}
+
+.full-bg-img {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    overflow: hidden;
+    top: 0;
+    left: 0;
+}
+
+// Overlays
+.overlay {
+    &:hover .mask {
+        opacity: 1; 
+    }
+    img, video {
+        transition: all 0.2s linear;
+    }
+    .mask {
+        opacity: 0;
+        transition: all 0.4s ease-in-out;
+    }
+}
+
+//Overlay patterns
+.pattern-1 {
+    background: url(../img/overlays/01.png);
+}
+
+.pattern-2 {
+    background: url(../img/overlays/02.png);
+}
+
+.pattern-3 {
+    background: url(../img/overlays/03.png);
+}
+
+.pattern-4 {
+    background: url(../img/overlays/04.png);
+}
+
+.pattern-5 {
+    background: url(../img/overlays/05.png);
+}
+
+.pattern-6 {
+    background: url(../img/overlays/06.png);
+}
+
+.pattern-7 {
+    background: url(../img/overlays/07.png);
+}
+
+.pattern-8 {
+    background: url(../img/overlays/08.png);
+}
+
+.pattern-9 {
+    background: url(../img/overlays/09.png);
+}
+
+// Overlay masks
+// Light overlays
+.hm-blue-light .mask,
+.hm-blue-light .full-bg-img {
+    background-color: rgba(3, 169, 244, 0.3);
+}
+
+.hm-red-light .mask,
+.hm-red-light .full-bg-img {
+    background-color: rgba(244, 67, 54, 0.3);
+}
+
+.hm-pink-light .mask,
+.hm-pink-light .full-bg-img {
+    background-color: rgba(233, 30, 99, 0.3);
+}
+
+.hm-purple-light .mask,
+.hm-purple-light .full-bg-img {
+    background-color: rgba(156, 39, 176, 0.3);
+}
+
+.hm-indigo-light .mask,
+.hm-indigo-light .full-bg-img {
+    background-color: rgba(63, 81, 181, 0.3);
+}
+
+.hm-cyan-light .mask,
+.hm-cyan-light .full-bg-img {
+    background-color: rgba(0, 188, 212, 0.3);
+}
+
+.hm-teal-light .mask,
+.hm-teal-light .full-bg-img {
+    background-color: rgba(0, 150, 136, 0.3);
+}
+
+.hm-green-light .mask,
+.hm-green-light .full-bg-img {
+    background-color: rgba(76, 175, 80, 0.3);
+}
+
+.hm-lime-light .mask,
+.hm-lime-light .full-bg-img {
+    background-color: rgba(205, 220, 57, 0.3);
+}
+
+.hm-yellow-light .mask,
+.hm-yellow-light .full-bg-img {
+    background-color: rgba(255, 235, 59, 0.3);
+}
+
+.hm-orange-light .mask,
+.hm-orange-light .full-bg-img {
+    background-color: rgba(255, 152, 0, 0.3);
+}
+
+.hm-brown-light .mask,
+.hm-brown-light .full-bg-img {
+    background-color: rgba(121, 85, 72, 0.3);
+}
+
+.hm-grey-light .mask,
+.hm-grey-light .full-bg-img {
+    background-color: rgba(158, 158, 158, 0.3);
+}
+
+.hm-bluegrey-light .mask,
+.hm-bluegrey-light .full-bg-img {
+    background-color: rgba(96, 125, 139, 0.3);
+}
+
+.hm-black-light .mask,
+.hm-black-light .full-bg-img {
+    background-color: rgba(0, 0, 0, 0.3);
+}
+
+.hm-stylish-light .mask,
+.hm-stylish-light .full-bg-img {
+    background-color: rgba(62, 69, 81, 0.3);
+}
+
+.hm-white-light .mask,
+.hm-white-light .full-bg-img {
+    background-color: rgba(255, 255, 255, 0.3);
+}
+
+// Strong overlays
+.hm-blue-strong .mask,
+.hm-blue-strong .full-bg-img {
+    background-color: rgba(3, 169, 244, 0.7);
+}
+
+.hm-red-strong .mask,
+.hm-red-strong .full-bg-img {
+    background-color: rgba(244, 67, 54, 0.7);
+}
+
+.hm-pink-strong .mask,
+.hm-pink-strong .full-bg-img {
+    background-color: rgba(233, 30, 99, 0.7);
+}
+
+.hm-purple-strong .mask,
+.hm-purple-strong .full-bg-img {
+    background-color: rgba(156, 39, 176, 0.7);
+}
+
+.hm-indigo-strong .mask,
+.hm-indigo-strong .full-bg-img {
+    background-color: rgba(63, 81, 181, 0.7);
+}
+
+.hm-cyan-strong .mask,
+.hm-cyan-strong .full-bg-img {
+    background-color: rgba(0, 188, 212, 0.7);
+}
+
+.hm-teal-strong .mask,
+.hm-teal-strong .full-bg-img {
+    background-color: rgba(0, 150, 136, 0.7);
+}
+
+.hm-green-strong .mask,
+.hm-green-strong .full-bg-img {
+    background-color: rgba(76, 175, 80, 0.7);
+}
+
+.hm-lime-strong .mask,
+.hm-lime-strong .full-bg-img {
+    background-color: rgba(205, 220, 57, 0.7);
+}
+
+.hm-yellow-strong .mask,
+.hm-yellow-strong .full-bg-img {
+    background-color: rgba(255, 235, 59, 0.7);
+}
+
+.hm-orange-strong .mask,
+.hm-orange-strong .full-bg-img {
+    background-color: rgba(255, 152, 0, 0.7);
+}
+
+.hm-brown-strong .mask,
+.hm-brown-strong .full-bg-img {
+    background-color: rgba(121, 85, 72, 0.7);
+}
+
+.hm-grey-strong .mask,
+.hm-grey-strong .full-bg-img {
+    background-color: rgba(158, 158, 158, 0.7);
+}
+
+.hm-bluegrey-strong .mask,
+.hm-bluegrey-strong .full-bg-img {
+    background-color: rgba(96, 125, 139, 0.7);
+}
+
+.hm-black-strong .mask,
+.hm-black-strong .full-bg-img {
+    background-color: rgba(0, 0, 0, 0.7);
+}
+
+.hm-stylish-strong .mask,
+.hm-stylish-strong .full-bg-img {
+    background-color: rgba(62, 69, 81, 0.7);
+}
+
+.hm-white-strong .mask,
+.hm-white-strong .full-bg-img {
+    background-color: rgba(255, 255, 255, 0.7);
+}
+
+// Light overlays
+.hm-blue-slight .mask,
+.hm-blue-slight .full-bg-img {
+    background-color: rgba(3, 169, 244, 0.1);
+}
+
+.hm-red-slight .mask,
+.hm-red-slight .full-bg-img {
+    background-color: rgba(244, 67, 54, 0.1);
+}
+
+.hm-pink-slight .mask,
+.hm-pink-slight .full-bg-img {
+    background-color: rgba(233, 30, 99, 0.1);
+}
+
+.hm-purple-slight .mask,
+.hm-purple-slight .full-bg-img {
+    background-color: rgba(156, 39, 176, 0.1);
+}
+
+.hm-indigo-slight .mask,
+.hm-indigo-slight .full-bg-img {
+    background-color: rgba(63, 81, 181, 0.1);
+}
+
+.hm-cyan-slight .mask,
+.hm-cyan-slight .full-bg-img {
+    background-color: rgba(0, 188, 212, 0.1);
+}
+
+.hm-teal-slight .mask,
+.hm-teal-slight .full-bg-img {
+    background-color: rgba(0, 150, 136, 0.1);
+}
+
+.hm-green-slight .mask,
+.hm-green-slight .full-bg-img {
+    background-color: rgba(76, 175, 80, 0.1);
+}
+
+.hm-lime-slight .mask,
+.hm-lime-slight .full-bg-img {
+    background-color: rgba(205, 220, 57, 0.1);
+}
+
+.hm-yellow-slight .mask,
+.hm-yellow-slight .full-bg-img {
+    background-color: rgba(255, 235, 59, 0.1);
+}
+
+.hm-orange-slight .mask,
+.hm-orange-slight .full-bg-img {
+    background-color: rgba(255, 152, 0, 0.1);
+}
+
+.hm-brown-slight .mask,
+.hm-brown-slight .full-bg-img {
+    background-color: rgba(121, 85, 72, 0.1);
+}
+
+.hm-grey-slight .mask,
+.hm-grey-slight .full-bg-img {
+    background-color: rgba(158, 158, 158, 0.1);
+}
+
+.hm-bluegrey-slight .mask,
+.hm-bluegrey-slight .full-bg-img {
+    background-color: rgba(96, 125, 139, 0.1);
+}
+
+.hm-black-slight .mask,
+.hm-black-slight .full-bg-img {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+.hm-stylish-slight .mask,
+.hm-stylish-slight .full-bg-img {
+    background-color: rgba(62, 69, 81, 0.1);
+}
+
+.hm-white-slight .mask,
+.hm-white-slight .full-bg-img {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+// Zoom
+.hm-zoom img {
+    transition: all 0.2s linear;
+}
+
+.hm-zoom:hover img {
+    transform: scale(1.1);
+}
+
+.hm-zoom:hover .mask {
+    opacity: 1;
+}
+
+.img-overlay {
+    position:relative;
+    &:after {
+        content: '';
+        display:block;
+        position:absolute;
+        height:100%;
+        width:100%;
+        top:0;
+        left:0;
+        bottom:0;
+        right:0;
+        background:rgba(0,0,0,.17);
+        transition: background 0.4s;
+    }
+    &:hover {
+        &:after {
+            background:rgba(0,0,0,.35);
+        }
+    }
+    &.light {
+        &:after {
+            background:rgba(255,255,255,.17);
+        }
+        &:hover {
+            &:after {
+                background:rgba(255,255,255,.35);
+            }
+        }
+    }
+    &.blue {
+        &:after {
+            background:rgba(0,145,234,.17);
+        }
+        &:hover {
+            &:after {
+                background:rgba(0,145,234,.35);
+            }
+        }
+    }
+    &.green {
+        &:after {
+            background:rgba(76,175,80,.17);
+        }
+        &:hover {
+            &:after {
+                background:rgba(76,175,80,.35);
+            }
+        }
+    }
+    &.red {
+        &:after {
+            background:rgba(213,0,0,.17);
+        }
+        &:hover {
+            &:after {
+                background:rgba(213,0,0,.35);
+            }
+        }
+    }
+}

html/sass/mdb/free/_jumbotron.scss

@@ -0,0 +1,22 @@
+// Jumbtotron
+.jumbotron {
+  background-color: $white;
+  padding: 2rem;
+  &.m-1,
+  &.m-2,
+  &.m-3 {
+    z-index: 50;
+    position: relative;
+    margin-left: 3%;
+    margin-right: 3%;
+  }
+  &.m-1 {
+    margin-top: -20px;
+  }
+  &.m-2 {
+    margin-top: -30px;
+  }
+  &.m-3 {
+    margin-top: -40px;
+  }
+}

html/sass/mdb/free/_list-group.scss

@@ -0,0 +1,10 @@
+.media .media-left {
+  padding: 0 10px 10px 0;
+  img {
+    @extend .z-depth-1-half;
+  }
+}
+
+.list-group a:hover {
+  transition: 0.5s;
+}

html/sass/mdb/free/_masks.scss

@@ -0,0 +1,110 @@
+// Masks
+.view {
+  overflow: hidden;
+  position: relative;
+  cursor: default;
+  .mask {
+    background-attachment: fixed;
+  }
+  .mask,
+  .full-bg-img {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    overflow: hidden;
+    top: 0;
+    left: 0;
+  }
+  img, video {
+    display: block;
+    position: relative;
+  }
+}
+
+// Zoom and overlays
+.hm-zoom,
+.overlay {
+  img,
+  video {
+    @include transition(all 0.2s linear);
+  }
+  &:hover {
+    .mask {
+      opacity: 1;
+    }
+  }
+}
+.hm-zoom {
+  &:hover {
+    img {
+      transform: scale(1.1);
+    }
+  }
+}
+.overlay {
+  .mask {
+    opacity: 0;
+    @include transition(all 0.4s ease-in-out);
+  }
+}
+
+// Overlay patterns 
+$patterns: (
+  1: "01",
+  2: "02",
+  3: "03",
+  4: "04",
+  5: "05",
+  6: "06",
+  7: "07",
+  8: "08",
+  9: "09"
+);
+
+@each $no, $filename in $patterns {
+  .pattern-#{$no} {
+    background: url('../img/overlays/#{$filename}.png');
+  }
+}
+
+// Overlay masks
+@each $name, $color in $rgba-colors {
+  .hm-#{$name} {
+    .mask,
+    .full-bg-img {
+      background-color: $color;
+    }
+  }
+}
+
+.full-height,
+.full-height body,
+.full-height header,
+.full-height header .view {
+  height: 100%;
+}
+
+.intro {
+  min-height: 1000px;
+  position: relative;
+  @media (max-width: 768px) {
+    min-height: 1000px;
+  }
+}
+
+.intro-video {
+  video {
+    top: 50%;
+    left: 50%;
+    min-width: 100%;
+    min-height: 100%;
+    width: auto;
+    height: auto;
+    z-index: -100;
+    transform: translateX(-50%) translateY(-50%);
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center center;
+    transition: 1s opacity;
+  }
+}

html/sass/mdb/free/_modals.scss

@@ -0,0 +1,323 @@
+// Distance
+$modal-distance:10px;
+$modal-info-color: #5394ff;
+$modal-success-color: #01d36b;
+$modal-warning-color: #ff8e38;
+$modal-danger-color: #ff4b4b;
+
+// Styles for body
+body {
+  &.modal-open {
+    padding-right: 0 !important;
+    overflow: auto;
+  }
+  &.scrollable {
+    overflow-y: auto;
+  }
+}
+
+// *** ENHANCED BOOTSTRAP MODALS ***///
+// General styles
+.modal-dialog {
+  .modal-content {
+    @include border-radius(2px);
+    @extend .z-depth-1-half;
+    border: 0;
+  }
+}
+
+// Position & Size
+.modal {
+  padding-right:0 !important;
+  .modal-dialog {
+    @media (min-width: 768px) {
+      &.modal-top {
+        top: 0;
+      }
+      &.modal-left {
+        left: 0;
+      }
+      &.modal-right {
+        right: 0;
+      }
+      &.modal-bottom {
+        bottom: 0;
+      }
+      &.modal-top-left {
+        top: $modal-distance;
+        left: $modal-distance;
+      }
+      &.modal-top-right {
+        top: $modal-distance;
+        right: $modal-distance;
+      }
+      &.modal-bottom-left {
+        left: $modal-distance;
+        bottom: $modal-distance;
+      }
+      &.modal-bottom-right {
+        right: $modal-distance;
+        bottom: $modal-distance;
+      }
+    }
+  }
+  &.fade {
+    &.top:not(.show) .modal-dialog {
+      transform: translate3d(0, -25%, 0);
+    }
+    &.left:not(.show) .modal-dialog {
+      transform: translate3d(-25%, 0, 0);
+    }
+    &.right:not(.show) .modal-dialog {
+      transform: translate3d(25%, 0, 0);
+    }
+    &.bottom:not(.show) .modal-dialog {
+      transform: translate3d(0, 25%, 0);
+    }
+  }
+  @media (min-width: $medium-screen) {
+    &.modal-scrolling {
+      position: relative;
+      .modal-dialog {
+        position: fixed;
+        z-index: 1050;
+      }
+    }
+    &.modal-content-clickable {
+      top:auto;
+      bottom:auto;
+      .modal-dialog {
+        position:fixed;
+      }
+    }
+    .modal-fluid {
+      width: 100%;
+      max-width: 100%;
+      .modal-content {
+        width: 100%;
+      }
+    }
+    .modal-frame {
+      position: absolute;
+      width: 100%;
+      max-width: 100%;
+      margin: 0;
+      &.modal-bottom {
+        bottom: 0;
+      }
+    }
+    .modal-full-height {
+      display: flex;
+      position: absolute;
+      width: 400px;
+      height: 100%;
+      margin: 0;
+      top: 0;
+      right: 0;
+      &.modal-top, &.modal-bottom {
+        display:block;
+        width:100%;
+        max-width:100%;
+        height:auto;
+      }
+      &.modal-top {
+        bottom:auto;
+      }
+      &.modal-bottom {
+        top:auto;
+      }
+      .modal-content {
+        width:100%;
+      }
+      &.modal-lg {
+        max-width:90%;
+        width:90%;
+        @media (min-width:$medium-screen) {
+          max-width:800px;
+          width:800px;
+        }
+        @media (min-width:$large-screen) {
+          max-width:1000px;
+          width:1000px;  
+        }
+      }
+    }
+    .modal-side {
+      position: absolute;
+      right: $modal-distance;
+      bottom: $modal-distance;
+      margin: 0;
+      width: 400px;
+    }
+  }
+}
+
+// Styles
+.modal-dialog {
+  .btn .fa {
+    color:#fff !important;
+  }
+  [class*="btn-outline-"] .fa {
+    color: inherit !important;
+  }
+  // Cascading modals
+  &.cascading-modal {
+    margin-top: 10%;
+    .close {
+      color:#fff;
+      opacity:1;
+      text-shadow:none;
+    }
+    // Cascading header
+    .modal-header {
+      text-align: center;
+      margin: -2rem 1rem 1rem 1rem;
+      padding: 1.5rem;
+      border: none;
+      @extend .z-depth-1-half;
+      @include border-radius(3px);
+      .close {
+        margin-right: 1rem;
+      }
+      .title {
+        width: 100%;
+        margin-bottom: 0;
+        font-size: 1.25rem;
+        .fa {
+          margin-right: 9px;
+        }
+      }
+      .social-buttons {
+        margin-top: 1.5rem;
+        a {
+          font-size: 1rem;
+        }
+      }
+    }
+    // Cascading tabs nav
+    .modal-c-tabs {
+      .nav-tabs {
+        margin: -1.5rem 1rem 0 1rem;
+        @extend .z-depth-1;
+      }
+      .tab-content {
+        padding: 1.7rem 0 0 0;
+      }
+    }
+    .nav-tabs {
+      display:flex;
+      li {
+        flex:1;
+        a {
+          text-align:center;
+          font-weight:normal;
+        }
+      }
+    }
+    // Footer customization
+    .modal-body,
+    .modal-footer {
+      color: #616161;
+      padding-right: 2rem;
+      padding-left: 2rem;
+      .additional-option {
+        text-align: center;
+        margin-top: 1rem;
+      }
+    }
+    // Cascading avatar
+    &.modal-avatar {
+      margin-top: 6rem;
+      .modal-header {
+        @extend .z-depth-0;
+        @extend .img-fluid;
+        margin: -6rem 2rem -1rem 2rem;
+        img {
+          width: 130px;
+          @extend .z-depth-2;
+          margin-left: auto;
+          margin-right: auto;
+        }
+      }
+    }
+  }
+  // Modal notify
+  &.modal-notify {
+    .heading {
+      margin: 0;
+      padding: 0.3rem;
+      color: #fff;
+      font-size: 1.15rem;
+    }
+    .modal-header {
+      @extend .z-depth-1;
+      border: 0;
+    }
+    .close {
+      opacity: 1;
+    }
+    .modal-body {
+      padding: 1.5rem;
+      color: #616161;
+    }
+    .btn-outline-secondary-modal {
+      background-color: transparent;
+    }
+    // Modal info
+    &.modal-info {
+      .modal-header {
+        background-color: $modal-info-color;
+      }
+      .fa {
+        color: $modal-info-color;
+      }
+      .badge {
+        background-color: $modal-info-color;
+      }
+      @include make-button('primary-modal', $modal-info-color);
+      @include make-outline-button('secondary-modal', $modal-info-color);
+    }
+    // Modal warning
+    &.modal-warning {
+      .modal-header {
+        background-color: $modal-warning-color;
+      }
+      .fa {
+        color: $modal-warning-color;
+      }
+      .badge {
+        background-color: $modal-warning-color;
+      }
+      @include make-button('primary-modal', $modal-warning-color);
+      @include make-outline-button('secondary-modal', $modal-warning-color);
+    }
+    // Modal success
+    &.modal-success {
+      .modal-header {
+        background-color: $modal-success-color;
+      }
+      .fa {
+        color: $modal-success-color;
+      }
+      .badge {
+        background-color: $modal-success-color;
+      }
+      @include make-button('primary-modal', $modal-success-color);
+      @include make-outline-button('secondary-modal', $modal-success-color);
+    }
+    // Modal danger
+    &.modal-danger {
+      .modal-header {
+        background-color: $modal-danger-color;
+      }
+      .fa {
+        color: $modal-danger-color;
+      }
+      .badge {
+        background-color: $modal-danger-color;
+      }
+      @include make-button('primary-modal', $modal-danger-color);
+      @include make-outline-button('secondary-modal', $modal-danger-color);
+    }
+  }
+}

html/sass/mdb/free/_msc.scss

@@ -0,0 +1,21 @@
+// Miscellaneous free
+
+// White border
+.table-inverse {
+  th,
+  td,
+  thead th {
+    border-color: $table-inverse-color-border;
+  }
+}
+
+// Edge Headers
+.edge-header {
+  display:block;
+  height:278px;
+  background-color:#ccc;
+}
+
+.free-bird {
+  margin-top:-100px;
+}

html/sass/mdb/free/_navbar.scss

@@ -0,0 +1,160 @@
+// Navbar
+.navbar {
+  font-weight: $font-weight;
+  padding-right: 1rem !important;
+  form {
+    input {
+      margin: 0 $navbar-form-input-mr $navbar-form-input-mb $navbar-form-input-ml;
+      height: $navbar-form-input-height;
+    }
+  }
+  .navbar-brand {
+    align-self: flex-start;
+    overflow: visible;
+  }
+  .breadcrumb {
+    margin: 0;
+    background-color: inherit;
+    font-weight: $font-weight;
+    // padding-left: 1rem;
+    font-size: $navbar-double-font-size;
+    padding: 0.3em 0 0 1em;
+  }
+  .navbar-toggler {
+    border-width: 0;
+  }
+  &.double-nav,
+  .nav-flex-icons {
+    flex-direction: row;
+  }
+  .container {
+    @media (max-width: $medium-screen) {
+      width: 100%;
+      .navbar-toggler-right {
+        right: 0;
+      }
+    }
+  }
+  &.navbar-dark {
+    .navbar-nav {
+      .nav-item {
+        .nav-link.disabled, .nav-link.disabled:hover {
+          color: rgba(255, 255, 255, 0.5);
+        }
+      }
+    }
+  }
+  &.navbar-light {
+    .navbar-nav {
+      .nav-item {
+        .nav-link.disabled, .nav-link.disabled:hover {
+          color: rgba(0, 0, 0, 0.5);
+        }
+      }
+    }
+  }
+  .nav-item {
+    .nav-link {
+      display:block;
+      &.disabled {
+        &:active {
+          pointer-events:none;
+        }
+      }
+      .fa {
+        padding-left: $navbar-flex-icons-padding-lg;
+        padding-right: $navbar-flex-icons-padding-lg;
+      }
+      @media (max-width: $medium-screen) {
+        padding-left: $navbar-flex-icons-padding-md;
+        padding-right: $navbar-flex-icons-padding-md;
+      }
+    }
+  }
+  .dropdown-menu {
+    position: absolute !important;
+    margin-top:0;
+    a {
+      font-size: $navbar-dropdown-font-size;
+      font-weight: $font-weight;
+      padding: $navbar-dropdown-menu-padding;
+      color: $black !important;
+      &:hover {
+        color: $white !important;
+      }
+    }
+    &.dropdown-menu-right {
+      @media (max-width: $small-screen) {
+        right: auto !important;
+      }
+    }
+  }
+  @each $name, $data in $navbar-option {
+    &.navbar-#{$name} {
+      .navbar-toggler-icon {
+        background-image: map-get($data, "navbar-toggler-icon");
+        cursor: pointer;
+      }
+      .breadcrumb,
+      .navbar-nav {
+        .nav-item {
+          .nav-link {
+            color: map-get($data, "navbar-option-color");
+            @include transition(.35s);
+            &:hover {
+              color: map-get($data, "navbar-link-hover-color");
+            }
+          }
+          &.active > .nav-link {
+            background-color: map-get($data, "navbar-active-link-bg-color");
+            &:hover {
+              color: map-get($data, "navbar-option-color");
+            }
+          }
+        }
+      }
+      .navbar-toggler {
+        color: map-get($data, "navbar-option-color");
+      }
+      form {
+        input[type=text] {
+          border-bottom: 1px solid map-get($data, "navbar-option-color");
+          &:focus:not([readonly]) {
+            border-color: $input-focus-color;
+          }
+        }
+        .form-control {
+          color: map-get($data, "navbar-option-color");
+          @include placeholder {
+            color: map-get($data, "navbar-option-color");
+            font-weight: $font-weight;
+          }
+        }
+      }
+    }
+  }
+  &.scrolling-navbar {
+    z-index: 100;
+    @media (min-width: $small-screen) {
+      @include transition (background .5s ease-in-out, padding .5s ease-in-out);
+      padding-top: $navbar-scrolling-padding;
+      padding-bottom: $navbar-scrolling-padding;
+      .navbar-nav > li {
+        transition-duration: 1s;
+      }
+      &.top-nav-collapse {
+        padding-top: $navbar-top-collapse-padding;
+        padding-bottom: $navbar-top-collapse-padding;
+      }
+    }
+  }
+}
+
+.intro-margin {
+  @media (min-width: $small-screen) {
+    &.view {
+      overflow: visible;
+      margin-top: -56px;
+    }
+  }
+}

html/sass/mdb/free/_navbars.scss

@@ -0,0 +1,141 @@
+.navbar {
+    font-weight: 300;
+    form {
+        input {
+            margin: 0;
+            height: 1rem;
+            margin-right: 5px;
+            margin-left: 8px;
+            margin-bottom: 1px;
+        }
+    }
+    .navbar-brand {
+        align-self: flex-start;
+        overflow: visible;
+    }
+    .breadcrumb {
+        margin: 0;
+        background-color: inherit;
+        font-weight: 300;
+    }
+    &.navbar-dark {
+        .navbar-brand {
+            color: #fff;
+            &:hover {
+                color: #fff;
+            }
+        }
+        .navbar-toggler-icon {
+            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
+            cursor: pointer; 
+        } 
+        .breadcrumb, 
+        .navbar-nav .nav-item {
+            a {
+                color: #fff;
+                transition: .35s;
+                &:hover {
+                    color: rgba(255, 255, 255, .75);
+                }
+            }
+            &.active {
+                background-color: rgba(255, 255, 255, 0.1);
+            }
+            .dropdown-menu a {
+                color: #212121;
+                &:hover,
+                &:focus,
+                &:active {
+                    color: #212121;
+                }
+            }
+        }
+        .nav-link {
+            color: #fff;
+        }
+        .navbar-toggler {
+            color: #fff;
+        }
+    }
+    &.navbar-light {
+        .navbar-toggler-icon {
+            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
+        }
+        .breadcrumb,
+        .nav-item {
+            a {
+                color: #212121;
+                transition: .35s;
+                &:hover {
+                    transition: .35s;
+                    color: #212121;
+                }
+            }
+            &.active {
+                background-color: rgba(158, 158, 158, 0.2);
+            }
+            .dropdown-menu a {
+                color: #000;
+                padding: 1rem;
+            }
+        }
+        .navbar-toggler {
+            color: #000;
+        }
+    }
+    .dropdown-menu {
+        a {
+            font-size: 0.9375rem;
+            font-weight: 300;
+            padding: 10px;
+        }
+    }
+    .navbar-toggler {
+        border-width: 0;
+    }
+    .nav-flex-icons {
+        flex-direction: row;
+    }
+    .container {
+        @media (max-width: 991px) {
+            width: 100%;
+            .navbar-toggler-right {
+                right: 0;
+            }
+        }
+    }
+    .dropdown-menu {
+        position: absolute !important;
+    }
+    &.double-nav {
+        flex-direction: row;
+    }
+}
+
+// Input line color
+.navbar-dark form {
+    input[type=text] {
+        border-bottom: 1px solid #fff;
+    }
+    .form-control {
+        color: #fff;
+        @include placeholder {
+            color: rgba(255, 255, 255, .65) !important;
+            font-weight: 300;
+        }
+    }
+}
+
+.navbar-light form {
+    // Style Placeholders
+    input[type=text] {
+        border-bottom: 1px solid #1C2331;
+    }
+    .form-control {
+        color: #1C2331;
+        @include placeholder {
+            color: #1C2331!important;
+            font-weight: 300;
+        }
+    }
+}

html/sass/mdb/free/_pagination.scss

@@ -0,0 +1,86 @@
+.pagination {
+  .page-link {
+    background-color: transparent;
+    font-size: 0.8rem;
+  }
+  .active .page-link {
+    border-radius: 2px;
+    transition: all 0.2s linear;
+    @extend.z-depth-1;
+    &:hover {
+      color: #fff;
+    }
+  }
+}
+
+// Circle pagination
+.pagination {
+  &.pagination-circle {
+    .page-link {
+      border-radius: 50%;
+      margin-left: 2px;
+      margin-right: 2px;
+      &:hover {
+        border-radius: 50%;
+      }
+    }
+    .active .page-link {
+      border-radius: 50%;
+    }
+  }
+}
+
+.pagination .page-link {
+  border: 0;
+  transition: all 0.3s linear;
+  &:hover {
+    transition: all 0.3s linear;
+    background-color: #eee;
+  }
+  &:focus {
+    background-color: transparent;
+  }
+}
+
+.pagination {
+  &.pg-blue {
+    .active .page-link {
+      background-color: $primary-color;
+    }
+  }
+  &.pg-red {
+    .active .page-link {
+      background-color: $danger-color;
+    }
+  }
+  &.pg-teal {
+    .active .page-link {
+      background-color: $default-color;
+    }
+  }
+  &.pg-darkgrey {
+    .active .page-link {
+      background-color: $special-color;
+    }
+  }
+  &.pg-dark {
+    .active .page-link {
+      background-color: $elegant-color;
+    }
+  }
+  &.pg-bluegrey {
+    .active .page-link {
+      background-color: #3F729B;
+    }
+  }
+  &.pg-amber {
+    .active .page-link {
+      background-color: #ff6f00;
+    }
+  }
+  &.pg-purple {
+    .active .page-link {
+      background-color: #5e35b1;
+    }
+  }
+}

html/sass/mdb/free/_progress.scss

@@ -0,0 +1,34 @@
+// Progress
+.progress {
+  box-shadow: none;
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: $progress-bar-height;
+  overflow: hidden;
+  margin-bottom: $progress-bar-margin-y;
+  background-color: $progress-bar-bg-color;
+  .progress-bar {
+    border-radius: 0;
+    height: $progress-bar-height;
+    background-color: $primary-color-dark;
+  }
+  &.progress-default {
+    height: $progress-height;
+    .progress-bar {
+      height: $progress-height;
+    }
+  }
+  &.progress-wider {
+    height: $progress-bar-wider-height;
+    .progress-bar {
+      height: $progress-bar-wider-height;
+    }
+  }
+  &.progress-narrower {
+    height: $progress-bar-narrower-height;
+    .progress-bar {
+      height: $progress-bar-narrower-height;
+    }
+  }
+}

html/sass/mdb/free/_roboto.scss

@@ -0,0 +1,51 @@
+// ROBOTO FONT
+
+@font-face {
+    font-family: "Roboto";
+    src: local(Roboto Thin), url('#{$roboto-font-path}Roboto-Thin.eot');
+    src: url("#{$roboto-font-path}Roboto-Thin.eot?#iefix") format('embedded-opentype'),
+        url("#{$roboto-font-path}Roboto-Thin.woff2") format("woff2"),
+        url("#{$roboto-font-path}Roboto-Thin.woff") format("woff"),
+        url("#{$roboto-font-path}Roboto-Thin.ttf") format("truetype");
+
+    font-weight: 200;
+} 
+@font-face {
+    font-family: "Roboto";
+    src: local(Roboto Light), url('#{$roboto-font-path}Roboto-Light.eot');
+    src: url("#{$roboto-font-path}Roboto-Light.eot?#iefix") format('embedded-opentype'),
+        url("#{$roboto-font-path}Roboto-Light.woff2") format("woff2"),
+        url("#{$roboto-font-path}Roboto-Light.woff") format("woff"),
+        url("#{$roboto-font-path}Roboto-Light.ttf") format("truetype");
+    font-weight: 300;
+}
+
+@font-face {
+    font-family: "Roboto";
+    src: local(Roboto Regular), url('#{$roboto-font-path}Roboto-Regular.eot');
+    src: url("#{$roboto-font-path}Roboto-Regular.eot?#iefix") format('embedded-opentype'),
+        url("#{$roboto-font-path}Roboto-Regular.woff2") format("woff2"),
+        url("#{$roboto-font-path}Roboto-Regular.woff") format("woff"),
+        url("#{$roboto-font-path}Roboto-Regular.ttf") format("truetype");
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: "Roboto";
+    src: url('#{$roboto-font-path}Roboto-Medium.eot');
+    src: url("#{$roboto-font-path}Roboto-Medium.eot?#iefix") format('embedded-opentype'),
+        url("#{$roboto-font-path}Roboto-Medium.woff2") format("woff2"),
+        url("#{$roboto-font-path}Roboto-Medium.woff") format("woff"),
+        url("#{$roboto-font-path}Roboto-Medium.ttf") format("truetype");
+    font-weight: 500;
+}
+
+@font-face {
+    font-family: "Roboto";
+    src: url('#{$roboto-font-path}Roboto-Bold.eot');
+    src: url("#{$roboto-font-path}Roboto-Bold.eot?#iefix") format('embedded-opentype'),
+        url("#{$roboto-font-path}Roboto-Bold.woff2") format("woff2"),
+        url("#{$roboto-font-path}Roboto-Bold.woff") format("woff"),
+        url("#{$roboto-font-path}Roboto-Bold.ttf") format("truetype");
+    font-weight: 700;
+}

html/sass/mdb/free/_tables.scss

@@ -0,0 +1,51 @@
+table {
+  th {
+    font-size: 0.9rem;
+    font-weight: 400;
+  }
+  td {
+    font-size: 0.9rem;
+    font-weight: 300;
+  }
+  &.table {
+    thead th {
+      border-top: none;
+    }
+    th,
+    td {
+      padding-top: 1.1rem;
+      padding-bottom: 1rem;
+    }
+    a {
+      margin: 0;
+      color: #212529;
+    }
+    .label-table {
+      margin: 0;
+      padding: 0;
+      line-height: 15px;
+      height: 15px; 
+    }
+    .btn-table {
+      margin: 0px 1px;
+      padding: 3px 7px;
+      .fa {
+        font-size: 11px;
+      }
+    }
+  }
+  &.table-hover tbody tr:hover {
+    background-color: rgba(0, 0, 0, 0.075);
+    transition: 0.5s;
+  }
+  .th-lg {
+    min-width: 9rem;
+  }
+  &.table-sm {
+    th,
+    td {
+      padding-top: 0.6rem;
+      padding-bottom: 0.6rem;
+    }
+  }
+}

html/sass/mdb/free/_typography.scss

@@ -0,0 +1,125 @@
+// Typography
+// ROBOTO FONT
+@font-face {
+  font-family: "Roboto";
+  src: local(Roboto Thin),
+    url('#{$roboto-font-path}Roboto-Thin.eot');
+  src: url("#{$roboto-font-path}Roboto-Thin.eot?#iefix") format('embedded-opentype'),
+    url("#{$roboto-font-path}Roboto-Thin.woff2") format("woff2"),
+    url("#{$roboto-font-path}Roboto-Thin.woff") format("woff"),
+    url("#{$roboto-font-path}Roboto-Thin.ttf") format("truetype");
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: local(Roboto Light),
+    url('#{$roboto-font-path}Roboto-Light.eot');
+  src: url("#{$roboto-font-path}Roboto-Light.eot?#iefix") format('embedded-opentype'),
+    url("#{$roboto-font-path}Roboto-Light.woff2") format("woff2"),
+    url("#{$roboto-font-path}Roboto-Light.woff") format("woff"),
+    url("#{$roboto-font-path}Roboto-Light.ttf") format("truetype");
+  font-weight: 300;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: local(Roboto Regular),
+    url('#{$roboto-font-path}Roboto-Regular.eot');
+  src: url("#{$roboto-font-path}Roboto-Regular.eot?#iefix") format('embedded-opentype'),
+    url("#{$roboto-font-path}Roboto-Regular.woff2") format("woff2"),
+    url("#{$roboto-font-path}Roboto-Regular.woff") format("woff"),
+    url("#{$roboto-font-path}Roboto-Regular.ttf") format("truetype");
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url('#{$roboto-font-path}Roboto-Medium.eot');
+  src: url("#{$roboto-font-path}Roboto-Medium.eot?#iefix") format('embedded-opentype'),
+    url("#{$roboto-font-path}Roboto-Medium.woff2") format("woff2"),
+    url("#{$roboto-font-path}Roboto-Medium.woff") format("woff"),
+    url("#{$roboto-font-path}Roboto-Medium.ttf") format("truetype");
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url('#{$roboto-font-path}Roboto-Bold.eot');
+  src: url("#{$roboto-font-path}Roboto-Bold.eot?#iefix") format('embedded-opentype'),
+    url("#{$roboto-font-path}Roboto-Bold.woff2") format("woff2"),
+    url("#{$roboto-font-path}Roboto-Bold.woff") format("woff"),
+    url("#{$roboto-font-path}Roboto-Bold.ttf") format("truetype");
+  font-weight: 700;
+}
+
+body {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 300;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 300;
+}
+
+@each $key, $val in $grid-breakpoints {
+  @include media-breakpoint-up($key) {
+    $y: map-get($responsive-headings, $key);
+    @each $name,
+      $value in $y {
+      .#{$name}-responsive {
+        font-size: $value;
+      }
+    }
+  }
+}
+
+@each $size, $length in $spacers {
+  .fs-#{$size} {
+    font-size: $length !important;
+  }
+}
+
+.divider-new {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  font-weight: 300;
+  margin-top: 45px;
+  margin-bottom: 45px;
+  h2 {
+    margin-top: 5px;
+  }
+  &:before {
+    content: '';
+    height: 1.5px;
+    background: #c6c6c6;
+    flex: 1;
+    margin: 0 .45em 0 0;
+  }
+  &:after {
+    content: '';
+    height: 1.5px;
+    background: #c6c6c6;
+    flex: 1;
+    margin: 0 0 0 .45em;
+  }
+}
+
+blockquote {
+  padding: .5rem 1rem;
+  font-size: 1.25rem;
+  border-left: .25rem solid #eceeef;
+  p {
+    font-size: 0.9rem;
+    padding-left: 2rem;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+}

html/sass/mdb/free/_waves.scss

@@ -0,0 +1,157 @@
+
+/*!
+ * Waves v0.7.5
+ * http://fian.my.id/Waves 
+ * 
+ * Copyright 2014-2016 Alfiana E. Sibuea and other contributors 
+ * Released under the MIT license 
+ * https://github.com/fians/Waves/blob/master/LICENSE 
+ */
+
+@mixin waves-transition($transition){
+  -webkit-transition: $transition;
+  -moz-transition: $transition; 
+  -o-transition: $transition;
+  transition: $transition;
+}
+
+@mixin waves-transform($string){
+  -webkit-transform: $string;
+  -moz-transform: $string;
+  -ms-transform: $string;
+  -o-transform: $string;
+  transform: $string;
+}
+
+@mixin waves-box-shadow($shadow){
+  -webkit-box-shadow: $shadow;
+  box-shadow: $shadow;
+}
+
+.waves-effect {
+  position: relative; 
+  cursor: pointer;
+  overflow: hidden;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  z-index: 1;
+  .waves-ripple {
+    position: absolute;
+    border-radius: 50%;
+    width: 100px;
+    height: 100px;
+    margin-top:-50px;
+    margin-left:-50px;
+    opacity: 0;
+    background: rgba(0,0,0,0.2);
+    $gradient: rgba(0,0,0,0.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%;
+    background: -webkit-radial-gradient($gradient);
+    background: -o-radial-gradient($gradient);
+    background: -moz-radial-gradient($gradient); 
+    background: radial-gradient($gradient);
+    @include waves-transition(all 0.5s ease-out);
+    transition-property: transform, opacity;
+    @include waves-transform(scale(0) translate(0,0));
+    pointer-events: none;
+  }
+
+  &.waves-light .waves-ripple {
+    background: rgba(255,255,255,0.4);
+    $gradient: rgba(255,255,255,0.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%;
+    background: -webkit-radial-gradient($gradient);
+    background: -o-radial-gradient($gradient);
+    background: -moz-radial-gradient($gradient);
+    background: radial-gradient($gradient);
+  }
+  
+  &.waves-classic .waves-ripple {
+    background: rgba(0,0,0,0.2);
+  }
+  
+  &.waves-classic.waves-light .waves-ripple {
+    background: rgba(255,255,255,0.4);
+  }
+}
+
+.waves-notransition {
+  @include waves-transition(none #{"!important"});
+}
+
+.waves-button, 
+.waves-circle {
+  @include waves-transform(translateZ(0));
+  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
+}
+
+.waves-button,
+.waves-button:hover,
+.waves-button:visited,
+.waves-button-input {
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  border: none;
+  outline: none;
+  color: inherit;
+  background-color: rgba(0, 0, 0, 0);
+  font-size: 1em;
+  line-height:1em;
+  text-align: center;
+  text-decoration: none;
+  z-index: 1;
+}
+
+.waves-button {
+  padding: 0.85em 1.1em;
+  border-radius: 0.2em;
+}
+
+.waves-button-input {
+  margin: 0;
+  padding: 0.85em 1.1em;
+}
+
+.waves-input-wrapper {
+  border-radius: 0.2em;
+  vertical-align: middle;
+  display:inline-block;
+  &.waves-button {
+    padding: 0;
+  }
+
+  .waves-button-input {
+    position: relative;
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
+}
+
+.waves-circle {
+  text-align: center;
+  width: 2.5em;
+  height: 2.5em;
+  line-height: 2.5em;
+  border-radius: 50%;
+}
+
+.waves-float {
+  -webkit-mask-image: none;
+  @include waves-box-shadow(0px 1px 1.5px 1px rgba(0, 0, 0, 0.12));
+  @include waves-transition(all 300ms);
+
+  &:active {
+    @include waves-box-shadow(0px 8px 20px 1px rgba(0, 0, 0, 0.30));
+  }
+}
+
+.waves-block {
+  display: block;
+}
+
+a {
+  &.waves-effect,
+  &.waves-light {
+    display:inline-block;
+  }
+}

html/sass/mdb/free/data/_colors.scss

@@ -0,0 +1,985 @@
+// COLORS
+
+$mdb-color: (
+  "lighten-5":  #D0D6E2,
+  "lighten-4":  #B1BACE,
+  "lighten-3":  #929FBA,
+  "lighten-2":  #7283A7,
+  "lighten-1":  #59698D,
+  "base":     #45526E,
+  "darken-1":   #3B465E,
+  "darken-2":   #2E3951,
+  "darken-3":   #1C2A48,
+  "darken-4":   #1C2331,
+);
+
+$red: (
+  "lighten-5":  #FFEBEE,
+  "lighten-4":  #FFCDD2,
+  "lighten-3":  #EF9A9A,
+  "lighten-2":  #E57373,
+  "lighten-1":  #EF5350,
+  "base":     #F44336,
+  "darken-1":   #E53935,
+  "darken-2":   #D32F2F,
+  "darken-3":   #C62828,
+  "darken-4":   #B71C1C,
+  "accent-1":  #FF8A80,
+  "accent-2":  #FF5252,
+  "accent-3":  #FF1744,
+  "accent-4":  #D50000
+);
+
+$pink: (
+  "lighten-5":  #fce4ec,
+  "lighten-4":  #f8bbd0,
+  "lighten-3":  #f48fb1,
+  "lighten-2":  #f06292,
+  "lighten-1":  #ec407a,
+  "base":     #e91e63,
+  "darken-1":   #d81b60,
+  "darken-2":   #c2185b,
+  "darken-3":   #ad1457,
+  "darken-4":   #880e4f,
+  "accent-1":  #ff80ab,
+  "accent-2":  #ff4081,
+  "accent-3":  #f50057,
+  "accent-4":  #c51162
+);
+
+$purple: (
+  "lighten-5":  #f3e5f5,
+  "lighten-4":  #e1bee7,
+  "lighten-3":  #ce93d8,
+  "lighten-2":  #ba68c8,
+  "lighten-1":  #ab47bc,
+  "base":     #9c27b0,
+  "darken-1":   #8e24aa,
+  "darken-2":   #7b1fa2,
+  "darken-3":   #6a1b9a,
+  "darken-4":   #4a148c,
+  "accent-1":  #ea80fc,
+  "accent-2":  #e040fb,
+  "accent-3":  #d500f9,
+  "accent-4":  #aa00ff
+);
+
+$deep-purple: (
+  "lighten-5":  #ede7f6,
+  "lighten-4":  #d1c4e9,
+  "lighten-3":  #b39ddb,
+  "lighten-2":  #9575cd,
+  "lighten-1":  #7e57c2,
+  "base":     #673ab7,
+  "darken-1":   #5e35b1,
+  "darken-2":   #512da8,
+  "darken-3":   #4527a0,
+  "darken-4":   #311b92,
+  "accent-1":  #b388ff,
+  "accent-2":  #7c4dff,
+  "accent-3":  #651fff,
+  "accent-4":  #6200ea
+);
+
+$indigo: (
+  "lighten-5":  #e8eaf6,
+  "lighten-4":  #c5cae9,
+  "lighten-3":  #9fa8da,
+  "lighten-2":  #7986cb,
+  "lighten-1":  #5c6bc0,
+  "base":     #3f51b5,
+  "darken-1":   #3949ab,
+  "darken-2":   #303f9f,
+  "darken-3":   #283593,
+  "darken-4":   #1a237e,
+  "accent-1":  #8c9eff,
+  "accent-2":  #536dfe,
+  "accent-3":  #3d5afe,
+  "accent-4":  #304ffe
+);
+
+$blue: (
+  "lighten-5":  #E3F2FD,
+  "lighten-4":  #BBDEFB,
+  "lighten-3":  #90CAF9,
+  "lighten-2":  #64B5F6,
+  "lighten-1":  #42A5F5,
+  "base":     #2196F3,
+  "darken-1":   #1E88E5,
+  "darken-2":   #1976D2,
+  "darken-3":   #1565C0,
+  "darken-4":   #0D47A1,
+  "accent-1":  #82B1FF,
+  "accent-2":  #448AFF,
+  "accent-3":  #2979FF,
+  "accent-4":  #2962FF
+);
+
+$light-blue: (
+  "lighten-5":  #e1f5fe,
+  "lighten-4":  #b3e5fc,
+  "lighten-3":  #81d4fa,
+  "lighten-2":  #4fc3f7,
+  "lighten-1":  #29b6f6,
+  "base":     #03a9f4,
+  "darken-1":   #039be5,
+  "darken-2":   #0288d1,
+  "darken-3":   #0277bd,
+  "darken-4":   #01579b,
+  "accent-1":  #80d8ff,
+  "accent-2":  #40c4ff,
+  "accent-3":  #00b0ff,
+  "accent-4":  #0091ea
+);
+
+$cyan: (
+  "lighten-5":  #e0f7fa,
+  "lighten-4":  #b2ebf2,
+  "lighten-3":  #80deea,
+  "lighten-2":  #4dd0e1,
+  "lighten-1":  #26c6da,
+  "base":     #00bcd4,
+  "darken-1":   #00acc1,
+  "darken-2":   #0097a7,
+  "darken-3":   #00838f,
+  "darken-4":   #006064,
+  "accent-1":  #84ffff,
+  "accent-2":  #18ffff,
+  "accent-3":  #00e5ff,
+  "accent-4":  #00b8d4
+);
+
+$teal: (
+  "lighten-5":  #e0f2f1,
+  "lighten-4":  #b2dfdb,
+  "lighten-3":  #80cbc4,
+  "lighten-2":  #4db6ac,
+  "lighten-1":  #26a69a,
+  "base":     #009688,
+  "darken-1":   #00897b,
+  "darken-2":   #00796b,
+  "darken-3":   #00695c,
+  "darken-4":   #004d40,
+  "accent-1":  #a7ffeb,
+  "accent-2":  #64ffda,
+  "accent-3":  #1de9b6,
+  "accent-4":  #00bfa5
+);
+
+$green: (
+  "lighten-5":  #E8F5E9,
+  "lighten-4":  #C8E6C9,
+  "lighten-3":  #A5D6A7,
+  "lighten-2":  #81C784,
+  "lighten-1":  #66BB6A,
+  "base":     #4CAF50,
+  "darken-1":   #43A047,
+  "darken-2":   #388E3C,
+  "darken-3":   #2E7D32,
+  "darken-4":   #1B5E20,
+  "accent-1":  #B9F6CA,
+  "accent-2":  #69F0AE,
+  "accent-3":  #00E676,
+  "accent-4":  #00C853
+);
+
+$light-green: (
+  "lighten-5":  #f1f8e9,
+  "lighten-4":  #dcedc8,
+  "lighten-3":  #c5e1a5,
+  "lighten-2":  #aed581,
+  "lighten-1":  #9ccc65,
+  "base":     #8bc34a,
+  "darken-1":   #7cb342,
+  "darken-2":   #689f38,
+  "darken-3":   #558b2f,
+  "darken-4":   #33691e,
+  "accent-1":  #ccff90,
+  "accent-2":  #b2ff59,
+  "accent-3":  #76ff03,
+  "accent-4":  #64dd17
+);
+
+$lime: (
+  "lighten-5":  #f9fbe7,
+  "lighten-4":  #f0f4c3,
+  "lighten-3":  #e6ee9c,
+  "lighten-2":  #dce775,
+  "lighten-1":  #d4e157,
+  "base":     #cddc39,
+  "darken-1":   #c0ca33,
+  "darken-2":   #afb42b,
+  "darken-3":   #9e9d24,
+  "darken-4":   #827717,
+  "accent-1":  #f4ff81,
+  "accent-2":  #eeff41,
+  "accent-3":  #c6ff00,
+  "accent-4":  #aeea00
+);
+
+$yellow: (
+  "lighten-5":  #fffde7,
+  "lighten-4":  #fff9c4,
+  "lighten-3":  #fff59d,
+  "lighten-2":  #fff176,
+  "lighten-1":  #ffee58,
+  "base":     #ffeb3b,
+  "darken-1":   #fdd835,
+  "darken-2":   #fbc02d,
+  "darken-3":   #f9a825,
+  "darken-4":   #f57f17,
+  "accent-1":  #ffff8d,
+  "accent-2":  #ffff00,
+  "accent-3":  #ffea00,
+  "accent-4":  #ffd600
+);
+
+$amber: (
+  "lighten-5":  #fff8e1,
+  "lighten-4":  #ffecb3,
+  "lighten-3":  #ffe082,
+  "lighten-2":  #ffd54f,
+  "lighten-1":  #ffca28,
+  "base":     #ffc107,
+  "darken-1":   #ffb300,
+  "darken-2":   #ffa000,
+  "darken-3":   #ff8f00,
+  "darken-4":   #ff6f00,
+  "accent-1":  #ffe57f,
+  "accent-2":  #ffd740,
+  "accent-3":  #ffc400,
+  "accent-4":  #ffab00
+);
+
+$orange: (
+  "lighten-5":  #fff3e0,
+  "lighten-4":  #ffe0b2,
+  "lighten-3":  #ffcc80,
+  "lighten-2":  #ffb74d,
+  "lighten-1":  #ffa726,
+  "base":     #ff9800,
+  "darken-1":   #fb8c00,
+  "darken-2":   #f57c00,
+  "darken-3":   #ef6c00,
+  "darken-4":   #e65100,
+  "accent-1":  #ffd180,
+  "accent-2":  #ffab40,
+  "accent-3":  #ff9100,
+  "accent-4":  #ff6d00
+);
+
+$deep-orange: (
+  "lighten-5":  #fbe9e7,
+  "lighten-4":  #ffccbc,
+  "lighten-3":  #ffab91,
+  "lighten-2":  #ff8a65,
+  "lighten-1":  #ff7043,
+  "base":     #ff5722,
+  "darken-1":   #f4511e,
+  "darken-2":   #e64a19,
+  "darken-3":   #d84315,
+  "darken-4":   #bf360c,
+  "accent-1":  #ff9e80,
+  "accent-2":  #ff6e40,
+  "accent-3":  #ff3d00,
+  "accent-4":  #dd2c00
+);
+
+$brown: (
+  "lighten-5":  #efebe9,
+  "lighten-4":  #d7ccc8,
+  "lighten-3":  #bcaaa4,
+  "lighten-2":  #a1887f,
+  "lighten-1":  #8d6e63,
+  "base":     #795548,
+  "darken-1":   #6d4c41,
+  "darken-2":   #5d4037,
+  "darken-3":   #4e342e,
+  "darken-4":   #3e2723
+);
+
+$blue-grey: (
+  "lighten-5":  #eceff1,
+  "lighten-4":  #cfd8dc,
+  "lighten-3":  #b0bec5,
+  "lighten-2":  #90a4ae,
+  "lighten-1":  #78909c,
+  "base":     #607d8b,
+  "darken-1":   #546e7a,
+  "darken-2":   #455a64,
+  "darken-3":   #37474f,
+  "darken-4":   #263238
+);
+
+$grey: (
+  "lighten-5":  #fafafa,
+  "lighten-4":  #f5f5f5,
+  "lighten-3":  #eeeeee,
+  "lighten-2":  #e0e0e0,
+  "lighten-1":  #bdbdbd,
+  "base":     #9e9e9e,
+  "darken-1":   #757575,
+  "darken-2":   #616161,
+  "darken-3":   #424242,
+  "darken-4":   #212121
+);
+
+$shades: (
+  "black":    #000000,
+  "white":    #FFFFFF,
+  "transparent":  transparent
+);
+
+$colors: (
+  "mdb-color": $mdb-color,
+  "red": $red,
+  "pink": $pink,
+  "purple": $purple,
+  "deep-purple": $deep-purple,
+  "indigo": $indigo,
+  "blue": $blue,
+  "light-blue": $light-blue,
+  "cyan": $cyan,
+  "teal": $teal,
+  "green": $green,
+  "light-green": $light-green,
+  "lime": $lime,
+  "yellow": $yellow,
+  "amber": $amber,
+  "orange": $orange,
+  "deep-orange": $deep-orange,
+  "brown": $brown,
+  "blue-grey": $blue-grey,
+  "grey": $grey,
+  "shades": $shades
+);
+
+// Color Classes
+$enable_full_palette: true;
+
+@if $enable_full_palette == true {
+  @each $color_name,
+    $color in $colors {
+    @each $color_type,
+      $color_value in $color {
+      @if $color_type=="base" {
+        .#{$color_name} {
+          background-color: $color_value !important;
+        }
+        .#{$color_name}-text {
+          color: $color_value !important;
+        }
+      }
+      @else {
+        .#{$color_name}.#{$color_type} {
+          background-color: $color_value !important;
+        }
+        // .#{$color_name}-text.text-#{$color_type} {
+        //   color: $color_value !important;
+        // }
+      }
+    }
+  }
+}
+
+// Shade classes
+@each $color,
+  $color_value in $shades {
+  .#{$color} {
+    background-color: $color_value !important;
+  }
+  .#{$color}-text {
+    color: $color_value !important;
+  }
+}
+
+// usage: color("name_of_color", "type_of_color")
+// to avoid to repeating map-get($colors, ...)
+@function color($color, $type) {
+  @if map-has-key($colors, $color) {
+    $curr_color: map-get($colors, $color);
+    @if map-has-key($curr_color, $type) {
+      @return map-get($curr_color, $type);
+    }
+  }
+  // @warn "Unknown `#{name}` in $colors.";
+  @return null;
+}
+
+.light-blue-text {
+  color: map-get($blue, "accent-1") !important;
+}
+
+.dark-grey-text {
+  color:#4f4f4f !important;
+}
+
+// Social colors
+$fb-color: #3B5998 !default;
+$tw-color: #55ACEE !default;
+$gplus-color: #DD4B39 !default;
+$yt-color: #ED302F !default;
+$li-color: #0082CA !default;
+$pin-color: #C61118 !default;
+$ins-color: #2E5E86 !default;
+$git-color: #333 !default;
+$comm-color: #30CFC0 !default;
+$vk-color: #4C75A3 !default;
+$drib-color: #EC4A89 !default;
+$so-color: #ffac44 !default;
+$slack-color: #56b68b !default;
+
+$social-colors: (
+  "fb": #3B5998,
+  "tw": #55ACEE,
+  "gplus": #DD4B39,
+  "yt": #ED302F,
+  "li": #0082CA,
+  "pin": #C61118,
+  "ins": #2E5E86,
+  "git": #333,
+  "comm": #30CFC0,
+  "vk": #4C75A3,
+  "dribbble": #EC4A89,
+  "so": #ffac44,
+  "slack": #56b68b,
+  "email": #4B515D
+);
+
+// Material Design Colors
+$danger-color: #ff3547 !default;
+.danger-color {
+  background-color: $danger-color!important;
+}
+
+$danger-color-dark: #CC0000 !default;
+.danger-color-dark {
+  background-color: $danger-color-dark!important;
+}
+
+$warning-color: #ffbb33 !default;
+.warning-color {
+  background-color: $warning-color!important;
+}
+
+$warning-color-dark: #FF8800 !default;
+.warning-color-dark {
+  background-color: $warning-color-dark!important;
+}
+
+$success-color: #00C851 !default;
+.success-color {
+  background-color: $success-color!important;
+}
+
+$success-color-dark: #007E33 !default;
+.success-color-dark {
+  background-color: $success-color-dark!important;
+}
+
+$info-color: #33b5e5 !default;
+.info-color {
+  background-color: $info-color!important;
+}
+
+$info-color-dark: #0099CC !default;
+.info-color-dark {
+  background-color: $info-color-dark!important;
+}
+
+// MDB Colors
+$default-color: #2BBBAD !default;
+.default-color {
+  background-color: $default-color!important;
+}
+
+$default-color-dark: #00695c !default;
+.default-color-dark {
+  background-color: $default-color-dark!important;
+}
+
+$primary-color: #4285F4 !default;
+.primary-color {
+  background-color: $primary-color!important;
+}
+
+$primary-color-dark: #0d47a1 !default;
+.primary-color-dark {
+  background-color: $primary-color-dark!important;
+}
+
+$secondary-color: #aa66cc !default;
+.secondary-color {
+  background-color: $secondary-color!important;
+}
+
+$secondary-color-dark: #9933CC !default;
+.secondary-color-dark {
+  background-color: $secondary-color-dark!important;
+}
+
+$elegant-color: #2E2E2E !default;
+.elegant-color {
+  background-color: $elegant-color!important;
+}
+
+$elegant-color-dark: #212121 !default;
+.elegant-color-dark {
+  background-color: $elegant-color-dark!important;
+}
+
+$stylish-color: #4B515D !default;
+.stylish-color {
+  background-color: $stylish-color!important;
+}
+
+$stylish-color-dark: #3E4551 !default;
+.stylish-color-dark {
+  background-color: $stylish-color-dark!important;
+}
+
+$special-color: #37474F !default;
+.special-color {
+  background-color: $special-color!important;
+}
+
+$special-color-dark: #263238 !default;
+.special-color-dark {
+  background-color: $special-color-dark!important;
+}
+
+$unique-color: #3F729B !default;
+.unique-color {
+  background-color: $unique-color!important;
+}
+
+$unique-color-dark: #1C2331 !default;
+.unique-color-dark {
+  background-color: $unique-color-dark!important;
+}
+
+$mdbcolor: #45526E !default;
+.mdb-color {
+  background-color: $mdbcolor!important;
+}
+
+$error-color: color("red", "base") !default;
+
+// RGBA colors
+// Light overlays
+$rgba-blue-light: rgba(3, 169, 244, 0.3) !default;
+.rgba-blue-light {
+  background-color: $rgba-blue-light!important;
+}
+
+$rgba-red-light: rgba(244, 67, 54, 0.3) !default;
+.rgba-red-light {
+  background-color: $rgba-red-light!important;
+}
+
+$rgba-pink-light: rgba(233, 30, 99, 0.3) !default;
+.rgba-pink-light {
+  background-color: $rgba-pink-light!important;
+}
+
+$rgba-purple-light: rgba(156, 39, 176, 0.3) !default;
+.rgba-purple-light {
+  background-color: $rgba-purple-light!important;
+}
+
+$rgba-indigo-light: rgba(63, 81, 181, 0.3) !default;
+.rgba-indigo-light {
+  background-color: $rgba-indigo-light!important;
+}
+
+$rgba-cyan-light: rgba(0, 188, 212, 0.3) !default;
+.rgba-cyan-light {
+  background-color: $rgba-cyan-light!important;
+}
+
+$rgba-teal-light: rgba(0, 150, 136, 0.3) !default;
+.rgba-teal-light {
+  background-color: $rgba-teal-light!important;
+}
+
+$rgba-green-light: rgba(76, 175, 80, 0.3) !default;
+.rgba-green-light {
+  background-color: $rgba-green-light!important;
+}
+
+$rgba-lime-light: rgba(205, 220, 57, 0.3) !default;
+.rgba-lime-light {
+  background-color: $rgba-lime-light!important;
+}
+
+$rgba-yellow-light: rgba(255, 235, 59, 0.3) !default;
+.rgba-yellow-light {
+  background-color: $rgba-yellow-light!important;
+}
+
+$rgba-orange-light: rgba(255, 152, 0, 0.3) !default;
+.rgba-orange-light {
+  background-color: $rgba-orange-light!important;
+}
+
+$rgba-brown-light: rgba(121, 85, 72, 0.3) !default;
+.rgba-brown-light {
+  background-color: $rgba-brown-light!important;
+}
+
+$rgba-grey-light: rgba(158, 158, 158, 0.3) !default;
+.rgba-grey-light {
+  background-color: $rgba-grey-light!important;
+}
+
+$rgba-bluegrey-light: rgba(96, 125, 139, 0.3) !default;
+.rgba-bluegrey-light {
+  background-color: $rgba-bluegrey-light!important;
+}
+
+$rgba-black-light: rgba(0, 0, 0, 0.3) !default;
+.rgba-black-light {
+  background-color: $rgba-black-light!important;
+}
+
+$rgba-stylish-light: rgba(62, 69, 81, 0.3) !default;
+.rgba-stylish-light {
+  background-color: $rgba-stylish-light!important;
+}
+
+$rgba-white-light: rgba(255, 255, 255, 0.3) !default;
+.rgba-white-light {
+  background-color: $rgba-white-light!important;
+}
+
+// Strong overlays
+$rgba-blue-strong: rgba(3, 169, 244, 0.7) !default;
+.rgba-blue-strong {
+  background-color: $rgba-blue-strong!important;
+}
+
+$rgba-red-strong: rgba(244, 67, 54, 0.7) !default;
+.rgba-red-strong {
+  background-color: $rgba-red-strong!important;
+}
+
+$rgba-pink-strong: rgba(233, 30, 99, 0.7) !default;
+.rgba-pink-strong {
+  background-color: $rgba-pink-strong!important;
+}
+
+$rgba-purple-strong: rgba(156, 39, 176, 0.7) !default;
+.rgba-purple-strong {
+  background-color: $rgba-purple-strong!important;
+}
+
+$rgba-indigo-strong: rgba(63, 81, 181, 0.7) !default;
+.rgba-indigo-strong {
+  background-color: $rgba-indigo-strong!important;
+}
+
+$rgba-cyan-strong: rgba(0, 188, 212, 0.7) !default;
+.rgba-cyan-strong {
+  background-color: $rgba-cyan-strong!important;
+}
+
+$rgba-teal-strong: rgba(0, 150, 136, 0.7) !default;
+.rgba-teal-strong {
+  background-color: $rgba-teal-strong!important;
+}
+
+$rgba-green-strong: rgba(76, 175, 80, 0.7) !default;
+.rgba-green-strong {
+  background-color: $rgba-green-strong!important;
+}
+
+$rgba-lime-strong: rgba(205, 220, 57, 0.7) !default;
+.rgba-lime-strong {
+  background-color: $rgba-lime-strong!important;
+}
+
+$rgba-yellow-strong: rgba(255, 235, 59, 0.7) !default;
+.rgba-yellow-strong {
+  background-color: $rgba-yellow-strong!important;
+}
+
+$rgba-orange-strong: rgba(255, 152, 0, 0.7) !default;
+.rgba-orange-strong {
+  background-color: $rgba-orange-strong!important;
+}
+
+$rgba-brown-strong: rgba(121, 85, 72, 0.7) !default;
+.rgba-brown-strong {
+  background-color: $rgba-brown-strong!important;
+}
+
+$rgba-grey-strong: rgba(158, 158, 158, 0.7) !default;
+.rgba-grey-strong {
+  background-color: $rgba-grey-strong!important;
+}
+
+$rgba-bluegrey-strong: rgba(96, 125, 139, 0.7) !default;
+.rgba-bluegrey-strong {
+  background-color: $rgba-bluegrey-strong!important;
+}
+
+$rgba-black-strong: rgba(0, 0, 0, 0.7) !default;
+.rgba-black-strong {
+  background-color: $rgba-black-strong!important;
+}
+
+$rgba-stylish-strong: rgba(62, 69, 81, 0.7) !default;
+.rgba-stylish-strong {
+  background-color: $rgba-stylish-strong!important;
+}
+
+$rgba-white-strong: rgba(255, 255, 255, 0.7) !default;
+.rgba-white-strong {
+  background-color: $rgba-white-strong!important;
+}
+
+// Super light overlays
+$rgba-blue-slight: rgba(3, 169, 244, 0.1) !default;
+.rgba-blue-slight {
+  background-color: $rgba-blue-slight!important;
+}
+
+$rgba-red-slight: rgba(244, 67, 54, 0.1) !default;
+.rgba-red-slight {
+  background-color: $rgba-red-slight!important;
+}
+
+$rgba-pink-slight: rgba(233, 30, 99, 0.1) !default;
+.rgba-pink-slight {
+  background-color: $rgba-pink-slight!important;
+}
+
+$rgba-purple-slight: rgba(156, 39, 176, 0.1) !default;
+.rgba-purple-slight {
+  background-color: $rgba-purple-slight!important;
+}
+
+$rgba-indigo-slight: rgba(63, 81, 181, 0.1) !default;
+.rgba-indigo-slight {
+  background-color: $rgba-indigo-slight!important;
+}
+
+$rgba-cyan-slight: rgba(0, 188, 212, 0.1) !default;
+.rgba-cyan-slight {
+  background-color: $rgba-cyan-slight!important;
+}
+
+$rgba-teal-slight: rgba(0, 150, 136, 0.1) !default;
+.rgba-teal-slight {
+  background-color: $rgba-teal-slight!important;
+}
+
+$rgba-green-slight: rgba(76, 175, 80, 0.1) !default;
+.rgba-green-slight {
+  background-color: $rgba-green-slight!important;
+}
+
+$rgba-lime-slight: rgba(205, 220, 57, 0.1) !default;
+.rgba-lime-slight {
+  background-color: $rgba-lime-slight!important;
+}
+
+$rgba-yellow-slight: rgba(255, 235, 59, 0.1) !default;
+.rgba-yellow-slight {
+  background-color: $rgba-yellow-slight!important;
+}
+
+$rgba-orange-slight: rgba(255, 152, 0, 0.1) !default;
+.rgba-orange-slight {
+  background-color: $rgba-orange-slight!important;
+}
+
+$rgba-brown-slight: rgba(121, 85, 72, 0.1) !default;
+.rgba-brown-slight {
+  background-color: $rgba-brown-slight!important;
+}
+
+$rgba-grey-slight: rgba(158, 158, 158, 0.1) !default;
+.rgba-grey-slight {
+  background-color: $rgba-grey-slight!important;
+}
+
+$rgba-bluegrey-slight: rgba(96, 125, 139, 0.1) !default;
+.rgba-bluegrey-slight {
+  background-color: rgba(96, 125, 139, 0.1)!important;
+}
+
+$rgba-black-slight: rgba(0, 0, 0, 0.1) !default;
+.rgba-black-slight {
+  background-color: $rgba-black-slight!important;
+}
+
+$rgba-stylish-slight: rgba(62, 69, 81, 0.1) !default;
+.rgba-stylish-slight {
+  background-color: $rgba-stylish-slight!important;
+}
+
+$rgba-white-slight: rgba(255, 255, 255, 0.1) !default;
+.rgba-white-slight {
+  background-color: $rgba-white-slight!important;
+}
+
+$rgba-colors: (
+  // Super light
+  "blue-slight": $rgba-blue-slight,
+  "red-slight": $rgba-red-slight,
+  "pink-slight": $rgba-pink-slight,
+  "purple-slight": $rgba-purple-slight,
+  "indigo-slight": $rgba-indigo-slight,
+  "cyan-slight": $rgba-cyan-slight,
+  "teal-slight": $rgba-teal-slight,
+  "green-slight": $rgba-green-slight,
+  "lime-slight": $rgba-lime-slight,
+  "yellow-slight": $rgba-yellow-slight,
+  "orange-slight": $rgba-orange-slight,
+  "brown-slight": $rgba-brown-slight,
+  "grey-slight": $rgba-grey-slight,
+  "bluegrey-slight": $rgba-bluegrey-slight,
+  "black-slight": $rgba-black-slight,
+  "stylish-slight": $rgba-stylish-slight,
+  "white-slight": $rgba-white-slight,
+  // Light
+  "blue-light": $rgba-blue-light,
+  "red-light": $rgba-red-light,
+  "pink-light": $rgba-pink-light,
+  "purple-light": $rgba-purple-light,
+  "indigo-light": $rgba-indigo-light,
+  "cyan-light": $rgba-cyan-light,
+  "teal-light": $rgba-teal-light,
+  "green-light": $rgba-green-light,
+  "lime-light": $rgba-lime-light,
+  "yellow-light": $rgba-yellow-light,
+  "orange-light": $rgba-orange-light,
+  "brown-light": $rgba-brown-light,
+  "grey-light": $rgba-grey-light,
+  "bluegrey-light": $rgba-bluegrey-light,
+  "black-light": $rgba-black-light,
+  "stylish-light": $rgba-stylish-light,
+  "white-light": $rgba-white-light,
+  // Strong
+  "blue-strong": $rgba-blue-strong,
+  "red-strong": $rgba-red-strong,
+  "pink-strong": $rgba-pink-strong,
+  "purple-strong": $rgba-purple-strong,
+  "indigo-strong": $rgba-indigo-strong,
+  "cyan-strong": $rgba-cyan-strong,
+  "teal-strong": $rgba-teal-strong,
+  "green-strong": $rgba-green-strong,
+  "lime-strong": $rgba-lime-strong,
+  "yellow-strong": $rgba-yellow-strong,
+  "orange-strong": $rgba-orange-strong,
+  "brown-strong": $rgba-brown-strong,
+  "grey-strong": $rgba-grey-strong,
+  "bluegrey-strong": $rgba-bluegrey-strong,
+  "black-strong": $rgba-black-strong,
+  "stylish-strong": $rgba-stylish-strong,
+  "white-strong": $rgba-white-strong,
+);
+
+$material-colors: (
+  "primary": $primary-color,
+  "danger": $danger-color,
+  "warning": $warning-color-dark,
+  "success": $success-color,
+  "info": $info-color,
+  "default": $default-color,
+  "secondary": $secondary-color,
+  "elegant": $elegant-color,
+  "unique": map-get($pink, darken-4),
+  "dark-green": map-get($green, darken-2),
+  "mdb-color": map-get($mdb-color, lighten-1),
+  "red": map-get($red, darken-2),
+  "pink": map-get($pink, lighten-1),
+  "purple": map-get($purple, darken-1),
+  "deep-purple": map-get($deep-purple, darken-2),
+  "indigo": map-get($indigo, base),
+  "blue": map-get($blue, darken-2),
+  "light-blue": map-get($blue, accent-1),
+  "cyan": map-get($cyan, base),
+  "teal": map-get($teal, darken-2),
+  "green": map-get($green, darken-2),
+  "light-green": map-get($light-green, base),
+  "lime": map-get($lime, darken-2),
+  "yellow": map-get($yellow, darken-2),
+  "amber": map-get($amber, darken-2),
+  "orange": map-get($orange, darken-2),
+  "deep-orange": map-get($deep-orange, lighten-1),
+  "brown": map-get($brown, base),
+  "grey": map-get($grey, darken-2),
+  "blue-grey": map-get($blue-grey, lighten-1),
+  "dark": map-get($grey, darken-4),
+  "light": map-get($grey, lighten-2),
+  "white": $white,
+  "black": $black
+);
+
+$ctbc: (
+  "tabs-cyan": map-get($yellow, "base"),
+  "tabs-orange": map-get($red, "darken-1"),
+  "tabs-grey": map-get($shades, "white"),
+  "tabs-pink": map-get($deep-purple, "base"),
+  "tabs-green": map-get($blue, "darken-3"),
+  "tabs-primary": map-get($shades, "white")
+);
+
+$skin-colors: (
+  "mdb",
+  "white",
+  "black",
+  "grey",
+  "light-blue",
+  "indigo",
+  "pink",
+  "cyan",
+  "navy-blue",
+  "deep-purple"
+);
+
+$dropdown-colors: (
+  "primary"  : $primary-color,
+  "danger"   : $danger-color-dark,
+  "default"  : $default-color,
+  "secondary": $secondary-color,
+  "success"  : $success-color,
+  "info"     : $info-color,
+  "warning"  : $warning-color,
+  "dark"     : map-get($material-colors, "elegant"),
+  "ins"      : map-get($social-colors, "ins")
+);
+
+$switch-colors: (
+  "bg": $secondary-color,
+  "checked-lever-bg": desaturate(lighten($secondary-color, 25%), 25%),
+  "unchecked-bg": #F1F1F1,
+  "unchecked-lever-bg": #818181,
+);
+
+@function map-create() {
+
+  $colormap: ();
+
+  @each $key, $val in $colors {
+
+    @if(map-has-key($val, darken-2)) {
+      $colormap: map-merge($colormap, ($key: map-get($val, darken-2)));
+    }
+  }
+
+  @return $colormap;
+
+}
+
+$mdb-colors: map-create();
+
+$color-palette: map-merge($mdb-colors, $material-colors);
+
+@each $name, $color in $material-colors {
+  .bg-#{$name} {
+    background-color: $color !important;
+  }
+}

html/sass/mdb/free/data/_functions.scss

@@ -0,0 +1,90 @@
+// Bootstrap functions
+//
+// Utility mixins and functions for evalutating source code across our variables, maps, and mixins.
+
+// Ascending
+// Used to evaluate Sass maps like our grid breakpoints.
+@mixin _assert-ascending($map, $map-name) {
+  $prev-key: null;
+  $prev-num: null;
+  @each $key, $num in $map {
+    @if $prev-num == null {
+      // Do nothing
+    } @else if not comparable($prev-num, $num) {
+      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+    } @else if $prev-num >= $num {
+      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+    }
+    $prev-key: $key;
+    $prev-num: $num;
+  }
+}
+
+// Starts at zero
+// Another grid mixin that ensures the min-width of the lowest breakpoint starts at 0.
+@mixin _assert-starts-at-zero($map) {
+  $values: map-values($map);
+  $first-value: nth($values, 1);
+  @if $first-value != 0 {
+    @warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}.";
+  }
+}
+
+// Replace `$search` with `$replace` in `$string`
+// Used on our SVG icon backgrounds for custom forms.
+//
+// @author Hugo Giraudel
+// @param {String} $string - Initial string
+// @param {String} $search - Substring to replace
+// @param {String} $replace ('') - New value
+// @return {String} - Updated string
+@function str-replace($string, $search, $replace: "") {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+// Color contrast
+@mixin color-yiq($color) {
+  $r: red($color);
+  $g: green($color);
+  $b: blue($color);
+
+  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
+
+  @if ($yiq >= 150) {
+    color: #111;
+  } @else {
+    color: #fff;
+  }
+}
+
+// Retreive color Sass maps
+@function color($key: "blue") {
+  @return map-get($colors, $key);
+}
+
+@function theme-color($key: "primary") {
+  @return map-get($theme-colors, $key);
+}
+
+@function grayscale($key: "100") {
+  @return map-get($grays, $key);
+}
+
+// Request a theme color level
+@function theme-color-level($color-name: "primary", $level: 0) {
+  $color: theme-color($color-name);
+  $color-base: if($level > 0, #000, #fff);
+
+  @if $level < 0 {
+    // Lighter values need a quick double negative for the Sass math to work
+    @return mix($color-base, $color, $level * -1 * $theme-color-interval);
+  } @else {
+    @return mix($color-base, $color, $level * $theme-color-interval);
+  }
+}

html/sass/mdb/free/data/_mixins.scss

@@ -0,0 +1,267 @@
+/*********************
+  Mixins
+**********************/
+
+@mixin hover {
+  @if $enable-hover-media-query {
+    // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover
+    // Currently shimmed by https://github.com/twbs/mq4-hover-shim
+    @media (hover: hover) {
+      &:hover {
+        @content
+      }
+    }
+  }
+  @else {
+    &:hover {
+      @content
+    }
+  }
+}
+
+@mixin hover-focus {
+  @if $enable-hover-media-query {
+    &:focus {
+      @content
+      }
+    @include hover {
+      @content
+      }
+  }
+  @else {
+    &:focus,
+    &:hover {
+      @content
+    }
+  }
+}
+
+@mixin plain-hover-focus {
+  @if $enable-hover-media-query {
+    &:focus {
+      @content
+    }
+    @include hover {
+      @content
+    }
+  }
+  @else {
+    &:focus,
+    &:hover {
+      @content
+    }
+  }
+}
+
+@mixin hover-focus-active {
+  @if $enable-hover-media-query {
+    &:focus,
+    &:active {
+      @content
+    }
+    @include hover {
+      @content
+    }
+  }
+  @else {
+    &:focus,
+    &:active,
+    &:hover {
+      @content
+    }
+  }
+}
+
+@mixin border-radius($args) {
+  -webkit-border-radius: $args;
+  -moz-border-radius: $args;
+  -ms-border-radius: $args;
+  -o-border-radius: $args;
+  border-radius: $args;
+}
+
+@mixin placeholder {
+  &::-webkit-input-placeholder {
+    @content
+  }
+  &:-moz-placeholder {
+    @content
+  }
+  &::-moz-placeholder {
+    @content
+  }
+  &::-ms-placeholder {
+    @content
+  }
+  &::placeholder {
+    @content
+  }
+}
+
+// New mixins
+@mixin make-button($name, $color) {
+  .btn-#{$name} {
+    @function set-notification-text-color($color) {
+      @if (lightness($color) > 80) {
+        @return $black; // Lighter backgorund, return dark color
+      } @else {
+        @return $white; // Darker background, return light color
+      }
+    }
+    background-color: $color !important;
+    color: set-notification-text-color($color) !important;
+    &:hover {
+      background-color: lighten($color, 5%);
+    }
+    &:focus,
+    &.focus {
+      @extend .z-depth-1-half;
+    }
+    &:focus,
+    &:active,
+    &.active {
+      background-color: darken($color, 13%);
+    }
+    &.dropdown-toggle {
+      background-color: $color!important;
+      &:hover,
+      &:focus {
+        background-color: lighten($color, 5%) !important;
+      }
+    }
+    &:not([disabled]):not(.disabled):active,
+    &:not([disabled]):not(.disabled).active,
+    .show > &.dropdown-toggle {
+      @extend .z-depth-1-half;
+      background-color: darken($color, 13%) !important;
+    }
+    &:not([disabled]):not(.disabled):active:focus,
+    &:not([disabled]):not(.disabled).active:focus,
+    .show > &.dropdown-toggle:focus {
+      @extend .z-depth-1-half;
+    }
+  }
+}
+
+@mixin make-outline-button($name, $color) {
+  .btn-outline-#{$name} {
+    border: 2px solid $color;
+    color: $color !important;
+    background-color: transparent;
+    &:hover,
+    &:focus,
+    &:active,
+    &:active:focus,
+    &.active {
+      background-color: transparent;
+      color: $color;
+      border-color: $color;
+    }
+    &:not([disabled]):not(.disabled):active,
+    &:not([disabled]):not(.disabled).active,
+    .show > &.dropdown-toggle {
+      @extend .z-depth-1-half;
+      background-color: transparent !important;
+      border-color: $color !important;
+    }
+    &:not([disabled]):not(.disabled):active:focus,
+    &:not([disabled]):not(.disabled).active:focus,
+    .show > &.dropdown-toggle:focus {
+      @extend .z-depth-1-half;
+    }
+  }
+}
+
+@mixin make-gradient-button($name, $value) {
+  .btn.#{$name}-gradient {
+    background: linear-gradient(40deg, map-get($value, start), map-get($value, end)) !important;
+    transition:.5s ease;
+    &:hover,
+    &:focus,
+    &:active,
+    &:active:focus
+    &.active {
+      background: linear-gradient(40deg, lighten(map-get($value, start), 5%), lighten(map-get($value, end), 5%));
+    }
+  }
+}
+
+// Button sizes
+@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
+  padding: $padding-y $padding-x;
+  font-size: $font-size;
+  line-height: $line-height;
+  @include border-radius($border-radius);
+}
+
+
+@mixin transition($transition...) {
+  @if $enable-transitions {
+    @if length($transition) == 0 {
+      transition: $transition-base;
+    } @else {
+      transition: $transition;
+    }
+  }
+}
+
+@mixin transform($args) {
+  -webkit-transform: $args;
+  -moz-transform: $args;
+  -ms-transform: $args;
+  -o-transform: $args;
+  transform: $args;
+}
+
+@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+  $min: map-get($breakpoints, $name);
+  @return if($min != 0, $min, null);
+}
+
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Flexbox
+@mixin flexbox() {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+@mixin flex($values) {
+  -webkit-box-flex: $values;
+  -moz-box-flex:  $values;
+  -webkit-flex:  $values;
+  -ms-flex:  $values;
+  flex:  $values;
+}
+@mixin order($val) {
+  -webkit-box-ordinal-group: $val;
+  -moz-box-ordinal-group: $val;
+  -ms-flex-order: $val;
+  -webkit-order: $val;
+  order: $val;
+}
+@mixin align($align) {
+  -webkit-flex-align: $align;
+  -ms-flex-align: $align;
+  -webkit-align-items: $align;
+  align-items: $align;
+}
+@mixin justify-content($val) {
+  -webkit-justify-content: $val;
+  justify-content: $val;
+}
+
+@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
+  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+}

html/sass/mdb/free/data/_prefixer.scss

@@ -0,0 +1,41 @@
+// Transforms
+
+@mixin transform($args) {
+  -webkit-transform: $args;
+  -moz-transform: $args;
+  -ms-transform: $args;
+  -o-transform: $args;
+  transform: $args;
+}
+
+@mixin transform-origin($args) {
+  -webkit-transform-origin: $args;
+  -moz-transform-origin: $args;
+  -ms-transform-origin: $args;
+  -o-transform-origin: $args;
+  transform-origin: $args;
+}
+
+// Keyframes
+@mixin keyframes($animation-name) {
+  @keyframes #{$animation-name} {
+    @content;
+  }
+}
+
+//animations
+@mixin animation($args) {
+  -webkit-animation: $args;
+  -moz-animation: $args;
+  -ms-animation: $args;
+  -o-animation: $args;
+  animation: $args;
+}
+
+@mixin animation-delay($delay) {
+  -webkit-animation-delay: $delay;
+  -moz-animation-delay: $delay;
+  -ms-animation-delay: $delay;
+  -o-animation-delay: $delay;
+  animation-delay: $delay;
+}

html/sass/mdb/free/data/_variables-b4.scss

@@ -0,0 +1,837 @@
+// Variables
+//
+// Copy settings from this file into the provided `_custom.scss` to override
+// the Bootstrap defaults without modifying key, versioned files.
+//
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
+
+// Table of Contents
+//
+// Color system
+// Options
+// Spacing
+// Body
+// Links
+// Grid breakpoints
+// Grid containers
+// Grid columns
+// Fonts
+// Components
+// Tables
+// Buttons
+// Forms
+// Dropdowns
+// Z-index master list
+// Navs
+// Navbar
+// Pagination
+// Jumbotron
+// Form states and alerts
+// Cards
+// Tooltips
+// Popovers
+// Badges
+// Modals
+// Alerts
+// Progress bars
+// List group
+// Image thumbnails
+// Figures
+// Breadcrumbs
+// Carousel
+// Close
+// Code
+
+
+//
+// Color system
+//
+
+$white:  #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #868e96 !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:  #000 !default;
+
+$grays: (
+  100: $gray-100,
+  200: $gray-200,
+  300: $gray-300,
+  400: $gray-400,
+  500: $gray-500,
+  600: $gray-600,
+  700: $gray-700,
+  800: $gray-800,
+  900: $gray-900
+) !default;
+
+$blue:    #007bff !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #dc3545 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #ffc107 !default;
+$green:   #28a745 !default;
+$teal:    #20c997 !default;
+$cyan:    #17a2b8 !default;
+
+$colors: (
+  blue: $blue,
+  indigo: $indigo,
+  purple: $purple,
+  pink: $pink,
+  red: $red,
+  orange: $orange,
+  yellow: $yellow,
+  green: $green,
+  teal: $teal,
+  cyan: $cyan,
+  white: $white,
+  gray: $gray-600,
+  gray-dark: $gray-800
+) !default;
+
+$theme-colors: (
+  primary: $blue,
+  secondary: $gray-600,
+  success: $green,
+  info: $cyan,
+  warning: $yellow,
+  danger: $red,
+  light: $gray-100,
+  dark: $gray-800
+) !default;
+
+// Set a specific jump point for requesting color jumps
+$theme-color-interval: 8% !default;
+
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+
+$enable-rounded:            true !default;
+$enable-shadows:            false !default;
+$enable-gradients:          false !default;
+$enable-transitions:        true !default;
+$enable-hover-media-query:  false !default;
+$enable-grid-classes:       true !default;
+$enable-print-styles:       true !default;
+
+
+// Spacing
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+// You can add more entries to the $spacers map, should you need more variation.
+
+$spacer: 1rem !default;
+$spacers: (
+  0: 0,
+  1: ($spacer * .25),
+  2: ($spacer * .5),
+  3: $spacer,
+  4: ($spacer * 1.5),
+  5: ($spacer * 3)
+) !default;
+
+// This variable affects the `.h-*` and `.w-*` classes.
+$sizes: (
+  25: 25%,
+  50: 50%,
+  75: 75%,
+  100: 100%
+) !default;
+
+// Body
+//
+// Settings for the `<body>` element.
+
+$body-bg:       $white !default;
+$body-color:    $gray-900 !default;
+
+// Links
+//
+// Style anchor elements.
+
+$link-color:            theme-color("primary") !default;
+$link-decoration:       none !default;
+$link-hover-color:      darken($link-color, 15%) !default;
+$link-hover-decoration: underline !default;
+
+
+// Grid breakpoints
+//
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px
+) !default;
+@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
+@include _assert-starts-at-zero($grid-breakpoints);
+
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px
+) !default;
+@include _assert-ascending($container-max-widths, "$container-max-widths");
+
+
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-columns: 12 !default;
+$grid-gutter-width: 30px !default;
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+$line-height-lg:         1.5 !default;
+$line-height-sm:         1.5 !default;
+
+$border-width: 1px !default;
+
+$border-radius:          .25rem !default;
+$border-radius-lg:       .3rem !default;
+$border-radius-sm:       .2rem !default;
+
+$component-active-color: $white !default;
+$component-active-bg:    theme-color("primary") !default;
+
+$caret-width:            .3em !default;
+
+$transition-base:        all .2s ease-in-out !default;
+$transition-fade:        opacity .15s linear !default;
+$transition-collapse:    height .35s ease !default;
+
+
+// Fonts
+//
+// Font, line-height, and color for body text, headings, and more.
+
+$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
+$font-family-monospace:  Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+$font-family-base:       $font-family-sans-serif !default;
+
+$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
+$font-size-lg:   1.25rem !default;
+$font-size-sm:   .875rem !default;
+
+$font-weight-normal: normal !default;
+$font-weight-bold: bold !default;
+
+$font-weight-base: $font-weight-normal !default;
+$line-height-base: 1.5 !default;
+
+$h1-font-size: 2.5rem !default;
+$h2-font-size: 2rem !default;
+$h3-font-size: 1.75rem !default;
+$h4-font-size: 1.5rem !default;
+$h5-font-size: 1.25rem !default;
+$h6-font-size: 1rem !default;
+
+$headings-margin-bottom: ($spacer / 2) !default;
+$headings-font-family:   inherit !default;
+$headings-font-weight:   500 !default;
+$headings-line-height:   1.1 !default;
+$headings-color:         inherit !default;
+
+$display1-size: 6rem !default;
+$display2-size: 5.5rem !default;
+$display3-size: 4.5rem !default;
+$display4-size: 3.5rem !default;
+
+$display1-weight:     300 !default;
+$display2-weight:     300 !default;
+$display3-weight:     300 !default;
+$display4-weight:     300 !default;
+$display-line-height: $headings-line-height !default;
+
+$lead-font-size:   1.25rem !default;
+$lead-font-weight: 300 !default;
+
+$small-font-size: 80% !default;
+
+$text-muted: $gray-600 !default;
+
+$blockquote-small-color:  $gray-600 !default;
+$blockquote-font-size:    ($font-size-base * 1.25) !default;
+
+$hr-border-color: rgba($black,.1) !default;
+$hr-border-width: $border-width !default;
+
+$mark-padding: .2em !default;
+
+$dt-font-weight: $font-weight-bold !default;
+
+$kbd-box-shadow:         inset 0 -.1rem 0 rgba($black,.25) !default;
+$nested-kbd-font-weight: $font-weight-bold !default;
+
+$list-inline-padding: 5px !default;
+
+$mark-bg: #fcf8e3 !default;
+
+
+// Tables
+//
+// Customizes the `.table` component with basic values, each used across all table variations.
+
+$table-cell-padding:            .75rem !default;
+$table-cell-padding-sm:         .3rem !default;
+
+$table-bg:                      transparent !default;
+$table-accent-bg:               rgba($black,.05) !default;
+$table-hover-bg:                rgba($black,.075) !default;
+$table-active-bg:               $table-hover-bg !default;
+
+$table-border-width:            $border-width !default;
+$table-border-color:            $gray-200 !default;
+
+$table-head-bg:                 $gray-200 !default;
+$table-head-color:              $gray-700 !default;
+
+$table-inverse-bg:              $gray-900 !default;
+$table-inverse-accent-bg:       rgba($white, .05) !default;
+$table-inverse-hover-bg:        rgba($white, .075) !default;
+$table-inverse-border-color:    lighten($gray-900, 7.5%) !default;
+$table-inverse-color:           $body-bg !default;
+
+
+// Buttons
+//
+// For each of Bootstrap's buttons, define text, background and border color.
+
+$input-btn-padding-y:       .5rem !default;
+$input-btn-padding-x:       .75rem !default;
+$input-btn-line-height:     1.25 !default;
+
+$input-btn-padding-y-sm:    .25rem !default;
+$input-btn-padding-x-sm:    .5rem !default;
+$input-btn-line-height-sm:  1.5 !default;
+
+$input-btn-padding-y-lg:    .5rem !default;
+$input-btn-padding-x-lg:    1rem !default;
+$input-btn-line-height-lg:  1.5 !default;
+
+$btn-font-weight:                $font-weight-normal !default;
+$btn-box-shadow:                 inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default;
+$btn-focus-box-shadow:           0 0 0 3px rgba(theme-color("primary"), .25) !default;
+$btn-active-box-shadow:          inset 0 3px 5px rgba($black,.125) !default;
+
+$btn-link-disabled-color:        $gray-600 !default;
+
+$btn-block-spacing-y:            .5rem !default;
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius:              $border-radius !default;
+$btn-border-radius-lg:           $border-radius-lg !default;
+$btn-border-radius-sm:           $border-radius-sm !default;
+
+$btn-transition:                 all .15s ease-in-out !default;
+
+
+// Forms
+
+$input-bg:                       $white !default;
+$input-disabled-bg:              $gray-200 !default;
+
+$input-color:                    $gray-700 !default;
+$input-border-color:             rgba($black,.15) !default;
+$input-btn-border-width:         $border-width !default; // For form controls and buttons
+$input-box-shadow:               inset 0 1px 1px rgba($black,.075) !default;
+
+$input-border-radius:            $border-radius !default;
+$input-border-radius-lg:         $border-radius-lg !default;
+$input-border-radius-sm:         $border-radius-sm !default;
+
+$input-focus-bg:                 $input-bg !default;
+$input-focus-border-color:       lighten(theme-color("primary"), 25%) !default;
+$input-focus-box-shadow:         $input-box-shadow, $btn-focus-box-shadow !default;
+$input-focus-color:              $input-color !default;
+
+$input-placeholder-color:        $gray-600 !default;
+
+$input-height-border:           $input-btn-border-width * 2 !default;
+
+$input-height-inner:            ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;
+$input-height:                  calc(#{$input-height-inner} + #{$input-height-border}) !default;
+
+$input-height-inner-sm:         ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default;
+$input-height-sm:               calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;
+
+$input-height-inner-lg:         ($font-size-sm * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default;
+$input-height-lg:               calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
+
+$input-transition:               border-color ease-in-out .15s, box-shadow ease-in-out .15s !default;
+
+$form-text-margin-top:     .25rem !default;
+
+$form-check-margin-bottom:  .5rem !default;
+$form-check-input-gutter:   1.25rem !default;
+$form-check-input-margin-y: .25rem !default;
+$form-check-input-margin-x: .25rem !default;
+
+$form-check-inline-margin-x: .75rem !default;
+
+$form-group-margin-bottom:       1rem !default;
+
+$input-group-addon-bg:           $gray-200 !default;
+$input-group-addon-border-color: $input-border-color !default;
+
+$custom-control-gutter:   1.5rem !default;
+$custom-control-spacer-y: .25rem !default;
+$custom-control-spacer-x: 1rem !default;
+
+$custom-control-indicator-size:       1rem !default;
+$custom-control-indicator-bg:         #ddd !default;
+$custom-control-indicator-bg-size:    50% 50% !default;
+$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black,.1) !default;
+
+$custom-control-indicator-disabled-bg:       $gray-200 !default;
+$custom-control-description-disabled-color:  $gray-600 !default;
+
+$custom-control-indicator-checked-color:      $white !default;
+$custom-control-indicator-checked-bg:         theme-color("primary") !default;
+$custom-control-indicator-checked-box-shadow: none !default;
+
+$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px theme-color("primary") !default;
+
+$custom-control-indicator-active-color:      $white !default;
+$custom-control-indicator-active-bg:         lighten(theme-color("primary"), 35%) !default;
+$custom-control-indicator-active-box-shadow: none !default;
+
+$custom-checkbox-indicator-border-radius: $border-radius !default;
+$custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default;
+
+$custom-checkbox-indicator-indeterminate-bg: theme-color("primary") !default;
+$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
+$custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default;
+$custom-checkbox-indicator-indeterminate-box-shadow: none !default;
+
+$custom-radio-indicator-border-radius: 50% !default;
+$custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default;
+
+$custom-select-padding-y:          .375rem !default;
+$custom-select-padding-x:          .75rem  !default;
+$custom-select-height:              $input-height  !default;
+$custom-select-indicator-padding:   1rem !default; // Extra padding to account for the presence of the background-image based indicator
+$custom-select-line-height:         $input-btn-line-height !default;
+$custom-select-color:               $input-color !default;
+$custom-select-disabled-color:      $gray-600 !default;
+$custom-select-bg:            $white !default;
+$custom-select-disabled-bg:   $gray-200 !default;
+$custom-select-bg-size:       8px 10px !default; // In pixels because image dimensions
+$custom-select-indicator-color: #333 !default;
+$custom-select-indicator:     str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default;
+$custom-select-border-width:  $input-btn-border-width !default;
+$custom-select-border-color:  $input-border-color !default;
+$custom-select-border-radius: $border-radius !default;
+
+$custom-select-focus-border-color: lighten(theme-color("primary"), 25%) !default;
+$custom-select-focus-box-shadow:   inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
+
+$custom-select-font-size-sm:  75% !default;
+$custom-select-height-sm: $input-height-sm !default;
+
+$custom-file-height:           2.5rem !default;
+$custom-file-width:            14rem !default;
+$custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem theme-color("primary") !default;
+
+$custom-file-padding-y:     1rem !default;
+$custom-file-padding-x:     .5rem !default;
+$custom-file-line-height:   1.5 !default;
+$custom-file-color:         $gray-700 !default;
+$custom-file-bg:            $white !default;
+$custom-file-border-width:  $border-width !default;
+$custom-file-border-color:  $input-border-color !default;
+$custom-file-border-radius: $border-radius !default;
+$custom-file-box-shadow:    inset 0 .2rem .4rem rgba($black,.05) !default;
+$custom-file-button-color:  $custom-file-color !default;
+$custom-file-button-bg:     $gray-200 !default;
+$custom-file-text: (
+  placeholder: (
+    en: "Choose file..."
+  ),
+  button-label: (
+    en: "Browse"
+  )
+) !default;
+
+
+// Form validation
+$form-feedback-valid-color:   theme-color("success") !default;
+$form-feedback-invalid-color: theme-color("danger") !default;
+
+
+// Dropdowns
+//
+// Dropdown menu container and contents.
+
+$dropdown-min-width:             10rem !default;
+$dropdown-padding-y:             .5rem !default;
+$dropdown-margin-top:            .125rem !default;
+$dropdown-bg:                    $white !default;
+$dropdown-border-color:          rgba($black,.15) !default;
+$dropdown-border-width:          $border-width !default;
+$dropdown-divider-bg:            $gray-200 !default;
+$dropdown-box-shadow:            0 .5rem 1rem rgba($black,.175) !default;
+
+$dropdown-link-color:            $gray-900 !default;
+$dropdown-link-hover-color:      darken($gray-900, 5%) !default;
+$dropdown-link-hover-bg:         $gray-100 !default;
+
+$dropdown-link-active-color:     $component-active-color !default;
+$dropdown-link-active-bg:        $component-active-bg !default;
+
+$dropdown-link-disabled-color:   $gray-600 !default;
+
+$dropdown-item-padding-y:        .25rem !default;
+$dropdown-item-padding-x:        1.5rem !default;
+
+$dropdown-header-color:          $gray-600 !default;
+
+
+// Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+
+$zindex-dropdown:           1000 !default;
+$zindex-sticky:             1020 !default;
+$zindex-fixed:              1030 !default;
+$zindex-modal-backdrop:     1040 !default;
+$zindex-modal:              1050 !default;
+$zindex-popover:            1060 !default;
+$zindex-tooltip:            1070 !default;
+
+// Navs
+
+$nav-link-padding-y:            .5rem !default;
+$nav-link-padding-x:            1rem !default;
+$nav-link-disabled-color:       $gray-600 !default;
+
+$nav-tabs-border-color:                       #ddd !default;
+$nav-tabs-border-width:                       $border-width !default;
+$nav-tabs-border-radius:                      $border-radius !default;
+$nav-tabs-link-hover-border-color:            $gray-200 !default;
+$nav-tabs-link-active-color:                  $gray-700 !default;
+$nav-tabs-link-active-bg:                     $body-bg !default;
+$nav-tabs-link-active-border-color:           #ddd !default;
+
+$nav-pills-border-radius:     $border-radius !default;
+$nav-pills-link-active-color: $component-active-color !default;
+$nav-pills-link-active-bg:    $component-active-bg !default;
+
+// Navbar
+
+$navbar-padding-y:                  ($spacer / 2) !default;
+$navbar-padding-x:                  $spacer !default;
+
+$navbar-brand-font-size:            $font-size-lg !default;
+// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
+$nav-link-height:                   $navbar-brand-font-size * $line-height-base !default;
+$navbar-brand-height:               ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
+$navbar-brand-padding-y:            ($navbar-brand-height - $nav-link-height) / 2 !default;
+
+$navbar-toggler-padding-y:           .25rem !default;
+$navbar-toggler-padding-x:           .75rem !default;
+$navbar-toggler-font-size:           $font-size-lg !default;
+$navbar-toggler-border-radius:       $btn-border-radius !default;
+
+$navbar-dark-color:                 rgba($white,.5) !default;
+$navbar-dark-hover-color:           rgba($white,.75) !default;
+$navbar-dark-active-color:          rgba($white,1) !default;
+$navbar-dark-disabled-color:        rgba($white,.25) !default;
+$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
+$navbar-dark-toggler-border-color:  rgba($white,.1) !default;
+
+$navbar-light-color:                rgba($black,.5) !default;
+$navbar-light-hover-color:          rgba($black,.7) !default;
+$navbar-light-active-color:         rgba($black,.9) !default;
+$navbar-light-disabled-color:       rgba($black,.3) !default;
+$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
+$navbar-light-toggler-border-color: rgba($black,.1) !default;
+
+// Pagination
+
+$pagination-padding-y:                .5rem !default;
+$pagination-padding-x:                .75rem !default;
+$pagination-padding-y-sm:             .25rem !default;
+$pagination-padding-x-sm:             .5rem !default;
+$pagination-padding-y-lg:             .75rem !default;
+$pagination-padding-x-lg:             1.5rem !default;
+$pagination-line-height:              1.25 !default;
+
+$pagination-color:                     $link-color !default;
+$pagination-bg:                        $white !default;
+$pagination-border-width:              $border-width !default;
+$pagination-border-color:              #ddd !default;
+
+$pagination-hover-color:               $link-hover-color !default;
+$pagination-hover-bg:                  $gray-200 !default;
+$pagination-hover-border-color:        #ddd !default;
+
+$pagination-active-color:              $white !default;
+$pagination-active-bg:                 theme-color("primary") !default;
+$pagination-active-border-color:       theme-color("primary") !default;
+
+$pagination-disabled-color:            $gray-600 !default;
+$pagination-disabled-bg:               $white !default;
+$pagination-disabled-border-color:     #ddd !default;
+
+
+// Jumbotron
+
+$jumbotron-padding:              2rem !default;
+$jumbotron-bg:                   $gray-200 !default;
+
+
+// Cards
+
+$card-spacer-y:            .75rem !default;
+$card-spacer-x:            1.25rem !default;
+$card-border-width:        1px !default;
+$card-border-radius:       $border-radius !default;
+$card-border-color:        rgba($black,.125) !default;
+$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
+$card-cap-bg:              rgba($black, .03) !default;
+$card-bg:                  $white !default;
+
+$card-img-overlay-padding: 1.25rem !default;
+
+$card-deck-margin:          ($grid-gutter-width / 2) !default;
+
+$card-columns-count:        3 !default;
+$card-columns-gap:          1.25rem !default;
+$card-columns-margin:       $card-spacer-y !default;
+
+
+// Tooltips
+
+$tooltip-max-width:           200px !default;
+$tooltip-color:               $white !default;
+$tooltip-bg:                  $black !default;
+$tooltip-opacity:             .9 !default;
+$tooltip-padding-y:           3px !default;
+$tooltip-padding-x:           8px !default;
+$tooltip-margin:              0 !default;
+
+
+$tooltip-arrow-width:         5px !default;
+$tooltip-arrow-height:        5px !default;
+$tooltip-arrow-color:         $tooltip-bg !default;
+
+
+// Popovers
+
+$popover-inner-padding:               1px !default;
+$popover-bg:                          $white !default;
+$popover-max-width:                   276px !default;
+$popover-border-width:                $border-width !default;
+$popover-border-color:                rgba($black,.2) !default;
+$popover-box-shadow:                  0 5px 10px rgba($black,.2) !default;
+
+$popover-header-bg:                    darken($popover-bg, 3%) !default;
+$popover-header-color:                 $headings-color !default;
+$popover-header-padding-y:             8px !default;
+$popover-header-padding-x:             14px !default;
+
+$popover-body-color:               $body-color !default;
+$popover-body-padding-y:           9px !default;
+$popover-body-padding-x:           14px !default;
+
+$popover-arrow-width:                 10px !default;
+$popover-arrow-height:                5px !default;
+$popover-arrow-color:                 $popover-bg !default;
+
+$popover-arrow-outer-width:           ($popover-arrow-width + 1px) !default;
+$popover-arrow-outer-color:           fade-in($popover-border-color, .05) !default;
+
+
+// Badges
+
+$badge-color:                 $white !default;
+$badge-font-size:             75% !default;
+$badge-font-weight:           $font-weight-bold !default;
+$badge-padding-y:             .25em !default;
+$badge-padding-x:             .4em !default;
+
+$badge-pill-padding-x:        .6em !default;
+// Use a higher than normal value to ensure completely rounded edges when
+// customizing padding or font-size on labels.
+$badge-pill-border-radius:    10rem !default;
+
+
+// Modals
+
+// Padding applied to the modal body
+$modal-inner-padding:         15px !default;
+
+$modal-dialog-margin:         10px !default;
+$modal-dialog-margin-y-sm-up: 30px !default;
+
+$modal-title-line-height:     $line-height-base !default;
+
+$modal-content-bg:               $white !default;
+$modal-content-border-color:     rgba($black,.2) !default;
+$modal-content-border-width:     $border-width !default;
+$modal-content-box-shadow-xs:    0 3px 9px rgba($black,.5) !default;
+$modal-content-box-shadow-sm-up: 0 5px 15px rgba($black,.5) !default;
+
+$modal-backdrop-bg:           $black !default;
+$modal-backdrop-opacity:      .5 !default;
+$modal-header-border-color:   $gray-200 !default;
+$modal-footer-border-color:   $modal-header-border-color !default;
+$modal-header-border-width:   $modal-content-border-width !default;
+$modal-footer-border-width:   $modal-header-border-width !default;
+$modal-header-padding:        15px !default;
+
+$modal-lg:                    800px !default;
+$modal-md:                    500px !default;
+$modal-sm:                    300px !default;
+
+$modal-transition:            transform .3s ease-out !default;
+
+
+// Alerts
+//
+// Define alert colors, border radius, and padding.
+
+$alert-padding-y:             .75rem !default;
+$alert-padding-x:             1.25rem !default;
+$alert-margin-bottom:         1rem !default;
+$alert-border-radius:         $border-radius !default;
+$alert-link-font-weight:      $font-weight-bold !default;
+$alert-border-width:          $border-width !default;
+
+
+// Progress bars
+
+$progress-height:               1rem !default;
+$progress-font-size:            .75rem !default;
+$progress-bg:                   $gray-200 !default;
+$progress-border-radius:        $border-radius !default;
+$progress-box-shadow:           inset 0 .1rem .1rem rgba($black,.1) !default;
+$progress-bar-color:            $white !default;
+$progress-bar-bg:               theme-color("primary") !default;
+$progress-bar-animation-timing: 1s linear infinite !default;
+$progress-bar-transition:       width .6s ease !default;
+
+// List group
+
+$list-group-bg:                  $white !default;
+$list-group-border-color:        rgba($black,.125) !default;
+$list-group-border-width:        $border-width !default;
+$list-group-border-radius:       $border-radius !default;
+
+$list-group-item-padding-y:      .75rem !default;
+$list-group-item-padding-x:      1.25rem !default;
+
+$list-group-hover-bg:                 $gray-100 !default;
+$list-group-active-color:             $component-active-color !default;
+$list-group-active-bg:                $component-active-bg !default;
+$list-group-active-border-color:      $list-group-active-bg !default;
+
+$list-group-disabled-color:      $gray-600 !default;
+$list-group-disabled-bg:         $list-group-bg !default;
+
+$list-group-action-color:             $gray-700 !default;
+$list-group-action-hover-color:       $list-group-action-color !default;
+
+$list-group-action-active-color:      $body-color !default;
+$list-group-action-active-bg:         $gray-200 !default;
+
+
+// Image thumbnails
+
+$thumbnail-padding:           .25rem !default;
+$thumbnail-bg:                $body-bg !default;
+$thumbnail-border-width:      $border-width !default;
+$thumbnail-border-color:      #ddd !default;
+$thumbnail-border-radius:     $border-radius !default;
+$thumbnail-box-shadow:        0 1px 2px rgba($black,.075) !default;
+$thumbnail-transition:        all .2s ease-in-out !default;
+
+
+// Figures
+
+$figure-caption-font-size: 90% !default;
+$figure-caption-color:     $gray-600 !default;
+
+
+// Breadcrumbs
+
+$breadcrumb-padding-y:          .75rem !default;
+$breadcrumb-padding-x:          1rem !default;
+$breadcrumb-item-padding:       .5rem !default;
+
+$breadcrumb-bg:                 $gray-200 !default;
+$breadcrumb-divider-color:      $gray-600 !default;
+$breadcrumb-active-color:       $gray-600 !default;
+$breadcrumb-divider:            "/" !default;
+
+
+// Carousel
+
+$carousel-control-color:                      $white !default;
+$carousel-control-width:                      15% !default;
+$carousel-control-opacity:                    .5 !default;
+
+$carousel-indicator-width:                    30px !default;
+$carousel-indicator-height:                   3px !default;
+$carousel-indicator-spacer:                   3px !default;
+$carousel-indicator-active-bg:                $white !default;
+
+$carousel-caption-width:                      70% !default;
+$carousel-caption-color:                      $white !default;
+
+$carousel-control-icon-width:                 20px !default;
+
+$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default;
+$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default;
+
+$carousel-transition:           transform .6s ease !default;
+
+
+// Close
+
+$close-font-size:             $font-size-base * 1.5 !default;
+$close-font-weight:           $font-weight-bold !default;
+$close-color:                 $black !default;
+$close-text-shadow:           0 1px 0 $white !default;
+
+// Code
+
+$code-font-size:              90% !default;
+$code-padding-y:              .2rem !default;
+$code-padding-x:              .4rem !default;
+$code-color:                  #bd4147 !default;
+$code-bg:                     $gray-100 !default;
+
+$kbd-color:                   $white !default;
+$kbd-bg:                      $gray-900 !default;
+
+$pre-color:                   $gray-900 !default;
+$pre-scrollable-max-height:   340px !default;

html/sass/mdb/free/data/_variables.scss

@@ -0,0 +1,211 @@
+// Fonts Path
+$roboto-font-path: "../font/roboto/" !default;
+
+// Full Palette
+$enable_full_palette: true;
+
+// $btn-floating-icon-margin: 5px;
+
+//Tabs
+$tabs-padding: 0.7rem;
+$tabs-margin-x: 1rem;
+$tabs-margin-y: -20px;
+$pills-padding: 0.6rem;
+
+// Spacers
+$spacer:                     1rem !default;
+$spacer-x:                   $spacer !default;
+$spacer-y:                   $spacer !default;
+$spacers: (
+  0: 0,
+  1: ($spacer * .25),
+  2: ($spacer * .5),
+  3: $spacer,
+  4: ($spacer * 1.5),
+  5: ($spacer * 3),
+  6: ($spacer * 5)
+) !default;
+
+
+// Extreme Padding
+$extreme-padding: (
+  "xs": 0,
+  "sm": 5%,
+  "md": 10%,
+  "lg": 15%,
+  "xl": 20%
+);
+
+// Navbar
+$font-weight: 300;
+
+$navbar-light-toggler-icon: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !default;
+$navbar-light-bg-active-color: rgba($black, .1) !default;
+$navbar-light-hover-color: rgba($black, .75);
+
+$navbar-dark-toggler-icon: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !default;
+$navbar-dark-bg-active-color: rgba($white, .1) !default;
+$navbar-dark-hover-color: rgba($white, .75);
+
+$navbar-scrolling-padding: 12px;
+$navbar-top-collapse-padding: 5px;
+$navbar-flex-icons-padding-md: 6px;
+$navbar-flex-icons-padding-lg: 3px;
+$navbar-form-input-mr: 5px;
+$navbar-form-input-mb: 1px;
+$navbar-form-input-ml: 8px;
+$navbar-form-input-height: 1rem;
+$navbar-dropdown-font-size: 0.9375rem;
+$navbar-dropdown-menu-padding: 10px;
+$navbar-padding-dropdown: 1rem;
+$navbar-avatar-height: 35px;
+$navbar-double-small-padding: 4px;
+$navbar-double-font-size: 15px;
+$navbar-breadcrumb-dn-padding: 1rem;
+// $navbar-button-collapse-top: 1px;
+$navbar-button-collapse-left: 10px;
+$navbar-button-collapse-font-size: 1.5rem;
+$navbar-button-collapse-fs-sm: 1.4rem;
+$navbar-button-collapse-mx: 10px;
+// $navbar-button-collapse-mt: 1px;
+
+//Dropdown
+$dropdown-menu-padding: 0.5rem;
+$dropdown-item-padding: 1rem;
+
+// Badges
+$badge-pill-padding-x: 0.6rem !default;
+$badge-pill-border-radius: 10rem !default;
+
+// Progress
+$progress-bar-height: 4px;
+$progress-bar-wider-height: 20px;
+$progress-bar-narrower-height: 1px;
+$progress-bar-margin-y: 1rem;
+$progress-bar-bg-color: map-get($grey, lighten-3);
+
+// Forms
+// Text Inputs + Textarea
+$input-border-color: map-get($grey, "lighten-1");
+$input-focus-color: $primary-color;
+$input-font-size: 1rem;
+$form-control-margin: 0.5rem;
+$form-control-border-color: $primary-color;
+// TODO
+$input-disabled-color: rgba(0,0,0, .46) !default;
+$input-disabled-solid-color: $primary-color !default;
+
+// Radio Buttons
+$radio-fill-color: $primary-color !default;
+$radio-empty-color: #5a5a5a !default; 
+
+// Dropdown
+$dropdown-bg-color: #fff !default;
+$dropdown-hover-bg-color: #eee !default;
+$dropdown-color: $primary-color !default;
+$dropdown-item-height: 40px !default;
+
+// Inputs
+$input-bg-color: #fff !default;
+$input-error-color: $error-color !default;
+$input-success-color: $success-color !default;
+$input-focus-color: $primary-color !default;
+$label-font-size: .8rem !default;
+$input-disabled-color: rgba(0,0,0, .46) !default;
+// $input-disabled-solid-color: $primary-color !default; //trochę dziwny kolor był tutaj wpisany dlatego zamieniłem
+$input-disabled-solid-color: #BDBDBD;
+
+// Table
+$product-table-img-max-height: 150px;
+$product-table-img-min-width: 50px;
+$table-inverse-color-border: $white !default;
+
+// Footer
+$footer-margin-top: 20px;
+$footer-padding-top: 20px;
+$footer-copyright-height: 50px;
+$footer-copyright-line-height: 50px;
+$footer-call-to-action-pt: 1.3rem;
+$footer-call-to-action-pb: 0.5rem;
+$footer-call-to-action-pr: 10px;
+$footer-insta-photos-max-width: 100px;
+$footer-insta-photos-margin: 4px;
+
+// Images Path
+$image-path: '../img/';
+
+// Reponsive Headings
+$responsive-headings: (
+  "xs": (
+    "h1": 150%,
+    "h2": 145%,
+    "h3": 135%,
+    "h4": 135%,
+    "h5": 135%
+  ),
+  "sm": (
+    "h1": 170%,
+    "h2": 140%,
+    "h3": 125%,
+    "h4": 125%,
+    "h5": 125%
+  ),
+  "md": (
+    "h1": 200%,
+    "h2": 170%,
+    "h3": 140%,
+    "h4": 125%,
+    "h5": 125%
+  ),
+  "lg": (
+    "h1": 200%,
+    "h2": 170%,
+    "h3": 140%,
+    "h4": 125%,
+    "h5": 125%
+  ),
+  "xl": (
+    "h1": 250%,
+    "h2": 200%,
+    "h3": 170%,
+    "h4": 140%,
+    "h5": 125%
+  ),
+);
+
+/*** Global ***/
+// Media Query Ranges
+$small-screen-up: 601px !default;
+$medium-screen-up: 993px !default;
+$large-screen-up: 1201px !default;
+$small-screen: 600px !default;
+$medium-screen: 992px !default;
+$large-screen: 1200px !default;
+$sidenav-breakpoint: 1440px !default;
+
+$medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default;
+$large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default;
+$small-and-down: "only screen and (max-width : #{$small-screen})" !default;
+$medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;
+$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default;
+$hide-sidenav: "only screen and (max-width : #{$sidenav-breakpoint})" !default;
+
+// Link color
+$link-color: #0275d8;
+
+$navbar-option: (
+  "light": (
+    "navbar-toggler-icon": $navbar-light-toggler-icon,
+    "navbar-option-color": $black,
+    "navbar-link-hover-color": $navbar-light-hover-color,
+    "navbar-active-link-bg-color": $navbar-light-bg-active-color,
+    "navbar-placeholder-color": $black !important
+  ),
+  "dark": (
+    "navbar-toggler-icon": $navbar-dark-toggler-icon,
+    "navbar-option-color": $white,
+    "navbar-link-hover-color": $navbar-dark-hover-color,
+    "navbar-active-link-bg-color": $navbar-dark-bg-active-color,
+    "navbar-placeholder-color": $white !important
+  )
+);