From f82763fa40f629b5f9cf441cc015bfca1d03ddf3 Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Wed, 21 Feb 2018 18:55:20 +0100
Subject: [PATCH] buttons docs

---
 _config.yml                             |   51 +-
 _data/menu.yml                          |   17 +-
 _docs/buttons.md                        |  121 ++-
 _plugins/jekyll-example.rb              |    2 +-
 assets/css/dashboard.css                | 1185 +++++++++++++++++++++--
 assets/plugins/iconfonts/plugin.css     |    5 +
 assets/plugins/iconfonts/plugin.min.css |    5 +
 assets/scss/_variables.scss             |    4 +-
 assets/scss/dashboard/_button.scss      |   31 +
 9 files changed, 1342 insertions(+), 79 deletions(-)

diff --git a/_config.yml b/_config.yml
index a372a3cab..dfab59a65 100644
--- a/_config.yml
+++ b/_config.yml
@@ -20,7 +20,7 @@ author:
 plugins:
   - jekyll-tidy
   - jekyll-contentblocks
-  #- jekyll-toc
+  - jekyll-toc
 
 exclude:
   - regenerate-images.sh
@@ -88,6 +88,55 @@ theme-colors:
   light: '#f8f9fa'
   dark: '#343a40'
 
+button-types:
+  primary: 'Primary'
+  secondary: 'Secondary'
+  success: 'Success'
+  info: 'Info'
+  warning: 'Warning'
+  danger: 'Danger'
+
+social-buttons:
+  facebook:
+    icon: fa fa-facebook
+    title: Facebook
+  twitter:
+    icon: fa fa-twitter
+    title: Twitter
+  google:
+    icon: fa fa-google
+    title: Google
+  youtube:
+    icon: fa fa-youtube
+    title: Youtube
+  vimeo:
+    icon: fa fa-vimeo
+    title: Vimeo
+  dribbble:
+    icon: fa fa-dribbble
+    title: Dribble
+  github:
+    icon: fa fa-github
+    title: Github
+  instagram:
+    icon: fa fa-instagram
+    title: Instagram
+  pinterest:
+    icon: fa fa-pinterest
+    title: Pinterest
+  vk:
+    icon: fa fa-vk
+    title: VKontakte
+  rss:
+    icon: fa fa-rss
+    title: RSS
+  flickr:
+    icon: fa fa-flickr
+    title: Flickr
+  bitbucket:
+    icon: fa fa-bitbucket
+    title: Bitbucket
+
 google-maps-key: AIzaSyBEJy4UvF-JfcNciWlvlznyDlUckcspiD4
 google-maps-url: https://maps.googleapis.com/maps/api/js?key=AIzaSyCOJwXN0eoyeFZ3cYtGzPLFw8zGhQ750Xk
 
diff --git a/_data/menu.yml b/_data/menu.yml
index ebc13d5b2..73ce68fa2 100644
--- a/_data/menu.yml
+++ b/_data/menu.yml
@@ -41,6 +41,11 @@ components:
       icon: fe fe-shopping-cart
       url: blog.html
 
+forms:
+  name: Forms
+  icon: fe fe-check-square
+  url: form-elements.html
+
 profile:
   name: Profile
   icon: fe fe-user
@@ -51,12 +56,8 @@ gallery:
   icon: fe fe-image
   url: gallery.html
 
-forms:
-  name: Forms
-  icon: fe fe-check-square
-  url: form-elements.html
 
-#docs:
-#  name: Docs
-#  icon: fe fe-file
-#  url: docs/index.html
\ No newline at end of file
+docs:
+  name: Docs
+  icon: fe fe-file-text
+  url: docs/index.html
\ No newline at end of file
diff --git a/_docs/buttons.md b/_docs/buttons.md
index 506ceff1a..7282fa2dc 100644
--- a/_docs/buttons.md
+++ b/_docs/buttons.md
@@ -2,15 +2,120 @@
 title: Buttons
 ---
 
-### Pill buttons
+Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.
 
-Add `.btn-pill` to any button to make them more rounded.
+### Button tag
+
+The `.btn` classes are designed to be used with the `<button>` element. However, you can also use these classes on `<a>` or `<input>` elements (though some browsers may apply a slightly different rendering).
 
 {% example html %}
-<a href="#" class="btn btn-pill btn-primary">Primary</a>
-<a href="#" class="btn btn-pill btn-secondary">Secondary</a>
-<a href="#" class="btn btn-pill btn-success">Success</a>
-<a href="#" class="btn btn-pill btn-info">Info</a>
-<a href="#" class="btn btn-pill btn-warning">Warning</a>
-<a href="#" class="btn btn-pill btn-danger">Danger</a>
+<a href="#" class="btn btn-primary" role="button">Link</a>
+<button class="btn btn-primary">Button</button>
+<input type="button" class="btn btn-primary" value="Input" />
+<input type="submit" class="btn btn-primary" value="Submit" />
+<input type="reset" class="btn btn-primary" value="Reset" />
 {% endexample %}
+
+### Button variations
+
+{% example html %}
+{% for button in site.button-types %}
+<a href="#" class="btn btn-{{ button[0] }}">{{ button[1] }}</a>
+{% endfor %}
+<a href="#" class="btn btn-link">Link</a>
+{% endexample %}
+
+
+### Color variations
+
+{% example html %}
+{% for button in site.colors %}
+<a href="#" class="btn btn-{{ button[0] }}">{{ button[0] }}</a>
+{% endfor %}
+{% endexample %}
+
+### Square buttons
+
+Add `.btn-square` to button to remove border-radius.
+
+{% example html %}
+{% for button in site.button-types %}
+<a href="#" class="btn btn-square btn-{{ button[0] }}">{{ button[1] }}</a>
+{% endfor %}
+{% endexample %}
+
+### Pill buttons
+
+Add `.btn-pill` class to any button to make them more rounded.
+
+{% example html %}
+{% for button in site.button-types %}
+<a href="#" class="btn btn-pill btn-{{ button[0] }}">{{ button[1] }}</a>
+{% endfor %}
+{% endexample %}
+
+### Outline buttons
+
+In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button.
+
+{% example html %}
+{% for button in site.button-types %}
+<a href="#" class="btn btn-outline-{{ button[0] }}">{{ button[1] }}</a>
+{% endfor %}
+{% endexample %}
+
+### Button size
+
+Add `.btn-lg` or `.btn-sm` for additional sizes.
+
+{% example html %}
+<button type="button" class="btn btn-primary btn-lg">Large button</button>
+<button type="button" class="btn btn-secondary btn-lg">Large button</button>
+{% endexample %}
+
+{% example html %}
+<button type="button" class="btn btn-primary btn-sm">Small button</button>
+<button type="button" class="btn btn-secondary btn-sm">Small button</button>
+{% endexample %}
+
+Create block level buttons—those that span the full width of a parent—by adding `.btn-block`.
+
+{% example html %}
+<button type="button" class="btn btn-primary btn-block">Block level button</button>
+<button type="button" class="btn btn-secondary btn-block">Block level button</button>
+{% endexample %}
+
+### Button with icon
+
+Basic buttons are traditional buttons with borders and background with an extra commponent like an icon. You can place it either on the left or the right which ever you want with different color opitons.
+
+{% example html wrapper=btn-list %}
+<button type="button" class="btn btn-dark"><i class="fe fe-upload mr-2"></i>Upload</button>
+<button type="button" class="btn btn-warning"><i class="fe fe-heart mr-2"></i>I like</button>
+<button type="button" class="btn btn-success"><i class="fe fe-check mr-2"></i>I agree</button>
+<button type="button" class="btn btn-outline-primary"><i class="fe fe-plus mr-2"></i>More</button>
+<button type="button" class="btn btn-danger"><i class="fe fe-link mr-2"></i>Link</button>
+<button type="button" class="btn btn-info"><i class="fe fe-message-circle mr-2"></i>Comment</button>
+{% endexample %}
+
+### Social buttons
+
+{% example html wrapper=btn-list %} 
+{% for button in site.social-buttons %}
+<button type="button" class="btn btn-{{ button[0] }}"><i class="{{ button[1].icon }} mr-2"></i>{{ button[1].title }}</button>
+{% endfor %}
+{% endexample %}
+
+### Icon buttons
+
+Icon only button. Add `.btn-icon` class to remove unnecessary padding from button.
+
+{% example html wrapper=btn-list %} 
+<button type="button" class="btn btn-icon btn-primary"><i class="fe fe-activity"></i></button>
+<button type="button" class="btn btn-icon btn-primary btn-github"><i class="fe fe-github"></i></button>
+<button type="button" class="btn btn-icon btn-primary btn-success"><i class="fe fe-bell"></i></button>
+<button type="button" class="btn btn-icon btn-primary btn-warning"><i class="fe fe-star"></i></button>
+<button type="button" class="btn btn-icon btn-primary btn-danger"><i class="fe fe-trash"></i></button>
+<button type="button" class="btn btn-icon btn-primary btn-purple"><i class="fe fe-bar-chart"></i></button>
+<button type="button" class="btn btn-icon btn-primary btn-secondary"><i class="fe fe-git-merge"></i></button>
+{% endexample %}
\ No newline at end of file
diff --git a/_plugins/jekyll-example.rb b/_plugins/jekyll-example.rb
index 5467b57c0..5868ab7d8 100644
--- a/_plugins/jekyll-example.rb
+++ b/_plugins/jekyll-example.rb
@@ -55,7 +55,7 @@ eos
       end
 
       def example(output)
-        "<div class=\"example" + (@options[:columns] ? " example-bg" : "") + "\"" + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : "") + ">\n" + (@options[:columns] ? "<div class=\"example-column example-column-" + @options[:columns] + "\">\n" : "") + "#{output}" + (@options[:columns] ? "</div>\n" : "") + "\n</div>"
+        "<div class=\"example" + (@options[:columns] ? " example-bg" : "") + "\"" + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : "") + ">\n" + (@options[:columns] ? "<div class=\"example-column example-column-" + @options[:columns] + "\">\n" : "") + (@options[:wrapper] ? "<div class=\"" + @options[:wrapper] + "\">\n" : "") + "#{output}" + (@options[:wrapper] ? "\n</div>" : "") + (@options[:columns] ? "\n</div>" : "") + "\n</div>"
       end
 
       def remove_example_classes(code)
diff --git a/assets/css/dashboard.css b/assets/css/dashboard.css
index 03be1dcd4..837336e70 100644
--- a/assets/css/dashboard.css
+++ b/assets/css/dashboard.css
@@ -27,7 +27,7 @@ Dashboard UI
   --primary: #467fcf;
   --secondary: #868e96;
   --success: #5eba00;
-  --info: #7bd235;
+  --info: #45aaf2;
   --warning: #f1c40f;
   --danger: #cd201f;
   --light: #f8f9fa;
@@ -600,6 +600,7 @@ pre code {
 }
 
 .row {
+  display: -webkit-box;
   display: flex;
   flex-wrap: wrap;
   margin-right: -0.75rem;
@@ -632,133 +633,162 @@ pre code {
 
 .col {
   flex-basis: 0;
+  -webkit-box-flex: 1;
   flex-grow: 1;
   max-width: 100%;
 }
 
 .col-auto {
+  -webkit-box-flex: 0;
   flex: 0 0 auto;
   width: auto;
   max-width: none;
 }
 
 .col-1 {
+  -webkit-box-flex: 0;
   flex: 0 0 8.33333333%;
   max-width: 8.33333333%;
 }
 
 .col-2 {
+  -webkit-box-flex: 0;
   flex: 0 0 16.66666667%;
   max-width: 16.66666667%;
 }
 
 .col-3 {
+  -webkit-box-flex: 0;
   flex: 0 0 25%;
   max-width: 25%;
 }
 
 .col-4 {
+  -webkit-box-flex: 0;
   flex: 0 0 33.33333333%;
   max-width: 33.33333333%;
 }
 
 .col-5 {
+  -webkit-box-flex: 0;
   flex: 0 0 41.66666667%;
   max-width: 41.66666667%;
 }
 
 .col-6 {
+  -webkit-box-flex: 0;
   flex: 0 0 50%;
   max-width: 50%;
 }
 
 .col-7 {
+  -webkit-box-flex: 0;
   flex: 0 0 58.33333333%;
   max-width: 58.33333333%;
 }
 
 .col-8 {
+  -webkit-box-flex: 0;
   flex: 0 0 66.66666667%;
   max-width: 66.66666667%;
 }
 
 .col-9 {
+  -webkit-box-flex: 0;
   flex: 0 0 75%;
   max-width: 75%;
 }
 
 .col-10 {
+  -webkit-box-flex: 0;
   flex: 0 0 83.33333333%;
   max-width: 83.33333333%;
 }
 
 .col-11 {
+  -webkit-box-flex: 0;
   flex: 0 0 91.66666667%;
   max-width: 91.66666667%;
 }
 
 .col-12 {
+  -webkit-box-flex: 0;
   flex: 0 0 100%;
   max-width: 100%;
 }
 
 .order-first {
+  -webkit-box-ordinal-group: 0;
   order: -1;
 }
 
 .order-last {
+  -webkit-box-ordinal-group: 14;
   order: 13;
 }
 
 .order-0 {
+  -webkit-box-ordinal-group: 1;
   order: 0;
 }
 
 .order-1 {
+  -webkit-box-ordinal-group: 2;
   order: 1;
 }
 
 .order-2 {
+  -webkit-box-ordinal-group: 3;
   order: 2;
 }
 
 .order-3 {
+  -webkit-box-ordinal-group: 4;
   order: 3;
 }
 
 .order-4 {
+  -webkit-box-ordinal-group: 5;
   order: 4;
 }
 
 .order-5 {
+  -webkit-box-ordinal-group: 6;
   order: 5;
 }
 
 .order-6 {
+  -webkit-box-ordinal-group: 7;
   order: 6;
 }
 
 .order-7 {
+  -webkit-box-ordinal-group: 8;
   order: 7;
 }
 
 .order-8 {
+  -webkit-box-ordinal-group: 9;
   order: 8;
 }
 
 .order-9 {
+  -webkit-box-ordinal-group: 10;
   order: 9;
 }
 
 .order-10 {
+  -webkit-box-ordinal-group: 11;
   order: 10;
 }
 
 .order-11 {
+  -webkit-box-ordinal-group: 12;
   order: 11;
 }
 
 .order-12 {
+  -webkit-box-ordinal-group: 13;
   order: 12;
 }
 
@@ -809,105 +839,134 @@ pre code {
 @media (min-width: 576px) {
   .col-sm {
     flex-basis: 0;
+    -webkit-box-flex: 1;
     flex-grow: 1;
     max-width: 100%;
   }
   .col-sm-auto {
+    -webkit-box-flex: 0;
     flex: 0 0 auto;
     width: auto;
     max-width: none;
   }
   .col-sm-1 {
+    -webkit-box-flex: 0;
     flex: 0 0 8.33333333%;
     max-width: 8.33333333%;
   }
   .col-sm-2 {
+    -webkit-box-flex: 0;
     flex: 0 0 16.66666667%;
     max-width: 16.66666667%;
   }
   .col-sm-3 {
+    -webkit-box-flex: 0;
     flex: 0 0 25%;
     max-width: 25%;
   }
   .col-sm-4 {
+    -webkit-box-flex: 0;
     flex: 0 0 33.33333333%;
     max-width: 33.33333333%;
   }
   .col-sm-5 {
+    -webkit-box-flex: 0;
     flex: 0 0 41.66666667%;
     max-width: 41.66666667%;
   }
   .col-sm-6 {
+    -webkit-box-flex: 0;
     flex: 0 0 50%;
     max-width: 50%;
   }
   .col-sm-7 {
+    -webkit-box-flex: 0;
     flex: 0 0 58.33333333%;
     max-width: 58.33333333%;
   }
   .col-sm-8 {
+    -webkit-box-flex: 0;
     flex: 0 0 66.66666667%;
     max-width: 66.66666667%;
   }
   .col-sm-9 {
+    -webkit-box-flex: 0;
     flex: 0 0 75%;
     max-width: 75%;
   }
   .col-sm-10 {
+    -webkit-box-flex: 0;
     flex: 0 0 83.33333333%;
     max-width: 83.33333333%;
   }
   .col-sm-11 {
+    -webkit-box-flex: 0;
     flex: 0 0 91.66666667%;
     max-width: 91.66666667%;
   }
   .col-sm-12 {
+    -webkit-box-flex: 0;
     flex: 0 0 100%;
     max-width: 100%;
   }
   .order-sm-first {
+    -webkit-box-ordinal-group: 0;
     order: -1;
   }
   .order-sm-last {
+    -webkit-box-ordinal-group: 14;
     order: 13;
   }
   .order-sm-0 {
+    -webkit-box-ordinal-group: 1;
     order: 0;
   }
   .order-sm-1 {
+    -webkit-box-ordinal-group: 2;
     order: 1;
   }
   .order-sm-2 {
+    -webkit-box-ordinal-group: 3;
     order: 2;
   }
   .order-sm-3 {
+    -webkit-box-ordinal-group: 4;
     order: 3;
   }
   .order-sm-4 {
+    -webkit-box-ordinal-group: 5;
     order: 4;
   }
   .order-sm-5 {
+    -webkit-box-ordinal-group: 6;
     order: 5;
   }
   .order-sm-6 {
+    -webkit-box-ordinal-group: 7;
     order: 6;
   }
   .order-sm-7 {
+    -webkit-box-ordinal-group: 8;
     order: 7;
   }
   .order-sm-8 {
+    -webkit-box-ordinal-group: 9;
     order: 8;
   }
   .order-sm-9 {
+    -webkit-box-ordinal-group: 10;
     order: 9;
   }
   .order-sm-10 {
+    -webkit-box-ordinal-group: 11;
     order: 10;
   }
   .order-sm-11 {
+    -webkit-box-ordinal-group: 12;
     order: 11;
   }
   .order-sm-12 {
+    -webkit-box-ordinal-group: 13;
     order: 12;
   }
   .offset-sm-0 {
@@ -951,105 +1010,134 @@ pre code {
 @media (min-width: 768px) {
   .col-md {
     flex-basis: 0;
+    -webkit-box-flex: 1;
     flex-grow: 1;
     max-width: 100%;
   }
   .col-md-auto {
+    -webkit-box-flex: 0;
     flex: 0 0 auto;
     width: auto;
     max-width: none;
   }
   .col-md-1 {
+    -webkit-box-flex: 0;
     flex: 0 0 8.33333333%;
     max-width: 8.33333333%;
   }
   .col-md-2 {
+    -webkit-box-flex: 0;
     flex: 0 0 16.66666667%;
     max-width: 16.66666667%;
   }
   .col-md-3 {
+    -webkit-box-flex: 0;
     flex: 0 0 25%;
     max-width: 25%;
   }
   .col-md-4 {
+    -webkit-box-flex: 0;
     flex: 0 0 33.33333333%;
     max-width: 33.33333333%;
   }
   .col-md-5 {
+    -webkit-box-flex: 0;
     flex: 0 0 41.66666667%;
     max-width: 41.66666667%;
   }
   .col-md-6 {
+    -webkit-box-flex: 0;
     flex: 0 0 50%;
     max-width: 50%;
   }
   .col-md-7 {
+    -webkit-box-flex: 0;
     flex: 0 0 58.33333333%;
     max-width: 58.33333333%;
   }
   .col-md-8 {
+    -webkit-box-flex: 0;
     flex: 0 0 66.66666667%;
     max-width: 66.66666667%;
   }
   .col-md-9 {
+    -webkit-box-flex: 0;
     flex: 0 0 75%;
     max-width: 75%;
   }
   .col-md-10 {
+    -webkit-box-flex: 0;
     flex: 0 0 83.33333333%;
     max-width: 83.33333333%;
   }
   .col-md-11 {
+    -webkit-box-flex: 0;
     flex: 0 0 91.66666667%;
     max-width: 91.66666667%;
   }
   .col-md-12 {
+    -webkit-box-flex: 0;
     flex: 0 0 100%;
     max-width: 100%;
   }
   .order-md-first {
+    -webkit-box-ordinal-group: 0;
     order: -1;
   }
   .order-md-last {
+    -webkit-box-ordinal-group: 14;
     order: 13;
   }
   .order-md-0 {
+    -webkit-box-ordinal-group: 1;
     order: 0;
   }
   .order-md-1 {
+    -webkit-box-ordinal-group: 2;
     order: 1;
   }
   .order-md-2 {
+    -webkit-box-ordinal-group: 3;
     order: 2;
   }
   .order-md-3 {
+    -webkit-box-ordinal-group: 4;
     order: 3;
   }
   .order-md-4 {
+    -webkit-box-ordinal-group: 5;
     order: 4;
   }
   .order-md-5 {
+    -webkit-box-ordinal-group: 6;
     order: 5;
   }
   .order-md-6 {
+    -webkit-box-ordinal-group: 7;
     order: 6;
   }
   .order-md-7 {
+    -webkit-box-ordinal-group: 8;
     order: 7;
   }
   .order-md-8 {
+    -webkit-box-ordinal-group: 9;
     order: 8;
   }
   .order-md-9 {
+    -webkit-box-ordinal-group: 10;
     order: 9;
   }
   .order-md-10 {
+    -webkit-box-ordinal-group: 11;
     order: 10;
   }
   .order-md-11 {
+    -webkit-box-ordinal-group: 12;
     order: 11;
   }
   .order-md-12 {
+    -webkit-box-ordinal-group: 13;
     order: 12;
   }
   .offset-md-0 {
@@ -1093,105 +1181,134 @@ pre code {
 @media (min-width: 992px) {
   .col-lg {
     flex-basis: 0;
+    -webkit-box-flex: 1;
     flex-grow: 1;
     max-width: 100%;
   }
   .col-lg-auto {
+    -webkit-box-flex: 0;
     flex: 0 0 auto;
     width: auto;
     max-width: none;
   }
   .col-lg-1 {
+    -webkit-box-flex: 0;
     flex: 0 0 8.33333333%;
     max-width: 8.33333333%;
   }
   .col-lg-2 {
+    -webkit-box-flex: 0;
     flex: 0 0 16.66666667%;
     max-width: 16.66666667%;
   }
   .col-lg-3 {
+    -webkit-box-flex: 0;
     flex: 0 0 25%;
     max-width: 25%;
   }
   .col-lg-4 {
+    -webkit-box-flex: 0;
     flex: 0 0 33.33333333%;
     max-width: 33.33333333%;
   }
   .col-lg-5 {
+    -webkit-box-flex: 0;
     flex: 0 0 41.66666667%;
     max-width: 41.66666667%;
   }
   .col-lg-6 {
+    -webkit-box-flex: 0;
     flex: 0 0 50%;
     max-width: 50%;
   }
   .col-lg-7 {
+    -webkit-box-flex: 0;
     flex: 0 0 58.33333333%;
     max-width: 58.33333333%;
   }
   .col-lg-8 {
+    -webkit-box-flex: 0;
     flex: 0 0 66.66666667%;
     max-width: 66.66666667%;
   }
   .col-lg-9 {
+    -webkit-box-flex: 0;
     flex: 0 0 75%;
     max-width: 75%;
   }
   .col-lg-10 {
+    -webkit-box-flex: 0;
     flex: 0 0 83.33333333%;
     max-width: 83.33333333%;
   }
   .col-lg-11 {
+    -webkit-box-flex: 0;
     flex: 0 0 91.66666667%;
     max-width: 91.66666667%;
   }
   .col-lg-12 {
+    -webkit-box-flex: 0;
     flex: 0 0 100%;
     max-width: 100%;
   }
   .order-lg-first {
+    -webkit-box-ordinal-group: 0;
     order: -1;
   }
   .order-lg-last {
+    -webkit-box-ordinal-group: 14;
     order: 13;
   }
   .order-lg-0 {
+    -webkit-box-ordinal-group: 1;
     order: 0;
   }
   .order-lg-1 {
+    -webkit-box-ordinal-group: 2;
     order: 1;
   }
   .order-lg-2 {
+    -webkit-box-ordinal-group: 3;
     order: 2;
   }
   .order-lg-3 {
+    -webkit-box-ordinal-group: 4;
     order: 3;
   }
   .order-lg-4 {
+    -webkit-box-ordinal-group: 5;
     order: 4;
   }
   .order-lg-5 {
+    -webkit-box-ordinal-group: 6;
     order: 5;
   }
   .order-lg-6 {
+    -webkit-box-ordinal-group: 7;
     order: 6;
   }
   .order-lg-7 {
+    -webkit-box-ordinal-group: 8;
     order: 7;
   }
   .order-lg-8 {
+    -webkit-box-ordinal-group: 9;
     order: 8;
   }
   .order-lg-9 {
+    -webkit-box-ordinal-group: 10;
     order: 9;
   }
   .order-lg-10 {
+    -webkit-box-ordinal-group: 11;
     order: 10;
   }
   .order-lg-11 {
+    -webkit-box-ordinal-group: 12;
     order: 11;
   }
   .order-lg-12 {
+    -webkit-box-ordinal-group: 13;
     order: 12;
   }
   .offset-lg-0 {
@@ -1235,105 +1352,134 @@ pre code {
 @media (min-width: 1280px) {
   .col-xl {
     flex-basis: 0;
+    -webkit-box-flex: 1;
     flex-grow: 1;
     max-width: 100%;
   }
   .col-xl-auto {
+    -webkit-box-flex: 0;
     flex: 0 0 auto;
     width: auto;
     max-width: none;
   }
   .col-xl-1 {
+    -webkit-box-flex: 0;
     flex: 0 0 8.33333333%;
     max-width: 8.33333333%;
   }
   .col-xl-2 {
+    -webkit-box-flex: 0;
     flex: 0 0 16.66666667%;
     max-width: 16.66666667%;
   }
   .col-xl-3 {
+    -webkit-box-flex: 0;
     flex: 0 0 25%;
     max-width: 25%;
   }
   .col-xl-4 {
+    -webkit-box-flex: 0;
     flex: 0 0 33.33333333%;
     max-width: 33.33333333%;
   }
   .col-xl-5 {
+    -webkit-box-flex: 0;
     flex: 0 0 41.66666667%;
     max-width: 41.66666667%;
   }
   .col-xl-6 {
+    -webkit-box-flex: 0;
     flex: 0 0 50%;
     max-width: 50%;
   }
   .col-xl-7 {
+    -webkit-box-flex: 0;
     flex: 0 0 58.33333333%;
     max-width: 58.33333333%;
   }
   .col-xl-8 {
+    -webkit-box-flex: 0;
     flex: 0 0 66.66666667%;
     max-width: 66.66666667%;
   }
   .col-xl-9 {
+    -webkit-box-flex: 0;
     flex: 0 0 75%;
     max-width: 75%;
   }
   .col-xl-10 {
+    -webkit-box-flex: 0;
     flex: 0 0 83.33333333%;
     max-width: 83.33333333%;
   }
   .col-xl-11 {
+    -webkit-box-flex: 0;
     flex: 0 0 91.66666667%;
     max-width: 91.66666667%;
   }
   .col-xl-12 {
+    -webkit-box-flex: 0;
     flex: 0 0 100%;
     max-width: 100%;
   }
   .order-xl-first {
+    -webkit-box-ordinal-group: 0;
     order: -1;
   }
   .order-xl-last {
+    -webkit-box-ordinal-group: 14;
     order: 13;
   }
   .order-xl-0 {
+    -webkit-box-ordinal-group: 1;
     order: 0;
   }
   .order-xl-1 {
+    -webkit-box-ordinal-group: 2;
     order: 1;
   }
   .order-xl-2 {
+    -webkit-box-ordinal-group: 3;
     order: 2;
   }
   .order-xl-3 {
+    -webkit-box-ordinal-group: 4;
     order: 3;
   }
   .order-xl-4 {
+    -webkit-box-ordinal-group: 5;
     order: 4;
   }
   .order-xl-5 {
+    -webkit-box-ordinal-group: 6;
     order: 5;
   }
   .order-xl-6 {
+    -webkit-box-ordinal-group: 7;
     order: 6;
   }
   .order-xl-7 {
+    -webkit-box-ordinal-group: 8;
     order: 7;
   }
   .order-xl-8 {
+    -webkit-box-ordinal-group: 9;
     order: 8;
   }
   .order-xl-9 {
+    -webkit-box-ordinal-group: 10;
     order: 9;
   }
   .order-xl-10 {
+    -webkit-box-ordinal-group: 11;
     order: 10;
   }
   .order-xl-11 {
+    -webkit-box-ordinal-group: 12;
     order: 11;
   }
   .order-xl-12 {
+    -webkit-box-ordinal-group: 13;
     order: 12;
   }
   .offset-xl-0 {
@@ -1476,16 +1622,16 @@ pre code {
 .table-info,
 .table-info > th,
 .table-info > td {
-  background-color: #daf2c6;
+  background-color: #cbe7fb;
 }
 
 .table-hover .table-info:hover {
-  background-color: #cdedb1;
+  background-color: #b3dcf9;
 }
 
 .table-hover .table-info:hover > td,
 .table-hover .table-info:hover > th {
-  background-color: #cdedb1;
+  background-color: #b3dcf9;
 }
 
 .table-warning,
@@ -1824,6 +1970,7 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
 }
 
 .form-row {
+  display: -webkit-box;
   display: flex;
   flex-wrap: wrap;
   margin-right: -5px;
@@ -1857,7 +2004,9 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
 }
 
 .form-check-inline {
+  display: -webkit-inline-box;
   display: inline-flex;
+  -webkit-box-align: center;
   align-items: center;
   padding-left: 0;
   margin-right: 0.75rem;
@@ -2065,8 +2214,12 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
 }
 
 .form-inline {
+  display: -webkit-box;
   display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
   flex-flow: row wrap;
+  -webkit-box-align: center;
   align-items: center;
 }
 
@@ -2076,15 +2229,23 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
 
 @media (min-width: 576px) {
   .form-inline label {
+    display: -webkit-box;
     display: flex;
+    -webkit-box-align: center;
     align-items: center;
+    -webkit-box-pack: center;
     justify-content: center;
     margin-bottom: 0;
   }
   .form-inline .form-group {
+    display: -webkit-box;
     display: flex;
+    -webkit-box-flex: 0;
     flex: 0 0 auto;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
     flex-flow: row wrap;
+    -webkit-box-align: center;
     align-items: center;
     margin-bottom: 0;
   }
@@ -2100,8 +2261,11 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
     width: auto;
   }
   .form-inline .form-check {
+    display: -webkit-box;
     display: flex;
+    -webkit-box-align: center;
     align-items: center;
+    -webkit-box-pack: center;
     justify-content: center;
     width: auto;
     padding-left: 0;
@@ -2113,7 +2277,9 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
     margin-left: 0;
   }
   .form-inline .custom-control {
+    -webkit-box-align: center;
     align-items: center;
+    -webkit-box-pack: center;
     justify-content: center;
   }
   .form-inline .custom-control-label {
@@ -2268,47 +2434,47 @@ fieldset:disabled a.btn {
 }
 
 .btn-info {
-  color: #495057;
-  background-color: #7bd235;
-  border-color: #7bd235;
+  color: #fff;
+  background-color: #45aaf2;
+  border-color: #45aaf2;
 }
 
 .btn-info:hover {
   color: #fff;
-  background-color: #69b829;
-  border-color: #63ad27;
+  background-color: #219af0;
+  border-color: #1594ef;
 }
 
 .btn-info:focus, .btn-info.focus {
-  box-shadow: 0 0 0 2px rgba(123, 210, 53, 0.5);
+  box-shadow: 0 0 0 2px rgba(69, 170, 242, 0.5);
 }
 
 .btn-info.disabled, .btn-info:disabled {
-  color: #495057;
-  background-color: #7bd235;
-  border-color: #7bd235;
+  color: #fff;
+  background-color: #45aaf2;
+  border-color: #45aaf2;
 }
 
 .btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active,
 .show > .btn-info.dropdown-toggle {
   color: #fff;
-  background-color: #63ad27;
-  border-color: #5da324;
+  background-color: #1594ef;
+  border-color: #108ee7;
 }
 
 .btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus,
 .show > .btn-info.dropdown-toggle:focus {
-  box-shadow: 0 0 0 2px rgba(123, 210, 53, 0.5);
+  box-shadow: 0 0 0 2px rgba(69, 170, 242, 0.5);
 }
 
 .btn-warning {
-  color: #495057;
+  color: #fff;
   background-color: #f1c40f;
   border-color: #f1c40f;
 }
 
 .btn-warning:hover {
-  color: #495057;
+  color: #fff;
   background-color: #cea70c;
   border-color: #c29d0b;
 }
@@ -2318,14 +2484,14 @@ fieldset:disabled a.btn {
 }
 
 .btn-warning.disabled, .btn-warning:disabled {
-  color: #495057;
+  color: #fff;
   background-color: #f1c40f;
   border-color: #f1c40f;
 }
 
 .btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active,
 .show > .btn-warning.dropdown-toggle {
-  color: #495057;
+  color: #fff;
   background-color: #c29d0b;
   border-color: #b6940b;
 }
@@ -2540,37 +2706,37 @@ fieldset:disabled a.btn {
 }
 
 .btn-outline-info {
-  color: #7bd235;
+  color: #45aaf2;
   background-color: transparent;
   background-image: none;
-  border-color: #7bd235;
+  border-color: #45aaf2;
 }
 
 .btn-outline-info:hover {
-  color: #495057;
-  background-color: #7bd235;
-  border-color: #7bd235;
+  color: #fff;
+  background-color: #45aaf2;
+  border-color: #45aaf2;
 }
 
 .btn-outline-info:focus, .btn-outline-info.focus {
-  box-shadow: 0 0 0 2px rgba(123, 210, 53, 0.5);
+  box-shadow: 0 0 0 2px rgba(69, 170, 242, 0.5);
 }
 
 .btn-outline-info.disabled, .btn-outline-info:disabled {
-  color: #7bd235;
+  color: #45aaf2;
   background-color: transparent;
 }
 
 .btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active,
 .show > .btn-outline-info.dropdown-toggle {
-  color: #495057;
-  background-color: #7bd235;
-  border-color: #7bd235;
+  color: #fff;
+  background-color: #45aaf2;
+  border-color: #45aaf2;
 }
 
 .btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus,
 .show > .btn-outline-info.dropdown-toggle:focus {
-  box-shadow: 0 0 0 2px rgba(123, 210, 53, 0.5);
+  box-shadow: 0 0 0 2px rgba(69, 170, 242, 0.5);
 }
 
 .btn-outline-warning {
@@ -2581,7 +2747,7 @@ fieldset:disabled a.btn {
 }
 
 .btn-outline-warning:hover {
-  color: #495057;
+  color: #fff;
   background-color: #f1c40f;
   border-color: #f1c40f;
 }
@@ -2597,7 +2763,7 @@ fieldset:disabled a.btn {
 
 .btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active,
 .show > .btn-outline-warning.dropdown-toggle {
-  color: #495057;
+  color: #fff;
   background-color: #f1c40f;
   border-color: #f1c40f;
 }
@@ -2973,6 +3139,7 @@ tbody.collapse.show {
 .btn-group,
 .btn-group-vertical {
   position: relative;
+  display: -webkit-inline-box;
   display: inline-flex;
   vertical-align: middle;
 }
@@ -2980,6 +3147,7 @@ tbody.collapse.show {
 .btn-group > .btn,
 .btn-group-vertical > .btn {
   position: relative;
+  -webkit-box-flex: 0;
   flex: 0 1 auto;
 }
 
@@ -3007,8 +3175,10 @@ tbody.collapse.show {
 }
 
 .btn-toolbar {
+  display: -webkit-box;
   display: flex;
   flex-wrap: wrap;
+  -webkit-box-pack: start;
   justify-content: flex-start;
 }
 
@@ -3052,8 +3222,12 @@ tbody.collapse.show {
 }
 
 .btn-group-vertical {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
   flex-direction: column;
+  -webkit-box-align: start;
   align-items: flex-start;
+  -webkit-box-pack: center;
   justify-content: center;
 }
 
@@ -3098,8 +3272,10 @@ tbody.collapse.show {
 
 .input-group {
   position: relative;
+  display: -webkit-box;
   display: flex;
   flex-wrap: wrap;
+  -webkit-box-align: stretch;
   align-items: stretch;
   width: 100%;
 }
@@ -3108,6 +3284,7 @@ tbody.collapse.show {
 .input-group > .custom-select,
 .input-group > .custom-file {
   position: relative;
+  -webkit-box-flex: 1;
   flex: 1 1 auto;
   width: 1%;
   margin-bottom: 0;
@@ -3144,7 +3321,9 @@ tbody.collapse.show {
 }
 
 .input-group > .custom-file {
+  display: -webkit-box;
   display: flex;
+  -webkit-box-align: center;
   align-items: center;
 }
 
@@ -3162,6 +3341,7 @@ tbody.collapse.show {
 
 .input-group-prepend,
 .input-group-append {
+  display: -webkit-box;
   display: flex;
 }
 
@@ -3191,7 +3371,9 @@ tbody.collapse.show {
 }
 
 .input-group-text {
+  display: -webkit-box;
   display: flex;
+  -webkit-box-align: center;
   align-items: center;
   padding: 0.375rem 0.75rem;
   margin-bottom: 0;
@@ -3239,6 +3421,7 @@ tbody.collapse.show {
 }
 
 .custom-control-inline {
+  display: -webkit-inline-box;
   display: inline-flex;
   margin-right: 1rem;
 }
@@ -3468,6 +3651,7 @@ tbody.collapse.show {
 }
 
 .nav {
+  display: -webkit-box;
   display: flex;
   flex-wrap: wrap;
   padding-left: 0;
@@ -3536,12 +3720,14 @@ tbody.collapse.show {
 }
 
 .nav-fill .nav-item {
+  -webkit-box-flex: 1;
   flex: 1 1 auto;
   text-align: center;
 }
 
 .nav-justified .nav-item {
   flex-basis: 0;
+  -webkit-box-flex: 1;
   flex-grow: 1;
   text-align: center;
 }
@@ -3556,18 +3742,24 @@ tbody.collapse.show {
 
 .navbar {
   position: relative;
+  display: -webkit-box;
   display: flex;
   flex-wrap: wrap;
+  -webkit-box-align: center;
   align-items: center;
+  -webkit-box-pack: justify;
   justify-content: space-between;
   padding: 0.5rem 1rem;
 }
 
 .navbar > .container,
 .navbar > .container-fluid {
+  display: -webkit-box;
   display: flex;
   flex-wrap: wrap;
+  -webkit-box-align: center;
   align-items: center;
+  -webkit-box-pack: justify;
   justify-content: space-between;
 }
 
@@ -3586,7 +3778,10 @@ tbody.collapse.show {
 }
 
 .navbar-nav {
+  display: -webkit-box;
   display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
   flex-direction: column;
   padding-left: 0;
   margin-bottom: 0;
@@ -3611,7 +3806,9 @@ tbody.collapse.show {
 
 .navbar-collapse {
   flex-basis: 100%;
+  -webkit-box-flex: 1;
   flex-grow: 1;
+  -webkit-box-align: center;
   align-items: center;
 }
 
@@ -3652,10 +3849,15 @@ tbody.collapse.show {
 
 @media (min-width: 576px) {
   .navbar-expand-sm {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
     flex-flow: row nowrap;
+    -webkit-box-pack: start;
     justify-content: flex-start;
   }
   .navbar-expand-sm .navbar-nav {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
     flex-direction: row;
   }
   .navbar-expand-sm .navbar-nav .dropdown-menu {
@@ -3674,6 +3876,7 @@ tbody.collapse.show {
     flex-wrap: nowrap;
   }
   .navbar-expand-sm .navbar-collapse {
+    display: -webkit-box !important;
     display: flex !important;
     flex-basis: auto;
   }
@@ -3696,10 +3899,15 @@ tbody.collapse.show {
 
 @media (min-width: 768px) {
   .navbar-expand-md {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
     flex-flow: row nowrap;
+    -webkit-box-pack: start;
     justify-content: flex-start;
   }
   .navbar-expand-md .navbar-nav {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
     flex-direction: row;
   }
   .navbar-expand-md .navbar-nav .dropdown-menu {
@@ -3718,6 +3926,7 @@ tbody.collapse.show {
     flex-wrap: nowrap;
   }
   .navbar-expand-md .navbar-collapse {
+    display: -webkit-box !important;
     display: flex !important;
     flex-basis: auto;
   }
@@ -3740,10 +3949,15 @@ tbody.collapse.show {
 
 @media (min-width: 992px) {
   .navbar-expand-lg {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
     flex-flow: row nowrap;
+    -webkit-box-pack: start;
     justify-content: flex-start;
   }
   .navbar-expand-lg .navbar-nav {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
     flex-direction: row;
   }
   .navbar-expand-lg .navbar-nav .dropdown-menu {
@@ -3762,6 +3976,7 @@ tbody.collapse.show {
     flex-wrap: nowrap;
   }
   .navbar-expand-lg .navbar-collapse {
+    display: -webkit-box !important;
     display: flex !important;
     flex-basis: auto;
   }
@@ -3784,10 +3999,15 @@ tbody.collapse.show {
 
 @media (min-width: 1280px) {
   .navbar-expand-xl {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
     flex-flow: row nowrap;
+    -webkit-box-pack: start;
     justify-content: flex-start;
   }
   .navbar-expand-xl .navbar-nav {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
     flex-direction: row;
   }
   .navbar-expand-xl .navbar-nav .dropdown-menu {
@@ -3806,6 +4026,7 @@ tbody.collapse.show {
     flex-wrap: nowrap;
   }
   .navbar-expand-xl .navbar-collapse {
+    display: -webkit-box !important;
     display: flex !important;
     flex-basis: auto;
   }
@@ -3819,7 +4040,10 @@ tbody.collapse.show {
 }
 
 .navbar-expand {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
   flex-flow: row nowrap;
+  -webkit-box-pack: start;
   justify-content: flex-start;
 }
 
@@ -3830,6 +4054,8 @@ tbody.collapse.show {
 }
 
 .navbar-expand .navbar-nav {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
   flex-direction: row;
 }
 
@@ -3853,6 +4079,7 @@ tbody.collapse.show {
 }
 
 .navbar-expand .navbar-collapse {
+  display: -webkit-box !important;
   display: flex !important;
   flex-basis: auto;
 }
@@ -3964,7 +4191,10 @@ tbody.collapse.show {
 
 .card {
   position: relative;
+  display: -webkit-box;
   display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
   flex-direction: column;
   min-width: 0;
   word-wrap: break-word;
@@ -3990,6 +4220,7 @@ tbody.collapse.show {
 }
 
 .card-body {
+  -webkit-box-flex: 1;
   flex: 1 1 auto;
   padding: 1.5rem;
 }
@@ -4079,7 +4310,10 @@ tbody.collapse.show {
 }
 
 .card-deck {
+  display: -webkit-box;
   display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
   flex-direction: column;
 }
 
@@ -4089,13 +4323,19 @@ tbody.collapse.show {
 
 @media (min-width: 576px) {
   .card-deck {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
     flex-flow: row wrap;
     margin-right: -0.75rem;
     margin-left: -0.75rem;
   }
   .card-deck .card {
+    display: -webkit-box;
     display: flex;
+    -webkit-box-flex: 1;
     flex: 1 0 0%;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
     flex-direction: column;
     margin-right: 0.75rem;
     margin-bottom: 0;
@@ -4104,7 +4344,10 @@ tbody.collapse.show {
 }
 
 .card-group {
+  display: -webkit-box;
   display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
   flex-direction: column;
 }
 
@@ -4114,9 +4357,12 @@ tbody.collapse.show {
 
 @media (min-width: 576px) {
   .card-group {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
     flex-flow: row wrap;
   }
   .card-group > .card {
+    -webkit-box-flex: 1;
     flex: 1 0 0%;
     margin-bottom: 0;
   }
@@ -4190,6 +4436,7 @@ tbody.collapse.show {
 }
 
 .breadcrumb {
+  display: -webkit-box;
   display: flex;
   flex-wrap: wrap;
   padding: 0.75rem 1rem;
@@ -4220,6 +4467,7 @@ tbody.collapse.show {
 }
 
 .pagination {
+  display: -webkit-box;
   display: flex;
   padding-left: 0;
   list-style: none;
@@ -4373,23 +4621,23 @@ tbody.collapse.show {
 }
 
 .badge-info {
-  color: #495057;
-  background-color: #7bd235;
+  color: #fff;
+  background-color: #45aaf2;
 }
 
 .badge-info[href]:hover, .badge-info[href]:focus {
-  color: #495057;
+  color: #fff;
   text-decoration: none;
-  background-color: #63ad27;
+  background-color: #1594ef;
 }
 
 .badge-warning {
-  color: #495057;
+  color: #fff;
   background-color: #f1c40f;
 }
 
 .badge-warning[href]:hover, .badge-warning[href]:focus {
-  color: #495057;
+  color: #fff;
   text-decoration: none;
   background-color: #c29d0b;
 }
@@ -4517,17 +4765,17 @@ tbody.collapse.show {
 }
 
 .alert-info {
-  color: #406d1c;
-  background-color: #e5f6d7;
-  border-color: #daf2c6;
+  color: #24587e;
+  background-color: #daeefc;
+  border-color: #cbe7fb;
 }
 
 .alert-info hr {
-  border-top-color: #cdedb1;
+  border-top-color: #b3dcf9;
 }
 
 .alert-info .alert-link {
-  color: #284412;
+  color: #193c56;
 }
 
 .alert-warning {
@@ -4586,6 +4834,15 @@ tbody.collapse.show {
   color: #040505;
 }
 
+@-webkit-keyframes progress-bar-stripes {
+  from {
+    background-position: 1rem 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+
 @keyframes progress-bar-stripes {
   from {
     background-position: 1rem 0;
@@ -4596,6 +4853,7 @@ tbody.collapse.show {
 }
 
 .progress {
+  display: -webkit-box;
   display: flex;
   height: 1rem;
   overflow: hidden;
@@ -4605,8 +4863,12 @@ tbody.collapse.show {
 }
 
 .progress-bar {
+  display: -webkit-box;
   display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
   flex-direction: column;
+  -webkit-box-pack: center;
   justify-content: center;
   color: #fff;
   text-align: center;
@@ -4620,20 +4882,27 @@ tbody.collapse.show {
 }
 
 .progress-bar-animated {
+  -webkit-animation: progress-bar-stripes 1s linear infinite;
   animation: progress-bar-stripes 1s linear infinite;
 }
 
 .media {
+  display: -webkit-box;
   display: flex;
+  -webkit-box-align: start;
   align-items: flex-start;
 }
 
 .media-body {
+  -webkit-box-flex: 1;
   flex: 1;
 }
 
 .list-group {
+  display: -webkit-box;
   display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
   flex-direction: column;
   padding-left: 0;
   margin-bottom: 0;
@@ -4756,19 +5025,19 @@ tbody.collapse.show {
 }
 
 .list-group-item-info {
-  color: #406d1c;
-  background-color: #daf2c6;
+  color: #24587e;
+  background-color: #cbe7fb;
 }
 
 .list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus {
-  color: #406d1c;
-  background-color: #cdedb1;
+  color: #24587e;
+  background-color: #b3dcf9;
 }
 
 .list-group-item-info.list-group-item-action.active {
   color: #fff;
-  background-color: #406d1c;
-  border-color: #406d1c;
+  background-color: #24587e;
+  border-color: #24587e;
 }
 
 .list-group-item-warning {
@@ -4891,23 +5160,32 @@ button.close {
 }
 
 .modal.fade .modal-dialog {
+  transition: -webkit-transform 0.3s ease-out;
   transition: transform 0.3s ease-out;
+  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
+  -webkit-transform: translate(0, -25%);
   transform: translate(0, -25%);
 }
 
 .modal.show .modal-dialog {
+  -webkit-transform: translate(0, 0);
   transform: translate(0, 0);
 }
 
 .modal-dialog-centered {
+  display: -webkit-box;
   display: flex;
+  -webkit-box-align: center;
   align-items: center;
   min-height: calc(100% - (0.5rem * 2));
 }
 
 .modal-content {
   position: relative;
+  display: -webkit-box;
   display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
   flex-direction: column;
   width: 100%;
   pointer-events: auto;
@@ -4937,8 +5215,11 @@ button.close {
 }
 
 .modal-header {
+  display: -webkit-box;
   display: flex;
+  -webkit-box-align: start;
   align-items: flex-start;
+  -webkit-box-pack: justify;
   justify-content: space-between;
   padding: 1rem;
   border-bottom: 1px solid #e9ecef;
@@ -4958,13 +5239,17 @@ button.close {
 
 .modal-body {
   position: relative;
+  -webkit-box-flex: 1;
   flex: 1 1 auto;
   padding: 1rem;
 }
 
 .modal-footer {
+  display: -webkit-box;
   display: flex;
+  -webkit-box-align: center;
   align-items: center;
+  -webkit-box-pack: end;
   justify-content: flex-end;
   padding: 1rem;
   border-top: 1px solid #e9ecef;
@@ -5303,11 +5588,15 @@ button.close {
 .carousel-item {
   position: relative;
   display: none;
+  -webkit-box-align: center;
   align-items: center;
   width: 100%;
+  transition: -webkit-transform 0.6s ease;
   transition: transform 0.6s ease;
+  transition: transform 0.6s ease, -webkit-transform 0.6s ease;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
+  -webkit-perspective: 1000px;
   perspective: 1000px;
 }
 
@@ -5325,36 +5614,42 @@ button.close {
 
 .carousel-item-next.carousel-item-left,
 .carousel-item-prev.carousel-item-right {
+  -webkit-transform: translateX(0);
   transform: translateX(0);
 }
 
-@supports (transform-style: preserve-3d) {
+@supports ((-webkit-transform-style: preserve-3d) or (transform-style: preserve-3d)) {
   .carousel-item-next.carousel-item-left,
   .carousel-item-prev.carousel-item-right {
+    -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
 }
 
 .carousel-item-next,
 .active.carousel-item-right {
+  -webkit-transform: translateX(100%);
   transform: translateX(100%);
 }
 
-@supports (transform-style: preserve-3d) {
+@supports ((-webkit-transform-style: preserve-3d) or (transform-style: preserve-3d)) {
   .carousel-item-next,
   .active.carousel-item-right {
+    -webkit-transform: translate3d(100%, 0, 0);
     transform: translate3d(100%, 0, 0);
   }
 }
 
 .carousel-item-prev,
 .active.carousel-item-left {
+  -webkit-transform: translateX(-100%);
   transform: translateX(-100%);
 }
 
-@supports (transform-style: preserve-3d) {
+@supports ((-webkit-transform-style: preserve-3d) or (transform-style: preserve-3d)) {
   .carousel-item-prev,
   .active.carousel-item-left {
+    -webkit-transform: translate3d(-100%, 0, 0);
     transform: translate3d(-100%, 0, 0);
   }
 }
@@ -5364,8 +5659,11 @@ button.close {
   position: absolute;
   top: 0;
   bottom: 0;
+  display: -webkit-box;
   display: flex;
+  -webkit-box-align: center;
   align-items: center;
+  -webkit-box-pack: center;
   justify-content: center;
   width: 15%;
   color: #fff;
@@ -5413,7 +5711,9 @@ button.close {
   bottom: 10px;
   left: 0;
   z-index: 15;
+  display: -webkit-box;
   display: flex;
+  -webkit-box-pack: center;
   justify-content: center;
   padding-left: 0;
   margin-right: 15%;
@@ -5423,6 +5723,7 @@ button.close {
 
 .carousel-indicators li {
   position: relative;
+  -webkit-box-flex: 0;
   flex: 0 1 auto;
   width: 30px;
   height: 3px;
@@ -5523,13 +5824,13 @@ button.bg-success:focus {
 }
 
 .bg-info {
-  background-color: #7bd235 !important;
+  background-color: #45aaf2 !important;
 }
 
 a.bg-info:hover, a.bg-info:focus,
 button.bg-info:hover,
 button.bg-info:focus {
-  background-color: #63ad27 !important;
+  background-color: #1594ef !important;
 }
 
 .bg-warning {
@@ -5633,7 +5934,7 @@ button.bg-dark:focus {
 }
 
 .border-info {
-  border-color: #7bd235 !important;
+  border-color: #45aaf2 !important;
 }
 
 .border-warning {
@@ -5723,10 +6024,12 @@ button.bg-dark:focus {
 }
 
 .d-flex {
+  display: -webkit-box !important;
   display: flex !important;
 }
 
 .d-inline-flex {
+  display: -webkit-inline-box !important;
   display: inline-flex !important;
 }
 
@@ -5753,9 +6056,11 @@ button.bg-dark:focus {
     display: table-cell !important;
   }
   .d-sm-flex {
+    display: -webkit-box !important;
     display: flex !important;
   }
   .d-sm-inline-flex {
+    display: -webkit-inline-box !important;
     display: inline-flex !important;
   }
 }
@@ -5783,9 +6088,11 @@ button.bg-dark:focus {
     display: table-cell !important;
   }
   .d-md-flex {
+    display: -webkit-box !important;
     display: flex !important;
   }
   .d-md-inline-flex {
+    display: -webkit-inline-box !important;
     display: inline-flex !important;
   }
 }
@@ -5813,9 +6120,11 @@ button.bg-dark:focus {
     display: table-cell !important;
   }
   .d-lg-flex {
+    display: -webkit-box !important;
     display: flex !important;
   }
   .d-lg-inline-flex {
+    display: -webkit-inline-box !important;
     display: inline-flex !important;
   }
 }
@@ -5843,9 +6152,11 @@ button.bg-dark:focus {
     display: table-cell !important;
   }
   .d-xl-flex {
+    display: -webkit-box !important;
     display: flex !important;
   }
   .d-xl-inline-flex {
+    display: -webkit-inline-box !important;
     display: inline-flex !important;
   }
 }
@@ -5873,9 +6184,11 @@ button.bg-dark:focus {
     display: table-cell !important;
   }
   .d-print-flex {
+    display: -webkit-box !important;
     display: flex !important;
   }
   .d-print-inline-flex {
+    display: -webkit-inline-box !important;
     display: inline-flex !important;
   }
 }
@@ -5924,18 +6237,26 @@ button.bg-dark:focus {
 }
 
 .flex-row {
+  -webkit-box-orient: horizontal !important;
+  -webkit-box-direction: normal !important;
   flex-direction: row !important;
 }
 
 .flex-column {
+  -webkit-box-orient: vertical !important;
+  -webkit-box-direction: normal !important;
   flex-direction: column !important;
 }
 
 .flex-row-reverse {
+  -webkit-box-orient: horizontal !important;
+  -webkit-box-direction: reverse !important;
   flex-direction: row-reverse !important;
 }
 
 .flex-column-reverse {
+  -webkit-box-orient: vertical !important;
+  -webkit-box-direction: reverse !important;
   flex-direction: column-reverse !important;
 }
 
@@ -5952,18 +6273,22 @@ button.bg-dark:focus {
 }
 
 .justify-content-start {
+  -webkit-box-pack: start !important;
   justify-content: flex-start !important;
 }
 
 .justify-content-end {
+  -webkit-box-pack: end !important;
   justify-content: flex-end !important;
 }
 
 .justify-content-center {
+  -webkit-box-pack: center !important;
   justify-content: center !important;
 }
 
 .justify-content-between {
+  -webkit-box-pack: justify !important;
   justify-content: space-between !important;
 }
 
@@ -5972,22 +6297,27 @@ button.bg-dark:focus {
 }
 
 .align-items-start {
+  -webkit-box-align: start !important;
   align-items: flex-start !important;
 }
 
 .align-items-end {
+  -webkit-box-align: end !important;
   align-items: flex-end !important;
 }
 
 .align-items-center {
+  -webkit-box-align: center !important;
   align-items: center !important;
 }
 
 .align-items-baseline {
+  -webkit-box-align: baseline !important;
   align-items: baseline !important;
 }
 
 .align-items-stretch {
+  -webkit-box-align: stretch !important;
   align-items: stretch !important;
 }
 
@@ -6041,15 +6371,23 @@ button.bg-dark:focus {
 
 @media (min-width: 576px) {
   .flex-sm-row {
+    -webkit-box-orient: horizontal !important;
+    -webkit-box-direction: normal !important;
     flex-direction: row !important;
   }
   .flex-sm-column {
+    -webkit-box-orient: vertical !important;
+    -webkit-box-direction: normal !important;
     flex-direction: column !important;
   }
   .flex-sm-row-reverse {
+    -webkit-box-orient: horizontal !important;
+    -webkit-box-direction: reverse !important;
     flex-direction: row-reverse !important;
   }
   .flex-sm-column-reverse {
+    -webkit-box-orient: vertical !important;
+    -webkit-box-direction: reverse !important;
     flex-direction: column-reverse !important;
   }
   .flex-sm-wrap {
@@ -6062,33 +6400,42 @@ button.bg-dark:focus {
     flex-wrap: wrap-reverse !important;
   }
   .justify-content-sm-start {
+    -webkit-box-pack: start !important;
     justify-content: flex-start !important;
   }
   .justify-content-sm-end {
+    -webkit-box-pack: end !important;
     justify-content: flex-end !important;
   }
   .justify-content-sm-center {
+    -webkit-box-pack: center !important;
     justify-content: center !important;
   }
   .justify-content-sm-between {
+    -webkit-box-pack: justify !important;
     justify-content: space-between !important;
   }
   .justify-content-sm-around {
     justify-content: space-around !important;
   }
   .align-items-sm-start {
+    -webkit-box-align: start !important;
     align-items: flex-start !important;
   }
   .align-items-sm-end {
+    -webkit-box-align: end !important;
     align-items: flex-end !important;
   }
   .align-items-sm-center {
+    -webkit-box-align: center !important;
     align-items: center !important;
   }
   .align-items-sm-baseline {
+    -webkit-box-align: baseline !important;
     align-items: baseline !important;
   }
   .align-items-sm-stretch {
+    -webkit-box-align: stretch !important;
     align-items: stretch !important;
   }
   .align-content-sm-start {
@@ -6131,15 +6478,23 @@ button.bg-dark:focus {
 
 @media (min-width: 768px) {
   .flex-md-row {
+    -webkit-box-orient: horizontal !important;
+    -webkit-box-direction: normal !important;
     flex-direction: row !important;
   }
   .flex-md-column {
+    -webkit-box-orient: vertical !important;
+    -webkit-box-direction: normal !important;
     flex-direction: column !important;
   }
   .flex-md-row-reverse {
+    -webkit-box-orient: horizontal !important;
+    -webkit-box-direction: reverse !important;
     flex-direction: row-reverse !important;
   }
   .flex-md-column-reverse {
+    -webkit-box-orient: vertical !important;
+    -webkit-box-direction: reverse !important;
     flex-direction: column-reverse !important;
   }
   .flex-md-wrap {
@@ -6152,33 +6507,42 @@ button.bg-dark:focus {
     flex-wrap: wrap-reverse !important;
   }
   .justify-content-md-start {
+    -webkit-box-pack: start !important;
     justify-content: flex-start !important;
   }
   .justify-content-md-end {
+    -webkit-box-pack: end !important;
     justify-content: flex-end !important;
   }
   .justify-content-md-center {
+    -webkit-box-pack: center !important;
     justify-content: center !important;
   }
   .justify-content-md-between {
+    -webkit-box-pack: justify !important;
     justify-content: space-between !important;
   }
   .justify-content-md-around {
     justify-content: space-around !important;
   }
   .align-items-md-start {
+    -webkit-box-align: start !important;
     align-items: flex-start !important;
   }
   .align-items-md-end {
+    -webkit-box-align: end !important;
     align-items: flex-end !important;
   }
   .align-items-md-center {
+    -webkit-box-align: center !important;
     align-items: center !important;
   }
   .align-items-md-baseline {
+    -webkit-box-align: baseline !important;
     align-items: baseline !important;
   }
   .align-items-md-stretch {
+    -webkit-box-align: stretch !important;
     align-items: stretch !important;
   }
   .align-content-md-start {
@@ -6221,15 +6585,23 @@ button.bg-dark:focus {
 
 @media (min-width: 992px) {
   .flex-lg-row {
+    -webkit-box-orient: horizontal !important;
+    -webkit-box-direction: normal !important;
     flex-direction: row !important;
   }
   .flex-lg-column {
+    -webkit-box-orient: vertical !important;
+    -webkit-box-direction: normal !important;
     flex-direction: column !important;
   }
   .flex-lg-row-reverse {
+    -webkit-box-orient: horizontal !important;
+    -webkit-box-direction: reverse !important;
     flex-direction: row-reverse !important;
   }
   .flex-lg-column-reverse {
+    -webkit-box-orient: vertical !important;
+    -webkit-box-direction: reverse !important;
     flex-direction: column-reverse !important;
   }
   .flex-lg-wrap {
@@ -6242,33 +6614,42 @@ button.bg-dark:focus {
     flex-wrap: wrap-reverse !important;
   }
   .justify-content-lg-start {
+    -webkit-box-pack: start !important;
     justify-content: flex-start !important;
   }
   .justify-content-lg-end {
+    -webkit-box-pack: end !important;
     justify-content: flex-end !important;
   }
   .justify-content-lg-center {
+    -webkit-box-pack: center !important;
     justify-content: center !important;
   }
   .justify-content-lg-between {
+    -webkit-box-pack: justify !important;
     justify-content: space-between !important;
   }
   .justify-content-lg-around {
     justify-content: space-around !important;
   }
   .align-items-lg-start {
+    -webkit-box-align: start !important;
     align-items: flex-start !important;
   }
   .align-items-lg-end {
+    -webkit-box-align: end !important;
     align-items: flex-end !important;
   }
   .align-items-lg-center {
+    -webkit-box-align: center !important;
     align-items: center !important;
   }
   .align-items-lg-baseline {
+    -webkit-box-align: baseline !important;
     align-items: baseline !important;
   }
   .align-items-lg-stretch {
+    -webkit-box-align: stretch !important;
     align-items: stretch !important;
   }
   .align-content-lg-start {
@@ -6311,15 +6692,23 @@ button.bg-dark:focus {
 
 @media (min-width: 1280px) {
   .flex-xl-row {
+    -webkit-box-orient: horizontal !important;
+    -webkit-box-direction: normal !important;
     flex-direction: row !important;
   }
   .flex-xl-column {
+    -webkit-box-orient: vertical !important;
+    -webkit-box-direction: normal !important;
     flex-direction: column !important;
   }
   .flex-xl-row-reverse {
+    -webkit-box-orient: horizontal !important;
+    -webkit-box-direction: reverse !important;
     flex-direction: row-reverse !important;
   }
   .flex-xl-column-reverse {
+    -webkit-box-orient: vertical !important;
+    -webkit-box-direction: reverse !important;
     flex-direction: column-reverse !important;
   }
   .flex-xl-wrap {
@@ -6332,33 +6721,42 @@ button.bg-dark:focus {
     flex-wrap: wrap-reverse !important;
   }
   .justify-content-xl-start {
+    -webkit-box-pack: start !important;
     justify-content: flex-start !important;
   }
   .justify-content-xl-end {
+    -webkit-box-pack: end !important;
     justify-content: flex-end !important;
   }
   .justify-content-xl-center {
+    -webkit-box-pack: center !important;
     justify-content: center !important;
   }
   .justify-content-xl-between {
+    -webkit-box-pack: justify !important;
     justify-content: space-between !important;
   }
   .justify-content-xl-around {
     justify-content: space-around !important;
   }
   .align-items-xl-start {
+    -webkit-box-align: start !important;
     align-items: flex-start !important;
   }
   .align-items-xl-end {
+    -webkit-box-align: end !important;
     align-items: flex-end !important;
   }
   .align-items-xl-center {
+    -webkit-box-align: center !important;
     align-items: center !important;
   }
   .align-items-xl-baseline {
+    -webkit-box-align: baseline !important;
     align-items: baseline !important;
   }
   .align-items-xl-stretch {
+    -webkit-box-align: stretch !important;
     align-items: stretch !important;
   }
   .align-content-xl-start {
@@ -8900,11 +9298,11 @@ a.text-success:hover, a.text-success:focus {
 }
 
 .text-info {
-  color: #7bd235 !important;
+  color: #45aaf2 !important;
 }
 
 a.text-info:hover, a.text-info:focus {
-  color: #63ad27 !important;
+  color: #1594ef !important;
 }
 
 .text-warning {
@@ -9163,18 +9561,24 @@ img {
 
 .row-cards > .col,
 .row-cards > [class*='col-'] {
+  display: -webkit-box;
   display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
   flex-direction: column;
 }
 
 .row-deck > .col,
 .row-deck > [class*='col-'] {
+  display: -webkit-box;
   display: flex;
+  -webkit-box-align: stretch;
   align-items: stretch;
 }
 
 .row-deck > .col .card,
 .row-deck > [class*='col-'] .card {
+  -webkit-box-flex: 1;
   flex: 1;
 }
 
@@ -9247,8 +9651,12 @@ img {
 }
 
 .page {
+  display: -webkit-box;
   display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
   flex-direction: column;
+  -webkit-box-pack: center;
   justify-content: center;
   min-height: 100%;
 }
@@ -9264,6 +9672,7 @@ body.fixed-header .page {
 }
 
 .page-main {
+  -webkit-box-flex: 1;
   flex: 1;
 }
 
@@ -9278,7 +9687,9 @@ body.fixed-header .page {
 }
 
 .page-header {
+  display: -webkit-box;
   display: flex;
+  -webkit-box-align: center;
   align-items: center;
   margin: 1.5rem 0 1.5rem;
   flex-wrap: wrap;
@@ -9324,9 +9735,13 @@ body.fixed-header .page {
 }
 
 .page-single {
+  -webkit-box-flex: 1;
   flex: 1;
+  display: -webkit-box;
   display: flex;
+  -webkit-box-align: center;
   align-items: center;
+  -webkit-box-pack: center;
   justify-content: center;
   padding: 1rem 0;
 }
@@ -9350,7 +9765,10 @@ body.fixed-header .page {
   width: 22rem;
   background: #ffffff;
   border-left: 1px solid rgba(0, 40, 100, 0.12);
+  display: -webkit-box;
   display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
   flex-direction: column;
   z-index: 100;
   visibility: hidden;
@@ -9365,6 +9783,7 @@ body.fixed-header .page {
 
 .aside-body {
   padding: 1.5rem;
+  -webkit-box-flex: 1;
   flex: 1;
   overflow: auto;
 }
@@ -9411,7 +9830,9 @@ body.fixed-header .header {
   user-select: none;
   cursor: pointer;
   line-height: 1;
+  display: -webkit-box;
   display: flex;
+  -webkit-box-align: center;
   align-items: center;
 }
 
@@ -9485,6 +9906,7 @@ body.fixed-header .header {
   background: #fff;
   border-bottom: 1px solid rgba(0, 40, 100, 0.12);
   color: #868e96;
+  -webkit-box-align: center;
   align-items: center;
 }
 
@@ -9911,6 +10333,17 @@ a.icon:hover {
   min-width: 2.375rem;
 }
 
+.btn i {
+  font-size: 1rem;
+  vertical-align: -2px;
+}
+
+.btn-icon {
+  padding-left: .5rem;
+  padding-right: .5rem;
+  text-align: center;
+}
+
 .btn-secondary {
   color: #495057;
   background-color: #fff;
@@ -9950,6 +10383,10 @@ a.icon:hover {
   border-radius: 10rem;
 }
 
+.btn-square {
+  border-radius: 0;
+}
+
 .btn-facebook {
   color: #fff;
   background-color: #3b5998;
@@ -10291,7 +10728,7 @@ a.icon:hover {
 }
 
 .btn-rss {
-  color: #495057;
+  color: #fff;
   background-color: #ffa500;
   border-color: #ffa500;
 }
@@ -10307,7 +10744,7 @@ a.icon:hover {
 }
 
 .btn-rss.disabled, .btn-rss:disabled {
-  color: #495057;
+  color: #fff;
   background-color: #ffa500;
   border-color: #ffa500;
 }
@@ -10392,6 +10829,516 @@ a.icon:hover {
   box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.5);
 }
 
+.btn-blue {
+  color: #fff;
+  background-color: #467fcf;
+  border-color: #467fcf;
+}
+
+.btn-blue:hover {
+  color: #fff;
+  background-color: #316cbe;
+  border-color: #2f66b3;
+}
+
+.btn-blue:focus, .btn-blue.focus {
+  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.5);
+}
+
+.btn-blue.disabled, .btn-blue:disabled {
+  color: #fff;
+  background-color: #467fcf;
+  border-color: #467fcf;
+}
+
+.btn-blue:not(:disabled):not(.disabled):active, .btn-blue:not(:disabled):not(.disabled).active,
+.show > .btn-blue.dropdown-toggle {
+  color: #fff;
+  background-color: #2f66b3;
+  border-color: #2c60a9;
+}
+
+.btn-blue:not(:disabled):not(.disabled):active:focus, .btn-blue:not(:disabled):not(.disabled).active:focus,
+.show > .btn-blue.dropdown-toggle:focus {
+  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.5);
+}
+
+.btn-indigo {
+  color: #fff;
+  background-color: #6574cd;
+  border-color: #6574cd;
+}
+
+.btn-indigo:hover {
+  color: #fff;
+  background-color: #485ac4;
+  border-color: #3f51c1;
+}
+
+.btn-indigo:focus, .btn-indigo.focus {
+  box-shadow: 0 0 0 2px rgba(101, 116, 205, 0.5);
+}
+
+.btn-indigo.disabled, .btn-indigo:disabled {
+  color: #fff;
+  background-color: #6574cd;
+  border-color: #6574cd;
+}
+
+.btn-indigo:not(:disabled):not(.disabled):active, .btn-indigo:not(:disabled):not(.disabled).active,
+.show > .btn-indigo.dropdown-toggle {
+  color: #fff;
+  background-color: #3f51c1;
+  border-color: #3b4db7;
+}
+
+.btn-indigo:not(:disabled):not(.disabled):active:focus, .btn-indigo:not(:disabled):not(.disabled).active:focus,
+.show > .btn-indigo.dropdown-toggle:focus {
+  box-shadow: 0 0 0 2px rgba(101, 116, 205, 0.5);
+}
+
+.btn-purple {
+  color: #fff;
+  background-color: #a55eea;
+  border-color: #a55eea;
+}
+
+.btn-purple:hover {
+  color: #fff;
+  background-color: #923ce6;
+  border-color: #8c31e4;
+}
+
+.btn-purple:focus, .btn-purple.focus {
+  box-shadow: 0 0 0 2px rgba(165, 94, 234, 0.5);
+}
+
+.btn-purple.disabled, .btn-purple:disabled {
+  color: #fff;
+  background-color: #a55eea;
+  border-color: #a55eea;
+}
+
+.btn-purple:not(:disabled):not(.disabled):active, .btn-purple:not(:disabled):not(.disabled).active,
+.show > .btn-purple.dropdown-toggle {
+  color: #fff;
+  background-color: #8c31e4;
+  border-color: #8526e3;
+}
+
+.btn-purple:not(:disabled):not(.disabled):active:focus, .btn-purple:not(:disabled):not(.disabled).active:focus,
+.show > .btn-purple.dropdown-toggle:focus {
+  box-shadow: 0 0 0 2px rgba(165, 94, 234, 0.5);
+}
+
+.btn-pink {
+  color: #fff;
+  background-color: #f66d9b;
+  border-color: #f66d9b;
+}
+
+.btn-pink:hover {
+  color: #fff;
+  background-color: #f44982;
+  border-color: #f33d7a;
+}
+
+.btn-pink:focus, .btn-pink.focus {
+  box-shadow: 0 0 0 2px rgba(246, 109, 155, 0.5);
+}
+
+.btn-pink.disabled, .btn-pink:disabled {
+  color: #fff;
+  background-color: #f66d9b;
+  border-color: #f66d9b;
+}
+
+.btn-pink:not(:disabled):not(.disabled):active, .btn-pink:not(:disabled):not(.disabled).active,
+.show > .btn-pink.dropdown-toggle {
+  color: #fff;
+  background-color: #f33d7a;
+  border-color: #f23172;
+}
+
+.btn-pink:not(:disabled):not(.disabled):active:focus, .btn-pink:not(:disabled):not(.disabled).active:focus,
+.show > .btn-pink.dropdown-toggle:focus {
+  box-shadow: 0 0 0 2px rgba(246, 109, 155, 0.5);
+}
+
+.btn-red {
+  color: #fff;
+  background-color: #cd201f;
+  border-color: #cd201f;
+}
+
+.btn-red:hover {
+  color: #fff;
+  background-color: #ac1b1a;
+  border-color: #a11918;
+}
+
+.btn-red:focus, .btn-red.focus {
+  box-shadow: 0 0 0 2px rgba(205, 32, 31, 0.5);
+}
+
+.btn-red.disabled, .btn-red:disabled {
+  color: #fff;
+  background-color: #cd201f;
+  border-color: #cd201f;
+}
+
+.btn-red:not(:disabled):not(.disabled):active, .btn-red:not(:disabled):not(.disabled).active,
+.show > .btn-red.dropdown-toggle {
+  color: #fff;
+  background-color: #a11918;
+  border-color: #961717;
+}
+
+.btn-red:not(:disabled):not(.disabled):active:focus, .btn-red:not(:disabled):not(.disabled).active:focus,
+.show > .btn-red.dropdown-toggle:focus {
+  box-shadow: 0 0 0 2px rgba(205, 32, 31, 0.5);
+}
+
+.btn-orange {
+  color: #fff;
+  background-color: #fd9644;
+  border-color: #fd9644;
+}
+
+.btn-orange:hover {
+  color: #fff;
+  background-color: #fd811e;
+  border-color: #fc7a12;
+}
+
+.btn-orange:focus, .btn-orange.focus {
+  box-shadow: 0 0 0 2px rgba(253, 150, 68, 0.5);
+}
+
+.btn-orange.disabled, .btn-orange:disabled {
+  color: #fff;
+  background-color: #fd9644;
+  border-color: #fd9644;
+}
+
+.btn-orange:not(:disabled):not(.disabled):active, .btn-orange:not(:disabled):not(.disabled).active,
+.show > .btn-orange.dropdown-toggle {
+  color: #fff;
+  background-color: #fc7a12;
+  border-color: #fc7305;
+}
+
+.btn-orange:not(:disabled):not(.disabled):active:focus, .btn-orange:not(:disabled):not(.disabled).active:focus,
+.show > .btn-orange.dropdown-toggle:focus {
+  box-shadow: 0 0 0 2px rgba(253, 150, 68, 0.5);
+}
+
+.btn-yellow {
+  color: #fff;
+  background-color: #f1c40f;
+  border-color: #f1c40f;
+}
+
+.btn-yellow:hover {
+  color: #fff;
+  background-color: #cea70c;
+  border-color: #c29d0b;
+}
+
+.btn-yellow:focus, .btn-yellow.focus {
+  box-shadow: 0 0 0 2px rgba(241, 196, 15, 0.5);
+}
+
+.btn-yellow.disabled, .btn-yellow:disabled {
+  color: #fff;
+  background-color: #f1c40f;
+  border-color: #f1c40f;
+}
+
+.btn-yellow:not(:disabled):not(.disabled):active, .btn-yellow:not(:disabled):not(.disabled).active,
+.show > .btn-yellow.dropdown-toggle {
+  color: #fff;
+  background-color: #c29d0b;
+  border-color: #b6940b;
+}
+
+.btn-yellow:not(:disabled):not(.disabled):active:focus, .btn-yellow:not(:disabled):not(.disabled).active:focus,
+.show > .btn-yellow.dropdown-toggle:focus {
+  box-shadow: 0 0 0 2px rgba(241, 196, 15, 0.5);
+}
+
+.btn-green {
+  color: #fff;
+  background-color: #5eba00;
+  border-color: #5eba00;
+}
+
+.btn-green:hover {
+  color: #fff;
+  background-color: #4b9400;
+  border-color: #448700;
+}
+
+.btn-green:focus, .btn-green.focus {
+  box-shadow: 0 0 0 2px rgba(94, 186, 0, 0.5);
+}
+
+.btn-green.disabled, .btn-green:disabled {
+  color: #fff;
+  background-color: #5eba00;
+  border-color: #5eba00;
+}
+
+.btn-green:not(:disabled):not(.disabled):active, .btn-green:not(:disabled):not(.disabled).active,
+.show > .btn-green.dropdown-toggle {
+  color: #fff;
+  background-color: #448700;
+  border-color: #3e7a00;
+}
+
+.btn-green:not(:disabled):not(.disabled):active:focus, .btn-green:not(:disabled):not(.disabled).active:focus,
+.show > .btn-green.dropdown-toggle:focus {
+  box-shadow: 0 0 0 2px rgba(94, 186, 0, 0.5);
+}
+
+.btn-teal {
+  color: #fff;
+  background-color: #2bcbba;
+  border-color: #2bcbba;
+}
+
+.btn-teal:hover {
+  color: #fff;
+  background-color: #24ab9d;
+  border-color: #22a193;
+}
+
+.btn-teal:focus, .btn-teal.focus {
+  box-shadow: 0 0 0 2px rgba(43, 203, 186, 0.5);
+}
+
+.btn-teal.disabled, .btn-teal:disabled {
+  color: #fff;
+  background-color: #2bcbba;
+  border-color: #2bcbba;
+}
+
+.btn-teal:not(:disabled):not(.disabled):active, .btn-teal:not(:disabled):not(.disabled).active,
+.show > .btn-teal.dropdown-toggle {
+  color: #fff;
+  background-color: #22a193;
+  border-color: #20968a;
+}
+
+.btn-teal:not(:disabled):not(.disabled):active:focus, .btn-teal:not(:disabled):not(.disabled).active:focus,
+.show > .btn-teal.dropdown-toggle:focus {
+  box-shadow: 0 0 0 2px rgba(43, 203, 186, 0.5);
+}
+
+.btn-cyan {
+  color: #fff;
+  background-color: #17a2b8;
+  border-color: #17a2b8;
+}
+
+.btn-cyan:hover {
+  color: #fff;
+  background-color: #138496;
+  border-color: #117a8b;
+}
+
+.btn-cyan:focus, .btn-cyan.focus {
+  box-shadow: 0 0 0 2px rgba(23, 162, 184, 0.5);
+}
+
+.btn-cyan.disabled, .btn-cyan:disabled {
+  color: #fff;
+  background-color: #17a2b8;
+  border-color: #17a2b8;
+}
+
+.btn-cyan:not(:disabled):not(.disabled):active, .btn-cyan:not(:disabled):not(.disabled).active,
+.show > .btn-cyan.dropdown-toggle {
+  color: #fff;
+  background-color: #117a8b;
+  border-color: #10707f;
+}
+
+.btn-cyan:not(:disabled):not(.disabled):active:focus, .btn-cyan:not(:disabled):not(.disabled).active:focus,
+.show > .btn-cyan.dropdown-toggle:focus {
+  box-shadow: 0 0 0 2px rgba(23, 162, 184, 0.5);
+}
+
+.btn-white {
+  color: #495057;
+  background-color: #fff;
+  border-color: #fff;
+}
+
+.btn-white:hover {
+  color: #495057;
+  background-color: #ececec;
+  border-color: #e6e5e5;
+}
+
+.btn-white:focus, .btn-white.focus {
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
+}
+
+.btn-white.disabled, .btn-white:disabled {
+  color: #495057;
+  background-color: #fff;
+  border-color: #fff;
+}
+
+.btn-white:not(:disabled):not(.disabled):active, .btn-white:not(:disabled):not(.disabled).active,
+.show > .btn-white.dropdown-toggle {
+  color: #495057;
+  background-color: #e6e5e5;
+  border-color: #dfdfdf;
+}
+
+.btn-white:not(:disabled):not(.disabled):active:focus, .btn-white:not(:disabled):not(.disabled).active:focus,
+.show > .btn-white.dropdown-toggle:focus {
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
+}
+
+.btn-gray {
+  color: #fff;
+  background-color: #868e96;
+  border-color: #868e96;
+}
+
+.btn-gray:hover {
+  color: #fff;
+  background-color: #727b84;
+  border-color: #6c757d;
+}
+
+.btn-gray:focus, .btn-gray.focus {
+  box-shadow: 0 0 0 2px rgba(134, 142, 150, 0.5);
+}
+
+.btn-gray.disabled, .btn-gray:disabled {
+  color: #fff;
+  background-color: #868e96;
+  border-color: #868e96;
+}
+
+.btn-gray:not(:disabled):not(.disabled):active, .btn-gray:not(:disabled):not(.disabled).active,
+.show > .btn-gray.dropdown-toggle {
+  color: #fff;
+  background-color: #6c757d;
+  border-color: #666e76;
+}
+
+.btn-gray:not(:disabled):not(.disabled):active:focus, .btn-gray:not(:disabled):not(.disabled).active:focus,
+.show > .btn-gray.dropdown-toggle:focus {
+  box-shadow: 0 0 0 2px rgba(134, 142, 150, 0.5);
+}
+
+.btn-gray-dark {
+  color: #fff;
+  background-color: #343a40;
+  border-color: #343a40;
+}
+
+.btn-gray-dark:hover {
+  color: #fff;
+  background-color: #23272b;
+  border-color: #1d2124;
+}
+
+.btn-gray-dark:focus, .btn-gray-dark.focus {
+  box-shadow: 0 0 0 2px rgba(52, 58, 64, 0.5);
+}
+
+.btn-gray-dark.disabled, .btn-gray-dark:disabled {
+  color: #fff;
+  background-color: #343a40;
+  border-color: #343a40;
+}
+
+.btn-gray-dark:not(:disabled):not(.disabled):active, .btn-gray-dark:not(:disabled):not(.disabled).active,
+.show > .btn-gray-dark.dropdown-toggle {
+  color: #fff;
+  background-color: #1d2124;
+  border-color: #171a1d;
+}
+
+.btn-gray-dark:not(:disabled):not(.disabled):active:focus, .btn-gray-dark:not(:disabled):not(.disabled).active:focus,
+.show > .btn-gray-dark.dropdown-toggle:focus {
+  box-shadow: 0 0 0 2px rgba(52, 58, 64, 0.5);
+}
+
+.btn-azure {
+  color: #fff;
+  background-color: #45aaf2;
+  border-color: #45aaf2;
+}
+
+.btn-azure:hover {
+  color: #fff;
+  background-color: #219af0;
+  border-color: #1594ef;
+}
+
+.btn-azure:focus, .btn-azure.focus {
+  box-shadow: 0 0 0 2px rgba(69, 170, 242, 0.5);
+}
+
+.btn-azure.disabled, .btn-azure:disabled {
+  color: #fff;
+  background-color: #45aaf2;
+  border-color: #45aaf2;
+}
+
+.btn-azure:not(:disabled):not(.disabled):active, .btn-azure:not(:disabled):not(.disabled).active,
+.show > .btn-azure.dropdown-toggle {
+  color: #fff;
+  background-color: #1594ef;
+  border-color: #108ee7;
+}
+
+.btn-azure:not(:disabled):not(.disabled):active:focus, .btn-azure:not(:disabled):not(.disabled).active:focus,
+.show > .btn-azure.dropdown-toggle:focus {
+  box-shadow: 0 0 0 2px rgba(69, 170, 242, 0.5);
+}
+
+.btn-lime {
+  color: #fff;
+  background-color: #7bd235;
+  border-color: #7bd235;
+}
+
+.btn-lime:hover {
+  color: #fff;
+  background-color: #69b829;
+  border-color: #63ad27;
+}
+
+.btn-lime:focus, .btn-lime.focus {
+  box-shadow: 0 0 0 2px rgba(123, 210, 53, 0.5);
+}
+
+.btn-lime.disabled, .btn-lime:disabled {
+  color: #fff;
+  background-color: #7bd235;
+  border-color: #7bd235;
+}
+
+.btn-lime:not(:disabled):not(.disabled):active, .btn-lime:not(:disabled):not(.disabled).active,
+.show > .btn-lime.dropdown-toggle {
+  color: #fff;
+  background-color: #63ad27;
+  border-color: #5da324;
+}
+
+.btn-lime:not(:disabled):not(.disabled):active:focus, .btn-lime:not(:disabled):not(.disabled).active:focus,
+.show > .btn-lime.dropdown-toggle:focus {
+  box-shadow: 0 0 0 2px rgba(123, 210, 53, 0.5);
+}
+
 .btn-option {
   background: transparent;
   color: #868e96;
@@ -10417,6 +11364,16 @@ a.icon:hover {
   font-weight: 400;
 }
 
+.btn-list {
+  margin-bottom: -.5rem;
+  font-size: 0;
+}
+
+.btn-list .btn {
+  margin-right: .5rem;
+  margin-bottom: .5rem;
+}
+
 .badge {
   color: #fff;
 }
@@ -10587,6 +11544,7 @@ a.icon:hover {
 }
 
 .card-body {
+  -webkit-box-flex: 1;
   flex: 1;
   margin: 0;
   padding: 1.5rem 1.5rem;
@@ -10625,8 +11583,10 @@ a.icon:hover {
 .card-header {
   background: none;
   padding: 0.5rem 1.5rem;
+  display: -webkit-box;
   display: flex;
   min-height: 3.5rem;
+  -webkit-box-align: center;
   align-items: center;
 }
 
@@ -10651,7 +11611,10 @@ a.icon:hover {
 
 .card-img-overlay {
   background-color: rgba(0, 0, 0, 0.4);
+  display: -webkit-box;
   display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
   flex-direction: column;
 }
 
@@ -10756,6 +11719,8 @@ a.icon:hover {
 }
 
 .card-aside {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
   flex-direction: row;
 }
 
@@ -10771,7 +11736,9 @@ a.icon:hover {
   font-size: 2.5rem;
   line-height: 3.4rem;
   height: 3.4rem;
+  display: -webkit-box;
   display: flex;
+  -webkit-box-align: center;
   align-items: center;
   font-weight: 400;
 }
@@ -10789,7 +11756,9 @@ a.icon:hover {
 
 .card-options {
   margin-left: auto;
+  display: -webkit-box;
   display: flex;
+  -webkit-box-ordinal-group: 101;
   order: 100;
   margin-right: -.5rem;
   color: #868e96;
@@ -10852,6 +11821,7 @@ Card maps
 Card tabs
  */
 .card-tabs {
+  display: -webkit-box;
   display: flex;
 }
 
@@ -10865,6 +11835,7 @@ Card tabs
 }
 
 .card-tabs-item {
+  -webkit-box-flex: 1;
   flex: 1;
   display: block;
   padding: 1rem 1.5rem;
@@ -11073,6 +12044,7 @@ Card alert
 }
 
 .avatar-list {
+  display: -webkit-box;
   display: flex;
   flex-wrap: wrap;
   list-style: none;
@@ -11100,6 +12072,17 @@ Card alert
   font-size: 1.5rem;
 }
 
+@-webkit-keyframes indeterminate {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+  100%, 60% {
+    left: 100%;
+    right: -90%;
+  }
+}
+
 @keyframes indeterminate {
   0% {
     left: -35%;
@@ -11111,6 +12094,17 @@ Card alert
   }
 }
 
+@-webkit-keyframes indeterminate-short {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+  100%, 60% {
+    left: 107%;
+    right: -8%;
+  }
+}
+
 @keyframes indeterminate-short {
   0% {
     left: -200%;
@@ -11147,19 +12141,35 @@ Card alert
 }
 
 .progress-bar-indeterminate:before {
+  -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
   animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
 }
 
 .progress-bar-indeterminate:after {
+  -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
   animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+  -webkit-animation-delay: 1.15s;
   animation-delay: 1.15s;
 }
 
+@-webkit-keyframes loader {
+  from {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
 @keyframes loader {
   from {
+    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   to {
+    -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
@@ -11178,6 +12188,7 @@ Dimmer
   top: 50%;
   left: 0;
   right: 0;
+  -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
 }
 
@@ -11218,7 +12229,9 @@ Loader
 }
 
 .loader:after {
+  -webkit-animation: loader .6s linear;
   animation: loader .6s linear;
+  -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
   border-radius: 50%;
   border: 3px solid;
@@ -11231,11 +12244,13 @@ Loader
   list-style: none;
   margin: 0 -1px -1px 0;
   padding: 0;
+  display: -webkit-box;
   display: flex;
   flex-wrap: wrap;
 }
 
 .icons-list > li {
+  -webkit-box-flex: 1;
   flex: 1 0 4rem;
 }
 
@@ -11246,8 +12261,11 @@ Loader
 .icons-list-item {
   text-align: center;
   height: 4rem;
+  display: -webkit-box;
   display: flex;
+  -webkit-box-align: center;
   align-items: center;
+  -webkit-box-pack: center;
   justify-content: center;
   border-right: 1px solid rgba(0, 40, 100, 0.12);
   border-bottom: 1px solid rgba(0, 40, 100, 0.12);
@@ -11285,9 +12303,12 @@ Loader
   right: 0;
   bottom: 0;
   background: rgba(70, 127, 207, 0.8);
+  display: -webkit-box;
   display: flex;
   color: #fff;
+  -webkit-box-align: center;
   align-items: center;
+  -webkit-box-pack: center;
   justify-content: center;
   font-size: 1.25rem;
   opacity: 0;
@@ -11397,8 +12418,11 @@ Icon input
   bottom: 0;
   left: 0;
   color: #868e96;
+  display: -webkit-box;
   display: flex;
+  -webkit-box-align: center;
   align-items: center;
+  -webkit-box-pack: center;
   justify-content: center;
   min-width: 2.5rem;
   pointer-events: none;
@@ -11542,6 +12566,15 @@ Icon input
   background-size: 640px 120px;
 }
 
+@-webkit-keyframes status-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: .32;
+  }
+}
+
 @keyframes status-pulse {
   0%, 100% {
     opacity: 1;
@@ -11558,12 +12591,14 @@ Icon input
   display: inline-block;
   background: currentColor;
   border-radius: 50%;
+  -webkit-transform: translateY(-1px);
   transform: translateY(-1px);
   margin-right: .375rem;
   vertical-align: middle;
 }
 
 .status-animated {
+  -webkit-animation: 1s status-pulse infinite ease;
   animation: 1s status-pulse infinite ease;
 }
 
@@ -11607,9 +12642,14 @@ Icon input
   margin-left: auto;
   margin-right: auto;
   bottom: 0;
+  display: -webkit-box;
   display: flex;
+  -webkit-box-pack: center;
   justify-content: center;
+  -webkit-box-align: center;
   align-items: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
   flex-direction: column;
   line-height: 1;
 }
@@ -11688,8 +12728,12 @@ a.chip:hover {
   margin: 0;
   padding: 0;
   list-style-type: none;
+  display: -webkit-box;
   display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
   flex-direction: column;
+  -webkit-box-pack: end;
   justify-content: flex-end;
   min-height: 100%;
 }
@@ -11698,7 +12742,10 @@ a.chip:hover {
   padding: 0;
   text-align: right;
   position: relative;
+  display: -webkit-box;
   display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: reverse;
   flex-direction: row-reverse;
 }
 
@@ -11743,6 +12790,8 @@ a.chip:hover {
 }
 
 .chat-line-friend {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
   flex-direction: row;
 }
 
@@ -12098,12 +13147,14 @@ a.chip:hover {
 }
 
 .custom-range {
+  -webkit-box-align: center;
   align-items: center;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background: none;
   cursor: pointer;
+  display: -webkit-box;
   display: flex;
   height: 100%;
   min-height: 2.375rem;
@@ -12215,10 +13266,12 @@ a.chip:hover {
 }
 
 .selectgroup {
+  display: -webkit-inline-box;
   display: inline-flex;
 }
 
 .selectgroup-item {
+  -webkit-box-flex: 1;
   flex-grow: 1;
   position: relative;
 }
@@ -12286,11 +13339,13 @@ a.chip:hover {
 
 .selectgroup-pills {
   flex-wrap: wrap;
+  -webkit-box-align: start;
   align-items: flex-start;
 }
 
 .selectgroup-pills .selectgroup-item {
   margin-right: .5rem;
+  -webkit-box-flex: 0;
   flex-grow: 0;
 }
 
@@ -12304,7 +13359,9 @@ a.chip:hover {
   -ms-user-select: none;
   user-select: none;
   cursor: default;
+  display: -webkit-inline-box;
   display: inline-flex;
+  -webkit-box-align: center;
   align-items: center;
   margin: 0;
 }
@@ -12316,7 +13373,10 @@ a.chip:hover {
 }
 
 .custom-switches-stacked {
+  display: -webkit-box;
   display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
   flex-direction: column;
 }
 
@@ -12525,6 +13585,7 @@ a.chip:hover {
 
 .timeline-item {
   position: relative;
+  display: -webkit-box;
   display: flex;
   padding-left: 2rem;
   margin: .5rem 0;
@@ -14607,6 +15668,7 @@ svg {
 }
 
 .selectize-control.single .selectize-input.dropdown-active:after {
+  -webkit-transform: rotate(180deg);
   transform: rotate(180deg);
 }
 
@@ -14623,8 +15685,11 @@ svg {
   margin: -1px .5rem -1px -4px;
   line-height: 1.25rem;
   float: left;
+  display: -webkit-box;
   display: flex;
+  -webkit-box-align: center;
   align-items: center;
+  -webkit-box-pack: center;
   justify-content: center;
 }
 
diff --git a/assets/plugins/iconfonts/plugin.css b/assets/plugins/iconfonts/plugin.css
index 66a9577a0..61df5f9ba 100644
--- a/assets/plugins/iconfonts/plugin.css
+++ b/assets/plugins/iconfonts/plugin.css
@@ -1472,22 +1472,27 @@
 }
 
 .wi-rotate-90 {
+  -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 
 .wi-rotate-180 {
+  -webkit-transform: rotate(180deg);
   transform: rotate(180deg);
 }
 
 .wi-rotate-270 {
+  -webkit-transform: rotate(270deg);
   transform: rotate(270deg);
 }
 
 .wi-flip-horizontal {
+  -webkit-transform: scale(-1, 1);
   transform: scale(-1, 1);
 }
 
 .wi-flip-vertical {
+  -webkit-transform: scale(1, -1);
   transform: scale(1, -1);
 }
 
diff --git a/assets/plugins/iconfonts/plugin.min.css b/assets/plugins/iconfonts/plugin.min.css
index 66a9577a0..61df5f9ba 100644
--- a/assets/plugins/iconfonts/plugin.min.css
+++ b/assets/plugins/iconfonts/plugin.min.css
@@ -1472,22 +1472,27 @@
 }
 
 .wi-rotate-90 {
+  -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 
 .wi-rotate-180 {
+  -webkit-transform: rotate(180deg);
   transform: rotate(180deg);
 }
 
 .wi-rotate-270 {
+  -webkit-transform: rotate(270deg);
   transform: rotate(270deg);
 }
 
 .wi-flip-horizontal {
+  -webkit-transform: scale(-1, 1);
   transform: scale(-1, 1);
 }
 
 .wi-flip-vertical {
+  -webkit-transform: scale(1, -1);
   transform: scale(1, -1);
 }
 
diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
index c3140bf12..2d891122f 100644
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@@ -70,7 +70,7 @@ $white: #fff;
 $primary: $blue;
 $secondary: $gray-600;
 $success: $green;
-$info: $lime;
+$info: $azure;
 $warning: $yellow;
 $danger: $red;
 $light: $gray-100;
@@ -133,6 +133,8 @@ $kbd-bg: $gray-800;
 
 $pre-color: $gray-900;
 
+// Yiq
+$yiq-contrasted-threshold: 190;
 $yiq-text-dark: $body-color;
 $yiq-text-light: $white;
 
diff --git a/assets/scss/dashboard/_button.scss b/assets/scss/dashboard/_button.scss
index aee350dcc..dcac9522b 100644
--- a/assets/scss/dashboard/_button.scss
+++ b/assets/scss/dashboard/_button.scss
@@ -4,6 +4,17 @@
 	letter-spacing: .03em;
 	font-size: px2rem(13px);
 	min-width: px2rem(38px);
+
+	i {
+		font-size: 1rem;
+		vertical-align: -2px;
+	}
+}
+
+.btn-icon {
+	padding-left: .5rem;
+	padding-right: .5rem;
+	text-align: center;
 }
 
 .btn-secondary {
@@ -15,12 +26,22 @@
 	border-radius: 10rem;
 }
 
+.btn-square {
+	border-radius: 0;
+}
+
 @each $vendor, $color in $social-colors {
 	.btn-#{$vendor} {
 		@include button-variant($color, $color);
 	}
 }
 
+@each $vendor, $color in $colors {
+	.btn-#{$vendor} {
+		@include button-variant($color, $color);
+	}
+}
+
 .btn-option {
 	background: transparent;
 	color: $text-muted;
@@ -44,4 +65,14 @@
 	font-size: px2rem(16px);
 	min-width: px2rem(44px);
 	font-weight: 400;
+}
+
+.btn-list {
+	margin-bottom: -.5rem;
+	font-size: 0;
+
+	.btn {
+		margin-right: .5rem;
+		margin-bottom: .5rem;
+	}
 }
\ No newline at end of file