GNU/Weeb Mailing List <[email protected]>
 help / color / mirror / Atom feed
From: Memet Zx <[email protected]>
To: Ammar Faizi <[email protected]>
Cc: Memet Zx <[email protected]>,
	GNU/Weeb Mailing List <[email protected]>,
	Memet Zx <[email protected]>
Subject: [PATCH gwspamd v2] gwspamd: web: Update frontend for gwspamd
Date: Tue, 18 Apr 2023 23:05:36 +0700	[thread overview]
Message-ID: <[email protected]> (raw)

Integrate halfmoon framework for frontend
Integrate Cropo for photo cropping feature

Link: https://www.gethalfmoon.com/
Link: https://github.com/alijany/cropo/

Signed-off-by: Memet Zx <[email protected]>
---
v2:
	- Remove icons folder, because is not used.
---
 web/api/audit_log.php                 |    41 +
 web/init.php                          |     4 +-
 web/public/assets/css/common.css      |   110 +-
 web/public/assets/css/dashboard.css   |   561 +
 web/public/assets/css/halfmoon.css    | 14408 ++++++++++++++++++++++++
 web/public/assets/js/common.js        |     9 +
 web/public/assets/js/cropo.js         |   173 +
 web/public/assets/js/halfmoon.js      |   511 +
 web/views/components/body.php         |    32 +-
 web/views/components/head.php         |    20 +-
 web/views/components/header.php       |     0
 web/views/components/modal.php        |    34 +
 web/views/components/navbar.php       |    68 +-
 web/views/components/sidebar.php      |    20 +
 web/views/pages/audit_log.php         |   127 +-
 web/views/pages/home.php              |   145 +-
 web/views/pages/login.php             |    31 +-
 web/views/pages/profile.php           |    45 +-
 web/views/pages/settings.php          |    31 +-
 web/views/pages/settings/password.php |    40 +-
 web/views/pages/settings/profile.php  |   125 +-
 21 files changed, 16335 insertions(+), 200 deletions(-)
 create mode 100644 web/public/assets/css/dashboard.css
 create mode 100644 web/public/assets/css/halfmoon.css
 create mode 100644 web/public/assets/js/cropo.js
 create mode 100644 web/public/assets/js/halfmoon.js
 delete mode 100644 web/views/components/header.php
 create mode 100644 web/views/components/modal.php
 create mode 100644 web/views/components/sidebar.php

diff --git a/web/api/audit_log.php b/web/api/audit_log.php
index 98d9094..0bdfcbe 100644
--- a/web/api/audit_log.php
+++ b/web/api/audit_log.php
@@ -26,3 +26,44 @@ function get_audit_log_st(int $user_id, int $limit = 100, int $offset = 0)
 	$st->execute([$user_id]);
 	return $st;
 }
+
+function build_extra_edit_profile($extra)
+{
+	$e = json_decode($extra, true);
+	ob_start();
+?>
+	Username: <?= e($e["username"]); ?><br>
+	First name: <?= e($e["first_name"]); ?><br>
+	Last name: <?= e($e["last_name"]); ?><br>
+	Email: <?= e($e["email"]); ?><br>
+	Photo: <?= e($e["photo_id"] ?? "(unchanged)"); ?><br>
+<?php
+	return ob_get_clean();
+}
+
+function build_extra_ipua($extra)
+{
+	$e = json_decode($extra, true);
+	ob_start();
+?>
+	IP: <?= e($e["ip"]); ?><br>
+	User Agent: <?= e($e["ua"]); ?><br>
+<?php
+	return ob_get_clean();
+}
+
+function build_extra_data(string $action, $extra)
+{
+	switch ($action) {
+		case "edit_profile":
+			return build_extra_edit_profile($extra);
+			break;
+		case "login":
+		case "logout":
+		case "change_password":
+			return build_extra_ipua($extra);
+			break;
+	}
+
+	return "";
+}
diff --git a/web/init.php b/web/init.php
index 5ef64a7..f768363 100644
--- a/web/init.php
+++ b/web/init.php
@@ -5,7 +5,6 @@
  */
 
 if (!defined("__INIT")):
-
 define("__INIT", true);
 
 require __DIR__."/config.php";
@@ -37,7 +36,7 @@ if (!defined("WEB_DONT_START_SESSION")) {
 function load_api(string $name, array $data = [])
 {
 	extract($data);
-	return require API_DIR . "/{$name}.php";
+	return require_once API_DIR . "/{$name}.php";
 }
 
 function e(?string $str): string
@@ -112,6 +111,7 @@ function load_page(string $name, array $data = [])
 	ob_start();
 	require VIEWS_DIR."/pages/{$name}.php";
 	$content = ob_get_clean();
+	$g_active = $name;
 
 	require VIEWS_DIR."/components/body.php";
 }
diff --git a/web/public/assets/css/common.css b/web/public/assets/css/common.css
index e35b3c7..560bd8a 100644
--- a/web/public/assets/css/common.css
+++ b/web/public/assets/css/common.css
@@ -7,7 +7,7 @@
 html {
 	font-family: Arial;
 }
-
+/*
 #navbar {
 	text-align: center;
 }
@@ -28,4 +28,112 @@ a {
 
 a:hover {
 	text-decoration: underline;
+} */
+#login-box {
+	margin: auto;
+	/* height: 300px;
+	width: 400px; */
+	max-width: 400px;
+	border: 1px solid #000;
+	border-radius: 1%;
+	text-align: center;
+	margin-top: 200px;
+}
+.pass{
+	margin: 0 !important;
+}
+
+#photo_canvas {
+	touch-action: none;
+	cursor: move;
+	height: 300px;
+	width: 300px;
+	border: 1px solid;
+	/* width: -webkit-fill-available; */
+}
+input[type="range" i] {
+	appearance: auto;
+	cursor: default;
+	padding: initial;
+	border: 1px solid;
+	margin: 1em;
+	width: -webkit-fill-available;
+}
+#user-photo {
+	height: 200px;
+	width: 200px;
+	border-radius: 50%;
+	object-fit: cover;
+}
+#user-photo:hover{
+	border: 10px solid aqua;
+	border-radius: 10%;
+}
+#user-photo:active{
+	border: 10px solid aqua;
+	border-radius: 10%;
+}
+.user-dropdown{
+	height: 43px !important;
+	width: 46px;
+	border-radius: 50%;
+	object-fit: cover;
+	/* border: 1px solid; */
+	/* box-shadow: 0 .4rem 1.2rem rgba(17, 141, 213, 0.4) !important; */
+}
+.user-dropdown:hover{
+	border: 1px solid;
+	box-shadow: 0 .4rem 1.2rem rgba(17, 141, 213, 0.4) !important;
+}
+.card{
+	box-shadow: 0 .4rem 1.2rem rgba(0,0,0,.4)!important;
+}
+.mt-40{
+	margin-top: 5em !important;
+}
+.activity-feed {
+	padding: 15px;
+	list-style: none;
+}
+
+.activity-feed .feed-item {
+	position: relative;
+	padding-bottom: 20px;
+	padding-left: 30px;
+	border-left: 1px solid;
+}
+
+.activity-feed .feed-item:last-child {
+	border-color: transparent;
+}
+
+.activity-feed .feed-item::after {
+	content: "";
+	display: block;
+	position: absolute;
+	top: 0;
+	left: -6px;
+	width: 10px;
+	height: 10px;
+	border-radius: 6px;
+	background: aquamarine;
+	border: 1px solid;
+}
+
+.activity-feed .feed-item .date {
+	display: block;
+	position: relative;
+	top: -5px;
+	color: #8c96a3;
+	text-transform: uppercase;
+	font-size: 13px;
+}
+
+.activity-feed .feed-item .text {
+	position: relative;
+	top: -3px;
 }
+#photo-btn{
+	background: transparent;
+	border: 0;
+}
\ No newline at end of file
diff --git a/web/public/assets/css/dashboard.css b/web/public/assets/css/dashboard.css
new file mode 100644
index 0000000..fc7f256
--- /dev/null
+++ b/web/public/assets/css/dashboard.css
@@ -0,0 +1,561 @@
+/* Documentation styles. Copyright Halfmoon UI */
+
+/* Font */
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+body.use-roboto-all {
+    font-family: "Roboto", sans-serif;
+}
+body.with-extra-letter-spacing-on-side-navs .sidebar *,
+body.with-extra-letter-spacing-on-side-navs .on-this-page-nav * {
+    letter-spacing: 0.3px;
+}
+
+
+/* Loading section */
+
+#loading-section {
+    width: 100%;
+    height: 100%;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+.loader {
+    display: inline-block;
+    position: relative;
+    width: 8rem;
+    height: 8rem;
+}
+.loader div {
+    /* box-sizing: border-box; */
+    display: block;
+    position: absolute;
+    width: 6.4rem;
+    height: 6.4rem;
+    margin: .8rem;
+    border: .5rem solid transparent;
+    border-radius: 50%;
+    animation: loader-animation 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: #1890ff transparent transparent transparent;
+}
+.loader div:nth-child(1) {
+    animation-delay: -0.45s;
+}
+.loader div:nth-child(2) {
+    animation-delay: -0.3s;
+}
+.loader div:nth-child(3) {
+    animation-delay: -0.15s;
+}
+@keyframes loader-animation {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+body.loading {
+    overflow: hidden;
+}
+body.loading .page-wrapper {
+    visibility: hidden;
+}
+body.loading #loading-section {
+    display: flex;
+}
+
+/* Branding and logo */
+
+.halfmoon-logo-img {
+    width: 10.8rem;
+    margin-right: .5rem;
+}
+
+/* Navbar */
+
+.navbar-menu-btn {
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+@media (max-width: 400px) {
+    .navbar-menu-btn {
+        padding: 0;
+        width: 3.6rem;
+    }
+    .navbar-menu-btn .text {
+        display: none;
+    }
+}
+
+/* Sidebar */
+
+.sidebar .hidden-search-terms {
+    position: absolute;
+    visibility: hidden;
+}
+
+/* Download button */
+
+.btn-download-sm {
+    width: 16rem;
+}
+
+/* Sidenav */
+
+.on-this-page-nav {
+    position: fixed;
+    margin-right: 2rem;
+    z-index: 20;
+    background-color: #ffffff;
+    padding: 0.5rem;
+    border-radius: 0.4rem;
+}
+.dark-mode .on-this-page-nav {
+    background-color: #25282c;
+}
+.on-this-page-nav .title {
+    font-weight: 500;
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+}
+.on-this-page-nav a {
+    text-align: left;
+    display: block;
+    padding: 0.4rem 0 0.4rem 2rem;
+    line-height: 1.4;
+    color: rgba(0, 0, 0, 0.7);
+    border-left: 1px solid rgba(0, 0, 0, 0.15);
+}
+.dark-mode .on-this-page-nav a {
+    color: rgba(255, 255, 255, 0.65);
+    border-color: rgba(255, 255, 255, 0.15);
+}
+.on-this-page-nav a:hover,
+.dark-mode .on-this-page-nav a:hover {
+    color: #1890ff;
+    text-decoration: none;
+}
+@media (max-width: 1200px) {
+    .on-this-page-nav-container {
+        display: none;
+    }
+}
+
+/* Custom footer */
+
+.custom-footer {
+    background-color: rgba(0, 0, 0, 0.025);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-left-color: transparent;
+    border-right-color: transparent;
+    border-bottom-color: transparent;
+}
+.dark-mode .custom-footer {
+    background-color: #111417;
+}
+.custom-footer a.custom-footer-link {
+    color: rgba(0, 0, 0, 0.65);
+}
+.dark-mode .custom-footer a.custom-footer-link {
+    color: rgba(255, 255, 255, 0.65);
+}
+.custom-footer a.custom-footer-link:hover,
+.dark-mode .custom-footer a.custom-footer-link:hover {
+    color: #1890ff;
+    text-decoration: none;
+}
+.custom-footer .btn-scroll-to-top {
+    border-radius: 3rem;
+}
+
+/* Code */
+
+.code-container,
+.dark-mode .code-container {
+    position: relative;
+}
+.code-container .copy-button,
+.dark-mode .code-container .copy-button {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    width: 8rem;
+    height: 2.4rem;
+    line-height: 2.4rem;
+    padding-top: 0;
+    padding-bottom: 0;
+    z-index: 5;
+}
+
+/* Subscriber form container */
+
+.subscriber-form-container {
+    min-height: 100% !important;
+    background-color: rgba(0, 0, 0, 0.025);
+    border-left: 1px solid rgba(0, 0, 0, 0.1);
+    border-top-right-radius: 0.4rem;
+    border-bottom-right-radius: 0.4rem;
+}
+.dark-mode .subscriber-form-container {
+    background-color: #111417;
+}
+@media (max-width: 992px) {
+    .subscriber-form-container {
+        border-left: 0;
+        border-top: 1px solid rgba(0, 0, 0, 0.1);
+        border-top-right-radius: 0;
+        border-bottom-left-radius: 0.4rem;
+        border-bottom-right-radius: 0.4rem;
+    }
+}
+
+/* Docs footer card */
+
+@media (max-width: 576px) {
+    .docs-footer-card {
+        margin-left: 0;
+        margin-right: 0;
+        border-radius: 0;
+        border-right: none;
+        border-left: none;
+    }
+    .docs-footer-card .subscriber-form-container {
+        border-radius: 0;
+    }
+}
+
+/* Utilities */
+
+.mr-2 {
+    margin-right: 0.2rem;
+}
+.font-family-monospace {
+    font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+}
+
+/* Columns */
+
+.col-text-container {
+    width: 6.8rem;
+}
+
+/* Background color box */
+
+.bg-color-box {
+    border: 1px solid transparent;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 0.4rem;
+}
+body:not(.dark-mode) .bg-color-box.bg-white,
+body:not(.dark-mode) .bg-color-box.bg-dark-light-dm,
+body:not(.dark-mode) .bg-color-box.bg-dark-dm,
+body:not(.dark-mode) .bg-color-box.bg-very-dark-dm,
+body:not(.dark-mode) .bg-color-box.bg-transparent {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .bg-color-box.bg-dark,
+.dark-mode .bg-color-box.bg-dark-dm,
+.dark-mode .bg-color-box.bg-transparent {
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+/* Fake window */
+
+.fake-window .fake-window-top-row {
+    padding: 1rem;
+    background-color: #ecf0f1;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    border-top-left-radius: 0.4rem;
+    border-top-right-radius: 0.4rem;
+}
+.dark-mode .fake-window .fake-window-top-row {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+.fake-button {
+    display: inline-block;
+    width: 1.6rem;
+    height: 1.6rem;
+    border-radius: 50%;
+    margin-top: 0.5rem;
+    margin-right: 0.5rem;
+}
+.fake-button:after {
+    content: '\200b';
+}
+.fake-content {
+    height: 1.4rem;
+    background-color: #ecf0f1;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    margin-bottom: 1rem;
+    border-radius: 0.2rem;
+}
+.dark-mode .fake-content {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.025);
+}
+.fake-content:after {
+    content: '\200b';
+}
+.fake-content:last-child {
+    margin-bottom: 0;
+}
+
+/* Container box */
+
+.container-box {
+    /* box-sizing: border-box; */
+    background-color: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    /*outline: 1px solid rgba(0, 0, 0, 0.2);*/
+    padding: 1rem 0;
+}
+.dark-mode .container-box {
+    background-color: #191c20;
+    border-color: rgba(255, 255, 255, 0.15);
+    outline-color: rgba(255, 255, 255, 0.15);
+}
+.container-box.no-outline {
+    outline: none;
+}
+.row-with-bg {
+    background-color: #dadfe1;
+    /*outline: 1px solid #dadfe1;*/
+}
+.dark-mode .row-with-bg {
+    background-color: #111417;
+    outline-color: #111417;
+}
+
+/* Dropdown aligment button */
+
+.btn-dropdown-alignment {
+    width: 8.4rem;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+/* Fake sidebar */
+
+.fake-sidebar {
+    width: 26rem;
+    height: 100%;
+    background-color: #ffffff;
+    border: 1px solid transparent; /* Removes margin collapse */
+    border-right-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .fake-sidebar {
+    background-color: #191c20;
+    border-right-color: rgba(0, 0, 0, 0.2);
+}
+
+/* Card full width on extra small screens */
+
+@media (max-width: 576px) {
+    .card.card-w-full-xs {
+        margin: 0;
+        border-radius: 0;
+        border-right: none;
+        border-left: none;
+    }
+    .card.card-w-full-xs .fake-window,
+    .card.card-w-full-xs .fake-window-top-row {
+        border-radius: 0;
+    }
+}
+
+/* Docs cards container */
+
+.docs-cards-container {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-bottom-color: transparent;
+    border-top-left-radius: 0.4rem;
+    border-top-right-radius: 0.4rem;
+}
+@media (max-width: 576px) {
+    .card.card-w-full-xs .docs-cards-container {
+        border-radius: 0;
+        border-right: none;
+        border-left: none;
+    }
+}
+
+/* Docs navbar/sidebar container */
+
+.docs-navbar-sidebar-container {
+    border: 1px solid transparent;
+    border-top-left-radius: 0.4rem;
+    border-top-right-radius: 0.4rem;
+}
+.dark-mode .docs-navbar-sidebar-container {
+    border-color: rgba(255, 255, 255, 0.1);
+}
+.docs-navbar-sidebar-container .small-device-window {
+    border-left: 1px solid rgba(0, 0, 0, 0.2);
+    border-right: 1px solid rgba(0, 0, 0, 0.2);
+}
+.dark-mode .docs-navbar-sidebar-container .small-device-window {
+    border-color: rgba(255, 255, 255, 0.1);
+}
+@media (max-width: 576px) {
+    .card.card-w-full-xs .docs-navbar-sidebar-container {
+        border-radius: 0;
+        border-right: none;
+        border-left: none;
+    }
+    .docs-navbar-sidebar-container .small-device-window {
+        border-left: none;
+        border-right: none;
+    }
+}
+
+/* iFrame message */
+
+.iframe-message {
+    padding: 1rem 2rem;
+    background-color: #ecf0f1;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+.dark-mode .iframe-message {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+/* Code header */
+
+.code-header,
+.starter-template-output-header {
+    padding: 1rem 2rem;
+    background-color: #ecf0f1;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+.dark-mode .code-header,
+.dark-mode .starter-template-output-header {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+/* Show/hide based on IE */
+
+.d-block-only-in-ie {
+    display: none;
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    .d-none-only-in-ie {
+        display: none;
+    }
+    .d-block-only-in-ie {
+        display: block;
+    }
+}
+
+
+/* Docs subsection */
+
+.docs-subsection {
+    padding-left: 2rem;
+    border-left: 1px solid rgba(0, 0, 0, 0.1);
+}
+.dark-mode .docs-subsection {
+    border-color: rgba(255, 255, 255, 0.1);
+}
+
+/* Pseudo-variables. The following styles need to be changed for different themes. */
+
+.loader div {
+    border-color: #1890ff transparent transparent transparent;
+}
+.on-this-page-nav {
+    background-color: #ffffff;
+}
+.dark-mode .on-this-page-nav {
+    background-color: #25282c;
+}
+.on-this-page-nav a:hover,
+.dark-mode .on-this-page-nav a:hover {
+    color: #1890ff;
+}
+.custom-footer {
+    background-color: rgba(0, 0, 0, 0.025);
+    border-top-color: rgba(0, 0, 0, 0.1);
+}
+.dark-mode .custom-footer {
+    background-color: #111417;
+    border-top-color: rgba(0, 0, 0, 0.1);
+}
+.custom-footer a.custom-footer-link:hover,
+.dark-mode .custom-footer a.custom-footer-link:hover {
+    color: #1890ff;
+}
+.subscriber-form-container {
+    background-color: rgba(0, 0, 0, 0.025);
+}
+.dark-mode .subscriber-form-container {
+    background-color: #111417;
+}
+.hljs {
+    background-color: rgba(0, 0, 0, 0.025);
+    border-color: rgba(0, 0, 0, 0.1);
+}
+.dark-mode .hljs {
+    background-color: #111417;
+    border-color: rgba(0, 0, 0, 0.1);
+}
+@media (min-width: 769px) {
+    .with-custom-css-scrollbars .hljs {
+        scrollbar-color: rgba(0, 0, 0, 0.25) #f7f7f7;
+    }
+    .dark-mode.with-custom-css-scrollbars .hljs {
+        scrollbar-color: rgba(255, 255, 255, 0.25) #111417;
+    }
+}
+.container-box {
+    background-color: #ffffff;
+}
+.dark-mode .container-box {
+    background-color: #191c20;
+}
+.row-with-bg {
+    background-color: #dadfe1;
+    outline-color: #dadfe1;
+}
+.dark-mode .row-with-bg {
+    background-color: #111417;
+    outline-color: #111417;
+}
+body:not(.dark-mode) .bg-color-box.bg-white,
+body:not(.dark-mode) .bg-color-box.bg-dark-light-dm,
+body:not(.dark-mode) .bg-color-box.bg-dark-dm,
+body:not(.dark-mode) .bg-color-box.bg-very-dark-dm,
+body:not(.dark-mode) .bg-color-box.bg-transparent {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .bg-color-box.bg-dark,
+.dark-mode .bg-color-box.bg-dark-dm,
+.dark-mode .bg-color-box.bg-transparent {
+    border-right-color: rgba(255, 255, 255, 0.15);
+}
+.code-card {
+    border-color: rgba(0, 0, 0, 0.1);
+}
+.dark-mode .code-card .hljs {
+    background-color: #191c20;
+}
+@media (min-width: 769px) {
+    .dark-mode .code-card .hljs {
+        scrollbar-color: rgba(255, 255, 255, 0.25) #191c20;
+    }
+}
+.dark-mode .sponsor-section-card {
+    background-color: #1e2125;
+}
+.sponsor-section-card-scroll-block {
+    border-bottom-right-radius: 0.4rem;
+    background-color: rgba(255, 255, 255, 0.975);
+}
+.dark-mode .sponsor-section-card-scroll-block {
+    background-color: rgba(30, 33, 37, 0.95);
+}
diff --git a/web/public/assets/css/halfmoon.css b/web/public/assets/css/halfmoon.css
new file mode 100644
index 0000000..8cad06f
--- /dev/null
+++ b/web/public/assets/css/halfmoon.css
@@ -0,0 +1,14408 @@
+/*
+-------------------------------------------------------------------------------
+Halfmoon CSS
+Version: 1.1.1
+https://www.gethalfmoon.com
+Copyright, Halfmoon UI
+Licensed under MIT (https://www.gethalfmoon.com/license)
+-------------------------------------------------------------------------------
+The above notice must be included in its entirety when this file is used.
+
+Table of contents:
+    1.  Base styles --------------------------------------------------- [hm-01]
+    2.  Typography ---------------------------------------------------- [hm-02]
+    3.  Scrollbars ---------------------------------------------------- [hm-03]
+    4.  Layout -------------------------------------------------------- [hm-04]
+    5.  Page building (containers, columns, content and card) --------- [hm-05]
+    6.  Links --------------------------------------------------------- [hm-06]
+    7.  Buttons ------------------------------------------------------- [hm-07]
+    8.  List ---------------------------------------------------------- [hm-08]
+    9.  Code ---------------------------------------------------------- [hm-09]
+    10. Tables -------------------------------------------------------- [hm-10]
+    11. Form elements ------------------------------------------------- [hm-11]
+    12. Dropdown ------------------------------------------------------ [hm-12]
+    13. Modal --------------------------------------------------------- [hm-13]
+    14. Alerts -------------------------------------------------------- [hm-14]
+    15. Navbar content ------------------------------------------------ [hm-15]
+    16. Sidebar content ----------------------------------------------- [hm-16]
+    17. Pagination ---------------------------------------------------- [hm-17]
+    18. Breadcrumb ---------------------------------------------------- [hm-18]
+    19. Tooltips ------------------------------------------------------ [hm-19]
+    20. Badges -------------------------------------------------------- [hm-20]
+    21. Image --------------------------------------------------------- [hm-21]
+    22. Button group -------------------------------------------------- [hm-22]
+    23. Collapse ------------------------------------------------------ [hm-23]
+    24. Progress ------------------------------------------------------ [hm-24]
+    25. Spacing utilities --------------------------------------------- [hm-25]
+    26. Display utilities --------------------------------------------- [hm-26]
+    27. Sizing utilities ---------------------------------------------- [hm-27]
+    28. Flex utilities ------------------------------------------------ [hm-28]
+    29. Position utilities -------------------------------------------- [hm-29]
+    30. Other utilities ----------------------------------------------- [hm-30]
+
+Credits:
+    Bootstrap and its contributors for class names and inspiration. Moreover, 
+    the containers, grid system and the flex utilities found in Halfmoon CSS 
+    are almost direct copies of the ones found in Bootstrap. Therefore, the 
+    following copyright notice is provided:
+    ---------------------------------------------------------------------------
+    Bootstrap (https://getbootstrap.com/)
+    Copyright 2011-2020 The Bootstrap Authors
+    Copyright 2011-2020 Twitter, Inc.
+    Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+    ---------------------------------------------------------------------------
+*/
+
+/*
+-------------------------------------------------------------------------------
+0.  Normalize CSS
+
+Notes:
+    ~ Normalize.css makes browsers render all elements more consistently and 
+    in line with modern standards. It precisely targets only the styles that 
+    need normalizing.
+    ~ normalize.css | MIT License | github.com/necolas/normalize.css
+    ~ This is a slighly customized version of normalize.css 8.0.1, 
+    specifically for dealing with Halfmoon CSS.
+    ~ Comments have been removed for the sake of compactness.
+-------------------------------------------------------------------------------
+*/
+
+html {
+    line-height: 1.15;
+    -webkit-text-size-adjust: 100%;
+}
+body {
+    margin: 0;
+}
+main {
+    display: block;
+}
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+hr {
+    box-sizing: content-box;
+    height: 0;
+    overflow: visible;
+}
+pre {
+    font-family: monospace, monospace;
+    font-size: 1em;
+}
+a {
+    background-color: transparent;
+}
+abbr[title] {
+    border-bottom: none;
+    text-decoration: underline;
+    text-decoration: underline dotted;
+}
+b,
+strong {
+    font-weight: bolder;
+}
+code,
+kbd,
+samp {
+    font-family: monospace, monospace;
+    font-size: 1em;
+}
+small {
+    font-size: 80%;
+}
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+sub {
+    bottom: -0.25em;
+}
+sup {
+    top: -0.5em;
+}
+img {
+    border-style: none;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+    font-family: inherit;
+    font-size: 100%;
+    line-height: 1.15;
+    margin: 0;
+}
+button,
+input {
+    overflow: visible;
+}
+button,
+select {
+    text-transform: none;
+}
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+    -webkit-appearance: button;
+}
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+}
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+}
+fieldset {
+    padding: 0.35em 0.75em 0.625em;
+}
+legend {
+    box-sizing: border-box;
+    color: inherit;
+    display: table;
+    max-width: 100%;
+    padding: 0;
+    white-space: normal;
+}
+progress {
+    vertical-align: baseline;
+}
+textarea {
+    overflow: auto;
+}
+[type="checkbox"],
+[type="radio"] {
+    box-sizing: border-box;
+    padding: 0;
+}
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+    height: auto;
+}
+[type="search"] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
+}
+[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    font: inherit;
+}
+details {
+    display: block;
+}
+summary {
+    display: list-item;
+}
+template {
+    display: none;
+}
+[hidden] {
+    display: none;
+}
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+td,
+th {
+    padding: 0;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+1.  Base styles [hm-01]
+-------------------------------------------------------------------------------
+*/
+
+html {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+*, *:before, *:after {
+    -webkit-box-sizing: inherit;
+    -moz-box-sizing: inherit;
+    box-sizing: inherit;
+}
+
+/* HTML font size and scaling */
+
+html {
+    font-size: 62.5%;
+}
+@media (min-width: 1600px) {
+    html {
+        font-size: 75%;
+    }
+}
+@media (min-width: 1920px) {
+    html {
+        font-size: 87.5%;
+    }
+}
+
+/* Auto-scaling disabled */
+
+@media (min-width: 1600px) {
+    html.auto-scaling-disabled {
+        font-size: 62.5%;
+    }
+}
+@media (min-width: 1920px) {
+    html.auto-scaling-disabled {
+        font-size: 62.5%;
+    }
+}
+
+/* DOM body */
+
+body {
+    background-color: #ffffff;
+    background-image: none;
+    color: rgba(0, 0, 0, 0.85);
+    font-size: 1.4rem;
+    line-height: 1.5;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-weight: 400;
+}
+.dark-mode {
+    background-color: #25282c;
+    background-image: none;
+    color: rgba(255, 255, 255, 0.8);
+    /*
+    Anti-aliasing works best on light fonts on dark backgrounds. Otherwise, 
+    there is a loss of readability. 
+    */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+/* Horizontal rule */
+
+hr {
+    height: 1px;
+    color: rgba(0, 0, 0, 0.05);
+    background-color: rgba(0, 0, 0, 0.05);
+    border: none;
+}
+.dark-mode hr {
+    color: rgba(255, 255, 255, 0.05);
+    background-color: rgba(255, 255, 255, 0.05);
+}
+
+/*
+-------------------------------------------------------------------------------
+2.  Typography [hm-02]
+-------------------------------------------------------------------------------
+*/
+
+h1 {
+    margin-top: 1rem;
+    margin-bottom: 2rem;
+    font-weight: 400;
+}
+
+h2 {
+    margin-top: 1rem;
+    margin-bottom: 2rem;
+    font-weight: 400;
+}
+
+h3 {
+    margin-top: 1rem;
+    margin-bottom: 2rem;
+    font-weight: 400;
+}
+
+h4 {
+    margin-top: 1rem;
+    margin-bottom: 2rem;
+    font-weight: 400;
+}
+
+h5 {
+    margin-top: 1rem;
+    margin-bottom: 2rem;
+    font-weight: 400;
+}
+
+h6 {
+    margin-top: 1rem;
+    margin-bottom: 2rem;
+    font-weight: 400;
+}
+h1 {
+    font-size: 4rem;
+    line-height: 1.3;
+}
+h2 {
+    font-size: 3.6rem;
+    line-height: 1.35;
+}
+h3 {
+    font-size: 3rem;
+    line-height: 1.4;
+}
+h4 {
+    font-size: 2.4rem;
+    line-height: 1.45;
+}
+h5 {
+    font-size: 1.8rem;
+}
+h6 {
+    font-size: 1.5rem;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+3.  Scrollbars [hm-03]
+
+Notes:
+    ~ Any scrollbars on the body itself is not affected. This is because the 
+    page-wrapper is always expected, as the entire framework is built around 
+    it.
+    ~ Only styled on screens larger than 768px, because mobiles and tablets 
+    have disappearing scrollbars, which look great most of the time.
+    ~ The webkit scrollbars work on webkit based browsers, such as Chrome, 
+    Safari, Brave, and the new Microsoft Edge.
+    ~ The custom CSS scrollbars work only on Firefox as of 2020. It is a very 
+    new specification.
+-------------------------------------------------------------------------------
+*/
+
+@media (min-width: 769px) {
+    /* Base scrollbar */
+
+    .with-custom-webkit-scrollbars *::-webkit-scrollbar {
+        width: 1.4rem;
+        height: 1.4rem;
+        background-color: transparent;
+    }
+    .dark-mode.with-custom-webkit-scrollbars *::-webkit-scrollbar {
+        background-color: transparent;
+    }
+    .with-custom-webkit-scrollbars *::-webkit-scrollbar-track:vertical {
+        border-left: 1px solid rgba(0, 0, 0, 0.1);
+    }
+    .with-custom-webkit-scrollbars *::-webkit-scrollbar-track:horizontal {
+        border-top: 1px solid rgba(0, 0, 0, 0.1);
+    }
+    .dark-mode.with-custom-webkit-scrollbars *::-webkit-scrollbar-track {
+        border-color: rgba(255, 255, 255, 0.05);
+    }
+    .with-custom-webkit-scrollbars *::-webkit-scrollbar-thumb {
+        min-width: 3rem;
+        min-height: 3rem;
+        background-color: rgba(0, 0, 0, 0.25);
+        border: 0.4rem solid transparent;
+        -moz-background-clip: content;     /* Firefox 3.6 */
+        -webkit-background-clip: content;  /* Safari 4? Chrome 6? */
+        background-clip: content-box;
+        border-radius: 1rem;
+    }
+    .with-custom-webkit-scrollbars *::-webkit-scrollbar-thumb:hover {
+        background-color: rgba(0, 0, 0, 0.4);
+        border-color: transparent;
+    }
+    .dark-mode.with-custom-webkit-scrollbars *::-webkit-scrollbar-thumb {
+        background-color: rgba(255, 255, 255, 0.25);
+        border-color: transparent;
+    }
+    .dark-mode.with-custom-webkit-scrollbars *::-webkit-scrollbar-thumb:hover {
+        background-color: rgba(255, 255, 255, 0.4);
+        border-color: transparent;
+    }
+    .with-custom-webkit-scrollbars *::-webkit-scrollbar-corner {
+        background-color: transparent;
+        border-left: 1px solid rgba(0, 0, 0, 0.1);
+        border-top: 1px solid rgba(0, 0, 0, 0.1);
+    }
+    .dark-mode.with-custom-webkit-scrollbars *::-webkit-scrollbar-corner {
+        background-color: transparent;
+        border-color: rgba(255, 255, 255, 0.05);
+    }
+
+    .with-custom-css-scrollbars * {
+        scrollbar-width: thin;
+        scrollbar-color: rgba(0, 0, 0, 0.25) #ffffff;
+    }
+    .dark-mode.with-custom-css-scrollbars * {
+        scrollbar-color: rgba(255, 255, 255, 0.25) #25282c;
+    }
+
+    /* Sidebar scrollbar */
+
+    .with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar {
+        width: 1.4rem;
+        height: 1.4rem;
+        background-color: transparent;
+    }
+    .dark-mode.with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar {
+        background-color: transparent;
+    }
+    .with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-track {
+        border-width: 1px;
+        border-color: rgba(0, 0, 0, 0.1);
+    }
+    .dark-mode.with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-track {
+        border-color: rgba(255, 255, 255, 0.05);
+    }
+    .with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-thumb {
+        background-color: rgba(0, 0, 0, 0.25);
+        border-width: 0.4rem;
+        border-color: transparent;
+        border-radius: 1rem;
+    }
+    .with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-thumb:hover {
+        background-color: rgba(0, 0, 0, 0.4);
+        border-color: transparent;
+    }
+    .dark-mode.with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-thumb {
+        background-color: rgba(255, 255, 255, 0.25);
+        border-color: transparent;
+    }
+    .dark-mode.with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-thumb:hover {
+        background-color: rgba(255, 255, 255, 0.4);
+        border-color: transparent;
+    }
+    .with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-corner {
+        background-color: transparent;
+        border-width: 1px;
+        border-color: rgba(0, 0, 0, 0.1);
+    }
+    .dark-mode.with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-corner {
+        background-color: transparent;
+        border-color: rgba(255, 255, 255, 0.05);
+    }
+
+    .with-custom-css-scrollbars .sidebar {
+        scrollbar-width: thin;
+        scrollbar-color: rgba(0, 0, 0, 0.25) #ffffff;
+    }
+    .dark-mode.with-custom-css-scrollbars .sidebar {
+        scrollbar-color: rgba(255, 255, 255, 0.25) #191c20;
+    }
+
+    /* Modal scrollbar */
+    
+    .with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar {
+        width: 1.4rem;
+        height: 1.4rem;
+        background-color: transparent;
+    }
+    .dark-mode.with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar {
+        background-color: transparent;
+    }
+    .with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-track {
+        border-width: 1px;
+        border-color: rgba(255, 255, 255, 0.05);
+    }
+    .dark-mode.with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-track {
+        border-color: rgba(255, 255, 255, 0.05);
+    }
+    .with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-thumb {
+        background-color: rgba(255, 255, 255, 0.25);
+        border-width: 0.4rem;
+        border-color: transparent;
+        border-radius: 1rem;
+    }
+    .with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-thumb:hover {
+        background-color: rgba(255, 255, 255, 0.4);
+        border-color: transparent;
+    }
+    .dark-mode.with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-thumb {
+        background-color: rgba(255, 255, 255, 0.25);
+        border-color: transparent;
+    }
+    .dark-mode.with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-thumb:hover {
+        background-color: rgba(255, 255, 255, 0.4);
+        border-color: transparent;
+    }
+    .with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-corner {
+        background-color: transparent;
+        border-width: 1px;
+        border-color: rgba(0, 0, 0, 0.1);
+    }
+    .dark-mode.with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-corner {
+        background-color: transparent;
+        border-color: rgba(255, 255, 255, 0.05);
+    }
+
+    .with-custom-css-scrollbars .modal-dialog {
+        scrollbar-width: thin;
+        scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
+    }
+    .dark-mode.with-custom-css-scrollbars .modal-dialog {
+        scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
+    }
+
+    /* Full screen modal scrollbar */
+    
+    .with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar {
+        width: 1.4rem;
+        height: 1.4rem;
+        background-color: #ffffff;
+    }
+    .dark-mode.with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar {
+        background-color: #191c20;
+    }
+    .with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-track {
+        border-width: 1px;
+        border-color: rgba(0, 0, 0, 0.1);
+    }
+    .dark-mode.with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-track {
+        border-color: rgba(255, 255, 255, 0.05);
+    }
+    .with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-thumb {
+        background-color: rgba(0, 0, 0, 0.25);
+        border-width: 0.4rem;
+        border-color: transparent;
+        border-radius: 1rem;
+    }
+    .with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-thumb:hover {
+        background-color: rgba(0, 0, 0, 0.4);
+        border-color: transparent;
+    }
+    .dark-mode.with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-thumb {
+        background-color: rgba(255, 255, 255, 0.25);
+        border-color: transparent;
+    }
+    .dark-mode.with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-thumb:hover {
+        background-color: rgba(255, 255, 255, 0.4);
+        border-color: transparent;
+    }
+    .with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-corner {
+        background-color: #ffffff;
+        border-width: 1px;
+        border-color: rgba(0, 0, 0, 0.1);
+    }
+    .dark-mode.with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-corner {
+        background-color: #191c20;
+        border-color: rgba(255, 255, 255, 0.05);
+    }
+
+    .with-custom-css-scrollbars .modal-full .modal-dialog {
+        scrollbar-width: thin;
+        scrollbar-color: rgba(0, 0, 0, 0.25) #ffffff;
+    }
+    .dark-mode.with-custom-css-scrollbars .modal-full .modal-dialog {
+        scrollbar-color: rgba(255, 255, 255, 0.25) #191c20;
+    }
+
+    /* Card scrollbar */
+
+    .with-custom-webkit-scrollbars .card::-webkit-scrollbar {
+        width: 1.4rem;
+        height: 1.4rem;
+        background-color: transparent;
+    }
+    .dark-mode.with-custom-webkit-scrollbars .card::-webkit-scrollbar {
+        background-color: transparent;
+    }
+    .with-custom-webkit-scrollbars .card::-webkit-scrollbar-track {
+        border-width: 1px;
+        border-color: rgba(0, 0, 0, 0.1);
+    }
+    .dark-mode.with-custom-webkit-scrollbars .card::-webkit-scrollbar-track {
+        border-color: rgba(255, 255, 255, 0.05);
+    }
+    .with-custom-webkit-scrollbars .card::-webkit-scrollbar-thumb {
+        background-color: rgba(0, 0, 0, 0.25);
+        border-width: 0.4rem;
+        border-color: transparent;
+        border-radius: 1rem;
+    }
+    .with-custom-webkit-scrollbars .card::-webkit-scrollbar-thumb:hover {
+        background-color: rgba(0, 0, 0, 0.4);
+        border-color: transparent;
+    }
+    .dark-mode.with-custom-webkit-scrollbars .card::-webkit-scrollbar-thumb {
+        background-color: rgba(255, 255, 255, 0.25);
+        border-color: transparent;
+    }
+    .dark-mode.with-custom-webkit-scrollbars .card::-webkit-scrollbar-thumb:hover {
+        background-color: rgba(255, 255, 255, 0.4);
+        border-color: transparent;
+    }
+    .with-custom-webkit-scrollbars .card::-webkit-scrollbar-corner {
+        background-color: transparent;
+        border-width: 1px;
+        border-color: rgba(0, 0, 0, 0.1);
+    }
+    .dark-mode.with-custom-webkit-scrollbars .card::-webkit-scrollbar-corner {
+        background-color: transparent;
+        border-color: rgba(255, 255, 255, 0.05);
+    }
+
+    .with-custom-css-scrollbars .card {
+        scrollbar-width: thin;
+        scrollbar-color: rgba(0, 0, 0, 0.25) #ffffff;
+    }
+    .dark-mode.with-custom-css-scrollbars .card {
+        scrollbar-color: rgba(255, 255, 255, 0.25) #191c20;
+    }
+
+    /* CSS scrollbar with transparent track (utility class) */
+
+    .with-custom-css-scrollbars .css-scrollbar-transparent-track {
+        scrollbar-width: thin !important;
+        scrollbar-color: rgba(0, 0, 0, 0.25) transparent !important;
+    }
+    .dark-mode.with-custom-css-scrollbars .css-scrollbar-transparent-track {
+        scrollbar-color: rgba(255, 255, 255, 0.25) transparent !important;
+    }
+}
+
+
+/*
+-------------------------------------------------------------------------------
+4.  Layout [hm-04]
+
+Notes:
+    ~ The following section contains the position, width, height, and bg color 
+    related styles of the page-wrapper, sticky-alerts, navbars, sidebar, and 
+    content-wrapper. These are grouped together because reading them all at 
+    once in serial makes it quite easy to understand how pages are structured.
+    ~ The styles of the children of the above elements can be found in their 
+    own sections of this stylesheet. These sections are:
+        ~ 14. Alerts
+        ~ 15. Navbar content
+        ~ 16. Sidebar content
+    ~ The page-wrapper can have additional helper classes which automatically 
+    fixes the positions and the sizes of the children elements. For example, 
+    .page-wrapper.with-navbar will automatically push the content-wrapper down 
+    by an amount which is equal to the height of the navbar, in order to make 
+    space for the navbar.
+-------------------------------------------------------------------------------
+*/
+
+html,
+body {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    left: 0;
+    top: 0;
+}
+
+/* Page wrapper */
+
+.page-wrapper {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+}
+
+/* Sticky alerts */
+
+.sticky-alerts {
+    position: fixed;
+    top: 0;
+    right: 2.4rem;
+    z-index: 100; /* Can be used on top of modals */
+}
+
+/* Navbar */
+
+.navbar {
+    position: relative;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -ms-flex-align: center;
+    align-items: center;
+    -ms-flex-flow: row nowrap;
+    flex-flow: row nowrap;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+    width: 100%;
+    height: 5rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    background-color: #ffffff;
+    background-image: none;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.dark-mode .navbar {
+    background-color: #111417;
+    background-image: none;
+    border-color: rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.navbar.navbar-fixed-bottom {
+    height: 5rem;
+    border-bottom: none;
+    border-top: 1px solid rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.dark-mode .navbar.navbar-fixed-bottom {
+    border-color: rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.navbar.navbar-static-bottom {
+    border-bottom: none;
+    border-top: 1px solid rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.dark-mode .navbar.navbar-static-bottom {
+    border-color: rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.page-wrapper > .navbar {
+    position: fixed; 
+    left: 0;
+    z-index: 40;
+    display: none;
+}
+.page-wrapper > .navbar:not(.navbar-fixed-bottom) {
+    top: 0;
+}
+.page-wrapper.with-navbar > .navbar:not(.navbar-fixed-bottom) {
+    display: -ms-flexbox;
+    display: flex;
+}
+.page-wrapper > .navbar.navbar-fixed-bottom {
+    bottom: 0;
+}
+.page-wrapper.with-navbar-fixed-bottom > .navbar.navbar-fixed-bottom {
+    display: -ms-flexbox;
+    display: flex;
+}
+
+/* Sidebar */
+
+.sidebar {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 26rem;
+    max-width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    z-index: 20;
+    background-color: #ffffff;
+    background-image: none;
+    border-right: 1px solid rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.dark-mode .sidebar {
+    background-color: #191c20;
+    background-image: none;
+    border-color: rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.page-wrapper > .sidebar {
+    display: none;
+}
+.page-wrapper.with-sidebar > .sidebar {
+    display: block;
+}
+
+/* Content wrapper */
+
+.content-wrapper {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    overflow: auto;
+}
+
+/* Page wrapper helper classes */
+
+/* With navbar */
+
+.page-wrapper.with-navbar > .sticky-alerts {
+    top: 5rem;
+}
+.page-wrapper.with-navbar > .content-wrapper {
+    top: 5rem;
+    height: calc(100% - 5rem);
+}
+.page-wrapper.with-navbar > .sidebar {
+    top: 5rem;
+    height: calc(100% - 5rem);
+}
+
+/* With sidebar */
+
+.page-wrapper.with-sidebar > .content-wrapper {
+    left: 26rem;
+    width: calc(100% - 26rem);
+}
+@media (max-width: 768px) {
+    .page-wrapper.with-sidebar > .content-wrapper {
+        width: 100%;
+    }
+}
+
+/* Hidden sidebar */
+
+.page-wrapper.with-sidebar[data-sidebar-hidden] > .sidebar {
+    left: -100%;
+}
+.page-wrapper.with-sidebar[data-sidebar-hidden] > .content-wrapper {
+    width: 100%;
+    left: 0;
+}
+
+/* With navbar fixed to bottom */
+
+.page-wrapper.with-navbar-fixed-bottom > .content-wrapper {
+    bottom: 5rem;
+    height: calc(100% - 5rem);
+}
+
+.page-wrapper.with-navbar-fixed-bottom > .sidebar {
+    bottom: 5rem;
+    height: calc(100% - 5rem);
+}
+
+/* With navbar and navbar fixed to bottom */
+
+.page-wrapper.with-navbar.with-navbar-fixed-bottom > .content-wrapper {
+    top: 5rem;
+    bottom: 5rem;
+    height: calc(100% - 5rem - 5rem);
+}
+
+.page-wrapper.with-navbar.with-navbar-fixed-bottom > .sidebar {
+    top: 5rem;
+    bottom: 5rem;
+    height: calc(100% - 5rem - 5rem);
+}
+
+/* Full height sidebar */
+
+.page-wrapper.with-sidebar[data-sidebar-type~="full-height"] > .sidebar {
+    height: 100%;
+    top: 0;
+}
+.page-wrapper.with-sidebar[data-sidebar-type~="full-height"] > .navbar:not(.navbar-fixed-bottom) {
+    left: 26rem;
+    width: calc(100% - 26rem);
+}
+.page-wrapper.with-sidebar[data-sidebar-type~="full-height"] > .navbar.navbar-fixed-bottom {
+    left: 26rem;
+    width: calc(100% - 26rem);
+}
+@media (max-width: 768px) {
+    .page-wrapper.with-sidebar[data-sidebar-type~="full-height"] > .navbar:not(.navbar-fixed-bottom),
+    .page-wrapper.with-sidebar[data-sidebar-type~="full-height"] > .navbar.navbar-fixed-bottom {
+        width: 100%;
+    }
+}
+.page-wrapper.with-sidebar[data-sidebar-type~="full-height"][data-sidebar-hidden] > .navbar:not(.navbar-fixed-bottom),
+.page-wrapper.with-sidebar[data-sidebar-type~="full-height"][data-sidebar-hidden] > .navbar.navbar-fixed-bottom {
+    left: 0;
+    width: 100%;
+}
+
+/* Overlayed sidebar */
+
+.page-wrapper.with-sidebar[data-sidebar-type~="overlayed-all"] > .navbar:not(.navbar-fixed-bottom),
+.page-wrapper.with-sidebar[data-sidebar-type~="overlayed-all"] > .content-wrapper,
+.page-wrapper.with-sidebar[data-sidebar-type~="overlayed-all"] > .navbar.navbar-fixed-bottom {
+    left: 0;
+    width: 100%;
+}
+.page-wrapper.with-sidebar[data-sidebar-type~="overlayed-all"] > .sidebar {
+    height: 100%;
+    top: 0;
+    z-index: 50;
+}
+.page-wrapper.with-sidebar[data-sidebar-type~="overlayed-all"] > .sidebar-overlay {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    z-index: 45;
+    background-color: rgba(0, 0, 0, 0.75);
+}
+.page-wrapper.with-sidebar[data-sidebar-type~="overlayed-all"][data-sidebar-hidden] > .sidebar-overlay {
+    display: none;
+}
+@media (max-width: 768px) {
+    .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-sm-and-down"] > .navbar:not(.navbar-fixed-bottom),
+    .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-sm-and-down"] > .content-wrapper,
+    .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-sm-and-down"] > .navbar.navbar-fixed-bottom {
+        left: 0;
+        width: 100%;
+    }
+    .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-sm-and-down"] > .sidebar {
+        height: 100%;
+        top: 0;
+        z-index: 50;
+    }
+    .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-sm-and-down"] > .sidebar-overlay {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        z-index: 45;
+        background-color: rgba(0, 0, 0, 0.75);
+    }
+    .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-sm-and-down"][data-sidebar-hidden] > .sidebar-overlay {
+        display: none;
+    }
+}
+
+/* With transitions (for sidebar toggles) */
+
+.page-wrapper.with-transitions.with-sidebar > .sidebar {
+    -webkit-transition: left .4s cubic-bezier(.25, .8, .25, 1);
+    transition: left .4s cubic-bezier(.25, .8, .25, 1);
+}
+.page-wrapper.with-transitions.with-sidebar .content-wrapper,
+.page-wrapper.with-transitions.with-sidebar[data-sidebar-type~="full-height"] > .navbar:not(.navbar-fixed-bottom),
+.page-wrapper.with-transitions.with-sidebar[data-sidebar-type~="full-height"] > .navbar.navbar-fixed-bottom {
+    -webkit-transition: width .4s cubic-bezier(.25, .8, .25, 1), left .4s cubic-bezier(.25, .8, .25, 1);
+    transition: width .4s cubic-bezier(.25, .8, .25, 1), left .4s cubic-bezier(.25, .8, .25, 1);
+}
+
+/* Janky scroll fix (for Safari) */
+
+.content-wrapper,
+.sidebar {
+    -webkit-overflow-scrolling: touch;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+5.  Page building (containers, columns, content and card) [hm-05]
+-------------------------------------------------------------------------------
+*/
+
+/* Containers */
+
+.container,
+.container-sm,
+.container-md,
+.container-lg,
+.container-xl,
+.container-fluid {
+    margin-left: auto;
+    margin-right: auto;
+}
+.container-fluid {
+    width: 100%;
+}
+.container {
+    width: 100%;
+}
+.container-sm {
+    width: 100%;
+}
+.container-md {
+    width: 100%;
+}
+.container-lg {
+    width: 100%;
+}
+.container-xl {
+    width: 100%;
+}
+@media (min-width: 577px) {
+    .container {
+        max-width: 54rem;
+    }
+    .container-sm {
+        max-width: 54rem;
+    }
+}
+@media (min-width: 769px) {
+    .container {
+        max-width: 72rem;
+    }
+    .container-sm {
+        max-width: 72rem;
+    }
+    .container-md {
+        max-width: 72rem;
+    }
+}
+@media (min-width: 993px) {
+    .container {
+        max-width: 96rem;
+    }
+    .container-sm {
+        max-width: 96rem;
+    }
+    .container-md {
+        max-width: 96rem;
+    }
+    .container-lg {
+        max-width: 96rem;
+    }
+}
+@media (min-width: 1201px) {
+    .container {
+        max-width: 114rem;
+    }
+    .container-sm {
+        max-width: 114rem;
+    }
+    .container-md {
+        max-width: 114rem;
+    }
+    .container-lg {
+        max-width: 114rem;
+    }
+    .container-xl {
+        max-width: 114rem;
+    }
+}
+
+/* Columns */
+
+.row {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+}
+.col-1,
+.col-2,
+.col-3,
+.col-4,
+.col-5,
+.col-6,
+.col-7,
+.col-8,
+.col-9,
+.col-10,
+.col-11,
+.col-12,
+.col,
+.col-auto,
+.col-sm-1,
+.col-sm-2,
+.col-sm-3,
+.col-sm-4,
+.col-sm-5,
+.col-sm-6,
+.col-sm-7,
+.col-sm-8,
+.col-sm-9,
+.col-sm-10,
+.col-sm-11,
+.col-sm-12,
+.col-sm,
+.col-sm-auto,
+.col-md-1,
+.col-md-2,
+.col-md-3,
+.col-md-4,
+.col-md-5,
+.col-md-6,
+.col-md-7,
+.col-md-8,
+.col-md-9,
+.col-md-10,
+.col-md-11,
+.col-md-12,
+.col-md,
+.col-md-auto,
+.col-lg-1,
+.col-lg-2,
+.col-lg-3,
+.col-lg-4,
+.col-lg-5,
+.col-lg-6,
+.col-lg-7,
+.col-lg-8,
+.col-lg-9,
+.col-lg-10,
+.col-lg-11,
+.col-lg-12,
+.col-lg,
+.col-lg-auto,
+.col-xl-1,
+.col-xl-2,
+.col-xl-3,
+.col-xl-4,
+.col-xl-5,
+.col-xl-6,
+.col-xl-7,
+.col-xl-8,
+.col-xl-9,
+.col-xl-10,
+.col-xl-11,
+.col-xl-12,
+.col-xl,
+.col-xl-auto {
+    position: relative;
+    width: 100%;
+}
+.col {
+    -webkit-flex-basis: 0;
+    -ms-flex-preferred-size: 0;
+    flex-basis: 0;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+    max-width: 100%;
+}
+.col-auto {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: auto;
+    max-width: 100%;
+}
+.col-1 {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 8.3333333333%;
+    -ms-flex: 0 0 8.3333333333%;
+    flex: 0 0 8.3333333333%;
+    max-width: 8.3333333333%;
+}
+.col-2 {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 16.6666666667%;
+    -ms-flex: 0 0 16.6666666667%;
+    flex: 0 0 16.6666666667%;
+    max-width: 16.6666666667%;
+}
+.col-3 {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 25%;
+    -ms-flex: 0 0 25%;
+    flex: 0 0 25%;
+    max-width: 25%;
+}
+.col-4 {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 33.3333333333%;
+    -ms-flex: 0 0 33.3333333333%;
+    flex: 0 0 33.3333333333%;
+    max-width: 33.3333333333%;
+}
+.col-5 {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 41.6666666667%;
+    -ms-flex: 0 0 41.6666666667%;
+    flex: 0 0 41.6666666667%;
+    max-width: 41.6666666667%;
+}
+.col-6 {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+    max-width: 50%;
+}
+.col-7 {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 58.3333333333%;
+    -ms-flex: 0 0 58.3333333333%;
+    flex: 0 0 58.3333333333%;
+    max-width: 58.3333333333%;
+}
+.col-8 {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 66.6666666667%;
+    -ms-flex: 0 0 66.6666666667%;
+    flex: 0 0 66.6666666667%;
+    max-width: 66.6666666667%;
+}
+.col-9 {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 75%;
+    -ms-flex: 0 0 75%;
+    flex: 0 0 75%;
+    max-width: 75%;
+}
+.col-10 {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 83.3333333333%;
+    -ms-flex: 0 0 83.3333333333%;
+    flex: 0 0 83.3333333333%;
+    max-width: 83.3333333333%;
+}
+.col-11 {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 91.6666666667%;
+    -ms-flex: 0 0 91.6666666667%;
+    flex: 0 0 91.6666666667%;
+    max-width: 91.6666666667%;
+}
+.col-12 {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 100%;
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%;
+    max-width: 100%;
+}
+.order-first {
+    -webkit-box-ordinal-group: 0;
+    -webkit-order: -1;
+    -ms-flex-order: -1;
+    order: -1;
+}
+.order-last {
+    -webkit-box-ordinal-group: 14;
+    -webkit-order: 13;
+    -ms-flex-order: 13;
+    order: 13;
+}
+.order-0 {
+    -webkit-box-ordinal-group: 1;
+    -webkit-order: 0;
+    -ms-flex-order: 0;
+    order: 0;
+}
+.order-1 {
+    -webkit-box-ordinal-group: 2;
+    -webkit-order: 1;
+    -ms-flex-order: 1;
+    order: 1;
+}
+.order-2 {
+    -webkit-box-ordinal-group: 3;
+    -webkit-order: 2;
+    -ms-flex-order: 2;
+    order: 2;
+}
+.order-3 {
+    -webkit-box-ordinal-group: 4;
+    -webkit-order: 3;
+    -ms-flex-order: 3;
+    order: 3;
+}
+.order-4 {
+    -webkit-box-ordinal-group: 5;
+    -webkit-order: 4;
+    -ms-flex-order: 4;
+    order: 4;
+}
+.order-5 {
+    -webkit-box-ordinal-group: 6;
+    -webkit-order: 5;
+    -ms-flex-order: 5;
+    order: 5;
+}
+.order-6 {
+    -webkit-box-ordinal-group: 7;
+    -webkit-order: 6;
+    -ms-flex-order: 6;
+    order: 6;
+}
+.order-7 {
+    -webkit-box-ordinal-group: 8;
+    -webkit-order: 7;
+    -ms-flex-order: 7;
+    order: 7;
+}
+.order-8 {
+    -webkit-box-ordinal-group: 9;
+    -webkit-order: 8;
+    -ms-flex-order: 8;
+    order: 8;
+}
+.order-9 {
+    -webkit-box-ordinal-group: 10;
+    -webkit-order: 9;
+    -ms-flex-order: 9;
+    order: 9;
+}
+.order-10 {
+    -webkit-box-ordinal-group: 11;
+    -webkit-order: 10;
+    -ms-flex-order: 10;
+    order: 10;
+}
+.order-11 {
+    -webkit-box-ordinal-group: 12;
+    -webkit-order: 11;
+    -ms-flex-order: 11;
+    order: 11;
+}
+.order-12 {
+    -webkit-box-ordinal-group: 13;
+    -webkit-order: 12;
+    -ms-flex-order: 12;
+    order: 12;
+}
+.offset-1 {
+    margin-left: 8.3333333333%;
+}
+.offset-2 {
+    margin-left: 16.6666666667%;
+}
+.offset-3 {
+    margin-left: 25%;
+}
+.offset-4 {
+    margin-left: 33.3333333333%;
+}
+.offset-5 {
+    margin-left: 41.6666666667%;
+}
+.offset-6 {
+    margin-left: 50%;
+}
+.offset-7 {
+    margin-left: 58.3333333333%;
+}
+.offset-8 {
+    margin-left: 66.6666666667%;
+}
+.offset-9 {
+    margin-left: 75%;
+}
+.offset-10 {
+    margin-left: 83.3333333333%;
+}
+.offset-11 {
+    margin-left: 91.6666666667%;
+}
+@media (min-width: 577px) {
+    .col-sm {
+        -webkit-flex-basis: 0;
+        -ms-flex-preferred-size: 0;
+        flex-basis: 0;
+        -webkit-box-flex: 1;
+        -webkit-flex-grow: 1;
+        -ms-flex-positive: 1;
+        flex-grow: 1;
+        max-width: 100%;
+    }
+    .col-sm-auto {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 auto;
+        -ms-flex: 0 0 auto;
+        flex: 0 0 auto;
+        width: auto;
+        max-width: 100%;
+    }
+    .col-sm-1 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 8.3333333333%;
+        -ms-flex: 0 0 8.3333333333%;
+        flex: 0 0 8.3333333333%;
+        max-width: 8.3333333333%;
+    }
+    .col-sm-2 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 16.6666666667%;
+        -ms-flex: 0 0 16.6666666667%;
+        flex: 0 0 16.6666666667%;
+        max-width: 16.6666666667%;
+    }
+    .col-sm-3 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 25%;
+        -ms-flex: 0 0 25%;
+        flex: 0 0 25%;
+        max-width: 25%;
+    }
+    .col-sm-4 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 33.3333333333%;
+        -ms-flex: 0 0 33.3333333333%;
+        flex: 0 0 33.3333333333%;
+        max-width: 33.3333333333%;
+    }
+    .col-sm-5 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 41.6666666667%;
+        -ms-flex: 0 0 41.6666666667%;
+        flex: 0 0 41.6666666667%;
+        max-width: 41.6666666667%;
+    }
+    .col-sm-6 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 50%;
+        -ms-flex: 0 0 50%;
+        flex: 0 0 50%;
+        max-width: 50%;
+    }
+    .col-sm-7 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 58.3333333333%;
+        -ms-flex: 0 0 58.3333333333%;
+        flex: 0 0 58.3333333333%;
+        max-width: 58.3333333333%;
+    }
+    .col-sm-8 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 66.6666666667%;
+        -ms-flex: 0 0 66.6666666667%;
+        flex: 0 0 66.6666666667%;
+        max-width: 66.6666666667%;
+    }
+    .col-sm-9 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 75%;
+        -ms-flex: 0 0 75%;
+        flex: 0 0 75%;
+        max-width: 75%;
+    }
+    .col-sm-10 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 83.3333333333%;
+        -ms-flex: 0 0 83.3333333333%;
+        flex: 0 0 83.3333333333%;
+        max-width: 83.3333333333%;
+    }
+    .col-sm-11 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 91.6666666667%;
+        -ms-flex: 0 0 91.6666666667%;
+        flex: 0 0 91.6666666667%;
+        max-width: 91.6666666667%;
+    }
+    .col-sm-12 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 100%;
+        -ms-flex: 0 0 100%;
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
+    .order-sm-first {
+        -webkit-box-ordinal-group: 0;
+        -webkit-order: -1;
+        -ms-flex-order: -1;
+        order: -1;
+    }
+    .order-sm-last {
+        -webkit-box-ordinal-group: 14;
+        -webkit-order: 13;
+        -ms-flex-order: 13;
+        order: 13;
+    }
+    .order-sm-0 {
+        -webkit-box-ordinal-group: 1;
+        -webkit-order: 0;
+        -ms-flex-order: 0;
+        order: 0;
+    }
+    .order-sm-1 {
+        -webkit-box-ordinal-group: 2;
+        -webkit-order: 1;
+        -ms-flex-order: 1;
+        order: 1;
+    }
+    .order-sm-2 {
+        -webkit-box-ordinal-group: 3;
+        -webkit-order: 2;
+        -ms-flex-order: 2;
+        order: 2;
+    }
+    .order-sm-3 {
+        -webkit-box-ordinal-group: 4;
+        -webkit-order: 3;
+        -ms-flex-order: 3;
+        order: 3;
+    }
+    .order-sm-4 {
+        -webkit-box-ordinal-group: 5;
+        -webkit-order: 4;
+        -ms-flex-order: 4;
+        order: 4;
+    }
+    .order-sm-5 {
+        -webkit-box-ordinal-group: 6;
+        -webkit-order: 5;
+        -ms-flex-order: 5;
+        order: 5;
+    }
+    .order-sm-6 {
+        -webkit-box-ordinal-group: 7;
+        -webkit-order: 6;
+        -ms-flex-order: 6;
+        order: 6;
+    }
+    .order-sm-7 {
+        -webkit-box-ordinal-group: 8;
+        -webkit-order: 7;
+        -ms-flex-order: 7;
+        order: 7;
+    }
+    .order-sm-8 {
+        -webkit-box-ordinal-group: 9;
+        -webkit-order: 8;
+        -ms-flex-order: 8;
+        order: 8;
+    }
+    .order-sm-9 {
+        -webkit-box-ordinal-group: 10;
+        -webkit-order: 9;
+        -ms-flex-order: 9;
+        order: 9;
+    }
+    .order-sm-10 {
+        -webkit-box-ordinal-group: 11;
+        -webkit-order: 10;
+        -ms-flex-order: 10;
+        order: 10;
+    }
+    .order-sm-11 {
+        -webkit-box-ordinal-group: 12;
+        -webkit-order: 11;
+        -ms-flex-order: 11;
+        order: 11;
+    }
+    .order-sm-12 {
+        -webkit-box-ordinal-group: 13;
+        -webkit-order: 12;
+        -ms-flex-order: 12;
+        order: 12;
+    }
+    .offset-sm-0 {
+        margin-left: 0;
+    }
+    .offset-sm-1 {
+        margin-left: 8.3333333333%;
+    }
+    .offset-sm-2 {
+        margin-left: 16.6666666667%;
+    }
+    .offset-sm-3 {
+        margin-left: 25%;
+    }
+    .offset-sm-4 {
+        margin-left: 33.3333333333%;
+    }
+    .offset-sm-5 {
+        margin-left: 41.6666666667%;
+    }
+    .offset-sm-6 {
+        margin-left: 50%;
+    }
+    .offset-sm-7 {
+        margin-left: 58.3333333333%;
+    }
+    .offset-sm-8 {
+        margin-left: 66.6666666667%;
+    }
+    .offset-sm-9 {
+        margin-left: 75%;
+    }
+    .offset-sm-10 {
+        margin-left: 83.3333333333%;
+    }
+    .offset-sm-11 {
+        margin-left: 91.6666666667%;
+    }
+}
+@media (min-width: 769px) {
+    .col-md {
+        -webkit-flex-basis: 0;
+        -ms-flex-preferred-size: 0;
+        flex-basis: 0;
+        -webkit-box-flex: 1;
+        -webkit-flex-grow: 1;
+        -ms-flex-positive: 1;
+        flex-grow: 1;
+        max-width: 100%;
+    }
+    .col-md-auto {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 auto;
+        -ms-flex: 0 0 auto;
+        flex: 0 0 auto;
+        width: auto;
+        max-width: 100%;
+    }
+    .col-md-1 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 8.3333333333%;
+        -ms-flex: 0 0 8.3333333333%;
+        flex: 0 0 8.3333333333%;
+        max-width: 8.3333333333%;
+    }
+    .col-md-2 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 16.6666666667%;
+        -ms-flex: 0 0 16.6666666667%;
+        flex: 0 0 16.6666666667%;
+        max-width: 16.6666666667%;
+    }
+    .col-md-3 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 25%;
+        -ms-flex: 0 0 25%;
+        flex: 0 0 25%;
+        max-width: 25%;
+    }
+    .col-md-4 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 33.3333333333%;
+        -ms-flex: 0 0 33.3333333333%;
+        flex: 0 0 33.3333333333%;
+        max-width: 33.3333333333%;
+    }
+    .col-md-5 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 41.6666666667%;
+        -ms-flex: 0 0 41.6666666667%;
+        flex: 0 0 41.6666666667%;
+        max-width: 41.6666666667%;
+    }
+    .col-md-6 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 50%;
+        -ms-flex: 0 0 50%;
+        flex: 0 0 50%;
+        max-width: 50%;
+    }
+    .col-md-7 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 58.3333333333%;
+        -ms-flex: 0 0 58.3333333333%;
+        flex: 0 0 58.3333333333%;
+        max-width: 58.3333333333%;
+    }
+    .col-md-8 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 66.6666666667%;
+        -ms-flex: 0 0 66.6666666667%;
+        flex: 0 0 66.6666666667%;
+        max-width: 66.6666666667%;
+    }
+    .col-md-9 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 75%;
+        -ms-flex: 0 0 75%;
+        flex: 0 0 75%;
+        max-width: 75%;
+    }
+    .col-md-10 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 83.3333333333%;
+        -ms-flex: 0 0 83.3333333333%;
+        flex: 0 0 83.3333333333%;
+        max-width: 83.3333333333%;
+    }
+    .col-md-11 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 91.6666666667%;
+        -ms-flex: 0 0 91.6666666667%;
+        flex: 0 0 91.6666666667%;
+        max-width: 91.6666666667%;
+    }
+    .col-md-12 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 100%;
+        -ms-flex: 0 0 100%;
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
+    .order-md-first {
+        -webkit-box-ordinal-group: 0;
+        -webkit-order: -1;
+        -ms-flex-order: -1;
+        order: -1;
+    }
+    .order-md-last {
+        -webkit-box-ordinal-group: 14;
+        -webkit-order: 13;
+        -ms-flex-order: 13;
+        order: 13;
+    }
+    .order-md-0 {
+        -webkit-box-ordinal-group: 1;
+        -webkit-order: 0;
+        -ms-flex-order: 0;
+        order: 0;
+    }
+    .order-md-1 {
+        -webkit-box-ordinal-group: 2;
+        -webkit-order: 1;
+        -ms-flex-order: 1;
+        order: 1;
+    }
+    .order-md-2 {
+        -webkit-box-ordinal-group: 3;
+        -webkit-order: 2;
+        -ms-flex-order: 2;
+        order: 2;
+    }
+    .order-md-3 {
+        -webkit-box-ordinal-group: 4;
+        -webkit-order: 3;
+        -ms-flex-order: 3;
+        order: 3;
+    }
+    .order-md-4 {
+        -webkit-box-ordinal-group: 5;
+        -webkit-order: 4;
+        -ms-flex-order: 4;
+        order: 4;
+    }
+    .order-md-5 {
+        -webkit-box-ordinal-group: 6;
+        -webkit-order: 5;
+        -ms-flex-order: 5;
+        order: 5;
+    }
+    .order-md-6 {
+        -webkit-box-ordinal-group: 7;
+        -webkit-order: 6;
+        -ms-flex-order: 6;
+        order: 6;
+    }
+    .order-md-7 {
+        -webkit-box-ordinal-group: 8;
+        -webkit-order: 7;
+        -ms-flex-order: 7;
+        order: 7;
+    }
+    .order-md-8 {
+        -webkit-box-ordinal-group: 9;
+        -webkit-order: 8;
+        -ms-flex-order: 8;
+        order: 8;
+    }
+    .order-md-9 {
+        -webkit-box-ordinal-group: 10;
+        -webkit-order: 9;
+        -ms-flex-order: 9;
+        order: 9;
+    }
+    .order-md-10 {
+        -webkit-box-ordinal-group: 11;
+        -webkit-order: 10;
+        -ms-flex-order: 10;
+        order: 10;
+    }
+    .order-md-11 {
+        -webkit-box-ordinal-group: 12;
+        -webkit-order: 11;
+        -ms-flex-order: 11;
+        order: 11;
+    }
+    .order-md-12 {
+        -webkit-box-ordinal-group: 13;
+        -webkit-order: 12;
+        -ms-flex-order: 12;
+        order: 12;
+    }
+    .offset-md-0 {
+        margin-left: 0;
+    }
+    .offset-md-1 {
+        margin-left: 8.3333333333%;
+    }
+    .offset-md-2 {
+        margin-left: 16.6666666667%;
+    }
+    .offset-md-3 {
+        margin-left: 25%;
+    }
+    .offset-md-4 {
+        margin-left: 33.3333333333%;
+    }
+    .offset-md-5 {
+        margin-left: 41.6666666667%;
+    }
+    .offset-md-6 {
+        margin-left: 50%;
+    }
+    .offset-md-7 {
+        margin-left: 58.3333333333%;
+    }
+    .offset-md-8 {
+        margin-left: 66.6666666667%;
+    }
+    .offset-md-9 {
+        margin-left: 75%;
+    }
+    .offset-md-10 {
+        margin-left: 83.3333333333%;
+    }
+    .offset-md-11 {
+        margin-left: 91.6666666667%;
+    }
+}
+@media (min-width: 993px) {
+    .col-lg {
+        -webkit-flex-basis: 0;
+        -ms-flex-preferred-size: 0;
+        flex-basis: 0;
+        -webkit-box-flex: 1;
+        -webkit-flex-grow: 1;
+        -ms-flex-positive: 1;
+        flex-grow: 1;
+        max-width: 100%;
+    }
+    .col-lg-auto {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 auto;
+        -ms-flex: 0 0 auto;
+        flex: 0 0 auto;
+        width: auto;
+        max-width: 100%;
+    }
+    .col-lg-1 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 8.3333333333%;
+        -ms-flex: 0 0 8.3333333333%;
+        flex: 0 0 8.3333333333%;
+        max-width: 8.3333333333%;
+    }
+    .col-lg-2 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 16.6666666667%;
+        -ms-flex: 0 0 16.6666666667%;
+        flex: 0 0 16.6666666667%;
+        max-width: 16.6666666667%;
+    }
+    .col-lg-3 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 25%;
+        -ms-flex: 0 0 25%;
+        flex: 0 0 25%;
+        max-width: 25%;
+    }
+    .col-lg-4 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 33.3333333333%;
+        -ms-flex: 0 0 33.3333333333%;
+        flex: 0 0 33.3333333333%;
+        max-width: 33.3333333333%;
+    }
+    .col-lg-5 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 41.6666666667%;
+        -ms-flex: 0 0 41.6666666667%;
+        flex: 0 0 41.6666666667%;
+        max-width: 41.6666666667%;
+    }
+    .col-lg-6 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 50%;
+        -ms-flex: 0 0 50%;
+        flex: 0 0 50%;
+        max-width: 50%;
+    }
+    .col-lg-7 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 58.3333333333%;
+        -ms-flex: 0 0 58.3333333333%;
+        flex: 0 0 58.3333333333%;
+        max-width: 58.3333333333%;
+    }
+    .col-lg-8 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 66.6666666667%;
+        -ms-flex: 0 0 66.6666666667%;
+        flex: 0 0 66.6666666667%;
+        max-width: 66.6666666667%;
+    }
+    .col-lg-9 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 75%;
+        -ms-flex: 0 0 75%;
+        flex: 0 0 75%;
+        max-width: 75%;
+    }
+    .col-lg-10 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 83.3333333333%;
+        -ms-flex: 0 0 83.3333333333%;
+        flex: 0 0 83.3333333333%;
+        max-width: 83.3333333333%;
+    }
+    .col-lg-11 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 91.6666666667%;
+        -ms-flex: 0 0 91.6666666667%;
+        flex: 0 0 91.6666666667%;
+        max-width: 91.6666666667%;
+    }
+    .col-lg-12 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 100%;
+        -ms-flex: 0 0 100%;
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
+    .order-lg-first {
+        -webkit-box-ordinal-group: 0;
+        -webkit-order: -1;
+        -ms-flex-order: -1;
+        order: -1;
+    }
+    .order-lg-last {
+        -webkit-box-ordinal-group: 14;
+        -webkit-order: 13;
+        -ms-flex-order: 13;
+        order: 13;
+    }
+    .order-lg-0 {
+        -webkit-box-ordinal-group: 1;
+        -webkit-order: 0;
+        -ms-flex-order: 0;
+        order: 0;
+    }
+    .order-lg-1 {
+        -webkit-box-ordinal-group: 2;
+        -webkit-order: 1;
+        -ms-flex-order: 1;
+        order: 1;
+    }
+    .order-lg-2 {
+        -webkit-box-ordinal-group: 3;
+        -webkit-order: 2;
+        -ms-flex-order: 2;
+        order: 2;
+    }
+    .order-lg-3 {
+        -webkit-box-ordinal-group: 4;
+        -webkit-order: 3;
+        -ms-flex-order: 3;
+        order: 3;
+    }
+    .order-lg-4 {
+        -webkit-box-ordinal-group: 5;
+        -webkit-order: 4;
+        -ms-flex-order: 4;
+        order: 4;
+    }
+    .order-lg-5 {
+        -webkit-box-ordinal-group: 6;
+        -webkit-order: 5;
+        -ms-flex-order: 5;
+        order: 5;
+    }
+    .order-lg-6 {
+        -webkit-box-ordinal-group: 7;
+        -webkit-order: 6;
+        -ms-flex-order: 6;
+        order: 6;
+    }
+    .order-lg-7 {
+        -webkit-box-ordinal-group: 8;
+        -webkit-order: 7;
+        -ms-flex-order: 7;
+        order: 7;
+    }
+    .order-lg-8 {
+        -webkit-box-ordinal-group: 9;
+        -webkit-order: 8;
+        -ms-flex-order: 8;
+        order: 8;
+    }
+    .order-lg-9 {
+        -webkit-box-ordinal-group: 10;
+        -webkit-order: 9;
+        -ms-flex-order: 9;
+        order: 9;
+    }
+    .order-lg-10 {
+        -webkit-box-ordinal-group: 11;
+        -webkit-order: 10;
+        -ms-flex-order: 10;
+        order: 10;
+    }
+    .order-lg-11 {
+        -webkit-box-ordinal-group: 12;
+        -webkit-order: 11;
+        -ms-flex-order: 11;
+        order: 11;
+    }
+    .order-lg-12 {
+        -webkit-box-ordinal-group: 13;
+        -webkit-order: 12;
+        -ms-flex-order: 12;
+        order: 12;
+    }
+    .offset-lg-0 {
+        margin-left: 0;
+    }
+    .offset-lg-1 {
+        margin-left: 8.3333333333%;
+    }
+    .offset-lg-2 {
+        margin-left: 16.6666666667%;
+    }
+    .offset-lg-3 {
+        margin-left: 25%;
+    }
+    .offset-lg-4 {
+        margin-left: 33.3333333333%;
+    }
+    .offset-lg-5 {
+        margin-left: 41.6666666667%;
+    }
+    .offset-lg-6 {
+        margin-left: 50%;
+    }
+    .offset-lg-7 {
+        margin-left: 58.3333333333%;
+    }
+    .offset-lg-8 {
+        margin-left: 66.6666666667%;
+    }
+    .offset-lg-9 {
+        margin-left: 75%;
+    }
+    .offset-lg-10 {
+        margin-left: 83.3333333333%;
+    }
+    .offset-lg-11 {
+        margin-left: 91.6666666667%;
+    }
+}
+@media (min-width: 1201px) {
+    .col-xl {
+        -webkit-flex-basis: 0;
+        -ms-flex-preferred-size: 0;
+        flex-basis: 0;
+        -webkit-box-flex: 1;
+        -webkit-flex-grow: 1;
+        -ms-flex-positive: 1;
+        flex-grow: 1;
+        max-width: 100%;
+    }
+    .col-xl-auto {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 auto;
+        -ms-flex: 0 0 auto;
+        flex: 0 0 auto;
+        width: auto;
+        max-width: 100%;
+    }
+    .col-xl-1 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 8.3333333333%;
+        -ms-flex: 0 0 8.3333333333%;
+        flex: 0 0 8.3333333333%;
+        max-width: 8.3333333333%;
+    }
+    .col-xl-2 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 16.6666666667%;
+        -ms-flex: 0 0 16.6666666667%;
+        flex: 0 0 16.6666666667%;
+        max-width: 16.6666666667%;
+    }
+    .col-xl-3 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 25%;
+        -ms-flex: 0 0 25%;
+        flex: 0 0 25%;
+        max-width: 25%;
+    }
+    .col-xl-4 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 33.3333333333%;
+        -ms-flex: 0 0 33.3333333333%;
+        flex: 0 0 33.3333333333%;
+        max-width: 33.3333333333%;
+    }
+    .col-xl-5 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 41.6666666667%;
+        -ms-flex: 0 0 41.6666666667%;
+        flex: 0 0 41.6666666667%;
+        max-width: 41.6666666667%;
+    }
+    .col-xl-6 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 50%;
+        -ms-flex: 0 0 50%;
+        flex: 0 0 50%;
+        max-width: 50%;
+    }
+    .col-xl-7 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 58.3333333333%;
+        -ms-flex: 0 0 58.3333333333%;
+        flex: 0 0 58.3333333333%;
+        max-width: 58.3333333333%;
+    }
+    .col-xl-8 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 66.6666666667%;
+        -ms-flex: 0 0 66.6666666667%;
+        flex: 0 0 66.6666666667%;
+        max-width: 66.6666666667%;
+    }
+    .col-xl-9 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 75%;
+        -ms-flex: 0 0 75%;
+        flex: 0 0 75%;
+        max-width: 75%;
+    }
+    .col-xl-10 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 83.3333333333%;
+        -ms-flex: 0 0 83.3333333333%;
+        flex: 0 0 83.3333333333%;
+        max-width: 83.3333333333%;
+    }
+    .col-xl-11 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 91.6666666667%;
+        -ms-flex: 0 0 91.6666666667%;
+        flex: 0 0 91.6666666667%;
+        max-width: 91.6666666667%;
+    }
+    .col-xl-12 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 100%;
+        -ms-flex: 0 0 100%;
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
+    .order-xl-first {
+        -webkit-box-ordinal-group: 0;
+        -webkit-order: -1;
+        -ms-flex-order: -1;
+        order: -1;
+    }
+    .order-xl-last {
+        -webkit-box-ordinal-group: 14;
+        -webkit-order: 13;
+        -ms-flex-order: 13;
+        order: 13;
+    }
+    .order-xl-0 {
+        -webkit-box-ordinal-group: 1;
+        -webkit-order: 0;
+        -ms-flex-order: 0;
+        order: 0;
+    }
+    .order-xl-1 {
+        -webkit-box-ordinal-group: 2;
+        -webkit-order: 1;
+        -ms-flex-order: 1;
+        order: 1;
+    }
+    .order-xl-2 {
+        -webkit-box-ordinal-group: 3;
+        -webkit-order: 2;
+        -ms-flex-order: 2;
+        order: 2;
+    }
+    .order-xl-3 {
+        -webkit-box-ordinal-group: 4;
+        -webkit-order: 3;
+        -ms-flex-order: 3;
+        order: 3;
+    }
+    .order-xl-4 {
+        -webkit-box-ordinal-group: 5;
+        -webkit-order: 4;
+        -ms-flex-order: 4;
+        order: 4;
+    }
+    .order-xl-5 {
+        -webkit-box-ordinal-group: 6;
+        -webkit-order: 5;
+        -ms-flex-order: 5;
+        order: 5;
+    }
+    .order-xl-6 {
+        -webkit-box-ordinal-group: 7;
+        -webkit-order: 6;
+        -ms-flex-order: 6;
+        order: 6;
+    }
+    .order-xl-7 {
+        -webkit-box-ordinal-group: 8;
+        -webkit-order: 7;
+        -ms-flex-order: 7;
+        order: 7;
+    }
+    .order-xl-8 {
+        -webkit-box-ordinal-group: 9;
+        -webkit-order: 8;
+        -ms-flex-order: 8;
+        order: 8;
+    }
+    .order-xl-9 {
+        -webkit-box-ordinal-group: 10;
+        -webkit-order: 9;
+        -ms-flex-order: 9;
+        order: 9;
+    }
+    .order-xl-10 {
+        -webkit-box-ordinal-group: 11;
+        -webkit-order: 10;
+        -ms-flex-order: 10;
+        order: 10;
+    }
+    .order-xl-11 {
+        -webkit-box-ordinal-group: 12;
+        -webkit-order: 11;
+        -ms-flex-order: 11;
+        order: 11;
+    }
+    .order-xl-12 {
+        -webkit-box-ordinal-group: 13;
+        -webkit-order: 12;
+        -ms-flex-order: 12;
+        order: 12;
+    }
+    .offset-xl-0 {
+        margin-left: 0;
+    }
+    .offset-xl-1 {
+        margin-left: 8.3333333333%;
+    }
+    .offset-xl-2 {
+        margin-left: 16.6666666667%;
+    }
+    .offset-xl-3 {
+        margin-left: 25%;
+    }
+    .offset-xl-4 {
+        margin-left: 33.3333333333%;
+    }
+    .offset-xl-5 {
+        margin-left: 41.6666666667%;
+    }
+    .offset-xl-6 {
+        margin-left: 50%;
+    }
+    .offset-xl-7 {
+        margin-left: 58.3333333333%;
+    }
+    .offset-xl-8 {
+        margin-left: 66.6666666667%;
+    }
+    .offset-xl-9 {
+        margin-left: 75%;
+    }
+    .offset-xl-10 {
+        margin-left: 83.3333333333%;
+    }
+    .offset-xl-11 {
+        margin-left: 91.6666666667%;
+    }
+}
+
+/* Rows with equal spacing */
+
+.row.row-eq-spacing {
+    margin-top: 3rem;
+    margin-bottom: 3rem;
+    padding-left: calc(3rem/2);
+    padding-right: calc(3rem/2);
+}
+.row.row-eq-spacing>[class^="col"] {
+    padding-left: calc(3rem/2);
+    padding-right: calc(3rem/2);
+}
+.row.row-eq-spacing>[class^="col"]>.content,
+.row.row-eq-spacing>[class^="col"]>.card {
+    margin-left: 0;
+    margin-right: 0;
+}
+.row.row-eq-spacing>[class^="col"]>.content:first-child,
+.row.row-eq-spacing>[class^="col"]>.card:first-child {
+    margin-top: 0;
+}
+.row.row-eq-spacing>[class^="col"]>.content:last-child,
+.row.row-eq-spacing>[class^="col"]>.card:last-child {
+    margin-bottom: 0;
+}
+@media (max-width: 576px) {
+    .row.row-eq-spacing {
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+        padding-left: calc(2rem/2);
+        padding-right: calc(2rem/2);
+    }
+    .row.row-eq-spacing>[class^="col"] {
+        padding-left: calc(2rem/2);
+        padding-right: calc(2rem/2);
+    }
+}
+
+/* Adjustments for small screens and up (> 576px) */
+
+@media (min-width: 577px) { 
+    .row.row-eq-spacing-sm:not(.row-eq-spacing) {
+        margin-top: 3rem;
+        margin-bottom: 3rem;
+        padding-left: calc(3rem/2);
+        padding-right: calc(3rem/2);
+    }
+    .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"] {
+        padding-left: calc(3rem/2);
+        padding-right: calc(3rem/2);
+    }
+    .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.content,
+    .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.card {
+        margin-left: 0;
+        margin-right: 0;
+    }
+    .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.content:first-child,
+    .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.card:first-child {
+        margin-top: 0;
+    }
+    .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.content:last-child,
+    .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.card:last-child {
+        margin-bottom: 0;
+    }
+}
+@media (max-width: 576px) {
+    .row.row-eq-spacing-sm:not(.row-eq-spacing) {
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+    }
+    .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"] {
+        /* No margin collapse (due to flexbox), so half is used */
+        margin-top: calc(2rem/2);
+        margin-bottom: calc(2rem/2);
+    }
+    .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]:first-child {
+        margin-top: 0;
+    }
+    .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]:last-child {
+        margin-bottom: 0;
+    }
+    .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.content,
+    .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.card {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+    .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child) {
+        /* Margin collapse, so full is used (not half) */
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+    }
+    .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child) {
+        /* Margin collapse, so full is used (not half) */
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+    }
+    .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):first-child,
+    .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):first-child {
+        margin-top: 0;
+    }
+    .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):last-child,
+    .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):last-child {
+        margin-bottom: 0;
+    }
+}
+
+/* Adjustments for medium screens and up (> 768px) */
+
+@media (min-width: 769px) { 
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing) {
+        margin-top: 3rem;
+        margin-bottom: 3rem;
+        padding-left: calc(3rem/2);
+        padding-right: calc(3rem/2);
+    }
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] {
+        padding-left: calc(3rem/2);
+        padding-right: calc(3rem/2);
+    }
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content,
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card {
+        margin-left: 0;
+        margin-right: 0;
+    }
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:first-child,
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:first-child {
+        margin-top: 0;
+    }
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:last-child,
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:last-child {
+        margin-bottom: 0;
+    }
+}
+@media (max-width: 768px) {
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing) {
+        margin-top: 3rem;
+        margin-bottom: 3rem;
+    }
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] {
+        /* No margin collapse (due to flexbox), so half is used */
+        margin-top: calc(3rem/2);
+        margin-bottom: calc(3rem/2);
+    }
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:first-child {
+        margin-top: 0;
+    }
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:last-child {
+        margin-bottom: 0;
+    }
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content,
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child) {
+        /* Margin collapse, so full is used (not half) */
+        margin-top: 3rem;
+        margin-bottom: 3rem;
+    }
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child) {
+        /* Margin collapse, so full is used (not half) */
+        margin-top: 3rem;
+        margin-bottom: 3rem;
+    }
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):first-child,
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):first-child {
+        margin-top: 0;
+    }
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):last-child,
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):last-child {
+        margin-bottom: 0;
+    }
+}
+@media (max-width: 576px) {
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing) {
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+    }
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] {
+        /* No margin collapse (due to flexbox), so half is used */
+        margin-top: calc(2rem/2);
+        margin-bottom: calc(2rem/2);
+    }
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child) {
+        /* Margin collapse, so full is used (not half) */
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+    }
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child) {
+        /* Margin collapse, so full is used (not half) */
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+    }
+}
+
+/* Adjustments for large screens and up (> 992px) */
+
+@media (min-width: 993px) { 
+    .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing) {
+        margin-top: 3rem;
+        margin-bottom: 3rem;
+        padding-left: calc(3rem/2);
+        padding-right: calc(3rem/2);
+    }
+    .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] {
+        padding-left: calc(3rem/2);
+        padding-right: calc(3rem/2);
+    }
+    .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content,
+    .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card {
+        margin-left: 0;
+        margin-right: 0;
+    }
+    .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:first-child,
+    .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:first-child {
+        margin-top: 0;
+    }
+    .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:last-child,
+    .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:last-child {
+        margin-bottom: 0;
+    }
+}
+@media (max-width: 992px) {
+    .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing) {
+        margin-top: 3rem;
+        margin-bottom: 3rem;
+    }
+    .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] {
+        /* No margin collapse (due to flexbox), so half is used */
+        margin-top: calc(3rem/2);
+        margin-bottom: calc(3rem/2);
+    }
+    .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:first-child {
+        margin-top: 0;
+    }
+    .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:last-child {
+        margin-bottom: 0;
+    }
+    .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content,
+    .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+    .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child) {
+        /* Margin collapse, so full is used (not half) */
+        margin-top: 3rem;
+        margin-bottom: 3rem;
+    }
+    .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child) {
+        /* Margin collapse, so full is used (not half) */
+        margin-top: 3rem;
+        margin-bottom: 3rem;
+    }
+    .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):first-child,
+    .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):first-child {
+        margin-top: 0;
+    }
+    .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):last-child,
+    .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):last-child {
+        margin-bottom: 0;
+    }
+}
+@media (max-width: 576px) {
+    .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing) {
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+    }
+    .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] {
+        /* No margin collapse (due to flexbox), so half is used */
+        margin-top: calc(2rem/2);
+        margin-bottom: calc(2rem/2);
+    }
+    .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child) {
+        /* Margin collapse, so full is used (not half) */
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+    }
+    .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child) {
+        /* Margin collapse, so full is used (not half) */
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+    }
+}
+
+/* Adjustments for extra large screens and up (> 1200px) */
+
+@media (min-width: 1201px) {    
+    .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing) {
+        margin-top: 3rem;
+        margin-bottom: 3rem;
+        padding-left: calc(3rem/2);
+        padding-right: calc(3rem/2);
+    }
+    .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] {
+        padding-left: calc(3rem/2);
+        padding-right: calc(3rem/2);
+    }
+    .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content,
+    .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card {
+        margin-left: 0;
+        margin-right: 0;
+    }
+    .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:first-child,
+    .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:first-child {
+        margin-top: 0;
+    }
+    .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:last-child,
+    .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:last-child {
+        margin-bottom: 0;
+    }
+}
+@media (max-width: 1200px) {
+    .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing) {
+        margin-top: 3rem;
+        margin-bottom: 3rem;
+    }
+    .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] {
+        /* No margin collapse (due to flexbox), so half is used */
+        margin-top: calc(3rem/2);
+        margin-bottom: calc(3rem/2);
+    }
+    .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:first-child {
+        margin-top: 0;
+    }
+    .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:last-child {
+        margin-bottom: 0;
+    }
+    .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content,
+    .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+    .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child) {
+        /* Margin collapse, so full is used (not half) */
+        margin-top: 3rem;
+        margin-bottom: 3rem;
+    }
+    .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child) {
+        /* Margin collapse, so full is used (not half) */
+        margin-top: 3rem;
+        margin-bottom: 3rem;
+    }
+    .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):first-child,
+    .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):first-child {
+        margin-top: 0;
+    }
+    .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):last-child,
+    .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):last-child {
+        margin-bottom: 0;
+    }
+}
+@media (max-width: 576px) {
+    .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing) {
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+    }
+    .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] {
+        /* No margin collapse (due to flexbox), so half is used */
+        margin-top: calc(2rem/2);
+        margin-bottom: calc(2rem/2);
+    }
+    .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child) {
+        /* Margin collapse, so full is used (not half) */
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+    }
+    .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child) {
+        /* Margin collapse, so full is used (not half) */
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+    }
+}
+
+/* Content and card */
+
+.content {
+    margin: 3rem;
+}
+@media (max-width: 576px) {
+    .content {
+        margin: 2rem;
+    }
+}
+.content-title {
+    font-size: 2rem;
+    font-weight: 500;
+    margin-top: 0;
+}
+.card {
+    position: relative;
+    margin: 3rem;
+    padding: 3rem;
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffffff;
+    background-image: none;
+    border-radius: 0.4rem;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.dark-mode .card {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: #191c20;
+    background-image: none;
+    border-color: rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+@media (max-width: 576px) {
+    .card {
+        margin: 2rem;
+        padding: 2rem;
+    }
+}
+.card-title {
+    font-size: 2rem;
+    font-weight: 500;
+    margin-top: 0;
+}
+
+/* Card padding */
+
+.p-card {
+    padding: 3rem;
+}
+.px-card {
+    padding-left: 3rem;
+    padding-right: 3rem;
+}
+.py-card {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+}
+@media (max-width: 576px) {
+    .p-card {
+        padding: 2rem;
+    }
+    .px-card {
+        padding-left: 2rem;
+        padding-right: 2rem;
+    }
+    .py-card {
+        padding-top: 2rem;
+        padding-bottom: 2rem;
+    }
+}
+
+/* Vertical spacer */
+
+.v-spacer {
+    height: 3rem;
+    position: relative;
+    width: 100%;
+}
+@media (max-width: 576px) {
+    .v-spacer {
+        height: 2rem;
+    }
+}
+
+
+/*
+-------------------------------------------------------------------------------
+6.  Links [hm-06]
+-------------------------------------------------------------------------------
+*/
+
+a {
+    color: #1890ff;
+    text-decoration: none;
+}
+a:hover {
+    color: #45a3fb;
+    text-decoration: underline;
+}
+.dark-mode a {
+    color: #1890ff;
+}
+.dark-mode a:hover {
+    color: #45a3fb;
+}
+
+/* Hyperlink (anti-aliasing removed in dark mode) */
+
+.dark-mode .hyperlink {
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+}
+
+/* Underlined hyperlink */
+
+.hyperlink-underline {
+    text-decoration: underline;
+}
+.dark-mode .hyperlink-underline {
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+}
+
+/*
+-------------------------------------------------------------------------------
+7.  Buttons [hm-07]
+
+Notes:
+    ~ When a focused button is hovered over, only the text color and the 
+    background color is overridden. This is because most button focus effects 
+    tend to be based on border, box shadow, and outline. On the other hand, 
+    when a focused input is hovered over, nothing is overridden, and all the 
+    focus styles are kept unchanged.
+-------------------------------------------------------------------------------
+*/
+
+/* Default button */
+
+.btn {
+    display: inline-block;
+    height: 3.2rem;
+    line-height: 3.2rem;
+    padding: 0 1.5rem;
+    text-align: center;
+    white-space: nowrap;
+    cursor: pointer;
+    color: rgba(0, 0, 0, 0.7);
+    background-color: #ffffff;
+    background-image: none;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 0.4rem;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.btn:hover {
+    text-decoration: none;
+    color: rgba(0, 0, 0, 0.7);
+    background-color: #f7f7f7;
+    background-image: none;
+    border-color: rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.btn:focus {
+    color: rgba(0, 0, 0, 0.7);
+    background-color: #ffffff;
+    background-image: none;
+    border-color: rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+    -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+    box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+    outline: 1px dotted transparent;
+    outline-offset: 0.2rem;
+}
+.btn.active {
+    color: rgba(0, 0, 0, 0.7);
+    background-color: #ffffff;
+    background-image: none;
+    border-color: rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+    -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+    box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+    outline: 1px dotted transparent;
+    outline-offset: 0.2rem;
+}
+.btn:focus:hover {
+    /*
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: rgba(0, 0, 0, 0.7);
+    background-color: #f7f7f7;
+    background-image: none;
+}
+.btn.active:hover {
+    /*
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: rgba(0, 0, 0, 0.7);
+    background-color: #f7f7f7;
+    background-image: none;
+}
+.dark-mode .btn {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.05);
+    background-image: none;
+    border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+}
+.dark-mode .btn:hover {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.1);
+    background-image: none;
+    border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+}
+.dark-mode .btn:focus {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.05);
+    background-image: none;
+    border-color: rgba(0, 0, 0, 0.4);
+    -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+    -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+    box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+    outline-color: transparent;
+}
+.dark-mode .btn.active {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.05);
+    background-image: none;
+    border-color: rgba(0, 0, 0, 0.4);
+    -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+    -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+    box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+    outline-color: transparent;
+}
+.dark-mode .btn:focus:hover {
+    /*
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.1);
+    background-image: none;
+}
+.dark-mode .btn.active:hover {
+    /*
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.1);
+    background-image: none;
+}
+.btn.disabled,
+.btn:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+.btn.disabled {
+    color: rgba(0, 0, 0, 0.7);
+    background-color: #ffffff;
+    background-image: none;
+    border-color: rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.btn:disabled {
+    color: rgba(0, 0, 0, 0.7);
+    background-color: #ffffff;
+    background-image: none;
+    border-color: rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.btn.disabled:hover {
+    color: rgba(0, 0, 0, 0.7);
+    background-color: #ffffff;
+    background-image: none;
+    border-color: rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.btn.disabled:focus {
+    color: rgba(0, 0, 0, 0.7);
+    background-color: #ffffff;
+    background-image: none;
+    border-color: rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.dark-mode .btn.disabled {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.05);
+    background-image: none;
+    border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.dark-mode .btn:disabled {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.05);
+    background-image: none;
+    border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.dark-mode .btn.disabled:hover {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.05);
+    background-image: none;
+    border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.dark-mode .btn.disabled:focus {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.05);
+    background-image: none;
+    border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+
+/* Alternate dark mode default button */
+
+.dark-mode .btn.alt-dm {
+    color: inherit;
+    background-color: rgba(0, 0, 0, 0.15);
+    background-image: none;
+    border-color: rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025);
+}
+.dark-mode .btn.alt-dm:hover {
+    color: inherit;
+    background-color: rgba(0, 0, 0, 0.2);
+    background-image: none;
+    border-color: rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025);
+}
+.dark-mode .btn.alt-dm:focus {
+    color: inherit;
+    background-color: rgba(0, 0, 0, 0.15);
+    background-image: none;
+    border-color: inherit;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025);
+    outline-color: transparent;
+}
+.dark-mode .btn.alt-dm.active {
+    color: inherit;
+    background-color: rgba(0, 0, 0, 0.15);
+    background-image: none;
+    border-color: inherit;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025);
+    outline-color: transparent;
+}
+.dark-mode .btn.alt-dm:focus:hover {
+    /*
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: inherit;
+    background-color: rgba(0, 0, 0, 0.2);
+    background-image: none;
+}
+.dark-mode .btn.alt-dm.active:hover {
+    /*
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: inherit;
+    background-color: rgba(0, 0, 0, 0.2);
+    background-image: none;
+}
+.dark-mode .btn.alt-dm.disabled {
+    color: inherit;
+    background-color: rgba(0, 0, 0, 0.15);
+    background-image: none;
+    border-color: rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.dark-mode .btn.alt-dm:disabled {
+    color: inherit;
+    background-color: rgba(0, 0, 0, 0.15);
+    background-image: none;
+    border-color: rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.dark-mode .btn.alt-dm.disabled:hover {
+    color: inherit;
+    background-color: rgba(0, 0, 0, 0.15);
+    background-image: none;
+    border-color: rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.dark-mode .btn.alt-dm.disabled:focus {
+    color: inherit;
+    background-color: rgba(0, 0, 0, 0.15);
+    background-image: none;
+    border-color: rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+
+/* Small button */
+
+.btn-sm {
+    height: 2.6rem;
+    line-height: 2.6rem;
+    padding: 0 1rem;
+    font-size: 1.2rem;
+}
+
+/* Large button */
+
+.btn-lg {
+    height: 4rem;
+    line-height: 4rem;
+    padding: 0 2rem;
+    font-size: 1.8rem;
+}
+
+/* Block button */
+
+.btn-block {
+    display: block;
+    width: 100%;
+}
+
+/* Link button */
+
+.btn.btn-link {
+    color: #1890ff;
+    background-color: transparent;
+    background-image: none;
+    border-color: transparent;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.btn.btn-link:hover {
+    color: #45a3fb;
+    background-color: transparent;
+    background-image: none;
+    border-color: transparent;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.btn.btn-link:focus {
+    color: #1890ff;
+    background-color: transparent;
+    background-image: none;
+    border-color: transparent;
+    -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+    -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+    box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+    outline-color: transparent;
+}
+.btn.btn-link.active {
+    color: #1890ff;
+    background-color: transparent;
+    background-image: none;
+    border-color: transparent;
+    -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+    -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+    box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+    outline-color: transparent;
+}
+.btn.btn-link:focus:hover {
+    /*
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: #45a3fb;
+    background-color: transparent;
+    background-image: none;
+}
+.btn.btn-link.active:hover {
+    /*
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: #45a3fb;
+    background-color: transparent;
+    background-image: none;
+}
+.dark-mode .btn.btn-link {
+    color: #1890ff;
+    background-color: transparent;
+    background-image: none;
+    border-color: transparent;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+}
+.dark-mode .btn.btn-link:hover {
+    color: #45a3fb;
+    background-color: transparent;
+    background-image: none;
+    border-color: transparent;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.dark-mode .btn.btn-link:focus {
+    color: #1890ff;
+    background-color: transparent;
+    background-image: none;
+    border-color: transparent;
+    -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+    -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+    box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+    outline-color: transparent;
+}
+.dark-mode .btn.btn-link.active {
+    color: #1890ff;
+    background-color: transparent;
+    background-image: none;
+    border-color: transparent;
+    -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+    -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+    box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+    outline-color: transparent;
+}
+.dark-mode .btn.btn-link:focus:hover {
+    /*
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: #45a3fb;
+    background-color: transparent;
+    background-image: none;
+}
+.dark-mode .btn.btn-link.active:hover {
+    /*
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: #45a3fb;
+    background-color: transparent;
+    background-image: none;
+}
+.btn.btn-link.disabled {
+    color: #1890ff;
+    background-color: transparent;
+    background-image: none;
+    border-color: transparent;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.btn.btn-link:disabled {
+    color: #1890ff;
+    background-color: transparent;
+    background-image: none;
+    border-color: transparent;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.btn.btn-link.disabled:hover {
+    color: #1890ff;
+    background-color: transparent;
+    background-image: none;
+    border-color: transparent;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.btn.btn-link.disabled:focus {
+    color: #1890ff;
+    background-color: transparent;
+    background-image: none;
+    border-color: transparent;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.dark-mode .btn.btn-link.disabled {
+    color: #1890ff;
+    background-color: transparent;
+    background-image: none;
+    border-color: transparent;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.dark-mode .btn.btn-link:disabled {
+    color: #1890ff;
+    background-color: transparent;
+    background-image: none;
+    border-color: transparent;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.dark-mode .btn.btn-link.disabled:hover {
+    color: #1890ff;
+    background-color: transparent;
+    background-image: none;
+    border-color: transparent;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.dark-mode .btn.btn-link.disabled:focus {
+    color: #1890ff;
+    background-color: transparent;
+    background-image: none;
+    border-color: transparent;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+
+/* Primary button */
+
+.btn.btn-primary {
+    color: #ffffff;
+    background-color: #1890ff;
+    background-image: none;
+    border-color: #1890ff;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.btn.btn-primary:hover {
+    color: #ffffff;
+    background-color: #45a3fb;
+    background-image: none;
+    border-color: #45a3fb;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.btn.btn-primary:focus {
+    color: #ffffff;
+    background-color: #1890ff;
+    background-image: none;
+    border-color: #1890ff;
+    -moz-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+    -webkit-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+    box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+    outline-color: transparent;
+}
+.btn.btn-primary.active {
+    color: #ffffff;
+    background-color: #1890ff;
+    background-image: none;
+    border-color: #1890ff;
+    -moz-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+    -webkit-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+    box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+    outline-color: transparent;
+}
+.btn.btn-primary:focus:hover {
+    /*
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: #ffffff;
+    background-color: #45a3fb;
+    background-image: none;
+}
+.btn.btn-primary.active:hover {
+    /*
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: #ffffff;
+    background-color: #45a3fb;
+    background-image: none;
+}
+.dark-mode .btn.btn-primary {
+    color: #ffffff;
+    background-color: #1890ff;
+    background-image: none;
+    border-color: #1890ff;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+}
+.dark-mode .btn.btn-primary:hover {
+    color: #ffffff;
+    background-color: #45a3fb;
+    background-image: none;
+    border-color: #45a3fb;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+}
+.dark-mode .btn.btn-primary:focus {
+    color: #ffffff;
+    background-color: #1890ff;
+    background-image: none;
+    border-color: #1890ff;
+    -moz-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+    -webkit-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+    box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+    outline-color: transparent;
+}
+.dark-mode .btn.btn-primary.active {
+    color: #ffffff;
+    background-color: #1890ff;
+    background-image: none;
+    border-color: #1890ff;
+    -moz-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+    -webkit-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+    box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+    outline-color: transparent;
+}
+.dark-mode .btn.btn-primary:focus:hover {
+    /*
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: #ffffff;
+    background-color: #45a3fb;
+    background-image: none;
+}
+.dark-mode .btn.btn-primary.active:hover {
+    /*
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: #ffffff;
+    background-color: #45a3fb;
+    background-image: none;
+}
+.btn.btn-primary.disabled {
+    color: #ffffff;
+    background-color: #1890ff;
+    background-image: none;
+    border-color: #1890ff;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.btn.btn-primary:disabled {
+    color: #ffffff;
+    background-color: #1890ff;
+    background-image: none;
+    border-color: #1890ff;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.btn.btn-primary.disabled:hover {
+    color: #ffffff;
+    background-color: #1890ff;
+    background-image: none;
+    border-color: #1890ff;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.btn.btn-primary.disabled:focus {
+    color: #ffffff;
+    background-color: #1890ff;
+    background-image: none;
+    border-color: #1890ff;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.dark-mode .btn.btn-primary.disabled {
+    color: #ffffff;
+    background-color: #1890ff;
+    background-image: none;
+    border-color: #1890ff;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.dark-mode .btn.btn-primary:disabled {
+    color: #ffffff;
+    background-color: #1890ff;
+    background-image: none;
+    border-color: #1890ff;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.dark-mode .btn.btn-primary.disabled:hover {
+    color: #ffffff;
+    background-color: #1890ff;
+    background-image: none;
+    border-color: #1890ff;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.dark-mode .btn.btn-primary.disabled:focus {
+    color: #ffffff;
+    background-color: #1890ff;
+    background-image: none;
+    border-color: #1890ff;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+
+/* Success button */
+
+.btn.btn-success {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #0be881;
+    background-image: none;
+    border-color: #0be881;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.btn.btn-success:hover {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #81eea8;
+    background-image: none;
+    border-color: #81eea8;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.btn.btn-success:focus {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #0be881;
+    background-image: none;
+    border-color: #0be881;
+    -moz-box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3);
+    -webkit-box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3);
+    box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3);
+    outline-color: transparent;
+}
+.btn.btn-success.active {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #0be881;
+    background-image: none;
+    border-color: #0be881;
+    -moz-box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3);
+    -webkit-box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3);
+    box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3);
+    outline-color: transparent;
+}
+.btn.btn-success:focus:hover {
+    /*
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #81eea8;
+    background-image: none;
+}
+.btn.btn-success.active:hover {
+    /*
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #81eea8;
+    background-image: none;
+}
+.dark-mode .btn.btn-success {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #0be881;
+    background-image: none;
+    border-color: #0be881;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+}
+.dark-mode .btn.btn-success:hover {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #81eea8;
+    background-image: none;
+    border-color: #81eea8;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+}
+.dark-mode .btn.btn-success:focus {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #0be881;
+    background-image: none;
+    border-color: #0be881;
+    -moz-box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3);
+    -webkit-box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3);
+    box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3);
+    outline-color: transparent;
+}
+.dark-mode .btn.btn-success.active {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #0be881;
+    background-image: none;
+    border-color: #0be881;
+    -moz-box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3);
+    -webkit-box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3);
+    box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3);
+    outline-color: transparent;
+}
+.dark-mode .btn.btn-success:focus:hover {
+    /*
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #81eea8;
+    background-image: none;
+}
+.dark-mode .btn.btn-success.active:hover {
+    /*
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #81eea8;
+    background-image: none;
+}
+.btn.btn-success.disabled {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #0be881;
+    background-image: none;
+    border-color: #0be881;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.btn.btn-success:disabled {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #0be881;
+    background-image: none;
+    border-color: #0be881;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.btn.btn-success.disabled:hover {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #0be881;
+    background-image: none;
+    border-color: #0be881;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.btn.btn-success.disabled:focus {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #0be881;
+    background-image: none;
+    border-color: #0be881;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.dark-mode .btn.btn-success.disabled {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #0be881;
+    background-image: none;
+    border-color: #0be881;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.dark-mode .btn.btn-success:disabled {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #0be881;
+    background-image: none;
+    border-color: #0be881;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.dark-mode .btn.btn-success.disabled:hover {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #0be881;
+    background-image: none;
+    border-color: #0be881;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.dark-mode .btn.btn-success.disabled:focus {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #0be881;
+    background-image: none;
+    border-color: #0be881;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+
+/* Secondary button */
+
+.btn.btn-secondary {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffcf00;
+    background-image: none;
+    border-color: #ffcf00;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.btn.btn-secondary:hover {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffe04d;
+    background-image: none;
+    border-color: #ffe04d;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.btn.btn-secondary:focus {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffcf00;
+    background-image: none;
+    border-color: #ffcf00;
+    -moz-box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3);
+    -webkit-box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3);
+    box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3);
+    outline-color: transparent;
+}
+.btn.btn-secondary.active {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffcf00;
+    background-image: none;
+    border-color: #ffcf00;
+    -moz-box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3);
+    -webkit-box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3);
+    box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3);
+    outline-color: transparent;
+}
+.btn.btn-secondary:focus:hover {
+    /*
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffe04d;
+    background-image: none;
+}
+.btn.btn-secondary.active:hover {
+    /*
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffe04d;
+    background-image: none;
+}
+.dark-mode .btn.btn-secondary {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffcf00;
+    background-image: none;
+    border-color: #ffcf00;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+}
+.dark-mode .btn.btn-secondary:hover {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffe04d;
+    background-image: none;
+    border-color: #ffe04d;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+}
+.dark-mode .btn.btn-secondary:focus {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffcf00;
+    background-image: none;
+    border-color: #ffcf00;
+    -moz-box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3);
+    -webkit-box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3);
+    box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3);
+    outline-color: transparent;
+}
+.dark-mode .btn.btn-secondary.active {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffcf00;
+    background-image: none;
+    border-color: #ffcf00;
+    -moz-box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3);
+    -webkit-box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3);
+    box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3);
+    outline-color: transparent;
+}
+.dark-mode .btn.btn-secondary:focus:hover {
+    /*
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffe04d;
+    background-image: none;
+}
+.dark-mode .btn.btn-secondary.active:hover {
+    /*
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffe04d;
+    background-image: none;
+}
+.btn.btn-secondary.disabled {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffcf00;
+    background-image: none;
+    border-color: #ffcf00;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.btn.btn-secondary:disabled {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffcf00;
+    background-image: none;
+    border-color: #ffcf00;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.btn.btn-secondary.disabled:hover {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffcf00;
+    background-image: none;
+    border-color: #ffcf00;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.btn.btn-secondary.disabled:focus {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffcf00;
+    background-image: none;
+    border-color: #ffcf00;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.dark-mode .btn.btn-secondary.disabled {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffcf00;
+    background-image: none;
+    border-color: #ffcf00;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.dark-mode .btn.btn-secondary:disabled {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffcf00;
+    background-image: none;
+    border-color: #ffcf00;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.dark-mode .btn.btn-secondary.disabled:hover {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffcf00;
+    background-image: none;
+    border-color: #ffcf00;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.dark-mode .btn.btn-secondary.disabled:focus {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffcf00;
+    background-image: none;
+    border-color: #ffcf00;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+
+/* Danger button */
+
+.btn.btn-danger {
+    color: #ffffff;
+    background-color: #ff4d4f;
+    background-image: none;
+    border-color: #ff4d4f;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.btn.btn-danger:hover {
+    color: #ffffff;
+    background-color: #ed586c;
+    background-image: none;
+    border-color: #ed586c;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.btn.btn-danger:focus {
+    color: #ffffff;
+    background-color: #ff4d4f;
+    background-image: none;
+    border-color: #ff4d4f;
+    -moz-box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3);
+    -webkit-box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3);
+    box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3);
+    outline-color: transparent;
+}
+.btn.btn-danger.active {
+    color: #ffffff;
+    background-color: #ff4d4f;
+    background-image: none;
+    border-color: #ff4d4f;
+    -moz-box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3);
+    -webkit-box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3);
+    box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3);
+    outline-color: transparent;
+}
+.btn.btn-danger:focus:hover {
+    /*
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: #ffffff;
+    background-color: #ed586c;
+    background-image: none;
+}
+.btn.btn-danger.active:hover {
+    /*
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: #ffffff;
+    background-color: #ed586c;
+    background-image: none;
+}
+.dark-mode .btn.btn-danger {
+    color: #ffffff;
+    background-color: #ff4d4f;
+    background-image: none;
+    border-color: #ff4d4f;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+}
+.dark-mode .btn.btn-danger:hover {
+    color: #ffffff;
+    background-color: #ed586c;
+    background-image: none;
+    border-color: #ed586c;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+}
+.dark-mode .btn.btn-danger:focus {
+    color: #ffffff;
+    background-color: #ff4d4f;
+    background-image: none;
+    border-color: #ff4d4f;
+    -moz-box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3);
+    -webkit-box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3);
+    box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3);
+    outline-color: transparent;
+}
+.dark-mode .btn.btn-danger.active {
+    color: #ffffff;
+    background-color: #ff4d4f;
+    background-image: none;
+    border-color: #ff4d4f;
+    -moz-box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3);
+    -webkit-box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3);
+    box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3);
+    outline-color: transparent;
+}
+.dark-mode .btn.btn-danger:focus:hover {
+    /*
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: #ffffff;
+    background-color: #ed586c;
+    background-image: none;
+}
+.dark-mode .btn.btn-danger.active:hover {
+    /*
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: #ffffff;
+    background-color: #ed586c;
+    background-image: none;
+}
+.btn.btn-danger.disabled {
+    color: #ffffff;
+    background-color: #ff4d4f;
+    background-image: none;
+    border-color: #ff4d4f;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.btn.btn-danger:disabled {
+    color: #ffffff;
+    background-color: #ff4d4f;
+    background-image: none;
+    border-color: #ff4d4f;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.btn.btn-danger.disabled:hover {
+    color: #ffffff;
+    background-color: #ff4d4f;
+    background-image: none;
+    border-color: #ff4d4f;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.btn.btn-danger.disabled:focus {
+    color: #ffffff;
+    background-color: #ff4d4f;
+    background-image: none;
+    border-color: #ff4d4f;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.dark-mode .btn.btn-danger.disabled {
+    color: #ffffff;
+    background-color: #ff4d4f;
+    background-image: none;
+    border-color: #ff4d4f;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.dark-mode .btn.btn-danger:disabled {
+    color: #ffffff;
+    background-color: #ff4d4f;
+    background-image: none;
+    border-color: #ff4d4f;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.dark-mode .btn.btn-danger.disabled:hover {
+    color: #ffffff;
+    background-color: #ff4d4f;
+    background-image: none;
+    border-color: #ff4d4f;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.dark-mode .btn.btn-danger.disabled:focus {
+    color: #ffffff;
+    background-color: #ff4d4f;
+    background-image: none;
+    border-color: #ff4d4f;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+
+/* Square button */
+
+.btn-square {
+    width: 3.2rem;
+    padding-left: 0;
+    padding-right: 0;
+}
+.btn-square.btn-sm {
+    width: 2.6rem;
+    padding-left: 0;
+    padding-right: 0;
+}
+.btn-square.btn-lg {
+    width: 4rem;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+/* Rounded button */
+
+.btn-rounded {
+    border-radius: 3.2rem;
+}
+.btn-rounded.btn-sm {
+    border-radius: 2.6rem;
+}
+.btn-rounded.btn-lg {
+    border-radius: 4rem;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+8.  List [hm-08]
+-------------------------------------------------------------------------------
+*/
+
+ul {
+    list-style: circle inside;
+}
+ol {
+    list-style: decimal inside;
+}
+ol,
+ul {
+    padding-left: 0;
+    margin-top: 0;
+}
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+    margin: 1.5rem 0 1.5rem 3rem;
+}
+li {
+    margin-bottom: 1rem;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+9.  Code [hm-09]
+-------------------------------------------------------------------------------
+*/
+
+code,
+.code {
+    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+.code {
+    font-size: 1.2rem;
+    line-height: 1.5;
+    padding: 0.1rem 0.5rem;
+    margin: 0 0.1rem;
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ecf0f1;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    border-radius: 0.2rem;
+}
+.dark-mode .code {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(0, 0, 0, 0.1);
+    border-color: rgba(0, 0, 0, 0.15);
+}
+
+/*  Keyboard input */
+
+kbd {
+    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-size: 1.2rem;
+    line-height: 1.5;
+    padding: 0.1rem 0.5rem;
+    margin: 0 0.1rem;
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 0.4rem;
+    -webkit-user-select: none;  /* Chrome all / Safari all */
+    -moz-user-select: none;     /* Firefox all */
+    -ms-user-select: none;      /* IE 10+ */
+    user-select: none; 
+}
+.dark-mode kbd {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: transparent;
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+
+/*
+-------------------------------------------------------------------------------
+10. Tables [hm-10]
+-------------------------------------------------------------------------------
+*/
+
+.table-responsive {
+    overflow-x: auto;
+}
+.table-responsive .table th,
+.table-responsive .table td {
+    white-space: nowrap;
+}
+.table {
+    width: 100%;
+}
+.table thead tr {
+    border-bottom: 2px solid #dadfe1;
+}
+.dark-mode .table thead tr {
+    border-color: #47494d;
+}
+.table tfoot tr {
+    border-top: 2px solid #dadfe1;
+}
+.dark-mode .table tfoot tr {
+    border-color: #47494d;
+}
+.table tbody tr:not(:last-child) {
+    border-bottom: 1px solid #dadfe1;
+}
+.dark-mode .table tbody tr:not(:last-child) {
+    border-color: #47494d;
+}
+.table th {
+    font-weight: 700;
+}
+.table th,
+.table td {
+    text-align: left;
+}
+.table th {
+    padding: 1.2rem 1.5rem;
+}
+.table td {
+    padding: 1.2rem 1.5rem;
+}
+
+/* No outer padding */
+
+.table-no-outer-padding th:first-child,
+.table-no-outer-padding td:first-child {
+    padding-left: 0;
+}
+.table-no-outer-padding th:last-child,
+.table-no-outer-padding td:last-child {
+    padding-right: 0;
+}
+
+/* Bordered table */
+
+.table-bordered {
+    border: 1px solid #dadfe1;
+}
+
+.table-outer-bordered {
+    border: 1px solid #dadfe1;
+}
+.dark-mode .table-bordered {
+    border-color: #47494d;
+}
+.dark-mode .table-outer-bordered {
+    border-color: #47494d;
+}
+.table-bordered th:not(:last-child) {
+    border-right: 1px solid #dadfe1;
+}
+.table-bordered td:not(:last-child) {
+    border-right: 1px solid #dadfe1;
+}
+.table-inner-bordered th:not(:last-child) {
+    border-right: 1px solid #dadfe1;
+}
+.table-inner-bordered td:not(:last-child) {
+    border-right: 1px solid #dadfe1;
+}
+.dark-mode .table-bordered th:not(:last-child) {
+    border-color: #47494d;
+}
+.dark-mode .table-bordered td:not(:last-child) {
+    border-color: #47494d;
+}
+.dark-mode .table-inner-bordered th:not(:last-child) {
+    border-color: #47494d;
+}
+.dark-mode .table-inner-bordered td:not(:last-child) {
+    border-color: #47494d;
+}
+
+/* Hoverable table */
+
+.table-hover tbody tr:hover th {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+.table-hover tbody tr:hover td {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+.dark-mode .table-hover tbody tr:hover th {
+    background-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .table-hover tbody tr:hover td {
+    background-color: rgba(0, 0, 0, 0.2);
+}
+
+/* Striped table */
+
+.table-striped tbody tr:nth-child(odd) {
+    background-color: #ecf0f1;
+}
+
+.table-striped tbody tr:nth-child(odd) {
+    background-color: #ecf0f1;
+}
+.dark-mode .table-striped tbody tr:nth-child(odd) {
+    background-color: rgba(0, 0, 0, 0.15);
+}
+.dark-mode .table-striped tbody tr:nth-child(odd) {
+    background-color: rgba(0, 0, 0, 0.15);
+}
+
+/* Primary, success, secondary, danger table rows. */
+
+/* Light mode */
+
+.table tbody tr.table-primary {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #cfe7fd;
+    border-color: #45a3fb;
+}
+
+.table-striped tbody tr.table-primary {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #cfe7fd;
+    border-color: #45a3fb;
+}
+
+.table-bordered tbody tr.table-primary {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #cfe7fd;
+    border-color: #45a3fb;
+}
+
+.table-inner-bordered tbody tr.table-primary {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #cfe7fd;
+    border-color: #45a3fb;
+}
+.table tbody tr.table-primary th {
+    border-color: #bababc;
+}
+.table tbody tr.table-primary td {
+    border-color: #bababc;
+}
+.table-bordered tbody tr.table-primary th {
+    border-color: #bababc;
+}
+.table-bordered tbody tr.table-primary td {
+    border-color: #bababc;
+}
+.table-inner-bordered tbody tr.table-primary th {
+    border-color: #bababc;
+}
+.table-inner-bordered tbody tr.table-primary td {
+    border-color: #bababc;
+}
+.table tbody tr.table-success {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #d5f9e5;
+    border-color: #0be881;
+}
+.table-striped tbody tr.table-success {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #d5f9e5;
+    border-color: #0be881;
+}
+.table-bordered tbody tr.table-success {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #d5f9e5;
+    border-color: #0be881;
+}
+.table-inner-bordered tbody tr.table-success {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #d5f9e5;
+    border-color: #0be881;
+}
+.table tbody tr.table-success th {
+    border-color: #bababc;
+}
+.table tbody tr.table-success td {
+    border-color: #bababc;
+}
+.table-bordered tbody tr.table-success th {
+    border-color: #bababc;
+}
+.table-bordered tbody tr.table-success td {
+    border-color: #bababc;
+}
+.table-inner-bordered tbody tr.table-success th {
+    border-color: #bababc;
+}
+.table-inner-bordered tbody tr.table-success td {
+    border-color: #bababc;
+}
+.table tbody tr.table-secondary {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #fff6cc;
+    border-color: #ffcf00;
+}
+.table-striped tbody tr.table-secondary {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #fff6cc;
+    border-color: #ffcf00;
+}
+.table-bordered tbody tr.table-secondary {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #fff6cc;
+    border-color: #ffcf00;
+}
+.table-inner-bordered tbody tr.table-secondary {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #fff6cc;
+    border-color: #ffcf00;
+}
+.table tbody tr.table-secondary th {
+    border-color: #bababc;
+}
+.table tbody tr.table-secondary td {
+    border-color: #bababc;
+}
+.table-bordered tbody tr.table-secondary th {
+    border-color: #bababc;
+}
+.table-bordered tbody tr.table-secondary td {
+    border-color: #bababc;
+}
+.table-inner-bordered tbody tr.table-secondary th {
+    border-color: #bababc;
+}
+.table-inner-bordered tbody tr.table-secondary td {
+    border-color: #bababc;
+}
+.table tbody tr.table-danger {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #f8d0d9;
+    border-color: #ed586c;
+}
+.table-striped tbody tr.table-danger {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #f8d0d9;
+    border-color: #ed586c;
+}
+.table-bordered tbody tr.table-danger {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #f8d0d9;
+    border-color: #ed586c;
+}
+.table-inner-bordered tbody tr.table-danger {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #f8d0d9;
+    border-color: #ed586c;
+}
+.table tbody tr.table-danger th {
+    border-color: #bababc;
+}
+.table tbody tr.table-danger td {
+    border-color: #bababc;
+}
+.table-bordered tbody tr.table-danger th {
+    border-color: #bababc;
+}
+.table-bordered tbody tr.table-danger td {
+    border-color: #bababc;
+}
+.table-inner-bordered tbody tr.table-danger th {
+    border-color: #bababc;
+}
+.table-inner-bordered tbody tr.table-danger td {
+    border-color: #bababc;
+}
+
+/* Dark mode */
+
+.dark-mode .table tbody tr.table-primary {
+    color: #1890ff;
+    background-color: #172636;
+    border-color: #0d518f;
+}
+
+.dark-mode .table-striped tbody tr.table-primary {
+    color: #1890ff;
+    background-color: #172636;
+    border-color: #0d518f;
+}
+
+.dark-mode .table-bordered tbody tr.table-primary {
+    color: #1890ff;
+    background-color: #172636;
+    border-color: #0d518f;
+}
+
+.dark-mode .table-inner-bordered tbody tr.table-primary {
+    color: #1890ff;
+    background-color: #172636;
+    border-color: #0d518f;
+}
+.dark-mode .table tbody tr.table-primary th {
+    border-color: #47494d;
+}
+.dark-mode .table tbody tr.table-primary td {
+    border-color: #47494d;
+}
+.dark-mode .table-bordered tbody tr.table-primary th {
+    border-color: #47494d;
+}
+.dark-mode .table-bordered tbody tr.table-primary td {
+    border-color: #47494d;
+}
+.dark-mode .table-inner-bordered tbody tr.table-primary th {
+    border-color: #47494d;
+}
+.dark-mode .table-inner-bordered tbody tr.table-primary td {
+    border-color: #47494d;
+}
+.dark-mode .table tbody tr.table-success {
+    color: #0be881;
+    background-color: #17312a;
+    border-color: #0d8951;
+}
+.dark-mode .table-striped tbody tr.table-success {
+    color: #0be881;
+    background-color: #17312a;
+    border-color: #0d8951;
+}
+.dark-mode .table-bordered tbody tr.table-success {
+    color: #0be881;
+    background-color: #17312a;
+    border-color: #0d8951;
+}
+.dark-mode .table-inner-bordered tbody tr.table-success {
+    color: #0be881;
+    background-color: #17312a;
+    border-color: #0d8951;
+}
+.dark-mode .table tbody tr.table-success th {
+    border-color: #47494d;
+}
+.dark-mode .table tbody tr.table-success td {
+    border-color: #47494d;
+}
+.dark-mode .table-bordered tbody tr.table-success th {
+    border-color: #47494d;
+}
+.dark-mode .table-bordered tbody tr.table-success td {
+    border-color: #47494d;
+}
+.dark-mode .table-inner-bordered tbody tr.table-success th {
+    border-color: #47494d;
+}
+.dark-mode .table-inner-bordered tbody tr.table-success td {
+    border-color: #47494d;
+}
+.dark-mode .table tbody tr.table-secondary {
+    color: #ffcf00;
+    background-color: #302c1d;
+    border-color: #8e7710;
+}
+.dark-mode .table-striped tbody tr.table-secondary {
+    color: #ffcf00;
+    background-color: #302c1d;
+    border-color: #8e7710;
+}
+.dark-mode .table-bordered tbody tr.table-secondary {
+    color: #ffcf00;
+    background-color: #302c1d;
+    border-color: #8e7710;
+}
+.dark-mode .table-inner-bordered tbody tr.table-secondary {
+    color: #ffcf00;
+    background-color: #302c1d;
+    border-color: #8e7710;
+}
+.dark-mode .table tbody tr.table-secondary th {
+    border-color: #47494d;
+}
+.dark-mode .table tbody tr.table-secondary td {
+    border-color: #47494d;
+}
+.dark-mode .table-bordered tbody tr.table-secondary th {
+    border-color: #47494d;
+}
+.dark-mode .table-bordered tbody tr.table-secondary td {
+    border-color: #47494d;
+}
+.dark-mode .table-inner-bordered tbody tr.table-secondary th {
+    border-color: #47494d;
+}
+.dark-mode .table-inner-bordered tbody tr.table-secondary td {
+    border-color: #47494d;
+}
+.dark-mode .table tbody tr.table-danger {
+    color: #ff4d4f;
+    background-color: #301923;
+    border-color: #8c0e2e;
+}
+.dark-mode .table-striped tbody tr.table-danger {
+    color: #ff4d4f;
+    background-color: #301923;
+    border-color: #8c0e2e;
+}
+.dark-mode .table-bordered tbody tr.table-danger {
+    color: #ff4d4f;
+    background-color: #301923;
+    border-color: #8c0e2e;
+}
+.dark-mode .table-inner-bordered tbody tr.table-danger {
+    color: #ff4d4f;
+    background-color: #301923;
+    border-color: #8c0e2e;
+}
+.dark-mode .table tbody tr.table-danger th {
+    border-color: #47494d;
+}
+.dark-mode .table tbody tr.table-danger td {
+    border-color: #47494d;
+}
+.dark-mode .table-bordered tbody tr.table-danger th {
+    border-color: #47494d;
+}
+.dark-mode .table-bordered tbody tr.table-danger td {
+    border-color: #47494d;
+}
+.dark-mode .table-inner-bordered tbody tr.table-danger th {
+    border-color: #47494d;
+}
+.dark-mode .table-inner-bordered tbody tr.table-danger td {
+    border-color: #47494d;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+11. Form elements [hm-11]
+-------------------------------------------------------------------------------
+*/
+
+/*
+Fieldsets, form-groups, form-rows and cols, labels, legends, form-text, 
+invalid-feedback, inline-form
+*/
+
+fieldset {
+    padding: 0;
+    border-width: 0;
+}
+label {
+    display: inline-block;
+    margin-bottom: 0.6rem;
+}
+label.required:after {
+    content: "*";
+    color: #ff4d4f;
+    margin-left: 0.3rem;
+}
+legend {
+    display: block;
+    margin-bottom: 0.6rem;
+}
+.form-group {
+    margin-bottom: 2rem;
+}
+
+/* Form rows */
+
+.form-row {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    margin-bottom: 2rem;
+}
+
+/* Form rows with equal spacing */
+
+.form-row.row-eq-spacing>[class^="col"] {
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+.form-row.row-eq-spacing>[class^="col"]:first-child {
+    padding-left: 0;
+}
+.form-row.row-eq-spacing>[class^="col"]:last-child {
+    padding-right: 0;
+}
+
+/* Adjustments for small screens and up (> 576px) */
+
+@media (min-width: 577px) {
+    .form-row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"] {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+    .form-row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]:first-child {
+        padding-left: 0;
+    }
+    .form-row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]:last-child {
+        padding-right: 0;
+    }
+}
+@media (max-width: 576px) {
+    .form-row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+}
+
+/* Adjustments for medium screens and up (> 768px) */
+
+@media (min-width: 769px) {
+    .form-row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+    .form-row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:first-child {
+        padding-left: 0;
+    }
+    .form-row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:last-child {
+        padding-right: 0;
+    }
+}
+@media (max-width: 768px) {
+    .form-row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+}
+
+/* Adjustments for large screens and up (> 992px) */
+
+@media (min-width: 993px) {
+    .form-row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+    .form-row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:first-child {
+        padding-left: 0;
+    }
+    .form-row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:last-child {
+        padding-right: 0;
+    }
+}
+@media (max-width: 992px) {
+    .form-row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+}
+
+/* Adjustments for extra large screens and up (> 1200px) */
+
+@media (min-width: 1201px) {
+    .form-row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+    .form-row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:first-child {
+        padding-left: 0;
+    }
+    .form-row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:last-child {
+        padding-right: 0;
+    }
+}
+@media (max-width: 1200px) {
+    .form-row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+}
+
+/* Form text and feedback */
+
+.form-text {
+    color: rgba(0, 0, 0, 0.7);
+    font-size: 1.4rem;
+    padding-top: 0.8rem;
+    padding-bottom: 0.8rem;
+    border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
+}
+.dark-mode .form-text {
+    color: rgba(255, 255, 255, 0.65);
+    border-color: rgba(255, 255, 255, 0.1);
+}
+.invalid-feedback {
+    color: #ff4d4f;
+    font-size: 1.4rem;
+    padding-top: 0.8rem;
+    padding-bottom: 0.8rem;
+}
+.dark-mode .invalid-feedback {
+    color: #ff4d4f;
+}
+
+/* Inline form */
+
+.form-inline,
+.form-inline .form-group {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-flow: row wrap;
+    flex-flow: row wrap;
+    -ms-flex-align: center;
+    align-items: center;
+}
+.form-inline .form-group {
+    width: 100%;
+}
+.form-inline > .form-control,
+.form-inline > .input-group,
+.form-inline .form-group > .form-control,
+.form-inline .form-group > .input-group {
+    position: relative;
+    -ms-flex: 1 1 0%;
+    flex: 1 1 0%;
+    min-width: 0;
+}
+.form-inline > label,
+.form-inline > .custom-control,
+.form-inline > .form-text,
+.form-inline > .invalid-feedback,
+.form-inline .form-group > label,
+.form-inline .form-group > .custom-control,
+.form-inline .form-group > .form-text,
+.form-inline .form-group > .invalid-feedback {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-align: center;
+    align-items: center;
+    min-width: 0;
+}
+.form-inline > label,
+.form-inline > .form-text,
+.form-inline > .invalid-feedback,
+.form-inline .form-group > label,
+.form-inline .form-group > .form-text,
+.form-inline .form-group > .invalid-feedback {
+    margin: 0;
+    padding: 0;
+    border: none;
+    white-space: nowrap;
+}
+.form-inline > .form-control:not(:last-child) {
+    margin-right: 1rem;
+}
+.form-inline > .input-group:not(:last-child) {
+    margin-right: 1rem;
+}
+.form-inline > label:not(:last-child) {
+    margin-right: 1rem;
+}
+.form-inline > .custom-control {
+    margin-right: 1rem;
+}
+.form-inline > .btn:not(:last-child) {
+    margin-right: 1rem;
+}
+.form-inline > a.btn:not(:last-child) {
+    margin-right: 1rem;
+}
+.form-inline > .form-text:not(:last-child) {
+    margin-right: 1rem;
+}
+.form-inline > .invalid-feedback:not(:last-child) {
+    margin-right: 1rem;
+}
+.form-inline .form-group > .form-control:not(:last-child) {
+    margin-right: 1rem;
+}
+.form-inline .form-group > .input-group:not(:last-child) {
+    margin-right: 1rem;
+}
+.form-inline .form-group > label:not(:last-child) {
+    margin-right: 1rem;
+}
+.form-inline .form-group > .custom-control {
+    margin-right: 1rem;
+}
+.form-inline .form-group > .btn:not(:last-child) {
+    margin-right: 1rem;
+}
+.form-inline .form-group > a.btn:not(:last-child) {
+    margin-right: 1rem;
+}
+.form-inline .form-group > .form-text:not(:last-child) {
+    margin-right: 1rem;
+}
+.form-inline .form-group > .invalid-feedback:not(:last-child) {
+    margin-right: 1rem;
+}
+
+/* Inline form for small screens and up (> 576px) */
+
+@media (min-width: 577px) {
+    .form-inline-sm,
+    .form-inline-sm .form-group {
+        display: -ms-flexbox;
+        display: flex;
+        -ms-flex-flow: row wrap;
+        flex-flow: row wrap;
+        -ms-flex-align: center;
+        align-items: center;
+    }
+    .form-inline-sm .form-group {
+        width: 100%;
+    }
+    .form-inline-sm > .form-control,
+    .form-inline-sm > .input-group,
+    .form-inline-sm .form-group > .form-control,
+    .form-inline-sm .form-group > .input-group {
+        position: relative;
+        -ms-flex: 1 1 0%;
+        flex: 1 1 0%;
+        min-width: 0;
+    }
+    .form-inline-sm > label,
+    .form-inline-sm > .custom-control,
+    .form-inline-sm > .form-text,
+    .form-inline-sm > .invalid-feedback,
+    .form-inline-sm .form-group > label,
+    .form-inline-sm .form-group > .custom-control,
+    .form-inline-sm .form-group > .form-text,
+    .form-inline-sm .form-group > .invalid-feedback {
+        display: -ms-flexbox;
+        display: flex;
+        -ms-flex-align: center;
+        align-items: center;
+        min-width: 0;
+    }
+    .form-inline-sm > label,
+    .form-inline-sm > .form-text,
+    .form-inline-sm > .invalid-feedback,
+    .form-inline-sm .form-group > label,
+    .form-inline-sm .form-group > .form-text,
+    .form-inline-sm .form-group > .invalid-feedback {
+        margin: 0;
+        padding: 0;
+        border: none;
+        white-space: nowrap;
+    }
+    .form-inline-sm > .form-control:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-sm > .input-group:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-sm > label:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-sm > .custom-control {
+        margin-right: 1rem;
+    }
+    .form-inline-sm > .btn:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-sm > a.btn:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-sm > .form-text:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-sm > .invalid-feedback:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-sm .form-group > .form-control:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-sm .form-group > .input-group:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-sm .form-group > label:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-sm .form-group > .custom-control {
+        margin-right: 1rem;
+    }
+    .form-inline-sm .form-group > .btn:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-sm .form-group > a.btn:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-sm .form-group > .form-text:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-sm .form-group > .invalid-feedback:not(:last-child) {
+        margin-right: 1rem;
+    }
+}
+@media (max-width: 576px) {
+    .form-inline-sm > .form-control:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+    .form-inline-sm > .input-group:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+    .form-inline-sm > .custom-control {
+        margin-bottom: 2rem;
+    }
+    .form-inline-sm > .btn:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+    .form-inline-sm > a.btn:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+    .form-inline-sm .form-group > .form-control:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+    .form-inline-sm .form-group > .input-group:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+    .form-inline-sm .form-group > .custom-control {
+        margin-bottom: 2rem;
+    }
+    .form-inline-sm .form-group > .btn:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+    .form-inline-sm .form-group > a.btn:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+}
+
+/* Inline form for medium screens and up (> 768px) */
+
+@media (min-width: 769px) {
+    .form-inline-md,
+    .form-inline-md .form-group {
+        display: -ms-flexbox;
+        display: flex;
+        -ms-flex-flow: row wrap;
+        flex-flow: row wrap;
+        -ms-flex-align: center;
+        align-items: center;
+    }
+    .form-inline-md .form-group {
+        width: 100%;
+    }
+    .form-inline-md > .form-control,
+    .form-inline-md > .input-group,
+    .form-inline-md .form-group > .form-control,
+    .form-inline-md .form-group > .input-group {
+        position: relative;
+        -ms-flex: 1 1 0%;
+        flex: 1 1 0%;
+        min-width: 0;
+    }
+    .form-inline-md > label,
+    .form-inline-md > .custom-control,
+    .form-inline-md > .form-text,
+    .form-inline-md > .invalid-feedback,
+    .form-inline-md .form-group > label,
+    .form-inline-md .form-group > .custom-control,
+    .form-inline-md .form-group > .form-text,
+    .form-inline-md .form-group > .invalid-feedback {
+        display: -ms-flexbox;
+        display: flex;
+        -ms-flex-align: center;
+        align-items: center;
+        min-width: 0;
+    }
+    .form-inline-md > label,
+    .form-inline-md > .form-text,
+    .form-inline-md > .invalid-feedback,
+    .form-inline-md .form-group > label,
+    .form-inline-md .form-group > .form-text,
+    .form-inline-md .form-group > .invalid-feedback {
+        margin: 0;
+        padding: 0;
+        border: none;
+        white-space: nowrap;
+    }
+    .form-inline-md > .form-control:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-md > .input-group:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-md > label:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-md > .custom-control {
+        margin-right: 1rem;
+    }
+    .form-inline-md > .btn:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-md > a.btn:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-md > .form-text:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-md > .invalid-feedback:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-md .form-group > .form-control:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-md .form-group > .input-group:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-md .form-group > label:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-md .form-group > .custom-control {
+        margin-right: 1rem;
+    }
+    .form-inline-md .form-group > .btn:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-md .form-group > a.btn:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-md .form-group > .form-text:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-md .form-group > .invalid-feedback:not(:last-child) {
+        margin-right: 1rem;
+    }
+}
+@media (max-width: 768px) {
+    .form-inline-md > .form-control:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+    .form-inline-md > .input-group:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+    .form-inline-md > .custom-control {
+        margin-bottom: 2rem;
+    }
+    .form-inline-md > .btn:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+    .form-inline-md > a.btn:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+    .form-inline-md .form-group > .form-control:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+    .form-inline-md .form-group > .input-group:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+    .form-inline-md .form-group > .custom-control {
+        margin-bottom: 2rem;
+    }
+    .form-inline-md .form-group > .btn:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+    .form-inline-md .form-group > a.btn:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+}
+
+/* Inline form for large screens and up (> 992px) */
+
+@media (min-width: 993px) {
+    .form-inline-lg,
+    .form-inline-lg .form-group {
+        display: -ms-flexbox;
+        display: flex;
+        -ms-flex-flow: row wrap;
+        flex-flow: row wrap;
+        -ms-flex-align: center;
+        align-items: center;
+    }
+    .form-inline-lg .form-group {
+        width: 100%;
+    }
+    .form-inline-lg > .form-control,
+    .form-inline-lg > .input-group,
+    .form-inline-lg .form-group > .form-control,
+    .form-inline-lg .form-group > .input-group {
+        position: relative;
+        -ms-flex: 1 1 0%;
+        flex: 1 1 0%;
+        min-width: 0;
+    }
+    .form-inline-lg > label,
+    .form-inline-lg > .custom-control,
+    .form-inline-lg > .form-text,
+    .form-inline-lg > .invalid-feedback,
+    .form-inline-lg .form-group > label,
+    .form-inline-lg .form-group > .custom-control,
+    .form-inline-lg .form-group > .form-text,
+    .form-inline-lg .form-group > .invalid-feedback {
+        display: -ms-flexbox;
+        display: flex;
+        -ms-flex-align: center;
+        align-items: center;
+        min-width: 0;
+    }
+    .form-inline-lg > label,
+    .form-inline-lg > .form-text,
+    .form-inline-lg > .invalid-feedback,
+    .form-inline-lg .form-group > label,
+    .form-inline-lg .form-group > .form-text,
+    .form-inline-lg .form-group > .invalid-feedback {
+        margin: 0;
+        padding: 0;
+        border: none;
+        white-space: nowrap;
+    }
+    .form-inline-lg > .form-control:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-lg > .input-group:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-lg > label:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-lg > .custom-control {
+        margin-right: 1rem;
+    }
+    .form-inline-lg > .btn:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-lg > a.btn:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-lg > .form-text:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-lg > .invalid-feedback:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-lg .form-group > .form-control:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-lg .form-group > .input-group:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-lg .form-group > label:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-lg .form-group > .custom-control {
+        margin-right: 1rem;
+    }
+    .form-inline-lg .form-group > .btn:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-lg .form-group > a.btn:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-lg .form-group > .form-text:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-lg .form-group > .invalid-feedback:not(:last-child) {
+        margin-right: 1rem;
+    }
+}
+@media (max-width: 992px) {
+    .form-inline-lg > .form-control:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+    .form-inline-lg > .input-group:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+    .form-inline-lg > .custom-control {
+        margin-bottom: 2rem;
+    }
+    .form-inline-lg > .btn:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+    .form-inline-lg > a.btn:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+    .form-inline-lg .form-group > .form-control:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+    .form-inline-lg .form-group > .input-group:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+    .form-inline-lg .form-group > .custom-control {
+        margin-bottom: 2rem;
+    }
+    .form-inline-lg .form-group > .btn:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+    .form-inline-lg .form-group > a.btn:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+}
+
+/* Inline form for extra large screens and up (> 1200px) */
+
+@media (min-width: 1201px) {
+    .form-inline-xl,
+    .form-inline-xl .form-group {
+        display: -ms-flexbox;
+        display: flex;
+        -ms-flex-flow: row wrap;
+        flex-flow: row wrap;
+        -ms-flex-align: center;
+        align-items: center;
+    }
+    .form-inline-xl .form-group {
+        width: 100%;
+    }
+    .form-inline-xl > .form-control,
+    .form-inline-xl > .input-group,
+    .form-inline-xl .form-group > .form-control,
+    .form-inline-xl .form-group > .input-group {
+        position: relative;
+        -ms-flex: 1 1 0%;
+        flex: 1 1 0%;
+        min-width: 0;
+    }
+    .form-inline-xl > label,
+    .form-inline-xl > .custom-control,
+    .form-inline-xl > .form-text,
+    .form-inline-xl > .invalid-feedback,
+    .form-inline-xl .form-group > label,
+    .form-inline-xl .form-group > .custom-control,
+    .form-inline-xl .form-group > .form-text,
+    .form-inline-xl .form-group > .invalid-feedback {
+        display: -ms-flexbox;
+        display: flex;
+        -ms-flex-align: center;
+        align-items: center;
+        min-width: 0;
+    }
+    .form-inline-xl > label,
+    .form-inline-xl > .form-text,
+    .form-inline-xl > .invalid-feedback,
+    .form-inline-xl .form-group > label,
+    .form-inline-xl .form-group > .form-text,
+    .form-inline-xl .form-group > .invalid-feedback {
+        margin: 0;
+        padding: 0;
+        border: none;
+        white-space: nowrap;
+    }
+    .form-inline-xl > .form-control:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-xl > .input-group:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-xl > label:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-xl > .custom-control {
+        margin-right: 1rem;
+    }
+    .form-inline-xl > .btn:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-xl > a.btn:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-xl > .form-text:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-xl > .invalid-feedback:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-xl .form-group > .form-control:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-xl .form-group > .input-group:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-xl .form-group > label:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-xl .form-group > .custom-control {
+        margin-right: 1rem;
+    }
+    .form-inline-xl .form-group > .btn:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-xl .form-group > a.btn:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-xl .form-group > .form-text:not(:last-child) {
+        margin-right: 1rem;
+    }
+    .form-inline-xl .form-group > .invalid-feedback:not(:last-child) {
+        margin-right: 1rem;
+    }
+}
+@media (max-width: 1200px) {
+    .form-inline-xl > .form-control:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+    .form-inline-xl > .input-group:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+    .form-inline-xl > .custom-control {
+        margin-bottom: 2rem;
+    }
+    .form-inline-xl > .btn:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+    .form-inline-xl > a.btn:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+    .form-inline-xl .form-group > .form-control:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+    .form-inline-xl .form-group > .input-group:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+    .form-inline-xl .form-group > .custom-control {
+        margin-bottom: 2rem;
+    }
+    .form-inline-xl .form-group > .btn:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+    .form-inline-xl .form-group > a.btn:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+}
+
+/* Inputs */
+
+.form-control {
+    display: block;
+    width: 100%;
+    height: 3.2rem;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 0.4rem;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    /* Removes the default styles on some devices. */
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+.form-control-sm {
+    height: 2.6rem;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
+    font-size: 1.2rem;
+}
+.form-control-lg {
+    height: 4rem;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
+    font-size: 1.8rem;
+}
+textarea.form-control {
+    max-width: 100%;
+    min-height: 10rem;
+    padding: 0.8rem;
+    line-height: 1.5;
+}
+textarea.form-control-sm {
+    min-height: 8rem;
+    padding: 0.8rem;
+}
+textarea.form-control-lg {
+    min-height: 14rem;
+    padding: 0.8rem;
+}
+.form-control:hover {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffffff;
+    border-color: rgba(0, 0, 0, 0.3);
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.form-control:focus {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffffff;
+    border-color: rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+    -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+    box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+    outline: none;
+}
+::-webkit-input-placeholder {
+    /* Edge */
+    color: rgba(0, 0, 0, 0.35);
+}
+:-ms-input-placeholder {
+    /* Internet Explorer 10-11 */
+    color: rgba(0, 0, 0, 0.35);
+}
+::placeholder {
+    color: rgba(0, 0, 0, 0.35);
+}
+.form-control.disabled {
+    /*
+    The :disabled selector must still be added to the input field for the 
+    forms to work as intended. Moreover, since focusing on an input with the 
+    :disabled selector is impossible, the :focus styles are not overridden 
+    (along with the :focus box shadows).
+    */
+    cursor: not-allowed;
+    opacity: 0.6;
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ecf0f1;
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.form-control:disabled {
+    /*
+    The :disabled selector must still be added to the input field for the 
+    forms to work as intended. Moreover, since focusing on an input with the 
+    :disabled selector is impossible, the :focus styles are not overridden 
+    (along with the :focus box shadows).
+    */
+    cursor: not-allowed;
+    opacity: 0.6;
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ecf0f1;
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.form-control.disabled:hover {
+    /*
+    The :disabled selector must still be added to the input field for the 
+    forms to work as intended. Moreover, since focusing on an input with the 
+    :disabled selector is impossible, the :focus styles are not overridden 
+    (along with the :focus box shadows).
+    */
+    cursor: not-allowed;
+    opacity: 0.6;
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ecf0f1;
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.form-control:disabled:hover {
+    /*
+    The :disabled selector must still be added to the input field for the 
+    forms to work as intended. Moreover, since focusing on an input with the 
+    :disabled selector is impossible, the :focus styles are not overridden 
+    (along with the :focus box shadows).
+    */
+    cursor: not-allowed;
+    opacity: 0.6;
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ecf0f1;
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .form-control {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.05);
+    border-color: rgba(0, 0, 0, 0.3);
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.dark-mode .form-control:hover {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.05);
+    border-color: rgba(0, 0, 0, 0.4);
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.dark-mode .form-control:focus {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.05);
+    border-color: rgba(0, 0, 0, 0.4);
+    -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+    -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+    box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+    outline: none;
+}
+.dark-mode ::-webkit-input-placeholder {
+    /* Edge */
+    color: rgba(255, 255, 255, 0.2);
+}
+.dark-mode :-ms-input-placeholder {
+    /* Internet Explorer 10-11 */
+    color: rgba(255, 255, 255, 0.2);
+}
+.dark-mode ::placeholder {
+    color: rgba(255, 255, 255, 0.2);
+}
+.dark-mode .form-control.disabled {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(0, 0, 0, 0.15);
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .form-control:disabled {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(0, 0, 0, 0.15);
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .form-control.disabled:hover {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(0, 0, 0, 0.15);
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .form-control:disabled:hover {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(0, 0, 0, 0.15);
+    border-color: rgba(0, 0, 0, 0.3);
+}
+
+/* Alternate dark mode inputs */
+
+.dark-mode .form-control.alt-dm {
+    color: inherit;
+    background-color: rgba(0, 0, 0, 0.15);
+    border-color: transparent;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.dark-mode .form-control.alt-dm:hover {
+    color: inherit;
+    background-color: rgba(0, 0, 0, 0.15);
+    border-color: rgba(0, 0, 0, 0.1);
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.dark-mode .form-control.alt-dm:focus {
+    color: inherit;
+    background-color: rgba(0, 0, 0, 0.15);
+    border-color: inherit;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.dark-mode .form-control.alt-dm::-webkit-input-placeholder {
+    /* Edge */
+    color: rgba(255, 255, 255, 0.5);
+}
+.dark-mode .form-control.alt-dm:-ms-input-placeholder {
+    /* Internet Explorer 10-11 */
+    color: rgba(255, 255, 255, 0.5);
+}
+.dark-mode .form-control.alt-dm::placeholder {
+    color: rgba(255, 255, 255, 0.5);
+}
+.dark-mode .form-control.alt-dm.disabled {
+    color: inherit;
+    background-color: rgba(0, 0, 0, 0.3);
+    border-color: transparent;
+}
+.dark-mode .form-control.alt-dm:disabled {
+    color: inherit;
+    background-color: rgba(0, 0, 0, 0.3);
+    border-color: transparent;
+}
+.dark-mode .form-control.alt-dm.disabled:hover {
+    color: inherit;
+    background-color: rgba(0, 0, 0, 0.3);
+    border-color: transparent;
+}
+.dark-mode .form-control.alt-dm:disabled:hover {
+    color: inherit;
+    background-color: rgba(0, 0, 0, 0.3);
+    border-color: transparent;
+}
+
+/* Inputs invalid (with errors) */
+
+.form-group.is-invalid .form-control {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffffff;
+    border-color: #ff4d4f;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+.form-control.is-invalid {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffffff;
+    border-color: #ff4d4f;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.form-group.is-invalid .form-control:hover {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffffff;
+    border-color: #ff4d4f;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.form-control.is-invalid:hover {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffffff;
+    border-color: #ff4d4f;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.form-group.is-invalid .form-control:focus {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffffff;
+    border-color: #f8d0d9;
+    -moz-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6);
+    -webkit-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6);
+    box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6);
+    outline: none;
+}
+.form-control.is-invalid:focus {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffffff;
+    border-color: #f8d0d9;
+    -moz-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6);
+    -webkit-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6);
+    box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6);
+    outline: none;
+}
+.form-group.is-invalid .form-control::-webkit-input-placeholder {
+    /* Edge */
+    color: rgba(0, 0, 0, 0.35);
+}
+.form-group.is-invalid .form-control:-ms-input-placeholder {
+    /* Internet Explorer 10-11 */
+    color: rgba(0, 0, 0, 0.35);
+}
+.form-group.is-invalid .form-control::placeholder {
+    color: rgba(0, 0, 0, 0.35);
+}
+.form-control.is-invalid::-webkit-input-placeholder {
+    /* Edge */
+    color: rgba(0, 0, 0, 0.35);
+}
+.form-control.is-invalid:-ms-input-placeholder {
+    /* Internet Explorer 10-11 */
+    color: rgba(0, 0, 0, 0.35);
+}
+.form-control.is-invalid::placeholder {
+    color: rgba(0, 0, 0, 0.35);
+}
+.dark-mode .form-group.is-invalid .form-control {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.05);
+    border-color: #ff4d4f;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.dark-mode .form-control.is-invalid {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.05);
+    border-color: #ff4d4f;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.dark-mode .form-group.is-invalid .form-control:hover {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.05);
+    border-color: #ff4d4f;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.dark-mode .form-control.is-invalid:hover {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.05);
+    border-color: #ff4d4f;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.dark-mode .form-group.is-invalid .form-control:focus {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.05);
+    border-color: #ff4d4f;
+    -moz-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+    -webkit-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+    box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+    outline: none;
+}
+.dark-mode .form-control.is-invalid:focus {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.05);
+    border-color: #ff4d4f;
+    -moz-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+    -webkit-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+    box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+    outline: none;
+}
+.dark-mode .form-group.is-invalid .form-control::-webkit-input-placeholder {
+    /* Edge */
+    color: rgba(255, 255, 255, 0.2);
+}
+.dark-mode .form-group.is-invalid .form-control:-ms-input-placeholder {
+    /* Internet Explorer 10-11 */
+    color: rgba(255, 255, 255, 0.2);
+}
+.dark-mode .form-group.is-invalid .form-control::placeholder {
+    color: rgba(255, 255, 255, 0.2);
+}
+.dark-mode .form-control.is-invalid::-webkit-input-placeholder {
+    /* Edge */
+    color: rgba(255, 255, 255, 0.2);
+}
+.dark-mode .form-control.is-invalid:-ms-input-placeholder {
+    /* Internet Explorer 10-11 */
+    color: rgba(255, 255, 255, 0.2);
+}
+.dark-mode .form-control.is-invalid::placeholder {
+    color: rgba(255, 255, 255, 0.2);
+}
+.dark-mode .form-group.is-invalid .form-control.alt-dm {
+    color: inherit;
+    background-color: rgba(0, 0, 0, 0.15);
+    border-color: #ed586c;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.dark-mode .form-control.alt-dm.is-invalid {
+    color: inherit;
+    background-color: rgba(0, 0, 0, 0.15);
+    border-color: #ed586c;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.dark-mode .form-group.is-invalid .form-control.alt-dm:hover {
+    color: inherit;
+    background-color: rgba(0, 0, 0, 0.15);
+    border-color: #ed586c;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.dark-mode .form-control.alt-dm.is-invalid:hover {
+    color: inherit;
+    background-color: rgba(0, 0, 0, 0.15);
+    border-color: #ed586c;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.dark-mode .form-group.is-invalid .form-control.alt-dm:focus {
+    color: inherit;
+    background-color: rgba(0, 0, 0, 0.15);
+    border-color: #ed586c;
+    -moz-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+    -webkit-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+    box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+    outline: none;
+}
+.dark-mode .form-control.alt-dm.is-invalid:focus {
+    color: inherit;
+    background-color: rgba(0, 0, 0, 0.15);
+    border-color: #ed586c;
+    -moz-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+    -webkit-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+    box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+    outline: none;
+}
+.dark-mode .form-group.is-invalid .form-control.alt-dm.is-invalid::-webkit-input-placeholder {
+    /* Edge */
+    color: rgba(255, 255, 255, 0.5);
+}
+.dark-mode .form-group.is-invalid .form-control.alt-dm.is-invalid:-ms-input-placeholder {
+    /* Internet Explorer 10-11 */
+    color: rgba(255, 255, 255, 0.5);
+}
+.dark-mode .form-group.is-invalid .form-control.alt-dm.is-invalid::placeholder {
+    color: rgba(255, 255, 255, 0.5);
+}
+.dark-mode .form-control.alt-dm.is-invalid::-webkit-input-placeholder {
+    /* Edge */
+    color: rgba(255, 255, 255, 0.5);
+}
+.dark-mode .form-control.alt-dm.is-invalid:-ms-input-placeholder {
+    /* Internet Explorer 10-11 */
+    color: rgba(255, 255, 255, 0.5);
+}
+.dark-mode .form-control.alt-dm.is-invalid::placeholder {
+    color: rgba(255, 255, 255, 0.5);
+}
+
+/* Selects */
+
+select.form-control:not([multiple]) {
+    cursor: pointer;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAI9JREFUeNpiZACCyMjIBCDVD8SOy5cvv8BAAgDqNQBS+4G4EKh3ASPUsPlQ+Q+kGIpkmABUKJEJ6jIYAEnshyok1TAQ6AcZ6Ah1GdGG4jAM7DtGQgrQvU9ILSOxColVw0is7VA2QV8wkhA+DMQECSMJgc5AyDCcBhIwFG9aZSQxrRFM+IwkJGAGYnIRQIABACQuXCKovu2mAAAAAElFTkSuQmCC);
+    background-size: 1rem;
+    background-repeat: no-repeat;
+    background-position: calc(100% - 1rem) center;
+    padding-right: 3.6rem;
+}
+.dark-mode select.form-control:not([multiple]) > option {
+    /* Required for some browsers, such as Firefox, or the old Ms Edge (ignored on webkit browsers) */
+    color: rgba(255, 255, 255, 0.8);
+    background-color: #191c20;
+}
+.dark-mode select.form-control:not([multiple]) > option:hover {
+    /* Required for some browsers, such as Firefox, or the old Ms Edge (ignored on webkit browsers) */
+    color: rgba(255, 255, 255, 0.8);
+    background-color: #1890ff;
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
+    /*
+    This hack resets the select boxes to their defaults on IE, because it is 
+    not possible to remove the default dropdown arrow.
+    */
+    select.form-control:not([multiple]) {
+        background-image: none;
+        background-size: auto;
+        background-repeat: initial;
+        background-position: 0% 0%;
+        padding-right: 0;
+    } 
+}
+select.form-control[multiple] {
+    overflow: auto;
+    height: auto;
+    padding: 0.8rem;
+}
+select.form-control-sm[multiple] {
+    padding: 0.8rem;
+}
+select.form-control-lg[multiple] {
+    padding: 0.8rem;
+}
+select.form-control[multiple] > option:not(:checked) {
+    color: rgba(0, 0, 0, 0.85);
+}
+.dark-mode select.form-control[multiple] > option:not(:checked) {
+    color: rgba(255, 255, 255, 0.8);
+}
+select.form-control[multiple] > option:disabled {
+    color: rgba(0, 0, 0, 0.6);
+}
+.dark-mode select.form-control[multiple] > option:disabled {
+    color: rgba(255, 255, 255, 0.6);
+}
+
+/* Checkbox */
+
+.custom-checkbox {
+    display: block;
+    position: relative;
+    line-height: 1.8rem;
+}
+.custom-checkbox input[type="checkbox"] {
+    /* Hide the default */
+    position: absolute;
+    opacity: 0;
+    height: 0;
+    width: 0;
+}
+.custom-checkbox label {
+    display: inline-block;
+    margin-bottom: 0;
+    padding-left: 2.5rem;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+.custom-checkbox label.blank {
+    padding-left: 1.8rem;
+}
+.custom-checkbox label:before {
+    content: "";
+    display: inline-block;
+    position: absolute;
+    height: 1.8rem;
+    width: 1.8rem;
+    top: 0;
+    left: 0;
+    background-color: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    border-radius: 0.4rem;
+}
+.custom-checkbox input[type="checkbox"]:hover~label:before {
+    background-color: #ffffff;
+    border-color: rgba(0, 0, 0, 0.4);
+}
+.custom-checkbox input[type="checkbox"]:focus~label:before {
+    border-color: rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+    -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+    box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+}
+.custom-checkbox input[type="checkbox"]:checked~label:before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+.custom-checkbox input[type="checkbox"]:checked:focus~label:before {
+    border-color: #1890ff;
+    -moz-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+    -webkit-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+    box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+}
+.dark-mode .custom-checkbox label:before {
+    background-color: transparent;
+    border-color: rgba(255, 255, 255, 0.15);
+}
+.dark-mode .custom-checkbox input[type="checkbox"]:hover~label:before {
+    background-color: transparent;
+    border-color: rgba(255, 255, 255, 0.3);
+}
+.dark-mode .custom-checkbox input[type="checkbox"]:focus~label:before {
+    border-color: rgba(0, 0, 0, 0.4);
+    -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+    -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+    box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+}
+.dark-mode .custom-checkbox input[type="checkbox"]:checked~label:before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+.dark-mode .custom-checkbox input[type="checkbox"]:checked:focus~label:before {
+    border-color: #1890ff;
+    -moz-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+    -webkit-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+    box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+}
+.custom-checkbox label:after {
+    content: "";
+    position: absolute;
+    display: none;
+    left: 0.6rem;
+    top: 0.3rem;
+    width: 0.6rem;
+    height: 1rem;
+    border: solid #ffffff;
+    border-width: 0 0.2rem 0.2rem 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
+.dark-mode .custom-checkbox label:after {
+    border-color: #ffffff;
+}
+.custom-checkbox input[type="checkbox"]:checked~label:after {
+    display: block;
+}
+.custom-checkbox input[type="checkbox"]:disabled~label {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+.custom-checkbox input[type="checkbox"]:disabled~label:before {
+    background-color: #ffffff;
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.custom-checkbox input[type="checkbox"]:hover:disabled~label:before {
+    background-color: #ffffff;
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.custom-checkbox input[type="checkbox"]:disabled:checked~label:before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+.custom-checkbox input[type="checkbox"]:hover:disabled:checked~label:before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+.dark-mode .custom-checkbox input[type="checkbox"]:disabled~label:before {
+    background-color: transparent;
+    border-color: rgba(255, 255, 255, 0.15);
+}
+.dark-mode .custom-checkbox input[type="checkbox"]:hover:disabled~label:before {
+    background-color: transparent;
+    border-color: rgba(255, 255, 255, 0.15);
+}
+.dark-mode .custom-checkbox input[type="checkbox"]:disabled:checked~label:before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+.dark-mode .custom-checkbox input[type="checkbox"]:hover:disabled:checked~label:before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+
+/* Radio */
+
+.custom-radio {
+    display: block;
+    position: relative;
+    line-height: 1.6rem;
+}
+.form-group .custom-radio {
+    margin: 0.8rem 0 0 0;
+}
+.custom-radio input[type="radio"] {
+    /* Hide the default */
+    position: absolute;
+    opacity: 0;
+    height: 0;
+    width: 0;
+}
+.custom-radio label {
+    display: inline-block;
+    margin-bottom: 0;
+    padding-left: 2.5rem;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+.custom-radio label.blank {
+    padding-left: 1.6rem;
+}
+.custom-radio label:before {
+    content: "";
+    display: inline-block;
+    position: absolute;
+    height: 1.6rem;
+    width: 1.6rem;
+    top: 0;
+    left: 0;
+    background-color: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    border-radius: 50%;
+}
+.custom-radio input[type="radio"]:hover~label:before {
+    background-color: #ffffff;
+    border-color: rgba(0, 0, 0, 0.4);
+}
+.custom-radio input[type="radio"]:focus~label:before {
+    border-color: rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+    -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+    box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+}
+.custom-radio input[type="radio"]:checked~label:before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+.custom-radio input[type="radio"]:checked:focus~label:before {
+    border-color: #1890ff;
+    -moz-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+    -webkit-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+    box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+}
+.dark-mode .custom-radio label:before {
+    background-color: transparent;
+    border-color: rgba(255, 255, 255, 0.15);
+}
+.dark-mode .custom-radio input[type="radio"]:hover~label:before {
+    background-color: transparent;
+    border-color: rgba(255, 255, 255, 0.3);
+}
+.dark-mode .custom-radio input[type="radio"]:focus~label:before {
+    border-color: rgba(0, 0, 0, 0.4);
+    -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+    -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+    box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+}
+.dark-mode .custom-radio input[type="radio"]:checked~label:before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+.dark-mode .custom-radio input[type="radio"]:checked:focus~label:before {
+    border-color: #1890ff;
+    -moz-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+    -webkit-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+    box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+}
+.custom-radio label:after{
+    content: "";
+    position: absolute;
+    display: none;
+    top: 0.5rem;
+    left: 0.5rem;
+    width: 0.6rem;
+    height: 0.6rem;
+    background-color: #ffffff;
+    border-radius: 50%;
+}
+.dark-mode .custom-radio label:after {
+    border-color: #ffffff;
+}
+.custom-radio input[type="radio"]:checked~label:after {
+    display: block;
+}
+.custom-radio input[type="radio"]:disabled~label {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+.custom-radio input[type="radio"]:disabled~label:before {
+    background-color: #ffffff;
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.custom-radio input[type="radio"]:hover:disabled~label:before {
+    background-color: #ffffff;
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.custom-radio input[type="radio"]:disabled:checked~label:before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+.custom-radio input[type="radio"]:hover:disabled:checked~label:before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+.dark-mode .custom-radio input[type="radio"]:disabled~label:before {
+    background-color: transparent;
+    border-color: rgba(255, 255, 255, 0.15);
+}
+.dark-mode .custom-radio input[type="radio"]:hover:disabled~label:before {
+    background-color: transparent;
+    border-color: rgba(255, 255, 255, 0.15);
+}
+.dark-mode .custom-radio input[type="radio"]:disabled:checked~label:before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+.dark-mode .custom-radio input[type="radio"]:hover:disabled:checked~label:before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+
+/* Switch */
+
+.custom-switch {
+    display: block;
+    position: relative;
+    line-height: 2rem;
+}
+.custom-switch input[type="checkbox"] {
+    /* Hide the default */
+    position: absolute;
+    opacity: 0;
+    height: 0;
+    width: 0;
+}
+.custom-switch label {
+    display: inline-block;
+    margin-bottom: 0;
+    padding-left: calc(3.2rem + 0.8rem);
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+.custom-switch label.blank {
+    padding-left: 3.2rem;
+}
+.custom-switch label:before {
+    content: "";
+    display: inline-block;
+    position: absolute;
+    height: 2rem;
+    width: 3.2rem;
+    top: 0;
+    left: 0;
+    background-color: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    border-radius: 2rem;
+}
+.custom-switch input[type="checkbox"]:hover~label:before {
+    background-color: #ffffff;
+    border-color: rgba(0, 0, 0, 0.4);
+}
+.custom-switch input[type="checkbox"]:focus~label:before {
+    border-color: rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+    -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+    box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+}
+.custom-switch input[type="checkbox"]:checked~label:before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+.custom-switch input[type="checkbox"]:checked:focus~label:before {
+    border-color: #1890ff;
+    -moz-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+    -webkit-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+    box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+}
+.dark-mode .custom-switch label:before {
+    background-color: transparent;
+    border-color: rgba(255, 255, 255, 0.15);
+}
+.dark-mode .custom-switch input[type="checkbox"]:hover~label:before {
+    background-color: transparent;
+    border-color: rgba(255, 255, 255, 0.3);
+}
+.dark-mode .custom-switch input[type="checkbox"]:focus~label:before {
+    border-color: rgba(0, 0, 0, 0.4);
+    -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+    -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+    box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+}
+.dark-mode .custom-switch input[type="checkbox"]:checked~label:before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+.dark-mode .custom-switch input[type="checkbox"]:checked:focus~label:before {
+    border-color: #1890ff;
+    -moz-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+    -webkit-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+    box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+}
+.custom-switch label:after{
+    content: "";
+    position: absolute;
+    height: 1.2rem;
+    width: 1.2rem;
+    top: 0.4rem;
+    left: 0.5rem;
+    background-color: rgba(0, 0, 0, 0.2);
+    border: 0 solid rgba(0, 0, 0, 0.2);
+    border-radius: 50%;
+    -webkit-transition: left .1s;
+    transition: left .1s;
+}
+.dark-mode .custom-switch label:after {
+    background-color: rgba(255, 255, 255, 0.15);
+    border-color: rgba(255, 255, 255, 0.15);
+}
+.custom-switch input[type="checkbox"]:checked~label:after {
+    top: 0.4rem;
+    left: calc(3.2rem - 1.2rem - 0.5rem);
+    background-color: #ffffff;
+    border-color: #ffffff;
+}
+.dark-mode .custom-switch input[type="checkbox"]:checked~label:after {
+    background-color: #ffffff;
+    border-color: #ffffff;
+}
+.custom-switch input[type="checkbox"]:disabled~label {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+.custom-switch input[type="checkbox"]:disabled~label:before {
+    background-color: #ffffff;
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.custom-switch input[type="checkbox"]:hover:disabled~label:before {
+    background-color: #ffffff;
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.custom-switch input[type="checkbox"]:disabled:checked~label:before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+.custom-switch input[type="checkbox"]:hover:disabled:checked~label:before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+.dark-mode .custom-switch input[type="checkbox"]:disabled~label:before {
+    background-color: transparent;
+    border-color: rgba(255, 255, 255, 0.15);
+}
+.dark-mode .custom-switch input[type="checkbox"]:hover:disabled~label:before {
+    background-color: transparent;
+    border-color: rgba(255, 255, 255, 0.15);
+}
+.dark-mode .custom-switch input[type="checkbox"]:disabled:checked~label:before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+.dark-mode .custom-switch input[type="checkbox"]:hover:disabled:checked~label:before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+
+/* Input file */
+
+.custom-file {
+    display: block;
+    position: relative;
+}
+.custom-file input[type="file"] {
+    /* Hide the default */
+    position: absolute;
+    opacity: 0;
+    height: 0;
+    width: 0;
+    z-index: -1; /* Needed to stop the default button from interfering in some browsers, such as Safari */
+}
+.custom-file label {
+    display: inline-block;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    height: 3.2rem;
+    line-height: 3.2rem;
+    padding: 0 1.5rem;
+    color: rgba(0, 0, 0, 0.7);
+    background-color: #ffffff;
+    background-image: none;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 0.4rem;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.custom-file label:hover {
+    color: rgba(0, 0, 0, 0.7);
+    background-color: #f7f7f7;
+    background-image: none;
+    border-color: rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.custom-file input[type="file"]:focus~label {
+    color: rgba(0, 0, 0, 0.7);
+    background-color: #ffffff;
+    background-image: none;
+    border-color: rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+    -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+    box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+}
+.custom-file input[type="file"]:focus:hover~label {
+    /*
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: rgba(0, 0, 0, 0.7);
+    background-color: #f7f7f7;
+    background-image: none;
+}
+.dark-mode .custom-file label {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.05);
+    background-image: none;
+    border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+}
+.dark-mode .custom-file label:hover {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.1);
+    background-image: none;
+    border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+}
+.dark-mode .custom-file input[type="file"]:focus~label {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.05);
+    background-image: none;
+    border-color: rgba(0, 0, 0, 0.4);
+    -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+    -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+    box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+}
+.dark-mode .custom-file input[type="file"]:focus:hover~label {
+    /*
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.1);
+    background-image: none;
+}
+.custom-file input[type="file"]:disabled~label {
+    opacity: 0.6;
+    cursor: not-allowed;
+    color: rgba(0, 0, 0, 0.7);
+    background-color: #ffffff;
+    background-image: none;
+    border-color: rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.custom-file:hover input[type="file"]:disabled~label {
+    opacity: 0.6;
+    cursor: not-allowed;
+    color: rgba(0, 0, 0, 0.7);
+    background-color: #ffffff;
+    background-image: none;
+    border-color: rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.dark-mode .custom-file input[type="file"]:disabled~label {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.05);
+    background-image: none;
+    border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.dark-mode .custom-file:hover input[type="file"]:disabled~label {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.05);
+    background-image: none;
+    border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.custom-file input[type="file"]:disabled~.file-names {
+    opacity: 0.6;
+    pointer-events: none;
+}
+
+/* Invalid input file */
+
+.form-group.is-invalid .custom-file label {
+    color: rgba(0, 0, 0, 0.7);
+    background-color: #ffffff;
+    background-image: none;
+    border-color: #ff4d4f;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+
+.custom-file input[type="file"].is-invalid~label {
+    color: rgba(0, 0, 0, 0.7);
+    background-color: #ffffff;
+    background-image: none;
+    border-color: #ff4d4f;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.form-group.is-invalid .custom-file label:hover {
+    color: rgba(0, 0, 0, 0.7);
+    background-color: #f7f7f7;
+    background-image: none;
+    border-color: #ff4d4f;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.custom-file input[type="file"].is-invalid~label:hover {
+    color: rgba(0, 0, 0, 0.7);
+    background-color: #f7f7f7;
+    background-image: none;
+    border-color: #ff4d4f;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.form-group.is-invalid .custom-file input[type="file"]:focus~label {
+    color: rgba(0, 0, 0, 0.7);
+    background-color: #ffffff;
+    background-image: none;
+    border-color: #f8d0d9;
+    -moz-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6);
+    -webkit-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6);
+    box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6);
+}
+.custom-file input[type="file"].is-invalid:focus~label {
+    color: rgba(0, 0, 0, 0.7);
+    background-color: #ffffff;
+    background-image: none;
+    border-color: #f8d0d9;
+    -moz-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6);
+    -webkit-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6);
+    box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6);
+}
+.form-group.is-invalid .custom-file input[type="file"]:focus:hover~label {
+    /*
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: rgba(0, 0, 0, 0.7);
+    background-color: #f7f7f7;
+    background-image: none;
+}
+.custom-file input[type="file"].is-invalid:focus:hover~label {
+    /*
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: rgba(0, 0, 0, 0.7);
+    background-color: #f7f7f7;
+    background-image: none;
+}
+.dark-mode .form-group.is-invalid .custom-file label {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.05);
+    background-image: none;
+    border-color: #ff4d4f;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+}
+.dark-mode .custom-file input[type="file"].is-invalid~label {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.05);
+    background-image: none;
+    border-color: #ff4d4f;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+}
+.dark-mode .form-group.is-invalid .custom-file label:hover {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.1);
+    background-image: none;
+    border-color: #ff4d4f;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+}
+.dark-mode .custom-file input[type="file"].is-invalid~label:hover {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.1);
+    background-image: none;
+    border-color: #ff4d4f;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+}
+.dark-mode .form-group.is-invalid .custom-file input[type="file"]:focus~label {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.05);
+    background-image: none;
+    border-color: #ff4d4f;
+    -moz-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+    -webkit-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+    box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+}
+.dark-mode .custom-file input[type="file"].is-invalid:focus~label {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.05);
+    background-image: none;
+    border-color: #ff4d4f;
+    -moz-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+    -webkit-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+    box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+}
+.dark-mode .form-group.is-invalid .custom-file input[type="file"]:focus:hover~label {
+    /* 
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.1);
+    background-image: none;
+}
+.dark-mode .custom-file input[type="file"].is-invalid:focus:hover~label {
+    /* 
+    Only text color and background properties are overridden, while the border 
+    color, box shadow, and the outline of the focus selector is kept.
+    */
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.1);
+    background-image: none;
+}
+
+/* Input group */
+
+.input-group {
+    position: relative;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -ms-flex-align: stretch;
+    align-items: stretch;
+    width: 100%;
+}
+.input-group > .form-control {
+    position: relative;
+    -ms-flex: 1 1 0%;
+    flex: 1 1 0%;
+    min-width: 0;
+    margin-bottom: 0;
+}
+.input-group-prepend,
+.input-group-append {
+    display: -ms-flexbox;
+    display: flex;
+}
+.input-group-prepend > .btn,
+.input-group-append > .btn {
+    position: relative;
+}
+.input-group-sm > .form-control {
+    height: 2.6rem;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
+    font-size: 1.2rem;
+}
+.input-group-lg > .form-control {
+    height: 4rem;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
+    font-size: 1.8rem;
+}
+
+/* Input group text */
+
+.input-group-text {
+    white-space: nowrap;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-align: center;
+    align-items: center;
+    text-align: center;
+    height: 100%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ecf0f1;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 0.4rem;
+}
+.dark-mode .input-group-text {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.input-group-sm .input-group-text {
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
+    font-size: 1.2rem;
+}
+.input-group-lg .input-group-text {
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
+    font-size: 1.8rem;
+}
+
+/* Input group button */
+
+.input-group-sm > .input-group-prepend > .btn {
+    height: 2.6rem;
+    line-height: 2.6rem;
+    padding: 0 1rem;
+    font-size: 1.2rem;
+}
+
+.input-group-sm > .input-group-append > .btn {
+    height: 2.6rem;
+    line-height: 2.6rem;
+    padding: 0 1rem;
+    font-size: 1.2rem;
+}
+.input-group-lg > .input-group-prepend > .btn {
+    height: 4rem;
+    line-height: 4rem;
+    padding: 0 2rem;
+    font-size: 1.8rem;
+}
+.input-group-lg > .input-group-append > .btn {
+    height: 4rem;
+    line-height: 4rem;
+    padding: 0 2rem;
+    font-size: 1.8rem;
+}
+.input-group-sm > .input-group-prepend > .btn-square {
+    width: 2.6rem;
+    padding-left: 0;
+    padding-right: 0;
+}
+.input-group-sm > .input-group-append > .btn-square {
+    width: 2.6rem;
+    padding-left: 0;
+    padding-right: 0;
+}
+.input-group-lg > .input-group-prepend > .btn-square {
+    width: 4rem;
+    padding-left: 0;
+    padding-right: 0;
+}
+.input-group-lg > .input-group-append > .btn-square {
+    width: 4rem;
+    padding-left: 0;
+    padding-right: 0;
+}
+.input-group-sm > .input-group-prepend > .btn-rounded {
+    border-radius: 2.6rem;
+}
+.input-group-sm > .input-group-append > .btn-rounded {
+    border-radius: 2.6rem;
+}
+.input-group-lg > .input-group-prepend > .btn-rounded {
+    border-radius: 4rem;
+}
+.input-group-lg > .input-group-append > .btn-rounded {
+    border-radius: 4rem;
+}
+
+/* Input group borders */
+
+.input-group > .form-control:not(:first-child),
+.input-group-prepend:not(:first-child) > .input-group-text,
+.input-group-append:not(:first-child) > .input-group-text,
+.input-group-prepend:not(:first-child) > .btn,
+.input-group-append:not(:first-child) > .btn {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+.input-group > .form-control:not(:last-child),
+.input-group-prepend:not(:last-child) > .input-group-text,
+.input-group-append:not(:last-child) > .input-group-text,
+.input-group-prepend:not(:last-child) > .btn,
+.input-group-append:not(:last-child) > .btn {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+.input-group > .form-control:focus,
+.input-group-prepend > .btn:focus,
+.input-group-prepend > .btn.active,
+.input-group-append > .btn:focus,
+.input-group-append > .btn.active {
+    z-index: 1;
+}
+.input-group > .form-control:not(:first-child) {
+    margin-left: calc((-1) * 1px);
+}
+.input-group-prepend:not(:first-child) > .input-group-text {
+    margin-left: calc((-1) * 1px);
+}
+.input-group-append:not(:first-child) > .input-group-text {
+    margin-left: calc((-1) * 1px);
+}
+.input-group-prepend:not(:first-child) > .btn {
+    margin-left: calc((-1) * 1px);
+}
+.input-group-append:not(:first-child) > .btn {
+    margin-left: calc((-1) * 1px);
+}
+
+/* Buttons (only border colors) */
+
+.input-group-prepend > .btn {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+
+.input-group-append > .btn {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.input-group-prepend > .btn:hover {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.input-group-append > .btn:hover {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.input-group-prepend > .btn:focus {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.input-group-append > .btn:focus {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.input-group-prepend > .btn.active {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.input-group-append > .btn.active {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .input-group-prepend > .btn {
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .input-group-append > .btn {
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .input-group-prepend > .btn:hover {
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .input-group-append > .btn:hover {
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .input-group-prepend > .btn:focus {
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .input-group-append > .btn:focus {
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .input-group-prepend > .btn.active {
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .input-group-append > .btn.active {
+    border-color: rgba(0, 0, 0, 0.3);
+}
+
+/* Link button */
+
+.input-group-prepend > .btn.btn-link {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+
+.input-group-append > .btn.btn-link {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.input-group-prepend > .btn.btn-link:hover {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.input-group-append > .btn.btn-link:hover {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.input-group-prepend > .btn.btn-link:focus {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.input-group-append > .btn.btn-link:focus {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.input-group-prepend > .btn.btn-link.active {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.input-group-append > .btn.btn-link.active {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .input-group-prepend > .btn.btn-link {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .input-group-append > .btn.btn-link {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .input-group-prepend > .btn.btn-link:hover {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .input-group-append > .btn.btn-link:hover {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .input-group-prepend > .btn.btn-link:focus {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .input-group-append > .btn.btn-link:focus {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .input-group-prepend > .btn.btn-link.active {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .input-group-append > .btn.btn-link.active {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+
+/* Primary button */
+
+.input-group-prepend > .btn.btn-primary {
+    border-color: #1890ff;
+}
+
+.input-group-append > .btn.btn-primary {
+    border-color: #1890ff;
+}
+.input-group-prepend > .btn.btn-primary:hover {
+    border-color: #45a3fb;
+}
+.input-group-append > .btn.btn-primary:hover {
+    border-color: #45a3fb;
+}
+.input-group-prepend > .btn.btn-primary:focus {
+    border-color: #1890ff;
+}
+.input-group-append > .btn.btn-primary:focus {
+    border-color: #1890ff;
+}
+.input-group-prepend > .btn.btn-primary.active {
+    border-color: #1890ff;
+}
+.input-group-append > .btn.btn-primary.active {
+    border-color: #1890ff;
+}
+.dark-mode .input-group-prepend > .btn.btn-primary {
+    border-color: #1890ff;
+}
+.dark-mode .input-group-append > .btn.btn-primary {
+    border-color: #1890ff;
+}
+.dark-mode .input-group-prepend > .btn.btn-primary:hover {
+    border-color: #45a3fb;
+}
+.dark-mode .input-group-append > .btn.btn-primary:hover {
+    border-color: #45a3fb;
+}
+.dark-mode .input-group-prepend > .btn.btn-primary:focus {
+    border-color: #1890ff;
+}
+.dark-mode .input-group-append > .btn.btn-primary:focus {
+    border-color: #1890ff;
+}
+.dark-mode .input-group-prepend > .btn.btn-primary.active {
+    border-color: #1890ff;
+}
+.dark-mode .input-group-append > .btn.btn-primary.active {
+    border-color: #1890ff;
+}
+
+/* Success button */
+
+.input-group-prepend > .btn.btn-success {
+    border-color: #0be881;
+}
+
+.input-group-append > .btn.btn-success {
+    border-color: #0be881;
+}
+.input-group-prepend > .btn.btn-success:hover {
+    border-color: #81eea8;
+}
+.input-group-append > .btn.btn-success:hover {
+    border-color: #81eea8;
+}
+.input-group-prepend > .btn.btn-success:focus {
+    border-color: #0be881;
+}
+.input-group-append > .btn.btn-success:focus {
+    border-color: #0be881;
+}
+.input-group-prepend > .btn.btn-success.active {
+    border-color: #0be881;
+}
+.input-group-append > .btn.btn-success.active {
+    border-color: #0be881;
+}
+.dark-mode .input-group-prepend > .btn.btn-success {
+    border-color: #0be881;
+}
+.dark-mode .input-group-append > .btn.btn-success {
+    border-color: #0be881;
+}
+.dark-mode .input-group-prepend > .btn.btn-success:hover {
+    border-color: #81eea8;
+}
+.dark-mode .input-group-append > .btn.btn-success:hover {
+    border-color: #81eea8;
+}
+.dark-mode .input-group-prepend > .btn.btn-success:focus {
+    border-color: #0be881;
+}
+.dark-mode .input-group-append > .btn.btn-success:focus {
+    border-color: #0be881;
+}
+.dark-mode .input-group-prepend > .btn.btn-success.active {
+    border-color: #0be881;
+}
+.dark-mode .input-group-append > .btn.btn-success.active {
+    border-color: #0be881;
+}
+
+/* Secondary button */
+
+.input-group-prepend > .btn.btn-secondary {
+    border-color: #ffcf00;
+}
+
+.input-group-append > .btn.btn-secondary {
+    border-color: #ffcf00;
+}
+.input-group-prepend > .btn.btn-secondary:hover {
+    border-color: #ffe04d;
+}
+.input-group-append > .btn.btn-secondary:hover {
+    border-color: #ffe04d;
+}
+.input-group-prepend > .btn.btn-secondary:focus {
+    border-color: #ffcf00;
+}
+.input-group-append > .btn.btn-secondary:focus {
+    border-color: #ffcf00;
+}
+.input-group-prepend > .btn.btn-secondary.active {
+    border-color: #ffcf00;
+}
+.input-group-append > .btn.btn-secondary.active {
+    border-color: #ffcf00;
+}
+.dark-mode .input-group-prepend > .btn.btn-secondary {
+    border-color: #ffcf00;
+}
+.dark-mode .input-group-append > .btn.btn-secondary {
+    border-color: #ffcf00;
+}
+.dark-mode .input-group-prepend > .btn.btn-secondary:hover {
+    border-color: #ffe04d;
+}
+.dark-mode .input-group-append > .btn.btn-secondary:hover {
+    border-color: #ffe04d;
+}
+.dark-mode .input-group-prepend > .btn.btn-secondary:focus {
+    border-color: #ffcf00;
+}
+.dark-mode .input-group-append > .btn.btn-secondary:focus {
+    border-color: #ffcf00;
+}
+.dark-mode .input-group-prepend > .btn.btn-secondary.active {
+    border-color: #ffcf00;
+}
+.dark-mode .input-group-append > .btn.btn-secondary.active {
+    border-color: #ffcf00;
+}
+
+/* Danger button */
+
+.input-group-prepend > .btn.btn-danger {
+    border-color: #ff4d4f;
+}
+
+.input-group-append > .btn.btn-danger {
+    border-color: #ff4d4f;
+}
+.input-group-prepend > .btn.btn-danger:hover {
+    border-color: #ed586c;
+}
+.input-group-append > .btn.btn-danger:hover {
+    border-color: #ed586c;
+}
+.input-group-prepend > .btn.btn-danger:focus {
+    border-color: #ff4d4f;
+}
+.input-group-append > .btn.btn-danger:focus {
+    border-color: #ff4d4f;
+}
+.input-group-prepend > .btn.btn-danger.active {
+    border-color: #ff4d4f;
+}
+.input-group-append > .btn.btn-danger.active {
+    border-color: #ff4d4f;
+}
+.dark-mode .input-group-prepend > .btn.btn-danger {
+    border-color: #ff4d4f;
+}
+.dark-mode .input-group-append > .btn.btn-danger {
+    border-color: #ff4d4f;
+}
+.dark-mode .input-group-prepend > .btn.btn-danger:hover {
+    border-color: #ed586c;
+}
+.dark-mode .input-group-append > .btn.btn-danger:hover {
+    border-color: #ed586c;
+}
+.dark-mode .input-group-prepend > .btn.btn-danger:focus {
+    border-color: #ff4d4f;
+}
+.dark-mode .input-group-append > .btn.btn-danger:focus {
+    border-color: #ff4d4f;
+}
+.dark-mode .input-group-prepend > .btn.btn-danger.active {
+    border-color: #ff4d4f;
+}
+.dark-mode .input-group-append > .btn.btn-danger.active {
+    border-color: #ff4d4f;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+12. Dropdown [hm-12]
+-------------------------------------------------------------------------------
+*/
+
+.dropdown {
+    display: inline-block;
+    position: relative;
+}
+
+/* Dropdown menu */
+
+.dropdown-menu {
+    position: absolute;
+    visibility: hidden;
+    z-index: 10;
+    text-align: left;
+    width: auto;
+    min-width: 16.8rem;
+    padding: 0.4rem;
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffffff;
+    background-image: none;
+    border: 1px solid #bababc;
+    border-radius: 0.4rem;
+    -moz-box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.15);
+    -webkit-box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.15);
+    box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.15);
+}
+.dark-mode .dropdown-menu {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: #191c20;
+    background-image: none;
+    border-color: #111417;
+    -moz-box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.4);
+    -webkit-box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.4);
+    box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.4);
+}
+
+/* Arrows (::before for border, ::after for background) */
+
+.dropdown.with-arrow.show .dropdown-menu::before,
+.dropdown.with-arrow.show .dropdown-menu::after,
+.dropdown.with-arrow.toggle-on-hover:hover .dropdown-menu::before,
+.dropdown.with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+    content: " ";
+    width: 0;
+    height: 0;
+    display: inline-block;
+    position: absolute;
+    z-index: 10;
+}
+
+/* Dropdown content */
+
+.dropdown-content {
+    display: block;
+    padding: 1.2rem;
+}
+.dropdown-content > ul,
+.dropdown-content > ol {
+    margin-left: 0;
+}
+
+/* Dropdown divider */
+
+.dropdown-divider {
+    height: 1px;
+    background-color: rgba(0, 0, 0, 0.05);
+}
+.dark-mode .dropdown-divider {
+    background-color: rgba(255, 255, 255, 0.05);
+}
+
+/* Dropdown item */
+
+.dropdown-item {
+    display: block;
+    white-space: nowrap;
+    padding: 0.6rem 1.2rem;
+    border-radius: 0.2rem;
+    color: rgba(0, 0, 0, 0.85);
+    background-color: transparent;
+}
+.dropdown-item:hover {
+    text-decoration: none;
+    color: rgba(0, 0, 0, 0.85);
+    background-color: rgba(0, 0, 0, 0.025);
+}
+.dark-mode .dropdown-item {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: transparent;
+}
+.dark-mode .dropdown-item:hover {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.025);
+}
+
+/* Dropdown header */
+
+.dropdown-header {
+    font-size: 1.4rem;
+    font-weight: 500;
+    padding: 0.6rem 1.2rem;
+    margin: 0;
+    color: rgba(0, 0, 0, 0.6);
+}
+.dark-mode .dropdown-header {
+    color: rgba(255, 255, 255, 0.6);
+}
+
+/* Normal dropdown */
+
+.dropdown:not(.dropup):not(.dropright):not(.dropleft) .dropdown-menu {
+    bottom: 50%;
+    transform: translateY(50%);
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft) .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right) {
+    left: 0;
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft) .dropdown-menu.dropdown-menu-center {
+    left: 50%;
+    transform: translate(-50%, 50%);
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft) .dropdown-menu.dropdown-menu-right {
+    right: 0;
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).show .dropdown-menu,
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).toggle-on-hover:hover .dropdown-menu {
+    bottom: 0;
+    transform: translateY(100%);
+    visibility: visible;
+    -webkit-transition: bottom 0.1s, transform 0.1s, visibility 0.1s;
+    transition: bottom 0.1s, transform 0.1s, visibility 0.1s;
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).show .dropdown-menu.dropdown-menu-center,
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).toggle-on-hover:hover .dropdown-menu.dropdown-menu-center {
+    transform: translate(-50%, 100%);
+}
+
+/* Normal dropdown arrows (::before for border, ::after for background) */
+
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu {
+    bottom: calc(0.8rem * -1);
+}
+
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu {
+    bottom: calc(0.8rem * -1);
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu::before {
+    border-left: 0.8rem solid transparent;
+    border-right: 0.8rem solid transparent;
+    border-bottom: 0.8rem solid #bababc;
+    top: calc(0.8rem * -1);
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+    border-left: 0.8rem solid transparent;
+    border-right: 0.8rem solid transparent;
+    border-bottom: 0.8rem solid #bababc;
+    top: calc(0.8rem * -1);
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu::before {
+    border-left: 0.8rem solid transparent;
+    border-right: 0.8rem solid transparent;
+    border-bottom: 0.8rem solid #bababc;
+    top: calc(0.8rem * -1);
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu::after {
+    border-left: 0.8rem solid transparent;
+    border-right: 0.8rem solid transparent;
+    border-bottom: 0.8rem solid #bababc;
+    top: calc(0.8rem * -1);
+}
+.dark-mode .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu::before {
+    border-bottom-color: #111417;
+}
+.dark-mode .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+    border-bottom-color: #111417;
+}
+.dark-mode .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu::before {
+    border-bottom-color: #111417;
+}
+.dark-mode .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu::after {
+    border-bottom-color: #111417;
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+    border-bottom-color: #ffffff;
+    top: calc(0.2rem + (0.8rem * -1));
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu::after {
+    border-bottom-color: #ffffff;
+    top: calc(0.2rem + (0.8rem * -1));
+}
+.dark-mode .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+    border-bottom-color: #191c20;
+}
+.dark-mode .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu::after {
+    border-bottom-color: #191c20;
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::before {
+    left: 0.8rem;
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::after {
+    left: 0.8rem;
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::before {
+    left: 0.8rem;
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::after {
+    left: 0.8rem;
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::before {
+    left: calc(50% - 0.8rem);
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::after {
+    left: calc(50% - 0.8rem);
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu.dropdown-menu-center::before {
+    left: calc(50% - 0.8rem);
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu.dropdown-menu-center::after {
+    left: calc(50% - 0.8rem);
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-right::before {
+    right: 0.8rem;
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-right::after {
+    right: 0.8rem;
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu.dropdown-menu-right::before {
+    right: 0.8rem;
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu.dropdown-menu-right::after {
+    right: 0.8rem;
+}
+
+/* Dropup */
+
+.dropdown.dropup .dropdown-menu {
+    top: 50%;
+    transform: translateY(-50%);
+}
+.dropdown.dropup .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right) {
+    left: 0;
+}
+.dropdown.dropup .dropdown-menu.dropdown-menu-center {
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+.dropdown.dropup .dropdown-menu.dropdown-menu-right {
+    right: 0;
+}
+.dropdown.dropup.show .dropdown-menu,
+.dropdown.dropup.toggle-on-hover:hover .dropdown-menu {
+    top: 0;
+    transform: translateY(-100%);
+    visibility: visible;
+    -webkit-transition: top 0.1s, transform 0.1s, visibility 0.1s;
+    transition: top 0.1s, transform 0.1s, visibility 0.1s;
+}
+.dropdown.dropup.show .dropdown-menu.dropdown-menu-center,
+.dropdown.dropup.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center {
+    transform: translate(-50%, -100%);
+}
+
+/* Dropup arrows (::before for border, ::after for background) */
+
+.dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu {
+    top: calc(0.8rem * -1);
+}
+
+.dropdown.dropup.with-arrow.show .dropdown-menu {
+    top: calc(0.8rem * -1);
+}
+.dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu::before {
+    border-left: 0.8rem solid transparent;
+    border-right: 0.8rem solid transparent;
+    border-top: 0.8rem solid #bababc;
+    bottom: calc(0.8rem * -1);
+}
+.dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+    border-left: 0.8rem solid transparent;
+    border-right: 0.8rem solid transparent;
+    border-top: 0.8rem solid #bababc;
+    bottom: calc(0.8rem * -1);
+}
+.dropdown.dropup.with-arrow.show .dropdown-menu::before {
+    border-left: 0.8rem solid transparent;
+    border-right: 0.8rem solid transparent;
+    border-top: 0.8rem solid #bababc;
+    bottom: calc(0.8rem * -1);
+}
+.dropdown.dropup.with-arrow.show .dropdown-menu::after {
+    border-left: 0.8rem solid transparent;
+    border-right: 0.8rem solid transparent;
+    border-top: 0.8rem solid #bababc;
+    bottom: calc(0.8rem * -1);
+}
+.dark-mode .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu::before {
+    border-top-color: #111417;
+}
+.dark-mode .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+    border-top-color: #111417;
+}
+.dark-mode .dropdown.dropup.with-arrow.show .dropdown-menu::before {
+    border-top-color: #111417;
+}
+.dark-mode .dropdown.dropup.with-arrow.show .dropdown-menu::after {
+    border-top-color: #111417;
+}
+.dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+    border-top-color: #ffffff;
+    bottom: calc(0.2rem + (0.8rem * -1));
+}
+.dropdown.dropup.with-arrow.show .dropdown-menu::after {
+    border-top-color: #ffffff;
+    bottom: calc(0.2rem + (0.8rem * -1));
+}
+.dark-mode .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+    border-top-color: #191c20;
+}
+.dark-mode .dropdown.dropup.with-arrow.show .dropdown-menu::after {
+    border-top-color: #191c20;
+}
+.dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::before {
+    left: 0.8rem;
+}
+.dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::after {
+    left: 0.8rem;
+}
+.dropdown.dropup.with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::before {
+    left: 0.8rem;
+}
+.dropdown.dropup.with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::after {
+    left: 0.8rem;
+}
+.dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::before {
+    left: calc(50% - 0.8rem);
+}
+.dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::after {
+    left: calc(50% - 0.8rem);
+}
+.dropdown.dropup.with-arrow.show .dropdown-menu.dropdown-menu-center::before {
+    left: calc(50% - 0.8rem);
+}
+.dropdown.dropup.with-arrow.show .dropdown-menu.dropdown-menu-center::after {
+    left: calc(50% - 0.8rem);
+}
+.dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-right::before {
+    right: 0.8rem;
+}
+.dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-right::after {
+    right: 0.8rem;
+}
+.dropdown.dropup.with-arrow.show .dropdown-menu.dropdown-menu-right::before {
+    right: 0.8rem;
+}
+.dropdown.dropup.with-arrow.show .dropdown-menu.dropdown-menu-right::after {
+    right: 0.8rem;
+}
+
+/* Dropright */
+
+.dropdown.dropright .dropdown-menu {
+    right: 50%;
+    transform: translateX(50%);
+}
+.dropdown.dropright .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up) {
+    top: 0;
+}
+.dropdown.dropright .dropdown-menu.dropdown-menu-center {
+    top: 50%;
+    transform: translate(50%, -50%);
+}
+.dropdown.dropright .dropdown-menu.dropdown-menu-up {
+    bottom: 0;
+}
+.dropdown.dropright.show .dropdown-menu,
+.dropdown.dropright.toggle-on-hover:hover .dropdown-menu {
+    right: 0;
+    transform: translateX(100%);
+    visibility: visible;
+    -webkit-transition: right 0.1s, transform 0.1s, visibility 0.1s;
+    transition: right 0.1s, transform 0.1s, visibility 0.1s;
+}
+.dropdown.dropright.show .dropdown-menu.dropdown-menu-center,
+.dropdown.dropright.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center {
+    transform: translate(100%, -50%);
+}
+
+/* Dropright arrows (::before for border, ::after for background) */
+
+.dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu {
+    right: calc(0.8rem * -1);
+}
+
+.dropdown.dropright.with-arrow.show .dropdown-menu {
+    right: calc(0.8rem * -1);
+}
+.dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu::before {
+    border-top: 0.8rem solid transparent;
+    border-bottom: 0.8rem solid transparent;
+    border-right: 0.8rem solid #bababc;
+    left: calc(0.8rem * -1);
+}
+.dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+    border-top: 0.8rem solid transparent;
+    border-bottom: 0.8rem solid transparent;
+    border-right: 0.8rem solid #bababc;
+    left: calc(0.8rem * -1);
+}
+.dropdown.dropright.with-arrow.show .dropdown-menu::before {
+    border-top: 0.8rem solid transparent;
+    border-bottom: 0.8rem solid transparent;
+    border-right: 0.8rem solid #bababc;
+    left: calc(0.8rem * -1);
+}
+.dropdown.dropright.with-arrow.show .dropdown-menu::after {
+    border-top: 0.8rem solid transparent;
+    border-bottom: 0.8rem solid transparent;
+    border-right: 0.8rem solid #bababc;
+    left: calc(0.8rem * -1);
+}
+.dark-mode .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu::before {
+    border-right-color: #111417;
+}
+.dark-mode .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+    border-right-color: #111417;
+}
+.dark-mode .dropdown.dropright.with-arrow.show .dropdown-menu::before {
+    border-right-color: #111417;
+}
+.dark-mode .dropdown.dropright.with-arrow.show .dropdown-menu::after {
+    border-right-color: #111417;
+}
+.dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+    border-right-color: #ffffff;
+    left: calc(0.2rem + (0.8rem * -1));
+}
+.dropdown.dropright.with-arrow.show .dropdown-menu::after {
+    border-right-color: #ffffff;
+    left: calc(0.2rem + (0.8rem * -1));
+}
+.dark-mode .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+    border-right-color: #191c20;
+}
+.dark-mode .dropdown.dropright.with-arrow.show .dropdown-menu::after {
+    border-right-color: #191c20;
+}
+.dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::before {
+    top: 0.8rem;
+}
+.dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::after {
+    top: 0.8rem;
+}
+.dropdown.dropright.with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::before {
+    top: 0.8rem;
+}
+.dropdown.dropright.with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::after {
+    top: 0.8rem;
+}
+.dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::before {
+    top: calc(50% - 0.8rem);
+}
+.dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::after {
+    top: calc(50% - 0.8rem);
+}
+.dropdown.dropright.with-arrow.show .dropdown-menu.dropdown-menu-center::before {
+    top: calc(50% - 0.8rem);
+}
+.dropdown.dropright.with-arrow.show .dropdown-menu.dropdown-menu-center::after {
+    top: calc(50% - 0.8rem);
+}
+.dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-up::before {
+    bottom: 0.8rem;
+}
+.dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-up::after {
+    bottom: 0.8rem;
+}
+.dropdown.dropright.with-arrow.show .dropdown-menu.dropdown-menu-up::before {
+    bottom: 0.8rem;
+}
+.dropdown.dropright.with-arrow.show .dropdown-menu.dropdown-menu-up::after {
+    bottom: 0.8rem;
+}
+
+/* Dropleft */
+
+.dropdown.dropleft .dropdown-menu {
+    left: 50%;
+    transform: translateX(-50%);
+}
+.dropdown.dropleft .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up) {
+    top: 0;
+}
+.dropdown.dropleft .dropdown-menu.dropdown-menu-center {
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+.dropdown.dropleft .dropdown-menu.dropdown-menu-up {
+    bottom: 0;
+}
+.dropdown.dropleft.show .dropdown-menu,
+.dropdown.dropleft.toggle-on-hover:hover .dropdown-menu {
+    left: 0;
+    transform: translateX(-100%);
+    visibility: visible;
+    -webkit-transition: left 0.1s, transform 0.1s, visibility 0.1s;
+    transition: left 0.1s, transform 0.1s, visibility 0.1s;
+}
+.dropdown.dropleft.show .dropdown-menu.dropdown-menu-center,
+.dropdown.dropleft.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center {
+    transform: translate(-100%, -50%);
+}
+
+/* Dropleft arrows (::before for border, ::after for background) */
+
+.dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu {
+    left: calc(0.8rem * -1);
+}
+
+.dropdown.dropleft.with-arrow.show .dropdown-menu {
+    left: calc(0.8rem * -1);
+}
+.dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu::before {
+    border-top: 0.8rem solid transparent;
+    border-bottom: 0.8rem solid transparent;
+    border-left: 0.8rem solid #bababc;
+    right: calc(0.8rem * -1);
+}
+.dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+    border-top: 0.8rem solid transparent;
+    border-bottom: 0.8rem solid transparent;
+    border-left: 0.8rem solid #bababc;
+    right: calc(0.8rem * -1);
+}
+.dropdown.dropleft.with-arrow.show .dropdown-menu::before {
+    border-top: 0.8rem solid transparent;
+    border-bottom: 0.8rem solid transparent;
+    border-left: 0.8rem solid #bababc;
+    right: calc(0.8rem * -1);
+}
+.dropdown.dropleft.with-arrow.show .dropdown-menu::after {
+    border-top: 0.8rem solid transparent;
+    border-bottom: 0.8rem solid transparent;
+    border-left: 0.8rem solid #bababc;
+    right: calc(0.8rem * -1);
+}
+.dark-mode .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu::before {
+    border-left-color: #111417;
+}
+.dark-mode .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+    border-left-color: #111417;
+}
+.dark-mode .dropdown.dropleft.with-arrow.show .dropdown-menu::before {
+    border-left-color: #111417;
+}
+.dark-mode .dropdown.dropleft.with-arrow.show .dropdown-menu::after {
+    border-left-color: #111417;
+}
+.dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+    border-left-color: #ffffff;
+    right: calc(0.2rem + (0.8rem * -1));
+}
+.dropdown.dropleft.with-arrow.show .dropdown-menu::after {
+    border-left-color: #ffffff;
+    right: calc(0.2rem + (0.8rem * -1));
+}
+.dark-mode .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+    border-left-color: #191c20;
+}
+.dark-mode .dropdown.dropleft.with-arrow.show .dropdown-menu::after {
+    border-left-color: #191c20;
+}
+.dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::before {
+    top: 0.8rem;
+}
+.dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::after {
+    top: 0.8rem;
+}
+.dropdown.dropleft.with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::before {
+    top: 0.8rem;
+}
+.dropdown.dropleft.with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::after {
+    top: 0.8rem;
+}
+.dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::before {
+    top: calc(50% - 0.8rem);
+}
+.dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::after {
+    top: calc(50% - 0.8rem);
+}
+.dropdown.dropleft.with-arrow.show .dropdown-menu.dropdown-menu-center::before {
+    top: calc(50% - 0.8rem);
+}
+.dropdown.dropleft.with-arrow.show .dropdown-menu.dropdown-menu-center::after {
+    top: calc(50% - 0.8rem);
+}
+.dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-up::before {
+    bottom: 0.8rem;
+}
+.dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-up::after {
+    bottom: 0.8rem;
+}
+.dropdown.dropleft.with-arrow.show .dropdown-menu.dropdown-menu-up::before {
+    bottom: 0.8rem;
+}
+.dropdown.dropleft.with-arrow.show .dropdown-menu.dropdown-menu-up::after {
+    bottom: 0.8rem;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+13. Modal [hm-13]
+-------------------------------------------------------------------------------
+*/
+
+.modal {
+    position: absolute;
+    top: -100%;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.8);
+    -webkit-transition: all .4s cubic-bezier(.25, .8, .25, 1);
+    transition: all .4s cubic-bezier(.25, .8, .25, 1);
+    z-index: 99;
+    outline: none;
+}
+.dark-mode .modal {
+    background-color: rgba(0, 0, 0, 0.95);
+}
+.modal-dialog {
+    position: absolute;
+    display: -ms-flexbox;
+    display: flex;
+    flex-direction: column;
+    top: -100%;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    /* This hack corrects the scrollable modal content on IE. */
+    .modal.ie-scroll-fix .modal-dialog {
+        display: block;
+    }
+}
+.modal-content {
+    margin: auto;
+    width: 40rem;
+    max-width: 100%;
+    padding: 3rem;
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffffff;
+    background-image: none;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 0.4rem;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.dark-mode .modal-content {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: #191c20;
+    background-image: none;
+    border-color: rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+@media (max-width: 576px) {
+    .modal-content {
+        padding: 2rem;
+    }
+}
+.modal-title {
+    font-size: 2rem;
+    font-weight: 500;
+    margin-top: 0;
+}
+.modal-content-media,
+.dark-mode .modal-content-media {
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    border-radius: 0;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.modal-content-media img,
+.modal-content-media video {
+    display: block;
+}
+.modal-full .modal-content {
+    width: 100%;
+    border: none;
+    border-radius: 0;
+    padding: 3rem;
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffffff;
+    background-image: none;
+}
+.dark-mode .modal-full .modal-content {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: #191c20;
+    background-image: none;
+}
+@media (max-width: 576px) {
+    .modal-full .modal-content {
+        padding: 2rem;
+    }
+}
+.modal-content .close {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-align: center;
+    align-items: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    position: fixed;
+    cursor: pointer;
+    top: -100%;
+    left: 1rem;
+    z-index: 10;
+    padding: 0;
+    -webkit-transition: all .4s cubic-bezier(.25, .8, .25, 1);
+    transition: all .4s cubic-bezier(.25, .8, .25, 1);
+    font-size: 2rem;
+    width: 4rem;
+    height: 4rem;
+    color: #ffffff;
+    background-color: rgba(0, 0, 0, 0.7);
+    border-radius: 50%;
+    border-color: transparent;
+}
+.modal-content .close:hover {
+    text-decoration: none;
+    color: #ffffff;
+    background-color: rgba(0, 0, 0, 0.6);
+}
+.dark-mode .modal-content .close {
+    color: #ffffff;
+    background-color: rgba(255, 255, 255, 0.1);
+}
+.dark-mode .modal-content .close:hover {
+    color: #ffffff;
+    background-color: rgba(255, 255, 255, 0.2);
+}
+.modal-content .close:focus {
+    -webkit-transition: none;
+    transition: none;
+    outline: 2px solid rgba(24, 144, 255, 0.3);
+    outline-offset: 0.2rem;
+}
+.dark-mode .modal-content .close:focus {
+    outline-color: rgba(24, 144, 255, 0.3);
+}
+
+/* Showing modals */
+
+.modal:target,
+.modal.show {
+    top: 0;
+}
+.modal:target ~ .page-wrapper .sidebar,
+.modal:target ~ .page-wrapper .content-wrapper,
+.modal.show ~ .page-wrapper .sidebar,
+.modal.show ~ .page-wrapper .content-wrapper {
+    overflow: hidden;
+}
+.modal:target .modal-dialog,
+.modal.show .modal-dialog {
+    top: 0;
+}
+.modal:target .modal-content .close,
+.modal.show .modal-content .close {
+    top: 1rem;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+14. Alerts [hm-14]
+-------------------------------------------------------------------------------
+*/
+
+.alert {
+    position: relative;
+    padding: 1rem 2rem;
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffffff;
+    background-image: none;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 0.4rem;
+}
+.dark-mode .alert {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: #191c20;
+    background-image: none;
+    border-color: rgba(255, 255, 255, 0.1);
+}
+.alert-heading {
+    color: inherit;
+    font-size: 1.6rem;
+    font-weight: 500;
+    margin: 0 0 0.5rem 0;
+}
+.dark-mode .alert-heading {
+    color: inherit;
+    font-size: 1.6rem;
+    font-weight: 500;
+    margin: 0 0 0.5rem 0;
+}
+.alert-link,
+.dark-mode .alert-link {
+    cursor: pointer;
+    color: inherit;
+    text-decoration: underline;
+}
+.alert-link:hover,
+.dark-mode .alert-link:hover {
+    color: inherit;
+    opacity: 0.75;
+}
+.alert .close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    cursor: pointer;
+    color: inherit;
+    padding: 0.4rem 0.6rem;
+    line-height: 1;
+    font-size: 1.6rem;
+    background-color: transparent;
+    border-color: transparent;
+}
+.alert .close:focus {
+    outline: 2px solid rgba(0, 0, 0, 0.5);
+    outline-offset: 0.2rem;
+}
+.dark-mode .alert .close:focus {
+    outline-color: rgba(255, 255, 255, 0.5);
+}
+.alert.dispose {
+    display: none;
+}
+
+/* Sticky alerts */
+
+.sticky-alerts .alert {
+    display: none;
+    width: 27rem;
+    margin-top: 1rem;
+    right: -50rem; /* Hidden by default */
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.045);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.045);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.045);
+}
+.sticky-alerts .alert.show {
+    right: 0;
+    -webkit-transition: right .4s cubic-bezier(.25, .8, .25, 1);
+    transition: right .4s cubic-bezier(.25, .8, .25, 1);
+}
+.sticky-alerts .alert.fade {
+    visibility: hidden;
+    opacity: 0;
+    -webkit-transition: visibility 0s .4s, opacity .4s linear;
+    transition: visibility 0s .4s, opacity .4s linear;
+}
+.sticky-alerts .alert.alert-block {
+    display: block;
+}
+.sticky-alerts .alert.alert-block.dispose {
+    display: none;
+}
+
+/* Filled alerts (primary, success, secondary, danger) */
+
+/* Light mode */
+
+.alert.alert-primary.filled {
+    color: #ffffff;
+    background-color: #1890ff;
+    background-image: none;
+    border-color: #1890ff;
+}
+
+.alert.alert-primary.filled-lm {
+    color: #ffffff;
+    background-color: #1890ff;
+    background-image: none;
+    border-color: #1890ff;
+}
+.alert.alert-success.filled {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #0be881;
+    background-image: none;
+    border-color: #0be881;
+}
+.alert.alert-success.filled-lm {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #0be881;
+    background-image: none;
+    border-color: #0be881;
+}
+.alert.alert-secondary.filled {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffcf00;
+    background-image: none;
+    border-color: #ffcf00;
+}
+.alert.alert-secondary.filled-lm {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffcf00;
+    background-image: none;
+    border-color: #ffcf00;
+}
+.alert.alert-danger.filled {
+    color: #ffffff;
+    background-color: #ff4d4f;
+    background-image: none;
+    border-color: #ff4d4f;
+}
+.alert.alert-danger.filled-lm {
+    color: #ffffff;
+    background-color: #ff4d4f;
+    background-image: none;
+    border-color: #ff4d4f;
+}
+
+/* Dark mode */
+
+.dark-mode .alert.alert-primary.filled {
+    color: #ffffff;
+    background-color: #1890ff;
+    background-image: none;
+    border-color: #1890ff;
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+}
+
+.dark-mode .alert.alert-primary.filled-dm {
+    color: #ffffff;
+    background-color: #1890ff;
+    background-image: none;
+    border-color: #1890ff;
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+}
+.dark-mode .alert.alert-success.filled {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #0be881;
+    background-image: none;
+    border-color: #0be881;
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+}
+.dark-mode .alert.alert-success.filled-dm {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #0be881;
+    background-image: none;
+    border-color: #0be881;
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+}
+.dark-mode .alert.alert-secondary.filled {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffcf00;
+    background-image: none;
+    border-color: #ffcf00;
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+}
+.dark-mode .alert.alert-secondary.filled-dm {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffcf00;
+    background-image: none;
+    border-color: #ffcf00;
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+}
+.dark-mode .alert.alert-danger.filled {
+    color: #ffffff;
+    background-color: #ff4d4f;
+    background-image: none;
+    border-color: #ff4d4f;
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+}
+.dark-mode .alert.alert-danger.filled-dm {
+    color: #ffffff;
+    background-color: #ff4d4f;
+    background-image: none;
+    border-color: #ff4d4f;
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+}
+
+/* Contextual alerts (primary, success, secondary, danger) */
+
+/* Light mode */
+
+.alert.alert-primary {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #cfe7fd;
+    background-image: none;
+    border-color: #1890ff;
+}
+.alert.alert-success {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #d5f9e5;
+    background-image: none;
+    border-color: #0be881;
+}
+.alert.alert-secondary {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #fff6cc;
+    background-image: none;
+    border-color: #ffcf00;
+}
+.alert.alert-danger {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #f8d0d9;
+    background-image: none;
+    border-color: #ff4d4f;
+}
+
+/* Dark mode */
+
+.dark-mode .alert.alert-primary {
+    color: #1890ff;
+    background-color: #172636;
+    background-image: none;
+    border-color: #0d518f;
+}
+.dark-mode .alert.alert-success {
+    color: #0be881;
+    background-color: #17312a;
+    background-image: none;
+    border-color: #0d8951;
+}
+.dark-mode .alert.alert-secondary {
+    color: #ffcf00;
+    background-color: #302c1d;
+    background-image: none;
+    border-color: #8e7710;
+}
+.dark-mode .alert.alert-danger {
+    color: #ff4d4f;
+    background-color: #301923;
+    background-image: none;
+    border-color: #8c0e2e;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+15. Navbar content [hm-15]
+-------------------------------------------------------------------------------
+*/
+
+.navbar .container {
+    width: 100%;
+    position: relative;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -ms-flex-align: center;
+    align-items: center;
+    -ms-flex-flow: row nowrap;
+    flex-flow: row nowrap;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+    padding-left: calc(3rem - 1rem);
+    padding-right: calc(3rem - 1rem);
+}
+
+.navbar .container-sm {
+    width: 100%;
+    position: relative;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -ms-flex-align: center;
+    align-items: center;
+    -ms-flex-flow: row nowrap;
+    flex-flow: row nowrap;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+    padding-left: calc(3rem - 1rem);
+    padding-right: calc(3rem - 1rem);
+}
+
+.navbar .container-md {
+    width: 100%;
+    position: relative;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -ms-flex-align: center;
+    align-items: center;
+    -ms-flex-flow: row nowrap;
+    flex-flow: row nowrap;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+    padding-left: calc(3rem - 1rem);
+    padding-right: calc(3rem - 1rem);
+}
+
+.navbar .container-lg {
+    width: 100%;
+    position: relative;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -ms-flex-align: center;
+    align-items: center;
+    -ms-flex-flow: row nowrap;
+    flex-flow: row nowrap;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+    padding-left: calc(3rem - 1rem);
+    padding-right: calc(3rem - 1rem);
+}
+
+.navbar .container-xl {
+    width: 100%;
+    position: relative;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -ms-flex-align: center;
+    align-items: center;
+    -ms-flex-flow: row nowrap;
+    flex-flow: row nowrap;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+    padding-left: calc(3rem - 1rem);
+    padding-right: calc(3rem - 1rem);
+}
+
+.navbar .container-fluid {
+    width: 100%;
+    position: relative;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -ms-flex-align: center;
+    align-items: center;
+    -ms-flex-flow: row nowrap;
+    flex-flow: row nowrap;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+    padding-left: calc(3rem - 1rem);
+    padding-right: calc(3rem - 1rem);
+}
+@media (max-width: 576px) {
+    .navbar .container {
+        padding-left: calc(2rem - 1rem);
+        padding-right: calc(2rem - 1rem);
+    }
+    .navbar .container-sm {
+        padding-left: calc(2rem - 1rem);
+        padding-right: calc(2rem - 1rem);
+    }
+    .navbar .container-md {
+        padding-left: calc(2rem - 1rem);
+        padding-right: calc(2rem - 1rem);
+    }
+    .navbar .container-lg {
+        padding-left: calc(2rem - 1rem);
+        padding-right: calc(2rem - 1rem);
+    }
+    .navbar .container-xl {
+        padding-left: calc(2rem - 1rem);
+        padding-right: calc(2rem - 1rem);
+    }
+    .navbar .container-fluid {
+        padding-left: calc(2rem - 1rem);
+        padding-right: calc(2rem - 1rem);
+    }
+}
+.navbar-brand,
+.navbar-nav,
+.navbar-text,
+.navbar-content {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-align: center;
+    align-items: center;
+    min-width: 0;
+}
+.navbar-brand:not(:first-child) {
+    margin-left: 1.5rem;
+}
+.navbar-nav:not(:first-child) {
+    margin-left: 1.5rem;
+}
+.navbar-text:not(:first-child) {
+    margin-left: 1.5rem;
+}
+.navbar-content:not(:first-child) {
+    margin-left: 1.5rem;
+}
+.navbar > .form-inline:not(:first-child) {
+    margin-left: 1.5rem;
+}
+
+/* Navbar text */
+
+.navbar-text {
+    color: rgba(0, 0, 0, 0.7);
+}
+.dark-mode .navbar-text {
+    color: rgba(255, 255, 255, 0.65);
+}
+
+/* Navbar nav */
+
+.navbar-nav {
+    padding-left: 0;
+    margin-bottom: 0;
+    list-style: none;
+    height: 5rem;
+}
+.nav-item {
+    height: 100%;
+    margin-bottom: 0;
+}
+.nav-link {
+    cursor: pointer; /* Needed if used without the href attribute, for example, as dropdown toggle */
+    display: inline-block;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    white-space: nowrap;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    color: rgba(0, 0, 0, 0.85);
+    background-color: transparent;
+}
+.dark-mode .nav-link {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: transparent;
+}
+.nav-link:hover {
+    color: #1890ff;
+    background-color: transparent;
+    text-decoration: none;
+}
+.dark-mode .nav-link:hover {
+    color: #1890ff;
+    background-color: transparent;
+}
+.nav-item.active > .nav-link {
+    color: #1890ff;
+    background-color: transparent;
+}
+.nav-item.show > .nav-link {
+    color: #1890ff;
+    background-color: transparent;
+}
+.dark-mode .nav-item.active > .nav-link {
+    color: #1890ff;
+    background-color: transparent;
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+}
+.dark-mode .nav-item.show > .nav-link {
+    color: #1890ff;
+    background-color: transparent;
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+}
+.nav-item.active > .nav-link:hover {
+    color: #45a3fb;
+    background-color: transparent;
+}
+.nav-item.show > .nav-link:hover {
+    color: #45a3fb;
+    background-color: transparent;
+}
+.dark-mode .nav-item.active > .nav-link:hover {
+    color: #45a3fb;
+    background-color: transparent;
+}
+.dark-mode .nav-item.show > .nav-link:hover {
+    color: #45a3fb;
+    background-color: transparent;
+}
+.navbar-nav:first-child > .nav-item:first-child > .nav-link {
+    padding-left: 0;
+}
+.navbar-nav:last-child > .nav-item:last-child > .nav-link {
+    padding-right: 0;
+}
+
+/* Navbar brand */
+
+.navbar-brand {
+    font-size: 2rem;
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.85);
+}
+.dark-mode .navbar-brand {
+    color: rgba(255, 255, 255, 0.8);
+}
+.navbar-brand:hover {
+    color: rgba(0, 0, 0, 0.7);
+    text-decoration: none;
+}
+.dark-mode .navbar-brand:hover {
+    color: rgba(255, 255, 255, 0.65);
+}
+.navbar-brand img {
+    height: 2.2rem;
+    margin-right: 1rem;
+}
+
+/* Navbar action button */
+
+.navbar .btn-action {
+    width: 3.6rem;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+/* Navbar minimum widths for inline forms (Required for IE) */
+
+.navbar > .form-inline > .form-control {
+    min-width: 12rem;
+}
+
+.navbar > .form-inline > .form-group .form-control {
+    min-width: 12rem;
+}
+.navbar > .form-inline > .input-group {
+    min-width: 20rem;
+}
+@media (max-width: 576px) {
+    .navbar > .form-inline > .form-control {
+        min-width: 10rem;
+    }
+    .navbar > .form-inline > .form-group .form-control {
+        min-width: 10rem;
+    }
+    .navbar > .form-inline > .input-group {
+        min-width: 18rem;
+    }
+}
+
+
+/*
+-------------------------------------------------------------------------------
+16. Sidebar content [hm-16]
+-------------------------------------------------------------------------------
+*/
+
+.sidebar-menu {
+    margin-top: 2.5rem;
+    margin-bottom: 2.5rem;
+}
+
+/* Sidebar content */
+
+.sidebar-content {
+    display: block;
+    padding: 0;
+    margin: 2.5rem 2.5rem;
+}
+.sidebar-content > ul,
+.sidebar-content > ol {
+    margin-left: 0;
+}
+
+/* Sidebar divider */
+
+.sidebar-divider {
+    padding: 0;
+    margin: 0.5rem 2.5rem;
+    height: 1px;
+    background-color: rgba(0, 0, 0, 0.05);
+}
+.dark-mode .sidebar-divider {
+    background-color: rgba(255, 255, 255, 0.05);
+}
+
+/* Sidebar link */
+
+.sidebar-link {
+    display: block;
+    padding: 0.5rem 2.5rem;
+    margin: 0;
+    min-height: 3rem;
+    height: auto;
+    color: rgba(0, 0, 0, 0.7);
+    background-color: transparent;
+    border: 0 solid transparent;
+    border-radius: 0;
+}
+.sidebar-link:hover {
+    text-decoration: none;
+    color: rgba(0, 0, 0, 0.85);
+    background-color: transparent;
+    border-color: transparent;
+}
+.dark-mode .sidebar-link {
+    color: rgba(255, 255, 255, 0.65);
+    background-color: transparent;
+    border-color: transparent;
+}
+.dark-mode .sidebar-link:hover {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: transparent;
+    border-color: transparent;
+}
+.sidebar-link.active {
+    color: #1890ff;
+    background-color: transparent;
+    border-color: transparent;
+}
+.sidebar-link.active:hover {
+    color: #45a3fb;
+    background-color: transparent;
+    border-color: transparent;
+}
+.dark-mode .sidebar-link.active {
+    color: #1890ff;
+    background-color: transparent;
+    border-color: transparent;
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+}
+.dark-mode .sidebar-link.active:hover {
+    color: #45a3fb;
+    background-color: transparent;
+    border-color: transparent;
+}
+
+/* Sidebar title */
+
+.sidebar-title {
+    padding: 0;
+    margin: 0.5rem 2.5rem;
+    font-size: 1.5rem;
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.85);
+}
+.dark-mode .sidebar-title {
+    color: rgba(255, 255, 255, 0.8);
+}
+
+/* Sidebar link with icon */
+
+.sidebar-link-with-icon {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-align: center;
+    align-items: center;
+}
+.sidebar-icon {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-align: center;
+    align-items: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    width: 3rem;
+    height: 3rem;
+    font-size: 1.6rem;
+    margin-right: 1rem;
+    color: rgba(0, 0, 0, 0.7);
+    background-color: rgba(0, 0, 0, 0.05);
+    border: 0 solid transparent;
+    border-radius: 0.4rem;
+}
+.sidebar-link-with-icon:hover .sidebar-icon {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: rgba(0, 0, 0, 0.05);
+    border-color: transparent;
+}
+.dark-mode .sidebar-icon {
+    color: rgba(255, 255, 255, 0.65);
+    background-color: rgba(255, 255, 255, 0.05);
+    border-color: transparent;
+}
+.dark-mode .sidebar-link-with-icon:hover .sidebar-icon {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.05);
+    border-color: transparent;
+}
+.sidebar-link-with-icon.active .sidebar-icon {
+    color: rgba(0, 0, 0, 0.7);
+    background-color: rgba(0, 0, 0, 0.05);
+    border-color: transparent;
+}
+.sidebar-link-with-icon.active:hover .sidebar-icon {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: rgba(0, 0, 0, 0.05);
+    border-color: transparent;
+}
+.dark-mode .sidebar-link-with-icon.active .sidebar-icon {
+    color: rgba(255, 255, 255, 0.65);
+    background-color: rgba(255, 255, 255, 0.05);
+    border-color: transparent;
+}
+.dark-mode .sidebar-link-with-icon.active:hover .sidebar-icon {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.05);
+    border-color: transparent;
+}
+
+/* Sidebar brand */
+
+.sidebar-brand {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-align: center;
+    align-items: center;
+    padding: 0;
+    margin: 0.5rem 2.5rem;
+    font-size: 2rem;
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.85);
+}
+.dark-mode .sidebar-brand {
+    color: rgba(255, 255, 255, 0.8);
+}
+.sidebar-brand:hover {
+    color: rgba(0, 0, 0, 0.7);
+    text-decoration: none;
+}
+.dark-mode .sidebar-brand:hover {
+    color: rgba(255, 255, 255, 0.65);
+}
+.sidebar-brand img {
+    height: 2.2rem;
+    margin-right: 1rem;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+17. Pagination [hm-17]
+-------------------------------------------------------------------------------
+*/
+
+.page-item {
+    display: inline-block;
+    list-style: none;
+    vertical-align: middle;
+    margin-bottom: 0;
+}
+.page-item.ellipsis:before {
+    content: "\2026";
+}
+.page-item.ellipsis {
+    display: inline-block;
+    padding: 0 0.5rem;
+    margin: 0 0.2rem 0.5rem 0;
+    font-size: 1.4rem;
+    min-width: 3.5rem;
+    height: 3.5rem;
+    line-height: 3.5rem;
+    text-align: center;
+    color: rgba(0, 0, 0, 0.7);
+    background-color: #ffffff;
+    background-image: none;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 0.4rem;
+}
+.page-link {
+    display: inline-block;
+    padding: 0 0.5rem;
+    margin: 0 0.2rem 0.5rem 0;
+    font-size: 1.4rem;
+    min-width: 3.5rem;
+    height: 3.5rem;
+    line-height: 3.5rem;
+    text-align: center;
+    color: rgba(0, 0, 0, 0.7);
+    background-color: #ffffff;
+    background-image: none;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 0.4rem;
+}
+.dark-mode .page-item.ellipsis {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.05);
+    background-image: none;
+    border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent;
+}
+.dark-mode .page-link {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.05);
+    background-image: none;
+    border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent;
+}
+.page-link {
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.dark-mode .page-link {
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+}
+.page-link:hover {
+    text-decoration: none;
+    color: rgba(0, 0, 0, 0.7);
+    background-color: #f7f7f7;
+    background-image: none;
+    border-color: rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.dark-mode .page-link:hover {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.1);
+    background-image: none;
+    border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+}
+.page-item.active .page-link {
+    color: #ffffff;
+    background-color: #1890ff;
+    background-image: none;
+    border-color: #1890ff;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+    pointer-events: none;
+}
+.dark-mode .page-item.active .page-link {
+    color: #ffffff;
+    background-color: #1890ff;
+    background-image: none;
+    border-color: #1890ff;
+    -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+}
+.pagination-rounded .page-item.ellipsis,
+.pagination-rounded .page-link {
+    border-radius: 50%;
+}
+
+/* Large pagination */
+
+.pagination-lg .page-item.ellipsis {
+    padding: 0 0.5rem;
+    margin: 0 0.2rem 0.5rem 0;
+    font-size: 1.8rem;
+    min-width: 4.2rem;
+    height: 4.2rem;
+    line-height: 4.2rem;
+}
+
+.pagination-lg .page-link {
+    padding: 0 0.5rem;
+    margin: 0 0.2rem 0.5rem 0;
+    font-size: 1.8rem;
+    min-width: 4.2rem;
+    height: 4.2rem;
+    line-height: 4.2rem;
+}
+
+/* Small pagination */
+
+.pagination-sm .page-item.ellipsis {
+    padding: 0 0.5rem;
+    margin: 0 0.2rem 0.5rem 0;
+    font-size: 1.2rem;
+    min-width: 2.8rem;
+    height: 2.8rem;
+    line-height: 2.8rem;
+}
+
+.pagination-sm .page-link {
+    padding: 0 0.5rem;
+    margin: 0 0.2rem 0.5rem 0;
+    font-size: 1.2rem;
+    min-width: 2.8rem;
+    height: 2.8rem;
+    line-height: 2.8rem;
+}
+
+/* Disabled state */
+
+.page-item.disabled .page-link,
+.dark-mode .page-item.disabled .page-link {
+    opacity: 0.6;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    pointer-events: none;
+}
+
+/*
+-------------------------------------------------------------------------------
+18. Breadcrumb [hm-18]
+-------------------------------------------------------------------------------
+*/
+
+.breadcrumb {
+    padding: 0;
+    background-color: transparent;
+    border: 0 solid transparent;
+    border-radius: 0;
+}
+.dark-mode .breadcrumb {
+    background-color: transparent;
+    border-color: transparent;
+}
+.breadcrumb-item {
+    display: inline-block;
+    list-style: none;
+    margin-bottom: 0;
+}
+.breadcrumb-item:before {
+    content: "\002F";
+    margin-left: 1rem;
+    margin-right: 1.5rem;
+}
+.breadcrumb-item:first-child:before {
+    display: none;
+}
+.breadcrumb-item.active a {
+    pointer-events: none;
+    color: inherit;
+}
+.dark-mode .breadcrumb-item a {
+    /* 
+    Links are NOT antialiased because they are NOT light text on a dark bg.
+    */ 
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+}
+.dark-mode .breadcrumb-item.active a {
+    /*
+    Active links ARE antialiased because they ARE light text on a dark bg.
+    */ 
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+19. Tooltips [hm-19]
+-------------------------------------------------------------------------------
+*/
+
+[data-toggle="tooltip"] {
+    position: relative;
+}
+
+/* Tooltip arrow */
+
+[data-toggle="tooltip"]::before {
+    content: " ";
+    width: 1rem;
+    height: 1rem;
+    background-color: #191c20;
+    position: absolute;
+    visibility: hidden;
+    opacity: 0;
+    z-index: 90;
+}
+.dark-mode [data-toggle="tooltip"]::before {
+    background-color: #ffffff;
+}
+
+/* Tooltip content */
+
+[data-toggle="tooltip"]::after {
+    content: attr(data-title);
+    white-space: normal;
+    width: 10rem;
+    font-size: 1.2rem;
+    line-height: 1.5;
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.8);
+    background-color: #191c20;
+    border-radius: 0.4rem;
+    text-align: center;
+    position: absolute;
+    visibility: hidden;
+    z-index: 90;
+}
+.dark-mode [data-toggle="tooltip"]::after {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffffff;
+}
+
+/* Tooltip top */
+
+[data-toggle="tooltip"]:not([data-placement])::before,
+[data-toggle="tooltip"][data-placement="top"]::before {
+    left: 50%;
+    top: -0.5rem;
+    transform: translate(-50%, -100%) rotate(45deg);
+}
+[data-toggle="tooltip"]:not([data-placement])::after,
+[data-toggle="tooltip"][data-placement="top"]::after {
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+/* Tooltip bottom */
+
+[data-toggle="tooltip"][data-placement="bottom"]::before {
+    left: 50%;
+    bottom: -0.5rem;
+    transform: translate(-50%, 100%) rotate(45deg);
+}
+[data-toggle="tooltip"][data-placement="bottom"]::after {
+    left: 50%;
+    bottom: 50%;
+    transform: translate(-50%, 50%);
+}
+
+/* Tooltip left */
+
+[data-toggle="tooltip"][data-placement="left"]::before {
+    left: -0.5rem;
+    transform: translate(-100%, 100%) rotate(45deg);
+}
+[data-toggle="tooltip"][data-placement="left"]::after {
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+/* Tooltip right */
+
+[data-toggle="tooltip"][data-placement="right"]::before {
+    right: -0.5rem;
+    transform: translate(100%, 100%) rotate(45deg);
+}
+[data-toggle="tooltip"][data-placement="right"]::after {
+    right: 50%;
+    top: 50%;
+    transform: translate(50%, -50%);
+}
+
+/* Show tooltips (on all screens) */
+
+/* Arrow */
+
+[data-toggle="tooltip"]:not([data-target-breakpoint]):hover::before,
+[data-toggle="tooltip"]:not([data-target-breakpoint]):focus::before {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity 0.5s;
+    -webkit-transition: opacity 0.5s;
+}
+
+/* Content */
+
+[data-toggle="tooltip"]:not([data-target-breakpoint]):hover::after,
+[data-toggle="tooltip"]:not([data-target-breakpoint]):focus::after {
+    visibility: visible;
+    -webkit-transition: all 0.1s, color 0s, background-color 0s;
+    transition: all 0.1s, color 0s, background-color 0s;
+}
+
+/* Placement */
+
+[data-toggle="tooltip"]:not([data-target-breakpoint]):not([data-placement]):hover::after,
+[data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="top"]:hover::after,
+[data-toggle="tooltip"]:not([data-target-breakpoint]):not([data-placement]):focus::after,
+[data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="top"]:focus::after {
+    top: -1rem;
+    transform: translate(-50%, -100%);
+}
+[data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="bottom"]:hover::after,
+[data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="bottom"]:focus::after {
+    bottom: -1rem;
+    transform: translate(-50%, 100%);
+}
+[data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="left"]:hover::after,
+[data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="left"]:focus::after {
+    left: -1rem;
+    transform: translate(-100%, -50%);
+}
+[data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="right"]:hover::after,
+[data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="right"]:focus::after {
+    right: -1rem;
+    transform: translate(100%, -50%);
+}
+
+/* Show tooltips (only on screens with widths > 768px) */
+
+@media (min-width: 769px) {
+    /* Arrow */
+
+    [data-toggle="tooltip"][data-target-breakpoint="md"]:hover::before,
+    [data-toggle="tooltip"][data-target-breakpoint="md"]:focus::before {
+        visibility: visible;
+        opacity: 1;
+        transition: opacity 0.5s;
+        -webkit-transition: opacity 0.5s;
+    }
+
+    /* Content */
+
+    [data-toggle="tooltip"][data-target-breakpoint="md"]:hover::after,
+    [data-toggle="tooltip"][data-target-breakpoint="md"]:focus::after {
+        visibility: visible;
+        -webkit-transition: all 0.1s, color 0s, background-color 0s;
+        transition: all 0.1s, color 0s, background-color 0s;
+    }
+
+    /* Placement */
+
+    [data-toggle="tooltip"][data-target-breakpoint="md"]:not([data-placement]):hover::after,
+    [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="top"]:hover::after,
+    [data-toggle="tooltip"][data-target-breakpoint="md"]:not([data-placement]):focus::after,
+    [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="top"]:focus::after {
+        top: -1rem;
+        transform: translate(-50%, -100%);
+    }
+    [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="bottom"]:hover::after,
+    [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="bottom"]:focus::after {
+        bottom: -1rem;
+        transform: translate(-50%, 100%);
+    }
+    [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="left"]:hover::after,
+    [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="left"]:focus::after {
+        left: -1rem;
+        transform: translate(-100%, -50%);
+    }
+    [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="right"]:hover::after,
+    [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="right"]:focus::after {
+        right: -1rem;
+        transform: translate(100%, -50%);
+    }
+}
+
+/* Show tooltips (only on screens with widths > 992px) */
+
+@media (min-width: 993px) {
+    /* Arrow */
+
+    [data-toggle="tooltip"][data-target-breakpoint="lg"]:hover::before,
+    [data-toggle="tooltip"][data-target-breakpoint="lg"]:focus::before {
+        visibility: visible;
+        opacity: 1;
+        transition: opacity 0.5s;
+        -webkit-transition: opacity 0.5s;
+    }
+
+    /* Content */
+
+    [data-toggle="tooltip"][data-target-breakpoint="lg"]:hover::after,
+    [data-toggle="tooltip"][data-target-breakpoint="lg"]:focus::after {
+        visibility: visible;
+        -webkit-transition: all 0.1s, color 0s, background-color 0s;
+        transition: all 0.1s, color 0s, background-color 0s;
+    }
+
+    /* Placement */
+
+    [data-toggle="tooltip"][data-target-breakpoint="lg"]:not([data-placement]):hover::after,
+    [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="top"]:hover::after,
+    [data-toggle="tooltip"][data-target-breakpoint="lg"]:not([data-placement]):focus::after,
+    [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="top"]:focus::after {
+        top: -1rem;
+        transform: translate(-50%, -100%);
+    }
+    [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="bottom"]:hover::after,
+    [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="bottom"]:focus::after {
+        bottom: -1rem;
+        transform: translate(-50%, 100%);
+    }
+    [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="left"]:hover::after,
+    [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="left"]:focus::after {
+        left: -1rem;
+        transform: translate(-100%, -50%);
+    }
+    [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="right"]:hover::after,
+    [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="right"]:focus::after {
+        right: -1rem;
+        transform: translate(100%, -50%);
+    }
+}
+
+
+/*
+-------------------------------------------------------------------------------
+20. Badges [hm-20]
+-------------------------------------------------------------------------------
+*/
+
+.badge {
+    display: inline-block;
+    position: relative;
+    font-size: 1.2rem;
+    line-height: 1.2;
+    padding: 0.2rem 0.8rem;
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 0.4rem;
+}
+.dark-mode .badge {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: transparent;
+    border-color: rgba(255, 255, 255, 0.2);
+}
+.badge-pill {
+    border-radius: 3rem;
+}
+
+/* Primary, success, secondary, danger badges. */
+
+/* Light mode */
+
+.badge.badge-primary {
+    color: #ffffff;
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+.badge.badge-success {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #0be881;
+    border-color: #0be881;
+}
+.badge.badge-secondary {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffcf00;
+    border-color: #ffcf00;
+}
+.badge.badge-danger {
+    color: #ffffff;
+    background-color: #ff4d4f;
+    border-color: #ff4d4f;
+}
+
+/* Dark mode */
+
+.dark-mode .badge.badge-primary {
+    color: #ffffff;
+    background-color: #1890ff;
+    border-color: #1890ff;
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+}
+.dark-mode .badge.badge-success {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #0be881;
+    border-color: #0be881;
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+}
+.dark-mode .badge.badge-secondary {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffcf00;
+    border-color: #ffcf00;
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+}
+.dark-mode .badge.badge-danger {
+    color: #ffffff;
+    background-color: #ff4d4f;
+    border-color: #ff4d4f;
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+}
+
+/* Badge group */
+
+.badge-group {
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+}
+.badge-group > .badge:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+.badge-group > .badge:not(:last-child) {
+    border-right: none;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+/* Link badges */
+
+/* Light mode */
+
+a.badge:hover,
+a.badge-group:hover {
+    text-decoration: none;
+}
+a.badge:hover {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #f7f7f7;
+    border-color: rgba(0, 0, 0, 0.2);
+}
+a.badge-group:hover > .badge {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #f7f7f7;
+    border-color: rgba(0, 0, 0, 0.2);
+}
+a.badge.badge-primary:hover {
+    color: #ffffff;
+    background-color: #45a3fb;
+    border-color: #45a3fb;
+}
+a.badge-group:hover > .badge.badge-primary {
+    color: #ffffff;
+    background-color: #45a3fb;
+    border-color: #45a3fb;
+}
+a.badge.badge-success:hover {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #81eea8;
+    border-color: #81eea8;
+}
+a.badge-group:hover > .badge.badge-success {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #81eea8;
+    border-color: #81eea8;
+}
+a.badge.badge-secondary:hover {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffe04d;
+    border-color: #ffe04d;
+}
+a.badge-group:hover > .badge.badge-secondary {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffe04d;
+    border-color: #ffe04d;
+}
+a.badge.badge-danger:hover {
+    color: #ffffff;
+    background-color: #ed586c;
+    border-color: #ed586c;
+}
+a.badge-group:hover > .badge.badge-danger {
+    color: #ffffff;
+    background-color: #ed586c;
+    border-color: #ed586c;
+}
+
+/* Dark mode */
+
+.dark-mode a.badge:hover {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.025);
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+.dark-mode a.badge-group:hover > .badge {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.025);
+    border-color: rgba(255, 255, 255, 0.2);
+}
+.dark-mode a.badge.badge-primary:hover {
+    color: #ffffff;
+    background-color: #45a3fb;
+    border-color: #45a3fb;
+}
+.dark-mode a.badge-group:hover > .badge.badge-primary {
+    color: #ffffff;
+    background-color: #45a3fb;
+    border-color: #45a3fb;
+}
+.dark-mode a.badge.badge-success:hover {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #81eea8;
+    border-color: #81eea8;
+}
+.dark-mode a.badge-group:hover > .badge.badge-success {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #81eea8;
+    border-color: #81eea8;
+}
+.dark-mode a.badge.badge-secondary:hover {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffe04d;
+    border-color: #ffe04d;
+}
+.dark-mode a.badge-group:hover > .badge.badge-secondary {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffe04d;
+    border-color: #ffe04d;
+}
+.dark-mode a.badge.badge-danger:hover {
+    color: #ffffff;
+    background-color: #ed586c;
+    border-color: #ed586c;
+}
+.dark-mode a.badge-group:hover > .badge.badge-danger {
+    color: #ffffff;
+    background-color: #ed586c;
+    border-color: #ed586c;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+21. Image [hm-21]
+-------------------------------------------------------------------------------
+*/
+
+.img-fluid {
+    max-width: 100%;
+    height: auto;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+22. Button group [hm-22]
+-------------------------------------------------------------------------------
+*/
+
+.btn-group,
+.btn-group-vertical {
+    position: relative;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    vertical-align: middle;
+}
+.btn-group > .btn,
+.btn-group-vertical > .btn {
+    position: relative;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+}
+.btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active,
+.btn-group-vertical > .btn:focus,
+.btn-group-vertical > .btn:active,
+.btn-group-vertical > .btn.active {
+    z-index: 1;
+}
+.btn-group > .btn:not(:first-child) {
+    margin-left: calc((-1) * 1px);
+}
+.btn-group > .btn-group:not(:first-child) {
+    margin-left: calc((-1) * 1px);
+}
+.btn-group > .btn:not(:last-child):not([data-toggle="dropdown"]),
+.btn-group > .btn-group:not(:last-child) > .btn {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+.btn-group > .btn:not(:first-child),
+.btn-group > .btn-group:not(:first-child) > .btn {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+.btn-group-vertical {
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -ms-flex-align: start;
+    align-items: flex-start;
+    -ms-flex-pack: center;
+    justify-content: center;
+}
+.btn-group-vertical > .btn,
+.btn-group-vertical > .btn-group {
+    width: 100%;
+}
+.btn-group-vertical > .btn:not(:first-child) {
+    margin-top: calc((-1) * 1px);
+}
+.btn-group-vertical > .btn-group:not(:first-child) {
+    margin-top: calc((-1) * 1px);
+}
+.btn-group-vertical > .btn:not(:last-child):not([data-toggle="dropdown"]),
+.btn-group-vertical > .btn-group:not(:last-child) > .btn {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+}
+.btn-group-vertical > .btn:not(:first-child),
+.btn-group-vertical > .btn-group:not(:first-child) > .btn {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+/* Remove box shadow for button group vertical (except last button) */
+
+.btn-group-vertical > .btn:not(:last-child):not([data-toggle="dropdown"]):not(:focus):not(.active),
+.btn-group-vertical > .btn-group:not(:last-child) > .btn:not(:focus):not(.active) {
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+/* Button group sizing */
+
+.btn-group-sm > .btn {
+    height: 2.6rem;
+    line-height: 2.6rem;
+    padding: 0 1rem;
+    font-size: 1.2rem;
+}
+.btn-group-lg > .btn {
+    height: 4rem;
+    line-height: 4rem;
+    padding: 0 2rem;
+    font-size: 1.8rem;
+}
+.btn-group-sm > .btn-square {
+    width: 2.6rem;
+    padding-left: 0;
+    padding-right: 0;
+}
+.btn-group-lg > .btn-square {
+    width: 4rem;
+    padding-left: 0;
+    padding-right: 0;
+}
+.btn-group-sm > .btn-rounded {
+    border-radius: 2.6rem;
+}
+.btn-group-lg > .btn-rounded {
+    border-radius: 4rem;
+}
+
+/* Button toolbar */
+
+.btn-toolbar {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+}
+.btn-toolbar .input-group {
+    width: auto;
+}
+
+/* Button toolbar minimum width for input groups (Required for IE) */
+
+.btn-toolbar .input-group {
+    min-width: 20rem;
+}
+@media (max-width: 576px) {
+    .btn-toolbar .input-group {
+        min-width: 18rem;
+    }
+}
+
+/* Buttons (only border colors) */
+
+.btn-group > .btn {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+
+.btn-group-vertical > .btn {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-group > .btn:hover {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-group-vertical > .btn:hover {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-group > .btn:focus {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-group-vertical > .btn:focus {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-group > .btn.active {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-group-vertical > .btn.active {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .btn-group > .btn {
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .btn-group-vertical > .btn {
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .btn-group > .btn:hover {
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .btn-group-vertical > .btn:hover {
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .btn-group > .btn:focus {
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .btn-group-vertical > .btn:focus {
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .btn-group > .btn.active {
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .btn-group-vertical > .btn.active {
+    border-color: rgba(0, 0, 0, 0.3);
+}
+
+/* Link button */
+
+.btn-group > .btn.btn-link {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+
+.btn-group-vertical > .btn.btn-link {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-group > .btn.btn-link:hover {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-group-vertical > .btn.btn-link:hover {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-group > .btn.btn-link:focus {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-group-vertical > .btn.btn-link:focus {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-group > .btn.btn-link.active {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-group-vertical > .btn.btn-link.active {
+    border-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .btn-group > .btn.btn-link {
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .btn-group-vertical > .btn.btn-link {
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .btn-group > .btn.btn-link:hover {
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .btn-group-vertical > .btn.btn-link:hover {
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .btn-group > .btn.btn-link:focus {
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .btn-group-vertical > .btn.btn-link:focus {
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .btn-group > .btn.btn-link.active {
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .btn-group-vertical > .btn.btn-link.active {
+    border-color: rgba(0, 0, 0, 0.3);
+}
+
+/* Primary button */
+
+.btn-group > .btn.btn-primary {
+    border-color: #1890ff;
+}
+
+.btn-group-vertical > .btn.btn-primary {
+    border-color: #1890ff;
+}
+.btn-group > .btn.btn-primary:hover {
+    border-color: #45a3fb;
+}
+.btn-group-vertical > .btn.btn-primary:hover {
+    border-color: #45a3fb;
+}
+.btn-group > .btn.btn-primary:focus {
+    border-color: #1890ff;
+}
+.btn-group-vertical > .btn.btn-primary:focus {
+    border-color: #1890ff;
+}
+.btn-group > .btn.btn-primary.active {
+    border-color: #1890ff;
+}
+.btn-group-vertical > .btn.btn-primary.active {
+    border-color: #1890ff;
+}
+.dark-mode .btn-group > .btn.btn-primary {
+    border-color: #1890ff;
+}
+.dark-mode .btn-group-vertical > .btn.btn-primary {
+    border-color: #1890ff;
+}
+.dark-mode .btn-group > .btn.btn-primary:hover {
+    border-color: #45a3fb;
+}
+.dark-mode .btn-group-vertical > .btn.btn-primary:hover {
+    border-color: #45a3fb;
+}
+.dark-mode .btn-group > .btn.btn-primary:focus {
+    border-color: #1890ff;
+}
+.dark-mode .btn-group-vertical > .btn.btn-primary:focus {
+    border-color: #1890ff;
+}
+.dark-mode .btn-group > .btn.btn-primary.active {
+    border-color: #1890ff;
+}
+.dark-mode .btn-group-vertical > .btn.btn-primary.active {
+    border-color: #1890ff;
+}
+
+/* Success button */
+
+.btn-group > .btn.btn-success {
+    border-color: #0be881;
+}
+
+.btn-group-vertical > .btn.btn-success {
+    border-color: #0be881;
+}
+.btn-group > .btn.btn-success:hover {
+    border-color: #81eea8;
+}
+.btn-group-vertical > .btn.btn-success:hover {
+    border-color: #81eea8;
+}
+.btn-group > .btn.btn-success:focus {
+    border-color: #0be881;
+}
+.btn-group-vertical > .btn.btn-success:focus {
+    border-color: #0be881;
+}
+.btn-group > .btn.btn-success.active {
+    border-color: #0be881;
+}
+.btn-group-vertical > .btn.btn-success.active {
+    border-color: #0be881;
+}
+.dark-mode .btn-group > .btn.btn-success {
+    border-color: #0be881;
+}
+.dark-mode .btn-group-vertical > .btn.btn-success {
+    border-color: #0be881;
+}
+.dark-mode .btn-group > .btn.btn-success:hover {
+    border-color: #81eea8;
+}
+.dark-mode .btn-group-vertical > .btn.btn-success:hover {
+    border-color: #81eea8;
+}
+.dark-mode .btn-group > .btn.btn-success:focus {
+    border-color: #0be881;
+}
+.dark-mode .btn-group-vertical > .btn.btn-success:focus {
+    border-color: #0be881;
+}
+.dark-mode .btn-group > .btn.btn-success.active {
+    border-color: #0be881;
+}
+.dark-mode .btn-group-vertical > .btn.btn-success.active {
+    border-color: #0be881;
+}
+
+/* Secondary button */
+
+.btn-group > .btn.btn-secondary {
+    border-color: #ffcf00;
+}
+
+.btn-group-vertical > .btn.btn-secondary {
+    border-color: #ffcf00;
+}
+.btn-group > .btn.btn-secondary:hover {
+    border-color: #ffe04d;
+}
+.btn-group-vertical > .btn.btn-secondary:hover {
+    border-color: #ffe04d;
+}
+.btn-group > .btn.btn-secondary:focus {
+    border-color: #ffcf00;
+}
+.btn-group-vertical > .btn.btn-secondary:focus {
+    border-color: #ffcf00;
+}
+.btn-group > .btn.btn-secondary.active {
+    border-color: #ffcf00;
+}
+.btn-group-vertical > .btn.btn-secondary.active {
+    border-color: #ffcf00;
+}
+.dark-mode .btn-group > .btn.btn-secondary {
+    border-color: #ffcf00;
+}
+.dark-mode .btn-group-vertical > .btn.btn-secondary {
+    border-color: #ffcf00;
+}
+.dark-mode .btn-group > .btn.btn-secondary:hover {
+    border-color: #ffe04d;
+}
+.dark-mode .btn-group-vertical > .btn.btn-secondary:hover {
+    border-color: #ffe04d;
+}
+.dark-mode .btn-group > .btn.btn-secondary:focus {
+    border-color: #ffcf00;
+}
+.dark-mode .btn-group-vertical > .btn.btn-secondary:focus {
+    border-color: #ffcf00;
+}
+.dark-mode .btn-group > .btn.btn-secondary.active {
+    border-color: #ffcf00;
+}
+.dark-mode .btn-group-vertical > .btn.btn-secondary.active {
+    border-color: #ffcf00;
+}
+
+/* Danger button */
+
+.btn-group > .btn.btn-danger {
+    border-color: #ff4d4f;
+}
+
+.btn-group-vertical > .btn.btn-danger {
+    border-color: #ff4d4f;
+}
+.btn-group > .btn.btn-danger:hover {
+    border-color: #ed586c;
+}
+.btn-group-vertical > .btn.btn-danger:hover {
+    border-color: #ed586c;
+}
+.btn-group > .btn.btn-danger:focus {
+    border-color: #ff4d4f;
+}
+.btn-group-vertical > .btn.btn-danger:focus {
+    border-color: #ff4d4f;
+}
+.btn-group > .btn.btn-danger.active {
+    border-color: #ff4d4f;
+}
+.btn-group-vertical > .btn.btn-danger.active {
+    border-color: #ff4d4f;
+}
+.dark-mode .btn-group > .btn.btn-danger {
+    border-color: #ff4d4f;
+}
+.dark-mode .btn-group-vertical > .btn.btn-danger {
+    border-color: #ff4d4f;
+}
+.dark-mode .btn-group > .btn.btn-danger:hover {
+    border-color: #ed586c;
+}
+.dark-mode .btn-group-vertical > .btn.btn-danger:hover {
+    border-color: #ed586c;
+}
+.dark-mode .btn-group > .btn.btn-danger:focus {
+    border-color: #ff4d4f;
+}
+.dark-mode .btn-group-vertical > .btn.btn-danger:focus {
+    border-color: #ff4d4f;
+}
+.dark-mode .btn-group > .btn.btn-danger.active {
+    border-color: #ff4d4f;
+}
+.dark-mode .btn-group-vertical > .btn.btn-danger.active {
+    border-color: #ff4d4f;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+23. Collapse [hm-23]
+-------------------------------------------------------------------------------
+*/
+
+details,
+details * {
+    /* Fixes Chrome bug */
+    box-sizing: border-box;
+}
+
+/* Collapse header */
+
+.collapse-header {
+    position: relative;
+    cursor: pointer;
+    padding: 1.2rem 2rem;
+    font-size: 1.4rem;
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #f7f7f7;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 0.4rem;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.dark-mode .collapse-header {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.02);
+    border-color: #47494d;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.collapse-header:focus {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #f7f7f7;
+    border-color: rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.dark-mode .collapse-header:focus {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.02);
+    border-color: #47494d;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.collapse-panel[open] .collapse-header {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #f7f7f7;
+    border-color: rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.dark-mode .collapse-panel[open] .collapse-header {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.02);
+    border-color: #47494d;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.collapse-panel[open] .collapse-header:focus {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #f7f7f7;
+    border-color: rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.dark-mode .collapse-panel[open] .collapse-header:focus {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.02);
+    border-color: #47494d;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: none;
+}
+.collapse-panel[open] .collapse-header {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+/* Collapse header arrow set using background image */
+
+.collapse-header {
+    /* Firefox */
+    list-style-type: none;
+}
+.collapse-header::-webkit-details-marker {
+    /* Chrome */
+    display: none;
+}
+.collapse-header::marker {
+    display: none;
+}
+.collapse-header:not(.without-arrow) {
+    padding: 1.2rem 2rem 1.2rem 4.4rem;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5AgHFAwNJY24UQAAAJVJREFUKM+lk8ENgzAMRZ9hgS4SiRFgDN+6QifpCD1mDFbIIQuwASNwcaSqKsEW/5RI/1n+jiMAqvoE3sCScy50JGb+2H2/ggar3PQAVlWdesBilV2QWIYJWM1Mrz1pBy8k37QHkt8eryD5F6wHydn4zqCBoO63FAodGmvo4UKrETG3bXWbG/DymgHGWmtJKW3A7PmiB2rUYYave/NSAAAAAElFTkSuQmCC);
+    background-size: 0.6rem;
+    background-repeat: no-repeat;
+    background-position: 2rem center;
+}
+.collapse-panel[open] .collapse-header:not(.without-arrow) {
+    padding: 1.2rem 2rem 1.2rem 4.4rem;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAI9JREFUeNpiZACCyMjIBCDVD8SOy5cvv8BAAgDqNQBS+4G4EKh3ASPUsPlQ+Q+kGIpkmABUKJEJ6jIYAEnshyok1TAQ6AcZ6Ah1GdGG4jAM7DtGQgrQvU9ILSOxColVw0is7VA2QV8wkhA+DMQECSMJgc5AyDCcBhIwFG9aZSQxrRFM+IwkJGAGYnIRQIABACQuXCKovu2mAAAAAElFTkSuQmCC);
+    background-size: 1rem;
+    background-repeat: no-repeat;
+    background-position: 2rem center;
+}
+
+/* Collapse header focus effect (::after) */
+
+.collapse-header::after {
+    content: "";
+    position: absolute;
+    display: block;
+    top: 0.2rem;
+    left: 0.2rem;
+    width: calc(100% - (2 * 0.2rem));
+    height: calc(100% - (2 * 0.2rem));
+    border-radius: 0.4rem;
+}
+.collapse-header:focus::after {
+    -moz-box-shadow: inset 0 0 0 0.2rem #45a3fb;
+    -webkit-box-shadow: inset 0 0 0 0.2rem #45a3fb;
+    box-shadow: inset 0 0 0 0.2rem #45a3fb;
+}
+.dark-mode .collapse-header:focus::after {
+    -moz-box-shadow: inset 0 0 0 0.2rem #0d518f;
+    -webkit-box-shadow: inset 0 0 0 0.2rem #0d518f;
+    box-shadow: inset 0 0 0 0.2rem #0d518f;
+}
+
+/* Controlling display based on collapse open state */
+
+.collapse-panel[open] .hidden-collapse-open {
+    display: none;
+}
+.collapse-panel:not([open]) .hidden-collapse-closed {
+    display: none;
+}
+
+/* Collapse content */
+
+.collapse-content {
+    padding: 2rem;
+    font-size: 1.4rem;
+    color: rgba(0, 0, 0, 0.85);
+    background-color: transparent;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    border-top: none;
+    border-bottom-left-radius: 0.4rem;
+    border-bottom-right-radius: 0.4rem;
+}
+.dark-mode .collapse-content {
+    color: rgba(255, 255, 255, 0.8);
+    background-color: transparent;
+    border-color: #47494d;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+/* Collapse group */
+
+.collapse-group .collapse-panel:not(:first-child) {
+    margin-top: calc((-1) * 1px);
+}
+.collapse-group .collapse-panel:not(:first-child) .collapse-header {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+.collapse-group .collapse-panel:not([open]):not(:last-child) .collapse-header {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+.collapse-group .collapse-panel[open]:not(:first-child) .collapse-content {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+.collapse-group .collapse-panel[open]:not(:last-child) .collapse-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-bottom: 0;
+}
+
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    /* 
+    On IE, collapse panels are styled to be always open. This is because they 
+    are not supporter by the browser.
+    */
+
+    /* Collapse header */
+    
+    .collapse-panel .collapse-header {
+        cursor: auto;
+        color: rgba(0, 0, 0, 0.85);
+        background-color: #f7f7f7;
+        border-color: rgba(0, 0, 0, 0.2);
+        -moz-box-shadow: none;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+    }
+    .dark-mode .collapse-panel .collapse-header {
+        color: rgba(255, 255, 255, 0.8);
+        background-color: rgba(255, 255, 255, 0.02);
+        border-color: #47494d;
+        -moz-box-shadow: none;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+    }
+    .collapse-panel .collapse-header {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    /* Collapse header arrow set using background image */
+
+    .collapse-panel .collapse-header:not(.without-arrow) {
+        padding: 1.2rem 2rem 1.2rem 4.4rem;
+        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAI9JREFUeNpiZACCyMjIBCDVD8SOy5cvv8BAAgDqNQBS+4G4EKh3ASPUsPlQ+Q+kGIpkmABUKJEJ6jIYAEnshyok1TAQ6AcZ6Ah1GdGG4jAM7DtGQgrQvU9ILSOxColVw0is7VA2QV8wkhA+DMQECSMJgc5AyDCcBhIwFG9aZSQxrRFM+IwkJGAGYnIRQIABACQuXCKovu2mAAAAAElFTkSuQmCC);
+        background-size: 1rem;
+        background-repeat: no-repeat;
+        background-position: 2rem center;
+    }
+
+    /* Controlling display based on collapse open state */
+
+    .collapse-panel .hidden-collapse-open {
+        display: none;
+    }
+    .collapse-panel:not([open]) .hidden-collapse-closed {
+        display: inline-block;
+    }
+
+    /* Collapse group */
+
+    .collapse-group .collapse-panel:not(:first-child) .collapse-content {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
+    .collapse-group .collapse-panel:not(:last-child) .collapse-content {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        border-bottom: 0;
+    }
+}
+
+
+/*
+-------------------------------------------------------------------------------
+24. Progress [hm-24]
+-------------------------------------------------------------------------------
+*/
+
+.progress {
+    display: -ms-flexbox;
+    display: flex;
+    overflow: hidden;
+    height: 0.8rem;
+    font-size: 1.2rem;
+    line-height: 0;
+    border-radius: 3.2rem;
+    background-color: rgba(0, 0, 0, 0.1);
+}
+.dark-mode .progress {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+/* Progress bar */
+
+.progress-bar {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -ms-flex-pack: center;
+    justify-content: center;
+    overflow: hidden;
+    text-align: center;
+    white-space: nowrap;
+    color: #ffffff;
+    background-color: #1890ff;
+    border-radius: inherit;
+}
+.dark-mode .progress-bar {
+    color: #ffffff;
+    background-color: #1890ff;
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+}
+.progress-bar:not(:only-child) {
+    border-radius: 0;
+}
+.progress-bar:not(:only-child):last-child {
+    border-top-right-radius: inherit;
+    border-bottom-right-radius: inherit;
+}
+
+/* Progress group */
+
+.progress-group {
+    position: relative;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -ms-flex-align: center;
+    align-items: center;
+    width: 100%;
+}
+.progress-group > .progress {
+    position: relative;
+    -ms-flex: 1 1 0%;
+    flex: 1 1 0%;
+    min-width: 0;
+    margin-bottom: 0;
+}
+.progress-group-label {
+    font-size: 1.4rem;
+}
+.progress-group > .progress {
+    margin-left: 0.4rem;
+    margin-right: 0.4rem;
+}
+.progress-group > .progress-group-label {
+    margin-left: 0.4rem;
+    margin-right: 0.4rem;
+}
+.progress-group > .progress:first-child,
+.progress-group > .progress-group-label:first-child {
+    margin-left: 0;
+}
+.progress-group > .progress:last-child,
+.progress-group > .progress-group-label:last-child {
+    margin-right: 0;
+}
+
+/* Progress bar animated */
+
+.progress-bar-animated {
+    position: relative;
+}
+.progress-bar-animated::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: inherit;
+    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3));
+    transform: translateX(-100%);
+    animation: progress-bar-shine 2s infinite;
+}
+.dark-mode .progress-bar-animated::before {
+    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3));
+}
+.progress-bar-animated.highlight-dark::before {
+    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.1));
+}
+.dark-mode .progress-bar-animated.highlight-dark::before {
+    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.2));
+}
+@keyframes progress-bar-shine {
+    to {
+        transform: translateX(0);
+        opacity: 0.1;
+    }
+}
+
+
+/*
+-------------------------------------------------------------------------------
+25. Spacing utilities [hm-25]
+
+Notes:
+    ~ Unlike other frameworks, Halfmoon keeps the default margins and spacing 
+    for most elements. Instead, we encourage people to use the following 
+    utility classes for spacing.
+-------------------------------------------------------------------------------
+*/
+
+/* Padding */
+
+.p-0 {
+    padding: 0 !important;
+}
+.p-5 {
+    padding: 0.5rem !important;
+}
+.p-10 {
+    padding: 1rem !important;
+}
+.p-15 {
+    padding: 1.5rem !important;
+}
+.p-20 {
+    padding: 2rem !important;
+}
+.px-0 {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
+.px-5 {
+    padding-left: 0.5rem !important;
+    padding-right: 0.5rem !important;
+}
+.px-10 {
+    padding-left: 1rem !important;
+    padding-right: 1rem !important;
+}
+.px-15 {
+    padding-left: 1.5rem !important;
+    padding-right: 1.5rem !important;
+}
+.px-20 {
+    padding-left: 2rem !important;
+    padding-right: 2rem !important;
+}
+.py-0 {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+}
+.py-5 {
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important;
+}
+.py-10 {
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important;
+}
+.py-15 {
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important;
+}
+.py-20 {
+    padding-top: 2rem !important;
+    padding-bottom: 2rem !important;
+}
+.pt-0 {
+    padding-top: 0 !important;
+}
+.pt-5 {
+    padding-top: 0.5rem !important;
+}
+.pt-10 {
+    padding-top: 1rem !important;
+}
+.pt-15 {
+    padding-top: 1.5rem !important;
+}
+.pt-20 {
+    padding-top: 2rem !important;
+}
+.pb-0 {
+    padding-bottom: 0 !important;
+}
+.pb-5 {
+    padding-bottom: 0.5rem !important;
+}
+.pb-10 {
+    padding-bottom: 1rem !important;
+}
+.pb-15 {
+    padding-bottom: 1.5rem !important;
+}
+.pb-20 {
+    padding-bottom: 2rem !important;
+}
+.pl-0 {
+    padding-left: 0 !important;
+}
+.pl-5 {
+    padding-left: 0.5rem !important;
+}
+.pl-10 {
+    padding-left: 1rem !important;
+}
+.pl-15 {
+    padding-left: 1.5rem !important;
+}
+.pl-20 {
+    padding-left: 2rem !important;
+}
+.pr-0 {
+    padding-right: 0 !important;
+}
+.pr-5 {
+    padding-right: 0.5rem !important;
+}
+.pr-10 {
+    padding-right: 1rem !important;
+}
+.pr-15 {
+    padding-right: 1.5rem !important;
+}
+.pr-20 {
+    padding-right: 2rem !important;
+}
+
+/* Margin */
+
+.m-0 {
+    margin: 0 !important;
+}
+.m-5 {
+    margin: 0.5rem !important;
+}
+.m-10 {
+    margin: 1rem !important;
+}
+.m-15 {
+    margin: 1.5rem !important;
+}
+.m-20 {
+    margin: 2rem !important;
+}
+.m-auto {
+    margin: auto !important;
+}
+.mx-0 {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+}
+.mx-5 {
+    margin-left: 0.5rem !important;
+    margin-right: 0.5rem !important;
+}
+.mx-10 {
+    margin-left: 1rem !important;
+    margin-right: 1rem !important;
+}
+.mx-15 {
+    margin-left: 1.5rem !important;
+    margin-right: 1.5rem !important;
+}
+.mx-20 {
+    margin-left: 2rem !important;
+    margin-right: 2rem !important;
+}
+.mx-auto {
+    margin-left: auto !important;
+    margin-right: auto !important;
+}
+.my-0 {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+}
+.my-5 {
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.5rem !important;
+}
+.my-10 {
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important;
+}
+.my-15 {
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
+}
+.my-20 {
+    margin-top: 2rem !important;
+    margin-bottom: 2rem !important;
+}
+.my-auto {
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+}
+.mt-0 {
+    margin-top: 0 !important;
+}
+.mt-5 {
+    margin-top: 0.5rem !important;
+}
+.mt-10 {
+    margin-top: 1rem !important;
+}
+.mt-15 {
+    margin-top: 1.5rem !important;
+}
+.mt-20 {
+    margin-top: 2rem !important;
+}
+.mt-auto {
+    margin-top: auto !important;
+}
+.mb-0 {
+    margin-bottom: 0 !important;
+}
+.mb-5 {
+    margin-bottom: 0.5rem !important;
+}
+.mb-10 {
+    margin-bottom: 1rem !important;
+}
+.mb-15 {
+    margin-bottom: 1.5rem !important;
+}
+.mb-20 {
+    margin-bottom: 2rem !important;
+}
+.mb-auto {
+    margin-bottom: auto !important;
+}
+.ml-0 {
+    margin-left: 0 !important;
+}
+.ml-5 {
+    margin-left: 0.5rem !important;
+}
+.ml-10 {
+    margin-left: 1rem !important;
+}
+.ml-15 {
+    margin-left: 1.5rem !important;
+}
+.ml-20 {
+    margin-left: 2rem !important;
+}
+.ml-auto {
+    margin-left: auto !important;
+}
+.mr-0 {
+    margin-right: 0 !important;
+}
+.mr-5 {
+    margin-right: 0.5rem !important;
+}
+.mr-10 {
+    margin-right: 1rem !important;
+}
+.mr-15 {
+    margin-right: 1.5rem !important;
+}
+.mr-20 {
+    margin-right: 2rem !important;
+}
+.mr-auto {
+    margin-right: auto !important;
+}
+@media (min-width: 577px) {
+    /* Padding */
+
+    .p-sm-0 {
+        padding: 0 !important;
+    }
+    .p-sm-5 {
+        padding: 0.5rem !important;
+    }
+    .p-sm-10 {
+        padding: 1rem !important;
+    }
+    .p-sm-15 {
+        padding: 1.5rem !important;
+    }
+    .p-sm-20 {
+        padding: 2rem !important;
+    }
+    .px-sm-0 {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+    }
+    .px-sm-5 {
+        padding-left: 0.5rem !important;
+        padding-right: 0.5rem !important;
+    }
+    .px-sm-10 {
+        padding-left: 1rem !important;
+        padding-right: 1rem !important;
+    }
+    .px-sm-15 {
+        padding-left: 1.5rem !important;
+        padding-right: 1.5rem !important;
+    }
+    .px-sm-20 {
+        padding-left: 2rem !important;
+        padding-right: 2rem !important;
+    }
+    .py-sm-0 {
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+    }
+    .py-sm-5 {
+        padding-top: 0.5rem !important;
+        padding-bottom: 0.5rem !important;
+    }
+    .py-sm-10 {
+        padding-top: 1rem !important;
+        padding-bottom: 1rem !important;
+    }
+    .py-sm-15 {
+        padding-top: 1.5rem !important;
+        padding-bottom: 1.5rem !important;
+    }
+    .py-sm-20 {
+        padding-top: 2rem !important;
+        padding-bottom: 2rem !important;
+    }
+    .pt-sm-0 {
+        padding-top: 0 !important;
+    }
+    .pt-sm-5 {
+        padding-top: 0.5rem !important;
+    }
+    .pt-sm-10 {
+        padding-top: 1rem !important;
+    }
+    .pt-sm-15 {
+        padding-top: 1.5rem !important;
+    }
+    .pt-sm-20 {
+        padding-top: 2rem !important;
+    }
+    .pb-sm-0 {
+        padding-bottom: 0 !important;
+    }
+    .pb-sm-5 {
+        padding-bottom: 0.5rem !important;
+    }
+    .pb-sm-10 {
+        padding-bottom: 1rem !important;
+    }
+    .pb-sm-15 {
+        padding-bottom: 1.5rem !important;
+    }
+    .pb-sm-20 {
+        padding-bottom: 2rem !important;
+    }
+    .pl-sm-0 {
+        padding-left: 0 !important;
+    }
+    .pl-sm-5 {
+        padding-left: 0.5rem !important;
+    }
+    .pl-sm-10 {
+        padding-left: 1rem !important;
+    }
+    .pl-sm-15 {
+        padding-left: 1.5rem !important;
+    }
+    .pl-sm-20 {
+        padding-left: 2rem !important;
+    }
+    .pr-sm-0 {
+        padding-right: 0 !important;
+    }
+    .pr-sm-5 {
+        padding-right: 0.5rem !important;
+    }
+    .pr-sm-10 {
+        padding-right: 1rem !important;
+    }
+    .pr-sm-15 {
+        padding-right: 1.5rem !important;
+    }
+    .pr-sm-20 {
+        padding-right: 2rem !important;
+    }
+
+    /* Margin */
+
+    .m-sm-0 {
+        margin: 0 !important;
+    }
+    .m-sm-5 {
+        margin: 0.5rem !important;
+    }
+    .m-sm-10 {
+        margin: 1rem !important;
+    }
+    .m-sm-15 {
+        margin: 1.5rem !important;
+    }
+    .m-sm-20 {
+        margin: 2rem !important;
+    }
+    .m-sm-auto {
+        margin: auto !important;
+    }
+    .mx-sm-0 {
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+    }
+    .mx-sm-5 {
+        margin-left: 0.5rem !important;
+        margin-right: 0.5rem !important;
+    }
+    .mx-sm-10 {
+        margin-left: 1rem !important;
+        margin-right: 1rem !important;
+    }
+    .mx-sm-15 {
+        margin-left: 1.5rem !important;
+        margin-right: 1.5rem !important;
+    }
+    .mx-sm-20 {
+        margin-left: 2rem !important;
+        margin-right: 2rem !important;
+    }
+    .mx-sm-auto {
+        margin-left: auto !important;
+        margin-right: auto !important;
+    }
+    .my-sm-0 {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+    }
+    .my-sm-5 {
+        margin-top: 0.5rem !important;
+        margin-bottom: 0.5rem !important;
+    }
+    .my-sm-10 {
+        margin-top: 1rem !important;
+        margin-bottom: 1rem !important;
+    }
+    .my-sm-15 {
+        margin-top: 1.5rem !important;
+        margin-bottom: 1.5rem !important;
+    }
+    .my-sm-20 {
+        margin-top: 2rem !important;
+        margin-bottom: 2rem !important;
+    }
+    .my-sm-auto {
+        margin-top: auto !important;
+        margin-bottom: auto !important;
+    }
+    .mt-sm-0 {
+        margin-top: 0 !important;
+    }
+    .mt-sm-5 {
+        margin-top: 0.5rem !important;
+    }
+    .mt-sm-10 {
+        margin-top: 1rem !important;
+    }
+    .mt-sm-15 {
+        margin-top: 1.5rem !important;
+    }
+    .mt-sm-20 {
+        margin-top: 2rem !important;
+    }
+    .mt-sm-auto {
+        margin-top: auto !important;
+    }
+    .mb-sm-0 {
+        margin-bottom: 0 !important;
+    }
+    .mb-sm-5 {
+        margin-bottom: 0.5rem !important;
+    }
+    .mb-sm-10 {
+        margin-bottom: 1rem !important;
+    }
+    .mb-sm-15 {
+        margin-bottom: 1.5rem !important;
+    }
+    .mb-sm-20 {
+        margin-bottom: 2rem !important;
+    }
+    .mb-sm-auto {
+        margin-bottom: auto !important;
+    }
+    .ml-sm-0 {
+        margin-left: 0 !important;
+    }
+    .ml-sm-5 {
+        margin-left: 0.5rem !important;
+    }
+    .ml-sm-10 {
+        margin-left: 1rem !important;
+    }
+    .ml-sm-15 {
+        margin-left: 1.5rem !important;
+    }
+    .ml-sm-20 {
+        margin-left: 2rem !important;
+    }
+    .ml-sm-auto {
+        margin-left: auto !important;
+    }
+    .mr-sm-0 {
+        margin-right: 0 !important;
+    }
+    .mr-sm-5 {
+        margin-right: 0.5rem !important;
+    }
+    .mr-sm-10 {
+        margin-right: 1rem !important;
+    }
+    .mr-sm-15 {
+        margin-right: 1.5rem !important;
+    }
+    .mr-sm-20 {
+        margin-right: 2rem !important;
+    }
+    .mr-sm-auto {
+        margin-right: auto !important;
+    }
+}
+@media (min-width: 769px) {
+    /* Padding */
+
+    .p-md-0 {
+        padding: 0 !important;
+    }
+    .p-md-5 {
+        padding: 0.5rem !important;
+    }
+    .p-md-10 {
+        padding: 1rem !important;
+    }
+    .p-md-15 {
+        padding: 1.5rem !important;
+    }
+    .p-md-20 {
+        padding: 2rem !important;
+    }
+    .px-md-0 {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+    }
+    .px-md-5 {
+        padding-left: 0.5rem !important;
+        padding-right: 0.5rem !important;
+    }
+    .px-md-10 {
+        padding-left: 1rem !important;
+        padding-right: 1rem !important;
+    }
+    .px-md-15 {
+        padding-left: 1.5rem !important;
+        padding-right: 1.5rem !important;
+    }
+    .px-md-20 {
+        padding-left: 2rem !important;
+        padding-right: 2rem !important;
+    }
+    .py-md-0 {
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+    }
+    .py-md-5 {
+        padding-top: 0.5rem !important;
+        padding-bottom: 0.5rem !important;
+    }
+    .py-md-10 {
+        padding-top: 1rem !important;
+        padding-bottom: 1rem !important;
+    }
+    .py-md-15 {
+        padding-top: 1.5rem !important;
+        padding-bottom: 1.5rem !important;
+    }
+    .py-md-20 {
+        padding-top: 2rem !important;
+        padding-bottom: 2rem !important;
+    }
+    .pt-md-0 {
+        padding-top: 0 !important;
+    }
+    .pt-md-5 {
+        padding-top: 0.5rem !important;
+    }
+    .pt-md-10 {
+        padding-top: 1rem !important;
+    }
+    .pt-md-15 {
+        padding-top: 1.5rem !important;
+    }
+    .pt-md-20 {
+        padding-top: 2rem !important;
+    }
+    .pb-md-0 {
+        padding-bottom: 0 !important;
+    }
+    .pb-md-5 {
+        padding-bottom: 0.5rem !important;
+    }
+    .pb-md-10 {
+        padding-bottom: 1rem !important;
+    }
+    .pb-md-15 {
+        padding-bottom: 1.5rem !important;
+    }
+    .pb-md-20 {
+        padding-bottom: 2rem !important;
+    }
+    .pl-md-0 {
+        padding-left: 0 !important;
+    }
+    .pl-md-5 {
+        padding-left: 0.5rem !important;
+    }
+    .pl-md-10 {
+        padding-left: 1rem !important;
+    }
+    .pl-md-15 {
+        padding-left: 1.5rem !important;
+    }
+    .pl-md-20 {
+        padding-left: 2rem !important;
+    }
+    .pr-md-0 {
+        padding-right: 0 !important;
+    }
+    .pr-md-5 {
+        padding-right: 0.5rem !important;
+    }
+    .pr-md-10 {
+        padding-right: 1rem !important;
+    }
+    .pr-md-15 {
+        padding-right: 1.5rem !important;
+    }
+    .pr-md-20 {
+        padding-right: 2rem !important;
+    }
+
+    /* Margin */
+
+    .m-md-0 {
+        margin: 0 !important;
+    }
+    .m-md-5 {
+        margin: 0.5rem !important;
+    }
+    .m-md-10 {
+        margin: 1rem !important;
+    }
+    .m-md-15 {
+        margin: 1.5rem !important;
+    }
+    .m-md-20 {
+        margin: 2rem !important;
+    }
+    .m-md-auto {
+        margin: auto !important;
+    }
+    .mx-md-0 {
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+    }
+    .mx-md-5 {
+        margin-left: 0.5rem !important;
+        margin-right: 0.5rem !important;
+    }
+    .mx-md-10 {
+        margin-left: 1rem !important;
+        margin-right: 1rem !important;
+    }
+    .mx-md-15 {
+        margin-left: 1.5rem !important;
+        margin-right: 1.5rem !important;
+    }
+    .mx-md-20 {
+        margin-left: 2rem !important;
+        margin-right: 2rem !important;
+    }
+    .mx-md-auto {
+        margin-left: auto !important;
+        margin-right: auto !important;
+    }
+    .my-md-0 {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+    }
+    .my-md-5 {
+        margin-top: 0.5rem !important;
+        margin-bottom: 0.5rem !important;
+    }
+    .my-md-10 {
+        margin-top: 1rem !important;
+        margin-bottom: 1rem !important;
+    }
+    .my-md-15 {
+        margin-top: 1.5rem !important;
+        margin-bottom: 1.5rem !important;
+    }
+    .my-md-20 {
+        margin-top: 2rem !important;
+        margin-bottom: 2rem !important;
+    }
+    .my-md-auto {
+        margin-top: auto !important;
+        margin-bottom: auto !important;
+    }
+    .mt-md-0 {
+        margin-top: 0 !important;
+    }
+    .mt-md-5 {
+        margin-top: 0.5rem !important;
+    }
+    .mt-md-10 {
+        margin-top: 1rem !important;
+    }
+    .mt-md-15 {
+        margin-top: 1.5rem !important;
+    }
+    .mt-md-20 {
+        margin-top: 2rem !important;
+    }
+    .mt-md-auto {
+        margin-top: auto !important;
+    }
+    .mb-md-0 {
+        margin-bottom: 0 !important;
+    }
+    .mb-md-5 {
+        margin-bottom: 0.5rem !important;
+    }
+    .mb-md-10 {
+        margin-bottom: 1rem !important;
+    }
+    .mb-md-15 {
+        margin-bottom: 1.5rem !important;
+    }
+    .mb-md-20 {
+        margin-bottom: 2rem !important;
+    }
+    .mb-md-auto {
+        margin-bottom: auto !important;
+    }
+    .ml-md-0 {
+        margin-left: 0 !important;
+    }
+    .ml-md-5 {
+        margin-left: 0.5rem !important;
+    }
+    .ml-md-10 {
+        margin-left: 1rem !important;
+    }
+    .ml-md-15 {
+        margin-left: 1.5rem !important;
+    }
+    .ml-md-20 {
+        margin-left: 2rem !important;
+    }
+    .ml-md-auto {
+        margin-left: auto !important;
+    }
+    .mr-md-0 {
+        margin-right: 0 !important;
+    }
+    .mr-md-5 {
+        margin-right: 0.5rem !important;
+    }
+    .mr-md-10 {
+        margin-right: 1rem !important;
+    }
+    .mr-md-15 {
+        margin-right: 1.5rem !important;
+    }
+    .mr-md-20 {
+        margin-right: 2rem !important;
+    }
+    .mr-md-auto {
+        margin-right: auto !important;
+    }
+}
+@media (min-width: 993px) {
+    /* Padding */
+
+    .p-lg-0 {
+        padding: 0 !important;
+    }
+    .p-lg-5 {
+        padding: 0.5rem !important;
+    }
+    .p-lg-10 {
+        padding: 1rem !important;
+    }
+    .p-lg-15 {
+        padding: 1.5rem !important;
+    }
+    .p-lg-20 {
+        padding: 2rem !important;
+    }
+    .px-lg-0 {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+    }
+    .px-lg-5 {
+        padding-left: 0.5rem !important;
+        padding-right: 0.5rem !important;
+    }
+    .px-lg-10 {
+        padding-left: 1rem !important;
+        padding-right: 1rem !important;
+    }
+    .px-lg-15 {
+        padding-left: 1.5rem !important;
+        padding-right: 1.5rem !important;
+    }
+    .px-lg-20 {
+        padding-left: 2rem !important;
+        padding-right: 2rem !important;
+    }
+    .py-lg-0 {
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+    }
+    .py-lg-5 {
+        padding-top: 0.5rem !important;
+        padding-bottom: 0.5rem !important;
+    }
+    .py-lg-10 {
+        padding-top: 1rem !important;
+        padding-bottom: 1rem !important;
+    }
+    .py-lg-15 {
+        padding-top: 1.5rem !important;
+        padding-bottom: 1.5rem !important;
+    }
+    .py-lg-20 {
+        padding-top: 2rem !important;
+        padding-bottom: 2rem !important;
+    }
+    .pt-lg-0 {
+        padding-top: 0 !important;
+    }
+    .pt-lg-5 {
+        padding-top: 0.5rem !important;
+    }
+    .pt-lg-10 {
+        padding-top: 1rem !important;
+    }
+    .pt-lg-15 {
+        padding-top: 1.5rem !important;
+    }
+    .pt-lg-20 {
+        padding-top: 2rem !important;
+    }
+    .pb-lg-0 {
+        padding-bottom: 0 !important;
+    }
+    .pb-lg-5 {
+        padding-bottom: 0.5rem !important;
+    }
+    .pb-lg-10 {
+        padding-bottom: 1rem !important;
+    }
+    .pb-lg-15 {
+        padding-bottom: 1.5rem !important;
+    }
+    .pb-lg-20 {
+        padding-bottom: 2rem !important;
+    }
+    .pl-lg-0 {
+        padding-left: 0 !important;
+    }
+    .pl-lg-5 {
+        padding-left: 0.5rem !important;
+    }
+    .pl-lg-10 {
+        padding-left: 1rem !important;
+    }
+    .pl-lg-15 {
+        padding-left: 1.5rem !important;
+    }
+    .pl-lg-20 {
+        padding-left: 2rem !important;
+    }
+    .pr-lg-0 {
+        padding-right: 0 !important;
+    }
+    .pr-lg-5 {
+        padding-right: 0.5rem !important;
+    }
+    .pr-lg-10 {
+        padding-right: 1rem !important;
+    }
+    .pr-lg-15 {
+        padding-right: 1.5rem !important;
+    }
+    .pr-lg-20 {
+        padding-right: 2rem !important;
+    }
+
+    /* Margin */
+
+    .m-lg-0 {
+        margin: 0 !important;
+    }
+    .m-lg-5 {
+        margin: 0.5rem !important;
+    }
+    .m-lg-10 {
+        margin: 1rem !important;
+    }
+    .m-lg-15 {
+        margin: 1.5rem !important;
+    }
+    .m-lg-20 {
+        margin: 2rem !important;
+    }
+    .m-lg-auto {
+        margin: auto !important;
+    }
+    .mx-lg-0 {
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+    }
+    .mx-lg-5 {
+        margin-left: 0.5rem !important;
+        margin-right: 0.5rem !important;
+    }
+    .mx-lg-10 {
+        margin-left: 1rem !important;
+        margin-right: 1rem !important;
+    }
+    .mx-lg-15 {
+        margin-left: 1.5rem !important;
+        margin-right: 1.5rem !important;
+    }
+    .mx-lg-20 {
+        margin-left: 2rem !important;
+        margin-right: 2rem !important;
+    }
+    .mx-lg-auto {
+        margin-left: auto !important;
+        margin-right: auto !important;
+    }
+    .my-lg-0 {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+    }
+    .my-lg-5 {
+        margin-top: 0.5rem !important;
+        margin-bottom: 0.5rem !important;
+    }
+    .my-lg-10 {
+        margin-top: 1rem !important;
+        margin-bottom: 1rem !important;
+    }
+    .my-lg-15 {
+        margin-top: 1.5rem !important;
+        margin-bottom: 1.5rem !important;
+    }
+    .my-lg-20 {
+        margin-top: 2rem !important;
+        margin-bottom: 2rem !important;
+    }
+    .my-lg-auto {
+        margin-top: auto !important;
+        margin-bottom: auto !important;
+    }
+    .mt-lg-0 {
+        margin-top: 0 !important;
+    }
+    .mt-lg-5 {
+        margin-top: 0.5rem !important;
+    }
+    .mt-lg-10 {
+        margin-top: 1rem !important;
+    }
+    .mt-lg-15 {
+        margin-top: 1.5rem !important;
+    }
+    .mt-lg-20 {
+        margin-top: 2rem !important;
+    }
+    .mt-lg-auto {
+        margin-top: auto !important;
+    }
+    .mb-lg-0 {
+        margin-bottom: 0 !important;
+    }
+    .mb-lg-5 {
+        margin-bottom: 0.5rem !important;
+    }
+    .mb-lg-10 {
+        margin-bottom: 1rem !important;
+    }
+    .mb-lg-15 {
+        margin-bottom: 1.5rem !important;
+    }
+    .mb-lg-20 {
+        margin-bottom: 2rem !important;
+    }
+    .mb-lg-auto {
+        margin-bottom: auto !important;
+    }
+    .ml-lg-0 {
+        margin-left: 0 !important;
+    }
+    .ml-lg-5 {
+        margin-left: 0.5rem !important;
+    }
+    .ml-lg-10 {
+        margin-left: 1rem !important;
+    }
+    .ml-lg-15 {
+        margin-left: 1.5rem !important;
+    }
+    .ml-lg-20 {
+        margin-left: 2rem !important;
+    }
+    .ml-lg-auto {
+        margin-left: auto !important;
+    }
+    .mr-lg-0 {
+        margin-right: 0 !important;
+    }
+    .mr-lg-5 {
+        margin-right: 0.5rem !important;
+    }
+    .mr-lg-10 {
+        margin-right: 1rem !important;
+    }
+    .mr-lg-15 {
+        margin-right: 1.5rem !important;
+    }
+    .mr-lg-20 {
+        margin-right: 2rem !important;
+    }
+    .mr-lg-auto {
+        margin-right: auto !important;
+    }
+}
+@media (min-width: 1201px) {
+    /* Padding */
+
+    .p-xl-0 {
+        padding: 0 !important;
+    }
+    .p-xl-5 {
+        padding: 0.5rem !important;
+    }
+    .p-xl-10 {
+        padding: 1rem !important;
+    }
+    .p-xl-15 {
+        padding: 1.5rem !important;
+    }
+    .p-xl-20 {
+        padding: 2rem !important;
+    }
+    .px-xl-0 {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+    }
+    .px-xl-5 {
+        padding-left: 0.5rem !important;
+        padding-right: 0.5rem !important;
+    }
+    .px-xl-10 {
+        padding-left: 1rem !important;
+        padding-right: 1rem !important;
+    }
+    .px-xl-15 {
+        padding-left: 1.5rem !important;
+        padding-right: 1.5rem !important;
+    }
+    .px-xl-20 {
+        padding-left: 2rem !important;
+        padding-right: 2rem !important;
+    }
+    .py-xl-0 {
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+    }
+    .py-xl-5 {
+        padding-top: 0.5rem !important;
+        padding-bottom: 0.5rem !important;
+    }
+    .py-xl-10 {
+        padding-top: 1rem !important;
+        padding-bottom: 1rem !important;
+    }
+    .py-xl-15 {
+        padding-top: 1.5rem !important;
+        padding-bottom: 1.5rem !important;
+    }
+    .py-xl-20 {
+        padding-top: 2rem !important;
+        padding-bottom: 2rem !important;
+    }
+    .pt-xl-0 {
+        padding-top: 0 !important;
+    }
+    .pt-xl-5 {
+        padding-top: 0.5rem !important;
+    }
+    .pt-xl-10 {
+        padding-top: 1rem !important;
+    }
+    .pt-xl-15 {
+        padding-top: 1.5rem !important;
+    }
+    .pt-xl-20 {
+        padding-top: 2rem !important;
+    }
+    .pb-xl-0 {
+        padding-bottom: 0 !important;
+    }
+    .pb-xl-5 {
+        padding-bottom: 0.5rem !important;
+    }
+    .pb-xl-10 {
+        padding-bottom: 1rem !important;
+    }
+    .pb-xl-15 {
+        padding-bottom: 1.5rem !important;
+    }
+    .pb-xl-20 {
+        padding-bottom: 2rem !important;
+    }
+    .pl-xl-0 {
+        padding-left: 0 !important;
+    }
+    .pl-xl-5 {
+        padding-left: 0.5rem !important;
+    }
+    .pl-xl-10 {
+        padding-left: 1rem !important;
+    }
+    .pl-xl-15 {
+        padding-left: 1.5rem !important;
+    }
+    .pl-xl-20 {
+        padding-left: 2rem !important;
+    }
+    .pr-xl-0 {
+        padding-right: 0 !important;
+    }
+    .pr-xl-5 {
+        padding-right: 0.5rem !important;
+    }
+    .pr-xl-10 {
+        padding-right: 1rem !important;
+    }
+    .pr-xl-15 {
+        padding-right: 1.5rem !important;
+    }
+    .pr-xl-20 {
+        padding-right: 2rem !important;
+    }
+
+    /* Margin */
+
+    .m-xl-0 {
+        margin: 0 !important;
+    }
+    .m-xl-5 {
+        margin: 0.5rem !important;
+    }
+    .m-xl-10 {
+        margin: 1rem !important;
+    }
+    .m-xl-15 {
+        margin: 1.5rem !important;
+    }
+    .m-xl-20 {
+        margin: 2rem !important;
+    }
+    .m-xl-auto {
+        margin: auto !important;
+    }
+    .mx-xl-0 {
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+    }
+    .mx-xl-5 {
+        margin-left: 0.5rem !important;
+        margin-right: 0.5rem !important;
+    }
+    .mx-xl-10 {
+        margin-left: 1rem !important;
+        margin-right: 1rem !important;
+    }
+    .mx-xl-15 {
+        margin-left: 1.5rem !important;
+        margin-right: 1.5rem !important;
+    }
+    .mx-xl-20 {
+        margin-left: 2rem !important;
+        margin-right: 2rem !important;
+    }
+    .mx-xl-auto {
+        margin-left: auto !important;
+        margin-right: auto !important;
+    }
+    .my-xl-0 {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+    }
+    .my-xl-5 {
+        margin-top: 0.5rem !important;
+        margin-bottom: 0.5rem !important;
+    }
+    .my-xl-10 {
+        margin-top: 1rem !important;
+        margin-bottom: 1rem !important;
+    }
+    .my-xl-15 {
+        margin-top: 1.5rem !important;
+        margin-bottom: 1.5rem !important;
+    }
+    .my-xl-20 {
+        margin-top: 2rem !important;
+        margin-bottom: 2rem !important;
+    }
+    .my-xl-auto {
+        margin-top: auto !important;
+        margin-bottom: auto !important;
+    }
+    .mt-xl-0 {
+        margin-top: 0 !important;
+    }
+    .mt-xl-5 {
+        margin-top: 0.5rem !important;
+    }
+    .mt-xl-10 {
+        margin-top: 1rem !important;
+    }
+    .mt-xl-15 {
+        margin-top: 1.5rem !important;
+    }
+    .mt-xl-20 {
+        margin-top: 2rem !important;
+    }
+    .mt-xl-auto {
+        margin-top: auto !important;
+    }
+    .mb-xl-0 {
+        margin-bottom: 0 !important;
+    }
+    .mb-xl-5 {
+        margin-bottom: 0.5rem !important;
+    }
+    .mb-xl-10 {
+        margin-bottom: 1rem !important;
+    }
+    .mb-xl-15 {
+        margin-bottom: 1.5rem !important;
+    }
+    .mb-xl-20 {
+        margin-bottom: 2rem !important;
+    }
+    .mb-xl-auto {
+        margin-bottom: auto !important;
+    }
+    .ml-xl-0 {
+        margin-left: 0 !important;
+    }
+    .ml-xl-5 {
+        margin-left: 0.5rem !important;
+    }
+    .ml-xl-10 {
+        margin-left: 1rem !important;
+    }
+    .ml-xl-15 {
+        margin-left: 1.5rem !important;
+    }
+    .ml-xl-20 {
+        margin-left: 2rem !important;
+    }
+    .ml-xl-auto {
+        margin-left: auto !important;
+    }
+    .mr-xl-0 {
+        margin-right: 0 !important;
+    }
+    .mr-xl-5 {
+        margin-right: 0.5rem !important;
+    }
+    .mr-xl-10 {
+        margin-right: 1rem !important;
+    }
+    .mr-xl-15 {
+        margin-right: 1.5rem !important;
+    }
+    .mr-xl-20 {
+        margin-right: 2rem !important;
+    }
+    .mr-xl-auto {
+        margin-right: auto !important;
+    }
+}
+
+
+/*
+-------------------------------------------------------------------------------
+26. Display utilities [hm-26]
+-------------------------------------------------------------------------------
+*/
+
+.d-none {
+    display: none !important;
+}
+.d-inline {
+    display: inline !important;
+}
+.d-inline-block {
+    display: inline-block !important;
+}
+.d-block {
+    display: block !important;
+}
+.d-table {
+    display: table !important;
+}
+.d-table-row {
+    display: table-row !important;
+}
+.d-table-cell {
+    display: table-cell !important;
+}
+.d-flex {
+    display: -ms-flexbox !important;
+    display: flex !important;
+}
+.d-inline-flex {
+    display: -ms-inline-flexbox !important;
+    display: inline-flex !important;
+}
+@media (min-width: 577px) {
+    .d-sm-none {
+        display: none !important;
+    }
+    .d-sm-inline {
+        display: inline !important;
+    }
+    .d-sm-inline-block {
+        display: inline-block !important;
+    }
+    .d-sm-block {
+        display: block !important;
+    }
+    .d-sm-table {
+        display: table !important;
+    }
+    .d-sm-table-row {
+        display: table-row !important;
+    }
+    .d-sm-table-cell {
+        display: table-cell !important;
+    }
+    .d-sm-flex {
+        display: -ms-flexbox !important;
+        display: flex !important;
+    }
+    .d-sm-inline-flex {
+        display: -ms-inline-flexbox !important;
+        display: inline-flex !important;
+    }
+}
+@media (min-width: 769px) {
+    .d-md-none {
+        display: none !important;
+    }
+    .d-md-inline {
+        display: inline !important;
+    }
+    .d-md-inline-block {
+        display: inline-block !important;
+    }
+    .d-md-block {
+        display: block !important;
+    }
+    .d-md-table {
+        display: table !important;
+    }
+    .d-md-table-row {
+        display: table-row !important;
+    }
+    .d-md-table-cell {
+        display: table-cell !important;
+    }
+    .d-md-flex {
+        display: -ms-flexbox !important;
+        display: flex !important;
+    }
+    .d-md-inline-flex {
+        display: -ms-inline-flexbox !important;
+        display: inline-flex !important;
+    }
+}
+@media (min-width: 993px) {
+    .d-lg-none {
+        display: none !important;
+    }
+    .d-lg-inline {
+        display: inline !important;
+    }
+    .d-lg-inline-block {
+        display: inline-block !important;
+    }
+    .d-lg-block {
+        display: block !important;
+    }
+    .d-lg-table {
+        display: table !important;
+    }
+    .d-lg-table-row {
+        display: table-row !important;
+    }
+    .d-lg-table-cell {
+        display: table-cell !important;
+    }
+    .d-lg-flex {
+        display: -ms-flexbox !important;
+        display: flex !important;
+    }
+    .d-lg-inline-flex {
+        display: -ms-inline-flexbox !important;
+        display: inline-flex !important;
+    }
+}
+@media (min-width: 1201px) {
+    .d-xl-none {
+        display: none !important;
+    }
+    .d-xl-inline {
+        display: inline !important;
+    }
+    .d-xl-inline-block {
+        display: inline-block !important;
+    }
+    .d-xl-block {
+        display: block !important;
+    }
+    .d-xl-table {
+        display: table !important;
+    }
+    .d-xl-table-row {
+        display: table-row !important;
+    }
+    .d-xl-table-cell {
+        display: table-cell !important;
+    }
+    .d-xl-flex {
+        display: -ms-flexbox !important;
+        display: flex !important;
+    }
+    .d-xl-inline-flex {
+        display: -ms-inline-flexbox !important;
+        display: inline-flex !important;
+    }
+}
+@media (max-width: 576px) {
+    .d-xs-only-none {
+        display: none !important;
+    }
+}
+@media (min-width: 577px) and (max-width: 768px) {
+    .d-sm-only-none {
+        display: none !important;
+    }
+}
+@media (min-width: 769px) and (max-width: 992px) {
+    .d-md-only-none {
+        display: none !important;
+    }
+}
+@media (min-width: 993px) and (max-width: 1200px) {
+    .d-lg-only-none {
+        display: none !important;
+    }
+}
+@media (min-width: 1201px) {
+    .d-xl-only-none {
+        display: none !important;
+    }
+}
+
+/* Hidden {breakpoint}-and-up and {breakpoint}-and-down */
+
+.hidden-xs-and-up {
+    display: none !important;
+}
+@media (max-width: 576px) {
+    .hidden-xs-and-down {
+        display: none !important;
+    }
+}
+@media (min-width: 577px) {
+    .hidden-sm-and-up {
+        display: none !important;
+    }
+}
+@media (max-width: 768px) {
+    .hidden-sm-and-down {
+        display: none !important;
+    }
+}
+@media (min-width: 769px) {
+    .hidden-md-and-up {
+        display: none !important;
+    }
+}
+@media (max-width: 992px) {
+    .hidden-md-and-down {
+        display: none !important;
+    }
+}
+@media (min-width: 993px) {
+    .hidden-lg-and-up {
+        display: none !important;
+    }
+}
+@media (max-width: 1200px) {
+    .hidden-lg-and-down {
+        display: none !important;
+    }
+}
+@media (min-width: 1201px) {
+    .hidden-xl-and-up {
+        display: none !important;
+    }
+}
+.hidden-xl-and-down {
+    display: none !important;
+}
+
+/* Hidden in light and dark mode */
+
+body:not(.dark-mode) .hidden-lm {
+    display: none !important;
+}
+.dark-mode .hidden-dm {
+    display: none !important;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+27. Sizing utilities [hm-27]
+-------------------------------------------------------------------------------
+*/
+
+/* Width */
+
+.w-25 {
+    width: 2.5rem !important;
+}
+.w-50 {
+    width: 5rem !important;
+}
+.w-100 {
+    width: 10rem !important;
+}
+.w-150 {
+    width: 15rem !important;
+}
+.w-200 {
+    width: 20rem !important;
+}
+.w-250 {
+    width: 25rem !important;
+}
+.w-300 {
+    width: 30rem !important;
+}
+.w-350 {
+    width: 35rem !important;
+}
+.w-400 {
+    width: 40rem !important;
+}
+.w-450 {
+    width: 45rem !important;
+}
+.w-500 {
+    width: 50rem !important;
+}
+.w-550 {
+    width: 55rem !important;
+}
+.w-600 {
+    width: 60rem !important;
+}
+.w-auto {
+    width: auto !important;
+}
+.w-quarter {
+    width: 25% !important;
+}
+.w-half {
+    width: 50% !important;
+}
+.w-three-quarter {
+    width: 75% !important;
+}
+.w-full {
+    width: 100% !important;
+}
+.mw-full {
+    max-width: 100% !important;
+}
+@media (min-width: 577px) {
+    .w-sm-25 {
+        width: 2.5rem !important;
+    }
+    .w-sm-50 {
+        width: 5rem !important;
+    }
+    .w-sm-100 {
+        width: 10rem !important;
+    }
+    .w-sm-150 {
+        width: 15rem !important;
+    }
+    .w-sm-200 {
+        width: 20rem !important;
+    }
+    .w-sm-250 {
+        width: 25rem !important;
+    }
+    .w-sm-300 {
+        width: 30rem !important;
+    }
+    .w-sm-350 {
+        width: 35rem !important;
+    }
+    .w-sm-400 {
+        width: 40rem !important;
+    }
+    .w-sm-450 {
+        width: 45rem !important;
+    }
+    .w-sm-500 {
+        width: 50rem !important;
+    }
+    .w-sm-550 {
+        width: 55rem !important;
+    }
+    .w-sm-600 {
+        width: 60rem !important;
+    }
+    .w-sm-auto {
+        width: auto !important;
+    }
+    .w-sm-quarter {
+        width: 25% !important;
+    }
+    .w-sm-half {
+        width: 50% !important;
+    }
+    .w-sm-three-quarter {
+        width: 75% !important;
+    }
+    .w-sm-full {
+        width: 100% !important;
+    }
+    .mw-sm-full {
+        max-width: 100% !important;
+    }
+}
+@media (min-width: 769px) {
+    .w-md-25 {
+        width: 2.5rem !important;
+    }
+    .w-md-50 {
+        width: 5rem !important;
+    }
+    .w-md-100 {
+        width: 10rem !important;
+    }
+    .w-md-150 {
+        width: 15rem !important;
+    }
+    .w-md-200 {
+        width: 20rem !important;
+    }
+    .w-md-250 {
+        width: 25rem !important;
+    }
+    .w-md-300 {
+        width: 30rem !important;
+    }
+    .w-md-350 {
+        width: 35rem !important;
+    }
+    .w-md-400 {
+        width: 40rem !important;
+    }
+    .w-md-450 {
+        width: 45rem !important;
+    }
+    .w-md-500 {
+        width: 50rem !important;
+    }
+    .w-md-550 {
+        width: 55rem !important;
+    }
+    .w-md-600 {
+        width: 60rem !important;
+    }
+    .w-md-auto {
+        width: auto !important;
+    }
+    .w-md-quarter {
+        width: 25% !important;
+    }
+    .w-md-half {
+        width: 50% !important;
+    }
+    .w-md-three-quarter {
+        width: 75% !important;
+    }
+    .w-md-full {
+        width: 100% !important;
+    }
+    .mw-md-full {
+        max-width: 100% !important;
+    }
+}
+@media (min-width: 993px) {
+    .w-lg-25 {
+        width: 2.5rem !important;
+    }
+    .w-lg-50 {
+        width: 5rem !important;
+    }
+    .w-lg-100 {
+        width: 10rem !important;
+    }
+    .w-lg-150 {
+        width: 15rem !important;
+    }
+    .w-lg-200 {
+        width: 20rem !important;
+    }
+    .w-lg-250 {
+        width: 25rem !important;
+    }
+    .w-lg-300 {
+        width: 30rem !important;
+    }
+    .w-lg-350 {
+        width: 35rem !important;
+    }
+    .w-lg-400 {
+        width: 40rem !important;
+    }
+    .w-lg-450 {
+        width: 45rem !important;
+    }
+    .w-lg-500 {
+        width: 50rem !important;
+    }
+    .w-lg-550 {
+        width: 55rem !important;
+    }
+    .w-lg-600 {
+        width: 60rem !important;
+    }
+    .w-lg-auto {
+        width: auto !important;
+    }
+    .w-lg-quarter {
+        width: 25% !important;
+    }
+    .w-lg-half {
+        width: 50% !important;
+    }
+    .w-lg-three-quarter {
+        width: 75% !important;
+    }
+    .w-lg-full {
+        width: 100% !important;
+    }
+    .mw-lg-full {
+        max-width: 100% !important;
+    }
+}
+@media (min-width: 1201px) {
+    .w-xl-25 {
+        width: 2.5rem !important;
+    }
+    .w-xl-50 {
+        width: 5rem !important;
+    }
+    .w-xl-100 {
+        width: 10rem !important;
+    }
+    .w-xl-150 {
+        width: 15rem !important;
+    }
+    .w-xl-200 {
+        width: 20rem !important;
+    }
+    .w-xl-250 {
+        width: 25rem !important;
+    }
+    .w-xl-300 {
+        width: 30rem !important;
+    }
+    .w-xl-350 {
+        width: 35rem !important;
+    }
+    .w-xl-400 {
+        width: 40rem !important;
+    }
+    .w-xl-450 {
+        width: 45rem !important;
+    }
+    .w-xl-500 {
+        width: 50rem !important;
+    }
+    .w-xl-550 {
+        width: 55rem !important;
+    }
+    .w-xl-600 {
+        width: 60rem !important;
+    }
+    .w-xl-auto {
+        width: auto !important;
+    }
+    .w-xl-quarter {
+        width: 25% !important;
+    }
+    .w-xl-half {
+        width: 50% !important;
+    }
+    .w-xl-three-quarter {
+        width: 75% !important;
+    }
+    .w-xl-full {
+        width: 100% !important;
+    }
+    .mw-xl-full {
+        max-width: 100% !important;
+    }
+}
+
+/* Height */
+
+.h-25 {
+    height: 2.5rem !important;
+}
+.h-50 {
+    height: 5rem !important;
+}
+.h-100 {
+    height: 10rem !important;
+}
+.h-150 {
+    height: 15rem !important;
+}
+.h-200 {
+    height: 20rem !important;
+}
+.h-250 {
+    height: 25rem !important;
+}
+.h-300 {
+    height: 30rem !important;
+}
+.h-350 {
+    height: 35rem !important;
+}
+.h-400 {
+    height: 40rem !important;
+}
+.h-450 {
+    height: 45rem !important;
+}
+.h-500 {
+    height: 50rem !important;
+}
+.h-550 {
+    height: 55rem !important;
+}
+.h-600 {
+    height: 60rem !important;
+}
+.h-auto {
+    height: auto !important;
+}
+.h-quarter {
+    height: 25% !important;
+}
+.h-half {
+    height: 50% !important;
+}
+.h-three-quarter {
+    height: 75% !important;
+}
+.h-full {
+    height: 100% !important;
+}
+.mh-full {
+    max-height: 100% !important;
+}
+@media (min-width: 577px) {
+    .h-sm-25 {
+        height: 2.5rem !important;
+    }
+    .h-sm-50 {
+        height: 5rem !important;
+    }
+    .h-sm-100 {
+        height: 10rem !important;
+    }
+    .h-sm-150 {
+        height: 15rem !important;
+    }
+    .h-sm-200 {
+        height: 20rem !important;
+    }
+    .h-sm-250 {
+        height: 25rem !important;
+    }
+    .h-sm-300 {
+        height: 30rem !important;
+    }
+    .h-sm-350 {
+        height: 35rem !important;
+    }
+    .h-sm-400 {
+        height: 40rem !important;
+    }
+    .h-sm-450 {
+        height: 45rem !important;
+    }
+    .h-sm-500 {
+        height: 50rem !important;
+    }
+    .h-sm-550 {
+        height: 55rem !important;
+    }
+    .h-sm-600 {
+        height: 60rem !important;
+    }
+    .h-sm-auto {
+        height: auto !important;
+    }
+    .h-sm-quarter {
+        height: 25% !important;
+    }
+    .h-sm-half {
+        height: 50% !important;
+    }
+    .h-sm-three-quarter {
+        height: 75% !important;
+    }
+    .h-sm-full {
+        height: 100% !important;
+    }
+    .mh-sm-full {
+        max-height: 100% !important;
+    }
+}
+@media (min-width: 769px) {
+    .h-md-25 {
+        height: 2.5rem !important;
+    }
+    .h-md-50 {
+        height: 5rem !important;
+    }
+    .h-md-100 {
+        height: 10rem !important;
+    }
+    .h-md-150 {
+        height: 15rem !important;
+    }
+    .h-md-200 {
+        height: 20rem !important;
+    }
+    .h-md-250 {
+        height: 25rem !important;
+    }
+    .h-md-300 {
+        height: 30rem !important;
+    }
+    .h-md-350 {
+        height: 35rem !important;
+    }
+    .h-md-400 {
+        height: 40rem !important;
+    }
+    .h-md-450 {
+        height: 45rem !important;
+    }
+    .h-md-500 {
+        height: 50rem !important;
+    }
+    .h-md-550 {
+        height: 55rem !important;
+    }
+    .h-md-600 {
+        height: 60rem !important;
+    }
+    .h-md-auto {
+        height: auto !important;
+    }
+    .h-md-quarter {
+        height: 25% !important;
+    }
+    .h-md-half {
+        height: 50% !important;
+    }
+    .h-md-three-quarter {
+        height: 75% !important;
+    }
+    .h-md-full {
+        height: 100% !important;
+    }
+    .mh-md-full {
+        max-height: 100% !important;
+    }
+}
+@media (min-width: 993px) {
+    .h-lg-25 {
+        height: 2.5rem !important;
+    }
+    .h-lg-50 {
+        height: 5rem !important;
+    }
+    .h-lg-100 {
+        height: 10rem !important;
+    }
+    .h-lg-150 {
+        height: 15rem !important;
+    }
+    .h-lg-200 {
+        height: 20rem !important;
+    }
+    .h-lg-250 {
+        height: 25rem !important;
+    }
+    .h-lg-300 {
+        height: 30rem !important;
+    }
+    .h-lg-350 {
+        height: 35rem !important;
+    }
+    .h-lg-400 {
+        height: 40rem !important;
+    }
+    .h-lg-450 {
+        height: 45rem !important;
+    }
+    .h-lg-500 {
+        height: 50rem !important;
+    }
+    .h-lg-550 {
+        height: 55rem !important;
+    }
+    .h-lg-600 {
+        height: 60rem !important;
+    }
+    .h-lg-auto {
+        height: auto !important;
+    }
+    .h-lg-quarter {
+        height: 25% !important;
+    }
+    .h-lg-half {
+        height: 50% !important;
+    }
+    .h-lg-three-quarter {
+        height: 75% !important;
+    }
+    .h-lg-full {
+        height: 100% !important;
+    }
+    .mh-lg-full {
+        max-height: 100% !important;
+    }
+}
+@media (min-width: 1201px) {
+    .h-xl-25 {
+        height: 2.5rem !important;
+    }
+    .h-xl-50 {
+        height: 5rem !important;
+    }
+    .h-xl-100 {
+        height: 10rem !important;
+    }
+    .h-xl-150 {
+        height: 15rem !important;
+    }
+    .h-xl-200 {
+        height: 20rem !important;
+    }
+    .h-xl-250 {
+        height: 25rem !important;
+    }
+    .h-xl-300 {
+        height: 30rem !important;
+    }
+    .h-xl-350 {
+        height: 35rem !important;
+    }
+    .h-xl-400 {
+        height: 40rem !important;
+    }
+    .h-xl-450 {
+        height: 45rem !important;
+    }
+    .h-xl-500 {
+        height: 50rem !important;
+    }
+    .h-xl-550 {
+        height: 55rem !important;
+    }
+    .h-xl-600 {
+        height: 60rem !important;
+    }
+    .h-xl-auto {
+        height: auto !important;
+    }
+    .h-xl-quarter {
+        height: 25% !important;
+    }
+    .h-xl-half {
+        height: 50% !important;
+    }
+    .h-xl-three-quarter {
+        height: 75% !important;
+    }
+    .h-xl-full {
+        height: 100% !important;
+    }
+    .mh-xl-full {
+        max-height: 100% !important;
+    }
+}
+
+/*
+-------------------------------------------------------------------------------
+28. Flex utilities [hm-28]
+-------------------------------------------------------------------------------
+*/
+
+.flex-row {
+    -ms-flex-direction: row !important;
+    flex-direction: row !important;
+}
+.flex-column {
+    -ms-flex-direction: column !important;
+    flex-direction: column !important;
+}
+.flex-row-reverse {
+    -ms-flex-direction: row-reverse !important;
+    flex-direction: row-reverse !important;
+}
+.flex-column-reverse {
+    -ms-flex-direction: column-reverse !important;
+    flex-direction: column-reverse !important;
+}
+.flex-wrap {
+    -ms-flex-wrap: wrap !important;
+    flex-wrap: wrap !important;
+}
+.flex-nowrap {
+    -ms-flex-wrap: nowrap !important;
+    flex-wrap: nowrap !important;
+}
+.flex-wrap-reverse {
+    -ms-flex-wrap: wrap-reverse !important;
+    flex-wrap: wrap-reverse !important;
+}
+.flex-fill {
+    -ms-flex: 1 1 auto !important;
+    flex: 1 1 auto !important;
+}
+.flex-grow-0 {
+    -ms-flex-positive: 0 !important;
+    flex-grow: 0 !important;
+}
+.flex-grow-1 {
+    -ms-flex-positive: 1 !important;
+    flex-grow: 1 !important;
+}
+.flex-shrink-0 {
+    -ms-flex-negative: 0 !important;
+    flex-shrink: 0 !important;
+}
+.flex-shrink-1 {
+    -ms-flex-negative: 1 !important;
+    flex-shrink: 1 !important;
+}
+.justify-content-start {
+    -ms-flex-pack: start !important;
+    justify-content: flex-start !important;
+}
+.justify-content-end {
+    -ms-flex-pack: end !important;
+    justify-content: flex-end !important;
+}
+.justify-content-center {
+    -ms-flex-pack: center !important;
+    justify-content: center !important;
+}
+.justify-content-between {
+    -ms-flex-pack: justify !important;
+    justify-content: space-between !important;
+}
+.justify-content-around {
+    -ms-flex-pack: distribute !important;
+    justify-content: space-around !important;
+}
+.align-items-start {
+    -ms-flex-align: start !important;
+    align-items: flex-start !important;
+}
+.align-items-end {
+    -ms-flex-align: end !important;
+    align-items: flex-end !important;
+}
+.align-items-center {
+    -ms-flex-align: center !important;
+    align-items: center !important;
+}
+.align-items-baseline {
+    -ms-flex-align: baseline !important;
+    align-items: baseline !important;
+}
+.align-items-stretch {
+    -ms-flex-align: stretch !important;
+    align-items: stretch !important;
+}
+.align-content-start {
+    -ms-flex-line-pack: start !important;
+    align-content: flex-start !important;
+}
+.align-content-end {
+    -ms-flex-line-pack: end !important;
+    align-content: flex-end !important;
+}
+.align-content-center {
+    -ms-flex-line-pack: center !important;
+    align-content: center !important;
+}
+.align-content-between {
+    -ms-flex-line-pack: justify !important;
+    align-content: space-between !important;
+}
+.align-content-around {
+    -ms-flex-line-pack: distribute !important;
+    align-content: space-around !important;
+}
+.align-content-stretch {
+    -ms-flex-line-pack: stretch !important;
+    align-content: stretch !important;
+}
+.align-self-auto {
+    -ms-flex-item-align: auto !important;
+    align-self: auto !important;
+}
+.align-self-start {
+    -ms-flex-item-align: start !important;
+    align-self: flex-start !important;
+}
+.align-self-end {
+    -ms-flex-item-align: end !important;
+    align-self: flex-end !important;
+}
+.align-self-center {
+    -ms-flex-item-align: center !important;
+    align-self: center !important;
+}
+.align-self-baseline {
+    -ms-flex-item-align: baseline !important;
+    align-self: baseline !important;
+}
+.align-self-stretch {
+    -ms-flex-item-align: stretch !important;
+    align-self: stretch !important;
+}
+@media (min-width: 577px) {
+    .flex-sm-row {
+        -ms-flex-direction: row !important;
+        flex-direction: row !important;
+    }
+    .flex-sm-column {
+        -ms-flex-direction: column !important;
+        flex-direction: column !important;
+    }
+    .flex-sm-row-reverse {
+        -ms-flex-direction: row-reverse !important;
+        flex-direction: row-reverse !important;
+    }
+    .flex-sm-column-reverse {
+        -ms-flex-direction: column-reverse !important;
+        flex-direction: column-reverse !important;
+    }
+    .flex-sm-wrap {
+        -ms-flex-wrap: wrap !important;
+        flex-wrap: wrap !important;
+    }
+    .flex-sm-nowrap {
+        -ms-flex-wrap: nowrap !important;
+        flex-wrap: nowrap !important;
+    }
+    .flex-sm-wrap-reverse {
+        -ms-flex-wrap: wrap-reverse !important;
+        flex-wrap: wrap-reverse !important;
+    }
+    .flex-sm-fill {
+        -ms-flex: 1 1 auto !important;
+        flex: 1 1 auto !important;
+    }
+    .flex-sm-grow-0 {
+        -ms-flex-positive: 0 !important;
+        flex-grow: 0 !important;
+    }
+    .flex-sm-grow-1 {
+        -ms-flex-positive: 1 !important;
+        flex-grow: 1 !important;
+    }
+    .flex-sm-shrink-0 {
+        -ms-flex-negative: 0 !important;
+        flex-shrink: 0 !important;
+    }
+    .flex-sm-shrink-1 {
+        -ms-flex-negative: 1 !important;
+        flex-shrink: 1 !important;
+    }
+    .justify-content-sm-start {
+        -ms-flex-pack: start !important;
+        justify-content: flex-start !important;
+    }
+    .justify-content-sm-end {
+        -ms-flex-pack: end !important;
+        justify-content: flex-end !important;
+    }
+    .justify-content-sm-center {
+        -ms-flex-pack: center !important;
+        justify-content: center !important;
+    }
+    .justify-content-sm-between {
+        -ms-flex-pack: justify !important;
+        justify-content: space-between !important;
+    }
+    .justify-content-sm-around {
+        -ms-flex-pack: distribute !important;
+        justify-content: space-around !important;
+    }
+    .align-items-sm-start {
+        -ms-flex-align: start !important;
+        align-items: flex-start !important;
+    }
+    .align-items-sm-end {
+        -ms-flex-align: end !important;
+        align-items: flex-end !important;
+    }
+    .align-items-sm-center {
+        -ms-flex-align: center !important;
+        align-items: center !important;
+    }
+    .align-items-sm-baseline {
+        -ms-flex-align: baseline !important;
+        align-items: baseline !important;
+    }
+    .align-items-sm-stretch {
+        -ms-flex-align: stretch !important;
+        align-items: stretch !important;
+    }
+    .align-content-sm-start {
+        -ms-flex-line-pack: start !important;
+        align-content: flex-start !important;
+    }
+    .align-content-sm-end {
+        -ms-flex-line-pack: end !important;
+        align-content: flex-end !important;
+    }
+    .align-content-sm-center {
+        -ms-flex-line-pack: center !important;
+        align-content: center !important;
+    }
+    .align-content-sm-between {
+        -ms-flex-line-pack: justify !important;
+        align-content: space-between !important;
+    }
+    .align-content-sm-around {
+        -ms-flex-line-pack: distribute !important;
+        align-content: space-around !important;
+    }
+    .align-content-sm-stretch {
+        -ms-flex-line-pack: stretch !important;
+        align-content: stretch !important;
+    }
+    .align-self-sm-auto {
+        -ms-flex-item-align: auto !important;
+        align-self: auto !important;
+    }
+    .align-self-sm-start {
+        -ms-flex-item-align: start !important;
+        align-self: flex-start !important;
+    }
+    .align-self-sm-end {
+        -ms-flex-item-align: end !important;
+        align-self: flex-end !important;
+    }
+    .align-self-sm-center {
+        -ms-flex-item-align: center !important;
+        align-self: center !important;
+    }
+    .align-self-sm-baseline {
+        -ms-flex-item-align: baseline !important;
+        align-self: baseline !important;
+    }
+    .align-self-sm-stretch {
+        -ms-flex-item-align: stretch !important;
+        align-self: stretch !important;
+    }
+}
+@media (min-width: 769px) {
+    .flex-md-row {
+        -ms-flex-direction: row !important;
+        flex-direction: row !important;
+    }
+    .flex-md-column {
+        -ms-flex-direction: column !important;
+        flex-direction: column !important;
+    }
+    .flex-md-row-reverse {
+        -ms-flex-direction: row-reverse !important;
+        flex-direction: row-reverse !important;
+    }
+    .flex-md-column-reverse {
+        -ms-flex-direction: column-reverse !important;
+        flex-direction: column-reverse !important;
+    }
+    .flex-md-wrap {
+        -ms-flex-wrap: wrap !important;
+        flex-wrap: wrap !important;
+    }
+    .flex-md-nowrap {
+        -ms-flex-wrap: nowrap !important;
+        flex-wrap: nowrap !important;
+    }
+    .flex-md-wrap-reverse {
+        -ms-flex-wrap: wrap-reverse !important;
+        flex-wrap: wrap-reverse !important;
+    }
+    .flex-md-fill {
+        -ms-flex: 1 1 auto !important;
+        flex: 1 1 auto !important;
+    }
+    .flex-md-grow-0 {
+        -ms-flex-positive: 0 !important;
+        flex-grow: 0 !important;
+    }
+    .flex-md-grow-1 {
+        -ms-flex-positive: 1 !important;
+        flex-grow: 1 !important;
+    }
+    .flex-md-shrink-0 {
+        -ms-flex-negative: 0 !important;
+        flex-shrink: 0 !important;
+    }
+    .flex-md-shrink-1 {
+        -ms-flex-negative: 1 !important;
+        flex-shrink: 1 !important;
+    }
+    .justify-content-md-start {
+        -ms-flex-pack: start !important;
+        justify-content: flex-start !important;
+    }
+    .justify-content-md-end {
+        -ms-flex-pack: end !important;
+        justify-content: flex-end !important;
+    }
+    .justify-content-md-center {
+        -ms-flex-pack: center !important;
+        justify-content: center !important;
+    }
+    .justify-content-md-between {
+        -ms-flex-pack: justify !important;
+        justify-content: space-between !important;
+    }
+    .justify-content-md-around {
+        -ms-flex-pack: distribute !important;
+        justify-content: space-around !important;
+    }
+    .align-items-md-start {
+        -ms-flex-align: start !important;
+        align-items: flex-start !important;
+    }
+    .align-items-md-end {
+        -ms-flex-align: end !important;
+        align-items: flex-end !important;
+    }
+    .align-items-md-center {
+        -ms-flex-align: center !important;
+        align-items: center !important;
+    }
+    .align-items-md-baseline {
+        -ms-flex-align: baseline !important;
+        align-items: baseline !important;
+    }
+    .align-items-md-stretch {
+        -ms-flex-align: stretch !important;
+        align-items: stretch !important;
+    }
+    .align-content-md-start {
+        -ms-flex-line-pack: start !important;
+        align-content: flex-start !important;
+    }
+    .align-content-md-end {
+        -ms-flex-line-pack: end !important;
+        align-content: flex-end !important;
+    }
+    .align-content-md-center {
+        -ms-flex-line-pack: center !important;
+        align-content: center !important;
+    }
+    .align-content-md-between {
+        -ms-flex-line-pack: justify !important;
+        align-content: space-between !important;
+    }
+    .align-content-md-around {
+        -ms-flex-line-pack: distribute !important;
+        align-content: space-around !important;
+    }
+    .align-content-md-stretch {
+        -ms-flex-line-pack: stretch !important;
+        align-content: stretch !important;
+    }
+    .align-self-md-auto {
+        -ms-flex-item-align: auto !important;
+        align-self: auto !important;
+    }
+    .align-self-md-start {
+        -ms-flex-item-align: start !important;
+        align-self: flex-start !important;
+    }
+    .align-self-md-end {
+        -ms-flex-item-align: end !important;
+        align-self: flex-end !important;
+    }
+    .align-self-md-center {
+        -ms-flex-item-align: center !important;
+        align-self: center !important;
+    }
+    .align-self-md-baseline {
+        -ms-flex-item-align: baseline !important;
+        align-self: baseline !important;
+    }
+    .align-self-md-stretch {
+        -ms-flex-item-align: stretch !important;
+        align-self: stretch !important;
+    }
+}
+@media (min-width: 993px) {
+    .flex-lg-row {
+        -ms-flex-direction: row !important;
+        flex-direction: row !important;
+    }
+    .flex-lg-column {
+        -ms-flex-direction: column !important;
+        flex-direction: column !important;
+    }
+    .flex-lg-row-reverse {
+        -ms-flex-direction: row-reverse !important;
+        flex-direction: row-reverse !important;
+    }
+    .flex-lg-column-reverse {
+        -ms-flex-direction: column-reverse !important;
+        flex-direction: column-reverse !important;
+    }
+    .flex-lg-wrap {
+        -ms-flex-wrap: wrap !important;
+        flex-wrap: wrap !important;
+    }
+    .flex-lg-nowrap {
+        -ms-flex-wrap: nowrap !important;
+        flex-wrap: nowrap !important;
+    }
+    .flex-lg-wrap-reverse {
+        -ms-flex-wrap: wrap-reverse !important;
+        flex-wrap: wrap-reverse !important;
+    }
+    .flex-lg-fill {
+        -ms-flex: 1 1 auto !important;
+        flex: 1 1 auto !important;
+    }
+    .flex-lg-grow-0 {
+        -ms-flex-positive: 0 !important;
+        flex-grow: 0 !important;
+    }
+    .flex-lg-grow-1 {
+        -ms-flex-positive: 1 !important;
+        flex-grow: 1 !important;
+    }
+    .flex-lg-shrink-0 {
+        -ms-flex-negative: 0 !important;
+        flex-shrink: 0 !important;
+    }
+    .flex-lg-shrink-1 {
+        -ms-flex-negative: 1 !important;
+        flex-shrink: 1 !important;
+    }
+    .justify-content-lg-start {
+        -ms-flex-pack: start !important;
+        justify-content: flex-start !important;
+    }
+    .justify-content-lg-end {
+        -ms-flex-pack: end !important;
+        justify-content: flex-end !important;
+    }
+    .justify-content-lg-center {
+        -ms-flex-pack: center !important;
+        justify-content: center !important;
+    }
+    .justify-content-lg-between {
+        -ms-flex-pack: justify !important;
+        justify-content: space-between !important;
+    }
+    .justify-content-lg-around {
+        -ms-flex-pack: distribute !important;
+        justify-content: space-around !important;
+    }
+    .align-items-lg-start {
+        -ms-flex-align: start !important;
+        align-items: flex-start !important;
+    }
+    .align-items-lg-end {
+        -ms-flex-align: end !important;
+        align-items: flex-end !important;
+    }
+    .align-items-lg-center {
+        -ms-flex-align: center !important;
+        align-items: center !important;
+    }
+    .align-items-lg-baseline {
+        -ms-flex-align: baseline !important;
+        align-items: baseline !important;
+    }
+    .align-items-lg-stretch {
+        -ms-flex-align: stretch !important;
+        align-items: stretch !important;
+    }
+    .align-content-lg-start {
+        -ms-flex-line-pack: start !important;
+        align-content: flex-start !important;
+    }
+    .align-content-lg-end {
+        -ms-flex-line-pack: end !important;
+        align-content: flex-end !important;
+    }
+    .align-content-lg-center {
+        -ms-flex-line-pack: center !important;
+        align-content: center !important;
+    }
+    .align-content-lg-between {
+        -ms-flex-line-pack: justify !important;
+        align-content: space-between !important;
+    }
+    .align-content-lg-around {
+        -ms-flex-line-pack: distribute !important;
+        align-content: space-around !important;
+    }
+    .align-content-lg-stretch {
+        -ms-flex-line-pack: stretch !important;
+        align-content: stretch !important;
+    }
+    .align-self-lg-auto {
+        -ms-flex-item-align: auto !important;
+        align-self: auto !important;
+    }
+    .align-self-lg-start {
+        -ms-flex-item-align: start !important;
+        align-self: flex-start !important;
+    }
+    .align-self-lg-end {
+        -ms-flex-item-align: end !important;
+        align-self: flex-end !important;
+    }
+    .align-self-lg-center {
+        -ms-flex-item-align: center !important;
+        align-self: center !important;
+    }
+    .align-self-lg-baseline {
+        -ms-flex-item-align: baseline !important;
+        align-self: baseline !important;
+    }
+    .align-self-lg-stretch {
+        -ms-flex-item-align: stretch !important;
+        align-self: stretch !important;
+    }
+}
+@media (min-width: 1201px) {
+    .flex-xl-row {
+        -ms-flex-direction: row !important;
+        flex-direction: row !important;
+    }
+    .flex-xl-column {
+        -ms-flex-direction: column !important;
+        flex-direction: column !important;
+    }
+    .flex-xl-row-reverse {
+        -ms-flex-direction: row-reverse !important;
+        flex-direction: row-reverse !important;
+    }
+    .flex-xl-column-reverse {
+        -ms-flex-direction: column-reverse !important;
+        flex-direction: column-reverse !important;
+    }
+    .flex-xl-wrap {
+        -ms-flex-wrap: wrap !important;
+        flex-wrap: wrap !important;
+    }
+    .flex-xl-nowrap {
+        -ms-flex-wrap: nowrap !important;
+        flex-wrap: nowrap !important;
+    }
+    .flex-xl-wrap-reverse {
+        -ms-flex-wrap: wrap-reverse !important;
+        flex-wrap: wrap-reverse !important;
+    }
+    .flex-xl-fill {
+        -ms-flex: 1 1 auto !important;
+        flex: 1 1 auto !important;
+    }
+    .flex-xl-grow-0 {
+        -ms-flex-positive: 0 !important;
+        flex-grow: 0 !important;
+    }
+    .flex-xl-grow-1 {
+        -ms-flex-positive: 1 !important;
+        flex-grow: 1 !important;
+    }
+    .flex-xl-shrink-0 {
+        -ms-flex-negative: 0 !important;
+        flex-shrink: 0 !important;
+    }
+    .flex-xl-shrink-1 {
+        -ms-flex-negative: 1 !important;
+        flex-shrink: 1 !important;
+    }
+    .justify-content-xl-start {
+        -ms-flex-pack: start !important;
+        justify-content: flex-start !important;
+    }
+    .justify-content-xl-end {
+        -ms-flex-pack: end !important;
+        justify-content: flex-end !important;
+    }
+    .justify-content-xl-center {
+        -ms-flex-pack: center !important;
+        justify-content: center !important;
+    }
+    .justify-content-xl-between {
+        -ms-flex-pack: justify !important;
+        justify-content: space-between !important;
+    }
+    .justify-content-xl-around {
+        -ms-flex-pack: distribute !important;
+        justify-content: space-around !important;
+    }
+    .align-items-xl-start {
+        -ms-flex-align: start !important;
+        align-items: flex-start !important;
+    }
+    .align-items-xl-end {
+        -ms-flex-align: end !important;
+        align-items: flex-end !important;
+    }
+    .align-items-xl-center {
+        -ms-flex-align: center !important;
+        align-items: center !important;
+    }
+    .align-items-xl-baseline {
+        -ms-flex-align: baseline !important;
+        align-items: baseline !important;
+    }
+    .align-items-xl-stretch {
+        -ms-flex-align: stretch !important;
+        align-items: stretch !important;
+    }
+    .align-content-xl-start {
+        -ms-flex-line-pack: start !important;
+        align-content: flex-start !important;
+    }
+    .align-content-xl-end {
+        -ms-flex-line-pack: end !important;
+        align-content: flex-end !important;
+    }
+    .align-content-xl-center {
+        -ms-flex-line-pack: center !important;
+        align-content: center !important;
+    }
+    .align-content-xl-between {
+        -ms-flex-line-pack: justify !important;
+        align-content: space-between !important;
+    }
+    .align-content-xl-around {
+        -ms-flex-line-pack: distribute !important;
+        align-content: space-around !important;
+    }
+    .align-content-xl-stretch {
+        -ms-flex-line-pack: stretch !important;
+        align-content: stretch !important;
+    }
+    .align-self-xl-auto {
+        -ms-flex-item-align: auto !important;
+        align-self: auto !important;
+    }
+    .align-self-xl-start {
+        -ms-flex-item-align: start !important;
+        align-self: flex-start !important;
+    }
+    .align-self-xl-end {
+        -ms-flex-item-align: end !important;
+        align-self: flex-end !important;
+    }
+    .align-self-xl-center {
+        -ms-flex-item-align: center !important;
+        align-self: center !important;
+    }
+    .align-self-xl-baseline {
+        -ms-flex-item-align: baseline !important;
+        align-self: baseline !important;
+    }
+    .align-self-xl-stretch {
+        -ms-flex-item-align: stretch !important;
+        align-self: stretch !important;
+    }
+}
+
+/* Flex reset */
+
+.flex-reset {
+    -ms-flex: 0 1 auto !important;
+    flex: 0 1 auto !important;
+}
+@media (min-width: 577px) {
+    .flex-sm-reset {
+        -ms-flex: 0 1 auto !important;
+        flex: 0 1 auto !important;
+    }
+}
+@media (min-width: 769px) {
+    .flex-md-reset {
+        -ms-flex: 0 1 auto !important;
+        flex: 0 1 auto !important;
+    }
+}
+@media (min-width: 993px) {
+    .flex-lg-reset {
+        -ms-flex: 0 1 auto !important;
+        flex: 0 1 auto !important;
+    }
+}
+@media (min-width: 1201px) {
+    .flex-xl-reset {
+        -ms-flex: 0 1 auto !important;
+        flex: 0 1 auto !important;
+    }
+}
+
+
+/*
+-------------------------------------------------------------------------------
+29. Position utilities [hm-29]
+-------------------------------------------------------------------------------
+*/
+
+.position-static {
+    position: static !important;
+}
+.position-relative {
+    position: relative !important;
+}
+.position-absolute {
+    position: absolute !important;
+}
+.position-fixed {
+    position: fixed !important;
+}
+.position-sticky {
+    position: -webkit-sticky !important;
+    position: sticky !important;
+}
+.top-0 {
+    top: 0 !important;
+}
+.bottom-0 {
+    bottom: 0 !important;
+}
+.left-0 {
+    left: 0 !important;
+}
+.right-0 {
+    right: 0 !important;
+}
+.top-auto {
+    top: auto !important;
+}
+.bottom-auto {
+    bottom: auto !important;
+}
+.left-auto {
+    left: auto !important;
+}
+.right-auto {
+    right: auto !important;
+}
+@media (min-width: 577px) {
+    .position-sm-static {
+        position: static !important;
+    }
+    .position-sm-relative {
+        position: relative !important;
+    }
+    .position-sm-absolute {
+        position: absolute !important;
+    }
+    .position-sm-fixed {
+        position: fixed !important;
+    }
+    .position-sm-sticky {
+        position: -webkit-sticky !important;
+        position: sticky !important;
+    }
+    .top-sm-0 {
+        top: 0 !important;
+    }
+    .bottom-sm-0 {
+        bottom: 0 !important;
+    }
+    .left-sm-0 {
+        left: 0 !important;
+    }
+    .right-sm-0 {
+        right: 0 !important;
+    }
+    .top-sm-auto {
+        top: auto !important;
+    }
+    .bottom-sm-auto {
+        bottom: auto !important;
+    }
+    .left-sm-auto {
+        left: auto !important;
+    }
+    .right-sm-auto {
+        right: auto !important;
+    }
+}
+@media (min-width: 769px) {
+    .position-md-static {
+        position: static !important;
+    }
+    .position-md-relative {
+        position: relative !important;
+    }
+    .position-md-absolute {
+        position: absolute !important;
+    }
+    .position-md-fixed {
+        position: fixed !important;
+    }
+    .position-md-sticky {
+        position: -webkit-sticky !important;
+        position: sticky !important;
+    }
+    .top-md-0 {
+        top: 0 !important;
+    }
+    .bottom-md-0 {
+        bottom: 0 !important;
+    }
+    .left-md-0 {
+        left: 0 !important;
+    }
+    .right-md-0 {
+        right: 0 !important;
+    }
+    .top-md-auto {
+        top: auto !important;
+    }
+    .bottom-md-auto {
+        bottom: auto !important;
+    }
+    .left-md-auto {
+        left: auto !important;
+    }
+    .right-md-auto {
+        right: auto !important;
+    }
+}
+@media (min-width: 993px) {
+    .position-lg-static {
+        position: static !important;
+    }
+    .position-lg-relative {
+        position: relative !important;
+    }
+    .position-lg-absolute {
+        position: absolute !important;
+    }
+    .position-lg-fixed {
+        position: fixed !important;
+    }
+    .position-lg-sticky {
+        position: -webkit-sticky !important;
+        position: sticky !important;
+    }
+    .top-lg-0 {
+        top: 0 !important;
+    }
+    .bottom-lg-0 {
+        bottom: 0 !important;
+    }
+    .left-lg-0 {
+        left: 0 !important;
+    }
+    .right-lg-0 {
+        right: 0 !important;
+    }
+    .top-lg-auto {
+        top: auto !important;
+    }
+    .bottom-lg-auto {
+        bottom: auto !important;
+    }
+    .left-lg-auto {
+        left: auto !important;
+    }
+    .right-lg-auto {
+        right: auto !important;
+    }
+}
+@media (min-width: 1201px) {
+    .position-xl-static {
+        position: static !important;
+    }
+    .position-xl-relative {
+        position: relative !important;
+    }
+    .position-xl-absolute {
+        position: absolute !important;
+    }
+    .position-xl-fixed {
+        position: fixed !important;
+    }
+    .position-xl-sticky {
+        position: -webkit-sticky !important;
+        position: sticky !important;
+    }
+    .top-xl-0 {
+        top: 0 !important;
+    }
+    .bottom-xl-0 {
+        bottom: 0 !important;
+    }
+    .left-xl-0 {
+        left: 0 !important;
+    }
+    .right-xl-0 {
+        right: 0 !important;
+    }
+    .top-xl-auto {
+        top: auto !important;
+    }
+    .bottom-xl-auto {
+        bottom: auto !important;
+    }
+    .left-xl-auto {
+        left: auto !important;
+    }
+    .right-xl-auto {
+        right: auto !important;
+    }
+}
+
+
+/*
+-------------------------------------------------------------------------------
+30. Other utilities [hm-30]
+-------------------------------------------------------------------------------
+*/
+
+.clearfix::after {
+    display: block;
+    clear: both;
+    content: "";
+}
+
+/* Screen reader */
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+.sr-only-focusable:active, 
+.sr-only-focusable:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+}
+
+/* Borders */
+
+.border {
+    border: 1px solid rgba(0, 0, 0, 0.2) !important;
+}
+.border-top {
+    border-top: 1px solid rgba(0, 0, 0, 0.2) !important;
+}
+.border-bottom {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
+}
+.border-left {
+    border-left: 1px solid rgba(0, 0, 0, 0.2) !important;
+}
+.border-right {
+    border-right: 1px solid rgba(0, 0, 0, 0.2) !important;
+}
+.dark-mode .border {
+    border: 1px solid rgba(255, 255, 255, 0.2) !important;
+}
+.dark-mode .border-top {
+    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
+}
+.dark-mode .border-bottom {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
+}
+.dark-mode .border-left {
+    border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
+}
+.dark-mode .border-right {
+    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
+}
+.border-0 {
+    border: none !important;
+}
+.border-top-0 {
+    border-top: none !important;
+}
+.border-bottom-0 {
+    border-bottom: none !important;
+}
+.border-left-0 {
+    border-left: none !important;
+}
+.border-right-0 {
+    border-right: none !important;
+}
+.rounded-0 {
+    border-radius: 0 !important;
+}
+.rounded {
+    border-radius: 0.4rem !important;
+}
+.rounded-top {
+    border-top-left-radius: 0.4rem !important;
+    border-top-right-radius: 0.4rem !important;
+}
+.rounded-bottom {
+    border-bottom-left-radius: 0.4rem !important;
+    border-bottom-right-radius: 0.4rem !important;
+}
+.rounded-left {
+    border-top-left-radius: 0.4rem !important;
+    border-bottom-left-radius: 0.4rem !important;
+}
+.rounded-right {
+    border-top-right-radius: 0.4rem !important;
+    border-bottom-right-radius: 0.4rem !important;
+}
+.rounded-circle {
+    border-radius: 50% !important;
+}
+.border-transparent {
+    border: 1px solid transparent !important;
+}
+.dark-mode .border-transparent {
+    border: 1px solid transparent !important;
+}
+.border-top-transparent {
+    border-top: 1px solid transparent !important;
+}
+.dark-mode .border-top-transparent {
+    border-top: 1px solid transparent !important;
+}
+.border-bottom-transparent {
+    border-bottom: 1px solid transparent !important;
+}
+.dark-mode .border-bottom-transparent {
+    border-bottom: 1px solid transparent !important;
+}
+.border-left-transparent {
+    border-left: 1px solid transparent !important;
+}
+.dark-mode .border-left-transparent {
+    border-left: 1px solid transparent !important;
+}
+.border-right-transparent {
+    border-right: 1px solid transparent !important;
+}
+.dark-mode .border-right-transparent {
+    border-right: 1px solid transparent !important;
+}
+
+/* Float */
+
+.float-left {
+    float: left !important;
+}
+.float-right {
+    float: right !important;
+}
+.float-none {
+    float: none !important;
+}
+@media (min-width: 577px) {
+    .float-sm-left {
+        float: left !important;
+    }
+    .float-sm-right {
+        float: right !important;
+    }
+    .float-sm-none {
+        float: none !important;
+    }
+}
+@media (min-width: 769px) {
+    .float-md-left {
+        float: left !important;
+    }
+    .float-md-right {
+        float: right !important;
+    }
+    .float-md-none {
+        float: none !important;
+    }
+}
+@media (min-width: 993px) {
+    .float-lg-left {
+        float: left !important;
+    }
+    .float-lg-right {
+        float: right !important;
+    }
+    .float-lg-none {
+        float: none !important;
+    }
+}
+@media (min-width: 1201px) {
+    .float-xl-left {
+        float: left !important;
+    }
+    .float-xl-right {
+        float: right !important;
+    }
+    .float-xl-none {
+        float: none !important;
+    }
+}
+
+/* Text */
+
+.text-monospace {
+    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
+}
+.text-justify {
+    text-align: justify !important;
+}
+.text-wrap {
+    white-space: normal !important;
+}
+.text-nowrap {
+    white-space: nowrap !important;
+}
+.text-truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.text-left {
+    text-align: left !important;
+}
+.text-right {
+    text-align: right !important;
+}
+.text-center {
+    text-align: center !important;
+}
+@media (min-width: 577px) {
+    .text-sm-left {
+        text-align: left !important;
+    }
+    .text-sm-right {
+        text-align: right !important;
+    }
+    .text-sm-center {
+        text-align: center !important;
+    }
+}
+@media (min-width: 769px) {
+    .text-md-left {
+        text-align: left !important;
+    }
+    .text-md-right {
+        text-align: right !important;
+    }
+    .text-md-center {
+        text-align: center !important;
+    }
+}
+@media (min-width: 993px) {
+    .text-lg-left {
+        text-align: left !important;
+    }
+    .text-lg-right {
+        text-align: right !important;
+    }
+    .text-lg-center {
+        text-align: center !important;
+    }
+}
+@media (min-width: 1201px) {
+    .text-xl-left {
+        text-align: left !important;
+    }
+    .text-xl-right {
+        text-align: right !important;
+    }
+    .text-xl-center {
+        text-align: center !important;
+    }
+}
+.text-lowercase {
+    text-transform: lowercase !important;
+}
+.text-uppercase {
+    text-transform: uppercase !important;
+}
+.text-capitalize {
+    text-transform: capitalize !important;
+}
+.font-italic {
+    font-style: italic !important;
+}
+.text-hide {
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+}
+.text-decoration-none {
+    text-decoration: none !important;
+}
+.text-decoration-underline {
+    text-decoration: underline !important;
+}
+.text-break {
+    word-wrap: break-word !important;
+}
+.text-reset {
+    color: inherit !important;
+}
+.text-extra-letter-spacing {
+    /* Improves readability in most cases */
+    letter-spacing: 0.03rem !important;
+}
+.text-extra-letter-spacing * {
+    /* Improves readability in most cases */
+    letter-spacing: 0.03rem !important;
+}
+.text-smoothing-antialiased,
+body:not(.dark-mode) .text-smoothing-antialiased-lm,
+.dark-mode .text-smoothing-antialiased-dm {
+    -webkit-font-smoothing: antialiased !important;
+    -moz-osx-font-smoothing: grayscale !important;
+}
+.text-smoothing-auto,
+body:not(.dark-mode) .text-smoothing-auto-lm,
+.dark-mode .text-smoothing-auto-dm {
+    -webkit-font-smoothing: auto !important;
+    -moz-osx-font-smoothing: auto !important;
+}
+
+/* Font sizes and weights */
+
+.font-size-12 {
+    font-size: 1.2rem !important;
+}
+.font-size-14 {
+    font-size: 1.4rem !important;
+}
+.font-size-16 {
+    font-size: 1.6rem !important;
+}
+.font-size-18 {
+    font-size: 1.8rem !important;
+}
+.font-size-20 {
+    font-size: 2rem !important;
+}
+.font-size-22 {
+    font-size: 2.2rem !important;
+}
+.font-size-24 {
+    font-size: 2.4rem !important;
+}
+.font-weight-light {
+    font-weight: 300 !important;
+}
+.font-weight-lighter {
+    font-weight: lighter !important;
+}
+.font-weight-normal {
+    font-weight: 400 !important;
+}
+.font-weight-medium {
+    font-weight: 500 !important;
+}
+.font-weight-semi-bold {
+    font-weight: 600 !important;
+}
+.font-weight-bold {
+    font-weight: 700 !important;
+}
+.font-weight-bolder {
+    font-weight: bolder !important;
+}
+
+/* Background colors */
+
+.bg-white {
+    background-color: #ffffff !important;
+}
+
+body:not(.dark-mode) .bg-white-lm {
+    background-color: #ffffff !important;
+}
+
+.dark-mode .bg-white-dm {
+    background-color: #ffffff !important;
+}
+.bg-light {
+    background-color: #ecf0f1 !important;
+}
+body:not(.dark-mode) .bg-light-lm {
+    background-color: #ecf0f1 !important;
+}
+.dark-mode .bg-light-dm {
+    background-color: #ecf0f1 !important;
+}
+.bg-transparent,
+body:not(.dark-mode) .bg-transparent-lm,
+.dark-mode .bg-transparent-dm {
+    background-color: transparent !important;
+}
+.bg-primary {
+    background-color: #1890ff !important;
+}
+body:not(.dark-mode) .bg-primary-lm {
+    background-color: #1890ff !important;
+}
+.dark-mode .bg-primary-dm {
+    background-color: #1890ff !important;
+}
+.bg-success {
+    background-color: #0be881 !important;
+}
+body:not(.dark-mode) .bg-success-lm {
+    background-color: #0be881 !important;
+}
+.dark-mode .bg-success-dm {
+    background-color: #0be881 !important;
+}
+.bg-secondary {
+    background-color: #ffcf00 !important;
+}
+body:not(.dark-mode) .bg-secondary-lm {
+    background-color: #ffcf00 !important;
+}
+.dark-mode .bg-secondary-dm {
+    background-color: #ffcf00 !important;
+}
+.bg-danger {
+    background-color: #ff4d4f !important;
+}
+body:not(.dark-mode) .bg-danger-lm {
+    background-color: #ff4d4f !important;
+}
+.dark-mode .bg-danger-dm {
+    background-color: #ff4d4f !important;
+}
+.bg-dark-light {
+    background-color: #25282c !important;
+}
+body:not(.dark-mode) .bg-dark-light-lm {
+    background-color: #25282c !important;
+}
+.dark-mode .bg-dark-light-dm {
+    background-color: #25282c !important;
+}
+.bg-dark {
+    background-color: #191c20 !important;
+}
+body:not(.dark-mode) .bg-dark-lm {
+    background-color: #191c20 !important;
+}
+.dark-mode .bg-dark-dm {
+    background-color: #191c20 !important;
+}
+.bg-very-dark {
+    background-color: #111417 !important;
+}
+body:not(.dark-mode) .bg-very-dark-lm {
+    background-color: #111417 !important;
+}
+.dark-mode .bg-very-dark-dm {
+    background-color: #111417 !important;
+}
+
+/* Text colors */
+
+/* Text white */
+
+.text-white,
+body:not(.dark-mode) .text-white-lm,
+.dark-mode .text-white-dm {
+    color: #ffffff !important;
+}
+
+/* Text muted */
+
+.text-muted {
+    color: rgba(0, 0, 0, 0.6) !important;
+}
+
+body:not(.dark-mode) .text-muted-lm {
+    color: rgba(0, 0, 0, 0.6) !important;
+}
+.dark-mode .text-muted {
+    color: rgba(255, 255, 255, 0.6) !important;
+}
+.dark-mode .text-muted-dm {
+    color: rgba(255, 255, 255, 0.6) !important;
+}
+
+/* Text primary */
+
+.text-primary {
+    color: #1890ff !important;
+}
+
+body:not(.dark-mode) .text-primary-lm {
+    color: #1890ff !important;
+}
+
+.dark-mode .text-primary-dm {
+    color: #1890ff !important;
+}
+a.text-primary:hover {
+    color: #45a3fb !important;
+}
+a.text-primary:focus {
+    color: #45a3fb !important;
+}
+body:not(.dark-mode) a.text-primary-lm:hover {
+    color: #45a3fb !important;
+}
+body:not(.dark-mode) a.text-primary-lm:focus {
+    color: #45a3fb !important;
+}
+.dark-mode a.text-primary-dm:hover {
+    color: #45a3fb !important;
+}
+.dark-mode a.text-primary-dm:focus {
+    color: #45a3fb !important;
+}
+
+/* Text success */
+
+.text-success {
+    color: #0be881 !important;
+}
+
+body:not(.dark-mode) .text-success-lm {
+    color: #0be881 !important;
+}
+
+.dark-mode .text-success-dm {
+    color: #0be881 !important;
+}
+a.text-success:hover {
+    color: #81eea8 !important;
+}
+a.text-success:focus {
+    color: #81eea8 !important;
+}
+body:not(.dark-mode) a.text-success-lm:hover {
+    color: #81eea8 !important;
+}
+body:not(.dark-mode) a.text-success-lm:focus {
+    color: #81eea8 !important;
+}
+.dark-mode a.text-success-dm:hover {
+    color: #81eea8 !important;
+}
+.dark-mode a.text-success-dm:focus {
+    color: #81eea8 !important;
+}
+
+/* Text secondary */
+
+.text-secondary {
+    color: #ffcf00 !important;
+}
+
+body:not(.dark-mode) .text-secondary-lm {
+    color: #ffcf00 !important;
+}
+
+.dark-mode .text-secondary-dm {
+    color: #ffcf00 !important;
+}
+a.text-secondary:hover {
+    color: #ffe04d !important;
+}
+a.text-secondary:focus {
+    color: #ffe04d !important;
+}
+body:not(.dark-mode) a.text-secondary-lm:hover {
+    color: #ffe04d !important;
+}
+body:not(.dark-mode) a.text-secondary-lm:focus {
+    color: #ffe04d !important;
+}
+.dark-mode a.text-secondary-dm:hover {
+    color: #ffe04d !important;
+}
+.dark-mode a.text-secondary-dm:focus {
+    color: #ffe04d !important;
+}
+
+/* Text danger */
+
+.text-danger {
+    color: #ff4d4f !important;
+}
+
+body:not(.dark-mode) .text-danger-lm {
+    color: #ff4d4f !important;
+}
+
+.dark-mode .text-danger-dm {
+    color: #ff4d4f !important;
+}
+a.text-danger:hover {
+    color: #ed586c !important;
+}
+a.text-danger:focus {
+    color: #ed586c !important;
+}
+body:not(.dark-mode) a.text-danger-lm:hover {
+    color: #ed586c !important;
+}
+body:not(.dark-mode) a.text-danger-lm:focus {
+    color: #ed586c !important;
+}
+.dark-mode a.text-danger-dm:hover {
+    color: #ed586c !important;
+}
+.dark-mode a.text-danger-dm:focus {
+    color: #ed586c !important;
+}
+
+/* Text light */
+
+.text-light {
+    color: rgba(255, 255, 255, 0.8) !important;
+}
+
+body:not(.dark-mode) .text-light-lm {
+    color: rgba(255, 255, 255, 0.8) !important;
+}
+
+.dark-mode .text-light-dm {
+    color: rgba(255, 255, 255, 0.8) !important;
+}
+a.text-light:hover {
+    color: rgba(255, 255, 255, 0.65) !important;
+}
+a.text-light:focus {
+    color: rgba(255, 255, 255, 0.65) !important;
+}
+body:not(.dark-mode) a.text-light-lm:hover {
+    color: rgba(255, 255, 255, 0.65) !important;
+}
+body:not(.dark-mode) a.text-light-lm:focus {
+    color: rgba(255, 255, 255, 0.65) !important;
+}
+.dark-mode a.text-light-dm:hover {
+    color: rgba(255, 255, 255, 0.65) !important;
+}
+.dark-mode a.text-light-dm:focus {
+    color: rgba(255, 255, 255, 0.65) !important;
+}
+
+/* Text light */
+
+.text-dark {
+    color: rgba(0, 0, 0, 0.85) !important;
+}
+
+body:not(.dark-mode) .text-dark-lm {
+    color: rgba(0, 0, 0, 0.85) !important;
+}
+
+.dark-mode .text-dark-dm {
+    color: rgba(0, 0, 0, 0.85) !important;
+}
+a.text-dark:hover {
+    color: rgba(0, 0, 0, 0.7) !important;
+}
+a.text-dark:focus {
+    color: rgba(0, 0, 0, 0.7) !important;
+}
+body:not(.dark-mode) a.text-dark-lm:hover {
+    color: rgba(0, 0, 0, 0.7) !important;
+}
+body:not(.dark-mode) a.text-dark-lm:focus {
+    color: rgba(0, 0, 0, 0.7) !important;
+}
+.dark-mode a.text-dark-dm:hover {
+    color: rgba(0, 0, 0, 0.7) !important;
+}
+.dark-mode a.text-dark-dm:focus {
+    color: rgba(0, 0, 0, 0.7) !important;
+}
+
+/* Overflow utilities */
+
+.overflow-hidden {
+    overflow: hidden !important;
+}
+.overflow-x-hidden {
+    overflow-x: hidden !important;
+}
+.overflow-y-hidden {
+    overflow-y: hidden !important;
+}
+.overflow-auto {
+    overflow: auto !important;
+}
+.overflow-x-auto {
+    overflow-x: auto !important;
+}
+.overflow-y-auto {
+    overflow-y: auto !important;
+}
+.overflow-scroll {
+    overflow: scroll !important;
+}
+.overflow-x-scroll {
+    overflow-x: scroll !important;
+}
+.overflow-y-scroll {
+    overflow-y: scroll !important;
+}
+@media (min-width: 577px) {
+    .overflow-sm-hidden {
+        overflow: hidden !important;
+    }
+    .overflow-x-sm-hidden {
+        overflow-x: hidden !important;
+    }
+    .overflow-y-sm-hidden {
+        overflow-y: hidden !important;
+    }
+    .overflow-sm-auto {
+        overflow: auto !important;
+    }
+    .overflow-x-sm-auto {
+        overflow-x: auto !important;
+    }
+    .overflow-y-sm-auto {
+        overflow-y: auto !important;
+    }
+    .overflow-sm-scroll {
+        overflow: scroll !important;
+    }
+    .overflow-x-sm-scroll {
+        overflow-x: scroll !important;
+    }
+    .overflow-y-sm-scroll {
+        overflow-y: scroll !important;
+    }
+}
+@media (min-width: 769px) {
+    .overflow-md-hidden {
+        overflow: hidden !important;
+    }
+    .overflow-x-md-hidden {
+        overflow-x: hidden !important;
+    }
+    .overflow-y-md-hidden {
+        overflow-y: hidden !important;
+    }
+    .overflow-md-auto {
+        overflow: auto !important;
+    }
+    .overflow-x-md-auto {
+        overflow-x: auto !important;
+    }
+    .overflow-y-md-auto {
+        overflow-y: auto !important;
+    }
+    .overflow-md-scroll {
+        overflow: scroll !important;
+    }
+    .overflow-x-md-scroll {
+        overflow-x: scroll !important;
+    }
+    .overflow-y-md-scroll {
+        overflow-y: scroll !important;
+    }
+}
+@media (min-width: 993px) {
+    .overflow-lg-hidden {
+        overflow: hidden !important;
+    }
+    .overflow-x-lg-hidden {
+        overflow-x: hidden !important;
+    }
+    .overflow-y-lg-hidden {
+        overflow-y: hidden !important;
+    }
+    .overflow-lg-auto {
+        overflow: auto !important;
+    }
+    .overflow-x-lg-auto {
+        overflow-x: auto !important;
+    }
+    .overflow-y-lg-auto {
+        overflow-y: auto !important;
+    }
+    .overflow-lg-scroll {
+        overflow: scroll !important;
+    }
+    .overflow-x-lg-scroll {
+        overflow-x: scroll !important;
+    }
+    .overflow-y-lg-scroll {
+        overflow-y: scroll !important;
+    }
+}
+@media (min-width: 1201px) {
+    .overflow-xl-hidden {
+        overflow: hidden !important;
+    }
+    .overflow-x-xl-hidden {
+        overflow-x: hidden !important;
+    }
+    .overflow-y-xl-hidden {
+        overflow-y: hidden !important;
+    }
+    .overflow-xl-auto {
+        overflow: auto !important;
+    }
+    .overflow-x-xl-auto {
+        overflow-x: auto !important;
+    }
+    .overflow-y-xl-auto {
+        overflow-y: auto !important;
+    }
+    .overflow-xl-scroll {
+        overflow: scroll !important;
+    }
+    .overflow-x-xl-scroll {
+        overflow-x: scroll !important;
+    }
+    .overflow-y-xl-scroll {
+        overflow-y: scroll !important;
+    }
+}
+
+/* Visibility utilities */
+
+.visible {
+    visibility: visible !important;
+}
+.invisible {
+    visibility: hidden !important;
+}
+body:not(.dark-mode) .visible-lm {
+    visibility: visible !important;
+}
+body:not(.dark-mode) .invisible-lm {
+    visibility: hidden !important;
+}
+.dark-mode .visible-dm {
+    visibility: visible !important;
+}
+.dark-mode .invisible-dm {
+    visibility: hidden !important;
+}
+
+/* Vertical align utilities */
+
+.align-baseline {
+    vertical-align: baseline !important;
+}
+.align-top {
+    vertical-align: top !important;
+}
+.align-middle {
+    vertical-align: middle !important;
+}
+.align-bottom {
+    vertical-align: bottom !important;
+}
+.align-text-bottom {
+    vertical-align: text-bottom !important;
+}
+.align-text-top {
+    vertical-align: text-top !important;
+}
+
+/* Z-index utilities */
+
+.z-0 {
+    z-index: 0 !important;
+}
+.z-10 {
+    z-index: 10 !important;
+}
+.z-20 {
+    z-index: 20 !important;
+}
+.z-30 {
+    z-index: 30 !important;
+}
+.z-40 {
+    z-index: 40 !important;
+}
+.z-50 {
+    z-index: 50 !important;
+}
+.z-auto {
+    z-index: auto !important;
+}
+@media (min-width: 577px) {
+    .z-sm-0 {
+        z-index: 0 !important;
+    }
+    .z-sm-10 {
+        z-index: 10 !important;
+    }
+    .z-sm-20 {
+        z-index: 20 !important;
+    }
+    .z-sm-30 {
+        z-index: 30 !important;
+    }
+    .z-sm-40 {
+        z-index: 40 !important;
+    }
+    .z-sm-50 {
+        z-index: 50 !important;
+    }
+    .z-sm-auto {
+        z-index: auto !important;
+    }
+}
+@media (min-width: 769px) {
+    .z-md-0 {
+        z-index: 0 !important;
+    }
+    .z-md-10 {
+        z-index: 10 !important;
+    }
+    .z-md-20 {
+        z-index: 20 !important;
+    }
+    .z-md-30 {
+        z-index: 30 !important;
+    }
+    .z-md-40 {
+        z-index: 40 !important;
+    }
+    .z-md-50 {
+        z-index: 50 !important;
+    }
+    .z-md-auto {
+        z-index: auto !important;
+    }
+}
+@media (min-width: 993px) {
+    .z-lg-0 {
+        z-index: 0 !important;
+    }
+    .z-lg-10 {
+        z-index: 10 !important;
+    }
+    .z-lg-20 {
+        z-index: 20 !important;
+    }
+    .z-lg-30 {
+        z-index: 30 !important;
+    }
+    .z-lg-40 {
+        z-index: 40 !important;
+    }
+    .z-lg-50 {
+        z-index: 50 !important;
+    }
+    .z-lg-auto {
+        z-index: auto !important;
+    }
+}
+@media (min-width: 1201px) {
+    .z-xl-0 {
+        z-index: 0 !important;
+    }
+    .z-xl-10 {
+        z-index: 10 !important;
+    }
+    .z-xl-20 {
+        z-index: 20 !important;
+    }
+    .z-xl-30 {
+        z-index: 30 !important;
+    }
+    .z-xl-40 {
+        z-index: 40 !important;
+    }
+    .z-xl-50 {
+        z-index: 50 !important;
+    }
+    .z-xl-auto {
+        z-index: auto !important;
+    }
+}
+
+/* Box shadow utilities */
+
+.shadow-none {
+    -moz-box-shadow: none !important;
+    -webkit-box-shadow: none !important;
+    box-shadow: none !important;
+}
+.shadow-sm {
+    -moz-box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.15) !important;
+    -webkit-box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.15) !important;
+    box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.15) !important;
+}
+.dark-mode .shadow-sm {
+    -moz-box-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.4) !important;
+    -webkit-box-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.4) !important;
+    box-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.4) !important;
+}
+.shadow {
+    -moz-box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.15) !important;
+    -webkit-box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.15) !important;
+    box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.15) !important;
+}
+.dark-mode .shadow {
+    -moz-box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.4) !important;
+    -webkit-box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.4) !important;
+    box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.4) !important;
+}
+.shadow-lg {
+    -moz-box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.15) !important;
+    -webkit-box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.15) !important;
+    box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.15) !important;
+}
+.dark-mode .shadow-lg {
+    -moz-box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.4) !important;
+    -webkit-box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.4) !important;
+    box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.4) !important;
+}
+
+/* Pointer events utilities */
+
+.pointer-events-auto {
+    pointer-events: auto !important;
+}
+.pointer-events-none {
+    pointer-events: none !important;
+}
\ No newline at end of file
diff --git a/web/public/assets/js/common.js b/web/public/assets/js/common.js
index 03d0d30..44a5f5f 100644
--- a/web/public/assets/js/common.js
+++ b/web/public/assets/js/common.js
@@ -7,3 +7,12 @@ function gid(id)
 {
 	return document.getElementById(id);
 }
+
+function toastErorrAlert(errorMsg) {
+  halfmoon.initStickyAlert({
+    content: errorMsg || "Unknown error",
+    title: "Error",
+    alertType: "alert-danger",
+    fillType: "filled-lm"
+  });
+}
diff --git a/web/public/assets/js/cropo.js b/web/public/assets/js/cropo.js
new file mode 100644
index 0000000..3a980f0
--- /dev/null
+++ b/web/public/assets/js/cropo.js
@@ -0,0 +1,173 @@
+class i {
+  constructor(i3) {
+    this.slider = void 0, this.canvas = void 0, this.canvasContext = void 0, this.canvasWidth = 0, this.canvasHeight = 0, this.fit = true, this.img = void 0, this.imgHeight = void 0, this.imgWidth = void 0, this.scale = void 0, this.baseScale = 1, this.maxScale = 5, this.minScale = 1, this.originalWidth = void 0, this.originalHeight = void 0, this.ratio = void 0, this.isDown = void 0, this.pointerX = void 0, this.pointerY = void 0, this.netPanningX = void 0, this.netPanningY = void 0, this.originX = void 0, this.originY = void 0, this.eventCache = void 0, this.prevDiff = void 0, this.onResize = this.debounce(() => {
+      if (!this.img)
+        return;
+      const i4 = this.canvas.offsetWidth - this.canvasWidth, t2 = this.canvas.offsetHeight - this.canvasHeight;
+      this.canvasWidth = this.canvas.width = this.canvas.offsetWidth, this.canvasHeight = this.canvas.height = this.canvas.offsetHeight, this.fit && this.imgWidth < this.canvasWidth ? (this.netPanningX = 0, this.onImageLoad()) : this.fit && this.imgHeight < this.canvasHeight ? (this.netPanningY = 0, this.onImageLoad()) : (this.netPanningX += i4 / 2, this.netPanningY += t2 / 2, this.originalWidth = this.canvasWidth, this.originalHeight = this.canvasWidth * this.ratio, this.draw()), this.fixScale();
+    }, 300), this.baseScale = (i3 == null ? void 0 : i3.baseScale) || this.baseScale, this.maxScale = (i3 == null ? void 0 : i3.maxScale) || this.maxScale, this.minScale = (i3 == null ? void 0 : i3.minScale) || this.minScale, this.loadCanvas((i3 == null ? void 0 : i3.canvas) || document.createElement("canvas"), i3 == null ? void 0 : i3.width, i3 == null ? void 0 : i3.height), (i3 == null ? void 0 : i3.rangeInput) && this.loadSlider(i3.rangeInput), i3 != null && i3.imageUrl && this.loadImageFromUrl(i3 == null ? void 0 : i3.imageUrl, i3 == null ? void 0 : i3.fit, () => {
+      this.move((i3 == null ? void 0 : i3.x) || 0, (i3 == null ? void 0 : i3.y) || 0), i3 == null || i3.onImageLoad == null || i3.onImageLoad();
+    });
+  }
+  clamp(i3, t2, h2) {
+    return Math.max(t2, Math.min(i3, h2));
+  }
+  debounce(i3, t2) {
+    let h2;
+    return (...s2) => {
+      clearTimeout(h2), h2 = setTimeout(() => {
+        i3(...s2);
+      }, t2);
+    };
+  }
+  initPointerAndZoom() {
+    this.isDown = false, this.netPanningX = 0, this.netPanningY = 0, this.eventCache = [], this.prevDiff = -1, this.slider && (this.slider.value = String(this.baseScale));
+  }
+  draw() {
+    var i3, t2;
+    this.img && ((i3 = this.canvasContext) == null || i3.clearRect(0, 0, this.canvasWidth, this.canvasHeight), (t2 = this.canvasContext) == null || t2.drawImage(this.img, this.netPanningX, this.netPanningY, this.imgWidth, this.imgHeight));
+  }
+  fixScale() {
+    this.scale = this.fit ? Math.min(this.imgWidth / this.canvasWidth, this.imgHeight / this.canvasHeight) || this.baseScale : Math.min(this.imgWidth / this.originalWidth, this.imgHeight / this.originalHeight) || this.baseScale, this.slider && (this.slider.value = String(this.scale));
+  }
+  onImageLoad() {
+    this.fit && (this.scale = Math.max(this.canvasHeight / this.imgHeight, this.canvasWidth / this.imgWidth), this.imgHeight *= this.scale, this.imgWidth *= this.scale), this.pointerX = this.pointerY = 0, this.originalWidth = this.imgWidth, this.originalHeight = this.imgHeight, this.ratio = this.originalHeight / this.originalWidth, this.draw();
+  }
+  getPointerAverage() {
+    let i3 = 0, t2 = 0;
+    for (let h2 = 0; h2 < this.eventCache.length; h2++)
+      i3 += this.eventCache[h2].offsetX, t2 += this.eventCache[h2].offsetY;
+    return i3 /= this.eventCache.length, t2 /= this.eventCache.length, [i3, t2];
+  }
+  calcOrigin(i3, t2) {
+    this.originX = (-this.netPanningX + i3) / this.imgWidth, this.originY = (-this.netPanningY + t2) / this.imgHeight;
+  }
+  move(i3, t2) {
+    const h2 = i3 - this.pointerX, s2 = t2 - this.pointerY;
+    this.pointerX = i3, this.pointerY = t2, this.netPanningX = this.fit ? this.clamp(this.netPanningX + h2, this.canvasWidth - this.imgWidth, 0) : this.netPanningX + h2, this.netPanningY = this.fit ? this.clamp(this.netPanningY + s2, this.canvasHeight - this.imgHeight, 0) : this.netPanningY + s2;
+  }
+  drawZoom(i3, t2) {
+    this.netPanningX = this.fit ? this.clamp(this.netPanningX - i3 * this.originX, this.canvasWidth - this.imgWidth, 0) : this.netPanningX - i3 * this.originX, this.netPanningY = this.fit ? this.clamp(this.netPanningY - t2 * this.originY, this.canvasHeight - this.imgHeight, 0) : this.netPanningY - t2 * this.originY;
+  }
+  zoomDelta(i3, t2) {
+    const h2 = this.imgWidth + i3;
+    h2 < this.originalWidth || this.imgHeight + t2 < this.originalHeight || h2 / this.originalWidth > this.maxScale || h2 / this.originalWidth < this.minScale || (this.slider && (this.slider.value = String(this.scale = h2 / this.originalWidth)), this.imgWidth = h2, this.imgHeight += t2, this.drawZoom(i3, t2));
+  }
+  zoomScale(i3) {
+    if (i3 > this.maxScale || i3 < this.minScale)
+      return;
+    this.prevDiff = -1;
+    let t2 = this.imgWidth, h2 = this.imgHeight;
+    this.imgWidth = this.originalWidth * i3, this.imgHeight = this.originalHeight * i3, t2 -= this.imgWidth, h2 -= this.imgHeight, this.calcOrigin(this.canvasWidth / 2, this.canvasHeight / 2), this.drawZoom(-t2, -h2);
+  }
+  pinch() {
+    if (this.eventCache.length === 2) {
+      const i3 = Math.hypot(this.eventCache[0].offsetX - this.eventCache[1].offsetX, this.eventCache[0].offsetY - this.eventCache[1].offsetY);
+      if (this.prevDiff > 0) {
+        const t2 = i3 - this.prevDiff;
+        this.zoomDelta(t2, t2 * this.ratio);
+      }
+      this.prevDiff = i3;
+    }
+  }
+  onSliderMove(i3) {
+    this.scale = +i3.target.value, this.zoomScale(this.scale), this.draw();
+  }
+  onPointerdown(i3) {
+    this.img && (this.eventCache.push(i3), [this.pointerX, this.pointerY] = this.getPointerAverage(), this.isDown = true);
+  }
+  onPointerUp(i3) {
+    this.isDown && (this.eventCache = this.eventCache.filter((t2) => t2.pointerId !== i3.pointerId), this.eventCache.length < 2 && (this.prevDiff = -1), [this.pointerX, this.pointerY] = this.getPointerAverage(), this.eventCache.length === 0 && (this.isDown = false));
+  }
+  onPointermove(i3) {
+    if (!this.isDown)
+      return;
+    for (let t3 = 0; t3 < this.eventCache.length; t3++)
+      if (i3.pointerId === this.eventCache[t3].pointerId) {
+        this.eventCache[t3] = i3;
+        break;
+      }
+    const [t2, h2] = this.getPointerAverage();
+    this.move(t2, h2), this.pinch(), this.calcOrigin(this.canvasWidth / 2, this.canvasHeight / 2), this.draw();
+  }
+  prevent(i3) {
+    i3.preventDefault(), i3.stopPropagation();
+  }
+  leadListeners() {
+    this.canvas.addEventListener("pointerdown", (i3) => {
+      this.prevent(i3), this.onPointerdown(i3);
+    }), this.canvas.addEventListener("pointermove", (i3) => {
+      this.prevent(i3), this.onPointermove(i3);
+    }), this.canvas.addEventListener("pointerout", (i3) => {
+      this.prevent(i3), this.onPointerUp(i3);
+    }), this.canvas.addEventListener("pointerup", (i3) => {
+      this.prevent(i3), this.onPointerUp(i3);
+    }), this.canvas.addEventListener("pointercancel", (i3) => {
+      this.prevent(i3), this.onPointerUp(i3);
+    }), this.canvas.addEventListener("pointerleave", (i3) => {
+      this.prevent(i3), this.onPointerUp(i3);
+    }), new ResizeObserver(this.onResize).observe(this.canvas);
+  }
+  loadSlider(i3) {
+    this.slider = i3, this.slider.value = String(this.scale || this.baseScale), this.slider.addEventListener("input", (i4) => {
+      this.prevent(i4), this.onSliderMove(i4);
+    });
+  }
+  loadCanvas(i3, t2, h2) {
+    this.canvas = i3, this.canvasContext = this.canvas.getContext("2d"), this.canvasWidth = this.canvas.width = t2 || this.canvas.offsetWidth, this.canvasHeight = this.canvas.height = h2 || this.canvas.offsetHeight, this.leadListeners();
+  }
+  loadImageFromUrl(i3, t2 = true, h2) {
+    if (!this.canvas)
+      throw Error("first call loadCanvas");
+    this.fit = t2, this.img = new Image(), this.img.onload = () => {
+      this.initPointerAndZoom(), this.imgHeight = this.img.naturalHeight, this.imgWidth = this.img.naturalWidth, this.onImageLoad(), h2 == null || h2();
+    }, this.img.src = i3;
+  }
+  getCanvas(i3) {
+    if (!this.img)
+      throw Error("please set an image");
+    const t2 = document.createElement("canvas");
+    return t2.width = this.canvasWidth * i3, t2.height = this.canvasHeight * i3, t2.getContext("2d").drawImage(this.img, this.netPanningX * i3, this.netPanningY * i3, this.imgWidth * i3, this.imgHeight * i3), t2;
+  }
+  getBlob(i3 = 1) {
+    return new Promise((t2) => {
+      this.getCanvas(i3).toBlob((i4) => {
+        t2(i4);
+      });
+    });
+  }
+  getDataUrl(i3 = 1) {
+    return this.getCanvas(i3).toDataURL();
+  }
+  download(i3 = 1) {
+    const t2 = document.createElement("a");
+    t2.download = "canvas.png", t2.href = this.getDataUrl(i3), t2.click();
+  }
+  getCropInfo() {
+    return {originalWidth: this.img.naturalWidth, originalHeight: this.img.naturalHeight, imgWidth: this.imgWidth, imgHeight: this.imgHeight, x: this.netPanningX, y: this.netPanningY};
+  }
+}
+const t = new i({});
+function h(...i2) {
+  t.download(...i2);
+}
+function s(...i2) {
+  t.loadCanvas(...i2);
+}
+function e(...i2) {
+  t.loadImageFromUrl(...i2);
+}
+function n(...i2) {
+  t.loadSlider(...i2);
+}
+function a(...i2) {
+  t.move(...i2);
+}
+function o(...i2) {
+  t.getCropInfo(...i2);
+}
+function g(...i2) {
+  t.getDataUrl(...i2);
+}
+export {i as Cropo, h as download, o as getCropInfo, g as getDataUrl, s as loadCanvas, e as loadImageFromUrl, n as loadSlider, a as move};
+export default null;
diff --git a/web/public/assets/js/halfmoon.js b/web/public/assets/js/halfmoon.js
new file mode 100644
index 0000000..4f1b25f
--- /dev/null
+++ b/web/public/assets/js/halfmoon.js
@@ -0,0 +1,511 @@
+/*
+* -----------------------------------------------------------------------------
+* Halfmoon JS
+* Version: 1.1.1
+* https://www.gethalfmoon.com
+* Copyright, Halfmoon UI
+* Licensed under MIT (https://www.gethalfmoon.com/license)
+* -----------------------------------------------------------------------------
+* The above notice must be included in its entirety when this file is used.
+*/
+
+/* Start polyfills */
+
+// Polyfill for Element.matches()
+if (!Element.prototype.matches) {
+    Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+}
+
+// Polyfill for Element.closest()
+if (!Element.prototype.closest) {
+    Element.prototype.closest = function(s) {
+        var el = this;
+        do {
+            if (el.matches(s)) return el;
+            el = el.parentElement || el.parentNode;
+        } while (el !== null && el.nodeType === 1);
+        return null;
+    };
+}
+
+// Polyfill for Element.classList (http://purl.eligrey.com/github/classList.js/blob/master/classList.js)
+"document"in self&&("classList"in document.createElement("_")&&(!document.createElementNS||"classList"in document.createElementNS("http://www.w3.org/2000/svg","g"))||!function(t){"use strict";if("Element"in t){var e="classList",n="prototype",i=t.Element[n],s=Object,r=String[n].trim||function(){return this.replace(/^\s+|\s+$/g,"")},o=Array[n].indexOf||function(t){for(var e=0,n=this.length;n>e;e++)if(e in this&&this[e]===t)return e;return-1},c=function(t,e){this.name=t,this.code=DOMException[t],this.message=e},a=function(t,e){if(""===e)throw new c("SYNTAX_ERR","The token must not be empty.");if(/\s/.test(e))throw new c("INVALID_CHARACTER_ERR","The token must not contain space characters.");return o.call(t,e)},l=function(t){for(var e=r.call(t.getAttribute("class")||""),n=e?e.split(/\s+/):[],i=0,s=n.length;s>i;i++)this.push(n[i]);this._updateClassName=function(){t.setAttribute("class",this.toString())}},u=l[n]=[],h=function(){return new l(this)};if(c[n]=Error[n],u.item=function(t){return this[t]||null},u.contains=function(t){return~a(this,t+"")},u.add=function(){var t,e=arguments,n=0,i=e.length,s=!1;do t=e[n]+"",~a(this,t)||(this.push(t),s=!0);while(++n<i);s&&this._updateClassName()},u.remove=function(){var t,e,n=arguments,i=0,s=n.length,r=!1;do for(t=n[i]+"",e=a(this,t);~e;)this.splice(e,1),r=!0,e=a(this,t);while(++i<s);r&&this._updateClassName()},u.toggle=function(t,e){var n=this.contains(t),i=n?e!==!0&&"remove":e!==!1&&"add";return i&&this[i](t),e===!0||e===!1?e:!n},u.replace=function(t,e){var n=a(t+"");~n&&(this.splice(n,1,e),this._updateClassName())},u.toString=function(){return this.join(" ")},s.defineProperty){var f={get:h,enumerable:!0,configurable:!0};try{s.defineProperty(i,e,f)}catch(p){void 0!==p.number&&-2146823252!==p.number||(f.enumerable=!1,s.defineProperty(i,e,f))}}else s[n].__defineGetter__&&i.__defineGetter__(e,h)}}(self),function(){"use strict";var t=document.createElement("_");if(t.classList.add("c1","c2"),!t.classList.contains("c2")){var e=function(t){var e=DOMTokenList.prototype[t];DOMTokenList.prototype[t]=function(t){var n,i=arguments.length;for(n=0;i>n;n++)t=arguments[n],e.call(this,t)}};e("add"),e("remove")}if(t.classList.toggle("c3",!1),t.classList.contains("c3")){var n=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(t,e){return 1 in arguments&&!this.contains(t)==!e?e:n.call(this,t)}}"replace"in document.createElement("_").classList||(DOMTokenList.prototype.replace=function(t,e){var n=this.toString().split(" "),i=n.indexOf(t+"");~i&&(n=n.slice(i),this.remove.apply(this,n),this.add(e),this.add.apply(this,n.slice(1)))}),t=null}());
+
+/* End polyfills */
+
+
+/* Halfmoon JS core */
+
+var halfmoon = {
+    // Getting the required elements
+    // Re-initialized once the DOM is loaded (to avoid issues with virtual DOM)
+    pageWrapper: document.getElementsByClassName("page-wrapper")[0],
+    stickyAlerts: document.getElementsByClassName("sticky-alerts")[0],
+
+    darkModeOn: false, // Also re-initialized once the DOM is loaded (see below)
+
+    // Create cookie
+    createCookie: function(name, value, days) {
+        var expires;
+        if (days) {
+            var date = new Date();
+            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+            expires = "; expires=" + date.toGMTString();
+        }
+        else {
+            expires = "";
+        }
+        document.cookie = name + "=" + value + expires + "; path=/";
+    },
+
+    // Read cookie
+    readCookie: function(name) {
+        var nameEQ = name + "=";
+        var ca = document.cookie.split(";");
+        for(var i=0; i < ca.length; i++) {
+            var c = ca[i];
+            while (c.charAt(0) === " ") {
+                c = c.substring(1, c.length);
+            }
+            if (c.indexOf(nameEQ) === 0) {
+                return c.substring(nameEQ.length,c.length);
+            }
+        }
+        return null;
+    },
+
+    // Erase cookie
+    eraseCookie: function(name) {
+        this.createCookie(name, "", -1);
+    },
+
+    // Toggle light/dark mode 
+    toggleDarkMode: function() {
+        if (document.body.classList.contains("dark-mode")) {
+            document.body.classList.remove("dark-mode");
+            this.darkModeOn = false;
+            this.createCookie("halfmoon_preferredMode", "light-mode", 365);
+        } else {
+            document.body.classList.add("dark-mode");
+            this.darkModeOn = true;
+            this.createCookie("halfmoon_preferredMode", "dark-mode", 365);
+        }
+    },
+
+    // Get preferred mode
+    getPreferredMode: function() {
+        if (this.readCookie("halfmoon_preferredMode")) {
+            return this.readCookie("halfmoon_preferredMode");
+        } else {
+            return "not-set";
+        }
+    },
+
+    // Toggles sidebar
+    toggleSidebar: function() {
+        if (this.pageWrapper) {
+            if (this.pageWrapper.getAttribute("data-sidebar-hidden")) {
+                this.pageWrapper.removeAttribute("data-sidebar-hidden");
+            } else {
+                this.pageWrapper.setAttribute("data-sidebar-hidden", "hidden");
+            }
+        }
+    },
+
+    // Deactivate all the dropdown toggles when another one is active
+    deactivateAllDropdownToggles: function() {
+        var activeDropdownToggles = document.querySelectorAll("[data-toggle='dropdown'].active");
+        for (var i = 0; i < activeDropdownToggles.length; i++) {
+            activeDropdownToggles[i].classList.remove("active");
+            activeDropdownToggles[i].closest(".dropdown").classList.remove("show");
+        }
+    },
+
+    // Toggle modal (using Javascript)
+    toggleModal: function(modalId) {
+        var modal = document.getElementById(modalId);
+
+        if (modal) {
+            modal.classList.toggle("show");
+        }
+    },
+
+    /* Code block for handling sticky alerts */
+
+    // Make an ID for an element
+    makeId: function(length) {
+        var result = "";
+        var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+        var charactersLength = characters.length;
+        for ( var i = 0; i < length; i++ ) {
+            result += characters.charAt(Math.floor(Math.random() * charactersLength));
+        }
+        return result;
+    },
+
+    // Toast an alert (show, fade, dispose)
+    toastAlert: function(alertId, timeShown) {
+        var alertElement = document.getElementById(alertId);
+
+        // Setting the default timeShown
+        if (timeShown === undefined) {
+            timeShown = 5000;
+        }
+
+        // Alert is only toasted if it does not have the .show class
+        if (!alertElement.classList.contains("show")) {
+            // Add .alert-block class if it does not exist
+            if (!alertElement.classList.contains("alert-block")) {
+                alertElement.classList.add("alert-block");
+            }
+
+            // Show the alert
+            // The 0.25 seconds delay is for the animation
+            setTimeout(function() {
+                alertElement.classList.add("show");
+            }, 250);
+
+            // Wait some time (timeShown + 250) and fade out the alert
+            var timeToFade = timeShown + 250;
+            setTimeout(function() {
+                alertElement.classList.add("fade");
+            }, timeToFade);
+
+            // Wait some more time (timeToFade + 500) and dispose the alert (by removing the .alert-block class)
+            // Again, the extra delay is for the animation
+            // Remove the .show and .fade classes (so the alert can be toasted again)
+            var timeToDestroy = timeToFade + 500;
+            setTimeout(function() {
+                alertElement.classList.remove("alert-block");
+                alertElement.classList.remove("show");
+                alertElement.classList.remove("fade");
+            }, timeToDestroy);
+        }
+    },
+
+    // Create a sticky alert, display it, and then remove it
+    initStickyAlert: function(param) {
+        // Setting the variables from the param
+        var content = ("content" in param) ? param.content: "";
+        var title = ("title" in param) ? param.title: "";
+        var alertType = ("alertType" in param) ? param.alertType: "";
+        var fillType = ("fillType" in param) ? param.fillType: "";
+        var hasDismissButton = ("hasDismissButton" in param) ? param.hasDismissButton: true;
+        var timeShown = ("timeShown" in param) ? param.timeShown: 5000;
+
+        // Create the alert element
+        var alertElement = document.createElement("div");
+
+        // Set ID to the alert element
+        alertElement.setAttribute("id", this.makeId(6));
+
+        // Add the title
+        if (title) {
+            content = "<h4 class='alert-heading'>" + title + "</h4>" + content;
+        }
+
+        // Add the classes to the alert element
+        alertElement.classList.add("alert");
+        if (alertType) {
+            alertElement.classList.add(alertType);
+        }
+        if (fillType) {
+            alertElement.classList.add(fillType);
+        }
+
+        // Add the close button to the content (if required)
+        if (hasDismissButton) {
+            content = "<button class='close' data-dismiss='alert' type='button' aria-label='Close'><span aria-hidden='true'>&times;</span></button>" + content;
+        }
+
+        // Add the content to the alert element
+        alertElement.innerHTML = content;
+
+        // Append the alert element to the sticky alerts
+        this.stickyAlerts.insertBefore(alertElement, this.stickyAlerts.childNodes[0]);
+
+        // Toast the alert
+        this.toastAlert(alertElement.getAttribute("id"), timeShown);
+    },
+
+    /* End code block for handling sticky alerts */
+
+    // Click handler that can be overridden by users if needed
+    clickHandler: function(event) {},
+
+    // Keydown handler that can be overridden by users if needed
+    keydownHandler: function(event) {},
+}
+
+
+/* Things done once the DOM is loaded */
+
+function halfmoonOnDOMContentLoaded() {
+    // Re-initializing the required elements (to avoid issues with virtual DOM)
+    if (!halfmoon.pageWrapper) {
+        halfmoon.pageWrapper = document.getElementsByClassName("page-wrapper")[0];
+    }
+    if (!halfmoon.stickyAlerts) {
+        halfmoon.stickyAlerts = document.getElementsByClassName("sticky-alerts")[0];
+    }
+
+    // Handle the cookie and variable for dark mode
+    // 1. First preference is given to the cookie if it exists
+    if (halfmoon.readCookie("halfmoon_preferredMode")) {
+        if (halfmoon.readCookie("halfmoon_preferredMode") == "dark-mode") {
+            halfmoon.darkModeOn = true;
+        } else {
+            halfmoon.darkModeOn = false;
+        }
+    } else {
+        // 2. If cookie does not exist, next preference is for the dark mode setting
+        if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+            halfmoon.darkModeOn = true;
+        } else {
+            // 3. If all else fails, re-initialize the dark mode preference depending on the .dark-mode class
+            if (document.body.classList.contains("dark-mode")) {
+                halfmoon.darkModeOn = true;
+            } else {
+                halfmoon.darkModeOn = false;
+            }
+        }
+    }
+
+    // Automatically set preferred theme
+    // But only if one of the data-attribute is provided
+    if (document.body.getAttribute("data-set-preferred-mode-onload") || document.body.getAttribute("data-set-preferred-theme-onload")) {
+        if (halfmoon.darkModeOn) {
+            if (!document.body.classList.contains("dark-mode")) {
+                document.body.classList.add("dark-mode");
+            }
+        } else {
+            if (document.body.classList.contains("dark-mode")) {
+                document.body.classList.remove("dark-mode");
+            }
+        }
+    }
+
+    // Hiding sidebar on first load on small screens (unless data-attribute provided)
+    // Or on larger screens when sidebar type is overlayed-all
+    if (document.documentElement.clientWidth <= 768) {
+        if (halfmoon.pageWrapper) {
+            if (!halfmoon.pageWrapper.getAttribute("data-show-sidebar-onload-sm-and-down")) {
+                halfmoon.pageWrapper.setAttribute("data-sidebar-hidden", "hidden");
+            }
+        }
+    } else {
+        if (halfmoon.pageWrapper) {
+            if (halfmoon.pageWrapper.getAttribute("data-sidebar-type") === "overlayed-all") {
+                halfmoon.pageWrapper.setAttribute("data-sidebar-hidden", "hidden");
+            }
+        }
+    }
+
+    // Adding the click event listener
+    document.addEventListener(
+        "click",
+        function(event) {
+            var eventCopy = event;
+            var target = event.target;
+
+            // Handle clicks on dropdown toggles
+            if (target.matches("[data-toggle='dropdown']") || target.matches("[data-toggle='dropdown'] *")) {
+                if (target.matches("[data-toggle='dropdown'] *")) {
+                    target = target.closest("[data-toggle='dropdown']");
+                }
+                if (target.classList.contains("active")) {
+                    target.classList.remove("active");
+                    target.closest(".dropdown").classList.remove("show");
+                } else {
+                    halfmoon.deactivateAllDropdownToggles();
+                    target.classList.add("active");
+                    target.closest(".dropdown").classList.add("show");
+                }
+            } else {
+                if (!target.matches(".dropdown-menu *")) {
+                    halfmoon.deactivateAllDropdownToggles();
+                }
+            }
+
+            // Handle clicks on alert dismiss buttons
+            if (target.matches(".alert [data-dismiss='alert']") || target.matches(".alert [data-dismiss='alert'] *")) {
+                if (target.matches(".alert [data-dismiss='alert'] *")) {
+                    target = target.closest(".alert [data-dismiss='alert']");
+                }
+                target.parentNode.classList.add("dispose");
+            }
+
+            // Handle clicks on modal toggles
+            if (target.matches("[data-toggle='modal']") || target.matches("[data-toggle='modal'] *")) {
+                if (target.matches("[data-toggle='modal'] *")) {
+                    target = target.closest("[data-toggle='modal']");
+                }
+                var targetModal = document.getElementById(target.getAttribute("data-target"));
+                if (targetModal) {
+                    if (targetModal.classList.contains("modal")) {
+                        halfmoon.toggleModal(target.getAttribute("data-target"));
+                    }
+                }
+            }
+
+            // Handle clicks on modal dismiss buttons
+            if (target.matches(".modal [data-dismiss='modal']") || target.matches(".modal [data-dismiss='modal'] *")) {
+                if (target.matches(".modal [data-dismiss='modal'] *")) {
+                    target = target.closest(".modal [data-dismiss='modal']");
+                }
+                target.closest(".modal").classList.remove("show");
+            }
+
+            // Handle clicks on modal overlays
+            if (target.matches(".modal-dialog")) {
+                var parentModal = target.closest(".modal");
+
+                if (!parentModal.getAttribute("data-overlay-dismissal-disabled")) {
+                    if (parentModal.classList.contains("show")) {
+                        parentModal.classList.remove("show");
+                    } else {
+                        window.location.hash = "#";
+                    }
+                }
+            }
+
+            // Call the click handler method to handle any logic set by the user in their projects to handle clicks
+            halfmoon.clickHandler(eventCopy);
+        }, 
+        false
+    );
+
+    // Adding the key down event listener (for shortcuts and accessibility)
+    document.addEventListener(
+        "keydown",
+        function(event) {
+            var eventCopy = event;
+
+            // Shortcuts are triggered only if no input, textarea, or select has focus,
+            // If the control key or command key is not pressed down,
+            // And if the enabling data attribute is present on the DOM's body
+            if (!(document.querySelector("input:focus") || document.querySelector("textarea:focus") || document.querySelector("select:focus"))) {
+                event = event || window.event;
+
+                if (!(event.ctrlKey || event.metaKey)) {
+                    // Toggle sidebar when [shift] + [S] keys are pressed
+                    if (document.body.getAttribute("data-sidebar-shortcut-enabled")) {
+                        if (event.shiftKey && event.which == 83) {
+                            // Variable to store whether a modal is open or not
+                            var modalOpen = false;
+
+                            // Hash exists, so we check if it belongs to a modal
+                            if (window.location.hash) {
+                                var hash = window.location.hash.substring(1);
+                                var elem = document.getElementById(hash);
+                                if (elem) {
+                                    if (elem.classList.contains("modal")) {
+                                        modalOpen = true;
+                                    }
+                                }
+                            }
+                            // Check for a modal with the .show class
+                            if (document.querySelector(".modal.show")) {
+                                modalOpen = true;
+                            }
+
+                            // This shortcut works only if no modal is open
+                            if (!modalOpen) {
+                                halfmoon.toggleSidebar();
+                                event.preventDefault();
+                            }
+                        }
+                    }
+
+                    // Toggle dark mode when [shift] + [D] keys are pressed
+                    if (document.body.getAttribute("data-dm-shortcut-enabled")) {
+                        if (event.shiftKey && event.which == 68) {
+                            halfmoon.toggleDarkMode();
+                            event.preventDefault();
+                        }
+                    }
+                }
+            }
+
+            // Handling other keydown events
+            if (event.which === 27) {
+                // Close dropdown menu (if one is open) when [esc] key is pressed
+                if (document.querySelector("[data-toggle='dropdown'].active")) {
+                    var elem = document.querySelector("[data-toggle='dropdown'].active");
+                    elem.classList.remove("active");
+                    elem.closest(".dropdown").classList.remove("show");
+                    event.preventDefault();
+                }
+                // Close modal (if one is open, and if no dropdown menu is open) when [esc] key is pressed
+                // Conditional on dropdowns so that dropdowns on modals can be closed with the keyboard without closing the modal
+                else {
+                    // Hash exists, so we check if it belongs to a modal
+                    if (window.location.hash) {
+                        var hash = window.location.hash.substring(1);
+                        var elem = document.getElementById(hash);
+                        if (elem) {
+                            if (elem.classList.contains("modal")) {
+                                if (!elem.getAttribute("data-esc-dismissal-disabled")) {
+                                    window.location.hash = "#";
+                                    event.preventDefault();
+                                }
+                            }
+                        }
+                    }
+                    // Check for a modal with the .show class
+                    if (document.querySelector(".modal.show")) {
+                        var elem = document.querySelector(".modal.show");
+                        if (!elem.getAttribute("data-esc-dismissal-disabled")) {
+                            elem.classList.remove("show");
+                            event.preventDefault();
+                        }
+                    }
+                }
+            }
+
+            // Call the keydown handler method to handle any logic set by the user in their projects to handle keydown events
+            halfmoon.keydownHandler(eventCopy);
+        }
+    );
+
+    // Handling custom file inputs
+    var halfmoonCustomFileInputs = document.querySelectorAll(".custom-file input");
+    for (var i = 0; i < halfmoonCustomFileInputs.length; i++) {
+        var customFile = halfmoonCustomFileInputs[i];
+        // Create file name container element, add the class name, and set default value
+        // Append it to the custom file element
+        var fileNamesContainer = document.createElement("div");
+        fileNamesContainer.classList.add("file-names");
+        var dataDefaultValue = customFile.getAttribute("data-default-value");
+        if (dataDefaultValue) {
+            fileNamesContainer.innerHTML = dataDefaultValue;
+        } else {
+            fileNamesContainer.innerHTML = "No file chosen";
+        }
+        customFile.parentNode.appendChild(fileNamesContainer);
+
+        // Add the event listener that will update the contents of the file name container element on change
+        customFile.addEventListener(
+            "change",
+            function(event) {
+                fileNamesContainer = event.target.parentNode.querySelector(".file-names");
+                if (event.target.files.length === 1) {
+                    fileNamesContainer.innerHTML = event.target.files[0].name;
+                } else if (event.target.files.length > 1) {
+                    fileNamesContainer.innerHTML = event.target.files.length + " files";
+                } else {
+                    fileNamesContainer.innerHTML = "No file chosen";
+                }
+            }
+        );
+    }
+
+    // Adding the .with-transitions class to the page-wrapper so that transitions are enabled
+    // This way, the weird bug on Chrome is avoided, where the transitions run on load
+    if (halfmoon.pageWrapper) {
+        halfmoon.pageWrapper.classList.add("with-transitions");
+    }
+}
+
+// Call the function when the DOM is loaded
+document.addEventListener("DOMContentLoaded", halfmoonOnDOMContentLoaded);
\ No newline at end of file
diff --git a/web/views/components/body.php b/web/views/components/body.php
index 9f4cc30..4a3704f 100644
--- a/web/views/components/body.php
+++ b/web/views/components/body.php
@@ -1,13 +1,29 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-	<?= isset($opt["title"]) ? "<title>".e($opt["title"])."</title>" : ""; ?>
-	<?php require __DIR__."/head.php"; ?>
+	<?= isset($opt["title"]) ? "<title>" . e($opt["title"]) . "</title>" : ""; ?>
+	<?php require __DIR__ . "/head.php"; ?>
 </head>
-<body>
-	<?php require __DIR__."/header.php"; ?>
-	<?php require __DIR__."/navbar.php"; ?>
-	<?= $content ?>
-	<?php require __DIR__."/footer.php"; ?>
+
+<body class="dark-mode with-custom-webkit-scrollbars with-custom-css-scrollbars" data-sidebar-shortcut-enabled="true" data-dm-shortcut-enabled="true" data-set-preferred-mode-onload="true">
+	<?php require __DIR__ . "/modal.php"; ?>
+	<div class="page-wrapper <?php if (isset($_SESSION["user_id"])) : ?>with-sidebar with-navbar<?php endif; ?> with-transision" id="page-wrapper" data-sidebar-type="overlayed-sm-and-down">
+		<?php if (isset($_SESSION["user_id"])) : ?>
+			<?php require __DIR__ . "/sidebar.php"; ?>
+
+			<?php require __DIR__ . "/navbar.php"; ?>
+		<?php endif; ?>
+		<div class="sticky-alerts"></div>
+		<div class="content-wrapper css-scrollbar-transparent-track">
+			<div class="container-lg">
+				<div class="">
+					<?= $content ?>
+				</div>
+			</div>
+		</div>
+	</div>
+	<?php require __DIR__ . "/footer.php"; ?>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/web/views/components/head.php b/web/views/components/head.php
index e296e0a..2d1390b 100644
--- a/web/views/components/head.php
+++ b/web/views/components/head.php
@@ -1,6 +1,18 @@
-
-<link rel="stylesheet" type="text/css" href="<?= e(asset("css/common.css")); ?>"/>
+<link rel="stylesheet" type="text/css" href="<?= e(asset("css/common.css")); ?>" />
+<link rel="stylesheet" type="text/css" href="<?= e(asset("css/dashboard.css")); ?>" />
+<link rel="stylesheet" type="text/css" href="<?= e(asset("css/halfmoon.css")); ?>" />
 <script type="text/javascript" src="<?= e(asset("js/common.js")); ?>"></script>
+<script type="text/javascript" src="<?= e(asset("js/halfmoon.js")); ?>"></script>
+<script type="module" src="<?= e(asset("js/cropo.js")); ?>"></script>
 <script type="text/javascript" src="<?= e(asset("js/router.js")); ?>"></script>
-<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-<meta name="theme-color" content="#000000"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<meta name="theme-color" content="#000000" />
+<script type="text/javascript">
+  if (halfmoon.getPreferredMode() == "light-mode") {
+    // Light mode is preferred
+  } else if (halfmoon.getPreferredMode() == "dark-mode") {
+    // Dark mode is preferred
+  } else if (halfmoon.getPreferredMode() == "not-set") {
+    // Cookie does not exist
+  }
+</script>
\ No newline at end of file
diff --git a/web/views/components/header.php b/web/views/components/header.php
deleted file mode 100644
index e69de29..0000000
diff --git a/web/views/components/modal.php b/web/views/components/modal.php
new file mode 100644
index 0000000..e7092cf
--- /dev/null
+++ b/web/views/components/modal.php
@@ -0,0 +1,34 @@
+<div class="modal" id="modal-success" tabindex="-1" role="dialog" data-overlay-dismissal-disabled="true" data-esc-dismissal-disabled="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <h5 class="modal-title">Success Update Profile</h5>
+            <div class="text-right mt-20">
+                <a class="btn btn-primary" href="profile.php?ref=settings">OK</a>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="modal" id="modal-error" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content bg-danger">
+            <h5 class="modal-title">Error Wrong Password</h5>
+            <div class="text-right mt-20">
+                <a href="#" class="btn mr-5" role="button">Close</a>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="modal" id="modal-profile" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content ">
+            <h5 class="modal-title">Update Images</h5>
+            <canvas style="touch-action: none; cursor: move;" id="photo_canvas"></canvas>
+            <input type="range" min="1" max="5" value="1" step="0.01" id="photo_range" style="display: none;" />
+            <input type="file" id="photo" name="photo" accept=".jpg,.png,.gif,.jpeg" />
+            <div class="text-right mt-20">
+                <button type="button" onclick="apply_photo();" data-dismiss="modal-profile" class="btn">Apply photo</button>
+                <button class="btn" data-dismiss="modal-profile">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/web/views/components/navbar.php b/web/views/components/navbar.php
index 728f40e..ffff0e7 100644
--- a/web/views/components/navbar.php
+++ b/web/views/components/navbar.php
@@ -1,9 +1,59 @@
-<?php if (isset($_SESSION["user_id"])): ?>
-<div id="navbar">
-	<a href="home.php"><button>Home</button></a>
-	<a href="profile.php"><button>Profile</button></a>
-	<a href="settings.php"><button>Settings</button></a>
-	<a href="audit_log.php"><button>Audit Log</button></a>
-	<a href="logout.php"><button>Logout</button></a>
-</div>
-<?php endif; ?>
+<?php
+const MENU_NAVBAR = [
+	"home"      => "Home",
+	"profile" => "Profile",
+	"settings"  => "Settings"
+];
+
+?>
+<?php if (isset($_SESSION["user_id"])) : ?>
+	<div class="navbar position-absolute z-10 top-0">
+		<div class="navbar-content mr-5">
+			<button id="toggle-sidebar-btn" class="btn btn-action" type="button" onclick="halfmoon.toggleSidebar()">
+				<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-bar-left" viewBox="0 0 16 16">
+					<path fill-rule="evenodd" d="M11.854 3.646a.5.5 0 0 1 0 .708L8.207 8l3.647 3.646a.5.5 0 0 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 0 1 .708 0zM4.5 1a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 1 0v-13a.5.5 0 0 0-.5-.5z" />
+				</svg>
+			</button>
+		</div>
+		<form class="form-inline w-full ml-auto" action="..." method="...">
+			<div class="input-group">
+				<input type="text" class="form-control" placeholder="Search" required="required">
+				<div class="input-group-append">
+					<button class="btn" type="submit">
+						<i class="fa fa-search" aria-hidden="true"></i>
+						<span class="sr-only">Search</span>
+					</button>
+				</div>
+			</div>
+		</form>
+		<div class="navbar-content mt-5 ml-5">
+			<div class="dropdown with-arrow">
+				<a style="cursor:pointer;" data-toggle="dropdown" type="button" id="navbar-dropdown-toggle-btn-1">
+					<img class="user-dropdown img-fluid rounded-circle" src="<?= e($u["photo_path"]); ?>" alt="<?= e($u["full_name"]); ?> Images" />
+				</a>
+				<div class="dropdown-menu dropdown-menu-right w-200" aria-labelledby="navbar-dropdown-toggle-btn-1">
+					<?php foreach (MENU_NAVBAR as $k => $m) : ?>
+						<a href="<?= e($k); ?>.php" class="dropdown-item <?= ($g_active == $k) ? " text-primary" : ""; ?>"><?= e($m); ?></a>
+					<?php endforeach; ?>
+					<div class="dropdown-divider"></div>
+					<div class="dropdown-content">
+						<button onclick="halfmoon.toggleDarkMode()" class="btn mb-5 btn-block">
+							<span class="hidden-lm">
+								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-moon-stars-fill" viewBox="0 0 16 16">
+									<path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z" />
+									<path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z" />
+								</svg>
+							</span>
+							<span class="hidden-dm">
+								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-sun-fill" viewBox="0 0 16 16">
+									<path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
+								</svg>
+							</span>
+						</button>
+						<a href="logout.php" class="btn btn-danger btn-block">Logout</a>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+<?php endif; ?>
\ No newline at end of file
diff --git a/web/views/components/sidebar.php b/web/views/components/sidebar.php
new file mode 100644
index 0000000..567adfd
--- /dev/null
+++ b/web/views/components/sidebar.php
@@ -0,0 +1,20 @@
+<?php
+
+const MENU_SIDEBAR = [
+    "home"      => "Home",
+    "audit_log" => "Audit Log",
+    "settings"  => "Settings"
+];
+
+?><div class="sidebar-overlay" onclick="halfmoon.toggleSidebar()"></div>
+<div class="sidebar bg-very-dark-dm">
+  <div class="sidebar-menu">
+    <a href="#" class="sidebar-brand">
+      GWSpamD
+    </a>
+    <div class="sidebar-divider"></div>
+    <?php foreach (MENU_SIDEBAR as $k => $m): ?>
+      <a href="<?= e($k); ?>.php" class="sidebar-link<?= ($g_active == $k) ? " active" : ""; ?>"><?= e($m); ?></a>
+    <?php endforeach; ?>
+  </div>
+</div>
diff --git a/web/views/pages/audit_log.php b/web/views/pages/audit_log.php
index 6f69375..c430967 100644
--- a/web/views/pages/audit_log.php
+++ b/web/views/pages/audit_log.php
@@ -2,47 +2,6 @@
 $opt["title"] = "Audit Log";
 load_api("audit_log");
 
-function build_extra_edit_profile($extra)
-{
-	$e = json_decode($extra, true);
-	ob_start();
-	?>
-		Username: <?= e($e["username"]); ?><br>
-		First name: <?= e($e["first_name"]); ?><br>
-		Last name: <?= e($e["last_name"]); ?><br>
-		Email: <?= e($e["email"]); ?><br>
-		Photo: <?= e($e["photo_id"] ?? "(unchanged)"); ?><br>
-	<?php
-	return ob_get_clean();
-}
-
-function build_extra_ipua($extra)
-{
-	$e = json_decode($extra, true);
-	ob_start();
-	?>
-		IP: <?= e($e["ip"]); ?><br>
-		User Agent: <?= e($e["ua"]); ?><br>
-	<?php
-	return ob_get_clean();
-}
-
-function build_extra_data(string $action, $extra)
-{
-	switch ($action) {
-	case "edit_profile":
-		return build_extra_edit_profile($extra);
-		break;
-	case "login":
-	case "logout":
-	case "change_password":
-		return build_extra_ipua($extra);
-		break;
-	}
-
-	return "";
-}
-
 if (isset($_GET["page"])) {
 	$page = (int)$_GET["page"];
 } else {
@@ -60,66 +19,38 @@ $nr_pages = get_audit_log_page_num($u["id"], $limit);
 
 ob_start();
 ?>
-<div class="paginator">
-	<?php for ($i = 1; $i <= $nr_pages; $i++): ?>
-		<div><a href="?page=<?= $i; ?>"><?= $i; ?></a></div>
-	<?php endfor; ?>
-</div>
+
+<nav aria-label="Pagination Log">
+	<ul class="pagination text-center m-5">
+		<?php for ($i = 1; $i <= $nr_pages; $i++) : ?>
+			<li class="page-item<?= ($page == $i) ? " active" : ""; ?>">
+				<a href="?page=<?= $i; ?>" class="page-link"><?= $i; ?></a>
+			</li>
+		<?php endfor; ?>
+	</ul>
+</nav>
 <?php
 $paginator = ob_get_clean();
 
 
 ?>
-<style>
-.audit-log-main {
-	text-align: center;
-	width: 900px;
-	margin: auto;
-	border: 1px solid #000;
-	margin-top: 80px;
-	padding: 30px;
-	padding-bottom: 50px;
-	margin-bottom: 150px;
-}
-.audit-log-table {
-	margin: auto;
-	border-collapse: collapse;
-}
-.audit-log-table tr th {
-	padding: 10px;
-}
-.audit-log-table tr td {
-	padding: 10px;
-}
-.paginator {
-	width: 10px;
-	margin-top: 20px;
-	font-size: 30px;
-	display: flex;
-}
-.paginator div {
-	padding : 10px;
-	border: 1px solid #000;
-	margin: 10px;
-}
-</style>
-<div class="audit-log-main">
-<h1>Audit Log</h1>
-<?= $paginator; ?>
-<table class="audit-log-table" border="1">
-	<thead>
-		<tr><th>ID</th><th>Action</th><th>Extra</th><th>Datetime</th></tr>
-	</thead>
-	<tbody>
-		<?php foreach ($st->fetchAll() as $row): ?>
-		<tr>
-			<td><?= e($row["id"]); ?></td>
-			<td><?= e($row["action"]); ?></td>
-			<td align="left"><?= build_extra_data($row["action"], $row["extra"]); ?></td>
-			<td><?= e($row["created_at"]); ?></td>
-		</tr>
+<div class="card">
+	<h1 class="card-title">Audit Log</h1>
+	<?= $paginator; ?>
+	<style>
+
+	</style>
+	<ol class="activity-feed">
+		<?php foreach ($st->fetchAll() as $row) : ?>
+			<li class="feed-item">
+				<time class="date" datetime="<?= e($row["created_at"]); ?>"><?= e($row["created_at"]); ?></time>
+				<span class="text"><?= e($row["action"]); ?></span>
+				<br>
+				<span class="text">
+					<?= build_extra_data($row["action"], $row["extra"]); ?>
+				</span>
+			</li>
 		<?php endforeach; ?>
-	</tbody>
-</table>
-<?= $paginator; ?>
-</div>
+	</ol>
+	<?= $paginator; ?>
+</div>
\ No newline at end of file
diff --git a/web/views/pages/home.php b/web/views/pages/home.php
index b39c5c3..18089e2 100644
--- a/web/views/pages/home.php
+++ b/web/views/pages/home.php
@@ -1,7 +1,144 @@
 <?php
 $opt["title"] = "GWSpamD";
+load_api("audit_log");
+
+if (isset($_GET["page"])) {
+    $page = (int)$_GET["page"];
+} else {
+    $page = 1;
+}
+
+if ($page <= 0)
+    $page = 1;
+
+$limit = 5;
+$offset = ($page - 1) * $limit;
+
+$st = get_audit_log_st($u["id"], $limit, $offset);
+$nr_pages = get_audit_log_page_num($u["id"], $limit);
+
+ob_start();
 ?>
-<link rel="stylesheet" href="<?= e(asset("css/home.css")); ?>">
-<div id="main-box">
-	<h1>Welcome <?= e($u["first_name"]); ?></h1>
-</div>
+
+<div class="container-fluid">
+    <div class="content">
+        <h1 class="content-title font-size-22">
+            Welcome <?= e($u["first_name"]); ?>
+        </h1>
+        <div class="fake-content"></div>
+        <div class="fake-content"></div>
+    </div>
+    <div class="row card bg-light-lm bg-dark-light-dm row-eq-spacing">
+        <div class="col-6 col-xl-3">
+            <div class="card">
+                <h2 class="card-title">
+                    Orders
+                </h2>
+                <div class="fake-content"></div>
+                <div class="fake-content w-50 mw-full bg-primary"></div>
+            </div>
+        </div>
+        <div class="col-6 col-xl-3">
+            <div class="card">
+                <h2 class="card-title">
+                    Sales
+                </h2>
+                <div class="fake-content"></div>
+                <div class="fake-content w-50 mw-full bg-primary"></div>
+            </div>
+        </div>
+        <div class="v-spacer d-xl-none"></div>
+        <div class="col-6 col-xl-3">
+            <div class="card">
+                <h2 class="card-title">
+                    Costs
+                </h2>
+                <div class="fake-content"></div>
+                <div class="fake-content w-50 mw-full bg-primary"></div>
+            </div>
+        </div>
+        <div class="col-6 col-xl-3">
+            <div class="card">
+                <h2 class="card-title">
+                    Profits
+                </h2>
+                <div class="fake-content"></div>
+                <div class="fake-content w-50 mw-full bg-primary"></div>
+            </div>
+        </div>
+    </div>
+    <div class="row row-eq-spacing-lg">
+        <div class="col-lg-8">
+            <div class="card h-lg-250 overflow-y-lg-auto">
+                <h2 class="card-title">
+                    Customers
+                </h2>
+                <div class="fake-content mb-20"></div>
+                <div class="fake-content mb-20"></div>
+                <div class="fake-content bg-primary mb-20"></div>
+                <div class="fake-content mb-20"></div>
+                <div class="fake-content mb-20"></div>
+                <div class="fake-content mb-20"></div>
+                <div class="fake-content mb-10"></div>
+            </div>
+        </div>
+        <div class="col-lg-4">
+            <div class="card h-lg-250 overflow-y-lg-auto">
+                <h2 class="card-title">
+                    Breakdown
+                </h2>
+                <div class="fake-content w-50 mw-full bg-primary d-inline-block"></div>
+                <div class="fake-content w-50 mw-full bg-danger d-inline-block"></div>
+                <div class="fake-content h-150 w-150 h-lg-100 w-lg-100 m-auto rounded-circle mt-10"></div>
+                <br class="hidden-lg-and-up">
+            </div>
+        </div>
+    </div>
+    <div class="row row-eq-spacing-lg">
+        <div class="col-lg-8">
+            <div class="content">
+                <h2 class="content-title">
+                    Customer stories
+                    <a href="#">#</a>
+                </h2>
+                <div class="fake-content"></div>
+                <div class="fake-content"></div>
+                <div class="fake-content w-100"></div>
+            </div>
+            <div class="card">
+                <h2 class="card-title">
+                    Transactions
+                </h2>
+                <div class="fake-content"></div>
+                <div class="fake-content"></div>
+                <div class="fake-content"></div>
+                <div class="fake-content"></div>
+                <div class="fake-content w-50 mw-full bg-primary mb-10"></div>
+            </div>
+            <div class="content">
+                <div class="fake-content"></div>
+                <div class="fake-content w-150"></div>
+            </div>
+        </div>
+        <div class="col-lg-4">
+            <div class="content">
+                <h2 class="content-title">
+                    Activity log
+                    <a href="#">#</a>
+                </h2>
+                <table class="table">
+                    <?php foreach ($st->fetchAll() as $row) : ?>
+                        <tr>
+                            <td><?= e($row["id"]); ?></td>
+                            <td><?= e($row["action"]); ?></td>
+                            <!-- <td align="left"><?= build_extra_data($row["action"], $row["extra"]); ?></td> -->
+                            <td><?= e($row["created_at"]); ?></td>
+                        </tr>
+                    <?php endforeach; ?>
+
+                </table>
+                <a href="audit_log.php" class="btn btn-action btn-primary">More</a>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/web/views/pages/login.php b/web/views/pages/login.php
index 3e62dfb..0fb01fb 100644
--- a/web/views/pages/login.php
+++ b/web/views/pages/login.php
@@ -1,24 +1,21 @@
 <?php
 $opt["title"] = "Login GWSpamD";
 ?>
-<link rel="stylesheet" type="text/css" href="<?= e(asset("css/login.css")); ?>">
-<div id="login-box">
+<div class="card w-full" id="login-box">
 <h1>Login Page</h1>
-<form method="POST" action="javascript:void(0);" id="login-form">
-	<div>
-		<div class="input-label"><label for="username">Username</label></div>
-		<div class="input-field">
-			<input type="text" name="username" placeholder="Username" required/>
-		</div>
-	</div>
-	<div>
-		<div class="input-label"><label for="password">Password</label></div>
-		<div class="input-field">
-			<input type="password" name="password" placeholder="Password" required/>
-			<input type="hidden" name="use_cookie" value="1"/>
-		</div>
-	</div>
-	<div><button type="submit" id="login-button">Login</button></div>
+<form class="form-inline  mw-full" method="POST" action="javascript:void(0);" id="login-form">
+	<div class="form-group">
+	<label class="required w-100" for="username">Username</label> <!-- w-100 = width: 10rem (100px) -->
+	<input type="text" class="form-control" name="username" placeholder="Username" required="required"/>
+</div>
+<div class="form-group">
+	<label class="required w-100" for="password">Password</label> <!-- w-100 = width: 10rem (100px) -->
+	<input type="password" class="form-control pass" name="password" placeholder="Password" required="required"/>
+	<input class="d-none" type="hidden" name="use_cookie" value="1"/>
+</div>
+<div class="form-group">
+	<input type="submit" id="login-button" class="btn btn-primary ml-auto" value="Login">
+</div>
 </form>
 </div>
 <script type="text/javascript">
diff --git a/web/views/pages/profile.php b/web/views/pages/profile.php
index fbb11c9..07d8524 100644
--- a/web/views/pages/profile.php
+++ b/web/views/pages/profile.php
@@ -3,18 +3,35 @@
 $opt["title"] = $u["full_name"];
 
 ?>
+<div class="mw-full text-center">
+	<img id="user-photo" class="img-fluid rounded-circle" src="<?= e($u["photo_path"]); ?>" alt="<?= e($u["full_name"]); ?> Images">
+	<div class="content">
+		<h1 class="font-weight-bolder"><?= $u["full_name"]; ?></h1>
+		<a href="settings.php?section=profile" class="btn btn-action m-5">Edit Profile</a>
 
-<link rel="stylesheet" href="<?= e(asset("css/profile.css")); ?>"/>
-<div id="main-box">
-	<h1><?= e($u["full_name"]); ?></h1>
-	<img id="user-photo" src="<?= e($u["photo_path"]); ?>" alt="<?= e($u["full_name"]); ?>"/>
-	<div class="edit-profile-link"><a href="settings.php?section=profile">Edit profile</a></div>
-	<table id="user-info">
-		<tr><th align="center" colspan="3"><div>Profile Info</div></th></tr>
-		<tr><td>User ID</td><td>:</td><td><?= e($u["id"]); ?></td></tr>
-		<tr><td>First Name</td><td>:</td><td><?= e($u["first_name"]); ?></td></tr>
-		<tr><td>Last Name</td><td>:</td><td><?= e($u["last_name"]); ?></td></tr>
-		<tr><td>Username</td><td>:</td><td><?= e($u["username"]); ?></td></tr>
-		<tr><td>Email</td><td>:</td><td><?= e($u["email"]); ?></td></tr>
-	</table>
-</div>
+		<table class="table table-striped">
+			<tbody>
+				<tr>
+					<th>User ID</th>
+					<td><?= e($u["id"]); ?></td>
+				</tr>
+				<tr>
+					<th>First Name</th>
+					<td><?= e($u["first_name"]); ?></td>
+				</tr>
+				<tr>
+					<th>Last Name</th>
+					<td><?= e($u["last_name"]); ?></td>
+				</tr>
+				<tr>
+					<th>User Name</th>
+					<td><?= e($u["username"]); ?></td>
+				</tr>
+				<tr>
+					<th>Email</th>
+					<td><?= e($u["email"]); ?></td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</div>
\ No newline at end of file
diff --git a/web/views/pages/settings.php b/web/views/pages/settings.php
index 41e2ae4..fdb6ccc 100644
--- a/web/views/pages/settings.php
+++ b/web/views/pages/settings.php
@@ -6,38 +6,45 @@ const SECTIONS = [
 ];
 
 if (isset(SECTIONS[$section])) {
-	$opt["title"] = "Settings | ".SECTIONS[$section];
+	$opt["title"] = "Settings | " . SECTIONS[$section];
 } else {
 	$opt["title"] = "Settings";
 }
 
 ?>
 
-<link rel="stylesheet" href="<?= e(asset("css/settings.css")); ?>"/>
 
 <script>
 	function toggle_all_inputs(enable) {
 		let inputs = document.querySelectorAll("input[type=text], input[type=email], input[type=password]");
 		for (let i = 0; i < inputs.length; i++) {
 			inputs[i].readOnly = !enable;
-			inputs[i].style["background-color"] = (enable ? "white" : "#eee");
+			if (!enable)
+				inputs[i].classList.add("disabled");
+				// inputs[i].style["background-color"] = "#eee";
+			else
+				inputs[i].classList.remove("disabled");
 		}
 	}
 </script>
 
-<div id="main-box">
-	<h1>Settings</h1>
+<div id="main-box" class="content">
+	<h1 class="content-title">Settings</h1>
 	<div id="back-to-menu-box" style="display:none;">
-		<a onclick="load_section_url('default', event);" href="?">Back to settings</a>
+		<a class="btn btn-action" onclick="load_section_url('default', event);" href="?">Back to settings</a>
 	</div>
 	<table style="display:none;" id="set-default">
-	<?php foreach (SECTIONS as $sec => $title): ?>
-		<tr><td><a onclick="load_section_url('<?= $sec; ?>', event);" href="?section=<?= e($sec); ?>"><?= e($title); ?></a></td></tr>
-	<?php endforeach; ?>
+		<?php foreach (SECTIONS as $sec => $title) : ?>
+			<tr>
+				<td>
+					<a class="btn btn-action mt-5" onclick="load_section_url('<?= $sec; ?>', event);" href="?section=<?= e($sec); ?>"><?= e($title); ?></a>
+				</td>
+			</tr>
+		<?php endforeach; ?>
 	</table>
-	<?php foreach (SECTIONS as $key => $title): ?>
+	<?php foreach (SECTIONS as $key => $title) : ?>
 		<div class="setting-box" style="display:none;" id="set-<?= e($key); ?>">
-		<?php require __DIR__."/settings/{$key}.php"; ?>
+			<?php require __DIR__ . "/settings/{$key}.php"; ?>
 		</div>
 	<?php endforeach; ?>
 </div>
@@ -66,4 +73,4 @@ if (isset(SECTIONS[$section])) {
 	}
 
 	load_section("<?= isset(SECTIONS[$section]) ? $section : "default" ?>");
-</script>
+</script>
\ No newline at end of file
diff --git a/web/views/pages/settings/password.php b/web/views/pages/settings/password.php
index 1d8fdb6..613ad08 100644
--- a/web/views/pages/settings/password.php
+++ b/web/views/pages/settings/password.php
@@ -1,13 +1,33 @@
+<div class="content">
+	<div class="mw-full d-flex justify-content-center">
+		<form action="api.php?action=settings&amp;section=password" method="POST" id="change-pass-form" class="w-400 mw-full form-inline">
+			<table id="user-info" class="table">
+				<tr>
+					<th>
+						<div>Change Password</div>
+					</th>
+				</tr>
+				<tr>
+					<td>Current Password</td>
 
-<form action="api.php?action=settings&amp;section=password" method="POST" id="change-pass-form">
-	<table id="user-info">
-		<tr><th align="center" colspan="3"><div>Change Password</div></th></tr>
-		<tr><td>Current Password</td><td>:</td><td><input type="password" name="current_password" placeholder="Current Password" required/></td></tr>
-		<tr><td>New Password</td><td>:</td><td><input type="password" name="new_password" placeholder="New Password" required/></td></tr>
-		<tr><td>Confirm New Password</td><td>:</td><td><input type="password" name="confirm_new_password" placeholder="Confirm New Password" required/></td></tr>
-		<tr><td align="center" colspan="3"><button type="submit" style="margin-top: 20px;">Save</button></td></tr>
-	</table>
-</form>
+					<td><input type="password" class="form-control" name="current_password" placeholder="Current Password" required /></td>
+				</tr>
+				<tr>
+					<td>New Password</td>
+
+					<td><input type="password" class="form-control" name="new_password" placeholder="New Password" required /></td>
+				</tr>
+				<tr>
+					<td>Confirm New Password</td>
+
+					<td><input type="password" class="form-control" name="confirm_new_password" placeholder="Confirm New Password" required /></td>
+				</tr>
+			</table>
+
+			<input class="btn btn-primary btn-block" type="submit" value="Save" />
+		</form>
+	</div>
+</div>
 <script>
 	let form_password = gid("change-pass-form");
 	form_password.addEventListener("submit", function(e) {
@@ -36,4 +56,4 @@
 		xhr.send(new FormData(form_password));
 		toggle_all_inputs(false);
 	});
-</script>
+</script>
\ No newline at end of file
diff --git a/web/views/pages/settings/profile.php b/web/views/pages/settings/profile.php
index da6e3e6..874704c 100644
--- a/web/views/pages/settings/profile.php
+++ b/web/views/pages/settings/profile.php
@@ -1,21 +1,59 @@
-<link rel="stylesheet" href="<?= e(asset("css/profile.css")); ?>"/>
-<img id="user-photo" src="<?= e($u["photo_path"]); ?>" alt="<?= e($u["full_name"]); ?>"/>
-<form action="api.php?action=settings&amp;section=profile" enctype="multipart/form-data" method="POST" id="edit-profile-form">
-<table id="user-info">
-	<tr><th align="center" colspan="3"><div>Profile Info</div></th></tr>
-	<tr><td>User ID</td><td>:</td><td><?= e($u["id"]); ?></td></tr>
-	<tr><td>Photo</td><td>:</td><td><input type="file" name="photo"/></td></tr>
-	<tr><td>First Name</td><td>:</td><td><input type="text" name="first_name" value="<?= e($u["first_name"]); ?>" required/></td></tr>
-	<tr><td>Last Name</td><td>:</td><td><input type="text" name="last_name" value="<?= e($u["last_name"]); ?>"/></td></tr>
-	<tr><td>Username</td><td>:</td><td><input type="text" name="username" value="<?= e($u["username"]); ?>" required/></td></tr>
-	<tr><td>Email</td><td>:</td><td><input type="email" name="email" value="<?= e($u["email"]); ?>" required/></td></tr>
-	<tr><td align="center" colspan="3"><div style="margin-top: 30px;">Enter your current password to edit your profile:</div></td></tr>
-	<tr><td align="center" colspan="3"><input type="password" name="password" placeholder="Password" required/></td></tr>
-	<tr><td align="center" colspan="3"><button type="submit">Save</button></td></tr>
-</table>
-</form>
+<div class="mw-full text-center">
+	<button id="photo-btn" type="button" data-toggle="modal" data-target="modal-profile">
+		<img id="user-photo" class="img-fluid rounded-circle" src="<?= e($u["photo_path"]); ?>" alt="<?= e($u["full_name"]); ?>" />
+	</button>
+	<div>
+		<a style="cursor: pointer;" id="photo-btn" type="button" data-toggle="modal" data-target="modal-profile">
+			Edit Photo
+		</a>
+	</div>
+</div>
+
+<div class="mw-full d-flex justify-content-center">
+	<form class="w-400 mw-full" action="api.php?action=settings&amp;section=profile" enctype="multipart/form-data" method="POST" id="edit-profile-form">
+		<table class="table " id="user-info">
+			<tr>
+				<th align="center" colspan="3">
+					<div>Profile Info</div>
+				</th>
+			</tr>
+			<tr>
+				<td>User ID</td>
+				<td><?= e($u["id"]); ?></td>
+			</tr>
+			<tr>
+				<td>First Name</td>
+				<td><input class="form-control" type="text" name="first_name" value="<?= e($u["first_name"]); ?>" required /></td>
+			</tr>
+			<tr>
+				<td>Last Name</td>
+				<td><input class="form-control" type="text" name="last_name" value="<?= e($u["last_name"]); ?>" /></td>
+			</tr>
+			<tr>
+				<td>Username</td>
+				<td><input class="form-control" type="text" name="username" value="<?= e($u["username"]); ?>" required /></td>
+			</tr>
+			<tr>
+				<td>Email</td>
+				<td><input class="form-control" type="email" name="email" value="<?= e($u["email"]); ?>" required /></td>
+			</tr>
+			<tr>
+				<td align="center" colspan="3">
+					<div style="margin-top: 30px;">Enter your current password to edit your profile</div>
+				</td>
+			</tr>
+			<tr>
+				<td align="center" colspan="3"><input class="form-control" type="password" name="password" placeholder="Password" required /></td>
+			</tr>
+		</table>
+		<input class="btn btn-primary btn-block" type="submit" value="Save" />
+	</form>
+</div>
 <script>
+	var apply_photo, form_error;
 	let form_profile = gid("edit-profile-form");
+	let photo_blob = null;
+	let photo_filename = null;
 	form_profile.addEventListener("submit", function(e) {
 		e.preventDefault();
 		let xhr = new XMLHttpRequest();
@@ -27,19 +65,64 @@
 			try {
 				res = JSON.parse(xhr.responseText);
 			} catch (e) {
-				console.log("Error", e);
+				toastErorrAlert(e);
 				return;
 			}
 
 			if (this.status == 200) {
-				alert("Profile updated!");
-				window.location = "profile.php?ref=settings";
+				halfmoon.toggleModal('modal-success')
 			} else {
-				alert(res.error || "Unknown error");
+				if (res.error) {
+					toastErorrAlert(res.error);
+				} else {
+					toastErorrAlert("Unknown error");
+				}
 				toggle_all_inputs(true);
 			}
 		};
 		toggle_all_inputs(false);
-		xhr.send(new FormData(form_profile));
+		let fd = new FormData(form_profile);
+		if (photo_blob !== null)
+			fd.append("photo", photo_blob, photo_filename);
+		xhr.send(fd);
 	});
 </script>
+<script type="module">
+	import {
+		Cropo
+	} from "<?= e(asset("js/cropo.js")); ?>";
+
+	const canvas = gid("photo_canvas");
+	const range = gid("photo_range");
+	const user_photo = gid("user-photo");
+	const modal_photo = gid("modal-photo");
+	const cropo = new Cropo({
+		// imageUrl: "<?= e($u["photo_path"]); ?>",
+		canvas: canvas,
+		rangeInput: range
+	});
+	let photo = gid("photo");
+	photo.addEventListener("change", (e) => {
+		let file = photo.files?.[0];
+		if (!file)
+			return;
+
+		console.log(file);
+		let fr = new FileReader();
+		fr.onload = function() {
+			cropo.loadImageFromUrl(fr.result);
+			range.style.display = "";
+			photo_filename = file.name;
+		};
+		fr.readAsDataURL(file);
+	});
+
+	apply_photo = function() {
+		cropo.getBlob().then(function(blob) {
+			photo_blob = blob;
+		}).catch(function(err) {
+			toastErorrAlert(err)
+		});
+		user_photo.src = cropo.getDataUrl();
+	}
+</script>
\ No newline at end of file

base-commit: eb3c278aa7fa3390873d2a7b5a84f1521f51eecf
-- 
Memet Zx


             reply	other threads:[~2023-04-18 16:05 UTC|newest]

Thread overview: 4+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2023-04-18 16:05 Memet Zx [this message]
2023-04-18 16:08 ` [PATCH gwspamd v2] gwspamd: web: Update frontend for gwspamd Ammar Faizi
2023-04-18 16:12 ` Ammar Faizi
2023-04-18 16:13 ` Ammar Faizi

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

  Avoid top-posting and favor interleaved quoting:
  https://en.wikipedia.org/wiki/Posting_style#Interleaved_style

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    [email protected] \
    [email protected] \
    [email protected] \
    [email protected] \
    [email protected] \
    /path/to/YOUR_REPLY

  https://kernel.org/pub/software/scm/git/docs/git-send-email.html

* If your mail client supports setting the In-Reply-To header
  via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox