From mboxrd@z Thu Jan  1 00:00:00 1970
Return-Path: <zxce3@gnuweeb.org>
X-Spam-Checker-Version: SpamAssassin 3.4.6 (2021-04-09) on gnuweeb.org
X-Spam-Level: 
X-Spam-Status: No, score=-1.2 required=5.0 tests=ALL_TRUSTED,DKIM_SIGNED,
	DKIM_VALID,DKIM_VALID_AU,DKIM_VALID_EF,URIBL_BLOCKED autolearn=ham
	autolearn_force=no version=3.4.6
DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/simple; d=gnuweeb.org;
	s=default; t=1681835054;
	bh=FLydMhi+PZaR4aLiIY107GFz9sqtmcYV3rGD7EJzgU4=;
	h=From:To:Cc:Subject:Date;
	b=al2pNUjBdYNbv7pHDUwPPdWtMfJkUpTJZAOPwsUkqZsFZy/l0oz8uJwVieEfLl55W
	 De5bxckyL+crc5fDTmk6yc2MOlRdwVX+vRTTurViCxAdXEK/YCL7PJ2XSw4NHAu6P2
	 OlUTusf/pV9XAvqRF+mnblkIss+G0YndbCGbxcXthqcaMA20e+TYeR/84Cq667vf3/
	 sS696GdQGVT8W0NqtPu/LFd5ZWmL/pEsMRe/0GBlnXMZc8QNFToJZzXP4LHfZMd9Mh
	 aaprybEoTx0oANNMjO8Vbyx/IuoeWQIVt2uKu6bLmoq3Iz5OyCiK5RGSO8PVslZ/z4
	 M7L9ctoXgF3Nw==
Received: from localhost.localdomain (unknown [68.183.184.174])
	by gnuweeb.org (Postfix) with ESMTPSA id 5826D2454E5;
	Tue, 18 Apr 2023 23:24:06 +0700 (WIB)
From: Memet Zx <zxce3@gnuweeb.org>
To: Ammar Faizi <ammarfaizi2@gnuweeb.org>
Cc: Memet Zx <zxce3@gnuweeb.org>,
	GNU/Weeb Mailing List <gwml@vger.gnuweeb.org>,
	Memet Zx <memetpea25@gmail.com>
Subject: [PATCH gwspamd v3] gwspamd: web: Update frontend for gwspamd
Date: Tue, 18 Apr 2023 23:24:00 +0700
Message-Id: <20230418162400.113291-1-zxce3@gnuweeb.org>
X-Mailer: git-send-email 2.34.1
MIME-Version: 1.0
Content-Transfer-Encoding: quoted-printable
List-Id: <gwml.vger.gnuweeb.org>

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 <zxce3@gnuweeb.org>
---
v2:
	- Remove icons folder, because is not used.
v3:
	- Remove a lot of unused comments.
	- Add LF to every file that doesn't end with LF.
	- Change halfmoon.css to the minified version.
	- Uncomment the debug code.
---
 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 =3D 1=
00, int $offset =3D 0)
 	$st->execute([$user_id]);
 	return $st;
 }
+
+function build_extra_edit_profile($extra)
+{
+	$e =3D json_decode($extra, true);
+	ob_start();
+?>
+	Username: <?=3D e($e["username"]); ?><br>
+	First name: <?=3D e($e["first_name"]); ?><br>
+	Last name: <?=3D e($e["last_name"]); ?><br>
+	Email: <?=3D e($e["email"]); ?><br>
+	Photo: <?=3D e($e["photo_id"] ?? "(unchanged)"); ?><br>
+<?php
+	return ob_get_clean();
+}
+
+function build_extra_ipua($extra)
+{
+	$e =3D json_decode($extra, true);
+	ob_start();
+?>
+	IP: <?=3D e($e["ip"]); ?><br>
+	User Agent: <?=3D 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 @@
  */
=20
 if (!defined("__INIT")):
-
 define("__INIT", true);
=20
 require __DIR__."/config.php";
@@ -37,7 +36,7 @@ if (!defined("WEB_DONT_START_SESSION")) {
 function load_api(string $name, array $data =3D [])
 {
 	extract($data);
-	return require API_DIR . "/{$name}.php";
+	return require_once API_DIR . "/{$name}.php";
 }
=20
 function e(?string $str): string
@@ -112,6 +111,7 @@ function load_page(string $name, array $data =3D [])
 	ob_start();
 	require VIEWS_DIR."/pages/{$name}.php";
 	$content =3D ob_get_clean();
+	$g_active =3D $name;
=20
 	require VIEWS_DIR."/components/body.php";
 }
diff --git a/web/public/assets/css/common.css b/web/public/assets/css/commo=
n.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 {
=20
 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=3D"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/da=
shboard.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", He=
lvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe U=
I 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/hal=
fmoon.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 --------------------------------------------------- [h=
m-01]
+    2.  Typography ---------------------------------------------------- [h=
m-02]
+    3.  Scrollbars ---------------------------------------------------- [h=
m-03]
+    4.  Layout -------------------------------------------------------- [h=
m-04]
+    5.  Page building (containers, columns, content and card) --------- [h=
m-05]
+    6.  Links --------------------------------------------------------- [h=
m-06]
+    7.  Buttons ------------------------------------------------------- [h=
m-07]
+    8.  List ---------------------------------------------------------- [h=
m-08]
+    9.  Code ---------------------------------------------------------- [h=
m-09]
+    10. Tables -------------------------------------------------------- [h=
m-10]
+    11. Form elements ------------------------------------------------- [h=
m-11]
+    12. Dropdown ------------------------------------------------------ [h=
m-12]
+    13. Modal --------------------------------------------------------- [h=
m-13]
+    14. Alerts -------------------------------------------------------- [h=
m-14]
+    15. Navbar content ------------------------------------------------ [h=
m-15]
+    16. Sidebar content ----------------------------------------------- [h=
m-16]
+    17. Pagination ---------------------------------------------------- [h=
m-17]
+    18. Breadcrumb ---------------------------------------------------- [h=
m-18]
+    19. Tooltips ------------------------------------------------------ [h=
m-19]
+    20. Badges -------------------------------------------------------- [h=
m-20]
+    21. Image --------------------------------------------------------- [h=
m-21]
+    22. Button group -------------------------------------------------- [h=
m-22]
+    23. Collapse ------------------------------------------------------ [h=
m-23]
+    24. Progress ------------------------------------------------------ [h=
m-24]
+    25. Spacing utilities --------------------------------------------- [h=
m-25]
+    26. Display utilities --------------------------------------------- [h=
m-26]
+    27. Sizing utilities ---------------------------------------------- [h=
m-27]
+    28. Flex utilities ------------------------------------------------ [h=
m-28]
+    29. Position utilities -------------------------------------------- [h=
m-29]
+    30. Other utilities ----------------------------------------------- [h=
m-30]
+
+Credits:
+    Bootstrap and its contributors for class names and inspiration. Moreov=
er,=20
+    the containers, grid system and the flex utilities found in Halfmoon C=
SS=20
+    are almost direct copies of the ones found in Bootstrap. Therefore, th=
e=20
+    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/LICE=
NSE)
+    ----------------------------------------------------------------------=
-----
+*/
+
+/*
+--------------------------------------------------------------------------=
-----
+0.  Normalize CSS
+
+Notes:
+    ~ Normalize.css makes browsers render all elements more consistently a=
nd=20
+    in line with modern standards. It precisely targets only the styles th=
at=20
+    need normalizing.
+    ~ normalize.css | MIT License | github.com/necolas/normalize.css
+    ~ This is a slighly customized version of normalize.css 8.0.1,=20
+    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=3D"button"],
+[type=3D"reset"],
+[type=3D"submit"] {
+    -webkit-appearance: button;
+}
+button::-moz-focus-inner,
+[type=3D"button"]::-moz-focus-inner,
+[type=3D"reset"]::-moz-focus-inner,
+[type=3D"submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+}
+button:-moz-focusring,
+[type=3D"button"]:-moz-focusring,
+[type=3D"reset"]:-moz-focusring,
+[type=3D"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=3D"checkbox"],
+[type=3D"radio"] {
+    box-sizing: border-box;
+    padding: 0;
+}
+[type=3D"number"]::-webkit-inner-spin-button,
+[type=3D"number"]::-webkit-outer-spin-button {
+    height: auto;
+}
+[type=3D"search"] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
+}
+[type=3D"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, He=
lvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe U=
I 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=
,=20
+    there is a loss of readability.=20
+    */
+    -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 t=
he=20
+    page-wrapper is always expected, as the entire framework is built arou=
nd=20
+    it.
+    ~ Only styled on screens larger than 768px, because mobiles and tablet=
s=20
+    have disappearing scrollbars, which look great most of the time.
+    ~ The webkit scrollbars work on webkit based browsers, such as Chrome,=
=20
+    Safari, Brave, and the new Microsoft Edge.
+    ~ The custom CSS scrollbars work only on Firefox as of 2020. It is a v=
ery=20
+    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:ho=
ver {
+        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-t=
rack {
+        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-t=
humb {
+        background-color: rgba(255, 255, 255, 0.25);
+        border-color: transparent;
+    }
+    .dark-mode.with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-t=
humb: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-c=
orner {
+        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 */
+=20=20=20=20
+    .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-scroll=
bar {
+        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-scroll=
bar-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-scroll=
bar-thumb {
+        background-color: rgba(255, 255, 255, 0.25);
+        border-color: transparent;
+    }
+    .dark-mode.with-custom-webkit-scrollbars .modal-dialog::-webkit-scroll=
bar-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-scroll=
bar-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 */
+=20=20=20=20
+    .with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scro=
llbar {
+        width: 1.4rem;
+        height: 1.4rem;
+        background-color: #ffffff;
+    }
+    .dark-mode.with-custom-webkit-scrollbars .modal-full .modal-dialog::-w=
ebkit-scrollbar {
+        background-color: #191c20;
+    }
+    .with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scro=
llbar-track {
+        border-width: 1px;
+        border-color: rgba(0, 0, 0, 0.1);
+    }
+    .dark-mode.with-custom-webkit-scrollbars .modal-full .modal-dialog::-w=
ebkit-scrollbar-track {
+        border-color: rgba(255, 255, 255, 0.05);
+    }
+    .with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scro=
llbar-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-scro=
llbar-thumb:hover {
+        background-color: rgba(0, 0, 0, 0.4);
+        border-color: transparent;
+    }
+    .dark-mode.with-custom-webkit-scrollbars .modal-full .modal-dialog::-w=
ebkit-scrollbar-thumb {
+        background-color: rgba(255, 255, 255, 0.25);
+        border-color: transparent;
+    }
+    .dark-mode.with-custom-webkit-scrollbars .modal-full .modal-dialog::-w=
ebkit-scrollbar-thumb:hover {
+        background-color: rgba(255, 255, 255, 0.4);
+        border-color: transparent;
+    }
+    .with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scro=
llbar-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::-w=
ebkit-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-trac=
k {
+        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-thum=
b {
+        background-color: rgba(255, 255, 255, 0.25);
+        border-color: transparent;
+    }
+    .dark-mode.with-custom-webkit-scrollbars .card::-webkit-scrollbar-thum=
b: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-corn=
er {
+        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 c=
olor=20
+    related styles of the page-wrapper, sticky-alerts, navbars, sidebar, a=
nd=20
+    content-wrapper. These are grouped together because reading them all a=
t=20
+    once in serial makes it quite easy to understand how pages are structu=
red.
+    ~ The styles of the children of the above elements can be found in the=
ir=20
+    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 automatica=
lly=20
+    fixes the positions and the sizes of the children elements. For exampl=
e,=20
+    .page-wrapper.with-navbar will automatically push the content-wrapper =
down=20
+    by an amount which is equal to the height of the navbar, in order to m=
ake=20
+    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;=20
+    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~=3D"full-height"] > .sidebar {
+    height: 100%;
+    top: 0;
+}
+.page-wrapper.with-sidebar[data-sidebar-type~=3D"full-height"] > .navbar:n=
ot(.navbar-fixed-bottom) {
+    left: 26rem;
+    width: calc(100% - 26rem);
+}
+.page-wrapper.with-sidebar[data-sidebar-type~=3D"full-height"] > .navbar.n=
avbar-fixed-bottom {
+    left: 26rem;
+    width: calc(100% - 26rem);
+}
+@media (max-width: 768px) {
+    .page-wrapper.with-sidebar[data-sidebar-type~=3D"full-height"] > .navb=
ar:not(.navbar-fixed-bottom),
+    .page-wrapper.with-sidebar[data-sidebar-type~=3D"full-height"] > .navb=
ar.navbar-fixed-bottom {
+        width: 100%;
+    }
+}
+.page-wrapper.with-sidebar[data-sidebar-type~=3D"full-height"][data-sideba=
r-hidden] > .navbar:not(.navbar-fixed-bottom),
+.page-wrapper.with-sidebar[data-sidebar-type~=3D"full-height"][data-sideba=
r-hidden] > .navbar.navbar-fixed-bottom {
+    left: 0;
+    width: 100%;
+}
+
+/* Overlayed sidebar */
+
+.page-wrapper.with-sidebar[data-sidebar-type~=3D"overlayed-all"] > .navbar=
:not(.navbar-fixed-bottom),
+.page-wrapper.with-sidebar[data-sidebar-type~=3D"overlayed-all"] > .conten=
t-wrapper,
+.page-wrapper.with-sidebar[data-sidebar-type~=3D"overlayed-all"] > .navbar=
.navbar-fixed-bottom {
+    left: 0;
+    width: 100%;
+}
+.page-wrapper.with-sidebar[data-sidebar-type~=3D"overlayed-all"] > .sideba=
r {
+    height: 100%;
+    top: 0;
+    z-index: 50;
+}
+.page-wrapper.with-sidebar[data-sidebar-type~=3D"overlayed-all"] > .sideba=
r-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~=3D"overlayed-all"][data-side=
bar-hidden] > .sidebar-overlay {
+    display: none;
+}
+@media (max-width: 768px) {
+    .page-wrapper.with-sidebar[data-sidebar-type~=3D"overlayed-sm-and-down=
"] > .navbar:not(.navbar-fixed-bottom),
+    .page-wrapper.with-sidebar[data-sidebar-type~=3D"overlayed-sm-and-down=
"] > .content-wrapper,
+    .page-wrapper.with-sidebar[data-sidebar-type~=3D"overlayed-sm-and-down=
"] > .navbar.navbar-fixed-bottom {
+        left: 0;
+        width: 100%;
+    }
+    .page-wrapper.with-sidebar[data-sidebar-type~=3D"overlayed-sm-and-down=
"] > .sidebar {
+        height: 100%;
+        top: 0;
+        z-index: 50;
+    }
+    .page-wrapper.with-sidebar[data-sidebar-type~=3D"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~=3D"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~=3D"full-hei=
ght"] > .navbar:not(.navbar-fixed-bottom),
+.page-wrapper.with-transitions.with-sidebar[data-sidebar-type~=3D"full-hei=
ght"] > .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-be=
zier(.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^=3D"col"] {
+    padding-left: calc(3rem/2);
+    padding-right: calc(3rem/2);
+}
+.row.row-eq-spacing>[class^=3D"col"]>.content,
+.row.row-eq-spacing>[class^=3D"col"]>.card {
+    margin-left: 0;
+    margin-right: 0;
+}
+.row.row-eq-spacing>[class^=3D"col"]>.content:first-child,
+.row.row-eq-spacing>[class^=3D"col"]>.card:first-child {
+    margin-top: 0;
+}
+.row.row-eq-spacing>[class^=3D"col"]>.content:last-child,
+.row.row-eq-spacing>[class^=3D"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^=3D"col"] {
+        padding-left: calc(2rem/2);
+        padding-right: calc(2rem/2);
+    }
+}
+
+/* Adjustments for small screens and up (> 576px) */
+
+@media (min-width: 577px) {=20
+    .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^=3D"col"] {
+        padding-left: calc(3rem/2);
+        padding-right: calc(3rem/2);
+    }
+    .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^=3D"col"]>.content,
+    .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^=3D"col"]>.card {
+        margin-left: 0;
+        margin-right: 0;
+    }
+    .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^=3D"col"]>.content:=
first-child,
+    .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^=3D"col"]>.card:fir=
st-child {
+        margin-top: 0;
+    }
+    .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^=3D"col"]>.content:=
last-child,
+    .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^=3D"col"]>.card:las=
t-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^=3D"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^=3D"col"]:first-chi=
ld {
+        margin-top: 0;
+    }
+    .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^=3D"col"]:last-chil=
d {
+        margin-bottom: 0;
+    }
+    .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^=3D"col"]>.content,
+    .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^=3D"col"]>.card {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+    .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^=3D"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^=3D"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^=3D"col"]>.content:=
not(:only-child):first-child,
+    .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^=3D"col"]>.card:not=
(:only-child):first-child {
+        margin-top: 0;
+    }
+    .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^=3D"col"]>.content:=
not(:only-child):last-child,
+    .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^=3D"col"]>.card:not=
(:only-child):last-child {
+        margin-bottom: 0;
+    }
+}
+
+/* Adjustments for medium screens and up (> 768px) */
+
+@media (min-width: 769px) {=20
+    .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)>[c=
lass^=3D"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)>[c=
lass^=3D"col"]>.content,
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[c=
lass^=3D"col"]>.card {
+        margin-left: 0;
+        margin-right: 0;
+    }
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[c=
lass^=3D"col"]>.content:first-child,
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[c=
lass^=3D"col"]>.card:first-child {
+        margin-top: 0;
+    }
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[c=
lass^=3D"col"]>.content:last-child,
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[c=
lass^=3D"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)>[c=
lass^=3D"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)>[c=
lass^=3D"col"]:first-child {
+        margin-top: 0;
+    }
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[c=
lass^=3D"col"]:last-child {
+        margin-bottom: 0;
+    }
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[c=
lass^=3D"col"]>.content,
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[c=
lass^=3D"col"]>.card {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[c=
lass^=3D"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)>[c=
lass^=3D"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)>[c=
lass^=3D"col"]>.content:not(:only-child):first-child,
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[c=
lass^=3D"col"]>.card:not(:only-child):first-child {
+        margin-top: 0;
+    }
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[c=
lass^=3D"col"]>.content:not(:only-child):last-child,
+    .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[c=
lass^=3D"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)>[c=
lass^=3D"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)>[c=
lass^=3D"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)>[c=
lass^=3D"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) {=20
+    .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^=3D"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^=3D"col"]>.content,
+    .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm)=
:not(.row-eq-spacing)>[class^=3D"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^=3D"col"]>.content:first-child,
+    .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm)=
:not(.row-eq-spacing)>[class^=3D"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^=3D"col"]>.content:last-child,
+    .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm)=
:not(.row-eq-spacing)>[class^=3D"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^=3D"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^=3D"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^=3D"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^=3D"col"]>.content,
+    .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm)=
:not(.row-eq-spacing)>[class^=3D"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^=3D"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^=3D"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^=3D"col"]>.content:not(:only-child):first-chil=
d,
+    .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm)=
:not(.row-eq-spacing)>[class^=3D"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^=3D"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^=3D"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^=3D"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^=3D"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^=3D"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) {=20=20=20=20
+    .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^=3D"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^=3D"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^=3D"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^=3D"col"]>.content:fir=
st-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^=3D"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^=3D"col"]>.content:las=
t-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^=3D"col"]>.card:last-c=
hild {
+        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^=3D"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^=3D"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^=3D"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^=3D"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^=3D"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^=3D"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^=3D"col"]>.card:not(:o=
nly-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^=3D"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^=3D"col"]>.card:not(:o=
nly-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^=3D"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^=3D"col"]>.card:not(:o=
nly-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^=3D"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^=3D"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^=3D"col"]>.card:not(:o=
nly-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=20
+    background color is overridden. This is because most button focus effe=
cts=20
+    tend to be based on border, box shadow, and outline. On the other hand=
,=20
+    when a focused input is hovered over, nothing is overridden, and all t=
he=20
+    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 bo=
rder=20
+    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 bo=
rder=20
+    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 trans=
parent;
+    -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 trans=
parent;
+    -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 bo=
rder=20
+    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 bo=
rder=20
+    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 trans=
parent;
+    -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 trans=
parent;
+    -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 trans=
parent;
+    -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 trans=
parent;
+    -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 bo=
rder=20
+    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 bo=
rder=20
+    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 bo=
rder=20
+    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 bo=
rder=20
+    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 bo=
rder=20
+    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 bo=
rder=20
+    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 bo=
rder=20
+    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 bo=
rder=20
+    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 bo=
rder=20
+    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 bo=
rder=20
+    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 bo=
rder=20
+    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 bo=
rder=20
+    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 bo=
rder=20
+    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 bo=
rder=20
+    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 bo=
rder=20
+    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 bo=
rder=20
+    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 bo=
rder=20
+    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 bo=
rder=20
+    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 bo=
rder=20
+    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 bo=
rder=20
+    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 bo=
rder=20
+    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 bo=
rder=20
+    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;=20
+}
+.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,=20
+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^=3D"col"] {
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+.form-row.row-eq-spacing>[class^=3D"col"]:first-child {
+    padding-left: 0;
+}
+.form-row.row-eq-spacing>[class^=3D"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^=3D"col"] {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+    .form-row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^=3D"col"]:firs=
t-child {
+        padding-left: 0;
+    }
+    .form-row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^=3D"col"]:last=
-child {
+        padding-right: 0;
+    }
+}
+@media (max-width: 576px) {
+    .form-row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^=3D"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-spacin=
g)>[class^=3D"col"] {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+    .form-row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacin=
g)>[class^=3D"col"]:first-child {
+        padding-left: 0;
+    }
+    .form-row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacin=
g)>[class^=3D"col"]:last-child {
+        padding-right: 0;
+    }
+}
+@media (max-width: 768px) {
+    .form-row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacin=
g)>[class^=3D"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-spacin=
g-sm):not(.row-eq-spacing)>[class^=3D"col"] {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+    .form-row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacin=
g-sm):not(.row-eq-spacing)>[class^=3D"col"]:first-child {
+        padding-left: 0;
+    }
+    .form-row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacin=
g-sm):not(.row-eq-spacing)>[class^=3D"col"]:last-child {
+        padding-right: 0;
+    }
+}
+@media (max-width: 992px) {
+    .form-row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacin=
g-sm):not(.row-eq-spacing)>[class^=3D"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-spacin=
g-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^=3D"col"] {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+    .form-row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacin=
g-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^=3D"col"]:first-c=
hild {
+        padding-left: 0;
+    }
+    .form-row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacin=
g-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^=3D"col"]:last-ch=
ild {
+        padding-right: 0;
+    }
+}
+@media (max-width: 1200px) {
+    .form-row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacin=
g-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^=3D"col"]:not(:la=
st-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=
=20
+    forms to work as intended. Moreover, since focusing on an input with t=
he=20
+    :disabled selector is impossible, the :focus styles are not overridden=
=20
+    (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=
=20
+    forms to work as intended. Moreover, since focusing on an input with t=
he=20
+    :disabled selector is impossible, the :focus styles are not overridden=
=20
+    (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=
=20
+    forms to work as intended. Moreover, since focusing on an input with t=
he=20
+    :disabled selector is impossible, the :focus styles are not overridden=
=20
+    (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=
=20
+    forms to work as intended. Moreover, since focusing on an input with t=
he=20
+    :disabled selector is impossible, the :focus styles are not overridden=
=20
+    (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-inpu=
t-placeholder {
+    /* Internet Explorer 10-11 */
+    color: rgba(255, 255, 255, 0.5);
+}
+.dark-mode .form-group.is-invalid .form-control.alt-dm.is-invalid::placeho=
lder {
+    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,iVBORw0KGgoAAAANSUhEUgAAAB=
QAAAAMCAYAAABiDJ37AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAI9JR=
EFUeNpiZACCyMjIBCDVD8SOy5cvv8BAAgDqNQBS+4G4EKh3ASPUsPlQ+Q+kGIpkmABUKJEJ6jIY=
AEnshyok1TAQ6AcZ6Ah1GdGG4jAM7DtGQgrQvU9ILSOxColVw0is7VA2QV8wkhA+DMQECSMJgc5=
AyDCcBhIwFG9aZSQxrRFM+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 (ig=
nored 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 (ig=
nored on webkit browsers) */
+    color: rgba(255, 255, 255, 0.8);
+    background-color: #1890ff;
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {=
=20=20
+    /*
+    This hack resets the select boxes to their defaults on IE, because it =
is=20
+    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;
+    }=20
+}
+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=3D"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=3D"checkbox"]:hover~label:before {
+    background-color: #ffffff;
+    border-color: rgba(0, 0, 0, 0.4);
+}
+.custom-checkbox input[type=3D"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=3D"checkbox"]:checked~label:before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+.custom-checkbox input[type=3D"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=3D"checkbox"]:hover~label:before {
+    background-color: transparent;
+    border-color: rgba(255, 255, 255, 0.3);
+}
+.dark-mode .custom-checkbox input[type=3D"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=3D"checkbox"]:checked~label:before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+.dark-mode .custom-checkbox input[type=3D"checkbox"]:checked:focus~label:b=
efore {
+    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=3D"checkbox"]:checked~label:after {
+    display: block;
+}
+.custom-checkbox input[type=3D"checkbox"]:disabled~label {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+.custom-checkbox input[type=3D"checkbox"]:disabled~label:before {
+    background-color: #ffffff;
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.custom-checkbox input[type=3D"checkbox"]:hover:disabled~label:before {
+    background-color: #ffffff;
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.custom-checkbox input[type=3D"checkbox"]:disabled:checked~label:before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+.custom-checkbox input[type=3D"checkbox"]:hover:disabled:checked~label:bef=
ore {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+.dark-mode .custom-checkbox input[type=3D"checkbox"]:disabled~label:before=
 {
+    background-color: transparent;
+    border-color: rgba(255, 255, 255, 0.15);
+}
+.dark-mode .custom-checkbox input[type=3D"checkbox"]:hover:disabled~label:=
before {
+    background-color: transparent;
+    border-color: rgba(255, 255, 255, 0.15);
+}
+.dark-mode .custom-checkbox input[type=3D"checkbox"]:disabled:checked~labe=
l:before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+.dark-mode .custom-checkbox input[type=3D"checkbox"]:hover:disabled:checke=
d~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=3D"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=3D"radio"]:hover~label:before {
+    background-color: #ffffff;
+    border-color: rgba(0, 0, 0, 0.4);
+}
+.custom-radio input[type=3D"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=3D"radio"]:checked~label:before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+.custom-radio input[type=3D"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=3D"radio"]:hover~label:before {
+    background-color: transparent;
+    border-color: rgba(255, 255, 255, 0.3);
+}
+.dark-mode .custom-radio input[type=3D"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=3D"radio"]:checked~label:before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+.dark-mode .custom-radio input[type=3D"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=3D"radio"]:checked~label:after {
+    display: block;
+}
+.custom-radio input[type=3D"radio"]:disabled~label {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+.custom-radio input[type=3D"radio"]:disabled~label:before {
+    background-color: #ffffff;
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.custom-radio input[type=3D"radio"]:hover:disabled~label:before {
+    background-color: #ffffff;
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.custom-radio input[type=3D"radio"]:disabled:checked~label:before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+.custom-radio input[type=3D"radio"]:hover:disabled:checked~label:before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+.dark-mode .custom-radio input[type=3D"radio"]:disabled~label:before {
+    background-color: transparent;
+    border-color: rgba(255, 255, 255, 0.15);
+}
+.dark-mode .custom-radio input[type=3D"radio"]:hover:disabled~label:before=
 {
+    background-color: transparent;
+    border-color: rgba(255, 255, 255, 0.15);
+}
+.dark-mode .custom-radio input[type=3D"radio"]:disabled:checked~label:befo=
re {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+.dark-mode .custom-radio input[type=3D"radio"]:hover:disabled:checked~labe=
l:before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+
+/* Switch */
+
+.custom-switch {
+    display: block;
+    position: relative;
+    line-height: 2rem;
+}
+.custom-switch input[type=3D"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=3D"checkbox"]:hover~label:before {
+    background-color: #ffffff;
+    border-color: rgba(0, 0, 0, 0.4);
+}
+.custom-switch input[type=3D"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=3D"checkbox"]:checked~label:before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+.custom-switch input[type=3D"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=3D"checkbox"]:hover~label:before {
+    background-color: transparent;
+    border-color: rgba(255, 255, 255, 0.3);
+}
+.dark-mode .custom-switch input[type=3D"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=3D"checkbox"]:checked~label:before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+.dark-mode .custom-switch input[type=3D"checkbox"]:checked:focus~label:bef=
ore {
+    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=3D"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=3D"checkbox"]:checked~label:after {
+    background-color: #ffffff;
+    border-color: #ffffff;
+}
+.custom-switch input[type=3D"checkbox"]:disabled~label {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+.custom-switch input[type=3D"checkbox"]:disabled~label:before {
+    background-color: #ffffff;
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.custom-switch input[type=3D"checkbox"]:hover:disabled~label:before {
+    background-color: #ffffff;
+    border-color: rgba(0, 0, 0, 0.3);
+}
+.custom-switch input[type=3D"checkbox"]:disabled:checked~label:before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+.custom-switch input[type=3D"checkbox"]:hover:disabled:checked~label:befor=
e {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+.dark-mode .custom-switch input[type=3D"checkbox"]:disabled~label:before {
+    background-color: transparent;
+    border-color: rgba(255, 255, 255, 0.15);
+}
+.dark-mode .custom-switch input[type=3D"checkbox"]:hover:disabled~label:be=
fore {
+    background-color: transparent;
+    border-color: rgba(255, 255, 255, 0.15);
+}
+.dark-mode .custom-switch input[type=3D"checkbox"]:disabled:checked~label:=
before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+.dark-mode .custom-switch input[type=3D"checkbox"]:hover:disabled:checked~=
label:before {
+    background-color: #1890ff;
+    border-color: #1890ff;
+}
+
+/* Input file */
+
+.custom-file {
+    display: block;
+    position: relative;
+}
+.custom-file input[type=3D"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=3D"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=3D"file"]:focus:hover~label {
+    /*
+    Only text color and background properties are overridden, while the bo=
rder=20
+    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 trans=
parent;
+    -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 trans=
parent;
+    -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=3D"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=3D"file"]:focus:hover~label {
+    /*
+    Only text color and background properties are overridden, while the bo=
rder=20
+    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=3D"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=3D"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=3D"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 trans=
parent;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.dark-mode .custom-file:hover input[type=3D"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 trans=
parent;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.custom-file input[type=3D"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=3D"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=3D"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=3D"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=3D"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=3D"file"]:focus:hover~label=
 {
+    /*
+    Only text color and background properties are overridden, while the bo=
rder=20
+    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=3D"file"].is-invalid:focus:hover~label {
+    /*
+    Only text color and background properties are overridden, while the bo=
rder=20
+    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=3D"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=3D"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=3D"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=3D"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=3D"file"]:focus:=
hover~label {
+    /*=20
+    Only text color and background properties are overridden, while the bo=
rder=20
+    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=3D"file"].is-invalid:focus:hover~label {
+    /*=20
+    Only text color and background properties are overridden, while the bo=
rder=20
+    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.dropd=
own-menu-center {
+    left: 50%;
+    transform: translate(-50%, 50%);
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft) .dropdown-menu.dropd=
own-menu-right {
+    right: 0;
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).show .dropdown-menu,
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).toggle-on-hover:hove=
r .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:hove=
r .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 .dro=
pdown-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 .dro=
pdown-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 .dro=
pdown-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-arro=
w.toggle-on-hover:hover .dropdown-menu::before {
+    border-bottom-color: #111417;
+}
+.dark-mode .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arro=
w.toggle-on-hover:hover .dropdown-menu::after {
+    border-bottom-color: #111417;
+}
+.dark-mode .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arro=
w.show .dropdown-menu::before {
+    border-bottom-color: #111417;
+}
+.dark-mode .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arro=
w.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 .dro=
pdown-menu::after {
+    border-bottom-color: #ffffff;
+    top: calc(0.2rem + (0.8rem * -1));
+}
+.dark-mode .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arro=
w.toggle-on-hover:hover .dropdown-menu::after {
+    border-bottom-color: #191c20;
+}
+.dark-mode .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arro=
w.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-r=
ight)::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-r=
ight)::after {
+    left: 0.8rem;
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dro=
pdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::before {
+    left: 0.8rem;
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dro=
pdown-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 .dro=
pdown-menu.dropdown-menu-center::before {
+    left: calc(50% - 0.8rem);
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dro=
pdown-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 .dro=
pdown-menu.dropdown-menu-right::before {
+    right: 0.8rem;
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dro=
pdown-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-m=
enu-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-men=
u::before {
+    border-top-color: #111417;
+}
+.dark-mode .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-men=
u::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-men=
u::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(.drop=
down-menu-center):not(.dropdown-menu-right)::before {
+    left: 0.8rem;
+}
+.dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu:not(.drop=
down-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::befo=
re {
+    left: calc(50% - 0.8rem);
+}
+.dropdown.dropup.with-arrow.show .dropdown-menu.dropdown-menu-center::afte=
r {
+    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::befor=
e {
+    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(.dropdow=
n-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-cen=
ter {
+    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::befor=
e {
+    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(.d=
ropdown-menu-center):not(.dropdown-menu-up)::before {
+    top: 0.8rem;
+}
+.dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu:not(.d=
ropdown-menu-center):not(.dropdown-menu-up)::after {
+    top: 0.8rem;
+}
+.dropdown.dropright.with-arrow.show .dropdown-menu:not(.dropdown-menu-cent=
er):not(.dropdown-menu-up)::before {
+    top: 0.8rem;
+}
+.dropdown.dropright.with-arrow.show .dropdown-menu:not(.dropdown-menu-cent=
er):not(.dropdown-menu-up)::after {
+    top: 0.8rem;
+}
+.dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdo=
wn-menu-center::before {
+    top: calc(50% - 0.8rem);
+}
+.dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdo=
wn-menu-center::after {
+    top: calc(50% - 0.8rem);
+}
+.dropdown.dropright.with-arrow.show .dropdown-menu.dropdown-menu-center::b=
efore {
+    top: calc(50% - 0.8rem);
+}
+.dropdown.dropright.with-arrow.show .dropdown-menu.dropdown-menu-center::a=
fter {
+    top: calc(50% - 0.8rem);
+}
+.dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdo=
wn-menu-up::before {
+    bottom: 0.8rem;
+}
+.dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdo=
wn-menu-up::after {
+    bottom: 0.8rem;
+}
+.dropdown.dropright.with-arrow.show .dropdown-menu.dropdown-menu-up::befor=
e {
+    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-cent=
er {
+    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-m=
enu::before {
+    border-left-color: #111417;
+}
+.dark-mode .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-m=
enu::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-m=
enu::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(.dr=
opdown-menu-center):not(.dropdown-menu-up)::before {
+    top: 0.8rem;
+}
+.dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dr=
opdown-menu-center):not(.dropdown-menu-up)::after {
+    top: 0.8rem;
+}
+.dropdown.dropleft.with-arrow.show .dropdown-menu:not(.dropdown-menu-cente=
r):not(.dropdown-menu-up)::before {
+    top: 0.8rem;
+}
+.dropdown.dropleft.with-arrow.show .dropdown-menu:not(.dropdown-menu-cente=
r):not(.dropdown-menu-up)::after {
+    top: 0.8rem;
+}
+.dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdow=
n-menu-center::before {
+    top: calc(50% - 0.8rem);
+}
+.dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdow=
n-menu-center::after {
+    top: calc(50% - 0.8rem);
+}
+.dropdown.dropleft.with-arrow.show .dropdown-menu.dropdown-menu-center::be=
fore {
+    top: calc(50% - 0.8rem);
+}
+.dropdown.dropleft.with-arrow.show .dropdown-menu.dropdown-menu-center::af=
ter {
+    top: calc(50% - 0.8rem);
+}
+.dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdow=
n-menu-up::before {
+    bottom: 0.8rem;
+}
+.dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdow=
n-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 exa=
mple, 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 trans=
parent;
+}
+.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 trans=
parent;
+}
+.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 trans=
parent;
+    -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 {
+    /*=20
+    Links are NOT antialiased because they are NOT light text on a dark bg.
+    */=20
+    -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.
+    */=20
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+
+/*
+--------------------------------------------------------------------------=
-----
+19. Tooltips [hm-19]
+--------------------------------------------------------------------------=
-----
+*/
+
+[data-toggle=3D"tooltip"] {
+    position: relative;
+}
+
+/* Tooltip arrow */
+
+[data-toggle=3D"tooltip"]::before {
+    content: " ";
+    width: 1rem;
+    height: 1rem;
+    background-color: #191c20;
+    position: absolute;
+    visibility: hidden;
+    opacity: 0;
+    z-index: 90;
+}
+.dark-mode [data-toggle=3D"tooltip"]::before {
+    background-color: #ffffff;
+}
+
+/* Tooltip content */
+
+[data-toggle=3D"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=3D"tooltip"]::after {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: #ffffff;
+}
+
+/* Tooltip top */
+
+[data-toggle=3D"tooltip"]:not([data-placement])::before,
+[data-toggle=3D"tooltip"][data-placement=3D"top"]::before {
+    left: 50%;
+    top: -0.5rem;
+    transform: translate(-50%, -100%) rotate(45deg);
+}
+[data-toggle=3D"tooltip"]:not([data-placement])::after,
+[data-toggle=3D"tooltip"][data-placement=3D"top"]::after {
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+/* Tooltip bottom */
+
+[data-toggle=3D"tooltip"][data-placement=3D"bottom"]::before {
+    left: 50%;
+    bottom: -0.5rem;
+    transform: translate(-50%, 100%) rotate(45deg);
+}
+[data-toggle=3D"tooltip"][data-placement=3D"bottom"]::after {
+    left: 50%;
+    bottom: 50%;
+    transform: translate(-50%, 50%);
+}
+
+/* Tooltip left */
+
+[data-toggle=3D"tooltip"][data-placement=3D"left"]::before {
+    left: -0.5rem;
+    transform: translate(-100%, 100%) rotate(45deg);
+}
+[data-toggle=3D"tooltip"][data-placement=3D"left"]::after {
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+/* Tooltip right */
+
+[data-toggle=3D"tooltip"][data-placement=3D"right"]::before {
+    right: -0.5rem;
+    transform: translate(100%, 100%) rotate(45deg);
+}
+[data-toggle=3D"tooltip"][data-placement=3D"right"]::after {
+    right: 50%;
+    top: 50%;
+    transform: translate(50%, -50%);
+}
+
+/* Show tooltips (on all screens) */
+
+/* Arrow */
+
+[data-toggle=3D"tooltip"]:not([data-target-breakpoint]):hover::before,
+[data-toggle=3D"tooltip"]:not([data-target-breakpoint]):focus::before {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity 0.5s;
+    -webkit-transition: opacity 0.5s;
+}
+
+/* Content */
+
+[data-toggle=3D"tooltip"]:not([data-target-breakpoint]):hover::after,
+[data-toggle=3D"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=3D"tooltip"]:not([data-target-breakpoint]):not([data-placemen=
t]):hover::after,
+[data-toggle=3D"tooltip"]:not([data-target-breakpoint])[data-placement=3D"=
top"]:hover::after,
+[data-toggle=3D"tooltip"]:not([data-target-breakpoint]):not([data-placemen=
t]):focus::after,
+[data-toggle=3D"tooltip"]:not([data-target-breakpoint])[data-placement=3D"=
top"]:focus::after {
+    top: -1rem;
+    transform: translate(-50%, -100%);
+}
+[data-toggle=3D"tooltip"]:not([data-target-breakpoint])[data-placement=3D"=
bottom"]:hover::after,
+[data-toggle=3D"tooltip"]:not([data-target-breakpoint])[data-placement=3D"=
bottom"]:focus::after {
+    bottom: -1rem;
+    transform: translate(-50%, 100%);
+}
+[data-toggle=3D"tooltip"]:not([data-target-breakpoint])[data-placement=3D"=
left"]:hover::after,
+[data-toggle=3D"tooltip"]:not([data-target-breakpoint])[data-placement=3D"=
left"]:focus::after {
+    left: -1rem;
+    transform: translate(-100%, -50%);
+}
+[data-toggle=3D"tooltip"]:not([data-target-breakpoint])[data-placement=3D"=
right"]:hover::after,
+[data-toggle=3D"tooltip"]:not([data-target-breakpoint])[data-placement=3D"=
right"]:focus::after {
+    right: -1rem;
+    transform: translate(100%, -50%);
+}
+
+/* Show tooltips (only on screens with widths > 768px) */
+
+@media (min-width: 769px) {
+    /* Arrow */
+
+    [data-toggle=3D"tooltip"][data-target-breakpoint=3D"md"]:hover::before,
+    [data-toggle=3D"tooltip"][data-target-breakpoint=3D"md"]:focus::before=
 {
+        visibility: visible;
+        opacity: 1;
+        transition: opacity 0.5s;
+        -webkit-transition: opacity 0.5s;
+    }
+
+    /* Content */
+
+    [data-toggle=3D"tooltip"][data-target-breakpoint=3D"md"]:hover::after,
+    [data-toggle=3D"tooltip"][data-target-breakpoint=3D"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=3D"tooltip"][data-target-breakpoint=3D"md"]:not([data-pla=
cement]):hover::after,
+    [data-toggle=3D"tooltip"][data-target-breakpoint=3D"md"][data-placemen=
t=3D"top"]:hover::after,
+    [data-toggle=3D"tooltip"][data-target-breakpoint=3D"md"]:not([data-pla=
cement]):focus::after,
+    [data-toggle=3D"tooltip"][data-target-breakpoint=3D"md"][data-placemen=
t=3D"top"]:focus::after {
+        top: -1rem;
+        transform: translate(-50%, -100%);
+    }
+    [data-toggle=3D"tooltip"][data-target-breakpoint=3D"md"][data-placemen=
t=3D"bottom"]:hover::after,
+    [data-toggle=3D"tooltip"][data-target-breakpoint=3D"md"][data-placemen=
t=3D"bottom"]:focus::after {
+        bottom: -1rem;
+        transform: translate(-50%, 100%);
+    }
+    [data-toggle=3D"tooltip"][data-target-breakpoint=3D"md"][data-placemen=
t=3D"left"]:hover::after,
+    [data-toggle=3D"tooltip"][data-target-breakpoint=3D"md"][data-placemen=
t=3D"left"]:focus::after {
+        left: -1rem;
+        transform: translate(-100%, -50%);
+    }
+    [data-toggle=3D"tooltip"][data-target-breakpoint=3D"md"][data-placemen=
t=3D"right"]:hover::after,
+    [data-toggle=3D"tooltip"][data-target-breakpoint=3D"md"][data-placemen=
t=3D"right"]:focus::after {
+        right: -1rem;
+        transform: translate(100%, -50%);
+    }
+}
+
+/* Show tooltips (only on screens with widths > 992px) */
+
+@media (min-width: 993px) {
+    /* Arrow */
+
+    [data-toggle=3D"tooltip"][data-target-breakpoint=3D"lg"]:hover::before,
+    [data-toggle=3D"tooltip"][data-target-breakpoint=3D"lg"]:focus::before=
 {
+        visibility: visible;
+        opacity: 1;
+        transition: opacity 0.5s;
+        -webkit-transition: opacity 0.5s;
+    }
+
+    /* Content */
+
+    [data-toggle=3D"tooltip"][data-target-breakpoint=3D"lg"]:hover::after,
+    [data-toggle=3D"tooltip"][data-target-breakpoint=3D"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=3D"tooltip"][data-target-breakpoint=3D"lg"]:not([data-pla=
cement]):hover::after,
+    [data-toggle=3D"tooltip"][data-target-breakpoint=3D"lg"][data-placemen=
t=3D"top"]:hover::after,
+    [data-toggle=3D"tooltip"][data-target-breakpoint=3D"lg"]:not([data-pla=
cement]):focus::after,
+    [data-toggle=3D"tooltip"][data-target-breakpoint=3D"lg"][data-placemen=
t=3D"top"]:focus::after {
+        top: -1rem;
+        transform: translate(-50%, -100%);
+    }
+    [data-toggle=3D"tooltip"][data-target-breakpoint=3D"lg"][data-placemen=
t=3D"bottom"]:hover::after,
+    [data-toggle=3D"tooltip"][data-target-breakpoint=3D"lg"][data-placemen=
t=3D"bottom"]:focus::after {
+        bottom: -1rem;
+        transform: translate(-50%, 100%);
+    }
+    [data-toggle=3D"tooltip"][data-target-breakpoint=3D"lg"][data-placemen=
t=3D"left"]:hover::after,
+    [data-toggle=3D"tooltip"][data-target-breakpoint=3D"lg"][data-placemen=
t=3D"left"]:focus::after {
+        left: -1rem;
+        transform: translate(-100%, -50%);
+    }
+    [data-toggle=3D"tooltip"][data-target-breakpoint=3D"lg"][data-placemen=
t=3D"right"]:hover::after,
+    [data-toggle=3D"tooltip"][data-target-breakpoint=3D"lg"][data-placemen=
t=3D"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.activ=
e,
+.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=3D"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=3D"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=3D"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,iVBORw0KGgoAAAANSUhEUgAAAA=
wAAAAUCAYAAAC58NwRAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB=
3RJTUUH5AgHFAwNJY24UQAAAJVJREFUKM+lk8ENgzAMRZ9hgS4SiRFgDN+6QifpCD1mDFbIIQuw=
ASNwcaSqKsEW/5RI/1n+jiMAqvoE3sCScy50JGb+2H2/ggar3PQAVlWdesBilV2QWIYJWM1Mrz1=
pBy8k37QHkt8eryD5F6wHydn4zqCBoO63FAodGmvo4UKrETG3bXWbG/DymgHGWmtJKW3A7PmiB2=
rUYYave/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,iVBORw0KGgoAAAANSUhEUgAAAB=
QAAAAMCAYAAABiDJ37AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAI9JR=
EFUeNpiZACCyMjIBCDVD8SOy5cvv8BAAgDqNQBS+4G4EKh3ASPUsPlQ+Q+kGIpkmABUKJEJ6jIY=
AEnshyok1TAQ6AcZ6Ah1GdGG4jAM7DtGQgrQvU9ILSOxColVw0is7VA2QV8wkhA+DMQECSMJgc5=
AyDCcBhIwFG9aZSQxrRFM+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-hea=
der {
+    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) {
+    /*=20
+    On IE, collapse panels are styled to be always open. This is because t=
hey=20
+    are not supporter by the browser.
+    */
+
+    /* Collapse header */
+=20=20=20=20
+    .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,iVBORw0KGgoAAAANSUhEUg=
AAABQAAAAMCAYAAABiDJ37AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA=
I9JREFUeNpiZACCyMjIBCDVD8SOy5cvv8BAAgDqNQBS+4G4EKh3ASPUsPlQ+Q+kGIpkmABUKJEJ=
6jIYAEnshyok1TAQ6AcZ6Ah1GdGG4jAM7DtGQgrQvU9ILSOxColVw0is7VA2QV8wkhA+DMQECSM=
Jgc5AyDCcBhIwFG9aZSQxrRFM+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 spac=
ing=20
+    for most elements. Instead, we encourage people to use the following=20
+    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,=20
+.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 =3D void 0, this.canvas =3D void 0, this.canvasContext =3D=
 void 0, this.canvasWidth =3D 0, this.canvasHeight =3D 0, this.fit =3D true=
, this.img =3D void 0, this.imgHeight =3D void 0, this.imgWidth =3D void 0,=
 this.scale =3D void 0, this.baseScale =3D 1, this.maxScale =3D 5, this.min=
Scale =3D 1, this.originalWidth =3D void 0, this.originalHeight =3D void 0,=
 this.ratio =3D void 0, this.isDown =3D void 0, this.pointerX =3D void 0, t=
his.pointerY =3D void 0, this.netPanningX =3D void 0, this.netPanningY =3D =
void 0, this.originX =3D void 0, this.originY =3D void 0, this.eventCache =
=3D void 0, this.prevDiff =3D void 0, this.onResize =3D this.debounce(() =
=3D> {
+      if (!this.img)
+        return;
+      const i4 =3D this.canvas.offsetWidth - this.canvasWidth, t2 =3D this=
.canvas.offsetHeight - this.canvasHeight;
+      this.canvasWidth =3D this.canvas.width =3D this.canvas.offsetWidth, =
this.canvasHeight =3D this.canvas.height =3D this.canvas.offsetHeight, this=
.fit && this.imgWidth < this.canvasWidth ? (this.netPanningX =3D 0, this.on=
ImageLoad()) : this.fit && this.imgHeight < this.canvasHeight ? (this.netPa=
nningY =3D 0, this.onImageLoad()) : (this.netPanningX +=3D i4 / 2, this.net=
PanningY +=3D t2 / 2, this.originalWidth =3D this.canvasWidth, this.origina=
lHeight =3D this.canvasWidth * this.ratio, this.draw()), this.fixScale();
+    }, 300), this.baseScale =3D (i3 =3D=3D null ? void 0 : i3.baseScale) |=
| this.baseScale, this.maxScale =3D (i3 =3D=3D null ? void 0 : i3.maxScale)=
 || this.maxScale, this.minScale =3D (i3 =3D=3D null ? void 0 : i3.minScale=
) || this.minScale, this.loadCanvas((i3 =3D=3D null ? void 0 : i3.canvas) |=
| document.createElement("canvas"), i3 =3D=3D null ? void 0 : i3.width, i3 =
=3D=3D null ? void 0 : i3.height), (i3 =3D=3D null ? void 0 : i3.rangeInput=
) && this.loadSlider(i3.rangeInput), i3 !=3D null && i3.imageUrl && this.lo=
adImageFromUrl(i3 =3D=3D null ? void 0 : i3.imageUrl, i3 =3D=3D null ? void=
 0 : i3.fit, () =3D> {
+      this.move((i3 =3D=3D null ? void 0 : i3.x) || 0, (i3 =3D=3D null ? v=
oid 0 : i3.y) || 0), i3 =3D=3D null || i3.onImageLoad =3D=3D null || i3.onI=
mageLoad();
+    });
+  }
+  clamp(i3, t2, h2) {
+    return Math.max(t2, Math.min(i3, h2));
+  }
+  debounce(i3, t2) {
+    let h2;
+    return (...s2) =3D> {
+      clearTimeout(h2), h2 =3D setTimeout(() =3D> {
+        i3(...s2);
+      }, t2);
+    };
+  }
+  initPointerAndZoom() {
+    this.isDown =3D false, this.netPanningX =3D 0, this.netPanningY =3D 0,=
 this.eventCache =3D [], this.prevDiff =3D -1, this.slider && (this.slider.=
value =3D String(this.baseScale));
+  }
+  draw() {
+    var i3, t2;
+    this.img && ((i3 =3D this.canvasContext) =3D=3D null || i3.clearRect(0=
, 0, this.canvasWidth, this.canvasHeight), (t2 =3D this.canvasContext) =3D=
=3D null || t2.drawImage(this.img, this.netPanningX, this.netPanningY, this=
.imgWidth, this.imgHeight));
+  }
+  fixScale() {
+    this.scale =3D this.fit ? Math.min(this.imgWidth / this.canvasWidth, t=
his.imgHeight / this.canvasHeight) || this.baseScale : Math.min(this.imgWid=
th / this.originalWidth, this.imgHeight / this.originalHeight) || this.base=
Scale, this.slider && (this.slider.value =3D String(this.scale));
+  }
+  onImageLoad() {
+    this.fit && (this.scale =3D Math.max(this.canvasHeight / this.imgHeigh=
t, this.canvasWidth / this.imgWidth), this.imgHeight *=3D this.scale, this.=
imgWidth *=3D this.scale), this.pointerX =3D this.pointerY =3D 0, this.orig=
inalWidth =3D this.imgWidth, this.originalHeight =3D this.imgHeight, this.r=
atio =3D this.originalHeight / this.originalWidth, this.draw();
+  }
+  getPointerAverage() {
+    let i3 =3D 0, t2 =3D 0;
+    for (let h2 =3D 0; h2 < this.eventCache.length; h2++)
+      i3 +=3D this.eventCache[h2].offsetX, t2 +=3D this.eventCache[h2].off=
setY;
+    return i3 /=3D this.eventCache.length, t2 /=3D this.eventCache.length,=
 [i3, t2];
+  }
+  calcOrigin(i3, t2) {
+    this.originX =3D (-this.netPanningX + i3) / this.imgWidth, this.origin=
Y =3D (-this.netPanningY + t2) / this.imgHeight;
+  }
+  move(i3, t2) {
+    const h2 =3D i3 - this.pointerX, s2 =3D t2 - this.pointerY;
+    this.pointerX =3D i3, this.pointerY =3D t2, this.netPanningX =3D this.=
fit ? this.clamp(this.netPanningX + h2, this.canvasWidth - this.imgWidth, 0=
) : this.netPanningX + h2, this.netPanningY =3D this.fit ? this.clamp(this.=
netPanningY + s2, this.canvasHeight - this.imgHeight, 0) : this.netPanningY=
 + s2;
+  }
+  drawZoom(i3, t2) {
+    this.netPanningX =3D this.fit ? this.clamp(this.netPanningX - i3 * thi=
s.originX, this.canvasWidth - this.imgWidth, 0) : this.netPanningX - i3 * t=
his.originX, this.netPanningY =3D this.fit ? this.clamp(this.netPanningY - =
t2 * this.originY, this.canvasHeight - this.imgHeight, 0) : this.netPanning=
Y - t2 * this.originY;
+  }
+  zoomDelta(i3, t2) {
+    const h2 =3D 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 =3D String(this.scale =3D h=
2 / this.originalWidth)), this.imgWidth =3D h2, this.imgHeight +=3D t2, thi=
s.drawZoom(i3, t2));
+  }
+  zoomScale(i3) {
+    if (i3 > this.maxScale || i3 < this.minScale)
+      return;
+    this.prevDiff =3D -1;
+    let t2 =3D this.imgWidth, h2 =3D this.imgHeight;
+    this.imgWidth =3D this.originalWidth * i3, this.imgHeight =3D this.ori=
ginalHeight * i3, t2 -=3D this.imgWidth, h2 -=3D this.imgHeight, this.calcO=
rigin(this.canvasWidth / 2, this.canvasHeight / 2), this.drawZoom(-t2, -h2);
+  }
+  pinch() {
+    if (this.eventCache.length =3D=3D=3D 2) {
+      const i3 =3D Math.hypot(this.eventCache[0].offsetX - this.eventCache=
[1].offsetX, this.eventCache[0].offsetY - this.eventCache[1].offsetY);
+      if (this.prevDiff > 0) {
+        const t2 =3D i3 - this.prevDiff;
+        this.zoomDelta(t2, t2 * this.ratio);
+      }
+      this.prevDiff =3D i3;
+    }
+  }
+  onSliderMove(i3) {
+    this.scale =3D +i3.target.value, this.zoomScale(this.scale), this.draw=
();
+  }
+  onPointerdown(i3) {
+    this.img && (this.eventCache.push(i3), [this.pointerX, this.pointerY] =
=3D this.getPointerAverage(), this.isDown =3D true);
+  }
+  onPointerUp(i3) {
+    this.isDown && (this.eventCache =3D this.eventCache.filter((t2) =3D> t=
2.pointerId !=3D=3D i3.pointerId), this.eventCache.length < 2 && (this.prev=
Diff =3D -1), [this.pointerX, this.pointerY] =3D this.getPointerAverage(), =
this.eventCache.length =3D=3D=3D 0 && (this.isDown =3D false));
+  }
+  onPointermove(i3) {
+    if (!this.isDown)
+      return;
+    for (let t3 =3D 0; t3 < this.eventCache.length; t3++)
+      if (i3.pointerId =3D=3D=3D this.eventCache[t3].pointerId) {
+        this.eventCache[t3] =3D i3;
+        break;
+      }
+    const [t2, h2] =3D 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) =3D> {
+      this.prevent(i3), this.onPointerdown(i3);
+    }), this.canvas.addEventListener("pointermove", (i3) =3D> {
+      this.prevent(i3), this.onPointermove(i3);
+    }), this.canvas.addEventListener("pointerout", (i3) =3D> {
+      this.prevent(i3), this.onPointerUp(i3);
+    }), this.canvas.addEventListener("pointerup", (i3) =3D> {
+      this.prevent(i3), this.onPointerUp(i3);
+    }), this.canvas.addEventListener("pointercancel", (i3) =3D> {
+      this.prevent(i3), this.onPointerUp(i3);
+    }), this.canvas.addEventListener("pointerleave", (i3) =3D> {
+      this.prevent(i3), this.onPointerUp(i3);
+    }), new ResizeObserver(this.onResize).observe(this.canvas);
+  }
+  loadSlider(i3) {
+    this.slider =3D i3, this.slider.value =3D String(this.scale || this.ba=
seScale), this.slider.addEventListener("input", (i4) =3D> {
+      this.prevent(i4), this.onSliderMove(i4);
+    });
+  }
+  loadCanvas(i3, t2, h2) {
+    this.canvas =3D i3, this.canvasContext =3D this.canvas.getContext("2d"=
), this.canvasWidth =3D this.canvas.width =3D t2 || this.canvas.offsetWidth=
, this.canvasHeight =3D this.canvas.height =3D h2 || this.canvas.offsetHeig=
ht, this.leadListeners();
+  }
+  loadImageFromUrl(i3, t2 =3D true, h2) {
+    if (!this.canvas)
+      throw Error("first call loadCanvas");
+    this.fit =3D t2, this.img =3D new Image(), this.img.onload =3D () =3D>=
 {
+      this.initPointerAndZoom(), this.imgHeight =3D this.img.naturalHeight=
, this.imgWidth =3D this.img.naturalWidth, this.onImageLoad(), h2 =3D=3D nu=
ll || h2();
+    }, this.img.src =3D i3;
+  }
+  getCanvas(i3) {
+    if (!this.img)
+      throw Error("please set an image");
+    const t2 =3D document.createElement("canvas");
+    return t2.width =3D this.canvasWidth * i3, t2.height =3D this.canvasHe=
ight * i3, t2.getContext("2d").drawImage(this.img, this.netPanningX * i3, t=
his.netPanningY * i3, this.imgWidth * i3, this.imgHeight * i3), t2;
+  }
+  getBlob(i3 =3D 1) {
+    return new Promise((t2) =3D> {
+      this.getCanvas(i3).toBlob((i4) =3D> {
+        t2(i4);
+      });
+    });
+  }
+  getDataUrl(i3 =3D 1) {
+    return this.getCanvas(i3).toDataURL();
+  }
+  download(i3 =3D 1) {
+    const t2 =3D document.createElement("a");
+    t2.download =3D "canvas.png", t2.href =3D this.getDataUrl(i3), t2.clic=
k();
+  }
+  getCropInfo() {
+    return {originalWidth: this.img.naturalWidth, originalHeight: this.img=
.naturalHeight, imgWidth: this.imgWidth, imgHeight: this.imgHeight, x: this=
.netPanningX, y: this.netPanningY};
+  }
+}
+const t =3D 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/halfmo=
on.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 =3D Element.prototype.msMatchesSelector || E=
lement.prototype.webkitMatchesSelector;
+}
+
+// Polyfill for Element.closest()
+if (!Element.prototype.closest) {
+    Element.prototype.closest =3D function(s) {
+        var el =3D this;
+        do {
+            if (el.matches(s)) return el;
+            el =3D el.parentElement || el.parentNode;
+        } while (el !=3D=3D null && el.nodeType =3D=3D=3D 1);
+        return null;
+    };
+}
+
+// Polyfill for Element.classList (http://purl.eligrey.com/github/classLis=
t.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=3D"class=
List",n=3D"prototype",i=3Dt.Element[n],s=3DObject,r=3DString[n].trim||funct=
ion(){return this.replace(/^\s+|\s+$/g,"")},o=3DArray[n].indexOf||function(=
t){for(var e=3D0,n=3Dthis.length;n>e;e++)if(e in this&&this[e]=3D=3D=3Dt)re=
turn e;return-1},c=3Dfunction(t,e){this.name=3Dt,this.code=3DDOMException[t=
],this.message=3De},a=3Dfunction(t,e){if(""=3D=3D=3De)throw new c("SYNTAX_E=
RR","The token must not be empty.");if(/\s/.test(e))throw new c("INVALID_CH=
ARACTER_ERR","The token must not contain space characters.");return o.call(=
t,e)},l=3Dfunction(t){for(var e=3Dr.call(t.getAttribute("class")||""),n=3De=
?e.split(/\s+/):[],i=3D0,s=3Dn.length;s>i;i++)this.push(n[i]);this._updateC=
lassName=3Dfunction(){t.setAttribute("class",this.toString())}},u=3Dl[n]=3D=
[],h=3Dfunction(){return new l(this)};if(c[n]=3DError[n],u.item=3Dfunction(=
t){return this[t]||null},u.contains=3Dfunction(t){return~a(this,t+"")},u.ad=
d=3Dfunction(){var t,e=3Darguments,n=3D0,i=3De.length,s=3D!1;do t=3De[n]+""=
,~a(this,t)||(this.push(t),s=3D!0);while(++n<i);s&&this._updateClassName()}=
,u.remove=3Dfunction(){var t,e,n=3Darguments,i=3D0,s=3Dn.length,r=3D!1;do f=
or(t=3Dn[i]+"",e=3Da(this,t);~e;)this.splice(e,1),r=3D!0,e=3Da(this,t);whil=
e(++i<s);r&&this._updateClassName()},u.toggle=3Dfunction(t,e){var n=3Dthis.=
contains(t),i=3Dn?e!=3D=3D!0&&"remove":e!=3D=3D!1&&"add";return i&&this[i](=
t),e=3D=3D=3D!0||e=3D=3D=3D!1?e:!n},u.replace=3Dfunction(t,e){var n=3Da(t+"=
");~n&&(this.splice(n,1,e),this._updateClassName())},u.toString=3Dfunction(=
){return this.join(" ")},s.defineProperty){var f=3D{get:h,enumerable:!0,con=
figurable:!0};try{s.defineProperty(i,e,f)}catch(p){void 0!=3D=3Dp.number&&-=
2146823252!=3D=3Dp.number||(f.enumerable=3D!1,s.defineProperty(i,e,f))}}els=
e s[n].__defineGetter__&&i.__defineGetter__(e,h)}}(self),function(){"use st=
rict";var t=3Ddocument.createElement("_");if(t.classList.add("c1","c2"),!t.=
classList.contains("c2")){var e=3Dfunction(t){var e=3DDOMTokenList.prototyp=
e[t];DOMTokenList.prototype[t]=3Dfunction(t){var n,i=3Darguments.length;for=
(n=3D0;i>n;n++)t=3Darguments[n],e.call(this,t)}};e("add"),e("remove")}if(t.=
classList.toggle("c3",!1),t.classList.contains("c3")){var n=3DDOMTokenList.=
prototype.toggle;DOMTokenList.prototype.toggle=3Dfunction(t,e){return 1 in =
arguments&&!this.contains(t)=3D=3D!e?e:n.call(this,t)}}"replace"in document=
.createElement("_").classList||(DOMTokenList.prototype.replace=3Dfunction(t=
,e){var n=3Dthis.toString().split(" "),i=3Dn.indexOf(t+"");~i&&(n=3Dn.slice=
(i),this.remove.apply(this,n),this.add(e),this.add.apply(this,n.slice(1)))}=
),t=3Dnull}());
+
+/* End polyfills */
+
+
+/* Halfmoon JS core */
+
+var halfmoon =3D {
+    // 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 =3D new Date();
+            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+            expires =3D "; expires=3D" + date.toGMTString();
+        }
+        else {
+            expires =3D "";
+        }
+        document.cookie =3D name + "=3D" + value + expires + "; path=3D/";
+    },
+
+    // Read cookie
+    readCookie: function(name) {
+        var nameEQ =3D name + "=3D";
+        var ca =3D document.cookie.split(";");
+        for(var i=3D0; i < ca.length; i++) {
+            var c =3D ca[i];
+            while (c.charAt(0) =3D=3D=3D " ") {
+                c =3D c.substring(1, c.length);
+            }
+            if (c.indexOf(nameEQ) =3D=3D=3D 0) {
+                return c.substring(nameEQ.length,c.length);
+            }
+        }
+        return null;
+    },
+
+    // Erase cookie
+    eraseCookie: function(name) {
+        this.createCookie(name, "", -1);
+    },
+
+    // Toggle light/dark mode=20
+    toggleDarkMode: function() {
+        if (document.body.classList.contains("dark-mode")) {
+            document.body.classList.remove("dark-mode");
+            this.darkModeOn =3D false;
+            this.createCookie("halfmoon_preferredMode", "light-mode", 365);
+        } else {
+            document.body.classList.add("dark-mode");
+            this.darkModeOn =3D 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", "hidd=
en");
+            }
+        }
+    },
+
+    // Deactivate all the dropdown toggles when another one is active
+    deactivateAllDropdownToggles: function() {
+        var activeDropdownToggles =3D document.querySelectorAll("[data-tog=
gle=3D'dropdown'].active");
+        for (var i =3D 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 =3D 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 =3D "";
+        var characters =3D "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrst=
uvwxyz0123456789";
+        var charactersLength =3D characters.length;
+        for ( var i =3D 0; i < length; i++ ) {
+            result +=3D characters.charAt(Math.floor(Math.random() * chara=
ctersLength));
+        }
+        return result;
+    },
+
+    // Toast an alert (show, fade, dispose)
+    toastAlert: function(alertId, timeShown) {
+        var alertElement =3D document.getElementById(alertId);
+
+        // Setting the default timeShown
+        if (timeShown =3D=3D=3D undefined) {
+            timeShown =3D 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 =3D timeShown + 250;
+            setTimeout(function() {
+                alertElement.classList.add("fade");
+            }, timeToFade);
+
+            // Wait some more time (timeToFade + 500) and dispose the aler=
t (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 toa=
sted again)
+            var timeToDestroy =3D 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 =3D ("content" in param) ? param.content: "";
+        var title =3D ("title" in param) ? param.title: "";
+        var alertType =3D ("alertType" in param) ? param.alertType: "";
+        var fillType =3D ("fillType" in param) ? param.fillType: "";
+        var hasDismissButton =3D ("hasDismissButton" in param) ? param.has=
DismissButton: true;
+        var timeShown =3D ("timeShown" in param) ? param.timeShown: 5000;
+
+        // Create the alert element
+        var alertElement =3D document.createElement("div");
+
+        // Set ID to the alert element
+        alertElement.setAttribute("id", this.makeId(6));
+
+        // Add the title
+        if (title) {
+            content =3D "<h4 class=3D'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 =3D "<button class=3D'close' data-dismiss=3D'alert' ty=
pe=3D'button' aria-label=3D'Close'><span aria-hidden=3D'true'>&times;</span=
></button>" + content;
+        }
+
+        // Add the content to the alert element
+        alertElement.innerHTML =3D content;
+
+        // Append the alert element to the sticky alerts
+        this.stickyAlerts.insertBefore(alertElement, this.stickyAlerts.chi=
ldNodes[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 =3D document.getElementsByClassName("page-wra=
pper")[0];
+    }
+    if (!halfmoon.stickyAlerts) {
+        halfmoon.stickyAlerts =3D 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") =3D=3D "dark-mod=
e") {
+            halfmoon.darkModeOn =3D true;
+        } else {
+            halfmoon.darkModeOn =3D false;
+        }
+    } else {
+        // 2. If cookie does not exist, next preference is for the dark mo=
de setting
+        if (window.matchMedia && window.matchMedia("(prefers-color-scheme:=
 dark)").matches) {
+            halfmoon.darkModeOn =3D true;
+        } else {
+            // 3. If all else fails, re-initialize the dark mode preferenc=
e depending on the .dark-mode class
+            if (document.body.classList.contains("dark-mode")) {
+                halfmoon.darkModeOn =3D true;
+            } else {
+                halfmoon.darkModeOn =3D false;
+            }
+        }
+    }
+
+    // Automatically set preferred theme
+    // But only if one of the data-attribute is provided
+    if (document.body.getAttribute("data-set-preferred-mode-onload") || do=
cument.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-attribut=
e provided)
+    // Or on larger screens when sidebar type is overlayed-all
+    if (document.documentElement.clientWidth <=3D 768) {
+        if (halfmoon.pageWrapper) {
+            if (!halfmoon.pageWrapper.getAttribute("data-show-sidebar-onlo=
ad-sm-and-down")) {
+                halfmoon.pageWrapper.setAttribute("data-sidebar-hidden", "=
hidden");
+            }
+        }
+    } else {
+        if (halfmoon.pageWrapper) {
+            if (halfmoon.pageWrapper.getAttribute("data-sidebar-type") =3D=
=3D=3D "overlayed-all") {
+                halfmoon.pageWrapper.setAttribute("data-sidebar-hidden", "=
hidden");
+            }
+        }
+    }
+
+    // Adding the click event listener
+    document.addEventListener(
+        "click",
+        function(event) {
+            var eventCopy =3D event;
+            var target =3D event.target;
+
+            // Handle clicks on dropdown toggles
+            if (target.matches("[data-toggle=3D'dropdown']") || target.mat=
ches("[data-toggle=3D'dropdown'] *")) {
+                if (target.matches("[data-toggle=3D'dropdown'] *")) {
+                    target =3D target.closest("[data-toggle=3D'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=3D'alert']") || targe=
t.matches(".alert [data-dismiss=3D'alert'] *")) {
+                if (target.matches(".alert [data-dismiss=3D'alert'] *")) {
+                    target =3D target.closest(".alert [data-dismiss=3D'ale=
rt']");
+                }
+                target.parentNode.classList.add("dispose");
+            }
+
+            // Handle clicks on modal toggles
+            if (target.matches("[data-toggle=3D'modal']") || target.matche=
s("[data-toggle=3D'modal'] *")) {
+                if (target.matches("[data-toggle=3D'modal'] *")) {
+                    target =3D target.closest("[data-toggle=3D'modal']");
+                }
+                var targetModal =3D document.getElementById(target.getAttr=
ibute("data-target"));
+                if (targetModal) {
+                    if (targetModal.classList.contains("modal")) {
+                        halfmoon.toggleModal(target.getAttribute("data-tar=
get"));
+                    }
+                }
+            }
+
+            // Handle clicks on modal dismiss buttons
+            if (target.matches(".modal [data-dismiss=3D'modal']") || targe=
t.matches(".modal [data-dismiss=3D'modal'] *")) {
+                if (target.matches(".modal [data-dismiss=3D'modal'] *")) {
+                    target =3D target.closest(".modal [data-dismiss=3D'mod=
al']");
+                }
+                target.closest(".modal").classList.remove("show");
+            }
+
+            // Handle clicks on modal overlays
+            if (target.matches(".modal-dialog")) {
+                var parentModal =3D target.closest(".modal");
+
+                if (!parentModal.getAttribute("data-overlay-dismissal-disa=
bled")) {
+                    if (parentModal.classList.contains("show")) {
+                        parentModal.classList.remove("show");
+                    } else {
+                        window.location.hash =3D "#";
+                    }
+                }
+            }
+
+            // Call the click handler method to handle any logic set by th=
e user in their projects to handle clicks
+            halfmoon.clickHandler(eventCopy);
+        },=20
+        false
+    );
+
+    // Adding the key down event listener (for shortcuts and accessibility)
+    document.addEventListener(
+        "keydown",
+        function(event) {
+            var eventCopy =3D event;
+
+            // Shortcuts are triggered only if no input, textarea, or sele=
ct 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.queryS=
elector("textarea:focus") || document.querySelector("select:focus"))) {
+                event =3D 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 =3D=3D 83) {
+                            // Variable to store whether a modal is open o=
r not
+                            var modalOpen =3D false;
+
+                            // Hash exists, so we check if it belongs to a=
 modal
+                            if (window.location.hash) {
+                                var hash =3D window.location.hash.substrin=
g(1);
+                                var elem =3D document.getElementById(hash);
+                                if (elem) {
+                                    if (elem.classList.contains("modal")) {
+                                        modalOpen =3D true;
+                                    }
+                                }
+                            }
+                            // Check for a modal with the .show class
+                            if (document.querySelector(".modal.show")) {
+                                modalOpen =3D 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-enabl=
ed")) {
+                        if (event.shiftKey && event.which =3D=3D 68) {
+                            halfmoon.toggleDarkMode();
+                            event.preventDefault();
+                        }
+                    }
+                }
+            }
+
+            // Handling other keydown events
+            if (event.which =3D=3D=3D 27) {
+                // Close dropdown menu (if one is open) when [esc] key is =
pressed
+                if (document.querySelector("[data-toggle=3D'dropdown'].act=
ive")) {
+                    var elem =3D document.querySelector("[data-toggle=3D'd=
ropdown'].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 ca=
n 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 =3D window.location.hash.substring(1);
+                        var elem =3D document.getElementById(hash);
+                        if (elem) {
+                            if (elem.classList.contains("modal")) {
+                                if (!elem.getAttribute("data-esc-dismissal=
-disabled")) {
+                                    window.location.hash =3D "#";
+                                    event.preventDefault();
+                                }
+                            }
+                        }
+                    }
+                    // Check for a modal with the .show class
+                    if (document.querySelector(".modal.show")) {
+                        var elem =3D document.querySelector(".modal.show");
+                        if (!elem.getAttribute("data-esc-dismissal-disable=
d")) {
+                            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 =3D document.querySelectorAll(".custom-fi=
le input");
+    for (var i =3D 0; i < halfmoonCustomFileInputs.length; i++) {
+        var customFile =3D halfmoonCustomFileInputs[i];
+        // Create file name container element, add the class name, and set=
 default value
+        // Append it to the custom file element
+        var fileNamesContainer =3D document.createElement("div");
+        fileNamesContainer.classList.add("file-names");
+        var dataDefaultValue =3D customFile.getAttribute("data-default-val=
ue");
+        if (dataDefaultValue) {
+            fileNamesContainer.innerHTML =3D dataDefaultValue;
+        } else {
+            fileNamesContainer.innerHTML =3D "No file chosen";
+        }
+        customFile.parentNode.appendChild(fileNamesContainer);
+
+        // Add the event listener that will update the contents of the fil=
e name container element on change
+        customFile.addEventListener(
+            "change",
+            function(event) {
+                fileNamesContainer =3D event.target.parentNode.querySelect=
or(".file-names");
+                if (event.target.files.length =3D=3D=3D 1) {
+                    fileNamesContainer.innerHTML =3D event.target.files[0]=
.name;
+                } else if (event.target.files.length > 1) {
+                    fileNamesContainer.innerHTML =3D event.target.files.le=
ngth + " files";
+                } else {
+                    fileNamesContainer.innerHTML =3D "No file chosen";
+                }
+            }
+        );
+    }
+
+    // Adding the .with-transitions class to the page-wrapper so that tran=
sitions 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>
-	<?=3D isset($opt["title"]) ? "<title>".e($opt["title"])."</title>" : ""; =
?>
-	<?php require __DIR__."/head.php"; ?>
+	<?=3D 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"; ?>
-	<?=3D $content ?>
-	<?php require __DIR__."/footer.php"; ?>
+
+<body class=3D"dark-mode with-custom-webkit-scrollbars with-custom-css-scr=
ollbars" data-sidebar-shortcut-enabled=3D"true" data-dm-shortcut-enabled=3D=
"true" data-set-preferred-mode-onload=3D"true">
+	<?php require __DIR__ . "/modal.php"; ?>
+	<div class=3D"page-wrapper <?php if (isset($_SESSION["user_id"])) : ?>wit=
h-sidebar with-navbar<?php endif; ?> with-transision" id=3D"page-wrapper" d=
ata-sidebar-type=3D"overlayed-sm-and-down">
+		<?php if (isset($_SESSION["user_id"])) : ?>
+			<?php require __DIR__ . "/sidebar.php"; ?>
+
+			<?php require __DIR__ . "/navbar.php"; ?>
+		<?php endif; ?>
+		<div class=3D"sticky-alerts"></div>
+		<div class=3D"content-wrapper css-scrollbar-transparent-track">
+			<div class=3D"container-lg">
+				<div class=3D"">
+					<?=3D $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=3D"stylesheet" type=3D"text/css" href=3D"<?=3D e(asset("css/comm=
on.css")); ?>"/>
+<link rel=3D"stylesheet" type=3D"text/css" href=3D"<?=3D e(asset("css/comm=
on.css")); ?>" />
+<link rel=3D"stylesheet" type=3D"text/css" href=3D"<?=3D e(asset("css/dash=
board.css")); ?>" />
+<link rel=3D"stylesheet" type=3D"text/css" href=3D"<?=3D e(asset("css/half=
moon.css")); ?>" />
 <script type=3D"text/javascript" src=3D"<?=3D e(asset("js/common.js")); ?>=
"></script>
+<script type=3D"text/javascript" src=3D"<?=3D e(asset("js/halfmoon.js")); =
?>"></script>
+<script type=3D"module" src=3D"<?=3D e(asset("js/cropo.js")); ?>"></script>
 <script type=3D"text/javascript" src=3D"<?=3D e(asset("js/router.js")); ?>=
"></script>
-<meta name=3D"viewport" content=3D"width=3Ddevice-width, initial-scale=3D1=
.0"/>
-<meta name=3D"theme-color" content=3D"#000000"/>
+<meta name=3D"viewport" content=3D"width=3Ddevice-width, initial-scale=3D1=
.0" />
+<meta name=3D"theme-color" content=3D"#000000" />
+<script type=3D"text/javascript">
+  if (halfmoon.getPreferredMode() =3D=3D "light-mode") {
+    // Light mode is preferred
+  } else if (halfmoon.getPreferredMode() =3D=3D "dark-mode") {
+    // Dark mode is preferred
+  } else if (halfmoon.getPreferredMode() =3D=3D "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=3D"modal" id=3D"modal-success" tabindex=3D"-1" role=3D"dialog" =
data-overlay-dismissal-disabled=3D"true" data-esc-dismissal-disabled=3D"tru=
e">
+    <div class=3D"modal-dialog" role=3D"document">
+        <div class=3D"modal-content">
+            <h5 class=3D"modal-title">Success Update Profile</h5>
+            <div class=3D"text-right mt-20">
+                <a class=3D"btn btn-primary" href=3D"profile.php?ref=3Dset=
tings">OK</a>
+            </div>
+        </div>
+    </div>
+</div>
+<div class=3D"modal" id=3D"modal-error" tabindex=3D"-1" role=3D"dialog">
+    <div class=3D"modal-dialog" role=3D"document">
+        <div class=3D"modal-content bg-danger">
+            <h5 class=3D"modal-title">Error Wrong Password</h5>
+            <div class=3D"text-right mt-20">
+                <a href=3D"#" class=3D"btn mr-5" role=3D"button">Close</a>
+            </div>
+        </div>
+    </div>
+</div>
+<div class=3D"modal" id=3D"modal-profile" tabindex=3D"-1" role=3D"dialog">
+    <div class=3D"modal-dialog" role=3D"document">
+        <div class=3D"modal-content ">
+            <h5 class=3D"modal-title">Update Images</h5>
+            <canvas style=3D"touch-action: none; cursor: move;" id=3D"phot=
o_canvas"></canvas>
+            <input type=3D"range" min=3D"1" max=3D"5" value=3D"1" step=3D"=
0.01" id=3D"photo_range" style=3D"display: none;" />
+            <input type=3D"file" id=3D"photo" name=3D"photo" accept=3D".jp=
g,.png,.gif,.jpeg" />
+            <div class=3D"text-right mt-20">
+                <button type=3D"button" onclick=3D"apply_photo();" data-di=
smiss=3D"modal-profile" class=3D"btn">Apply photo</button>
+                <button class=3D"btn" data-dismiss=3D"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=3D"navbar">
-	<a href=3D"home.php"><button>Home</button></a>
-	<a href=3D"profile.php"><button>Profile</button></a>
-	<a href=3D"settings.php"><button>Settings</button></a>
-	<a href=3D"audit_log.php"><button>Audit Log</button></a>
-	<a href=3D"logout.php"><button>Logout</button></a>
-</div>
-<?php endif; ?>
+<?php
+const MENU_NAVBAR =3D [
+	"home"      =3D> "Home",
+	"profile" =3D> "Profile",
+	"settings"  =3D> "Settings"
+];
+
+?>
+<?php if (isset($_SESSION["user_id"])) : ?>
+	<div class=3D"navbar position-absolute z-10 top-0">
+		<div class=3D"navbar-content mr-5">
+			<button id=3D"toggle-sidebar-btn" class=3D"btn btn-action" type=3D"butt=
on" onclick=3D"halfmoon.toggleSidebar()">
+				<svg xmlns=3D"http://www.w3.org/2000/svg" width=3D"16" height=3D"16" f=
ill=3D"currentColor" class=3D"bi bi-chevron-bar-left" viewBox=3D"0 0 16 16">
+					<path fill-rule=3D"evenodd" d=3D"M11.854 3.646a.5.5 0 0 1 0 .708L8.20=
7 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=3D"form-inline w-full ml-auto" action=3D"..." method=3D"...">
+			<div class=3D"input-group">
+				<input type=3D"text" class=3D"form-control" placeholder=3D"Search" req=
uired=3D"required">
+				<div class=3D"input-group-append">
+					<button class=3D"btn" type=3D"submit">
+						<i class=3D"fa fa-search" aria-hidden=3D"true"></i>
+						<span class=3D"sr-only">Search</span>
+					</button>
+				</div>
+			</div>
+		</form>
+		<div class=3D"navbar-content mt-5 ml-5">
+			<div class=3D"dropdown with-arrow">
+				<a style=3D"cursor:pointer;" data-toggle=3D"dropdown" type=3D"button" =
id=3D"navbar-dropdown-toggle-btn-1">
+					<img class=3D"user-dropdown img-fluid rounded-circle" src=3D"<?=3D e(=
$u["photo_path"]); ?>" alt=3D"<?=3D e($u["full_name"]); ?> Images" />
+				</a>
+				<div class=3D"dropdown-menu dropdown-menu-right w-200" aria-labelledby=
=3D"navbar-dropdown-toggle-btn-1">
+					<?php foreach (MENU_NAVBAR as $k =3D> $m) : ?>
+						<a href=3D"<?=3D e($k); ?>.php" class=3D"dropdown-item <?=3D ($g_act=
ive =3D=3D $k) ? " text-primary" : ""; ?>"><?=3D e($m); ?></a>
+					<?php endforeach; ?>
+					<div class=3D"dropdown-divider"></div>
+					<div class=3D"dropdown-content">
+						<button onclick=3D"halfmoon.toggleDarkMode()" class=3D"btn mb-5 btn-=
block">
+							<span class=3D"hidden-lm">
+								<svg xmlns=3D"http://www.w3.org/2000/svg" width=3D"16" height=3D"1=
6" fill=3D"currentColor" class=3D"bi bi-moon-stars-fill" viewBox=3D"0 0 16 =
16">
+									<path d=3D"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=3D"M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.51=
8.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.73=
4 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.7=
34 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.73=
4 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.15=
6 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=3D"hidden-dm">
+								<svg xmlns=3D"http://www.w3.org/2000/svg" width=3D"16" height=3D"1=
6" fill=3D"currentColor" class=3D"bi bi-sun-fill" viewBox=3D"0 0 16 16">
+									<path d=3D"M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5=
v2a.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.5=
zM3 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=3D"logout.php" class=3D"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/sideba=
r.php
new file mode 100644
index 0000000..567adfd
--- /dev/null
+++ b/web/views/components/sidebar.php
@@ -0,0 +1,20 @@
+<?php
+
+const MENU_SIDEBAR =3D [
+    "home"      =3D> "Home",
+    "audit_log" =3D> "Audit Log",
+    "settings"  =3D> "Settings"
+];
+
+?><div class=3D"sidebar-overlay" onclick=3D"halfmoon.toggleSidebar()"></di=
v>
+<div class=3D"sidebar bg-very-dark-dm">
+  <div class=3D"sidebar-menu">
+    <a href=3D"#" class=3D"sidebar-brand">
+      GWSpamD
+    </a>
+    <div class=3D"sidebar-divider"></div>
+    <?php foreach (MENU_SIDEBAR as $k =3D> $m): ?>
+      <a href=3D"<?=3D e($k); ?>.php" class=3D"sidebar-link<?=3D ($g_activ=
e =3D=3D $k) ? " active" : ""; ?>"><?=3D 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"] =3D "Audit Log";
 load_api("audit_log");
=20
-function build_extra_edit_profile($extra)
-{
-	$e =3D json_decode($extra, true);
-	ob_start();
-	?>
-		Username: <?=3D e($e["username"]); ?><br>
-		First name: <?=3D e($e["first_name"]); ?><br>
-		Last name: <?=3D e($e["last_name"]); ?><br>
-		Email: <?=3D e($e["email"]); ?><br>
-		Photo: <?=3D e($e["photo_id"] ?? "(unchanged)"); ?><br>
-	<?php
-	return ob_get_clean();
-}
-
-function build_extra_ipua($extra)
-{
-	$e =3D json_decode($extra, true);
-	ob_start();
-	?>
-		IP: <?=3D e($e["ip"]); ?><br>
-		User Agent: <?=3D 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 =3D (int)$_GET["page"];
 } else {
@@ -60,66 +19,38 @@ $nr_pages =3D get_audit_log_page_num($u["id"], $limit);
=20
 ob_start();
 ?>
-<div class=3D"paginator">
-	<?php for ($i =3D 1; $i <=3D $nr_pages; $i++): ?>
-		<div><a href=3D"?page=3D<?=3D $i; ?>"><?=3D $i; ?></a></div>
-	<?php endfor; ?>
-</div>
+
+<nav aria-label=3D"Pagination Log">
+	<ul class=3D"pagination text-center m-5">
+		<?php for ($i =3D 1; $i <=3D $nr_pages; $i++) : ?>
+			<li class=3D"page-item<?=3D ($page =3D=3D $i) ? " active" : ""; ?>">
+				<a href=3D"?page=3D<?=3D $i; ?>" class=3D"page-link"><?=3D $i; ?></a>
+			</li>
+		<?php endfor; ?>
+	</ul>
+</nav>
 <?php
 $paginator =3D ob_get_clean();
=20
=20
 ?>
-<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=3D"audit-log-main">
-<h1>Audit Log</h1>
-<?=3D $paginator; ?>
-<table class=3D"audit-log-table" border=3D"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><?=3D e($row["id"]); ?></td>
-			<td><?=3D e($row["action"]); ?></td>
-			<td align=3D"left"><?=3D build_extra_data($row["action"], $row["extra"]=
); ?></td>
-			<td><?=3D e($row["created_at"]); ?></td>
-		</tr>
+<div class=3D"card">
+	<h1 class=3D"card-title">Audit Log</h1>
+	<?=3D $paginator; ?>
+	<style>
+
+	</style>
+	<ol class=3D"activity-feed">
+		<?php foreach ($st->fetchAll() as $row) : ?>
+			<li class=3D"feed-item">
+				<time class=3D"date" datetime=3D"<?=3D e($row["created_at"]); ?>"><?=
=3D e($row["created_at"]); ?></time>
+				<span class=3D"text"><?=3D e($row["action"]); ?></span>
+				<br>
+				<span class=3D"text">
+					<?=3D build_extra_data($row["action"], $row["extra"]); ?>
+				</span>
+			</li>
 		<?php endforeach; ?>
-	</tbody>
-</table>
-<?=3D $paginator; ?>
-</div>
+	</ol>
+	<?=3D $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"] =3D "GWSpamD";
+load_api("audit_log");
+
+if (isset($_GET["page"])) {
+    $page =3D (int)$_GET["page"];
+} else {
+    $page =3D 1;
+}
+
+if ($page <=3D 0)
+    $page =3D 1;
+
+$limit =3D 5;
+$offset =3D ($page - 1) * $limit;
+
+$st =3D get_audit_log_st($u["id"], $limit, $offset);
+$nr_pages =3D get_audit_log_page_num($u["id"], $limit);
+
+ob_start();
 ?>
-<link rel=3D"stylesheet" href=3D"<?=3D e(asset("css/home.css")); ?>">
-<div id=3D"main-box">
-	<h1>Welcome <?=3D e($u["first_name"]); ?></h1>
-</div>
+
+<div class=3D"container-fluid">
+    <div class=3D"content">
+        <h1 class=3D"content-title font-size-22">
+            Welcome <?=3D e($u["first_name"]); ?>
+        </h1>
+        <div class=3D"fake-content"></div>
+        <div class=3D"fake-content"></div>
+    </div>
+    <div class=3D"row card bg-light-lm bg-dark-light-dm row-eq-spacing">
+        <div class=3D"col-6 col-xl-3">
+            <div class=3D"card">
+                <h2 class=3D"card-title">
+                    Orders
+                </h2>
+                <div class=3D"fake-content"></div>
+                <div class=3D"fake-content w-50 mw-full bg-primary"></div>
+            </div>
+        </div>
+        <div class=3D"col-6 col-xl-3">
+            <div class=3D"card">
+                <h2 class=3D"card-title">
+                    Sales
+                </h2>
+                <div class=3D"fake-content"></div>
+                <div class=3D"fake-content w-50 mw-full bg-primary"></div>
+            </div>
+        </div>
+        <div class=3D"v-spacer d-xl-none"></div>
+        <div class=3D"col-6 col-xl-3">
+            <div class=3D"card">
+                <h2 class=3D"card-title">
+                    Costs
+                </h2>
+                <div class=3D"fake-content"></div>
+                <div class=3D"fake-content w-50 mw-full bg-primary"></div>
+            </div>
+        </div>
+        <div class=3D"col-6 col-xl-3">
+            <div class=3D"card">
+                <h2 class=3D"card-title">
+                    Profits
+                </h2>
+                <div class=3D"fake-content"></div>
+                <div class=3D"fake-content w-50 mw-full bg-primary"></div>
+            </div>
+        </div>
+    </div>
+    <div class=3D"row row-eq-spacing-lg">
+        <div class=3D"col-lg-8">
+            <div class=3D"card h-lg-250 overflow-y-lg-auto">
+                <h2 class=3D"card-title">
+                    Customers
+                </h2>
+                <div class=3D"fake-content mb-20"></div>
+                <div class=3D"fake-content mb-20"></div>
+                <div class=3D"fake-content bg-primary mb-20"></div>
+                <div class=3D"fake-content mb-20"></div>
+                <div class=3D"fake-content mb-20"></div>
+                <div class=3D"fake-content mb-20"></div>
+                <div class=3D"fake-content mb-10"></div>
+            </div>
+        </div>
+        <div class=3D"col-lg-4">
+            <div class=3D"card h-lg-250 overflow-y-lg-auto">
+                <h2 class=3D"card-title">
+                    Breakdown
+                </h2>
+                <div class=3D"fake-content w-50 mw-full bg-primary d-inlin=
e-block"></div>
+                <div class=3D"fake-content w-50 mw-full bg-danger d-inline=
-block"></div>
+                <div class=3D"fake-content h-150 w-150 h-lg-100 w-lg-100 m=
-auto rounded-circle mt-10"></div>
+                <br class=3D"hidden-lg-and-up">
+            </div>
+        </div>
+    </div>
+    <div class=3D"row row-eq-spacing-lg">
+        <div class=3D"col-lg-8">
+            <div class=3D"content">
+                <h2 class=3D"content-title">
+                    Customer stories
+                    <a href=3D"#">#</a>
+                </h2>
+                <div class=3D"fake-content"></div>
+                <div class=3D"fake-content"></div>
+                <div class=3D"fake-content w-100"></div>
+            </div>
+            <div class=3D"card">
+                <h2 class=3D"card-title">
+                    Transactions
+                </h2>
+                <div class=3D"fake-content"></div>
+                <div class=3D"fake-content"></div>
+                <div class=3D"fake-content"></div>
+                <div class=3D"fake-content"></div>
+                <div class=3D"fake-content w-50 mw-full bg-primary mb-10">=
</div>
+            </div>
+            <div class=3D"content">
+                <div class=3D"fake-content"></div>
+                <div class=3D"fake-content w-150"></div>
+            </div>
+        </div>
+        <div class=3D"col-lg-4">
+            <div class=3D"content">
+                <h2 class=3D"content-title">
+                    Activity log
+                    <a href=3D"#">#</a>
+                </h2>
+                <table class=3D"table">
+                    <?php foreach ($st->fetchAll() as $row) : ?>
+                        <tr>
+                            <td><?=3D e($row["id"]); ?></td>
+                            <td><?=3D e($row["action"]); ?></td>
+                            <!-- <td align=3D"left"><?=3D build_extra_data=
($row["action"], $row["extra"]); ?></td> -->
+                            <td><?=3D e($row["created_at"]); ?></td>
+                        </tr>
+                    <?php endforeach; ?>
+
+                </table>
+                <a href=3D"audit_log.php" class=3D"btn btn-action btn-prim=
ary">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"] =3D "Login GWSpamD";
 ?>
-<link rel=3D"stylesheet" type=3D"text/css" href=3D"<?=3D e(asset("css/logi=
n.css")); ?>">
-<div id=3D"login-box">
+<div class=3D"card w-full" id=3D"login-box">
 <h1>Login Page</h1>
-<form method=3D"POST" action=3D"javascript:void(0);" id=3D"login-form">
-	<div>
-		<div class=3D"input-label"><label for=3D"username">Username</label></div>
-		<div class=3D"input-field">
-			<input type=3D"text" name=3D"username" placeholder=3D"Username" require=
d/>
-		</div>
-	</div>
-	<div>
-		<div class=3D"input-label"><label for=3D"password">Password</label></div>
-		<div class=3D"input-field">
-			<input type=3D"password" name=3D"password" placeholder=3D"Password" req=
uired/>
-			<input type=3D"hidden" name=3D"use_cookie" value=3D"1"/>
-		</div>
-	</div>
-	<div><button type=3D"submit" id=3D"login-button">Login</button></div>
+<form class=3D"form-inline  mw-full" method=3D"POST" action=3D"javascript:=
void(0);" id=3D"login-form">
+	<div class=3D"form-group">
+	<label class=3D"required w-100" for=3D"username">Username</label> <!-- w-=
100 =3D width: 10rem (100px) -->
+	<input type=3D"text" class=3D"form-control" name=3D"username" placeholder=
=3D"Username" required=3D"required"/>
+</div>
+<div class=3D"form-group">
+	<label class=3D"required w-100" for=3D"password">Password</label> <!-- w-=
100 =3D width: 10rem (100px) -->
+	<input type=3D"password" class=3D"form-control pass" name=3D"password" pl=
aceholder=3D"Password" required=3D"required"/>
+	<input class=3D"d-none" type=3D"hidden" name=3D"use_cookie" value=3D"1"/>
+</div>
+<div class=3D"form-group">
+	<input type=3D"submit" id=3D"login-button" class=3D"btn btn-primary ml-au=
to" value=3D"Login">
+</div>
 </form>
 </div>
 <script type=3D"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"] =3D $u["full_name"];
=20
 ?>
+<div class=3D"mw-full text-center">
+	<img id=3D"user-photo" class=3D"img-fluid rounded-circle" src=3D"<?=3D e(=
$u["photo_path"]); ?>" alt=3D"<?=3D e($u["full_name"]); ?> Images">
+	<div class=3D"content">
+		<h1 class=3D"font-weight-bolder"><?=3D $u["full_name"]; ?></h1>
+		<a href=3D"settings.php?section=3Dprofile" class=3D"btn btn-action m-5">=
Edit Profile</a>
=20
-<link rel=3D"stylesheet" href=3D"<?=3D e(asset("css/profile.css")); ?>"/>
-<div id=3D"main-box">
-	<h1><?=3D e($u["full_name"]); ?></h1>
-	<img id=3D"user-photo" src=3D"<?=3D e($u["photo_path"]); ?>" alt=3D"<?=3D=
 e($u["full_name"]); ?>"/>
-	<div class=3D"edit-profile-link"><a href=3D"settings.php?section=3Dprofil=
e">Edit profile</a></div>
-	<table id=3D"user-info">
-		<tr><th align=3D"center" colspan=3D"3"><div>Profile Info</div></th></tr>
-		<tr><td>User ID</td><td>:</td><td><?=3D e($u["id"]); ?></td></tr>
-		<tr><td>First Name</td><td>:</td><td><?=3D e($u["first_name"]); ?></td><=
/tr>
-		<tr><td>Last Name</td><td>:</td><td><?=3D e($u["last_name"]); ?></td></t=
r>
-		<tr><td>Username</td><td>:</td><td><?=3D e($u["username"]); ?></td></tr>
-		<tr><td>Email</td><td>:</td><td><?=3D e($u["email"]); ?></td></tr>
-	</table>
-</div>
+		<table class=3D"table table-striped">
+			<tbody>
+				<tr>
+					<th>User ID</th>
+					<td><?=3D e($u["id"]); ?></td>
+				</tr>
+				<tr>
+					<th>First Name</th>
+					<td><?=3D e($u["first_name"]); ?></td>
+				</tr>
+				<tr>
+					<th>Last Name</th>
+					<td><?=3D e($u["last_name"]); ?></td>
+				</tr>
+				<tr>
+					<th>User Name</th>
+					<td><?=3D e($u["username"]); ?></td>
+				</tr>
+				<tr>
+					<th>Email</th>
+					<td><?=3D 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 =3D [
 ];
=20
 if (isset(SECTIONS[$section])) {
-	$opt["title"] =3D "Settings | ".SECTIONS[$section];
+	$opt["title"] =3D "Settings | " . SECTIONS[$section];
 } else {
 	$opt["title"] =3D "Settings";
 }
=20
 ?>
=20
-<link rel=3D"stylesheet" href=3D"<?=3D e(asset("css/settings.css")); ?>"/>
=20
 <script>
 	function toggle_all_inputs(enable) {
 		let inputs =3D document.querySelectorAll("input[type=3Dtext], input[type=
=3Demail], input[type=3Dpassword]");
 		for (let i =3D 0; i < inputs.length; i++) {
 			inputs[i].readOnly =3D !enable;
-			inputs[i].style["background-color"] =3D (enable ? "white" : "#eee");
+			if (!enable)
+				inputs[i].classList.add("disabled");
+				// inputs[i].style["background-color"] =3D "#eee";
+			else
+				inputs[i].classList.remove("disabled");
 		}
 	}
 </script>
=20
-<div id=3D"main-box">
-	<h1>Settings</h1>
+<div id=3D"main-box" class=3D"content">
+	<h1 class=3D"content-title">Settings</h1>
 	<div id=3D"back-to-menu-box" style=3D"display:none;">
-		<a onclick=3D"load_section_url('default', event);" href=3D"?">Back to se=
ttings</a>
+		<a class=3D"btn btn-action" onclick=3D"load_section_url('default', event=
);" href=3D"?">Back to settings</a>
 	</div>
 	<table style=3D"display:none;" id=3D"set-default">
-	<?php foreach (SECTIONS as $sec =3D> $title): ?>
-		<tr><td><a onclick=3D"load_section_url('<?=3D $sec; ?>', event);" href=
=3D"?section=3D<?=3D e($sec); ?>"><?=3D e($title); ?></a></td></tr>
-	<?php endforeach; ?>
+		<?php foreach (SECTIONS as $sec =3D> $title) : ?>
+			<tr>
+				<td>
+					<a class=3D"btn btn-action mt-5" onclick=3D"load_section_url('<?=3D $=
sec; ?>', event);" href=3D"?section=3D<?=3D e($sec); ?>"><?=3D e($title); ?=
></a>
+				</td>
+			</tr>
+		<?php endforeach; ?>
 	</table>
-	<?php foreach (SECTIONS as $key =3D> $title): ?>
+	<?php foreach (SECTIONS as $key =3D> $title) : ?>
 		<div class=3D"setting-box" style=3D"display:none;" id=3D"set-<?=3D e($ke=
y); ?>">
-		<?php require __DIR__."/settings/{$key}.php"; ?>
+			<?php require __DIR__ . "/settings/{$key}.php"; ?>
 		</div>
 	<?php endforeach; ?>
 </div>
@@ -66,4 +73,4 @@ if (isset(SECTIONS[$section])) {
 	}
=20
 	load_section("<?=3D 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/settin=
gs/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=3D"content">
+	<div class=3D"mw-full d-flex justify-content-center">
+		<form action=3D"api.php?action=3Dsettings&amp;section=3Dpassword" method=
=3D"POST" id=3D"change-pass-form" class=3D"w-400 mw-full form-inline">
+			<table id=3D"user-info" class=3D"table">
+				<tr>
+					<th>
+						<div>Change Password</div>
+					</th>
+				</tr>
+				<tr>
+					<td>Current Password</td>
=20
-<form action=3D"api.php?action=3Dsettings&amp;section=3Dpassword" method=
=3D"POST" id=3D"change-pass-form">
-	<table id=3D"user-info">
-		<tr><th align=3D"center" colspan=3D"3"><div>Change Password</div></th></=
tr>
-		<tr><td>Current Password</td><td>:</td><td><input type=3D"password" name=
=3D"current_password" placeholder=3D"Current Password" required/></td></tr>
-		<tr><td>New Password</td><td>:</td><td><input type=3D"password" name=3D"=
new_password" placeholder=3D"New Password" required/></td></tr>
-		<tr><td>Confirm New Password</td><td>:</td><td><input type=3D"password" =
name=3D"confirm_new_password" placeholder=3D"Confirm New Password" required=
/></td></tr>
-		<tr><td align=3D"center" colspan=3D"3"><button type=3D"submit" style=3D"=
margin-top: 20px;">Save</button></td></tr>
-	</table>
-</form>
+					<td><input type=3D"password" class=3D"form-control" name=3D"current_p=
assword" placeholder=3D"Current Password" required /></td>
+				</tr>
+				<tr>
+					<td>New Password</td>
+
+					<td><input type=3D"password" class=3D"form-control" name=3D"new_passw=
ord" placeholder=3D"New Password" required /></td>
+				</tr>
+				<tr>
+					<td>Confirm New Password</td>
+
+					<td><input type=3D"password" class=3D"form-control" name=3D"confirm_n=
ew_password" placeholder=3D"Confirm New Password" required /></td>
+				</tr>
+			</table>
+
+			<input class=3D"btn btn-primary btn-block" type=3D"submit" value=3D"Sav=
e" />
+		</form>
+	</div>
+</div>
 <script>
 	let form_password =3D 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/setting=
s/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=3D"stylesheet" href=3D"<?=3D e(asset("css/profile.css")); ?>"/>
-<img id=3D"user-photo" src=3D"<?=3D e($u["photo_path"]); ?>" alt=3D"<?=3D =
e($u["full_name"]); ?>"/>
-<form action=3D"api.php?action=3Dsettings&amp;section=3Dprofile" enctype=
=3D"multipart/form-data" method=3D"POST" id=3D"edit-profile-form">
-<table id=3D"user-info">
-	<tr><th align=3D"center" colspan=3D"3"><div>Profile Info</div></th></tr>
-	<tr><td>User ID</td><td>:</td><td><?=3D e($u["id"]); ?></td></tr>
-	<tr><td>Photo</td><td>:</td><td><input type=3D"file" name=3D"photo"/></td=
></tr>
-	<tr><td>First Name</td><td>:</td><td><input type=3D"text" name=3D"first_n=
ame" value=3D"<?=3D e($u["first_name"]); ?>" required/></td></tr>
-	<tr><td>Last Name</td><td>:</td><td><input type=3D"text" name=3D"last_nam=
e" value=3D"<?=3D e($u["last_name"]); ?>"/></td></tr>
-	<tr><td>Username</td><td>:</td><td><input type=3D"text" name=3D"username"=
 value=3D"<?=3D e($u["username"]); ?>" required/></td></tr>
-	<tr><td>Email</td><td>:</td><td><input type=3D"email" name=3D"email" valu=
e=3D"<?=3D e($u["email"]); ?>" required/></td></tr>
-	<tr><td align=3D"center" colspan=3D"3"><div style=3D"margin-top: 30px;">E=
nter your current password to edit your profile:</div></td></tr>
-	<tr><td align=3D"center" colspan=3D"3"><input type=3D"password" name=3D"p=
assword" placeholder=3D"Password" required/></td></tr>
-	<tr><td align=3D"center" colspan=3D"3"><button type=3D"submit">Save</butt=
on></td></tr>
-</table>
-</form>
+<div class=3D"mw-full text-center">
+	<button id=3D"photo-btn" type=3D"button" data-toggle=3D"modal" data-targe=
t=3D"modal-profile">
+		<img id=3D"user-photo" class=3D"img-fluid rounded-circle" src=3D"<?=3D e=
($u["photo_path"]); ?>" alt=3D"<?=3D e($u["full_name"]); ?>" />
+	</button>
+	<div>
+		<a style=3D"cursor: pointer;" id=3D"photo-btn" type=3D"button" data-togg=
le=3D"modal" data-target=3D"modal-profile">
+			Edit Photo
+		</a>
+	</div>
+</div>
+
+<div class=3D"mw-full d-flex justify-content-center">
+	<form class=3D"w-400 mw-full" action=3D"api.php?action=3Dsettings&amp;sec=
tion=3Dprofile" enctype=3D"multipart/form-data" method=3D"POST" id=3D"edit-=
profile-form">
+		<table class=3D"table " id=3D"user-info">
+			<tr>
+				<th align=3D"center" colspan=3D"3">
+					<div>Profile Info</div>
+				</th>
+			</tr>
+			<tr>
+				<td>User ID</td>
+				<td><?=3D e($u["id"]); ?></td>
+			</tr>
+			<tr>
+				<td>First Name</td>
+				<td><input class=3D"form-control" type=3D"text" name=3D"first_name" va=
lue=3D"<?=3D e($u["first_name"]); ?>" required /></td>
+			</tr>
+			<tr>
+				<td>Last Name</td>
+				<td><input class=3D"form-control" type=3D"text" name=3D"last_name" val=
ue=3D"<?=3D e($u["last_name"]); ?>" /></td>
+			</tr>
+			<tr>
+				<td>Username</td>
+				<td><input class=3D"form-control" type=3D"text" name=3D"username" valu=
e=3D"<?=3D e($u["username"]); ?>" required /></td>
+			</tr>
+			<tr>
+				<td>Email</td>
+				<td><input class=3D"form-control" type=3D"email" name=3D"email" value=
=3D"<?=3D e($u["email"]); ?>" required /></td>
+			</tr>
+			<tr>
+				<td align=3D"center" colspan=3D"3">
+					<div style=3D"margin-top: 30px;">Enter your current password to edit =
your profile</div>
+				</td>
+			</tr>
+			<tr>
+				<td align=3D"center" colspan=3D"3"><input class=3D"form-control" type=
=3D"password" name=3D"password" placeholder=3D"Password" required /></td>
+			</tr>
+		</table>
+		<input class=3D"btn btn-primary btn-block" type=3D"submit" value=3D"Save=
" />
+	</form>
+</div>
 <script>
+	var apply_photo, form_error;
 	let form_profile =3D gid("edit-profile-form");
+	let photo_blob =3D null;
+	let photo_filename =3D null;
 	form_profile.addEventListener("submit", function(e) {
 		e.preventDefault();
 		let xhr =3D new XMLHttpRequest();
@@ -27,19 +65,64 @@
 			try {
 				res =3D JSON.parse(xhr.responseText);
 			} catch (e) {
-				console.log("Error", e);
+				toastErorrAlert(e);
 				return;
 			}
=20
 			if (this.status =3D=3D 200) {
-				alert("Profile updated!");
-				window.location =3D "profile.php?ref=3Dsettings";
+				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 =3D new FormData(form_profile);
+		if (photo_blob !=3D=3D null)
+			fd.append("photo", photo_blob, photo_filename);
+		xhr.send(fd);
 	});
 </script>
+<script type=3D"module">
+	import {
+		Cropo
+	} from "<?=3D e(asset("js/cropo.js")); ?>";
+
+	const canvas =3D gid("photo_canvas");
+	const range =3D gid("photo_range");
+	const user_photo =3D gid("user-photo");
+	const modal_photo =3D gid("modal-photo");
+	const cropo =3D new Cropo({
+		// imageUrl: "<?=3D e($u["photo_path"]); ?>",
+		canvas: canvas,
+		rangeInput: range
+	});
+	let photo =3D gid("photo");
+	photo.addEventListener("change", (e) =3D> {
+		let file =3D photo.files?.[0];
+		if (!file)
+			return;
+
+		console.log(file);
+		let fr =3D new FileReader();
+		fr.onload =3D function() {
+			cropo.loadImageFromUrl(fr.result);
+			range.style.display =3D "";
+			photo_filename =3D file.name;
+		};
+		fr.readAsDataURL(file);
+	});
+
+	apply_photo =3D function() {
+		cropo.getBlob().then(function(blob) {
+			photo_blob =3D blob;
+		}).catch(function(err) {
+			toastErorrAlert(err)
+		});
+		user_photo.src =3D cropo.getDataUrl();
+	}
+</script>
\ No newline at end of file

base-commit: eb3c278aa7fa3390873d2a7b5a84f1521f51eecf
--=20
Memet Zx