/* ------------------------------------------------------------------------------- Halfmoon CSS Version: 1.1.1 https://www.gethalfmoon.com Copyright, Halfmoon UI Licensed under MIT (https://www.gethalfmoon.com/license) ------------------------------------------------------------------------------- The above notice must be included in its entirety when this file is used. Table of contents: 1. Base styles --------------------------------------------------- [hm-01] 2. Typography ---------------------------------------------------- [hm-02] 3. Scrollbars ---------------------------------------------------- [hm-03] 4. Layout -------------------------------------------------------- [hm-04] 5. Page building (containers, columns, content and card) --------- [hm-05] 6. Links --------------------------------------------------------- [hm-06] 7. Buttons ------------------------------------------------------- [hm-07] 8. List ---------------------------------------------------------- [hm-08] 9. Code ---------------------------------------------------------- [hm-09] 10. Tables -------------------------------------------------------- [hm-10] 11. Form elements ------------------------------------------------- [hm-11] 12. Dropdown ------------------------------------------------------ [hm-12] 13. Modal --------------------------------------------------------- [hm-13] 14. Alerts -------------------------------------------------------- [hm-14] 15. Navbar content ------------------------------------------------ [hm-15] 16. Sidebar content ----------------------------------------------- [hm-16] 17. Pagination ---------------------------------------------------- [hm-17] 18. Breadcrumb ---------------------------------------------------- [hm-18] 19. Tooltips ------------------------------------------------------ [hm-19] 20. Badges -------------------------------------------------------- [hm-20] 21. Image --------------------------------------------------------- [hm-21] 22. Button group -------------------------------------------------- [hm-22] 23. Collapse ------------------------------------------------------ [hm-23] 24. Progress ------------------------------------------------------ [hm-24] 25. Spacing utilities --------------------------------------------- [hm-25] 26. Display utilities --------------------------------------------- [hm-26] 27. Sizing utilities ---------------------------------------------- [hm-27] 28. Flex utilities ------------------------------------------------ [hm-28] 29. Position utilities -------------------------------------------- [hm-29] 30. Other utilities ----------------------------------------------- [hm-30] Credits: Bootstrap and its contributors for class names and inspiration. Moreover, the containers, grid system and the flex utilities found in Halfmoon CSS are almost direct copies of the ones found in Bootstrap. Therefore, the following copyright notice is provided: --------------------------------------------------------------------------- Bootstrap (https://getbootstrap.com/) Copyright 2011-2020 The Bootstrap Authors Copyright 2011-2020 Twitter, Inc. Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) --------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------- 0. Normalize CSS Notes: ~ Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing. ~ normalize.css | MIT License | github.com/necolas/normalize.css ~ This is a slighly customized version of normalize.css 8.0.1, specifically for dealing with Halfmoon CSS. ~ Comments have been removed for the sake of compactness. ------------------------------------------------------------------------------- */ html { line-height: 1.15; -webkit-text-size-adjust: 100%; } body { margin: 0; } main { display: block; } h1 { font-size: 2em; margin: 0.67em 0; } hr { box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace, monospace; font-size: 1em; } a { background-color: transparent; } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b, strong { font-weight: bolder; } code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { border-style: none; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { vertical-align: baseline; } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details { display: block; } summary { display: list-item; } template { display: none; } [hidden] { display: none; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /* ------------------------------------------------------------------------------- 1. Base styles [hm-01] ------------------------------------------------------------------------------- */ html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; } /* HTML font size and scaling */ html { font-size: 62.5%; } @media (min-width: 1600px) { html { font-size: 75%; } } @media (min-width: 1920px) { html { font-size: 87.5%; } } /* Auto-scaling disabled */ @media (min-width: 1600px) { html.auto-scaling-disabled { font-size: 62.5%; } } @media (min-width: 1920px) { html.auto-scaling-disabled { font-size: 62.5%; } } /* DOM body */ body { background-color: #ffffff; background-image: none; color: rgba(0, 0, 0, 0.85); font-size: 1.4rem; line-height: 1.5; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: 400; } .dark-mode { background-color: #25282c; background-image: none; color: rgba(255, 255, 255, 0.8); /* Anti-aliasing works best on light fonts on dark backgrounds. Otherwise, there is a loss of readability. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Horizontal rule */ hr { height: 1px; color: rgba(0, 0, 0, 0.05); background-color: rgba(0, 0, 0, 0.05); border: none; } .dark-mode hr { color: rgba(255, 255, 255, 0.05); background-color: rgba(255, 255, 255, 0.05); } /* ------------------------------------------------------------------------------- 2. Typography [hm-02] ------------------------------------------------------------------------------- */ h1 { margin-top: 1rem; margin-bottom: 2rem; font-weight: 400; } h2 { margin-top: 1rem; margin-bottom: 2rem; font-weight: 400; } h3 { margin-top: 1rem; margin-bottom: 2rem; font-weight: 400; } h4 { margin-top: 1rem; margin-bottom: 2rem; font-weight: 400; } h5 { margin-top: 1rem; margin-bottom: 2rem; font-weight: 400; } h6 { margin-top: 1rem; margin-bottom: 2rem; font-weight: 400; } h1 { font-size: 4rem; line-height: 1.3; } h2 { font-size: 3.6rem; line-height: 1.35; } h3 { font-size: 3rem; line-height: 1.4; } h4 { font-size: 2.4rem; line-height: 1.45; } h5 { font-size: 1.8rem; } h6 { font-size: 1.5rem; } /* ------------------------------------------------------------------------------- 3. Scrollbars [hm-03] Notes: ~ Any scrollbars on the body itself is not affected. This is because the page-wrapper is always expected, as the entire framework is built around it. ~ Only styled on screens larger than 768px, because mobiles and tablets have disappearing scrollbars, which look great most of the time. ~ The webkit scrollbars work on webkit based browsers, such as Chrome, Safari, Brave, and the new Microsoft Edge. ~ The custom CSS scrollbars work only on Firefox as of 2020. It is a very new specification. ------------------------------------------------------------------------------- */ @media (min-width: 769px) { /* Base scrollbar */ .with-custom-webkit-scrollbars *::-webkit-scrollbar { width: 1.4rem; height: 1.4rem; background-color: transparent; } .dark-mode.with-custom-webkit-scrollbars *::-webkit-scrollbar { background-color: transparent; } .with-custom-webkit-scrollbars *::-webkit-scrollbar-track:vertical { border-left: 1px solid rgba(0, 0, 0, 0.1); } .with-custom-webkit-scrollbars *::-webkit-scrollbar-track:horizontal { border-top: 1px solid rgba(0, 0, 0, 0.1); } .dark-mode.with-custom-webkit-scrollbars *::-webkit-scrollbar-track { border-color: rgba(255, 255, 255, 0.05); } .with-custom-webkit-scrollbars *::-webkit-scrollbar-thumb { min-width: 3rem; min-height: 3rem; background-color: rgba(0, 0, 0, 0.25); border: 0.4rem solid transparent; -moz-background-clip: content; /* Firefox 3.6 */ -webkit-background-clip: content; /* Safari 4? Chrome 6? */ background-clip: content-box; border-radius: 1rem; } .with-custom-webkit-scrollbars *::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.4); border-color: transparent; } .dark-mode.with-custom-webkit-scrollbars *::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.25); border-color: transparent; } .dark-mode.with-custom-webkit-scrollbars *::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.4); border-color: transparent; } .with-custom-webkit-scrollbars *::-webkit-scrollbar-corner { background-color: transparent; border-left: 1px solid rgba(0, 0, 0, 0.1); border-top: 1px solid rgba(0, 0, 0, 0.1); } .dark-mode.with-custom-webkit-scrollbars *::-webkit-scrollbar-corner { background-color: transparent; border-color: rgba(255, 255, 255, 0.05); } .with-custom-css-scrollbars * { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.25) #ffffff; } .dark-mode.with-custom-css-scrollbars * { scrollbar-color: rgba(255, 255, 255, 0.25) #25282c; } /* Sidebar scrollbar */ .with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar { width: 1.4rem; height: 1.4rem; background-color: transparent; } .dark-mode.with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar { background-color: transparent; } .with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-track { border-width: 1px; border-color: rgba(0, 0, 0, 0.1); } .dark-mode.with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-track { border-color: rgba(255, 255, 255, 0.05); } .with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.25); border-width: 0.4rem; border-color: transparent; border-radius: 1rem; } .with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.4); border-color: transparent; } .dark-mode.with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.25); border-color: transparent; } .dark-mode.with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.4); border-color: transparent; } .with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-corner { background-color: transparent; border-width: 1px; border-color: rgba(0, 0, 0, 0.1); } .dark-mode.with-custom-webkit-scrollbars .sidebar::-webkit-scrollbar-corner { background-color: transparent; border-color: rgba(255, 255, 255, 0.05); } .with-custom-css-scrollbars .sidebar { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.25) #ffffff; } .dark-mode.with-custom-css-scrollbars .sidebar { scrollbar-color: rgba(255, 255, 255, 0.25) #191c20; } /* Modal scrollbar */ .with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar { width: 1.4rem; height: 1.4rem; background-color: transparent; } .dark-mode.with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar { background-color: transparent; } .with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-track { border-width: 1px; border-color: rgba(255, 255, 255, 0.05); } .dark-mode.with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-track { border-color: rgba(255, 255, 255, 0.05); } .with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.25); border-width: 0.4rem; border-color: transparent; border-radius: 1rem; } .with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.4); border-color: transparent; } .dark-mode.with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.25); border-color: transparent; } .dark-mode.with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.4); border-color: transparent; } .with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-corner { background-color: transparent; border-width: 1px; border-color: rgba(0, 0, 0, 0.1); } .dark-mode.with-custom-webkit-scrollbars .modal-dialog::-webkit-scrollbar-corner { background-color: transparent; border-color: rgba(255, 255, 255, 0.05); } .with-custom-css-scrollbars .modal-dialog { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent; } .dark-mode.with-custom-css-scrollbars .modal-dialog { scrollbar-color: rgba(255, 255, 255, 0.25) transparent; } /* Full screen modal scrollbar */ .with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar { width: 1.4rem; height: 1.4rem; background-color: #ffffff; } .dark-mode.with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar { background-color: #191c20; } .with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-track { border-width: 1px; border-color: rgba(0, 0, 0, 0.1); } .dark-mode.with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-track { border-color: rgba(255, 255, 255, 0.05); } .with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.25); border-width: 0.4rem; border-color: transparent; border-radius: 1rem; } .with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.4); border-color: transparent; } .dark-mode.with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.25); border-color: transparent; } .dark-mode.with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.4); border-color: transparent; } .with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-corner { background-color: #ffffff; border-width: 1px; border-color: rgba(0, 0, 0, 0.1); } .dark-mode.with-custom-webkit-scrollbars .modal-full .modal-dialog::-webkit-scrollbar-corner { background-color: #191c20; border-color: rgba(255, 255, 255, 0.05); } .with-custom-css-scrollbars .modal-full .modal-dialog { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.25) #ffffff; } .dark-mode.with-custom-css-scrollbars .modal-full .modal-dialog { scrollbar-color: rgba(255, 255, 255, 0.25) #191c20; } /* Card scrollbar */ .with-custom-webkit-scrollbars .card::-webkit-scrollbar { width: 1.4rem; height: 1.4rem; background-color: transparent; } .dark-mode.with-custom-webkit-scrollbars .card::-webkit-scrollbar { background-color: transparent; } .with-custom-webkit-scrollbars .card::-webkit-scrollbar-track { border-width: 1px; border-color: rgba(0, 0, 0, 0.1); } .dark-mode.with-custom-webkit-scrollbars .card::-webkit-scrollbar-track { border-color: rgba(255, 255, 255, 0.05); } .with-custom-webkit-scrollbars .card::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.25); border-width: 0.4rem; border-color: transparent; border-radius: 1rem; } .with-custom-webkit-scrollbars .card::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.4); border-color: transparent; } .dark-mode.with-custom-webkit-scrollbars .card::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.25); border-color: transparent; } .dark-mode.with-custom-webkit-scrollbars .card::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.4); border-color: transparent; } .with-custom-webkit-scrollbars .card::-webkit-scrollbar-corner { background-color: transparent; border-width: 1px; border-color: rgba(0, 0, 0, 0.1); } .dark-mode.with-custom-webkit-scrollbars .card::-webkit-scrollbar-corner { background-color: transparent; border-color: rgba(255, 255, 255, 0.05); } .with-custom-css-scrollbars .card { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.25) #ffffff; } .dark-mode.with-custom-css-scrollbars .card { scrollbar-color: rgba(255, 255, 255, 0.25) #191c20; } /* CSS scrollbar with transparent track (utility class) */ .with-custom-css-scrollbars .css-scrollbar-transparent-track { scrollbar-width: thin !important; scrollbar-color: rgba(0, 0, 0, 0.25) transparent !important; } .dark-mode.with-custom-css-scrollbars .css-scrollbar-transparent-track { scrollbar-color: rgba(255, 255, 255, 0.25) transparent !important; } } /* ------------------------------------------------------------------------------- 4. Layout [hm-04] Notes: ~ The following section contains the position, width, height, and bg color related styles of the page-wrapper, sticky-alerts, navbars, sidebar, and content-wrapper. These are grouped together because reading them all at once in serial makes it quite easy to understand how pages are structured. ~ The styles of the children of the above elements can be found in their own sections of this stylesheet. These sections are: ~ 14. Alerts ~ 15. Navbar content ~ 16. Sidebar content ~ The page-wrapper can have additional helper classes which automatically fixes the positions and the sizes of the children elements. For example, .page-wrapper.with-navbar will automatically push the content-wrapper down by an amount which is equal to the height of the navbar, in order to make space for the navbar. ------------------------------------------------------------------------------- */ html, body { position: absolute; height: 100%; width: 100%; margin: 0; padding: 0; left: 0; top: 0; } /* Page wrapper */ .page-wrapper { position: absolute; height: 100%; width: 100%; overflow: hidden; } /* Sticky alerts */ .sticky-alerts { position: fixed; top: 0; right: 2.4rem; z-index: 100; /* Can be used on top of modals */ } /* Navbar */ .navbar { position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-pack: start; justify-content: flex-start; width: 100%; height: 5rem; padding-left: 1rem; padding-right: 1rem; background-color: #ffffff; background-image: none; border-bottom: 1px solid rgba(0, 0, 0, 0.2); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .dark-mode .navbar { background-color: #111417; background-image: none; border-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .navbar.navbar-fixed-bottom { height: 5rem; border-bottom: none; border-top: 1px solid rgba(0, 0, 0, 0.2); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .dark-mode .navbar.navbar-fixed-bottom { border-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .navbar.navbar-static-bottom { border-bottom: none; border-top: 1px solid rgba(0, 0, 0, 0.2); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .dark-mode .navbar.navbar-static-bottom { border-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .page-wrapper > .navbar { position: fixed; left: 0; z-index: 40; display: none; } .page-wrapper > .navbar:not(.navbar-fixed-bottom) { top: 0; } .page-wrapper.with-navbar > .navbar:not(.navbar-fixed-bottom) { display: -ms-flexbox; display: flex; } .page-wrapper > .navbar.navbar-fixed-bottom { bottom: 0; } .page-wrapper.with-navbar-fixed-bottom > .navbar.navbar-fixed-bottom { display: -ms-flexbox; display: flex; } /* Sidebar */ .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 26rem; max-width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; z-index: 20; background-color: #ffffff; background-image: none; border-right: 1px solid rgba(0, 0, 0, 0.2); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .dark-mode .sidebar { background-color: #191c20; background-image: none; border-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .page-wrapper > .sidebar { display: none; } .page-wrapper.with-sidebar > .sidebar { display: block; } /* Content wrapper */ .content-wrapper { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; overflow: auto; } /* Page wrapper helper classes */ /* With navbar */ .page-wrapper.with-navbar > .sticky-alerts { top: 5rem; } .page-wrapper.with-navbar > .content-wrapper { top: 5rem; height: calc(100% - 5rem); } .page-wrapper.with-navbar > .sidebar { top: 5rem; height: calc(100% - 5rem); } /* With sidebar */ .page-wrapper.with-sidebar > .content-wrapper { left: 26rem; width: calc(100% - 26rem); } @media (max-width: 768px) { .page-wrapper.with-sidebar > .content-wrapper { width: 100%; } } /* Hidden sidebar */ .page-wrapper.with-sidebar[data-sidebar-hidden] > .sidebar { left: -100%; } .page-wrapper.with-sidebar[data-sidebar-hidden] > .content-wrapper { width: 100%; left: 0; } /* With navbar fixed to bottom */ .page-wrapper.with-navbar-fixed-bottom > .content-wrapper { bottom: 5rem; height: calc(100% - 5rem); } .page-wrapper.with-navbar-fixed-bottom > .sidebar { bottom: 5rem; height: calc(100% - 5rem); } /* With navbar and navbar fixed to bottom */ .page-wrapper.with-navbar.with-navbar-fixed-bottom > .content-wrapper { top: 5rem; bottom: 5rem; height: calc(100% - 5rem - 5rem); } .page-wrapper.with-navbar.with-navbar-fixed-bottom > .sidebar { top: 5rem; bottom: 5rem; height: calc(100% - 5rem - 5rem); } /* Full height sidebar */ .page-wrapper.with-sidebar[data-sidebar-type~="full-height"] > .sidebar { height: 100%; top: 0; } .page-wrapper.with-sidebar[data-sidebar-type~="full-height"] > .navbar:not(.navbar-fixed-bottom) { left: 26rem; width: calc(100% - 26rem); } .page-wrapper.with-sidebar[data-sidebar-type~="full-height"] > .navbar.navbar-fixed-bottom { left: 26rem; width: calc(100% - 26rem); } @media (max-width: 768px) { .page-wrapper.with-sidebar[data-sidebar-type~="full-height"] > .navbar:not(.navbar-fixed-bottom), .page-wrapper.with-sidebar[data-sidebar-type~="full-height"] > .navbar.navbar-fixed-bottom { width: 100%; } } .page-wrapper.with-sidebar[data-sidebar-type~="full-height"][data-sidebar-hidden] > .navbar:not(.navbar-fixed-bottom), .page-wrapper.with-sidebar[data-sidebar-type~="full-height"][data-sidebar-hidden] > .navbar.navbar-fixed-bottom { left: 0; width: 100%; } /* Overlayed sidebar */ .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-all"] > .navbar:not(.navbar-fixed-bottom), .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-all"] > .content-wrapper, .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-all"] > .navbar.navbar-fixed-bottom { left: 0; width: 100%; } .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-all"] > .sidebar { height: 100%; top: 0; z-index: 50; } .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-all"] > .sidebar-overlay { position: absolute; height: 100%; width: 100%; z-index: 45; background-color: rgba(0, 0, 0, 0.75); } .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-all"][data-sidebar-hidden] > .sidebar-overlay { display: none; } @media (max-width: 768px) { .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-sm-and-down"] > .navbar:not(.navbar-fixed-bottom), .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-sm-and-down"] > .content-wrapper, .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-sm-and-down"] > .navbar.navbar-fixed-bottom { left: 0; width: 100%; } .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-sm-and-down"] > .sidebar { height: 100%; top: 0; z-index: 50; } .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-sm-and-down"] > .sidebar-overlay { position: absolute; height: 100%; width: 100%; z-index: 45; background-color: rgba(0, 0, 0, 0.75); } .page-wrapper.with-sidebar[data-sidebar-type~="overlayed-sm-and-down"][data-sidebar-hidden] > .sidebar-overlay { display: none; } } /* With transitions (for sidebar toggles) */ .page-wrapper.with-transitions.with-sidebar > .sidebar { -webkit-transition: left .4s cubic-bezier(.25, .8, .25, 1); transition: left .4s cubic-bezier(.25, .8, .25, 1); } .page-wrapper.with-transitions.with-sidebar .content-wrapper, .page-wrapper.with-transitions.with-sidebar[data-sidebar-type~="full-height"] > .navbar:not(.navbar-fixed-bottom), .page-wrapper.with-transitions.with-sidebar[data-sidebar-type~="full-height"] > .navbar.navbar-fixed-bottom { -webkit-transition: width .4s cubic-bezier(.25, .8, .25, 1), left .4s cubic-bezier(.25, .8, .25, 1); transition: width .4s cubic-bezier(.25, .8, .25, 1), left .4s cubic-bezier(.25, .8, .25, 1); } /* Janky scroll fix (for Safari) */ .content-wrapper, .sidebar { -webkit-overflow-scrolling: touch; } /* ------------------------------------------------------------------------------- 5. Page building (containers, columns, content and card) [hm-05] ------------------------------------------------------------------------------- */ /* Containers */ .container, .container-sm, .container-md, .container-lg, .container-xl, .container-fluid { margin-left: auto; margin-right: auto; } .container-fluid { width: 100%; } .container { width: 100%; } .container-sm { width: 100%; } .container-md { width: 100%; } .container-lg { width: 100%; } .container-xl { width: 100%; } @media (min-width: 577px) { .container { max-width: 54rem; } .container-sm { max-width: 54rem; } } @media (min-width: 769px) { .container { max-width: 72rem; } .container-sm { max-width: 72rem; } .container-md { max-width: 72rem; } } @media (min-width: 993px) { .container { max-width: 96rem; } .container-sm { max-width: 96rem; } .container-md { max-width: 96rem; } .container-lg { max-width: 96rem; } } @media (min-width: 1201px) { .container { max-width: 114rem; } .container-sm { max-width: 114rem; } .container-md { max-width: 114rem; } .container-lg { max-width: 114rem; } .container-xl { max-width: 114rem; } } /* Columns */ .row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto { position: relative; width: 100%; } .col { -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-auto { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; } .col-1 { -webkit-box-flex: 0; -webkit-flex: 0 0 8.3333333333%; -ms-flex: 0 0 8.3333333333%; flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .col-2 { -webkit-box-flex: 0; -webkit-flex: 0 0 16.6666666667%; -ms-flex: 0 0 16.6666666667%; flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-3 { -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-4 { -webkit-box-flex: 0; -webkit-flex: 0 0 33.3333333333%; -ms-flex: 0 0 33.3333333333%; flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .col-5 { -webkit-box-flex: 0; -webkit-flex: 0 0 41.6666666667%; -ms-flex: 0 0 41.6666666667%; flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .col-6 { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-7 { -webkit-box-flex: 0; -webkit-flex: 0 0 58.3333333333%; -ms-flex: 0 0 58.3333333333%; flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .col-8 { -webkit-box-flex: 0; -webkit-flex: 0 0 66.6666666667%; -ms-flex: 0 0 66.6666666667%; flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .col-9 { -webkit-box-flex: 0; -webkit-flex: 0 0 75%; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-10 { -webkit-box-flex: 0; -webkit-flex: 0 0 83.3333333333%; -ms-flex: 0 0 83.3333333333%; flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .col-11 { -webkit-box-flex: 0; -webkit-flex: 0 0 91.6666666667%; -ms-flex: 0 0 91.6666666667%; flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .col-12 { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .order-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -ms-flex-order: -1; order: -1; } .order-last { -webkit-box-ordinal-group: 14; -webkit-order: 13; -ms-flex-order: 13; order: 13; } .order-0 { -webkit-box-ordinal-group: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0; } .order-1 { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; } .order-2 { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; } .order-3 { -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; } .order-4 { -webkit-box-ordinal-group: 5; -webkit-order: 4; -ms-flex-order: 4; order: 4; } .order-5 { -webkit-box-ordinal-group: 6; -webkit-order: 5; -ms-flex-order: 5; order: 5; } .order-6 { -webkit-box-ordinal-group: 7; -webkit-order: 6; -ms-flex-order: 6; order: 6; } .order-7 { -webkit-box-ordinal-group: 8; -webkit-order: 7; -ms-flex-order: 7; order: 7; } .order-8 { -webkit-box-ordinal-group: 9; -webkit-order: 8; -ms-flex-order: 8; order: 8; } .order-9 { -webkit-box-ordinal-group: 10; -webkit-order: 9; -ms-flex-order: 9; order: 9; } .order-10 { -webkit-box-ordinal-group: 11; -webkit-order: 10; -ms-flex-order: 10; order: 10; } .order-11 { -webkit-box-ordinal-group: 12; -webkit-order: 11; -ms-flex-order: 11; order: 11; } .order-12 { -webkit-box-ordinal-group: 13; -webkit-order: 12; -ms-flex-order: 12; order: 12; } .offset-1 { margin-left: 8.3333333333%; } .offset-2 { margin-left: 16.6666666667%; } .offset-3 { margin-left: 25%; } .offset-4 { margin-left: 33.3333333333%; } .offset-5 { margin-left: 41.6666666667%; } .offset-6 { margin-left: 50%; } .offset-7 { margin-left: 58.3333333333%; } .offset-8 { margin-left: 66.6666666667%; } .offset-9 { margin-left: 75%; } .offset-10 { margin-left: 83.3333333333%; } .offset-11 { margin-left: 91.6666666667%; } @media (min-width: 577px) { .col-sm { -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-sm-auto { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; } .col-sm-1 { -webkit-box-flex: 0; -webkit-flex: 0 0 8.3333333333%; -ms-flex: 0 0 8.3333333333%; flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .col-sm-2 { -webkit-box-flex: 0; -webkit-flex: 0 0 16.6666666667%; -ms-flex: 0 0 16.6666666667%; flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-sm-3 { -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-sm-4 { -webkit-box-flex: 0; -webkit-flex: 0 0 33.3333333333%; -ms-flex: 0 0 33.3333333333%; flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .col-sm-5 { -webkit-box-flex: 0; -webkit-flex: 0 0 41.6666666667%; -ms-flex: 0 0 41.6666666667%; flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .col-sm-6 { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-sm-7 { -webkit-box-flex: 0; -webkit-flex: 0 0 58.3333333333%; -ms-flex: 0 0 58.3333333333%; flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .col-sm-8 { -webkit-box-flex: 0; -webkit-flex: 0 0 66.6666666667%; -ms-flex: 0 0 66.6666666667%; flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .col-sm-9 { -webkit-box-flex: 0; -webkit-flex: 0 0 75%; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-sm-10 { -webkit-box-flex: 0; -webkit-flex: 0 0 83.3333333333%; -ms-flex: 0 0 83.3333333333%; flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .col-sm-11 { -webkit-box-flex: 0; -webkit-flex: 0 0 91.6666666667%; -ms-flex: 0 0 91.6666666667%; flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .col-sm-12 { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .order-sm-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -ms-flex-order: -1; order: -1; } .order-sm-last { -webkit-box-ordinal-group: 14; -webkit-order: 13; -ms-flex-order: 13; order: 13; } .order-sm-0 { -webkit-box-ordinal-group: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0; } .order-sm-1 { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; } .order-sm-2 { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; } .order-sm-3 { -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; } .order-sm-4 { -webkit-box-ordinal-group: 5; -webkit-order: 4; -ms-flex-order: 4; order: 4; } .order-sm-5 { -webkit-box-ordinal-group: 6; -webkit-order: 5; -ms-flex-order: 5; order: 5; } .order-sm-6 { -webkit-box-ordinal-group: 7; -webkit-order: 6; -ms-flex-order: 6; order: 6; } .order-sm-7 { -webkit-box-ordinal-group: 8; -webkit-order: 7; -ms-flex-order: 7; order: 7; } .order-sm-8 { -webkit-box-ordinal-group: 9; -webkit-order: 8; -ms-flex-order: 8; order: 8; } .order-sm-9 { -webkit-box-ordinal-group: 10; -webkit-order: 9; -ms-flex-order: 9; order: 9; } .order-sm-10 { -webkit-box-ordinal-group: 11; -webkit-order: 10; -ms-flex-order: 10; order: 10; } .order-sm-11 { -webkit-box-ordinal-group: 12; -webkit-order: 11; -ms-flex-order: 11; order: 11; } .order-sm-12 { -webkit-box-ordinal-group: 13; -webkit-order: 12; -ms-flex-order: 12; order: 12; } .offset-sm-0 { margin-left: 0; } .offset-sm-1 { margin-left: 8.3333333333%; } .offset-sm-2 { margin-left: 16.6666666667%; } .offset-sm-3 { margin-left: 25%; } .offset-sm-4 { margin-left: 33.3333333333%; } .offset-sm-5 { margin-left: 41.6666666667%; } .offset-sm-6 { margin-left: 50%; } .offset-sm-7 { margin-left: 58.3333333333%; } .offset-sm-8 { margin-left: 66.6666666667%; } .offset-sm-9 { margin-left: 75%; } .offset-sm-10 { margin-left: 83.3333333333%; } .offset-sm-11 { margin-left: 91.6666666667%; } } @media (min-width: 769px) { .col-md { -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-md-auto { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; } .col-md-1 { -webkit-box-flex: 0; -webkit-flex: 0 0 8.3333333333%; -ms-flex: 0 0 8.3333333333%; flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .col-md-2 { -webkit-box-flex: 0; -webkit-flex: 0 0 16.6666666667%; -ms-flex: 0 0 16.6666666667%; flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-md-3 { -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-md-4 { -webkit-box-flex: 0; -webkit-flex: 0 0 33.3333333333%; -ms-flex: 0 0 33.3333333333%; flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .col-md-5 { -webkit-box-flex: 0; -webkit-flex: 0 0 41.6666666667%; -ms-flex: 0 0 41.6666666667%; flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .col-md-6 { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-md-7 { -webkit-box-flex: 0; -webkit-flex: 0 0 58.3333333333%; -ms-flex: 0 0 58.3333333333%; flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .col-md-8 { -webkit-box-flex: 0; -webkit-flex: 0 0 66.6666666667%; -ms-flex: 0 0 66.6666666667%; flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .col-md-9 { -webkit-box-flex: 0; -webkit-flex: 0 0 75%; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-md-10 { -webkit-box-flex: 0; -webkit-flex: 0 0 83.3333333333%; -ms-flex: 0 0 83.3333333333%; flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .col-md-11 { -webkit-box-flex: 0; -webkit-flex: 0 0 91.6666666667%; -ms-flex: 0 0 91.6666666667%; flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .col-md-12 { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .order-md-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -ms-flex-order: -1; order: -1; } .order-md-last { -webkit-box-ordinal-group: 14; -webkit-order: 13; -ms-flex-order: 13; order: 13; } .order-md-0 { -webkit-box-ordinal-group: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0; } .order-md-1 { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; } .order-md-2 { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; } .order-md-3 { -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; } .order-md-4 { -webkit-box-ordinal-group: 5; -webkit-order: 4; -ms-flex-order: 4; order: 4; } .order-md-5 { -webkit-box-ordinal-group: 6; -webkit-order: 5; -ms-flex-order: 5; order: 5; } .order-md-6 { -webkit-box-ordinal-group: 7; -webkit-order: 6; -ms-flex-order: 6; order: 6; } .order-md-7 { -webkit-box-ordinal-group: 8; -webkit-order: 7; -ms-flex-order: 7; order: 7; } .order-md-8 { -webkit-box-ordinal-group: 9; -webkit-order: 8; -ms-flex-order: 8; order: 8; } .order-md-9 { -webkit-box-ordinal-group: 10; -webkit-order: 9; -ms-flex-order: 9; order: 9; } .order-md-10 { -webkit-box-ordinal-group: 11; -webkit-order: 10; -ms-flex-order: 10; order: 10; } .order-md-11 { -webkit-box-ordinal-group: 12; -webkit-order: 11; -ms-flex-order: 11; order: 11; } .order-md-12 { -webkit-box-ordinal-group: 13; -webkit-order: 12; -ms-flex-order: 12; order: 12; } .offset-md-0 { margin-left: 0; } .offset-md-1 { margin-left: 8.3333333333%; } .offset-md-2 { margin-left: 16.6666666667%; } .offset-md-3 { margin-left: 25%; } .offset-md-4 { margin-left: 33.3333333333%; } .offset-md-5 { margin-left: 41.6666666667%; } .offset-md-6 { margin-left: 50%; } .offset-md-7 { margin-left: 58.3333333333%; } .offset-md-8 { margin-left: 66.6666666667%; } .offset-md-9 { margin-left: 75%; } .offset-md-10 { margin-left: 83.3333333333%; } .offset-md-11 { margin-left: 91.6666666667%; } } @media (min-width: 993px) { .col-lg { -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-lg-auto { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; } .col-lg-1 { -webkit-box-flex: 0; -webkit-flex: 0 0 8.3333333333%; -ms-flex: 0 0 8.3333333333%; flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .col-lg-2 { -webkit-box-flex: 0; -webkit-flex: 0 0 16.6666666667%; -ms-flex: 0 0 16.6666666667%; flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-lg-3 { -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-lg-4 { -webkit-box-flex: 0; -webkit-flex: 0 0 33.3333333333%; -ms-flex: 0 0 33.3333333333%; flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .col-lg-5 { -webkit-box-flex: 0; -webkit-flex: 0 0 41.6666666667%; -ms-flex: 0 0 41.6666666667%; flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .col-lg-6 { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-lg-7 { -webkit-box-flex: 0; -webkit-flex: 0 0 58.3333333333%; -ms-flex: 0 0 58.3333333333%; flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .col-lg-8 { -webkit-box-flex: 0; -webkit-flex: 0 0 66.6666666667%; -ms-flex: 0 0 66.6666666667%; flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .col-lg-9 { -webkit-box-flex: 0; -webkit-flex: 0 0 75%; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-lg-10 { -webkit-box-flex: 0; -webkit-flex: 0 0 83.3333333333%; -ms-flex: 0 0 83.3333333333%; flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .col-lg-11 { -webkit-box-flex: 0; -webkit-flex: 0 0 91.6666666667%; -ms-flex: 0 0 91.6666666667%; flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .col-lg-12 { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .order-lg-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -ms-flex-order: -1; order: -1; } .order-lg-last { -webkit-box-ordinal-group: 14; -webkit-order: 13; -ms-flex-order: 13; order: 13; } .order-lg-0 { -webkit-box-ordinal-group: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0; } .order-lg-1 { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; } .order-lg-2 { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; } .order-lg-3 { -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; } .order-lg-4 { -webkit-box-ordinal-group: 5; -webkit-order: 4; -ms-flex-order: 4; order: 4; } .order-lg-5 { -webkit-box-ordinal-group: 6; -webkit-order: 5; -ms-flex-order: 5; order: 5; } .order-lg-6 { -webkit-box-ordinal-group: 7; -webkit-order: 6; -ms-flex-order: 6; order: 6; } .order-lg-7 { -webkit-box-ordinal-group: 8; -webkit-order: 7; -ms-flex-order: 7; order: 7; } .order-lg-8 { -webkit-box-ordinal-group: 9; -webkit-order: 8; -ms-flex-order: 8; order: 8; } .order-lg-9 { -webkit-box-ordinal-group: 10; -webkit-order: 9; -ms-flex-order: 9; order: 9; } .order-lg-10 { -webkit-box-ordinal-group: 11; -webkit-order: 10; -ms-flex-order: 10; order: 10; } .order-lg-11 { -webkit-box-ordinal-group: 12; -webkit-order: 11; -ms-flex-order: 11; order: 11; } .order-lg-12 { -webkit-box-ordinal-group: 13; -webkit-order: 12; -ms-flex-order: 12; order: 12; } .offset-lg-0 { margin-left: 0; } .offset-lg-1 { margin-left: 8.3333333333%; } .offset-lg-2 { margin-left: 16.6666666667%; } .offset-lg-3 { margin-left: 25%; } .offset-lg-4 { margin-left: 33.3333333333%; } .offset-lg-5 { margin-left: 41.6666666667%; } .offset-lg-6 { margin-left: 50%; } .offset-lg-7 { margin-left: 58.3333333333%; } .offset-lg-8 { margin-left: 66.6666666667%; } .offset-lg-9 { margin-left: 75%; } .offset-lg-10 { margin-left: 83.3333333333%; } .offset-lg-11 { margin-left: 91.6666666667%; } } @media (min-width: 1201px) { .col-xl { -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-xl-auto { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; } .col-xl-1 { -webkit-box-flex: 0; -webkit-flex: 0 0 8.3333333333%; -ms-flex: 0 0 8.3333333333%; flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .col-xl-2 { -webkit-box-flex: 0; -webkit-flex: 0 0 16.6666666667%; -ms-flex: 0 0 16.6666666667%; flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-xl-3 { -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-xl-4 { -webkit-box-flex: 0; -webkit-flex: 0 0 33.3333333333%; -ms-flex: 0 0 33.3333333333%; flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .col-xl-5 { -webkit-box-flex: 0; -webkit-flex: 0 0 41.6666666667%; -ms-flex: 0 0 41.6666666667%; flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .col-xl-6 { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-xl-7 { -webkit-box-flex: 0; -webkit-flex: 0 0 58.3333333333%; -ms-flex: 0 0 58.3333333333%; flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .col-xl-8 { -webkit-box-flex: 0; -webkit-flex: 0 0 66.6666666667%; -ms-flex: 0 0 66.6666666667%; flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .col-xl-9 { -webkit-box-flex: 0; -webkit-flex: 0 0 75%; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-xl-10 { -webkit-box-flex: 0; -webkit-flex: 0 0 83.3333333333%; -ms-flex: 0 0 83.3333333333%; flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .col-xl-11 { -webkit-box-flex: 0; -webkit-flex: 0 0 91.6666666667%; -ms-flex: 0 0 91.6666666667%; flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .col-xl-12 { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .order-xl-first { -webkit-box-ordinal-group: 0; -webkit-order: -1; -ms-flex-order: -1; order: -1; } .order-xl-last { -webkit-box-ordinal-group: 14; -webkit-order: 13; -ms-flex-order: 13; order: 13; } .order-xl-0 { -webkit-box-ordinal-group: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0; } .order-xl-1 { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; } .order-xl-2 { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; } .order-xl-3 { -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; } .order-xl-4 { -webkit-box-ordinal-group: 5; -webkit-order: 4; -ms-flex-order: 4; order: 4; } .order-xl-5 { -webkit-box-ordinal-group: 6; -webkit-order: 5; -ms-flex-order: 5; order: 5; } .order-xl-6 { -webkit-box-ordinal-group: 7; -webkit-order: 6; -ms-flex-order: 6; order: 6; } .order-xl-7 { -webkit-box-ordinal-group: 8; -webkit-order: 7; -ms-flex-order: 7; order: 7; } .order-xl-8 { -webkit-box-ordinal-group: 9; -webkit-order: 8; -ms-flex-order: 8; order: 8; } .order-xl-9 { -webkit-box-ordinal-group: 10; -webkit-order: 9; -ms-flex-order: 9; order: 9; } .order-xl-10 { -webkit-box-ordinal-group: 11; -webkit-order: 10; -ms-flex-order: 10; order: 10; } .order-xl-11 { -webkit-box-ordinal-group: 12; -webkit-order: 11; -ms-flex-order: 11; order: 11; } .order-xl-12 { -webkit-box-ordinal-group: 13; -webkit-order: 12; -ms-flex-order: 12; order: 12; } .offset-xl-0 { margin-left: 0; } .offset-xl-1 { margin-left: 8.3333333333%; } .offset-xl-2 { margin-left: 16.6666666667%; } .offset-xl-3 { margin-left: 25%; } .offset-xl-4 { margin-left: 33.3333333333%; } .offset-xl-5 { margin-left: 41.6666666667%; } .offset-xl-6 { margin-left: 50%; } .offset-xl-7 { margin-left: 58.3333333333%; } .offset-xl-8 { margin-left: 66.6666666667%; } .offset-xl-9 { margin-left: 75%; } .offset-xl-10 { margin-left: 83.3333333333%; } .offset-xl-11 { margin-left: 91.6666666667%; } } /* Rows with equal spacing */ .row.row-eq-spacing { margin-top: 3rem; margin-bottom: 3rem; padding-left: calc(3rem/2); padding-right: calc(3rem/2); } .row.row-eq-spacing>[class^="col"] { padding-left: calc(3rem/2); padding-right: calc(3rem/2); } .row.row-eq-spacing>[class^="col"]>.content, .row.row-eq-spacing>[class^="col"]>.card { margin-left: 0; margin-right: 0; } .row.row-eq-spacing>[class^="col"]>.content:first-child, .row.row-eq-spacing>[class^="col"]>.card:first-child { margin-top: 0; } .row.row-eq-spacing>[class^="col"]>.content:last-child, .row.row-eq-spacing>[class^="col"]>.card:last-child { margin-bottom: 0; } @media (max-width: 576px) { .row.row-eq-spacing { margin-top: 2rem; margin-bottom: 2rem; padding-left: calc(2rem/2); padding-right: calc(2rem/2); } .row.row-eq-spacing>[class^="col"] { padding-left: calc(2rem/2); padding-right: calc(2rem/2); } } /* Adjustments for small screens and up (> 576px) */ @media (min-width: 577px) { .row.row-eq-spacing-sm:not(.row-eq-spacing) { margin-top: 3rem; margin-bottom: 3rem; padding-left: calc(3rem/2); padding-right: calc(3rem/2); } .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"] { padding-left: calc(3rem/2); padding-right: calc(3rem/2); } .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.content, .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.card { margin-left: 0; margin-right: 0; } .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.content:first-child, .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.card:first-child { margin-top: 0; } .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.content:last-child, .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.card:last-child { margin-bottom: 0; } } @media (max-width: 576px) { .row.row-eq-spacing-sm:not(.row-eq-spacing) { margin-top: 2rem; margin-bottom: 2rem; } .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"] { /* No margin collapse (due to flexbox), so half is used */ margin-top: calc(2rem/2); margin-bottom: calc(2rem/2); } .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]:first-child { margin-top: 0; } .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]:last-child { margin-bottom: 0; } .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.content, .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.card { margin-top: 0; margin-bottom: 0; } .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child) { /* Margin collapse, so full is used (not half) */ margin-top: 2rem; margin-bottom: 2rem; } .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child) { /* Margin collapse, so full is used (not half) */ margin-top: 2rem; margin-bottom: 2rem; } .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):first-child, .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):first-child { margin-top: 0; } .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):last-child, .row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):last-child { margin-bottom: 0; } } /* Adjustments for medium screens and up (> 768px) */ @media (min-width: 769px) { .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing) { margin-top: 3rem; margin-bottom: 3rem; padding-left: calc(3rem/2); padding-right: calc(3rem/2); } .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] { padding-left: calc(3rem/2); padding-right: calc(3rem/2); } .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content, .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card { margin-left: 0; margin-right: 0; } .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:first-child, .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:first-child { margin-top: 0; } .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:last-child, .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:last-child { margin-bottom: 0; } } @media (max-width: 768px) { .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing) { margin-top: 3rem; margin-bottom: 3rem; } .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] { /* No margin collapse (due to flexbox), so half is used */ margin-top: calc(3rem/2); margin-bottom: calc(3rem/2); } .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:first-child { margin-top: 0; } .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:last-child { margin-bottom: 0; } .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content, .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card { margin-top: 0; margin-bottom: 0; } .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child) { /* Margin collapse, so full is used (not half) */ margin-top: 3rem; margin-bottom: 3rem; } .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child) { /* Margin collapse, so full is used (not half) */ margin-top: 3rem; margin-bottom: 3rem; } .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):first-child, .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):first-child { margin-top: 0; } .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):last-child, .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):last-child { margin-bottom: 0; } } @media (max-width: 576px) { .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing) { margin-top: 2rem; margin-bottom: 2rem; } .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] { /* No margin collapse (due to flexbox), so half is used */ margin-top: calc(2rem/2); margin-bottom: calc(2rem/2); } .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child) { /* Margin collapse, so full is used (not half) */ margin-top: 2rem; margin-bottom: 2rem; } .row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child) { /* Margin collapse, so full is used (not half) */ margin-top: 2rem; margin-bottom: 2rem; } } /* Adjustments for large screens and up (> 992px) */ @media (min-width: 993px) { .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing) { margin-top: 3rem; margin-bottom: 3rem; padding-left: calc(3rem/2); padding-right: calc(3rem/2); } .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] { padding-left: calc(3rem/2); padding-right: calc(3rem/2); } .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content, .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card { margin-left: 0; margin-right: 0; } .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:first-child, .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:first-child { margin-top: 0; } .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:last-child, .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:last-child { margin-bottom: 0; } } @media (max-width: 992px) { .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing) { margin-top: 3rem; margin-bottom: 3rem; } .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] { /* No margin collapse (due to flexbox), so half is used */ margin-top: calc(3rem/2); margin-bottom: calc(3rem/2); } .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:first-child { margin-top: 0; } .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:last-child { margin-bottom: 0; } .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content, .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card { margin-top: 0; margin-bottom: 0; } .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child) { /* Margin collapse, so full is used (not half) */ margin-top: 3rem; margin-bottom: 3rem; } .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child) { /* Margin collapse, so full is used (not half) */ margin-top: 3rem; margin-bottom: 3rem; } .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):first-child, .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):first-child { margin-top: 0; } .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):last-child, .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):last-child { margin-bottom: 0; } } @media (max-width: 576px) { .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing) { margin-top: 2rem; margin-bottom: 2rem; } .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] { /* No margin collapse (due to flexbox), so half is used */ margin-top: calc(2rem/2); margin-bottom: calc(2rem/2); } .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child) { /* Margin collapse, so full is used (not half) */ margin-top: 2rem; margin-bottom: 2rem; } .row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child) { /* Margin collapse, so full is used (not half) */ margin-top: 2rem; margin-bottom: 2rem; } } /* Adjustments for extra large screens and up (> 1200px) */ @media (min-width: 1201px) { .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing) { margin-top: 3rem; margin-bottom: 3rem; padding-left: calc(3rem/2); padding-right: calc(3rem/2); } .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] { padding-left: calc(3rem/2); padding-right: calc(3rem/2); } .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content, .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card { margin-left: 0; margin-right: 0; } .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:first-child, .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:first-child { margin-top: 0; } .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:last-child, .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:last-child { margin-bottom: 0; } } @media (max-width: 1200px) { .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing) { margin-top: 3rem; margin-bottom: 3rem; } .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] { /* No margin collapse (due to flexbox), so half is used */ margin-top: calc(3rem/2); margin-bottom: calc(3rem/2); } .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:first-child { margin-top: 0; } .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:last-child { margin-bottom: 0; } .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content, .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card { margin-top: 0; margin-bottom: 0; } .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child) { /* Margin collapse, so full is used (not half) */ margin-top: 3rem; margin-bottom: 3rem; } .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child) { /* Margin collapse, so full is used (not half) */ margin-top: 3rem; margin-bottom: 3rem; } .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):first-child, .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):first-child { margin-top: 0; } .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child):last-child, .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child):last-child { margin-bottom: 0; } } @media (max-width: 576px) { .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing) { margin-top: 2rem; margin-bottom: 2rem; } .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] { /* No margin collapse (due to flexbox), so half is used */ margin-top: calc(2rem/2); margin-bottom: calc(2rem/2); } .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.content:not(:only-child) { /* Margin collapse, so full is used (not half) */ margin-top: 2rem; margin-bottom: 2rem; } .row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]>.card:not(:only-child) { /* Margin collapse, so full is used (not half) */ margin-top: 2rem; margin-bottom: 2rem; } } /* Content and card */ .content { margin: 3rem; } @media (max-width: 576px) { .content { margin: 2rem; } } .content-title { font-size: 2rem; font-weight: 500; margin-top: 0; } .card { position: relative; margin: 3rem; padding: 3rem; color: rgba(0, 0, 0, 0.85); background-color: #ffffff; background-image: none; border-radius: 0.4rem; border: 1px solid rgba(0, 0, 0, 0.2); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .dark-mode .card { color: rgba(255, 255, 255, 0.8); background-color: #191c20; background-image: none; border-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } @media (max-width: 576px) { .card { margin: 2rem; padding: 2rem; } } .card-title { font-size: 2rem; font-weight: 500; margin-top: 0; } /* Card padding */ .p-card { padding: 3rem; } .px-card { padding-left: 3rem; padding-right: 3rem; } .py-card { padding-top: 3rem; padding-bottom: 3rem; } @media (max-width: 576px) { .p-card { padding: 2rem; } .px-card { padding-left: 2rem; padding-right: 2rem; } .py-card { padding-top: 2rem; padding-bottom: 2rem; } } /* Vertical spacer */ .v-spacer { height: 3rem; position: relative; width: 100%; } @media (max-width: 576px) { .v-spacer { height: 2rem; } } /* ------------------------------------------------------------------------------- 6. Links [hm-06] ------------------------------------------------------------------------------- */ a { color: #1890ff; text-decoration: none; } a:hover { color: #45a3fb; text-decoration: underline; } .dark-mode a { color: #1890ff; } .dark-mode a:hover { color: #45a3fb; } /* Hyperlink (anti-aliasing removed in dark mode) */ .dark-mode .hyperlink { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } /* Underlined hyperlink */ .hyperlink-underline { text-decoration: underline; } .dark-mode .hyperlink-underline { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } /* ------------------------------------------------------------------------------- 7. Buttons [hm-07] Notes: ~ When a focused button is hovered over, only the text color and the background color is overridden. This is because most button focus effects tend to be based on border, box shadow, and outline. On the other hand, when a focused input is hovered over, nothing is overridden, and all the focus styles are kept unchanged. ------------------------------------------------------------------------------- */ /* Default button */ .btn { display: inline-block; height: 3.2rem; line-height: 3.2rem; padding: 0 1.5rem; text-align: center; white-space: nowrap; cursor: pointer; color: rgba(0, 0, 0, 0.7); background-color: #ffffff; background-image: none; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.4rem; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); } .btn:hover { text-decoration: none; color: rgba(0, 0, 0, 0.7); background-color: #f7f7f7; background-image: none; border-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); } .btn:focus { color: rgba(0, 0, 0, 0.7); background-color: #ffffff; background-image: none; border-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6); -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6); box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6); outline: 1px dotted transparent; outline-offset: 0.2rem; } .btn.active { color: rgba(0, 0, 0, 0.7); background-color: #ffffff; background-image: none; border-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6); -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6); box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6); outline: 1px dotted transparent; outline-offset: 0.2rem; } .btn:focus:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: rgba(0, 0, 0, 0.7); background-color: #f7f7f7; background-image: none; } .btn.active:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: rgba(0, 0, 0, 0.7); background-color: #f7f7f7; background-image: none; } .dark-mode .btn { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.05); background-image: none; border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); } .dark-mode .btn:hover { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.1); background-image: none; border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); } .dark-mode .btn:focus { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.05); background-image: none; border-color: rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3); -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3); box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3); outline-color: transparent; } .dark-mode .btn.active { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.05); background-image: none; border-color: rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3); -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3); box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3); outline-color: transparent; } .dark-mode .btn:focus:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.1); background-image: none; } .dark-mode .btn.active:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.1); background-image: none; } .btn.disabled, .btn:disabled { cursor: not-allowed; opacity: 0.6; } .btn.disabled { color: rgba(0, 0, 0, 0.7); background-color: #ffffff; background-image: none; border-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .btn:disabled { color: rgba(0, 0, 0, 0.7); background-color: #ffffff; background-image: none; border-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .btn.disabled:hover { color: rgba(0, 0, 0, 0.7); background-color: #ffffff; background-image: none; border-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .btn.disabled:focus { color: rgba(0, 0, 0, 0.7); background-color: #ffffff; background-image: none; border-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.disabled { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.05); background-image: none; border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn:disabled { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.05); background-image: none; border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.disabled:hover { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.05); background-image: none; border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.disabled:focus { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.05); background-image: none; border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } /* Alternate dark mode default button */ .dark-mode .btn.alt-dm { color: inherit; background-color: rgba(0, 0, 0, 0.15); background-image: none; border-color: rgba(0, 0, 0, 0.05); -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025); } .dark-mode .btn.alt-dm:hover { color: inherit; background-color: rgba(0, 0, 0, 0.2); background-image: none; border-color: rgba(0, 0, 0, 0.05); -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025); } .dark-mode .btn.alt-dm:focus { color: inherit; background-color: rgba(0, 0, 0, 0.15); background-image: none; border-color: inherit; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025); outline-color: transparent; } .dark-mode .btn.alt-dm.active { color: inherit; background-color: rgba(0, 0, 0, 0.15); background-image: none; border-color: inherit; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025); outline-color: transparent; } .dark-mode .btn.alt-dm:focus:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: inherit; background-color: rgba(0, 0, 0, 0.2); background-image: none; } .dark-mode .btn.alt-dm.active:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: inherit; background-color: rgba(0, 0, 0, 0.2); background-image: none; } .dark-mode .btn.alt-dm.disabled { color: inherit; background-color: rgba(0, 0, 0, 0.15); background-image: none; border-color: rgba(0, 0, 0, 0.05); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.alt-dm:disabled { color: inherit; background-color: rgba(0, 0, 0, 0.15); background-image: none; border-color: rgba(0, 0, 0, 0.05); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.alt-dm.disabled:hover { color: inherit; background-color: rgba(0, 0, 0, 0.15); background-image: none; border-color: rgba(0, 0, 0, 0.05); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.alt-dm.disabled:focus { color: inherit; background-color: rgba(0, 0, 0, 0.15); background-image: none; border-color: rgba(0, 0, 0, 0.05); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } /* Small button */ .btn-sm { height: 2.6rem; line-height: 2.6rem; padding: 0 1rem; font-size: 1.2rem; } /* Large button */ .btn-lg { height: 4rem; line-height: 4rem; padding: 0 2rem; font-size: 1.8rem; } /* Block button */ .btn-block { display: block; width: 100%; } /* Link button */ .btn.btn-link { color: #1890ff; background-color: transparent; background-image: none; border-color: transparent; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .btn.btn-link:hover { color: #45a3fb; background-color: transparent; background-image: none; border-color: transparent; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .btn.btn-link:focus { color: #1890ff; background-color: transparent; background-image: none; border-color: transparent; -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6); -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6); box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6); outline-color: transparent; } .btn.btn-link.active { color: #1890ff; background-color: transparent; background-image: none; border-color: transparent; -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6); -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6); box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6); outline-color: transparent; } .btn.btn-link:focus:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: #45a3fb; background-color: transparent; background-image: none; } .btn.btn-link.active:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: #45a3fb; background-color: transparent; background-image: none; } .dark-mode .btn.btn-link { color: #1890ff; background-color: transparent; background-image: none; border-color: transparent; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .dark-mode .btn.btn-link:hover { color: #45a3fb; background-color: transparent; background-image: none; border-color: transparent; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .dark-mode .btn.btn-link:focus { color: #1890ff; background-color: transparent; background-image: none; border-color: transparent; -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3); -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3); box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3); outline-color: transparent; } .dark-mode .btn.btn-link.active { color: #1890ff; background-color: transparent; background-image: none; border-color: transparent; -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3); -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3); box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3); outline-color: transparent; } .dark-mode .btn.btn-link:focus:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: #45a3fb; background-color: transparent; background-image: none; } .dark-mode .btn.btn-link.active:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: #45a3fb; background-color: transparent; background-image: none; } .btn.btn-link.disabled { color: #1890ff; background-color: transparent; background-image: none; border-color: transparent; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .btn.btn-link:disabled { color: #1890ff; background-color: transparent; background-image: none; border-color: transparent; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .btn.btn-link.disabled:hover { color: #1890ff; background-color: transparent; background-image: none; border-color: transparent; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .btn.btn-link.disabled:focus { color: #1890ff; background-color: transparent; background-image: none; border-color: transparent; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.btn-link.disabled { color: #1890ff; background-color: transparent; background-image: none; border-color: transparent; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.btn-link:disabled { color: #1890ff; background-color: transparent; background-image: none; border-color: transparent; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.btn-link.disabled:hover { color: #1890ff; background-color: transparent; background-image: none; border-color: transparent; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.btn-link.disabled:focus { color: #1890ff; background-color: transparent; background-image: none; border-color: transparent; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } /* Primary button */ .btn.btn-primary { color: #ffffff; background-color: #1890ff; background-image: none; border-color: #1890ff; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); } .btn.btn-primary:hover { color: #ffffff; background-color: #45a3fb; background-image: none; border-color: #45a3fb; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); } .btn.btn-primary:focus { color: #ffffff; background-color: #1890ff; background-image: none; border-color: #1890ff; -moz-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3); -webkit-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3); box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3); outline-color: transparent; } .btn.btn-primary.active { color: #ffffff; background-color: #1890ff; background-image: none; border-color: #1890ff; -moz-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3); -webkit-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3); box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3); outline-color: transparent; } .btn.btn-primary:focus:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: #ffffff; background-color: #45a3fb; background-image: none; } .btn.btn-primary.active:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: #ffffff; background-color: #45a3fb; background-image: none; } .dark-mode .btn.btn-primary { color: #ffffff; background-color: #1890ff; background-image: none; border-color: #1890ff; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .dark-mode .btn.btn-primary:hover { color: #ffffff; background-color: #45a3fb; background-image: none; border-color: #45a3fb; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); } .dark-mode .btn.btn-primary:focus { color: #ffffff; background-color: #1890ff; background-image: none; border-color: #1890ff; -moz-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3); -webkit-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3); box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3); outline-color: transparent; } .dark-mode .btn.btn-primary.active { color: #ffffff; background-color: #1890ff; background-image: none; border-color: #1890ff; -moz-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3); -webkit-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3); box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3); outline-color: transparent; } .dark-mode .btn.btn-primary:focus:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: #ffffff; background-color: #45a3fb; background-image: none; } .dark-mode .btn.btn-primary.active:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: #ffffff; background-color: #45a3fb; background-image: none; } .btn.btn-primary.disabled { color: #ffffff; background-color: #1890ff; background-image: none; border-color: #1890ff; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .btn.btn-primary:disabled { color: #ffffff; background-color: #1890ff; background-image: none; border-color: #1890ff; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .btn.btn-primary.disabled:hover { color: #ffffff; background-color: #1890ff; background-image: none; border-color: #1890ff; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .btn.btn-primary.disabled:focus { color: #ffffff; background-color: #1890ff; background-image: none; border-color: #1890ff; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.btn-primary.disabled { color: #ffffff; background-color: #1890ff; background-image: none; border-color: #1890ff; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.btn-primary:disabled { color: #ffffff; background-color: #1890ff; background-image: none; border-color: #1890ff; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.btn-primary.disabled:hover { color: #ffffff; background-color: #1890ff; background-image: none; border-color: #1890ff; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.btn-primary.disabled:focus { color: #ffffff; background-color: #1890ff; background-image: none; border-color: #1890ff; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } /* Success button */ .btn.btn-success { color: rgba(0, 0, 0, 0.85); background-color: #0be881; background-image: none; border-color: #0be881; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); } .btn.btn-success:hover { color: rgba(0, 0, 0, 0.85); background-color: #81eea8; background-image: none; border-color: #81eea8; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); } .btn.btn-success:focus { color: rgba(0, 0, 0, 0.85); background-color: #0be881; background-image: none; border-color: #0be881; -moz-box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3); -webkit-box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3); box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3); outline-color: transparent; } .btn.btn-success.active { color: rgba(0, 0, 0, 0.85); background-color: #0be881; background-image: none; border-color: #0be881; -moz-box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3); -webkit-box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3); box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3); outline-color: transparent; } .btn.btn-success:focus:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: rgba(0, 0, 0, 0.85); background-color: #81eea8; background-image: none; } .btn.btn-success.active:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: rgba(0, 0, 0, 0.85); background-color: #81eea8; background-image: none; } .dark-mode .btn.btn-success { color: rgba(0, 0, 0, 0.85); background-color: #0be881; background-image: none; border-color: #0be881; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .dark-mode .btn.btn-success:hover { color: rgba(0, 0, 0, 0.85); background-color: #81eea8; background-image: none; border-color: #81eea8; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); } .dark-mode .btn.btn-success:focus { color: rgba(0, 0, 0, 0.85); background-color: #0be881; background-image: none; border-color: #0be881; -moz-box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3); -webkit-box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3); box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3); outline-color: transparent; } .dark-mode .btn.btn-success.active { color: rgba(0, 0, 0, 0.85); background-color: #0be881; background-image: none; border-color: #0be881; -moz-box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3); -webkit-box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3); box-shadow: 0 0 0 0.3rem rgba(11, 232, 129, 0.3); outline-color: transparent; } .dark-mode .btn.btn-success:focus:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: rgba(0, 0, 0, 0.85); background-color: #81eea8; background-image: none; } .dark-mode .btn.btn-success.active:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: rgba(0, 0, 0, 0.85); background-color: #81eea8; background-image: none; } .btn.btn-success.disabled { color: rgba(0, 0, 0, 0.85); background-color: #0be881; background-image: none; border-color: #0be881; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .btn.btn-success:disabled { color: rgba(0, 0, 0, 0.85); background-color: #0be881; background-image: none; border-color: #0be881; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .btn.btn-success.disabled:hover { color: rgba(0, 0, 0, 0.85); background-color: #0be881; background-image: none; border-color: #0be881; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .btn.btn-success.disabled:focus { color: rgba(0, 0, 0, 0.85); background-color: #0be881; background-image: none; border-color: #0be881; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.btn-success.disabled { color: rgba(0, 0, 0, 0.85); background-color: #0be881; background-image: none; border-color: #0be881; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.btn-success:disabled { color: rgba(0, 0, 0, 0.85); background-color: #0be881; background-image: none; border-color: #0be881; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.btn-success.disabled:hover { color: rgba(0, 0, 0, 0.85); background-color: #0be881; background-image: none; border-color: #0be881; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.btn-success.disabled:focus { color: rgba(0, 0, 0, 0.85); background-color: #0be881; background-image: none; border-color: #0be881; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } /* Secondary button */ .btn.btn-secondary { color: rgba(0, 0, 0, 0.85); background-color: #ffcf00; background-image: none; border-color: #ffcf00; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); } .btn.btn-secondary:hover { color: rgba(0, 0, 0, 0.85); background-color: #ffe04d; background-image: none; border-color: #ffe04d; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); } .btn.btn-secondary:focus { color: rgba(0, 0, 0, 0.85); background-color: #ffcf00; background-image: none; border-color: #ffcf00; -moz-box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3); -webkit-box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3); box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3); outline-color: transparent; } .btn.btn-secondary.active { color: rgba(0, 0, 0, 0.85); background-color: #ffcf00; background-image: none; border-color: #ffcf00; -moz-box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3); -webkit-box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3); box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3); outline-color: transparent; } .btn.btn-secondary:focus:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: rgba(0, 0, 0, 0.85); background-color: #ffe04d; background-image: none; } .btn.btn-secondary.active:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: rgba(0, 0, 0, 0.85); background-color: #ffe04d; background-image: none; } .dark-mode .btn.btn-secondary { color: rgba(0, 0, 0, 0.85); background-color: #ffcf00; background-image: none; border-color: #ffcf00; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .dark-mode .btn.btn-secondary:hover { color: rgba(0, 0, 0, 0.85); background-color: #ffe04d; background-image: none; border-color: #ffe04d; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); } .dark-mode .btn.btn-secondary:focus { color: rgba(0, 0, 0, 0.85); background-color: #ffcf00; background-image: none; border-color: #ffcf00; -moz-box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3); -webkit-box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3); box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3); outline-color: transparent; } .dark-mode .btn.btn-secondary.active { color: rgba(0, 0, 0, 0.85); background-color: #ffcf00; background-image: none; border-color: #ffcf00; -moz-box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3); -webkit-box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3); box-shadow: 0 0 0 0.3rem rgba(255, 207, 0, 0.3); outline-color: transparent; } .dark-mode .btn.btn-secondary:focus:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: rgba(0, 0, 0, 0.85); background-color: #ffe04d; background-image: none; } .dark-mode .btn.btn-secondary.active:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: rgba(0, 0, 0, 0.85); background-color: #ffe04d; background-image: none; } .btn.btn-secondary.disabled { color: rgba(0, 0, 0, 0.85); background-color: #ffcf00; background-image: none; border-color: #ffcf00; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .btn.btn-secondary:disabled { color: rgba(0, 0, 0, 0.85); background-color: #ffcf00; background-image: none; border-color: #ffcf00; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .btn.btn-secondary.disabled:hover { color: rgba(0, 0, 0, 0.85); background-color: #ffcf00; background-image: none; border-color: #ffcf00; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .btn.btn-secondary.disabled:focus { color: rgba(0, 0, 0, 0.85); background-color: #ffcf00; background-image: none; border-color: #ffcf00; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.btn-secondary.disabled { color: rgba(0, 0, 0, 0.85); background-color: #ffcf00; background-image: none; border-color: #ffcf00; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.btn-secondary:disabled { color: rgba(0, 0, 0, 0.85); background-color: #ffcf00; background-image: none; border-color: #ffcf00; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.btn-secondary.disabled:hover { color: rgba(0, 0, 0, 0.85); background-color: #ffcf00; background-image: none; border-color: #ffcf00; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.btn-secondary.disabled:focus { color: rgba(0, 0, 0, 0.85); background-color: #ffcf00; background-image: none; border-color: #ffcf00; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } /* Danger button */ .btn.btn-danger { color: #ffffff; background-color: #ff4d4f; background-image: none; border-color: #ff4d4f; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); } .btn.btn-danger:hover { color: #ffffff; background-color: #ed586c; background-image: none; border-color: #ed586c; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); } .btn.btn-danger:focus { color: #ffffff; background-color: #ff4d4f; background-image: none; border-color: #ff4d4f; -moz-box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3); -webkit-box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3); box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3); outline-color: transparent; } .btn.btn-danger.active { color: #ffffff; background-color: #ff4d4f; background-image: none; border-color: #ff4d4f; -moz-box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3); -webkit-box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3); box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3); outline-color: transparent; } .btn.btn-danger:focus:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: #ffffff; background-color: #ed586c; background-image: none; } .btn.btn-danger.active:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: #ffffff; background-color: #ed586c; background-image: none; } .dark-mode .btn.btn-danger { color: #ffffff; background-color: #ff4d4f; background-image: none; border-color: #ff4d4f; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .dark-mode .btn.btn-danger:hover { color: #ffffff; background-color: #ed586c; background-image: none; border-color: #ed586c; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); } .dark-mode .btn.btn-danger:focus { color: #ffffff; background-color: #ff4d4f; background-image: none; border-color: #ff4d4f; -moz-box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3); -webkit-box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3); box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3); outline-color: transparent; } .dark-mode .btn.btn-danger.active { color: #ffffff; background-color: #ff4d4f; background-image: none; border-color: #ff4d4f; -moz-box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3); -webkit-box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3); box-shadow: 0 0 0 0.3rem rgba(245, 34, 45, 0.3); outline-color: transparent; } .dark-mode .btn.btn-danger:focus:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: #ffffff; background-color: #ed586c; background-image: none; } .dark-mode .btn.btn-danger.active:hover { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: #ffffff; background-color: #ed586c; background-image: none; } .btn.btn-danger.disabled { color: #ffffff; background-color: #ff4d4f; background-image: none; border-color: #ff4d4f; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .btn.btn-danger:disabled { color: #ffffff; background-color: #ff4d4f; background-image: none; border-color: #ff4d4f; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .btn.btn-danger.disabled:hover { color: #ffffff; background-color: #ff4d4f; background-image: none; border-color: #ff4d4f; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .btn.btn-danger.disabled:focus { color: #ffffff; background-color: #ff4d4f; background-image: none; border-color: #ff4d4f; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.btn-danger.disabled { color: #ffffff; background-color: #ff4d4f; background-image: none; border-color: #ff4d4f; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.btn-danger:disabled { color: #ffffff; background-color: #ff4d4f; background-image: none; border-color: #ff4d4f; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.btn-danger.disabled:hover { color: #ffffff; background-color: #ff4d4f; background-image: none; border-color: #ff4d4f; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .btn.btn-danger.disabled:focus { color: #ffffff; background-color: #ff4d4f; background-image: none; border-color: #ff4d4f; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } /* Square button */ .btn-square { width: 3.2rem; padding-left: 0; padding-right: 0; } .btn-square.btn-sm { width: 2.6rem; padding-left: 0; padding-right: 0; } .btn-square.btn-lg { width: 4rem; padding-left: 0; padding-right: 0; } /* Rounded button */ .btn-rounded { border-radius: 3.2rem; } .btn-rounded.btn-sm { border-radius: 2.6rem; } .btn-rounded.btn-lg { border-radius: 4rem; } /* ------------------------------------------------------------------------------- 8. List [hm-08] ------------------------------------------------------------------------------- */ ul { list-style: circle inside; } ol { list-style: decimal inside; } ol, ul { padding-left: 0; margin-top: 0; } ul ul, ul ol, ol ol, ol ul { margin: 1.5rem 0 1.5rem 3rem; } li { margin-bottom: 1rem; } /* ------------------------------------------------------------------------------- 9. Code [hm-09] ------------------------------------------------------------------------------- */ code, .code { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .code { font-size: 1.2rem; line-height: 1.5; padding: 0.1rem 0.5rem; margin: 0 0.1rem; color: rgba(0, 0, 0, 0.85); background-color: #ecf0f1; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 0.2rem; } .dark-mode .code { color: rgba(255, 255, 255, 0.8); background-color: rgba(0, 0, 0, 0.1); border-color: rgba(0, 0, 0, 0.15); } /* Keyboard input */ kbd { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1.2rem; line-height: 1.5; padding: 0.1rem 0.5rem; margin: 0 0.1rem; color: rgba(0, 0, 0, 0.85); background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.4rem; -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; } .dark-mode kbd { color: rgba(255, 255, 255, 0.8); background-color: transparent; border-color: rgba(255, 255, 255, 0.2); } /* ------------------------------------------------------------------------------- 10. Tables [hm-10] ------------------------------------------------------------------------------- */ .table-responsive { overflow-x: auto; } .table-responsive .table th, .table-responsive .table td { white-space: nowrap; } .table { width: 100%; } .table thead tr { border-bottom: 2px solid #dadfe1; } .dark-mode .table thead tr { border-color: #47494d; } .table tfoot tr { border-top: 2px solid #dadfe1; } .dark-mode .table tfoot tr { border-color: #47494d; } .table tbody tr:not(:last-child) { border-bottom: 1px solid #dadfe1; } .dark-mode .table tbody tr:not(:last-child) { border-color: #47494d; } .table th { font-weight: 700; } .table th, .table td { text-align: left; } .table th { padding: 1.2rem 1.5rem; } .table td { padding: 1.2rem 1.5rem; } /* No outer padding */ .table-no-outer-padding th:first-child, .table-no-outer-padding td:first-child { padding-left: 0; } .table-no-outer-padding th:last-child, .table-no-outer-padding td:last-child { padding-right: 0; } /* Bordered table */ .table-bordered { border: 1px solid #dadfe1; } .table-outer-bordered { border: 1px solid #dadfe1; } .dark-mode .table-bordered { border-color: #47494d; } .dark-mode .table-outer-bordered { border-color: #47494d; } .table-bordered th:not(:last-child) { border-right: 1px solid #dadfe1; } .table-bordered td:not(:last-child) { border-right: 1px solid #dadfe1; } .table-inner-bordered th:not(:last-child) { border-right: 1px solid #dadfe1; } .table-inner-bordered td:not(:last-child) { border-right: 1px solid #dadfe1; } .dark-mode .table-bordered th:not(:last-child) { border-color: #47494d; } .dark-mode .table-bordered td:not(:last-child) { border-color: #47494d; } .dark-mode .table-inner-bordered th:not(:last-child) { border-color: #47494d; } .dark-mode .table-inner-bordered td:not(:last-child) { border-color: #47494d; } /* Hoverable table */ .table-hover tbody tr:hover th { background-color: rgba(0, 0, 0, 0.05); } .table-hover tbody tr:hover td { background-color: rgba(0, 0, 0, 0.05); } .dark-mode .table-hover tbody tr:hover th { background-color: rgba(0, 0, 0, 0.2); } .dark-mode .table-hover tbody tr:hover td { background-color: rgba(0, 0, 0, 0.2); } /* Striped table */ .table-striped tbody tr:nth-child(odd) { background-color: #ecf0f1; } .table-striped tbody tr:nth-child(odd) { background-color: #ecf0f1; } .dark-mode .table-striped tbody tr:nth-child(odd) { background-color: rgba(0, 0, 0, 0.15); } .dark-mode .table-striped tbody tr:nth-child(odd) { background-color: rgba(0, 0, 0, 0.15); } /* Primary, success, secondary, danger table rows. */ /* Light mode */ .table tbody tr.table-primary { color: rgba(0, 0, 0, 0.85); background-color: #cfe7fd; border-color: #45a3fb; } .table-striped tbody tr.table-primary { color: rgba(0, 0, 0, 0.85); background-color: #cfe7fd; border-color: #45a3fb; } .table-bordered tbody tr.table-primary { color: rgba(0, 0, 0, 0.85); background-color: #cfe7fd; border-color: #45a3fb; } .table-inner-bordered tbody tr.table-primary { color: rgba(0, 0, 0, 0.85); background-color: #cfe7fd; border-color: #45a3fb; } .table tbody tr.table-primary th { border-color: #bababc; } .table tbody tr.table-primary td { border-color: #bababc; } .table-bordered tbody tr.table-primary th { border-color: #bababc; } .table-bordered tbody tr.table-primary td { border-color: #bababc; } .table-inner-bordered tbody tr.table-primary th { border-color: #bababc; } .table-inner-bordered tbody tr.table-primary td { border-color: #bababc; } .table tbody tr.table-success { color: rgba(0, 0, 0, 0.85); background-color: #d5f9e5; border-color: #0be881; } .table-striped tbody tr.table-success { color: rgba(0, 0, 0, 0.85); background-color: #d5f9e5; border-color: #0be881; } .table-bordered tbody tr.table-success { color: rgba(0, 0, 0, 0.85); background-color: #d5f9e5; border-color: #0be881; } .table-inner-bordered tbody tr.table-success { color: rgba(0, 0, 0, 0.85); background-color: #d5f9e5; border-color: #0be881; } .table tbody tr.table-success th { border-color: #bababc; } .table tbody tr.table-success td { border-color: #bababc; } .table-bordered tbody tr.table-success th { border-color: #bababc; } .table-bordered tbody tr.table-success td { border-color: #bababc; } .table-inner-bordered tbody tr.table-success th { border-color: #bababc; } .table-inner-bordered tbody tr.table-success td { border-color: #bababc; } .table tbody tr.table-secondary { color: rgba(0, 0, 0, 0.85); background-color: #fff6cc; border-color: #ffcf00; } .table-striped tbody tr.table-secondary { color: rgba(0, 0, 0, 0.85); background-color: #fff6cc; border-color: #ffcf00; } .table-bordered tbody tr.table-secondary { color: rgba(0, 0, 0, 0.85); background-color: #fff6cc; border-color: #ffcf00; } .table-inner-bordered tbody tr.table-secondary { color: rgba(0, 0, 0, 0.85); background-color: #fff6cc; border-color: #ffcf00; } .table tbody tr.table-secondary th { border-color: #bababc; } .table tbody tr.table-secondary td { border-color: #bababc; } .table-bordered tbody tr.table-secondary th { border-color: #bababc; } .table-bordered tbody tr.table-secondary td { border-color: #bababc; } .table-inner-bordered tbody tr.table-secondary th { border-color: #bababc; } .table-inner-bordered tbody tr.table-secondary td { border-color: #bababc; } .table tbody tr.table-danger { color: rgba(0, 0, 0, 0.85); background-color: #f8d0d9; border-color: #ed586c; } .table-striped tbody tr.table-danger { color: rgba(0, 0, 0, 0.85); background-color: #f8d0d9; border-color: #ed586c; } .table-bordered tbody tr.table-danger { color: rgba(0, 0, 0, 0.85); background-color: #f8d0d9; border-color: #ed586c; } .table-inner-bordered tbody tr.table-danger { color: rgba(0, 0, 0, 0.85); background-color: #f8d0d9; border-color: #ed586c; } .table tbody tr.table-danger th { border-color: #bababc; } .table tbody tr.table-danger td { border-color: #bababc; } .table-bordered tbody tr.table-danger th { border-color: #bababc; } .table-bordered tbody tr.table-danger td { border-color: #bababc; } .table-inner-bordered tbody tr.table-danger th { border-color: #bababc; } .table-inner-bordered tbody tr.table-danger td { border-color: #bababc; } /* Dark mode */ .dark-mode .table tbody tr.table-primary { color: #1890ff; background-color: #172636; border-color: #0d518f; } .dark-mode .table-striped tbody tr.table-primary { color: #1890ff; background-color: #172636; border-color: #0d518f; } .dark-mode .table-bordered tbody tr.table-primary { color: #1890ff; background-color: #172636; border-color: #0d518f; } .dark-mode .table-inner-bordered tbody tr.table-primary { color: #1890ff; background-color: #172636; border-color: #0d518f; } .dark-mode .table tbody tr.table-primary th { border-color: #47494d; } .dark-mode .table tbody tr.table-primary td { border-color: #47494d; } .dark-mode .table-bordered tbody tr.table-primary th { border-color: #47494d; } .dark-mode .table-bordered tbody tr.table-primary td { border-color: #47494d; } .dark-mode .table-inner-bordered tbody tr.table-primary th { border-color: #47494d; } .dark-mode .table-inner-bordered tbody tr.table-primary td { border-color: #47494d; } .dark-mode .table tbody tr.table-success { color: #0be881; background-color: #17312a; border-color: #0d8951; } .dark-mode .table-striped tbody tr.table-success { color: #0be881; background-color: #17312a; border-color: #0d8951; } .dark-mode .table-bordered tbody tr.table-success { color: #0be881; background-color: #17312a; border-color: #0d8951; } .dark-mode .table-inner-bordered tbody tr.table-success { color: #0be881; background-color: #17312a; border-color: #0d8951; } .dark-mode .table tbody tr.table-success th { border-color: #47494d; } .dark-mode .table tbody tr.table-success td { border-color: #47494d; } .dark-mode .table-bordered tbody tr.table-success th { border-color: #47494d; } .dark-mode .table-bordered tbody tr.table-success td { border-color: #47494d; } .dark-mode .table-inner-bordered tbody tr.table-success th { border-color: #47494d; } .dark-mode .table-inner-bordered tbody tr.table-success td { border-color: #47494d; } .dark-mode .table tbody tr.table-secondary { color: #ffcf00; background-color: #302c1d; border-color: #8e7710; } .dark-mode .table-striped tbody tr.table-secondary { color: #ffcf00; background-color: #302c1d; border-color: #8e7710; } .dark-mode .table-bordered tbody tr.table-secondary { color: #ffcf00; background-color: #302c1d; border-color: #8e7710; } .dark-mode .table-inner-bordered tbody tr.table-secondary { color: #ffcf00; background-color: #302c1d; border-color: #8e7710; } .dark-mode .table tbody tr.table-secondary th { border-color: #47494d; } .dark-mode .table tbody tr.table-secondary td { border-color: #47494d; } .dark-mode .table-bordered tbody tr.table-secondary th { border-color: #47494d; } .dark-mode .table-bordered tbody tr.table-secondary td { border-color: #47494d; } .dark-mode .table-inner-bordered tbody tr.table-secondary th { border-color: #47494d; } .dark-mode .table-inner-bordered tbody tr.table-secondary td { border-color: #47494d; } .dark-mode .table tbody tr.table-danger { color: #ff4d4f; background-color: #301923; border-color: #8c0e2e; } .dark-mode .table-striped tbody tr.table-danger { color: #ff4d4f; background-color: #301923; border-color: #8c0e2e; } .dark-mode .table-bordered tbody tr.table-danger { color: #ff4d4f; background-color: #301923; border-color: #8c0e2e; } .dark-mode .table-inner-bordered tbody tr.table-danger { color: #ff4d4f; background-color: #301923; border-color: #8c0e2e; } .dark-mode .table tbody tr.table-danger th { border-color: #47494d; } .dark-mode .table tbody tr.table-danger td { border-color: #47494d; } .dark-mode .table-bordered tbody tr.table-danger th { border-color: #47494d; } .dark-mode .table-bordered tbody tr.table-danger td { border-color: #47494d; } .dark-mode .table-inner-bordered tbody tr.table-danger th { border-color: #47494d; } .dark-mode .table-inner-bordered tbody tr.table-danger td { border-color: #47494d; } /* ------------------------------------------------------------------------------- 11. Form elements [hm-11] ------------------------------------------------------------------------------- */ /* Fieldsets, form-groups, form-rows and cols, labels, legends, form-text, invalid-feedback, inline-form */ fieldset { padding: 0; border-width: 0; } label { display: inline-block; margin-bottom: 0.6rem; } label.required:after { content: "*"; color: #ff4d4f; margin-left: 0.3rem; } legend { display: block; margin-bottom: 0.6rem; } .form-group { margin-bottom: 2rem; } /* Form rows */ .form-row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 2rem; } /* Form rows with equal spacing */ .form-row.row-eq-spacing>[class^="col"] { padding-left: 1rem; padding-right: 1rem; } .form-row.row-eq-spacing>[class^="col"]:first-child { padding-left: 0; } .form-row.row-eq-spacing>[class^="col"]:last-child { padding-right: 0; } /* Adjustments for small screens and up (> 576px) */ @media (min-width: 577px) { .form-row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"] { padding-left: 1rem; padding-right: 1rem; } .form-row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]:first-child { padding-left: 0; } .form-row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]:last-child { padding-right: 0; } } @media (max-width: 576px) { .form-row.row-eq-spacing-sm:not(.row-eq-spacing)>[class^="col"]:not(:last-child) { margin-bottom: 2rem; } } /* Adjustments for medium screens and up (> 768px) */ @media (min-width: 769px) { .form-row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] { padding-left: 1rem; padding-right: 1rem; } .form-row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:first-child { padding-left: 0; } .form-row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:last-child { padding-right: 0; } } @media (max-width: 768px) { .form-row.row-eq-spacing-md:not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:not(:last-child) { margin-bottom: 2rem; } } /* Adjustments for large screens and up (> 992px) */ @media (min-width: 993px) { .form-row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] { padding-left: 1rem; padding-right: 1rem; } .form-row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:first-child { padding-left: 0; } .form-row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:last-child { padding-right: 0; } } @media (max-width: 992px) { .form-row.row-eq-spacing-lg:not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:not(:last-child) { margin-bottom: 2rem; } } /* Adjustments for extra large screens and up (> 1200px) */ @media (min-width: 1201px) { .form-row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"] { padding-left: 1rem; padding-right: 1rem; } .form-row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:first-child { padding-left: 0; } .form-row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:last-child { padding-right: 0; } } @media (max-width: 1200px) { .form-row.row-eq-spacing-xl:not(.row-eq-spacing-lg):not(.row-eq-spacing-md):not(.row-eq-spacing-sm):not(.row-eq-spacing)>[class^="col"]:not(:last-child) { margin-bottom: 2rem; } } /* Form text and feedback */ .form-text { color: rgba(0, 0, 0, 0.7); font-size: 1.4rem; padding-top: 0.8rem; padding-bottom: 0.8rem; border-bottom: 1px dotted rgba(0, 0, 0, 0.2); } .dark-mode .form-text { color: rgba(255, 255, 255, 0.65); border-color: rgba(255, 255, 255, 0.1); } .invalid-feedback { color: #ff4d4f; font-size: 1.4rem; padding-top: 0.8rem; padding-bottom: 0.8rem; } .dark-mode .invalid-feedback { color: #ff4d4f; } /* Inline form */ .form-inline, .form-inline .form-group { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-align: center; align-items: center; } .form-inline .form-group { width: 100%; } .form-inline > .form-control, .form-inline > .input-group, .form-inline .form-group > .form-control, .form-inline .form-group > .input-group { position: relative; -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; } .form-inline > label, .form-inline > .custom-control, .form-inline > .form-text, .form-inline > .invalid-feedback, .form-inline .form-group > label, .form-inline .form-group > .custom-control, .form-inline .form-group > .form-text, .form-inline .form-group > .invalid-feedback { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; min-width: 0; } .form-inline > label, .form-inline > .form-text, .form-inline > .invalid-feedback, .form-inline .form-group > label, .form-inline .form-group > .form-text, .form-inline .form-group > .invalid-feedback { margin: 0; padding: 0; border: none; white-space: nowrap; } .form-inline > .form-control:not(:last-child) { margin-right: 1rem; } .form-inline > .input-group:not(:last-child) { margin-right: 1rem; } .form-inline > label:not(:last-child) { margin-right: 1rem; } .form-inline > .custom-control { margin-right: 1rem; } .form-inline > .btn:not(:last-child) { margin-right: 1rem; } .form-inline > a.btn:not(:last-child) { margin-right: 1rem; } .form-inline > .form-text:not(:last-child) { margin-right: 1rem; } .form-inline > .invalid-feedback:not(:last-child) { margin-right: 1rem; } .form-inline .form-group > .form-control:not(:last-child) { margin-right: 1rem; } .form-inline .form-group > .input-group:not(:last-child) { margin-right: 1rem; } .form-inline .form-group > label:not(:last-child) { margin-right: 1rem; } .form-inline .form-group > .custom-control { margin-right: 1rem; } .form-inline .form-group > .btn:not(:last-child) { margin-right: 1rem; } .form-inline .form-group > a.btn:not(:last-child) { margin-right: 1rem; } .form-inline .form-group > .form-text:not(:last-child) { margin-right: 1rem; } .form-inline .form-group > .invalid-feedback:not(:last-child) { margin-right: 1rem; } /* Inline form for small screens and up (> 576px) */ @media (min-width: 577px) { .form-inline-sm, .form-inline-sm .form-group { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-align: center; align-items: center; } .form-inline-sm .form-group { width: 100%; } .form-inline-sm > .form-control, .form-inline-sm > .input-group, .form-inline-sm .form-group > .form-control, .form-inline-sm .form-group > .input-group { position: relative; -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; } .form-inline-sm > label, .form-inline-sm > .custom-control, .form-inline-sm > .form-text, .form-inline-sm > .invalid-feedback, .form-inline-sm .form-group > label, .form-inline-sm .form-group > .custom-control, .form-inline-sm .form-group > .form-text, .form-inline-sm .form-group > .invalid-feedback { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; min-width: 0; } .form-inline-sm > label, .form-inline-sm > .form-text, .form-inline-sm > .invalid-feedback, .form-inline-sm .form-group > label, .form-inline-sm .form-group > .form-text, .form-inline-sm .form-group > .invalid-feedback { margin: 0; padding: 0; border: none; white-space: nowrap; } .form-inline-sm > .form-control:not(:last-child) { margin-right: 1rem; } .form-inline-sm > .input-group:not(:last-child) { margin-right: 1rem; } .form-inline-sm > label:not(:last-child) { margin-right: 1rem; } .form-inline-sm > .custom-control { margin-right: 1rem; } .form-inline-sm > .btn:not(:last-child) { margin-right: 1rem; } .form-inline-sm > a.btn:not(:last-child) { margin-right: 1rem; } .form-inline-sm > .form-text:not(:last-child) { margin-right: 1rem; } .form-inline-sm > .invalid-feedback:not(:last-child) { margin-right: 1rem; } .form-inline-sm .form-group > .form-control:not(:last-child) { margin-right: 1rem; } .form-inline-sm .form-group > .input-group:not(:last-child) { margin-right: 1rem; } .form-inline-sm .form-group > label:not(:last-child) { margin-right: 1rem; } .form-inline-sm .form-group > .custom-control { margin-right: 1rem; } .form-inline-sm .form-group > .btn:not(:last-child) { margin-right: 1rem; } .form-inline-sm .form-group > a.btn:not(:last-child) { margin-right: 1rem; } .form-inline-sm .form-group > .form-text:not(:last-child) { margin-right: 1rem; } .form-inline-sm .form-group > .invalid-feedback:not(:last-child) { margin-right: 1rem; } } @media (max-width: 576px) { .form-inline-sm > .form-control:not(:last-child) { margin-bottom: 2rem; } .form-inline-sm > .input-group:not(:last-child) { margin-bottom: 2rem; } .form-inline-sm > .custom-control { margin-bottom: 2rem; } .form-inline-sm > .btn:not(:last-child) { margin-bottom: 2rem; } .form-inline-sm > a.btn:not(:last-child) { margin-bottom: 2rem; } .form-inline-sm .form-group > .form-control:not(:last-child) { margin-bottom: 2rem; } .form-inline-sm .form-group > .input-group:not(:last-child) { margin-bottom: 2rem; } .form-inline-sm .form-group > .custom-control { margin-bottom: 2rem; } .form-inline-sm .form-group > .btn:not(:last-child) { margin-bottom: 2rem; } .form-inline-sm .form-group > a.btn:not(:last-child) { margin-bottom: 2rem; } } /* Inline form for medium screens and up (> 768px) */ @media (min-width: 769px) { .form-inline-md, .form-inline-md .form-group { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-align: center; align-items: center; } .form-inline-md .form-group { width: 100%; } .form-inline-md > .form-control, .form-inline-md > .input-group, .form-inline-md .form-group > .form-control, .form-inline-md .form-group > .input-group { position: relative; -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; } .form-inline-md > label, .form-inline-md > .custom-control, .form-inline-md > .form-text, .form-inline-md > .invalid-feedback, .form-inline-md .form-group > label, .form-inline-md .form-group > .custom-control, .form-inline-md .form-group > .form-text, .form-inline-md .form-group > .invalid-feedback { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; min-width: 0; } .form-inline-md > label, .form-inline-md > .form-text, .form-inline-md > .invalid-feedback, .form-inline-md .form-group > label, .form-inline-md .form-group > .form-text, .form-inline-md .form-group > .invalid-feedback { margin: 0; padding: 0; border: none; white-space: nowrap; } .form-inline-md > .form-control:not(:last-child) { margin-right: 1rem; } .form-inline-md > .input-group:not(:last-child) { margin-right: 1rem; } .form-inline-md > label:not(:last-child) { margin-right: 1rem; } .form-inline-md > .custom-control { margin-right: 1rem; } .form-inline-md > .btn:not(:last-child) { margin-right: 1rem; } .form-inline-md > a.btn:not(:last-child) { margin-right: 1rem; } .form-inline-md > .form-text:not(:last-child) { margin-right: 1rem; } .form-inline-md > .invalid-feedback:not(:last-child) { margin-right: 1rem; } .form-inline-md .form-group > .form-control:not(:last-child) { margin-right: 1rem; } .form-inline-md .form-group > .input-group:not(:last-child) { margin-right: 1rem; } .form-inline-md .form-group > label:not(:last-child) { margin-right: 1rem; } .form-inline-md .form-group > .custom-control { margin-right: 1rem; } .form-inline-md .form-group > .btn:not(:last-child) { margin-right: 1rem; } .form-inline-md .form-group > a.btn:not(:last-child) { margin-right: 1rem; } .form-inline-md .form-group > .form-text:not(:last-child) { margin-right: 1rem; } .form-inline-md .form-group > .invalid-feedback:not(:last-child) { margin-right: 1rem; } } @media (max-width: 768px) { .form-inline-md > .form-control:not(:last-child) { margin-bottom: 2rem; } .form-inline-md > .input-group:not(:last-child) { margin-bottom: 2rem; } .form-inline-md > .custom-control { margin-bottom: 2rem; } .form-inline-md > .btn:not(:last-child) { margin-bottom: 2rem; } .form-inline-md > a.btn:not(:last-child) { margin-bottom: 2rem; } .form-inline-md .form-group > .form-control:not(:last-child) { margin-bottom: 2rem; } .form-inline-md .form-group > .input-group:not(:last-child) { margin-bottom: 2rem; } .form-inline-md .form-group > .custom-control { margin-bottom: 2rem; } .form-inline-md .form-group > .btn:not(:last-child) { margin-bottom: 2rem; } .form-inline-md .form-group > a.btn:not(:last-child) { margin-bottom: 2rem; } } /* Inline form for large screens and up (> 992px) */ @media (min-width: 993px) { .form-inline-lg, .form-inline-lg .form-group { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-align: center; align-items: center; } .form-inline-lg .form-group { width: 100%; } .form-inline-lg > .form-control, .form-inline-lg > .input-group, .form-inline-lg .form-group > .form-control, .form-inline-lg .form-group > .input-group { position: relative; -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; } .form-inline-lg > label, .form-inline-lg > .custom-control, .form-inline-lg > .form-text, .form-inline-lg > .invalid-feedback, .form-inline-lg .form-group > label, .form-inline-lg .form-group > .custom-control, .form-inline-lg .form-group > .form-text, .form-inline-lg .form-group > .invalid-feedback { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; min-width: 0; } .form-inline-lg > label, .form-inline-lg > .form-text, .form-inline-lg > .invalid-feedback, .form-inline-lg .form-group > label, .form-inline-lg .form-group > .form-text, .form-inline-lg .form-group > .invalid-feedback { margin: 0; padding: 0; border: none; white-space: nowrap; } .form-inline-lg > .form-control:not(:last-child) { margin-right: 1rem; } .form-inline-lg > .input-group:not(:last-child) { margin-right: 1rem; } .form-inline-lg > label:not(:last-child) { margin-right: 1rem; } .form-inline-lg > .custom-control { margin-right: 1rem; } .form-inline-lg > .btn:not(:last-child) { margin-right: 1rem; } .form-inline-lg > a.btn:not(:last-child) { margin-right: 1rem; } .form-inline-lg > .form-text:not(:last-child) { margin-right: 1rem; } .form-inline-lg > .invalid-feedback:not(:last-child) { margin-right: 1rem; } .form-inline-lg .form-group > .form-control:not(:last-child) { margin-right: 1rem; } .form-inline-lg .form-group > .input-group:not(:last-child) { margin-right: 1rem; } .form-inline-lg .form-group > label:not(:last-child) { margin-right: 1rem; } .form-inline-lg .form-group > .custom-control { margin-right: 1rem; } .form-inline-lg .form-group > .btn:not(:last-child) { margin-right: 1rem; } .form-inline-lg .form-group > a.btn:not(:last-child) { margin-right: 1rem; } .form-inline-lg .form-group > .form-text:not(:last-child) { margin-right: 1rem; } .form-inline-lg .form-group > .invalid-feedback:not(:last-child) { margin-right: 1rem; } } @media (max-width: 992px) { .form-inline-lg > .form-control:not(:last-child) { margin-bottom: 2rem; } .form-inline-lg > .input-group:not(:last-child) { margin-bottom: 2rem; } .form-inline-lg > .custom-control { margin-bottom: 2rem; } .form-inline-lg > .btn:not(:last-child) { margin-bottom: 2rem; } .form-inline-lg > a.btn:not(:last-child) { margin-bottom: 2rem; } .form-inline-lg .form-group > .form-control:not(:last-child) { margin-bottom: 2rem; } .form-inline-lg .form-group > .input-group:not(:last-child) { margin-bottom: 2rem; } .form-inline-lg .form-group > .custom-control { margin-bottom: 2rem; } .form-inline-lg .form-group > .btn:not(:last-child) { margin-bottom: 2rem; } .form-inline-lg .form-group > a.btn:not(:last-child) { margin-bottom: 2rem; } } /* Inline form for extra large screens and up (> 1200px) */ @media (min-width: 1201px) { .form-inline-xl, .form-inline-xl .form-group { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-align: center; align-items: center; } .form-inline-xl .form-group { width: 100%; } .form-inline-xl > .form-control, .form-inline-xl > .input-group, .form-inline-xl .form-group > .form-control, .form-inline-xl .form-group > .input-group { position: relative; -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; } .form-inline-xl > label, .form-inline-xl > .custom-control, .form-inline-xl > .form-text, .form-inline-xl > .invalid-feedback, .form-inline-xl .form-group > label, .form-inline-xl .form-group > .custom-control, .form-inline-xl .form-group > .form-text, .form-inline-xl .form-group > .invalid-feedback { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; min-width: 0; } .form-inline-xl > label, .form-inline-xl > .form-text, .form-inline-xl > .invalid-feedback, .form-inline-xl .form-group > label, .form-inline-xl .form-group > .form-text, .form-inline-xl .form-group > .invalid-feedback { margin: 0; padding: 0; border: none; white-space: nowrap; } .form-inline-xl > .form-control:not(:last-child) { margin-right: 1rem; } .form-inline-xl > .input-group:not(:last-child) { margin-right: 1rem; } .form-inline-xl > label:not(:last-child) { margin-right: 1rem; } .form-inline-xl > .custom-control { margin-right: 1rem; } .form-inline-xl > .btn:not(:last-child) { margin-right: 1rem; } .form-inline-xl > a.btn:not(:last-child) { margin-right: 1rem; } .form-inline-xl > .form-text:not(:last-child) { margin-right: 1rem; } .form-inline-xl > .invalid-feedback:not(:last-child) { margin-right: 1rem; } .form-inline-xl .form-group > .form-control:not(:last-child) { margin-right: 1rem; } .form-inline-xl .form-group > .input-group:not(:last-child) { margin-right: 1rem; } .form-inline-xl .form-group > label:not(:last-child) { margin-right: 1rem; } .form-inline-xl .form-group > .custom-control { margin-right: 1rem; } .form-inline-xl .form-group > .btn:not(:last-child) { margin-right: 1rem; } .form-inline-xl .form-group > a.btn:not(:last-child) { margin-right: 1rem; } .form-inline-xl .form-group > .form-text:not(:last-child) { margin-right: 1rem; } .form-inline-xl .form-group > .invalid-feedback:not(:last-child) { margin-right: 1rem; } } @media (max-width: 1200px) { .form-inline-xl > .form-control:not(:last-child) { margin-bottom: 2rem; } .form-inline-xl > .input-group:not(:last-child) { margin-bottom: 2rem; } .form-inline-xl > .custom-control { margin-bottom: 2rem; } .form-inline-xl > .btn:not(:last-child) { margin-bottom: 2rem; } .form-inline-xl > a.btn:not(:last-child) { margin-bottom: 2rem; } .form-inline-xl .form-group > .form-control:not(:last-child) { margin-bottom: 2rem; } .form-inline-xl .form-group > .input-group:not(:last-child) { margin-bottom: 2rem; } .form-inline-xl .form-group > .custom-control { margin-bottom: 2rem; } .form-inline-xl .form-group > .btn:not(:last-child) { margin-bottom: 2rem; } .form-inline-xl .form-group > a.btn:not(:last-child) { margin-bottom: 2rem; } } /* Inputs */ .form-control { display: block; width: 100%; height: 3.2rem; padding-left: 0.8rem; padding-right: 0.8rem; color: rgba(0, 0, 0, 0.85); background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.4rem; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; /* Removes the default styles on some devices. */ -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form-control-sm { height: 2.6rem; padding-left: 0.8rem; padding-right: 0.8rem; font-size: 1.2rem; } .form-control-lg { height: 4rem; padding-left: 0.8rem; padding-right: 0.8rem; font-size: 1.8rem; } textarea.form-control { max-width: 100%; min-height: 10rem; padding: 0.8rem; line-height: 1.5; } textarea.form-control-sm { min-height: 8rem; padding: 0.8rem; } textarea.form-control-lg { min-height: 14rem; padding: 0.8rem; } .form-control:hover { color: rgba(0, 0, 0, 0.85); background-color: #ffffff; border-color: rgba(0, 0, 0, 0.3); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .form-control:focus { color: rgba(0, 0, 0, 0.85); background-color: #ffffff; border-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6); -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6); box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6); outline: none; } ::-webkit-input-placeholder { /* Edge */ color: rgba(0, 0, 0, 0.35); } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: rgba(0, 0, 0, 0.35); } ::placeholder { color: rgba(0, 0, 0, 0.35); } .form-control.disabled { /* The :disabled selector must still be added to the input field for the forms to work as intended. Moreover, since focusing on an input with the :disabled selector is impossible, the :focus styles are not overridden (along with the :focus box shadows). */ cursor: not-allowed; opacity: 0.6; color: rgba(0, 0, 0, 0.85); background-color: #ecf0f1; border-color: rgba(0, 0, 0, 0.2); } .form-control:disabled { /* The :disabled selector must still be added to the input field for the forms to work as intended. Moreover, since focusing on an input with the :disabled selector is impossible, the :focus styles are not overridden (along with the :focus box shadows). */ cursor: not-allowed; opacity: 0.6; color: rgba(0, 0, 0, 0.85); background-color: #ecf0f1; border-color: rgba(0, 0, 0, 0.2); } .form-control.disabled:hover { /* The :disabled selector must still be added to the input field for the forms to work as intended. Moreover, since focusing on an input with the :disabled selector is impossible, the :focus styles are not overridden (along with the :focus box shadows). */ cursor: not-allowed; opacity: 0.6; color: rgba(0, 0, 0, 0.85); background-color: #ecf0f1; border-color: rgba(0, 0, 0, 0.2); } .form-control:disabled:hover { /* The :disabled selector must still be added to the input field for the forms to work as intended. Moreover, since focusing on an input with the :disabled selector is impossible, the :focus styles are not overridden (along with the :focus box shadows). */ cursor: not-allowed; opacity: 0.6; color: rgba(0, 0, 0, 0.85); background-color: #ecf0f1; border-color: rgba(0, 0, 0, 0.2); } .dark-mode .form-control { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.05); border-color: rgba(0, 0, 0, 0.3); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .dark-mode .form-control:hover { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.05); border-color: rgba(0, 0, 0, 0.4); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .dark-mode .form-control:focus { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.05); border-color: rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3); -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3); box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3); outline: none; } .dark-mode ::-webkit-input-placeholder { /* Edge */ color: rgba(255, 255, 255, 0.2); } .dark-mode :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: rgba(255, 255, 255, 0.2); } .dark-mode ::placeholder { color: rgba(255, 255, 255, 0.2); } .dark-mode .form-control.disabled { color: rgba(255, 255, 255, 0.8); background-color: rgba(0, 0, 0, 0.15); border-color: rgba(0, 0, 0, 0.3); } .dark-mode .form-control:disabled { color: rgba(255, 255, 255, 0.8); background-color: rgba(0, 0, 0, 0.15); border-color: rgba(0, 0, 0, 0.3); } .dark-mode .form-control.disabled:hover { color: rgba(255, 255, 255, 0.8); background-color: rgba(0, 0, 0, 0.15); border-color: rgba(0, 0, 0, 0.3); } .dark-mode .form-control:disabled:hover { color: rgba(255, 255, 255, 0.8); background-color: rgba(0, 0, 0, 0.15); border-color: rgba(0, 0, 0, 0.3); } /* Alternate dark mode inputs */ .dark-mode .form-control.alt-dm { color: inherit; background-color: rgba(0, 0, 0, 0.15); border-color: transparent; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .dark-mode .form-control.alt-dm:hover { color: inherit; background-color: rgba(0, 0, 0, 0.15); border-color: rgba(0, 0, 0, 0.1); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .dark-mode .form-control.alt-dm:focus { color: inherit; background-color: rgba(0, 0, 0, 0.15); border-color: inherit; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .form-control.alt-dm::-webkit-input-placeholder { /* Edge */ color: rgba(255, 255, 255, 0.5); } .dark-mode .form-control.alt-dm:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: rgba(255, 255, 255, 0.5); } .dark-mode .form-control.alt-dm::placeholder { color: rgba(255, 255, 255, 0.5); } .dark-mode .form-control.alt-dm.disabled { color: inherit; background-color: rgba(0, 0, 0, 0.3); border-color: transparent; } .dark-mode .form-control.alt-dm:disabled { color: inherit; background-color: rgba(0, 0, 0, 0.3); border-color: transparent; } .dark-mode .form-control.alt-dm.disabled:hover { color: inherit; background-color: rgba(0, 0, 0, 0.3); border-color: transparent; } .dark-mode .form-control.alt-dm:disabled:hover { color: inherit; background-color: rgba(0, 0, 0, 0.3); border-color: transparent; } /* Inputs invalid (with errors) */ .form-group.is-invalid .form-control { color: rgba(0, 0, 0, 0.85); background-color: #ffffff; border-color: #ff4d4f; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .form-control.is-invalid { color: rgba(0, 0, 0, 0.85); background-color: #ffffff; border-color: #ff4d4f; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .form-group.is-invalid .form-control:hover { color: rgba(0, 0, 0, 0.85); background-color: #ffffff; border-color: #ff4d4f; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .form-control.is-invalid:hover { color: rgba(0, 0, 0, 0.85); background-color: #ffffff; border-color: #ff4d4f; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .form-group.is-invalid .form-control:focus { color: rgba(0, 0, 0, 0.85); background-color: #ffffff; border-color: #f8d0d9; -moz-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6); -webkit-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6); box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6); outline: none; } .form-control.is-invalid:focus { color: rgba(0, 0, 0, 0.85); background-color: #ffffff; border-color: #f8d0d9; -moz-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6); -webkit-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6); box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6); outline: none; } .form-group.is-invalid .form-control::-webkit-input-placeholder { /* Edge */ color: rgba(0, 0, 0, 0.35); } .form-group.is-invalid .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: rgba(0, 0, 0, 0.35); } .form-group.is-invalid .form-control::placeholder { color: rgba(0, 0, 0, 0.35); } .form-control.is-invalid::-webkit-input-placeholder { /* Edge */ color: rgba(0, 0, 0, 0.35); } .form-control.is-invalid:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: rgba(0, 0, 0, 0.35); } .form-control.is-invalid::placeholder { color: rgba(0, 0, 0, 0.35); } .dark-mode .form-group.is-invalid .form-control { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.05); border-color: #ff4d4f; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .dark-mode .form-control.is-invalid { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.05); border-color: #ff4d4f; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .dark-mode .form-group.is-invalid .form-control:hover { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.05); border-color: #ff4d4f; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .dark-mode .form-control.is-invalid:hover { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.05); border-color: #ff4d4f; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .dark-mode .form-group.is-invalid .form-control:focus { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.05); border-color: #ff4d4f; -moz-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3); -webkit-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3); box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3); outline: none; } .dark-mode .form-control.is-invalid:focus { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.05); border-color: #ff4d4f; -moz-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3); -webkit-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3); box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3); outline: none; } .dark-mode .form-group.is-invalid .form-control::-webkit-input-placeholder { /* Edge */ color: rgba(255, 255, 255, 0.2); } .dark-mode .form-group.is-invalid .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: rgba(255, 255, 255, 0.2); } .dark-mode .form-group.is-invalid .form-control::placeholder { color: rgba(255, 255, 255, 0.2); } .dark-mode .form-control.is-invalid::-webkit-input-placeholder { /* Edge */ color: rgba(255, 255, 255, 0.2); } .dark-mode .form-control.is-invalid:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: rgba(255, 255, 255, 0.2); } .dark-mode .form-control.is-invalid::placeholder { color: rgba(255, 255, 255, 0.2); } .dark-mode .form-group.is-invalid .form-control.alt-dm { color: inherit; background-color: rgba(0, 0, 0, 0.15); border-color: #ed586c; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .dark-mode .form-control.alt-dm.is-invalid { color: inherit; background-color: rgba(0, 0, 0, 0.15); border-color: #ed586c; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .dark-mode .form-group.is-invalid .form-control.alt-dm:hover { color: inherit; background-color: rgba(0, 0, 0, 0.15); border-color: #ed586c; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .dark-mode .form-control.alt-dm.is-invalid:hover { color: inherit; background-color: rgba(0, 0, 0, 0.15); border-color: #ed586c; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .dark-mode .form-group.is-invalid .form-control.alt-dm:focus { color: inherit; background-color: rgba(0, 0, 0, 0.15); border-color: #ed586c; -moz-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3); -webkit-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3); box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3); outline: none; } .dark-mode .form-control.alt-dm.is-invalid:focus { color: inherit; background-color: rgba(0, 0, 0, 0.15); border-color: #ed586c; -moz-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3); -webkit-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3); box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3); outline: none; } .dark-mode .form-group.is-invalid .form-control.alt-dm.is-invalid::-webkit-input-placeholder { /* Edge */ color: rgba(255, 255, 255, 0.5); } .dark-mode .form-group.is-invalid .form-control.alt-dm.is-invalid:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: rgba(255, 255, 255, 0.5); } .dark-mode .form-group.is-invalid .form-control.alt-dm.is-invalid::placeholder { color: rgba(255, 255, 255, 0.5); } .dark-mode .form-control.alt-dm.is-invalid::-webkit-input-placeholder { /* Edge */ color: rgba(255, 255, 255, 0.5); } .dark-mode .form-control.alt-dm.is-invalid:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: rgba(255, 255, 255, 0.5); } .dark-mode .form-control.alt-dm.is-invalid::placeholder { color: rgba(255, 255, 255, 0.5); } /* Selects */ select.form-control:not([multiple]) { cursor: pointer; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAI9JREFUeNpiZACCyMjIBCDVD8SOy5cvv8BAAgDqNQBS+4G4EKh3ASPUsPlQ+Q+kGIpkmABUKJEJ6jIYAEnshyok1TAQ6AcZ6Ah1GdGG4jAM7DtGQgrQvU9ILSOxColVw0is7VA2QV8wkhA+DMQECSMJgc5AyDCcBhIwFG9aZSQxrRFM+IwkJGAGYnIRQIABACQuXCKovu2mAAAAAElFTkSuQmCC); background-size: 1rem; background-repeat: no-repeat; background-position: calc(100% - 1rem) center; padding-right: 3.6rem; } .dark-mode select.form-control:not([multiple]) > option { /* Required for some browsers, such as Firefox, or the old Ms Edge (ignored on webkit browsers) */ color: rgba(255, 255, 255, 0.8); background-color: #191c20; } .dark-mode select.form-control:not([multiple]) > option:hover { /* Required for some browsers, such as Firefox, or the old Ms Edge (ignored on webkit browsers) */ color: rgba(255, 255, 255, 0.8); background-color: #1890ff; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* This hack resets the select boxes to their defaults on IE, because it is not possible to remove the default dropdown arrow. */ select.form-control:not([multiple]) { background-image: none; background-size: auto; background-repeat: initial; background-position: 0% 0%; padding-right: 0; } } select.form-control[multiple] { overflow: auto; height: auto; padding: 0.8rem; } select.form-control-sm[multiple] { padding: 0.8rem; } select.form-control-lg[multiple] { padding: 0.8rem; } select.form-control[multiple] > option:not(:checked) { color: rgba(0, 0, 0, 0.85); } .dark-mode select.form-control[multiple] > option:not(:checked) { color: rgba(255, 255, 255, 0.8); } select.form-control[multiple] > option:disabled { color: rgba(0, 0, 0, 0.6); } .dark-mode select.form-control[multiple] > option:disabled { color: rgba(255, 255, 255, 0.6); } /* Checkbox */ .custom-checkbox { display: block; position: relative; line-height: 1.8rem; } .custom-checkbox input[type="checkbox"] { /* Hide the default */ position: absolute; opacity: 0; height: 0; width: 0; } .custom-checkbox label { display: inline-block; margin-bottom: 0; padding-left: 2.5rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .custom-checkbox label.blank { padding-left: 1.8rem; } .custom-checkbox label:before { content: ""; display: inline-block; position: absolute; height: 1.8rem; width: 1.8rem; top: 0; left: 0; background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 0.4rem; } .custom-checkbox input[type="checkbox"]:hover~label:before { background-color: #ffffff; border-color: rgba(0, 0, 0, 0.4); } .custom-checkbox input[type="checkbox"]:focus~label:before { border-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6); -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6); box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6); } .custom-checkbox input[type="checkbox"]:checked~label:before { background-color: #1890ff; border-color: #1890ff; } .custom-checkbox input[type="checkbox"]:checked:focus~label:before { border-color: #1890ff; -moz-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3); -webkit-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3); box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3); } .dark-mode .custom-checkbox label:before { background-color: transparent; border-color: rgba(255, 255, 255, 0.15); } .dark-mode .custom-checkbox input[type="checkbox"]:hover~label:before { background-color: transparent; border-color: rgba(255, 255, 255, 0.3); } .dark-mode .custom-checkbox input[type="checkbox"]:focus~label:before { border-color: rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3); -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3); box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3); } .dark-mode .custom-checkbox input[type="checkbox"]:checked~label:before { background-color: #1890ff; border-color: #1890ff; } .dark-mode .custom-checkbox input[type="checkbox"]:checked:focus~label:before { border-color: #1890ff; -moz-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3); -webkit-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3); box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3); } .custom-checkbox label:after { content: ""; position: absolute; display: none; left: 0.6rem; top: 0.3rem; width: 0.6rem; height: 1rem; border: solid #ffffff; border-width: 0 0.2rem 0.2rem 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .dark-mode .custom-checkbox label:after { border-color: #ffffff; } .custom-checkbox input[type="checkbox"]:checked~label:after { display: block; } .custom-checkbox input[type="checkbox"]:disabled~label { opacity: 0.6; cursor: not-allowed; } .custom-checkbox input[type="checkbox"]:disabled~label:before { background-color: #ffffff; border-color: rgba(0, 0, 0, 0.3); } .custom-checkbox input[type="checkbox"]:hover:disabled~label:before { background-color: #ffffff; border-color: rgba(0, 0, 0, 0.3); } .custom-checkbox input[type="checkbox"]:disabled:checked~label:before { background-color: #1890ff; border-color: #1890ff; } .custom-checkbox input[type="checkbox"]:hover:disabled:checked~label:before { background-color: #1890ff; border-color: #1890ff; } .dark-mode .custom-checkbox input[type="checkbox"]:disabled~label:before { background-color: transparent; border-color: rgba(255, 255, 255, 0.15); } .dark-mode .custom-checkbox input[type="checkbox"]:hover:disabled~label:before { background-color: transparent; border-color: rgba(255, 255, 255, 0.15); } .dark-mode .custom-checkbox input[type="checkbox"]:disabled:checked~label:before { background-color: #1890ff; border-color: #1890ff; } .dark-mode .custom-checkbox input[type="checkbox"]:hover:disabled:checked~label:before { background-color: #1890ff; border-color: #1890ff; } /* Radio */ .custom-radio { display: block; position: relative; line-height: 1.6rem; } .form-group .custom-radio { margin: 0.8rem 0 0 0; } .custom-radio input[type="radio"] { /* Hide the default */ position: absolute; opacity: 0; height: 0; width: 0; } .custom-radio label { display: inline-block; margin-bottom: 0; padding-left: 2.5rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .custom-radio label.blank { padding-left: 1.6rem; } .custom-radio label:before { content: ""; display: inline-block; position: absolute; height: 1.6rem; width: 1.6rem; top: 0; left: 0; background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 50%; } .custom-radio input[type="radio"]:hover~label:before { background-color: #ffffff; border-color: rgba(0, 0, 0, 0.4); } .custom-radio input[type="radio"]:focus~label:before { border-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6); -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6); box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6); } .custom-radio input[type="radio"]:checked~label:before { background-color: #1890ff; border-color: #1890ff; } .custom-radio input[type="radio"]:checked:focus~label:before { border-color: #1890ff; -moz-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3); -webkit-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3); box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3); } .dark-mode .custom-radio label:before { background-color: transparent; border-color: rgba(255, 255, 255, 0.15); } .dark-mode .custom-radio input[type="radio"]:hover~label:before { background-color: transparent; border-color: rgba(255, 255, 255, 0.3); } .dark-mode .custom-radio input[type="radio"]:focus~label:before { border-color: rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3); -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3); box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3); } .dark-mode .custom-radio input[type="radio"]:checked~label:before { background-color: #1890ff; border-color: #1890ff; } .dark-mode .custom-radio input[type="radio"]:checked:focus~label:before { border-color: #1890ff; -moz-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3); -webkit-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3); box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3); } .custom-radio label:after{ content: ""; position: absolute; display: none; top: 0.5rem; left: 0.5rem; width: 0.6rem; height: 0.6rem; background-color: #ffffff; border-radius: 50%; } .dark-mode .custom-radio label:after { border-color: #ffffff; } .custom-radio input[type="radio"]:checked~label:after { display: block; } .custom-radio input[type="radio"]:disabled~label { opacity: 0.6; cursor: not-allowed; } .custom-radio input[type="radio"]:disabled~label:before { background-color: #ffffff; border-color: rgba(0, 0, 0, 0.3); } .custom-radio input[type="radio"]:hover:disabled~label:before { background-color: #ffffff; border-color: rgba(0, 0, 0, 0.3); } .custom-radio input[type="radio"]:disabled:checked~label:before { background-color: #1890ff; border-color: #1890ff; } .custom-radio input[type="radio"]:hover:disabled:checked~label:before { background-color: #1890ff; border-color: #1890ff; } .dark-mode .custom-radio input[type="radio"]:disabled~label:before { background-color: transparent; border-color: rgba(255, 255, 255, 0.15); } .dark-mode .custom-radio input[type="radio"]:hover:disabled~label:before { background-color: transparent; border-color: rgba(255, 255, 255, 0.15); } .dark-mode .custom-radio input[type="radio"]:disabled:checked~label:before { background-color: #1890ff; border-color: #1890ff; } .dark-mode .custom-radio input[type="radio"]:hover:disabled:checked~label:before { background-color: #1890ff; border-color: #1890ff; } /* Switch */ .custom-switch { display: block; position: relative; line-height: 2rem; } .custom-switch input[type="checkbox"] { /* Hide the default */ position: absolute; opacity: 0; height: 0; width: 0; } .custom-switch label { display: inline-block; margin-bottom: 0; padding-left: calc(3.2rem + 0.8rem); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .custom-switch label.blank { padding-left: 3.2rem; } .custom-switch label:before { content: ""; display: inline-block; position: absolute; height: 2rem; width: 3.2rem; top: 0; left: 0; background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 2rem; } .custom-switch input[type="checkbox"]:hover~label:before { background-color: #ffffff; border-color: rgba(0, 0, 0, 0.4); } .custom-switch input[type="checkbox"]:focus~label:before { border-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6); -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6); box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6); } .custom-switch input[type="checkbox"]:checked~label:before { background-color: #1890ff; border-color: #1890ff; } .custom-switch input[type="checkbox"]:checked:focus~label:before { border-color: #1890ff; -moz-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3); -webkit-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3); box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3); } .dark-mode .custom-switch label:before { background-color: transparent; border-color: rgba(255, 255, 255, 0.15); } .dark-mode .custom-switch input[type="checkbox"]:hover~label:before { background-color: transparent; border-color: rgba(255, 255, 255, 0.3); } .dark-mode .custom-switch input[type="checkbox"]:focus~label:before { border-color: rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3); -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3); box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3); } .dark-mode .custom-switch input[type="checkbox"]:checked~label:before { background-color: #1890ff; border-color: #1890ff; } .dark-mode .custom-switch input[type="checkbox"]:checked:focus~label:before { border-color: #1890ff; -moz-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3); -webkit-box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3); box-shadow: 0 0 0 0.3rem rgba(24, 144, 255, 0.3); } .custom-switch label:after{ content: ""; position: absolute; height: 1.2rem; width: 1.2rem; top: 0.4rem; left: 0.5rem; background-color: rgba(0, 0, 0, 0.2); border: 0 solid rgba(0, 0, 0, 0.2); border-radius: 50%; -webkit-transition: left .1s; transition: left .1s; } .dark-mode .custom-switch label:after { background-color: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.15); } .custom-switch input[type="checkbox"]:checked~label:after { top: 0.4rem; left: calc(3.2rem - 1.2rem - 0.5rem); background-color: #ffffff; border-color: #ffffff; } .dark-mode .custom-switch input[type="checkbox"]:checked~label:after { background-color: #ffffff; border-color: #ffffff; } .custom-switch input[type="checkbox"]:disabled~label { opacity: 0.6; cursor: not-allowed; } .custom-switch input[type="checkbox"]:disabled~label:before { background-color: #ffffff; border-color: rgba(0, 0, 0, 0.3); } .custom-switch input[type="checkbox"]:hover:disabled~label:before { background-color: #ffffff; border-color: rgba(0, 0, 0, 0.3); } .custom-switch input[type="checkbox"]:disabled:checked~label:before { background-color: #1890ff; border-color: #1890ff; } .custom-switch input[type="checkbox"]:hover:disabled:checked~label:before { background-color: #1890ff; border-color: #1890ff; } .dark-mode .custom-switch input[type="checkbox"]:disabled~label:before { background-color: transparent; border-color: rgba(255, 255, 255, 0.15); } .dark-mode .custom-switch input[type="checkbox"]:hover:disabled~label:before { background-color: transparent; border-color: rgba(255, 255, 255, 0.15); } .dark-mode .custom-switch input[type="checkbox"]:disabled:checked~label:before { background-color: #1890ff; border-color: #1890ff; } .dark-mode .custom-switch input[type="checkbox"]:hover:disabled:checked~label:before { background-color: #1890ff; border-color: #1890ff; } /* Input file */ .custom-file { display: block; position: relative; } .custom-file input[type="file"] { /* Hide the default */ position: absolute; opacity: 0; height: 0; width: 0; z-index: -1; /* Needed to stop the default button from interfering in some browsers, such as Safari */ } .custom-file label { display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; height: 3.2rem; line-height: 3.2rem; padding: 0 1.5rem; color: rgba(0, 0, 0, 0.7); background-color: #ffffff; background-image: none; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.4rem; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); } .custom-file label:hover { color: rgba(0, 0, 0, 0.7); background-color: #f7f7f7; background-image: none; border-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); } .custom-file input[type="file"]:focus~label { color: rgba(0, 0, 0, 0.7); background-color: #ffffff; background-image: none; border-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6); -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6); box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.6); } .custom-file input[type="file"]:focus:hover~label { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: rgba(0, 0, 0, 0.7); background-color: #f7f7f7; background-image: none; } .dark-mode .custom-file label { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.05); background-image: none; border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); } .dark-mode .custom-file label:hover { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.1); background-image: none; border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); } .dark-mode .custom-file input[type="file"]:focus~label { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.05); background-image: none; border-color: rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3); -webkit-box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3); box-shadow: 0 0 0 0.2rem rgba(24, 144, 255, 0.3); } .dark-mode .custom-file input[type="file"]:focus:hover~label { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.1); background-image: none; } .custom-file input[type="file"]:disabled~label { opacity: 0.6; cursor: not-allowed; color: rgba(0, 0, 0, 0.7); background-color: #ffffff; background-image: none; border-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .custom-file:hover input[type="file"]:disabled~label { opacity: 0.6; cursor: not-allowed; color: rgba(0, 0, 0, 0.7); background-color: #ffffff; background-image: none; border-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .dark-mode .custom-file input[type="file"]:disabled~label { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.05); background-image: none; border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .dark-mode .custom-file:hover input[type="file"]:disabled~label { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.05); background-image: none; border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .custom-file input[type="file"]:disabled~.file-names { opacity: 0.6; pointer-events: none; } /* Invalid input file */ .form-group.is-invalid .custom-file label { color: rgba(0, 0, 0, 0.7); background-color: #ffffff; background-image: none; border-color: #ff4d4f; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); } .custom-file input[type="file"].is-invalid~label { color: rgba(0, 0, 0, 0.7); background-color: #ffffff; background-image: none; border-color: #ff4d4f; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); } .form-group.is-invalid .custom-file label:hover { color: rgba(0, 0, 0, 0.7); background-color: #f7f7f7; background-image: none; border-color: #ff4d4f; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); } .custom-file input[type="file"].is-invalid~label:hover { color: rgba(0, 0, 0, 0.7); background-color: #f7f7f7; background-image: none; border-color: #ff4d4f; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); } .form-group.is-invalid .custom-file input[type="file"]:focus~label { color: rgba(0, 0, 0, 0.7); background-color: #ffffff; background-image: none; border-color: #f8d0d9; -moz-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6); -webkit-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6); box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6); } .custom-file input[type="file"].is-invalid:focus~label { color: rgba(0, 0, 0, 0.7); background-color: #ffffff; background-image: none; border-color: #f8d0d9; -moz-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6); -webkit-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6); box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.6); } .form-group.is-invalid .custom-file input[type="file"]:focus:hover~label { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: rgba(0, 0, 0, 0.7); background-color: #f7f7f7; background-image: none; } .custom-file input[type="file"].is-invalid:focus:hover~label { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: rgba(0, 0, 0, 0.7); background-color: #f7f7f7; background-image: none; } .dark-mode .form-group.is-invalid .custom-file label { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.05); background-image: none; border-color: #ff4d4f; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); } .dark-mode .custom-file input[type="file"].is-invalid~label { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.05); background-image: none; border-color: #ff4d4f; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); } .dark-mode .form-group.is-invalid .custom-file label:hover { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.1); background-image: none; border-color: #ff4d4f; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); } .dark-mode .custom-file input[type="file"].is-invalid~label:hover { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.1); background-image: none; border-color: #ff4d4f; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); } .dark-mode .form-group.is-invalid .custom-file input[type="file"]:focus~label { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.05); background-image: none; border-color: #ff4d4f; -moz-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3); -webkit-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3); box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3); } .dark-mode .custom-file input[type="file"].is-invalid:focus~label { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.05); background-image: none; border-color: #ff4d4f; -moz-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3); -webkit-box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3); box-shadow: 0 0 0 0.2rem rgba(245, 34, 45, 0.3); } .dark-mode .form-group.is-invalid .custom-file input[type="file"]:focus:hover~label { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.1); background-image: none; } .dark-mode .custom-file input[type="file"].is-invalid:focus:hover~label { /* Only text color and background properties are overridden, while the border color, box shadow, and the outline of the focus selector is kept. */ color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.1); background-image: none; } /* Input group */ .input-group { position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: stretch; align-items: stretch; width: 100%; } .input-group > .form-control { position: relative; -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; margin-bottom: 0; } .input-group-prepend, .input-group-append { display: -ms-flexbox; display: flex; } .input-group-prepend > .btn, .input-group-append > .btn { position: relative; } .input-group-sm > .form-control { height: 2.6rem; padding-left: 0.8rem; padding-right: 0.8rem; font-size: 1.2rem; } .input-group-lg > .form-control { height: 4rem; padding-left: 0.8rem; padding-right: 0.8rem; font-size: 1.8rem; } /* Input group text */ .input-group-text { white-space: nowrap; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; text-align: center; height: 100%; padding-left: 0.8rem; padding-right: 0.8rem; color: rgba(0, 0, 0, 0.85); background-color: #ecf0f1; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.4rem; } .dark-mode .input-group-text { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.1); border-color: rgba(0, 0, 0, 0.3); } .input-group-sm .input-group-text { padding-left: 0.8rem; padding-right: 0.8rem; font-size: 1.2rem; } .input-group-lg .input-group-text { padding-left: 0.8rem; padding-right: 0.8rem; font-size: 1.8rem; } /* Input group button */ .input-group-sm > .input-group-prepend > .btn { height: 2.6rem; line-height: 2.6rem; padding: 0 1rem; font-size: 1.2rem; } .input-group-sm > .input-group-append > .btn { height: 2.6rem; line-height: 2.6rem; padding: 0 1rem; font-size: 1.2rem; } .input-group-lg > .input-group-prepend > .btn { height: 4rem; line-height: 4rem; padding: 0 2rem; font-size: 1.8rem; } .input-group-lg > .input-group-append > .btn { height: 4rem; line-height: 4rem; padding: 0 2rem; font-size: 1.8rem; } .input-group-sm > .input-group-prepend > .btn-square { width: 2.6rem; padding-left: 0; padding-right: 0; } .input-group-sm > .input-group-append > .btn-square { width: 2.6rem; padding-left: 0; padding-right: 0; } .input-group-lg > .input-group-prepend > .btn-square { width: 4rem; padding-left: 0; padding-right: 0; } .input-group-lg > .input-group-append > .btn-square { width: 4rem; padding-left: 0; padding-right: 0; } .input-group-sm > .input-group-prepend > .btn-rounded { border-radius: 2.6rem; } .input-group-sm > .input-group-append > .btn-rounded { border-radius: 2.6rem; } .input-group-lg > .input-group-prepend > .btn-rounded { border-radius: 4rem; } .input-group-lg > .input-group-append > .btn-rounded { border-radius: 4rem; } /* Input group borders */ .input-group > .form-control:not(:first-child), .input-group-prepend:not(:first-child) > .input-group-text, .input-group-append:not(:first-child) > .input-group-text, .input-group-prepend:not(:first-child) > .btn, .input-group-append:not(:first-child) > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group > .form-control:not(:last-child), .input-group-prepend:not(:last-child) > .input-group-text, .input-group-append:not(:last-child) > .input-group-text, .input-group-prepend:not(:last-child) > .btn, .input-group-append:not(:last-child) > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group > .form-control:focus, .input-group-prepend > .btn:focus, .input-group-prepend > .btn.active, .input-group-append > .btn:focus, .input-group-append > .btn.active { z-index: 1; } .input-group > .form-control:not(:first-child) { margin-left: calc((-1) * 1px); } .input-group-prepend:not(:first-child) > .input-group-text { margin-left: calc((-1) * 1px); } .input-group-append:not(:first-child) > .input-group-text { margin-left: calc((-1) * 1px); } .input-group-prepend:not(:first-child) > .btn { margin-left: calc((-1) * 1px); } .input-group-append:not(:first-child) > .btn { margin-left: calc((-1) * 1px); } /* Buttons (only border colors) */ .input-group-prepend > .btn { border-color: rgba(0, 0, 0, 0.2); } .input-group-append > .btn { border-color: rgba(0, 0, 0, 0.2); } .input-group-prepend > .btn:hover { border-color: rgba(0, 0, 0, 0.2); } .input-group-append > .btn:hover { border-color: rgba(0, 0, 0, 0.2); } .input-group-prepend > .btn:focus { border-color: rgba(0, 0, 0, 0.2); } .input-group-append > .btn:focus { border-color: rgba(0, 0, 0, 0.2); } .input-group-prepend > .btn.active { border-color: rgba(0, 0, 0, 0.2); } .input-group-append > .btn.active { border-color: rgba(0, 0, 0, 0.2); } .dark-mode .input-group-prepend > .btn { border-color: rgba(0, 0, 0, 0.3); } .dark-mode .input-group-append > .btn { border-color: rgba(0, 0, 0, 0.3); } .dark-mode .input-group-prepend > .btn:hover { border-color: rgba(0, 0, 0, 0.3); } .dark-mode .input-group-append > .btn:hover { border-color: rgba(0, 0, 0, 0.3); } .dark-mode .input-group-prepend > .btn:focus { border-color: rgba(0, 0, 0, 0.3); } .dark-mode .input-group-append > .btn:focus { border-color: rgba(0, 0, 0, 0.3); } .dark-mode .input-group-prepend > .btn.active { border-color: rgba(0, 0, 0, 0.3); } .dark-mode .input-group-append > .btn.active { border-color: rgba(0, 0, 0, 0.3); } /* Link button */ .input-group-prepend > .btn.btn-link { border-color: rgba(0, 0, 0, 0.2); } .input-group-append > .btn.btn-link { border-color: rgba(0, 0, 0, 0.2); } .input-group-prepend > .btn.btn-link:hover { border-color: rgba(0, 0, 0, 0.2); } .input-group-append > .btn.btn-link:hover { border-color: rgba(0, 0, 0, 0.2); } .input-group-prepend > .btn.btn-link:focus { border-color: rgba(0, 0, 0, 0.2); } .input-group-append > .btn.btn-link:focus { border-color: rgba(0, 0, 0, 0.2); } .input-group-prepend > .btn.btn-link.active { border-color: rgba(0, 0, 0, 0.2); } .input-group-append > .btn.btn-link.active { border-color: rgba(0, 0, 0, 0.2); } .dark-mode .input-group-prepend > .btn.btn-link { border-color: rgba(0, 0, 0, 0.2); } .dark-mode .input-group-append > .btn.btn-link { border-color: rgba(0, 0, 0, 0.2); } .dark-mode .input-group-prepend > .btn.btn-link:hover { border-color: rgba(0, 0, 0, 0.2); } .dark-mode .input-group-append > .btn.btn-link:hover { border-color: rgba(0, 0, 0, 0.2); } .dark-mode .input-group-prepend > .btn.btn-link:focus { border-color: rgba(0, 0, 0, 0.2); } .dark-mode .input-group-append > .btn.btn-link:focus { border-color: rgba(0, 0, 0, 0.2); } .dark-mode .input-group-prepend > .btn.btn-link.active { border-color: rgba(0, 0, 0, 0.2); } .dark-mode .input-group-append > .btn.btn-link.active { border-color: rgba(0, 0, 0, 0.2); } /* Primary button */ .input-group-prepend > .btn.btn-primary { border-color: #1890ff; } .input-group-append > .btn.btn-primary { border-color: #1890ff; } .input-group-prepend > .btn.btn-primary:hover { border-color: #45a3fb; } .input-group-append > .btn.btn-primary:hover { border-color: #45a3fb; } .input-group-prepend > .btn.btn-primary:focus { border-color: #1890ff; } .input-group-append > .btn.btn-primary:focus { border-color: #1890ff; } .input-group-prepend > .btn.btn-primary.active { border-color: #1890ff; } .input-group-append > .btn.btn-primary.active { border-color: #1890ff; } .dark-mode .input-group-prepend > .btn.btn-primary { border-color: #1890ff; } .dark-mode .input-group-append > .btn.btn-primary { border-color: #1890ff; } .dark-mode .input-group-prepend > .btn.btn-primary:hover { border-color: #45a3fb; } .dark-mode .input-group-append > .btn.btn-primary:hover { border-color: #45a3fb; } .dark-mode .input-group-prepend > .btn.btn-primary:focus { border-color: #1890ff; } .dark-mode .input-group-append > .btn.btn-primary:focus { border-color: #1890ff; } .dark-mode .input-group-prepend > .btn.btn-primary.active { border-color: #1890ff; } .dark-mode .input-group-append > .btn.btn-primary.active { border-color: #1890ff; } /* Success button */ .input-group-prepend > .btn.btn-success { border-color: #0be881; } .input-group-append > .btn.btn-success { border-color: #0be881; } .input-group-prepend > .btn.btn-success:hover { border-color: #81eea8; } .input-group-append > .btn.btn-success:hover { border-color: #81eea8; } .input-group-prepend > .btn.btn-success:focus { border-color: #0be881; } .input-group-append > .btn.btn-success:focus { border-color: #0be881; } .input-group-prepend > .btn.btn-success.active { border-color: #0be881; } .input-group-append > .btn.btn-success.active { border-color: #0be881; } .dark-mode .input-group-prepend > .btn.btn-success { border-color: #0be881; } .dark-mode .input-group-append > .btn.btn-success { border-color: #0be881; } .dark-mode .input-group-prepend > .btn.btn-success:hover { border-color: #81eea8; } .dark-mode .input-group-append > .btn.btn-success:hover { border-color: #81eea8; } .dark-mode .input-group-prepend > .btn.btn-success:focus { border-color: #0be881; } .dark-mode .input-group-append > .btn.btn-success:focus { border-color: #0be881; } .dark-mode .input-group-prepend > .btn.btn-success.active { border-color: #0be881; } .dark-mode .input-group-append > .btn.btn-success.active { border-color: #0be881; } /* Secondary button */ .input-group-prepend > .btn.btn-secondary { border-color: #ffcf00; } .input-group-append > .btn.btn-secondary { border-color: #ffcf00; } .input-group-prepend > .btn.btn-secondary:hover { border-color: #ffe04d; } .input-group-append > .btn.btn-secondary:hover { border-color: #ffe04d; } .input-group-prepend > .btn.btn-secondary:focus { border-color: #ffcf00; } .input-group-append > .btn.btn-secondary:focus { border-color: #ffcf00; } .input-group-prepend > .btn.btn-secondary.active { border-color: #ffcf00; } .input-group-append > .btn.btn-secondary.active { border-color: #ffcf00; } .dark-mode .input-group-prepend > .btn.btn-secondary { border-color: #ffcf00; } .dark-mode .input-group-append > .btn.btn-secondary { border-color: #ffcf00; } .dark-mode .input-group-prepend > .btn.btn-secondary:hover { border-color: #ffe04d; } .dark-mode .input-group-append > .btn.btn-secondary:hover { border-color: #ffe04d; } .dark-mode .input-group-prepend > .btn.btn-secondary:focus { border-color: #ffcf00; } .dark-mode .input-group-append > .btn.btn-secondary:focus { border-color: #ffcf00; } .dark-mode .input-group-prepend > .btn.btn-secondary.active { border-color: #ffcf00; } .dark-mode .input-group-append > .btn.btn-secondary.active { border-color: #ffcf00; } /* Danger button */ .input-group-prepend > .btn.btn-danger { border-color: #ff4d4f; } .input-group-append > .btn.btn-danger { border-color: #ff4d4f; } .input-group-prepend > .btn.btn-danger:hover { border-color: #ed586c; } .input-group-append > .btn.btn-danger:hover { border-color: #ed586c; } .input-group-prepend > .btn.btn-danger:focus { border-color: #ff4d4f; } .input-group-append > .btn.btn-danger:focus { border-color: #ff4d4f; } .input-group-prepend > .btn.btn-danger.active { border-color: #ff4d4f; } .input-group-append > .btn.btn-danger.active { border-color: #ff4d4f; } .dark-mode .input-group-prepend > .btn.btn-danger { border-color: #ff4d4f; } .dark-mode .input-group-append > .btn.btn-danger { border-color: #ff4d4f; } .dark-mode .input-group-prepend > .btn.btn-danger:hover { border-color: #ed586c; } .dark-mode .input-group-append > .btn.btn-danger:hover { border-color: #ed586c; } .dark-mode .input-group-prepend > .btn.btn-danger:focus { border-color: #ff4d4f; } .dark-mode .input-group-append > .btn.btn-danger:focus { border-color: #ff4d4f; } .dark-mode .input-group-prepend > .btn.btn-danger.active { border-color: #ff4d4f; } .dark-mode .input-group-append > .btn.btn-danger.active { border-color: #ff4d4f; } /* ------------------------------------------------------------------------------- 12. Dropdown [hm-12] ------------------------------------------------------------------------------- */ .dropdown { display: inline-block; position: relative; } /* Dropdown menu */ .dropdown-menu { position: absolute; visibility: hidden; z-index: 10; text-align: left; width: auto; min-width: 16.8rem; padding: 0.4rem; color: rgba(0, 0, 0, 0.85); background-color: #ffffff; background-image: none; border: 1px solid #bababc; border-radius: 0.4rem; -moz-box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.15); box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.15); } .dark-mode .dropdown-menu { color: rgba(255, 255, 255, 0.8); background-color: #191c20; background-image: none; border-color: #111417; -moz-box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.4); box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.4); } /* Arrows (::before for border, ::after for background) */ .dropdown.with-arrow.show .dropdown-menu::before, .dropdown.with-arrow.show .dropdown-menu::after, .dropdown.with-arrow.toggle-on-hover:hover .dropdown-menu::before, .dropdown.with-arrow.toggle-on-hover:hover .dropdown-menu::after { content: " "; width: 0; height: 0; display: inline-block; position: absolute; z-index: 10; } /* Dropdown content */ .dropdown-content { display: block; padding: 1.2rem; } .dropdown-content > ul, .dropdown-content > ol { margin-left: 0; } /* Dropdown divider */ .dropdown-divider { height: 1px; background-color: rgba(0, 0, 0, 0.05); } .dark-mode .dropdown-divider { background-color: rgba(255, 255, 255, 0.05); } /* Dropdown item */ .dropdown-item { display: block; white-space: nowrap; padding: 0.6rem 1.2rem; border-radius: 0.2rem; color: rgba(0, 0, 0, 0.85); background-color: transparent; } .dropdown-item:hover { text-decoration: none; color: rgba(0, 0, 0, 0.85); background-color: rgba(0, 0, 0, 0.025); } .dark-mode .dropdown-item { color: rgba(255, 255, 255, 0.8); background-color: transparent; } .dark-mode .dropdown-item:hover { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.025); } /* Dropdown header */ .dropdown-header { font-size: 1.4rem; font-weight: 500; padding: 0.6rem 1.2rem; margin: 0; color: rgba(0, 0, 0, 0.6); } .dark-mode .dropdown-header { color: rgba(255, 255, 255, 0.6); } /* Normal dropdown */ .dropdown:not(.dropup):not(.dropright):not(.dropleft) .dropdown-menu { bottom: 50%; transform: translateY(50%); } .dropdown:not(.dropup):not(.dropright):not(.dropleft) .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right) { left: 0; } .dropdown:not(.dropup):not(.dropright):not(.dropleft) .dropdown-menu.dropdown-menu-center { left: 50%; transform: translate(-50%, 50%); } .dropdown:not(.dropup):not(.dropright):not(.dropleft) .dropdown-menu.dropdown-menu-right { right: 0; } .dropdown:not(.dropup):not(.dropright):not(.dropleft).show .dropdown-menu, .dropdown:not(.dropup):not(.dropright):not(.dropleft).toggle-on-hover:hover .dropdown-menu { bottom: 0; transform: translateY(100%); visibility: visible; -webkit-transition: bottom 0.1s, transform 0.1s, visibility 0.1s; transition: bottom 0.1s, transform 0.1s, visibility 0.1s; } .dropdown:not(.dropup):not(.dropright):not(.dropleft).show .dropdown-menu.dropdown-menu-center, .dropdown:not(.dropup):not(.dropright):not(.dropleft).toggle-on-hover:hover .dropdown-menu.dropdown-menu-center { transform: translate(-50%, 100%); } /* Normal dropdown arrows (::before for border, ::after for background) */ .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu { bottom: calc(0.8rem * -1); } .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu { bottom: calc(0.8rem * -1); } .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu::before { border-left: 0.8rem solid transparent; border-right: 0.8rem solid transparent; border-bottom: 0.8rem solid #bababc; top: calc(0.8rem * -1); } .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu::after { border-left: 0.8rem solid transparent; border-right: 0.8rem solid transparent; border-bottom: 0.8rem solid #bababc; top: calc(0.8rem * -1); } .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu::before { border-left: 0.8rem solid transparent; border-right: 0.8rem solid transparent; border-bottom: 0.8rem solid #bababc; top: calc(0.8rem * -1); } .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu::after { border-left: 0.8rem solid transparent; border-right: 0.8rem solid transparent; border-bottom: 0.8rem solid #bababc; top: calc(0.8rem * -1); } .dark-mode .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu::before { border-bottom-color: #111417; } .dark-mode .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu::after { border-bottom-color: #111417; } .dark-mode .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu::before { border-bottom-color: #111417; } .dark-mode .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu::after { border-bottom-color: #111417; } .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu::after { border-bottom-color: #ffffff; top: calc(0.2rem + (0.8rem * -1)); } .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu::after { border-bottom-color: #ffffff; top: calc(0.2rem + (0.8rem * -1)); } .dark-mode .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu::after { border-bottom-color: #191c20; } .dark-mode .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu::after { border-bottom-color: #191c20; } .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::before { left: 0.8rem; } .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::after { left: 0.8rem; } .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::before { left: 0.8rem; } .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::after { left: 0.8rem; } .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::before { left: calc(50% - 0.8rem); } .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::after { left: calc(50% - 0.8rem); } .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu.dropdown-menu-center::before { left: calc(50% - 0.8rem); } .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu.dropdown-menu-center::after { left: calc(50% - 0.8rem); } .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-right::before { right: 0.8rem; } .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-right::after { right: 0.8rem; } .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu.dropdown-menu-right::before { right: 0.8rem; } .dropdown:not(.dropup):not(.dropright):not(.dropleft).with-arrow.show .dropdown-menu.dropdown-menu-right::after { right: 0.8rem; } /* Dropup */ .dropdown.dropup .dropdown-menu { top: 50%; transform: translateY(-50%); } .dropdown.dropup .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right) { left: 0; } .dropdown.dropup .dropdown-menu.dropdown-menu-center { left: 50%; transform: translate(-50%, -50%); } .dropdown.dropup .dropdown-menu.dropdown-menu-right { right: 0; } .dropdown.dropup.show .dropdown-menu, .dropdown.dropup.toggle-on-hover:hover .dropdown-menu { top: 0; transform: translateY(-100%); visibility: visible; -webkit-transition: top 0.1s, transform 0.1s, visibility 0.1s; transition: top 0.1s, transform 0.1s, visibility 0.1s; } .dropdown.dropup.show .dropdown-menu.dropdown-menu-center, .dropdown.dropup.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center { transform: translate(-50%, -100%); } /* Dropup arrows (::before for border, ::after for background) */ .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu { top: calc(0.8rem * -1); } .dropdown.dropup.with-arrow.show .dropdown-menu { top: calc(0.8rem * -1); } .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu::before { border-left: 0.8rem solid transparent; border-right: 0.8rem solid transparent; border-top: 0.8rem solid #bababc; bottom: calc(0.8rem * -1); } .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu::after { border-left: 0.8rem solid transparent; border-right: 0.8rem solid transparent; border-top: 0.8rem solid #bababc; bottom: calc(0.8rem * -1); } .dropdown.dropup.with-arrow.show .dropdown-menu::before { border-left: 0.8rem solid transparent; border-right: 0.8rem solid transparent; border-top: 0.8rem solid #bababc; bottom: calc(0.8rem * -1); } .dropdown.dropup.with-arrow.show .dropdown-menu::after { border-left: 0.8rem solid transparent; border-right: 0.8rem solid transparent; border-top: 0.8rem solid #bababc; bottom: calc(0.8rem * -1); } .dark-mode .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu::before { border-top-color: #111417; } .dark-mode .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu::after { border-top-color: #111417; } .dark-mode .dropdown.dropup.with-arrow.show .dropdown-menu::before { border-top-color: #111417; } .dark-mode .dropdown.dropup.with-arrow.show .dropdown-menu::after { border-top-color: #111417; } .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu::after { border-top-color: #ffffff; bottom: calc(0.2rem + (0.8rem * -1)); } .dropdown.dropup.with-arrow.show .dropdown-menu::after { border-top-color: #ffffff; bottom: calc(0.2rem + (0.8rem * -1)); } .dark-mode .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu::after { border-top-color: #191c20; } .dark-mode .dropdown.dropup.with-arrow.show .dropdown-menu::after { border-top-color: #191c20; } .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::before { left: 0.8rem; } .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::after { left: 0.8rem; } .dropdown.dropup.with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::before { left: 0.8rem; } .dropdown.dropup.with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-right)::after { left: 0.8rem; } .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::before { left: calc(50% - 0.8rem); } .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::after { left: calc(50% - 0.8rem); } .dropdown.dropup.with-arrow.show .dropdown-menu.dropdown-menu-center::before { left: calc(50% - 0.8rem); } .dropdown.dropup.with-arrow.show .dropdown-menu.dropdown-menu-center::after { left: calc(50% - 0.8rem); } .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-right::before { right: 0.8rem; } .dropdown.dropup.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-right::after { right: 0.8rem; } .dropdown.dropup.with-arrow.show .dropdown-menu.dropdown-menu-right::before { right: 0.8rem; } .dropdown.dropup.with-arrow.show .dropdown-menu.dropdown-menu-right::after { right: 0.8rem; } /* Dropright */ .dropdown.dropright .dropdown-menu { right: 50%; transform: translateX(50%); } .dropdown.dropright .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up) { top: 0; } .dropdown.dropright .dropdown-menu.dropdown-menu-center { top: 50%; transform: translate(50%, -50%); } .dropdown.dropright .dropdown-menu.dropdown-menu-up { bottom: 0; } .dropdown.dropright.show .dropdown-menu, .dropdown.dropright.toggle-on-hover:hover .dropdown-menu { right: 0; transform: translateX(100%); visibility: visible; -webkit-transition: right 0.1s, transform 0.1s, visibility 0.1s; transition: right 0.1s, transform 0.1s, visibility 0.1s; } .dropdown.dropright.show .dropdown-menu.dropdown-menu-center, .dropdown.dropright.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center { transform: translate(100%, -50%); } /* Dropright arrows (::before for border, ::after for background) */ .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu { right: calc(0.8rem * -1); } .dropdown.dropright.with-arrow.show .dropdown-menu { right: calc(0.8rem * -1); } .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu::before { border-top: 0.8rem solid transparent; border-bottom: 0.8rem solid transparent; border-right: 0.8rem solid #bababc; left: calc(0.8rem * -1); } .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu::after { border-top: 0.8rem solid transparent; border-bottom: 0.8rem solid transparent; border-right: 0.8rem solid #bababc; left: calc(0.8rem * -1); } .dropdown.dropright.with-arrow.show .dropdown-menu::before { border-top: 0.8rem solid transparent; border-bottom: 0.8rem solid transparent; border-right: 0.8rem solid #bababc; left: calc(0.8rem * -1); } .dropdown.dropright.with-arrow.show .dropdown-menu::after { border-top: 0.8rem solid transparent; border-bottom: 0.8rem solid transparent; border-right: 0.8rem solid #bababc; left: calc(0.8rem * -1); } .dark-mode .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu::before { border-right-color: #111417; } .dark-mode .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu::after { border-right-color: #111417; } .dark-mode .dropdown.dropright.with-arrow.show .dropdown-menu::before { border-right-color: #111417; } .dark-mode .dropdown.dropright.with-arrow.show .dropdown-menu::after { border-right-color: #111417; } .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu::after { border-right-color: #ffffff; left: calc(0.2rem + (0.8rem * -1)); } .dropdown.dropright.with-arrow.show .dropdown-menu::after { border-right-color: #ffffff; left: calc(0.2rem + (0.8rem * -1)); } .dark-mode .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu::after { border-right-color: #191c20; } .dark-mode .dropdown.dropright.with-arrow.show .dropdown-menu::after { border-right-color: #191c20; } .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::before { top: 0.8rem; } .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::after { top: 0.8rem; } .dropdown.dropright.with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::before { top: 0.8rem; } .dropdown.dropright.with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::after { top: 0.8rem; } .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::before { top: calc(50% - 0.8rem); } .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::after { top: calc(50% - 0.8rem); } .dropdown.dropright.with-arrow.show .dropdown-menu.dropdown-menu-center::before { top: calc(50% - 0.8rem); } .dropdown.dropright.with-arrow.show .dropdown-menu.dropdown-menu-center::after { top: calc(50% - 0.8rem); } .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-up::before { bottom: 0.8rem; } .dropdown.dropright.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-up::after { bottom: 0.8rem; } .dropdown.dropright.with-arrow.show .dropdown-menu.dropdown-menu-up::before { bottom: 0.8rem; } .dropdown.dropright.with-arrow.show .dropdown-menu.dropdown-menu-up::after { bottom: 0.8rem; } /* Dropleft */ .dropdown.dropleft .dropdown-menu { left: 50%; transform: translateX(-50%); } .dropdown.dropleft .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up) { top: 0; } .dropdown.dropleft .dropdown-menu.dropdown-menu-center { top: 50%; transform: translate(-50%, -50%); } .dropdown.dropleft .dropdown-menu.dropdown-menu-up { bottom: 0; } .dropdown.dropleft.show .dropdown-menu, .dropdown.dropleft.toggle-on-hover:hover .dropdown-menu { left: 0; transform: translateX(-100%); visibility: visible; -webkit-transition: left 0.1s, transform 0.1s, visibility 0.1s; transition: left 0.1s, transform 0.1s, visibility 0.1s; } .dropdown.dropleft.show .dropdown-menu.dropdown-menu-center, .dropdown.dropleft.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center { transform: translate(-100%, -50%); } /* Dropleft arrows (::before for border, ::after for background) */ .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu { left: calc(0.8rem * -1); } .dropdown.dropleft.with-arrow.show .dropdown-menu { left: calc(0.8rem * -1); } .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu::before { border-top: 0.8rem solid transparent; border-bottom: 0.8rem solid transparent; border-left: 0.8rem solid #bababc; right: calc(0.8rem * -1); } .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu::after { border-top: 0.8rem solid transparent; border-bottom: 0.8rem solid transparent; border-left: 0.8rem solid #bababc; right: calc(0.8rem * -1); } .dropdown.dropleft.with-arrow.show .dropdown-menu::before { border-top: 0.8rem solid transparent; border-bottom: 0.8rem solid transparent; border-left: 0.8rem solid #bababc; right: calc(0.8rem * -1); } .dropdown.dropleft.with-arrow.show .dropdown-menu::after { border-top: 0.8rem solid transparent; border-bottom: 0.8rem solid transparent; border-left: 0.8rem solid #bababc; right: calc(0.8rem * -1); } .dark-mode .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu::before { border-left-color: #111417; } .dark-mode .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu::after { border-left-color: #111417; } .dark-mode .dropdown.dropleft.with-arrow.show .dropdown-menu::before { border-left-color: #111417; } .dark-mode .dropdown.dropleft.with-arrow.show .dropdown-menu::after { border-left-color: #111417; } .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu::after { border-left-color: #ffffff; right: calc(0.2rem + (0.8rem * -1)); } .dropdown.dropleft.with-arrow.show .dropdown-menu::after { border-left-color: #ffffff; right: calc(0.2rem + (0.8rem * -1)); } .dark-mode .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu::after { border-left-color: #191c20; } .dark-mode .dropdown.dropleft.with-arrow.show .dropdown-menu::after { border-left-color: #191c20; } .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::before { top: 0.8rem; } .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::after { top: 0.8rem; } .dropdown.dropleft.with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::before { top: 0.8rem; } .dropdown.dropleft.with-arrow.show .dropdown-menu:not(.dropdown-menu-center):not(.dropdown-menu-up)::after { top: 0.8rem; } .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::before { top: calc(50% - 0.8rem); } .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-center::after { top: calc(50% - 0.8rem); } .dropdown.dropleft.with-arrow.show .dropdown-menu.dropdown-menu-center::before { top: calc(50% - 0.8rem); } .dropdown.dropleft.with-arrow.show .dropdown-menu.dropdown-menu-center::after { top: calc(50% - 0.8rem); } .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-up::before { bottom: 0.8rem; } .dropdown.dropleft.with-arrow.toggle-on-hover:hover .dropdown-menu.dropdown-menu-up::after { bottom: 0.8rem; } .dropdown.dropleft.with-arrow.show .dropdown-menu.dropdown-menu-up::before { bottom: 0.8rem; } .dropdown.dropleft.with-arrow.show .dropdown-menu.dropdown-menu-up::after { bottom: 0.8rem; } /* ------------------------------------------------------------------------------- 13. Modal [hm-13] ------------------------------------------------------------------------------- */ .modal { position: absolute; top: -100%; left: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.8); -webkit-transition: all .4s cubic-bezier(.25, .8, .25, 1); transition: all .4s cubic-bezier(.25, .8, .25, 1); z-index: 99; outline: none; } .dark-mode .modal { background-color: rgba(0, 0, 0, 0.95); } .modal-dialog { position: absolute; display: -ms-flexbox; display: flex; flex-direction: column; top: -100%; left: 0; width: 100%; height: 100%; overflow: auto; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* This hack corrects the scrollable modal content on IE. */ .modal.ie-scroll-fix .modal-dialog { display: block; } } .modal-content { margin: auto; width: 40rem; max-width: 100%; padding: 3rem; color: rgba(0, 0, 0, 0.85); background-color: #ffffff; background-image: none; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.4rem; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .dark-mode .modal-content { color: rgba(255, 255, 255, 0.8); background-color: #191c20; background-image: none; border-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } @media (max-width: 576px) { .modal-content { padding: 2rem; } } .modal-title { font-size: 2rem; font-weight: 500; margin-top: 0; } .modal-content-media, .dark-mode .modal-content-media { padding: 0; background-color: transparent; border: none; border-radius: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .modal-content-media img, .modal-content-media video { display: block; } .modal-full .modal-content { width: 100%; border: none; border-radius: 0; padding: 3rem; color: rgba(0, 0, 0, 0.85); background-color: #ffffff; background-image: none; } .dark-mode .modal-full .modal-content { color: rgba(255, 255, 255, 0.8); background-color: #191c20; background-image: none; } @media (max-width: 576px) { .modal-full .modal-content { padding: 2rem; } } .modal-content .close { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; position: fixed; cursor: pointer; top: -100%; left: 1rem; z-index: 10; padding: 0; -webkit-transition: all .4s cubic-bezier(.25, .8, .25, 1); transition: all .4s cubic-bezier(.25, .8, .25, 1); font-size: 2rem; width: 4rem; height: 4rem; color: #ffffff; background-color: rgba(0, 0, 0, 0.7); border-radius: 50%; border-color: transparent; } .modal-content .close:hover { text-decoration: none; color: #ffffff; background-color: rgba(0, 0, 0, 0.6); } .dark-mode .modal-content .close { color: #ffffff; background-color: rgba(255, 255, 255, 0.1); } .dark-mode .modal-content .close:hover { color: #ffffff; background-color: rgba(255, 255, 255, 0.2); } .modal-content .close:focus { -webkit-transition: none; transition: none; outline: 2px solid rgba(24, 144, 255, 0.3); outline-offset: 0.2rem; } .dark-mode .modal-content .close:focus { outline-color: rgba(24, 144, 255, 0.3); } /* Showing modals */ .modal:target, .modal.show { top: 0; } .modal:target ~ .page-wrapper .sidebar, .modal:target ~ .page-wrapper .content-wrapper, .modal.show ~ .page-wrapper .sidebar, .modal.show ~ .page-wrapper .content-wrapper { overflow: hidden; } .modal:target .modal-dialog, .modal.show .modal-dialog { top: 0; } .modal:target .modal-content .close, .modal.show .modal-content .close { top: 1rem; } /* ------------------------------------------------------------------------------- 14. Alerts [hm-14] ------------------------------------------------------------------------------- */ .alert { position: relative; padding: 1rem 2rem; color: rgba(0, 0, 0, 0.85); background-color: #ffffff; background-image: none; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.4rem; } .dark-mode .alert { color: rgba(255, 255, 255, 0.8); background-color: #191c20; background-image: none; border-color: rgba(255, 255, 255, 0.1); } .alert-heading { color: inherit; font-size: 1.6rem; font-weight: 500; margin: 0 0 0.5rem 0; } .dark-mode .alert-heading { color: inherit; font-size: 1.6rem; font-weight: 500; margin: 0 0 0.5rem 0; } .alert-link, .dark-mode .alert-link { cursor: pointer; color: inherit; text-decoration: underline; } .alert-link:hover, .dark-mode .alert-link:hover { color: inherit; opacity: 0.75; } .alert .close { position: absolute; top: 0; right: 0; cursor: pointer; color: inherit; padding: 0.4rem 0.6rem; line-height: 1; font-size: 1.6rem; background-color: transparent; border-color: transparent; } .alert .close:focus { outline: 2px solid rgba(0, 0, 0, 0.5); outline-offset: 0.2rem; } .dark-mode .alert .close:focus { outline-color: rgba(255, 255, 255, 0.5); } .alert.dispose { display: none; } /* Sticky alerts */ .sticky-alerts .alert { display: none; width: 27rem; margin-top: 1rem; right: -50rem; /* Hidden by default */ -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.045); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.045); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.045); } .sticky-alerts .alert.show { right: 0; -webkit-transition: right .4s cubic-bezier(.25, .8, .25, 1); transition: right .4s cubic-bezier(.25, .8, .25, 1); } .sticky-alerts .alert.fade { visibility: hidden; opacity: 0; -webkit-transition: visibility 0s .4s, opacity .4s linear; transition: visibility 0s .4s, opacity .4s linear; } .sticky-alerts .alert.alert-block { display: block; } .sticky-alerts .alert.alert-block.dispose { display: none; } /* Filled alerts (primary, success, secondary, danger) */ /* Light mode */ .alert.alert-primary.filled { color: #ffffff; background-color: #1890ff; background-image: none; border-color: #1890ff; } .alert.alert-primary.filled-lm { color: #ffffff; background-color: #1890ff; background-image: none; border-color: #1890ff; } .alert.alert-success.filled { color: rgba(0, 0, 0, 0.85); background-color: #0be881; background-image: none; border-color: #0be881; } .alert.alert-success.filled-lm { color: rgba(0, 0, 0, 0.85); background-color: #0be881; background-image: none; border-color: #0be881; } .alert.alert-secondary.filled { color: rgba(0, 0, 0, 0.85); background-color: #ffcf00; background-image: none; border-color: #ffcf00; } .alert.alert-secondary.filled-lm { color: rgba(0, 0, 0, 0.85); background-color: #ffcf00; background-image: none; border-color: #ffcf00; } .alert.alert-danger.filled { color: #ffffff; background-color: #ff4d4f; background-image: none; border-color: #ff4d4f; } .alert.alert-danger.filled-lm { color: #ffffff; background-color: #ff4d4f; background-image: none; border-color: #ff4d4f; } /* Dark mode */ .dark-mode .alert.alert-primary.filled { color: #ffffff; background-color: #1890ff; background-image: none; border-color: #1890ff; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .dark-mode .alert.alert-primary.filled-dm { color: #ffffff; background-color: #1890ff; background-image: none; border-color: #1890ff; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .dark-mode .alert.alert-success.filled { color: rgba(0, 0, 0, 0.85); background-color: #0be881; background-image: none; border-color: #0be881; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .dark-mode .alert.alert-success.filled-dm { color: rgba(0, 0, 0, 0.85); background-color: #0be881; background-image: none; border-color: #0be881; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .dark-mode .alert.alert-secondary.filled { color: rgba(0, 0, 0, 0.85); background-color: #ffcf00; background-image: none; border-color: #ffcf00; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .dark-mode .alert.alert-secondary.filled-dm { color: rgba(0, 0, 0, 0.85); background-color: #ffcf00; background-image: none; border-color: #ffcf00; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .dark-mode .alert.alert-danger.filled { color: #ffffff; background-color: #ff4d4f; background-image: none; border-color: #ff4d4f; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .dark-mode .alert.alert-danger.filled-dm { color: #ffffff; background-color: #ff4d4f; background-image: none; border-color: #ff4d4f; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } /* Contextual alerts (primary, success, secondary, danger) */ /* Light mode */ .alert.alert-primary { color: rgba(0, 0, 0, 0.85); background-color: #cfe7fd; background-image: none; border-color: #1890ff; } .alert.alert-success { color: rgba(0, 0, 0, 0.85); background-color: #d5f9e5; background-image: none; border-color: #0be881; } .alert.alert-secondary { color: rgba(0, 0, 0, 0.85); background-color: #fff6cc; background-image: none; border-color: #ffcf00; } .alert.alert-danger { color: rgba(0, 0, 0, 0.85); background-color: #f8d0d9; background-image: none; border-color: #ff4d4f; } /* Dark mode */ .dark-mode .alert.alert-primary { color: #1890ff; background-color: #172636; background-image: none; border-color: #0d518f; } .dark-mode .alert.alert-success { color: #0be881; background-color: #17312a; background-image: none; border-color: #0d8951; } .dark-mode .alert.alert-secondary { color: #ffcf00; background-color: #302c1d; background-image: none; border-color: #8e7710; } .dark-mode .alert.alert-danger { color: #ff4d4f; background-color: #301923; background-image: none; border-color: #8c0e2e; } /* ------------------------------------------------------------------------------- 15. Navbar content [hm-15] ------------------------------------------------------------------------------- */ .navbar .container { width: 100%; position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-pack: start; justify-content: flex-start; padding-left: calc(3rem - 1rem); padding-right: calc(3rem - 1rem); } .navbar .container-sm { width: 100%; position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-pack: start; justify-content: flex-start; padding-left: calc(3rem - 1rem); padding-right: calc(3rem - 1rem); } .navbar .container-md { width: 100%; position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-pack: start; justify-content: flex-start; padding-left: calc(3rem - 1rem); padding-right: calc(3rem - 1rem); } .navbar .container-lg { width: 100%; position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-pack: start; justify-content: flex-start; padding-left: calc(3rem - 1rem); padding-right: calc(3rem - 1rem); } .navbar .container-xl { width: 100%; position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-pack: start; justify-content: flex-start; padding-left: calc(3rem - 1rem); padding-right: calc(3rem - 1rem); } .navbar .container-fluid { width: 100%; position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-pack: start; justify-content: flex-start; padding-left: calc(3rem - 1rem); padding-right: calc(3rem - 1rem); } @media (max-width: 576px) { .navbar .container { padding-left: calc(2rem - 1rem); padding-right: calc(2rem - 1rem); } .navbar .container-sm { padding-left: calc(2rem - 1rem); padding-right: calc(2rem - 1rem); } .navbar .container-md { padding-left: calc(2rem - 1rem); padding-right: calc(2rem - 1rem); } .navbar .container-lg { padding-left: calc(2rem - 1rem); padding-right: calc(2rem - 1rem); } .navbar .container-xl { padding-left: calc(2rem - 1rem); padding-right: calc(2rem - 1rem); } .navbar .container-fluid { padding-left: calc(2rem - 1rem); padding-right: calc(2rem - 1rem); } } .navbar-brand, .navbar-nav, .navbar-text, .navbar-content { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; min-width: 0; } .navbar-brand:not(:first-child) { margin-left: 1.5rem; } .navbar-nav:not(:first-child) { margin-left: 1.5rem; } .navbar-text:not(:first-child) { margin-left: 1.5rem; } .navbar-content:not(:first-child) { margin-left: 1.5rem; } .navbar > .form-inline:not(:first-child) { margin-left: 1.5rem; } /* Navbar text */ .navbar-text { color: rgba(0, 0, 0, 0.7); } .dark-mode .navbar-text { color: rgba(255, 255, 255, 0.65); } /* Navbar nav */ .navbar-nav { padding-left: 0; margin-bottom: 0; list-style: none; height: 5rem; } .nav-item { height: 100%; margin-bottom: 0; } .nav-link { cursor: pointer; /* Needed if used without the href attribute, for example, as dropdown toggle */ display: inline-block; display: flex; align-items: center; height: 100%; white-space: nowrap; padding-left: 1.5rem; padding-right: 1.5rem; color: rgba(0, 0, 0, 0.85); background-color: transparent; } .dark-mode .nav-link { color: rgba(255, 255, 255, 0.8); background-color: transparent; } .nav-link:hover { color: #1890ff; background-color: transparent; text-decoration: none; } .dark-mode .nav-link:hover { color: #1890ff; background-color: transparent; } .nav-item.active > .nav-link { color: #1890ff; background-color: transparent; } .nav-item.show > .nav-link { color: #1890ff; background-color: transparent; } .dark-mode .nav-item.active > .nav-link { color: #1890ff; background-color: transparent; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .dark-mode .nav-item.show > .nav-link { color: #1890ff; background-color: transparent; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .nav-item.active > .nav-link:hover { color: #45a3fb; background-color: transparent; } .nav-item.show > .nav-link:hover { color: #45a3fb; background-color: transparent; } .dark-mode .nav-item.active > .nav-link:hover { color: #45a3fb; background-color: transparent; } .dark-mode .nav-item.show > .nav-link:hover { color: #45a3fb; background-color: transparent; } .navbar-nav:first-child > .nav-item:first-child > .nav-link { padding-left: 0; } .navbar-nav:last-child > .nav-item:last-child > .nav-link { padding-right: 0; } /* Navbar brand */ .navbar-brand { font-size: 2rem; font-weight: 500; color: rgba(0, 0, 0, 0.85); } .dark-mode .navbar-brand { color: rgba(255, 255, 255, 0.8); } .navbar-brand:hover { color: rgba(0, 0, 0, 0.7); text-decoration: none; } .dark-mode .navbar-brand:hover { color: rgba(255, 255, 255, 0.65); } .navbar-brand img { height: 2.2rem; margin-right: 1rem; } /* Navbar action button */ .navbar .btn-action { width: 3.6rem; padding-left: 0; padding-right: 0; } /* Navbar minimum widths for inline forms (Required for IE) */ .navbar > .form-inline > .form-control { min-width: 12rem; } .navbar > .form-inline > .form-group .form-control { min-width: 12rem; } .navbar > .form-inline > .input-group { min-width: 20rem; } @media (max-width: 576px) { .navbar > .form-inline > .form-control { min-width: 10rem; } .navbar > .form-inline > .form-group .form-control { min-width: 10rem; } .navbar > .form-inline > .input-group { min-width: 18rem; } } /* ------------------------------------------------------------------------------- 16. Sidebar content [hm-16] ------------------------------------------------------------------------------- */ .sidebar-menu { margin-top: 2.5rem; margin-bottom: 2.5rem; } /* Sidebar content */ .sidebar-content { display: block; padding: 0; margin: 2.5rem 2.5rem; } .sidebar-content > ul, .sidebar-content > ol { margin-left: 0; } /* Sidebar divider */ .sidebar-divider { padding: 0; margin: 0.5rem 2.5rem; height: 1px; background-color: rgba(0, 0, 0, 0.05); } .dark-mode .sidebar-divider { background-color: rgba(255, 255, 255, 0.05); } /* Sidebar link */ .sidebar-link { display: block; padding: 0.5rem 2.5rem; margin: 0; min-height: 3rem; height: auto; color: rgba(0, 0, 0, 0.7); background-color: transparent; border: 0 solid transparent; border-radius: 0; } .sidebar-link:hover { text-decoration: none; color: rgba(0, 0, 0, 0.85); background-color: transparent; border-color: transparent; } .dark-mode .sidebar-link { color: rgba(255, 255, 255, 0.65); background-color: transparent; border-color: transparent; } .dark-mode .sidebar-link:hover { color: rgba(255, 255, 255, 0.8); background-color: transparent; border-color: transparent; } .sidebar-link.active { color: #1890ff; background-color: transparent; border-color: transparent; } .sidebar-link.active:hover { color: #45a3fb; background-color: transparent; border-color: transparent; } .dark-mode .sidebar-link.active { color: #1890ff; background-color: transparent; border-color: transparent; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .dark-mode .sidebar-link.active:hover { color: #45a3fb; background-color: transparent; border-color: transparent; } /* Sidebar title */ .sidebar-title { padding: 0; margin: 0.5rem 2.5rem; font-size: 1.5rem; font-weight: 500; color: rgba(0, 0, 0, 0.85); } .dark-mode .sidebar-title { color: rgba(255, 255, 255, 0.8); } /* Sidebar link with icon */ .sidebar-link-with-icon { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; } .sidebar-icon { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; width: 3rem; height: 3rem; font-size: 1.6rem; margin-right: 1rem; color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.05); border: 0 solid transparent; border-radius: 0.4rem; } .sidebar-link-with-icon:hover .sidebar-icon { color: rgba(0, 0, 0, 0.85); background-color: rgba(0, 0, 0, 0.05); border-color: transparent; } .dark-mode .sidebar-icon { color: rgba(255, 255, 255, 0.65); background-color: rgba(255, 255, 255, 0.05); border-color: transparent; } .dark-mode .sidebar-link-with-icon:hover .sidebar-icon { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.05); border-color: transparent; } .sidebar-link-with-icon.active .sidebar-icon { color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.05); border-color: transparent; } .sidebar-link-with-icon.active:hover .sidebar-icon { color: rgba(0, 0, 0, 0.85); background-color: rgba(0, 0, 0, 0.05); border-color: transparent; } .dark-mode .sidebar-link-with-icon.active .sidebar-icon { color: rgba(255, 255, 255, 0.65); background-color: rgba(255, 255, 255, 0.05); border-color: transparent; } .dark-mode .sidebar-link-with-icon.active:hover .sidebar-icon { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.05); border-color: transparent; } /* Sidebar brand */ .sidebar-brand { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; padding: 0; margin: 0.5rem 2.5rem; font-size: 2rem; font-weight: 500; color: rgba(0, 0, 0, 0.85); } .dark-mode .sidebar-brand { color: rgba(255, 255, 255, 0.8); } .sidebar-brand:hover { color: rgba(0, 0, 0, 0.7); text-decoration: none; } .dark-mode .sidebar-brand:hover { color: rgba(255, 255, 255, 0.65); } .sidebar-brand img { height: 2.2rem; margin-right: 1rem; } /* ------------------------------------------------------------------------------- 17. Pagination [hm-17] ------------------------------------------------------------------------------- */ .page-item { display: inline-block; list-style: none; vertical-align: middle; margin-bottom: 0; } .page-item.ellipsis:before { content: "\2026"; } .page-item.ellipsis { display: inline-block; padding: 0 0.5rem; margin: 0 0.2rem 0.5rem 0; font-size: 1.4rem; min-width: 3.5rem; height: 3.5rem; line-height: 3.5rem; text-align: center; color: rgba(0, 0, 0, 0.7); background-color: #ffffff; background-image: none; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.4rem; } .page-link { display: inline-block; padding: 0 0.5rem; margin: 0 0.2rem 0.5rem 0; font-size: 1.4rem; min-width: 3.5rem; height: 3.5rem; line-height: 3.5rem; text-align: center; color: rgba(0, 0, 0, 0.7); background-color: #ffffff; background-image: none; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.4rem; } .dark-mode .page-item.ellipsis { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.05); background-image: none; border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent; } .dark-mode .page-link { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.05); background-image: none; border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent; } .page-link { -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); } .dark-mode .page-link { -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); } .page-link:hover { text-decoration: none; color: rgba(0, 0, 0, 0.7); background-color: #f7f7f7; background-image: none; border-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); } .dark-mode .page-link:hover { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.1); background-image: none; border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); } .page-item.active .page-link { color: #ffffff; background-color: #1890ff; background-image: none; border-color: #1890ff; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.05); pointer-events: none; } .dark-mode .page-item.active .page-link { color: #ffffff; background-color: #1890ff; background-image: none; border-color: #1890ff; -moz-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1); -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .pagination-rounded .page-item.ellipsis, .pagination-rounded .page-link { border-radius: 50%; } /* Large pagination */ .pagination-lg .page-item.ellipsis { padding: 0 0.5rem; margin: 0 0.2rem 0.5rem 0; font-size: 1.8rem; min-width: 4.2rem; height: 4.2rem; line-height: 4.2rem; } .pagination-lg .page-link { padding: 0 0.5rem; margin: 0 0.2rem 0.5rem 0; font-size: 1.8rem; min-width: 4.2rem; height: 4.2rem; line-height: 4.2rem; } /* Small pagination */ .pagination-sm .page-item.ellipsis { padding: 0 0.5rem; margin: 0 0.2rem 0.5rem 0; font-size: 1.2rem; min-width: 2.8rem; height: 2.8rem; line-height: 2.8rem; } .pagination-sm .page-link { padding: 0 0.5rem; margin: 0 0.2rem 0.5rem 0; font-size: 1.2rem; min-width: 2.8rem; height: 2.8rem; line-height: 2.8rem; } /* Disabled state */ .page-item.disabled .page-link, .dark-mode .page-item.disabled .page-link { opacity: 0.6; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; pointer-events: none; } /* ------------------------------------------------------------------------------- 18. Breadcrumb [hm-18] ------------------------------------------------------------------------------- */ .breadcrumb { padding: 0; background-color: transparent; border: 0 solid transparent; border-radius: 0; } .dark-mode .breadcrumb { background-color: transparent; border-color: transparent; } .breadcrumb-item { display: inline-block; list-style: none; margin-bottom: 0; } .breadcrumb-item:before { content: "\002F"; margin-left: 1rem; margin-right: 1.5rem; } .breadcrumb-item:first-child:before { display: none; } .breadcrumb-item.active a { pointer-events: none; color: inherit; } .dark-mode .breadcrumb-item a { /* Links are NOT antialiased because they are NOT light text on a dark bg. */ -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .dark-mode .breadcrumb-item.active a { /* Active links ARE antialiased because they ARE light text on a dark bg. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ------------------------------------------------------------------------------- 19. Tooltips [hm-19] ------------------------------------------------------------------------------- */ [data-toggle="tooltip"] { position: relative; } /* Tooltip arrow */ [data-toggle="tooltip"]::before { content: " "; width: 1rem; height: 1rem; background-color: #191c20; position: absolute; visibility: hidden; opacity: 0; z-index: 90; } .dark-mode [data-toggle="tooltip"]::before { background-color: #ffffff; } /* Tooltip content */ [data-toggle="tooltip"]::after { content: attr(data-title); white-space: normal; width: 10rem; font-size: 1.2rem; line-height: 1.5; padding: 0.5rem 1rem; color: rgba(255, 255, 255, 0.8); background-color: #191c20; border-radius: 0.4rem; text-align: center; position: absolute; visibility: hidden; z-index: 90; } .dark-mode [data-toggle="tooltip"]::after { color: rgba(0, 0, 0, 0.85); background-color: #ffffff; } /* Tooltip top */ [data-toggle="tooltip"]:not([data-placement])::before, [data-toggle="tooltip"][data-placement="top"]::before { left: 50%; top: -0.5rem; transform: translate(-50%, -100%) rotate(45deg); } [data-toggle="tooltip"]:not([data-placement])::after, [data-toggle="tooltip"][data-placement="top"]::after { left: 50%; top: 50%; transform: translate(-50%, -50%); } /* Tooltip bottom */ [data-toggle="tooltip"][data-placement="bottom"]::before { left: 50%; bottom: -0.5rem; transform: translate(-50%, 100%) rotate(45deg); } [data-toggle="tooltip"][data-placement="bottom"]::after { left: 50%; bottom: 50%; transform: translate(-50%, 50%); } /* Tooltip left */ [data-toggle="tooltip"][data-placement="left"]::before { left: -0.5rem; transform: translate(-100%, 100%) rotate(45deg); } [data-toggle="tooltip"][data-placement="left"]::after { left: 50%; top: 50%; transform: translate(-50%, -50%); } /* Tooltip right */ [data-toggle="tooltip"][data-placement="right"]::before { right: -0.5rem; transform: translate(100%, 100%) rotate(45deg); } [data-toggle="tooltip"][data-placement="right"]::after { right: 50%; top: 50%; transform: translate(50%, -50%); } /* Show tooltips (on all screens) */ /* Arrow */ [data-toggle="tooltip"]:not([data-target-breakpoint]):hover::before, [data-toggle="tooltip"]:not([data-target-breakpoint]):focus::before { visibility: visible; opacity: 1; transition: opacity 0.5s; -webkit-transition: opacity 0.5s; } /* Content */ [data-toggle="tooltip"]:not([data-target-breakpoint]):hover::after, [data-toggle="tooltip"]:not([data-target-breakpoint]):focus::after { visibility: visible; -webkit-transition: all 0.1s, color 0s, background-color 0s; transition: all 0.1s, color 0s, background-color 0s; } /* Placement */ [data-toggle="tooltip"]:not([data-target-breakpoint]):not([data-placement]):hover::after, [data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="top"]:hover::after, [data-toggle="tooltip"]:not([data-target-breakpoint]):not([data-placement]):focus::after, [data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="top"]:focus::after { top: -1rem; transform: translate(-50%, -100%); } [data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="bottom"]:hover::after, [data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="bottom"]:focus::after { bottom: -1rem; transform: translate(-50%, 100%); } [data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="left"]:hover::after, [data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="left"]:focus::after { left: -1rem; transform: translate(-100%, -50%); } [data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="right"]:hover::after, [data-toggle="tooltip"]:not([data-target-breakpoint])[data-placement="right"]:focus::after { right: -1rem; transform: translate(100%, -50%); } /* Show tooltips (only on screens with widths > 768px) */ @media (min-width: 769px) { /* Arrow */ [data-toggle="tooltip"][data-target-breakpoint="md"]:hover::before, [data-toggle="tooltip"][data-target-breakpoint="md"]:focus::before { visibility: visible; opacity: 1; transition: opacity 0.5s; -webkit-transition: opacity 0.5s; } /* Content */ [data-toggle="tooltip"][data-target-breakpoint="md"]:hover::after, [data-toggle="tooltip"][data-target-breakpoint="md"]:focus::after { visibility: visible; -webkit-transition: all 0.1s, color 0s, background-color 0s; transition: all 0.1s, color 0s, background-color 0s; } /* Placement */ [data-toggle="tooltip"][data-target-breakpoint="md"]:not([data-placement]):hover::after, [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="top"]:hover::after, [data-toggle="tooltip"][data-target-breakpoint="md"]:not([data-placement]):focus::after, [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="top"]:focus::after { top: -1rem; transform: translate(-50%, -100%); } [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="bottom"]:hover::after, [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="bottom"]:focus::after { bottom: -1rem; transform: translate(-50%, 100%); } [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="left"]:hover::after, [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="left"]:focus::after { left: -1rem; transform: translate(-100%, -50%); } [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="right"]:hover::after, [data-toggle="tooltip"][data-target-breakpoint="md"][data-placement="right"]:focus::after { right: -1rem; transform: translate(100%, -50%); } } /* Show tooltips (only on screens with widths > 992px) */ @media (min-width: 993px) { /* Arrow */ [data-toggle="tooltip"][data-target-breakpoint="lg"]:hover::before, [data-toggle="tooltip"][data-target-breakpoint="lg"]:focus::before { visibility: visible; opacity: 1; transition: opacity 0.5s; -webkit-transition: opacity 0.5s; } /* Content */ [data-toggle="tooltip"][data-target-breakpoint="lg"]:hover::after, [data-toggle="tooltip"][data-target-breakpoint="lg"]:focus::after { visibility: visible; -webkit-transition: all 0.1s, color 0s, background-color 0s; transition: all 0.1s, color 0s, background-color 0s; } /* Placement */ [data-toggle="tooltip"][data-target-breakpoint="lg"]:not([data-placement]):hover::after, [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="top"]:hover::after, [data-toggle="tooltip"][data-target-breakpoint="lg"]:not([data-placement]):focus::after, [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="top"]:focus::after { top: -1rem; transform: translate(-50%, -100%); } [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="bottom"]:hover::after, [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="bottom"]:focus::after { bottom: -1rem; transform: translate(-50%, 100%); } [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="left"]:hover::after, [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="left"]:focus::after { left: -1rem; transform: translate(-100%, -50%); } [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="right"]:hover::after, [data-toggle="tooltip"][data-target-breakpoint="lg"][data-placement="right"]:focus::after { right: -1rem; transform: translate(100%, -50%); } } /* ------------------------------------------------------------------------------- 20. Badges [hm-20] ------------------------------------------------------------------------------- */ .badge { display: inline-block; position: relative; font-size: 1.2rem; line-height: 1.2; padding: 0.2rem 0.8rem; color: rgba(0, 0, 0, 0.85); background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.4rem; } .dark-mode .badge { color: rgba(255, 255, 255, 0.8); background-color: transparent; border-color: rgba(255, 255, 255, 0.2); } .badge-pill { border-radius: 3rem; } /* Primary, success, secondary, danger badges. */ /* Light mode */ .badge.badge-primary { color: #ffffff; background-color: #1890ff; border-color: #1890ff; } .badge.badge-success { color: rgba(0, 0, 0, 0.85); background-color: #0be881; border-color: #0be881; } .badge.badge-secondary { color: rgba(0, 0, 0, 0.85); background-color: #ffcf00; border-color: #ffcf00; } .badge.badge-danger { color: #ffffff; background-color: #ff4d4f; border-color: #ff4d4f; } /* Dark mode */ .dark-mode .badge.badge-primary { color: #ffffff; background-color: #1890ff; border-color: #1890ff; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .dark-mode .badge.badge-success { color: rgba(0, 0, 0, 0.85); background-color: #0be881; border-color: #0be881; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .dark-mode .badge.badge-secondary { color: rgba(0, 0, 0, 0.85); background-color: #ffcf00; border-color: #ffcf00; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .dark-mode .badge.badge-danger { color: #ffffff; background-color: #ff4d4f; border-color: #ff4d4f; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } /* Badge group */ .badge-group { display: -ms-inline-flexbox; display: inline-flex; } .badge-group > .badge:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .badge-group > .badge:not(:last-child) { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; } /* Link badges */ /* Light mode */ a.badge:hover, a.badge-group:hover { text-decoration: none; } a.badge:hover { color: rgba(0, 0, 0, 0.85); background-color: #f7f7f7; border-color: rgba(0, 0, 0, 0.2); } a.badge-group:hover > .badge { color: rgba(0, 0, 0, 0.85); background-color: #f7f7f7; border-color: rgba(0, 0, 0, 0.2); } a.badge.badge-primary:hover { color: #ffffff; background-color: #45a3fb; border-color: #45a3fb; } a.badge-group:hover > .badge.badge-primary { color: #ffffff; background-color: #45a3fb; border-color: #45a3fb; } a.badge.badge-success:hover { color: rgba(0, 0, 0, 0.85); background-color: #81eea8; border-color: #81eea8; } a.badge-group:hover > .badge.badge-success { color: rgba(0, 0, 0, 0.85); background-color: #81eea8; border-color: #81eea8; } a.badge.badge-secondary:hover { color: rgba(0, 0, 0, 0.85); background-color: #ffe04d; border-color: #ffe04d; } a.badge-group:hover > .badge.badge-secondary { color: rgba(0, 0, 0, 0.85); background-color: #ffe04d; border-color: #ffe04d; } a.badge.badge-danger:hover { color: #ffffff; background-color: #ed586c; border-color: #ed586c; } a.badge-group:hover > .badge.badge-danger { color: #ffffff; background-color: #ed586c; border-color: #ed586c; } /* Dark mode */ .dark-mode a.badge:hover { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.025); border-color: rgba(255, 255, 255, 0.2); } .dark-mode a.badge-group:hover > .badge { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.025); border-color: rgba(255, 255, 255, 0.2); } .dark-mode a.badge.badge-primary:hover { color: #ffffff; background-color: #45a3fb; border-color: #45a3fb; } .dark-mode a.badge-group:hover > .badge.badge-primary { color: #ffffff; background-color: #45a3fb; border-color: #45a3fb; } .dark-mode a.badge.badge-success:hover { color: rgba(0, 0, 0, 0.85); background-color: #81eea8; border-color: #81eea8; } .dark-mode a.badge-group:hover > .badge.badge-success { color: rgba(0, 0, 0, 0.85); background-color: #81eea8; border-color: #81eea8; } .dark-mode a.badge.badge-secondary:hover { color: rgba(0, 0, 0, 0.85); background-color: #ffe04d; border-color: #ffe04d; } .dark-mode a.badge-group:hover > .badge.badge-secondary { color: rgba(0, 0, 0, 0.85); background-color: #ffe04d; border-color: #ffe04d; } .dark-mode a.badge.badge-danger:hover { color: #ffffff; background-color: #ed586c; border-color: #ed586c; } .dark-mode a.badge-group:hover > .badge.badge-danger { color: #ffffff; background-color: #ed586c; border-color: #ed586c; } /* ------------------------------------------------------------------------------- 21. Image [hm-21] ------------------------------------------------------------------------------- */ .img-fluid { max-width: 100%; height: auto; } /* ------------------------------------------------------------------------------- 22. Button group [hm-22] ------------------------------------------------------------------------------- */ .btn-group, .btn-group-vertical { position: relative; display: -ms-inline-flexbox; display: inline-flex; vertical-align: middle; } .btn-group > .btn, .btn-group-vertical > .btn { position: relative; -ms-flex: 1 1 auto; flex: 1 1 auto; } .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active, .btn-group-vertical > .btn:focus, .btn-group-vertical > .btn:active, .btn-group-vertical > .btn.active { z-index: 1; } .btn-group > .btn:not(:first-child) { margin-left: calc((-1) * 1px); } .btn-group > .btn-group:not(:first-child) { margin-left: calc((-1) * 1px); } .btn-group > .btn:not(:last-child):not([data-toggle="dropdown"]), .btn-group > .btn-group:not(:last-child) > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; } .btn-group > .btn:not(:first-child), .btn-group > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } .btn-group-vertical { -ms-flex-direction: column; flex-direction: column; -ms-flex-align: start; align-items: flex-start; -ms-flex-pack: center; justify-content: center; } .btn-group-vertical > .btn, .btn-group-vertical > .btn-group { width: 100%; } .btn-group-vertical > .btn:not(:first-child) { margin-top: calc((-1) * 1px); } .btn-group-vertical > .btn-group:not(:first-child) { margin-top: calc((-1) * 1px); } .btn-group-vertical > .btn:not(:last-child):not([data-toggle="dropdown"]), .btn-group-vertical > .btn-group:not(:last-child) > .btn { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .btn-group-vertical > .btn:not(:first-child), .btn-group-vertical > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-top-right-radius: 0; } /* Remove box shadow for button group vertical (except last button) */ .btn-group-vertical > .btn:not(:last-child):not([data-toggle="dropdown"]):not(:focus):not(.active), .btn-group-vertical > .btn-group:not(:last-child) > .btn:not(:focus):not(.active) { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } /* Button group sizing */ .btn-group-sm > .btn { height: 2.6rem; line-height: 2.6rem; padding: 0 1rem; font-size: 1.2rem; } .btn-group-lg > .btn { height: 4rem; line-height: 4rem; padding: 0 2rem; font-size: 1.8rem; } .btn-group-sm > .btn-square { width: 2.6rem; padding-left: 0; padding-right: 0; } .btn-group-lg > .btn-square { width: 4rem; padding-left: 0; padding-right: 0; } .btn-group-sm > .btn-rounded { border-radius: 2.6rem; } .btn-group-lg > .btn-rounded { border-radius: 4rem; } /* Button toolbar */ .btn-toolbar { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: start; justify-content: flex-start; } .btn-toolbar .input-group { width: auto; } /* Button toolbar minimum width for input groups (Required for IE) */ .btn-toolbar .input-group { min-width: 20rem; } @media (max-width: 576px) { .btn-toolbar .input-group { min-width: 18rem; } } /* Buttons (only border colors) */ .btn-group > .btn { border-color: rgba(0, 0, 0, 0.2); } .btn-group-vertical > .btn { border-color: rgba(0, 0, 0, 0.2); } .btn-group > .btn:hover { border-color: rgba(0, 0, 0, 0.2); } .btn-group-vertical > .btn:hover { border-color: rgba(0, 0, 0, 0.2); } .btn-group > .btn:focus { border-color: rgba(0, 0, 0, 0.2); } .btn-group-vertical > .btn:focus { border-color: rgba(0, 0, 0, 0.2); } .btn-group > .btn.active { border-color: rgba(0, 0, 0, 0.2); } .btn-group-vertical > .btn.active { border-color: rgba(0, 0, 0, 0.2); } .dark-mode .btn-group > .btn { border-color: rgba(0, 0, 0, 0.3); } .dark-mode .btn-group-vertical > .btn { border-color: rgba(0, 0, 0, 0.3); } .dark-mode .btn-group > .btn:hover { border-color: rgba(0, 0, 0, 0.3); } .dark-mode .btn-group-vertical > .btn:hover { border-color: rgba(0, 0, 0, 0.3); } .dark-mode .btn-group > .btn:focus { border-color: rgba(0, 0, 0, 0.3); } .dark-mode .btn-group-vertical > .btn:focus { border-color: rgba(0, 0, 0, 0.3); } .dark-mode .btn-group > .btn.active { border-color: rgba(0, 0, 0, 0.3); } .dark-mode .btn-group-vertical > .btn.active { border-color: rgba(0, 0, 0, 0.3); } /* Link button */ .btn-group > .btn.btn-link { border-color: rgba(0, 0, 0, 0.2); } .btn-group-vertical > .btn.btn-link { border-color: rgba(0, 0, 0, 0.2); } .btn-group > .btn.btn-link:hover { border-color: rgba(0, 0, 0, 0.2); } .btn-group-vertical > .btn.btn-link:hover { border-color: rgba(0, 0, 0, 0.2); } .btn-group > .btn.btn-link:focus { border-color: rgba(0, 0, 0, 0.2); } .btn-group-vertical > .btn.btn-link:focus { border-color: rgba(0, 0, 0, 0.2); } .btn-group > .btn.btn-link.active { border-color: rgba(0, 0, 0, 0.2); } .btn-group-vertical > .btn.btn-link.active { border-color: rgba(0, 0, 0, 0.2); } .dark-mode .btn-group > .btn.btn-link { border-color: rgba(0, 0, 0, 0.3); } .dark-mode .btn-group-vertical > .btn.btn-link { border-color: rgba(0, 0, 0, 0.3); } .dark-mode .btn-group > .btn.btn-link:hover { border-color: rgba(0, 0, 0, 0.3); } .dark-mode .btn-group-vertical > .btn.btn-link:hover { border-color: rgba(0, 0, 0, 0.3); } .dark-mode .btn-group > .btn.btn-link:focus { border-color: rgba(0, 0, 0, 0.3); } .dark-mode .btn-group-vertical > .btn.btn-link:focus { border-color: rgba(0, 0, 0, 0.3); } .dark-mode .btn-group > .btn.btn-link.active { border-color: rgba(0, 0, 0, 0.3); } .dark-mode .btn-group-vertical > .btn.btn-link.active { border-color: rgba(0, 0, 0, 0.3); } /* Primary button */ .btn-group > .btn.btn-primary { border-color: #1890ff; } .btn-group-vertical > .btn.btn-primary { border-color: #1890ff; } .btn-group > .btn.btn-primary:hover { border-color: #45a3fb; } .btn-group-vertical > .btn.btn-primary:hover { border-color: #45a3fb; } .btn-group > .btn.btn-primary:focus { border-color: #1890ff; } .btn-group-vertical > .btn.btn-primary:focus { border-color: #1890ff; } .btn-group > .btn.btn-primary.active { border-color: #1890ff; } .btn-group-vertical > .btn.btn-primary.active { border-color: #1890ff; } .dark-mode .btn-group > .btn.btn-primary { border-color: #1890ff; } .dark-mode .btn-group-vertical > .btn.btn-primary { border-color: #1890ff; } .dark-mode .btn-group > .btn.btn-primary:hover { border-color: #45a3fb; } .dark-mode .btn-group-vertical > .btn.btn-primary:hover { border-color: #45a3fb; } .dark-mode .btn-group > .btn.btn-primary:focus { border-color: #1890ff; } .dark-mode .btn-group-vertical > .btn.btn-primary:focus { border-color: #1890ff; } .dark-mode .btn-group > .btn.btn-primary.active { border-color: #1890ff; } .dark-mode .btn-group-vertical > .btn.btn-primary.active { border-color: #1890ff; } /* Success button */ .btn-group > .btn.btn-success { border-color: #0be881; } .btn-group-vertical > .btn.btn-success { border-color: #0be881; } .btn-group > .btn.btn-success:hover { border-color: #81eea8; } .btn-group-vertical > .btn.btn-success:hover { border-color: #81eea8; } .btn-group > .btn.btn-success:focus { border-color: #0be881; } .btn-group-vertical > .btn.btn-success:focus { border-color: #0be881; } .btn-group > .btn.btn-success.active { border-color: #0be881; } .btn-group-vertical > .btn.btn-success.active { border-color: #0be881; } .dark-mode .btn-group > .btn.btn-success { border-color: #0be881; } .dark-mode .btn-group-vertical > .btn.btn-success { border-color: #0be881; } .dark-mode .btn-group > .btn.btn-success:hover { border-color: #81eea8; } .dark-mode .btn-group-vertical > .btn.btn-success:hover { border-color: #81eea8; } .dark-mode .btn-group > .btn.btn-success:focus { border-color: #0be881; } .dark-mode .btn-group-vertical > .btn.btn-success:focus { border-color: #0be881; } .dark-mode .btn-group > .btn.btn-success.active { border-color: #0be881; } .dark-mode .btn-group-vertical > .btn.btn-success.active { border-color: #0be881; } /* Secondary button */ .btn-group > .btn.btn-secondary { border-color: #ffcf00; } .btn-group-vertical > .btn.btn-secondary { border-color: #ffcf00; } .btn-group > .btn.btn-secondary:hover { border-color: #ffe04d; } .btn-group-vertical > .btn.btn-secondary:hover { border-color: #ffe04d; } .btn-group > .btn.btn-secondary:focus { border-color: #ffcf00; } .btn-group-vertical > .btn.btn-secondary:focus { border-color: #ffcf00; } .btn-group > .btn.btn-secondary.active { border-color: #ffcf00; } .btn-group-vertical > .btn.btn-secondary.active { border-color: #ffcf00; } .dark-mode .btn-group > .btn.btn-secondary { border-color: #ffcf00; } .dark-mode .btn-group-vertical > .btn.btn-secondary { border-color: #ffcf00; } .dark-mode .btn-group > .btn.btn-secondary:hover { border-color: #ffe04d; } .dark-mode .btn-group-vertical > .btn.btn-secondary:hover { border-color: #ffe04d; } .dark-mode .btn-group > .btn.btn-secondary:focus { border-color: #ffcf00; } .dark-mode .btn-group-vertical > .btn.btn-secondary:focus { border-color: #ffcf00; } .dark-mode .btn-group > .btn.btn-secondary.active { border-color: #ffcf00; } .dark-mode .btn-group-vertical > .btn.btn-secondary.active { border-color: #ffcf00; } /* Danger button */ .btn-group > .btn.btn-danger { border-color: #ff4d4f; } .btn-group-vertical > .btn.btn-danger { border-color: #ff4d4f; } .btn-group > .btn.btn-danger:hover { border-color: #ed586c; } .btn-group-vertical > .btn.btn-danger:hover { border-color: #ed586c; } .btn-group > .btn.btn-danger:focus { border-color: #ff4d4f; } .btn-group-vertical > .btn.btn-danger:focus { border-color: #ff4d4f; } .btn-group > .btn.btn-danger.active { border-color: #ff4d4f; } .btn-group-vertical > .btn.btn-danger.active { border-color: #ff4d4f; } .dark-mode .btn-group > .btn.btn-danger { border-color: #ff4d4f; } .dark-mode .btn-group-vertical > .btn.btn-danger { border-color: #ff4d4f; } .dark-mode .btn-group > .btn.btn-danger:hover { border-color: #ed586c; } .dark-mode .btn-group-vertical > .btn.btn-danger:hover { border-color: #ed586c; } .dark-mode .btn-group > .btn.btn-danger:focus { border-color: #ff4d4f; } .dark-mode .btn-group-vertical > .btn.btn-danger:focus { border-color: #ff4d4f; } .dark-mode .btn-group > .btn.btn-danger.active { border-color: #ff4d4f; } .dark-mode .btn-group-vertical > .btn.btn-danger.active { border-color: #ff4d4f; } /* ------------------------------------------------------------------------------- 23. Collapse [hm-23] ------------------------------------------------------------------------------- */ details, details * { /* Fixes Chrome bug */ box-sizing: border-box; } /* Collapse header */ .collapse-header { position: relative; cursor: pointer; padding: 1.2rem 2rem; font-size: 1.4rem; color: rgba(0, 0, 0, 0.85); background-color: #f7f7f7; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.4rem; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .dark-mode .collapse-header { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.02); border-color: #47494d; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .collapse-header:focus { color: rgba(0, 0, 0, 0.85); background-color: #f7f7f7; border-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .collapse-header:focus { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.02); border-color: #47494d; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .collapse-panel[open] .collapse-header { color: rgba(0, 0, 0, 0.85); background-color: #f7f7f7; border-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .dark-mode .collapse-panel[open] .collapse-header { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.02); border-color: #47494d; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .collapse-panel[open] .collapse-header:focus { color: rgba(0, 0, 0, 0.85); background-color: #f7f7f7; border-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .dark-mode .collapse-panel[open] .collapse-header:focus { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.02); border-color: #47494d; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; outline: none; } .collapse-panel[open] .collapse-header { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* Collapse header arrow set using background image */ .collapse-header { /* Firefox */ list-style-type: none; } .collapse-header::-webkit-details-marker { /* Chrome */ display: none; } .collapse-header::marker { display: none; } .collapse-header:not(.without-arrow) { padding: 1.2rem 2rem 1.2rem 4.4rem; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5AgHFAwNJY24UQAAAJVJREFUKM+lk8ENgzAMRZ9hgS4SiRFgDN+6QifpCD1mDFbIIQuwASNwcaSqKsEW/5RI/1n+jiMAqvoE3sCScy50JGb+2H2/ggar3PQAVlWdesBilV2QWIYJWM1Mrz1pBy8k37QHkt8eryD5F6wHydn4zqCBoO63FAodGmvo4UKrETG3bXWbG/DymgHGWmtJKW3A7PmiB2rUYYave/NSAAAAAElFTkSuQmCC); background-size: 0.6rem; background-repeat: no-repeat; background-position: 2rem center; } .collapse-panel[open] .collapse-header:not(.without-arrow) { padding: 1.2rem 2rem 1.2rem 4.4rem; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAI9JREFUeNpiZACCyMjIBCDVD8SOy5cvv8BAAgDqNQBS+4G4EKh3ASPUsPlQ+Q+kGIpkmABUKJEJ6jIYAEnshyok1TAQ6AcZ6Ah1GdGG4jAM7DtGQgrQvU9ILSOxColVw0is7VA2QV8wkhA+DMQECSMJgc5AyDCcBhIwFG9aZSQxrRFM+IwkJGAGYnIRQIABACQuXCKovu2mAAAAAElFTkSuQmCC); background-size: 1rem; background-repeat: no-repeat; background-position: 2rem center; } /* Collapse header focus effect (::after) */ .collapse-header::after { content: ""; position: absolute; display: block; top: 0.2rem; left: 0.2rem; width: calc(100% - (2 * 0.2rem)); height: calc(100% - (2 * 0.2rem)); border-radius: 0.4rem; } .collapse-header:focus::after { -moz-box-shadow: inset 0 0 0 0.2rem #45a3fb; -webkit-box-shadow: inset 0 0 0 0.2rem #45a3fb; box-shadow: inset 0 0 0 0.2rem #45a3fb; } .dark-mode .collapse-header:focus::after { -moz-box-shadow: inset 0 0 0 0.2rem #0d518f; -webkit-box-shadow: inset 0 0 0 0.2rem #0d518f; box-shadow: inset 0 0 0 0.2rem #0d518f; } /* Controlling display based on collapse open state */ .collapse-panel[open] .hidden-collapse-open { display: none; } .collapse-panel:not([open]) .hidden-collapse-closed { display: none; } /* Collapse content */ .collapse-content { padding: 2rem; font-size: 1.4rem; color: rgba(0, 0, 0, 0.85); background-color: transparent; border: 1px solid rgba(0, 0, 0, 0.2); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; border-top: none; border-bottom-left-radius: 0.4rem; border-bottom-right-radius: 0.4rem; } .dark-mode .collapse-content { color: rgba(255, 255, 255, 0.8); background-color: transparent; border-color: #47494d; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } /* Collapse group */ .collapse-group .collapse-panel:not(:first-child) { margin-top: calc((-1) * 1px); } .collapse-group .collapse-panel:not(:first-child) .collapse-header { border-top-left-radius: 0; border-top-right-radius: 0; } .collapse-group .collapse-panel:not([open]):not(:last-child) .collapse-header { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .collapse-group .collapse-panel[open]:not(:first-child) .collapse-content { border-top-left-radius: 0; border-top-right-radius: 0; } .collapse-group .collapse-panel[open]:not(:last-child) .collapse-content { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* On IE, collapse panels are styled to be always open. This is because they are not supporter by the browser. */ /* Collapse header */ .collapse-panel .collapse-header { cursor: auto; color: rgba(0, 0, 0, 0.85); background-color: #f7f7f7; border-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .dark-mode .collapse-panel .collapse-header { color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.02); border-color: #47494d; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .collapse-panel .collapse-header { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* Collapse header arrow set using background image */ .collapse-panel .collapse-header:not(.without-arrow) { padding: 1.2rem 2rem 1.2rem 4.4rem; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAI9JREFUeNpiZACCyMjIBCDVD8SOy5cvv8BAAgDqNQBS+4G4EKh3ASPUsPlQ+Q+kGIpkmABUKJEJ6jIYAEnshyok1TAQ6AcZ6Ah1GdGG4jAM7DtGQgrQvU9ILSOxColVw0is7VA2QV8wkhA+DMQECSMJgc5AyDCcBhIwFG9aZSQxrRFM+IwkJGAGYnIRQIABACQuXCKovu2mAAAAAElFTkSuQmCC); background-size: 1rem; background-repeat: no-repeat; background-position: 2rem center; } /* Controlling display based on collapse open state */ .collapse-panel .hidden-collapse-open { display: none; } .collapse-panel:not([open]) .hidden-collapse-closed { display: inline-block; } /* Collapse group */ .collapse-group .collapse-panel:not(:first-child) .collapse-content { border-top-left-radius: 0; border-top-right-radius: 0; } .collapse-group .collapse-panel:not(:last-child) .collapse-content { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; } } /* ------------------------------------------------------------------------------- 24. Progress [hm-24] ------------------------------------------------------------------------------- */ .progress { display: -ms-flexbox; display: flex; overflow: hidden; height: 0.8rem; font-size: 1.2rem; line-height: 0; border-radius: 3.2rem; background-color: rgba(0, 0, 0, 0.1); } .dark-mode .progress { background-color: rgba(255, 255, 255, 0.1); } /* Progress bar */ .progress-bar { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; overflow: hidden; text-align: center; white-space: nowrap; color: #ffffff; background-color: #1890ff; border-radius: inherit; } .dark-mode .progress-bar { color: #ffffff; background-color: #1890ff; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .progress-bar:not(:only-child) { border-radius: 0; } .progress-bar:not(:only-child):last-child { border-top-right-radius: inherit; border-bottom-right-radius: inherit; } /* Progress group */ .progress-group { position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; width: 100%; } .progress-group > .progress { position: relative; -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; margin-bottom: 0; } .progress-group-label { font-size: 1.4rem; } .progress-group > .progress { margin-left: 0.4rem; margin-right: 0.4rem; } .progress-group > .progress-group-label { margin-left: 0.4rem; margin-right: 0.4rem; } .progress-group > .progress:first-child, .progress-group > .progress-group-label:first-child { margin-left: 0; } .progress-group > .progress:last-child, .progress-group > .progress-group-label:last-child { margin-right: 0; } /* Progress bar animated */ .progress-bar-animated { position: relative; } .progress-bar-animated::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3)); transform: translateX(-100%); animation: progress-bar-shine 2s infinite; } .dark-mode .progress-bar-animated::before { background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3)); } .progress-bar-animated.highlight-dark::before { background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.1)); } .dark-mode .progress-bar-animated.highlight-dark::before { background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.2)); } @keyframes progress-bar-shine { to { transform: translateX(0); opacity: 0.1; } } /* ------------------------------------------------------------------------------- 25. Spacing utilities [hm-25] Notes: ~ Unlike other frameworks, Halfmoon keeps the default margins and spacing for most elements. Instead, we encourage people to use the following utility classes for spacing. ------------------------------------------------------------------------------- */ /* Padding */ .p-0 { padding: 0 !important; } .p-5 { padding: 0.5rem !important; } .p-10 { padding: 1rem !important; } .p-15 { padding: 1.5rem !important; } .p-20 { padding: 2rem !important; } .px-0 { padding-left: 0 !important; padding-right: 0 !important; } .px-5 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .px-10 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-15 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .px-20 { padding-left: 2rem !important; padding-right: 2rem !important; } .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-5 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-10 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-15 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-20 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .pt-0 { padding-top: 0 !important; } .pt-5 { padding-top: 0.5rem !important; } .pt-10 { padding-top: 1rem !important; } .pt-15 { padding-top: 1.5rem !important; } .pt-20 { padding-top: 2rem !important; } .pb-0 { padding-bottom: 0 !important; } .pb-5 { padding-bottom: 0.5rem !important; } .pb-10 { padding-bottom: 1rem !important; } .pb-15 { padding-bottom: 1.5rem !important; } .pb-20 { padding-bottom: 2rem !important; } .pl-0 { padding-left: 0 !important; } .pl-5 { padding-left: 0.5rem !important; } .pl-10 { padding-left: 1rem !important; } .pl-15 { padding-left: 1.5rem !important; } .pl-20 { padding-left: 2rem !important; } .pr-0 { padding-right: 0 !important; } .pr-5 { padding-right: 0.5rem !important; } .pr-10 { padding-right: 1rem !important; } .pr-15 { padding-right: 1.5rem !important; } .pr-20 { padding-right: 2rem !important; } /* Margin */ .m-0 { margin: 0 !important; } .m-5 { margin: 0.5rem !important; } .m-10 { margin: 1rem !important; } .m-15 { margin: 1.5rem !important; } .m-20 { margin: 2rem !important; } .m-auto { margin: auto !important; } .mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .mx-5 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; } .mx-10 { margin-left: 1rem !important; margin-right: 1rem !important; } .mx-15 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .mx-20 { margin-left: 2rem !important; margin-right: 2rem !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } .my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-5 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-10 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-15 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-20 { margin-top: 2rem !important; margin-bottom: 2rem !important; } .my-auto { margin-top: auto !important; margin-bottom: auto !important; } .mt-0 { margin-top: 0 !important; } .mt-5 { margin-top: 0.5rem !important; } .mt-10 { margin-top: 1rem !important; } .mt-15 { margin-top: 1.5rem !important; } .mt-20 { margin-top: 2rem !important; } .mt-auto { margin-top: auto !important; } .mb-0 { margin-bottom: 0 !important; } .mb-5 { margin-bottom: 0.5rem !important; } .mb-10 { margin-bottom: 1rem !important; } .mb-15 { margin-bottom: 1.5rem !important; } .mb-20 { margin-bottom: 2rem !important; } .mb-auto { margin-bottom: auto !important; } .ml-0 { margin-left: 0 !important; } .ml-5 { margin-left: 0.5rem !important; } .ml-10 { margin-left: 1rem !important; } .ml-15 { margin-left: 1.5rem !important; } .ml-20 { margin-left: 2rem !important; } .ml-auto { margin-left: auto !important; } .mr-0 { margin-right: 0 !important; } .mr-5 { margin-right: 0.5rem !important; } .mr-10 { margin-right: 1rem !important; } .mr-15 { margin-right: 1.5rem !important; } .mr-20 { margin-right: 2rem !important; } .mr-auto { margin-right: auto !important; } @media (min-width: 577px) { /* Padding */ .p-sm-0 { padding: 0 !important; } .p-sm-5 { padding: 0.5rem !important; } .p-sm-10 { padding: 1rem !important; } .p-sm-15 { padding: 1.5rem !important; } .p-sm-20 { padding: 2rem !important; } .px-sm-0 { padding-left: 0 !important; padding-right: 0 !important; } .px-sm-5 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .px-sm-10 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-sm-15 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .px-sm-20 { padding-left: 2rem !important; padding-right: 2rem !important; } .py-sm-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-sm-5 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-sm-10 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-sm-15 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-sm-20 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .pt-sm-0 { padding-top: 0 !important; } .pt-sm-5 { padding-top: 0.5rem !important; } .pt-sm-10 { padding-top: 1rem !important; } .pt-sm-15 { padding-top: 1.5rem !important; } .pt-sm-20 { padding-top: 2rem !important; } .pb-sm-0 { padding-bottom: 0 !important; } .pb-sm-5 { padding-bottom: 0.5rem !important; } .pb-sm-10 { padding-bottom: 1rem !important; } .pb-sm-15 { padding-bottom: 1.5rem !important; } .pb-sm-20 { padding-bottom: 2rem !important; } .pl-sm-0 { padding-left: 0 !important; } .pl-sm-5 { padding-left: 0.5rem !important; } .pl-sm-10 { padding-left: 1rem !important; } .pl-sm-15 { padding-left: 1.5rem !important; } .pl-sm-20 { padding-left: 2rem !important; } .pr-sm-0 { padding-right: 0 !important; } .pr-sm-5 { padding-right: 0.5rem !important; } .pr-sm-10 { padding-right: 1rem !important; } .pr-sm-15 { padding-right: 1.5rem !important; } .pr-sm-20 { padding-right: 2rem !important; } /* Margin */ .m-sm-0 { margin: 0 !important; } .m-sm-5 { margin: 0.5rem !important; } .m-sm-10 { margin: 1rem !important; } .m-sm-15 { margin: 1.5rem !important; } .m-sm-20 { margin: 2rem !important; } .m-sm-auto { margin: auto !important; } .mx-sm-0 { margin-left: 0 !important; margin-right: 0 !important; } .mx-sm-5 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; } .mx-sm-10 { margin-left: 1rem !important; margin-right: 1rem !important; } .mx-sm-15 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .mx-sm-20 { margin-left: 2rem !important; margin-right: 2rem !important; } .mx-sm-auto { margin-left: auto !important; margin-right: auto !important; } .my-sm-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-sm-5 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-sm-10 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-sm-15 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-sm-20 { margin-top: 2rem !important; margin-bottom: 2rem !important; } .my-sm-auto { margin-top: auto !important; margin-bottom: auto !important; } .mt-sm-0 { margin-top: 0 !important; } .mt-sm-5 { margin-top: 0.5rem !important; } .mt-sm-10 { margin-top: 1rem !important; } .mt-sm-15 { margin-top: 1.5rem !important; } .mt-sm-20 { margin-top: 2rem !important; } .mt-sm-auto { margin-top: auto !important; } .mb-sm-0 { margin-bottom: 0 !important; } .mb-sm-5 { margin-bottom: 0.5rem !important; } .mb-sm-10 { margin-bottom: 1rem !important; } .mb-sm-15 { margin-bottom: 1.5rem !important; } .mb-sm-20 { margin-bottom: 2rem !important; } .mb-sm-auto { margin-bottom: auto !important; } .ml-sm-0 { margin-left: 0 !important; } .ml-sm-5 { margin-left: 0.5rem !important; } .ml-sm-10 { margin-left: 1rem !important; } .ml-sm-15 { margin-left: 1.5rem !important; } .ml-sm-20 { margin-left: 2rem !important; } .ml-sm-auto { margin-left: auto !important; } .mr-sm-0 { margin-right: 0 !important; } .mr-sm-5 { margin-right: 0.5rem !important; } .mr-sm-10 { margin-right: 1rem !important; } .mr-sm-15 { margin-right: 1.5rem !important; } .mr-sm-20 { margin-right: 2rem !important; } .mr-sm-auto { margin-right: auto !important; } } @media (min-width: 769px) { /* Padding */ .p-md-0 { padding: 0 !important; } .p-md-5 { padding: 0.5rem !important; } .p-md-10 { padding: 1rem !important; } .p-md-15 { padding: 1.5rem !important; } .p-md-20 { padding: 2rem !important; } .px-md-0 { padding-left: 0 !important; padding-right: 0 !important; } .px-md-5 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .px-md-10 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-md-15 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .px-md-20 { padding-left: 2rem !important; padding-right: 2rem !important; } .py-md-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-md-5 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-md-10 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-md-15 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-md-20 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .pt-md-0 { padding-top: 0 !important; } .pt-md-5 { padding-top: 0.5rem !important; } .pt-md-10 { padding-top: 1rem !important; } .pt-md-15 { padding-top: 1.5rem !important; } .pt-md-20 { padding-top: 2rem !important; } .pb-md-0 { padding-bottom: 0 !important; } .pb-md-5 { padding-bottom: 0.5rem !important; } .pb-md-10 { padding-bottom: 1rem !important; } .pb-md-15 { padding-bottom: 1.5rem !important; } .pb-md-20 { padding-bottom: 2rem !important; } .pl-md-0 { padding-left: 0 !important; } .pl-md-5 { padding-left: 0.5rem !important; } .pl-md-10 { padding-left: 1rem !important; } .pl-md-15 { padding-left: 1.5rem !important; } .pl-md-20 { padding-left: 2rem !important; } .pr-md-0 { padding-right: 0 !important; } .pr-md-5 { padding-right: 0.5rem !important; } .pr-md-10 { padding-right: 1rem !important; } .pr-md-15 { padding-right: 1.5rem !important; } .pr-md-20 { padding-right: 2rem !important; } /* Margin */ .m-md-0 { margin: 0 !important; } .m-md-5 { margin: 0.5rem !important; } .m-md-10 { margin: 1rem !important; } .m-md-15 { margin: 1.5rem !important; } .m-md-20 { margin: 2rem !important; } .m-md-auto { margin: auto !important; } .mx-md-0 { margin-left: 0 !important; margin-right: 0 !important; } .mx-md-5 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; } .mx-md-10 { margin-left: 1rem !important; margin-right: 1rem !important; } .mx-md-15 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .mx-md-20 { margin-left: 2rem !important; margin-right: 2rem !important; } .mx-md-auto { margin-left: auto !important; margin-right: auto !important; } .my-md-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-md-5 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-md-10 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-md-15 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-md-20 { margin-top: 2rem !important; margin-bottom: 2rem !important; } .my-md-auto { margin-top: auto !important; margin-bottom: auto !important; } .mt-md-0 { margin-top: 0 !important; } .mt-md-5 { margin-top: 0.5rem !important; } .mt-md-10 { margin-top: 1rem !important; } .mt-md-15 { margin-top: 1.5rem !important; } .mt-md-20 { margin-top: 2rem !important; } .mt-md-auto { margin-top: auto !important; } .mb-md-0 { margin-bottom: 0 !important; } .mb-md-5 { margin-bottom: 0.5rem !important; } .mb-md-10 { margin-bottom: 1rem !important; } .mb-md-15 { margin-bottom: 1.5rem !important; } .mb-md-20 { margin-bottom: 2rem !important; } .mb-md-auto { margin-bottom: auto !important; } .ml-md-0 { margin-left: 0 !important; } .ml-md-5 { margin-left: 0.5rem !important; } .ml-md-10 { margin-left: 1rem !important; } .ml-md-15 { margin-left: 1.5rem !important; } .ml-md-20 { margin-left: 2rem !important; } .ml-md-auto { margin-left: auto !important; } .mr-md-0 { margin-right: 0 !important; } .mr-md-5 { margin-right: 0.5rem !important; } .mr-md-10 { margin-right: 1rem !important; } .mr-md-15 { margin-right: 1.5rem !important; } .mr-md-20 { margin-right: 2rem !important; } .mr-md-auto { margin-right: auto !important; } } @media (min-width: 993px) { /* Padding */ .p-lg-0 { padding: 0 !important; } .p-lg-5 { padding: 0.5rem !important; } .p-lg-10 { padding: 1rem !important; } .p-lg-15 { padding: 1.5rem !important; } .p-lg-20 { padding: 2rem !important; } .px-lg-0 { padding-left: 0 !important; padding-right: 0 !important; } .px-lg-5 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .px-lg-10 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-lg-15 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .px-lg-20 { padding-left: 2rem !important; padding-right: 2rem !important; } .py-lg-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-lg-5 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-lg-10 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-lg-15 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-lg-20 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .pt-lg-0 { padding-top: 0 !important; } .pt-lg-5 { padding-top: 0.5rem !important; } .pt-lg-10 { padding-top: 1rem !important; } .pt-lg-15 { padding-top: 1.5rem !important; } .pt-lg-20 { padding-top: 2rem !important; } .pb-lg-0 { padding-bottom: 0 !important; } .pb-lg-5 { padding-bottom: 0.5rem !important; } .pb-lg-10 { padding-bottom: 1rem !important; } .pb-lg-15 { padding-bottom: 1.5rem !important; } .pb-lg-20 { padding-bottom: 2rem !important; } .pl-lg-0 { padding-left: 0 !important; } .pl-lg-5 { padding-left: 0.5rem !important; } .pl-lg-10 { padding-left: 1rem !important; } .pl-lg-15 { padding-left: 1.5rem !important; } .pl-lg-20 { padding-left: 2rem !important; } .pr-lg-0 { padding-right: 0 !important; } .pr-lg-5 { padding-right: 0.5rem !important; } .pr-lg-10 { padding-right: 1rem !important; } .pr-lg-15 { padding-right: 1.5rem !important; } .pr-lg-20 { padding-right: 2rem !important; } /* Margin */ .m-lg-0 { margin: 0 !important; } .m-lg-5 { margin: 0.5rem !important; } .m-lg-10 { margin: 1rem !important; } .m-lg-15 { margin: 1.5rem !important; } .m-lg-20 { margin: 2rem !important; } .m-lg-auto { margin: auto !important; } .mx-lg-0 { margin-left: 0 !important; margin-right: 0 !important; } .mx-lg-5 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; } .mx-lg-10 { margin-left: 1rem !important; margin-right: 1rem !important; } .mx-lg-15 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .mx-lg-20 { margin-left: 2rem !important; margin-right: 2rem !important; } .mx-lg-auto { margin-left: auto !important; margin-right: auto !important; } .my-lg-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-lg-5 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-lg-10 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-lg-15 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-lg-20 { margin-top: 2rem !important; margin-bottom: 2rem !important; } .my-lg-auto { margin-top: auto !important; margin-bottom: auto !important; } .mt-lg-0 { margin-top: 0 !important; } .mt-lg-5 { margin-top: 0.5rem !important; } .mt-lg-10 { margin-top: 1rem !important; } .mt-lg-15 { margin-top: 1.5rem !important; } .mt-lg-20 { margin-top: 2rem !important; } .mt-lg-auto { margin-top: auto !important; } .mb-lg-0 { margin-bottom: 0 !important; } .mb-lg-5 { margin-bottom: 0.5rem !important; } .mb-lg-10 { margin-bottom: 1rem !important; } .mb-lg-15 { margin-bottom: 1.5rem !important; } .mb-lg-20 { margin-bottom: 2rem !important; } .mb-lg-auto { margin-bottom: auto !important; } .ml-lg-0 { margin-left: 0 !important; } .ml-lg-5 { margin-left: 0.5rem !important; } .ml-lg-10 { margin-left: 1rem !important; } .ml-lg-15 { margin-left: 1.5rem !important; } .ml-lg-20 { margin-left: 2rem !important; } .ml-lg-auto { margin-left: auto !important; } .mr-lg-0 { margin-right: 0 !important; } .mr-lg-5 { margin-right: 0.5rem !important; } .mr-lg-10 { margin-right: 1rem !important; } .mr-lg-15 { margin-right: 1.5rem !important; } .mr-lg-20 { margin-right: 2rem !important; } .mr-lg-auto { margin-right: auto !important; } } @media (min-width: 1201px) { /* Padding */ .p-xl-0 { padding: 0 !important; } .p-xl-5 { padding: 0.5rem !important; } .p-xl-10 { padding: 1rem !important; } .p-xl-15 { padding: 1.5rem !important; } .p-xl-20 { padding: 2rem !important; } .px-xl-0 { padding-left: 0 !important; padding-right: 0 !important; } .px-xl-5 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .px-xl-10 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-xl-15 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .px-xl-20 { padding-left: 2rem !important; padding-right: 2rem !important; } .py-xl-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-xl-5 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-xl-10 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-xl-15 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-xl-20 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .pt-xl-0 { padding-top: 0 !important; } .pt-xl-5 { padding-top: 0.5rem !important; } .pt-xl-10 { padding-top: 1rem !important; } .pt-xl-15 { padding-top: 1.5rem !important; } .pt-xl-20 { padding-top: 2rem !important; } .pb-xl-0 { padding-bottom: 0 !important; } .pb-xl-5 { padding-bottom: 0.5rem !important; } .pb-xl-10 { padding-bottom: 1rem !important; } .pb-xl-15 { padding-bottom: 1.5rem !important; } .pb-xl-20 { padding-bottom: 2rem !important; } .pl-xl-0 { padding-left: 0 !important; } .pl-xl-5 { padding-left: 0.5rem !important; } .pl-xl-10 { padding-left: 1rem !important; } .pl-xl-15 { padding-left: 1.5rem !important; } .pl-xl-20 { padding-left: 2rem !important; } .pr-xl-0 { padding-right: 0 !important; } .pr-xl-5 { padding-right: 0.5rem !important; } .pr-xl-10 { padding-right: 1rem !important; } .pr-xl-15 { padding-right: 1.5rem !important; } .pr-xl-20 { padding-right: 2rem !important; } /* Margin */ .m-xl-0 { margin: 0 !important; } .m-xl-5 { margin: 0.5rem !important; } .m-xl-10 { margin: 1rem !important; } .m-xl-15 { margin: 1.5rem !important; } .m-xl-20 { margin: 2rem !important; } .m-xl-auto { margin: auto !important; } .mx-xl-0 { margin-left: 0 !important; margin-right: 0 !important; } .mx-xl-5 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; } .mx-xl-10 { margin-left: 1rem !important; margin-right: 1rem !important; } .mx-xl-15 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .mx-xl-20 { margin-left: 2rem !important; margin-right: 2rem !important; } .mx-xl-auto { margin-left: auto !important; margin-right: auto !important; } .my-xl-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-xl-5 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-xl-10 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-xl-15 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-xl-20 { margin-top: 2rem !important; margin-bottom: 2rem !important; } .my-xl-auto { margin-top: auto !important; margin-bottom: auto !important; } .mt-xl-0 { margin-top: 0 !important; } .mt-xl-5 { margin-top: 0.5rem !important; } .mt-xl-10 { margin-top: 1rem !important; } .mt-xl-15 { margin-top: 1.5rem !important; } .mt-xl-20 { margin-top: 2rem !important; } .mt-xl-auto { margin-top: auto !important; } .mb-xl-0 { margin-bottom: 0 !important; } .mb-xl-5 { margin-bottom: 0.5rem !important; } .mb-xl-10 { margin-bottom: 1rem !important; } .mb-xl-15 { margin-bottom: 1.5rem !important; } .mb-xl-20 { margin-bottom: 2rem !important; } .mb-xl-auto { margin-bottom: auto !important; } .ml-xl-0 { margin-left: 0 !important; } .ml-xl-5 { margin-left: 0.5rem !important; } .ml-xl-10 { margin-left: 1rem !important; } .ml-xl-15 { margin-left: 1.5rem !important; } .ml-xl-20 { margin-left: 2rem !important; } .ml-xl-auto { margin-left: auto !important; } .mr-xl-0 { margin-right: 0 !important; } .mr-xl-5 { margin-right: 0.5rem !important; } .mr-xl-10 { margin-right: 1rem !important; } .mr-xl-15 { margin-right: 1.5rem !important; } .mr-xl-20 { margin-right: 2rem !important; } .mr-xl-auto { margin-right: auto !important; } } /* ------------------------------------------------------------------------------- 26. Display utilities [hm-26] ------------------------------------------------------------------------------- */ .d-none { display: none !important; } .d-inline { display: inline !important; } .d-inline-block { display: inline-block !important; } .d-block { display: block !important; } .d-table { display: table !important; } .d-table-row { display: table-row !important; } .d-table-cell { display: table-cell !important; } .d-flex { display: -ms-flexbox !important; display: flex !important; } .d-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; } @media (min-width: 577px) { .d-sm-none { display: none !important; } .d-sm-inline { display: inline !important; } .d-sm-inline-block { display: inline-block !important; } .d-sm-block { display: block !important; } .d-sm-table { display: table !important; } .d-sm-table-row { display: table-row !important; } .d-sm-table-cell { display: table-cell !important; } .d-sm-flex { display: -ms-flexbox !important; display: flex !important; } .d-sm-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; } } @media (min-width: 769px) { .d-md-none { display: none !important; } .d-md-inline { display: inline !important; } .d-md-inline-block { display: inline-block !important; } .d-md-block { display: block !important; } .d-md-table { display: table !important; } .d-md-table-row { display: table-row !important; } .d-md-table-cell { display: table-cell !important; } .d-md-flex { display: -ms-flexbox !important; display: flex !important; } .d-md-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; } } @media (min-width: 993px) { .d-lg-none { display: none !important; } .d-lg-inline { display: inline !important; } .d-lg-inline-block { display: inline-block !important; } .d-lg-block { display: block !important; } .d-lg-table { display: table !important; } .d-lg-table-row { display: table-row !important; } .d-lg-table-cell { display: table-cell !important; } .d-lg-flex { display: -ms-flexbox !important; display: flex !important; } .d-lg-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; } } @media (min-width: 1201px) { .d-xl-none { display: none !important; } .d-xl-inline { display: inline !important; } .d-xl-inline-block { display: inline-block !important; } .d-xl-block { display: block !important; } .d-xl-table { display: table !important; } .d-xl-table-row { display: table-row !important; } .d-xl-table-cell { display: table-cell !important; } .d-xl-flex { display: -ms-flexbox !important; display: flex !important; } .d-xl-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; } } @media (max-width: 576px) { .d-xs-only-none { display: none !important; } } @media (min-width: 577px) and (max-width: 768px) { .d-sm-only-none { display: none !important; } } @media (min-width: 769px) and (max-width: 992px) { .d-md-only-none { display: none !important; } } @media (min-width: 993px) and (max-width: 1200px) { .d-lg-only-none { display: none !important; } } @media (min-width: 1201px) { .d-xl-only-none { display: none !important; } } /* Hidden {breakpoint}-and-up and {breakpoint}-and-down */ .hidden-xs-and-up { display: none !important; } @media (max-width: 576px) { .hidden-xs-and-down { display: none !important; } } @media (min-width: 577px) { .hidden-sm-and-up { display: none !important; } } @media (max-width: 768px) { .hidden-sm-and-down { display: none !important; } } @media (min-width: 769px) { .hidden-md-and-up { display: none !important; } } @media (max-width: 992px) { .hidden-md-and-down { display: none !important; } } @media (min-width: 993px) { .hidden-lg-and-up { display: none !important; } } @media (max-width: 1200px) { .hidden-lg-and-down { display: none !important; } } @media (min-width: 1201px) { .hidden-xl-and-up { display: none !important; } } .hidden-xl-and-down { display: none !important; } /* Hidden in light and dark mode */ body:not(.dark-mode) .hidden-lm { display: none !important; } .dark-mode .hidden-dm { display: none !important; } /* ------------------------------------------------------------------------------- 27. Sizing utilities [hm-27] ------------------------------------------------------------------------------- */ /* Width */ .w-25 { width: 2.5rem !important; } .w-50 { width: 5rem !important; } .w-100 { width: 10rem !important; } .w-150 { width: 15rem !important; } .w-200 { width: 20rem !important; } .w-250 { width: 25rem !important; } .w-300 { width: 30rem !important; } .w-350 { width: 35rem !important; } .w-400 { width: 40rem !important; } .w-450 { width: 45rem !important; } .w-500 { width: 50rem !important; } .w-550 { width: 55rem !important; } .w-600 { width: 60rem !important; } .w-auto { width: auto !important; } .w-quarter { width: 25% !important; } .w-half { width: 50% !important; } .w-three-quarter { width: 75% !important; } .w-full { width: 100% !important; } .mw-full { max-width: 100% !important; } @media (min-width: 577px) { .w-sm-25 { width: 2.5rem !important; } .w-sm-50 { width: 5rem !important; } .w-sm-100 { width: 10rem !important; } .w-sm-150 { width: 15rem !important; } .w-sm-200 { width: 20rem !important; } .w-sm-250 { width: 25rem !important; } .w-sm-300 { width: 30rem !important; } .w-sm-350 { width: 35rem !important; } .w-sm-400 { width: 40rem !important; } .w-sm-450 { width: 45rem !important; } .w-sm-500 { width: 50rem !important; } .w-sm-550 { width: 55rem !important; } .w-sm-600 { width: 60rem !important; } .w-sm-auto { width: auto !important; } .w-sm-quarter { width: 25% !important; } .w-sm-half { width: 50% !important; } .w-sm-three-quarter { width: 75% !important; } .w-sm-full { width: 100% !important; } .mw-sm-full { max-width: 100% !important; } } @media (min-width: 769px) { .w-md-25 { width: 2.5rem !important; } .w-md-50 { width: 5rem !important; } .w-md-100 { width: 10rem !important; } .w-md-150 { width: 15rem !important; } .w-md-200 { width: 20rem !important; } .w-md-250 { width: 25rem !important; } .w-md-300 { width: 30rem !important; } .w-md-350 { width: 35rem !important; } .w-md-400 { width: 40rem !important; } .w-md-450 { width: 45rem !important; } .w-md-500 { width: 50rem !important; } .w-md-550 { width: 55rem !important; } .w-md-600 { width: 60rem !important; } .w-md-auto { width: auto !important; } .w-md-quarter { width: 25% !important; } .w-md-half { width: 50% !important; } .w-md-three-quarter { width: 75% !important; } .w-md-full { width: 100% !important; } .mw-md-full { max-width: 100% !important; } } @media (min-width: 993px) { .w-lg-25 { width: 2.5rem !important; } .w-lg-50 { width: 5rem !important; } .w-lg-100 { width: 10rem !important; } .w-lg-150 { width: 15rem !important; } .w-lg-200 { width: 20rem !important; } .w-lg-250 { width: 25rem !important; } .w-lg-300 { width: 30rem !important; } .w-lg-350 { width: 35rem !important; } .w-lg-400 { width: 40rem !important; } .w-lg-450 { width: 45rem !important; } .w-lg-500 { width: 50rem !important; } .w-lg-550 { width: 55rem !important; } .w-lg-600 { width: 60rem !important; } .w-lg-auto { width: auto !important; } .w-lg-quarter { width: 25% !important; } .w-lg-half { width: 50% !important; } .w-lg-three-quarter { width: 75% !important; } .w-lg-full { width: 100% !important; } .mw-lg-full { max-width: 100% !important; } } @media (min-width: 1201px) { .w-xl-25 { width: 2.5rem !important; } .w-xl-50 { width: 5rem !important; } .w-xl-100 { width: 10rem !important; } .w-xl-150 { width: 15rem !important; } .w-xl-200 { width: 20rem !important; } .w-xl-250 { width: 25rem !important; } .w-xl-300 { width: 30rem !important; } .w-xl-350 { width: 35rem !important; } .w-xl-400 { width: 40rem !important; } .w-xl-450 { width: 45rem !important; } .w-xl-500 { width: 50rem !important; } .w-xl-550 { width: 55rem !important; } .w-xl-600 { width: 60rem !important; } .w-xl-auto { width: auto !important; } .w-xl-quarter { width: 25% !important; } .w-xl-half { width: 50% !important; } .w-xl-three-quarter { width: 75% !important; } .w-xl-full { width: 100% !important; } .mw-xl-full { max-width: 100% !important; } } /* Height */ .h-25 { height: 2.5rem !important; } .h-50 { height: 5rem !important; } .h-100 { height: 10rem !important; } .h-150 { height: 15rem !important; } .h-200 { height: 20rem !important; } .h-250 { height: 25rem !important; } .h-300 { height: 30rem !important; } .h-350 { height: 35rem !important; } .h-400 { height: 40rem !important; } .h-450 { height: 45rem !important; } .h-500 { height: 50rem !important; } .h-550 { height: 55rem !important; } .h-600 { height: 60rem !important; } .h-auto { height: auto !important; } .h-quarter { height: 25% !important; } .h-half { height: 50% !important; } .h-three-quarter { height: 75% !important; } .h-full { height: 100% !important; } .mh-full { max-height: 100% !important; } @media (min-width: 577px) { .h-sm-25 { height: 2.5rem !important; } .h-sm-50 { height: 5rem !important; } .h-sm-100 { height: 10rem !important; } .h-sm-150 { height: 15rem !important; } .h-sm-200 { height: 20rem !important; } .h-sm-250 { height: 25rem !important; } .h-sm-300 { height: 30rem !important; } .h-sm-350 { height: 35rem !important; } .h-sm-400 { height: 40rem !important; } .h-sm-450 { height: 45rem !important; } .h-sm-500 { height: 50rem !important; } .h-sm-550 { height: 55rem !important; } .h-sm-600 { height: 60rem !important; } .h-sm-auto { height: auto !important; } .h-sm-quarter { height: 25% !important; } .h-sm-half { height: 50% !important; } .h-sm-three-quarter { height: 75% !important; } .h-sm-full { height: 100% !important; } .mh-sm-full { max-height: 100% !important; } } @media (min-width: 769px) { .h-md-25 { height: 2.5rem !important; } .h-md-50 { height: 5rem !important; } .h-md-100 { height: 10rem !important; } .h-md-150 { height: 15rem !important; } .h-md-200 { height: 20rem !important; } .h-md-250 { height: 25rem !important; } .h-md-300 { height: 30rem !important; } .h-md-350 { height: 35rem !important; } .h-md-400 { height: 40rem !important; } .h-md-450 { height: 45rem !important; } .h-md-500 { height: 50rem !important; } .h-md-550 { height: 55rem !important; } .h-md-600 { height: 60rem !important; } .h-md-auto { height: auto !important; } .h-md-quarter { height: 25% !important; } .h-md-half { height: 50% !important; } .h-md-three-quarter { height: 75% !important; } .h-md-full { height: 100% !important; } .mh-md-full { max-height: 100% !important; } } @media (min-width: 993px) { .h-lg-25 { height: 2.5rem !important; } .h-lg-50 { height: 5rem !important; } .h-lg-100 { height: 10rem !important; } .h-lg-150 { height: 15rem !important; } .h-lg-200 { height: 20rem !important; } .h-lg-250 { height: 25rem !important; } .h-lg-300 { height: 30rem !important; } .h-lg-350 { height: 35rem !important; } .h-lg-400 { height: 40rem !important; } .h-lg-450 { height: 45rem !important; } .h-lg-500 { height: 50rem !important; } .h-lg-550 { height: 55rem !important; } .h-lg-600 { height: 60rem !important; } .h-lg-auto { height: auto !important; } .h-lg-quarter { height: 25% !important; } .h-lg-half { height: 50% !important; } .h-lg-three-quarter { height: 75% !important; } .h-lg-full { height: 100% !important; } .mh-lg-full { max-height: 100% !important; } } @media (min-width: 1201px) { .h-xl-25 { height: 2.5rem !important; } .h-xl-50 { height: 5rem !important; } .h-xl-100 { height: 10rem !important; } .h-xl-150 { height: 15rem !important; } .h-xl-200 { height: 20rem !important; } .h-xl-250 { height: 25rem !important; } .h-xl-300 { height: 30rem !important; } .h-xl-350 { height: 35rem !important; } .h-xl-400 { height: 40rem !important; } .h-xl-450 { height: 45rem !important; } .h-xl-500 { height: 50rem !important; } .h-xl-550 { height: 55rem !important; } .h-xl-600 { height: 60rem !important; } .h-xl-auto { height: auto !important; } .h-xl-quarter { height: 25% !important; } .h-xl-half { height: 50% !important; } .h-xl-three-quarter { height: 75% !important; } .h-xl-full { height: 100% !important; } .mh-xl-full { max-height: 100% !important; } } /* ------------------------------------------------------------------------------- 28. Flex utilities [hm-28] ------------------------------------------------------------------------------- */ .flex-row { -ms-flex-direction: row !important; flex-direction: row !important; } .flex-column { -ms-flex-direction: column !important; flex-direction: column !important; } .flex-row-reverse { -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .flex-column-reverse { -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .flex-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .flex-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .flex-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .flex-fill { -ms-flex: 1 1 auto !important; flex: 1 1 auto !important; } .flex-grow-0 { -ms-flex-positive: 0 !important; flex-grow: 0 !important; } .flex-grow-1 { -ms-flex-positive: 1 !important; flex-grow: 1 !important; } .flex-shrink-0 { -ms-flex-negative: 0 !important; flex-shrink: 0 !important; } .flex-shrink-1 { -ms-flex-negative: 1 !important; flex-shrink: 1 !important; } .justify-content-start { -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-end { -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-content-center { -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-between { -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .align-items-start { -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-end { -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-center { -ms-flex-align: center !important; align-items: center !important; } .align-items-baseline { -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-stretch { -ms-flex-align: stretch !important; align-items: stretch !important; } .align-content-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .align-content-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .align-content-center { -ms-flex-line-pack: center !important; align-content: center !important; } .align-content-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .align-content-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .align-content-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } .align-self-auto { -ms-flex-item-align: auto !important; align-self: auto !important; } .align-self-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .align-self-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .align-self-center { -ms-flex-item-align: center !important; align-self: center !important; } .align-self-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; } .align-self-stretch { -ms-flex-item-align: stretch !important; align-self: stretch !important; } @media (min-width: 577px) { .flex-sm-row { -ms-flex-direction: row !important; flex-direction: row !important; } .flex-sm-column { -ms-flex-direction: column !important; flex-direction: column !important; } .flex-sm-row-reverse { -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .flex-sm-column-reverse { -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .flex-sm-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .flex-sm-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .flex-sm-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .flex-sm-fill { -ms-flex: 1 1 auto !important; flex: 1 1 auto !important; } .flex-sm-grow-0 { -ms-flex-positive: 0 !important; flex-grow: 0 !important; } .flex-sm-grow-1 { -ms-flex-positive: 1 !important; flex-grow: 1 !important; } .flex-sm-shrink-0 { -ms-flex-negative: 0 !important; flex-shrink: 0 !important; } .flex-sm-shrink-1 { -ms-flex-negative: 1 !important; flex-shrink: 1 !important; } .justify-content-sm-start { -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-sm-end { -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-content-sm-center { -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-sm-between { -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-sm-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .align-items-sm-start { -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-sm-end { -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-sm-center { -ms-flex-align: center !important; align-items: center !important; } .align-items-sm-baseline { -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-sm-stretch { -ms-flex-align: stretch !important; align-items: stretch !important; } .align-content-sm-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .align-content-sm-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .align-content-sm-center { -ms-flex-line-pack: center !important; align-content: center !important; } .align-content-sm-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .align-content-sm-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .align-content-sm-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } .align-self-sm-auto { -ms-flex-item-align: auto !important; align-self: auto !important; } .align-self-sm-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .align-self-sm-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .align-self-sm-center { -ms-flex-item-align: center !important; align-self: center !important; } .align-self-sm-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; } .align-self-sm-stretch { -ms-flex-item-align: stretch !important; align-self: stretch !important; } } @media (min-width: 769px) { .flex-md-row { -ms-flex-direction: row !important; flex-direction: row !important; } .flex-md-column { -ms-flex-direction: column !important; flex-direction: column !important; } .flex-md-row-reverse { -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .flex-md-column-reverse { -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .flex-md-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .flex-md-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .flex-md-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .flex-md-fill { -ms-flex: 1 1 auto !important; flex: 1 1 auto !important; } .flex-md-grow-0 { -ms-flex-positive: 0 !important; flex-grow: 0 !important; } .flex-md-grow-1 { -ms-flex-positive: 1 !important; flex-grow: 1 !important; } .flex-md-shrink-0 { -ms-flex-negative: 0 !important; flex-shrink: 0 !important; } .flex-md-shrink-1 { -ms-flex-negative: 1 !important; flex-shrink: 1 !important; } .justify-content-md-start { -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-md-end { -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-content-md-center { -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-md-between { -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-md-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .align-items-md-start { -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-md-end { -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-md-center { -ms-flex-align: center !important; align-items: center !important; } .align-items-md-baseline { -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-md-stretch { -ms-flex-align: stretch !important; align-items: stretch !important; } .align-content-md-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .align-content-md-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .align-content-md-center { -ms-flex-line-pack: center !important; align-content: center !important; } .align-content-md-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .align-content-md-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .align-content-md-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } .align-self-md-auto { -ms-flex-item-align: auto !important; align-self: auto !important; } .align-self-md-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .align-self-md-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .align-self-md-center { -ms-flex-item-align: center !important; align-self: center !important; } .align-self-md-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; } .align-self-md-stretch { -ms-flex-item-align: stretch !important; align-self: stretch !important; } } @media (min-width: 993px) { .flex-lg-row { -ms-flex-direction: row !important; flex-direction: row !important; } .flex-lg-column { -ms-flex-direction: column !important; flex-direction: column !important; } .flex-lg-row-reverse { -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .flex-lg-column-reverse { -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .flex-lg-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .flex-lg-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .flex-lg-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .flex-lg-fill { -ms-flex: 1 1 auto !important; flex: 1 1 auto !important; } .flex-lg-grow-0 { -ms-flex-positive: 0 !important; flex-grow: 0 !important; } .flex-lg-grow-1 { -ms-flex-positive: 1 !important; flex-grow: 1 !important; } .flex-lg-shrink-0 { -ms-flex-negative: 0 !important; flex-shrink: 0 !important; } .flex-lg-shrink-1 { -ms-flex-negative: 1 !important; flex-shrink: 1 !important; } .justify-content-lg-start { -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-lg-end { -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-content-lg-center { -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-lg-between { -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-lg-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .align-items-lg-start { -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-lg-end { -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-lg-center { -ms-flex-align: center !important; align-items: center !important; } .align-items-lg-baseline { -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-lg-stretch { -ms-flex-align: stretch !important; align-items: stretch !important; } .align-content-lg-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .align-content-lg-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .align-content-lg-center { -ms-flex-line-pack: center !important; align-content: center !important; } .align-content-lg-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .align-content-lg-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .align-content-lg-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } .align-self-lg-auto { -ms-flex-item-align: auto !important; align-self: auto !important; } .align-self-lg-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .align-self-lg-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .align-self-lg-center { -ms-flex-item-align: center !important; align-self: center !important; } .align-self-lg-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; } .align-self-lg-stretch { -ms-flex-item-align: stretch !important; align-self: stretch !important; } } @media (min-width: 1201px) { .flex-xl-row { -ms-flex-direction: row !important; flex-direction: row !important; } .flex-xl-column { -ms-flex-direction: column !important; flex-direction: column !important; } .flex-xl-row-reverse { -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .flex-xl-column-reverse { -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .flex-xl-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .flex-xl-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .flex-xl-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .flex-xl-fill { -ms-flex: 1 1 auto !important; flex: 1 1 auto !important; } .flex-xl-grow-0 { -ms-flex-positive: 0 !important; flex-grow: 0 !important; } .flex-xl-grow-1 { -ms-flex-positive: 1 !important; flex-grow: 1 !important; } .flex-xl-shrink-0 { -ms-flex-negative: 0 !important; flex-shrink: 0 !important; } .flex-xl-shrink-1 { -ms-flex-negative: 1 !important; flex-shrink: 1 !important; } .justify-content-xl-start { -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-xl-end { -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-content-xl-center { -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-xl-between { -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-xl-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .align-items-xl-start { -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-xl-end { -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-xl-center { -ms-flex-align: center !important; align-items: center !important; } .align-items-xl-baseline { -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-xl-stretch { -ms-flex-align: stretch !important; align-items: stretch !important; } .align-content-xl-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .align-content-xl-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .align-content-xl-center { -ms-flex-line-pack: center !important; align-content: center !important; } .align-content-xl-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .align-content-xl-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .align-content-xl-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } .align-self-xl-auto { -ms-flex-item-align: auto !important; align-self: auto !important; } .align-self-xl-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .align-self-xl-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .align-self-xl-center { -ms-flex-item-align: center !important; align-self: center !important; } .align-self-xl-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; } .align-self-xl-stretch { -ms-flex-item-align: stretch !important; align-self: stretch !important; } } /* Flex reset */ .flex-reset { -ms-flex: 0 1 auto !important; flex: 0 1 auto !important; } @media (min-width: 577px) { .flex-sm-reset { -ms-flex: 0 1 auto !important; flex: 0 1 auto !important; } } @media (min-width: 769px) { .flex-md-reset { -ms-flex: 0 1 auto !important; flex: 0 1 auto !important; } } @media (min-width: 993px) { .flex-lg-reset { -ms-flex: 0 1 auto !important; flex: 0 1 auto !important; } } @media (min-width: 1201px) { .flex-xl-reset { -ms-flex: 0 1 auto !important; flex: 0 1 auto !important; } } /* ------------------------------------------------------------------------------- 29. Position utilities [hm-29] ------------------------------------------------------------------------------- */ .position-static { position: static !important; } .position-relative { position: relative !important; } .position-absolute { position: absolute !important; } .position-fixed { position: fixed !important; } .position-sticky { position: -webkit-sticky !important; position: sticky !important; } .top-0 { top: 0 !important; } .bottom-0 { bottom: 0 !important; } .left-0 { left: 0 !important; } .right-0 { right: 0 !important; } .top-auto { top: auto !important; } .bottom-auto { bottom: auto !important; } .left-auto { left: auto !important; } .right-auto { right: auto !important; } @media (min-width: 577px) { .position-sm-static { position: static !important; } .position-sm-relative { position: relative !important; } .position-sm-absolute { position: absolute !important; } .position-sm-fixed { position: fixed !important; } .position-sm-sticky { position: -webkit-sticky !important; position: sticky !important; } .top-sm-0 { top: 0 !important; } .bottom-sm-0 { bottom: 0 !important; } .left-sm-0 { left: 0 !important; } .right-sm-0 { right: 0 !important; } .top-sm-auto { top: auto !important; } .bottom-sm-auto { bottom: auto !important; } .left-sm-auto { left: auto !important; } .right-sm-auto { right: auto !important; } } @media (min-width: 769px) { .position-md-static { position: static !important; } .position-md-relative { position: relative !important; } .position-md-absolute { position: absolute !important; } .position-md-fixed { position: fixed !important; } .position-md-sticky { position: -webkit-sticky !important; position: sticky !important; } .top-md-0 { top: 0 !important; } .bottom-md-0 { bottom: 0 !important; } .left-md-0 { left: 0 !important; } .right-md-0 { right: 0 !important; } .top-md-auto { top: auto !important; } .bottom-md-auto { bottom: auto !important; } .left-md-auto { left: auto !important; } .right-md-auto { right: auto !important; } } @media (min-width: 993px) { .position-lg-static { position: static !important; } .position-lg-relative { position: relative !important; } .position-lg-absolute { position: absolute !important; } .position-lg-fixed { position: fixed !important; } .position-lg-sticky { position: -webkit-sticky !important; position: sticky !important; } .top-lg-0 { top: 0 !important; } .bottom-lg-0 { bottom: 0 !important; } .left-lg-0 { left: 0 !important; } .right-lg-0 { right: 0 !important; } .top-lg-auto { top: auto !important; } .bottom-lg-auto { bottom: auto !important; } .left-lg-auto { left: auto !important; } .right-lg-auto { right: auto !important; } } @media (min-width: 1201px) { .position-xl-static { position: static !important; } .position-xl-relative { position: relative !important; } .position-xl-absolute { position: absolute !important; } .position-xl-fixed { position: fixed !important; } .position-xl-sticky { position: -webkit-sticky !important; position: sticky !important; } .top-xl-0 { top: 0 !important; } .bottom-xl-0 { bottom: 0 !important; } .left-xl-0 { left: 0 !important; } .right-xl-0 { right: 0 !important; } .top-xl-auto { top: auto !important; } .bottom-xl-auto { bottom: auto !important; } .left-xl-auto { left: auto !important; } .right-xl-auto { right: auto !important; } } /* ------------------------------------------------------------------------------- 30. Other utilities [hm-30] ------------------------------------------------------------------------------- */ .clearfix::after { display: block; clear: both; content: ""; } /* Screen reader */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .sr-only-focusable:active, .sr-only-focusable:focus { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; } /* Borders */ .border { border: 1px solid rgba(0, 0, 0, 0.2) !important; } .border-top { border-top: 1px solid rgba(0, 0, 0, 0.2) !important; } .border-bottom { border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important; } .border-left { border-left: 1px solid rgba(0, 0, 0, 0.2) !important; } .border-right { border-right: 1px solid rgba(0, 0, 0, 0.2) !important; } .dark-mode .border { border: 1px solid rgba(255, 255, 255, 0.2) !important; } .dark-mode .border-top { border-top: 1px solid rgba(255, 255, 255, 0.2) !important; } .dark-mode .border-bottom { border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important; } .dark-mode .border-left { border-left: 1px solid rgba(255, 255, 255, 0.2) !important; } .dark-mode .border-right { border-right: 1px solid rgba(255, 255, 255, 0.2) !important; } .border-0 { border: none !important; } .border-top-0 { border-top: none !important; } .border-bottom-0 { border-bottom: none !important; } .border-left-0 { border-left: none !important; } .border-right-0 { border-right: none !important; } .rounded-0 { border-radius: 0 !important; } .rounded { border-radius: 0.4rem !important; } .rounded-top { border-top-left-radius: 0.4rem !important; border-top-right-radius: 0.4rem !important; } .rounded-bottom { border-bottom-left-radius: 0.4rem !important; border-bottom-right-radius: 0.4rem !important; } .rounded-left { border-top-left-radius: 0.4rem !important; border-bottom-left-radius: 0.4rem !important; } .rounded-right { border-top-right-radius: 0.4rem !important; border-bottom-right-radius: 0.4rem !important; } .rounded-circle { border-radius: 50% !important; } .border-transparent { border: 1px solid transparent !important; } .dark-mode .border-transparent { border: 1px solid transparent !important; } .border-top-transparent { border-top: 1px solid transparent !important; } .dark-mode .border-top-transparent { border-top: 1px solid transparent !important; } .border-bottom-transparent { border-bottom: 1px solid transparent !important; } .dark-mode .border-bottom-transparent { border-bottom: 1px solid transparent !important; } .border-left-transparent { border-left: 1px solid transparent !important; } .dark-mode .border-left-transparent { border-left: 1px solid transparent !important; } .border-right-transparent { border-right: 1px solid transparent !important; } .dark-mode .border-right-transparent { border-right: 1px solid transparent !important; } /* Float */ .float-left { float: left !important; } .float-right { float: right !important; } .float-none { float: none !important; } @media (min-width: 577px) { .float-sm-left { float: left !important; } .float-sm-right { float: right !important; } .float-sm-none { float: none !important; } } @media (min-width: 769px) { .float-md-left { float: left !important; } .float-md-right { float: right !important; } .float-md-none { float: none !important; } } @media (min-width: 993px) { .float-lg-left { float: left !important; } .float-lg-right { float: right !important; } .float-lg-none { float: none !important; } } @media (min-width: 1201px) { .float-xl-left { float: left !important; } .float-xl-right { float: right !important; } .float-xl-none { float: none !important; } } /* Text */ .text-monospace { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; } .text-justify { text-align: justify !important; } .text-wrap { white-space: normal !important; } .text-nowrap { white-space: nowrap !important; } .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } .text-center { text-align: center !important; } @media (min-width: 577px) { .text-sm-left { text-align: left !important; } .text-sm-right { text-align: right !important; } .text-sm-center { text-align: center !important; } } @media (min-width: 769px) { .text-md-left { text-align: left !important; } .text-md-right { text-align: right !important; } .text-md-center { text-align: center !important; } } @media (min-width: 993px) { .text-lg-left { text-align: left !important; } .text-lg-right { text-align: right !important; } .text-lg-center { text-align: center !important; } } @media (min-width: 1201px) { .text-xl-left { text-align: left !important; } .text-xl-right { text-align: right !important; } .text-xl-center { text-align: center !important; } } .text-lowercase { text-transform: lowercase !important; } .text-uppercase { text-transform: uppercase !important; } .text-capitalize { text-transform: capitalize !important; } .font-italic { font-style: italic !important; } .text-hide { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; } .text-decoration-none { text-decoration: none !important; } .text-decoration-underline { text-decoration: underline !important; } .text-break { word-wrap: break-word !important; } .text-reset { color: inherit !important; } .text-extra-letter-spacing { /* Improves readability in most cases */ letter-spacing: 0.03rem !important; } .text-extra-letter-spacing * { /* Improves readability in most cases */ letter-spacing: 0.03rem !important; } .text-smoothing-antialiased, body:not(.dark-mode) .text-smoothing-antialiased-lm, .dark-mode .text-smoothing-antialiased-dm { -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } .text-smoothing-auto, body:not(.dark-mode) .text-smoothing-auto-lm, .dark-mode .text-smoothing-auto-dm { -webkit-font-smoothing: auto !important; -moz-osx-font-smoothing: auto !important; } /* Font sizes and weights */ .font-size-12 { font-size: 1.2rem !important; } .font-size-14 { font-size: 1.4rem !important; } .font-size-16 { font-size: 1.6rem !important; } .font-size-18 { font-size: 1.8rem !important; } .font-size-20 { font-size: 2rem !important; } .font-size-22 { font-size: 2.2rem !important; } .font-size-24 { font-size: 2.4rem !important; } .font-weight-light { font-weight: 300 !important; } .font-weight-lighter { font-weight: lighter !important; } .font-weight-normal { font-weight: 400 !important; } .font-weight-medium { font-weight: 500 !important; } .font-weight-semi-bold { font-weight: 600 !important; } .font-weight-bold { font-weight: 700 !important; } .font-weight-bolder { font-weight: bolder !important; } /* Background colors */ .bg-white { background-color: #ffffff !important; } body:not(.dark-mode) .bg-white-lm { background-color: #ffffff !important; } .dark-mode .bg-white-dm { background-color: #ffffff !important; } .bg-light { background-color: #ecf0f1 !important; } body:not(.dark-mode) .bg-light-lm { background-color: #ecf0f1 !important; } .dark-mode .bg-light-dm { background-color: #ecf0f1 !important; } .bg-transparent, body:not(.dark-mode) .bg-transparent-lm, .dark-mode .bg-transparent-dm { background-color: transparent !important; } .bg-primary { background-color: #1890ff !important; } body:not(.dark-mode) .bg-primary-lm { background-color: #1890ff !important; } .dark-mode .bg-primary-dm { background-color: #1890ff !important; } .bg-success { background-color: #0be881 !important; } body:not(.dark-mode) .bg-success-lm { background-color: #0be881 !important; } .dark-mode .bg-success-dm { background-color: #0be881 !important; } .bg-secondary { background-color: #ffcf00 !important; } body:not(.dark-mode) .bg-secondary-lm { background-color: #ffcf00 !important; } .dark-mode .bg-secondary-dm { background-color: #ffcf00 !important; } .bg-danger { background-color: #ff4d4f !important; } body:not(.dark-mode) .bg-danger-lm { background-color: #ff4d4f !important; } .dark-mode .bg-danger-dm { background-color: #ff4d4f !important; } .bg-dark-light { background-color: #25282c !important; } body:not(.dark-mode) .bg-dark-light-lm { background-color: #25282c !important; } .dark-mode .bg-dark-light-dm { background-color: #25282c !important; } .bg-dark { background-color: #191c20 !important; } body:not(.dark-mode) .bg-dark-lm { background-color: #191c20 !important; } .dark-mode .bg-dark-dm { background-color: #191c20 !important; } .bg-very-dark { background-color: #111417 !important; } body:not(.dark-mode) .bg-very-dark-lm { background-color: #111417 !important; } .dark-mode .bg-very-dark-dm { background-color: #111417 !important; } /* Text colors */ /* Text white */ .text-white, body:not(.dark-mode) .text-white-lm, .dark-mode .text-white-dm { color: #ffffff !important; } /* Text muted */ .text-muted { color: rgba(0, 0, 0, 0.6) !important; } body:not(.dark-mode) .text-muted-lm { color: rgba(0, 0, 0, 0.6) !important; } .dark-mode .text-muted { color: rgba(255, 255, 255, 0.6) !important; } .dark-mode .text-muted-dm { color: rgba(255, 255, 255, 0.6) !important; } /* Text primary */ .text-primary { color: #1890ff !important; } body:not(.dark-mode) .text-primary-lm { color: #1890ff !important; } .dark-mode .text-primary-dm { color: #1890ff !important; } a.text-primary:hover { color: #45a3fb !important; } a.text-primary:focus { color: #45a3fb !important; } body:not(.dark-mode) a.text-primary-lm:hover { color: #45a3fb !important; } body:not(.dark-mode) a.text-primary-lm:focus { color: #45a3fb !important; } .dark-mode a.text-primary-dm:hover { color: #45a3fb !important; } .dark-mode a.text-primary-dm:focus { color: #45a3fb !important; } /* Text success */ .text-success { color: #0be881 !important; } body:not(.dark-mode) .text-success-lm { color: #0be881 !important; } .dark-mode .text-success-dm { color: #0be881 !important; } a.text-success:hover { color: #81eea8 !important; } a.text-success:focus { color: #81eea8 !important; } body:not(.dark-mode) a.text-success-lm:hover { color: #81eea8 !important; } body:not(.dark-mode) a.text-success-lm:focus { color: #81eea8 !important; } .dark-mode a.text-success-dm:hover { color: #81eea8 !important; } .dark-mode a.text-success-dm:focus { color: #81eea8 !important; } /* Text secondary */ .text-secondary { color: #ffcf00 !important; } body:not(.dark-mode) .text-secondary-lm { color: #ffcf00 !important; } .dark-mode .text-secondary-dm { color: #ffcf00 !important; } a.text-secondary:hover { color: #ffe04d !important; } a.text-secondary:focus { color: #ffe04d !important; } body:not(.dark-mode) a.text-secondary-lm:hover { color: #ffe04d !important; } body:not(.dark-mode) a.text-secondary-lm:focus { color: #ffe04d !important; } .dark-mode a.text-secondary-dm:hover { color: #ffe04d !important; } .dark-mode a.text-secondary-dm:focus { color: #ffe04d !important; } /* Text danger */ .text-danger { color: #ff4d4f !important; } body:not(.dark-mode) .text-danger-lm { color: #ff4d4f !important; } .dark-mode .text-danger-dm { color: #ff4d4f !important; } a.text-danger:hover { color: #ed586c !important; } a.text-danger:focus { color: #ed586c !important; } body:not(.dark-mode) a.text-danger-lm:hover { color: #ed586c !important; } body:not(.dark-mode) a.text-danger-lm:focus { color: #ed586c !important; } .dark-mode a.text-danger-dm:hover { color: #ed586c !important; } .dark-mode a.text-danger-dm:focus { color: #ed586c !important; } /* Text light */ .text-light { color: rgba(255, 255, 255, 0.8) !important; } body:not(.dark-mode) .text-light-lm { color: rgba(255, 255, 255, 0.8) !important; } .dark-mode .text-light-dm { color: rgba(255, 255, 255, 0.8) !important; } a.text-light:hover { color: rgba(255, 255, 255, 0.65) !important; } a.text-light:focus { color: rgba(255, 255, 255, 0.65) !important; } body:not(.dark-mode) a.text-light-lm:hover { color: rgba(255, 255, 255, 0.65) !important; } body:not(.dark-mode) a.text-light-lm:focus { color: rgba(255, 255, 255, 0.65) !important; } .dark-mode a.text-light-dm:hover { color: rgba(255, 255, 255, 0.65) !important; } .dark-mode a.text-light-dm:focus { color: rgba(255, 255, 255, 0.65) !important; } /* Text light */ .text-dark { color: rgba(0, 0, 0, 0.85) !important; } body:not(.dark-mode) .text-dark-lm { color: rgba(0, 0, 0, 0.85) !important; } .dark-mode .text-dark-dm { color: rgba(0, 0, 0, 0.85) !important; } a.text-dark:hover { color: rgba(0, 0, 0, 0.7) !important; } a.text-dark:focus { color: rgba(0, 0, 0, 0.7) !important; } body:not(.dark-mode) a.text-dark-lm:hover { color: rgba(0, 0, 0, 0.7) !important; } body:not(.dark-mode) a.text-dark-lm:focus { color: rgba(0, 0, 0, 0.7) !important; } .dark-mode a.text-dark-dm:hover { color: rgba(0, 0, 0, 0.7) !important; } .dark-mode a.text-dark-dm:focus { color: rgba(0, 0, 0, 0.7) !important; } /* Overflow utilities */ .overflow-hidden { overflow: hidden !important; } .overflow-x-hidden { overflow-x: hidden !important; } .overflow-y-hidden { overflow-y: hidden !important; } .overflow-auto { overflow: auto !important; } .overflow-x-auto { overflow-x: auto !important; } .overflow-y-auto { overflow-y: auto !important; } .overflow-scroll { overflow: scroll !important; } .overflow-x-scroll { overflow-x: scroll !important; } .overflow-y-scroll { overflow-y: scroll !important; } @media (min-width: 577px) { .overflow-sm-hidden { overflow: hidden !important; } .overflow-x-sm-hidden { overflow-x: hidden !important; } .overflow-y-sm-hidden { overflow-y: hidden !important; } .overflow-sm-auto { overflow: auto !important; } .overflow-x-sm-auto { overflow-x: auto !important; } .overflow-y-sm-auto { overflow-y: auto !important; } .overflow-sm-scroll { overflow: scroll !important; } .overflow-x-sm-scroll { overflow-x: scroll !important; } .overflow-y-sm-scroll { overflow-y: scroll !important; } } @media (min-width: 769px) { .overflow-md-hidden { overflow: hidden !important; } .overflow-x-md-hidden { overflow-x: hidden !important; } .overflow-y-md-hidden { overflow-y: hidden !important; } .overflow-md-auto { overflow: auto !important; } .overflow-x-md-auto { overflow-x: auto !important; } .overflow-y-md-auto { overflow-y: auto !important; } .overflow-md-scroll { overflow: scroll !important; } .overflow-x-md-scroll { overflow-x: scroll !important; } .overflow-y-md-scroll { overflow-y: scroll !important; } } @media (min-width: 993px) { .overflow-lg-hidden { overflow: hidden !important; } .overflow-x-lg-hidden { overflow-x: hidden !important; } .overflow-y-lg-hidden { overflow-y: hidden !important; } .overflow-lg-auto { overflow: auto !important; } .overflow-x-lg-auto { overflow-x: auto !important; } .overflow-y-lg-auto { overflow-y: auto !important; } .overflow-lg-scroll { overflow: scroll !important; } .overflow-x-lg-scroll { overflow-x: scroll !important; } .overflow-y-lg-scroll { overflow-y: scroll !important; } } @media (min-width: 1201px) { .overflow-xl-hidden { overflow: hidden !important; } .overflow-x-xl-hidden { overflow-x: hidden !important; } .overflow-y-xl-hidden { overflow-y: hidden !important; } .overflow-xl-auto { overflow: auto !important; } .overflow-x-xl-auto { overflow-x: auto !important; } .overflow-y-xl-auto { overflow-y: auto !important; } .overflow-xl-scroll { overflow: scroll !important; } .overflow-x-xl-scroll { overflow-x: scroll !important; } .overflow-y-xl-scroll { overflow-y: scroll !important; } } /* Visibility utilities */ .visible { visibility: visible !important; } .invisible { visibility: hidden !important; } body:not(.dark-mode) .visible-lm { visibility: visible !important; } body:not(.dark-mode) .invisible-lm { visibility: hidden !important; } .dark-mode .visible-dm { visibility: visible !important; } .dark-mode .invisible-dm { visibility: hidden !important; } /* Vertical align utilities */ .align-baseline { vertical-align: baseline !important; } .align-top { vertical-align: top !important; } .align-middle { vertical-align: middle !important; } .align-bottom { vertical-align: bottom !important; } .align-text-bottom { vertical-align: text-bottom !important; } .align-text-top { vertical-align: text-top !important; } /* Z-index utilities */ .z-0 { z-index: 0 !important; } .z-10 { z-index: 10 !important; } .z-20 { z-index: 20 !important; } .z-30 { z-index: 30 !important; } .z-40 { z-index: 40 !important; } .z-50 { z-index: 50 !important; } .z-auto { z-index: auto !important; } @media (min-width: 577px) { .z-sm-0 { z-index: 0 !important; } .z-sm-10 { z-index: 10 !important; } .z-sm-20 { z-index: 20 !important; } .z-sm-30 { z-index: 30 !important; } .z-sm-40 { z-index: 40 !important; } .z-sm-50 { z-index: 50 !important; } .z-sm-auto { z-index: auto !important; } } @media (min-width: 769px) { .z-md-0 { z-index: 0 !important; } .z-md-10 { z-index: 10 !important; } .z-md-20 { z-index: 20 !important; } .z-md-30 { z-index: 30 !important; } .z-md-40 { z-index: 40 !important; } .z-md-50 { z-index: 50 !important; } .z-md-auto { z-index: auto !important; } } @media (min-width: 993px) { .z-lg-0 { z-index: 0 !important; } .z-lg-10 { z-index: 10 !important; } .z-lg-20 { z-index: 20 !important; } .z-lg-30 { z-index: 30 !important; } .z-lg-40 { z-index: 40 !important; } .z-lg-50 { z-index: 50 !important; } .z-lg-auto { z-index: auto !important; } } @media (min-width: 1201px) { .z-xl-0 { z-index: 0 !important; } .z-xl-10 { z-index: 10 !important; } .z-xl-20 { z-index: 20 !important; } .z-xl-30 { z-index: 30 !important; } .z-xl-40 { z-index: 40 !important; } .z-xl-50 { z-index: 50 !important; } .z-xl-auto { z-index: auto !important; } } /* Box shadow utilities */ .shadow-none { -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; } .shadow-sm { -moz-box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.15) !important; -webkit-box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.15) !important; box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.15) !important; } .dark-mode .shadow-sm { -moz-box-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.4) !important; -webkit-box-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.4) !important; box-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.4) !important; } .shadow { -moz-box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.15) !important; -webkit-box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.15) !important; box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.15) !important; } .dark-mode .shadow { -moz-box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.4) !important; -webkit-box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.4) !important; box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.4) !important; } .shadow-lg { -moz-box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.15) !important; -webkit-box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.15) !important; box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.15) !important; } .dark-mode .shadow-lg { -moz-box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.4) !important; -webkit-box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.4) !important; box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.4) !important; } /* Pointer events utilities */ .pointer-events-auto { pointer-events: auto !important; } .pointer-events-none { pointer-events: none !important; }