diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 151b0d5443a1657b62f9cacc6db973d61531220f..48b89cc1995ecc2374c8725453a7893a827d1202 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -2,6 +2,19 @@ name: Build
 
 on:
   push:
+    paths-ignore:
+      - "*.md"
+      - "*.txt"
+      - ".dockerignore"
+      - ".env.template"
+      - ".gitattributes"
+      - ".gitignore"
+      - "azure-pipelines.yml"
+      - "docker/**"
+      - "hooks/**"
+      - "tools/**"
+      - ".github/FUNDING.yml"
+      - ".github/ISSUE_TEMPLATE/**"
   pull_request:
     # Ignore when there are only changes done too one of these paths
     paths-ignore:
@@ -39,13 +52,13 @@ jobs:
             features: [sqlite,mysql,postgresql] # Remember to update the `cargo test` to match the amount of features
             channel: nightly
             os: ubuntu-18.04
-            ext:
+            ext: ""
           # - target-triple: x86_64-unknown-linux-gnu
           #   host-triple: x86_64-unknown-linux-gnu
           #   features: "sqlite,mysql,postgresql"
           #   channel: stable
           #   os: ubuntu-18.04
-          #   ext:
+          #   ext: ""
 
     name: Building ${{ matrix.channel }}-${{ matrix.target-triple }}
     runs-on: ${{ matrix.os }}
diff --git a/.github/workflows/hadolint.yml b/.github/workflows/hadolint.yml
index 76ab9454d3fcc6c0319f4510e5529d3e45b59f88..e52e5c0733ddda10c5d0031b5e9f30a8c7a272ad 100644
--- a/.github/workflows/hadolint.yml
+++ b/.github/workflows/hadolint.yml
@@ -2,6 +2,9 @@ name: Hadolint
 
 on:
   push:
+    # Ignore when there are only changes done too one of these paths
+    paths:
+      - "docker/**"
   pull_request:
     # Ignore when there are only changes done too one of these paths
     paths:
@@ -22,14 +25,14 @@ jobs:
       - name: Download hadolint
         shell: bash
         run: |
-          sudo curl -L https://github.com/hadolint/hadolint/releases/download/v$HADOLINT_VERSION/hadolint-$(uname -s)-$(uname -m) -o /usr/local/bin/hadolint && \
+          sudo curl -L https://github.com/hadolint/hadolint/releases/download/v${HADOLINT_VERSION}/hadolint-$(uname -s)-$(uname -m) -o /usr/local/bin/hadolint && \
           sudo chmod +x /usr/local/bin/hadolint
         env:
-          HADOLINT_VERSION: 2.3.0
+          HADOLINT_VERSION: 2.5.0
       # End Download hadolint
 
       # Test Dockerfiles
       - name: Run hadolint
         shell: bash
-        run:  git ls-files --exclude='docker/*/Dockerfile*' --ignored | xargs hadolint
+        run:  git ls-files --exclude='docker/*/Dockerfile*' --ignored --cached | xargs hadolint
       # End Test Dockerfiles
diff --git a/src/api/admin.rs b/src/api/admin.rs
index c9054a29f658a69cdf2b7d91eaeaab25747ca37a..46e395025270a2deb8be09c69ad541c5444a4100 100644
--- a/src/api/admin.rs
+++ b/src/api/admin.rs
@@ -196,9 +196,7 @@ fn _validate_token(token: &str) -> bool {
 struct AdminTemplateData {
     page_content: String,
     version: Option<&'static str>,
-    users: Option<Vec<Value>>,
-    organizations: Option<Vec<Value>>,
-    diagnostics: Option<Value>,
+    page_data: Option<Value>,
     config: Value,
     can_backup: bool,
     logged_in: bool,
@@ -214,51 +212,19 @@ impl AdminTemplateData {
             can_backup: *CAN_BACKUP,
             logged_in: true,
             urlpath: CONFIG.domain_path(),
-            users: None,
-            organizations: None,
-            diagnostics: None,
+            page_data: None,
         }
     }
 
-    fn users(users: Vec<Value>) -> Self {
+    fn with_data(page_content: &str, page_data: Value) -> Self {
         Self {
-            page_content: String::from("admin/users"),
+            page_content: String::from(page_content),
             version: VERSION,
-            users: Some(users),
+            page_data: Some(page_data),
             config: CONFIG.prepare_json(),
             can_backup: *CAN_BACKUP,
             logged_in: true,
             urlpath: CONFIG.domain_path(),
-            organizations: None,
-            diagnostics: None,
-        }
-    }
-
-    fn organizations(organizations: Vec<Value>) -> Self {
-        Self {
-            page_content: String::from("admin/organizations"),
-            version: VERSION,
-            organizations: Some(organizations),
-            config: CONFIG.prepare_json(),
-            can_backup: *CAN_BACKUP,
-            logged_in: true,
-            urlpath: CONFIG.domain_path(),
-            users: None,
-            diagnostics: None,
-        }
-    }
-
-    fn diagnostics(diagnostics: Value) -> Self {
-        Self {
-            page_content: String::from("admin/diagnostics"),
-            version: VERSION,
-            organizations: None,
-            config: CONFIG.prepare_json(),
-            can_backup: *CAN_BACKUP,
-            logged_in: true,
-            urlpath: CONFIG.domain_path(),
-            users: None,
-            diagnostics: Some(diagnostics),
         }
     }
 
@@ -360,7 +326,7 @@ fn users_overview(_token: AdminToken, conn: DbConn) -> ApiResult<Html<String>> {
         })
         .collect();
 
-    let text = AdminTemplateData::users(users_json).render()?;
+    let text = AdminTemplateData::with_data("admin/users", json!(users_json)).render()?;
     Ok(Html(text))
 }
 
@@ -466,7 +432,7 @@ fn organizations_overview(_token: AdminToken, conn: DbConn) -> ApiResult<Html<St
         })
         .collect();
 
-    let text = AdminTemplateData::organizations(organizations_json).render()?;
+    let text = AdminTemplateData::with_data("admin/organizations", json!(organizations_json)).render()?;
     Ok(Html(text))
 }
 
@@ -592,11 +558,12 @@ fn diagnostics(_token: AdminToken, ip_header: IpHeader, conn: DbConn) -> ApiResu
         "db_type": *DB_TYPE,
         "db_version": get_sql_server_version(&conn),
         "admin_url": format!("{}/diagnostics", admin_url(Referer(None))),
+        "overrides": &CONFIG.get_overrides().join(", "),
         "server_time_local": Local::now().format("%Y-%m-%d %H:%M:%S %Z").to_string(),
         "server_time": Utc::now().format("%Y-%m-%d %H:%M:%S UTC").to_string(), // Run the date/time check as the last item to minimize the difference
     });
 
-    let text = AdminTemplateData::diagnostics(diagnostics_json).render()?;
+    let text = AdminTemplateData::with_data("admin/diagnostics", diagnostics_json).render()?;
     Ok(Html(text))
 }
 
diff --git a/src/api/web.rs b/src/api/web.rs
index 645f79a79e5d86b10f17f6c8b72b2aa4186ff334..4ba65fda35d498fed89b1f40100362cd918f1348 100644
--- a/src/api/web.rs
+++ b/src/api/web.rs
@@ -91,8 +91,8 @@ fn static_files(filename: String) -> Result<Content<&'static [u8]>, Error> {
         "identicon.js" => Ok(Content(ContentType::JavaScript, include_bytes!("../static/scripts/identicon.js"))),
         "datatables.js" => Ok(Content(ContentType::JavaScript, include_bytes!("../static/scripts/datatables.js"))),
         "datatables.css" => Ok(Content(ContentType::CSS, include_bytes!("../static/scripts/datatables.css"))),
-        "jquery-3.5.1.slim.js" => {
-            Ok(Content(ContentType::JavaScript, include_bytes!("../static/scripts/jquery-3.5.1.slim.js")))
+        "jquery-3.6.0.slim.js" => {
+            Ok(Content(ContentType::JavaScript, include_bytes!("../static/scripts/jquery-3.6.0.slim.js")))
         }
         _ => err!(format!("Static file not found: {}", filename)),
     }
diff --git a/src/config.rs b/src/config.rs
index 13810caa9272631e03cdee04f7255c8c6b29649e..dd6e0f078586be2817983120507ca2ba91327297 100644
--- a/src/config.rs
+++ b/src/config.rs
@@ -57,6 +57,8 @@ macro_rules! make_config {
 
             _env: ConfigBuilder,
             _usr: ConfigBuilder,
+
+            _overrides: Vec<String>,
         }
 
         #[derive(Debug, Clone, Default, Deserialize, Serialize)]
@@ -113,8 +115,7 @@ macro_rules! make_config {
 
             /// Merges the values of both builders into a new builder.
             /// If both have the same element, `other` wins.
-            fn merge(&self, other: &Self, show_overrides: bool) -> Self {
-                let mut overrides = Vec::new();
+            fn merge(&self, other: &Self, show_overrides: bool, overrides: &mut Vec<String>) -> Self {
                 let mut builder = self.clone();
                 $($(
                     if let v @Some(_) = &other.$name {
@@ -176,9 +177,9 @@ macro_rules! make_config {
             )+)+
 
             pub fn prepare_json(&self) -> serde_json::Value {
-                let (def, cfg) = {
+                let (def, cfg, overriden) = {
                     let inner = &self.inner.read().unwrap();
-                    (inner._env.build(), inner.config.clone())
+                    (inner._env.build(), inner.config.clone(), inner._overrides.clone())
                 };
 
                 fn _get_form_type(rust_type: &str) -> &'static str {
@@ -210,6 +211,7 @@ macro_rules! make_config {
                         "default": def.$name,
                         "type":  _get_form_type(stringify!($ty)),
                         "doc": _get_doc(concat!($($doc),+)),
+                        "overridden": overriden.contains(&stringify!($name).to_uppercase()),
                     }, )+
                     ]}, )+ ])
             }
@@ -224,6 +226,15 @@ macro_rules! make_config {
                     stringify!($name): make_config!{ @supportstr $name, cfg.$name, $ty, $none_action },
                 )+)+ })
             }
+
+            pub fn get_overrides(&self) -> Vec<String> {
+                let overrides = {
+                    let inner = &self.inner.read().unwrap();
+                    inner._overrides.clone()
+                };
+
+                overrides
+            }
         }
     };
 
@@ -505,7 +516,7 @@ make_config! {
         /// Server name sent during HELO |> By default this value should be is on the machine's hostname, but might need to be changed in case it trips some anti-spam filters
         helo_name:                     String, true,   option;
         /// Enable SMTP debugging (Know the risks!) |> DANGEROUS: Enabling this will output very detailed SMTP messages. This could contain sensitive information like passwords and usernames! Only enable this during troubleshooting!
-        smtp_debug:                    bool,   true,   def,     false;
+        smtp_debug:                    bool,   false,  def,     false;
         /// Accept Invalid Certs (Know the risks!) |> DANGEROUS: Allow invalid certificates. This option introduces significant vulnerabilities to man-in-the-middle attacks!
         smtp_accept_invalid_certs:     bool,   true,   def,     false;
         /// Accept Invalid Hostnames (Know the risks!) |> DANGEROUS: Allow invalid hostnames. This option introduces significant vulnerabilities to man-in-the-middle attacks!
@@ -639,7 +650,8 @@ impl Config {
         let _usr = ConfigBuilder::from_file(&CONFIG_FILE).unwrap_or_default();
 
         // Create merged config, config file overwrites env
-        let builder = _env.merge(&_usr, true);
+        let mut _overrides = Vec::new();
+        let builder = _env.merge(&_usr, true, &mut _overrides);
 
         // Fill any missing with defaults
         let config = builder.build();
@@ -651,6 +663,7 @@ impl Config {
                 config,
                 _env,
                 _usr,
+                _overrides,
             }),
         })
     }
@@ -666,9 +679,10 @@ impl Config {
         let config_str = serde_json::to_string_pretty(&builder)?;
 
         // Prepare the combined config
+        let mut overrides = Vec::new();
         let config = {
             let env = &self.inner.read().unwrap()._env;
-            env.merge(&builder, false).build()
+            env.merge(&builder, false, &mut overrides).build()
         };
         validate_config(&config)?;
 
@@ -677,6 +691,7 @@ impl Config {
             let mut writer = self.inner.write().unwrap();
             writer.config = config;
             writer._usr = builder;
+            writer._overrides = overrides;
         }
 
         //Save to file
@@ -690,7 +705,8 @@ impl Config {
     pub fn update_config_partial(&self, other: ConfigBuilder) -> Result<(), Error> {
         let builder = {
             let usr = &self.inner.read().unwrap()._usr;
-            usr.merge(&other, false)
+            let mut _overrides = Vec::new();
+            usr.merge(&other, false, &mut _overrides)
         };
         self.update_config(builder)
     }
@@ -751,6 +767,7 @@ impl Config {
             let mut writer = self.inner.write().unwrap();
             writer.config = config;
             writer._usr = usr;
+            writer._overrides = Vec::new();
         }
 
         Ok(())
diff --git a/src/static/scripts/bootstrap-native.js b/src/static/scripts/bootstrap-native.js
index 8fafa16ad27efb822bd844f6430758c4145a4ba1..e5aa08303a69a6aadcab8567f675929231a3c059 100644
--- a/src/static/scripts/bootstrap-native.js
+++ b/src/static/scripts/bootstrap-native.js
@@ -1,1671 +1,3554 @@
 /*!
-  * Native JavaScript for Bootstrap v3.0.15 (https://thednp.github.io/bootstrap.native/)
+  * Native JavaScript for Bootstrap v4.0.2 (https://thednp.github.io/bootstrap.native/)
   * Copyright 2015-2021 © dnp_theme
   * Licensed under MIT (https://github.com/thednp/bootstrap.native/blob/master/LICENSE)
   */
- (function (global, factory) {
+(function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
-  (global = global || self, global.BSN = factory());
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.BSN = factory());
 }(this, (function () { 'use strict';
 
-  var transitionEndEvent = 'webkitTransition' in document.head.style ? 'webkitTransitionEnd' : 'transitionend';
+  const transitionEndEvent = 'webkitTransition' in document.head.style ? 'webkitTransitionEnd' : 'transitionend';
 
-  var supportTransition = 'webkitTransition' in document.head.style || 'transition' in document.head.style;
+  const supportTransition = 'webkitTransition' in document.head.style || 'transition' in document.head.style;
 
-  var transitionDuration = 'webkitTransition' in document.head.style ? 'webkitTransitionDuration' : 'transitionDuration';
+  const transitionDuration = 'webkitTransition' in document.head.style ? 'webkitTransitionDuration' : 'transitionDuration';
 
-  var transitionProperty = 'webkitTransition' in document.head.style ? 'webkitTransitionProperty' : 'transitionProperty';
+  const transitionProperty = 'webkitTransition' in document.head.style ? 'webkitTransitionProperty' : 'transitionProperty';
 
   function getElementTransitionDuration(element) {
-    var computedStyle = getComputedStyle(element),
-        property = computedStyle[transitionProperty],
-        duration = supportTransition && property && property !== 'none'
-                 ? parseFloat(computedStyle[transitionDuration]) : 0;
-    return !isNaN(duration) ? duration * 1000 : 0;
+    const computedStyle = getComputedStyle(element);
+    const propertyValue = computedStyle[transitionProperty];
+    const durationValue = computedStyle[transitionDuration];
+    const durationScale = durationValue.includes('ms') ? 1 : 1000;
+    const duration = supportTransition && propertyValue && propertyValue !== 'none'
+      ? parseFloat(durationValue) * durationScale : 0;
+
+    return !Number.isNaN(duration) ? duration : 0;
   }
 
-  function emulateTransitionEnd(element,handler){
-    var called = 0, duration = getElementTransitionDuration(element);
-    duration ? element.addEventListener( transitionEndEvent, function transitionEndWrapper(e){
-                !called && handler(e), called = 1;
-                element.removeEventListener( transitionEndEvent, transitionEndWrapper);
-              })
-             : setTimeout(function() { !called && handler(), called = 1; }, 17);
+  function emulateTransitionEnd(element, handler) {
+    let called = 0;
+    const endEvent = new Event(transitionEndEvent);
+    const duration = getElementTransitionDuration(element);
+
+    if (duration) {
+      element.addEventListener(transitionEndEvent, function transitionEndWrapper(e) {
+        if (e.target === element) {
+          handler.apply(element, [e]);
+          element.removeEventListener(transitionEndEvent, transitionEndWrapper);
+          called = 1;
+        }
+      });
+      setTimeout(() => {
+        if (!called) element.dispatchEvent(endEvent);
+      }, duration + 17);
+    } else {
+      handler.apply(element, [endEvent]);
+    }
   }
 
   function queryElement(selector, parent) {
-    var lookUp = parent && parent instanceof Element ? parent : document;
+    const lookUp = parent && parent instanceof Element ? parent : document;
     return selector instanceof Element ? selector : lookUp.querySelector(selector);
   }
 
-  function bootstrapCustomEvent(eventName, componentName, eventProperties) {
-    var OriginalCustomEvent = new CustomEvent( eventName + '.bs.' + componentName, {cancelable: true});
-    if (typeof eventProperties !== 'undefined') {
-      Object.keys(eventProperties).forEach(function (key) {
+  function hasClass(element, classNAME) {
+    return element.classList.contains(classNAME);
+  }
+
+  function removeClass(element, classNAME) {
+    element.classList.remove(classNAME);
+  }
+
+  const addEventListener = 'addEventListener';
+
+  const removeEventListener = 'removeEventListener';
+
+  const fadeClass = 'fade';
+
+  const showClass = 'show';
+
+  const dataBsDismiss = 'data-bs-dismiss';
+
+  function bootstrapCustomEvent(namespacedEventType, eventProperties) {
+    const OriginalCustomEvent = new CustomEvent(namespacedEventType, { cancelable: true });
+
+    if (eventProperties instanceof Object) {
+      Object.keys(eventProperties).forEach((key) => {
         Object.defineProperty(OriginalCustomEvent, key, {
-          value: eventProperties[key]
+          value: eventProperties[key],
         });
       });
     }
     return OriginalCustomEvent;
   }
 
-  function dispatchCustomEvent(customEvent){
-    this && this.dispatchEvent(customEvent);
-  }
-
-  function Alert(element) {
-    var self = this,
-      alert,
-      closeCustomEvent = bootstrapCustomEvent('close','alert'),
-      closedCustomEvent = bootstrapCustomEvent('closed','alert');
-    function triggerHandler() {
-      alert.classList.contains('fade') ? emulateTransitionEnd(alert,transitionEndHandler) : transitionEndHandler();
+  function normalizeValue(value) {
+    if (value === 'true') {
+      return true;
     }
-    function toggleEvents(action){
-      action = action ? 'addEventListener' : 'removeEventListener';
-      element[action]('click',clickHandler,false);
+
+    if (value === 'false') {
+      return false;
     }
-    function clickHandler(e) {
-      alert = e && e.target.closest(".alert");
-      element = queryElement('[data-dismiss="alert"]',alert);
-      element && alert && (element === e.target || element.contains(e.target)) && self.close();
+
+    if (!Number.isNaN(+value)) {
+      return +value;
     }
-    function transitionEndHandler() {
-      toggleEvents();
-      alert.parentNode.removeChild(alert);
-      dispatchCustomEvent.call(alert,closedCustomEvent);
+
+    if (value === '' || value === 'null') {
+      return null;
     }
-    self.close = function () {
-      if ( alert && element && alert.classList.contains('show') ) {
-        dispatchCustomEvent.call(alert,closeCustomEvent);
-        if ( closeCustomEvent.defaultPrevented ) { return; }
-        self.dispose();
-        alert.classList.remove('show');
-        triggerHandler();
-      }
-    };
-    self.dispose = function () {
-      toggleEvents();
-      delete element.Alert;
-    };
-    element = queryElement(element);
-    alert = element.closest('.alert');
-    element.Alert && element.Alert.dispose();
-    if ( !element.Alert ) {
-      toggleEvents(1);
-    }
-    self.element = element;
-    element.Alert = self;
-  }
-
-  function Button(element) {
-    var self = this, labels,
-        changeCustomEvent = bootstrapCustomEvent('change', 'button');
-    function toggle(e) {
-      var input,
-          label = e.target.tagName === 'LABEL' ? e.target
-                : e.target.closest('LABEL') ? e.target.closest('LABEL') : null;
-      input = label && label.getElementsByTagName('INPUT')[0];
-      if ( !input ) { return; }
-      dispatchCustomEvent.call(input, changeCustomEvent);
-      dispatchCustomEvent.call(element, changeCustomEvent);
-      if ( input.type === 'checkbox' ) {
-        if ( changeCustomEvent.defaultPrevented ) { return; }
-        if ( !input.checked ) {
-          label.classList.add('active');
-          input.getAttribute('checked');
-          input.setAttribute('checked','checked');
-          input.checked = true;
+
+    // string / function / Element / Object
+    return value;
+  }
+
+  function normalizeOptions(element, defaultOps, inputOps, ns) {
+    const normalOps = {};
+    const dataOps = {};
+    const data = { ...element.dataset };
+
+    Object.keys(data)
+      .forEach((k) => {
+        const key = k.includes(ns)
+          ? k.replace(ns, '').replace(/[A-Z]/, (match) => match.toLowerCase())
+          : k;
+
+        dataOps[key] = normalizeValue(data[k]);
+      });
+
+    Object.keys(inputOps)
+      .forEach((k) => {
+        inputOps[k] = normalizeValue(inputOps[k]);
+      });
+
+    Object.keys(defaultOps)
+      .forEach((k) => {
+        if (k in inputOps) {
+          normalOps[k] = inputOps[k];
+        } else if (k in dataOps) {
+          normalOps[k] = dataOps[k];
         } else {
-          label.classList.remove('active');
-          input.getAttribute('checked');
-          input.removeAttribute('checked');
-          input.checked = false;
-        }
-        if (!element.toggled) {
-          element.toggled = true;
+          normalOps[k] = defaultOps[k];
         }
+      });
+
+    return normalOps;
+  }
+
+  /* Native JavaScript for Bootstrap 5 | Base Component
+  ----------------------------------------------------- */
+
+  class BaseComponent {
+    constructor(name, target, defaults, config) {
+      const self = this;
+      const element = queryElement(target);
+
+      if (element[name]) element[name].dispose();
+      self.element = element;
+
+      if (defaults && Object.keys(defaults).length) {
+        self.options = normalizeOptions(element, defaults, (config || {}), 'bs');
       }
-      if ( input.type === 'radio' && !element.toggled ) {
-        if ( changeCustomEvent.defaultPrevented ) { return; }
-        if ( !input.checked || (e.screenX === 0 && e.screenY == 0) ) {
-          label.classList.add('active');
-          label.classList.add('focus');
-          input.setAttribute('checked','checked');
-          input.checked = true;
-          element.toggled = true;
-          Array.from(labels).map(function (otherLabel){
-            var otherInput = otherLabel.getElementsByTagName('INPUT')[0];
-            if ( otherLabel !== label && otherLabel.classList.contains('active') )  {
-              dispatchCustomEvent.call(otherInput, changeCustomEvent);
-              otherLabel.classList.remove('active');
-              otherInput.removeAttribute('checked');
-              otherInput.checked = false;
-            }
-          });
+      element[name] = self;
+    }
+
+    dispose(name) {
+      const self = this;
+      self.element[name] = null;
+      Object.keys(self).forEach((prop) => { self[prop] = null; });
+    }
+  }
+
+  /* Native JavaScript for Bootstrap 5 | Alert
+  -------------------------------------------- */
+
+  // ALERT PRIVATE GC
+  // ================
+  const alertString = 'alert';
+  const alertComponent = 'Alert';
+  const alertSelector = `.${alertString}`;
+  const alertDismissSelector = `[${dataBsDismiss}="${alertString}"]`;
+
+  // ALERT CUSTOM EVENTS
+  // ===================
+  const closeAlertEvent = bootstrapCustomEvent(`close.bs.${alertString}`);
+  const closedAlertEvent = bootstrapCustomEvent(`closed.bs.${alertString}`);
+
+  // ALERT EVENT HANDLERS
+  // ====================
+  function alertTransitionEnd(self) {
+    const { element, relatedTarget } = self;
+    toggleAlertHandler(self);
+
+    if (relatedTarget) closedAlertEvent.relatedTarget = relatedTarget;
+    element.dispatchEvent(closedAlertEvent);
+
+    self.dispose();
+    element.parentNode.removeChild(element);
+  }
+
+  // ALERT PRIVATE METHOD
+  // ====================
+  function toggleAlertHandler(self, add) {
+    const action = add ? addEventListener : removeEventListener;
+    if (self.dismiss) self.dismiss[action]('click', self.close);
+  }
+
+  // ALERT DEFINITION
+  // ================
+  class Alert extends BaseComponent {
+    constructor(target) {
+      super(alertComponent, target);
+      // bind
+      const self = this;
+
+      // initialization element
+      const { element } = self;
+
+      // the dismiss button
+      self.dismiss = queryElement(alertDismissSelector, element);
+      self.relatedTarget = null;
+
+      // add event listener
+      toggleAlertHandler(self, 1);
+    }
+
+    // ALERT PUBLIC METHODS
+    // ====================
+    close(e) {
+      const target = e ? e.target : null;
+      const self = e
+        ? e.target.closest(alertSelector)[alertComponent]
+        : this;
+      const { element } = self;
+
+      if (self && element && hasClass(element, showClass)) {
+        if (target) {
+          closeAlertEvent.relatedTarget = target;
+          self.relatedTarget = target;
         }
+        element.dispatchEvent(closeAlertEvent);
+        if (closeAlertEvent.defaultPrevented) return;
+
+        removeClass(element, showClass);
+
+        if (hasClass(element, fadeClass)) {
+          emulateTransitionEnd(element, () => alertTransitionEnd(self));
+        } else alertTransitionEnd(self);
       }
-      setTimeout( function () { element.toggled = false; }, 50 );
     }
-    function keyHandler(e) {
-      var key = e.which || e.keyCode;
-      key === 32 && e.target === document.activeElement && toggle(e);
+
+    dispose() {
+      toggleAlertHandler(this);
+      super.dispose(alertComponent);
     }
-    function preventScroll(e) {
-      var key = e.which || e.keyCode;
-      key === 32 && e.preventDefault();
+  }
+
+  Alert.init = {
+    component: alertComponent,
+    selector: alertSelector,
+    constructor: Alert,
+  };
+
+  function addClass(element, classNAME) {
+    element.classList.add(classNAME);
+  }
+
+  const activeClass = 'active';
+
+  const dataBsToggle = 'data-bs-toggle';
+
+  /* Native JavaScript for Bootstrap 5 | Button
+  ---------------------------------------------*/
+
+  // BUTTON PRIVATE GC
+  // =================
+  const buttonString = 'button';
+  const buttonComponent = 'Button';
+  const buttonSelector = `[${dataBsToggle}="${buttonString}"]`;
+  const ariaPressed = 'aria-pressed';
+
+  // BUTTON PRIVATE METHOD
+  // =====================
+  function toggleButtonHandler(self, add) {
+    const action = add ? addEventListener : removeEventListener;
+    self.element[action]('click', self.toggle);
+  }
+
+  // BUTTON DEFINITION
+  // =================
+  class Button extends BaseComponent {
+    constructor(target) {
+      super(buttonComponent, target);
+      const self = this;
+
+      // initialization element
+      const { element } = self;
+
+      // set initial state
+      self.isActive = hasClass(element, activeClass);
+      element.setAttribute(ariaPressed, !!self.isActive);
+
+      // add event listener
+      toggleButtonHandler(self, 1);
     }
-    function focusToggle(e) {
-      if (e.target.tagName === 'INPUT' ) {
-        var action = e.type === 'focusin' ? 'add' : 'remove';
-        e.target.closest('.btn').classList[action]('focus');
-      }
+
+    // BUTTON PUBLIC METHODS
+    // =====================
+    toggle(e) {
+      if (e) e.preventDefault();
+      const self = e ? this[buttonComponent] : this;
+      const { element } = self;
+
+      if (hasClass(element, 'disabled')) return;
+
+      self.isActive = hasClass(element, activeClass);
+      const { isActive } = self;
+
+      const action = isActive ? removeClass : addClass;
+      const ariaValue = isActive ? 'false' : 'true';
+
+      action(element, activeClass);
+      element.setAttribute(ariaPressed, ariaValue);
     }
-    function toggleEvents(action) {
-      action = action ? 'addEventListener' : 'removeEventListener';
-      element[action]('click',toggle,false );
-      element[action]('keyup',keyHandler,false), element[action]('keydown',preventScroll,false);
-      element[action]('focusin',focusToggle,false), element[action]('focusout',focusToggle,false);
+
+    dispose() {
+      toggleButtonHandler(this);
+      super.dispose(buttonComponent);
     }
-    self.dispose = function () {
-      toggleEvents();
-      delete element.Button;
-    };
-    element = queryElement(element);
-    element.Button && element.Button.dispose();
-    labels = element.getElementsByClassName('btn');
-    if (!labels.length) { return; }
-    if ( !element.Button ) {
-      toggleEvents(1);
-    }
-    element.toggled = false;
-    element.Button = self;
-    Array.from(labels).map(function (btn){
-      !btn.classList.contains('active')
-        && queryElement('input:checked',btn)
-        && btn.classList.add('active');
-      btn.classList.contains('active')
-        && !queryElement('input:checked',btn)
-        && btn.classList.remove('active');
-    });
   }
 
-  var mouseHoverEvents = ('onmouseleave' in document) ? [ 'mouseenter', 'mouseleave'] : [ 'mouseover', 'mouseout' ];
+  Button.init = {
+    component: buttonComponent,
+    selector: buttonSelector,
+    constructor: Button,
+  };
 
-  var supportPassive = (function () {
-    var result = false;
+  const supportPassive = (() => {
+    let result = false;
     try {
-      var opts = Object.defineProperty({}, 'passive', {
-        get: function() {
+      const opts = Object.defineProperty({}, 'passive', {
+        get() {
           result = true;
-        }
+          return result;
+        },
       });
-      document.addEventListener('DOMContentLoaded', function wrap(){
-        document.removeEventListener('DOMContentLoaded', wrap, opts);
+      document[addEventListener]('DOMContentLoaded', function wrap() {
+        document[removeEventListener]('DOMContentLoaded', wrap, opts);
       }, opts);
-    } catch (e) {}
+    } catch (e) {
+      throw Error('Passive events are not supported');
+    }
+
     return result;
   })();
 
+  // general event options
+
   var passiveHandler = supportPassive ? { passive: true } : false;
 
+  function reflow(element) {
+    return element.offsetHeight;
+  }
+
   function isElementInScrollRange(element) {
-    var bcr = element.getBoundingClientRect(),
-        viewportHeight = window.innerHeight || document.documentElement.clientHeight;
-    return bcr.top <= viewportHeight && bcr.bottom >= 0;
-  }
-
-  function Carousel (element,options) {
-    options = options || {};
-    var self = this,
-      vars, ops,
-      slideCustomEvent, slidCustomEvent,
-      slides, leftArrow, rightArrow, indicator, indicators;
-    function pauseHandler() {
-      if ( ops.interval !==false && !element.classList.contains('paused') ) {
-        element.classList.add('paused');
-        !vars.isSliding && ( clearInterval(vars.timer), vars.timer = null );
+    const bcr = element.getBoundingClientRect();
+    const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+    return bcr.top <= viewportHeight && bcr.bottom >= 0; // bottom && top
+  }
+
+  /* Native JavaScript for Bootstrap 5 | Carousel
+  ----------------------------------------------- */
+
+  // CAROUSEL PRIVATE GC
+  // ===================
+  const carouselString = 'carousel';
+  const carouselComponent = 'Carousel';
+  const carouselSelector = `[data-bs-ride="${carouselString}"]`;
+  const carouselControl = `${carouselString}-control`;
+  const carouselItem = `${carouselString}-item`;
+  const dataBsSlideTo = 'data-bs-slide-to';
+  const pausedClass = 'paused';
+  const defaultCarouselOptions = {
+    pause: 'hover', // 'boolean|string'
+    keyboard: false, // 'boolean'
+    touch: true, // 'boolean'
+    interval: 5000, // 'boolean|number'
+  };
+  let startX = 0;
+  let currentX = 0;
+  let endX = 0;
+
+  // CAROUSEL CUSTOM EVENTS
+  // ======================
+  const carouselSlideEvent = bootstrapCustomEvent(`slide.bs.${carouselString}`);
+  const carouselSlidEvent = bootstrapCustomEvent(`slid.bs.${carouselString}`);
+
+  // CAROUSEL EVENT HANDLERS
+  // =======================
+  function carouselTransitionEndHandler(self) {
+    const {
+      index, direction, element, slides, options, isAnimating,
+    } = self;
+
+    // discontinue disposed instances
+    if (isAnimating && element[carouselComponent]) {
+      const activeItem = getActiveIndex(self);
+      const orientation = direction === 'left' ? 'next' : 'prev';
+      const directionClass = direction === 'left' ? 'start' : 'end';
+      self.isAnimating = false;
+
+      addClass(slides[index], activeClass);
+      removeClass(slides[activeItem], activeClass);
+
+      removeClass(slides[index], `${carouselItem}-${orientation}`);
+      removeClass(slides[index], `${carouselItem}-${directionClass}`);
+      removeClass(slides[activeItem], `${carouselItem}-${directionClass}`);
+
+      element.dispatchEvent(carouselSlidEvent);
+
+      // check for element, might have been disposed
+      if (!document.hidden && options.interval
+        && !hasClass(element, pausedClass)) {
+        self.cycle();
       }
     }
-    function resumeHandler() {
-      if ( ops.interval !== false && element.classList.contains('paused') ) {
-        element.classList.remove('paused');
-        !vars.isSliding && ( clearInterval(vars.timer), vars.timer = null );
-        !vars.isSliding && self.cycle();
+  }
+
+  function carouselPauseHandler(e) {
+    const eventTarget = e.target;
+    const self = eventTarget.closest(carouselSelector)[carouselComponent];
+    const { element, isAnimating } = self;
+
+    if (!hasClass(element, pausedClass)) {
+      addClass(element, pausedClass);
+      if (!isAnimating) {
+        clearInterval(self.timer);
+        self.timer = null;
       }
     }
-    function indicatorHandler(e) {
-      e.preventDefault();
-      if (vars.isSliding) { return; }
-      var eventTarget = e.target;
-      if ( eventTarget && !eventTarget.classList.contains('active') && eventTarget.getAttribute('data-slide-to') ) {
-        vars.index = parseInt( eventTarget.getAttribute('data-slide-to'));
-      } else { return false; }
-      self.slideTo( vars.index );
-    }
-    function controlsHandler(e) {
-      e.preventDefault();
-      if (vars.isSliding) { return; }
-      var eventTarget = e.currentTarget || e.srcElement;
-      if ( eventTarget === rightArrow ) {
-        vars.index++;
-      } else if ( eventTarget === leftArrow ) {
-        vars.index--;
-      }
-      self.slideTo( vars.index );
-    }
-    function keyHandler(ref) {
-      var which = ref.which;
-      if (vars.isSliding) { return; }
-      switch (which) {
-        case 39:
-          vars.index++;
-          break;
-        case 37:
-          vars.index--;
-          break;
-        default: return;
-      }
-      self.slideTo( vars.index );
-    }
-    function toggleEvents(action) {
-      action = action ? 'addEventListener' : 'removeEventListener';
-      if ( ops.pause && ops.interval ) {
-        element[action]( mouseHoverEvents[0], pauseHandler, false );
-        element[action]( mouseHoverEvents[1], resumeHandler, false );
-        element[action]( 'touchstart', pauseHandler, passiveHandler );
-        element[action]( 'touchend', resumeHandler, passiveHandler );
-      }
-      ops.touch && slides.length > 1 && element[action]( 'touchstart', touchDownHandler, passiveHandler );
-      rightArrow && rightArrow[action]( 'click', controlsHandler,false );
-      leftArrow && leftArrow[action]( 'click', controlsHandler,false );
-      indicator && indicator[action]( 'click', indicatorHandler,false );
-      ops.keyboard && window[action]( 'keydown', keyHandler,false );
-    }
-    function toggleTouchEvents(action) {
-      action = action ? 'addEventListener' : 'removeEventListener';
-      element[action]( 'touchmove', touchMoveHandler, passiveHandler );
-      element[action]( 'touchend', touchEndHandler, passiveHandler );
-    }
-    function touchDownHandler(e) {
-      if ( vars.isTouch ) { return; }
-      vars.touchPosition.startX = e.changedTouches[0].pageX;
-      if ( element.contains(e.target) ) {
-        vars.isTouch = true;
-        toggleTouchEvents(1);
+  }
+
+  function carouselResumeHandler(e) {
+    const eventTarget = e.target;
+    const self = eventTarget.closest(carouselSelector)[carouselComponent];
+    const { isPaused, isAnimating, element } = self;
+
+    if (!isPaused && hasClass(element, pausedClass)) {
+      removeClass(element, pausedClass);
+
+      if (!isAnimating) {
+        clearInterval(self.timer);
+        self.timer = null;
+        self.cycle();
       }
     }
-    function touchMoveHandler(e) {
-      if ( !vars.isTouch ) { e.preventDefault(); return; }
-      vars.touchPosition.currentX = e.changedTouches[0].pageX;
-      if ( e.type === 'touchmove' && e.changedTouches.length > 1 ) {
-        e.preventDefault();
-        return false;
-      }
+  }
+
+  function carouselIndicatorHandler(e) {
+    e.preventDefault();
+    const { target } = e;
+    const self = target.closest(carouselSelector)[carouselComponent];
+
+    if (self.isAnimating) return;
+
+    const newIndex = target.getAttribute(dataBsSlideTo);
+
+    if (target && !hasClass(target, activeClass) // event target is not active
+      && newIndex) { // AND has the specific attribute
+      self.to(+newIndex); // do the slide
     }
-    function touchEndHandler (e) {
-      if ( !vars.isTouch || vars.isSliding ) { return }
-      vars.touchPosition.endX = vars.touchPosition.currentX || e.changedTouches[0].pageX;
-      if ( vars.isTouch ) {
-        if ( (!element.contains(e.target) || !element.contains(e.relatedTarget) )
-            && Math.abs(vars.touchPosition.startX - vars.touchPosition.endX) < 75 ) {
-          return false;
-        } else {
-          if ( vars.touchPosition.currentX < vars.touchPosition.startX ) {
-            vars.index++;
-          } else if ( vars.touchPosition.currentX > vars.touchPosition.startX ) {
-            vars.index--;
-          }
-          vars.isTouch = false;
-          self.slideTo(vars.index);
-        }
-        toggleTouchEvents();
-      }
+  }
+
+  function carouselControlsHandler(e) {
+    e.preventDefault();
+    const that = this;
+    const self = that.closest(carouselSelector)[carouselComponent];
+    const { controls } = self;
+
+    if (controls[1] && that === controls[1]) {
+      self.next();
+    } else if (controls[1] && that === controls[0]) {
+      self.prev();
     }
-    function setActivePage(pageIndex) {
-      Array.from(indicators).map(function (x){x.classList.remove('active');});
-      indicators[pageIndex] && indicators[pageIndex].classList.add('active');
-    }
-    function transitionEndHandler(e){
-      if (vars.touchPosition){
-        var next = vars.index,
-            timeout = e && e.target !== slides[next] ? e.elapsedTime*1000+100 : 20,
-            activeItem = self.getActiveIndex(),
-            orientation = vars.direction === 'left' ? 'next' : 'prev';
-        vars.isSliding && setTimeout(function () {
-          if (vars.touchPosition){
-            vars.isSliding = false;
-            slides[next].classList.add('active');
-            slides[activeItem].classList.remove('active');
-            slides[next].classList.remove(("carousel-item-" + orientation));
-            slides[next].classList.remove(("carousel-item-" + (vars.direction)));
-            slides[activeItem].classList.remove(("carousel-item-" + (vars.direction)));
-            dispatchCustomEvent.call(element, slidCustomEvent);
-            if ( !document.hidden && ops.interval && !element.classList.contains('paused') ) {
-              self.cycle();
-            }
-          }
-        }, timeout);
-      }
+  }
+
+  function carouselKeyHandler({ which }) {
+    const [element] = Array.from(document.querySelectorAll(carouselSelector))
+      .filter((x) => isElementInScrollRange(x));
+
+    if (!element) return;
+    const self = element[carouselComponent];
+
+    switch (which) {
+      case 39:
+        self.next();
+        break;
+      case 37:
+        self.prev();
+        break;
     }
-    self.cycle = function () {
-      if (vars.timer) {
-        clearInterval(vars.timer);
-        vars.timer = null;
-      }
-      vars.timer = setInterval(function () {
-        var idx = vars.index || self.getActiveIndex();
-        isElementInScrollRange(element) && (idx++, self.slideTo( idx ) );
-      }, ops.interval);
-    };
-    self.slideTo = function (next) {
-      if (vars.isSliding) { return; }
-      var activeItem = self.getActiveIndex(), orientation, eventProperties;
-      if ( activeItem === next ) {
-        return;
-      } else if  ( (activeItem < next ) || (activeItem === 0 && next === slides.length -1 ) ) {
-        vars.direction = 'left';
-      } else if  ( (activeItem > next) || (activeItem === slides.length - 1 && next === 0 ) ) {
-        vars.direction = 'right';
-      }
-      if ( next < 0 ) { next = slides.length - 1; }
-      else if ( next >= slides.length ){ next = 0; }
-      orientation = vars.direction === 'left' ? 'next' : 'prev';
-      eventProperties = { relatedTarget: slides[next], direction: vars.direction, from: activeItem, to: next };
-      slideCustomEvent = bootstrapCustomEvent('slide', 'carousel', eventProperties);
-      slidCustomEvent = bootstrapCustomEvent('slid', 'carousel', eventProperties);
-      dispatchCustomEvent.call(element, slideCustomEvent);
-      if (slideCustomEvent.defaultPrevented) { return; }
-      vars.index = next;
-      vars.isSliding = true;
-      clearInterval(vars.timer);
-      vars.timer = null;
-      setActivePage( next );
-      if ( getElementTransitionDuration(slides[next]) && element.classList.contains('slide') ) {
-        slides[next].classList.add(("carousel-item-" + orientation));
-        slides[next].offsetWidth;
-        slides[next].classList.add(("carousel-item-" + (vars.direction)));
-        slides[activeItem].classList.add(("carousel-item-" + (vars.direction)));
-        emulateTransitionEnd(slides[next], transitionEndHandler);
-      } else {
-        slides[next].classList.add('active');
-        slides[next].offsetWidth;
-        slides[activeItem].classList.remove('active');
-        setTimeout(function () {
-          vars.isSliding = false;
-          if ( ops.interval && element && !element.classList.contains('paused') ) {
-            self.cycle();
-          }
-          dispatchCustomEvent.call(element, slidCustomEvent);
-        }, 100 );
-      }
-    };
-    self.getActiveIndex = function () { return Array.from(slides).indexOf(element.getElementsByClassName('carousel-item active')[0]) || 0; };
-    self.dispose = function () {
-      var itemClasses = ['left','right','prev','next'];
-      Array.from(slides).map(function (slide,idx) {
-        slide.classList.contains('active') && setActivePage( idx );
-        itemClasses.map(function (cls) { return slide.classList.remove(("carousel-item-" + cls)); });
-      });
-      clearInterval(vars.timer);
-      toggleEvents();
-      vars = {};
-      ops = {};
-      delete element.Carousel;
-    };
-    element = queryElement( element );
-    element.Carousel && element.Carousel.dispose();
-    slides = element.getElementsByClassName('carousel-item');
-    leftArrow = element.getElementsByClassName('carousel-control-prev')[0];
-    rightArrow = element.getElementsByClassName('carousel-control-next')[0];
-    indicator = element.getElementsByClassName('carousel-indicators')[0];
-    indicators = indicator && indicator.getElementsByTagName( "LI" ) || [];
-    if (slides.length < 2) { return }
-    var
-      intervalAttribute = element.getAttribute('data-interval'),
-      intervalData = intervalAttribute === 'false' ? 0 : parseInt(intervalAttribute),
-      touchData = element.getAttribute('data-touch') === 'false' ? 0 : 1,
-      pauseData = element.getAttribute('data-pause') === 'hover' || false,
-      keyboardData = element.getAttribute('data-keyboard') === 'true' || false,
-      intervalOption = options.interval,
-      touchOption = options.touch;
-    ops = {};
-    ops.keyboard = options.keyboard === true || keyboardData;
-    ops.pause = (options.pause === 'hover' || pauseData) ? 'hover' : false;
-    ops.touch = touchOption || touchData;
-    ops.interval = typeof intervalOption === 'number' ? intervalOption
-                : intervalOption === false || intervalData === 0 || intervalData === false ? 0
-                : isNaN(intervalData) ? 5000
-                : intervalData;
-    if (self.getActiveIndex()<0) {
-      slides.length && slides[0].classList.add('active');
-      indicators.length && setActivePage(0);
-    }
-    vars = {};
-    vars.direction = 'left';
-    vars.index = 0;
-    vars.timer = null;
-    vars.isSliding = false;
-    vars.isTouch = false;
-    vars.touchPosition = {
-      startX : 0,
-      currentX : 0,
-      endX : 0
-    };
-    toggleEvents(1);
-    if ( ops.interval ){ self.cycle(); }
-    element.Carousel = self;
-  }
-
-  function Collapse(element,options) {
-    options = options || {};
-    var self = this;
-    var accordion = null,
-        collapse = null,
-        activeCollapse,
-        activeElement,
-        showCustomEvent,
-        shownCustomEvent,
-        hideCustomEvent,
-        hiddenCustomEvent;
-    function openAction(collapseElement, toggle) {
-      dispatchCustomEvent.call(collapseElement, showCustomEvent);
-      if ( showCustomEvent.defaultPrevented ) { return; }
-      collapseElement.isAnimating = true;
-      collapseElement.classList.add('collapsing');
-      collapseElement.classList.remove('collapse');
-      collapseElement.style.height = (collapseElement.scrollHeight) + "px";
-      emulateTransitionEnd(collapseElement, function () {
-        collapseElement.isAnimating = false;
-        collapseElement.setAttribute('aria-expanded','true');
-        toggle.setAttribute('aria-expanded','true');
-        collapseElement.classList.remove('collapsing');
-        collapseElement.classList.add('collapse');
-        collapseElement.classList.add('show');
-        collapseElement.style.height = '';
-        dispatchCustomEvent.call(collapseElement, shownCustomEvent);
-      });
+  }
+
+  // CAROUSEL TOUCH HANDLERS
+  // =======================
+  function carouselTouchDownHandler(e) {
+    const element = this;
+    const self = element[carouselComponent];
+
+    if (!self || self.isTouch) { return; }
+
+    startX = e.changedTouches[0].pageX;
+
+    if (element.contains(e.target)) {
+      self.isTouch = true;
+      toggleCarouselTouchHandlers(self, 1);
     }
-    function closeAction(collapseElement, toggle) {
-      dispatchCustomEvent.call(collapseElement, hideCustomEvent);
-      if ( hideCustomEvent.defaultPrevented ) { return; }
-      collapseElement.isAnimating = true;
-      collapseElement.style.height = (collapseElement.scrollHeight) + "px";
-      collapseElement.classList.remove('collapse');
-      collapseElement.classList.remove('show');
-      collapseElement.classList.add('collapsing');
-      collapseElement.offsetWidth;
-      collapseElement.style.height = '0px';
-      emulateTransitionEnd(collapseElement, function () {
-        collapseElement.isAnimating = false;
-        collapseElement.setAttribute('aria-expanded','false');
-        toggle.setAttribute('aria-expanded','false');
-        collapseElement.classList.remove('collapsing');
-        collapseElement.classList.add('collapse');
-        collapseElement.style.height = '';
-        dispatchCustomEvent.call(collapseElement, hiddenCustomEvent);
-      });
+  }
+
+  function carouselTouchMoveHandler(e) {
+    const { changedTouches, type } = e;
+    const self = this[carouselComponent];
+
+    if (!self || !self.isTouch) { return; }
+
+    currentX = changedTouches[0].pageX;
+
+    // cancel touch if more than one changedTouches detected
+    if (type === 'touchmove' && changedTouches.length > 1) {
+      e.preventDefault();
     }
-    self.toggle = function (e) {
-      if (e && e.target.tagName === 'A' || element.tagName === 'A') {e.preventDefault();}
-      if (element.contains(e.target) || e.target === element) {
-        if (!collapse.classList.contains('show')) { self.show(); }
-        else { self.hide(); }
-      }
-    };
-    self.hide = function () {
-      if ( collapse.isAnimating ) { return; }
-      closeAction(collapse,element);
-      element.classList.add('collapsed');
-    };
-    self.show = function () {
-      if ( accordion ) {
-        activeCollapse = accordion.getElementsByClassName("collapse show")[0];
-        activeElement = activeCollapse && (queryElement(("[data-target=\"#" + (activeCollapse.id) + "\"]"),accordion)
-                      || queryElement(("[href=\"#" + (activeCollapse.id) + "\"]"),accordion) );
-      }
-      if ( !collapse.isAnimating ) {
-        if ( activeElement && activeCollapse !== collapse ) {
-          closeAction(activeCollapse,activeElement);
-          activeElement.classList.add('collapsed');
-        }
-        openAction(collapse,element);
-        element.classList.remove('collapsed');
-      }
-    };
-    self.dispose = function () {
-      element.removeEventListener('click',self.toggle,false);
-      delete element.Collapse;
-    };
-      element = queryElement(element);
-      element.Collapse && element.Collapse.dispose();
-      var accordionData = element.getAttribute('data-parent');
-      showCustomEvent = bootstrapCustomEvent('show', 'collapse');
-      shownCustomEvent = bootstrapCustomEvent('shown', 'collapse');
-      hideCustomEvent = bootstrapCustomEvent('hide', 'collapse');
-      hiddenCustomEvent = bootstrapCustomEvent('hidden', 'collapse');
-      collapse = queryElement(options.target || element.getAttribute('data-target') || element.getAttribute('href'));
-      collapse.isAnimating = false;
-      accordion = element.closest(options.parent || accordionData);
-      if ( !element.Collapse ) {
-        element.addEventListener('click',self.toggle,false);
-      }
-      element.Collapse = self;
-  }
-
-  function setFocus (element){
-    element.focus ? element.focus() : element.setActive();
-  }
-
-  function Dropdown(element,option) {
-    var self = this,
-        showCustomEvent,
-        shownCustomEvent,
-        hideCustomEvent,
-        hiddenCustomEvent,
-        relatedTarget = null,
-        parent, menu, menuItems = [],
-        persist;
-    function preventEmptyAnchor(anchor) {
-      (anchor.href && anchor.href.slice(-1) === '#' || anchor.parentNode && anchor.parentNode.href
-        && anchor.parentNode.href.slice(-1) === '#') && this.preventDefault();
-    }
-    function toggleDismiss() {
-      var action = element.open ? 'addEventListener' : 'removeEventListener';
-      document[action]('click',dismissHandler,false);
-      document[action]('keydown',preventScroll,false);
-      document[action]('keyup',keyHandler,false);
-      document[action]('focus',dismissHandler,false);
-    }
-    function dismissHandler(e) {
-      var eventTarget = e.target,
-            hasData = eventTarget && (eventTarget.getAttribute('data-toggle')
-                                  || eventTarget.parentNode && eventTarget.parentNode.getAttribute
-                                  && eventTarget.parentNode.getAttribute('data-toggle'));
-      if ( e.type === 'focus' && (eventTarget === element || eventTarget === menu || menu.contains(eventTarget) ) ) {
+  }
+
+  function carouselTouchEndHandler(e) {
+    const element = this;
+    const self = element[carouselComponent];
+
+    if (!self || !self.isTouch) { return; }
+
+    endX = currentX || e.changedTouches[0].pageX;
+
+    if (self.isTouch) {
+      // the event target is outside the carousel OR carousel doens't include the related target
+      if ((!element.contains(e.target) || !element.contains(e.relatedTarget))
+        && Math.abs(startX - endX) < 75) { // AND swipe distance is less than 75px
+        // when the above conditions are satisfied, no need to continue
         return;
+      } // OR determine next index to slide to
+      if (currentX < startX) {
+        self.index += 1;
+      } else if (currentX > startX) {
+        self.index -= 1;
       }
-      if ( (eventTarget === menu || menu.contains(eventTarget)) && (persist || hasData) ) { return; }
-      else {
-        relatedTarget = eventTarget === element || element.contains(eventTarget) ? element : null;
-        self.hide();
-      }
-      preventEmptyAnchor.call(e,eventTarget);
-    }
-    function clickHandler(e) {
-      relatedTarget = element;
-      self.show();
-      preventEmptyAnchor.call(e,e.target);
-    }
-    function preventScroll(e) {
-      var key = e.which || e.keyCode;
-      if( key === 38 || key === 40 ) { e.preventDefault(); }
-    }
-    function keyHandler(e) {
-      var key = e.which || e.keyCode,
-          activeItem = document.activeElement,
-          isSameElement = activeItem === element,
-          isInsideMenu = menu.contains(activeItem),
-          isMenuItem = activeItem.parentNode === menu || activeItem.parentNode.parentNode === menu,
-          idx = menuItems.indexOf(activeItem);
-      if ( isMenuItem ) {
-        idx = isSameElement ? 0
-                            : key === 38 ? (idx>1?idx-1:0)
-                            : key === 40 ? (idx<menuItems.length-1?idx+1:idx) : idx;
-        menuItems[idx] && setFocus(menuItems[idx]);
-      }
-      if ( (menuItems.length && isMenuItem
-            || !menuItems.length && (isInsideMenu || isSameElement)
-            || !isInsideMenu )
-            && element.open && key === 27
-      ) {
-        self.toggle();
-        relatedTarget = null;
-      }
+
+      self.isTouch = false;
+      self.to(self.index); // do the slide
+
+      toggleCarouselTouchHandlers(self); // remove touch events handlers
     }
-    self.show = function () {
-      showCustomEvent = bootstrapCustomEvent('show', 'dropdown', { relatedTarget: relatedTarget });
-      dispatchCustomEvent.call(parent, showCustomEvent);
-      if ( showCustomEvent.defaultPrevented ) { return; }
-      menu.classList.add('show');
-      parent.classList.add('show');
-      element.setAttribute('aria-expanded',true);
-      element.open = true;
-      element.removeEventListener('click',clickHandler,false);
-      setTimeout(function () {
-        setFocus( menu.getElementsByTagName('INPUT')[0] || element );
-        toggleDismiss();
-        shownCustomEvent = bootstrapCustomEvent('shown', 'dropdown', { relatedTarget: relatedTarget });
-        dispatchCustomEvent.call(parent, shownCustomEvent);
-      },1);
-    };
-    self.hide = function () {
-      hideCustomEvent = bootstrapCustomEvent('hide', 'dropdown', { relatedTarget: relatedTarget });
-      dispatchCustomEvent.call(parent, hideCustomEvent);
-      if ( hideCustomEvent.defaultPrevented ) { return; }
-      menu.classList.remove('show');
-      parent.classList.remove('show');
-      element.setAttribute('aria-expanded',false);
-      element.open = false;
-      toggleDismiss();
-      setFocus(element);
-      setTimeout(function () {
-        element.Dropdown && element.addEventListener('click',clickHandler,false);
-      },1);
-      hiddenCustomEvent = bootstrapCustomEvent('hidden', 'dropdown', { relatedTarget: relatedTarget });
-      dispatchCustomEvent.call(parent, hiddenCustomEvent);
-    };
-    self.toggle = function () {
-      if (parent.classList.contains('show') && element.open) { self.hide(); }
-      else { self.show(); }
-    };
-    self.dispose = function () {
-      if (parent.classList.contains('show') && element.open) { self.hide(); }
-      element.removeEventListener('click',clickHandler,false);
-      delete element.Dropdown;
-    };
-    element = queryElement(element);
-    element.Dropdown && element.Dropdown.dispose();
-    parent = element.parentNode;
-    menu = queryElement('.dropdown-menu', parent);
-    Array.from(menu.children).map(function (child){
-      child.children.length && (child.children[0].tagName === 'A' && menuItems.push(child.children[0]));
-      child.tagName === 'A' && menuItems.push(child);
-    });
-    if ( !element.Dropdown ) {
-      !('tabindex' in menu) && menu.setAttribute('tabindex', '0');
-      element.addEventListener('click',clickHandler,false);
-    }
-    persist = option === true || element.getAttribute('data-persist') === 'true' || false;
-    element.open = false;
-    element.Dropdown = self;
-  }
-
-  function Modal(element,options) {
-    options = options || {};
-    var self = this, modal,
-      showCustomEvent,
-      shownCustomEvent,
-      hideCustomEvent,
-      hiddenCustomEvent,
-      relatedTarget = null,
-      scrollBarWidth,
-      overlay,
-      overlayDelay,
-      fixedItems,
-      ops = {};
-    function setScrollbar() {
-      var openModal = document.body.classList.contains('modal-open'),
-          bodyPad = parseInt(getComputedStyle(document.body).paddingRight),
-          bodyOverflow = document.documentElement.clientHeight !== document.documentElement.scrollHeight
-                      || document.body.clientHeight !== document.body.scrollHeight,
-          modalOverflow = modal.clientHeight !== modal.scrollHeight;
-      scrollBarWidth = measureScrollbar();
-      modal.style.paddingRight = !modalOverflow && scrollBarWidth ? (scrollBarWidth + "px") : '';
-      document.body.style.paddingRight = modalOverflow || bodyOverflow ? ((bodyPad + (openModal ? 0:scrollBarWidth)) + "px") : '';
-      fixedItems.length && fixedItems.map(function (fixed){
-        var itemPad = getComputedStyle(fixed).paddingRight;
-        fixed.style.paddingRight = modalOverflow || bodyOverflow ? ((parseInt(itemPad) + (openModal?0:scrollBarWidth)) + "px") : ((parseInt(itemPad)) + "px");
-      });
+  }
+
+  // CAROUSEL PRIVATE METHODS
+  // ========================
+  function activateCarouselIndicator(self, pageIndex) { // indicators
+    const { indicators } = self;
+    Array.from(indicators).forEach((x) => removeClass(x, activeClass));
+    if (self.indicators[pageIndex]) addClass(indicators[pageIndex], activeClass);
+  }
+
+  function toggleCarouselTouchHandlers(self, add) {
+    const { element } = self;
+    const action = add ? addEventListener : removeEventListener;
+    element[action]('touchmove', carouselTouchMoveHandler, passiveHandler);
+    element[action]('touchend', carouselTouchEndHandler, passiveHandler);
+  }
+
+  function toggleCarouselHandlers(self, add) {
+    const {
+      element, options, slides, controls, indicator,
+    } = self;
+    const {
+      touch, pause, interval, keyboard,
+    } = options;
+    const action = add ? addEventListener : removeEventListener;
+
+    if (pause && interval) {
+      element[action]('mouseenter', carouselPauseHandler);
+      element[action]('mouseleave', carouselResumeHandler);
+      element[action]('touchstart', carouselPauseHandler, passiveHandler);
+      element[action]('touchend', carouselResumeHandler, passiveHandler);
     }
-    function resetScrollbar() {
-      document.body.style.paddingRight = '';
-      modal.style.paddingRight = '';
-      fixedItems.length && fixedItems.map(function (fixed){
-        fixed.style.paddingRight = '';
-      });
+
+    if (touch && slides.length > 1) {
+      element[action]('touchstart', carouselTouchDownHandler, passiveHandler);
     }
-    function measureScrollbar() {
-      var scrollDiv = document.createElement('div'), widthValue;
-      scrollDiv.className = 'modal-scrollbar-measure';
-      document.body.appendChild(scrollDiv);
-      widthValue = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-      document.body.removeChild(scrollDiv);
-      return widthValue;
-    }
-    function createOverlay() {
-      var newOverlay = document.createElement('div');
-      overlay = queryElement('.modal-backdrop');
-      if ( overlay === null ) {
-        newOverlay.setAttribute('class', 'modal-backdrop' + (ops.animation ? ' fade' : ''));
-        overlay = newOverlay;
-        document.body.appendChild(overlay);
+
+    controls.forEach((arrow) => {
+      if (arrow) arrow[action]('click', carouselControlsHandler);
+    });
+
+    if (indicator) indicator[action]('click', carouselIndicatorHandler);
+    if (keyboard) window[action]('keydown', carouselKeyHandler);
+  }
+
+  function getActiveIndex(self) {
+    const { slides, element } = self;
+    return Array.from(slides)
+      .indexOf(element.getElementsByClassName(`${carouselItem} ${activeClass}`)[0]) || 0;
+  }
+
+  // CAROUSEL DEFINITION
+  // ===================
+  class Carousel extends BaseComponent {
+    constructor(target, config) {
+      super(carouselComponent, target, defaultCarouselOptions, config);
+      // bind
+      const self = this;
+
+      // additional properties
+      self.timer = null;
+      self.direction = 'left';
+      self.isPaused = false;
+      self.isAnimating = false;
+      self.index = 0;
+      self.timer = null;
+      self.isTouch = false;
+
+      // initialization element
+      const { element } = self;
+      // carousel elements
+      // a LIVE collection is prefferable
+      self.slides = element.getElementsByClassName(carouselItem);
+      const { slides } = self;
+
+      // invalidate when not enough items
+      // no need to go further
+      if (slides.length < 2) { return; }
+
+      self.controls = [
+        queryElement(`.${carouselControl}-prev`, element),
+        queryElement(`.${carouselControl}-next`, element),
+      ];
+
+      // a LIVE collection is prefferable
+      self.indicator = queryElement('.carousel-indicators', element);
+      self.indicators = (self.indicator && self.indicator.querySelectorAll(`[${dataBsSlideTo}]`)) || [];
+
+      // set JavaScript and DATA API options
+      const { options } = self;
+
+      // don't use TRUE as interval, it's actually 0, use the default 5000ms better
+      self.options.interval = options.interval === true
+        ? defaultCarouselOptions.interval
+        : options.interval;
+
+      // set first slide active if none
+      if (getActiveIndex(self) < 0) {
+        if (slides.length) addClass(slides[0], activeClass);
+        if (self.indicators.length) activateCarouselIndicator(self, 0);
       }
-      return overlay;
+
+      // attach event handlers
+      toggleCarouselHandlers(self, 1);
+
+      // start to cycle if interval is set
+      if (options.interval) self.cycle();
     }
-    function removeOverlay () {
-      overlay = queryElement('.modal-backdrop');
-      if ( overlay && !document.getElementsByClassName('modal show')[0] ) {
-        document.body.removeChild(overlay); overlay = null;
-      }
-      overlay === null && (document.body.classList.remove('modal-open'), resetScrollbar());
-    }
-    function toggleEvents(action) {
-      action = action ? 'addEventListener' : 'removeEventListener';
-      window[action]( 'resize', self.update, passiveHandler);
-      modal[action]( 'click',dismissHandler,false);
-      document[action]( 'keydown',keyHandler,false);
-    }
-    function beforeShow() {
-      modal.style.display = 'block';
-      setScrollbar();
-      !document.getElementsByClassName('modal show')[0] && document.body.classList.add('modal-open');
-      modal.classList.add('show');
-      modal.setAttribute('aria-hidden', false);
-      modal.classList.contains('fade') ? emulateTransitionEnd(modal, triggerShow) : triggerShow();
-    }
-    function triggerShow() {
-      setFocus(modal);
-      modal.isAnimating = false;
-      toggleEvents(1);
-      shownCustomEvent = bootstrapCustomEvent('shown', 'modal', { relatedTarget: relatedTarget });
-      dispatchCustomEvent.call(modal, shownCustomEvent);
-    }
-    function triggerHide(force) {
-      modal.style.display = '';
-      element && (setFocus(element));
-      overlay = queryElement('.modal-backdrop');
-      if (force !== 1 && overlay && overlay.classList.contains('show') && !document.getElementsByClassName('modal show')[0]) {
-        overlay.classList.remove('show');
-        emulateTransitionEnd(overlay,removeOverlay);
-      } else {
-        removeOverlay();
-      }
-      toggleEvents();
-      modal.isAnimating = false;
-      hiddenCustomEvent = bootstrapCustomEvent('hidden', 'modal');
-      dispatchCustomEvent.call(modal, hiddenCustomEvent);
-    }
-    function clickHandler(e) {
-      if ( modal.isAnimating ) { return; }
-      var clickTarget = e.target,
-          modalID = "#" + (modal.getAttribute('id')),
-          targetAttrValue = clickTarget.getAttribute('data-target') || clickTarget.getAttribute('href'),
-          elemAttrValue = element.getAttribute('data-target') || element.getAttribute('href');
-      if ( !modal.classList.contains('show')
-          && (clickTarget === element && targetAttrValue === modalID
-          || element.contains(clickTarget) && elemAttrValue === modalID) ) {
-        modal.modalTrigger = element;
-        relatedTarget = element;
-        self.show();
-        e.preventDefault();
+
+    // CAROUSEL PUBLIC METHODS
+    // =======================
+    cycle() {
+      const self = this;
+      const { isPaused, element, options } = self;
+      if (self.timer) {
+        clearInterval(self.timer);
+        self.timer = null;
       }
-    }
-    function keyHandler(ref) {
-      var which = ref.which;
-      if (!modal.isAnimating && ops.keyboard && which == 27 && modal.classList.contains('show') ) {
-        self.hide();
+
+      if (isPaused) {
+        removeClass(element, pausedClass);
+        self.isPaused = !isPaused;
       }
+
+      self.timer = setInterval(() => {
+        if (isElementInScrollRange(element)) {
+          self.index += 1;
+          self.to(self.index);
+        }
+      }, options.interval);
     }
-    function dismissHandler(e) {
-      if ( modal.isAnimating ) { return; }
-      var clickTarget = e.target,
-          hasData = clickTarget.getAttribute('data-dismiss') === 'modal',
-          parentWithData = clickTarget.closest('[data-dismiss="modal"]');
-      if ( modal.classList.contains('show') && ( parentWithData || hasData
-          || clickTarget === modal && ops.backdrop !== 'static' ) ) {
-        self.hide(); relatedTarget = null;
-        e.preventDefault();
+
+    pause() {
+      const self = this;
+      const { element, options, isPaused } = self;
+      if (options.interval && !isPaused) {
+        clearInterval(self.timer);
+        self.timer = null;
+        addClass(element, pausedClass);
+        self.isPaused = !isPaused;
       }
     }
-    self.toggle = function () {
-      if ( modal.classList.contains('show') ) {self.hide();} else {self.show();}
-    };
-    self.show = function () {
-      if (modal.classList.contains('show') && !!modal.isAnimating ) {return}
-      showCustomEvent = bootstrapCustomEvent('show', 'modal', { relatedTarget: relatedTarget });
-      dispatchCustomEvent.call(modal, showCustomEvent);
-      if ( showCustomEvent.defaultPrevented ) { return; }
-      modal.isAnimating = true;
-      var currentOpen = document.getElementsByClassName('modal show')[0];
-      if (currentOpen && currentOpen !== modal) {
-        currentOpen.modalTrigger && currentOpen.modalTrigger.Modal.hide();
-        currentOpen.Modal && currentOpen.Modal.hide();
-      }
-      if ( ops.backdrop ) {
-        overlay = createOverlay();
-      }
-      if ( overlay && !currentOpen && !overlay.classList.contains('show') ) {
-        overlay.offsetWidth;
-        overlayDelay = getElementTransitionDuration(overlay);
-        overlay.classList.add('show');
-      }
-      !currentOpen ? setTimeout( beforeShow, overlay && overlayDelay ? overlayDelay:0 ) : beforeShow();
-    };
-    self.hide = function (force) {
-      if ( !modal.classList.contains('show') ) {return}
-      hideCustomEvent = bootstrapCustomEvent( 'hide', 'modal');
-      dispatchCustomEvent.call(modal, hideCustomEvent);
-      if ( hideCustomEvent.defaultPrevented ) { return; }
-      modal.isAnimating = true;
-      modal.classList.remove('show');
-      modal.setAttribute('aria-hidden', true);
-      modal.classList.contains('fade') && force !== 1 ? emulateTransitionEnd(modal, triggerHide) : triggerHide();
-    };
-    self.setContent = function (content) {
-      queryElement('.modal-content',modal).innerHTML = content;
-    };
-    self.update = function () {
-      if (modal.classList.contains('show')) {
-        setScrollbar();
-      }
-    };
-    self.dispose = function () {
-      self.hide(1);
-      if (element) {element.removeEventListener('click',clickHandler,false); delete element.Modal; }
-      else {delete modal.Modal;}
-    };
-    element = queryElement(element);
-    var checkModal = queryElement( element.getAttribute('data-target') || element.getAttribute('href') );
-    modal = element.classList.contains('modal') ? element : checkModal;
-    fixedItems = Array.from(document.getElementsByClassName('fixed-top'))
-                      .concat(Array.from(document.getElementsByClassName('fixed-bottom')));
-    if ( element.classList.contains('modal') ) { element = null; }
-    element && element.Modal && element.Modal.dispose();
-    modal && modal.Modal && modal.Modal.dispose();
-    ops.keyboard = options.keyboard === false || modal.getAttribute('data-keyboard') === 'false' ? false : true;
-    ops.backdrop = options.backdrop === 'static' || modal.getAttribute('data-backdrop') === 'static' ? 'static' : true;
-    ops.backdrop = options.backdrop === false || modal.getAttribute('data-backdrop') === 'false' ? false : ops.backdrop;
-    ops.animation = modal.classList.contains('fade') ? true : false;
-    ops.content = options.content;
-    modal.isAnimating = false;
-    if ( element && !element.Modal ) {
-      element.addEventListener('click',clickHandler,false);
-    }
-    if ( ops.content ) {
-      self.setContent( ops.content.trim() );
-    }
-    if (element) {
-      modal.modalTrigger = element;
-      element.Modal = self;
-    } else {
-      modal.Modal = self;
-    }
-  }
-
-  var mouseClickEvents = { down: 'mousedown', up: 'mouseup' };
-
-  function getScroll() {
-    return {
-      y : window.pageYOffset || document.documentElement.scrollTop,
-      x : window.pageXOffset || document.documentElement.scrollLeft
-    }
-  }
-
-  function styleTip(link,element,position,parent) {
-    var tipPositions = /\b(top|bottom|left|right)+/,
-        elementDimensions = { w : element.offsetWidth, h: element.offsetHeight },
-        windowWidth = (document.documentElement.clientWidth || document.body.clientWidth),
-        windowHeight = (document.documentElement.clientHeight || document.body.clientHeight),
-        rect = link.getBoundingClientRect(),
-        scroll = parent === document.body ? getScroll() : { x: parent.offsetLeft + parent.scrollLeft, y: parent.offsetTop + parent.scrollTop },
-        linkDimensions = { w: rect.right - rect.left, h: rect.bottom - rect.top },
-        isPopover = element.classList.contains('popover'),
-        arrow = element.getElementsByClassName('arrow')[0],
-        halfTopExceed = rect.top + linkDimensions.h/2 - elementDimensions.h/2 < 0,
-        halfLeftExceed = rect.left + linkDimensions.w/2 - elementDimensions.w/2 < 0,
-        halfRightExceed = rect.left + elementDimensions.w/2 + linkDimensions.w/2 >= windowWidth,
-        halfBottomExceed = rect.top + elementDimensions.h/2 + linkDimensions.h/2 >= windowHeight,
-        topExceed = rect.top - elementDimensions.h < 0,
-        leftExceed = rect.left - elementDimensions.w < 0,
-        bottomExceed = rect.top + elementDimensions.h + linkDimensions.h >= windowHeight,
-        rightExceed = rect.left + elementDimensions.w + linkDimensions.w >= windowWidth;
-    position = (position === 'left' || position === 'right') && leftExceed && rightExceed ? 'top' : position;
-    position = position === 'top' && topExceed ? 'bottom' : position;
-    position = position === 'bottom' && bottomExceed ? 'top' : position;
-    position = position === 'left' && leftExceed ? 'right' : position;
-    position = position === 'right' && rightExceed ? 'left' : position;
-    var topPosition,
-      leftPosition,
-      arrowTop,
-      arrowLeft,
-      arrowWidth,
-      arrowHeight;
-    element.className.indexOf(position) === -1 && (element.className = element.className.replace(tipPositions,position));
-    arrowWidth = arrow.offsetWidth; arrowHeight = arrow.offsetHeight;
-    if ( position === 'left' || position === 'right' ) {
-      if ( position === 'left' ) {
-        leftPosition = rect.left + scroll.x - elementDimensions.w - ( isPopover ? arrowWidth : 0 );
-      } else {
-        leftPosition = rect.left + scroll.x + linkDimensions.w;
-      }
-      if (halfTopExceed) {
-        topPosition = rect.top + scroll.y;
-        arrowTop = linkDimensions.h/2 - arrowWidth;
-      } else if (halfBottomExceed) {
-        topPosition = rect.top + scroll.y - elementDimensions.h + linkDimensions.h;
-        arrowTop = elementDimensions.h - linkDimensions.h/2 - arrowWidth;
-      } else {
-        topPosition = rect.top + scroll.y - elementDimensions.h/2 + linkDimensions.h/2;
-        arrowTop = elementDimensions.h/2 - (isPopover ? arrowHeight*0.9 : arrowHeight/2);
-      }
-    } else if ( position === 'top' || position === 'bottom' ) {
-      if ( position === 'top') {
-        topPosition =  rect.top + scroll.y - elementDimensions.h - ( isPopover ? arrowHeight : 0 );
-      } else {
-        topPosition = rect.top + scroll.y + linkDimensions.h;
-      }
-      if (halfLeftExceed) {
-        leftPosition = 0;
-        arrowLeft = rect.left + linkDimensions.w/2 - arrowWidth;
-      } else if (halfRightExceed) {
-        leftPosition = windowWidth - elementDimensions.w*1.01;
-        arrowLeft = elementDimensions.w - ( windowWidth - rect.left ) + linkDimensions.w/2 - arrowWidth/2;
-      } else {
-        leftPosition = rect.left + scroll.x - elementDimensions.w/2 + linkDimensions.w/2;
-        arrowLeft = elementDimensions.w/2 - ( isPopover ? arrowWidth : arrowWidth/2 );
-      }
+
+    next() {
+      const self = this;
+      if (!self.isAnimating) { self.index += 1; self.to(self.index); }
     }
-    element.style.top = topPosition + 'px';
-    element.style.left = leftPosition + 'px';
-    arrowTop && (arrow.style.top = arrowTop + 'px');
-    arrowLeft && (arrow.style.left = arrowLeft + 'px');
-  }
-
-  function Popover(element,options) {
-    options = options || {};
-    var self = this;
-    var popover = null,
-        timer = 0,
-        isIphone = /(iPhone|iPod|iPad)/.test(navigator.userAgent),
-        titleString,
-        contentString,
-        ops = {};
-    var triggerData,
-        animationData,
-        placementData,
-        dismissibleData,
-        delayData,
-        containerData,
-        closeBtn,
-        showCustomEvent,
-        shownCustomEvent,
-        hideCustomEvent,
-        hiddenCustomEvent,
-        containerElement,
-        containerDataElement,
-        modal,
-        navbarFixedTop,
-        navbarFixedBottom,
-        placementClass;
-    function dismissibleHandler(e) {
-      if (popover !== null && e.target === queryElement('.close',popover)) {
-        self.hide();
-      }
+
+    prev() {
+      const self = this;
+      if (!self.isAnimating) { self.index -= 1; self.to(self.index); }
     }
-    function getContents() {
-      return {
-        0 : options.title || element.getAttribute('data-title') || null,
-        1 : options.content || element.getAttribute('data-content') || null
+
+    to(idx) {
+      const self = this;
+      const {
+        element, isAnimating, slides, options,
+      } = self;
+      const activeItem = getActiveIndex(self);
+      let next = idx;
+
+      // when controled via methods, make sure to check again
+      // first return if we're on the same item #227
+      if (isAnimating || activeItem === next) return;
+
+      // determine transition direction
+      if ((activeItem < next) || (activeItem === 0 && next === slides.length - 1)) {
+        self.direction = 'left'; // next
+      } else if ((activeItem > next) || (activeItem === slides.length - 1 && next === 0)) {
+        self.direction = 'right'; // prev
       }
-    }
-    function removePopover() {
-      ops.container.removeChild(popover);
-      timer = null; popover = null;
-    }
-    function createPopover() {
-      titleString = getContents()[0] || null;
-      contentString = getContents()[1];
-      contentString = !!contentString ? contentString.trim() : null;
-      popover = document.createElement('div');
-      var popoverArrow = document.createElement('div');
-      popoverArrow.classList.add('arrow');
-      popover.appendChild(popoverArrow);
-      if ( contentString !== null && ops.template === null ) {
-        popover.setAttribute('role','tooltip');
-        if (titleString !== null) {
-          var popoverTitle = document.createElement('h3');
-          popoverTitle.classList.add('popover-header');
-          popoverTitle.innerHTML = ops.dismissible ? titleString + closeBtn : titleString;
-          popover.appendChild(popoverTitle);
+      const { direction } = self;
+
+      // find the right next index
+      if (next < 0) { next = slides.length - 1; } else if (next >= slides.length) { next = 0; }
+
+      // orientation, class name, eventProperties
+      const orientation = direction === 'left' ? 'next' : 'prev';
+      const directionClass = direction === 'left' ? 'start' : 'end';
+      const eventProperties = {
+        relatedTarget: slides[next], direction, from: activeItem, to: next,
+      };
+
+      // update event properties
+      Object.keys(eventProperties).forEach((k) => {
+        carouselSlideEvent[k] = eventProperties[k];
+        carouselSlidEvent[k] = eventProperties[k];
+      });
+
+      // discontinue when prevented
+      element.dispatchEvent(carouselSlideEvent);
+      if (carouselSlideEvent.defaultPrevented) return;
+
+      // update index
+      self.index = next;
+
+      clearInterval(self.timer);
+      self.timer = null;
+
+      self.isAnimating = true;
+      activateCarouselIndicator(self, next);
+
+      if (getElementTransitionDuration(slides[next]) && hasClass(element, 'slide')) {
+        addClass(slides[next], `${carouselItem}-${orientation}`);
+        reflow(slides[next]);
+        addClass(slides[next], `${carouselItem}-${directionClass}`);
+        addClass(slides[activeItem], `${carouselItem}-${directionClass}`);
+
+        emulateTransitionEnd(slides[next], () => carouselTransitionEndHandler(self));
+      } else {
+        addClass(slides[next], activeClass);
+        removeClass(slides[activeItem], activeClass);
+
+        setTimeout(() => {
+          self.isAnimating = false;
+
+          // check for element, might have been disposed
+          if (element && options.interval && !hasClass(element, pausedClass)) {
+            self.cycle();
+          }
+
+          element.dispatchEvent(carouselSlidEvent);
+        }, 100);
+      }
+    }
+
+    dispose() {
+      const self = this;
+      const { slides } = self;
+      const itemClasses = ['start', 'end', 'prev', 'next'];
+
+      Array.from(slides).forEach((slide, idx) => {
+        if (hasClass(slide, activeClass)) activateCarouselIndicator(self, idx);
+        itemClasses.forEach((c) => removeClass(slide, `${carouselItem}-${c}`));
+      });
+
+      toggleCarouselHandlers(self);
+      clearInterval(self.timer);
+      super.dispose(carouselComponent);
+    }
+  }
+
+  Carousel.init = {
+    component: carouselComponent,
+    selector: carouselSelector,
+    constructor: Carousel,
+  };
+
+  const ariaExpanded = 'aria-expanded';
+
+  // collapse / tab
+  const collapsingClass = 'collapsing';
+
+  const dataBsTarget = 'data-bs-target';
+
+  const dataBsParent = 'data-bs-parent';
+
+  const dataBsContainer = 'data-bs-container';
+
+  function getTargetElement(element) {
+    return queryElement(element.getAttribute(dataBsTarget) || element.getAttribute('href'))
+          || element.closest(element.getAttribute(dataBsParent))
+          || queryElement(element.getAttribute(dataBsContainer));
+  }
+
+  /* Native JavaScript for Bootstrap 5 | Collapse
+  ----------------------------------------------- */
+
+  // COLLAPSE GC
+  // ===========
+  const collapseString = 'collapse';
+  const collapseComponent = 'Collapse';
+  const collapseSelector = `.${collapseString}`;
+  const collapseToggleSelector = `[${dataBsToggle}="${collapseString}"]`;
+
+  // COLLAPSE CUSTOM EVENTS
+  // ======================
+  const showCollapseEvent = bootstrapCustomEvent(`show.bs.${collapseString}`);
+  const shownCollapseEvent = bootstrapCustomEvent(`shown.bs.${collapseString}`);
+  const hideCollapseEvent = bootstrapCustomEvent(`hide.bs.${collapseString}`);
+  const hiddenCollapseEvent = bootstrapCustomEvent(`hidden.bs.${collapseString}`);
+
+  // COLLAPSE PRIVATE METHODS
+  // ========================
+  function expandCollapse(self) {
+    const {
+      element, parent, triggers,
+    } = self;
+
+    element.dispatchEvent(showCollapseEvent);
+    if (showCollapseEvent.defaultPrevented) return;
+
+    self.isAnimating = true;
+    if (parent) parent.isAnimating = true;
+
+    addClass(element, collapsingClass);
+    removeClass(element, collapseString);
+
+    element.style.height = `${element.scrollHeight}px`;
+
+    emulateTransitionEnd(element, () => {
+      self.isAnimating = false;
+      if (parent) parent.isAnimating = false;
+
+      triggers.forEach((btn) => btn.setAttribute(ariaExpanded, 'true'));
+
+      removeClass(element, collapsingClass);
+      addClass(element, collapseString);
+      addClass(element, showClass);
+
+      element.style.height = '';
+
+      element.dispatchEvent(shownCollapseEvent);
+    });
+  }
+
+  function collapseContent(self) {
+    const {
+      element, parent, triggers,
+    } = self;
+
+    element.dispatchEvent(hideCollapseEvent);
+
+    if (hideCollapseEvent.defaultPrevented) return;
+
+    self.isAnimating = true;
+    if (parent) parent.isAnimating = true;
+
+    element.style.height = `${element.scrollHeight}px`;
+
+    removeClass(element, collapseString);
+    removeClass(element, showClass);
+    addClass(element, collapsingClass);
+
+    reflow(element);
+    element.style.height = '0px';
+
+    emulateTransitionEnd(element, () => {
+      self.isAnimating = false;
+      if (parent) parent.isAnimating = false;
+
+      triggers.forEach((btn) => btn.setAttribute(ariaExpanded, 'false'));
+
+      removeClass(element, collapsingClass);
+      addClass(element, collapseString);
+
+      element.style.height = '';
+
+      element.dispatchEvent(hiddenCollapseEvent);
+    });
+  }
+
+  function toggleCollapseHandler(self, add) {
+    const action = add ? addEventListener : removeEventListener;
+    const { triggers } = self;
+
+    if (triggers.length) {
+      triggers.forEach((btn) => btn[action]('click', collapseClickHandler));
+    }
+  }
+
+  // COLLAPSE EVENT HANDLER
+  // ======================
+  function collapseClickHandler(e) {
+    const { target } = e;
+    const trigger = target.closest(collapseToggleSelector);
+    const element = getTargetElement(trigger);
+    const self = element && element[collapseComponent];
+    if (self) self.toggle(target);
+
+    // event target is anchor link #398
+    if (trigger && trigger.tagName === 'A') e.preventDefault();
+  }
+
+  // COLLAPSE DEFINITION
+  // ===================
+  class Collapse extends BaseComponent {
+    constructor(target, config) {
+      super(collapseComponent, target, { parent: null }, config);
+      // bind
+      const self = this;
+
+      // initialization element
+      const { element } = self;
+
+      // set triggering elements
+      self.triggers = Array.from(document.querySelectorAll(collapseToggleSelector))
+        .filter((btn) => getTargetElement(btn) === element);
+
+      // set parent accordion
+      self.parent = queryElement(self.options.parent);
+      const { parent } = self;
+
+      // set initial state
+      self.isAnimating = false;
+      if (parent) parent.isAnimating = false;
+
+      // add event listeners
+      toggleCollapseHandler(self, 1);
+    }
+
+    // COLLAPSE PUBLIC METHODS
+    // =======================
+    toggle(related) {
+      const self = this;
+      if (!hasClass(self.element, showClass)) self.show(related);
+      else self.hide(related);
+    }
+
+    hide() {
+      const self = this;
+      const { triggers, isAnimating } = self;
+      if (isAnimating) return;
+
+      collapseContent(self);
+      if (triggers.length) {
+        triggers.forEach((btn) => addClass(btn, `${collapseString}d`));
+      }
+    }
+
+    show() {
+      const self = this;
+      const {
+        element, parent, triggers, isAnimating,
+      } = self;
+      let activeCollapse;
+      let activeCollapseInstance;
+
+      if (parent) {
+        activeCollapse = Array.from(parent.querySelectorAll(`.${collapseString}.${showClass}`))
+          .find((i) => i[collapseComponent]);
+        activeCollapseInstance = activeCollapse && activeCollapse[collapseComponent];
+      }
+
+      if ((!parent || (parent && !parent.isAnimating)) && !isAnimating) {
+        if (activeCollapseInstance && activeCollapse !== element) {
+          collapseContent(activeCollapseInstance);
+          activeCollapseInstance.triggers.forEach((btn) => {
+            addClass(btn, `${collapseString}d`);
+          });
+        }
+
+        expandCollapse(self);
+        if (triggers.length) {
+          triggers.forEach((btn) => removeClass(btn, `${collapseString}d`));
+        }
+      }
+    }
+
+    dispose() {
+      const self = this;
+      const { parent } = self;
+      toggleCollapseHandler(self);
+
+      if (parent) delete parent.isAnimating;
+      super.dispose(collapseComponent);
+    }
+  }
+
+  Collapse.init = {
+    component: collapseComponent,
+    selector: collapseSelector,
+    constructor: Collapse,
+  };
+
+  const dropdownMenuClasses = ['dropdown', 'dropup', 'dropstart', 'dropend'];
+
+  const dropdownMenuClass = 'dropdown-menu';
+
+  function isEmptyAnchor(elem) {
+    const parentAnchor = elem.closest('A');
+    // anchor href starts with #
+    return elem && ((elem.href && elem.href.slice(-1) === '#')
+      // OR a child of an anchor with href starts with #
+      || (parentAnchor && parentAnchor.href && parentAnchor.href.slice(-1) === '#'));
+  }
+
+  function setFocus(element) {
+    element.focus();
+  }
+
+  /* Native JavaScript for Bootstrap 5 | Dropdown
+  ----------------------------------------------- */
+
+  // DROPDOWN PRIVATE GC
+  // ===================
+  const [dropdownString] = dropdownMenuClasses;
+  const dropdownComponent = 'Dropdown';
+  const dropdownSelector = `[${dataBsToggle}="${dropdownString}"]`;
+
+  // DROPDOWN PRIVATE GC
+  // ===================
+  const dropupString = dropdownMenuClasses[1];
+  const dropstartString = dropdownMenuClasses[2];
+  const dropendString = dropdownMenuClasses[3];
+  const dropdownMenuEndClass = `${dropdownMenuClass}-end`;
+  const hideMenuClass = ['d-block', 'invisible'];
+  const verticalClass = [dropdownString, dropupString];
+  const horizontalClass = [dropstartString, dropendString];
+  const defaultDropdownOptions = {
+    offset: 5, // [number] 5(px)
+    display: 'dynamic', // [dynamic|static]
+  };
+
+  // DROPDOWN CUSTOM EVENTS
+  // ========================
+  const showDropdownEvent = bootstrapCustomEvent(`show.bs.${dropdownString}`);
+  const shownDropdownEvent = bootstrapCustomEvent(`shown.bs.${dropdownString}`);
+  const hideDropdownEvent = bootstrapCustomEvent(`hide.bs.${dropdownString}`);
+  const hiddenDropdownEvent = bootstrapCustomEvent(`hidden.bs.${dropdownString}`);
+
+  // DROPDOWN PRIVATE METHODS
+  // ========================
+  function styleDropdown(self, show) {
+    const {
+      element, menu, originalClass, menuEnd, options,
+    } = self;
+    const parent = element.parentElement;
+
+    // reset menu offset and position
+    const resetProps = ['margin', 'top', 'bottom', 'left', 'right'];
+    resetProps.forEach((p) => { menu.style[p] = ''; });
+    removeClass(parent, 'position-static');
+
+    if (!show) {
+      parent.className = originalClass.join(' ');
+      const menuAction = menuEnd && !hasClass(menu, dropdownMenuEndClass) ? addClass : removeClass;
+      menuAction(menu, dropdownMenuEndClass);
+      return;
+    }
+
+    const { offset } = options;
+    let positionClass = dropdownMenuClasses.find((c) => originalClass.includes(c));
+
+    let dropdownMargin = {
+      dropdown: [offset, 0, 0],
+      dropup: [0, 0, offset],
+      dropstart: [-1, offset, 0],
+      dropend: [-1, 0, 0, offset],
+    };
+
+    const dropdownPosition = {
+      dropdown: { top: '100%' },
+      dropup: { top: 'auto', bottom: '100%' },
+      dropstart: { left: 'auto', right: '100%' },
+      dropend: { left: '100%', right: 'auto' },
+      menuEnd: { right: 0, left: 'auto' },
+    };
+
+    // force showing the menu to calculate its size
+    hideMenuClass.forEach((c) => addClass(menu, c));
+
+    const dropdownRegex = new RegExp(`\\b(${dropdownString}|${dropupString}|${dropstartString}|${dropendString})+`);
+    const elementDimensions = { w: element.offsetWidth, h: element.offsetHeight };
+    const menuDimensions = { w: menu.offsetWidth, h: menu.offsetHeight };
+    const HTML = document.documentElement;
+    const BD = document.body;
+    const windowWidth = (HTML.clientWidth || BD.clientWidth);
+    const windowHeight = (HTML.clientHeight || BD.clientHeight);
+    const targetBCR = element.getBoundingClientRect();
+    // dropdownMenuEnd && [ dropdown | dropup ]
+    const leftExceed = targetBCR.left + elementDimensions.w - menuDimensions.w < 0;
+    // dropstart
+    const leftFullExceed = targetBCR.left - menuDimensions.w < 0;
+    // !dropdownMenuEnd && [ dropdown | dropup ]
+    const rightExceed = targetBCR.left + menuDimensions.w >= windowWidth;
+    // dropend
+    const rightFullExceed = targetBCR.left + menuDimensions.w + elementDimensions.w >= windowWidth;
+    // dropstart | dropend
+    const bottomExceed = targetBCR.top + menuDimensions.h >= windowHeight;
+    // dropdown
+    const bottomFullExceed = targetBCR.top + menuDimensions.h + elementDimensions.h >= windowHeight;
+    // dropup
+    const topExceed = targetBCR.top - menuDimensions.h < 0;
+
+    const btnGroup = parent.parentNode.closest('.btn-group,.btn-group-vertical');
+
+    // recompute position
+    if (horizontalClass.includes(positionClass) && leftFullExceed && rightFullExceed) {
+      positionClass = dropdownString;
+    }
+    if (horizontalClass.includes(positionClass) && bottomExceed) {
+      positionClass = dropupString;
+    }
+    if (positionClass === dropstartString && leftFullExceed && !bottomExceed) {
+      positionClass = dropendString;
+    }
+    if (positionClass === dropendString && rightFullExceed && !bottomExceed) {
+      positionClass = dropstartString;
+    }
+    if (positionClass === dropupString && topExceed && !bottomFullExceed) {
+      positionClass = dropdownString;
+    }
+    if (positionClass === dropdownString && bottomFullExceed && !topExceed) {
+      positionClass = dropupString;
+    }
+
+    // set spacing
+    dropdownMargin = dropdownMargin[positionClass];
+    menu.style.margin = `${dropdownMargin.map((x) => (x ? `${x}px` : x)).join(' ')}`;
+    Object.keys(dropdownPosition[positionClass]).forEach((position) => {
+      menu.style[position] = dropdownPosition[positionClass][position];
+    });
+
+    // update dropdown position class
+    if (!hasClass(parent, positionClass)) {
+      parent.className = parent.className.replace(dropdownRegex, positionClass);
+    }
+
+    // update dropdown / dropup to handle parent btn-group element
+    // as well as the dropdown-menu-end utility class
+    if (verticalClass.includes(positionClass)) {
+      const menuEndAction = rightExceed ? addClass : removeClass;
+
+      if (!btnGroup) menuEndAction(menu, dropdownMenuEndClass);
+      else if (leftExceed) addClass(parent, 'position-static');
+
+      if (hasClass(menu, dropdownMenuEndClass)) {
+        Object.keys(dropdownPosition.menuEnd).forEach((p) => {
+          menu.style[p] = dropdownPosition.menuEnd[p];
+        });
+      }
+    }
+
+    // remove util classes from the menu, we have its size
+    hideMenuClass.forEach((c) => removeClass(menu, c));
+  }
+
+  function toggleDropdownDismiss(self) {
+    const action = self.open ? addEventListener : removeEventListener;
+
+    document[action]('click', dropdownDismissHandler);
+    document[action]('focus', dropdownDismissHandler);
+    document[action]('keydown', dropdownPreventScroll);
+    document[action]('keyup', dropdownKeyHandler);
+    if (self.options.display === 'dynamic') {
+      window[action]('scroll', dropdownLayoutHandler, passiveHandler);
+      window[action]('resize', dropdownLayoutHandler, passiveHandler);
+    }
+  }
+
+  function toggleDropdownHandler(self, add) {
+    const action = add ? addEventListener : removeEventListener;
+    self.element[action]('click', dropdownClickHandler);
+  }
+
+  function getCurrentOpenDropdown() {
+    const currentParent = dropdownMenuClasses
+      .map((c) => document.getElementsByClassName(`${c} ${showClass}`))
+      .find((x) => x.length);
+
+    if (currentParent && currentParent.length) {
+      return Array.from(currentParent[0].children).find((x) => x.hasAttribute(dataBsToggle));
+    }
+    return null;
+  }
+
+  // DROPDOWN EVENT HANDLERS
+  // =======================
+  function dropdownDismissHandler(e) {
+    const { target, type } = e;
+    if (!target.closest) return; // some weird FF bug #409
+
+    const element = getCurrentOpenDropdown();
+    const parent = element && element.parentNode;
+    const self = element && element[dropdownComponent];
+    const menu = self && self.menu;
+
+    const hasData = target.closest(dropdownSelector) !== null;
+    const isForm = parent && parent.contains(target)
+      && (target.tagName === 'form' || target.closest('form') !== null);
+
+    if (type === 'click' && isEmptyAnchor(target)) {
+      e.preventDefault();
+    }
+    if (type === 'focus'
+      && (target === element || target === menu || menu.contains(target))) {
+      return;
+    }
+
+    if (isForm || hasData) ; else if (self) {
+      self.hide(element);
+    }
+  }
+
+  function dropdownClickHandler(e) {
+    const element = this;
+    const self = element[dropdownComponent];
+    self.toggle(element);
+
+    if (isEmptyAnchor(e.target)) e.preventDefault();
+  }
+
+  function dropdownPreventScroll(e) {
+    if (e.which === 38 || e.which === 40) e.preventDefault();
+  }
+
+  function dropdownKeyHandler({ which }) {
+    const element = getCurrentOpenDropdown();
+    const self = element[dropdownComponent];
+    const { menu, menuItems, open } = self;
+    const activeItem = document.activeElement;
+    const isSameElement = activeItem === element;
+    const isInsideMenu = menu.contains(activeItem);
+    const isMenuItem = activeItem.parentNode === menu || activeItem.parentNode.parentNode === menu;
+
+    let idx = menuItems.indexOf(activeItem);
+
+    if (isMenuItem) { // navigate up | down
+      if (isSameElement) {
+        idx = 0;
+      } else if (which === 38) {
+        idx = idx > 1 ? idx - 1 : 0;
+      } else if (which === 40) {
+        idx = idx < menuItems.length - 1 ? idx + 1 : idx;
+      }
+
+      if (menuItems[idx]) setFocus(menuItems[idx]);
+    }
+
+    if (((menuItems.length && isMenuItem) // menu has items
+        || (!menuItems.length && (isInsideMenu || isSameElement)) // menu might be a form
+        || !isInsideMenu) // or the focused element is not in the menu at all
+        && open && which === 27 // menu must be open
+    ) {
+      self.toggle();
+    }
+  }
+
+  function dropdownLayoutHandler() {
+    const element = getCurrentOpenDropdown();
+    const self = element && element[dropdownComponent];
+
+    if (self && self.open) styleDropdown(self, 1);
+  }
+
+  // DROPDOWN DEFINITION
+  // ===================
+  class Dropdown extends BaseComponent {
+    constructor(target, config) {
+      super(dropdownComponent, target, defaultDropdownOptions, config);
+      // bind
+      const self = this;
+
+      // initialization element
+      const { element } = self;
+
+      // set targets
+      const parent = element.parentElement;
+      self.menu = queryElement(`.${dropdownMenuClass}`, parent);
+      const { menu } = self;
+
+      self.originalClass = Array.from(parent.classList);
+
+      // set original position
+      self.menuEnd = hasClass(menu, dropdownMenuEndClass);
+
+      self.menuItems = [];
+
+      Array.from(menu.children).forEach((child) => {
+        if (child.children.length && (child.children[0].tagName === 'A')) self.menuItems.push(child.children[0]);
+        if (child.tagName === 'A') self.menuItems.push(child);
+      });
+
+      // set initial state to closed
+      self.open = false;
+
+      // add event listener
+      toggleDropdownHandler(self, 1);
+    }
+
+    // DROPDOWN PUBLIC METHODS
+    // =======================
+    toggle(related) {
+      const self = this;
+      const { open } = self;
+
+      if (open) self.hide(related);
+      else self.show(related);
+    }
+
+    show(related) {
+      const self = this;
+      const currentParent = queryElement(dropdownMenuClasses.map((c) => `.${c}.${showClass}`).join(','));
+      const currentElement = currentParent && queryElement(dropdownSelector, currentParent);
+
+      if (currentElement) currentElement[dropdownComponent].hide();
+
+      const { element, menu, open } = self;
+      const parent = element.parentNode;
+
+      // update relatedTarget and dispatch
+      showDropdownEvent.relatedTarget = related || null;
+      parent.dispatchEvent(showDropdownEvent);
+      if (showDropdownEvent.defaultPrevented) return;
+
+      // change menu position
+      styleDropdown(self, 1);
+
+      addClass(menu, showClass);
+      addClass(parent, showClass);
+
+      element.setAttribute(ariaExpanded, true);
+      self.open = !open;
+
+      setTimeout(() => {
+        setFocus(menu.getElementsByTagName('INPUT')[0] || element); // focus the first input item | element
+        toggleDropdownDismiss(self);
+
+        shownDropdownEvent.relatedTarget = related || null;
+        parent.dispatchEvent(shownDropdownEvent);
+      }, 1);
+    }
+
+    hide(related) {
+      const self = this;
+      const { element, menu, open } = self;
+      const parent = element.parentNode;
+      hideDropdownEvent.relatedTarget = related || null;
+      parent.dispatchEvent(hideDropdownEvent);
+      if (hideDropdownEvent.defaultPrevented) return;
+
+      removeClass(menu, showClass);
+      removeClass(parent, showClass);
+
+      // revert to original position
+      styleDropdown(self);
+
+      element.setAttribute(ariaExpanded, false);
+      self.open = !open;
+
+      setFocus(element);
+
+      // only re-attach handler if the instance is not disposed
+      setTimeout(() => toggleDropdownDismiss(self), 1);
+
+      // update relatedTarget and dispatch
+      hiddenDropdownEvent.relatedTarget = related || null;
+      parent.dispatchEvent(hiddenDropdownEvent);
+    }
+
+    dispose() {
+      const self = this;
+      const { element } = self;
+
+      if (hasClass(element.parentNode, showClass) && self.open) self.hide();
+
+      toggleDropdownHandler(self);
+
+      super.dispose(dropdownComponent);
+    }
+  }
+
+  Dropdown.init = {
+    component: dropdownComponent,
+    selector: dropdownSelector,
+    constructor: Dropdown,
+  };
+
+  const ariaHidden = 'aria-hidden';
+
+  const ariaModal = 'aria-modal';
+
+  const fixedTopClass = 'fixed-top';
+
+  const fixedBottomClass = 'fixed-bottom';
+
+  const stickyTopClass = 'sticky-top';
+
+  const fixedItems = Array.from(document.getElementsByClassName(fixedTopClass))
+    .concat(Array.from(document.getElementsByClassName(fixedBottomClass)))
+    .concat(Array.from(document.getElementsByClassName(stickyTopClass)))
+    .concat(Array.from(document.getElementsByClassName('is-fixed')));
+
+  function resetScrollbar() {
+    const bd = document.body;
+    bd.style.paddingRight = '';
+    bd.style.overflow = '';
+
+    if (fixedItems.length) {
+      fixedItems.forEach((fixed) => {
+        fixed.style.paddingRight = '';
+        fixed.style.marginRight = '';
+      });
+    }
+  }
+
+  function measureScrollbar() {
+    const windowWidth = document.documentElement.clientWidth;
+    return Math.abs(window.innerWidth - windowWidth);
+  }
+
+  function setScrollbar(scrollbarWidth, overflow) {
+    const bd = document.body;
+    const bdStyle = getComputedStyle(bd);
+    const bodyPad = parseInt(bdStyle.paddingRight, 10);
+    const isOpen = bdStyle.overflow === 'hidden';
+    const sbWidth = isOpen && bodyPad ? 0 : scrollbarWidth;
+
+    if (overflow) {
+      bd.style.overflow = 'hidden';
+      bd.style.paddingRight = `${bodyPad + sbWidth}px`;
+
+      if (fixedItems.length) {
+        fixedItems.forEach((fixed) => {
+          const isSticky = hasClass(fixed, stickyTopClass);
+          const itemPadValue = getComputedStyle(fixed).paddingRight;
+          fixed.style.paddingRight = `${parseInt(itemPadValue, 10) + sbWidth}px`;
+          if (isSticky) {
+            const itemMValue = getComputedStyle(fixed).marginRight;
+            fixed.style.marginRight = `${parseInt(itemMValue, 10) - sbWidth}px`;
+          }
+        });
+      }
+    }
+  }
+
+  const modalOpenClass = 'modal-open';
+  const modalBackdropClass = 'modal-backdrop';
+  const modalActiveSelector = `.modal.${showClass}`;
+  const offcanvasActiveSelector = `.offcanvas.${showClass}`;
+
+  const overlay = document.createElement('div');
+  overlay.setAttribute('class', `${modalBackdropClass}`);
+
+  function getCurrentOpen() {
+    return queryElement(`${modalActiveSelector},${offcanvasActiveSelector}`);
+  }
+
+  function appendOverlay(hasFade) {
+    document.body.appendChild(overlay);
+    if (hasFade) addClass(overlay, fadeClass);
+  }
+
+  function showOverlay() {
+    addClass(overlay, showClass);
+    reflow(overlay);
+  }
+
+  function hideOverlay() {
+    removeClass(overlay, showClass);
+  }
+
+  function removeOverlay() {
+    const bd = document.body;
+    const currentOpen = getCurrentOpen();
+
+    if (!currentOpen) {
+      removeClass(overlay, fadeClass);
+      removeClass(bd, modalOpenClass);
+      bd.removeChild(overlay);
+      resetScrollbar();
+    }
+  }
+
+  function isVisible(element) {
+    return getComputedStyle(element).visibility !== 'hidden'
+      && element.offsetParent !== null;
+  }
+
+  /* Native JavaScript for Bootstrap 5 | Modal
+  -------------------------------------------- */
+
+  // MODAL PRIVATE GC
+  // ================
+  const modalString = 'modal';
+  const modalComponent = 'Modal';
+  const modalSelector = `.${modalString}`;
+  // const modalActiveSelector = `.${modalString}.${showClass}`;
+  const modalToggleSelector = `[${dataBsToggle}="${modalString}"]`;
+  const modalDismissSelector = `[${dataBsDismiss}="${modalString}"]`;
+  const modalStaticClass = `${modalString}-static`;
+  const modalDefaultOptions = {
+    backdrop: true, // boolean|string
+    keyboard: true, // boolean
+  };
+
+  // MODAL CUSTOM EVENTS
+  // ===================
+  const showModalEvent = bootstrapCustomEvent(`show.bs.${modalString}`);
+  const shownModalEvent = bootstrapCustomEvent(`shown.bs.${modalString}`);
+  const hideModalEvent = bootstrapCustomEvent(`hide.bs.${modalString}`);
+  const hiddenModalEvent = bootstrapCustomEvent(`hidden.bs.${modalString}`);
+
+  // MODAL PRIVATE METHODS
+  // =====================
+  function setModalScrollbar(self) {
+    const { element, scrollbarWidth } = self;
+    const bd = document.body;
+    const html = document.documentElement;
+    const bodyOverflow = html.clientHeight !== html.scrollHeight
+                      || bd.clientHeight !== bd.scrollHeight;
+    const modalOverflow = element.clientHeight !== element.scrollHeight;
+
+    if (!modalOverflow && scrollbarWidth) {
+      element.style.paddingRight = `${scrollbarWidth}px`;
+    }
+    setScrollbar(scrollbarWidth, (modalOverflow || bodyOverflow));
+  }
+
+  function toggleModalDismiss(self, add) {
+    const action = add ? addEventListener : removeEventListener;
+    window[action]('resize', self.update, passiveHandler);
+    self.element[action]('click', modalDismissHandler);
+    document[action]('keydown', modalKeyHandler);
+  }
+
+  function toggleModalHandler(self, add) {
+    const action = add ? addEventListener : removeEventListener;
+    const { triggers } = self;
+
+    if (triggers.length) {
+      triggers.forEach((btn) => btn[action]('click', modalClickHandler));
+    }
+  }
+
+  function afterModalHide(self) {
+    const { triggers } = self;
+    removeOverlay();
+    self.element.style.paddingRight = '';
+    self.isAnimating = false;
+
+    if (triggers.length) {
+      const visibleTrigger = triggers.find((x) => isVisible(x));
+      if (visibleTrigger) setFocus(visibleTrigger);
+    }
+  }
+
+  function afterModalShow(self) {
+    const { element, relatedTarget } = self;
+    setFocus(element);
+    self.isAnimating = false;
+
+    toggleModalDismiss(self, 1);
+
+    shownModalEvent.relatedTarget = relatedTarget;
+    element.dispatchEvent(shownModalEvent);
+  }
+
+  function beforeModalShow(self) {
+    const { element, hasFade } = self;
+    element.style.display = 'block';
+
+    setModalScrollbar(self);
+    if (!queryElement(modalActiveSelector)) {
+      document.body.style.overflow = 'hidden';
+      addClass(document.body, modalOpenClass);
+    }
+
+    addClass(element, showClass);
+    element.removeAttribute(ariaHidden);
+    element.setAttribute(ariaModal, true);
+
+    if (hasFade) emulateTransitionEnd(element, () => afterModalShow(self));
+    else afterModalShow(self);
+  }
+
+  function beforeModalHide(self, force) {
+    const {
+      element, relatedTarget, hasFade,
+    } = self;
+    const currentOpen = getCurrentOpen();
+
+    element.style.display = '';
+
+    // force can also be the transitionEvent object, we wanna make sure it's not
+    // call is not forced and overlay is visible
+    if (!force && hasFade && hasClass(overlay, showClass)
+      && !currentOpen) { // AND no modal is visible
+      hideOverlay();
+      emulateTransitionEnd(overlay, () => afterModalHide(self));
+    } else {
+      afterModalHide(self);
+    }
+
+    toggleModalDismiss(self);
+
+    hiddenModalEvent.relatedTarget = relatedTarget;
+    element.dispatchEvent(hiddenModalEvent);
+  }
+
+  // MODAL EVENT HANDLERS
+  // ====================
+  function modalClickHandler(e) {
+    const { target } = e;
+    const trigger = target.closest(modalToggleSelector);
+    const element = getTargetElement(trigger);
+    const self = element && element[modalComponent];
+
+    if (trigger.tagName === 'A') e.preventDefault();
+
+    if (self.isAnimating) return;
+
+    self.relatedTarget = trigger;
+
+    self.toggle();
+  }
+
+  function modalKeyHandler({ which }) {
+    const element = queryElement(modalActiveSelector);
+    const self = element[modalComponent];
+    const { options, isAnimating } = self;
+    if (!isAnimating // modal has no animations running
+      && options.keyboard && which === 27 // the keyboard option is enabled and the key is 27
+      && hasClass(element, showClass)) { // the modal is not visible
+      self.relatedTarget = null;
+      self.hide();
+    }
+  }
+
+  function modalDismissHandler(e) {
+    const element = this;
+    const self = element[modalComponent];
+
+    if (self.isAnimating) return;
+
+    const { isStatic, modalDialog } = self;
+    const { target } = e;
+    const selectedText = document.getSelection().toString().length;
+    const targetInsideDialog = modalDialog.contains(target);
+    const dismiss = target.closest(modalDismissSelector);
+
+    if (isStatic && !targetInsideDialog) {
+      addClass(element, modalStaticClass);
+      self.isAnimating = true;
+      emulateTransitionEnd(modalDialog, () => staticTransitionEnd(self));
+    } else if (dismiss || (!selectedText && !isStatic && !targetInsideDialog)) {
+      self.relatedTarget = dismiss || null;
+      self.hide();
+      e.preventDefault();
+    }
+  }
+
+  function staticTransitionEnd(self) {
+    const duration = getElementTransitionDuration(self.modalDialog) + 17;
+    removeClass(self.element, modalStaticClass);
+    // user must wait for zoom out transition
+    setTimeout(() => { self.isAnimating = false; }, duration);
+  }
+
+  // MODAL DEFINITION
+  // ================
+  class Modal extends BaseComponent {
+    constructor(target, config) {
+      super(modalComponent, target, modalDefaultOptions, config);
+
+      // bind
+      const self = this;
+
+      // the modal
+      const { element } = self;
+
+      // the modal-dialog
+      self.modalDialog = queryElement(`.${modalString}-dialog`, element);
+
+      // modal can have multiple triggering elements
+      self.triggers = Array.from(document.querySelectorAll(modalToggleSelector))
+        .filter((btn) => getTargetElement(btn) === element);
+
+      // additional internals
+      self.isStatic = self.options.backdrop === 'static';
+      self.hasFade = hasClass(element, fadeClass);
+      self.isAnimating = false;
+      self.scrollbarWidth = measureScrollbar();
+      self.relatedTarget = null;
+
+      // attach event listeners
+      toggleModalHandler(self, 1);
+
+      // bind
+      self.update = self.update.bind(self);
+    }
+
+    // MODAL PUBLIC METHODS
+    // ====================
+    toggle() {
+      const self = this;
+      if (hasClass(self.element, showClass)) self.hide();
+      else self.show();
+    }
+
+    show() {
+      const self = this;
+      const {
+        element, isAnimating, hasFade, relatedTarget,
+      } = self;
+      let overlayDelay = 0;
+
+      if (hasClass(element, showClass) && !isAnimating) return;
+
+      showModalEvent.relatedTarget = relatedTarget || null;
+      element.dispatchEvent(showModalEvent);
+      if (showModalEvent.defaultPrevented) return;
+
+      self.isAnimating = true;
+
+      // we elegantly hide any opened modal/offcanvas
+      const currentOpen = getCurrentOpen();
+      if (currentOpen && currentOpen !== element) {
+        const that = currentOpen[modalComponent]
+          ? currentOpen[modalComponent]
+          : currentOpen.Offcanvas;
+        that.hide();
+      }
+
+      if (!queryElement(`.${modalBackdropClass}`)) {
+        appendOverlay(hasFade);
+      }
+      overlayDelay = getElementTransitionDuration(overlay);
+
+      if (!hasClass(overlay, showClass)) {
+        showOverlay();
+      }
+
+      if (!currentOpen) {
+        setTimeout(() => beforeModalShow(self), overlayDelay);
+      } else beforeModalShow(self);
+    }
+
+    hide(force) {
+      const self = this;
+      const {
+        element, isAnimating, hasFade, relatedTarget,
+      } = self;
+      if (!hasClass(element, showClass) && !isAnimating) return;
+
+      hideModalEvent.relatedTarget = relatedTarget || null;
+      element.dispatchEvent(hideModalEvent);
+      if (hideModalEvent.defaultPrevented) return;
+
+      self.isAnimating = true;
+      removeClass(element, showClass);
+      element.setAttribute(ariaHidden, true);
+      element.removeAttribute(ariaModal);
+
+      if (hasFade && force !== 1) {
+        emulateTransitionEnd(element, () => beforeModalHide(self));
+      } else {
+        beforeModalHide(self, force);
+      }
+    }
+
+    update() {
+      const self = this;
+
+      if (hasClass(self.element, showClass)) setModalScrollbar(self);
+    }
+
+    dispose() {
+      const self = this;
+      self.hide(1); // forced call
+
+      toggleModalHandler(self);
+
+      super.dispose(modalComponent);
+    }
+  }
+
+  Modal.init = {
+    component: modalComponent,
+    selector: modalSelector,
+    constructor: Modal,
+  };
+
+  /* Native JavaScript for Bootstrap 5 | OffCanvas
+  ------------------------------------------------ */
+
+  // OFFCANVAS PRIVATE GC
+  // ====================
+  const offcanvasString = 'offcanvas';
+  const offcanvasComponent = 'Offcanvas';
+  const OffcanvasSelector = `.${offcanvasString}`;
+  const offcanvasToggleSelector = `[${dataBsToggle}="${offcanvasString}"]`;
+  const offcanvasDismissSelector = `[${dataBsDismiss}="${offcanvasString}"]`;
+  const offcanvasTogglingClass = `${offcanvasString}-toggling`;
+  const offcanvasDefaultOptions = {
+    backdrop: true, // boolean
+    keyboard: true, // boolean
+    scroll: false, // boolean
+  };
+
+  // OFFCANVAS CUSTOM EVENTS
+  // =======================
+  const showOffcanvasEvent = bootstrapCustomEvent(`show.bs.${offcanvasString}`);
+  const shownOffcanvasEvent = bootstrapCustomEvent(`shown.bs.${offcanvasString}`);
+  const hideOffcanvasEvent = bootstrapCustomEvent(`hide.bs.${offcanvasString}`);
+  const hiddenOffcanvasEvent = bootstrapCustomEvent(`hidden.bs.${offcanvasString}`);
+
+  // OFFCANVAS PRIVATE METHODS
+  // =========================
+  function setOffCanvasScrollbar(self) {
+    const bd = document.body;
+    const html = document.documentElement;
+    const bodyOverflow = html.clientHeight !== html.scrollHeight
+                      || bd.clientHeight !== bd.scrollHeight;
+    setScrollbar(self.scrollbarWidth, bodyOverflow);
+  }
+
+  function toggleOffcanvasEvents(self, add) {
+    const action = add ? addEventListener : removeEventListener;
+    self.triggers.forEach((btn) => btn[action]('click', offcanvasTriggerHandler));
+  }
+
+  function toggleOffCanvasDismiss(add) {
+    const action = add ? addEventListener : removeEventListener;
+    document[action]('keydown', offcanvasKeyDismissHandler);
+    document[action]('click', offcanvasDismissHandler);
+  }
+
+  function beforeOffcanvasShow(self) {
+    const { element, options } = self;
+
+    if (!options.scroll) {
+      addClass(document.body, modalOpenClass);
+      document.body.style.overflow = 'hidden';
+      setOffCanvasScrollbar(self);
+    }
+
+    addClass(element, offcanvasTogglingClass);
+    addClass(element, showClass);
+    element.style.visibility = 'visible';
+
+    emulateTransitionEnd(element, () => showOffcanvasComplete(self));
+  }
+
+  function beforeOffcanvasHide(self) {
+    const { element, options } = self;
+    const currentOpen = getCurrentOpen();
+
+    element.blur();
+
+    if (!currentOpen && options.backdrop && hasClass(overlay, showClass)) {
+      hideOverlay();
+      emulateTransitionEnd(overlay, () => hideOffcanvasComplete(self));
+    } else hideOffcanvasComplete(self);
+  }
+
+  // OFFCANVAS EVENT HANDLERS
+  // ========================
+  function offcanvasTriggerHandler(e) {
+    const trigger = this.closest(offcanvasToggleSelector);
+    const element = getTargetElement(trigger);
+    const self = element && element[offcanvasComponent];
+
+    if (trigger.tagName === 'A') e.preventDefault();
+    if (self) {
+      self.relatedTarget = trigger;
+      self.toggle();
+    }
+  }
+
+  function offcanvasDismissHandler(e) {
+    const element = queryElement(offcanvasActiveSelector);
+    if (!element) return;
+
+    const offCanvasDismiss = queryElement(offcanvasDismissSelector, element);
+    const self = element[offcanvasComponent];
+    if (!self) return;
+
+    const { options, open, triggers } = self;
+    const { target } = e;
+    const trigger = target.closest(offcanvasToggleSelector);
+
+    if (trigger && trigger.tagName === 'A') e.preventDefault();
+
+    if (open && ((!element.contains(target) && options.backdrop
+      && (!trigger || (trigger && !triggers.includes(trigger))))
+      || offCanvasDismiss.contains(target))) {
+      self.relatedTarget = target === offCanvasDismiss ? offCanvasDismiss : null;
+      self.hide();
+    }
+  }
+
+  function offcanvasKeyDismissHandler({ which }) {
+    const element = queryElement(offcanvasActiveSelector);
+    if (!element) return;
+
+    const self = element[offcanvasComponent];
+
+    if (self && self.options.keyboard && which === 27) {
+      self.relatedTarget = null;
+      self.hide();
+    }
+  }
+
+  function showOffcanvasComplete(self) {
+    const { element, triggers, relatedTarget } = self;
+    removeClass(element, offcanvasTogglingClass);
+
+    element.removeAttribute(ariaHidden);
+    element.setAttribute(ariaModal, true);
+    element.setAttribute('role', 'dialog');
+    self.isAnimating = false;
+
+    if (triggers.length) {
+      triggers.forEach((btn) => btn.setAttribute(ariaExpanded, true));
+    }
+
+    shownOffcanvasEvent.relatedTarget = relatedTarget || null;
+    element.dispatchEvent(shownOffcanvasEvent);
+
+    toggleOffCanvasDismiss(1);
+    setFocus(element);
+  }
+
+  function hideOffcanvasComplete(self) {
+    const {
+      element, options, relatedTarget, triggers,
+    } = self;
+    const currentOpen = getCurrentOpen();
+
+    element.setAttribute(ariaHidden, true);
+    element.removeAttribute(ariaModal);
+    element.removeAttribute('role');
+    element.style.visibility = '';
+    self.open = false;
+    self.isAnimating = false;
+
+    if (triggers.length) {
+      triggers.forEach((btn) => btn.setAttribute(ariaExpanded, false));
+      const visibleTrigger = triggers.find((x) => isVisible(x));
+      if (visibleTrigger) setFocus(visibleTrigger);
+    }
+
+    // handle new offcanvas showing up
+    if (!currentOpen) {
+      if (options.backdrop) removeOverlay();
+      if (!options.scroll) {
+        resetScrollbar();
+        removeClass(document.body, modalOpenClass);
+      }
+    }
+
+    hiddenOffcanvasEvent.relatedTarget = relatedTarget || null;
+    element.dispatchEvent(hiddenOffcanvasEvent);
+    removeClass(element, offcanvasTogglingClass);
+
+    toggleOffCanvasDismiss();
+  }
+
+  // OFFCANVAS DEFINITION
+  // ====================
+  class Offcanvas extends BaseComponent {
+    constructor(target, config) {
+      super(offcanvasComponent, target, offcanvasDefaultOptions, config);
+      const self = this;
+
+      // instance element
+      const { element } = self;
+
+      // all the triggering buttons
+      self.triggers = Array.from(document.querySelectorAll(offcanvasToggleSelector))
+        .filter((btn) => getTargetElement(btn) === element);
+
+      // additional instance property
+      self.open = false;
+      self.isAnimating = false;
+      self.scrollbarWidth = measureScrollbar();
+
+      // attach event listeners
+      toggleOffcanvasEvents(self, 1);
+    }
+
+    // OFFCANVAS PUBLIC METHODS
+    // ========================
+    toggle() {
+      const self = this;
+      return self.open ? self.hide() : self.show();
+    }
+
+    show() {
+      const self = this[offcanvasComponent] ? this[offcanvasComponent] : this;
+      const {
+        element, options, isAnimating, relatedTarget,
+      } = self;
+      let overlayDelay = 0;
+
+      if (self.open || isAnimating) return;
+
+      showOffcanvasEvent.relatedTarget = relatedTarget || null;
+      element.dispatchEvent(showOffcanvasEvent);
+
+      if (showOffcanvasEvent.defaultPrevented) return;
+
+      // we elegantly hide any opened modal/offcanvas
+      const currentOpen = getCurrentOpen();
+      if (currentOpen && currentOpen !== element) {
+        const that = currentOpen[offcanvasComponent]
+          ? currentOpen[offcanvasComponent]
+          : currentOpen.Modal;
+        that.hide();
+      }
+
+      self.open = true;
+      self.isAnimating = true;
+
+      if (options.backdrop) {
+        if (!queryElement(`.${modalBackdropClass}`)) {
+          appendOverlay(1);
+        }
+
+        overlayDelay = getElementTransitionDuration(overlay);
+
+        if (!hasClass(overlay, showClass)) showOverlay();
+
+        setTimeout(() => beforeOffcanvasShow(self), overlayDelay);
+      } else beforeOffcanvasShow(self);
+    }
+
+    hide(force) {
+      const self = this;
+      const { element, isAnimating, relatedTarget } = self;
+
+      if (!self.open || isAnimating) return;
+
+      hideOffcanvasEvent.relatedTarget = relatedTarget || null;
+      element.dispatchEvent(hideOffcanvasEvent);
+      if (hideOffcanvasEvent.defaultPrevented) return;
+
+      self.isAnimating = true;
+      addClass(element, offcanvasTogglingClass);
+      removeClass(element, showClass);
+
+      if (!force) {
+        emulateTransitionEnd(element, () => beforeOffcanvasHide(self));
+      } else beforeOffcanvasHide(self);
+    }
+
+    dispose() {
+      const self = this;
+      self.hide(1);
+      toggleOffcanvasEvents(self);
+      super.dispose(offcanvasComponent);
+    }
+  }
+
+  Offcanvas.init = {
+    component: offcanvasComponent,
+    selector: OffcanvasSelector,
+    constructor: Offcanvas,
+  };
+
+  const ariaDescribedBy = 'aria-describedby';
+
+  var tipClassPositions = {
+    top: 'top', bottom: 'bottom', left: 'start', right: 'end',
+  };
+
+  function isVisibleTip(tip, container) {
+    return container.contains(tip);
+  }
+
+  function isMedia(element) {
+    return [SVGElement, HTMLImageElement, HTMLVideoElement]
+      .some((mediaType) => element instanceof mediaType);
+  }
+
+  function closestRelative(element) {
+    let retval = null;
+    let el = element;
+    while (el !== document.body) {
+      el = el.parentElement;
+      if (getComputedStyle(el).position === 'relative') {
+        retval = el;
+        break;
+      }
+    }
+    return retval;
+  }
+
+  // both popovers and tooltips (this, event)
+  function styleTip(self, e) {
+    const tipClasses = /\b(top|bottom|start|end)+/;
+    const tip = self.tooltip || self.popover;
+    // reset tip style
+    tip.style.top = '';
+    tip.style.left = '';
+    tip.style.right = '';
+    // continue with metrics
+    const isPopover = !!self.popover;
+    let tipDimensions = { w: tip.offsetWidth, h: tip.offsetHeight };
+    const windowWidth = (document.documentElement.clientWidth || document.body.clientWidth);
+    const windowHeight = (document.documentElement.clientHeight || document.body.clientHeight);
+    const { element, options, arrow } = self;
+    let { container, placement } = options;
+    let parentIsBody = container === document.body;
+    const targetPosition = getComputedStyle(element).position;
+    const parentPosition = getComputedStyle(container).position;
+    const staticParent = !parentIsBody && parentPosition === 'static';
+    let relativeParent = !parentIsBody && parentPosition === 'relative';
+    const relContainer = staticParent && closestRelative(container);
+    // static containers should refer to another relative container or the body
+    container = relContainer || container;
+    relativeParent = staticParent && relContainer ? 1 : relativeParent;
+    parentIsBody = container === document.body;
+    const parentRect = container.getBoundingClientRect();
+    const leftBoundry = relativeParent ? parentRect.left : 0;
+    const rightBoundry = relativeParent ? parentRect.right : windowWidth;
+    // this case should not be possible
+    // absoluteParent = !parentIsBody && parentPosition === 'absolute',
+    // this case requires a container with placement: relative
+    const absoluteTarget = targetPosition === 'absolute';
+    const targetRect = element.getBoundingClientRect();
+    const scroll = parentIsBody
+      ? { x: window.pageXOffset, y: window.pageYOffset }
+      : { x: container.scrollLeft, y: container.scrollTop };
+    const elemDimensions = { w: element.offsetWidth, h: element.offsetHeight };
+    const top = relativeParent ? element.offsetTop : targetRect.top;
+    const left = relativeParent ? element.offsetLeft : targetRect.left;
+    // reset arrow style
+    arrow.style.top = '';
+    arrow.style.left = '';
+    arrow.style.right = '';
+    let topPosition;
+    let leftPosition;
+    let rightPosition;
+    let arrowTop;
+    let arrowLeft;
+    let arrowRight;
+
+    // check placement
+    let topExceed = targetRect.top - tipDimensions.h < 0;
+    let bottomExceed = targetRect.top + tipDimensions.h + elemDimensions.h >= windowHeight;
+    let leftExceed = targetRect.left - tipDimensions.w < leftBoundry;
+    let rightExceed = targetRect.left + tipDimensions.w + elemDimensions.w >= rightBoundry;
+
+    topExceed = ['left', 'right'].includes(placement)
+      ? targetRect.top + elemDimensions.h / 2 - tipDimensions.h / 2 < 0
+      : topExceed;
+    bottomExceed = ['left', 'right'].includes(placement)
+      ? targetRect.top + tipDimensions.h / 2 + elemDimensions.h / 2 >= windowHeight
+      : bottomExceed;
+    leftExceed = ['top', 'bottom'].includes(placement)
+      ? targetRect.left + elemDimensions.w / 2 - tipDimensions.w / 2 < leftBoundry
+      : leftExceed;
+    rightExceed = ['top', 'bottom'].includes(placement)
+      ? targetRect.left + tipDimensions.w / 2 + elemDimensions.w / 2 >= rightBoundry
+      : rightExceed;
+
+    // recompute placement
+    // first, when both left and right limits are exceeded, we fall back to top|bottom
+    placement = (['left', 'right'].includes(placement)) && leftExceed && rightExceed ? 'top' : placement;
+    placement = placement === 'top' && topExceed ? 'bottom' : placement;
+    placement = placement === 'bottom' && bottomExceed ? 'top' : placement;
+    placement = placement === 'left' && leftExceed ? 'right' : placement;
+    placement = placement === 'right' && rightExceed ? 'left' : placement;
+
+    // update tooltip/popover class
+    if (!tip.className.includes(placement)) {
+      tip.className = tip.className.replace(tipClasses, tipClassPositions[placement]);
+    }
+    // if position has changed, update tip dimensions
+    tipDimensions = { w: tip.offsetWidth, h: tip.offsetHeight };
+
+    // we check the computed width & height and update here
+    const arrowWidth = arrow.offsetWidth || 0;
+    const arrowHeight = arrow.offsetHeight || 0;
+    const arrowAdjust = arrowWidth / 2;
+
+    // compute tooltip / popover coordinates
+    if (['left', 'right'].includes(placement)) { // secondary|side positions
+      if (placement === 'left') { // LEFT
+        leftPosition = left + scroll.x - tipDimensions.w - (isPopover ? arrowWidth : 0);
+      } else { // RIGHT
+        leftPosition = left + scroll.x + elemDimensions.w + (isPopover ? arrowWidth : 0);
+      }
+
+      // adjust top and arrow
+      if (topExceed) {
+        topPosition = top + scroll.y;
+        arrowTop = elemDimensions.h / 2 - arrowWidth;
+      } else if (bottomExceed) {
+        topPosition = top + scroll.y - tipDimensions.h + elemDimensions.h;
+        arrowTop = tipDimensions.h - elemDimensions.h / 2 - arrowWidth;
+      } else {
+        topPosition = top + scroll.y - tipDimensions.h / 2 + elemDimensions.h / 2;
+        arrowTop = tipDimensions.h / 2 - arrowHeight / 2;
+      }
+    } else if (['top', 'bottom'].includes(placement)) {
+      if (e && isMedia(element)) {
+        const eX = !relativeParent ? e.pageX : e.layerX + (absoluteTarget ? element.offsetLeft : 0);
+        const eY = !relativeParent ? e.pageY : e.layerY + (absoluteTarget ? element.offsetTop : 0);
+
+        if (placement === 'top') {
+          topPosition = eY - tipDimensions.h - (isPopover ? arrowWidth : arrowHeight);
+        } else {
+          topPosition = eY + arrowHeight;
+        }
+
+        // adjust left | right and also the arrow
+        if (e.clientX - tipDimensions.w / 2 < leftBoundry) { // when exceeds left
+          leftPosition = 0;
+          arrowLeft = eX - arrowAdjust;
+        } else if (e.clientX + tipDimensions.w * 0.51 >= rightBoundry) { // when exceeds right
+          leftPosition = 'auto';
+          rightPosition = 0;
+          arrowLeft = tipDimensions.w - (rightBoundry - eX) - arrowAdjust;
+        } else { // normal top/bottom
+          leftPosition = eX - tipDimensions.w / 2;
+          arrowLeft = tipDimensions.w / 2 - arrowAdjust;
+        }
+      } else {
+        if (placement === 'top') {
+          topPosition = top + scroll.y - tipDimensions.h - (isPopover ? arrowHeight : 0);
+        } else { // BOTTOM
+          topPosition = top + scroll.y + elemDimensions.h + (isPopover ? arrowHeight : 0);
+        }
+
+        // adjust left | right and also the arrow
+        if (leftExceed) {
+          leftPosition = 0;
+          arrowLeft = left + elemDimensions.w / 2 - arrowAdjust;
+        } else if (rightExceed) {
+          leftPosition = 'auto';
+          rightPosition = 0;
+          arrowRight = elemDimensions.w / 2 + (parentRect.right - targetRect.right) - arrowAdjust;
+        } else {
+          leftPosition = left + scroll.x - tipDimensions.w / 2 + elemDimensions.w / 2;
+          arrowLeft = tipDimensions.w / 2 - arrowAdjust;
+        }
+      }
+    }
+
+    // apply style to tooltip/popover and its arrow
+    tip.style.top = `${topPosition}px`;
+    tip.style.left = leftPosition === 'auto' ? leftPosition : `${leftPosition}px`;
+    tip.style.right = rightPosition !== undefined ? `${rightPosition}px` : '';
+    // update arrow placement or clear side
+    if (arrowTop !== undefined) {
+      arrow.style.top = `${arrowTop}px`;
+    }
+
+    if (arrowLeft !== undefined) {
+      arrow.style.left = `${arrowLeft}px`;
+    } else if (arrowRight !== undefined) {
+      arrow.style.right = `${arrowRight}px`;
+    }
+  }
+
+  let bsnUID = 1;
+
+  // popover, tooltip, scrollspy need a unique id
+  function getUID(element, key) {
+    bsnUID += 1;
+    return element[key] || bsnUID;
+  }
+
+  function getTipContainer(element) {
+    // maybe the element is inside a modal
+    const modal = element.closest('.modal');
+
+    // OR maybe the element is inside a fixed navbar
+    const navbarFixed = element.closest(`.${fixedTopClass},.${fixedBottomClass}`);
+
+    // set default container option appropriate for the context
+    return modal || navbarFixed || document.body;
+  }
+
+  /* Native JavaScript for Bootstrap 5 | Popover
+  ---------------------------------------------- */
+
+  // POPOVER PRIVATE GC
+  // ==================
+  const popoverString = 'popover';
+  const popoverComponent = 'Popover';
+  const popoverSelector = `[${dataBsToggle}="${popoverString}"],[data-tip="${popoverString}"]`;
+  const popoverDefaultOptions = {
+    template: '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>', // string
+    title: null, // string
+    content: null, // string
+    sanitizeFn: null, // function
+    customClass: null, // string
+    dismissible: false, // boolean
+    animation: true, // boolean
+    trigger: 'hover', // string
+    placement: 'top', // string
+    delay: 200, // number
+  };
+
+  // POPOVER PRIVATE GC
+  // ==================
+  const appleBrands = /(iPhone|iPod|iPad)/;
+  const isIphone = navigator.userAgentData
+    ? navigator.userAgentData.brands.some((x) => appleBrands.test(x.brand))
+    : appleBrands.test(navigator.userAgent);
+  // popoverArrowClass = `${popoverString}-arrow`,
+  const popoverHeaderClass = `${popoverString}-header`;
+  const popoverBodyClass = `${popoverString}-body`;
+  // close btn for dissmissible popover
+  let popoverCloseButton = '<button type="button" class="btn-close"></button>';
+
+  // POPOVER CUSTOM EVENTS
+  // =====================
+  const showPopoverEvent = bootstrapCustomEvent(`show.bs.${popoverString}`);
+  const shownPopoverEvent = bootstrapCustomEvent(`shown.bs.${popoverString}`);
+  const hidePopoverEvent = bootstrapCustomEvent(`hide.bs.${popoverString}`);
+  const hiddenPopoverEvent = bootstrapCustomEvent(`hidden.bs.${popoverString}`);
+
+  // POPOVER EVENT HANDLERS
+  // ======================
+  function popoverForceFocus() {
+    setFocus(this);
+  }
+
+  function popoverTouchHandler({ target }) {
+    const self = this;
+    const { popover, element } = self;
+
+    if ((popover && popover.contains(target)) // popover includes touch target
+      || target === element // OR touch target is element
+      || element.contains(target)) ; else {
+      self.hide();
+    }
+  }
+
+  // POPOVER PRIVATE METHODS
+  // =======================
+  function createPopover(self) {
+    const { id, options } = self;
+    const {
+      animation, customClass, sanitizeFn, placement, dismissible,
+    } = options;
+    let { title, content, template } = options;
+
+    // set initial popover class
+    const placementClass = `bs-${popoverString}-${tipClassPositions[placement]}`;
+
+    // fixing #233
+    title = title ? title.trim() : null;
+    content = content ? content.trim() : null;
+
+    // sanitize title && content
+    if (sanitizeFn) {
+      title = title ? sanitizeFn(title) : null;
+      content = content ? sanitizeFn(content) : null;
+      template = template ? sanitizeFn(template) : null;
+      popoverCloseButton = sanitizeFn(popoverCloseButton);
+    }
+
+    self.popover = document.createElement('div');
+    const { popover } = self;
+
+    // set id and aria-describedby
+    popover.setAttribute('id', id);
+    popover.setAttribute('role', 'tooltip');
+
+    // load template
+    const popoverTemplate = document.createElement('div');
+    popoverTemplate.innerHTML = template.trim();
+    popover.className = popoverTemplate.firstChild.className;
+    popover.innerHTML = popoverTemplate.firstChild.innerHTML;
+
+    const popoverHeader = queryElement(`.${popoverHeaderClass}`, popover);
+    const popoverBody = queryElement(`.${popoverBodyClass}`, popover);
+
+    // set arrow
+    self.arrow = queryElement(`.${popoverString}-arrow`, popover);
+
+    // set dismissible button
+    if (dismissible) {
+      title = title ? title + popoverCloseButton : title;
+      content = title === null ? +popoverCloseButton : content;
+    }
+
+    // fill the template with content from data attributes
+    if (title && popoverHeader) popoverHeader.innerHTML = title.trim();
+    if (content && popoverBody) popoverBody.innerHTML = content.trim();
+
+    // set popover animation and placement
+    if (!hasClass(popover, popoverString)) addClass(popover, popoverString);
+    if (animation && !hasClass(popover, fadeClass)) addClass(popover, fadeClass);
+    if (customClass && !hasClass(popover, customClass)) {
+      addClass(popover, customClass);
+    }
+    if (!hasClass(popover, placementClass)) addClass(popover, placementClass);
+  }
+
+  function removePopover(self) {
+    const { element, popover, options } = self;
+    element.removeAttribute(ariaDescribedBy);
+    options.container.removeChild(popover);
+    self.timer = null;
+  }
+
+  function togglePopoverHandlers(self, add) {
+    const action = add ? addEventListener : removeEventListener;
+    const { element, options } = self;
+    const { trigger, dismissible } = options;
+    self.enabled = !!add;
+
+    if (trigger === 'hover') {
+      element[action]('mousedown', self.show);
+      element[action]('mouseenter', self.show);
+      if (isMedia(element)) element[action]('mousemove', self.update, passiveHandler);
+      if (!dismissible) element[action]('mouseleave', self.hide);
+    } else if (trigger === 'click') {
+      element[action](trigger, self.toggle);
+    } else if (trigger === 'focus') {
+      if (isIphone) element[action]('click', popoverForceFocus);
+      element[action]('focusin', self.show);
+    }
+  }
+
+  function dismissHandlerToggle(self, add) {
+    const action = add ? addEventListener : removeEventListener;
+    const { options, element, popover } = self;
+    const { trigger, dismissible } = options;
+
+    if (dismissible) {
+      const [btnClose] = popover.getElementsByClassName('btn-close');
+      if (btnClose) btnClose[action]('click', self.hide);
+    } else {
+      if (trigger === 'focus') element[action]('focusout', self.hide);
+      if (trigger === 'hover') document[action]('touchstart', popoverTouchHandler, passiveHandler);
+    }
+
+    if (!isMedia(element)) {
+      window[action]('scroll', self.update, passiveHandler);
+      window[action]('resize', self.update, passiveHandler);
+    }
+  }
+
+  function popoverShowTrigger(self) {
+    dismissHandlerToggle(self, 1);
+    self.element.dispatchEvent(shownPopoverEvent);
+  }
+
+  function popoverHideTrigger(self) {
+    dismissHandlerToggle(self);
+    removePopover(self);
+    self.element.dispatchEvent(hiddenPopoverEvent);
+  }
+
+  // POPOVER DEFINITION
+  // ==================
+  class Popover extends BaseComponent {
+    constructor(target, config) {
+      popoverDefaultOptions.container = getTipContainer(queryElement(target));
+      super(popoverComponent, target, popoverDefaultOptions, config);
+
+      // bind
+      const self = this;
+
+      // initialization element
+      const { element } = self;
+      // additional instance properties
+      self.timer = null;
+      self.popover = null;
+      self.arrow = null;
+      self.enabled = false;
+      // set unique ID for aria-describedby
+      self.id = `${popoverString}-${getUID(element)}`;
+
+      // set instance options
+      const { options } = self;
+
+      // media elements only work with body as a container
+      self.options.container = isMedia(element)
+        ? popoverDefaultOptions.container
+        : queryElement(options.container);
+
+      // reset default container
+      popoverDefaultOptions.container = null;
+
+      // invalidate when no content is set
+      if (!options.content) return;
+
+      // crate popover
+      createPopover(self);
+
+      // bind
+      self.update = self.update.bind(self);
+
+      // attach event listeners
+      togglePopoverHandlers(self, 1);
+    }
+
+    update(e) {
+      styleTip(this, e);
+    }
+
+    // POPOVER PUBLIC METHODS
+    // ======================
+    toggle(e) {
+      const self = e ? this[popoverComponent] : this;
+      const { popover, options } = self;
+      if (!isVisibleTip(popover, options.container)) self.show();
+      else self.hide();
+    }
+
+    show(e) {
+      const self = e ? this[popoverComponent] : this;
+      const {
+        element, popover, options, id,
+      } = self;
+      const { container } = options;
+
+      clearTimeout(self.timer);
+
+      self.timer = setTimeout(() => {
+        if (!isVisibleTip(popover, container)) {
+          element.dispatchEvent(showPopoverEvent);
+          if (showPopoverEvent.defaultPrevented) return;
+
+          // append to the container
+          container.appendChild(popover);
+          element.setAttribute(ariaDescribedBy, id);
+
+          self.update(e);
+          if (!hasClass(popover, showClass)) addClass(popover, showClass);
+
+          if (options.animation) emulateTransitionEnd(popover, () => popoverShowTrigger(self));
+          else popoverShowTrigger(self);
+        }
+      }, 17);
+    }
+
+    hide(e) {
+      let self;
+      if (e && this[popoverComponent]) {
+        self = this[popoverComponent];
+      } else if (e) { // dismissible popover
+        const dPopover = this.closest(`.${popoverString}`);
+        const dEl = dPopover && queryElement(`[${ariaDescribedBy}="${dPopover.id}"]`);
+        self = dEl[popoverComponent];
+      } else {
+        self = this;
+      }
+      const { element, popover, options } = self;
+
+      clearTimeout(self.timer);
+
+      self.timer = setTimeout(() => {
+        if (isVisibleTip(popover, options.container)) {
+          element.dispatchEvent(hidePopoverEvent);
+          if (hidePopoverEvent.defaultPrevented) return;
+
+          removeClass(popover, showClass);
+
+          if (options.animation) emulateTransitionEnd(popover, () => popoverHideTrigger(self));
+          else popoverHideTrigger(self);
+        }
+      }, options.delay + 17);
+    }
+
+    enable() {
+      const self = this;
+      const { enabled } = self;
+      if (!enabled) {
+        togglePopoverHandlers(self, 1);
+        self.enabled = !enabled;
+      }
+    }
+
+    disable() {
+      const self = this;
+      const { enabled, popover, options } = self;
+      if (enabled) {
+        if (isVisibleTip(popover, options.container) && options.animation) {
+          self.hide();
+
+          setTimeout(
+            () => togglePopoverHandlers(self),
+            getElementTransitionDuration(popover) + options.delay + 17,
+          );
+        } else {
+          togglePopoverHandlers(self);
+        }
+        self.enabled = !enabled;
+      }
+    }
+
+    toggleEnabled() {
+      const self = this;
+      if (!self.enabled) self.enable();
+      else self.disable();
+    }
+
+    dispose() {
+      const self = this;
+      const { popover, options } = self;
+      const { container, animation } = options;
+      if (animation && isVisibleTip(popover, container)) {
+        options.delay = 0; // reset delay
+        self.hide();
+        emulateTransitionEnd(popover, () => togglePopoverHandlers(self));
+      } else {
+        togglePopoverHandlers(self);
+      }
+      super.dispose(popoverComponent);
+    }
+  }
+
+  Popover.init = {
+    component: popoverComponent,
+    selector: popoverSelector,
+    constructor: Popover,
+  };
+
+  /* Native JavaScript for Bootstrap 5 | ScrollSpy
+  ------------------------------------------------ */
+
+  // SCROLLSPY PRIVATE GC
+  // ====================
+  const scrollspyString = 'scrollspy';
+  const scrollspyComponent = 'ScrollSpy';
+  const scrollspySelector = '[data-bs-spy="scroll"]';
+  const scrollSpyDefaultOptions = {
+    offset: 10,
+    target: null,
+  };
+
+  // SCROLLSPY CUSTOM EVENT
+  // ======================
+  const activateScrollSpy = bootstrapCustomEvent(`activate.bs.${scrollspyString}`);
+
+  // SCROLLSPY PRIVATE METHODS
+  // =========================
+  function updateSpyTargets(self) {
+    const {
+      target, scrollTarget, isWindow, options, itemsLength, scrollHeight,
+    } = self;
+    const { offset } = options;
+    const links = target.getElementsByTagName('A');
+
+    self.scrollTop = isWindow
+      ? scrollTarget.pageYOffset
+      : scrollTarget.scrollTop;
+
+    // only update items/offsets once or with each mutation
+    if (itemsLength !== links.length || getScrollHeight(scrollTarget) !== scrollHeight) {
+      let href;
+      let targetItem;
+      let rect;
+
+      // reset arrays & update
+      self.items = [];
+      self.offsets = [];
+      self.scrollHeight = getScrollHeight(scrollTarget);
+      self.maxScroll = self.scrollHeight - getOffsetHeight(self);
+
+      Array.from(links).forEach((link) => {
+        href = link.getAttribute('href');
+        targetItem = href && href.charAt(0) === '#' && href.slice(-1) !== '#' && queryElement(href);
+
+        if (targetItem) {
+          self.items.push(link);
+          rect = targetItem.getBoundingClientRect();
+          self.offsets.push((isWindow ? rect.top + self.scrollTop : targetItem.offsetTop) - offset);
+        }
+      });
+      self.itemsLength = self.items.length;
+    }
+  }
+
+  function getScrollHeight(scrollTarget) {
+    return scrollTarget.scrollHeight || Math.max(
+      document.body.scrollHeight,
+      document.documentElement.scrollHeight,
+    );
+  }
+
+  function getOffsetHeight({ element, isWindow }) {
+    if (!isWindow) return element.getBoundingClientRect().height;
+    return window.innerHeight;
+  }
+
+  function clear(target) {
+    Array.from(target.getElementsByTagName('A')).forEach((item) => {
+      if (hasClass(item, activeClass)) removeClass(item, activeClass);
+    });
+  }
+
+  function activate(self, item) {
+    const { target, element } = self;
+    clear(target);
+    self.activeItem = item;
+    addClass(item, activeClass);
+
+    // activate all parents
+    const parents = [];
+    let parentItem = item;
+    while (parentItem !== document.body) {
+      parentItem = parentItem.parentNode;
+      if (hasClass(parentItem, 'nav') || hasClass(parentItem, 'dropdown-menu')) parents.push(parentItem);
+    }
+
+    parents.forEach((menuItem) => {
+      const parentLink = menuItem.previousElementSibling;
+
+      if (parentLink && !hasClass(parentLink, activeClass)) {
+        addClass(parentLink, activeClass);
+      }
+    });
+
+    // update relatedTarget and dispatch
+    activateScrollSpy.relatedTarget = item;
+    element.dispatchEvent(activateScrollSpy);
+  }
+
+  function toggleSpyHandlers(self, add) {
+    const action = add ? addEventListener : removeEventListener;
+    self.scrollTarget[action]('scroll', self.refresh, passiveHandler);
+  }
+
+  // SCROLLSPY DEFINITION
+  // ====================
+  class ScrollSpy extends BaseComponent {
+    constructor(target, config) {
+      super(scrollspyComponent, target, scrollSpyDefaultOptions, config);
+      // bind
+      const self = this;
+
+      // initialization element & options
+      const { element, options } = self;
+
+      // additional properties
+      self.target = queryElement(options.target);
+
+      // invalidate
+      if (!self.target) return;
+
+      // set initial state
+      self.scrollTarget = element.clientHeight < element.scrollHeight ? element : window;
+      self.isWindow = self.scrollTarget === window;
+      self.scrollTop = 0;
+      self.maxScroll = 0;
+      self.scrollHeight = 0;
+      self.activeItem = null;
+      self.items = [];
+      self.offsets = [];
+
+      // bind events
+      self.refresh = self.refresh.bind(self);
+
+      // add event handlers
+      toggleSpyHandlers(self, 1);
+
+      self.refresh();
+    }
+
+    // SCROLLSPY PUBLIC METHODS
+    // ========================
+    refresh() {
+      const self = this;
+      const { target } = self;
+
+      // check if target is visible and invalidate
+      if (target.offsetHeight === 0) return;
+
+      updateSpyTargets(self);
+
+      const {
+        scrollTop, maxScroll, itemsLength, items, activeItem,
+      } = self;
+
+      if (scrollTop >= maxScroll) {
+        const newActiveItem = items[itemsLength - 1];
+
+        if (activeItem !== newActiveItem) {
+          activate(self, newActiveItem);
         }
-        var popoverBodyMarkup = document.createElement('div');
-        popoverBodyMarkup.classList.add('popover-body');
-        popoverBodyMarkup.innerHTML = ops.dismissible && titleString === null ? contentString + closeBtn : contentString;
-        popover.appendChild(popoverBodyMarkup);
-      } else {
-        var popoverTemplate = document.createElement('div');
-        popoverTemplate.innerHTML = ops.template.trim();
-        popover.className = popoverTemplate.firstChild.className;
-        popover.innerHTML = popoverTemplate.firstChild.innerHTML;
-        var popoverHeader = queryElement('.popover-header',popover),
-            popoverBody = queryElement('.popover-body',popover);
-        titleString && popoverHeader && (popoverHeader.innerHTML = titleString.trim());
-        contentString && popoverBody && (popoverBody.innerHTML = contentString.trim());
+        return;
       }
-      ops.container.appendChild(popover);
-      popover.style.display = 'block';
-      !popover.classList.contains( 'popover') && popover.classList.add('popover');
-      !popover.classList.contains( ops.animation) && popover.classList.add(ops.animation);
-      !popover.classList.contains( placementClass) && popover.classList.add(placementClass);
-    }
-    function showPopover() {
-      !popover.classList.contains('show') && ( popover.classList.add('show') );
-    }
-    function updatePopover() {
-      styleTip(element, popover, ops.placement, ops.container);
-    }
-    function forceFocus () {
-      if (popover === null) { element.focus(); }
-    }
-    function toggleEvents(action) {
-      action = action ? 'addEventListener' : 'removeEventListener';
-      if (ops.trigger === 'hover') {
-        element[action]( mouseClickEvents.down, self.show );
-        element[action]( mouseHoverEvents[0], self.show );
-        if (!ops.dismissible) { element[action]( mouseHoverEvents[1], self.hide ); }
-      } else if ('click' == ops.trigger) {
-        element[action]( ops.trigger, self.toggle );
-      } else if ('focus' == ops.trigger) {
-        isIphone && element[action]( 'click', forceFocus, false );
-        element[action]( ops.trigger, self.toggle );
+
+      const { offsets } = self;
+
+      if (activeItem && scrollTop < offsets[0] && offsets[0] > 0) {
+        self.activeItem = null;
+        clear(target);
+        return;
       }
+
+      items.forEach((item, i) => {
+        if (activeItem !== item && scrollTop >= offsets[i]
+          && (typeof offsets[i + 1] === 'undefined' || scrollTop < offsets[i + 1])) {
+          activate(self, item);
+        }
+      });
     }
-    function touchHandler(e){
-      if ( popover && popover.contains(e.target) || e.target === element || element.contains(e.target)) ; else {
-        self.hide();
-      }
+
+    dispose() {
+      toggleSpyHandlers(this);
+      super.dispose(scrollspyComponent);
     }
-    function dismissHandlerToggle(action) {
-      action = action ? 'addEventListener' : 'removeEventListener';
-      if (ops.dismissible) {
-        document[action]('click', dismissibleHandler, false );
+  }
+
+  ScrollSpy.init = {
+    component: scrollspyComponent,
+    selector: scrollspySelector,
+    constructor: ScrollSpy,
+  };
+
+  const ariaSelected = 'aria-selected';
+
+  /* Native JavaScript for Bootstrap 5 | Tab
+  ------------------------------------------ */
+
+  // TAB PRIVATE GC
+  // ================
+  const tabString = 'tab';
+  const tabComponent = 'Tab';
+  const tabSelector = `[${dataBsToggle}="${tabString}"]`;
+
+  // TAB CUSTOM EVENTS
+  // =================
+  const showTabEvent = bootstrapCustomEvent(`show.bs.${tabString}`);
+  const shownTabEvent = bootstrapCustomEvent(`shown.bs.${tabString}`);
+  const hideTabEvent = bootstrapCustomEvent(`hide.bs.${tabString}`);
+  const hiddenTabEvent = bootstrapCustomEvent(`hidden.bs.${tabString}`);
+
+  let nextTab;
+  let nextTabContent;
+  let nextTabHeight;
+  let activeTab;
+  let activeTabContent;
+  let tabContainerHeight;
+  let tabEqualContents;
+
+  // TAB PRIVATE METHODS
+  // ===================
+  function triggerTabEnd(self) {
+    const { tabContent, nav } = self;
+    tabContent.style.height = '';
+    removeClass(tabContent, collapsingClass);
+    nav.isAnimating = false;
+  }
+
+  function triggerTabShow(self) {
+    const { tabContent, nav } = self;
+
+    if (tabContent) { // height animation
+      if (tabEqualContents) {
+        triggerTabEnd(self);
       } else {
-        'focus' == ops.trigger && element[action]( 'blur', self.hide );
-        'hover' == ops.trigger && document[action]( 'touchstart', touchHandler, passiveHandler );
+        setTimeout(() => { // enables height animation
+          tabContent.style.height = `${nextTabHeight}px`; // height animation
+          reflow(tabContent);
+          emulateTransitionEnd(tabContent, () => triggerTabEnd(self));
+        }, 50);
       }
-      window[action]('resize', self.hide, passiveHandler );
+    } else {
+      nav.isAnimating = false;
     }
-    function showTrigger() {
-      dismissHandlerToggle(1);
-      dispatchCustomEvent.call(element, shownCustomEvent);
+    shownTabEvent.relatedTarget = activeTab;
+    nextTab.dispatchEvent(shownTabEvent);
+  }
+
+  function triggerTabHide(self) {
+    const { tabContent } = self;
+    if (tabContent) {
+      activeTabContent.style.float = 'left';
+      nextTabContent.style.float = 'left';
+      tabContainerHeight = activeTabContent.scrollHeight;
     }
-    function hideTrigger() {
-      dismissHandlerToggle();
-      removePopover();
-      dispatchCustomEvent.call(element, hiddenCustomEvent);
+
+    // update relatedTarget and dispatch event
+    showTabEvent.relatedTarget = activeTab;
+    hiddenTabEvent.relatedTarget = nextTab;
+    nextTab.dispatchEvent(showTabEvent);
+    if (showTabEvent.defaultPrevented) return;
+
+    addClass(nextTabContent, activeClass);
+    removeClass(activeTabContent, activeClass);
+
+    if (tabContent) {
+      nextTabHeight = nextTabContent.scrollHeight;
+      tabEqualContents = nextTabHeight === tabContainerHeight;
+      addClass(tabContent, collapsingClass);
+      tabContent.style.height = `${tabContainerHeight}px`; // height animation
+      reflow(tabContent);
+      activeTabContent.style.float = '';
+      nextTabContent.style.float = '';
     }
-    self.toggle = function () {
-      if (popover === null) { self.show(); }
-      else { self.hide(); }
-    };
-    self.show = function () {
-      clearTimeout(timer);
-      timer = setTimeout( function () {
-        if (popover === null) {
-          dispatchCustomEvent.call(element, showCustomEvent);
-          if ( showCustomEvent.defaultPrevented ) { return; }
-          createPopover();
-          updatePopover();
-          showPopover();
-          !!ops.animation ? emulateTransitionEnd(popover, showTrigger) : showTrigger();
-        }
-      }, 20 );
-    };
-    self.hide = function () {
-      clearTimeout(timer);
-      timer = setTimeout( function () {
-        if (popover && popover !== null && popover.classList.contains('show')) {
-          dispatchCustomEvent.call(element, hideCustomEvent);
-          if ( hideCustomEvent.defaultPrevented ) { return; }
-          popover.classList.remove('show');
-          !!ops.animation ? emulateTransitionEnd(popover, hideTrigger) : hideTrigger();
-        }
-      }, ops.delay );
-    };
-    self.dispose = function () {
-      self.hide();
-      toggleEvents();
-      delete element.Popover;
-    };
-    element = queryElement(element);
-    element.Popover && element.Popover.dispose();
-    triggerData = element.getAttribute('data-trigger');
-    animationData = element.getAttribute('data-animation');
-    placementData = element.getAttribute('data-placement');
-    dismissibleData = element.getAttribute('data-dismissible');
-    delayData = element.getAttribute('data-delay');
-    containerData = element.getAttribute('data-container');
-    closeBtn = '<button type="button" class="close">×</button>';
-    showCustomEvent = bootstrapCustomEvent('show', 'popover');
-    shownCustomEvent = bootstrapCustomEvent('shown', 'popover');
-    hideCustomEvent = bootstrapCustomEvent('hide', 'popover');
-    hiddenCustomEvent = bootstrapCustomEvent('hidden', 'popover');
-    containerElement = queryElement(options.container);
-    containerDataElement = queryElement(containerData);
-    modal = element.closest('.modal');
-    navbarFixedTop = element.closest('.fixed-top');
-    navbarFixedBottom = element.closest('.fixed-bottom');
-    ops.template = options.template ? options.template : null;
-    ops.trigger = options.trigger ? options.trigger : triggerData || 'hover';
-    ops.animation = options.animation && options.animation !== 'fade' ? options.animation : animationData || 'fade';
-    ops.placement = options.placement ? options.placement : placementData || 'top';
-    ops.delay = parseInt(options.delay || delayData) || 200;
-    ops.dismissible = options.dismissible || dismissibleData === 'true' ? true : false;
-    ops.container = containerElement ? containerElement
-                            : containerDataElement ? containerDataElement
-                            : navbarFixedTop ? navbarFixedTop
-                            : navbarFixedBottom ? navbarFixedBottom
-                            : modal ? modal : document.body;
-    placementClass = "bs-popover-" + (ops.placement);
-    var popoverContents = getContents();
-    titleString = popoverContents[0];
-    contentString = popoverContents[1];
-    if ( !contentString && !ops.template ) { return; }
-    if ( !element.Popover ) {
-      toggleEvents(1);
-    }
-    element.Popover = self;
-  }
-
-  function ScrollSpy(element,options) {
-    options = options || {};
-    var self = this,
-      vars,
-      targetData,
-      offsetData,
-      spyTarget,
-      scrollTarget,
-      ops = {};
-    function updateTargets(){
-      var links = spyTarget.getElementsByTagName('A');
-      if (vars.length !== links.length) {
-        vars.items = [];
-        vars.targets = [];
-        Array.from(links).map(function (link){
-          var href = link.getAttribute('href'),
-            targetItem = href && href.charAt(0) === '#' && href.slice(-1) !== '#' && queryElement(href);
-          if ( targetItem ) {
-            vars.items.push(link);
-            vars.targets.push(targetItem);
-          }
+
+    if (hasClass(nextTabContent, fadeClass)) {
+      setTimeout(() => {
+        addClass(nextTabContent, showClass);
+        emulateTransitionEnd(nextTabContent, () => {
+          triggerTabShow(self);
         });
-        vars.length = links.length;
-      }
+      }, 20);
+    } else { triggerTabShow(self); }
+
+    activeTab.dispatchEvent(hiddenTabEvent);
+  }
+
+  function getActiveTab({ nav }) {
+    const activeTabs = nav.getElementsByClassName(activeClass);
+
+    if (activeTabs.length === 1
+      && !dropdownMenuClasses.some((c) => hasClass(activeTabs[0].parentNode, c))) {
+      [activeTab] = activeTabs;
+    } else if (activeTabs.length > 1) {
+      activeTab = activeTabs[activeTabs.length - 1];
+    }
+    return activeTab;
+  }
+
+  function getActiveTabContent(self) {
+    return queryElement(getActiveTab(self).getAttribute('href'));
+  }
+
+  function toggleTabHandler(self, add) {
+    const action = add ? addEventListener : removeEventListener;
+    self.element[action]('click', tabClickHandler);
+  }
+
+  // TAB EVENT HANDLER
+  // =================
+  function tabClickHandler(e) {
+    const self = this[tabComponent];
+    e.preventDefault();
+    if (!self.nav.isAnimating) self.show();
+  }
+
+  // TAB DEFINITION
+  // ==============
+  class Tab extends BaseComponent {
+    constructor(target) {
+      super(tabComponent, target);
+      // bind
+      const self = this;
+
+      // initialization element
+      const { element } = self;
+
+      // event targets
+      self.nav = element.closest('.nav');
+      const { nav } = self;
+      self.dropdown = nav && queryElement(`.${dropdownMenuClasses[0]}-toggle`, nav);
+      activeTabContent = getActiveTabContent(self);
+      self.tabContent = supportTransition && activeTabContent.closest('.tab-content');
+      tabContainerHeight = activeTabContent.scrollHeight;
+
+      // set default animation state
+      nav.isAnimating = false;
+
+      // add event listener
+      toggleTabHandler(self, 1);
     }
-    function updateItem(index) {
-      var item = vars.items[index],
-        targetItem = vars.targets[index],
-        dropmenu = item.classList.contains('dropdown-item') && item.closest('.dropdown-menu'),
-        dropLink = dropmenu && dropmenu.previousElementSibling,
-        nextSibling = item.nextElementSibling,
-        activeSibling = nextSibling && nextSibling.getElementsByClassName('active').length,
-        targetRect = vars.isWindow && targetItem.getBoundingClientRect(),
-        isActive = item.classList.contains('active') || false,
-        topEdge = (vars.isWindow ? targetRect.top + vars.scrollOffset : targetItem.offsetTop) - ops.offset,
-        bottomEdge = vars.isWindow ? targetRect.bottom + vars.scrollOffset - ops.offset
-                   : vars.targets[index+1] ? vars.targets[index+1].offsetTop - ops.offset
-                   : element.scrollHeight,
-        inside = activeSibling || vars.scrollOffset >= topEdge && bottomEdge > vars.scrollOffset;
-       if ( !isActive && inside ) {
-        item.classList.add('active');
-        if (dropLink && !dropLink.classList.contains('active') ) {
-          dropLink.classList.add('active');
+
+    // TAB PUBLIC METHODS
+    // ==================
+    show() { // the tab we clicked is now the nextTab tab
+      const self = this;
+      const { element, nav, dropdown } = self;
+      nextTab = element;
+      if (!hasClass(nextTab, activeClass)) {
+        // this is the actual object, the nextTab tab content to activate
+        nextTabContent = queryElement(nextTab.getAttribute('href'));
+        activeTab = getActiveTab({ nav });
+        activeTabContent = getActiveTabContent({ nav });
+
+        // update relatedTarget and dispatch
+        hideTabEvent.relatedTarget = nextTab;
+        activeTab.dispatchEvent(hideTabEvent);
+        if (hideTabEvent.defaultPrevented) return;
+
+        nav.isAnimating = true;
+        removeClass(activeTab, activeClass);
+        activeTab.setAttribute(ariaSelected, 'false');
+        addClass(nextTab, activeClass);
+        nextTab.setAttribute(ariaSelected, 'true');
+
+        if (dropdown) {
+          if (!hasClass(element.parentNode, dropdownMenuClass)) {
+            if (hasClass(dropdown, activeClass)) removeClass(dropdown, activeClass);
+          } else if (!hasClass(dropdown, activeClass)) addClass(dropdown, activeClass);
         }
-        dispatchCustomEvent.call(element, bootstrapCustomEvent( 'activate', 'scrollspy', { relatedTarget: vars.items[index] }));
-      } else if ( isActive && !inside ) {
-        item.classList.remove('active');
-        if (dropLink && dropLink.classList.contains('active') && !item.parentNode.getElementsByClassName('active').length ) {
-          dropLink.classList.remove('active');
+
+        if (hasClass(activeTabContent, fadeClass)) {
+          removeClass(activeTabContent, showClass);
+          emulateTransitionEnd(activeTabContent, () => triggerTabHide(self));
+        } else {
+          triggerTabHide(self);
         }
-      } else if ( isActive && inside || !inside && !isActive ) {
-        return;
       }
     }
-    function updateItems() {
-      updateTargets();
-      vars.scrollOffset = vars.isWindow ? getScroll().y : element.scrollTop;
-      vars.items.map(function (l,idx){ return updateItem(idx); });
+
+    dispose() {
+      toggleTabHandler(this);
+      super.dispose(tabComponent);
     }
-    function toggleEvents(action) {
-      action = action ? 'addEventListener' : 'removeEventListener';
-      scrollTarget[action]('scroll', self.refresh, passiveHandler );
-      window[action]( 'resize', self.refresh, passiveHandler );
+  }
+
+  Tab.init = {
+    component: tabComponent,
+    selector: tabSelector,
+    constructor: Tab,
+  };
+
+  /* Native JavaScript for Bootstrap 5 | Toast
+  -------------------------------------------- */
+
+  // TOAST PRIVATE GC
+  // ================
+  const toastString = 'toast';
+  const toastComponent = 'Toast';
+  const toastSelector = `.${toastString}`;
+  const toastDismissSelector = `[${dataBsDismiss}="${toastString}"]`;
+  const showingClass = 'showing';
+  const hideClass = 'hide';
+  const toastDefaultOptions = {
+    animation: true,
+    autohide: true,
+    delay: 500,
+  };
+
+  // TOAST CUSTOM EVENTS
+  // ===================
+  const showToastEvent = bootstrapCustomEvent(`show.bs.${toastString}`);
+  const hideToastEvent = bootstrapCustomEvent(`hide.bs.${toastString}`);
+  const shownToastEvent = bootstrapCustomEvent(`shown.bs.${toastString}`);
+  const hiddenToastEvent = bootstrapCustomEvent(`hidden.bs.${toastString}`);
+
+  // TOAST PRIVATE METHODS
+  // =====================
+  function showToastComplete(self) {
+    const { element, options } = self;
+    if (!options.animation) {
+      removeClass(element, showingClass);
+      addClass(element, showClass);
     }
-    self.refresh = function () {
-      updateItems();
-    };
-    self.dispose = function () {
-      toggleEvents();
-      delete element.ScrollSpy;
-    };
-    element = queryElement(element);
-    element.ScrollSpy && element.ScrollSpy.dispose();
-    targetData = element.getAttribute('data-target');
-    offsetData = element.getAttribute('data-offset');
-    spyTarget = queryElement(options.target || targetData);
-    scrollTarget = element.offsetHeight < element.scrollHeight ? element : window;
-    if (!spyTarget) { return }
-    ops.target = spyTarget;
-    ops.offset = parseInt(options.offset || offsetData) || 10;
-    vars = {};
-    vars.length = 0;
-    vars.items = [];
-    vars.targets = [];
-    vars.isWindow = scrollTarget === window;
-    if ( !element.ScrollSpy ) {
-      toggleEvents(1);
-    }
-    self.refresh();
-    element.ScrollSpy = self;
-  }
-
-  function Tab(element,options) {
-    options = options || {};
-    var self = this,
-      heightData,
-      tabs, dropdown,
-      showCustomEvent,
-      shownCustomEvent,
-      hideCustomEvent,
-      hiddenCustomEvent,
-      next,
-      tabsContentContainer = false,
-      activeTab,
-      activeContent,
-      nextContent,
-      containerHeight,
-      equalContents,
-      nextHeight,
-      animateHeight;
-    function triggerEnd() {
-      tabsContentContainer.style.height = '';
-      tabsContentContainer.classList.remove('collapsing');
-      tabs.isAnimating = false;
-    }
-    function triggerShow() {
-      if (tabsContentContainer) {
-        if ( equalContents ) {
-          triggerEnd();
-        } else {
-          setTimeout(function () {
-            tabsContentContainer.style.height = nextHeight + "px";
-            tabsContentContainer.offsetWidth;
-            emulateTransitionEnd(tabsContentContainer, triggerEnd);
-          },50);
-        }
-      } else {
-        tabs.isAnimating = false;
-      }
-      shownCustomEvent = bootstrapCustomEvent('shown', 'tab', { relatedTarget: activeTab });
-      dispatchCustomEvent.call(next, shownCustomEvent);
-    }
-    function triggerHide() {
-      if (tabsContentContainer) {
-        activeContent.style.float = 'left';
-        nextContent.style.float = 'left';
-        containerHeight = activeContent.scrollHeight;
-      }
-      showCustomEvent = bootstrapCustomEvent('show', 'tab', { relatedTarget: activeTab });
-      hiddenCustomEvent = bootstrapCustomEvent('hidden', 'tab', { relatedTarget: next });
-      dispatchCustomEvent.call(next, showCustomEvent);
-      if ( showCustomEvent.defaultPrevented ) { return; }
-      nextContent.classList.add('active');
-      activeContent.classList.remove('active');
-      if (tabsContentContainer) {
-        nextHeight = nextContent.scrollHeight;
-        equalContents = nextHeight === containerHeight;
-        tabsContentContainer.classList.add('collapsing');
-        tabsContentContainer.style.height = containerHeight + "px";
-        tabsContentContainer.offsetHeight;
-        activeContent.style.float = '';
-        nextContent.style.float = '';
+
+    element.dispatchEvent(shownToastEvent);
+    if (options.autohide) self.hide();
+  }
+
+  function hideToastComplete(self) {
+    const { element } = self;
+    addClass(element, hideClass);
+    element.dispatchEvent(hiddenToastEvent);
+  }
+
+  function closeToast(self) {
+    const { element, options } = self;
+    removeClass(element, showClass);
+
+    if (options.animation) {
+      reflow(element);
+      emulateTransitionEnd(element, () => hideToastComplete(self));
+    } else {
+      hideToastComplete(self);
+    }
+  }
+
+  function openToast(self) {
+    const { element, options } = self;
+    removeClass(element, hideClass);
+
+    if (options.animation) {
+      reflow(element);
+      addClass(element, showingClass);
+      addClass(element, showClass);
+
+      emulateTransitionEnd(element, () => showToastComplete(self));
+    } else {
+      showToastComplete(self);
+    }
+  }
+
+  function toggleToastHandler(self, add) {
+    const action = add ? addEventListener : removeEventListener;
+    if (self.dismiss) {
+      self.dismiss[action]('click', self.hide);
+    }
+  }
+
+  // TOAST EVENT HANDLERS
+  // ====================
+  function completeDisposeToast(self) {
+    clearTimeout(self.timer);
+    toggleToastHandler(self);
+  }
+
+  // TOAST DEFINITION
+  // ================
+  class Toast extends BaseComponent {
+    constructor(target, config) {
+      super(toastComponent, target, toastDefaultOptions, config);
+      // bind
+      const self = this;
+
+      // dismiss button
+      self.dismiss = queryElement(toastDismissSelector, self.element);
+
+      // bind
+      self.show = self.show.bind(self);
+      self.hide = self.hide.bind(self);
+
+      // add event listener
+      toggleToastHandler(self, 1);
+    }
+
+    // TOAST PUBLIC METHODS
+    // ====================
+    show() {
+      const self = this;
+      const { element } = self;
+      if (element && hasClass(element, hideClass)) {
+        element.dispatchEvent(showToastEvent);
+        if (showToastEvent.defaultPrevented) return;
+
+        addClass(element, fadeClass);
+        clearTimeout(self.timer);
+        self.timer = setTimeout(() => openToast(self), 10);
       }
-      if ( nextContent.classList.contains('fade') ) {
-        setTimeout(function () {
-          nextContent.classList.add('show');
-          emulateTransitionEnd(nextContent,triggerShow);
-        },20);
-      } else { triggerShow(); }
-      dispatchCustomEvent.call(activeTab, hiddenCustomEvent);
-    }
-    function getActiveTab() {
-      var activeTabs = tabs.getElementsByClassName('active'), activeTab;
-      if ( activeTabs.length === 1 && !activeTabs[0].parentNode.classList.contains('dropdown') ) {
-        activeTab = activeTabs[0];
-      } else if ( activeTabs.length > 1 ) {
-        activeTab = activeTabs[activeTabs.length-1];
+    }
+
+    hide(noTimer) {
+      const self = this;
+      const { element, options } = self;
+
+      if (element && hasClass(element, showClass)) {
+        element.dispatchEvent(hideToastEvent);
+        if (hideToastEvent.defaultPrevented) return;
+
+        clearTimeout(self.timer);
+        self.timer = setTimeout(() => closeToast(self), // Bugfix by BlackDex to get autohide with a delay working.
+          noTimer ? 10 : options.delay,
+        );
       }
-      return activeTab;
     }
-    function getActiveContent() { return queryElement(getActiveTab().getAttribute('href')) }
-    function clickHandler(e) {
-      e.preventDefault();
-      next = e.currentTarget;
-      !tabs.isAnimating && self.show();
-    }
-    self.show = function () {
-      next = next || element;
-      if (!next.classList.contains('active')) {
-        nextContent = queryElement(next.getAttribute('href'));
-        activeTab = getActiveTab();
-        activeContent = getActiveContent();
-        hideCustomEvent = bootstrapCustomEvent( 'hide', 'tab', { relatedTarget: next });
-        dispatchCustomEvent.call(activeTab, hideCustomEvent);
-        if (hideCustomEvent.defaultPrevented) { return; }
-        tabs.isAnimating = true;
-        activeTab.classList.remove('active');
-        activeTab.setAttribute('aria-selected','false');
-        next.classList.add('active');
-        next.setAttribute('aria-selected','true');
-        if ( dropdown ) {
-          if ( !element.parentNode.classList.contains('dropdown-menu') ) {
-            if (dropdown.classList.contains('active')) { dropdown.classList.remove('active'); }
-          } else {
-            if (!dropdown.classList.contains('active')) { dropdown.classList.add('active'); }
-          }
+
+    dispose() {
+      const self = this;
+      const { element, options } = self;
+      self.hide();
+
+      if (options.animation) emulateTransitionEnd(element, () => completeDisposeToast(self));
+      else completeDisposeToast(self);
+
+      super.dispose(toastComponent);
+    }
+  }
+
+  Toast.init = {
+    component: toastComponent,
+    selector: toastSelector,
+    constructor: Toast,
+  };
+
+  const dataOriginalTitle = 'data-original-title';
+
+  /* Native JavaScript for Bootstrap 5 | Tooltip
+  ---------------------------------------------- */
+
+  // TOOLTIP PRIVATE GC
+  // ==================
+  const tooltipString = 'tooltip';
+  const tooltipComponent = 'Tooltip';
+  const tooltipSelector = `[${dataBsToggle}="${tooltipString}"],[data-tip="${tooltipString}"]`;
+
+  const titleAttr = 'title';
+  const tooltipInnerClass = `${tooltipString}-inner`;
+  const tooltipDefaultOptions = {
+    title: null,
+    template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
+    placement: 'top',
+    animation: true,
+    customClass: null,
+    delay: 200,
+    sanitizeFn: null,
+  };
+
+  // TOOLTIP CUSTOM EVENTS
+  // =====================
+  const showTooltipEvent = bootstrapCustomEvent(`show.bs.${tooltipString}`);
+  const shownTooltipEvent = bootstrapCustomEvent(`shown.bs.${tooltipString}`);
+  const hideTooltipEvent = bootstrapCustomEvent(`hide.bs.${tooltipString}`);
+  const hiddenTooltipEvent = bootstrapCustomEvent(`hidden.bs.${tooltipString}`);
+
+  // TOOLTIP PRIVATE METHODS
+  // =======================
+  function createTooltip(self) {
+    const { options, id } = self;
+    const placementClass = `bs-${tooltipString}-${tipClassPositions[options.placement]}`;
+    let titleString = options.title.trim();
+
+    // sanitize stuff
+    if (options.sanitizeFn) {
+      titleString = options.sanitizeFn(titleString);
+      options.template = options.sanitizeFn(options.template);
+    }
+
+    if (!titleString) return;
+
+    // create tooltip
+    self.tooltip = document.createElement('div');
+    const { tooltip } = self;
+
+    // set aria
+    tooltip.setAttribute('id', id);
+
+    // set markup
+    const tooltipMarkup = document.createElement('div');
+    tooltipMarkup.innerHTML = options.template.trim();
+
+    tooltip.className = tooltipMarkup.firstChild.className;
+    tooltip.innerHTML = tooltipMarkup.firstChild.innerHTML;
+
+    queryElement(`.${tooltipInnerClass}`, tooltip).innerHTML = titleString;
+
+    // set arrow
+    self.arrow = queryElement(`.${tooltipString}-arrow`, tooltip);
+
+    // set class and role attribute
+    tooltip.setAttribute('role', tooltipString);
+    // set classes
+    if (!hasClass(tooltip, tooltipString)) addClass(tooltip, tooltipString);
+    if (options.animation && !hasClass(tooltip, fadeClass)) addClass(tooltip, fadeClass);
+    if (options.customClass && !hasClass(tooltip, options.customClass)) {
+      addClass(tooltip, options.customClass);
+    }
+    if (!hasClass(tooltip, placementClass)) addClass(tooltip, placementClass);
+  }
+
+  function removeTooltip(self) {
+    const { element, options, tooltip } = self;
+    element.removeAttribute(ariaDescribedBy);
+    options.container.removeChild(tooltip);
+    self.timer = null;
+  }
+
+  function disposeTooltipComplete(self) {
+    const { element } = self;
+    toggleTooltipHandlers(self);
+    if (element.hasAttribute(dataOriginalTitle)) toggleTooltipTitle(self);
+  }
+  function toggleTooltipAction(self, add) {
+    const action = add ? addEventListener : removeEventListener;
+
+    document[action]('touchstart', tooltipTouchHandler, passiveHandler);
+
+    if (!isMedia(self.element)) {
+      window[action]('scroll', self.update, passiveHandler);
+      window[action]('resize', self.update, passiveHandler);
+    }
+  }
+  function tooltipShownAction(self) {
+    toggleTooltipAction(self, 1);
+    self.element.dispatchEvent(shownTooltipEvent);
+  }
+  function tooltipHiddenAction(self) {
+    toggleTooltipAction(self);
+    removeTooltip(self);
+    self.element.dispatchEvent(hiddenTooltipEvent);
+  }
+  function toggleTooltipHandlers(self, add) {
+    const action = add ? addEventListener : removeEventListener;
+    const { element } = self;
+
+    if (isMedia(element)) element[action]('mousemove', self.update, passiveHandler);
+    element[action]('mousedown', self.show);
+    element[action]('mouseenter', self.show);
+    element[action]('mouseleave', self.hide);
+  }
+
+  function toggleTooltipTitle(self, content) {
+    // [0 - add, 1 - remove] | [0 - remove, 1 - add]
+    const titleAtt = [dataOriginalTitle, titleAttr];
+    const { element } = self;
+
+    element.setAttribute(titleAtt[content ? 0 : 1],
+      (content || element.getAttribute(titleAtt[0])));
+    element.removeAttribute(titleAtt[content ? 1 : 0]);
+  }
+
+  // TOOLTIP EVENT HANDLERS
+  // ======================
+  function tooltipTouchHandler({ target }) {
+    const { tooltip, element } = this;
+    if (tooltip.contains(target) || target === element || element.contains(target)) ; else {
+      this.hide();
+    }
+  }
+
+  // TOOLTIP DEFINITION
+  // ==================
+  class Tooltip extends BaseComponent {
+    constructor(target, config) {
+      // initialization element
+      const element = queryElement(target);
+      tooltipDefaultOptions.title = element.getAttribute(titleAttr);
+      tooltipDefaultOptions.container = getTipContainer(element);
+      super(tooltipComponent, element, tooltipDefaultOptions, config);
+
+      // bind
+      const self = this;
+
+      // additional properties
+      self.tooltip = null;
+      self.arrow = null;
+      self.timer = null;
+      self.enabled = false;
+
+      // instance options
+      const { options } = self;
+
+      // media elements only work with body as a container
+      self.options.container = isMedia(element)
+        ? tooltipDefaultOptions.container
+        : queryElement(options.container);
+
+      // reset default options
+      tooltipDefaultOptions.container = null;
+      tooltipDefaultOptions[titleAttr] = null;
+
+      // invalidate
+      if (!options.title) return;
+
+      // all functions bind
+      tooltipTouchHandler.bind(self);
+      self.update = self.update.bind(self);
+
+      // set title attributes and add event listeners
+      if (element.hasAttribute(titleAttr)) toggleTooltipTitle(self, options.title);
+
+      // create tooltip here
+      self.id = `${tooltipString}-${getUID(element)}`;
+      createTooltip(self);
+
+      // attach events
+      toggleTooltipHandlers(self, 1);
+    }
+
+    // TOOLTIP PUBLIC METHODS
+    // ======================
+    show(e) {
+      const self = e ? this[tooltipComponent] : this;
+      const {
+        options, tooltip, element, id,
+      } = self;
+      clearTimeout(self.timer);
+      self.timer = setTimeout(() => {
+        if (!isVisibleTip(tooltip, options.container)) {
+          element.dispatchEvent(showTooltipEvent);
+          if (showTooltipEvent.defaultPrevented) return;
+
+          // append to container
+          options.container.appendChild(tooltip);
+          element.setAttribute(ariaDescribedBy, id);
+
+          self.update(e);
+          if (!hasClass(tooltip, showClass)) addClass(tooltip, showClass);
+          if (options.animation) emulateTransitionEnd(tooltip, () => tooltipShownAction(self));
+          else tooltipShownAction(self);
         }
-        if (activeContent.classList.contains('fade')) {
-          activeContent.classList.remove('show');
-          emulateTransitionEnd(activeContent, triggerHide);
-        } else { triggerHide(); }
-      }
-    };
-    self.dispose = function () {
-      element.removeEventListener('click',clickHandler,false);
-      delete element.Tab;
-    };
-    element = queryElement(element);
-    element.Tab && element.Tab.dispose();
-    heightData = element.getAttribute('data-height');
-    tabs = element.closest('.nav');
-    dropdown = tabs && queryElement('.dropdown-toggle',tabs);
-    animateHeight = !supportTransition || (options.height === false || heightData === 'false') ? false : true;
-    tabs.isAnimating = false;
-    if ( !element.Tab ) {
-      element.addEventListener('click',clickHandler,false);
-    }
-    if (animateHeight) { tabsContentContainer = getActiveContent().parentNode; }
-    element.Tab = self;
-  }
-
-  function Toast(element,options) {
-    options = options || {};
-    var self = this,
-        toast, timer = 0,
-        animationData,
-        autohideData,
-        delayData,
-        showCustomEvent,
-        hideCustomEvent,
-        shownCustomEvent,
-        hiddenCustomEvent,
-        ops = {};
-    function showComplete() {
-      toast.classList.remove( 'showing' );
-      toast.classList.add( 'show' );
-      dispatchCustomEvent.call(toast,shownCustomEvent);
-      if (ops.autohide) { self.hide(); }
-    }
-    function hideComplete() {
-      toast.classList.add( 'hide' );
-      dispatchCustomEvent.call(toast,hiddenCustomEvent);
-    }
-    function close () {
-      toast.classList.remove('show' );
-      ops.animation ? emulateTransitionEnd(toast, hideComplete) : hideComplete();
-    }
-    function disposeComplete() {
-      clearTimeout(timer);
-      element.removeEventListener('click',self.hide,false);
-      delete element.Toast;
-    }
-    self.show = function () {
-      if (toast && !toast.classList.contains('show')) {
-        dispatchCustomEvent.call(toast,showCustomEvent);
-        if (showCustomEvent.defaultPrevented) { return; }
-        ops.animation && toast.classList.add( 'fade' );
-        toast.classList.remove('hide' );
-        toast.offsetWidth;
-        toast.classList.add('showing' );
-        ops.animation ? emulateTransitionEnd(toast, showComplete) : showComplete();
-      }
-    };
-    self.hide = function (noTimer) {
-      if (toast && toast.classList.contains('show')) {
-        dispatchCustomEvent.call(toast,hideCustomEvent);
-        if(hideCustomEvent.defaultPrevented) { return; }
-        noTimer ? close() : (timer = setTimeout( close, ops.delay));
+      }, 20);
+    }
+
+    hide(e) {
+      const self = e ? this[tooltipComponent] : this;
+      const { options, tooltip, element } = self;
+
+      clearTimeout(self.timer);
+      self.timer = setTimeout(() => {
+        if (isVisibleTip(tooltip, options.container)) {
+          element.dispatchEvent(hideTooltipEvent);
+          if (hideTooltipEvent.defaultPrevented) return;
+
+          removeClass(tooltip, showClass);
+          if (options.animation) emulateTransitionEnd(tooltip, () => tooltipHiddenAction(self));
+          else tooltipHiddenAction(self);
+        }
+      }, options.delay);
+    }
+
+    update(e) {
+      styleTip(this, e);
+    }
+
+    toggle() {
+      const self = this;
+      const { tooltip, options } = self;
+      if (!isVisibleTip(tooltip, options.container)) self.show();
+      else self.hide();
+    }
+
+    enable() {
+      const self = this;
+      const { enabled } = self;
+      if (!enabled) {
+        toggleTooltipHandlers(self, 1);
+        self.enabled = !enabled;
       }
-    };
-    self.dispose = function () {
-      ops.animation ? emulateTransitionEnd(toast, disposeComplete) : disposeComplete();
-    };
-    element = queryElement(element);
-    element.Toast && element.Toast.dispose();
-    toast = element.closest('.toast');
-    animationData = element.getAttribute('data-animation');
-    autohideData = element.getAttribute('data-autohide');
-    delayData = element.getAttribute('data-delay');
-    showCustomEvent = bootstrapCustomEvent('show', 'toast');
-    hideCustomEvent = bootstrapCustomEvent('hide', 'toast');
-    shownCustomEvent = bootstrapCustomEvent('shown', 'toast');
-    hiddenCustomEvent = bootstrapCustomEvent('hidden', 'toast');
-    ops.animation = options.animation === false || animationData === 'false' ? 0 : 1;
-    ops.autohide = options.autohide === false || autohideData === 'false' ? 0 : 1;
-    ops.delay = parseInt(options.delay || delayData) || 500;
-    if ( !element.Toast ) {
-      element.addEventListener('click',self.hide,false);
-    }
-    element.Toast = self;
-  }
-
-  function Tooltip(element,options) {
-    options = options || {};
-    var self = this,
-        tooltip = null, timer = 0, titleString,
-        animationData,
-        placementData,
-        delayData,
-        containerData,
-        showCustomEvent,
-        shownCustomEvent,
-        hideCustomEvent,
-        hiddenCustomEvent,
-        containerElement,
-        containerDataElement,
-        modal,
-        navbarFixedTop,
-        navbarFixedBottom,
-        placementClass,
-        ops = {};
-    function getTitle() {
-      return element.getAttribute('title')
-          || element.getAttribute('data-title')
-          || element.getAttribute('data-original-title')
-    }
-    function removeToolTip() {
-      ops.container.removeChild(tooltip);
-      tooltip = null; timer = null;
-    }
-    function createToolTip() {
-      titleString = getTitle();
-      if ( titleString ) {
-        tooltip = document.createElement('div');
-        if (ops.template) {
-          var tooltipMarkup = document.createElement('div');
-          tooltipMarkup.innerHTML = ops.template.trim();
-          tooltip.className = tooltipMarkup.firstChild.className;
-          tooltip.innerHTML = tooltipMarkup.firstChild.innerHTML;
-          queryElement('.tooltip-inner',tooltip).innerHTML = titleString.trim();
+    }
+
+    disable() {
+      const self = this;
+      const { tooltip, options, enabled } = self;
+      if (enabled) {
+        if (!isVisibleTip(tooltip, options.container) && options.animation) {
+          self.hide();
+
+          setTimeout(
+            () => toggleTooltipHandlers(self),
+            getElementTransitionDuration(tooltip) + options.delay + 17,
+          );
         } else {
-          var tooltipArrow = document.createElement('div');
-          tooltipArrow.classList.add('arrow');
-          tooltip.appendChild(tooltipArrow);
-          var tooltipInner = document.createElement('div');
-          tooltipInner.classList.add('tooltip-inner');
-          tooltip.appendChild(tooltipInner);
-          tooltipInner.innerHTML = titleString;
+          toggleTooltipHandlers(self);
         }
-        tooltip.style.left = '0';
-        tooltip.style.top = '0';
-        tooltip.setAttribute('role','tooltip');
-        !tooltip.classList.contains('tooltip') && tooltip.classList.add('tooltip');
-        !tooltip.classList.contains(ops.animation) && tooltip.classList.add(ops.animation);
-        !tooltip.classList.contains(placementClass) && tooltip.classList.add(placementClass);
-        ops.container.appendChild(tooltip);
+        self.enabled = !enabled;
       }
     }
-    function updateTooltip() {
-      styleTip(element, tooltip, ops.placement, ops.container);
-    }
-    function showTooltip() {
-      !tooltip.classList.contains('show') && ( tooltip.classList.add('show') );
+
+    toggleEnabled() {
+      const self = this;
+      if (!self.enabled) self.enable();
+      else self.disable();
     }
-    function touchHandler(e){
-      if ( tooltip && tooltip.contains(e.target) || e.target === element || element.contains(e.target)) ; else {
+
+    dispose() {
+      const self = this;
+      const { tooltip, options } = self;
+
+      if (options.animation && isVisibleTip(tooltip, options.container)) {
+        options.delay = 0; // reset delay
         self.hide();
+        emulateTransitionEnd(tooltip, () => disposeTooltipComplete(self));
+      } else {
+        disposeTooltipComplete(self);
       }
+      super.dispose(tooltipComponent);
     }
-    function toggleAction(action){
-      action = action ? 'addEventListener' : 'removeEventListener';
-      document[action]( 'touchstart', touchHandler, passiveHandler );
-      window[action]( 'resize', self.hide, passiveHandler );
-    }
-    function showAction() {
-      toggleAction(1);
-      dispatchCustomEvent.call(element, shownCustomEvent);
-    }
-    function hideAction() {
-      toggleAction();
-      removeToolTip();
-      dispatchCustomEvent.call(element, hiddenCustomEvent);
-    }
-    function toggleEvents(action) {
-      action = action ? 'addEventListener' : 'removeEventListener';
-      element[action](mouseClickEvents.down, self.show,false);
-      element[action](mouseHoverEvents[0], self.show,false);
-      element[action](mouseHoverEvents[1], self.hide,false);
-    }
-    self.show = function () {
-      clearTimeout(timer);
-      timer = setTimeout( function () {
-        if (tooltip === null) {
-          dispatchCustomEvent.call(element, showCustomEvent);
-          if (showCustomEvent.defaultPrevented) { return; }
-          if(createToolTip() !== false) {
-            updateTooltip();
-            showTooltip();
-            !!ops.animation ? emulateTransitionEnd(tooltip, showAction) : showAction();
-          }
-        }
-      }, 20 );
-    };
-    self.hide = function () {
-      clearTimeout(timer);
-      timer = setTimeout( function () {
-        if (tooltip && tooltip.classList.contains('show')) {
-          dispatchCustomEvent.call(element, hideCustomEvent);
-          if (hideCustomEvent.defaultPrevented) { return; }
-          tooltip.classList.remove('show');
-          !!ops.animation ? emulateTransitionEnd(tooltip, hideAction) : hideAction();
-        }
-      }, ops.delay);
-    };
-    self.toggle = function () {
-      if (!tooltip) { self.show(); }
-      else { self.hide(); }
-    };
-    self.dispose = function () {
-      toggleEvents();
-      self.hide();
-      element.setAttribute('title', element.getAttribute('data-original-title'));
-      element.removeAttribute('data-original-title');
-      delete element.Tooltip;
-    };
-    element = queryElement(element);
-    element.Tooltip && element.Tooltip.dispose();
-    animationData = element.getAttribute('data-animation');
-    placementData = element.getAttribute('data-placement');
-    delayData = element.getAttribute('data-delay');
-    containerData = element.getAttribute('data-container');
-    showCustomEvent = bootstrapCustomEvent('show', 'tooltip');
-    shownCustomEvent = bootstrapCustomEvent('shown', 'tooltip');
-    hideCustomEvent = bootstrapCustomEvent('hide', 'tooltip');
-    hiddenCustomEvent = bootstrapCustomEvent('hidden', 'tooltip');
-    containerElement = queryElement(options.container);
-    containerDataElement = queryElement(containerData);
-    modal = element.closest('.modal');
-    navbarFixedTop = element.closest('.fixed-top');
-    navbarFixedBottom = element.closest('.fixed-bottom');
-    ops.animation = options.animation && options.animation !== 'fade' ? options.animation : animationData || 'fade';
-    ops.placement = options.placement ? options.placement : placementData || 'top';
-    ops.template = options.template ? options.template : null;
-    ops.delay = parseInt(options.delay || delayData) || 200;
-    ops.container = containerElement ? containerElement
-                            : containerDataElement ? containerDataElement
-                            : navbarFixedTop ? navbarFixedTop
-                            : navbarFixedBottom ? navbarFixedBottom
-                            : modal ? modal : document.body;
-    placementClass = "bs-tooltip-" + (ops.placement);
-    titleString = getTitle();
-    if ( !titleString ) { return; }
-    if (!element.Tooltip) {
-      element.setAttribute('data-original-title',titleString);
-      element.removeAttribute('title');
-      toggleEvents(1);
-    }
-    element.Tooltip = self;
-  }
-
-  var componentsInit = {};
-
-  function initializeDataAPI( Constructor, collection ){
-    Array.from(collection).map(function (x){ return new Constructor(x); });
-  }
-  function initCallback(lookUp){
-    lookUp = lookUp || document;
-    for (var component in componentsInit) {
-      initializeDataAPI( componentsInit[component][0], lookUp.querySelectorAll (componentsInit[component][1]) );
-    }
-  }
-
-  componentsInit.Alert = [ Alert, '[data-dismiss="alert"]'];
-  componentsInit.Button = [ Button, '[data-toggle="buttons"]' ];
-  componentsInit.Carousel = [ Carousel, '[data-ride="carousel"]' ];
-  componentsInit.Collapse = [ Collapse, '[data-toggle="collapse"]' ];
-  componentsInit.Dropdown = [ Dropdown, '[data-toggle="dropdown"]'];
-  componentsInit.Modal = [ Modal, '[data-toggle="modal"]' ];
-  componentsInit.Popover = [ Popover, '[data-toggle="popover"],[data-tip="popover"]' ];
-  componentsInit.ScrollSpy = [ ScrollSpy, '[data-spy="scroll"]' ];
-  componentsInit.Tab = [ Tab, '[data-toggle="tab"]' ];
-  componentsInit.Toast = [ Toast, '[data-dismiss="toast"]' ];
-  componentsInit.Tooltip = [ Tooltip, '[data-toggle="tooltip"],[data-tip="tooltip"]' ];
-  document.body ? initCallback() : document.addEventListener( 'DOMContentLoaded', function initWrapper(){
-  	initCallback();
-  	document.removeEventListener('DOMContentLoaded',initWrapper,false);
-  }, false );
-
-  function removeElementDataAPI( ConstructorName, collection ){
-    Array.from(collection).map(function (x){ return x[ConstructorName].dispose(); });
-  }
-  function removeDataAPI(lookUp) {
-    lookUp = lookUp || document;
-    for (var component in componentsInit) {
-      removeElementDataAPI( component, lookUp.querySelectorAll (componentsInit[component][1]) );
-    }
-  }
-
-  var version = "3.0.15";
+  }
+
+  Tooltip.init = {
+    component: tooltipComponent,
+    selector: tooltipSelector,
+    constructor: Tooltip,
+  };
+
+  var version = "4.0.2";
+
+  // import { alertInit } from '../components/alert-native.js';
+  // import { buttonInit } from '../components/button-native.js';
+  // import { carouselInit } from '../components/carousel-native.js';
+  // import { collapseInit } from '../components/collapse-native.js';
+  // import { dropdownInit } from '../components/dropdown-native.js';
+  // import { modalInit } from '../components/modal-native.js';
+  // import { offcanvasInit } from '../components/offcanvas-native.js';
+  // import { popoverInit } from '../components/popover-native.js';
+  // import { scrollSpyInit } from '../components/scrollspy-native.js';
+  // import { tabInit } from '../components/tab-native.js';
+  // import { toastInit } from '../components/toast-native.js';
+  // import { tooltipInit } from '../components/tooltip-native.js';
+
+  const componentsInit = {
+    Alert: Alert.init,
+    Button: Button.init,
+    Carousel: Carousel.init,
+    Collapse: Collapse.init,
+    Dropdown: Dropdown.init,
+    Modal: Modal.init,
+    Offcanvas: Offcanvas.init,
+    Popover: Popover.init,
+    ScrollSpy: ScrollSpy.init,
+    Tab: Tab.init,
+    Toast: Toast.init,
+    Tooltip: Tooltip.init,
+  };
+
+  function initializeDataAPI(Konstructor, collection) {
+    Array.from(collection).forEach((x) => new Konstructor(x));
+  }
+
+  function initCallback(context) {
+    const lookUp = context instanceof Element ? context : document;
+
+    Object.keys(componentsInit).forEach((comp) => {
+      const { constructor, selector } = componentsInit[comp];
+      initializeDataAPI(constructor, lookUp.querySelectorAll(selector));
+    });
+  }
+
+  // bulk initialize all components
+  if (document.body) initCallback();
+  else {
+    document.addEventListener('DOMContentLoaded', () => initCallback(), { once: true });
+  }
 
   var index = {
-    Alert: Alert,
-    Button: Button,
-    Carousel: Carousel,
-    Collapse: Collapse,
-    Dropdown: Dropdown,
-    Modal: Modal,
-    Popover: Popover,
-    ScrollSpy: ScrollSpy,
-    Tab: Tab,
-    Toast: Toast,
-    Tooltip: Tooltip,
-    initCallback: initCallback,
-    removeDataAPI: removeDataAPI,
-    componentsInit: componentsInit,
-    Version: version
+    Alert,
+    Button,
+    Carousel,
+    Collapse,
+    Dropdown,
+    Modal,
+    Offcanvas,
+    Popover,
+    ScrollSpy,
+    Tab,
+    Toast,
+    Tooltip,
+
+    initCallback,
+    Version: version,
   };
 
   return index;
diff --git a/src/static/scripts/bootstrap.css b/src/static/scripts/bootstrap.css
index a3171bef4d36d109ff98a0f1bb0ed85e9bb20eda..386e8b06750682a87149c2405375325719d33e74 100644
--- a/src/static/scripts/bootstrap.css
+++ b/src/static/scripts/bootstrap.css
@@ -1,38 +1,35 @@
+@charset "UTF-8";
 /*!
- * Bootstrap v4.5.3 (https://getbootstrap.com/)
- * Copyright 2011-2020 The Bootstrap Authors
- * Copyright 2011-2020 Twitter, Inc.
+ * Bootstrap v5.0.1 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 :root {
-  --blue: #007bff;
-  --indigo: #6610f2;
-  --purple: #6f42c1;
-  --pink: #e83e8c;
-  --red: #dc3545;
-  --orange: #fd7e14;
-  --yellow: #ffc107;
-  --green: #28a745;
-  --teal: #20c997;
-  --cyan: #17a2b8;
-  --white: #fff;
-  --gray: #6c757d;
-  --gray-dark: #343a40;
-  --primary: #007bff;
-  --secondary: #6c757d;
-  --success: #28a745;
-  --info: #17a2b8;
-  --warning: #ffc107;
-  --danger: #dc3545;
-  --light: #f8f9fa;
-  --dark: #343a40;
-  --breakpoint-xs: 0;
-  --breakpoint-sm: 576px;
-  --breakpoint-md: 768px;
-  --breakpoint-lg: 992px;
-  --breakpoint-xl: 1200px;
-  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --bs-blue: #0d6efd;
+  --bs-indigo: #6610f2;
+  --bs-purple: #6f42c1;
+  --bs-pink: #d63384;
+  --bs-red: #dc3545;
+  --bs-orange: #fd7e14;
+  --bs-yellow: #ffc107;
+  --bs-green: #198754;
+  --bs-teal: #20c997;
+  --bs-cyan: #0dcaf0;
+  --bs-white: #fff;
+  --bs-gray: #6c757d;
+  --bs-gray-dark: #343a40;
+  --bs-primary: #0d6efd;
+  --bs-secondary: #6c757d;
+  --bs-success: #198754;
+  --bs-info: #0dcaf0;
+  --bs-warning: #ffc107;
+  --bs-danger: #dc3545;
+  --bs-light: #f8f9fa;
+  --bs-dark: #212529;
+  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
 }
 
 *,
@@ -41,41 +38,85 @@
   box-sizing: border-box;
 }
 
-html {
-  font-family: sans-serif;
-  line-height: 1.15;
-  -webkit-text-size-adjust: 100%;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
-  display: block;
+@media (prefers-reduced-motion: no-preference) {
+  :root {
+    scroll-behavior: smooth;
+  }
 }
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: var(--bs-font-sans-serif);
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   color: #212529;
-  text-align: left;
   background-color: #fff;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-[tabindex="-1"]:focus:not(:focus-visible) {
-  outline: 0 !important;
+hr {
+  margin: 1rem 0;
+  color: inherit;
+  background-color: currentColor;
+  border: 0;
+  opacity: 0.25;
 }
 
-hr {
-  box-sizing: content-box;
-  height: 0;
-  overflow: visible;
+hr:not([size]) {
+  height: 1px;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
   margin-top: 0;
   margin-bottom: 0.5rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+h1, .h1 {
+  font-size: calc(1.375rem + 1.5vw);
+}
+@media (min-width: 1200px) {
+  h1, .h1 {
+    font-size: 2.5rem;
+  }
+}
+
+h2, .h2 {
+  font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  h2, .h2 {
+    font-size: 2rem;
+  }
+}
+
+h3, .h3 {
+  font-size: calc(1.3rem + 0.6vw);
+}
+@media (min-width: 1200px) {
+  h3, .h3 {
+    font-size: 1.75rem;
+  }
+}
+
+h4, .h4 {
+  font-size: calc(1.275rem + 0.3vw);
+}
+@media (min-width: 1200px) {
+  h4, .h4 {
+    font-size: 1.5rem;
+  }
+}
+
+h5, .h5 {
+  font-size: 1.25rem;
+}
+
+h6, .h6 {
+  font-size: 1rem;
 }
 
 p {
@@ -84,12 +125,10 @@ p {
 }
 
 abbr[title],
-abbr[data-original-title] {
-  text-decoration: underline;
+abbr[data-bs-original-title] {
   -webkit-text-decoration: underline dotted;
   text-decoration: underline dotted;
   cursor: help;
-  border-bottom: 0;
   -webkit-text-decoration-skip-ink: none;
   text-decoration-skip-ink: none;
 }
@@ -100,6 +139,11 @@ address {
   line-height: inherit;
 }
 
+ol,
+ul {
+  padding-left: 2rem;
+}
+
 ol,
 ul,
 dl {
@@ -119,7 +163,7 @@ dt {
 }
 
 dd {
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
   margin-left: 0;
 }
 
@@ -132,43 +176,40 @@ strong {
   font-weight: bolder;
 }
 
-small {
-  font-size: 80%;
+small, .small {
+  font-size: 0.875em;
+}
+
+mark, .mark {
+  padding: 0.2em;
+  background-color: #fcf8e3;
 }
 
 sub,
 sup {
   position: relative;
-  font-size: 75%;
+  font-size: 0.75em;
   line-height: 0;
   vertical-align: baseline;
 }
 
 sub {
-  bottom: -.25em;
+  bottom: -0.25em;
 }
 
 sup {
-  top: -.5em;
+  top: -0.5em;
 }
 
 a {
-  color: #007bff;
-  text-decoration: none;
-  background-color: transparent;
-}
-
-a:hover {
-  color: #0056b3;
+  color: #0d6efd;
   text-decoration: underline;
 }
-
-a:not([href]):not([class]) {
-  color: inherit;
-  text-decoration: none;
+a:hover {
+  color: #0a58ca;
 }
 
-a:not([href]):not([class]):hover {
+a:not([href]):not([class]), a:not([href]):not([class]):hover {
   color: inherit;
   text-decoration: none;
 }
@@ -177,41 +218,66 @@ pre,
 code,
 kbd,
 samp {
-  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: var(--bs-font-monospace);
   font-size: 1em;
+  direction: ltr /* rtl:ignore */;
+  unicode-bidi: bidi-override;
 }
 
 pre {
+  display: block;
   margin-top: 0;
   margin-bottom: 1rem;
   overflow: auto;
-  -ms-overflow-style: scrollbar;
+  font-size: 0.875em;
+}
+pre code {
+  font-size: inherit;
+  color: inherit;
+  word-break: normal;
 }
 
-figure {
-  margin: 0 0 1rem;
+code {
+  font-size: 0.875em;
+  color: #d63384;
+  word-wrap: break-word;
+}
+a > code {
+  color: inherit;
 }
 
-img {
-  vertical-align: middle;
-  border-style: none;
+kbd {
+  padding: 0.2rem 0.4rem;
+  font-size: 0.875em;
+  color: #fff;
+  background-color: #212529;
+  border-radius: 0.2rem;
+}
+kbd kbd {
+  padding: 0;
+  font-size: 1em;
+  font-weight: 700;
 }
 
+figure {
+  margin: 0 0 1rem;
+}
+
+img,
 svg {
-  overflow: hidden;
   vertical-align: middle;
 }
 
 table {
+  caption-side: bottom;
   border-collapse: collapse;
 }
 
 caption {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
   color: #6c757d;
   text-align: left;
-  caption-side: bottom;
 }
 
 th {
@@ -219,18 +285,27 @@ th {
   text-align: -webkit-match-parent;
 }
 
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+
 label {
   display: inline-block;
-  margin-bottom: 0.5rem;
 }
 
 button {
   border-radius: 0;
 }
 
-button:focus {
-  outline: 1px dotted;
-  outline: 5px auto -webkit-focus-ring-color;
+button:focus:not(:focus-visible) {
+  outline: 0;
 }
 
 input,
@@ -244,54 +319,45 @@ textarea {
   line-height: inherit;
 }
 
-button,
-input {
-  overflow: visible;
-}
-
 button,
 select {
   text-transform: none;
 }
 
-[role="button"] {
+[role=button] {
   cursor: pointer;
 }
 
 select {
   word-wrap: normal;
 }
+select:disabled {
+  opacity: 1;
+}
+
+[list]::-webkit-calendar-picker-indicator {
+  display: none;
+}
 
 button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
+[type=button],
+[type=reset],
+[type=submit] {
   -webkit-appearance: button;
 }
-
 button:not(:disabled),
-[type="button"]:not(:disabled),
-[type="reset"]:not(:disabled),
-[type="submit"]:not(:disabled) {
+[type=button]:not(:disabled),
+[type=reset]:not(:disabled),
+[type=submit]:not(:disabled) {
   cursor: pointer;
 }
 
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
+::-moz-focus-inner {
   padding: 0;
   border-style: none;
 }
 
-input[type="radio"],
-input[type="checkbox"] {
-  box-sizing: border-box;
-  padding: 0;
-}
-
 textarea {
-  overflow: auto;
   resize: vertical;
 }
 
@@ -303,35 +369,61 @@ fieldset {
 }
 
 legend {
-  display: block;
+  float: left;
   width: 100%;
-  max-width: 100%;
   padding: 0;
-  margin-bottom: .5rem;
-  font-size: 1.5rem;
+  margin-bottom: 0.5rem;
+  font-size: calc(1.275rem + 0.3vw);
   line-height: inherit;
-  color: inherit;
-  white-space: normal;
+}
+@media (min-width: 1200px) {
+  legend {
+    font-size: 1.5rem;
+  }
+}
+legend + * {
+  clear: left;
 }
 
-progress {
-  vertical-align: baseline;
+::-webkit-datetime-edit-fields-wrapper,
+::-webkit-datetime-edit-text,
+::-webkit-datetime-edit-minute,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-year-field {
+  padding: 0;
 }
 
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
+::-webkit-inner-spin-button {
   height: auto;
 }
 
-[type="search"] {
+[type=search] {
   outline-offset: -2px;
-  -webkit-appearance: none;
+  -webkit-appearance: textfield;
 }
 
-[type="search"]::-webkit-search-decoration {
+/* rtl:raw:
+[type="tel"],
+[type="url"],
+[type="email"],
+[type="number"] {
+  direction: ltr;
+}
+*/
+::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
+::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+::file-selector-button {
+  font: inherit;
+}
+
 ::-webkit-file-upload-button {
   font: inherit;
   -webkit-appearance: button;
@@ -341,96 +433,92 @@ output {
   display: inline-block;
 }
 
+iframe {
+  border: 0;
+}
+
 summary {
   display: list-item;
   cursor: pointer;
 }
 
-template {
-  display: none;
+progress {
+  vertical-align: baseline;
 }
 
 [hidden] {
   display: none !important;
 }
 
-h1, h2, h3, h4, h5, h6,
-.h1, .h2, .h3, .h4, .h5, .h6 {
-  margin-bottom: 0.5rem;
-  font-weight: 500;
-  line-height: 1.2;
-}
-
-h1, .h1 {
-  font-size: 2.5rem;
-}
-
-h2, .h2 {
-  font-size: 2rem;
-}
-
-h3, .h3 {
-  font-size: 1.75rem;
-}
-
-h4, .h4 {
-  font-size: 1.5rem;
-}
-
-h5, .h5 {
-  font-size: 1.25rem;
-}
-
-h6, .h6 {
-  font-size: 1rem;
-}
-
 .lead {
   font-size: 1.25rem;
   font-weight: 300;
 }
 
 .display-1 {
-  font-size: 6rem;
+  font-size: calc(1.625rem + 4.5vw);
   font-weight: 300;
   line-height: 1.2;
 }
+@media (min-width: 1200px) {
+  .display-1 {
+    font-size: 5rem;
+  }
+}
 
 .display-2 {
-  font-size: 5.5rem;
+  font-size: calc(1.575rem + 3.9vw);
   font-weight: 300;
   line-height: 1.2;
 }
+@media (min-width: 1200px) {
+  .display-2 {
+    font-size: 4.5rem;
+  }
+}
 
 .display-3 {
-  font-size: 4.5rem;
+  font-size: calc(1.525rem + 3.3vw);
   font-weight: 300;
   line-height: 1.2;
 }
+@media (min-width: 1200px) {
+  .display-3 {
+    font-size: 4rem;
+  }
+}
 
 .display-4 {
-  font-size: 3.5rem;
+  font-size: calc(1.475rem + 2.7vw);
   font-weight: 300;
   line-height: 1.2;
 }
-
-hr {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  border: 0;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
+@media (min-width: 1200px) {
+  .display-4 {
+    font-size: 3.5rem;
+  }
 }
 
-small,
-.small {
-  font-size: 80%;
-  font-weight: 400;
+.display-5 {
+  font-size: calc(1.425rem + 2.1vw);
+  font-weight: 300;
+  line-height: 1.2;
+}
+@media (min-width: 1200px) {
+  .display-5 {
+    font-size: 3rem;
+  }
 }
 
-mark,
-.mark {
-  padding: 0.2em;
-  background-color: #fcf8e3;
+.display-6 {
+  font-size: calc(1.375rem + 1.5vw);
+  font-weight: 300;
+  line-height: 1.2;
+}
+@media (min-width: 1200px) {
+  .display-6 {
+    font-size: 2.5rem;
+  }
 }
 
 .list-unstyled {
@@ -446,13 +534,12 @@ mark,
 .list-inline-item {
   display: inline-block;
 }
-
 .list-inline-item:not(:last-child) {
   margin-right: 0.5rem;
 }
 
 .initialism {
-  font-size: 90%;
+  font-size: 0.875em;
   text-transform: uppercase;
 }
 
@@ -460,15 +547,18 @@ mark,
   margin-bottom: 1rem;
   font-size: 1.25rem;
 }
+.blockquote > :last-child {
+  margin-bottom: 0;
+}
 
 .blockquote-footer {
-  display: block;
-  font-size: 80%;
+  margin-top: -1rem;
+  margin-bottom: 1rem;
+  font-size: 0.875em;
   color: #6c757d;
 }
-
 .blockquote-footer::before {
-  content: "\2014\00A0";
+  content: "— ";
 }
 
 .img-fluid {
@@ -495,1623 +585,1663 @@ mark,
 }
 
 .figure-caption {
-  font-size: 90%;
+  font-size: 0.875em;
   color: #6c757d;
 }
 
-code {
-  font-size: 87.5%;
-  color: #e83e8c;
-  word-wrap: break-word;
-}
-
-a > code {
-  color: inherit;
-}
-
-kbd {
-  padding: 0.2rem 0.4rem;
-  font-size: 87.5%;
-  color: #fff;
-  background-color: #212529;
-  border-radius: 0.2rem;
-}
-
-kbd kbd {
-  padding: 0;
-  font-size: 100%;
-  font-weight: 700;
-}
-
-pre {
-  display: block;
-  font-size: 87.5%;
-  color: #212529;
-}
-
-pre code {
-  font-size: inherit;
-  color: inherit;
-  word-break: normal;
-}
-
-.pre-scrollable {
-  max-height: 340px;
-  overflow-y: scroll;
-}
-
 .container,
 .container-fluid,
-.container-sm,
-.container-md,
+.container-xxl,
+.container-xl,
 .container-lg,
-.container-xl {
+.container-md,
+.container-sm {
   width: 100%;
-  padding-right: 15px;
-  padding-left: 15px;
+  padding-right: var(--bs-gutter-x, 0.75rem);
+  padding-left: var(--bs-gutter-x, 0.75rem);
   margin-right: auto;
   margin-left: auto;
 }
 
 @media (min-width: 576px) {
-  .container, .container-sm {
+  .container-sm, .container {
     max-width: 540px;
   }
 }
-
 @media (min-width: 768px) {
-  .container, .container-sm, .container-md {
+  .container-md, .container-sm, .container {
     max-width: 720px;
   }
 }
-
 @media (min-width: 992px) {
-  .container, .container-sm, .container-md, .container-lg {
+  .container-lg, .container-md, .container-sm, .container {
     max-width: 960px;
   }
 }
-
 @media (min-width: 1200px) {
-  .container, .container-sm, .container-md, .container-lg, .container-xl {
+  .container-xl, .container-lg, .container-md, .container-sm, .container {
     max-width: 1140px;
   }
 }
-
+@media (min-width: 1400px) {
+  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
+    max-width: 1320px;
+  }
+}
 .row {
-  display: -ms-flexbox;
+  --bs-gutter-x: 1.5rem;
+  --bs-gutter-y: 0;
   display: flex;
-  -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -15px;
-  margin-left: -15px;
+  margin-top: calc(var(--bs-gutter-y) * -1);
+  margin-right: calc(var(--bs-gutter-x) / -2);
+  margin-left: calc(var(--bs-gutter-x) / -2);
 }
-
-.no-gutters {
-  margin-right: 0;
-  margin-left: 0;
-}
-
-.no-gutters > .col,
-.no-gutters > [class*="col-"] {
-  padding-right: 0;
-  padding-left: 0;
-}
-
-.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;
+.row > * {
+  flex-shrink: 0;
   width: 100%;
-  padding-right: 15px;
-  padding-left: 15px;
+  max-width: 100%;
+  padding-right: calc(var(--bs-gutter-x) / 2);
+  padding-left: calc(var(--bs-gutter-x) / 2);
+  margin-top: var(--bs-gutter-y);
 }
 
 .col {
-  -ms-flex-preferred-size: 0;
-  flex-basis: 0;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  max-width: 100%;
+  flex: 1 0 0%;
+}
+
+.row-cols-auto > * {
+  flex: 0 0 auto;
+  width: auto;
 }
 
 .row-cols-1 > * {
-  -ms-flex: 0 0 100%;
-  flex: 0 0 100%;
-  max-width: 100%;
+  flex: 0 0 auto;
+  width: 100%;
 }
 
 .row-cols-2 > * {
-  -ms-flex: 0 0 50%;
-  flex: 0 0 50%;
-  max-width: 50%;
+  flex: 0 0 auto;
+  width: 50%;
 }
 
 .row-cols-3 > * {
-  -ms-flex: 0 0 33.333333%;
-  flex: 0 0 33.333333%;
-  max-width: 33.333333%;
+  flex: 0 0 auto;
+  width: 33.3333333333%;
 }
 
 .row-cols-4 > * {
-  -ms-flex: 0 0 25%;
-  flex: 0 0 25%;
-  max-width: 25%;
+  flex: 0 0 auto;
+  width: 25%;
 }
 
 .row-cols-5 > * {
-  -ms-flex: 0 0 20%;
-  flex: 0 0 20%;
-  max-width: 20%;
+  flex: 0 0 auto;
+  width: 20%;
 }
 
 .row-cols-6 > * {
-  -ms-flex: 0 0 16.666667%;
-  flex: 0 0 16.666667%;
-  max-width: 16.666667%;
+  flex: 0 0 auto;
+  width: 16.6666666667%;
 }
 
 .col-auto {
-  -ms-flex: 0 0 auto;
   flex: 0 0 auto;
   width: auto;
-  max-width: 100%;
 }
 
 .col-1 {
-  -ms-flex: 0 0 8.333333%;
-  flex: 0 0 8.333333%;
-  max-width: 8.333333%;
+  flex: 0 0 auto;
+  width: 8.3333333333%;
 }
 
 .col-2 {
-  -ms-flex: 0 0 16.666667%;
-  flex: 0 0 16.666667%;
-  max-width: 16.666667%;
+  flex: 0 0 auto;
+  width: 16.6666666667%;
 }
 
 .col-3 {
-  -ms-flex: 0 0 25%;
-  flex: 0 0 25%;
-  max-width: 25%;
+  flex: 0 0 auto;
+  width: 25%;
 }
 
 .col-4 {
-  -ms-flex: 0 0 33.333333%;
-  flex: 0 0 33.333333%;
-  max-width: 33.333333%;
+  flex: 0 0 auto;
+  width: 33.3333333333%;
 }
 
 .col-5 {
-  -ms-flex: 0 0 41.666667%;
-  flex: 0 0 41.666667%;
-  max-width: 41.666667%;
+  flex: 0 0 auto;
+  width: 41.6666666667%;
 }
 
 .col-6 {
-  -ms-flex: 0 0 50%;
-  flex: 0 0 50%;
-  max-width: 50%;
+  flex: 0 0 auto;
+  width: 50%;
 }
 
 .col-7 {
-  -ms-flex: 0 0 58.333333%;
-  flex: 0 0 58.333333%;
-  max-width: 58.333333%;
+  flex: 0 0 auto;
+  width: 58.3333333333%;
 }
 
 .col-8 {
-  -ms-flex: 0 0 66.666667%;
-  flex: 0 0 66.666667%;
-  max-width: 66.666667%;
+  flex: 0 0 auto;
+  width: 66.6666666667%;
 }
 
 .col-9 {
-  -ms-flex: 0 0 75%;
-  flex: 0 0 75%;
-  max-width: 75%;
+  flex: 0 0 auto;
+  width: 75%;
 }
 
 .col-10 {
-  -ms-flex: 0 0 83.333333%;
-  flex: 0 0 83.333333%;
-  max-width: 83.333333%;
+  flex: 0 0 auto;
+  width: 83.3333333333%;
 }
 
 .col-11 {
-  -ms-flex: 0 0 91.666667%;
-  flex: 0 0 91.666667%;
-  max-width: 91.666667%;
+  flex: 0 0 auto;
+  width: 91.6666666667%;
 }
 
 .col-12 {
-  -ms-flex: 0 0 100%;
-  flex: 0 0 100%;
-  max-width: 100%;
-}
-
-.order-first {
-  -ms-flex-order: -1;
-  order: -1;
-}
-
-.order-last {
-  -ms-flex-order: 13;
-  order: 13;
-}
-
-.order-0 {
-  -ms-flex-order: 0;
-  order: 0;
+  flex: 0 0 auto;
+  width: 100%;
 }
 
-.order-1 {
-  -ms-flex-order: 1;
-  order: 1;
+.offset-1 {
+  margin-left: 8.3333333333%;
 }
 
-.order-2 {
-  -ms-flex-order: 2;
-  order: 2;
+.offset-2 {
+  margin-left: 16.6666666667%;
 }
 
-.order-3 {
-  -ms-flex-order: 3;
-  order: 3;
+.offset-3 {
+  margin-left: 25%;
 }
 
-.order-4 {
-  -ms-flex-order: 4;
-  order: 4;
+.offset-4 {
+  margin-left: 33.3333333333%;
 }
 
-.order-5 {
-  -ms-flex-order: 5;
-  order: 5;
+.offset-5 {
+  margin-left: 41.6666666667%;
 }
 
-.order-6 {
-  -ms-flex-order: 6;
-  order: 6;
+.offset-6 {
+  margin-left: 50%;
 }
 
-.order-7 {
-  -ms-flex-order: 7;
-  order: 7;
+.offset-7 {
+  margin-left: 58.3333333333%;
 }
 
-.order-8 {
-  -ms-flex-order: 8;
-  order: 8;
+.offset-8 {
+  margin-left: 66.6666666667%;
 }
 
-.order-9 {
-  -ms-flex-order: 9;
-  order: 9;
+.offset-9 {
+  margin-left: 75%;
 }
 
-.order-10 {
-  -ms-flex-order: 10;
-  order: 10;
+.offset-10 {
+  margin-left: 83.3333333333%;
 }
 
-.order-11 {
-  -ms-flex-order: 11;
-  order: 11;
+.offset-11 {
+  margin-left: 91.6666666667%;
 }
 
-.order-12 {
-  -ms-flex-order: 12;
-  order: 12;
+.g-0,
+.gx-0 {
+  --bs-gutter-x: 0;
 }
 
-.offset-1 {
-  margin-left: 8.333333%;
+.g-0,
+.gy-0 {
+  --bs-gutter-y: 0;
 }
 
-.offset-2 {
-  margin-left: 16.666667%;
+.g-1,
+.gx-1 {
+  --bs-gutter-x: 0.25rem;
 }
 
-.offset-3 {
-  margin-left: 25%;
+.g-1,
+.gy-1 {
+  --bs-gutter-y: 0.25rem;
 }
 
-.offset-4 {
-  margin-left: 33.333333%;
+.g-2,
+.gx-2 {
+  --bs-gutter-x: 0.5rem;
 }
 
-.offset-5 {
-  margin-left: 41.666667%;
+.g-2,
+.gy-2 {
+  --bs-gutter-y: 0.5rem;
 }
 
-.offset-6 {
-  margin-left: 50%;
+.g-3,
+.gx-3 {
+  --bs-gutter-x: 1rem;
 }
 
-.offset-7 {
-  margin-left: 58.333333%;
+.g-3,
+.gy-3 {
+  --bs-gutter-y: 1rem;
 }
 
-.offset-8 {
-  margin-left: 66.666667%;
+.g-4,
+.gx-4 {
+  --bs-gutter-x: 1.5rem;
 }
 
-.offset-9 {
-  margin-left: 75%;
+.g-4,
+.gy-4 {
+  --bs-gutter-y: 1.5rem;
 }
 
-.offset-10 {
-  margin-left: 83.333333%;
+.g-5,
+.gx-5 {
+  --bs-gutter-x: 3rem;
 }
 
-.offset-11 {
-  margin-left: 91.666667%;
+.g-5,
+.gy-5 {
+  --bs-gutter-y: 3rem;
 }
 
 @media (min-width: 576px) {
   .col-sm {
-    -ms-flex-preferred-size: 0;
-    flex-basis: 0;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-    max-width: 100%;
+    flex: 1 0 0%;
+  }
+
+  .row-cols-sm-auto > * {
+    flex: 0 0 auto;
+    width: auto;
   }
+
   .row-cols-sm-1 > * {
-    -ms-flex: 0 0 100%;
-    flex: 0 0 100%;
-    max-width: 100%;
+    flex: 0 0 auto;
+    width: 100%;
   }
+
   .row-cols-sm-2 > * {
-    -ms-flex: 0 0 50%;
-    flex: 0 0 50%;
-    max-width: 50%;
+    flex: 0 0 auto;
+    width: 50%;
   }
+
   .row-cols-sm-3 > * {
-    -ms-flex: 0 0 33.333333%;
-    flex: 0 0 33.333333%;
-    max-width: 33.333333%;
+    flex: 0 0 auto;
+    width: 33.3333333333%;
   }
+
   .row-cols-sm-4 > * {
-    -ms-flex: 0 0 25%;
-    flex: 0 0 25%;
-    max-width: 25%;
+    flex: 0 0 auto;
+    width: 25%;
   }
+
   .row-cols-sm-5 > * {
-    -ms-flex: 0 0 20%;
-    flex: 0 0 20%;
-    max-width: 20%;
+    flex: 0 0 auto;
+    width: 20%;
   }
+
   .row-cols-sm-6 > * {
-    -ms-flex: 0 0 16.666667%;
-    flex: 0 0 16.666667%;
-    max-width: 16.666667%;
+    flex: 0 0 auto;
+    width: 16.6666666667%;
   }
+
   .col-sm-auto {
-    -ms-flex: 0 0 auto;
     flex: 0 0 auto;
     width: auto;
-    max-width: 100%;
   }
+
   .col-sm-1 {
-    -ms-flex: 0 0 8.333333%;
-    flex: 0 0 8.333333%;
-    max-width: 8.333333%;
+    flex: 0 0 auto;
+    width: 8.3333333333%;
   }
+
   .col-sm-2 {
-    -ms-flex: 0 0 16.666667%;
-    flex: 0 0 16.666667%;
-    max-width: 16.666667%;
+    flex: 0 0 auto;
+    width: 16.6666666667%;
   }
+
   .col-sm-3 {
-    -ms-flex: 0 0 25%;
-    flex: 0 0 25%;
-    max-width: 25%;
+    flex: 0 0 auto;
+    width: 25%;
   }
+
   .col-sm-4 {
-    -ms-flex: 0 0 33.333333%;
-    flex: 0 0 33.333333%;
-    max-width: 33.333333%;
+    flex: 0 0 auto;
+    width: 33.3333333333%;
   }
+
   .col-sm-5 {
-    -ms-flex: 0 0 41.666667%;
-    flex: 0 0 41.666667%;
-    max-width: 41.666667%;
+    flex: 0 0 auto;
+    width: 41.6666666667%;
   }
+
   .col-sm-6 {
-    -ms-flex: 0 0 50%;
-    flex: 0 0 50%;
-    max-width: 50%;
+    flex: 0 0 auto;
+    width: 50%;
   }
+
   .col-sm-7 {
-    -ms-flex: 0 0 58.333333%;
-    flex: 0 0 58.333333%;
-    max-width: 58.333333%;
+    flex: 0 0 auto;
+    width: 58.3333333333%;
   }
+
   .col-sm-8 {
-    -ms-flex: 0 0 66.666667%;
-    flex: 0 0 66.666667%;
-    max-width: 66.666667%;
+    flex: 0 0 auto;
+    width: 66.6666666667%;
   }
+
   .col-sm-9 {
-    -ms-flex: 0 0 75%;
-    flex: 0 0 75%;
-    max-width: 75%;
+    flex: 0 0 auto;
+    width: 75%;
   }
+
   .col-sm-10 {
-    -ms-flex: 0 0 83.333333%;
-    flex: 0 0 83.333333%;
-    max-width: 83.333333%;
+    flex: 0 0 auto;
+    width: 83.3333333333%;
   }
+
   .col-sm-11 {
-    -ms-flex: 0 0 91.666667%;
-    flex: 0 0 91.666667%;
-    max-width: 91.666667%;
+    flex: 0 0 auto;
+    width: 91.6666666667%;
   }
+
   .col-sm-12 {
-    -ms-flex: 0 0 100%;
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
-  .order-sm-first {
-    -ms-flex-order: -1;
-    order: -1;
-  }
-  .order-sm-last {
-    -ms-flex-order: 13;
-    order: 13;
-  }
-  .order-sm-0 {
-    -ms-flex-order: 0;
-    order: 0;
-  }
-  .order-sm-1 {
-    -ms-flex-order: 1;
-    order: 1;
-  }
-  .order-sm-2 {
-    -ms-flex-order: 2;
-    order: 2;
-  }
-  .order-sm-3 {
-    -ms-flex-order: 3;
-    order: 3;
-  }
-  .order-sm-4 {
-    -ms-flex-order: 4;
-    order: 4;
-  }
-  .order-sm-5 {
-    -ms-flex-order: 5;
-    order: 5;
-  }
-  .order-sm-6 {
-    -ms-flex-order: 6;
-    order: 6;
-  }
-  .order-sm-7 {
-    -ms-flex-order: 7;
-    order: 7;
-  }
-  .order-sm-8 {
-    -ms-flex-order: 8;
-    order: 8;
-  }
-  .order-sm-9 {
-    -ms-flex-order: 9;
-    order: 9;
-  }
-  .order-sm-10 {
-    -ms-flex-order: 10;
-    order: 10;
-  }
-  .order-sm-11 {
-    -ms-flex-order: 11;
-    order: 11;
-  }
-  .order-sm-12 {
-    -ms-flex-order: 12;
-    order: 12;
+    flex: 0 0 auto;
+    width: 100%;
   }
+
   .offset-sm-0 {
     margin-left: 0;
   }
+
   .offset-sm-1 {
-    margin-left: 8.333333%;
+    margin-left: 8.3333333333%;
   }
+
   .offset-sm-2 {
-    margin-left: 16.666667%;
+    margin-left: 16.6666666667%;
   }
+
   .offset-sm-3 {
     margin-left: 25%;
   }
+
   .offset-sm-4 {
-    margin-left: 33.333333%;
+    margin-left: 33.3333333333%;
   }
+
   .offset-sm-5 {
-    margin-left: 41.666667%;
+    margin-left: 41.6666666667%;
   }
+
   .offset-sm-6 {
     margin-left: 50%;
   }
+
   .offset-sm-7 {
-    margin-left: 58.333333%;
+    margin-left: 58.3333333333%;
   }
+
   .offset-sm-8 {
-    margin-left: 66.666667%;
+    margin-left: 66.6666666667%;
   }
+
   .offset-sm-9 {
     margin-left: 75%;
   }
+
   .offset-sm-10 {
-    margin-left: 83.333333%;
+    margin-left: 83.3333333333%;
   }
+
   .offset-sm-11 {
-    margin-left: 91.666667%;
+    margin-left: 91.6666666667%;
+  }
+
+  .g-sm-0,
+.gx-sm-0 {
+    --bs-gutter-x: 0;
+  }
+
+  .g-sm-0,
+.gy-sm-0 {
+    --bs-gutter-y: 0;
+  }
+
+  .g-sm-1,
+.gx-sm-1 {
+    --bs-gutter-x: 0.25rem;
+  }
+
+  .g-sm-1,
+.gy-sm-1 {
+    --bs-gutter-y: 0.25rem;
+  }
+
+  .g-sm-2,
+.gx-sm-2 {
+    --bs-gutter-x: 0.5rem;
+  }
+
+  .g-sm-2,
+.gy-sm-2 {
+    --bs-gutter-y: 0.5rem;
+  }
+
+  .g-sm-3,
+.gx-sm-3 {
+    --bs-gutter-x: 1rem;
+  }
+
+  .g-sm-3,
+.gy-sm-3 {
+    --bs-gutter-y: 1rem;
+  }
+
+  .g-sm-4,
+.gx-sm-4 {
+    --bs-gutter-x: 1.5rem;
+  }
+
+  .g-sm-4,
+.gy-sm-4 {
+    --bs-gutter-y: 1.5rem;
+  }
+
+  .g-sm-5,
+.gx-sm-5 {
+    --bs-gutter-x: 3rem;
   }
-}
 
+  .g-sm-5,
+.gy-sm-5 {
+    --bs-gutter-y: 3rem;
+  }
+}
 @media (min-width: 768px) {
   .col-md {
-    -ms-flex-preferred-size: 0;
-    flex-basis: 0;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-    max-width: 100%;
+    flex: 1 0 0%;
+  }
+
+  .row-cols-md-auto > * {
+    flex: 0 0 auto;
+    width: auto;
   }
+
   .row-cols-md-1 > * {
-    -ms-flex: 0 0 100%;
-    flex: 0 0 100%;
-    max-width: 100%;
+    flex: 0 0 auto;
+    width: 100%;
   }
+
   .row-cols-md-2 > * {
-    -ms-flex: 0 0 50%;
-    flex: 0 0 50%;
-    max-width: 50%;
+    flex: 0 0 auto;
+    width: 50%;
   }
+
   .row-cols-md-3 > * {
-    -ms-flex: 0 0 33.333333%;
-    flex: 0 0 33.333333%;
-    max-width: 33.333333%;
+    flex: 0 0 auto;
+    width: 33.3333333333%;
   }
+
   .row-cols-md-4 > * {
-    -ms-flex: 0 0 25%;
-    flex: 0 0 25%;
-    max-width: 25%;
+    flex: 0 0 auto;
+    width: 25%;
   }
+
   .row-cols-md-5 > * {
-    -ms-flex: 0 0 20%;
-    flex: 0 0 20%;
-    max-width: 20%;
+    flex: 0 0 auto;
+    width: 20%;
   }
+
   .row-cols-md-6 > * {
-    -ms-flex: 0 0 16.666667%;
-    flex: 0 0 16.666667%;
-    max-width: 16.666667%;
+    flex: 0 0 auto;
+    width: 16.6666666667%;
   }
+
   .col-md-auto {
-    -ms-flex: 0 0 auto;
     flex: 0 0 auto;
     width: auto;
-    max-width: 100%;
   }
+
   .col-md-1 {
-    -ms-flex: 0 0 8.333333%;
-    flex: 0 0 8.333333%;
-    max-width: 8.333333%;
+    flex: 0 0 auto;
+    width: 8.3333333333%;
   }
+
   .col-md-2 {
-    -ms-flex: 0 0 16.666667%;
-    flex: 0 0 16.666667%;
-    max-width: 16.666667%;
+    flex: 0 0 auto;
+    width: 16.6666666667%;
   }
+
   .col-md-3 {
-    -ms-flex: 0 0 25%;
-    flex: 0 0 25%;
-    max-width: 25%;
+    flex: 0 0 auto;
+    width: 25%;
   }
+
   .col-md-4 {
-    -ms-flex: 0 0 33.333333%;
-    flex: 0 0 33.333333%;
-    max-width: 33.333333%;
+    flex: 0 0 auto;
+    width: 33.3333333333%;
   }
+
   .col-md-5 {
-    -ms-flex: 0 0 41.666667%;
-    flex: 0 0 41.666667%;
-    max-width: 41.666667%;
+    flex: 0 0 auto;
+    width: 41.6666666667%;
   }
+
   .col-md-6 {
-    -ms-flex: 0 0 50%;
-    flex: 0 0 50%;
-    max-width: 50%;
+    flex: 0 0 auto;
+    width: 50%;
   }
+
   .col-md-7 {
-    -ms-flex: 0 0 58.333333%;
-    flex: 0 0 58.333333%;
-    max-width: 58.333333%;
+    flex: 0 0 auto;
+    width: 58.3333333333%;
   }
+
   .col-md-8 {
-    -ms-flex: 0 0 66.666667%;
-    flex: 0 0 66.666667%;
-    max-width: 66.666667%;
+    flex: 0 0 auto;
+    width: 66.6666666667%;
   }
+
   .col-md-9 {
-    -ms-flex: 0 0 75%;
-    flex: 0 0 75%;
-    max-width: 75%;
+    flex: 0 0 auto;
+    width: 75%;
   }
+
   .col-md-10 {
-    -ms-flex: 0 0 83.333333%;
-    flex: 0 0 83.333333%;
-    max-width: 83.333333%;
+    flex: 0 0 auto;
+    width: 83.3333333333%;
   }
+
   .col-md-11 {
-    -ms-flex: 0 0 91.666667%;
-    flex: 0 0 91.666667%;
-    max-width: 91.666667%;
+    flex: 0 0 auto;
+    width: 91.6666666667%;
   }
+
   .col-md-12 {
-    -ms-flex: 0 0 100%;
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
-  .order-md-first {
-    -ms-flex-order: -1;
-    order: -1;
-  }
-  .order-md-last {
-    -ms-flex-order: 13;
-    order: 13;
-  }
-  .order-md-0 {
-    -ms-flex-order: 0;
-    order: 0;
-  }
-  .order-md-1 {
-    -ms-flex-order: 1;
-    order: 1;
-  }
-  .order-md-2 {
-    -ms-flex-order: 2;
-    order: 2;
-  }
-  .order-md-3 {
-    -ms-flex-order: 3;
-    order: 3;
-  }
-  .order-md-4 {
-    -ms-flex-order: 4;
-    order: 4;
-  }
-  .order-md-5 {
-    -ms-flex-order: 5;
-    order: 5;
-  }
-  .order-md-6 {
-    -ms-flex-order: 6;
-    order: 6;
-  }
-  .order-md-7 {
-    -ms-flex-order: 7;
-    order: 7;
-  }
-  .order-md-8 {
-    -ms-flex-order: 8;
-    order: 8;
-  }
-  .order-md-9 {
-    -ms-flex-order: 9;
-    order: 9;
-  }
-  .order-md-10 {
-    -ms-flex-order: 10;
-    order: 10;
-  }
-  .order-md-11 {
-    -ms-flex-order: 11;
-    order: 11;
-  }
-  .order-md-12 {
-    -ms-flex-order: 12;
-    order: 12;
+    flex: 0 0 auto;
+    width: 100%;
   }
+
   .offset-md-0 {
     margin-left: 0;
   }
+
   .offset-md-1 {
-    margin-left: 8.333333%;
+    margin-left: 8.3333333333%;
   }
+
   .offset-md-2 {
-    margin-left: 16.666667%;
+    margin-left: 16.6666666667%;
   }
+
   .offset-md-3 {
     margin-left: 25%;
   }
+
   .offset-md-4 {
-    margin-left: 33.333333%;
+    margin-left: 33.3333333333%;
   }
+
   .offset-md-5 {
-    margin-left: 41.666667%;
+    margin-left: 41.6666666667%;
   }
+
   .offset-md-6 {
     margin-left: 50%;
   }
+
   .offset-md-7 {
-    margin-left: 58.333333%;
+    margin-left: 58.3333333333%;
   }
+
   .offset-md-8 {
-    margin-left: 66.666667%;
+    margin-left: 66.6666666667%;
   }
+
   .offset-md-9 {
     margin-left: 75%;
   }
+
   .offset-md-10 {
-    margin-left: 83.333333%;
+    margin-left: 83.3333333333%;
   }
+
   .offset-md-11 {
-    margin-left: 91.666667%;
+    margin-left: 91.6666666667%;
+  }
+
+  .g-md-0,
+.gx-md-0 {
+    --bs-gutter-x: 0;
+  }
+
+  .g-md-0,
+.gy-md-0 {
+    --bs-gutter-y: 0;
+  }
+
+  .g-md-1,
+.gx-md-1 {
+    --bs-gutter-x: 0.25rem;
+  }
+
+  .g-md-1,
+.gy-md-1 {
+    --bs-gutter-y: 0.25rem;
+  }
+
+  .g-md-2,
+.gx-md-2 {
+    --bs-gutter-x: 0.5rem;
+  }
+
+  .g-md-2,
+.gy-md-2 {
+    --bs-gutter-y: 0.5rem;
+  }
+
+  .g-md-3,
+.gx-md-3 {
+    --bs-gutter-x: 1rem;
+  }
+
+  .g-md-3,
+.gy-md-3 {
+    --bs-gutter-y: 1rem;
+  }
+
+  .g-md-4,
+.gx-md-4 {
+    --bs-gutter-x: 1.5rem;
+  }
+
+  .g-md-4,
+.gy-md-4 {
+    --bs-gutter-y: 1.5rem;
+  }
+
+  .g-md-5,
+.gx-md-5 {
+    --bs-gutter-x: 3rem;
   }
-}
 
+  .g-md-5,
+.gy-md-5 {
+    --bs-gutter-y: 3rem;
+  }
+}
 @media (min-width: 992px) {
   .col-lg {
-    -ms-flex-preferred-size: 0;
-    flex-basis: 0;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-    max-width: 100%;
+    flex: 1 0 0%;
+  }
+
+  .row-cols-lg-auto > * {
+    flex: 0 0 auto;
+    width: auto;
   }
+
   .row-cols-lg-1 > * {
-    -ms-flex: 0 0 100%;
-    flex: 0 0 100%;
-    max-width: 100%;
+    flex: 0 0 auto;
+    width: 100%;
   }
+
   .row-cols-lg-2 > * {
-    -ms-flex: 0 0 50%;
-    flex: 0 0 50%;
-    max-width: 50%;
+    flex: 0 0 auto;
+    width: 50%;
   }
+
   .row-cols-lg-3 > * {
-    -ms-flex: 0 0 33.333333%;
-    flex: 0 0 33.333333%;
-    max-width: 33.333333%;
+    flex: 0 0 auto;
+    width: 33.3333333333%;
   }
+
   .row-cols-lg-4 > * {
-    -ms-flex: 0 0 25%;
-    flex: 0 0 25%;
-    max-width: 25%;
+    flex: 0 0 auto;
+    width: 25%;
   }
+
   .row-cols-lg-5 > * {
-    -ms-flex: 0 0 20%;
-    flex: 0 0 20%;
-    max-width: 20%;
+    flex: 0 0 auto;
+    width: 20%;
   }
+
   .row-cols-lg-6 > * {
-    -ms-flex: 0 0 16.666667%;
-    flex: 0 0 16.666667%;
-    max-width: 16.666667%;
+    flex: 0 0 auto;
+    width: 16.6666666667%;
   }
+
   .col-lg-auto {
-    -ms-flex: 0 0 auto;
     flex: 0 0 auto;
     width: auto;
-    max-width: 100%;
   }
+
   .col-lg-1 {
-    -ms-flex: 0 0 8.333333%;
-    flex: 0 0 8.333333%;
-    max-width: 8.333333%;
+    flex: 0 0 auto;
+    width: 8.3333333333%;
   }
+
   .col-lg-2 {
-    -ms-flex: 0 0 16.666667%;
-    flex: 0 0 16.666667%;
-    max-width: 16.666667%;
+    flex: 0 0 auto;
+    width: 16.6666666667%;
   }
+
   .col-lg-3 {
-    -ms-flex: 0 0 25%;
-    flex: 0 0 25%;
-    max-width: 25%;
+    flex: 0 0 auto;
+    width: 25%;
   }
+
   .col-lg-4 {
-    -ms-flex: 0 0 33.333333%;
-    flex: 0 0 33.333333%;
-    max-width: 33.333333%;
+    flex: 0 0 auto;
+    width: 33.3333333333%;
   }
+
   .col-lg-5 {
-    -ms-flex: 0 0 41.666667%;
-    flex: 0 0 41.666667%;
-    max-width: 41.666667%;
+    flex: 0 0 auto;
+    width: 41.6666666667%;
   }
+
   .col-lg-6 {
-    -ms-flex: 0 0 50%;
-    flex: 0 0 50%;
-    max-width: 50%;
+    flex: 0 0 auto;
+    width: 50%;
   }
+
   .col-lg-7 {
-    -ms-flex: 0 0 58.333333%;
-    flex: 0 0 58.333333%;
-    max-width: 58.333333%;
+    flex: 0 0 auto;
+    width: 58.3333333333%;
   }
+
   .col-lg-8 {
-    -ms-flex: 0 0 66.666667%;
-    flex: 0 0 66.666667%;
-    max-width: 66.666667%;
+    flex: 0 0 auto;
+    width: 66.6666666667%;
   }
+
   .col-lg-9 {
-    -ms-flex: 0 0 75%;
-    flex: 0 0 75%;
-    max-width: 75%;
+    flex: 0 0 auto;
+    width: 75%;
   }
+
   .col-lg-10 {
-    -ms-flex: 0 0 83.333333%;
-    flex: 0 0 83.333333%;
-    max-width: 83.333333%;
+    flex: 0 0 auto;
+    width: 83.3333333333%;
   }
+
   .col-lg-11 {
-    -ms-flex: 0 0 91.666667%;
-    flex: 0 0 91.666667%;
-    max-width: 91.666667%;
+    flex: 0 0 auto;
+    width: 91.6666666667%;
   }
+
   .col-lg-12 {
-    -ms-flex: 0 0 100%;
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
-  .order-lg-first {
-    -ms-flex-order: -1;
-    order: -1;
-  }
-  .order-lg-last {
-    -ms-flex-order: 13;
-    order: 13;
-  }
-  .order-lg-0 {
-    -ms-flex-order: 0;
-    order: 0;
-  }
-  .order-lg-1 {
-    -ms-flex-order: 1;
-    order: 1;
-  }
-  .order-lg-2 {
-    -ms-flex-order: 2;
-    order: 2;
-  }
-  .order-lg-3 {
-    -ms-flex-order: 3;
-    order: 3;
-  }
-  .order-lg-4 {
-    -ms-flex-order: 4;
-    order: 4;
-  }
-  .order-lg-5 {
-    -ms-flex-order: 5;
-    order: 5;
-  }
-  .order-lg-6 {
-    -ms-flex-order: 6;
-    order: 6;
-  }
-  .order-lg-7 {
-    -ms-flex-order: 7;
-    order: 7;
-  }
-  .order-lg-8 {
-    -ms-flex-order: 8;
-    order: 8;
-  }
-  .order-lg-9 {
-    -ms-flex-order: 9;
-    order: 9;
-  }
-  .order-lg-10 {
-    -ms-flex-order: 10;
-    order: 10;
-  }
-  .order-lg-11 {
-    -ms-flex-order: 11;
-    order: 11;
-  }
-  .order-lg-12 {
-    -ms-flex-order: 12;
-    order: 12;
+    flex: 0 0 auto;
+    width: 100%;
   }
+
   .offset-lg-0 {
     margin-left: 0;
   }
+
   .offset-lg-1 {
-    margin-left: 8.333333%;
+    margin-left: 8.3333333333%;
   }
+
   .offset-lg-2 {
-    margin-left: 16.666667%;
+    margin-left: 16.6666666667%;
   }
+
   .offset-lg-3 {
     margin-left: 25%;
   }
+
   .offset-lg-4 {
-    margin-left: 33.333333%;
+    margin-left: 33.3333333333%;
   }
+
   .offset-lg-5 {
-    margin-left: 41.666667%;
+    margin-left: 41.6666666667%;
   }
+
   .offset-lg-6 {
     margin-left: 50%;
   }
+
   .offset-lg-7 {
-    margin-left: 58.333333%;
+    margin-left: 58.3333333333%;
   }
+
   .offset-lg-8 {
-    margin-left: 66.666667%;
+    margin-left: 66.6666666667%;
   }
+
   .offset-lg-9 {
     margin-left: 75%;
   }
+
   .offset-lg-10 {
-    margin-left: 83.333333%;
+    margin-left: 83.3333333333%;
   }
+
   .offset-lg-11 {
-    margin-left: 91.666667%;
+    margin-left: 91.6666666667%;
+  }
+
+  .g-lg-0,
+.gx-lg-0 {
+    --bs-gutter-x: 0;
+  }
+
+  .g-lg-0,
+.gy-lg-0 {
+    --bs-gutter-y: 0;
+  }
+
+  .g-lg-1,
+.gx-lg-1 {
+    --bs-gutter-x: 0.25rem;
+  }
+
+  .g-lg-1,
+.gy-lg-1 {
+    --bs-gutter-y: 0.25rem;
+  }
+
+  .g-lg-2,
+.gx-lg-2 {
+    --bs-gutter-x: 0.5rem;
+  }
+
+  .g-lg-2,
+.gy-lg-2 {
+    --bs-gutter-y: 0.5rem;
+  }
+
+  .g-lg-3,
+.gx-lg-3 {
+    --bs-gutter-x: 1rem;
+  }
+
+  .g-lg-3,
+.gy-lg-3 {
+    --bs-gutter-y: 1rem;
+  }
+
+  .g-lg-4,
+.gx-lg-4 {
+    --bs-gutter-x: 1.5rem;
+  }
+
+  .g-lg-4,
+.gy-lg-4 {
+    --bs-gutter-y: 1.5rem;
+  }
+
+  .g-lg-5,
+.gx-lg-5 {
+    --bs-gutter-x: 3rem;
   }
-}
 
+  .g-lg-5,
+.gy-lg-5 {
+    --bs-gutter-y: 3rem;
+  }
+}
 @media (min-width: 1200px) {
   .col-xl {
-    -ms-flex-preferred-size: 0;
-    flex-basis: 0;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-    max-width: 100%;
+    flex: 1 0 0%;
+  }
+
+  .row-cols-xl-auto > * {
+    flex: 0 0 auto;
+    width: auto;
   }
+
   .row-cols-xl-1 > * {
-    -ms-flex: 0 0 100%;
-    flex: 0 0 100%;
-    max-width: 100%;
+    flex: 0 0 auto;
+    width: 100%;
   }
+
   .row-cols-xl-2 > * {
-    -ms-flex: 0 0 50%;
-    flex: 0 0 50%;
-    max-width: 50%;
+    flex: 0 0 auto;
+    width: 50%;
   }
+
   .row-cols-xl-3 > * {
-    -ms-flex: 0 0 33.333333%;
-    flex: 0 0 33.333333%;
-    max-width: 33.333333%;
+    flex: 0 0 auto;
+    width: 33.3333333333%;
   }
+
   .row-cols-xl-4 > * {
-    -ms-flex: 0 0 25%;
-    flex: 0 0 25%;
-    max-width: 25%;
+    flex: 0 0 auto;
+    width: 25%;
   }
+
   .row-cols-xl-5 > * {
-    -ms-flex: 0 0 20%;
-    flex: 0 0 20%;
-    max-width: 20%;
+    flex: 0 0 auto;
+    width: 20%;
   }
+
   .row-cols-xl-6 > * {
-    -ms-flex: 0 0 16.666667%;
-    flex: 0 0 16.666667%;
-    max-width: 16.666667%;
+    flex: 0 0 auto;
+    width: 16.6666666667%;
   }
+
   .col-xl-auto {
-    -ms-flex: 0 0 auto;
     flex: 0 0 auto;
     width: auto;
-    max-width: 100%;
   }
+
   .col-xl-1 {
-    -ms-flex: 0 0 8.333333%;
-    flex: 0 0 8.333333%;
-    max-width: 8.333333%;
+    flex: 0 0 auto;
+    width: 8.3333333333%;
   }
+
   .col-xl-2 {
-    -ms-flex: 0 0 16.666667%;
-    flex: 0 0 16.666667%;
-    max-width: 16.666667%;
+    flex: 0 0 auto;
+    width: 16.6666666667%;
   }
+
   .col-xl-3 {
-    -ms-flex: 0 0 25%;
-    flex: 0 0 25%;
-    max-width: 25%;
+    flex: 0 0 auto;
+    width: 25%;
   }
+
   .col-xl-4 {
-    -ms-flex: 0 0 33.333333%;
-    flex: 0 0 33.333333%;
-    max-width: 33.333333%;
+    flex: 0 0 auto;
+    width: 33.3333333333%;
   }
+
   .col-xl-5 {
-    -ms-flex: 0 0 41.666667%;
-    flex: 0 0 41.666667%;
-    max-width: 41.666667%;
+    flex: 0 0 auto;
+    width: 41.6666666667%;
   }
+
   .col-xl-6 {
-    -ms-flex: 0 0 50%;
-    flex: 0 0 50%;
-    max-width: 50%;
+    flex: 0 0 auto;
+    width: 50%;
   }
+
   .col-xl-7 {
-    -ms-flex: 0 0 58.333333%;
-    flex: 0 0 58.333333%;
-    max-width: 58.333333%;
+    flex: 0 0 auto;
+    width: 58.3333333333%;
   }
+
   .col-xl-8 {
-    -ms-flex: 0 0 66.666667%;
-    flex: 0 0 66.666667%;
-    max-width: 66.666667%;
+    flex: 0 0 auto;
+    width: 66.6666666667%;
   }
+
   .col-xl-9 {
-    -ms-flex: 0 0 75%;
-    flex: 0 0 75%;
-    max-width: 75%;
+    flex: 0 0 auto;
+    width: 75%;
   }
+
   .col-xl-10 {
-    -ms-flex: 0 0 83.333333%;
-    flex: 0 0 83.333333%;
-    max-width: 83.333333%;
+    flex: 0 0 auto;
+    width: 83.3333333333%;
   }
+
   .col-xl-11 {
-    -ms-flex: 0 0 91.666667%;
-    flex: 0 0 91.666667%;
-    max-width: 91.666667%;
+    flex: 0 0 auto;
+    width: 91.6666666667%;
   }
+
   .col-xl-12 {
-    -ms-flex: 0 0 100%;
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
-  .order-xl-first {
-    -ms-flex-order: -1;
-    order: -1;
-  }
-  .order-xl-last {
-    -ms-flex-order: 13;
-    order: 13;
-  }
-  .order-xl-0 {
-    -ms-flex-order: 0;
-    order: 0;
-  }
-  .order-xl-1 {
-    -ms-flex-order: 1;
-    order: 1;
-  }
-  .order-xl-2 {
-    -ms-flex-order: 2;
-    order: 2;
-  }
-  .order-xl-3 {
-    -ms-flex-order: 3;
-    order: 3;
-  }
-  .order-xl-4 {
-    -ms-flex-order: 4;
-    order: 4;
-  }
-  .order-xl-5 {
-    -ms-flex-order: 5;
-    order: 5;
-  }
-  .order-xl-6 {
-    -ms-flex-order: 6;
-    order: 6;
-  }
-  .order-xl-7 {
-    -ms-flex-order: 7;
-    order: 7;
-  }
-  .order-xl-8 {
-    -ms-flex-order: 8;
-    order: 8;
-  }
-  .order-xl-9 {
-    -ms-flex-order: 9;
-    order: 9;
-  }
-  .order-xl-10 {
-    -ms-flex-order: 10;
-    order: 10;
-  }
-  .order-xl-11 {
-    -ms-flex-order: 11;
-    order: 11;
-  }
-  .order-xl-12 {
-    -ms-flex-order: 12;
-    order: 12;
+    flex: 0 0 auto;
+    width: 100%;
   }
+
   .offset-xl-0 {
     margin-left: 0;
   }
+
   .offset-xl-1 {
-    margin-left: 8.333333%;
+    margin-left: 8.3333333333%;
   }
+
   .offset-xl-2 {
-    margin-left: 16.666667%;
+    margin-left: 16.6666666667%;
   }
+
   .offset-xl-3 {
     margin-left: 25%;
   }
+
   .offset-xl-4 {
-    margin-left: 33.333333%;
+    margin-left: 33.3333333333%;
   }
+
   .offset-xl-5 {
-    margin-left: 41.666667%;
+    margin-left: 41.6666666667%;
   }
+
   .offset-xl-6 {
     margin-left: 50%;
   }
+
   .offset-xl-7 {
-    margin-left: 58.333333%;
+    margin-left: 58.3333333333%;
   }
+
   .offset-xl-8 {
-    margin-left: 66.666667%;
+    margin-left: 66.6666666667%;
   }
+
   .offset-xl-9 {
     margin-left: 75%;
   }
+
   .offset-xl-10 {
-    margin-left: 83.333333%;
+    margin-left: 83.3333333333%;
   }
+
   .offset-xl-11 {
-    margin-left: 91.666667%;
+    margin-left: 91.6666666667%;
   }
-}
-
-.table {
-  width: 100%;
-  margin-bottom: 1rem;
-  color: #212529;
-}
 
-.table th,
-.table td {
-  padding: 0.75rem;
-  vertical-align: top;
-  border-top: 1px solid #dee2e6;
-}
+  .g-xl-0,
+.gx-xl-0 {
+    --bs-gutter-x: 0;
+  }
 
-.table thead th {
-  vertical-align: bottom;
-  border-bottom: 2px solid #dee2e6;
-}
+  .g-xl-0,
+.gy-xl-0 {
+    --bs-gutter-y: 0;
+  }
 
-.table tbody + tbody {
-  border-top: 2px solid #dee2e6;
-}
+  .g-xl-1,
+.gx-xl-1 {
+    --bs-gutter-x: 0.25rem;
+  }
 
-.table-sm th,
-.table-sm td {
-  padding: 0.3rem;
-}
+  .g-xl-1,
+.gy-xl-1 {
+    --bs-gutter-y: 0.25rem;
+  }
 
-.table-bordered {
-  border: 1px solid #dee2e6;
-}
+  .g-xl-2,
+.gx-xl-2 {
+    --bs-gutter-x: 0.5rem;
+  }
 
-.table-bordered th,
-.table-bordered td {
-  border: 1px solid #dee2e6;
-}
+  .g-xl-2,
+.gy-xl-2 {
+    --bs-gutter-y: 0.5rem;
+  }
 
-.table-bordered thead th,
-.table-bordered thead td {
-  border-bottom-width: 2px;
-}
+  .g-xl-3,
+.gx-xl-3 {
+    --bs-gutter-x: 1rem;
+  }
 
-.table-borderless th,
-.table-borderless td,
-.table-borderless thead th,
-.table-borderless tbody + tbody {
-  border: 0;
-}
+  .g-xl-3,
+.gy-xl-3 {
+    --bs-gutter-y: 1rem;
+  }
 
-.table-striped tbody tr:nth-of-type(odd) {
-  background-color: rgba(0, 0, 0, 0.05);
-}
+  .g-xl-4,
+.gx-xl-4 {
+    --bs-gutter-x: 1.5rem;
+  }
 
-.table-hover tbody tr:hover {
-  color: #212529;
-  background-color: rgba(0, 0, 0, 0.075);
-}
+  .g-xl-4,
+.gy-xl-4 {
+    --bs-gutter-y: 1.5rem;
+  }
 
-.table-primary,
-.table-primary > th,
-.table-primary > td {
-  background-color: #b8daff;
-}
+  .g-xl-5,
+.gx-xl-5 {
+    --bs-gutter-x: 3rem;
+  }
 
-.table-primary th,
-.table-primary td,
-.table-primary thead th,
-.table-primary tbody + tbody {
-  border-color: #7abaff;
+  .g-xl-5,
+.gy-xl-5 {
+    --bs-gutter-y: 3rem;
+  }
 }
+@media (min-width: 1400px) {
+  .col-xxl {
+    flex: 1 0 0%;
+  }
 
-.table-hover .table-primary:hover {
-  background-color: #9fcdff;
-}
+  .row-cols-xxl-auto > * {
+    flex: 0 0 auto;
+    width: auto;
+  }
 
-.table-hover .table-primary:hover > td,
-.table-hover .table-primary:hover > th {
-  background-color: #9fcdff;
-}
+  .row-cols-xxl-1 > * {
+    flex: 0 0 auto;
+    width: 100%;
+  }
 
-.table-secondary,
-.table-secondary > th,
-.table-secondary > td {
-  background-color: #d6d8db;
-}
+  .row-cols-xxl-2 > * {
+    flex: 0 0 auto;
+    width: 50%;
+  }
 
-.table-secondary th,
-.table-secondary td,
-.table-secondary thead th,
-.table-secondary tbody + tbody {
-  border-color: #b3b7bb;
-}
+  .row-cols-xxl-3 > * {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
 
-.table-hover .table-secondary:hover {
-  background-color: #c8cbcf;
-}
+  .row-cols-xxl-4 > * {
+    flex: 0 0 auto;
+    width: 25%;
+  }
 
-.table-hover .table-secondary:hover > td,
-.table-hover .table-secondary:hover > th {
-  background-color: #c8cbcf;
-}
+  .row-cols-xxl-5 > * {
+    flex: 0 0 auto;
+    width: 20%;
+  }
 
-.table-success,
-.table-success > th,
-.table-success > td {
-  background-color: #c3e6cb;
-}
+  .row-cols-xxl-6 > * {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
 
-.table-success th,
-.table-success td,
-.table-success thead th,
-.table-success tbody + tbody {
-  border-color: #8fd19e;
-}
+  .col-xxl-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
 
-.table-hover .table-success:hover {
-  background-color: #b1dfbb;
-}
+  .col-xxl-1 {
+    flex: 0 0 auto;
+    width: 8.3333333333%;
+  }
 
-.table-hover .table-success:hover > td,
-.table-hover .table-success:hover > th {
-  background-color: #b1dfbb;
-}
+  .col-xxl-2 {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
 
-.table-info,
-.table-info > th,
-.table-info > td {
-  background-color: #bee5eb;
-}
+  .col-xxl-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
 
-.table-info th,
-.table-info td,
-.table-info thead th,
-.table-info tbody + tbody {
-  border-color: #86cfda;
-}
+  .col-xxl-4 {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
 
-.table-hover .table-info:hover {
-  background-color: #abdde5;
-}
+  .col-xxl-5 {
+    flex: 0 0 auto;
+    width: 41.6666666667%;
+  }
 
-.table-hover .table-info:hover > td,
-.table-hover .table-info:hover > th {
-  background-color: #abdde5;
-}
+  .col-xxl-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
 
-.table-warning,
-.table-warning > th,
-.table-warning > td {
-  background-color: #ffeeba;
-}
+  .col-xxl-7 {
+    flex: 0 0 auto;
+    width: 58.3333333333%;
+  }
 
-.table-warning th,
-.table-warning td,
-.table-warning thead th,
-.table-warning tbody + tbody {
-  border-color: #ffdf7e;
-}
+  .col-xxl-8 {
+    flex: 0 0 auto;
+    width: 66.6666666667%;
+  }
 
-.table-hover .table-warning:hover {
-  background-color: #ffe8a1;
-}
+  .col-xxl-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
 
-.table-hover .table-warning:hover > td,
-.table-hover .table-warning:hover > th {
-  background-color: #ffe8a1;
-}
+  .col-xxl-10 {
+    flex: 0 0 auto;
+    width: 83.3333333333%;
+  }
 
-.table-danger,
-.table-danger > th,
-.table-danger > td {
-  background-color: #f5c6cb;
-}
+  .col-xxl-11 {
+    flex: 0 0 auto;
+    width: 91.6666666667%;
+  }
 
-.table-danger th,
-.table-danger td,
-.table-danger thead th,
-.table-danger tbody + tbody {
-  border-color: #ed969e;
-}
+  .col-xxl-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
 
-.table-hover .table-danger:hover {
-  background-color: #f1b0b7;
-}
+  .offset-xxl-0 {
+    margin-left: 0;
+  }
 
-.table-hover .table-danger:hover > td,
-.table-hover .table-danger:hover > th {
-  background-color: #f1b0b7;
-}
+  .offset-xxl-1 {
+    margin-left: 8.3333333333%;
+  }
 
-.table-light,
-.table-light > th,
-.table-light > td {
-  background-color: #fdfdfe;
-}
+  .offset-xxl-2 {
+    margin-left: 16.6666666667%;
+  }
 
-.table-light th,
-.table-light td,
-.table-light thead th,
-.table-light tbody + tbody {
-  border-color: #fbfcfc;
-}
+  .offset-xxl-3 {
+    margin-left: 25%;
+  }
+
+  .offset-xxl-4 {
+    margin-left: 33.3333333333%;
+  }
+
+  .offset-xxl-5 {
+    margin-left: 41.6666666667%;
+  }
+
+  .offset-xxl-6 {
+    margin-left: 50%;
+  }
+
+  .offset-xxl-7 {
+    margin-left: 58.3333333333%;
+  }
+
+  .offset-xxl-8 {
+    margin-left: 66.6666666667%;
+  }
+
+  .offset-xxl-9 {
+    margin-left: 75%;
+  }
+
+  .offset-xxl-10 {
+    margin-left: 83.3333333333%;
+  }
+
+  .offset-xxl-11 {
+    margin-left: 91.6666666667%;
+  }
+
+  .g-xxl-0,
+.gx-xxl-0 {
+    --bs-gutter-x: 0;
+  }
+
+  .g-xxl-0,
+.gy-xxl-0 {
+    --bs-gutter-y: 0;
+  }
 
-.table-hover .table-light:hover {
-  background-color: #ececf6;
+  .g-xxl-1,
+.gx-xxl-1 {
+    --bs-gutter-x: 0.25rem;
+  }
+
+  .g-xxl-1,
+.gy-xxl-1 {
+    --bs-gutter-y: 0.25rem;
+  }
+
+  .g-xxl-2,
+.gx-xxl-2 {
+    --bs-gutter-x: 0.5rem;
+  }
+
+  .g-xxl-2,
+.gy-xxl-2 {
+    --bs-gutter-y: 0.5rem;
+  }
+
+  .g-xxl-3,
+.gx-xxl-3 {
+    --bs-gutter-x: 1rem;
+  }
+
+  .g-xxl-3,
+.gy-xxl-3 {
+    --bs-gutter-y: 1rem;
+  }
+
+  .g-xxl-4,
+.gx-xxl-4 {
+    --bs-gutter-x: 1.5rem;
+  }
+
+  .g-xxl-4,
+.gy-xxl-4 {
+    --bs-gutter-y: 1.5rem;
+  }
+
+  .g-xxl-5,
+.gx-xxl-5 {
+    --bs-gutter-x: 3rem;
+  }
+
+  .g-xxl-5,
+.gy-xxl-5 {
+    --bs-gutter-y: 3rem;
+  }
+}
+.table {
+  --bs-table-bg: transparent;
+  --bs-table-accent-bg: transparent;
+  --bs-table-striped-color: #212529;
+  --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
+  --bs-table-active-color: #212529;
+  --bs-table-active-bg: rgba(0, 0, 0, 0.1);
+  --bs-table-hover-color: #212529;
+  --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
+  width: 100%;
+  margin-bottom: 1rem;
+  color: #212529;
+  vertical-align: top;
+  border-color: #dee2e6;
+}
+.table > :not(caption) > * > * {
+  padding: 0.5rem 0.5rem;
+  background-color: var(--bs-table-bg);
+  border-bottom-width: 1px;
+  box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
+}
+.table > tbody {
+  vertical-align: inherit;
+}
+.table > thead {
+  vertical-align: bottom;
+}
+.table > :not(:last-child) > :last-child > * {
+  border-bottom-color: currentColor;
 }
 
-.table-hover .table-light:hover > td,
-.table-hover .table-light:hover > th {
-  background-color: #ececf6;
+.caption-top {
+  caption-side: top;
 }
 
-.table-dark,
-.table-dark > th,
-.table-dark > td {
-  background-color: #c6c8ca;
+.table-sm > :not(caption) > * > * {
+  padding: 0.25rem 0.25rem;
 }
 
-.table-dark th,
-.table-dark td,
-.table-dark thead th,
-.table-dark tbody + tbody {
-  border-color: #95999c;
+.table-bordered > :not(caption) > * {
+  border-width: 1px 0;
+}
+.table-bordered > :not(caption) > * > * {
+  border-width: 0 1px;
 }
 
-.table-hover .table-dark:hover {
-  background-color: #b9bbbe;
+.table-borderless > :not(caption) > * > * {
+  border-bottom-width: 0;
 }
 
-.table-hover .table-dark:hover > td,
-.table-hover .table-dark:hover > th {
-  background-color: #b9bbbe;
+.table-striped > tbody > tr:nth-of-type(odd) {
+  --bs-table-accent-bg: var(--bs-table-striped-bg);
+  color: var(--bs-table-striped-color);
 }
 
-.table-active,
-.table-active > th,
-.table-active > td {
-  background-color: rgba(0, 0, 0, 0.075);
+.table-active {
+  --bs-table-accent-bg: var(--bs-table-active-bg);
+  color: var(--bs-table-active-color);
 }
 
-.table-hover .table-active:hover {
-  background-color: rgba(0, 0, 0, 0.075);
+.table-hover > tbody > tr:hover {
+  --bs-table-accent-bg: var(--bs-table-hover-bg);
+  color: var(--bs-table-hover-color);
 }
 
-.table-hover .table-active:hover > td,
-.table-hover .table-active:hover > th {
-  background-color: rgba(0, 0, 0, 0.075);
+.table-primary {
+  --bs-table-bg: #cfe2ff;
+  --bs-table-striped-bg: #c5d7f2;
+  --bs-table-striped-color: #000;
+  --bs-table-active-bg: #bacbe6;
+  --bs-table-active-color: #000;
+  --bs-table-hover-bg: #bfd1ec;
+  --bs-table-hover-color: #000;
+  color: #000;
+  border-color: #bacbe6;
 }
 
-.table .thead-dark th {
-  color: #fff;
-  background-color: #343a40;
-  border-color: #454d55;
+.table-secondary {
+  --bs-table-bg: #e2e3e5;
+  --bs-table-striped-bg: #d7d8da;
+  --bs-table-striped-color: #000;
+  --bs-table-active-bg: #cbccce;
+  --bs-table-active-color: #000;
+  --bs-table-hover-bg: #d1d2d4;
+  --bs-table-hover-color: #000;
+  color: #000;
+  border-color: #cbccce;
 }
 
-.table .thead-light th {
-  color: #495057;
-  background-color: #e9ecef;
-  border-color: #dee2e6;
+.table-success {
+  --bs-table-bg: #d1e7dd;
+  --bs-table-striped-bg: #c7dbd2;
+  --bs-table-striped-color: #000;
+  --bs-table-active-bg: #bcd0c7;
+  --bs-table-active-color: #000;
+  --bs-table-hover-bg: #c1d6cc;
+  --bs-table-hover-color: #000;
+  color: #000;
+  border-color: #bcd0c7;
 }
 
-.table-dark {
-  color: #fff;
-  background-color: #343a40;
+.table-info {
+  --bs-table-bg: #cff4fc;
+  --bs-table-striped-bg: #c5e8ef;
+  --bs-table-striped-color: #000;
+  --bs-table-active-bg: #badce3;
+  --bs-table-active-color: #000;
+  --bs-table-hover-bg: #bfe2e9;
+  --bs-table-hover-color: #000;
+  color: #000;
+  border-color: #badce3;
 }
 
-.table-dark th,
-.table-dark td,
-.table-dark thead th {
-  border-color: #454d55;
+.table-warning {
+  --bs-table-bg: #fff3cd;
+  --bs-table-striped-bg: #f2e7c3;
+  --bs-table-striped-color: #000;
+  --bs-table-active-bg: #e6dbb9;
+  --bs-table-active-color: #000;
+  --bs-table-hover-bg: #ece1be;
+  --bs-table-hover-color: #000;
+  color: #000;
+  border-color: #e6dbb9;
 }
 
-.table-dark.table-bordered {
-  border: 0;
+.table-danger {
+  --bs-table-bg: #f8d7da;
+  --bs-table-striped-bg: #eccccf;
+  --bs-table-striped-color: #000;
+  --bs-table-active-bg: #dfc2c4;
+  --bs-table-active-color: #000;
+  --bs-table-hover-bg: #e5c7ca;
+  --bs-table-hover-color: #000;
+  color: #000;
+  border-color: #dfc2c4;
 }
 
-.table-dark.table-striped tbody tr:nth-of-type(odd) {
-  background-color: rgba(255, 255, 255, 0.05);
+.table-light {
+  --bs-table-bg: #f8f9fa;
+  --bs-table-striped-bg: #ecedee;
+  --bs-table-striped-color: #000;
+  --bs-table-active-bg: #dfe0e1;
+  --bs-table-active-color: #000;
+  --bs-table-hover-bg: #e5e6e7;
+  --bs-table-hover-color: #000;
+  color: #000;
+  border-color: #dfe0e1;
 }
 
-.table-dark.table-hover tbody tr:hover {
+.table-dark {
+  --bs-table-bg: #212529;
+  --bs-table-striped-bg: #2c3034;
+  --bs-table-striped-color: #fff;
+  --bs-table-active-bg: #373b3e;
+  --bs-table-active-color: #fff;
+  --bs-table-hover-bg: #323539;
+  --bs-table-hover-color: #fff;
   color: #fff;
-  background-color: rgba(255, 255, 255, 0.075);
+  border-color: #373b3e;
+}
+
+.table-responsive {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 @media (max-width: 575.98px) {
   .table-responsive-sm {
-    display: block;
-    width: 100%;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
   }
-  .table-responsive-sm > .table-bordered {
-    border: 0;
-  }
 }
-
 @media (max-width: 767.98px) {
   .table-responsive-md {
-    display: block;
-    width: 100%;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
   }
-  .table-responsive-md > .table-bordered {
-    border: 0;
-  }
 }
-
 @media (max-width: 991.98px) {
   .table-responsive-lg {
-    display: block;
-    width: 100%;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
   }
-  .table-responsive-lg > .table-bordered {
-    border: 0;
-  }
 }
-
 @media (max-width: 1199.98px) {
   .table-responsive-xl {
-    display: block;
-    width: 100%;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
   }
-  .table-responsive-xl > .table-bordered {
-    border: 0;
+}
+@media (max-width: 1399.98px) {
+  .table-responsive-xxl {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
   }
 }
+.form-label {
+  margin-bottom: 0.5rem;
+}
 
-.table-responsive {
-  display: block;
-  width: 100%;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
+.col-form-label {
+  padding-top: calc(0.375rem + 1px);
+  padding-bottom: calc(0.375rem + 1px);
+  margin-bottom: 0;
+  font-size: inherit;
+  line-height: 1.5;
 }
 
-.table-responsive > .table-bordered {
-  border: 0;
+.col-form-label-lg {
+  padding-top: calc(0.5rem + 1px);
+  padding-bottom: calc(0.5rem + 1px);
+  font-size: 1.25rem;
+}
+
+.col-form-label-sm {
+  padding-top: calc(0.25rem + 1px);
+  padding-bottom: calc(0.25rem + 1px);
+  font-size: 0.875rem;
+}
+
+.form-text {
+  margin-top: 0.25rem;
+  font-size: 0.875em;
+  color: #6c757d;
 }
 
 .form-control {
   display: block;
   width: 100%;
-  height: calc(1.5em + 0.75rem + 2px);
   padding: 0.375rem 0.75rem;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #495057;
+  color: #212529;
   background-color: #fff;
   background-clip: padding-box;
   border: 1px solid #ced4da;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
   border-radius: 0.25rem;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
-
 @media (prefers-reduced-motion: reduce) {
   .form-control {
     transition: none;
   }
 }
-
-.form-control::-ms-expand {
-  background-color: transparent;
-  border: 0;
+.form-control[type=file] {
+  overflow: hidden;
 }
-
-.form-control:-moz-focusring {
-  color: transparent;
-  text-shadow: 0 0 0 #495057;
+.form-control[type=file]:not(:disabled):not([readonly]) {
+  cursor: pointer;
 }
-
 .form-control:focus {
-  color: #495057;
+  color: #212529;
   background-color: #fff;
-  border-color: #80bdff;
+  border-color: #86b7fe;
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 }
-
-.form-control::-webkit-input-placeholder {
-  color: #6c757d;
-  opacity: 1;
+.form-control::-webkit-date-and-time-value {
+  height: 1.5em;
 }
-
 .form-control::-moz-placeholder {
   color: #6c757d;
   opacity: 1;
 }
-
-.form-control:-ms-input-placeholder {
-  color: #6c757d;
-  opacity: 1;
-}
-
-.form-control::-ms-input-placeholder {
-  color: #6c757d;
-  opacity: 1;
-}
-
 .form-control::placeholder {
   color: #6c757d;
   opacity: 1;
 }
-
 .form-control:disabled, .form-control[readonly] {
   background-color: #e9ecef;
   opacity: 1;
 }
-
-input[type="date"].form-control,
-input[type="time"].form-control,
-input[type="datetime-local"].form-control,
-input[type="month"].form-control {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
+.form-control::file-selector-button {
+  padding: 0.375rem 0.75rem;
+  margin: -0.375rem -0.75rem;
+  -webkit-margin-end: 0.75rem;
+  margin-inline-end: 0.75rem;
+  color: #212529;
+  background-color: #e9ecef;
+  pointer-events: none;
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+  border-inline-end-width: 1px;
+  border-radius: 0;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
-
-select.form-control:focus::-ms-value {
-  color: #495057;
-  background-color: #fff;
+@media (prefers-reduced-motion: reduce) {
+  .form-control::file-selector-button {
+    transition: none;
+  }
 }
-
-.form-control-file,
-.form-control-range {
-  display: block;
-  width: 100%;
+.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
+  background-color: #dde0e3;
 }
-
-.col-form-label {
-  padding-top: calc(0.375rem + 1px);
-  padding-bottom: calc(0.375rem + 1px);
-  margin-bottom: 0;
-  font-size: inherit;
-  line-height: 1.5;
+.form-control::-webkit-file-upload-button {
+  padding: 0.375rem 0.75rem;
+  margin: -0.375rem -0.75rem;
+  -webkit-margin-end: 0.75rem;
+  margin-inline-end: 0.75rem;
+  color: #212529;
+  background-color: #e9ecef;
+  pointer-events: none;
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+  border-inline-end-width: 1px;
+  border-radius: 0;
+  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
-
-.col-form-label-lg {
-  padding-top: calc(0.5rem + 1px);
-  padding-bottom: calc(0.5rem + 1px);
-  font-size: 1.25rem;
-  line-height: 1.5;
+@media (prefers-reduced-motion: reduce) {
+  .form-control::-webkit-file-upload-button {
+    -webkit-transition: none;
+    transition: none;
+  }
 }
-
-.col-form-label-sm {
-  padding-top: calc(0.25rem + 1px);
-  padding-bottom: calc(0.25rem + 1px);
-  font-size: 0.875rem;
-  line-height: 1.5;
+.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
+  background-color: #dde0e3;
 }
 
 .form-control-plaintext {
@@ -2119,1040 +2249,1154 @@ select.form-control:focus::-ms-value {
   width: 100%;
   padding: 0.375rem 0;
   margin-bottom: 0;
-  font-size: 1rem;
   line-height: 1.5;
   color: #212529;
   background-color: transparent;
   border: solid transparent;
   border-width: 1px 0;
 }
-
 .form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg {
   padding-right: 0;
   padding-left: 0;
 }
 
 .form-control-sm {
-  height: calc(1.5em + 0.5rem + 2px);
+  min-height: calc(1.5em + 0.5rem + 2px);
   padding: 0.25rem 0.5rem;
   font-size: 0.875rem;
-  line-height: 1.5;
   border-radius: 0.2rem;
 }
+.form-control-sm::file-selector-button {
+  padding: 0.25rem 0.5rem;
+  margin: -0.25rem -0.5rem;
+  -webkit-margin-end: 0.5rem;
+  margin-inline-end: 0.5rem;
+}
+.form-control-sm::-webkit-file-upload-button {
+  padding: 0.25rem 0.5rem;
+  margin: -0.25rem -0.5rem;
+  -webkit-margin-end: 0.5rem;
+  margin-inline-end: 0.5rem;
+}
 
 .form-control-lg {
-  height: calc(1.5em + 1rem + 2px);
+  min-height: calc(1.5em + 1rem + 2px);
   padding: 0.5rem 1rem;
   font-size: 1.25rem;
-  line-height: 1.5;
   border-radius: 0.3rem;
 }
-
-select.form-control[size], select.form-control[multiple] {
-  height: auto;
-}
-
-textarea.form-control {
-  height: auto;
-}
-
-.form-group {
-  margin-bottom: 1rem;
-}
-
-.form-text {
-  display: block;
-  margin-top: 0.25rem;
+.form-control-lg::file-selector-button {
+  padding: 0.5rem 1rem;
+  margin: -0.5rem -1rem;
+  -webkit-margin-end: 1rem;
+  margin-inline-end: 1rem;
 }
-
-.form-row {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -5px;
-  margin-left: -5px;
+.form-control-lg::-webkit-file-upload-button {
+  padding: 0.5rem 1rem;
+  margin: -0.5rem -1rem;
+  -webkit-margin-end: 1rem;
+  margin-inline-end: 1rem;
 }
 
-.form-row > .col,
-.form-row > [class*="col-"] {
-  padding-right: 5px;
-  padding-left: 5px;
+textarea.form-control {
+  min-height: calc(1.5em + 0.75rem + 2px);
 }
-
-.form-check {
-  position: relative;
-  display: block;
-  padding-left: 1.25rem;
+textarea.form-control-sm {
+  min-height: calc(1.5em + 0.5rem + 2px);
 }
-
-.form-check-input {
-  position: absolute;
-  margin-top: 0.3rem;
-  margin-left: -1.25rem;
+textarea.form-control-lg {
+  min-height: calc(1.5em + 1rem + 2px);
 }
 
-.form-check-input[disabled] ~ .form-check-label,
-.form-check-input:disabled ~ .form-check-label {
-  color: #6c757d;
+.form-control-color {
+  max-width: 3rem;
+  height: auto;
+  padding: 0.375rem;
 }
-
-.form-check-label {
-  margin-bottom: 0;
+.form-control-color:not(:disabled):not([readonly]) {
+  cursor: pointer;
 }
-
-.form-check-inline {
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -ms-flex-align: center;
-  align-items: center;
-  padding-left: 0;
-  margin-right: 0.75rem;
+.form-control-color::-moz-color-swatch {
+  height: 1.5em;
+  border-radius: 0.25rem;
 }
-
-.form-check-inline .form-check-input {
-  position: static;
-  margin-top: 0;
-  margin-right: 0.3125rem;
-  margin-left: 0;
+.form-control-color::-webkit-color-swatch {
+  height: 1.5em;
+  border-radius: 0.25rem;
 }
 
-.valid-feedback {
-  display: none;
+.form-select {
+  display: block;
   width: 100%;
-  margin-top: 0.25rem;
-  font-size: 80%;
-  color: #28a745;
-}
-
-.valid-tooltip {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 5;
-  display: none;
-  max-width: 100%;
-  padding: 0.25rem 0.5rem;
-  margin-top: .1rem;
-  font-size: 0.875rem;
+  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
+  font-size: 1rem;
+  font-weight: 400;
   line-height: 1.5;
-  color: #fff;
-  background-color: rgba(40, 167, 69, 0.9);
+  color: #212529;
+  background-color: #fff;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  background-size: 16px 12px;
+  border: 1px solid #ced4da;
   border-radius: 0.25rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
 }
-
-.was-validated :valid ~ .valid-feedback,
-.was-validated :valid ~ .valid-tooltip,
-.is-valid ~ .valid-feedback,
-.is-valid ~ .valid-tooltip {
-  display: block;
-}
-
-.was-validated .form-control:valid, .form-control.is-valid {
-  border-color: #28a745;
-  padding-right: calc(1.5em + 0.75rem);
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
-  background-repeat: no-repeat;
-  background-position: right calc(0.375em + 0.1875rem) center;
-  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+.form-select:focus {
+  border-color: #86b7fe;
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 }
-
-.was-validated .form-control:valid:focus, .form-control.is-valid:focus {
-  border-color: #28a745;
-  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
+.form-select[multiple], .form-select[size]:not([size="1"]) {
+  padding-right: 0.75rem;
+  background-image: none;
 }
-
-.was-validated textarea.form-control:valid, textarea.form-control.is-valid {
-  padding-right: calc(1.5em + 0.75rem);
-  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
+.form-select:disabled {
+  background-color: #e9ecef;
 }
-
-.was-validated .custom-select:valid, .custom-select.is-valid {
-  border-color: #28a745;
-  padding-right: calc(0.75em + 2.3125rem);
-  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+.form-select:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 #212529;
 }
 
-.was-validated .custom-select:valid:focus, .custom-select.is-valid:focus {
-  border-color: #28a745;
-  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
+.form-select-sm {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  font-size: 0.875rem;
 }
 
-.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
-  color: #28a745;
+.form-select-lg {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 1rem;
+  font-size: 1.25rem;
 }
 
-.was-validated .form-check-input:valid ~ .valid-feedback,
-.was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback,
-.form-check-input.is-valid ~ .valid-tooltip {
+.form-check {
   display: block;
+  min-height: 1.5rem;
+  padding-left: 1.5em;
+  margin-bottom: 0.125rem;
 }
-
-.was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label {
-  color: #28a745;
+.form-check .form-check-input {
+  float: left;
+  margin-left: -1.5em;
 }
 
-.was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before {
-  border-color: #28a745;
+.form-check-input {
+  width: 1em;
+  height: 1em;
+  margin-top: 0.25em;
+  vertical-align: top;
+  background-color: #fff;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-print-color-adjust: exact;
+  color-adjust: exact;
 }
-
-.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before {
-  border-color: #34ce57;
-  background-color: #34ce57;
+.form-check-input[type=checkbox] {
+  border-radius: 0.25em;
 }
-
-.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before {
-  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
+.form-check-input[type=radio] {
+  border-radius: 50%;
 }
-
-.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before {
-  border-color: #28a745;
+.form-check-input:active {
+  filter: brightness(90%);
 }
-
-.was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label {
-  border-color: #28a745;
+.form-check-input:focus {
+  border-color: #86b7fe;
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 }
-
-.was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label {
-  border-color: #28a745;
-  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
+.form-check-input:checked {
+  background-color: #0d6efd;
+  border-color: #0d6efd;
 }
-
-.invalid-feedback {
-  display: none;
-  width: 100%;
-  margin-top: 0.25rem;
-  font-size: 80%;
-  color: #dc3545;
+.form-check-input:checked[type=checkbox] {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
 }
-
-.invalid-tooltip {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 5;
-  display: none;
-  max-width: 100%;
-  padding: 0.25rem 0.5rem;
-  margin-top: .1rem;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  color: #fff;
-  background-color: rgba(220, 53, 69, 0.9);
-  border-radius: 0.25rem;
+.form-check-input:checked[type=radio] {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
 }
-
-.was-validated :invalid ~ .invalid-feedback,
-.was-validated :invalid ~ .invalid-tooltip,
-.is-invalid ~ .invalid-feedback,
-.is-invalid ~ .invalid-tooltip {
-  display: block;
+.form-check-input[type=checkbox]:indeterminate {
+  background-color: #0d6efd;
+  border-color: #0d6efd;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
 }
-
-.was-validated .form-control:invalid, .form-control.is-invalid {
-  border-color: #dc3545;
-  padding-right: calc(1.5em + 0.75rem);
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
-  background-repeat: no-repeat;
-  background-position: right calc(0.375em + 0.1875rem) center;
-  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+.form-check-input:disabled {
+  pointer-events: none;
+  filter: none;
+  opacity: 0.5;
 }
-
-.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
-  border-color: #dc3545;
-  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label {
+  opacity: 0.5;
 }
 
-.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
-  padding-right: calc(1.5em + 0.75rem);
-  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
+.form-switch {
+  padding-left: 2.5em;
 }
-
-.was-validated .custom-select:invalid, .custom-select.is-invalid {
-  border-color: #dc3545;
-  padding-right: calc(0.75em + 2.3125rem);
-  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+.form-switch .form-check-input {
+  width: 2em;
+  margin-left: -2.5em;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
+  background-position: left center;
+  border-radius: 2em;
+  transition: background-position 0.15s ease-in-out;
 }
-
-.was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus {
-  border-color: #dc3545;
-  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+@media (prefers-reduced-motion: reduce) {
+  .form-switch .form-check-input {
+    transition: none;
+  }
 }
-
-.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
-  color: #dc3545;
+.form-switch .form-check-input:focus {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e");
 }
-
-.was-validated .form-check-input:invalid ~ .invalid-feedback,
-.was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback,
-.form-check-input.is-invalid ~ .invalid-tooltip {
-  display: block;
+.form-switch .form-check-input:checked {
+  background-position: right center;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
 }
 
-.was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label {
-  color: #dc3545;
+.form-check-inline {
+  display: inline-block;
+  margin-right: 1rem;
 }
 
-.was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before {
-  border-color: #dc3545;
+.btn-check {
+  position: absolute;
+  clip: rect(0, 0, 0, 0);
+  pointer-events: none;
 }
-
-.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before {
-  border-color: #e4606d;
-  background-color: #e4606d;
+.btn-check[disabled] + .btn, .btn-check:disabled + .btn {
+  pointer-events: none;
+  filter: none;
+  opacity: 0.65;
 }
 
-.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before {
-  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+.form-range {
+  width: 100%;
+  height: 1.5rem;
+  padding: 0;
+  background-color: transparent;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
 }
-
-.was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before {
-  border-color: #dc3545;
+.form-range:focus {
+  outline: 0;
 }
-
-.was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label {
-  border-color: #dc3545;
+.form-range:focus::-webkit-slider-thumb {
+  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 }
-
-.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label {
-  border-color: #dc3545;
-  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+.form-range:focus::-moz-range-thumb {
+  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 }
-
-.form-inline {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-flow: row wrap;
-  flex-flow: row wrap;
-  -ms-flex-align: center;
-  align-items: center;
+.form-range::-moz-focus-outer {
+  border: 0;
 }
-
-.form-inline .form-check {
-  width: 100%;
+.form-range::-webkit-slider-thumb {
+  width: 1rem;
+  height: 1rem;
+  margin-top: -0.25rem;
+  background-color: #0d6efd;
+  border: 0;
+  border-radius: 1rem;
+  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  -webkit-appearance: none;
+  appearance: none;
 }
-
-@media (min-width: 576px) {
-  .form-inline label {
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-align: center;
-    align-items: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    margin-bottom: 0;
-  }
-  .form-inline .form-group {
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex: 0 0 auto;
-    flex: 0 0 auto;
-    -ms-flex-flow: row wrap;
-    flex-flow: row wrap;
-    -ms-flex-align: center;
-    align-items: center;
-    margin-bottom: 0;
-  }
-  .form-inline .form-control {
-    display: inline-block;
-    width: auto;
-    vertical-align: middle;
-  }
-  .form-inline .form-control-plaintext {
-    display: inline-block;
-  }
-  .form-inline .input-group,
-  .form-inline .custom-select {
-    width: auto;
-  }
-  .form-inline .form-check {
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-align: center;
-    align-items: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    width: auto;
-    padding-left: 0;
-  }
-  .form-inline .form-check-input {
-    position: relative;
-    -ms-flex-negative: 0;
-    flex-shrink: 0;
-    margin-top: 0;
-    margin-right: 0.25rem;
-    margin-left: 0;
-  }
-  .form-inline .custom-control {
-    -ms-flex-align: center;
-    align-items: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-  }
-  .form-inline .custom-control-label {
-    margin-bottom: 0;
+@media (prefers-reduced-motion: reduce) {
+  .form-range::-webkit-slider-thumb {
+    -webkit-transition: none;
+    transition: none;
   }
 }
-
-.btn {
-  display: inline-block;
-  font-weight: 400;
-  color: #212529;
-  text-align: center;
-  vertical-align: middle;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  background-color: transparent;
-  border: 1px solid transparent;
-  padding: 0.375rem 0.75rem;
-  font-size: 1rem;
-  line-height: 1.5;
-  border-radius: 0.25rem;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+.form-range::-webkit-slider-thumb:active {
+  background-color: #b6d4fe;
+}
+.form-range::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 0.5rem;
+  color: transparent;
+  cursor: pointer;
+  background-color: #dee2e6;
+  border-color: transparent;
+  border-radius: 1rem;
+}
+.form-range::-moz-range-thumb {
+  width: 1rem;
+  height: 1rem;
+  background-color: #0d6efd;
+  border: 0;
+  border-radius: 1rem;
+  -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  -moz-appearance: none;
+  appearance: none;
 }
-
 @media (prefers-reduced-motion: reduce) {
-  .btn {
+  .form-range::-moz-range-thumb {
+    -moz-transition: none;
     transition: none;
   }
 }
-
-.btn:hover {
-  color: #212529;
-  text-decoration: none;
-}
-
-.btn:focus, .btn.focus {
-  outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-}
-
-.btn.disabled, .btn:disabled {
-  opacity: 0.65;
+.form-range::-moz-range-thumb:active {
+  background-color: #b6d4fe;
 }
-
-.btn:not(:disabled):not(.disabled) {
+.form-range::-moz-range-track {
+  width: 100%;
+  height: 0.5rem;
+  color: transparent;
   cursor: pointer;
+  background-color: #dee2e6;
+  border-color: transparent;
+  border-radius: 1rem;
 }
-
-a.btn.disabled,
-fieldset:disabled a.btn {
+.form-range:disabled {
   pointer-events: none;
 }
-
-.btn-primary {
-  color: #fff;
-  background-color: #007bff;
-  border-color: #007bff;
+.form-range:disabled::-webkit-slider-thumb {
+  background-color: #adb5bd;
 }
-
-.btn-primary:hover {
-  color: #fff;
-  background-color: #0069d9;
-  border-color: #0062cc;
+.form-range:disabled::-moz-range-thumb {
+  background-color: #adb5bd;
 }
 
-.btn-primary:focus, .btn-primary.focus {
-  color: #fff;
-  background-color: #0069d9;
-  border-color: #0062cc;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+.form-floating {
+  position: relative;
 }
-
-.btn-primary.disabled, .btn-primary:disabled {
-  color: #fff;
-  background-color: #007bff;
-  border-color: #007bff;
+.form-floating > .form-control,
+.form-floating > .form-select {
+  height: calc(3.5rem + 2px);
+  padding: 1rem 0.75rem;
 }
-
-.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
-.show > .btn-primary.dropdown-toggle {
-  color: #fff;
-  background-color: #0062cc;
-  border-color: #005cbf;
+.form-floating > label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  padding: 1rem 0.75rem;
+  pointer-events: none;
+  border: 1px solid transparent;
+  transform-origin: 0 0;
+  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
 }
-
-.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
-.show > .btn-primary.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+@media (prefers-reduced-motion: reduce) {
+  .form-floating > label {
+    transition: none;
+  }
 }
-
-.btn-secondary {
-  color: #fff;
-  background-color: #6c757d;
-  border-color: #6c757d;
+.form-floating > .form-control::-moz-placeholder {
+  color: transparent;
 }
-
-.btn-secondary:hover {
-  color: #fff;
-  background-color: #5a6268;
-  border-color: #545b62;
+.form-floating > .form-control::placeholder {
+  color: transparent;
 }
-
-.btn-secondary:focus, .btn-secondary.focus {
-  color: #fff;
-  background-color: #5a6268;
-  border-color: #545b62;
-  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
+.form-floating > .form-control:not(:-moz-placeholder-shown) {
+  padding-top: 1.625rem;
+  padding-bottom: 0.625rem;
 }
-
-.btn-secondary.disabled, .btn-secondary:disabled {
-  color: #fff;
-  background-color: #6c757d;
-  border-color: #6c757d;
+.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) {
+  padding-top: 1.625rem;
+  padding-bottom: 0.625rem;
 }
-
-.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
-.show > .btn-secondary.dropdown-toggle {
-  color: #fff;
-  background-color: #545b62;
-  border-color: #4e555b;
+.form-floating > .form-control:-webkit-autofill {
+  padding-top: 1.625rem;
+  padding-bottom: 0.625rem;
 }
-
-.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
-.show > .btn-secondary.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
+.form-floating > .form-select {
+  padding-top: 1.625rem;
+  padding-bottom: 0.625rem;
 }
-
-.btn-success {
-  color: #fff;
-  background-color: #28a745;
-  border-color: #28a745;
+.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
+  opacity: 0.65;
+  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
 }
-
-.btn-success:hover {
-  color: #fff;
-  background-color: #218838;
-  border-color: #1e7e34;
+.form-floating > .form-control:focus ~ label,
+.form-floating > .form-control:not(:placeholder-shown) ~ label,
+.form-floating > .form-select ~ label {
+  opacity: 0.65;
+  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
 }
-
-.btn-success:focus, .btn-success.focus {
-  color: #fff;
-  background-color: #218838;
-  border-color: #1e7e34;
-  box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
+.form-floating > .form-control:-webkit-autofill ~ label {
+  opacity: 0.65;
+  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
 }
 
-.btn-success.disabled, .btn-success:disabled {
-  color: #fff;
-  background-color: #28a745;
-  border-color: #28a745;
+.input-group {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  width: 100%;
 }
-
-.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active,
-.show > .btn-success.dropdown-toggle {
-  color: #fff;
-  background-color: #1e7e34;
-  border-color: #1c7430;
+.input-group > .form-control,
+.input-group > .form-select {
+  position: relative;
+  flex: 1 1 auto;
+  width: 1%;
+  min-width: 0;
 }
-
-.btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus,
-.show > .btn-success.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
+.input-group > .form-control:focus,
+.input-group > .form-select:focus {
+  z-index: 3;
 }
-
-.btn-info {
-  color: #fff;
-  background-color: #17a2b8;
-  border-color: #17a2b8;
+.input-group .btn {
+  position: relative;
+  z-index: 2;
 }
-
-.btn-info:hover {
-  color: #fff;
-  background-color: #138496;
-  border-color: #117a8b;
+.input-group .btn:focus {
+  z-index: 3;
 }
 
-.btn-info:focus, .btn-info.focus {
-  color: #fff;
-  background-color: #138496;
-  border-color: #117a8b;
-  box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
+.input-group-text {
+  display: flex;
+  align-items: center;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #212529;
+  text-align: center;
+  white-space: nowrap;
+  background-color: #e9ecef;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
 }
 
-.btn-info.disabled, .btn-info:disabled {
-  color: #fff;
-  background-color: #17a2b8;
-  border-color: #17a2b8;
+.input-group-lg > .form-control,
+.input-group-lg > .form-select,
+.input-group-lg > .input-group-text,
+.input-group-lg > .btn {
+  padding: 0.5rem 1rem;
+  font-size: 1.25rem;
+  border-radius: 0.3rem;
 }
 
-.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active,
-.show > .btn-info.dropdown-toggle {
-  color: #fff;
-  background-color: #117a8b;
-  border-color: #10707f;
+.input-group-sm > .form-control,
+.input-group-sm > .form-select,
+.input-group-sm > .input-group-text,
+.input-group-sm > .btn {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  border-radius: 0.2rem;
 }
 
-.btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus,
-.show > .btn-info.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
+.input-group-lg > .form-select,
+.input-group-sm > .form-select {
+  padding-right: 3rem;
 }
 
-.btn-warning {
-  color: #212529;
-  background-color: #ffc107;
-  border-color: #ffc107;
+.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
+.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
-
-.btn-warning:hover {
-  color: #212529;
-  background-color: #e0a800;
-  border-color: #d39e00;
+.input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu),
+.input-group.has-validation > .dropdown-toggle:nth-last-child(n+4) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
-
-.btn-warning:focus, .btn-warning.focus {
-  color: #212529;
-  background-color: #e0a800;
-  border-color: #d39e00;
-  box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
+.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
+  margin-left: -1px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }
 
-.btn-warning.disabled, .btn-warning:disabled {
-  color: #212529;
-  background-color: #ffc107;
-  border-color: #ffc107;
+.valid-feedback {
+  display: none;
+  width: 100%;
+  margin-top: 0.25rem;
+  font-size: 0.875em;
+  color: #198754;
 }
 
-.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active,
-.show > .btn-warning.dropdown-toggle {
-  color: #212529;
-  background-color: #d39e00;
-  border-color: #c69500;
+.valid-tooltip {
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+  display: none;
+  max-width: 100%;
+  padding: 0.25rem 0.5rem;
+  margin-top: 0.1rem;
+  font-size: 0.875rem;
+  color: #fff;
+  background-color: rgba(25, 135, 84, 0.9);
+  border-radius: 0.25rem;
 }
 
-.btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus,
-.show > .btn-warning.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
+.was-validated :valid ~ .valid-feedback,
+.was-validated :valid ~ .valid-tooltip,
+.is-valid ~ .valid-feedback,
+.is-valid ~ .valid-tooltip {
+  display: block;
 }
 
-.btn-danger {
-  color: #fff;
-  background-color: #dc3545;
-  border-color: #dc3545;
+.was-validated .form-control:valid, .form-control.is-valid {
+  border-color: #198754;
+  padding-right: calc(1.5em + 0.75rem);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right calc(0.375em + 0.1875rem) center;
+  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
 }
-
-.btn-danger:hover {
-  color: #fff;
-  background-color: #c82333;
-  border-color: #bd2130;
+.was-validated .form-control:valid:focus, .form-control.is-valid:focus {
+  border-color: #198754;
+  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
 }
 
-.btn-danger:focus, .btn-danger.focus {
-  color: #fff;
-  background-color: #c82333;
-  border-color: #bd2130;
-  box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
+.was-validated textarea.form-control:valid, textarea.form-control.is-valid {
+  padding-right: calc(1.5em + 0.75rem);
+  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
 }
 
-.btn-danger.disabled, .btn-danger:disabled {
-  color: #fff;
-  background-color: #dc3545;
-  border-color: #dc3545;
+.was-validated .form-select:valid, .form-select.is-valid {
+  border-color: #198754;
 }
-
-.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active,
-.show > .btn-danger.dropdown-toggle {
-  color: #fff;
-  background-color: #bd2130;
-  border-color: #b21f2d;
+.was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] {
+  padding-right: 4.125rem;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+  background-position: right 0.75rem center, center right 2.25rem;
+  background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
 }
-
-.btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus,
-.show > .btn-danger.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
+.was-validated .form-select:valid:focus, .form-select.is-valid:focus {
+  border-color: #198754;
+  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
 }
 
-.btn-light {
-  color: #212529;
-  background-color: #f8f9fa;
-  border-color: #f8f9fa;
+.was-validated .form-check-input:valid, .form-check-input.is-valid {
+  border-color: #198754;
 }
-
-.btn-light:hover {
-  color: #212529;
-  background-color: #e2e6ea;
-  border-color: #dae0e5;
+.was-validated .form-check-input:valid:checked, .form-check-input.is-valid:checked {
+  background-color: #198754;
 }
-
-.btn-light:focus, .btn-light.focus {
-  color: #212529;
-  background-color: #e2e6ea;
-  border-color: #dae0e5;
-  box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5);
+.was-validated .form-check-input:valid:focus, .form-check-input.is-valid:focus {
+  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
 }
-
-.btn-light.disabled, .btn-light:disabled {
-  color: #212529;
-  background-color: #f8f9fa;
-  border-color: #f8f9fa;
+.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
+  color: #198754;
 }
 
-.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active,
-.show > .btn-light.dropdown-toggle {
-  color: #212529;
-  background-color: #dae0e5;
-  border-color: #d3d9df;
+.form-check-inline .form-check-input ~ .valid-feedback {
+  margin-left: 0.5em;
 }
 
-.btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus,
-.show > .btn-light.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5);
+.was-validated .input-group .form-control:valid, .input-group .form-control.is-valid,
+.was-validated .input-group .form-select:valid,
+.input-group .form-select.is-valid {
+  z-index: 1;
+}
+.was-validated .input-group .form-control:valid:focus, .input-group .form-control.is-valid:focus,
+.was-validated .input-group .form-select:valid:focus,
+.input-group .form-select.is-valid:focus {
+  z-index: 3;
 }
 
-.btn-dark {
-  color: #fff;
-  background-color: #343a40;
-  border-color: #343a40;
+.invalid-feedback {
+  display: none;
+  width: 100%;
+  margin-top: 0.25rem;
+  font-size: 0.875em;
+  color: #dc3545;
 }
 
-.btn-dark:hover {
+.invalid-tooltip {
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+  display: none;
+  max-width: 100%;
+  padding: 0.25rem 0.5rem;
+  margin-top: 0.1rem;
+  font-size: 0.875rem;
   color: #fff;
-  background-color: #23272b;
-  border-color: #1d2124;
+  background-color: rgba(220, 53, 69, 0.9);
+  border-radius: 0.25rem;
 }
 
-.btn-dark:focus, .btn-dark.focus {
-  color: #fff;
-  background-color: #23272b;
-  border-color: #1d2124;
-  box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
+.was-validated :invalid ~ .invalid-feedback,
+.was-validated :invalid ~ .invalid-tooltip,
+.is-invalid ~ .invalid-feedback,
+.is-invalid ~ .invalid-tooltip {
+  display: block;
 }
 
-.btn-dark.disabled, .btn-dark:disabled {
-  color: #fff;
-  background-color: #343a40;
-  border-color: #343a40;
+.was-validated .form-control:invalid, .form-control.is-invalid {
+  border-color: #dc3545;
+  padding-right: calc(1.5em + 0.75rem);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right calc(0.375em + 0.1875rem) center;
+  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+}
+.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
+  border-color: #dc3545;
+  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
 }
 
-.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active,
-.show > .btn-dark.dropdown-toggle {
-  color: #fff;
-  background-color: #1d2124;
-  border-color: #171a1d;
+.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
+  padding-right: calc(1.5em + 0.75rem);
+  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
 }
 
-.btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus,
-.show > .btn-dark.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
+.was-validated .form-select:invalid, .form-select.is-invalid {
+  border-color: #dc3545;
+}
+.was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] {
+  padding-right: 4.125rem;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+  background-position: right 0.75rem center, center right 2.25rem;
+  background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+}
+.was-validated .form-select:invalid:focus, .form-select.is-invalid:focus {
+  border-color: #dc3545;
+  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
 }
 
-.btn-outline-primary {
-  color: #007bff;
-  border-color: #007bff;
+.was-validated .form-check-input:invalid, .form-check-input.is-invalid {
+  border-color: #dc3545;
+}
+.was-validated .form-check-input:invalid:checked, .form-check-input.is-invalid:checked {
+  background-color: #dc3545;
+}
+.was-validated .form-check-input:invalid:focus, .form-check-input.is-invalid:focus {
+  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
+}
+.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
+  color: #dc3545;
 }
 
-.btn-outline-primary:hover {
-  color: #fff;
-  background-color: #007bff;
-  border-color: #007bff;
+.form-check-inline .form-check-input ~ .invalid-feedback {
+  margin-left: 0.5em;
 }
 
-.btn-outline-primary:focus, .btn-outline-primary.focus {
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
+.was-validated .input-group .form-control:invalid, .input-group .form-control.is-invalid,
+.was-validated .input-group .form-select:invalid,
+.input-group .form-select.is-invalid {
+  z-index: 2;
+}
+.was-validated .input-group .form-control:invalid:focus, .input-group .form-control.is-invalid:focus,
+.was-validated .input-group .form-select:invalid:focus,
+.input-group .form-select.is-invalid:focus {
+  z-index: 3;
 }
 
-.btn-outline-primary.disabled, .btn-outline-primary:disabled {
-  color: #007bff;
+.btn {
+  display: inline-block;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #212529;
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
   background-color: transparent;
+  border: 1px solid transparent;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  border-radius: 0.25rem;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .btn {
+    transition: none;
+  }
+}
+.btn:hover {
+  color: #212529;
+}
+.btn-check:focus + .btn, .btn:focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+.btn:disabled, .btn.disabled, fieldset:disabled .btn {
+  pointer-events: none;
+  opacity: 0.65;
 }
 
-.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
-.show > .btn-outline-primary.dropdown-toggle {
+.btn-primary {
   color: #fff;
-  background-color: #007bff;
-  border-color: #007bff;
+  background-color: #0d6efd;
+  border-color: #0d6efd;
 }
-
-.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
-.show > .btn-outline-primary.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
+.btn-primary:hover {
+  color: #fff;
+  background-color: #0b5ed7;
+  border-color: #0a58ca;
 }
-
-.btn-outline-secondary {
-  color: #6c757d;
-  border-color: #6c757d;
+.btn-check:focus + .btn-primary, .btn-primary:focus {
+  color: #fff;
+  background-color: #0b5ed7;
+  border-color: #0a58ca;
+  box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
 }
-
-.btn-outline-secondary:hover {
+.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
   color: #fff;
-  background-color: #6c757d;
-  border-color: #6c757d;
+  background-color: #0a58ca;
+  border-color: #0a53be;
 }
-
-.btn-outline-secondary:focus, .btn-outline-secondary.focus {
-  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
+.btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
 }
-
-.btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
-  color: #6c757d;
-  background-color: transparent;
+.btn-primary:disabled, .btn-primary.disabled {
+  color: #fff;
+  background-color: #0d6efd;
+  border-color: #0d6efd;
 }
 
-.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active,
-.show > .btn-outline-secondary.dropdown-toggle {
+.btn-secondary {
   color: #fff;
   background-color: #6c757d;
   border-color: #6c757d;
 }
-
-.btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
-.show > .btn-outline-secondary.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
-}
-
-.btn-outline-success {
-  color: #28a745;
-  border-color: #28a745;
+.btn-secondary:hover {
+  color: #fff;
+  background-color: #5c636a;
+  border-color: #565e64;
 }
-
-.btn-outline-success:hover {
+.btn-check:focus + .btn-secondary, .btn-secondary:focus {
   color: #fff;
-  background-color: #28a745;
-  border-color: #28a745;
+  background-color: #5c636a;
+  border-color: #565e64;
+  box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
 }
-
-.btn-outline-success:focus, .btn-outline-success.focus {
-  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
+.btn-check:checked + .btn-secondary, .btn-check:active + .btn-secondary, .btn-secondary:active, .btn-secondary.active, .show > .btn-secondary.dropdown-toggle {
+  color: #fff;
+  background-color: #565e64;
+  border-color: #51585e;
 }
-
-.btn-outline-success.disabled, .btn-outline-success:disabled {
-  color: #28a745;
-  background-color: transparent;
+.btn-check:checked + .btn-secondary:focus, .btn-check:active + .btn-secondary:focus, .btn-secondary:active:focus, .btn-secondary.active:focus, .show > .btn-secondary.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
 }
-
-.btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active,
-.show > .btn-outline-success.dropdown-toggle {
+.btn-secondary:disabled, .btn-secondary.disabled {
   color: #fff;
-  background-color: #28a745;
-  border-color: #28a745;
+  background-color: #6c757d;
+  border-color: #6c757d;
 }
 
-.btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus,
-.show > .btn-outline-success.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
+.btn-success {
+  color: #fff;
+  background-color: #198754;
+  border-color: #198754;
 }
-
-.btn-outline-info {
-  color: #17a2b8;
-  border-color: #17a2b8;
+.btn-success:hover {
+  color: #fff;
+  background-color: #157347;
+  border-color: #146c43;
 }
-
-.btn-outline-info:hover {
+.btn-check:focus + .btn-success, .btn-success:focus {
   color: #fff;
-  background-color: #17a2b8;
-  border-color: #17a2b8;
+  background-color: #157347;
+  border-color: #146c43;
+  box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5);
 }
-
-.btn-outline-info:focus, .btn-outline-info.focus {
-  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
+.btn-check:checked + .btn-success, .btn-check:active + .btn-success, .btn-success:active, .btn-success.active, .show > .btn-success.dropdown-toggle {
+  color: #fff;
+  background-color: #146c43;
+  border-color: #13653f;
 }
-
-.btn-outline-info.disabled, .btn-outline-info:disabled {
-  color: #17a2b8;
-  background-color: transparent;
+.btn-check:checked + .btn-success:focus, .btn-check:active + .btn-success:focus, .btn-success:active:focus, .btn-success.active:focus, .show > .btn-success.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5);
 }
-
-.btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active,
-.show > .btn-outline-info.dropdown-toggle {
+.btn-success:disabled, .btn-success.disabled {
   color: #fff;
-  background-color: #17a2b8;
-  border-color: #17a2b8;
+  background-color: #198754;
+  border-color: #198754;
 }
 
-.btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus,
-.show > .btn-outline-info.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
+.btn-info {
+  color: #000;
+  background-color: #0dcaf0;
+  border-color: #0dcaf0;
 }
-
-.btn-outline-warning {
-  color: #ffc107;
-  border-color: #ffc107;
+.btn-info:hover {
+  color: #000;
+  background-color: #31d2f2;
+  border-color: #25cff2;
 }
-
-.btn-outline-warning:hover {
-  color: #212529;
-  background-color: #ffc107;
-  border-color: #ffc107;
+.btn-check:focus + .btn-info, .btn-info:focus {
+  color: #000;
+  background-color: #31d2f2;
+  border-color: #25cff2;
+  box-shadow: 0 0 0 0.25rem rgba(11, 172, 204, 0.5);
 }
-
-.btn-outline-warning:focus, .btn-outline-warning.focus {
-  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
+.btn-check:checked + .btn-info, .btn-check:active + .btn-info, .btn-info:active, .btn-info.active, .show > .btn-info.dropdown-toggle {
+  color: #000;
+  background-color: #3dd5f3;
+  border-color: #25cff2;
 }
-
-.btn-outline-warning.disabled, .btn-outline-warning:disabled {
-  color: #ffc107;
-  background-color: transparent;
+.btn-check:checked + .btn-info:focus, .btn-check:active + .btn-info:focus, .btn-info:active:focus, .btn-info.active:focus, .show > .btn-info.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.25rem rgba(11, 172, 204, 0.5);
+}
+.btn-info:disabled, .btn-info.disabled {
+  color: #000;
+  background-color: #0dcaf0;
+  border-color: #0dcaf0;
 }
 
-.btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active,
-.show > .btn-outline-warning.dropdown-toggle {
-  color: #212529;
+.btn-warning {
+  color: #000;
   background-color: #ffc107;
   border-color: #ffc107;
 }
-
-.btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus,
-.show > .btn-outline-warning.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
+.btn-warning:hover {
+  color: #000;
+  background-color: #ffca2c;
+  border-color: #ffc720;
 }
-
-.btn-outline-danger {
-  color: #dc3545;
-  border-color: #dc3545;
+.btn-check:focus + .btn-warning, .btn-warning:focus {
+  color: #000;
+  background-color: #ffca2c;
+  border-color: #ffc720;
+  box-shadow: 0 0 0 0.25rem rgba(217, 164, 6, 0.5);
+}
+.btn-check:checked + .btn-warning, .btn-check:active + .btn-warning, .btn-warning:active, .btn-warning.active, .show > .btn-warning.dropdown-toggle {
+  color: #000;
+  background-color: #ffcd39;
+  border-color: #ffc720;
+}
+.btn-check:checked + .btn-warning:focus, .btn-check:active + .btn-warning:focus, .btn-warning:active:focus, .btn-warning.active:focus, .show > .btn-warning.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.25rem rgba(217, 164, 6, 0.5);
+}
+.btn-warning:disabled, .btn-warning.disabled {
+  color: #000;
+  background-color: #ffc107;
+  border-color: #ffc107;
 }
 
-.btn-outline-danger:hover {
+.btn-danger {
   color: #fff;
   background-color: #dc3545;
   border-color: #dc3545;
 }
-
-.btn-outline-danger:focus, .btn-outline-danger.focus {
-  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
+.btn-danger:hover {
+  color: #fff;
+  background-color: #bb2d3b;
+  border-color: #b02a37;
 }
-
-.btn-outline-danger.disabled, .btn-outline-danger:disabled {
-  color: #dc3545;
-  background-color: transparent;
+.btn-check:focus + .btn-danger, .btn-danger:focus {
+  color: #fff;
+  background-color: #bb2d3b;
+  border-color: #b02a37;
+  box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5);
 }
-
-.btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active,
-.show > .btn-outline-danger.dropdown-toggle {
+.btn-check:checked + .btn-danger, .btn-check:active + .btn-danger, .btn-danger:active, .btn-danger.active, .show > .btn-danger.dropdown-toggle {
   color: #fff;
-  background-color: #dc3545;
-  border-color: #dc3545;
+  background-color: #b02a37;
+  border-color: #a52834;
 }
-
-.btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus,
-.show > .btn-outline-danger.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
+.btn-check:checked + .btn-danger:focus, .btn-check:active + .btn-danger:focus, .btn-danger:active:focus, .btn-danger.active:focus, .show > .btn-danger.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5);
 }
-
-.btn-outline-light {
-  color: #f8f9fa;
-  border-color: #f8f9fa;
+.btn-danger:disabled, .btn-danger.disabled {
+  color: #fff;
+  background-color: #dc3545;
+  border-color: #dc3545;
 }
 
-.btn-outline-light:hover {
-  color: #212529;
+.btn-light {
+  color: #000;
   background-color: #f8f9fa;
   border-color: #f8f9fa;
 }
-
-.btn-outline-light:focus, .btn-outline-light.focus {
-  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
+.btn-light:hover {
+  color: #000;
+  background-color: #f9fafb;
+  border-color: #f9fafb;
 }
-
-.btn-outline-light.disabled, .btn-outline-light:disabled {
-  color: #f8f9fa;
-  background-color: transparent;
+.btn-check:focus + .btn-light, .btn-light:focus {
+  color: #000;
+  background-color: #f9fafb;
+  border-color: #f9fafb;
+  box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
 }
-
-.btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active,
-.show > .btn-outline-light.dropdown-toggle {
-  color: #212529;
+.btn-check:checked + .btn-light, .btn-check:active + .btn-light, .btn-light:active, .btn-light.active, .show > .btn-light.dropdown-toggle {
+  color: #000;
+  background-color: #f9fafb;
+  border-color: #f9fafb;
+}
+.btn-check:checked + .btn-light:focus, .btn-check:active + .btn-light:focus, .btn-light:active:focus, .btn-light.active:focus, .show > .btn-light.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
+}
+.btn-light:disabled, .btn-light.disabled {
+  color: #000;
   background-color: #f8f9fa;
   border-color: #f8f9fa;
 }
 
-.btn-outline-light:not(:disabled):not(.disabled):active:focus, .btn-outline-light:not(:disabled):not(.disabled).active:focus,
-.show > .btn-outline-light.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
+.btn-dark {
+  color: #fff;
+  background-color: #212529;
+  border-color: #212529;
 }
-
-.btn-outline-dark {
-  color: #343a40;
-  border-color: #343a40;
+.btn-dark:hover {
+  color: #fff;
+  background-color: #1c1f23;
+  border-color: #1a1e21;
 }
-
-.btn-outline-dark:hover {
+.btn-check:focus + .btn-dark, .btn-dark:focus {
   color: #fff;
-  background-color: #343a40;
-  border-color: #343a40;
+  background-color: #1c1f23;
+  border-color: #1a1e21;
+  box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5);
 }
-
-.btn-outline-dark:focus, .btn-outline-dark.focus {
-  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
+.btn-check:checked + .btn-dark, .btn-check:active + .btn-dark, .btn-dark:active, .btn-dark.active, .show > .btn-dark.dropdown-toggle {
+  color: #fff;
+  background-color: #1a1e21;
+  border-color: #191c1f;
 }
-
-.btn-outline-dark.disabled, .btn-outline-dark:disabled {
-  color: #343a40;
-  background-color: transparent;
+.btn-check:checked + .btn-dark:focus, .btn-check:active + .btn-dark:focus, .btn-dark:active:focus, .btn-dark.active:focus, .show > .btn-dark.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5);
 }
-
-.btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active,
-.show > .btn-outline-dark.dropdown-toggle {
+.btn-dark:disabled, .btn-dark.disabled {
   color: #fff;
-  background-color: #343a40;
-  border-color: #343a40;
+  background-color: #212529;
+  border-color: #212529;
 }
 
-.btn-outline-dark:not(:disabled):not(.disabled):active:focus, .btn-outline-dark:not(:disabled):not(.disabled).active:focus,
-.show > .btn-outline-dark.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
+.btn-outline-primary {
+  color: #0d6efd;
+  border-color: #0d6efd;
 }
-
-.btn-link {
-  font-weight: 400;
-  color: #007bff;
-  text-decoration: none;
+.btn-outline-primary:hover {
+  color: #fff;
+  background-color: #0d6efd;
+  border-color: #0d6efd;
 }
-
-.btn-link:hover {
-  color: #0056b3;
-  text-decoration: underline;
+.btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
 }
-
-.btn-link:focus, .btn-link.focus {
-  text-decoration: underline;
+.btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show {
+  color: #fff;
+  background-color: #0d6efd;
+  border-color: #0d6efd;
 }
-
-.btn-link:disabled, .btn-link.disabled {
-  color: #6c757d;
-  pointer-events: none;
+.btn-check:checked + .btn-outline-primary:focus, .btn-check:active + .btn-outline-primary:focus, .btn-outline-primary:active:focus, .btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus {
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
 }
-
-.btn-lg, .btn-group-lg > .btn {
-  padding: 0.5rem 1rem;
-  font-size: 1.25rem;
-  line-height: 1.5;
-  border-radius: 0.3rem;
+.btn-outline-primary:disabled, .btn-outline-primary.disabled {
+  color: #0d6efd;
+  background-color: transparent;
 }
 
-.btn-sm, .btn-group-sm > .btn {
-  padding: 0.25rem 0.5rem;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  border-radius: 0.2rem;
+.btn-outline-secondary {
+  color: #6c757d;
+  border-color: #6c757d;
+}
+.btn-outline-secondary:hover {
+  color: #fff;
+  background-color: #6c757d;
+  border-color: #6c757d;
+}
+.btn-check:focus + .btn-outline-secondary, .btn-outline-secondary:focus {
+  box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5);
+}
+.btn-check:checked + .btn-outline-secondary, .btn-check:active + .btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show {
+  color: #fff;
+  background-color: #6c757d;
+  border-color: #6c757d;
+}
+.btn-check:checked + .btn-outline-secondary:focus, .btn-check:active + .btn-outline-secondary:focus, .btn-outline-secondary:active:focus, .btn-outline-secondary.active:focus, .btn-outline-secondary.dropdown-toggle.show:focus {
+  box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5);
+}
+.btn-outline-secondary:disabled, .btn-outline-secondary.disabled {
+  color: #6c757d;
+  background-color: transparent;
 }
 
-.btn-block {
-  display: block;
-  width: 100%;
+.btn-outline-success {
+  color: #198754;
+  border-color: #198754;
+}
+.btn-outline-success:hover {
+  color: #fff;
+  background-color: #198754;
+  border-color: #198754;
+}
+.btn-check:focus + .btn-outline-success, .btn-outline-success:focus {
+  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5);
+}
+.btn-check:checked + .btn-outline-success, .btn-check:active + .btn-outline-success, .btn-outline-success:active, .btn-outline-success.active, .btn-outline-success.dropdown-toggle.show {
+  color: #fff;
+  background-color: #198754;
+  border-color: #198754;
+}
+.btn-check:checked + .btn-outline-success:focus, .btn-check:active + .btn-outline-success:focus, .btn-outline-success:active:focus, .btn-outline-success.active:focus, .btn-outline-success.dropdown-toggle.show:focus {
+  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5);
+}
+.btn-outline-success:disabled, .btn-outline-success.disabled {
+  color: #198754;
+  background-color: transparent;
+}
+
+.btn-outline-info {
+  color: #0dcaf0;
+  border-color: #0dcaf0;
+}
+.btn-outline-info:hover {
+  color: #000;
+  background-color: #0dcaf0;
+  border-color: #0dcaf0;
+}
+.btn-check:focus + .btn-outline-info, .btn-outline-info:focus {
+  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.5);
+}
+.btn-check:checked + .btn-outline-info, .btn-check:active + .btn-outline-info, .btn-outline-info:active, .btn-outline-info.active, .btn-outline-info.dropdown-toggle.show {
+  color: #000;
+  background-color: #0dcaf0;
+  border-color: #0dcaf0;
+}
+.btn-check:checked + .btn-outline-info:focus, .btn-check:active + .btn-outline-info:focus, .btn-outline-info:active:focus, .btn-outline-info.active:focus, .btn-outline-info.dropdown-toggle.show:focus {
+  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.5);
+}
+.btn-outline-info:disabled, .btn-outline-info.disabled {
+  color: #0dcaf0;
+  background-color: transparent;
 }
 
-.btn-block + .btn-block {
-  margin-top: 0.5rem;
+.btn-outline-warning {
+  color: #ffc107;
+  border-color: #ffc107;
+}
+.btn-outline-warning:hover {
+  color: #000;
+  background-color: #ffc107;
+  border-color: #ffc107;
+}
+.btn-check:focus + .btn-outline-warning, .btn-outline-warning:focus {
+  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5);
+}
+.btn-check:checked + .btn-outline-warning, .btn-check:active + .btn-outline-warning, .btn-outline-warning:active, .btn-outline-warning.active, .btn-outline-warning.dropdown-toggle.show {
+  color: #000;
+  background-color: #ffc107;
+  border-color: #ffc107;
+}
+.btn-check:checked + .btn-outline-warning:focus, .btn-check:active + .btn-outline-warning:focus, .btn-outline-warning:active:focus, .btn-outline-warning.active:focus, .btn-outline-warning.dropdown-toggle.show:focus {
+  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5);
+}
+.btn-outline-warning:disabled, .btn-outline-warning.disabled {
+  color: #ffc107;
+  background-color: transparent;
 }
 
-input[type="submit"].btn-block,
-input[type="reset"].btn-block,
-input[type="button"].btn-block {
-  width: 100%;
+.btn-outline-danger {
+  color: #dc3545;
+  border-color: #dc3545;
+}
+.btn-outline-danger:hover {
+  color: #fff;
+  background-color: #dc3545;
+  border-color: #dc3545;
+}
+.btn-check:focus + .btn-outline-danger, .btn-outline-danger:focus {
+  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5);
+}
+.btn-check:checked + .btn-outline-danger, .btn-check:active + .btn-outline-danger, .btn-outline-danger:active, .btn-outline-danger.active, .btn-outline-danger.dropdown-toggle.show {
+  color: #fff;
+  background-color: #dc3545;
+  border-color: #dc3545;
+}
+.btn-check:checked + .btn-outline-danger:focus, .btn-check:active + .btn-outline-danger:focus, .btn-outline-danger:active:focus, .btn-outline-danger.active:focus, .btn-outline-danger.dropdown-toggle.show:focus {
+  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5);
+}
+.btn-outline-danger:disabled, .btn-outline-danger.disabled {
+  color: #dc3545;
+  background-color: transparent;
+}
+
+.btn-outline-light {
+  color: #f8f9fa;
+  border-color: #f8f9fa;
+}
+.btn-outline-light:hover {
+  color: #000;
+  background-color: #f8f9fa;
+  border-color: #f8f9fa;
+}
+.btn-check:focus + .btn-outline-light, .btn-outline-light:focus {
+  box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5);
+}
+.btn-check:checked + .btn-outline-light, .btn-check:active + .btn-outline-light, .btn-outline-light:active, .btn-outline-light.active, .btn-outline-light.dropdown-toggle.show {
+  color: #000;
+  background-color: #f8f9fa;
+  border-color: #f8f9fa;
+}
+.btn-check:checked + .btn-outline-light:focus, .btn-check:active + .btn-outline-light:focus, .btn-outline-light:active:focus, .btn-outline-light.active:focus, .btn-outline-light.dropdown-toggle.show:focus {
+  box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5);
+}
+.btn-outline-light:disabled, .btn-outline-light.disabled {
+  color: #f8f9fa;
+  background-color: transparent;
+}
+
+.btn-outline-dark {
+  color: #212529;
+  border-color: #212529;
+}
+.btn-outline-dark:hover {
+  color: #fff;
+  background-color: #212529;
+  border-color: #212529;
+}
+.btn-check:focus + .btn-outline-dark, .btn-outline-dark:focus {
+  box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5);
+}
+.btn-check:checked + .btn-outline-dark, .btn-check:active + .btn-outline-dark, .btn-outline-dark:active, .btn-outline-dark.active, .btn-outline-dark.dropdown-toggle.show {
+  color: #fff;
+  background-color: #212529;
+  border-color: #212529;
+}
+.btn-check:checked + .btn-outline-dark:focus, .btn-check:active + .btn-outline-dark:focus, .btn-outline-dark:active:focus, .btn-outline-dark.active:focus, .btn-outline-dark.dropdown-toggle.show:focus {
+  box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5);
+}
+.btn-outline-dark:disabled, .btn-outline-dark.disabled {
+  color: #212529;
+  background-color: transparent;
+}
+
+.btn-link {
+  font-weight: 400;
+  color: #0d6efd;
+  text-decoration: underline;
+}
+.btn-link:hover {
+  color: #0a58ca;
+}
+.btn-link:disabled, .btn-link.disabled {
+  color: #6c757d;
+}
+
+.btn-lg, .btn-group-lg > .btn {
+  padding: 0.5rem 1rem;
+  font-size: 1.25rem;
+  border-radius: 0.3rem;
+}
+
+.btn-sm, .btn-group-sm > .btn {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  border-radius: 0.2rem;
 }
 
 .fade {
   transition: opacity 0.15s linear;
 }
-
 @media (prefers-reduced-motion: reduce) {
   .fade {
     transition: none;
   }
 }
-
 .fade:not(.show) {
   opacity: 0;
 }
@@ -3162,12 +3406,10 @@ input[type="button"].btn-block {
 }
 
 .collapsing {
-  position: relative;
   height: 0;
   overflow: hidden;
   transition: height 0.35s ease;
 }
-
 @media (prefers-reduced-motion: reduce) {
   .collapsing {
     transition: none;
@@ -3175,16 +3417,15 @@ input[type="button"].btn-block {
 }
 
 .dropup,
-.dropright,
+.dropend,
 .dropdown,
-.dropleft {
+.dropstart {
   position: relative;
 }
 
 .dropdown-toggle {
   white-space: nowrap;
 }
-
 .dropdown-toggle::after {
   display: inline-block;
   margin-left: 0.255em;
@@ -3195,21 +3436,17 @@ input[type="button"].btn-block {
   border-bottom: 0;
   border-left: 0.3em solid transparent;
 }
-
 .dropdown-toggle:empty::after {
   margin-left: 0;
 }
 
 .dropdown-menu {
   position: absolute;
-  top: 100%;
-  left: 0;
   z-index: 1000;
   display: none;
-  float: left;
   min-width: 10rem;
   padding: 0.5rem 0;
-  margin: 0.125rem 0 0;
+  margin: 0;
   font-size: 1rem;
   color: #212529;
   text-align: left;
@@ -3219,68 +3456,119 @@ input[type="button"].btn-block {
   border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 0.25rem;
 }
-
-.dropdown-menu-left {
-  right: auto;
+.dropdown-menu[data-bs-popper] {
+  top: 100%;
   left: 0;
+  margin-top: 0.125rem;
 }
 
-.dropdown-menu-right {
-  right: 0;
-  left: auto;
+.dropdown-menu-start {
+  --bs-position: start;
+}
+.dropdown-menu-start[data-bs-popper] {
+  right: auto /* rtl:ignore */;
+  left: 0 /* rtl:ignore */;
+}
+
+.dropdown-menu-end {
+  --bs-position: end;
+}
+.dropdown-menu-end[data-bs-popper] {
+  right: 0 /* rtl:ignore */;
+  left: auto /* rtl:ignore */;
 }
 
 @media (min-width: 576px) {
-  .dropdown-menu-sm-left {
-    right: auto;
-    left: 0;
+  .dropdown-menu-sm-start {
+    --bs-position: start;
   }
-  .dropdown-menu-sm-right {
-    right: 0;
-    left: auto;
+  .dropdown-menu-sm-start[data-bs-popper] {
+    right: auto /* rtl:ignore */;
+    left: 0 /* rtl:ignore */;
   }
-}
 
-@media (min-width: 768px) {
-  .dropdown-menu-md-left {
-    right: auto;
-    left: 0;
+  .dropdown-menu-sm-end {
+    --bs-position: end;
   }
-  .dropdown-menu-md-right {
-    right: 0;
-    left: auto;
+  .dropdown-menu-sm-end[data-bs-popper] {
+    right: 0 /* rtl:ignore */;
+    left: auto /* rtl:ignore */;
   }
 }
+@media (min-width: 768px) {
+  .dropdown-menu-md-start {
+    --bs-position: start;
+  }
+  .dropdown-menu-md-start[data-bs-popper] {
+    right: auto /* rtl:ignore */;
+    left: 0 /* rtl:ignore */;
+  }
 
-@media (min-width: 992px) {
-  .dropdown-menu-lg-left {
-    right: auto;
-    left: 0;
+  .dropdown-menu-md-end {
+    --bs-position: end;
   }
-  .dropdown-menu-lg-right {
-    right: 0;
-    left: auto;
+  .dropdown-menu-md-end[data-bs-popper] {
+    right: 0 /* rtl:ignore */;
+    left: auto /* rtl:ignore */;
   }
 }
+@media (min-width: 992px) {
+  .dropdown-menu-lg-start {
+    --bs-position: start;
+  }
+  .dropdown-menu-lg-start[data-bs-popper] {
+    right: auto /* rtl:ignore */;
+    left: 0 /* rtl:ignore */;
+  }
 
+  .dropdown-menu-lg-end {
+    --bs-position: end;
+  }
+  .dropdown-menu-lg-end[data-bs-popper] {
+    right: 0 /* rtl:ignore */;
+    left: auto /* rtl:ignore */;
+  }
+}
 @media (min-width: 1200px) {
-  .dropdown-menu-xl-left {
-    right: auto;
-    left: 0;
+  .dropdown-menu-xl-start {
+    --bs-position: start;
+  }
+  .dropdown-menu-xl-start[data-bs-popper] {
+    right: auto /* rtl:ignore */;
+    left: 0 /* rtl:ignore */;
+  }
+
+  .dropdown-menu-xl-end {
+    --bs-position: end;
   }
-  .dropdown-menu-xl-right {
-    right: 0;
-    left: auto;
+  .dropdown-menu-xl-end[data-bs-popper] {
+    right: 0 /* rtl:ignore */;
+    left: auto /* rtl:ignore */;
   }
 }
+@media (min-width: 1400px) {
+  .dropdown-menu-xxl-start {
+    --bs-position: start;
+  }
+  .dropdown-menu-xxl-start[data-bs-popper] {
+    right: auto /* rtl:ignore */;
+    left: 0 /* rtl:ignore */;
+  }
 
-.dropup .dropdown-menu {
+  .dropdown-menu-xxl-end {
+    --bs-position: end;
+  }
+  .dropdown-menu-xxl-end[data-bs-popper] {
+    right: 0 /* rtl:ignore */;
+    left: auto /* rtl:ignore */;
+  }
+}
+.dropup .dropdown-menu[data-bs-popper] {
   top: auto;
   bottom: 100%;
   margin-top: 0;
   margin-bottom: 0.125rem;
 }
-
 .dropup .dropdown-toggle::after {
   display: inline-block;
   margin-left: 0.255em;
@@ -3291,20 +3579,18 @@ input[type="button"].btn-block {
   border-bottom: 0.3em solid;
   border-left: 0.3em solid transparent;
 }
-
 .dropup .dropdown-toggle:empty::after {
   margin-left: 0;
 }
 
-.dropright .dropdown-menu {
+.dropend .dropdown-menu[data-bs-popper] {
   top: 0;
   right: auto;
   left: 100%;
   margin-top: 0;
   margin-left: 0.125rem;
 }
-
-.dropright .dropdown-toggle::after {
+.dropend .dropdown-toggle::after {
   display: inline-block;
   margin-left: 0.255em;
   vertical-align: 0.255em;
@@ -3314,35 +3600,30 @@ input[type="button"].btn-block {
   border-bottom: 0.3em solid transparent;
   border-left: 0.3em solid;
 }
-
-.dropright .dropdown-toggle:empty::after {
+.dropend .dropdown-toggle:empty::after {
   margin-left: 0;
 }
-
-.dropright .dropdown-toggle::after {
+.dropend .dropdown-toggle::after {
   vertical-align: 0;
 }
 
-.dropleft .dropdown-menu {
+.dropstart .dropdown-menu[data-bs-popper] {
   top: 0;
   right: 100%;
   left: auto;
   margin-top: 0;
   margin-right: 0.125rem;
 }
-
-.dropleft .dropdown-toggle::after {
+.dropstart .dropdown-toggle::after {
   display: inline-block;
   margin-left: 0.255em;
   vertical-align: 0.255em;
   content: "";
 }
-
-.dropleft .dropdown-toggle::after {
+.dropstart .dropdown-toggle::after {
   display: none;
 }
-
-.dropleft .dropdown-toggle::before {
+.dropstart .dropdown-toggle::before {
   display: inline-block;
   margin-right: 0.255em;
   vertical-align: 0.255em;
@@ -3351,54 +3632,44 @@ input[type="button"].btn-block {
   border-right: 0.3em solid;
   border-bottom: 0.3em solid transparent;
 }
-
-.dropleft .dropdown-toggle:empty::after {
+.dropstart .dropdown-toggle:empty::after {
   margin-left: 0;
 }
-
-.dropleft .dropdown-toggle::before {
+.dropstart .dropdown-toggle::before {
   vertical-align: 0;
 }
 
-.dropdown-menu[x-placement^="top"], .dropdown-menu[x-placement^="right"], .dropdown-menu[x-placement^="bottom"], .dropdown-menu[x-placement^="left"] {
-  right: auto;
-  bottom: auto;
-}
-
 .dropdown-divider {
   height: 0;
   margin: 0.5rem 0;
   overflow: hidden;
-  border-top: 1px solid #e9ecef;
+  border-top: 1px solid rgba(0, 0, 0, 0.15);
 }
 
 .dropdown-item {
   display: block;
   width: 100%;
-  padding: 0.25rem 1.5rem;
+  padding: 0.25rem 1rem;
   clear: both;
   font-weight: 400;
   color: #212529;
   text-align: inherit;
+  text-decoration: none;
   white-space: nowrap;
   background-color: transparent;
   border: 0;
 }
-
 .dropdown-item:hover, .dropdown-item:focus {
-  color: #16181b;
-  text-decoration: none;
-  background-color: #f8f9fa;
+  color: #1e2125;
+  background-color: #e9ecef;
 }
-
 .dropdown-item.active, .dropdown-item:active {
   color: #fff;
   text-decoration: none;
-  background-color: #007bff;
+  background-color: #0d6efd;
 }
-
 .dropdown-item.disabled, .dropdown-item:disabled {
-  color: #6c757d;
+  color: #adb5bd;
   pointer-events: none;
   background-color: transparent;
 }
@@ -3409,7 +3680,7 @@ input[type="button"].btn-block {
 
 .dropdown-header {
   display: block;
-  padding: 0.5rem 1.5rem;
+  padding: 0.5rem 1rem;
   margin-bottom: 0;
   font-size: 0.875rem;
   color: #6c757d;
@@ -3418,31 +3689,59 @@ input[type="button"].btn-block {
 
 .dropdown-item-text {
   display: block;
-  padding: 0.25rem 1.5rem;
+  padding: 0.25rem 1rem;
   color: #212529;
 }
 
+.dropdown-menu-dark {
+  color: #dee2e6;
+  background-color: #343a40;
+  border-color: rgba(0, 0, 0, 0.15);
+}
+.dropdown-menu-dark .dropdown-item {
+  color: #dee2e6;
+}
+.dropdown-menu-dark .dropdown-item:hover, .dropdown-menu-dark .dropdown-item:focus {
+  color: #fff;
+  background-color: rgba(255, 255, 255, 0.15);
+}
+.dropdown-menu-dark .dropdown-item.active, .dropdown-menu-dark .dropdown-item:active {
+  color: #fff;
+  background-color: #0d6efd;
+}
+.dropdown-menu-dark .dropdown-item.disabled, .dropdown-menu-dark .dropdown-item:disabled {
+  color: #adb5bd;
+}
+.dropdown-menu-dark .dropdown-divider {
+  border-color: rgba(0, 0, 0, 0.15);
+}
+.dropdown-menu-dark .dropdown-item-text {
+  color: #dee2e6;
+}
+.dropdown-menu-dark .dropdown-header {
+  color: #adb5bd;
+}
+
 .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-check:checked + .btn,
+.btn-group > .btn-check:focus + .btn,
 .btn-group > .btn:hover,
-.btn-group-vertical > .btn:hover {
-  z-index: 1;
-}
-
-.btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active,
+.btn-group > .btn:focus,
+.btn-group > .btn:active,
+.btn-group > .btn.active,
+.btn-group-vertical > .btn-check:checked + .btn,
+.btn-group-vertical > .btn-check:focus + .btn,
+.btn-group-vertical > .btn:hover,
 .btn-group-vertical > .btn:focus,
 .btn-group-vertical > .btn:active,
 .btn-group-vertical > .btn.active {
@@ -3450,14 +3749,10 @@ input[type="button"].btn-block {
 }
 
 .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;
 }
@@ -3466,14 +3761,13 @@ input[type="button"].btn-block {
 .btn-group > .btn-group:not(:first-child) {
   margin-left: -1px;
 }
-
 .btn-group > .btn:not(:last-child):not(.dropdown-toggle),
 .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:nth-child(n+3),
+.btn-group > :not(.btn-check) + .btn,
 .btn-group > .btn-group:not(:first-child) > .btn {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
@@ -3483,14 +3777,10 @@ input[type="button"].btn-block {
   padding-right: 0.5625rem;
   padding-left: 0.5625rem;
 }
-
-.dropdown-toggle-split::after,
-.dropup .dropdown-toggle-split::after,
-.dropright .dropdown-toggle-split::after {
+.dropdown-toggle-split::after, .dropup .dropdown-toggle-split::after, .dropend .dropdown-toggle-split::after {
   margin-left: 0;
 }
-
-.dropleft .dropdown-toggle-split::before {
+.dropstart .dropdown-toggle-split::before {
   margin-right: 0;
 }
 
@@ -3505,3404 +3795,3675 @@ input[type="button"].btn-block {
 }
 
 .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),
 .btn-group-vertical > .btn-group:not(:first-child) {
   margin-top: -1px;
 }
-
 .btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle),
 .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 ~ .btn,
 .btn-group-vertical > .btn-group:not(:first-child) > .btn {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
 
-.btn-group-toggle > .btn,
-.btn-group-toggle > .btn-group > .btn {
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
   margin-bottom: 0;
+  list-style: none;
 }
 
-.btn-group-toggle > .btn input[type="radio"],
-.btn-group-toggle > .btn input[type="checkbox"],
-.btn-group-toggle > .btn-group > .btn input[type="radio"],
-.btn-group-toggle > .btn-group > .btn input[type="checkbox"] {
-  position: absolute;
-  clip: rect(0, 0, 0, 0);
+.nav-link {
+  display: block;
+  padding: 0.5rem 1rem;
+  color: #0d6efd;
+  text-decoration: none;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .nav-link {
+    transition: none;
+  }
+}
+.nav-link:hover, .nav-link:focus {
+  color: #0a58ca;
+}
+.nav-link.disabled {
+  color: #6c757d;
   pointer-events: none;
+  cursor: default;
 }
 
-.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%;
+.nav-tabs {
+  border-bottom: 1px solid #dee2e6;
 }
-
-.input-group > .form-control,
-.input-group > .form-control-plaintext,
-.input-group > .custom-select,
-.input-group > .custom-file {
-  position: relative;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  width: 1%;
-  min-width: 0;
-  margin-bottom: 0;
-}
-
-.input-group > .form-control + .form-control,
-.input-group > .form-control + .custom-select,
-.input-group > .form-control + .custom-file,
-.input-group > .form-control-plaintext + .form-control,
-.input-group > .form-control-plaintext + .custom-select,
-.input-group > .form-control-plaintext + .custom-file,
-.input-group > .custom-select + .form-control,
-.input-group > .custom-select + .custom-select,
-.input-group > .custom-select + .custom-file,
-.input-group > .custom-file + .form-control,
-.input-group > .custom-file + .custom-select,
-.input-group > .custom-file + .custom-file {
-  margin-left: -1px;
+.nav-tabs .nav-link {
+  margin-bottom: -1px;
+  background: none;
+  border: 1px solid transparent;
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
 }
-
-.input-group > .form-control:focus,
-.input-group > .custom-select:focus,
-.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label {
-  z-index: 3;
+.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
+  border-color: #e9ecef #e9ecef #dee2e6;
+  isolation: isolate;
 }
-
-.input-group > .custom-file .custom-file-input:focus {
-  z-index: 4;
+.nav-tabs .nav-link.disabled {
+  color: #6c757d;
+  background-color: transparent;
+  border-color: transparent;
 }
-
-.input-group > .form-control:not(:last-child),
-.input-group > .custom-select:not(:last-child) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+.nav-tabs .nav-link.active,
+.nav-tabs .nav-item.show .nav-link {
+  color: #495057;
+  background-color: #fff;
+  border-color: #dee2e6 #dee2e6 #fff;
 }
-
-.input-group > .form-control:not(:first-child),
-.input-group > .custom-select:not(:first-child) {
+.nav-tabs .dropdown-menu {
+  margin-top: -1px;
   border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.input-group > .custom-file {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.input-group > .custom-file:not(:last-child) .custom-file-label,
-.input-group > .custom-file:not(:last-child) .custom-file-label::after {
   border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
 }
 
-.input-group > .custom-file:not(:first-child) .custom-file-label {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+.nav-pills .nav-link {
+  background: none;
+  border: 0;
+  border-radius: 0.25rem;
 }
-
-.input-group-prepend,
-.input-group-append {
-  display: -ms-flexbox;
-  display: flex;
+.nav-pills .nav-link.active,
+.nav-pills .show > .nav-link {
+  color: #fff;
+  background-color: #0d6efd;
 }
 
-.input-group-prepend .btn,
-.input-group-append .btn {
-  position: relative;
-  z-index: 2;
+.nav-fill > .nav-link,
+.nav-fill .nav-item {
+  flex: 1 1 auto;
+  text-align: center;
 }
 
-.input-group-prepend .btn:focus,
-.input-group-append .btn:focus {
-  z-index: 3;
+.nav-justified > .nav-link,
+.nav-justified .nav-item {
+  flex-basis: 0;
+  flex-grow: 1;
+  text-align: center;
 }
 
-.input-group-prepend .btn + .btn,
-.input-group-prepend .btn + .input-group-text,
-.input-group-prepend .input-group-text + .input-group-text,
-.input-group-prepend .input-group-text + .btn,
-.input-group-append .btn + .btn,
-.input-group-append .btn + .input-group-text,
-.input-group-append .input-group-text + .input-group-text,
-.input-group-append .input-group-text + .btn {
-  margin-left: -1px;
+.nav-fill .nav-item .nav-link,
+.nav-justified .nav-item .nav-link {
+  width: 100%;
 }
 
-.input-group-prepend {
-  margin-right: -1px;
+.tab-content > .tab-pane {
+  display: none;
 }
-
-.input-group-append {
-  margin-left: -1px;
+.tab-content > .active {
+  display: block;
 }
 
-.input-group-text {
-  display: -ms-flexbox;
+.navbar {
+  position: relative;
   display: flex;
-  -ms-flex-align: center;
+  flex-wrap: wrap;
   align-items: center;
-  padding: 0.375rem 0.75rem;
-  margin-bottom: 0;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5;
-  color: #495057;
-  text-align: center;
-  white-space: nowrap;
-  background-color: #e9ecef;
-  border: 1px solid #ced4da;
-  border-radius: 0.25rem;
-}
-
-.input-group-text input[type="radio"],
-.input-group-text input[type="checkbox"] {
-  margin-top: 0;
-}
-
-.input-group-lg > .form-control:not(textarea),
-.input-group-lg > .custom-select {
-  height: calc(1.5em + 1rem + 2px);
-}
-
-.input-group-lg > .form-control,
-.input-group-lg > .custom-select,
-.input-group-lg > .input-group-prepend > .input-group-text,
-.input-group-lg > .input-group-append > .input-group-text,
-.input-group-lg > .input-group-prepend > .btn,
-.input-group-lg > .input-group-append > .btn {
-  padding: 0.5rem 1rem;
-  font-size: 1.25rem;
-  line-height: 1.5;
-  border-radius: 0.3rem;
-}
-
-.input-group-sm > .form-control:not(textarea),
-.input-group-sm > .custom-select {
-  height: calc(1.5em + 0.5rem + 2px);
-}
-
-.input-group-sm > .form-control,
-.input-group-sm > .custom-select,
-.input-group-sm > .input-group-prepend > .input-group-text,
-.input-group-sm > .input-group-append > .input-group-text,
-.input-group-sm > .input-group-prepend > .btn,
-.input-group-sm > .input-group-append > .btn {
-  padding: 0.25rem 0.5rem;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  border-radius: 0.2rem;
-}
-
-.input-group-lg > .custom-select,
-.input-group-sm > .custom-select {
-  padding-right: 1.75rem;
-}
-
-.input-group > .input-group-prepend > .btn,
-.input-group > .input-group-prepend > .input-group-text,
-.input-group > .input-group-append:not(:last-child) > .btn,
-.input-group > .input-group-append:not(:last-child) > .input-group-text,
-.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
-.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.input-group > .input-group-append > .btn,
-.input-group > .input-group-append > .input-group-text,
-.input-group > .input-group-prepend:not(:first-child) > .btn,
-.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
-.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
-.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+  justify-content: space-between;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
-
-.custom-control {
-  position: relative;
-  z-index: 1;
-  display: block;
-  min-height: 1.5rem;
-  padding-left: 1.5rem;
-  -webkit-print-color-adjust: exact;
-  color-adjust: exact;
+.navbar > .container,
+.navbar > .container-fluid,
+.navbar > .container-sm,
+.navbar > .container-md,
+.navbar > .container-lg,
+.navbar > .container-xl,
+.navbar > .container-xxl {
+  display: flex;
+  flex-wrap: inherit;
+  align-items: center;
+  justify-content: space-between;
 }
-
-.custom-control-inline {
-  display: -ms-inline-flexbox;
-  display: inline-flex;
+.navbar-brand {
+  padding-top: 0.3125rem;
+  padding-bottom: 0.3125rem;
   margin-right: 1rem;
+  font-size: 1.25rem;
+  text-decoration: none;
+  white-space: nowrap;
 }
-
-.custom-control-input {
-  position: absolute;
-  left: 0;
-  z-index: -1;
-  width: 1rem;
-  height: 1.25rem;
-  opacity: 0;
-}
-
-.custom-control-input:checked ~ .custom-control-label::before {
-  color: #fff;
-  border-color: #007bff;
-  background-color: #007bff;
-}
-
-.custom-control-input:focus ~ .custom-control-label::before {
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-}
-
-.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
-  border-color: #80bdff;
-}
-
-.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
-  color: #fff;
-  background-color: #b3d7ff;
-  border-color: #b3d7ff;
-}
-
-.custom-control-input[disabled] ~ .custom-control-label, .custom-control-input:disabled ~ .custom-control-label {
-  color: #6c757d;
-}
-
-.custom-control-input[disabled] ~ .custom-control-label::before, .custom-control-input:disabled ~ .custom-control-label::before {
-  background-color: #e9ecef;
-}
-
-.custom-control-label {
-  position: relative;
+.navbar-nav {
+  display: flex;
+  flex-direction: column;
+  padding-left: 0;
   margin-bottom: 0;
-  vertical-align: top;
-}
-
-.custom-control-label::before {
-  position: absolute;
-  top: 0.25rem;
-  left: -1.5rem;
-  display: block;
-  width: 1rem;
-  height: 1rem;
-  pointer-events: none;
-  content: "";
-  background-color: #fff;
-  border: #adb5bd solid 1px;
-}
-
-.custom-control-label::after {
-  position: absolute;
-  top: 0.25rem;
-  left: -1.5rem;
-  display: block;
-  width: 1rem;
-  height: 1rem;
-  content: "";
-  background: no-repeat 50% / 50% 50%;
-}
-
-.custom-checkbox .custom-control-label::before {
-  border-radius: 0.25rem;
-}
-
-.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
-}
-
-.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
-  border-color: #007bff;
-  background-color: #007bff;
-}
-
-.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
-}
-
-.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
-  background-color: rgba(0, 123, 255, 0.5);
-}
-
-.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
-  background-color: rgba(0, 123, 255, 0.5);
-}
-
-.custom-radio .custom-control-label::before {
-  border-radius: 50%;
+  list-style: none;
 }
-
-.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
+.navbar-nav .nav-link {
+  padding-right: 0;
+  padding-left: 0;
 }
-
-.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
-  background-color: rgba(0, 123, 255, 0.5);
+.navbar-nav .dropdown-menu {
+  position: static;
 }
 
-.custom-switch {
-  padding-left: 2.25rem;
+.navbar-text {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 
-.custom-switch .custom-control-label::before {
-  left: -2.25rem;
-  width: 1.75rem;
-  pointer-events: all;
-  border-radius: 0.5rem;
+.navbar-collapse {
+  flex-basis: 100%;
+  flex-grow: 1;
+  align-items: center;
 }
 
-.custom-switch .custom-control-label::after {
-  top: calc(0.25rem + 2px);
-  left: calc(-2.25rem + 2px);
-  width: calc(1rem - 4px);
-  height: calc(1rem - 4px);
-  background-color: #adb5bd;
-  border-radius: 0.5rem;
-  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
-  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
+.navbar-toggler {
+  padding: 0.25rem 0.75rem;
+  font-size: 1.25rem;
+  line-height: 1;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  transition: box-shadow 0.15s ease-in-out;
 }
-
 @media (prefers-reduced-motion: reduce) {
-  .custom-switch .custom-control-label::after {
+  .navbar-toggler {
     transition: none;
   }
 }
-
-.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
-  background-color: #fff;
-  -webkit-transform: translateX(0.75rem);
-  transform: translateX(0.75rem);
+.navbar-toggler:hover {
+  text-decoration: none;
 }
-
-.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
-  background-color: rgba(0, 123, 255, 0.5);
+.navbar-toggler:focus {
+  text-decoration: none;
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem;
 }
 
-.custom-select {
+.navbar-toggler-icon {
   display: inline-block;
-  width: 100%;
-  height: calc(1.5em + 0.75rem + 2px);
-  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5;
-  color: #495057;
+  width: 1.5em;
+  height: 1.5em;
   vertical-align: middle;
-  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
-  border: 1px solid #ced4da;
-  border-radius: 0.25rem;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
-.custom-select:focus {
-  border-color: #80bdff;
-  outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-}
-
-.custom-select:focus::-ms-value {
-  color: #495057;
-  background-color: #fff;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100%;
 }
 
-.custom-select[multiple], .custom-select[size]:not([size="1"]) {
-  height: auto;
-  padding-right: 0.75rem;
-  background-image: none;
+.navbar-nav-scroll {
+  max-height: var(--bs-scroll-height, 75vh);
+  overflow-y: auto;
 }
 
-.custom-select:disabled {
-  color: #6c757d;
+@media (min-width: 576px) {
+  .navbar-expand-sm {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+  }
+  .navbar-expand-sm .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-expand-sm .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+  .navbar-expand-sm .navbar-nav .nav-link {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+  .navbar-expand-sm .navbar-nav-scroll {
+    overflow: visible;
+  }
+  .navbar-expand-sm .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+  .navbar-expand-sm .navbar-toggler {
+    display: none;
+  }
+}
+@media (min-width: 768px) {
+  .navbar-expand-md {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+  }
+  .navbar-expand-md .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-expand-md .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+  .navbar-expand-md .navbar-nav .nav-link {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+  .navbar-expand-md .navbar-nav-scroll {
+    overflow: visible;
+  }
+  .navbar-expand-md .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+  .navbar-expand-md .navbar-toggler {
+    display: none;
+  }
+}
+@media (min-width: 992px) {
+  .navbar-expand-lg {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+  }
+  .navbar-expand-lg .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-expand-lg .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+  .navbar-expand-lg .navbar-nav .nav-link {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+  .navbar-expand-lg .navbar-nav-scroll {
+    overflow: visible;
+  }
+  .navbar-expand-lg .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+  .navbar-expand-lg .navbar-toggler {
+    display: none;
+  }
+}
+@media (min-width: 1200px) {
+  .navbar-expand-xl {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+  }
+  .navbar-expand-xl .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-expand-xl .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+  .navbar-expand-xl .navbar-nav .nav-link {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+  .navbar-expand-xl .navbar-nav-scroll {
+    overflow: visible;
+  }
+  .navbar-expand-xl .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+  .navbar-expand-xl .navbar-toggler {
+    display: none;
+  }
+}
+@media (min-width: 1400px) {
+  .navbar-expand-xxl {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+  }
+  .navbar-expand-xxl .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-expand-xxl .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+  .navbar-expand-xxl .navbar-nav .nav-link {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+  .navbar-expand-xxl .navbar-nav-scroll {
+    overflow: visible;
+  }
+  .navbar-expand-xxl .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+  .navbar-expand-xxl .navbar-toggler {
+    display: none;
+  }
+}
+.navbar-expand {
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+}
+.navbar-expand .navbar-nav {
+  flex-direction: row;
+}
+.navbar-expand .navbar-nav .dropdown-menu {
+  position: absolute;
+}
+.navbar-expand .navbar-nav .nav-link {
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+.navbar-expand .navbar-nav-scroll {
+  overflow: visible;
+}
+.navbar-expand .navbar-collapse {
+  display: flex !important;
+  flex-basis: auto;
+}
+.navbar-expand .navbar-toggler {
+  display: none;
+}
+
+.navbar-light .navbar-brand {
+  color: rgba(0, 0, 0, 0.9);
+}
+.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
+  color: rgba(0, 0, 0, 0.9);
+}
+.navbar-light .navbar-nav .nav-link {
+  color: rgba(0, 0, 0, 0.55);
+}
+.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
+  color: rgba(0, 0, 0, 0.7);
+}
+.navbar-light .navbar-nav .nav-link.disabled {
+  color: rgba(0, 0, 0, 0.3);
+}
+.navbar-light .navbar-nav .show > .nav-link,
+.navbar-light .navbar-nav .nav-link.active {
+  color: rgba(0, 0, 0, 0.9);
+}
+.navbar-light .navbar-toggler {
+  color: rgba(0, 0, 0, 0.55);
+  border-color: rgba(0, 0, 0, 0.1);
+}
+.navbar-light .navbar-toggler-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+.navbar-light .navbar-text {
+  color: rgba(0, 0, 0, 0.55);
+}
+.navbar-light .navbar-text a,
+.navbar-light .navbar-text a:hover,
+.navbar-light .navbar-text a:focus {
+  color: rgba(0, 0, 0, 0.9);
+}
+
+.navbar-dark .navbar-brand {
+  color: #fff;
+}
+.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
+  color: #fff;
+}
+.navbar-dark .navbar-nav .nav-link {
+  color: rgba(255, 255, 255, 0.55);
+}
+.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
+  color: rgba(255, 255, 255, 0.75);
+}
+.navbar-dark .navbar-nav .nav-link.disabled {
+  color: rgba(255, 255, 255, 0.25);
+}
+.navbar-dark .navbar-nav .show > .nav-link,
+.navbar-dark .navbar-nav .nav-link.active {
+  color: #fff;
+}
+.navbar-dark .navbar-toggler {
+  color: rgba(255, 255, 255, 0.55);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+.navbar-dark .navbar-toggler-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+.navbar-dark .navbar-text {
+  color: rgba(255, 255, 255, 0.55);
+}
+.navbar-dark .navbar-text a,
+.navbar-dark .navbar-text a:hover,
+.navbar-dark .navbar-text a:focus {
+  color: #fff;
+}
+
+.card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  border: 1px solid rgba(0, 0, 0, 0.125);
+  border-radius: 0.25rem;
+}
+.card > hr {
+  margin-right: 0;
+  margin-left: 0;
+}
+.card > .list-group {
+  border-top: inherit;
+  border-bottom: inherit;
+}
+.card > .list-group:first-child {
+  border-top-width: 0;
+  border-top-left-radius: calc(0.25rem - 1px);
+  border-top-right-radius: calc(0.25rem - 1px);
+}
+.card > .list-group:last-child {
+  border-bottom-width: 0;
+  border-bottom-right-radius: calc(0.25rem - 1px);
+  border-bottom-left-radius: calc(0.25rem - 1px);
+}
+.card > .card-header + .list-group,
+.card > .list-group + .card-footer {
+  border-top: 0;
+}
+
+.card-body {
+  flex: 1 1 auto;
+  padding: 1rem 1rem;
+}
+
+.card-title {
+  margin-bottom: 0.5rem;
+}
+
+.card-subtitle {
+  margin-top: -0.25rem;
+  margin-bottom: 0;
+}
+
+.card-text:last-child {
+  margin-bottom: 0;
+}
+
+.card-link:hover {
+  text-decoration: none;
+}
+.card-link + .card-link {
+  margin-left: 1rem;
+}
+
+.card-header {
+  padding: 0.5rem 1rem;
+  margin-bottom: 0;
+  background-color: rgba(0, 0, 0, 0.03);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+}
+.card-header:first-child {
+  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
+}
+
+.card-footer {
+  padding: 0.5rem 1rem;
+  background-color: rgba(0, 0, 0, 0.03);
+  border-top: 1px solid rgba(0, 0, 0, 0.125);
+}
+.card-footer:last-child {
+  border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
+}
+
+.card-header-tabs {
+  margin-right: -0.5rem;
+  margin-bottom: -0.5rem;
+  margin-left: -0.5rem;
+  border-bottom: 0;
+}
+
+.card-header-pills {
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.card-img-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 1rem;
+  border-radius: calc(0.25rem - 1px);
+}
+
+.card-img,
+.card-img-top,
+.card-img-bottom {
+  width: 100%;
+}
+
+.card-img,
+.card-img-top {
+  border-top-left-radius: calc(0.25rem - 1px);
+  border-top-right-radius: calc(0.25rem - 1px);
+}
+
+.card-img,
+.card-img-bottom {
+  border-bottom-right-radius: calc(0.25rem - 1px);
+  border-bottom-left-radius: calc(0.25rem - 1px);
+}
+
+.card-group > .card {
+  margin-bottom: 0.75rem;
+}
+@media (min-width: 576px) {
+  .card-group {
+    display: flex;
+    flex-flow: row wrap;
+  }
+  .card-group > .card {
+    flex: 1 0 0%;
+    margin-bottom: 0;
+  }
+  .card-group > .card + .card {
+    margin-left: 0;
+    border-left: 0;
+  }
+  .card-group > .card:not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .card-group > .card:not(:last-child) .card-img-top,
+.card-group > .card:not(:last-child) .card-header {
+    border-top-right-radius: 0;
+  }
+  .card-group > .card:not(:last-child) .card-img-bottom,
+.card-group > .card:not(:last-child) .card-footer {
+    border-bottom-right-radius: 0;
+  }
+  .card-group > .card:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .card-group > .card:not(:first-child) .card-img-top,
+.card-group > .card:not(:first-child) .card-header {
+    border-top-left-radius: 0;
+  }
+  .card-group > .card:not(:first-child) .card-img-bottom,
+.card-group > .card:not(:first-child) .card-footer {
+    border-bottom-left-radius: 0;
+  }
+}
+
+.accordion-button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 1rem 1.25rem;
+  font-size: 1rem;
+  color: #212529;
+  text-align: left;
+  background-color: #fff;
+  border: 0;
+  border-radius: 0;
+  overflow-anchor: none;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .accordion-button {
+    transition: none;
+  }
+}
+.accordion-button:not(.collapsed) {
+  color: #0c63e4;
+  background-color: #e7f1ff;
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
+}
+.accordion-button:not(.collapsed)::after {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  transform: rotate(-180deg);
+}
+.accordion-button::after {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-left: auto;
+  content: "";
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-size: 1.25rem;
+  transition: transform 0.2s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .accordion-button::after {
+    transition: none;
+  }
+}
+.accordion-button:hover {
+  z-index: 2;
+}
+.accordion-button:focus {
+  z-index: 3;
+  border-color: #86b7fe;
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+
+.accordion-header {
+  margin-bottom: 0;
+}
+
+.accordion-item {
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.125);
+}
+.accordion-item:first-of-type {
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
+.accordion-item:first-of-type .accordion-button {
+  border-top-left-radius: calc(0.25rem - 1px);
+  border-top-right-radius: calc(0.25rem - 1px);
+}
+.accordion-item:not(:first-of-type) {
+  border-top: 0;
+}
+.accordion-item:last-of-type {
+  border-bottom-right-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+.accordion-item:last-of-type .accordion-button.collapsed {
+  border-bottom-right-radius: calc(0.25rem - 1px);
+  border-bottom-left-radius: calc(0.25rem - 1px);
+}
+.accordion-item:last-of-type .accordion-collapse {
+  border-bottom-right-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+
+.accordion-body {
+  padding: 1rem 1.25rem;
+}
+
+.accordion-flush .accordion-collapse {
+  border-width: 0;
+}
+.accordion-flush .accordion-item {
+  border-right: 0;
+  border-left: 0;
+  border-radius: 0;
+}
+.accordion-flush .accordion-item:first-child {
+  border-top: 0;
+}
+.accordion-flush .accordion-item:last-child {
+  border-bottom: 0;
+}
+.accordion-flush .accordion-item .accordion-button {
+  border-radius: 0;
+}
+
+.breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 0;
+  margin-bottom: 1rem;
+  list-style: none;
+}
+
+.breadcrumb-item + .breadcrumb-item {
+  padding-left: 0.5rem;
+}
+.breadcrumb-item + .breadcrumb-item::before {
+  float: left;
+  padding-right: 0.5rem;
+  color: #6c757d;
+  content: var(--bs-breadcrumb-divider, "/") /* rtl: var(--bs-breadcrumb-divider, "/") */;
+}
+.breadcrumb-item.active {
+  color: #6c757d;
+}
+
+.pagination {
+  display: flex;
+  padding-left: 0;
+  list-style: none;
+}
+
+.page-link {
+  position: relative;
+  display: block;
+  color: #0d6efd;
+  text-decoration: none;
+  background-color: #fff;
+  border: 1px solid #dee2e6;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .page-link {
+    transition: none;
+  }
+}
+.page-link:hover {
+  z-index: 2;
+  color: #0a58ca;
   background-color: #e9ecef;
+  border-color: #dee2e6;
+}
+.page-link:focus {
+  z-index: 3;
+  color: #0a58ca;
+  background-color: #e9ecef;
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+
+.page-item:not(:first-child) .page-link {
+  margin-left: -1px;
+}
+.page-item.active .page-link {
+  z-index: 3;
+  color: #fff;
+  background-color: #0d6efd;
+  border-color: #0d6efd;
+}
+.page-item.disabled .page-link {
+  color: #6c757d;
+  pointer-events: none;
+  background-color: #fff;
+  border-color: #dee2e6;
+}
+
+.page-link {
+  padding: 0.375rem 0.75rem;
+}
+
+.page-item:first-child .page-link {
+  border-top-left-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+.page-item:last-child .page-link {
+  border-top-right-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+}
+
+.pagination-lg .page-link {
+  padding: 0.75rem 1.5rem;
+  font-size: 1.25rem;
+}
+.pagination-lg .page-item:first-child .page-link {
+  border-top-left-radius: 0.3rem;
+  border-bottom-left-radius: 0.3rem;
+}
+.pagination-lg .page-item:last-child .page-link {
+  border-top-right-radius: 0.3rem;
+  border-bottom-right-radius: 0.3rem;
+}
+
+.pagination-sm .page-link {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+}
+.pagination-sm .page-item:first-child .page-link {
+  border-top-left-radius: 0.2rem;
+  border-bottom-left-radius: 0.2rem;
+}
+.pagination-sm .page-item:last-child .page-link {
+  border-top-right-radius: 0.2rem;
+  border-bottom-right-radius: 0.2rem;
 }
 
-.custom-select::-ms-expand {
+.badge {
+  display: inline-block;
+  padding: 0.35em 0.65em;
+  font-size: 0.75em;
+  font-weight: 700;
+  line-height: 1;
+  color: #fff;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: 0.25rem;
+}
+.badge:empty {
   display: none;
 }
 
-.custom-select:-moz-focusring {
-  color: transparent;
-  text-shadow: 0 0 0 #495057;
+.btn .badge {
+  position: relative;
+  top: -1px;
 }
 
-.custom-select-sm {
-  height: calc(1.5em + 0.5rem + 2px);
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-  padding-left: 0.5rem;
-  font-size: 0.875rem;
+.alert {
+  position: relative;
+  padding: 1rem 1rem;
+  margin-bottom: 1rem;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
 }
 
-.custom-select-lg {
-  height: calc(1.5em + 1rem + 2px);
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-left: 1rem;
-  font-size: 1.25rem;
+.alert-heading {
+  color: inherit;
 }
 
-.custom-file {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  height: calc(1.5em + 0.75rem + 2px);
-  margin-bottom: 0;
+.alert-link {
+  font-weight: 700;
 }
 
-.custom-file-input {
-  position: relative;
+.alert-dismissible {
+  padding-right: 3rem;
+}
+.alert-dismissible .btn-close {
+  position: absolute;
+  top: 0;
+  right: 0;
   z-index: 2;
-  width: 100%;
-  height: calc(1.5em + 0.75rem + 2px);
-  margin: 0;
-  opacity: 0;
+  padding: 1.25rem 1rem;
+}
+
+.alert-primary {
+  color: #084298;
+  background-color: #cfe2ff;
+  border-color: #b6d4fe;
+}
+.alert-primary .alert-link {
+  color: #06357a;
+}
+
+.alert-secondary {
+  color: #41464b;
+  background-color: #e2e3e5;
+  border-color: #d3d6d8;
+}
+.alert-secondary .alert-link {
+  color: #34383c;
+}
+
+.alert-success {
+  color: #0f5132;
+  background-color: #d1e7dd;
+  border-color: #badbcc;
+}
+.alert-success .alert-link {
+  color: #0c4128;
+}
+
+.alert-info {
+  color: #055160;
+  background-color: #cff4fc;
+  border-color: #b6effb;
+}
+.alert-info .alert-link {
+  color: #04414d;
+}
+
+.alert-warning {
+  color: #664d03;
+  background-color: #fff3cd;
+  border-color: #ffecb5;
+}
+.alert-warning .alert-link {
+  color: #523e02;
+}
+
+.alert-danger {
+  color: #842029;
+  background-color: #f8d7da;
+  border-color: #f5c2c7;
+}
+.alert-danger .alert-link {
+  color: #6a1a21;
+}
+
+.alert-light {
+  color: #636464;
+  background-color: #fefefe;
+  border-color: #fdfdfe;
+}
+.alert-light .alert-link {
+  color: #4f5050;
+}
+
+.alert-dark {
+  color: #141619;
+  background-color: #d3d3d4;
+  border-color: #bcbebf;
+}
+.alert-dark .alert-link {
+  color: #101214;
+}
+
+@-webkit-keyframes progress-bar-stripes {
+  0% {
+    background-position-x: 1rem;
+  }
+}
+
+@keyframes progress-bar-stripes {
+  0% {
+    background-position-x: 1rem;
+  }
+}
+.progress {
+  display: flex;
+  height: 1rem;
+  overflow: hidden;
+  font-size: 0.75rem;
+  background-color: #e9ecef;
+  border-radius: 0.25rem;
+}
+
+.progress-bar {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  color: #fff;
+  text-align: center;
+  white-space: nowrap;
+  background-color: #0d6efd;
+  transition: width 0.6s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .progress-bar {
+    transition: none;
+  }
 }
 
-.custom-file-input:focus ~ .custom-file-label {
-  border-color: #80bdff;
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+.progress-bar-striped {
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-size: 1rem 1rem;
+}
+
+.progress-bar-animated {
+  -webkit-animation: 1s linear infinite progress-bar-stripes;
+  animation: 1s linear infinite progress-bar-stripes;
+}
+@media (prefers-reduced-motion: reduce) {
+  .progress-bar-animated {
+    -webkit-animation: none;
+    animation: none;
+  }
+}
+
+.list-group {
+  display: flex;
+  flex-direction: column;
+  padding-left: 0;
+  margin-bottom: 0;
+  border-radius: 0.25rem;
 }
 
-.custom-file-input[disabled] ~ .custom-file-label,
-.custom-file-input:disabled ~ .custom-file-label {
+.list-group-numbered {
+  list-style-type: none;
+  counter-reset: section;
+}
+.list-group-numbered > li::before {
+  content: counters(section, ".") ". ";
+  counter-increment: section;
+}
+
+.list-group-item-action {
+  width: 100%;
+  color: #495057;
+  text-align: inherit;
+}
+.list-group-item-action:hover, .list-group-item-action:focus {
+  z-index: 1;
+  color: #495057;
+  text-decoration: none;
+  background-color: #f8f9fa;
+}
+.list-group-item-action:active {
+  color: #212529;
   background-color: #e9ecef;
 }
 
-.custom-file-input:lang(en) ~ .custom-file-label::after {
-  content: "Browse";
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: 0.5rem 1rem;
+  color: #212529;
+  text-decoration: none;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.125);
+}
+.list-group-item:first-child {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+.list-group-item:last-child {
+  border-bottom-right-radius: inherit;
+  border-bottom-left-radius: inherit;
+}
+.list-group-item.disabled, .list-group-item:disabled {
+  color: #6c757d;
+  pointer-events: none;
+  background-color: #fff;
+}
+.list-group-item.active {
+  z-index: 2;
+  color: #fff;
+  background-color: #0d6efd;
+  border-color: #0d6efd;
+}
+.list-group-item + .list-group-item {
+  border-top-width: 0;
+}
+.list-group-item + .list-group-item.active {
+  margin-top: -1px;
+  border-top-width: 1px;
+}
+
+.list-group-horizontal {
+  flex-direction: row;
+}
+.list-group-horizontal > .list-group-item:first-child {
+  border-bottom-left-radius: 0.25rem;
+  border-top-right-radius: 0;
+}
+.list-group-horizontal > .list-group-item:last-child {
+  border-top-right-radius: 0.25rem;
+  border-bottom-left-radius: 0;
+}
+.list-group-horizontal > .list-group-item.active {
+  margin-top: 0;
+}
+.list-group-horizontal > .list-group-item + .list-group-item {
+  border-top-width: 1px;
+  border-left-width: 0;
+}
+.list-group-horizontal > .list-group-item + .list-group-item.active {
+  margin-left: -1px;
+  border-left-width: 1px;
 }
 
-.custom-file-input ~ .custom-file-label[data-browse]::after {
-  content: attr(data-browse);
+@media (min-width: 576px) {
+  .list-group-horizontal-sm {
+    flex-direction: row;
+  }
+  .list-group-horizontal-sm > .list-group-item:first-child {
+    border-bottom-left-radius: 0.25rem;
+    border-top-right-radius: 0;
+  }
+  .list-group-horizontal-sm > .list-group-item:last-child {
+    border-top-right-radius: 0.25rem;
+    border-bottom-left-radius: 0;
+  }
+  .list-group-horizontal-sm > .list-group-item.active {
+    margin-top: 0;
+  }
+  .list-group-horizontal-sm > .list-group-item + .list-group-item {
+    border-top-width: 1px;
+    border-left-width: 0;
+  }
+  .list-group-horizontal-sm > .list-group-item + .list-group-item.active {
+    margin-left: -1px;
+    border-left-width: 1px;
+  }
+}
+@media (min-width: 768px) {
+  .list-group-horizontal-md {
+    flex-direction: row;
+  }
+  .list-group-horizontal-md > .list-group-item:first-child {
+    border-bottom-left-radius: 0.25rem;
+    border-top-right-radius: 0;
+  }
+  .list-group-horizontal-md > .list-group-item:last-child {
+    border-top-right-radius: 0.25rem;
+    border-bottom-left-radius: 0;
+  }
+  .list-group-horizontal-md > .list-group-item.active {
+    margin-top: 0;
+  }
+  .list-group-horizontal-md > .list-group-item + .list-group-item {
+    border-top-width: 1px;
+    border-left-width: 0;
+  }
+  .list-group-horizontal-md > .list-group-item + .list-group-item.active {
+    margin-left: -1px;
+    border-left-width: 1px;
+  }
 }
-
-.custom-file-label {
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: 1;
-  height: calc(1.5em + 0.75rem + 2px);
-  padding: 0.375rem 0.75rem;
-  font-weight: 400;
-  line-height: 1.5;
-  color: #495057;
-  background-color: #fff;
-  border: 1px solid #ced4da;
-  border-radius: 0.25rem;
+@media (min-width: 992px) {
+  .list-group-horizontal-lg {
+    flex-direction: row;
+  }
+  .list-group-horizontal-lg > .list-group-item:first-child {
+    border-bottom-left-radius: 0.25rem;
+    border-top-right-radius: 0;
+  }
+  .list-group-horizontal-lg > .list-group-item:last-child {
+    border-top-right-radius: 0.25rem;
+    border-bottom-left-radius: 0;
+  }
+  .list-group-horizontal-lg > .list-group-item.active {
+    margin-top: 0;
+  }
+  .list-group-horizontal-lg > .list-group-item + .list-group-item {
+    border-top-width: 1px;
+    border-left-width: 0;
+  }
+  .list-group-horizontal-lg > .list-group-item + .list-group-item.active {
+    margin-left: -1px;
+    border-left-width: 1px;
+  }
 }
-
-.custom-file-label::after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 3;
-  display: block;
-  height: calc(1.5em + 0.75rem);
-  padding: 0.375rem 0.75rem;
-  line-height: 1.5;
-  color: #495057;
-  content: "Browse";
-  background-color: #e9ecef;
-  border-left: inherit;
-  border-radius: 0 0.25rem 0.25rem 0;
+@media (min-width: 1200px) {
+  .list-group-horizontal-xl {
+    flex-direction: row;
+  }
+  .list-group-horizontal-xl > .list-group-item:first-child {
+    border-bottom-left-radius: 0.25rem;
+    border-top-right-radius: 0;
+  }
+  .list-group-horizontal-xl > .list-group-item:last-child {
+    border-top-right-radius: 0.25rem;
+    border-bottom-left-radius: 0;
+  }
+  .list-group-horizontal-xl > .list-group-item.active {
+    margin-top: 0;
+  }
+  .list-group-horizontal-xl > .list-group-item + .list-group-item {
+    border-top-width: 1px;
+    border-left-width: 0;
+  }
+  .list-group-horizontal-xl > .list-group-item + .list-group-item.active {
+    margin-left: -1px;
+    border-left-width: 1px;
+  }
 }
-
-.custom-range {
-  width: 100%;
-  height: 1.4rem;
-  padding: 0;
-  background-color: transparent;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
+@media (min-width: 1400px) {
+  .list-group-horizontal-xxl {
+    flex-direction: row;
+  }
+  .list-group-horizontal-xxl > .list-group-item:first-child {
+    border-bottom-left-radius: 0.25rem;
+    border-top-right-radius: 0;
+  }
+  .list-group-horizontal-xxl > .list-group-item:last-child {
+    border-top-right-radius: 0.25rem;
+    border-bottom-left-radius: 0;
+  }
+  .list-group-horizontal-xxl > .list-group-item.active {
+    margin-top: 0;
+  }
+  .list-group-horizontal-xxl > .list-group-item + .list-group-item {
+    border-top-width: 1px;
+    border-left-width: 0;
+  }
+  .list-group-horizontal-xxl > .list-group-item + .list-group-item.active {
+    margin-left: -1px;
+    border-left-width: 1px;
+  }
 }
-
-.custom-range:focus {
-  outline: none;
+.list-group-flush {
+  border-radius: 0;
 }
-
-.custom-range:focus::-webkit-slider-thumb {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+.list-group-flush > .list-group-item {
+  border-width: 0 0 1px;
 }
-
-.custom-range:focus::-moz-range-thumb {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+.list-group-flush > .list-group-item:last-child {
+  border-bottom-width: 0;
 }
 
-.custom-range:focus::-ms-thumb {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+.list-group-item-primary {
+  color: #084298;
+  background-color: #cfe2ff;
 }
-
-.custom-range::-moz-focus-outer {
-  border: 0;
+.list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
+  color: #084298;
+  background-color: #bacbe6;
 }
-
-.custom-range::-webkit-slider-thumb {
-  width: 1rem;
-  height: 1rem;
-  margin-top: -0.25rem;
-  background-color: #007bff;
-  border: 0;
-  border-radius: 1rem;
-  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  -webkit-appearance: none;
-  appearance: none;
+.list-group-item-primary.list-group-item-action.active {
+  color: #fff;
+  background-color: #084298;
+  border-color: #084298;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .custom-range::-webkit-slider-thumb {
-    -webkit-transition: none;
-    transition: none;
-  }
+.list-group-item-secondary {
+  color: #41464b;
+  background-color: #e2e3e5;
 }
-
-.custom-range::-webkit-slider-thumb:active {
-  background-color: #b3d7ff;
+.list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
+  color: #41464b;
+  background-color: #cbccce;
 }
-
-.custom-range::-webkit-slider-runnable-track {
-  width: 100%;
-  height: 0.5rem;
-  color: transparent;
-  cursor: pointer;
-  background-color: #dee2e6;
-  border-color: transparent;
-  border-radius: 1rem;
+.list-group-item-secondary.list-group-item-action.active {
+  color: #fff;
+  background-color: #41464b;
+  border-color: #41464b;
 }
 
-.custom-range::-moz-range-thumb {
-  width: 1rem;
-  height: 1rem;
-  background-color: #007bff;
-  border: 0;
-  border-radius: 1rem;
-  -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  -moz-appearance: none;
-  appearance: none;
+.list-group-item-success {
+  color: #0f5132;
+  background-color: #d1e7dd;
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .custom-range::-moz-range-thumb {
-    -moz-transition: none;
-    transition: none;
-  }
+.list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus {
+  color: #0f5132;
+  background-color: #bcd0c7;
 }
-
-.custom-range::-moz-range-thumb:active {
-  background-color: #b3d7ff;
+.list-group-item-success.list-group-item-action.active {
+  color: #fff;
+  background-color: #0f5132;
+  border-color: #0f5132;
 }
 
-.custom-range::-moz-range-track {
-  width: 100%;
-  height: 0.5rem;
-  color: transparent;
-  cursor: pointer;
-  background-color: #dee2e6;
-  border-color: transparent;
-  border-radius: 1rem;
+.list-group-item-info {
+  color: #055160;
+  background-color: #cff4fc;
 }
-
-.custom-range::-ms-thumb {
-  width: 1rem;
-  height: 1rem;
-  margin-top: 0;
-  margin-right: 0.2rem;
-  margin-left: 0.2rem;
-  background-color: #007bff;
-  border: 0;
-  border-radius: 1rem;
-  -ms-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  appearance: none;
+.list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus {
+  color: #055160;
+  background-color: #badce3;
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .custom-range::-ms-thumb {
-    -ms-transition: none;
-    transition: none;
-  }
+.list-group-item-info.list-group-item-action.active {
+  color: #fff;
+  background-color: #055160;
+  border-color: #055160;
 }
 
-.custom-range::-ms-thumb:active {
-  background-color: #b3d7ff;
+.list-group-item-warning {
+  color: #664d03;
+  background-color: #fff3cd;
 }
-
-.custom-range::-ms-track {
-  width: 100%;
-  height: 0.5rem;
-  color: transparent;
-  cursor: pointer;
-  background-color: transparent;
-  border-color: transparent;
-  border-width: 0.5rem;
+.list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus {
+  color: #664d03;
+  background-color: #e6dbb9;
 }
-
-.custom-range::-ms-fill-lower {
-  background-color: #dee2e6;
-  border-radius: 1rem;
+.list-group-item-warning.list-group-item-action.active {
+  color: #fff;
+  background-color: #664d03;
+  border-color: #664d03;
 }
 
-.custom-range::-ms-fill-upper {
-  margin-right: 15px;
-  background-color: #dee2e6;
-  border-radius: 1rem;
+.list-group-item-danger {
+  color: #842029;
+  background-color: #f8d7da;
 }
-
-.custom-range:disabled::-webkit-slider-thumb {
-  background-color: #adb5bd;
+.list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus {
+  color: #842029;
+  background-color: #dfc2c4;
 }
-
-.custom-range:disabled::-webkit-slider-runnable-track {
-  cursor: default;
+.list-group-item-danger.list-group-item-action.active {
+  color: #fff;
+  background-color: #842029;
+  border-color: #842029;
 }
 
-.custom-range:disabled::-moz-range-thumb {
-  background-color: #adb5bd;
+.list-group-item-light {
+  color: #636464;
+  background-color: #fefefe;
 }
-
-.custom-range:disabled::-moz-range-track {
-  cursor: default;
+.list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus {
+  color: #636464;
+  background-color: #e5e5e5;
 }
-
-.custom-range:disabled::-ms-thumb {
-  background-color: #adb5bd;
+.list-group-item-light.list-group-item-action.active {
+  color: #fff;
+  background-color: #636464;
+  border-color: #636464;
 }
 
-.custom-control-label::before,
-.custom-file-label,
-.custom-select {
-  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+.list-group-item-dark {
+  color: #141619;
+  background-color: #d3d3d4;
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .custom-control-label::before,
-  .custom-file-label,
-  .custom-select {
-    transition: none;
-  }
+.list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus {
+  color: #141619;
+  background-color: #bebebf;
 }
-
-.nav {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  padding-left: 0;
-  margin-bottom: 0;
-  list-style: none;
+.list-group-item-dark.list-group-item-action.active {
+  color: #fff;
+  background-color: #141619;
+  border-color: #141619;
 }
 
-.nav-link {
-  display: block;
-  padding: 0.5rem 1rem;
+.btn-close {
+  box-sizing: content-box;
+  width: 1em;
+  height: 1em;
+  padding: 0.25em 0.25em;
+  color: #000;
+  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
+  border: 0;
+  border-radius: 0.25rem;
+  opacity: 0.5;
 }
-
-.nav-link:hover, .nav-link:focus {
+.btn-close:hover {
+  color: #000;
   text-decoration: none;
+  opacity: 0.75;
 }
-
-.nav-link.disabled {
-  color: #6c757d;
+.btn-close:focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+  opacity: 1;
+}
+.btn-close:disabled, .btn-close.disabled {
   pointer-events: none;
-  cursor: default;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  opacity: 0.25;
 }
 
-.nav-tabs {
-  border-bottom: 1px solid #dee2e6;
+.btn-close-white {
+  filter: invert(1) grayscale(100%) brightness(200%);
 }
 
-.nav-tabs .nav-item {
-  margin-bottom: -1px;
+.toast {
+  width: 350px;
+  max-width: 100%;
+  font-size: 0.875rem;
+  pointer-events: auto;
+  background-color: rgba(255, 255, 255, 0.85);
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  border-radius: 0.25rem;
 }
-
-.nav-tabs .nav-link {
-  border: 1px solid transparent;
-  border-top-left-radius: 0.25rem;
-  border-top-right-radius: 0.25rem;
+.toast:not(.showing):not(.show) {
+  opacity: 0;
+}
+.toast.hide {
+  display: none;
 }
 
-.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
-  border-color: #e9ecef #e9ecef #dee2e6;
+.toast-container {
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  max-width: 100%;
+  pointer-events: none;
+}
+.toast-container > :not(:last-child) {
+  margin-bottom: 0.75rem;
 }
 
-.nav-tabs .nav-link.disabled {
+.toast-header {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
   color: #6c757d;
-  background-color: transparent;
-  border-color: transparent;
+  background-color: rgba(255, 255, 255, 0.85);
+  background-clip: padding-box;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  border-top-left-radius: calc(0.25rem - 1px);
+  border-top-right-radius: calc(0.25rem - 1px);
 }
-
-.nav-tabs .nav-link.active,
-.nav-tabs .nav-item.show .nav-link {
-  color: #495057;
-  background-color: #fff;
-  border-color: #dee2e6 #dee2e6 #fff;
+.toast-header .btn-close {
+  margin-right: -0.375rem;
+  margin-left: 0.75rem;
 }
 
-.nav-tabs .dropdown-menu {
-  margin-top: -1px;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+.toast-body {
+  padding: 0.75rem;
+  word-wrap: break-word;
 }
 
-.nav-pills .nav-link {
-  border-radius: 0.25rem;
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1060;
+  display: none;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: 0;
 }
 
-.nav-pills .nav-link.active,
-.nav-pills .show > .nav-link {
-  color: #fff;
-  background-color: #007bff;
+.modal-dialog {
+  position: relative;
+  width: auto;
+  margin: 0.5rem;
+  pointer-events: none;
 }
-
-.nav-fill > .nav-link,
-.nav-fill .nav-item {
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  text-align: center;
+.modal.fade .modal-dialog {
+  transition: transform 0.3s ease-out;
+  transform: translate(0, -50px);
 }
-
-.nav-justified > .nav-link,
-.nav-justified .nav-item {
-  -ms-flex-preferred-size: 0;
-  flex-basis: 0;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  text-align: center;
+@media (prefers-reduced-motion: reduce) {
+  .modal.fade .modal-dialog {
+    transition: none;
+  }
 }
-
-.tab-content > .tab-pane {
-  display: none;
+.modal.show .modal-dialog {
+  transform: none;
+}
+.modal.modal-static .modal-dialog {
+  transform: scale(1.02);
 }
 
-.tab-content > .active {
-  display: block;
+.modal-dialog-scrollable {
+  height: calc(100% - 1rem);
+}
+.modal-dialog-scrollable .modal-content {
+  max-height: 100%;
+  overflow: hidden;
+}
+.modal-dialog-scrollable .modal-body {
+  overflow-y: auto;
 }
 
-.navbar {
-  position: relative;
-  display: -ms-flexbox;
+.modal-dialog-centered {
   display: flex;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -ms-flex-align: center;
   align-items: center;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  padding: 0.5rem 1rem;
+  min-height: calc(100% - 1rem);
 }
 
-.navbar .container,
-.navbar .container-fluid, .navbar .container-sm, .navbar .container-md, .navbar .container-lg, .navbar .container-xl {
-  display: -ms-flexbox;
+.modal-content {
+  position: relative;
   display: flex;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -ms-flex-align: center;
-  align-items: center;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
+  flex-direction: column;
+  width: 100%;
+  pointer-events: auto;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 0.3rem;
+  outline: 0;
 }
 
-.navbar-brand {
-  display: inline-block;
-  padding-top: 0.3125rem;
-  padding-bottom: 0.3125rem;
-  margin-right: 1rem;
-  font-size: 1.25rem;
-  line-height: inherit;
-  white-space: nowrap;
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1040;
+  width: 100vw;
+  height: 100vh;
+  background-color: #000;
 }
-
-.navbar-brand:hover, .navbar-brand:focus {
-  text-decoration: none;
+.modal-backdrop.fade {
+  opacity: 0;
+}
+.modal-backdrop.show {
+  opacity: 0.5;
 }
 
-.navbar-nav {
-  display: -ms-flexbox;
+.modal-header {
   display: flex;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-left: 0;
-  margin-bottom: 0;
-  list-style: none;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1rem;
+  border-bottom: 1px solid #dee2e6;
+  border-top-left-radius: calc(0.3rem - 1px);
+  border-top-right-radius: calc(0.3rem - 1px);
 }
-
-.navbar-nav .nav-link {
-  padding-right: 0;
-  padding-left: 0;
+.modal-header .btn-close {
+  padding: 0.5rem 0.5rem;
+  margin: -0.5rem -0.5rem -0.5rem auto;
 }
 
-.navbar-nav .dropdown-menu {
-  position: static;
-  float: none;
+.modal-title {
+  margin-bottom: 0;
+  line-height: 1.5;
 }
 
-.navbar-text {
-  display: inline-block;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+.modal-body {
+  position: relative;
+  flex: 1 1 auto;
+  padding: 1rem;
 }
 
-.navbar-collapse {
-  -ms-flex-preferred-size: 100%;
-  flex-basis: 100%;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  -ms-flex-align: center;
+.modal-footer {
+  display: flex;
+  flex-wrap: wrap;
+  flex-shrink: 0;
   align-items: center;
+  justify-content: flex-end;
+  padding: 0.75rem;
+  border-top: 1px solid #dee2e6;
+  border-bottom-right-radius: calc(0.3rem - 1px);
+  border-bottom-left-radius: calc(0.3rem - 1px);
 }
-
-.navbar-toggler {
-  padding: 0.25rem 0.75rem;
-  font-size: 1.25rem;
-  line-height: 1;
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-radius: 0.25rem;
+.modal-footer > * {
+  margin: 0.25rem;
 }
 
-.navbar-toggler:hover, .navbar-toggler:focus {
-  text-decoration: none;
-}
+@media (min-width: 576px) {
+  .modal-dialog {
+    max-width: 500px;
+    margin: 1.75rem auto;
+  }
 
-.navbar-toggler-icon {
-  display: inline-block;
-  width: 1.5em;
-  height: 1.5em;
-  vertical-align: middle;
-  content: "";
-  background: no-repeat center center;
-  background-size: 100% 100%;
-}
+  .modal-dialog-scrollable {
+    height: calc(100% - 3.5rem);
+  }
 
-@media (max-width: 575.98px) {
-  .navbar-expand-sm > .container,
-  .navbar-expand-sm > .container-fluid, .navbar-expand-sm > .container-sm, .navbar-expand-sm > .container-md, .navbar-expand-sm > .container-lg, .navbar-expand-sm > .container-xl {
-    padding-right: 0;
-    padding-left: 0;
+  .modal-dialog-centered {
+    min-height: calc(100% - 3.5rem);
   }
-}
 
-@media (min-width: 576px) {
-  .navbar-expand-sm {
-    -ms-flex-flow: row nowrap;
-    flex-flow: row nowrap;
-    -ms-flex-pack: start;
-    justify-content: flex-start;
+  .modal-sm {
+    max-width: 300px;
   }
-  .navbar-expand-sm .navbar-nav {
-    -ms-flex-direction: row;
-    flex-direction: row;
+}
+@media (min-width: 992px) {
+  .modal-lg,
+.modal-xl {
+    max-width: 800px;
   }
-  .navbar-expand-sm .navbar-nav .dropdown-menu {
-    position: absolute;
+}
+@media (min-width: 1200px) {
+  .modal-xl {
+    max-width: 1140px;
   }
-  .navbar-expand-sm .navbar-nav .nav-link {
-    padding-right: 0.5rem;
-    padding-left: 0.5rem;
+}
+.modal-fullscreen {
+  width: 100vw;
+  max-width: none;
+  height: 100%;
+  margin: 0;
+}
+.modal-fullscreen .modal-content {
+  height: 100%;
+  border: 0;
+  border-radius: 0;
+}
+.modal-fullscreen .modal-header {
+  border-radius: 0;
+}
+.modal-fullscreen .modal-body {
+  overflow-y: auto;
+}
+.modal-fullscreen .modal-footer {
+  border-radius: 0;
+}
+
+@media (max-width: 575.98px) {
+  .modal-fullscreen-sm-down {
+    width: 100vw;
+    max-width: none;
+    height: 100%;
+    margin: 0;
+  }
+  .modal-fullscreen-sm-down .modal-content {
+    height: 100%;
+    border: 0;
+    border-radius: 0;
   }
-  .navbar-expand-sm > .container,
-  .navbar-expand-sm > .container-fluid, .navbar-expand-sm > .container-sm, .navbar-expand-sm > .container-md, .navbar-expand-sm > .container-lg, .navbar-expand-sm > .container-xl {
-    -ms-flex-wrap: nowrap;
-    flex-wrap: nowrap;
+  .modal-fullscreen-sm-down .modal-header {
+    border-radius: 0;
   }
-  .navbar-expand-sm .navbar-collapse {
-    display: -ms-flexbox !important;
-    display: flex !important;
-    -ms-flex-preferred-size: auto;
-    flex-basis: auto;
+  .modal-fullscreen-sm-down .modal-body {
+    overflow-y: auto;
   }
-  .navbar-expand-sm .navbar-toggler {
-    display: none;
+  .modal-fullscreen-sm-down .modal-footer {
+    border-radius: 0;
   }
 }
-
 @media (max-width: 767.98px) {
-  .navbar-expand-md > .container,
-  .navbar-expand-md > .container-fluid, .navbar-expand-md > .container-sm, .navbar-expand-md > .container-md, .navbar-expand-md > .container-lg, .navbar-expand-md > .container-xl {
-    padding-right: 0;
-    padding-left: 0;
+  .modal-fullscreen-md-down {
+    width: 100vw;
+    max-width: none;
+    height: 100%;
+    margin: 0;
+  }
+  .modal-fullscreen-md-down .modal-content {
+    height: 100%;
+    border: 0;
+    border-radius: 0;
   }
-}
-
-@media (min-width: 768px) {
-  .navbar-expand-md {
-    -ms-flex-flow: row nowrap;
-    flex-flow: row nowrap;
-    -ms-flex-pack: start;
-    justify-content: flex-start;
+  .modal-fullscreen-md-down .modal-header {
+    border-radius: 0;
   }
-  .navbar-expand-md .navbar-nav {
-    -ms-flex-direction: row;
-    flex-direction: row;
+  .modal-fullscreen-md-down .modal-body {
+    overflow-y: auto;
   }
-  .navbar-expand-md .navbar-nav .dropdown-menu {
-    position: absolute;
+  .modal-fullscreen-md-down .modal-footer {
+    border-radius: 0;
   }
-  .navbar-expand-md .navbar-nav .nav-link {
-    padding-right: 0.5rem;
-    padding-left: 0.5rem;
+}
+@media (max-width: 991.98px) {
+  .modal-fullscreen-lg-down {
+    width: 100vw;
+    max-width: none;
+    height: 100%;
+    margin: 0;
+  }
+  .modal-fullscreen-lg-down .modal-content {
+    height: 100%;
+    border: 0;
+    border-radius: 0;
   }
-  .navbar-expand-md > .container,
-  .navbar-expand-md > .container-fluid, .navbar-expand-md > .container-sm, .navbar-expand-md > .container-md, .navbar-expand-md > .container-lg, .navbar-expand-md > .container-xl {
-    -ms-flex-wrap: nowrap;
-    flex-wrap: nowrap;
+  .modal-fullscreen-lg-down .modal-header {
+    border-radius: 0;
   }
-  .navbar-expand-md .navbar-collapse {
-    display: -ms-flexbox !important;
-    display: flex !important;
-    -ms-flex-preferred-size: auto;
-    flex-basis: auto;
+  .modal-fullscreen-lg-down .modal-body {
+    overflow-y: auto;
   }
-  .navbar-expand-md .navbar-toggler {
-    display: none;
+  .modal-fullscreen-lg-down .modal-footer {
+    border-radius: 0;
   }
 }
-
-@media (max-width: 991.98px) {
-  .navbar-expand-lg > .container,
-  .navbar-expand-lg > .container-fluid, .navbar-expand-lg > .container-sm, .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-xl {
-    padding-right: 0;
-    padding-left: 0;
+@media (max-width: 1199.98px) {
+  .modal-fullscreen-xl-down {
+    width: 100vw;
+    max-width: none;
+    height: 100%;
+    margin: 0;
+  }
+  .modal-fullscreen-xl-down .modal-content {
+    height: 100%;
+    border: 0;
+    border-radius: 0;
   }
-}
-
-@media (min-width: 992px) {
-  .navbar-expand-lg {
-    -ms-flex-flow: row nowrap;
-    flex-flow: row nowrap;
-    -ms-flex-pack: start;
-    justify-content: flex-start;
+  .modal-fullscreen-xl-down .modal-header {
+    border-radius: 0;
   }
-  .navbar-expand-lg .navbar-nav {
-    -ms-flex-direction: row;
-    flex-direction: row;
+  .modal-fullscreen-xl-down .modal-body {
+    overflow-y: auto;
   }
-  .navbar-expand-lg .navbar-nav .dropdown-menu {
-    position: absolute;
+  .modal-fullscreen-xl-down .modal-footer {
+    border-radius: 0;
   }
-  .navbar-expand-lg .navbar-nav .nav-link {
-    padding-right: 0.5rem;
-    padding-left: 0.5rem;
+}
+@media (max-width: 1399.98px) {
+  .modal-fullscreen-xxl-down {
+    width: 100vw;
+    max-width: none;
+    height: 100%;
+    margin: 0;
   }
-  .navbar-expand-lg > .container,
-  .navbar-expand-lg > .container-fluid, .navbar-expand-lg > .container-sm, .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-xl {
-    -ms-flex-wrap: nowrap;
-    flex-wrap: nowrap;
+  .modal-fullscreen-xxl-down .modal-content {
+    height: 100%;
+    border: 0;
+    border-radius: 0;
   }
-  .navbar-expand-lg .navbar-collapse {
-    display: -ms-flexbox !important;
-    display: flex !important;
-    -ms-flex-preferred-size: auto;
-    flex-basis: auto;
+  .modal-fullscreen-xxl-down .modal-header {
+    border-radius: 0;
   }
-  .navbar-expand-lg .navbar-toggler {
-    display: none;
+  .modal-fullscreen-xxl-down .modal-body {
+    overflow-y: auto;
   }
+  .modal-fullscreen-xxl-down .modal-footer {
+    border-radius: 0;
+  }
+}
+.tooltip {
+  position: absolute;
+  z-index: 1080;
+  display: block;
+  margin: 0;
+  font-family: var(--bs-font-sans-serif);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.5;
+  text-align: left;
+  text-align: start;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  letter-spacing: normal;
+  word-break: normal;
+  word-spacing: normal;
+  white-space: normal;
+  line-break: auto;
+  font-size: 0.875rem;
+  word-wrap: break-word;
+  opacity: 0;
+}
+.tooltip.show {
+  opacity: 0.9;
+}
+.tooltip .tooltip-arrow {
+  position: absolute;
+  display: block;
+  width: 0.8rem;
+  height: 0.4rem;
+}
+.tooltip .tooltip-arrow::before {
+  position: absolute;
+  content: "";
+  border-color: transparent;
+  border-style: solid;
 }
 
-@media (max-width: 1199.98px) {
-  .navbar-expand-xl > .container,
-  .navbar-expand-xl > .container-fluid, .navbar-expand-xl > .container-sm, .navbar-expand-xl > .container-md, .navbar-expand-xl > .container-lg, .navbar-expand-xl > .container-xl {
-    padding-right: 0;
-    padding-left: 0;
-  }
+.bs-tooltip-top, .bs-tooltip-auto[data-popper-placement^=top] {
+  padding: 0.4rem 0;
+}
+.bs-tooltip-top .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow {
+  bottom: 0;
+}
+.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
+  top: -1px;
+  border-width: 0.4rem 0.4rem 0;
+  border-top-color: #000;
 }
 
-@media (min-width: 1200px) {
-  .navbar-expand-xl {
-    -ms-flex-flow: row nowrap;
-    flex-flow: row nowrap;
-    -ms-flex-pack: start;
-    justify-content: flex-start;
-  }
-  .navbar-expand-xl .navbar-nav {
-    -ms-flex-direction: row;
-    flex-direction: row;
-  }
-  .navbar-expand-xl .navbar-nav .dropdown-menu {
-    position: absolute;
-  }
-  .navbar-expand-xl .navbar-nav .nav-link {
-    padding-right: 0.5rem;
-    padding-left: 0.5rem;
-  }
-  .navbar-expand-xl > .container,
-  .navbar-expand-xl > .container-fluid, .navbar-expand-xl > .container-sm, .navbar-expand-xl > .container-md, .navbar-expand-xl > .container-lg, .navbar-expand-xl > .container-xl {
-    -ms-flex-wrap: nowrap;
-    flex-wrap: nowrap;
-  }
-  .navbar-expand-xl .navbar-collapse {
-    display: -ms-flexbox !important;
-    display: flex !important;
-    -ms-flex-preferred-size: auto;
-    flex-basis: auto;
-  }
-  .navbar-expand-xl .navbar-toggler {
-    display: none;
-  }
+.bs-tooltip-end, .bs-tooltip-auto[data-popper-placement^=right] {
+  padding: 0 0.4rem;
+}
+.bs-tooltip-end .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow {
+  left: 0;
+  width: 0.4rem;
+  height: 0.8rem;
+}
+.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
+  right: -1px;
+  border-width: 0.4rem 0.4rem 0.4rem 0;
+  border-right-color: #000;
 }
 
-.navbar-expand {
-  -ms-flex-flow: row nowrap;
-  flex-flow: row nowrap;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
+.bs-tooltip-bottom, .bs-tooltip-auto[data-popper-placement^=bottom] {
+  padding: 0.4rem 0;
+}
+.bs-tooltip-bottom .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow {
+  top: 0;
+}
+.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
+  bottom: -1px;
+  border-width: 0 0.4rem 0.4rem;
+  border-bottom-color: #000;
 }
 
-.navbar-expand > .container,
-.navbar-expand > .container-fluid, .navbar-expand > .container-sm, .navbar-expand > .container-md, .navbar-expand > .container-lg, .navbar-expand > .container-xl {
-  padding-right: 0;
-  padding-left: 0;
+.bs-tooltip-start, .bs-tooltip-auto[data-popper-placement^=left] {
+  padding: 0 0.4rem;
+}
+.bs-tooltip-start .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow {
+  right: 0;
+  width: 0.4rem;
+  height: 0.8rem;
+}
+.bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
+  left: -1px;
+  border-width: 0.4rem 0 0.4rem 0.4rem;
+  border-left-color: #000;
 }
 
-.navbar-expand .navbar-nav {
-  -ms-flex-direction: row;
-  flex-direction: row;
+.tooltip-inner {
+  max-width: 200px;
+  padding: 0.25rem 0.5rem;
+  color: #fff;
+  text-align: center;
+  background-color: #000;
+  border-radius: 0.25rem;
 }
 
-.navbar-expand .navbar-nav .dropdown-menu {
+.popover {
+  position: absolute;
+  top: 0;
+  left: 0 /* rtl:ignore */;
+  z-index: 1070;
+  display: block;
+  max-width: 276px;
+  font-family: var(--bs-font-sans-serif);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.5;
+  text-align: left;
+  text-align: start;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  letter-spacing: normal;
+  word-break: normal;
+  word-spacing: normal;
+  white-space: normal;
+  line-break: auto;
+  font-size: 0.875rem;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 0.3rem;
+}
+.popover .popover-arrow {
+  position: absolute;
+  display: block;
+  width: 1rem;
+  height: 0.5rem;
+}
+.popover .popover-arrow::before, .popover .popover-arrow::after {
   position: absolute;
+  display: block;
+  content: "";
+  border-color: transparent;
+  border-style: solid;
 }
 
-.navbar-expand .navbar-nav .nav-link {
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
+.bs-popover-top > .popover-arrow, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow {
+  bottom: calc(-0.5rem - 1px);
+}
+.bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before {
+  bottom: 0;
+  border-width: 0.5rem 0.5rem 0;
+  border-top-color: rgba(0, 0, 0, 0.25);
+}
+.bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after {
+  bottom: 1px;
+  border-width: 0.5rem 0.5rem 0;
+  border-top-color: #fff;
 }
 
-.navbar-expand > .container,
-.navbar-expand > .container-fluid, .navbar-expand > .container-sm, .navbar-expand > .container-md, .navbar-expand > .container-lg, .navbar-expand > .container-xl {
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
+.bs-popover-end > .popover-arrow, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow {
+  left: calc(-0.5rem - 1px);
+  width: 0.5rem;
+  height: 1rem;
+}
+.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before {
+  left: 0;
+  border-width: 0.5rem 0.5rem 0.5rem 0;
+  border-right-color: rgba(0, 0, 0, 0.25);
+}
+.bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after {
+  left: 1px;
+  border-width: 0.5rem 0.5rem 0.5rem 0;
+  border-right-color: #fff;
+}
+
+.bs-popover-bottom > .popover-arrow, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow {
+  top: calc(-0.5rem - 1px);
+}
+.bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before {
+  top: 0;
+  border-width: 0 0.5rem 0.5rem 0.5rem;
+  border-bottom-color: rgba(0, 0, 0, 0.25);
+}
+.bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after {
+  top: 1px;
+  border-width: 0 0.5rem 0.5rem 0.5rem;
+  border-bottom-color: #fff;
+}
+.bs-popover-bottom .popover-header::before, .bs-popover-auto[data-popper-placement^=bottom] .popover-header::before {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  display: block;
+  width: 1rem;
+  margin-left: -0.5rem;
+  content: "";
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.bs-popover-start > .popover-arrow, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow {
+  right: calc(-0.5rem - 1px);
+  width: 0.5rem;
+  height: 1rem;
+}
+.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before {
+  right: 0;
+  border-width: 0.5rem 0 0.5rem 0.5rem;
+  border-left-color: rgba(0, 0, 0, 0.25);
+}
+.bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after {
+  right: 1px;
+  border-width: 0.5rem 0 0.5rem 0.5rem;
+  border-left-color: #fff;
 }
 
-.navbar-expand .navbar-collapse {
-  display: -ms-flexbox !important;
-  display: flex !important;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
+.popover-header {
+  padding: 0.5rem 1rem;
+  margin-bottom: 0;
+  font-size: 1rem;
+  background-color: #f0f0f0;
+  border-bottom: 1px solid #d8d8d8;
+  border-top-left-radius: calc(0.3rem - 1px);
+  border-top-right-radius: calc(0.3rem - 1px);
 }
-
-.navbar-expand .navbar-toggler {
+.popover-header:empty {
   display: none;
 }
 
-.navbar-light .navbar-brand {
-  color: rgba(0, 0, 0, 0.9);
+.popover-body {
+  padding: 1rem 1rem;
+  color: #212529;
 }
 
-.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
-  color: rgba(0, 0, 0, 0.9);
+.carousel {
+  position: relative;
 }
 
-.navbar-light .navbar-nav .nav-link {
-  color: rgba(0, 0, 0, 0.5);
+.carousel.pointer-event {
+  touch-action: pan-y;
 }
 
-.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
-  color: rgba(0, 0, 0, 0.7);
+.carousel-inner {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
 }
-
-.navbar-light .navbar-nav .nav-link.disabled {
-  color: rgba(0, 0, 0, 0.3);
+.carousel-inner::after {
+  display: block;
+  clear: both;
+  content: "";
 }
 
-.navbar-light .navbar-nav .show > .nav-link,
-.navbar-light .navbar-nav .active > .nav-link,
-.navbar-light .navbar-nav .nav-link.show,
-.navbar-light .navbar-nav .nav-link.active {
-  color: rgba(0, 0, 0, 0.9);
+.carousel-item {
+  position: relative;
+  display: none;
+  float: left;
+  width: 100%;
+  margin-right: -100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  transition: transform 0.6s ease-in-out;
 }
-
-.navbar-light .navbar-toggler {
-  color: rgba(0, 0, 0, 0.5);
-  border-color: rgba(0, 0, 0, 0.1);
+@media (prefers-reduced-motion: reduce) {
+  .carousel-item {
+    transition: none;
+  }
 }
 
-.navbar-light .navbar-toggler-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+.carousel-item.active,
+.carousel-item-next,
+.carousel-item-prev {
+  display: block;
 }
 
-.navbar-light .navbar-text {
-  color: rgba(0, 0, 0, 0.5);
+/* rtl:begin:ignore */
+.carousel-item-next:not(.carousel-item-start),
+.active.carousel-item-end {
+  transform: translateX(100%);
 }
 
-.navbar-light .navbar-text a {
-  color: rgba(0, 0, 0, 0.9);
+.carousel-item-prev:not(.carousel-item-end),
+.active.carousel-item-start {
+  transform: translateX(-100%);
 }
 
-.navbar-light .navbar-text a:hover, .navbar-light .navbar-text a:focus {
-  color: rgba(0, 0, 0, 0.9);
+/* rtl:end:ignore */
+.carousel-fade .carousel-item {
+  opacity: 0;
+  transition-property: opacity;
+  transform: none;
 }
-
-.navbar-dark .navbar-brand {
-  color: #fff;
+.carousel-fade .carousel-item.active,
+.carousel-fade .carousel-item-next.carousel-item-start,
+.carousel-fade .carousel-item-prev.carousel-item-end {
+  z-index: 1;
+  opacity: 1;
 }
-
-.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
-  color: #fff;
+.carousel-fade .active.carousel-item-start,
+.carousel-fade .active.carousel-item-end {
+  z-index: 0;
+  opacity: 0;
+  transition: opacity 0s 0.6s;
 }
-
-.navbar-dark .navbar-nav .nav-link {
-  color: rgba(255, 255, 255, 0.5);
+@media (prefers-reduced-motion: reduce) {
+  .carousel-fade .active.carousel-item-start,
+.carousel-fade .active.carousel-item-end {
+    transition: none;
+  }
 }
 
-.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
-  color: rgba(255, 255, 255, 0.75);
+.carousel-control-prev,
+.carousel-control-next {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 15%;
+  padding: 0;
+  color: #fff;
+  text-align: center;
+  background: none;
+  border: 0;
+  opacity: 0.5;
+  transition: opacity 0.15s ease;
 }
-
-.navbar-dark .navbar-nav .nav-link.disabled {
-  color: rgba(255, 255, 255, 0.25);
+@media (prefers-reduced-motion: reduce) {
+  .carousel-control-prev,
+.carousel-control-next {
+    transition: none;
+  }
 }
-
-.navbar-dark .navbar-nav .show > .nav-link,
-.navbar-dark .navbar-nav .active > .nav-link,
-.navbar-dark .navbar-nav .nav-link.show,
-.navbar-dark .navbar-nav .nav-link.active {
+.carousel-control-prev:hover, .carousel-control-prev:focus,
+.carousel-control-next:hover,
+.carousel-control-next:focus {
   color: #fff;
+  text-decoration: none;
+  outline: 0;
+  opacity: 0.9;
 }
 
-.navbar-dark .navbar-toggler {
-  color: rgba(255, 255, 255, 0.5);
-  border-color: rgba(255, 255, 255, 0.1);
+.carousel-control-prev {
+  left: 0;
 }
 
-.navbar-dark .navbar-toggler-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+.carousel-control-next {
+  right: 0;
 }
 
-.navbar-dark .navbar-text {
-  color: rgba(255, 255, 255, 0.5);
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  background-repeat: no-repeat;
+  background-position: 50%;
+  background-size: 100% 100%;
 }
 
-.navbar-dark .navbar-text a {
-  color: #fff;
+/* rtl:options: {
+  "autoRename": true,
+  "stringMap":[ {
+    "name"    : "prev-next",
+    "search"  : "prev",
+    "replace" : "next"
+  } ]
+} */
+.carousel-control-prev-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
 }
 
-.navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus {
-  color: #fff;
+.carousel-control-next-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
 }
 
-.card {
-  position: relative;
-  display: -ms-flexbox;
+.carousel-indicators {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
   display: flex;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  min-width: 0;
-  word-wrap: break-word;
+  justify-content: center;
+  padding: 0;
+  margin-right: 15%;
+  margin-bottom: 1rem;
+  margin-left: 15%;
+  list-style: none;
+}
+.carousel-indicators [data-bs-target] {
+  box-sizing: content-box;
+  flex: 0 1 auto;
+  width: 30px;
+  height: 3px;
+  padding: 0;
+  margin-right: 3px;
+  margin-left: 3px;
+  text-indent: -999px;
+  cursor: pointer;
   background-color: #fff;
-  background-clip: border-box;
-  border: 1px solid rgba(0, 0, 0, 0.125);
-  border-radius: 0.25rem;
+  background-clip: padding-box;
+  border: 0;
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+  opacity: 0.5;
+  transition: opacity 0.6s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .carousel-indicators [data-bs-target] {
+    transition: none;
+  }
+}
+.carousel-indicators .active {
+  opacity: 1;
 }
 
-.card > hr {
-  margin-right: 0;
-  margin-left: 0;
+.carousel-caption {
+  position: absolute;
+  right: 15%;
+  bottom: 1.25rem;
+  left: 15%;
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+  color: #fff;
+  text-align: center;
 }
 
-.card > .list-group {
-  border-top: inherit;
-  border-bottom: inherit;
+.carousel-dark .carousel-control-prev-icon,
+.carousel-dark .carousel-control-next-icon {
+  filter: invert(1) grayscale(100);
+}
+.carousel-dark .carousel-indicators [data-bs-target] {
+  background-color: #000;
+}
+.carousel-dark .carousel-caption {
+  color: #000;
 }
 
-.card > .list-group:first-child {
-  border-top-width: 0;
-  border-top-left-radius: calc(0.25rem - 1px);
-  border-top-right-radius: calc(0.25rem - 1px);
+@-webkit-keyframes spinner-border {
+  to {
+    transform: rotate(360deg) /* rtl:ignore */;
+  }
 }
 
-.card > .list-group:last-child {
-  border-bottom-width: 0;
-  border-bottom-right-radius: calc(0.25rem - 1px);
-  border-bottom-left-radius: calc(0.25rem - 1px);
+@keyframes spinner-border {
+  to {
+    transform: rotate(360deg) /* rtl:ignore */;
+  }
+}
+.spinner-border {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  vertical-align: -0.125em;
+  border: 0.25em solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  -webkit-animation: 0.75s linear infinite spinner-border;
+  animation: 0.75s linear infinite spinner-border;
 }
 
-.card > .card-header + .list-group,
-.card > .list-group + .card-footer {
-  border-top: 0;
+.spinner-border-sm {
+  width: 1rem;
+  height: 1rem;
+  border-width: 0.2em;
 }
 
-.card-body {
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  min-height: 1px;
-  padding: 1.25rem;
+@-webkit-keyframes spinner-grow {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    opacity: 1;
+    transform: none;
+  }
 }
 
-.card-title {
-  margin-bottom: 0.75rem;
+@keyframes spinner-grow {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    opacity: 1;
+    transform: none;
+  }
+}
+.spinner-grow {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  vertical-align: -0.125em;
+  background-color: currentColor;
+  border-radius: 50%;
+  opacity: 0;
+  -webkit-animation: 0.75s linear infinite spinner-grow;
+  animation: 0.75s linear infinite spinner-grow;
 }
 
-.card-subtitle {
-  margin-top: -0.375rem;
-  margin-bottom: 0;
+.spinner-grow-sm {
+  width: 1rem;
+  height: 1rem;
 }
 
-.card-text:last-child {
-  margin-bottom: 0;
+@media (prefers-reduced-motion: reduce) {
+  .spinner-border,
+.spinner-grow {
+    -webkit-animation-duration: 1.5s;
+    animation-duration: 1.5s;
+  }
 }
-
-.card-link:hover {
-  text-decoration: none;
+.offcanvas {
+  position: fixed;
+  bottom: 0;
+  z-index: 1050;
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  visibility: hidden;
+  background-color: #fff;
+  background-clip: padding-box;
+  outline: 0;
+  transition: transform 0.3s ease-in-out;
 }
-
-.card-link + .card-link {
-  margin-left: 1.25rem;
+@media (prefers-reduced-motion: reduce) {
+  .offcanvas {
+    transition: none;
+  }
 }
 
-.card-header {
-  padding: 0.75rem 1.25rem;
-  margin-bottom: 0;
-  background-color: rgba(0, 0, 0, 0.03);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+.offcanvas-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1rem;
 }
-
-.card-header:first-child {
-  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
+.offcanvas-header .btn-close {
+  padding: 0.5rem 0.5rem;
+  margin: -0.5rem -0.5rem -0.5rem auto;
 }
 
-.card-footer {
-  padding: 0.75rem 1.25rem;
-  background-color: rgba(0, 0, 0, 0.03);
-  border-top: 1px solid rgba(0, 0, 0, 0.125);
+.offcanvas-title {
+  margin-bottom: 0;
+  line-height: 1.5;
 }
 
-.card-footer:last-child {
-  border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
+.offcanvas-body {
+  flex-grow: 1;
+  padding: 1rem 1rem;
+  overflow-y: auto;
 }
 
-.card-header-tabs {
-  margin-right: -0.625rem;
-  margin-bottom: -0.75rem;
-  margin-left: -0.625rem;
-  border-bottom: 0;
+.offcanvas-start {
+  top: 0;
+  left: 0;
+  width: 400px;
+  border-right: 1px solid rgba(0, 0, 0, 0.2);
+  transform: translateX(-100%);
 }
 
-.card-header-pills {
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
+.offcanvas-end {
+  top: 0;
+  right: 0;
+  width: 400px;
+  border-left: 1px solid rgba(0, 0, 0, 0.2);
+  transform: translateX(100%);
 }
 
-.card-img-overlay {
-  position: absolute;
+.offcanvas-top {
   top: 0;
   right: 0;
-  bottom: 0;
   left: 0;
-  padding: 1.25rem;
-  border-radius: calc(0.25rem - 1px);
+  height: 30vh;
+  max-height: 100%;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  transform: translateY(-100%);
 }
 
-.card-img,
-.card-img-top,
-.card-img-bottom {
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  width: 100%;
+.offcanvas-bottom {
+  right: 0;
+  left: 0;
+  height: 30vh;
+  max-height: 100%;
+  border-top: 1px solid rgba(0, 0, 0, 0.2);
+  transform: translateY(100%);
 }
 
-.card-img,
-.card-img-top {
-  border-top-left-radius: calc(0.25rem - 1px);
-  border-top-right-radius: calc(0.25rem - 1px);
+.offcanvas.show {
+  transform: none;
 }
 
-.card-img,
-.card-img-bottom {
-  border-bottom-right-radius: calc(0.25rem - 1px);
-  border-bottom-left-radius: calc(0.25rem - 1px);
+.clearfix::after {
+  display: block;
+  clear: both;
+  content: "";
 }
 
-.card-deck .card {
-  margin-bottom: 15px;
+.link-primary {
+  color: #0d6efd;
 }
-
-@media (min-width: 576px) {
-  .card-deck {
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-flow: row wrap;
-    flex-flow: row wrap;
-    margin-right: -15px;
-    margin-left: -15px;
-  }
-  .card-deck .card {
-    -ms-flex: 1 0 0%;
-    flex: 1 0 0%;
-    margin-right: 15px;
-    margin-bottom: 0;
-    margin-left: 15px;
-  }
+.link-primary:hover, .link-primary:focus {
+  color: #0a58ca;
 }
 
-.card-group > .card {
-  margin-bottom: 15px;
+.link-secondary {
+  color: #6c757d;
 }
-
-@media (min-width: 576px) {
-  .card-group {
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-flow: row wrap;
-    flex-flow: row wrap;
-  }
-  .card-group > .card {
-    -ms-flex: 1 0 0%;
-    flex: 1 0 0%;
-    margin-bottom: 0;
-  }
-  .card-group > .card + .card {
-    margin-left: 0;
-    border-left: 0;
-  }
-  .card-group > .card:not(:last-child) {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-  .card-group > .card:not(:last-child) .card-img-top,
-  .card-group > .card:not(:last-child) .card-header {
-    border-top-right-radius: 0;
-  }
-  .card-group > .card:not(:last-child) .card-img-bottom,
-  .card-group > .card:not(:last-child) .card-footer {
-    border-bottom-right-radius: 0;
-  }
-  .card-group > .card:not(:first-child) {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-  .card-group > .card:not(:first-child) .card-img-top,
-  .card-group > .card:not(:first-child) .card-header {
-    border-top-left-radius: 0;
-  }
-  .card-group > .card:not(:first-child) .card-img-bottom,
-  .card-group > .card:not(:first-child) .card-footer {
-    border-bottom-left-radius: 0;
-  }
+.link-secondary:hover, .link-secondary:focus {
+  color: #565e64;
 }
 
-.card-columns .card {
-  margin-bottom: 0.75rem;
+.link-success {
+  color: #198754;
 }
-
-@media (min-width: 576px) {
-  .card-columns {
-    -webkit-column-count: 3;
-    -moz-column-count: 3;
-    column-count: 3;
-    -webkit-column-gap: 1.25rem;
-    -moz-column-gap: 1.25rem;
-    column-gap: 1.25rem;
-    orphans: 1;
-    widows: 1;
-  }
-  .card-columns .card {
-    display: inline-block;
-    width: 100%;
-  }
+.link-success:hover, .link-success:focus {
+  color: #146c43;
 }
 
-.accordion {
-  overflow-anchor: none;
+.link-info {
+  color: #0dcaf0;
 }
-
-.accordion > .card {
-  overflow: hidden;
+.link-info:hover, .link-info:focus {
+  color: #3dd5f3;
 }
 
-.accordion > .card:not(:last-of-type) {
-  border-bottom: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
+.link-warning {
+  color: #ffc107;
 }
-
-.accordion > .card:not(:first-of-type) {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+.link-warning:hover, .link-warning:focus {
+  color: #ffcd39;
 }
 
-.accordion > .card > .card-header {
-  border-radius: 0;
-  margin-bottom: -1px;
+.link-danger {
+  color: #dc3545;
 }
-
-.breadcrumb {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  padding: 0.75rem 1rem;
-  margin-bottom: 1rem;
-  list-style: none;
-  background-color: #e9ecef;
-  border-radius: 0.25rem;
+.link-danger:hover, .link-danger:focus {
+  color: #b02a37;
 }
 
-.breadcrumb-item {
-  display: -ms-flexbox;
-  display: flex;
+.link-light {
+  color: #f8f9fa;
 }
-
-.breadcrumb-item + .breadcrumb-item {
-  padding-left: 0.5rem;
+.link-light:hover, .link-light:focus {
+  color: #f9fafb;
 }
 
-.breadcrumb-item + .breadcrumb-item::before {
-  display: inline-block;
-  padding-right: 0.5rem;
-  color: #6c757d;
-  content: "/";
+.link-dark {
+  color: #212529;
 }
-
-.breadcrumb-item + .breadcrumb-item:hover::before {
-  text-decoration: underline;
+.link-dark:hover, .link-dark:focus {
+  color: #1a1e21;
 }
 
-.breadcrumb-item + .breadcrumb-item:hover::before {
-  text-decoration: none;
+.ratio {
+  position: relative;
+  width: 100%;
+}
+.ratio::before {
+  display: block;
+  padding-top: var(--bs-aspect-ratio);
+  content: "";
+}
+.ratio > * {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }
 
-.breadcrumb-item.active {
-  color: #6c757d;
+.ratio-1x1 {
+  --bs-aspect-ratio: 100%;
 }
 
-.pagination {
-  display: -ms-flexbox;
-  display: flex;
-  padding-left: 0;
-  list-style: none;
-  border-radius: 0.25rem;
+.ratio-4x3 {
+  --bs-aspect-ratio: calc(3 / 4 * 100%);
 }
 
-.page-link {
-  position: relative;
-  display: block;
-  padding: 0.5rem 0.75rem;
-  margin-left: -1px;
-  line-height: 1.25;
-  color: #007bff;
-  background-color: #fff;
-  border: 1px solid #dee2e6;
+.ratio-16x9 {
+  --bs-aspect-ratio: calc(9 / 16 * 100%);
 }
 
-.page-link:hover {
-  z-index: 2;
-  color: #0056b3;
-  text-decoration: none;
-  background-color: #e9ecef;
-  border-color: #dee2e6;
+.ratio-21x9 {
+  --bs-aspect-ratio: calc(9 / 21 * 100%);
 }
 
-.page-link:focus {
-  z-index: 3;
-  outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+.fixed-top {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1030;
 }
 
-.page-item:first-child .page-link {
-  margin-left: 0;
-  border-top-left-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
+.fixed-bottom {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1030;
 }
 
-.page-item:last-child .page-link {
-  border-top-right-radius: 0.25rem;
-  border-bottom-right-radius: 0.25rem;
+.sticky-top {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 1020;
 }
 
-.page-item.active .page-link {
-  z-index: 3;
-  color: #fff;
-  background-color: #007bff;
-  border-color: #007bff;
+@media (min-width: 576px) {
+  .sticky-sm-top {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+}
+@media (min-width: 768px) {
+  .sticky-md-top {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+}
+@media (min-width: 992px) {
+  .sticky-lg-top {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+}
+@media (min-width: 1200px) {
+  .sticky-xl-top {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+}
+@media (min-width: 1400px) {
+  .sticky-xxl-top {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+}
+.visually-hidden,
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
 }
 
-.page-item.disabled .page-link {
-  color: #6c757d;
-  pointer-events: none;
-  cursor: auto;
-  background-color: #fff;
-  border-color: #dee2e6;
+.stretched-link::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  content: "";
 }
 
-.pagination-lg .page-link {
-  padding: 0.75rem 1.5rem;
-  font-size: 1.25rem;
-  line-height: 1.5;
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.pagination-lg .page-item:first-child .page-link {
-  border-top-left-radius: 0.3rem;
-  border-bottom-left-radius: 0.3rem;
+.align-baseline {
+  vertical-align: baseline !important;
 }
 
-.pagination-lg .page-item:last-child .page-link {
-  border-top-right-radius: 0.3rem;
-  border-bottom-right-radius: 0.3rem;
+.align-top {
+  vertical-align: top !important;
 }
 
-.pagination-sm .page-link {
-  padding: 0.25rem 0.5rem;
-  font-size: 0.875rem;
-  line-height: 1.5;
+.align-middle {
+  vertical-align: middle !important;
 }
 
-.pagination-sm .page-item:first-child .page-link {
-  border-top-left-radius: 0.2rem;
-  border-bottom-left-radius: 0.2rem;
+.align-bottom {
+  vertical-align: bottom !important;
 }
 
-.pagination-sm .page-item:last-child .page-link {
-  border-top-right-radius: 0.2rem;
-  border-bottom-right-radius: 0.2rem;
+.align-text-bottom {
+  vertical-align: text-bottom !important;
 }
 
-.badge {
-  display: inline-block;
-  padding: 0.25em 0.4em;
-  font-size: 75%;
-  font-weight: 700;
-  line-height: 1;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: baseline;
-  border-radius: 0.25rem;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+.align-text-top {
+  vertical-align: text-top !important;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .badge {
-    transition: none;
-  }
+.float-start {
+  float: left !important;
 }
 
-a.badge:hover, a.badge:focus {
-  text-decoration: none;
+.float-end {
+  float: right !important;
 }
 
-.badge:empty {
-  display: none;
+.float-none {
+  float: none !important;
 }
 
-.btn .badge {
-  position: relative;
-  top: -1px;
+.overflow-auto {
+  overflow: auto !important;
 }
 
-.badge-pill {
-  padding-right: 0.6em;
-  padding-left: 0.6em;
-  border-radius: 10rem;
+.overflow-hidden {
+  overflow: hidden !important;
 }
 
-.badge-primary {
-  color: #fff;
-  background-color: #007bff;
+.overflow-visible {
+  overflow: visible !important;
 }
 
-a.badge-primary:hover, a.badge-primary:focus {
-  color: #fff;
-  background-color: #0062cc;
+.overflow-scroll {
+  overflow: scroll !important;
 }
 
-a.badge-primary:focus, a.badge-primary.focus {
-  outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
+.d-inline {
+  display: inline !important;
 }
 
-.badge-secondary {
-  color: #fff;
-  background-color: #6c757d;
+.d-inline-block {
+  display: inline-block !important;
 }
 
-a.badge-secondary:hover, a.badge-secondary:focus {
-  color: #fff;
-  background-color: #545b62;
+.d-block {
+  display: block !important;
 }
 
-a.badge-secondary:focus, a.badge-secondary.focus {
-  outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
+.d-grid {
+  display: grid !important;
 }
 
-.badge-success {
-  color: #fff;
-  background-color: #28a745;
+.d-table {
+  display: table !important;
 }
 
-a.badge-success:hover, a.badge-success:focus {
-  color: #fff;
-  background-color: #1e7e34;
+.d-table-row {
+  display: table-row !important;
 }
 
-a.badge-success:focus, a.badge-success.focus {
-  outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
+.d-table-cell {
+  display: table-cell !important;
 }
 
-.badge-info {
-  color: #fff;
-  background-color: #17a2b8;
+.d-flex {
+  display: flex !important;
 }
 
-a.badge-info:hover, a.badge-info:focus {
-  color: #fff;
-  background-color: #117a8b;
+.d-inline-flex {
+  display: inline-flex !important;
 }
 
-a.badge-info:focus, a.badge-info.focus {
-  outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
+.d-none {
+  display: none !important;
 }
 
-.badge-warning {
-  color: #212529;
-  background-color: #ffc107;
+.shadow {
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
 }
 
-a.badge-warning:hover, a.badge-warning:focus {
-  color: #212529;
-  background-color: #d39e00;
+.shadow-sm {
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
 }
 
-a.badge-warning:focus, a.badge-warning.focus {
-  outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
+.shadow-lg {
+  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
 }
 
-.badge-danger {
-  color: #fff;
-  background-color: #dc3545;
+.shadow-none {
+  box-shadow: none !important;
 }
 
-a.badge-danger:hover, a.badge-danger:focus {
-  color: #fff;
-  background-color: #bd2130;
+.position-static {
+  position: static !important;
 }
 
-a.badge-danger:focus, a.badge-danger.focus {
-  outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
+.position-relative {
+  position: relative !important;
 }
 
-.badge-light {
-  color: #212529;
-  background-color: #f8f9fa;
+.position-absolute {
+  position: absolute !important;
 }
 
-a.badge-light:hover, a.badge-light:focus {
-  color: #212529;
-  background-color: #dae0e5;
+.position-fixed {
+  position: fixed !important;
 }
 
-a.badge-light:focus, a.badge-light.focus {
-  outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
+.position-sticky {
+  position: -webkit-sticky !important;
+  position: sticky !important;
 }
 
-.badge-dark {
-  color: #fff;
-  background-color: #343a40;
+.top-0 {
+  top: 0 !important;
 }
 
-a.badge-dark:hover, a.badge-dark:focus {
-  color: #fff;
-  background-color: #1d2124;
+.top-50 {
+  top: 50% !important;
 }
 
-a.badge-dark:focus, a.badge-dark.focus {
-  outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
+.top-100 {
+  top: 100% !important;
 }
 
-.jumbotron {
-  padding: 2rem 1rem;
-  margin-bottom: 2rem;
-  background-color: #e9ecef;
-  border-radius: 0.3rem;
+.bottom-0 {
+  bottom: 0 !important;
 }
 
-@media (min-width: 576px) {
-  .jumbotron {
-    padding: 4rem 2rem;
-  }
+.bottom-50 {
+  bottom: 50% !important;
 }
 
-.jumbotron-fluid {
-  padding-right: 0;
-  padding-left: 0;
-  border-radius: 0;
+.bottom-100 {
+  bottom: 100% !important;
 }
 
-.alert {
-  position: relative;
-  padding: 0.75rem 1.25rem;
-  margin-bottom: 1rem;
-  border: 1px solid transparent;
-  border-radius: 0.25rem;
+.start-0 {
+  left: 0 !important;
 }
 
-.alert-heading {
-  color: inherit;
+.start-50 {
+  left: 50% !important;
 }
 
-.alert-link {
-  font-weight: 700;
+.start-100 {
+  left: 100% !important;
 }
 
-.alert-dismissible {
-  padding-right: 4rem;
+.end-0 {
+  right: 0 !important;
 }
 
-.alert-dismissible .close {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 2;
-  padding: 0.75rem 1.25rem;
-  color: inherit;
+.end-50 {
+  right: 50% !important;
 }
 
-.alert-primary {
-  color: #004085;
-  background-color: #cce5ff;
-  border-color: #b8daff;
+.end-100 {
+  right: 100% !important;
 }
 
-.alert-primary hr {
-  border-top-color: #9fcdff;
+.translate-middle {
+  transform: translate(-50%, -50%) !important;
 }
 
-.alert-primary .alert-link {
-  color: #002752;
+.translate-middle-x {
+  transform: translateX(-50%) !important;
 }
 
-.alert-secondary {
-  color: #383d41;
-  background-color: #e2e3e5;
-  border-color: #d6d8db;
+.translate-middle-y {
+  transform: translateY(-50%) !important;
 }
 
-.alert-secondary hr {
-  border-top-color: #c8cbcf;
+.border {
+  border: 1px solid #dee2e6 !important;
 }
 
-.alert-secondary .alert-link {
-  color: #202326;
+.border-0 {
+  border: 0 !important;
 }
 
-.alert-success {
-  color: #155724;
-  background-color: #d4edda;
-  border-color: #c3e6cb;
+.border-top {
+  border-top: 1px solid #dee2e6 !important;
 }
 
-.alert-success hr {
-  border-top-color: #b1dfbb;
+.border-top-0 {
+  border-top: 0 !important;
 }
 
-.alert-success .alert-link {
-  color: #0b2e13;
+.border-end {
+  border-right: 1px solid #dee2e6 !important;
 }
 
-.alert-info {
-  color: #0c5460;
-  background-color: #d1ecf1;
-  border-color: #bee5eb;
+.border-end-0 {
+  border-right: 0 !important;
 }
 
-.alert-info hr {
-  border-top-color: #abdde5;
+.border-bottom {
+  border-bottom: 1px solid #dee2e6 !important;
 }
 
-.alert-info .alert-link {
-  color: #062c33;
+.border-bottom-0 {
+  border-bottom: 0 !important;
 }
 
-.alert-warning {
-  color: #856404;
-  background-color: #fff3cd;
-  border-color: #ffeeba;
+.border-start {
+  border-left: 1px solid #dee2e6 !important;
 }
 
-.alert-warning hr {
-  border-top-color: #ffe8a1;
+.border-start-0 {
+  border-left: 0 !important;
 }
 
-.alert-warning .alert-link {
-  color: #533f03;
+.border-primary {
+  border-color: #0d6efd !important;
 }
 
-.alert-danger {
-  color: #721c24;
-  background-color: #f8d7da;
-  border-color: #f5c6cb;
+.border-secondary {
+  border-color: #6c757d !important;
 }
 
-.alert-danger hr {
-  border-top-color: #f1b0b7;
+.border-success {
+  border-color: #198754 !important;
 }
 
-.alert-danger .alert-link {
-  color: #491217;
+.border-info {
+  border-color: #0dcaf0 !important;
 }
 
-.alert-light {
-  color: #818182;
-  background-color: #fefefe;
-  border-color: #fdfdfe;
+.border-warning {
+  border-color: #ffc107 !important;
 }
 
-.alert-light hr {
-  border-top-color: #ececf6;
+.border-danger {
+  border-color: #dc3545 !important;
 }
 
-.alert-light .alert-link {
-  color: #686868;
+.border-light {
+  border-color: #f8f9fa !important;
 }
 
-.alert-dark {
-  color: #1b1e21;
-  background-color: #d6d8d9;
-  border-color: #c6c8ca;
+.border-dark {
+  border-color: #212529 !important;
 }
 
-.alert-dark hr {
-  border-top-color: #b9bbbe;
+.border-white {
+  border-color: #fff !important;
 }
 
-.alert-dark .alert-link {
-  color: #040505;
+.border-1 {
+  border-width: 1px !important;
 }
 
-@-webkit-keyframes progress-bar-stripes {
-  from {
-    background-position: 1rem 0;
-  }
-  to {
-    background-position: 0 0;
-  }
+.border-2 {
+  border-width: 2px !important;
 }
 
-@keyframes progress-bar-stripes {
-  from {
-    background-position: 1rem 0;
-  }
-  to {
-    background-position: 0 0;
-  }
+.border-3 {
+  border-width: 3px !important;
 }
 
-.progress {
-  display: -ms-flexbox;
-  display: flex;
-  height: 1rem;
-  overflow: hidden;
-  line-height: 0;
-  font-size: 0.75rem;
-  background-color: #e9ecef;
-  border-radius: 0.25rem;
+.border-4 {
+  border-width: 4px !important;
 }
 
-.progress-bar {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -ms-flex-pack: center;
-  justify-content: center;
-  overflow: hidden;
-  color: #fff;
-  text-align: center;
-  white-space: nowrap;
-  background-color: #007bff;
-  transition: width 0.6s ease;
+.border-5 {
+  border-width: 5px !important;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .progress-bar {
-    transition: none;
-  }
+.w-25 {
+  width: 25% !important;
 }
 
-.progress-bar-striped {
-  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-  background-size: 1rem 1rem;
+.w-50 {
+  width: 50% !important;
 }
 
-.progress-bar-animated {
-  -webkit-animation: progress-bar-stripes 1s linear infinite;
-  animation: progress-bar-stripes 1s linear infinite;
+.w-75 {
+  width: 75% !important;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .progress-bar-animated {
-    -webkit-animation: none;
-    animation: none;
-  }
+.w-100 {
+  width: 100% !important;
 }
 
-.media {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-align: start;
-  align-items: flex-start;
+.w-auto {
+  width: auto !important;
 }
 
-.media-body {
-  -ms-flex: 1;
-  flex: 1;
+.mw-100 {
+  max-width: 100% !important;
 }
 
-.list-group {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-left: 0;
-  margin-bottom: 0;
-  border-radius: 0.25rem;
+.vw-100 {
+  width: 100vw !important;
 }
 
-.list-group-item-action {
-  width: 100%;
-  color: #495057;
-  text-align: inherit;
+.min-vw-100 {
+  min-width: 100vw !important;
 }
 
-.list-group-item-action:hover, .list-group-item-action:focus {
-  z-index: 1;
-  color: #495057;
-  text-decoration: none;
-  background-color: #f8f9fa;
+.h-25 {
+  height: 25% !important;
 }
 
-.list-group-item-action:active {
-  color: #212529;
-  background-color: #e9ecef;
+.h-50 {
+  height: 50% !important;
 }
 
-.list-group-item {
-  position: relative;
-  display: block;
-  padding: 0.75rem 1.25rem;
-  background-color: #fff;
-  border: 1px solid rgba(0, 0, 0, 0.125);
+.h-75 {
+  height: 75% !important;
 }
 
-.list-group-item:first-child {
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
+.h-100 {
+  height: 100% !important;
 }
 
-.list-group-item:last-child {
-  border-bottom-right-radius: inherit;
-  border-bottom-left-radius: inherit;
+.h-auto {
+  height: auto !important;
 }
 
-.list-group-item.disabled, .list-group-item:disabled {
-  color: #6c757d;
-  pointer-events: none;
-  background-color: #fff;
+.mh-100 {
+  max-height: 100% !important;
 }
 
-.list-group-item.active {
-  z-index: 2;
-  color: #fff;
-  background-color: #007bff;
-  border-color: #007bff;
+.vh-100 {
+  height: 100vh !important;
 }
 
-.list-group-item + .list-group-item {
-  border-top-width: 0;
+.min-vh-100 {
+  min-height: 100vh !important;
 }
 
-.list-group-item + .list-group-item.active {
-  margin-top: -1px;
-  border-top-width: 1px;
+.flex-fill {
+  flex: 1 1 auto !important;
 }
 
-.list-group-horizontal {
-  -ms-flex-direction: row;
-  flex-direction: row;
+.flex-row {
+  flex-direction: row !important;
 }
 
-.list-group-horizontal > .list-group-item:first-child {
-  border-bottom-left-radius: 0.25rem;
-  border-top-right-radius: 0;
+.flex-column {
+  flex-direction: column !important;
 }
 
-.list-group-horizontal > .list-group-item:last-child {
-  border-top-right-radius: 0.25rem;
-  border-bottom-left-radius: 0;
+.flex-row-reverse {
+  flex-direction: row-reverse !important;
 }
 
-.list-group-horizontal > .list-group-item.active {
-  margin-top: 0;
+.flex-column-reverse {
+  flex-direction: column-reverse !important;
 }
 
-.list-group-horizontal > .list-group-item + .list-group-item {
-  border-top-width: 1px;
-  border-left-width: 0;
+.flex-grow-0 {
+  flex-grow: 0 !important;
 }
 
-.list-group-horizontal > .list-group-item + .list-group-item.active {
-  margin-left: -1px;
-  border-left-width: 1px;
+.flex-grow-1 {
+  flex-grow: 1 !important;
 }
 
-@media (min-width: 576px) {
-  .list-group-horizontal-sm {
-    -ms-flex-direction: row;
-    flex-direction: row;
-  }
-  .list-group-horizontal-sm > .list-group-item:first-child {
-    border-bottom-left-radius: 0.25rem;
-    border-top-right-radius: 0;
-  }
-  .list-group-horizontal-sm > .list-group-item:last-child {
-    border-top-right-radius: 0.25rem;
-    border-bottom-left-radius: 0;
-  }
-  .list-group-horizontal-sm > .list-group-item.active {
-    margin-top: 0;
-  }
-  .list-group-horizontal-sm > .list-group-item + .list-group-item {
-    border-top-width: 1px;
-    border-left-width: 0;
-  }
-  .list-group-horizontal-sm > .list-group-item + .list-group-item.active {
-    margin-left: -1px;
-    border-left-width: 1px;
-  }
+.flex-shrink-0 {
+  flex-shrink: 0 !important;
 }
 
-@media (min-width: 768px) {
-  .list-group-horizontal-md {
-    -ms-flex-direction: row;
-    flex-direction: row;
-  }
-  .list-group-horizontal-md > .list-group-item:first-child {
-    border-bottom-left-radius: 0.25rem;
-    border-top-right-radius: 0;
-  }
-  .list-group-horizontal-md > .list-group-item:last-child {
-    border-top-right-radius: 0.25rem;
-    border-bottom-left-radius: 0;
-  }
-  .list-group-horizontal-md > .list-group-item.active {
-    margin-top: 0;
-  }
-  .list-group-horizontal-md > .list-group-item + .list-group-item {
-    border-top-width: 1px;
-    border-left-width: 0;
-  }
-  .list-group-horizontal-md > .list-group-item + .list-group-item.active {
-    margin-left: -1px;
-    border-left-width: 1px;
-  }
+.flex-shrink-1 {
+  flex-shrink: 1 !important;
 }
 
-@media (min-width: 992px) {
-  .list-group-horizontal-lg {
-    -ms-flex-direction: row;
-    flex-direction: row;
-  }
-  .list-group-horizontal-lg > .list-group-item:first-child {
-    border-bottom-left-radius: 0.25rem;
-    border-top-right-radius: 0;
-  }
-  .list-group-horizontal-lg > .list-group-item:last-child {
-    border-top-right-radius: 0.25rem;
-    border-bottom-left-radius: 0;
-  }
-  .list-group-horizontal-lg > .list-group-item.active {
-    margin-top: 0;
-  }
-  .list-group-horizontal-lg > .list-group-item + .list-group-item {
-    border-top-width: 1px;
-    border-left-width: 0;
-  }
-  .list-group-horizontal-lg > .list-group-item + .list-group-item.active {
-    margin-left: -1px;
-    border-left-width: 1px;
-  }
+.flex-wrap {
+  flex-wrap: wrap !important;
 }
 
-@media (min-width: 1200px) {
-  .list-group-horizontal-xl {
-    -ms-flex-direction: row;
-    flex-direction: row;
-  }
-  .list-group-horizontal-xl > .list-group-item:first-child {
-    border-bottom-left-radius: 0.25rem;
-    border-top-right-radius: 0;
-  }
-  .list-group-horizontal-xl > .list-group-item:last-child {
-    border-top-right-radius: 0.25rem;
-    border-bottom-left-radius: 0;
-  }
-  .list-group-horizontal-xl > .list-group-item.active {
-    margin-top: 0;
-  }
-  .list-group-horizontal-xl > .list-group-item + .list-group-item {
-    border-top-width: 1px;
-    border-left-width: 0;
-  }
-  .list-group-horizontal-xl > .list-group-item + .list-group-item.active {
-    margin-left: -1px;
-    border-left-width: 1px;
-  }
+.flex-nowrap {
+  flex-wrap: nowrap !important;
 }
 
-.list-group-flush {
-  border-radius: 0;
+.flex-wrap-reverse {
+  flex-wrap: wrap-reverse !important;
 }
 
-.list-group-flush > .list-group-item {
-  border-width: 0 0 1px;
+.gap-0 {
+  gap: 0 !important;
 }
 
-.list-group-flush > .list-group-item:last-child {
-  border-bottom-width: 0;
+.gap-1 {
+  gap: 0.25rem !important;
 }
 
-.list-group-item-primary {
-  color: #004085;
-  background-color: #b8daff;
+.gap-2 {
+  gap: 0.5rem !important;
 }
 
-.list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
-  color: #004085;
-  background-color: #9fcdff;
+.gap-3 {
+  gap: 1rem !important;
 }
 
-.list-group-item-primary.list-group-item-action.active {
-  color: #fff;
-  background-color: #004085;
-  border-color: #004085;
+.gap-4 {
+  gap: 1.5rem !important;
 }
 
-.list-group-item-secondary {
-  color: #383d41;
-  background-color: #d6d8db;
+.gap-5 {
+  gap: 3rem !important;
 }
 
-.list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
-  color: #383d41;
-  background-color: #c8cbcf;
+.justify-content-start {
+  justify-content: flex-start !important;
 }
 
-.list-group-item-secondary.list-group-item-action.active {
-  color: #fff;
-  background-color: #383d41;
-  border-color: #383d41;
+.justify-content-end {
+  justify-content: flex-end !important;
 }
 
-.list-group-item-success {
-  color: #155724;
-  background-color: #c3e6cb;
+.justify-content-center {
+  justify-content: center !important;
 }
 
-.list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus {
-  color: #155724;
-  background-color: #b1dfbb;
+.justify-content-between {
+  justify-content: space-between !important;
 }
 
-.list-group-item-success.list-group-item-action.active {
-  color: #fff;
-  background-color: #155724;
-  border-color: #155724;
+.justify-content-around {
+  justify-content: space-around !important;
 }
 
-.list-group-item-info {
-  color: #0c5460;
-  background-color: #bee5eb;
+.justify-content-evenly {
+  justify-content: space-evenly !important;
 }
 
-.list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus {
-  color: #0c5460;
-  background-color: #abdde5;
+.align-items-start {
+  align-items: flex-start !important;
 }
 
-.list-group-item-info.list-group-item-action.active {
-  color: #fff;
-  background-color: #0c5460;
-  border-color: #0c5460;
+.align-items-end {
+  align-items: flex-end !important;
 }
 
-.list-group-item-warning {
-  color: #856404;
-  background-color: #ffeeba;
+.align-items-center {
+  align-items: center !important;
 }
 
-.list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus {
-  color: #856404;
-  background-color: #ffe8a1;
+.align-items-baseline {
+  align-items: baseline !important;
 }
 
-.list-group-item-warning.list-group-item-action.active {
-  color: #fff;
-  background-color: #856404;
-  border-color: #856404;
+.align-items-stretch {
+  align-items: stretch !important;
 }
 
-.list-group-item-danger {
-  color: #721c24;
-  background-color: #f5c6cb;
+.align-content-start {
+  align-content: flex-start !important;
 }
 
-.list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus {
-  color: #721c24;
-  background-color: #f1b0b7;
+.align-content-end {
+  align-content: flex-end !important;
 }
 
-.list-group-item-danger.list-group-item-action.active {
-  color: #fff;
-  background-color: #721c24;
-  border-color: #721c24;
+.align-content-center {
+  align-content: center !important;
 }
 
-.list-group-item-light {
-  color: #818182;
-  background-color: #fdfdfe;
+.align-content-between {
+  align-content: space-between !important;
 }
 
-.list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus {
-  color: #818182;
-  background-color: #ececf6;
+.align-content-around {
+  align-content: space-around !important;
 }
 
-.list-group-item-light.list-group-item-action.active {
-  color: #fff;
-  background-color: #818182;
-  border-color: #818182;
+.align-content-stretch {
+  align-content: stretch !important;
 }
 
-.list-group-item-dark {
-  color: #1b1e21;
-  background-color: #c6c8ca;
+.align-self-auto {
+  align-self: auto !important;
 }
 
-.list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus {
-  color: #1b1e21;
-  background-color: #b9bbbe;
+.align-self-start {
+  align-self: flex-start !important;
 }
 
-.list-group-item-dark.list-group-item-action.active {
-  color: #fff;
-  background-color: #1b1e21;
-  border-color: #1b1e21;
+.align-self-end {
+  align-self: flex-end !important;
 }
 
-.close {
-  float: right;
-  font-size: 1.5rem;
-  font-weight: 700;
-  line-height: 1;
-  color: #000;
-  text-shadow: 0 1px 0 #fff;
-  opacity: .5;
+.align-self-center {
+  align-self: center !important;
 }
 
-.close:hover {
-  color: #000;
-  text-decoration: none;
+.align-self-baseline {
+  align-self: baseline !important;
 }
 
-.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
-  opacity: .75;
+.align-self-stretch {
+  align-self: stretch !important;
 }
 
-button.close {
-  padding: 0;
-  background-color: transparent;
-  border: 0;
+.order-first {
+  order: -1 !important;
 }
 
-a.close.disabled {
-  pointer-events: none;
+.order-0 {
+  order: 0 !important;
 }
 
-.toast {
-  -ms-flex-preferred-size: 350px;
-  flex-basis: 350px;
-  max-width: 350px;
-  font-size: 0.875rem;
-  background-color: rgba(255, 255, 255, 0.85);
-  background-clip: padding-box;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
-  opacity: 0;
-  border-radius: 0.25rem;
+.order-1 {
+  order: 1 !important;
 }
 
-.toast:not(:last-child) {
-  margin-bottom: 0.75rem;
+.order-2 {
+  order: 2 !important;
 }
 
-.toast.showing {
-  opacity: 1;
+.order-3 {
+  order: 3 !important;
 }
 
-.toast.show {
-  display: block;
-  opacity: 1;
+.order-4 {
+  order: 4 !important;
 }
 
-.toast.hide {
-  display: none;
+.order-5 {
+  order: 5 !important;
 }
 
-.toast-header {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-align: center;
-  align-items: center;
-  padding: 0.25rem 0.75rem;
-  color: #6c757d;
-  background-color: rgba(255, 255, 255, 0.85);
-  background-clip: padding-box;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-  border-top-left-radius: calc(0.25rem - 1px);
-  border-top-right-radius: calc(0.25rem - 1px);
+.order-last {
+  order: 6 !important;
 }
 
-.toast-body {
-  padding: 0.75rem;
+.m-0 {
+  margin: 0 !important;
 }
 
-.modal-open {
-  overflow: hidden;
+.m-1 {
+  margin: 0.25rem !important;
 }
 
-.modal-open .modal {
-  overflow-x: hidden;
-  overflow-y: auto;
+.m-2 {
+  margin: 0.5rem !important;
 }
 
-.modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 1050;
-  display: none;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  outline: 0;
+.m-3 {
+  margin: 1rem !important;
 }
 
-.modal-dialog {
-  position: relative;
-  width: auto;
-  margin: 0.5rem;
-  pointer-events: none;
+.m-4 {
+  margin: 1.5rem !important;
 }
 
-.modal.fade .modal-dialog {
-  transition: -webkit-transform 0.3s ease-out;
-  transition: transform 0.3s ease-out;
-  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
-  -webkit-transform: translate(0, -50px);
-  transform: translate(0, -50px);
+.m-5 {
+  margin: 3rem !important;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .modal.fade .modal-dialog {
-    transition: none;
-  }
+.m-auto {
+  margin: auto !important;
 }
 
-.modal.show .modal-dialog {
-  -webkit-transform: none;
-  transform: none;
+.mx-0 {
+  margin-right: 0 !important;
+  margin-left: 0 !important;
 }
 
-.modal.modal-static .modal-dialog {
-  -webkit-transform: scale(1.02);
-  transform: scale(1.02);
+.mx-1 {
+  margin-right: 0.25rem !important;
+  margin-left: 0.25rem !important;
 }
 
-.modal-dialog-scrollable {
-  display: -ms-flexbox;
-  display: flex;
-  max-height: calc(100% - 1rem);
+.mx-2 {
+  margin-right: 0.5rem !important;
+  margin-left: 0.5rem !important;
 }
 
-.modal-dialog-scrollable .modal-content {
-  max-height: calc(100vh - 1rem);
-  overflow: hidden;
+.mx-3 {
+  margin-right: 1rem !important;
+  margin-left: 1rem !important;
 }
 
-.modal-dialog-scrollable .modal-header,
-.modal-dialog-scrollable .modal-footer {
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
+.mx-4 {
+  margin-right: 1.5rem !important;
+  margin-left: 1.5rem !important;
 }
 
-.modal-dialog-scrollable .modal-body {
-  overflow-y: auto;
+.mx-5 {
+  margin-right: 3rem !important;
+  margin-left: 3rem !important;
 }
 
-.modal-dialog-centered {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: calc(100% - 1rem);
+.mx-auto {
+  margin-right: auto !important;
+  margin-left: auto !important;
 }
 
-.modal-dialog-centered::before {
-  display: block;
-  height: calc(100vh - 1rem);
-  height: -webkit-min-content;
-  height: -moz-min-content;
-  height: min-content;
-  content: "";
+.my-0 {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
 }
 
-.modal-dialog-centered.modal-dialog-scrollable {
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -ms-flex-pack: center;
-  justify-content: center;
-  height: 100%;
+.my-1 {
+  margin-top: 0.25rem !important;
+  margin-bottom: 0.25rem !important;
 }
 
-.modal-dialog-centered.modal-dialog-scrollable .modal-content {
-  max-height: none;
+.my-2 {
+  margin-top: 0.5rem !important;
+  margin-bottom: 0.5rem !important;
 }
 
-.modal-dialog-centered.modal-dialog-scrollable::before {
-  content: none;
+.my-3 {
+  margin-top: 1rem !important;
+  margin-bottom: 1rem !important;
 }
 
-.modal-content {
-  position: relative;
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  width: 100%;
-  pointer-events: auto;
-  background-color: #fff;
-  background-clip: padding-box;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: 0.3rem;
-  outline: 0;
+.my-4 {
+  margin-top: 1.5rem !important;
+  margin-bottom: 1.5rem !important;
 }
 
-.modal-backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 1040;
-  width: 100vw;
-  height: 100vh;
-  background-color: #000;
+.my-5 {
+  margin-top: 3rem !important;
+  margin-bottom: 3rem !important;
 }
 
-.modal-backdrop.fade {
-  opacity: 0;
+.my-auto {
+  margin-top: auto !important;
+  margin-bottom: auto !important;
 }
 
-.modal-backdrop.show {
-  opacity: 0.5;
+.mt-0 {
+  margin-top: 0 !important;
 }
 
-.modal-header {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-align: start;
-  align-items: flex-start;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  padding: 1rem 1rem;
-  border-bottom: 1px solid #dee2e6;
-  border-top-left-radius: calc(0.3rem - 1px);
-  border-top-right-radius: calc(0.3rem - 1px);
+.mt-1 {
+  margin-top: 0.25rem !important;
 }
 
-.modal-header .close {
-  padding: 1rem 1rem;
-  margin: -1rem -1rem -1rem auto;
+.mt-2 {
+  margin-top: 0.5rem !important;
 }
 
-.modal-title {
-  margin-bottom: 0;
-  line-height: 1.5;
+.mt-3 {
+  margin-top: 1rem !important;
 }
 
-.modal-body {
-  position: relative;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  padding: 1rem;
+.mt-4 {
+  margin-top: 1.5rem !important;
 }
 
-.modal-footer {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -ms-flex-align: center;
-  align-items: center;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-  padding: 0.75rem;
-  border-top: 1px solid #dee2e6;
-  border-bottom-right-radius: calc(0.3rem - 1px);
-  border-bottom-left-radius: calc(0.3rem - 1px);
+.mt-5 {
+  margin-top: 3rem !important;
 }
 
-.modal-footer > * {
-  margin: 0.25rem;
+.mt-auto {
+  margin-top: auto !important;
 }
 
-.modal-scrollbar-measure {
-  position: absolute;
-  top: -9999px;
-  width: 50px;
-  height: 50px;
-  overflow: scroll;
+.me-0 {
+  margin-right: 0 !important;
 }
 
-@media (min-width: 576px) {
-  .modal-dialog {
-    max-width: 500px;
-    margin: 1.75rem auto;
-  }
-  .modal-dialog-scrollable {
-    max-height: calc(100% - 3.5rem);
-  }
-  .modal-dialog-scrollable .modal-content {
-    max-height: calc(100vh - 3.5rem);
-  }
-  .modal-dialog-centered {
-    min-height: calc(100% - 3.5rem);
-  }
-  .modal-dialog-centered::before {
-    height: calc(100vh - 3.5rem);
-    height: -webkit-min-content;
-    height: -moz-min-content;
-    height: min-content;
-  }
-  .modal-sm {
-    max-width: 300px;
-  }
+.me-1 {
+  margin-right: 0.25rem !important;
 }
 
-@media (min-width: 992px) {
-  .modal-lg,
-  .modal-xl {
-    max-width: 800px;
-  }
+.me-2 {
+  margin-right: 0.5rem !important;
 }
 
-@media (min-width: 1200px) {
-  .modal-xl {
-    max-width: 1140px;
-  }
+.me-3 {
+  margin-right: 1rem !important;
 }
 
-.tooltip {
-  position: absolute;
-  z-index: 1070;
-  display: block;
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.5;
-  text-align: left;
-  text-align: start;
-  text-decoration: none;
-  text-shadow: none;
-  text-transform: none;
-  letter-spacing: normal;
-  word-break: normal;
-  word-spacing: normal;
-  white-space: normal;
-  line-break: auto;
-  font-size: 0.875rem;
-  word-wrap: break-word;
-  opacity: 0;
+.me-4 {
+  margin-right: 1.5rem !important;
 }
 
-.tooltip.show {
-  opacity: 0.9;
+.me-5 {
+  margin-right: 3rem !important;
 }
 
-.tooltip .arrow {
-  position: absolute;
-  display: block;
-  width: 0.8rem;
-  height: 0.4rem;
+.me-auto {
+  margin-right: auto !important;
 }
 
-.tooltip .arrow::before {
-  position: absolute;
-  content: "";
-  border-color: transparent;
-  border-style: solid;
+.mb-0 {
+  margin-bottom: 0 !important;
 }
 
-.bs-tooltip-top, .bs-tooltip-auto[x-placement^="top"] {
-  padding: 0.4rem 0;
+.mb-1 {
+  margin-bottom: 0.25rem !important;
 }
 
-.bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^="top"] .arrow {
-  bottom: 0;
+.mb-2 {
+  margin-bottom: 0.5rem !important;
 }
 
-.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
-  top: 0;
-  border-width: 0.4rem 0.4rem 0;
-  border-top-color: #000;
+.mb-3 {
+  margin-bottom: 1rem !important;
 }
 
-.bs-tooltip-right, .bs-tooltip-auto[x-placement^="right"] {
-  padding: 0 0.4rem;
+.mb-4 {
+  margin-bottom: 1.5rem !important;
 }
 
-.bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^="right"] .arrow {
-  left: 0;
-  width: 0.4rem;
-  height: 0.8rem;
+.mb-5 {
+  margin-bottom: 3rem !important;
 }
 
-.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
-  right: 0;
-  border-width: 0.4rem 0.4rem 0.4rem 0;
-  border-right-color: #000;
+.mb-auto {
+  margin-bottom: auto !important;
 }
 
-.bs-tooltip-bottom, .bs-tooltip-auto[x-placement^="bottom"] {
-  padding: 0.4rem 0;
+.ms-0 {
+  margin-left: 0 !important;
 }
 
-.bs-tooltip-bottom .arrow, .bs-tooltip-auto[x-placement^="bottom"] .arrow {
-  top: 0;
+.ms-1 {
+  margin-left: 0.25rem !important;
 }
 
-.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
-  bottom: 0;
-  border-width: 0 0.4rem 0.4rem;
-  border-bottom-color: #000;
+.ms-2 {
+  margin-left: 0.5rem !important;
 }
 
-.bs-tooltip-left, .bs-tooltip-auto[x-placement^="left"] {
-  padding: 0 0.4rem;
+.ms-3 {
+  margin-left: 1rem !important;
 }
 
-.bs-tooltip-left .arrow, .bs-tooltip-auto[x-placement^="left"] .arrow {
-  right: 0;
-  width: 0.4rem;
-  height: 0.8rem;
+.ms-4 {
+  margin-left: 1.5rem !important;
 }
 
-.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
-  left: 0;
-  border-width: 0.4rem 0 0.4rem 0.4rem;
-  border-left-color: #000;
+.ms-5 {
+  margin-left: 3rem !important;
 }
 
-.tooltip-inner {
-  max-width: 200px;
-  padding: 0.25rem 0.5rem;
-  color: #fff;
-  text-align: center;
-  background-color: #000;
-  border-radius: 0.25rem;
+.ms-auto {
+  margin-left: auto !important;
 }
 
-.popover {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1060;
-  display: block;
-  max-width: 276px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.5;
-  text-align: left;
-  text-align: start;
-  text-decoration: none;
-  text-shadow: none;
-  text-transform: none;
-  letter-spacing: normal;
-  word-break: normal;
-  word-spacing: normal;
-  white-space: normal;
-  line-break: auto;
-  font-size: 0.875rem;
-  word-wrap: break-word;
-  background-color: #fff;
-  background-clip: padding-box;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: 0.3rem;
+.p-0 {
+  padding: 0 !important;
 }
 
-.popover .arrow {
-  position: absolute;
-  display: block;
-  width: 1rem;
-  height: 0.5rem;
-  margin: 0 0.3rem;
+.p-1 {
+  padding: 0.25rem !important;
 }
 
-.popover .arrow::before, .popover .arrow::after {
-  position: absolute;
-  display: block;
-  content: "";
-  border-color: transparent;
-  border-style: solid;
+.p-2 {
+  padding: 0.5rem !important;
 }
 
-.bs-popover-top, .bs-popover-auto[x-placement^="top"] {
-  margin-bottom: 0.5rem;
+.p-3 {
+  padding: 1rem !important;
 }
 
-.bs-popover-top > .arrow, .bs-popover-auto[x-placement^="top"] > .arrow {
-  bottom: calc(-0.5rem - 1px);
+.p-4 {
+  padding: 1.5rem !important;
 }
 
-.bs-popover-top > .arrow::before, .bs-popover-auto[x-placement^="top"] > .arrow::before {
-  bottom: 0;
-  border-width: 0.5rem 0.5rem 0;
-  border-top-color: rgba(0, 0, 0, 0.25);
+.p-5 {
+  padding: 3rem !important;
 }
 
-.bs-popover-top > .arrow::after, .bs-popover-auto[x-placement^="top"] > .arrow::after {
-  bottom: 1px;
-  border-width: 0.5rem 0.5rem 0;
-  border-top-color: #fff;
+.px-0 {
+  padding-right: 0 !important;
+  padding-left: 0 !important;
 }
 
-.bs-popover-right, .bs-popover-auto[x-placement^="right"] {
-  margin-left: 0.5rem;
+.px-1 {
+  padding-right: 0.25rem !important;
+  padding-left: 0.25rem !important;
 }
 
-.bs-popover-right > .arrow, .bs-popover-auto[x-placement^="right"] > .arrow {
-  left: calc(-0.5rem - 1px);
-  width: 0.5rem;
-  height: 1rem;
-  margin: 0.3rem 0;
+.px-2 {
+  padding-right: 0.5rem !important;
+  padding-left: 0.5rem !important;
 }
 
-.bs-popover-right > .arrow::before, .bs-popover-auto[x-placement^="right"] > .arrow::before {
-  left: 0;
-  border-width: 0.5rem 0.5rem 0.5rem 0;
-  border-right-color: rgba(0, 0, 0, 0.25);
+.px-3 {
+  padding-right: 1rem !important;
+  padding-left: 1rem !important;
 }
 
-.bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^="right"] > .arrow::after {
-  left: 1px;
-  border-width: 0.5rem 0.5rem 0.5rem 0;
-  border-right-color: #fff;
+.px-4 {
+  padding-right: 1.5rem !important;
+  padding-left: 1.5rem !important;
 }
 
-.bs-popover-bottom, .bs-popover-auto[x-placement^="bottom"] {
-  margin-top: 0.5rem;
+.px-5 {
+  padding-right: 3rem !important;
+  padding-left: 3rem !important;
 }
 
-.bs-popover-bottom > .arrow, .bs-popover-auto[x-placement^="bottom"] > .arrow {
-  top: calc(-0.5rem - 1px);
+.py-0 {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
 }
 
-.bs-popover-bottom > .arrow::before, .bs-popover-auto[x-placement^="bottom"] > .arrow::before {
-  top: 0;
-  border-width: 0 0.5rem 0.5rem 0.5rem;
-  border-bottom-color: rgba(0, 0, 0, 0.25);
+.py-1 {
+  padding-top: 0.25rem !important;
+  padding-bottom: 0.25rem !important;
 }
 
-.bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^="bottom"] > .arrow::after {
-  top: 1px;
-  border-width: 0 0.5rem 0.5rem 0.5rem;
-  border-bottom-color: #fff;
+.py-2 {
+  padding-top: 0.5rem !important;
+  padding-bottom: 0.5rem !important;
 }
 
-.bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^="bottom"] .popover-header::before {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  display: block;
-  width: 1rem;
-  margin-left: -0.5rem;
-  content: "";
-  border-bottom: 1px solid #f7f7f7;
+.py-3 {
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important;
 }
 
-.bs-popover-left, .bs-popover-auto[x-placement^="left"] {
-  margin-right: 0.5rem;
+.py-4 {
+  padding-top: 1.5rem !important;
+  padding-bottom: 1.5rem !important;
 }
 
-.bs-popover-left > .arrow, .bs-popover-auto[x-placement^="left"] > .arrow {
-  right: calc(-0.5rem - 1px);
-  width: 0.5rem;
-  height: 1rem;
-  margin: 0.3rem 0;
+.py-5 {
+  padding-top: 3rem !important;
+  padding-bottom: 3rem !important;
 }
 
-.bs-popover-left > .arrow::before, .bs-popover-auto[x-placement^="left"] > .arrow::before {
-  right: 0;
-  border-width: 0.5rem 0 0.5rem 0.5rem;
-  border-left-color: rgba(0, 0, 0, 0.25);
+.pt-0 {
+  padding-top: 0 !important;
 }
 
-.bs-popover-left > .arrow::after, .bs-popover-auto[x-placement^="left"] > .arrow::after {
-  right: 1px;
-  border-width: 0.5rem 0 0.5rem 0.5rem;
-  border-left-color: #fff;
+.pt-1 {
+  padding-top: 0.25rem !important;
 }
 
-.popover-header {
-  padding: 0.5rem 0.75rem;
-  margin-bottom: 0;
-  font-size: 1rem;
-  background-color: #f7f7f7;
-  border-bottom: 1px solid #ebebeb;
-  border-top-left-radius: calc(0.3rem - 1px);
-  border-top-right-radius: calc(0.3rem - 1px);
+.pt-2 {
+  padding-top: 0.5rem !important;
 }
 
-.popover-header:empty {
-  display: none;
+.pt-3 {
+  padding-top: 1rem !important;
 }
 
-.popover-body {
-  padding: 0.5rem 0.75rem;
-  color: #212529;
+.pt-4 {
+  padding-top: 1.5rem !important;
 }
 
-.carousel {
-  position: relative;
+.pt-5 {
+  padding-top: 3rem !important;
 }
 
-.carousel.pointer-event {
-  -ms-touch-action: pan-y;
-  touch-action: pan-y;
+.pe-0 {
+  padding-right: 0 !important;
 }
 
-.carousel-inner {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
+.pe-1 {
+  padding-right: 0.25rem !important;
 }
 
-.carousel-inner::after {
-  display: block;
-  clear: both;
-  content: "";
+.pe-2 {
+  padding-right: 0.5rem !important;
 }
 
-.carousel-item {
-  position: relative;
-  display: none;
-  float: left;
-  width: 100%;
-  margin-right: -100%;
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-  transition: -webkit-transform 0.6s ease-in-out;
-  transition: transform 0.6s ease-in-out;
-  transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
+.pe-3 {
+  padding-right: 1rem !important;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .carousel-item {
-    transition: none;
-  }
+.pe-4 {
+  padding-right: 1.5rem !important;
 }
 
-.carousel-item.active,
-.carousel-item-next,
-.carousel-item-prev {
-  display: block;
+.pe-5 {
+  padding-right: 3rem !important;
 }
 
-.carousel-item-next:not(.carousel-item-left),
-.active.carousel-item-right {
-  -webkit-transform: translateX(100%);
-  transform: translateX(100%);
+.pb-0 {
+  padding-bottom: 0 !important;
 }
 
-.carousel-item-prev:not(.carousel-item-right),
-.active.carousel-item-left {
-  -webkit-transform: translateX(-100%);
-  transform: translateX(-100%);
+.pb-1 {
+  padding-bottom: 0.25rem !important;
 }
 
-.carousel-fade .carousel-item {
-  opacity: 0;
-  transition-property: opacity;
-  -webkit-transform: none;
-  transform: none;
+.pb-2 {
+  padding-bottom: 0.5rem !important;
 }
 
-.carousel-fade .carousel-item.active,
-.carousel-fade .carousel-item-next.carousel-item-left,
-.carousel-fade .carousel-item-prev.carousel-item-right {
-  z-index: 1;
-  opacity: 1;
+.pb-3 {
+  padding-bottom: 1rem !important;
 }
 
-.carousel-fade .active.carousel-item-left,
-.carousel-fade .active.carousel-item-right {
-  z-index: 0;
-  opacity: 0;
-  transition: opacity 0s 0.6s;
+.pb-4 {
+  padding-bottom: 1.5rem !important;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .carousel-fade .active.carousel-item-left,
-  .carousel-fade .active.carousel-item-right {
-    transition: none;
-  }
+.pb-5 {
+  padding-bottom: 3rem !important;
 }
 
-.carousel-control-prev,
-.carousel-control-next {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 1;
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-align: center;
-  align-items: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  width: 15%;
-  color: #fff;
-  text-align: center;
-  opacity: 0.5;
-  transition: opacity 0.15s ease;
+.ps-0 {
+  padding-left: 0 !important;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .carousel-control-prev,
-  .carousel-control-next {
-    transition: none;
-  }
+.ps-1 {
+  padding-left: 0.25rem !important;
 }
 
-.carousel-control-prev:hover, .carousel-control-prev:focus,
-.carousel-control-next:hover,
-.carousel-control-next:focus {
-  color: #fff;
-  text-decoration: none;
-  outline: 0;
-  opacity: 0.9;
+.ps-2 {
+  padding-left: 0.5rem !important;
 }
 
-.carousel-control-prev {
-  left: 0;
+.ps-3 {
+  padding-left: 1rem !important;
 }
 
-.carousel-control-next {
-  right: 0;
+.ps-4 {
+  padding-left: 1.5rem !important;
 }
 
-.carousel-control-prev-icon,
-.carousel-control-next-icon {
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-  background: no-repeat 50% / 100% 100%;
+.ps-5 {
+  padding-left: 3rem !important;
 }
 
-.carousel-control-prev-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
+.font-monospace {
+  font-family: var(--bs-font-monospace) !important;
 }
 
-.carousel-control-next-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
+.fs-1 {
+  font-size: calc(1.375rem + 1.5vw) !important;
 }
 
-.carousel-indicators {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 15;
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-pack: center;
-  justify-content: center;
-  padding-left: 0;
-  margin-right: 15%;
-  margin-left: 15%;
-  list-style: none;
+.fs-2 {
+  font-size: calc(1.325rem + 0.9vw) !important;
 }
 
-.carousel-indicators li {
-  box-sizing: content-box;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  width: 30px;
-  height: 3px;
-  margin-right: 3px;
-  margin-left: 3px;
-  text-indent: -999px;
-  cursor: pointer;
-  background-color: #fff;
-  background-clip: padding-box;
-  border-top: 10px solid transparent;
-  border-bottom: 10px solid transparent;
-  opacity: .5;
-  transition: opacity 0.6s ease;
+.fs-3 {
+  font-size: calc(1.3rem + 0.6vw) !important;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .carousel-indicators li {
-    transition: none;
-  }
+.fs-4 {
+  font-size: calc(1.275rem + 0.3vw) !important;
 }
 
-.carousel-indicators .active {
-  opacity: 1;
+.fs-5 {
+  font-size: 1.25rem !important;
 }
 
-.carousel-caption {
-  position: absolute;
-  right: 15%;
-  bottom: 20px;
-  left: 15%;
-  z-index: 10;
-  padding-top: 20px;
-  padding-bottom: 20px;
-  color: #fff;
-  text-align: center;
+.fs-6 {
+  font-size: 1rem !important;
 }
 
-@-webkit-keyframes spinner-border {
-  to {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
+.fst-italic {
+  font-style: italic !important;
 }
 
-@keyframes spinner-border {
-  to {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
+.fst-normal {
+  font-style: normal !important;
 }
 
-.spinner-border {
-  display: inline-block;
-  width: 2rem;
-  height: 2rem;
-  vertical-align: text-bottom;
-  border: 0.25em solid currentColor;
-  border-right-color: transparent;
-  border-radius: 50%;
-  -webkit-animation: spinner-border .75s linear infinite;
-  animation: spinner-border .75s linear infinite;
+.fw-light {
+  font-weight: 300 !important;
 }
 
-.spinner-border-sm {
-  width: 1rem;
-  height: 1rem;
-  border-width: 0.2em;
+.fw-lighter {
+  font-weight: lighter !important;
 }
 
-@-webkit-keyframes spinner-grow {
-  0% {
-    -webkit-transform: scale(0);
-    transform: scale(0);
-  }
-  50% {
-    opacity: 1;
-    -webkit-transform: none;
-    transform: none;
-  }
+.fw-normal {
+  font-weight: 400 !important;
 }
 
-@keyframes spinner-grow {
-  0% {
-    -webkit-transform: scale(0);
-    transform: scale(0);
-  }
-  50% {
-    opacity: 1;
-    -webkit-transform: none;
-    transform: none;
-  }
+.fw-bold {
+  font-weight: 700 !important;
 }
 
-.spinner-grow {
-  display: inline-block;
-  width: 2rem;
-  height: 2rem;
-  vertical-align: text-bottom;
-  background-color: currentColor;
-  border-radius: 50%;
-  opacity: 0;
-  -webkit-animation: spinner-grow .75s linear infinite;
-  animation: spinner-grow .75s linear infinite;
+.fw-bolder {
+  font-weight: bolder !important;
 }
 
-.spinner-grow-sm {
-  width: 1rem;
-  height: 1rem;
+.lh-1 {
+  line-height: 1 !important;
 }
 
-.align-baseline {
-  vertical-align: baseline !important;
+.lh-sm {
+  line-height: 1.25 !important;
 }
 
-.align-top {
-  vertical-align: top !important;
+.lh-base {
+  line-height: 1.5 !important;
 }
 
-.align-middle {
-  vertical-align: middle !important;
+.lh-lg {
+  line-height: 2 !important;
 }
 
-.align-bottom {
-  vertical-align: bottom !important;
+.text-start {
+  text-align: left !important;
 }
 
-.align-text-bottom {
-  vertical-align: text-bottom !important;
+.text-end {
+  text-align: right !important;
 }
 
-.align-text-top {
-  vertical-align: text-top !important;
+.text-center {
+  text-align: center !important;
 }
 
-.bg-primary {
-  background-color: #007bff !important;
+.text-decoration-none {
+  text-decoration: none !important;
 }
 
-a.bg-primary:hover, a.bg-primary:focus,
-button.bg-primary:hover,
-button.bg-primary:focus {
-  background-color: #0062cc !important;
+.text-decoration-underline {
+  text-decoration: underline !important;
 }
 
-.bg-secondary {
-  background-color: #6c757d !important;
+.text-decoration-line-through {
+  text-decoration: line-through !important;
 }
 
-a.bg-secondary:hover, a.bg-secondary:focus,
-button.bg-secondary:hover,
-button.bg-secondary:focus {
-  background-color: #545b62 !important;
+.text-lowercase {
+  text-transform: lowercase !important;
 }
 
-.bg-success {
-  background-color: #28a745 !important;
+.text-uppercase {
+  text-transform: uppercase !important;
 }
 
-a.bg-success:hover, a.bg-success:focus,
-button.bg-success:hover,
-button.bg-success:focus {
-  background-color: #1e7e34 !important;
+.text-capitalize {
+  text-transform: capitalize !important;
 }
 
-.bg-info {
-  background-color: #17a2b8 !important;
+.text-wrap {
+  white-space: normal !important;
 }
 
-a.bg-info:hover, a.bg-info:focus,
-button.bg-info:hover,
-button.bg-info:focus {
-  background-color: #117a8b !important;
+.text-nowrap {
+  white-space: nowrap !important;
 }
 
-.bg-warning {
-  background-color: #ffc107 !important;
+/* rtl:begin:remove */
+.text-break {
+  word-wrap: break-word !important;
+  word-break: break-word !important;
 }
 
-a.bg-warning:hover, a.bg-warning:focus,
-button.bg-warning:hover,
-button.bg-warning:focus {
-  background-color: #d39e00 !important;
+/* rtl:end:remove */
+.text-primary {
+  color: #0d6efd !important;
 }
 
-.bg-danger {
-  background-color: #dc3545 !important;
+.text-secondary {
+  color: #6c757d !important;
 }
 
-a.bg-danger:hover, a.bg-danger:focus,
-button.bg-danger:hover,
-button.bg-danger:focus {
-  background-color: #bd2130 !important;
+.text-success {
+  color: #198754 !important;
 }
 
-.bg-light {
-  background-color: #f8f9fa !important;
+.text-info {
+  color: #0dcaf0 !important;
 }
 
-a.bg-light:hover, a.bg-light:focus,
-button.bg-light:hover,
-button.bg-light:focus {
-  background-color: #dae0e5 !important;
+.text-warning {
+  color: #ffc107 !important;
 }
 
-.bg-dark {
-  background-color: #343a40 !important;
+.text-danger {
+  color: #dc3545 !important;
 }
 
-a.bg-dark:hover, a.bg-dark:focus,
-button.bg-dark:hover,
-button.bg-dark:focus {
-  background-color: #1d2124 !important;
+.text-light {
+  color: #f8f9fa !important;
 }
 
-.bg-white {
-  background-color: #fff !important;
+.text-dark {
+  color: #212529 !important;
 }
 
-.bg-transparent {
-  background-color: transparent !important;
+.text-white {
+  color: #fff !important;
 }
 
-.border {
-  border: 1px solid #dee2e6 !important;
+.text-body {
+  color: #212529 !important;
 }
 
-.border-top {
-  border-top: 1px solid #dee2e6 !important;
+.text-muted {
+  color: #6c757d !important;
 }
 
-.border-right {
-  border-right: 1px solid #dee2e6 !important;
+.text-black-50 {
+  color: rgba(0, 0, 0, 0.5) !important;
 }
 
-.border-bottom {
-  border-bottom: 1px solid #dee2e6 !important;
+.text-white-50 {
+  color: rgba(255, 255, 255, 0.5) !important;
 }
 
-.border-left {
-  border-left: 1px solid #dee2e6 !important;
+.text-reset {
+  color: inherit !important;
 }
 
-.border-0 {
-  border: 0 !important;
+.bg-primary {
+  background-color: #0d6efd !important;
 }
 
-.border-top-0 {
-  border-top: 0 !important;
+.bg-secondary {
+  background-color: #6c757d !important;
 }
 
-.border-right-0 {
-  border-right: 0 !important;
+.bg-success {
+  background-color: #198754 !important;
 }
 
-.border-bottom-0 {
-  border-bottom: 0 !important;
+.bg-info {
+  background-color: #0dcaf0 !important;
 }
 
-.border-left-0 {
-  border-left: 0 !important;
+.bg-warning {
+  background-color: #ffc107 !important;
 }
 
-.border-primary {
-  border-color: #007bff !important;
+.bg-danger {
+  background-color: #dc3545 !important;
 }
 
-.border-secondary {
-  border-color: #6c757d !important;
+.bg-light {
+  background-color: #f8f9fa !important;
+}
+
+.bg-dark {
+  background-color: #212529 !important;
+}
+
+.bg-body {
+  background-color: #fff !important;
 }
 
-.border-success {
-  border-color: #28a745 !important;
+.bg-white {
+  background-color: #fff !important;
 }
 
-.border-info {
-  border-color: #17a2b8 !important;
+.bg-transparent {
+  background-color: transparent !important;
 }
 
-.border-warning {
-  border-color: #ffc107 !important;
+.bg-gradient {
+  background-image: var(--bs-gradient) !important;
 }
 
-.border-danger {
-  border-color: #dc3545 !important;
+.user-select-all {
+  -webkit-user-select: all !important;
+  -moz-user-select: all !important;
+  user-select: all !important;
 }
 
-.border-light {
-  border-color: #f8f9fa !important;
+.user-select-auto {
+  -webkit-user-select: auto !important;
+  -moz-user-select: auto !important;
+  user-select: auto !important;
 }
 
-.border-dark {
-  border-color: #343a40 !important;
+.user-select-none {
+  -webkit-user-select: none !important;
+  -moz-user-select: none !important;
+  user-select: none !important;
 }
 
-.border-white {
-  border-color: #fff !important;
+.pe-none {
+  pointer-events: none !important;
 }
 
-.rounded-sm {
-  border-radius: 0.2rem !important;
+.pe-auto {
+  pointer-events: auto !important;
 }
 
 .rounded {
   border-radius: 0.25rem !important;
 }
 
-.rounded-top {
-  border-top-left-radius: 0.25rem !important;
-  border-top-right-radius: 0.25rem !important;
-}
-
-.rounded-right {
-  border-top-right-radius: 0.25rem !important;
-  border-bottom-right-radius: 0.25rem !important;
+.rounded-0 {
+  border-radius: 0 !important;
 }
 
-.rounded-bottom {
-  border-bottom-right-radius: 0.25rem !important;
-  border-bottom-left-radius: 0.25rem !important;
+.rounded-1 {
+  border-radius: 0.2rem !important;
 }
 
-.rounded-left {
-  border-top-left-radius: 0.25rem !important;
-  border-bottom-left-radius: 0.25rem !important;
+.rounded-2 {
+  border-radius: 0.25rem !important;
 }
 
-.rounded-lg {
+.rounded-3 {
   border-radius: 0.3rem !important;
 }
 
@@ -6914,3350 +7475,3346 @@ button.bg-dark:focus {
   border-radius: 50rem !important;
 }
 
-.rounded-0 {
-  border-radius: 0 !important;
-}
-
-.clearfix::after {
-  display: block;
-  clear: both;
-  content: "";
-}
-
-.d-none {
-  display: none !important;
-}
-
-.d-inline {
-  display: inline !important;
+.rounded-top {
+  border-top-left-radius: 0.25rem !important;
+  border-top-right-radius: 0.25rem !important;
 }
 
-.d-inline-block {
-  display: inline-block !important;
+.rounded-end {
+  border-top-right-radius: 0.25rem !important;
+  border-bottom-right-radius: 0.25rem !important;
 }
 
-.d-block {
-  display: block !important;
+.rounded-bottom {
+  border-bottom-right-radius: 0.25rem !important;
+  border-bottom-left-radius: 0.25rem !important;
 }
 
-.d-table {
-  display: table !important;
+.rounded-start {
+  border-bottom-left-radius: 0.25rem !important;
+  border-top-left-radius: 0.25rem !important;
 }
 
-.d-table-row {
-  display: table-row !important;
+.visible {
+  visibility: visible !important;
 }
 
-.d-table-cell {
-  display: table-cell !important;
+.invisible {
+  visibility: hidden !important;
 }
 
-.d-flex {
-  display: -ms-flexbox !important;
-  display: flex !important;
-}
+@media (min-width: 576px) {
+  .float-sm-start {
+    float: left !important;
+  }
 
-.d-inline-flex {
-  display: -ms-inline-flexbox !important;
-  display: inline-flex !important;
-}
+  .float-sm-end {
+    float: right !important;
+  }
 
-@media (min-width: 576px) {
-  .d-sm-none {
-    display: none !important;
+  .float-sm-none {
+    float: none !important;
   }
+
   .d-sm-inline {
     display: inline !important;
   }
+
   .d-sm-inline-block {
     display: inline-block !important;
   }
+
   .d-sm-block {
     display: block !important;
   }
+
+  .d-sm-grid {
+    display: grid !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: 768px) {
-  .d-md-none {
+  .d-sm-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: 992px) {
-  .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;
+  .flex-sm-fill {
+    flex: 1 1 auto !important;
   }
-}
 
-@media (min-width: 1200px) {
-  .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;
+  .flex-sm-row {
+    flex-direction: row !important;
   }
-  .d-xl-table-cell {
-    display: table-cell !important;
+
+  .flex-sm-column {
+    flex-direction: column !important;
   }
-  .d-xl-flex {
-    display: -ms-flexbox !important;
-    display: flex !important;
+
+  .flex-sm-row-reverse {
+    flex-direction: row-reverse !important;
   }
-  .d-xl-inline-flex {
-    display: -ms-inline-flexbox !important;
-    display: inline-flex !important;
+
+  .flex-sm-column-reverse {
+    flex-direction: column-reverse !important;
   }
-}
 
-@media print {
-  .d-print-none {
-    display: none !important;
+  .flex-sm-grow-0 {
+    flex-grow: 0 !important;
   }
-  .d-print-inline {
-    display: inline !important;
+
+  .flex-sm-grow-1 {
+    flex-grow: 1 !important;
   }
-  .d-print-inline-block {
-    display: inline-block !important;
+
+  .flex-sm-shrink-0 {
+    flex-shrink: 0 !important;
   }
-  .d-print-block {
-    display: block !important;
+
+  .flex-sm-shrink-1 {
+    flex-shrink: 1 !important;
   }
-  .d-print-table {
-    display: table !important;
+
+  .flex-sm-wrap {
+    flex-wrap: wrap !important;
   }
-  .d-print-table-row {
-    display: table-row !important;
+
+  .flex-sm-nowrap {
+    flex-wrap: nowrap !important;
   }
-  .d-print-table-cell {
-    display: table-cell !important;
+
+  .flex-sm-wrap-reverse {
+    flex-wrap: wrap-reverse !important;
   }
-  .d-print-flex {
-    display: -ms-flexbox !important;
-    display: flex !important;
+
+  .gap-sm-0 {
+    gap: 0 !important;
   }
-  .d-print-inline-flex {
-    display: -ms-inline-flexbox !important;
-    display: inline-flex !important;
+
+  .gap-sm-1 {
+    gap: 0.25rem !important;
   }
-}
 
-.embed-responsive {
-  position: relative;
-  display: block;
-  width: 100%;
-  padding: 0;
-  overflow: hidden;
-}
+  .gap-sm-2 {
+    gap: 0.5rem !important;
+  }
 
-.embed-responsive::before {
-  display: block;
-  content: "";
-}
+  .gap-sm-3 {
+    gap: 1rem !important;
+  }
 
-.embed-responsive .embed-responsive-item,
-.embed-responsive iframe,
-.embed-responsive embed,
-.embed-responsive object,
-.embed-responsive video {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border: 0;
-}
+  .gap-sm-4 {
+    gap: 1.5rem !important;
+  }
 
-.embed-responsive-21by9::before {
-  padding-top: 42.857143%;
-}
+  .gap-sm-5 {
+    gap: 3rem !important;
+  }
 
-.embed-responsive-16by9::before {
-  padding-top: 56.25%;
-}
+  .justify-content-sm-start {
+    justify-content: flex-start !important;
+  }
 
-.embed-responsive-4by3::before {
-  padding-top: 75%;
-}
+  .justify-content-sm-end {
+    justify-content: flex-end !important;
+  }
 
-.embed-responsive-1by1::before {
-  padding-top: 100%;
-}
+  .justify-content-sm-center {
+    justify-content: center !important;
+  }
 
-.flex-row {
-  -ms-flex-direction: row !important;
-  flex-direction: row !important;
-}
+  .justify-content-sm-between {
+    justify-content: space-between !important;
+  }
 
-.flex-column {
-  -ms-flex-direction: column !important;
-  flex-direction: column !important;
-}
+  .justify-content-sm-around {
+    justify-content: space-around !important;
+  }
 
-.flex-row-reverse {
-  -ms-flex-direction: row-reverse !important;
-  flex-direction: row-reverse !important;
-}
+  .justify-content-sm-evenly {
+    justify-content: space-evenly !important;
+  }
 
-.flex-column-reverse {
-  -ms-flex-direction: column-reverse !important;
-  flex-direction: column-reverse !important;
-}
+  .align-items-sm-start {
+    align-items: flex-start !important;
+  }
 
-.flex-wrap {
-  -ms-flex-wrap: wrap !important;
-  flex-wrap: wrap !important;
-}
+  .align-items-sm-end {
+    align-items: flex-end !important;
+  }
 
-.flex-nowrap {
-  -ms-flex-wrap: nowrap !important;
-  flex-wrap: nowrap !important;
-}
+  .align-items-sm-center {
+    align-items: center !important;
+  }
 
-.flex-wrap-reverse {
-  -ms-flex-wrap: wrap-reverse !important;
-  flex-wrap: wrap-reverse !important;
-}
+  .align-items-sm-baseline {
+    align-items: baseline !important;
+  }
 
-.flex-fill {
-  -ms-flex: 1 1 auto !important;
-  flex: 1 1 auto !important;
-}
+  .align-items-sm-stretch {
+    align-items: stretch !important;
+  }
 
-.flex-grow-0 {
-  -ms-flex-positive: 0 !important;
-  flex-grow: 0 !important;
-}
+  .align-content-sm-start {
+    align-content: flex-start !important;
+  }
 
-.flex-grow-1 {
-  -ms-flex-positive: 1 !important;
-  flex-grow: 1 !important;
-}
+  .align-content-sm-end {
+    align-content: flex-end !important;
+  }
 
-.flex-shrink-0 {
-  -ms-flex-negative: 0 !important;
-  flex-shrink: 0 !important;
-}
+  .align-content-sm-center {
+    align-content: center !important;
+  }
 
-.flex-shrink-1 {
-  -ms-flex-negative: 1 !important;
-  flex-shrink: 1 !important;
-}
+  .align-content-sm-between {
+    align-content: space-between !important;
+  }
 
-.justify-content-start {
-  -ms-flex-pack: start !important;
-  justify-content: flex-start !important;
-}
+  .align-content-sm-around {
+    align-content: space-around !important;
+  }
 
-.justify-content-end {
-  -ms-flex-pack: end !important;
-  justify-content: flex-end !important;
-}
+  .align-content-sm-stretch {
+    align-content: stretch !important;
+  }
 
-.justify-content-center {
-  -ms-flex-pack: center !important;
-  justify-content: center !important;
-}
+  .align-self-sm-auto {
+    align-self: auto !important;
+  }
 
-.justify-content-between {
-  -ms-flex-pack: justify !important;
-  justify-content: space-between !important;
-}
+  .align-self-sm-start {
+    align-self: flex-start !important;
+  }
 
-.justify-content-around {
-  -ms-flex-pack: distribute !important;
-  justify-content: space-around !important;
-}
+  .align-self-sm-end {
+    align-self: flex-end !important;
+  }
 
-.align-items-start {
-  -ms-flex-align: start !important;
-  align-items: flex-start !important;
-}
+  .align-self-sm-center {
+    align-self: center !important;
+  }
 
-.align-items-end {
-  -ms-flex-align: end !important;
-  align-items: flex-end !important;
-}
+  .align-self-sm-baseline {
+    align-self: baseline !important;
+  }
 
-.align-items-center {
-  -ms-flex-align: center !important;
-  align-items: center !important;
-}
+  .align-self-sm-stretch {
+    align-self: stretch !important;
+  }
 
-.align-items-baseline {
-  -ms-flex-align: baseline !important;
-  align-items: baseline !important;
-}
+  .order-sm-first {
+    order: -1 !important;
+  }
 
-.align-items-stretch {
-  -ms-flex-align: stretch !important;
-  align-items: stretch !important;
-}
+  .order-sm-0 {
+    order: 0 !important;
+  }
 
-.align-content-start {
-  -ms-flex-line-pack: start !important;
-  align-content: flex-start !important;
-}
+  .order-sm-1 {
+    order: 1 !important;
+  }
 
-.align-content-end {
-  -ms-flex-line-pack: end !important;
-  align-content: flex-end !important;
-}
+  .order-sm-2 {
+    order: 2 !important;
+  }
 
-.align-content-center {
-  -ms-flex-line-pack: center !important;
-  align-content: center !important;
-}
+  .order-sm-3 {
+    order: 3 !important;
+  }
 
-.align-content-between {
-  -ms-flex-line-pack: justify !important;
-  align-content: space-between !important;
-}
+  .order-sm-4 {
+    order: 4 !important;
+  }
 
-.align-content-around {
-  -ms-flex-line-pack: distribute !important;
-  align-content: space-around !important;
-}
+  .order-sm-5 {
+    order: 5 !important;
+  }
 
-.align-content-stretch {
-  -ms-flex-line-pack: stretch !important;
-  align-content: stretch !important;
-}
+  .order-sm-last {
+    order: 6 !important;
+  }
 
-.align-self-auto {
-  -ms-flex-item-align: auto !important;
-  align-self: auto !important;
-}
+  .m-sm-0 {
+    margin: 0 !important;
+  }
 
-.align-self-start {
-  -ms-flex-item-align: start !important;
-  align-self: flex-start !important;
-}
+  .m-sm-1 {
+    margin: 0.25rem !important;
+  }
 
-.align-self-end {
-  -ms-flex-item-align: end !important;
-  align-self: flex-end !important;
-}
+  .m-sm-2 {
+    margin: 0.5rem !important;
+  }
 
-.align-self-center {
-  -ms-flex-item-align: center !important;
-  align-self: center !important;
-}
+  .m-sm-3 {
+    margin: 1rem !important;
+  }
 
-.align-self-baseline {
-  -ms-flex-item-align: baseline !important;
-  align-self: baseline !important;
-}
+  .m-sm-4 {
+    margin: 1.5rem !important;
+  }
 
-.align-self-stretch {
-  -ms-flex-item-align: stretch !important;
-  align-self: stretch !important;
-}
+  .m-sm-5 {
+    margin: 3rem !important;
+  }
 
-@media (min-width: 576px) {
-  .flex-sm-row {
-    -ms-flex-direction: row !important;
-    flex-direction: row !important;
+  .m-sm-auto {
+    margin: auto !important;
   }
-  .flex-sm-column {
-    -ms-flex-direction: column !important;
-    flex-direction: column !important;
+
+  .mx-sm-0 {
+    margin-right: 0 !important;
+    margin-left: 0 !important;
   }
-  .flex-sm-row-reverse {
-    -ms-flex-direction: row-reverse !important;
-    flex-direction: row-reverse !important;
+
+  .mx-sm-1 {
+    margin-right: 0.25rem !important;
+    margin-left: 0.25rem !important;
   }
-  .flex-sm-column-reverse {
-    -ms-flex-direction: column-reverse !important;
-    flex-direction: column-reverse !important;
+
+  .mx-sm-2 {
+    margin-right: 0.5rem !important;
+    margin-left: 0.5rem !important;
   }
-  .flex-sm-wrap {
-    -ms-flex-wrap: wrap !important;
-    flex-wrap: wrap !important;
+
+  .mx-sm-3 {
+    margin-right: 1rem !important;
+    margin-left: 1rem !important;
   }
-  .flex-sm-nowrap {
-    -ms-flex-wrap: nowrap !important;
-    flex-wrap: nowrap !important;
+
+  .mx-sm-4 {
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important;
   }
-  .flex-sm-wrap-reverse {
-    -ms-flex-wrap: wrap-reverse !important;
-    flex-wrap: wrap-reverse !important;
+
+  .mx-sm-5 {
+    margin-right: 3rem !important;
+    margin-left: 3rem !important;
   }
-  .flex-sm-fill {
-    -ms-flex: 1 1 auto !important;
-    flex: 1 1 auto !important;
+
+  .mx-sm-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
   }
-  .flex-sm-grow-0 {
-    -ms-flex-positive: 0 !important;
-    flex-grow: 0 !important;
+
+  .my-sm-0 {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
   }
-  .flex-sm-grow-1 {
-    -ms-flex-positive: 1 !important;
-    flex-grow: 1 !important;
+
+  .my-sm-1 {
+    margin-top: 0.25rem !important;
+    margin-bottom: 0.25rem !important;
   }
-  .flex-sm-shrink-0 {
-    -ms-flex-negative: 0 !important;
-    flex-shrink: 0 !important;
+
+  .my-sm-2 {
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.5rem !important;
   }
-  .flex-sm-shrink-1 {
-    -ms-flex-negative: 1 !important;
-    flex-shrink: 1 !important;
+
+  .my-sm-3 {
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important;
   }
-  .justify-content-sm-start {
-    -ms-flex-pack: start !important;
-    justify-content: flex-start !important;
+
+  .my-sm-4 {
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
   }
-  .justify-content-sm-end {
-    -ms-flex-pack: end !important;
-    justify-content: flex-end !important;
+
+  .my-sm-5 {
+    margin-top: 3rem !important;
+    margin-bottom: 3rem !important;
   }
-  .justify-content-sm-center {
-    -ms-flex-pack: center !important;
-    justify-content: center !important;
+
+  .my-sm-auto {
+    margin-top: auto !important;
+    margin-bottom: auto !important;
   }
-  .justify-content-sm-between {
-    -ms-flex-pack: justify !important;
-    justify-content: space-between !important;
+
+  .mt-sm-0 {
+    margin-top: 0 !important;
   }
-  .justify-content-sm-around {
-    -ms-flex-pack: distribute !important;
-    justify-content: space-around !important;
+
+  .mt-sm-1 {
+    margin-top: 0.25rem !important;
   }
-  .align-items-sm-start {
-    -ms-flex-align: start !important;
-    align-items: flex-start !important;
+
+  .mt-sm-2 {
+    margin-top: 0.5rem !important;
   }
-  .align-items-sm-end {
-    -ms-flex-align: end !important;
-    align-items: flex-end !important;
+
+  .mt-sm-3 {
+    margin-top: 1rem !important;
   }
-  .align-items-sm-center {
-    -ms-flex-align: center !important;
-    align-items: center !important;
+
+  .mt-sm-4 {
+    margin-top: 1.5rem !important;
   }
-  .align-items-sm-baseline {
-    -ms-flex-align: baseline !important;
-    align-items: baseline !important;
+
+  .mt-sm-5 {
+    margin-top: 3rem !important;
   }
-  .align-items-sm-stretch {
-    -ms-flex-align: stretch !important;
-    align-items: stretch !important;
+
+  .mt-sm-auto {
+    margin-top: auto !important;
   }
-  .align-content-sm-start {
-    -ms-flex-line-pack: start !important;
-    align-content: flex-start !important;
+
+  .me-sm-0 {
+    margin-right: 0 !important;
   }
-  .align-content-sm-end {
-    -ms-flex-line-pack: end !important;
-    align-content: flex-end !important;
+
+  .me-sm-1 {
+    margin-right: 0.25rem !important;
   }
-  .align-content-sm-center {
-    -ms-flex-line-pack: center !important;
-    align-content: center !important;
+
+  .me-sm-2 {
+    margin-right: 0.5rem !important;
   }
-  .align-content-sm-between {
-    -ms-flex-line-pack: justify !important;
-    align-content: space-between !important;
+
+  .me-sm-3 {
+    margin-right: 1rem !important;
   }
-  .align-content-sm-around {
-    -ms-flex-line-pack: distribute !important;
-    align-content: space-around !important;
+
+  .me-sm-4 {
+    margin-right: 1.5rem !important;
   }
-  .align-content-sm-stretch {
-    -ms-flex-line-pack: stretch !important;
-    align-content: stretch !important;
+
+  .me-sm-5 {
+    margin-right: 3rem !important;
   }
-  .align-self-sm-auto {
-    -ms-flex-item-align: auto !important;
-    align-self: auto !important;
+
+  .me-sm-auto {
+    margin-right: auto !important;
   }
-  .align-self-sm-start {
-    -ms-flex-item-align: start !important;
-    align-self: flex-start !important;
+
+  .mb-sm-0 {
+    margin-bottom: 0 !important;
   }
-  .align-self-sm-end {
-    -ms-flex-item-align: end !important;
-    align-self: flex-end !important;
+
+  .mb-sm-1 {
+    margin-bottom: 0.25rem !important;
   }
-  .align-self-sm-center {
-    -ms-flex-item-align: center !important;
-    align-self: center !important;
+
+  .mb-sm-2 {
+    margin-bottom: 0.5rem !important;
   }
-  .align-self-sm-baseline {
-    -ms-flex-item-align: baseline !important;
-    align-self: baseline !important;
+
+  .mb-sm-3 {
+    margin-bottom: 1rem !important;
   }
-  .align-self-sm-stretch {
-    -ms-flex-item-align: stretch !important;
-    align-self: stretch !important;
+
+  .mb-sm-4 {
+    margin-bottom: 1.5rem !important;
   }
-}
 
-@media (min-width: 768px) {
-  .flex-md-row {
-    -ms-flex-direction: row !important;
-    flex-direction: row !important;
+  .mb-sm-5 {
+    margin-bottom: 3rem !important;
   }
-  .flex-md-column {
-    -ms-flex-direction: column !important;
-    flex-direction: column !important;
+
+  .mb-sm-auto {
+    margin-bottom: auto !important;
   }
-  .flex-md-row-reverse {
-    -ms-flex-direction: row-reverse !important;
-    flex-direction: row-reverse !important;
+
+  .ms-sm-0 {
+    margin-left: 0 !important;
   }
-  .flex-md-column-reverse {
-    -ms-flex-direction: column-reverse !important;
-    flex-direction: column-reverse !important;
+
+  .ms-sm-1 {
+    margin-left: 0.25rem !important;
   }
-  .flex-md-wrap {
-    -ms-flex-wrap: wrap !important;
-    flex-wrap: wrap !important;
+
+  .ms-sm-2 {
+    margin-left: 0.5rem !important;
   }
-  .flex-md-nowrap {
-    -ms-flex-wrap: nowrap !important;
-    flex-wrap: nowrap !important;
+
+  .ms-sm-3 {
+    margin-left: 1rem !important;
   }
-  .flex-md-wrap-reverse {
-    -ms-flex-wrap: wrap-reverse !important;
-    flex-wrap: wrap-reverse !important;
+
+  .ms-sm-4 {
+    margin-left: 1.5rem !important;
   }
-  .flex-md-fill {
-    -ms-flex: 1 1 auto !important;
-    flex: 1 1 auto !important;
+
+  .ms-sm-5 {
+    margin-left: 3rem !important;
   }
-  .flex-md-grow-0 {
-    -ms-flex-positive: 0 !important;
-    flex-grow: 0 !important;
+
+  .ms-sm-auto {
+    margin-left: auto !important;
   }
-  .flex-md-grow-1 {
-    -ms-flex-positive: 1 !important;
-    flex-grow: 1 !important;
+
+  .p-sm-0 {
+    padding: 0 !important;
   }
-  .flex-md-shrink-0 {
-    -ms-flex-negative: 0 !important;
-    flex-shrink: 0 !important;
+
+  .p-sm-1 {
+    padding: 0.25rem !important;
   }
-  .flex-md-shrink-1 {
-    -ms-flex-negative: 1 !important;
-    flex-shrink: 1 !important;
+
+  .p-sm-2 {
+    padding: 0.5rem !important;
   }
-  .justify-content-md-start {
-    -ms-flex-pack: start !important;
-    justify-content: flex-start !important;
+
+  .p-sm-3 {
+    padding: 1rem !important;
   }
-  .justify-content-md-end {
-    -ms-flex-pack: end !important;
-    justify-content: flex-end !important;
+
+  .p-sm-4 {
+    padding: 1.5rem !important;
   }
-  .justify-content-md-center {
-    -ms-flex-pack: center !important;
-    justify-content: center !important;
+
+  .p-sm-5 {
+    padding: 3rem !important;
   }
-  .justify-content-md-between {
-    -ms-flex-pack: justify !important;
-    justify-content: space-between !important;
+
+  .px-sm-0 {
+    padding-right: 0 !important;
+    padding-left: 0 !important;
   }
-  .justify-content-md-around {
-    -ms-flex-pack: distribute !important;
-    justify-content: space-around !important;
+
+  .px-sm-1 {
+    padding-right: 0.25rem !important;
+    padding-left: 0.25rem !important;
   }
-  .align-items-md-start {
-    -ms-flex-align: start !important;
-    align-items: flex-start !important;
+
+  .px-sm-2 {
+    padding-right: 0.5rem !important;
+    padding-left: 0.5rem !important;
   }
-  .align-items-md-end {
-    -ms-flex-align: end !important;
-    align-items: flex-end !important;
+
+  .px-sm-3 {
+    padding-right: 1rem !important;
+    padding-left: 1rem !important;
   }
-  .align-items-md-center {
-    -ms-flex-align: center !important;
-    align-items: center !important;
+
+  .px-sm-4 {
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important;
   }
-  .align-items-md-baseline {
-    -ms-flex-align: baseline !important;
-    align-items: baseline !important;
+
+  .px-sm-5 {
+    padding-right: 3rem !important;
+    padding-left: 3rem !important;
   }
-  .align-items-md-stretch {
-    -ms-flex-align: stretch !important;
-    align-items: stretch !important;
+
+  .py-sm-0 {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
   }
-  .align-content-md-start {
-    -ms-flex-line-pack: start !important;
-    align-content: flex-start !important;
+
+  .py-sm-1 {
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important;
   }
-  .align-content-md-end {
-    -ms-flex-line-pack: end !important;
-    align-content: flex-end !important;
+
+  .py-sm-2 {
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important;
   }
-  .align-content-md-center {
-    -ms-flex-line-pack: center !important;
-    align-content: center !important;
+
+  .py-sm-3 {
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important;
   }
-  .align-content-md-between {
-    -ms-flex-line-pack: justify !important;
-    align-content: space-between !important;
+
+  .py-sm-4 {
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important;
   }
-  .align-content-md-around {
-    -ms-flex-line-pack: distribute !important;
-    align-content: space-around !important;
+
+  .py-sm-5 {
+    padding-top: 3rem !important;
+    padding-bottom: 3rem !important;
   }
-  .align-content-md-stretch {
-    -ms-flex-line-pack: stretch !important;
-    align-content: stretch !important;
+
+  .pt-sm-0 {
+    padding-top: 0 !important;
   }
-  .align-self-md-auto {
-    -ms-flex-item-align: auto !important;
-    align-self: auto !important;
+
+  .pt-sm-1 {
+    padding-top: 0.25rem !important;
   }
-  .align-self-md-start {
-    -ms-flex-item-align: start !important;
-    align-self: flex-start !important;
+
+  .pt-sm-2 {
+    padding-top: 0.5rem !important;
   }
-  .align-self-md-end {
-    -ms-flex-item-align: end !important;
-    align-self: flex-end !important;
+
+  .pt-sm-3 {
+    padding-top: 1rem !important;
   }
-  .align-self-md-center {
-    -ms-flex-item-align: center !important;
-    align-self: center !important;
+
+  .pt-sm-4 {
+    padding-top: 1.5rem !important;
   }
-  .align-self-md-baseline {
-    -ms-flex-item-align: baseline !important;
-    align-self: baseline !important;
+
+  .pt-sm-5 {
+    padding-top: 3rem !important;
   }
-  .align-self-md-stretch {
-    -ms-flex-item-align: stretch !important;
-    align-self: stretch !important;
+
+  .pe-sm-0 {
+    padding-right: 0 !important;
   }
-}
 
-@media (min-width: 992px) {
-  .flex-lg-row {
-    -ms-flex-direction: row !important;
-    flex-direction: row !important;
+  .pe-sm-1 {
+    padding-right: 0.25rem !important;
   }
-  .flex-lg-column {
-    -ms-flex-direction: column !important;
-    flex-direction: column !important;
+
+  .pe-sm-2 {
+    padding-right: 0.5rem !important;
   }
-  .flex-lg-row-reverse {
-    -ms-flex-direction: row-reverse !important;
-    flex-direction: row-reverse !important;
+
+  .pe-sm-3 {
+    padding-right: 1rem !important;
   }
-  .flex-lg-column-reverse {
-    -ms-flex-direction: column-reverse !important;
-    flex-direction: column-reverse !important;
+
+  .pe-sm-4 {
+    padding-right: 1.5rem !important;
   }
-  .flex-lg-wrap {
-    -ms-flex-wrap: wrap !important;
-    flex-wrap: wrap !important;
+
+  .pe-sm-5 {
+    padding-right: 3rem !important;
   }
-  .flex-lg-nowrap {
-    -ms-flex-wrap: nowrap !important;
-    flex-wrap: nowrap !important;
+
+  .pb-sm-0 {
+    padding-bottom: 0 !important;
   }
-  .flex-lg-wrap-reverse {
-    -ms-flex-wrap: wrap-reverse !important;
-    flex-wrap: wrap-reverse !important;
+
+  .pb-sm-1 {
+    padding-bottom: 0.25rem !important;
   }
-  .flex-lg-fill {
-    -ms-flex: 1 1 auto !important;
-    flex: 1 1 auto !important;
+
+  .pb-sm-2 {
+    padding-bottom: 0.5rem !important;
   }
-  .flex-lg-grow-0 {
-    -ms-flex-positive: 0 !important;
-    flex-grow: 0 !important;
+
+  .pb-sm-3 {
+    padding-bottom: 1rem !important;
   }
-  .flex-lg-grow-1 {
-    -ms-flex-positive: 1 !important;
-    flex-grow: 1 !important;
+
+  .pb-sm-4 {
+    padding-bottom: 1.5rem !important;
   }
-  .flex-lg-shrink-0 {
-    -ms-flex-negative: 0 !important;
-    flex-shrink: 0 !important;
+
+  .pb-sm-5 {
+    padding-bottom: 3rem !important;
   }
-  .flex-lg-shrink-1 {
-    -ms-flex-negative: 1 !important;
-    flex-shrink: 1 !important;
+
+  .ps-sm-0 {
+    padding-left: 0 !important;
   }
-  .justify-content-lg-start {
-    -ms-flex-pack: start !important;
-    justify-content: flex-start !important;
+
+  .ps-sm-1 {
+    padding-left: 0.25rem !important;
   }
-  .justify-content-lg-end {
-    -ms-flex-pack: end !important;
-    justify-content: flex-end !important;
+
+  .ps-sm-2 {
+    padding-left: 0.5rem !important;
   }
-  .justify-content-lg-center {
-    -ms-flex-pack: center !important;
-    justify-content: center !important;
+
+  .ps-sm-3 {
+    padding-left: 1rem !important;
   }
-  .justify-content-lg-between {
-    -ms-flex-pack: justify !important;
-    justify-content: space-between !important;
+
+  .ps-sm-4 {
+    padding-left: 1.5rem !important;
   }
-  .justify-content-lg-around {
-    -ms-flex-pack: distribute !important;
-    justify-content: space-around !important;
+
+  .ps-sm-5 {
+    padding-left: 3rem !important;
   }
-  .align-items-lg-start {
-    -ms-flex-align: start !important;
-    align-items: flex-start !important;
+
+  .text-sm-start {
+    text-align: left !important;
   }
-  .align-items-lg-end {
-    -ms-flex-align: end !important;
-    align-items: flex-end !important;
+
+  .text-sm-end {
+    text-align: right !important;
   }
-  .align-items-lg-center {
-    -ms-flex-align: center !important;
-    align-items: center !important;
+
+  .text-sm-center {
+    text-align: center !important;
   }
-  .align-items-lg-baseline {
-    -ms-flex-align: baseline !important;
-    align-items: baseline !important;
+}
+@media (min-width: 768px) {
+  .float-md-start {
+    float: left !important;
   }
-  .align-items-lg-stretch {
-    -ms-flex-align: stretch !important;
-    align-items: stretch !important;
+
+  .float-md-end {
+    float: right !important;
   }
-  .align-content-lg-start {
-    -ms-flex-line-pack: start !important;
-    align-content: flex-start !important;
+
+  .float-md-none {
+    float: none !important;
   }
-  .align-content-lg-end {
-    -ms-flex-line-pack: end !important;
-    align-content: flex-end !important;
+
+  .d-md-inline {
+    display: inline !important;
   }
-  .align-content-lg-center {
-    -ms-flex-line-pack: center !important;
-    align-content: center !important;
+
+  .d-md-inline-block {
+    display: inline-block !important;
   }
-  .align-content-lg-between {
-    -ms-flex-line-pack: justify !important;
-    align-content: space-between !important;
+
+  .d-md-block {
+    display: block !important;
   }
-  .align-content-lg-around {
-    -ms-flex-line-pack: distribute !important;
-    align-content: space-around !important;
+
+  .d-md-grid {
+    display: grid !important;
   }
-  .align-content-lg-stretch {
-    -ms-flex-line-pack: stretch !important;
-    align-content: stretch !important;
+
+  .d-md-table {
+    display: table !important;
   }
-  .align-self-lg-auto {
-    -ms-flex-item-align: auto !important;
-    align-self: auto !important;
+
+  .d-md-table-row {
+    display: table-row !important;
   }
-  .align-self-lg-start {
-    -ms-flex-item-align: start !important;
-    align-self: flex-start !important;
+
+  .d-md-table-cell {
+    display: table-cell !important;
   }
-  .align-self-lg-end {
-    -ms-flex-item-align: end !important;
-    align-self: flex-end !important;
+
+  .d-md-flex {
+    display: flex !important;
   }
-  .align-self-lg-center {
-    -ms-flex-item-align: center !important;
-    align-self: center !important;
+
+  .d-md-inline-flex {
+    display: inline-flex !important;
   }
-  .align-self-lg-baseline {
-    -ms-flex-item-align: baseline !important;
-    align-self: baseline !important;
+
+  .d-md-none {
+    display: none !important;
   }
-  .align-self-lg-stretch {
-    -ms-flex-item-align: stretch !important;
-    align-self: stretch !important;
+
+  .flex-md-fill {
+    flex: 1 1 auto !important;
   }
-}
 
-@media (min-width: 1200px) {
-  .flex-xl-row {
-    -ms-flex-direction: row !important;
+  .flex-md-row {
     flex-direction: row !important;
   }
-  .flex-xl-column {
-    -ms-flex-direction: column !important;
+
+  .flex-md-column {
     flex-direction: column !important;
   }
-  .flex-xl-row-reverse {
-    -ms-flex-direction: row-reverse !important;
+
+  .flex-md-row-reverse {
     flex-direction: row-reverse !important;
   }
-  .flex-xl-column-reverse {
-    -ms-flex-direction: column-reverse !important;
+
+  .flex-md-column-reverse {
     flex-direction: column-reverse !important;
   }
-  .flex-xl-wrap {
-    -ms-flex-wrap: wrap !important;
+
+  .flex-md-grow-0 {
+    flex-grow: 0 !important;
+  }
+
+  .flex-md-grow-1 {
+    flex-grow: 1 !important;
+  }
+
+  .flex-md-shrink-0 {
+    flex-shrink: 0 !important;
+  }
+
+  .flex-md-shrink-1 {
+    flex-shrink: 1 !important;
+  }
+
+  .flex-md-wrap {
     flex-wrap: wrap !important;
   }
-  .flex-xl-nowrap {
-    -ms-flex-wrap: nowrap !important;
+
+  .flex-md-nowrap {
     flex-wrap: nowrap !important;
   }
-  .flex-xl-wrap-reverse {
-    -ms-flex-wrap: wrap-reverse !important;
+
+  .flex-md-wrap-reverse {
     flex-wrap: wrap-reverse !important;
   }
-  .flex-xl-fill {
-    -ms-flex: 1 1 auto !important;
-    flex: 1 1 auto !important;
+
+  .gap-md-0 {
+    gap: 0 !important;
   }
-  .flex-xl-grow-0 {
-    -ms-flex-positive: 0 !important;
-    flex-grow: 0 !important;
+
+  .gap-md-1 {
+    gap: 0.25rem !important;
   }
-  .flex-xl-grow-1 {
-    -ms-flex-positive: 1 !important;
-    flex-grow: 1 !important;
+
+  .gap-md-2 {
+    gap: 0.5rem !important;
   }
-  .flex-xl-shrink-0 {
-    -ms-flex-negative: 0 !important;
-    flex-shrink: 0 !important;
+
+  .gap-md-3 {
+    gap: 1rem !important;
   }
-  .flex-xl-shrink-1 {
-    -ms-flex-negative: 1 !important;
-    flex-shrink: 1 !important;
+
+  .gap-md-4 {
+    gap: 1.5rem !important;
   }
-  .justify-content-xl-start {
-    -ms-flex-pack: start !important;
+
+  .gap-md-5 {
+    gap: 3rem !important;
+  }
+
+  .justify-content-md-start {
     justify-content: flex-start !important;
   }
-  .justify-content-xl-end {
-    -ms-flex-pack: end !important;
+
+  .justify-content-md-end {
     justify-content: flex-end !important;
   }
-  .justify-content-xl-center {
-    -ms-flex-pack: center !important;
+
+  .justify-content-md-center {
     justify-content: center !important;
   }
-  .justify-content-xl-between {
-    -ms-flex-pack: justify !important;
+
+  .justify-content-md-between {
     justify-content: space-between !important;
   }
-  .justify-content-xl-around {
-    -ms-flex-pack: distribute !important;
+
+  .justify-content-md-around {
     justify-content: space-around !important;
   }
-  .align-items-xl-start {
-    -ms-flex-align: start !important;
+
+  .justify-content-md-evenly {
+    justify-content: space-evenly !important;
+  }
+
+  .align-items-md-start {
     align-items: flex-start !important;
   }
-  .align-items-xl-end {
-    -ms-flex-align: end !important;
+
+  .align-items-md-end {
     align-items: flex-end !important;
   }
-  .align-items-xl-center {
-    -ms-flex-align: center !important;
+
+  .align-items-md-center {
     align-items: center !important;
   }
-  .align-items-xl-baseline {
-    -ms-flex-align: baseline !important;
+
+  .align-items-md-baseline {
     align-items: baseline !important;
   }
-  .align-items-xl-stretch {
-    -ms-flex-align: stretch !important;
+
+  .align-items-md-stretch {
     align-items: stretch !important;
   }
-  .align-content-xl-start {
-    -ms-flex-line-pack: start !important;
+
+  .align-content-md-start {
     align-content: flex-start !important;
   }
-  .align-content-xl-end {
-    -ms-flex-line-pack: end !important;
+
+  .align-content-md-end {
     align-content: flex-end !important;
   }
-  .align-content-xl-center {
-    -ms-flex-line-pack: center !important;
+
+  .align-content-md-center {
     align-content: center !important;
   }
-  .align-content-xl-between {
-    -ms-flex-line-pack: justify !important;
+
+  .align-content-md-between {
     align-content: space-between !important;
   }
-  .align-content-xl-around {
-    -ms-flex-line-pack: distribute !important;
+
+  .align-content-md-around {
     align-content: space-around !important;
   }
-  .align-content-xl-stretch {
-    -ms-flex-line-pack: stretch !important;
+
+  .align-content-md-stretch {
     align-content: stretch !important;
   }
-  .align-self-xl-auto {
-    -ms-flex-item-align: auto !important;
+
+  .align-self-md-auto {
     align-self: auto !important;
   }
-  .align-self-xl-start {
-    -ms-flex-item-align: start !important;
+
+  .align-self-md-start {
     align-self: flex-start !important;
   }
-  .align-self-xl-end {
-    -ms-flex-item-align: end !important;
+
+  .align-self-md-end {
     align-self: flex-end !important;
   }
-  .align-self-xl-center {
-    -ms-flex-item-align: center !important;
+
+  .align-self-md-center {
     align-self: center !important;
   }
-  .align-self-xl-baseline {
-    -ms-flex-item-align: baseline !important;
+
+  .align-self-md-baseline {
     align-self: baseline !important;
   }
-  .align-self-xl-stretch {
-    -ms-flex-item-align: stretch !important;
+
+  .align-self-md-stretch {
     align-self: stretch !important;
   }
-}
 
-.float-left {
-  float: left !important;
-}
+  .order-md-first {
+    order: -1 !important;
+  }
 
-.float-right {
-  float: right !important;
-}
+  .order-md-0 {
+    order: 0 !important;
+  }
 
-.float-none {
-  float: none !important;
-}
+  .order-md-1 {
+    order: 1 !important;
+  }
 
-@media (min-width: 576px) {
-  .float-sm-left {
-    float: left !important;
+  .order-md-2 {
+    order: 2 !important;
   }
-  .float-sm-right {
-    float: right !important;
+
+  .order-md-3 {
+    order: 3 !important;
   }
-  .float-sm-none {
-    float: none !important;
+
+  .order-md-4 {
+    order: 4 !important;
   }
-}
 
-@media (min-width: 768px) {
-  .float-md-left {
-    float: left !important;
+  .order-md-5 {
+    order: 5 !important;
   }
-  .float-md-right {
-    float: right !important;
+
+  .order-md-last {
+    order: 6 !important;
   }
-  .float-md-none {
-    float: none !important;
+
+  .m-md-0 {
+    margin: 0 !important;
   }
-}
 
-@media (min-width: 992px) {
-  .float-lg-left {
-    float: left !important;
+  .m-md-1 {
+    margin: 0.25rem !important;
   }
-  .float-lg-right {
-    float: right !important;
+
+  .m-md-2 {
+    margin: 0.5rem !important;
   }
-  .float-lg-none {
-    float: none !important;
+
+  .m-md-3 {
+    margin: 1rem !important;
   }
-}
 
-@media (min-width: 1200px) {
-  .float-xl-left {
-    float: left !important;
+  .m-md-4 {
+    margin: 1.5rem !important;
   }
-  .float-xl-right {
-    float: right !important;
+
+  .m-md-5 {
+    margin: 3rem !important;
   }
-  .float-xl-none {
-    float: none !important;
+
+  .m-md-auto {
+    margin: auto !important;
   }
-}
 
-.user-select-all {
-  -webkit-user-select: all !important;
-  -moz-user-select: all !important;
-  -ms-user-select: all !important;
-  user-select: all !important;
-}
+  .mx-md-0 {
+    margin-right: 0 !important;
+    margin-left: 0 !important;
+  }
 
-.user-select-auto {
-  -webkit-user-select: auto !important;
-  -moz-user-select: auto !important;
-  -ms-user-select: auto !important;
-  user-select: auto !important;
-}
+  .mx-md-1 {
+    margin-right: 0.25rem !important;
+    margin-left: 0.25rem !important;
+  }
 
-.user-select-none {
-  -webkit-user-select: none !important;
-  -moz-user-select: none !important;
-  -ms-user-select: none !important;
-  user-select: none !important;
-}
+  .mx-md-2 {
+    margin-right: 0.5rem !important;
+    margin-left: 0.5rem !important;
+  }
 
-.overflow-auto {
-  overflow: auto !important;
-}
+  .mx-md-3 {
+    margin-right: 1rem !important;
+    margin-left: 1rem !important;
+  }
 
-.overflow-hidden {
-  overflow: hidden !important;
-}
+  .mx-md-4 {
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important;
+  }
 
-.position-static {
-  position: static !important;
-}
+  .mx-md-5 {
+    margin-right: 3rem !important;
+    margin-left: 3rem !important;
+  }
 
-.position-relative {
-  position: relative !important;
-}
+  .mx-md-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
+
+  .my-md-0 {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+
+  .my-md-1 {
+    margin-top: 0.25rem !important;
+    margin-bottom: 0.25rem !important;
+  }
+
+  .my-md-2 {
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.5rem !important;
+  }
+
+  .my-md-3 {
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important;
+  }
+
+  .my-md-4 {
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
+  }
+
+  .my-md-5 {
+    margin-top: 3rem !important;
+    margin-bottom: 3rem !important;
+  }
+
+  .my-md-auto {
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+  }
+
+  .mt-md-0 {
+    margin-top: 0 !important;
+  }
+
+  .mt-md-1 {
+    margin-top: 0.25rem !important;
+  }
+
+  .mt-md-2 {
+    margin-top: 0.5rem !important;
+  }
+
+  .mt-md-3 {
+    margin-top: 1rem !important;
+  }
+
+  .mt-md-4 {
+    margin-top: 1.5rem !important;
+  }
+
+  .mt-md-5 {
+    margin-top: 3rem !important;
+  }
+
+  .mt-md-auto {
+    margin-top: auto !important;
+  }
+
+  .me-md-0 {
+    margin-right: 0 !important;
+  }
+
+  .me-md-1 {
+    margin-right: 0.25rem !important;
+  }
+
+  .me-md-2 {
+    margin-right: 0.5rem !important;
+  }
+
+  .me-md-3 {
+    margin-right: 1rem !important;
+  }
+
+  .me-md-4 {
+    margin-right: 1.5rem !important;
+  }
+
+  .me-md-5 {
+    margin-right: 3rem !important;
+  }
+
+  .me-md-auto {
+    margin-right: auto !important;
+  }
+
+  .mb-md-0 {
+    margin-bottom: 0 !important;
+  }
 
-.position-absolute {
-  position: absolute !important;
-}
+  .mb-md-1 {
+    margin-bottom: 0.25rem !important;
+  }
 
-.position-fixed {
-  position: fixed !important;
-}
+  .mb-md-2 {
+    margin-bottom: 0.5rem !important;
+  }
 
-.position-sticky {
-  position: -webkit-sticky !important;
-  position: sticky !important;
-}
+  .mb-md-3 {
+    margin-bottom: 1rem !important;
+  }
 
-.fixed-top {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: 1030;
-}
+  .mb-md-4 {
+    margin-bottom: 1.5rem !important;
+  }
 
-.fixed-bottom {
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1030;
-}
+  .mb-md-5 {
+    margin-bottom: 3rem !important;
+  }
 
-@supports ((position: -webkit-sticky) or (position: sticky)) {
-  .sticky-top {
-    position: -webkit-sticky;
-    position: sticky;
-    top: 0;
-    z-index: 1020;
+  .mb-md-auto {
+    margin-bottom: auto !important;
   }
-}
 
-.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;
-}
+  .ms-md-0 {
+    margin-left: 0 !important;
+  }
 
-.sr-only-focusable:active, .sr-only-focusable:focus {
-  position: static;
-  width: auto;
-  height: auto;
-  overflow: visible;
-  clip: auto;
-  white-space: normal;
-}
+  .ms-md-1 {
+    margin-left: 0.25rem !important;
+  }
 
-.shadow-sm {
-  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
-}
+  .ms-md-2 {
+    margin-left: 0.5rem !important;
+  }
 
-.shadow {
-  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
-}
+  .ms-md-3 {
+    margin-left: 1rem !important;
+  }
 
-.shadow-lg {
-  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
-}
+  .ms-md-4 {
+    margin-left: 1.5rem !important;
+  }
 
-.shadow-none {
-  box-shadow: none !important;
-}
+  .ms-md-5 {
+    margin-left: 3rem !important;
+  }
 
-.w-25 {
-  width: 25% !important;
-}
+  .ms-md-auto {
+    margin-left: auto !important;
+  }
 
-.w-50 {
-  width: 50% !important;
-}
+  .p-md-0 {
+    padding: 0 !important;
+  }
 
-.w-75 {
-  width: 75% !important;
-}
+  .p-md-1 {
+    padding: 0.25rem !important;
+  }
 
-.w-100 {
-  width: 100% !important;
-}
+  .p-md-2 {
+    padding: 0.5rem !important;
+  }
 
-.w-auto {
-  width: auto !important;
-}
+  .p-md-3 {
+    padding: 1rem !important;
+  }
 
-.h-25 {
-  height: 25% !important;
-}
+  .p-md-4 {
+    padding: 1.5rem !important;
+  }
 
-.h-50 {
-  height: 50% !important;
-}
+  .p-md-5 {
+    padding: 3rem !important;
+  }
 
-.h-75 {
-  height: 75% !important;
-}
+  .px-md-0 {
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+  }
 
-.h-100 {
-  height: 100% !important;
-}
+  .px-md-1 {
+    padding-right: 0.25rem !important;
+    padding-left: 0.25rem !important;
+  }
 
-.h-auto {
-  height: auto !important;
-}
+  .px-md-2 {
+    padding-right: 0.5rem !important;
+    padding-left: 0.5rem !important;
+  }
 
-.mw-100 {
-  max-width: 100% !important;
-}
+  .px-md-3 {
+    padding-right: 1rem !important;
+    padding-left: 1rem !important;
+  }
 
-.mh-100 {
-  max-height: 100% !important;
-}
+  .px-md-4 {
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important;
+  }
 
-.min-vw-100 {
-  min-width: 100vw !important;
-}
+  .px-md-5 {
+    padding-right: 3rem !important;
+    padding-left: 3rem !important;
+  }
 
-.min-vh-100 {
-  min-height: 100vh !important;
-}
+  .py-md-0 {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
 
-.vw-100 {
-  width: 100vw !important;
-}
+  .py-md-1 {
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important;
+  }
 
-.vh-100 {
-  height: 100vh !important;
-}
+  .py-md-2 {
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important;
+  }
 
-.m-0 {
-  margin: 0 !important;
-}
+  .py-md-3 {
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important;
+  }
 
-.mt-0,
-.my-0 {
-  margin-top: 0 !important;
-}
+  .py-md-4 {
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important;
+  }
 
-.mr-0,
-.mx-0 {
-  margin-right: 0 !important;
-}
+  .py-md-5 {
+    padding-top: 3rem !important;
+    padding-bottom: 3rem !important;
+  }
 
-.mb-0,
-.my-0 {
-  margin-bottom: 0 !important;
-}
+  .pt-md-0 {
+    padding-top: 0 !important;
+  }
 
-.ml-0,
-.mx-0 {
-  margin-left: 0 !important;
-}
+  .pt-md-1 {
+    padding-top: 0.25rem !important;
+  }
 
-.m-1 {
-  margin: 0.25rem !important;
-}
+  .pt-md-2 {
+    padding-top: 0.5rem !important;
+  }
 
-.mt-1,
-.my-1 {
-  margin-top: 0.25rem !important;
-}
+  .pt-md-3 {
+    padding-top: 1rem !important;
+  }
 
-.mr-1,
-.mx-1 {
-  margin-right: 0.25rem !important;
-}
+  .pt-md-4 {
+    padding-top: 1.5rem !important;
+  }
 
-.mb-1,
-.my-1 {
-  margin-bottom: 0.25rem !important;
-}
+  .pt-md-5 {
+    padding-top: 3rem !important;
+  }
 
-.ml-1,
-.mx-1 {
-  margin-left: 0.25rem !important;
-}
+  .pe-md-0 {
+    padding-right: 0 !important;
+  }
 
-.m-2 {
-  margin: 0.5rem !important;
-}
+  .pe-md-1 {
+    padding-right: 0.25rem !important;
+  }
 
-.mt-2,
-.my-2 {
-  margin-top: 0.5rem !important;
-}
+  .pe-md-2 {
+    padding-right: 0.5rem !important;
+  }
 
-.mr-2,
-.mx-2 {
-  margin-right: 0.5rem !important;
-}
+  .pe-md-3 {
+    padding-right: 1rem !important;
+  }
+
+  .pe-md-4 {
+    padding-right: 1.5rem !important;
+  }
 
-.mb-2,
-.my-2 {
-  margin-bottom: 0.5rem !important;
-}
+  .pe-md-5 {
+    padding-right: 3rem !important;
+  }
 
-.ml-2,
-.mx-2 {
-  margin-left: 0.5rem !important;
-}
+  .pb-md-0 {
+    padding-bottom: 0 !important;
+  }
 
-.m-3 {
-  margin: 1rem !important;
-}
+  .pb-md-1 {
+    padding-bottom: 0.25rem !important;
+  }
 
-.mt-3,
-.my-3 {
-  margin-top: 1rem !important;
-}
+  .pb-md-2 {
+    padding-bottom: 0.5rem !important;
+  }
 
-.mr-3,
-.mx-3 {
-  margin-right: 1rem !important;
-}
+  .pb-md-3 {
+    padding-bottom: 1rem !important;
+  }
 
-.mb-3,
-.my-3 {
-  margin-bottom: 1rem !important;
-}
+  .pb-md-4 {
+    padding-bottom: 1.5rem !important;
+  }
 
-.ml-3,
-.mx-3 {
-  margin-left: 1rem !important;
-}
+  .pb-md-5 {
+    padding-bottom: 3rem !important;
+  }
 
-.m-4 {
-  margin: 1.5rem !important;
-}
+  .ps-md-0 {
+    padding-left: 0 !important;
+  }
 
-.mt-4,
-.my-4 {
-  margin-top: 1.5rem !important;
-}
+  .ps-md-1 {
+    padding-left: 0.25rem !important;
+  }
 
-.mr-4,
-.mx-4 {
-  margin-right: 1.5rem !important;
-}
+  .ps-md-2 {
+    padding-left: 0.5rem !important;
+  }
 
-.mb-4,
-.my-4 {
-  margin-bottom: 1.5rem !important;
-}
+  .ps-md-3 {
+    padding-left: 1rem !important;
+  }
 
-.ml-4,
-.mx-4 {
-  margin-left: 1.5rem !important;
-}
+  .ps-md-4 {
+    padding-left: 1.5rem !important;
+  }
 
-.m-5 {
-  margin: 3rem !important;
-}
+  .ps-md-5 {
+    padding-left: 3rem !important;
+  }
 
-.mt-5,
-.my-5 {
-  margin-top: 3rem !important;
-}
+  .text-md-start {
+    text-align: left !important;
+  }
 
-.mr-5,
-.mx-5 {
-  margin-right: 3rem !important;
-}
+  .text-md-end {
+    text-align: right !important;
+  }
 
-.mb-5,
-.my-5 {
-  margin-bottom: 3rem !important;
+  .text-md-center {
+    text-align: center !important;
+  }
 }
+@media (min-width: 992px) {
+  .float-lg-start {
+    float: left !important;
+  }
 
-.ml-5,
-.mx-5 {
-  margin-left: 3rem !important;
-}
+  .float-lg-end {
+    float: right !important;
+  }
 
-.p-0 {
-  padding: 0 !important;
-}
+  .float-lg-none {
+    float: none !important;
+  }
 
-.pt-0,
-.py-0 {
-  padding-top: 0 !important;
-}
+  .d-lg-inline {
+    display: inline !important;
+  }
 
-.pr-0,
-.px-0 {
-  padding-right: 0 !important;
-}
+  .d-lg-inline-block {
+    display: inline-block !important;
+  }
 
-.pb-0,
-.py-0 {
-  padding-bottom: 0 !important;
-}
+  .d-lg-block {
+    display: block !important;
+  }
 
-.pl-0,
-.px-0 {
-  padding-left: 0 !important;
-}
+  .d-lg-grid {
+    display: grid !important;
+  }
 
-.p-1 {
-  padding: 0.25rem !important;
-}
+  .d-lg-table {
+    display: table !important;
+  }
 
-.pt-1,
-.py-1 {
-  padding-top: 0.25rem !important;
-}
+  .d-lg-table-row {
+    display: table-row !important;
+  }
 
-.pr-1,
-.px-1 {
-  padding-right: 0.25rem !important;
-}
+  .d-lg-table-cell {
+    display: table-cell !important;
+  }
 
-.pb-1,
-.py-1 {
-  padding-bottom: 0.25rem !important;
-}
+  .d-lg-flex {
+    display: flex !important;
+  }
 
-.pl-1,
-.px-1 {
-  padding-left: 0.25rem !important;
-}
+  .d-lg-inline-flex {
+    display: inline-flex !important;
+  }
 
-.p-2 {
-  padding: 0.5rem !important;
-}
+  .d-lg-none {
+    display: none !important;
+  }
 
-.pt-2,
-.py-2 {
-  padding-top: 0.5rem !important;
-}
+  .flex-lg-fill {
+    flex: 1 1 auto !important;
+  }
 
-.pr-2,
-.px-2 {
-  padding-right: 0.5rem !important;
-}
+  .flex-lg-row {
+    flex-direction: row !important;
+  }
 
-.pb-2,
-.py-2 {
-  padding-bottom: 0.5rem !important;
-}
+  .flex-lg-column {
+    flex-direction: column !important;
+  }
 
-.pl-2,
-.px-2 {
-  padding-left: 0.5rem !important;
-}
+  .flex-lg-row-reverse {
+    flex-direction: row-reverse !important;
+  }
 
-.p-3 {
-  padding: 1rem !important;
-}
+  .flex-lg-column-reverse {
+    flex-direction: column-reverse !important;
+  }
 
-.pt-3,
-.py-3 {
-  padding-top: 1rem !important;
-}
+  .flex-lg-grow-0 {
+    flex-grow: 0 !important;
+  }
 
-.pr-3,
-.px-3 {
-  padding-right: 1rem !important;
-}
+  .flex-lg-grow-1 {
+    flex-grow: 1 !important;
+  }
 
-.pb-3,
-.py-3 {
-  padding-bottom: 1rem !important;
-}
+  .flex-lg-shrink-0 {
+    flex-shrink: 0 !important;
+  }
 
-.pl-3,
-.px-3 {
-  padding-left: 1rem !important;
-}
+  .flex-lg-shrink-1 {
+    flex-shrink: 1 !important;
+  }
 
-.p-4 {
-  padding: 1.5rem !important;
-}
+  .flex-lg-wrap {
+    flex-wrap: wrap !important;
+  }
 
-.pt-4,
-.py-4 {
-  padding-top: 1.5rem !important;
-}
+  .flex-lg-nowrap {
+    flex-wrap: nowrap !important;
+  }
 
-.pr-4,
-.px-4 {
-  padding-right: 1.5rem !important;
-}
+  .flex-lg-wrap-reverse {
+    flex-wrap: wrap-reverse !important;
+  }
 
-.pb-4,
-.py-4 {
-  padding-bottom: 1.5rem !important;
-}
+  .gap-lg-0 {
+    gap: 0 !important;
+  }
 
-.pl-4,
-.px-4 {
-  padding-left: 1.5rem !important;
-}
+  .gap-lg-1 {
+    gap: 0.25rem !important;
+  }
 
-.p-5 {
-  padding: 3rem !important;
-}
+  .gap-lg-2 {
+    gap: 0.5rem !important;
+  }
 
-.pt-5,
-.py-5 {
-  padding-top: 3rem !important;
-}
+  .gap-lg-3 {
+    gap: 1rem !important;
+  }
 
-.pr-5,
-.px-5 {
-  padding-right: 3rem !important;
-}
+  .gap-lg-4 {
+    gap: 1.5rem !important;
+  }
 
-.pb-5,
-.py-5 {
-  padding-bottom: 3rem !important;
-}
+  .gap-lg-5 {
+    gap: 3rem !important;
+  }
 
-.pl-5,
-.px-5 {
-  padding-left: 3rem !important;
-}
+  .justify-content-lg-start {
+    justify-content: flex-start !important;
+  }
 
-.m-n1 {
-  margin: -0.25rem !important;
-}
+  .justify-content-lg-end {
+    justify-content: flex-end !important;
+  }
 
-.mt-n1,
-.my-n1 {
-  margin-top: -0.25rem !important;
-}
+  .justify-content-lg-center {
+    justify-content: center !important;
+  }
 
-.mr-n1,
-.mx-n1 {
-  margin-right: -0.25rem !important;
-}
+  .justify-content-lg-between {
+    justify-content: space-between !important;
+  }
 
-.mb-n1,
-.my-n1 {
-  margin-bottom: -0.25rem !important;
-}
+  .justify-content-lg-around {
+    justify-content: space-around !important;
+  }
 
-.ml-n1,
-.mx-n1 {
-  margin-left: -0.25rem !important;
-}
+  .justify-content-lg-evenly {
+    justify-content: space-evenly !important;
+  }
 
-.m-n2 {
-  margin: -0.5rem !important;
-}
+  .align-items-lg-start {
+    align-items: flex-start !important;
+  }
 
-.mt-n2,
-.my-n2 {
-  margin-top: -0.5rem !important;
-}
+  .align-items-lg-end {
+    align-items: flex-end !important;
+  }
 
-.mr-n2,
-.mx-n2 {
-  margin-right: -0.5rem !important;
-}
+  .align-items-lg-center {
+    align-items: center !important;
+  }
 
-.mb-n2,
-.my-n2 {
-  margin-bottom: -0.5rem !important;
-}
+  .align-items-lg-baseline {
+    align-items: baseline !important;
+  }
 
-.ml-n2,
-.mx-n2 {
-  margin-left: -0.5rem !important;
-}
+  .align-items-lg-stretch {
+    align-items: stretch !important;
+  }
 
-.m-n3 {
-  margin: -1rem !important;
-}
+  .align-content-lg-start {
+    align-content: flex-start !important;
+  }
 
-.mt-n3,
-.my-n3 {
-  margin-top: -1rem !important;
-}
+  .align-content-lg-end {
+    align-content: flex-end !important;
+  }
 
-.mr-n3,
-.mx-n3 {
-  margin-right: -1rem !important;
-}
+  .align-content-lg-center {
+    align-content: center !important;
+  }
 
-.mb-n3,
-.my-n3 {
-  margin-bottom: -1rem !important;
-}
+  .align-content-lg-between {
+    align-content: space-between !important;
+  }
 
-.ml-n3,
-.mx-n3 {
-  margin-left: -1rem !important;
-}
+  .align-content-lg-around {
+    align-content: space-around !important;
+  }
 
-.m-n4 {
-  margin: -1.5rem !important;
-}
+  .align-content-lg-stretch {
+    align-content: stretch !important;
+  }
 
-.mt-n4,
-.my-n4 {
-  margin-top: -1.5rem !important;
-}
+  .align-self-lg-auto {
+    align-self: auto !important;
+  }
 
-.mr-n4,
-.mx-n4 {
-  margin-right: -1.5rem !important;
-}
+  .align-self-lg-start {
+    align-self: flex-start !important;
+  }
 
-.mb-n4,
-.my-n4 {
-  margin-bottom: -1.5rem !important;
-}
+  .align-self-lg-end {
+    align-self: flex-end !important;
+  }
 
-.ml-n4,
-.mx-n4 {
-  margin-left: -1.5rem !important;
-}
+  .align-self-lg-center {
+    align-self: center !important;
+  }
 
-.m-n5 {
-  margin: -3rem !important;
-}
+  .align-self-lg-baseline {
+    align-self: baseline !important;
+  }
 
-.mt-n5,
-.my-n5 {
-  margin-top: -3rem !important;
-}
+  .align-self-lg-stretch {
+    align-self: stretch !important;
+  }
 
-.mr-n5,
-.mx-n5 {
-  margin-right: -3rem !important;
-}
+  .order-lg-first {
+    order: -1 !important;
+  }
 
-.mb-n5,
-.my-n5 {
-  margin-bottom: -3rem !important;
-}
+  .order-lg-0 {
+    order: 0 !important;
+  }
 
-.ml-n5,
-.mx-n5 {
-  margin-left: -3rem !important;
-}
+  .order-lg-1 {
+    order: 1 !important;
+  }
 
-.m-auto {
-  margin: auto !important;
-}
+  .order-lg-2 {
+    order: 2 !important;
+  }
 
-.mt-auto,
-.my-auto {
-  margin-top: auto !important;
-}
+  .order-lg-3 {
+    order: 3 !important;
+  }
 
-.mr-auto,
-.mx-auto {
-  margin-right: auto !important;
-}
+  .order-lg-4 {
+    order: 4 !important;
+  }
 
-.mb-auto,
-.my-auto {
-  margin-bottom: auto !important;
-}
+  .order-lg-5 {
+    order: 5 !important;
+  }
 
-.ml-auto,
-.mx-auto {
-  margin-left: auto !important;
-}
+  .order-lg-last {
+    order: 6 !important;
+  }
 
-@media (min-width: 576px) {
-  .m-sm-0 {
+  .m-lg-0 {
     margin: 0 !important;
   }
-  .mt-sm-0,
-  .my-sm-0 {
-    margin-top: 0 !important;
-  }
-  .mr-sm-0,
-  .mx-sm-0 {
-    margin-right: 0 !important;
+
+  .m-lg-1 {
+    margin: 0.25rem !important;
   }
-  .mb-sm-0,
-  .my-sm-0 {
-    margin-bottom: 0 !important;
+
+  .m-lg-2 {
+    margin: 0.5rem !important;
   }
-  .ml-sm-0,
-  .mx-sm-0 {
-    margin-left: 0 !important;
+
+  .m-lg-3 {
+    margin: 1rem !important;
   }
-  .m-sm-1 {
-    margin: 0.25rem !important;
+
+  .m-lg-4 {
+    margin: 1.5rem !important;
   }
-  .mt-sm-1,
-  .my-sm-1 {
-    margin-top: 0.25rem !important;
+
+  .m-lg-5 {
+    margin: 3rem !important;
   }
-  .mr-sm-1,
-  .mx-sm-1 {
-    margin-right: 0.25rem !important;
+
+  .m-lg-auto {
+    margin: auto !important;
   }
-  .mb-sm-1,
-  .my-sm-1 {
-    margin-bottom: 0.25rem !important;
+
+  .mx-lg-0 {
+    margin-right: 0 !important;
+    margin-left: 0 !important;
   }
-  .ml-sm-1,
-  .mx-sm-1 {
+
+  .mx-lg-1 {
+    margin-right: 0.25rem !important;
     margin-left: 0.25rem !important;
   }
-  .m-sm-2 {
-    margin: 0.5rem !important;
+
+  .mx-lg-2 {
+    margin-right: 0.5rem !important;
+    margin-left: 0.5rem !important;
   }
-  .mt-sm-2,
-  .my-sm-2 {
-    margin-top: 0.5rem !important;
+
+  .mx-lg-3 {
+    margin-right: 1rem !important;
+    margin-left: 1rem !important;
   }
-  .mr-sm-2,
-  .mx-sm-2 {
-    margin-right: 0.5rem !important;
+
+  .mx-lg-4 {
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important;
   }
-  .mb-sm-2,
-  .my-sm-2 {
-    margin-bottom: 0.5rem !important;
+
+  .mx-lg-5 {
+    margin-right: 3rem !important;
+    margin-left: 3rem !important;
   }
-  .ml-sm-2,
-  .mx-sm-2 {
-    margin-left: 0.5rem !important;
+
+  .mx-lg-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
   }
-  .m-sm-3 {
-    margin: 1rem !important;
+
+  .my-lg-0 {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
   }
-  .mt-sm-3,
-  .my-sm-3 {
-    margin-top: 1rem !important;
+
+  .my-lg-1 {
+    margin-top: 0.25rem !important;
+    margin-bottom: 0.25rem !important;
   }
-  .mr-sm-3,
-  .mx-sm-3 {
-    margin-right: 1rem !important;
+
+  .my-lg-2 {
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.5rem !important;
   }
-  .mb-sm-3,
-  .my-sm-3 {
+
+  .my-lg-3 {
+    margin-top: 1rem !important;
     margin-bottom: 1rem !important;
   }
-  .ml-sm-3,
-  .mx-sm-3 {
-    margin-left: 1rem !important;
+
+  .my-lg-4 {
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
   }
-  .m-sm-4 {
-    margin: 1.5rem !important;
+
+  .my-lg-5 {
+    margin-top: 3rem !important;
+    margin-bottom: 3rem !important;
   }
-  .mt-sm-4,
-  .my-sm-4 {
-    margin-top: 1.5rem !important;
+
+  .my-lg-auto {
+    margin-top: auto !important;
+    margin-bottom: auto !important;
   }
-  .mr-sm-4,
-  .mx-sm-4 {
-    margin-right: 1.5rem !important;
+
+  .mt-lg-0 {
+    margin-top: 0 !important;
   }
-  .mb-sm-4,
-  .my-sm-4 {
-    margin-bottom: 1.5rem !important;
+
+  .mt-lg-1 {
+    margin-top: 0.25rem !important;
   }
-  .ml-sm-4,
-  .mx-sm-4 {
-    margin-left: 1.5rem !important;
+
+  .mt-lg-2 {
+    margin-top: 0.5rem !important;
   }
-  .m-sm-5 {
-    margin: 3rem !important;
+
+  .mt-lg-3 {
+    margin-top: 1rem !important;
   }
-  .mt-sm-5,
-  .my-sm-5 {
+
+  .mt-lg-4 {
+    margin-top: 1.5rem !important;
+  }
+
+  .mt-lg-5 {
     margin-top: 3rem !important;
   }
-  .mr-sm-5,
-  .mx-sm-5 {
-    margin-right: 3rem !important;
-  }
-  .mb-sm-5,
-  .my-sm-5 {
-    margin-bottom: 3rem !important;
+
+  .mt-lg-auto {
+    margin-top: auto !important;
   }
-  .ml-sm-5,
-  .mx-sm-5 {
-    margin-left: 3rem !important;
+
+  .me-lg-0 {
+    margin-right: 0 !important;
   }
-  .p-sm-0 {
-    padding: 0 !important;
+
+  .me-lg-1 {
+    margin-right: 0.25rem !important;
   }
-  .pt-sm-0,
-  .py-sm-0 {
-    padding-top: 0 !important;
+
+  .me-lg-2 {
+    margin-right: 0.5rem !important;
   }
-  .pr-sm-0,
-  .px-sm-0 {
-    padding-right: 0 !important;
+
+  .me-lg-3 {
+    margin-right: 1rem !important;
   }
-  .pb-sm-0,
-  .py-sm-0 {
-    padding-bottom: 0 !important;
+
+  .me-lg-4 {
+    margin-right: 1.5rem !important;
   }
-  .pl-sm-0,
-  .px-sm-0 {
-    padding-left: 0 !important;
+
+  .me-lg-5 {
+    margin-right: 3rem !important;
   }
-  .p-sm-1 {
-    padding: 0.25rem !important;
+
+  .me-lg-auto {
+    margin-right: auto !important;
   }
-  .pt-sm-1,
-  .py-sm-1 {
-    padding-top: 0.25rem !important;
+
+  .mb-lg-0 {
+    margin-bottom: 0 !important;
   }
-  .pr-sm-1,
-  .px-sm-1 {
-    padding-right: 0.25rem !important;
+
+  .mb-lg-1 {
+    margin-bottom: 0.25rem !important;
   }
-  .pb-sm-1,
-  .py-sm-1 {
-    padding-bottom: 0.25rem !important;
+
+  .mb-lg-2 {
+    margin-bottom: 0.5rem !important;
   }
-  .pl-sm-1,
-  .px-sm-1 {
-    padding-left: 0.25rem !important;
+
+  .mb-lg-3 {
+    margin-bottom: 1rem !important;
   }
-  .p-sm-2 {
-    padding: 0.5rem !important;
+
+  .mb-lg-4 {
+    margin-bottom: 1.5rem !important;
   }
-  .pt-sm-2,
-  .py-sm-2 {
-    padding-top: 0.5rem !important;
+
+  .mb-lg-5 {
+    margin-bottom: 3rem !important;
   }
-  .pr-sm-2,
-  .px-sm-2 {
-    padding-right: 0.5rem !important;
+
+  .mb-lg-auto {
+    margin-bottom: auto !important;
   }
-  .pb-sm-2,
-  .py-sm-2 {
-    padding-bottom: 0.5rem !important;
+
+  .ms-lg-0 {
+    margin-left: 0 !important;
   }
-  .pl-sm-2,
-  .px-sm-2 {
-    padding-left: 0.5rem !important;
+
+  .ms-lg-1 {
+    margin-left: 0.25rem !important;
   }
-  .p-sm-3 {
-    padding: 1rem !important;
+
+  .ms-lg-2 {
+    margin-left: 0.5rem !important;
   }
-  .pt-sm-3,
-  .py-sm-3 {
-    padding-top: 1rem !important;
+
+  .ms-lg-3 {
+    margin-left: 1rem !important;
   }
-  .pr-sm-3,
-  .px-sm-3 {
-    padding-right: 1rem !important;
+
+  .ms-lg-4 {
+    margin-left: 1.5rem !important;
   }
-  .pb-sm-3,
-  .py-sm-3 {
-    padding-bottom: 1rem !important;
+
+  .ms-lg-5 {
+    margin-left: 3rem !important;
   }
-  .pl-sm-3,
-  .px-sm-3 {
-    padding-left: 1rem !important;
+
+  .ms-lg-auto {
+    margin-left: auto !important;
   }
-  .p-sm-4 {
-    padding: 1.5rem !important;
+
+  .p-lg-0 {
+    padding: 0 !important;
   }
-  .pt-sm-4,
-  .py-sm-4 {
-    padding-top: 1.5rem !important;
+
+  .p-lg-1 {
+    padding: 0.25rem !important;
   }
-  .pr-sm-4,
-  .px-sm-4 {
-    padding-right: 1.5rem !important;
+
+  .p-lg-2 {
+    padding: 0.5rem !important;
   }
-  .pb-sm-4,
-  .py-sm-4 {
-    padding-bottom: 1.5rem !important;
+
+  .p-lg-3 {
+    padding: 1rem !important;
   }
-  .pl-sm-4,
-  .px-sm-4 {
-    padding-left: 1.5rem !important;
+
+  .p-lg-4 {
+    padding: 1.5rem !important;
   }
-  .p-sm-5 {
+
+  .p-lg-5 {
     padding: 3rem !important;
   }
-  .pt-sm-5,
-  .py-sm-5 {
-    padding-top: 3rem !important;
+
+  .px-lg-0 {
+    padding-right: 0 !important;
+    padding-left: 0 !important;
   }
-  .pr-sm-5,
-  .px-sm-5 {
-    padding-right: 3rem !important;
+
+  .px-lg-1 {
+    padding-right: 0.25rem !important;
+    padding-left: 0.25rem !important;
   }
-  .pb-sm-5,
-  .py-sm-5 {
-    padding-bottom: 3rem !important;
+
+  .px-lg-2 {
+    padding-right: 0.5rem !important;
+    padding-left: 0.5rem !important;
   }
-  .pl-sm-5,
-  .px-sm-5 {
-    padding-left: 3rem !important;
+
+  .px-lg-3 {
+    padding-right: 1rem !important;
+    padding-left: 1rem !important;
   }
-  .m-sm-n1 {
-    margin: -0.25rem !important;
+
+  .px-lg-4 {
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important;
   }
-  .mt-sm-n1,
-  .my-sm-n1 {
-    margin-top: -0.25rem !important;
+
+  .px-lg-5 {
+    padding-right: 3rem !important;
+    padding-left: 3rem !important;
   }
-  .mr-sm-n1,
-  .mx-sm-n1 {
-    margin-right: -0.25rem !important;
+
+  .py-lg-0 {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
   }
-  .mb-sm-n1,
-  .my-sm-n1 {
-    margin-bottom: -0.25rem !important;
+
+  .py-lg-1 {
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important;
   }
-  .ml-sm-n1,
-  .mx-sm-n1 {
-    margin-left: -0.25rem !important;
+
+  .py-lg-2 {
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important;
   }
-  .m-sm-n2 {
-    margin: -0.5rem !important;
+
+  .py-lg-3 {
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important;
   }
-  .mt-sm-n2,
-  .my-sm-n2 {
-    margin-top: -0.5rem !important;
+
+  .py-lg-4 {
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important;
   }
-  .mr-sm-n2,
-  .mx-sm-n2 {
-    margin-right: -0.5rem !important;
+
+  .py-lg-5 {
+    padding-top: 3rem !important;
+    padding-bottom: 3rem !important;
   }
-  .mb-sm-n2,
-  .my-sm-n2 {
-    margin-bottom: -0.5rem !important;
+
+  .pt-lg-0 {
+    padding-top: 0 !important;
   }
-  .ml-sm-n2,
-  .mx-sm-n2 {
-    margin-left: -0.5rem !important;
+
+  .pt-lg-1 {
+    padding-top: 0.25rem !important;
   }
-  .m-sm-n3 {
-    margin: -1rem !important;
+
+  .pt-lg-2 {
+    padding-top: 0.5rem !important;
   }
-  .mt-sm-n3,
-  .my-sm-n3 {
-    margin-top: -1rem !important;
+
+  .pt-lg-3 {
+    padding-top: 1rem !important;
   }
-  .mr-sm-n3,
-  .mx-sm-n3 {
-    margin-right: -1rem !important;
+
+  .pt-lg-4 {
+    padding-top: 1.5rem !important;
   }
-  .mb-sm-n3,
-  .my-sm-n3 {
-    margin-bottom: -1rem !important;
+
+  .pt-lg-5 {
+    padding-top: 3rem !important;
   }
-  .ml-sm-n3,
-  .mx-sm-n3 {
-    margin-left: -1rem !important;
+
+  .pe-lg-0 {
+    padding-right: 0 !important;
   }
-  .m-sm-n4 {
-    margin: -1.5rem !important;
+
+  .pe-lg-1 {
+    padding-right: 0.25rem !important;
   }
-  .mt-sm-n4,
-  .my-sm-n4 {
-    margin-top: -1.5rem !important;
+
+  .pe-lg-2 {
+    padding-right: 0.5rem !important;
   }
-  .mr-sm-n4,
-  .mx-sm-n4 {
-    margin-right: -1.5rem !important;
+
+  .pe-lg-3 {
+    padding-right: 1rem !important;
   }
-  .mb-sm-n4,
-  .my-sm-n4 {
-    margin-bottom: -1.5rem !important;
+
+  .pe-lg-4 {
+    padding-right: 1.5rem !important;
   }
-  .ml-sm-n4,
-  .mx-sm-n4 {
-    margin-left: -1.5rem !important;
+
+  .pe-lg-5 {
+    padding-right: 3rem !important;
   }
-  .m-sm-n5 {
-    margin: -3rem !important;
+
+  .pb-lg-0 {
+    padding-bottom: 0 !important;
   }
-  .mt-sm-n5,
-  .my-sm-n5 {
-    margin-top: -3rem !important;
+
+  .pb-lg-1 {
+    padding-bottom: 0.25rem !important;
   }
-  .mr-sm-n5,
-  .mx-sm-n5 {
-    margin-right: -3rem !important;
+
+  .pb-lg-2 {
+    padding-bottom: 0.5rem !important;
   }
-  .mb-sm-n5,
-  .my-sm-n5 {
-    margin-bottom: -3rem !important;
+
+  .pb-lg-3 {
+    padding-bottom: 1rem !important;
   }
-  .ml-sm-n5,
-  .mx-sm-n5 {
-    margin-left: -3rem !important;
+
+  .pb-lg-4 {
+    padding-bottom: 1.5rem !important;
   }
-  .m-sm-auto {
-    margin: auto !important;
+
+  .pb-lg-5 {
+    padding-bottom: 3rem !important;
   }
-  .mt-sm-auto,
-  .my-sm-auto {
-    margin-top: auto !important;
+
+  .ps-lg-0 {
+    padding-left: 0 !important;
   }
-  .mr-sm-auto,
-  .mx-sm-auto {
-    margin-right: auto !important;
+
+  .ps-lg-1 {
+    padding-left: 0.25rem !important;
   }
-  .mb-sm-auto,
-  .my-sm-auto {
-    margin-bottom: auto !important;
+
+  .ps-lg-2 {
+    padding-left: 0.5rem !important;
   }
-  .ml-sm-auto,
-  .mx-sm-auto {
-    margin-left: auto !important;
+
+  .ps-lg-3 {
+    padding-left: 1rem !important;
   }
-}
 
-@media (min-width: 768px) {
-  .m-md-0 {
-    margin: 0 !important;
+  .ps-lg-4 {
+    padding-left: 1.5rem !important;
   }
-  .mt-md-0,
-  .my-md-0 {
-    margin-top: 0 !important;
+
+  .ps-lg-5 {
+    padding-left: 3rem !important;
   }
-  .mr-md-0,
-  .mx-md-0 {
-    margin-right: 0 !important;
+
+  .text-lg-start {
+    text-align: left !important;
   }
-  .mb-md-0,
-  .my-md-0 {
-    margin-bottom: 0 !important;
+
+  .text-lg-end {
+    text-align: right !important;
   }
-  .ml-md-0,
-  .mx-md-0 {
-    margin-left: 0 !important;
+
+  .text-lg-center {
+    text-align: center !important;
   }
-  .m-md-1 {
-    margin: 0.25rem !important;
+}
+@media (min-width: 1200px) {
+  .float-xl-start {
+    float: left !important;
   }
-  .mt-md-1,
-  .my-md-1 {
-    margin-top: 0.25rem !important;
+
+  .float-xl-end {
+    float: right !important;
   }
-  .mr-md-1,
-  .mx-md-1 {
-    margin-right: 0.25rem !important;
+
+  .float-xl-none {
+    float: none !important;
   }
-  .mb-md-1,
-  .my-md-1 {
-    margin-bottom: 0.25rem !important;
+
+  .d-xl-inline {
+    display: inline !important;
   }
-  .ml-md-1,
-  .mx-md-1 {
-    margin-left: 0.25rem !important;
+
+  .d-xl-inline-block {
+    display: inline-block !important;
   }
-  .m-md-2 {
-    margin: 0.5rem !important;
+
+  .d-xl-block {
+    display: block !important;
   }
-  .mt-md-2,
-  .my-md-2 {
-    margin-top: 0.5rem !important;
+
+  .d-xl-grid {
+    display: grid !important;
   }
-  .mr-md-2,
-  .mx-md-2 {
-    margin-right: 0.5rem !important;
+
+  .d-xl-table {
+    display: table !important;
   }
-  .mb-md-2,
-  .my-md-2 {
-    margin-bottom: 0.5rem !important;
+
+  .d-xl-table-row {
+    display: table-row !important;
   }
-  .ml-md-2,
-  .mx-md-2 {
-    margin-left: 0.5rem !important;
+
+  .d-xl-table-cell {
+    display: table-cell !important;
   }
-  .m-md-3 {
-    margin: 1rem !important;
+
+  .d-xl-flex {
+    display: flex !important;
   }
-  .mt-md-3,
-  .my-md-3 {
-    margin-top: 1rem !important;
+
+  .d-xl-inline-flex {
+    display: inline-flex !important;
   }
-  .mr-md-3,
-  .mx-md-3 {
-    margin-right: 1rem !important;
+
+  .d-xl-none {
+    display: none !important;
   }
-  .mb-md-3,
-  .my-md-3 {
-    margin-bottom: 1rem !important;
+
+  .flex-xl-fill {
+    flex: 1 1 auto !important;
   }
-  .ml-md-3,
-  .mx-md-3 {
-    margin-left: 1rem !important;
+
+  .flex-xl-row {
+    flex-direction: row !important;
   }
-  .m-md-4 {
-    margin: 1.5rem !important;
+
+  .flex-xl-column {
+    flex-direction: column !important;
   }
-  .mt-md-4,
-  .my-md-4 {
-    margin-top: 1.5rem !important;
+
+  .flex-xl-row-reverse {
+    flex-direction: row-reverse !important;
   }
-  .mr-md-4,
-  .mx-md-4 {
-    margin-right: 1.5rem !important;
+
+  .flex-xl-column-reverse {
+    flex-direction: column-reverse !important;
   }
-  .mb-md-4,
-  .my-md-4 {
-    margin-bottom: 1.5rem !important;
+
+  .flex-xl-grow-0 {
+    flex-grow: 0 !important;
   }
-  .ml-md-4,
-  .mx-md-4 {
-    margin-left: 1.5rem !important;
+
+  .flex-xl-grow-1 {
+    flex-grow: 1 !important;
   }
-  .m-md-5 {
-    margin: 3rem !important;
+
+  .flex-xl-shrink-0 {
+    flex-shrink: 0 !important;
   }
-  .mt-md-5,
-  .my-md-5 {
-    margin-top: 3rem !important;
+
+  .flex-xl-shrink-1 {
+    flex-shrink: 1 !important;
   }
-  .mr-md-5,
-  .mx-md-5 {
-    margin-right: 3rem !important;
+
+  .flex-xl-wrap {
+    flex-wrap: wrap !important;
   }
-  .mb-md-5,
-  .my-md-5 {
-    margin-bottom: 3rem !important;
+
+  .flex-xl-nowrap {
+    flex-wrap: nowrap !important;
   }
-  .ml-md-5,
-  .mx-md-5 {
-    margin-left: 3rem !important;
+
+  .flex-xl-wrap-reverse {
+    flex-wrap: wrap-reverse !important;
   }
-  .p-md-0 {
-    padding: 0 !important;
+
+  .gap-xl-0 {
+    gap: 0 !important;
   }
-  .pt-md-0,
-  .py-md-0 {
-    padding-top: 0 !important;
+
+  .gap-xl-1 {
+    gap: 0.25rem !important;
   }
-  .pr-md-0,
-  .px-md-0 {
-    padding-right: 0 !important;
+
+  .gap-xl-2 {
+    gap: 0.5rem !important;
   }
-  .pb-md-0,
-  .py-md-0 {
-    padding-bottom: 0 !important;
+
+  .gap-xl-3 {
+    gap: 1rem !important;
   }
-  .pl-md-0,
-  .px-md-0 {
-    padding-left: 0 !important;
+
+  .gap-xl-4 {
+    gap: 1.5rem !important;
   }
-  .p-md-1 {
-    padding: 0.25rem !important;
+
+  .gap-xl-5 {
+    gap: 3rem !important;
   }
-  .pt-md-1,
-  .py-md-1 {
-    padding-top: 0.25rem !important;
+
+  .justify-content-xl-start {
+    justify-content: flex-start !important;
   }
-  .pr-md-1,
-  .px-md-1 {
-    padding-right: 0.25rem !important;
+
+  .justify-content-xl-end {
+    justify-content: flex-end !important;
   }
-  .pb-md-1,
-  .py-md-1 {
-    padding-bottom: 0.25rem !important;
+
+  .justify-content-xl-center {
+    justify-content: center !important;
   }
-  .pl-md-1,
-  .px-md-1 {
-    padding-left: 0.25rem !important;
+
+  .justify-content-xl-between {
+    justify-content: space-between !important;
   }
-  .p-md-2 {
-    padding: 0.5rem !important;
+
+  .justify-content-xl-around {
+    justify-content: space-around !important;
   }
-  .pt-md-2,
-  .py-md-2 {
-    padding-top: 0.5rem !important;
+
+  .justify-content-xl-evenly {
+    justify-content: space-evenly !important;
   }
-  .pr-md-2,
-  .px-md-2 {
-    padding-right: 0.5rem !important;
+
+  .align-items-xl-start {
+    align-items: flex-start !important;
   }
-  .pb-md-2,
-  .py-md-2 {
-    padding-bottom: 0.5rem !important;
+
+  .align-items-xl-end {
+    align-items: flex-end !important;
   }
-  .pl-md-2,
-  .px-md-2 {
-    padding-left: 0.5rem !important;
+
+  .align-items-xl-center {
+    align-items: center !important;
   }
-  .p-md-3 {
-    padding: 1rem !important;
+
+  .align-items-xl-baseline {
+    align-items: baseline !important;
   }
-  .pt-md-3,
-  .py-md-3 {
-    padding-top: 1rem !important;
+
+  .align-items-xl-stretch {
+    align-items: stretch !important;
   }
-  .pr-md-3,
-  .px-md-3 {
-    padding-right: 1rem !important;
+
+  .align-content-xl-start {
+    align-content: flex-start !important;
   }
-  .pb-md-3,
-  .py-md-3 {
-    padding-bottom: 1rem !important;
+
+  .align-content-xl-end {
+    align-content: flex-end !important;
   }
-  .pl-md-3,
-  .px-md-3 {
-    padding-left: 1rem !important;
+
+  .align-content-xl-center {
+    align-content: center !important;
   }
-  .p-md-4 {
-    padding: 1.5rem !important;
+
+  .align-content-xl-between {
+    align-content: space-between !important;
   }
-  .pt-md-4,
-  .py-md-4 {
-    padding-top: 1.5rem !important;
+
+  .align-content-xl-around {
+    align-content: space-around !important;
   }
-  .pr-md-4,
-  .px-md-4 {
-    padding-right: 1.5rem !important;
+
+  .align-content-xl-stretch {
+    align-content: stretch !important;
   }
-  .pb-md-4,
-  .py-md-4 {
-    padding-bottom: 1.5rem !important;
+
+  .align-self-xl-auto {
+    align-self: auto !important;
   }
-  .pl-md-4,
-  .px-md-4 {
-    padding-left: 1.5rem !important;
+
+  .align-self-xl-start {
+    align-self: flex-start !important;
   }
-  .p-md-5 {
-    padding: 3rem !important;
+
+  .align-self-xl-end {
+    align-self: flex-end !important;
   }
-  .pt-md-5,
-  .py-md-5 {
-    padding-top: 3rem !important;
+
+  .align-self-xl-center {
+    align-self: center !important;
   }
-  .pr-md-5,
-  .px-md-5 {
-    padding-right: 3rem !important;
+
+  .align-self-xl-baseline {
+    align-self: baseline !important;
   }
-  .pb-md-5,
-  .py-md-5 {
-    padding-bottom: 3rem !important;
+
+  .align-self-xl-stretch {
+    align-self: stretch !important;
   }
-  .pl-md-5,
-  .px-md-5 {
-    padding-left: 3rem !important;
+
+  .order-xl-first {
+    order: -1 !important;
   }
-  .m-md-n1 {
-    margin: -0.25rem !important;
+
+  .order-xl-0 {
+    order: 0 !important;
+  }
+
+  .order-xl-1 {
+    order: 1 !important;
   }
-  .mt-md-n1,
-  .my-md-n1 {
-    margin-top: -0.25rem !important;
+
+  .order-xl-2 {
+    order: 2 !important;
   }
-  .mr-md-n1,
-  .mx-md-n1 {
-    margin-right: -0.25rem !important;
+
+  .order-xl-3 {
+    order: 3 !important;
   }
-  .mb-md-n1,
-  .my-md-n1 {
-    margin-bottom: -0.25rem !important;
+
+  .order-xl-4 {
+    order: 4 !important;
   }
-  .ml-md-n1,
-  .mx-md-n1 {
-    margin-left: -0.25rem !important;
+
+  .order-xl-5 {
+    order: 5 !important;
   }
-  .m-md-n2 {
-    margin: -0.5rem !important;
+
+  .order-xl-last {
+    order: 6 !important;
   }
-  .mt-md-n2,
-  .my-md-n2 {
-    margin-top: -0.5rem !important;
+
+  .m-xl-0 {
+    margin: 0 !important;
   }
-  .mr-md-n2,
-  .mx-md-n2 {
-    margin-right: -0.5rem !important;
+
+  .m-xl-1 {
+    margin: 0.25rem !important;
   }
-  .mb-md-n2,
-  .my-md-n2 {
-    margin-bottom: -0.5rem !important;
+
+  .m-xl-2 {
+    margin: 0.5rem !important;
   }
-  .ml-md-n2,
-  .mx-md-n2 {
-    margin-left: -0.5rem !important;
+
+  .m-xl-3 {
+    margin: 1rem !important;
   }
-  .m-md-n3 {
-    margin: -1rem !important;
+
+  .m-xl-4 {
+    margin: 1.5rem !important;
   }
-  .mt-md-n3,
-  .my-md-n3 {
-    margin-top: -1rem !important;
+
+  .m-xl-5 {
+    margin: 3rem !important;
   }
-  .mr-md-n3,
-  .mx-md-n3 {
-    margin-right: -1rem !important;
+
+  .m-xl-auto {
+    margin: auto !important;
   }
-  .mb-md-n3,
-  .my-md-n3 {
-    margin-bottom: -1rem !important;
+
+  .mx-xl-0 {
+    margin-right: 0 !important;
+    margin-left: 0 !important;
   }
-  .ml-md-n3,
-  .mx-md-n3 {
-    margin-left: -1rem !important;
+
+  .mx-xl-1 {
+    margin-right: 0.25rem !important;
+    margin-left: 0.25rem !important;
   }
-  .m-md-n4 {
-    margin: -1.5rem !important;
+
+  .mx-xl-2 {
+    margin-right: 0.5rem !important;
+    margin-left: 0.5rem !important;
   }
-  .mt-md-n4,
-  .my-md-n4 {
-    margin-top: -1.5rem !important;
+
+  .mx-xl-3 {
+    margin-right: 1rem !important;
+    margin-left: 1rem !important;
   }
-  .mr-md-n4,
-  .mx-md-n4 {
-    margin-right: -1.5rem !important;
+
+  .mx-xl-4 {
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important;
   }
-  .mb-md-n4,
-  .my-md-n4 {
-    margin-bottom: -1.5rem !important;
+
+  .mx-xl-5 {
+    margin-right: 3rem !important;
+    margin-left: 3rem !important;
   }
-  .ml-md-n4,
-  .mx-md-n4 {
-    margin-left: -1.5rem !important;
+
+  .mx-xl-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
   }
-  .m-md-n5 {
-    margin: -3rem !important;
+
+  .my-xl-0 {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
   }
-  .mt-md-n5,
-  .my-md-n5 {
-    margin-top: -3rem !important;
+
+  .my-xl-1 {
+    margin-top: 0.25rem !important;
+    margin-bottom: 0.25rem !important;
   }
-  .mr-md-n5,
-  .mx-md-n5 {
-    margin-right: -3rem !important;
+
+  .my-xl-2 {
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.5rem !important;
   }
-  .mb-md-n5,
-  .my-md-n5 {
-    margin-bottom: -3rem !important;
+
+  .my-xl-3 {
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important;
   }
-  .ml-md-n5,
-  .mx-md-n5 {
-    margin-left: -3rem !important;
+
+  .my-xl-4 {
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
   }
-  .m-md-auto {
-    margin: auto !important;
+
+  .my-xl-5 {
+    margin-top: 3rem !important;
+    margin-bottom: 3rem !important;
   }
-  .mt-md-auto,
-  .my-md-auto {
+
+  .my-xl-auto {
     margin-top: auto !important;
-  }
-  .mr-md-auto,
-  .mx-md-auto {
-    margin-right: auto !important;
-  }
-  .mb-md-auto,
-  .my-md-auto {
     margin-bottom: auto !important;
   }
-  .ml-md-auto,
-  .mx-md-auto {
-    margin-left: auto !important;
+
+  .mt-xl-0 {
+    margin-top: 0 !important;
   }
-}
 
-@media (min-width: 992px) {
-  .m-lg-0 {
-    margin: 0 !important;
+  .mt-xl-1 {
+    margin-top: 0.25rem !important;
   }
-  .mt-lg-0,
-  .my-lg-0 {
-    margin-top: 0 !important;
+
+  .mt-xl-2 {
+    margin-top: 0.5rem !important;
   }
-  .mr-lg-0,
-  .mx-lg-0 {
-    margin-right: 0 !important;
+
+  .mt-xl-3 {
+    margin-top: 1rem !important;
   }
-  .mb-lg-0,
-  .my-lg-0 {
-    margin-bottom: 0 !important;
+
+  .mt-xl-4 {
+    margin-top: 1.5rem !important;
   }
-  .ml-lg-0,
-  .mx-lg-0 {
-    margin-left: 0 !important;
+
+  .mt-xl-5 {
+    margin-top: 3rem !important;
   }
-  .m-lg-1 {
-    margin: 0.25rem !important;
+
+  .mt-xl-auto {
+    margin-top: auto !important;
   }
-  .mt-lg-1,
-  .my-lg-1 {
-    margin-top: 0.25rem !important;
+
+  .me-xl-0 {
+    margin-right: 0 !important;
   }
-  .mr-lg-1,
-  .mx-lg-1 {
+
+  .me-xl-1 {
     margin-right: 0.25rem !important;
   }
-  .mb-lg-1,
-  .my-lg-1 {
-    margin-bottom: 0.25rem !important;
+
+  .me-xl-2 {
+    margin-right: 0.5rem !important;
   }
-  .ml-lg-1,
-  .mx-lg-1 {
-    margin-left: 0.25rem !important;
+
+  .me-xl-3 {
+    margin-right: 1rem !important;
   }
-  .m-lg-2 {
-    margin: 0.5rem !important;
+
+  .me-xl-4 {
+    margin-right: 1.5rem !important;
   }
-  .mt-lg-2,
-  .my-lg-2 {
-    margin-top: 0.5rem !important;
+
+  .me-xl-5 {
+    margin-right: 3rem !important;
   }
-  .mr-lg-2,
-  .mx-lg-2 {
-    margin-right: 0.5rem !important;
+
+  .me-xl-auto {
+    margin-right: auto !important;
   }
-  .mb-lg-2,
-  .my-lg-2 {
-    margin-bottom: 0.5rem !important;
+
+  .mb-xl-0 {
+    margin-bottom: 0 !important;
   }
-  .ml-lg-2,
-  .mx-lg-2 {
-    margin-left: 0.5rem !important;
+
+  .mb-xl-1 {
+    margin-bottom: 0.25rem !important;
   }
-  .m-lg-3 {
-    margin: 1rem !important;
+
+  .mb-xl-2 {
+    margin-bottom: 0.5rem !important;
   }
-  .mt-lg-3,
-  .my-lg-3 {
-    margin-top: 1rem !important;
+
+  .mb-xl-3 {
+    margin-bottom: 1rem !important;
   }
-  .mr-lg-3,
-  .mx-lg-3 {
-    margin-right: 1rem !important;
+
+  .mb-xl-4 {
+    margin-bottom: 1.5rem !important;
   }
-  .mb-lg-3,
-  .my-lg-3 {
-    margin-bottom: 1rem !important;
+
+  .mb-xl-5 {
+    margin-bottom: 3rem !important;
   }
-  .ml-lg-3,
-  .mx-lg-3 {
-    margin-left: 1rem !important;
+
+  .mb-xl-auto {
+    margin-bottom: auto !important;
   }
-  .m-lg-4 {
-    margin: 1.5rem !important;
+
+  .ms-xl-0 {
+    margin-left: 0 !important;
   }
-  .mt-lg-4,
-  .my-lg-4 {
-    margin-top: 1.5rem !important;
+
+  .ms-xl-1 {
+    margin-left: 0.25rem !important;
   }
-  .mr-lg-4,
-  .mx-lg-4 {
-    margin-right: 1.5rem !important;
+
+  .ms-xl-2 {
+    margin-left: 0.5rem !important;
   }
-  .mb-lg-4,
-  .my-lg-4 {
-    margin-bottom: 1.5rem !important;
+
+  .ms-xl-3 {
+    margin-left: 1rem !important;
   }
-  .ml-lg-4,
-  .mx-lg-4 {
+
+  .ms-xl-4 {
     margin-left: 1.5rem !important;
   }
-  .m-lg-5 {
-    margin: 3rem !important;
+
+  .ms-xl-5 {
+    margin-left: 3rem !important;
   }
-  .mt-lg-5,
-  .my-lg-5 {
-    margin-top: 3rem !important;
+
+  .ms-xl-auto {
+    margin-left: auto !important;
   }
-  .mr-lg-5,
-  .mx-lg-5 {
-    margin-right: 3rem !important;
+
+  .p-xl-0 {
+    padding: 0 !important;
   }
-  .mb-lg-5,
-  .my-lg-5 {
-    margin-bottom: 3rem !important;
+
+  .p-xl-1 {
+    padding: 0.25rem !important;
   }
-  .ml-lg-5,
-  .mx-lg-5 {
-    margin-left: 3rem !important;
+
+  .p-xl-2 {
+    padding: 0.5rem !important;
   }
-  .p-lg-0 {
-    padding: 0 !important;
+
+  .p-xl-3 {
+    padding: 1rem !important;
   }
-  .pt-lg-0,
-  .py-lg-0 {
-    padding-top: 0 !important;
+
+  .p-xl-4 {
+    padding: 1.5rem !important;
   }
-  .pr-lg-0,
-  .px-lg-0 {
+
+  .p-xl-5 {
+    padding: 3rem !important;
+  }
+
+  .px-xl-0 {
     padding-right: 0 !important;
+    padding-left: 0 !important;
   }
-  .pb-lg-0,
-  .py-lg-0 {
-    padding-bottom: 0 !important;
+
+  .px-xl-1 {
+    padding-right: 0.25rem !important;
+    padding-left: 0.25rem !important;
+  }
+
+  .px-xl-2 {
+    padding-right: 0.5rem !important;
+    padding-left: 0.5rem !important;
+  }
+
+  .px-xl-3 {
+    padding-right: 1rem !important;
+    padding-left: 1rem !important;
+  }
+
+  .px-xl-4 {
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important;
   }
-  .pl-lg-0,
-  .px-lg-0 {
-    padding-left: 0 !important;
+
+  .px-xl-5 {
+    padding-right: 3rem !important;
+    padding-left: 3rem !important;
   }
-  .p-lg-1 {
-    padding: 0.25rem !important;
+
+  .py-xl-0 {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
   }
-  .pt-lg-1,
-  .py-lg-1 {
+
+  .py-xl-1 {
     padding-top: 0.25rem !important;
-  }
-  .pr-lg-1,
-  .px-lg-1 {
-    padding-right: 0.25rem !important;
-  }
-  .pb-lg-1,
-  .py-lg-1 {
     padding-bottom: 0.25rem !important;
   }
-  .pl-lg-1,
-  .px-lg-1 {
-    padding-left: 0.25rem !important;
-  }
-  .p-lg-2 {
-    padding: 0.5rem !important;
-  }
-  .pt-lg-2,
-  .py-lg-2 {
+
+  .py-xl-2 {
     padding-top: 0.5rem !important;
-  }
-  .pr-lg-2,
-  .px-lg-2 {
-    padding-right: 0.5rem !important;
-  }
-  .pb-lg-2,
-  .py-lg-2 {
     padding-bottom: 0.5rem !important;
   }
-  .pl-lg-2,
-  .px-lg-2 {
-    padding-left: 0.5rem !important;
-  }
-  .p-lg-3 {
-    padding: 1rem !important;
-  }
-  .pt-lg-3,
-  .py-lg-3 {
+
+  .py-xl-3 {
     padding-top: 1rem !important;
-  }
-  .pr-lg-3,
-  .px-lg-3 {
-    padding-right: 1rem !important;
-  }
-  .pb-lg-3,
-  .py-lg-3 {
     padding-bottom: 1rem !important;
   }
-  .pl-lg-3,
-  .px-lg-3 {
-    padding-left: 1rem !important;
-  }
-  .p-lg-4 {
-    padding: 1.5rem !important;
-  }
-  .pt-lg-4,
-  .py-lg-4 {
+
+  .py-xl-4 {
     padding-top: 1.5rem !important;
-  }
-  .pr-lg-4,
-  .px-lg-4 {
-    padding-right: 1.5rem !important;
-  }
-  .pb-lg-4,
-  .py-lg-4 {
     padding-bottom: 1.5rem !important;
   }
-  .pl-lg-4,
-  .px-lg-4 {
-    padding-left: 1.5rem !important;
-  }
-  .p-lg-5 {
-    padding: 3rem !important;
-  }
-  .pt-lg-5,
-  .py-lg-5 {
+
+  .py-xl-5 {
     padding-top: 3rem !important;
-  }
-  .pr-lg-5,
-  .px-lg-5 {
-    padding-right: 3rem !important;
-  }
-  .pb-lg-5,
-  .py-lg-5 {
     padding-bottom: 3rem !important;
   }
-  .pl-lg-5,
-  .px-lg-5 {
-    padding-left: 3rem !important;
-  }
-  .m-lg-n1 {
-    margin: -0.25rem !important;
+
+  .pt-xl-0 {
+    padding-top: 0 !important;
   }
-  .mt-lg-n1,
-  .my-lg-n1 {
-    margin-top: -0.25rem !important;
+
+  .pt-xl-1 {
+    padding-top: 0.25rem !important;
   }
-  .mr-lg-n1,
-  .mx-lg-n1 {
-    margin-right: -0.25rem !important;
+
+  .pt-xl-2 {
+    padding-top: 0.5rem !important;
   }
-  .mb-lg-n1,
-  .my-lg-n1 {
-    margin-bottom: -0.25rem !important;
+
+  .pt-xl-3 {
+    padding-top: 1rem !important;
   }
-  .ml-lg-n1,
-  .mx-lg-n1 {
-    margin-left: -0.25rem !important;
+
+  .pt-xl-4 {
+    padding-top: 1.5rem !important;
   }
-  .m-lg-n2 {
-    margin: -0.5rem !important;
+
+  .pt-xl-5 {
+    padding-top: 3rem !important;
   }
-  .mt-lg-n2,
-  .my-lg-n2 {
-    margin-top: -0.5rem !important;
+
+  .pe-xl-0 {
+    padding-right: 0 !important;
   }
-  .mr-lg-n2,
-  .mx-lg-n2 {
-    margin-right: -0.5rem !important;
+
+  .pe-xl-1 {
+    padding-right: 0.25rem !important;
   }
-  .mb-lg-n2,
-  .my-lg-n2 {
-    margin-bottom: -0.5rem !important;
+
+  .pe-xl-2 {
+    padding-right: 0.5rem !important;
   }
-  .ml-lg-n2,
-  .mx-lg-n2 {
-    margin-left: -0.5rem !important;
+
+  .pe-xl-3 {
+    padding-right: 1rem !important;
   }
-  .m-lg-n3 {
-    margin: -1rem !important;
+
+  .pe-xl-4 {
+    padding-right: 1.5rem !important;
   }
-  .mt-lg-n3,
-  .my-lg-n3 {
-    margin-top: -1rem !important;
+
+  .pe-xl-5 {
+    padding-right: 3rem !important;
   }
-  .mr-lg-n3,
-  .mx-lg-n3 {
-    margin-right: -1rem !important;
+
+  .pb-xl-0 {
+    padding-bottom: 0 !important;
   }
-  .mb-lg-n3,
-  .my-lg-n3 {
-    margin-bottom: -1rem !important;
+
+  .pb-xl-1 {
+    padding-bottom: 0.25rem !important;
   }
-  .ml-lg-n3,
-  .mx-lg-n3 {
-    margin-left: -1rem !important;
+
+  .pb-xl-2 {
+    padding-bottom: 0.5rem !important;
   }
-  .m-lg-n4 {
-    margin: -1.5rem !important;
+
+  .pb-xl-3 {
+    padding-bottom: 1rem !important;
   }
-  .mt-lg-n4,
-  .my-lg-n4 {
-    margin-top: -1.5rem !important;
+
+  .pb-xl-4 {
+    padding-bottom: 1.5rem !important;
   }
-  .mr-lg-n4,
-  .mx-lg-n4 {
-    margin-right: -1.5rem !important;
+
+  .pb-xl-5 {
+    padding-bottom: 3rem !important;
   }
-  .mb-lg-n4,
-  .my-lg-n4 {
-    margin-bottom: -1.5rem !important;
+
+  .ps-xl-0 {
+    padding-left: 0 !important;
   }
-  .ml-lg-n4,
-  .mx-lg-n4 {
-    margin-left: -1.5rem !important;
+
+  .ps-xl-1 {
+    padding-left: 0.25rem !important;
   }
-  .m-lg-n5 {
-    margin: -3rem !important;
+
+  .ps-xl-2 {
+    padding-left: 0.5rem !important;
   }
-  .mt-lg-n5,
-  .my-lg-n5 {
-    margin-top: -3rem !important;
+
+  .ps-xl-3 {
+    padding-left: 1rem !important;
   }
-  .mr-lg-n5,
-  .mx-lg-n5 {
-    margin-right: -3rem !important;
+
+  .ps-xl-4 {
+    padding-left: 1.5rem !important;
   }
-  .mb-lg-n5,
-  .my-lg-n5 {
-    margin-bottom: -3rem !important;
+
+  .ps-xl-5 {
+    padding-left: 3rem !important;
   }
-  .ml-lg-n5,
-  .mx-lg-n5 {
-    margin-left: -3rem !important;
+
+  .text-xl-start {
+    text-align: left !important;
   }
-  .m-lg-auto {
-    margin: auto !important;
+
+  .text-xl-end {
+    text-align: right !important;
   }
-  .mt-lg-auto,
-  .my-lg-auto {
-    margin-top: auto !important;
+
+  .text-xl-center {
+    text-align: center !important;
   }
-  .mr-lg-auto,
-  .mx-lg-auto {
-    margin-right: auto !important;
+}
+@media (min-width: 1400px) {
+  .float-xxl-start {
+    float: left !important;
   }
-  .mb-lg-auto,
-  .my-lg-auto {
-    margin-bottom: auto !important;
+
+  .float-xxl-end {
+    float: right !important;
   }
-  .ml-lg-auto,
-  .mx-lg-auto {
-    margin-left: auto !important;
+
+  .float-xxl-none {
+    float: none !important;
   }
-}
 
-@media (min-width: 1200px) {
-  .m-xl-0 {
-    margin: 0 !important;
+  .d-xxl-inline {
+    display: inline !important;
   }
-  .mt-xl-0,
-  .my-xl-0 {
-    margin-top: 0 !important;
+
+  .d-xxl-inline-block {
+    display: inline-block !important;
   }
-  .mr-xl-0,
-  .mx-xl-0 {
-    margin-right: 0 !important;
+
+  .d-xxl-block {
+    display: block !important;
   }
-  .mb-xl-0,
-  .my-xl-0 {
-    margin-bottom: 0 !important;
+
+  .d-xxl-grid {
+    display: grid !important;
   }
-  .ml-xl-0,
-  .mx-xl-0 {
-    margin-left: 0 !important;
+
+  .d-xxl-table {
+    display: table !important;
   }
-  .m-xl-1 {
-    margin: 0.25rem !important;
+
+  .d-xxl-table-row {
+    display: table-row !important;
   }
-  .mt-xl-1,
-  .my-xl-1 {
-    margin-top: 0.25rem !important;
+
+  .d-xxl-table-cell {
+    display: table-cell !important;
   }
-  .mr-xl-1,
-  .mx-xl-1 {
-    margin-right: 0.25rem !important;
+
+  .d-xxl-flex {
+    display: flex !important;
   }
-  .mb-xl-1,
-  .my-xl-1 {
-    margin-bottom: 0.25rem !important;
+
+  .d-xxl-inline-flex {
+    display: inline-flex !important;
   }
-  .ml-xl-1,
-  .mx-xl-1 {
-    margin-left: 0.25rem !important;
+
+  .d-xxl-none {
+    display: none !important;
   }
-  .m-xl-2 {
-    margin: 0.5rem !important;
+
+  .flex-xxl-fill {
+    flex: 1 1 auto !important;
   }
-  .mt-xl-2,
-  .my-xl-2 {
-    margin-top: 0.5rem !important;
+
+  .flex-xxl-row {
+    flex-direction: row !important;
   }
-  .mr-xl-2,
-  .mx-xl-2 {
-    margin-right: 0.5rem !important;
+
+  .flex-xxl-column {
+    flex-direction: column !important;
   }
-  .mb-xl-2,
-  .my-xl-2 {
-    margin-bottom: 0.5rem !important;
+
+  .flex-xxl-row-reverse {
+    flex-direction: row-reverse !important;
   }
-  .ml-xl-2,
-  .mx-xl-2 {
-    margin-left: 0.5rem !important;
+
+  .flex-xxl-column-reverse {
+    flex-direction: column-reverse !important;
   }
-  .m-xl-3 {
-    margin: 1rem !important;
+
+  .flex-xxl-grow-0 {
+    flex-grow: 0 !important;
   }
-  .mt-xl-3,
-  .my-xl-3 {
-    margin-top: 1rem !important;
+
+  .flex-xxl-grow-1 {
+    flex-grow: 1 !important;
   }
-  .mr-xl-3,
-  .mx-xl-3 {
-    margin-right: 1rem !important;
+
+  .flex-xxl-shrink-0 {
+    flex-shrink: 0 !important;
   }
-  .mb-xl-3,
-  .my-xl-3 {
-    margin-bottom: 1rem !important;
+
+  .flex-xxl-shrink-1 {
+    flex-shrink: 1 !important;
   }
-  .ml-xl-3,
-  .mx-xl-3 {
-    margin-left: 1rem !important;
+
+  .flex-xxl-wrap {
+    flex-wrap: wrap !important;
   }
-  .m-xl-4 {
-    margin: 1.5rem !important;
+
+  .flex-xxl-nowrap {
+    flex-wrap: nowrap !important;
   }
-  .mt-xl-4,
-  .my-xl-4 {
-    margin-top: 1.5rem !important;
+
+  .flex-xxl-wrap-reverse {
+    flex-wrap: wrap-reverse !important;
   }
-  .mr-xl-4,
-  .mx-xl-4 {
-    margin-right: 1.5rem !important;
+
+  .gap-xxl-0 {
+    gap: 0 !important;
   }
-  .mb-xl-4,
-  .my-xl-4 {
-    margin-bottom: 1.5rem !important;
+
+  .gap-xxl-1 {
+    gap: 0.25rem !important;
   }
-  .ml-xl-4,
-  .mx-xl-4 {
-    margin-left: 1.5rem !important;
+
+  .gap-xxl-2 {
+    gap: 0.5rem !important;
   }
-  .m-xl-5 {
-    margin: 3rem !important;
+
+  .gap-xxl-3 {
+    gap: 1rem !important;
   }
-  .mt-xl-5,
-  .my-xl-5 {
-    margin-top: 3rem !important;
+
+  .gap-xxl-4 {
+    gap: 1.5rem !important;
   }
-  .mr-xl-5,
-  .mx-xl-5 {
-    margin-right: 3rem !important;
+
+  .gap-xxl-5 {
+    gap: 3rem !important;
   }
-  .mb-xl-5,
-  .my-xl-5 {
-    margin-bottom: 3rem !important;
+
+  .justify-content-xxl-start {
+    justify-content: flex-start !important;
   }
-  .ml-xl-5,
-  .mx-xl-5 {
-    margin-left: 3rem !important;
+
+  .justify-content-xxl-end {
+    justify-content: flex-end !important;
   }
-  .p-xl-0 {
-    padding: 0 !important;
+
+  .justify-content-xxl-center {
+    justify-content: center !important;
   }
-  .pt-xl-0,
-  .py-xl-0 {
-    padding-top: 0 !important;
+
+  .justify-content-xxl-between {
+    justify-content: space-between !important;
   }
-  .pr-xl-0,
-  .px-xl-0 {
-    padding-right: 0 !important;
+
+  .justify-content-xxl-around {
+    justify-content: space-around !important;
   }
-  .pb-xl-0,
-  .py-xl-0 {
-    padding-bottom: 0 !important;
+
+  .justify-content-xxl-evenly {
+    justify-content: space-evenly !important;
   }
-  .pl-xl-0,
-  .px-xl-0 {
-    padding-left: 0 !important;
+
+  .align-items-xxl-start {
+    align-items: flex-start !important;
   }
-  .p-xl-1 {
-    padding: 0.25rem !important;
+
+  .align-items-xxl-end {
+    align-items: flex-end !important;
   }
-  .pt-xl-1,
-  .py-xl-1 {
-    padding-top: 0.25rem !important;
+
+  .align-items-xxl-center {
+    align-items: center !important;
   }
-  .pr-xl-1,
-  .px-xl-1 {
-    padding-right: 0.25rem !important;
+
+  .align-items-xxl-baseline {
+    align-items: baseline !important;
   }
-  .pb-xl-1,
-  .py-xl-1 {
-    padding-bottom: 0.25rem !important;
+
+  .align-items-xxl-stretch {
+    align-items: stretch !important;
   }
-  .pl-xl-1,
-  .px-xl-1 {
-    padding-left: 0.25rem !important;
+
+  .align-content-xxl-start {
+    align-content: flex-start !important;
   }
-  .p-xl-2 {
-    padding: 0.5rem !important;
+
+  .align-content-xxl-end {
+    align-content: flex-end !important;
   }
-  .pt-xl-2,
-  .py-xl-2 {
-    padding-top: 0.5rem !important;
+
+  .align-content-xxl-center {
+    align-content: center !important;
   }
-  .pr-xl-2,
-  .px-xl-2 {
-    padding-right: 0.5rem !important;
+
+  .align-content-xxl-between {
+    align-content: space-between !important;
   }
-  .pb-xl-2,
-  .py-xl-2 {
-    padding-bottom: 0.5rem !important;
+
+  .align-content-xxl-around {
+    align-content: space-around !important;
   }
-  .pl-xl-2,
-  .px-xl-2 {
-    padding-left: 0.5rem !important;
+
+  .align-content-xxl-stretch {
+    align-content: stretch !important;
   }
-  .p-xl-3 {
-    padding: 1rem !important;
+
+  .align-self-xxl-auto {
+    align-self: auto !important;
   }
-  .pt-xl-3,
-  .py-xl-3 {
-    padding-top: 1rem !important;
+
+  .align-self-xxl-start {
+    align-self: flex-start !important;
   }
-  .pr-xl-3,
-  .px-xl-3 {
-    padding-right: 1rem !important;
+
+  .align-self-xxl-end {
+    align-self: flex-end !important;
   }
-  .pb-xl-3,
-  .py-xl-3 {
-    padding-bottom: 1rem !important;
+
+  .align-self-xxl-center {
+    align-self: center !important;
   }
-  .pl-xl-3,
-  .px-xl-3 {
-    padding-left: 1rem !important;
+
+  .align-self-xxl-baseline {
+    align-self: baseline !important;
   }
-  .p-xl-4 {
-    padding: 1.5rem !important;
+
+  .align-self-xxl-stretch {
+    align-self: stretch !important;
   }
-  .pt-xl-4,
-  .py-xl-4 {
-    padding-top: 1.5rem !important;
+
+  .order-xxl-first {
+    order: -1 !important;
   }
-  .pr-xl-4,
-  .px-xl-4 {
-    padding-right: 1.5rem !important;
+
+  .order-xxl-0 {
+    order: 0 !important;
   }
-  .pb-xl-4,
-  .py-xl-4 {
-    padding-bottom: 1.5rem !important;
+
+  .order-xxl-1 {
+    order: 1 !important;
   }
-  .pl-xl-4,
-  .px-xl-4 {
-    padding-left: 1.5rem !important;
+
+  .order-xxl-2 {
+    order: 2 !important;
   }
-  .p-xl-5 {
-    padding: 3rem !important;
+
+  .order-xxl-3 {
+    order: 3 !important;
   }
-  .pt-xl-5,
-  .py-xl-5 {
-    padding-top: 3rem !important;
+
+  .order-xxl-4 {
+    order: 4 !important;
   }
-  .pr-xl-5,
-  .px-xl-5 {
-    padding-right: 3rem !important;
+
+  .order-xxl-5 {
+    order: 5 !important;
   }
-  .pb-xl-5,
-  .py-xl-5 {
-    padding-bottom: 3rem !important;
+
+  .order-xxl-last {
+    order: 6 !important;
   }
-  .pl-xl-5,
-  .px-xl-5 {
-    padding-left: 3rem !important;
+
+  .m-xxl-0 {
+    margin: 0 !important;
   }
-  .m-xl-n1 {
-    margin: -0.25rem !important;
+
+  .m-xxl-1 {
+    margin: 0.25rem !important;
   }
-  .mt-xl-n1,
-  .my-xl-n1 {
-    margin-top: -0.25rem !important;
+
+  .m-xxl-2 {
+    margin: 0.5rem !important;
   }
-  .mr-xl-n1,
-  .mx-xl-n1 {
-    margin-right: -0.25rem !important;
+
+  .m-xxl-3 {
+    margin: 1rem !important;
   }
-  .mb-xl-n1,
-  .my-xl-n1 {
-    margin-bottom: -0.25rem !important;
+
+  .m-xxl-4 {
+    margin: 1.5rem !important;
   }
-  .ml-xl-n1,
-  .mx-xl-n1 {
-    margin-left: -0.25rem !important;
+
+  .m-xxl-5 {
+    margin: 3rem !important;
   }
-  .m-xl-n2 {
-    margin: -0.5rem !important;
+
+  .m-xxl-auto {
+    margin: auto !important;
   }
-  .mt-xl-n2,
-  .my-xl-n2 {
-    margin-top: -0.5rem !important;
+
+  .mx-xxl-0 {
+    margin-right: 0 !important;
+    margin-left: 0 !important;
   }
-  .mr-xl-n2,
-  .mx-xl-n2 {
-    margin-right: -0.5rem !important;
+
+  .mx-xxl-1 {
+    margin-right: 0.25rem !important;
+    margin-left: 0.25rem !important;
   }
-  .mb-xl-n2,
-  .my-xl-n2 {
-    margin-bottom: -0.5rem !important;
+
+  .mx-xxl-2 {
+    margin-right: 0.5rem !important;
+    margin-left: 0.5rem !important;
   }
-  .ml-xl-n2,
-  .mx-xl-n2 {
-    margin-left: -0.5rem !important;
+
+  .mx-xxl-3 {
+    margin-right: 1rem !important;
+    margin-left: 1rem !important;
   }
-  .m-xl-n3 {
-    margin: -1rem !important;
+
+  .mx-xxl-4 {
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important;
   }
-  .mt-xl-n3,
-  .my-xl-n3 {
-    margin-top: -1rem !important;
+
+  .mx-xxl-5 {
+    margin-right: 3rem !important;
+    margin-left: 3rem !important;
   }
-  .mr-xl-n3,
-  .mx-xl-n3 {
-    margin-right: -1rem !important;
+
+  .mx-xxl-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
   }
-  .mb-xl-n3,
-  .my-xl-n3 {
-    margin-bottom: -1rem !important;
+
+  .my-xxl-0 {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
   }
-  .ml-xl-n3,
-  .mx-xl-n3 {
-    margin-left: -1rem !important;
+
+  .my-xxl-1 {
+    margin-top: 0.25rem !important;
+    margin-bottom: 0.25rem !important;
   }
-  .m-xl-n4 {
-    margin: -1.5rem !important;
+
+  .my-xxl-2 {
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.5rem !important;
   }
-  .mt-xl-n4,
-  .my-xl-n4 {
-    margin-top: -1.5rem !important;
+
+  .my-xxl-3 {
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important;
   }
-  .mr-xl-n4,
-  .mx-xl-n4 {
-    margin-right: -1.5rem !important;
+
+  .my-xxl-4 {
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
   }
-  .mb-xl-n4,
-  .my-xl-n4 {
-    margin-bottom: -1.5rem !important;
+
+  .my-xxl-5 {
+    margin-top: 3rem !important;
+    margin-bottom: 3rem !important;
   }
-  .ml-xl-n4,
-  .mx-xl-n4 {
-    margin-left: -1.5rem !important;
+
+  .my-xxl-auto {
+    margin-top: auto !important;
+    margin-bottom: auto !important;
   }
-  .m-xl-n5 {
-    margin: -3rem !important;
+
+  .mt-xxl-0 {
+    margin-top: 0 !important;
   }
-  .mt-xl-n5,
-  .my-xl-n5 {
-    margin-top: -3rem !important;
+
+  .mt-xxl-1 {
+    margin-top: 0.25rem !important;
   }
-  .mr-xl-n5,
-  .mx-xl-n5 {
-    margin-right: -3rem !important;
+
+  .mt-xxl-2 {
+    margin-top: 0.5rem !important;
   }
-  .mb-xl-n5,
-  .my-xl-n5 {
-    margin-bottom: -3rem !important;
+
+  .mt-xxl-3 {
+    margin-top: 1rem !important;
   }
-  .ml-xl-n5,
-  .mx-xl-n5 {
-    margin-left: -3rem !important;
+
+  .mt-xxl-4 {
+    margin-top: 1.5rem !important;
   }
-  .m-xl-auto {
-    margin: auto !important;
+
+  .mt-xxl-5 {
+    margin-top: 3rem !important;
   }
-  .mt-xl-auto,
-  .my-xl-auto {
+
+  .mt-xxl-auto {
     margin-top: auto !important;
   }
-  .mr-xl-auto,
-  .mx-xl-auto {
-    margin-right: auto !important;
+
+  .me-xxl-0 {
+    margin-right: 0 !important;
   }
-  .mb-xl-auto,
-  .my-xl-auto {
-    margin-bottom: auto !important;
+
+  .me-xxl-1 {
+    margin-right: 0.25rem !important;
   }
-  .ml-xl-auto,
-  .mx-xl-auto {
-    margin-left: auto !important;
+
+  .me-xxl-2 {
+    margin-right: 0.5rem !important;
   }
-}
 
-.stretched-link::after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1;
-  pointer-events: auto;
-  content: "";
-  background-color: rgba(0, 0, 0, 0);
-}
+  .me-xxl-3 {
+    margin-right: 1rem !important;
+  }
 
-.text-monospace {
-  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
-}
+  .me-xxl-4 {
+    margin-right: 1.5rem !important;
+  }
 
-.text-justify {
-  text-align: justify !important;
-}
+  .me-xxl-5 {
+    margin-right: 3rem !important;
+  }
 
-.text-wrap {
-  white-space: normal !important;
-}
+  .me-xxl-auto {
+    margin-right: auto !important;
+  }
 
-.text-nowrap {
-  white-space: nowrap !important;
-}
+  .mb-xxl-0 {
+    margin-bottom: 0 !important;
+  }
 
-.text-truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+  .mb-xxl-1 {
+    margin-bottom: 0.25rem !important;
+  }
 
-.text-left {
-  text-align: left !important;
-}
+  .mb-xxl-2 {
+    margin-bottom: 0.5rem !important;
+  }
 
-.text-right {
-  text-align: right !important;
-}
+  .mb-xxl-3 {
+    margin-bottom: 1rem !important;
+  }
 
-.text-center {
-  text-align: center !important;
-}
+  .mb-xxl-4 {
+    margin-bottom: 1.5rem !important;
+  }
 
-@media (min-width: 576px) {
-  .text-sm-left {
-    text-align: left !important;
+  .mb-xxl-5 {
+    margin-bottom: 3rem !important;
   }
-  .text-sm-right {
-    text-align: right !important;
+
+  .mb-xxl-auto {
+    margin-bottom: auto !important;
   }
-  .text-sm-center {
-    text-align: center !important;
+
+  .ms-xxl-0 {
+    margin-left: 0 !important;
   }
-}
 
-@media (min-width: 768px) {
-  .text-md-left {
-    text-align: left !important;
+  .ms-xxl-1 {
+    margin-left: 0.25rem !important;
   }
-  .text-md-right {
-    text-align: right !important;
+
+  .ms-xxl-2 {
+    margin-left: 0.5rem !important;
   }
-  .text-md-center {
-    text-align: center !important;
+
+  .ms-xxl-3 {
+    margin-left: 1rem !important;
   }
-}
 
-@media (min-width: 992px) {
-  .text-lg-left {
-    text-align: left !important;
+  .ms-xxl-4 {
+    margin-left: 1.5rem !important;
   }
-  .text-lg-right {
-    text-align: right !important;
+
+  .ms-xxl-5 {
+    margin-left: 3rem !important;
   }
-  .text-lg-center {
-    text-align: center !important;
+
+  .ms-xxl-auto {
+    margin-left: auto !important;
   }
-}
 
-@media (min-width: 1200px) {
-  .text-xl-left {
-    text-align: left !important;
+  .p-xxl-0 {
+    padding: 0 !important;
   }
-  .text-xl-right {
-    text-align: right !important;
+
+  .p-xxl-1 {
+    padding: 0.25rem !important;
   }
-  .text-xl-center {
-    text-align: center !important;
+
+  .p-xxl-2 {
+    padding: 0.5rem !important;
   }
-}
 
-.text-lowercase {
-  text-transform: lowercase !important;
-}
+  .p-xxl-3 {
+    padding: 1rem !important;
+  }
 
-.text-uppercase {
-  text-transform: uppercase !important;
-}
+  .p-xxl-4 {
+    padding: 1.5rem !important;
+  }
 
-.text-capitalize {
-  text-transform: capitalize !important;
-}
+  .p-xxl-5 {
+    padding: 3rem !important;
+  }
 
-.font-weight-light {
-  font-weight: 300 !important;
-}
+  .px-xxl-0 {
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+  }
 
-.font-weight-lighter {
-  font-weight: lighter !important;
-}
+  .px-xxl-1 {
+    padding-right: 0.25rem !important;
+    padding-left: 0.25rem !important;
+  }
 
-.font-weight-normal {
-  font-weight: 400 !important;
-}
+  .px-xxl-2 {
+    padding-right: 0.5rem !important;
+    padding-left: 0.5rem !important;
+  }
 
-.font-weight-bold {
-  font-weight: 700 !important;
-}
+  .px-xxl-3 {
+    padding-right: 1rem !important;
+    padding-left: 1rem !important;
+  }
 
-.font-weight-bolder {
-  font-weight: bolder !important;
-}
+  .px-xxl-4 {
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important;
+  }
 
-.font-italic {
-  font-style: italic !important;
-}
+  .px-xxl-5 {
+    padding-right: 3rem !important;
+    padding-left: 3rem !important;
+  }
 
-.text-white {
-  color: #fff !important;
-}
+  .py-xxl-0 {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
 
-.text-primary {
-  color: #007bff !important;
-}
+  .py-xxl-1 {
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important;
+  }
 
-a.text-primary:hover, a.text-primary:focus {
-  color: #0056b3 !important;
-}
+  .py-xxl-2 {
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important;
+  }
 
-.text-secondary {
-  color: #6c757d !important;
-}
+  .py-xxl-3 {
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important;
+  }
 
-a.text-secondary:hover, a.text-secondary:focus {
-  color: #494f54 !important;
-}
+  .py-xxl-4 {
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important;
+  }
 
-.text-success {
-  color: #28a745 !important;
-}
+  .py-xxl-5 {
+    padding-top: 3rem !important;
+    padding-bottom: 3rem !important;
+  }
 
-a.text-success:hover, a.text-success:focus {
-  color: #19692c !important;
-}
+  .pt-xxl-0 {
+    padding-top: 0 !important;
+  }
 
-.text-info {
-  color: #17a2b8 !important;
-}
+  .pt-xxl-1 {
+    padding-top: 0.25rem !important;
+  }
 
-a.text-info:hover, a.text-info:focus {
-  color: #0f6674 !important;
-}
+  .pt-xxl-2 {
+    padding-top: 0.5rem !important;
+  }
 
-.text-warning {
-  color: #ffc107 !important;
-}
+  .pt-xxl-3 {
+    padding-top: 1rem !important;
+  }
 
-a.text-warning:hover, a.text-warning:focus {
-  color: #ba8b00 !important;
-}
+  .pt-xxl-4 {
+    padding-top: 1.5rem !important;
+  }
 
-.text-danger {
-  color: #dc3545 !important;
-}
+  .pt-xxl-5 {
+    padding-top: 3rem !important;
+  }
 
-a.text-danger:hover, a.text-danger:focus {
-  color: #a71d2a !important;
-}
+  .pe-xxl-0 {
+    padding-right: 0 !important;
+  }
 
-.text-light {
-  color: #f8f9fa !important;
-}
+  .pe-xxl-1 {
+    padding-right: 0.25rem !important;
+  }
 
-a.text-light:hover, a.text-light:focus {
-  color: #cbd3da !important;
-}
+  .pe-xxl-2 {
+    padding-right: 0.5rem !important;
+  }
 
-.text-dark {
-  color: #343a40 !important;
-}
+  .pe-xxl-3 {
+    padding-right: 1rem !important;
+  }
 
-a.text-dark:hover, a.text-dark:focus {
-  color: #121416 !important;
-}
+  .pe-xxl-4 {
+    padding-right: 1.5rem !important;
+  }
 
-.text-body {
-  color: #212529 !important;
-}
+  .pe-xxl-5 {
+    padding-right: 3rem !important;
+  }
 
-.text-muted {
-  color: #6c757d !important;
-}
+  .pb-xxl-0 {
+    padding-bottom: 0 !important;
+  }
 
-.text-black-50 {
-  color: rgba(0, 0, 0, 0.5) !important;
-}
+  .pb-xxl-1 {
+    padding-bottom: 0.25rem !important;
+  }
 
-.text-white-50 {
-  color: rgba(255, 255, 255, 0.5) !important;
-}
+  .pb-xxl-2 {
+    padding-bottom: 0.5rem !important;
+  }
 
-.text-hide {
-  font: 0/0 a;
-  color: transparent;
-  text-shadow: none;
-  background-color: transparent;
-  border: 0;
-}
+  .pb-xxl-3 {
+    padding-bottom: 1rem !important;
+  }
 
-.text-decoration-none {
-  text-decoration: none !important;
-}
+  .pb-xxl-4 {
+    padding-bottom: 1.5rem !important;
+  }
 
-.text-break {
-  word-break: break-word !important;
-  word-wrap: break-word !important;
-}
+  .pb-xxl-5 {
+    padding-bottom: 3rem !important;
+  }
 
-.text-reset {
-  color: inherit !important;
-}
+  .ps-xxl-0 {
+    padding-left: 0 !important;
+  }
 
-.visible {
-  visibility: visible !important;
-}
+  .ps-xxl-1 {
+    padding-left: 0.25rem !important;
+  }
 
-.invisible {
-  visibility: hidden !important;
-}
+  .ps-xxl-2 {
+    padding-left: 0.5rem !important;
+  }
 
-@media print {
-  *,
-  *::before,
-  *::after {
-    text-shadow: none !important;
-    box-shadow: none !important;
+  .ps-xxl-3 {
+    padding-left: 1rem !important;
   }
-  a:not(.btn) {
-    text-decoration: underline;
+
+  .ps-xxl-4 {
+    padding-left: 1.5rem !important;
   }
-  abbr[title]::after {
-    content: " (" attr(title) ")";
+
+  .ps-xxl-5 {
+    padding-left: 3rem !important;
   }
-  pre {
-    white-space: pre-wrap !important;
+
+  .text-xxl-start {
+    text-align: left !important;
   }
-  pre,
-  blockquote {
-    border: 1px solid #adb5bd;
-    page-break-inside: avoid;
+
+  .text-xxl-end {
+    text-align: right !important;
   }
-  thead {
-    display: table-header-group;
+
+  .text-xxl-center {
+    text-align: center !important;
   }
-  tr,
-  img {
-    page-break-inside: avoid;
+}
+@media (min-width: 1200px) {
+  .fs-1 {
+    font-size: 2.5rem !important;
   }
-  p,
-  h2,
-  h3 {
-    orphans: 3;
-    widows: 3;
+
+  .fs-2 {
+    font-size: 2rem !important;
   }
-  h2,
-  h3 {
-    page-break-after: avoid;
+
+  .fs-3 {
+    font-size: 1.75rem !important;
   }
-  @page {
-    size: a3;
+
+  .fs-4 {
+    font-size: 1.5rem !important;
   }
-  body {
-    min-width: 992px !important;
+}
+@media print {
+  .d-print-inline {
+    display: inline !important;
   }
-  .container {
-    min-width: 992px !important;
+
+  .d-print-inline-block {
+    display: inline-block !important;
   }
-  .navbar {
-    display: none;
+
+  .d-print-block {
+    display: block !important;
   }
-  .badge {
-    border: 1px solid #000;
+
+  .d-print-grid {
+    display: grid !important;
   }
-  .table {
-    border-collapse: collapse !important;
+
+  .d-print-table {
+    display: table !important;
   }
-  .table td,
-  .table th {
-    background-color: #fff !important;
+
+  .d-print-table-row {
+    display: table-row !important;
   }
-  .table-bordered th,
-  .table-bordered td {
-    border: 1px solid #dee2e6 !important;
+
+  .d-print-table-cell {
+    display: table-cell !important;
   }
-  .table-dark {
-    color: inherit;
+
+  .d-print-flex {
+    display: flex !important;
   }
-  .table-dark th,
-  .table-dark td,
-  .table-dark thead th,
-  .table-dark tbody + tbody {
-    border-color: #dee2e6;
+
+  .d-print-inline-flex {
+    display: inline-flex !important;
   }
-  .table .thead-dark th {
-    color: inherit;
-    border-color: #dee2e6;
+
+  .d-print-none {
+    display: none !important;
   }
 }
+
 /*# sourceMappingURL=bootstrap.css.map */
\ No newline at end of file
diff --git a/src/static/scripts/datatables.css b/src/static/scripts/datatables.css
index 590d541a0b28de0f388c679fc841e2c7760ec07d..db60b1101c097ebf14dc73e54e44ae56ace21470 100644
--- a/src/static/scripts/datatables.css
+++ b/src/static/scripts/datatables.css
@@ -4,13 +4,18 @@
  *
  * To rebuild or modify this file with the latest versions of the included
  * software please visit:
- *   https://datatables.net/download/#bs4/dt-1.10.23
+ *   https://datatables.net/download/#bs5/dt-1.10.25
  *
  * Included libraries:
- *   DataTables 1.10.23
+ *   DataTables 1.10.25
  */
 
 @charset "UTF-8";
+/*! Bootstrap 5 integration for DataTables
+ *
+ * ©2020 SpryMedia Ltd, all rights reserved.
+ * License: MIT datatables.net/license/mit
+ */
 table.dataTable {
   clear: both;
   margin-top: 6px !important;
@@ -105,7 +110,7 @@ table.dataTable > thead .sorting_asc_disabled:after,
 table.dataTable > thead .sorting_desc_disabled:before,
 table.dataTable > thead .sorting_desc_disabled:after {
   position: absolute;
-  bottom: 0.9em;
+  bottom: 0.5em;
   display: block;
   opacity: 0.3;
 }
@@ -193,18 +198,27 @@ table.dataTable.table-sm .sorting_desc:after {
 table.table-bordered.dataTable {
   border-right-width: 0;
 }
+table.table-bordered.dataTable thead tr:first-child th,
+table.table-bordered.dataTable thead tr:first-child td {
+  border-top-width: 1px;
+}
 table.table-bordered.dataTable th,
 table.table-bordered.dataTable td {
   border-left-width: 0;
 }
+table.table-bordered.dataTable th:first-child, table.table-bordered.dataTable th:first-child,
+table.table-bordered.dataTable td:first-child,
+table.table-bordered.dataTable td:first-child {
+  border-left-width: 1px;
+}
 table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable th:last-child,
 table.table-bordered.dataTable td:last-child,
 table.table-bordered.dataTable td:last-child {
   border-right-width: 1px;
 }
-table.table-bordered.dataTable tbody th,
-table.table-bordered.dataTable tbody td {
-  border-bottom-width: 0;
+table.table-bordered.dataTable th,
+table.table-bordered.dataTable td {
+  border-bottom-width: 1px;
 }
 
 div.dataTables_scrollHead table.table-bordered {
diff --git a/src/static/scripts/datatables.js b/src/static/scripts/datatables.js
index e25c916cc6cde552f55e927710dd92d02262b848..f8f1f3d2c6d617c96f32414118aa7aa416738273 100644
--- a/src/static/scripts/datatables.js
+++ b/src/static/scripts/datatables.js
@@ -4,24 +4,24 @@
  *
  * To rebuild or modify this file with the latest versions of the included
  * software please visit:
- *   https://datatables.net/download/#bs4/dt-1.10.23
+ *   https://datatables.net/download/#bs5/dt-1.10.25
  *
  * Included libraries:
- *   DataTables 1.10.23
+ *   DataTables 1.10.25
  */
 
-/*! DataTables 1.10.23
- * ©2008-2020 SpryMedia Ltd - datatables.net/license
+/*! DataTables 1.10.25
+ * ©2008-2021 SpryMedia Ltd - datatables.net/license
  */
 
 /**
  * @summary     DataTables
  * @description Paginate, search and order HTML tables
- * @version     1.10.23
+ * @version     1.10.25
  * @file        jquery.dataTables.js
  * @author      SpryMedia Ltd
  * @contact     www.datatables.net
- * @copyright   Copyright 2008-2020 SpryMedia Ltd.
+ * @copyright   Copyright 2008-2021 SpryMedia Ltd.
  *
  * This source file is free software, available under the following license:
  *   MIT license - http://datatables.net/license
@@ -1100,6 +1100,8 @@
 						_fnLanguageCompat( json );
 						_fnCamelToHungarian( defaults.oLanguage, json );
 						$.extend( true, oLanguage, json );
+			
+						_fnCallbackFire( oSettings, null, 'i18n', [oSettings]);
 						_fnInitialise( oSettings );
 					},
 					error: function () {
@@ -1109,6 +1111,9 @@
 				} );
 				bInitHandedOff = true;
 			}
+			else {
+				_fnCallbackFire( oSettings, null, 'i18n', [oSettings]);
+			}
 			
 			/*
 			 * Stripes
@@ -1260,7 +1265,7 @@
 			
 				var tbody = $this.children('tbody');
 				if ( tbody.length === 0 ) {
-					tbody = $('<tbody/>').appendTo($this);
+					tbody = $('<tbody/>').insertAfter(thead);
 				}
 				oSettings.nTBody = tbody[0];
 			
@@ -2315,8 +2320,9 @@
 						}
 	
 						// Only a single match is needed for html type since it is
-						// bottom of the pile and very similar to string
-						if ( detectedType === 'html' ) {
+						// bottom of the pile and very similar to string - but it
+						// must not be empty
+						if ( detectedType === 'html' && ! _empty(cache[k]) ) {
 							break;
 						}
 					}
@@ -3421,9 +3427,10 @@
 	/**
 	 * Insert the required TR nodes into the table for display
 	 *  @param {object} oSettings dataTables settings object
+	 *  @param ajaxComplete true after ajax call to complete rendering
 	 *  @memberof DataTable#oApi
 	 */
-	function _fnDraw( oSettings )
+	function _fnDraw( oSettings, ajaxComplete )
 	{
 		/* Provide a pre-callback function which can be used to cancel the draw is false is returned */
 		var aPreDraw = _fnCallbackFire( oSettings, 'aoPreDrawCallback', 'preDraw', [oSettings] );
@@ -3472,8 +3479,9 @@
 		{
 			oSettings.iDraw++;
 		}
-		else if ( !oSettings.bDestroying && !_fnAjaxUpdate( oSettings ) )
+		else if ( !oSettings.bDestroying && !ajaxComplete)
 		{
+			_fnAjaxUpdate( oSettings );
 			return;
 		}
 	
@@ -4005,21 +4013,16 @@
 	 */
 	function _fnAjaxUpdate( settings )
 	{
-		if ( settings.bAjaxDataGet ) {
-			settings.iDraw++;
-			_fnProcessingDisplay( settings, true );
-	
-			_fnBuildAjax(
-				settings,
-				_fnAjaxParameters( settings ),
-				function(json) {
-					_fnAjaxUpdateDraw( settings, json );
-				}
-			);
+		settings.iDraw++;
+		_fnProcessingDisplay( settings, true );
 	
-			return false;
-		}
-		return true;
+		_fnBuildAjax(
+			settings,
+			_fnAjaxParameters( settings ),
+			function(json) {
+				_fnAjaxUpdateDraw( settings, json );
+			}
+		);
 	}
 	
 	
@@ -4172,14 +4175,12 @@
 		}
 		settings.aiDisplay = settings.aiDisplayMaster.slice();
 	
-		settings.bAjaxDataGet = false;
-		_fnDraw( settings );
+		_fnDraw( settings, true );
 	
 		if ( ! settings._bInitComplete ) {
 			_fnInitComplete( settings, json );
 		}
 	
-		settings.bAjaxDataGet = true;
 		_fnProcessingDisplay( settings, false );
 	}
 	
@@ -6108,7 +6109,7 @@
 		{
 			var col = columns[i];
 			var asSorting = col.asSorting;
-			var sTitle = col.sTitle.replace( /<.*?>/g, "" );
+			var sTitle = col.ariaTitle || col.sTitle.replace( /<.*?>/g, "" );
 			var th = col.nTh;
 	
 			// IE7 is throwing an error when setting these properties with jQuery's
@@ -9542,7 +9543,7 @@
 	 *  @type string
 	 *  @default Version number
 	 */
-	DataTable.version = "1.10.23";
+	DataTable.version = "1.10.25";
 
 	/**
 	 * Private data store, containing all of the settings objects that are
@@ -13623,13 +13624,6 @@
 		 */
 		"sAjaxDataProp": null,
 	
-		/**
-		 * Note if draw should be blocked while getting data
-		 *  @type boolean
-		 *  @default true
-		 */
-		"bAjaxDataGet": true,
-	
 		/**
 		 * The last jQuery XHR object that was used for server-side data gathering.
 		 * This can be used for working with the XHR information in one of the
@@ -13966,7 +13960,7 @@
 		 *
 		 *  @type string
 		 */
-		build:"bs4/dt-1.10.23",
+		build:"bs5/dt-1.10.25",
 	
 	
 		/**
@@ -14494,8 +14488,8 @@
 		"sSortAsc": "sorting_asc",
 		"sSortDesc": "sorting_desc",
 		"sSortable": "sorting", /* Sortable in both directions */
-		"sSortableAsc": "sorting_asc_disabled",
-		"sSortableDesc": "sorting_desc_disabled",
+		"sSortableAsc": "sorting_desc_disabled",
+		"sSortableDesc": "sorting_asc_disabled",
 		"sSortableNone": "sorting_disabled",
 		"sSortColumn": "sorting_", /* Note that an int is postfixed for the sorting order */
 	
@@ -14936,7 +14930,6 @@
 	
 					cell
 						.removeClass(
-							column.sSortingClass +' '+
 							classes.sSortAsc +' '+
 							classes.sSortDesc
 						)
@@ -15061,6 +15054,11 @@
 						decimal+(d - intPart).toFixed( precision ).substring( 2 ):
 						'';
 	
+					// If zero, then can't have a negative prefix
+					if (intPart === 0 && parseFloat(floatPart) === 0) {
+						negative = '';
+					}
+	
 					return negative + (prefix||'') +
 						intPart.toString().replace(
 							/\B(?=(\d{3})+(?!\d))/g, thousands
@@ -15395,12 +15393,12 @@
 }));
 
 
-/*! DataTables Bootstrap 4 integration
- * ©2011-2017 SpryMedia Ltd - datatables.net/license
+/*! DataTables Bootstrap 5 integration
+ * 2020 SpryMedia Ltd - datatables.net/license
  */
 
 /**
- * DataTables integration for Bootstrap 4. This requires Bootstrap 4 and
+ * DataTables integration for Bootstrap 4. This requires Bootstrap 5 and
  * DataTables 1.10 or newer.
  *
  * This file sets the defaults and adds options to DataTables to style its
@@ -15452,9 +15450,9 @@ $.extend( true, DataTable.defaults, {
 
 /* Default class modification */
 $.extend( DataTable.ext.classes, {
-	sWrapper:      "dataTables_wrapper dt-bootstrap4",
+	sWrapper:      "dataTables_wrapper dt-bootstrap5",
 	sFilterInput:  "form-control form-control-sm",
-	sLengthSelect: "custom-select custom-select-sm form-control form-control-sm",
+	sLengthSelect: "form-select form-select-sm",
 	sProcessing:   "dataTables_processing card",
 	sPageButton:   "paginate_button page-item"
 } );
diff --git a/src/static/scripts/jquery-3.5.1.slim.js b/src/static/scripts/jquery-3.6.0.slim.js
similarity index 98%
rename from src/static/scripts/jquery-3.5.1.slim.js
rename to src/static/scripts/jquery-3.6.0.slim.js
index 790e7ec8ccaa8a2bfb472960f34d8c5c763b604d..665bf108c997df270dab6ccfdd3590830eb17268 100644
--- a/src/static/scripts/jquery-3.5.1.slim.js
+++ b/src/static/scripts/jquery-3.6.0.slim.js
@@ -1,15 +1,15 @@
 /*!
- * jQuery JavaScript Library v3.5.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-deprecated/ajax-event-alias,-effects,-effects/Tween,-effects/animatedSelector
+ * jQuery JavaScript Library v3.6.0 -ajax,-ajax/jsonp,-ajax/load,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-deprecated/ajax-event-alias,-effects,-effects/Tween,-effects/animatedSelector
  * https://jquery.com/
  *
  * Includes Sizzle.js
  * https://sizzlejs.com/
  *
- * Copyright JS Foundation and other contributors
+ * Copyright OpenJS Foundation and other contributors
  * Released under the MIT license
  * https://jquery.org/license
  *
- * Date: 2020-05-04T22:49Z
+ * Date: 2021-03-02T17:08Z
  */
 ( function( global, factory ) {
 
@@ -76,12 +76,16 @@ var support = {};
 
 var isFunction = function isFunction( obj ) {
 
-      // Support: Chrome <=57, Firefox <=52
-      // In some browsers, typeof returns "function" for HTML <object> elements
-      // (i.e., `typeof document.createElement( "object" ) === "function"`).
-      // We don't want to classify *any* DOM node as a function.
-      return typeof obj === "function" && typeof obj.nodeType !== "number";
-  };
+		// Support: Chrome <=57, Firefox <=52
+		// In some browsers, typeof returns "function" for HTML <object> elements
+		// (i.e., `typeof document.createElement( "object" ) === "function"`).
+		// We don't want to classify *any* DOM node as a function.
+		// Support: QtWeb <=3.8.5, WebKit <=534.34, wkhtmltopdf tool <=0.12.5
+		// Plus for old WebKit, typeof returns "function" for HTML collections
+		// (e.g., `typeof document.getElementsByTagName("div") === "function"`). (gh-4756)
+		return typeof obj === "function" && typeof obj.nodeType !== "number" &&
+			typeof obj.item !== "function";
+	};
 
 
 var isWindow = function isWindow( obj ) {
@@ -147,7 +151,7 @@ function toType( obj ) {
 
 
 var
-	version = "3.5.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-deprecated/ajax-event-alias,-effects,-effects/Tween,-effects/animatedSelector",
+	version = "3.6.0 -ajax,-ajax/jsonp,-ajax/load,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-deprecated/ajax-event-alias,-effects,-effects/Tween,-effects/animatedSelector",
 
 	// Define a local copy of jQuery
 	jQuery = function( selector, context ) {
@@ -401,7 +405,7 @@ jQuery.extend( {
 			if ( isArrayLike( Object( arr ) ) ) {
 				jQuery.merge( ret,
 					typeof arr === "string" ?
-					[ arr ] : arr
+						[ arr ] : arr
 				);
 			} else {
 				push.call( ret, arr );
@@ -496,9 +500,9 @@ if ( typeof Symbol === "function" ) {
 
 // Populate the class2type map
 jQuery.each( "Boolean Number String Function Array Date RegExp Object Error Symbol".split( " " ),
-function( _i, name ) {
-	class2type[ "[object " + name + "]" ] = name.toLowerCase();
-} );
+	function( _i, name ) {
+		class2type[ "[object " + name + "]" ] = name.toLowerCase();
+	} );
 
 function isArrayLike( obj ) {
 
@@ -518,14 +522,14 @@ function isArrayLike( obj ) {
 }
 var Sizzle =
 /*!
- * Sizzle CSS Selector Engine v2.3.5
+ * Sizzle CSS Selector Engine v2.3.6
  * https://sizzlejs.com/
  *
  * Copyright JS Foundation and other contributors
  * Released under the MIT license
  * https://js.foundation/
  *
- * Date: 2020-03-14
+ * Date: 2021-02-16
  */
 ( function( window ) {
 var i,
@@ -1108,8 +1112,8 @@ support = Sizzle.support = {};
  * @returns {Boolean} True iff elem is a non-HTML XML node
  */
 isXML = Sizzle.isXML = function( elem ) {
-	var namespace = elem.namespaceURI,
-		docElem = ( elem.ownerDocument || elem ).documentElement;
+	var namespace = elem && elem.namespaceURI,
+		docElem = elem && ( elem.ownerDocument || elem ).documentElement;
 
 	// Support: IE <=8
 	// Assume HTML when documentElement doesn't yet exist, such as inside loading iframes
@@ -3024,9 +3028,9 @@ var rneedsContext = jQuery.expr.match.needsContext;
 
 function nodeName( elem, name ) {
 
-  return elem.nodeName && elem.nodeName.toLowerCase() === name.toLowerCase();
+	return elem.nodeName && elem.nodeName.toLowerCase() === name.toLowerCase();
 
-};
+}
 var rsingleTag = ( /^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i );
 
 
@@ -3997,8 +4001,8 @@ jQuery.extend( {
 			resolveContexts = Array( i ),
 			resolveValues = slice.call( arguments ),
 
-			// the master Deferred
-			master = jQuery.Deferred(),
+			// the primary Deferred
+			primary = jQuery.Deferred(),
 
 			// subordinate callback factory
 			updateFunc = function( i ) {
@@ -4006,30 +4010,30 @@ jQuery.extend( {
 					resolveContexts[ i ] = this;
 					resolveValues[ i ] = arguments.length > 1 ? slice.call( arguments ) : value;
 					if ( !( --remaining ) ) {
-						master.resolveWith( resolveContexts, resolveValues );
+						primary.resolveWith( resolveContexts, resolveValues );
 					}
 				};
 			};
 
 		// Single- and empty arguments are adopted like Promise.resolve
 		if ( remaining <= 1 ) {
-			adoptValue( singleValue, master.done( updateFunc( i ) ).resolve, master.reject,
+			adoptValue( singleValue, primary.done( updateFunc( i ) ).resolve, primary.reject,
 				!remaining );
 
 			// Use .then() to unwrap secondary thenables (cf. gh-3000)
-			if ( master.state() === "pending" ||
+			if ( primary.state() === "pending" ||
 				isFunction( resolveValues[ i ] && resolveValues[ i ].then ) ) {
 
-				return master.then();
+				return primary.then();
 			}
 		}
 
 		// Multiple arguments are aggregated like Promise.all array elements
 		while ( i-- ) {
-			adoptValue( resolveValues[ i ], updateFunc( i ), master.reject );
+			adoptValue( resolveValues[ i ], updateFunc( i ), primary.reject );
 		}
 
-		return master.promise();
+		return primary.promise();
 	}
 } );
 
@@ -4180,8 +4184,8 @@ var access = function( elems, fn, key, value, chainable, emptyGet, raw ) {
 			for ( ; i < len; i++ ) {
 				fn(
 					elems[ i ], key, raw ?
-					value :
-					value.call( elems[ i ], i, fn( elems[ i ], key ) )
+						value :
+						value.call( elems[ i ], i, fn( elems[ i ], key ) )
 				);
 			}
 		}
@@ -5089,10 +5093,7 @@ function buildFragment( elems, context, scripts, selection, ignored ) {
 }
 
 
-var
-	rkeyEvent = /^key/,
-	rmouseEvent = /^(?:mouse|pointer|contextmenu|drag|drop)|click/,
-	rtypenamespace = /^([^.]*)(?:\.(.+)|)/;
+var rtypenamespace = /^([^.]*)(?:\.(.+)|)/;
 
 function returnTrue() {
 	return true;
@@ -5387,8 +5388,8 @@ jQuery.event = {
 			event = jQuery.event.fix( nativeEvent ),
 
 			handlers = (
-					dataPriv.get( this, "events" ) || Object.create( null )
-				)[ event.type ] || [],
+				dataPriv.get( this, "events" ) || Object.create( null )
+			)[ event.type ] || [],
 			special = jQuery.event.special[ event.type ] || {};
 
 		// Use the fix-ed jQuery.Event rather than the (read-only) native event
@@ -5512,12 +5513,12 @@ jQuery.event = {
 			get: isFunction( hook ) ?
 				function() {
 					if ( this.originalEvent ) {
-							return hook( this.originalEvent );
+						return hook( this.originalEvent );
 					}
 				} :
 				function() {
 					if ( this.originalEvent ) {
-							return this.originalEvent[ name ];
+						return this.originalEvent[ name ];
 					}
 				},
 
@@ -5656,7 +5657,13 @@ function leverageNative( el, type, expectSync ) {
 						// Cancel the outer synthetic event
 						event.stopImmediatePropagation();
 						event.preventDefault();
-						return result.value;
+
+						// Support: Chrome 86+
+						// In Chrome, if an element having a focusout handler is blurred by
+						// clicking outside of it, it invokes the handler synchronously. If
+						// that handler calls `.remove()` on the element, the data is cleared,
+						// leaving `result` undefined. We need to guard against this.
+						return result && result.value;
 					}
 
 				// If this is an inner synthetic event for an event with a bubbling surrogate
@@ -5821,34 +5828,7 @@ jQuery.each( {
 	targetTouches: true,
 	toElement: true,
 	touches: true,
-
-	which: function( event ) {
-		var button = event.button;
-
-		// Add which for key events
-		if ( event.which == null && rkeyEvent.test( event.type ) ) {
-			return event.charCode != null ? event.charCode : event.keyCode;
-		}
-
-		// Add which for click: 1 === left; 2 === middle; 3 === right
-		if ( !event.which && button !== undefined && rmouseEvent.test( event.type ) ) {
-			if ( button & 1 ) {
-				return 1;
-			}
-
-			if ( button & 2 ) {
-				return 3;
-			}
-
-			if ( button & 4 ) {
-				return 2;
-			}
-
-			return 0;
-		}
-
-		return event.which;
-	}
+	which: true
 }, jQuery.event.addProp );
 
 jQuery.each( { focus: "focusin", blur: "focusout" }, function( type, delegateType ) {
@@ -5874,6 +5854,12 @@ jQuery.each( { focus: "focusin", blur: "focusout" }, function( type, delegateTyp
 			return true;
 		},
 
+		// Suppress native focus or blur as it's already being fired
+		// in leverageNative.
+		_default: function() {
+			return true;
+		},
+
 		delegateType: delegateType
 	};
 } );
@@ -6541,6 +6527,10 @@ var rboxStyle = new RegExp( cssExpand.join( "|" ), "i" );
 		// set in CSS while `offset*` properties report correct values.
 		// Behavior in IE 9 is more subtle than in newer versions & it passes
 		// some versions of this test; make sure not to make it pass there!
+		//
+		// Support: Firefox 70+
+		// Only Firefox includes border widths
+		// in computed dimensions. (gh-4529)
 		reliableTrDimensions: function() {
 			var table, tr, trChild, trStyle;
 			if ( reliableTrDimensionsVal == null ) {
@@ -6548,17 +6538,32 @@ var rboxStyle = new RegExp( cssExpand.join( "|" ), "i" );
 				tr = document.createElement( "tr" );
 				trChild = document.createElement( "div" );
 
-				table.style.cssText = "position:absolute;left:-11111px";
+				table.style.cssText = "position:absolute;left:-11111px;border-collapse:separate";
+				tr.style.cssText = "border:1px solid";
+
+				// Support: Chrome 86+
+				// Height set through cssText does not get applied.
+				// Computed height then comes back as 0.
 				tr.style.height = "1px";
 				trChild.style.height = "9px";
 
+				// Support: Android 8 Chrome 86+
+				// In our bodyBackground.html iframe,
+				// display for all div elements is set to "inline",
+				// which causes a problem only in Android 8 Chrome 86.
+				// Ensuring the div is display: block
+				// gets around this issue.
+				trChild.style.display = "block";
+
 				documentElement
 					.appendChild( table )
 					.appendChild( tr )
 					.appendChild( trChild );
 
 				trStyle = window.getComputedStyle( tr );
-				reliableTrDimensionsVal = parseInt( trStyle.height ) > 3;
+				reliableTrDimensionsVal = ( parseInt( trStyle.height, 10 ) +
+					parseInt( trStyle.borderTopWidth, 10 ) +
+					parseInt( trStyle.borderBottomWidth, 10 ) ) === tr.offsetHeight;
 
 				documentElement.removeChild( table );
 			}
@@ -7022,10 +7027,10 @@ jQuery.each( [ "height", "width" ], function( _i, dimension ) {
 					// Running getBoundingClientRect on a disconnected node
 					// in IE throws an error.
 					( !elem.getClientRects().length || !elem.getBoundingClientRect().width ) ?
-						swap( elem, cssShow, function() {
-							return getWidthOrHeight( elem, dimension, extra );
-						} ) :
-						getWidthOrHeight( elem, dimension, extra );
+					swap( elem, cssShow, function() {
+						return getWidthOrHeight( elem, dimension, extra );
+					} ) :
+					getWidthOrHeight( elem, dimension, extra );
 			}
 		},
 
@@ -7084,7 +7089,7 @@ jQuery.cssHooks.marginLeft = addGetHookIf( support.reliableMarginLeft,
 					swap( elem, { marginLeft: 0 }, function() {
 						return elem.getBoundingClientRect().left;
 					} )
-				) + "px";
+			) + "px";
 		}
 	}
 );
@@ -7608,8 +7613,8 @@ jQuery.fn.extend( {
 				if ( this.setAttribute ) {
 					this.setAttribute( "class",
 						className || value === false ?
-						"" :
-						dataPriv.get( this, "__className__" ) || ""
+							"" :
+							dataPriv.get( this, "__className__" ) || ""
 					);
 				}
 			}
@@ -7624,7 +7629,7 @@ jQuery.fn.extend( {
 		while ( ( elem = this[ i++ ] ) ) {
 			if ( elem.nodeType === 1 &&
 				( " " + stripAndCollapse( getClass( elem ) ) + " " ).indexOf( className ) > -1 ) {
-					return true;
+				return true;
 			}
 		}
 
@@ -7914,9 +7919,7 @@ jQuery.extend( jQuery.event, {
 				special.bindType || type;
 
 			// jQuery handler
-			handle = (
-					dataPriv.get( cur, "events" ) || Object.create( null )
-				)[ event.type ] &&
+			handle = ( dataPriv.get( cur, "events" ) || Object.create( null ) )[ event.type ] &&
 				dataPriv.get( cur, "handle" );
 			if ( handle ) {
 				handle.apply( cur, data );
@@ -8057,7 +8060,7 @@ if ( !support.focusin ) {
 
 // Cross-browser xml parsing
 jQuery.parseXML = function( data ) {
-	var xml;
+	var xml, parserErrorElem;
 	if ( !data || typeof data !== "string" ) {
 		return null;
 	}
@@ -8066,12 +8069,17 @@ jQuery.parseXML = function( data ) {
 	// IE throws on parseFromString with invalid input.
 	try {
 		xml = ( new window.DOMParser() ).parseFromString( data, "text/xml" );
-	} catch ( e ) {
-		xml = undefined;
-	}
-
-	if ( !xml || xml.getElementsByTagName( "parsererror" ).length ) {
-		jQuery.error( "Invalid XML: " + data );
+	} catch ( e ) {}
+
+	parserErrorElem = xml && xml.getElementsByTagName( "parsererror" )[ 0 ];
+	if ( !xml || parserErrorElem ) {
+		jQuery.error( "Invalid XML: " + (
+			parserErrorElem ?
+				jQuery.map( parserErrorElem.childNodes, function( el ) {
+					return el.textContent;
+				} ).join( "\n" ) :
+				data
+		) );
 	}
 	return xml;
 };
@@ -8172,16 +8180,14 @@ jQuery.fn.extend( {
 			// Can add propHook for "elements" to filter or add form elements
 			var elements = jQuery.prop( this, "elements" );
 			return elements ? jQuery.makeArray( elements ) : this;
-		} )
-		.filter( function() {
+		} ).filter( function() {
 			var type = this.type;
 
 			// Use .is( ":disabled" ) so that fieldset[disabled] works
 			return this.name && !jQuery( this ).is( ":disabled" ) &&
 				rsubmittable.test( this.nodeName ) && !rsubmitterTypes.test( type ) &&
 				( this.checked || !rcheckableType.test( type ) );
-		} )
-		.map( function( _i, elem ) {
+		} ).map( function( _i, elem ) {
 			var val = jQuery( this ).val();
 
 			if ( val == null ) {
@@ -8387,12 +8393,6 @@ jQuery.offset = {
 			options.using.call( elem, props );
 
 		} else {
-			if ( typeof props.top === "number" ) {
-				props.top += "px";
-			}
-			if ( typeof props.left === "number" ) {
-				props.left += "px";
-			}
 			curElem.css( props );
 		}
 	}
@@ -8561,8 +8561,11 @@ jQuery.each( [ "top", "left" ], function( _i, prop ) {
 
 // Create innerHeight, innerWidth, height, width, outerHeight and outerWidth methods
 jQuery.each( { Height: "height", Width: "width" }, function( name, type ) {
-	jQuery.each( { padding: "inner" + name, content: type, "": "outer" + name },
-		function( defaultExtra, funcName ) {
+	jQuery.each( {
+		padding: "inner" + name,
+		content: type,
+		"": "outer" + name
+	}, function( defaultExtra, funcName ) {
 
 		// Margin is only for outerHeight, outerWidth
 		jQuery.fn[ funcName ] = function( margin, value ) {
@@ -8631,7 +8634,8 @@ jQuery.fn.extend( {
 	}
 } );
 
-jQuery.each( ( "blur focus focusin focusout resize scroll click dblclick " +
+jQuery.each(
+	( "blur focus focusin focusout resize scroll click dblclick " +
 	"mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
 	"change select submit keydown keypress keyup contextmenu" ).split( " " ),
 	function( _i, name ) {
@@ -8642,7 +8646,8 @@ jQuery.each( ( "blur focus focusin focusout resize scroll click dblclick " +
 				this.on( name, null, data, fn ) :
 				this.trigger( name );
 		};
-	} );
+	}
+);
 
 
 
diff --git a/src/static/templates/admin/base.hbs b/src/static/templates/admin/base.hbs
index eec65524e51159a36373a5542eee6090c38a47fb..94684ede0763e7ab20f37e8d1be71d1c68095bba 100644
--- a/src/static/templates/admin/base.hbs
+++ b/src/static/templates/admin/base.hbs
@@ -15,14 +15,16 @@
             width: 48px;
             height: 48px;
         }
-        .navbar .vaultwarden-icon {
+        .vaultwarden-icon {
             height: 32px;
             width: auto;
-            margin: -5px -3px 0 0;
+            margin: -5px 0 0 0;
         }
     </style>
     <script src="{{urlpath}}/bwrs_static/identicon.js"></script>
     <script>
+        'use strict';
+
         function reload() { window.location.reload(); }
         function msg(text, reload_page = true) {
             text && alert(text);
@@ -78,19 +80,18 @@
             });
         }
     </script>
-
 </head>
 
 <body class="bg-light">
     <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4 shadow fixed-top">
         <div class="container-xl">
-            <a class="navbar-brand" href="{{urlpath}}/admin"><img class="pr-1 vaultwarden-icon" src="{{urlpath}}/bwrs_static/vaultwarden-icon.png" alt="V">aultwarden Admin</a>
-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
+            <a class="navbar-brand" href="{{urlpath}}/admin"><img class="vaultwarden-icon" src="{{urlpath}}/bwrs_static/vaultwarden-icon.png" alt="V">aultwarden Admin</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
                     aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarCollapse">
-                <ul class="navbar-nav mr-auto">
+                <ul class="navbar-nav me-auto">
                 {{#if logged_in}}
                     <li class="nav-item">
                         <a class="nav-link" href="{{urlpath}}/admin">Settings</a>
@@ -121,17 +122,19 @@
 
     <!-- This script needs to be at the bottom, else it will fail! -->
     <script>
+        'use strict';
+
         // get current URL path and assign 'active' class to the correct nav-item
-        (function () {
+        (() => {
             var pathname = window.location.pathname;
             if (pathname === "") return;
             var navItem = document.querySelectorAll('.navbar-nav .nav-item a[href="'+pathname+'"]');
             if (navItem.length === 1) {
-                navItem[0].parentElement.className = navItem[0].parentElement.className + ' active';
+                navItem[0].className = navItem[0].className + ' active';
+                navItem[0].setAttribute('aria-current', 'page');
             }
         })();
     </script>
-    <!-- This script needs to be at the bottom, else it will fail! -->
     <script src="{{urlpath}}/bwrs_static/bootstrap-native.js"></script>
 </body>
 </html>
diff --git a/src/static/templates/admin/diagnostics.hbs b/src/static/templates/admin/diagnostics.hbs
index 1a43e154deefda01efe64239e93487e908d99f62..4c4575ade52bc2c5b3649e2091c044ebb1758cc3 100644
--- a/src/static/templates/admin/diagnostics.hbs
+++ b/src/static/templates/admin/diagnostics.hbs
@@ -7,37 +7,37 @@
             <div class="col-md">
                 <dl class="row">
                     <dt class="col-sm-5">Server Installed
-                        <span class="badge badge-success d-none" id="server-success" title="Latest version is installed.">Ok</span>
-                        <span class="badge badge-warning d-none" id="server-warning" title="There seems to be an update available.">Update</span>
-                        <span class="badge badge-info d-none" id="server-branch" title="This is a branched version.">Branched</span>
+                        <span class="badge bg-success d-none" id="server-success" title="Latest version is installed.">Ok</span>
+                        <span class="badge bg-warning d-none" id="server-warning" title="There seems to be an update available.">Update</span>
+                        <span class="badge bg-info d-none" id="server-branch" title="This is a branched version.">Branched</span>
                     </dt>
                     <dd class="col-sm-7">
                         <span id="server-installed">{{version}}</span>
                     </dd>
                     <dt class="col-sm-5">Server Latest
-                        <span class="badge badge-secondary d-none" id="server-failed" title="Unable to determine latest version.">Unknown</span>
+                        <span class="badge bg-secondary d-none" id="server-failed" title="Unable to determine latest version.">Unknown</span>
                     </dt>
                     <dd class="col-sm-7">
-                        <span id="server-latest">{{diagnostics.latest_release}}<span id="server-latest-commit" class="d-none">-{{diagnostics.latest_commit}}</span></span>
+                        <span id="server-latest">{{page_data.latest_release}}<span id="server-latest-commit" class="d-none">-{{page_data.latest_commit}}</span></span>
                     </dd>
-                    {{#if diagnostics.web_vault_enabled}}
+                    {{#if page_data.web_vault_enabled}}
                     <dt class="col-sm-5">Web Installed
-                        <span class="badge badge-success d-none" id="web-success" title="Latest version is installed.">Ok</span>
-                        <span class="badge badge-warning d-none" id="web-warning" title="There seems to be an update available.">Update</span>
+                        <span class="badge bg-success d-none" id="web-success" title="Latest version is installed.">Ok</span>
+                        <span class="badge bg-warning d-none" id="web-warning" title="There seems to be an update available.">Update</span>
                     </dt>
                     <dd class="col-sm-7">
-                        <span id="web-installed">{{diagnostics.web_vault_version}}</span>
+                        <span id="web-installed">{{page_data.web_vault_version}}</span>
                     </dd>
-                    {{#unless diagnostics.running_within_docker}}
+                    {{#unless page_data.running_within_docker}}
                     <dt class="col-sm-5">Web Latest
-                        <span class="badge badge-secondary d-none" id="web-failed" title="Unable to determine latest version.">Unknown</span>
+                        <span class="badge bg-secondary d-none" id="web-failed" title="Unable to determine latest version.">Unknown</span>
                     </dt>
                     <dd class="col-sm-7">
-                        <span id="web-latest">{{diagnostics.latest_web_build}}</span>
+                        <span id="web-latest">{{page_data.latest_web_build}}</span>
                     </dd>
                     {{/unless}}
                     {{/if}}
-                    {{#unless diagnostics.web_vault_enabled}}
+                    {{#unless page_data.web_vault_enabled}}
                     <dt class="col-sm-5">Web Installed</dt>
                     <dd class="col-sm-7">
                         <span id="web-installed">Web Vault is disabled</span>
@@ -45,7 +45,7 @@
                     {{/unless}}
                     <dt class="col-sm-5">Database</dt>
                     <dd class="col-sm-7">
-                        <span><b>{{diagnostics.db_type}}:</b> {{diagnostics.db_version}}</span>
+                        <span><b>{{page_data.db_type}}:</b> {{page_data.db_version}}</span>
                     </dd>
                 </dl>
             </div>
@@ -57,96 +57,105 @@
                 <dl class="row">
                     <dt class="col-sm-5">Running within Docker</dt>
                     <dd class="col-sm-7">
-                    {{#if diagnostics.running_within_docker}}
+                    {{#if page_data.running_within_docker}}
                         <span class="d-block"><b>Yes</b></span>
                     {{/if}}
-                    {{#unless diagnostics.running_within_docker}}
+                    {{#unless page_data.running_within_docker}}
+                        <span class="d-block"><b>No</b></span>
+                    {{/unless}}
+                    </dd>
+                    <dt class="col-sm-5">Environment settings overridden</dt>
+                    <dd class="col-sm-7">
+                    {{#if page_data.overrides}}
+                        <span class="d-block" title="The following settings are overridden: {{page_data.overrides}}"><b>Yes</b></span>
+                    {{/if}}
+                    {{#unless page_data.overrides}}
                         <span class="d-block"><b>No</b></span>
                     {{/unless}}
                     </dd>
                     <dt class="col-sm-5">Uses a reverse proxy</dt>
                     <dd class="col-sm-7">
-                    {{#if diagnostics.ip_header_exists}}
+                    {{#if page_data.ip_header_exists}}
                         <span class="d-block" title="IP Header found."><b>Yes</b></span>
                     {{/if}}
-                    {{#unless diagnostics.ip_header_exists}}
+                    {{#unless page_data.ip_header_exists}}
                         <span class="d-block" title="No IP Header found."><b>No</b></span>
                     {{/unless}}
                     </dd>
                     {{!-- Only show this if the IP Header Exists --}}
-                    {{#if diagnostics.ip_header_exists}}
+                    {{#if page_data.ip_header_exists}}
                     <dt class="col-sm-5">IP header
-                    {{#if diagnostics.ip_header_match}}
-                        <span class="badge badge-success" title="IP_HEADER config seems to be valid.">Match</span>
+                    {{#if page_data.ip_header_match}}
+                        <span class="badge bg-success" title="IP_HEADER config seems to be valid.">Match</span>
                     {{/if}}
-                    {{#unless diagnostics.ip_header_match}}
-                        <span class="badge badge-danger" title="IP_HEADER config seems to be invalid. IP's in the log could be invalid. Please fix.">No Match</span>
+                    {{#unless page_data.ip_header_match}}
+                        <span class="badge bg-danger" title="IP_HEADER config seems to be invalid. IP's in the log could be invalid. Please fix.">No Match</span>
                     {{/unless}}
                     </dt>
                     <dd class="col-sm-7">
-                    {{#if diagnostics.ip_header_match}}
-                        <span class="d-block"><b>Config/Server:</b> {{ diagnostics.ip_header_name }}</span>
+                    {{#if page_data.ip_header_match}}
+                        <span class="d-block"><b>Config/Server:</b> {{ page_data.ip_header_name }}</span>
                     {{/if}}
-                    {{#unless diagnostics.ip_header_match}}
-                        <span class="d-block"><b>Config:</b> {{ diagnostics.ip_header_config }}</span>
-                        <span class="d-block"><b>Server:</b> {{ diagnostics.ip_header_name }}</span>
+                    {{#unless page_data.ip_header_match}}
+                        <span class="d-block"><b>Config:</b> {{ page_data.ip_header_config }}</span>
+                        <span class="d-block"><b>Server:</b> {{ page_data.ip_header_name }}</span>
                     {{/unless}}
                     </dd>
                     {{/if}}
                     {{!-- End if IP Header Exists --}}
                     <dt class="col-sm-5">Internet access
-                    {{#if diagnostics.has_http_access}}
-                        <span class="badge badge-success" title="We have internet access!">Ok</span>
+                    {{#if page_data.has_http_access}}
+                        <span class="badge bg-success" title="We have internet access!">Ok</span>
                     {{/if}}
-                    {{#unless diagnostics.has_http_access}}
-                        <span class="badge badge-danger" title="There seems to be no internet access. Please fix.">Error</span>
+                    {{#unless page_data.has_http_access}}
+                        <span class="badge bg-danger" title="There seems to be no internet access. Please fix.">Error</span>
                     {{/unless}}
                     </dt>
                     <dd class="col-sm-7">
-                    {{#if diagnostics.has_http_access}}
+                    {{#if page_data.has_http_access}}
                         <span class="d-block"><b>Yes</b></span>
                     {{/if}}
-                    {{#unless diagnostics.has_http_access}}
+                    {{#unless page_data.has_http_access}}
                         <span class="d-block"><b>No</b></span>
                     {{/unless}}
                     </dd>
                     <dt class="col-sm-5">Internet access via a proxy</dt>
                     <dd class="col-sm-7">
-                    {{#if diagnostics.uses_proxy}}
+                    {{#if page_data.uses_proxy}}
                         <span class="d-block" title="Internet access goes via a proxy (HTTPS_PROXY or HTTP_PROXY is configured)."><b>Yes</b></span>
                     {{/if}}
-                    {{#unless diagnostics.uses_proxy}}
+                    {{#unless page_data.uses_proxy}}
                         <span class="d-block" title="We have direct internet access, no outgoing proxy configured."><b>No</b></span>
                     {{/unless}}
                     </dd>
                     <dt class="col-sm-5">DNS (github.com)
-                        <span class="badge badge-success d-none" id="dns-success" title="DNS Resolving works!">Ok</span>
-                        <span class="badge badge-danger d-none" id="dns-warning" title="DNS Resolving failed. Please fix.">Error</span>
+                        <span class="badge bg-success d-none" id="dns-success" title="DNS Resolving works!">Ok</span>
+                        <span class="badge bg-danger d-none" id="dns-warning" title="DNS Resolving failed. Please fix.">Error</span>
                     </dt>
                     <dd class="col-sm-7">
-                        <span id="dns-resolved">{{diagnostics.dns_resolved}}</span>
+                        <span id="dns-resolved">{{page_data.dns_resolved}}</span>
                     </dd>
                     <dt class="col-sm-5">Date & Time (Local)</dt>
                     <dd class="col-sm-7">
-                        <span><b>Server:</b> {{diagnostics.server_time_local}}</span>
+                        <span><b>Server:</b> {{page_data.server_time_local}}</span>
                     </dd>
                     <dt class="col-sm-5">Date & Time (UTC)
-                        <span class="badge badge-success d-none" id="time-success" title="Time offsets seem to be correct.">Ok</span>
-                        <span class="badge badge-danger d-none" id="time-warning" title="Time offsets are too mouch at drift.">Error</span>
+                        <span class="badge bg-success d-none" id="time-success" title="Time offsets seem to be correct.">Ok</span>
+                        <span class="badge bg-danger d-none" id="time-warning" title="Time offsets are too mouch at drift.">Error</span>
                     </dt>
                     <dd class="col-sm-7">
-                        <span id="time-server" class="d-block"><b>Server:</b> <span id="time-server-string">{{diagnostics.server_time}}</span></span>
+                        <span id="time-server" class="d-block"><b>Server:</b> <span id="time-server-string">{{page_data.server_time}}</span></span>
                         <span id="time-browser" class="d-block"><b>Browser:</b> <span id="time-browser-string"></span></span>
                     </dd>
 
                     <dt class="col-sm-5">Domain configuration
-                        <span class="badge badge-success d-none" id="domain-success" title="The domain variable matches the browser location and seems to be configured correctly.">Match</span>
-                        <span class="badge badge-danger d-none" id="domain-warning" title="The domain variable does not matches the browsers location.&#013;&#010;The domain variable does not seem to be configured correctly.&#013;&#010;Some features may not work as expected!">No Match</span>
-                        <span class="badge badge-success d-none" id="https-success" title="Configurued to use HTTPS">HTTPS</span>
-                        <span class="badge badge-danger d-none" id="https-warning" title="Not configured to use HTTPS.&#013;&#010;Some features may not work as expected!">No HTTPS</span>
+                        <span class="badge bg-success d-none" id="domain-success" title="The domain variable matches the browser location and seems to be configured correctly.">Match</span>
+                        <span class="badge bg-danger d-none" id="domain-warning" title="The domain variable does not matches the browsers location.&#013;&#010;The domain variable does not seem to be configured correctly.&#013;&#010;Some features may not work as expected!">No Match</span>
+                        <span class="badge bg-success d-none" id="https-success" title="Configurued to use HTTPS">HTTPS</span>
+                        <span class="badge bg-danger d-none" id="https-warning" title="Not configured to use HTTPS.&#013;&#010;Some features may not work as expected!">No HTTPS</span>
                     </dt>
                     <dd class="col-sm-7">
-                        <span id="domain-server" class="d-block"><b>Server:</b> <span id="domain-server-string">{{diagnostics.admin_url}}</span></span>
+                        <span id="domain-server" class="d-block"><b>Server:</b> <span id="domain-server-string">{{page_data.admin_url}}</span></span>
                         <span id="domain-browser" class="d-block"><b>Browser:</b> <span id="domain-browser-string"></span></span>
                     </dd>
                 </dl>
@@ -173,10 +182,17 @@
                     <dt class="col-sm-3">
                         <button type="button" id="gen-support" class="btn btn-primary" onclick="generateSupportString(); return false;">Generate Support String</button>
                         <br><br>
-                        <button type="button" id="copy-support" class="btn btn-info d-none" onclick="copyToClipboard(); return false;">Copy To Clipboard</button>
+                        <button type="button" id="copy-support" class="btn btn-info mb-3 d-none" onclick="copyToClipboard(); return false;">Copy To Clipboard</button>
+                        <div class="toast-container position-absolute float-start" style="width: 15rem;">
+                            <div id="toastClipboardCopy" class="toast fade hide" role="status" aria-live="polite" aria-atomic="true" data-bs-autohide="true" data-bs-delay="1500">
+                                <div class="toast-body">
+                                    Copied to clipboard!
+                                </div>
+                            </div>
+                        </div>
                     </dt>
                     <dd class="col-sm-9">
-                        <pre id="support-string" class="pre-scrollable d-none" style="width: 100%; height: 16em; size: 0.6em; border: 1px solid; padding: 4px;"></pre>
+                        <pre id="support-string" class="pre-scrollable d-none w-100 border p-2" style="height: 16rem;"></pre>
                     </dd>
                 </dl>
             </div>
@@ -185,10 +201,13 @@
 </main>
 
 <script>
-    dnsCheck = false;
-    timeCheck = false;
-    domainCheck = false;
-    httpsCheck = false;
+    'use strict';
+
+    var dnsCheck = false;
+    var timeCheck = false;
+    var domainCheck = false;
+    var httpsCheck = false;
+
     (() => {
         // ================================
         // Date & Time Check
@@ -203,7 +222,10 @@
         document.getElementById("time-browser-string").innerText = browserUTC;
 
         const serverUTC = document.getElementById("time-server-string").innerText;
-        const timeDrift = (Date.parse(serverUTC) - Date.parse(browserUTC)) / 1000;
+        const timeDrift = (
+                Date.parse(serverUTC.replace(' ', 'T').replace(' UTC', '')) -
+                Date.parse(browserUTC.replace(' ', 'T').replace(' UTC', ''))
+            ) / 1000;
         if (timeDrift > 30 || timeDrift < -30) {
             document.getElementById('time-warning').classList.remove('d-none');
         } else {
@@ -233,7 +255,7 @@
         const webInstalled = document.getElementById('web-installed').innerText;
         checkVersions('server', serverInstalled, serverLatest, serverLatestCommit);
 
-        {{#unless diagnostics.running_within_docker}}
+        {{#unless page_data.running_within_docker}}
         const webLatest = document.getElementById('web-latest').innerText;
         checkVersions('web', webInstalled, webLatest);
         {{/unless}}
@@ -303,30 +325,38 @@
     // ================================
     // Generate support string to be pasted on github or the forum
     async function generateSupportString() {
-        supportString = "### Your environment (Generated via diagnostics page)\n";
+        let supportString = "### Your environment (Generated via diagnostics page)\n";
 
         supportString += "* Vaultwarden version: v{{ version }}\n";
-        supportString += "* Web-vault version: v{{ diagnostics.web_vault_version }}\n";
-        supportString += "* Running within Docker: {{ diagnostics.running_within_docker }}\n";
-        supportString += "* Uses a reverse proxy: {{ diagnostics.ip_header_exists }}\n";
-        {{#if diagnostics.ip_header_exists}}
-        supportString += "* IP Header check: {{ diagnostics.ip_header_match }} ({{ diagnostics.ip_header_name }})\n";
+        supportString += "* Web-vault version: v{{ page_data.web_vault_version }}\n";
+        supportString += "* Running within Docker: {{ page_data.running_within_docker }}\n";
+        supportString += "* Environment settings overridden: ";
+        {{#if page_data.overrides}}
+            supportString += "true\n"
+        {{else}}
+            supportString += "false\n"
+        {{/if}}
+        supportString += "* Uses a reverse proxy: {{ page_data.ip_header_exists }}\n";
+        {{#if page_data.ip_header_exists}}
+        supportString += "* IP Header check: {{ page_data.ip_header_match }} ({{ page_data.ip_header_name }})\n";
         {{/if}}
-        supportString += "* Internet access: {{ diagnostics.has_http_access }}\n";
-        supportString += "* Internet access via a proxy: {{ diagnostics.uses_proxy }}\n";
+        supportString += "* Internet access: {{ page_data.has_http_access }}\n";
+        supportString += "* Internet access via a proxy: {{ page_data.uses_proxy }}\n";
         supportString += "* DNS Check: " + dnsCheck + "\n";
         supportString += "* Time Check: " + timeCheck + "\n";
         supportString += "* Domain Configuration Check: " + domainCheck + "\n";
         supportString += "* HTTPS Check: " + httpsCheck + "\n";
-        supportString += "* Database type: {{ diagnostics.db_type }}\n";
-        supportString += "* Database version: {{ diagnostics.db_version }}\n";
+        supportString += "* Database type: {{ page_data.db_type }}\n";
+        supportString += "* Database version: {{ page_data.db_version }}\n";
         supportString += "* Clients used: \n";
         supportString += "* Reverse proxy and version: \n";
         supportString += "* Other relevant information: \n";
 
-        jsonResponse = await fetch('{{urlpath}}/admin/diagnostics/config');
-        configJson = await jsonResponse.json();
-        supportString += "\n### Config (Generated via diagnostics page)\n```json\n" + JSON.stringify(configJson, undefined, 2) + "\n```\n";
+        let jsonResponse = await fetch('{{urlpath}}/admin/diagnostics/config');
+        const configJson = await jsonResponse.json();
+        supportString += "\n### Config (Generated via diagnostics page)\n<details><summary>Show Running Config</summary>\n"
+        supportString += "\n**Environment settings which are overridden:** {{page_data.overrides}}\n"
+        supportString += "\n\n```json\n" + JSON.stringify(configJson, undefined, 2) + "\n```\n</details>\n";
 
         document.getElementById('support-string').innerText = supportString;
         document.getElementById('support-string').classList.remove('d-none');
@@ -334,16 +364,19 @@
     }
 
     function copyToClipboard() {
-        const str = document.getElementById('support-string').innerText;
-        const el = document.createElement('textarea');
-        el.value = str;
-        el.setAttribute('readonly', '');
-        el.style.position = 'absolute';
-        el.style.left = '-9999px';
-        document.body.appendChild(el);
-        el.select();
+        const supportStr = document.getElementById('support-string').innerText;
+        const tmpCopyEl = document.createElement('textarea');
+
+        tmpCopyEl.setAttribute('id', 'copy-support-string');
+        tmpCopyEl.setAttribute('readonly', '');
+        tmpCopyEl.value = supportStr;
+        tmpCopyEl.style.position = 'absolute';
+        tmpCopyEl.style.left = '-9999px';
+        document.body.appendChild(tmpCopyEl);
+        tmpCopyEl.select();
         document.execCommand('copy');
-        document.body.removeChild(el);
-    }
+        tmpCopyEl.remove();
 
+        new BSN.Toast('#toastClipboardCopy').show();
+    }
 </script>
diff --git a/src/static/templates/admin/organizations.hbs b/src/static/templates/admin/organizations.hbs
index 10384de75c83bc3fff7d81c4f4856f34962dddda..35026a5027e4fb3986fb7f6737d234542f376569 100644
--- a/src/static/templates/admin/organizations.hbs
+++ b/src/static/templates/admin/organizations.hbs
@@ -1,7 +1,6 @@
 <main class="container-xl">
     <div id="organizations-block" class="my-3 p-3 bg-white rounded shadow">
         <h6 class="border-bottom pb-2 mb-3">Organizations</h6>
-
         <div class="table-responsive-xl small">
             <table id="orgs-table" class="table table-sm table-striped table-hover">
                 <thead>
@@ -10,19 +9,19 @@
                         <th>Users</th>
                         <th>Items</th>
                         <th>Attachments</th>
-                        <th style="width: 120px; min-width: 120px;">Actions</th>
+                        <th style="width: 130px; min-width: 130px;">Actions</th>
                     </tr>
                 </thead>
                 <tbody>
-                    {{#each organizations}}
+                    {{#each page_data}}
                     <tr>
                         <td>
-                            <img class="mr-2 float-left rounded identicon" data-src="{{Id}}">
-                            <div class="float-left">
+                            <img class="float-start me-2 rounded identicon" data-src="{{Id}}">
+                            <div class="float-start">
                                 <strong>{{Name}}</strong>
-                                <span class="mr-2">({{BillingEmail}})</span>
+                                <span class="me-2">({{BillingEmail}})</span>
                                 <span class="d-block">
-                                    <span class="badge badge-success">{{Id}}</span>
+                                    <span class="badge bg-success">{{Id}}</span>
                                 </span>
                             </div>
                         </td>
@@ -38,7 +37,7 @@
                             <span class="d-block"><strong>Size:</strong> {{attachment_size}}</span>
                             {{/if}}
                         </td>
-                        <td style="font-size: 90%; text-align: right; padding-right: 15px">
+                        <td class="text-end pe-2 small">
                             <a class="d-block" href="#" onclick='deleteOrganization({{jsesc Id}}, {{jsesc Name}}, {{jsesc BillingEmail}})'>Delete Organization</a>
                         </td>
                     </tr>
@@ -46,14 +45,15 @@
                 </tbody>
             </table>
         </div>
-
     </div>
 </main>
 
 <link rel="stylesheet" href="{{urlpath}}/bwrs_static/datatables.css" />
-<script src="{{urlpath}}/bwrs_static/jquery-3.5.1.slim.js"></script>
+<script src="{{urlpath}}/bwrs_static/jquery-3.6.0.slim.js"></script>
 <script src="{{urlpath}}/bwrs_static/datatables.js"></script>
 <script>
+    'use strict';
+
     function deleteOrganization(id, name, billing_email) {
         // First make sure the user wants to delete this organization
         var continueDelete = confirm("WARNING: All data of this organization ("+ name +") will be lost!\nMake sure you have a backup, this cannot be undone!");
@@ -79,7 +79,7 @@
         }
     })();
 
-    document.addEventListener("DOMContentLoaded", function(event) {
+    document.addEventListener("DOMContentLoaded", function() {
         $('#orgs-table').DataTable({
             "responsive": true,
             "lengthMenu": [ [-1, 5, 10, 25, 50], ["All", 5, 10, 25, 50] ],
diff --git a/src/static/templates/admin/settings.hbs b/src/static/templates/admin/settings.hbs
index 819fc2314772735504a025b21ba7d581655794d0..03a1575e9bf04d0221c158880dba5307c9500971 100644
--- a/src/static/templates/admin/settings.hbs
+++ b/src/static/templates/admin/settings.hbs
@@ -3,34 +3,32 @@
         <div>
             <h6 class="text-white mb-3">Configuration</h6>
             <div class="small text-white mb-3">
-                NOTE: The settings here override the environment variables. Once saved, it's recommended to stop setting
-                them to avoid confusion. This does not apply to the read-only section, which can only be set through the
-                environment.
+                <span class="font-weight-bolder">NOTE:</span> The settings here override the environment variables. Once saved, it's recommended to stop setting them to avoid confusion.<br>
+                This does not apply to the read-only section, which can only be set via environment variables.<br>
+                Settings which are overridden are shown with <span class="is-overridden-true">double underscores</span>.
             </div>
 
-            <form class="form accordion" id="config-form" onsubmit="saveConfig(); return false;">
+            <form class="form needs-validation" id="config-form" onsubmit="saveConfig(); return false;" novalidate>
                 {{#each config}}
                 {{#if groupdoc}}
                 <div class="card bg-light mb-3">
-                    <div class="card-header"><button type="button" class="btn btn-link collapsed" data-toggle="collapse"
-                            data-target="#g_{{group}}">{{groupdoc}}</button></div>
-                    <div id="g_{{group}}" class="card-body collapse" data-parent="#config-form">
+                    <div class="card-header" role="button" data-bs-toggle="collapse" data-bs-target="#g_{{group}}">
+                        <button type="button" class="btn btn-link text-decoration-none collapsed" data-bs-toggle="collapse" data-bs-target="#g_{{group}}">{{groupdoc}}</button>
+                    </div>
+                    <div id="g_{{group}}" class="card-body collapse">
                         {{#each elements}}
                         {{#if editable}}
-                        <div class="form-group row align-items-center" title="[{{name}}] {{doc.description}}">
+                        <div class="row my-2 align-items-center is-overridden-{{overridden}}" title="[{{name}}] {{doc.description}}">
                             {{#case type "text" "number" "password"}}
                             <label for="input_{{name}}" class="col-sm-3 col-form-label">{{doc.name}}</label>
-                            <div class="col-sm-8 input-group">
+                            <div class="col-sm-8">
+                                <div class="input-group">
                                 <input class="form-control conf-{{type}}" id="input_{{name}}" type="{{type}}"
-                                    name="{{name}}" value="{{value}}" {{#if default}} placeholder="Default: {{default}}"
-                                    {{/if}}>
-
+                                    name="{{name}}" value="{{value}}" {{#if default}} placeholder="Default: {{default}}"{{/if}}>
                                 {{#case type "password"}}
-                                <div class="input-group-append">
-                                    <button class="btn btn-outline-secondary" type="button"
-                                        onclick="toggleVis('input_{{name}}');">Show/hide</button>
-                                </div>
+                                    <button class="btn btn-outline-secondary input-group-text" type="button" onclick="toggleVis('input_{{name}}');">Show/hide</button>
                                 {{/case}}
+                                </div>
                             </div>
                             {{/case}}
                             {{#case type "checkbox"}}
@@ -48,13 +46,12 @@
                         {{/if}}
                         {{/each}}
                         {{#case group "smtp"}}
-                            <div class="form-group row align-items-center pt-3 border-top" title="Send a test email to given email address">
+                            <div class="row my-2 align-items-center pt-3 border-top" title="Send a test email to given email address">
                                 <label for="smtp-test-email" class="col-sm-3 col-form-label">Test SMTP</label>
                                 <div class="col-sm-8 input-group">
-                                    <input class="form-control" id="smtp-test-email" type="email" placeholder="Enter test email">
-                                    <div class="input-group-append">
-                                        <button type="button" class="btn btn-outline-primary" onclick="smtpTest(); return false;">Send test email</button>
-                                    </div>
+                                    <input class="form-control" id="smtp-test-email" type="email" placeholder="Enter test email" required>
+                                    <button type="button" class="btn btn-outline-primary input-group-text" onclick="smtpTest(); return false;">Send test email</button>
+                                    <div class="invalid-tooltip">Please provide a valid email address</div>
                                 </div>
                             </div>
                         {{/case}}
@@ -64,9 +61,11 @@
                 {{/each}}
 
                 <div class="card bg-light mb-3">
-                    <div class="card-header"><button type="button" class="btn btn-link collapsed" data-toggle="collapse"
-                            data-target="#g_readonly">Read-Only Config</button></div>
-                    <div id="g_readonly" class="card-body collapse" data-parent="#config-form">
+                    <div class="card-header" role="button" data-bs-toggle="collapse" data-bs-target="#g_readonly">
+                        <button type="button" class="btn btn-link text-decoration-none collapsed" data-bs-toggle="collapse" data-bs-target="#g_readonly">Read-Only Config</button>
+                    </div>
+
+                    <div id="g_readonly" class="card-body collapse">
                         <div class="small mb-3">
                             NOTE: These options can't be modified in the editor because they would require the server
                             to be restarted. To modify them, you need to set the correct environment variables when
@@ -76,19 +75,17 @@
                         {{#each config}}
                         {{#each elements}}
                         {{#unless editable}}
-                        <div class="form-group row align-items-center" title="[{{name}}] {{doc.description}}">
+                        <div class="row my-2 align-items-center" title="[{{name}}] {{doc.description}}">
                             {{#case type "text" "number" "password"}}
                             <label for="input_{{name}}" class="col-sm-3 col-form-label">{{doc.name}}</label>
-                            <div class="col-sm-8 input-group">
+                            <div class="col-sm-8">
+                                <div class="input-group">
                                 <input readonly class="form-control" id="input_{{name}}" type="{{type}}"
                                     value="{{value}}" {{#if default}} placeholder="Default: {{default}}" {{/if}}>
-
                                 {{#case type "password"}}
-                                <div class="input-group-append">
-                                    <button class="btn btn-outline-secondary" type="button"
-                                        onclick="toggleVis('input_{{name}}');">Show/hide</button>
-                                </div>
+                                    <button class="btn btn-outline-secondary" type="button" onclick="toggleVis('input_{{name}}');">Show/hide</button>
                                 {{/case}}
+                                </div>
                             </div>
                             {{/case}}
                             {{#case type "checkbox"}}
@@ -112,9 +109,10 @@
 
                 {{#if can_backup}}
                 <div class="card bg-light mb-3">
-                    <div class="card-header"><button type="button" class="btn btn-link collapsed" data-toggle="collapse"
-                            data-target="#g_database">Backup Database</button></div>
-                    <div id="g_database" class="card-body collapse" data-parent="#config-form">
+                    <div class="card-header" role="button" data-bs-toggle="collapse" data-bs-target="#g_database">
+                        <button type="button" class="btn btn-link text-decoration-none collapsed" data-bs-toggle="collapse" data-bs-target="#g_database">Backup Database</button>
+                    </div>
+                    <div id="g_database" class="card-body collapse">
                         <div class="small mb-3">
                             WARNING: This function only creates a backup copy of the SQLite database.
                             This does not include any configuration or file attachment data that may
@@ -128,7 +126,7 @@
                 {{/if}}
 
                 <button type="submit" class="btn btn-primary">Save</button>
-                <button type="button" class="btn btn-danger float-right" onclick="deleteConf();">Reset defaults</button>
+                <button type="button" class="btn btn-danger float-end" onclick="deleteConf();">Reset defaults</button>
             </form>
         </div>
     </div>
@@ -139,16 +137,34 @@
         /* Most modern browsers support this now. */
         color: orangered;
     }
+
+    .is-overridden-true {
+        text-decoration: underline double;
+    }
 </style>
 
 <script>
+    'use strict';
+
     function smtpTest() {
         if (formHasChanges(config_form)) {
+            event.preventDefault();
+            event.stopPropagation();
             alert("Config has been changed but not yet saved.\nPlease save the changes first before sending a test email.");
             return false;
         }
-        test_email = document.getElementById("smtp-test-email");
-        data = JSON.stringify({ "email": test_email.value });
+
+        let test_email = document.getElementById("smtp-test-email");
+
+        // Do a very very basic email address check.
+        if (test_email.value.match(/\S+@\S+/i) === null) {
+            test_email.parentElement.classList.add('was-validated');
+            event.preventDefault();
+            event.stopPropagation();
+            return false;
+        }
+
+        const data = JSON.stringify({ "email": test_email.value });
         _post("{{urlpath}}/admin/test/smtp/",
             "SMTP Test email sent correctly",
             "Error sending SMTP test email", data, false);
@@ -157,21 +173,21 @@
     function getFormData() {
         let data = {};
 
-        document.querySelectorAll(".conf-checkbox").forEach(function (e, i) {
+        document.querySelectorAll(".conf-checkbox").forEach(function (e) {
             data[e.name] = e.checked;
         });
 
-        document.querySelectorAll(".conf-number").forEach(function (e, i) {
+        document.querySelectorAll(".conf-number").forEach(function (e) {
             data[e.name] = e.value ? +e.value : null;
         });
 
-        document.querySelectorAll(".conf-text, .conf-password").forEach(function (e, i) {
+        document.querySelectorAll(".conf-text, .conf-password").forEach(function (e) {
             data[e.name] = e.value || null;
         });
         return data;
     }
     function saveConfig() {
-        data = JSON.stringify(getFormData());
+        const data = JSON.stringify(getFormData());
         _post("{{urlpath}}/admin/config/", "Config saved correctly",
             "Error saving config", data);
         return false;
@@ -198,10 +214,10 @@
     function masterCheck(check_id, inputs_query) {
         function onChanged(checkbox, inputs_query) {
             return function _fn() {
-                document.querySelectorAll(inputs_query).forEach(function (e, i) { e.disabled = !checkbox.checked; });
+                document.querySelectorAll(inputs_query).forEach(function (e) { e.disabled = !checkbox.checked; });
                 checkbox.disabled = false;
             };
-        };
+        }
 
         const checkbox = document.getElementById(check_id);
         const onChange = onChanged(checkbox, inputs_query);
@@ -238,7 +254,6 @@
         Array.from(risk_el).forEach((el) => {
             if (el.innerText.toLowerCase().includes('risks') ) {
                 el.parentElement.className += ' alert-danger'
-                console.log(el)
             }
         });
     }
diff --git a/src/static/templates/admin/users.hbs b/src/static/templates/admin/users.hbs
index f32885e57031612b372e5f7d03ff67c2b62d757d..2f6eb0055d33d95bf02426847f3db6417767c1b7 100644
--- a/src/static/templates/admin/users.hbs
+++ b/src/static/templates/admin/users.hbs
@@ -7,34 +7,34 @@
                 <thead>
                     <tr>
                         <th>User</th>
-                        <th style="width:65px; min-width: 65px;">Created at</th>
-                        <th style="width:70px; min-width: 65px;">Last Active</th>
-                        <th style="width:35px; min-width: 35px;">Items</th>
+                        <th style="width: 85px; min-width: 70px;">Created at</th>
+                        <th style="width: 85px; min-width: 70px;">Last Active</th>
+                        <th style="width: 35px; min-width: 35px;">Items</th>
                         <th>Attachments</th>
                         <th style="min-width: 120px;">Organizations</th>
-                        <th style="width: 120px; min-width: 120px;">Actions</th>
+                        <th style="width: 130px; min-width: 130px;">Actions</th>
                     </tr>
                 </thead>
                 <tbody>
-                    {{#each users}}
+                    {{#each page_data}}
                     <tr>
                         <td>
-                            <img class="float-left mr-2 rounded identicon" data-src="{{Email}}">
-                            <div class="float-left">
+                            <img class="float-start me-2 rounded identicon" data-src="{{Email}}">
+                            <div class="float-start">
                                 <strong>{{Name}}</strong>
                                 <span class="d-block">{{Email}}</span>
                                 <span class="d-block">
                                     {{#unless user_enabled}}
-                                        <span class="badge badge-danger mr-2" title="User is disabled">Disabled</span>
+                                        <span class="badge bg-danger me-2" title="User is disabled">Disabled</span>
                                     {{/unless}}
                                     {{#if TwoFactorEnabled}}
-                                        <span class="badge badge-success mr-2" title="2FA is enabled">2FA</span>
+                                        <span class="badge bg-success me-2" title="2FA is enabled">2FA</span>
                                     {{/if}}
                                     {{#case _Status 1}}
-                                        <span class="badge badge-warning mr-2" title="User is invited">Invited</span>
+                                        <span class="badge bg-warning me-2" title="User is invited">Invited</span>
                                     {{/case}}
                                     {{#if EmailVerified}}
-                                        <span class="badge badge-success mr-2" title="Email has been verified">Verified</span>
+                                        <span class="badge bg-success me-2" title="Email has been verified">Verified</span>
                                     {{/if}}
                                 </span>
                             </div>
@@ -57,11 +57,11 @@
                         <td>
                             <div class="overflow-auto" style="max-height: 120px;">
                             {{#each Organizations}}
-                            <button class="badge badge-primary" data-toggle="modal" data-target="#userOrgTypeDialog" data-orgtype="{{Type}}" data-orguuid="{{jsesc Id no_quote}}" data-orgname="{{jsesc Name no_quote}}" data-useremail="{{jsesc ../Email no_quote}}" data-useruuid="{{jsesc ../Id no_quote}}">{{Name}}</button>
+                            <button class="badge" data-bs-toggle="modal" data-bs-target="#userOrgTypeDialog" data-orgtype="{{Type}}" data-orguuid="{{jsesc Id no_quote}}" data-orgname="{{jsesc Name no_quote}}" data-useremail="{{jsesc ../Email no_quote}}" data-useruuid="{{jsesc ../Id no_quote}}">{{Name}}</button>
                             {{/each}}
                             </div>
                         </td>
-                        <td style="font-size: 90%; text-align: right; padding-right: 15px">
+                        <td class="text-end pe-2 small">
                             {{#if TwoFactorEnabled}}
                             <a class="d-block" href="#" onclick='remove2fa({{jsesc Id}})'>Remove all 2FA</a>
                             {{/if}}
@@ -85,7 +85,7 @@
                 Force clients to resync
             </button>
 
-            <button type="button" class="btn btn-sm btn-primary float-right" onclick="reload();">Reload users</button>
+            <button type="button" class="btn btn-sm btn-primary float-end" onclick="reload();">Reload users</button>
         </div>
     </div>
 
@@ -94,8 +94,8 @@
             <h6 class="mb-0 text-white">Invite User</h6>
             <small>Email:</small>
 
-            <form class="form-inline" id="invite-form" onsubmit="inviteUser(); return false;">
-                <input type="email" class="form-control w-50 mr-2" id="email-invite" placeholder="Enter email">
+            <form class="form-inline input-group w-50" id="invite-form" onsubmit="inviteUser(); return false;">
+                <input type="email" class="form-control me-2" id="email-invite" placeholder="Enter email" required>
                 <button type="submit" class="btn btn-primary">Invite</button>
             </form>
         </div>
@@ -106,9 +106,7 @@
             <div class="modal-content">
                 <div class="modal-header">
                     <h6 class="modal-title" id="userOrgTypeDialogTitle"></h6>
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <form class="form" id="userOrgTypeForm" onsubmit="updateUserOrgType(); return false;">
                     <input type="hidden" name="user_uuid" id="userOrgTypeUserUuid" value="">
@@ -128,7 +126,7 @@
                         </div>
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Cancel</button>
+                        <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancel</button>
                         <button type="submit" class="btn btn-sm btn-primary">Change Role</button>
                     </div>
                 </form>
@@ -138,9 +136,11 @@
 </main>
 
 <link rel="stylesheet" href="{{urlpath}}/bwrs_static/datatables.css" />
-<script src="{{urlpath}}/bwrs_static/jquery-3.5.1.slim.js"></script>
+<script src="{{urlpath}}/bwrs_static/jquery-3.6.0.slim.js"></script>
 <script src="{{urlpath}}/bwrs_static/datatables.js"></script>
 <script>
+    'use strict';
+
     function deleteUser(id, mail) {
         var input_mail = prompt("To delete user '" + mail + "', please type the email below")
         if (input_mail != null) {
@@ -191,8 +191,8 @@
         return false;
     }
     function inviteUser() {
-        inv = document.getElementById("email-invite");
-        data = JSON.stringify({ "email": inv.value });
+        const inv = document.getElementById("email-invite");
+        const data = JSON.stringify({ "email": inv.value });
         inv.value = "";
         _post("{{urlpath}}/admin/invite/", "User invited correctly",
             "Error inviting user", data);
@@ -212,7 +212,7 @@
         }
     })();
 
-    document.querySelectorAll("[data-orgtype]").forEach(function (e, i) {
+    document.querySelectorAll("[data-orgtype]").forEach(function (e) {
         let orgtype = OrgTypes[e.dataset.orgtype];
         e.style.backgroundColor = orgtype.color;
         e.title = orgtype.name;
@@ -225,7 +225,7 @@
             let sortDate = a.replace(/(<([^>]+)>)/gi, "").trim();
             if ( sortDate !== '' ) {
                 let dtParts = sortDate.split(' ');
-                var timeParts = (undefined != dtParts[1]) ? dtParts[1].split(':') : [00,00,00];
+                var timeParts = (undefined != dtParts[1]) ? dtParts[1].split(':') : ['00','00','00'];
                 var dateParts = dtParts[0].split('-');
                 x = (dateParts[0] + dateParts[1] + dateParts[2] + timeParts[0] + timeParts[1] + ((undefined != timeParts[2]) ? timeParts[2] : 0)) * 1;
                 if ( isNaN(x) ) {
@@ -246,7 +246,7 @@
         }
     });
 
-    document.addEventListener("DOMContentLoaded", function(event) {
+    document.addEventListener("DOMContentLoaded", function() {
         $('#users-table').DataTable({
             "responsive": true,
             "lengthMenu": [ [-1, 5, 10, 25, 50], ["All", 5, 10, 25, 50] ],
@@ -275,7 +275,7 @@
     }, false);
 
     // Prevent accidental submission of the form with valid elements after the modal has been hidden.
-    userOrgTypeDialog.addEventListener('hide.bs.modal', function(event){
+    userOrgTypeDialog.addEventListener('hide.bs.modal', function(){
         document.getElementById("userOrgTypeDialogTitle").innerHTML = '';
         document.getElementById("userOrgTypeUserUuid").value = '';
         document.getElementById("userOrgTypeOrgUuid").value = '';