fullmooncss/dist/css/fullmoon.rtl.css

Front-end framework with a built-in dark mode and full customizability using CSS variables; great for building dashboards and tools

@charset "UTF-8";
/*
-------------------------------------------------------------------------------
Fullmoon CSS (Variables file)
Version: 1.1.1
https://www.gethalfmoon.com
Copyright, Kavindu Santhusa
Licensed under MIT (https://github.com/ksenginew/fullmoon/license)
-------------------------------------------------------------------------------
The above notice must be included in its entirety when this file is used.

Table of contents:
    1.  Base styles --------------------------------------------------- [hm-01]
    2.  Typography ---------------------------------------------------- [hm-02]
    3.  Scrollbars ---------------------------------------------------- [hm-03]
    4.  Layout -------------------------------------------------------- [hm-04]
    5.  Page building (containers, columns, content and card) --------- [hm-05]
    6.  Links --------------------------------------------------------- [hm-06]
    7.  Buttons ------------------------------------------------------- [hm-07]
    8.  List ---------------------------------------------------------- [hm-08]
    9.  Code ---------------------------------------------------------- [hm-09]
    10. Tables -------------------------------------------------------- [hm-10]
    11. Form elements ------------------------------------------------- [hm-11]
    12. Dropdown ------------------------------------------------------ [hm-12]
    13. Modal --------------------------------------------------------- [hm-13]
    14. Alerts -------------------------------------------------------- [hm-14]
    15. Navbar content ------------------------------------------------ [hm-15]
    16. Sidebar content ----------------------------------------------- [hm-16]
    17. Pagination ---------------------------------------------------- [hm-17]
    18. Breadcrumb ---------------------------------------------------- [hm-18]
    19. Tooltips ------------------------------------------------------ [hm-19]
    20. Badges -------------------------------------------------------- [hm-20]
    21. Image --------------------------------------------------------- [hm-21]
    22. Button group -------------------------------------------------- [hm-22]
    23. Collapse ------------------------------------------------------ [hm-23]
    24. Progress ------------------------------------------------------ [hm-24]
    25. Spacing utilities --------------------------------------------- [hm-25]
    26. Display utilities --------------------------------------------- [hm-26]
    27. Sizing utilities ---------------------------------------------- [hm-27]
    28. Flex utilities ------------------------------------------------ [hm-28]
    29. Position utilities -------------------------------------------- [hm-29]
    30. Other utilities ----------------------------------------------- [hm-30]

Credits:
    Halfmoon, Bootstrap and their contributors for source code.
    This is a copy of halfmoon modified using bootstrap.
    so following copyright notices are provided:

    -------------------------------------------------------------------------------
    Halfmoon CSS (Variables file)
    Version: 1.1.1
    https://www.gethalfmoon.com
    Copyright, Halfmoon UI
    Licensed under MIT (https://www.gethalfmoon.com/license)
    -------------------------------------------------------------------------------

    ---------------------------------------------------------------------------
    Bootstrap (https://getbootstrap.com/)
    Copyright 2011-2020 The Bootstrap Authors
    Copyright 2011-2020 Twitter, Inc.
    Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
    ---------------------------------------------------------------------------
*/
/*
-------------------------------------------------------------------------------
CSS variables (CSS custom properties)
-------------------------------------------------------------------------------
*/
:root {
  /*
  Table of contents (for variables):
      1.  Base variables ------------------------------------------- [hmv-01]
      2.  System colors -------------------------------------------- [hmv-02]
      3.  Context colors ------------------------------------------- [hmv-03]
      4.  Box shadows ---------------------------------------------- [hmv-04]
      5.  Scrollbars ----------------------------------------------- [hmv-05]
      6.  Layout (Sticky alerts, navbar, sidebar) ------------------ [hmv-06]
      7.  Page building (containers, content, card, v-spacer) ------ [hmv-07]
      8.  Links ---------------------------------------------------- [hmv-08]
      9.  Buttons -------------------------------------------------- [hmv-09]
      10. Code ----------------------------------------------------- [hmv-10]
      11. Tables --------------------------------------------------- [hmv-11]
      12. Form helpers (form-groups, labels, form-text, etc.) ------ [hmv-12]
      13. Inputs --------------------------------------------------- [hmv-13]
      14. Checkbox ------------------------------------------------- [hmv-14]
      15. Radio ---------------------------------------------------- [hmv-15]
      16. Switch --------------------------------------------------- [hmv-16]
      17. Input file ----------------------------------------------- [hmv-17]
      18. Input group ---------------------------------------------- [hmv-18]
      19. Dropdown ------------------------------------------------- [hmv-19]
      20. Modal ---------------------------------------------------- [hmv-20]
      21. Alerts --------------------------------------------------- [hmv-21]
      22. Navbar content ------------------------------------------- [hmv-22]
      23. Sidebar content ------------------------------------------ [hmv-23]
      24. Pagination ----------------------------------------------- [hmv-24]
      25. Breadcrumb ----------------------------------------------- [hmv-25]
      26. Tooltips ------------------------------------------------- [hmv-26]
      27. Badges --------------------------------------------------- [hmv-27]
      28. Button group --------------------------------------------- [hmv-28]
      29. Collapse ------------------------------------------------- [hmv-29]
      30. Progress ------------------------------------------------- [hmv-30]

  Understanding names of variables:
      ~ Variable names are long, descriptive, and fairly self-explanatory. 
      The only thing to understand about them are the states.

      ~ Basic states:
          ~ --lm-* variables apply only in light mode.
          ~ --dm-* variables apply only in dark mode.
          ~ Variables without these states apply for both modes.

      ~ Other common states:
          ~ *-hover (:hover)
          ~ *-focus (:focus)
          ~ *-active (.active)
          ~ *-active-hover (.active:hover)
          ~ A variable with a given state only applies to the element when 
          the element is in that state.

      ~ Examples:
          ~ --button-padding sets the padding of buttons in both light and 
          dark mode.
          ~ --lm-pagination-item-text-color-hover sets the text color when 
          the pagination item is hovered over (in light mode).
          ~ --dm-sidebar-link-border-color-active-hover sets the border 
          color when the sidebar link has the class .active, and is hovered 
          over (in dark mode).
          ~ --small-button-height sets the height of small buttons (.btn-sm).
          ~ --dm-open-collapse-header-bg-color sets the background color of 
          the collapse header when the collapse panel is open.

  Notes:
      ~ Transparency (rgba) is used more commonly in dark mode, because 
      everything needs to blend together to look good.
      ~ By default, Hafmoon uses auto-scaling on screens >= 1600px. For this 
      reason, rem units are used, so that everything can scale up. The base 
      is adjusted so that 10px = 1rem.
      ~ The only time px should be used is when a fixed size is always 
      required, especially if that fixed size is 1px. For example, border 
      widths, outline widths, divider heights, etc.
      ~ Background image variables are available for some components. These 
      are useful for setting gradients. However, border image variables are 
      not available, because most browsers do not support rounded border 
      images (yet).
  */
  /*
  ---------------------------------------------------------------------------
  1.  Base variables [hmv-01]
  ---------------------------------------------------------------------------
  */
  /*
  White background color

  Notes:
      ~ The variable should only be used for backgrounds of containers, such 
      as cards and dropdown menus.
      ~ The variable should not be used for backgrounds of elements such as 
      buttons, inputs, badges, and so on. Instead, #ffffff should be used.
      ~ The variable should also not be used for text color. Again, #ffffff 
      should be used.
  */
  --white-bg-color: #ffffff;
  /*
  Dark colors

  Notes:
      ~ Only limited to 3 because a wide range of colors don't look good in 
      dark themes.
  */
  --dark-color: #191c20;
  --dark-color-light: #25282c;
  --dark-color-dark: #111417;
  /* Gray colors */
  --gray-color: #dadfe1;
  --gray-color-light: #ecf0f1;
  --gray-color-very-light: #f7f7f7;
  --gray-color-dark: #bababc;
  --gray-color-very-dark: #47494d;
  /* Base variables */
  --base-html-font-size: 62.5%;
  /* 62.5% is used for easier calculations, because the base is now set to 10px, so 1.4rem = 14px for example. */
  --base-html-font-size-1600: 75%;
  /* For screens with widths >= 1600px */
  --base-html-font-size-1920: 87.5%;
  /* For screens with widths >= 1920px */
  --base-font-size: 1.4rem;
  --base-line-height: 1.5;
  --base-border-width: 1px;
  --base-border-radius: 0.4rem;
  --extra-letter-spacing-size: 0.03rem;
  --lm-base-text-color: rgba(0, 0, 0, 0.85);
  --lm-base-text-color-light: rgba(0, 0, 0, 0.7);
  --lm-base-body-bg-color: var(--white-bg-color);
  --lm-base-body-bg-image: none;
  --lm-horizontal-rule-color: rgba(0, 0, 0, 0.05);
  --lm-border-color: rgba(0, 0, 0, 0.2);
  /* Only used for border utilities */
  --dm-base-text-color: rgba(255, 255, 255, 0.8);
  --dm-base-text-color-light: rgba(255, 255, 255, 0.65);
  --dm-base-body-bg-color: var(--dark-color-light);
  --dm-base-body-bg-image: none;
  --dm-horizontal-rule-color: rgba(255, 255, 255, 0.05);
  --dm-border-color: rgba(255, 255, 255, 0.2);
  /* Only used for border utilities */
  /* Heading */
  --heading-font-weight: 400;
  /* Text muted colors */
  --lm-muted-text-color: rgba(0, 0, 0, 0.6);
  --dm-muted-text-color: rgba(255, 255, 255, 0.6);
  /*
  ---------------------------------------------------------------------------
  2.  System colors [hmv-02]

  Notes:
      ~ Not actually used in classes or components. Extended by context 
      colors (see below).
  ---------------------------------------------------------------------------
  */
  /* Blue */
  --blue-color: #1890ff;
  /* rgba(24, 144, 255, 1) */
  --blue-color-light: #45a3fb;
  --blue-color-very-light: #cfe7fd;
  --blue-color-dark: #0d518f;
  --blue-color-very-dark: #172636;
  --blue-box-shadow-color: rgba(24, 144, 255, 0.3);
  --blue-box-shadow-color-darker: rgba(24, 144, 255, 0.6);
  --text-color-on-blue-color-bg: #ffffff;
  /* Indigo */
  --indigo-color: #6563ff;
  /* rgba(101, 99, 255, 1) */
  --indigo-color-light: #857cfc;
  --indigo-color-very-light: #e0dcfe;
  --indigo-color-dark: #383677;
  --indigo-color-very-dark: #1f2130;
  --indigo-box-shadow-color: rgba(101, 99, 255, 0.3);
  --indigo-box-shadow-color-darker: rgba(101, 99, 255, 0.6);
  --text-color-on-indigo-color-bg: #ffffff;
  /* Teal */
  --teal-color: #38b2ac;
  /* rgba(56, 178, 172, 1) */
  --teal-color-light: #5fc0bd;
  --teal-color-very-light: #d2efee;
  --teal-color-dark: #265758;
  --teal-color-very-dark: #1b2a2d;
  --teal-box-shadow-color: rgba(56, 178, 172, 0.3);
  --teal-box-shadow-color-darker: rgba(56, 178, 172, 0.6);
  --text-color-on-teal-color-bg: #ffffff;
  /* Green */
  --green-color: #0be881;
  /* rgba(11, 232, 129, 1) */
  --green-color-light: #81eea8;
  --green-color-very-light: #d5f9e5;
  --green-color-dark: #0d8951;
  --green-color-very-dark: #17312a;
  --green-box-shadow-color: rgba(11, 232, 129, 0.3);
  --green-box-shadow-color-darker: rgba(11, 232, 129, 0.6);
  --text-color-on-green-color-bg: var(--lm-base-text-color);
  /* Yellow */
  --yellow-color: #ffcf00;
  /* rgba(255, 207, 0, 1) */
  --yellow-color-light: #ffe04d;
  --yellow-color-very-light: #fff6cc;
  --yellow-color-dark: #8e7710;
  --yellow-color-very-dark: #302c1d;
  --yellow-box-shadow-color: rgba(255, 207, 0, 0.3);
  --yellow-box-shadow-color-darker: rgba(255, 207, 0, 0.6);
  --text-color-on-yellow-color-bg: var(--lm-base-text-color);
  /* Orange */
  --orange-color: #ed8936;
  /* rgba(237, 137, 54, 1) */
  --orange-color-light: #f09f53;
  --orange-color-very-light: #fbe6d2;
  --orange-color-dark: #6e4623;
  --orange-color-very-dark: #2e2620;
  --orange-box-shadow-color: rgba(237, 137, 54, 0.3);
  --orange-box-shadow-color-darker: rgba(237, 137, 54, 0.6);
  --text-color-on-orange-color-bg: #ffffff;
  /* Red */
  --red-color: #ff4d4f;
  /* rgba(245, 34, 45, 1) */
  --red-color-light: #ed586c;
  --red-color-very-light: #f8d0d9;
  --red-color-dark: #8c0e2e;
  --red-color-very-dark: #301923;
  --red-box-shadow-color: rgba(245, 34, 45, 0.3);
  --red-box-shadow-color-darker: rgba(245, 34, 45, 0.6);
  --text-color-on-red-color-bg: #ffffff;
  /* Pink */
  --pink-color: #ed64a6;
  /* rgba(237, 100, 166, 1) */
  --pink-color-light: #ee7db7;
  --pink-color-very-light: #f9dced;
  --pink-color-dark: #6d3655;
  --pink-color-very-dark: #2d212d;
  --pink-box-shadow-color: rgba(237, 100, 166, 0.3);
  --pink-box-shadow-color-darker: rgba(237, 100, 166, 0.6);
  --text-color-on-pink-color-bg: #ffffff;
  /*
  ---------------------------------------------------------------------------
  3.  Context colors [hmv-03]

  Notes:
      ~ Used in classes and components. 
      ~ The *-box-shadow-color and *-box-shadow-color-darker are used for 
      the focus effects of inputs and buttons.
  ---------------------------------------------------------------------------
  */
  /* Primary colors */
  --primary-color: var(--blue-color);
  --primary-color-light: var(--blue-color-light);
  --primary-color-very-light: var(--blue-color-very-light);
  --primary-color-dark: var(--blue-color-dark);
  --primary-color-very-dark: var(--blue-color-very-dark);
  --primary-box-shadow-color: var(--blue-box-shadow-color);
  --primary-box-shadow-color-darker: var(--blue-box-shadow-color-darker);
  --text-color-on-primary-color-bg: var(--text-color-on-blue-color-bg);
  /* Success colors */
  --success-color: var(--green-color);
  --success-color-light: var(--green-color-light);
  --success-color-very-light: var(--green-color-very-light);
  --success-color-dark: var(--green-color-dark);
  --success-color-very-dark: var(--green-color-very-dark);
  --success-box-shadow-color: var(--green-box-shadow-color);
  --success-box-shadow-color-darker: var(--green-box-shadow-color-darker);
  --text-color-on-success-color-bg: var(--text-color-on-green-color-bg);
  /* Secondary colors */
  --secondary-color: var(--yellow-color);
  --secondary-color-light: var(--yellow-color-light);
  --secondary-color-very-light: var(--yellow-color-very-light);
  --secondary-color-dark: var(--yellow-color-dark);
  --secondary-color-very-dark: var(--yellow-color-very-dark);
  --secondary-box-shadow-color: var(--yellow-box-shadow-color);
  --secondary-box-shadow-color-darker: var(--yellow-box-shadow-color-darker);
  --text-color-on-secondary-color-bg: var(--text-color-on-yellow-color-bg);
  /* Danger colors */
  --danger-color: var(--red-color);
  --danger-color-light: var(--red-color-light);
  --danger-color-very-light: var(--red-color-very-light);
  --danger-color-dark: var(--red-color-dark);
  --danger-color-very-dark: var(--red-color-very-dark);
  --danger-box-shadow-color: var(--red-box-shadow-color);
  --danger-box-shadow-color-darker: var(--red-box-shadow-color-darker);
  --text-color-on-danger-color-bg: var(--text-color-on-red-color-bg);
  /*
  ---------------------------------------------------------------------------
  4.  Box shadows [hmv-04]
  ---------------------------------------------------------------------------
  */
  --lm-shadow-color: rgba(0, 0, 0, 0.15);
  --dm-shadow-color: rgba(0, 0, 0, 0.4);
  --lm-small-shadow: 0 0.1rem 0.2rem var(--lm-shadow-color);
  --dm-small-shadow: 0 0.1rem 0.6rem var(--dm-shadow-color);
  --lm-shadow: 0 0.2rem 0.4rem var(--lm-shadow-color);
  --dm-shadow: 0 0.2rem 0.8rem var(--dm-shadow-color);
  --lm-large-shadow: 0 0.4rem 0.8rem var(--lm-shadow-color);
  --dm-large-shadow: 0 0.4rem 1.2rem var(--dm-shadow-color);
  /*
  ---------------------------------------------------------------------------
  5.  Scrollbars [hmv-05]

  Notes:
      ~ The webkit scrollbars work on webkit based browsers, such as Chrome, 
      Safari, Brave, and the new Microsoft Edge.
      ~ The custom CSS scrollbars work only on Firefox as of 2020.
  ---------------------------------------------------------------------------
  */
  --webkit-scrollbar-width-height: 1.4rem;
  --webkit-scrollbar-track-border-width: var(--base-border-width);
  --webkit-scrollbar-thumb-min-width-height: 3rem;
  --webkit-scrollbar-thumb-border-width: 0.4rem;
  --webkit-scrollbar-thumb-border-radius: 1rem;
  --webkit-scrollbar-corner-border-width: var(--base-border-width);
  --lm-webkit-scrollbar-bg-color: transparent;
  --lm-webkit-scrollbar-track-border-color: rgba(0, 0, 0, 0.1);
  --lm-webkit-scrollbar-thumb-bg-color: rgba(0, 0, 0, 0.25);
  --lm-webkit-scrollbar-thumb-bg-color-hover: rgba(0, 0, 0, 0.4);
  --lm-webkit-scrollbar-thumb-border-color: transparent;
  --lm-webkit-scrollbar-thumb-border-color-hover: transparent;
  --lm-webkit-scrollbar-corner-bg-color: transparent;
  --lm-webkit-scrollbar-corner-border-color: rgba(0, 0, 0, 0.1);
  --dm-webkit-scrollbar-bg-color: transparent;
  --dm-webkit-scrollbar-track-border-color: rgba(255, 255, 255, 0.05);
  --dm-webkit-scrollbar-thumb-bg-color: rgba(255, 255, 255, 0.25);
  --dm-webkit-scrollbar-thumb-bg-color-hover: rgba(255, 255, 255, 0.4);
  --dm-webkit-scrollbar-thumb-border-color: transparent;
  --dm-webkit-scrollbar-thumb-border-color-hover: transparent;
  --dm-webkit-scrollbar-corner-bg-color: transparent;
  --dm-webkit-scrollbar-corner-border-color: rgba(255, 255, 255, 0.05);
  --css-scrollbar-width: thin;
  --lm-css-scrollbar-color: var(--lm-webkit-scrollbar-thumb-bg-color) var(--lm-base-body-bg-color);
  --dm-css-scrollbar-color: var(--dm-webkit-scrollbar-thumb-bg-color) var(--dm-base-body-bg-color);
  /* Sidebar scrollbar */
  --sidebar-webkit-scrollbar-width-height: var(--webkit-scrollbar-width-height);
  --sidebar-webkit-scrollbar-track-border-width: var(--webkit-scrollbar-track-border-width);
  --sidebar-webkit-scrollbar-thumb-border-width: var(--webkit-scrollbar-thumb-border-width);
  --sidebar-webkit-scrollbar-thumb-border-radius: var(--webkit-scrollbar-thumb-border-radius);
  --sidebar-webkit-scrollbar-corner-border-width: var(--webkit-scrollbar-corner-border-width);
  --lm-sidebar-webkit-scrollbar-bg-color: var(--lm-webkit-scrollbar-bg-color);
  --lm-sidebar-webkit-scrollbar-track-border-color: var(--lm-webkit-scrollbar-track-border-color);
  --lm-sidebar-webkit-scrollbar-thumb-bg-color: var(--lm-webkit-scrollbar-thumb-bg-color);
  --lm-sidebar-webkit-scrollbar-thumb-bg-color-hover: var(--lm-webkit-scrollbar-thumb-bg-color-hover);
  --lm-sidebar-webkit-scrollbar-thumb-border-color: var(--lm-webkit-scrollbar-thumb-border-color);
  --lm-sidebar-webkit-scrollbar-thumb-border-color-hover: var(--lm-webkit-scrollbar-thumb-border-color-hover);
  --lm-sidebar-webkit-scrollbar-corner-bg-color: var(--lm-webkit-scrollbar-corner-bg-color);
  --lm-sidebar-webkit-scrollbar-corner-border-color: var(--lm-webkit-scrollbar-corner-border-color);
  --dm-sidebar-webkit-scrollbar-bg-color: var(--dm-webkit-scrollbar-bg-color);
  --dm-sidebar-webkit-scrollbar-track-border-color: var(--dm-webkit-scrollbar-track-border-color);
  --dm-sidebar-webkit-scrollbar-thumb-bg-color: var(--dm-webkit-scrollbar-thumb-bg-color);
  --dm-sidebar-webkit-scrollbar-thumb-bg-color-hover: var(--dm-webkit-scrollbar-thumb-bg-color-hover);
  --dm-sidebar-webkit-scrollbar-thumb-border-color: var(--dm-webkit-scrollbar-thumb-border-color);
  --dm-sidebar-webkit-scrollbar-thumb-border-color-hover: var(--dm-webkit-scrollbar-thumb-border-color-hover);
  --dm-sidebar-webkit-scrollbar-corner-bg-color: var(--dm-webkit-scrollbar-corner-bg-color);
  --dm-sidebar-webkit-scrollbar-corner-border-color: var(--dm-webkit-scrollbar-corner-border-color);
  --sidebar-css-scrollbar-width: var(--css-scrollbar-width);
  --lm-sidebar-css-scrollbar-color: var(--lm-webkit-scrollbar-thumb-bg-color) var(--lm-sidebar-bg-color);
  --dm-sidebar-css-scrollbar-color: var(--dm-webkit-scrollbar-thumb-bg-color) var(--dm-sidebar-bg-color);
  /*
  Modal scrollbar

  Notes:
      ~ By default, the light mode thumb background color and track border 
      color are changed to the dark mode ones, as the modal overlay is close 
      to black, even in light mode. 
  */
  --modal-webkit-scrollbar-width-height: var(--webkit-scrollbar-width-height);
  --modal-webkit-scrollbar-track-border-width: var(--webkit-scrollbar-track-border-width);
  --modal-webkit-scrollbar-thumb-border-width: var(--webkit-scrollbar-thumb-border-width);
  --modal-webkit-scrollbar-thumb-border-radius: var(--webkit-scrollbar-thumb-border-radius);
  --modal-webkit-scrollbar-corner-border-width: var(--webkit-scrollbar-corner-border-width);
  --lm-modal-webkit-scrollbar-bg-color: var(--lm-webkit-scrollbar-bg-color);
  --lm-modal-webkit-scrollbar-track-border-color: var(--dm-webkit-scrollbar-track-border-color);
  /* Changed */
  --lm-modal-webkit-scrollbar-thumb-bg-color: var(--dm-webkit-scrollbar-thumb-bg-color);
  /* Changed */
  --lm-modal-webkit-scrollbar-thumb-bg-color-hover: var(--dm-webkit-scrollbar-thumb-bg-color-hover);
  /* Changed */
  --lm-modal-webkit-scrollbar-thumb-border-color: var(--lm-webkit-scrollbar-thumb-border-color);
  --lm-modal-webkit-scrollbar-thumb-border-color-hover: var(--lm-webkit-scrollbar-thumb-border-color-hover);
  --lm-modal-webkit-scrollbar-corner-bg-color: var(--lm-webkit-scrollbar-corner-bg-color);
  --lm-modal-webkit-scrollbar-corner-border-color: var(--lm-webkit-scrollbar-corner-border-color);
  --dm-modal-webkit-scrollbar-bg-color: var(--dm-webkit-scrollbar-bg-color);
  --dm-modal-webkit-scrollbar-track-border-color: var(--dm-webkit-scrollbar-track-border-color);
  --dm-modal-webkit-scrollbar-thumb-bg-color: var(--dm-webkit-scrollbar-thumb-bg-color);
  --dm-modal-webkit-scrollbar-thumb-bg-color-hover: var(--dm-webkit-scrollbar-thumb-bg-color-hover);
  --dm-modal-webkit-scrollbar-thumb-border-color: var(--dm-webkit-scrollbar-thumb-border-color);
  --dm-modal-webkit-scrollbar-thumb-border-color-hover: var(--dm-webkit-scrollbar-thumb-border-color-hover);
  --dm-modal-webkit-scrollbar-corner-bg-color: var(--dm-webkit-scrollbar-corner-bg-color);
  --dm-modal-webkit-scrollbar-corner-border-color: var(--dm-webkit-scrollbar-corner-border-color);
  --modal-css-scrollbar-width: var(--css-scrollbar-width);
  --lm-modal-css-scrollbar-color: var(--dm-webkit-scrollbar-thumb-bg-color) transparent;
  /* Changed */
  --dm-modal-css-scrollbar-color: var(--dm-webkit-scrollbar-thumb-bg-color) transparent;
  /*
  Full screen modal scrollbar

  Notes:
      ~ The background color of the scrollbar and the corner is changed to 
      the modal content background colors. This is so that the scrollbars 
      blend in with the content in the full screen modals. 
  */
  --modal-full-webkit-scrollbar-width-height: var(--webkit-scrollbar-width-height);
  --modal-full-webkit-scrollbar-track-border-width: var(--webkit-scrollbar-track-border-width);
  --modal-full-webkit-scrollbar-thumb-border-width: var(--webkit-scrollbar-thumb-border-width);
  --modal-full-webkit-scrollbar-thumb-border-radius: var(--webkit-scrollbar-thumb-border-radius);
  --modal-full-webkit-scrollbar-corner-border-width: var(--webkit-scrollbar-corner-border-width);
  --lm-modal-full-webkit-scrollbar-bg-color: var(--lm-modal-full-content-bg-color);
  /* Changed */
  --lm-modal-full-webkit-scrollbar-track-border-color: var(--lm-webkit-scrollbar-track-border-color);
  --lm-modal-full-webkit-scrollbar-thumb-bg-color: var(--lm-webkit-scrollbar-thumb-bg-color);
  --lm-modal-full-webkit-scrollbar-thumb-bg-color-hover: var(--lm-webkit-scrollbar-thumb-bg-color-hover);
  --lm-modal-full-webkit-scrollbar-thumb-border-color: var(--lm-webkit-scrollbar-thumb-border-color);
  --lm-modal-full-webkit-scrollbar-thumb-border-color-hover: var(--lm-webkit-scrollbar-thumb-border-color-hover);
  --lm-modal-full-webkit-scrollbar-corner-bg-color: var(--lm-modal-full-content-bg-color);
  /* Changed */
  --lm-modal-full-webkit-scrollbar-corner-border-color: var(--lm-webkit-scrollbar-corner-border-color);
  --dm-modal-full-webkit-scrollbar-bg-color: var(--dm-modal-full-content-bg-color);
  /* Changed */
  --dm-modal-full-webkit-scrollbar-track-border-color: var(--dm-webkit-scrollbar-track-border-color);
  --dm-modal-full-webkit-scrollbar-thumb-bg-color: var(--dm-webkit-scrollbar-thumb-bg-color);
  --dm-modal-full-webkit-scrollbar-thumb-bg-color-hover: var(--dm-webkit-scrollbar-thumb-bg-color-hover);
  --dm-modal-full-webkit-scrollbar-thumb-border-color: var(--dm-webkit-scrollbar-thumb-border-color);
  --dm-modal-full-webkit-scrollbar-thumb-border-color-hover: var(--dm-webkit-scrollbar-thumb-border-color-hover);
  --dm-modal-full-webkit-scrollbar-corner-bg-color: var(--dm-modal-full-content-bg-color);
  /* Changed */
  --dm-modal-full-webkit-scrollbar-corner-border-color: var(--dm-webkit-scrollbar-corner-border-color);
  --modal-full-css-scrollbar-width: var(--css-scrollbar-width);
  --lm-modal-full-css-scrollbar-color: var(--lm-webkit-scrollbar-thumb-bg-color) var(--lm-modal-full-content-bg-color);
  --dm-modal-full-css-scrollbar-color: var(--dm-webkit-scrollbar-thumb-bg-color) var(--dm-modal-full-content-bg-color);
  /* Card scrollbar */
  --card-webkit-scrollbar-width-height: var(--webkit-scrollbar-width-height);
  --card-webkit-scrollbar-track-border-width: var(--webkit-scrollbar-track-border-width);
  --card-webkit-scrollbar-thumb-border-width: var(--webkit-scrollbar-thumb-border-width);
  --card-webkit-scrollbar-thumb-border-radius: var(--webkit-scrollbar-thumb-border-radius);
  --card-webkit-scrollbar-corner-border-width: var(--webkit-scrollbar-corner-border-width);
  --lm-card-webkit-scrollbar-bg-color: var(--lm-webkit-scrollbar-bg-color);
  --lm-card-webkit-scrollbar-track-border-color: var(--lm-webkit-scrollbar-track-border-color);
  --lm-card-webkit-scrollbar-thumb-bg-color: var(--lm-webkit-scrollbar-thumb-bg-color);
  --lm-card-webkit-scrollbar-thumb-bg-color-hover: var(--lm-webkit-scrollbar-thumb-bg-color-hover);
  --lm-card-webkit-scrollbar-thumb-border-color: var(--lm-webkit-scrollbar-thumb-border-color);
  --lm-card-webkit-scrollbar-thumb-border-color-hover: var(--lm-webkit-scrollbar-thumb-border-color-hover);
  --lm-card-webkit-scrollbar-corner-bg-color: var(--lm-webkit-scrollbar-corner-bg-color);
  --lm-card-webkit-scrollbar-corner-border-color: var(--lm-webkit-scrollbar-corner-border-color);
  --dm-card-webkit-scrollbar-bg-color: var(--dm-webkit-scrollbar-bg-color);
  --dm-card-webkit-scrollbar-track-border-color: var(--dm-webkit-scrollbar-track-border-color);
  --dm-card-webkit-scrollbar-thumb-bg-color: var(--dm-webkit-scrollbar-thumb-bg-color);
  --dm-card-webkit-scrollbar-thumb-bg-color-hover: var(--dm-webkit-scrollbar-thumb-bg-color-hover);
  --dm-card-webkit-scrollbar-thumb-border-color: var(--dm-webkit-scrollbar-thumb-border-color);
  --dm-card-webkit-scrollbar-thumb-border-color-hover: var(--dm-webkit-scrollbar-thumb-border-color-hover);
  --dm-card-webkit-scrollbar-corner-bg-color: var(--dm-webkit-scrollbar-corner-bg-color);
  --dm-card-webkit-scrollbar-corner-border-color: var(--dm-webkit-scrollbar-corner-border-color);
  --card-css-scrollbar-width: var(--css-scrollbar-width);
  --lm-card-css-scrollbar-color: var(--lm-webkit-scrollbar-thumb-bg-color) var(--lm-card-bg-color);
  --dm-card-css-scrollbar-color: var(--dm-webkit-scrollbar-thumb-bg-color) var(--dm-card-bg-color);
  /* CSS scrollbar with transparent track (for utility class) */
  --utility-transparent-track-css-scrollbar-width: var(--css-scrollbar-width);
  --lm-utility-transparent-track-css-scrollbar-color: var(--lm-webkit-scrollbar-thumb-bg-color) transparent;
  --dm-utility-transparent-track-css-scrollbar-color: var(--dm-webkit-scrollbar-thumb-bg-color) transparent;
  /*
  ---------------------------------------------------------------------------
  6.  Layout (Sticky alerts, navbar, sidebar) [hmv-06]
  ---------------------------------------------------------------------------
  */
  /* Sticky alerts */
  --sticky-alerts-top: 0;
  --sticky-alerts-right: 2.4rem;
  /* Navbar */
  --navbar-height: 5rem;
  --navbar-border-width: var(--base-border-width);
  --navbar-horizontal-padding: 1rem;
  --lm-navbar-bg-color: var(--white-bg-color);
  --lm-navbar-bg-image: none;
  --lm-navbar-border-color: rgba(0, 0, 0, 0.2);
  --lm-navbar-box-shadow: none;
  --dm-navbar-bg-color: var(--dark-color-dark);
  --dm-navbar-bg-image: none;
  --dm-navbar-border-color: rgba(0, 0, 0, 0.2);
  --dm-navbar-box-shadow: var(--lm-navbar-box-shadow);
  --navbar-fixed-bottom-height: var(--navbar-height);
  --lm-navbar-fixed-bottom-box-shadow: none;
  --dm-navbar-fixed-bottom-box-shadow: var(--lm-navbar-fixed-bottom-box-shadow);
  --lm-navbar-static-bottom-box-shadow: var(--lm-navbar-fixed-bottom-box-shadow);
  --dm-navbar-static-bottom-box-shadow: var(--lm-navbar-static-bottom-box-shadow);
  /* Sidebar */
  --sidebar-width: 26rem;
  --sidebar-border-width: var(--base-border-width);
  --lm-sidebar-bg-color: var(--white-bg-color);
  --lm-sidebar-bg-image: none;
  --lm-sidebar-border-color: rgba(0, 0, 0, 0.2);
  --lm-sidebar-box-shadow: none;
  --dm-sidebar-bg-color: var(--dark-color);
  --dm-sidebar-bg-image: none;
  --dm-sidebar-border-color: rgba(0, 0, 0, 0.2);
  --dm-sidebar-box-shadow: var(--lm-sidebar-box-shadow);
  --sidebar-overlay-bg-color: rgba(0, 0, 0, 0.75);
  /*
  ---------------------------------------------------------------------------
  7.  Page building (containers, content, card, v-spacer) [hmv-07]
  ---------------------------------------------------------------------------
  */
  /* Containers */
  --container-width: 100%;
  --container-sm-max-width: 54rem;
  --container-md-max-width: 72rem;
  --container-lg-max-width: 96rem;
  --container-xl-max-width: 114rem;
  --container-fluid-width: 100%;
  /* Content and card */
  --content-and-card-spacing: 3rem;
  --content-and-card-spacing-xs: 2rem;
  --content-and-card-spacing-half: calc(var(--content-and-card-spacing)/2);
  /* For rows with adjusted spacing */
  --content-and-card-spacing-xs-half: calc(var(--content-and-card-spacing-xs)/2);
  /* For rows with adjusted spacing */
  --content-title-font-size: 2rem;
  --content-title-font-weight: 500;
  --card-border-width: var(--base-border-width);
  --card-border-radius: var(--base-border-radius);
  --card-title-font-size: var(--content-title-font-size);
  --card-title-font-weight: var(--content-title-font-weight);
  --lm-card-text-color: var(--lm-base-text-color);
  --lm-card-bg-color: var(--white-bg-color);
  --lm-card-bg-image: none;
  --lm-card-border-color: rgba(0, 0, 0, 0.2);
  --lm-card-box-shadow: none;
  --dm-card-text-color: var(--dm-base-text-color);
  --dm-card-bg-color: var(--dark-color);
  --dm-card-bg-image: none;
  --dm-card-border-color: rgba(0, 0, 0, 0.2);
  --dm-card-box-shadow: var(--lm-card-box-shadow);
  /* Vertical spacer (Height same as content and card spacing) */
  --v-spacer-height: var(--content-and-card-spacing);
  --v-spacer-height-xs: var(--content-and-card-spacing-xs);
  /*
  ---------------------------------------------------------------------------
  8.  Links [hmv-08]
  ---------------------------------------------------------------------------
  */
  --lm-link-text-color: var(--primary-color);
  --lm-link-text-color-hover: var(--primary-color-light);
  --dm-link-text-color: var(--primary-color);
  --dm-link-text-color-hover: var(--primary-color-light);
  /*
  ---------------------------------------------------------------------------
  9.  Buttons [hmv-09]
  ---------------------------------------------------------------------------
  */
  --button-height: 3.2rem;
  --button-line-height: var(--button-height);
  --button-padding: 0 1.5rem;
  --button-border-width: var(--base-border-width);
  --button-border-radius: var(--base-border-radius);
  --button-outline-width: 1px;
  --button-outline-type: dotted;
  --button-outline-offset: 0.2rem;
  /* Small button */
  --small-button-height: 2.6rem;
  --small-button-line-height: var(--small-button-height);
  --small-button-padding: 0 1rem;
  --small-button-font-size: 1.2rem;
  /* Large button */
  --large-button-height: 4rem;
  --large-button-line-height: var(--large-button-height);
  --large-button-padding: 0 2rem;
  --large-button-font-size: 1.8rem;
  /* Default button */
  --lm-button-text-color: var(--lm-base-text-color-light);
  --lm-button-bg-color: #ffffff;
  --lm-button-bg-image: none;
  --lm-button-border-color: rgba(0, 0, 0, 0.2);
  --lm-button-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05);
  --lm-button-text-color-hover: var(--lm-button-text-color);
  --lm-button-bg-color-hover: var(--gray-color-very-light);
  --lm-button-bg-image-hover: none;
  --lm-button-border-color-hover: var(--lm-button-border-color);
  --lm-button-box-shadow-hover: var(--lm-button-box-shadow);
  --lm-button-text-color-focus: var(--lm-button-text-color);
  --lm-button-bg-color-focus: var(--lm-button-bg-color);
  --lm-button-bg-image-focus: var(--lm-button-bg-image);
  --lm-button-border-color-focus: var(--lm-button-border-color);
  --lm-button-box-shadow-focus: 0 0 0 0.2rem var(--primary-box-shadow-color-darker);
  --lm-button-outline-color-focus: transparent;
  --dm-button-text-color: var(--dm-base-text-color);
  --dm-button-bg-color: rgba(255, 255, 255, 0.05);
  --dm-button-bg-image: none;
  --dm-button-border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent;
  --dm-button-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
  --dm-button-text-color-hover: var(--dm-button-text-color);
  --dm-button-bg-color-hover: rgba(255, 255, 255, 0.1);
  --dm-button-bg-image-hover: none;
  --dm-button-border-color-hover: var(--dm-button-border-color);
  --dm-button-box-shadow-hover: var(--dm-button-box-shadow);
  --dm-button-text-color-focus: var(--dm-button-text-color);
  --dm-button-bg-color-focus: var(--dm-button-bg-color);
  --dm-button-bg-image-focus: var(--dm-button-bg-image);
  --dm-button-border-color-focus: rgba(0, 0, 0, 0.4);
  /* Made darker to better work with the box shadow */
  --dm-button-box-shadow-focus: 0 0 0 0.2rem var(--primary-box-shadow-color);
  --dm-button-outline-color-focus: transparent;
  /* Alternate dark mode default button */
  --dm-button-alt-text-color: inherit;
  --dm-button-alt-bg-color: rgba(0, 0, 0, 0.15);
  --dm-button-alt-bg-image: none;
  --dm-button-alt-border-color: rgba(0, 0, 0, 0.05);
  --dm-button-alt-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025);
  --dm-button-alt-text-color-hover: var(--dm-button-alt-text-color);
  --dm-button-alt-bg-color-hover: rgba(0, 0, 0, 0.2);
  --dm-button-alt-bg-image-hover: none;
  --dm-button-alt-border-color-hover: var(--dm-button-alt-border-color);
  --dm-button-alt-box-shadow-hover: var(--dm-button-alt-box-shadow);
  --dm-button-alt-text-color-focus: var(--dm-button-alt-text-color);
  --dm-button-alt-bg-color-focus: var(--dm-button-alt-bg-color);
  --dm-button-alt-bg-image-focus: var(--dm-button-alt-bg-image);
  --dm-button-alt-border-color-focus: inherit;
  --dm-button-alt-box-shadow-focus: var(--dm-button-alt-box-shadow);
  --dm-button-alt-outline-color-focus: transparent;
  /* Link button */
  --lm-button-link-text-color: var(--primary-color);
  --lm-button-link-bg-color: transparent;
  --lm-button-link-bg-image: none;
  --lm-button-link-border-color: transparent;
  --lm-button-link-box-shadow: none;
  --lm-button-link-text-color-hover: var(--primary-color-light);
  --lm-button-link-bg-color-hover: var(--lm-button-link-bg-color);
  --lm-button-link-bg-image-hover: none;
  --lm-button-link-border-color-hover: var(--lm-button-link-border-color);
  --lm-button-link-box-shadow-hover: var(--lm-button-link-box-shadow);
  --lm-button-link-text-color-focus: var(--lm-button-link-text-color);
  --lm-button-link-bg-color-focus: var(--lm-button-link-bg-color);
  --lm-button-link-bg-image-focus: var(--lm-button-link-bg-image);
  --lm-button-link-border-color-focus: var(--lm-button-link-border-color);
  --lm-button-link-box-shadow-focus: var(--lm-button-box-shadow-focus);
  --lm-button-link-outline-color-focus: var(--lm-button-outline-color-focus);
  --dm-button-link-text-color: var(--primary-color);
  --dm-button-link-bg-color: transparent;
  --dm-button-link-bg-image: none;
  --dm-button-link-border-color: transparent;
  --dm-button-link-box-shadow: none;
  --dm-button-link-text-color-hover: var(--primary-color-light);
  --dm-button-link-bg-color-hover: var(--dm-button-link-bg-color);
  --dm-button-link-bg-image-hover: none;
  --dm-button-link-border-color-hover: var(--dm-button-link-border-color);
  --dm-button-link-box-shadow-hover: var(--dm-button-link-box-shadow);
  --dm-button-link-text-color-focus: var(--dm-button-link-text-color);
  --dm-button-link-bg-color-focus: var(--dm-button-link-bg-color);
  --dm-button-link-bg-image-focus: var(--dm-button-link-bg-image);
  --dm-button-link-border-color-focus: var(--dm-button-link-border-color);
  --dm-button-link-box-shadow-focus: var(--dm-button-box-shadow-focus);
  --dm-button-link-outline-color-focus: var(--dm-button-outline-color-focus);
  /* Primary button */
  --lm-button-primary-text-color: var(--text-color-on-primary-color-bg);
  --lm-button-primary-bg-color: var(--primary-color);
  --lm-button-primary-bg-image: none;
  --lm-button-primary-border-color: var(--primary-color);
  --lm-button-primary-box-shadow: var(--lm-button-box-shadow);
  --lm-button-primary-text-color-hover: var(--lm-button-primary-text-color);
  --lm-button-primary-bg-color-hover: var(--primary-color-light);
  --lm-button-primary-bg-image-hover: none;
  --lm-button-primary-border-color-hover: var(--primary-color-light);
  --lm-button-primary-box-shadow-hover: var(--lm-button-primary-box-shadow);
  --lm-button-primary-text-color-focus: var(--lm-button-primary-text-color);
  --lm-button-primary-bg-color-focus: var(--lm-button-primary-bg-color);
  --lm-button-primary-bg-image-focus: var(--lm-button-primary-bg-image);
  --lm-button-primary-border-color-focus: var(--lm-button-primary-border-color);
  --lm-button-primary-box-shadow-focus: 0 0 0 0.3rem var(--primary-box-shadow-color);
  --lm-button-primary-outline-color-focus: var(--lm-button-outline-color-focus);
  --dm-button-primary-text-color: var(--text-color-on-primary-color-bg);
  --dm-button-primary-bg-color: var(--primary-color);
  --dm-button-primary-bg-image: none;
  --dm-button-primary-border-color: var(--primary-color);
  --dm-button-primary-box-shadow: var(--dm-button-box-shadow);
  --dm-button-primary-text-color-hover: var(--dm-button-primary-text-color);
  --dm-button-primary-bg-color-hover: var(--primary-color-light);
  --dm-button-primary-bg-image-hover: none;
  --dm-button-primary-border-color-hover: var(--primary-color-light);
  --dm-button-primary-box-shadow-hover: var(--dm-button-primary-box-shadow);
  --dm-button-primary-text-color-focus: var(--dm-button-primary-text-color);
  --dm-button-primary-bg-color-focus: var(--dm-button-primary-bg-color);
  --dm-button-primary-bg-image-focus: var(--dm-button-primary-bg-image);
  --dm-button-primary-border-color-focus: var(--dm-button-primary-border-color);
  --dm-button-primary-box-shadow-focus: 0 0 0 0.3rem var(--primary-box-shadow-color);
  --dm-button-primary-outline-color-focus: var(--dm-button-outline-color-focus);
  /* Success button */
  --lm-button-success-text-color: var(--text-color-on-success-color-bg);
  --lm-button-success-bg-color: var(--success-color);
  --lm-button-success-bg-image: none;
  --lm-button-success-border-color: var(--success-color);
  --lm-button-success-box-shadow: var(--lm-button-box-shadow);
  --lm-button-success-text-color-hover: var(--lm-button-success-text-color);
  --lm-button-success-bg-color-hover: var(--success-color-light);
  --lm-button-success-bg-image-hover: none;
  --lm-button-success-border-color-hover: var(--success-color-light);
  --lm-button-success-box-shadow-hover: var(--lm-button-success-box-shadow);
  --lm-button-success-text-color-focus: var(--lm-button-success-text-color);
  --lm-button-success-bg-color-focus: var(--lm-button-success-bg-color);
  --lm-button-success-bg-image-focus: var(--lm-button-success-bg-image);
  --lm-button-success-border-color-focus: var(--lm-button-success-border-color);
  --lm-button-success-box-shadow-focus: 0 0 0 0.3rem var(--success-box-shadow-color);
  --lm-button-success-outline-color-focus: var(--lm-button-outline-color-focus);
  --dm-button-success-text-color: var(--text-color-on-success-color-bg);
  --dm-button-success-bg-color: var(--success-color);
  --dm-button-success-bg-image: none;
  --dm-button-success-border-color: var(--success-color);
  --dm-button-success-box-shadow: var(--dm-button-box-shadow);
  --dm-button-success-text-color-hover: var(--dm-button-success-text-color);
  --dm-button-success-bg-color-hover: var(--success-color-light);
  --dm-button-success-bg-image-hover: none;
  --dm-button-success-border-color-hover: var(--success-color-light);
  --dm-button-success-box-shadow-hover: var(--dm-button-success-box-shadow);
  --dm-button-success-text-color-focus: var(--dm-button-success-text-color);
  --dm-button-success-bg-color-focus: var(--dm-button-success-bg-color);
  --dm-button-success-bg-image-focus: var(--dm-button-success-bg-image);
  --dm-button-success-border-color-focus: var(--dm-button-success-border-color);
  --dm-button-success-box-shadow-focus: 0 0 0 0.3rem var(--success-box-shadow-color);
  --dm-button-success-outline-color-focus: var(--dm-button-outline-color-focus);
  /* Secondary button */
  --lm-button-secondary-text-color: var(--text-color-on-secondary-color-bg);
  --lm-button-secondary-bg-color: var(--secondary-color);
  --lm-button-secondary-bg-image: none;
  --lm-button-secondary-border-color: var(--secondary-color);
  --lm-button-secondary-box-shadow: var(--lm-button-box-shadow);
  --lm-button-secondary-text-color-hover: var(--lm-button-secondary-text-color);
  --lm-button-secondary-bg-color-hover: var(--secondary-color-light);
  --lm-button-secondary-bg-image-hover: none;
  --lm-button-secondary-border-color-hover: var(--secondary-color-light);
  --lm-button-secondary-box-shadow-hover: var(--lm-button-secondary-box-shadow);
  --lm-button-secondary-text-color-focus: var(--lm-button-secondary-text-color);
  --lm-button-secondary-bg-color-focus: var(--lm-button-secondary-bg-color);
  --lm-button-secondary-bg-image-focus: var(--lm-button-secondary-bg-image);
  --lm-button-secondary-border-color-focus: var(--lm-button-secondary-border-color);
  --lm-button-secondary-box-shadow-focus: 0 0 0 0.3rem var(--secondary-box-shadow-color);
  --lm-button-secondary-outline-color-focus: var(--lm-button-outline-color-focus);
  --dm-button-secondary-text-color: var(--text-color-on-secondary-color-bg);
  --dm-button-secondary-bg-color: var(--secondary-color);
  --dm-button-secondary-bg-image: none;
  --dm-button-secondary-border-color: var(--secondary-color);
  --dm-button-secondary-box-shadow: var(--dm-button-box-shadow);
  --dm-button-secondary-text-color-hover: var(--dm-button-secondary-text-color);
  --dm-button-secondary-bg-color-hover: var(--secondary-color-light);
  --dm-button-secondary-bg-image-hover: none;
  --dm-button-secondary-border-color-hover: var(--secondary-color-light);
  --dm-button-secondary-box-shadow-hover: var(--dm-button-secondary-box-shadow);
  --dm-button-secondary-text-color-focus: var(--dm-button-secondary-text-color);
  --dm-button-secondary-bg-color-focus: var(--dm-button-secondary-bg-color);
  --dm-button-secondary-bg-image-focus: var(--dm-button-secondary-bg-image);
  --dm-button-secondary-border-color-focus: var(--dm-button-secondary-border-color);
  --dm-button-secondary-box-shadow-focus: 0 0 0 0.3rem var(--secondary-box-shadow-color);
  --dm-button-secondary-outline-color-focus: var(--dm-button-outline-color-focus);
  /* Danger button */
  --lm-button-danger-text-color: var(--text-color-on-danger-color-bg);
  --lm-button-danger-bg-color: var(--danger-color);
  --lm-button-danger-bg-image: none;
  --lm-button-danger-border-color: var(--danger-color);
  --lm-button-danger-box-shadow: var(--lm-button-box-shadow);
  --lm-button-danger-text-color-hover: var(--lm-button-danger-text-color);
  --lm-button-danger-bg-color-hover: var(--danger-color-light);
  --lm-button-danger-bg-image-hover: none;
  --lm-button-danger-border-color-hover: var(--danger-color-light);
  --lm-button-danger-box-shadow-hover: var(--lm-button-danger-box-shadow);
  --lm-button-danger-text-color-focus: var(--lm-button-danger-text-color);
  --lm-button-danger-bg-color-focus: var(--lm-button-danger-bg-color);
  --lm-button-danger-bg-image-focus: var(--lm-button-danger-bg-image);
  --lm-button-danger-border-color-focus: var(--lm-button-danger-border-color);
  --lm-button-danger-box-shadow-focus: 0 0 0 0.3rem var(--danger-box-shadow-color);
  --lm-button-danger-outline-color-focus: var(--lm-button-outline-color-focus);
  --dm-button-danger-text-color: var(--text-color-on-danger-color-bg);
  --dm-button-danger-bg-color: var(--danger-color);
  --dm-button-danger-bg-image: none;
  --dm-button-danger-border-color: var(--danger-color);
  --dm-button-danger-box-shadow: var(--dm-button-box-shadow);
  --dm-button-danger-text-color-hover: var(--dm-button-danger-text-color);
  --dm-button-danger-bg-color-hover: var(--danger-color-light);
  --dm-button-danger-bg-image-hover: none;
  --dm-button-danger-border-color-hover: var(--danger-color-light);
  --dm-button-danger-box-shadow-hover: var(--dm-button-danger-box-shadow);
  --dm-button-danger-text-color-focus: var(--dm-button-danger-text-color);
  --dm-button-danger-bg-color-focus: var(--dm-button-danger-bg-color);
  --dm-button-danger-bg-image-focus: var(--dm-button-danger-bg-image);
  --dm-button-danger-border-color-focus: var(--dm-button-danger-border-color);
  --dm-button-danger-box-shadow-focus: 0 0 0 0.3rem var(--danger-box-shadow-color);
  --dm-button-danger-outline-color-focus: var(--dm-button-outline-color-focus);
  /* Rounded button */
  --button-rounded-border-radius: var(--button-height);
  --small-button-rounded-border-radius: var(--small-button-height);
  --large-button-rounded-border-radius: var(--large-button-height);
  /*
  ---------------------------------------------------------------------------
  10. Code [hmv-10]
  ---------------------------------------------------------------------------
  */
  --code-font-size: 1.2rem;
  --code-line-height: var(--base-line-height);
  --code-padding: 0.1rem 0.5rem;
  --code-margin: 0 0.1rem;
  --code-border-width: var(--base-border-width);
  --code-border-radius: 0.2rem;
  --lm-code-text-color: var(--lm-base-text-color);
  --lm-code-bg-color: var(--gray-color-light);
  --lm-code-border-color: rgba(0, 0, 0, 0.05);
  --dm-code-text-color: var(--dm-base-text-color);
  --dm-code-bg-color: rgba(0, 0, 0, 0.1);
  --dm-code-border-color: rgba(0, 0, 0, 0.15);
  /*  Keyboard input */
  --kbd-font-size: var(--code-font-size);
  --kbd-line-height: var(--code-line-height);
  --kbd-padding: var(--code-padding);
  --kbd-margin: var(--code-margin);
  --kbd-border-width: var(--code-border-width);
  --kbd-border-radius: 0.4rem;
  /* Different from code */
  --lm-kbd-text-color: var(--lm-base-text-color);
  --lm-kbd-bg-color: var(--white-bg-color);
  --lm-kbd-border-color: rgba(0, 0, 0, 0.2);
  --dm-kbd-text-color: var(--dm-base-text-color);
  --dm-kbd-bg-color: transparent;
  --dm-kbd-border-color: rgba(255, 255, 255, 0.2);
  /*
  ---------------------------------------------------------------------------
  11. Tables [hmv-11]

  Notes on border colors:
      ~ Border colors for tables do not make use of RGBA, and instead uses 
      solid grays. This is because there is overlap of borders in tables, so 
      using semi-transparent border colors is not ideal.
  ---------------------------------------------------------------------------
  */
  --table-padding: 1.2rem 1.5rem;
  --table-header-cell-font-weight: 700;
  --table-head-row-border-bottom-border-width: 2px;
  --table-foot-row-border-top-border-width: 2px;
  --table-border-width: var(--base-border-width);
  --lm-table-border-color: var(--gray-color);
  --dm-table-border-color: var(--gray-color-very-dark);
  /* Hoverable table */
  --lm-table-hoverable-bg-color-hover: rgba(0, 0, 0, 0.05);
  --dm-table-hoverable-bg-color-hover: rgba(0, 0, 0, 0.2);
  /* Striped table */
  --lm-table-striped-bg-color: var(--gray-color-light);
  --dm-table-striped-bg-color: rgba(0, 0, 0, 0.15);
  /* Primary, success, secondary, danger table rows. */
  /* Light mode */
  --lm-table-primary-text-color: var(--lm-base-text-color);
  --lm-table-primary-bg-color: var(--primary-color-very-light);
  --lm-table-primary-row-border-color: var(--primary-color-light);
  --lm-table-primary-cell-border-color: var(--gray-color-dark);
  --lm-table-success-text-color: var(--lm-base-text-color);
  --l