* [PATCH gwspamd v2] gwspamd: web: Update frontend for gwspamd
@ 2023-04-18 16:05 Memet Zx
2023-04-18 16:08 ` Ammar Faizi
` (2 more replies)
0 siblings, 3 replies; 4+ messages in thread
From: Memet Zx @ 2023-04-18 16:05 UTC (permalink / raw)
To: Ammar Faizi; +Cc: Memet Zx, GNU/Weeb Mailing List, Memet Zx
Integrate halfmoon framework for frontend
Integrate Cropo for photo cropping feature
Link: https://www.gethalfmoon.com/
Link: https://github.com/alijany/cropo/
Signed-off-by: Memet Zx <[email protected]>
---
v2:
- Remove icons folder, because is not used.
---
web/api/audit_log.php | 41 +
web/init.php | 4 +-
web/public/assets/css/common.css | 110 +-
web/public/assets/css/dashboard.css | 561 +
web/public/assets/css/halfmoon.css | 14408 ++++++++++++++++++++++++
web/public/assets/js/common.js | 9 +
web/public/assets/js/cropo.js | 173 +
web/public/assets/js/halfmoon.js | 511 +
web/views/components/body.php | 32 +-
web/views/components/head.php | 20 +-
| 0
web/views/components/modal.php | 34 +
web/views/components/navbar.php | 68 +-
| 20 +
web/views/pages/audit_log.php | 127 +-
web/views/pages/home.php | 145 +-
web/views/pages/login.php | 31 +-
web/views/pages/profile.php | 45 +-
web/views/pages/settings.php | 31 +-
web/views/pages/settings/password.php | 40 +-
web/views/pages/settings/profile.php | 125 +-
21 files changed, 16335 insertions(+), 200 deletions(-)
create mode 100644 web/public/assets/css/dashboard.css
create mode 100644 web/public/assets/css/halfmoon.css
create mode 100644 web/public/assets/js/cropo.js
create mode 100644 web/public/assets/js/halfmoon.js
delete mode 100644 web/views/components/header.php
create mode 100644 web/views/components/modal.php
create mode 100644 web/views/components/sidebar.php
diff --git a/web/api/audit_log.php b/web/api/audit_log.php
index 98d9094..0bdfcbe 100644
--- a/web/api/audit_log.php
+++ b/web/api/audit_log.php
@@ -26,3 +26,44 @@ function get_audit_log_st(int $user_id, int $limit = 100, int $offset = 0)
$st->execute([$user_id]);
return $st;
}
+
+function build_extra_edit_profile($extra)
+{
+ $e = json_decode($extra, true);
+ ob_start();
+?>
+ Username: <?= e($e["username"]); ?><br>
+ First name: <?= e($e["first_name"]); ?><br>
+ Last name: <?= e($e["last_name"]); ?><br>
+ Email: <?= e($e["email"]); ?><br>
+ Photo: <?= e($e["photo_id"] ?? "(unchanged)"); ?><br>
+<?php
+ return ob_get_clean();
+}
+
+function build_extra_ipua($extra)
+{
+ $e = json_decode($extra, true);
+ ob_start();
+?>
+ IP: <?= e($e["ip"]); ?><br>
+ User Agent: <?= e($e["ua"]); ?><br>
+<?php
+ return ob_get_clean();
+}
+
+function build_extra_data(string $action, $extra)
+{
+ switch ($action) {
+ case "edit_profile":
+ return build_extra_edit_profile($extra);
+ break;
+ case "login":
+ case "logout":
+ case "change_password":
+ return build_extra_ipua($extra);
+ break;
+ }
+
+ return "";
+}
diff --git a/web/init.php b/web/init.php
index 5ef64a7..f768363 100644
--- a/web/init.php
+++ b/web/init.php
@@ -5,7 +5,6 @@
*/
if (!defined("__INIT")):
-
define("__INIT", true);
require __DIR__."/config.php";
@@ -37,7 +36,7 @@ if (!defined("WEB_DONT_START_SESSION")) {
function load_api(string $name, array $data = [])
{
extract($data);
- return require API_DIR . "/{$name}.php";
+ return require_once API_DIR . "/{$name}.php";
}
function e(?string $str): string
@@ -112,6 +111,7 @@ function load_page(string $name, array $data = [])
ob_start();
require VIEWS_DIR."/pages/{$name}.php";
$content = ob_get_clean();
+ $g_active = $name;
require VIEWS_DIR."/components/body.php";
}
diff --git a/web/public/assets/css/common.css b/web/public/assets/css/common.css
index e35b3c7..560bd8a 100644
--- a/web/public/assets/css/common.css
+++ b/web/public/assets/css/common.css
@@ -7,7 +7,7 @@
html {
font-family: Arial;
}
-
+/*
#navbar {
text-align: center;
}
@@ -28,4 +28,112 @@ a {
a:hover {
text-decoration: underline;
+} */
+#login-box {
+ margin: auto;
+ /* height: 300px;
+ width: 400px; */
+ max-width: 400px;
+ border: 1px solid #000;
+ border-radius: 1%;
+ text-align: center;
+ margin-top: 200px;
+}
+.pass{
+ margin: 0 !important;
+}
+
+#photo_canvas {
+ touch-action: none;
+ cursor: move;
+ height: 300px;
+ width: 300px;
+ border: 1px solid;
+ /* width: -webkit-fill-available; */
+}
+input[type="range" i] {
+ appearance: auto;
+ cursor: default;
+ padding: initial;
+ border: 1px solid;
+ margin: 1em;
+ width: -webkit-fill-available;
+}
+#user-photo {
+ height: 200px;
+ width: 200px;
+ border-radius: 50%;
+ object-fit: cover;
+}
+#user-photo:hover{
+ border: 10px solid aqua;
+ border-radius: 10%;
+}
+#user-photo:active{
+ border: 10px solid aqua;
+ border-radius: 10%;
+}
+.user-dropdown{
+ height: 43px !important;
+ width: 46px;
+ border-radius: 50%;
+ object-fit: cover;
+ /* border: 1px solid; */
+ /* box-shadow: 0 .4rem 1.2rem rgba(17, 141, 213, 0.4) !important; */
+}
+.user-dropdown:hover{
+ border: 1px solid;
+ box-shadow: 0 .4rem 1.2rem rgba(17, 141, 213, 0.4) !important;
+}
+.card{
+ box-shadow: 0 .4rem 1.2rem rgba(0,0,0,.4)!important;
+}
+.mt-40{
+ margin-top: 5em !important;
+}
+.activity-feed {
+ padding: 15px;
+ list-style: none;
+}
+
+.activity-feed .feed-item {
+ position: relative;
+ padding-bottom: 20px;
+ padding-left: 30px;
+ border-left: 1px solid;
+}
+
+.activity-feed .feed-item:last-child {
+ border-color: transparent;
+}
+
+.activity-feed .feed-item::after {
+ content: "";
+ display: block;
+ position: absolute;
+ top: 0;
+ left: -6px;
+ width: 10px;
+ height: 10px;
+ border-radius: 6px;
+ background: aquamarine;
+ border: 1px solid;
+}
+
+.activity-feed .feed-item .date {
+ display: block;
+ position: relative;
+ top: -5px;
+ color: #8c96a3;
+ text-transform: uppercase;
+ font-size: 13px;
+}
+
+.activity-feed .feed-item .text {
+ position: relative;
+ top: -3px;
}
+#photo-btn{
+ background: transparent;
+ border: 0;
+}
\ No newline at end of file
diff --git a/web/public/assets/css/dashboard.css b/web/public/assets/css/dashboard.css
new file mode 100644
index 0000000..fc7f256
--- /dev/null
+++ b/web/public/assets/css/dashboard.css
@@ -0,0 +1,561 @@
+/* Documentation styles. Copyright Halfmoon UI */
+
+/* Font */
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+body.use-roboto-all {
+ font-family: "Roboto", sans-serif;
+}
+body.with-extra-letter-spacing-on-side-navs .sidebar *,
+body.with-extra-letter-spacing-on-side-navs .on-this-page-nav * {
+ letter-spacing: 0.3px;
+}
+
+
+/* Loading section */
+
+#loading-section {
+ width: 100%;
+ height: 100%;
+ display: none;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+}
+.loader {
+ display: inline-block;
+ position: relative;
+ width: 8rem;
+ height: 8rem;
+}
+.loader div {
+ /* box-sizing: border-box; */
+ display: block;
+ position: absolute;
+ width: 6.4rem;
+ height: 6.4rem;
+ margin: .8rem;
+ border: .5rem solid transparent;
+ border-radius: 50%;
+ animation: loader-animation 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+ border-color: #1890ff transparent transparent transparent;
+}
+.loader div:nth-child(1) {
+ animation-delay: -0.45s;
+}
+.loader div:nth-child(2) {
+ animation-delay: -0.3s;
+}
+.loader div:nth-child(3) {
+ animation-delay: -0.15s;
+}
+@keyframes loader-animation {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+body.loading {
+ overflow: hidden;
+}
+body.loading .page-wrapper {
+ visibility: hidden;
+}
+body.loading #loading-section {
+ display: flex;
+}
+
+/* Branding and logo */
+
+.halfmoon-logo-img {
+ width: 10.8rem;
+ margin-right: .5rem;
+}
+
+/* Navbar */
+
+.navbar-menu-btn {
+ padding-left: 1rem;
+ padding-right: 1rem;
+}
+@media (max-width: 400px) {
+ .navbar-menu-btn {
+ padding: 0;
+ width: 3.6rem;
+ }
+ .navbar-menu-btn .text {
+ display: none;
+ }
+}
+
+/* Sidebar */
+
+.sidebar .hidden-search-terms {
+ position: absolute;
+ visibility: hidden;
+}
+
+/* Download button */
+
+.btn-download-sm {
+ width: 16rem;
+}
+
+/* Sidenav */
+
+.on-this-page-nav {
+ position: fixed;
+ margin-right: 2rem;
+ z-index: 20;
+ background-color: #ffffff;
+ padding: 0.5rem;
+ border-radius: 0.4rem;
+}
+.dark-mode .on-this-page-nav {
+ background-color: #25282c;
+}
+.on-this-page-nav .title {
+ font-weight: 500;
+ font-size: 1.5rem;
+ margin-bottom: 1rem;
+}
+.on-this-page-nav a {
+ text-align: left;
+ display: block;
+ padding: 0.4rem 0 0.4rem 2rem;
+ line-height: 1.4;
+ color: rgba(0, 0, 0, 0.7);
+ border-left: 1px solid rgba(0, 0, 0, 0.15);
+}
+.dark-mode .on-this-page-nav a {
+ color: rgba(255, 255, 255, 0.65);
+ border-color: rgba(255, 255, 255, 0.15);
+}
+.on-this-page-nav a:hover,
+.dark-mode .on-this-page-nav a:hover {
+ color: #1890ff;
+ text-decoration: none;
+}
+@media (max-width: 1200px) {
+ .on-this-page-nav-container {
+ display: none;
+ }
+}
+
+/* Custom footer */
+
+.custom-footer {
+ background-color: rgba(0, 0, 0, 0.025);
+ border: 1px solid rgba(0, 0, 0, 0.1);
+ border-left-color: transparent;
+ border-right-color: transparent;
+ border-bottom-color: transparent;
+}
+.dark-mode .custom-footer {
+ background-color: #111417;
+}
+.custom-footer a.custom-footer-link {
+ color: rgba(0, 0, 0, 0.65);
+}
+.dark-mode .custom-footer a.custom-footer-link {
+ color: rgba(255, 255, 255, 0.65);
+}
+.custom-footer a.custom-footer-link:hover,
+.dark-mode .custom-footer a.custom-footer-link:hover {
+ color: #1890ff;
+ text-decoration: none;
+}
+.custom-footer .btn-scroll-to-top {
+ border-radius: 3rem;
+}
+
+/* Code */
+
+.code-container,
+.dark-mode .code-container {
+ position: relative;
+}
+.code-container .copy-button,
+.dark-mode .code-container .copy-button {
+ position: absolute;
+ top: 0.5rem;
+ right: 0.5rem;
+ width: 8rem;
+ height: 2.4rem;
+ line-height: 2.4rem;
+ padding-top: 0;
+ padding-bottom: 0;
+ z-index: 5;
+}
+
+/* Subscriber form container */
+
+.subscriber-form-container {
+ min-height: 100% !important;
+ background-color: rgba(0, 0, 0, 0.025);
+ border-left: 1px solid rgba(0, 0, 0, 0.1);
+ border-top-right-radius: 0.4rem;
+ border-bottom-right-radius: 0.4rem;
+}
+.dark-mode .subscriber-form-container {
+ background-color: #111417;
+}
+@media (max-width: 992px) {
+ .subscriber-form-container {
+ border-left: 0;
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
+ border-top-right-radius: 0;
+ border-bottom-left-radius: 0.4rem;
+ border-bottom-right-radius: 0.4rem;
+ }
+}
+
+/* Docs footer card */
+
+@media (max-width: 576px) {
+ .docs-footer-card {
+ margin-left: 0;
+ margin-right: 0;
+ border-radius: 0;
+ border-right: none;
+ border-left: none;
+ }
+ .docs-footer-card .subscriber-form-container {
+ border-radius: 0;
+ }
+}
+
+/* Utilities */
+
+.mr-2 {
+ margin-right: 0.2rem;
+}
+.font-family-monospace {
+ font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+}
+
+/* Columns */
+
+.col-text-container {
+ width: 6.8rem;
+}
+
+/* Background color box */
+
+.bg-color-box {
+ border: 1px solid transparent;
+ width: 2.5rem;
+ height: 2.5rem;
+ border-radius: 0.4rem;
+}
+body:not(.dark-mode) .bg-color-box.bg-white,
+body:not(.dark-mode) .bg-color-box.bg-dark-light-dm,
+body:not(.dark-mode) .bg-color-box.bg-dark-dm,
+body:not(.dark-mode) .bg-color-box.bg-very-dark-dm,
+body:not(.dark-mode) .bg-color-box.bg-transparent {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .bg-color-box.bg-dark,
+.dark-mode .bg-color-box.bg-dark-dm,
+.dark-mode .bg-color-box.bg-transparent {
+ border-color: rgba(255, 255, 255, 0.2);
+}
+
+/* Fake window */
+
+.fake-window .fake-window-top-row {
+ padding: 1rem;
+ background-color: #ecf0f1;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+ border-top-left-radius: 0.4rem;
+ border-top-right-radius: 0.4rem;
+}
+.dark-mode .fake-window .fake-window-top-row {
+ background-color: rgba(0, 0, 0, 0.1);
+}
+.fake-button {
+ display: inline-block;
+ width: 1.6rem;
+ height: 1.6rem;
+ border-radius: 50%;
+ margin-top: 0.5rem;
+ margin-right: 0.5rem;
+}
+.fake-button:after {
+ content: '\200b';
+}
+.fake-content {
+ height: 1.4rem;
+ background-color: #ecf0f1;
+ border: 1px solid rgba(0, 0, 0, 0.15);
+ margin-bottom: 1rem;
+ border-radius: 0.2rem;
+}
+.dark-mode .fake-content {
+ background-color: rgba(255, 255, 255, 0.1);
+ border-color: rgba(255, 255, 255, 0.025);
+}
+.fake-content:after {
+ content: '\200b';
+}
+.fake-content:last-child {
+ margin-bottom: 0;
+}
+
+/* Container box */
+
+.container-box {
+ /* box-sizing: border-box; */
+ background-color: #ffffff;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ /*outline: 1px solid rgba(0, 0, 0, 0.2);*/
+ padding: 1rem 0;
+}
+.dark-mode .container-box {
+ background-color: #191c20;
+ border-color: rgba(255, 255, 255, 0.15);
+ outline-color: rgba(255, 255, 255, 0.15);
+}
+.container-box.no-outline {
+ outline: none;
+}
+.row-with-bg {
+ background-color: #dadfe1;
+ /*outline: 1px solid #dadfe1;*/
+}
+.dark-mode .row-with-bg {
+ background-color: #111417;
+ outline-color: #111417;
+}
+
+/* Dropdown aligment button */
+
+.btn-dropdown-alignment {
+ width: 8.4rem;
+ padding-left: 0;
+ padding-right: 0;
+}
+
+/* Fake sidebar */
+
+.fake-sidebar {
+ width: 26rem;
+ height: 100%;
+ background-color: #ffffff;
+ border: 1px solid transparent; /* Removes margin collapse */
+ border-right-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .fake-sidebar {
+ background-color: #191c20;
+ border-right-color: rgba(0, 0, 0, 0.2);
+}
+
+/* Card full width on extra small screens */
+
+@media (max-width: 576px) {
+ .card.card-w-full-xs {
+ margin: 0;
+ border-radius: 0;
+ border-right: none;
+ border-left: none;
+ }
+ .card.card-w-full-xs .fake-window,
+ .card.card-w-full-xs .fake-window-top-row {
+ border-radius: 0;
+ }
+}
+
+/* Docs cards container */
+
+.docs-cards-container {
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-bottom-color: transparent;
+ border-top-left-radius: 0.4rem;
+ border-top-right-radius: 0.4rem;
+}
+@media (max-width: 576px) {
+ .card.card-w-full-xs .docs-cards-container {
+ border-radius: 0;
+ border-right: none;
+ border-left: none;
+ }
+}
+
+/* Docs navbar/sidebar container */
+
+.docs-navbar-sidebar-container {
+ border: 1px solid transparent;
+ border-top-left-radius: 0.4rem;
+ border-top-right-radius: 0.4rem;
+}
+.dark-mode .docs-navbar-sidebar-container {
+ border-color: rgba(255, 255, 255, 0.1);
+}
+.docs-navbar-sidebar-container .small-device-window {
+ border-left: 1px solid rgba(0, 0, 0, 0.2);
+ border-right: 1px solid rgba(0, 0, 0, 0.2);
+}
+.dark-mode .docs-navbar-sidebar-container .small-device-window {
+ border-color: rgba(255, 255, 255, 0.1);
+}
+@media (max-width: 576px) {
+ .card.card-w-full-xs .docs-navbar-sidebar-container {
+ border-radius: 0;
+ border-right: none;
+ border-left: none;
+ }
+ .docs-navbar-sidebar-container .small-device-window {
+ border-left: none;
+ border-right: none;
+ }
+}
+
+/* iFrame message */
+
+.iframe-message {
+ padding: 1rem 2rem;
+ background-color: #ecf0f1;
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+.dark-mode .iframe-message {
+ background-color: rgba(0, 0, 0, 0.1);
+}
+
+/* Code header */
+
+.code-header,
+.starter-template-output-header {
+ padding: 1rem 2rem;
+ background-color: #ecf0f1;
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+.dark-mode .code-header,
+.dark-mode .starter-template-output-header {
+ background-color: rgba(0, 0, 0, 0.1);
+}
+
+/* Show/hide based on IE */
+
+.d-block-only-in-ie {
+ display: none;
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+ .d-none-only-in-ie {
+ display: none;
+ }
+ .d-block-only-in-ie {
+ display: block;
+ }
+}
+
+
+/* Docs subsection */
+
+.docs-subsection {
+ padding-left: 2rem;
+ border-left: 1px solid rgba(0, 0, 0, 0.1);
+}
+.dark-mode .docs-subsection {
+ border-color: rgba(255, 255, 255, 0.1);
+}
+
+/* Pseudo-variables. The following styles need to be changed for different themes. */
+
+.loader div {
+ border-color: #1890ff transparent transparent transparent;
+}
+.on-this-page-nav {
+ background-color: #ffffff;
+}
+.dark-mode .on-this-page-nav {
+ background-color: #25282c;
+}
+.on-this-page-nav a:hover,
+.dark-mode .on-this-page-nav a:hover {
+ color: #1890ff;
+}
+.custom-footer {
+ background-color: rgba(0, 0, 0, 0.025);
+ border-top-color: rgba(0, 0, 0, 0.1);
+}
+.dark-mode .custom-footer {
+ background-color: #111417;
+ border-top-color: rgba(0, 0, 0, 0.1);
+}
+.custom-footer a.custom-footer-link:hover,
+.dark-mode .custom-footer a.custom-footer-link:hover {
+ color: #1890ff;
+}
+.subscriber-form-container {
+ background-color: rgba(0, 0, 0, 0.025);
+}
+.dark-mode .subscriber-form-container {
+ background-color: #111417;
+}
+.hljs {
+ background-color: rgba(0, 0, 0, 0.025);
+ border-color: rgba(0, 0, 0, 0.1);
+}
+.dark-mode .hljs {
+ background-color: #111417;
+ border-color: rgba(0, 0, 0, 0.1);
+}
+@media (min-width: 769px) {
+ .with-custom-css-scrollbars .hljs {
+ scrollbar-color: rgba(0, 0, 0, 0.25) #f7f7f7;
+ }
+ .dark-mode.with-custom-css-scrollbars .hljs {
+ scrollbar-color: rgba(255, 255, 255, 0.25) #111417;
+ }
+}
+.container-box {
+ background-color: #ffffff;
+}
+.dark-mode .container-box {
+ background-color: #191c20;
+}
+.row-with-bg {
+ background-color: #dadfe1;
+ outline-color: #dadfe1;
+}
+.dark-mode .row-with-bg {
+ background-color: #111417;
+ outline-color: #111417;
+}
+body:not(.dark-mode) .bg-color-box.bg-white,
+body:not(.dark-mode) .bg-color-box.bg-dark-light-dm,
+body:not(.dark-mode) .bg-color-box.bg-dark-dm,
+body:not(.dark-mode) .bg-color-box.bg-very-dark-dm,
+body:not(.dark-mode) .bg-color-box.bg-transparent {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .bg-color-box.bg-dark,
+.dark-mode .bg-color-box.bg-dark-dm,
+.dark-mode .bg-color-box.bg-transparent {
+ border-right-color: rgba(255, 255, 255, 0.15);
+}
+.code-card {
+ border-color: rgba(0, 0, 0, 0.1);
+}
+.dark-mode .code-card .hljs {
+ background-color: #191c20;
+}
+@media (min-width: 769px) {
+ .dark-mode .code-card .hljs {
+ scrollbar-color: rgba(255, 255, 255, 0.25) #191c20;
+ }
+}
+.dark-mode .sponsor-section-card {
+ background-color: #1e2125;
+}
+.sponsor-section-card-scroll-block {
+ border-bottom-right-radius: 0.4rem;
+ background-color: rgba(255, 255, 255, 0.975);
+}
+.dark-mode .sponsor-section-card-scroll-block {
+ background-color: rgba(30, 33, 37, 0.95);
+}
diff --git a/web/public/assets/css/halfmoon.css b/web/public/assets/css/halfmoon.css
new file mode 100644
index 0000000..8cad06f
--- /dev/null
+++ b/web/public/assets/css/halfmoon.css
@@ -0,0 +1,14408 @@
+/*
+-------------------------------------------------------------------------------
+Halfmoon CSS
+Version: 1.1.1
+https://www.gethalfmoon.com
+Copyright, Halfmoon UI
+Licensed under MIT (https://www.gethalfmoon.com/license)
+-------------------------------------------------------------------------------
+The above notice must be included in its entirety when this file is used.
+
+Table of contents:
+ 1. Base styles --------------------------------------------------- [hm-01]
+ 2. Typography ---------------------------------------------------- [hm-02]
+ 3. Scrollbars ---------------------------------------------------- [hm-03]
+ 4. Layout -------------------------------------------------------- [hm-04]
+ 5. Page building (containers, columns, content and card) --------- [hm-05]
+ 6. Links --------------------------------------------------------- [hm-06]
+ 7. Buttons ------------------------------------------------------- [hm-07]
+ 8. List ---------------------------------------------------------- [hm-08]
+ 9. Code ---------------------------------------------------------- [hm-09]
+ 10. Tables -------------------------------------------------------- [hm-10]
+ 11. Form elements ------------------------------------------------- [hm-11]
+ 12. Dropdown ------------------------------------------------------ [hm-12]
+ 13. Modal --------------------------------------------------------- [hm-13]
+ 14. Alerts -------------------------------------------------------- [hm-14]
+ 15. Navbar content ------------------------------------------------ [hm-15]
+ 16. Sidebar content ----------------------------------------------- [hm-16]
+ 17. Pagination ---------------------------------------------------- [hm-17]
+ 18. Breadcrumb ---------------------------------------------------- [hm-18]
+ 19. Tooltips ------------------------------------------------------ [hm-19]
+ 20. Badges -------------------------------------------------------- [hm-20]
+ 21. Image --------------------------------------------------------- [hm-21]
+ 22. Button group -------------------------------------------------- [hm-22]
+ 23. Collapse ------------------------------------------------------ [hm-23]
+ 24. Progress ------------------------------------------------------ [hm-24]
+ 25. Spacing utilities --------------------------------------------- [hm-25]
+ 26. Display utilities --------------------------------------------- [hm-26]
+ 27. Sizing utilities ---------------------------------------------- [hm-27]
+ 28. Flex utilities ------------------------------------------------ [hm-28]
+ 29. Position utilities -------------------------------------------- [hm-29]
+ 30. Other utilities ----------------------------------------------- [hm-30]
+
+Credits:
+ Bootstrap and its contributors for class names and inspiration. Moreover,
+ the containers, grid system and the flex utilities found in Halfmoon CSS
+ are almost direct copies of the ones found in Bootstrap. Therefore, the
+ following copyright notice is provided:
+ ---------------------------------------------------------------------------
+ Bootstrap (https://getbootstrap.com/)
+ Copyright 2011-2020 The Bootstrap Authors
+ Copyright 2011-2020 Twitter, Inc.
+ Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ ---------------------------------------------------------------------------
+*/
+
+/*
+-------------------------------------------------------------------------------
+0. Normalize CSS
+
+Notes:
+ ~ Normalize.css makes browsers render all elements more consistently and
+ in line with modern standards. It precisely targets only the styles that
+ need normalizing.
+ ~ normalize.css | MIT License | github.com/necolas/normalize.css
+ ~ This is a slighly customized version of normalize.css 8.0.1,
+ specifically for dealing with Halfmoon CSS.
+ ~ Comments have been removed for the sake of compactness.
+-------------------------------------------------------------------------------
+*/
+
+html {
+ line-height: 1.15;
+ -webkit-text-size-adjust: 100%;
+}
+body {
+ margin: 0;
+}
+main {
+ display: block;
+}
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+hr {
+ box-sizing: content-box;
+ height: 0;
+ overflow: visible;
+}
+pre {
+ font-family: monospace, monospace;
+ font-size: 1em;
+}
+a {
+ background-color: transparent;
+}
+abbr[title] {
+ border-bottom: none;
+ text-decoration: underline;
+ text-decoration: underline dotted;
+}
+b,
+strong {
+ font-weight: bolder;
+}
+code,
+kbd,
+samp {
+ font-family: monospace, monospace;
+ font-size: 1em;
+}
+small {
+ font-size: 80%;
+}
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+sub {
+ bottom: -0.25em;
+}
+sup {
+ top: -0.5em;
+}
+img {
+ border-style: none;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit;
+ font-size: 100%;
+ line-height: 1.15;
+ margin: 0;
+}
+button,
+input {
+ overflow: visible;
+}
+button,
+select {
+ text-transform: none;
+}
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button;
+}
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+fieldset {
+ padding: 0.35em 0.75em 0.625em;
+}
+legend {
+ box-sizing: border-box;
+ color: inherit;
+ display: table;
+ max-width: 100%;
+ padding: 0;
+ white-space: normal;
+}
+progress {
+ vertical-align: baseline;
+}
+textarea {
+ overflow: auto;
+}
+[type="checkbox"],
+[type="radio"] {
+ box-sizing: border-box;
+ padding: 0;
+}
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+[type="search"] {
+ -webkit-appearance: textfield;
+ outline-offset: -2px;
+}
+[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ font: inherit;
+}
+details {
+ display: block;
+}
+summary {
+ display: list-item;
+}
+template {
+ display: none;
+}
+[hidden] {
+ display: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+td,
+th {
+ padding: 0;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+1. Base styles [hm-01]
+-------------------------------------------------------------------------------
+*/
+
+html {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+*, *:before, *:after {
+ -webkit-box-sizing: inherit;
+ -moz-box-sizing: inherit;
+ box-sizing: inherit;
+}
+
+/* HTML font size and scaling */
+
+html {
+ font-size: 62.5%;
+}
+@media (min-width: 1600px) {
+ html {
+ font-size: 75%;
+ }
+}
+@media (min-width: 1920px) {
+ html {
+ font-size: 87.5%;
+ }
+}
+
+/* Auto-scaling disabled */
+
+@media (min-width: 1600px) {
+ html.auto-scaling-disabled {
+ font-size: 62.5%;
+ }
+}
+@media (min-width: 1920px) {
+ html.auto-scaling-disabled {
+ font-size: 62.5%;
+ }
+}
+
+/* DOM body */
+
+body {
+ background-color: #ffffff;
+ background-image: none;
+ color: rgba(0, 0, 0, 0.85);
+ font-size: 1.4rem;
+ line-height: 1.5;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+ font-weight: 400;
+}
+.dark-mode {
+ background-color: #25282c;
+ background-image: none;
+ color: rgba(255, 255, 255, 0.8);
+ /*
+ Anti-aliasing works best on light fonts on dark backgrounds. Otherwise,
+ there is a loss of readability.
+ */
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+/* Horizontal rule */
+
+hr {
+ height: 1px;
+ color: rgba(0, 0, 0, 0.05);
+ background-color: rgba(0, 0, 0, 0.05);
+ border: none;
+}
+.dark-mode hr {
+ color: rgba(255, 255, 255, 0.05);
+ background-color: rgba(255, 255, 255, 0.05);
+}
+
+/*
+-------------------------------------------------------------------------------
+2. Typography [hm-02]
+-------------------------------------------------------------------------------
+*/
+
+h1 {
+ margin-top: 1rem;
+ margin-bottom: 2rem;
+ font-weight: 400;
+}
+
+h2 {
+ margin-top: 1rem;
+ margin-bottom: 2rem;
+ font-weight: 400;
+}
+
+h3 {
+ margin-top: 1rem;
+ margin-bottom: 2rem;
+ font-weight: 400;
+}
+
+h4 {
+ margin-top: 1rem;
+ margin-bottom: 2rem;
+ font-weight: 400;
+}
+
+h5 {
+ margin-top: 1rem;
+ margin-bottom: 2rem;
+ font-weight: 400;
+}
+
+h6 {
+ margin-top: 1rem;
+ margin-bottom: 2rem;
+ font-weight: 400;
+}
+h1 {
+ font-size: 4rem;
+ line-height: 1.3;
+}
+h2 {
+ font-size: 3.6rem;
+ line-height: 1.35;
+}
+h3 {
+ font-size: 3rem;
+ line-height: 1.4;
+}
+h4 {
+ font-size: 2.4rem;
+ line-height: 1.45;
+}
+h5 {
+ font-size: 1.8rem;
+}
+h6 {
+ font-size: 1.5rem;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+3. Scrollbars [hm-03]
+
+Notes:
+ ~ Any scrollbars on the body itself is not affected. This is because the
+ page-wrapper is always expected, as the entire framework is built around
+ it.
+ ~ Only styled on screens larger than 768px, because mobiles and tablets
+ have disappearing scrollbars, which look great most of the time.
+ ~ The webkit scrollbars work on webkit based browsers, such as Chrome,
+ Safari, Brave, and the new Microsoft Edge.
+ ~ The custom CSS scrollbars work only on Firefox as of 2020. It is a very
+ new specification.
+-------------------------------------------------------------------------------
+*/
+
+@media (min-width: 769px) {
+ /* Base scrollbar */
+
+ .with-custom-webkit-scrollbars *::-webkit-scrollbar {
+ width: 1.4rem;
+ height: 1.4rem;
+ background-color: transparent;
+ }
+ .dark-mode.with-custom-webkit-scrollbars *::-webkit-scrollbar {
+ background-color: transparent;
+ }
+ .with-custom-webkit-scrollbars *::-webkit-scrollbar-track:vertical {
+ border-left: 1px solid rgba(0, 0, 0, 0.1);
+ }
+ .with-custom-webkit-scrollbars *::-webkit-scrollbar-track:horizontal {
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
+ }
+ .dark-mode.with-custom-webkit-scrollbars *::-webkit-scrollbar-track {
+ border-color: rgba(255, 255, 255, 0.05);
+ }
+ .with-custom-webkit-scrollbars *::-webkit-scrollbar-thumb {
+ min-width: 3rem;
+ min-height: 3rem;
+ background-color: rgba(0, 0, 0, 0.25);
+ border: 0.4rem solid transparent;
+ -moz-background-clip: content; /* Firefox 3.6 */
+ -webkit-background-clip: content; /* Safari 4? Chrome 6? */
+ background-clip: content-box;
+ border-radius: 1rem;
+ }
+ .with-custom-webkit-scrollbars *::-webkit-scrollbar-thumb:hover {
+ background-color: rgba(0, 0, 0, 0.4);
+ border-color: transparent;
+ }
+ .dark-mode.with-custom-webkit-scrollbars *::-webkit-scrollbar-thumb {
+ background-color: rgba(255, 255, 255, 0.25);
+ border-color: transparent;
+ }
+ .dark-mode.with-custom-webkit-scrollbars *::-webkit-scrollbar-thumb:hover {
+ background-color: rgba(255, 255, 255, 0.4);
+ border-color: transparent;
+ }
+ .with-custom-webkit-scrollbars *::-webkit-scrollbar-corner {
+ background-color: transparent;
+ border-left: 1px solid rgba(0, 0, 0, 0.1);
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
+ }
+ .dark-mode.with-custom-webkit-scrollbars *::-webkit-scrollbar-corner {
+ background-color: transparent;
+ border-color: rgba(255, 255, 255, 0.05);
+ }
+
+ .with-custom-css-scrollbars * {
+ scrollbar-width: thin;
+ scrollbar-color: rgba(0, 0, 0, 0.25) #ffffff;
+ }
+ .dark-mode.with-custom-css-scrollbars * {
+ scrollbar-color: rgba(255, 255, 255, 0.25) #25282c;
+ }
+
+ /* Sidebar scrollbar */
+
+ .with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar {
+ width: 1.4rem;
+ height: 1.4rem;
+ background-color: transparent;
+ }
+ .dark-mode.with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar {
+ background-color: transparent;
+ }
+ .with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-track {
+ border-width: 1px;
+ border-color: rgba(0, 0, 0, 0.1);
+ }
+ .dark-mode.with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-track {
+ border-color: rgba(255, 255, 255, 0.05);
+ }
+ .with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-thumb {
+ background-color: rgba(0, 0, 0, 0.25);
+ border-width: 0.4rem;
+ border-color: transparent;
+ border-radius: 1rem;
+ }
+ .with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-thumb:hover {
+ background-color: rgba(0, 0, 0, 0.4);
+ border-color: transparent;
+ }
+ .dark-mode.with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-thumb {
+ background-color: rgba(255, 255, 255, 0.25);
+ border-color: transparent;
+ }
+ .dark-mode.with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-thumb:hover {
+ background-color: rgba(255, 255, 255, 0.4);
+ border-color: transparent;
+ }
+ .with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-corner {
+ background-color: transparent;
+ border-width: 1px;
+ border-color: rgba(0, 0, 0, 0.1);
+ }
+ .dark-mode.with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-corner {
+ background-color: transparent;
+ border-color: rgba(255, 255, 255, 0.05);
+ }
+
+ .with-custom-css-scrollbars .sidebar {
+ scrollbar-width: thin;
+ scrollbar-color: rgba(0, 0, 0, 0.25) #ffffff;
+ }
+ .dark-mode.with-custom-css-scrollbars .sidebar {
+ scrollbar-color: rgba(255, 255, 255, 0.25) #191c20;
+ }
+
+ /* Modal scrollbar */
+
+ .with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar {
+ width: 1.4rem;
+ height: 1.4rem;
+ background-color: transparent;
+ }
+ .dark-mode.with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar {
+ background-color: transparent;
+ }
+ .with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-track {
+ border-width: 1px;
+ border-color: rgba(255, 255, 255, 0.05);
+ }
+ .dark-mode.with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-track {
+ border-color: rgba(255, 255, 255, 0.05);
+ }
+ .with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-thumb {
+ background-color: rgba(255, 255, 255, 0.25);
+ border-width: 0.4rem;
+ border-color: transparent;
+ border-radius: 1rem;
+ }
+ .with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-thumb:hover {
+ background-color: rgba(255, 255, 255, 0.4);
+ border-color: transparent;
+ }
+ .dark-mode.with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-thumb {
+ background-color: rgba(255, 255, 255, 0.25);
+ border-color: transparent;
+ }
+ .dark-mode.with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-thumb:hover {
+ background-color: rgba(255, 255, 255, 0.4);
+ border-color: transparent;
+ }
+ .with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-corner {
+ background-color: transparent;
+ border-width: 1px;
+ border-color: rgba(0, 0, 0, 0.1);
+ }
+ .dark-mode.with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-corner {
+ background-color: transparent;
+ border-color: rgba(255, 255, 255, 0.05);
+ }
+
+ .with-custom-css-scrollbars .modal-dialog {
+ scrollbar-width: thin;
+ scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
+ }
+ .dark-mode.with-custom-css-scrollbars .modal-dialog {
+ scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
+ }
+
+ /* Full screen modal scrollbar */
+
+ .with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar {
+ width: 1.4rem;
+ height: 1.4rem;
+ background-color: #ffffff;
+ }
+ .dark-mode.with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar {
+ background-color: #191c20;
+ }
+ .with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-track {
+ border-width: 1px;
+ border-color: rgba(0, 0, 0, 0.1);
+ }
+ .dark-mode.with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-track {
+ border-color: rgba(255, 255, 255, 0.05);
+ }
+ .with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-thumb {
+ background-color: rgba(0, 0, 0, 0.25);
+ border-width: 0.4rem;
+ border-color: transparent;
+ border-radius: 1rem;
+ }
+ .with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-thumb:hover {
+ background-color: rgba(0, 0, 0, 0.4);
+ border-color: transparent;
+ }
+ .dark-mode.with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-thumb {
+ background-color: rgba(255, 255, 255, 0.25);
+ border-color: transparent;
+ }
+ .dark-mode.with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-thumb:hover {
+ background-color: rgba(255, 255, 255, 0.4);
+ border-color: transparent;
+ }
+ .with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-corner {
+ background-color: #ffffff;
+ border-width: 1px;
+ border-color: rgba(0, 0, 0, 0.1);
+ }
+ .dark-mode.with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-corner {
+ background-color: #191c20;
+ border-color: rgba(255, 255, 255, 0.05);
+ }
+
+ .with-custom-css-scrollbars .modal-full .modal-dialog {
+ scrollbar-width: thin;
+ scrollbar-color: rgba(0, 0, 0, 0.25) #ffffff;
+ }
+ .dark-mode.with-custom-css-scrollbars .modal-full .modal-dialog {
+ scrollbar-color: rgba(255, 255, 255, 0.25) #191c20;
+ }
+
+ /* Card scrollbar */
+
+ .with-custom-webkit-scrollbars .card::-webkit-scrollbar {
+ width: 1.4rem;
+ height: 1.4rem;
+ background-color: transparent;
+ }
+ .dark-mode.with-custom-webkit-scrollbars .card::-webkit-scrollbar {
+ background-color: transparent;
+ }
+ .with-custom-webkit-scrollbars .card::-webkit-scrollbar-track {
+ border-width: 1px;
+ border-color: rgba(0, 0, 0, 0.1);
+ }
+ .dark-mode.with-custom-webkit-scrollbars .card::-webkit-scrollbar-track {
+ border-color: rgba(255, 255, 255, 0.05);
+ }
+ .with-custom-webkit-scrollbars .card::-webkit-scrollbar-thumb {
+ background-color: rgba(0, 0, 0, 0.25);
+ border-width: 0.4rem;
+ border-color: transparent;
+ border-radius: 1rem;
+ }
+ .with-custom-webkit-scrollbars .card::-webkit-scrollbar-thumb:hover {
+ background-color: rgba(0, 0, 0, 0.4);
+ border-color: transparent;
+ }
+ .dark-mode.with-custom-webkit-scrollbars .card::-webkit-scrollbar-thumb {
+ background-color: rgba(255, 255, 255, 0.25);
+ border-color: transparent;
+ }
+ .dark-mode.with-custom-webkit-scrollbars .card::-webkit-scrollbar-thumb:hover {
+ background-color: rgba(255, 255, 255, 0.4);
+ border-color: transparent;
+ }
+ .with-custom-webkit-scrollbars .card::-webkit-scrollbar-corner {
+ background-color: transparent;
+ border-width: 1px;
+ border-color: rgba(0, 0, 0, 0.1);
+ }
+ .dark-mode.with-custom-webkit-scrollbars .card::-webkit-scrollbar-corner {
+ background-color: transparent;
+ border-color: rgba(255, 255, 255, 0.05);
+ }
+
+ .with-custom-css-scrollbars .card {
+ scrollbar-width: thin;
+ scrollbar-color: rgba(0, 0, 0, 0.25) #ffffff;
+ }
+ .dark-mode.with-custom-css-scrollbars .card {
+ scrollbar-color: rgba(255, 255, 255, 0.25) #191c20;
+ }
+
+ /* CSS scrollbar with transparent track (utility class) */
+
+ .with-custom-css-scrollbars .css-scrollbar-transparent-track {
+ scrollbar-width: thin !important;
+ scrollbar-color: rgba(0, 0, 0, 0.25) transparent !important;
+ }
+ .dark-mode.with-custom-css-scrollbars .css-scrollbar-transparent-track {
+ scrollbar-color: rgba(255, 255, 255, 0.25) transparent !important;
+ }
+}
+
+
+/*
+-------------------------------------------------------------------------------
+4. Layout [hm-04]
+
+Notes:
+ ~ The following section contains the position, width, height, and bg color
+ related styles of the page-wrapper, sticky-alerts, navbars, sidebar, and
+ content-wrapper. These are grouped together because reading them all at
+ once in serial makes it quite easy to understand how pages are structured.
+ ~ The styles of the children of the above elements can be found in their
+ own sections of this stylesheet. These sections are:
+ ~ 14. Alerts
+ ~ 15. Navbar content
+ ~ 16. Sidebar content
+ ~ The page-wrapper can have additional helper classes which automatically
+ fixes the positions and the sizes of the children elements. For example,
+ .page-wrapper.with-navbar will automatically push the content-wrapper down
+ by an amount which is equal to the height of the navbar, in order to make
+ space for the navbar.
+-------------------------------------------------------------------------------
+*/
+
+html,
+body {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ left: 0;
+ top: 0;
+}
+
+/* Page wrapper */
+
+.page-wrapper {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+}
+
+/* Sticky alerts */
+
+.sticky-alerts {
+ position: fixed;
+ top: 0;
+ right: 2.4rem;
+ z-index: 100; /* Can be used on top of modals */
+}
+
+/* Navbar */
+
+.navbar {
+ position: relative;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -ms-flex-align: center;
+ align-items: center;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ width: 100%;
+ height: 5rem;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ background-color: #ffffff;
+ background-image: none;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.dark-mode .navbar {
+ background-color: #111417;
+ background-image: none;
+ border-color: rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.navbar.navbar-fixed-bottom {
+ height: 5rem;
+ border-bottom: none;
+ border-top: 1px solid rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.dark-mode .navbar.navbar-fixed-bottom {
+ border-color: rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.navbar.navbar-static-bottom {
+ border-bottom: none;
+ border-top: 1px solid rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.dark-mode .navbar.navbar-static-bottom {
+ border-color: rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.page-wrapper > .navbar {
+ position: fixed;
+ left: 0;
+ z-index: 40;
+ display: none;
+}
+.page-wrapper > .navbar:not(.navbar-fixed-bottom) {
+ top: 0;
+}
+.page-wrapper.with-navbar > .navbar:not(.navbar-fixed-bottom) {
+ display: -ms-flexbox;
+ display: flex;
+}
+.page-wrapper > .navbar.navbar-fixed-bottom {
+ bottom: 0;
+}
+.page-wrapper.with-navbar-fixed-bottom > .navbar.navbar-fixed-bottom {
+ display: -ms-flexbox;
+ display: flex;
+}
+
+/* Sidebar */
+
+.sidebar {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ width: 26rem;
+ max-width: 100%;
+ height: 100%;
+ overflow-x: hidden;
+ overflow-y: auto;
+ z-index: 20;
+ background-color: #ffffff;
+ background-image: none;
+ border-right: 1px solid rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.dark-mode .sidebar {
+ background-color: #191c20;
+ background-image: none;
+ border-color: rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.page-wrapper > .sidebar {
+ display: none;
+}
+.page-wrapper.with-sidebar > .sidebar {
+ display: block;
+}
+
+/* Content wrapper */
+
+.content-wrapper {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ overflow: auto;
+}
+
+/* Page wrapper helper classes */
+
+/* With navbar */
+
+.page-wrapper.with-navbar > .sticky-alerts {
+ top: 5rem;
+}
+.page-wrapper.with-navbar > .content-wrapper {
+ top: 5rem;
+ height: calc(100% - 5rem);
+}
+.page-wrapper.with-navbar > .sidebar {
+ top: 5rem;
+ height: calc(100% - 5rem);
+}
+
+/* With sidebar */
+
+.page-wrapper.with-sidebar > .content-wrapper {
+ left: 26rem;
+ width: calc(100% - 26rem);
+}
+@media (max-width: 768px) {
+ .page-wrapper.with-sidebar > .content-wrapper {
+ width: 100%;
+ }
+}
+
+/* Hidden sidebar */
+
+.page-wrapper.with-sidebar[data-sidebar-hidden] > .sidebar {
+ left: -100%;
+}
+.page-wrapper.with-sidebar[data-sidebar-hidden] > .content-wrapper {
+ width: 100%;
+ left: 0;
+}
+
+/* With navbar fixed to bottom */
+
+.page-wrapper.with-navbar-fixed-bottom > .content-wrapper {
+ bottom: 5rem;
+ height: calc(100% - 5rem);
+}
+
+.page-wrapper.with-navbar-fixed-bottom > .sidebar {
+ bottom: 5rem;
+ height: calc(100% - 5rem);
+}
+
+/* With navbar and navbar fixed to bottom */
+
+.page-wrapper.with-navbar.with-navbar-fixed-bottom > .content-wrapper {
+ top: 5rem;
+ bottom: 5rem;
+ height: calc(100% - 5rem - 5rem);
+}
+
+.page-wrapper.with-navbar.with-navbar-fixed-bottom > .sidebar {
+ top: 5rem;
+ bottom: 5rem;
+ height: calc(100% - 5rem - 5rem);
+}
+
+/* Full height sidebar */
+
+.page-wrapper.with-sidebar[data-sidebar-type~="full-height"] > .sidebar {
+ height: 100%;
+ top: 0;
+}
+.page-wrapper.with-sidebar[data-sidebar-type~="full-height"] > .navbar:not(.navbar-fixed-bottom) {
+ left: 26rem;
+ width: calc(100% - 26rem);
+}
+.page-wrapper.with-sidebar[data-sidebar-type~="full-height"] > .navbar.navbar-fixed-bottom {
+ left: 26rem;
+ width: calc(100% - 26rem);
+}
+@media (max-width: 768px) {
+ .page-wrapper.with-sidebar[data-sidebar-type~="full-height"] > .navbar:not(.navbar-fixed-bottom),
+ .page-wrapper.with-sidebar[data-sidebar-type~="full-height"] > .navbar.navbar-fixed-bottom {
+ width: 100%;
+ }
+}
+.page-wrapper.with-sidebar[data-sidebar-type~="full-height"][data-sidebar-hidden] > .navbar:not(.navbar-fixed-bottom),
+.page-wrapper.with-sidebar[data-sidebar-type~="full-height"][data-sidebar-hidden] > .navbar.navbar-fixed-bottom {
+ left: 0;
+ width: 100%;
+}
+
+/* Overlayed sidebar */
+
+.page-wrapper.with-sidebar[data-sidebar-type~="overlayed-all"] > .navbar:not(.navbar-fixed-bottom),
+.page-wrapper.with-sidebar[data-sidebar-type~="overlayed-all"] > .content-wrapper,
+.page-wrapper.with-sidebar[data-sidebar-type~="overlayed-all"] > .navbar.navbar-fixed-bottom {
+ left: 0;
+ width: 100%;
+}
+.page-wrapper.with-sidebar[data-sidebar-type~="overlayed-all"] > .sidebar {
+ height: 100%;
+ top: 0;
+ z-index: 50;
+}
+.page-wrapper.with-sidebar[data-sidebar-type~="overlayed-all"] > .sidebar-overlay {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ z-index: 45;
+ background-color: rgba(0, 0, 0, 0.75);
+}
+.page-wrapper.with-sidebar[data-sidebar-type~="overlayed-all"][data-sidebar-hidden] > .sidebar-overlay {
+ display: none;
+}
+@media (max-width: 768px) {
+ .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-sm-and-down"] > .navbar:not(.navbar-fixed-bottom),
+ .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-sm-and-down"] > .content-wrapper,
+ .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-sm-and-down"] > .navbar.navbar-fixed-bottom {
+ left: 0;
+ width: 100%;
+ }
+ .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-sm-and-down"] > .sidebar {
+ height: 100%;
+ top: 0;
+ z-index: 50;
+ }
+ .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-sm-and-down"] > .sidebar-overlay {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ z-index: 45;
+ background-color: rgba(0, 0, 0, 0.75);
+ }
+ .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-sm-and-down"][data-sidebar-hidden] > .sidebar-overlay {
+ display: none;
+ }
+}
+
+/* With transitions (for sidebar toggles) */
+
+.page-wrapper.with-transitions.with-sidebar > .sidebar {
+ -webkit-transition: left .4s cubic-bezier(.25, .8, .25, 1);
+ transition: left .4s cubic-bezier(.25, .8, .25, 1);
+}
+.page-wrapper.with-transitions.with-sidebar .content-wrapper,
+.page-wrapper.with-transitions.with-sidebar[data-sidebar-type~="full-height"] > .navbar:not(.navbar-fixed-bottom),
+.page-wrapper.with-transitions.with-sidebar[data-sidebar-type~="full-height"] > .navbar.navbar-fixed-bottom {
+ -webkit-transition: width .4s cubic-bezier(.25, .8, .25, 1), left .4s cubic-bezier(.25, .8, .25, 1);
+ transition: width .4s cubic-bezier(.25, .8, .25, 1), left .4s cubic-bezier(.25, .8, .25, 1);
+}
+
+/* Janky scroll fix (for Safari) */
+
+.content-wrapper,
+.sidebar {
+ -webkit-overflow-scrolling: touch;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+5. Page building (containers, columns, content and card) [hm-05]
+-------------------------------------------------------------------------------
+*/
+
+/* Containers */
+
+.container,
+.container-sm,
+.container-md,
+.container-lg,
+.container-xl,
+.container-fluid {
+ margin-left: auto;
+ margin-right: auto;
+}
+.container-fluid {
+ width: 100%;
+}
+.container {
+ width: 100%;
+}
+.container-sm {
+ width: 100%;
+}
+.container-md {
+ width: 100%;
+}
+.container-lg {
+ width: 100%;
+}
+.container-xl {
+ width: 100%;
+}
+@media (min-width: 577px) {
+ .container {
+ max-width: 54rem;
+ }
+ .container-sm {
+ max-width: 54rem;
+ }
+}
+@media (min-width: 769px) {
+ .container {
+ max-width: 72rem;
+ }
+ .container-sm {
+ max-width: 72rem;
+ }
+ .container-md {
+ max-width: 72rem;
+ }
+}
+@media (min-width: 993px) {
+ .container {
+ max-width: 96rem;
+ }
+ .container-sm {
+ max-width: 96rem;
+ }
+ .container-md {
+ max-width: 96rem;
+ }
+ .container-lg {
+ max-width: 96rem;
+ }
+}
+@media (min-width: 1201px) {
+ .container {
+ max-width: 114rem;
+ }
+ .container-sm {
+ max-width: 114rem;
+ }
+ .container-md {
+ max-width: 114rem;
+ }
+ .container-lg {
+ max-width: 114rem;
+ }
+ .container-xl {
+ max-width: 114rem;
+ }
+}
+
+/* Columns */
+
+.row {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+}
+.col-1,
+.col-2,
+.col-3,
+.col-4,
+.col-5,
+.col-6,
+.col-7,
+.col-8,
+.col-9,
+.col-10,
+.col-11,
+.col-12,
+.col,
+.col-auto,
+.col-sm-1,
+.col-sm-2,
+.col-sm-3,
+.col-sm-4,
+.col-sm-5,
+.col-sm-6,
+.col-sm-7,
+.col-sm-8,
+.col-sm-9,
+.col-sm-10,
+.col-sm-11,
+.col-sm-12,
+.col-sm,
+.col-sm-auto,
+.col-md-1,
+.col-md-2,
+.col-md-3,
+.col-md-4,
+.col-md-5,
+.col-md-6,
+.col-md-7,
+.col-md-8,
+.col-md-9,
+.col-md-10,
+.col-md-11,
+.col-md-12,
+.col-md,
+.col-md-auto,
+.col-lg-1,
+.col-lg-2,
+.col-lg-3,
+.col-lg-4,
+.col-lg-5,
+.col-lg-6,
+.col-lg-7,
+.col-lg-8,
+.col-lg-9,
+.col-lg-10,
+.col-lg-11,
+.col-lg-12,
+.col-lg,
+.col-lg-auto,
+.col-xl-1,
+.col-xl-2,
+.col-xl-3,
+.col-xl-4,
+.col-xl-5,
+.col-xl-6,
+.col-xl-7,
+.col-xl-8,
+.col-xl-9,
+.col-xl-10,
+.col-xl-11,
+.col-xl-12,
+.col-xl,
+.col-xl-auto {
+ position: relative;
+ width: 100%;
+}
+.col {
+ -webkit-flex-basis: 0;
+ -ms-flex-preferred-size: 0;
+ flex-basis: 0;
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ max-width: 100%;
+}
+.col-auto {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ width: auto;
+ max-width: 100%;
+}
+.col-1 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 8.3333333333%;
+ -ms-flex: 0 0 8.3333333333%;
+ flex: 0 0 8.3333333333%;
+ max-width: 8.3333333333%;
+}
+.col-2 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 16.6666666667%;
+ -ms-flex: 0 0 16.6666666667%;
+ flex: 0 0 16.6666666667%;
+ max-width: 16.6666666667%;
+}
+.col-3 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 25%;
+ -ms-flex: 0 0 25%;
+ flex: 0 0 25%;
+ max-width: 25%;
+}
+.col-4 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 33.3333333333%;
+ -ms-flex: 0 0 33.3333333333%;
+ flex: 0 0 33.3333333333%;
+ max-width: 33.3333333333%;
+}
+.col-5 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 41.6666666667%;
+ -ms-flex: 0 0 41.6666666667%;
+ flex: 0 0 41.6666666667%;
+ max-width: 41.6666666667%;
+}
+.col-6 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 50%;
+ -ms-flex: 0 0 50%;
+ flex: 0 0 50%;
+ max-width: 50%;
+}
+.col-7 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 58.3333333333%;
+ -ms-flex: 0 0 58.3333333333%;
+ flex: 0 0 58.3333333333%;
+ max-width: 58.3333333333%;
+}
+.col-8 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 66.6666666667%;
+ -ms-flex: 0 0 66.6666666667%;
+ flex: 0 0 66.6666666667%;
+ max-width: 66.6666666667%;
+}
+.col-9 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 75%;
+ -ms-flex: 0 0 75%;
+ flex: 0 0 75%;
+ max-width: 75%;
+}
+.col-10 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 83.3333333333%;
+ -ms-flex: 0 0 83.3333333333%;
+ flex: 0 0 83.3333333333%;
+ max-width: 83.3333333333%;
+}
+.col-11 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 91.6666666667%;
+ -ms-flex: 0 0 91.6666666667%;
+ flex: 0 0 91.6666666667%;
+ max-width: 91.6666666667%;
+}
+.col-12 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 100%;
+ -ms-flex: 0 0 100%;
+ flex: 0 0 100%;
+ max-width: 100%;
+}
+.order-first {
+ -webkit-box-ordinal-group: 0;
+ -webkit-order: -1;
+ -ms-flex-order: -1;
+ order: -1;
+}
+.order-last {
+ -webkit-box-ordinal-group: 14;
+ -webkit-order: 13;
+ -ms-flex-order: 13;
+ order: 13;
+}
+.order-0 {
+ -webkit-box-ordinal-group: 1;
+ -webkit-order: 0;
+ -ms-flex-order: 0;
+ order: 0;
+}
+.order-1 {
+ -webkit-box-ordinal-group: 2;
+ -webkit-order: 1;
+ -ms-flex-order: 1;
+ order: 1;
+}
+.order-2 {
+ -webkit-box-ordinal-group: 3;
+ -webkit-order: 2;
+ -ms-flex-order: 2;
+ order: 2;
+}
+.order-3 {
+ -webkit-box-ordinal-group: 4;
+ -webkit-order: 3;
+ -ms-flex-order: 3;
+ order: 3;
+}
+.order-4 {
+ -webkit-box-ordinal-group: 5;
+ -webkit-order: 4;
+ -ms-flex-order: 4;
+ order: 4;
+}
+.order-5 {
+ -webkit-box-ordinal-group: 6;
+ -webkit-order: 5;
+ -ms-flex-order: 5;
+ order: 5;
+}
+.order-6 {
+ -webkit-box-ordinal-group: 7;
+ -webkit-order: 6;
+ -ms-flex-order: 6;
+ order: 6;
+}
+.order-7 {
+ -webkit-box-ordinal-group: 8;
+ -webkit-order: 7;
+ -ms-flex-order: 7;
+ order: 7;
+}
+.order-8 {
+ -webkit-box-ordinal-group: 9;
+ -webkit-order: 8;
+ -ms-flex-order: 8;
+ order: 8;
+}
+.order-9 {
+ -webkit-box-ordinal-group: 10;
+ -webkit-order: 9;
+ -ms-flex-order: 9;
+ order: 9;
+}
+.order-10 {
+ -webkit-box-ordinal-group: 11;
+ -webkit-order: 10;
+ -ms-flex-order: 10;
+ order: 10;
+}
+.order-11 {
+ -webkit-box-ordinal-group: 12;
+ -webkit-order: 11;
+ -ms-flex-order: 11;
+ order: 11;
+}
+.order-12 {
+ -webkit-box-ordinal-group: 13;
+ -webkit-order: 12;
+ -ms-flex-order: 12;
+ order: 12;
+}
+.offset-1 {
+ margin-left: 8.3333333333%;
+}
+.offset-2 {
+ margin-left: 16.6666666667%;
+}
+.offset-3 {
+ margin-left: 25%;
+}
+.offset-4 {
+ margin-left: 33.3333333333%;
+}
+.offset-5 {
+ margin-left: 41.6666666667%;
+}
+.offset-6 {
+ margin-left: 50%;
+}
+.offset-7 {
+ margin-left: 58.3333333333%;
+}
+.offset-8 {
+ margin-left: 66.6666666667%;
+}
+.offset-9 {
+ margin-left: 75%;
+}
+.offset-10 {
+ margin-left: 83.3333333333%;
+}
+.offset-11 {
+ margin-left: 91.6666666667%;
+}
+@media (min-width: 577px) {
+ .col-sm {
+ -webkit-flex-basis: 0;
+ -ms-flex-preferred-size: 0;
+ flex-basis: 0;
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ max-width: 100%;
+ }
+ .col-sm-auto {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ width: auto;
+ max-width: 100%;
+ }
+ .col-sm-1 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 8.3333333333%;
+ -ms-flex: 0 0 8.3333333333%;
+ flex: 0 0 8.3333333333%;
+ max-width: 8.3333333333%;
+ }
+ .col-sm-2 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 16.6666666667%;
+ -ms-flex: 0 0 16.6666666667%;
+ flex: 0 0 16.6666666667%;
+ max-width: 16.6666666667%;
+ }
+ .col-sm-3 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 25%;
+ -ms-flex: 0 0 25%;
+ flex: 0 0 25%;
+ max-width: 25%;
+ }
+ .col-sm-4 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 33.3333333333%;
+ -ms-flex: 0 0 33.3333333333%;
+ flex: 0 0 33.3333333333%;
+ max-width: 33.3333333333%;
+ }
+ .col-sm-5 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 41.6666666667%;
+ -ms-flex: 0 0 41.6666666667%;
+ flex: 0 0 41.6666666667%;
+ max-width: 41.6666666667%;
+ }
+ .col-sm-6 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 50%;
+ -ms-flex: 0 0 50%;
+ flex: 0 0 50%;
+ max-width: 50%;
+ }
+ .col-sm-7 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 58.3333333333%;
+ -ms-flex: 0 0 58.3333333333%;
+ flex: 0 0 58.3333333333%;
+ max-width: 58.3333333333%;
+ }
+ .col-sm-8 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 66.6666666667%;
+ -ms-flex: 0 0 66.6666666667%;
+ flex: 0 0 66.6666666667%;
+ max-width: 66.6666666667%;
+ }
+ .col-sm-9 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 75%;
+ -ms-flex: 0 0 75%;
+ flex: 0 0 75%;
+ max-width: 75%;
+ }
+ .col-sm-10 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 83.3333333333%;
+ -ms-flex: 0 0 83.3333333333%;
+ flex: 0 0 83.3333333333%;
+ max-width: 83.3333333333%;
+ }
+ .col-sm-11 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 91.6666666667%;
+ -ms-flex: 0 0 91.6666666667%;
+ flex: 0 0 91.6666666667%;
+ max-width: 91.6666666667%;
+ }
+ .col-sm-12 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 100%;
+ -ms-flex: 0 0 100%;
+ flex: 0 0 100%;
+ max-width: 100%;
+ }
+ .order-sm-first {
+ -webkit-box-ordinal-group: 0;
+ -webkit-order: -1;
+ -ms-flex-order: -1;
+ order: -1;
+ }
+ .order-sm-last {
+ -webkit-box-ordinal-group: 14;
+ -webkit-order: 13;
+ -ms-flex-order: 13;
+ order: 13;
+ }
+ .order-sm-0 {
+ -webkit-box-ordinal-group: 1;
+ -webkit-order: 0;
+ -ms-flex-order: 0;
+ order: 0;
+ }
+ .order-sm-1 {
+ -webkit-box-ordinal-group: 2;
+ -webkit-order: 1;
+ -ms-flex-order: 1;
+ order: 1;
+ }
+ .order-sm-2 {
+ -webkit-box-ordinal-group: 3;
+ -webkit-order: 2;
+ -ms-flex-order: 2;
+ order: 2;
+ }
+ .order-sm-3 {
+ -webkit-box-ordinal-group: 4;
+ -webkit-order: 3;
+ -ms-flex-order: 3;
+ order: 3;
+ }
+ .order-sm-4 {
+ -webkit-box-ordinal-group: 5;
+ -webkit-order: 4;
+ -ms-flex-order: 4;
+ order: 4;
+ }
+ .order-sm-5 {
+ -webkit-box-ordinal-group: 6;
+ -webkit-order: 5;
+ -ms-flex-order: 5;
+ order: 5;
+ }
+ .order-sm-6 {
+ -webkit-box-ordinal-group: 7;
+ -webkit-order: 6;
+ -ms-flex-order: 6;
+ order: 6;
+ }
+ .order-sm-7 {
+ -webkit-box-ordinal-group: 8;
+ -webkit-order: 7;
+ -ms-flex-order: 7;
+ order: 7;
+ }
+ .order-sm-8 {
+ -webkit-box-ordinal-group: 9;
+ -webkit-order: 8;
+ -ms-flex-order: 8;
+ order: 8;
+ }
+ .order-sm-9 {
+ -webkit-box-ordinal-group: 10;
+ -webkit-order: 9;
+ -ms-flex-order: 9;
+ order: 9;
+ }
+ .order-sm-10 {
+ -webkit-box-ordinal-group: 11;
+ -webkit-order: 10;
+ -ms-flex-order: 10;
+ order: 10;
+ }
+ .order-sm-11 {
+ -webkit-box-ordinal-group: 12;
+ -webkit-order: 11;
+ -ms-flex-order: 11;
+ order: 11;
+ }
+ .order-sm-12 {
+ -webkit-box-ordinal-group: 13;
+ -webkit-order: 12;
+ -ms-flex-order: 12;
+ order: 12;
+ }
+ .offset-sm-0 {
+ margin-left: 0;
+ }
+ .offset-sm-1 {
+ margin-left: 8.3333333333%;
+ }
+ .offset-sm-2 {
+ margin-left: 16.6666666667%;
+ }
+ .offset-sm-3 {
+ margin-left: 25%;
+ }
+ .offset-sm-4 {
+ margin-left: 33.3333333333%;
+ }
+ .offset-sm-5 {
+ margin-left: 41.6666666667%;
+ }
+ .offset-sm-6 {
+ margin-left: 50%;
+ }
+ .offset-sm-7 {
+ margin-left: 58.3333333333%;
+ }
+ .offset-sm-8 {
+ margin-left: 66.6666666667%;
+ }
+ .offset-sm-9 {
+ margin-left: 75%;
+ }
+ .offset-sm-10 {
+ margin-left: 83.3333333333%;
+ }
+ .offset-sm-11 {
+ margin-left: 91.6666666667%;
+ }
+}
+@media (min-width: 769px) {
+ .col-md {
+ -webkit-flex-basis: 0;
+ -ms-flex-preferred-size: 0;
+ flex-basis: 0;
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ max-width: 100%;
+ }
+ .col-md-auto {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ width: auto;
+ max-width: 100%;
+ }
+ .col-md-1 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 8.3333333333%;
+ -ms-flex: 0 0 8.3333333333%;
+ flex: 0 0 8.3333333333%;
+ max-width: 8.3333333333%;
+ }
+ .col-md-2 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 16.6666666667%;
+ -ms-flex: 0 0 16.6666666667%;
+ flex: 0 0 16.6666666667%;
+ max-width: 16.6666666667%;
+ }
+ .col-md-3 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 25%;
+ -ms-flex: 0 0 25%;
+ flex: 0 0 25%;
+ max-width: 25%;
+ }
+ .col-md-4 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 33.3333333333%;
+ -ms-flex: 0 0 33.3333333333%;
+ flex: 0 0 33.3333333333%;
+ max-width: 33.3333333333%;
+ }
+ .col-md-5 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 41.6666666667%;
+ -ms-flex: 0 0 41.6666666667%;
+ flex: 0 0 41.6666666667%;
+ max-width: 41.6666666667%;
+ }
+ .col-md-6 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 50%;
+ -ms-flex: 0 0 50%;
+ flex: 0 0 50%;
+ max-width: 50%;
+ }
+ .col-md-7 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 58.3333333333%;
+ -ms-flex: 0 0 58.3333333333%;
+ flex: 0 0 58.3333333333%;
+ max-width: 58.3333333333%;
+ }
+ .col-md-8 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 66.6666666667%;
+ -ms-flex: 0 0 66.6666666667%;
+ flex: 0 0 66.6666666667%;
+ max-width: 66.6666666667%;
+ }
+ .col-md-9 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 75%;
+ -ms-flex: 0 0 75%;
+ flex: 0 0 75%;
+ max-width: 75%;
+ }
+ .col-md-10 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 83.3333333333%;
+ -ms-flex: 0 0 83.3333333333%;
+ flex: 0 0 83.3333333333%;
+ max-width: 83.3333333333%;
+ }
+ .col-md-11 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 91.6666666667%;
+ -ms-flex: 0 0 91.6666666667%;
+ flex: 0 0 91.6666666667%;
+ max-width: 91.6666666667%;
+ }
+ .col-md-12 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 100%;
+ -ms-flex: 0 0 100%;
+ flex: 0 0 100%;
+ max-width: 100%;
+ }
+ .order-md-first {
+ -webkit-box-ordinal-group: 0;
+ -webkit-order: -1;
+ -ms-flex-order: -1;
+ order: -1;
+ }
+ .order-md-last {
+ -webkit-box-ordinal-group: 14;
+ -webkit-order: 13;
+ -ms-flex-order: 13;
+ order: 13;
+ }
+ .order-md-0 {
+ -webkit-box-ordinal-group: 1;
+ -webkit-order: 0;
+ -ms-flex-order: 0;
+ order: 0;
+ }
+ .order-md-1 {
+ -webkit-box-ordinal-group: 2;
+ -webkit-order: 1;
+ -ms-flex-order: 1;
+ order: 1;
+ }
+ .order-md-2 {
+ -webkit-box-ordinal-group: 3;
+ -webkit-order: 2;
+ -ms-flex-order: 2;
+ order: 2;
+ }
+ .order-md-3 {
+ -webkit-box-ordinal-group: 4;
+ -webkit-order: 3;
+ -ms-flex-order: 3;
+ order: 3;
+ }
+ .order-md-4 {
+ -webkit-box-ordinal-group: 5;
+ -webkit-order: 4;
+ -ms-flex-order: 4;
+ order: 4;
+ }
+ .order-md-5 {
+ -webkit-box-ordinal-group: 6;
+ -webkit-order: 5;
+ -ms-flex-order: 5;
+ order: 5;
+ }
+ .order-md-6 {
+ -webkit-box-ordinal-group: 7;
+ -webkit-order: 6;
+ -ms-flex-order: 6;
+ order: 6;
+ }
+ .order-md-7 {
+ -webkit-box-ordinal-group: 8;
+ -webkit-order: 7;
+ -ms-flex-order: 7;
+ order: 7;
+ }
+ .order-md-8 {
+ -webkit-box-ordinal-group: 9;
+ -webkit-order: 8;
+ -ms-flex-order: 8;
+ order: 8;
+ }
+ .order-md-9 {
+ -webkit-box-ordinal-group: 10;
+ -webkit-order: 9;
+ -ms-flex-order: 9;
+ order: 9;
+ }
+ .order-md-10 {
+ -webkit-box-ordinal-group: 11;
+ -webkit-order: 10;
+ -ms-flex-order: 10;
+ order: 10;
+ }
+ .order-md-11 {
+ -webkit-box-ordinal-group: 12;
+ -webkit-order: 11;
+ -ms-flex-order: 11;
+ order: 11;
+ }
+ .order-md-12 {
+ -webkit-box-ordinal-group: 13;
+ -webkit-order: 12;
+ -ms-flex-order: 12;
+ order: 12;
+ }
+ .offset-md-0 {
+ margin-left: 0;
+ }
+ .offset-md-1 {
+ margin-left: 8.3333333333%;
+ }
+ .offset-md-2 {
+ margin-left: 16.6666666667%;
+ }
+ .offset-md-3 {
+ margin-left: 25%;
+ }
+ .offset-md-4 {
+ margin-left: 33.3333333333%;
+ }
+ .offset-md-5 {
+ margin-left: 41.6666666667%;
+ }
+ .offset-md-6 {
+ margin-left: 50%;
+ }
+ .offset-md-7 {
+ margin-left: 58.3333333333%;
+ }
+ .offset-md-8 {
+ margin-left: 66.6666666667%;
+ }
+ .offset-md-9 {
+ margin-left: 75%;
+ }
+ .offset-md-10 {
+ margin-left: 83.3333333333%;
+ }
+ .offset-md-11 {
+ margin-left: 91.6666666667%;
+ }
+}
+@media (min-width: 993px) {
+ .col-lg {
+ -webkit-flex-basis: 0;
+ -ms-flex-preferred-size: 0;
+ flex-basis: 0;
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ max-width: 100%;
+ }
+ .col-lg-auto {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ width: auto;
+ max-width: 100%;
+ }
+ .col-lg-1 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 8.3333333333%;
+ -ms-flex: 0 0 8.3333333333%;
+ flex: 0 0 8.3333333333%;
+ max-width: 8.3333333333%;
+ }
+ .col-lg-2 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 16.6666666667%;
+ -ms-flex: 0 0 16.6666666667%;
+ flex: 0 0 16.6666666667%;
+ max-width: 16.6666666667%;
+ }
+ .col-lg-3 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 25%;
+ -ms-flex: 0 0 25%;
+ flex: 0 0 25%;
+ max-width: 25%;
+ }
+ .col-lg-4 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 33.3333333333%;
+ -ms-flex: 0 0 33.3333333333%;
+ flex: 0 0 33.3333333333%;
+ max-width: 33.3333333333%;
+ }
+ .col-lg-5 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 41.6666666667%;
+ -ms-flex: 0 0 41.6666666667%;
+ flex: 0 0 41.6666666667%;
+ max-width: 41.6666666667%;
+ }
+ .col-lg-6 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 50%;
+ -ms-flex: 0 0 50%;
+ flex: 0 0 50%;
+ max-width: 50%;
+ }
+ .col-lg-7 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 58.3333333333%;
+ -ms-flex: 0 0 58.3333333333%;
+ flex: 0 0 58.3333333333%;
+ max-width: 58.3333333333%;
+ }
+ .col-lg-8 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 66.6666666667%;
+ -ms-flex: 0 0 66.6666666667%;
+ flex: 0 0 66.6666666667%;
+ max-width: 66.6666666667%;
+ }
+ .col-lg-9 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 75%;
+ -ms-flex: 0 0 75%;
+ flex: 0 0 75%;
+ max-width: 75%;
+ }
+ .col-lg-10 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 83.3333333333%;
+ -ms-flex: 0 0 83.3333333333%;
+ flex: 0 0 83.3333333333%;
+ max-width: 83.3333333333%;
+ }
+ .col-lg-11 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 91.6666666667%;
+ -ms-flex: 0 0 91.6666666667%;
+ flex: 0 0 91.6666666667%;
+ max-width: 91.6666666667%;
+ }
+ .col-lg-12 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 100%;
+ -ms-flex: 0 0 100%;
+ flex: 0 0 100%;
+ max-width: 100%;
+ }
+ .order-lg-first {
+ -webkit-box-ordinal-group: 0;
+ -webkit-order: -1;
+ -ms-flex-order: -1;
+ order: -1;
+ }
+ .order-lg-last {
+ -webkit-box-ordinal-group: 14;
+ -webkit-order: 13;
+ -ms-flex-order: 13;
+ order: 13;
+ }
+ .order-lg-0 {
+ -webkit-box-ordinal-group: 1;
+ -webkit-order: 0;
+ -ms-flex-order: 0;
+ order: 0;
+ }
+ .order-lg-1 {
+ -webkit-box-ordinal-group: 2;
+ -webkit-order: 1;
+ -ms-flex-order: 1;
+ order: 1;
+ }
+ .order-lg-2 {
+ -webkit-box-ordinal-group: 3;
+ -webkit-order: 2;
+ -ms-flex-order: 2;
+ order: 2;
+ }
+ .order-lg-3 {
+ -webkit-box-ordinal-group: 4;
+ -webkit-order: 3;
+ -ms-flex-order: 3;
+ order: 3;
+ }
+ .order-lg-4 {
+ -webkit-box-ordinal-group: 5;
+ -webkit-order: 4;
+ -ms-flex-order: 4;
+ order: 4;
+ }
+ .order-lg-5 {
+ -webkit-box-ordinal-group: 6;
+ -webkit-order: 5;
+ -ms-flex-order: 5;
+ order: 5;
+ }
+ .order-lg-6 {
+ -webkit-box-ordinal-group: 7;
+ -webkit-order: 6;
+ -ms-flex-order: 6;
+ order: 6;
+ }
+ .order-lg-7 {
+ -webkit-box-ordinal-group: 8;
+ -webkit-order: 7;
+ -ms-flex-order: 7;
+ order: 7;
+ }
+ .order-lg-8 {
+ -webkit-box-ordinal-group: 9;
+ -webkit-order: 8;
+ -ms-flex-order: 8;
+ order: 8;
+ }
+ .order-lg-9 {
+ -webkit-box-ordinal-group: 10;
+ -webkit-order: 9;
+ -ms-flex-order: 9;
+ order: 9;
+ }
+ .order-lg-10 {
+ -webkit-box-ordinal-group: 11;
+ -webkit-order: 10;
+ -ms-flex-order: 10;
+ order: 10;
+ }
+ .order-lg-11 {
+ -webkit-box-ordinal-group: 12;
+ -webkit-order: 11;
+ -ms-flex-order: 11;
+ order: 11;
+ }
+ .order-lg-12 {
+ -webkit-box-ordinal-group: 13;
+ -webkit-order: 12;
+ -ms-flex-order: 12;
+ order: 12;
+ }
+ .offset-lg-0 {
+ margin-left: 0;
+ }
+ .offset-lg-1 {
+ margin-left: 8.3333333333%;
+ }
+ .offset-lg-2 {
+ margin-left: 16.6666666667%;
+ }
+ .offset-lg-3 {
+ margin-left: 25%;
+ }
+ .offset-lg-4 {
+ margin-left: 33.3333333333%;
+ }
+ .offset-lg-5 {
+ margin-left: 41.6666666667%;
+ }
+ .offset-lg-6 {
+ margin-left: 50%;
+ }
+ .offset-lg-7 {
+ margin-left: 58.3333333333%;
+ }
+ .offset-lg-8 {
+ margin-left: 66.6666666667%;
+ }
+ .offset-lg-9 {
+ margin-left: 75%;
+ }
+ .offset-lg-10 {
+ margin-left: 83.3333333333%;
+ }
+ .offset-lg-11 {
+ margin-left: 91.6666666667%;
+ }
+}
+@media (min-width: 1201px) {
+ .col-xl {
+ -webkit-flex-basis: 0;
+ -ms-flex-preferred-size: 0;
+ flex-basis: 0;
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ max-width: 100%;
+ }
+ .col-xl-auto {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ width: auto;
+ max-width: 100%;
+ }
+ .col-xl-1 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 8.3333333333%;
+ -ms-flex: 0 0 8.3333333333%;
+ flex: 0 0 8.3333333333%;
+ max-width: 8.3333333333%;
+ }
+ .col-xl-2 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 16.6666666667%;
+ -ms-flex: 0 0 16.6666666667%;
+ flex: 0 0 16.6666666667%;
+ max-width: 16.6666666667%;
+ }
+ .col-xl-3 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 25%;
+ -ms-flex: 0 0 25%;
+ flex: 0 0 25%;
+ max-width: 25%;
+ }
+ .col-xl-4 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 33.3333333333%;
+ -ms-flex: 0 0 33.3333333333%;
+ flex: 0 0 33.3333333333%;
+ max-width: 33.3333333333%;
+ }
+ .col-xl-5 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 41.6666666667%;
+ -ms-flex: 0 0 41.6666666667%;
+ flex: 0 0 41.6666666667%;
+ max-width: 41.6666666667%;
+ }
+ .col-xl-6 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 50%;
+ -ms-flex: 0 0 50%;
+ flex: 0 0 50%;
+ max-width: 50%;
+ }
+ .col-xl-7 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 58.3333333333%;
+ -ms-flex: 0 0 58.3333333333%;
+ flex: 0 0 58.3333333333%;
+ max-width: 58.3333333333%;
+ }
+ .col-xl-8 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 66.6666666667%;
+ -ms-flex: 0 0 66.6666666667%;
+ flex: 0 0 66.6666666667%;
+ max-width: 66.6666666667%;
+ }
+ .col-xl-9 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 75%;
+ -ms-flex: 0 0 75%;
+ flex: 0 0 75%;
+ max-width: 75%;
+ }
+ .col-xl-10 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 83.3333333333%;
+ -ms-flex: 0 0 83.3333333333%;
+ flex: 0 0 83.3333333333%;
+ max-width: 83.3333333333%;
+ }
+ .col-xl-11 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 91.6666666667%;
+ -ms-flex: 0 0 91.6666666667%;
+ flex: 0 0 91.6666666667%;
+ max-width: 91.6666666667%;
+ }
+ .col-xl-12 {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 100%;
+ -ms-flex: 0 0 100%;
+ flex: 0 0 100%;
+ max-width: 100%;
+ }
+ .order-xl-first {
+ -webkit-box-ordinal-group: 0;
+ -webkit-order: -1;
+ -ms-flex-order: -1;
+ order: -1;
+ }
+ .order-xl-last {
+ -webkit-box-ordinal-group: 14;
+ -webkit-order: 13;
+ -ms-flex-order: 13;
+ order: 13;
+ }
+ .order-xl-0 {
+ -webkit-box-ordinal-group: 1;
+ -webkit-order: 0;
+ -ms-flex-order: 0;
+ order: 0;
+ }
+ .order-xl-1 {
+ -webkit-box-ordinal-group: 2;
+ -webkit-order: 1;
+ -ms-flex-order: 1;
+ order: 1;
+ }
+ .order-xl-2 {
+ -webkit-box-ordinal-group: 3;
+ -webkit-order: 2;
+ -ms-flex-order: 2;
+ order: 2;
+ }
+ .order-xl-3 {
+ -webkit-box-ordinal-group: 4;
+ -webkit-order: 3;
+ -ms-flex-order: 3;
+ order: 3;
+ }
+ .order-xl-4 {
+ -webkit-box-ordinal-group: 5;
+ -webkit-order: 4;
+ -ms-flex-order: 4;
+ order: 4;
+ }
+ .order-xl-5 {
+ -webkit-box-ordinal-group: 6;
+ -webkit-order: 5;
+ -ms-flex-order: 5;
+ order: 5;
+ }
+ .order-xl-6 {
+ -webkit-box-ordinal-group: 7;
+ -webkit-order: 6;
+ -ms-flex-order: 6;
+ order: 6;
+ }
+ .order-xl-7 {
+ -webkit-box-ordinal-group: 8;
+ -webkit-order: 7;
+ -ms-flex-order: 7;
+ order: 7;
+ }
+ .order-xl-8 {
+ -webkit-box-ordinal-group: 9;
+ -webkit-order: 8;
+ -ms-flex-order: 8;
+ order: 8;
+ }
+ .order-xl-9 {
+ -webkit-box-ordinal-group: 10;
+ -webkit-order: 9;
+ -ms-flex-order: 9;
+ order: 9;
+ }
+ .order-xl-10 {
+ -webkit-box-ordinal-group: 11;
+ -webkit-order: 10;
+ -ms-flex-order: 10;
+ order: 10;
+ }
+ .order-xl-11 {
+ -webkit-box-ordinal-group: 12;
+ -webkit-order: 11;
+ -ms-flex-order: 11;
+ order: 11;
+ }
+ .order-xl-12 {
+ -webkit-box-ordinal-group: 13;
+ -webkit-order: 12;
+ -ms-flex-order: 12;
+ order: 12;
+ }
+ .offset-xl-0 {
+ margin-left: 0;
+ }
+ .offset-xl-1 {
+ margin-left: 8.3333333333%;
+ }
+ .offset-xl-2 {
+ margin-left: 16.6666666667%;
+ }
+ .offset-xl-3 {
+ margin-left: 25%;
+ }
+ .offset-xl-4 {
+ margin-left: 33.3333333333%;
+ }
+ .offset-xl-5 {
+ margin-left: 41.6666666667%;
+ }
+ .offset-xl-6 {
+ margin-left: 50%;
+ }
+ .offset-xl-7 {
+ margin-left: 58.3333333333%;
+ }
+ .offset-xl-8 {
+ margin-left: 66.6666666667%;
+ }
+ .offset-xl-9 {
+ margin-left: 75%;
+ }
+ .offset-xl-10 {
+ margin-left: 83.3333333333%;
+ }
+ .offset-xl-11 {
+ margin-left: 91.6666666667%;
+ }
+}
+
+/* Rows with equal spacing */
+
+.row.row-eq-spacing {
+ margin-top: 3rem;
+ margin-bottom: 3rem;
+ padding-left: calc(3rem/2);
+ padding-right: calc(3rem/2);
+}
+.row.row-eq-spacing>[class^="col"] {
+ padding-left: calc(3rem/2);
+ padding-right: calc(3rem/2);
+}
+.row.row-eq-spacing>[class^="col"]>.content,
+.row.row-eq-spacing>[class^="col"]>.card {
+ margin-left: 0;
+ margin-right: 0;
+}
+.row.row-eq-spacing>[class^="col"]>.content:first-child,
+.row.row-eq-spacing>[class^="col"]>.card:first-child {
+ margin-top: 0;
+}
+.row.row-eq-spacing>[class^="col"]>.content:last-child,
+.row.row-eq-spacing>[class^="col"]>.card:last-child {
+ margin-bottom: 0;
+}
+@media (max-width: 576px) {
+ .row.row-eq-spacing {
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ padding-left: calc(2rem/2);
+ padding-right: calc(2rem/2);
+ }
+ .row.row-eq-spacing>[class^="col"] {
+ padding-left: calc(2rem/2);
+ padding-right: calc(2rem/2);
+ }
+}
+
+/* Adjustments for small screens and up (> 576px) */
+
+@media (min-width: 577px) {
+ .row.row-eq-spacing-sm:not(.row-eq-spacing) {
+ margin-top: 3rem;
+ margin-bottom: 3rem;
+ padding-left: calc(3rem/2);
+ padding-right: calc(3rem/2);
+ }
+ .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"] {
+ padding-left: calc(3rem/2);
+ padding-right: calc(3rem/2);
+ }
+ .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.content,
+ .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.card {
+ margin-left: 0;
+ margin-right: 0;
+ }
+ .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.content:first-child,
+ .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.card:first-child {
+ margin-top: 0;
+ }
+ .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.content:last-child,
+ .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.card:last-child {
+ margin-bottom: 0;
+ }
+}
+@media (max-width: 576px) {
+ .row.row-eq-spacing-sm:not(.row-eq-spacing) {
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ }
+ .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"] {
+ /* No margin collapse (due to flexbox), so half is used */
+ margin-top: calc(2rem/2);
+ margin-bottom: calc(2rem/2);
+ }
+ .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]:first-child {
+ margin-top: 0;
+ }
+ .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]:last-child {
+ margin-bottom: 0;
+ }
+ .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.content,
+ .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.card {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child) {
+ /* Margin collapse, so full is used (not half) */
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ }
+ .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child) {
+ /* Margin collapse, so full is used (not half) */
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ }
+ .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):first-child,
+ .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):first-child {
+ margin-top: 0;
+ }
+ .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):last-child,
+ .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):last-child {
+ margin-bottom: 0;
+ }
+}
+
+/* Adjustments for medium screens and up (> 768px) */
+
+@media (min-width: 769px) {
+ .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing) {
+ margin-top: 3rem;
+ margin-bottom: 3rem;
+ padding-left: calc(3rem/2);
+ padding-right: calc(3rem/2);
+ }
+ .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] {
+ padding-left: calc(3rem/2);
+ padding-right: calc(3rem/2);
+ }
+ .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content,
+ .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card {
+ margin-left: 0;
+ margin-right: 0;
+ }
+ .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:first-child,
+ .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:first-child {
+ margin-top: 0;
+ }
+ .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:last-child,
+ .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:last-child {
+ margin-bottom: 0;
+ }
+}
+@media (max-width: 768px) {
+ .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing) {
+ margin-top: 3rem;
+ margin-bottom: 3rem;
+ }
+ .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] {
+ /* No margin collapse (due to flexbox), so half is used */
+ margin-top: calc(3rem/2);
+ margin-bottom: calc(3rem/2);
+ }
+ .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:first-child {
+ margin-top: 0;
+ }
+ .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:last-child {
+ margin-bottom: 0;
+ }
+ .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content,
+ .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child) {
+ /* Margin collapse, so full is used (not half) */
+ margin-top: 3rem;
+ margin-bottom: 3rem;
+ }
+ .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child) {
+ /* Margin collapse, so full is used (not half) */
+ margin-top: 3rem;
+ margin-bottom: 3rem;
+ }
+ .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):first-child,
+ .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):first-child {
+ margin-top: 0;
+ }
+ .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):last-child,
+ .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):last-child {
+ margin-bottom: 0;
+ }
+}
+@media (max-width: 576px) {
+ .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing) {
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ }
+ .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] {
+ /* No margin collapse (due to flexbox), so half is used */
+ margin-top: calc(2rem/2);
+ margin-bottom: calc(2rem/2);
+ }
+ .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child) {
+ /* Margin collapse, so full is used (not half) */
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ }
+ .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child) {
+ /* Margin collapse, so full is used (not half) */
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ }
+}
+
+/* Adjustments for large screens and up (> 992px) */
+
+@media (min-width: 993px) {
+ .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing) {
+ margin-top: 3rem;
+ margin-bottom: 3rem;
+ padding-left: calc(3rem/2);
+ padding-right: calc(3rem/2);
+ }
+ .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] {
+ padding-left: calc(3rem/2);
+ padding-right: calc(3rem/2);
+ }
+ .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content,
+ .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card {
+ margin-left: 0;
+ margin-right: 0;
+ }
+ .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:first-child,
+ .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:first-child {
+ margin-top: 0;
+ }
+ .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:last-child,
+ .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:last-child {
+ margin-bottom: 0;
+ }
+}
+@media (max-width: 992px) {
+ .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing) {
+ margin-top: 3rem;
+ margin-bottom: 3rem;
+ }
+ .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] {
+ /* No margin collapse (due to flexbox), so half is used */
+ margin-top: calc(3rem/2);
+ margin-bottom: calc(3rem/2);
+ }
+ .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:first-child {
+ margin-top: 0;
+ }
+ .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:last-child {
+ margin-bottom: 0;
+ }
+ .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content,
+ .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child) {
+ /* Margin collapse, so full is used (not half) */
+ margin-top: 3rem;
+ margin-bottom: 3rem;
+ }
+ .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child) {
+ /* Margin collapse, so full is used (not half) */
+ margin-top: 3rem;
+ margin-bottom: 3rem;
+ }
+ .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):first-child,
+ .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):first-child {
+ margin-top: 0;
+ }
+ .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):last-child,
+ .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):last-child {
+ margin-bottom: 0;
+ }
+}
+@media (max-width: 576px) {
+ .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing) {
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ }
+ .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] {
+ /* No margin collapse (due to flexbox), so half is used */
+ margin-top: calc(2rem/2);
+ margin-bottom: calc(2rem/2);
+ }
+ .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child) {
+ /* Margin collapse, so full is used (not half) */
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ }
+ .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child) {
+ /* Margin collapse, so full is used (not half) */
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ }
+}
+
+/* Adjustments for extra large screens and up (> 1200px) */
+
+@media (min-width: 1201px) {
+ .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing) {
+ margin-top: 3rem;
+ margin-bottom: 3rem;
+ padding-left: calc(3rem/2);
+ padding-right: calc(3rem/2);
+ }
+ .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] {
+ padding-left: calc(3rem/2);
+ padding-right: calc(3rem/2);
+ }
+ .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content,
+ .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card {
+ margin-left: 0;
+ margin-right: 0;
+ }
+ .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:first-child,
+ .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:first-child {
+ margin-top: 0;
+ }
+ .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:last-child,
+ .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:last-child {
+ margin-bottom: 0;
+ }
+}
+@media (max-width: 1200px) {
+ .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing) {
+ margin-top: 3rem;
+ margin-bottom: 3rem;
+ }
+ .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] {
+ /* No margin collapse (due to flexbox), so half is used */
+ margin-top: calc(3rem/2);
+ margin-bottom: calc(3rem/2);
+ }
+ .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:first-child {
+ margin-top: 0;
+ }
+ .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:last-child {
+ margin-bottom: 0;
+ }
+ .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content,
+ .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child) {
+ /* Margin collapse, so full is used (not half) */
+ margin-top: 3rem;
+ margin-bottom: 3rem;
+ }
+ .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child) {
+ /* Margin collapse, so full is used (not half) */
+ margin-top: 3rem;
+ margin-bottom: 3rem;
+ }
+ .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):first-child,
+ .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):first-child {
+ margin-top: 0;
+ }
+ .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):last-child,
+ .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):last-child {
+ margin-bottom: 0;
+ }
+}
+@media (max-width: 576px) {
+ .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing) {
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ }
+ .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] {
+ /* No margin collapse (due to flexbox), so half is used */
+ margin-top: calc(2rem/2);
+ margin-bottom: calc(2rem/2);
+ }
+ .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child) {
+ /* Margin collapse, so full is used (not half) */
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ }
+ .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child) {
+ /* Margin collapse, so full is used (not half) */
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ }
+}
+
+/* Content and card */
+
+.content {
+ margin: 3rem;
+}
+@media (max-width: 576px) {
+ .content {
+ margin: 2rem;
+ }
+}
+.content-title {
+ font-size: 2rem;
+ font-weight: 500;
+ margin-top: 0;
+}
+.card {
+ position: relative;
+ margin: 3rem;
+ padding: 3rem;
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffffff;
+ background-image: none;
+ border-radius: 0.4rem;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.dark-mode .card {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: #191c20;
+ background-image: none;
+ border-color: rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+@media (max-width: 576px) {
+ .card {
+ margin: 2rem;
+ padding: 2rem;
+ }
+}
+.card-title {
+ font-size: 2rem;
+ font-weight: 500;
+ margin-top: 0;
+}
+
+/* Card padding */
+
+.p-card {
+ padding: 3rem;
+}
+.px-card {
+ padding-left: 3rem;
+ padding-right: 3rem;
+}
+.py-card {
+ padding-top: 3rem;
+ padding-bottom: 3rem;
+}
+@media (max-width: 576px) {
+ .p-card {
+ padding: 2rem;
+ }
+ .px-card {
+ padding-left: 2rem;
+ padding-right: 2rem;
+ }
+ .py-card {
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+ }
+}
+
+/* Vertical spacer */
+
+.v-spacer {
+ height: 3rem;
+ position: relative;
+ width: 100%;
+}
+@media (max-width: 576px) {
+ .v-spacer {
+ height: 2rem;
+ }
+}
+
+
+/*
+-------------------------------------------------------------------------------
+6. Links [hm-06]
+-------------------------------------------------------------------------------
+*/
+
+a {
+ color: #1890ff;
+ text-decoration: none;
+}
+a:hover {
+ color: #45a3fb;
+ text-decoration: underline;
+}
+.dark-mode a {
+ color: #1890ff;
+}
+.dark-mode a:hover {
+ color: #45a3fb;
+}
+
+/* Hyperlink (anti-aliasing removed in dark mode) */
+
+.dark-mode .hyperlink {
+ -webkit-font-smoothing: auto;
+ -moz-osx-font-smoothing: auto;
+}
+
+/* Underlined hyperlink */
+
+.hyperlink-underline {
+ text-decoration: underline;
+}
+.dark-mode .hyperlink-underline {
+ -webkit-font-smoothing: auto;
+ -moz-osx-font-smoothing: auto;
+}
+
+/*
+-------------------------------------------------------------------------------
+7. Buttons [hm-07]
+
+Notes:
+ ~ When a focused button is hovered over, only the text color and the
+ background color is overridden. This is because most button focus effects
+ tend to be based on border, box shadow, and outline. On the other hand,
+ when a focused input is hovered over, nothing is overridden, and all the
+ focus styles are kept unchanged.
+-------------------------------------------------------------------------------
+*/
+
+/* Default button */
+
+.btn {
+ display: inline-block;
+ height: 3.2rem;
+ line-height: 3.2rem;
+ padding: 0 1.5rem;
+ text-align: center;
+ white-space: nowrap;
+ cursor: pointer;
+ color: rgba(0, 0, 0, 0.7);
+ background-color: #ffffff;
+ background-image: none;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ border-radius: 0.4rem;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.btn:hover {
+ text-decoration: none;
+ color: rgba(0, 0, 0, 0.7);
+ background-color: #f7f7f7;
+ background-image: none;
+ border-color: rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.btn:focus {
+ color: rgba(0, 0, 0, 0.7);
+ background-color: #ffffff;
+ background-image: none;
+ border-color: rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+ -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+ box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+ outline: 1px dotted transparent;
+ outline-offset: 0.2rem;
+}
+.btn.active {
+ color: rgba(0, 0, 0, 0.7);
+ background-color: #ffffff;
+ background-image: none;
+ border-color: rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+ -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+ box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+ outline: 1px dotted transparent;
+ outline-offset: 0.2rem;
+}
+.btn:focus:hover {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: rgba(0, 0, 0, 0.7);
+ background-color: #f7f7f7;
+ background-image: none;
+}
+.btn.active:hover {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: rgba(0, 0, 0, 0.7);
+ background-color: #f7f7f7;
+ background-image: none;
+}
+.dark-mode .btn {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.05);
+ background-image: none;
+ border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+}
+.dark-mode .btn:hover {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.1);
+ background-image: none;
+ border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+}
+.dark-mode .btn:focus {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.05);
+ background-image: none;
+ border-color: rgba(0, 0, 0, 0.4);
+ -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+ -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+ box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+ outline-color: transparent;
+}
+.dark-mode .btn.active {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.05);
+ background-image: none;
+ border-color: rgba(0, 0, 0, 0.4);
+ -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+ -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+ box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+ outline-color: transparent;
+}
+.dark-mode .btn:focus:hover {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.1);
+ background-image: none;
+}
+.dark-mode .btn.active:hover {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.1);
+ background-image: none;
+}
+.btn.disabled,
+.btn:disabled {
+ cursor: not-allowed;
+ opacity: 0.6;
+}
+.btn.disabled {
+ color: rgba(0, 0, 0, 0.7);
+ background-color: #ffffff;
+ background-image: none;
+ border-color: rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.btn:disabled {
+ color: rgba(0, 0, 0, 0.7);
+ background-color: #ffffff;
+ background-image: none;
+ border-color: rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.btn.disabled:hover {
+ color: rgba(0, 0, 0, 0.7);
+ background-color: #ffffff;
+ background-image: none;
+ border-color: rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.btn.disabled:focus {
+ color: rgba(0, 0, 0, 0.7);
+ background-color: #ffffff;
+ background-image: none;
+ border-color: rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.dark-mode .btn.disabled {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.05);
+ background-image: none;
+ border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.dark-mode .btn:disabled {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.05);
+ background-image: none;
+ border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.dark-mode .btn.disabled:hover {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.05);
+ background-image: none;
+ border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.dark-mode .btn.disabled:focus {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.05);
+ background-image: none;
+ border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+
+/* Alternate dark mode default button */
+
+.dark-mode .btn.alt-dm {
+ color: inherit;
+ background-color: rgba(0, 0, 0, 0.15);
+ background-image: none;
+ border-color: rgba(0, 0, 0, 0.05);
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025);
+}
+.dark-mode .btn.alt-dm:hover {
+ color: inherit;
+ background-color: rgba(0, 0, 0, 0.2);
+ background-image: none;
+ border-color: rgba(0, 0, 0, 0.05);
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025);
+}
+.dark-mode .btn.alt-dm:focus {
+ color: inherit;
+ background-color: rgba(0, 0, 0, 0.15);
+ background-image: none;
+ border-color: inherit;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025);
+ outline-color: transparent;
+}
+.dark-mode .btn.alt-dm.active {
+ color: inherit;
+ background-color: rgba(0, 0, 0, 0.15);
+ background-image: none;
+ border-color: inherit;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025);
+ outline-color: transparent;
+}
+.dark-mode .btn.alt-dm:focus:hover {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: inherit;
+ background-color: rgba(0, 0, 0, 0.2);
+ background-image: none;
+}
+.dark-mode .btn.alt-dm.active:hover {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: inherit;
+ background-color: rgba(0, 0, 0, 0.2);
+ background-image: none;
+}
+.dark-mode .btn.alt-dm.disabled {
+ color: inherit;
+ background-color: rgba(0, 0, 0, 0.15);
+ background-image: none;
+ border-color: rgba(0, 0, 0, 0.05);
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.dark-mode .btn.alt-dm:disabled {
+ color: inherit;
+ background-color: rgba(0, 0, 0, 0.15);
+ background-image: none;
+ border-color: rgba(0, 0, 0, 0.05);
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.dark-mode .btn.alt-dm.disabled:hover {
+ color: inherit;
+ background-color: rgba(0, 0, 0, 0.15);
+ background-image: none;
+ border-color: rgba(0, 0, 0, 0.05);
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.dark-mode .btn.alt-dm.disabled:focus {
+ color: inherit;
+ background-color: rgba(0, 0, 0, 0.15);
+ background-image: none;
+ border-color: rgba(0, 0, 0, 0.05);
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+
+/* Small button */
+
+.btn-sm {
+ height: 2.6rem;
+ line-height: 2.6rem;
+ padding: 0 1rem;
+ font-size: 1.2rem;
+}
+
+/* Large button */
+
+.btn-lg {
+ height: 4rem;
+ line-height: 4rem;
+ padding: 0 2rem;
+ font-size: 1.8rem;
+}
+
+/* Block button */
+
+.btn-block {
+ display: block;
+ width: 100%;
+}
+
+/* Link button */
+
+.btn.btn-link {
+ color: #1890ff;
+ background-color: transparent;
+ background-image: none;
+ border-color: transparent;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.btn.btn-link:hover {
+ color: #45a3fb;
+ background-color: transparent;
+ background-image: none;
+ border-color: transparent;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.btn.btn-link:focus {
+ color: #1890ff;
+ background-color: transparent;
+ background-image: none;
+ border-color: transparent;
+ -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+ -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+ box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+ outline-color: transparent;
+}
+.btn.btn-link.active {
+ color: #1890ff;
+ background-color: transparent;
+ background-image: none;
+ border-color: transparent;
+ -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+ -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+ box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+ outline-color: transparent;
+}
+.btn.btn-link:focus:hover {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: #45a3fb;
+ background-color: transparent;
+ background-image: none;
+}
+.btn.btn-link.active:hover {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: #45a3fb;
+ background-color: transparent;
+ background-image: none;
+}
+.dark-mode .btn.btn-link {
+ color: #1890ff;
+ background-color: transparent;
+ background-image: none;
+ border-color: transparent;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ -webkit-font-smoothing: auto;
+ -moz-osx-font-smoothing: auto;
+}
+.dark-mode .btn.btn-link:hover {
+ color: #45a3fb;
+ background-color: transparent;
+ background-image: none;
+ border-color: transparent;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.dark-mode .btn.btn-link:focus {
+ color: #1890ff;
+ background-color: transparent;
+ background-image: none;
+ border-color: transparent;
+ -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+ -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+ box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+ outline-color: transparent;
+}
+.dark-mode .btn.btn-link.active {
+ color: #1890ff;
+ background-color: transparent;
+ background-image: none;
+ border-color: transparent;
+ -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+ -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+ box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+ outline-color: transparent;
+}
+.dark-mode .btn.btn-link:focus:hover {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: #45a3fb;
+ background-color: transparent;
+ background-image: none;
+}
+.dark-mode .btn.btn-link.active:hover {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: #45a3fb;
+ background-color: transparent;
+ background-image: none;
+}
+.btn.btn-link.disabled {
+ color: #1890ff;
+ background-color: transparent;
+ background-image: none;
+ border-color: transparent;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.btn.btn-link:disabled {
+ color: #1890ff;
+ background-color: transparent;
+ background-image: none;
+ border-color: transparent;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.btn.btn-link.disabled:hover {
+ color: #1890ff;
+ background-color: transparent;
+ background-image: none;
+ border-color: transparent;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.btn.btn-link.disabled:focus {
+ color: #1890ff;
+ background-color: transparent;
+ background-image: none;
+ border-color: transparent;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.dark-mode .btn.btn-link.disabled {
+ color: #1890ff;
+ background-color: transparent;
+ background-image: none;
+ border-color: transparent;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.dark-mode .btn.btn-link:disabled {
+ color: #1890ff;
+ background-color: transparent;
+ background-image: none;
+ border-color: transparent;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.dark-mode .btn.btn-link.disabled:hover {
+ color: #1890ff;
+ background-color: transparent;
+ background-image: none;
+ border-color: transparent;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.dark-mode .btn.btn-link.disabled:focus {
+ color: #1890ff;
+ background-color: transparent;
+ background-image: none;
+ border-color: transparent;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+
+/* Primary button */
+
+.btn.btn-primary {
+ color: #ffffff;
+ background-color: #1890ff;
+ background-image: none;
+ border-color: #1890ff;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.btn.btn-primary:hover {
+ color: #ffffff;
+ background-color: #45a3fb;
+ background-image: none;
+ border-color: #45a3fb;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.btn.btn-primary:focus {
+ color: #ffffff;
+ background-color: #1890ff;
+ background-image: none;
+ border-color: #1890ff;
+ -moz-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+ -webkit-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+ box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+ outline-color: transparent;
+}
+.btn.btn-primary.active {
+ color: #ffffff;
+ background-color: #1890ff;
+ background-image: none;
+ border-color: #1890ff;
+ -moz-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+ -webkit-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+ box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+ outline-color: transparent;
+}
+.btn.btn-primary:focus:hover {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: #ffffff;
+ background-color: #45a3fb;
+ background-image: none;
+}
+.btn.btn-primary.active:hover {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: #ffffff;
+ background-color: #45a3fb;
+ background-image: none;
+}
+.dark-mode .btn.btn-primary {
+ color: #ffffff;
+ background-color: #1890ff;
+ background-image: none;
+ border-color: #1890ff;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ -webkit-font-smoothing: auto;
+ -moz-osx-font-smoothing: auto;
+}
+.dark-mode .btn.btn-primary:hover {
+ color: #ffffff;
+ background-color: #45a3fb;
+ background-image: none;
+ border-color: #45a3fb;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+}
+.dark-mode .btn.btn-primary:focus {
+ color: #ffffff;
+ background-color: #1890ff;
+ background-image: none;
+ border-color: #1890ff;
+ -moz-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+ -webkit-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+ box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+ outline-color: transparent;
+}
+.dark-mode .btn.btn-primary.active {
+ color: #ffffff;
+ background-color: #1890ff;
+ background-image: none;
+ border-color: #1890ff;
+ -moz-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+ -webkit-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+ box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+ outline-color: transparent;
+}
+.dark-mode .btn.btn-primary:focus:hover {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: #ffffff;
+ background-color: #45a3fb;
+ background-image: none;
+}
+.dark-mode .btn.btn-primary.active:hover {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: #ffffff;
+ background-color: #45a3fb;
+ background-image: none;
+}
+.btn.btn-primary.disabled {
+ color: #ffffff;
+ background-color: #1890ff;
+ background-image: none;
+ border-color: #1890ff;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.btn.btn-primary:disabled {
+ color: #ffffff;
+ background-color: #1890ff;
+ background-image: none;
+ border-color: #1890ff;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.btn.btn-primary.disabled:hover {
+ color: #ffffff;
+ background-color: #1890ff;
+ background-image: none;
+ border-color: #1890ff;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.btn.btn-primary.disabled:focus {
+ color: #ffffff;
+ background-color: #1890ff;
+ background-image: none;
+ border-color: #1890ff;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.dark-mode .btn.btn-primary.disabled {
+ color: #ffffff;
+ background-color: #1890ff;
+ background-image: none;
+ border-color: #1890ff;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.dark-mode .btn.btn-primary:disabled {
+ color: #ffffff;
+ background-color: #1890ff;
+ background-image: none;
+ border-color: #1890ff;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.dark-mode .btn.btn-primary.disabled:hover {
+ color: #ffffff;
+ background-color: #1890ff;
+ background-image: none;
+ border-color: #1890ff;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.dark-mode .btn.btn-primary.disabled:focus {
+ color: #ffffff;
+ background-color: #1890ff;
+ background-image: none;
+ border-color: #1890ff;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+
+/* Success button */
+
+.btn.btn-success {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #0be881;
+ background-image: none;
+ border-color: #0be881;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.btn.btn-success:hover {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #81eea8;
+ background-image: none;
+ border-color: #81eea8;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.btn.btn-success:focus {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #0be881;
+ background-image: none;
+ border-color: #0be881;
+ -moz-box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3);
+ -webkit-box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3);
+ box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3);
+ outline-color: transparent;
+}
+.btn.btn-success.active {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #0be881;
+ background-image: none;
+ border-color: #0be881;
+ -moz-box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3);
+ -webkit-box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3);
+ box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3);
+ outline-color: transparent;
+}
+.btn.btn-success:focus:hover {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #81eea8;
+ background-image: none;
+}
+.btn.btn-success.active:hover {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #81eea8;
+ background-image: none;
+}
+.dark-mode .btn.btn-success {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #0be881;
+ background-image: none;
+ border-color: #0be881;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ -webkit-font-smoothing: auto;
+ -moz-osx-font-smoothing: auto;
+}
+.dark-mode .btn.btn-success:hover {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #81eea8;
+ background-image: none;
+ border-color: #81eea8;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+}
+.dark-mode .btn.btn-success:focus {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #0be881;
+ background-image: none;
+ border-color: #0be881;
+ -moz-box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3);
+ -webkit-box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3);
+ box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3);
+ outline-color: transparent;
+}
+.dark-mode .btn.btn-success.active {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #0be881;
+ background-image: none;
+ border-color: #0be881;
+ -moz-box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3);
+ -webkit-box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3);
+ box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3);
+ outline-color: transparent;
+}
+.dark-mode .btn.btn-success:focus:hover {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #81eea8;
+ background-image: none;
+}
+.dark-mode .btn.btn-success.active:hover {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #81eea8;
+ background-image: none;
+}
+.btn.btn-success.disabled {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #0be881;
+ background-image: none;
+ border-color: #0be881;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.btn.btn-success:disabled {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #0be881;
+ background-image: none;
+ border-color: #0be881;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.btn.btn-success.disabled:hover {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #0be881;
+ background-image: none;
+ border-color: #0be881;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.btn.btn-success.disabled:focus {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #0be881;
+ background-image: none;
+ border-color: #0be881;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.dark-mode .btn.btn-success.disabled {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #0be881;
+ background-image: none;
+ border-color: #0be881;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.dark-mode .btn.btn-success:disabled {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #0be881;
+ background-image: none;
+ border-color: #0be881;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.dark-mode .btn.btn-success.disabled:hover {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #0be881;
+ background-image: none;
+ border-color: #0be881;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.dark-mode .btn.btn-success.disabled:focus {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #0be881;
+ background-image: none;
+ border-color: #0be881;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+
+/* Secondary button */
+
+.btn.btn-secondary {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffcf00;
+ background-image: none;
+ border-color: #ffcf00;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.btn.btn-secondary:hover {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffe04d;
+ background-image: none;
+ border-color: #ffe04d;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.btn.btn-secondary:focus {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffcf00;
+ background-image: none;
+ border-color: #ffcf00;
+ -moz-box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3);
+ -webkit-box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3);
+ box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3);
+ outline-color: transparent;
+}
+.btn.btn-secondary.active {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffcf00;
+ background-image: none;
+ border-color: #ffcf00;
+ -moz-box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3);
+ -webkit-box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3);
+ box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3);
+ outline-color: transparent;
+}
+.btn.btn-secondary:focus:hover {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffe04d;
+ background-image: none;
+}
+.btn.btn-secondary.active:hover {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffe04d;
+ background-image: none;
+}
+.dark-mode .btn.btn-secondary {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffcf00;
+ background-image: none;
+ border-color: #ffcf00;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ -webkit-font-smoothing: auto;
+ -moz-osx-font-smoothing: auto;
+}
+.dark-mode .btn.btn-secondary:hover {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffe04d;
+ background-image: none;
+ border-color: #ffe04d;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+}
+.dark-mode .btn.btn-secondary:focus {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffcf00;
+ background-image: none;
+ border-color: #ffcf00;
+ -moz-box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3);
+ -webkit-box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3);
+ box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3);
+ outline-color: transparent;
+}
+.dark-mode .btn.btn-secondary.active {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffcf00;
+ background-image: none;
+ border-color: #ffcf00;
+ -moz-box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3);
+ -webkit-box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3);
+ box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3);
+ outline-color: transparent;
+}
+.dark-mode .btn.btn-secondary:focus:hover {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffe04d;
+ background-image: none;
+}
+.dark-mode .btn.btn-secondary.active:hover {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffe04d;
+ background-image: none;
+}
+.btn.btn-secondary.disabled {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffcf00;
+ background-image: none;
+ border-color: #ffcf00;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.btn.btn-secondary:disabled {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffcf00;
+ background-image: none;
+ border-color: #ffcf00;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.btn.btn-secondary.disabled:hover {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffcf00;
+ background-image: none;
+ border-color: #ffcf00;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.btn.btn-secondary.disabled:focus {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffcf00;
+ background-image: none;
+ border-color: #ffcf00;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.dark-mode .btn.btn-secondary.disabled {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffcf00;
+ background-image: none;
+ border-color: #ffcf00;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.dark-mode .btn.btn-secondary:disabled {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffcf00;
+ background-image: none;
+ border-color: #ffcf00;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.dark-mode .btn.btn-secondary.disabled:hover {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffcf00;
+ background-image: none;
+ border-color: #ffcf00;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.dark-mode .btn.btn-secondary.disabled:focus {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffcf00;
+ background-image: none;
+ border-color: #ffcf00;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+
+/* Danger button */
+
+.btn.btn-danger {
+ color: #ffffff;
+ background-color: #ff4d4f;
+ background-image: none;
+ border-color: #ff4d4f;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.btn.btn-danger:hover {
+ color: #ffffff;
+ background-color: #ed586c;
+ background-image: none;
+ border-color: #ed586c;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.btn.btn-danger:focus {
+ color: #ffffff;
+ background-color: #ff4d4f;
+ background-image: none;
+ border-color: #ff4d4f;
+ -moz-box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3);
+ -webkit-box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3);
+ box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3);
+ outline-color: transparent;
+}
+.btn.btn-danger.active {
+ color: #ffffff;
+ background-color: #ff4d4f;
+ background-image: none;
+ border-color: #ff4d4f;
+ -moz-box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3);
+ -webkit-box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3);
+ box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3);
+ outline-color: transparent;
+}
+.btn.btn-danger:focus:hover {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: #ffffff;
+ background-color: #ed586c;
+ background-image: none;
+}
+.btn.btn-danger.active:hover {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: #ffffff;
+ background-color: #ed586c;
+ background-image: none;
+}
+.dark-mode .btn.btn-danger {
+ color: #ffffff;
+ background-color: #ff4d4f;
+ background-image: none;
+ border-color: #ff4d4f;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ -webkit-font-smoothing: auto;
+ -moz-osx-font-smoothing: auto;
+}
+.dark-mode .btn.btn-danger:hover {
+ color: #ffffff;
+ background-color: #ed586c;
+ background-image: none;
+ border-color: #ed586c;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+}
+.dark-mode .btn.btn-danger:focus {
+ color: #ffffff;
+ background-color: #ff4d4f;
+ background-image: none;
+ border-color: #ff4d4f;
+ -moz-box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3);
+ -webkit-box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3);
+ box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3);
+ outline-color: transparent;
+}
+.dark-mode .btn.btn-danger.active {
+ color: #ffffff;
+ background-color: #ff4d4f;
+ background-image: none;
+ border-color: #ff4d4f;
+ -moz-box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3);
+ -webkit-box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3);
+ box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3);
+ outline-color: transparent;
+}
+.dark-mode .btn.btn-danger:focus:hover {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: #ffffff;
+ background-color: #ed586c;
+ background-image: none;
+}
+.dark-mode .btn.btn-danger.active:hover {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: #ffffff;
+ background-color: #ed586c;
+ background-image: none;
+}
+.btn.btn-danger.disabled {
+ color: #ffffff;
+ background-color: #ff4d4f;
+ background-image: none;
+ border-color: #ff4d4f;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.btn.btn-danger:disabled {
+ color: #ffffff;
+ background-color: #ff4d4f;
+ background-image: none;
+ border-color: #ff4d4f;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.btn.btn-danger.disabled:hover {
+ color: #ffffff;
+ background-color: #ff4d4f;
+ background-image: none;
+ border-color: #ff4d4f;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.btn.btn-danger.disabled:focus {
+ color: #ffffff;
+ background-color: #ff4d4f;
+ background-image: none;
+ border-color: #ff4d4f;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.dark-mode .btn.btn-danger.disabled {
+ color: #ffffff;
+ background-color: #ff4d4f;
+ background-image: none;
+ border-color: #ff4d4f;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.dark-mode .btn.btn-danger:disabled {
+ color: #ffffff;
+ background-color: #ff4d4f;
+ background-image: none;
+ border-color: #ff4d4f;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.dark-mode .btn.btn-danger.disabled:hover {
+ color: #ffffff;
+ background-color: #ff4d4f;
+ background-image: none;
+ border-color: #ff4d4f;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.dark-mode .btn.btn-danger.disabled:focus {
+ color: #ffffff;
+ background-color: #ff4d4f;
+ background-image: none;
+ border-color: #ff4d4f;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+
+/* Square button */
+
+.btn-square {
+ width: 3.2rem;
+ padding-left: 0;
+ padding-right: 0;
+}
+.btn-square.btn-sm {
+ width: 2.6rem;
+ padding-left: 0;
+ padding-right: 0;
+}
+.btn-square.btn-lg {
+ width: 4rem;
+ padding-left: 0;
+ padding-right: 0;
+}
+
+/* Rounded button */
+
+.btn-rounded {
+ border-radius: 3.2rem;
+}
+.btn-rounded.btn-sm {
+ border-radius: 2.6rem;
+}
+.btn-rounded.btn-lg {
+ border-radius: 4rem;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+8. List [hm-08]
+-------------------------------------------------------------------------------
+*/
+
+ul {
+ list-style: circle inside;
+}
+ol {
+ list-style: decimal inside;
+}
+ol,
+ul {
+ padding-left: 0;
+ margin-top: 0;
+}
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+ margin: 1.5rem 0 1.5rem 3rem;
+}
+li {
+ margin-bottom: 1rem;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+9. Code [hm-09]
+-------------------------------------------------------------------------------
+*/
+
+code,
+.code {
+ font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+.code {
+ font-size: 1.2rem;
+ line-height: 1.5;
+ padding: 0.1rem 0.5rem;
+ margin: 0 0.1rem;
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ecf0f1;
+ border: 1px solid rgba(0, 0, 0, 0.05);
+ border-radius: 0.2rem;
+}
+.dark-mode .code {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(0, 0, 0, 0.1);
+ border-color: rgba(0, 0, 0, 0.15);
+}
+
+/* Keyboard input */
+
+kbd {
+ font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+ font-size: 1.2rem;
+ line-height: 1.5;
+ padding: 0.1rem 0.5rem;
+ margin: 0 0.1rem;
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffffff;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ border-radius: 0.4rem;
+ -webkit-user-select: none; /* Chrome all / Safari all */
+ -moz-user-select: none; /* Firefox all */
+ -ms-user-select: none; /* IE 10+ */
+ user-select: none;
+}
+.dark-mode kbd {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: transparent;
+ border-color: rgba(255, 255, 255, 0.2);
+}
+
+
+/*
+-------------------------------------------------------------------------------
+10. Tables [hm-10]
+-------------------------------------------------------------------------------
+*/
+
+.table-responsive {
+ overflow-x: auto;
+}
+.table-responsive .table th,
+.table-responsive .table td {
+ white-space: nowrap;
+}
+.table {
+ width: 100%;
+}
+.table thead tr {
+ border-bottom: 2px solid #dadfe1;
+}
+.dark-mode .table thead tr {
+ border-color: #47494d;
+}
+.table tfoot tr {
+ border-top: 2px solid #dadfe1;
+}
+.dark-mode .table tfoot tr {
+ border-color: #47494d;
+}
+.table tbody tr:not(:last-child) {
+ border-bottom: 1px solid #dadfe1;
+}
+.dark-mode .table tbody tr:not(:last-child) {
+ border-color: #47494d;
+}
+.table th {
+ font-weight: 700;
+}
+.table th,
+.table td {
+ text-align: left;
+}
+.table th {
+ padding: 1.2rem 1.5rem;
+}
+.table td {
+ padding: 1.2rem 1.5rem;
+}
+
+/* No outer padding */
+
+.table-no-outer-padding th:first-child,
+.table-no-outer-padding td:first-child {
+ padding-left: 0;
+}
+.table-no-outer-padding th:last-child,
+.table-no-outer-padding td:last-child {
+ padding-right: 0;
+}
+
+/* Bordered table */
+
+.table-bordered {
+ border: 1px solid #dadfe1;
+}
+
+.table-outer-bordered {
+ border: 1px solid #dadfe1;
+}
+.dark-mode .table-bordered {
+ border-color: #47494d;
+}
+.dark-mode .table-outer-bordered {
+ border-color: #47494d;
+}
+.table-bordered th:not(:last-child) {
+ border-right: 1px solid #dadfe1;
+}
+.table-bordered td:not(:last-child) {
+ border-right: 1px solid #dadfe1;
+}
+.table-inner-bordered th:not(:last-child) {
+ border-right: 1px solid #dadfe1;
+}
+.table-inner-bordered td:not(:last-child) {
+ border-right: 1px solid #dadfe1;
+}
+.dark-mode .table-bordered th:not(:last-child) {
+ border-color: #47494d;
+}
+.dark-mode .table-bordered td:not(:last-child) {
+ border-color: #47494d;
+}
+.dark-mode .table-inner-bordered th:not(:last-child) {
+ border-color: #47494d;
+}
+.dark-mode .table-inner-bordered td:not(:last-child) {
+ border-color: #47494d;
+}
+
+/* Hoverable table */
+
+.table-hover tbody tr:hover th {
+ background-color: rgba(0, 0, 0, 0.05);
+}
+
+.table-hover tbody tr:hover td {
+ background-color: rgba(0, 0, 0, 0.05);
+}
+.dark-mode .table-hover tbody tr:hover th {
+ background-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .table-hover tbody tr:hover td {
+ background-color: rgba(0, 0, 0, 0.2);
+}
+
+/* Striped table */
+
+.table-striped tbody tr:nth-child(odd) {
+ background-color: #ecf0f1;
+}
+
+.table-striped tbody tr:nth-child(odd) {
+ background-color: #ecf0f1;
+}
+.dark-mode .table-striped tbody tr:nth-child(odd) {
+ background-color: rgba(0, 0, 0, 0.15);
+}
+.dark-mode .table-striped tbody tr:nth-child(odd) {
+ background-color: rgba(0, 0, 0, 0.15);
+}
+
+/* Primary, success, secondary, danger table rows. */
+
+/* Light mode */
+
+.table tbody tr.table-primary {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #cfe7fd;
+ border-color: #45a3fb;
+}
+
+.table-striped tbody tr.table-primary {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #cfe7fd;
+ border-color: #45a3fb;
+}
+
+.table-bordered tbody tr.table-primary {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #cfe7fd;
+ border-color: #45a3fb;
+}
+
+.table-inner-bordered tbody tr.table-primary {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #cfe7fd;
+ border-color: #45a3fb;
+}
+.table tbody tr.table-primary th {
+ border-color: #bababc;
+}
+.table tbody tr.table-primary td {
+ border-color: #bababc;
+}
+.table-bordered tbody tr.table-primary th {
+ border-color: #bababc;
+}
+.table-bordered tbody tr.table-primary td {
+ border-color: #bababc;
+}
+.table-inner-bordered tbody tr.table-primary th {
+ border-color: #bababc;
+}
+.table-inner-bordered tbody tr.table-primary td {
+ border-color: #bababc;
+}
+.table tbody tr.table-success {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #d5f9e5;
+ border-color: #0be881;
+}
+.table-striped tbody tr.table-success {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #d5f9e5;
+ border-color: #0be881;
+}
+.table-bordered tbody tr.table-success {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #d5f9e5;
+ border-color: #0be881;
+}
+.table-inner-bordered tbody tr.table-success {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #d5f9e5;
+ border-color: #0be881;
+}
+.table tbody tr.table-success th {
+ border-color: #bababc;
+}
+.table tbody tr.table-success td {
+ border-color: #bababc;
+}
+.table-bordered tbody tr.table-success th {
+ border-color: #bababc;
+}
+.table-bordered tbody tr.table-success td {
+ border-color: #bababc;
+}
+.table-inner-bordered tbody tr.table-success th {
+ border-color: #bababc;
+}
+.table-inner-bordered tbody tr.table-success td {
+ border-color: #bababc;
+}
+.table tbody tr.table-secondary {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #fff6cc;
+ border-color: #ffcf00;
+}
+.table-striped tbody tr.table-secondary {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #fff6cc;
+ border-color: #ffcf00;
+}
+.table-bordered tbody tr.table-secondary {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #fff6cc;
+ border-color: #ffcf00;
+}
+.table-inner-bordered tbody tr.table-secondary {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #fff6cc;
+ border-color: #ffcf00;
+}
+.table tbody tr.table-secondary th {
+ border-color: #bababc;
+}
+.table tbody tr.table-secondary td {
+ border-color: #bababc;
+}
+.table-bordered tbody tr.table-secondary th {
+ border-color: #bababc;
+}
+.table-bordered tbody tr.table-secondary td {
+ border-color: #bababc;
+}
+.table-inner-bordered tbody tr.table-secondary th {
+ border-color: #bababc;
+}
+.table-inner-bordered tbody tr.table-secondary td {
+ border-color: #bababc;
+}
+.table tbody tr.table-danger {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #f8d0d9;
+ border-color: #ed586c;
+}
+.table-striped tbody tr.table-danger {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #f8d0d9;
+ border-color: #ed586c;
+}
+.table-bordered tbody tr.table-danger {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #f8d0d9;
+ border-color: #ed586c;
+}
+.table-inner-bordered tbody tr.table-danger {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #f8d0d9;
+ border-color: #ed586c;
+}
+.table tbody tr.table-danger th {
+ border-color: #bababc;
+}
+.table tbody tr.table-danger td {
+ border-color: #bababc;
+}
+.table-bordered tbody tr.table-danger th {
+ border-color: #bababc;
+}
+.table-bordered tbody tr.table-danger td {
+ border-color: #bababc;
+}
+.table-inner-bordered tbody tr.table-danger th {
+ border-color: #bababc;
+}
+.table-inner-bordered tbody tr.table-danger td {
+ border-color: #bababc;
+}
+
+/* Dark mode */
+
+.dark-mode .table tbody tr.table-primary {
+ color: #1890ff;
+ background-color: #172636;
+ border-color: #0d518f;
+}
+
+.dark-mode .table-striped tbody tr.table-primary {
+ color: #1890ff;
+ background-color: #172636;
+ border-color: #0d518f;
+}
+
+.dark-mode .table-bordered tbody tr.table-primary {
+ color: #1890ff;
+ background-color: #172636;
+ border-color: #0d518f;
+}
+
+.dark-mode .table-inner-bordered tbody tr.table-primary {
+ color: #1890ff;
+ background-color: #172636;
+ border-color: #0d518f;
+}
+.dark-mode .table tbody tr.table-primary th {
+ border-color: #47494d;
+}
+.dark-mode .table tbody tr.table-primary td {
+ border-color: #47494d;
+}
+.dark-mode .table-bordered tbody tr.table-primary th {
+ border-color: #47494d;
+}
+.dark-mode .table-bordered tbody tr.table-primary td {
+ border-color: #47494d;
+}
+.dark-mode .table-inner-bordered tbody tr.table-primary th {
+ border-color: #47494d;
+}
+.dark-mode .table-inner-bordered tbody tr.table-primary td {
+ border-color: #47494d;
+}
+.dark-mode .table tbody tr.table-success {
+ color: #0be881;
+ background-color: #17312a;
+ border-color: #0d8951;
+}
+.dark-mode .table-striped tbody tr.table-success {
+ color: #0be881;
+ background-color: #17312a;
+ border-color: #0d8951;
+}
+.dark-mode .table-bordered tbody tr.table-success {
+ color: #0be881;
+ background-color: #17312a;
+ border-color: #0d8951;
+}
+.dark-mode .table-inner-bordered tbody tr.table-success {
+ color: #0be881;
+ background-color: #17312a;
+ border-color: #0d8951;
+}
+.dark-mode .table tbody tr.table-success th {
+ border-color: #47494d;
+}
+.dark-mode .table tbody tr.table-success td {
+ border-color: #47494d;
+}
+.dark-mode .table-bordered tbody tr.table-success th {
+ border-color: #47494d;
+}
+.dark-mode .table-bordered tbody tr.table-success td {
+ border-color: #47494d;
+}
+.dark-mode .table-inner-bordered tbody tr.table-success th {
+ border-color: #47494d;
+}
+.dark-mode .table-inner-bordered tbody tr.table-success td {
+ border-color: #47494d;
+}
+.dark-mode .table tbody tr.table-secondary {
+ color: #ffcf00;
+ background-color: #302c1d;
+ border-color: #8e7710;
+}
+.dark-mode .table-striped tbody tr.table-secondary {
+ color: #ffcf00;
+ background-color: #302c1d;
+ border-color: #8e7710;
+}
+.dark-mode .table-bordered tbody tr.table-secondary {
+ color: #ffcf00;
+ background-color: #302c1d;
+ border-color: #8e7710;
+}
+.dark-mode .table-inner-bordered tbody tr.table-secondary {
+ color: #ffcf00;
+ background-color: #302c1d;
+ border-color: #8e7710;
+}
+.dark-mode .table tbody tr.table-secondary th {
+ border-color: #47494d;
+}
+.dark-mode .table tbody tr.table-secondary td {
+ border-color: #47494d;
+}
+.dark-mode .table-bordered tbody tr.table-secondary th {
+ border-color: #47494d;
+}
+.dark-mode .table-bordered tbody tr.table-secondary td {
+ border-color: #47494d;
+}
+.dark-mode .table-inner-bordered tbody tr.table-secondary th {
+ border-color: #47494d;
+}
+.dark-mode .table-inner-bordered tbody tr.table-secondary td {
+ border-color: #47494d;
+}
+.dark-mode .table tbody tr.table-danger {
+ color: #ff4d4f;
+ background-color: #301923;
+ border-color: #8c0e2e;
+}
+.dark-mode .table-striped tbody tr.table-danger {
+ color: #ff4d4f;
+ background-color: #301923;
+ border-color: #8c0e2e;
+}
+.dark-mode .table-bordered tbody tr.table-danger {
+ color: #ff4d4f;
+ background-color: #301923;
+ border-color: #8c0e2e;
+}
+.dark-mode .table-inner-bordered tbody tr.table-danger {
+ color: #ff4d4f;
+ background-color: #301923;
+ border-color: #8c0e2e;
+}
+.dark-mode .table tbody tr.table-danger th {
+ border-color: #47494d;
+}
+.dark-mode .table tbody tr.table-danger td {
+ border-color: #47494d;
+}
+.dark-mode .table-bordered tbody tr.table-danger th {
+ border-color: #47494d;
+}
+.dark-mode .table-bordered tbody tr.table-danger td {
+ border-color: #47494d;
+}
+.dark-mode .table-inner-bordered tbody tr.table-danger th {
+ border-color: #47494d;
+}
+.dark-mode .table-inner-bordered tbody tr.table-danger td {
+ border-color: #47494d;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+11. Form elements [hm-11]
+-------------------------------------------------------------------------------
+*/
+
+/*
+Fieldsets, form-groups, form-rows and cols, labels, legends, form-text,
+invalid-feedback, inline-form
+*/
+
+fieldset {
+ padding: 0;
+ border-width: 0;
+}
+label {
+ display: inline-block;
+ margin-bottom: 0.6rem;
+}
+label.required:after {
+ content: "*";
+ color: #ff4d4f;
+ margin-left: 0.3rem;
+}
+legend {
+ display: block;
+ margin-bottom: 0.6rem;
+}
+.form-group {
+ margin-bottom: 2rem;
+}
+
+/* Form rows */
+
+.form-row {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ margin-bottom: 2rem;
+}
+
+/* Form rows with equal spacing */
+
+.form-row.row-eq-spacing>[class^="col"] {
+ padding-left: 1rem;
+ padding-right: 1rem;
+}
+.form-row.row-eq-spacing>[class^="col"]:first-child {
+ padding-left: 0;
+}
+.form-row.row-eq-spacing>[class^="col"]:last-child {
+ padding-right: 0;
+}
+
+/* Adjustments for small screens and up (> 576px) */
+
+@media (min-width: 577px) {
+ .form-row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"] {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+ .form-row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]:first-child {
+ padding-left: 0;
+ }
+ .form-row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]:last-child {
+ padding-right: 0;
+ }
+}
+@media (max-width: 576px) {
+ .form-row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+}
+
+/* Adjustments for medium screens and up (> 768px) */
+
+@media (min-width: 769px) {
+ .form-row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+ .form-row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:first-child {
+ padding-left: 0;
+ }
+ .form-row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:last-child {
+ padding-right: 0;
+ }
+}
+@media (max-width: 768px) {
+ .form-row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+}
+
+/* Adjustments for large screens and up (> 992px) */
+
+@media (min-width: 993px) {
+ .form-row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+ .form-row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:first-child {
+ padding-left: 0;
+ }
+ .form-row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:last-child {
+ padding-right: 0;
+ }
+}
+@media (max-width: 992px) {
+ .form-row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+}
+
+/* Adjustments for extra large screens and up (> 1200px) */
+
+@media (min-width: 1201px) {
+ .form-row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+ .form-row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:first-child {
+ padding-left: 0;
+ }
+ .form-row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:last-child {
+ padding-right: 0;
+ }
+}
+@media (max-width: 1200px) {
+ .form-row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+}
+
+/* Form text and feedback */
+
+.form-text {
+ color: rgba(0, 0, 0, 0.7);
+ font-size: 1.4rem;
+ padding-top: 0.8rem;
+ padding-bottom: 0.8rem;
+ border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
+}
+.dark-mode .form-text {
+ color: rgba(255, 255, 255, 0.65);
+ border-color: rgba(255, 255, 255, 0.1);
+}
+.invalid-feedback {
+ color: #ff4d4f;
+ font-size: 1.4rem;
+ padding-top: 0.8rem;
+ padding-bottom: 0.8rem;
+}
+.dark-mode .invalid-feedback {
+ color: #ff4d4f;
+}
+
+/* Inline form */
+
+.form-inline,
+.form-inline .form-group {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.form-inline .form-group {
+ width: 100%;
+}
+.form-inline > .form-control,
+.form-inline > .input-group,
+.form-inline .form-group > .form-control,
+.form-inline .form-group > .input-group {
+ position: relative;
+ -ms-flex: 1 1 0%;
+ flex: 1 1 0%;
+ min-width: 0;
+}
+.form-inline > label,
+.form-inline > .custom-control,
+.form-inline > .form-text,
+.form-inline > .invalid-feedback,
+.form-inline .form-group > label,
+.form-inline .form-group > .custom-control,
+.form-inline .form-group > .form-text,
+.form-inline .form-group > .invalid-feedback {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-align: center;
+ align-items: center;
+ min-width: 0;
+}
+.form-inline > label,
+.form-inline > .form-text,
+.form-inline > .invalid-feedback,
+.form-inline .form-group > label,
+.form-inline .form-group > .form-text,
+.form-inline .form-group > .invalid-feedback {
+ margin: 0;
+ padding: 0;
+ border: none;
+ white-space: nowrap;
+}
+.form-inline > .form-control:not(:last-child) {
+ margin-right: 1rem;
+}
+.form-inline > .input-group:not(:last-child) {
+ margin-right: 1rem;
+}
+.form-inline > label:not(:last-child) {
+ margin-right: 1rem;
+}
+.form-inline > .custom-control {
+ margin-right: 1rem;
+}
+.form-inline > .btn:not(:last-child) {
+ margin-right: 1rem;
+}
+.form-inline > a.btn:not(:last-child) {
+ margin-right: 1rem;
+}
+.form-inline > .form-text:not(:last-child) {
+ margin-right: 1rem;
+}
+.form-inline > .invalid-feedback:not(:last-child) {
+ margin-right: 1rem;
+}
+.form-inline .form-group > .form-control:not(:last-child) {
+ margin-right: 1rem;
+}
+.form-inline .form-group > .input-group:not(:last-child) {
+ margin-right: 1rem;
+}
+.form-inline .form-group > label:not(:last-child) {
+ margin-right: 1rem;
+}
+.form-inline .form-group > .custom-control {
+ margin-right: 1rem;
+}
+.form-inline .form-group > .btn:not(:last-child) {
+ margin-right: 1rem;
+}
+.form-inline .form-group > a.btn:not(:last-child) {
+ margin-right: 1rem;
+}
+.form-inline .form-group > .form-text:not(:last-child) {
+ margin-right: 1rem;
+}
+.form-inline .form-group > .invalid-feedback:not(:last-child) {
+ margin-right: 1rem;
+}
+
+/* Inline form for small screens and up (> 576px) */
+
+@media (min-width: 577px) {
+ .form-inline-sm,
+ .form-inline-sm .form-group {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ -ms-flex-align: center;
+ align-items: center;
+ }
+ .form-inline-sm .form-group {
+ width: 100%;
+ }
+ .form-inline-sm > .form-control,
+ .form-inline-sm > .input-group,
+ .form-inline-sm .form-group > .form-control,
+ .form-inline-sm .form-group > .input-group {
+ position: relative;
+ -ms-flex: 1 1 0%;
+ flex: 1 1 0%;
+ min-width: 0;
+ }
+ .form-inline-sm > label,
+ .form-inline-sm > .custom-control,
+ .form-inline-sm > .form-text,
+ .form-inline-sm > .invalid-feedback,
+ .form-inline-sm .form-group > label,
+ .form-inline-sm .form-group > .custom-control,
+ .form-inline-sm .form-group > .form-text,
+ .form-inline-sm .form-group > .invalid-feedback {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-align: center;
+ align-items: center;
+ min-width: 0;
+ }
+ .form-inline-sm > label,
+ .form-inline-sm > .form-text,
+ .form-inline-sm > .invalid-feedback,
+ .form-inline-sm .form-group > label,
+ .form-inline-sm .form-group > .form-text,
+ .form-inline-sm .form-group > .invalid-feedback {
+ margin: 0;
+ padding: 0;
+ border: none;
+ white-space: nowrap;
+ }
+ .form-inline-sm > .form-control:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-sm > .input-group:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-sm > label:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-sm > .custom-control {
+ margin-right: 1rem;
+ }
+ .form-inline-sm > .btn:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-sm > a.btn:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-sm > .form-text:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-sm > .invalid-feedback:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-sm .form-group > .form-control:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-sm .form-group > .input-group:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-sm .form-group > label:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-sm .form-group > .custom-control {
+ margin-right: 1rem;
+ }
+ .form-inline-sm .form-group > .btn:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-sm .form-group > a.btn:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-sm .form-group > .form-text:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-sm .form-group > .invalid-feedback:not(:last-child) {
+ margin-right: 1rem;
+ }
+}
+@media (max-width: 576px) {
+ .form-inline-sm > .form-control:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+ .form-inline-sm > .input-group:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+ .form-inline-sm > .custom-control {
+ margin-bottom: 2rem;
+ }
+ .form-inline-sm > .btn:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+ .form-inline-sm > a.btn:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+ .form-inline-sm .form-group > .form-control:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+ .form-inline-sm .form-group > .input-group:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+ .form-inline-sm .form-group > .custom-control {
+ margin-bottom: 2rem;
+ }
+ .form-inline-sm .form-group > .btn:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+ .form-inline-sm .form-group > a.btn:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+}
+
+/* Inline form for medium screens and up (> 768px) */
+
+@media (min-width: 769px) {
+ .form-inline-md,
+ .form-inline-md .form-group {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ -ms-flex-align: center;
+ align-items: center;
+ }
+ .form-inline-md .form-group {
+ width: 100%;
+ }
+ .form-inline-md > .form-control,
+ .form-inline-md > .input-group,
+ .form-inline-md .form-group > .form-control,
+ .form-inline-md .form-group > .input-group {
+ position: relative;
+ -ms-flex: 1 1 0%;
+ flex: 1 1 0%;
+ min-width: 0;
+ }
+ .form-inline-md > label,
+ .form-inline-md > .custom-control,
+ .form-inline-md > .form-text,
+ .form-inline-md > .invalid-feedback,
+ .form-inline-md .form-group > label,
+ .form-inline-md .form-group > .custom-control,
+ .form-inline-md .form-group > .form-text,
+ .form-inline-md .form-group > .invalid-feedback {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-align: center;
+ align-items: center;
+ min-width: 0;
+ }
+ .form-inline-md > label,
+ .form-inline-md > .form-text,
+ .form-inline-md > .invalid-feedback,
+ .form-inline-md .form-group > label,
+ .form-inline-md .form-group > .form-text,
+ .form-inline-md .form-group > .invalid-feedback {
+ margin: 0;
+ padding: 0;
+ border: none;
+ white-space: nowrap;
+ }
+ .form-inline-md > .form-control:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-md > .input-group:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-md > label:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-md > .custom-control {
+ margin-right: 1rem;
+ }
+ .form-inline-md > .btn:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-md > a.btn:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-md > .form-text:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-md > .invalid-feedback:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-md .form-group > .form-control:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-md .form-group > .input-group:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-md .form-group > label:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-md .form-group > .custom-control {
+ margin-right: 1rem;
+ }
+ .form-inline-md .form-group > .btn:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-md .form-group > a.btn:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-md .form-group > .form-text:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-md .form-group > .invalid-feedback:not(:last-child) {
+ margin-right: 1rem;
+ }
+}
+@media (max-width: 768px) {
+ .form-inline-md > .form-control:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+ .form-inline-md > .input-group:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+ .form-inline-md > .custom-control {
+ margin-bottom: 2rem;
+ }
+ .form-inline-md > .btn:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+ .form-inline-md > a.btn:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+ .form-inline-md .form-group > .form-control:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+ .form-inline-md .form-group > .input-group:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+ .form-inline-md .form-group > .custom-control {
+ margin-bottom: 2rem;
+ }
+ .form-inline-md .form-group > .btn:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+ .form-inline-md .form-group > a.btn:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+}
+
+/* Inline form for large screens and up (> 992px) */
+
+@media (min-width: 993px) {
+ .form-inline-lg,
+ .form-inline-lg .form-group {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ -ms-flex-align: center;
+ align-items: center;
+ }
+ .form-inline-lg .form-group {
+ width: 100%;
+ }
+ .form-inline-lg > .form-control,
+ .form-inline-lg > .input-group,
+ .form-inline-lg .form-group > .form-control,
+ .form-inline-lg .form-group > .input-group {
+ position: relative;
+ -ms-flex: 1 1 0%;
+ flex: 1 1 0%;
+ min-width: 0;
+ }
+ .form-inline-lg > label,
+ .form-inline-lg > .custom-control,
+ .form-inline-lg > .form-text,
+ .form-inline-lg > .invalid-feedback,
+ .form-inline-lg .form-group > label,
+ .form-inline-lg .form-group > .custom-control,
+ .form-inline-lg .form-group > .form-text,
+ .form-inline-lg .form-group > .invalid-feedback {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-align: center;
+ align-items: center;
+ min-width: 0;
+ }
+ .form-inline-lg > label,
+ .form-inline-lg > .form-text,
+ .form-inline-lg > .invalid-feedback,
+ .form-inline-lg .form-group > label,
+ .form-inline-lg .form-group > .form-text,
+ .form-inline-lg .form-group > .invalid-feedback {
+ margin: 0;
+ padding: 0;
+ border: none;
+ white-space: nowrap;
+ }
+ .form-inline-lg > .form-control:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-lg > .input-group:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-lg > label:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-lg > .custom-control {
+ margin-right: 1rem;
+ }
+ .form-inline-lg > .btn:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-lg > a.btn:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-lg > .form-text:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-lg > .invalid-feedback:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-lg .form-group > .form-control:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-lg .form-group > .input-group:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-lg .form-group > label:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-lg .form-group > .custom-control {
+ margin-right: 1rem;
+ }
+ .form-inline-lg .form-group > .btn:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-lg .form-group > a.btn:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-lg .form-group > .form-text:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-lg .form-group > .invalid-feedback:not(:last-child) {
+ margin-right: 1rem;
+ }
+}
+@media (max-width: 992px) {
+ .form-inline-lg > .form-control:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+ .form-inline-lg > .input-group:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+ .form-inline-lg > .custom-control {
+ margin-bottom: 2rem;
+ }
+ .form-inline-lg > .btn:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+ .form-inline-lg > a.btn:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+ .form-inline-lg .form-group > .form-control:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+ .form-inline-lg .form-group > .input-group:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+ .form-inline-lg .form-group > .custom-control {
+ margin-bottom: 2rem;
+ }
+ .form-inline-lg .form-group > .btn:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+ .form-inline-lg .form-group > a.btn:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+}
+
+/* Inline form for extra large screens and up (> 1200px) */
+
+@media (min-width: 1201px) {
+ .form-inline-xl,
+ .form-inline-xl .form-group {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ -ms-flex-align: center;
+ align-items: center;
+ }
+ .form-inline-xl .form-group {
+ width: 100%;
+ }
+ .form-inline-xl > .form-control,
+ .form-inline-xl > .input-group,
+ .form-inline-xl .form-group > .form-control,
+ .form-inline-xl .form-group > .input-group {
+ position: relative;
+ -ms-flex: 1 1 0%;
+ flex: 1 1 0%;
+ min-width: 0;
+ }
+ .form-inline-xl > label,
+ .form-inline-xl > .custom-control,
+ .form-inline-xl > .form-text,
+ .form-inline-xl > .invalid-feedback,
+ .form-inline-xl .form-group > label,
+ .form-inline-xl .form-group > .custom-control,
+ .form-inline-xl .form-group > .form-text,
+ .form-inline-xl .form-group > .invalid-feedback {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-align: center;
+ align-items: center;
+ min-width: 0;
+ }
+ .form-inline-xl > label,
+ .form-inline-xl > .form-text,
+ .form-inline-xl > .invalid-feedback,
+ .form-inline-xl .form-group > label,
+ .form-inline-xl .form-group > .form-text,
+ .form-inline-xl .form-group > .invalid-feedback {
+ margin: 0;
+ padding: 0;
+ border: none;
+ white-space: nowrap;
+ }
+ .form-inline-xl > .form-control:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-xl > .input-group:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-xl > label:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-xl > .custom-control {
+ margin-right: 1rem;
+ }
+ .form-inline-xl > .btn:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-xl > a.btn:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-xl > .form-text:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-xl > .invalid-feedback:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-xl .form-group > .form-control:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-xl .form-group > .input-group:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-xl .form-group > label:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-xl .form-group > .custom-control {
+ margin-right: 1rem;
+ }
+ .form-inline-xl .form-group > .btn:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-xl .form-group > a.btn:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-xl .form-group > .form-text:not(:last-child) {
+ margin-right: 1rem;
+ }
+ .form-inline-xl .form-group > .invalid-feedback:not(:last-child) {
+ margin-right: 1rem;
+ }
+}
+@media (max-width: 1200px) {
+ .form-inline-xl > .form-control:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+ .form-inline-xl > .input-group:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+ .form-inline-xl > .custom-control {
+ margin-bottom: 2rem;
+ }
+ .form-inline-xl > .btn:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+ .form-inline-xl > a.btn:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+ .form-inline-xl .form-group > .form-control:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+ .form-inline-xl .form-group > .input-group:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+ .form-inline-xl .form-group > .custom-control {
+ margin-bottom: 2rem;
+ }
+ .form-inline-xl .form-group > .btn:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+ .form-inline-xl .form-group > a.btn:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+}
+
+/* Inputs */
+
+.form-control {
+ display: block;
+ width: 100%;
+ height: 3.2rem;
+ padding-left: 0.8rem;
+ padding-right: 0.8rem;
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffffff;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ border-radius: 0.4rem;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ /* Removes the default styles on some devices. */
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+}
+.form-control-sm {
+ height: 2.6rem;
+ padding-left: 0.8rem;
+ padding-right: 0.8rem;
+ font-size: 1.2rem;
+}
+.form-control-lg {
+ height: 4rem;
+ padding-left: 0.8rem;
+ padding-right: 0.8rem;
+ font-size: 1.8rem;
+}
+textarea.form-control {
+ max-width: 100%;
+ min-height: 10rem;
+ padding: 0.8rem;
+ line-height: 1.5;
+}
+textarea.form-control-sm {
+ min-height: 8rem;
+ padding: 0.8rem;
+}
+textarea.form-control-lg {
+ min-height: 14rem;
+ padding: 0.8rem;
+}
+.form-control:hover {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffffff;
+ border-color: rgba(0, 0, 0, 0.3);
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.form-control:focus {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffffff;
+ border-color: rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+ -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+ box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+ outline: none;
+}
+::-webkit-input-placeholder {
+ /* Edge */
+ color: rgba(0, 0, 0, 0.35);
+}
+:-ms-input-placeholder {
+ /* Internet Explorer 10-11 */
+ color: rgba(0, 0, 0, 0.35);
+}
+::placeholder {
+ color: rgba(0, 0, 0, 0.35);
+}
+.form-control.disabled {
+ /*
+ The :disabled selector must still be added to the input field for the
+ forms to work as intended. Moreover, since focusing on an input with the
+ :disabled selector is impossible, the :focus styles are not overridden
+ (along with the :focus box shadows).
+ */
+ cursor: not-allowed;
+ opacity: 0.6;
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ecf0f1;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.form-control:disabled {
+ /*
+ The :disabled selector must still be added to the input field for the
+ forms to work as intended. Moreover, since focusing on an input with the
+ :disabled selector is impossible, the :focus styles are not overridden
+ (along with the :focus box shadows).
+ */
+ cursor: not-allowed;
+ opacity: 0.6;
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ecf0f1;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.form-control.disabled:hover {
+ /*
+ The :disabled selector must still be added to the input field for the
+ forms to work as intended. Moreover, since focusing on an input with the
+ :disabled selector is impossible, the :focus styles are not overridden
+ (along with the :focus box shadows).
+ */
+ cursor: not-allowed;
+ opacity: 0.6;
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ecf0f1;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.form-control:disabled:hover {
+ /*
+ The :disabled selector must still be added to the input field for the
+ forms to work as intended. Moreover, since focusing on an input with the
+ :disabled selector is impossible, the :focus styles are not overridden
+ (along with the :focus box shadows).
+ */
+ cursor: not-allowed;
+ opacity: 0.6;
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ecf0f1;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .form-control {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.05);
+ border-color: rgba(0, 0, 0, 0.3);
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.dark-mode .form-control:hover {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.05);
+ border-color: rgba(0, 0, 0, 0.4);
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.dark-mode .form-control:focus {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.05);
+ border-color: rgba(0, 0, 0, 0.4);
+ -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+ -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+ box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+ outline: none;
+}
+.dark-mode ::-webkit-input-placeholder {
+ /* Edge */
+ color: rgba(255, 255, 255, 0.2);
+}
+.dark-mode :-ms-input-placeholder {
+ /* Internet Explorer 10-11 */
+ color: rgba(255, 255, 255, 0.2);
+}
+.dark-mode ::placeholder {
+ color: rgba(255, 255, 255, 0.2);
+}
+.dark-mode .form-control.disabled {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(0, 0, 0, 0.15);
+ border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .form-control:disabled {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(0, 0, 0, 0.15);
+ border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .form-control.disabled:hover {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(0, 0, 0, 0.15);
+ border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .form-control:disabled:hover {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(0, 0, 0, 0.15);
+ border-color: rgba(0, 0, 0, 0.3);
+}
+
+/* Alternate dark mode inputs */
+
+.dark-mode .form-control.alt-dm {
+ color: inherit;
+ background-color: rgba(0, 0, 0, 0.15);
+ border-color: transparent;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.dark-mode .form-control.alt-dm:hover {
+ color: inherit;
+ background-color: rgba(0, 0, 0, 0.15);
+ border-color: rgba(0, 0, 0, 0.1);
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.dark-mode .form-control.alt-dm:focus {
+ color: inherit;
+ background-color: rgba(0, 0, 0, 0.15);
+ border-color: inherit;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.dark-mode .form-control.alt-dm::-webkit-input-placeholder {
+ /* Edge */
+ color: rgba(255, 255, 255, 0.5);
+}
+.dark-mode .form-control.alt-dm:-ms-input-placeholder {
+ /* Internet Explorer 10-11 */
+ color: rgba(255, 255, 255, 0.5);
+}
+.dark-mode .form-control.alt-dm::placeholder {
+ color: rgba(255, 255, 255, 0.5);
+}
+.dark-mode .form-control.alt-dm.disabled {
+ color: inherit;
+ background-color: rgba(0, 0, 0, 0.3);
+ border-color: transparent;
+}
+.dark-mode .form-control.alt-dm:disabled {
+ color: inherit;
+ background-color: rgba(0, 0, 0, 0.3);
+ border-color: transparent;
+}
+.dark-mode .form-control.alt-dm.disabled:hover {
+ color: inherit;
+ background-color: rgba(0, 0, 0, 0.3);
+ border-color: transparent;
+}
+.dark-mode .form-control.alt-dm:disabled:hover {
+ color: inherit;
+ background-color: rgba(0, 0, 0, 0.3);
+ border-color: transparent;
+}
+
+/* Inputs invalid (with errors) */
+
+.form-group.is-invalid .form-control {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffffff;
+ border-color: #ff4d4f;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+.form-control.is-invalid {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffffff;
+ border-color: #ff4d4f;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.form-group.is-invalid .form-control:hover {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffffff;
+ border-color: #ff4d4f;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.form-control.is-invalid:hover {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffffff;
+ border-color: #ff4d4f;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.form-group.is-invalid .form-control:focus {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffffff;
+ border-color: #f8d0d9;
+ -moz-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6);
+ -webkit-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6);
+ box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6);
+ outline: none;
+}
+.form-control.is-invalid:focus {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffffff;
+ border-color: #f8d0d9;
+ -moz-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6);
+ -webkit-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6);
+ box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6);
+ outline: none;
+}
+.form-group.is-invalid .form-control::-webkit-input-placeholder {
+ /* Edge */
+ color: rgba(0, 0, 0, 0.35);
+}
+.form-group.is-invalid .form-control:-ms-input-placeholder {
+ /* Internet Explorer 10-11 */
+ color: rgba(0, 0, 0, 0.35);
+}
+.form-group.is-invalid .form-control::placeholder {
+ color: rgba(0, 0, 0, 0.35);
+}
+.form-control.is-invalid::-webkit-input-placeholder {
+ /* Edge */
+ color: rgba(0, 0, 0, 0.35);
+}
+.form-control.is-invalid:-ms-input-placeholder {
+ /* Internet Explorer 10-11 */
+ color: rgba(0, 0, 0, 0.35);
+}
+.form-control.is-invalid::placeholder {
+ color: rgba(0, 0, 0, 0.35);
+}
+.dark-mode .form-group.is-invalid .form-control {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.05);
+ border-color: #ff4d4f;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.dark-mode .form-control.is-invalid {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.05);
+ border-color: #ff4d4f;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.dark-mode .form-group.is-invalid .form-control:hover {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.05);
+ border-color: #ff4d4f;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.dark-mode .form-control.is-invalid:hover {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.05);
+ border-color: #ff4d4f;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.dark-mode .form-group.is-invalid .form-control:focus {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.05);
+ border-color: #ff4d4f;
+ -moz-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+ -webkit-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+ box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+ outline: none;
+}
+.dark-mode .form-control.is-invalid:focus {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.05);
+ border-color: #ff4d4f;
+ -moz-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+ -webkit-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+ box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+ outline: none;
+}
+.dark-mode .form-group.is-invalid .form-control::-webkit-input-placeholder {
+ /* Edge */
+ color: rgba(255, 255, 255, 0.2);
+}
+.dark-mode .form-group.is-invalid .form-control:-ms-input-placeholder {
+ /* Internet Explorer 10-11 */
+ color: rgba(255, 255, 255, 0.2);
+}
+.dark-mode .form-group.is-invalid .form-control::placeholder {
+ color: rgba(255, 255, 255, 0.2);
+}
+.dark-mode .form-control.is-invalid::-webkit-input-placeholder {
+ /* Edge */
+ color: rgba(255, 255, 255, 0.2);
+}
+.dark-mode .form-control.is-invalid:-ms-input-placeholder {
+ /* Internet Explorer 10-11 */
+ color: rgba(255, 255, 255, 0.2);
+}
+.dark-mode .form-control.is-invalid::placeholder {
+ color: rgba(255, 255, 255, 0.2);
+}
+.dark-mode .form-group.is-invalid .form-control.alt-dm {
+ color: inherit;
+ background-color: rgba(0, 0, 0, 0.15);
+ border-color: #ed586c;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.dark-mode .form-control.alt-dm.is-invalid {
+ color: inherit;
+ background-color: rgba(0, 0, 0, 0.15);
+ border-color: #ed586c;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.dark-mode .form-group.is-invalid .form-control.alt-dm:hover {
+ color: inherit;
+ background-color: rgba(0, 0, 0, 0.15);
+ border-color: #ed586c;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.dark-mode .form-control.alt-dm.is-invalid:hover {
+ color: inherit;
+ background-color: rgba(0, 0, 0, 0.15);
+ border-color: #ed586c;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.dark-mode .form-group.is-invalid .form-control.alt-dm:focus {
+ color: inherit;
+ background-color: rgba(0, 0, 0, 0.15);
+ border-color: #ed586c;
+ -moz-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+ -webkit-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+ box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+ outline: none;
+}
+.dark-mode .form-control.alt-dm.is-invalid:focus {
+ color: inherit;
+ background-color: rgba(0, 0, 0, 0.15);
+ border-color: #ed586c;
+ -moz-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+ -webkit-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+ box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+ outline: none;
+}
+.dark-mode .form-group.is-invalid .form-control.alt-dm.is-invalid::-webkit-input-placeholder {
+ /* Edge */
+ color: rgba(255, 255, 255, 0.5);
+}
+.dark-mode .form-group.is-invalid .form-control.alt-dm.is-invalid:-ms-input-placeholder {
+ /* Internet Explorer 10-11 */
+ color: rgba(255, 255, 255, 0.5);
+}
+.dark-mode .form-group.is-invalid .form-control.alt-dm.is-invalid::placeholder {
+ color: rgba(255, 255, 255, 0.5);
+}
+.dark-mode .form-control.alt-dm.is-invalid::-webkit-input-placeholder {
+ /* Edge */
+ color: rgba(255, 255, 255, 0.5);
+}
+.dark-mode .form-control.alt-dm.is-invalid:-ms-input-placeholder {
+ /* Internet Explorer 10-11 */
+ color: rgba(255, 255, 255, 0.5);
+}
+.dark-mode .form-control.alt-dm.is-invalid::placeholder {
+ color: rgba(255, 255, 255, 0.5);
+}
+
+/* Selects */
+
+select.form-control:not([multiple]) {
+ cursor: pointer;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAI9JREFUeNpiZACCyMjIBCDVD8SOy5cvv8BAAgDqNQBS+4G4EKh3ASPUsPlQ+Q+kGIpkmABUKJEJ6jIYAEnshyok1TAQ6AcZ6Ah1GdGG4jAM7DtGQgrQvU9ILSOxColVw0is7VA2QV8wkhA+DMQECSMJgc5AyDCcBhIwFG9aZSQxrRFM+IwkJGAGYnIRQIABACQuXCKovu2mAAAAAElFTkSuQmCC);
+ background-size: 1rem;
+ background-repeat: no-repeat;
+ background-position: calc(100% - 1rem) center;
+ padding-right: 3.6rem;
+}
+.dark-mode select.form-control:not([multiple]) > option {
+ /* Required for some browsers, such as Firefox, or the old Ms Edge (ignored on webkit browsers) */
+ color: rgba(255, 255, 255, 0.8);
+ background-color: #191c20;
+}
+.dark-mode select.form-control:not([multiple]) > option:hover {
+ /* Required for some browsers, such as Firefox, or the old Ms Edge (ignored on webkit browsers) */
+ color: rgba(255, 255, 255, 0.8);
+ background-color: #1890ff;
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+ /*
+ This hack resets the select boxes to their defaults on IE, because it is
+ not possible to remove the default dropdown arrow.
+ */
+ select.form-control:not([multiple]) {
+ background-image: none;
+ background-size: auto;
+ background-repeat: initial;
+ background-position: 0% 0%;
+ padding-right: 0;
+ }
+}
+select.form-control[multiple] {
+ overflow: auto;
+ height: auto;
+ padding: 0.8rem;
+}
+select.form-control-sm[multiple] {
+ padding: 0.8rem;
+}
+select.form-control-lg[multiple] {
+ padding: 0.8rem;
+}
+select.form-control[multiple] > option:not(:checked) {
+ color: rgba(0, 0, 0, 0.85);
+}
+.dark-mode select.form-control[multiple] > option:not(:checked) {
+ color: rgba(255, 255, 255, 0.8);
+}
+select.form-control[multiple] > option:disabled {
+ color: rgba(0, 0, 0, 0.6);
+}
+.dark-mode select.form-control[multiple] > option:disabled {
+ color: rgba(255, 255, 255, 0.6);
+}
+
+/* Checkbox */
+
+.custom-checkbox {
+ display: block;
+ position: relative;
+ line-height: 1.8rem;
+}
+.custom-checkbox input[type="checkbox"] {
+ /* Hide the default */
+ position: absolute;
+ opacity: 0;
+ height: 0;
+ width: 0;
+}
+.custom-checkbox label {
+ display: inline-block;
+ margin-bottom: 0;
+ padding-left: 2.5rem;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.custom-checkbox label.blank {
+ padding-left: 1.8rem;
+}
+.custom-checkbox label:before {
+ content: "";
+ display: inline-block;
+ position: absolute;
+ height: 1.8rem;
+ width: 1.8rem;
+ top: 0;
+ left: 0;
+ background-color: #ffffff;
+ border: 1px solid rgba(0, 0, 0, 0.3);
+ border-radius: 0.4rem;
+}
+.custom-checkbox input[type="checkbox"]:hover~label:before {
+ background-color: #ffffff;
+ border-color: rgba(0, 0, 0, 0.4);
+}
+.custom-checkbox input[type="checkbox"]:focus~label:before {
+ border-color: rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+ -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+ box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+}
+.custom-checkbox input[type="checkbox"]:checked~label:before {
+ background-color: #1890ff;
+ border-color: #1890ff;
+}
+.custom-checkbox input[type="checkbox"]:checked:focus~label:before {
+ border-color: #1890ff;
+ -moz-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+ -webkit-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+ box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+}
+.dark-mode .custom-checkbox label:before {
+ background-color: transparent;
+ border-color: rgba(255, 255, 255, 0.15);
+}
+.dark-mode .custom-checkbox input[type="checkbox"]:hover~label:before {
+ background-color: transparent;
+ border-color: rgba(255, 255, 255, 0.3);
+}
+.dark-mode .custom-checkbox input[type="checkbox"]:focus~label:before {
+ border-color: rgba(0, 0, 0, 0.4);
+ -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+ -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+ box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+}
+.dark-mode .custom-checkbox input[type="checkbox"]:checked~label:before {
+ background-color: #1890ff;
+ border-color: #1890ff;
+}
+.dark-mode .custom-checkbox input[type="checkbox"]:checked:focus~label:before {
+ border-color: #1890ff;
+ -moz-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+ -webkit-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+ box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+}
+.custom-checkbox label:after {
+ content: "";
+ position: absolute;
+ display: none;
+ left: 0.6rem;
+ top: 0.3rem;
+ width: 0.6rem;
+ height: 1rem;
+ border: solid #ffffff;
+ border-width: 0 0.2rem 0.2rem 0;
+ -webkit-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+}
+.dark-mode .custom-checkbox label:after {
+ border-color: #ffffff;
+}
+.custom-checkbox input[type="checkbox"]:checked~label:after {
+ display: block;
+}
+.custom-checkbox input[type="checkbox"]:disabled~label {
+ opacity: 0.6;
+ cursor: not-allowed;
+}
+.custom-checkbox input[type="checkbox"]:disabled~label:before {
+ background-color: #ffffff;
+ border-color: rgba(0, 0, 0, 0.3);
+}
+.custom-checkbox input[type="checkbox"]:hover:disabled~label:before {
+ background-color: #ffffff;
+ border-color: rgba(0, 0, 0, 0.3);
+}
+.custom-checkbox input[type="checkbox"]:disabled:checked~label:before {
+ background-color: #1890ff;
+ border-color: #1890ff;
+}
+.custom-checkbox input[type="checkbox"]:hover:disabled:checked~label:before {
+ background-color: #1890ff;
+ border-color: #1890ff;
+}
+.dark-mode .custom-checkbox input[type="checkbox"]:disabled~label:before {
+ background-color: transparent;
+ border-color: rgba(255, 255, 255, 0.15);
+}
+.dark-mode .custom-checkbox input[type="checkbox"]:hover:disabled~label:before {
+ background-color: transparent;
+ border-color: rgba(255, 255, 255, 0.15);
+}
+.dark-mode .custom-checkbox input[type="checkbox"]:disabled:checked~label:before {
+ background-color: #1890ff;
+ border-color: #1890ff;
+}
+.dark-mode .custom-checkbox input[type="checkbox"]:hover:disabled:checked~label:before {
+ background-color: #1890ff;
+ border-color: #1890ff;
+}
+
+/* Radio */
+
+.custom-radio {
+ display: block;
+ position: relative;
+ line-height: 1.6rem;
+}
+.form-group .custom-radio {
+ margin: 0.8rem 0 0 0;
+}
+.custom-radio input[type="radio"] {
+ /* Hide the default */
+ position: absolute;
+ opacity: 0;
+ height: 0;
+ width: 0;
+}
+.custom-radio label {
+ display: inline-block;
+ margin-bottom: 0;
+ padding-left: 2.5rem;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.custom-radio label.blank {
+ padding-left: 1.6rem;
+}
+.custom-radio label:before {
+ content: "";
+ display: inline-block;
+ position: absolute;
+ height: 1.6rem;
+ width: 1.6rem;
+ top: 0;
+ left: 0;
+ background-color: #ffffff;
+ border: 1px solid rgba(0, 0, 0, 0.3);
+ border-radius: 50%;
+}
+.custom-radio input[type="radio"]:hover~label:before {
+ background-color: #ffffff;
+ border-color: rgba(0, 0, 0, 0.4);
+}
+.custom-radio input[type="radio"]:focus~label:before {
+ border-color: rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+ -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+ box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+}
+.custom-radio input[type="radio"]:checked~label:before {
+ background-color: #1890ff;
+ border-color: #1890ff;
+}
+.custom-radio input[type="radio"]:checked:focus~label:before {
+ border-color: #1890ff;
+ -moz-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+ -webkit-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+ box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+}
+.dark-mode .custom-radio label:before {
+ background-color: transparent;
+ border-color: rgba(255, 255, 255, 0.15);
+}
+.dark-mode .custom-radio input[type="radio"]:hover~label:before {
+ background-color: transparent;
+ border-color: rgba(255, 255, 255, 0.3);
+}
+.dark-mode .custom-radio input[type="radio"]:focus~label:before {
+ border-color: rgba(0, 0, 0, 0.4);
+ -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+ -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+ box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+}
+.dark-mode .custom-radio input[type="radio"]:checked~label:before {
+ background-color: #1890ff;
+ border-color: #1890ff;
+}
+.dark-mode .custom-radio input[type="radio"]:checked:focus~label:before {
+ border-color: #1890ff;
+ -moz-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+ -webkit-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+ box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+}
+.custom-radio label:after{
+ content: "";
+ position: absolute;
+ display: none;
+ top: 0.5rem;
+ left: 0.5rem;
+ width: 0.6rem;
+ height: 0.6rem;
+ background-color: #ffffff;
+ border-radius: 50%;
+}
+.dark-mode .custom-radio label:after {
+ border-color: #ffffff;
+}
+.custom-radio input[type="radio"]:checked~label:after {
+ display: block;
+}
+.custom-radio input[type="radio"]:disabled~label {
+ opacity: 0.6;
+ cursor: not-allowed;
+}
+.custom-radio input[type="radio"]:disabled~label:before {
+ background-color: #ffffff;
+ border-color: rgba(0, 0, 0, 0.3);
+}
+.custom-radio input[type="radio"]:hover:disabled~label:before {
+ background-color: #ffffff;
+ border-color: rgba(0, 0, 0, 0.3);
+}
+.custom-radio input[type="radio"]:disabled:checked~label:before {
+ background-color: #1890ff;
+ border-color: #1890ff;
+}
+.custom-radio input[type="radio"]:hover:disabled:checked~label:before {
+ background-color: #1890ff;
+ border-color: #1890ff;
+}
+.dark-mode .custom-radio input[type="radio"]:disabled~label:before {
+ background-color: transparent;
+ border-color: rgba(255, 255, 255, 0.15);
+}
+.dark-mode .custom-radio input[type="radio"]:hover:disabled~label:before {
+ background-color: transparent;
+ border-color: rgba(255, 255, 255, 0.15);
+}
+.dark-mode .custom-radio input[type="radio"]:disabled:checked~label:before {
+ background-color: #1890ff;
+ border-color: #1890ff;
+}
+.dark-mode .custom-radio input[type="radio"]:hover:disabled:checked~label:before {
+ background-color: #1890ff;
+ border-color: #1890ff;
+}
+
+/* Switch */
+
+.custom-switch {
+ display: block;
+ position: relative;
+ line-height: 2rem;
+}
+.custom-switch input[type="checkbox"] {
+ /* Hide the default */
+ position: absolute;
+ opacity: 0;
+ height: 0;
+ width: 0;
+}
+.custom-switch label {
+ display: inline-block;
+ margin-bottom: 0;
+ padding-left: calc(3.2rem + 0.8rem);
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.custom-switch label.blank {
+ padding-left: 3.2rem;
+}
+.custom-switch label:before {
+ content: "";
+ display: inline-block;
+ position: absolute;
+ height: 2rem;
+ width: 3.2rem;
+ top: 0;
+ left: 0;
+ background-color: #ffffff;
+ border: 1px solid rgba(0, 0, 0, 0.3);
+ border-radius: 2rem;
+}
+.custom-switch input[type="checkbox"]:hover~label:before {
+ background-color: #ffffff;
+ border-color: rgba(0, 0, 0, 0.4);
+}
+.custom-switch input[type="checkbox"]:focus~label:before {
+ border-color: rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+ -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+ box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+}
+.custom-switch input[type="checkbox"]:checked~label:before {
+ background-color: #1890ff;
+ border-color: #1890ff;
+}
+.custom-switch input[type="checkbox"]:checked:focus~label:before {
+ border-color: #1890ff;
+ -moz-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+ -webkit-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+ box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+}
+.dark-mode .custom-switch label:before {
+ background-color: transparent;
+ border-color: rgba(255, 255, 255, 0.15);
+}
+.dark-mode .custom-switch input[type="checkbox"]:hover~label:before {
+ background-color: transparent;
+ border-color: rgba(255, 255, 255, 0.3);
+}
+.dark-mode .custom-switch input[type="checkbox"]:focus~label:before {
+ border-color: rgba(0, 0, 0, 0.4);
+ -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+ -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+ box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+}
+.dark-mode .custom-switch input[type="checkbox"]:checked~label:before {
+ background-color: #1890ff;
+ border-color: #1890ff;
+}
+.dark-mode .custom-switch input[type="checkbox"]:checked:focus~label:before {
+ border-color: #1890ff;
+ -moz-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+ -webkit-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+ box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3);
+}
+.custom-switch label:after{
+ content: "";
+ position: absolute;
+ height: 1.2rem;
+ width: 1.2rem;
+ top: 0.4rem;
+ left: 0.5rem;
+ background-color: rgba(0, 0, 0, 0.2);
+ border: 0 solid rgba(0, 0, 0, 0.2);
+ border-radius: 50%;
+ -webkit-transition: left .1s;
+ transition: left .1s;
+}
+.dark-mode .custom-switch label:after {
+ background-color: rgba(255, 255, 255, 0.15);
+ border-color: rgba(255, 255, 255, 0.15);
+}
+.custom-switch input[type="checkbox"]:checked~label:after {
+ top: 0.4rem;
+ left: calc(3.2rem - 1.2rem - 0.5rem);
+ background-color: #ffffff;
+ border-color: #ffffff;
+}
+.dark-mode .custom-switch input[type="checkbox"]:checked~label:after {
+ background-color: #ffffff;
+ border-color: #ffffff;
+}
+.custom-switch input[type="checkbox"]:disabled~label {
+ opacity: 0.6;
+ cursor: not-allowed;
+}
+.custom-switch input[type="checkbox"]:disabled~label:before {
+ background-color: #ffffff;
+ border-color: rgba(0, 0, 0, 0.3);
+}
+.custom-switch input[type="checkbox"]:hover:disabled~label:before {
+ background-color: #ffffff;
+ border-color: rgba(0, 0, 0, 0.3);
+}
+.custom-switch input[type="checkbox"]:disabled:checked~label:before {
+ background-color: #1890ff;
+ border-color: #1890ff;
+}
+.custom-switch input[type="checkbox"]:hover:disabled:checked~label:before {
+ background-color: #1890ff;
+ border-color: #1890ff;
+}
+.dark-mode .custom-switch input[type="checkbox"]:disabled~label:before {
+ background-color: transparent;
+ border-color: rgba(255, 255, 255, 0.15);
+}
+.dark-mode .custom-switch input[type="checkbox"]:hover:disabled~label:before {
+ background-color: transparent;
+ border-color: rgba(255, 255, 255, 0.15);
+}
+.dark-mode .custom-switch input[type="checkbox"]:disabled:checked~label:before {
+ background-color: #1890ff;
+ border-color: #1890ff;
+}
+.dark-mode .custom-switch input[type="checkbox"]:hover:disabled:checked~label:before {
+ background-color: #1890ff;
+ border-color: #1890ff;
+}
+
+/* Input file */
+
+.custom-file {
+ display: block;
+ position: relative;
+}
+.custom-file input[type="file"] {
+ /* Hide the default */
+ position: absolute;
+ opacity: 0;
+ height: 0;
+ width: 0;
+ z-index: -1; /* Needed to stop the default button from interfering in some browsers, such as Safari */
+}
+.custom-file label {
+ display: inline-block;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ height: 3.2rem;
+ line-height: 3.2rem;
+ padding: 0 1.5rem;
+ color: rgba(0, 0, 0, 0.7);
+ background-color: #ffffff;
+ background-image: none;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ border-radius: 0.4rem;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.custom-file label:hover {
+ color: rgba(0, 0, 0, 0.7);
+ background-color: #f7f7f7;
+ background-image: none;
+ border-color: rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.custom-file input[type="file"]:focus~label {
+ color: rgba(0, 0, 0, 0.7);
+ background-color: #ffffff;
+ background-image: none;
+ border-color: rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+ -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+ box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6);
+}
+.custom-file input[type="file"]:focus:hover~label {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: rgba(0, 0, 0, 0.7);
+ background-color: #f7f7f7;
+ background-image: none;
+}
+.dark-mode .custom-file label {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.05);
+ background-image: none;
+ border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+}
+.dark-mode .custom-file label:hover {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.1);
+ background-image: none;
+ border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+}
+.dark-mode .custom-file input[type="file"]:focus~label {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.05);
+ background-image: none;
+ border-color: rgba(0, 0, 0, 0.4);
+ -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+ -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+ box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3);
+}
+.dark-mode .custom-file input[type="file"]:focus:hover~label {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.1);
+ background-image: none;
+}
+.custom-file input[type="file"]:disabled~label {
+ opacity: 0.6;
+ cursor: not-allowed;
+ color: rgba(0, 0, 0, 0.7);
+ background-color: #ffffff;
+ background-image: none;
+ border-color: rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.custom-file:hover input[type="file"]:disabled~label {
+ opacity: 0.6;
+ cursor: not-allowed;
+ color: rgba(0, 0, 0, 0.7);
+ background-color: #ffffff;
+ background-image: none;
+ border-color: rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.dark-mode .custom-file input[type="file"]:disabled~label {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.05);
+ background-image: none;
+ border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.dark-mode .custom-file:hover input[type="file"]:disabled~label {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.05);
+ background-image: none;
+ border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.custom-file input[type="file"]:disabled~.file-names {
+ opacity: 0.6;
+ pointer-events: none;
+}
+
+/* Invalid input file */
+
+.form-group.is-invalid .custom-file label {
+ color: rgba(0, 0, 0, 0.7);
+ background-color: #ffffff;
+ background-image: none;
+ border-color: #ff4d4f;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+
+.custom-file input[type="file"].is-invalid~label {
+ color: rgba(0, 0, 0, 0.7);
+ background-color: #ffffff;
+ background-image: none;
+ border-color: #ff4d4f;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.form-group.is-invalid .custom-file label:hover {
+ color: rgba(0, 0, 0, 0.7);
+ background-color: #f7f7f7;
+ background-image: none;
+ border-color: #ff4d4f;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.custom-file input[type="file"].is-invalid~label:hover {
+ color: rgba(0, 0, 0, 0.7);
+ background-color: #f7f7f7;
+ background-image: none;
+ border-color: #ff4d4f;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.form-group.is-invalid .custom-file input[type="file"]:focus~label {
+ color: rgba(0, 0, 0, 0.7);
+ background-color: #ffffff;
+ background-image: none;
+ border-color: #f8d0d9;
+ -moz-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6);
+ -webkit-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6);
+ box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6);
+}
+.custom-file input[type="file"].is-invalid:focus~label {
+ color: rgba(0, 0, 0, 0.7);
+ background-color: #ffffff;
+ background-image: none;
+ border-color: #f8d0d9;
+ -moz-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6);
+ -webkit-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6);
+ box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6);
+}
+.form-group.is-invalid .custom-file input[type="file"]:focus:hover~label {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: rgba(0, 0, 0, 0.7);
+ background-color: #f7f7f7;
+ background-image: none;
+}
+.custom-file input[type="file"].is-invalid:focus:hover~label {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: rgba(0, 0, 0, 0.7);
+ background-color: #f7f7f7;
+ background-image: none;
+}
+.dark-mode .form-group.is-invalid .custom-file label {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.05);
+ background-image: none;
+ border-color: #ff4d4f;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+}
+.dark-mode .custom-file input[type="file"].is-invalid~label {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.05);
+ background-image: none;
+ border-color: #ff4d4f;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+}
+.dark-mode .form-group.is-invalid .custom-file label:hover {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.1);
+ background-image: none;
+ border-color: #ff4d4f;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+}
+.dark-mode .custom-file input[type="file"].is-invalid~label:hover {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.1);
+ background-image: none;
+ border-color: #ff4d4f;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+}
+.dark-mode .form-group.is-invalid .custom-file input[type="file"]:focus~label {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.05);
+ background-image: none;
+ border-color: #ff4d4f;
+ -moz-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+ -webkit-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+ box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+}
+.dark-mode .custom-file input[type="file"].is-invalid:focus~label {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.05);
+ background-image: none;
+ border-color: #ff4d4f;
+ -moz-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+ -webkit-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+ box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3);
+}
+.dark-mode .form-group.is-invalid .custom-file input[type="file"]:focus:hover~label {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.1);
+ background-image: none;
+}
+.dark-mode .custom-file input[type="file"].is-invalid:focus:hover~label {
+ /*
+ Only text color and background properties are overridden, while the border
+ color, box shadow, and the outline of the focus selector is kept.
+ */
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.1);
+ background-image: none;
+}
+
+/* Input group */
+
+.input-group {
+ position: relative;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+ width: 100%;
+}
+.input-group > .form-control {
+ position: relative;
+ -ms-flex: 1 1 0%;
+ flex: 1 1 0%;
+ min-width: 0;
+ margin-bottom: 0;
+}
+.input-group-prepend,
+.input-group-append {
+ display: -ms-flexbox;
+ display: flex;
+}
+.input-group-prepend > .btn,
+.input-group-append > .btn {
+ position: relative;
+}
+.input-group-sm > .form-control {
+ height: 2.6rem;
+ padding-left: 0.8rem;
+ padding-right: 0.8rem;
+ font-size: 1.2rem;
+}
+.input-group-lg > .form-control {
+ height: 4rem;
+ padding-left: 0.8rem;
+ padding-right: 0.8rem;
+ font-size: 1.8rem;
+}
+
+/* Input group text */
+
+.input-group-text {
+ white-space: nowrap;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-align: center;
+ align-items: center;
+ text-align: center;
+ height: 100%;
+ padding-left: 0.8rem;
+ padding-right: 0.8rem;
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ecf0f1;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ border-radius: 0.4rem;
+}
+.dark-mode .input-group-text {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.1);
+ border-color: rgba(0, 0, 0, 0.3);
+}
+.input-group-sm .input-group-text {
+ padding-left: 0.8rem;
+ padding-right: 0.8rem;
+ font-size: 1.2rem;
+}
+.input-group-lg .input-group-text {
+ padding-left: 0.8rem;
+ padding-right: 0.8rem;
+ font-size: 1.8rem;
+}
+
+/* Input group button */
+
+.input-group-sm > .input-group-prepend > .btn {
+ height: 2.6rem;
+ line-height: 2.6rem;
+ padding: 0 1rem;
+ font-size: 1.2rem;
+}
+
+.input-group-sm > .input-group-append > .btn {
+ height: 2.6rem;
+ line-height: 2.6rem;
+ padding: 0 1rem;
+ font-size: 1.2rem;
+}
+.input-group-lg > .input-group-prepend > .btn {
+ height: 4rem;
+ line-height: 4rem;
+ padding: 0 2rem;
+ font-size: 1.8rem;
+}
+.input-group-lg > .input-group-append > .btn {
+ height: 4rem;
+ line-height: 4rem;
+ padding: 0 2rem;
+ font-size: 1.8rem;
+}
+.input-group-sm > .input-group-prepend > .btn-square {
+ width: 2.6rem;
+ padding-left: 0;
+ padding-right: 0;
+}
+.input-group-sm > .input-group-append > .btn-square {
+ width: 2.6rem;
+ padding-left: 0;
+ padding-right: 0;
+}
+.input-group-lg > .input-group-prepend > .btn-square {
+ width: 4rem;
+ padding-left: 0;
+ padding-right: 0;
+}
+.input-group-lg > .input-group-append > .btn-square {
+ width: 4rem;
+ padding-left: 0;
+ padding-right: 0;
+}
+.input-group-sm > .input-group-prepend > .btn-rounded {
+ border-radius: 2.6rem;
+}
+.input-group-sm > .input-group-append > .btn-rounded {
+ border-radius: 2.6rem;
+}
+.input-group-lg > .input-group-prepend > .btn-rounded {
+ border-radius: 4rem;
+}
+.input-group-lg > .input-group-append > .btn-rounded {
+ border-radius: 4rem;
+}
+
+/* Input group borders */
+
+.input-group > .form-control:not(:first-child),
+.input-group-prepend:not(:first-child) > .input-group-text,
+.input-group-append:not(:first-child) > .input-group-text,
+.input-group-prepend:not(:first-child) > .btn,
+.input-group-append:not(:first-child) > .btn {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+.input-group > .form-control:not(:last-child),
+.input-group-prepend:not(:last-child) > .input-group-text,
+.input-group-append:not(:last-child) > .input-group-text,
+.input-group-prepend:not(:last-child) > .btn,
+.input-group-append:not(:last-child) > .btn {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
+.input-group > .form-control:focus,
+.input-group-prepend > .btn:focus,
+.input-group-prepend > .btn.active,
+.input-group-append > .btn:focus,
+.input-group-append > .btn.active {
+ z-index: 1;
+}
+.input-group > .form-control:not(:first-child) {
+ margin-left: calc((-1) * 1px);
+}
+.input-group-prepend:not(:first-child) > .input-group-text {
+ margin-left: calc((-1) * 1px);
+}
+.input-group-append:not(:first-child) > .input-group-text {
+ margin-left: calc((-1) * 1px);
+}
+.input-group-prepend:not(:first-child) > .btn {
+ margin-left: calc((-1) * 1px);
+}
+.input-group-append:not(:first-child) > .btn {
+ margin-left: calc((-1) * 1px);
+}
+
+/* Buttons (only border colors) */
+
+.input-group-prepend > .btn {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+
+.input-group-append > .btn {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.input-group-prepend > .btn:hover {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.input-group-append > .btn:hover {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.input-group-prepend > .btn:focus {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.input-group-append > .btn:focus {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.input-group-prepend > .btn.active {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.input-group-append > .btn.active {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .input-group-prepend > .btn {
+ border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .input-group-append > .btn {
+ border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .input-group-prepend > .btn:hover {
+ border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .input-group-append > .btn:hover {
+ border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .input-group-prepend > .btn:focus {
+ border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .input-group-append > .btn:focus {
+ border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .input-group-prepend > .btn.active {
+ border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .input-group-append > .btn.active {
+ border-color: rgba(0, 0, 0, 0.3);
+}
+
+/* Link button */
+
+.input-group-prepend > .btn.btn-link {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+
+.input-group-append > .btn.btn-link {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.input-group-prepend > .btn.btn-link:hover {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.input-group-append > .btn.btn-link:hover {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.input-group-prepend > .btn.btn-link:focus {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.input-group-append > .btn.btn-link:focus {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.input-group-prepend > .btn.btn-link.active {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.input-group-append > .btn.btn-link.active {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .input-group-prepend > .btn.btn-link {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .input-group-append > .btn.btn-link {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .input-group-prepend > .btn.btn-link:hover {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .input-group-append > .btn.btn-link:hover {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .input-group-prepend > .btn.btn-link:focus {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .input-group-append > .btn.btn-link:focus {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .input-group-prepend > .btn.btn-link.active {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .input-group-append > .btn.btn-link.active {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+
+/* Primary button */
+
+.input-group-prepend > .btn.btn-primary {
+ border-color: #1890ff;
+}
+
+.input-group-append > .btn.btn-primary {
+ border-color: #1890ff;
+}
+.input-group-prepend > .btn.btn-primary:hover {
+ border-color: #45a3fb;
+}
+.input-group-append > .btn.btn-primary:hover {
+ border-color: #45a3fb;
+}
+.input-group-prepend > .btn.btn-primary:focus {
+ border-color: #1890ff;
+}
+.input-group-append > .btn.btn-primary:focus {
+ border-color: #1890ff;
+}
+.input-group-prepend > .btn.btn-primary.active {
+ border-color: #1890ff;
+}
+.input-group-append > .btn.btn-primary.active {
+ border-color: #1890ff;
+}
+.dark-mode .input-group-prepend > .btn.btn-primary {
+ border-color: #1890ff;
+}
+.dark-mode .input-group-append > .btn.btn-primary {
+ border-color: #1890ff;
+}
+.dark-mode .input-group-prepend > .btn.btn-primary:hover {
+ border-color: #45a3fb;
+}
+.dark-mode .input-group-append > .btn.btn-primary:hover {
+ border-color: #45a3fb;
+}
+.dark-mode .input-group-prepend > .btn.btn-primary:focus {
+ border-color: #1890ff;
+}
+.dark-mode .input-group-append > .btn.btn-primary:focus {
+ border-color: #1890ff;
+}
+.dark-mode .input-group-prepend > .btn.btn-primary.active {
+ border-color: #1890ff;
+}
+.dark-mode .input-group-append > .btn.btn-primary.active {
+ border-color: #1890ff;
+}
+
+/* Success button */
+
+.input-group-prepend > .btn.btn-success {
+ border-color: #0be881;
+}
+
+.input-group-append > .btn.btn-success {
+ border-color: #0be881;
+}
+.input-group-prepend > .btn.btn-success:hover {
+ border-color: #81eea8;
+}
+.input-group-append > .btn.btn-success:hover {
+ border-color: #81eea8;
+}
+.input-group-prepend > .btn.btn-success:focus {
+ border-color: #0be881;
+}
+.input-group-append > .btn.btn-success:focus {
+ border-color: #0be881;
+}
+.input-group-prepend > .btn.btn-success.active {
+ border-color: #0be881;
+}
+.input-group-append > .btn.btn-success.active {
+ border-color: #0be881;
+}
+.dark-mode .input-group-prepend > .btn.btn-success {
+ border-color: #0be881;
+}
+.dark-mode .input-group-append > .btn.btn-success {
+ border-color: #0be881;
+}
+.dark-mode .input-group-prepend > .btn.btn-success:hover {
+ border-color: #81eea8;
+}
+.dark-mode .input-group-append > .btn.btn-success:hover {
+ border-color: #81eea8;
+}
+.dark-mode .input-group-prepend > .btn.btn-success:focus {
+ border-color: #0be881;
+}
+.dark-mode .input-group-append > .btn.btn-success:focus {
+ border-color: #0be881;
+}
+.dark-mode .input-group-prepend > .btn.btn-success.active {
+ border-color: #0be881;
+}
+.dark-mode .input-group-append > .btn.btn-success.active {
+ border-color: #0be881;
+}
+
+/* Secondary button */
+
+.input-group-prepend > .btn.btn-secondary {
+ border-color: #ffcf00;
+}
+
+.input-group-append > .btn.btn-secondary {
+ border-color: #ffcf00;
+}
+.input-group-prepend > .btn.btn-secondary:hover {
+ border-color: #ffe04d;
+}
+.input-group-append > .btn.btn-secondary:hover {
+ border-color: #ffe04d;
+}
+.input-group-prepend > .btn.btn-secondary:focus {
+ border-color: #ffcf00;
+}
+.input-group-append > .btn.btn-secondary:focus {
+ border-color: #ffcf00;
+}
+.input-group-prepend > .btn.btn-secondary.active {
+ border-color: #ffcf00;
+}
+.input-group-append > .btn.btn-secondary.active {
+ border-color: #ffcf00;
+}
+.dark-mode .input-group-prepend > .btn.btn-secondary {
+ border-color: #ffcf00;
+}
+.dark-mode .input-group-append > .btn.btn-secondary {
+ border-color: #ffcf00;
+}
+.dark-mode .input-group-prepend > .btn.btn-secondary:hover {
+ border-color: #ffe04d;
+}
+.dark-mode .input-group-append > .btn.btn-secondary:hover {
+ border-color: #ffe04d;
+}
+.dark-mode .input-group-prepend > .btn.btn-secondary:focus {
+ border-color: #ffcf00;
+}
+.dark-mode .input-group-append > .btn.btn-secondary:focus {
+ border-color: #ffcf00;
+}
+.dark-mode .input-group-prepend > .btn.btn-secondary.active {
+ border-color: #ffcf00;
+}
+.dark-mode .input-group-append > .btn.btn-secondary.active {
+ border-color: #ffcf00;
+}
+
+/* Danger button */
+
+.input-group-prepend > .btn.btn-danger {
+ border-color: #ff4d4f;
+}
+
+.input-group-append > .btn.btn-danger {
+ border-color: #ff4d4f;
+}
+.input-group-prepend > .btn.btn-danger:hover {
+ border-color: #ed586c;
+}
+.input-group-append > .btn.btn-danger:hover {
+ border-color: #ed586c;
+}
+.input-group-prepend > .btn.btn-danger:focus {
+ border-color: #ff4d4f;
+}
+.input-group-append > .btn.btn-danger:focus {
+ border-color: #ff4d4f;
+}
+.input-group-prepend > .btn.btn-danger.active {
+ border-color: #ff4d4f;
+}
+.input-group-append > .btn.btn-danger.active {
+ border-color: #ff4d4f;
+}
+.dark-mode .input-group-prepend > .btn.btn-danger {
+ border-color: #ff4d4f;
+}
+.dark-mode .input-group-append > .btn.btn-danger {
+ border-color: #ff4d4f;
+}
+.dark-mode .input-group-prepend > .btn.btn-danger:hover {
+ border-color: #ed586c;
+}
+.dark-mode .input-group-append > .btn.btn-danger:hover {
+ border-color: #ed586c;
+}
+.dark-mode .input-group-prepend > .btn.btn-danger:focus {
+ border-color: #ff4d4f;
+}
+.dark-mode .input-group-append > .btn.btn-danger:focus {
+ border-color: #ff4d4f;
+}
+.dark-mode .input-group-prepend > .btn.btn-danger.active {
+ border-color: #ff4d4f;
+}
+.dark-mode .input-group-append > .btn.btn-danger.active {
+ border-color: #ff4d4f;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+12. Dropdown [hm-12]
+-------------------------------------------------------------------------------
+*/
+
+.dropdown {
+ display: inline-block;
+ position: relative;
+}
+
+/* Dropdown menu */
+
+.dropdown-menu {
+ position: absolute;
+ visibility: hidden;
+ z-index: 10;
+ text-align: left;
+ width: auto;
+ min-width: 16.8rem;
+ padding: 0.4rem;
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffffff;
+ background-image: none;
+ border: 1px solid #bababc;
+ border-radius: 0.4rem;
+ -moz-box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.15);
+ -webkit-box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.15);
+ box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.15);
+}
+.dark-mode .dropdown-menu {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: #191c20;
+ background-image: none;
+ border-color: #111417;
+ -moz-box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.4);
+ -webkit-box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.4);
+ box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.4);
+}
+
+/* Arrows (::before for border, ::after for background) */
+
+.dropdown.with-arrow.show .dropdown-menu::before,
+.dropdown.with-arrow.show .dropdown-menu::after,
+.dropdown.with-arrow.toggle-on-hover:hover .dropdown-menu::before,
+.dropdown.with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+ content: " ";
+ width: 0;
+ height: 0;
+ display: inline-block;
+ position: absolute;
+ z-index: 10;
+}
+
+/* Dropdown content */
+
+.dropdown-content {
+ display: block;
+ padding: 1.2rem;
+}
+.dropdown-content > ul,
+.dropdown-content > ol {
+ margin-left: 0;
+}
+
+/* Dropdown divider */
+
+.dropdown-divider {
+ height: 1px;
+ background-color: rgba(0, 0, 0, 0.05);
+}
+.dark-mode .dropdown-divider {
+ background-color: rgba(255, 255, 255, 0.05);
+}
+
+/* Dropdown item */
+
+.dropdown-item {
+ display: block;
+ white-space: nowrap;
+ padding: 0.6rem 1.2rem;
+ border-radius: 0.2rem;
+ color: rgba(0, 0, 0, 0.85);
+ background-color: transparent;
+}
+.dropdown-item:hover {
+ text-decoration: none;
+ color: rgba(0, 0, 0, 0.85);
+ background-color: rgba(0, 0, 0, 0.025);
+}
+.dark-mode .dropdown-item {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: transparent;
+}
+.dark-mode .dropdown-item:hover {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.025);
+}
+
+/* Dropdown header */
+
+.dropdown-header {
+ font-size: 1.4rem;
+ font-weight: 500;
+ padding: 0.6rem 1.2rem;
+ margin: 0;
+ color: rgba(0, 0, 0, 0.6);
+}
+.dark-mode .dropdown-header {
+ color: rgba(255, 255, 255, 0.6);
+}
+
+/* Normal dropdown */
+
+.dropdown:not(.dropup):not(.dropright):not(.dropleft) .dropdown-menu {
+ bottom: 50%;
+ transform: translateY(50%);
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft) .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right) {
+ left: 0;
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft) .dropdown-menu.dropdown-menu-center {
+ left: 50%;
+ transform: translate(-50%, 50%);
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft) .dropdown-menu.dropdown-menu-right {
+ right: 0;
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).show .dropdown-menu,
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).toggle-on-hover:hover .dropdown-menu {
+ bottom: 0;
+ transform: translateY(100%);
+ visibility: visible;
+ -webkit-transition: bottom 0.1s, transform 0.1s, visibility 0.1s;
+ transition: bottom 0.1s, transform 0.1s, visibility 0.1s;
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).show .dropdown-menu.dropdown-menu-center,
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).toggle-on-hover:hover .dropdown-menu.dropdown-menu-center {
+ transform: translate(-50%, 100%);
+}
+
+/* Normal dropdown arrows (::before for border, ::after for background) */
+
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu {
+ bottom: calc(0.8rem * -1);
+}
+
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu {
+ bottom: calc(0.8rem * -1);
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu::before {
+ border-left: 0.8rem solid transparent;
+ border-right: 0.8rem solid transparent;
+ border-bottom: 0.8rem solid #bababc;
+ top: calc(0.8rem * -1);
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+ border-left: 0.8rem solid transparent;
+ border-right: 0.8rem solid transparent;
+ border-bottom: 0.8rem solid #bababc;
+ top: calc(0.8rem * -1);
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu::before {
+ border-left: 0.8rem solid transparent;
+ border-right: 0.8rem solid transparent;
+ border-bottom: 0.8rem solid #bababc;
+ top: calc(0.8rem * -1);
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu::after {
+ border-left: 0.8rem solid transparent;
+ border-right: 0.8rem solid transparent;
+ border-bottom: 0.8rem solid #bababc;
+ top: calc(0.8rem * -1);
+}
+.dark-mode .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu::before {
+ border-bottom-color: #111417;
+}
+.dark-mode .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+ border-bottom-color: #111417;
+}
+.dark-mode .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu::before {
+ border-bottom-color: #111417;
+}
+.dark-mode .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu::after {
+ border-bottom-color: #111417;
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+ border-bottom-color: #ffffff;
+ top: calc(0.2rem + (0.8rem * -1));
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu::after {
+ border-bottom-color: #ffffff;
+ top: calc(0.2rem + (0.8rem * -1));
+}
+.dark-mode .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+ border-bottom-color: #191c20;
+}
+.dark-mode .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu::after {
+ border-bottom-color: #191c20;
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::before {
+ left: 0.8rem;
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::after {
+ left: 0.8rem;
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::before {
+ left: 0.8rem;
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::after {
+ left: 0.8rem;
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::before {
+ left: calc(50% - 0.8rem);
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::after {
+ left: calc(50% - 0.8rem);
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu.dropdown-menu-center::before {
+ left: calc(50% - 0.8rem);
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu.dropdown-menu-center::after {
+ left: calc(50% - 0.8rem);
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-right::before {
+ right: 0.8rem;
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-right::after {
+ right: 0.8rem;
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu.dropdown-menu-right::before {
+ right: 0.8rem;
+}
+.dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu.dropdown-menu-right::after {
+ right: 0.8rem;
+}
+
+/* Dropup */
+
+.dropdown.dropup .dropdown-menu {
+ top: 50%;
+ transform: translateY(-50%);
+}
+.dropdown.dropup .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right) {
+ left: 0;
+}
+.dropdown.dropup .dropdown-menu.dropdown-menu-center {
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+.dropdown.dropup .dropdown-menu.dropdown-menu-right {
+ right: 0;
+}
+.dropdown.dropup.show .dropdown-menu,
+.dropdown.dropup.toggle-on-hover:hover .dropdown-menu {
+ top: 0;
+ transform: translateY(-100%);
+ visibility: visible;
+ -webkit-transition: top 0.1s, transform 0.1s, visibility 0.1s;
+ transition: top 0.1s, transform 0.1s, visibility 0.1s;
+}
+.dropdown.dropup.show .dropdown-menu.dropdown-menu-center,
+.dropdown.dropup.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center {
+ transform: translate(-50%, -100%);
+}
+
+/* Dropup arrows (::before for border, ::after for background) */
+
+.dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu {
+ top: calc(0.8rem * -1);
+}
+
+.dropdown.dropup.with-arrow.show .dropdown-menu {
+ top: calc(0.8rem * -1);
+}
+.dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu::before {
+ border-left: 0.8rem solid transparent;
+ border-right: 0.8rem solid transparent;
+ border-top: 0.8rem solid #bababc;
+ bottom: calc(0.8rem * -1);
+}
+.dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+ border-left: 0.8rem solid transparent;
+ border-right: 0.8rem solid transparent;
+ border-top: 0.8rem solid #bababc;
+ bottom: calc(0.8rem * -1);
+}
+.dropdown.dropup.with-arrow.show .dropdown-menu::before {
+ border-left: 0.8rem solid transparent;
+ border-right: 0.8rem solid transparent;
+ border-top: 0.8rem solid #bababc;
+ bottom: calc(0.8rem * -1);
+}
+.dropdown.dropup.with-arrow.show .dropdown-menu::after {
+ border-left: 0.8rem solid transparent;
+ border-right: 0.8rem solid transparent;
+ border-top: 0.8rem solid #bababc;
+ bottom: calc(0.8rem * -1);
+}
+.dark-mode .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu::before {
+ border-top-color: #111417;
+}
+.dark-mode .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+ border-top-color: #111417;
+}
+.dark-mode .dropdown.dropup.with-arrow.show .dropdown-menu::before {
+ border-top-color: #111417;
+}
+.dark-mode .dropdown.dropup.with-arrow.show .dropdown-menu::after {
+ border-top-color: #111417;
+}
+.dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+ border-top-color: #ffffff;
+ bottom: calc(0.2rem + (0.8rem * -1));
+}
+.dropdown.dropup.with-arrow.show .dropdown-menu::after {
+ border-top-color: #ffffff;
+ bottom: calc(0.2rem + (0.8rem * -1));
+}
+.dark-mode .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+ border-top-color: #191c20;
+}
+.dark-mode .dropdown.dropup.with-arrow.show .dropdown-menu::after {
+ border-top-color: #191c20;
+}
+.dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::before {
+ left: 0.8rem;
+}
+.dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::after {
+ left: 0.8rem;
+}
+.dropdown.dropup.with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::before {
+ left: 0.8rem;
+}
+.dropdown.dropup.with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::after {
+ left: 0.8rem;
+}
+.dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::before {
+ left: calc(50% - 0.8rem);
+}
+.dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::after {
+ left: calc(50% - 0.8rem);
+}
+.dropdown.dropup.with-arrow.show .dropdown-menu.dropdown-menu-center::before {
+ left: calc(50% - 0.8rem);
+}
+.dropdown.dropup.with-arrow.show .dropdown-menu.dropdown-menu-center::after {
+ left: calc(50% - 0.8rem);
+}
+.dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-right::before {
+ right: 0.8rem;
+}
+.dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-right::after {
+ right: 0.8rem;
+}
+.dropdown.dropup.with-arrow.show .dropdown-menu.dropdown-menu-right::before {
+ right: 0.8rem;
+}
+.dropdown.dropup.with-arrow.show .dropdown-menu.dropdown-menu-right::after {
+ right: 0.8rem;
+}
+
+/* Dropright */
+
+.dropdown.dropright .dropdown-menu {
+ right: 50%;
+ transform: translateX(50%);
+}
+.dropdown.dropright .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up) {
+ top: 0;
+}
+.dropdown.dropright .dropdown-menu.dropdown-menu-center {
+ top: 50%;
+ transform: translate(50%, -50%);
+}
+.dropdown.dropright .dropdown-menu.dropdown-menu-up {
+ bottom: 0;
+}
+.dropdown.dropright.show .dropdown-menu,
+.dropdown.dropright.toggle-on-hover:hover .dropdown-menu {
+ right: 0;
+ transform: translateX(100%);
+ visibility: visible;
+ -webkit-transition: right 0.1s, transform 0.1s, visibility 0.1s;
+ transition: right 0.1s, transform 0.1s, visibility 0.1s;
+}
+.dropdown.dropright.show .dropdown-menu.dropdown-menu-center,
+.dropdown.dropright.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center {
+ transform: translate(100%, -50%);
+}
+
+/* Dropright arrows (::before for border, ::after for background) */
+
+.dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu {
+ right: calc(0.8rem * -1);
+}
+
+.dropdown.dropright.with-arrow.show .dropdown-menu {
+ right: calc(0.8rem * -1);
+}
+.dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu::before {
+ border-top: 0.8rem solid transparent;
+ border-bottom: 0.8rem solid transparent;
+ border-right: 0.8rem solid #bababc;
+ left: calc(0.8rem * -1);
+}
+.dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+ border-top: 0.8rem solid transparent;
+ border-bottom: 0.8rem solid transparent;
+ border-right: 0.8rem solid #bababc;
+ left: calc(0.8rem * -1);
+}
+.dropdown.dropright.with-arrow.show .dropdown-menu::before {
+ border-top: 0.8rem solid transparent;
+ border-bottom: 0.8rem solid transparent;
+ border-right: 0.8rem solid #bababc;
+ left: calc(0.8rem * -1);
+}
+.dropdown.dropright.with-arrow.show .dropdown-menu::after {
+ border-top: 0.8rem solid transparent;
+ border-bottom: 0.8rem solid transparent;
+ border-right: 0.8rem solid #bababc;
+ left: calc(0.8rem * -1);
+}
+.dark-mode .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu::before {
+ border-right-color: #111417;
+}
+.dark-mode .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+ border-right-color: #111417;
+}
+.dark-mode .dropdown.dropright.with-arrow.show .dropdown-menu::before {
+ border-right-color: #111417;
+}
+.dark-mode .dropdown.dropright.with-arrow.show .dropdown-menu::after {
+ border-right-color: #111417;
+}
+.dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+ border-right-color: #ffffff;
+ left: calc(0.2rem + (0.8rem * -1));
+}
+.dropdown.dropright.with-arrow.show .dropdown-menu::after {
+ border-right-color: #ffffff;
+ left: calc(0.2rem + (0.8rem * -1));
+}
+.dark-mode .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+ border-right-color: #191c20;
+}
+.dark-mode .dropdown.dropright.with-arrow.show .dropdown-menu::after {
+ border-right-color: #191c20;
+}
+.dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::before {
+ top: 0.8rem;
+}
+.dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::after {
+ top: 0.8rem;
+}
+.dropdown.dropright.with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::before {
+ top: 0.8rem;
+}
+.dropdown.dropright.with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::after {
+ top: 0.8rem;
+}
+.dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::before {
+ top: calc(50% - 0.8rem);
+}
+.dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::after {
+ top: calc(50% - 0.8rem);
+}
+.dropdown.dropright.with-arrow.show .dropdown-menu.dropdown-menu-center::before {
+ top: calc(50% - 0.8rem);
+}
+.dropdown.dropright.with-arrow.show .dropdown-menu.dropdown-menu-center::after {
+ top: calc(50% - 0.8rem);
+}
+.dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-up::before {
+ bottom: 0.8rem;
+}
+.dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-up::after {
+ bottom: 0.8rem;
+}
+.dropdown.dropright.with-arrow.show .dropdown-menu.dropdown-menu-up::before {
+ bottom: 0.8rem;
+}
+.dropdown.dropright.with-arrow.show .dropdown-menu.dropdown-menu-up::after {
+ bottom: 0.8rem;
+}
+
+/* Dropleft */
+
+.dropdown.dropleft .dropdown-menu {
+ left: 50%;
+ transform: translateX(-50%);
+}
+.dropdown.dropleft .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up) {
+ top: 0;
+}
+.dropdown.dropleft .dropdown-menu.dropdown-menu-center {
+ top: 50%;
+ transform: translate(-50%, -50%);
+}
+.dropdown.dropleft .dropdown-menu.dropdown-menu-up {
+ bottom: 0;
+}
+.dropdown.dropleft.show .dropdown-menu,
+.dropdown.dropleft.toggle-on-hover:hover .dropdown-menu {
+ left: 0;
+ transform: translateX(-100%);
+ visibility: visible;
+ -webkit-transition: left 0.1s, transform 0.1s, visibility 0.1s;
+ transition: left 0.1s, transform 0.1s, visibility 0.1s;
+}
+.dropdown.dropleft.show .dropdown-menu.dropdown-menu-center,
+.dropdown.dropleft.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center {
+ transform: translate(-100%, -50%);
+}
+
+/* Dropleft arrows (::before for border, ::after for background) */
+
+.dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu {
+ left: calc(0.8rem * -1);
+}
+
+.dropdown.dropleft.with-arrow.show .dropdown-menu {
+ left: calc(0.8rem * -1);
+}
+.dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu::before {
+ border-top: 0.8rem solid transparent;
+ border-bottom: 0.8rem solid transparent;
+ border-left: 0.8rem solid #bababc;
+ right: calc(0.8rem * -1);
+}
+.dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+ border-top: 0.8rem solid transparent;
+ border-bottom: 0.8rem solid transparent;
+ border-left: 0.8rem solid #bababc;
+ right: calc(0.8rem * -1);
+}
+.dropdown.dropleft.with-arrow.show .dropdown-menu::before {
+ border-top: 0.8rem solid transparent;
+ border-bottom: 0.8rem solid transparent;
+ border-left: 0.8rem solid #bababc;
+ right: calc(0.8rem * -1);
+}
+.dropdown.dropleft.with-arrow.show .dropdown-menu::after {
+ border-top: 0.8rem solid transparent;
+ border-bottom: 0.8rem solid transparent;
+ border-left: 0.8rem solid #bababc;
+ right: calc(0.8rem * -1);
+}
+.dark-mode .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu::before {
+ border-left-color: #111417;
+}
+.dark-mode .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+ border-left-color: #111417;
+}
+.dark-mode .dropdown.dropleft.with-arrow.show .dropdown-menu::before {
+ border-left-color: #111417;
+}
+.dark-mode .dropdown.dropleft.with-arrow.show .dropdown-menu::after {
+ border-left-color: #111417;
+}
+.dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+ border-left-color: #ffffff;
+ right: calc(0.2rem + (0.8rem * -1));
+}
+.dropdown.dropleft.with-arrow.show .dropdown-menu::after {
+ border-left-color: #ffffff;
+ right: calc(0.2rem + (0.8rem * -1));
+}
+.dark-mode .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu::after {
+ border-left-color: #191c20;
+}
+.dark-mode .dropdown.dropleft.with-arrow.show .dropdown-menu::after {
+ border-left-color: #191c20;
+}
+.dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::before {
+ top: 0.8rem;
+}
+.dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::after {
+ top: 0.8rem;
+}
+.dropdown.dropleft.with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::before {
+ top: 0.8rem;
+}
+.dropdown.dropleft.with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::after {
+ top: 0.8rem;
+}
+.dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::before {
+ top: calc(50% - 0.8rem);
+}
+.dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::after {
+ top: calc(50% - 0.8rem);
+}
+.dropdown.dropleft.with-arrow.show .dropdown-menu.dropdown-menu-center::before {
+ top: calc(50% - 0.8rem);
+}
+.dropdown.dropleft.with-arrow.show .dropdown-menu.dropdown-menu-center::after {
+ top: calc(50% - 0.8rem);
+}
+.dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-up::before {
+ bottom: 0.8rem;
+}
+.dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-up::after {
+ bottom: 0.8rem;
+}
+.dropdown.dropleft.with-arrow.show .dropdown-menu.dropdown-menu-up::before {
+ bottom: 0.8rem;
+}
+.dropdown.dropleft.with-arrow.show .dropdown-menu.dropdown-menu-up::after {
+ bottom: 0.8rem;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+13. Modal [hm-13]
+-------------------------------------------------------------------------------
+*/
+
+.modal {
+ position: absolute;
+ top: -100%;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ background-color: rgba(0, 0, 0, 0.8);
+ -webkit-transition: all .4s cubic-bezier(.25, .8, .25, 1);
+ transition: all .4s cubic-bezier(.25, .8, .25, 1);
+ z-index: 99;
+ outline: none;
+}
+.dark-mode .modal {
+ background-color: rgba(0, 0, 0, 0.95);
+}
+.modal-dialog {
+ position: absolute;
+ display: -ms-flexbox;
+ display: flex;
+ flex-direction: column;
+ top: -100%;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+ /* This hack corrects the scrollable modal content on IE. */
+ .modal.ie-scroll-fix .modal-dialog {
+ display: block;
+ }
+}
+.modal-content {
+ margin: auto;
+ width: 40rem;
+ max-width: 100%;
+ padding: 3rem;
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffffff;
+ background-image: none;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ border-radius: 0.4rem;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.dark-mode .modal-content {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: #191c20;
+ background-image: none;
+ border-color: rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+@media (max-width: 576px) {
+ .modal-content {
+ padding: 2rem;
+ }
+}
+.modal-title {
+ font-size: 2rem;
+ font-weight: 500;
+ margin-top: 0;
+}
+.modal-content-media,
+.dark-mode .modal-content-media {
+ padding: 0;
+ background-color: transparent;
+ border: none;
+ border-radius: 0;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.modal-content-media img,
+.modal-content-media video {
+ display: block;
+}
+.modal-full .modal-content {
+ width: 100%;
+ border: none;
+ border-radius: 0;
+ padding: 3rem;
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffffff;
+ background-image: none;
+}
+.dark-mode .modal-full .modal-content {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: #191c20;
+ background-image: none;
+}
+@media (max-width: 576px) {
+ .modal-full .modal-content {
+ padding: 2rem;
+ }
+}
+.modal-content .close {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-align: center;
+ align-items: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ position: fixed;
+ cursor: pointer;
+ top: -100%;
+ left: 1rem;
+ z-index: 10;
+ padding: 0;
+ -webkit-transition: all .4s cubic-bezier(.25, .8, .25, 1);
+ transition: all .4s cubic-bezier(.25, .8, .25, 1);
+ font-size: 2rem;
+ width: 4rem;
+ height: 4rem;
+ color: #ffffff;
+ background-color: rgba(0, 0, 0, 0.7);
+ border-radius: 50%;
+ border-color: transparent;
+}
+.modal-content .close:hover {
+ text-decoration: none;
+ color: #ffffff;
+ background-color: rgba(0, 0, 0, 0.6);
+}
+.dark-mode .modal-content .close {
+ color: #ffffff;
+ background-color: rgba(255, 255, 255, 0.1);
+}
+.dark-mode .modal-content .close:hover {
+ color: #ffffff;
+ background-color: rgba(255, 255, 255, 0.2);
+}
+.modal-content .close:focus {
+ -webkit-transition: none;
+ transition: none;
+ outline: 2px solid rgba(24, 144, 255, 0.3);
+ outline-offset: 0.2rem;
+}
+.dark-mode .modal-content .close:focus {
+ outline-color: rgba(24, 144, 255, 0.3);
+}
+
+/* Showing modals */
+
+.modal:target,
+.modal.show {
+ top: 0;
+}
+.modal:target ~ .page-wrapper .sidebar,
+.modal:target ~ .page-wrapper .content-wrapper,
+.modal.show ~ .page-wrapper .sidebar,
+.modal.show ~ .page-wrapper .content-wrapper {
+ overflow: hidden;
+}
+.modal:target .modal-dialog,
+.modal.show .modal-dialog {
+ top: 0;
+}
+.modal:target .modal-content .close,
+.modal.show .modal-content .close {
+ top: 1rem;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+14. Alerts [hm-14]
+-------------------------------------------------------------------------------
+*/
+
+.alert {
+ position: relative;
+ padding: 1rem 2rem;
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffffff;
+ background-image: none;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ border-radius: 0.4rem;
+}
+.dark-mode .alert {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: #191c20;
+ background-image: none;
+ border-color: rgba(255, 255, 255, 0.1);
+}
+.alert-heading {
+ color: inherit;
+ font-size: 1.6rem;
+ font-weight: 500;
+ margin: 0 0 0.5rem 0;
+}
+.dark-mode .alert-heading {
+ color: inherit;
+ font-size: 1.6rem;
+ font-weight: 500;
+ margin: 0 0 0.5rem 0;
+}
+.alert-link,
+.dark-mode .alert-link {
+ cursor: pointer;
+ color: inherit;
+ text-decoration: underline;
+}
+.alert-link:hover,
+.dark-mode .alert-link:hover {
+ color: inherit;
+ opacity: 0.75;
+}
+.alert .close {
+ position: absolute;
+ top: 0;
+ right: 0;
+ cursor: pointer;
+ color: inherit;
+ padding: 0.4rem 0.6rem;
+ line-height: 1;
+ font-size: 1.6rem;
+ background-color: transparent;
+ border-color: transparent;
+}
+.alert .close:focus {
+ outline: 2px solid rgba(0, 0, 0, 0.5);
+ outline-offset: 0.2rem;
+}
+.dark-mode .alert .close:focus {
+ outline-color: rgba(255, 255, 255, 0.5);
+}
+.alert.dispose {
+ display: none;
+}
+
+/* Sticky alerts */
+
+.sticky-alerts .alert {
+ display: none;
+ width: 27rem;
+ margin-top: 1rem;
+ right: -50rem; /* Hidden by default */
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.045);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.045);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.045);
+}
+.sticky-alerts .alert.show {
+ right: 0;
+ -webkit-transition: right .4s cubic-bezier(.25, .8, .25, 1);
+ transition: right .4s cubic-bezier(.25, .8, .25, 1);
+}
+.sticky-alerts .alert.fade {
+ visibility: hidden;
+ opacity: 0;
+ -webkit-transition: visibility 0s .4s, opacity .4s linear;
+ transition: visibility 0s .4s, opacity .4s linear;
+}
+.sticky-alerts .alert.alert-block {
+ display: block;
+}
+.sticky-alerts .alert.alert-block.dispose {
+ display: none;
+}
+
+/* Filled alerts (primary, success, secondary, danger) */
+
+/* Light mode */
+
+.alert.alert-primary.filled {
+ color: #ffffff;
+ background-color: #1890ff;
+ background-image: none;
+ border-color: #1890ff;
+}
+
+.alert.alert-primary.filled-lm {
+ color: #ffffff;
+ background-color: #1890ff;
+ background-image: none;
+ border-color: #1890ff;
+}
+.alert.alert-success.filled {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #0be881;
+ background-image: none;
+ border-color: #0be881;
+}
+.alert.alert-success.filled-lm {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #0be881;
+ background-image: none;
+ border-color: #0be881;
+}
+.alert.alert-secondary.filled {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffcf00;
+ background-image: none;
+ border-color: #ffcf00;
+}
+.alert.alert-secondary.filled-lm {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffcf00;
+ background-image: none;
+ border-color: #ffcf00;
+}
+.alert.alert-danger.filled {
+ color: #ffffff;
+ background-color: #ff4d4f;
+ background-image: none;
+ border-color: #ff4d4f;
+}
+.alert.alert-danger.filled-lm {
+ color: #ffffff;
+ background-color: #ff4d4f;
+ background-image: none;
+ border-color: #ff4d4f;
+}
+
+/* Dark mode */
+
+.dark-mode .alert.alert-primary.filled {
+ color: #ffffff;
+ background-color: #1890ff;
+ background-image: none;
+ border-color: #1890ff;
+ -webkit-font-smoothing: auto;
+ -moz-osx-font-smoothing: auto;
+}
+
+.dark-mode .alert.alert-primary.filled-dm {
+ color: #ffffff;
+ background-color: #1890ff;
+ background-image: none;
+ border-color: #1890ff;
+ -webkit-font-smoothing: auto;
+ -moz-osx-font-smoothing: auto;
+}
+.dark-mode .alert.alert-success.filled {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #0be881;
+ background-image: none;
+ border-color: #0be881;
+ -webkit-font-smoothing: auto;
+ -moz-osx-font-smoothing: auto;
+}
+.dark-mode .alert.alert-success.filled-dm {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #0be881;
+ background-image: none;
+ border-color: #0be881;
+ -webkit-font-smoothing: auto;
+ -moz-osx-font-smoothing: auto;
+}
+.dark-mode .alert.alert-secondary.filled {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffcf00;
+ background-image: none;
+ border-color: #ffcf00;
+ -webkit-font-smoothing: auto;
+ -moz-osx-font-smoothing: auto;
+}
+.dark-mode .alert.alert-secondary.filled-dm {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffcf00;
+ background-image: none;
+ border-color: #ffcf00;
+ -webkit-font-smoothing: auto;
+ -moz-osx-font-smoothing: auto;
+}
+.dark-mode .alert.alert-danger.filled {
+ color: #ffffff;
+ background-color: #ff4d4f;
+ background-image: none;
+ border-color: #ff4d4f;
+ -webkit-font-smoothing: auto;
+ -moz-osx-font-smoothing: auto;
+}
+.dark-mode .alert.alert-danger.filled-dm {
+ color: #ffffff;
+ background-color: #ff4d4f;
+ background-image: none;
+ border-color: #ff4d4f;
+ -webkit-font-smoothing: auto;
+ -moz-osx-font-smoothing: auto;
+}
+
+/* Contextual alerts (primary, success, secondary, danger) */
+
+/* Light mode */
+
+.alert.alert-primary {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #cfe7fd;
+ background-image: none;
+ border-color: #1890ff;
+}
+.alert.alert-success {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #d5f9e5;
+ background-image: none;
+ border-color: #0be881;
+}
+.alert.alert-secondary {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #fff6cc;
+ background-image: none;
+ border-color: #ffcf00;
+}
+.alert.alert-danger {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #f8d0d9;
+ background-image: none;
+ border-color: #ff4d4f;
+}
+
+/* Dark mode */
+
+.dark-mode .alert.alert-primary {
+ color: #1890ff;
+ background-color: #172636;
+ background-image: none;
+ border-color: #0d518f;
+}
+.dark-mode .alert.alert-success {
+ color: #0be881;
+ background-color: #17312a;
+ background-image: none;
+ border-color: #0d8951;
+}
+.dark-mode .alert.alert-secondary {
+ color: #ffcf00;
+ background-color: #302c1d;
+ background-image: none;
+ border-color: #8e7710;
+}
+.dark-mode .alert.alert-danger {
+ color: #ff4d4f;
+ background-color: #301923;
+ background-image: none;
+ border-color: #8c0e2e;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+15. Navbar content [hm-15]
+-------------------------------------------------------------------------------
+*/
+
+.navbar .container {
+ width: 100%;
+ position: relative;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -ms-flex-align: center;
+ align-items: center;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ padding-left: calc(3rem - 1rem);
+ padding-right: calc(3rem - 1rem);
+}
+
+.navbar .container-sm {
+ width: 100%;
+ position: relative;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -ms-flex-align: center;
+ align-items: center;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ padding-left: calc(3rem - 1rem);
+ padding-right: calc(3rem - 1rem);
+}
+
+.navbar .container-md {
+ width: 100%;
+ position: relative;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -ms-flex-align: center;
+ align-items: center;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ padding-left: calc(3rem - 1rem);
+ padding-right: calc(3rem - 1rem);
+}
+
+.navbar .container-lg {
+ width: 100%;
+ position: relative;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -ms-flex-align: center;
+ align-items: center;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ padding-left: calc(3rem - 1rem);
+ padding-right: calc(3rem - 1rem);
+}
+
+.navbar .container-xl {
+ width: 100%;
+ position: relative;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -ms-flex-align: center;
+ align-items: center;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ padding-left: calc(3rem - 1rem);
+ padding-right: calc(3rem - 1rem);
+}
+
+.navbar .container-fluid {
+ width: 100%;
+ position: relative;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -ms-flex-align: center;
+ align-items: center;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ padding-left: calc(3rem - 1rem);
+ padding-right: calc(3rem - 1rem);
+}
+@media (max-width: 576px) {
+ .navbar .container {
+ padding-left: calc(2rem - 1rem);
+ padding-right: calc(2rem - 1rem);
+ }
+ .navbar .container-sm {
+ padding-left: calc(2rem - 1rem);
+ padding-right: calc(2rem - 1rem);
+ }
+ .navbar .container-md {
+ padding-left: calc(2rem - 1rem);
+ padding-right: calc(2rem - 1rem);
+ }
+ .navbar .container-lg {
+ padding-left: calc(2rem - 1rem);
+ padding-right: calc(2rem - 1rem);
+ }
+ .navbar .container-xl {
+ padding-left: calc(2rem - 1rem);
+ padding-right: calc(2rem - 1rem);
+ }
+ .navbar .container-fluid {
+ padding-left: calc(2rem - 1rem);
+ padding-right: calc(2rem - 1rem);
+ }
+}
+.navbar-brand,
+.navbar-nav,
+.navbar-text,
+.navbar-content {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-align: center;
+ align-items: center;
+ min-width: 0;
+}
+.navbar-brand:not(:first-child) {
+ margin-left: 1.5rem;
+}
+.navbar-nav:not(:first-child) {
+ margin-left: 1.5rem;
+}
+.navbar-text:not(:first-child) {
+ margin-left: 1.5rem;
+}
+.navbar-content:not(:first-child) {
+ margin-left: 1.5rem;
+}
+.navbar > .form-inline:not(:first-child) {
+ margin-left: 1.5rem;
+}
+
+/* Navbar text */
+
+.navbar-text {
+ color: rgba(0, 0, 0, 0.7);
+}
+.dark-mode .navbar-text {
+ color: rgba(255, 255, 255, 0.65);
+}
+
+/* Navbar nav */
+
+.navbar-nav {
+ padding-left: 0;
+ margin-bottom: 0;
+ list-style: none;
+ height: 5rem;
+}
+.nav-item {
+ height: 100%;
+ margin-bottom: 0;
+}
+.nav-link {
+ cursor: pointer; /* Needed if used without the href attribute, for example, as dropdown toggle */
+ display: inline-block;
+ display: flex;
+ align-items: center;
+ height: 100%;
+ white-space: nowrap;
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+ color: rgba(0, 0, 0, 0.85);
+ background-color: transparent;
+}
+.dark-mode .nav-link {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: transparent;
+}
+.nav-link:hover {
+ color: #1890ff;
+ background-color: transparent;
+ text-decoration: none;
+}
+.dark-mode .nav-link:hover {
+ color: #1890ff;
+ background-color: transparent;
+}
+.nav-item.active > .nav-link {
+ color: #1890ff;
+ background-color: transparent;
+}
+.nav-item.show > .nav-link {
+ color: #1890ff;
+ background-color: transparent;
+}
+.dark-mode .nav-item.active > .nav-link {
+ color: #1890ff;
+ background-color: transparent;
+ -webkit-font-smoothing: auto;
+ -moz-osx-font-smoothing: auto;
+}
+.dark-mode .nav-item.show > .nav-link {
+ color: #1890ff;
+ background-color: transparent;
+ -webkit-font-smoothing: auto;
+ -moz-osx-font-smoothing: auto;
+}
+.nav-item.active > .nav-link:hover {
+ color: #45a3fb;
+ background-color: transparent;
+}
+.nav-item.show > .nav-link:hover {
+ color: #45a3fb;
+ background-color: transparent;
+}
+.dark-mode .nav-item.active > .nav-link:hover {
+ color: #45a3fb;
+ background-color: transparent;
+}
+.dark-mode .nav-item.show > .nav-link:hover {
+ color: #45a3fb;
+ background-color: transparent;
+}
+.navbar-nav:first-child > .nav-item:first-child > .nav-link {
+ padding-left: 0;
+}
+.navbar-nav:last-child > .nav-item:last-child > .nav-link {
+ padding-right: 0;
+}
+
+/* Navbar brand */
+
+.navbar-brand {
+ font-size: 2rem;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.85);
+}
+.dark-mode .navbar-brand {
+ color: rgba(255, 255, 255, 0.8);
+}
+.navbar-brand:hover {
+ color: rgba(0, 0, 0, 0.7);
+ text-decoration: none;
+}
+.dark-mode .navbar-brand:hover {
+ color: rgba(255, 255, 255, 0.65);
+}
+.navbar-brand img {
+ height: 2.2rem;
+ margin-right: 1rem;
+}
+
+/* Navbar action button */
+
+.navbar .btn-action {
+ width: 3.6rem;
+ padding-left: 0;
+ padding-right: 0;
+}
+
+/* Navbar minimum widths for inline forms (Required for IE) */
+
+.navbar > .form-inline > .form-control {
+ min-width: 12rem;
+}
+
+.navbar > .form-inline > .form-group .form-control {
+ min-width: 12rem;
+}
+.navbar > .form-inline > .input-group {
+ min-width: 20rem;
+}
+@media (max-width: 576px) {
+ .navbar > .form-inline > .form-control {
+ min-width: 10rem;
+ }
+ .navbar > .form-inline > .form-group .form-control {
+ min-width: 10rem;
+ }
+ .navbar > .form-inline > .input-group {
+ min-width: 18rem;
+ }
+}
+
+
+/*
+-------------------------------------------------------------------------------
+16. Sidebar content [hm-16]
+-------------------------------------------------------------------------------
+*/
+
+.sidebar-menu {
+ margin-top: 2.5rem;
+ margin-bottom: 2.5rem;
+}
+
+/* Sidebar content */
+
+.sidebar-content {
+ display: block;
+ padding: 0;
+ margin: 2.5rem 2.5rem;
+}
+.sidebar-content > ul,
+.sidebar-content > ol {
+ margin-left: 0;
+}
+
+/* Sidebar divider */
+
+.sidebar-divider {
+ padding: 0;
+ margin: 0.5rem 2.5rem;
+ height: 1px;
+ background-color: rgba(0, 0, 0, 0.05);
+}
+.dark-mode .sidebar-divider {
+ background-color: rgba(255, 255, 255, 0.05);
+}
+
+/* Sidebar link */
+
+.sidebar-link {
+ display: block;
+ padding: 0.5rem 2.5rem;
+ margin: 0;
+ min-height: 3rem;
+ height: auto;
+ color: rgba(0, 0, 0, 0.7);
+ background-color: transparent;
+ border: 0 solid transparent;
+ border-radius: 0;
+}
+.sidebar-link:hover {
+ text-decoration: none;
+ color: rgba(0, 0, 0, 0.85);
+ background-color: transparent;
+ border-color: transparent;
+}
+.dark-mode .sidebar-link {
+ color: rgba(255, 255, 255, 0.65);
+ background-color: transparent;
+ border-color: transparent;
+}
+.dark-mode .sidebar-link:hover {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: transparent;
+ border-color: transparent;
+}
+.sidebar-link.active {
+ color: #1890ff;
+ background-color: transparent;
+ border-color: transparent;
+}
+.sidebar-link.active:hover {
+ color: #45a3fb;
+ background-color: transparent;
+ border-color: transparent;
+}
+.dark-mode .sidebar-link.active {
+ color: #1890ff;
+ background-color: transparent;
+ border-color: transparent;
+ -webkit-font-smoothing: auto;
+ -moz-osx-font-smoothing: auto;
+}
+.dark-mode .sidebar-link.active:hover {
+ color: #45a3fb;
+ background-color: transparent;
+ border-color: transparent;
+}
+
+/* Sidebar title */
+
+.sidebar-title {
+ padding: 0;
+ margin: 0.5rem 2.5rem;
+ font-size: 1.5rem;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.85);
+}
+.dark-mode .sidebar-title {
+ color: rgba(255, 255, 255, 0.8);
+}
+
+/* Sidebar link with icon */
+
+.sidebar-link-with-icon {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.sidebar-icon {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-align: center;
+ align-items: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ width: 3rem;
+ height: 3rem;
+ font-size: 1.6rem;
+ margin-right: 1rem;
+ color: rgba(0, 0, 0, 0.7);
+ background-color: rgba(0, 0, 0, 0.05);
+ border: 0 solid transparent;
+ border-radius: 0.4rem;
+}
+.sidebar-link-with-icon:hover .sidebar-icon {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: rgba(0, 0, 0, 0.05);
+ border-color: transparent;
+}
+.dark-mode .sidebar-icon {
+ color: rgba(255, 255, 255, 0.65);
+ background-color: rgba(255, 255, 255, 0.05);
+ border-color: transparent;
+}
+.dark-mode .sidebar-link-with-icon:hover .sidebar-icon {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.05);
+ border-color: transparent;
+}
+.sidebar-link-with-icon.active .sidebar-icon {
+ color: rgba(0, 0, 0, 0.7);
+ background-color: rgba(0, 0, 0, 0.05);
+ border-color: transparent;
+}
+.sidebar-link-with-icon.active:hover .sidebar-icon {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: rgba(0, 0, 0, 0.05);
+ border-color: transparent;
+}
+.dark-mode .sidebar-link-with-icon.active .sidebar-icon {
+ color: rgba(255, 255, 255, 0.65);
+ background-color: rgba(255, 255, 255, 0.05);
+ border-color: transparent;
+}
+.dark-mode .sidebar-link-with-icon.active:hover .sidebar-icon {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.05);
+ border-color: transparent;
+}
+
+/* Sidebar brand */
+
+.sidebar-brand {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-align: center;
+ align-items: center;
+ padding: 0;
+ margin: 0.5rem 2.5rem;
+ font-size: 2rem;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.85);
+}
+.dark-mode .sidebar-brand {
+ color: rgba(255, 255, 255, 0.8);
+}
+.sidebar-brand:hover {
+ color: rgba(0, 0, 0, 0.7);
+ text-decoration: none;
+}
+.dark-mode .sidebar-brand:hover {
+ color: rgba(255, 255, 255, 0.65);
+}
+.sidebar-brand img {
+ height: 2.2rem;
+ margin-right: 1rem;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+17. Pagination [hm-17]
+-------------------------------------------------------------------------------
+*/
+
+.page-item {
+ display: inline-block;
+ list-style: none;
+ vertical-align: middle;
+ margin-bottom: 0;
+}
+.page-item.ellipsis:before {
+ content: "\2026";
+}
+.page-item.ellipsis {
+ display: inline-block;
+ padding: 0 0.5rem;
+ margin: 0 0.2rem 0.5rem 0;
+ font-size: 1.4rem;
+ min-width: 3.5rem;
+ height: 3.5rem;
+ line-height: 3.5rem;
+ text-align: center;
+ color: rgba(0, 0, 0, 0.7);
+ background-color: #ffffff;
+ background-image: none;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ border-radius: 0.4rem;
+}
+.page-link {
+ display: inline-block;
+ padding: 0 0.5rem;
+ margin: 0 0.2rem 0.5rem 0;
+ font-size: 1.4rem;
+ min-width: 3.5rem;
+ height: 3.5rem;
+ line-height: 3.5rem;
+ text-align: center;
+ color: rgba(0, 0, 0, 0.7);
+ background-color: #ffffff;
+ background-image: none;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ border-radius: 0.4rem;
+}
+.dark-mode .page-item.ellipsis {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.05);
+ background-image: none;
+ border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent;
+}
+.dark-mode .page-link {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.05);
+ background-image: none;
+ border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent;
+}
+.page-link {
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.dark-mode .page-link {
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+}
+.page-link:hover {
+ text-decoration: none;
+ color: rgba(0, 0, 0, 0.7);
+ background-color: #f7f7f7;
+ background-image: none;
+ border-color: rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+}
+.dark-mode .page-link:hover {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.1);
+ background-image: none;
+ border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+}
+.page-item.active .page-link {
+ color: #ffffff;
+ background-color: #1890ff;
+ background-image: none;
+ border-color: #1890ff;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
+ pointer-events: none;
+}
+.dark-mode .page-item.active .page-link {
+ color: #ffffff;
+ background-color: #1890ff;
+ background-image: none;
+ border-color: #1890ff;
+ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
+ -webkit-font-smoothing: auto;
+ -moz-osx-font-smoothing: auto;
+}
+.pagination-rounded .page-item.ellipsis,
+.pagination-rounded .page-link {
+ border-radius: 50%;
+}
+
+/* Large pagination */
+
+.pagination-lg .page-item.ellipsis {
+ padding: 0 0.5rem;
+ margin: 0 0.2rem 0.5rem 0;
+ font-size: 1.8rem;
+ min-width: 4.2rem;
+ height: 4.2rem;
+ line-height: 4.2rem;
+}
+
+.pagination-lg .page-link {
+ padding: 0 0.5rem;
+ margin: 0 0.2rem 0.5rem 0;
+ font-size: 1.8rem;
+ min-width: 4.2rem;
+ height: 4.2rem;
+ line-height: 4.2rem;
+}
+
+/* Small pagination */
+
+.pagination-sm .page-item.ellipsis {
+ padding: 0 0.5rem;
+ margin: 0 0.2rem 0.5rem 0;
+ font-size: 1.2rem;
+ min-width: 2.8rem;
+ height: 2.8rem;
+ line-height: 2.8rem;
+}
+
+.pagination-sm .page-link {
+ padding: 0 0.5rem;
+ margin: 0 0.2rem 0.5rem 0;
+ font-size: 1.2rem;
+ min-width: 2.8rem;
+ height: 2.8rem;
+ line-height: 2.8rem;
+}
+
+/* Disabled state */
+
+.page-item.disabled .page-link,
+.dark-mode .page-item.disabled .page-link {
+ opacity: 0.6;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ pointer-events: none;
+}
+
+/*
+-------------------------------------------------------------------------------
+18. Breadcrumb [hm-18]
+-------------------------------------------------------------------------------
+*/
+
+.breadcrumb {
+ padding: 0;
+ background-color: transparent;
+ border: 0 solid transparent;
+ border-radius: 0;
+}
+.dark-mode .breadcrumb {
+ background-color: transparent;
+ border-color: transparent;
+}
+.breadcrumb-item {
+ display: inline-block;
+ list-style: none;
+ margin-bottom: 0;
+}
+.breadcrumb-item:before {
+ content: "\002F";
+ margin-left: 1rem;
+ margin-right: 1.5rem;
+}
+.breadcrumb-item:first-child:before {
+ display: none;
+}
+.breadcrumb-item.active a {
+ pointer-events: none;
+ color: inherit;
+}
+.dark-mode .breadcrumb-item a {
+ /*
+ Links are NOT antialiased because they are NOT light text on a dark bg.
+ */
+ -webkit-font-smoothing: auto;
+ -moz-osx-font-smoothing: auto;
+}
+.dark-mode .breadcrumb-item.active a {
+ /*
+ Active links ARE antialiased because they ARE light text on a dark bg.
+ */
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+19. Tooltips [hm-19]
+-------------------------------------------------------------------------------
+*/
+
+[data-toggle="tooltip"] {
+ position: relative;
+}
+
+/* Tooltip arrow */
+
+[data-toggle="tooltip"]::before {
+ content: " ";
+ width: 1rem;
+ height: 1rem;
+ background-color: #191c20;
+ position: absolute;
+ visibility: hidden;
+ opacity: 0;
+ z-index: 90;
+}
+.dark-mode [data-toggle="tooltip"]::before {
+ background-color: #ffffff;
+}
+
+/* Tooltip content */
+
+[data-toggle="tooltip"]::after {
+ content: attr(data-title);
+ white-space: normal;
+ width: 10rem;
+ font-size: 1.2rem;
+ line-height: 1.5;
+ padding: 0.5rem 1rem;
+ color: rgba(255, 255, 255, 0.8);
+ background-color: #191c20;
+ border-radius: 0.4rem;
+ text-align: center;
+ position: absolute;
+ visibility: hidden;
+ z-index: 90;
+}
+.dark-mode [data-toggle="tooltip"]::after {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffffff;
+}
+
+/* Tooltip top */
+
+[data-toggle="tooltip"]:not([data-placement])::before,
+[data-toggle="tooltip"][data-placement="top"]::before {
+ left: 50%;
+ top: -0.5rem;
+ transform: translate(-50%, -100%) rotate(45deg);
+}
+[data-toggle="tooltip"]:not([data-placement])::after,
+[data-toggle="tooltip"][data-placement="top"]::after {
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+}
+
+/* Tooltip bottom */
+
+[data-toggle="tooltip"][data-placement="bottom"]::before {
+ left: 50%;
+ bottom: -0.5rem;
+ transform: translate(-50%, 100%) rotate(45deg);
+}
+[data-toggle="tooltip"][data-placement="bottom"]::after {
+ left: 50%;
+ bottom: 50%;
+ transform: translate(-50%, 50%);
+}
+
+/* Tooltip left */
+
+[data-toggle="tooltip"][data-placement="left"]::before {
+ left: -0.5rem;
+ transform: translate(-100%, 100%) rotate(45deg);
+}
+[data-toggle="tooltip"][data-placement="left"]::after {
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+}
+
+/* Tooltip right */
+
+[data-toggle="tooltip"][data-placement="right"]::before {
+ right: -0.5rem;
+ transform: translate(100%, 100%) rotate(45deg);
+}
+[data-toggle="tooltip"][data-placement="right"]::after {
+ right: 50%;
+ top: 50%;
+ transform: translate(50%, -50%);
+}
+
+/* Show tooltips (on all screens) */
+
+/* Arrow */
+
+[data-toggle="tooltip"]:not([data-target-breakpoint]):hover::before,
+[data-toggle="tooltip"]:not([data-target-breakpoint]):focus::before {
+ visibility: visible;
+ opacity: 1;
+ transition: opacity 0.5s;
+ -webkit-transition: opacity 0.5s;
+}
+
+/* Content */
+
+[data-toggle="tooltip"]:not([data-target-breakpoint]):hover::after,
+[data-toggle="tooltip"]:not([data-target-breakpoint]):focus::after {
+ visibility: visible;
+ -webkit-transition: all 0.1s, color 0s, background-color 0s;
+ transition: all 0.1s, color 0s, background-color 0s;
+}
+
+/* Placement */
+
+[data-toggle="tooltip"]:not([data-target-breakpoint]):not([data-placement]):hover::after,
+[data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="top"]:hover::after,
+[data-toggle="tooltip"]:not([data-target-breakpoint]):not([data-placement]):focus::after,
+[data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="top"]:focus::after {
+ top: -1rem;
+ transform: translate(-50%, -100%);
+}
+[data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="bottom"]:hover::after,
+[data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="bottom"]:focus::after {
+ bottom: -1rem;
+ transform: translate(-50%, 100%);
+}
+[data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="left"]:hover::after,
+[data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="left"]:focus::after {
+ left: -1rem;
+ transform: translate(-100%, -50%);
+}
+[data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="right"]:hover::after,
+[data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="right"]:focus::after {
+ right: -1rem;
+ transform: translate(100%, -50%);
+}
+
+/* Show tooltips (only on screens with widths > 768px) */
+
+@media (min-width: 769px) {
+ /* Arrow */
+
+ [data-toggle="tooltip"][data-target-breakpoint="md"]:hover::before,
+ [data-toggle="tooltip"][data-target-breakpoint="md"]:focus::before {
+ visibility: visible;
+ opacity: 1;
+ transition: opacity 0.5s;
+ -webkit-transition: opacity 0.5s;
+ }
+
+ /* Content */
+
+ [data-toggle="tooltip"][data-target-breakpoint="md"]:hover::after,
+ [data-toggle="tooltip"][data-target-breakpoint="md"]:focus::after {
+ visibility: visible;
+ -webkit-transition: all 0.1s, color 0s, background-color 0s;
+ transition: all 0.1s, color 0s, background-color 0s;
+ }
+
+ /* Placement */
+
+ [data-toggle="tooltip"][data-target-breakpoint="md"]:not([data-placement]):hover::after,
+ [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="top"]:hover::after,
+ [data-toggle="tooltip"][data-target-breakpoint="md"]:not([data-placement]):focus::after,
+ [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="top"]:focus::after {
+ top: -1rem;
+ transform: translate(-50%, -100%);
+ }
+ [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="bottom"]:hover::after,
+ [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="bottom"]:focus::after {
+ bottom: -1rem;
+ transform: translate(-50%, 100%);
+ }
+ [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="left"]:hover::after,
+ [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="left"]:focus::after {
+ left: -1rem;
+ transform: translate(-100%, -50%);
+ }
+ [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="right"]:hover::after,
+ [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="right"]:focus::after {
+ right: -1rem;
+ transform: translate(100%, -50%);
+ }
+}
+
+/* Show tooltips (only on screens with widths > 992px) */
+
+@media (min-width: 993px) {
+ /* Arrow */
+
+ [data-toggle="tooltip"][data-target-breakpoint="lg"]:hover::before,
+ [data-toggle="tooltip"][data-target-breakpoint="lg"]:focus::before {
+ visibility: visible;
+ opacity: 1;
+ transition: opacity 0.5s;
+ -webkit-transition: opacity 0.5s;
+ }
+
+ /* Content */
+
+ [data-toggle="tooltip"][data-target-breakpoint="lg"]:hover::after,
+ [data-toggle="tooltip"][data-target-breakpoint="lg"]:focus::after {
+ visibility: visible;
+ -webkit-transition: all 0.1s, color 0s, background-color 0s;
+ transition: all 0.1s, color 0s, background-color 0s;
+ }
+
+ /* Placement */
+
+ [data-toggle="tooltip"][data-target-breakpoint="lg"]:not([data-placement]):hover::after,
+ [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="top"]:hover::after,
+ [data-toggle="tooltip"][data-target-breakpoint="lg"]:not([data-placement]):focus::after,
+ [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="top"]:focus::after {
+ top: -1rem;
+ transform: translate(-50%, -100%);
+ }
+ [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="bottom"]:hover::after,
+ [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="bottom"]:focus::after {
+ bottom: -1rem;
+ transform: translate(-50%, 100%);
+ }
+ [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="left"]:hover::after,
+ [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="left"]:focus::after {
+ left: -1rem;
+ transform: translate(-100%, -50%);
+ }
+ [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="right"]:hover::after,
+ [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="right"]:focus::after {
+ right: -1rem;
+ transform: translate(100%, -50%);
+ }
+}
+
+
+/*
+-------------------------------------------------------------------------------
+20. Badges [hm-20]
+-------------------------------------------------------------------------------
+*/
+
+.badge {
+ display: inline-block;
+ position: relative;
+ font-size: 1.2rem;
+ line-height: 1.2;
+ padding: 0.2rem 0.8rem;
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffffff;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ border-radius: 0.4rem;
+}
+.dark-mode .badge {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: transparent;
+ border-color: rgba(255, 255, 255, 0.2);
+}
+.badge-pill {
+ border-radius: 3rem;
+}
+
+/* Primary, success, secondary, danger badges. */
+
+/* Light mode */
+
+.badge.badge-primary {
+ color: #ffffff;
+ background-color: #1890ff;
+ border-color: #1890ff;
+}
+.badge.badge-success {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #0be881;
+ border-color: #0be881;
+}
+.badge.badge-secondary {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffcf00;
+ border-color: #ffcf00;
+}
+.badge.badge-danger {
+ color: #ffffff;
+ background-color: #ff4d4f;
+ border-color: #ff4d4f;
+}
+
+/* Dark mode */
+
+.dark-mode .badge.badge-primary {
+ color: #ffffff;
+ background-color: #1890ff;
+ border-color: #1890ff;
+ -webkit-font-smoothing: auto;
+ -moz-osx-font-smoothing: auto;
+}
+.dark-mode .badge.badge-success {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #0be881;
+ border-color: #0be881;
+ -webkit-font-smoothing: auto;
+ -moz-osx-font-smoothing: auto;
+}
+.dark-mode .badge.badge-secondary {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffcf00;
+ border-color: #ffcf00;
+ -webkit-font-smoothing: auto;
+ -moz-osx-font-smoothing: auto;
+}
+.dark-mode .badge.badge-danger {
+ color: #ffffff;
+ background-color: #ff4d4f;
+ border-color: #ff4d4f;
+ -webkit-font-smoothing: auto;
+ -moz-osx-font-smoothing: auto;
+}
+
+/* Badge group */
+
+.badge-group {
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+}
+.badge-group > .badge:not(:first-child) {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+.badge-group > .badge:not(:last-child) {
+ border-right: none;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
+/* Link badges */
+
+/* Light mode */
+
+a.badge:hover,
+a.badge-group:hover {
+ text-decoration: none;
+}
+a.badge:hover {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #f7f7f7;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+a.badge-group:hover > .badge {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #f7f7f7;
+ border-color: rgba(0, 0, 0, 0.2);
+}
+a.badge.badge-primary:hover {
+ color: #ffffff;
+ background-color: #45a3fb;
+ border-color: #45a3fb;
+}
+a.badge-group:hover > .badge.badge-primary {
+ color: #ffffff;
+ background-color: #45a3fb;
+ border-color: #45a3fb;
+}
+a.badge.badge-success:hover {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #81eea8;
+ border-color: #81eea8;
+}
+a.badge-group:hover > .badge.badge-success {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #81eea8;
+ border-color: #81eea8;
+}
+a.badge.badge-secondary:hover {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffe04d;
+ border-color: #ffe04d;
+}
+a.badge-group:hover > .badge.badge-secondary {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffe04d;
+ border-color: #ffe04d;
+}
+a.badge.badge-danger:hover {
+ color: #ffffff;
+ background-color: #ed586c;
+ border-color: #ed586c;
+}
+a.badge-group:hover > .badge.badge-danger {
+ color: #ffffff;
+ background-color: #ed586c;
+ border-color: #ed586c;
+}
+
+/* Dark mode */
+
+.dark-mode a.badge:hover {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.025);
+ border-color: rgba(255, 255, 255, 0.2);
+}
+
+.dark-mode a.badge-group:hover > .badge {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.025);
+ border-color: rgba(255, 255, 255, 0.2);
+}
+.dark-mode a.badge.badge-primary:hover {
+ color: #ffffff;
+ background-color: #45a3fb;
+ border-color: #45a3fb;
+}
+.dark-mode a.badge-group:hover > .badge.badge-primary {
+ color: #ffffff;
+ background-color: #45a3fb;
+ border-color: #45a3fb;
+}
+.dark-mode a.badge.badge-success:hover {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #81eea8;
+ border-color: #81eea8;
+}
+.dark-mode a.badge-group:hover > .badge.badge-success {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #81eea8;
+ border-color: #81eea8;
+}
+.dark-mode a.badge.badge-secondary:hover {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffe04d;
+ border-color: #ffe04d;
+}
+.dark-mode a.badge-group:hover > .badge.badge-secondary {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #ffe04d;
+ border-color: #ffe04d;
+}
+.dark-mode a.badge.badge-danger:hover {
+ color: #ffffff;
+ background-color: #ed586c;
+ border-color: #ed586c;
+}
+.dark-mode a.badge-group:hover > .badge.badge-danger {
+ color: #ffffff;
+ background-color: #ed586c;
+ border-color: #ed586c;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+21. Image [hm-21]
+-------------------------------------------------------------------------------
+*/
+
+.img-fluid {
+ max-width: 100%;
+ height: auto;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+22. Button group [hm-22]
+-------------------------------------------------------------------------------
+*/
+
+.btn-group,
+.btn-group-vertical {
+ position: relative;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ vertical-align: middle;
+}
+.btn-group > .btn,
+.btn-group-vertical > .btn {
+ position: relative;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+}
+.btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active,
+.btn-group-vertical > .btn:focus,
+.btn-group-vertical > .btn:active,
+.btn-group-vertical > .btn.active {
+ z-index: 1;
+}
+.btn-group > .btn:not(:first-child) {
+ margin-left: calc((-1) * 1px);
+}
+.btn-group > .btn-group:not(:first-child) {
+ margin-left: calc((-1) * 1px);
+}
+.btn-group > .btn:not(:last-child):not([data-toggle="dropdown"]),
+.btn-group > .btn-group:not(:last-child) > .btn {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
+.btn-group > .btn:not(:first-child),
+.btn-group > .btn-group:not(:first-child) > .btn {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+.btn-group-vertical {
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -ms-flex-align: start;
+ align-items: flex-start;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.btn-group-vertical > .btn,
+.btn-group-vertical > .btn-group {
+ width: 100%;
+}
+.btn-group-vertical > .btn:not(:first-child) {
+ margin-top: calc((-1) * 1px);
+}
+.btn-group-vertical > .btn-group:not(:first-child) {
+ margin-top: calc((-1) * 1px);
+}
+.btn-group-vertical > .btn:not(:last-child):not([data-toggle="dropdown"]),
+.btn-group-vertical > .btn-group:not(:last-child) > .btn {
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+}
+.btn-group-vertical > .btn:not(:first-child),
+.btn-group-vertical > .btn-group:not(:first-child) > .btn {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+}
+
+/* Remove box shadow for button group vertical (except last button) */
+
+.btn-group-vertical > .btn:not(:last-child):not([data-toggle="dropdown"]):not(:focus):not(.active),
+.btn-group-vertical > .btn-group:not(:last-child) > .btn:not(:focus):not(.active) {
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+/* Button group sizing */
+
+.btn-group-sm > .btn {
+ height: 2.6rem;
+ line-height: 2.6rem;
+ padding: 0 1rem;
+ font-size: 1.2rem;
+}
+.btn-group-lg > .btn {
+ height: 4rem;
+ line-height: 4rem;
+ padding: 0 2rem;
+ font-size: 1.8rem;
+}
+.btn-group-sm > .btn-square {
+ width: 2.6rem;
+ padding-left: 0;
+ padding-right: 0;
+}
+.btn-group-lg > .btn-square {
+ width: 4rem;
+ padding-left: 0;
+ padding-right: 0;
+}
+.btn-group-sm > .btn-rounded {
+ border-radius: 2.6rem;
+}
+.btn-group-lg > .btn-rounded {
+ border-radius: 4rem;
+}
+
+/* Button toolbar */
+
+.btn-toolbar {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+}
+.btn-toolbar .input-group {
+ width: auto;
+}
+
+/* Button toolbar minimum width for input groups (Required for IE) */
+
+.btn-toolbar .input-group {
+ min-width: 20rem;
+}
+@media (max-width: 576px) {
+ .btn-toolbar .input-group {
+ min-width: 18rem;
+ }
+}
+
+/* Buttons (only border colors) */
+
+.btn-group > .btn {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+
+.btn-group-vertical > .btn {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-group > .btn:hover {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-group-vertical > .btn:hover {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-group > .btn:focus {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-group-vertical > .btn:focus {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-group > .btn.active {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-group-vertical > .btn.active {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .btn-group > .btn {
+ border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .btn-group-vertical > .btn {
+ border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .btn-group > .btn:hover {
+ border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .btn-group-vertical > .btn:hover {
+ border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .btn-group > .btn:focus {
+ border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .btn-group-vertical > .btn:focus {
+ border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .btn-group > .btn.active {
+ border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .btn-group-vertical > .btn.active {
+ border-color: rgba(0, 0, 0, 0.3);
+}
+
+/* Link button */
+
+.btn-group > .btn.btn-link {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+
+.btn-group-vertical > .btn.btn-link {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-group > .btn.btn-link:hover {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-group-vertical > .btn.btn-link:hover {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-group > .btn.btn-link:focus {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-group-vertical > .btn.btn-link:focus {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-group > .btn.btn-link.active {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.btn-group-vertical > .btn.btn-link.active {
+ border-color: rgba(0, 0, 0, 0.2);
+}
+.dark-mode .btn-group > .btn.btn-link {
+ border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .btn-group-vertical > .btn.btn-link {
+ border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .btn-group > .btn.btn-link:hover {
+ border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .btn-group-vertical > .btn.btn-link:hover {
+ border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .btn-group > .btn.btn-link:focus {
+ border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .btn-group-vertical > .btn.btn-link:focus {
+ border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .btn-group > .btn.btn-link.active {
+ border-color: rgba(0, 0, 0, 0.3);
+}
+.dark-mode .btn-group-vertical > .btn.btn-link.active {
+ border-color: rgba(0, 0, 0, 0.3);
+}
+
+/* Primary button */
+
+.btn-group > .btn.btn-primary {
+ border-color: #1890ff;
+}
+
+.btn-group-vertical > .btn.btn-primary {
+ border-color: #1890ff;
+}
+.btn-group > .btn.btn-primary:hover {
+ border-color: #45a3fb;
+}
+.btn-group-vertical > .btn.btn-primary:hover {
+ border-color: #45a3fb;
+}
+.btn-group > .btn.btn-primary:focus {
+ border-color: #1890ff;
+}
+.btn-group-vertical > .btn.btn-primary:focus {
+ border-color: #1890ff;
+}
+.btn-group > .btn.btn-primary.active {
+ border-color: #1890ff;
+}
+.btn-group-vertical > .btn.btn-primary.active {
+ border-color: #1890ff;
+}
+.dark-mode .btn-group > .btn.btn-primary {
+ border-color: #1890ff;
+}
+.dark-mode .btn-group-vertical > .btn.btn-primary {
+ border-color: #1890ff;
+}
+.dark-mode .btn-group > .btn.btn-primary:hover {
+ border-color: #45a3fb;
+}
+.dark-mode .btn-group-vertical > .btn.btn-primary:hover {
+ border-color: #45a3fb;
+}
+.dark-mode .btn-group > .btn.btn-primary:focus {
+ border-color: #1890ff;
+}
+.dark-mode .btn-group-vertical > .btn.btn-primary:focus {
+ border-color: #1890ff;
+}
+.dark-mode .btn-group > .btn.btn-primary.active {
+ border-color: #1890ff;
+}
+.dark-mode .btn-group-vertical > .btn.btn-primary.active {
+ border-color: #1890ff;
+}
+
+/* Success button */
+
+.btn-group > .btn.btn-success {
+ border-color: #0be881;
+}
+
+.btn-group-vertical > .btn.btn-success {
+ border-color: #0be881;
+}
+.btn-group > .btn.btn-success:hover {
+ border-color: #81eea8;
+}
+.btn-group-vertical > .btn.btn-success:hover {
+ border-color: #81eea8;
+}
+.btn-group > .btn.btn-success:focus {
+ border-color: #0be881;
+}
+.btn-group-vertical > .btn.btn-success:focus {
+ border-color: #0be881;
+}
+.btn-group > .btn.btn-success.active {
+ border-color: #0be881;
+}
+.btn-group-vertical > .btn.btn-success.active {
+ border-color: #0be881;
+}
+.dark-mode .btn-group > .btn.btn-success {
+ border-color: #0be881;
+}
+.dark-mode .btn-group-vertical > .btn.btn-success {
+ border-color: #0be881;
+}
+.dark-mode .btn-group > .btn.btn-success:hover {
+ border-color: #81eea8;
+}
+.dark-mode .btn-group-vertical > .btn.btn-success:hover {
+ border-color: #81eea8;
+}
+.dark-mode .btn-group > .btn.btn-success:focus {
+ border-color: #0be881;
+}
+.dark-mode .btn-group-vertical > .btn.btn-success:focus {
+ border-color: #0be881;
+}
+.dark-mode .btn-group > .btn.btn-success.active {
+ border-color: #0be881;
+}
+.dark-mode .btn-group-vertical > .btn.btn-success.active {
+ border-color: #0be881;
+}
+
+/* Secondary button */
+
+.btn-group > .btn.btn-secondary {
+ border-color: #ffcf00;
+}
+
+.btn-group-vertical > .btn.btn-secondary {
+ border-color: #ffcf00;
+}
+.btn-group > .btn.btn-secondary:hover {
+ border-color: #ffe04d;
+}
+.btn-group-vertical > .btn.btn-secondary:hover {
+ border-color: #ffe04d;
+}
+.btn-group > .btn.btn-secondary:focus {
+ border-color: #ffcf00;
+}
+.btn-group-vertical > .btn.btn-secondary:focus {
+ border-color: #ffcf00;
+}
+.btn-group > .btn.btn-secondary.active {
+ border-color: #ffcf00;
+}
+.btn-group-vertical > .btn.btn-secondary.active {
+ border-color: #ffcf00;
+}
+.dark-mode .btn-group > .btn.btn-secondary {
+ border-color: #ffcf00;
+}
+.dark-mode .btn-group-vertical > .btn.btn-secondary {
+ border-color: #ffcf00;
+}
+.dark-mode .btn-group > .btn.btn-secondary:hover {
+ border-color: #ffe04d;
+}
+.dark-mode .btn-group-vertical > .btn.btn-secondary:hover {
+ border-color: #ffe04d;
+}
+.dark-mode .btn-group > .btn.btn-secondary:focus {
+ border-color: #ffcf00;
+}
+.dark-mode .btn-group-vertical > .btn.btn-secondary:focus {
+ border-color: #ffcf00;
+}
+.dark-mode .btn-group > .btn.btn-secondary.active {
+ border-color: #ffcf00;
+}
+.dark-mode .btn-group-vertical > .btn.btn-secondary.active {
+ border-color: #ffcf00;
+}
+
+/* Danger button */
+
+.btn-group > .btn.btn-danger {
+ border-color: #ff4d4f;
+}
+
+.btn-group-vertical > .btn.btn-danger {
+ border-color: #ff4d4f;
+}
+.btn-group > .btn.btn-danger:hover {
+ border-color: #ed586c;
+}
+.btn-group-vertical > .btn.btn-danger:hover {
+ border-color: #ed586c;
+}
+.btn-group > .btn.btn-danger:focus {
+ border-color: #ff4d4f;
+}
+.btn-group-vertical > .btn.btn-danger:focus {
+ border-color: #ff4d4f;
+}
+.btn-group > .btn.btn-danger.active {
+ border-color: #ff4d4f;
+}
+.btn-group-vertical > .btn.btn-danger.active {
+ border-color: #ff4d4f;
+}
+.dark-mode .btn-group > .btn.btn-danger {
+ border-color: #ff4d4f;
+}
+.dark-mode .btn-group-vertical > .btn.btn-danger {
+ border-color: #ff4d4f;
+}
+.dark-mode .btn-group > .btn.btn-danger:hover {
+ border-color: #ed586c;
+}
+.dark-mode .btn-group-vertical > .btn.btn-danger:hover {
+ border-color: #ed586c;
+}
+.dark-mode .btn-group > .btn.btn-danger:focus {
+ border-color: #ff4d4f;
+}
+.dark-mode .btn-group-vertical > .btn.btn-danger:focus {
+ border-color: #ff4d4f;
+}
+.dark-mode .btn-group > .btn.btn-danger.active {
+ border-color: #ff4d4f;
+}
+.dark-mode .btn-group-vertical > .btn.btn-danger.active {
+ border-color: #ff4d4f;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+23. Collapse [hm-23]
+-------------------------------------------------------------------------------
+*/
+
+details,
+details * {
+ /* Fixes Chrome bug */
+ box-sizing: border-box;
+}
+
+/* Collapse header */
+
+.collapse-header {
+ position: relative;
+ cursor: pointer;
+ padding: 1.2rem 2rem;
+ font-size: 1.4rem;
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #f7f7f7;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ border-radius: 0.4rem;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.dark-mode .collapse-header {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.02);
+ border-color: #47494d;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.collapse-header:focus {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #f7f7f7;
+ border-color: rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.dark-mode .collapse-header:focus {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.02);
+ border-color: #47494d;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.collapse-panel[open] .collapse-header {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #f7f7f7;
+ border-color: rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.dark-mode .collapse-panel[open] .collapse-header {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.02);
+ border-color: #47494d;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.collapse-panel[open] .collapse-header:focus {
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #f7f7f7;
+ border-color: rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.dark-mode .collapse-panel[open] .collapse-header:focus {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.02);
+ border-color: #47494d;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ outline: none;
+}
+.collapse-panel[open] .collapse-header {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
+/* Collapse header arrow set using background image */
+
+.collapse-header {
+ /* Firefox */
+ list-style-type: none;
+}
+.collapse-header::-webkit-details-marker {
+ /* Chrome */
+ display: none;
+}
+.collapse-header::marker {
+ display: none;
+}
+.collapse-header:not(.without-arrow) {
+ padding: 1.2rem 2rem 1.2rem 4.4rem;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5AgHFAwNJY24UQAAAJVJREFUKM+lk8ENgzAMRZ9hgS4SiRFgDN+6QifpCD1mDFbIIQuwASNwcaSqKsEW/5RI/1n+jiMAqvoE3sCScy50JGb+2H2/ggar3PQAVlWdesBilV2QWIYJWM1Mrz1pBy8k37QHkt8eryD5F6wHydn4zqCBoO63FAodGmvo4UKrETG3bXWbG/DymgHGWmtJKW3A7PmiB2rUYYave/NSAAAAAElFTkSuQmCC);
+ background-size: 0.6rem;
+ background-repeat: no-repeat;
+ background-position: 2rem center;
+}
+.collapse-panel[open] .collapse-header:not(.without-arrow) {
+ padding: 1.2rem 2rem 1.2rem 4.4rem;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAI9JREFUeNpiZACCyMjIBCDVD8SOy5cvv8BAAgDqNQBS+4G4EKh3ASPUsPlQ+Q+kGIpkmABUKJEJ6jIYAEnshyok1TAQ6AcZ6Ah1GdGG4jAM7DtGQgrQvU9ILSOxColVw0is7VA2QV8wkhA+DMQECSMJgc5AyDCcBhIwFG9aZSQxrRFM+IwkJGAGYnIRQIABACQuXCKovu2mAAAAAElFTkSuQmCC);
+ background-size: 1rem;
+ background-repeat: no-repeat;
+ background-position: 2rem center;
+}
+
+/* Collapse header focus effect (::after) */
+
+.collapse-header::after {
+ content: "";
+ position: absolute;
+ display: block;
+ top: 0.2rem;
+ left: 0.2rem;
+ width: calc(100% - (2 * 0.2rem));
+ height: calc(100% - (2 * 0.2rem));
+ border-radius: 0.4rem;
+}
+.collapse-header:focus::after {
+ -moz-box-shadow: inset 0 0 0 0.2rem #45a3fb;
+ -webkit-box-shadow: inset 0 0 0 0.2rem #45a3fb;
+ box-shadow: inset 0 0 0 0.2rem #45a3fb;
+}
+.dark-mode .collapse-header:focus::after {
+ -moz-box-shadow: inset 0 0 0 0.2rem #0d518f;
+ -webkit-box-shadow: inset 0 0 0 0.2rem #0d518f;
+ box-shadow: inset 0 0 0 0.2rem #0d518f;
+}
+
+/* Controlling display based on collapse open state */
+
+.collapse-panel[open] .hidden-collapse-open {
+ display: none;
+}
+.collapse-panel:not([open]) .hidden-collapse-closed {
+ display: none;
+}
+
+/* Collapse content */
+
+.collapse-content {
+ padding: 2rem;
+ font-size: 1.4rem;
+ color: rgba(0, 0, 0, 0.85);
+ background-color: transparent;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ border-top: none;
+ border-bottom-left-radius: 0.4rem;
+ border-bottom-right-radius: 0.4rem;
+}
+.dark-mode .collapse-content {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: transparent;
+ border-color: #47494d;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+/* Collapse group */
+
+.collapse-group .collapse-panel:not(:first-child) {
+ margin-top: calc((-1) * 1px);
+}
+.collapse-group .collapse-panel:not(:first-child) .collapse-header {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+}
+.collapse-group .collapse-panel:not([open]):not(:last-child) .collapse-header {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+}
+.collapse-group .collapse-panel[open]:not(:first-child) .collapse-content {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+}
+.collapse-group .collapse-panel[open]:not(:last-child) .collapse-content {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ border-bottom: 0;
+}
+
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+ /*
+ On IE, collapse panels are styled to be always open. This is because they
+ are not supporter by the browser.
+ */
+
+ /* Collapse header */
+
+ .collapse-panel .collapse-header {
+ cursor: auto;
+ color: rgba(0, 0, 0, 0.85);
+ background-color: #f7f7f7;
+ border-color: rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ }
+ .dark-mode .collapse-panel .collapse-header {
+ color: rgba(255, 255, 255, 0.8);
+ background-color: rgba(255, 255, 255, 0.02);
+ border-color: #47494d;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ }
+ .collapse-panel .collapse-header {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+
+ /* Collapse header arrow set using background image */
+
+ .collapse-panel .collapse-header:not(.without-arrow) {
+ padding: 1.2rem 2rem 1.2rem 4.4rem;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAI9JREFUeNpiZACCyMjIBCDVD8SOy5cvv8BAAgDqNQBS+4G4EKh3ASPUsPlQ+Q+kGIpkmABUKJEJ6jIYAEnshyok1TAQ6AcZ6Ah1GdGG4jAM7DtGQgrQvU9ILSOxColVw0is7VA2QV8wkhA+DMQECSMJgc5AyDCcBhIwFG9aZSQxrRFM+IwkJGAGYnIRQIABACQuXCKovu2mAAAAAElFTkSuQmCC);
+ background-size: 1rem;
+ background-repeat: no-repeat;
+ background-position: 2rem center;
+ }
+
+ /* Controlling display based on collapse open state */
+
+ .collapse-panel .hidden-collapse-open {
+ display: none;
+ }
+ .collapse-panel:not([open]) .hidden-collapse-closed {
+ display: inline-block;
+ }
+
+ /* Collapse group */
+
+ .collapse-group .collapse-panel:not(:first-child) .collapse-content {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+ .collapse-group .collapse-panel:not(:last-child) .collapse-content {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ border-bottom: 0;
+ }
+}
+
+
+/*
+-------------------------------------------------------------------------------
+24. Progress [hm-24]
+-------------------------------------------------------------------------------
+*/
+
+.progress {
+ display: -ms-flexbox;
+ display: flex;
+ overflow: hidden;
+ height: 0.8rem;
+ font-size: 1.2rem;
+ line-height: 0;
+ border-radius: 3.2rem;
+ background-color: rgba(0, 0, 0, 0.1);
+}
+.dark-mode .progress {
+ background-color: rgba(255, 255, 255, 0.1);
+}
+
+/* Progress bar */
+
+.progress-bar {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -ms-flex-pack: center;
+ justify-content: center;
+ overflow: hidden;
+ text-align: center;
+ white-space: nowrap;
+ color: #ffffff;
+ background-color: #1890ff;
+ border-radius: inherit;
+}
+.dark-mode .progress-bar {
+ color: #ffffff;
+ background-color: #1890ff;
+ -webkit-font-smoothing: auto;
+ -moz-osx-font-smoothing: auto;
+}
+.progress-bar:not(:only-child) {
+ border-radius: 0;
+}
+.progress-bar:not(:only-child):last-child {
+ border-top-right-radius: inherit;
+ border-bottom-right-radius: inherit;
+}
+
+/* Progress group */
+
+.progress-group {
+ position: relative;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -ms-flex-align: center;
+ align-items: center;
+ width: 100%;
+}
+.progress-group > .progress {
+ position: relative;
+ -ms-flex: 1 1 0%;
+ flex: 1 1 0%;
+ min-width: 0;
+ margin-bottom: 0;
+}
+.progress-group-label {
+ font-size: 1.4rem;
+}
+.progress-group > .progress {
+ margin-left: 0.4rem;
+ margin-right: 0.4rem;
+}
+.progress-group > .progress-group-label {
+ margin-left: 0.4rem;
+ margin-right: 0.4rem;
+}
+.progress-group > .progress:first-child,
+.progress-group > .progress-group-label:first-child {
+ margin-left: 0;
+}
+.progress-group > .progress:last-child,
+.progress-group > .progress-group-label:last-child {
+ margin-right: 0;
+}
+
+/* Progress bar animated */
+
+.progress-bar-animated {
+ position: relative;
+}
+.progress-bar-animated::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ border-radius: inherit;
+ background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3));
+ transform: translateX(-100%);
+ animation: progress-bar-shine 2s infinite;
+}
+.dark-mode .progress-bar-animated::before {
+ background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3));
+}
+.progress-bar-animated.highlight-dark::before {
+ background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.1));
+}
+.dark-mode .progress-bar-animated.highlight-dark::before {
+ background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.2));
+}
+@keyframes progress-bar-shine {
+ to {
+ transform: translateX(0);
+ opacity: 0.1;
+ }
+}
+
+
+/*
+-------------------------------------------------------------------------------
+25. Spacing utilities [hm-25]
+
+Notes:
+ ~ Unlike other frameworks, Halfmoon keeps the default margins and spacing
+ for most elements. Instead, we encourage people to use the following
+ utility classes for spacing.
+-------------------------------------------------------------------------------
+*/
+
+/* Padding */
+
+.p-0 {
+ padding: 0 !important;
+}
+.p-5 {
+ padding: 0.5rem !important;
+}
+.p-10 {
+ padding: 1rem !important;
+}
+.p-15 {
+ padding: 1.5rem !important;
+}
+.p-20 {
+ padding: 2rem !important;
+}
+.px-0 {
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+}
+.px-5 {
+ padding-left: 0.5rem !important;
+ padding-right: 0.5rem !important;
+}
+.px-10 {
+ padding-left: 1rem !important;
+ padding-right: 1rem !important;
+}
+.px-15 {
+ padding-left: 1.5rem !important;
+ padding-right: 1.5rem !important;
+}
+.px-20 {
+ padding-left: 2rem !important;
+ padding-right: 2rem !important;
+}
+.py-0 {
+ padding-top: 0 !important;
+ padding-bottom: 0 !important;
+}
+.py-5 {
+ padding-top: 0.5rem !important;
+ padding-bottom: 0.5rem !important;
+}
+.py-10 {
+ padding-top: 1rem !important;
+ padding-bottom: 1rem !important;
+}
+.py-15 {
+ padding-top: 1.5rem !important;
+ padding-bottom: 1.5rem !important;
+}
+.py-20 {
+ padding-top: 2rem !important;
+ padding-bottom: 2rem !important;
+}
+.pt-0 {
+ padding-top: 0 !important;
+}
+.pt-5 {
+ padding-top: 0.5rem !important;
+}
+.pt-10 {
+ padding-top: 1rem !important;
+}
+.pt-15 {
+ padding-top: 1.5rem !important;
+}
+.pt-20 {
+ padding-top: 2rem !important;
+}
+.pb-0 {
+ padding-bottom: 0 !important;
+}
+.pb-5 {
+ padding-bottom: 0.5rem !important;
+}
+.pb-10 {
+ padding-bottom: 1rem !important;
+}
+.pb-15 {
+ padding-bottom: 1.5rem !important;
+}
+.pb-20 {
+ padding-bottom: 2rem !important;
+}
+.pl-0 {
+ padding-left: 0 !important;
+}
+.pl-5 {
+ padding-left: 0.5rem !important;
+}
+.pl-10 {
+ padding-left: 1rem !important;
+}
+.pl-15 {
+ padding-left: 1.5rem !important;
+}
+.pl-20 {
+ padding-left: 2rem !important;
+}
+.pr-0 {
+ padding-right: 0 !important;
+}
+.pr-5 {
+ padding-right: 0.5rem !important;
+}
+.pr-10 {
+ padding-right: 1rem !important;
+}
+.pr-15 {
+ padding-right: 1.5rem !important;
+}
+.pr-20 {
+ padding-right: 2rem !important;
+}
+
+/* Margin */
+
+.m-0 {
+ margin: 0 !important;
+}
+.m-5 {
+ margin: 0.5rem !important;
+}
+.m-10 {
+ margin: 1rem !important;
+}
+.m-15 {
+ margin: 1.5rem !important;
+}
+.m-20 {
+ margin: 2rem !important;
+}
+.m-auto {
+ margin: auto !important;
+}
+.mx-0 {
+ margin-left: 0 !important;
+ margin-right: 0 !important;
+}
+.mx-5 {
+ margin-left: 0.5rem !important;
+ margin-right: 0.5rem !important;
+}
+.mx-10 {
+ margin-left: 1rem !important;
+ margin-right: 1rem !important;
+}
+.mx-15 {
+ margin-left: 1.5rem !important;
+ margin-right: 1.5rem !important;
+}
+.mx-20 {
+ margin-left: 2rem !important;
+ margin-right: 2rem !important;
+}
+.mx-auto {
+ margin-left: auto !important;
+ margin-right: auto !important;
+}
+.my-0 {
+ margin-top: 0 !important;
+ margin-bottom: 0 !important;
+}
+.my-5 {
+ margin-top: 0.5rem !important;
+ margin-bottom: 0.5rem !important;
+}
+.my-10 {
+ margin-top: 1rem !important;
+ margin-bottom: 1rem !important;
+}
+.my-15 {
+ margin-top: 1.5rem !important;
+ margin-bottom: 1.5rem !important;
+}
+.my-20 {
+ margin-top: 2rem !important;
+ margin-bottom: 2rem !important;
+}
+.my-auto {
+ margin-top: auto !important;
+ margin-bottom: auto !important;
+}
+.mt-0 {
+ margin-top: 0 !important;
+}
+.mt-5 {
+ margin-top: 0.5rem !important;
+}
+.mt-10 {
+ margin-top: 1rem !important;
+}
+.mt-15 {
+ margin-top: 1.5rem !important;
+}
+.mt-20 {
+ margin-top: 2rem !important;
+}
+.mt-auto {
+ margin-top: auto !important;
+}
+.mb-0 {
+ margin-bottom: 0 !important;
+}
+.mb-5 {
+ margin-bottom: 0.5rem !important;
+}
+.mb-10 {
+ margin-bottom: 1rem !important;
+}
+.mb-15 {
+ margin-bottom: 1.5rem !important;
+}
+.mb-20 {
+ margin-bottom: 2rem !important;
+}
+.mb-auto {
+ margin-bottom: auto !important;
+}
+.ml-0 {
+ margin-left: 0 !important;
+}
+.ml-5 {
+ margin-left: 0.5rem !important;
+}
+.ml-10 {
+ margin-left: 1rem !important;
+}
+.ml-15 {
+ margin-left: 1.5rem !important;
+}
+.ml-20 {
+ margin-left: 2rem !important;
+}
+.ml-auto {
+ margin-left: auto !important;
+}
+.mr-0 {
+ margin-right: 0 !important;
+}
+.mr-5 {
+ margin-right: 0.5rem !important;
+}
+.mr-10 {
+ margin-right: 1rem !important;
+}
+.mr-15 {
+ margin-right: 1.5rem !important;
+}
+.mr-20 {
+ margin-right: 2rem !important;
+}
+.mr-auto {
+ margin-right: auto !important;
+}
+@media (min-width: 577px) {
+ /* Padding */
+
+ .p-sm-0 {
+ padding: 0 !important;
+ }
+ .p-sm-5 {
+ padding: 0.5rem !important;
+ }
+ .p-sm-10 {
+ padding: 1rem !important;
+ }
+ .p-sm-15 {
+ padding: 1.5rem !important;
+ }
+ .p-sm-20 {
+ padding: 2rem !important;
+ }
+ .px-sm-0 {
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+ }
+ .px-sm-5 {
+ padding-left: 0.5rem !important;
+ padding-right: 0.5rem !important;
+ }
+ .px-sm-10 {
+ padding-left: 1rem !important;
+ padding-right: 1rem !important;
+ }
+ .px-sm-15 {
+ padding-left: 1.5rem !important;
+ padding-right: 1.5rem !important;
+ }
+ .px-sm-20 {
+ padding-left: 2rem !important;
+ padding-right: 2rem !important;
+ }
+ .py-sm-0 {
+ padding-top: 0 !important;
+ padding-bottom: 0 !important;
+ }
+ .py-sm-5 {
+ padding-top: 0.5rem !important;
+ padding-bottom: 0.5rem !important;
+ }
+ .py-sm-10 {
+ padding-top: 1rem !important;
+ padding-bottom: 1rem !important;
+ }
+ .py-sm-15 {
+ padding-top: 1.5rem !important;
+ padding-bottom: 1.5rem !important;
+ }
+ .py-sm-20 {
+ padding-top: 2rem !important;
+ padding-bottom: 2rem !important;
+ }
+ .pt-sm-0 {
+ padding-top: 0 !important;
+ }
+ .pt-sm-5 {
+ padding-top: 0.5rem !important;
+ }
+ .pt-sm-10 {
+ padding-top: 1rem !important;
+ }
+ .pt-sm-15 {
+ padding-top: 1.5rem !important;
+ }
+ .pt-sm-20 {
+ padding-top: 2rem !important;
+ }
+ .pb-sm-0 {
+ padding-bottom: 0 !important;
+ }
+ .pb-sm-5 {
+ padding-bottom: 0.5rem !important;
+ }
+ .pb-sm-10 {
+ padding-bottom: 1rem !important;
+ }
+ .pb-sm-15 {
+ padding-bottom: 1.5rem !important;
+ }
+ .pb-sm-20 {
+ padding-bottom: 2rem !important;
+ }
+ .pl-sm-0 {
+ padding-left: 0 !important;
+ }
+ .pl-sm-5 {
+ padding-left: 0.5rem !important;
+ }
+ .pl-sm-10 {
+ padding-left: 1rem !important;
+ }
+ .pl-sm-15 {
+ padding-left: 1.5rem !important;
+ }
+ .pl-sm-20 {
+ padding-left: 2rem !important;
+ }
+ .pr-sm-0 {
+ padding-right: 0 !important;
+ }
+ .pr-sm-5 {
+ padding-right: 0.5rem !important;
+ }
+ .pr-sm-10 {
+ padding-right: 1rem !important;
+ }
+ .pr-sm-15 {
+ padding-right: 1.5rem !important;
+ }
+ .pr-sm-20 {
+ padding-right: 2rem !important;
+ }
+
+ /* Margin */
+
+ .m-sm-0 {
+ margin: 0 !important;
+ }
+ .m-sm-5 {
+ margin: 0.5rem !important;
+ }
+ .m-sm-10 {
+ margin: 1rem !important;
+ }
+ .m-sm-15 {
+ margin: 1.5rem !important;
+ }
+ .m-sm-20 {
+ margin: 2rem !important;
+ }
+ .m-sm-auto {
+ margin: auto !important;
+ }
+ .mx-sm-0 {
+ margin-left: 0 !important;
+ margin-right: 0 !important;
+ }
+ .mx-sm-5 {
+ margin-left: 0.5rem !important;
+ margin-right: 0.5rem !important;
+ }
+ .mx-sm-10 {
+ margin-left: 1rem !important;
+ margin-right: 1rem !important;
+ }
+ .mx-sm-15 {
+ margin-left: 1.5rem !important;
+ margin-right: 1.5rem !important;
+ }
+ .mx-sm-20 {
+ margin-left: 2rem !important;
+ margin-right: 2rem !important;
+ }
+ .mx-sm-auto {
+ margin-left: auto !important;
+ margin-right: auto !important;
+ }
+ .my-sm-0 {
+ margin-top: 0 !important;
+ margin-bottom: 0 !important;
+ }
+ .my-sm-5 {
+ margin-top: 0.5rem !important;
+ margin-bottom: 0.5rem !important;
+ }
+ .my-sm-10 {
+ margin-top: 1rem !important;
+ margin-bottom: 1rem !important;
+ }
+ .my-sm-15 {
+ margin-top: 1.5rem !important;
+ margin-bottom: 1.5rem !important;
+ }
+ .my-sm-20 {
+ margin-top: 2rem !important;
+ margin-bottom: 2rem !important;
+ }
+ .my-sm-auto {
+ margin-top: auto !important;
+ margin-bottom: auto !important;
+ }
+ .mt-sm-0 {
+ margin-top: 0 !important;
+ }
+ .mt-sm-5 {
+ margin-top: 0.5rem !important;
+ }
+ .mt-sm-10 {
+ margin-top: 1rem !important;
+ }
+ .mt-sm-15 {
+ margin-top: 1.5rem !important;
+ }
+ .mt-sm-20 {
+ margin-top: 2rem !important;
+ }
+ .mt-sm-auto {
+ margin-top: auto !important;
+ }
+ .mb-sm-0 {
+ margin-bottom: 0 !important;
+ }
+ .mb-sm-5 {
+ margin-bottom: 0.5rem !important;
+ }
+ .mb-sm-10 {
+ margin-bottom: 1rem !important;
+ }
+ .mb-sm-15 {
+ margin-bottom: 1.5rem !important;
+ }
+ .mb-sm-20 {
+ margin-bottom: 2rem !important;
+ }
+ .mb-sm-auto {
+ margin-bottom: auto !important;
+ }
+ .ml-sm-0 {
+ margin-left: 0 !important;
+ }
+ .ml-sm-5 {
+ margin-left: 0.5rem !important;
+ }
+ .ml-sm-10 {
+ margin-left: 1rem !important;
+ }
+ .ml-sm-15 {
+ margin-left: 1.5rem !important;
+ }
+ .ml-sm-20 {
+ margin-left: 2rem !important;
+ }
+ .ml-sm-auto {
+ margin-left: auto !important;
+ }
+ .mr-sm-0 {
+ margin-right: 0 !important;
+ }
+ .mr-sm-5 {
+ margin-right: 0.5rem !important;
+ }
+ .mr-sm-10 {
+ margin-right: 1rem !important;
+ }
+ .mr-sm-15 {
+ margin-right: 1.5rem !important;
+ }
+ .mr-sm-20 {
+ margin-right: 2rem !important;
+ }
+ .mr-sm-auto {
+ margin-right: auto !important;
+ }
+}
+@media (min-width: 769px) {
+ /* Padding */
+
+ .p-md-0 {
+ padding: 0 !important;
+ }
+ .p-md-5 {
+ padding: 0.5rem !important;
+ }
+ .p-md-10 {
+ padding: 1rem !important;
+ }
+ .p-md-15 {
+ padding: 1.5rem !important;
+ }
+ .p-md-20 {
+ padding: 2rem !important;
+ }
+ .px-md-0 {
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+ }
+ .px-md-5 {
+ padding-left: 0.5rem !important;
+ padding-right: 0.5rem !important;
+ }
+ .px-md-10 {
+ padding-left: 1rem !important;
+ padding-right: 1rem !important;
+ }
+ .px-md-15 {
+ padding-left: 1.5rem !important;
+ padding-right: 1.5rem !important;
+ }
+ .px-md-20 {
+ padding-left: 2rem !important;
+ padding-right: 2rem !important;
+ }
+ .py-md-0 {
+ padding-top: 0 !important;
+ padding-bottom: 0 !important;
+ }
+ .py-md-5 {
+ padding-top: 0.5rem !important;
+ padding-bottom: 0.5rem !important;
+ }
+ .py-md-10 {
+ padding-top: 1rem !important;
+ padding-bottom: 1rem !important;
+ }
+ .py-md-15 {
+ padding-top: 1.5rem !important;
+ padding-bottom: 1.5rem !important;
+ }
+ .py-md-20 {
+ padding-top: 2rem !important;
+ padding-bottom: 2rem !important;
+ }
+ .pt-md-0 {
+ padding-top: 0 !important;
+ }
+ .pt-md-5 {
+ padding-top: 0.5rem !important;
+ }
+ .pt-md-10 {
+ padding-top: 1rem !important;
+ }
+ .pt-md-15 {
+ padding-top: 1.5rem !important;
+ }
+ .pt-md-20 {
+ padding-top: 2rem !important;
+ }
+ .pb-md-0 {
+ padding-bottom: 0 !important;
+ }
+ .pb-md-5 {
+ padding-bottom: 0.5rem !important;
+ }
+ .pb-md-10 {
+ padding-bottom: 1rem !important;
+ }
+ .pb-md-15 {
+ padding-bottom: 1.5rem !important;
+ }
+ .pb-md-20 {
+ padding-bottom: 2rem !important;
+ }
+ .pl-md-0 {
+ padding-left: 0 !important;
+ }
+ .pl-md-5 {
+ padding-left: 0.5rem !important;
+ }
+ .pl-md-10 {
+ padding-left: 1rem !important;
+ }
+ .pl-md-15 {
+ padding-left: 1.5rem !important;
+ }
+ .pl-md-20 {
+ padding-left: 2rem !important;
+ }
+ .pr-md-0 {
+ padding-right: 0 !important;
+ }
+ .pr-md-5 {
+ padding-right: 0.5rem !important;
+ }
+ .pr-md-10 {
+ padding-right: 1rem !important;
+ }
+ .pr-md-15 {
+ padding-right: 1.5rem !important;
+ }
+ .pr-md-20 {
+ padding-right: 2rem !important;
+ }
+
+ /* Margin */
+
+ .m-md-0 {
+ margin: 0 !important;
+ }
+ .m-md-5 {
+ margin: 0.5rem !important;
+ }
+ .m-md-10 {
+ margin: 1rem !important;
+ }
+ .m-md-15 {
+ margin: 1.5rem !important;
+ }
+ .m-md-20 {
+ margin: 2rem !important;
+ }
+ .m-md-auto {
+ margin: auto !important;
+ }
+ .mx-md-0 {
+ margin-left: 0 !important;
+ margin-right: 0 !important;
+ }
+ .mx-md-5 {
+ margin-left: 0.5rem !important;
+ margin-right: 0.5rem !important;
+ }
+ .mx-md-10 {
+ margin-left: 1rem !important;
+ margin-right: 1rem !important;
+ }
+ .mx-md-15 {
+ margin-left: 1.5rem !important;
+ margin-right: 1.5rem !important;
+ }
+ .mx-md-20 {
+ margin-left: 2rem !important;
+ margin-right: 2rem !important;
+ }
+ .mx-md-auto {
+ margin-left: auto !important;
+ margin-right: auto !important;
+ }
+ .my-md-0 {
+ margin-top: 0 !important;
+ margin-bottom: 0 !important;
+ }
+ .my-md-5 {
+ margin-top: 0.5rem !important;
+ margin-bottom: 0.5rem !important;
+ }
+ .my-md-10 {
+ margin-top: 1rem !important;
+ margin-bottom: 1rem !important;
+ }
+ .my-md-15 {
+ margin-top: 1.5rem !important;
+ margin-bottom: 1.5rem !important;
+ }
+ .my-md-20 {
+ margin-top: 2rem !important;
+ margin-bottom: 2rem !important;
+ }
+ .my-md-auto {
+ margin-top: auto !important;
+ margin-bottom: auto !important;
+ }
+ .mt-md-0 {
+ margin-top: 0 !important;
+ }
+ .mt-md-5 {
+ margin-top: 0.5rem !important;
+ }
+ .mt-md-10 {
+ margin-top: 1rem !important;
+ }
+ .mt-md-15 {
+ margin-top: 1.5rem !important;
+ }
+ .mt-md-20 {
+ margin-top: 2rem !important;
+ }
+ .mt-md-auto {
+ margin-top: auto !important;
+ }
+ .mb-md-0 {
+ margin-bottom: 0 !important;
+ }
+ .mb-md-5 {
+ margin-bottom: 0.5rem !important;
+ }
+ .mb-md-10 {
+ margin-bottom: 1rem !important;
+ }
+ .mb-md-15 {
+ margin-bottom: 1.5rem !important;
+ }
+ .mb-md-20 {
+ margin-bottom: 2rem !important;
+ }
+ .mb-md-auto {
+ margin-bottom: auto !important;
+ }
+ .ml-md-0 {
+ margin-left: 0 !important;
+ }
+ .ml-md-5 {
+ margin-left: 0.5rem !important;
+ }
+ .ml-md-10 {
+ margin-left: 1rem !important;
+ }
+ .ml-md-15 {
+ margin-left: 1.5rem !important;
+ }
+ .ml-md-20 {
+ margin-left: 2rem !important;
+ }
+ .ml-md-auto {
+ margin-left: auto !important;
+ }
+ .mr-md-0 {
+ margin-right: 0 !important;
+ }
+ .mr-md-5 {
+ margin-right: 0.5rem !important;
+ }
+ .mr-md-10 {
+ margin-right: 1rem !important;
+ }
+ .mr-md-15 {
+ margin-right: 1.5rem !important;
+ }
+ .mr-md-20 {
+ margin-right: 2rem !important;
+ }
+ .mr-md-auto {
+ margin-right: auto !important;
+ }
+}
+@media (min-width: 993px) {
+ /* Padding */
+
+ .p-lg-0 {
+ padding: 0 !important;
+ }
+ .p-lg-5 {
+ padding: 0.5rem !important;
+ }
+ .p-lg-10 {
+ padding: 1rem !important;
+ }
+ .p-lg-15 {
+ padding: 1.5rem !important;
+ }
+ .p-lg-20 {
+ padding: 2rem !important;
+ }
+ .px-lg-0 {
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+ }
+ .px-lg-5 {
+ padding-left: 0.5rem !important;
+ padding-right: 0.5rem !important;
+ }
+ .px-lg-10 {
+ padding-left: 1rem !important;
+ padding-right: 1rem !important;
+ }
+ .px-lg-15 {
+ padding-left: 1.5rem !important;
+ padding-right: 1.5rem !important;
+ }
+ .px-lg-20 {
+ padding-left: 2rem !important;
+ padding-right: 2rem !important;
+ }
+ .py-lg-0 {
+ padding-top: 0 !important;
+ padding-bottom: 0 !important;
+ }
+ .py-lg-5 {
+ padding-top: 0.5rem !important;
+ padding-bottom: 0.5rem !important;
+ }
+ .py-lg-10 {
+ padding-top: 1rem !important;
+ padding-bottom: 1rem !important;
+ }
+ .py-lg-15 {
+ padding-top: 1.5rem !important;
+ padding-bottom: 1.5rem !important;
+ }
+ .py-lg-20 {
+ padding-top: 2rem !important;
+ padding-bottom: 2rem !important;
+ }
+ .pt-lg-0 {
+ padding-top: 0 !important;
+ }
+ .pt-lg-5 {
+ padding-top: 0.5rem !important;
+ }
+ .pt-lg-10 {
+ padding-top: 1rem !important;
+ }
+ .pt-lg-15 {
+ padding-top: 1.5rem !important;
+ }
+ .pt-lg-20 {
+ padding-top: 2rem !important;
+ }
+ .pb-lg-0 {
+ padding-bottom: 0 !important;
+ }
+ .pb-lg-5 {
+ padding-bottom: 0.5rem !important;
+ }
+ .pb-lg-10 {
+ padding-bottom: 1rem !important;
+ }
+ .pb-lg-15 {
+ padding-bottom: 1.5rem !important;
+ }
+ .pb-lg-20 {
+ padding-bottom: 2rem !important;
+ }
+ .pl-lg-0 {
+ padding-left: 0 !important;
+ }
+ .pl-lg-5 {
+ padding-left: 0.5rem !important;
+ }
+ .pl-lg-10 {
+ padding-left: 1rem !important;
+ }
+ .pl-lg-15 {
+ padding-left: 1.5rem !important;
+ }
+ .pl-lg-20 {
+ padding-left: 2rem !important;
+ }
+ .pr-lg-0 {
+ padding-right: 0 !important;
+ }
+ .pr-lg-5 {
+ padding-right: 0.5rem !important;
+ }
+ .pr-lg-10 {
+ padding-right: 1rem !important;
+ }
+ .pr-lg-15 {
+ padding-right: 1.5rem !important;
+ }
+ .pr-lg-20 {
+ padding-right: 2rem !important;
+ }
+
+ /* Margin */
+
+ .m-lg-0 {
+ margin: 0 !important;
+ }
+ .m-lg-5 {
+ margin: 0.5rem !important;
+ }
+ .m-lg-10 {
+ margin: 1rem !important;
+ }
+ .m-lg-15 {
+ margin: 1.5rem !important;
+ }
+ .m-lg-20 {
+ margin: 2rem !important;
+ }
+ .m-lg-auto {
+ margin: auto !important;
+ }
+ .mx-lg-0 {
+ margin-left: 0 !important;
+ margin-right: 0 !important;
+ }
+ .mx-lg-5 {
+ margin-left: 0.5rem !important;
+ margin-right: 0.5rem !important;
+ }
+ .mx-lg-10 {
+ margin-left: 1rem !important;
+ margin-right: 1rem !important;
+ }
+ .mx-lg-15 {
+ margin-left: 1.5rem !important;
+ margin-right: 1.5rem !important;
+ }
+ .mx-lg-20 {
+ margin-left: 2rem !important;
+ margin-right: 2rem !important;
+ }
+ .mx-lg-auto {
+ margin-left: auto !important;
+ margin-right: auto !important;
+ }
+ .my-lg-0 {
+ margin-top: 0 !important;
+ margin-bottom: 0 !important;
+ }
+ .my-lg-5 {
+ margin-top: 0.5rem !important;
+ margin-bottom: 0.5rem !important;
+ }
+ .my-lg-10 {
+ margin-top: 1rem !important;
+ margin-bottom: 1rem !important;
+ }
+ .my-lg-15 {
+ margin-top: 1.5rem !important;
+ margin-bottom: 1.5rem !important;
+ }
+ .my-lg-20 {
+ margin-top: 2rem !important;
+ margin-bottom: 2rem !important;
+ }
+ .my-lg-auto {
+ margin-top: auto !important;
+ margin-bottom: auto !important;
+ }
+ .mt-lg-0 {
+ margin-top: 0 !important;
+ }
+ .mt-lg-5 {
+ margin-top: 0.5rem !important;
+ }
+ .mt-lg-10 {
+ margin-top: 1rem !important;
+ }
+ .mt-lg-15 {
+ margin-top: 1.5rem !important;
+ }
+ .mt-lg-20 {
+ margin-top: 2rem !important;
+ }
+ .mt-lg-auto {
+ margin-top: auto !important;
+ }
+ .mb-lg-0 {
+ margin-bottom: 0 !important;
+ }
+ .mb-lg-5 {
+ margin-bottom: 0.5rem !important;
+ }
+ .mb-lg-10 {
+ margin-bottom: 1rem !important;
+ }
+ .mb-lg-15 {
+ margin-bottom: 1.5rem !important;
+ }
+ .mb-lg-20 {
+ margin-bottom: 2rem !important;
+ }
+ .mb-lg-auto {
+ margin-bottom: auto !important;
+ }
+ .ml-lg-0 {
+ margin-left: 0 !important;
+ }
+ .ml-lg-5 {
+ margin-left: 0.5rem !important;
+ }
+ .ml-lg-10 {
+ margin-left: 1rem !important;
+ }
+ .ml-lg-15 {
+ margin-left: 1.5rem !important;
+ }
+ .ml-lg-20 {
+ margin-left: 2rem !important;
+ }
+ .ml-lg-auto {
+ margin-left: auto !important;
+ }
+ .mr-lg-0 {
+ margin-right: 0 !important;
+ }
+ .mr-lg-5 {
+ margin-right: 0.5rem !important;
+ }
+ .mr-lg-10 {
+ margin-right: 1rem !important;
+ }
+ .mr-lg-15 {
+ margin-right: 1.5rem !important;
+ }
+ .mr-lg-20 {
+ margin-right: 2rem !important;
+ }
+ .mr-lg-auto {
+ margin-right: auto !important;
+ }
+}
+@media (min-width: 1201px) {
+ /* Padding */
+
+ .p-xl-0 {
+ padding: 0 !important;
+ }
+ .p-xl-5 {
+ padding: 0.5rem !important;
+ }
+ .p-xl-10 {
+ padding: 1rem !important;
+ }
+ .p-xl-15 {
+ padding: 1.5rem !important;
+ }
+ .p-xl-20 {
+ padding: 2rem !important;
+ }
+ .px-xl-0 {
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+ }
+ .px-xl-5 {
+ padding-left: 0.5rem !important;
+ padding-right: 0.5rem !important;
+ }
+ .px-xl-10 {
+ padding-left: 1rem !important;
+ padding-right: 1rem !important;
+ }
+ .px-xl-15 {
+ padding-left: 1.5rem !important;
+ padding-right: 1.5rem !important;
+ }
+ .px-xl-20 {
+ padding-left: 2rem !important;
+ padding-right: 2rem !important;
+ }
+ .py-xl-0 {
+ padding-top: 0 !important;
+ padding-bottom: 0 !important;
+ }
+ .py-xl-5 {
+ padding-top: 0.5rem !important;
+ padding-bottom: 0.5rem !important;
+ }
+ .py-xl-10 {
+ padding-top: 1rem !important;
+ padding-bottom: 1rem !important;
+ }
+ .py-xl-15 {
+ padding-top: 1.5rem !important;
+ padding-bottom: 1.5rem !important;
+ }
+ .py-xl-20 {
+ padding-top: 2rem !important;
+ padding-bottom: 2rem !important;
+ }
+ .pt-xl-0 {
+ padding-top: 0 !important;
+ }
+ .pt-xl-5 {
+ padding-top: 0.5rem !important;
+ }
+ .pt-xl-10 {
+ padding-top: 1rem !important;
+ }
+ .pt-xl-15 {
+ padding-top: 1.5rem !important;
+ }
+ .pt-xl-20 {
+ padding-top: 2rem !important;
+ }
+ .pb-xl-0 {
+ padding-bottom: 0 !important;
+ }
+ .pb-xl-5 {
+ padding-bottom: 0.5rem !important;
+ }
+ .pb-xl-10 {
+ padding-bottom: 1rem !important;
+ }
+ .pb-xl-15 {
+ padding-bottom: 1.5rem !important;
+ }
+ .pb-xl-20 {
+ padding-bottom: 2rem !important;
+ }
+ .pl-xl-0 {
+ padding-left: 0 !important;
+ }
+ .pl-xl-5 {
+ padding-left: 0.5rem !important;
+ }
+ .pl-xl-10 {
+ padding-left: 1rem !important;
+ }
+ .pl-xl-15 {
+ padding-left: 1.5rem !important;
+ }
+ .pl-xl-20 {
+ padding-left: 2rem !important;
+ }
+ .pr-xl-0 {
+ padding-right: 0 !important;
+ }
+ .pr-xl-5 {
+ padding-right: 0.5rem !important;
+ }
+ .pr-xl-10 {
+ padding-right: 1rem !important;
+ }
+ .pr-xl-15 {
+ padding-right: 1.5rem !important;
+ }
+ .pr-xl-20 {
+ padding-right: 2rem !important;
+ }
+
+ /* Margin */
+
+ .m-xl-0 {
+ margin: 0 !important;
+ }
+ .m-xl-5 {
+ margin: 0.5rem !important;
+ }
+ .m-xl-10 {
+ margin: 1rem !important;
+ }
+ .m-xl-15 {
+ margin: 1.5rem !important;
+ }
+ .m-xl-20 {
+ margin: 2rem !important;
+ }
+ .m-xl-auto {
+ margin: auto !important;
+ }
+ .mx-xl-0 {
+ margin-left: 0 !important;
+ margin-right: 0 !important;
+ }
+ .mx-xl-5 {
+ margin-left: 0.5rem !important;
+ margin-right: 0.5rem !important;
+ }
+ .mx-xl-10 {
+ margin-left: 1rem !important;
+ margin-right: 1rem !important;
+ }
+ .mx-xl-15 {
+ margin-left: 1.5rem !important;
+ margin-right: 1.5rem !important;
+ }
+ .mx-xl-20 {
+ margin-left: 2rem !important;
+ margin-right: 2rem !important;
+ }
+ .mx-xl-auto {
+ margin-left: auto !important;
+ margin-right: auto !important;
+ }
+ .my-xl-0 {
+ margin-top: 0 !important;
+ margin-bottom: 0 !important;
+ }
+ .my-xl-5 {
+ margin-top: 0.5rem !important;
+ margin-bottom: 0.5rem !important;
+ }
+ .my-xl-10 {
+ margin-top: 1rem !important;
+ margin-bottom: 1rem !important;
+ }
+ .my-xl-15 {
+ margin-top: 1.5rem !important;
+ margin-bottom: 1.5rem !important;
+ }
+ .my-xl-20 {
+ margin-top: 2rem !important;
+ margin-bottom: 2rem !important;
+ }
+ .my-xl-auto {
+ margin-top: auto !important;
+ margin-bottom: auto !important;
+ }
+ .mt-xl-0 {
+ margin-top: 0 !important;
+ }
+ .mt-xl-5 {
+ margin-top: 0.5rem !important;
+ }
+ .mt-xl-10 {
+ margin-top: 1rem !important;
+ }
+ .mt-xl-15 {
+ margin-top: 1.5rem !important;
+ }
+ .mt-xl-20 {
+ margin-top: 2rem !important;
+ }
+ .mt-xl-auto {
+ margin-top: auto !important;
+ }
+ .mb-xl-0 {
+ margin-bottom: 0 !important;
+ }
+ .mb-xl-5 {
+ margin-bottom: 0.5rem !important;
+ }
+ .mb-xl-10 {
+ margin-bottom: 1rem !important;
+ }
+ .mb-xl-15 {
+ margin-bottom: 1.5rem !important;
+ }
+ .mb-xl-20 {
+ margin-bottom: 2rem !important;
+ }
+ .mb-xl-auto {
+ margin-bottom: auto !important;
+ }
+ .ml-xl-0 {
+ margin-left: 0 !important;
+ }
+ .ml-xl-5 {
+ margin-left: 0.5rem !important;
+ }
+ .ml-xl-10 {
+ margin-left: 1rem !important;
+ }
+ .ml-xl-15 {
+ margin-left: 1.5rem !important;
+ }
+ .ml-xl-20 {
+ margin-left: 2rem !important;
+ }
+ .ml-xl-auto {
+ margin-left: auto !important;
+ }
+ .mr-xl-0 {
+ margin-right: 0 !important;
+ }
+ .mr-xl-5 {
+ margin-right: 0.5rem !important;
+ }
+ .mr-xl-10 {
+ margin-right: 1rem !important;
+ }
+ .mr-xl-15 {
+ margin-right: 1.5rem !important;
+ }
+ .mr-xl-20 {
+ margin-right: 2rem !important;
+ }
+ .mr-xl-auto {
+ margin-right: auto !important;
+ }
+}
+
+
+/*
+-------------------------------------------------------------------------------
+26. Display utilities [hm-26]
+-------------------------------------------------------------------------------
+*/
+
+.d-none {
+ display: none !important;
+}
+.d-inline {
+ display: inline !important;
+}
+.d-inline-block {
+ display: inline-block !important;
+}
+.d-block {
+ display: block !important;
+}
+.d-table {
+ display: table !important;
+}
+.d-table-row {
+ display: table-row !important;
+}
+.d-table-cell {
+ display: table-cell !important;
+}
+.d-flex {
+ display: -ms-flexbox !important;
+ display: flex !important;
+}
+.d-inline-flex {
+ display: -ms-inline-flexbox !important;
+ display: inline-flex !important;
+}
+@media (min-width: 577px) {
+ .d-sm-none {
+ display: none !important;
+ }
+ .d-sm-inline {
+ display: inline !important;
+ }
+ .d-sm-inline-block {
+ display: inline-block !important;
+ }
+ .d-sm-block {
+ display: block !important;
+ }
+ .d-sm-table {
+ display: table !important;
+ }
+ .d-sm-table-row {
+ display: table-row !important;
+ }
+ .d-sm-table-cell {
+ display: table-cell !important;
+ }
+ .d-sm-flex {
+ display: -ms-flexbox !important;
+ display: flex !important;
+ }
+ .d-sm-inline-flex {
+ display: -ms-inline-flexbox !important;
+ display: inline-flex !important;
+ }
+}
+@media (min-width: 769px) {
+ .d-md-none {
+ display: none !important;
+ }
+ .d-md-inline {
+ display: inline !important;
+ }
+ .d-md-inline-block {
+ display: inline-block !important;
+ }
+ .d-md-block {
+ display: block !important;
+ }
+ .d-md-table {
+ display: table !important;
+ }
+ .d-md-table-row {
+ display: table-row !important;
+ }
+ .d-md-table-cell {
+ display: table-cell !important;
+ }
+ .d-md-flex {
+ display: -ms-flexbox !important;
+ display: flex !important;
+ }
+ .d-md-inline-flex {
+ display: -ms-inline-flexbox !important;
+ display: inline-flex !important;
+ }
+}
+@media (min-width: 993px) {
+ .d-lg-none {
+ display: none !important;
+ }
+ .d-lg-inline {
+ display: inline !important;
+ }
+ .d-lg-inline-block {
+ display: inline-block !important;
+ }
+ .d-lg-block {
+ display: block !important;
+ }
+ .d-lg-table {
+ display: table !important;
+ }
+ .d-lg-table-row {
+ display: table-row !important;
+ }
+ .d-lg-table-cell {
+ display: table-cell !important;
+ }
+ .d-lg-flex {
+ display: -ms-flexbox !important;
+ display: flex !important;
+ }
+ .d-lg-inline-flex {
+ display: -ms-inline-flexbox !important;
+ display: inline-flex !important;
+ }
+}
+@media (min-width: 1201px) {
+ .d-xl-none {
+ display: none !important;
+ }
+ .d-xl-inline {
+ display: inline !important;
+ }
+ .d-xl-inline-block {
+ display: inline-block !important;
+ }
+ .d-xl-block {
+ display: block !important;
+ }
+ .d-xl-table {
+ display: table !important;
+ }
+ .d-xl-table-row {
+ display: table-row !important;
+ }
+ .d-xl-table-cell {
+ display: table-cell !important;
+ }
+ .d-xl-flex {
+ display: -ms-flexbox !important;
+ display: flex !important;
+ }
+ .d-xl-inline-flex {
+ display: -ms-inline-flexbox !important;
+ display: inline-flex !important;
+ }
+}
+@media (max-width: 576px) {
+ .d-xs-only-none {
+ display: none !important;
+ }
+}
+@media (min-width: 577px) and (max-width: 768px) {
+ .d-sm-only-none {
+ display: none !important;
+ }
+}
+@media (min-width: 769px) and (max-width: 992px) {
+ .d-md-only-none {
+ display: none !important;
+ }
+}
+@media (min-width: 993px) and (max-width: 1200px) {
+ .d-lg-only-none {
+ display: none !important;
+ }
+}
+@media (min-width: 1201px) {
+ .d-xl-only-none {
+ display: none !important;
+ }
+}
+
+/* Hidden {breakpoint}-and-up and {breakpoint}-and-down */
+
+.hidden-xs-and-up {
+ display: none !important;
+}
+@media (max-width: 576px) {
+ .hidden-xs-and-down {
+ display: none !important;
+ }
+}
+@media (min-width: 577px) {
+ .hidden-sm-and-up {
+ display: none !important;
+ }
+}
+@media (max-width: 768px) {
+ .hidden-sm-and-down {
+ display: none !important;
+ }
+}
+@media (min-width: 769px) {
+ .hidden-md-and-up {
+ display: none !important;
+ }
+}
+@media (max-width: 992px) {
+ .hidden-md-and-down {
+ display: none !important;
+ }
+}
+@media (min-width: 993px) {
+ .hidden-lg-and-up {
+ display: none !important;
+ }
+}
+@media (max-width: 1200px) {
+ .hidden-lg-and-down {
+ display: none !important;
+ }
+}
+@media (min-width: 1201px) {
+ .hidden-xl-and-up {
+ display: none !important;
+ }
+}
+.hidden-xl-and-down {
+ display: none !important;
+}
+
+/* Hidden in light and dark mode */
+
+body:not(.dark-mode) .hidden-lm {
+ display: none !important;
+}
+.dark-mode .hidden-dm {
+ display: none !important;
+}
+
+
+/*
+-------------------------------------------------------------------------------
+27. Sizing utilities [hm-27]
+-------------------------------------------------------------------------------
+*/
+
+/* Width */
+
+.w-25 {
+ width: 2.5rem !important;
+}
+.w-50 {
+ width: 5rem !important;
+}
+.w-100 {
+ width: 10rem !important;
+}
+.w-150 {
+ width: 15rem !important;
+}
+.w-200 {
+ width: 20rem !important;
+}
+.w-250 {
+ width: 25rem !important;
+}
+.w-300 {
+ width: 30rem !important;
+}
+.w-350 {
+ width: 35rem !important;
+}
+.w-400 {
+ width: 40rem !important;
+}
+.w-450 {
+ width: 45rem !important;
+}
+.w-500 {
+ width: 50rem !important;
+}
+.w-550 {
+ width: 55rem !important;
+}
+.w-600 {
+ width: 60rem !important;
+}
+.w-auto {
+ width: auto !important;
+}
+.w-quarter {
+ width: 25% !important;
+}
+.w-half {
+ width: 50% !important;
+}
+.w-three-quarter {
+ width: 75% !important;
+}
+.w-full {
+ width: 100% !important;
+}
+.mw-full {
+ max-width: 100% !important;
+}
+@media (min-width: 577px) {
+ .w-sm-25 {
+ width: 2.5rem !important;
+ }
+ .w-sm-50 {
+ width: 5rem !important;
+ }
+ .w-sm-100 {
+ width: 10rem !important;
+ }
+ .w-sm-150 {
+ width: 15rem !important;
+ }
+ .w-sm-200 {
+ width: 20rem !important;
+ }
+ .w-sm-250 {
+ width: 25rem !important;
+ }
+ .w-sm-300 {
+ width: 30rem !important;
+ }
+ .w-sm-350 {
+ width: 35rem !important;
+ }
+ .w-sm-400 {
+ width: 40rem !important;
+ }
+ .w-sm-450 {
+ width: 45rem !important;
+ }
+ .w-sm-500 {
+ width: 50rem !important;
+ }
+ .w-sm-550 {
+ width: 55rem !important;
+ }
+ .w-sm-600 {
+ width: 60rem !important;
+ }
+ .w-sm-auto {
+ width: auto !important;
+ }
+ .w-sm-quarter {
+ width: 25% !important;
+ }
+ .w-sm-half {
+ width: 50% !important;
+ }
+ .w-sm-three-quarter {
+ width: 75% !important;
+ }
+ .w-sm-full {
+ width: 100% !important;
+ }
+ .mw-sm-full {
+ max-width: 100% !important;
+ }
+}
+@media (min-width: 769px) {
+ .w-md-25 {
+ width: 2.5rem !important;
+ }
+ .w-md-50 {
+ width: 5rem !important;
+ }
+ .w-md-100 {
+ width: 10rem !important;
+ }
+ .w-md-150 {
+ width: 15rem !important;
+ }
+ .w-md-200 {
+ width: 20rem !important;
+ }
+ .w-md-250 {
+ width: 25rem !important;
+ }
+ .w-md-300 {
+ width: 30rem !important;
+ }
+ .w-md-350 {
+ width: 35rem !important;
+ }
+ .w-md-400 {
+ width: 40rem !important;
+ }
+ .w-md-450 {
+ width: 45rem !important;
+ }
+ .w-md-500 {
+ width: 50rem !important;
+ }
+ .w-md-550 {
+ width: 55rem !important;
+ }
+ .w-md-600 {
+ width: 60rem !important;
+ }
+ .w-md-auto {
+ width: auto !important;
+ }
+ .w-md-quarter {
+ width: 25% !important;
+ }
+ .w-md-half {
+ width: 50% !important;
+ }
+ .w-md-three-quarter {
+ width: 75% !important;
+ }
+ .w-md-full {
+ width: 100% !important;
+ }
+ .mw-md-full {
+ max-width: 100% !important;
+ }
+}
+@media (min-width: 993px) {
+ .w-lg-25 {
+ width: 2.5rem !important;
+ }
+ .w-lg-50 {
+ width: 5rem !important;
+ }
+ .w-lg-100 {
+ width: 10rem !important;
+ }
+ .w-lg-150 {
+ width: 15rem !important;
+ }
+ .w-lg-200 {
+ width: 20rem !important;
+ }
+ .w-lg-250 {
+ width: 25rem !important;
+ }
+ .w-lg-300 {
+ width: 30rem !important;
+ }
+ .w-lg-350 {
+ width: 35rem !important;
+ }
+ .w-lg-400 {
+ width: 40rem !important;
+ }
+ .w-lg-450 {
+ width: 45rem !important;
+ }
+ .w-lg-500 {
+ width: 50rem !important;
+ }
+ .w-lg-550 {
+ width: 55rem !important;
+ }
+ .w-lg-600 {
+ width: 60rem !important;
+ }
+ .w-lg-auto {
+ width: auto !important;
+ }
+ .w-lg-quarter {
+ width: 25% !important;
+ }
+ .w-lg-half {
+ width: 50% !important;
+ }
+ .w-lg-three-quarter {
+ width: 75% !important;
+ }
+ .w-lg-full {
+ width: 100% !important;
+ }
+ .mw-lg-full {
+ max-width: 100% !important;
+ }
+}
+@media (min-width: 1201px) {
+ .w-xl-25 {
+ width: 2.5rem !important;
+ }
+ .w-xl-50 {
+ width: 5rem !important;
+ }
+ .w-xl-100 {
+ width: 10rem !important;
+ }
+ .w-xl-150 {
+ width: 15rem !important;
+ }
+ .w-xl-200 {
+ width: 20rem !important;
+ }
+ .w-xl-250 {
+ width: 25rem !important;
+ }
+ .w-xl-300 {
+ width: 30rem !important;
+ }
+ .w-xl-350 {
+ width: 35rem !important;
+ }
+ .w-xl-400 {
+ width: 40rem !important;
+ }
+ .w-xl-450 {
+ width: 45rem !important;
+ }
+ .w-xl-500 {
+ width: 50rem !important;
+ }
+ .w-xl-550 {
+ width: 55rem !important;
+ }
+ .w-xl-600 {
+ width: 60rem !important;
+ }
+ .w-xl-auto {
+ width: auto !important;
+ }
+ .w-xl-quarter {
+ width: 25% !important;
+ }
+ .w-xl-half {
+ width: 50% !important;
+ }
+ .w-xl-three-quarter {
+ width: 75% !important;
+ }
+ .w-xl-full {
+ width: 100% !important;
+ }
+ .mw-xl-full {
+ max-width: 100% !important;
+ }
+}
+
+/* Height */
+
+.h-25 {
+ height: 2.5rem !important;
+}
+.h-50 {
+ height: 5rem !important;
+}
+.h-100 {
+ height: 10rem !important;
+}
+.h-150 {
+ height: 15rem !important;
+}
+.h-200 {
+ height: 20rem !important;
+}
+.h-250 {
+ height: 25rem !important;
+}
+.h-300 {
+ height: 30rem !important;
+}
+.h-350 {
+ height: 35rem !important;
+}
+.h-400 {
+ height: 40rem !important;
+}
+.h-450 {
+ height: 45rem !important;
+}
+.h-500 {
+ height: 50rem !important;
+}
+.h-550 {
+ height: 55rem !important;
+}
+.h-600 {
+ height: 60rem !important;
+}
+.h-auto {
+ height: auto !important;
+}
+.h-quarter {
+ height: 25% !important;
+}
+.h-half {
+ height: 50% !important;
+}
+.h-three-quarter {
+ height: 75% !important;
+}
+.h-full {
+ height: 100% !important;
+}
+.mh-full {
+ max-height: 100% !important;
+}
+@media (min-width: 577px) {
+ .h-sm-25 {
+ height: 2.5rem !important;
+ }
+ .h-sm-50 {
+ height: 5rem !important;
+ }
+ .h-sm-100 {
+ height: 10rem !important;
+ }
+ .h-sm-150 {
+ height: 15rem !important;
+ }
+ .h-sm-200 {
+ height: 20rem !important;
+ }
+ .h-sm-250 {
+ height: 25rem !important;
+ }
+ .h-sm-300 {
+ height: 30rem !important;
+ }
+ .h-sm-350 {
+ height: 35rem !important;
+ }
+ .h-sm-400 {
+ height: 40rem !important;
+ }
+ .h-sm-450 {
+ height: 45rem !important;
+ }
+ .h-sm-500 {
+ height: 50rem !important;
+ }
+ .h-sm-550 {
+ height: 55rem !important;
+ }
+ .h-sm-600 {
+ height: 60rem !important;
+ }
+ .h-sm-auto {
+ height: auto !important;
+ }
+ .h-sm-quarter {
+ height: 25% !important;
+ }
+ .h-sm-half {
+ height: 50% !important;
+ }
+ .h-sm-three-quarter {
+ height: 75% !important;
+ }
+ .h-sm-full {
+ height: 100% !important;
+ }
+ .mh-sm-full {
+ max-height: 100% !important;
+ }
+}
+@media (min-width: 769px) {
+ .h-md-25 {
+ height: 2.5rem !important;
+ }
+ .h-md-50 {
+ height: 5rem !important;
+ }
+ .h-md-100 {
+ height: 10rem !important;
+ }
+ .h-md-150 {
+ height: 15rem !important;
+ }
+ .h-md-200 {
+ height: 20rem !important;
+ }
+ .h-md-250 {
+ height: 25rem !important;
+ }
+ .h-md-300 {
+ height: 30rem !important;
+ }
+ .h-md-350 {
+ height: 35rem !important;
+ }
+ .h-md-400 {
+ height: 40rem !important;
+ }
+ .h-md-450 {
+ height: 45rem !important;
+ }
+ .h-md-500 {
+ height: 50rem !important;
+ }
+ .h-md-550 {
+ height: 55rem !important;
+ }
+ .h-md-600 {
+ height: 60rem !important;
+ }
+ .h-md-auto {
+ height: auto !important;
+ }
+ .h-md-quarter {
+ height: 25% !important;
+ }
+ .h-md-half {
+ height: 50% !important;
+ }
+ .h-md-three-quarter {
+ height: 75% !important;
+ }
+ .h-md-full {
+ height: 100% !important;
+ }
+ .mh-md-full {
+ max-height: 100% !important;
+ }
+}
+@media (min-width: 993px) {
+ .h-lg-25 {
+ height: 2.5rem !important;
+ }
+ .h-lg-50 {
+ height: 5rem !important;
+ }
+ .h-lg-100 {
+ height: 10rem !important;
+ }
+ .h-lg-150 {
+ height: 15rem !important;
+ }
+ .h-lg-200 {
+ height: 20rem !important;
+ }
+ .h-lg-250 {
+ height: 25rem !important;
+ }
+ .h-lg-300 {
+ height: 30rem !important;
+ }
+ .h-lg-350 {
+ height: 35rem !important;
+ }
+ .h-lg-400 {
+ height: 40rem !important;
+ }
+ .h-lg-450 {
+ height: 45rem !important;
+ }
+ .h-lg-500 {
+ height: 50rem !important;
+ }
+ .h-lg-550 {
+ height: 55rem !important;
+ }
+ .h-lg-600 {
+ height: 60rem !important;
+ }
+ .h-lg-auto {
+ height: auto !important;
+ }
+ .h-lg-quarter {
+ height: 25% !important;
+ }
+ .h-lg-half {
+ height: 50% !important;
+ }
+ .h-lg-three-quarter {
+ height: 75% !important;
+ }
+ .h-lg-full {
+ height: 100% !important;
+ }
+ .mh-lg-full {
+ max-height: 100% !important;
+ }
+}
+@media (min-width: 1201px) {
+ .h-xl-25 {
+ height: 2.5rem !important;
+ }
+ .h-xl-50 {
+ height: 5rem !important;
+ }
+ .h-xl-100 {
+ height: 10rem !important;
+ }
+ .h-xl-150 {
+ height: 15rem !important;
+ }
+ .h-xl-200 {
+ height: 20rem !important;
+ }
+ .h-xl-250 {
+ height: 25rem !important;
+ }
+ .h-xl-300 {
+ height: 30rem !important;
+ }
+ .h-xl-350 {
+ height: 35rem !important;
+ }
+ .h-xl-400 {
+ height: 40rem !important;
+ }
+ .h-xl-450 {
+ height: 45rem !important;
+ }
+ .h-xl-500 {
+ height: 50rem !important;
+ }
+ .h-xl-550 {
+ height: 55rem !important;
+ }
+ .h-xl-600 {
+ height: 60rem !important;
+ }
+ .h-xl-auto {
+ height: auto !important;
+ }
+ .h-xl-quarter {
+ height: 25% !important;
+ }
+ .h-xl-half {
+ height: 50% !important;
+ }
+ .h-xl-three-quarter {
+ height: 75% !important;
+ }
+ .h-xl-full {
+ height: 100% !important;
+ }
+ .mh-xl-full {
+ max-height: 100% !important;
+ }
+}
+
+/*
+-------------------------------------------------------------------------------
+28. Flex utilities [hm-28]
+-------------------------------------------------------------------------------
+*/
+
+.flex-row {
+ -ms-flex-direction: row !important;
+ flex-direction: row !important;
+}
+.flex-column {
+ -ms-flex-direction: column !important;
+ flex-direction: column !important;
+}
+.flex-row-reverse {
+ -ms-flex-direction: row-reverse !important;
+ flex-direction: row-reverse !important;
+}
+.flex-column-reverse {
+ -ms-flex-direction: column-reverse !important;
+ flex-direction: column-reverse !important;
+}
+.flex-wrap {
+ -ms-flex-wrap: wrap !important;
+ flex-wrap: wrap !important;
+}
+.flex-nowrap {
+ -ms-flex-wrap: nowrap !important;
+ flex-wrap: nowrap !important;
+}
+.flex-wrap-reverse {
+ -ms-flex-wrap: wrap-reverse !important;
+ flex-wrap: wrap-reverse !important;
+}
+.flex-fill {
+ -ms-flex: 1 1 auto !important;
+ flex: 1 1 auto !important;
+}
+.flex-grow-0 {
+ -ms-flex-positive: 0 !important;
+ flex-grow: 0 !important;
+}
+.flex-grow-1 {
+ -ms-flex-positive: 1 !important;
+ flex-grow: 1 !important;
+}
+.flex-shrink-0 {
+ -ms-flex-negative: 0 !important;
+ flex-shrink: 0 !important;
+}
+.flex-shrink-1 {
+ -ms-flex-negative: 1 !important;
+ flex-shrink: 1 !important;
+}
+.justify-content-start {
+ -ms-flex-pack: start !important;
+ justify-content: flex-start !important;
+}
+.justify-content-end {
+ -ms-flex-pack: end !important;
+ justify-content: flex-end !important;
+}
+.justify-content-center {
+ -ms-flex-pack: center !important;
+ justify-content: center !important;
+}
+.justify-content-between {
+ -ms-flex-pack: justify !important;
+ justify-content: space-between !important;
+}
+.justify-content-around {
+ -ms-flex-pack: distribute !important;
+ justify-content: space-around !important;
+}
+.align-items-start {
+ -ms-flex-align: start !important;
+ align-items: flex-start !important;
+}
+.align-items-end {
+ -ms-flex-align: end !important;
+ align-items: flex-end !important;
+}
+.align-items-center {
+ -ms-flex-align: center !important;
+ align-items: center !important;
+}
+.align-items-baseline {
+ -ms-flex-align: baseline !important;
+ align-items: baseline !important;
+}
+.align-items-stretch {
+ -ms-flex-align: stretch !important;
+ align-items: stretch !important;
+}
+.align-content-start {
+ -ms-flex-line-pack: start !important;
+ align-content: flex-start !important;
+}
+.align-content-end {
+ -ms-flex-line-pack: end !important;
+ align-content: flex-end !important;
+}
+.align-content-center {
+ -ms-flex-line-pack: center !important;
+ align-content: center !important;
+}
+.align-content-between {
+ -ms-flex-line-pack: justify !important;
+ align-content: space-between !important;
+}
+.align-content-around {
+ -ms-flex-line-pack: distribute !important;
+ align-content: space-around !important;
+}
+.align-content-stretch {
+ -ms-flex-line-pack: stretch !important;
+ align-content: stretch !important;
+}
+.align-self-auto {
+ -ms-flex-item-align: auto !important;
+ align-self: auto !important;
+}
+.align-self-start {
+ -ms-flex-item-align: start !important;
+ align-self: flex-start !important;
+}
+.align-self-end {
+ -ms-flex-item-align: end !important;
+ align-self: flex-end !important;
+}
+.align-self-center {
+ -ms-flex-item-align: center !important;
+ align-self: center !important;
+}
+.align-self-baseline {
+ -ms-flex-item-align: baseline !important;
+ align-self: baseline !important;
+}
+.align-self-stretch {
+ -ms-flex-item-align: stretch !important;
+ align-self: stretch !important;
+}
+@media (min-width: 577px) {
+ .flex-sm-row {
+ -ms-flex-direction: row !important;
+ flex-direction: row !important;
+ }
+ .flex-sm-column {
+ -ms-flex-direction: column !important;
+ flex-direction: column !important;
+ }
+ .flex-sm-row-reverse {
+ -ms-flex-direction: row-reverse !important;
+ flex-direction: row-reverse !important;
+ }
+ .flex-sm-column-reverse {
+ -ms-flex-direction: column-reverse !important;
+ flex-direction: column-reverse !important;
+ }
+ .flex-sm-wrap {
+ -ms-flex-wrap: wrap !important;
+ flex-wrap: wrap !important;
+ }
+ .flex-sm-nowrap {
+ -ms-flex-wrap: nowrap !important;
+ flex-wrap: nowrap !important;
+ }
+ .flex-sm-wrap-reverse {
+ -ms-flex-wrap: wrap-reverse !important;
+ flex-wrap: wrap-reverse !important;
+ }
+ .flex-sm-fill {
+ -ms-flex: 1 1 auto !important;
+ flex: 1 1 auto !important;
+ }
+ .flex-sm-grow-0 {
+ -ms-flex-positive: 0 !important;
+ flex-grow: 0 !important;
+ }
+ .flex-sm-grow-1 {
+ -ms-flex-positive: 1 !important;
+ flex-grow: 1 !important;
+ }
+ .flex-sm-shrink-0 {
+ -ms-flex-negative: 0 !important;
+ flex-shrink: 0 !important;
+ }
+ .flex-sm-shrink-1 {
+ -ms-flex-negative: 1 !important;
+ flex-shrink: 1 !important;
+ }
+ .justify-content-sm-start {
+ -ms-flex-pack: start !important;
+ justify-content: flex-start !important;
+ }
+ .justify-content-sm-end {
+ -ms-flex-pack: end !important;
+ justify-content: flex-end !important;
+ }
+ .justify-content-sm-center {
+ -ms-flex-pack: center !important;
+ justify-content: center !important;
+ }
+ .justify-content-sm-between {
+ -ms-flex-pack: justify !important;
+ justify-content: space-between !important;
+ }
+ .justify-content-sm-around {
+ -ms-flex-pack: distribute !important;
+ justify-content: space-around !important;
+ }
+ .align-items-sm-start {
+ -ms-flex-align: start !important;
+ align-items: flex-start !important;
+ }
+ .align-items-sm-end {
+ -ms-flex-align: end !important;
+ align-items: flex-end !important;
+ }
+ .align-items-sm-center {
+ -ms-flex-align: center !important;
+ align-items: center !important;
+ }
+ .align-items-sm-baseline {
+ -ms-flex-align: baseline !important;
+ align-items: baseline !important;
+ }
+ .align-items-sm-stretch {
+ -ms-flex-align: stretch !important;
+ align-items: stretch !important;
+ }
+ .align-content-sm-start {
+ -ms-flex-line-pack: start !important;
+ align-content: flex-start !important;
+ }
+ .align-content-sm-end {
+ -ms-flex-line-pack: end !important;
+ align-content: flex-end !important;
+ }
+ .align-content-sm-center {
+ -ms-flex-line-pack: center !important;
+ align-content: center !important;
+ }
+ .align-content-sm-between {
+ -ms-flex-line-pack: justify !important;
+ align-content: space-between !important;
+ }
+ .align-content-sm-around {
+ -ms-flex-line-pack: distribute !important;
+ align-content: space-around !important;
+ }
+ .align-content-sm-stretch {
+ -ms-flex-line-pack: stretch !important;
+ align-content: stretch !important;
+ }
+ .align-self-sm-auto {
+ -ms-flex-item-align: auto !important;
+ align-self: auto !important;
+ }
+ .align-self-sm-start {
+ -ms-flex-item-align: start !important;
+ align-self: flex-start !important;
+ }
+ .align-self-sm-end {
+ -ms-flex-item-align: end !important;
+ align-self: flex-end !important;
+ }
+ .align-self-sm-center {
+ -ms-flex-item-align: center !important;
+ align-self: center !important;
+ }
+ .align-self-sm-baseline {
+ -ms-flex-item-align: baseline !important;
+ align-self: baseline !important;
+ }
+ .align-self-sm-stretch {
+ -ms-flex-item-align: stretch !important;
+ align-self: stretch !important;
+ }
+}
+@media (min-width: 769px) {
+ .flex-md-row {
+ -ms-flex-direction: row !important;
+ flex-direction: row !important;
+ }
+ .flex-md-column {
+ -ms-flex-direction: column !important;
+ flex-direction: column !important;
+ }
+ .flex-md-row-reverse {
+ -ms-flex-direction: row-reverse !important;
+ flex-direction: row-reverse !important;
+ }
+ .flex-md-column-reverse {
+ -ms-flex-direction: column-reverse !important;
+ flex-direction: column-reverse !important;
+ }
+ .flex-md-wrap {
+ -ms-flex-wrap: wrap !important;
+ flex-wrap: wrap !important;
+ }
+ .flex-md-nowrap {
+ -ms-flex-wrap: nowrap !important;
+ flex-wrap: nowrap !important;
+ }
+ .flex-md-wrap-reverse {
+ -ms-flex-wrap: wrap-reverse !important;
+ flex-wrap: wrap-reverse !important;
+ }
+ .flex-md-fill {
+ -ms-flex: 1 1 auto !important;
+ flex: 1 1 auto !important;
+ }
+ .flex-md-grow-0 {
+ -ms-flex-positive: 0 !important;
+ flex-grow: 0 !important;
+ }
+ .flex-md-grow-1 {
+ -ms-flex-positive: 1 !important;
+ flex-grow: 1 !important;
+ }
+ .flex-md-shrink-0 {
+ -ms-flex-negative: 0 !important;
+ flex-shrink: 0 !important;
+ }
+ .flex-md-shrink-1 {
+ -ms-flex-negative: 1 !important;
+ flex-shrink: 1 !important;
+ }
+ .justify-content-md-start {
+ -ms-flex-pack: start !important;
+ justify-content: flex-start !important;
+ }
+ .justify-content-md-end {
+ -ms-flex-pack: end !important;
+ justify-content: flex-end !important;
+ }
+ .justify-content-md-center {
+ -ms-flex-pack: center !important;
+ justify-content: center !important;
+ }
+ .justify-content-md-between {
+ -ms-flex-pack: justify !important;
+ justify-content: space-between !important;
+ }
+ .justify-content-md-around {
+ -ms-flex-pack: distribute !important;
+ justify-content: space-around !important;
+ }
+ .align-items-md-start {
+ -ms-flex-align: start !important;
+ align-items: flex-start !important;
+ }
+ .align-items-md-end {
+ -ms-flex-align: end !important;
+ align-items: flex-end !important;
+ }
+ .align-items-md-center {
+ -ms-flex-align: center !important;
+ align-items: center !important;
+ }
+ .align-items-md-baseline {
+ -ms-flex-align: baseline !important;
+ align-items: baseline !important;
+ }
+ .align-items-md-stretch {
+ -ms-flex-align: stretch !important;
+ align-items: stretch !important;
+ }
+ .align-content-md-start {
+ -ms-flex-line-pack: start !important;
+ align-content: flex-start !important;
+ }
+ .align-content-md-end {
+ -ms-flex-line-pack: end !important;
+ align-content: flex-end !important;
+ }
+ .align-content-md-center {
+ -ms-flex-line-pack: center !important;
+ align-content: center !important;
+ }
+ .align-content-md-between {
+ -ms-flex-line-pack: justify !important;
+ align-content: space-between !important;
+ }
+ .align-content-md-around {
+ -ms-flex-line-pack: distribute !important;
+ align-content: space-around !important;
+ }
+ .align-content-md-stretch {
+ -ms-flex-line-pack: stretch !important;
+ align-content: stretch !important;
+ }
+ .align-self-md-auto {
+ -ms-flex-item-align: auto !important;
+ align-self: auto !important;
+ }
+ .align-self-md-start {
+ -ms-flex-item-align: start !important;
+ align-self: flex-start !important;
+ }
+ .align-self-md-end {
+ -ms-flex-item-align: end !important;
+ align-self: flex-end !important;
+ }
+ .align-self-md-center {
+ -ms-flex-item-align: center !important;
+ align-self: center !important;
+ }
+ .align-self-md-baseline {
+ -ms-flex-item-align: baseline !important;
+ align-self: baseline !important;
+ }
+ .align-self-md-stretch {
+ -ms-flex-item-align: stretch !important;
+ align-self: stretch !important;
+ }
+}
+@media (min-width: 993px) {
+ .flex-lg-row {
+ -ms-flex-direction: row !important;
+ flex-direction: row !important;
+ }
+ .flex-lg-column {
+ -ms-flex-direction: column !important;
+ flex-direction: column !important;
+ }
+ .flex-lg-row-reverse {
+ -ms-flex-direction: row-reverse !important;
+ flex-direction: row-reverse !important;
+ }
+ .flex-lg-column-reverse {
+ -ms-flex-direction: column-reverse !important;
+ flex-direction: column-reverse !important;
+ }
+ .flex-lg-wrap {
+ -ms-flex-wrap: wrap !important;
+ flex-wrap: wrap !important;
+ }
+ .flex-lg-nowrap {
+ -ms-flex-wrap: nowrap !important;
+ flex-wrap: nowrap !important;
+ }
+ .flex-lg-wrap-reverse {
+ -ms-flex-wrap: wrap-reverse !important;
+ flex-wrap: wrap-reverse !important;
+ }
+ .flex-lg-fill {
+ -ms-flex: 1 1 auto !important;
+ flex: 1 1 auto !important;
+ }
+ .flex-lg-grow-0 {
+ -ms-flex-positive: 0 !important;
+ flex-grow: 0 !important;
+ }
+ .flex-lg-grow-1 {
+ -ms-flex-positive: 1 !important;
+ flex-grow: 1 !important;
+ }
+ .flex-lg-shrink-0 {
+ -ms-flex-negative: 0 !important;
+ flex-shrink: 0 !important;
+ }
+ .flex-lg-shrink-1 {
+ -ms-flex-negative: 1 !important;
+ flex-shrink: 1 !important;
+ }
+ .justify-content-lg-start {
+ -ms-flex-pack: start !important;
+ justify-content: flex-start !important;
+ }
+ .justify-content-lg-end {
+ -ms-flex-pack: end !important;
+ justify-content: flex-end !important;
+ }
+ .justify-content-lg-center {
+ -ms-flex-pack: center !important;
+ justify-content: center !important;
+ }
+ .justify-content-lg-between {
+ -ms-flex-pack: justify !important;
+ justify-content: space-between !important;
+ }
+ .justify-content-lg-around {
+ -ms-flex-pack: distribute !important;
+ justify-content: space-around !important;
+ }
+ .align-items-lg-start {
+ -ms-flex-align: start !important;
+ align-items: flex-start !important;
+ }
+ .align-items-lg-end {
+ -ms-flex-align: end !important;
+ align-items: flex-end !important;
+ }
+ .align-items-lg-center {
+ -ms-flex-align: center !important;
+ align-items: center !important;
+ }
+ .align-items-lg-baseline {
+ -ms-flex-align: baseline !important;
+ align-items: baseline !important;
+ }
+ .align-items-lg-stretch {
+ -ms-flex-align: stretch !important;
+ align-items: stretch !important;
+ }
+ .align-content-lg-start {
+ -ms-flex-line-pack: start !important;
+ align-content: flex-start !important;
+ }
+ .align-content-lg-end {
+ -ms-flex-line-pack: end !important;
+ align-content: flex-end !important;
+ }
+ .align-content-lg-center {
+ -ms-flex-line-pack: center !important;
+ align-content: center !important;
+ }
+ .align-content-lg-between {
+ -ms-flex-line-pack: justify !important;
+ align-content: space-between !important;
+ }
+ .align-content-lg-around {
+ -ms-flex-line-pack: distribute !important;
+ align-content: space-around !important;
+ }
+ .align-content-lg-stretch {
+ -ms-flex-line-pack: stretch !important;
+ align-content: stretch !important;
+ }
+ .align-self-lg-auto {
+ -ms-flex-item-align: auto !important;
+ align-self: auto !important;
+ }
+ .align-self-lg-start {
+ -ms-flex-item-align: start !important;
+ align-self: flex-start !important;
+ }
+ .align-self-lg-end {
+ -ms-flex-item-align: end !important;
+ align-self: flex-end !important;
+ }
+ .align-self-lg-center {
+ -ms-flex-item-align: center !important;
+ align-self: center !important;
+ }
+ .align-self-lg-baseline {
+ -ms-flex-item-align: baseline !important;
+ align-self: baseline !important;
+ }
+ .align-self-lg-stretch {
+ -ms-flex-item-align: stretch !important;
+ align-self: stretch !important;
+ }
+}
+@media (min-width: 1201px) {
+ .flex-xl-row {
+ -ms-flex-direction: row !important;
+ flex-direction: row !important;
+ }
+ .flex-xl-column {
+ -ms-flex-direction: column !important;
+ flex-direction: column !important;
+ }
+ .flex-xl-row-reverse {
+ -ms-flex-direction: row-reverse !important;
+ flex-direction: row-reverse !important;
+ }
+ .flex-xl-column-reverse {
+ -ms-flex-direction: column-reverse !important;
+ flex-direction: column-reverse !important;
+ }
+ .flex-xl-wrap {
+ -ms-flex-wrap: wrap !important;
+ flex-wrap: wrap !important;
+ }
+ .flex-xl-nowrap {
+ -ms-flex-wrap: nowrap !important;
+ flex-wrap: nowrap !important;
+ }
+ .flex-xl-wrap-reverse {
+ -ms-flex-wrap: wrap-reverse !important;
+ flex-wrap: wrap-reverse !important;
+ }
+ .flex-xl-fill {
+ -ms-flex: 1 1 auto !important;
+ flex: 1 1 auto !important;
+ }
+ .flex-xl-grow-0 {
+ -ms-flex-positive: 0 !important;
+ flex-grow: 0 !important;
+ }
+ .flex-xl-grow-1 {
+ -ms-flex-positive: 1 !important;
+ flex-grow: 1 !important;
+ }
+ .flex-xl-shrink-0 {
+ -ms-flex-negative: 0 !important;
+ flex-shrink: 0 !important;
+ }
+ .flex-xl-shrink-1 {
+ -ms-flex-negative: 1 !important;
+ flex-shrink: 1 !important;
+ }
+ .justify-content-xl-start {
+ -ms-flex-pack: start !important;
+ justify-content: flex-start !important;
+ }
+ .justify-content-xl-end {
+ -ms-flex-pack: end !important;
+ justify-content: flex-end !important;
+ }
+ .justify-content-xl-center {
+ -ms-flex-pack: center !important;
+ justify-content: center !important;
+ }
+ .justify-content-xl-between {
+ -ms-flex-pack: justify !important;
+ justify-content: space-between !important;
+ }
+ .justify-content-xl-around {
+ -ms-flex-pack: distribute !important;
+ justify-content: space-around !important;
+ }
+ .align-items-xl-start {
+ -ms-flex-align: start !important;
+ align-items: flex-start !important;
+ }
+ .align-items-xl-end {
+ -ms-flex-align: end !important;
+ align-items: flex-end !important;
+ }
+ .align-items-xl-center {
+ -ms-flex-align: center !important;
+ align-items: center !important;
+ }
+ .align-items-xl-baseline {
+ -ms-flex-align: baseline !important;
+ align-items: baseline !important;
+ }
+ .align-items-xl-stretch {
+ -ms-flex-align: stretch !important;
+ align-items: stretch !important;
+ }
+ .align-content-xl-start {
+ -ms-flex-line-pack: start !important;
+ align-content: flex-start !important;
+ }
+ .align-content-xl-end {
+ -ms-flex-line-pack: end !important;
+ align-content: flex-end !important;
+ }
+ .align-content-xl-center {
+ -ms-flex-line-pack: center !important;
+ align-content: center !important;
+ }
+ .align-content-xl-between {
+ -ms-flex-line-pack: justify !important;
+ align-content: space-between !important;
+ }
+ .align-content-xl-around {
+ -ms-flex-line-pack: distribute !important;
+ align-content: space-around !important;
+ }
+ .align-content-xl-stretch {
+ -ms-flex-line-pack: stretch !important;
+ align-content: stretch !important;
+ }
+ .align-self-xl-auto {
+ -ms-flex-item-align: auto !important;
+ align-self: auto !important;
+ }
+ .align-self-xl-start {
+ -ms-flex-item-align: start !important;
+ align-self: flex-start !important;
+ }
+ .align-self-xl-end {
+ -ms-flex-item-align: end !important;
+ align-self: flex-end !important;
+ }
+ .align-self-xl-center {
+ -ms-flex-item-align: center !important;
+ align-self: center !important;
+ }
+ .align-self-xl-baseline {
+ -ms-flex-item-align: baseline !important;
+ align-self: baseline !important;
+ }
+ .align-self-xl-stretch {
+ -ms-flex-item-align: stretch !important;
+ align-self: stretch !important;
+ }
+}
+
+/* Flex reset */
+
+.flex-reset {
+ -ms-flex: 0 1 auto !important;
+ flex: 0 1 auto !important;
+}
+@media (min-width: 577px) {
+ .flex-sm-reset {
+ -ms-flex: 0 1 auto !important;
+ flex: 0 1 auto !important;
+ }
+}
+@media (min-width: 769px) {
+ .flex-md-reset {
+ -ms-flex: 0 1 auto !important;
+ flex: 0 1 auto !important;
+ }
+}
+@media (min-width: 993px) {
+ .flex-lg-reset {
+ -ms-flex: 0 1 auto !important;
+ flex: 0 1 auto !important;
+ }
+}
+@media (min-width: 1201px) {
+ .flex-xl-reset {
+ -ms-flex: 0 1 auto !important;
+ flex: 0 1 auto !important;
+ }
+}
+
+
+/*
+-------------------------------------------------------------------------------
+29. Position utilities [hm-29]
+-------------------------------------------------------------------------------
+*/
+
+.position-static {
+ position: static !important;
+}
+.position-relative {
+ position: relative !important;
+}
+.position-absolute {
+ position: absolute !important;
+}
+.position-fixed {
+ position: fixed !important;
+}
+.position-sticky {
+ position: -webkit-sticky !important;
+ position: sticky !important;
+}
+.top-0 {
+ top: 0 !important;
+}
+.bottom-0 {
+ bottom: 0 !important;
+}
+.left-0 {
+ left: 0 !important;
+}
+.right-0 {
+ right: 0 !important;
+}
+.top-auto {
+ top: auto !important;
+}
+.bottom-auto {
+ bottom: auto !important;
+}
+.left-auto {
+ left: auto !important;
+}
+.right-auto {
+ right: auto !important;
+}
+@media (min-width: 577px) {
+ .position-sm-static {
+ position: static !important;
+ }
+ .position-sm-relative {
+ position: relative !important;
+ }
+ .position-sm-absolute {
+ position: absolute !important;
+ }
+ .position-sm-fixed {
+ position: fixed !important;
+ }
+ .position-sm-sticky {
+ position: -webkit-sticky !important;
+ position: sticky !important;
+ }
+ .top-sm-0 {
+ top: 0 !important;
+ }
+ .bottom-sm-0 {
+ bottom: 0 !important;
+ }
+ .left-sm-0 {
+ left: 0 !important;
+ }
+ .right-sm-0 {
+ right: 0 !important;
+ }
+ .top-sm-auto {
+ top: auto !important;
+ }
+ .bottom-sm-auto {
+ bottom: auto !important;
+ }
+ .left-sm-auto {
+ left: auto !important;
+ }
+ .right-sm-auto {
+ right: auto !important;
+ }
+}
+@media (min-width: 769px) {
+ .position-md-static {
+ position: static !important;
+ }
+ .position-md-relative {
+ position: relative !important;
+ }
+ .position-md-absolute {
+ position: absolute !important;
+ }
+ .position-md-fixed {
+ position: fixed !important;
+ }
+ .position-md-sticky {
+ position: -webkit-sticky !important;
+ position: sticky !important;
+ }
+ .top-md-0 {
+ top: 0 !important;
+ }
+ .bottom-md-0 {
+ bottom: 0 !important;
+ }
+ .left-md-0 {
+ left: 0 !important;
+ }
+ .right-md-0 {
+ right: 0 !important;
+ }
+ .top-md-auto {
+ top: auto !important;
+ }
+ .bottom-md-auto {
+ bottom: auto !important;
+ }
+ .left-md-auto {
+ left: auto !important;
+ }
+ .right-md-auto {
+ right: auto !important;
+ }
+}
+@media (min-width: 993px) {
+ .position-lg-static {
+ position: static !important;
+ }
+ .position-lg-relative {
+ position: relative !important;
+ }
+ .position-lg-absolute {
+ position: absolute !important;
+ }
+ .position-lg-fixed {
+ position: fixed !important;
+ }
+ .position-lg-sticky {
+ position: -webkit-sticky !important;
+ position: sticky !important;
+ }
+ .top-lg-0 {
+ top: 0 !important;
+ }
+ .bottom-lg-0 {
+ bottom: 0 !important;
+ }
+ .left-lg-0 {
+ left: 0 !important;
+ }
+ .right-lg-0 {
+ right: 0 !important;
+ }
+ .top-lg-auto {
+ top: auto !important;
+ }
+ .bottom-lg-auto {
+ bottom: auto !important;
+ }
+ .left-lg-auto {
+ left: auto !important;
+ }
+ .right-lg-auto {
+ right: auto !important;
+ }
+}
+@media (min-width: 1201px) {
+ .position-xl-static {
+ position: static !important;
+ }
+ .position-xl-relative {
+ position: relative !important;
+ }
+ .position-xl-absolute {
+ position: absolute !important;
+ }
+ .position-xl-fixed {
+ position: fixed !important;
+ }
+ .position-xl-sticky {
+ position: -webkit-sticky !important;
+ position: sticky !important;
+ }
+ .top-xl-0 {
+ top: 0 !important;
+ }
+ .bottom-xl-0 {
+ bottom: 0 !important;
+ }
+ .left-xl-0 {
+ left: 0 !important;
+ }
+ .right-xl-0 {
+ right: 0 !important;
+ }
+ .top-xl-auto {
+ top: auto !important;
+ }
+ .bottom-xl-auto {
+ bottom: auto !important;
+ }
+ .left-xl-auto {
+ left: auto !important;
+ }
+ .right-xl-auto {
+ right: auto !important;
+ }
+}
+
+
+/*
+-------------------------------------------------------------------------------
+30. Other utilities [hm-30]
+-------------------------------------------------------------------------------
+*/
+
+.clearfix::after {
+ display: block;
+ clear: both;
+ content: "";
+}
+
+/* Screen reader */
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+}
+.sr-only-focusable:active,
+.sr-only-focusable:focus {
+ position: static;
+ width: auto;
+ height: auto;
+ overflow: visible;
+ clip: auto;
+ white-space: normal;
+}
+
+/* Borders */
+
+.border {
+ border: 1px solid rgba(0, 0, 0, 0.2) !important;
+}
+.border-top {
+ border-top: 1px solid rgba(0, 0, 0, 0.2) !important;
+}
+.border-bottom {
+ border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
+}
+.border-left {
+ border-left: 1px solid rgba(0, 0, 0, 0.2) !important;
+}
+.border-right {
+ border-right: 1px solid rgba(0, 0, 0, 0.2) !important;
+}
+.dark-mode .border {
+ border: 1px solid rgba(255, 255, 255, 0.2) !important;
+}
+.dark-mode .border-top {
+ border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
+}
+.dark-mode .border-bottom {
+ border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
+}
+.dark-mode .border-left {
+ border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
+}
+.dark-mode .border-right {
+ border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
+}
+.border-0 {
+ border: none !important;
+}
+.border-top-0 {
+ border-top: none !important;
+}
+.border-bottom-0 {
+ border-bottom: none !important;
+}
+.border-left-0 {
+ border-left: none !important;
+}
+.border-right-0 {
+ border-right: none !important;
+}
+.rounded-0 {
+ border-radius: 0 !important;
+}
+.rounded {
+ border-radius: 0.4rem !important;
+}
+.rounded-top {
+ border-top-left-radius: 0.4rem !important;
+ border-top-right-radius: 0.4rem !important;
+}
+.rounded-bottom {
+ border-bottom-left-radius: 0.4rem !important;
+ border-bottom-right-radius: 0.4rem !important;
+}
+.rounded-left {
+ border-top-left-radius: 0.4rem !important;
+ border-bottom-left-radius: 0.4rem !important;
+}
+.rounded-right {
+ border-top-right-radius: 0.4rem !important;
+ border-bottom-right-radius: 0.4rem !important;
+}
+.rounded-circle {
+ border-radius: 50% !important;
+}
+.border-transparent {
+ border: 1px solid transparent !important;
+}
+.dark-mode .border-transparent {
+ border: 1px solid transparent !important;
+}
+.border-top-transparent {
+ border-top: 1px solid transparent !important;
+}
+.dark-mode .border-top-transparent {
+ border-top: 1px solid transparent !important;
+}
+.border-bottom-transparent {
+ border-bottom: 1px solid transparent !important;
+}
+.dark-mode .border-bottom-transparent {
+ border-bottom: 1px solid transparent !important;
+}
+.border-left-transparent {
+ border-left: 1px solid transparent !important;
+}
+.dark-mode .border-left-transparent {
+ border-left: 1px solid transparent !important;
+}
+.border-right-transparent {
+ border-right: 1px solid transparent !important;
+}
+.dark-mode .border-right-transparent {
+ border-right: 1px solid transparent !important;
+}
+
+/* Float */
+
+.float-left {
+ float: left !important;
+}
+.float-right {
+ float: right !important;
+}
+.float-none {
+ float: none !important;
+}
+@media (min-width: 577px) {
+ .float-sm-left {
+ float: left !important;
+ }
+ .float-sm-right {
+ float: right !important;
+ }
+ .float-sm-none {
+ float: none !important;
+ }
+}
+@media (min-width: 769px) {
+ .float-md-left {
+ float: left !important;
+ }
+ .float-md-right {
+ float: right !important;
+ }
+ .float-md-none {
+ float: none !important;
+ }
+}
+@media (min-width: 993px) {
+ .float-lg-left {
+ float: left !important;
+ }
+ .float-lg-right {
+ float: right !important;
+ }
+ .float-lg-none {
+ float: none !important;
+ }
+}
+@media (min-width: 1201px) {
+ .float-xl-left {
+ float: left !important;
+ }
+ .float-xl-right {
+ float: right !important;
+ }
+ .float-xl-none {
+ float: none !important;
+ }
+}
+
+/* Text */
+
+.text-monospace {
+ font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
+}
+.text-justify {
+ text-align: justify !important;
+}
+.text-wrap {
+ white-space: normal !important;
+}
+.text-nowrap {
+ white-space: nowrap !important;
+}
+.text-truncate {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.text-left {
+ text-align: left !important;
+}
+.text-right {
+ text-align: right !important;
+}
+.text-center {
+ text-align: center !important;
+}
+@media (min-width: 577px) {
+ .text-sm-left {
+ text-align: left !important;
+ }
+ .text-sm-right {
+ text-align: right !important;
+ }
+ .text-sm-center {
+ text-align: center !important;
+ }
+}
+@media (min-width: 769px) {
+ .text-md-left {
+ text-align: left !important;
+ }
+ .text-md-right {
+ text-align: right !important;
+ }
+ .text-md-center {
+ text-align: center !important;
+ }
+}
+@media (min-width: 993px) {
+ .text-lg-left {
+ text-align: left !important;
+ }
+ .text-lg-right {
+ text-align: right !important;
+ }
+ .text-lg-center {
+ text-align: center !important;
+ }
+}
+@media (min-width: 1201px) {
+ .text-xl-left {
+ text-align: left !important;
+ }
+ .text-xl-right {
+ text-align: right !important;
+ }
+ .text-xl-center {
+ text-align: center !important;
+ }
+}
+.text-lowercase {
+ text-transform: lowercase !important;
+}
+.text-uppercase {
+ text-transform: uppercase !important;
+}
+.text-capitalize {
+ text-transform: capitalize !important;
+}
+.font-italic {
+ font-style: italic !important;
+}
+.text-hide {
+ font: 0/0 a;
+ color: transparent;
+ text-shadow: none;
+ background-color: transparent;
+ border: 0;
+}
+.text-decoration-none {
+ text-decoration: none !important;
+}
+.text-decoration-underline {
+ text-decoration: underline !important;
+}
+.text-break {
+ word-wrap: break-word !important;
+}
+.text-reset {
+ color: inherit !important;
+}
+.text-extra-letter-spacing {
+ /* Improves readability in most cases */
+ letter-spacing: 0.03rem !important;
+}
+.text-extra-letter-spacing * {
+ /* Improves readability in most cases */
+ letter-spacing: 0.03rem !important;
+}
+.text-smoothing-antialiased,
+body:not(.dark-mode) .text-smoothing-antialiased-lm,
+.dark-mode .text-smoothing-antialiased-dm {
+ -webkit-font-smoothing: antialiased !important;
+ -moz-osx-font-smoothing: grayscale !important;
+}
+.text-smoothing-auto,
+body:not(.dark-mode) .text-smoothing-auto-lm,
+.dark-mode .text-smoothing-auto-dm {
+ -webkit-font-smoothing: auto !important;
+ -moz-osx-font-smoothing: auto !important;
+}
+
+/* Font sizes and weights */
+
+.font-size-12 {
+ font-size: 1.2rem !important;
+}
+.font-size-14 {
+ font-size: 1.4rem !important;
+}
+.font-size-16 {
+ font-size: 1.6rem !important;
+}
+.font-size-18 {
+ font-size: 1.8rem !important;
+}
+.font-size-20 {
+ font-size: 2rem !important;
+}
+.font-size-22 {
+ font-size: 2.2rem !important;
+}
+.font-size-24 {
+ font-size: 2.4rem !important;
+}
+.font-weight-light {
+ font-weight: 300 !important;
+}
+.font-weight-lighter {
+ font-weight: lighter !important;
+}
+.font-weight-normal {
+ font-weight: 400 !important;
+}
+.font-weight-medium {
+ font-weight: 500 !important;
+}
+.font-weight-semi-bold {
+ font-weight: 600 !important;
+}
+.font-weight-bold {
+ font-weight: 700 !important;
+}
+.font-weight-bolder {
+ font-weight: bolder !important;
+}
+
+/* Background colors */
+
+.bg-white {
+ background-color: #ffffff !important;
+}
+
+body:not(.dark-mode) .bg-white-lm {
+ background-color: #ffffff !important;
+}
+
+.dark-mode .bg-white-dm {
+ background-color: #ffffff !important;
+}
+.bg-light {
+ background-color: #ecf0f1 !important;
+}
+body:not(.dark-mode) .bg-light-lm {
+ background-color: #ecf0f1 !important;
+}
+.dark-mode .bg-light-dm {
+ background-color: #ecf0f1 !important;
+}
+.bg-transparent,
+body:not(.dark-mode) .bg-transparent-lm,
+.dark-mode .bg-transparent-dm {
+ background-color: transparent !important;
+}
+.bg-primary {
+ background-color: #1890ff !important;
+}
+body:not(.dark-mode) .bg-primary-lm {
+ background-color: #1890ff !important;
+}
+.dark-mode .bg-primary-dm {
+ background-color: #1890ff !important;
+}
+.bg-success {
+ background-color: #0be881 !important;
+}
+body:not(.dark-mode) .bg-success-lm {
+ background-color: #0be881 !important;
+}
+.dark-mode .bg-success-dm {
+ background-color: #0be881 !important;
+}
+.bg-secondary {
+ background-color: #ffcf00 !important;
+}
+body:not(.dark-mode) .bg-secondary-lm {
+ background-color: #ffcf00 !important;
+}
+.dark-mode .bg-secondary-dm {
+ background-color: #ffcf00 !important;
+}
+.bg-danger {
+ background-color: #ff4d4f !important;
+}
+body:not(.dark-mode) .bg-danger-lm {
+ background-color: #ff4d4f !important;
+}
+.dark-mode .bg-danger-dm {
+ background-color: #ff4d4f !important;
+}
+.bg-dark-light {
+ background-color: #25282c !important;
+}
+body:not(.dark-mode) .bg-dark-light-lm {
+ background-color: #25282c !important;
+}
+.dark-mode .bg-dark-light-dm {
+ background-color: #25282c !important;
+}
+.bg-dark {
+ background-color: #191c20 !important;
+}
+body:not(.dark-mode) .bg-dark-lm {
+ background-color: #191c20 !important;
+}
+.dark-mode .bg-dark-dm {
+ background-color: #191c20 !important;
+}
+.bg-very-dark {
+ background-color: #111417 !important;
+}
+body:not(.dark-mode) .bg-very-dark-lm {
+ background-color: #111417 !important;
+}
+.dark-mode .bg-very-dark-dm {
+ background-color: #111417 !important;
+}
+
+/* Text colors */
+
+/* Text white */
+
+.text-white,
+body:not(.dark-mode) .text-white-lm,
+.dark-mode .text-white-dm {
+ color: #ffffff !important;
+}
+
+/* Text muted */
+
+.text-muted {
+ color: rgba(0, 0, 0, 0.6) !important;
+}
+
+body:not(.dark-mode) .text-muted-lm {
+ color: rgba(0, 0, 0, 0.6) !important;
+}
+.dark-mode .text-muted {
+ color: rgba(255, 255, 255, 0.6) !important;
+}
+.dark-mode .text-muted-dm {
+ color: rgba(255, 255, 255, 0.6) !important;
+}
+
+/* Text primary */
+
+.text-primary {
+ color: #1890ff !important;
+}
+
+body:not(.dark-mode) .text-primary-lm {
+ color: #1890ff !important;
+}
+
+.dark-mode .text-primary-dm {
+ color: #1890ff !important;
+}
+a.text-primary:hover {
+ color: #45a3fb !important;
+}
+a.text-primary:focus {
+ color: #45a3fb !important;
+}
+body:not(.dark-mode) a.text-primary-lm:hover {
+ color: #45a3fb !important;
+}
+body:not(.dark-mode) a.text-primary-lm:focus {
+ color: #45a3fb !important;
+}
+.dark-mode a.text-primary-dm:hover {
+ color: #45a3fb !important;
+}
+.dark-mode a.text-primary-dm:focus {
+ color: #45a3fb !important;
+}
+
+/* Text success */
+
+.text-success {
+ color: #0be881 !important;
+}
+
+body:not(.dark-mode) .text-success-lm {
+ color: #0be881 !important;
+}
+
+.dark-mode .text-success-dm {
+ color: #0be881 !important;
+}
+a.text-success:hover {
+ color: #81eea8 !important;
+}
+a.text-success:focus {
+ color: #81eea8 !important;
+}
+body:not(.dark-mode) a.text-success-lm:hover {
+ color: #81eea8 !important;
+}
+body:not(.dark-mode) a.text-success-lm:focus {
+ color: #81eea8 !important;
+}
+.dark-mode a.text-success-dm:hover {
+ color: #81eea8 !important;
+}
+.dark-mode a.text-success-dm:focus {
+ color: #81eea8 !important;
+}
+
+/* Text secondary */
+
+.text-secondary {
+ color: #ffcf00 !important;
+}
+
+body:not(.dark-mode) .text-secondary-lm {
+ color: #ffcf00 !important;
+}
+
+.dark-mode .text-secondary-dm {
+ color: #ffcf00 !important;
+}
+a.text-secondary:hover {
+ color: #ffe04d !important;
+}
+a.text-secondary:focus {
+ color: #ffe04d !important;
+}
+body:not(.dark-mode) a.text-secondary-lm:hover {
+ color: #ffe04d !important;
+}
+body:not(.dark-mode) a.text-secondary-lm:focus {
+ color: #ffe04d !important;
+}
+.dark-mode a.text-secondary-dm:hover {
+ color: #ffe04d !important;
+}
+.dark-mode a.text-secondary-dm:focus {
+ color: #ffe04d !important;
+}
+
+/* Text danger */
+
+.text-danger {
+ color: #ff4d4f !important;
+}
+
+body:not(.dark-mode) .text-danger-lm {
+ color: #ff4d4f !important;
+}
+
+.dark-mode .text-danger-dm {
+ color: #ff4d4f !important;
+}
+a.text-danger:hover {
+ color: #ed586c !important;
+}
+a.text-danger:focus {
+ color: #ed586c !important;
+}
+body:not(.dark-mode) a.text-danger-lm:hover {
+ color: #ed586c !important;
+}
+body:not(.dark-mode) a.text-danger-lm:focus {
+ color: #ed586c !important;
+}
+.dark-mode a.text-danger-dm:hover {
+ color: #ed586c !important;
+}
+.dark-mode a.text-danger-dm:focus {
+ color: #ed586c !important;
+}
+
+/* Text light */
+
+.text-light {
+ color: rgba(255, 255, 255, 0.8) !important;
+}
+
+body:not(.dark-mode) .text-light-lm {
+ color: rgba(255, 255, 255, 0.8) !important;
+}
+
+.dark-mode .text-light-dm {
+ color: rgba(255, 255, 255, 0.8) !important;
+}
+a.text-light:hover {
+ color: rgba(255, 255, 255, 0.65) !important;
+}
+a.text-light:focus {
+ color: rgba(255, 255, 255, 0.65) !important;
+}
+body:not(.dark-mode) a.text-light-lm:hover {
+ color: rgba(255, 255, 255, 0.65) !important;
+}
+body:not(.dark-mode) a.text-light-lm:focus {
+ color: rgba(255, 255, 255, 0.65) !important;
+}
+.dark-mode a.text-light-dm:hover {
+ color: rgba(255, 255, 255, 0.65) !important;
+}
+.dark-mode a.text-light-dm:focus {
+ color: rgba(255, 255, 255, 0.65) !important;
+}
+
+/* Text light */
+
+.text-dark {
+ color: rgba(0, 0, 0, 0.85) !important;
+}
+
+body:not(.dark-mode) .text-dark-lm {
+ color: rgba(0, 0, 0, 0.85) !important;
+}
+
+.dark-mode .text-dark-dm {
+ color: rgba(0, 0, 0, 0.85) !important;
+}
+a.text-dark:hover {
+ color: rgba(0, 0, 0, 0.7) !important;
+}
+a.text-dark:focus {
+ color: rgba(0, 0, 0, 0.7) !important;
+}
+body:not(.dark-mode) a.text-dark-lm:hover {
+ color: rgba(0, 0, 0, 0.7) !important;
+}
+body:not(.dark-mode) a.text-dark-lm:focus {
+ color: rgba(0, 0, 0, 0.7) !important;
+}
+.dark-mode a.text-dark-dm:hover {
+ color: rgba(0, 0, 0, 0.7) !important;
+}
+.dark-mode a.text-dark-dm:focus {
+ color: rgba(0, 0, 0, 0.7) !important;
+}
+
+/* Overflow utilities */
+
+.overflow-hidden {
+ overflow: hidden !important;
+}
+.overflow-x-hidden {
+ overflow-x: hidden !important;
+}
+.overflow-y-hidden {
+ overflow-y: hidden !important;
+}
+.overflow-auto {
+ overflow: auto !important;
+}
+.overflow-x-auto {
+ overflow-x: auto !important;
+}
+.overflow-y-auto {
+ overflow-y: auto !important;
+}
+.overflow-scroll {
+ overflow: scroll !important;
+}
+.overflow-x-scroll {
+ overflow-x: scroll !important;
+}
+.overflow-y-scroll {
+ overflow-y: scroll !important;
+}
+@media (min-width: 577px) {
+ .overflow-sm-hidden {
+ overflow: hidden !important;
+ }
+ .overflow-x-sm-hidden {
+ overflow-x: hidden !important;
+ }
+ .overflow-y-sm-hidden {
+ overflow-y: hidden !important;
+ }
+ .overflow-sm-auto {
+ overflow: auto !important;
+ }
+ .overflow-x-sm-auto {
+ overflow-x: auto !important;
+ }
+ .overflow-y-sm-auto {
+ overflow-y: auto !important;
+ }
+ .overflow-sm-scroll {
+ overflow: scroll !important;
+ }
+ .overflow-x-sm-scroll {
+ overflow-x: scroll !important;
+ }
+ .overflow-y-sm-scroll {
+ overflow-y: scroll !important;
+ }
+}
+@media (min-width: 769px) {
+ .overflow-md-hidden {
+ overflow: hidden !important;
+ }
+ .overflow-x-md-hidden {
+ overflow-x: hidden !important;
+ }
+ .overflow-y-md-hidden {
+ overflow-y: hidden !important;
+ }
+ .overflow-md-auto {
+ overflow: auto !important;
+ }
+ .overflow-x-md-auto {
+ overflow-x: auto !important;
+ }
+ .overflow-y-md-auto {
+ overflow-y: auto !important;
+ }
+ .overflow-md-scroll {
+ overflow: scroll !important;
+ }
+ .overflow-x-md-scroll {
+ overflow-x: scroll !important;
+ }
+ .overflow-y-md-scroll {
+ overflow-y: scroll !important;
+ }
+}
+@media (min-width: 993px) {
+ .overflow-lg-hidden {
+ overflow: hidden !important;
+ }
+ .overflow-x-lg-hidden {
+ overflow-x: hidden !important;
+ }
+ .overflow-y-lg-hidden {
+ overflow-y: hidden !important;
+ }
+ .overflow-lg-auto {
+ overflow: auto !important;
+ }
+ .overflow-x-lg-auto {
+ overflow-x: auto !important;
+ }
+ .overflow-y-lg-auto {
+ overflow-y: auto !important;
+ }
+ .overflow-lg-scroll {
+ overflow: scroll !important;
+ }
+ .overflow-x-lg-scroll {
+ overflow-x: scroll !important;
+ }
+ .overflow-y-lg-scroll {
+ overflow-y: scroll !important;
+ }
+}
+@media (min-width: 1201px) {
+ .overflow-xl-hidden {
+ overflow: hidden !important;
+ }
+ .overflow-x-xl-hidden {
+ overflow-x: hidden !important;
+ }
+ .overflow-y-xl-hidden {
+ overflow-y: hidden !important;
+ }
+ .overflow-xl-auto {
+ overflow: auto !important;
+ }
+ .overflow-x-xl-auto {
+ overflow-x: auto !important;
+ }
+ .overflow-y-xl-auto {
+ overflow-y: auto !important;
+ }
+ .overflow-xl-scroll {
+ overflow: scroll !important;
+ }
+ .overflow-x-xl-scroll {
+ overflow-x: scroll !important;
+ }
+ .overflow-y-xl-scroll {
+ overflow-y: scroll !important;
+ }
+}
+
+/* Visibility utilities */
+
+.visible {
+ visibility: visible !important;
+}
+.invisible {
+ visibility: hidden !important;
+}
+body:not(.dark-mode) .visible-lm {
+ visibility: visible !important;
+}
+body:not(.dark-mode) .invisible-lm {
+ visibility: hidden !important;
+}
+.dark-mode .visible-dm {
+ visibility: visible !important;
+}
+.dark-mode .invisible-dm {
+ visibility: hidden !important;
+}
+
+/* Vertical align utilities */
+
+.align-baseline {
+ vertical-align: baseline !important;
+}
+.align-top {
+ vertical-align: top !important;
+}
+.align-middle {
+ vertical-align: middle !important;
+}
+.align-bottom {
+ vertical-align: bottom !important;
+}
+.align-text-bottom {
+ vertical-align: text-bottom !important;
+}
+.align-text-top {
+ vertical-align: text-top !important;
+}
+
+/* Z-index utilities */
+
+.z-0 {
+ z-index: 0 !important;
+}
+.z-10 {
+ z-index: 10 !important;
+}
+.z-20 {
+ z-index: 20 !important;
+}
+.z-30 {
+ z-index: 30 !important;
+}
+.z-40 {
+ z-index: 40 !important;
+}
+.z-50 {
+ z-index: 50 !important;
+}
+.z-auto {
+ z-index: auto !important;
+}
+@media (min-width: 577px) {
+ .z-sm-0 {
+ z-index: 0 !important;
+ }
+ .z-sm-10 {
+ z-index: 10 !important;
+ }
+ .z-sm-20 {
+ z-index: 20 !important;
+ }
+ .z-sm-30 {
+ z-index: 30 !important;
+ }
+ .z-sm-40 {
+ z-index: 40 !important;
+ }
+ .z-sm-50 {
+ z-index: 50 !important;
+ }
+ .z-sm-auto {
+ z-index: auto !important;
+ }
+}
+@media (min-width: 769px) {
+ .z-md-0 {
+ z-index: 0 !important;
+ }
+ .z-md-10 {
+ z-index: 10 !important;
+ }
+ .z-md-20 {
+ z-index: 20 !important;
+ }
+ .z-md-30 {
+ z-index: 30 !important;
+ }
+ .z-md-40 {
+ z-index: 40 !important;
+ }
+ .z-md-50 {
+ z-index: 50 !important;
+ }
+ .z-md-auto {
+ z-index: auto !important;
+ }
+}
+@media (min-width: 993px) {
+ .z-lg-0 {
+ z-index: 0 !important;
+ }
+ .z-lg-10 {
+ z-index: 10 !important;
+ }
+ .z-lg-20 {
+ z-index: 20 !important;
+ }
+ .z-lg-30 {
+ z-index: 30 !important;
+ }
+ .z-lg-40 {
+ z-index: 40 !important;
+ }
+ .z-lg-50 {
+ z-index: 50 !important;
+ }
+ .z-lg-auto {
+ z-index: auto !important;
+ }
+}
+@media (min-width: 1201px) {
+ .z-xl-0 {
+ z-index: 0 !important;
+ }
+ .z-xl-10 {
+ z-index: 10 !important;
+ }
+ .z-xl-20 {
+ z-index: 20 !important;
+ }
+ .z-xl-30 {
+ z-index: 30 !important;
+ }
+ .z-xl-40 {
+ z-index: 40 !important;
+ }
+ .z-xl-50 {
+ z-index: 50 !important;
+ }
+ .z-xl-auto {
+ z-index: auto !important;
+ }
+}
+
+/* Box shadow utilities */
+
+.shadow-none {
+ -moz-box-shadow: none !important;
+ -webkit-box-shadow: none !important;
+ box-shadow: none !important;
+}
+.shadow-sm {
+ -moz-box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.15) !important;
+ -webkit-box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.15) !important;
+ box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.15) !important;
+}
+.dark-mode .shadow-sm {
+ -moz-box-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.4) !important;
+ -webkit-box-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.4) !important;
+ box-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.4) !important;
+}
+.shadow {
+ -moz-box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.15) !important;
+ -webkit-box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.15) !important;
+ box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.15) !important;
+}
+.dark-mode .shadow {
+ -moz-box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.4) !important;
+ -webkit-box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.4) !important;
+ box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.4) !important;
+}
+.shadow-lg {
+ -moz-box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.15) !important;
+ -webkit-box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.15) !important;
+ box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.15) !important;
+}
+.dark-mode .shadow-lg {
+ -moz-box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.4) !important;
+ -webkit-box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.4) !important;
+ box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.4) !important;
+}
+
+/* Pointer events utilities */
+
+.pointer-events-auto {
+ pointer-events: auto !important;
+}
+.pointer-events-none {
+ pointer-events: none !important;
+}
\ No newline at end of file
diff --git a/web/public/assets/js/common.js b/web/public/assets/js/common.js
index 03d0d30..44a5f5f 100644
--- a/web/public/assets/js/common.js
+++ b/web/public/assets/js/common.js
@@ -7,3 +7,12 @@ function gid(id)
{
return document.getElementById(id);
}
+
+function toastErorrAlert(errorMsg) {
+ halfmoon.initStickyAlert({
+ content: errorMsg || "Unknown error",
+ title: "Error",
+ alertType: "alert-danger",
+ fillType: "filled-lm"
+ });
+}
diff --git a/web/public/assets/js/cropo.js b/web/public/assets/js/cropo.js
new file mode 100644
index 0000000..3a980f0
--- /dev/null
+++ b/web/public/assets/js/cropo.js
@@ -0,0 +1,173 @@
+class i {
+ constructor(i3) {
+ this.slider = void 0, this.canvas = void 0, this.canvasContext = void 0, this.canvasWidth = 0, this.canvasHeight = 0, this.fit = true, this.img = void 0, this.imgHeight = void 0, this.imgWidth = void 0, this.scale = void 0, this.baseScale = 1, this.maxScale = 5, this.minScale = 1, this.originalWidth = void 0, this.originalHeight = void 0, this.ratio = void 0, this.isDown = void 0, this.pointerX = void 0, this.pointerY = void 0, this.netPanningX = void 0, this.netPanningY = void 0, this.originX = void 0, this.originY = void 0, this.eventCache = void 0, this.prevDiff = void 0, this.onResize = this.debounce(() => {
+ if (!this.img)
+ return;
+ const i4 = this.canvas.offsetWidth - this.canvasWidth, t2 = this.canvas.offsetHeight - this.canvasHeight;
+ this.canvasWidth = this.canvas.width = this.canvas.offsetWidth, this.canvasHeight = this.canvas.height = this.canvas.offsetHeight, this.fit && this.imgWidth < this.canvasWidth ? (this.netPanningX = 0, this.onImageLoad()) : this.fit && this.imgHeight < this.canvasHeight ? (this.netPanningY = 0, this.onImageLoad()) : (this.netPanningX += i4 / 2, this.netPanningY += t2 / 2, this.originalWidth = this.canvasWidth, this.originalHeight = this.canvasWidth * this.ratio, this.draw()), this.fixScale();
+ }, 300), this.baseScale = (i3 == null ? void 0 : i3.baseScale) || this.baseScale, this.maxScale = (i3 == null ? void 0 : i3.maxScale) || this.maxScale, this.minScale = (i3 == null ? void 0 : i3.minScale) || this.minScale, this.loadCanvas((i3 == null ? void 0 : i3.canvas) || document.createElement("canvas"), i3 == null ? void 0 : i3.width, i3 == null ? void 0 : i3.height), (i3 == null ? void 0 : i3.rangeInput) && this.loadSlider(i3.rangeInput), i3 != null && i3.imageUrl && this.loadImageFromUrl(i3 == null ? void 0 : i3.imageUrl, i3 == null ? void 0 : i3.fit, () => {
+ this.move((i3 == null ? void 0 : i3.x) || 0, (i3 == null ? void 0 : i3.y) || 0), i3 == null || i3.onImageLoad == null || i3.onImageLoad();
+ });
+ }
+ clamp(i3, t2, h2) {
+ return Math.max(t2, Math.min(i3, h2));
+ }
+ debounce(i3, t2) {
+ let h2;
+ return (...s2) => {
+ clearTimeout(h2), h2 = setTimeout(() => {
+ i3(...s2);
+ }, t2);
+ };
+ }
+ initPointerAndZoom() {
+ this.isDown = false, this.netPanningX = 0, this.netPanningY = 0, this.eventCache = [], this.prevDiff = -1, this.slider && (this.slider.value = String(this.baseScale));
+ }
+ draw() {
+ var i3, t2;
+ this.img && ((i3 = this.canvasContext) == null || i3.clearRect(0, 0, this.canvasWidth, this.canvasHeight), (t2 = this.canvasContext) == null || t2.drawImage(this.img, this.netPanningX, this.netPanningY, this.imgWidth, this.imgHeight));
+ }
+ fixScale() {
+ this.scale = this.fit ? Math.min(this.imgWidth / this.canvasWidth, this.imgHeight / this.canvasHeight) || this.baseScale : Math.min(this.imgWidth / this.originalWidth, this.imgHeight / this.originalHeight) || this.baseScale, this.slider && (this.slider.value = String(this.scale));
+ }
+ onImageLoad() {
+ this.fit && (this.scale = Math.max(this.canvasHeight / this.imgHeight, this.canvasWidth / this.imgWidth), this.imgHeight *= this.scale, this.imgWidth *= this.scale), this.pointerX = this.pointerY = 0, this.originalWidth = this.imgWidth, this.originalHeight = this.imgHeight, this.ratio = this.originalHeight / this.originalWidth, this.draw();
+ }
+ getPointerAverage() {
+ let i3 = 0, t2 = 0;
+ for (let h2 = 0; h2 < this.eventCache.length; h2++)
+ i3 += this.eventCache[h2].offsetX, t2 += this.eventCache[h2].offsetY;
+ return i3 /= this.eventCache.length, t2 /= this.eventCache.length, [i3, t2];
+ }
+ calcOrigin(i3, t2) {
+ this.originX = (-this.netPanningX + i3) / this.imgWidth, this.originY = (-this.netPanningY + t2) / this.imgHeight;
+ }
+ move(i3, t2) {
+ const h2 = i3 - this.pointerX, s2 = t2 - this.pointerY;
+ this.pointerX = i3, this.pointerY = t2, this.netPanningX = this.fit ? this.clamp(this.netPanningX + h2, this.canvasWidth - this.imgWidth, 0) : this.netPanningX + h2, this.netPanningY = this.fit ? this.clamp(this.netPanningY + s2, this.canvasHeight - this.imgHeight, 0) : this.netPanningY + s2;
+ }
+ drawZoom(i3, t2) {
+ this.netPanningX = this.fit ? this.clamp(this.netPanningX - i3 * this.originX, this.canvasWidth - this.imgWidth, 0) : this.netPanningX - i3 * this.originX, this.netPanningY = this.fit ? this.clamp(this.netPanningY - t2 * this.originY, this.canvasHeight - this.imgHeight, 0) : this.netPanningY - t2 * this.originY;
+ }
+ zoomDelta(i3, t2) {
+ const h2 = this.imgWidth + i3;
+ h2 < this.originalWidth || this.imgHeight + t2 < this.originalHeight || h2 / this.originalWidth > this.maxScale || h2 / this.originalWidth < this.minScale || (this.slider && (this.slider.value = String(this.scale = h2 / this.originalWidth)), this.imgWidth = h2, this.imgHeight += t2, this.drawZoom(i3, t2));
+ }
+ zoomScale(i3) {
+ if (i3 > this.maxScale || i3 < this.minScale)
+ return;
+ this.prevDiff = -1;
+ let t2 = this.imgWidth, h2 = this.imgHeight;
+ this.imgWidth = this.originalWidth * i3, this.imgHeight = this.originalHeight * i3, t2 -= this.imgWidth, h2 -= this.imgHeight, this.calcOrigin(this.canvasWidth / 2, this.canvasHeight / 2), this.drawZoom(-t2, -h2);
+ }
+ pinch() {
+ if (this.eventCache.length === 2) {
+ const i3 = Math.hypot(this.eventCache[0].offsetX - this.eventCache[1].offsetX, this.eventCache[0].offsetY - this.eventCache[1].offsetY);
+ if (this.prevDiff > 0) {
+ const t2 = i3 - this.prevDiff;
+ this.zoomDelta(t2, t2 * this.ratio);
+ }
+ this.prevDiff = i3;
+ }
+ }
+ onSliderMove(i3) {
+ this.scale = +i3.target.value, this.zoomScale(this.scale), this.draw();
+ }
+ onPointerdown(i3) {
+ this.img && (this.eventCache.push(i3), [this.pointerX, this.pointerY] = this.getPointerAverage(), this.isDown = true);
+ }
+ onPointerUp(i3) {
+ this.isDown && (this.eventCache = this.eventCache.filter((t2) => t2.pointerId !== i3.pointerId), this.eventCache.length < 2 && (this.prevDiff = -1), [this.pointerX, this.pointerY] = this.getPointerAverage(), this.eventCache.length === 0 && (this.isDown = false));
+ }
+ onPointermove(i3) {
+ if (!this.isDown)
+ return;
+ for (let t3 = 0; t3 < this.eventCache.length; t3++)
+ if (i3.pointerId === this.eventCache[t3].pointerId) {
+ this.eventCache[t3] = i3;
+ break;
+ }
+ const [t2, h2] = this.getPointerAverage();
+ this.move(t2, h2), this.pinch(), this.calcOrigin(this.canvasWidth / 2, this.canvasHeight / 2), this.draw();
+ }
+ prevent(i3) {
+ i3.preventDefault(), i3.stopPropagation();
+ }
+ leadListeners() {
+ this.canvas.addEventListener("pointerdown", (i3) => {
+ this.prevent(i3), this.onPointerdown(i3);
+ }), this.canvas.addEventListener("pointermove", (i3) => {
+ this.prevent(i3), this.onPointermove(i3);
+ }), this.canvas.addEventListener("pointerout", (i3) => {
+ this.prevent(i3), this.onPointerUp(i3);
+ }), this.canvas.addEventListener("pointerup", (i3) => {
+ this.prevent(i3), this.onPointerUp(i3);
+ }), this.canvas.addEventListener("pointercancel", (i3) => {
+ this.prevent(i3), this.onPointerUp(i3);
+ }), this.canvas.addEventListener("pointerleave", (i3) => {
+ this.prevent(i3), this.onPointerUp(i3);
+ }), new ResizeObserver(this.onResize).observe(this.canvas);
+ }
+ loadSlider(i3) {
+ this.slider = i3, this.slider.value = String(this.scale || this.baseScale), this.slider.addEventListener("input", (i4) => {
+ this.prevent(i4), this.onSliderMove(i4);
+ });
+ }
+ loadCanvas(i3, t2, h2) {
+ this.canvas = i3, this.canvasContext = this.canvas.getContext("2d"), this.canvasWidth = this.canvas.width = t2 || this.canvas.offsetWidth, this.canvasHeight = this.canvas.height = h2 || this.canvas.offsetHeight, this.leadListeners();
+ }
+ loadImageFromUrl(i3, t2 = true, h2) {
+ if (!this.canvas)
+ throw Error("first call loadCanvas");
+ this.fit = t2, this.img = new Image(), this.img.onload = () => {
+ this.initPointerAndZoom(), this.imgHeight = this.img.naturalHeight, this.imgWidth = this.img.naturalWidth, this.onImageLoad(), h2 == null || h2();
+ }, this.img.src = i3;
+ }
+ getCanvas(i3) {
+ if (!this.img)
+ throw Error("please set an image");
+ const t2 = document.createElement("canvas");
+ return t2.width = this.canvasWidth * i3, t2.height = this.canvasHeight * i3, t2.getContext("2d").drawImage(this.img, this.netPanningX * i3, this.netPanningY * i3, this.imgWidth * i3, this.imgHeight * i3), t2;
+ }
+ getBlob(i3 = 1) {
+ return new Promise((t2) => {
+ this.getCanvas(i3).toBlob((i4) => {
+ t2(i4);
+ });
+ });
+ }
+ getDataUrl(i3 = 1) {
+ return this.getCanvas(i3).toDataURL();
+ }
+ download(i3 = 1) {
+ const t2 = document.createElement("a");
+ t2.download = "canvas.png", t2.href = this.getDataUrl(i3), t2.click();
+ }
+ getCropInfo() {
+ return {originalWidth: this.img.naturalWidth, originalHeight: this.img.naturalHeight, imgWidth: this.imgWidth, imgHeight: this.imgHeight, x: this.netPanningX, y: this.netPanningY};
+ }
+}
+const t = new i({});
+function h(...i2) {
+ t.download(...i2);
+}
+function s(...i2) {
+ t.loadCanvas(...i2);
+}
+function e(...i2) {
+ t.loadImageFromUrl(...i2);
+}
+function n(...i2) {
+ t.loadSlider(...i2);
+}
+function a(...i2) {
+ t.move(...i2);
+}
+function o(...i2) {
+ t.getCropInfo(...i2);
+}
+function g(...i2) {
+ t.getDataUrl(...i2);
+}
+export {i as Cropo, h as download, o as getCropInfo, g as getDataUrl, s as loadCanvas, e as loadImageFromUrl, n as loadSlider, a as move};
+export default null;
diff --git a/web/public/assets/js/halfmoon.js b/web/public/assets/js/halfmoon.js
new file mode 100644
index 0000000..4f1b25f
--- /dev/null
+++ b/web/public/assets/js/halfmoon.js
@@ -0,0 +1,511 @@
+/*
+* -----------------------------------------------------------------------------
+* Halfmoon JS
+* Version: 1.1.1
+* https://www.gethalfmoon.com
+* Copyright, Halfmoon UI
+* Licensed under MIT (https://www.gethalfmoon.com/license)
+* -----------------------------------------------------------------------------
+* The above notice must be included in its entirety when this file is used.
+*/
+
+/* Start polyfills */
+
+// Polyfill for Element.matches()
+if (!Element.prototype.matches) {
+ Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+}
+
+// Polyfill for Element.closest()
+if (!Element.prototype.closest) {
+ Element.prototype.closest = function(s) {
+ var el = this;
+ do {
+ if (el.matches(s)) return el;
+ el = el.parentElement || el.parentNode;
+ } while (el !== null && el.nodeType === 1);
+ return null;
+ };
+}
+
+// Polyfill for Element.classList (http://purl.eligrey.com/github/classList.js/blob/master/classList.js)
+"document"in self&&("classList"in document.createElement("_")&&(!document.createElementNS||"classList"in document.createElementNS("http://www.w3.org/2000/svg","g"))||!function(t){"use strict";if("Element"in t){var e="classList",n="prototype",i=t.Element[n],s=Object,r=String[n].trim||function(){return this.replace(/^\s+|\s+$/g,"")},o=Array[n].indexOf||function(t){for(var e=0,n=this.length;n>e;e++)if(e in this&&this[e]===t)return e;return-1},c=function(t,e){this.name=t,this.code=DOMException[t],this.message=e},a=function(t,e){if(""===e)throw new c("SYNTAX_ERR","The token must not be empty.");if(/\s/.test(e))throw new c("INVALID_CHARACTER_ERR","The token must not contain space characters.");return o.call(t,e)},l=function(t){for(var e=r.call(t.getAttribute("class")||""),n=e?e.split(/\s+/):[],i=0,s=n.length;s>i;i++)this.push(n[i]);this._updateClassName=function(){t.setAttribute("class",this.toString())}},u=l[n]=[],h=function(){return new l(this)};if(c[n]=Error[n],u.item=function(t){return this[t]||null},u.contains=function(t){return~a(this,t+"")},u.add=function(){var t,e=arguments,n=0,i=e.length,s=!1;do t=e[n]+"",~a(this,t)||(this.push(t),s=!0);while(++n<i);s&&this._updateClassName()},u.remove=function(){var t,e,n=arguments,i=0,s=n.length,r=!1;do for(t=n[i]+"",e=a(this,t);~e;)this.splice(e,1),r=!0,e=a(this,t);while(++i<s);r&&this._updateClassName()},u.toggle=function(t,e){var n=this.contains(t),i=n?e!==!0&&"remove":e!==!1&&"add";return i&&this[i](t),e===!0||e===!1?e:!n},u.replace=function(t,e){var n=a(t+"");~n&&(this.splice(n,1,e),this._updateClassName())},u.toString=function(){return this.join(" ")},s.defineProperty){var f={get:h,enumerable:!0,configurable:!0};try{s.defineProperty(i,e,f)}catch(p){void 0!==p.number&&-2146823252!==p.number||(f.enumerable=!1,s.defineProperty(i,e,f))}}else s[n].__defineGetter__&&i.__defineGetter__(e,h)}}(self),function(){"use strict";var t=document.createElement("_");if(t.classList.add("c1","c2"),!t.classList.contains("c2")){var e=function(t){var e=DOMTokenList.prototype[t];DOMTokenList.prototype[t]=function(t){var n,i=arguments.length;for(n=0;i>n;n++)t=arguments[n],e.call(this,t)}};e("add"),e("remove")}if(t.classList.toggle("c3",!1),t.classList.contains("c3")){var n=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(t,e){return 1 in arguments&&!this.contains(t)==!e?e:n.call(this,t)}}"replace"in document.createElement("_").classList||(DOMTokenList.prototype.replace=function(t,e){var n=this.toString().split(" "),i=n.indexOf(t+"");~i&&(n=n.slice(i),this.remove.apply(this,n),this.add(e),this.add.apply(this,n.slice(1)))}),t=null}());
+
+/* End polyfills */
+
+
+/* Halfmoon JS core */
+
+var halfmoon = {
+ // Getting the required elements
+ // Re-initialized once the DOM is loaded (to avoid issues with virtual DOM)
+ pageWrapper: document.getElementsByClassName("page-wrapper")[0],
+ stickyAlerts: document.getElementsByClassName("sticky-alerts")[0],
+
+ darkModeOn: false, // Also re-initialized once the DOM is loaded (see below)
+
+ // Create cookie
+ createCookie: function(name, value, days) {
+ var expires;
+ if (days) {
+ var date = new Date();
+ date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+ expires = "; expires=" + date.toGMTString();
+ }
+ else {
+ expires = "";
+ }
+ document.cookie = name + "=" + value + expires + "; path=/";
+ },
+
+ // Read cookie
+ readCookie: function(name) {
+ var nameEQ = name + "=";
+ var ca = document.cookie.split(";");
+ for(var i=0; i < ca.length; i++) {
+ var c = ca[i];
+ while (c.charAt(0) === " ") {
+ c = c.substring(1, c.length);
+ }
+ if (c.indexOf(nameEQ) === 0) {
+ return c.substring(nameEQ.length,c.length);
+ }
+ }
+ return null;
+ },
+
+ // Erase cookie
+ eraseCookie: function(name) {
+ this.createCookie(name, "", -1);
+ },
+
+ // Toggle light/dark mode
+ toggleDarkMode: function() {
+ if (document.body.classList.contains("dark-mode")) {
+ document.body.classList.remove("dark-mode");
+ this.darkModeOn = false;
+ this.createCookie("halfmoon_preferredMode", "light-mode", 365);
+ } else {
+ document.body.classList.add("dark-mode");
+ this.darkModeOn = true;
+ this.createCookie("halfmoon_preferredMode", "dark-mode", 365);
+ }
+ },
+
+ // Get preferred mode
+ getPreferredMode: function() {
+ if (this.readCookie("halfmoon_preferredMode")) {
+ return this.readCookie("halfmoon_preferredMode");
+ } else {
+ return "not-set";
+ }
+ },
+
+ // Toggles sidebar
+ toggleSidebar: function() {
+ if (this.pageWrapper) {
+ if (this.pageWrapper.getAttribute("data-sidebar-hidden")) {
+ this.pageWrapper.removeAttribute("data-sidebar-hidden");
+ } else {
+ this.pageWrapper.setAttribute("data-sidebar-hidden", "hidden");
+ }
+ }
+ },
+
+ // Deactivate all the dropdown toggles when another one is active
+ deactivateAllDropdownToggles: function() {
+ var activeDropdownToggles = document.querySelectorAll("[data-toggle='dropdown'].active");
+ for (var i = 0; i < activeDropdownToggles.length; i++) {
+ activeDropdownToggles[i].classList.remove("active");
+ activeDropdownToggles[i].closest(".dropdown").classList.remove("show");
+ }
+ },
+
+ // Toggle modal (using Javascript)
+ toggleModal: function(modalId) {
+ var modal = document.getElementById(modalId);
+
+ if (modal) {
+ modal.classList.toggle("show");
+ }
+ },
+
+ /* Code block for handling sticky alerts */
+
+ // Make an ID for an element
+ makeId: function(length) {
+ var result = "";
+ var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+ var charactersLength = characters.length;
+ for ( var i = 0; i < length; i++ ) {
+ result += characters.charAt(Math.floor(Math.random() * charactersLength));
+ }
+ return result;
+ },
+
+ // Toast an alert (show, fade, dispose)
+ toastAlert: function(alertId, timeShown) {
+ var alertElement = document.getElementById(alertId);
+
+ // Setting the default timeShown
+ if (timeShown === undefined) {
+ timeShown = 5000;
+ }
+
+ // Alert is only toasted if it does not have the .show class
+ if (!alertElement.classList.contains("show")) {
+ // Add .alert-block class if it does not exist
+ if (!alertElement.classList.contains("alert-block")) {
+ alertElement.classList.add("alert-block");
+ }
+
+ // Show the alert
+ // The 0.25 seconds delay is for the animation
+ setTimeout(function() {
+ alertElement.classList.add("show");
+ }, 250);
+
+ // Wait some time (timeShown + 250) and fade out the alert
+ var timeToFade = timeShown + 250;
+ setTimeout(function() {
+ alertElement.classList.add("fade");
+ }, timeToFade);
+
+ // Wait some more time (timeToFade + 500) and dispose the alert (by removing the .alert-block class)
+ // Again, the extra delay is for the animation
+ // Remove the .show and .fade classes (so the alert can be toasted again)
+ var timeToDestroy = timeToFade + 500;
+ setTimeout(function() {
+ alertElement.classList.remove("alert-block");
+ alertElement.classList.remove("show");
+ alertElement.classList.remove("fade");
+ }, timeToDestroy);
+ }
+ },
+
+ // Create a sticky alert, display it, and then remove it
+ initStickyAlert: function(param) {
+ // Setting the variables from the param
+ var content = ("content" in param) ? param.content: "";
+ var title = ("title" in param) ? param.title: "";
+ var alertType = ("alertType" in param) ? param.alertType: "";
+ var fillType = ("fillType" in param) ? param.fillType: "";
+ var hasDismissButton = ("hasDismissButton" in param) ? param.hasDismissButton: true;
+ var timeShown = ("timeShown" in param) ? param.timeShown: 5000;
+
+ // Create the alert element
+ var alertElement = document.createElement("div");
+
+ // Set ID to the alert element
+ alertElement.setAttribute("id", this.makeId(6));
+
+ // Add the title
+ if (title) {
+ content = "<h4 class='alert-heading'>" + title + "</h4>" + content;
+ }
+
+ // Add the classes to the alert element
+ alertElement.classList.add("alert");
+ if (alertType) {
+ alertElement.classList.add(alertType);
+ }
+ if (fillType) {
+ alertElement.classList.add(fillType);
+ }
+
+ // Add the close button to the content (if required)
+ if (hasDismissButton) {
+ content = "<button class='close' data-dismiss='alert' type='button' aria-label='Close'><span aria-hidden='true'>×</span></button>" + content;
+ }
+
+ // Add the content to the alert element
+ alertElement.innerHTML = content;
+
+ // Append the alert element to the sticky alerts
+ this.stickyAlerts.insertBefore(alertElement, this.stickyAlerts.childNodes[0]);
+
+ // Toast the alert
+ this.toastAlert(alertElement.getAttribute("id"), timeShown);
+ },
+
+ /* End code block for handling sticky alerts */
+
+ // Click handler that can be overridden by users if needed
+ clickHandler: function(event) {},
+
+ // Keydown handler that can be overridden by users if needed
+ keydownHandler: function(event) {},
+}
+
+
+/* Things done once the DOM is loaded */
+
+function halfmoonOnDOMContentLoaded() {
+ // Re-initializing the required elements (to avoid issues with virtual DOM)
+ if (!halfmoon.pageWrapper) {
+ halfmoon.pageWrapper = document.getElementsByClassName("page-wrapper")[0];
+ }
+ if (!halfmoon.stickyAlerts) {
+ halfmoon.stickyAlerts = document.getElementsByClassName("sticky-alerts")[0];
+ }
+
+ // Handle the cookie and variable for dark mode
+ // 1. First preference is given to the cookie if it exists
+ if (halfmoon.readCookie("halfmoon_preferredMode")) {
+ if (halfmoon.readCookie("halfmoon_preferredMode") == "dark-mode") {
+ halfmoon.darkModeOn = true;
+ } else {
+ halfmoon.darkModeOn = false;
+ }
+ } else {
+ // 2. If cookie does not exist, next preference is for the dark mode setting
+ if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+ halfmoon.darkModeOn = true;
+ } else {
+ // 3. If all else fails, re-initialize the dark mode preference depending on the .dark-mode class
+ if (document.body.classList.contains("dark-mode")) {
+ halfmoon.darkModeOn = true;
+ } else {
+ halfmoon.darkModeOn = false;
+ }
+ }
+ }
+
+ // Automatically set preferred theme
+ // But only if one of the data-attribute is provided
+ if (document.body.getAttribute("data-set-preferred-mode-onload") || document.body.getAttribute("data-set-preferred-theme-onload")) {
+ if (halfmoon.darkModeOn) {
+ if (!document.body.classList.contains("dark-mode")) {
+ document.body.classList.add("dark-mode");
+ }
+ } else {
+ if (document.body.classList.contains("dark-mode")) {
+ document.body.classList.remove("dark-mode");
+ }
+ }
+ }
+
+ // Hiding sidebar on first load on small screens (unless data-attribute provided)
+ // Or on larger screens when sidebar type is overlayed-all
+ if (document.documentElement.clientWidth <= 768) {
+ if (halfmoon.pageWrapper) {
+ if (!halfmoon.pageWrapper.getAttribute("data-show-sidebar-onload-sm-and-down")) {
+ halfmoon.pageWrapper.setAttribute("data-sidebar-hidden", "hidden");
+ }
+ }
+ } else {
+ if (halfmoon.pageWrapper) {
+ if (halfmoon.pageWrapper.getAttribute("data-sidebar-type") === "overlayed-all") {
+ halfmoon.pageWrapper.setAttribute("data-sidebar-hidden", "hidden");
+ }
+ }
+ }
+
+ // Adding the click event listener
+ document.addEventListener(
+ "click",
+ function(event) {
+ var eventCopy = event;
+ var target = event.target;
+
+ // Handle clicks on dropdown toggles
+ if (target.matches("[data-toggle='dropdown']") || target.matches("[data-toggle='dropdown'] *")) {
+ if (target.matches("[data-toggle='dropdown'] *")) {
+ target = target.closest("[data-toggle='dropdown']");
+ }
+ if (target.classList.contains("active")) {
+ target.classList.remove("active");
+ target.closest(".dropdown").classList.remove("show");
+ } else {
+ halfmoon.deactivateAllDropdownToggles();
+ target.classList.add("active");
+ target.closest(".dropdown").classList.add("show");
+ }
+ } else {
+ if (!target.matches(".dropdown-menu *")) {
+ halfmoon.deactivateAllDropdownToggles();
+ }
+ }
+
+ // Handle clicks on alert dismiss buttons
+ if (target.matches(".alert [data-dismiss='alert']") || target.matches(".alert [data-dismiss='alert'] *")) {
+ if (target.matches(".alert [data-dismiss='alert'] *")) {
+ target = target.closest(".alert [data-dismiss='alert']");
+ }
+ target.parentNode.classList.add("dispose");
+ }
+
+ // Handle clicks on modal toggles
+ if (target.matches("[data-toggle='modal']") || target.matches("[data-toggle='modal'] *")) {
+ if (target.matches("[data-toggle='modal'] *")) {
+ target = target.closest("[data-toggle='modal']");
+ }
+ var targetModal = document.getElementById(target.getAttribute("data-target"));
+ if (targetModal) {
+ if (targetModal.classList.contains("modal")) {
+ halfmoon.toggleModal(target.getAttribute("data-target"));
+ }
+ }
+ }
+
+ // Handle clicks on modal dismiss buttons
+ if (target.matches(".modal [data-dismiss='modal']") || target.matches(".modal [data-dismiss='modal'] *")) {
+ if (target.matches(".modal [data-dismiss='modal'] *")) {
+ target = target.closest(".modal [data-dismiss='modal']");
+ }
+ target.closest(".modal").classList.remove("show");
+ }
+
+ // Handle clicks on modal overlays
+ if (target.matches(".modal-dialog")) {
+ var parentModal = target.closest(".modal");
+
+ if (!parentModal.getAttribute("data-overlay-dismissal-disabled")) {
+ if (parentModal.classList.contains("show")) {
+ parentModal.classList.remove("show");
+ } else {
+ window.location.hash = "#";
+ }
+ }
+ }
+
+ // Call the click handler method to handle any logic set by the user in their projects to handle clicks
+ halfmoon.clickHandler(eventCopy);
+ },
+ false
+ );
+
+ // Adding the key down event listener (for shortcuts and accessibility)
+ document.addEventListener(
+ "keydown",
+ function(event) {
+ var eventCopy = event;
+
+ // Shortcuts are triggered only if no input, textarea, or select has focus,
+ // If the control key or command key is not pressed down,
+ // And if the enabling data attribute is present on the DOM's body
+ if (!(document.querySelector("input:focus") || document.querySelector("textarea:focus") || document.querySelector("select:focus"))) {
+ event = event || window.event;
+
+ if (!(event.ctrlKey || event.metaKey)) {
+ // Toggle sidebar when [shift] + [S] keys are pressed
+ if (document.body.getAttribute("data-sidebar-shortcut-enabled")) {
+ if (event.shiftKey && event.which == 83) {
+ // Variable to store whether a modal is open or not
+ var modalOpen = false;
+
+ // Hash exists, so we check if it belongs to a modal
+ if (window.location.hash) {
+ var hash = window.location.hash.substring(1);
+ var elem = document.getElementById(hash);
+ if (elem) {
+ if (elem.classList.contains("modal")) {
+ modalOpen = true;
+ }
+ }
+ }
+ // Check for a modal with the .show class
+ if (document.querySelector(".modal.show")) {
+ modalOpen = true;
+ }
+
+ // This shortcut works only if no modal is open
+ if (!modalOpen) {
+ halfmoon.toggleSidebar();
+ event.preventDefault();
+ }
+ }
+ }
+
+ // Toggle dark mode when [shift] + [D] keys are pressed
+ if (document.body.getAttribute("data-dm-shortcut-enabled")) {
+ if (event.shiftKey && event.which == 68) {
+ halfmoon.toggleDarkMode();
+ event.preventDefault();
+ }
+ }
+ }
+ }
+
+ // Handling other keydown events
+ if (event.which === 27) {
+ // Close dropdown menu (if one is open) when [esc] key is pressed
+ if (document.querySelector("[data-toggle='dropdown'].active")) {
+ var elem = document.querySelector("[data-toggle='dropdown'].active");
+ elem.classList.remove("active");
+ elem.closest(".dropdown").classList.remove("show");
+ event.preventDefault();
+ }
+ // Close modal (if one is open, and if no dropdown menu is open) when [esc] key is pressed
+ // Conditional on dropdowns so that dropdowns on modals can be closed with the keyboard without closing the modal
+ else {
+ // Hash exists, so we check if it belongs to a modal
+ if (window.location.hash) {
+ var hash = window.location.hash.substring(1);
+ var elem = document.getElementById(hash);
+ if (elem) {
+ if (elem.classList.contains("modal")) {
+ if (!elem.getAttribute("data-esc-dismissal-disabled")) {
+ window.location.hash = "#";
+ event.preventDefault();
+ }
+ }
+ }
+ }
+ // Check for a modal with the .show class
+ if (document.querySelector(".modal.show")) {
+ var elem = document.querySelector(".modal.show");
+ if (!elem.getAttribute("data-esc-dismissal-disabled")) {
+ elem.classList.remove("show");
+ event.preventDefault();
+ }
+ }
+ }
+ }
+
+ // Call the keydown handler method to handle any logic set by the user in their projects to handle keydown events
+ halfmoon.keydownHandler(eventCopy);
+ }
+ );
+
+ // Handling custom file inputs
+ var halfmoonCustomFileInputs = document.querySelectorAll(".custom-file input");
+ for (var i = 0; i < halfmoonCustomFileInputs.length; i++) {
+ var customFile = halfmoonCustomFileInputs[i];
+ // Create file name container element, add the class name, and set default value
+ // Append it to the custom file element
+ var fileNamesContainer = document.createElement("div");
+ fileNamesContainer.classList.add("file-names");
+ var dataDefaultValue = customFile.getAttribute("data-default-value");
+ if (dataDefaultValue) {
+ fileNamesContainer.innerHTML = dataDefaultValue;
+ } else {
+ fileNamesContainer.innerHTML = "No file chosen";
+ }
+ customFile.parentNode.appendChild(fileNamesContainer);
+
+ // Add the event listener that will update the contents of the file name container element on change
+ customFile.addEventListener(
+ "change",
+ function(event) {
+ fileNamesContainer = event.target.parentNode.querySelector(".file-names");
+ if (event.target.files.length === 1) {
+ fileNamesContainer.innerHTML = event.target.files[0].name;
+ } else if (event.target.files.length > 1) {
+ fileNamesContainer.innerHTML = event.target.files.length + " files";
+ } else {
+ fileNamesContainer.innerHTML = "No file chosen";
+ }
+ }
+ );
+ }
+
+ // Adding the .with-transitions class to the page-wrapper so that transitions are enabled
+ // This way, the weird bug on Chrome is avoided, where the transitions run on load
+ if (halfmoon.pageWrapper) {
+ halfmoon.pageWrapper.classList.add("with-transitions");
+ }
+}
+
+// Call the function when the DOM is loaded
+document.addEventListener("DOMContentLoaded", halfmoonOnDOMContentLoaded);
\ No newline at end of file
diff --git a/web/views/components/body.php b/web/views/components/body.php
index 9f4cc30..4a3704f 100644
--- a/web/views/components/body.php
+++ b/web/views/components/body.php
@@ -1,13 +1,29 @@
<!DOCTYPE html>
<html>
+
<head>
- <?= isset($opt["title"]) ? "<title>".e($opt["title"])."</title>" : ""; ?>
- <?php require __DIR__."/head.php"; ?>
+ <?= isset($opt["title"]) ? "<title>" . e($opt["title"]) . "</title>" : ""; ?>
+ <?php require __DIR__ . "/head.php"; ?>
</head>
-<body>
- <?php require __DIR__."/header.php"; ?>
- <?php require __DIR__."/navbar.php"; ?>
- <?= $content ?>
- <?php require __DIR__."/footer.php"; ?>
+
+<body class="dark-mode with-custom-webkit-scrollbars with-custom-css-scrollbars" data-sidebar-shortcut-enabled="true" data-dm-shortcut-enabled="true" data-set-preferred-mode-onload="true">
+ <?php require __DIR__ . "/modal.php"; ?>
+ <div class="page-wrapper <?php if (isset($_SESSION["user_id"])) : ?>with-sidebar with-navbar<?php endif; ?> with-transision" id="page-wrapper" data-sidebar-type="overlayed-sm-and-down">
+ <?php if (isset($_SESSION["user_id"])) : ?>
+ <?php require __DIR__ . "/sidebar.php"; ?>
+
+ <?php require __DIR__ . "/navbar.php"; ?>
+ <?php endif; ?>
+ <div class="sticky-alerts"></div>
+ <div class="content-wrapper css-scrollbar-transparent-track">
+ <div class="container-lg">
+ <div class="">
+ <?= $content ?>
+ </div>
+ </div>
+ </div>
+ </div>
+ <?php require __DIR__ . "/footer.php"; ?>
</body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/web/views/components/head.php b/web/views/components/head.php
index e296e0a..2d1390b 100644
--- a/web/views/components/head.php
+++ b/web/views/components/head.php
@@ -1,6 +1,18 @@
-
-<link rel="stylesheet" type="text/css" href="<?= e(asset("css/common.css")); ?>"/>
+<link rel="stylesheet" type="text/css" href="<?= e(asset("css/common.css")); ?>" />
+<link rel="stylesheet" type="text/css" href="<?= e(asset("css/dashboard.css")); ?>" />
+<link rel="stylesheet" type="text/css" href="<?= e(asset("css/halfmoon.css")); ?>" />
<script type="text/javascript" src="<?= e(asset("js/common.js")); ?>"></script>
+<script type="text/javascript" src="<?= e(asset("js/halfmoon.js")); ?>"></script>
+<script type="module" src="<?= e(asset("js/cropo.js")); ?>"></script>
<script type="text/javascript" src="<?= e(asset("js/router.js")); ?>"></script>
-<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-<meta name="theme-color" content="#000000"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<meta name="theme-color" content="#000000" />
+<script type="text/javascript">
+ if (halfmoon.getPreferredMode() == "light-mode") {
+ // Light mode is preferred
+ } else if (halfmoon.getPreferredMode() == "dark-mode") {
+ // Dark mode is preferred
+ } else if (halfmoon.getPreferredMode() == "not-set") {
+ // Cookie does not exist
+ }
+</script>
\ No newline at end of file
diff --git a/web/views/components/header.php b/web/views/components/header.php
deleted file mode 100644
index e69de29..0000000
diff --git a/web/views/components/modal.php b/web/views/components/modal.php
new file mode 100644
index 0000000..e7092cf
--- /dev/null
+++ b/web/views/components/modal.php
@@ -0,0 +1,34 @@
+<div class="modal" id="modal-success" tabindex="-1" role="dialog" data-overlay-dismissal-disabled="true" data-esc-dismissal-disabled="true">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <h5 class="modal-title">Success Update Profile</h5>
+ <div class="text-right mt-20">
+ <a class="btn btn-primary" href="profile.php?ref=settings">OK</a>
+ </div>
+ </div>
+ </div>
+</div>
+<div class="modal" id="modal-error" tabindex="-1" role="dialog">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content bg-danger">
+ <h5 class="modal-title">Error Wrong Password</h5>
+ <div class="text-right mt-20">
+ <a href="#" class="btn mr-5" role="button">Close</a>
+ </div>
+ </div>
+ </div>
+</div>
+<div class="modal" id="modal-profile" tabindex="-1" role="dialog">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content ">
+ <h5 class="modal-title">Update Images</h5>
+ <canvas style="touch-action: none; cursor: move;" id="photo_canvas"></canvas>
+ <input type="range" min="1" max="5" value="1" step="0.01" id="photo_range" style="display: none;" />
+ <input type="file" id="photo" name="photo" accept=".jpg,.png,.gif,.jpeg" />
+ <div class="text-right mt-20">
+ <button type="button" onclick="apply_photo();" data-dismiss="modal-profile" class="btn">Apply photo</button>
+ <button class="btn" data-dismiss="modal-profile">Close</button>
+ </div>
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/web/views/components/navbar.php b/web/views/components/navbar.php
index 728f40e..ffff0e7 100644
--- a/web/views/components/navbar.php
+++ b/web/views/components/navbar.php
@@ -1,9 +1,59 @@
-<?php if (isset($_SESSION["user_id"])): ?>
-<div id="navbar">
- <a href="home.php"><button>Home</button></a>
- <a href="profile.php"><button>Profile</button></a>
- <a href="settings.php"><button>Settings</button></a>
- <a href="audit_log.php"><button>Audit Log</button></a>
- <a href="logout.php"><button>Logout</button></a>
-</div>
-<?php endif; ?>
+<?php
+const MENU_NAVBAR = [
+ "home" => "Home",
+ "profile" => "Profile",
+ "settings" => "Settings"
+];
+
+?>
+<?php if (isset($_SESSION["user_id"])) : ?>
+ <div class="navbar position-absolute z-10 top-0">
+ <div class="navbar-content mr-5">
+ <button id="toggle-sidebar-btn" class="btn btn-action" type="button" onclick="halfmoon.toggleSidebar()">
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-bar-left" viewBox="0 0 16 16">
+ <path fill-rule="evenodd" d="M11.854 3.646a.5.5 0 0 1 0 .708L8.207 8l3.647 3.646a.5.5 0 0 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 0 1 .708 0zM4.5 1a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 1 0v-13a.5.5 0 0 0-.5-.5z" />
+ </svg>
+ </button>
+ </div>
+ <form class="form-inline w-full ml-auto" action="..." method="...">
+ <div class="input-group">
+ <input type="text" class="form-control" placeholder="Search" required="required">
+ <div class="input-group-append">
+ <button class="btn" type="submit">
+ <i class="fa fa-search" aria-hidden="true"></i>
+ <span class="sr-only">Search</span>
+ </button>
+ </div>
+ </div>
+ </form>
+ <div class="navbar-content mt-5 ml-5">
+ <div class="dropdown with-arrow">
+ <a style="cursor:pointer;" data-toggle="dropdown" type="button" id="navbar-dropdown-toggle-btn-1">
+ <img class="user-dropdown img-fluid rounded-circle" src="<?= e($u["photo_path"]); ?>" alt="<?= e($u["full_name"]); ?> Images" />
+ </a>
+ <div class="dropdown-menu dropdown-menu-right w-200" aria-labelledby="navbar-dropdown-toggle-btn-1">
+ <?php foreach (MENU_NAVBAR as $k => $m) : ?>
+ <a href="<?= e($k); ?>.php" class="dropdown-item <?= ($g_active == $k) ? " text-primary" : ""; ?>"><?= e($m); ?></a>
+ <?php endforeach; ?>
+ <div class="dropdown-divider"></div>
+ <div class="dropdown-content">
+ <button onclick="halfmoon.toggleDarkMode()" class="btn mb-5 btn-block">
+ <span class="hidden-lm">
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-moon-stars-fill" viewBox="0 0 16 16">
+ <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z" />
+ <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z" />
+ </svg>
+ </span>
+ <span class="hidden-dm">
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-sun-fill" viewBox="0 0 16 16">
+ <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
+ </svg>
+ </span>
+ </button>
+ <a href="logout.php" class="btn btn-danger btn-block">Logout</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+<?php endif; ?>
\ No newline at end of file
--git a/web/views/components/sidebar.php b/web/views/components/sidebar.php
new file mode 100644
index 0000000..567adfd
--- /dev/null
+++ b/web/views/components/sidebar.php
@@ -0,0 +1,20 @@
+<?php
+
+const MENU_SIDEBAR = [
+ "home" => "Home",
+ "audit_log" => "Audit Log",
+ "settings" => "Settings"
+];
+
+?><div class="sidebar-overlay" onclick="halfmoon.toggleSidebar()"></div>
+<div class="sidebar bg-very-dark-dm">
+ <div class="sidebar-menu">
+ <a href="#" class="sidebar-brand">
+ GWSpamD
+ </a>
+ <div class="sidebar-divider"></div>
+ <?php foreach (MENU_SIDEBAR as $k => $m): ?>
+ <a href="<?= e($k); ?>.php" class="sidebar-link<?= ($g_active == $k) ? " active" : ""; ?>"><?= e($m); ?></a>
+ <?php endforeach; ?>
+ </div>
+</div>
diff --git a/web/views/pages/audit_log.php b/web/views/pages/audit_log.php
index 6f69375..c430967 100644
--- a/web/views/pages/audit_log.php
+++ b/web/views/pages/audit_log.php
@@ -2,47 +2,6 @@
$opt["title"] = "Audit Log";
load_api("audit_log");
-function build_extra_edit_profile($extra)
-{
- $e = json_decode($extra, true);
- ob_start();
- ?>
- Username: <?= e($e["username"]); ?><br>
- First name: <?= e($e["first_name"]); ?><br>
- Last name: <?= e($e["last_name"]); ?><br>
- Email: <?= e($e["email"]); ?><br>
- Photo: <?= e($e["photo_id"] ?? "(unchanged)"); ?><br>
- <?php
- return ob_get_clean();
-}
-
-function build_extra_ipua($extra)
-{
- $e = json_decode($extra, true);
- ob_start();
- ?>
- IP: <?= e($e["ip"]); ?><br>
- User Agent: <?= e($e["ua"]); ?><br>
- <?php
- return ob_get_clean();
-}
-
-function build_extra_data(string $action, $extra)
-{
- switch ($action) {
- case "edit_profile":
- return build_extra_edit_profile($extra);
- break;
- case "login":
- case "logout":
- case "change_password":
- return build_extra_ipua($extra);
- break;
- }
-
- return "";
-}
-
if (isset($_GET["page"])) {
$page = (int)$_GET["page"];
} else {
@@ -60,66 +19,38 @@ $nr_pages = get_audit_log_page_num($u["id"], $limit);
ob_start();
?>
-<div class="paginator">
- <?php for ($i = 1; $i <= $nr_pages; $i++): ?>
- <div><a href="?page=<?= $i; ?>"><?= $i; ?></a></div>
- <?php endfor; ?>
-</div>
+
+<nav aria-label="Pagination Log">
+ <ul class="pagination text-center m-5">
+ <?php for ($i = 1; $i <= $nr_pages; $i++) : ?>
+ <li class="page-item<?= ($page == $i) ? " active" : ""; ?>">
+ <a href="?page=<?= $i; ?>" class="page-link"><?= $i; ?></a>
+ </li>
+ <?php endfor; ?>
+ </ul>
+</nav>
<?php
$paginator = ob_get_clean();
?>
-<style>
-.audit-log-main {
- text-align: center;
- width: 900px;
- margin: auto;
- border: 1px solid #000;
- margin-top: 80px;
- padding: 30px;
- padding-bottom: 50px;
- margin-bottom: 150px;
-}
-.audit-log-table {
- margin: auto;
- border-collapse: collapse;
-}
-.audit-log-table tr th {
- padding: 10px;
-}
-.audit-log-table tr td {
- padding: 10px;
-}
-.paginator {
- width: 10px;
- margin-top: 20px;
- font-size: 30px;
- display: flex;
-}
-.paginator div {
- padding : 10px;
- border: 1px solid #000;
- margin: 10px;
-}
-</style>
-<div class="audit-log-main">
-<h1>Audit Log</h1>
-<?= $paginator; ?>
-<table class="audit-log-table" border="1">
- <thead>
- <tr><th>ID</th><th>Action</th><th>Extra</th><th>Datetime</th></tr>
- </thead>
- <tbody>
- <?php foreach ($st->fetchAll() as $row): ?>
- <tr>
- <td><?= e($row["id"]); ?></td>
- <td><?= e($row["action"]); ?></td>
- <td align="left"><?= build_extra_data($row["action"], $row["extra"]); ?></td>
- <td><?= e($row["created_at"]); ?></td>
- </tr>
+<div class="card">
+ <h1 class="card-title">Audit Log</h1>
+ <?= $paginator; ?>
+ <style>
+
+ </style>
+ <ol class="activity-feed">
+ <?php foreach ($st->fetchAll() as $row) : ?>
+ <li class="feed-item">
+ <time class="date" datetime="<?= e($row["created_at"]); ?>"><?= e($row["created_at"]); ?></time>
+ <span class="text"><?= e($row["action"]); ?></span>
+ <br>
+ <span class="text">
+ <?= build_extra_data($row["action"], $row["extra"]); ?>
+ </span>
+ </li>
<?php endforeach; ?>
- </tbody>
-</table>
-<?= $paginator; ?>
-</div>
+ </ol>
+ <?= $paginator; ?>
+</div>
\ No newline at end of file
diff --git a/web/views/pages/home.php b/web/views/pages/home.php
index b39c5c3..18089e2 100644
--- a/web/views/pages/home.php
+++ b/web/views/pages/home.php
@@ -1,7 +1,144 @@
<?php
$opt["title"] = "GWSpamD";
+load_api("audit_log");
+
+if (isset($_GET["page"])) {
+ $page = (int)$_GET["page"];
+} else {
+ $page = 1;
+}
+
+if ($page <= 0)
+ $page = 1;
+
+$limit = 5;
+$offset = ($page - 1) * $limit;
+
+$st = get_audit_log_st($u["id"], $limit, $offset);
+$nr_pages = get_audit_log_page_num($u["id"], $limit);
+
+ob_start();
?>
-<link rel="stylesheet" href="<?= e(asset("css/home.css")); ?>">
-<div id="main-box">
- <h1>Welcome <?= e($u["first_name"]); ?></h1>
-</div>
+
+<div class="container-fluid">
+ <div class="content">
+ <h1 class="content-title font-size-22">
+ Welcome <?= e($u["first_name"]); ?>
+ </h1>
+ <div class="fake-content"></div>
+ <div class="fake-content"></div>
+ </div>
+ <div class="row card bg-light-lm bg-dark-light-dm row-eq-spacing">
+ <div class="col-6 col-xl-3">
+ <div class="card">
+ <h2 class="card-title">
+ Orders
+ </h2>
+ <div class="fake-content"></div>
+ <div class="fake-content w-50 mw-full bg-primary"></div>
+ </div>
+ </div>
+ <div class="col-6 col-xl-3">
+ <div class="card">
+ <h2 class="card-title">
+ Sales
+ </h2>
+ <div class="fake-content"></div>
+ <div class="fake-content w-50 mw-full bg-primary"></div>
+ </div>
+ </div>
+ <div class="v-spacer d-xl-none"></div>
+ <div class="col-6 col-xl-3">
+ <div class="card">
+ <h2 class="card-title">
+ Costs
+ </h2>
+ <div class="fake-content"></div>
+ <div class="fake-content w-50 mw-full bg-primary"></div>
+ </div>
+ </div>
+ <div class="col-6 col-xl-3">
+ <div class="card">
+ <h2 class="card-title">
+ Profits
+ </h2>
+ <div class="fake-content"></div>
+ <div class="fake-content w-50 mw-full bg-primary"></div>
+ </div>
+ </div>
+ </div>
+ <div class="row row-eq-spacing-lg">
+ <div class="col-lg-8">
+ <div class="card h-lg-250 overflow-y-lg-auto">
+ <h2 class="card-title">
+ Customers
+ </h2>
+ <div class="fake-content mb-20"></div>
+ <div class="fake-content mb-20"></div>
+ <div class="fake-content bg-primary mb-20"></div>
+ <div class="fake-content mb-20"></div>
+ <div class="fake-content mb-20"></div>
+ <div class="fake-content mb-20"></div>
+ <div class="fake-content mb-10"></div>
+ </div>
+ </div>
+ <div class="col-lg-4">
+ <div class="card h-lg-250 overflow-y-lg-auto">
+ <h2 class="card-title">
+ Breakdown
+ </h2>
+ <div class="fake-content w-50 mw-full bg-primary d-inline-block"></div>
+ <div class="fake-content w-50 mw-full bg-danger d-inline-block"></div>
+ <div class="fake-content h-150 w-150 h-lg-100 w-lg-100 m-auto rounded-circle mt-10"></div>
+ <br class="hidden-lg-and-up">
+ </div>
+ </div>
+ </div>
+ <div class="row row-eq-spacing-lg">
+ <div class="col-lg-8">
+ <div class="content">
+ <h2 class="content-title">
+ Customer stories
+ <a href="#">#</a>
+ </h2>
+ <div class="fake-content"></div>
+ <div class="fake-content"></div>
+ <div class="fake-content w-100"></div>
+ </div>
+ <div class="card">
+ <h2 class="card-title">
+ Transactions
+ </h2>
+ <div class="fake-content"></div>
+ <div class="fake-content"></div>
+ <div class="fake-content"></div>
+ <div class="fake-content"></div>
+ <div class="fake-content w-50 mw-full bg-primary mb-10"></div>
+ </div>
+ <div class="content">
+ <div class="fake-content"></div>
+ <div class="fake-content w-150"></div>
+ </div>
+ </div>
+ <div class="col-lg-4">
+ <div class="content">
+ <h2 class="content-title">
+ Activity log
+ <a href="#">#</a>
+ </h2>
+ <table class="table">
+ <?php foreach ($st->fetchAll() as $row) : ?>
+ <tr>
+ <td><?= e($row["id"]); ?></td>
+ <td><?= e($row["action"]); ?></td>
+ <!-- <td align="left"><?= build_extra_data($row["action"], $row["extra"]); ?></td> -->
+ <td><?= e($row["created_at"]); ?></td>
+ </tr>
+ <?php endforeach; ?>
+
+ </table>
+ <a href="audit_log.php" class="btn btn-action btn-primary">More</a>
+ </div>
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/web/views/pages/login.php b/web/views/pages/login.php
index 3e62dfb..0fb01fb 100644
--- a/web/views/pages/login.php
+++ b/web/views/pages/login.php
@@ -1,24 +1,21 @@
<?php
$opt["title"] = "Login GWSpamD";
?>
-<link rel="stylesheet" type="text/css" href="<?= e(asset("css/login.css")); ?>">
-<div id="login-box">
+<div class="card w-full" id="login-box">
<h1>Login Page</h1>
-<form method="POST" action="javascript:void(0);" id="login-form">
- <div>
- <div class="input-label"><label for="username">Username</label></div>
- <div class="input-field">
- <input type="text" name="username" placeholder="Username" required/>
- </div>
- </div>
- <div>
- <div class="input-label"><label for="password">Password</label></div>
- <div class="input-field">
- <input type="password" name="password" placeholder="Password" required/>
- <input type="hidden" name="use_cookie" value="1"/>
- </div>
- </div>
- <div><button type="submit" id="login-button">Login</button></div>
+<form class="form-inline mw-full" method="POST" action="javascript:void(0);" id="login-form">
+ <div class="form-group">
+ <label class="required w-100" for="username">Username</label> <!-- w-100 = width: 10rem (100px) -->
+ <input type="text" class="form-control" name="username" placeholder="Username" required="required"/>
+</div>
+<div class="form-group">
+ <label class="required w-100" for="password">Password</label> <!-- w-100 = width: 10rem (100px) -->
+ <input type="password" class="form-control pass" name="password" placeholder="Password" required="required"/>
+ <input class="d-none" type="hidden" name="use_cookie" value="1"/>
+</div>
+<div class="form-group">
+ <input type="submit" id="login-button" class="btn btn-primary ml-auto" value="Login">
+</div>
</form>
</div>
<script type="text/javascript">
diff --git a/web/views/pages/profile.php b/web/views/pages/profile.php
index fbb11c9..07d8524 100644
--- a/web/views/pages/profile.php
+++ b/web/views/pages/profile.php
@@ -3,18 +3,35 @@
$opt["title"] = $u["full_name"];
?>
+<div class="mw-full text-center">
+ <img id="user-photo" class="img-fluid rounded-circle" src="<?= e($u["photo_path"]); ?>" alt="<?= e($u["full_name"]); ?> Images">
+ <div class="content">
+ <h1 class="font-weight-bolder"><?= $u["full_name"]; ?></h1>
+ <a href="settings.php?section=profile" class="btn btn-action m-5">Edit Profile</a>
-<link rel="stylesheet" href="<?= e(asset("css/profile.css")); ?>"/>
-<div id="main-box">
- <h1><?= e($u["full_name"]); ?></h1>
- <img id="user-photo" src="<?= e($u["photo_path"]); ?>" alt="<?= e($u["full_name"]); ?>"/>
- <div class="edit-profile-link"><a href="settings.php?section=profile">Edit profile</a></div>
- <table id="user-info">
- <tr><th align="center" colspan="3"><div>Profile Info</div></th></tr>
- <tr><td>User ID</td><td>:</td><td><?= e($u["id"]); ?></td></tr>
- <tr><td>First Name</td><td>:</td><td><?= e($u["first_name"]); ?></td></tr>
- <tr><td>Last Name</td><td>:</td><td><?= e($u["last_name"]); ?></td></tr>
- <tr><td>Username</td><td>:</td><td><?= e($u["username"]); ?></td></tr>
- <tr><td>Email</td><td>:</td><td><?= e($u["email"]); ?></td></tr>
- </table>
-</div>
+ <table class="table table-striped">
+ <tbody>
+ <tr>
+ <th>User ID</th>
+ <td><?= e($u["id"]); ?></td>
+ </tr>
+ <tr>
+ <th>First Name</th>
+ <td><?= e($u["first_name"]); ?></td>
+ </tr>
+ <tr>
+ <th>Last Name</th>
+ <td><?= e($u["last_name"]); ?></td>
+ </tr>
+ <tr>
+ <th>User Name</th>
+ <td><?= e($u["username"]); ?></td>
+ </tr>
+ <tr>
+ <th>Email</th>
+ <td><?= e($u["email"]); ?></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+</div>
\ No newline at end of file
diff --git a/web/views/pages/settings.php b/web/views/pages/settings.php
index 41e2ae4..fdb6ccc 100644
--- a/web/views/pages/settings.php
+++ b/web/views/pages/settings.php
@@ -6,38 +6,45 @@ const SECTIONS = [
];
if (isset(SECTIONS[$section])) {
- $opt["title"] = "Settings | ".SECTIONS[$section];
+ $opt["title"] = "Settings | " . SECTIONS[$section];
} else {
$opt["title"] = "Settings";
}
?>
-<link rel="stylesheet" href="<?= e(asset("css/settings.css")); ?>"/>
<script>
function toggle_all_inputs(enable) {
let inputs = document.querySelectorAll("input[type=text], input[type=email], input[type=password]");
for (let i = 0; i < inputs.length; i++) {
inputs[i].readOnly = !enable;
- inputs[i].style["background-color"] = (enable ? "white" : "#eee");
+ if (!enable)
+ inputs[i].classList.add("disabled");
+ // inputs[i].style["background-color"] = "#eee";
+ else
+ inputs[i].classList.remove("disabled");
}
}
</script>
-<div id="main-box">
- <h1>Settings</h1>
+<div id="main-box" class="content">
+ <h1 class="content-title">Settings</h1>
<div id="back-to-menu-box" style="display:none;">
- <a onclick="load_section_url('default', event);" href="?">Back to settings</a>
+ <a class="btn btn-action" onclick="load_section_url('default', event);" href="?">Back to settings</a>
</div>
<table style="display:none;" id="set-default">
- <?php foreach (SECTIONS as $sec => $title): ?>
- <tr><td><a onclick="load_section_url('<?= $sec; ?>', event);" href="?section=<?= e($sec); ?>"><?= e($title); ?></a></td></tr>
- <?php endforeach; ?>
+ <?php foreach (SECTIONS as $sec => $title) : ?>
+ <tr>
+ <td>
+ <a class="btn btn-action mt-5" onclick="load_section_url('<?= $sec; ?>', event);" href="?section=<?= e($sec); ?>"><?= e($title); ?></a>
+ </td>
+ </tr>
+ <?php endforeach; ?>
</table>
- <?php foreach (SECTIONS as $key => $title): ?>
+ <?php foreach (SECTIONS as $key => $title) : ?>
<div class="setting-box" style="display:none;" id="set-<?= e($key); ?>">
- <?php require __DIR__."/settings/{$key}.php"; ?>
+ <?php require __DIR__ . "/settings/{$key}.php"; ?>
</div>
<?php endforeach; ?>
</div>
@@ -66,4 +73,4 @@ if (isset(SECTIONS[$section])) {
}
load_section("<?= isset(SECTIONS[$section]) ? $section : "default" ?>");
-</script>
+</script>
\ No newline at end of file
diff --git a/web/views/pages/settings/password.php b/web/views/pages/settings/password.php
index 1d8fdb6..613ad08 100644
--- a/web/views/pages/settings/password.php
+++ b/web/views/pages/settings/password.php
@@ -1,13 +1,33 @@
+<div class="content">
+ <div class="mw-full d-flex justify-content-center">
+ <form action="api.php?action=settings&section=password" method="POST" id="change-pass-form" class="w-400 mw-full form-inline">
+ <table id="user-info" class="table">
+ <tr>
+ <th>
+ <div>Change Password</div>
+ </th>
+ </tr>
+ <tr>
+ <td>Current Password</td>
-<form action="api.php?action=settings&section=password" method="POST" id="change-pass-form">
- <table id="user-info">
- <tr><th align="center" colspan="3"><div>Change Password</div></th></tr>
- <tr><td>Current Password</td><td>:</td><td><input type="password" name="current_password" placeholder="Current Password" required/></td></tr>
- <tr><td>New Password</td><td>:</td><td><input type="password" name="new_password" placeholder="New Password" required/></td></tr>
- <tr><td>Confirm New Password</td><td>:</td><td><input type="password" name="confirm_new_password" placeholder="Confirm New Password" required/></td></tr>
- <tr><td align="center" colspan="3"><button type="submit" style="margin-top: 20px;">Save</button></td></tr>
- </table>
-</form>
+ <td><input type="password" class="form-control" name="current_password" placeholder="Current Password" required /></td>
+ </tr>
+ <tr>
+ <td>New Password</td>
+
+ <td><input type="password" class="form-control" name="new_password" placeholder="New Password" required /></td>
+ </tr>
+ <tr>
+ <td>Confirm New Password</td>
+
+ <td><input type="password" class="form-control" name="confirm_new_password" placeholder="Confirm New Password" required /></td>
+ </tr>
+ </table>
+
+ <input class="btn btn-primary btn-block" type="submit" value="Save" />
+ </form>
+ </div>
+</div>
<script>
let form_password = gid("change-pass-form");
form_password.addEventListener("submit", function(e) {
@@ -36,4 +56,4 @@
xhr.send(new FormData(form_password));
toggle_all_inputs(false);
});
-</script>
+</script>
\ No newline at end of file
diff --git a/web/views/pages/settings/profile.php b/web/views/pages/settings/profile.php
index da6e3e6..874704c 100644
--- a/web/views/pages/settings/profile.php
+++ b/web/views/pages/settings/profile.php
@@ -1,21 +1,59 @@
-<link rel="stylesheet" href="<?= e(asset("css/profile.css")); ?>"/>
-<img id="user-photo" src="<?= e($u["photo_path"]); ?>" alt="<?= e($u["full_name"]); ?>"/>
-<form action="api.php?action=settings&section=profile" enctype="multipart/form-data" method="POST" id="edit-profile-form">
-<table id="user-info">
- <tr><th align="center" colspan="3"><div>Profile Info</div></th></tr>
- <tr><td>User ID</td><td>:</td><td><?= e($u["id"]); ?></td></tr>
- <tr><td>Photo</td><td>:</td><td><input type="file" name="photo"/></td></tr>
- <tr><td>First Name</td><td>:</td><td><input type="text" name="first_name" value="<?= e($u["first_name"]); ?>" required/></td></tr>
- <tr><td>Last Name</td><td>:</td><td><input type="text" name="last_name" value="<?= e($u["last_name"]); ?>"/></td></tr>
- <tr><td>Username</td><td>:</td><td><input type="text" name="username" value="<?= e($u["username"]); ?>" required/></td></tr>
- <tr><td>Email</td><td>:</td><td><input type="email" name="email" value="<?= e($u["email"]); ?>" required/></td></tr>
- <tr><td align="center" colspan="3"><div style="margin-top: 30px;">Enter your current password to edit your profile:</div></td></tr>
- <tr><td align="center" colspan="3"><input type="password" name="password" placeholder="Password" required/></td></tr>
- <tr><td align="center" colspan="3"><button type="submit">Save</button></td></tr>
-</table>
-</form>
+<div class="mw-full text-center">
+ <button id="photo-btn" type="button" data-toggle="modal" data-target="modal-profile">
+ <img id="user-photo" class="img-fluid rounded-circle" src="<?= e($u["photo_path"]); ?>" alt="<?= e($u["full_name"]); ?>" />
+ </button>
+ <div>
+ <a style="cursor: pointer;" id="photo-btn" type="button" data-toggle="modal" data-target="modal-profile">
+ Edit Photo
+ </a>
+ </div>
+</div>
+
+<div class="mw-full d-flex justify-content-center">
+ <form class="w-400 mw-full" action="api.php?action=settings&section=profile" enctype="multipart/form-data" method="POST" id="edit-profile-form">
+ <table class="table " id="user-info">
+ <tr>
+ <th align="center" colspan="3">
+ <div>Profile Info</div>
+ </th>
+ </tr>
+ <tr>
+ <td>User ID</td>
+ <td><?= e($u["id"]); ?></td>
+ </tr>
+ <tr>
+ <td>First Name</td>
+ <td><input class="form-control" type="text" name="first_name" value="<?= e($u["first_name"]); ?>" required /></td>
+ </tr>
+ <tr>
+ <td>Last Name</td>
+ <td><input class="form-control" type="text" name="last_name" value="<?= e($u["last_name"]); ?>" /></td>
+ </tr>
+ <tr>
+ <td>Username</td>
+ <td><input class="form-control" type="text" name="username" value="<?= e($u["username"]); ?>" required /></td>
+ </tr>
+ <tr>
+ <td>Email</td>
+ <td><input class="form-control" type="email" name="email" value="<?= e($u["email"]); ?>" required /></td>
+ </tr>
+ <tr>
+ <td align="center" colspan="3">
+ <div style="margin-top: 30px;">Enter your current password to edit your profile</div>
+ </td>
+ </tr>
+ <tr>
+ <td align="center" colspan="3"><input class="form-control" type="password" name="password" placeholder="Password" required /></td>
+ </tr>
+ </table>
+ <input class="btn btn-primary btn-block" type="submit" value="Save" />
+ </form>
+</div>
<script>
+ var apply_photo, form_error;
let form_profile = gid("edit-profile-form");
+ let photo_blob = null;
+ let photo_filename = null;
form_profile.addEventListener("submit", function(e) {
e.preventDefault();
let xhr = new XMLHttpRequest();
@@ -27,19 +65,64 @@
try {
res = JSON.parse(xhr.responseText);
} catch (e) {
- console.log("Error", e);
+ toastErorrAlert(e);
return;
}
if (this.status == 200) {
- alert("Profile updated!");
- window.location = "profile.php?ref=settings";
+ halfmoon.toggleModal('modal-success')
} else {
- alert(res.error || "Unknown error");
+ if (res.error) {
+ toastErorrAlert(res.error);
+ } else {
+ toastErorrAlert("Unknown error");
+ }
toggle_all_inputs(true);
}
};
toggle_all_inputs(false);
- xhr.send(new FormData(form_profile));
+ let fd = new FormData(form_profile);
+ if (photo_blob !== null)
+ fd.append("photo", photo_blob, photo_filename);
+ xhr.send(fd);
});
</script>
+<script type="module">
+ import {
+ Cropo
+ } from "<?= e(asset("js/cropo.js")); ?>";
+
+ const canvas = gid("photo_canvas");
+ const range = gid("photo_range");
+ const user_photo = gid("user-photo");
+ const modal_photo = gid("modal-photo");
+ const cropo = new Cropo({
+ // imageUrl: "<?= e($u["photo_path"]); ?>",
+ canvas: canvas,
+ rangeInput: range
+ });
+ let photo = gid("photo");
+ photo.addEventListener("change", (e) => {
+ let file = photo.files?.[0];
+ if (!file)
+ return;
+
+ console.log(file);
+ let fr = new FileReader();
+ fr.onload = function() {
+ cropo.loadImageFromUrl(fr.result);
+ range.style.display = "";
+ photo_filename = file.name;
+ };
+ fr.readAsDataURL(file);
+ });
+
+ apply_photo = function() {
+ cropo.getBlob().then(function(blob) {
+ photo_blob = blob;
+ }).catch(function(err) {
+ toastErorrAlert(err)
+ });
+ user_photo.src = cropo.getDataUrl();
+ }
+</script>
\ No newline at end of file
base-commit: eb3c278aa7fa3390873d2a7b5a84f1521f51eecf
--
Memet Zx
^ permalink raw reply related [flat|nested] 4+ messages in thread
* Re: [PATCH gwspamd v2] gwspamd: web: Update frontend for gwspamd
2023-04-18 16:05 [PATCH gwspamd v2] gwspamd: web: Update frontend for gwspamd Memet Zx
@ 2023-04-18 16:08 ` Ammar Faizi
2023-04-18 16:12 ` Ammar Faizi
2023-04-18 16:13 ` Ammar Faizi
2 siblings, 0 replies; 4+ messages in thread
From: Ammar Faizi @ 2023-04-18 16:08 UTC (permalink / raw)
To: Memet Zx; +Cc: GNU/Weeb Mailing List, Memet Zx
On 4/18/23 11:05 PM, Memet Zx wrote:
> + if (!enable)
> + inputs[i].classList.add("disabled");
> + // inputs[i].style["background-color"] = "#eee";
> + else
> + inputs[i].classList.remove("disabled");
Remove that comment.
--
Ammar Faizi
^ permalink raw reply [flat|nested] 4+ messages in thread
* Re: [PATCH gwspamd v2] gwspamd: web: Update frontend for gwspamd
2023-04-18 16:05 [PATCH gwspamd v2] gwspamd: web: Update frontend for gwspamd Memet Zx
2023-04-18 16:08 ` Ammar Faizi
@ 2023-04-18 16:12 ` Ammar Faizi
2023-04-18 16:13 ` Ammar Faizi
2 siblings, 0 replies; 4+ messages in thread
From: Ammar Faizi @ 2023-04-18 16:12 UTC (permalink / raw)
To: Memet Zx; +Cc: GNU/Weeb Mailing List, Memet Zx
On 4/18/23 11:05 PM, Memet Zx wrote:
> diff --git a/web/public/assets/css/common.css b/web/public/assets/css/common.css
Comments.
--
Ammar Faizi
^ permalink raw reply [flat|nested] 4+ messages in thread
* Re: [PATCH gwspamd v2] gwspamd: web: Update frontend for gwspamd
2023-04-18 16:05 [PATCH gwspamd v2] gwspamd: web: Update frontend for gwspamd Memet Zx
2023-04-18 16:08 ` Ammar Faizi
2023-04-18 16:12 ` Ammar Faizi
@ 2023-04-18 16:13 ` Ammar Faizi
2 siblings, 0 replies; 4+ messages in thread
From: Ammar Faizi @ 2023-04-18 16:13 UTC (permalink / raw)
To: Memet Zx; +Cc: GNU/Weeb Mailing List, Memet Zx
On 4/18/23 11:05 PM, Memet Zx wrote:
> + const cropo = new Cropo({
> + // imageUrl: "<?= e($u["photo_path"]); ?>",
> + canvas: canvas,
> + rangeInput: range
> + });
Uncomment imageURL. That was just for debugging.
--
Ammar Faizi
^ permalink raw reply [flat|nested] 4+ messages in thread
end of thread, other threads:[~2023-04-18 16:13 UTC | newest]
Thread overview: 4+ messages (download: mbox.gz follow: Atom feed
-- links below jump to the message on this page --
2023-04-18 16:05 [PATCH gwspamd v2] gwspamd: web: Update frontend for gwspamd Memet Zx
2023-04-18 16:08 ` Ammar Faizi
2023-04-18 16:12 ` Ammar Faizi
2023-04-18 16:13 ` Ammar Faizi
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox