/* ------------------------------------------------------------------------------- Halfmoon CSS (Variables file) Version: 1.1.1 https://www.gethalfmoon.com Copyright, Halfmoon UI Licensed under MIT (https://www.gethalfmoon.com/license) ------------------------------------------------------------------------------- The above notice must be included in its entirety when this file is used. Table of contents: 1. Base styles --------------------------------------------------- [hm-01] 2. Typography ---------------------------------------------------- [hm-02] 3. Scrollbars ---------------------------------------------------- [hm-03] 4. Layout -------------------------------------------------------- [hm-04] 5. Page building (containers, columns, content and card) --------- [hm-05] 6. Links --------------------------------------------------------- [hm-06] 7. Buttons ------------------------------------------------------- [hm-07] 8. List ---------------------------------------------------------- [hm-08] 9. Code ---------------------------------------------------------- [hm-09] 10. Tables -------------------------------------------------------- [hm-10] 11. Form elements ------------------------------------------------- [hm-11] 12. Dropdown ------------------------------------------------------ [hm-12] 13. Modal --------------------------------------------------------- [hm-13] 14. Alerts -------------------------------------------------------- [hm-14] 15. Navbar content ------------------------------------------------ [hm-15] 16. Sidebar content ----------------------------------------------- [hm-16] 17. Pagination ---------------------------------------------------- [hm-17] 18. Breadcrumb ---------------------------------------------------- [hm-18] 19. Tooltips ------------------------------------------------------ [hm-19] 20. Badges -------------------------------------------------------- [hm-20] 21. Image --------------------------------------------------------- [hm-21] 22. Button group -------------------------------------------------- [hm-22] 23. Collapse ------------------------------------------------------ [hm-23] 24. Progress ------------------------------------------------------ [hm-24] 25. Spacing utilities --------------------------------------------- [hm-25] 26. Display utilities --------------------------------------------- [hm-26] 27. Sizing utilities ---------------------------------------------- [hm-27] 28. Flex utilities ------------------------------------------------ [hm-28] 29. Position utilities -------------------------------------------- [hm-29] 30. Other utilities ----------------------------------------------- [hm-30] Credits: Bootstrap and its contributors for class names and inspiration. Moreover, the containers, grid system and the flex utilities found in Halfmoon CSS are almost direct copies of the ones found in Bootstrap. Therefore, the following copyright notice is provided: --------------------------------------------------------------------------- Bootstrap (https://getbootstrap.com/) Copyright 2011-2020 The Bootstrap Authors Copyright 2011-2020 Twitter, Inc. Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) --------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------- 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: #0079C2; /*#1890ff; /* rgba(24, 144, 255, 1) */ --blue-color-light: #0079C2; /*#45a3fb; */ --blue-color-very-light: #0079C2; /*#cfe7fd; */ --blue-color-dark: #0079C2; /*#0d518f; */ --blue-color-very-dark: #0079C2; /*#172636; */ --blue-box-shadow-color: rgba(0, 121, 194, 0.3); /*rgba(24, 144, 255, 0.3);*/ --blue-box-shadow-color-darker: rgba(0, 121, 194, 0.6); /*rgba(24, 144, 255, 0.6);*/ --text-color-on-blue-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); /* 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; /* Custom color Primary */ --custom-primary-color: #97172b; --custom-primary-color-light: #ab4555; --custom-primary-color-very-light: #c0737f; --custom-primary-color-dark: #781222; --custom-primary-color-very-dark: #5a0d19; --custom-primary-box-shadow-color: rgba(151, 23, 43, 0.3); --custom-primary-box-shadow-color-darker: rgba(151, 23, 43, 0.6); --text-color-on-custom-primary-color-bg: #ffffff; /* Custom color Secondary */ --custom-secondary-color: #FFE000; --custom-secondary-color-light: #ab4555; --custom-secondary-color-very-light: #c0737f; --custom-secondary-color-dark: #781222; --custom-secondary-color-very-dark: #5a0d19; --custom-secondary-box-shadow-color: rgba(151, 23, 43, 0.3); --custom-secondary-box-shadow-color-darker: rgba(151, 23, 43, 0.6); --custom-secondary-color-on-red-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(--custom-primary-color); --primary-color-light: var(--custom-primary-color-light); --primary-color-very-light: var(--custom-primary-color-very-light); --primary-color-dark: var(--custom-primary-color-dark); --primary-color-very-dark: var(--custom-primary-color-very-dark); --primary-color-border: var(--custom-primary-box-shadow-color); --primary-box-shadow-color: var(--custom-primary-box-shadow-color); --primary-box-shadow-color-darker: var(--custom-primary-box-shadow-color-darker); --text-color-on-primary-color-bg: var(--text-color-on-custom-primary-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(--custom-secondary-color); --secondary-color-light: var(--custom-secondary-color-light); --secondary-color-very-light: var(--custom-secondary-color-very-light); --secondary-color-dark: var(--custom-secondary-color-dark); --secondary-color-very-dark: var(--custom-secondary-color-very-dark); --secondary-box-shadow-color: var(--custom-secondary-box-shadow-color); --secondary-box-shadow-color-darker: var(--custom-secondary-box-shadow-color-darker); --text-color-on-secondary-color-bg: var(--text-color-on-custom-secondary-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(--primary-box-shadow-color); /* Primary color */ --lm-card-primary-text-color: var(--primary-color); --lm-card-primary-bg-color: var(--white-bg-color); --lm-card-primary-bg-image: none; --lm-card-primary-border-color: var(--primary-color-border);/*rgba(0, 0, 0, 0.2);*/ --lm-card-primary-box-shadow: none; --dm-card-primary-text-color: var(--primary-color); --dm-card-primary-bg-color: var(--dark-color); --dm-card-primary-bg-image: none; --dm-card-primary-border-color: var(--primary-color-border);/*rgba(0, 0, 0, 0.2);*/ --dm-card-primary-box-shadow: var(--primary-box-shadow-color-darker); /* 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); --lm-table-success-bg-color: var(--success-color-very-light); --lm-table-success-row-border-color: var(--success-color); --lm-table-success-cell-border-color: var(--gray-color-dark); --lm-table-secondary-text-color: var(--lm-base-text-color); --lm-table-secondary-bg-color: var(--secondary-color-very-light); --lm-table-secondary-row-border-color: var(--secondary-color); --lm-table-secondary-cell-border-color: var(--gray-color-dark); --lm-table-danger-text-color: var(--lm-base-text-color); --lm-table-danger-bg-color: var(--danger-color-very-light); --lm-table-danger-row-border-color: var(--danger-color-light); --lm-table-danger-cell-border-color: var(--gray-color-dark); /* Dark mode */ --dm-table-primary-text-color: var(--primary-color); --dm-table-primary-bg-color: var(--primary-color-very-dark); --dm-table-primary-row-border-color: var(--primary-color-dark); --dm-table-primary-cell-border-color: var(--dm-table-border-color); --dm-table-success-text-color: var(--success-color); --dm-table-success-bg-color: var(--success-color-very-dark); --dm-table-success-row-border-color: var(--success-color-dark); --dm-table-success-cell-border-color: var(--dm-table-border-color); --dm-table-secondary-text-color: var(--secondary-color); --dm-table-secondary-bg-color: var(--secondary-color-very-dark); --dm-table-secondary-row-border-color: var(--secondary-color-dark); --dm-table-secondary-cell-border-color: var(--dm-table-border-color); --dm-table-danger-text-color: var(--danger-color); --dm-table-danger-bg-color: var(--danger-color-very-dark); --dm-table-danger-row-border-color: var(--danger-color-dark); --dm-table-danger-cell-border-color: var(--dm-table-border-color); /* --------------------------------------------------------------------------- 12. Form helpers (form-groups, labels, form-text, etc.) [hmv-12] --------------------------------------------------------------------------- */ /* Fieldsets, form-groups, form-rows and cols, labels, legends, form-text, invalid-feedback, inline-form */ --label-margin-bottom: 0.6rem; --legend-margin-bottom: var(--label-margin-bottom); --form-group-margin-bottom: 2rem; --form-row-and-col-margin-bottom: var(--form-group-margin-bottom); --form-col-horizontal-padding: 1rem; --form-text-font-size: var(--base-font-size); --form-text-padding-top: 0.8rem; --form-text-padding-bottom: var(--form-text-padding-top); --form-text-border-width: var(--base-border-width); --form-text-border-type: dotted; --lm-form-text-text-color: var(--lm-base-text-color-light); --lm-form-text-border-color: rgba(0, 0, 0, 0.2); --dm-form-text-text-color: var(--dm-base-text-color-light); --dm-form-text-border-color: rgba(255, 255, 255, 0.1); --invalid-feedback-font-size: var(--base-font-size); --invalid-feedback-padding-top: 0.8rem; --invalid-feedback-padding-bottom: var(--invalid-feedback-padding-top); --lm-invalid-feedback-text-color: var(--danger-color); --dm-invalid-feedback-text-color: var(--danger-color); --form-inline-horizontal-margin: 1rem; /* --------------------------------------------------------------------------- 13. Inputs [hmv-13] Notes: ~ Background image variables are not available for inputs, because they clash with the select's background image (used to create the arrow). And inputs, select boxes, and textareas all have the same class (.form-control). --------------------------------------------------------------------------- */ --input-height: 3.2rem; --input-horizontal-padding: 0.8rem; --input-border-width: var(--base-border-width); --input-border-radius: var(--base-border-radius); --small-input-height: 2.6rem; --small-input-horizontal-padding: var(--input-horizontal-padding); --small-input-font-size: 1.2rem; --large-input-height: 4rem; --large-input-horizontal-padding: var(--input-horizontal-padding); --large-input-font-size: 1.8rem; --textarea-line-height: var(--base-line-height); --lm-input-text-color: var(--lm-base-text-color); --lm-input-bg-color: #ffffff; --lm-input-border-color: rgba(0, 0, 0, 0.2); --lm-input-box-shadow: none; --lm-input-text-color-hover: var(--lm-input-text-color); --lm-input-bg-color-hover: var(--lm-input-bg-color); --lm-input-border-color-hover: rgba(0, 0, 0, 0.3); --lm-input-box-shadow-hover: var(--lm-input-box-shadow); --lm-input-text-color-focus: var(--lm-input-text-color); --lm-input-bg-color-focus: var(--lm-input-bg-color); --lm-input-border-color-focus: var(--lm-input-border-color); --lm-input-box-shadow-focus: 0 0 0 0.2rem var(--primary-box-shadow-color-darker); --lm-input-placeholder-text-color: rgba(0, 0, 0, 0.35); --lm-input-text-color-disabled: var(--lm-input-text-color); --lm-input-bg-color-disabled: var(--gray-color-light); --lm-input-border-color-disabled: var(--lm-input-border-color); --dm-input-text-color: var(--dm-base-text-color); --dm-input-bg-color: rgba(255, 255, 255, 0.05); --dm-input-border-color: rgba(0, 0, 0, 0.3); --dm-input-box-shadow: none; --dm-input-text-color-hover: var(--dm-input-text-color); --dm-input-bg-color-hover: var(--dm-input-bg-color); --dm-input-border-color-hover: rgba(0, 0, 0, 0.4); --dm-input-box-shadow-hover: var(--dm-input-box-shadow); --dm-input-text-color-focus: var(--dm-input-text-color); --dm-input-bg-color-focus: var(--dm-input-bg-color); --dm-input-border-color-focus: var(--dm-input-border-color-hover); --dm-input-box-shadow-focus: 0 0 0 0.2rem var(--primary-box-shadow-color); --dm-input-placeholder-text-color: rgba(255, 255, 255, 0.2); --dm-input-text-color-disabled: var(--dm-input-text-color); --dm-input-bg-color-disabled: rgba(0, 0, 0, 0.15); --dm-input-border-color-disabled: var(--dm-input-border-color); /* Alternate dark mode inputs */ --dm-input-alt-text-color: inherit; --dm-input-alt-bg-color: rgba(0, 0, 0, 0.15); --dm-input-alt-border-color: transparent; --dm-input-alt-box-shadow: none; --dm-input-alt-text-color-hover: var(--dm-input-alt-text-color); --dm-input-alt-bg-color-hover: var(--dm-input-alt-bg-color); --dm-input-alt-border-color-hover: rgba(0, 0, 0, 0.1); --dm-input-alt-box-shadow-hover: var(--dm-input-alt-box-shadow); --dm-input-alt-text-color-focus: var(--dm-input-alt-text-color); --dm-input-alt-bg-color-focus: var(--dm-input-alt-bg-color); --dm-input-alt-border-color-focus: inherit; --dm-input-alt-box-shadow-focus: none; --dm-input-alt-placeholder-text-color: rgba(255, 255, 255, 0.5); --dm-input-alt-text-color-disabled: var(--dm-input-alt-text-color); --dm-input-alt-bg-color-disabled: rgba(0, 0, 0, 0.3); --dm-input-alt-border-color-disabled: transparent; /* Invalid input (with errors) Notes: ~ No disabled variables are provided because the user should be able to change the input and fix the errors. */ --lm-input-invalid-text-color: var(--lm-input-text-color); --lm-input-invalid-bg-color: var(--lm-input-bg-color); --lm-input-invalid-border-color: var(--danger-color); --lm-input-invalid-box-shadow: var(--lm-input-box-shadow); --lm-input-invalid-text-color-hover: var(--lm-input-text-color-hover); --lm-input-invalid-bg-color-hover: var(--lm-input-bg-color-hover); --lm-input-invalid-border-color-hover: var(--lm-input-invalid-border-color); --lm-input-invalid-box-shadow-hover: var(--lm-input-invalid-box-shadow); --lm-input-invalid-text-color-focus: var(--lm-input-text-color-focus); --lm-input-invalid-bg-color-focus: var(--lm-input-bg-color-focus); --lm-input-invalid-border-color-focus: var(--danger-color-very-light); --lm-input-invalid-box-shadow-focus: 0 0 0 0.2rem var(--danger-box-shadow-color-darker); --lm-input-invalid-placeholder-text-color: var(--lm-input-placeholder-text-color); --dm-input-invalid-text-color: var(--dm-input-text-color); --dm-input-invalid-bg-color: var(--dm-input-bg-color); --dm-input-invalid-border-color: var(--danger-color); --dm-input-invalid-box-shadow: var(--dm-input-box-shadow); --dm-input-invalid-text-color-hover: var(--dm-input-text-color-hover); --dm-input-invalid-bg-color-hover: var(--dm-input-bg-color-hover); --dm-input-invalid-border-color-hover: var(--dm-input-invalid-border-color); --dm-input-invalid-box-shadow-hover: var(--dm-input-invalid-box-shadow); --dm-input-invalid-text-color-focus: var(--dm-input-text-color-focus); --dm-input-invalid-bg-color-focus: var(--dm-input-bg-color-focus); --dm-input-invalid-border-color-focus: var(--dm-input-invalid-border-color); --dm-input-invalid-box-shadow-focus: 0 0 0 0.2rem var(--danger-box-shadow-color); --dm-input-invalid-placeholder-text-color: var(--dm-input-placeholder-text-color); --dm-input-alt-invalid-text-color: var(--dm-input-alt-text-color); --dm-input-alt-invalid-bg-color: var(--dm-input-alt-bg-color); --dm-input-alt-invalid-border-color: var(--danger-color-light); --dm-input-alt-invalid-box-shadow: var(--dm-input-alt-box-shadow); --dm-input-alt-invalid-text-color-hover: var(--dm-input-alt-text-color-hover); --dm-input-alt-invalid-bg-color-hover: var(--dm-input-alt-bg-color-hover); --dm-input-alt-invalid-border-color-hover: var(--dm-input-alt-invalid-border-color); --dm-input-alt-invalid-box-shadow-hover: var(--dm-input-alt-invalid-box-shadow); --dm-input-alt-invalid-text-color-focus: var(--dm-input-alt-text-color-focus); --dm-input-alt-invalid-bg-color-focus: var(--dm-input-alt-bg-color-focus); --dm-input-alt-invalid-border-color-focus: var(--dm-input-alt-invalid-border-color); --dm-input-alt-invalid-box-shadow-focus: var(--dm-input-invalid-box-shadow-focus); --dm-input-alt-invalid-placeholder-text-color: var(--dm-input-alt-placeholder-text-color); /* Select */ --select-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAI9JREFUeNpiZACCyMjIBCDVD8SOy5cvv8BAAgDqNQBS+4G4EKh3ASPUsPlQ+Q+kGIpkmABUKJEJ6jIYAEnshyok1TAQ6AcZ6Ah1GdGG4jAM7DtGQgrQvU9ILSOxColVw0is7VA2QV8wkhA+DMQECSMJgc5AyDCcBhIwFG9aZSQxrRFM+IwkJGAGYnIRQIABACQuXCKovu2mAAAAAElFTkSuQmCC); --select-bg-size: 1rem; --select-bg-repeat: no-repeat; --select-bg-position: calc(100% - 1rem) center; --select-padding-right: 3.6rem; /* Makes room for the arrow */ /* --------------------------------------------------------------------------- 14. Checkbox [hmv-14] Notes: ~ Since checkbox, radio, and the switch are so tiny, the border colors are made slightly darker compared to regular inputs (in light mode) for more readability. --------------------------------------------------------------------------- */ --checkbox-border-width: var(--base-border-width); --checkbox-border-radius: var(--base-border-radius); --checkbox-width-height: 1.8rem; --checkbox-line-height: var(--checkbox-width-height); --checkbox-label-padding-left: 2.5rem; --checkbox-label-blank-padding-left: var(--checkbox-width-height); --lm-checkbox-bg-color: #ffffff; --lm-checkbox-border-color: rgba(0, 0, 0, 0.3); --lm-checkbox-bg-color-hover: var(--lm-checkbox-bg-color); --lm-checkbox-border-color-hover: rgba(0, 0, 0, 0.4); --lm-checkbox-bg-color-checked: var(--primary-color); --lm-checkbox-border-color-checked: var(--primary-color); --lm-checkbox-border-color-focus: var(--lm-input-border-color-focus); --lm-checkbox-box-shadow-focus: var(--lm-input-box-shadow-focus); --lm-checkbox-border-color-checked-focus: var(--lm-checkbox-border-color-checked); --lm-checkbox-box-shadow-checked-focus: 0 0 0 0.3rem var(--primary-box-shadow-color); /* Made slightly thicker to make the effect more visible */ --dm-checkbox-bg-color: transparent; --dm-checkbox-border-color: rgba(255, 255, 255, 0.15); --dm-checkbox-bg-color-hover: var(--dm-checkbox-bg-color); --dm-checkbox-border-color-hover: rgba(255, 255, 255, 0.3); --dm-checkbox-bg-color-checked: var(--primary-color); --dm-checkbox-border-color-checked: var(--primary-color); --dm-checkbox-border-color-focus: var(--dm-input-border-color-focus); --dm-checkbox-box-shadow-focus: var(--dm-input-box-shadow-focus); --dm-checkbox-border-color-checked-focus: var(--dm-checkbox-border-color-checked); --dm-checkbox-box-shadow-checked-focus: 0 0 0 0.3rem var(--primary-box-shadow-color); /* Made slightly thicker to make the effect more visible */ --checkbox-checkmark-left: 0.6rem; --checkbox-checkmark-top: 0.3rem; --checkbox-checkmark-width: 0.6rem; --checkbox-checkmark-height: 1rem; --checkbox-checkmark-border-width: 0 0.2rem 0.2rem 0; --checkbox-checkmark-transform: rotate(45deg); --lm-checkbox-checkmark-color: #ffffff; --dm-checkbox-checkmark-color: #ffffff; /* --------------------------------------------------------------------------- 15. Radio [hmv-15] Notes: ~ Since checkbox, radio, and the switch are so tiny, the border colors are made slightly darker compared to regular inputs (in light mode) for more readability. --------------------------------------------------------------------------- */ --radio-border-width: var(--base-border-width); --radio-border-radius: 50%; --radio-width-height: 1.6rem; --radio-line-height: var(--radio-width-height); --radio-label-padding-left: 2.5rem; --radio-label-blank-padding-left: var(--radio-width-height); --form-group-radio-margin: 0.8rem 0 0 0; /* Only for radio buttons inside form groups */ --lm-radio-bg-color: #ffffff; --lm-radio-border-color: rgba(0, 0, 0, 0.3); --lm-radio-bg-color-hover: var(--lm-radio-bg-color); --lm-radio-border-color-hover: rgba(0, 0, 0, 0.4); --lm-radio-bg-color-checked: var(--primary-color); --lm-radio-border-color-checked: var(--primary-color); --lm-radio-border-color-focus: var(--lm-checkbox-border-color-focus); --lm-radio-box-shadow-focus: var(--lm-checkbox-box-shadow-focus); --lm-radio-border-color-checked-focus: var(--lm-checkbox-border-color-checked-focus); --lm-radio-box-shadow-checked-focus: var(--lm-checkbox-box-shadow-checked-focus); --dm-radio-bg-color: transparent; --dm-radio-border-color: rgba(255, 255, 255, 0.15); --dm-radio-bg-color-hover: var(--dm-radio-bg-color); --dm-radio-border-color-hover: rgba(255, 255, 255, 0.3); --dm-radio-bg-color-checked: var(--primary-color); --dm-radio-border-color-checked: var(--primary-color); --dm-radio-border-color-focus: var(--dm-checkbox-border-color-focus); --dm-radio-box-shadow-focus: var(--dm-checkbox-box-shadow-focus); --dm-radio-border-color-checked-focus: var(--dm-checkbox-border-color-checked-focus); --dm-radio-box-shadow-checked-focus: var(--dm-checkbox-box-shadow-checked-focus); --radio-checkmark-border-radius: var(--radio-border-radius); --radio-checkmark-top: 0.5rem; --radio-checkmark-left: 0.5rem; --radio-checkmark-width-height: 0.6rem; --lm-radio-checkmark-color: #ffffff; --dm-radio-checkmark-color: #ffffff; /* --------------------------------------------------------------------------- 16. Switch [hmv-16] Notes: ~ Since checkbox, radio, and the switch are so tiny, the border colors are made slightly darker compared to regular inputs (in light mode) for more readability. --------------------------------------------------------------------------- */ --switch-border-width: var(--base-border-width); --switch-border-radius: 2rem; --switch-width: 3.2rem; --switch-height: 2rem; --switch-line-height: var(--switch-height); --switch-label-padding-left: calc(var(--switch-width) + 0.8rem); --switch-label-blank-padding-left: var(--switch-width); --lm-switch-bg-color: #ffffff; --lm-switch-border-color: rgba(0, 0, 0, 0.3); --lm-switch-bg-color-hover: var(--lm-switch-bg-color); --lm-switch-border-color-hover: rgba(0, 0, 0, 0.4); --lm-switch-bg-color-checked: var(--primary-color); --lm-switch-border-color-checked: var(--primary-color); --lm-switch-border-color-focus: var(--lm-checkbox-border-color-focus); --lm-switch-box-shadow-focus: var(--lm-checkbox-box-shadow-focus); --lm-switch-border-color-checked-focus: var(--lm-checkbox-border-color-checked-focus); --lm-switch-box-shadow-checked-focus: var(--lm-checkbox-box-shadow-checked-focus); --dm-switch-bg-color: transparent; --dm-switch-border-color: rgba(255, 255, 255, 0.15); --dm-switch-bg-color-hover: var(--dm-switch-bg-color); --dm-switch-border-color-hover: rgba(255, 255, 255, 0.3); --dm-switch-bg-color-checked: var(--primary-color); --dm-switch-border-color-checked: var(--primary-color); --dm-switch-border-color-focus: var(--dm-checkbox-border-color-focus); --dm-switch-box-shadow-focus: var(--dm-checkbox-box-shadow-focus); --dm-switch-border-color-checked-focus: var(--lm-checkbox-border-color-checked-focus); --dm-switch-box-shadow-checked-focus: var(--lm-checkbox-box-shadow-checked-focus); --switch-slider-border-width: 0; --switch-slider-border-radius: 50%; --switch-slider-width-height: 1.2rem; --switch-slider-top: 0.4rem; --switch-slider-left: 0.5rem; --switch-slider-top-checked: var(--switch-slider-top); --switch-slider-left-checked: calc(var(--switch-width) - var(--switch-slider-width-height) - var(--switch-slider-left)); --lm-switch-slider-bg-color: rgba(0, 0, 0, 0.2); /* Transparency used in light mode because the background of the switch box is plain white */ --lm-switch-slider-border-color: var(--lm-switch-slider-bg-color); --lm-switch-slider-bg-color-checked: #ffffff; --lm-switch-slider-border-color-checked: var(--lm-switch-slider-bg-color-checked); --dm-switch-slider-bg-color: rgba(255, 255, 255, 0.15); --dm-switch-slider-border-color: var(--dm-switch-slider-bg-color); --dm-switch-slider-bg-color-checked: #ffffff; --dm-switch-slider-border-color-checked: var(--dm-switch-slider-bg-color-checked); /* --------------------------------------------------------------------------- 17. Input file [hmv-17] Differences from buttons: ~ The border color and box shadow for :focus is used from inputs to show that this is not a button, but rather an input. --------------------------------------------------------------------------- */ --input-file-button-height: var(--button-height); --input-file-button-line-height: var(--input-file-button-height); --input-file-button-padding: var(--button-padding); --input-file-button-border-width: var(--button-border-width); --input-file-button-border-radius: var(--button-border-radius); --lm-input-file-button-text-color: var(--lm-button-text-color); --lm-input-file-button-bg-color: var(--lm-button-bg-color); --lm-input-file-button-bg-image: var(--lm-button-bg-image); --lm-input-file-button-border-color: var(--lm-button-border-color); --lm-input-file-button-box-shadow: var(--lm-button-box-shadow); --lm-input-file-button-text-color-hover: var(--lm-button-text-color-hover); --lm-input-file-button-bg-color-hover: var(--lm-button-bg-color-hover); --lm-input-file-button-bg-image-hover: var(--lm-button-bg-image-hover); --lm-input-file-button-border-color-hover: var(--lm-button-border-color-hover); --lm-input-file-button-box-shadow-hover: var(--lm-button-box-shadow-hover); --lm-input-file-button-text-color-focus: var(--lm-button-text-color-focus); --lm-input-file-button-bg-color-focus: var(--lm-button-bg-color-focus); --lm-input-file-button-bg-image-focus: var(--lm-button-bg-image-focus); --lm-input-file-button-border-color-focus: var(--lm-input-border-color-focus); /* From input */ --lm-input-file-button-box-shadow-focus: var(--lm-input-box-shadow-focus); /* From input */ --dm-input-file-button-text-color: var(--dm-button-text-color); --dm-input-file-button-bg-color: var(--dm-button-bg-color); --dm-input-file-button-bg-image: var(--dm-button-bg-image); --dm-input-file-button-border-color: var(--dm-button-border-color); --dm-input-file-button-box-shadow: var(--dm-button-box-shadow); --dm-input-file-button-text-color-hover: var(--dm-button-text-color-hover); --dm-input-file-button-bg-color-hover: var(--dm-button-bg-color-hover); --dm-input-file-button-bg-image-hover: var(--dm-button-bg-image-hover); --dm-input-file-button-border-color-hover: var(--dm-button-border-color-hover); --dm-input-file-button-box-shadow-hover: var(--dm-button-box-shadow-hover); --dm-input-file-button-text-color-focus: var(--dm-button-text-color-focus); --dm-input-file-button-bg-color-focus: var(--dm-button-bg-color-focus); --dm-input-file-button-bg-image-focus: var(--dm-button-bg-image-focus); --dm-input-file-button-border-color-focus: var(--dm-input-border-color-focus); /* From input */ --dm-input-file-button-box-shadow-focus: var(--dm-input-box-shadow-focus); /* From input */ /* Invalid input file (only borders and box shadows used from invalid inputs) */ --lm-input-file-button-invalid-text-color: var(--lm-input-file-button-text-color); --lm-input-file-button-invalid-bg-color: var(--lm-input-file-button-bg-color); --lm-input-file-button-invalid-bg-image: var(--lm-input-file-button-bg-image); --lm-input-file-button-invalid-border-color: var(--lm-input-invalid-border-color); /* From input */ --lm-input-file-button-invalid-box-shadow: var(--lm-input-file-button-box-shadow); --lm-input-file-button-invalid-text-color-hover: var(--lm-input-file-button-text-color-hover); --lm-input-file-button-invalid-bg-color-hover: var(--lm-input-file-button-bg-color-hover); --lm-input-file-button-invalid-bg-image-hover: var(--lm-input-file-button-bg-image-hover); --lm-input-file-button-invalid-border-color-hover: var(--lm-input-invalid-border-color-hover); /* From input */ --lm-input-file-button-invalid-box-shadow-hover: var(--lm-input-file-button-box-shadow-hover); --lm-input-file-button-invalid-text-color-focus: var(--lm-input-file-button-text-color-focus); --lm-input-file-button-invalid-bg-color-focus: var(--lm-input-file-button-bg-color-focus); --lm-input-file-button-invalid-bg-image-focus: var(--lm-input-file-button-bg-image-focus); --lm-input-file-button-invalid-border-color-focus: var(--lm-input-invalid-border-color-focus); /* From input */ --lm-input-file-button-invalid-box-shadow-focus: var(--lm-input-invalid-box-shadow-focus); /* From input */ --dm-input-file-button-invalid-text-color: var(--dm-input-file-button-text-color); --dm-input-file-button-invalid-bg-color: var(--dm-input-file-button-bg-color); --dm-input-file-button-invalid-bg-image: var(--dm-input-file-button-bg-image); --dm-input-file-button-invalid-border-color: var(--dm-input-invalid-border-color); /* From input */ --dm-input-file-button-invalid-box-shadow: var(--dm-input-file-button-box-shadow); --dm-input-file-button-invalid-text-color-hover: var(--dm-input-file-button-text-color-hover); --dm-input-file-button-invalid-bg-color-hover: var(--dm-input-file-button-bg-color-hover); --dm-input-file-button-invalid-bg-image-hover: var(--dm-input-file-button-bg-image-hover); --dm-input-file-button-invalid-border-color-hover: var(--dm-input-invalid-border-color-hover); /* From input */ --dm-input-file-button-invalid-box-shadow-hover: var(--dm-input-file-button-box-shadow-hover); --dm-input-file-button-invalid-text-color-focus: var(--dm-input-file-button-text-color-focus); --dm-input-file-button-invalid-bg-color-focus: var(--dm-input-file-button-bg-color-focus); --dm-input-file-button-invalid-bg-image-focus: var(--dm-input-file-button-bg-image-focus); --dm-input-file-button-invalid-border-color-focus: var(--dm-input-invalid-border-color-focus); /* From input */ --dm-input-file-button-invalid-box-shadow-focus: var(--dm-input-invalid-box-shadow-focus); /* From input */ /* --------------------------------------------------------------------------- 18. Input group [hmv-18] --------------------------------------------------------------------------- */ --input-group-text-horizontal-padding: var(--input-horizontal-padding); --input-group-text-border-width: var(--input-border-width); --input-group-text-border-radius: var(--input-border-radius); --small-input-group-text-horizontal-padding: var(--small-input-horizontal-padding); --small-input-group-text-font-size: var(--small-input-font-size); --large-input-group-text-horizontal-padding: var(--large-input-horizontal-padding); --large-input-group-text-font-size: var(--large-input-font-size); --lm-input-group-text-text-color: var(--lm-base-text-color); --lm-input-group-text-bg-color: var(--gray-color-light); /* Different from input */ --lm-input-group-text-border-color: var(--lm-input-border-color); --dm-input-group-text-text-color: var(--dm-base-text-color); --dm-input-group-text-bg-color: rgba(255, 255, 255, 0.1); /* Different from input */ --dm-input-group-text-border-color: var(--dm-input-border-color); /* Buttons (only border colors) */ --lm-input-group-button-border-color: var(--lm-button-border-color); --lm-input-group-button-border-color-hover: var(--lm-button-border-color-hover); --lm-input-group-button-border-color-focus: var(--lm-button-border-color-focus); --dm-input-group-button-border-color: var(--dm-input-border-color); /* Different from button */ --dm-input-group-button-border-color-hover: var(--dm-input-group-button-border-color); --dm-input-group-button-border-color-focus: var(--dm-input-group-button-border-color); --lm-input-group-button-link-border-color: var(--lm-input-group-button-border-color); --lm-input-group-button-link-border-color-hover: var(--lm-input-group-button-link-border-color); --lm-input-group-button-link-border-color-focus: var(--lm-input-group-button-link-border-color); --dm-input-group-button-link-border-color: rgba(0, 0, 0, 0.2); /* Different from button */ --dm-input-group-button-link-border-color-hover: var(--dm-input-group-button-link-border-color); --dm-input-group-button-link-border-color-focus: var(--dm-input-group-button-link-border-color); --lm-input-group-button-primary-border-color: var(--lm-button-primary-border-color); --lm-input-group-button-primary-border-color-hover: var(--lm-button-primary-border-color-hover); --lm-input-group-button-primary-border-color-focus: var(--lm-button-primary-border-color-focus); --dm-input-group-button-primary-border-color: var(--dm-button-primary-border-color); --dm-input-group-button-primary-border-color-hover: var(--dm-button-primary-border-color-hover); --dm-input-group-button-primary-border-color-focus: var(--dm-button-primary-border-color-focus); --lm-input-group-button-success-border-color: var(--lm-button-success-border-color); --lm-input-group-button-success-border-color-hover: var(--lm-button-success-border-color-hover); --lm-input-group-button-success-border-color-focus: var(--lm-button-success-border-color-focus); --dm-input-group-button-success-border-color: var(--dm-button-success-border-color); --dm-input-group-button-success-border-color-hover: var(--dm-button-success-border-color-hover); --dm-input-group-button-success-border-color-focus: var(--dm-button-success-border-color-focus); --lm-input-group-button-secondary-border-color: var(--lm-button-secondary-border-color); --lm-input-group-button-secondary-border-color-hover: var(--lm-button-secondary-border-color-hover); --lm-input-group-button-secondary-border-color-focus: var(--lm-button-secondary-border-color-focus); --dm-input-group-button-secondary-border-color: var(--dm-button-secondary-border-color); --dm-input-group-button-secondary-border-color-hover: var(--dm-button-secondary-border-color-hover); --dm-input-group-button-secondary-border-color-focus: var(--dm-button-secondary-border-color-focus); --lm-input-group-button-danger-border-color: var(--lm-button-danger-border-color); --lm-input-group-button-danger-border-color-hover: var(--lm-button-danger-border-color-hover); --lm-input-group-button-danger-border-color-focus: var(--lm-button-danger-border-color-focus); --dm-input-group-button-danger-border-color: var(--dm-button-danger-border-color); --dm-input-group-button-danger-border-color-hover: var(--dm-button-danger-border-color-hover); --dm-input-group-button-danger-border-color-focus: var(--dm-button-danger-border-color-focus); /* --------------------------------------------------------------------------- 19. Dropdown [hmv-19] Notes: ~ If you want to use linear-gradients for the dropdown menu background, ie, the {lm|dm}-dropdown-menu-bg-image variables, please note that the arrow may look out of place on some dropdown variations. For such cases, it may be better to avoid using dropdowns with arrows. --------------------------------------------------------------------------- */ --dropdown-menu-border-width: var(--base-border-width); --dropdown-menu-border-radius: var(--base-border-radius); --dropdown-menu-padding: 0.4rem; --dropdown-menu-min-width: 16.8rem; --lm-dropdown-menu-text-color: var(--lm-base-text-color); --lm-dropdown-menu-bg-color: var(--white-bg-color); --lm-dropdown-menu-bg-image: none; --lm-dropdown-menu-border-color: var(--gray-color-dark); /* RGBA is avoided because there is border overlap with the arrow */ --lm-dropdown-menu-box-shadow: var(--lm-shadow); --dm-dropdown-menu-text-color: var(--dm-base-text-color); --dm-dropdown-menu-bg-color: var(--dark-color); --dm-dropdown-menu-bg-image: none; --dm-dropdown-menu-border-color: var(--dark-color-dark); /* RGBA is avoided because there is border overlap with the arrow */ --dm-dropdown-menu-box-shadow: var(--dm-shadow); --dropdown-arrow-size: 0.8rem; --dropdown-arrow-size-negative: calc(var(--dropdown-arrow-size) * -1); --dropdown-arrow-inner-spacing: calc(0.2rem + (var(--dropdown-arrow-size) * -1)); /* Adding 0.2rem (2px) is just enough to make the ::before look like a border */ --dropdown-arrow-horizontal-spacing: 0.8rem; --dropdown-arrow-vertical-spacing: 0.8rem; --dropdown-content-padding: 1.2rem; --dropdown-divider-height: 1px; --lm-dropdown-divider-bg-color: var(--lm-horizontal-rule-color); --dm-dropdown-divider-bg-color: var(--dm-horizontal-rule-color); --dropdown-item-padding: 0.6rem var(--dropdown-content-padding); --dropdown-item-border-radius: 0.2rem; --lm-dropdown-item-text-color: var(--lm-dropdown-menu-text-color); --lm-dropdown-item-bg-color: transparent; --lm-dropdown-item-text-color-hover: var(--lm-dropdown-item-text-color); --lm-dropdown-item-bg-color-hover: rgba(0, 0, 0, 0.025); --dm-dropdown-item-text-color: var(--dm-dropdown-menu-text-color); --dm-dropdown-item-bg-color: transparent; --dm-dropdown-item-text-color-hover: var(--dm-dropdown-item-text-color); --dm-dropdown-item-bg-color-hover: rgba(255, 255, 255, 0.025); --dropdown-header-font-size: var(--base-font-size); --dropdown-header-font-weight: var(--content-title-font-weight); --dropdown-header-padding: var(--dropdown-item-padding); --dropdown-header-margin: 0; --lm-dropdown-header-text-color: var(--lm-muted-text-color); --dm-dropdown-header-text-color: var(--dm-muted-text-color); /* --------------------------------------------------------------------------- 20. Modal [hmv-20] --------------------------------------------------------------------------- */ --lm-modal-overlay-bg-color: rgba(0, 0, 0, 0.8); --dm-modal-overlay-bg-color: rgba(0, 0, 0, 0.95); /* Modal content */ --modal-content-width: 40rem; --modal-content-padding: var(--content-and-card-spacing); --modal-content-padding-xs: var(--content-and-card-spacing-xs); --modal-content-border-width: var(--card-border-width); --modal-content-border-radius: var(--card-border-radius); --lm-modal-content-text-color: var(--lm-card-text-color); --lm-modal-content-bg-color: var(--lm-card-bg-color); --lm-modal-content-bg-image: var(--lm-card-bg-image); --lm-modal-content-border-color: var(--lm-card-border-color); --lm-modal-content-box-shadow: var(--lm-card-box-shadow); --dm-modal-content-text-color: var(--dm-card-text-color); --dm-modal-content-bg-color: var(--dm-card-bg-color); --dm-modal-content-bg-image: var(--dm-card-bg-image); --dm-modal-content-border-color: var(--dm-card-border-color); --dm-modal-content-box-shadow: var(--dm-card-box-shadow); --modal-title-font-size: var(--content-title-font-size); --modal-title-font-weight: var(--content-title-font-weight); /* Full screen modal content (no need for border or box shadow) */ --modal-full-content-padding: var(--modal-content-padding); --modal-full-content-padding-xs: var(--modal-content-padding-xs); --lm-modal-full-content-text-color: var(--lm-modal-content-text-color); --lm-modal-full-content-bg-color: var(--lm-modal-content-bg-color); --lm-modal-full-content-bg-image: var(--lm-modal-content-bg-image); --dm-modal-full-content-text-color: var(--dm-modal-content-text-color); --dm-modal-full-content-bg-color: var(--dm-modal-content-bg-color); --dm-modal-full-content-bg-image: var(--dm-modal-content-bg-image); /* Modal close */ --modal-close-font-size: 2rem; --modal-close-width-height: 4rem; --modal-close-border-radius: 50%; --modal-close-outline-width: 2px; --modal-close-outline-type: solid; --modal-close-outline-offset: var(--button-outline-offset); --lm-modal-close-text-color: #ffffff; --lm-modal-close-bg-color: rgba(0, 0, 0, 0.7); --lm-modal-close-text-color-hover: #ffffff; --lm-modal-close-bg-color-hover: rgba(0, 0, 0, 0.6); --lm-modal-close-outline-color-focus: var(--primary-box-shadow-color); --dm-modal-close-text-color: #ffffff; --dm-modal-close-bg-color: rgba(255, 255, 255, 0.1); --dm-modal-close-text-color-hover: #ffffff; --dm-modal-close-bg-color-hover: rgba(255, 255, 255, 0.2); --dm-modal-close-outline-color-focus: var(--primary-box-shadow-color); /* --------------------------------------------------------------------------- 21. Alerts [hmv-21] --------------------------------------------------------------------------- */ --alert-padding: 1rem 2rem; --alert-border-width: var(--base-border-width); --alert-border-radius: var(--base-border-radius); --lm-alert-text-color: var(--lm-base-text-color); --lm-alert-bg-color: var(--white-bg-color); --lm-alert-bg-image: none; --lm-alert-border-color: rgba(0, 0, 0, 0.2); --dm-alert-text-color: var(--dm-base-text-color); --dm-alert-bg-color: var(--dark-color); --dm-alert-bg-image: none; --dm-alert-border-color: rgba(255, 255, 255, 0.1); --alert-heading-font-size: 1.6rem; --alert-heading-font-weight: var(--content-title-font-weight); --alert-heading-margin: 0 0 0.5rem 0; --alert-close-font-size: 1.6rem; --alert-close-padding: 0.4rem 0.6rem; --alert-close-line-height: 1; --alert-close-outline-width: 2px; --alert-close-outline-type: solid; --alert-close-outline-offset: var(--button-outline-offset); --lm-alert-close-outline-color-focus: rgba(0, 0, 0, 0.5); --dm-alert-close-outline-color-focus: rgba(255, 255, 255, 0.5); /* Sticky alerts */ --sticky-alert-width: 27rem; --sticky-alert-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.045); /* Primary, success, secondary, danger alerts. */ /* Light mode */ --lm-alert-primary-text-color: var(--dm-alert-text-color); --lm-alert-primary-bg-color: var(--primary-color-very-light); --lm-alert-primary-bg-image: none; --lm-alert-primary-border-color: var(--primary-color); --lm-alert-success-text-color: var(--lm-alert-text-color); --lm-alert-success-bg-color: var(--success-color-very-light); --lm-alert-success-bg-image: none; --lm-alert-success-border-color: var(--success-color); --lm-alert-secondary-text-color: var(--lm-alert-text-color); --lm-alert-secondary-bg-color: var(--secondary-color-very-light); --lm-alert-secondary-bg-image: none; --lm-alert-secondary-border-color: var(--secondary-color); --lm-alert-danger-text-color: var(--lm-alert-text-color); --lm-alert-danger-bg-color: var(--danger-color-very-light); --lm-alert-danger-bg-image: none; --lm-alert-danger-border-color: var(--danger-color); /* Dark mode */ --dm-alert-primary-text-color: var(--dm-alert-text-color); --dm-alert-primary-bg-color: var(--primary-color-very-dark); --dm-alert-primary-bg-image: none; --dm-alert-primary-border-color: var(--primary-color-dark); --dm-alert-success-text-color: var(--success-color); --dm-alert-success-bg-color: var(--success-color-very-dark); --dm-alert-success-bg-image: none; --dm-alert-success-border-color: var(--success-color-dark); --dm-alert-secondary-text-color: var(--secondary-color); --dm-alert-secondary-bg-color: var(--secondary-color-very-dark); --dm-alert-secondary-bg-image: none; --dm-alert-secondary-border-color: var(--secondary-color-dark); --dm-alert-danger-text-color: var(--danger-color); --dm-alert-danger-bg-color: var(--danger-color-very-dark); --dm-alert-danger-bg-image: none; --dm-alert-danger-border-color: var(--danger-color-dark); /* Filled alerts */ /* Light mode */ --lm-alert-filled-primary-text-color: var(--text-color-on-primary-color-bg); --lm-alert-filled-primary-bg-color: var(--primary-color); --lm-alert-filled-primary-bg-image: none; --lm-alert-filled-primary-border-color: var(--primary-color); --lm-alert-filled-success-text-color: var(--text-color-on-success-color-bg); --lm-alert-filled-success-bg-color: var(--success-color); --lm-alert-filled-success-bg-image: none; --lm-alert-filled-success-border-color: var(--success-color); --lm-alert-filled-secondary-text-color: var(--text-color-on-secondary-color-bg); --lm-alert-filled-secondary-bg-color: var(--secondary-color); --lm-alert-filled-secondary-bg-image: none; --lm-alert-filled-secondary-border-color: var(--secondary-color); --lm-alert-filled-danger-text-color: var(--text-color-on-danger-color-bg); --lm-alert-filled-danger-bg-color: var(--danger-color); --lm-alert-filled-danger-bg-image: none; --lm-alert-filled-danger-border-color: var(--danger-color); /* Dark mode */ --dm-alert-filled-primary-text-color: var(--text-color-on-primary-color-bg); --dm-alert-filled-primary-bg-color: var(--primary-color); --dm-alert-filled-primary-bg-image: none; --dm-alert-filled-primary-border-color: var(--primary-color); --dm-alert-filled-success-text-color: var(--text-color-on-success-color-bg); --dm-alert-filled-success-bg-color: var(--success-color); --dm-alert-filled-success-bg-image: none; --dm-alert-filled-success-border-color: var(--success-color); --dm-alert-filled-secondary-text-color: var(--text-color-on-secondary-color-bg); --dm-alert-filled-secondary-bg-color: var(--secondary-color); --dm-alert-filled-secondary-bg-image: none; --dm-alert-filled-secondary-border-color: var(--secondary-color); --dm-alert-filled-danger-text-color: var(--text-color-on-danger-color-bg); --dm-alert-filled-danger-bg-color: var(--danger-color); --dm-alert-filled-danger-bg-image: none; --dm-alert-filled-danger-border-color: var(--danger-color); /* --------------------------------------------------------------------------- 22. Navbar content [hmv-22] --------------------------------------------------------------------------- */ --navbar-container-horizontal-padding: calc(var(--content-and-card-spacing) - var(--navbar-horizontal-padding)); --navbar-container-horizontal-padding-xs: calc(var(--content-and-card-spacing-xs) - var(--navbar-horizontal-padding)); --navbar-content-horizontal-margin: 1.5rem; --lm-navbar-text-color: var(--lm-base-text-color-light); --dm-navbar-text-color: var(--dm-base-text-color-light); --navbar-link-horizontal-padding: var(--navbar-content-horizontal-margin); --lm-navbar-link-text-color: var(--lm-base-text-color); --lm-navbar-link-bg-color: transparent; --lm-navbar-link-text-color-hover: var(--primary-color); --lm-navbar-link-bg-color-hover: var(--lm-navbar-link-bg-color); --dm-navbar-link-text-color: var(--dm-base-text-color); --dm-navbar-link-bg-color: transparent; --dm-navbar-link-text-color-hover: var(--primary-color); --dm-navbar-link-bg-color-hover: var(--dm-navbar-link-bg-color); --lm-navbar-link-active-text-color: var(--primary-color); --lm-navbar-link-active-bg-color: var(--lm-navbar-link-bg-color); --lm-navbar-link-active-text-color-hover: var(--primary-color-light); --lm-navbar-link-active-bg-color-hover: var(--lm-navbar-link-bg-color-hover); --dm-navbar-link-active-text-color: var(--primary-color); --dm-navbar-link-active-bg-color: var(--dm-navbar-link-bg-color); --dm-navbar-link-active-text-color-hover: var(--primary-color-light); --dm-navbar-link-active-bg-color-hover: var(--dm-navbar-link-bg-color-hover); --navbar-brand-font-size: 2rem; --navbar-brand-font-weight: 500; --navbar-brand-image-height: 2.2rem; --navbar-brand-image-margin-right: 1rem; --lm-navbar-brand-text-color: var(--lm-base-text-color); --lm-navbar-brand-text-color-hover: var(--lm-base-text-color-light); --dm-navbar-brand-text-color: var(--dm-base-text-color); --dm-navbar-brand-text-color-hover: var(--dm-base-text-color-light); --navbar-action-button-width: 3.6rem; --navbar-action-button-horizontal-padding: 0; --navbar-input-min-width: 12rem; --navbar-input-group-min-width: 20rem; --navbar-input-min-width-xs: 10rem; --navbar-input-group-min-width-xs: 18rem; /* --------------------------------------------------------------------------- 23. Sidebar content [hmv-23] --------------------------------------------------------------------------- */ --sidebar-menu-vertical-margin: 2.5rem; --sidebar-item-horizontal-spacing: 2.5rem; --sidebar-item-vertical-spacing: 0.5rem; --sidebar-content-padding: 0; --sidebar-content-margin: var(--sidebar-menu-vertical-margin) var(--sidebar-item-horizontal-spacing); --sidebar-link-height: 3rem; --sidebar-link-padding: var(--sidebar-item-vertical-spacing) var(--sidebar-item-horizontal-spacing); --sidebar-link-margin: 0; --sidebar-link-border-width: 0; --sidebar-link-border-radius: 0; --lm-sidebar-link-text-color: var(--lm-base-text-color-light); --lm-sidebar-link-bg-color: transparent; --lm-sidebar-link-border-color: transparent; --lm-sidebar-link-text-color-hover: var(--lm-base-text-color); --lm-sidebar-link-bg-color-hover: transparent; --lm-sidebar-link-border-color-hover: transparent; --lm-sidebar-link-text-color-active: var(--primary-color); --lm-sidebar-link-bg-color-active: transparent; --lm-sidebar-link-border-color-active: transparent; --lm-sidebar-link-text-color-active-hover: var(--primary-color-light); --lm-sidebar-link-bg-color-active-hover: transparent; --lm-sidebar-link-border-color-active-hover: transparent; --dm-sidebar-link-text-color: var(--dm-base-text-color-light); --dm-sidebar-link-bg-color: transparent; --dm-sidebar-link-border-color: transparent; --dm-sidebar-link-text-color-hover: var(--dm-base-text-color); --dm-sidebar-link-bg-color-hover: transparent; --dm-sidebar-link-border-color-hover: transparent; --dm-sidebar-link-text-color-active: var(--primary-color); --dm-sidebar-link-bg-color-active: transparent; --dm-sidebar-link-border-color-active: transparent; --dm-sidebar-link-text-color-active-hover: var(--primary-color-light); --dm-sidebar-link-bg-color-active-hover: transparent; --dm-sidebar-link-border-color-active-hover: transparent; --sidebar-divider-height: 1px; --sidebar-divider-padding: 0; --sidebar-divider-margin: var(--sidebar-item-vertical-spacing) var(--sidebar-item-horizontal-spacing); --lm-sidebar-divider-bg-color: var(--lm-horizontal-rule-color); --dm-sidebar-divider-bg-color: var(--dm-horizontal-rule-color); --sidebar-title-padding: 0; --sidebar-title-margin: var(--sidebar-item-vertical-spacing) var(--sidebar-item-horizontal-spacing); --sidebar-title-font-size: 1.5rem; --sidebar-title-font-weight: var(--content-title-font-weight); --lm-sidebar-title-text-color: var(--lm-base-text-color); --dm-sidebar-title-text-color: var(--dm-base-text-color); --sidebar-icon-width-height: 3rem; --sidebar-icon-font-size: 1.6rem; --sidebar-icon-margin-right: 1rem; --sidebar-icon-border-width: 0; --sidebar-icon-border-radius: var(--base-border-radius); --lm-sidebar-icon-text-color: var(--lm-base-text-color-light); --lm-sidebar-icon-bg-color: rgba(0, 0, 0, 0.05); --lm-sidebar-icon-border-color: transparent; --lm-sidebar-icon-text-color-hover: var(--lm-base-text-color); --lm-sidebar-icon-bg-color-hover: var(--lm-sidebar-icon-bg-color); --lm-sidebar-icon-border-color-hover: var(--lm-sidebar-icon-border-color); --lm-sidebar-icon-text-color-active: var(--lm-sidebar-icon-text-color); --lm-sidebar-icon-bg-color-active: var(--lm-sidebar-icon-bg-color); --lm-sidebar-icon-border-color-active: var(--lm-sidebar-icon-border-color); --lm-sidebar-icon-text-color-active-hover: var(--lm-sidebar-icon-text-color-hover); --lm-sidebar-icon-bg-color-active-hover: var(--lm-sidebar-icon-bg-color-hover); --lm-sidebar-icon-border-color-active-hover: var(--lm-sidebar-icon-border-color-hover); --dm-sidebar-icon-text-color: var(--dm-base-text-color-light); --dm-sidebar-icon-bg-color: rgba(255, 255, 255, 0.05); --dm-sidebar-icon-border-color: transparent; --dm-sidebar-icon-text-color-hover: var(--dm-base-text-color); --dm-sidebar-icon-bg-color-hover: var(--dm-sidebar-icon-bg-color); --dm-sidebar-icon-border-color-hover: var(--dm-sidebar-icon-border-color); --dm-sidebar-icon-text-color-active: var(--dm-sidebar-icon-text-color); --dm-sidebar-icon-bg-color-active: var(--dm-sidebar-icon-bg-color); --dm-sidebar-icon-border-color-active: var(--dm-sidebar-icon-border-color); --dm-sidebar-icon-text-color-active-hover: var(--dm-sidebar-icon-text-color-hover); --dm-sidebar-icon-bg-color-active-hover: var(--dm-sidebar-icon-bg-color-hover); --dm-sidebar-icon-border-color-active-hover: var(--dm-sidebar-icon-border-color-hover); --sidebar-brand-padding: 0; --sidebar-brand-margin: var(--sidebar-item-vertical-spacing) var(--sidebar-item-horizontal-spacing); --sidebar-brand-font-size: var(--navbar-brand-font-size); --sidebar-brand-font-weight: var(--navbar-brand-font-weight); --sidebar-brand-image-height: var(--navbar-brand-image-height); --sidebar-brand-image-margin-right: var(--navbar-brand-image-margin-right); --lm-sidebar-brand-text-color: var(--lm-base-text-color); --lm-sidebar-brand-text-color-hover: var(--lm-base-text-color-light); --dm-sidebar-brand-text-color: var(--dm-base-text-color); --dm-sidebar-brand-text-color-hover: var(--dm-base-text-color-light); /* --------------------------------------------------------------------------- 24. Pagination [hmv-24] Notes: ~ By default, pagination items are styled the same as buttons. --------------------------------------------------------------------------- */ --pagination-item-padding: 0 0.5rem; --pagination-item-margin: 0 0.2rem 0.5rem 0; --pagination-item-font-size: var(--base-font-size); --pagination-item-width: 3.5rem; --pagination-item-height: var(--pagination-item-width); --pagination-item-line-height: var(--pagination-item-height); --pagination-item-border-width: var(--button-border-width); --pagination-item-border-radius: var(--button-border-radius); --large-pagination-item-padding: var(--pagination-item-padding); --large-pagination-item-margin: var(--pagination-item-margin); --large-pagination-item-font-size: var(--large-button-font-size); --large-pagination-item-width: 4.2rem; --large-pagination-item-height: var(--large-pagination-item-width); --large-pagination-item-line-height: var(--large-pagination-item-height); --small-pagination-item-padding: var(--pagination-item-padding); --small-pagination-item-margin: var(--pagination-item-margin); --small-pagination-item-font-size: var(--small-button-font-size); --small-pagination-item-width: 2.8rem; --small-pagination-item-height: var(--small-pagination-item-width); --small-pagination-item-line-height: var(--small-pagination-item-height); --lm-pagination-item-text-color: var(--lm-button-text-color); --lm-pagination-item-bg-color: var(--lm-button-bg-color); --lm-pagination-item-bg-image: var(--lm-button-bg-image); --lm-pagination-item-border-color: var(--lm-button-border-color); --lm-pagination-item-box-shadow: var(--lm-button-box-shadow); --lm-pagination-item-text-color-hover: var(--lm-button-text-color-hover); --lm-pagination-item-bg-color-hover: var(--lm-button-bg-color-hover); --lm-pagination-item-bg-image-hover: var(--lm-button-bg-image-hover); --lm-pagination-item-border-color-hover: var(--lm-button-border-color-hover); --lm-pagination-item-box-shadow-hover: var(--lm-button-box-shadow-hover); --lm-pagination-item-text-color-active: var(--lm-button-primary-text-color); --lm-pagination-item-bg-color-active: var(--lm-button-primary-bg-color); --lm-pagination-item-bg-image-active: var(--lm-button-primary-bg-image); --lm-pagination-item-border-color-active: var(--lm-button-primary-border-color); --lm-pagination-item-box-shadow-active: var(--lm-button-primary-box-shadow); --dm-pagination-item-text-color: var(--dm-button-text-color); --dm-pagination-item-bg-color: var(--dm-button-bg-color); --dm-pagination-item-bg-image: var(--dm-button-bg-image); --dm-pagination-item-border-color: var(--dm-button-border-color); --dm-pagination-item-box-shadow: var(--dm-button-box-shadow); --dm-pagination-item-text-color-hover: var(--dm-button-text-color-hover); --dm-pagination-item-bg-color-hover: var(--dm-button-bg-color-hover); --dm-pagination-item-bg-image-hover: var(--dm-button-bg-image-hover); --dm-pagination-item-border-color-hover: var(--dm-button-border-color-hover); --dm-pagination-item-box-shadow-hover: var(--dm-button-box-shadow-hover); --dm-pagination-item-text-color-active: var(--dm-button-primary-text-color); --dm-pagination-item-bg-color-active: var(--dm-button-primary-bg-color); --dm-pagination-item-bg-image-active: var(--dm-button-primary-bg-image); --dm-pagination-item-border-color-active: var(--dm-button-primary-border-color); --dm-pagination-item-box-shadow-active: var(--dm-button-primary-box-shadow); /* --------------------------------------------------------------------------- 25. Breadcrumb [hmv-25] --------------------------------------------------------------------------- */ --breadcrumb-padding: 0; --breadcrumb-border-width: 0; --breadcrumb-border-radius: 0; --lm-breadcrumb-bg-color: transparent; --lm-breadcrumb-border-color: transparent; --dm-breadcrumb-bg-color: transparent; --dm-breadcrumb-border-color: transparent; --breadcrumb-separator-content: "\002F"; --breadcrumb-separator-margin-left: 1rem; --breadcrumb-separator-margin-right: 1.5rem; /* --------------------------------------------------------------------------- 26. Tooltips [hmv-26] Notes: ~ By default, the inverses of the base colors are used. --------------------------------------------------------------------------- */ --tooltip-arrow-width: 1rem; --tooltip-arrow-height: var(--tooltip-arrow-width); --tooltip-font-size: 1.2rem; --tooltip-line-height: var(--base-line-height); --tooltip-padding: 0.5rem 1rem; --tooltip-width: 10rem; --lm-tooltip-text-color: var(--dm-base-text-color); --lm-tooltip-bg-color: var(--dark-color); --dm-tooltip-text-color: var(--lm-base-text-color); --dm-tooltip-bg-color: var(--white-bg-color); /* --------------------------------------------------------------------------- 27. Badges [hmv-27] --------------------------------------------------------------------------- */ --badge-font-size: 1.2rem; --badge-line-height: 1.2; --badge-padding: 0.2rem 0.8rem; --badge-border-width: var(--base-border-width); --badge-border-radius: var(--base-border-radius); --badge-pill-border-radius: 3rem; --lm-badge-text-color: var(--lm-base-text-color); --lm-badge-bg-color: #ffffff; --lm-badge-border-color: rgba(0, 0, 0, 0.2); --dm-badge-text-color: var(--dm-base-text-color); --dm-badge-bg-color: transparent; --dm-badge-border-color: rgba(255, 255, 255, 0.2); /* Primary, success, secondary, danger badges. */ /* Light mode */ --lm-badge-primary-text-color: var(--text-color-on-primary-color-bg); --lm-badge-primary-bg-color: var(--primary-color); --lm-badge-primary-border-color: var(--primary-color); --lm-badge-success-text-color: var(--text-color-on-success-color-bg); --lm-badge-success-bg-color: var(--success-color); --lm-badge-success-border-color: var(--success-color); --lm-badge-secondary-text-color: var(--text-color-on-secondary-color-bg); --lm-badge-secondary-bg-color: var(--secondary-color); --lm-badge-secondary-border-color: var(--secondary-color); --lm-badge-danger-text-color: var(--text-color-on-danger-color-bg); --lm-badge-danger-bg-color: var(--danger-color); --lm-badge-danger-border-color: var(--danger-color); /* Dark mode */ --dm-badge-primary-text-color: var(--text-color-on-primary-color-bg); --dm-badge-primary-bg-color: var(--primary-color); --dm-badge-primary-border-color: var(--primary-color); --dm-badge-success-text-color: var(--text-color-on-success-color-bg); --dm-badge-success-bg-color: var(--success-color); --dm-badge-success-border-color: var(--success-color); --dm-badge-secondary-text-color: var(--text-color-on-secondary-color-bg); --dm-badge-secondary-bg-color: var(--secondary-color); --dm-badge-secondary-border-color: var(--secondary-color); --dm-badge-danger-text-color: var(--text-color-on-danger-color-bg); --dm-badge-danger-bg-color: var(--danger-color); --dm-badge-danger-border-color: var(--danger-color); /* Link badges (only hover effects) */ /* Light mode */ --lm-link-badge-text-color-hover: var(--lm-badge-text-color); --lm-link-badge-bg-color-hover: var(--gray-color-very-light); --lm-link-badge-border-color-hover: var(--lm-badge-border-color); --lm-link-badge-primary-text-color-hover: var(--lm-badge-primary-text-color); --lm-link-badge-primary-bg-color-hover: var(--primary-color-light); --lm-link-badge-primary-border-color-hover: var(--primary-color-light); --lm-link-badge-success-text-color-hover: var(--lm-badge-success-text-color); --lm-link-badge-success-bg-color-hover: var(--success-color-light); --lm-link-badge-success-border-color-hover: var(--success-color-light); --lm-link-badge-secondary-text-color-hover: var(--lm-badge-secondary-text-color); --lm-link-badge-secondary-bg-color-hover: var(--secondary-color-light); --lm-link-badge-secondary-border-color-hover: var(--secondary-color-light); --lm-link-badge-danger-text-color-hover: var(--lm-badge-danger-text-color); --lm-link-badge-danger-bg-color-hover: var(--danger-color-light); --lm-link-badge-danger-border-color-hover: var(--danger-color-light); /* Dark mode */ --dm-link-badge-text-color-hover: var(--dm-badge-text-color); --dm-link-badge-bg-color-hover: rgba(255, 255, 255, 0.025); --dm-link-badge-border-color-hover: var(--dm-badge-border-color); --dm-link-badge-primary-text-color-hover: var(--dm-badge-primary-text-color); --dm-link-badge-primary-bg-color-hover: var(--primary-color-light); --dm-link-badge-primary-border-color-hover: var(--primary-color-light); --dm-link-badge-success-text-color-hover: var(--dm-badge-success-text-color); --dm-link-badge-success-bg-color-hover: var(--success-color-light); --dm-link-badge-success-border-color-hover: var(--success-color-light); --dm-link-badge-secondary-text-color-hover: var(--dm-badge-secondary-text-color); --dm-link-badge-secondary-bg-color-hover: var(--secondary-color-light); --dm-link-badge-secondary-border-color-hover: var(--secondary-color-light); --dm-link-badge-danger-text-color-hover: var(--dm-badge-danger-text-color); --dm-link-badge-danger-bg-color-hover: var(--danger-color-light); --dm-link-badge-danger-border-color-hover: var(--danger-color-light); /* --------------------------------------------------------------------------- 28. Button group [hmv-28] --------------------------------------------------------------------------- */ /* Buttons (only border colors) */ --lm-button-group-button-border-color: var(--lm-button-border-color); --lm-button-group-button-border-color-hover: var(--lm-button-border-color-hover); --lm-button-group-button-border-color-focus: var(--lm-button-border-color-focus); --dm-button-group-button-border-color: rgba(0, 0, 0, 0.3); /* Different from button */ --dm-button-group-button-border-color-hover: var(--dm-button-group-button-border-color); --dm-button-group-button-border-color-focus: var(--dm-button-group-button-border-color); --lm-button-group-button-link-border-color: var(--lm-button-group-button-border-color); --lm-button-group-button-link-border-color-hover: var(--lm-button-group-button-link-border-color); --lm-button-group-button-link-border-color-focus: var(--lm-button-group-button-link-border-color); --dm-button-group-button-link-border-color: rgba(0, 0, 0, 0.3); /* Different from button */ --dm-button-group-button-link-border-color-hover: var(--dm-button-group-button-link-border-color); --dm-button-group-button-link-border-color-focus: var(--dm-button-group-button-link-border-color); --lm-button-group-button-primary-border-color: var(--lm-button-primary-border-color); --lm-button-group-button-primary-border-color-hover: var(--lm-button-primary-border-color-hover); --lm-button-group-button-primary-border-color-focus: var(--lm-button-primary-border-color-focus); --dm-button-group-button-primary-border-color: var(--dm-button-primary-border-color); --dm-button-group-button-primary-border-color-hover: var(--dm-button-primary-border-color-hover); --dm-button-group-button-primary-border-color-focus: var(--dm-button-primary-border-color-focus); --lm-button-group-button-success-border-color: var(--lm-button-success-border-color); --lm-button-group-button-success-border-color-hover: var(--lm-button-success-border-color-hover); --lm-button-group-button-success-border-color-focus: var(--lm-button-success-border-color-focus); --dm-button-group-button-success-border-color: var(--dm-button-success-border-color); --dm-button-group-button-success-border-color-hover: var(--dm-button-success-border-color-hover); --dm-button-group-button-success-border-color-focus: var(--dm-button-success-border-color-focus); --lm-button-group-button-secondary-border-color: var(--lm-button-secondary-border-color); --lm-button-group-button-secondary-border-color-hover: var(--lm-button-secondary-border-color-hover); --lm-button-group-button-secondary-border-color-focus: var(--lm-button-secondary-border-color-focus); --dm-button-group-button-secondary-border-color: var(--dm-button-secondary-border-color); --dm-button-group-button-secondary-border-color-hover: var(--dm-button-secondary-border-color-hover); --dm-button-group-button-secondary-border-color-focus: var(--dm-button-secondary-border-color-focus); --lm-button-group-button-danger-border-color: var(--lm-button-danger-border-color); --lm-button-group-button-danger-border-color-hover: var(--lm-button-danger-border-color-hover); --lm-button-group-button-danger-border-color-focus: var(--lm-button-danger-border-color-focus); --dm-button-group-button-danger-border-color: var(--dm-button-danger-border-color); --dm-button-group-button-danger-border-color-hover: var(--dm-button-danger-border-color-hover); --dm-button-group-button-danger-border-color-focus: var(--dm-button-danger-border-color-focus); /* Button toolbar */ --button-toolbar-input-group-min-width: 20rem; --button-toolbar-input-group-min-width-xs: 18rem; /* --------------------------------------------------------------------------- 29. Collapse [hmv-29] Notes on transparency: ~ Due to border overlap in the collapse-group, either the background color, or the border-color needs to be solid, ie, without any transparency. --------------------------------------------------------------------------- */ /* Collapse header */ --collapse-header-padding: 1.2rem 2rem; --collapse-header-font-size: var(--base-font-size); --collapse-header-border-radius: var(--base-border-radius); --collapse-header-border-width: var(--base-border-width); --lm-collapse-header-text-color: var(--lm-base-text-color); --lm-collapse-header-bg-color: var(--gray-color-very-light); --lm-collapse-header-border-color: rgba(0, 0, 0, 0.2); --lm-collapse-header-box-shadow: none; --lm-collapse-header-text-color-focus: var(--lm-collapse-header-text-color); --lm-collapse-header-bg-color-focus: var(--lm-collapse-header-bg-color); --lm-collapse-header-border-color-focus: var(--lm-collapse-header-border-color); --lm-collapse-header-box-shadow-focus: var(--lm-collapse-header-box-shadow); --lm-collapse-header-outline-focus: none; --dm-collapse-header-text-color: var(--dm-base-text-color); --dm-collapse-header-bg-color: rgba(255, 255, 255, 0.02); --dm-collapse-header-border-color: var(--gray-color-very-dark); --dm-collapse-header-box-shadow: none; --dm-collapse-header-text-color-focus: var(--dm-collapse-header-text-color); --dm-collapse-header-bg-color-focus: var(--dm-collapse-header-bg-color); --dm-collapse-header-border-color-focus: var(--dm-collapse-header-border-color); --dm-collapse-header-box-shadow-focus: var(--dm-collapse-header-box-shadow); --dm-collapse-header-outline-focus: none; --lm-open-collapse-header-text-color: var(--lm-collapse-header-text-color); --lm-open-collapse-header-bg-color: var(--lm-collapse-header-bg-color); --lm-open-collapse-header-border-color: var(--lm-collapse-header-border-color); --lm-open-collapse-header-box-shadow: var(--lm-collapse-header-box-shadow); --lm-open-collapse-header-text-color-focus: var(--lm-collapse-header-text-color-focus); --lm-open-collapse-header-bg-color-focus: var(--lm-collapse-header-bg-color-focus); --lm-open-collapse-header-border-color-focus: var(--lm-collapse-header-border-color-focus); --lm-open-collapse-header-box-shadow-focus: var(--lm-collapse-header-box-shadow-focus); --lm-open-collapse-header-outline-focus: var(--lm-collapse-header-outline-focus); --dm-open-collapse-header-text-color: var(--dm-collapse-header-text-color); --dm-open-collapse-header-bg-color: var(--dm-collapse-header-bg-color); --dm-open-collapse-header-border-color: var(--dm-collapse-header-border-color); --dm-open-collapse-header-box-shadow: var(--dm-collapse-header-box-shadow); --dm-open-collapse-header-text-color-focus: var(--dm-collapse-header-text-color-focus); --dm-open-collapse-header-bg-color-focus: var(--dm-collapse-header-bg-color-focus); --dm-open-collapse-header-border-color-focus: var(--dm-collapse-header-border-color-focus); --dm-open-collapse-header-box-shadow-focus: var(--dm-collapse-header-box-shadow-focus); --dm-open-collapse-header-outline-focus: var(--dm-collapse-header-outline-focus); /* Collapse header arrow set using background image */ --collapse-header-padding-with-bg-image: 1.2rem 2rem 1.2rem 4.4rem; /* Only the padding on the left is increased to make room for the arrow */ --collapse-header-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5AgHFAwNJY24UQAAAJVJREFUKM+lk8ENgzAMRZ9hgS4SiRFgDN+6QifpCD1mDFbIIQuwASNwcaSqKsEW/5RI/1n+jiMAqvoE3sCScy50JGb+2H2/ggar3PQAVlWdesBilV2QWIYJWM1Mrz1pBy8k37QHkt8eryD5F6wHydn4zqCBoO63FAodGmvo4UKrETG3bXWbG/DymgHGWmtJKW3A7PmiB2rUYYave/NSAAAAAElFTkSuQmCC); --collapse-header-bg-size: 0.6rem; --collapse-header-bg-repeat: no-repeat; --collapse-header-bg-position: 2rem center; --open-collapse-header-padding-with-bg-image: var(--collapse-header-padding-with-bg-image); --open-collapse-header-bg-image: var(--select-bg-image); --open-collapse-header-bg-size: 1rem; --open-collapse-header-bg-repeat: var(--collapse-header-bg-repeat); --open-collapse-header-bg-position: var(--collapse-header-bg-position); /* Collapse header focus effect (::after) */ --collapse-header-focus-effect-display: block; --collapse-header-focus-effect-top: 0.2rem; --collapse-header-focus-effect-left: var(--collapse-header-focus-effect-top); --collapse-header-focus-effect-width: calc(100% - (2 * var(--collapse-header-focus-effect-left))); --collapse-header-focus-effect-height: calc(100% - (2 * var(--collapse-header-focus-effect-top))); --collapse-header-focus-effect-border-radius: var(--base-border-radius); --lm-collapse-header-focus-effect-box-shadow: inset 0 0 0 0.2rem var(--primary-color-light); --dm-collapse-header-focus-effect-box-shadow: inset 0 0 0 0.2rem var(--primary-color-dark); /* Collapse content */ --collapse-content-padding: 2rem; --collapse-content-font-size: var(--base-font-size); --collapse-content-border-radius: var(--base-border-radius); --collapse-content-border-width: var(--base-border-width); --lm-collapse-content-text-color: var(--lm-base-text-color); --lm-collapse-content-bg-color: transparent; --lm-collapse-content-border-color: var(--lm-collapse-header-border-color); --lm-collapse-content-box-shadow: none; --dm-collapse-content-text-color: var(--dm-base-text-color); --dm-collapse-content-bg-color: transparent; --dm-collapse-content-border-color: var(--dm-collapse-header-border-color); --dm-collapse-content-box-shadow: none; /* --------------------------------------------------------------------------- 30. Progress [hmv-30] --------------------------------------------------------------------------- */ --progress-height: 0.8rem; --progress-font-size: 1.2rem; --progress-line-height: 0; --progress-border-radius: 3.2rem; --lm-progress-bg-color: rgba(0, 0, 0, 0.1); --dm-progress-bg-color: rgba(255, 255, 255, 0.1); /* Progress bar */ --lm-progress-bar-text-color: #ffffff; --lm-progress-bar-bg-color: var(--primary-color); --dm-progress-bar-text-color: var(--lm-progress-bar-text-color); --dm-progress-bar-bg-color: var(--lm-progress-bar-bg-color); /* Progress group */ --progress-group-item-margin: 0.4rem; --progress-group-label-font-size: var(--base-font-size); /* Animated progress bar */ --lm-progress-bar-animated-highlight-bg-color: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3)); --lm-progress-bar-animated-highlight-dark-bg-color: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.1)); --dm-progress-bar-animated-highlight-bg-color: var(--lm-progress-bar-animated-highlight-bg-color); --dm-progress-bar-animated-highlight-dark-bg-color: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.2)); } /* ------------------------------------------------------------------------------- 0. Normalize CSS Notes: ~ Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing. ~ normalize.css | MIT License | github.com/necolas/normalize.css ~ This is a slighly customized version of normalize.css 8.0.1, specifically for dealing with Halfmoon CSS. ~ Comments have been removed for the sake of compactness. ------------------------------------------------------------------------------- */ html { line-height: 1.15; -webkit-text-size-adjust: 100%; } body { margin: 0; } main { display: block; } h1 { font-size: 2em; margin: 0.67em 0; } hr { box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace, monospace; font-size: 1em; } a { background-color: transparent; } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b, strong { font-weight: bolder; } code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { border-style: none; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { vertical-align: baseline; } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details { display: block; } summary { display: list-item; } template { display: none; } [hidden] { display: none; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /* ------------------------------------------------------------------------------- 1. Base styles [hm-01] ------------------------------------------------------------------------------- */ html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; } /* HTML font size and scaling */ html { font-size: var(--base-html-font-size); } @media (min-width: 1600px) { html { font-size: var(--base-html-font-size-1600); } } @media (min-width: 1920px) { html { font-size: var(--base-html-font-size-1920); } } /* Auto-scaling disabled */ @media (min-width: 1600px) { html.auto-scaling-disabled { font-size: var(--base-html-font-size); } } @media (min-width: 1920px) { html.auto-scaling-disabled { font-size: var(--base-html-font-size); } } /* DOM body */ body { background-color: var(--lm-base-body-bg-color); background-image: var(--lm-base-body-bg-image); color: var(--lm-base-text-color); font-size: var(--base-font-size); line-height: var(--base-line-height); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: 400; } .dark-mode { background-color: var(--dm-base-body-bg-color); background-image: var(--dm-base-body-bg-image); color: var(--dm-base-text-color); /* Anti-aliasing works best on light fonts on dark backgrounds. Otherwise, there is a loss of readability. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Horizontal rule */ hr { height: 1px; color: var(--lm-horizontal-rule-color); background-color: var(--lm-horizontal-rule-color); border: none; } .dark-mode hr { color: var(--dm-horizontal-rule-color); background-color: var(--dm-horizontal-rule-color); } /* ------------------------------------------------------------------------------- 2. Typography [hm-02] ------------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { margin-top: 1rem; margin-bottom: 2rem; font-weight: var(--heading-font-weight); } h1 { font-size: 4rem; line-height: 1.3; } h2 { font-size: 3.6rem; line-height: 1.35; } h3 { font-size: 3rem; line-height: 1.4; } h4 { font-size: 2.4rem; line-height: 1.45; } h5 { font-size: 1.8rem; } h6 { font-size: 1.5rem; } /* ------------------------------------------------------------------------------- 3. Scrollbars [hm-03] Notes: ~ Any scrollbars on the body itself is not affected. This is because the page-wrapper is always expected, as the entire framework is built around it. ~ Only styled on screens larger than 768px, because mobiles and tablets have disappearing scrollbars, which look great most of the time. ~ The webkit scrollbars work on webkit based browsers, such as Chrome, Safari, Brave, and the new Microsoft Edge. ~ The custom CSS scrollbars work only on Firefox as of 2020. It is a very new specification. ------------------------------------------------------------------------------- */ @media (min-width: 769px) { /* Base scrollbar */ .with-custom-webkit-scrollbars *::-webkit-scrollbar { width: var(--webkit-scrollbar-width-height); height: var(--webkit-scrollbar-width-height); background-color: var(--lm-webkit-scrollbar-bg-color); } .dark-mode.with-custom-webkit-scrollbars *::-webkit-scrollbar { background-color: var(--dm-webkit-scrollbar-bg-color); } .with-custom-webkit-scrollbars *::-webkit-scrollbar-track:vertical { border-left: var(--webkit-scrollbar-track-border-width) solid var(--lm-webkit-scrollbar-track-border-color); } .with-custom-webkit-scrollbars *::-webkit-scrollbar-track:horizontal { border-top: var(--webkit-scrollbar-track-border-width) solid var(--lm-webkit-scrollbar-track-border-color); } .dark-mode.with-custom-webkit-scrollbars *::-webkit-scrollbar-track { border-color: var(--dm-webkit-scrollbar-track-border-color); } .with-custom-webkit-scrollbars *::-webkit-scrollbar-thumb { min-width: var(--webkit-scrollbar-thumb-min-width-height); min-height: var(--webkit-scrollbar-thumb-min-width-height); background-color: var(--lm-webkit-scrollbar-thumb-bg-color); border: var(--webkit-scrollbar-thumb-border-width) solid var(--lm-webkit-scrollbar-thumb-border-color); -moz-background-clip: content; /* Firefox 3.6 */ -webkit-background-clip: content; /* Safari 4? Chrome 6? */ background-clip: content-box; border-radius: var(--webkit-scrollbar-thumb-border-radius); } .with-custom-webkit-scrollbars *::-webkit-scrollbar-thumb:hover { background-color: var(--lm-webkit-scrollbar-thumb-bg-color-hover); border-color: var(--lm-webkit-scrollbar-thumb-border-color-hover); } .dark-mode.with-custom-webkit-scrollbars *::-webkit-scrollbar-thumb { background-color: var(--dm-webkit-scrollbar-thumb-bg-color); border-color: var(--dm-webkit-scrollbar-thumb-border-color); } .dark-mode.with-custom-webkit-scrollbars *::-webkit-scrollbar-thumb:hover { background-color: var(--dm-webkit-scrollbar-thumb-bg-color-hover); border-color: var(--dm-webkit-scrollbar-thumb-border-color-hover); } .with-custom-webkit-scrollbars *::-webkit-scrollbar-corner { background-color: var(--lm-webkit-scrollbar-corner-bg-color); border-left: var(--webkit-scrollbar-corner-border-width) solid var(--lm-webkit-scrollbar-corner-border-color); border-top: var(--webkit-scrollbar-corner-border-width) solid var(--lm-webkit-scrollbar-corner-border-color); } .dark-mode.with-custom-webkit-scrollbars *::-webkit-scrollbar-corner { background-color: var(--dm-webkit-scrollbar-corner-bg-color); border-color: var(--dm-webkit-scrollbar-corner-border-color); } .with-custom-css-scrollbars * { scrollbar-width: var(--css-scrollbar-width); scrollbar-color: var(--lm-css-scrollbar-color); } .dark-mode.with-custom-css-scrollbars * { scrollbar-color: var(--dm-css-scrollbar-color); } /* Sidebar scrollbar */ .with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar { width: var(--sidebar-webkit-scrollbar-width-height); height: var(--sidebar-webkit-scrollbar-width-height); background-color: var(--lm-sidebar-webkit-scrollbar-bg-color); } .dark-mode.with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar { background-color: var(--dm-sidebar-webkit-scrollbar-bg-color); } .with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-track { border-width: var(--sidebar-webkit-scrollbar-track-border-width); border-color: var(--lm-sidebar-webkit-scrollbar-track-border-color); } .dark-mode.with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-track { border-color: var(--dm-sidebar-webkit-scrollbar-track-border-color); } .with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-thumb { background-color: var(--lm-sidebar-webkit-scrollbar-thumb-bg-color); border-width: var(--sidebar-webkit-scrollbar-thumb-border-width); border-color: var(--lm-sidebar-webkit-scrollbar-thumb-border-color); border-radius: var(--sidebar-webkit-scrollbar-thumb-border-radius); } .with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-thumb:hover { background-color: var(--lm-sidebar-webkit-scrollbar-thumb-bg-color-hover); border-color: var(--lm-sidebar-webkit-scrollbar-thumb-border-color-hover); } .dark-mode.with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-thumb { background-color: var(--dm-sidebar-webkit-scrollbar-thumb-bg-color); border-color: var(--dm-sidebar-webkit-scrollbar-thumb-border-color); } .dark-mode.with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-thumb:hover { background-color: var(--dm-sidebar-webkit-scrollbar-thumb-bg-color-hover); border-color: var(--dm-sidebar-webkit-scrollbar-thumb-border-color-hover); } .with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-corner { background-color: var(--lm-sidebar-webkit-scrollbar-corner-bg-color); border-width: var(--sidebar-webkit-scrollbar-corner-border-width); border-color: var(--lm-sidebar-webkit-scrollbar-corner-border-color); } .dark-mode.with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-corner { background-color: var(--dm-sidebar-webkit-scrollbar-corner-bg-color); border-color: var(--dm-sidebar-webkit-scrollbar-corner-border-color); } .with-custom-css-scrollbars .sidebar { scrollbar-width: var(--sidebar-css-scrollbar-width); scrollbar-color: var(--lm-sidebar-css-scrollbar-color); } .dark-mode.with-custom-css-scrollbars .sidebar { scrollbar-color: var(--dm-sidebar-css-scrollbar-color); } /* Modal scrollbar */ .with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar { width: var(--modal-webkit-scrollbar-width-height); height: var(--modal-webkit-scrollbar-width-height); background-color: var(--lm-modal-webkit-scrollbar-bg-color); } .dark-mode.with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar { background-color: var(--dm-modal-webkit-scrollbar-bg-color); } .with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-track { border-width: var(--modal-webkit-scrollbar-track-border-width); border-color: var(--lm-modal-webkit-scrollbar-track-border-color); } .dark-mode.with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-track { border-color: var(--dm-modal-webkit-scrollbar-track-border-color); } .with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-thumb { background-color: var(--lm-modal-webkit-scrollbar-thumb-bg-color); border-width: var(--modal-webkit-scrollbar-thumb-border-width); border-color: var(--lm-modal-webkit-scrollbar-thumb-border-color); border-radius: var(--modal-webkit-scrollbar-thumb-border-radius); } .with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-thumb:hover { background-color: var(--lm-modal-webkit-scrollbar-thumb-bg-color-hover); border-color: var(--lm-modal-webkit-scrollbar-thumb-border-color-hover); } .dark-mode.with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-thumb { background-color: var(--dm-modal-webkit-scrollbar-thumb-bg-color); border-color: var(--dm-modal-webkit-scrollbar-thumb-border-color); } .dark-mode.with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-thumb:hover { background-color: var(--dm-modal-webkit-scrollbar-thumb-bg-color-hover); border-color: var(--dm-modal-webkit-scrollbar-thumb-border-color-hover); } .with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-corner { background-color: var(--lm-modal-webkit-scrollbar-corner-bg-color); border-width: var(--modal-webkit-scrollbar-corner-border-width); border-color: var(--lm-modal-webkit-scrollbar-corner-border-color); } .dark-mode.with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-corner { background-color: var(--dm-modal-webkit-scrollbar-corner-bg-color); border-color: var(--dm-modal-webkit-scrollbar-corner-border-color); } .with-custom-css-scrollbars .modal-dialog { scrollbar-width: var(--modal-css-scrollbar-width); scrollbar-color: var(--lm-modal-css-scrollbar-color); } .dark-mode.with-custom-css-scrollbars .modal-dialog { scrollbar-color: var(--dm-modal-css-scrollbar-color); } /* Full screen modal scrollbar */ .with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar { width: var(--modal-full-webkit-scrollbar-width-height); height: var(--modal-full-webkit-scrollbar-width-height); background-color: var(--lm-modal-full-webkit-scrollbar-bg-color); } .dark-mode.with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar { background-color: var(--dm-modal-full-webkit-scrollbar-bg-color); } .with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-track { border-width: var(--modal-full-webkit-scrollbar-track-border-width); border-color: var(--lm-modal-full-webkit-scrollbar-track-border-color); } .dark-mode.with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-track { border-color: var(--dm-modal-full-webkit-scrollbar-track-border-color); } .with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-thumb { background-color: var(--lm-modal-full-webkit-scrollbar-thumb-bg-color); border-width: var(--modal-full-webkit-scrollbar-thumb-border-width); border-color: var(--lm-modal-full-webkit-scrollbar-thumb-border-color); border-radius: var(--modal-full-webkit-scrollbar-thumb-border-radius); } .with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-thumb:hover { background-color: var(--lm-modal-full-webkit-scrollbar-thumb-bg-color-hover); border-color: var(--lm-modal-full-webkit-scrollbar-thumb-border-color-hover); } .dark-mode.with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-thumb { background-color: var(--dm-modal-full-webkit-scrollbar-thumb-bg-color); border-color: var(--dm-modal-full-webkit-scrollbar-thumb-border-color); } .dark-mode.with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-thumb:hover { background-color: var(--dm-modal-full-webkit-scrollbar-thumb-bg-color-hover); border-color: var(--dm-modal-full-webkit-scrollbar-thumb-border-color-hover); } .with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-corner { background-color: var(--lm-modal-full-webkit-scrollbar-corner-bg-color); border-width: var(--modal-full-webkit-scrollbar-corner-border-width); border-color: var(--lm-modal-full-webkit-scrollbar-corner-border-color); } .dark-mode.with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-corner { background-color: var(--dm-modal-full-webkit-scrollbar-corner-bg-color); border-color: var(--dm-modal-full-webkit-scrollbar-corner-border-color); } .with-custom-css-scrollbars .modal-full .modal-dialog { scrollbar-width: var(--modal-full-css-scrollbar-width); scrollbar-color: var(--lm-modal-full-css-scrollbar-color); } .dark-mode.with-custom-css-scrollbars .modal-full .modal-dialog { scrollbar-color: var(--dm-modal-full-css-scrollbar-color); } /* Card scrollbar */ .with-custom-webkit-scrollbars .card::-webkit-scrollbar { width: var(--card-webkit-scrollbar-width-height); height: var(--card-webkit-scrollbar-width-height); background-color: var(--lm-card-webkit-scrollbar-bg-color); } .dark-mode.with-custom-webkit-scrollbars .card::-webkit-scrollbar { background-color: var(--dm-card-webkit-scrollbar-bg-color); } .with-custom-webkit-scrollbars .card::-webkit-scrollbar-track { border-width: var(--card-webkit-scrollbar-track-border-width); border-color: var(--lm-card-webkit-scrollbar-track-border-color); } .dark-mode.with-custom-webkit-scrollbars .card::-webkit-scrollbar-track { border-color: var(--dm-card-webkit-scrollbar-track-border-color); } .with-custom-webkit-scrollbars .card::-webkit-scrollbar-thumb { background-color: var(--lm-card-webkit-scrollbar-thumb-bg-color); border-width: var(--card-webkit-scrollbar-thumb-border-width); border-color: var(--lm-card-webkit-scrollbar-thumb-border-color); border-radius: var(--card-webkit-scrollbar-thumb-border-radius); } .with-custom-webkit-scrollbars .card::-webkit-scrollbar-thumb:hover { background-color: var(--lm-card-webkit-scrollbar-thumb-bg-color-hover); border-color: var(--lm-card-webkit-scrollbar-thumb-border-color-hover); } .dark-mode.with-custom-webkit-scrollbars .card::-webkit-scrollbar-thumb { background-color: var(--dm-card-webkit-scrollbar-thumb-bg-color); border-color: var(--dm-card-webkit-scrollbar-thumb-border-color); } .dark-mode.with-custom-webkit-scrollbars .card::-webkit-scrollbar-thumb:hover { background-color: var(--dm-card-webkit-scrollbar-thumb-bg-color-hover); border-color: var(--dm-card-webkit-scrollbar-thumb-border-color-hover); } .with-custom-webkit-scrollbars .card::-webkit-scrollbar-corner { background-color: var(--lm-card-webkit-scrollbar-corner-bg-color); border-width: var(--card-webkit-scrollbar-corner-border-width); border-color: var(--lm-card-webkit-scrollbar-corner-border-color); } .dark-mode.with-custom-webkit-scrollbars .card::-webkit-scrollbar-corner { background-color: var(--dm-card-webkit-scrollbar-corner-bg-color); border-color: var(--dm-card-webkit-scrollbar-corner-border-color); } .with-custom-css-scrollbars .card { scrollbar-width: var(--card-css-scrollbar-width); scrollbar-color: var(--lm-card-css-scrollbar-color); } .dark-mode.with-custom-css-scrollbars .card { scrollbar-color: var(--dm-card-css-scrollbar-color); } /* CSS scrollbar with transparent track (utility class) */ .with-custom-css-scrollbars .css-scrollbar-transparent-track { scrollbar-width: var(--utility-transparent-track-css-scrollbar-width) !important; scrollbar-color: var(--lm-utility-transparent-track-css-scrollbar-color) !important; } .dark-mode.with-custom-css-scrollbars .css-scrollbar-transparent-track { scrollbar-color: var(--dm-utility-transparent-track-css-scrollbar-color) !important; } } /* ------------------------------------------------------------------------------- 4. Layout [hm-04] Notes: ~ The following section contains the position, width, height, and bg color related styles of the page-wrapper, sticky-alerts, navbars, sidebar, and content-wrapper. These are grouped together because reading them all at once in serial makes it quite easy to understand how pages are structured. ~ The styles of the children of the above elements can be found in their own sections of this stylesheet. These sections are: ~ 14. Alerts ~ 15. Navbar content ~ 16. Sidebar content ~ The page-wrapper can have additional helper classes which automatically fixes the positions and the sizes of the children elements. For example, .page-wrapper.with-navbar will automatically push the content-wrapper down by an amount which is equal to the height of the navbar, in order to make space for the navbar. ------------------------------------------------------------------------------- */ html, body { position: absolute; height: 100%; width: 100%; margin: 0; padding: 0; left: 0; top: 0; } /* Page wrapper */ .page-wrapper { position: absolute; height: 100%; width: 100%; overflow: hidden; } /* Sticky alerts */ .sticky-alerts { position: fixed; top: var(--sticky-alerts-top); right: var(--sticky-alerts-right); z-index: 100; /* Can be used on top of modals */ } /* Navbar */ .navbar { position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-pack: start; justify-content: flex-start; width: 100%; height: var(--navbar-height); padding-left: var(--navbar-horizontal-padding); padding-right: var(--navbar-horizontal-padding); background-color: var(--lm-navbar-bg-color); background-image: var(--lm-navbar-bg-image); border-bottom: var(--navbar-border-width) solid var(--lm-navbar-border-color); -moz-box-shadow: var(--lm-navbar-box-shadow); -webkit-box-shadow: var(--lm-navbar-box-shadow); box-shadow: var(--lm-navbar-box-shadow); } .dark-mode .navbar { background-color: var(--dm-navbar-bg-color); background-image: var(--dm-navbar-bg-image); border-color: var(--dm-navbar-border-color); -moz-box-shadow: var(--dm-navbar-box-shadow); -webkit-box-shadow: var(--dm-navbar-box-shadow); box-shadow: var(--dm-navbar-box-shadow); } .navbar.navbar-fixed-bottom { height: var(--navbar-fixed-bottom-height); border-bottom: none; border-top: var(--navbar-border-width) solid var(--lm-navbar-border-color); -moz-box-shadow: var(--lm-navbar-fixed-bottom-box-shadow); -webkit-box-shadow: var(--lm-navbar-fixed-bottom-box-shadow); box-shadow: var(--lm-navbar-fixed-bottom-box-shadow); } .dark-mode .navbar.navbar-fixed-bottom { border-color: var(--dm-navbar-border-color); -moz-box-shadow: var(--dm-navbar-fixed-bottom-box-shadow); -webkit-box-shadow: var(--dm-navbar-fixed-bottom-box-shadow); box-shadow: var(--dm-navbar-fixed-bottom-box-shadow); } .navbar.navbar-static-bottom { border-bottom: none; border-top: var(--navbar-border-width) solid var(--lm-navbar-border-color); -moz-box-shadow: var(--lm-navbar-static-bottom-box-shadow); -webkit-box-shadow: var(--lm-navbar-static-bottom-box-shadow); box-shadow: var(--lm-navbar-static-bottom-box-shadow); } .dark-mode .navbar.navbar-static-bottom { border-color: var(--dm-navbar-border-color); -moz-box-shadow: var(--dm-navbar-static-bottom-box-shadow); -webkit-box-shadow: var(--dm-navbar-static-bottom-box-shadow); box-shadow: var(--dm-navbar-static-bottom-box-shadow); } .page-wrapper > .navbar { position: fixed; left: 0; z-index: 40; display: none; } .page-wrapper > .navbar:not(.navbar-fixed-bottom) { top: 0; } .page-wrapper.with-navbar > .navbar:not(.navbar-fixed-bottom) { display: -ms-flexbox; display: flex; } .page-wrapper > .navbar.navbar-fixed-bottom { bottom: 0; } .page-wrapper.with-navbar-fixed-bottom > .navbar.navbar-fixed-bottom { display: -ms-flexbox; display: flex; } /* Sidebar */ .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: var(--sidebar-width); max-width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; z-index: 20; background-color: var(--lm-sidebar-bg-color); background-image: var(--lm-sidebar-bg-image); border-right: var(--sidebar-border-width) solid var(--lm-sidebar-border-color); -moz-box-shadow: var(--lm-sidebar-box-shadow); -webkit-box-shadow: var(--lm-sidebar-box-shadow); box-shadow: var(--lm-sidebar-box-shadow); } .dark-mode .sidebar { background-color: var(--dm-sidebar-bg-color); background-image: var(--dm-sidebar-bg-image); border-color: var(--dm-sidebar-border-color); -moz-box-shadow: var(--dm-sidebar-box-shadow); -webkit-box-shadow: var(--dm-sidebar-box-shadow); box-shadow: var(--dm-sidebar-box-shadow); } .page-wrapper > .sidebar { display: none; } .page-wrapper.with-sidebar > .sidebar { display: block; } /* Content wrapper */ .content-wrapper { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; overflow: auto; } /* Page wrapper helper classes */ /* With navbar */ .page-wrapper.with-navbar > .sticky-alerts { top: var(--navbar-height); } .page-wrapper.with-navbar > .content-wrapper, .page-wrapper.with-navbar > .sidebar { top: var(--navbar-height); height: calc(100% - var(--navbar-height)); } /* With sidebar */ .page-wrapper.with-sidebar > .content-wrapper { left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); } @media (max-width: 768px) { .page-wrapper.with-sidebar > .content-wrapper { width: 100%; } } /* Hidden sidebar */ .page-wrapper.with-sidebar[data-sidebar-hidden] > .sidebar { left: -100%; } .page-wrapper.with-sidebar[data-sidebar-hidden] > .content-wrapper { width: 100%; left: 0; } /* With navbar fixed to bottom */ .page-wrapper.with-navbar-fixed-bottom > .content-wrapper, .page-wrapper.with-navbar-fixed-bottom > .sidebar { bottom: var(--navbar-fixed-bottom-height); height: calc(100% - var(--navbar-fixed-bottom-height)); } /* With navbar and navbar fixed to bottom */ .page-wrapper.with-navbar.with-navbar-fixed-bottom > .content-wrapper, .page-wrapper.with-navbar.with-navbar-fixed-bottom > .sidebar { top: var(--navbar-height); bottom: var(--navbar-fixed-bottom-height); height: calc(100% - var(--navbar-height) - var(--navbar-fixed-bottom-height)); } /* Full height sidebar */ .page-wrapper.with-sidebar[data-sidebar-type~="full-height"] > .sidebar { height: 100%; top: 0; } .page-wrapper.with-sidebar[data-sidebar-type~="full-height"] > .navbar:not(.navbar-fixed-bottom), .page-wrapper.with-sidebar[data-sidebar-type~="full-height"] > .navbar.navbar-fixed-bottom { left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); } @media (max-width: 768px) { .page-wrapper.with-sidebar[data-sidebar-type~="full-height"] > .navbar:not(.navbar-fixed-bottom), .page-wrapper.with-sidebar[data-sidebar-type~="full-height"] > .navbar.navbar-fixed-bottom { width: 100%; } } .page-wrapper.with-sidebar[data-sidebar-type~="full-height"][data-sidebar-hidden] > .navbar:not(.navbar-fixed-bottom), .page-wrapper.with-sidebar[data-sidebar-type~="full-height"][data-sidebar-hidden] > .navbar.navbar-fixed-bottom { left: 0; width: 100%; } /* Overlayed sidebar */ .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-all"] > .navbar:not(.navbar-fixed-bottom), .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-all"] > .content-wrapper, .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-all"] > .navbar.navbar-fixed-bottom { left: 0; width: 100%; } .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-all"] > .sidebar { height: 100%; top: 0; z-index: 50; } .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-all"] > .sidebar-overlay { position: absolute; height: 100%; width: 100%; z-index: 45; background-color: var(--sidebar-overlay-bg-color); } .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-all"][data-sidebar-hidden] > .sidebar-overlay { display: none; } @media (max-width: 768px) { .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-sm-and-down"] > .navbar:not(.navbar-fixed-bottom), .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-sm-and-down"] > .content-wrapper, .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-sm-and-down"] > .navbar.navbar-fixed-bottom { left: 0; width: 100%; } .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-sm-and-down"] > .sidebar { height: 100%; top: 0; z-index: 50; } .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-sm-and-down"] > .sidebar-overlay { position: absolute; height: 100%; width: 100%; z-index: 45; background-color: var(--sidebar-overlay-bg-color); } .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-sm-and-down"][data-sidebar-hidden] > .sidebar-overlay { display: none; } } /* With transitions (for sidebar toggles) */ .page-wrapper.with-transitions.with-sidebar > .sidebar { -webkit-transition: left .4s cubic-bezier(.25, .8, .25, 1); transition: left .4s cubic-bezier(.25, .8, .25, 1); } .page-wrapper.with-transitions.with-sidebar .content-wrapper, .page-wrapper.with-transitions.with-sidebar[data-sidebar-type~="full-height"] > .navbar:not(.navbar-fixed-bottom), .page-wrapper.with-transitions.with-sidebar[data-sidebar-type~="full-height"] > .navbar.navbar-fixed-bottom { -webkit-transition: width .4s cubic-bezier(.25, .8, .25, 1), left .4s cubic-bezier(.25, .8, .25, 1); transition: width .4s cubic-bezier(.25, .8, .25, 1), left .4s cubic-bezier(.25, .8, .25, 1); } /* Janky scroll fix (for Safari) */ .content-wrapper, .sidebar { -webkit-overflow-scrolling: touch; } /* ------------------------------------------------------------------------------- 5. Page building (containers, columns, content and card) [hm-05] ------------------------------------------------------------------------------- */ /* Containers */ .container, .container-sm, .container-md, .container-lg, .container-xl, .container-fluid { margin-left: auto; margin-right: auto; } .container-fluid { width: var(--container-fluid-width); } .container, .container-sm, .container-md, .container-lg, .container-xl { width: var(--container-width); } @media (min-width: 577px) { .container, .container-sm { max-width: var(--container-sm-max-width); } } @media (min-width: 769px) { .container, .container-sm, .container-md { max-width: var(--container-md-max-width); } } @media (min-width: 993px) { .container, .container-sm, .container-md, .container-lg { max-width: var(--container-lg-max-width); } } @media (min-width: 1201px) { .container, .container-sm, .container-md, .container-lg, .container-xl { max-width: var(--container-xl-max-width); } } /* Columns */ .row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto { position: relative; width: 100%; } .col { -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-auto { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; } .col-1 { -webkit-box-flex: 0; -webkit-flex: 0 0 8.3333333333%; -ms-flex: 0 0 8.3333333333%; flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .col-2 { -webkit-box-flex: 0; -webkit-flex: 0 0 16.6666666667%; -ms-flex: 0 0 16.6666666667%; flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-3 { -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-4 { -webkit-box-flex: 0; -webkit-flex: 0 0 33.3333333333%; -ms-flex: 0 0 33.3333333333%; flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .col-5 { -webkit-box-flex: 0; -webkit-flex: 0 0 41.6666666667%; -ms-flex: 0 0 41.6666666667%; flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .col-6 { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-7 { -webkit-box-flex: 0; -webkit-flex: 0 0 58.3333333333%; -ms-flex: 0 0 58.3333333333%; flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .col-8 { -webkit-box-flex: 0; -webkit-flex: 0 0 66.6666666667%; -ms-flex: 0 0 66.6666666667%; flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .col-9 { -webkit-box-flex: 0; -webkit-flex: 0 0 75%; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-10 { -webkit-box-flex: 0; -webkit-flex: 0 0 83.3333333333%; -ms-flex: 0 0 83.3333333333%; flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .col-11 { -webkit-box-flex: 0; -webkit-flex: 0 0 91.6666666667%; -ms-flex: 0 0 91.6666666667%; flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .col-12 { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .order-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -ms-flex-order: -1; order: -1; } .order-last { -webkit-box-ordinal-group: 14; -webkit-order: 13; -ms-flex-order: 13; order: 13; } .order-0 { -webkit-box-ordinal-group: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0; } .order-1 { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; } .order-2 { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; } .order-3 { -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; } .order-4 { -webkit-box-ordinal-group: 5; -webkit-order: 4; -ms-flex-order: 4; order: 4; } .order-5 { -webkit-box-ordinal-group: 6; -webkit-order: 5; -ms-flex-order: 5; order: 5; } .order-6 { -webkit-box-ordinal-group: 7; -webkit-order: 6; -ms-flex-order: 6; order: 6; } .order-7 { -webkit-box-ordinal-group: 8; -webkit-order: 7; -ms-flex-order: 7; order: 7; } .order-8 { -webkit-box-ordinal-group: 9; -webkit-order: 8; -ms-flex-order: 8; order: 8; } .order-9 { -webkit-box-ordinal-group: 10; -webkit-order: 9; -ms-flex-order: 9; order: 9; } .order-10 { -webkit-box-ordinal-group: 11; -webkit-order: 10; -ms-flex-order: 10; order: 10; } .order-11 { -webkit-box-ordinal-group: 12; -webkit-order: 11; -ms-flex-order: 11; order: 11; } .order-12 { -webkit-box-ordinal-group: 13; -webkit-order: 12; -ms-flex-order: 12; order: 12; } .offset-1 { margin-left: 8.3333333333%; } .offset-2 { margin-left: 16.6666666667%; } .offset-3 { margin-left: 25%; } .offset-4 { margin-left: 33.3333333333%; } .offset-5 { margin-left: 41.6666666667%; } .offset-6 { margin-left: 50%; } .offset-7 { margin-left: 58.3333333333%; } .offset-8 { margin-left: 66.6666666667%; } .offset-9 { margin-left: 75%; } .offset-10 { margin-left: 83.3333333333%; } .offset-11 { margin-left: 91.6666666667%; } @media (min-width: 577px) { .col-sm { -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-sm-auto { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; } .col-sm-1 { -webkit-box-flex: 0; -webkit-flex: 0 0 8.3333333333%; -ms-flex: 0 0 8.3333333333%; flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .col-sm-2 { -webkit-box-flex: 0; -webkit-flex: 0 0 16.6666666667%; -ms-flex: 0 0 16.6666666667%; flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-sm-3 { -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-sm-4 { -webkit-box-flex: 0; -webkit-flex: 0 0 33.3333333333%; -ms-flex: 0 0 33.3333333333%; flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .col-sm-5 { -webkit-box-flex: 0; -webkit-flex: 0 0 41.6666666667%; -ms-flex: 0 0 41.6666666667%; flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .col-sm-6 { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-sm-7 { -webkit-box-flex: 0; -webkit-flex: 0 0 58.3333333333%; -ms-flex: 0 0 58.3333333333%; flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .col-sm-8 { -webkit-box-flex: 0; -webkit-flex: 0 0 66.6666666667%; -ms-flex: 0 0 66.6666666667%; flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .col-sm-9 { -webkit-box-flex: 0; -webkit-flex: 0 0 75%; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-sm-10 { -webkit-box-flex: 0; -webkit-flex: 0 0 83.3333333333%; -ms-flex: 0 0 83.3333333333%; flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .col-sm-11 { -webkit-box-flex: 0; -webkit-flex: 0 0 91.6666666667%; -ms-flex: 0 0 91.6666666667%; flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .col-sm-12 { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .order-sm-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -ms-flex-order: -1; order: -1; } .order-sm-last { -webkit-box-ordinal-group: 14; -webkit-order: 13; -ms-flex-order: 13; order: 13; } .order-sm-0 { -webkit-box-ordinal-group: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0; } .order-sm-1 { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; } .order-sm-2 { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; } .order-sm-3 { -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; } .order-sm-4 { -webkit-box-ordinal-group: 5; -webkit-order: 4; -ms-flex-order: 4; order: 4; } .order-sm-5 { -webkit-box-ordinal-group: 6; -webkit-order: 5; -ms-flex-order: 5; order: 5; } .order-sm-6 { -webkit-box-ordinal-group: 7; -webkit-order: 6; -ms-flex-order: 6; order: 6; } .order-sm-7 { -webkit-box-ordinal-group: 8; -webkit-order: 7; -ms-flex-order: 7; order: 7; } .order-sm-8 { -webkit-box-ordinal-group: 9; -webkit-order: 8; -ms-flex-order: 8; order: 8; } .order-sm-9 { -webkit-box-ordinal-group: 10; -webkit-order: 9; -ms-flex-order: 9; order: 9; } .order-sm-10 { -webkit-box-ordinal-group: 11; -webkit-order: 10; -ms-flex-order: 10; order: 10; } .order-sm-11 { -webkit-box-ordinal-group: 12; -webkit-order: 11; -ms-flex-order: 11; order: 11; } .order-sm-12 { -webkit-box-ordinal-group: 13; -webkit-order: 12; -ms-flex-order: 12; order: 12; } .offset-sm-0 { margin-left: 0; } .offset-sm-1 { margin-left: 8.3333333333%; } .offset-sm-2 { margin-left: 16.6666666667%; } .offset-sm-3 { margin-left: 25%; } .offset-sm-4 { margin-left: 33.3333333333%; } .offset-sm-5 { margin-left: 41.6666666667%; } .offset-sm-6 { margin-left: 50%; } .offset-sm-7 { margin-left: 58.3333333333%; } .offset-sm-8 { margin-left: 66.6666666667%; } .offset-sm-9 { margin-left: 75%; } .offset-sm-10 { margin-left: 83.3333333333%; } .offset-sm-11 { margin-left: 91.6666666667%; } } @media (min-width: 769px) { .col-md { -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-md-auto { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; } .col-md-1 { -webkit-box-flex: 0; -webkit-flex: 0 0 8.3333333333%; -ms-flex: 0 0 8.3333333333%; flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .col-md-2 { -webkit-box-flex: 0; -webkit-flex: 0 0 16.6666666667%; -ms-flex: 0 0 16.6666666667%; flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-md-3 { -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-md-4 { -webkit-box-flex: 0; -webkit-flex: 0 0 33.3333333333%; -ms-flex: 0 0 33.3333333333%; flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .col-md-5 { -webkit-box-flex: 0; -webkit-flex: 0 0 41.6666666667%; -ms-flex: 0 0 41.6666666667%; flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .col-md-6 { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-md-7 { -webkit-box-flex: 0; -webkit-flex: 0 0 58.3333333333%; -ms-flex: 0 0 58.3333333333%; flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .col-md-8 { -webkit-box-flex: 0; -webkit-flex: 0 0 66.6666666667%; -ms-flex: 0 0 66.6666666667%; flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .col-md-9 { -webkit-box-flex: 0; -webkit-flex: 0 0 75%; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-md-10 { -webkit-box-flex: 0; -webkit-flex: 0 0 83.3333333333%; -ms-flex: 0 0 83.3333333333%; flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .col-md-11 { -webkit-box-flex: 0; -webkit-flex: 0 0 91.6666666667%; -ms-flex: 0 0 91.6666666667%; flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .col-md-12 { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .order-md-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -ms-flex-order: -1; order: -1; } .order-md-last { -webkit-box-ordinal-group: 14; -webkit-order: 13; -ms-flex-order: 13; order: 13; } .order-md-0 { -webkit-box-ordinal-group: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0; } .order-md-1 { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; } .order-md-2 { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; } .order-md-3 { -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; } .order-md-4 { -webkit-box-ordinal-group: 5; -webkit-order: 4; -ms-flex-order: 4; order: 4; } .order-md-5 { -webkit-box-ordinal-group: 6; -webkit-order: 5; -ms-flex-order: 5; order: 5; } .order-md-6 { -webkit-box-ordinal-group: 7; -webkit-order: 6; -ms-flex-order: 6; order: 6; } .order-md-7 { -webkit-box-ordinal-group: 8; -webkit-order: 7; -ms-flex-order: 7; order: 7; } .order-md-8 { -webkit-box-ordinal-group: 9; -webkit-order: 8; -ms-flex-order: 8; order: 8; } .order-md-9 { -webkit-box-ordinal-group: 10; -webkit-order: 9; -ms-flex-order: 9; order: 9; } .order-md-10 { -webkit-box-ordinal-group: 11; -webkit-order: 10; -ms-flex-order: 10; order: 10; } .order-md-11 { -webkit-box-ordinal-group: 12; -webkit-order: 11; -ms-flex-order: 11; order: 11; } .order-md-12 { -webkit-box-ordinal-group: 13; -webkit-order: 12; -ms-flex-order: 12; order: 12; } .offset-md-0 { margin-left: 0; } .offset-md-1 { margin-left: 8.3333333333%; } .offset-md-2 { margin-left: 16.6666666667%; } .offset-md-3 { margin-left: 25%; } .offset-md-4 { margin-left: 33.3333333333%; } .offset-md-5 { margin-left: 41.6666666667%; } .offset-md-6 { margin-left: 50%; } .offset-md-7 { margin-left: 58.3333333333%; } .offset-md-8 { margin-left: 66.6666666667%; } .offset-md-9 { margin-left: 75%; } .offset-md-10 { margin-left: 83.3333333333%; } .offset-md-11 { margin-left: 91.6666666667%; } } @media (min-width: 993px) { .col-lg { -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-lg-auto { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; } .col-lg-1 { -webkit-box-flex: 0; -webkit-flex: 0 0 8.3333333333%; -ms-flex: 0 0 8.3333333333%; flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .col-lg-2 { -webkit-box-flex: 0; -webkit-flex: 0 0 16.6666666667%; -ms-flex: 0 0 16.6666666667%; flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-lg-3 { -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-lg-4 { -webkit-box-flex: 0; -webkit-flex: 0 0 33.3333333333%; -ms-flex: 0 0 33.3333333333%; flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .col-lg-5 { -webkit-box-flex: 0; -webkit-flex: 0 0 41.6666666667%; -ms-flex: 0 0 41.6666666667%; flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .col-lg-6 { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-lg-7 { -webkit-box-flex: 0; -webkit-flex: 0 0 58.3333333333%; -ms-flex: 0 0 58.3333333333%; flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .col-lg-8 { -webkit-box-flex: 0; -webkit-flex: 0 0 66.6666666667%; -ms-flex: 0 0 66.6666666667%; flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .col-lg-9 { -webkit-box-flex: 0; -webkit-flex: 0 0 75%; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-lg-10 { -webkit-box-flex: 0; -webkit-flex: 0 0 83.3333333333%; -ms-flex: 0 0 83.3333333333%; flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .col-lg-11 { -webkit-box-flex: 0; -webkit-flex: 0 0 91.6666666667%; -ms-flex: 0 0 91.6666666667%; flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .col-lg-12 { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .order-lg-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -ms-flex-order: -1; order: -1; } .order-lg-last { -webkit-box-ordinal-group: 14; -webkit-order: 13; -ms-flex-order: 13; order: 13; } .order-lg-0 { -webkit-box-ordinal-group: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0; } .order-lg-1 { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; } .order-lg-2 { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; } .order-lg-3 { -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; } .order-lg-4 { -webkit-box-ordinal-group: 5; -webkit-order: 4; -ms-flex-order: 4; order: 4; } .order-lg-5 { -webkit-box-ordinal-group: 6; -webkit-order: 5; -ms-flex-order: 5; order: 5; } .order-lg-6 { -webkit-box-ordinal-group: 7; -webkit-order: 6; -ms-flex-order: 6; order: 6; } .order-lg-7 { -webkit-box-ordinal-group: 8; -webkit-order: 7; -ms-flex-order: 7; order: 7; } .order-lg-8 { -webkit-box-ordinal-group: 9; -webkit-order: 8; -ms-flex-order: 8; order: 8; } .order-lg-9 { -webkit-box-ordinal-group: 10; -webkit-order: 9; -ms-flex-order: 9; order: 9; } .order-lg-10 { -webkit-box-ordinal-group: 11; -webkit-order: 10; -ms-flex-order: 10; order: 10; } .order-lg-11 { -webkit-box-ordinal-group: 12; -webkit-order: 11; -ms-flex-order: 11; order: 11; } .order-lg-12 { -webkit-box-ordinal-group: 13; -webkit-order: 12; -ms-flex-order: 12; order: 12; } .offset-lg-0 { margin-left: 0; } .offset-lg-1 { margin-left: 8.3333333333%; } .offset-lg-2 { margin-left: 16.6666666667%; } .offset-lg-3 { margin-left: 25%; } .offset-lg-4 { margin-left: 33.3333333333%; } .offset-lg-5 { margin-left: 41.6666666667%; } .offset-lg-6 { margin-left: 50%; } .offset-lg-7 { margin-left: 58.3333333333%; } .offset-lg-8 { margin-left: 66.6666666667%; } .offset-lg-9 { margin-left: 75%; } .offset-lg-10 { margin-left: 83.3333333333%; } .offset-lg-11 { margin-left: 91.6666666667%; } } @media (min-width: 1201px) { .col-xl { -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-xl-auto { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; } .col-xl-1 { -webkit-box-flex: 0; -webkit-flex: 0 0 8.3333333333%; -ms-flex: 0 0 8.3333333333%; flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .col-xl-2 { -webkit-box-flex: 0; -webkit-flex: 0 0 16.6666666667%; -ms-flex: 0 0 16.6666666667%; flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-xl-3 { -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-xl-4 { -webkit-box-flex: 0; -webkit-flex: 0 0 33.3333333333%; -ms-flex: 0 0 33.3333333333%; flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .col-xl-5 { -webkit-box-flex: 0; -webkit-flex: 0 0 41.6666666667%; -ms-flex: 0 0 41.6666666667%; flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .col-xl-6 { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-xl-7 { -webkit-box-flex: 0; -webkit-flex: 0 0 58.3333333333%; -ms-flex: 0 0 58.3333333333%; flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .col-xl-8 { -webkit-box-flex: 0; -webkit-flex: 0 0 66.6666666667%; -ms-flex: 0 0 66.6666666667%; flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .col-xl-9 { -webkit-box-flex: 0; -webkit-flex: 0 0 75%; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-xl-10 { -webkit-box-flex: 0; -webkit-flex: 0 0 83.3333333333%; -ms-flex: 0 0 83.3333333333%; flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .col-xl-11 { -webkit-box-flex: 0; -webkit-flex: 0 0 91.6666666667%; -ms-flex: 0 0 91.6666666667%; flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .col-xl-12 { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .order-xl-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -ms-flex-order: -1; order: -1; } .order-xl-last { -webkit-box-ordinal-group: 14; -webkit-order: 13; -ms-flex-order: 13; order: 13; } .order-xl-0 { -webkit-box-ordinal-group: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0; } .order-xl-1 { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; } .order-xl-2 { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; } .order-xl-3 { -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; } .order-xl-4 { -webkit-box-ordinal-group: 5; -webkit-order: 4; -ms-flex-order: 4; order: 4; } .order-xl-5 { -webkit-box-ordinal-group: 6; -webkit-order: 5; -ms-flex-order: 5; order: 5; } .order-xl-6 { -webkit-box-ordinal-group: 7; -webkit-order: 6; -ms-flex-order: 6; order: 6; } .order-xl-7 { -webkit-box-ordinal-group: 8; -webkit-order: 7; -ms-flex-order: 7; order: 7; } .order-xl-8 { -webkit-box-ordinal-group: 9; -webkit-order: 8; -ms-flex-order: 8; order: 8; } .order-xl-9 { -webkit-box-ordinal-group: 10; -webkit-order: 9; -ms-flex-order: 9; order: 9; } .order-xl-10 { -webkit-box-ordinal-group: 11; -webkit-order: 10; -ms-flex-order: 10; order: 10; } .order-xl-11 { -webkit-box-ordinal-group: 12; -webkit-order: 11; -ms-flex-order: 11; order: 11; } .order-xl-12 { -webkit-box-ordinal-group: 13; -webkit-order: 12; -ms-flex-order: 12; order: 12; } .offset-xl-0 { margin-left: 0; } .offset-xl-1 { margin-left: 8.3333333333%; } .offset-xl-2 { margin-left: 16.6666666667%; } .offset-xl-3 { margin-left: 25%; } .offset-xl-4 { margin-left: 33.3333333333%; } .offset-xl-5 { margin-left: 41.6666666667%; } .offset-xl-6 { margin-left: 50%; } .offset-xl-7 { margin-left: 58.3333333333%; } .offset-xl-8 { margin-left: 66.6666666667%; } .offset-xl-9 { margin-left: 75%; } .offset-xl-10 { margin-left: 83.3333333333%; } .offset-xl-11 { margin-left: 91.6666666667%; } } /* Rows with equal spacing */ .row.row-eq-spacing { margin-top: var(--content-and-card-spacing); margin-bottom: var(--content-and-card-spacing); padding-left: var(--content-and-card-spacing-half); padding-right: var(--content-and-card-spacing-half); } .row.row-eq-spacing>[class^="col"] { padding-left: var(--content-and-card-spacing-half); padding-right: var(--content-and-card-spacing-half); } .row.row-eq-spacing>[class^="col"]>.content, .row.row-eq-spacing>[class^="col"]>.card { margin-left: 0; margin-right: 0; } .row.row-eq-spacing>[class^="col"]>.content:first-child, .row.row-eq-spacing>[class^="col"]>.card:first-child { margin-top: 0; } .row.row-eq-spacing>[class^="col"]>.content:last-child, .row.row-eq-spacing>[class^="col"]>.card:last-child { margin-bottom: 0; } @media (max-width: 576px) { .row.row-eq-spacing { margin-top: var(--content-and-card-spacing-xs); margin-bottom: var(--content-and-card-spacing-xs); padding-left: var(--content-and-card-spacing-xs-half); padding-right: var(--content-and-card-spacing-xs-half); } .row.row-eq-spacing>[class^="col"] { padding-left: var(--content-and-card-spacing-xs-half); padding-right: var(--content-and-card-spacing-xs-half); } } /* Adjustments for small screens and up (> 576px) */ @media (min-width: 577px) { .row.row-eq-spacing-sm:not(.row-eq-spacing) { margin-top: var(--content-and-card-spacing); margin-bottom: var(--content-and-card-spacing); padding-left: var(--content-and-card-spacing-half); padding-right: var(--content-and-card-spacing-half); } .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"] { padding-left: var(--content-and-card-spacing-half); padding-right: var(--content-and-card-spacing-half); } .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.content, .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.card { margin-left: 0; margin-right: 0; } .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.content:first-child, .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.card:first-child { margin-top: 0; } .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.content:last-child, .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.card:last-child { margin-bottom: 0; } } @media (max-width: 576px) { .row.row-eq-spacing-sm:not(.row-eq-spacing) { margin-top: var(--content-and-card-spacing-xs); margin-bottom: var(--content-and-card-spacing-xs); } .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"] { /* No margin collapse (due to flexbox), so half is used */ margin-top: var(--content-and-card-spacing-xs-half); margin-bottom: var(--content-and-card-spacing-xs-half); } .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]:first-child { margin-top: 0; } .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]:last-child { margin-bottom: 0; } .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.content, .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.card { margin-top: 0; margin-bottom: 0; } .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child), .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child) { /* Margin collapse, so full is used (not half) */ margin-top: var(--content-and-card-spacing-xs); margin-bottom: var(--content-and-card-spacing-xs); } .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):first-child, .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):first-child { margin-top: 0; } .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):last-child, .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):last-child { margin-bottom: 0; } } /* Adjustments for medium screens and up (> 768px) */ @media (min-width: 769px) { .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing) { margin-top: var(--content-and-card-spacing); margin-bottom: var(--content-and-card-spacing); padding-left: var(--content-and-card-spacing-half); padding-right: var(--content-and-card-spacing-half); } .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] { padding-left: var(--content-and-card-spacing-half); padding-right: var(--content-and-card-spacing-half); } .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content, .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card { margin-left: 0; margin-right: 0; } .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:first-child, .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:first-child { margin-top: 0; } .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:last-child, .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:last-child { margin-bottom: 0; } } @media (max-width: 768px) { .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing) { margin-top: var(--content-and-card-spacing); margin-bottom: var(--content-and-card-spacing); } .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] { /* No margin collapse (due to flexbox), so half is used */ margin-top: var(--content-and-card-spacing-half); margin-bottom: var(--content-and-card-spacing-half); } .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:first-child { margin-top: 0; } .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:last-child { margin-bottom: 0; } .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content, .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card { margin-top: 0; margin-bottom: 0; } .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child), .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child) { /* Margin collapse, so full is used (not half) */ margin-top: var(--content-and-card-spacing); margin-bottom: var(--content-and-card-spacing); } .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):first-child, .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):first-child { margin-top: 0; } .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):last-child, .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):last-child { margin-bottom: 0; } } @media (max-width: 576px) { .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing) { margin-top: var(--content-and-card-spacing-xs); margin-bottom: var(--content-and-card-spacing-xs); } .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] { /* No margin collapse (due to flexbox), so half is used */ margin-top: var(--content-and-card-spacing-xs-half); margin-bottom: var(--content-and-card-spacing-xs-half); } .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child), .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child) { /* Margin collapse, so full is used (not half) */ margin-top: var(--content-and-card-spacing-xs); margin-bottom: var(--content-and-card-spacing-xs); } } /* Adjustments for large screens and up (> 992px) */ @media (min-width: 993px) { .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing) { margin-top: var(--content-and-card-spacing); margin-bottom: var(--content-and-card-spacing); padding-left: var(--content-and-card-spacing-half); padding-right: var(--content-and-card-spacing-half); } .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] { padding-left: var(--content-and-card-spacing-half); padding-right: var(--content-and-card-spacing-half); } .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content, .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card { margin-left: 0; margin-right: 0; } .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:first-child, .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:first-child { margin-top: 0; } .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:last-child, .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:last-child { margin-bottom: 0; } } @media (max-width: 992px) { .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing) { margin-top: var(--content-and-card-spacing); margin-bottom: var(--content-and-card-spacing); } .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] { /* No margin collapse (due to flexbox), so half is used */ margin-top: var(--content-and-card-spacing-half); margin-bottom: var(--content-and-card-spacing-half); } .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:first-child { margin-top: 0; } .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:last-child { margin-bottom: 0; } .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content, .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card { margin-top: 0; margin-bottom: 0; } .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child), .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child) { /* Margin collapse, so full is used (not half) */ margin-top: var(--content-and-card-spacing); margin-bottom: var(--content-and-card-spacing); } .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):first-child, .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):first-child { margin-top: 0; } .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):last-child, .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):last-child { margin-bottom: 0; } } @media (max-width: 576px) { .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing) { margin-top: var(--content-and-card-spacing-xs); margin-bottom: var(--content-and-card-spacing-xs); } .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] { /* No margin collapse (due to flexbox), so half is used */ margin-top: var(--content-and-card-spacing-xs-half); margin-bottom: var(--content-and-card-spacing-xs-half); } .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child), .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child) { /* Margin collapse, so full is used (not half) */ margin-top: var(--content-and-card-spacing-xs); margin-bottom: var(--content-and-card-spacing-xs); } } /* Adjustments for extra large screens and up (> 1200px) */ @media (min-width: 1201px) { .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing) { margin-top: var(--content-and-card-spacing); margin-bottom: var(--content-and-card-spacing); padding-left: var(--content-and-card-spacing-half); padding-right: var(--content-and-card-spacing-half); } .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] { padding-left: var(--content-and-card-spacing-half); padding-right: var(--content-and-card-spacing-half); } .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content, .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card { margin-left: 0; margin-right: 0; } .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:first-child, .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:first-child { margin-top: 0; } .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:last-child, .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:last-child { margin-bottom: 0; } } @media (max-width: 1200px) { .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing) { margin-top: var(--content-and-card-spacing); margin-bottom: var(--content-and-card-spacing); } .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] { /* No margin collapse (due to flexbox), so half is used */ margin-top: var(--content-and-card-spacing-half); margin-bottom: var(--content-and-card-spacing-half); } .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:first-child { margin-top: 0; } .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:last-child { margin-bottom: 0; } .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content, .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card { margin-top: 0; margin-bottom: 0; } .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child), .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child) { /* Margin collapse, so full is used (not half) */ margin-top: var(--content-and-card-spacing); margin-bottom: var(--content-and-card-spacing); } .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):first-child, .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):first-child { margin-top: 0; } .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):last-child, .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):last-child { margin-bottom: 0; } } @media (max-width: 576px) { .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing) { margin-top: var(--content-and-card-spacing-xs); margin-bottom: var(--content-and-card-spacing-xs); } .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] { /* No margin collapse (due to flexbox), so half is used */ margin-top: var(--content-and-card-spacing-xs-half); margin-bottom: var(--content-and-card-spacing-xs-half); } .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child), .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child) { /* Margin collapse, so full is used (not half) */ margin-top: var(--content-and-card-spacing-xs); margin-bottom: var(--content-and-card-spacing-xs); } } /* Content and card */ .content { margin: var(--content-and-card-spacing); } @media (max-width: 576px) { .content { margin: var(--content-and-card-spacing-xs); } } .content-title { font-size: var(--content-title-font-size); font-weight: var(--content-title-font-weight); margin-top: 0; } .card { position: relative; margin: var(--content-and-card-spacing); padding: var(--content-and-card-spacing); color: var(--lm-card-text-color); background-color: var(--lm-card-bg-color); background-image: var(--lm-card-bg-image); border-radius: var(--card-border-radius); border: var(--card-border-width) solid var(--lm-card-border-color); -moz-box-shadow: var(--lm-card-box-shadow); -webkit-box-shadow: var(--lm-card-box-shadow); box-shadow: var(--lm-card-box-shadow); } .card.primary { position: relative; margin: var(--content-and-card-spacing); padding: var(--content-and-card-spacing); color: var(--lm-card-primary-text-color); background-color: var(--lm-card-primary-bg-color); background-image: var(--lm-card-primary-bg-image); border-radius: var(--card-border-radius); border: var(--card-border-width) solid var(--lm-card-primary-border-color); -moz-box-shadow: var(--lm-card-primary-box-shadow); -webkit-box-shadow: var(--lm-card-primary-box-shadow); box-shadow: var(--lm-card-primary-box-shadow); } .dark-mode .card { color: var(--dm-card-text-color); background-color: var(--dm-card-bg-color); background-image: var(--dm-card-bg-image); border-color: var(--dm-card-border-color); -moz-box-shadow: var(--dm-card-box-shadow); -webkit-box-shadow: var(--dm-card-box-shadow); box-shadow: var(--dm-card-box-shadow); } .dark-mode .card.primary { color: var(--dm-card-primary-text-color); background-color: var(--dm-card-primary-bg-color); background-image: var(--dm-card-primary-bg-image); border-color: var(--dm-card-primary-border-color); -moz-box-shadow: var(--dm-card-primary-box-shadow); -webkit-box-shadow: var(--dm-card-primary-box-shadow); box-shadow: var(--dm-card-primary-box-shadow); } @media (max-width: 576px) { .card { margin: var(--content-and-card-spacing-xs); padding: var(--content-and-card-spacing-xs); } } .card-title { font-size: var(--card-title-font-size); font-weight: var(--card-title-font-weight); margin-top: 0; } /* Card padding */ .p-card { padding: var(--content-and-card-spacing); } .px-card { padding-left: var(--content-and-card-spacing); padding-right: var(--content-and-card-spacing); } .py-card { padding-top: var(--content-and-card-spacing); padding-bottom: var(--content-and-card-spacing); } @media (max-width: 576px) { .p-card { padding: var(--content-and-card-spacing-xs); } .px-card { padding-left: var(--content-and-card-spacing-xs); padding-right: var(--content-and-card-spacing-xs); } .py-card { padding-top: var(--content-and-card-spacing-xs); padding-bottom: var(--content-and-card-spacing-xs); } } /* Vertical spacer */ .v-spacer { height: var(--v-spacer-height); position: relative; width: 100%; } @media (max-width: 576px) { .v-spacer { height: var(--v-spacer-height-xs); } } /* ------------------------------------------------------------------------------- 6. Links [hm-06] ------------------------------------------------------------------------------- */ a { color: var(--lm-link-text-color); text-decoration: none; } a:hover { color: var(--lm-link-text-color-hover); text-decoration: underline; } .dark-mode a { color: var(--dm-link-text-color); } .dark-mode a:hover { color: var(--dm-link-text-color-hover); } /* Hyperlink (anti-aliasing removed in dark mode) */ .dark-mode .hyperlink { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } /* Underlined hyperlink */ .hyperlink-underline { text-decoration: underline; } .dark-mode .hyperlink-underline { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } /* ------------------------------------------------------------------------------- 7. Buttons [hm-07] Notes: ~ When a focused button is hovered over, only the text color and the background color is overridden. This is because most button focus effects tend to be based on border, box shadow, and outline. On the other hand, when a focused input is hovered over, nothing is overridden, and all the focus styles are kept unchanged. ------------------------------------------------------------------------------- */ /* Default button */ .btn { display: inline-block; height: var(--button-height); line-height: var(--button-line-height); padding: var(--button-padding); text-align: center; white-space: nowrap; cursor: pointer; color: var(--lm-button-text-color); background-color: var(--lm-button-bg-color); background-image: var(--lm-button-bg-image); border: var(--button-border-width) solid var(--lm-button-border-color); border-radius: var(--button-border-radius); -moz-box-shadow: var(--lm-button-box-shadow); -webkit-box-shadow: var(--lm-button-box-shadow); box-shadow: var(--lm-button-box-shadow); } .btn:hover { text-decoration: none; color: var(--lm-button-text-color-hover); background-color: var(--lm-button-bg-color-hover); background-image: var(--lm-button-bg-image-hover); border-color: var(--lm-button-border-color-hover); -moz-box-shadow: var(--lm-button-box-shadow-hover); -webkit-box-shadow: var(--lm-button-box-shadow-hover); box-shadow: var(--lm-button-box-shadow-hover); } .btn:focus, .btn.active { color: var(--lm-button-text-color-focus); background-color: var(--lm-button-bg-color-focus); background-image: var(--lm-button-bg-image-focus); border-color: var(--lm-button-border-color-focus); -moz-box-shadow: var(--lm-button-box-shadow-focus); -webkit-box-shadow: var(--lm-button-box-shadow-focus); box-shadow: var(--lm-button-box-shadow-focus); outline: var(--button-outline-width) var(--button-outline-type) var(--lm-button-outline-color-focus); outline-offset: var(--button-outline-offset); } .btn:focus:hover, .btn.active:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: var(--lm-button-text-color-hover); background-color: var(--lm-button-bg-color-hover); background-image: var(--lm-button-bg-image-hover); } .dark-mode .btn { color: var(--dm-button-text-color); background-color: var(--dm-button-bg-color); background-image: var(--dm-button-bg-image); border-color: var(--dm-button-border-color); -moz-box-shadow: var(--dm-button-box-shadow); -webkit-box-shadow: var(--dm-button-box-shadow); box-shadow: var(--dm-button-box-shadow); } .dark-mode .btn:hover { color: var(--dm-button-text-color-hover); background-color: var(--dm-button-bg-color-hover); background-image: var(--dm-button-bg-image-hover); border-color: var(--dm-button-border-color-hover); -moz-box-shadow: var(--dm-button-box-shadow-hover); -webkit-box-shadow: var(--dm-button-box-shadow-hover); box-shadow: var(--dm-button-box-shadow-hover); } .dark-mode .btn:focus, .dark-mode .btn.active { color: var(--dm-button-text-color-focus); background-color: var(--dm-button-bg-color-focus); background-image: var(--dm-button-bg-image-focus); border-color: var(--dm-button-border-color-focus); -moz-box-shadow: var(--dm-button-box-shadow-focus); -webkit-box-shadow: var(--dm-button-box-shadow-focus); box-shadow: var(--dm-button-box-shadow-focus); outline-color: var(--dm-button-outline-color-focus); } .dark-mode .btn:focus:hover, .dark-mode .btn.active:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: var(--dm-button-text-color-hover); background-color: var(--dm-button-bg-color-hover); background-image: var(--dm-button-bg-image-hover); } .btn.disabled, .btn:disabled { cursor: not-allowed; opacity: 0.6; } .btn.disabled, .btn:disabled, .btn.disabled:hover, .btn.disabled:focus { color: var(--lm-button-text-color); background-color: var(--lm-button-bg-color); background-image: var(--lm-button-bg-image); border-color: var(--lm-button-border-color); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.disabled, .dark-mode .btn:disabled, .dark-mode .btn.disabled:hover, .dark-mode .btn.disabled:focus { color: var(--dm-button-text-color); background-color: var(--dm-button-bg-color); background-image: var(--dm-button-bg-image); border-color: var(--dm-button-border-color); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } /* Alternate dark mode default button */ .dark-mode .btn.alt-dm { color: var(--dm-button-alt-text-color); background-color: var(--dm-button-alt-bg-color); background-image: var(--dm-button-alt-bg-image); border-color: var(--dm-button-alt-border-color); -moz-box-shadow: var(--dm-button-alt-box-shadow); -webkit-box-shadow: var(--dm-button-alt-box-shadow); box-shadow: var(--dm-button-alt-box-shadow); } .dark-mode .btn.alt-dm:hover { color: var(--dm-button-alt-text-color-hover); background-color: var(--dm-button-alt-bg-color-hover); background-image: var(--dm-button-alt-bg-image-hover); border-color: var(--dm-button-alt-border-color-hover); -moz-box-shadow: var(--dm-button-alt-box-shadow-hover); -webkit-box-shadow: var(--dm-button-alt-box-shadow-hover); box-shadow: var(--dm-button-alt-box-shadow-hover); } .dark-mode .btn.alt-dm:focus, .dark-mode .btn.alt-dm.active { color: var(--dm-button-alt-text-color-focus); background-color: var(--dm-button-alt-bg-color-focus); background-image: var(--dm-button-alt-bg-image-focus); border-color: var(--dm-button-alt-border-color-focus); -moz-box-shadow: var(--dm-button-alt-box-shadow-focus); -webkit-box-shadow: var(--dm-button-alt-box-shadow-focus); box-shadow: var(--dm-button-alt-box-shadow-focus); outline-color: var(--dm-button-alt-outline-color-focus); } .dark-mode .btn.alt-dm:focus:hover, .dark-mode .btn.alt-dm.active:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: var(--dm-button-alt-text-color-hover); background-color: var(--dm-button-alt-bg-color-hover); background-image: var(--dm-button-alt-bg-image-hover); } .dark-mode .btn.alt-dm.disabled, .dark-mode .btn.alt-dm:disabled, .dark-mode .btn.alt-dm.disabled:hover, .dark-mode .btn.alt-dm.disabled:focus { color: var(--dm-button-alt-text-color); background-color: var(--dm-button-alt-bg-color); background-image: var(--dm-button-alt-bg-image); border-color: var(--dm-button-alt-border-color); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } /* Small button */ .btn-sm { height: var(--small-button-height); line-height: var(--small-button-line-height); padding: var(--small-button-padding); font-size: var(--small-button-font-size); } /* Large button */ .btn-lg { height: var(--large-button-height); line-height: var(--large-button-line-height); padding: var(--large-button-padding); font-size: var(--large-button-font-size); } /* Block button */ .btn-block { display: block; width: 100%; } /* Link button */ .btn.btn-link { color: var(--lm-button-link-text-color); background-color: var(--lm-button-link-bg-color); background-image: var(--lm-button-link-bg-image); border-color: var(--lm-button-link-border-color); -moz-box-shadow: var(--lm-button-link-box-shadow); -webkit-box-shadow: var(--lm-button-link-box-shadow); box-shadow: var(--lm-button-link-box-shadow); } .btn.btn-link:hover { color: var(--lm-button-link-text-color-hover); background-color: var(--lm-button-link-bg-color-hover); background-image: var(--lm-button-link-bg-image-hover); border-color: var(--lm-button-link-border-color-hover); -moz-box-shadow: var(--lm-button-link-box-shadow-hover); -webkit-box-shadow: var(--lm-button-link-box-shadow-hover); box-shadow: var(--lm-button-link-box-shadow-hover); } .btn.btn-link:focus, .btn.btn-link.active { color: var(--lm-button-link-text-color-focus); background-color: var(--lm-button-link-bg-color-focus); background-image: var(--lm-button-link-bg-image-focus); border-color: var(--lm-button-link-border-color-focus); -moz-box-shadow: var(--lm-button-link-box-shadow-focus); -webkit-box-shadow: var(--lm-button-link-box-shadow-focus); box-shadow: var(--lm-button-link-box-shadow-focus); outline-color: var(--lm-button-link-outline-color-focus); } .btn.btn-link:focus:hover, .btn.btn-link.active:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: var(--lm-button-link-text-color-hover); background-color: var(--lm-button-link-bg-color-hover); background-image: var(--lm-button-link-bg-image-hover); } .dark-mode .btn.btn-link { color: var(--dm-button-link-text-color); background-color: var(--dm-button-link-bg-color); background-image: var(--dm-button-link-bg-image); border-color: var(--dm-button-link-border-color); -moz-box-shadow: var(--dm-button-link-box-shadow); -webkit-box-shadow: var(--dm-button-link-box-shadow); box-shadow: var(--dm-button-link-box-shadow); -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .dark-mode .btn.btn-link:hover { color: var(--dm-button-link-text-color-hover); background-color: var(--dm-button-link-bg-color-hover); background-image: var(--dm-button-link-bg-image-hover); border-color: var(--dm-button-link-border-color-hover); -moz-box-shadow: var(--dm-button-link-box-shadow-hover); -webkit-box-shadow: var(--dm-button-link-box-shadow-hover); box-shadow: var(--dm-button-link-box-shadow-hover); } .dark-mode .btn.btn-link:focus, .dark-mode .btn.btn-link.active { color: var(--dm-button-link-text-color-focus); background-color: var(--dm-button-link-bg-color-focus); background-image: var(--dm-button-link-bg-image-focus); border-color: var(--dm-button-link-border-color-focus); -moz-box-shadow: var(--dm-button-link-box-shadow-focus); -webkit-box-shadow: var(--dm-button-link-box-shadow-focus); box-shadow: var(--dm-button-link-box-shadow-focus); outline-color: var(--dm-button-link-outline-color-focus); } .dark-mode .btn.btn-link:focus:hover, .dark-mode .btn.btn-link.active:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: var(--dm-button-link-text-color-hover); background-color: var(--dm-button-link-bg-color-hover); background-image: var(--dm-button-link-bg-image-hover); } .btn.btn-link.disabled, .btn.btn-link:disabled, .btn.btn-link.disabled:hover, .btn.btn-link.disabled:focus { color: var(--lm-button-link-text-color); background-color: var(--lm-button-link-bg-color); background-image: var(--lm-button-link-bg-image); border-color: var(--lm-button-link-border-color); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.btn-link.disabled, .dark-mode .btn.btn-link:disabled, .dark-mode .btn.btn-link.disabled:hover, .dark-mode .btn.btn-link.disabled:focus { color: var(--dm-button-link-text-color); background-color: var(--dm-button-link-bg-color); background-image: var(--dm-button-link-bg-image); border-color: var(--dm-button-link-border-color); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } /* Primary button */ .btn.btn-primary { color: var(--lm-button-primary-text-color); background-color: var(--lm-button-primary-bg-color); background-image: var(--lm-button-primary-bg-image); border-color: var(--lm-button-primary-border-color); -moz-box-shadow: var(--lm-button-primary-box-shadow); -webkit-box-shadow: var(--lm-button-primary-box-shadow); box-shadow: var(--lm-button-primary-box-shadow); } .btn.btn-primary:hover { color: var(--lm-button-primary-text-color-hover); background-color: var(--lm-button-primary-bg-color-hover); background-image: var(--lm-button-primary-bg-image-hover); border-color: var(--lm-button-primary-border-color-hover); -moz-box-shadow: var(--lm-button-primary-box-shadow-hover); -webkit-box-shadow: var(--lm-button-primary-box-shadow-hover); box-shadow: var(--lm-button-primary-box-shadow-hover); } .btn.btn-primary:focus, .btn.btn-primary.active { color: var(--lm-button-primary-text-color-focus); background-color: var(--lm-button-primary-bg-color-focus); background-image: var(--lm-button-primary-bg-image-focus); border-color: var(--lm-button-primary-border-color-focus); -moz-box-shadow: var(--lm-button-primary-box-shadow-focus); -webkit-box-shadow: var(--lm-button-primary-box-shadow-focus); box-shadow: var(--lm-button-primary-box-shadow-focus); outline-color: var(--lm-button-primary-outline-color-focus); } .btn.btn-primary:focus:hover, .btn.btn-primary.active:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: var(--lm-button-primary-text-color-hover); background-color: var(--lm-button-primary-bg-color-hover); background-image: var(--lm-button-primary-bg-image-hover); } .dark-mode .btn.btn-primary { color: var(--dm-button-primary-text-color); background-color: var(--dm-button-primary-bg-color); background-image: var(--dm-button-primary-bg-image); border-color: var(--dm-button-primary-border-color); -moz-box-shadow: var(--dm-button-primary-box-shadow); -webkit-box-shadow: var(--dm-button-primary-box-shadow); box-shadow: var(--dm-button-primary-box-shadow); -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .dark-mode .btn.btn-primary:hover { color: var(--dm-button-primary-text-color-hover); background-color: var(--dm-button-primary-bg-color-hover); background-image: var(--dm-button-primary-bg-image-hover); border-color: var(--dm-button-primary-border-color-hover); -moz-box-shadow: var(--dm-button-primary-box-shadow-hover); -webkit-box-shadow: var(--dm-button-primary-box-shadow-hover); box-shadow: var(--dm-button-primary-box-shadow-hover); } .dark-mode .btn.btn-primary:focus, .dark-mode .btn.btn-primary.active { color: var(--dm-button-primary-text-color-focus); background-color: var(--dm-button-primary-bg-color-focus); background-image: var(--dm-button-primary-bg-image-focus); border-color: var(--dm-button-primary-border-color-focus); -moz-box-shadow: var(--dm-button-primary-box-shadow-focus); -webkit-box-shadow: var(--dm-button-primary-box-shadow-focus); box-shadow: var(--dm-button-primary-box-shadow-focus); outline-color: var(--dm-button-primary-outline-color-focus); } .dark-mode .btn.btn-primary:focus:hover, .dark-mode .btn.btn-primary.active:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: var(--dm-button-primary-text-color-hover); background-color: var(--dm-button-primary-bg-color-hover); background-image: var(--dm-button-primary-bg-image-hover); } .btn.btn-primary.disabled, .btn.btn-primary:disabled, .btn.btn-primary.disabled:hover, .btn.btn-primary.disabled:focus { color: var(--lm-button-primary-text-color); background-color: var(--lm-button-primary-bg-color); background-image: var(--lm-button-primary-bg-image); border-color: var(--lm-button-primary-border-color); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.btn-primary.disabled, .dark-mode .btn.btn-primary:disabled, .dark-mode .btn.btn-primary.disabled:hover, .dark-mode .btn.btn-primary.disabled:focus { color: var(--dm-button-primary-text-color); background-color: var(--dm-button-primary-bg-color); background-image: var(--dm-button-primary-bg-image); border-color: var(--dm-button-primary-border-color); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } /* Success button */ .btn.btn-success { color: var(--lm-button-success-text-color); background-color: var(--lm-button-success-bg-color); background-image: var(--lm-button-success-bg-image); border-color: var(--lm-button-success-border-color); -moz-box-shadow: var(--lm-button-success-box-shadow); -webkit-box-shadow: var(--lm-button-success-box-shadow); box-shadow: var(--lm-button-success-box-shadow); } .btn.btn-success:hover { color: var(--lm-button-success-text-color-hover); background-color: var(--lm-button-success-bg-color-hover); background-image: var(--lm-button-success-bg-image-hover); border-color: var(--lm-button-success-border-color-hover); -moz-box-shadow: var(--lm-button-success-box-shadow-hover); -webkit-box-shadow: var(--lm-button-success-box-shadow-hover); box-shadow: var(--lm-button-success-box-shadow-hover); } .btn.btn-success:focus, .btn.btn-success.active { color: var(--lm-button-success-text-color-focus); background-color: var(--lm-button-success-bg-color-focus); background-image: var(--lm-button-success-bg-image-focus); border-color: var(--lm-button-success-border-color-focus); -moz-box-shadow: var(--lm-button-success-box-shadow-focus); -webkit-box-shadow: var(--lm-button-success-box-shadow-focus); box-shadow: var(--lm-button-success-box-shadow-focus); outline-color: var(--lm-button-success-outline-color-focus); } .btn.btn-success:focus:hover, .btn.btn-success.active:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: var(--lm-button-success-text-color-hover); background-color: var(--lm-button-success-bg-color-hover); background-image: var(--lm-button-success-bg-image-hover); } .dark-mode .btn.btn-success { color: var(--dm-button-success-text-color); background-color: var(--dm-button-success-bg-color); background-image: var(--dm-button-success-bg-image); border-color: var(--dm-button-success-border-color); -moz-box-shadow: var(--dm-button-success-box-shadow); -webkit-box-shadow: var(--dm-button-success-box-shadow); box-shadow: var(--dm-button-success-box-shadow); -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .dark-mode .btn.btn-success:hover { color: var(--dm-button-success-text-color-hover); background-color: var(--dm-button-success-bg-color-hover); background-image: var(--dm-button-success-bg-image-hover); border-color: var(--dm-button-success-border-color-hover); -moz-box-shadow: var(--dm-button-success-box-shadow-hover); -webkit-box-shadow: var(--dm-button-success-box-shadow-hover); box-shadow: var(--dm-button-success-box-shadow-hover); } .dark-mode .btn.btn-success:focus, .dark-mode .btn.btn-success.active { color: var(--dm-button-success-text-color-focus); background-color: var(--dm-button-success-bg-color-focus); background-image: var(--dm-button-success-bg-image-focus); border-color: var(--dm-button-success-border-color-focus); -moz-box-shadow: var(--dm-button-success-box-shadow-focus); -webkit-box-shadow: var(--dm-button-success-box-shadow-focus); box-shadow: var(--dm-button-success-box-shadow-focus); outline-color: var(--dm-button-success-outline-color-focus); } .dark-mode .btn.btn-success:focus:hover, .dark-mode .btn.btn-success.active:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: var(--dm-button-success-text-color-hover); background-color: var(--dm-button-success-bg-color-hover); background-image: var(--dm-button-success-bg-image-hover); } .btn.btn-success.disabled, .btn.btn-success:disabled, .btn.btn-success.disabled:hover, .btn.btn-success.disabled:focus { color: var(--lm-button-success-text-color); background-color: var(--lm-button-success-bg-color); background-image: var(--lm-button-success-bg-image); border-color: var(--lm-button-success-border-color); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.btn-success.disabled, .dark-mode .btn.btn-success:disabled, .dark-mode .btn.btn-success.disabled:hover, .dark-mode .btn.btn-success.disabled:focus { color: var(--dm-button-success-text-color); background-color: var(--dm-button-success-bg-color); background-image: var(--dm-button-success-bg-image); border-color: var(--dm-button-success-border-color); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } /* Secondary button */ .btn.btn-secondary { color: var(--lm-button-secondary-text-color); background-color: var(--lm-button-secondary-bg-color); background-image: var(--lm-button-secondary-bg-image); border-color: var(--lm-button-secondary-border-color); -moz-box-shadow: var(--lm-button-secondary-box-shadow); -webkit-box-shadow: var(--lm-button-secondary-box-shadow); box-shadow: var(--lm-button-secondary-box-shadow); } .btn.btn-secondary:hover { color: var(--lm-button-secondary-text-color-hover); background-color: var(--lm-button-secondary-bg-color-hover); background-image: var(--lm-button-secondary-bg-image-hover); border-color: var(--lm-button-secondary-border-color-hover); -moz-box-shadow: var(--lm-button-secondary-box-shadow-hover); -webkit-box-shadow: var(--lm-button-secondary-box-shadow-hover); box-shadow: var(--lm-button-secondary-box-shadow-hover); } .btn.btn-secondary:focus, .btn.btn-secondary.active { color: var(--lm-button-secondary-text-color-focus); background-color: var(--lm-button-secondary-bg-color-focus); background-image: var(--lm-button-secondary-bg-image-focus); border-color: var(--lm-button-secondary-border-color-focus); -moz-box-shadow: var(--lm-button-secondary-box-shadow-focus); -webkit-box-shadow: var(--lm-button-secondary-box-shadow-focus); box-shadow: var(--lm-button-secondary-box-shadow-focus); outline-color: var(--lm-button-secondary-outline-color-focus); } .btn.btn-secondary:focus:hover, .btn.btn-secondary.active:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: var(--lm-button-secondary-text-color-hover); background-color: var(--lm-button-secondary-bg-color-hover); background-image: var(--lm-button-secondary-bg-image-hover); } .dark-mode .btn.btn-secondary { color: var(--dm-button-secondary-text-color); background-color: var(--dm-button-secondary-bg-color); background-image: var(--dm-button-secondary-bg-image); border-color: var(--dm-button-secondary-border-color); -moz-box-shadow: var(--dm-button-secondary-box-shadow); -webkit-box-shadow: var(--dm-button-secondary-box-shadow); box-shadow: var(--dm-button-secondary-box-shadow); -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .dark-mode .btn.btn-secondary:hover { color: var(--dm-button-secondary-text-color-hover); background-color: var(--dm-button-secondary-bg-color-hover); background-image: var(--dm-button-secondary-bg-image-hover); border-color: var(--dm-button-secondary-border-color-hover); -moz-box-shadow: var(--dm-button-secondary-box-shadow-hover); -webkit-box-shadow: var(--dm-button-secondary-box-shadow-hover); box-shadow: var(--dm-button-secondary-box-shadow-hover); } .dark-mode .btn.btn-secondary:focus, .dark-mode .btn.btn-secondary.active { color: var(--dm-button-secondary-text-color-focus); background-color: var(--dm-button-secondary-bg-color-focus); background-image: var(--dm-button-secondary-bg-image-focus); border-color: var(--dm-button-secondary-border-color-focus); -moz-box-shadow: var(--dm-button-secondary-box-shadow-focus); -webkit-box-shadow: var(--dm-button-secondary-box-shadow-focus); box-shadow: var(--dm-button-secondary-box-shadow-focus); outline-color: var(--dm-button-secondary-outline-color-focus); } .dark-mode .btn.btn-secondary:focus:hover, .dark-mode .btn.btn-secondary.active:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: var(--dm-button-secondary-text-color-hover); background-color: var(--dm-button-secondary-bg-color-hover); background-image: var(--dm-button-secondary-bg-image-hover); } .btn.btn-secondary.disabled, .btn.btn-secondary:disabled, .btn.btn-secondary.disabled:hover, .btn.btn-secondary.disabled:focus { color: var(--lm-button-secondary-text-color); background-color: var(--lm-button-secondary-bg-color); background-image: var(--lm-button-secondary-bg-image); border-color: var(--lm-button-secondary-border-color); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.btn-secondary.disabled, .dark-mode .btn.btn-secondary:disabled, .dark-mode .btn.btn-secondary.disabled:hover, .dark-mode .btn.btn-secondary.disabled:focus { color: var(--dm-button-secondary-text-color); background-color: var(--dm-button-secondary-bg-color); background-image: var(--dm-button-secondary-bg-image); border-color: var(--dm-button-secondary-border-color); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } /* Danger button */ .btn.btn-danger { color: var(--lm-button-danger-text-color); background-color: var(--lm-button-danger-bg-color); background-image: var(--lm-button-danger-bg-image); border-color: var(--lm-button-danger-border-color); -moz-box-shadow: var(--lm-button-danger-box-shadow); -webkit-box-shadow: var(--lm-button-danger-box-shadow); box-shadow: var(--lm-button-danger-box-shadow); } .btn.btn-danger:hover { color: var(--lm-button-danger-text-color-hover); background-color: var(--lm-button-danger-bg-color-hover); background-image: var(--lm-button-danger-bg-image-hover); border-color: var(--lm-button-danger-border-color-hover); -moz-box-shadow: var(--lm-button-danger-box-shadow-hover); -webkit-box-shadow: var(--lm-button-danger-box-shadow-hover); box-shadow: var(--lm-button-danger-box-shadow-hover); } .btn.btn-danger:focus, .btn.btn-danger.active { color: var(--lm-button-danger-text-color-focus); background-color: var(--lm-button-danger-bg-color-focus); background-image: var(--lm-button-danger-bg-image-focus); border-color: var(--lm-button-danger-border-color-focus); -moz-box-shadow: var(--lm-button-danger-box-shadow-focus); -webkit-box-shadow: var(--lm-button-danger-box-shadow-focus); box-shadow: var(--lm-button-danger-box-shadow-focus); outline-color: var(--lm-button-danger-outline-color-focus); } .btn.btn-danger:focus:hover, .btn.btn-danger.active:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: var(--lm-button-danger-text-color-hover); background-color: var(--lm-button-danger-bg-color-hover); background-image: var(--lm-button-danger-bg-image-hover); } .dark-mode .btn.btn-danger { color: var(--dm-button-danger-text-color); background-color: var(--dm-button-danger-bg-color); background-image: var(--dm-button-danger-bg-image); border-color: var(--dm-button-danger-border-color); -moz-box-shadow: var(--dm-button-danger-box-shadow); -webkit-box-shadow: var(--dm-button-danger-box-shadow); box-shadow: var(--dm-button-danger-box-shadow); -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .dark-mode .btn.btn-danger:hover { color: var(--dm-button-danger-text-color-hover); background-color: var(--dm-button-danger-bg-color-hover); background-image: var(--dm-button-danger-bg-image-hover); border-color: var(--dm-button-danger-border-color-hover); -moz-box-shadow: var(--dm-button-danger-box-shadow-hover); -webkit-box-shadow: var(--dm-button-danger-box-shadow-hover); box-shadow: var(--dm-button-danger-box-shadow-hover); } .dark-mode .btn.btn-danger:focus, .dark-mode .btn.btn-danger.active { color: var(--dm-button-danger-text-color-focus); background-color: var(--dm-button-danger-bg-color-focus); background-image: var(--dm-button-danger-bg-image-focus); border-color: var(--dm-button-danger-border-color-focus); -moz-box-shadow: var(--dm-button-danger-box-shadow-focus); -webkit-box-shadow: var(--dm-button-danger-box-shadow-focus); box-shadow: var(--dm-button-danger-box-shadow-focus); outline-color: var(--dm-button-danger-outline-color-focus); } .dark-mode .btn.btn-danger:focus:hover, .dark-mode .btn.btn-danger.active:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: var(--dm-button-danger-text-color-hover); background-color: var(--dm-button-danger-bg-color-hover); background-image: var(--dm-button-danger-bg-image-hover); } .btn.btn-danger.disabled, .btn.btn-danger:disabled, .btn.btn-danger.disabled:hover, .btn.btn-danger.disabled:focus { color: var(--lm-button-danger-text-color); background-color: var(--lm-button-danger-bg-color); background-image: var(--lm-button-danger-bg-image); border-color: var(--lm-button-danger-border-color); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.btn-danger.disabled, .dark-mode .btn.btn-danger:disabled, .dark-mode .btn.btn-danger.disabled:hover, .dark-mode .btn.btn-danger.disabled:focus { color: var(--dm-button-danger-text-color); background-color: var(--dm-button-danger-bg-color); background-image: var(--dm-button-danger-bg-image); border-color: var(--dm-button-danger-border-color); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } /* Square button */ .btn-square { width: var(--button-height); padding-left: 0; padding-right: 0; } .btn-square.btn-sm { width: var(--small-button-height); padding-left: 0; padding-right: 0; } .btn-square.btn-lg { width: var(--large-button-height); padding-left: 0; padding-right: 0; } /* Rounded button */ .btn-rounded { border-radius: var(--button-rounded-border-radius); } .btn-rounded.btn-sm { border-radius: var(--small-button-rounded-border-radius); } .btn-rounded.btn-lg { border-radius: var(--large-button-rounded-border-radius); } /* ------------------------------------------------------------------------------- 8. List [hm-08] ------------------------------------------------------------------------------- */ ul { list-style: circle inside; } ol { list-style: decimal inside; } ol, ul { padding-left: 0; margin-top: 0; } ul ul, ul ol, ol ol, ol ul { margin: 1.5rem 0 1.5rem 3rem; } li { margin-bottom: 1rem; } /* ------------------------------------------------------------------------------- 9. Code [hm-09] ------------------------------------------------------------------------------- */ code, .code { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .code { font-size: var(--code-font-size); line-height: var(--code-line-height); padding: var(--code-padding); margin: var(--code-margin); color: var(--lm-code-text-color); background-color: var(--lm-code-bg-color); border: var(--code-border-width) solid var(--lm-code-border-color); border-radius: var(--code-border-radius); } .dark-mode .code { color: var(--dm-code-text-color); background-color: var(--dm-code-bg-color); border-color: var(--dm-code-border-color); } /* Keyboard input */ kbd { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: var(--kbd-font-size); line-height: var(--kbd-line-height); padding: var(--kbd-padding); margin: var(--kbd-margin); color: var(--lm-kbd-text-color); background-color: var(--lm-kbd-bg-color); border: var(--kbd-border-width) solid var(--lm-kbd-border-color); border-radius: var(--kbd-border-radius); -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; } .dark-mode kbd { color: var(--dm-kbd-text-color); background-color: var(--dm-kbd-bg-color); border-color: var(--dm-kbd-border-color); } /* ------------------------------------------------------------------------------- 10. Tables [hm-10] ------------------------------------------------------------------------------- */ .table-responsive { overflow-x: auto; } .table-responsive .table th, .table-responsive .table td { white-space: nowrap; } .table { width: 100%; } .table thead tr { border-bottom: var(--table-head-row-border-bottom-border-width) solid var(--lm-table-border-color); } .dark-mode .table thead tr { border-color: var(--dm-table-border-color); } .table tfoot tr { border-top: var(--table-foot-row-border-top-border-width) solid var(--lm-table-border-color); } .dark-mode .table tfoot tr { border-color: var(--dm-table-border-color); } .table tbody tr:not(:last-child) { border-bottom: var(--table-border-width) solid var(--lm-table-border-color); } .dark-mode .table tbody tr:not(:last-child) { border-color: var(--dm-table-border-color); } .table th { font-weight: var(--table-header-cell-font-weight); } .table th, .table td { text-align: left; } .table th, .table td { padding: var(--table-padding); } /* No outer padding */ .table-no-outer-padding th:first-child, .table-no-outer-padding td:first-child { padding-left: 0; } .table-no-outer-padding th:last-child, .table-no-outer-padding td:last-child { padding-right: 0; } /* Bordered table */ .table-bordered, .table-outer-bordered { border: var(--table-border-width) solid var(--lm-table-border-color); } .dark-mode .table-bordered, .dark-mode .table-outer-bordered { border-color: var(--dm-table-border-color); } .table-bordered th:not(:last-child), .table-bordered td:not(:last-child), .table-inner-bordered th:not(:last-child), .table-inner-bordered td:not(:last-child) { border-right: var(--table-border-width) solid var(--lm-table-border-color); } .dark-mode .table-bordered th:not(:last-child), .dark-mode .table-bordered td:not(:last-child), .dark-mode .table-inner-bordered th:not(:last-child), .dark-mode .table-inner-bordered td:not(:last-child) { border-color: var(--dm-table-border-color); } /* Hoverable table */ .table-hover tbody tr:hover th, .table-hover tbody tr:hover td { background-color: var(--lm-table-hoverable-bg-color-hover); } .dark-mode .table-hover tbody tr:hover th, .dark-mode .table-hover tbody tr:hover td { background-color: var(--dm-table-hoverable-bg-color-hover); } /* Striped table */ .table-striped tbody tr:nth-child(odd), .table-striped tbody tr:nth-child(odd) { background-color: var(--lm-table-striped-bg-color); } .dark-mode .table-striped tbody tr:nth-child(odd), .dark-mode .table-striped tbody tr:nth-child(odd) { background-color: var(--dm-table-striped-bg-color); } /* Primary, success, secondary, danger table rows. */ /* Light mode */ .table tbody tr.table-primary, .table-striped tbody tr.table-primary, .table-bordered tbody tr.table-primary, .table-inner-bordered tbody tr.table-primary { color: var(--lm-table-primary-text-color); background-color: var(--lm-table-primary-bg-color); border-color: var(--lm-table-primary-row-border-color); } .table tbody tr.table-primary th, .table tbody tr.table-primary td, .table-bordered tbody tr.table-primary th, .table-bordered tbody tr.table-primary td, .table-inner-bordered tbody tr.table-primary th, .table-inner-bordered tbody tr.table-primary td { border-color: var(--lm-table-primary-cell-border-color); } .table tbody tr.table-success, .table-striped tbody tr.table-success, .table-bordered tbody tr.table-success, .table-inner-bordered tbody tr.table-success { color: var(--lm-table-success-text-color); background-color: var(--lm-table-success-bg-color); border-color: var(--lm-table-success-row-border-color); } .table tbody tr.table-success th, .table tbody tr.table-success td, .table-bordered tbody tr.table-success th, .table-bordered tbody tr.table-success td, .table-inner-bordered tbody tr.table-success th, .table-inner-bordered tbody tr.table-success td { border-color: var(--lm-table-success-cell-border-color); } .table tbody tr.table-secondary, .table-striped tbody tr.table-secondary, .table-bordered tbody tr.table-secondary, .table-inner-bordered tbody tr.table-secondary { color: var(--lm-table-secondary-text-color); background-color: var(--lm-table-secondary-bg-color); border-color: var(--lm-table-secondary-row-border-color); } .table tbody tr.table-secondary th, .table tbody tr.table-secondary td, .table-bordered tbody tr.table-secondary th, .table-bordered tbody tr.table-secondary td, .table-inner-bordered tbody tr.table-secondary th, .table-inner-bordered tbody tr.table-secondary td { border-color: var(--lm-table-secondary-cell-border-color); } .table tbody tr.table-danger, .table-striped tbody tr.table-danger, .table-bordered tbody tr.table-danger, .table-inner-bordered tbody tr.table-danger { color: var(--lm-table-danger-text-color); background-color: var(--lm-table-danger-bg-color); border-color: var(--lm-table-danger-row-border-color); } .table tbody tr.table-danger th, .table tbody tr.table-danger td, .table-bordered tbody tr.table-danger th, .table-bordered tbody tr.table-danger td, .table-inner-bordered tbody tr.table-danger th, .table-inner-bordered tbody tr.table-danger td { border-color: var(--lm-table-danger-cell-border-color); } /* Dark mode */ .dark-mode .table tbody tr.table-primary, .dark-mode .table-striped tbody tr.table-primary, .dark-mode .table-bordered tbody tr.table-primary, .dark-mode .table-inner-bordered tbody tr.table-primary { color: var(--dm-table-primary-text-color); background-color: var(--dm-table-primary-bg-color); border-color: var(--dm-table-primary-row-border-color); } .dark-mode .table tbody tr.table-primary th, .dark-mode .table tbody tr.table-primary td, .dark-mode .table-bordered tbody tr.table-primary th, .dark-mode .table-bordered tbody tr.table-primary td, .dark-mode .table-inner-bordered tbody tr.table-primary th, .dark-mode .table-inner-bordered tbody tr.table-primary td { border-color: var(--dm-table-primary-cell-border-color); } .dark-mode .table tbody tr.table-success, .dark-mode .table-striped tbody tr.table-success, .dark-mode .table-bordered tbody tr.table-success, .dark-mode .table-inner-bordered tbody tr.table-success { color: var(--dm-table-success-text-color); background-color: var(--dm-table-success-bg-color); border-color: var(--dm-table-success-row-border-color); } .dark-mode .table tbody tr.table-success th, .dark-mode .table tbody tr.table-success td, .dark-mode .table-bordered tbody tr.table-success th, .dark-mode .table-bordered tbody tr.table-success td, .dark-mode .table-inner-bordered tbody tr.table-success th, .dark-mode .table-inner-bordered tbody tr.table-success td { border-color: var(--dm-table-success-cell-border-color); } .dark-mode .table tbody tr.table-secondary, .dark-mode .table-striped tbody tr.table-secondary, .dark-mode .table-bordered tbody tr.table-secondary, .dark-mode .table-inner-bordered tbody tr.table-secondary { color: var(--dm-table-secondary-text-color); background-color: var(--dm-table-secondary-bg-color); border-color: var(--dm-table-secondary-row-border-color); } .dark-mode .table tbody tr.table-secondary th, .dark-mode .table tbody tr.table-secondary td, .dark-mode .table-bordered tbody tr.table-secondary th, .dark-mode .table-bordered tbody tr.table-secondary td, .dark-mode .table-inner-bordered tbody tr.table-secondary th, .dark-mode .table-inner-bordered tbody tr.table-secondary td { border-color: var(--dm-table-secondary-cell-border-color); } .dark-mode .table tbody tr.table-danger, .dark-mode .table-striped tbody tr.table-danger, .dark-mode .table-bordered tbody tr.table-danger, .dark-mode .table-inner-bordered tbody tr.table-danger { color: var(--dm-table-danger-text-color); background-color: var(--dm-table-danger-bg-color); border-color: var(--dm-table-danger-row-border-color); } .dark-mode .table tbody tr.table-danger th, .dark-mode .table tbody tr.table-danger td, .dark-mode .table-bordered tbody tr.table-danger th, .dark-mode .table-bordered tbody tr.table-danger td, .dark-mode .table-inner-bordered tbody tr.table-danger th, .dark-mode .table-inner-bordered tbody tr.table-danger td { border-color: var(--dm-table-danger-cell-border-color); } /* ------------------------------------------------------------------------------- 11. Form elements [hm-11] ------------------------------------------------------------------------------- */ /* Fieldsets, form-groups, form-rows and cols, labels, legends, form-text, invalid-feedback, inline-form */ fieldset { padding: 0; border-width: 0; } label { display: inline-block; margin-bottom: var(--label-margin-bottom); } label.required:after { content: "*"; color: var(--danger-color); margin-left: 0.3rem; } legend { display: block; margin-bottom: var(--legend-margin-bottom); } .form-group { margin-bottom: var(--form-group-margin-bottom); } /* Form rows */ .form-row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: var(--form-row-and-col-margin-bottom); } /* Form rows with equal spacing */ .form-row.row-eq-spacing>[class^="col"] { padding-left: var(--form-col-horizontal-padding); padding-right: var(--form-col-horizontal-padding); } .form-row.row-eq-spacing>[class^="col"]:first-child { padding-left: 0; } .form-row.row-eq-spacing>[class^="col"]:last-child { padding-right: 0; } /* Adjustments for small screens and up (> 576px) */ @media (min-width: 577px) { .form-row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"] { padding-left: var(--form-col-horizontal-padding); padding-right: var(--form-col-horizontal-padding); } .form-row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]:first-child { padding-left: 0; } .form-row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]:last-child { padding-right: 0; } } @media (max-width: 576px) { .form-row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]:not(:last-child) { margin-bottom: var(--form-row-and-col-margin-bottom); } } /* Adjustments for medium screens and up (> 768px) */ @media (min-width: 769px) { .form-row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] { padding-left: var(--form-col-horizontal-padding); padding-right: var(--form-col-horizontal-padding); } .form-row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:first-child { padding-left: 0; } .form-row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:last-child { padding-right: 0; } } @media (max-width: 768px) { .form-row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:not(:last-child) { margin-bottom: var(--form-row-and-col-margin-bottom); } } /* Adjustments for large screens and up (> 992px) */ @media (min-width: 993px) { .form-row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] { padding-left: var(--form-col-horizontal-padding); padding-right: var(--form-col-horizontal-padding); } .form-row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:first-child { padding-left: 0; } .form-row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:last-child { padding-right: 0; } } @media (max-width: 992px) { .form-row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:not(:last-child) { margin-bottom: var(--form-row-and-col-margin-bottom); } } /* Adjustments for extra large screens and up (> 1200px) */ @media (min-width: 1201px) { .form-row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] { padding-left: var(--form-col-horizontal-padding); padding-right: var(--form-col-horizontal-padding); } .form-row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:first-child { padding-left: 0; } .form-row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:last-child { padding-right: 0; } } @media (max-width: 1200px) { .form-row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:not(:last-child) { margin-bottom: var(--form-row-and-col-margin-bottom); } } /* Form text and feedback */ .form-text { color: var(--lm-form-text-text-color); font-size: var(--form-text-font-size); padding-top: var(--form-text-padding-top); padding-bottom: var(--form-text-padding-bottom); border-bottom: var(--form-text-border-width) var(--form-text-border-type) var(--lm-form-text-border-color); } .dark-mode .form-text { color: var(--dm-form-text-text-color); border-color: var(--dm-form-text-border-color); } .invalid-feedback { color: var(--lm-invalid-feedback-text-color); font-size: var(--invalid-feedback-font-size); padding-top: var(--invalid-feedback-padding-top); padding-bottom: var(--invalid-feedback-padding-bottom); } .dark-mode .invalid-feedback { color: var(--dm-invalid-feedback-text-color); } /* Inline form */ .form-inline, .form-inline .form-group { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-align: center; align-items: center; } .form-inline .form-group { width: 100%; } .form-inline > .form-control, .form-inline > .input-group, .form-inline .form-group > .form-control, .form-inline .form-group > .input-group { position: relative; -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; } .form-inline > label, .form-inline > .custom-control, .form-inline > .form-text, .form-inline > .invalid-feedback, .form-inline .form-group > label, .form-inline .form-group > .custom-control, .form-inline .form-group > .form-text, .form-inline .form-group > .invalid-feedback { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; min-width: 0; } .form-inline > label, .form-inline > .form-text, .form-inline > .invalid-feedback, .form-inline .form-group > label, .form-inline .form-group > .form-text, .form-inline .form-group > .invalid-feedback { margin: 0; padding: 0; border: none; white-space: nowrap; } .form-inline > .form-control:not(:last-child), .form-inline > .input-group:not(:last-child), .form-inline > label:not(:last-child), .form-inline > .custom-control, .form-inline > .btn:not(:last-child), .form-inline > a.btn:not(:last-child), .form-inline > .form-text:not(:last-child), .form-inline > .invalid-feedback:not(:last-child), .form-inline .form-group > .form-control:not(:last-child), .form-inline .form-group > .input-group:not(:last-child), .form-inline .form-group > label:not(:last-child), .form-inline .form-group > .custom-control, .form-inline .form-group > .btn:not(:last-child), .form-inline .form-group > a.btn:not(:last-child), .form-inline .form-group > .form-text:not(:last-child), .form-inline .form-group > .invalid-feedback:not(:last-child) { margin-right: var(--form-inline-horizontal-margin); } /* Inline form for small screens and up (> 576px) */ @media (min-width: 577px) { .form-inline-sm, .form-inline-sm .form-group { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-align: center; align-items: center; } .form-inline-sm .form-group { width: 100%; } .form-inline-sm > .form-control, .form-inline-sm > .input-group, .form-inline-sm .form-group > .form-control, .form-inline-sm .form-group > .input-group { position: relative; -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; } .form-inline-sm > label, .form-inline-sm > .custom-control, .form-inline-sm > .form-text, .form-inline-sm > .invalid-feedback, .form-inline-sm .form-group > label, .form-inline-sm .form-group > .custom-control, .form-inline-sm .form-group > .form-text, .form-inline-sm .form-group > .invalid-feedback { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; min-width: 0; } .form-inline-sm > label, .form-inline-sm > .form-text, .form-inline-sm > .invalid-feedback, .form-inline-sm .form-group > label, .form-inline-sm .form-group > .form-text, .form-inline-sm .form-group > .invalid-feedback { margin: 0; padding: 0; border: none; white-space: nowrap; } .form-inline-sm > .form-control:not(:last-child), .form-inline-sm > .input-group:not(:last-child), .form-inline-sm > label:not(:last-child), .form-inline-sm > .custom-control, .form-inline-sm > .btn:not(:last-child), .form-inline-sm > a.btn:not(:last-child), .form-inline-sm > .form-text:not(:last-child), .form-inline-sm > .invalid-feedback:not(:last-child), .form-inline-sm .form-group > .form-control:not(:last-child), .form-inline-sm .form-group > .input-group:not(:last-child), .form-inline-sm .form-group > label:not(:last-child), .form-inline-sm .form-group > .custom-control, .form-inline-sm .form-group > .btn:not(:last-child), .form-inline-sm .form-group > a.btn:not(:last-child), .form-inline-sm .form-group > .form-text:not(:last-child), .form-inline-sm .form-group > .invalid-feedback:not(:last-child) { margin-right: var(--form-inline-horizontal-margin); } } @media (max-width: 576px) { .form-inline-sm > .form-control:not(:last-child), .form-inline-sm > .input-group:not(:last-child), .form-inline-sm > .custom-control, .form-inline-sm > .btn:not(:last-child), .form-inline-sm > a.btn:not(:last-child), .form-inline-sm .form-group > .form-control:not(:last-child), .form-inline-sm .form-group > .input-group:not(:last-child), .form-inline-sm .form-group > .custom-control, .form-inline-sm .form-group > .btn:not(:last-child), .form-inline-sm .form-group > a.btn:not(:last-child) { margin-bottom: var(--form-group-margin-bottom); } } /* Inline form for medium screens and up (> 768px) */ @media (min-width: 769px) { .form-inline-md, .form-inline-md .form-group { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-align: center; align-items: center; } .form-inline-md .form-group { width: 100%; } .form-inline-md > .form-control, .form-inline-md > .input-group, .form-inline-md .form-group > .form-control, .form-inline-md .form-group > .input-group { position: relative; -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; } .form-inline-md > label, .form-inline-md > .custom-control, .form-inline-md > .form-text, .form-inline-md > .invalid-feedback, .form-inline-md .form-group > label, .form-inline-md .form-group > .custom-control, .form-inline-md .form-group > .form-text, .form-inline-md .form-group > .invalid-feedback { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; min-width: 0; } .form-inline-md > label, .form-inline-md > .form-text, .form-inline-md > .invalid-feedback, .form-inline-md .form-group > label, .form-inline-md .form-group > .form-text, .form-inline-md .form-group > .invalid-feedback { margin: 0; padding: 0; border: none; white-space: nowrap; } .form-inline-md > .form-control:not(:last-child), .form-inline-md > .input-group:not(:last-child), .form-inline-md > label:not(:last-child), .form-inline-md > .custom-control, .form-inline-md > .btn:not(:last-child), .form-inline-md > a.btn:not(:last-child), .form-inline-md > .form-text:not(:last-child), .form-inline-md > .invalid-feedback:not(:last-child), .form-inline-md .form-group > .form-control:not(:last-child), .form-inline-md .form-group > .input-group:not(:last-child), .form-inline-md .form-group > label:not(:last-child), .form-inline-md .form-group > .custom-control, .form-inline-md .form-group > .btn:not(:last-child), .form-inline-md .form-group > a.btn:not(:last-child), .form-inline-md .form-group > .form-text:not(:last-child), .form-inline-md .form-group > .invalid-feedback:not(:last-child) { margin-right: var(--form-inline-horizontal-margin); } } @media (max-width: 768px) { .form-inline-md > .form-control:not(:last-child), .form-inline-md > .input-group:not(:last-child), .form-inline-md > .custom-control, .form-inline-md > .btn:not(:last-child), .form-inline-md > a.btn:not(:last-child), .form-inline-md .form-group > .form-control:not(:last-child), .form-inline-md .form-group > .input-group:not(:last-child), .form-inline-md .form-group > .custom-control, .form-inline-md .form-group > .btn:not(:last-child), .form-inline-md .form-group > a.btn:not(:last-child) { margin-bottom: var(--form-group-margin-bottom); } } /* Inline form for large screens and up (> 992px) */ @media (min-width: 993px) { .form-inline-lg, .form-inline-lg .form-group { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-align: center; align-items: center; } .form-inline-lg .form-group { width: 100%; } .form-inline-lg > .form-control, .form-inline-lg > .input-group, .form-inline-lg .form-group > .form-control, .form-inline-lg .form-group > .input-group { position: relative; -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; } .form-inline-lg > label, .form-inline-lg > .custom-control, .form-inline-lg > .form-text, .form-inline-lg > .invalid-feedback, .form-inline-lg .form-group > label, .form-inline-lg .form-group > .custom-control, .form-inline-lg .form-group > .form-text, .form-inline-lg .form-group > .invalid-feedback { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; min-width: 0; } .form-inline-lg > label, .form-inline-lg > .form-text, .form-inline-lg > .invalid-feedback, .form-inline-lg .form-group > label, .form-inline-lg .form-group > .form-text, .form-inline-lg .form-group > .invalid-feedback { margin: 0; padding: 0; border: none; white-space: nowrap; } .form-inline-lg > .form-control:not(:last-child), .form-inline-lg > .input-group:not(:last-child), .form-inline-lg > label:not(:last-child), .form-inline-lg > .custom-control, .form-inline-lg > .btn:not(:last-child), .form-inline-lg > a.btn:not(:last-child), .form-inline-lg > .form-text:not(:last-child), .form-inline-lg > .invalid-feedback:not(:last-child), .form-inline-lg .form-group > .form-control:not(:last-child), .form-inline-lg .form-group > .input-group:not(:last-child), .form-inline-lg .form-group > label:not(:last-child), .form-inline-lg .form-group > .custom-control, .form-inline-lg .form-group > .btn:not(:last-child), .form-inline-lg .form-group > a.btn:not(:last-child), .form-inline-lg .form-group > .form-text:not(:last-child), .form-inline-lg .form-group > .invalid-feedback:not(:last-child) { margin-right: var(--form-inline-horizontal-margin); } } @media (max-width: 992px) { .form-inline-lg > .form-control:not(:last-child), .form-inline-lg > .input-group:not(:last-child), .form-inline-lg > .custom-control, .form-inline-lg > .btn:not(:last-child), .form-inline-lg > a.btn:not(:last-child), .form-inline-lg .form-group > .form-control:not(:last-child), .form-inline-lg .form-group > .input-group:not(:last-child), .form-inline-lg .form-group > .custom-control, .form-inline-lg .form-group > .btn:not(:last-child), .form-inline-lg .form-group > a.btn:not(:last-child) { margin-bottom: var(--form-group-margin-bottom); } } /* Inline form for extra large screens and up (> 1200px) */ @media (min-width: 1201px) { .form-inline-xl, .form-inline-xl .form-group { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-align: center; align-items: center; } .form-inline-xl .form-group { width: 100%; } .form-inline-xl > .form-control, .form-inline-xl > .input-group, .form-inline-xl .form-group > .form-control, .form-inline-xl .form-group > .input-group { position: relative; -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; } .form-inline-xl > label, .form-inline-xl > .custom-control, .form-inline-xl > .form-text, .form-inline-xl > .invalid-feedback, .form-inline-xl .form-group > label, .form-inline-xl .form-group > .custom-control, .form-inline-xl .form-group > .form-text, .form-inline-xl .form-group > .invalid-feedback { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; min-width: 0; } .form-inline-xl > label, .form-inline-xl > .form-text, .form-inline-xl > .invalid-feedback, .form-inline-xl .form-group > label, .form-inline-xl .form-group > .form-text, .form-inline-xl .form-group > .invalid-feedback { margin: 0; padding: 0; border: none; white-space: nowrap; } .form-inline-xl > .form-control:not(:last-child), .form-inline-xl > .input-group:not(:last-child), .form-inline-xl > label:not(:last-child), .form-inline-xl > .custom-control, .form-inline-xl > .btn:not(:last-child), .form-inline-xl > a.btn:not(:last-child), .form-inline-xl > .form-text:not(:last-child), .form-inline-xl > .invalid-feedback:not(:last-child), .form-inline-xl .form-group > .form-control:not(:last-child), .form-inline-xl .form-group > .input-group:not(:last-child), .form-inline-xl .form-group > label:not(:last-child), .form-inline-xl .form-group > .custom-control, .form-inline-xl .form-group > .btn:not(:last-child), .form-inline-xl .form-group > a.btn:not(:last-child), .form-inline-xl .form-group > .form-text:not(:last-child), .form-inline-xl .form-group > .invalid-feedback:not(:last-child) { margin-right: var(--form-inline-horizontal-margin); } } @media (max-width: 1200px) { .form-inline-xl > .form-control:not(:last-child), .form-inline-xl > .input-group:not(:last-child), .form-inline-xl > .custom-control, .form-inline-xl > .btn:not(:last-child), .form-inline-xl > a.btn:not(:last-child), .form-inline-xl .form-group > .form-control:not(:last-child), .form-inline-xl .form-group > .input-group:not(:last-child), .form-inline-xl .form-group > .custom-control, .form-inline-xl .form-group > .btn:not(:last-child), .form-inline-xl .form-group > a.btn:not(:last-child) { margin-bottom: var(--form-group-margin-bottom); } } /* Inputs */ .form-control { display: block; width: 100%; height: var(--input-height); padding-left: var(--input-horizontal-padding); padding-right: var(--input-horizontal-padding); color: var(--lm-input-text-color); background-color: var(--lm-input-bg-color); border: var(--input-border-width) solid var(--lm-input-border-color); border-radius: var(--input-border-radius); -moz-box-shadow: var(--lm-input-box-shadow); -webkit-box-shadow: var(--lm-input-box-shadow); box-shadow: var(--lm-input-box-shadow); /* Removes the default styles on some devices. */ -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form-control-sm { height: var(--small-input-height); padding-left: var(--small-input-horizontal-padding); padding-right: var(--small-input-horizontal-padding); font-size: var(--small-input-font-size); } .form-control-lg { height: var(--large-input-height); padding-left: var(--large-input-horizontal-padding); padding-right: var(--large-input-horizontal-padding); font-size: var(--large-input-font-size); } textarea.form-control { max-width: 100%; min-height: 10rem; padding: var(--input-horizontal-padding); line-height: var(--textarea-line-height); } textarea.form-control-sm { min-height: 8rem; padding: var(--small-input-horizontal-padding); } textarea.form-control-lg { min-height: 14rem; padding: var(--large-input-horizontal-padding); } .form-control:hover { color: var(--lm-input-text-color-hover); background-color: var(--lm-input-bg-color-hover); border-color: var(--lm-input-border-color-hover); -moz-box-shadow: var(--lm-input-box-shadow-hover); -webkit-box-shadow: var(--lm-input-box-shadow-hover); box-shadow: var(--lm-input-box-shadow-hover); } .form-control:focus { color: var(--lm-input-text-color-focus); background-color: var(--lm-input-bg-color-focus); border-color: var(--lm-input-border-color-focus); -moz-box-shadow: var(--lm-input-box-shadow-focus); -webkit-box-shadow: var(--lm-input-box-shadow-focus); box-shadow: var(--lm-input-box-shadow-focus); outline: none; } ::-webkit-input-placeholder { /* Edge */ color: var(--lm-input-placeholder-text-color); } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: var(--lm-input-placeholder-text-color); } ::placeholder { color: var(--lm-input-placeholder-text-color); } .form-control.disabled, .form-control:disabled, .form-control.disabled:hover, .form-control:disabled:hover { /* The :disabled selector must still be added to the input field for the forms to work as intended. Moreover, since focusing on an input with the :disabled selector is impossible, the :focus styles are not overridden (along with the :focus box shadows). */ cursor: not-allowed; opacity: 0.6; color: var(--lm-input-text-color-disabled); background-color: var(--lm-input-bg-color-disabled); border-color: var(--lm-input-border-color-disabled); } .dark-mode .form-control { color: var(--dm-input-text-color); background-color: var(--dm-input-bg-color); border-color: var(--dm-input-border-color); -moz-box-shadow: var(--dm-input-box-shadow); -webkit-box-shadow: var(--dm-input-box-shadow); box-shadow: var(--dm-input-box-shadow); } .dark-mode .form-control:hover { color: var(--dm-input-text-color-hover); background-color: var(--dm-input-bg-color-hover); border-color: var(--dm-input-border-color-hover); -moz-box-shadow: var(--dm-input-box-shadow-hover); -webkit-box-shadow: var(--dm-input-box-shadow-hover); box-shadow: var(--dm-input-box-shadow-hover); } .dark-mode .form-control:focus { color: var(--dm-input-text-color-focus); background-color: var(--dm-input-bg-color-focus); border-color: var(--dm-input-border-color-focus); -moz-box-shadow: var(--dm-input-box-shadow-focus); -webkit-box-shadow: var(--dm-input-box-shadow-focus); box-shadow: var(--dm-input-box-shadow-focus); outline: none; } .dark-mode ::-webkit-input-placeholder { /* Edge */ color: var(--dm-input-placeholder-text-color); } .dark-mode :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: var(--dm-input-placeholder-text-color); } .dark-mode ::placeholder { color: var(--dm-input-placeholder-text-color); } .dark-mode .form-control.disabled, .dark-mode .form-control:disabled, .dark-mode .form-control.disabled:hover, .dark-mode .form-control:disabled:hover { color: var(--dm-input-text-color-disabled); background-color: var(--dm-input-bg-color-disabled); border-color: var(--dm-input-border-color-disabled); } /* Alternate dark mode inputs */ .dark-mode .form-control.alt-dm { color: var(--dm-input-alt-text-color); background-color: var(--dm-input-alt-bg-color); border-color: var(--dm-input-alt-border-color); -moz-box-shadow: var(--dm-input-alt-box-shadow); -webkit-box-shadow: var(--dm-input-alt-box-shadow); box-shadow: var(--dm-input-alt-box-shadow); } .dark-mode .form-control.alt-dm:hover { color: var(--dm-input-alt-text-color-hover); background-color: var(--dm-input-alt-bg-color-hover); border-color: var(--dm-input-alt-border-color-hover); -moz-box-shadow: var(--dm-input-alt-box-shadow-hover); -webkit-box-shadow: var(--dm-input-alt-box-shadow-hover); box-shadow: var(--dm-input-alt-box-shadow-hover); } .dark-mode .form-control.alt-dm:focus { color: var(--dm-input-alt-text-color-focus); background-color: var(--dm-input-alt-bg-color-focus); border-color: var(--dm-input-alt-border-color-focus); -moz-box-shadow: var(--dm-input-alt-box-shadow-focus); -webkit-box-shadow: var(--dm-input-alt-box-shadow-focus); box-shadow: var(--dm-input-alt-box-shadow-focus); outline: none; } .dark-mode .form-control.alt-dm::-webkit-input-placeholder { /* Edge */ color: var(--dm-input-alt-placeholder-text-color); } .dark-mode .form-control.alt-dm:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: var(--dm-input-alt-placeholder-text-color); } .dark-mode .form-control.alt-dm::placeholder { color: var(--dm-input-alt-placeholder-text-color); } .dark-mode .form-control.alt-dm.disabled, .dark-mode .form-control.alt-dm:disabled, .dark-mode .form-control.alt-dm.disabled:hover, .dark-mode .form-control.alt-dm:disabled:hover { color: var(--dm-input-alt-text-color-disabled); background-color: var(--dm-input-alt-bg-color-disabled); border-color: var(--dm-input-alt-border-color-disabled); } /* Inputs invalid (with errors) */ .form-group.is-invalid .form-control, .form-control.is-invalid { color: var(--lm-input-invalid-text-color); background-color: var(--lm-input-invalid-bg-color); border-color: var(--lm-input-invalid-border-color); -moz-box-shadow: var(--lm-input-invalid-box-shadow); -webkit-box-shadow: var(--lm-input-invalid-box-shadow); box-shadow: var(--lm-input-invalid-box-shadow); } .form-group.is-invalid .form-control:hover, .form-control.is-invalid:hover { color: var(--lm-input-invalid-text-color-hover); background-color: var(--lm-input-invalid-bg-color-hover); border-color: var(--lm-input-invalid-border-color-hover); -moz-box-shadow: var(--lm-input-invalid-box-shadow-hover); -webkit-box-shadow: var(--lm-input-invalid-box-shadow-hover); box-shadow: var(--lm-input-invalid-box-shadow-hover); } .form-group.is-invalid .form-control:focus, .form-control.is-invalid:focus { color: var(--lm-input-invalid-text-color-focus); background-color: var(--lm-input-invalid-bg-color-focus); border-color: var(--lm-input-invalid-border-color-focus); -moz-box-shadow: var(--lm-input-invalid-box-shadow-focus); -webkit-box-shadow: var(--lm-input-invalid-box-shadow-focus); box-shadow: var(--lm-input-invalid-box-shadow-focus); outline: none; } .form-group.is-invalid .form-control::-webkit-input-placeholder { /* Edge */ color: var(--lm-input-invalid-placeholder-text-color); } .form-group.is-invalid .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: var(--lm-input-invalid-placeholder-text-color); } .form-group.is-invalid .form-control::placeholder { color: var(--lm-input-invalid-placeholder-text-color); } .form-control.is-invalid::-webkit-input-placeholder { /* Edge */ color: var(--lm-input-invalid-placeholder-text-color); } .form-control.is-invalid:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: var(--lm-input-invalid-placeholder-text-color); } .form-control.is-invalid::placeholder { color: var(--lm-input-invalid-placeholder-text-color); } .dark-mode .form-group.is-invalid .form-control, .dark-mode .form-control.is-invalid { color: var(--dm-input-invalid-text-color); background-color: var(--dm-input-invalid-bg-color); border-color: var(--dm-input-invalid-border-color); -moz-box-shadow: var(--dm-input-invalid-box-shadow); -webkit-box-shadow: var(--dm-input-invalid-box-shadow); box-shadow: var(--dm-input-invalid-box-shadow); } .dark-mode .form-group.is-invalid .form-control:hover, .dark-mode .form-control.is-invalid:hover { color: var(--dm-input-invalid-text-color-hover); background-color: var(--dm-input-invalid-bg-color-hover); border-color: var(--dm-input-invalid-border-color-hover); -moz-box-shadow: var(--dm-input-invalid-box-shadow-hover); -webkit-box-shadow: var(--dm-input-invalid-box-shadow-hover); box-shadow: var(--dm-input-invalid-box-shadow-hover); } .dark-mode .form-group.is-invalid .form-control:focus, .dark-mode .form-control.is-invalid:focus { color: var(--dm-input-invalid-text-color-focus); background-color: var(--dm-input-invalid-bg-color-focus); border-color: var(--dm-input-invalid-border-color-focus); -moz-box-shadow: var(--dm-input-invalid-box-shadow-focus); -webkit-box-shadow: var(--dm-input-invalid-box-shadow-focus); box-shadow: var(--dm-input-invalid-box-shadow-focus); outline: none; } .dark-mode .form-group.is-invalid .form-control::-webkit-input-placeholder { /* Edge */ color: var(--dm-input-invalid-placeholder-text-color); } .dark-mode .form-group.is-invalid .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: var(--dm-input-invalid-placeholder-text-color); } .dark-mode .form-group.is-invalid .form-control::placeholder { color: var(--dm-input-invalid-placeholder-text-color); } .dark-mode .form-control.is-invalid::-webkit-input-placeholder { /* Edge */ color: var(--dm-input-invalid-placeholder-text-color); } .dark-mode .form-control.is-invalid:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: var(--dm-input-invalid-placeholder-text-color); } .dark-mode .form-control.is-invalid::placeholder { color: var(--dm-input-invalid-placeholder-text-color); } .dark-mode .form-group.is-invalid .form-control.alt-dm, .dark-mode .form-control.alt-dm.is-invalid { color: var(--dm-input-alt-invalid-text-color); background-color: var(--dm-input-alt-invalid-bg-color); border-color: var(--dm-input-alt-invalid-border-color); -moz-box-shadow: var(--dm-input-alt-invalid-box-shadow); -webkit-box-shadow: var(--dm-input-alt-invalid-box-shadow); box-shadow: var(--dm-input-alt-invalid-box-shadow); } .dark-mode .form-group.is-invalid .form-control.alt-dm:hover, .dark-mode .form-control.alt-dm.is-invalid:hover { color: var(--dm-input-alt-invalid-text-color-hover); background-color: var(--dm-input-alt-invalid-bg-color-hover); border-color: var(--dm-input-alt-invalid-border-color-hover); -moz-box-shadow: var(--dm-input-alt-invalid-box-shadow-hover); -webkit-box-shadow: var(--dm-input-alt-invalid-box-shadow-hover); box-shadow: var(--dm-input-alt-invalid-box-shadow-hover); } .dark-mode .form-group.is-invalid .form-control.alt-dm:focus, .dark-mode .form-control.alt-dm.is-invalid:focus { color: var(--dm-input-alt-invalid-text-color-focus); background-color: var(--dm-input-alt-invalid-bg-color-focus); border-color: var(--dm-input-alt-invalid-border-color-focus); -moz-box-shadow: var(--dm-input-alt-invalid-box-shadow-focus); -webkit-box-shadow: var(--dm-input-alt-invalid-box-shadow-focus); box-shadow: var(--dm-input-alt-invalid-box-shadow-focus); outline: none; } .dark-mode .form-group.is-invalid .form-control.alt-dm.is-invalid::-webkit-input-placeholder { /* Edge */ color: var(--dm-input-alt-invalid-placeholder-text-color); } .dark-mode .form-group.is-invalid .form-control.alt-dm.is-invalid:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: var(--dm-input-alt-invalid-placeholder-text-color); } .dark-mode .form-group.is-invalid .form-control.alt-dm.is-invalid::placeholder { color: var(--dm-input-alt-invalid-placeholder-text-color); } .dark-mode .form-control.alt-dm.is-invalid::-webkit-input-placeholder { /* Edge */ color: var(--dm-input-alt-invalid-placeholder-text-color); } .dark-mode .form-control.alt-dm.is-invalid:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: var(--dm-input-alt-invalid-placeholder-text-color); } .dark-mode .form-control.alt-dm.is-invalid::placeholder { color: var(--dm-input-alt-invalid-placeholder-text-color); } /* Selects */ select.form-control:not([multiple]) { cursor: pointer; background-image: var(--select-bg-image); background-size: var(--select-bg-size); background-repeat: var(--select-bg-repeat); background-position: var(--select-bg-position); padding-right: var(--select-padding-right); } .dark-mode select.form-control:not([multiple]) > option { /* Required for some browsers, such as Firefox, or the old Ms Edge (ignored on webkit browsers) */ color: var(--dm-input-text-color); background-color: var(--dark-color); } .dark-mode select.form-control:not([multiple]) > option:hover { /* Required for some browsers, such as Firefox, or the old Ms Edge (ignored on webkit browsers) */ color: var(--dm-input-text-color); background-color: var(--primary-color); } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* This hack resets the select boxes to their defaults on IE, because it is not possible to remove the default dropdown arrow. */ select.form-control:not([multiple]) { background-image: none; background-size: auto; background-repeat: initial; background-position: 0% 0%; padding-right: 0; } } select.form-control[multiple] { overflow: auto; height: auto; padding: var(--input-horizontal-padding); } select.form-control-sm[multiple] { padding: var(--small-input-horizontal-padding); } select.form-control-lg[multiple] { padding: var(--large-input-horizontal-padding); } select.form-control[multiple] > option:not(:checked) { color: var(--lm-input-text-color); } .dark-mode select.form-control[multiple] > option:not(:checked) { color: var(--dm-input-text-color); } select.form-control[multiple] > option:disabled { color: var(--lm-muted-text-color); } .dark-mode select.form-control[multiple] > option:disabled { color: var(--dm-muted-text-color); } /* Checkbox */ .custom-checkbox { display: block; position: relative; line-height: var(--checkbox-line-height); } .custom-checkbox input[type="checkbox"] { /* Hide the default */ position: absolute; opacity: 0; height: 0; width: 0; } .custom-checkbox label { display: inline-block; margin-bottom: 0; padding-left: var(--checkbox-label-padding-left); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .custom-checkbox label.blank { padding-left: var(--checkbox-label-blank-padding-left); } .custom-checkbox label:before { content: ""; display: inline-block; position: absolute; height: var(--checkbox-width-height); width: var(--checkbox-width-height); top: 0; left: 0; background-color: var(--lm-checkbox-bg-color); border: var(--checkbox-border-width) solid var(--lm-checkbox-border-color); border-radius: var(--checkbox-border-radius); } .custom-checkbox input[type="checkbox"]:hover~label:before { background-color: var(--lm-checkbox-bg-color-hover); border-color: var(--lm-checkbox-border-color-hover); } .custom-checkbox input[type="checkbox"]:focus~label:before { border-color: var(--lm-checkbox-border-color-focus); -moz-box-shadow: var(--lm-checkbox-box-shadow-focus); -webkit-box-shadow: var(--lm-checkbox-box-shadow-focus); box-shadow: var(--lm-checkbox-box-shadow-focus); } .custom-checkbox input[type="checkbox"]:checked~label:before { background-color: var(--lm-checkbox-bg-color-checked); border-color: var(--lm-checkbox-border-color-checked); } .custom-checkbox input[type="checkbox"]:checked:focus~label:before { border-color: var(--lm-checkbox-border-color-checked-focus); -moz-box-shadow: var(--lm-checkbox-box-shadow-checked-focus); -webkit-box-shadow: var(--lm-checkbox-box-shadow-checked-focus); box-shadow: var(--lm-checkbox-box-shadow-checked-focus); } .dark-mode .custom-checkbox label:before { background-color: var(--dm-checkbox-bg-color); border-color: var(--dm-checkbox-border-color); } .dark-mode .custom-checkbox input[type="checkbox"]:hover~label:before { background-color: var(--dm-checkbox-bg-color-hover); border-color: var(--dm-checkbox-border-color-hover); } .dark-mode .custom-checkbox input[type="checkbox"]:focus~label:before { border-color: var(--dm-checkbox-border-color-focus); -moz-box-shadow: var(--dm-checkbox-box-shadow-focus); -webkit-box-shadow: var(--dm-checkbox-box-shadow-focus); box-shadow: var(--dm-checkbox-box-shadow-focus); } .dark-mode .custom-checkbox input[type="checkbox"]:checked~label:before { background-color: var(--dm-checkbox-bg-color-checked); border-color: var(--dm-checkbox-border-color-checked); } .dark-mode .custom-checkbox input[type="checkbox"]:checked:focus~label:before { border-color: var(--dm-checkbox-border-color-checked-focus); -moz-box-shadow: var(--dm-checkbox-box-shadow-checked-focus); -webkit-box-shadow: var(--dm-checkbox-box-shadow-checked-focus); box-shadow: var(--dm-checkbox-box-shadow-checked-focus); } .custom-checkbox label:after { content: ""; position: absolute; display: none; left: var(--checkbox-checkmark-left); top: var(--checkbox-checkmark-top); width: var(--checkbox-checkmark-width); height: var(--checkbox-checkmark-height); border: solid var(--lm-checkbox-checkmark-color); border-width: var(--checkbox-checkmark-border-width); -webkit-transform: var(--checkbox-checkmark-transform); -ms-transform: var(--checkbox-checkmark-transform); transform: var(--checkbox-checkmark-transform); } .dark-mode .custom-checkbox label:after { border-color: var(--dm-checkbox-checkmark-color); } .custom-checkbox input[type="checkbox"]:checked~label:after { display: block; } .custom-checkbox input[type="checkbox"]:disabled~label { opacity: 0.6; cursor: not-allowed; } .custom-checkbox input[type="checkbox"]:disabled~label:before, .custom-checkbox input[type="checkbox"]:hover:disabled~label:before { background-color: var(--lm-checkbox-bg-color); border-color: var(--lm-checkbox-border-color); } .custom-checkbox input[type="checkbox"]:disabled:checked~label:before, .custom-checkbox input[type="checkbox"]:hover:disabled:checked~label:before { background-color: var(--lm-checkbox-bg-color-checked); border-color: var(--lm-checkbox-border-color-checked); } .dark-mode .custom-checkbox input[type="checkbox"]:disabled~label:before, .dark-mode .custom-checkbox input[type="checkbox"]:hover:disabled~label:before { background-color: var(--dm-checkbox-bg-color); border-color: var(--dm-checkbox-border-color); } .dark-mode .custom-checkbox input[type="checkbox"]:disabled:checked~label:before, .dark-mode .custom-checkbox input[type="checkbox"]:hover:disabled:checked~label:before { background-color: var(--dm-checkbox-bg-color-checked); border-color: var(--dm-checkbox-border-color-checked); } /* Radio */ .custom-radio { display: block; position: relative; line-height: var(--radio-line-height); } .form-group .custom-radio { margin: var(--form-group-radio-margin); } .custom-radio input[type="radio"] { /* Hide the default */ position: absolute; opacity: 0; height: 0; width: 0; } .custom-radio label { display: inline-block; margin-bottom: 0; padding-left: var(--radio-label-padding-left); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .custom-radio label.blank { padding-left: var(--radio-label-blank-padding-left); } .custom-radio label:before { content: ""; display: inline-block; position: absolute; height: var(--radio-width-height); width: var(--radio-width-height); top: 0; left: 0; background-color: var(--lm-radio-bg-color); border: var(--radio-border-width) solid var(--lm-radio-border-color); border-radius: var(--radio-border-radius); } .custom-radio input[type="radio"]:hover~label:before { background-color: var(--lm-radio-bg-color-hover); border-color: var(--lm-radio-border-color-hover); } .custom-radio input[type="radio"]:focus~label:before { border-color: var(--lm-radio-border-color-focus); -moz-box-shadow: var(--lm-radio-box-shadow-focus); -webkit-box-shadow: var(--lm-radio-box-shadow-focus); box-shadow: var(--lm-radio-box-shadow-focus); } .custom-radio input[type="radio"]:checked~label:before { background-color: var(--lm-radio-bg-color-checked); border-color: var(--lm-radio-border-color-checked); } .custom-radio input[type="radio"]:checked:focus~label:before { border-color: var(--lm-radio-border-color-checked-focus); -moz-box-shadow: var(--lm-radio-box-shadow-checked-focus); -webkit-box-shadow: var(--lm-radio-box-shadow-checked-focus); box-shadow: var(--lm-radio-box-shadow-checked-focus); } .dark-mode .custom-radio label:before { background-color: var(--dm-radio-bg-color); border-color: var(--dm-radio-border-color); } .dark-mode .custom-radio input[type="radio"]:hover~label:before { background-color: var(--dm-radio-bg-color-hover); border-color: var(--dm-radio-border-color-hover); } .dark-mode .custom-radio input[type="radio"]:focus~label:before { border-color: var(--dm-radio-border-color-focus); -moz-box-shadow: var(--dm-radio-box-shadow-focus); -webkit-box-shadow: var(--dm-radio-box-shadow-focus); box-shadow: var(--dm-radio-box-shadow-focus); } .dark-mode .custom-radio input[type="radio"]:checked~label:before { background-color: var(--dm-radio-bg-color-checked); border-color: var(--dm-radio-border-color-checked); } .dark-mode .custom-radio input[type="radio"]:checked:focus~label:before { border-color: var(--dm-radio-border-color-checked-focus); -moz-box-shadow: var(--dm-radio-box-shadow-checked-focus); -webkit-box-shadow: var(--dm-radio-box-shadow-checked-focus); box-shadow: var(--dm-radio-box-shadow-checked-focus); } .custom-radio label:after{ content: ""; position: absolute; display: none; top: var(--radio-checkmark-top); left: var(--radio-checkmark-left); width: var(--radio-checkmark-width-height); height: var(--radio-checkmark-width-height); background-color: var(--lm-radio-checkmark-color); border-radius: var(--radio-checkmark-border-radius); } .dark-mode .custom-radio label:after { border-color: var(--dm-radio-checkmark-color); } .custom-radio input[type="radio"]:checked~label:after { display: block; } .custom-radio input[type="radio"]:disabled~label { opacity: 0.6; cursor: not-allowed; } .custom-radio input[type="radio"]:disabled~label:before, .custom-radio input[type="radio"]:hover:disabled~label:before { background-color: var(--lm-radio-bg-color); border-color: var(--lm-radio-border-color); } .custom-radio input[type="radio"]:disabled:checked~label:before, .custom-radio input[type="radio"]:hover:disabled:checked~label:before { background-color: var(--lm-radio-bg-color-checked); border-color: var(--lm-radio-border-color-checked); } .dark-mode .custom-radio input[type="radio"]:disabled~label:before, .dark-mode .custom-radio input[type="radio"]:hover:disabled~label:before { background-color: var(--dm-radio-bg-color); border-color: var(--dm-radio-border-color); } .dark-mode .custom-radio input[type="radio"]:disabled:checked~label:before, .dark-mode .custom-radio input[type="radio"]:hover:disabled:checked~label:before { background-color: var(--dm-radio-bg-color-checked); border-color: var(--dm-radio-border-color-checked); } /* Switch */ .custom-switch { display: block; position: relative; line-height: var(--switch-line-height); } .custom-switch input[type="checkbox"] { /* Hide the default */ position: absolute; opacity: 0; height: 0; width: 0; } .custom-switch label { display: inline-block; margin-bottom: 0; padding-left: var(--switch-label-padding-left); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .custom-switch label.blank { padding-left: var(--switch-label-blank-padding-left); } .custom-switch label:before { content: ""; display: inline-block; position: absolute; height: var(--switch-height); width: var(--switch-width); top: 0; left: 0; background-color: var(--lm-switch-bg-color); border: var(--switch-border-width) solid var(--lm-switch-border-color); border-radius: var(--switch-border-radius); } .custom-switch input[type="checkbox"]:hover~label:before { background-color: var(--lm-switch-bg-color-hover); border-color: var(--lm-switch-border-color-hover); } .custom-switch input[type="checkbox"]:focus~label:before { border-color: var(--lm-switch-border-color-focus); -moz-box-shadow: var(--lm-switch-box-shadow-focus); -webkit-box-shadow: var(--lm-switch-box-shadow-focus); box-shadow: var(--lm-switch-box-shadow-focus); } .custom-switch input[type="checkbox"]:checked~label:before { background-color: var(--lm-switch-bg-color-checked); border-color: var(--lm-switch-border-color-checked); } .custom-switch input[type="checkbox"]:checked:focus~label:before { border-color: var(--lm-switch-border-color-checked-focus); -moz-box-shadow: var(--lm-switch-box-shadow-checked-focus); -webkit-box-shadow: var(--lm-switch-box-shadow-checked-focus); box-shadow: var(--lm-switch-box-shadow-checked-focus); } .dark-mode .custom-switch label:before { background-color: var(--dm-switch-bg-color); border-color: var(--dm-switch-border-color); } .dark-mode .custom-switch input[type="checkbox"]:hover~label:before { background-color: var(--dm-switch-bg-color-hover); border-color: var(--dm-switch-border-color-hover); } .dark-mode .custom-switch input[type="checkbox"]:focus~label:before { border-color: var(--dm-switch-border-color-focus); -moz-box-shadow: var(--dm-switch-box-shadow-focus); -webkit-box-shadow: var(--dm-switch-box-shadow-focus); box-shadow: var(--dm-switch-box-shadow-focus); } .dark-mode .custom-switch input[type="checkbox"]:checked~label:before { background-color: var(--dm-switch-bg-color-checked); border-color: var(--dm-switch-border-color-checked); } .dark-mode .custom-switch input[type="checkbox"]:checked:focus~label:before { border-color: var(--dm-switch-border-color-checked-focus); -moz-box-shadow: var(--dm-switch-box-shadow-checked-focus); -webkit-box-shadow: var(--dm-switch-box-shadow-checked-focus); box-shadow: var(--dm-switch-box-shadow-checked-focus); } .custom-switch label:after{ content: ""; position: absolute; height: var(--switch-slider-width-height); width: var(--switch-slider-width-height); top: var(--switch-slider-top); left: var(--switch-slider-left); background-color: var(--lm-switch-slider-bg-color); border: var(--switch-slider-border-width) solid var(--lm-switch-slider-border-color); border-radius: var(--switch-slider-border-radius); -webkit-transition: left .1s; transition: left .1s; } .dark-mode .custom-switch label:after { background-color: var(--dm-switch-slider-bg-color); border-color: var(--dm-switch-slider-border-color); } .custom-switch input[type="checkbox"]:checked~label:after { top: var(--switch-slider-top-checked); left: var(--switch-slider-left-checked); background-color: var(--lm-switch-slider-bg-color-checked); border-color: var(--lm-switch-slider-border-color-checked); } .dark-mode .custom-switch input[type="checkbox"]:checked~label:after { background-color: var(--dm-switch-slider-bg-color-checked); border-color: var(--dm-switch-slider-border-color-checked); } .custom-switch input[type="checkbox"]:disabled~label { opacity: 0.6; cursor: not-allowed; } .custom-switch input[type="checkbox"]:disabled~label:before, .custom-switch input[type="checkbox"]:hover:disabled~label:before { background-color: var(--lm-switch-bg-color); border-color: var(--lm-switch-border-color); } .custom-switch input[type="checkbox"]:disabled:checked~label:before, .custom-switch input[type="checkbox"]:hover:disabled:checked~label:before { background-color: var(--lm-switch-bg-color-checked); border-color: var(--lm-switch-border-color-checked); } .dark-mode .custom-switch input[type="checkbox"]:disabled~label:before, .dark-mode .custom-switch input[type="checkbox"]:hover:disabled~label:before { background-color: var(--dm-switch-bg-color); border-color: var(--dm-switch-border-color); } .dark-mode .custom-switch input[type="checkbox"]:disabled:checked~label:before, .dark-mode .custom-switch input[type="checkbox"]:hover:disabled:checked~label:before { background-color: var(--dm-switch-bg-color-checked); border-color: var(--dm-switch-border-color-checked); } /* Input file */ .custom-file { display: block; position: relative; } .custom-file input[type="file"] { /* Hide the default */ position: absolute; opacity: 0; height: 0; width: 0; z-index: -1; /* Needed to stop the default button from interfering in some browsers, such as Safari */ } .custom-file label { display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; height: var(--input-file-button-height); line-height: var(--input-file-button-line-height); padding: var(--input-file-button-padding); color: var(--lm-input-file-button-text-color); background-color: var(--lm-input-file-button-bg-color); background-image: var(--lm-input-file-button-bg-image); border: var(--input-file-button-border-width) solid var(--lm-input-file-button-border-color); border-radius: var(--input-file-button-border-radius); -moz-box-shadow: var(--lm-input-file-button-box-shadow); -webkit-box-shadow: var(--lm-input-file-button-box-shadow); box-shadow: var(--lm-input-file-button-box-shadow); } .custom-file label:hover { color: var(--lm-input-file-button-text-color-hover); background-color: var(--lm-input-file-button-bg-color-hover); background-image: var(--lm-input-file-button-bg-image-hover); border-color: var(--lm-input-file-button-border-color-hover); -moz-box-shadow: var(--lm-input-file-button-box-shadow-hover); -webkit-box-shadow: var(--lm-input-file-button-box-shadow-hover); box-shadow: var(--lm-input-file-button-box-shadow-hover); } .custom-file input[type="file"]:focus~label { color: var(--lm-input-file-button-text-color-focus); background-color: var(--lm-input-file-button-bg-color-focus); background-image: var(--lm-input-file-button-bg-image-focus); border-color: var(--lm-input-file-button-border-color-focus); -moz-box-shadow: var(--lm-input-file-button-box-shadow-focus); -webkit-box-shadow: var(--lm-input-file-button-box-shadow-focus); box-shadow: var(--lm-input-file-button-box-shadow-focus); } .custom-file input[type="file"]:focus:hover~label { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: var(--lm-input-file-button-text-color-hover); background-color: var(--lm-input-file-button-bg-color-hover); background-image: var(--lm-input-file-button-bg-image-hover); } .dark-mode .custom-file label { color: var(--dm-input-file-button-text-color); background-color: var(--dm-input-file-button-bg-color); background-image: var(--dm-input-file-button-bg-image); border-color: var(--dm-input-file-button-border-color); -moz-box-shadow: var(--dm-input-file-button-box-shadow); -webkit-box-shadow: var(--dm-input-file-button-box-shadow); box-shadow: var(--dm-input-file-button-box-shadow); } .dark-mode .custom-file label:hover { color: var(--dm-input-file-button-text-color-hover); background-color: var(--dm-input-file-button-bg-color-hover); background-image: var(--dm-input-file-button-bg-image-hover); border-color: var(--dm-input-file-button-border-color-hover); -moz-box-shadow: var(--dm-input-file-button-box-shadow-hover); -webkit-box-shadow: var(--dm-input-file-button-box-shadow-hover); box-shadow: var(--dm-input-file-button-box-shadow-hover); } .dark-mode .custom-file input[type="file"]:focus~label { color: var(--dm-input-file-button-text-color-focus); background-color: var(--dm-input-file-button-bg-color-focus); background-image: var(--dm-input-file-button-bg-image-focus); border-color: var(--dm-input-file-button-border-color-focus); -moz-box-shadow: var(--dm-input-file-button-box-shadow-focus); -webkit-box-shadow: var(--dm-input-file-button-box-shadow-focus); box-shadow: var(--dm-input-file-button-box-shadow-focus); } .dark-mode .custom-file input[type="file"]:focus:hover~label { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: var(--dm-input-file-button-text-color-hover); background-color: var(--dm-input-file-button-bg-color-hover); background-image: var(--dm-input-file-button-bg-image-hover); } .custom-file input[type="file"]:disabled~label, .custom-file:hover input[type="file"]:disabled~label { opacity: 0.6; cursor: not-allowed; color: var(--lm-input-file-button-text-color); background-color: var(--lm-input-file-button-bg-color); background-image: var(--lm-input-file-button-bg-image); border-color: var(--lm-input-file-button-border-color); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .dark-mode .custom-file input[type="file"]:disabled~label, .dark-mode .custom-file:hover input[type="file"]:disabled~label { color: var(--dm-input-file-button-text-color); background-color: var(--dm-input-file-button-bg-color); background-image: var(--dm-input-file-button-bg-image); border-color: var(--dm-input-file-button-border-color); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .custom-file input[type="file"]:disabled~.file-names { opacity: 0.6; pointer-events: none; } /* Invalid input file */ .form-group.is-invalid .custom-file label, .custom-file input[type="file"].is-invalid~label { color: var(--lm-input-file-button-invalid-text-color); background-color: var(--lm-input-file-button-invalid-bg-color); background-image: var(--lm-input-file-button-invalid-bg-image); border-color: var(--lm-input-file-button-invalid-border-color); -moz-box-shadow: var(--lm-input-file-button-invalid-box-shadow); -webkit-box-shadow: var(--lm-input-file-button-invalid-box-shadow); box-shadow: var(--lm-input-file-button-invalid-box-shadow); } .form-group.is-invalid .custom-file label:hover, .custom-file input[type="file"].is-invalid~label:hover { color: var(--lm-input-file-button-invalid-text-color-hover); background-color: var(--lm-input-file-button-invalid-bg-color-hover); background-image: var(--lm-input-file-button-invalid-bg-image-hover); border-color: var(--lm-input-file-button-invalid-border-color-hover); -moz-box-shadow: var(--lm-input-file-button-invalid-box-shadow-hover); -webkit-box-shadow: var(--lm-input-file-button-invalid-box-shadow-hover); box-shadow: var(--lm-input-file-button-invalid-box-shadow-hover); } .form-group.is-invalid .custom-file input[type="file"]:focus~label, .custom-file input[type="file"].is-invalid:focus~label { color: var(--lm-input-file-button-invalid-text-color-focus); background-color: var(--lm-input-file-button-invalid-bg-color-focus); background-image: var(--lm-input-file-button-invalid-bg-image-focus); border-color: var(--lm-input-file-button-invalid-border-color-focus); -moz-box-shadow: var(--lm-input-file-button-invalid-box-shadow-focus); -webkit-box-shadow: var(--lm-input-file-button-invalid-box-shadow-focus); box-shadow: var(--lm-input-file-button-invalid-box-shadow-focus); } .form-group.is-invalid .custom-file input[type="file"]:focus:hover~label, .custom-file input[type="file"].is-invalid:focus:hover~label { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: var(--lm-input-file-button-invalid-text-color-hover); background-color: var(--lm-input-file-button-invalid-bg-color-hover); background-image: var(--lm-input-file-button-invalid-bg-image-hover); } .dark-mode .form-group.is-invalid .custom-file label, .dark-mode .custom-file input[type="file"].is-invalid~label { color: var(--dm-input-file-button-invalid-text-color); background-color: var(--dm-input-file-button-invalid-bg-color); background-image: var(--dm-input-file-button-invalid-bg-image); border-color: var(--dm-input-file-button-invalid-border-color); -moz-box-shadow: var(--dm-input-file-button-invalid-box-shadow); -webkit-box-shadow: var(--dm-input-file-button-invalid-box-shadow); box-shadow: var(--dm-input-file-button-invalid-box-shadow); } .dark-mode .form-group.is-invalid .custom-file label:hover, .dark-mode .custom-file input[type="file"].is-invalid~label:hover { color: var(--dm-input-file-button-invalid-text-color-hover); background-color: var(--dm-input-file-button-invalid-bg-color-hover); background-image: var(--dm-input-file-button-invalid-bg-image-hover); border-color: var(--dm-input-file-button-invalid-border-color-hover); -moz-box-shadow: var(--dm-input-file-button-invalid-box-shadow-hover); -webkit-box-shadow: var(--dm-input-file-button-invalid-box-shadow-hover); box-shadow: var(--dm-input-file-button-invalid-box-shadow-hover); } .dark-mode .form-group.is-invalid .custom-file input[type="file"]:focus~label, .dark-mode .custom-file input[type="file"].is-invalid:focus~label { color: var(--dm-input-file-button-invalid-text-color-focus); background-color: var(--dm-input-file-button-invalid-bg-color-focus); background-image: var(--dm-input-file-button-invalid-bg-image-focus); border-color: var(--dm-input-file-button-invalid-border-color-focus); -moz-box-shadow: var(--dm-input-file-button-invalid-box-shadow-focus); -webkit-box-shadow: var(--dm-input-file-button-invalid-box-shadow-focus); box-shadow: var(--dm-input-file-button-invalid-box-shadow-focus); } .dark-mode .form-group.is-invalid .custom-file input[type="file"]:focus:hover~label, .dark-mode .custom-file input[type="file"].is-invalid:focus:hover~label { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: var(--dm-input-file-button-invalid-text-color-hover); background-color: var(--dm-input-file-button-invalid-bg-color-hover); background-image: var(--dm-input-file-button-invalid-bg-image-hover); } /* Input group */ .input-group { position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: stretch; align-items: stretch; width: 100%; } .input-group > .form-control { position: relative; -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; margin-bottom: 0; } .input-group-prepend, .input-group-append { display: -ms-flexbox; display: flex; } .input-group-prepend > .btn, .input-group-append > .btn { position: relative; } .input-group-sm > .form-control { height: var(--small-input-height); padding-left: var(--small-input-horizontal-padding); padding-right: var(--small-input-horizontal-padding); font-size: var(--small-input-font-size); } .input-group-lg > .form-control { height: var(--large-input-height); padding-left: var(--large-input-horizontal-padding); padding-right: var(--large-input-horizontal-padding); font-size: var(--large-input-font-size); } /* Input group text */ .input-group-text { white-space: nowrap; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; text-align: center; height: 100%; padding-left: var(--input-group-text-horizontal-padding); padding-right: var(--input-group-text-horizontal-padding); color: var(--lm-input-group-text-text-color); background-color: var(--lm-input-group-text-bg-color); border: var(--input-group-text-border-width) solid var(--lm-input-group-text-border-color); border-radius: var(--input-group-text-border-radius); } .dark-mode .input-group-text { color: var(--dm-input-group-text-text-color); background-color: var(--dm-input-group-text-bg-color); border-color: var(--dm-input-group-text-border-color); } .input-group-sm .input-group-text { padding-left: var(--small-input-group-text-horizontal-padding); padding-right: var(--small-input-group-text-horizontal-padding); font-size: var(--small-input-group-text-font-size); } .input-group-lg .input-group-text { padding-left: var(--large-input-group-text-horizontal-padding); padding-right: var(--large-input-group-text-horizontal-padding); font-size: var(--large-input-group-text-font-size); } /* Input group button */ .input-group-sm > .input-group-prepend > .btn, .input-group-sm > .input-group-append > .btn { height: var(--small-button-height); line-height: var(--small-button-line-height); padding: var(--small-button-padding); font-size: var(--small-button-font-size); } .input-group-lg > .input-group-prepend > .btn, .input-group-lg > .input-group-append > .btn { height: var(--large-button-height); line-height: var(--large-button-line-height); padding: var(--large-button-padding); font-size: var(--large-button-font-size); } .input-group-sm > .input-group-prepend > .btn-square, .input-group-sm > .input-group-append > .btn-square { width: var(--small-button-height); padding-left: 0; padding-right: 0; } .input-group-lg > .input-group-prepend > .btn-square, .input-group-lg > .input-group-append > .btn-square { width: var(--large-button-height); padding-left: 0; padding-right: 0; } .input-group-sm > .input-group-prepend > .btn-rounded, .input-group-sm > .input-group-append > .btn-rounded { border-radius: var(--small-button-rounded-border-radius); } .input-group-lg > .input-group-prepend > .btn-rounded, .input-group-lg > .input-group-append > .btn-rounded { border-radius: var(--large-button-rounded-border-radius); } /* Input group borders */ .input-group > .form-control:not(:first-child), .input-group-prepend:not(:first-child) > .input-group-text, .input-group-append:not(:first-child) > .input-group-text, .input-group-prepend:not(:first-child) > .btn, .input-group-append:not(:first-child) > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group > .form-control:not(:last-child), .input-group-prepend:not(:last-child) > .input-group-text, .input-group-append:not(:last-child) > .input-group-text, .input-group-prepend:not(:last-child) > .btn, .input-group-append:not(:last-child) > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group > .form-control:focus, .input-group-prepend > .btn:focus, .input-group-prepend > .btn.active, .input-group-append > .btn:focus, .input-group-append > .btn.active { z-index: 1; } .input-group > .form-control:not(:first-child) { margin-left: calc((-1) * var(--input-border-width)); } .input-group-prepend:not(:first-child) > .input-group-text, .input-group-append:not(:first-child) > .input-group-text { margin-left: calc((-1) * var(--input-group-text-border-width)); } .input-group-prepend:not(:first-child) > .btn, .input-group-append:not(:first-child) > .btn { margin-left: calc((-1) * var(--button-border-width)); } /* Buttons (only border colors) */ .input-group-prepend > .btn, .input-group-append > .btn { border-color: var(--lm-input-group-button-border-color); } .input-group-prepend > .btn:hover, .input-group-append > .btn:hover { border-color: var(--lm-input-group-button-border-color-hover); } .input-group-prepend > .btn:focus, .input-group-append > .btn:focus, .input-group-prepend > .btn.active, .input-group-append > .btn.active { border-color: var(--lm-input-group-button-border-color-focus); } .dark-mode .input-group-prepend > .btn, .dark-mode .input-group-append > .btn { border-color: var(--dm-input-group-button-border-color); } .dark-mode .input-group-prepend > .btn:hover, .dark-mode .input-group-append > .btn:hover { border-color: var(--dm-input-group-button-border-color-hover); } .dark-mode .input-group-prepend > .btn:focus, .dark-mode .input-group-append > .btn:focus, .dark-mode .input-group-prepend > .btn.active, .dark-mode .input-group-append > .btn.active { border-color: var(--dm-input-group-button-border-color-focus); } /* Link button */ .input-group-prepend > .btn.btn-link, .input-group-append > .btn.btn-link { border-color: var(--lm-input-group-button-link-border-color); } .input-group-prepend > .btn.btn-link:hover, .input-group-append > .btn.btn-link:hover { border-color: var(--lm-input-group-button-link-border-color-hover); } .input-group-prepend > .btn.btn-link:focus, .input-group-append > .btn.btn-link:focus, .input-group-prepend > .btn.btn-link.active, .input-group-append > .btn.btn-link.active { border-color: var(--lm-input-group-button-link-border-color-focus); } .dark-mode .input-group-prepend > .btn.btn-link, .dark-mode .input-group-append > .btn.btn-link { border-color: var(--dm-input-group-button-link-border-color); } .dark-mode .input-group-prepend > .btn.btn-link:hover, .dark-mode .input-group-append > .btn.btn-link:hover { border-color: var(--dm-input-group-button-link-border-color-hover); } .dark-mode .input-group-prepend > .btn.btn-link:focus, .dark-mode .input-group-append > .btn.btn-link:focus, .dark-mode .input-group-prepend > .btn.btn-link.active, .dark-mode .input-group-append > .btn.btn-link.active { border-color: var(--dm-input-group-button-link-border-color-focus); } /* Primary button */ .input-group-prepend > .btn.btn-primary, .input-group-append > .btn.btn-primary { border-color: var(--lm-input-group-button-primary-border-color); } .input-group-prepend > .btn.btn-primary:hover, .input-group-append > .btn.btn-primary:hover { border-color: var(--lm-input-group-button-primary-border-color-hover); } .input-group-prepend > .btn.btn-primary:focus, .input-group-append > .btn.btn-primary:focus, .input-group-prepend > .btn.btn-primary.active, .input-group-append > .btn.btn-primary.active { border-color: var(--lm-input-group-button-primary-border-color-focus); } .dark-mode .input-group-prepend > .btn.btn-primary, .dark-mode .input-group-append > .btn.btn-primary { border-color: var(--dm-input-group-button-primary-border-color); } .dark-mode .input-group-prepend > .btn.btn-primary:hover, .dark-mode .input-group-append > .btn.btn-primary:hover { border-color: var(--dm-input-group-button-primary-border-color-hover); } .dark-mode .input-group-prepend > .btn.btn-primary:focus, .dark-mode .input-group-append > .btn.btn-primary:focus, .dark-mode .input-group-prepend > .btn.btn-primary.active, .dark-mode .input-group-append > .btn.btn-primary.active { border-color: var(--dm-input-group-button-primary-border-color-focus); } /* Success button */ .input-group-prepend > .btn.btn-success, .input-group-append > .btn.btn-success { border-color: var(--lm-input-group-button-success-border-color); } .input-group-prepend > .btn.btn-success:hover, .input-group-append > .btn.btn-success:hover { border-color: var(--lm-input-group-button-success-border-color-hover); } .input-group-prepend > .btn.btn-success:focus, .input-group-append > .btn.btn-success:focus, .input-group-prepend > .btn.btn-success.active, .input-group-append > .btn.btn-success.active { border-color: var(--lm-input-group-button-success-border-color-focus); } .dark-mode .input-group-prepend > .btn.btn-success, .dark-mode .input-group-append > .btn.btn-success { border-color: var(--dm-input-group-button-success-border-color); } .dark-mode .input-group-prepend > .btn.btn-success:hover, .dark-mode .input-group-append > .btn.btn-success:hover { border-color: var(--dm-input-group-button-success-border-color-hover); } .dark-mode .input-group-prepend > .btn.btn-success:focus, .dark-mode .input-group-append > .btn.btn-success:focus, .dark-mode .input-group-prepend > .btn.btn-success.active, .dark-mode .input-group-append > .btn.btn-success.active { border-color: var(--dm-input-group-button-success-border-color-focus); } /* Secondary button */ .input-group-prepend > .btn.btn-secondary, .input-group-append > .btn.btn-secondary { border-color: var(--lm-input-group-button-secondary-border-color); } .input-group-prepend > .btn.btn-secondary:hover, .input-group-append > .btn.btn-secondary:hover { border-color: var(--lm-input-group-button-secondary-border-color-hover); } .input-group-prepend > .btn.btn-secondary:focus, .input-group-append > .btn.btn-secondary:focus, .input-group-prepend > .btn.btn-secondary.active, .input-group-append > .btn.btn-secondary.active { border-color: var(--lm-input-group-button-secondary-border-color-focus); } .dark-mode .input-group-prepend > .btn.btn-secondary, .dark-mode .input-group-append > .btn.btn-secondary { border-color: var(--dm-input-group-button-secondary-border-color); } .dark-mode .input-group-prepend > .btn.btn-secondary:hover, .dark-mode .input-group-append > .btn.btn-secondary:hover { border-color: var(--dm-input-group-button-secondary-border-color-hover); } .dark-mode .input-group-prepend > .btn.btn-secondary:focus, .dark-mode .input-group-append > .btn.btn-secondary:focus, .dark-mode .input-group-prepend > .btn.btn-secondary.active, .dark-mode .input-group-append > .btn.btn-secondary.active { border-color: var(--dm-input-group-button-secondary-border-color-focus); } /* Danger button */ .input-group-prepend > .btn.btn-danger, .input-group-append > .btn.btn-danger { border-color: var(--lm-input-group-button-danger-border-color); } .input-group-prepend > .btn.btn-danger:hover, .input-group-append > .btn.btn-danger:hover { border-color: var(--lm-input-group-button-danger-border-color-hover); } .input-group-prepend > .btn.btn-danger:focus, .input-group-append > .btn.btn-danger:focus, .input-group-prepend > .btn.btn-danger.active, .input-group-append > .btn.btn-danger.active { border-color: var(--lm-input-group-button-danger-border-color-focus); } .dark-mode .input-group-prepend > .btn.btn-danger, .dark-mode .input-group-append > .btn.btn-danger { border-color: var(--dm-input-group-button-danger-border-color); } .dark-mode .input-group-prepend > .btn.btn-danger:hover, .dark-mode .input-group-append > .btn.btn-danger:hover { border-color: var(--dm-input-group-button-danger-border-color-hover); } .dark-mode .input-group-prepend > .btn.btn-danger:focus, .dark-mode .input-group-append > .btn.btn-danger:focus, .dark-mode .input-group-prepend > .btn.btn-danger.active, .dark-mode .input-group-append > .btn.btn-danger.active { border-color: var(--dm-input-group-button-danger-border-color-focus); } /* ------------------------------------------------------------------------------- 12. Dropdown [hm-12] ------------------------------------------------------------------------------- */ .dropdown { display: inline-block; position: relative; } /* Dropdown menu */ .dropdown-menu { position: absolute; visibility: hidden; z-index: 10; text-align: left; width: auto; min-width: var(--dropdown-menu-min-width); padding: var(--dropdown-menu-padding); color: var(--lm-dropdown-menu-text-color); background-color: var(--lm-dropdown-menu-bg-color); background-image: var(--lm-dropdown-menu-bg-image); border: var(--dropdown-menu-border-width) solid var(--lm-dropdown-menu-border-color); border-radius: var(--dropdown-menu-border-radius); -moz-box-shadow: var(--lm-dropdown-menu-box-shadow); -webkit-box-shadow: var(--lm-dropdown-menu-box-shadow); box-shadow: var(--lm-dropdown-menu-box-shadow); } .dark-mode .dropdown-menu { color: var(--dm-dropdown-menu-text-color); background-color: var(--dm-dropdown-menu-bg-color); background-image: var(--dm-dropdown-menu-bg-image); border-color: var(--dm-dropdown-menu-border-color); -moz-box-shadow: var(--dm-dropdown-menu-box-shadow); -webkit-box-shadow: var(--dm-dropdown-menu-box-shadow); box-shadow: var(--dm-dropdown-menu-box-shadow); } /* Arrows (::before for border, ::after for background) */ .dropdown.with-arrow.show .dropdown-menu::before, .dropdown.with-arrow.show .dropdown-menu::after, .dropdown.with-arrow.toggle-on-hover:hover .dropdown-menu::before, .dropdown.with-arrow.toggle-on-hover:hover .dropdown-menu::after { content: " "; width: 0; height: 0; display: inline-block; position: absolute; z-index: 10; } /* Dropdown content */ .dropdown-content { display: block; padding: var(--dropdown-content-padding); } .dropdown-content > ul, .dropdown-content > ol { margin-left: 0; } /* Dropdown divider */ .dropdown-divider { height: var(--dropdown-divider-height); background-color: var(--lm-dropdown-divider-bg-color); } .dark-mode .dropdown-divider { background-color: var(--dm-dropdown-divider-bg-color); } /* Dropdown item */ .dropdown-item { display: block; white-space: nowrap; padding: var(--dropdown-item-padding); border-radius: var(--dropdown-item-border-radius); color: var(--lm-dropdown-item-text-color); background-color: var(--lm-dropdown-item-bg-color); } .dropdown-item:hover { text-decoration: none; color: var(--lm-dropdown-item-text-color-hover); background-color: var(--lm-dropdown-item-bg-color-hover); } .dark-mode .dropdown-item { color: var(--dm-dropdown-item-text-color); background-color: var(--dm-dropdown-item-bg-color); } .dark-mode .dropdown-item:hover { color: var(--dm-dropdown-item-text-color-hover); background-color: var(--dm-dropdown-item-bg-color-hover); } /* Dropdown header */ .dropdown-header { font-size: var(--dropdown-header-font-size); font-weight: var(--dropdown-header-font-weight); padding: var(--dropdown-header-padding); margin: var(--dropdown-header-margin); color: var(--lm-dropdown-header-text-color); } .dark-mode .dropdown-header { color: var(--dm-dropdown-header-text-color); } /* Normal dropdown */ .dropdown:not(.dropup):not(.dropright):not(.dropleft) .dropdown-menu { bottom: 50%; transform: translateY(50%); } .dropdown:not(.dropup):not(.dropright):not(.dropleft) .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right) { left: 0; } .dropdown:not(.dropup):not(.dropright):not(.dropleft) .dropdown-menu.dropdown-menu-center { left: 50%; transform: translate(-50%, 50%); } .dropdown:not(.dropup):not(.dropright):not(.dropleft) .dropdown-menu.dropdown-menu-right { right: 0; } .dropdown:not(.dropup):not(.dropright):not(.dropleft).show .dropdown-menu, .dropdown:not(.dropup):not(.dropright):not(.dropleft).toggle-on-hover:hover .dropdown-menu { bottom: 0; transform: translateY(100%); visibility: visible; -webkit-transition: bottom 0.1s, transform 0.1s, visibility 0.1s; transition: bottom 0.1s, transform 0.1s, visibility 0.1s; } .dropdown:not(.dropup):not(.dropright):not(.dropleft).show .dropdown-menu.dropdown-menu-center, .dropdown:not(.dropup):not(.dropright):not(.dropleft).toggle-on-hover:hover .dropdown-menu.dropdown-menu-center { transform: translate(-50%, 100%); } /* Normal dropdown arrows (::before for border, ::after for background) */ .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu, .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu { bottom: var(--dropdown-arrow-size-negative); } .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu::before, .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu::after, .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu::before, .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu::after { border-left: var(--dropdown-arrow-size) solid transparent; border-right: var(--dropdown-arrow-size) solid transparent; border-bottom: var(--dropdown-arrow-size) solid var(--lm-dropdown-menu-border-color); top: var(--dropdown-arrow-size-negative); } .dark-mode .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu::before, .dark-mode .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu::after, .dark-mode .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu::before, .dark-mode .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu::after { border-bottom-color: var(--dm-dropdown-menu-border-color); } .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu::after, .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu::after { border-bottom-color: var(--lm-dropdown-menu-bg-color); top: var(--dropdown-arrow-inner-spacing); } .dark-mode .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu::after, .dark-mode .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu::after { border-bottom-color: var(--dm-dropdown-menu-bg-color); } .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::before, .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::after, .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::before, .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::after { left: var(--dropdown-arrow-horizontal-spacing); } .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::before, .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::after, .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu.dropdown-menu-center::before, .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu.dropdown-menu-center::after { left: calc(50% - var(--dropdown-arrow-size)); } .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-right::before, .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-right::after, .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu.dropdown-menu-right::before, .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu.dropdown-menu-right::after { right: var(--dropdown-arrow-horizontal-spacing); } /* Dropup */ .dropdown.dropup .dropdown-menu { top: 50%; transform: translateY(-50%); } .dropdown.dropup .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right) { left: 0; } .dropdown.dropup .dropdown-menu.dropdown-menu-center { left: 50%; transform: translate(-50%, -50%); } .dropdown.dropup .dropdown-menu.dropdown-menu-right { right: 0; } .dropdown.dropup.show .dropdown-menu, .dropdown.dropup.toggle-on-hover:hover .dropdown-menu { top: 0; transform: translateY(-100%); visibility: visible; -webkit-transition: top 0.1s, transform 0.1s, visibility 0.1s; transition: top 0.1s, transform 0.1s, visibility 0.1s; } .dropdown.dropup.show .dropdown-menu.dropdown-menu-center, .dropdown.dropup.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center { transform: translate(-50%, -100%); } /* Dropup arrows (::before for border, ::after for background) */ .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu, .dropdown.dropup.with-arrow.show .dropdown-menu { top: var(--dropdown-arrow-size-negative); } .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu::before, .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu::after, .dropdown.dropup.with-arrow.show .dropdown-menu::before, .dropdown.dropup.with-arrow.show .dropdown-menu::after { border-left: var(--dropdown-arrow-size) solid transparent; border-right: var(--dropdown-arrow-size) solid transparent; border-top: var(--dropdown-arrow-size) solid var(--lm-dropdown-menu-border-color); bottom: var(--dropdown-arrow-size-negative); } .dark-mode .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu::before, .dark-mode .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu::after, .dark-mode .dropdown.dropup.with-arrow.show .dropdown-menu::before, .dark-mode .dropdown.dropup.with-arrow.show .dropdown-menu::after { border-top-color: var(--dm-dropdown-menu-border-color); } .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu::after, .dropdown.dropup.with-arrow.show .dropdown-menu::after { border-top-color: var(--lm-dropdown-menu-bg-color); bottom: var(--dropdown-arrow-inner-spacing); } .dark-mode .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu::after, .dark-mode .dropdown.dropup.with-arrow.show .dropdown-menu::after { border-top-color: var(--dm-dropdown-menu-bg-color); } .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::before, .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::after, .dropdown.dropup.with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::before, .dropdown.dropup.with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::after { left: var(--dropdown-arrow-horizontal-spacing); } .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::before, .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::after, .dropdown.dropup.with-arrow.show .dropdown-menu.dropdown-menu-center::before, .dropdown.dropup.with-arrow.show .dropdown-menu.dropdown-menu-center::after { left: calc(50% - var(--dropdown-arrow-size)); } .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-right::before, .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-right::after, .dropdown.dropup.with-arrow.show .dropdown-menu.dropdown-menu-right::before, .dropdown.dropup.with-arrow.show .dropdown-menu.dropdown-menu-right::after { right: var(--dropdown-arrow-horizontal-spacing); } /* Dropright */ .dropdown.dropright .dropdown-menu { right: 50%; transform: translateX(50%); } .dropdown.dropright .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up) { top: 0; } .dropdown.dropright .dropdown-menu.dropdown-menu-center { top: 50%; transform: translate(50%, -50%); } .dropdown.dropright .dropdown-menu.dropdown-menu-up { bottom: 0; } .dropdown.dropright.show .dropdown-menu, .dropdown.dropright.toggle-on-hover:hover .dropdown-menu { right: 0; transform: translateX(100%); visibility: visible; -webkit-transition: right 0.1s, transform 0.1s, visibility 0.1s; transition: right 0.1s, transform 0.1s, visibility 0.1s; } .dropdown.dropright.show .dropdown-menu.dropdown-menu-center, .dropdown.dropright.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center { transform: translate(100%, -50%); } /* Dropright arrows (::before for border, ::after for background) */ .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu, .dropdown.dropright.with-arrow.show .dropdown-menu { right: var(--dropdown-arrow-size-negative); } .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu::before, .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu::after, .dropdown.dropright.with-arrow.show .dropdown-menu::before, .dropdown.dropright.with-arrow.show .dropdown-menu::after { border-top: var(--dropdown-arrow-size) solid transparent; border-bottom: var(--dropdown-arrow-size) solid transparent; border-right: var(--dropdown-arrow-size) solid var(--lm-dropdown-menu-border-color); left: var(--dropdown-arrow-size-negative); } .dark-mode .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu::before, .dark-mode .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu::after, .dark-mode .dropdown.dropright.with-arrow.show .dropdown-menu::before, .dark-mode .dropdown.dropright.with-arrow.show .dropdown-menu::after { border-right-color: var(--dm-dropdown-menu-border-color); } .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu::after, .dropdown.dropright.with-arrow.show .dropdown-menu::after { border-right-color: var(--lm-dropdown-menu-bg-color); left: var(--dropdown-arrow-inner-spacing); } .dark-mode .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu::after, .dark-mode .dropdown.dropright.with-arrow.show .dropdown-menu::after { border-right-color: var(--dm-dropdown-menu-bg-color); } .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::before, .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::after, .dropdown.dropright.with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::before, .dropdown.dropright.with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::after { top: var(--dropdown-arrow-horizontal-spacing); } .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::before, .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::after, .dropdown.dropright.with-arrow.show .dropdown-menu.dropdown-menu-center::before, .dropdown.dropright.with-arrow.show .dropdown-menu.dropdown-menu-center::after { top: calc(50% - var(--dropdown-arrow-size)); } .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-up::before, .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-up::after, .dropdown.dropright.with-arrow.show .dropdown-menu.dropdown-menu-up::before, .dropdown.dropright.with-arrow.show .dropdown-menu.dropdown-menu-up::after { bottom: var(--dropdown-arrow-horizontal-spacing); } /* Dropleft */ .dropdown.dropleft .dropdown-menu { left: 50%; transform: translateX(-50%); } .dropdown.dropleft .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up) { top: 0; } .dropdown.dropleft .dropdown-menu.dropdown-menu-center { top: 50%; transform: translate(-50%, -50%); } .dropdown.dropleft .dropdown-menu.dropdown-menu-up { bottom: 0; } .dropdown.dropleft.show .dropdown-menu, .dropdown.dropleft.toggle-on-hover:hover .dropdown-menu { left: 0; transform: translateX(-100%); visibility: visible; -webkit-transition: left 0.1s, transform 0.1s, visibility 0.1s; transition: left 0.1s, transform 0.1s, visibility 0.1s; } .dropdown.dropleft.show .dropdown-menu.dropdown-menu-center, .dropdown.dropleft.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center { transform: translate(-100%, -50%); } /* Dropleft arrows (::before for border, ::after for background) */ .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu, .dropdown.dropleft.with-arrow.show .dropdown-menu { left: var(--dropdown-arrow-size-negative); } .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu::before, .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu::after, .dropdown.dropleft.with-arrow.show .dropdown-menu::before, .dropdown.dropleft.with-arrow.show .dropdown-menu::after { border-top: var(--dropdown-arrow-size) solid transparent; border-bottom: var(--dropdown-arrow-size) solid transparent; border-left: var(--dropdown-arrow-size) solid var(--lm-dropdown-menu-border-color); right: var(--dropdown-arrow-size-negative); } .dark-mode .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu::before, .dark-mode .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu::after, .dark-mode .dropdown.dropleft.with-arrow.show .dropdown-menu::before, .dark-mode .dropdown.dropleft.with-arrow.show .dropdown-menu::after { border-left-color: var(--dm-dropdown-menu-border-color); } .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu::after, .dropdown.dropleft.with-arrow.show .dropdown-menu::after { border-left-color: var(--lm-dropdown-menu-bg-color); right: var(--dropdown-arrow-inner-spacing); } .dark-mode .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu::after, .dark-mode .dropdown.dropleft.with-arrow.show .dropdown-menu::after { border-left-color: var(--dm-dropdown-menu-bg-color); } .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::before, .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::after, .dropdown.dropleft.with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::before, .dropdown.dropleft.with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::after { top: var(--dropdown-arrow-horizontal-spacing); } .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::before, .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::after, .dropdown.dropleft.with-arrow.show .dropdown-menu.dropdown-menu-center::before, .dropdown.dropleft.with-arrow.show .dropdown-menu.dropdown-menu-center::after { top: calc(50% - var(--dropdown-arrow-size)); } .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-up::before, .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-up::after, .dropdown.dropleft.with-arrow.show .dropdown-menu.dropdown-menu-up::before, .dropdown.dropleft.with-arrow.show .dropdown-menu.dropdown-menu-up::after { bottom: var(--dropdown-arrow-horizontal-spacing); } /* ------------------------------------------------------------------------------- 13. Modal [hm-13] ------------------------------------------------------------------------------- */ .modal { position: absolute; top: -100%; left: 0; width: 100%; height: 100%; overflow: auto; background-color: var(--lm-modal-overlay-bg-color); -webkit-transition: all .4s cubic-bezier(.25, .8, .25, 1); transition: all .4s cubic-bezier(.25, .8, .25, 1); z-index: 99; outline: none; } .dark-mode .modal { background-color: var(--dm-modal-overlay-bg-color); } .modal-dialog { position: absolute; display: -ms-flexbox; display: flex; flex-direction: column; top: -100%; left: 0; width: 100%; height: 100%; overflow: auto; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* This hack corrects the scrollable modal content on IE. */ .modal.ie-scroll-fix .modal-dialog { display: block; } } .modal-content { margin: auto; width: var(--modal-content-width); max-width: 100%; padding: var(--modal-content-padding); color: var(--lm-modal-content-text-color); background-color: var(--lm-modal-content-bg-color); background-image: var(--lm-modal-content-bg-image); border: var(--modal-content-border-width) solid var(--lm-modal-content-border-color); border-radius: var(--modal-content-border-radius); -moz-box-shadow: var(--lm-modal-content-box-shadow); -webkit-box-shadow: var(--lm-modal-content-box-shadow); box-shadow: var(--lm-modal-content-box-shadow); } .dark-mode .modal-content { color: var(--dm-modal-content-text-color); background-color: var(--dm-modal-content-bg-color); background-image: var(--dm-modal-content-bg-image); border-color: var(--dm-modal-content-border-color); -moz-box-shadow: var(--dm-modal-content-box-shadow); -webkit-box-shadow: var(--dm-modal-content-box-shadow); box-shadow: var(--dm-modal-content-box-shadow); } @media (max-width: 576px) { .modal-content { padding: var(--modal-content-padding-xs); } } .modal-title { font-size: var(--modal-title-font-size); font-weight: var(--modal-title-font-weight); margin-top: 0; } .modal-content-media, .dark-mode .modal-content-media { padding: 0; background-color: transparent; border: none; border-radius: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .modal-content-media img, .modal-content-media video { display: block; } .modal-full .modal-content { width: 100%; border: none; border-radius: 0; padding: var(--modal-full-content-padding); color: var(--lm-modal-full-content-text-color); background-color: var(--lm-modal-full-content-bg-color); background-image: var(--lm-modal-full-content-bg-image); } .dark-mode .modal-full .modal-content { color: var(--dm-modal-full-content-text-color); background-color: var(--dm-modal-full-content-bg-color); background-image: var(--dm-modal-full-content-bg-image); } @media (max-width: 576px) { .modal-full .modal-content { padding: var(--modal-full-content-padding-xs); } } .modal-content .close { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; position: fixed; cursor: pointer; top: -100%; left: 1rem; z-index: 10; padding: 0; -webkit-transition: all .4s cubic-bezier(.25, .8, .25, 1); transition: all .4s cubic-bezier(.25, .8, .25, 1); font-size: var(--modal-close-font-size); width: var(--modal-close-width-height); height: var(--modal-close-width-height); color: var(--lm-modal-close-text-color); background-color: var(--lm-modal-close-bg-color); border-radius: var(--modal-close-border-radius); border-color: transparent; } .modal-content .close:hover { text-decoration: none; color: var(--lm-modal-close-text-color-hover); background-color: var(--lm-modal-close-bg-color-hover); } .dark-mode .modal-content .close { color: var(--dm-modal-close-text-color); background-color: var(--dm-modal-close-bg-color); } .dark-mode .modal-content .close:hover { color: var(--dm-modal-close-text-color-hover); background-color: var(--dm-modal-close-bg-color-hover); } .modal-content .close:focus { -webkit-transition: none; transition: none; outline: var(--modal-close-outline-width) var(--modal-close-outline-type) var(--lm-modal-close-outline-color-focus); outline-offset: var(--modal-close-outline-offset); } .dark-mode .modal-content .close:focus { outline-color: var(--dm-modal-close-outline-color-focus); } /* Showing modals */ .modal:target, .modal.show { top: 0; } .modal:target ~ .page-wrapper .sidebar, .modal:target ~ .page-wrapper .content-wrapper, .modal.show ~ .page-wrapper .sidebar, .modal.show ~ .page-wrapper .content-wrapper { overflow: hidden; } .modal:target .modal-dialog, .modal.show .modal-dialog { top: 0; } .modal:target .modal-content .close, .modal.show .modal-content .close { top: 1rem; } /* ------------------------------------------------------------------------------- 14. Alerts [hm-14] ------------------------------------------------------------------------------- */ .alert { position: relative; padding: var(--alert-padding); color: var(--lm-alert-text-color); background-color: var(--lm-alert-bg-color); background-image: var(--lm-alert-bg-image); border: var(--alert-border-width) solid var(--lm-alert-border-color); border-radius: var(--alert-border-radius); } .dark-mode .alert { color: var(--dm-alert-text-color); background-color: var(--dm-alert-bg-color); background-image: var(--dm-alert-bg-image); border-color: var(--dm-alert-border-color); } .alert-heading, .dark-mode .alert-heading { color: inherit; font-size: var(--alert-heading-font-size); font-weight: var(--alert-heading-font-weight); margin: var(--alert-heading-margin); } .alert-link, .dark-mode .alert-link { cursor: pointer; color: inherit; text-decoration: underline; } .alert-link:hover, .dark-mode .alert-link:hover { color: inherit; opacity: 0.75; } .alert .close { position: absolute; top: 0; right: 0; cursor: pointer; color: inherit; padding: var(--alert-close-padding); line-height: var(--alert-close-line-height); font-size: var(--alert-close-font-size); background-color: transparent; border-color: transparent; } .alert .close:focus { outline: var(--alert-close-outline-width) var(--alert-close-outline-type) var(--lm-alert-close-outline-color-focus); outline-offset: var(--alert-close-outline-offset); } .dark-mode .alert .close:focus { outline-color: var(--dm-alert-close-outline-color-focus); } .alert.dispose { display: none; } /* Sticky alerts */ .sticky-alerts .alert { display: none; width: var(--sticky-alert-width); margin-top: 1rem; right: -50rem; /* Hidden by default */ -moz-box-shadow: var(--sticky-alert-box-shadow); -webkit-box-shadow: var(--sticky-alert-box-shadow); box-shadow: var(--sticky-alert-box-shadow); } .sticky-alerts .alert.show { right: 0; -webkit-transition: right .4s cubic-bezier(.25, .8, .25, 1); transition: right .4s cubic-bezier(.25, .8, .25, 1); } .sticky-alerts .alert.fade { visibility: hidden; opacity: 0; -webkit-transition: visibility 0s .4s, opacity .4s linear; transition: visibility 0s .4s, opacity .4s linear; } .sticky-alerts .alert.alert-block { display: block; } .sticky-alerts .alert.alert-block.dispose { display: none; } /* Filled alerts (primary, success, secondary, danger) */ /* Light mode */ .alert.alert-primary.filled, .alert.alert-primary.filled-lm { color: var(--lm-alert-filled-primary-text-color); background-color: var(--lm-alert-filled-primary-bg-color); background-image: var(--lm-alert-filled-primary-bg-image); border-color: var(--lm-alert-filled-primary-border-color); } .alert.alert-success.filled, .alert.alert-success.filled-lm { color: var(--lm-alert-filled-success-text-color); background-color: var(--lm-alert-filled-success-bg-color); background-image: var(--lm-alert-filled-success-bg-image); border-color: var(--lm-alert-filled-success-border-color); } .alert.alert-secondary.filled, .alert.alert-secondary.filled-lm { color: var(--lm-alert-filled-secondary-text-color); background-color: var(--lm-alert-filled-secondary-bg-color); background-image: var(--lm-alert-filled-secondary-bg-image); border-color: var(--lm-alert-filled-secondary-border-color); } .alert.alert-danger.filled, .alert.alert-danger.filled-lm { color: var(--lm-alert-filled-danger-text-color); background-color: var(--lm-alert-filled-danger-bg-color); background-image: var(--lm-alert-filled-danger-bg-image); border-color: var(--lm-alert-filled-danger-border-color); } /* Dark mode */ .dark-mode .alert.alert-primary.filled, .dark-mode .alert.alert-primary.filled-dm { color: var(--dm-alert-filled-primary-text-color); background-color: var(--dm-alert-filled-primary-bg-color); background-image: var(--dm-alert-filled-primary-bg-image); border-color: var(--dm-alert-filled-primary-border-color); -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .dark-mode .alert.alert-success.filled, .dark-mode .alert.alert-success.filled-dm { color: var(--dm-alert-filled-success-text-color); background-color: var(--dm-alert-filled-success-bg-color); background-image: var(--dm-alert-filled-success-bg-image); border-color: var(--dm-alert-filled-success-border-color); -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .dark-mode .alert.alert-secondary.filled, .dark-mode .alert.alert-secondary.filled-dm { color: var(--dm-alert-filled-secondary-text-color); background-color: var(--dm-alert-filled-secondary-bg-color); background-image: var(--dm-alert-filled-secondary-bg-image); border-color: var(--dm-alert-filled-secondary-border-color); -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .dark-mode .alert.alert-danger.filled, .dark-mode .alert.alert-danger.filled-dm { color: var(--dm-alert-filled-danger-text-color); background-color: var(--dm-alert-filled-danger-bg-color); background-image: var(--dm-alert-filled-danger-bg-image); border-color: var(--dm-alert-filled-danger-border-color); -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } /* Contextual alerts (primary, success, secondary, danger) */ /* Light mode */ .alert.alert-primary { color: var(--lm-alert-primary-text-color); background-color: var(--lm-alert-primary-bg-color); background-image: var(--lm-alert-primary-bg-image); border-color: var(--lm-alert-primary-border-color); } .alert.alert-success { color: var(--lm-alert-success-text-color); background-color: var(--lm-alert-success-bg-color); background-image: var(--lm-alert-success-bg-image); border-color: var(--lm-alert-success-border-color); } .alert.alert-secondary { color: var(--lm-alert-secondary-text-color); background-color: var(--lm-alert-secondary-bg-color); background-image: var(--lm-alert-secondary-bg-image); border-color: var(--lm-alert-secondary-border-color); } .alert.alert-danger { color: var(--lm-alert-danger-text-color); background-color: var(--lm-alert-danger-bg-color); background-image: var(--lm-alert-danger-bg-image); border-color: var(--lm-alert-danger-border-color); } /* Dark mode */ .dark-mode .alert.alert-primary { color: var(--dm-alert-primary-text-color); background-color: var(--dm-alert-primary-bg-color); background-image: var(--dm-alert-primary-bg-image); border-color: var(--dm-alert-primary-border-color); } .dark-mode .alert.alert-success { color: var(--dm-alert-success-text-color); background-color: var(--dm-alert-success-bg-color); background-image: var(--dm-alert-success-bg-image); border-color: var(--dm-alert-success-border-color); } .dark-mode .alert.alert-secondary { color: var(--dm-alert-secondary-text-color); background-color: var(--dm-alert-secondary-bg-color); background-image: var(--dm-alert-secondary-bg-image); border-color: var(--dm-alert-secondary-border-color); } .dark-mode .alert.alert-danger { color: var(--dm-alert-danger-text-color); background-color: var(--dm-alert-danger-bg-color); background-image: var(--dm-alert-danger-bg-image); border-color: var(--dm-alert-danger-border-color); } /* ------------------------------------------------------------------------------- 15. Navbar content [hm-15] ------------------------------------------------------------------------------- */ .navbar .container, .navbar .container-sm, .navbar .container-md, .navbar .container-lg, .navbar .container-xl, .navbar .container-fluid { width: 100%; position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-pack: start; justify-content: flex-start; padding-left: var(--navbar-container-horizontal-padding); padding-right: var(--navbar-container-horizontal-padding); } @media (max-width: 576px) { .navbar .container, .navbar .container-sm, .navbar .container-md, .navbar .container-lg, .navbar .container-xl, .navbar .container-fluid { padding-left: var(--navbar-container-horizontal-padding-xs); padding-right: var(--navbar-container-horizontal-padding-xs); } } .navbar-brand, .navbar-nav, .navbar-text, .navbar-content { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; min-width: 0; } .navbar-brand:not(:first-child), .navbar-nav:not(:first-child), .navbar-text:not(:first-child), .navbar-content:not(:first-child), .navbar > .form-inline:not(:first-child) { margin-left: var(--navbar-content-horizontal-margin); } /* Navbar text */ .navbar-text { color: var(--lm-navbar-text-color); } .dark-mode .navbar-text { color: var(--dm-navbar-text-color); } /* Navbar nav */ .navbar-nav { padding-left: 0; margin-bottom: 0; list-style: none; height: var(--navbar-height); } .nav-item { height: 100%; margin-bottom: 0; } .nav-link { cursor: pointer; /* Needed if used without the href attribute, for example, as dropdown toggle */ display: inline-block; display: flex; align-items: center; height: 100%; white-space: nowrap; padding-left: var(--navbar-link-horizontal-padding); padding-right: var(--navbar-link-horizontal-padding); color: var(--lm-navbar-link-text-color); background-color: var(--lm-navbar-link-bg-color); } .dark-mode .nav-link { color: var(--dm-navbar-link-text-color); background-color: var(--dm-navbar-link-bg-color); } .nav-link:hover { color: var(--lm-navbar-link-text-color-hover); background-color: var(--lm-navbar-link-bg-color-hover); text-decoration: none; } .dark-mode .nav-link:hover { color: var(--dm-navbar-link-text-color-hover); background-color: var(--dm-navbar-link-bg-color-hover); } .nav-item.active > .nav-link, .nav-item.show > .nav-link { color: var(--lm-navbar-link-active-text-color); background-color: var(--lm-navbar-link-active-bg-color); } .dark-mode .nav-item.active > .nav-link, .dark-mode .nav-item.show > .nav-link { color: var(--dm-navbar-link-active-text-color); background-color: var(--dm-navbar-link-active-bg-color); -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .nav-item.active > .nav-link:hover, .nav-item.show > .nav-link:hover { color: var(--lm-navbar-link-active-text-color-hover); background-color: var(--lm-navbar-link-active-bg-color-hover); } .dark-mode .nav-item.active > .nav-link:hover, .dark-mode .nav-item.show > .nav-link:hover { color: var(--dm-navbar-link-active-text-color-hover); background-color: var(--dm-navbar-link-active-bg-color-hover); } .navbar-nav:first-child > .nav-item:first-child > .nav-link { padding-left: 0; } .navbar-nav:last-child > .nav-item:last-child > .nav-link { padding-right: 0; } /* Navbar brand */ .navbar-brand { font-size: var(--navbar-brand-font-size); font-weight: var(--navbar-brand-font-weight); color: var(--lm-navbar-brand-text-color); } .dark-mode .navbar-brand { color: var(--dm-navbar-brand-text-color); } .navbar-brand:hover { color: var(--lm-navbar-brand-text-color-hover); text-decoration: none; } .dark-mode .navbar-brand:hover { color: var(--dm-navbar-brand-text-color-hover); } .navbar-brand img { height: var(--navbar-brand-image-height); margin-right: var(--navbar-brand-image-margin-right); } /* Navbar action button */ .navbar .btn-action { width: var(--navbar-action-button-width); padding-left: var(--navbar-action-button-horizontal-padding); padding-right: var(--navbar-action-button-horizontal-padding); } /* Navbar minimum widths for inline forms (Required for IE) */ .navbar > .form-inline > .form-control, .navbar > .form-inline > .form-group .form-control { min-width: var(--navbar-input-min-width); } .navbar > .form-inline > .input-group { min-width: var(--navbar-input-group-min-width); } @media (max-width: 576px) { .navbar > .form-inline > .form-control, .navbar > .form-inline > .form-group .form-control { min-width: var(--navbar-input-min-width-xs); } .navbar > .form-inline > .input-group { min-width: var(--navbar-input-group-min-width-xs); } } /* ------------------------------------------------------------------------------- 16. Sidebar content [hm-16] ------------------------------------------------------------------------------- */ .sidebar-menu { margin-top: var(--sidebar-menu-vertical-margin); margin-bottom: var(--sidebar-menu-vertical-margin); } /* Sidebar content */ .sidebar-content { display: block; padding: var(--sidebar-content-padding); margin: var(--sidebar-content-margin); } .sidebar-content > ul, .sidebar-content > ol { margin-left: 0; } /* Sidebar divider */ .sidebar-divider { padding: var(--sidebar-divider-padding); margin: var(--sidebar-divider-margin); height: var(--sidebar-divider-height); background-color: var(--lm-sidebar-divider-bg-color); } .dark-mode .sidebar-divider { background-color: var(--dm-sidebar-divider-bg-color); } /* Sidebar link */ .sidebar-link { display: block; padding: var(--sidebar-link-padding); margin: var(--sidebar-link-margin); min-height: var(--sidebar-link-height); height: auto; color: var(--lm-sidebar-link-text-color); background-color: var(--lm-sidebar-link-bg-color); border: var(--sidebar-link-border-width) solid var(--lm-sidebar-link-border-color); border-radius: var(--sidebar-link-border-radius); } .sidebar-link:hover { text-decoration: none; color: var(--lm-sidebar-link-text-color-hover); background-color: var(--lm-sidebar-link-bg-color-hover); border-color: var(--lm-sidebar-link-border-color-hover); } .dark-mode .sidebar-link { color: var(--dm-sidebar-link-text-color); background-color: var(--dm-sidebar-link-bg-color); border-color: var(--dm-sidebar-link-border-color); } .dark-mode .sidebar-link:hover { color: var(--dm-sidebar-link-text-color-hover); background-color: var(--dm-sidebar-link-bg-color-hover); border-color: var(--dm-sidebar-link-border-color-hover); } .sidebar-link.active { color: var(--lm-sidebar-link-text-color-active); background-color: var(--lm-sidebar-link-bg-color-active); border-color: var(--lm-sidebar-link-border-color-active); } .sidebar-link.active:hover { color: var(--lm-sidebar-link-text-color-active-hover); background-color: var(--lm-sidebar-link-bg-color-active-hover); border-color: var(--lm-sidebar-link-border-color-active-hover); } .dark-mode .sidebar-link.active { color: var(--dm-sidebar-link-text-color-active); background-color: var(--dm-sidebar-link-bg-color-active); border-color: var(--dm-sidebar-link-border-color-active); -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .dark-mode .sidebar-link.active:hover { color: var(--dm-sidebar-link-text-color-active-hover); background-color: var(--dm-sidebar-link-bg-color-active-hover); border-color: var(--dm-sidebar-link-border-color-active-hover); } /* Sidebar title */ .sidebar-title { padding: var(--sidebar-title-padding); margin: var(--sidebar-title-margin); font-size: var(--sidebar-title-font-size); font-weight: var(--sidebar-title-font-weight); color: var(--lm-sidebar-title-text-color); } .dark-mode .sidebar-title { color: var(--dm-sidebar-title-text-color); } /* Sidebar link with icon */ .sidebar-link-with-icon { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; } .sidebar-icon { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; width: var(--sidebar-icon-width-height); height: var(--sidebar-icon-width-height); font-size: var(--sidebar-icon-font-size); margin-right: var(--sidebar-icon-margin-right); color: var(--lm-sidebar-icon-text-color); background-color: var(--lm-sidebar-icon-bg-color); border: var(--sidebar-icon-border-width) solid var(--lm-sidebar-icon-border-color); border-radius: var(--sidebar-icon-border-radius); } .sidebar-link-with-icon:hover .sidebar-icon { color: var(--lm-sidebar-icon-text-color-hover); background-color: var(--lm-sidebar-icon-bg-color-hover); border-color: var(--lm-sidebar-icon-border-color-hover); } .dark-mode .sidebar-icon { color: var(--dm-sidebar-icon-text-color); background-color: var(--dm-sidebar-icon-bg-color); border-color: var(--dm-sidebar-icon-border-color); } .dark-mode .sidebar-link-with-icon:hover .sidebar-icon { color: var(--dm-sidebar-icon-text-color-hover); background-color: var(--dm-sidebar-icon-bg-color-hover); border-color: var(--dm-sidebar-icon-border-color-hover); } .sidebar-link-with-icon.active .sidebar-icon { color: var(--lm-sidebar-icon-text-color-active); background-color: var(--lm-sidebar-icon-bg-color-active); border-color: var(--lm-sidebar-icon-border-color-active); } .sidebar-link-with-icon.active:hover .sidebar-icon { color: var(--lm-sidebar-icon-text-color-active-hover); background-color: var(--lm-sidebar-icon-bg-color-active-hover); border-color: var(--lm-sidebar-icon-border-color-active-hover); } .dark-mode .sidebar-link-with-icon.active .sidebar-icon { color: var(--dm-sidebar-icon-text-color-active); background-color: var(--dm-sidebar-icon-bg-color-active); border-color: var(--dm-sidebar-icon-border-color-active); } .dark-mode .sidebar-link-with-icon.active:hover .sidebar-icon { color: var(--dm-sidebar-icon-text-color-active-hover); background-color: var(--dm-sidebar-icon-bg-color-active-hover); border-color: var(--dm-sidebar-icon-border-color-active-hover); } /* Sidebar brand */ .sidebar-brand { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; padding: var(--sidebar-brand-padding); margin: var(--sidebar-brand-margin); font-size: var(--sidebar-brand-font-size); font-weight: var(--sidebar-brand-font-weight); color: var(--lm-sidebar-brand-text-color); } .dark-mode .sidebar-brand { color: var(--dm-sidebar-brand-text-color); } .sidebar-brand:hover { color: var(--lm-sidebar-brand-text-color-hover); text-decoration: none; } .dark-mode .sidebar-brand:hover { color: var(--dm-sidebar-brand-text-color-hover); } .sidebar-brand img { height: var(--sidebar-brand-image-height); margin-right: var(--sidebar-brand-image-margin-right); } /* ------------------------------------------------------------------------------- 17. Pagination [hm-17] ------------------------------------------------------------------------------- */ .page-item { display: inline-block; list-style: none; vertical-align: middle; margin-bottom: 0; } .page-item.ellipsis:before { content: "\2026"; } .page-item.ellipsis, .page-link { display: inline-block; padding: var(--pagination-item-padding); margin: var(--pagination-item-margin); font-size: var(--pagination-item-font-size); min-width: var(--pagination-item-width); height: var(--pagination-item-height); line-height: var(--pagination-item-line-height); text-align: center; color: var(--lm-pagination-item-text-color); background-color: var(--lm-pagination-item-bg-color); background-image: var(--lm-pagination-item-bg-image); border: var(--pagination-item-border-width) solid var(--lm-pagination-item-border-color); border-radius: var(--pagination-item-border-radius); } .dark-mode .page-item.ellipsis, .dark-mode .page-link { color: var(--dm-pagination-item-text-color); background-color: var(--dm-pagination-item-bg-color); background-image: var(--dm-pagination-item-bg-image); border-color: var(--dm-pagination-item-border-color); } .page-link { -moz-box-shadow: var(--lm-pagination-item-box-shadow); -webkit-box-shadow: var(--lm-pagination-item-box-shadow); box-shadow: var(--lm-pagination-item-box-shadow); } .dark-mode .page-link { -moz-box-shadow: var(--dm-pagination-item-box-shadow); -webkit-box-shadow: var(--dm-pagination-item-box-shadow); box-shadow: var(--dm-pagination-item-box-shadow); } .page-link:hover { text-decoration: none; color: var(--lm-pagination-item-text-color-hover); background-color: var(--lm-pagination-item-bg-color-hover); background-image: var(--lm-pagination-item-bg-image-hover); border-color: var(--lm-pagination-item-border-color-hover); -moz-box-shadow: var(--lm-pagination-item-box-shadow-hover); -webkit-box-shadow: var(--lm-pagination-item-box-shadow-hover); box-shadow: var(--lm-pagination-item-box-shadow-hover); } .dark-mode .page-link:hover { color: var(--dm-pagination-item-text-color-hover); background-color: var(--dm-pagination-item-bg-color-hover); background-image: var(--dm-pagination-item-bg-image-hover); border-color: var(--dm-pagination-item-border-color-hover); -moz-box-shadow: var(--dm-pagination-item-box-shadow-hover); -webkit-box-shadow: var(--dm-pagination-item-box-shadow-hover); box-shadow: var(--dm-pagination-item-box-shadow-hover); } .page-item.active .page-link { color: var(--lm-pagination-item-text-color-active); background-color: var(--lm-pagination-item-bg-color-active); background-image: var(--lm-pagination-item-bg-image-active); border-color: var(--lm-pagination-item-border-color-active); -moz-box-shadow: var(--lm-pagination-item-box-shadow-active); -webkit-box-shadow: var(--lm-pagination-item-box-shadow-active); box-shadow: var(--lm-pagination-item-box-shadow-active); pointer-events: none; } .dark-mode .page-item.active .page-link { color: var(--dm-pagination-item-text-color-active); background-color: var(--dm-pagination-item-bg-color-active); background-image: var(--dm-pagination-item-bg-image-active); border-color: var(--dm-pagination-item-border-color-active); -moz-box-shadow: var(--dm-pagination-item-box-shadow-active); -webkit-box-shadow: var(--dm-pagination-item-box-shadow-active); box-shadow: var(--dm-pagination-item-box-shadow-active); -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .pagination-rounded .page-item.ellipsis, .pagination-rounded .page-link { border-radius: 50%; } /* Large pagination */ .pagination-lg .page-item.ellipsis, .pagination-lg .page-link { padding: var(--large-pagination-item-padding); margin: var(--large-pagination-item-margin); font-size: var(--large-pagination-item-font-size); min-width: var(--large-pagination-item-width); height: var(--large-pagination-item-height); line-height: var(--large-pagination-item-line-height); } /* Small pagination */ .pagination-sm .page-item.ellipsis, .pagination-sm .page-link { padding: var(--small-pagination-item-padding); margin: var(--small-pagination-item-margin); font-size: var(--small-pagination-item-font-size); min-width: var(--small-pagination-item-width); height: var(--small-pagination-item-height); line-height: var(--small-pagination-item-line-height); } /* Disabled state */ .page-item.disabled .page-link, .dark-mode .page-item.disabled .page-link { opacity: 0.6; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; pointer-events: none; } /* ------------------------------------------------------------------------------- 18. Breadcrumb [hm-18] ------------------------------------------------------------------------------- */ .breadcrumb { padding: var(--breadcrumb-padding); background-color: var(--lm-breadcrumb-bg-color); border: var(--breadcrumb-border-width) solid var(--lm-breadcrumb-border-color); border-radius: var(--breadcrumb-border-radius); } .dark-mode .breadcrumb { background-color: var(--dm-breadcrumb-bg-color); border-color: var(--dm-breadcrumb-border-color); } .breadcrumb-item { display: inline-block; list-style: none; margin-bottom: 0; } .breadcrumb-item:before { content: var(--breadcrumb-separator-content); margin-left: var(--breadcrumb-separator-margin-left); margin-right: var(--breadcrumb-separator-margin-right); } .breadcrumb-item:first-child:before { display: none; } .breadcrumb-item.active a { pointer-events: none; color: inherit; } .dark-mode .breadcrumb-item a { /* Links are NOT antialiased because they are NOT light text on a dark bg. */ -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .dark-mode .breadcrumb-item.active a { /* Active links ARE antialiased because they ARE light text on a dark bg. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ------------------------------------------------------------------------------- 19. Tooltips [hm-19] ------------------------------------------------------------------------------- */ [data-toggle="tooltip"] { position: relative; } /* Tooltip arrow */ [data-toggle="tooltip"]::before { content: " "; width: var(--tooltip-arrow-width); height: var(--tooltip-arrow-height); background-color: var(--lm-tooltip-bg-color); position: absolute; visibility: hidden; opacity: 0; z-index: 90; } .dark-mode [data-toggle="tooltip"]::before { background-color: var(--dm-tooltip-bg-color); } /* Tooltip content */ [data-toggle="tooltip"]::after { content: attr(data-title); white-space: normal; width: var(--tooltip-width); font-size: var(--tooltip-font-size); line-height: var(--tooltip-line-height); padding: var(--tooltip-padding); color: var(--lm-tooltip-text-color); background-color: var(--lm-tooltip-bg-color); border-radius: var(--base-border-radius); text-align: center; position: absolute; visibility: hidden; z-index: 90; } .dark-mode [data-toggle="tooltip"]::after { color: var(--dm-tooltip-text-color); background-color: var(--dm-tooltip-bg-color); } /* Tooltip top */ [data-toggle="tooltip"]:not([data-placement])::before, [data-toggle="tooltip"][data-placement="top"]::before { left: 50%; top: -0.5rem; transform: translate(-50%, -100%) rotate(45deg); } [data-toggle="tooltip"]:not([data-placement])::after, [data-toggle="tooltip"][data-placement="top"]::after { left: 50%; top: 50%; transform: translate(-50%, -50%); } /* Tooltip bottom */ [data-toggle="tooltip"][data-placement="bottom"]::before { left: 50%; bottom: -0.5rem; transform: translate(-50%, 100%) rotate(45deg); } [data-toggle="tooltip"][data-placement="bottom"]::after { left: 50%; bottom: 50%; transform: translate(-50%, 50%); } /* Tooltip left */ [data-toggle="tooltip"][data-placement="left"]::before { left: -0.5rem; transform: translate(-100%, 100%) rotate(45deg); } [data-toggle="tooltip"][data-placement="left"]::after { left: 50%; top: 50%; transform: translate(-50%, -50%); } /* Tooltip right */ [data-toggle="tooltip"][data-placement="right"]::before { right: -0.5rem; transform: translate(100%, 100%) rotate(45deg); } [data-toggle="tooltip"][data-placement="right"]::after { right: 50%; top: 50%; transform: translate(50%, -50%); } /* Show tooltips (on all screens) */ /* Arrow */ [data-toggle="tooltip"]:not([data-target-breakpoint]):hover::before, [data-toggle="tooltip"]:not([data-target-breakpoint]):focus::before { visibility: visible; opacity: 1; transition: opacity 0.5s; -webkit-transition: opacity 0.5s; } /* Content */ [data-toggle="tooltip"]:not([data-target-breakpoint]):hover::after, [data-toggle="tooltip"]:not([data-target-breakpoint]):focus::after { visibility: visible; -webkit-transition: all 0.1s, color 0s, background-color 0s; transition: all 0.1s, color 0s, background-color 0s; } /* Placement */ [data-toggle="tooltip"]:not([data-target-breakpoint]):not([data-placement]):hover::after, [data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="top"]:hover::after, [data-toggle="tooltip"]:not([data-target-breakpoint]):not([data-placement]):focus::after, [data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="top"]:focus::after { top: -1rem; transform: translate(-50%, -100%); } [data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="bottom"]:hover::after, [data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="bottom"]:focus::after { bottom: -1rem; transform: translate(-50%, 100%); } [data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="left"]:hover::after, [data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="left"]:focus::after { left: -1rem; transform: translate(-100%, -50%); } [data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="right"]:hover::after, [data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="right"]:focus::after { right: -1rem; transform: translate(100%, -50%); } /* Show tooltips (only on screens with widths > 768px) */ @media (min-width: 769px) { /* Arrow */ [data-toggle="tooltip"][data-target-breakpoint="md"]:hover::before, [data-toggle="tooltip"][data-target-breakpoint="md"]:focus::before { visibility: visible; opacity: 1; transition: opacity 0.5s; -webkit-transition: opacity 0.5s; } /* Content */ [data-toggle="tooltip"][data-target-breakpoint="md"]:hover::after, [data-toggle="tooltip"][data-target-breakpoint="md"]:focus::after { visibility: visible; -webkit-transition: all 0.1s, color 0s, background-color 0s; transition: all 0.1s, color 0s, background-color 0s; } /* Placement */ [data-toggle="tooltip"][data-target-breakpoint="md"]:not([data-placement]):hover::after, [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="top"]:hover::after, [data-toggle="tooltip"][data-target-breakpoint="md"]:not([data-placement]):focus::after, [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="top"]:focus::after { top: -1rem; transform: translate(-50%, -100%); } [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="bottom"]:hover::after, [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="bottom"]:focus::after { bottom: -1rem; transform: translate(-50%, 100%); } [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="left"]:hover::after, [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="left"]:focus::after { left: -1rem; transform: translate(-100%, -50%); } [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="right"]:hover::after, [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="right"]:focus::after { right: -1rem; transform: translate(100%, -50%); } } /* Show tooltips (only on screens with widths > 992px) */ @media (min-width: 993px) { /* Arrow */ [data-toggle="tooltip"][data-target-breakpoint="lg"]:hover::before, [data-toggle="tooltip"][data-target-breakpoint="lg"]:focus::before { visibility: visible; opacity: 1; transition: opacity 0.5s; -webkit-transition: opacity 0.5s; } /* Content */ [data-toggle="tooltip"][data-target-breakpoint="lg"]:hover::after, [data-toggle="tooltip"][data-target-breakpoint="lg"]:focus::after { visibility: visible; -webkit-transition: all 0.1s, color 0s, background-color 0s; transition: all 0.1s, color 0s, background-color 0s; } /* Placement */ [data-toggle="tooltip"][data-target-breakpoint="lg"]:not([data-placement]):hover::after, [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="top"]:hover::after, [data-toggle="tooltip"][data-target-breakpoint="lg"]:not([data-placement]):focus::after, [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="top"]:focus::after { top: -1rem; transform: translate(-50%, -100%); } [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="bottom"]:hover::after, [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="bottom"]:focus::after { bottom: -1rem; transform: translate(-50%, 100%); } [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="left"]:hover::after, [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="left"]:focus::after { left: -1rem; transform: translate(-100%, -50%); } [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="right"]:hover::after, [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="right"]:focus::after { right: -1rem; transform: translate(100%, -50%); } } /* ------------------------------------------------------------------------------- 20. Badges [hm-20] ------------------------------------------------------------------------------- */ .badge { display: inline-block; position: relative; font-size: var(--badge-font-size); line-height: var(--badge-line-height); padding: var(--badge-padding); color: var(--lm-badge-text-color); background-color: var(--lm-badge-bg-color); border: var(--badge-border-width) solid var(--lm-badge-border-color); border-radius: var(--badge-border-radius); } .dark-mode .badge { color: var(--dm-badge-text-color); background-color: var(--dm-badge-bg-color); border-color: var(--dm-badge-border-color); } .badge-pill { border-radius: var(--badge-pill-border-radius); } /* Primary, success, secondary, danger badges. */ /* Light mode */ .badge.badge-primary { color: var(--lm-badge-primary-text-color); background-color: var(--lm-badge-primary-bg-color); border-color: var(--lm-badge-primary-border-color); } .badge.badge-success { color: var(--lm-badge-success-text-color); background-color: var(--lm-badge-success-bg-color); border-color: var(--lm-badge-success-border-color); } .badge.badge-secondary { color: var(--lm-badge-secondary-text-color); background-color: var(--lm-badge-secondary-bg-color); border-color: var(--lm-badge-secondary-border-color); } .badge.badge-danger { color: var(--lm-badge-danger-text-color); background-color: var(--lm-badge-danger-bg-color); border-color: var(--lm-badge-danger-border-color); } /* Dark mode */ .dark-mode .badge.badge-primary { color: var(--dm-badge-primary-text-color); background-color: var(--dm-badge-primary-bg-color); border-color: var(--dm-badge-primary-border-color); -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .dark-mode .badge.badge-success { color: var(--dm-badge-success-text-color); background-color: var(--dm-badge-success-bg-color); border-color: var(--dm-badge-success-border-color); -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .dark-mode .badge.badge-secondary { color: var(--dm-badge-secondary-text-color); background-color: var(--dm-badge-secondary-bg-color); border-color: var(--dm-badge-secondary-border-color); -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .dark-mode .badge.badge-danger { color: var(--dm-badge-danger-text-color); background-color: var(--dm-badge-danger-bg-color); border-color: var(--dm-badge-danger-border-color); -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } /* Badge group */ .badge-group { display: -ms-inline-flexbox; display: inline-flex; } .badge-group > .badge:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .badge-group > .badge:not(:last-child) { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; } /* Link badges */ /* Light mode */ a.badge:hover, a.badge-group:hover { text-decoration: none; } a.badge:hover, a.badge-group:hover > .badge { color: var(--lm-link-badge-text-color-hover); background-color: var(--lm-link-badge-bg-color-hover); border-color: var(--lm-link-badge-border-color-hover); } a.badge.badge-primary:hover, a.badge-group:hover > .badge.badge-primary { color: var(--lm-link-badge-primary-text-color-hover); background-color: var(--lm-link-badge-primary-bg-color-hover); border-color: var(--lm-link-badge-primary-border-color-hover); } a.badge.badge-success:hover, a.badge-group:hover > .badge.badge-success { color: var(--lm-link-badge-success-text-color-hover); background-color: var(--lm-link-badge-success-bg-color-hover); border-color: var(--lm-link-badge-success-border-color-hover); } a.badge.badge-secondary:hover, a.badge-group:hover > .badge.badge-secondary { color: var(--lm-link-badge-secondary-text-color-hover); background-color: var(--lm-link-badge-secondary-bg-color-hover); border-color: var(--lm-link-badge-secondary-border-color-hover); } a.badge.badge-danger:hover, a.badge-group:hover > .badge.badge-danger { color: var(--lm-link-badge-danger-text-color-hover); background-color: var(--lm-link-badge-danger-bg-color-hover); border-color: var(--lm-link-badge-danger-border-color-hover); } /* Dark mode */ .dark-mode a.badge:hover, .dark-mode a.badge-group:hover > .badge { color: var(--dm-link-badge-text-color-hover); background-color: var(--dm-link-badge-bg-color-hover); border-color: var(--dm-link-badge-border-color-hover); } .dark-mode a.badge.badge-primary:hover, .dark-mode a.badge-group:hover > .badge.badge-primary { color: var(--dm-link-badge-primary-text-color-hover); background-color: var(--dm-link-badge-primary-bg-color-hover); border-color: var(--dm-link-badge-primary-border-color-hover); } .dark-mode a.badge.badge-success:hover, .dark-mode a.badge-group:hover > .badge.badge-success { color: var(--dm-link-badge-success-text-color-hover); background-color: var(--dm-link-badge-success-bg-color-hover); border-color: var(--dm-link-badge-success-border-color-hover); } .dark-mode a.badge.badge-secondary:hover, .dark-mode a.badge-group:hover > .badge.badge-secondary { color: var(--dm-link-badge-secondary-text-color-hover); background-color: var(--dm-link-badge-secondary-bg-color-hover); border-color: var(--dm-link-badge-secondary-border-color-hover); } .dark-mode a.badge.badge-danger:hover, .dark-mode a.badge-group:hover > .badge.badge-danger { color: var(--dm-link-badge-danger-text-color-hover); background-color: var(--dm-link-badge-danger-bg-color-hover); border-color: var(--dm-link-badge-danger-border-color-hover); } /* ------------------------------------------------------------------------------- 21. Image [hm-21] ------------------------------------------------------------------------------- */ .img-fluid { max-width: 100%; height: auto; } /* ------------------------------------------------------------------------------- 22. Button group [hm-22] ------------------------------------------------------------------------------- */ .btn-group, .btn-group-vertical { position: relative; display: -ms-inline-flexbox; display: inline-flex; vertical-align: middle; } .btn-group > .btn, .btn-group-vertical > .btn { position: relative; -ms-flex: 1 1 auto; flex: 1 1 auto; } .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active, .btn-group-vertical > .btn:focus, .btn-group-vertical > .btn:active, .btn-group-vertical > .btn.active { z-index: 1; } .btn-group > .btn:not(:first-child), .btn-group > .btn-group:not(:first-child) { margin-left: calc((-1) * var(--button-border-width)); } .btn-group > .btn:not(:last-child):not([data-toggle="dropdown"]), .btn-group > .btn-group:not(:last-child) > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; } .btn-group > .btn:not(:first-child), .btn-group > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } .btn-group-vertical { -ms-flex-direction: column; flex-direction: column; -ms-flex-align: start; align-items: flex-start; -ms-flex-pack: center; justify-content: center; } .btn-group-vertical > .btn, .btn-group-vertical > .btn-group { width: 100%; } .btn-group-vertical > .btn:not(:first-child), .btn-group-vertical > .btn-group:not(:first-child) { margin-top: calc((-1) * var(--button-border-width)); } .btn-group-vertical > .btn:not(:last-child):not([data-toggle="dropdown"]), .btn-group-vertical > .btn-group:not(:last-child) > .btn { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .btn-group-vertical > .btn:not(:first-child), .btn-group-vertical > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-top-right-radius: 0; } /* Remove box shadow for button group vertical (except last button) */ .btn-group-vertical > .btn:not(:last-child):not([data-toggle="dropdown"]):not(:focus):not(.active), .btn-group-vertical > .btn-group:not(:last-child) > .btn:not(:focus):not(.active) { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } /* Button group sizing */ .btn-group-sm > .btn { height: var(--small-button-height); line-height: var(--small-button-line-height); padding: var(--small-button-padding); font-size: var(--small-button-font-size); } .btn-group-lg > .btn { height: var(--large-button-height); line-height: var(--large-button-line-height); padding: var(--large-button-padding); font-size: var(--large-button-font-size); } .btn-group-sm > .btn-square { width: var(--small-button-height); padding-left: 0; padding-right: 0; } .btn-group-lg > .btn-square { width: var(--large-button-height); padding-left: 0; padding-right: 0; } .btn-group-sm > .btn-rounded { border-radius: var(--small-button-rounded-border-radius); } .btn-group-lg > .btn-rounded { border-radius: var(--large-button-rounded-border-radius); } /* Button toolbar */ .btn-toolbar { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: start; justify-content: flex-start; } .btn-toolbar .input-group { width: auto; } /* Button toolbar minimum width for input groups (Required for IE) */ .btn-toolbar .input-group { min-width: var(--button-toolbar-input-group-min-width); } @media (max-width: 576px) { .btn-toolbar .input-group { min-width: var(--button-toolbar-input-group-min-width-xs); } } /* Buttons (only border colors) */ .btn-group > .btn, .btn-group-vertical > .btn { border-color: var(--lm-button-group-button-border-color); } .btn-group > .btn:hover, .btn-group-vertical > .btn:hover { border-color: var(--lm-button-group-button-border-color-hover); } .btn-group > .btn:focus, .btn-group-vertical > .btn:focus, .btn-group > .btn.active, .btn-group-vertical > .btn.active { border-color: var(--lm-button-group-button-border-color-focus); } .dark-mode .btn-group > .btn, .dark-mode .btn-group-vertical > .btn { border-color: var(--dm-button-group-button-border-color); } .dark-mode .btn-group > .btn:hover, .dark-mode .btn-group-vertical > .btn:hover { border-color: var(--dm-button-group-button-border-color-hover); } .dark-mode .btn-group > .btn:focus, .dark-mode .btn-group-vertical > .btn:focus, .dark-mode .btn-group > .btn.active, .dark-mode .btn-group-vertical > .btn.active { border-color: var(--dm-button-group-button-border-color-focus); } /* Link button */ .btn-group > .btn.btn-link, .btn-group-vertical > .btn.btn-link { border-color: var(--lm-button-group-button-link-border-color); } .btn-group > .btn.btn-link:hover, .btn-group-vertical > .btn.btn-link:hover { border-color: var(--lm-button-group-button-link-border-color-hover); } .btn-group > .btn.btn-link:focus, .btn-group-vertical > .btn.btn-link:focus, .btn-group > .btn.btn-link.active, .btn-group-vertical > .btn.btn-link.active { border-color: var(--lm-button-group-button-link-border-color-focus); } .dark-mode .btn-group > .btn.btn-link, .dark-mode .btn-group-vertical > .btn.btn-link { border-color: var(--dm-button-group-button-link-border-color); } .dark-mode .btn-group > .btn.btn-link:hover, .dark-mode .btn-group-vertical > .btn.btn-link:hover { border-color: var(--dm-button-group-button-link-border-color-hover); } .dark-mode .btn-group > .btn.btn-link:focus, .dark-mode .btn-group-vertical > .btn.btn-link:focus, .dark-mode .btn-group > .btn.btn-link.active, .dark-mode .btn-group-vertical > .btn.btn-link.active { border-color: var(--dm-button-group-button-link-border-color-focus); } /* Primary button */ .btn-group > .btn.btn-primary, .btn-group-vertical > .btn.btn-primary { border-color: var(--lm-button-group-button-primary-border-color); } .btn-group > .btn.btn-primary:hover, .btn-group-vertical > .btn.btn-primary:hover { border-color: var(--lm-button-group-button-primary-border-color-hover); } .btn-group > .btn.btn-primary:focus, .btn-group-vertical > .btn.btn-primary:focus, .btn-group > .btn.btn-primary.active, .btn-group-vertical > .btn.btn-primary.active { border-color: var(--lm-button-group-button-primary-border-color-focus); } .dark-mode .btn-group > .btn.btn-primary, .dark-mode .btn-group-vertical > .btn.btn-primary { border-color: var(--dm-button-group-button-primary-border-color); } .dark-mode .btn-group > .btn.btn-primary:hover, .dark-mode .btn-group-vertical > .btn.btn-primary:hover { border-color: var(--dm-button-group-button-primary-border-color-hover); } .dark-mode .btn-group > .btn.btn-primary:focus, .dark-mode .btn-group-vertical > .btn.btn-primary:focus, .dark-mode .btn-group > .btn.btn-primary.active, .dark-mode .btn-group-vertical > .btn.btn-primary.active { border-color: var(--dm-button-group-button-primary-border-color-focus); } /* Success button */ .btn-group > .btn.btn-success, .btn-group-vertical > .btn.btn-success { border-color: var(--lm-button-group-button-success-border-color); } .btn-group > .btn.btn-success:hover, .btn-group-vertical > .btn.btn-success:hover { border-color: var(--lm-button-group-button-success-border-color-hover); } .btn-group > .btn.btn-success:focus, .btn-group-vertical > .btn.btn-success:focus, .btn-group > .btn.btn-success.active, .btn-group-vertical > .btn.btn-success.active { border-color: var(--lm-button-group-button-success-border-color-focus); } .dark-mode .btn-group > .btn.btn-success, .dark-mode .btn-group-vertical > .btn.btn-success { border-color: var(--dm-button-group-button-success-border-color); } .dark-mode .btn-group > .btn.btn-success:hover, .dark-mode .btn-group-vertical > .btn.btn-success:hover { border-color: var(--dm-button-group-button-success-border-color-hover); } .dark-mode .btn-group > .btn.btn-success:focus, .dark-mode .btn-group-vertical > .btn.btn-success:focus, .dark-mode .btn-group > .btn.btn-success.active, .dark-mode .btn-group-vertical > .btn.btn-success.active { border-color: var(--dm-button-group-button-success-border-color-focus); } /* Secondary button */ .btn-group > .btn.btn-secondary, .btn-group-vertical > .btn.btn-secondary { border-color: var(--lm-button-group-button-secondary-border-color); } .btn-group > .btn.btn-secondary:hover, .btn-group-vertical > .btn.btn-secondary:hover { border-color: var(--lm-button-group-button-secondary-border-color-hover); } .btn-group > .btn.btn-secondary:focus, .btn-group-vertical > .btn.btn-secondary:focus, .btn-group > .btn.btn-secondary.active, .btn-group-vertical > .btn.btn-secondary.active { border-color: var(--lm-button-group-button-secondary-border-color-focus); } .dark-mode .btn-group > .btn.btn-secondary, .dark-mode .btn-group-vertical > .btn.btn-secondary { border-color: var(--dm-button-group-button-secondary-border-color); } .dark-mode .btn-group > .btn.btn-secondary:hover, .dark-mode .btn-group-vertical > .btn.btn-secondary:hover { border-color: var(--dm-button-group-button-secondary-border-color-hover); } .dark-mode .btn-group > .btn.btn-secondary:focus, .dark-mode .btn-group-vertical > .btn.btn-secondary:focus, .dark-mode .btn-group > .btn.btn-secondary.active, .dark-mode .btn-group-vertical > .btn.btn-secondary.active { border-color: var(--dm-button-group-button-secondary-border-color-focus); } /* Danger button */ .btn-group > .btn.btn-danger, .btn-group-vertical > .btn.btn-danger { border-color: var(--lm-button-group-button-danger-border-color); } .btn-group > .btn.btn-danger:hover, .btn-group-vertical > .btn.btn-danger:hover { border-color: var(--lm-button-group-button-danger-border-color-hover); } .btn-group > .btn.btn-danger:focus, .btn-group-vertical > .btn.btn-danger:focus, .btn-group > .btn.btn-danger.active, .btn-group-vertical > .btn.btn-danger.active { border-color: var(--lm-button-group-button-danger-border-color-focus); } .dark-mode .btn-group > .btn.btn-danger, .dark-mode .btn-group-vertical > .btn.btn-danger { border-color: var(--dm-button-group-button-danger-border-color); } .dark-mode .btn-group > .btn.btn-danger:hover, .dark-mode .btn-group-vertical > .btn.btn-danger:hover { border-color: var(--dm-button-group-button-danger-border-color-hover); } .dark-mode .btn-group > .btn.btn-danger:focus, .dark-mode .btn-group-vertical > .btn.btn-danger:focus, .dark-mode .btn-group > .btn.btn-danger.active, .dark-mode .btn-group-vertical > .btn.btn-danger.active { border-color: var(--dm-button-group-button-danger-border-color-focus); } /* ------------------------------------------------------------------------------- 23. Collapse [hm-23] ------------------------------------------------------------------------------- */ details, details * { /* Fixes Chrome bug */ box-sizing: border-box; } /* Collapse header */ .collapse-header { position: relative; cursor: pointer; padding: var(--collapse-header-padding); font-size: var(--collapse-header-font-size); color: var(--lm-collapse-header-text-color); background-color: var(--lm-collapse-header-bg-color); border: var(--collapse-header-border-width) solid var(--lm-collapse-header-border-color); border-radius: var(--collapse-header-border-radius); -moz-box-shadow: var(--lm-collapse-header-box-shadow); -webkit-box-shadow: var(--lm-collapse-header-box-shadow); box-shadow: var(--lm-collapse-header-box-shadow); } .dark-mode .collapse-header { color: var(--dm-collapse-header-text-color); background-color: var(--dm-collapse-header-bg-color); border-color: var(--dm-collapse-header-border-color); -moz-box-shadow: var(--dm-collapse-header-box-shadow); -webkit-box-shadow: var(--dm-collapse-header-box-shadow); box-shadow: var(--dm-collapse-header-box-shadow); } .collapse-header:focus { color: var(--lm-collapse-header-text-color-focus); background-color: var(--lm-collapse-header-bg-color-focus); border-color: var(--lm-collapse-header-border-color-focus); -moz-box-shadow: var(--lm-collapse-header-box-shadow-focus); -webkit-box-shadow: var(--lm-collapse-header-box-shadow-focus); box-shadow: var(--lm-collapse-header-box-shadow-focus); outline: var(--lm-collapse-header-outline-focus); } .dark-mode .collapse-header:focus { color: var(--dm-collapse-header-text-color-focus); background-color: var(--dm-collapse-header-bg-color-focus); border-color: var(--dm-collapse-header-border-color-focus); -moz-box-shadow: var(--dm-collapse-header-box-shadow-focus); -webkit-box-shadow: var(--dm-collapse-header-box-shadow-focus); box-shadow: var(--dm-collapse-header-box-shadow-focus); outline: var(--dm-collapse-header-outline-focus); } .collapse-panel[open] .collapse-header { color: var(--lm-open-collapse-header-text-color); background-color: var(--lm-open-collapse-header-bg-color); border-color: var(--lm-open-collapse-header-border-color); -moz-box-shadow: var(--lm-open-collapse-header-box-shadow); -webkit-box-shadow: var(--lm-open-collapse-header-box-shadow); box-shadow: var(--lm-open-collapse-header-box-shadow); } .dark-mode .collapse-panel[open] .collapse-header { color: var(--dm-open-collapse-header-text-color); background-color: var(--dm-open-collapse-header-bg-color); border-color: var(--dm-open-collapse-header-border-color); -moz-box-shadow: var(--dm-open-collapse-header-box-shadow); -webkit-box-shadow: var(--dm-open-collapse-header-box-shadow); box-shadow: var(--dm-open-collapse-header-box-shadow); } .collapse-panel[open] .collapse-header:focus { color: var(--lm-open-collapse-header-text-color-focus); background-color: var(--lm-open-collapse-header-bg-color-focus); border-color: var(--lm-open-collapse-header-border-color-focus); -moz-box-shadow: var(--lm-open-collapse-header-box-shadow-focus); -webkit-box-shadow: var(--lm-open-collapse-header-box-shadow-focus); box-shadow: var(--lm-open-collapse-header-box-shadow-focus); outline: var(--lm-open-collapse-header-outline-focus); } .dark-mode .collapse-panel[open] .collapse-header:focus { color: var(--dm-open-collapse-header-text-color-focus); background-color: var(--dm-open-collapse-header-bg-color-focus); border-color: var(--dm-open-collapse-header-border-color-focus); -moz-box-shadow: var(--dm-open-collapse-header-box-shadow-focus); -webkit-box-shadow: var(--dm-open-collapse-header-box-shadow-focus); box-shadow: var(--dm-open-collapse-header-box-shadow-focus); outline: var(--dm-open-collapse-header-outline-focus); } .collapse-panel[open] .collapse-header { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* Collapse header arrow set using background image */ .collapse-header { /* Firefox */ list-style-type: none; } .collapse-header::-webkit-details-marker { /* Chrome */ display: none; } .collapse-header::marker { display: none; } .collapse-header:not(.without-arrow) { padding: var(--collapse-header-padding-with-bg-image); background-image: var(--collapse-header-bg-image); background-size: var(--collapse-header-bg-size); background-repeat: var(--collapse-header-bg-repeat); background-position: var(--collapse-header-bg-position); } .collapse-panel[open] .collapse-header:not(.without-arrow) { padding: var(--open-collapse-header-padding-with-bg-image); background-image: var(--open-collapse-header-bg-image); background-size: var(--open-collapse-header-bg-size); background-repeat: var(--open-collapse-header-bg-repeat); background-position: var(--open-collapse-header-bg-position); } /* Collapse header focus effect (::after) */ .collapse-header::after { content: ""; position: absolute; display: var(--collapse-header-focus-effect-display); top: var(--collapse-header-focus-effect-top); left: var(--collapse-header-focus-effect-left); width: var(--collapse-header-focus-effect-width); height: var(--collapse-header-focus-effect-height); border-radius: var(--collapse-header-focus-effect-border-radius); } .collapse-header:focus::after { -moz-box-shadow: var(--lm-collapse-header-focus-effect-box-shadow); -webkit-box-shadow: var(--lm-collapse-header-focus-effect-box-shadow); box-shadow: var(--lm-collapse-header-focus-effect-box-shadow); } .dark-mode .collapse-header:focus::after { -moz-box-shadow: var(--dm-collapse-header-focus-effect-box-shadow); -webkit-box-shadow: var(--dm-collapse-header-focus-effect-box-shadow); box-shadow: var(--dm-collapse-header-focus-effect-box-shadow); } /* Controlling display based on collapse open state */ .collapse-panel[open] .hidden-collapse-open { display: none; } .collapse-panel:not([open]) .hidden-collapse-closed { display: none; } /* Collapse content */ .collapse-content { padding: var(--collapse-content-padding); font-size: var(--collapse-content-font-size); color: var(--lm-collapse-content-text-color); background-color: var(--lm-collapse-content-bg-color); border: var(--collapse-content-border-width) solid var(--lm-collapse-content-border-color); -moz-box-shadow: var(--lm-collapse-content-box-shadow); -webkit-box-shadow: var(--lm-collapse-content-box-shadow); box-shadow: var(--lm-collapse-content-box-shadow); border-top: none; border-bottom-left-radius: var(--collapse-content-border-radius); border-bottom-right-radius: var(--collapse-content-border-radius); } .dark-mode .collapse-content { color: var(--dm-collapse-content-text-color); background-color: var(--dm-collapse-content-bg-color); border-color: var(--dm-collapse-content-border-color); -moz-box-shadow: var(--dm-collapse-content-box-shadow); -webkit-box-shadow: var(--dm-collapse-content-box-shadow); box-shadow: var(--dm-collapse-content-box-shadow); } /* Collapse group */ .collapse-group .collapse-panel:not(:first-child) { margin-top: calc((-1) * var(--collapse-header-border-width)); } .collapse-group .collapse-panel:not(:first-child) .collapse-header { border-top-left-radius: 0; border-top-right-radius: 0; } .collapse-group .collapse-panel:not([open]):not(:last-child) .collapse-header { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .collapse-group .collapse-panel[open]:not(:first-child) .collapse-content { border-top-left-radius: 0; border-top-right-radius: 0; } .collapse-group .collapse-panel[open]:not(:last-child) .collapse-content { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* On IE, collapse panels are styled to be always open. This is because they are not supporter by the browser. */ /* Collapse header */ .collapse-panel .collapse-header { cursor: auto; color: var(--lm-open-collapse-header-text-color); background-color: var(--lm-open-collapse-header-bg-color); border-color: var(--lm-open-collapse-header-border-color); -moz-box-shadow: var(--lm-open-collapse-header-box-shadow); -webkit-box-shadow: var(--lm-open-collapse-header-box-shadow); box-shadow: var(--lm-open-collapse-header-box-shadow); } .dark-mode .collapse-panel .collapse-header { color: var(--dm-open-collapse-header-text-color); background-color: var(--dm-open-collapse-header-bg-color); border-color: var(--dm-open-collapse-header-border-color); -moz-box-shadow: var(--dm-open-collapse-header-box-shadow); -webkit-box-shadow: var(--dm-open-collapse-header-box-shadow); box-shadow: var(--dm-open-collapse-header-box-shadow); } .collapse-panel .collapse-header { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* Collapse header arrow set using background image */ .collapse-panel .collapse-header:not(.without-arrow) { padding: var(--open-collapse-header-padding-with-bg-image); background-image: var(--open-collapse-header-bg-image); background-size: var(--open-collapse-header-bg-size); background-repeat: var(--open-collapse-header-bg-repeat); background-position: var(--open-collapse-header-bg-position); } /* Controlling display based on collapse open state */ .collapse-panel .hidden-collapse-open { display: none; } .collapse-panel:not([open]) .hidden-collapse-closed { display: inline-block; } /* Collapse group */ .collapse-group .collapse-panel:not(:first-child) .collapse-content { border-top-left-radius: 0; border-top-right-radius: 0; } .collapse-group .collapse-panel:not(:last-child) .collapse-content { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; } } /* ------------------------------------------------------------------------------- 24. Progress [hm-24] ------------------------------------------------------------------------------- */ .progress { display: -ms-flexbox; display: flex; overflow: hidden; height: var(--progress-height); font-size: var(--progress-font-size); line-height: var(--progress-line-height); border-radius: var(--progress-border-radius); background-color: var(--lm-progress-bg-color); } .dark-mode .progress { background-color: var(--dm-progress-bg-color); } /* Progress bar */ .progress-bar { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; overflow: hidden; text-align: center; white-space: nowrap; color: var(--lm-progress-bar-text-color); background-color: var(--lm-progress-bar-bg-color); border-radius: inherit; } .dark-mode .progress-bar { color: var(--dm-progress-bar-text-color); background-color: var(--dm-progress-bar-bg-color); -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .progress-bar:not(:only-child) { border-radius: 0; } .progress-bar:not(:only-child):last-child { border-top-right-radius: inherit; border-bottom-right-radius: inherit; } /* Progress group */ .progress-group { position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; width: 100%; } .progress-group > .progress { position: relative; -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; margin-bottom: 0; } .progress-group-label { font-size: var(--progress-group-label-font-size); } .progress-group > .progress, .progress-group > .progress-group-label { margin-left: var(--progress-group-item-margin); margin-right: var(--progress-group-item-margin); } .progress-group > .progress:first-child, .progress-group > .progress-group-label:first-child { margin-left: 0; } .progress-group > .progress:last-child, .progress-group > .progress-group-label:last-child { margin-right: 0; } /* Progress bar animated */ .progress-bar-animated { position: relative; } .progress-bar-animated::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; background: var(--lm-progress-bar-animated-highlight-bg-color); transform: translateX(-100%); animation: progress-bar-shine 2s infinite; } .dark-mode .progress-bar-animated::before { background: var(--dm-progress-bar-animated-highlight-bg-color); } .progress-bar-animated.highlight-dark::before { background: var(--lm-progress-bar-animated-highlight-dark-bg-color); } .dark-mode .progress-bar-animated.highlight-dark::before { background: var(--dm-progress-bar-animated-highlight-dark-bg-color); } @keyframes progress-bar-shine { to { transform: translateX(0); opacity: 0.1; } } /* ------------------------------------------------------------------------------- 25. Spacing utilities [hm-25] Notes: ~ Unlike other frameworks, Halfmoon keeps the default margins and spacing for most elements. Instead, we encourage people to use the following utility classes for spacing. ------------------------------------------------------------------------------- */ /* Padding */ .p-0 { padding: 0 !important; } .p-5 { padding: 0.5rem !important; } .p-10 { padding: 1rem !important; } .p-15 { padding: 1.5rem !important; } .p-20 { padding: 2rem !important; } .px-0 { padding-left: 0 !important; padding-right: 0 !important; } .px-5 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .px-10 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-15 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .px-20 { padding-left: 2rem !important; padding-right: 2rem !important; } .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-5 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-10 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-15 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-20 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .pt-0 { padding-top: 0 !important; } .pt-5 { padding-top: 0.5rem !important; } .pt-10 { padding-top: 1rem !important; } .pt-15 { padding-top: 1.5rem !important; } .pt-20 { padding-top: 2rem !important; } .pb-0 { padding-bottom: 0 !important; } .pb-5 { padding-bottom: 0.5rem !important; } .pb-10 { padding-bottom: 1rem !important; } .pb-15 { padding-bottom: 1.5rem !important; } .pb-20 { padding-bottom: 2rem !important; } .pl-0 { padding-left: 0 !important; } .pl-5 { padding-left: 0.5rem !important; } .pl-10 { padding-left: 1rem !important; } .pl-15 { padding-left: 1.5rem !important; } .pl-20 { padding-left: 2rem !important; } .pr-0 { padding-right: 0 !important; } .pr-5 { padding-right: 0.5rem !important; } .pr-10 { padding-right: 1rem !important; } .pr-15 { padding-right: 1.5rem !important; } .pr-20 { padding-right: 2rem !important; } /* Margin */ .m-0 { margin: 0 !important; } .m-5 { margin: 0.5rem !important; } .m-10 { margin: 1rem !important; } .m-15 { margin: 1.5rem !important; } .m-20 { margin: 2rem !important; } .m-auto { margin: auto !important; } .mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .mx-5 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; } .mx-10 { margin-left: 1rem !important; margin-right: 1rem !important; } .mx-15 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .mx-20 { margin-left: 2rem !important; margin-right: 2rem !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } .my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-5 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-10 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-15 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-20 { margin-top: 2rem !important; margin-bottom: 2rem !important; } .my-auto { margin-top: auto !important; margin-bottom: auto !important; } .mt-0 { margin-top: 0 !important; } .mt-5 { margin-top: 0.5rem !important; } .mt-10 { margin-top: 1rem !important; } .mt-15 { margin-top: 1.5rem !important; } .mt-20 { margin-top: 2rem !important; } .mt-auto { margin-top: auto !important; } .mb-0 { margin-bottom: 0 !important; } .mb-5 { margin-bottom: 0.5rem !important; } .mb-10 { margin-bottom: 1rem !important; } .mb-15 { margin-bottom: 1.5rem !important; } .mb-20 { margin-bottom: 2rem !important; } .mb-auto { margin-bottom: auto !important; } .ml-0 { margin-left: 0 !important; } .ml-5 { margin-left: 0.5rem !important; } .ml-10 { margin-left: 1rem !important; } .ml-15 { margin-left: 1.5rem !important; } .ml-20 { margin-left: 2rem !important; } .ml-auto { margin-left: auto !important; } .mr-0 { margin-right: 0 !important; } .mr-5 { margin-right: 0.5rem !important; } .mr-10 { margin-right: 1rem !important; } .mr-15 { margin-right: 1.5rem !important; } .mr-20 { margin-right: 2rem !important; } .mr-auto { margin-right: auto !important; } @media (min-width: 577px) { /* Padding */ .p-sm-0 { padding: 0 !important; } .p-sm-5 { padding: 0.5rem !important; } .p-sm-10 { padding: 1rem !important; } .p-sm-15 { padding: 1.5rem !important; } .p-sm-20 { padding: 2rem !important; } .px-sm-0 { padding-left: 0 !important; padding-right: 0 !important; } .px-sm-5 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .px-sm-10 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-sm-15 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .px-sm-20 { padding-left: 2rem !important; padding-right: 2rem !important; } .py-sm-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-sm-5 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-sm-10 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-sm-15 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-sm-20 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .pt-sm-0 { padding-top: 0 !important; } .pt-sm-5 { padding-top: 0.5rem !important; } .pt-sm-10 { padding-top: 1rem !important; } .pt-sm-15 { padding-top: 1.5rem !important; } .pt-sm-20 { padding-top: 2rem !important; } .pb-sm-0 { padding-bottom: 0 !important; } .pb-sm-5 { padding-bottom: 0.5rem !important; } .pb-sm-10 { padding-bottom: 1rem !important; } .pb-sm-15 { padding-bottom: 1.5rem !important; } .pb-sm-20 { padding-bottom: 2rem !important; } .pl-sm-0 { padding-left: 0 !important; } .pl-sm-5 { padding-left: 0.5rem !important; } .pl-sm-10 { padding-left: 1rem !important; } .pl-sm-15 { padding-left: 1.5rem !important; } .pl-sm-20 { padding-left: 2rem !important; } .pr-sm-0 { padding-right: 0 !important; } .pr-sm-5 { padding-right: 0.5rem !important; } .pr-sm-10 { padding-right: 1rem !important; } .pr-sm-15 { padding-right: 1.5rem !important; } .pr-sm-20 { padding-right: 2rem !important; } /* Margin */ .m-sm-0 { margin: 0 !important; } .m-sm-5 { margin: 0.5rem !important; } .m-sm-10 { margin: 1rem !important; } .m-sm-15 { margin: 1.5rem !important; } .m-sm-20 { margin: 2rem !important; } .m-sm-auto { margin: auto !important; } .mx-sm-0 { margin-left: 0 !important; margin-right: 0 !important; } .mx-sm-5 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; } .mx-sm-10 { margin-left: 1rem !important; margin-right: 1rem !important; } .mx-sm-15 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .mx-sm-20 { margin-left: 2rem !important; margin-right: 2rem !important; } .mx-sm-auto { margin-left: auto !important; margin-right: auto !important; } .my-sm-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-sm-5 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-sm-10 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-sm-15 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-sm-20 { margin-top: 2rem !important; margin-bottom: 2rem !important; } .my-sm-auto { margin-top: auto !important; margin-bottom: auto !important; } .mt-sm-0 { margin-top: 0 !important; } .mt-sm-5 { margin-top: 0.5rem !important; } .mt-sm-10 { margin-top: 1rem !important; } .mt-sm-15 { margin-top: 1.5rem !important; } .mt-sm-20 { margin-top: 2rem !important; } .mt-sm-auto { margin-top: auto !important; } .mb-sm-0 { margin-bottom: 0 !important; } .mb-sm-5 { margin-bottom: 0.5rem !important; } .mb-sm-10 { margin-bottom: 1rem !important; } .mb-sm-15 { margin-bottom: 1.5rem !important; } .mb-sm-20 { margin-bottom: 2rem !important; } .mb-sm-auto { margin-bottom: auto !important; } .ml-sm-0 { margin-left: 0 !important; } .ml-sm-5 { margin-left: 0.5rem !important; } .ml-sm-10 { margin-left: 1rem !important; } .ml-sm-15 { margin-left: 1.5rem !important; } .ml-sm-20 { margin-left: 2rem !important; } .ml-sm-auto { margin-left: auto !important; } .mr-sm-0 { margin-right: 0 !important; } .mr-sm-5 { margin-right: 0.5rem !important; } .mr-sm-10 { margin-right: 1rem !important; } .mr-sm-15 { margin-right: 1.5rem !important; } .mr-sm-20 { margin-right: 2rem !important; } .mr-sm-auto { margin-right: auto !important; } } @media (min-width: 769px) { /* Padding */ .p-md-0 { padding: 0 !important; } .p-md-5 { padding: 0.5rem !important; } .p-md-10 { padding: 1rem !important; } .p-md-15 { padding: 1.5rem !important; } .p-md-20 { padding: 2rem !important; } .px-md-0 { padding-left: 0 !important; padding-right: 0 !important; } .px-md-5 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .px-md-10 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-md-15 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .px-md-20 { padding-left: 2rem !important; padding-right: 2rem !important; } .py-md-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-md-5 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-md-10 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-md-15 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-md-20 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .pt-md-0 { padding-top: 0 !important; } .pt-md-5 { padding-top: 0.5rem !important; } .pt-md-10 { padding-top: 1rem !important; } .pt-md-15 { padding-top: 1.5rem !important; } .pt-md-20 { padding-top: 2rem !important; } .pb-md-0 { padding-bottom: 0 !important; } .pb-md-5 { padding-bottom: 0.5rem !important; } .pb-md-10 { padding-bottom: 1rem !important; } .pb-md-15 { padding-bottom: 1.5rem !important; } .pb-md-20 { padding-bottom: 2rem !important; } .pl-md-0 { padding-left: 0 !important; } .pl-md-5 { padding-left: 0.5rem !important; } .pl-md-10 { padding-left: 1rem !important; } .pl-md-15 { padding-left: 1.5rem !important; } .pl-md-20 { padding-left: 2rem !important; } .pr-md-0 { padding-right: 0 !important; } .pr-md-5 { padding-right: 0.5rem !important; } .pr-md-10 { padding-right: 1rem !important; } .pr-md-15 { padding-right: 1.5rem !important; } .pr-md-20 { padding-right: 2rem !important; } /* Margin */ .m-md-0 { margin: 0 !important; } .m-md-5 { margin: 0.5rem !important; } .m-md-10 { margin: 1rem !important; } .m-md-15 { margin: 1.5rem !important; } .m-md-20 { margin: 2rem !important; } .m-md-auto { margin: auto !important; } .mx-md-0 { margin-left: 0 !important; margin-right: 0 !important; } .mx-md-5 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; } .mx-md-10 { margin-left: 1rem !important; margin-right: 1rem !important; } .mx-md-15 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .mx-md-20 { margin-left: 2rem !important; margin-right: 2rem !important; } .mx-md-auto { margin-left: auto !important; margin-right: auto !important; } .my-md-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-md-5 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-md-10 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-md-15 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-md-20 { margin-top: 2rem !important; margin-bottom: 2rem !important; } .my-md-auto { margin-top: auto !important; margin-bottom: auto !important; } .mt-md-0 { margin-top: 0 !important; } .mt-md-5 { margin-top: 0.5rem !important; } .mt-md-10 { margin-top: 1rem !important; } .mt-md-15 { margin-top: 1.5rem !important; } .mt-md-20 { margin-top: 2rem !important; } .mt-md-auto { margin-top: auto !important; } .mb-md-0 { margin-bottom: 0 !important; } .mb-md-5 { margin-bottom: 0.5rem !important; } .mb-md-10 { margin-bottom: 1rem !important; } .mb-md-15 { margin-bottom: 1.5rem !important; } .mb-md-20 { margin-bottom: 2rem !important; } .mb-md-auto { margin-bottom: auto !important; } .ml-md-0 { margin-left: 0 !important; } .ml-md-5 { margin-left: 0.5rem !important; } .ml-md-10 { margin-left: 1rem !important; } .ml-md-15 { margin-left: 1.5rem !important; } .ml-md-20 { margin-left: 2rem !important; } .ml-md-auto { margin-left: auto !important; } .mr-md-0 { margin-right: 0 !important; } .mr-md-5 { margin-right: 0.5rem !important; } .mr-md-10 { margin-right: 1rem !important; } .mr-md-15 { margin-right: 1.5rem !important; } .mr-md-20 { margin-right: 2rem !important; } .mr-md-auto { margin-right: auto !important; } } @media (min-width: 993px) { /* Padding */ .p-lg-0 { padding: 0 !important; } .p-lg-5 { padding: 0.5rem !important; } .p-lg-10 { padding: 1rem !important; } .p-lg-15 { padding: 1.5rem !important; } .p-lg-20 { padding: 2rem !important; } .px-lg-0 { padding-left: 0 !important; padding-right: 0 !important; } .px-lg-5 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .px-lg-10 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-lg-15 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .px-lg-20 { padding-left: 2rem !important; padding-right: 2rem !important; } .py-lg-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-lg-5 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-lg-10 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-lg-15 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-lg-20 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .pt-lg-0 { padding-top: 0 !important; } .pt-lg-5 { padding-top: 0.5rem !important; } .pt-lg-10 { padding-top: 1rem !important; } .pt-lg-15 { padding-top: 1.5rem !important; } .pt-lg-20 { padding-top: 2rem !important; } .pb-lg-0 { padding-bottom: 0 !important; } .pb-lg-5 { padding-bottom: 0.5rem !important; } .pb-lg-10 { padding-bottom: 1rem !important; } .pb-lg-15 { padding-bottom: 1.5rem !important; } .pb-lg-20 { padding-bottom: 2rem !important; } .pl-lg-0 { padding-left: 0 !important; } .pl-lg-5 { padding-left: 0.5rem !important; } .pl-lg-10 { padding-left: 1rem !important; } .pl-lg-15 { padding-left: 1.5rem !important; } .pl-lg-20 { padding-left: 2rem !important; } .pr-lg-0 { padding-right: 0 !important; } .pr-lg-5 { padding-right: 0.5rem !important; } .pr-lg-10 { padding-right: 1rem !important; } .pr-lg-15 { padding-right: 1.5rem !important; } .pr-lg-20 { padding-right: 2rem !important; } /* Margin */ .m-lg-0 { margin: 0 !important; } .m-lg-5 { margin: 0.5rem !important; } .m-lg-10 { margin: 1rem !important; } .m-lg-15 { margin: 1.5rem !important; } .m-lg-20 { margin: 2rem !important; } .m-lg-auto { margin: auto !important; } .mx-lg-0 { margin-left: 0 !important; margin-right: 0 !important; } .mx-lg-5 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; } .mx-lg-10 { margin-left: 1rem !important; margin-right: 1rem !important; } .mx-lg-15 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .mx-lg-20 { margin-left: 2rem !important; margin-right: 2rem !important; } .mx-lg-auto { margin-left: auto !important; margin-right: auto !important; } .my-lg-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-lg-5 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-lg-10 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-lg-15 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-lg-20 { margin-top: 2rem !important; margin-bottom: 2rem !important; } .my-lg-auto { margin-top: auto !important; margin-bottom: auto !important; } .mt-lg-0 { margin-top: 0 !important; } .mt-lg-5 { margin-top: 0.5rem !important; } .mt-lg-10 { margin-top: 1rem !important; } .mt-lg-15 { margin-top: 1.5rem !important; } .mt-lg-20 { margin-top: 2rem !important; } .mt-lg-auto { margin-top: auto !important; } .mb-lg-0 { margin-bottom: 0 !important; } .mb-lg-5 { margin-bottom: 0.5rem !important; } .mb-lg-10 { margin-bottom: 1rem !important; } .mb-lg-15 { margin-bottom: 1.5rem !important; } .mb-lg-20 { margin-bottom: 2rem !important; } .mb-lg-auto { margin-bottom: auto !important; } .ml-lg-0 { margin-left: 0 !important; } .ml-lg-5 { margin-left: 0.5rem !important; } .ml-lg-10 { margin-left: 1rem !important; } .ml-lg-15 { margin-left: 1.5rem !important; } .ml-lg-20 { margin-left: 2rem !important; } .ml-lg-auto { margin-left: auto !important; } .mr-lg-0 { margin-right: 0 !important; } .mr-lg-5 { margin-right: 0.5rem !important; } .mr-lg-10 { margin-right: 1rem !important; } .mr-lg-15 { margin-right: 1.5rem !important; } .mr-lg-20 { margin-right: 2rem !important; } .mr-lg-auto { margin-right: auto !important; } } @media (min-width: 1201px) { /* Padding */ .p-xl-0 { padding: 0 !important; } .p-xl-5 { padding: 0.5rem !important; } .p-xl-10 { padding: 1rem !important; } .p-xl-15 { padding: 1.5rem !important; } .p-xl-20 { padding: 2rem !important; } .px-xl-0 { padding-left: 0 !important; padding-right: 0 !important; } .px-xl-5 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .px-xl-10 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-xl-15 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .px-xl-20 { padding-left: 2rem !important; padding-right: 2rem !important; } .py-xl-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-xl-5 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-xl-10 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-xl-15 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-xl-20 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .pt-xl-0 { padding-top: 0 !important; } .pt-xl-5 { padding-top: 0.5rem !important; } .pt-xl-10 { padding-top: 1rem !important; } .pt-xl-15 { padding-top: 1.5rem !important; } .pt-xl-20 { padding-top: 2rem !important; } .pb-xl-0 { padding-bottom: 0 !important; } .pb-xl-5 { padding-bottom: 0.5rem !important; } .pb-xl-10 { padding-bottom: 1rem !important; } .pb-xl-15 { padding-bottom: 1.5rem !important; } .pb-xl-20 { padding-bottom: 2rem !important; } .pl-xl-0 { padding-left: 0 !important; } .pl-xl-5 { padding-left: 0.5rem !important; } .pl-xl-10 { padding-left: 1rem !important; } .pl-xl-15 { padding-left: 1.5rem !important; } .pl-xl-20 { padding-left: 2rem !important; } .pr-xl-0 { padding-right: 0 !important; } .pr-xl-5 { padding-right: 0.5rem !important; } .pr-xl-10 { padding-right: 1rem !important; } .pr-xl-15 { padding-right: 1.5rem !important; } .pr-xl-20 { padding-right: 2rem !important; } /* Margin */ .m-xl-0 { margin: 0 !important; } .m-xl-5 { margin: 0.5rem !important; } .m-xl-10 { margin: 1rem !important; } .m-xl-15 { margin: 1.5rem !important; } .m-xl-20 { margin: 2rem !important; } .m-xl-auto { margin: auto !important; } .mx-xl-0 { margin-left: 0 !important; margin-right: 0 !important; } .mx-xl-5 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; } .mx-xl-10 { margin-left: 1rem !important; margin-right: 1rem !important; } .mx-xl-15 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .mx-xl-20 { margin-left: 2rem !important; margin-right: 2rem !important; } .mx-xl-auto { margin-left: auto !important; margin-right: auto !important; } .my-xl-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-xl-5 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-xl-10 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-xl-15 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-xl-20 { margin-top: 2rem !important; margin-bottom: 2rem !important; } .my-xl-auto { margin-top: auto !important; margin-bottom: auto !important; } .mt-xl-0 { margin-top: 0 !important; } .mt-xl-5 { margin-top: 0.5rem !important; } .mt-xl-10 { margin-top: 1rem !important; } .mt-xl-15 { margin-top: 1.5rem !important; } .mt-xl-20 { margin-top: 2rem !important; } .mt-xl-auto { margin-top: auto !important; } .mb-xl-0 { margin-bottom: 0 !important; } .mb-xl-5 { margin-bottom: 0.5rem !important; } .mb-xl-10 { margin-bottom: 1rem !important; } .mb-xl-15 { margin-bottom: 1.5rem !important; } .mb-xl-20 { margin-bottom: 2rem !important; } .mb-xl-auto { margin-bottom: auto !important; } .ml-xl-0 { margin-left: 0 !important; } .ml-xl-5 { margin-left: 0.5rem !important; } .ml-xl-10 { margin-left: 1rem !important; } .ml-xl-15 { margin-left: 1.5rem !important; } .ml-xl-20 { margin-left: 2rem !important; } .ml-xl-auto { margin-left: auto !important; } .mr-xl-0 { margin-right: 0 !important; } .mr-xl-5 { margin-right: 0.5rem !important; } .mr-xl-10 { margin-right: 1rem !important; } .mr-xl-15 { margin-right: 1.5rem !important; } .mr-xl-20 { margin-right: 2rem !important; } .mr-xl-auto { margin-right: auto !important; } } /* ------------------------------------------------------------------------------- 26. Display utilities [hm-26] ------------------------------------------------------------------------------- */ .d-none { display: none !important; } .d-inline { display: inline !important; } .d-inline-block { display: inline-block !important; } .d-block { display: block !important; } .d-table { display: table !important; } .d-table-row { display: table-row !important; } .d-table-cell { display: table-cell !important; } .d-flex { display: -ms-flexbox !important; display: flex !important; } .d-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; } @media (min-width: 577px) { .d-sm-none { display: none !important; } .d-sm-inline { display: inline !important; } .d-sm-inline-block { display: inline-block !important; } .d-sm-block { display: block !important; } .d-sm-table { display: table !important; } .d-sm-table-row { display: table-row !important; } .d-sm-table-cell { display: table-cell !important; } .d-sm-flex { display: -ms-flexbox !important; display: flex !important; } .d-sm-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; } } @media (min-width: 769px) { .d-md-none { display: none !important; } .d-md-inline { display: inline !important; } .d-md-inline-block { display: inline-block !important; } .d-md-block { display: block !important; } .d-md-table { display: table !important; } .d-md-table-row { display: table-row !important; } .d-md-table-cell { display: table-cell !important; } .d-md-flex { display: -ms-flexbox !important; display: flex !important; } .d-md-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; } } @media (min-width: 993px) { .d-lg-none { display: none !important; } .d-lg-inline { display: inline !important; } .d-lg-inline-block { display: inline-block !important; } .d-lg-block { display: block !important; } .d-lg-table { display: table !important; } .d-lg-table-row { display: table-row !important; } .d-lg-table-cell { display: table-cell !important; } .d-lg-flex { display: -ms-flexbox !important; display: flex !important; } .d-lg-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; } } @media (min-width: 1201px) { .d-xl-none { display: none !important; } .d-xl-inline { display: inline !important; } .d-xl-inline-block { display: inline-block !important; } .d-xl-block { display: block !important; } .d-xl-table { display: table !important; } .d-xl-table-row { display: table-row !important; } .d-xl-table-cell { display: table-cell !important; } .d-xl-flex { display: -ms-flexbox !important; display: flex !important; } .d-xl-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; } } @media (max-width: 576px) { .d-xs-only-none { display: none !important; } } @media (min-width: 577px) and (max-width: 768px) { .d-sm-only-none { display: none !important; } } @media (min-width: 769px) and (max-width: 992px) { .d-md-only-none { display: none !important; } } @media (min-width: 993px) and (max-width: 1200px) { .d-lg-only-none { display: none !important; } } @media (min-width: 1201px) { .d-xl-only-none { display: none !important; } } /* Hidden {breakpoint}-and-up and {breakpoint}-and-down */ .hidden-xs-and-up { display: none !important; } @media (max-width: 576px) { .hidden-xs-and-down { display: none !important; } } @media (min-width: 577px) { .hidden-sm-and-up { display: none !important; } } @media (max-width: 768px) { .hidden-sm-and-down { display: none !important; } } @media (min-width: 769px) { .hidden-md-and-up { display: none !important; } } @media (max-width: 992px) { .hidden-md-and-down { display: none !important; } } @media (min-width: 993px) { .hidden-lg-and-up { display: none !important; } } @media (max-width: 1200px) { .hidden-lg-and-down { display: none !important; } } @media (min-width: 1201px) { .hidden-xl-and-up { display: none !important; } } .hidden-xl-and-down { display: none !important; } /* Hidden in light and dark mode */ body:not(.dark-mode) .hidden-lm { display: none !important; } .dark-mode .hidden-dm { display: none !important; } /* ------------------------------------------------------------------------------- 27. Sizing utilities [hm-27] ------------------------------------------------------------------------------- */ /* Width */ .w-25 { width: 2.5rem !important; } .w-50 { width: 5rem !important; } .w-100 { width: 10rem !important; } .w-150 { width: 15rem !important; } .w-200 { width: 20rem !important; } .w-250 { width: 25rem !important; } .w-300 { width: 30rem !important; } .w-350 { width: 35rem !important; } .w-400 { width: 40rem !important; } .w-450 { width: 45rem !important; } .w-500 { width: 50rem !important; } .w-550 { width: 55rem !important; } .w-600 { width: 60rem !important; } .w-auto { width: auto !important; } .w-quarter { width: 25% !important; } .w-half { width: 50% !important; } .w-three-quarter { width: 75% !important; } .w-full { width: 100% !important; } .mw-full { max-width: 100% !important; } @media (min-width: 577px) { .w-sm-25 { width: 2.5rem !important; } .w-sm-50 { width: 5rem !important; } .w-sm-100 { width: 10rem !important; } .w-sm-150 { width: 15rem !important; } .w-sm-200 { width: 20rem !important; } .w-sm-250 { width: 25rem !important; } .w-sm-300 { width: 30rem !important; } .w-sm-350 { width: 35rem !important; } .w-sm-400 { width: 40rem !important; } .w-sm-450 { width: 45rem !important; } .w-sm-500 { width: 50rem !important; } .w-sm-550 { width: 55rem !important; } .w-sm-600 { width: 60rem !important; } .w-sm-auto { width: auto !important; } .w-sm-quarter { width: 25% !important; } .w-sm-half { width: 50% !important; } .w-sm-three-quarter { width: 75% !important; } .w-sm-full { width: 100% !important; } .mw-sm-full { max-width: 100% !important; } } @media (min-width: 769px) { .w-md-25 { width: 2.5rem !important; } .w-md-50 { width: 5rem !important; } .w-md-100 { width: 10rem !important; } .w-md-150 { width: 15rem !important; } .w-md-200 { width: 20rem !important; } .w-md-250 { width: 25rem !important; } .w-md-300 { width: 30rem !important; } .w-md-350 { width: 35rem !important; } .w-md-400 { width: 40rem !important; } .w-md-450 { width: 45rem !important; } .w-md-500 { width: 50rem !important; } .w-md-550 { width: 55rem !important; } .w-md-600 { width: 60rem !important; } .w-md-auto { width: auto !important; } .w-md-quarter { width: 25% !important; } .w-md-half { width: 50% !important; } .w-md-three-quarter { width: 75% !important; } .w-md-full { width: 100% !important; } .mw-md-full { max-width: 100% !important; } } @media (min-width: 993px) { .w-lg-25 { width: 2.5rem !important; } .w-lg-50 { width: 5rem !important; } .w-lg-100 { width: 10rem !important; } .w-lg-150 { width: 15rem !important; } .w-lg-200 { width: 20rem !important; } .w-lg-250 { width: 25rem !important; } .w-lg-300 { width: 30rem !important; } .w-lg-350 { width: 35rem !important; } .w-lg-400 { width: 40rem !important; } .w-lg-450 { width: 45rem !important; } .w-lg-500 { width: 50rem !important; } .w-lg-550 { width: 55rem !important; } .w-lg-600 { width: 60rem !important; } .w-lg-auto { width: auto !important; } .w-lg-quarter { width: 25% !important; } .w-lg-half { width: 50% !important; } .w-lg-three-quarter { width: 75% !important; } .w-lg-full { width: 100% !important; } .mw-lg-full { max-width: 100% !important; } } @media (min-width: 1201px) { .w-xl-25 { width: 2.5rem !important; } .w-xl-50 { width: 5rem !important; } .w-xl-100 { width: 10rem !important; } .w-xl-150 { width: 15rem !important; } .w-xl-200 { width: 20rem !important; } .w-xl-250 { width: 25rem !important; } .w-xl-300 { width: 30rem !important; } .w-xl-350 { width: 35rem !important; } .w-xl-400 { width: 40rem !important; } .w-xl-450 { width: 45rem !important; } .w-xl-500 { width: 50rem !important; } .w-xl-550 { width: 55rem !important; } .w-xl-600 { width: 60rem !important; } .w-xl-auto { width: auto !important; } .w-xl-quarter { width: 25% !important; } .w-xl-half { width: 50% !important; } .w-xl-three-quarter { width: 75% !important; } .w-xl-full { width: 100% !important; } .mw-xl-full { max-width: 100% !important; } } /* Height */ .h-25 { height: 2.5rem !important; } .h-50 { height: 5rem !important; } .h-100 { height: 10rem !important; } .h-150 { height: 15rem !important; } .h-200 { height: 20rem !important; } .h-250 { height: 25rem !important; } .h-300 { height: 30rem !important; } .h-350 { height: 35rem !important; } .h-400 { height: 40rem !important; } .h-450 { height: 45rem !important; } .h-500 { height: 50rem !important; } .h-550 { height: 55rem !important; } .h-600 { height: 60rem !important; } .h-auto { height: auto !important; } .h-quarter { height: 25% !important; } .h-half { height: 50% !important; } .h-three-quarter { height: 75% !important; } .h-full { height: 100% !important; } .mh-full { max-height: 100% !important; } @media (min-width: 577px) { .h-sm-25 { height: 2.5rem !important; } .h-sm-50 { height: 5rem !important; } .h-sm-100 { height: 10rem !important; } .h-sm-150 { height: 15rem !important; } .h-sm-200 { height: 20rem !important; } .h-sm-250 { height: 25rem !important; } .h-sm-300 { height: 30rem !important; } .h-sm-350 { height: 35rem !important; } .h-sm-400 { height: 40rem !important; } .h-sm-450 { height: 45rem !important; } .h-sm-500 { height: 50rem !important; } .h-sm-550 { height: 55rem !important; } .h-sm-600 { height: 60rem !important; } .h-sm-auto { height: auto !important; } .h-sm-quarter { height: 25% !important; } .h-sm-half { height: 50% !important; } .h-sm-three-quarter { height: 75% !important; } .h-sm-full { height: 100% !important; } .mh-sm-full { max-height: 100% !important; } } @media (min-width: 769px) { .h-md-25 { height: 2.5rem !important; } .h-md-50 { height: 5rem !important; } .h-md-100 { height: 10rem !important; } .h-md-150 { height: 15rem !important; } .h-md-200 { height: 20rem !important; } .h-md-250 { height: 25rem !important; } .h-md-300 { height: 30rem !important; } .h-md-350 { height: 35rem !important; } .h-md-400 { height: 40rem !important; } .h-md-450 { height: 45rem !important; } .h-md-500 { height: 50rem !important; } .h-md-550 { height: 55rem !important; } .h-md-600 { height: 60rem !important; } .h-md-auto { height: auto !important; } .h-md-quarter { height: 25% !important; } .h-md-half { height: 50% !important; } .h-md-three-quarter { height: 75% !important; } .h-md-full { height: 100% !important; } .mh-md-full { max-height: 100% !important; } } @media (min-width: 993px) { .h-lg-25 { height: 2.5rem !important; } .h-lg-50 { height: 5rem !important; } .h-lg-100 { height: 10rem !important; } .h-lg-150 { height: 15rem !important; } .h-lg-200 { height: 20rem !important; } .h-lg-250 { height: 25rem !important; } .h-lg-300 { height: 30rem !important; } .h-lg-350 { height: 35rem !important; } .h-lg-400 { height: 40rem !important; } .h-lg-450 { height: 45rem !important; } .h-lg-500 { height: 50rem !important; } .h-lg-550 { height: 55rem !important; } .h-lg-600 { height: 60rem !important; } .h-lg-auto { height: auto !important; } .h-lg-quarter { height: 25% !important; } .h-lg-half { height: 50% !important; } .h-lg-three-quarter { height: 75% !important; } .h-lg-full { height: 100% !important; } .mh-lg-full { max-height: 100% !important; } } @media (min-width: 1201px) { .h-xl-25 { height: 2.5rem !important; } .h-xl-50 { height: 5rem !important; } .h-xl-100 { height: 10rem !important; } .h-xl-150 { height: 15rem !important; } .h-xl-200 { height: 20rem !important; } .h-xl-250 { height: 25rem !important; } .h-xl-300 { height: 30rem !important; } .h-xl-350 { height: 35rem !important; } .h-xl-400 { height: 40rem !important; } .h-xl-450 { height: 45rem !important; } .h-xl-500 { height: 50rem !important; } .h-xl-550 { height: 55rem !important; } .h-xl-600 { height: 60rem !important; } .h-xl-auto { height: auto !important; } .h-xl-quarter { height: 25% !important; } .h-xl-half { height: 50% !important; } .h-xl-three-quarter { height: 75% !important; } .h-xl-full { height: 100% !important; } .mh-xl-full { max-height: 100% !important; } } /* ------------------------------------------------------------------------------- 28. Flex utilities [hm-28] ------------------------------------------------------------------------------- */ .flex-row { -ms-flex-direction: row !important; flex-direction: row !important; } .flex-column { -ms-flex-direction: column !important; flex-direction: column !important; } .flex-row-reverse { -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .flex-column-reverse { -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .flex-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .flex-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .flex-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .flex-fill { -ms-flex: 1 1 auto !important; flex: 1 1 auto !important; } .flex-grow-0 { -ms-flex-positive: 0 !important; flex-grow: 0 !important; } .flex-grow-1 { -ms-flex-positive: 1 !important; flex-grow: 1 !important; } .flex-shrink-0 { -ms-flex-negative: 0 !important; flex-shrink: 0 !important; } .flex-shrink-1 { -ms-flex-negative: 1 !important; flex-shrink: 1 !important; } .justify-content-start { -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-end { -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-content-center { -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-between { -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .align-items-start { -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-end { -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-center { -ms-flex-align: center !important; align-items: center !important; } .align-items-baseline { -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-stretch { -ms-flex-align: stretch !important; align-items: stretch !important; } .align-content-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .align-content-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .align-content-center { -ms-flex-line-pack: center !important; align-content: center !important; } .align-content-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .align-content-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .align-content-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } .align-self-auto { -ms-flex-item-align: auto !important; align-self: auto !important; } .align-self-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .align-self-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .align-self-center { -ms-flex-item-align: center !important; align-self: center !important; } .align-self-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; } .align-self-stretch { -ms-flex-item-align: stretch !important; align-self: stretch !important; } @media (min-width: 577px) { .flex-sm-row { -ms-flex-direction: row !important; flex-direction: row !important; } .flex-sm-column { -ms-flex-direction: column !important; flex-direction: column !important; } .flex-sm-row-reverse { -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .flex-sm-column-reverse { -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .flex-sm-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .flex-sm-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .flex-sm-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .flex-sm-fill { -ms-flex: 1 1 auto !important; flex: 1 1 auto !important; } .flex-sm-grow-0 { -ms-flex-positive: 0 !important; flex-grow: 0 !important; } .flex-sm-grow-1 { -ms-flex-positive: 1 !important; flex-grow: 1 !important; } .flex-sm-shrink-0 { -ms-flex-negative: 0 !important; flex-shrink: 0 !important; } .flex-sm-shrink-1 { -ms-flex-negative: 1 !important; flex-shrink: 1 !important; } .justify-content-sm-start { -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-sm-end { -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-content-sm-center { -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-sm-between { -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-sm-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .align-items-sm-start { -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-sm-end { -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-sm-center { -ms-flex-align: center !important; align-items: center !important; } .align-items-sm-baseline { -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-sm-stretch { -ms-flex-align: stretch !important; align-items: stretch !important; } .align-content-sm-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .align-content-sm-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .align-content-sm-center { -ms-flex-line-pack: center !important; align-content: center !important; } .align-content-sm-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .align-content-sm-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .align-content-sm-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } .align-self-sm-auto { -ms-flex-item-align: auto !important; align-self: auto !important; } .align-self-sm-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .align-self-sm-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .align-self-sm-center { -ms-flex-item-align: center !important; align-self: center !important; } .align-self-sm-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; } .align-self-sm-stretch { -ms-flex-item-align: stretch !important; align-self: stretch !important; } } @media (min-width: 769px) { .flex-md-row { -ms-flex-direction: row !important; flex-direction: row !important; } .flex-md-column { -ms-flex-direction: column !important; flex-direction: column !important; } .flex-md-row-reverse { -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .flex-md-column-reverse { -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .flex-md-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .flex-md-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .flex-md-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .flex-md-fill { -ms-flex: 1 1 auto !important; flex: 1 1 auto !important; } .flex-md-grow-0 { -ms-flex-positive: 0 !important; flex-grow: 0 !important; } .flex-md-grow-1 { -ms-flex-positive: 1 !important; flex-grow: 1 !important; } .flex-md-shrink-0 { -ms-flex-negative: 0 !important; flex-shrink: 0 !important; } .flex-md-shrink-1 { -ms-flex-negative: 1 !important; flex-shrink: 1 !important; } .justify-content-md-start { -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-md-end { -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-content-md-center { -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-md-between { -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-md-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .align-items-md-start { -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-md-end { -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-md-center { -ms-flex-align: center !important; align-items: center !important; } .align-items-md-baseline { -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-md-stretch { -ms-flex-align: stretch !important; align-items: stretch !important; } .align-content-md-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .align-content-md-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .align-content-md-center { -ms-flex-line-pack: center !important; align-content: center !important; } .align-content-md-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .align-content-md-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .align-content-md-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } .align-self-md-auto { -ms-flex-item-align: auto !important; align-self: auto !important; } .align-self-md-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .align-self-md-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .align-self-md-center { -ms-flex-item-align: center !important; align-self: center !important; } .align-self-md-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; } .align-self-md-stretch { -ms-flex-item-align: stretch !important; align-self: stretch !important; } } @media (min-width: 993px) { .flex-lg-row { -ms-flex-direction: row !important; flex-direction: row !important; } .flex-lg-column { -ms-flex-direction: column !important; flex-direction: column !important; } .flex-lg-row-reverse { -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .flex-lg-column-reverse { -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .flex-lg-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .flex-lg-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .flex-lg-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .flex-lg-fill { -ms-flex: 1 1 auto !important; flex: 1 1 auto !important; } .flex-lg-grow-0 { -ms-flex-positive: 0 !important; flex-grow: 0 !important; } .flex-lg-grow-1 { -ms-flex-positive: 1 !important; flex-grow: 1 !important; } .flex-lg-shrink-0 { -ms-flex-negative: 0 !important; flex-shrink: 0 !important; } .flex-lg-shrink-1 { -ms-flex-negative: 1 !important; flex-shrink: 1 !important; } .justify-content-lg-start { -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-lg-end { -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-content-lg-center { -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-lg-between { -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-lg-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .align-items-lg-start { -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-lg-end { -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-lg-center { -ms-flex-align: center !important; align-items: center !important; } .align-items-lg-baseline { -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-lg-stretch { -ms-flex-align: stretch !important; align-items: stretch !important; } .align-content-lg-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .align-content-lg-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .align-content-lg-center { -ms-flex-line-pack: center !important; align-content: center !important; } .align-content-lg-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .align-content-lg-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .align-content-lg-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } .align-self-lg-auto { -ms-flex-item-align: auto !important; align-self: auto !important; } .align-self-lg-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .align-self-lg-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .align-self-lg-center { -ms-flex-item-align: center !important; align-self: center !important; } .align-self-lg-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; } .align-self-lg-stretch { -ms-flex-item-align: stretch !important; align-self: stretch !important; } } @media (min-width: 1201px) { .flex-xl-row { -ms-flex-direction: row !important; flex-direction: row !important; } .flex-xl-column { -ms-flex-direction: column !important; flex-direction: column !important; } .flex-xl-row-reverse { -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .flex-xl-column-reverse { -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .flex-xl-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .flex-xl-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .flex-xl-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .flex-xl-fill { -ms-flex: 1 1 auto !important; flex: 1 1 auto !important; } .flex-xl-grow-0 { -ms-flex-positive: 0 !important; flex-grow: 0 !important; } .flex-xl-grow-1 { -ms-flex-positive: 1 !important; flex-grow: 1 !important; } .flex-xl-shrink-0 { -ms-flex-negative: 0 !important; flex-shrink: 0 !important; } .flex-xl-shrink-1 { -ms-flex-negative: 1 !important; flex-shrink: 1 !important; } .justify-content-xl-start { -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-xl-end { -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-content-xl-center { -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-xl-between { -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-xl-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .align-items-xl-start { -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-xl-end { -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-xl-center { -ms-flex-align: center !important; align-items: center !important; } .align-items-xl-baseline { -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-xl-stretch { -ms-flex-align: stretch !important; align-items: stretch !important; } .align-content-xl-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .align-content-xl-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .align-content-xl-center { -ms-flex-line-pack: center !important; align-content: center !important; } .align-content-xl-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .align-content-xl-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .align-content-xl-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } .align-self-xl-auto { -ms-flex-item-align: auto !important; align-self: auto !important; } .align-self-xl-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .align-self-xl-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .align-self-xl-center { -ms-flex-item-align: center !important; align-self: center !important; } .align-self-xl-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; } .align-self-xl-stretch { -ms-flex-item-align: stretch !important; align-self: stretch !important; } } /* Flex reset */ .flex-reset { -ms-flex: 0 1 auto !important; flex: 0 1 auto !important; } @media (min-width: 577px) { .flex-sm-reset { -ms-flex: 0 1 auto !important; flex: 0 1 auto !important; } } @media (min-width: 769px) { .flex-md-reset { -ms-flex: 0 1 auto !important; flex: 0 1 auto !important; } } @media (min-width: 993px) { .flex-lg-reset { -ms-flex: 0 1 auto !important; flex: 0 1 auto !important; } } @media (min-width: 1201px) { .flex-xl-reset { -ms-flex: 0 1 auto !important; flex: 0 1 auto !important; } } /* ------------------------------------------------------------------------------- 29. Position utilities [hm-29] ------------------------------------------------------------------------------- */ .position-static { position: static !important; } .position-relative { position: relative !important; } .position-absolute { position: absolute !important; } .position-fixed { position: fixed !important; } .position-sticky { position: -webkit-sticky !important; position: sticky !important; } .top-0 { top: 0 !important; } .bottom-0 { bottom: 0 !important; } .left-0 { left: 0 !important; } .right-0 { right: 0 !important; } .top-auto { top: auto !important; } .bottom-auto { bottom: auto !important; } .left-auto { left: auto !important; } .right-auto { right: auto !important; } @media (min-width: 577px) { .position-sm-static { position: static !important; } .position-sm-relative { position: relative !important; } .position-sm-absolute { position: absolute !important; } .position-sm-fixed { position: fixed !important; } .position-sm-sticky { position: -webkit-sticky !important; position: sticky !important; } .top-sm-0 { top: 0 !important; } .bottom-sm-0 { bottom: 0 !important; } .left-sm-0 { left: 0 !important; } .right-sm-0 { right: 0 !important; } .top-sm-auto { top: auto !important; } .bottom-sm-auto { bottom: auto !important; } .left-sm-auto { left: auto !important; } .right-sm-auto { right: auto !important; } } @media (min-width: 769px) { .position-md-static { position: static !important; } .position-md-relative { position: relative !important; } .position-md-absolute { position: absolute !important; } .position-md-fixed { position: fixed !important; } .position-md-sticky { position: -webkit-sticky !important; position: sticky !important; } .top-md-0 { top: 0 !important; } .bottom-md-0 { bottom: 0 !important; } .left-md-0 { left: 0 !important; } .right-md-0 { right: 0 !important; } .top-md-auto { top: auto !important; } .bottom-md-auto { bottom: auto !important; } .left-md-auto { left: auto !important; } .right-md-auto { right: auto !important; } } @media (min-width: 993px) { .position-lg-static { position: static !important; } .position-lg-relative { position: relative !important; } .position-lg-absolute { position: absolute !important; } .position-lg-fixed { position: fixed !important; } .position-lg-sticky { position: -webkit-sticky !important; position: sticky !important; } .top-lg-0 { top: 0 !important; } .bottom-lg-0 { bottom: 0 !important; } .left-lg-0 { left: 0 !important; } .right-lg-0 { right: 0 !important; } .top-lg-auto { top: auto !important; } .bottom-lg-auto { bottom: auto !important; } .left-lg-auto { left: auto !important; } .right-lg-auto { right: auto !important; } } @media (min-width: 1201px) { .position-xl-static { position: static !important; } .position-xl-relative { position: relative !important; } .position-xl-absolute { position: absolute !important; } .position-xl-fixed { position: fixed !important; } .position-xl-sticky { position: -webkit-sticky !important; position: sticky !important; } .top-xl-0 { top: 0 !important; } .bottom-xl-0 { bottom: 0 !important; } .left-xl-0 { left: 0 !important; } .right-xl-0 { right: 0 !important; } .top-xl-auto { top: auto !important; } .bottom-xl-auto { bottom: auto !important; } .left-xl-auto { left: auto !important; } .right-xl-auto { right: auto !important; } } /* ------------------------------------------------------------------------------- 30. Other utilities [hm-30] ------------------------------------------------------------------------------- */ .clearfix::after { display: block; clear: both; content: ""; } /* Screen reader */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .sr-only-focusable:active, .sr-only-focusable:focus { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; } /* Borders */ .border { border: var(--base-border-width) solid var(--lm-border-color) !important; } .border-top { border-top: var(--base-border-width) solid var(--lm-border-color) !important; } .border-bottom { border-bottom: var(--base-border-width) solid var(--lm-border-color) !important; } .border-left { border-left: var(--base-border-width) solid var(--lm-border-color) !important; } .border-right { border-right: var(--base-border-width) solid var(--lm-border-color) !important; } .dark-mode .border { border: var(--base-border-width) solid var(--dm-border-color) !important; } .dark-mode .border-top { border-top: var(--base-border-width) solid var(--dm-border-color) !important; } .dark-mode .border-bottom { border-bottom: var(--base-border-width) solid var(--dm-border-color) !important; } .dark-mode .border-left { border-left: var(--base-border-width) solid var(--dm-border-color) !important; } .dark-mode .border-right { border-right: var(--base-border-width) solid var(--dm-border-color) !important; } .border-0 { border: none !important; } .border-top-0 { border-top: none !important; } .border-bottom-0 { border-bottom: none !important; } .border-left-0 { border-left: none !important; } .border-right-0 { border-right: none !important; } .rounded-0 { border-radius: 0 !important; } .rounded { border-radius: var(--base-border-radius) !important; } .rounded-top { border-top-left-radius: var(--base-border-radius) !important; border-top-right-radius: var(--base-border-radius) !important; } .rounded-bottom { border-bottom-left-radius: var(--base-border-radius) !important; border-bottom-right-radius: var(--base-border-radius) !important; } .rounded-left { border-top-left-radius: var(--base-border-radius) !important; border-bottom-left-radius: var(--base-border-radius) !important; } .rounded-right { border-top-right-radius: var(--base-border-radius) !important; border-bottom-right-radius: var(--base-border-radius) !important; } .rounded-circle { border-radius: 50% !important; } .border-transparent, .dark-mode .border-transparent { border: var(--base-border-width) solid transparent !important; } .border-top-transparent, .dark-mode .border-top-transparent { border-top: var(--base-border-width) solid transparent !important; } .border-bottom-transparent, .dark-mode .border-bottom-transparent { border-bottom: var(--base-border-width) solid transparent !important; } .border-left-transparent, .dark-mode .border-left-transparent { border-left: var(--base-border-width) solid transparent !important; } .border-right-transparent, .dark-mode .border-right-transparent { border-right: var(--base-border-width) solid transparent !important; } /* Float */ .float-left { float: left !important; } .float-right { float: right !important; } .float-none { float: none !important; } @media (min-width: 577px) { .float-sm-left { float: left !important; } .float-sm-right { float: right !important; } .float-sm-none { float: none !important; } } @media (min-width: 769px) { .float-md-left { float: left !important; } .float-md-right { float: right !important; } .float-md-none { float: none !important; } } @media (min-width: 993px) { .float-lg-left { float: left !important; } .float-lg-right { float: right !important; } .float-lg-none { float: none !important; } } @media (min-width: 1201px) { .float-xl-left { float: left !important; } .float-xl-right { float: right !important; } .float-xl-none { float: none !important; } } /* Text */ .text-monospace { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; } .text-justify { text-align: justify !important; } .text-wrap { white-space: normal !important; } .text-nowrap { white-space: nowrap !important; } .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } .text-center { text-align: center !important; } @media (min-width: 577px) { .text-sm-left { text-align: left !important; } .text-sm-right { text-align: right !important; } .text-sm-center { text-align: center !important; } } @media (min-width: 769px) { .text-md-left { text-align: left !important; } .text-md-right { text-align: right !important; } .text-md-center { text-align: center !important; } } @media (min-width: 993px) { .text-lg-left { text-align: left !important; } .text-lg-right { text-align: right !important; } .text-lg-center { text-align: center !important; } } @media (min-width: 1201px) { .text-xl-left { text-align: left !important; } .text-xl-right { text-align: right !important; } .text-xl-center { text-align: center !important; } } .text-lowercase { text-transform: lowercase !important; } .text-uppercase { text-transform: uppercase !important; } .text-capitalize { text-transform: capitalize !important; } .font-italic { font-style: italic !important; } .text-hide { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; } .text-decoration-none { text-decoration: none !important; } .text-decoration-underline { text-decoration: underline !important; } .text-break { word-wrap: break-word !important; } .text-reset { color: inherit !important; } .text-extra-letter-spacing, .text-extra-letter-spacing * { /* Improves readability in most cases */ letter-spacing: var(--extra-letter-spacing-size) !important; } .text-smoothing-antialiased, body:not(.dark-mode) .text-smoothing-antialiased-lm, .dark-mode .text-smoothing-antialiased-dm { -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } .text-smoothing-auto, body:not(.dark-mode) .text-smoothing-auto-lm, .dark-mode .text-smoothing-auto-dm { -webkit-font-smoothing: auto !important; -moz-osx-font-smoothing: auto !important; } /* Font sizes and weights */ .font-size-12 { font-size: 1.2rem !important; } .font-size-14 { font-size: 1.4rem !important; } .font-size-16 { font-size: 1.6rem !important; } .font-size-18 { font-size: 1.8rem !important; } .font-size-20 { font-size: 2rem !important; } .font-size-22 { font-size: 2.2rem !important; } .font-size-24 { font-size: 2.4rem !important; } .font-weight-light { font-weight: 300 !important; } .font-weight-lighter { font-weight: lighter !important; } .font-weight-normal { font-weight: 400 !important; } .font-weight-medium { font-weight: 500 !important; } .font-weight-semi-bold { font-weight: 600 !important; } .font-weight-bold { font-weight: 700 !important; } .font-weight-bolder { font-weight: bolder !important; } /* Background colors */ .bg-white, body:not(.dark-mode) .bg-white-lm, .dark-mode .bg-white-dm { background-color: var(--white-bg-color) !important; } .bg-light, body:not(.dark-mode) .bg-light-lm, .dark-mode .bg-light-dm { background-color: var(--gray-color-light) !important; } .bg-transparent, body:not(.dark-mode) .bg-transparent-lm, .dark-mode .bg-transparent-dm { background-color: transparent !important; } .bg-primary, body:not(.dark-mode) .bg-primary-lm, .dark-mode .bg-primary-dm { background-color: var(--primary-color) !important; } .bg-success, body:not(.dark-mode) .bg-success-lm, .dark-mode .bg-success-dm { background-color: var(--success-color) !important; } .bg-secondary, body:not(.dark-mode) .bg-secondary-lm, .dark-mode .bg-secondary-dm { background-color: var(--secondary-color) !important; } .bg-danger, body:not(.dark-mode) .bg-danger-lm, .dark-mode .bg-danger-dm { background-color: var(--danger-color) !important; } .bg-dark-light, body:not(.dark-mode) .bg-dark-light-lm, .dark-mode .bg-dark-light-dm { background-color: var(--dark-color-light) !important; } .bg-dark, body:not(.dark-mode) .bg-dark-lm, .dark-mode .bg-dark-dm { background-color: var(--dark-color) !important; } .bg-very-dark, body:not(.dark-mode) .bg-very-dark-lm, .dark-mode .bg-very-dark-dm { background-color: var(--dark-color-dark) !important; } /* Text colors */ /* Text white */ .text-white, body:not(.dark-mode) .text-white-lm, .dark-mode .text-white-dm { color: #ffffff !important; } /* Text muted */ .text-muted, body:not(.dark-mode) .text-muted-lm { color: var(--lm-muted-text-color) !important; } .dark-mode .text-muted, .dark-mode .text-muted-dm { color: var(--dm-muted-text-color) !important; } /* Text primary */ .text-primary, body:not(.dark-mode) .text-primary-lm, .dark-mode .text-primary-dm { color: var(--primary-color) !important; } a.text-primary:hover, a.text-primary:focus, body:not(.dark-mode) a.text-primary-lm:hover, body:not(.dark-mode) a.text-primary-lm:focus, .dark-mode a.text-primary-dm:hover, .dark-mode a.text-primary-dm:focus { color: var(--primary-color-light) !important; } /* Text success */ .text-success, body:not(.dark-mode) .text-success-lm, .dark-mode .text-success-dm { color: var(--success-color) !important; } a.text-success:hover, a.text-success:focus, body:not(.dark-mode) a.text-success-lm:hover, body:not(.dark-mode) a.text-success-lm:focus, .dark-mode a.text-success-dm:hover, .dark-mode a.text-success-dm:focus { color: var(--success-color-light) !important; } /* Text secondary */ .text-secondary, body:not(.dark-mode) .text-secondary-lm, .dark-mode .text-secondary-dm { color: var(--secondary-color) !important; } a.text-secondary:hover, a.text-secondary:focus, body:not(.dark-mode) a.text-secondary-lm:hover, body:not(.dark-mode) a.text-secondary-lm:focus, .dark-mode a.text-secondary-dm:hover, .dark-mode a.text-secondary-dm:focus { color: var(--secondary-color-light) !important; } /* Text danger */ .text-danger, body:not(.dark-mode) .text-danger-lm, .dark-mode .text-danger-dm { color: var(--danger-color) !important; } a.text-danger:hover, a.text-danger:focus, body:not(.dark-mode) a.text-danger-lm:hover, body:not(.dark-mode) a.text-danger-lm:focus, .dark-mode a.text-danger-dm:hover, .dark-mode a.text-danger-dm:focus { color: var(--danger-color-light) !important; } /* Text light */ .text-light, body:not(.dark-mode) .text-light-lm, .dark-mode .text-light-dm { color: var(--dm-base-text-color) !important; } a.text-light:hover, a.text-light:focus, body:not(.dark-mode) a.text-light-lm:hover, body:not(.dark-mode) a.text-light-lm:focus, .dark-mode a.text-light-dm:hover, .dark-mode a.text-light-dm:focus { color: var(--dm-base-text-color-light) !important; } /* Text light */ .text-dark, body:not(.dark-mode) .text-dark-lm, .dark-mode .text-dark-dm { color: var(--lm-base-text-color) !important; } a.text-dark:hover, a.text-dark:focus, body:not(.dark-mode) a.text-dark-lm:hover, body:not(.dark-mode) a.text-dark-lm:focus, .dark-mode a.text-dark-dm:hover, .dark-mode a.text-dark-dm:focus { color: var(--lm-base-text-color-light) !important; } /* Overflow utilities */ .overflow-hidden { overflow: hidden !important; } .overflow-x-hidden { overflow-x: hidden !important; } .overflow-y-hidden { overflow-y: hidden !important; } .overflow-auto { overflow: auto !important; } .overflow-x-auto { overflow-x: auto !important; } .overflow-y-auto { overflow-y: auto !important; } .overflow-scroll { overflow: scroll !important; } .overflow-x-scroll { overflow-x: scroll !important; } .overflow-y-scroll { overflow-y: scroll !important; } @media (min-width: 577px) { .overflow-sm-hidden { overflow: hidden !important; } .overflow-x-sm-hidden { overflow-x: hidden !important; } .overflow-y-sm-hidden { overflow-y: hidden !important; } .overflow-sm-auto { overflow: auto !important; } .overflow-x-sm-auto { overflow-x: auto !important; } .overflow-y-sm-auto { overflow-y: auto !important; } .overflow-sm-scroll { overflow: scroll !important; } .overflow-x-sm-scroll { overflow-x: scroll !important; } .overflow-y-sm-scroll { overflow-y: scroll !important; } } @media (min-width: 769px) { .overflow-md-hidden { overflow: hidden !important; } .overflow-x-md-hidden { overflow-x: hidden !important; } .overflow-y-md-hidden { overflow-y: hidden !important; } .overflow-md-auto { overflow: auto !important; } .overflow-x-md-auto { overflow-x: auto !important; } .overflow-y-md-auto { overflow-y: auto !important; } .overflow-md-scroll { overflow: scroll !important; } .overflow-x-md-scroll { overflow-x: scroll !important; } .overflow-y-md-scroll { overflow-y: scroll !important; } } @media (min-width: 993px) { .overflow-lg-hidden { overflow: hidden !important; } .overflow-x-lg-hidden { overflow-x: hidden !important; } .overflow-y-lg-hidden { overflow-y: hidden !important; } .overflow-lg-auto { overflow: auto !important; } .overflow-x-lg-auto { overflow-x: auto !important; } .overflow-y-lg-auto { overflow-y: auto !important; } .overflow-lg-scroll { overflow: scroll !important; } .overflow-x-lg-scroll { overflow-x: scroll !important; } .overflow-y-lg-scroll { overflow-y: scroll !important; } } @media (min-width: 1201px) { .overflow-xl-hidden { overflow: hidden !important; } .overflow-x-xl-hidden { overflow-x: hidden !important; } .overflow-y-xl-hidden { overflow-y: hidden !important; } .overflow-xl-auto { overflow: auto !important; } .overflow-x-xl-auto { overflow-x: auto !important; } .overflow-y-xl-auto { overflow-y: auto !important; } .overflow-xl-scroll { overflow: scroll !important; } .overflow-x-xl-scroll { overflow-x: scroll !important; } .overflow-y-xl-scroll { overflow-y: scroll !important; } } /* Visibility utilities */ .visible { visibility: visible !important; } .invisible { visibility: hidden !important; } body:not(.dark-mode) .visible-lm { visibility: visible !important; } body:not(.dark-mode) .invisible-lm { visibility: hidden !important; } .dark-mode .visible-dm { visibility: visible !important; } .dark-mode .invisible-dm { visibility: hidden !important; } /* Vertical align utilities */ .align-baseline { vertical-align: baseline !important; } .align-top { vertical-align: top !important; } .align-middle { vertical-align: middle !important; } .align-bottom { vertical-align: bottom !important; } .align-text-bottom { vertical-align: text-bottom !important; } .align-text-top { vertical-align: text-top !important; } /* Z-index utilities */ .z-0 { z-index: 0 !important; } .z-10 { z-index: 10 !important; } .z-20 { z-index: 20 !important; } .z-30 { z-index: 30 !important; } .z-40 { z-index: 40 !important; } .z-50 { z-index: 50 !important; } .z-auto { z-index: auto !important; } @media (min-width: 577px) { .z-sm-0 { z-index: 0 !important; } .z-sm-10 { z-index: 10 !important; } .z-sm-20 { z-index: 20 !important; } .z-sm-30 { z-index: 30 !important; } .z-sm-40 { z-index: 40 !important; } .z-sm-50 { z-index: 50 !important; } .z-sm-auto { z-index: auto !important; } } @media (min-width: 769px) { .z-md-0 { z-index: 0 !important; } .z-md-10 { z-index: 10 !important; } .z-md-20 { z-index: 20 !important; } .z-md-30 { z-index: 30 !important; } .z-md-40 { z-index: 40 !important; } .z-md-50 { z-index: 50 !important; } .z-md-auto { z-index: auto !important; } } @media (min-width: 993px) { .z-lg-0 { z-index: 0 !important; } .z-lg-10 { z-index: 10 !important; } .z-lg-20 { z-index: 20 !important; } .z-lg-30 { z-index: 30 !important; } .z-lg-40 { z-index: 40 !important; } .z-lg-50 { z-index: 50 !important; } .z-lg-auto { z-index: auto !important; } } @media (min-width: 1201px) { .z-xl-0 { z-index: 0 !important; } .z-xl-10 { z-index: 10 !important; } .z-xl-20 { z-index: 20 !important; } .z-xl-30 { z-index: 30 !important; } .z-xl-40 { z-index: 40 !important; } .z-xl-50 { z-index: 50 !important; } .z-xl-auto { z-index: auto !important; } } /* Box shadow utilities */ .shadow-none { -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; } .shadow-sm { -moz-box-shadow: var(--lm-small-shadow) !important; -webkit-box-shadow: var(--lm-small-shadow) !important; box-shadow: var(--lm-small-shadow) !important; } .dark-mode .shadow-sm { -moz-box-shadow: var(--dm-small-shadow) !important; -webkit-box-shadow: var(--dm-small-shadow) !important; box-shadow: var(--dm-small-shadow) !important; } .shadow { -moz-box-shadow: var(--lm-shadow) !important; -webkit-box-shadow: var(--lm-shadow) !important; box-shadow: var(--lm-shadow) !important; } .dark-mode .shadow { -moz-box-shadow: var(--dm-shadow) !important; -webkit-box-shadow: var(--dm-shadow) !important; box-shadow: var(--dm-shadow) !important; } .shadow-lg { -moz-box-shadow: var(--lm-large-shadow) !important; -webkit-box-shadow: var(--lm-large-shadow) !important; box-shadow: var(--lm-large-shadow) !important; } .dark-mode .shadow-lg { -moz-box-shadow: var(--dm-large-shadow) !important; -webkit-box-shadow: var(--dm-large-shadow) !important; box-shadow: var(--dm-large-shadow) !important; } /* Pointer events utilities */ .pointer-events-auto { pointer-events: auto !important; } .pointer-events-none { pointer-events: none !important; }