/** * ---------------------------------------------------------------------------- * Halfmoon CSS * Version: 2.0 * https://www.gethalfmoon.com * Copyright 2022 - Present, Halfmoon UI, Tahmid * Licensed under MIT (https://www.gethalfmoon.com/license) * ---------------------------------------------------------------------------- * The above notice must be included in its entirety when this file is used. */ /* START VARIABLES */ /** * Notes on variables * * Variable names are long, descriptive, and self-explanatory. The only thing * to understand about them are the states. * * The {...}-hover variables are used for the :hover state, while {...}-active * variables are used for the :active state. Variables for the :active state * are mainly available for buttons and components that are styled the same as * buttons. On the other hand, variables for the :focus state are mainly * available for input elements. Outline variables are only available when * this :focus state is used. * * Variables with the {...}-active-{...} format don't actually represent the * :active state, but the .active class instead. So for example, the variable * --breadcrumb-item-active-text-color is used for setting the text color of * breadcrumb items that have the class .active. As mentioned above, the * variables for the :active state have the {...}-active format, with the * state at the end of the variable. * * By default, the browser's :focus-visible effect is preserved. This is ideal * because most modern browsers use an indicator with a high level of contrast * on both light and dark backgrounds. Therefore, navigation with keyboard is * very easy. This also has the added benefit of never showing the indicator * when using a mouse to navigate, which is also ideal, because the indicator * can often look visually displeasing due to the high contrast. * * There is no pattern to what variables are available for what components. * The availability depends entirely on what makes sense for that given * component, and to a lesser extent, what the user may want to override when * making a theme. * * It is very important that all components look good on both the body * background color (--base-body-bg-color) and the content background color * (--base-content-bg-color). Ideally, they should also look okay on the very * light and very dim variations of each of the context colors. * * The background clipping variables are available mainly to offset background * bleeding when it occurs, by setting the property to padding-box. * * By default, Halfmoon uses auto-scaling on screens >= 1600px. For this * reason, rem units are used (everything can scale up). The base is adjusted * so that 10px = 1rem. * * The only time px should be used is when a fixed size is always required, * especially if that fixed size is 1px. For example, border widths, outline * widths, divider heights, etc. * * Background image variables are available for some components. These are * useful for setting gradients. However, border image variables are not * available, because most browsers do not support rounded border images (yet). * * The full list of font related variables are mainly available for block * level typographical components, such as headings and blockquotes. * * Any component that could be a link has text decoration variables available * for at least two states (base and :hover). * * Font smoothing variables are available for nearly every component. This is * very important because applying antialiasing on everything can result in * serious readability issues. Contextual variations of the same component * have their own variables for font smoothing. * * The calc() function is used wherever it makes sense to calculate the value * of some variable. Please note, nested calc() functions should generally be * avoided for maximum browser support. */ /** * ---------------------------------------------------------------------------- * [ Base - Variables ] * ---------------------------------------------------------------------------- */ :root { /* White color */ --white-color-hsl: 0, 0%, 100%; --white-color: hsl(var(--white-color-hsl)); /* Black color */ --black-color-hsl: 0, 0%, 0%; --black-color: hsl(var(--black-color-hsl)); /* Gray colors */ --gray-color-hue: 218; --gray-color-saturation: 5%; --gray-color-lightness: 87%; --gray-color-hsl: var(--gray-color-hue), var(--gray-color-saturation), var(--gray-color-lightness); --gray-color-light-hsl: var(--gray-color-hue), var(--gray-color-saturation), 92%; --gray-color-very-light-hsl: var(--gray-color-hue), var(--gray-color-saturation), 96%; --gray-color-dim-hsl: var(--gray-color-hue), var(--gray-color-saturation), 73%; --gray-color-very-dim-hsl: var(--gray-color-hue), var(--gray-color-saturation), 30%; --gray-color: hsl(var(--gray-color-hsl)); --gray-color-light: hsl(var(--gray-color-light-hsl)); --gray-color-very-light: hsl(var(--gray-color-very-light-hsl)); --gray-color-dim: hsl(var(--gray-color-dim-hsl)); --gray-color-very-dim: hsl(var(--gray-color-very-dim-hsl)); /* Dark gray colors */ --darkgray-color-hue: 214.3; --darkgray-color-saturation: 12.3%; --darkgray-color-lightness: 24%; --darkgray-color-hsl: var(--darkgray-color-hue), var(--darkgray-color-saturation), var(--darkgray-color-lightness); --darkgray-color-light-hsl: var(--darkgray-color-hue), var(--darkgray-color-saturation), 28%; --darkgray-color-very-light-hsl: var(--darkgray-color-hue), var(--darkgray-color-saturation), 32%; --darkgray-color-dim-hsl: var(--darkgray-color-hue), var(--darkgray-color-saturation), 20%; --darkgray-color-very-dim-hsl: var(--darkgray-color-hue), var(--darkgray-color-saturation), 16%; --darkgray-color: hsl(var(--darkgray-color-hsl)); --darkgray-color-light: hsl(var(--darkgray-color-light-hsl)); --darkgray-color-very-light: hsl(var(--darkgray-color-very-light-hsl)); --darkgray-color-dim: hsl(var(--darkgray-color-dim-hsl)); --darkgray-color-very-dim: hsl(var(--darkgray-color-very-dim-hsl)); /* Dark colors */ --dark-color-hue: var(--darkgray-color-hue); --dark-color-saturation: var(--darkgray-color-saturation); --dark-color-lightness: 11%; --dark-color-hsl: var(--dark-color-hue), var(--dark-color-saturation), var(--dark-color-lightness); --dark-color-light-hsl: var(--dark-color-hue), var(--dark-color-saturation), 12%; --dark-color-very-light-hsl: var(--dark-color-hue), var(--dark-color-saturation), 13%; --dark-color-dim-hsl: var(--dark-color-hue), var(--dark-color-saturation), 10%; --dark-color-very-dim-hsl: var(--dark-color-hue), var(--dark-color-saturation), 9.5%; --dark-color: hsl(var(--dark-color-hsl)); --dark-color-light: hsl(var(--dark-color-light-hsl)); --dark-color-very-light: hsl(var(--dark-color-very-light-hsl)); --dark-color-dim: hsl(var(--dark-color-dim-hsl)); --dark-color-very-dim: hsl(var(--dark-color-very-dim-hsl)); /* Font related (sizes, weights, family, etc.) */ --html-font-size: 62.5%; /* 62.5% is used for easier calculations, because the base is now set to 10px, so 1.4rem = 14px for example. */ --html-font-size-1600: 71.428571428%; /* For screens with widths >= 1600px */ --html-font-size-1920: 80.357142857%; /* For screens with widths >= 1920px */ --html-font-size-2560: 116.07142856%; /* For screens with widths >= 2560px */ --html-font-size-3000: 133.92857142%; /* For screens with widths >= 3000px */ --html-font-size-4000: 178.57142856%; /* For screens with widths >= 4000px */ --html-font-size-5120: 232.14285713%; /* For screens with widths >= 5120px */ --base-sans-serif-font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; --base-serif-font-stack: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --base-monospace-font-stack: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --base-font-family: var(--base-sans-serif-font-stack); --base-font-size: 1.4rem; --small-font-size: 1.2rem; --large-font-size: 1.6rem; --base-line-height: 1.5; --small-line-height: 1.25; --large-line-height: 2; --base-font-weight: normal; --bold-font-weight: 600; --base-webkit-font-smoothing: antialiased; --base-moz-osx-font-smoothing: grayscale; /* Base text colors */ --base-text-color-hue: var(--gray-color-hue); --base-text-color-saturation: var(--gray-color-saturation); --base-text-color: hsl(var(--base-text-color-hue), var(--base-text-color-saturation), 15%); --base-text-color-soft: hsl(var(--base-text-color-hue), var(--base-text-color-saturation), 30%); /* Slightly softer, used on a few components */ --light-text-color: hsl(var(--base-text-color-hue), var(--base-text-color-saturation), 80%); --dark-text-color: hsl(var(--base-text-color-hue), var(--base-text-color-saturation), 15%); --muted-text-color: hsl(var(--base-text-color-hue), var(--base-text-color-saturation), 40%); --very-muted-text-color: hsl(var(--base-text-color-hue), var(--base-text-color-saturation), 65%); --strong-text-color: var(--black-color); /* Base background colors */ --base-body-bg-color: var(--white-color); --base-body-bg-image: none; --base-content-bg-color: var(--white-color); /* Border related (mostly for utilities) */ --base-border-style: solid; --base-border-width: 1px; --base-border-radius: 0.4rem; --border-1-border-width: var(--base-border-width); --border-2-border-width: calc(var(--base-border-width) + 1px); --border-3-border-width: calc(var(--base-border-width) + 2px); --border-4-border-width: calc(var(--base-border-width) + 3px); --border-5-border-width: calc(var(--base-border-width) + 4px); --rounded-1-border-radius: var(--base-border-radius); --rounded-2-border-radius: calc(var(--base-border-radius) + 0.2rem); --rounded-3-border-radius: calc(var(--base-border-radius) + 0.6rem); --rounded-4-border-radius: calc(var(--base-border-radius) + 1.2rem); --rounded-5-border-radius: calc(var(--base-border-radius) + 2.8rem); --rounded-pill-border-radius: 50rem; --border-color: var(--gray-color-dim); --border-color-light: var(--gray-color); --border-color-dark: var(--border-color); /* Horizontal rule */ --horizontal-rule-height: var(--base-border-width); --horizontal-rule-color: hsla(var(--black-color-hsl), 0.05); /* Figure */ --figure-margin-top: 1.6rem; --figure-margin-bottom: var(--figure-margin-top); --figure-margin-start: 0; --figure-margin-end: 0; /* SVGs */ --angle-down-svg-white: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); --angle-down-svg-black: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); --angle-down-svg-gray: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23b7b9be' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); --angle-down-svg-darkgray: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23595959' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); --angle-down-svg-dark: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2315181b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); --angle-up-svg-white: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' style='transform: scale(-1,1)'%3e%3cpath transform='scale(1,-1)' transform-origin='center' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); --angle-up-svg-black: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' style='transform: scale(-1,1)'%3e%3cpath transform='scale(1,-1)' transform-origin='center' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); --angle-up-svg-gray: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' style='transform: scale(-1,1)'%3e%3cpath transform='scale(1,-1)' transform-origin='center' fill='none' stroke='%23b7b9be' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); --angle-up-svg-darkgray: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' style='transform: scale(-1,1)'%3e%3cpath transform='scale(1,-1)' transform-origin='center' fill='none' stroke='%23595959' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); --angle-up-svg-dark: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' style='transform: scale(-1,1)'%3e%3cpath transform='scale(1,-1)' transform-origin='center' fill='none' stroke='%2315181b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); --checkbox-svg-white: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"); --checkbox-svg-black: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"); --checkbox-svg-gray: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23b7b9be' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"); --checkbox-svg-darkgray: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23595959' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"); --checkbox-svg-dark: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2315181b' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"); --dash-svg-white: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e"); --dash-svg-black: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e"); --dash-svg-gray: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23b7b9be' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e"); --dash-svg-darkgray: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23595959' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e"); --dash-svg-dark: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2315181b' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e"); --radio-svg-white: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e"); --radio-svg-black: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23000'/%3e%3c/svg%3e"); --radio-svg-gray: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23b7b9be'/%3e%3c/svg%3e"); --radio-svg-darkgray: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23595959'/%3e%3c/svg%3e"); --radio-svg-dark: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%2315181b'/%3e%3c/svg%3e"); --switch-svg-white: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); --switch-svg-black: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23000'/%3e%3c/svg%3e"); --switch-svg-gray: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23b7b9be'/%3e%3c/svg%3e"); --switch-svg-darkgray: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23595959'/%3e%3c/svg%3e"); --switch-svg-dark: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2315181b'/%3e%3c/svg%3e"); } .dark-mode { /* Base text colors */ --base-text-color: hsl(var(--base-text-color-hue), var(--base-text-color-saturation), 80%); --base-text-color-soft: hsl(var(--base-text-color-hue), var(--base-text-color-saturation), 65%); /* Slightly softer, used on a few components */ --muted-text-color: hsl(var(--base-text-color-hue), var(--base-text-color-saturation), 60%); --very-muted-text-color: hsl(var(--base-text-color-hue), var(--base-text-color-saturation), 35%); --strong-text-color: var(--white-color); /* Base background colors */ --base-body-bg-color: var(--dark-color-very-light); --base-body-bg-image: none; --base-content-bg-color: var(--dark-color); /* Border related (mostly for utilities) */ --border-color: var(--gray-color-very-dim); --border-color-light: var(--border-color); --border-color-dark: var(--dark-color-very-dim); /* Horizontal rule */ --horizontal-rule-color: hsla(var(--white-color-hsl), 0.05); } .readable-mode { /* Font related (sizes, weights, family, etc.) */ --base-font-size: 1.6rem; --small-font-size: 1.4rem; --large-font-size: 1.8rem; } /** * ---------------------------------------------------------------------------- * [ System colors - Variables ] * * Colors available to be used by the system. These are very rarely used * directly in classes and components. Instead, they are extended by the * context colors, and used that way. * * The lightness step (up and down) variables make it easy to set different * shades of each of the colors. By default, only 4 step variables (2 in each * direction) are needed for all of the components. However, more can be * easily created and used if required. * * For the very light variation of each color, usually 95% lightness is good * for all colors. And for the very dark variations, a saturation of 12.5% and * a lightness of 12.5% is usually ideal. Since these are the same for every * color, they are not set using variables. * ---------------------------------------------------------------------------- */ :root { /* Blue */ --blue-color-hue: 211; --blue-color-saturation: 100%; --blue-color-lightness: 52%; --blue-color-lightness-step-up-1: 59.5%; --blue-color-lightness-step-up-2: 67%; --blue-color-lightness-step-down-1: 47%; --blue-color-lightness-step-down-2: 42%; --blue-color-hsl: var(--blue-color-hue), var(--blue-color-saturation), var(--blue-color-lightness); --blue-color-light-hsl: var(--blue-color-hue), var(--blue-color-saturation), var(--blue-color-lightness-step-up-2); --blue-color-very-light-hsl: var(--blue-color-hue), var(--blue-color-saturation), 95%; --blue-color-dim-hsl: var(--blue-color-hue), var(--blue-color-saturation), var(--blue-color-lightness-step-down-2); --blue-color-very-dim-hsl: var(--blue-color-hue), 12.5%, 12.5%; --blue-color: hsl(var(--blue-color-hsl)); --blue-color-light: hsl(var(--blue-color-light-hsl)); --blue-color-very-light: hsl(var(--blue-color-very-light-hsl)); --blue-color-dim: hsl(var(--blue-color-dim-hsl)); --blue-color-very-dim: hsl(var(--blue-color-very-dim-hsl)); --text-color-on-blue-color-bg: var(--white-color); /* Indigo */ --indigo-color-hue: 235; --indigo-color-saturation: 86%; --indigo-color-lightness: 65%; --indigo-color-lightness-step-up-1: 70%; --indigo-color-lightness-step-up-2: 75%; --indigo-color-lightness-step-down-1: 60%; --indigo-color-lightness-step-down-2: 55%; --indigo-color-hsl: var(--indigo-color-hue), var(--indigo-color-saturation), var(--indigo-color-lightness); --indigo-color-light-hsl: var(--indigo-color-hue), var(--indigo-color-saturation), var(--indigo-color-lightness-step-up-2); --indigo-color-very-light-hsl: var(--indigo-color-hue), var(--indigo-color-saturation), 95%; --indigo-color-dim-hsl: var(--indigo-color-hue), var(--indigo-color-saturation), var(--indigo-color-lightness-step-down-2); --indigo-color-very-dim-hsl: var(--indigo-color-hue), 12.5%, 12.5%; --indigo-color: hsl(var(--indigo-color-hsl)); --indigo-color-light: hsl(var(--indigo-color-light-hsl)); --indigo-color-very-light: hsl(var(--indigo-color-very-light-hsl)); --indigo-color-dim: hsl(var(--indigo-color-dim-hsl)); --indigo-color-very-dim: hsl(var(--indigo-color-very-dim-hsl)); --text-color-on-indigo-color-bg: var(--white-color); /* Teal */ --teal-color-hue: 175; --teal-color-saturation: 73%; --teal-color-lightness: 32.5%; --teal-color-lightness-step-up-1: 40%; --teal-color-lightness-step-up-2: 47.5%; --teal-color-lightness-step-down-1: 27.5%; --teal-color-lightness-step-down-2: 22.5%; --teal-color-hsl: var(--teal-color-hue), var(--teal-color-saturation), var(--teal-color-lightness); --teal-color-light-hsl: var(--teal-color-hue), var(--teal-color-saturation), var(--teal-color-lightness-step-up-2); --teal-color-very-light-hsl: var(--teal-color-hue), var(--teal-color-saturation), 95%; --teal-color-dim-hsl: var(--teal-color-hue), var(--teal-color-saturation), var(--teal-color-lightness-step-down-2); --teal-color-very-dim-hsl: var(--teal-color-hue), 12.5%, 12.5%; --teal-color: hsl(var(--teal-color-hsl)); --teal-color-light: hsl(var(--teal-color-light-hsl)); --teal-color-very-light: hsl(var(--teal-color-very-light-hsl)); --teal-color-dim: hsl(var(--teal-color-dim-hsl)); --teal-color-very-dim: hsl(var(--teal-color-very-dim-hsl)); --text-color-on-teal-color-bg: var(--white-color); /* Green */ --green-color-hue: 140; --green-color-saturation: 100%; --green-color-lightness: 30%; --green-color-lightness-step-up-1: 37.5%; --green-color-lightness-step-up-2: 45%; --green-color-lightness-step-down-1: 25%; --green-color-lightness-step-down-2: 20%; --green-color-hsl: var(--green-color-hue), var(--green-color-saturation), var(--green-color-lightness); --green-color-light-hsl: var(--green-color-hue), var(--green-color-saturation), var(--green-color-lightness-step-up-2); --green-color-very-light-hsl: var(--green-color-hue), var(--green-color-saturation), 95%; --green-color-dim-hsl: var(--green-color-hue), var(--green-color-saturation), var(--green-color-lightness-step-down-2); --green-color-very-dim-hsl: var(--green-color-hue), 12.5%, 12.5%; --green-color: hsl(var(--green-color-hsl)); --green-color-light: hsl(var(--green-color-light-hsl)); --green-color-very-light: hsl(var(--green-color-very-light-hsl)); --green-color-dim: hsl(var(--green-color-dim-hsl)); --green-color-very-dim: hsl(var(--green-color-very-dim-hsl)); --text-color-on-green-color-bg: var(--white-color); /* Mint */ --mint-color-hue: 152; --mint-color-saturation: 85%; --mint-color-lightness: 50%; --mint-color-lightness-step-up-1: 57.5%; --mint-color-lightness-step-up-2: 65%; --mint-color-lightness-step-down-1: 46%; --mint-color-lightness-step-down-2: 42%; --mint-color-hsl: var(--mint-color-hue), var(--mint-color-saturation), var(--mint-color-lightness); --mint-color-light-hsl: var(--mint-color-hue), var(--mint-color-saturation), var(--mint-color-lightness-step-up-2); --mint-color-very-light-hsl: var(--mint-color-hue), var(--mint-color-saturation), 95%; --mint-color-dim-hsl: var(--mint-color-hue), var(--mint-color-saturation), var(--mint-color-lightness-step-down-2); --mint-color-very-dim-hsl: var(--mint-color-hue), 12.5%, 12.5%; --mint-color: hsl(var(--mint-color-hsl)); --mint-color-light: hsl(var(--mint-color-light-hsl)); --mint-color-very-light: hsl(var(--mint-color-very-light-hsl)); --mint-color-dim: hsl(var(--mint-color-dim-hsl)); --mint-color-very-dim: hsl(var(--mint-color-very-dim-hsl)); --text-color-on-mint-color-bg: var(--dark-text-color); /* Yellow */ --yellow-color-hue: 49; --yellow-color-saturation: 100%; --yellow-color-lightness: 50%; --yellow-color-lightness-step-up-1: 57.5%; --yellow-color-lightness-step-up-2: 65%; --yellow-color-lightness-step-down-1: 47%; --yellow-color-lightness-step-down-2: 44%; --yellow-color-hsl: var(--yellow-color-hue), var(--yellow-color-saturation), var(--yellow-color-lightness); --yellow-color-light-hsl: var(--yellow-color-hue), var(--yellow-color-saturation), var(--yellow-color-lightness-step-up-2); --yellow-color-very-light-hsl: var(--yellow-color-hue), var(--yellow-color-saturation), 95%; --yellow-color-dim-hsl: var(--yellow-color-hue), var(--yellow-color-saturation), var(--yellow-color-lightness-step-down-2); --yellow-color-very-dim-hsl: var(--yellow-color-hue), 12.5%, 12.5%; --yellow-color: hsl(var(--yellow-color-hsl)); --yellow-color-light: hsl(var(--yellow-color-light-hsl)); --yellow-color-very-light: hsl(var(--yellow-color-very-light-hsl)); --yellow-color-dim: hsl(var(--yellow-color-dim-hsl)); --yellow-color-very-dim: hsl(var(--yellow-color-very-dim-hsl)); --text-color-on-yellow-color-bg: var(--dark-text-color); /* Orange */ --orange-color-hue: 27; --orange-color-saturation: 84%; --orange-color-lightness: 50%; --orange-color-lightness-step-up-1: 55%; --orange-color-lightness-step-up-2: 60%; --orange-color-lightness-step-down-1: 45%; --orange-color-lightness-step-down-2: 40%; --orange-color-hsl: var(--orange-color-hue), var(--orange-color-saturation), var(--orange-color-lightness); --orange-color-light-hsl: var(--orange-color-hue), var(--orange-color-saturation), var(--orange-color-lightness-step-up-2); --orange-color-very-light-hsl: var(--orange-color-hue), var(--orange-color-saturation), 95%; --orange-color-dim-hsl: var(--orange-color-hue), var(--orange-color-saturation), var(--orange-color-lightness-step-down-2); --orange-color-very-dim-hsl: var(--orange-color-hue), 12.5%, 12.5%; --orange-color: hsl(var(--orange-color-hsl)); --orange-color-light: hsl(var(--orange-color-light-hsl)); --orange-color-very-light: hsl(var(--orange-color-very-light-hsl)); --orange-color-dim: hsl(var(--orange-color-dim-hsl)); --orange-color-very-dim: hsl(var(--orange-color-very-dim-hsl)); --text-color-on-orange-color-bg: var(--white-color); /* Red */ --red-color-hue: 6; --red-color-saturation: 78%; --red-color-lightness: 57%; --red-color-lightness-step-up-1: 62%; --red-color-lightness-step-up-2: 67%; --red-color-lightness-step-down-1: 49.5%; --red-color-lightness-step-down-2: 42%; --red-color-hsl: var(--red-color-hue), var(--red-color-saturation), var(--red-color-lightness); --red-color-light-hsl: var(--red-color-hue), var(--red-color-saturation), var(--red-color-lightness-step-up-2); --red-color-very-light-hsl: var(--red-color-hue), var(--red-color-saturation), 95%; --red-color-dim-hsl: var(--red-color-hue), var(--red-color-saturation), var(--red-color-lightness-step-down-2); --red-color-very-dim-hsl: var(--red-color-hue), 12.5%, 12.5%; --red-color: hsl(var(--red-color-hsl)); --red-color-light: hsl(var(--red-color-light-hsl)); --red-color-very-light: hsl(var(--red-color-very-light-hsl)); --red-color-dim: hsl(var(--red-color-dim-hsl)); --red-color-very-dim: hsl(var(--red-color-very-dim-hsl)); --text-color-on-red-color-bg: var(--white-color); /* Pink */ --pink-color-hue: 331; --pink-color-saturation: 75%; --pink-color-lightness: 60%; --pink-color-lightness-step-up-1: 65%; --pink-color-lightness-step-up-2: 70%; --pink-color-lightness-step-down-1: 50%; --pink-color-lightness-step-down-2: 40%; --pink-color-hsl: var(--pink-color-hue), var(--pink-color-saturation), var(--pink-color-lightness); --pink-color-light-hsl: var(--pink-color-hue), var(--pink-color-saturation), var(--pink-color-lightness-step-up-2); --pink-color-very-light-hsl: var(--pink-color-hue), var(--pink-color-saturation), 95%; --pink-color-dim-hsl: var(--pink-color-hue), var(--pink-color-saturation), var(--pink-color-lightness-step-down-2); --pink-color-very-dim-hsl: var(--pink-color-hue), 12.5%, 12.5%; --pink-color: hsl(var(--pink-color-hsl)); --pink-color-light: hsl(var(--pink-color-light-hsl)); --pink-color-very-light: hsl(var(--pink-color-very-light-hsl)); --pink-color-dim: hsl(var(--pink-color-dim-hsl)); --pink-color-very-dim: hsl(var(--pink-color-very-dim-hsl)); --text-color-on-pink-color-bg: var(--white-color); /* Purple */ --purple-color-hue: 258; --purple-color-saturation: 98%; --purple-color-lightness: 66%; --purple-color-lightness-step-up-1: 71%; --purple-color-lightness-step-up-2: 76%; --purple-color-lightness-step-down-1: 56%; --purple-color-lightness-step-down-2: 46%; --purple-color-hsl: var(--purple-color-hue), var(--purple-color-saturation), var(--purple-color-lightness); --purple-color-light-hsl: var(--purple-color-hue), var(--purple-color-saturation), var(--purple-color-lightness-step-up-2); --purple-color-very-light-hsl: var(--purple-color-hue), var(--purple-color-saturation), 95%; --purple-color-dim-hsl: var(--purple-color-hue), var(--purple-color-saturation), var(--purple-color-lightness-step-down-2); --purple-color-very-dim-hsl: var(--purple-color-hue), 12.5%, 12.5%; --purple-color: hsl(var(--purple-color-hsl)); --purple-color-light: hsl(var(--purple-color-light-hsl)); --purple-color-very-light: hsl(var(--purple-color-very-light-hsl)); --purple-color-dim: hsl(var(--purple-color-dim-hsl)); --purple-color-very-dim: hsl(var(--purple-color-very-dim-hsl)); --text-color-on-purple-color-bg: var(--white-color); } /** * ---------------------------------------------------------------------------- * [ Context colors - Variables ] * * These are used way more frequently in classes and components when compared * to system colors. * * The {...}-hsl variables allow each shade of color to be used with varying * transparencies using the hsla() function. For example: the * hsla(var(--primary-color-hsl), 0.2) would set the primary color with an * opacity of 20%, thus allowing for a much higher degree of flexibility with * only a few shades. * ---------------------------------------------------------------------------- */ :root { /* Primary colors */ --primary-color-hue: var(--blue-color-hue); --primary-color-saturation: var(--blue-color-saturation); --primary-color-lightness: var(--blue-color-lightness); --primary-color-lightness-step-up-1: var(--blue-color-lightness-step-up-1); --primary-color-lightness-step-up-2: var(--blue-color-lightness-step-up-2); --primary-color-lightness-step-down-1: var(--blue-color-lightness-step-down-1); --primary-color-lightness-step-down-2: var(--blue-color-lightness-step-down-2); --primary-color-hsl: var(--blue-color-hsl); --primary-color-light-hsl: var(--blue-color-light-hsl); --primary-color-very-light-hsl: var(--blue-color-very-light-hsl); --primary-color-dim-hsl: var(--blue-color-dim-hsl); --primary-color-very-dim-hsl: var(--blue-color-very-dim-hsl); --primary-color: var(--blue-color); --primary-color-light: var(--blue-color-light); --primary-color-very-light: var(--blue-color-very-light); --primary-color-dim: var(--blue-color-dim); --primary-color-very-dim: var(--blue-color-very-dim); --text-color-on-primary-color-bg: var(--text-color-on-blue-color-bg); /* Secondary colors */ --secondary-color-hue: var(--teal-color-hue); --secondary-color-saturation: var(--teal-color-saturation); --secondary-color-lightness: var(--teal-color-lightness); --secondary-color-lightness-step-up-1: var(--teal-color-lightness-step-up-1); --secondary-color-lightness-step-up-2: var(--teal-color-lightness-step-up-2); --secondary-color-lightness-step-down-1: var(--teal-color-lightness-step-down-1); --secondary-color-lightness-step-down-2: var(--teal-color-lightness-step-down-2); --secondary-color-hsl: var(--teal-color-hsl); --secondary-color-light-hsl: var(--teal-color-light-hsl); --secondary-color-very-light-hsl: var(--teal-color-very-light-hsl); --secondary-color-dim-hsl: var(--teal-color-dim-hsl); --secondary-color-very-dim-hsl: var(--teal-color-very-dim-hsl); --secondary-color: var(--teal-color); --secondary-color-light: var(--teal-color-light); --secondary-color-very-light: var(--teal-color-very-light); --secondary-color-dim: var(--teal-color-dim); --secondary-color-very-dim: var(--teal-color-very-dim); --text-color-on-secondary-color-bg: var(--text-color-on-teal-color-bg); /* Success colors */ --success-color-hue: var(--mint-color-hue); --success-color-saturation: var(--mint-color-saturation); --success-color-lightness: var(--mint-color-lightness); --success-color-lightness-step-up-1: var(--mint-color-lightness-step-up-1); --success-color-lightness-step-up-2: var(--mint-color-lightness-step-up-2); --success-color-lightness-step-down-1: var(--mint-color-lightness-step-down-1); --success-color-lightness-step-down-2: var(--mint-color-lightness-step-down-2); --success-color-hsl: var(--mint-color-hsl); --success-color-light-hsl: var(--mint-color-light-hsl); --success-color-very-light-hsl: var(--mint-color-very-light-hsl); --success-color-dim-hsl: var(--mint-color-dim-hsl); --success-color-very-dim-hsl: var(--mint-color-very-dim-hsl); --success-color: var(--mint-color); --success-color-light: var(--mint-color-light); --success-color-very-light: var(--mint-color-very-light); --success-color-dim: var(--mint-color-dim); --success-color-very-dim: var(--mint-color-very-dim); --text-color-on-success-color-bg: var(--text-color-on-mint-color-bg); /* Warning colors */ --warning-color-hue: var(--yellow-color-hue); --warning-color-saturation: var(--yellow-color-saturation); --warning-color-lightness: var(--yellow-color-lightness); --warning-color-lightness-step-up-1: var(--yellow-color-lightness-step-up-1); --warning-color-lightness-step-up-2: var(--yellow-color-lightness-step-up-2); --warning-color-lightness-step-down-1: var(--yellow-color-lightness-step-down-1); --warning-color-lightness-step-down-2: var(--yellow-color-lightness-step-down-2); --warning-color-hsl: var(--yellow-color-hsl); --warning-color-light-hsl: var(--yellow-color-light-hsl); --warning-color-very-light-hsl: var(--yellow-color-very-light-hsl); --warning-color-dim-hsl: var(--yellow-color-dim-hsl); --warning-color-very-dim-hsl: var(--yellow-color-very-dim-hsl); --warning-color: var(--yellow-color); --warning-color-light: var(--yellow-color-light); --warning-color-very-light: var(--yellow-color-very-light); --warning-color-dim: var(--yellow-color-dim); --warning-color-very-dim: var(--yellow-color-very-dim); --text-color-on-warning-color-bg: var(--text-color-on-yellow-color-bg); /* Danger colors */ --danger-color-hue: var(--red-color-hue); --danger-color-saturation: var(--red-color-saturation); --danger-color-lightness: var(--red-color-lightness); --danger-color-lightness-step-up-1: var(--red-color-lightness-step-up-1); --danger-color-lightness-step-up-2: var(--red-color-lightness-step-up-2); --danger-color-lightness-step-down-1: var(--red-color-lightness-step-down-1); --danger-color-lightness-step-down-2: var(--red-color-lightness-step-down-2); --danger-color-hsl: var(--red-color-hsl); --danger-color-light-hsl: var(--red-color-light-hsl); --danger-color-very-light-hsl: var(--red-color-very-light-hsl); --danger-color-dim-hsl: var(--red-color-dim-hsl); --danger-color-very-dim-hsl: var(--red-color-very-dim-hsl); --danger-color: var(--red-color); --danger-color-light: var(--red-color-light); --danger-color-very-light: var(--red-color-very-light); --danger-color-dim: var(--red-color-dim); --danger-color-very-dim: var(--red-color-very-dim); --text-color-on-danger-color-bg: var(--text-color-on-red-color-bg); } /** * ---------------------------------------------------------------------------- * [ Scrollbar - Variables ] * ---------------------------------------------------------------------------- */ :root { /* Webkit based browsers (Chrome, Safari, Edge) */ --webkit-scrollbar-bg-clip: border-box; --webkit-scrollbar-border-style: var(--base-border-style); --webkit-scrollbar-border-width: var(--base-border-width); --webkit-scrollbar-bg-color: hsl(0, 0%, 98%); --webkit-scrollbar-bg-image: none; --webkit-scrollbar-border-color: hsl(0, 0%, 93%); --webkit-scrollbar-thumb-bg-clip: padding-box; --webkit-scrollbar-thumb-border-style: var(--base-border-style); --webkit-scrollbar-thumb-border-width: 0.4rem; --webkit-scrollbar-thumb-border-radius: 2rem; --webkit-scrollbar-thumb-bg-color: hsl(0, 0%, 76%); --webkit-scrollbar-thumb-bg-image: none; --webkit-scrollbar-thumb-border-color: transparent; --webkit-scrollbar-thumb-bg-color-hover: hsl(0, 0%, 49%); --webkit-scrollbar-thumb-bg-image-hover: none; --webkit-scrollbar-thumb-border-color-hover: var(--webkit-scrollbar-thumb-border-color); --webkit-scrollbar-corner-bg-clip: var(--webkit-scrollbar-bg-clip); --webkit-scrollbar-corner-border-style: var(--webkit-scrollbar-border-style); --webkit-scrollbar-corner-border-width: var(--webkit-scrollbar-border-width); --webkit-scrollbar-corner-bg-color: var(--webkit-scrollbar-bg-color); --webkit-scrollbar-corner-bg-image: var(--webkit-scrollbar-bg-image); --webkit-scrollbar-corner-border-color: var(--webkit-scrollbar-border-color); /* Firefox */ --moz-scrollbar-color: auto; } .dark-mode { /* Webkit based browsers (Chrome, Safari, Edge) */ --webkit-scrollbar-bg-color: hsl(0, 0%, 18%); --webkit-scrollbar-border-color: hsl(0, 0%, 20%); --webkit-scrollbar-thumb-bg-color: hsl(0, 0%, 46%); --webkit-scrollbar-thumb-bg-color-hover: hsl(0, 0%, 62%); } /** * ---------------------------------------------------------------------------- * [ Typography - Variables ] * ---------------------------------------------------------------------------- */ :root { /* Headings */ --heading-font-family: inherit; --heading-font-weight: var(--bold-font-weight); --heading-webkit-font-smoothing: var(--base-webkit-font-smoothing); --heading-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --heading-margin-top: 1.6rem; --heading-margin-bottom: var(--heading-margin-top); --heading-1-font-size: calc(var(--base-font-size) + 2.8rem); --heading-1-line-height: var(--small-line-height); --heading-2-font-size: calc(var(--base-font-size) + 2.2rem); --heading-2-line-height: var(--small-line-height); --heading-3-font-size: calc(var(--base-font-size) + 1.6rem); --heading-3-line-height: var(--small-line-height); --heading-4-font-size: calc(var(--base-font-size) + 1.2rem); --heading-4-line-height: var(--small-line-height); --heading-5-font-size: calc(var(--base-font-size) + 0.8rem); --heading-5-line-height: var(--small-line-height); --heading-6-font-size: calc(var(--base-font-size) + 0.4rem); --heading-6-line-height: var(--small-line-height); /* Displays */ --display-font-family: var(--heading-font-family); --display-font-weight: var(--heading-font-weight); --display-webkit-font-smoothing: var(--heading-webkit-font-smoothing); --display-moz-osx-font-smoothing: var(--heading-moz-osx-font-smoothing); --display-margin-top: var(--heading-margin-top); --display-margin-bottom: var(--heading-margin-bottom); --display-1-font-size: calc(var(--base-font-size) + 4.5vw); --display-1-line-height: var(--small-line-height); --display-2-font-size: calc(var(--base-font-size) + 3.9vw); --display-2-line-height: var(--small-line-height); --display-3-font-size: calc(var(--base-font-size) + 3.3vw); --display-3-line-height: var(--small-line-height); --display-4-font-size: calc(var(--base-font-size) + 2.7vw); --display-4-line-height: var(--small-line-height); --display-5-font-size: calc(var(--base-font-size) + 2.1vw); --display-5-line-height: var(--small-line-height); --display-6-font-size: calc(var(--base-font-size) + 1.5vw); --display-6-line-height: var(--small-line-height); /** * Responsive font sizes * * Found in [Text format utilities] */ --font-size-responsive-1: calc(var(--base-font-size) + 1.2vw); --font-size-responsive-2: calc(var(--base-font-size) + 1.0vw); --font-size-responsive-3: calc(var(--base-font-size) + 0.8vw); --font-size-responsive-4: calc(var(--base-font-size) + 0.6vw); --font-size-responsive-5: calc(var(--base-font-size) + 0.4vw); --font-size-responsive-6: calc(var(--base-font-size) + 0.2vw); /* Mark */ --mark-webkit-font-smoothing: var(--base-webkit-font-smoothing); --mark-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --mark-padding: 0.1rem 0.4rem; --mark-margin: 0; --mark-bg-clip: border-box; --mark-border-style: var(--base-border-style); --mark-border-width: 0; --mark-border-radius: 0.2rem; --mark-text-color: var(--black-color); --mark-bg-color: var(--yellow-color); --mark-bg-image: none; --mark-border-color: transparent; --mark-box-shadow: none; /* Blockquote */ --blockquote-font-family: inherit; --blockquote-font-size: calc(var(--base-font-size) + 0.2rem); --blockquote-line-height: var(--base-line-height); --blockquote-font-weight: var(--base-font-weight); --blockquote-webkit-font-smoothing: var(--base-webkit-font-smoothing); --blockquote-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --blockquote-padding: 0; --blockquote-margin: 0.6rem 0; --blockquote-bg-clip: border-box; --blockquote-border-style: var(--base-border-style); --blockquote-border-width: 0; --blockquote-border-radius: 0; --blockquote-text-color: inherit; --blockquote-bg-color: transparent; --blockquote-bg-image: none; --blockquote-border-color: transparent; --blockquote-box-shadow: none; /* Blockquote footer */ --blockquote-footer-before-content: "\2014"; --blockquote-footer-font-family: inherit; --blockquote-footer-font-size: var(--base-font-size); --blockquote-footer-line-height: var(--base-line-height); --blockquote-footer-font-weight: var(--base-font-weight); --blockquote-footer-webkit-font-smoothing: var(--base-webkit-font-smoothing); --blockquote-footer-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --blockquote-footer-padding: 0; --blockquote-footer-margin: 0.6rem 0; --blockquote-footer-bg-clip: border-box; --blockquote-footer-border-style: var(--base-border-style); --blockquote-footer-border-width: 0; --blockquote-footer-border-radius: 0; --blockquote-footer-text-color: var(--muted-text-color); --blockquote-footer-bg-color: transparent; --blockquote-footer-bg-image: none; --blockquote-footer-border-color: transparent; --blockquote-footer-box-shadow: none; } @media (min-width: 1600px) { :root { /* Displays */ --display-1-font-size: calc(var(--base-font-size) + 7rem); --display-2-font-size: calc(var(--base-font-size) + 6rem); --display-3-font-size: calc(var(--base-font-size) + 5rem); --display-4-font-size: calc(var(--base-font-size) + 4rem); --display-5-font-size: calc(var(--base-font-size) + 3rem); --display-6-font-size: calc(var(--base-font-size) + 2rem); /* Responsive font sizes */ --font-size-responsive-1: calc(var(--base-font-size) + 1.8rem); --font-size-responsive-2: calc(var(--base-font-size) + 1.6rem); --font-size-responsive-3: calc(var(--base-font-size) + 1.4rem); --font-size-responsive-4: calc(var(--base-font-size) + 1.2rem); --font-size-responsive-5: calc(var(--base-font-size) + 1.0rem); --font-size-responsive-6: calc(var(--base-font-size) + 0.8rem); } } /** * ---------------------------------------------------------------------------- * [ Box shadows - Variables ] * ---------------------------------------------------------------------------- */ :root { --shadow-color: hsla(var(--black-color-hsl), 0.15); --small-shadow: 0 0.1rem 0.2rem var(--shadow-color); --shadow: 0 0.2rem 0.4rem var(--shadow-color); --large-shadow: 0 0.4rem 0.8rem var(--shadow-color); } .dark-mode { --shadow-color: hsla(var(--black-color-hsl), 0.4); --small-shadow: 0 0.1rem 0.6rem var(--shadow-color); --shadow: 0 0.2rem 0.8rem var(--shadow-color); --large-shadow: 0 0.4rem 1.2rem var(--shadow-color); } /** * ---------------------------------------------------------------------------- * [ Layout (navbar, sidebar, sticky alerts, dialogs) - Variables ] * ---------------------------------------------------------------------------- */ :root { /* Navbar */ --navbar-height: 5rem; --navbar-fixed-bottom-height: var(--navbar-height); --navbar-horizontal-padding: 1rem; --navbar-vertical-padding: 0; --navbar-border-style: var(--base-border-style); --navbar-border-width: var(--base-border-width); --navbar-text-color: inherit; --navbar-bg-color: var(--base-content-bg-color); --navbar-bg-image: none; --navbar-border-color: var(--border-color-dark); --navbar-box-shadow: none; --navbar-fixed-bottom-box-shadow: none; --navbar-static-bottom-box-shadow: var(--navbar-fixed-bottom-box-shadow); /* Sidebar */ --sidebar-width: 27rem; --sidebar-padding: 0.5rem; --sidebar-border-style: var(--base-border-style); --sidebar-border-width: var(--base-border-width); --sidebar-text-color: inherit; --sidebar-bg-color: var(--base-content-bg-color); --sidebar-bg-image: none; --sidebar-border-color: var(--border-color-dark); --sidebar-box-shadow: none; --sidebar-overlay-bg-color: hsla(var(--black-color-hsl), 0.75); --sidebar-overlay-bg-image: none; /* Sticky alerts */ --sticky-alerts-top: 0; --sticky-alerts-end: 0; --sticky-alerts-width: 32rem; --sticky-alerts-padding: 0 1.4rem; --sticky-alerts-margin: 0; /* Dialogs */ --dialog-overlay-bg-color: hsla(var(--black-color-hsl), 0.8); --dialog-overlay-bg-image: none; } .dark-mode { /* Navbar */ --navbar-bg-color: var(--dark-color-dim); /* Dialogs */ --dialog-overlay-bg-color: hsla(var(--black-color-hsl), 0.9); } /** * ---------------------------------------------------------------------------- * [ Page building (containers, content, card, v-spacer) - Variables ] * ---------------------------------------------------------------------------- */ :root { /* Containers */ --container-width: 100%; --container-sm-max-width: 54rem; --container-md-max-width: 72rem; --container-lg-max-width: 96rem; --container-xl-max-width: 114rem; --container-xxl-max-width: 132rem; --container-fluid-width: 100%; /** * Content and card * * The half spacing variable is required for rows with adjusted spacing. */ --content-and-card-spacing: 3rem; --content-and-card-spacing-half: calc(var(--content-and-card-spacing) / 2); --card-webkit-font-smoothing: var(--base-webkit-font-smoothing); --card-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --card-bg-clip: border-box; --card-border-style: var(--base-border-style); --card-border-width: var(--base-border-width); --card-border-radius: var(--base-border-radius); --card-text-color: inherit; --card-bg-color: var(--base-content-bg-color); --card-bg-image: none; --card-border-color: var(--border-color-dark); --card-box-shadow: none; /* Card link */ --card-link-webkit-font-smoothing: var(--card-webkit-font-smoothing); --card-link-moz-osx-font-smoothing: var(--card-moz-osx-font-smoothing); --card-link-bg-clip: var(--card-bg-clip); --card-link-text-decoration: var(--card-text-decoration); --card-link-text-color: var(--card-text-color); --card-link-bg-color: var(--card-bg-color); --card-link-bg-image: var(--card-bg-image); --card-link-border-color: var(--card-border-color); --card-link-box-shadow: var(--card-box-shadow); --card-link-text-decoration-hover: var(--card-link-text-decoration); --card-link-text-color-hover: var(--card-link-text-color); --card-link-bg-color-hover: var(--card-link-bg-color); --card-link-bg-image-hover: var(--card-link-bg-image); --card-link-border-color-hover: var(--primary-color); --card-link-box-shadow-hover: var(--card-link-box-shadow); /* Content title */ --content-title-font-family: var(--heading-font-family); --content-title-font-size: var(--heading-5-font-size); --content-title-line-height: var(--heading-5-line-height); --content-title-font-weight: var(--heading-font-weight); --content-title-webkit-font-smoothing: var(--heading-webkit-font-smoothing); --content-title-moz-osx-font-smoothing: var(--heading-moz-osx-font-smoothing); --content-title-margin-top: 1rem; --content-title-margin-bottom: var(--content-title-margin-top); /* Card title */ --card-title-font-family: var(--content-title-font-family); --card-title-font-size: var(--content-title-font-size); --card-title-line-height: var(--content-title-line-height); --card-title-font-weight: var(--content-title-font-weight); --card-title-webkit-font-smoothing: var(--content-title-webkit-font-smoothing); --card-title-moz-osx-font-smoothing: var(--content-title-moz-osx-font-smoothing); --card-title-margin-top: 0; --card-title-margin-bottom: var(--content-title-margin-bottom); /* Vertical spacer */ --v-spacer-height: var(--content-and-card-spacing); } .dark-mode { /* Card link */ --card-link-border-color-hover: var(--primary-color-dim); } @media (max-width: 576px) { :root { --content-and-card-spacing: 2.4rem; } } /** * ---------------------------------------------------------------------------- * [ Grid system - Variables ] * ---------------------------------------------------------------------------- */ :root { /** * Form row * * The column vertical margin is halved because there is no margin * collapse due to flexbox. */ --form-row-margin-top: 0; --form-row-margin-bottom: 1.6rem; --form-row-col-horizontal-padding: 1rem; --form-row-col-vertical-margin: calc(var(--form-row-margin-bottom) / 2); } /** * ---------------------------------------------------------------------------- * [ Links - Variables ] * * The variables for resetting links are meant for links inside text blocks * using any of the .text-{color} classes. See the [ Text color utilities ] * section. This is also why the !important keyword is used, as they need to * be able to reset other utility classes. * ---------------------------------------------------------------------------- */ :root { --link-webkit-font-smoothing: auto; --link-moz-osx-font-smoothing: auto; --link-text-decoration: none; --link-text-color: var(--primary-color); --link-text-decoration-hover: underline; --link-text-color-hover: var(--link-text-color); /* Link reset */ --link-reset-webkit-font-smoothing: inherit; --link-reset-moz-osx-font-smoothing: inherit; --link-reset-text-decoration: underline; --link-reset-color: inherit !important; --link-reset-opacity: 1; --link-reset-text-decoration-hover: var(--link-reset-text-decoration); --link-reset-color-hover: var(--link-reset-color); --link-reset-opacity-hover: 0.75; } .dark-mode { --link-text-color: hsl(var(--primary-color-hue), var(--primary-color-saturation), var(--primary-color-lightness-step-up-1)); } /** * ---------------------------------------------------------------------------- * [ Buttons - Variables ] * ---------------------------------------------------------------------------- */ :root { --button-font-size: var(--base-font-size); --button-line-height: var(--base-line-height); --button-font-weight: var(--base-font-weight); --button-vertical-padding: 0.4rem; --button-horizontal-padding: 1rem; --button-border-style: var(--base-border-style); --button-border-width: var(--base-border-width); --button-border-radius: var(--base-border-radius); /* Small button */ --small-button-font-size: var(--small-font-size); --small-button-line-height: var(--button-line-height); --small-button-vertical-padding: 0.2rem; --small-button-horizontal-padding: 0.8rem; /* Large button */ --large-button-font-size: var(--large-font-size); --large-button-line-height: var(--button-line-height); --large-button-vertical-padding: 0.6rem; --large-button-horizontal-padding: 1.2rem; /* Square button */ --square-button-width: calc((var(--button-font-size) * var(--button-line-height)) + (2 * var(--button-vertical-padding)) + (2 * var(--button-border-width))); --small-square-button-width: calc((var(--small-button-font-size) * var(--small-button-line-height)) + (2 * var(--small-button-vertical-padding)) + (2 * var(--button-border-width))); --large-square-button-width: calc((var(--large-button-font-size) * var(--large-button-line-height)) + (2 * var(--large-button-vertical-padding)) + (2 * var(--button-border-width))); /* Rounded button */ --rounded-button-border-radius: var(--rounded-pill-border-radius); /* Default button */ --button-webkit-font-smoothing: auto; --button-moz-osx-font-smoothing: auto; --button-bg-clip: border-box; --button-text-decoration: none; --button-text-color: var(--base-text-color-soft); --button-bg-color: var(--white-color); --button-bg-image: none; --button-border-color: var(--border-color-dark); --button-box-shadow: none; --button-text-decoration-hover: var(--button-text-decoration); --button-text-color-hover: var(--button-text-color); --button-bg-color-hover: var(--gray-color-very-light); --button-bg-image-hover: none; --button-border-color-hover: var(--button-border-color); --button-box-shadow-hover: var(--button-box-shadow); --button-text-decoration-active: var(--button-text-decoration); --button-text-color-active: var(--button-text-color); --button-bg-color-active: var(--gray-color-light); --button-bg-image-active: none; --button-border-color-active: var(--button-border-color); --button-box-shadow-active: var(--button-box-shadow); /* Alternate button */ --button-alt-webkit-font-smoothing: var(--button-webkit-font-smoothing); --button-alt-moz-osx-font-smoothing: var(--button-moz-osx-font-smoothing); --button-alt-bg-clip: border-box; /* Does NOT inherit default button's because of dark mode change (see below) */ --button-alt-text-decoration: var(--button-text-decoration); --button-alt-text-color: inherit; --button-alt-bg-color: hsla(var(--black-color-hsl), 0.15); --button-alt-bg-image: none; --button-alt-border-color: transparent; --button-alt-box-shadow: none; --button-alt-text-decoration-hover: var(--button-alt-text-decoration); --button-alt-text-color-hover: var(--button-alt-text-color); --button-alt-bg-color-hover: hsla(var(--black-color-hsl), 0.3); --button-alt-bg-image-hover: none; --button-alt-border-color-hover: var(--button-alt-border-color); --button-alt-box-shadow-hover: var(--button-alt-box-shadow); --button-alt-text-decoration-active: var(--button-alt-text-decoration); --button-alt-text-color-active: var(--button-alt-text-color); --button-alt-bg-color-active: hsla(var(--black-color-hsl), 0.45); --button-alt-bg-image-active: none; --button-alt-border-color-active: var(--button-alt-border-color); --button-alt-box-shadow-active: var(--button-alt-box-shadow); /* Link button */ --button-link-webkit-font-smoothing: var(--link-webkit-font-smoothing); --button-link-moz-osx-font-smoothing: var(--link-moz-osx-font-smoothing); --button-link-bg-clip: border-box; /* Does NOT inherit default button's because of dark mode change (see below) */ --button-link-text-decoration: var(--button-text-decoration); --button-link-text-color: var(--link-text-color); --button-link-bg-color: transparent; --button-link-bg-image: none; --button-link-border-color: transparent; --button-link-box-shadow: none; --button-link-text-decoration-hover: var(--button-link-text-decoration); --button-link-text-color-hover: var(--button-link-text-color); --button-link-bg-color-hover: var(--button-bg-color-hover); --button-link-bg-image-hover: none; --button-link-border-color-hover: var(--button-link-border-color); --button-link-box-shadow-hover: var(--button-link-box-shadow); --button-link-text-decoration-active: var(--button-link-text-decoration); --button-link-text-color-active: var(--button-link-text-color); --button-link-bg-color-active: var(--button-bg-color-active); --button-link-bg-image-active: none; --button-link-border-color-active: var(--button-link-border-color); --button-link-box-shadow-active: var(--button-link-box-shadow); /* Primary button */ --button-primary-webkit-font-smoothing: auto; --button-primary-moz-osx-font-smoothing: auto; --button-primary-bg-clip: var(--button-bg-clip); --button-primary-text-decoration: var(--button-text-decoration); --button-primary-text-color: var(--text-color-on-primary-color-bg); --button-primary-bg-color: var(--primary-color); --button-primary-bg-image: none; --button-primary-border-color: transparent; --button-primary-box-shadow: none; --button-primary-text-decoration-hover: var(--button-primary-text-decoration); --button-primary-text-color-hover: var(--button-primary-text-color); --button-primary-bg-color-hover: hsl(var(--primary-color-hue), var(--primary-color-saturation), var(--primary-color-lightness-step-down-1)); --button-primary-bg-image-hover: none; --button-primary-border-color-hover: var(--button-primary-border-color); --button-primary-box-shadow-hover: var(--button-primary-box-shadow); --button-primary-text-decoration-active: var(--button-primary-text-decoration); --button-primary-text-color-active: var(--button-primary-text-color); --button-primary-bg-color-active: hsl(var(--primary-color-hue), var(--primary-color-saturation), var(--primary-color-lightness-step-down-2)); --button-primary-bg-image-active: none; --button-primary-border-color-active: var(--button-primary-border-color); --button-primary-box-shadow-active: var(--button-primary-box-shadow); /* Secondary button */ --button-secondary-webkit-font-smoothing: auto; --button-secondary-moz-osx-font-smoothing: auto; --button-secondary-bg-clip: var(--button-bg-clip); --button-secondary-text-decoration: var(--button-text-decoration); --button-secondary-text-color: var(--text-color-on-secondary-color-bg); --button-secondary-bg-color: var(--secondary-color); --button-secondary-bg-image: none; --button-secondary-border-color: transparent; --button-secondary-box-shadow: none; --button-secondary-text-decoration-hover: var(--button-secondary-text-decoration); --button-secondary-text-color-hover: var(--button-secondary-text-color); --button-secondary-bg-color-hover: hsl(var(--secondary-color-hue), var(--secondary-color-saturation), var(--secondary-color-lightness-step-down-1)); --button-secondary-bg-image-hover: none; --button-secondary-border-color-hover: var(--button-secondary-border-color); --button-secondary-box-shadow-hover: var(--button-secondary-box-shadow); --button-secondary-text-decoration-active: var(--button-secondary-text-decoration); --button-secondary-text-color-active: var(--button-secondary-text-color); --button-secondary-bg-color-active: hsl(var(--secondary-color-hue), var(--secondary-color-saturation), var(--secondary-color-lightness-step-down-2)); --button-secondary-bg-image-active: none; --button-secondary-border-color-active: var(--button-secondary-border-color); --button-secondary-box-shadow-active: var(--button-secondary-box-shadow); /* Success button */ --button-success-webkit-font-smoothing: auto; --button-success-moz-osx-font-smoothing: auto; --button-success-bg-clip: var(--button-bg-clip); --button-success-text-decoration: var(--button-text-decoration); --button-success-text-color: var(--text-color-on-success-color-bg); --button-success-bg-color: var(--success-color); --button-success-bg-image: none; --button-success-border-color: transparent; --button-success-box-shadow: none; --button-success-text-decoration-hover: var(--button-success-text-decoration); --button-success-text-color-hover: var(--button-success-text-color); --button-success-bg-color-hover: hsl(var(--success-color-hue), var(--success-color-saturation), var(--success-color-lightness-step-down-1)); --button-success-bg-image-hover: none; --button-success-border-color-hover: var(--button-success-border-color); --button-success-box-shadow-hover: var(--button-success-box-shadow); --button-success-text-decoration-active: var(--button-success-text-decoration); --button-success-text-color-active: var(--button-success-text-color); --button-success-bg-color-active: hsl(var(--success-color-hue), var(--success-color-saturation), var(--success-color-lightness-step-down-2)); --button-success-bg-image-active: none; --button-success-border-color-active: var(--button-success-border-color); --button-success-box-shadow-active: var(--button-success-box-shadow); /* Warning button */ --button-warning-webkit-font-smoothing: auto; --button-warning-moz-osx-font-smoothing: auto; --button-warning-bg-clip: var(--button-bg-clip); --button-warning-text-decoration: var(--button-text-decoration); --button-warning-text-color: var(--text-color-on-warning-color-bg); --button-warning-bg-color: var(--warning-color); --button-warning-bg-image: none; --button-warning-border-color: transparent; --button-warning-box-shadow: none; --button-warning-text-decoration-hover: var(--button-warning-text-decoration); --button-warning-text-color-hover: var(--button-warning-text-color); --button-warning-bg-color-hover: hsl(var(--warning-color-hue), var(--warning-color-saturation), var(--warning-color-lightness-step-down-1)); --button-warning-bg-image-hover: none; --button-warning-border-color-hover: var(--button-warning-border-color); --button-warning-box-shadow-hover: var(--button-warning-box-shadow); --button-warning-text-decoration-active: var(--button-warning-text-decoration); --button-warning-text-color-active: var(--button-warning-text-color); --button-warning-bg-color-active: hsl(var(--warning-color-hue), var(--warning-color-saturation), var(--warning-color-lightness-step-down-2)); --button-warning-bg-image-active: none; --button-warning-border-color-active: var(--button-warning-border-color); --button-warning-box-shadow-active: var(--button-warning-box-shadow); /* Danger button */ --button-danger-webkit-font-smoothing: auto; --button-danger-moz-osx-font-smoothing: auto; --button-danger-bg-clip: var(--button-bg-clip); --button-danger-text-decoration: var(--button-text-decoration); --button-danger-text-color: var(--text-color-on-danger-color-bg); --button-danger-bg-color: var(--danger-color); --button-danger-bg-image: none; --button-danger-border-color: transparent; --button-danger-box-shadow: none; --button-danger-text-decoration-hover: var(--button-danger-text-decoration); --button-danger-text-color-hover: var(--button-danger-text-color); --button-danger-bg-color-hover: hsl(var(--danger-color-hue), var(--danger-color-saturation), var(--danger-color-lightness-step-down-1)); --button-danger-bg-image-hover: none; --button-danger-border-color-hover: var(--button-danger-border-color); --button-danger-box-shadow-hover: var(--button-danger-box-shadow); --button-danger-text-decoration-active: var(--button-danger-text-decoration); --button-danger-text-color-active: var(--button-danger-text-color); --button-danger-bg-color-active: hsl(var(--danger-color-hue), var(--danger-color-saturation), var(--danger-color-lightness-step-down-2)); --button-danger-bg-image-active: none; --button-danger-border-color-active: var(--button-danger-border-color); --button-danger-box-shadow-active: var(--button-danger-box-shadow); /* Disabled button */ --button-disabled-webkit-font-smoothing: var(--button-webkit-font-smoothing); --button-disabled-moz-osx-font-smoothing: var(--button-moz-osx-font-smoothing); --button-disabled-bg-clip: border-box; --button-disabled-text-decoration: var(--button-text-decoration); --button-disabled-text-color: var(--very-muted-text-color); --button-disabled-bg-color: var(--gray-color-light); --button-disabled-bg-image: none; --button-disabled-border-color: var(--button-border-color); --button-disabled-box-shadow: none; } .dark-mode { /* Default button */ --button-bg-clip: padding-box; --button-bg-color: var(--darkgray-color-very-dim); --button-box-shadow: inset 0 0.1rem hsla(var(--white-color-hsl), 0.025); --button-bg-color-hover: var(--darkgray-color-dim); --button-bg-color-active: var(--darkgray-color); /* Primary button */ --button-primary-border-color: var(--button-border-color); /* Secondary button */ --button-secondary-border-color: var(--button-border-color); /* Success button */ --button-success-border-color: var(--button-border-color); /* Warning button */ --button-warning-border-color: var(--button-border-color); /* Danger button */ --button-danger-border-color: var(--button-border-color); /* Disabled button */ --button-disabled-bg-color: var(--dark-color-light); --button-disabled-border-color: hsla(var(--black-color-hsl), 0.35); } /** * ---------------------------------------------------------------------------- * [ Lists - Variables ] * ---------------------------------------------------------------------------- */ :root { /* Unordered list */ --unordered-list-padding-start: 0; --unordered-list-margin-top: 1.6rem; --unordered-list-margin-bottom: var(--unordered-list-margin-top); --unordered-list-item-bullet-width: 0.8rem; --unordered-list-item-bullet-height: var(--unordered-list-item-bullet-width); --unordered-list-item-bullet-top: calc(((var(--base-line-height) * var(--base-font-size)) - var(--unordered-list-item-bullet-height)) / 2); /* Centers bullet vertically with the first line */ --unordered-list-item-bullet-start: 0; --unordered-list-item-bullet-bg-clip: border-box; --unordered-list-item-bullet-border-style: var(--base-border-style); --unordered-list-item-bullet-border-width: 0; --unordered-list-item-bullet-border-radius: 50%; --unordered-list-item-bullet-bg-color: hsla(var(--black-color-hsl), 0.2); --unordered-list-item-bullet-bg-image: none; --unordered-list-item-bullet-border-color: transparent; --unordered-list-item-bullet-box-shadow: none; --unordered-list-item-padding-start: calc(var(--unordered-list-item-bullet-width) + 1.6rem); --unordered-list-item-margin-bottom: 1rem; /* Ordered list */ --ordered-list-padding-start: 0; --ordered-list-margin-top: 2rem; --ordered-list-margin-bottom: var(--ordered-list-margin-top); --ordered-list-item-numbering-font-family: inherit; --ordered-list-item-numbering-font-size: var(--small-font-size); --ordered-list-item-numbering-line-height: 1; --ordered-list-item-numbering-font-weight: var(--base-font-weight); --ordered-list-item-numbering-webkit-font-smoothing: var(--base-webkit-font-smoothing); --ordered-list-item-numbering-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --ordered-list-item-numbering-min-width: 2rem; --ordered-list-item-numbering-height: var(--ordered-list-item-numbering-min-width); --ordered-list-item-numbering-padding: calc((var(--ordered-list-item-numbering-height) - (var(--ordered-list-item-numbering-font-size) * var(--ordered-list-item-numbering-line-height))) / 2); --ordered-list-item-numbering-top: calc(((var(--base-line-height) * var(--base-font-size)) - var(--ordered-list-item-numbering-height)) / 2); /* Centers numbering vertically with the first line */ --ordered-list-item-numbering-start: 0; --ordered-list-item-numbering-bg-clip: border-box; --ordered-list-item-numbering-border-style: var(--base-border-style); --ordered-list-item-numbering-border-width: 0; --ordered-list-item-numbering-border-radius: var(--ordered-list-item-numbering-min-width); --ordered-list-item-numbering-text-color: inherit; --ordered-list-item-numbering-bg-color: hsla(var(--black-color-hsl), 0.1); --ordered-list-item-numbering-bg-image: none; --ordered-list-item-numbering-border-color: transparent; --ordered-list-item-numbering-box-shadow: none; --ordered-list-item-padding-start: calc(var(--ordered-list-item-numbering-min-width) + 2rem); --ordered-list-item-margin-bottom: var(--unordered-list-item-margin-bottom); /* Nesting */ --nested-unordered-list-vertical-margin: var(--unordered-list-item-margin-bottom); --nested-ordered-list-vertical-margin: var(--ordered-list-item-margin-bottom); } .dark-mode { /* Unordered list */ --unordered-list-item-bullet-bg-color: hsla(var(--white-color-hsl), 0.2); /* Ordered list */ --ordered-list-item-numbering-bg-color: hsla(var(--white-color-hsl), 0.075); } /** * ---------------------------------------------------------------------------- * [ Code - Variables ] * ---------------------------------------------------------------------------- */ :root { /* Preformatted text */ --pre-font-family: var(--base-monospace-font-stack); --pre-font-size: var(--base-font-size); --pre-tab-size: 2; --pre-webkit-font-smoothing: var(--base-webkit-font-smoothing); --pre-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --pre-padding: 3.2rem var(--content-and-card-spacing); --pre-margin: 0; --pre-bg-clip: border-box; --pre-border-style: var(--base-border-style); --pre-border-width: 0; --pre-border-radius: 0; --pre-text-color: inherit; --pre-bg-color: var(--gray-color-very-light); --pre-bg-image: none; --pre-border-color: transparent; --pre-box-shadow: none; /* Code */ --code-font-family: var(--base-monospace-font-stack); --code-font-size: 0.85714285714em; --code-webkit-font-smoothing: var(--base-webkit-font-smoothing); --code-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --code-padding: 0.1rem 0.5rem; --code-margin: 0 0.1rem; --code-bg-clip: border-box; --code-border-style: var(--base-border-style); --code-border-width: var(--base-border-width); --code-border-radius: var(--base-border-radius); --code-text-color: inherit; --code-bg-color: hsla(var(--black-color-hsl), 0.1); --code-bg-image: none; --code-border-color: transparent; --code-box-shadow: none; /* Preformatted code */ --pre-code-font-family: inherit; --pre-code-font-size: inherit; --pre-code-webkit-font-smoothing: inherit; --pre-code-moz-osx-font-smoothing: inherit; --pre-code-padding: 0; --pre-code-margin: 0; --pre-code-bg-clip: border-box; --pre-code-border-style: var(--base-border-style); --pre-code-border-width: 0; --pre-code-border-radius: 0; --pre-code-text-color: inherit; --pre-code-bg-color: transparent; --pre-code-bg-image: none; --pre-code-border-color: transparent; --pre-code-box-shadow: none; /* Keyboard input */ --kbd-font-family: inherit; --kbd-font-size: var(--base-font-size); --kbd-line-height: 1; --kbd-font-weight: var(--base-font-weight); --kbd-webkit-font-smoothing: var(--base-webkit-font-smoothing); --kbd-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --kbd-padding: 0.2rem 0.4rem; --kbd-margin: var(--code-margin); --kbd-min-width: 2rem; --kbd-bg-clip: border-box; --kbd-border-style: var(--base-border-style); --kbd-border-width: 0 0 var(--border-2-border-width) 0; --kbd-border-radius: var(--base-border-radius); --kbd-text-color: var(--base-text-color); --kbd-bg-color: var(--gray-color-very-light); --kbd-bg-image: none; --kbd-border-color: var(--border-color-dark); --kbd-box-shadow: inset 0 0 0.1rem 0.1rem var(--white-color), 0 0.1rem 0.2rem 0.1rem hsla(var(--black-color-hsl), 0.4); } .dark-mode { /* Preformatted text */ --pre-bg-color: var(--dark-color-dim); /* Code */ --code-bg-color: hsla(var(--white-color-hsl), 0.05); /* Keyboard input */ --kbd-bg-color: var(--dark-color-light); --kbd-box-shadow: inset 0 0 0.3rem 0.1rem hsla(var(--white-color-hsl), 0.075), 0 0.1rem 0.2rem 0.1rem hsla(var(--black-color-hsl), 0.4); } /** * ---------------------------------------------------------------------------- * [ Tables - Variables ] * * Every part of the table uses the same border color. While limiting, this is * a great way to have a standardized look for the table variations. * ---------------------------------------------------------------------------- */ :root { --table-vertical-padding: 0.8rem; --table-horizontal-padding: 1.4rem; --table-border-style: var(--base-border-style); --table-border-width: var(--base-border-width); --table-head-row-border-bottom-border-style: var(--table-border-style); --table-head-row-border-bottom-border-width: var(--table-border-width); --table-foot-row-border-top-border-style: var(--table-border-style); --table-foot-row-border-top-border-width: var(--table-border-width); --table-border-color: var(--border-color); /* Table header */ --table-header-cell-font-weight: var(--bold-font-weight); --table-header-cell-webkit-font-smoothing: var(--base-webkit-font-smoothing); --table-header-cell-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); /* Small table */ --small-table-vertical-padding: 0.4rem; --small-table-horizontal-padding: 1rem; /* Large table */ --large-table-vertical-padding: 1.2rem; --large-table-horizontal-padding: 1.8rem; /* Table caption */ --table-caption-webkit-font-smoothing: var(--base-webkit-font-smoothing); --table-caption-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --table-caption-padding: 1rem 0; --table-caption-border-width: var(--base-border-width); --table-caption-border-style: dotted; --table-caption-text-color: var(--muted-text-color); --table-caption-border-color: var(--border-color); /* Striped table */ --table-striped-bg-color: hsla(var(--black-color-hsl), 0.03); --table-striped-bg-image: none; /* Hoverable table */ --table-hoverable-bg-color-hover: hsla(var(--black-color-hsl), 0.09); --table-hoverable-bg-image-hover: none; /* Active table */ --table-active-webkit-font-smoothing: var(--base-webkit-font-smoothing); --table-active-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --table-active-text-color: inherit; --table-active-bg-color: hsla(var(--black-color-hsl), 0.06); --table-active-bg-image: none; --table-striped-active-bg-color: var(--table-striped-bg-color); --table-striped-active-bg-image: var(--table-striped-bg-image); --table-hoverable-active-bg-color-hover: var(--table-hoverable-bg-color-hover); --table-hoverable-active-bg-image-hover: var(--table-hoverable-bg-image-hover); /* Primary table */ --table-primary-webkit-font-smoothing: var(--base-webkit-font-smoothing); --table-primary-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --table-primary-text-color: inherit; --table-primary-bg-color: hsla(var(--primary-color-hsl), 0.2); --table-primary-bg-image: none; --table-striped-primary-bg-color: hsla(var(--primary-color-hsl), 0.275); --table-striped-primary-bg-image: none; --table-hoverable-primary-bg-color-hover: hsla(var(--primary-color-hsl), 0.35); --table-hoverable-primary-bg-image-hover: none; /* Secondary table */ --table-secondary-webkit-font-smoothing: var(--base-webkit-font-smoothing); --table-secondary-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --table-secondary-text-color: inherit; --table-secondary-bg-color: hsla(var(--secondary-color-hsl), 0.2); --table-secondary-bg-image: none; --table-striped-secondary-bg-color: hsla(var(--secondary-color-hsl), 0.275); --table-striped-secondary-bg-image: none; --table-hoverable-secondary-bg-color-hover: hsla(var(--secondary-color-hsl), 0.35); --table-hoverable-secondary-bg-image-hover: none; /* Success table */ --table-success-webkit-font-smoothing: var(--base-webkit-font-smoothing); --table-success-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --table-success-text-color: inherit; --table-success-bg-color: hsla(var(--success-color-hsl), 0.2); --table-success-bg-image: none; --table-striped-success-bg-color: hsla(var(--success-color-hsl), 0.275); --table-striped-success-bg-image: none; --table-hoverable-success-bg-color-hover: hsla(var(--success-color-hsl), 0.35); --table-hoverable-success-bg-image-hover: none; /* Warning table */ --table-warning-webkit-font-smoothing: var(--base-webkit-font-smoothing); --table-warning-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --table-warning-text-color: inherit; --table-warning-bg-color: hsla(var(--warning-color-hsl), 0.2); --table-warning-bg-image: none; --table-striped-warning-bg-color: hsla(var(--warning-color-hsl), 0.275); --table-striped-warning-bg-image: none; --table-hoverable-warning-bg-color-hover: hsla(var(--warning-color-hsl), 0.35); --table-hoverable-warning-bg-image-hover: none; /* Danger table */ --table-danger-webkit-font-smoothing: var(--base-webkit-font-smoothing); --table-danger-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --table-danger-text-color: inherit; --table-danger-bg-color: hsla(var(--danger-color-hsl), 0.2); --table-danger-bg-image: none; --table-striped-danger-bg-color: hsla(var(--danger-color-hsl), 0.275); --table-striped-danger-bg-image: none; --table-hoverable-danger-bg-color-hover: hsla(var(--danger-color-hsl), 0.35); --table-hoverable-danger-bg-image-hover: none; } .dark-mode { /* Striped table */ --table-striped-bg-color: hsla(var(--black-color-hsl), 0.15); /* Hoverable table */ --table-hoverable-bg-color-hover: hsla(var(--black-color-hsl), 0.3); /* Active table */ --table-active-bg-color: hsla(var(--black-color-hsl), 0.225); /* Primary table */ --table-primary-text-color: var(--primary-color-light); --table-primary-bg-color: hsla(var(--primary-color-hsl), 0.1); --table-striped-primary-bg-color: hsla(var(--primary-color-hsl), 0.15); --table-hoverable-primary-bg-color-hover: hsla(var(--primary-color-hsl), 0.2); /* Secondary table */ --table-secondary-text-color: var(--secondary-color-light); --table-secondary-bg-color: hsla(var(--secondary-color-hsl), 0.1); --table-striped-secondary-bg-color: hsla(var(--secondary-color-hsl), 0.15); --table-hoverable-secondary-bg-color-hover: hsla(var(--secondary-color-hsl), 0.2); /* Success table */ --table-success-text-color: var(--success-color-light); --table-success-bg-color: hsla(var(--success-color-hsl), 0.1); --table-striped-success-bg-color: hsla(var(--success-color-hsl), 0.15); --table-hoverable-success-bg-color-hover: hsla(var(--success-color-hsl), 0.2); /* Warning table */ --table-warning-text-color: var(--warning-color-light); --table-warning-bg-color: hsla(var(--warning-color-hsl), 0.1); --table-striped-warning-bg-color: hsla(var(--warning-color-hsl), 0.15); --table-hoverable-warning-bg-color-hover: hsla(var(--warning-color-hsl), 0.2); /* Danger table */ --table-danger-text-color: var(--danger-color-light); --table-danger-bg-color: hsla(var(--danger-color-hsl), 0.1); --table-striped-danger-bg-color: hsla(var(--danger-color-hsl), 0.15); --table-hoverable-danger-bg-color-hover: hsla(var(--danger-color-hsl), 0.2); } /** * ---------------------------------------------------------------------------- * [ Form helpers - Variables ] * ---------------------------------------------------------------------------- */ :root { /* Form group */ --form-group-margin-top: 0; --form-group-margin-bottom: 1.6rem; /* Form label */ --form-label-font-family: var(--base-font-family); --form-label-font-size: var(--base-font-size); --form-label-line-height: var(--base-line-height); --form-label-font-weight: var(--base-font-weight); --form-label-webkit-font-smoothing: var(--base-webkit-font-smoothing); --form-label-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --form-label-margin-top: 0; --form-label-margin-bottom: 0.8rem; --form-label-text-color: var(--base-text-color); --form-label-required-asterisk-font-family: var(--form-label-font-family); --form-label-required-asterisk-font-size: var(--form-label-font-size); --form-label-required-asterisk-line-height: var(--form-label-line-height); --form-label-required-asterisk-font-weight: var(--form-label-font-weight); --form-label-required-asterisk-webkit-font-smoothing: auto; --form-label-required-asterisk-moz-osx-font-smoothing: auto; --form-label-required-asterisk-margin-start: 0.3rem; --form-label-required-asterisk-margin-end: 0; --form-label-required-asterisk-text-color: var(--danger-color); /* Form text */ --form-text-font-family: var(--base-font-family); --form-text-font-size: var(--small-font-size); --form-text-line-height: var(--base-line-height); --form-text-font-weight: var(--base-font-weight); --form-text-webkit-font-smoothing: var(--base-webkit-font-smoothing); --form-text-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --form-text-margin-top: 0.8rem; --form-text-margin-bottom: var(--form-text-margin-top); --form-text-text-color: var(--muted-text-color); /* Form invalid feedback */ --form-invalid-feedback-font-family: var(--base-font-family); --form-invalid-feedback-font-size: var(--base-font-size); --form-invalid-feedback-line-height: var(--base-line-height); --form-invalid-feedback-font-weight: var(--base-font-weight); --form-invalid-feedback-webkit-font-smoothing: auto; --form-invalid-feedback-moz-osx-font-smoothing: auto; --form-invalid-feedback-padding: 0; --form-invalid-feedback-margin-top: 0.8rem; --form-invalid-feedback-margin-bottom: var(--form-text-margin-top); --form-invalid-feedback-text-color: var(--danger-color); /* Form check */ --form-check-inline-margin-end: 1rem; --form-group-form-check-margin-bottom: 0.6rem; } /** * ---------------------------------------------------------------------------- * [ Input - Variables ] * * The vertical sizing variables for the inputs are inherited from buttons, to * ensure that they are always the same size (for greater consistency). * ---------------------------------------------------------------------------- */ :root { --input-font-size: var(--button-font-size); --input-line-height: var(--button-line-height); --input-font-weight: var(--base-font-weight); --input-vertical-padding: var(--button-vertical-padding); --input-horizontal-padding: 0.8rem; --input-border-style: var(--base-border-style); --input-border-width: var(--base-border-width); --input-border-radius: var(--base-border-radius); /* Small input */ --small-input-font-size: var(--small-button-font-size); --small-input-line-height: var(--small-button-line-height); --small-input-vertical-padding: var(--small-button-vertical-padding); --small-input-horizontal-padding: var(--input-horizontal-padding); /* Large input */ --large-input-font-size: var(--large-button-font-size); --large-input-line-height: var(--large-button-line-height); --large-input-vertical-padding: var(--large-button-vertical-padding); --large-input-horizontal-padding: var(--input-horizontal-padding); /* Default input */ --input-webkit-font-smoothing: var(--base-webkit-font-smoothing); --input-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --input-bg-clip: border-box; --input-placeholder-text-color: var(--very-muted-text-color); --input-text-color: var(--base-text-color); --input-bg-color: var(--white-color); --input-bg-image: none; --input-border-color: var(--border-color-dark); --input-box-shadow: none; --input-text-color-hover: var(--input-text-color); --input-bg-color-hover: var(--input-bg-color); --input-bg-image-hover: var(--input-bg-image); --input-border-color-hover: var(--input-border-color); --input-box-shadow-hover: var(--input-box-shadow); --input-border-color-focus: var(--primary-color-light); --input-box-shadow-focus: 0 0 0 0.3rem hsla(var(--primary-color-hsl), 0.2); --input-outline-focus: 0; /* Alternate input */ --input-alt-webkit-font-smoothing: var(--base-webkit-font-smoothing); --input-alt-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --input-alt-bg-clip: border-box; --input-alt-placeholder-text-color: var(--input-placeholder-text-color); --input-alt-text-color: inherit; --input-alt-bg-color: hsla(var(--black-color-hsl), 0.15); --input-alt-bg-image: none; --input-alt-border-color: transparent; --input-alt-box-shadow: none; --input-alt-text-color-hover: var(--input-alt-text-color); --input-alt-bg-color-hover: var(--input-alt-bg-color); --input-alt-bg-image-hover: var(--input-alt-bg-image); --input-alt-border-color-hover: var(--input-alt-border-color); --input-alt-box-shadow-hover: var(--input-alt-box-shadow); --input-alt-border-color-focus: currentColor; --input-alt-box-shadow-focus: var(--input-alt-box-shadow); --input-alt-outline-focus: var(--input-outline-focus); /* Invalid input */ --input-invalid-webkit-font-smoothing: var(--input-webkit-font-smoothing); --input-invalid-moz-osx-font-smoothing: var(--input-moz-osx-font-smoothing); --input-invalid-bg-clip: border-box; --input-invalid-placeholder-text-color: var(--input-placeholder-text-color); --input-invalid-text-color: var(--input-text-color); --input-invalid-bg-color: var(--input-bg-color); --input-invalid-bg-image: var(--input-bg-image); --input-invalid-border-color: var(--danger-color); --input-invalid-box-shadow: var(--input-box-shadow); --input-invalid-text-color-hover: var(--input-invalid-text-color); --input-invalid-bg-color-hover: var(--input-invalid-bg-color); --input-invalid-bg-image-hover: var(--input-invalid-bg-image); --input-invalid-border-color-hover: var(--input-invalid-border-color); --input-invalid-box-shadow-hover: var(--input-invalid-box-shadow); --input-invalid-border-color-focus: var(--input-invalid-border-color); --input-invalid-box-shadow-focus: 0 0 0 0.3rem hsla(var(--danger-color-hsl), 0.2); --input-invalid-outline-focus: var(--input-outline-focus); /* Disabled input */ --input-disabled-webkit-font-smoothing: var(--input-webkit-font-smoothing); --input-disabled-moz-osx-font-smoothing: var(--input-moz-osx-font-smoothing); --input-disabled-bg-clip: border-box; --input-disabled-placeholder-text-color: var(--input-placeholder-text-color); --input-disabled-text-color: var(--very-muted-text-color); --input-disabled-bg-color: var(--gray-color-light); --input-disabled-bg-image: none; --input-disabled-border-color: var(--input-border-color); --input-disabled-box-shadow: none; /* Select */ --select-bg-image: var(--angle-down-svg-darkgray); --select-bg-size: 1.2rem; --select-bg-repeat: no-repeat; --select-bg-position: left calc(100% - 1rem) top 50% /*rtl:right calc(100% - 1rem) top 50%*/; --select-padding-end: 3.2rem; /* Multiple select */ --select-multiple-vertical-padding: var(--input-horizontal-padding); --select-multiple-horizontal-padding: var(--input-horizontal-padding); --small-select-multiple-vertical-padding: var(--small-input-horizontal-padding); --small-select-multiple-horizontal-padding: var(--small-input-horizontal-padding); --large-select-multiple-vertical-padding: var(--large-input-horizontal-padding); --large-select-multiple-horizontal-padding: var(--large-input-horizontal-padding); } .dark-mode { /* Default input */ --input-bg-clip: padding-box; --input-bg-color: var(--darkgray-color-very-dim); --input-border-color-focus: var(--input-border-color); --input-box-shadow-focus: 0 0 0 0.3rem hsla(var(--primary-color-hsl), 0.3); /* Invalid input */ --input-invalid-border-color: var(--danger-color-dim); --input-invalid-box-shadow-focus: 0 0 0 0.4rem hsla(var(--danger-color-hsl), 0.075); /* Disabled input */ --input-disabled-bg-color: var(--dark-color-light); --input-disabled-border-color: hsla(var(--black-color-hsl), 0.35); } /** * ---------------------------------------------------------------------------- * [ Checkbox - Variables ] * ---------------------------------------------------------------------------- */ :root { --checkbox-width: var(--large-font-size); --checkbox-height: var(--checkbox-width); --checkbox-top: calc(((var(--base-line-height) * var(--base-font-size)) - var(--checkbox-height)) / 2); /* Centers vertically with the first line */ --checkbox-start: 0; --checkbox-bg-clip: border-box; --checkbox-bg-image: none; --checkbox-bg-size: contain; --checkbox-bg-repeat: no-repeat; --checkbox-bg-position: center; --checkbox-border-style: var(--base-border-style); --checkbox-border-width: var(--base-border-width); --checkbox-border-radius: var(--base-border-radius); --checkbox-transition: 0s; --checkbox-bg-color: var(--white-color); --checkbox-border-color: var(--border-color); --checkbox-box-shadow: none; --checkbox-bg-color-hover: var(--checkbox-bg-color); --checkbox-border-color-hover: var(--checkbox-border-color); --checkbox-box-shadow-hover: var(--checkbox-box-shadow); --checkbox-border-color-focus: var(--input-border-color-focus); --checkbox-box-shadow-focus: var(--input-box-shadow-focus); --checkbox-outline-focus: var(--input-outline-focus); /* Checked checkbox */ --checkbox-checked-bg-clip: var(--checkbox-bg-clip); --checkbox-checked-bg-image: var(--checkbox-svg-white); --checkbox-checked-bg-size: var(--checkbox-bg-size); --checkbox-checked-bg-repeat: var(--checkbox-bg-repeat); --checkbox-checked-bg-position: var(--checkbox-bg-position); --checkbox-checked-bg-color: var(--primary-color); --checkbox-checked-border-color: transparent; --checkbox-checked-box-shadow: var(--checkbox-box-shadow); --checkbox-checked-bg-color-hover: var(--checkbox-checked-bg-color); --checkbox-checked-border-color-hover: var(--checkbox-checked-border-color); --checkbox-checked-box-shadow-hover: var(--checkbox-checked-box-shadow); --checkbox-checked-border-color-focus: var(--checkbox-checked-border-color); --checkbox-checked-box-shadow-focus: var(--checkbox-box-shadow-focus); --checkbox-checked-outline-focus: var(--checkbox-outline-focus); /* Indeterminate checkbox */ --checkbox-indeterminate-bg-clip: var(--checkbox-checked-bg-clip); --checkbox-indeterminate-bg-image: var(--dash-svg-white); --checkbox-indeterminate-bg-size: var(--checkbox-checked-bg-size); --checkbox-indeterminate-bg-repeat: var(--checkbox-checked-bg-repeat); --checkbox-indeterminate-bg-position: var(--checkbox-checked-bg-position); --checkbox-indeterminate-bg-color: var(--checkbox-checked-bg-color); --checkbox-indeterminate-border-color: var(--checkbox-checked-border-color); --checkbox-indeterminate-box-shadow: var(--checkbox-checked-box-shadow); --checkbox-indeterminate-bg-color-hover: var(--checkbox-checked-bg-color-hover); --checkbox-indeterminate-border-color-hover: var(--checkbox-checked-border-color-hover); --checkbox-indeterminate-box-shadow-hover: var(--checkbox-checked-box-shadow-hover); --checkbox-indeterminate-border-color-focus: var(--checkbox-checked-border-color-focus); --checkbox-indeterminate-box-shadow-focus: var(--checkbox-checked-box-shadow-focus); --checkbox-indeterminate-outline-focus: var(--checkbox-checked-outline-focus); /* Checkbox label */ --checkbox-label-padding-start: calc(var(--checkbox-width) + 1rem); /* Disabled checkbox */ --checkbox-disabled-bg-clip: var(--input-disabled-bg-clip); --checkbox-disabled-bg-image: var(--checkbox-bg-image); --checkbox-disabled-bg-size: var(--checkbox-bg-size); --checkbox-disabled-bg-repeat: var(--checkbox-bg-repeat); --checkbox-disabled-bg-position: var(--checkbox-bg-position); --checkbox-disabled-bg-color: var(--input-disabled-bg-color); --checkbox-disabled-border-color: var(--input-disabled-border-color); --checkbox-disabled-box-shadow: var(--input-disabled-box-shadow); /* Disabled checked checkbox */ --checkbox-disabled-checked-bg-clip: var(--checkbox-disabled-bg-clip); --checkbox-disabled-checked-bg-image: var(--checkbox-svg-darkgray); --checkbox-disabled-checked-bg-size: var(--checkbox-disabled-bg-size); --checkbox-disabled-checked-bg-repeat: var(--checkbox-disabled-bg-repeat); --checkbox-disabled-checked-bg-position: var(--checkbox-disabled-bg-position); --checkbox-disabled-checked-bg-color: var(--checkbox-disabled-bg-color); --checkbox-disabled-checked-border-color: var(--checkbox-disabled-border-color); --checkbox-disabled-checked-box-shadow: var(--checkbox-disabled-box-shadow); /* Disabled indeterminate checkbox */ --checkbox-disabled-indeterminate-bg-clip: var(--checkbox-disabled-bg-clip); --checkbox-disabled-indeterminate-bg-image: var(--dash-svg-darkgray); --checkbox-disabled-indeterminate-bg-size: var(--checkbox-disabled-bg-size); --checkbox-disabled-indeterminate-bg-repeat: var(--checkbox-disabled-bg-repeat); --checkbox-disabled-indeterminate-bg-position: var(--checkbox-disabled-bg-position); --checkbox-disabled-indeterminate-bg-color: var(--checkbox-disabled-bg-color); --checkbox-disabled-indeterminate-border-color: var(--checkbox-disabled-border-color); --checkbox-disabled-indeterminate-box-shadow: var(--checkbox-disabled-box-shadow); /* Disabled checkbox label */ --checkbox-disabled-label-opacity: 0.6; } .dark-mode { --checkbox-bg-color: transparent; --checkbox-border-color: hsla(var(--white-color-hsl), 0.3); --checkbox-border-color-focus: var(--checkbox-border-color); --checkbox-box-shadow-focus: 0 0 0 0.1rem var(--border-color-dark), 0 0 0 0.4rem hsla(var(--primary-color-hsl), 0.3); /* Checked checkbox */ --checkbox-checked-box-shadow-focus: 0 0 0 0.4rem hsla(var(--primary-color-hsl), 0.3); } /** * ---------------------------------------------------------------------------- * [ Radio - Variables ] * * Most of the variables are directly extended from checkbox variables, except * where overrides are needed (such as background image). * ---------------------------------------------------------------------------- */ :root { --radio-width: var(--checkbox-width); --radio-height: var(--checkbox-height); --radio-top: var(--checkbox-top); --radio-start: var(--checkbox-start); --radio-bg-clip: var(--checkbox-bg-clip); --radio-bg-image: var(--checkbox-bg-image); --radio-bg-size: var(--checkbox-bg-size); --radio-bg-repeat: var(--checkbox-bg-repeat); --radio-bg-position: var(--checkbox-bg-position); --radio-border-style: var(--checkbox-border-style); --radio-border-width: var(--checkbox-border-width); --radio-border-radius: 50%; --radio-transition: var(--checkbox-transition); --radio-bg-color: var(--checkbox-bg-color); --radio-border-color: var(--checkbox-border-color); --radio-box-shadow: var(--checkbox-box-shadow); --radio-bg-color-hover: var(--checkbox-bg-color-hover); --radio-border-color-hover: var(--checkbox-border-color-hover); --radio-box-shadow-hover: var(--checkbox-box-shadow-hover); --radio-border-color-focus: var(--checkbox-border-color-focus); --radio-box-shadow-focus: var(--checkbox-box-shadow-focus); --radio-outline-focus: var(--checkbox-outline-focus); /* Checked radio */ --radio-checked-bg-clip: var(--checkbox-checked-bg-clip); --radio-checked-bg-image: var(--radio-svg-white); --radio-checked-bg-size: var(--checkbox-checked-bg-size); --radio-checked-bg-repeat: var(--checkbox-checked-bg-repeat); --radio-checked-bg-position: var(--checkbox-checked-bg-position); --radio-checked-bg-color: var(--checkbox-checked-bg-color); --radio-checked-border-color: var(--checkbox-checked-border-color); --radio-checked-box-shadow: var(--checkbox-checked-box-shadow); --radio-checked-bg-color-hover: var(--checkbox-checked-bg-color-hover); --radio-checked-border-color-hover: var(--checkbox-checked-border-color-hover); --radio-checked-box-shadow-hover: var(--checkbox-checked-box-shadow-hover); --radio-checked-border-color-focus: var(--checkbox-checked-border-color-focus); --radio-checked-box-shadow-focus: var(--checkbox-checked-box-shadow-focus); --radio-checked-outline-focus: var(--checkbox-checked-outline-focus); /* Radio label */ --radio-label-padding-start: var(--checkbox-label-padding-start); /* Disabled radio */ --radio-disabled-bg-clip: var(--checkbox-disabled-bg-clip); --radio-disabled-bg-image: var(--checkbox-disabled-bg-image); --radio-disabled-bg-size: var(--checkbox-disabled-bg-size); --radio-disabled-bg-repeat: var(--checkbox-disabled-bg-repeat); --radio-disabled-bg-position: var(--checkbox-disabled-bg-position); --radio-disabled-bg-color: var(--checkbox-disabled-bg-color); --radio-disabled-border-color: var(--checkbox-disabled-border-color); --radio-disabled-box-shadow: var(--checkbox-disabled-box-shadow); /* Disabled checked radio */ --radio-disabled-checked-bg-clip: var(--checkbox-disabled-checked-bg-clip); --radio-disabled-checked-bg-image: var(--radio-svg-darkgray); --radio-disabled-checked-bg-size: var(--checkbox-disabled-checked-bg-size); --radio-disabled-checked-bg-repeat: var(--checkbox-disabled-checked-bg-repeat); --radio-disabled-checked-bg-position: var(--checkbox-disabled-checked-bg-position); --radio-disabled-checked-bg-color: var(--checkbox-disabled-checked-bg-color); --radio-disabled-checked-border-color: var(--checkbox-disabled-checked-border-color); --radio-disabled-checked-box-shadow: var(--checkbox-disabled-checked-box-shadow); /* Disabled radio label */ --radio-disabled-label-opacity: var(--checkbox-disabled-label-opacity); } /** * ---------------------------------------------------------------------------- * [ Switch - Variables ] * * Most of the variables are directly extended from checkbox variables, except * where overrides are needed (such as background image). * ---------------------------------------------------------------------------- */ :root { --switch-width: calc(var(--checkbox-width) + 1.4rem); --switch-height: var(--checkbox-height); --switch-top: var(--checkbox-top); --switch-start: var(--checkbox-start); --switch-bg-clip: var(--checkbox-bg-clip); --switch-bg-image: var(--switch-svg-gray); --switch-bg-size: var(--checkbox-bg-size); --switch-bg-repeat: var(--checkbox-bg-repeat); --switch-bg-position: 0 center; --switch-border-style: var(--checkbox-border-style); --switch-border-width: var(--checkbox-border-width); --switch-border-radius: var(--switch-height); --switch-transition: background-position 0.15s; --switch-bg-color: var(--checkbox-bg-color); --switch-border-color: var(--checkbox-border-color); --switch-box-shadow: var(--checkbox-box-shadow); --switch-bg-color-hover: var(--checkbox-bg-color-hover); --switch-border-color-hover: var(--checkbox-border-color-hover); --switch-box-shadow-hover: var(--checkbox-box-shadow-hover); --switch-border-color-focus: var(--checkbox-border-color-focus); --switch-box-shadow-focus: var(--checkbox-box-shadow-focus); --switch-outline-focus: var(--checkbox-outline-focus); /* Checked switch */ --switch-checked-bg-clip: var(--checkbox-checked-bg-clip); --switch-checked-bg-image: var(--switch-svg-white); --switch-checked-bg-size: var(--checkbox-checked-bg-size); --switch-checked-bg-repeat: var(--checkbox-checked-bg-repeat); --switch-checked-bg-position: 100% center; --switch-checked-bg-color: var(--checkbox-checked-bg-color); --switch-checked-border-color: var(--checkbox-checked-border-color); --switch-checked-box-shadow: var(--checkbox-checked-box-shadow); --switch-checked-bg-color-hover: var(--checkbox-checked-bg-color-hover); --switch-checked-border-color-hover: var(--checkbox-checked-border-color-hover); --switch-checked-box-shadow-hover: var(--checkbox-checked-box-shadow-hover); --switch-checked-border-color-focus: var(--checkbox-checked-border-color-focus); --switch-checked-box-shadow-focus: var(--checkbox-checked-box-shadow-focus); --switch-checked-outline-focus: var(--checkbox-checked-outline-focus); /* Switch label */ --switch-label-padding-start: calc(var(--switch-width) + 1rem); /* Disabled switch */ --switch-disabled-bg-clip: var(--checkbox-disabled-bg-clip); --switch-disabled-bg-image: var(--switch-svg-gray); --switch-disabled-bg-size: var(--checkbox-disabled-bg-size); --switch-disabled-bg-repeat: var(--checkbox-disabled-bg-repeat); --switch-disabled-bg-position: var(--switch-bg-position); --switch-disabled-bg-color: var(--checkbox-disabled-bg-color); --switch-disabled-border-color: var(--checkbox-disabled-border-color); --switch-disabled-box-shadow: var(--checkbox-disabled-box-shadow); /* Disabled checked switch */ --switch-disabled-checked-bg-clip: var(--checkbox-disabled-checked-bg-clip); --switch-disabled-checked-bg-image: var(--switch-disabled-bg-image); --switch-disabled-checked-bg-size: var(--checkbox-disabled-checked-bg-size); --switch-disabled-checked-bg-repeat: var(--checkbox-disabled-checked-bg-repeat); --switch-disabled-checked-bg-position: var(--switch-checked-bg-position); --switch-disabled-checked-bg-color: var(--checkbox-disabled-checked-bg-color); --switch-disabled-checked-border-color: var(--checkbox-disabled-checked-border-color); --switch-disabled-checked-box-shadow: var(--checkbox-disabled-checked-box-shadow); /* Disabled switch label */ --switch-disabled-label-opacity: var(--checkbox-disabled-label-opacity); } .dark-mode { --switch-bg-image: var(--switch-svg-darkgray); /* Disabled switch */ --switch-disabled-bg-image: var(--switch-svg-darkgray); } /** * ---------------------------------------------------------------------------- * [ File input - Variables ] * ---------------------------------------------------------------------------- */ :root { --form-file-padding-bottom: calc(var(--base-font-size) + 1.4rem); /* Default file input */ --file-input-font-size: var(--button-font-size); --file-input-line-height: var(--button-line-height); --file-input-font-weight: var(--button-font-weight); --file-input-webkit-font-smoothing: var(--button-webkit-font-smoothing); --file-input-moz-osx-font-smoothing: var(--button-moz-osx-font-smoothing); --file-input-vertical-padding: var(--button-vertical-padding); --file-input-horizontal-padding: var(--button-horizontal-padding); --file-input-bg-clip: var(--button-bg-clip); --file-input-border-style: var(--button-border-style); --file-input-border-width: var(--button-border-width); --file-input-border-radius: var(--button-border-radius); --file-input-text-color: var(--button-text-color); --file-input-bg-color: var(--button-bg-color); --file-input-bg-image: var(--button-bg-image); --file-input-border-color: var(--button-border-color); --file-input-box-shadow: var(--button-box-shadow); --file-input-text-color-hover: var(--button-text-color-hover); --file-input-bg-color-hover: var(--button-bg-color-hover); --file-input-bg-image-hover: var(--button-bg-image-hover); --file-input-border-color-hover: var(--button-border-color-hover); --file-input-box-shadow-hover: var(--button-box-shadow-hover); --file-input-text-color-active: var(--button-text-color-active); --file-input-bg-color-active: var(--button-bg-color-active); --file-input-bg-image-active: var(--button-bg-image-active); --file-input-border-color-active: var(--button-border-color-active); --file-input-box-shadow-active: var(--button-box-shadow-active); --file-input-border-color-focus: var(--input-border-color-focus); --file-input-box-shadow-focus: var(--input-box-shadow-focus); --file-input-outline-focus: var(--input-outline-focus); /** * Invalid file input * * The bg-clip, border-color, box shadow, and outline variables are * extended from the corresponding invalid input variables. The exception * is the :active state because inputs don't have variables for this * state. So here, the base ones are extended instead. */ --file-input-invalid-webkit-font-smoothing: var(--file-input-webkit-font-smoothing); --file-input-invalid-moz-osx-font-smoothing: var(--file-input-moz-osx-font-smoothing); --file-input-invalid-bg-clip: var(--input-invalid-bg-clip); --file-input-invalid-text-color: var(--file-input-text-color); --file-input-invalid-bg-color: var(--file-input-bg-color); --file-input-invalid-bg-image: var(--file-input-bg-image); --file-input-invalid-border-color: var(--input-invalid-border-color); --file-input-invalid-box-shadow: var(--input-invalid-box-shadow); --file-input-invalid-text-color-hover: var(--file-input-text-color-hover); --file-input-invalid-bg-color-hover: var(--file-input-bg-color-hover); --file-input-invalid-bg-image-hover: var(--file-input-bg-image-hover); --file-input-invalid-border-color-hover: var(--input-invalid-border-color-hover); --file-input-invalid-box-shadow-hover: var(--input-invalid-box-shadow-hover); --file-input-invalid-text-color-active: var(--file-input-text-color-active); --file-input-invalid-bg-color-active: var(--file-input-bg-color-active); --file-input-invalid-bg-image-active: var(--file-input-bg-image-active); --file-input-invalid-border-color-active: var(--file-input-invalid-border-color); --file-input-invalid-box-shadow-active: var(--file-input-invalid-box-shadow); --file-input-invalid-border-color-focus: var(--input-invalid-border-color-focus); --file-input-invalid-box-shadow-focus: var(--input-invalid-box-shadow-focus); --file-input-invalid-outline-focus: var(--input-invalid-outline-focus); /* Disabled file input */ --file-input-disabled-webkit-font-smoothing: var(--button-disabled-webkit-font-smoothing); --file-input-disabled-moz-osx-font-smoothing: var(--button-disabled-moz-osx-font-smoothing); --file-input-disabled-bg-clip: var(--button-disabled-bg-clip); --file-input-disabled-text-color: var(--button-disabled-text-color); --file-input-disabled-bg-color: var(--button-disabled-bg-color); --file-input-disabled-bg-image: var(--button-disabled-bg-image); --file-input-disabled-border-color: var(--button-disabled-border-color); --file-input-disabled-box-shadow: var(--button-disabled-box-shadow); /* Filename */ --form-file-filename-bottom: 0.2rem; --form-file-filename-start: 0; --form-file-filename-margin: 0; } /** * ---------------------------------------------------------------------------- * [ Range - Variables ] * ---------------------------------------------------------------------------- */ :root { --form-range-width: 100%; --form-range-height: 2.2rem; --form-range-padding: 0; --form-range-bg-clip: border-box; --form-range-border-style: var(--base-border-style); --form-range-border-width: 0; --form-range-border-radius: 0; --form-range-bg-color: transparent; --form-range-bg-image: none; --form-range-border-color: transparent; --form-range-box-shadow: none; /* Invalid range */ --form-range-invalid-bg-clip: var(--form-range-bg-clip); --form-range-invalid-bg-color: var(--form-range-bg-color); --form-range-invalid-bg-image: var(--form-range-bg-image); --form-range-invalid-border-color: var(--form-range-border-color); --form-range-invalid-box-shadow: 0 var(--base-border-width) var(--danger-color); /* Slider track */ --form-range-slider-track-width: 100%; --form-range-slider-track-height: 0.6rem; --form-range-slider-track-bg-clip: border-box; --form-range-slider-track-border-style: var(--base-border-style); --form-range-slider-track-border-width: 0; --form-range-slider-track-border-radius: var(--form-range-slider-track-height); --form-range-slider-track-bg-color: var(--gray-color-light); --form-range-slider-track-bg-image: none; --form-range-slider-track-border-color: transparent; --form-range-slider-track-box-shadow: inset 0 0 0 var(--base-border-width) hsla(var(--black-color-hsl), 0.05); /* Slider thumb */ --form-range-slider-thumb-width: var(--form-range-height); --form-range-slider-thumb-height: var(--form-range-slider-thumb-width); --form-range-slider-thumb-bg-clip: border-box; --form-range-slider-thumb-border-style: var(--base-border-style); --form-range-slider-thumb-border-width: var(--border-2-border-width); --form-range-slider-thumb-border-radius: 50%; --form-range-slider-thumb-bg-color: var(--white-color); --form-range-slider-thumb-bg-image: none; --form-range-slider-thumb-border-color: var(--border-color); --form-range-slider-thumb-box-shadow: none; --form-range-slider-thumb-bg-color-hover: var(--form-range-slider-thumb-bg-color); --form-range-slider-thumb-bg-image-hover: var(--form-range-slider-thumb-bg-image); --form-range-slider-thumb-border-color-hover: var(--form-range-slider-thumb-border-color); --form-range-slider-thumb-box-shadow-hover: var(--form-range-slider-thumb-box-shadow); --form-range-slider-thumb-border-color-focus: var(--primary-color-light); --form-range-slider-thumb-box-shadow-focus: 0 0 0 0.5rem hsla(var(--white-color-hsl), 0.5), 0 0 0 0.5rem hsla(var(--primary-color-hsl), 0.3); --form-range-slider-thumb-outline-focus: 0; /* Disabled slider track */ --form-range-disabled-slider-track-bg-clip: border-box; --form-range-disabled-slider-track-bg-color: var(--gray-color-light); --form-range-disabled-slider-track-bg-image: none; --form-range-disabled-slider-track-border-color: transparent; --form-range-disabled-slider-track-box-shadow: none; /* Disabled slider thumb */ --form-range-disabled-slider-thumb-bg-clip: var(--input-disabled-bg-clip); --form-range-disabled-slider-thumb-bg-color: var(--gray-color); --form-range-disabled-slider-thumb-bg-image: var(--input-disabled-bg-image); --form-range-disabled-slider-thumb-border-color: var(--input-disabled-border-color); --form-range-disabled-slider-thumb-box-shadow: var(--input-disabled-border-color); /* Range group */ --form-range-group-item-margin: 0.5rem; } .dark-mode { /* Invalid range */ --form-range-invalid-box-shadow: 0 var(--base-border-width) var(--danger-color-dim); /* Slider track */ --form-range-slider-track-bg-color: var(--darkgray-color-very-dim); --form-range-slider-track-box-shadow: inset 0 0 0 var(--base-border-width) var(--border-color-dark); /* Slider thumb */ --form-range-slider-thumb-bg-color: var(--darkgray-color-very-dim); --form-range-slider-thumb-border-color-focus: var(--primary-color-dim); --form-range-slider-thumb-box-shadow-focus: 0 0 0 0.5rem hsla(var(--black-color-hsl), 0.2), 0 0 0 0.5rem hsla(var(--primary-color-hsl), 0.3); /* Disabled slider thumb */ --form-range-disabled-slider-thumb-bg-color: var(--input-disabled-bg-color); /* Disabled slider track */ --form-range-disabled-slider-track-bg-color: var(--border-color-dark); } /** * ---------------------------------------------------------------------------- * [ Input group - Variables ] * * The input group heights are needed to fix a weird bug that offsets the * heights of some elements on Webkit based browsers. * ---------------------------------------------------------------------------- */ :root { --input-group-height: calc((var(--input-font-size) * var(--input-line-height)) + (2 * var(--input-vertical-padding)) + (2 * var(--input-border-width))); --small-input-group-height: calc((var(--small-input-font-size) * var(--small-input-line-height)) + (2 * var(--small-input-vertical-padding)) + (2 * var(--input-border-width))); --large-input-group-height: calc((var(--large-input-font-size) * var(--large-input-line-height)) + (2 * var(--large-input-vertical-padding)) + (2 * var(--input-border-width))); /* Input group text */ --input-group-text-font-size: var(--base-font-size); --input-group-text-line-height: 1; --input-group-text-font-weight: var(--base-font-weight); --input-group-text-webkit-font-smoothing: var(--base-webkit-font-smoothing); --input-group-text-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --input-group-text-padding: 0 0.8rem; --input-group-text-bg-clip: border-box; --input-group-text-border-style: var(--base-border-style); --input-group-text-border-width: var(--base-border-width); --input-group-text-border-radius: var(--base-border-radius); --input-group-text-text-color: var(--base-text-color); --input-group-text-bg-color: var(--gray-color-very-light); --input-group-text-bg-image: none; --input-group-text-border-color: var(--border-color-dark); --input-group-text-box-shadow: none; /* Small input group text */ --small-input-group-text-font-size: var(--small-font-size); --small-input-group-text-line-height: var(--input-group-text-line-height); --small-input-group-text-padding: 0 0.6rem; /* Large input group text */ --large-input-group-text-font-size: var(--large-font-size); --large-input-group-text-line-height: var(--input-group-text-line-height); --large-input-group-text-padding: 0 1rem; /* Input group z-indices */ --input-group-input-z-index: auto; --input-group-input-z-index-hover: var(--input-group-input-z-index); --input-group-input-z-index-focus: 3; --input-group-input-invalid-z-index: 2; --input-group-input-invalid-z-index-hover: var(--input-group-input-invalid-z-index); --input-group-input-invalid-z-index-focus: var(--input-group-input-z-index-focus); --input-group-button-z-index: auto; --input-group-button-z-index-hover: var(--input-group-button-z-index); --input-group-button-z-index-active: var(--input-group-button-z-index); --input-group-button-z-index-focus-visible: 3; --input-group-button-contextual-z-index: 1; --input-group-button-contextual-z-index-hover: var(--input-group-button-contextual-z-index); --input-group-button-contextual-z-index-active: var(--input-group-button-contextual-z-index); --input-group-button-contextual-z-index-focus-visible: var(--input-group-button-z-index-focus-visible); } .dark-mode { /* Input group text */ --input-group-text-bg-clip: padding-box; --input-group-text-bg-color: var(--darkgray-color-dim); } /** * ---------------------------------------------------------------------------- * [ Form inline - Variables ] * ---------------------------------------------------------------------------- */ :root { --form-inline-item-horizontal-margin: 1.4rem; --form-inline-item-vertical-margin: var(--form-group-margin-bottom); } /** * ---------------------------------------------------------------------------- * [ Dropdown - Variables ] * ---------------------------------------------------------------------------- */ :root { /* Dropdown menu */ --dropdown-menu-width: auto; --dropdown-menu-min-width: 16.8rem; --dropdown-menu-padding: 0.4rem; --dropdown-menu-margin: 0; --dropdown-menu-bg-clip: border-box; --dropdown-menu-border-style: var(--base-border-style); --dropdown-menu-border-width: var(--base-border-width); --dropdown-menu-border-radius: var(--base-border-radius); --dropdown-menu-text-color: var(--base-text-color); --dropdown-menu-bg-color: var(--base-body-bg-color); --dropdown-menu-bg-image: none; --dropdown-menu-border-color: var(--border-color-dark); --dropdown-menu-box-shadow: var(--shadow); /* Dropdown arrow */ --dropdown-arrow-size: 0.8rem; --dropdown-arrow-size-negative: calc(var(--dropdown-arrow-size) * -1); --dropdown-arrow-size-negative-plus-inner-spacing: calc((2 * var(--dropdown-menu-border-width)) + (var(--dropdown-arrow-size) * -1)); --dropdown-arrow-horizontal-spacing: 0.8rem; --dropdown-arrow-vertical-spacing: 0.8rem; --dropdown-arrow-bg-color: var(--dropdown-menu-bg-color); --dropdown-arrow-border-color: var(--dropdown-menu-border-color); /* Dropdown content */ --dropdown-content-padding: 0.5rem 1rem; --dropdown-content-margin: 0; /* Dropdown item */ --dropdown-item-font-size: var(--base-font-size); --dropdown-item-line-height: var(--base-line-height); --dropdown-item-font-weight: var(--base-font-weight); --dropdown-item-webkit-font-smoothing: var(--base-webkit-font-smoothing); --dropdown-item-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --dropdown-item-padding: var(--dropdown-content-padding); --dropdown-item-margin: var(--dropdown-content-margin); --dropdown-item-bg-clip: border-box; --dropdown-item-border-style: var(--base-border-style); --dropdown-item-border-width: 0; --dropdown-item-border-radius: var(--base-border-radius); --dropdown-item-text-decoration: none; --dropdown-item-text-color: var(--base-text-color); --dropdown-item-bg-color: transparent; --dropdown-item-bg-image: none; --dropdown-item-border-color: transparent; --dropdown-item-box-shadow: none; --dropdown-item-text-decoration-hover: var(--dropdown-item-text-decoration); --dropdown-item-text-color-hover: var(--dropdown-item-text-color); --dropdown-item-bg-color-hover: var(--gray-color-very-light); --dropdown-item-bg-image-hover: none; --dropdown-item-border-color-hover: var(--dropdown-item-border-color); --dropdown-item-box-shadow-hover: var(--dropdown-item-box-shadow); /* Active dropdown item */ --dropdown-item-active-webkit-font-smoothing: auto; --dropdown-item-active-moz-osx-font-smoothing: auto; --dropdown-item-active-bg-clip: var(--dropdown-item-bg-clip); --dropdown-item-active-text-decoration: var(--dropdown-item-text-decoration); --dropdown-item-active-text-color: var(--text-color-on-primary-color-bg); --dropdown-item-active-bg-color: var(--primary-color); --dropdown-item-active-bg-image: none; --dropdown-item-active-border-color: var(--dropdown-item-border-color); --dropdown-item-active-box-shadow: var(--dropdown-item-box-shadow); --dropdown-item-active-text-decoration-hover: var(--dropdown-item-active-text-decoration); --dropdown-item-active-text-color-hover: var(--dropdown-item-active-text-color); --dropdown-item-active-bg-color-hover: hsl(var(--primary-color-hue), var(--primary-color-saturation), var(--primary-color-lightness-step-down-1)); --dropdown-item-active-bg-image-hover: none; --dropdown-item-active-border-color-hover: var(--dropdown-item-active-border-color); --dropdown-item-active-box-shadow-hover: var(--dropdown-item-active-box-shadow); /* Disabled dropdown item */ --dropdown-item-disabled-webkit-font-smoothing: var(--dropdown-item-webkit-font-smoothing); --dropdown-item-disabled-moz-osx-font-smoothing: var(--dropdown-item-moz-osx-font-smoothing); --dropdown-item-disabled-bg-clip: var(--dropdown-item-bg-clip); --dropdown-item-disabled-text-decoration: var(--dropdown-item-text-decoration); --dropdown-item-disabled-text-color: var(--very-muted-text-color); --dropdown-item-disabled-bg-color: var(--dropdown-item-bg-color); --dropdown-item-disabled-bg-image: var(--dropdown-item-bg-image); --dropdown-item-disabled-border-color: var(--dropdown-item-border-color); --dropdown-item-disabled-box-shadow: var(--dropdown-item-box-shadow); /* Dropdown header */ --dropdown-header-font-family: var(--heading-font-family); --dropdown-header-font-size: var(--base-font-size); --dropdown-header-line-height: var(--base-line-height); --dropdown-header-font-weight: var(--heading-font-weight); --dropdown-header-webkit-font-smoothing: var(--heading-webkit-font-smoothing); --dropdown-header-moz-osx-font-smoothing: var(--heading-moz-osx-font-smoothing); --dropdown-header-padding: var(--dropdown-content-padding); --dropdown-header-margin: var(--dropdown-content-margin); /* Dropdown divider */ --dropdown-divider-height: var(--base-border-width); --dropdown-divider-padding: 0; --dropdown-divider-margin: var(--dropdown-content-padding); --dropdown-divider-color: var(--horizontal-rule-color); } .dark-mode { /* Dropdown item */ --dropdown-item-bg-color-hover: var(--darkgray-color-dim); } /** * ---------------------------------------------------------------------------- * [ Modal - Variables ] * ---------------------------------------------------------------------------- */ :root { --modal-dialog-padding: 1rem; /* Modal content */ --modal-content-webkit-font-smoothing: var(--card-webkit-font-smoothing); --modal-content-moz-osx-font-smoothing: var(--card-moz-osx-font-smoothing); --modal-content-padding: var(--content-and-card-spacing); --modal-content-width: 40rem; --modal-content-bg-clip: var(--card-bg-clip); --modal-content-border-style: var(--card-border-style); --modal-content-border-width: var(--card-border-width); --modal-content-border-radius: var(--card-border-radius); --modal-content-text-color: var(--card-text-color); --modal-content-bg-color: var(--card-bg-color); --modal-content-bg-image: var(--card-bg-image); --modal-content-border-color: var(--card-border-color); --modal-content-box-shadow: var(--card-box-shadow); /* Modal full */ --modal-full-content-webkit-font-smoothing: var(--base-webkit-font-smoothing); --modal-full-content-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --modal-full-content-padding: var(--modal-content-padding); --modal-full-content-bg-clip: border-box; --modal-full-content-border-style: var(--base-border-style); --modal-full-content-border-width: 0; --modal-full-content-border-radius: 0; --modal-full-content-text-color: var(--base-text-color); --modal-full-content-bg-color: var(--base-body-bg-color); --modal-full-content-bg-image: var(--base-body-bg-image); --modal-full-content-border-color: transparent; --modal-full-content-box-shadow: none; /* Modal title */ --modal-title-font-family: var(--card-title-font-family); --modal-title-font-size: var(--card-title-font-size); --modal-title-line-height: var(--card-title-line-height); --modal-title-font-weight: var(--card-title-font-weight); --modal-title-webkit-font-smoothing: var(--card-title-webkit-font-smoothing); --modal-title-moz-osx-font-smoothing: var(--card-title-moz-osx-font-smoothing); --modal-title-margin-top: var(--card-title-margin-top); --modal-title-margin-bottom: var(--card-title-margin-bottom); /* Modal close */ --modal-close-font-size: var(--large-font-size); --modal-close-line-height: 1; --modal-close-font-weight: var(--base-font-weight); --modal-close-webkit-font-smoothing: auto; --modal-close-moz-osx-font-smoothing: auto; --modal-close-vertical-padding: 0.6rem; --modal-close-horizontal-padding: 0.8rem; --modal-close-margin: 0.4rem; --modal-close-bg-clip: border-box; --modal-close-border-style: var(--base-border-style); --modal-close-border-width: var(--base-border-width); --modal-close-border-radius: var(--base-border-radius); --modal-close-text-decoration: none; --modal-close-text-color: var(--base-text-color-soft); --modal-close-bg-color: transparent; --modal-close-bg-image: none; --modal-close-border-color: transparent; --modal-close-box-shadow: none; --modal-close-text-decoration-hover: var(--modal-close-text-decoration); --modal-close-text-color-hover: var(--modal-close-text-color); --modal-close-bg-color-hover: var(--button-bg-color-hover); --modal-close-bg-image-hover: var(--button-bg-image-hover); --modal-close-border-color-hover: var(--modal-close-border-color); --modal-close-box-shadow-hover: var(--modal-close-box-shadow); --modal-close-text-decoration-active: var(--modal-close-text-decoration); --modal-close-text-color-active: var(--modal-close-text-color); --modal-close-bg-color-active: var(--button-bg-color-active); --modal-close-bg-image-active: var(--button-bg-image-active); --modal-close-border-color-active: var(--modal-close-border-color); --modal-close-box-shadow-active: var(--modal-close-box-shadow); } /** * ---------------------------------------------------------------------------- * [ Offcanvas - Variables ] * ---------------------------------------------------------------------------- */ :root { --offcanvas-webkit-font-smoothing: var(--modal-content-webkit-font-smoothing); --offcanvas-moz-osx-font-smoothing: var(--modal-content-moz-osx-font-smoothing); --offcanvas-padding: var(--content-and-card-spacing); --offcanvas-start-end-width: var(--sidebar-width); --offcanvas-top-bottom-height: var(--offcanvas-start-end-width); --offcanvas-bg-clip: var(--modal-content-bg-clip); --offcanvas-border-style: var(--modal-content-border-style); --offcanvas-border-width: var(--modal-content-border-width); --offcanvas-start-end-border-radius: 0; --offcanvas-top-bottom-border-radius: 0; --offcanvas-text-color: var(--modal-content-text-color); --offcanvas-bg-color: var(--modal-content-bg-color); --offcanvas-bg-image: var(--modal-content-bg-image); --offcanvas-border-color: var(--modal-content-border-color); --offcanvas-box-shadow: var(--modal-content-box-shadow); /* Offcanvas title */ --offcanvas-title-font-family: var(--modal-title-font-family); --offcanvas-title-font-size: var(--modal-title-font-size); --offcanvas-title-line-height: var(--modal-title-line-height); --offcanvas-title-font-weight: var(--modal-title-font-weight); --offcanvas-title-webkit-font-smoothing: var(--modal-title-webkit-font-smoothing); --offcanvas-title-moz-osx-font-smoothing: var(--modal-title-moz-osx-font-smoothing); --offcanvas-title-margin-top: var(--modal-title-margin-top); --offcanvas-title-margin-bottom: var(--modal-title-margin-bottom); /* Offcanvas close */ --offcanvas-close-font-size: var(--modal-close-font-size); --offcanvas-close-line-height: var(--modal-close-line-height); --offcanvas-close-font-weight: var(--modal-close-font-weight); --offcanvas-close-webkit-font-smoothing: var(--modal-close-webkit-font-smoothing); --offcanvas-close-moz-osx-font-smoothing: var(--modal-close-moz-osx-font-smoothing); --offcanvas-close-vertical-padding: var(--modal-close-vertical-padding); --offcanvas-close-horizontal-padding: var(--modal-close-horizontal-padding); --offcanvas-close-margin: var(--modal-close-margin); --offcanvas-close-bg-clip: var(--modal-close-bg-clip); --offcanvas-close-border-style: var(--modal-close-border-style); --offcanvas-close-border-width: var(--modal-close-border-width); --offcanvas-close-border-radius: var(--modal-close-border-radius); --offcanvas-close-text-decoration: var(--modal-close-text-decoration); --offcanvas-close-text-color: var(--modal-close-text-color); --offcanvas-close-bg-color: var(--modal-close-bg-color); --offcanvas-close-bg-image: var(--modal-close-bg-image); --offcanvas-close-border-color: var(--modal-close-border-color); --offcanvas-close-box-shadow: var(--modal-close-box-shadow); --offcanvas-close-text-decoration-hover: var(--modal-close-text-decoration-hover); --offcanvas-close-text-color-hover: var(--modal-close-text-color-hover); --offcanvas-close-bg-color-hover: var(--modal-close-bg-color-hover); --offcanvas-close-bg-image-hover: var(--modal-close-bg-image-hover); --offcanvas-close-border-color-hover: var(--modal-close-border-color-hover); --offcanvas-close-box-shadow-hover: var(--modal-close-box-shadow-hover); --offcanvas-close-text-decoration-active: var(--modal-close-text-decoration-active); --offcanvas-close-text-color-active: var(--modal-close-text-color-active); --offcanvas-close-bg-color-active: var(--modal-close-bg-color-active); --offcanvas-close-bg-image-active: var(--modal-close-bg-image-active); --offcanvas-close-border-color-active: var(--modal-close-border-color-active); --offcanvas-close-box-shadow-active: var(--modal-close-box-shadow-active); } /** * ---------------------------------------------------------------------------- * [ Alerts - Variables ] * ---------------------------------------------------------------------------- */ :root { --alert-font-size: var(--base-font-size); --alert-line-height: var(--base-line-height); --alert-padding: 1.6rem 2.2rem; --alert-margin-top: 1.6rem; --alert-margin-bottom: var(--alert-margin-top); --alert-border-style: var(--base-border-style); --alert-border-width: var(--base-border-width); --alert-border-radius: var(--base-border-radius); /* Alert heading (styled mostly as a heading) */ --alert-heading-font-family: var(--heading-font-family); --alert-heading-font-size: var(--large-font-size); --alert-heading-line-height: var(--small-line-height); --alert-heading-font-weight: var(--heading-font-weight); --alert-heading-webkit-font-smoothing: var(--heading-webkit-font-smoothing); --alert-heading-moz-osx-font-smoothing: var(--heading-moz-osx-font-smoothing); --alert-heading-margin-top: 0; --alert-heading-margin-bottom: 0.8rem; /* Alert link (same as link reset) */ --alert-link-webkit-font-smoothing: var(--link-reset-webkit-font-smoothing); --alert-link-moz-osx-font-smoothing: var(--link-reset-moz-osx-font-smoothing); --alert-link-text-decoration: var(--link-reset-text-decoration); --alert-link-color: var(--link-reset-color); --alert-link-opacity: var(--link-reset-opacity); --alert-link-text-decoration-hover: var(--link-reset-text-decoration-hover); --alert-link-color-hover: var(--link-reset-color-hover); --alert-link-opacity-hover: var(--link-reset-opacity-hover); /* Alert close */ --alert-close-font-size: var(--base-font-size); --alert-close-line-height: 1; --alert-close-font-weight: var(--base-font-weight); --alert-close-webkit-font-smoothing: auto; --alert-close-moz-osx-font-smoothing: auto; --alert-close-vertical-padding: 0.3rem; --alert-close-horizontal-padding: 0.5rem; --alert-close-margin: 0; --alert-close-bg-clip: border-box; --alert-close-border-style: dotted; --alert-close-border-width: var(--base-border-width); --alert-close-border-radius: var(--base-border-radius); --alert-close-text-decoration: none; --alert-close-text-color: inherit; --alert-close-bg-color: transparent; --alert-close-bg-image: none; --alert-close-border-color: transparent; --alert-close-box-shadow: none; --alert-close-text-decoration-hover: var(--alert-close-text-decoration); --alert-close-text-color-hover: var(--alert-close-text-color); --alert-close-bg-color-hover: var(--alert-close-bg-color); --alert-close-bg-image-hover: none; --alert-close-border-color-hover: var(--alert-close-border-color); --alert-close-box-shadow-hover: var(--alert-close-box-shadow); --alert-close-text-decoration-active: var(--alert-close-text-decoration); --alert-close-text-color-active: var(--alert-close-text-color); --alert-close-bg-color-active: var(--alert-close-bg-color); --alert-close-bg-image-active: none; --alert-close-border-color-active: inherit; --alert-close-box-shadow-active: var(--alert-close-box-shadow); /* Default alert */ --alert-webkit-font-smoothing: var(--base-webkit-font-smoothing); --alert-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --alert-bg-clip: border-box; --alert-text-color: var(--base-text-color); --alert-bg-color: var(--white-color); --alert-bg-image: none; --alert-border-color: var(--border-color); --alert-box-shadow: none; /* Primary alert */ --alert-primary-webkit-font-smoothing: var(--base-webkit-font-smoothing); --alert-primary-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --alert-primary-bg-clip: var(--alert-bg-clip); --alert-primary-text-color: var(--base-text-color); --alert-primary-bg-color: var(--primary-color-very-light); --alert-primary-bg-image: none; --alert-primary-border-color: var(--primary-color); --alert-primary-box-shadow: none; --alert-primary-filled-webkit-font-smoothing: auto; --alert-primary-filled-moz-osx-font-smoothing: auto; --alert-primary-filled-bg-clip: var(--alert-bg-clip); --alert-primary-filled-text-color: var(--text-color-on-primary-color-bg); --alert-primary-filled-bg-color: var(--primary-color); --alert-primary-filled-bg-image: none; --alert-primary-filled-border-color: var(--primary-color); --alert-primary-filled-box-shadow: none; /* Secondary alert */ --alert-secondary-webkit-font-smoothing: var(--base-webkit-font-smoothing); --alert-secondary-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --alert-secondary-bg-clip: var(--alert-bg-clip); --alert-secondary-text-color: var(--base-text-color); --alert-secondary-bg-color: var(--secondary-color-very-light); --alert-secondary-bg-image: none; --alert-secondary-border-color: var(--secondary-color); --alert-secondary-box-shadow: none; --alert-secondary-filled-webkit-font-smoothing: auto; --alert-secondary-filled-moz-osx-font-smoothing: auto; --alert-secondary-filled-bg-clip: var(--alert-bg-clip); --alert-secondary-filled-text-color: var(--text-color-on-secondary-color-bg); --alert-secondary-filled-bg-color: var(--secondary-color); --alert-secondary-filled-bg-image: none; --alert-secondary-filled-border-color: var(--secondary-color); --alert-secondary-filled-box-shadow: none; /* Success alert */ --alert-success-webkit-font-smoothing: var(--base-webkit-font-smoothing); --alert-success-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --alert-success-bg-clip: var(--alert-bg-clip); --alert-success-text-color: var(--base-text-color); --alert-success-bg-color: var(--success-color-very-light); --alert-success-bg-image: none; --alert-success-border-color: var(--success-color); --alert-success-box-shadow: none; --alert-success-filled-webkit-font-smoothing: auto; --alert-success-filled-moz-osx-font-smoothing: auto; --alert-success-filled-bg-clip: var(--alert-bg-clip); --alert-success-filled-text-color: var(--text-color-on-success-color-bg); --alert-success-filled-bg-color: var(--success-color); --alert-success-filled-bg-image: none; --alert-success-filled-border-color: var(--success-color); --alert-success-filled-box-shadow: none; /* Warning alert */ --alert-warning-webkit-font-smoothing: var(--base-webkit-font-smoothing); --alert-warning-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --alert-warning-bg-clip: var(--alert-bg-clip); --alert-warning-text-color: var(--base-text-color); --alert-warning-bg-color: var(--warning-color-very-light); --alert-warning-bg-image: none; --alert-warning-border-color: var(--warning-color); --alert-warning-box-shadow: none; --alert-warning-filled-webkit-font-smoothing: auto; --alert-warning-filled-moz-osx-font-smoothing: auto; --alert-warning-filled-bg-clip: var(--alert-bg-clip); --alert-warning-filled-text-color: var(--text-color-on-warning-color-bg); --alert-warning-filled-bg-color: var(--warning-color); --alert-warning-filled-bg-image: none; --alert-warning-filled-border-color: var(--warning-color); --alert-warning-filled-box-shadow: none; /* Danger alert */ --alert-danger-webkit-font-smoothing: var(--base-webkit-font-smoothing); --alert-danger-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --alert-danger-bg-clip: var(--alert-bg-clip); --alert-danger-text-color: var(--base-text-color); --alert-danger-bg-color: var(--danger-color-very-light); --alert-danger-bg-image: none; --alert-danger-border-color: var(--danger-color); --alert-danger-box-shadow: none; --alert-danger-filled-webkit-font-smoothing: auto; --alert-danger-filled-moz-osx-font-smoothing: auto; --alert-danger-filled-bg-clip: var(--alert-bg-clip); --alert-danger-filled-text-color: var(--text-color-on-danger-color-bg); --alert-danger-filled-bg-color: var(--danger-color); --alert-danger-filled-bg-image: none; --alert-danger-filled-border-color: var(--danger-color); --alert-danger-filled-box-shadow: none; } .dark-mode { /* Default alert */ --alert-bg-color: var(--dark-color-light); --alert-border-color: hsla(var(--black-color-hsl), 0.35); /* Primary alert */ --alert-primary-text-color: var(--primary-color-light); --alert-primary-bg-color: var(--primary-color-very-dim); --alert-primary-border-color: var(--primary-color-dim); --alert-primary-filled-bg-clip: padding-box; --alert-primary-filled-border-color: var(--border-color-dark); /* Secondary alert */ --alert-secondary-text-color: var(--secondary-color-light); --alert-secondary-bg-color: var(--secondary-color-very-dim); --alert-secondary-border-color: var(--secondary-color-dim); --alert-secondary-filled-bg-clip: padding-box; --alert-secondary-filled-border-color: var(--border-color-dark); /* Success alert */ --alert-success-text-color: var(--success-color-light); --alert-success-bg-color: var(--success-color-very-dim); --alert-success-border-color: var(--success-color-dim); --alert-success-filled-bg-clip: padding-box; --alert-success-filled-border-color: var(--border-color-dark); /* Warning alert */ --alert-warning-text-color: var(--warning-color-light); --alert-warning-bg-color: var(--warning-color-very-dim); --alert-warning-border-color: var(--warning-color-dim); --alert-warning-filled-bg-clip: padding-box; --alert-warning-filled-border-color: var(--border-color-dark); /* Danger alert */ --alert-danger-text-color: var(--danger-color-light); --alert-danger-bg-color: var(--danger-color-very-dim); --alert-danger-border-color: var(--danger-color-dim); --alert-danger-filled-bg-clip: padding-box; --alert-danger-filled-border-color: var(--border-color-dark); } /** * ---------------------------------------------------------------------------- * [ Navbar content - Variables ] * ---------------------------------------------------------------------------- */ :root { --navbar-container-horizontal-padding: var(--content-and-card-spacing); --navbar-nav-padding: 0; --navbar-nav-vertical-margin: 0; --navbar-content-padding: 0 1rem; --navbar-content-margin: 0 0.5rem; /* Navbar link */ --navbar-link-font-size: var(--base-font-size); --navbar-link-line-height: var(--base-line-height); --navbar-link-font-weight: var(--base-font-weight); --navbar-link-webkit-font-smoothing: var(--base-webkit-font-smoothing); --navbar-link-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --navbar-link-padding: var(--navbar-content-padding); --navbar-link-margin: var(--navbar-content-margin); --navbar-link-bg-clip: border-box; --navbar-link-border-style: var(--base-border-style); --navbar-link-border-width: 0; --navbar-link-border-radius: var(--base-border-radius); --navbar-link-text-decoration: none; --navbar-link-text-color: var(--base-text-color-soft); --navbar-link-bg-color: transparent; --navbar-link-bg-image: none; --navbar-link-border-color: transparent; --navbar-link-box-shadow: none; --navbar-link-text-decoration-hover: var(--navbar-link-text-decoration); --navbar-link-text-color-hover: var(--base-text-color); --navbar-link-bg-color-hover: var(--navbar-link-bg-color); --navbar-link-bg-image-hover: var(--navbar-link-bg-image); --navbar-link-border-color-hover: var(--navbar-link-border-color); --navbar-link-box-shadow-hover: var(--navbar-link-box-shadow); /* Active navbar link */ --navbar-link-active-webkit-font-smoothing: auto; --navbar-link-active-moz-osx-font-smoothing: auto; --navbar-link-active-bg-clip: var(--navbar-link-bg-clip); --navbar-link-active-text-decoration: var(--navbar-link-text-decoration); --navbar-link-active-text-color: var(--primary-color); --navbar-link-active-bg-color: var(--navbar-link-bg-color); --navbar-link-active-bg-image: var(--navbar-link-bg-image); --navbar-link-active-border-color: var(--navbar-link-border-color); --navbar-link-active-box-shadow: var(--navbar-link-box-shadow); --navbar-link-active-text-decoration-hover: var(--navbar-link-active-text-decoration); --navbar-link-active-text-color-hover: hsl(var(--primary-color-hue), var(--primary-color-saturation), var(--primary-color-lightness-step-up-1)); --navbar-link-active-bg-color-hover: var(--navbar-link-active-bg-color); --navbar-link-active-bg-image-hover: var(--navbar-link-active-bg-image); --navbar-link-active-border-color-hover: var(--navbar-link-active-border-color); --navbar-link-active-box-shadow-hover: var(--navbar-link-active-box-shadow); /* Navbar brand */ --navbar-brand-font-family: var(--heading-font-family); --navbar-brand-font-size: var(--heading-5-font-size); --navbar-brand-line-height: var(--heading-5-line-height); --navbar-brand-font-weight: var(--heading-font-weight); --navbar-brand-webkit-font-smoothing: var(--heading-webkit-font-smoothing); --navbar-brand-moz-osx-font-smoothing: var(--heading-moz-osx-font-smoothing); --navbar-brand-padding: var(--navbar-content-padding); --navbar-brand-margin: var(--navbar-content-margin); --navbar-brand-bg-clip: border-box; --navbar-brand-border-style: var(--base-border-style); --navbar-brand-border-width: 0; --navbar-brand-border-radius: 0; --navbar-brand-image-height: var(--navbar-brand-font-size); --navbar-brand-image-margin-end: 1rem; --navbar-brand-text-decoration: none; --navbar-brand-text-color: var(--base-text-color); --navbar-brand-bg-color: transparent; --navbar-brand-bg-image: none; --navbar-brand-border-color: transparent; --navbar-brand-box-shadow: none; --navbar-brand-text-decoration-hover: var(--navbar-brand-text-decoration); --navbar-brand-text-color-hover: var(--base-text-color-soft); --navbar-brand-bg-color-hover: var(--navbar-brand-bg-color); --navbar-brand-bg-image-hover: var(--navbar-brand-bg-image); --navbar-brand-border-color-hover: var(--navbar-brand-border-color); --navbar-brand-box-shadow-hover: var(--navbar-brand-box-shadow); /* Navbar form inline */ --navbar-form-inline-padding: var(--navbar-content-padding); --navbar-form-inline-margin: var(--navbar-content-margin); --navbar-form-inline-input-min-width: 12rem; --navbar-form-inline-input-group-min-width: 20rem; } .dark-mode { /* Navbar link */ --navbar-link-active-text-color: hsl(var(--primary-color-hue), var(--primary-color-saturation), var(--primary-color-lightness-step-up-1)); --navbar-link-active-text-color-hover: var(--primary-color); } @media (max-width: 576px) { :root { --navbar-form-inline-input-min-width: 10rem; --navbar-form-inline-input-group-min-width: 18rem; } } /** * ---------------------------------------------------------------------------- * [ Sidebar content - Variables ] * ---------------------------------------------------------------------------- */ :root { --sidebar-menu-padding: 0; --sidebar-menu-vertical-margin: 2rem; --sidebar-content-padding: 0.4rem 2rem; --sidebar-content-margin: 0.4rem 0; /* Sidebar link */ --sidebar-link-font-size: var(--base-font-size); --sidebar-link-line-height: var(--base-line-height); --sidebar-link-font-weight: var(--base-font-weight); --sidebar-link-webkit-font-smoothing: var(--base-webkit-font-smoothing); --sidebar-link-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --sidebar-link-padding: var(--sidebar-content-padding); --sidebar-link-margin: var(--sidebar-content-margin); --sidebar-link-bg-clip: border-box; --sidebar-link-border-style: var(--base-border-style); --sidebar-link-border-width: 0; --sidebar-link-border-radius: var(--base-border-radius); --sidebar-link-text-decoration: none; --sidebar-link-text-color: var(--base-text-color-soft); --sidebar-link-bg-color: transparent; --sidebar-link-bg-image: none; --sidebar-link-border-color: transparent; --sidebar-link-box-shadow: none; --sidebar-link-text-decoration-hover: var(--sidebar-link-text-decoration); --sidebar-link-text-color-hover: var(--base-text-color); --sidebar-link-bg-color-hover: var(--sidebar-link-bg-color); --sidebar-link-bg-image-hover: var(--sidebar-link-bg-image); --sidebar-link-border-color-hover: var(--sidebar-link-border-color); --sidebar-link-box-shadow-hover: var(--sidebar-link-box-shadow); /* Active sidebar link */ --sidebar-link-active-webkit-font-smoothing: auto; --sidebar-link-active-moz-osx-font-smoothing: auto; --sidebar-link-active-bg-clip: var(--sidebar-link-bg-clip); --sidebar-link-active-text-decoration: var(--sidebar-link-text-decoration); --sidebar-link-active-text-color: var(--primary-color); --sidebar-link-active-bg-color: var(--sidebar-link-bg-color); --sidebar-link-active-bg-image: var(--sidebar-link-bg-image); --sidebar-link-active-border-color: var(--sidebar-link-border-color); --sidebar-link-active-box-shadow: var(--sidebar-link-box-shadow); --sidebar-link-active-text-decoration-hover: var(--sidebar-link-active-text-decoration); --sidebar-link-active-text-color-hover: hsl(var(--primary-color-hue), var(--primary-color-saturation), var(--primary-color-lightness-step-up-1)); --sidebar-link-active-bg-color-hover: var(--sidebar-link-active-bg-color); --sidebar-link-active-bg-image-hover: var(--sidebar-link-active-bg-image); --sidebar-link-active-border-color-hover: var(--sidebar-link-active-border-color); --sidebar-link-active-box-shadow-hover: var(--sidebar-link-active-box-shadow); /* Sidebar icon */ --sidebar-icon-font-size: var(--large-font-size); --sidebar-icon-line-height: 1; --sidebar-icon-font-weight: var(--base-font-weight); --sidebar-icon-webkit-font-smoothing: var(--base-webkit-font-smoothing); --sidebar-icon-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --sidebar-icon-width: 3rem; --sidebar-icon-height: var(--sidebar-icon-width); --sidebar-icon-padding: 0; --sidebar-icon-margin-end: 1rem; --sidebar-icon-bg-clip: border-box; --sidebar-icon-border-style: var(--base-border-style); --sidebar-icon-border-width: 0; --sidebar-icon-border-radius: var(--base-border-radius); --sidebar-icon-text-decoration: none; --sidebar-icon-text-color: var(--base-text-color-soft); --sidebar-icon-bg-color: var(--gray-color-light); --sidebar-icon-bg-image: none; --sidebar-icon-border-color: transparent; --sidebar-icon-box-shadow: none; --sidebar-icon-text-decoration-hover: var(--sidebar-icon-text-decoration); --sidebar-icon-text-color-hover: var(--sidebar-icon-text-color); --sidebar-icon-bg-color-hover: var(--sidebar-icon-bg-color); --sidebar-icon-bg-image-hover: var(--sidebar-icon-bg-image); --sidebar-icon-border-color-hover: var(--sidebar-icon-border-color); --sidebar-icon-box-shadow-hover: var(--sidebar-icon-box-shadow); /* Active sidebar icon */ --sidebar-icon-active-webkit-font-smoothing: var(--sidebar-icon-webkit-font-smoothing); --sidebar-icon-active-moz-osx-font-smoothing: var(--sidebar-icon-moz-osx-font-smoothing); --sidebar-icon-active-bg-clip: var(--sidebar-icon-bg-clip); --sidebar-icon-active-text-decoration: var(--sidebar-icon-text-decoration); --sidebar-icon-active-text-color: var(--sidebar-icon-text-color); --sidebar-icon-active-bg-color: var(--sidebar-icon-bg-color); --sidebar-icon-active-bg-image: var(--sidebar-icon-bg-image); --sidebar-icon-active-border-color: var(--sidebar-icon-border-color); --sidebar-icon-active-box-shadow: var(--sidebar-icon-box-shadow); --sidebar-icon-active-text-decoration-hover: var(--sidebar-icon-active-text-decoration); --sidebar-icon-active-text-color-hover: var(--sidebar-icon-active-text-color); --sidebar-icon-active-bg-color-hover: var(--sidebar-icon-active-bg-color); --sidebar-icon-active-bg-image-hover: var(--sidebar-icon-active-bg-image); --sidebar-icon-active-border-color-hover: var(--sidebar-icon-active-border-color); --sidebar-icon-active-box-shadow-hover: var(--sidebar-icon-active-box-shadow); /* Sidebar title */ --sidebar-title-font-family: var(--heading-font-family); --sidebar-title-font-size: var(--base-font-size); --sidebar-title-line-height: var(--base-line-height); --sidebar-title-font-weight: var(--heading-font-weight); --sidebar-title-webkit-font-smoothing: var(--heading-webkit-font-smoothing); --sidebar-title-moz-osx-font-smoothing: var(--heading-moz-osx-font-smoothing); --sidebar-title-padding: var(--sidebar-content-padding); --sidebar-title-margin: var(--sidebar-content-margin); /* Sidebar brand */ --sidebar-brand-font-family: var(--heading-font-family); --sidebar-brand-font-size: var(--heading-5-font-size); --sidebar-brand-line-height: var(--heading-5-line-height); --sidebar-brand-font-weight: var(--heading-font-weight); --sidebar-brand-webkit-font-smoothing: var(--heading-webkit-font-smoothing); --sidebar-brand-moz-osx-font-smoothing: var(--heading-moz-osx-font-smoothing); --sidebar-brand-padding: var(--sidebar-content-padding); --sidebar-brand-margin: var(--sidebar-menu-vertical-margin) 0; --sidebar-brand-bg-clip: border-box; --sidebar-brand-border-style: var(--base-border-style); --sidebar-brand-border-width: 0; --sidebar-brand-border-radius: 0; --sidebar-brand-image-height: var(--sidebar-brand-font-size); --sidebar-brand-image-margin-end: 1rem; --sidebar-brand-text-decoration: none; --sidebar-brand-text-color: var(--base-text-color); --sidebar-brand-bg-color: transparent; --sidebar-brand-bg-image: none; --sidebar-brand-border-color: transparent; --sidebar-brand-box-shadow: none; --sidebar-brand-text-decoration-hover: var(--sidebar-brand-text-decoration); --sidebar-brand-text-color-hover: var(--base-text-color-soft); --sidebar-brand-bg-color-hover: var(--sidebar-brand-bg-color); --sidebar-brand-bg-image-hover: var(--sidebar-brand-bg-image); --sidebar-brand-border-color-hover: var(--sidebar-brand-border-color); --sidebar-brand-box-shadow-hover: var(--sidebar-brand-box-shadow); /* Sidebar divider */ --sidebar-divider-height: var(--base-border-width); --sidebar-divider-padding: 0; --sidebar-divider-margin: var(--sidebar-content-padding); --sidebar-divider-color: var(--horizontal-rule-color); } .dark-mode { /* Sidebar link */ --sidebar-link-active-text-color: hsl(var(--primary-color-hue), var(--primary-color-saturation), var(--primary-color-lightness-step-up-1)); --sidebar-link-active-text-color-hover: var(--primary-color); /* Sidebar icon */ --sidebar-icon-bg-color: var(--darkgray-color-very-dim); } /** * ---------------------------------------------------------------------------- * [ Pagination - Variables ] * ---------------------------------------------------------------------------- */ :root { --pagination-padding: 0; --pagination-margin-top: var(--unordered-list-margin-top); --pagination-margin-bottom: var(--pagination-margin-top); /** * Pagination link * * Pagination links are styled the same as buttons. Regular is the default * button, active is primary button, and disabled is disabled button. */ --pagination-link-font-size: var(--button-font-size); --pagination-link-line-height: var(--button-line-height); --pagination-link-font-weight: var(--button-font-weight); --pagination-link-vertical-padding: var(--button-vertical-padding); --pagination-link-horizontal-padding: 0.4rem; --pagination-link-min-width: var(--square-button-width); --pagination-link-border-style: var(--button-border-style); --pagination-link-border-width: var(--button-border-width); --pagination-link-border-radius: var(--button-border-radius); /* Small pagination link */ --small-pagination-link-font-size: var(--small-button-font-size); --small-pagination-link-line-height: var(--small-button-line-height); --small-pagination-link-vertical-padding: var(--small-button-vertical-padding); --small-pagination-link-horizontal-padding: 0.2rem; --small-pagination-link-min-width: var(--small-square-button-width); /* Large pagination link */ --large-pagination-link-font-size: var(--large-button-font-size); --large-pagination-link-line-height: var(--large-button-line-height); --large-pagination-link-vertical-padding: var(--large-button-vertical-padding); --large-pagination-link-horizontal-padding: 0.4rem; --large-pagination-link-min-width: var(--large-square-button-width); /* Rounded pagination link */ --rounded-pagination-link-border-radius: var(--rounded-button-border-radius); /* Default pagination link */ --pagination-link-webkit-font-smoothing: var(--button-webkit-font-smoothing); --pagination-link-moz-osx-font-smoothing: var(--button-moz-osx-font-smoothing); --pagination-link-bg-clip: var(--button-bg-clip); --pagination-link-text-decoration: var(--button-text-decoration); --pagination-link-text-color: var(--button-text-color); --pagination-link-bg-color: var(--button-bg-color); --pagination-link-bg-image: var(--button-bg-image); --pagination-link-border-color: var(--button-border-color); --pagination-link-box-shadow: var(--button-box-shadow); --pagination-link-text-decoration-hover: var(--button-text-decoration-hover); --pagination-link-text-color-hover: var(--button-text-color-hover); --pagination-link-bg-color-hover: var(--button-bg-color-hover); --pagination-link-bg-image-hover: var(--button-bg-image-hover); --pagination-link-border-color-hover: var(--button-border-color-hover); --pagination-link-box-shadow-hover: var(--button-box-shadow-hover); --pagination-link-text-decoration-active: var(--button-text-decoration-active); --pagination-link-text-color-active: var(--button-text-color-active); --pagination-link-bg-color-active: var(--button-bg-color-active); --pagination-link-bg-image-active: var(--button-bg-image-active); --pagination-link-border-color-active: var(--button-border-color-active); --pagination-link-box-shadow-active: var(--button-box-shadow-active); /* Active pagination link */ --pagination-link-active-webkit-font-smoothing: var(--button-primary-webkit-font-smoothing); --pagination-link-active-moz-osx-font-smoothing: var(--button-primary-moz-osx-font-smoothing); --pagination-link-active-bg-clip: var(--button-primary-bg-clip); --pagination-link-active-text-decoration: var(--button-primary-text-decoration); --pagination-link-active-text-color: var(--button-primary-text-color); --pagination-link-active-bg-color: var(--button-primary-bg-color); --pagination-link-active-bg-image: var(--button-primary-bg-image); --pagination-link-active-border-color: var(--button-primary-border-color); --pagination-link-active-box-shadow: var(--button-primary-box-shadow); --pagination-link-active-text-decoration-hover: var(--button-primary-text-decoration-hover); --pagination-link-active-text-color-hover: var(--button-primary-text-color-hover); --pagination-link-active-bg-color-hover: var(--button-primary-bg-color-hover); --pagination-link-active-bg-image-hover: var(--button-primary-bg-image-hover); --pagination-link-active-border-color-hover: var(--button-primary-border-color-hover); --pagination-link-active-box-shadow-hover: var(--button-primary-box-shadow-hover); --pagination-link-active-text-decoration-active: var(--button-primary-text-decoration-active); --pagination-link-active-text-color-active: var(--button-primary-text-color-active); --pagination-link-active-bg-color-active: var(--button-primary-bg-color-active); --pagination-link-active-bg-image-active: var(--button-primary-bg-image-active); --pagination-link-active-border-color-active: var(--button-primary-border-color-active); --pagination-link-active-box-shadow-active: var(--button-primary-box-shadow-active); /* Disabled pagination link */ --pagination-link-disabled-webkit-font-smoothing: var(--button-disabled-webkit-font-smoothing); --pagination-link-disabled-moz-osx-font-smoothing: var(--button-disabled-moz-osx-font-smoothing); --pagination-link-disabled-bg-clip: var(--button-disabled-bg-clip); --pagination-link-disabled-text-decoration: var(--button-disabled-text-decoration); --pagination-link-disabled-text-color: var(--button-disabled-text-color); --pagination-link-disabled-bg-color: var(--button-disabled-bg-color); --pagination-link-disabled-bg-image: var(--button-disabled-bg-image); --pagination-link-disabled-border-color: var(--button-disabled-border-color); --pagination-link-disabled-box-shadow: var(--button-disabled-box-shadow); /* Pagination z-indices */ --pagination-link-z-index: auto; --pagination-link-z-index-hover: var(--pagination-link-z-index); --pagination-link-z-index-active: var(--pagination-link-z-index); --pagination-link-z-index-focus-visible: 2; --pagination-link-active-z-index: 1; --pagination-link-active-z-index-hover: var(--pagination-link-active-z-index); --pagination-link-active-z-index-active: var(--pagination-link-active-z-index); --pagination-link-active-z-index-focus-visible: var(--pagination-link-z-index-focus-visible); } /** * ---------------------------------------------------------------------------- * [ Breadcrumb - Variables ] * ---------------------------------------------------------------------------- */ :root { --breadcrumb-font-size: var(--base-font-size); --breadcrumb-line-height: var(--base-line-height); --breadcrumb-webkit-font-smoothing: var(--base-webkit-font-smoothing); --breadcrumb-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --breadcrumb-padding: 0; --breadcrumb-margin-top: var(--unordered-list-margin-top); --breadcrumb-margin-bottom: var(--breadcrumb-margin-top); --breadcrumb-bg-clip: border-box; --breadcrumb-border-style: var(--base-border-style); --breadcrumb-border-width: 0; --breadcrumb-border-radius: var(--base-border-radius); --breadcrumb-text-color: inherit; --breadcrumb-bg-color: transparent; --breadcrumb-bg-image: none; --breadcrumb-border-color: transparent; --breadcrumb-box-shadow: none; /* Breadcrumb link */ --breadcrumb-link-webkit-font-smoothing: var(--link-webkit-font-smoothing); --breadcrumb-link-moz-osx-font-smoothing: var(--link-moz-osx-font-smoothing); --breadcrumb-link-text-decoration: var(--link-text-decoration); --breadcrumb-link-text-color: var(--link-text-color); --breadcrumb-link-text-decoration-hover: var(--link-text-decoration-hover); --breadcrumb-link-text-color-hover: var(--link-text-color-hover); /* Active breadcrumb item */ --breadcrumb-item-active-webkit-font-smoothing: var(--breadcrumb-webkit-font-smoothing); --breadcrumb-item-active-moz-osx-font-smoothing: var(--breadcrumb-moz-osx-font-smoothing); --breadcrumb-item-active-text-decoration: none; --breadcrumb-item-active-text-color: inherit; /* Breadcrumb separator */ --breadcrumb-separator-content: "\002F" /*rtl:"\005C"*/; --breadcrumb-separator-margin-start: 1rem; --breadcrumb-separator-margin-end: calc(var(--breadcrumb-separator-margin-start) + 0.6rem); } /** * ---------------------------------------------------------------------------- * [ Tooltips - Variables ] * * Pseudo-borders (created using box-shadow) are used to get rid of the single * pixel rendering issue that is present in most browsers. * ---------------------------------------------------------------------------- */ :root { --tooltip-font-size: var(--small-font-size); --tooltip-line-height: var(--base-line-height); --tooltip-webkit-font-smoothing: var(--base-webkit-font-smoothing); --tooltip-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --tooltip-padding: 0.2rem 0.6rem; --tooltip-width: max-content; --tooltip-min-width: 10rem; --tooltip-max-width: 16rem; --tooltip-bg-clip: border-box; --tooltip-border-style: var(--base-border-style); --tooltip-border-width: var(--base-border-width); --tooltip-border-radius: var(--base-border-radius); --tooltip-offset-negative: -0.6rem; --tooltip-text-color: var(--base-text-color); --tooltip-bg-color: var(--base-content-bg-color); --tooltip-bg-image: none; --tooltip-border-color: transparent; --tooltip-box-shadow: 0 0 0 var(--tooltip-border-width) var(--border-color-dark), var(--shadow); } .dark-mode { --tooltip-border-color: hsla(var(--white-color-hsl), 0.05); } /** * ---------------------------------------------------------------------------- * [ Badges - Variables ] * * The {...}-hover variables are only used on link badges. * ---------------------------------------------------------------------------- */ :root { --badge-font-size: 0.85714285714em; --badge-line-height: var(--small-line-height); --badge-padding: 0.2rem 0.6rem; --badge-border-style: var(--base-border-style); --badge-border-width: var(--base-border-width); --badge-border-radius: var(--base-border-radius); /* Pill badge */ --pill-badge-border-radius: var(--rounded-pill-border-radius); /* Reset font size badge */ --badge-reset-font-size: var(--small-font-size); /* Default badge */ --badge-webkit-font-smoothing: auto; --badge-moz-osx-font-smoothing: auto; --badge-bg-clip: border-box; --badge-text-decoration: none; --badge-text-color: var(--base-text-color-soft); --badge-bg-color: var(--white-color); --badge-bg-image: none; --badge-border-color: var(--border-color-dark); --badge-box-shadow: none; --badge-text-decoration-hover: var(--badge-text-decoration); --badge-text-color-hover: var(--badge-text-color); --badge-bg-color-hover: var(--gray-color-very-light); --badge-bg-image-hover: none; --badge-border-color-hover: var(--badge-border-color); --badge-box-shadow-hover: var(--badge-box-shadow); /* Primary badge */ --badge-primary-webkit-font-smoothing: auto; --badge-primary-moz-osx-font-smoothing: auto; --badge-primary-bg-clip: var(--badge-bg-clip); --badge-primary-text-decoration: var(--badge-text-decoration); --badge-primary-text-color: var(--text-color-on-primary-color-bg); --badge-primary-bg-color: var(--primary-color); --badge-primary-bg-image: none; --badge-primary-border-color: transparent; --badge-primary-box-shadow: none; --badge-primary-text-decoration-hover: var(--badge-primary-text-decoration); --badge-primary-text-color-hover: var(--badge-primary-text-color); --badge-primary-bg-color-hover: hsl(var(--primary-color-hue), var(--primary-color-saturation), var(--primary-color-lightness-step-down-1)); --badge-primary-bg-image-hover: none; --badge-primary-border-color-hover: var(--badge-primary-border-color); --badge-primary-box-shadow-hover: var(--badge-primary-box-shadow); /* Secondary badge */ --badge-secondary-webkit-font-smoothing: auto; --badge-secondary-moz-osx-font-smoothing: auto; --badge-secondary-bg-clip: var(--badge-bg-clip); --badge-secondary-text-decoration: var(--badge-text-decoration); --badge-secondary-text-color: var(--text-color-on-secondary-color-bg); --badge-secondary-bg-color: var(--secondary-color); --badge-secondary-bg-image: none; --badge-secondary-border-color: transparent; --badge-secondary-box-shadow: none; --badge-secondary-text-decoration-hover: var(--badge-secondary-text-decoration); --badge-secondary-text-color-hover: var(--badge-secondary-text-color); --badge-secondary-bg-color-hover: hsl(var(--secondary-color-hue), var(--secondary-color-saturation), var(--secondary-color-lightness-step-down-1)); --badge-secondary-bg-image-hover: none; --badge-secondary-border-color-hover: var(--badge-secondary-border-color); --badge-secondary-box-shadow-hover: var(--badge-secondary-box-shadow); /* Success badge */ --badge-success-webkit-font-smoothing: auto; --badge-success-moz-osx-font-smoothing: auto; --badge-success-bg-clip: var(--badge-bg-clip); --badge-success-text-decoration: var(--badge-text-decoration); --badge-success-text-color: var(--text-color-on-success-color-bg); --badge-success-bg-color: var(--success-color); --badge-success-bg-image: none; --badge-success-border-color: transparent; --badge-success-box-shadow: none; --badge-success-text-decoration-hover: var(--badge-success-text-decoration); --badge-success-text-color-hover: var(--badge-success-text-color); --badge-success-bg-color-hover: hsl(var(--success-color-hue), var(--success-color-saturation), var(--success-color-lightness-step-down-1)); --badge-success-bg-image-hover: none; --badge-success-border-color-hover: var(--badge-success-border-color); --badge-success-box-shadow-hover: var(--badge-success-box-shadow); /* Warning badge */ --badge-warning-webkit-font-smoothing: auto; --badge-warning-moz-osx-font-smoothing: auto; --badge-warning-bg-clip: var(--badge-bg-clip); --badge-warning-text-decoration: var(--badge-text-decoration); --badge-warning-text-color: var(--text-color-on-warning-color-bg); --badge-warning-bg-color: var(--warning-color); --badge-warning-bg-image: none; --badge-warning-border-color: transparent; --badge-warning-box-shadow: none; --badge-warning-text-decoration-hover: var(--badge-warning-text-decoration); --badge-warning-text-color-hover: var(--badge-warning-text-color); --badge-warning-bg-color-hover: hsl(var(--warning-color-hue), var(--warning-color-saturation), var(--warning-color-lightness-step-down-1)); --badge-warning-bg-image-hover: none; --badge-warning-border-color-hover: var(--badge-warning-border-color); --badge-warning-box-shadow-hover: var(--badge-warning-box-shadow); /* Danger badge */ --badge-danger-webkit-font-smoothing: auto; --badge-danger-moz-osx-font-smoothing: auto; --badge-danger-bg-clip: var(--badge-bg-clip); --badge-danger-text-decoration: var(--badge-text-decoration); --badge-danger-text-color: var(--text-color-on-danger-color-bg); --badge-danger-bg-color: var(--danger-color); --badge-danger-bg-image: none; --badge-danger-border-color: transparent; --badge-danger-box-shadow: none; --badge-danger-text-decoration-hover: var(--badge-danger-text-decoration); --badge-danger-text-color-hover: var(--badge-danger-text-color); --badge-danger-bg-color-hover: hsl(var(--danger-color-hue), var(--danger-color-saturation), var(--danger-color-lightness-step-down-1)); --badge-danger-bg-image-hover: none; --badge-danger-border-color-hover: var(--badge-danger-border-color); --badge-danger-box-shadow-hover: var(--badge-danger-box-shadow); /** * Badge group * * The text decoration variables are only used on link badge groups. */ --badge-group-text-decoration: none; --badge-group-text-decoration-hover: var(--badge-group-text-decoration); /* Badge group z-indices */ --badge-group-badge-z-index: auto; --badge-group-badge-z-index-hover: var(--badge-group-badge-z-index); --badge-group-badge-z-index-focus-visible: 2; --badge-group-badge-contextual-z-index: 1; --badge-group-badge-contextual-z-index-hover: var(--badge-group-badge-contextual-z-index); --badge-group-badge-contextual-z-index-focus-visible: var(--badge-group-badge-z-index-focus-visible); } .dark-mode { /* Default badge */ --badge-bg-clip: padding-box; --badge-bg-color: var(--darkgray-color-very-dim); --badge-bg-color-hover: var(--darkgray-color-dim); /* Primary badge */ --badge-primary-border-color: var(--badge-border-color); /* Secondary badge */ --badge-secondary-border-color: var(--badge-border-color); /* Success badge */ --badge-success-border-color: var(--badge-border-color); /* Warning badge */ --badge-warning-border-color: var(--badge-border-color); /* Danger badge */ --badge-danger-border-color: var(--badge-border-color); } /** * ---------------------------------------------------------------------------- * [ Button group - Variables ] * ---------------------------------------------------------------------------- */ :root { /* Button toolbar */ --button-toolbar-input-group-min-width: 20rem; /* Button group z-indices */ --button-group-button-z-index: auto; --button-group-button-z-index-hover: var(--button-group-button-z-index); --button-group-button-z-index-active: var(--button-group-button-z-index); --button-group-button-z-index-focus-visible: 2; --button-group-button-contextual-z-index: 1; --button-group-button-contextual-z-index-hover: var(--button-group-button-contextual-z-index); --button-group-button-contextual-z-index-active: var(--button-group-button-contextual-z-index); --button-group-button-contextual-z-index-focus-visible: var(--button-group-button-z-index-focus-visible); } @media (max-width: 576px) { :root { --button-toolbar-input-group-min-width: 18rem; } } /** * ---------------------------------------------------------------------------- * [ List group - Variables ] * * The {...}-hover and {...}-active variables are only used on the action list * group items. * ---------------------------------------------------------------------------- */ :root { --list-group-padding-start: 0; --list-group-margin-top: 1.6rem; --list-group-margin-bottom: var(--list-group-margin-top); /* List group item */ --list-group-item-line-height: var(--base-line-height); --list-group-item-padding: 1rem 2rem; --list-group-item-border-style: var(--base-border-style); --list-group-item-border-width: var(--base-border-width); --list-group-item-border-radius: var(--base-border-radius); /* Default list group item */ --list-group-item-webkit-font-smoothing: var(--base-webkit-font-smoothing); --list-group-item-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --list-group-item-bg-clip: border-box; --list-group-item-text-decoration: none; --list-group-item-text-color: inherit; --list-group-item-bg-color: transparent; --list-group-item-bg-image: none; --list-group-item-border-color: var(--border-color); --list-group-item-box-shadow: none; --list-group-item-text-decoration-hover: var(--list-group-item-text-decoration); --list-group-item-text-color-hover: var(--list-group-item-text-color); --list-group-item-bg-color-hover: hsla(var(--black-color-hsl), 0.03); --list-group-item-bg-image-hover: none; --list-group-item-border-color-hover: var(--list-group-item-border-color); --list-group-item-box-shadow-hover: var(--list-group-item-box-shadow); --list-group-item-text-decoration-active: var(--list-group-item-text-decoration); --list-group-item-text-color-active: var(--list-group-item-text-color); --list-group-item-bg-color-active: hsla(var(--black-color-hsl), 0.06); --list-group-item-bg-image-active: none; --list-group-item-border-color-active: var(--list-group-item-border-color); --list-group-item-box-shadow-active: var(--list-group-item-box-shadow); /* Active list group item */ --list-group-item-active-webkit-font-smoothing: auto; --list-group-item-active-moz-osx-font-smoothing: auto; --list-group-item-active-bg-clip: border-box; --list-group-item-active-text-decoration: var(--list-group-item-text-decoration); --list-group-item-active-text-color: var(--text-color-on-primary-color-bg); --list-group-item-active-bg-color: var(--primary-color); --list-group-item-active-bg-image: none; --list-group-item-active-border-color: transparent; --list-group-item-active-box-shadow: none; --list-group-item-active-text-decoration-hover: var(--list-group-item-active-text-decoration); --list-group-item-active-text-color-hover: var(--list-group-item-active-text-color); --list-group-item-active-bg-color-hover: hsl(var(--primary-color-hue), var(--primary-color-saturation), var(--primary-color-lightness-step-down-1)); --list-group-item-active-bg-image-hover: none; --list-group-item-active-border-color-hover: var(--list-group-item-active-border-color); --list-group-item-active-box-shadow-hover: var(--list-group-item-active-box-shadow); --list-group-item-active-text-decoration-active: var(--list-group-item-active-text-decoration); --list-group-item-active-text-color-active: var(--list-group-item-active-text-color); --list-group-item-active-bg-color-active: hsl(var(--primary-color-hue), var(--primary-color-saturation), var(--primary-color-lightness-step-down-2)); --list-group-item-active-bg-image-active: none; --list-group-item-active-border-color-active: var(--list-group-item-active-border-color); --list-group-item-active-box-shadow-active: var(--list-group-item-active-box-shadow); /* Primary list group item */ --list-group-item-primary-webkit-font-smoothing: var(--list-group-item-webkit-font-smoothing); --list-group-item-primary-moz-osx-font-smoothing: var(--list-group-item-moz-osx-font-smoothing); --list-group-item-primary-bg-clip: var(--list-group-item-bg-clip); --list-group-item-primary-text-decoration: var(--list-group-item-text-decoration); --list-group-item-primary-text-color: var(--list-group-item-text-color); --list-group-item-primary-bg-color: hsla(var(--primary-color-hsl), 0.2); --list-group-item-primary-bg-image: none; --list-group-item-primary-border-color: var(--list-group-item-border-color); --list-group-item-primary-box-shadow: var(--list-group-item-box-shadow); --list-group-item-primary-text-decoration-hover: var(--list-group-item-primary-text-decoration); --list-group-item-primary-text-color-hover: var(--list-group-item-primary-text-color); --list-group-item-primary-bg-color-hover: hsla(var(--primary-color-hsl), 0.275); --list-group-item-primary-bg-image-hover: none; --list-group-item-primary-border-color-hover: var(--list-group-item-primary-border-color); --list-group-item-primary-box-shadow-hover: var(--list-group-item-primary-box-shadow); --list-group-item-primary-text-decoration-active: var(--list-group-item-primary-text-decoration); --list-group-item-primary-text-color-active: var(--list-group-item-primary-text-color); --list-group-item-primary-bg-color-active: hsla(var(--primary-color-hsl), 0.35); --list-group-item-primary-bg-image-active: none; --list-group-item-primary-border-color-active: var(--list-group-item-primary-border-color); --list-group-item-primary-box-shadow-active: var(--list-group-item-primary-box-shadow); /* Secondary list group item */ --list-group-item-secondary-webkit-font-smoothing: var(--list-group-item-webkit-font-smoothing); --list-group-item-secondary-moz-osx-font-smoothing: var(--list-group-item-moz-osx-font-smoothing); --list-group-item-secondary-bg-clip: var(--list-group-item-bg-clip); --list-group-item-secondary-text-decoration: var(--list-group-item-text-decoration); --list-group-item-secondary-text-color: var(--list-group-item-text-color); --list-group-item-secondary-bg-color: hsla(var(--secondary-color-hsl), 0.2); --list-group-item-secondary-bg-image: none; --list-group-item-secondary-border-color: var(--list-group-item-border-color); --list-group-item-secondary-box-shadow: var(--list-group-item-box-shadow); --list-group-item-secondary-text-decoration-hover: var(--list-group-item-secondary-text-decoration); --list-group-item-secondary-text-color-hover: var(--list-group-item-secondary-text-color); --list-group-item-secondary-bg-color-hover: hsla(var(--secondary-color-hsl), 0.275); --list-group-item-secondary-bg-image-hover: none; --list-group-item-secondary-border-color-hover: var(--list-group-item-secondary-border-color); --list-group-item-secondary-box-shadow-hover: var(--list-group-item-secondary-box-shadow); --list-group-item-secondary-text-decoration-active: var(--list-group-item-secondary-text-decoration); --list-group-item-secondary-text-color-active: var(--list-group-item-secondary-text-color); --list-group-item-secondary-bg-color-active: hsla(var(--secondary-color-hsl), 0.35); --list-group-item-secondary-bg-image-active: none; --list-group-item-secondary-border-color-active: var(--list-group-item-secondary-border-color); --list-group-item-secondary-box-shadow-active: var(--list-group-item-secondary-box-shadow); /* Success list group item */ --list-group-item-success-webkit-font-smoothing: var(--list-group-item-webkit-font-smoothing); --list-group-item-success-moz-osx-font-smoothing: var(--list-group-item-moz-osx-font-smoothing); --list-group-item-success-bg-clip: var(--list-group-item-bg-clip); --list-group-item-success-text-decoration: var(--list-group-item-text-decoration); --list-group-item-success-text-color: var(--list-group-item-text-color); --list-group-item-success-bg-color: hsla(var(--success-color-hsl), 0.2); --list-group-item-success-bg-image: none; --list-group-item-success-border-color: var(--list-group-item-border-color); --list-group-item-success-box-shadow: var(--list-group-item-box-shadow); --list-group-item-success-text-decoration-hover: var(--list-group-item-success-text-decoration); --list-group-item-success-text-color-hover: var(--list-group-item-success-text-color); --list-group-item-success-bg-color-hover: hsla(var(--success-color-hsl), 0.275); --list-group-item-success-bg-image-hover: none; --list-group-item-success-border-color-hover: var(--list-group-item-success-border-color); --list-group-item-success-box-shadow-hover: var(--list-group-item-success-box-shadow); --list-group-item-success-text-decoration-active: var(--list-group-item-success-text-decoration); --list-group-item-success-text-color-active: var(--list-group-item-success-text-color); --list-group-item-success-bg-color-active: hsla(var(--success-color-hsl), 0.35); --list-group-item-success-bg-image-active: none; --list-group-item-success-border-color-active: var(--list-group-item-success-border-color); --list-group-item-success-box-shadow-active: var(--list-group-item-success-box-shadow); /* Warning list group item */ --list-group-item-warning-webkit-font-smoothing: var(--list-group-item-webkit-font-smoothing); --list-group-item-warning-moz-osx-font-smoothing: var(--list-group-item-moz-osx-font-smoothing); --list-group-item-warning-bg-clip: var(--list-group-item-bg-clip); --list-group-item-warning-text-decoration: var(--list-group-item-text-decoration); --list-group-item-warning-text-color: var(--list-group-item-text-color); --list-group-item-warning-bg-color: hsla(var(--warning-color-hsl), 0.2); --list-group-item-warning-bg-image: none; --list-group-item-warning-border-color: var(--list-group-item-border-color); --list-group-item-warning-box-shadow: var(--list-group-item-box-shadow); --list-group-item-warning-text-decoration-hover: var(--list-group-item-warning-text-decoration); --list-group-item-warning-text-color-hover: var(--list-group-item-warning-text-color); --list-group-item-warning-bg-color-hover: hsla(var(--warning-color-hsl), 0.275); --list-group-item-warning-bg-image-hover: none; --list-group-item-warning-border-color-hover: var(--list-group-item-warning-border-color); --list-group-item-warning-box-shadow-hover: var(--list-group-item-warning-box-shadow); --list-group-item-warning-text-decoration-active: var(--list-group-item-warning-text-decoration); --list-group-item-warning-text-color-active: var(--list-group-item-warning-text-color); --list-group-item-warning-bg-color-active: hsla(var(--warning-color-hsl), 0.35); --list-group-item-warning-bg-image-active: none; --list-group-item-warning-border-color-active: var(--list-group-item-warning-border-color); --list-group-item-warning-box-shadow-active: var(--list-group-item-warning-box-shadow); /* Danger list group item */ --list-group-item-danger-webkit-font-smoothing: var(--list-group-item-webkit-font-smoothing); --list-group-item-danger-moz-osx-font-smoothing: var(--list-group-item-moz-osx-font-smoothing); --list-group-item-danger-bg-clip: var(--list-group-item-bg-clip); --list-group-item-danger-text-decoration: var(--list-group-item-text-decoration); --list-group-item-danger-text-color: var(--list-group-item-text-color); --list-group-item-danger-bg-color: hsla(var(--danger-color-hsl), 0.2); --list-group-item-danger-bg-image: none; --list-group-item-danger-border-color: var(--list-group-item-border-color); --list-group-item-danger-box-shadow: var(--list-group-item-box-shadow); --list-group-item-danger-text-decoration-hover: var(--list-group-item-danger-text-decoration); --list-group-item-danger-text-color-hover: var(--list-group-item-danger-text-color); --list-group-item-danger-bg-color-hover: hsla(var(--danger-color-hsl), 0.275); --list-group-item-danger-bg-image-hover: none; --list-group-item-danger-border-color-hover: var(--list-group-item-danger-border-color); --list-group-item-danger-box-shadow-hover: var(--list-group-item-danger-box-shadow); --list-group-item-danger-text-decoration-active: var(--list-group-item-danger-text-decoration); --list-group-item-danger-text-color-active: var(--list-group-item-danger-text-color); --list-group-item-danger-bg-color-active: hsla(var(--danger-color-hsl), 0.35); --list-group-item-danger-bg-image-active: none; --list-group-item-danger-border-color-active: var(--list-group-item-danger-border-color); --list-group-item-danger-box-shadow-active: var(--list-group-item-danger-box-shadow); /* Disabled list group item */ --list-group-item-disabled-webkit-font-smoothing: var(--list-group-item-webkit-font-smoothing); --list-group-item-disabled-moz-osx-font-smoothing: var(--list-group-item-moz-osx-font-smoothing); --list-group-item-disabled-bg-clip: var(--list-group-item-bg-clip); --list-group-item-disabled-text-decoration: var(--list-group-item-text-decoration); --list-group-item-disabled-text-color: var(--very-muted-text-color); --list-group-item-disabled-bg-color: var(--list-group-item-bg-color); --list-group-item-disabled-bg-image: var(--list-group-item-bg-image); --list-group-item-disabled-border-color: var(--list-group-item-border-color); --list-group-item-disabled-box-shadow: var(--list-group-item-box-shadow); /* List group item z-indices */ --list-group-item-z-index: auto; --list-group-item-z-index-hover: var(--list-group-item-z-index); --list-group-item-z-index-active: var(--list-group-item-z-index); --list-group-item-z-index-focus-visible: 2; --list-group-item-active-z-index: 1; --list-group-item-active-z-index-hover: var(--list-group-item-active-z-index); --list-group-item-active-z-index-active: var(--list-group-item-active-z-index); --list-group-item-active-z-index-focus-visible: var(--list-group-item-z-index-focus-visible); --list-group-item-contextual-z-index: var(--list-group-item-z-index); --list-group-item-contextual-z-index-hover: var(--list-group-item-z-index-hover); --list-group-item-contextual-z-index-active: var(--list-group-item-z-index-active); --list-group-item-contextual-z-index-focus-visible: var(--list-group-item-z-index-focus-visible); } .dark-mode { /* Default list group item */ --list-group-item-bg-color-hover: hsla(var(--black-color-hsl), 0.15); --list-group-item-bg-color-active: hsla(var(--black-color-hsl), 0.25); /* Primary list group item */ --list-group-item-primary-text-color: var(--primary-color-light); --list-group-item-primary-bg-color: hsla(var(--primary-color-hsl), 0.1); --list-group-item-primary-bg-color-hover: hsla(var(--primary-color-hsl), 0.15); --list-group-item-primary-bg-color-active: hsla(var(--primary-color-hsl), 0.2); /* Secondary list group item */ --list-group-item-secondary-text-color: var(--secondary-color-light); --list-group-item-secondary-bg-color: hsla(var(--secondary-color-hsl), 0.1); --list-group-item-secondary-bg-color-hover: hsla(var(--secondary-color-hsl), 0.15); --list-group-item-secondary-bg-color-active: hsla(var(--secondary-color-hsl), 0.2); /* Success list group item */ --list-group-item-success-text-color: var(--success-color-light); --list-group-item-success-bg-color: hsla(var(--success-color-hsl), 0.1); --list-group-item-success-bg-color-hover: hsla(var(--success-color-hsl), 0.15); --list-group-item-success-bg-color-active: hsla(var(--success-color-hsl), 0.2); /* Warning list group item */ --list-group-item-warning-text-color: var(--warning-color-light); --list-group-item-warning-bg-color: hsla(var(--warning-color-hsl), 0.1); --list-group-item-warning-bg-color-hover: hsla(var(--warning-color-hsl), 0.15); --list-group-item-warning-bg-color-active: hsla(var(--warning-color-hsl), 0.2); /* Danger list group item */ --list-group-item-danger-text-color: var(--danger-color-light); --list-group-item-danger-bg-color: hsla(var(--danger-color-hsl), 0.1); --list-group-item-danger-bg-color-hover: hsla(var(--danger-color-hsl), 0.15); --list-group-item-danger-bg-color-active: hsla(var(--danger-color-hsl), 0.2); } /** * ---------------------------------------------------------------------------- * [ Collapse - Variables ] * * The background image variables for the collapse header are used to set the * arrow. * ---------------------------------------------------------------------------- */ :root { /* Collapse header */ --collapse-header-font-size: var(--base-font-size); --collapse-header-line-height: var(--base-line-height); --collapse-header-font-weight: var(--base-font-weight); --collapse-header-webkit-font-smoothing: var(--base-webkit-font-smoothing); --collapse-header-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --collapse-header-vertical-padding: 1.2rem; --collapse-header-horizontal-padding: 2rem; --collapse-header-bg-clip: border-box; --collapse-header-border-style: var(--base-border-style); --collapse-header-border-width: var(--base-border-width); --collapse-header-border-radius: var(--base-border-radius); --collapse-header-text-color: inherit; --collapse-header-bg-color: transparent; --collapse-header-border-color: var(--border-color); --collapse-header-box-shadow: none; --collapse-header-border-color-focus: var(--collapse-header-border-color); --collapse-header-box-shadow-focus: var(--collapse-header-box-shadow); --collapse-header-outline-focus: var(--collapse-header-box-shadow); /* Collapse header arrow set using background image */ --collapse-header-padding-start-with-bg-image: calc(var(--collapse-header-horizontal-padding) + 2.6rem); --collapse-header-bg-image: var(--angle-down-svg-darkgray); --collapse-header-bg-size: 1.2rem; --collapse-header-bg-repeat: no-repeat; --collapse-header-bg-position: left var(--collapse-header-horizontal-padding) top 50% /*rtl:right var(--collapse-header-horizontal-padding) top 50%*/; --open-collapse-header-padding-start-with-bg-image: var(--collapse-header-padding-start-with-bg-image); --open-collapse-header-bg-image: var(--angle-up-svg-darkgray); --open-collapse-header-bg-size: var(--collapse-header-bg-size); --open-collapse-header-bg-repeat: var(--collapse-header-bg-repeat); --open-collapse-header-bg-position: var(--collapse-header-bg-position); /* Collapse header focus effect (::after) */ --collapse-header-focus-effect-top: 0.2rem; --collapse-header-focus-effect-start: var(--collapse-header-focus-effect-top); --collapse-header-focus-effect-width: calc(100% - (2 * var(--collapse-header-focus-effect-start))); --collapse-header-focus-effect-height: calc(100% - (2 * var(--collapse-header-focus-effect-top))); --collapse-header-focus-effect-border-radius: var(--collapse-header-border-radius); --collapse-header-focus-effect-box-shadow: inset 0 0 0 0.2rem hsla(var(--primary-color-hsl), 0.6); /* Collapse content */ --collapse-content-webkit-font-smoothing: var(--base-webkit-font-smoothing); --collapse-content-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --collapse-content-padding: var(--collapse-header-horizontal-padding); --collapse-content-bg-clip: border-box; --collapse-content-border-style: var(--collapse-header-border-style); --collapse-content-border-width: 0 var(--collapse-header-border-width) var(--collapse-header-border-width) var(--collapse-header-border-width); --collapse-content-border-radius: var(--collapse-header-border-radius); --collapse-content-text-color: inherit; --collapse-content-bg-color: transparent; --collapse-content-bg-image: none; --collapse-content-border-color: var(--collapse-header-border-color); --collapse-content-box-shadow: none; } /** * ---------------------------------------------------------------------------- * [ Tabs - Variables ] * ---------------------------------------------------------------------------- */ :root { --tabs-padding: 0; --tabs-margin-top: 0; --tabs-margin-bottom: var(--unordered-list-margin-bottom); --tabs-border-style: var(--base-border-style); --tabs-border-width: var(--base-border-width); --tabs-border-color: var(--border-color); /* Tab item */ --tab-item-horizontal-margin: 2rem; /* Tab link */ --tab-link-font-size: var(--base-font-size); --tab-link-line-height: var(--base-line-height); --tab-link-font-weight: var(--base-font-weight); --tab-link-padding: 0.8rem 0; --tab-link-border-style: var(--base-border-style); --tab-link-border-width: 0 0 var(--border-4-border-width) 0; --tab-link-border-radius: 0; /* Default tab link */ --tab-link-webkit-font-smoothing: var(--base-webkit-font-smoothing); --tab-link-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --tab-link-bg-clip: border-box; --tab-link-text-decoration: none; --tab-link-text-color: var(--base-text-color-soft); --tab-link-bg-color: transparent; --tab-link-bg-image: none; --tab-link-border-color: transparent; --tab-link-box-shadow: none; --tab-link-text-decoration-hover: var(--tab-link-text-decoration); --tab-link-text-color-hover: var(--base-text-color); --tab-link-bg-color-hover: var(--tab-link-bg-color); --tab-link-bg-image-hover: var(--tab-link-bg-image); --tab-link-border-color-hover: var(--tab-link-border-color); --tab-link-box-shadow-hover: var(--tab-link-box-shadow); /* Active tab link */ --tab-link-active-webkit-font-smoothing: var(--base-webkit-font-smoothing); --tab-link-active-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --tab-link-active-bg-clip: border-box; --tab-link-active-text-decoration: var(--tab-link-text-decoration); --tab-link-active-text-color: var(--base-text-color); --tab-link-active-bg-color: var(--tab-link-bg-color); --tab-link-active-bg-image: var(--tab-link-bg-image); --tab-link-active-border-color: var(--primary-color); --tab-link-active-box-shadow: var(--tab-link-box-shadow); --tab-link-active-text-decoration-hover: var(--tab-link-active-text-decoration); --tab-link-active-text-color-hover: var(--tab-link-active-text-color); --tab-link-active-bg-color-hover: var(--tab-link-active-bg-color); --tab-link-active-bg-image-hover: var(--tab-link-active-bg-image); --tab-link-active-border-color-hover: var(--tab-link-active-border-color); --tab-link-active-box-shadow-hover: var(--tab-link-active-box-shadow); /* Disabled tab link */ --tab-link-disabled-webkit-font-smoothing: var(--base-webkit-font-smoothing); --tab-link-disabled-moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); --tab-link-disabled-bg-clip: var(--tab-link-bg-clip); --tab-link-disabled-text-decoration: var(--tab-link-text-decoration); --tab-link-disabled-text-color: var(--very-muted-text-color); --tab-link-disabled-bg-color: var(--tab-link-bg-color); --tab-link-disabled-bg-image: var(--tab-link-bg-image); --tab-link-disabled-border-color: var(--tab-link-border-color); --tab-link-disabled-box-shadow: var(--tab-link-box-shadow); } /** * ---------------------------------------------------------------------------- * [ Progress - Variables ] * ---------------------------------------------------------------------------- */ :root { --progress-height: 0.8rem; --progress-labelled-height: 2.4rem; --progress-bg-clip: border-box; --progress-border-style: var(--base-border-style); --progress-border-width: 0; --progress-border-radius: var(--rounded-pill-border-radius); --progress-bg-color: var(--gray-color-light); --progress-bg-image: none; --progress-border-color: transparent; --progress-box-shadow: inset 0 0 0 var(--base-border-width) hsla(var(--black-color-hsl), 0.05); /** * Progress bar * * No border for progress bars because having one causes issues when the * progress value is at 0. Therefore, there are no border variables * (expect for the radius). * * For the above reason, there are also no variables for setting the * background clipping. * * The font related and text color variables are meant to be used inside * labelled progress bars. */ --progress-bar-font-size: var(--base-font-size); --progress-bar-line-height: 1; --progress-bar-border-radius: 0; /* Default progress bar */ --progress-bar-webkit-font-smoothing: auto; --progress-bar-moz-osx-font-smoothing: auto; --progress-bar-text-color: var(--text-color-on-primary-color-bg); --progress-bar-bg-color: var(--primary-color); --progress-bar-bg-image: none; --progress-bar-box-shadow: none; --progress-bar-animated-highlight-border-radius: var(--progress-border-radius); --progress-bar-animated-highlight-direction: to right /*rtl:to left*/; --progress-bar-animated-highlight-bg: linear-gradient(var(--progress-bar-animated-highlight-direction), transparent, var(--primary-color-very-light)); /* Primary progress bar (same as default) */ --progress-bar-primary-webkit-font-smoothing: var(--progress-bar-webkit-font-smoothing); --progress-bar-primary-moz-osx-font-smoothing: var(--progress-bar-moz-osx-font-smoothing); --progress-bar-primary-text-color: var(--progress-bar-text-color); --progress-bar-primary-bg-color: var(--progress-bar-bg-color); --progress-bar-primary-bg-image: var(--progress-bar-bg-image); --progress-bar-primary-box-shadow: var(--progress-bar-box-shadow); --progress-bar-primary-animated-highlight-bg: var(--progress-bar-animated-highlight-bg); /* Secondary progress bar */ --progress-bar-secondary-webkit-font-smoothing: auto; --progress-bar-secondary-moz-osx-font-smoothing: auto; --progress-bar-secondary-text-color: var(--text-color-on-secondary-color-bg); --progress-bar-secondary-bg-color: var(--secondary-color); --progress-bar-secondary-bg-image: none; --progress-bar-secondary-box-shadow: none; --progress-bar-secondary-animated-highlight-bg: linear-gradient(var(--progress-bar-animated-highlight-direction), transparent, var(--secondary-color-very-light)); /* Success progress bar */ --progress-bar-success-webkit-font-smoothing: auto; --progress-bar-success-moz-osx-font-smoothing: auto; --progress-bar-success-text-color: var(--text-color-on-success-color-bg); --progress-bar-success-bg-color: var(--success-color); --progress-bar-success-bg-image: none; --progress-bar-success-box-shadow: none; --progress-bar-success-animated-highlight-bg: linear-gradient(var(--progress-bar-animated-highlight-direction), transparent, var(--success-color-very-light)); /* Warning progress bar */ --progress-bar-warning-webkit-font-smoothing: auto; --progress-bar-warning-moz-osx-font-smoothing: auto; --progress-bar-warning-text-color: var(--text-color-on-warning-color-bg); --progress-bar-warning-bg-color: var(--warning-color); --progress-bar-warning-bg-image: none; --progress-bar-warning-box-shadow: none; --progress-bar-warning-animated-highlight-bg: linear-gradient(var(--progress-bar-animated-highlight-direction), transparent, var(--warning-color-very-light)); /* Danger progress bar */ --progress-bar-danger-webkit-font-smoothing: auto; --progress-bar-danger-moz-osx-font-smoothing: auto; --progress-bar-danger-text-color: var(--text-color-on-danger-color-bg); --progress-bar-danger-bg-color: var(--danger-color); --progress-bar-danger-bg-image: none; --progress-bar-danger-box-shadow: none; --progress-bar-danger-animated-highlight-bg: linear-gradient(var(--progress-bar-animated-highlight-direction), transparent, var(--danger-color-very-light)); /* Progress group */ --progress-group-item-margin: 0.6rem; } .dark-mode { --progress-border-width: var(--base-border-width); --progress-bg-clip: padding-box; --progress-bg-color: var(--darkgray-color-very-dim); --progress-border-color: var(--border-color-dark); --progress-box-shadow: none; } /** * ---------------------------------------------------------------------------- * [ Spinners - Variables ] * ---------------------------------------------------------------------------- */ :root { /* Border spinner */ --border-spinner-width-height: 2.4rem; --border-spinner-vertical-align: -0.125em; --border-spinner-border-style: var(--base-border-style); --border-spinner-border-width: 0.2rem; --border-spinner-border-radius: 50%; --border-spinner-border-color: currentColor transparent currentColor currentColor; --small-border-spinner-width-height: var(--base-font-size); --small-border-spinner-border-width: var(--border-spinner-border-width); /* Grow spinner */ --grow-spinner-width-height: var(--border-spinner-width-height); --grow-spinner-vertical-align: var(--border-spinner-vertical-align); --grow-spinner-border-radius: var(--border-spinner-border-radius); --grow-spinner-bg-color: currentColor; --small-grow-spinner-width-height: var(--small-border-spinner-width-height); } /** * ---------------------------------------------------------------------------- * [ Placeholder - Variables ] * ---------------------------------------------------------------------------- */ :root { --placeholder-min-height: 2rem; --placeholder-opacity: 0.5; --placeholder-bg-color: currentColor; --placeholder-bg-image: none; } /* END VARIABLES */ /** * ---------------------------------------------------------------------------- * [ Normalize CSS ] * * normalize.css | MIT License | github.com/necolas/normalize.css * * Normalize.css makes browsers render all elements more consistently and in * line with modern standards. It precisely targets only the styles that need * normalizing. * * 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: 0; 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; } /** * ---------------------------------------------------------------------------- * [ Base styles ] * ---------------------------------------------------------------------------- */ /* Color scheme */ html { color-scheme: light; } .dark-mode { color-scheme: dark; } /* Box sizing */ html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *, *::before, *::after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; } /* HTML font size and scaling */ html { font-size: var(--html-font-size); -webkit-text-size-adjust: none; } @media (min-width: 1600px) { .scale-up-mode { font-size: var(--html-font-size-1600); } } @media (min-width: 1920px) { .scale-up-mode { font-size: var(--html-font-size-1920); } } @media (min-width: 2560px) { .scale-up-mode { font-size: var(--html-font-size-2560); } } @media (min-width: 3000px) { .scale-up-mode { font-size: var(--html-font-size-3000); } } @media (min-width: 4000px) { .scale-up-mode { font-size: var(--html-font-size-4000); } } @media (min-width: 5120px) { .scale-up-mode { font-size: var(--html-font-size-5120); } } /* DOM body */ body { background-color: var(--base-body-bg-color); background-image: var(--base-body-bg-image); color: var(--base-text-color); font-family: var(--base-font-family); font-size: var(--base-font-size); line-height: var(--base-line-height); font-weight: var(--base-font-weight); -webkit-font-smoothing: var(--base-webkit-font-smoothing); -moz-osx-font-smoothing: var(--base-moz-osx-font-smoothing); } /* Horizontal rule */ hr { height: var(--horizontal-rule-height); color: var(--horizontal-rule-color); background-color: var(--horizontal-rule-color); border: 0; } /* Figure */ figure { margin-top: var(--figure-margin-top); margin-bottom: var(--figure-margin-bottom); margin-left: var(--figure-margin-start); margin-right: var(--figure-margin-end); } /** * ---------------------------------------------------------------------------- * [ Typography ] * ---------------------------------------------------------------------------- */ /* Headings */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--heading-font-family); font-weight: var(--heading-font-weight); -webkit-font-smoothing: var(--heading-webkit-font-smoothing); -moz-osx-font-smoothing: var(--heading-moz-osx-font-smoothing); margin-top: var(--heading-margin-top); margin-bottom: var(--heading-margin-bottom); } h1, .h1 { font-size: var(--heading-1-font-size); line-height: var(--heading-1-line-height); } h2, .h2 { font-size: var(--heading-2-font-size); line-height: var(--heading-2-line-height); } h3, .h3 { font-size: var(--heading-3-font-size); line-height: var(--heading-3-line-height); } h4, .h4 { font-size: var(--heading-4-font-size); line-height: var(--heading-4-line-height); } h5, .h5 { font-size: var(--heading-5-font-size); line-height: var(--heading-5-line-height); } h6, .h6 { font-size: var(--heading-6-font-size); line-height: var(--heading-6-line-height); } /* Displays */ .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { font-family: var(--display-font-family); font-weight: var(--display-font-weight); -webkit-font-smoothing: var(--display-webkit-font-smoothing); -moz-osx-font-smoothing: var(--display-moz-osx-font-smoothing); margin-top: var(--display-margin-top); margin-bottom: var(--display-margin-bottom); } .display-1 { font-size: var(--display-1-font-size); line-height: var(--display-1-line-height); } .display-2 { font-size: var(--display-2-font-size); line-height: var(--display-2-line-height); } .display-3 { font-size: var(--display-3-font-size); line-height: var(--display-3-line-height); } .display-4 { font-size: var(--display-4-font-size); line-height: var(--display-4-line-height); } .display-5 { font-size: var(--display-5-font-size); line-height: var(--display-5-line-height); } .display-6 { font-size: var(--display-6-font-size); line-height: var(--display-6-line-height); } /* Mark */ mark { -webkit-font-smoothing: var(--mark-webkit-font-smoothing); -moz-osx-font-smoothing: var(--mark-moz-osx-font-smoothing); padding: var(--mark-padding); margin: var(--mark-margin); background-clip: var(--mark-bg-clip); color: var(--mark-text-color); background-color: var(--mark-bg-color); background-image: var(--mark-bg-image); border: var(--mark-border-style); border-width: var(--mark-border-width); border-color: var(--mark-border-color); border-radius: var(--mark-border-radius); box-shadow: var(--mark-box-shadow); } /* Blockquote */ .blockquote { font-family: var(--blockquote-font-family); font-size: var(--blockquote-font-size); line-height: var(--blockquote-line-height); font-weight: var(--blockquote-font-weight); -webkit-font-smoothing: var(--blockquote-webkit-font-smoothing); -moz-osx-font-smoothing: var(--blockquote-moz-osx-font-smoothing); padding: var(--blockquote-padding); margin: var(--blockquote-margin); background-clip: var(--blockquote-bg-clip); color: var(--blockquote-text-color); background-color: var(--blockquote-bg-color); background-image: var(--blockquote-bg-image); border: var(--blockquote-border-style); border-width: var(--blockquote-border-width); border-color: var(--blockquote-border-color); border-radius: var(--blockquote-border-radius); box-shadow: var(--blockquote-box-shadow); } .blockquote > :first-child { margin-top: 0; } .blockquote > :last-child { margin-bottom: 0; } /* Blockquote footer */ .blockquote-footer::before { content: var(--blockquote-footer-before-content); } .blockquote-footer { font-family: var(--blockquote-footer-font-family); font-size: var(--blockquote-footer-font-size); line-height: var(--blockquote-footer-line-height); font-weight: var(--blockquote-footer-font-weight); -webkit-font-smoothing: var(--blockquote-footer-webkit-font-smoothing); -moz-osx-font-smoothing: var(--blockquote-footer-moz-osx-font-smoothing); padding: var(--blockquote-footer-padding); margin: var(--blockquote-footer-margin); background-clip: var(--blockquote-footer-bg-clip); color: var(--blockquote-footer-text-color); background-color: var(--blockquote-footer-bg-color); background-image: var(--blockquote-footer-bg-image); border: var(--blockquote-footer-border-style); border-width: var(--blockquote-footer-border-width); border-color: var(--blockquote-footer-border-color); border-radius: var(--blockquote-footer-border-radius); box-shadow: var(--blockquote-footer-box-shadow); } /** * ---------------------------------------------------------------------------- * [ Scrollbar ] * ---------------------------------------------------------------------------- */ /* Webkit based browsers (Chrome, Safari, Edge) */ @media (min-width: 769px) { ::-webkit-scrollbar { background-clip: var(--webkit-scrollbar-bg-clip); background-color: var(--webkit-scrollbar-bg-color); background-image: var(--webkit-scrollbar-bg-image); border: var(--webkit-scrollbar-border-style); border-width: var(--webkit-scrollbar-border-width); border-color: var(--webkit-scrollbar-border-color); } ::-webkit-scrollbar:vertical { border-top: 0; border-bottom: 0; border-top-right-radius: inherit; border-bottom-right-radius: inherit; } ::-webkit-scrollbar:horizontal { border-left: 0; border-right: 0; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } ::-webkit-scrollbar-thumb { background-clip: var(--webkit-scrollbar-thumb-bg-clip); background-color: var(--webkit-scrollbar-thumb-bg-color); background-image: var(--webkit-scrollbar-thumb-bg-image); border: var(--webkit-scrollbar-thumb-border-style); border-width: var(--webkit-scrollbar-thumb-border-width); border-color: var(--webkit-scrollbar-thumb-border-color); border-radius: var(--webkit-scrollbar-thumb-border-radius); } ::-webkit-scrollbar-thumb:hover { background-color: var(--webkit-scrollbar-thumb-bg-color-hover); background-image: var(--webkit-scrollbar-thumb-bg-image-hover); border-color: var(--webkit-scrollbar-thumb-border-color-hover); } ::-webkit-scrollbar-corner { background-clip: var(--webkit-scrollbar-corner-bg-clip); background-color: var(--webkit-scrollbar-corner-bg-color); background-image: var(--webkit-scrollbar-corner-bg-image); border: var(--webkit-scrollbar-corner-border-style); border-width: var(--webkit-scrollbar-corner-border-width); border-color: var(--webkit-scrollbar-corner-border-color); } } /* Firefox */ @media (min-width: 769px) { * { scrollbar-color: var(--moz-scrollbar-color); } } /** * ---------------------------------------------------------------------------- * [ Layout (navbar, sidebar, sticky alerts, dialogs) ] * * 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: * [ Alerts ] * [ Navbar content ] * [ Sidebar content ] * * The page-wrapper can have additional helper classes which automatically * adjusts the children elements. For example, the .with-navbar class will * automatically add a padding to the top of the content wrapper equal to the * height of the default navbar (fixed top). * ---------------------------------------------------------------------------- */ /* Content wrapper */ .content-wrapper { position: relative; top: 0; left: 0; } /* Navbar */ .navbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; flex-flow: row nowrap; justify-content: flex-start; width: 100%; height: var(--navbar-height); padding: var(--navbar-vertical-padding) var(--navbar-horizontal-padding); color: var(--navbar-text-color); background-color: var(--navbar-bg-color); background-image: var(--navbar-bg-image); border-bottom-style: var(--navbar-border-style); border-bottom-width: var(--navbar-border-width); border-bottom-color: var(--navbar-border-color); box-shadow: var(--navbar-box-shadow); } .navbar-fixed-bottom { height: var(--navbar-fixed-bottom-height); border-bottom: 0; border-top-style: var(--navbar-border-style); border-top-width: var(--navbar-border-width); border-top-color: var(--navbar-border-color); box-shadow: var(--navbar-fixed-bottom-box-shadow); } .navbar-static-bottom { border-bottom: 0; border-top-style: var(--navbar-border-style); border-top-width: var(--navbar-border-width); border-top-color: var(--navbar-border-color); box-shadow: var(--navbar-static-bottom-box-shadow); } .page-wrapper > .navbar { position: fixed; display: none; top: 0; left: 0; z-index: 40; } .page-wrapper > .navbar-fixed-bottom { top: auto; bottom: 0; } /* Sidebar */ .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 20; width: var(--sidebar-width); max-width: 100%; height: 100%; padding: var(--sidebar-padding); overflow-x: hidden; overflow-y: auto; color: var(--sidebar-text-color); background-color: var(--sidebar-bg-color); background-image: var(--sidebar-bg-image); border-right-style: var(--sidebar-border-style); border-right-width: var(--sidebar-border-width); border-right-color: var(--sidebar-border-color); box-shadow: var(--sidebar-box-shadow); outline: 0; } .page-wrapper > .sidebar { display: none; } /* Sidebar overlay (needed for some types of sidebars) */ .sidebar-overlay { position: fixed; display: none; top: 0; left: 0; height: 100%; width: 100%; z-index: 45; background-color: var(--sidebar-overlay-bg-color); background-image: var(--sidebar-overlay-bg-image); } /** * Sticky alerts * * The z-index should be high enough to make sure sticky alerts can be used on * top of modals. */ .sticky-alerts { position: fixed; top: var(--sticky-alerts-top); right: var(--sticky-alerts-end); width: var(--sticky-alerts-width); max-width: 100%; padding: var(--sticky-alerts-padding); margin: var(--sticky-alerts-margin); z-index: 100; } /* Page wrapper helper classes */ /** * With navbar * * The scroll-margin-top handles anchor links by making space on top for the * navbar. This isn't supported by all browsers, so there is a JS fallback. */ .with-navbar > .navbar:not(.navbar-fixed-bottom) { display: flex; } .with-navbar > .content-wrapper { padding-top: var(--navbar-height); } .with-navbar > .content-wrapper :target { scroll-margin-top: var(--navbar-height); } .with-navbar > .sidebar { top: var(--navbar-height); height: calc(100% - var(--navbar-height)); } .with-navbar > .sticky-alerts { top: var(--navbar-height); } /* With sidebar */ .with-sidebar > .sidebar { display: block; } .with-sidebar > .content-wrapper { left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); } @media (max-width: 768px) { .with-sidebar > .content-wrapper { width: 100%; } } /* With navbar fixed bottom */ .with-navbar-fixed-bottom > .navbar-fixed-bottom { display: flex; } .with-navbar-fixed-bottom > .content-wrapper { padding-bottom: var(--navbar-fixed-bottom-height); } .with-navbar-fixed-bottom > .sidebar { bottom: var(--navbar-fixed-bottom-height); height: calc(100% - var(--navbar-fixed-bottom-height)); } /* With navbar and navbar fixed bottom */ .with-navbar.with-navbar-fixed-bottom > .sidebar { height: calc(100% - var(--navbar-height) - var(--navbar-fixed-bottom-height)); } /** * Sidebar visibility and types * * When screen width is > 768px, the sidebar is visible by default, unless the * page wrapper has the data-hm-sidebar-hidden="true" attribute, or the * sidebar type is "overlayed-all". Therefore, the sidebar is hidden only if * the page wrapper has the data-hm-sidebar-hidden="true" attribute. * * When screen width is <= 768px, the sidebar is hidden by default. Therefore, * the sidebar only becomes visible if the page wrapper has the * data-hm-sidebar-hidden="false" attribute. */ .with-sidebar[data-hm-sidebar-hidden="true"] > .sidebar { visibility: hidden; left: calc((-1) * var(--sidebar-width)); } .with-sidebar[data-hm-sidebar-hidden="true"] > .content-wrapper { left: 0; width: 100%; } @media (max-width: 768px) { .with-sidebar > .sidebar { visibility: hidden; left: calc((-1) * var(--sidebar-width)); } .with-sidebar > .content-wrapper { left: 0; } .with-sidebar[data-hm-sidebar-hidden="false"] > .sidebar { visibility: visible; left: 0; } .with-sidebar[data-hm-sidebar-hidden="false"] > .content-wrapper { left: var(--sidebar-width); } } /* Full height sidebar */ .with-sidebar[data-hm-sidebar-type~="full-height"] > .sidebar { top: 0; height: 100%; } .with-sidebar[data-hm-sidebar-type~="full-height"] > .navbar { left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); } .with-sidebar[data-hm-sidebar-type~="full-height"][data-hm-sidebar-hidden="true"] > .navbar { left: 0; width: 100%; } @media (max-width: 768px) { .with-sidebar[data-hm-sidebar-type~="full-height"] > .navbar { left: 0; width: 100%; } .with-sidebar[data-hm-sidebar-type~="full-height"][data-hm-sidebar-hidden="false"] > .navbar { left: var(--sidebar-width); } } /* Overlayed (on all screens) sidebar */ .with-sidebar[data-hm-sidebar-type~="overlayed-all"] > .navbar, .with-sidebar[data-hm-sidebar-type~="overlayed-all"] > .content-wrapper { left: 0; width: 100%; } .with-sidebar[data-hm-sidebar-type~="overlayed-all"] > .sidebar { visibility: hidden; top: 0; left: calc((-1) * var(--sidebar-width)); z-index: 50; height: 100%; } .with-sidebar[data-hm-sidebar-type~="overlayed-all"][data-hm-sidebar-hidden="false"] > .sidebar { visibility: visible; left: 0; } .with-sidebar[data-hm-sidebar-type~="overlayed-all"][data-hm-sidebar-hidden="false"] > .sidebar-overlay { display: block; } /* Overlayed (only on small screens and down) sidebar */ @media (max-width: 768px) { .with-sidebar[data-hm-sidebar-type~="overlayed-md-down"] > .navbar, .with-sidebar[data-hm-sidebar-type~="overlayed-md-down"] > .content-wrapper { left: 0; width: 100%; } .with-sidebar[data-hm-sidebar-type~="overlayed-md-down"] > .sidebar { visibility: hidden; top: 0; left: calc((-1) * var(--sidebar-width)); z-index: 50; height: 100%; } .with-sidebar[data-hm-sidebar-type~="overlayed-md-down"][data-hm-sidebar-hidden="false"] > .navbar { left: 0; } .with-sidebar[data-hm-sidebar-type~="overlayed-md-down"][data-hm-sidebar-hidden="false"] > .sidebar { visibility: visible; left: 0; } .with-sidebar[data-hm-sidebar-type~="overlayed-md-down"][data-hm-sidebar-hidden="false"] > .sidebar-overlay { display: block; } } /* Sidebar transitions */ .with-sidebar > .sidebar { transition: visibility .25s, left .25s cubic-bezier(.25, .8, .25, 1); } .with-sidebar > .content-wrapper, .with-sidebar[data-hm-sidebar-type~="full-height"] > .navbar { transition: width .25s cubic-bezier(.25, .8, .25, 1), left .25s cubic-bezier(.25, .8, .25, 1); } @media (prefers-reduced-motion) { .with-sidebar > .sidebar { transition: none; } .with-sidebar > .content-wrapper, .with-sidebar[data-hm-sidebar-type~="full-height"] > .navbar { transition: none; } } /* Sidebar scroll adjustments */ .sidebar-open-adjust-x.sidebar-overlayed-all { overflow-x: hidden; } .sidebar-open-adjust-y.sidebar-overlayed-all { overflow-y: hidden; } @media (max-width: 768px) { .sidebar-open-adjust-x { overflow-x: hidden; } .sidebar-open-adjust-y { overflow-y: hidden; } } /* Dialogs */ .dialog-open { overflow: hidden; } .dialog-open-scroll-auto { overflow: auto; } .dialog-overlay { position: fixed; display: none; top: 0; left: 0; z-index: 80; width: 100%; height: 100%; background-color: var(--dialog-overlay-bg-color); background-image: var(--dialog-overlay-bg-image); } .dialog-open .dialog-overlay { display: block; } .no-dialog-overlay .dialog-overlay { display: none; } /* Janky scroll fix (for Safari) */ body, .sidebar { -webkit-overflow-scrolling: touch; } /** * ---------------------------------------------------------------------------- * [ Page building (containers, content, card, v-spacer) ] * ---------------------------------------------------------------------------- */ /* Containers */ .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-fluid { margin-left: auto; margin-right: auto; } .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { width: var(--container-width); } .container-fluid { width: var(--container-fluid-width); } @media (min-width: 577px) { .container, .container-sm { max-width: var(--container-sm-max-width); } } @media (min-width: 769px) { .container, .container-sm, .container-md { max-width: var(--container-md-max-width); } } @media (min-width: 993px) { .container, .container-sm, .container-md, .container-lg { max-width: var(--container-lg-max-width); } } @media (min-width: 1201px) { .container, .container-sm, .container-md, .container-lg, .container-xl { max-width: var(--container-xl-max-width); } } @media (min-width: 1401px) { .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: var(--container-xxl-max-width); } } /* Content and card */ .content { margin: var(--content-and-card-spacing); } .card { position: relative; display: block; -webkit-font-smoothing: var(--card-webkit-font-smoothing); -moz-osx-font-smoothing: var(--card-moz-osx-font-smoothing); padding: var(--content-and-card-spacing); margin: var(--content-and-card-spacing); background-clip: var(--card-bg-clip); color: var(--card-text-color); background-color: var(--card-bg-color); background-image: var(--card-bg-image); border: var(--card-border-style); border-width: var(--card-border-width); border-color: var(--card-border-color); border-radius: var(--card-border-radius); box-shadow: var(--card-box-shadow); } /* Card link */ .card-link { -webkit-font-smoothing: var(--card-link-webkit-font-smoothing); -moz-osx-font-smoothing: var(--card-link-moz-osx-font-smoothing); background-clip: var(--card-link-bg-clip); text-decoration: var(--card-link-text-decoration); color: var(--card-link-text-color); background-color: var(--card-link-bg-color); background-image: var(--card-link-bg-image); border-color: var(--card-link-border-color); box-shadow: var(--card-link-box-shadow); } .card-link:hover { text-decoration: var(--card-link-text-decoration-hover); color: var(--card-link-text-color-hover); background-color: var(--card-link-bg-color-hover); background-image: var(--card-link-bg-image-hover); border-color: var(--card-link-border-color-hover); box-shadow: var(--card-link-box-shadow-hover); } /* Card flush */ .card-flush { margin-left: 0; margin-right: 0; border-left: 0; border-right: 0; border-radius: 0; } @media (max-width: 576px) { .card-flush-sm-down { margin-left: 0; margin-right: 0; border-left: 0; border-right: 0; border-radius: 0; } } @media (max-width: 768px) { .card-flush-md-down { margin-left: 0; margin-right: 0; border-left: 0; border-right: 0; border-radius: 0; } } @media (max-width: 992px) { .card-flush-lg-down { margin-left: 0; margin-right: 0; border-left: 0; border-right: 0; border-radius: 0; } } @media (max-width: 1200px) { .card-flush-xl-down { margin-left: 0; margin-right: 0; border-left: 0; border-right: 0; border-radius: 0; } } @media (max-width: 1400px) { .card-flush-xxl-down { margin-left: 0; margin-right: 0; border-left: 0; border-right: 0; border-radius: 0; } } /* Content and card padding utilities */ .p-content, .p-card { padding: var(--content-and-card-spacing) !important; } .px-content, .px-card { padding-left: var(--content-and-card-spacing) !important; padding-right: var(--content-and-card-spacing) !important; } .py-content, .py-card { padding-top: var(--content-and-card-spacing) !important; padding-bottom: var(--content-and-card-spacing) !important; } /* Content title */ .content-title { font-family: var(--content-title-font-family); font-size: var(--content-title-font-size); line-height: var(--content-title-line-height); font-weight: var(--content-title-font-weight); -webkit-font-smoothing: var(--content-title-webkit-font-smoothing); -moz-osx-font-smoothing: var(--content-title-moz-osx-font-smoothing); margin-top: var(--content-title-margin-top); margin-bottom: var(--content-title-margin-bottom); } /* Card title */ .card-title { font-family: var(--card-title-font-family); font-size: var(--card-title-font-size); line-height: var(--card-title-line-height); font-weight: var(--card-title-font-weight); -webkit-font-smoothing: var(--card-title-webkit-font-smoothing); -moz-osx-font-smoothing: var(--card-title-moz-osx-font-smoothing); margin-top: var(--card-title-margin-top); margin-bottom: var(--card-title-margin-bottom); } /* Vertical spacer */ .v-spacer { position: relative; width: 100%; height: var(--v-spacer-height); } /** * ---------------------------------------------------------------------------- * [ Grid system ] * ---------------------------------------------------------------------------- */ .row, .form-row { display: flex; flex-wrap: wrap; } .row > *, .form-row > * { flex-shrink: 0; width: 100%; max-width: 100%; } .col { flex: 1 0 0%; } .row-cols-auto > * { flex: 0 0 auto; width: auto; } .row-cols-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-3 > * { flex: 0 0 auto; width: 33.3333333333%; } .row-cols-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-6 > * { flex: 0 0 auto; width: 16.6666666667%; } .col-auto { flex: 0 0 auto; width: auto; } .col-1 { flex: 0 0 auto; width: 8.33333333%; } .col-2 { flex: 0 0 auto; width: 16.66666667%; } .col-3 { flex: 0 0 auto; width: 25%; } .col-4 { flex: 0 0 auto; width: 33.33333333%; } .col-5 { flex: 0 0 auto; width: 41.66666667%; } .col-6 { flex: 0 0 auto; width: 50%; } .col-7 { flex: 0 0 auto; width: 58.33333333%; } .col-8 { flex: 0 0 auto; width: 66.66666667%; } .col-9 { flex: 0 0 auto; width: 75%; } .col-10 { flex: 0 0 auto; width: 83.33333333%; } .col-11 { flex: 0 0 auto; width: 91.66666667%; } .col-12 { flex: 0 0 auto; width: 100%; } .offset-1 { margin-left: 8.33333333%; } .offset-2 { margin-left: 16.66666667%; } .offset-3 { margin-left: 25%; } .offset-4 { margin-left: 33.33333333%; } .offset-5 { margin-left: 41.66666667%; } .offset-6 { margin-left: 50%; } .offset-7 { margin-left: 58.33333333%; } .offset-8 { margin-left: 66.66666667%; } .offset-9 { margin-left: 75%; } .offset-10 { margin-left: 83.33333333%; } .offset-11 { margin-left: 91.66666667%; } @media (min-width: 577px) { .col-sm { flex: 1 0 0%; } .row-cols-sm-auto > * { flex: 0 0 auto; width: auto; } .row-cols-sm-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-sm-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-sm-3 > * { flex: 0 0 auto; width: 33.3333333333%; } .row-cols-sm-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-sm-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-sm-6 > * { flex: 0 0 auto; width: 16.6666666667%; } .col-sm-auto { flex: 0 0 auto; width: auto; } .col-sm-1 { flex: 0 0 auto; width: 8.33333333%; } .col-sm-2 { flex: 0 0 auto; width: 16.66666667%; } .col-sm-3 { flex: 0 0 auto; width: 25%; } .col-sm-4 { flex: 0 0 auto; width: 33.33333333%; } .col-sm-5 { flex: 0 0 auto; width: 41.66666667%; } .col-sm-6 { flex: 0 0 auto; width: 50%; } .col-sm-7 { flex: 0 0 auto; width: 58.33333333%; } .col-sm-8 { flex: 0 0 auto; width: 66.66666667%; } .col-sm-9 { flex: 0 0 auto; width: 75%; } .col-sm-10 { flex: 0 0 auto; width: 83.33333333%; } .col-sm-11 { flex: 0 0 auto; width: 91.66666667%; } .col-sm-12 { flex: 0 0 auto; width: 100%; } .offset-sm-0 { margin-left: 0; } .offset-sm-1 { margin-left: 8.33333333%; } .offset-sm-2 { margin-left: 16.66666667%; } .offset-sm-3 { margin-left: 25%; } .offset-sm-4 { margin-left: 33.33333333%; } .offset-sm-5 { margin-left: 41.66666667%; } .offset-sm-6 { margin-left: 50%; } .offset-sm-7 { margin-left: 58.33333333%; } .offset-sm-8 { margin-left: 66.66666667%; } .offset-sm-9 { margin-left: 75%; } .offset-sm-10 { margin-left: 83.33333333%; } .offset-sm-11 { margin-left: 91.66666667%; } } @media (min-width: 769px) { .col-md { flex: 1 0 0%; } .row-cols-md-auto > * { flex: 0 0 auto; width: auto; } .row-cols-md-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-md-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-md-3 > * { flex: 0 0 auto; width: 33.3333333333%; } .row-cols-md-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-md-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-md-6 > * { flex: 0 0 auto; width: 16.6666666667%; } .col-md-auto { flex: 0 0 auto; width: auto; } .col-md-1 { flex: 0 0 auto; width: 8.33333333%; } .col-md-2 { flex: 0 0 auto; width: 16.66666667%; } .col-md-3 { flex: 0 0 auto; width: 25%; } .col-md-4 { flex: 0 0 auto; width: 33.33333333%; } .col-md-5 { flex: 0 0 auto; width: 41.66666667%; } .col-md-6 { flex: 0 0 auto; width: 50%; } .col-md-7 { flex: 0 0 auto; width: 58.33333333%; } .col-md-8 { flex: 0 0 auto; width: 66.66666667%; } .col-md-9 { flex: 0 0 auto; width: 75%; } .col-md-10 { flex: 0 0 auto; width: 83.33333333%; } .col-md-11 { flex: 0 0 auto; width: 91.66666667%; } .col-md-12 { flex: 0 0 auto; width: 100%; } .offset-md-0 { margin-left: 0; } .offset-md-1 { margin-left: 8.33333333%; } .offset-md-2 { margin-left: 16.66666667%; } .offset-md-3 { margin-left: 25%; } .offset-md-4 { margin-left: 33.33333333%; } .offset-md-5 { margin-left: 41.66666667%; } .offset-md-6 { margin-left: 50%; } .offset-md-7 { margin-left: 58.33333333%; } .offset-md-8 { margin-left: 66.66666667%; } .offset-md-9 { margin-left: 75%; } .offset-md-10 { margin-left: 83.33333333%; } .offset-md-11 { margin-left: 91.66666667%; } } @media (min-width: 993px) { .col-lg { flex: 1 0 0%; } .row-cols-lg-auto > * { flex: 0 0 auto; width: auto; } .row-cols-lg-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-lg-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-lg-3 > * { flex: 0 0 auto; width: 33.3333333333%; } .row-cols-lg-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-lg-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-lg-6 > * { flex: 0 0 auto; width: 16.6666666667%; } .col-lg-auto { flex: 0 0 auto; width: auto; } .col-lg-1 { flex: 0 0 auto; width: 8.33333333%; } .col-lg-2 { flex: 0 0 auto; width: 16.66666667%; } .col-lg-3 { flex: 0 0 auto; width: 25%; } .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; } .col-lg-5 { flex: 0 0 auto; width: 41.66666667%; } .col-lg-6 { flex: 0 0 auto; width: 50%; } .col-lg-7 { flex: 0 0 auto; width: 58.33333333%; } .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; } .col-lg-9 { flex: 0 0 auto; width: 75%; } .col-lg-10 { flex: 0 0 auto; width: 83.33333333%; } .col-lg-11 { flex: 0 0 auto; width: 91.66666667%; } .col-lg-12 { flex: 0 0 auto; width: 100%; } .offset-lg-0 { margin-left: 0; } .offset-lg-1 { margin-left: 8.33333333%; } .offset-lg-2 { margin-left: 16.66666667%; } .offset-lg-3 { margin-left: 25%; } .offset-lg-4 { margin-left: 33.33333333%; } .offset-lg-5 { margin-left: 41.66666667%; } .offset-lg-6 { margin-left: 50%; } .offset-lg-7 { margin-left: 58.33333333%; } .offset-lg-8 { margin-left: 66.66666667%; } .offset-lg-9 { margin-left: 75%; } .offset-lg-10 { margin-left: 83.33333333%; } .offset-lg-11 { margin-left: 91.66666667%; } } @media (min-width: 1201px) { .col-xl { flex: 1 0 0%; } .row-cols-xl-auto > * { flex: 0 0 auto; width: auto; } .row-cols-xl-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-xl-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-xl-3 > * { flex: 0 0 auto; width: 33.3333333333%; } .row-cols-xl-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-xl-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-xl-6 > * { flex: 0 0 auto; width: 16.6666666667%; } .col-xl-auto { flex: 0 0 auto; width: auto; } .col-xl-1 { flex: 0 0 auto; width: 8.33333333%; } .col-xl-2 { flex: 0 0 auto; width: 16.66666667%; } .col-xl-3 { flex: 0 0 auto; width: 25%; } .col-xl-4 { flex: 0 0 auto; width: 33.33333333%; } .col-xl-5 { flex: 0 0 auto; width: 41.66666667%; } .col-xl-6 { flex: 0 0 auto; width: 50%; } .col-xl-7 { flex: 0 0 auto; width: 58.33333333%; } .col-xl-8 { flex: 0 0 auto; width: 66.66666667%; } .col-xl-9 { flex: 0 0 auto; width: 75%; } .col-xl-10 { flex: 0 0 auto; width: 83.33333333%; } .col-xl-11 { flex: 0 0 auto; width: 91.66666667%; } .col-xl-12 { flex: 0 0 auto; width: 100%; } .offset-xl-0 { margin-left: 0; } .offset-xl-1 { margin-left: 8.33333333%; } .offset-xl-2 { margin-left: 16.66666667%; } .offset-xl-3 { margin-left: 25%; } .offset-xl-4 { margin-left: 33.33333333%; } .offset-xl-5 { margin-left: 41.66666667%; } .offset-xl-6 { margin-left: 50%; } .offset-xl-7 { margin-left: 58.33333333%; } .offset-xl-8 { margin-left: 66.66666667%; } .offset-xl-9 { margin-left: 75%; } .offset-xl-10 { margin-left: 83.33333333%; } .offset-xl-11 { margin-left: 91.66666667%; } } @media (min-width: 1401px) { .col-xxl { flex: 1 0 0%; } .row-cols-xxl-auto > * { flex: 0 0 auto; width: auto; } .row-cols-xxl-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-xxl-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-xxl-3 > * { flex: 0 0 auto; width: 33.3333333333%; } .row-cols-xxl-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-xxl-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-xxl-6 > * { flex: 0 0 auto; width: 16.6666666667%; } .col-xxl-auto { flex: 0 0 auto; width: auto; } .col-xxl-1 { flex: 0 0 auto; width: 8.33333333%; } .col-xxl-2 { flex: 0 0 auto; width: 16.66666667%; } .col-xxl-3 { flex: 0 0 auto; width: 25%; } .col-xxl-4 { flex: 0 0 auto; width: 33.33333333%; } .col-xxl-5 { flex: 0 0 auto; width: 41.66666667%; } .col-xxl-6 { flex: 0 0 auto; width: 50%; } .col-xxl-7 { flex: 0 0 auto; width: 58.33333333%; } .col-xxl-8 { flex: 0 0 auto; width: 66.66666667%; } .col-xxl-9 { flex: 0 0 auto; width: 75%; } .col-xxl-10 { flex: 0 0 auto; width: 83.33333333%; } .col-xxl-11 { flex: 0 0 auto; width: 91.66666667%; } .col-xxl-12 { flex: 0 0 auto; width: 100%; } .offset-xxl-0 { margin-left: 0; } .offset-xxl-1 { margin-left: 8.33333333%; } .offset-xxl-2 { margin-left: 16.66666667%; } .offset-xxl-3 { margin-left: 25%; } .offset-xxl-4 { margin-left: 33.33333333%; } .offset-xxl-5 { margin-left: 41.66666667%; } .offset-xxl-6 { margin-left: 50%; } .offset-xxl-7 { margin-left: 58.33333333%; } .offset-xxl-8 { margin-left: 66.66666667%; } .offset-xxl-9 { margin-left: 75%; } .offset-xxl-10 { margin-left: 83.33333333%; } .offset-xxl-11 { margin-left: 91.66666667%; } } /** * Rows with equal spacing * * Due to flexbox, in some cases, there is no margin collapse. So here, the * half spacing variable is used for the margins. With margin collapse, the * full spacing variable is used instead. */ [class*="row-eq-spacing"] > * > .content, [class*="row-eq-spacing"] > * > .card { margin: 0; } .row.row-eq-spacing { margin-top: var(--content-and-card-spacing); margin-bottom: var(--content-and-card-spacing); padding-left: var(--content-and-card-spacing-half); padding-right: var(--content-and-card-spacing-half); } .row.row-eq-spacing > * { padding-left: var(--content-and-card-spacing-half); padding-right: var(--content-and-card-spacing-half); } @media (min-width: 577px) { .row.row-eq-spacing-sm { margin-top: var(--content-and-card-spacing); margin-bottom: var(--content-and-card-spacing); padding-left: var(--content-and-card-spacing-half); padding-right: var(--content-and-card-spacing-half); } .row.row-eq-spacing-sm > * { padding-left: var(--content-and-card-spacing-half); padding-right: var(--content-and-card-spacing-half); } } @media (max-width: 576px) { .row.row-eq-spacing-sm { margin: var(--content-and-card-spacing); } .row.row-eq-spacing-sm > * { margin-top: var(--content-and-card-spacing-half); margin-bottom: var(--content-and-card-spacing-half); } .row.row-eq-spacing-sm > *:first-child { margin-top: 0; } .row.row-eq-spacing-sm > *:last-child { margin-bottom: 0; } .row.row-eq-spacing-sm > .v-spacer { display: none; } } @media (min-width: 769px) { .row.row-eq-spacing-md { margin-top: var(--content-and-card-spacing); margin-bottom: var(--content-and-card-spacing); padding-left: var(--content-and-card-spacing-half); padding-right: var(--content-and-card-spacing-half); } .row.row-eq-spacing-md > * { padding-left: var(--content-and-card-spacing-half); padding-right: var(--content-and-card-spacing-half); } } @media (max-width: 768px) { .row.row-eq-spacing-md { margin: var(--content-and-card-spacing); } .row.row-eq-spacing-md > * { margin-top: var(--content-and-card-spacing-half); margin-bottom: var(--content-and-card-spacing-half); } .row.row-eq-spacing-md > *:first-child { margin-top: 0; } .row.row-eq-spacing-md > *:last-child { margin-bottom: 0; } .row.row-eq-spacing-md > .v-spacer { display: none; } } @media (min-width: 993px) { .row.row-eq-spacing-lg { margin-top: var(--content-and-card-spacing); margin-bottom: var(--content-and-card-spacing); padding-left: var(--content-and-card-spacing-half); padding-right: var(--content-and-card-spacing-half); } .row.row-eq-spacing-lg > * { padding-left: var(--content-and-card-spacing-half); padding-right: var(--content-and-card-spacing-half); } } @media (max-width: 992px) { .row.row-eq-spacing-lg { margin: var(--content-and-card-spacing); } .row.row-eq-spacing-lg > * { margin-top: var(--content-and-card-spacing-half); margin-bottom: var(--content-and-card-spacing-half); } .row.row-eq-spacing-lg > *:first-child { margin-top: 0; } .row.row-eq-spacing-lg > *:last-child { margin-bottom: 0; } .row.row-eq-spacing-lg > .v-spacer { display: none; } } @media (min-width: 1201px) { .row.row-eq-spacing-xl { margin-top: var(--content-and-card-spacing); margin-bottom: var(--content-and-card-spacing); padding-left: var(--content-and-card-spacing-half); padding-right: var(--content-and-card-spacing-half); } .row.row-eq-spacing-xl > * { padding-left: var(--content-and-card-spacing-half); padding-right: var(--content-and-card-spacing-half); } } @media (max-width: 1200px) { .row.row-eq-spacing-xl { margin: var(--content-and-card-spacing); } .row.row-eq-spacing-xl > * { margin-top: var(--content-and-card-spacing-half); margin-bottom: var(--content-and-card-spacing-half); } .row.row-eq-spacing-xl > *:first-child { margin-top: 0; } .row.row-eq-spacing-xl > *:last-child { margin-bottom: 0; } .row.row-eq-spacing-xl > .v-spacer { display: none; } } @media (min-width: 1401px) { .row.row-eq-spacing-xxl { margin-top: var(--content-and-card-spacing); margin-bottom: var(--content-and-card-spacing); padding-left: var(--content-and-card-spacing-half); padding-right: var(--content-and-card-spacing-half); } .row.row-eq-spacing-xxl > * { padding-left: var(--content-and-card-spacing-half); padding-right: var(--content-and-card-spacing-half); } } @media (max-width: 1400px) { .row.row-eq-spacing-xxl { margin: var(--content-and-card-spacing); } .row.row-eq-spacing-xxl > * { margin-top: var(--content-and-card-spacing-half); margin-bottom: var(--content-and-card-spacing-half); } .row.row-eq-spacing-xxl > *:first-child { margin-top: 0; } .row.row-eq-spacing-xxl > *:last-child { margin-bottom: 0; } .row.row-eq-spacing-xxl > .v-spacer { display: none; } } /* Form row */ .form-row { margin-top: var(--form-row-margin-top); margin-bottom: var(--form-row-margin-bottom); } .form-row.row-eq-spacing > * { padding-left: var(--form-row-col-horizontal-padding); padding-right: var(--form-row-col-horizontal-padding); } .form-row.row-eq-spacing > *:first-child { padding-left: 0; } .form-row.row-eq-spacing > *:last-child { padding-right: 0; } @media (min-width: 577px) { .form-row.row-eq-spacing-sm > * { padding-left: var(--form-row-col-horizontal-padding); padding-right: var(--form-row-col-horizontal-padding); } .form-row.row-eq-spacing-sm > *:first-child { padding-left: 0; } .form-row.row-eq-spacing-sm > *:last-child { padding-right: 0; } } @media (max-width: 576px) { .form-row.row-eq-spacing-sm > * { margin-top: var(--form-row-col-vertical-margin); margin-bottom: var(--form-row-col-vertical-margin); } .form-row.row-eq-spacing-sm > *:first-child { margin-top: 0; } .form-row.row-eq-spacing-sm > *:last-child { margin-bottom: 0; } } @media (min-width: 769px) { .form-row.row-eq-spacing-md > * { padding-left: var(--form-row-col-horizontal-padding); padding-right: var(--form-row-col-horizontal-padding); } .form-row.row-eq-spacing-md > *:first-child { padding-left: 0; } .form-row.row-eq-spacing-md > *:last-child { padding-right: 0; } } @media (max-width: 768px) { .form-row.row-eq-spacing-md > * { margin-top: var(--form-row-col-vertical-margin); margin-bottom: var(--form-row-col-vertical-margin); } .form-row.row-eq-spacing-md > *:first-child { margin-top: 0; } .form-row.row-eq-spacing-md > *:last-child { margin-bottom: 0; } } @media (min-width: 993px) { .form-row.row-eq-spacing-lg > * { padding-left: var(--form-row-col-horizontal-padding); padding-right: var(--form-row-col-horizontal-padding); } .form-row.row-eq-spacing-lg > *:first-child { padding-left: 0; } .form-row.row-eq-spacing-lg > *:last-child { padding-right: 0; } } @media (max-width: 992px) { .form-row.row-eq-spacing-lg > * { margin-top: var(--form-row-col-vertical-margin); margin-bottom: var(--form-row-col-vertical-margin); } .form-row.row-eq-spacing-lg > *:first-child { margin-top: 0; } .form-row.row-eq-spacing-lg > *:last-child { margin-bottom: 0; } } @media (min-width: 1201px) { .form-row.row-eq-spacing-xl > * { padding-left: var(--form-row-col-horizontal-padding); padding-right: var(--form-row-col-horizontal-padding); } .form-row.row-eq-spacing-xl > *:first-child { padding-left: 0; } .form-row.row-eq-spacing-xl > *:last-child { padding-right: 0; } } @media (max-width: 1200px) { .form-row.row-eq-spacing-xl > * { margin-top: var(--form-row-col-vertical-margin); margin-bottom: var(--form-row-col-vertical-margin); } .form-row.row-eq-spacing-xl > *:first-child { margin-top: 0; } .form-row.row-eq-spacing-xl > *:last-child { margin-bottom: 0; } } @media (min-width: 1401px) { .form-row.row-eq-spacing-xxl > * { padding-left: var(--form-row-col-horizontal-padding); padding-right: var(--form-row-col-horizontal-padding); } .form-row.row-eq-spacing-xxl > *:first-child { padding-left: 0; } .form-row.row-eq-spacing-xxl > *:last-child { padding-right: 0; } } @media (max-width: 1400px) { .form-row.row-eq-spacing-xxl > * { margin-top: var(--form-row-col-vertical-margin); margin-bottom: var(--form-row-col-vertical-margin); } .form-row.row-eq-spacing-xxl > *:first-child { margin-top: 0; } .form-row.row-eq-spacing-xxl > *:last-child { margin-bottom: 0; } } /** * ---------------------------------------------------------------------------- * [ Links ] * ---------------------------------------------------------------------------- */ a { -webkit-font-smoothing: var(--link-webkit-font-smoothing); -moz-osx-font-smoothing: var(--link-moz-osx-font-smoothing); text-decoration: var(--link-text-decoration); color: var(--link-text-color); } a:hover { text-decoration: var(--link-text-decoration-hover); color: var(--link-text-color-hover); } /** * ---------------------------------------------------------------------------- * [ Images ] * ---------------------------------------------------------------------------- */ .img-fluid { max-width: 100%; height: auto; } /** * ---------------------------------------------------------------------------- * [ Buttons ] * ---------------------------------------------------------------------------- */ .btn { display: inline-block; text-align: center; vertical-align: middle; cursor: pointer; font-size: var(--button-font-size); line-height: var(--button-line-height); font-weight: var(--button-font-weight); -webkit-font-smoothing: var(--button-webkit-font-smoothing); -moz-osx-font-smoothing: var(--button-moz-osx-font-smoothing); padding: var(--button-vertical-padding) var(--button-horizontal-padding); background-clip: var(--button-bg-clip); text-decoration: var(--button-text-decoration); color: var(--button-text-color); background-color: var(--button-bg-color); background-image: var(--button-bg-image); border: var(--button-border-style); border-width: var(--button-border-width); border-color: var(--button-border-color); border-radius: var(--button-border-radius); box-shadow: var(--button-box-shadow); -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; } .btn:hover { text-decoration: var(--button-text-decoration-hover); color: var(--button-text-color-hover); background-color: var(--button-bg-color-hover); background-image: var(--button-bg-image-hover); border-color: var(--button-border-color-hover); box-shadow: var(--button-box-shadow-hover); } .btn:active { text-decoration: var(--button-text-decoration-active); color: var(--button-text-color-active); background-color: var(--button-bg-color-active); background-image: var(--button-bg-image-active); border-color: var(--button-border-color-active); box-shadow: var(--button-box-shadow-active); } /* Small button */ .btn-sm, .btn-group-sm > .btn, .input-group-sm > .btn, .input-group-sm > .dropdown > .btn, .input-group-sm > .dropup > .btn, .input-group-sm > .dropend > .btn, .input-group-sm > .dropstart > .btn { font-size: var(--small-button-font-size); line-height: var(--small-button-line-height); padding: var(--small-button-vertical-padding) var(--small-button-horizontal-padding); } /* Large button */ .btn-lg, .btn-group-lg > .btn, .input-group-lg > .btn, .input-group-lg > .dropdown > .btn, .input-group-lg > .dropup > .btn, .input-group-lg > .dropend > .btn, .input-group-lg > .dropstart > .btn { font-size: var(--large-button-font-size); line-height: var(--large-button-line-height); padding: var(--large-button-vertical-padding) var(--large-button-horizontal-padding); } /* Square button */ .btn-square { padding-left: 0; padding-right: 0; width: var(--square-button-width); } .btn-sm.btn-square, .btn-group-sm > .btn-square, .input-group-sm > .btn-square, .input-group-sm > .dropdown > .btn-square, .input-group-sm > .dropup > .btn-square, .input-group-sm > .dropend > .btn-square, .input-group-sm > .dropstart > .btn.square { padding-left: 0; padding-right: 0; width: var(--small-square-button-width); } .btn-lg.btn-square, .btn-group-lg > .btn-square, .input-group-lg > .btn-square, .input-group-lg > .dropdown > .btn-square, .input-group-lg > .dropup > .btn-square, .input-group-lg > .dropend > .btn-square, .input-group-lg > .dropstart > .btn.square { padding-left: 0; padding-right: 0; width: var(--large-square-button-width); } /* Rounded button */ .btn-rounded { border-radius: var(--rounded-button-border-radius); } /* Block button */ .btn-block { display: block; width: 100%; } /* Alternate button */ .btn-alt { -webkit-font-smoothing: var(--button-alt-webkit-font-smoothing); -moz-osx-font-smoothing: var(--button-alt-moz-osx-font-smoothing); background-clip: var(--button-alt-bg-clip); text-decoration: var(--button-alt-text-decoration); color: var(--button-alt-text-color); background-color: var(--button-alt-bg-color); background-image: var(--button-alt-bg-image); border-color: var(--button-alt-border-color); box-shadow: var(--button-alt-box-shadow); } .btn-alt:hover { text-decoration: var(--button-alt-text-decoration-hover); color: var(--button-alt-text-color-hover); background-color: var(--button-alt-bg-color-hover); background-image: var(--button-alt-bg-image-hover); border-color: var(--button-alt-border-color-hover); box-shadow: var(--button-alt-box-shadow-hover); } .btn-alt:active { text-decoration: var(--button-alt-text-decoration-active); color: var(--button-alt-text-color-active); background-color: var(--button-alt-bg-color-active); background-image: var(--button-alt-bg-image-active); border-color: var(--button-alt-border-color-active); box-shadow: var(--button-alt-box-shadow-active); } /* Link button */ .btn-link { -webkit-font-smoothing: var(--button-link-webkit-font-smoothing); -moz-osx-font-smoothing: var(--button-link-moz-osx-font-smoothing); background-clip: var(--button-link-bg-clip); text-decoration: var(--button-link-text-decoration); color: var(--button-link-text-color); background-color: var(--button-link-bg-color); background-image: var(--button-link-bg-image); border-color: var(--button-link-border-color); box-shadow: var(--button-link-box-shadow); } .btn-link:hover { text-decoration: var(--button-link-text-decoration-hover); color: var(--button-link-text-color-hover); background-color: var(--button-link-bg-color-hover); background-image: var(--button-link-bg-image-hover); border-color: var(--button-link-border-color-hover); box-shadow: var(--button-link-box-shadow-hover); } .btn-link:active { text-decoration: var(--button-link-text-decoration-active); color: var(--button-link-text-color-active); background-color: var(--button-link-bg-color-active); background-image: var(--button-link-bg-image-active); border-color: var(--button-link-border-color-active); box-shadow: var(--button-link-box-shadow-active); } /* Primary button */ .btn-primary { -webkit-font-smoothing: var(--button-primary-webkit-font-smoothing); -moz-osx-font-smoothing: var(--button-primary-moz-osx-font-smoothing); background-clip: var(--button-primary-bg-clip); text-decoration: var(--button-primary-text-decoration); color: var(--button-primary-text-color); background-color: var(--button-primary-bg-color); background-image: var(--button-primary-bg-image); border-color: var(--button-primary-border-color); box-shadow: var(--button-primary-box-shadow); } .btn-primary:hover { text-decoration: var(--button-primary-text-decoration-hover); color: var(--button-primary-text-color-hover); background-color: var(--button-primary-bg-color-hover); background-image: var(--button-primary-bg-image-hover); border-color: var(--button-primary-border-color-hover); box-shadow: var(--button-primary-box-shadow-hover); } .btn-primary:active { text-decoration: var(--button-primary-text-decoration-active); color: var(--button-primary-text-color-active); background-color: var(--button-primary-bg-color-active); background-image: var(--button-primary-bg-image-active); border-color: var(--button-primary-border-color-active); box-shadow: var(--button-primary-box-shadow-active); } /* Secondary button */ .btn-secondary { -webkit-font-smoothing: var(--button-secondary-webkit-font-smoothing); -moz-osx-font-smoothing: var(--button-secondary-moz-osx-font-smoothing); background-clip: var(--button-secondary-bg-clip); text-decoration: var(--button-secondary-text-decoration); color: var(--button-secondary-text-color); background-color: var(--button-secondary-bg-color); background-image: var(--button-secondary-bg-image); border-color: var(--button-secondary-border-color); box-shadow: var(--button-secondary-box-shadow); } .btn-secondary:hover { text-decoration: var(--button-secondary-text-decoration-hover); color: var(--button-secondary-text-color-hover); background-color: var(--button-secondary-bg-color-hover); background-image: var(--button-secondary-bg-image-hover); border-color: var(--button-secondary-border-color-hover); box-shadow: var(--button-secondary-box-shadow-hover); } .btn-secondary:active { text-decoration: var(--button-secondary-text-decoration-active); color: var(--button-secondary-text-color-active); background-color: var(--button-secondary-bg-color-active); background-image: var(--button-secondary-bg-image-active); border-color: var(--button-secondary-border-color-active); box-shadow: var(--button-secondary-box-shadow-active); } /* Success button */ .btn-success { -webkit-font-smoothing: var(--button-success-webkit-font-smoothing); -moz-osx-font-smoothing: var(--button-success-moz-osx-font-smoothing); background-clip: var(--button-success-bg-clip); text-decoration: var(--button-success-text-decoration); color: var(--button-success-text-color); background-color: var(--button-success-bg-color); background-image: var(--button-success-bg-image); border-color: var(--button-success-border-color); box-shadow: var(--button-success-box-shadow); } .btn-success:hover { text-decoration: var(--button-success-text-decoration-hover); color: var(--button-success-text-color-hover); background-color: var(--button-success-bg-color-hover); background-image: var(--button-success-bg-image-hover); border-color: var(--button-success-border-color-hover); box-shadow: var(--button-success-box-shadow-hover); } .btn-success:active { text-decoration: var(--button-success-text-decoration-active); color: var(--button-success-text-color-active); background-color: var(--button-success-bg-color-active); background-image: var(--button-success-bg-image-active); border-color: var(--button-success-border-color-active); box-shadow: var(--button-success-box-shadow-active); } /* Warning button */ .btn-warning { -webkit-font-smoothing: var(--button-warning-webkit-font-smoothing); -moz-osx-font-smoothing: var(--button-warning-moz-osx-font-smoothing); background-clip: var(--button-warning-bg-clip); text-decoration: var(--button-warning-text-decoration); color: var(--button-warning-text-color); background-color: var(--button-warning-bg-color); background-image: var(--button-warning-bg-image); border-color: var(--button-warning-border-color); box-shadow: var(--button-warning-box-shadow); } .btn-warning:hover { text-decoration: var(--button-warning-text-decoration-hover); color: var(--button-warning-text-color-hover); background-color: var(--button-warning-bg-color-hover); background-image: var(--button-warning-bg-image-hover); border-color: var(--button-warning-border-color-hover); box-shadow: var(--button-warning-box-shadow-hover); } .btn-warning:active { text-decoration: var(--button-warning-text-decoration-active); color: var(--button-warning-text-color-active); background-color: var(--button-warning-bg-color-active); background-image: var(--button-warning-bg-image-active); border-color: var(--button-warning-border-color-active); box-shadow: var(--button-warning-box-shadow-active); } /* Danger button */ .btn-danger { -webkit-font-smoothing: var(--button-danger-webkit-font-smoothing); -moz-osx-font-smoothing: var(--button-danger-moz-osx-font-smoothing); background-clip: var(--button-danger-bg-clip); text-decoration: var(--button-danger-text-decoration); color: var(--button-danger-text-color); background-color: var(--button-danger-bg-color); background-image: var(--button-danger-bg-image); border-color: var(--button-danger-border-color); box-shadow: var(--button-danger-box-shadow); } .btn-danger:hover { text-decoration: var(--button-danger-text-decoration-hover); color: var(--button-danger-text-color-hover); background-color: var(--button-danger-bg-color-hover); background-image: var(--button-danger-bg-image-hover); border-color: var(--button-danger-border-color-hover); box-shadow: var(--button-danger-box-shadow-hover); } .btn-danger:active { text-decoration: var(--button-danger-text-decoration-active); color: var(--button-danger-text-color-active); background-color: var(--button-danger-bg-color-active); background-image: var(--button-danger-bg-image-active); border-color: var(--button-danger-border-color-active); box-shadow: var(--button-danger-box-shadow-active); } /** * Disabled button * * The .disabled class is meant to disable links styled as buttons. However, * this is usually not recommended because of accessibility concerns. */ .btn:disabled, .btn:disabled:hover, .btn:disabled:active, .btn.disabled, .btn.disabled:hover, .btn.disabled:active { cursor: not-allowed; -webkit-font-smoothing: var(--button-disabled-webkit-font-smoothing); -moz-osx-font-smoothing: var(--button-disabled-moz-osx-font-smoothing); background-clip: var(--button-disabled-bg-clip); text-decoration: var(--button-disabled-text-decoration); color: var(--button-disabled-text-color); background-color: var(--button-disabled-bg-color); background-image: var(--button-disabled-bg-image); border-color: var(--button-disabled-border-color); box-shadow: var(--button-disabled-box-shadow); } .btn.disabled, .btn.disabled:hover, .btn.disabled:active { pointer-events: none; } /** * ---------------------------------------------------------------------------- * [ Lists ] * ---------------------------------------------------------------------------- */ /* Unordered list */ .unordered-list { list-style: none; padding-left: var(--unordered-list-padding-start); margin-top: var(--unordered-list-margin-top); margin-bottom: var(--unordered-list-margin-bottom); } .unordered-list > li { position: relative; padding-left: var(--unordered-list-item-padding-start); margin-bottom: var(--unordered-list-item-margin-bottom); } .unordered-list > li:last-child { margin-bottom: 0; } .unordered-list > li::before { content: " "; position: absolute; display: inline-block; width: var(--unordered-list-item-bullet-width); height: var(--unordered-list-item-bullet-height); top: var(--unordered-list-item-bullet-top); left: var(--unordered-list-item-bullet-start); background-clip: var(--unordered-list-item-bullet-bg-clip); background-color: var(--unordered-list-item-bullet-bg-color); background-image: var(--unordered-list-item-bullet-bg-image); border: var(--unordered-list-item-bullet-border-style); border-width: var(--unordered-list-item-bullet-border-width); border-color: var(--unordered-list-item-bullet-border-color); border-radius: var(--unordered-list-item-bullet-border-radius); box-shadow: var(--unordered-list-item-bullet-box-shadow); } .unordered-list.bullet-reset > li::before { background-clip: border-box; background-color: currentColor; background-image: none; border-color: currentColor; box-shadow: none; } /* Ordered list */ .ordered-list { list-style: none; counter-reset: ordered-list-counter; padding-left: var(--ordered-list-padding-start); margin-top: var(--ordered-list-margin-top); margin-bottom: var(--ordered-list-margin-bottom); } .ordered-list > li { counter-increment: ordered-list-counter; position: relative; padding-left: var(--ordered-list-item-padding-start); margin-bottom: var(--ordered-list-item-margin-bottom); } .ordered-list > li:last-child { margin-bottom: 0; } .ordered-list > li::before { content: counter(ordered-list-counter); position: absolute; display: inline-block; text-align: center; font-family: var(--ordered-list-item-numbering-font-family); font-size: var(--ordered-list-item-numbering-font-size); line-height: var(--ordered-list-item-numbering-line-height); font-weight: var(--ordered-list-item-numbering-font-weight); -webkit-font-smoothing: var(--ordered-list-item-numbering-webkit-font-smoothing); -moz-osx-font-smoothing: var(--ordered-list-item-numbering-moz-osx-font-smoothing); min-width: var(--ordered-list-item-numbering-min-width); height: var(--ordered-list-item-numbering-height); top: var(--ordered-list-item-numbering-top); left: var(--ordered-list-item-numbering-start); padding: var(--ordered-list-item-numbering-padding); background-clip: var(--ordered-list-item-numbering-bg-clip); color: var(--ordered-list-item-numbering-text-color); background-color: var(--ordered-list-item-numbering-bg-color); background-image: var(--ordered-list-item-numbering-bg-image); border: var(--ordered-list-item-numbering-border-style); border-width: var(--ordered-list-item-numbering-border-width); border-color: var(--ordered-list-item-numbering-border-color); border-radius: var(--ordered-list-item-numbering-border-radius); box-shadow: var(--ordered-list-item-numbering-box-shadow); } /* Nesting */ li > .unordered-list { margin-top: var(--nested-unordered-list-vertical-margin); margin-bottom: var(--nested-unordered-list-vertical-margin); } li > .ordered-list { margin-top: var(--nested-ordered-list-vertical-margin); margin-bottom: var(--nested-ordered-list-vertical-margin); } /** * ---------------------------------------------------------------------------- * [ Code ] * ---------------------------------------------------------------------------- */ samp { font-family: var(--base-monospace-font-stack); } pre, code, kbd, samp { direction: ltr /* rtl:ignore */; unicode-bidi: bidi-override; } /* Preformatted text */ pre { overflow-x: auto; font-family: var(--pre-font-family); font-size: var(--pre-font-size); tab-size: var(--pre-tab-size); -webkit-font-smoothing: var(--pre-webkit-font-smoothing); -moz-osx-font-smoothing: var(--pre-moz-osx-font-smoothing); padding: var(--pre-padding); margin: var(--pre-margin); background-clip: var(--pre-bg-clip); color: var(--pre-text-color); background-color: var(--pre-bg-color); background-image: var(--pre-bg-image); border: var(--pre-border-style); border-width: var(--pre-border-width); border-color: var(--pre-border-color); border-radius: var(--pre-border-radius); box-shadow: var(--pre-box-shadow); } /* Code */ code, .code { font-family: var(--code-font-family); font-size: var(--code-font-size); -webkit-font-smoothing: var(--code-webkit-font-smoothing); -moz-osx-font-smoothing: var(--code-moz-osx-font-smoothing); padding: var(--code-padding); margin: var(--code-margin); background-clip: var(--code-bg-clip); color: var(--code-text-color); background-color: var(--code-bg-color); background-image: var(--code-bg-image); border: var(--code-border-style); border-width: var(--code-border-width); border-color: var(--code-border-color); border-radius: var(--code-border-radius); box-shadow: var(--code-box-shadow); } /* Preformatted code */ pre > code { font-family: var(--pre-code-font-family); font-size: var(--pre-code-font-size); -webkit-font-smoothing: var(--pre-code-webkit-font-smoothing); -moz-osx-font-smoothing: var(--pre-code-moz-osx-font-smoothing); padding: var(--pre-code-padding); margin: var(--pre-code-margin); background-clip: var(--pre-code-bg-clip); color: var(--pre-code-text-color); background-color: var(--pre-code-bg-color); background-image: var(--pre-code-bg-image); border: var(--pre-code-border-style); border-width: var(--pre-code-border-width); border-color: var(--pre-code-border-color); border-radius: var(--pre-code-border-radius); box-shadow: var(--pre-code-box-shadow); } /* Keyboard input */ kbd, .kbd { display: inline-block; text-align: center; vertical-align: middle; font-family: var(--kbd-font-family); font-size: var(--kbd-font-size); line-height: var(--kbd-line-height); font-weight: var(--kbd-font-weight); -webkit-font-smoothing: var(--kbd-webkit-font-smoothing); -moz-osx-font-smoothing: var(--kbd-moz-osx-font-smoothing); padding: var(--kbd-padding); margin: var(--kbd-margin); min-width: var(--kbd-min-width); background-clip: var(--kbd-bg-clip); color: var(--kbd-text-color); background-color: var(--kbd-bg-color); background-image: var(--kbd-bg-image); border: var(--kbd-border-style); border-width: var(--kbd-border-width); border-color: var(--kbd-border-color); border-radius: var(--kbd-border-radius); box-shadow: var(--kbd-box-shadow); -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; } /** * ---------------------------------------------------------------------------- * [ Tables ] * ---------------------------------------------------------------------------- */ .table { width: 100%; } /* Table cells */ .table th, .table td { text-align: left; padding: var(--table-vertical-padding) var(--table-horizontal-padding); } /* Table rows */ .table tr { border-bottom: var(--table-border-style); border-bottom-width: var(--table-border-width); border-bottom-color: var(--table-border-color); } .table tbody tr:last-child { border-bottom: 0; } .table thead tr { border-bottom-style: var(--table-head-row-border-bottom-border-style); border-bottom-width: var(--table-head-row-border-bottom-border-width); } .table tfoot tr { border-bottom: 0; border-top: var(--table-foot-row-border-top-border-style); border-top-width: var(--table-foot-row-border-top-border-width); border-top-color: var(--table-border-color); } /* Table header */ .table th { font-weight: var(--table-header-cell-font-weight); -webkit-font-smoothing: var(--table-header-cell-webkit-font-smoothing); -moz-osx-font-smoothing: var(--table-header-cell-moz-osx-font-smoothing); } /* Small table */ .table-sm th, .table-sm td { padding: var(--small-table-vertical-padding) var(--small-table-horizontal-padding); } /* Large table */ .table-lg th, .table-lg td { padding: var(--large-table-vertical-padding) var(--large-table-horizontal-padding); } /* Table caption */ .table { caption-side: top; } .caption-bottom { caption-side: bottom; } .table caption { text-align: left; -webkit-font-smoothing: var(--table-caption-webkit-font-smoothing); -moz-osx-font-smoothing: var(--table-caption-moz-osx-font-smoothing); padding: var(--table-caption-padding); color: var(--table-caption-text-color); border-bottom: var(--table-caption-border-style); border-bottom-width: var(--table-caption-border-width); border-bottom-color: var(--table-caption-border-color); } .caption-bottom caption { border-bottom: 0; border-top: var(--table-caption-border-style); border-top-width: var(--table-caption-border-width); border-top-color: var(--table-caption-border-color); } /* 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; } /* Borderless table */ .table-borderless tr, .table-borderless thead tr, .table-borderless tfoot tr { border: 0; } /* Bordered tables */ .table-bordered, .table-outer-bordered { border: var(--table-border-style); border-width: var(--table-border-width); border-color: var(--table-border-color); } .table-bordered th, .table-bordered td, .table-inner-bordered th, .table-inner-bordered td { border-right: var(--table-border-style); border-right-width: var(--table-border-width); border-right-color: var(--table-border-color); } .table-bordered th:last-child, .table-bordered td:last-child, .table-inner-bordered th:last-child, .table-inner-bordered td:last-child { border-right: 0; } .table-bordered caption, .table-outer-bordered caption { border-top: 0; border-bottom: 0; } /* Striped table */ .table-striped tbody tr:nth-child(odd) { background-color: var(--table-striped-bg-color); background-image: var(--table-striped-bg-image); } /* Hoverable table */ .table-hover tbody tr:hover { background-color: var(--table-hoverable-bg-color-hover); background-image: var(--table-hoverable-bg-image-hover); } /* Active table */ .table-active { -webkit-font-smoothing: var(--table-active-webkit-font-smoothing); -moz-osx-font-smoothing: var(--table-active-moz-osx-font-smoothing); color: var(--table-active-text-color); background-color: var(--table-active-bg-color); background-image: var(--table-active-bg-image); } .table-striped tr.table-active:nth-child(odd) { background-color: var(--table-striped-active-bg-color); background-image: var(--table-striped-active-bg-image); } .table-hover .table-active:hover, .table-hover.table-striped tr.table-active:nth-child(odd):hover { background-color: var(--table-hoverable-active-bg-color-hover); background-image: var(--table-hoverable-active-bg-image-hover); } /* Primary table */ .table-primary { -webkit-font-smoothing: var(--table-primary-webkit-font-smoothing); -moz-osx-font-smoothing: var(--table-primary-moz-osx-font-smoothing); color: var(--table-primary-text-color); background-color: var(--table-primary-bg-color); background-image: var(--table-primary-bg-image); } .table-striped tr.table-primary:nth-child(odd) { background-color: var(--table-striped-primary-bg-color); background-image: var(--table-striped-primary-bg-image); } .table-hover .table-primary:hover, .table-hover.table-striped tr.table-primary:nth-child(odd):hover { background-color: var(--table-hoverable-primary-bg-color-hover); background-image: var(--table-hoverable-primary-bg-image-hover); } /* Secondary table */ .table-secondary { -webkit-font-smoothing: var(--table-secondary-webkit-font-smoothing); -moz-osx-font-smoothing: var(--table-secondary-moz-osx-font-smoothing); color: var(--table-secondary-text-color); background-color: var(--table-secondary-bg-color); background-image: var(--table-secondary-bg-image); } .table-striped tr.table-secondary:nth-child(odd) { background-color: var(--table-striped-secondary-bg-color); background-image: var(--table-striped-secondary-bg-image); } .table-hover .table-secondary:hover, .table-hover.table-striped tr.table-secondary:nth-child(odd):hover { background-color: var(--table-hoverable-secondary-bg-color-hover); background-image: var(--table-hoverable-secondary-bg-image-hover); } /* Success table */ .table-success { -webkit-font-smoothing: var(--table-success-webkit-font-smoothing); -moz-osx-font-smoothing: var(--table-success-moz-osx-font-smoothing); color: var(--table-success-text-color); background-color: var(--table-success-bg-color); background-image: var(--table-success-bg-image); } .table-striped tr.table-success:nth-child(odd) { background-color: var(--table-striped-success-bg-color); background-image: var(--table-striped-success-bg-image); } .table-hover .table-success:hover, .table-hover.table-striped tr.table-success:nth-child(odd):hover { background-color: var(--table-hoverable-success-bg-color-hover); background-image: var(--table-hoverable-success-bg-image-hover); } /* Warning table */ .table-warning { -webkit-font-smoothing: var(--table-warning-webkit-font-smoothing); -moz-osx-font-smoothing: var(--table-warning-moz-osx-font-smoothing); color: var(--table-warning-text-color); background-color: var(--table-warning-bg-color); background-image: var(--table-warning-bg-image); } .table-striped tr.table-warning:nth-child(odd) { background-color: var(--table-striped-warning-bg-color); background-image: var(--table-striped-warning-bg-image); } .table-hover .table-warning:hover, .table-hover.table-striped tr.table-warning:nth-child(odd):hover { background-color: var(--table-hoverable-warning-bg-color-hover); background-image: var(--table-hoverable-warning-bg-image-hover); } /* Danger table */ .table-danger { -webkit-font-smoothing: var(--table-danger-webkit-font-smoothing); -moz-osx-font-smoothing: var(--table-danger-moz-osx-font-smoothing); color: var(--table-danger-text-color); background-color: var(--table-danger-bg-color); background-image: var(--table-danger-bg-image); } .table-striped tr.table-danger:nth-child(odd) { background-color: var(--table-striped-danger-bg-color); background-image: var(--table-striped-danger-bg-image); } .table-hover .table-danger:hover, .table-hover.table-striped tr.table-danger:nth-child(odd):hover { background-color: var(--table-hoverable-danger-bg-color-hover); background-image: var(--table-hoverable-danger-bg-image-hover); } /* Responsive tables */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-responsive th, .table-responsive td { white-space: nowrap; } @media (max-width: 576px) { .table-responsive-sm-down { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-responsive-sm-down th, .table-responsive-sm-down td { white-space: nowrap; } } @media (max-width: 768px) { .table-responsive-md-down { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-responsive-md-down th, .table-responsive-md-down td { white-space: nowrap; } } @media (max-width: 992px) { .table-responsive-lg-down { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-responsive-lg-down th, .table-responsive-lg-down td { white-space: nowrap; } } @media (max-width: 1200px) { .table-responsive-xl-down { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-responsive-xl-down th, .table-responsive-xl-down td { white-space: nowrap; } } @media (max-width: 1400px) { .table-responsive-xxl-down { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-responsive-xxl-down th, .table-responsive-xxl-down td { white-space: nowrap; } } /* Table whitespace normal */ .table-whitespace-normal th, .table-whitespace-normal td { white-space: normal; } /** * ---------------------------------------------------------------------------- * [ Form helpers ] * ---------------------------------------------------------------------------- */ /* Form group */ .form-group { margin-top: var(--form-group-margin-top); margin-bottom: var(--form-group-margin-bottom); } /* Form label */ .form-label { display: inline-block; font-family: var(--form-label-font-family); font-size: var(--form-label-font-size); line-height: var(--form-label-line-height); font-weight: var(--form-label-font-weight); -webkit-font-smoothing: var(--form-label-webkit-font-smoothing); -moz-osx-font-smoothing: var(--form-label-moz-osx-font-smoothing); margin-top: var(--form-label-margin-top); margin-bottom: var(--form-label-margin-bottom); color: var(--form-label-text-color); } .form-label.required::after { content: "*"; font-family: var(--form-label-required-asterisk-font-family); font-size: var(--form-label-required-asterisk-font-size); line-height: var(--form-label-required-asterisk-line-height); font-weight: var(--form-label-required-asterisk-font-weight); -webkit-font-smoothing: var(--form-label-required-asterisk-webkit-font-smoothing); -moz-osx-font-smoothing: var(--form-label-required-asterisk-moz-osx-font-smoothing); margin-left: var(--form-label-required-asterisk-margin-start); margin-right: var(--form-label-required-asterisk-margin-end); color: var(--form-label-required-asterisk-text-color); } /* Form text */ .form-text { font-family: var(--form-text-font-family); font-size: var(--form-text-font-size); line-height: var(--form-text-line-height); font-weight: var(--form-text-font-weight); -webkit-font-smoothing: var(--form-text-webkit-font-smoothing); -moz-osx-font-smoothing: var(--form-text-moz-osx-font-smoothing); margin-top: var(--form-text-margin-top); margin-bottom: var(--form-text-margin-bottom); color: var(--form-text-text-color); } /* Form invalid feedback */ .invalid-feedback { list-style-position: inside; font-family: var(--form-invalid-feedback-font-family); font-size: var(--form-invalid-feedback-font-size); line-height: var(--form-invalid-feedback-line-height); font-weight: var(--form-invalid-feedback-font-weight); -webkit-font-smoothing: var(--form-invalid-feedback-webkit-font-smoothing); -moz-osx-font-smoothing: var(--form-invalid-feedback-moz-osx-font-smoothing); padding: var(--form-invalid-feedback-padding); margin-top: var(--form-invalid-feedback-margin-top); margin-bottom: var(--form-invalid-feedback-margin-bottom); color: var(--form-invalid-feedback-text-color); } /* Form check */ .form-check { display: block; position: relative; } .form-check-inline { display: inline-block; margin-right: var(--form-check-inline-margin-end); } .form-group > .form-check { margin-bottom: var(--form-group-form-check-margin-bottom); } .form-group > .form-check:not(.form-check-inline):last-child { margin-bottom: 0; } .form-check-label { display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /** * ---------------------------------------------------------------------------- * [ Input ] * ---------------------------------------------------------------------------- */ .form-control, .form-select { display: block; width: 100%; font-size: var(--input-font-size); line-height: var(--input-line-height); font-weight: var(--input-font-weight); -webkit-font-smoothing: var(--input-webkit-font-smoothing); -moz-osx-font-smoothing: var(--input-moz-osx-font-smoothing); padding: var(--input-vertical-padding) var(--input-horizontal-padding); background-clip: var(--input-bg-clip); color: var(--input-text-color); background-color: var(--input-bg-color); background-image: var(--input-bg-image); border: var(--input-border-style); border-width: var(--input-border-width); border-color: var(--input-border-color); border-radius: var(--input-border-radius); box-shadow: var(--input-box-shadow); -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form-control:hover, .form-select:hover { color: var(--input-text-color-hover); background-color: var(--input-bg-color-hover); background-image: var(--input-bg-image-hover); border-color: var(--input-border-color-hover); box-shadow: var(--input-box-shadow-hover); } .form-control:focus, .form-select:focus { border-color: var(--input-border-color-focus); box-shadow: var(--input-box-shadow-focus); outline: var(--input-outline-focus); } ::-webkit-input-placeholder { color: var(--input-placeholder-text-color); } :-ms-input-placeholder { color: var(--input-placeholder-text-color); } ::placeholder { color: var(--input-placeholder-text-color); } /* Small input */ .form-control-sm, .form-select-sm, .input-group-sm > .form-control, .input-group-sm > .form-select { font-size: var(--small-input-font-size); line-height: var(--small-input-line-height); padding: var(--small-input-vertical-padding) var(--small-input-horizontal-padding); } /* Large input */ .form-control-lg, .form-select-lg, .input-group-lg > .form-control, .input-group-lg > .form-select { font-size: var(--large-input-font-size); line-height: var(--large-input-line-height); padding: var(--large-input-vertical-padding) var(--large-input-horizontal-padding); } /* Alternate input */ .form-control-alt, .form-select-alt { -webkit-font-smoothing: var(--input-alt-webkit-font-smoothing); -moz-osx-font-smoothing: var(--input-alt-moz-osx-font-smoothing); background-clip: var(--input-alt-bg-clip); color: var(--input-alt-text-color); background-color: var(--input-alt-bg-color); background-image: var(--input-alt-bg-image); border-color: var(--input-alt-border-color); box-shadow: var(--input-alt-box-shadow); } .form-control-alt:hover, .form-select-alt:hover { color: var(--input-alt-text-color-hover); background-color: var(--input-alt-bg-color-hover); background-image: var(--input-alt-bg-image-hover); border-color: var(--input-alt-border-color-hover); box-shadow: var(--input-alt-box-shadow-hover); } .form-control-alt:focus, .form-select-alt:focus { border-color: var(--input-alt-border-color-focus); box-shadow: var(--input-alt-box-shadow-focus); outline: var(--input-alt-outline-focus); } .form-control-alt::-webkit-input-placeholder { color: var(--input-alt-placeholder-text-color); } .form-control-alt:-ms-input-placeholder { color: var(--input-alt-placeholder-text-color); } .form-control-alt::placeholder { color: var(--input-alt-placeholder-text-color); } /* Invalid input */ .form-control.is-invalid, .form-select.is-invalid { -webkit-font-smoothing: var(--input-invalid-webkit-font-smoothing); -moz-osx-font-smoothing: var(--input-invalid-moz-osx-font-smoothing); background-clip: var(--input-invalid-bg-clip); color: var(--input-invalid-text-color); background-color: var(--input-invalid-bg-color); background-image: var(--input-invalid-bg-image); border-color: var(--input-invalid-border-color); box-shadow: var(--input-invalid-box-shadow); } .form-control.is-invalid:hover, .form-select.is-invalid:hover { color: var(--input-invalid-text-color-hover); background-color: var(--input-invalid-bg-color-hover); background-image: var(--input-invalid-bg-image-hover); border-color: var(--input-invalid-border-color-hover); box-shadow: var(--input-invalid-box-shadow-hover); } .form-control.is-invalid:focus, .form-select.is-invalid:focus { border-color: var(--input-invalid-border-color-focus); box-shadow: var(--input-invalid-box-shadow-focus); outline: var(--input-invalid-outline-focus); } .is-invalid::-webkit-input-placeholder { color: var(--input-invalid-placeholder-text-color); } .is-invalid:-ms-input-placeholder { color: var(--input-invalid-placeholder-text-color); } .is-invalid::placeholder { color: var(--input-invalid-placeholder-text-color); } /* Disabled input */ .form-control:disabled, .form-select:disabled, .form-control:disabled:hover, .form-select:disabled:hover { cursor: not-allowed; -webkit-font-smoothing: var(--input-disabled-webkit-font-smoothing); -moz-osx-font-smoothing: var(--input-disabled-moz-osx-font-smoothing); background-clip: var(--input-disabled-bg-clip); color: var(--input-disabled-text-color); background-color: var(--input-disabled-bg-color); background-image: var(--input-disabled-bg-image); border-color: var(--input-disabled-border-color); box-shadow: var(--input-disabled-box-shadow); } .form-control:disabled::-webkit-input-placeholder { color: var(--input-disabled-placeholder-text-color); } .form-control:disabled:-ms-input-placeholder { color: var(--input-disabled-placeholder-text-color); } .form-control:disabled::placeholder { color: var(--input-disabled-placeholder-text-color); } /* Select */ .form-select:not([multiple]), .form-select-alt:not([multiple]), .form-select.is-invalid:not([multiple]), .form-select:not([multiple]):disabled { background-image: var(--select-bg-image); } .form-select:not([multiple]) { background-size: var(--select-bg-size); background-repeat: var(--select-bg-repeat); background-position: var(--select-bg-position); padding-right: var(--select-padding-end); } .form-select:not([multiple]):not(:disabled) { cursor: pointer; } /* Multiple select */ .form-select[multiple] { height: auto; overflow: auto; padding: var(--select-multiple-vertical-padding) var(--select-multiple-horizontal-padding); } .form-select-sm[multiple] { padding: var(--small-select-multiple-vertical-padding) var(--small-select-multiple-horizontal-padding); } .form-select-lg[multiple] { padding: var(--large-select-multiple-vertical-padding) var(--large-select-multiple-horizontal-padding); } /* Number input resets */ .form-number::-webkit-outer-spin-button, .form-number::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .form-number { -moz-appearance: textfield; } /* Password input show/hide toggle */ [data-hm-toggle="password"]:not(.target-input-type-text) .hide-password-prompt { display: none; } [data-hm-toggle="password"].target-input-type-text .show-password-prompt { display: none; } /* Data list input resets */ .form-datalist::-webkit-calendar-picker-indicator { display: none; opacity: 0; } /** * ---------------------------------------------------------------------------- * [ Checkbox ] * ---------------------------------------------------------------------------- */ .form-check-input[type="checkbox"] { position: absolute; cursor: pointer; width: var(--checkbox-width); height: var(--checkbox-height); top: var(--checkbox-top); left: var(--checkbox-start); background-clip: var(--checkbox-bg-clip); background-color: var(--checkbox-bg-color); background-image: var(--checkbox-bg-image); background-size: var(--checkbox-bg-size); background-position: var(--checkbox-bg-position); background-repeat: var(--checkbox-bg-repeat); border: var(--checkbox-border-style); border-width: var(--checkbox-border-width); border-color: var(--checkbox-border-color); border-radius: var(--checkbox-border-radius); box-shadow: var(--checkbox-box-shadow); transition: var(--checkbox-transition); -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-print-color-adjust: exact; color-adjust: exact; } @media (prefers-reduced-motion) { .form-check-input[type="checkbox"] { transition: 0s; } } .form-check-input[type="checkbox"]:only-child { position: relative; top: 0; left: 0; } .form-check-input[type="checkbox"]:hover { background-color: var(--checkbox-bg-color-hover); border-color: var(--checkbox-border-color-hover); box-shadow: var(--checkbox-box-shadow-hover); } .form-check-input[type="checkbox"]:focus { border-color: var(--checkbox-border-color-focus); box-shadow: var(--checkbox-box-shadow-focus); outline: var(--checkbox-outline-focus); } /* Checked checkbox */ .form-check-input[type="checkbox"]:checked { background-clip: var(--checkbox-checked-bg-clip); background-color: var(--checkbox-checked-bg-color); background-image: var(--checkbox-checked-bg-image); background-size: var(--checkbox-checked-bg-size); background-position: var(--checkbox-checked-bg-position); background-repeat: var(--checkbox-checked-bg-repeat); border-color: var(--checkbox-checked-border-color); box-shadow: var(--checkbox-checked-box-shadow); } .form-check-input[type="checkbox"]:checked:hover { background-color: var(--checkbox-checked-bg-color-hover); border-color: var(--checkbox-checked-border-color-hover); box-shadow: var(--checkbox-checked-box-shadow-hover); } .form-check-input[type="checkbox"]:checked:focus { border-color: var(--checkbox-checked-border-color-focus); box-shadow: var(--checkbox-checked-box-shadow-focus); outline: var(--checkbox-checked-outline-focus); } /* Indeterminate checkbox */ .form-check-input[type="checkbox"]:indeterminate { background-clip: var(--checkbox-indeterminate-bg-clip); background-color: var(--checkbox-indeterminate-bg-color); background-image: var(--checkbox-indeterminate-bg-image); background-size: var(--checkbox-indeterminate-bg-size); background-position: var(--checkbox-indeterminate-bg-position); background-repeat: var(--checkbox-indeterminate-bg-repeat); border-color: var(--checkbox-indeterminate-border-color); box-shadow: var(--checkbox-indeterminate-box-shadow); } .form-check-input[type="checkbox"]:indeterminate:hover { background-color: var(--checkbox-indeterminate-bg-color-hover); border-color: var(--checkbox-indeterminate-border-color-hover); box-shadow: var(--checkbox-indeterminate-box-shadow-hover); } .form-check-input[type="checkbox"]:indeterminate:focus { border-color: var(--checkbox-indeterminate-border-color-focus); box-shadow: var(--checkbox-indeterminate-box-shadow-focus); outline: var(--checkbox-indeterminate-outline-focus); } /* Checkbox label */ .form-check-input[type="checkbox"] ~ .form-check-label { padding-left: var(--checkbox-label-padding-start); } /* Disabled checkbox */ .form-check-input[type="checkbox"]:disabled, .form-check-input[type="checkbox"]:disabled:hover { cursor: not-allowed; z-index: 1; background-clip: var(--checkbox-disabled-bg-clip); background-color: var(--checkbox-disabled-bg-color); background-image: var(--checkbox-disabled-bg-image); background-size: var(--checkbox-disabled-bg-size); background-position: var(--checkbox-disabled-bg-position); background-repeat: var(--checkbox-disabled-bg-repeat); border-color: var(--checkbox-disabled-border-color); box-shadow: var(--checkbox-disabled-box-shadow); } /* Disabled checked checkbox */ .form-check-input[type="checkbox"]:disabled:checked, .form-check-input[type="checkbox"]:disabled:checked:hover { background-clip: var(--checkbox-disabled-checked-bg-clip); background-color: var(--checkbox-disabled-checked-bg-color); background-image: var(--checkbox-disabled-checked-bg-image); background-size: var(--checkbox-disabled-checked-bg-size); background-position: var(--checkbox-disabled-checked-bg-position); background-repeat: var(--checkbox-disabled-checked-bg-repeat); border-color: var(--checkbox-disabled-checked-border-color); box-shadow: var(--checkbox-disabled-checked-box-shadow); } /* Disabled indeterminate checkbox */ .form-check-input[type="checkbox"]:disabled:indeterminate, .form-check-input[type="checkbox"]:disabled:indeterminate:hover { background-clip: var(--checkbox-disabled-indeterminate-bg-clip); background-color: var(--checkbox-disabled-indeterminate-bg-color); background-image: var(--checkbox-disabled-indeterminate-bg-image); background-size: var(--checkbox-disabled-indeterminate-bg-size); background-position: var(--checkbox-disabled-indeterminate-bg-position); background-repeat: var(--checkbox-disabled-indeterminate-bg-repeat); border-color: var(--checkbox-disabled-indeterminate-border-color); box-shadow: var(--checkbox-disabled-indeterminate-box-shadow); } /* Disabled checkbox label */ .form-check-input[type="checkbox"]:disabled ~ .form-check-label { pointer-events: none; opacity: var(--checkbox-disabled-label-opacity); } /** * ---------------------------------------------------------------------------- * [ Radio ] * ---------------------------------------------------------------------------- */ .form-check-input[type="radio"] { position: absolute; cursor: pointer; width: var(--radio-width); height: var(--radio-height); top: var(--radio-top); left: var(--radio-start); background-clip: var(--radio-bg-clip); background-color: var(--radio-bg-color); background-image: var(--radio-bg-image); background-size: var(--radio-bg-size); background-position: var(--radio-bg-position); background-repeat: var(--radio-bg-repeat); border: var(--radio-border-style); border-width: var(--radio-border-width); border-color: var(--radio-border-color); border-radius: var(--radio-border-radius); box-shadow: var(--radio-box-shadow); transition: var(--radio-transition); -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-print-color-adjust: exact; color-adjust: exact; } @media (prefers-reduced-motion) { .form-check-input[type="radio"] { transition: 0s; } } .form-check-input[type="radio"]:only-child { position: relative; top: 0; left: 0; } .form-check-input[type="radio"]:hover { background-color: var(--radio-bg-color-hover); border-color: var(--radio-border-color-hover); box-shadow: var(--radio-box-shadow-hover); } .form-check-input[type="radio"]:focus { border-color: var(--radio-border-color-focus); box-shadow: var(--radio-box-shadow-focus); outline: var(--radio-outline-focus); } /* Checked radio */ .form-check-input[type="radio"]:checked { background-clip: var(--radio-checked-bg-clip); background-color: var(--radio-checked-bg-color); background-image: var(--radio-checked-bg-image); background-size: var(--radio-checked-bg-size); background-position: var(--radio-checked-bg-position); background-repeat: var(--radio-checked-bg-repeat); border-color: var(--radio-checked-border-color); box-shadow: var(--radio-checked-box-shadow); } .form-check-input[type="radio"]:checked:hover { background-color: var(--radio-checked-bg-color-hover); border-color: var(--radio-checked-border-color-hover); box-shadow: var(--radio-checked-box-shadow-hover); } .form-check-input[type="radio"]:checked:focus { border-color: var(--radio-checked-border-color-focus); box-shadow: var(--radio-checked-box-shadow-focus); outline: var(--radio-checked-outline-focus); } /* Radio label */ .form-check-input[type="radio"] ~ .form-check-label { padding-left: var(--radio-label-padding-start); } /* Disabled radio */ .form-check-input[type="radio"]:disabled, .form-check-input[type="radio"]:disabled:hover { cursor: not-allowed; z-index: 1; background-clip: var(--radio-disabled-bg-clip); background-color: var(--radio-disabled-bg-color); background-image: var(--radio-disabled-bg-image); background-size: var(--radio-disabled-bg-size); background-position: var(--radio-disabled-bg-position); background-repeat: var(--radio-disabled-bg-repeat); border-color: var(--radio-disabled-border-color); box-shadow: var(--radio-disabled-box-shadow); } /* Disabled checked radio */ .form-check-input[type="radio"]:disabled:checked, .form-check-input[type="radio"]:disabled:checked:hover { background-clip: var(--radio-disabled-checked-bg-clip); background-color: var(--radio-disabled-checked-bg-color); background-image: var(--radio-disabled-checked-bg-image); background-size: var(--radio-disabled-checked-bg-size); background-position: var(--radio-disabled-checked-bg-position); background-repeat: var(--radio-disabled-checked-bg-repeat); border-color: var(--radio-disabled-checked-border-color); box-shadow: var(--radio-disabled-checked-box-shadow); } /* Disabled radio label */ .form-check-input[type="radio"]:disabled ~ .form-check-label { pointer-events: none; opacity: var(--radio-disabled-label-opacity); } /** * ---------------------------------------------------------------------------- * [ Switch ] * ---------------------------------------------------------------------------- */ .form-switch .form-check-input[type="checkbox"] { position: absolute; cursor: pointer; width: var(--switch-width); height: var(--switch-height); top: var(--switch-top); left: var(--switch-start); background-clip: var(--switch-bg-clip); background-color: var(--switch-bg-color); background-image: var(--switch-bg-image); background-size: var(--switch-bg-size); background-position: var(--switch-bg-position); background-repeat: var(--switch-bg-repeat); border: var(--switch-border-style); border-width: var(--switch-border-width); border-color: var(--switch-border-color); border-radius: var(--switch-border-radius); box-shadow: var(--switch-box-shadow); transition: var(--switch-transition); -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-print-color-adjust: exact; color-adjust: exact; } @media (prefers-reduced-motion) { .form-switch .form-check-input[type="checkbox"] { transition: 0s; } } .form-switch .form-check-input[type="checkbox"]:only-child { position: relative; top: 0; left: 0; } .form-switch .form-check-input[type="checkbox"]:hover { background-color: var(--switch-bg-color-hover); border-color: var(--switch-border-color-hover); box-shadow: var(--switch-box-shadow-hover); } .form-switch .form-check-input[type="checkbox"]:focus { border-color: var(--switch-border-color-focus); box-shadow: var(--switch-box-shadow-focus); outline: var(--switch-outline-focus); } /* Checked switch */ .form-switch .form-check-input[type="checkbox"]:checked { background-clip: var(--switch-checked-bg-clip); background-color: var(--switch-checked-bg-color); background-image: var(--switch-checked-bg-image); background-size: var(--switch-checked-bg-size); background-position: var(--switch-checked-bg-position); background-repeat: var(--switch-checked-bg-repeat); border-color: var(--switch-checked-border-color); box-shadow: var(--switch-checked-box-shadow); } .form-switch .form-check-input[type="checkbox"]:checked:hover { background-color: var(--switch-checked-bg-color-hover); border-color: var(--switch-checked-border-color-hover); box-shadow: var(--switch-checked-box-shadow-hover); } .form-switch .form-check-input[type="checkbox"]:checked:focus { border-color: var(--switch-checked-border-color-focus); box-shadow: var(--switch-checked-box-shadow-focus); outline: var(--switch-checked-outline-focus); } /* Switch label */ .form-switch .form-check-input[type="checkbox"] ~ .form-check-label { padding-left: var(--switch-label-padding-start); } /* Disabled switch */ .form-switch .form-check-input[type="checkbox"]:disabled, .form-switch .form-check-input[type="checkbox"]:disabled:hover { cursor: not-allowed; z-index: 1; background-clip: var(--switch-disabled-bg-clip); background-color: var(--switch-disabled-bg-color); background-image: var(--switch-disabled-bg-image); background-size: var(--switch-disabled-bg-size); background-position: var(--switch-disabled-bg-position); background-repeat: var(--switch-disabled-bg-repeat); border-color: var(--switch-disabled-border-color); box-shadow: var(--switch-disabled-box-shadow); } /* Disabled checked switch */ .form-switch .form-check-input[type="checkbox"]:disabled:checked, .form-switch .form-check-input[type="checkbox"]:disabled:checked:hover { background-clip: var(--switch-disabled-checked-bg-clip); background-color: var(--switch-disabled-checked-bg-color); background-image: var(--switch-disabled-checked-bg-image); background-size: var(--switch-disabled-checked-bg-size); background-position: var(--switch-disabled-checked-bg-position); background-repeat: var(--switch-disabled-checked-bg-repeat); border-color: var(--switch-disabled-checked-border-color); box-shadow: var(--switch-disabled-checked-box-shadow); } /* Disabled switch label */ .form-switch .form-check-input[type="checkbox"]:disabled ~ .form-check-label { pointer-events: none; opacity: var(--switch-disabled-label-opacity); } /** * ---------------------------------------------------------------------------- * [ File input ] * ---------------------------------------------------------------------------- */ .form-file { display: block; position: relative; padding-bottom: var(--form-file-padding-bottom); } .form-file-input { position: absolute; opacity: 0; height: 0; width: 0; z-index: -1; } /* Default file input */ .form-file-label { display: inline-block; text-align: center; vertical-align: middle; cursor: pointer; font-size: var(--file-input-font-size); line-height: var(--file-input-line-height); font-weight: var(--file-input-font-weight); -webkit-font-smoothing: var(--file-input-webkit-font-smoothing); -moz-osx-font-smoothing: var(--file-input-moz-osx-font-smoothing); padding: var(--file-input-vertical-padding) var(--file-input-horizontal-padding); background-clip: var(--file-input-bg-clip); color: var(--file-input-text-color); background-color: var(--file-input-bg-color); background-image: var(--file-input-bg-image); border: var(--file-input-border-style); border-width: var(--file-input-border-width); border-color: var(--file-input-border-color); border-radius: var(--file-input-border-radius); box-shadow: var(--file-input-box-shadow); -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; } .form-file-label:hover { color: var(--file-input-text-color-hover); background-color: var(--file-input-bg-color-hover); background-image: var(--file-input-bg-image-hover); border-color: var(--file-input-border-color-hover); box-shadow: var(--file-input-box-shadow-hover); } .form-file-label:active { color: var(--file-input-text-color-active); background-color: var(--file-input-bg-color-active); background-image: var(--file-input-bg-image-active); border-color: var(--file-input-border-color-active); box-shadow: var(--file-input-box-shadow-active); } .form-file-input:focus ~ .form-file-label { border-color: var(--file-input-border-color-focus); box-shadow: var(--file-input-box-shadow-focus); outline: var(--file-input-outline-focus); } /* Invalid file input */ .form-file-input.is-invalid ~ .form-file-label { -webkit-font-smoothing: var(--file-input-invalid-webkit-font-smoothing); -moz-osx-font-smoothing: var(--file-input-invalid-moz-osx-font-smoothing); background-clip: var(--file-input-invalid-bg-clip); color: var(--file-input-invalid-text-color); background-color: var(--file-input-invalid-bg-color); background-image: var(--file-input-invalid-bg-image); border-color: var(--file-input-invalid-border-color); box-shadow: var(--file-input-invalid-box-shadow); } .form-file-input.is-invalid ~ .form-file-label:hover { color: var(--file-input-invalid-text-color-hover); background-color: var(--file-input-invalid-bg-color-hover); background-image: var(--file-input-invalid-bg-image-hover); border-color: var(--file-input-invalid-border-color-hover); box-shadow: var(--file-input-invalid-box-shadow-hover); } .form-file-input.is-invalid ~ .form-file-label:active { color: var(--file-input-invalid-text-color-active); background-color: var(--file-input-invalid-bg-color-active); background-image: var(--file-input-invalid-bg-image-active); border-color: var(--file-input-invalid-border-color-active); box-shadow: var(--file-input-invalid-box-shadow-active); } .form-file-input.is-invalid:focus ~ .form-file-label { border-color: var(--file-input-invalid-border-color-focus); box-shadow: var(--file-input-invalid-box-shadow-focus); outline: var(--file-input-invalid-outline-focus); } /* Disabled file input */ .form-file-input:disabled ~ .form-file-label, .form-file-input:disabled ~ .form-file-label:hover, .form-file-input:disabled ~ .form-file-label:active { cursor: not-allowed; -webkit-font-smoothing: var(--file-input-disabled-webkit-font-smoothing); -moz-osx-font-smoothing: var(--file-input-disabled-moz-osx-font-smoothing); background-clip: var(--file-input-disabled-bg-clip); color: var(--file-input-disabled-text-color); background-color: var(--file-input-disabled-bg-color); background-image: var(--file-input-disabled-bg-image); border-color: var(--file-input-disabled-border-color); box-shadow: var(--file-input-disabled-box-shadow); } /* Filename */ .form-file .form-file-filename { position: absolute; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; bottom: var(--form-file-filename-bottom); left: var(--form-file-filename-start); margin: var(--form-file-filename-margin); } /** * ---------------------------------------------------------------------------- * [ Range ] * ---------------------------------------------------------------------------- */ .form-range { cursor: pointer; width: var(--form-range-width); height: var(--form-range-height); padding: var(--form-range-padding); background-clip: var(--form-range-bg-clip); background-color: var(--form-range-bg-color); background-image: var(--form-range-bg-image); border: var(--form-range-border-style); border-width: var(--form-range-border-width); border-color: var(--form-range-border-color); border-radius: var(--form-range-border-radius); box-shadow: var(--form-range-box-shadow); -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form-range:focus { outline: none; } .form-range::-moz-focus-outer { border: 0; } /* Invalid range */ .form-range.is-invalid { background-clip: var(--form-range-invalid-bg-clip); background-color: var(--form-range-invalid-bg-color); background-image: var(--form-range-invalid-bg-image); border-color: var(--form-range-invalid-border-color); box-shadow: var(--form-range-invalid-box-shadow); } /* Disabled range */ .form-range:disabled { cursor: not-allowed; } /* Webkit based browsers (Chrome, Safari, Edge) */ .form-range::-webkit-slider-runnable-track { -webkit-appearance: none; appearance: none; } .form-range::-webkit-slider-runnable-track { width: var(--form-range-slider-track-width); height: var(--form-range-slider-track-height); background-clip: var(--form-range-slider-track-bg-clip); background-color: var(--form-range-slider-track-bg-color); background-image: var(--form-range-slider-track-bg-image); border: var(--form-range-slider-track-border-style); border-width: var(--form-range-slider-track-border-width); border-color: var(--form-range-slider-track-border-color); border-radius: var(--form-range-slider-track-border-radius); box-shadow: var(--form-range-slider-track-box-shadow); } .form-range:disabled::-webkit-slider-runnable-track { background-clip: var(--form-range-disabled-slider-track-bg-clip); background-color: var(--form-range-disabled-slider-track-bg-color); background-image: var(--form-range-disabled-slider-track-bg-image); border-color: var(--form-range-disabled-slider-track-border-color); box-shadow: var(--form-range-disabled-slider-track-box-shadow); } .form-range::-webkit-slider-thumb { box-sizing: border-box; -webkit-appearance: none; appearance: none; margin-top: calc((-1) * ((var(--form-range-slider-thumb-height) - var(--form-range-slider-track-height)) / 2)); } .form-range::-webkit-slider-thumb { width: var(--form-range-slider-thumb-width); height: var(--form-range-slider-thumb-height); background-clip: var(--form-range-slider-thumb-bg-clip); background-color: var(--form-range-slider-thumb-bg-color); background-image: var(--form-range-slider-thumb-bg-image); border: var(--form-range-slider-thumb-border-style); border-width: var(--form-range-slider-thumb-border-width); border-color: var(--form-range-slider-thumb-border-color); border-radius: var(--form-range-slider-thumb-border-radius); box-shadow: var(--form-range-slider-thumb-box-shadow); } .form-range:hover::-webkit-slider-thumb { background-color: var(--form-range-slider-thumb-bg-color-hover); background-image: var(--form-range-slider-thumb-bg-image-hover); border-color: var(--form-range-slider-thumb-border-color-hover); box-shadow: var(--form-range-slider-thumb-box-shadow-hover); } .form-range:focus::-webkit-slider-thumb { border-color: var(--form-range-slider-thumb-border-color-focus); box-shadow: var(--form-range-slider-thumb-box-shadow-focus); outline: var(--form-range-slider-thumb-outline-focus); } .form-range:disabled::-webkit-slider-thumb, .form-range:disabled:hover::-webkit-slider-thumb { background-clip: var(--form-range-disabled-slider-thumb-bg-clip); background-color: var(--form-range-disabled-slider-thumb-bg-color); background-image: var(--form-range-disabled-slider-thumb-bg-image); border-color: var(--form-range-disabled-slider-thumb-border-color); box-shadow: var(--form-range-disabled-slider-thumb-box-shadow); } /* Firefox */ .form-range::-moz-range-track { -moz-appearance: none; appearance: none; } .form-range::-moz-range-track { width: var(--form-range-slider-track-width); height: var(--form-range-slider-track-height); background-clip: var(--form-range-slider-track-bg-clip); background-color: var(--form-range-slider-track-bg-color); background-image: var(--form-range-slider-track-bg-image); border: var(--form-range-slider-track-border-style); border-width: var(--form-range-slider-track-border-width); border-color: var(--form-range-slider-track-border-color); border-radius: var(--form-range-slider-track-border-radius); box-shadow: var(--form-range-slider-track-box-shadow); } .form-range::-moz-range-thumb { box-sizing: border-box; -moz-appearance: none; appearance: none; } .form-range::-moz-range-thumb { width: var(--form-range-slider-thumb-width); height: var(--form-range-slider-thumb-height); background-clip: var(--form-range-slider-thumb-bg-clip); background-color: var(--form-range-slider-thumb-bg-color); background-image: var(--form-range-slider-thumb-bg-image); border: var(--form-range-slider-thumb-border-style); border-width: var(--form-range-slider-thumb-border-width); border-color: var(--form-range-slider-thumb-border-color); border-radius: var(--form-range-slider-thumb-border-radius); box-shadow: var(--form-range-slider-thumb-box-shadow); } .form-range:hover::-moz-range-thumb { background-color: var(--form-range-slider-thumb-bg-color-hover); background-image: var(--form-range-slider-thumb-bg-image-hover); border-color: var(--form-range-slider-thumb-border-color-hover); box-shadow: var(--form-range-slider-thumb-box-shadow-hover); } .form-range:focus::-moz-range-thumb { border-color: var(--form-range-slider-thumb-border-color-focus); box-shadow: var(--form-range-slider-thumb-box-shadow-focus); outline: var(--form-range-slider-thumb-outline-focus); } /* Internet Explorer */ .form-range::-ms-track { appearance: none; } .form-range::-ms-track { width: var(--form-range-slider-track-width); height: var(--form-range-slider-track-height); background-clip: var(--form-range-slider-track-bg-clip); background-color: var(--form-range-slider-track-bg-color); background-image: var(--form-range-slider-track-bg-image); border: var(--form-range-slider-track-border-style); border-width: var(--form-range-slider-track-border-width); border-color: var(--form-range-slider-track-border-color); border-radius: var(--form-range-slider-track-border-radius); box-shadow: var(--form-range-slider-track-box-shadow); } .form-range::-ms-thumb { box-sizing: border-box; -moz-appearance: none; appearance: none; } .form-range::-ms-thumb { width: calc(var(--form-range-slider-thumb-width) - 0.4rem); /* This fixes a weird issue in IE, where the thumb appears bigger. */ height: calc(var(--form-range-slider-thumb-height) - 0.4rem); /* This fixes a weird issue in IE, where the thumb appears bigger. */ background-clip: var(--form-range-slider-thumb-bg-clip); background-color: var(--form-range-slider-thumb-bg-color); background-image: var(--form-range-slider-thumb-bg-image); border: var(--form-range-slider-thumb-border-style); border-width: var(--form-range-slider-thumb-border-width); border-color: var(--form-range-slider-thumb-border-color); border-radius: var(--form-range-slider-thumb-border-radius); box-shadow: var(--form-range-slider-thumb-box-shadow); } .form-range:hover::-ms-thumb { background-color: var(--form-range-slider-thumb-bg-color-hover); background-image: var(--form-range-slider-thumb-bg-image-hover); border-color: var(--form-range-slider-thumb-border-color-hover); box-shadow: var(--form-range-slider-thumb-box-shadow-hover); } .form-range:focus::-ms-thumb { border-color: var(--form-range-slider-thumb-border-color-focus); box-shadow: var(--form-range-slider-thumb-box-shadow-focus); outline: var(--form-range-slider-thumb-outline-focus); } .form-range::-ms-fill-lower { background-color: transparent; border-radius: var(--form-range-border-radius); } .form-range::-ms-fill-upper { background-color: transparent; border-radius: var(--form-range-border-radius); } /* Range group */ .range-group { position: relative; display: flex; flex-wrap: wrap; align-items: center; width: 100%; } .range-group > .form-range { position: relative; flex: 1 1 0%; min-width: 0; margin-bottom: 0; } .range-group > .form-range, .range-group > .range-group-label { margin-left: var(--form-range-group-item-margin); margin-right: var(--form-range-group-item-margin); } .range-group > .form-range:first-child, .range-group > .range-group-label:first-child { margin-left: 0; } .range-group > .form-range:last-child, .range-group > .range-group-label:last-child { margin-right: 0; } /** * ---------------------------------------------------------------------------- * [ Input group ] * ---------------------------------------------------------------------------- */ .input-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; height: var(--input-group-height); } .input-group-sm { height: var(--small-input-group-height); } .input-group-lg { height: var(--large-input-group-height); } .input-group > .form-control, .input-group > .form-select { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; } .input-group > .btn, .input-group > .dropdown > .btn, .input-group > .dropup > .btn, .input-group > .dropend > .btn, .input-group > .dropstart > .btn { position: relative; } /* Input group text */ .input-group-text { position: relative; display: flex; align-items: center; justify-content: center; align-self: stretch; white-space: nowrap; font-size: var(--input-group-text-font-size); line-height: var(--input-group-text-line-height); font-weight: var(--input-group-text-font-weight); -webkit-font-smoothing: var(--input-group-text-webkit-font-smoothing); -moz-osx-font-smoothing: var(--input-group-text-moz-osx-font-smoothing); padding: var(--input-group-text-padding); background-clip: var(--input-group-text-bg-clip); color: var(--input-group-text-text-color); background-color: var(--input-group-text-bg-color); background-image: var(--input-group-text-bg-image); border: var(--input-group-text-border-style); border-width: var(--input-group-text-border-width); border-color: var(--input-group-text-border-color); border-radius: var(--input-group-text-border-radius); box-shadow: var(--input-group-text-box-shadow); } .input-group-sm > .input-group-text { font-size: var(--small-input-group-text-font-size); line-height: var(--small-input-group-text-line-height); padding: var(--small-input-group-text-padding); } .input-group-lg > .input-group-text { font-size: var(--large-input-group-text-font-size); line-height: var(--large-input-group-text-line-height); padding: var(--large-input-group-text-padding); } /* Input group margin adjustments */ .input-group > .form-control:not(:first-child), .input-group > .form-select:not(:first-child) { margin-left: calc((-1) * var(--input-border-width)); } .input-group > .btn:not(:first-child), .input-group > .dropdown:not(:first-child), .input-group > .dropup:not(:first-child), .input-group > .dropend:not(:first-child), .input-group > .dropstart:not(:first-child) { margin-left: calc((-1) * var(--button-border-width)); } .input-group > .input-group-text:not(:first-child) { margin-left: calc((-1) * var(--input-group-text-border-width)); } /* Input group border adjustments */ .input-group > .form-control:not(:first-child), .input-group > .form-select:not(:first-child), .input-group > .btn:not(:first-child), .input-group > .dropdown:not(:first-child) > .btn, .input-group > .dropup:not(:first-child) > .btn, .input-group > .dropend:not(:first-child) > .btn, .input-group > .dropstart:not(:first-child) > .btn, .input-group > .input-group-text:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group > .form-control:not(:last-child), .input-group > .form-select:not(:last-child), .input-group > .btn:not(:last-child), .input-group > .dropdown:not(:last-child) > .btn, .input-group > .dropup:not(:last-child) > .btn, .input-group > .dropend:not(:last-child) > .btn, .input-group > .dropstart:not(:last-child) > .btn, .input-group > .input-group-text:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } /* Input group z-indices */ .input-group > .form-control, .input-group > .form-select { z-index: var(--input-group-input-z-index); } .input-group > .form-control:hover, .input-group > .form-select:hover { z-index: var(--input-group-input-z-index-hover); } .input-group > .form-control:focus, .input-group > .form-select:focus { z-index: var(--input-group-input-z-index-focus); } .input-group > .form-control.is-invalid, .input-group > .form-select.is-invalid { z-index: var(--input-group-input-invalid-z-index); } .input-group > .form-control.is-invalid:hover, .input-group > .form-select.is-invalid:hover { z-index: var(--input-group-input-invalid-z-index-hover); } .input-group > .form-control.is-invalid:focus, .input-group > .form-select.is-invalid:focus { z-index: var(--input-group-input-invalid-z-index-focus); } .input-group > .btn, .input-group > .dropdown > .btn, .input-group > .dropup > .btn, .input-group > .dropend > .btn, .input-group > .dropstart > .btn { z-index: var(--input-group-button-z-index); } .input-group > .btn:hover, .input-group > .dropdown > .btn:hover, .input-group > .dropup > .btn:hover, .input-group > .dropend > .btn:hover, .input-group > .dropstart > .btn:hover { z-index: var(--input-group-button-z-index-hover); } .input-group > .btn:active, .input-group > .dropdown > .btn:active, .input-group > .dropup > .btn:active, .input-group > .dropend > .btn:active, .input-group > .dropstart > .btn:active { z-index: var(--input-group-button-z-index-active); } .input-group > .btn:focus-visible, .input-group > .dropdown > .btn:focus-visible, .input-group > .dropup > .btn:focus-visible, .input-group > .dropend > .btn:focus-visible, .input-group > .dropstart > .btn:focus-visible { z-index: var(--input-group-button-z-index-focus-visible); } .input-group > .btn-primary, .input-group > .dropdown > .btn-primary, .input-group > .dropup > .btn-primary, .input-group > .dropend > .btn-primary, .input-group > .dropstart > .btn-primary, .input-group > .btn-secondary, .input-group > .dropdown > .btn-secondary, .input-group > .dropup > .btn-secondary, .input-group > .dropend > .btn-secondary, .input-group > .dropstart > .btn-secondary, .input-group > .btn-success, .input-group > .dropdown > .btn-success, .input-group > .dropup > .btn-success, .input-group > .dropend > .btn-success, .input-group > .dropstart > .btn-success, .input-group > .btn-warning, .input-group > .dropdown > .btn-warning, .input-group > .dropup > .btn-warning, .input-group > .dropend > .btn-warning, .input-group > .dropstart > .btn-warning, .input-group > .btn-danger, .input-group > .dropdown > .btn-danger, .input-group > .dropup > .btn-danger, .input-group > .dropend > .btn-danger, .input-group > .dropstart > .btn-danger { z-index: var(--input-group-button-contextual-z-index); } .input-group > .btn-primary:hover, .input-group > .dropdown > .btn-primary:hover, .input-group > .dropup > .btn-primary:hover, .input-group > .dropend > .btn-primary:hover, .input-group > .dropstart > .btn-primary:hover, .input-group > .btn-secondary:hover, .input-group > .dropdown > .btn-secondary:hover, .input-group > .dropup > .btn-secondary:hover, .input-group > .dropend > .btn-secondary:hover, .input-group > .dropstart > .btn-secondary:hover, .input-group > .btn-success:hover, .input-group > .dropdown > .btn-success:hover, .input-group > .dropup > .btn-success:hover, .input-group > .dropend > .btn-success:hover, .input-group > .dropstart > .btn-success:hover, .input-group > .btn-warning:hover, .input-group > .dropdown > .btn-warning:hover, .input-group > .dropup > .btn-warning:hover, .input-group > .dropend > .btn-warning:hover, .input-group > .dropstart > .btn-warning:hover, .input-group > .btn-danger:hover, .input-group > .dropdown > .btn-danger:hover, .input-group > .dropup > .btn-danger:hover, .input-group > .dropend > .btn-danger:hover, .input-group > .dropstart > .btn-danger:hover { z-index: var(--input-group-button-contextual-z-index-hover); } .input-group > .btn-primary:active, .input-group > .dropdown > .btn-primary:active, .input-group > .dropup > .btn-primary:active, .input-group > .dropend > .btn-primary:active, .input-group > .dropstart > .btn-primary:active, .input-group > .btn-secondary:active, .input-group > .dropdown > .btn-secondary:active, .input-group > .dropup > .btn-secondary:active, .input-group > .dropend > .btn-secondary:active, .input-group > .dropstart > .btn-secondary:active, .input-group > .btn-success:active, .input-group > .dropdown > .btn-success:active, .input-group > .dropup > .btn-success:active, .input-group > .dropend > .btn-success:active, .input-group > .dropstart > .btn-success:active, .input-group > .btn-warning:active, .input-group > .dropdown > .btn-warning:active, .input-group > .dropup > .btn-warning:active, .input-group > .dropend > .btn-warning:active, .input-group > .dropstart > .btn-warning:active, .input-group > .btn-danger:active, .input-group > .dropdown > .btn-danger:active, .input-group > .dropup > .btn-danger:active, .input-group > .dropend > .btn-danger:active, .input-group > .dropstart > .btn-danger:active { z-index: var(--input-group-button-contextual-z-index-active); } .input-group > .btn-primary:focus-visible, .input-group > .dropdown > .btn-primary:focus-visible, .input-group > .dropup > .btn-primary:focus-visible, .input-group > .dropend > .btn-primary:focus-visible, .input-group > .dropstart > .btn-primary:focus-visible, .input-group > .btn-secondary:focus-visible, .input-group > .dropdown > .btn-secondary:focus-visible, .input-group > .dropup > .btn-secondary:focus-visible, .input-group > .dropend > .btn-secondary:focus-visible, .input-group > .dropstart > .btn-secondary:focus-visible, .input-group > .btn-success:focus-visible, .input-group > .dropdown > .btn-success:focus-visible, .input-group > .dropup > .btn-success:focus-visible, .input-group > .dropend > .btn-success:focus-visible, .input-group > .dropstart > .btn-success:focus-visible, .input-group > .btn-warning:focus-visible, .input-group > .dropdown > .btn-warning:focus-visible, .input-group > .dropup > .btn-warning:focus-visible, .input-group > .dropend > .btn-warning:focus-visible, .input-group > .dropstart > .btn-warning:focus-visible, .input-group > .btn-danger:focus-visible, .input-group > .dropdown > .btn-danger:focus-visible, .input-group > .dropup > .btn-danger:focus-visible, .input-group > .dropend > .btn-danger:focus-visible, .input-group > .dropstart > .btn-danger:focus-visible { z-index: var(--input-group-button-contextual-z-index-focus-visible); } /** * ---------------------------------------------------------------------------- * [ Form inline ] * ---------------------------------------------------------------------------- */ .form-inline, .form-inline > .form-group { display: flex; flex-flow: row wrap; align-items: center; } .form-inline > .form-group { width: 100%; } .form-inline > .form-control, .form-inline > .form-select, .form-inline > .form-range, .form-inline > .input-group, .form-inline > .form-group > .form-control, .form-inline > .form-group > .form-select, .form-inline > .form-group > .form-range, .form-inline > .form-group > .input-group { position: relative; flex: 1 1 0%; min-width: 0; } .form-inline > .form-check, .form-inline > .form-file, .form-inline > .form-label, .form-inline > .form-text, .form-inline > .invalid-feedback, .form-inline > .form-group > .form-check, .form-inline > .form-group > .form-file, .form-inline > .form-group > .form-label, .form-inline > .form-group > .form-text, .form-inline > .form-group > .invalid-feedback { display: flex; align-items: center; min-width: 0; } .form-inline > .form-label, .form-inline > .form-text, .form-inline > .invalid-feedback, .form-inline > .form-group > .form-label, .form-inline > .form-group > .form-text, .form-inline > .form-group > .invalid-feedback { margin: 0; padding: 0; border: none; white-space: nowrap; } .form-inline > .form-control:not(:last-child), .form-inline > .form-select:not(:last-child), .form-inline > .form-range:not(:last-child), .form-inline > .input-group:not(:last-child), .form-inline > .form-check:not(:last-child), .form-inline > .form-file:not(:last-child), .form-inline > .btn:not(:last-child), .form-inline > .form-label:not(:last-child), .form-inline > .form-text:not(:last-child), .form-inline > .invalid-feedback:not(:last-child), .form-inline > .form-group > .form-control:not(:last-child), .form-inline > .form-group > .form-select:not(:last-child), .form-inline > .form-group > .form-range:not(:last-child), .form-inline > .form-group > .input-group:not(:last-child), .form-inline > .form-group > .form-check:not(:last-child), .form-inline > .form-group > .form-file:not(:last-child), .form-inline > .form-group > .btn:not(:last-child), .form-inline > .form-group > .form-label:not(:last-child), .form-inline > .form-group > .form-text:not(:last-child), .form-inline > .form-group > .invalid-feedback:not(:last-child) { margin-right: var(--form-inline-item-horizontal-margin); } .form-inline-sm > .form-control:not(:last-child), .form-inline-sm > .form-select:not(:last-child), .form-inline-sm > .form-range:not(:last-child), .form-inline-sm > .input-group:not(:last-child), .form-inline-sm > .form-check:not(:last-child), .form-inline-sm > .form-file:not(:last-child), .form-inline-sm > .btn:not(:last-child), .form-inline-sm > .form-label:not(:last-child), .form-inline-sm > .form-text:not(:last-child), .form-inline-sm > .invalid-feedback:not(:last-child) { margin-bottom: var(--form-inline-item-vertical-margin); } @media (min-width: 577px) { .form-inline-sm, .form-inline-sm > .form-group { display: flex; flex-flow: row wrap; align-items: center; } .form-inline-sm > .form-group { width: 100%; } .form-inline-sm > .form-control, .form-inline-sm > .form-select, .form-inline-sm > .form-range, .form-inline-sm > .input-group, .form-inline-sm > .form-group > .form-control, .form-inline-sm > .form-group > .form-select, .form-inline-sm > .form-group > .form-range, .form-inline-sm > .form-group > .input-group { position: relative; flex: 1 1 0%; min-width: 0; } .form-inline-sm > .form-check, .form-inline-sm > .form-file, .form-inline-sm > .form-label, .form-inline-sm > .form-text, .form-inline-sm > .invalid-feedback, .form-inline-sm > .form-group > .form-check, .form-inline-sm > .form-group > .form-file, .form-inline-sm > .form-group > .form-label, .form-inline-sm > .form-group > .form-text, .form-inline-sm > .form-group > .invalid-feedback { display: flex; align-items: center; min-width: 0; } .form-inline-sm > .form-label, .form-inline-sm > .form-text, .form-inline-sm > .invalid-feedback, .form-inline-sm > .form-group > .form-label, .form-inline-sm > .form-group > .form-text, .form-inline-sm > .form-group > .invalid-feedback { margin: 0; padding: 0; border: none; white-space: nowrap; } .form-inline-sm > .form-control:not(:last-child), .form-inline-sm > .form-select:not(:last-child), .form-inline-sm > .form-range:not(:last-child), .form-inline-sm > .input-group:not(:last-child), .form-inline-sm > .form-check:not(:last-child), .form-inline-sm > .form-file:not(:last-child), .form-inline-sm > .btn:not(:last-child), .form-inline-sm > .form-label:not(:last-child), .form-inline-sm > .form-text:not(:last-child), .form-inline-sm > .invalid-feedback:not(:last-child), .form-inline-sm > .form-group > .form-control:not(:last-child), .form-inline-sm > .form-group > .form-select:not(:last-child), .form-inline-sm > .form-group > .form-range:not(:last-child), .form-inline-sm > .form-group > .input-group:not(:last-child), .form-inline-sm > .form-group > .form-check:not(:last-child), .form-inline-sm > .form-group > .form-file:not(:last-child), .form-inline-sm > .form-group > .btn:not(:last-child), .form-inline-sm > .form-group > .form-label:not(:last-child), .form-inline-sm > .form-group > .form-text:not(:last-child), .form-inline-sm > .form-group > .invalid-feedback:not(:last-child) { margin-right: var(--form-inline-item-horizontal-margin); } .form-inline-sm > .form-control:not(:last-child), .form-inline-sm > .form-select:not(:last-child), .form-inline-sm > .form-range:not(:last-child), .form-inline-sm > .input-group:not(:last-child), .form-inline-sm > .form-check:not(:last-child), .form-inline-sm > .form-file:not(:last-child), .form-inline-sm > .btn:not(:last-child), .form-inline-sm > .form-label:not(:last-child), .form-inline-sm > .form-text:not(:last-child), .form-inline-sm > .invalid-feedback:not(:last-child) { margin-bottom: 0; } } .form-inline-md > .form-control:not(:last-child), .form-inline-md > .form-select:not(:last-child), .form-inline-md > .form-range:not(:last-child), .form-inline-md > .input-group:not(:last-child), .form-inline-md > .form-check:not(:last-child), .form-inline-md > .form-file:not(:last-child), .form-inline-md > .btn:not(:last-child), .form-inline-md > .form-label:not(:last-child), .form-inline-md > .form-text:not(:last-child), .form-inline-md > .invalid-feedback:not(:last-child) { margin-bottom: var(--form-inline-item-vertical-margin); } @media (min-width: 769px) { .form-inline-md, .form-inline-md > .form-group { display: flex; flex-flow: row wrap; align-items: center; } .form-inline-md > .form-group { width: 100%; } .form-inline-md > .form-control, .form-inline-md > .form-select, .form-inline-md > .form-range, .form-inline-md > .input-group, .form-inline-md > .form-group > .form-control, .form-inline-md > .form-group > .form-select, .form-inline-md > .form-group > .form-range, .form-inline-md > .form-group > .input-group { position: relative; flex: 1 1 0%; min-width: 0; } .form-inline-md > .form-check, .form-inline-md > .form-file, .form-inline-md > .form-label, .form-inline-md > .form-text, .form-inline-md > .invalid-feedback, .form-inline-md > .form-group > .form-check, .form-inline-md > .form-group > .form-file, .form-inline-md > .form-group > .form-label, .form-inline-md > .form-group > .form-text, .form-inline-md > .form-group > .invalid-feedback { display: flex; align-items: center; min-width: 0; } .form-inline-md > .form-label, .form-inline-md > .form-text, .form-inline-md > .invalid-feedback, .form-inline-md > .form-group > .form-label, .form-inline-md > .form-group > .form-text, .form-inline-md > .form-group > .invalid-feedback { margin: 0; padding: 0; border: none; white-space: nowrap; } .form-inline-md > .form-control:not(:last-child), .form-inline-md > .form-select:not(:last-child), .form-inline-md > .form-range:not(:last-child), .form-inline-md > .input-group:not(:last-child), .form-inline-md > .form-check:not(:last-child), .form-inline-md > .form-file:not(:last-child), .form-inline-md > .btn:not(:last-child), .form-inline-md > .form-label:not(:last-child), .form-inline-md > .form-text:not(:last-child), .form-inline-md > .invalid-feedback:not(:last-child), .form-inline-md > .form-group > .form-control:not(:last-child), .form-inline-md > .form-group > .form-select:not(:last-child), .form-inline-md > .form-group > .form-range:not(:last-child), .form-inline-md > .form-group > .input-group:not(:last-child), .form-inline-md > .form-group > .form-check:not(:last-child), .form-inline-md > .form-group > .form-file:not(:last-child), .form-inline-md > .form-group > .btn:not(:last-child), .form-inline-md > .form-group > .form-label:not(:last-child), .form-inline-md > .form-group > .form-text:not(:last-child), .form-inline-md > .form-group > .invalid-feedback:not(:last-child) { margin-right: var(--form-inline-item-horizontal-margin); } .form-inline-md > .form-control:not(:last-child), .form-inline-md > .form-select:not(:last-child), .form-inline-md > .form-range:not(:last-child), .form-inline-md > .input-group:not(:last-child), .form-inline-md > .form-check:not(:last-child), .form-inline-md > .form-file:not(:last-child), .form-inline-md > .btn:not(:last-child), .form-inline-md > .form-label:not(:last-child), .form-inline-md > .form-text:not(:last-child), .form-inline-md > .invalid-feedback:not(:last-child) { margin-bottom: 0; } } .form-inline-lg > .form-control:not(:last-child), .form-inline-lg > .form-select:not(:last-child), .form-inline-lg > .form-range:not(:last-child), .form-inline-lg > .input-group:not(:last-child), .form-inline-lg > .form-check:not(:last-child), .form-inline-lg > .form-file:not(:last-child), .form-inline-lg > .btn:not(:last-child), .form-inline-lg > .form-label:not(:last-child), .form-inline-lg > .form-text:not(:last-child), .form-inline-lg > .invalid-feedback:not(:last-child) { margin-bottom: var(--form-inline-item-vertical-margin); } @media (min-width: 993px) { .form-inline-lg, .form-inline-lg > .form-group { display: flex; flex-flow: row wrap; align-items: center; } .form-inline-lg > .form-group { width: 100%; } .form-inline-lg > .form-control, .form-inline-lg > .form-select, .form-inline-lg > .form-range, .form-inline-lg > .input-group, .form-inline-lg > .form-group > .form-control, .form-inline-lg > .form-group > .form-select, .form-inline-lg > .form-group > .form-range, .form-inline-lg > .form-group > .input-group { position: relative; flex: 1 1 0%; min-width: 0; } .form-inline-lg > .form-check, .form-inline-lg > .form-file, .form-inline-lg > .form-label, .form-inline-lg > .form-text, .form-inline-lg > .invalid-feedback, .form-inline-lg > .form-group > .form-check, .form-inline-lg > .form-group > .form-file, .form-inline-lg > .form-group > .form-label, .form-inline-lg > .form-group > .form-text, .form-inline-lg > .form-group > .invalid-feedback { display: flex; align-items: center; min-width: 0; } .form-inline-lg > .form-label, .form-inline-lg > .form-text, .form-inline-lg > .invalid-feedback, .form-inline-lg > .form-group > .form-label, .form-inline-lg > .form-group > .form-text, .form-inline-lg > .form-group > .invalid-feedback { margin: 0; padding: 0; border: none; white-space: nowrap; } .form-inline-lg > .form-control:not(:last-child), .form-inline-lg > .form-select:not(:last-child), .form-inline-lg > .form-range:not(:last-child), .form-inline-lg > .input-group:not(:last-child), .form-inline-lg > .form-check:not(:last-child), .form-inline-lg > .form-file:not(:last-child), .form-inline-lg > .btn:not(:last-child), .form-inline-lg > .form-label:not(:last-child), .form-inline-lg > .form-text:not(:last-child), .form-inline-lg > .invalid-feedback:not(:last-child), .form-inline-lg > .form-group > .form-control:not(:last-child), .form-inline-lg > .form-group > .form-select:not(:last-child), .form-inline-lg > .form-group > .form-range:not(:last-child), .form-inline-lg > .form-group > .input-group:not(:last-child), .form-inline-lg > .form-group > .form-check:not(:last-child), .form-inline-lg > .form-group > .form-file:not(:last-child), .form-inline-lg > .form-group > .btn:not(:last-child), .form-inline-lg > .form-group > .form-label:not(:last-child), .form-inline-lg > .form-group > .form-text:not(:last-child), .form-inline-lg > .form-group > .invalid-feedback:not(:last-child) { margin-right: var(--form-inline-item-horizontal-margin); } .form-inline-lg > .form-control:not(:last-child), .form-inline-lg > .form-select:not(:last-child), .form-inline-lg > .form-range:not(:last-child), .form-inline-lg > .input-group:not(:last-child), .form-inline-lg > .form-check:not(:last-child), .form-inline-lg > .form-file:not(:last-child), .form-inline-lg > .btn:not(:last-child), .form-inline-lg > .form-label:not(:last-child), .form-inline-lg > .form-text:not(:last-child), .form-inline-lg > .invalid-feedback:not(:last-child) { margin-bottom: 0; } } .form-inline-xl > .form-control:not(:last-child), .form-inline-xl > .form-select:not(:last-child), .form-inline-xl > .form-range:not(:last-child), .form-inline-xl > .input-group:not(:last-child), .form-inline-xl > .form-check:not(:last-child), .form-inline-xl > .form-file:not(:last-child), .form-inline-xl > .btn:not(:last-child), .form-inline-xl > .form-label:not(:last-child), .form-inline-xl > .form-text:not(:last-child), .form-inline-xl > .invalid-feedback:not(:last-child) { margin-bottom: var(--form-inline-item-vertical-margin); } @media (min-width: 1201px) { .form-inline-xl, .form-inline-xl > .form-group { display: flex; flex-flow: row wrap; align-items: center; } .form-inline-xl > .form-group { width: 100%; } .form-inline-xl > .form-control, .form-inline-xl > .form-select, .form-inline-xl > .form-range, .form-inline-xl > .input-group, .form-inline-xl > .form-group > .form-control, .form-inline-xl > .form-group > .form-select, .form-inline-xl > .form-group > .form-range, .form-inline-xl > .form-group > .input-group { position: relative; flex: 1 1 0%; min-width: 0; } .form-inline-xl > .form-check, .form-inline-xl > .form-file, .form-inline-xl > .form-label, .form-inline-xl > .form-text, .form-inline-xl > .invalid-feedback, .form-inline-xl > .form-group > .form-check, .form-inline-xl > .form-group > .form-file, .form-inline-xl > .form-group > .form-label, .form-inline-xl > .form-group > .form-text, .form-inline-xl > .form-group > .invalid-feedback { display: flex; align-items: center; min-width: 0; } .form-inline-xl > .form-label, .form-inline-xl > .form-text, .form-inline-xl > .invalid-feedback, .form-inline-xl > .form-group > .form-label, .form-inline-xl > .form-group > .form-text, .form-inline-xl > .form-group > .invalid-feedback { margin: 0; padding: 0; border: none; white-space: nowrap; } .form-inline-xl > .form-control:not(:last-child), .form-inline-xl > .form-select:not(:last-child), .form-inline-xl > .form-range:not(:last-child), .form-inline-xl > .input-group:not(:last-child), .form-inline-xl > .form-check:not(:last-child), .form-inline-xl > .form-file:not(:last-child), .form-inline-xl > .btn:not(:last-child), .form-inline-xl > .form-label:not(:last-child), .form-inline-xl > .form-text:not(:last-child), .form-inline-xl > .invalid-feedback:not(:last-child), .form-inline-xl > .form-group > .form-control:not(:last-child), .form-inline-xl > .form-group > .form-select:not(:last-child), .form-inline-xl > .form-group > .form-range:not(:last-child), .form-inline-xl > .form-group > .input-group:not(:last-child), .form-inline-xl > .form-group > .form-check:not(:last-child), .form-inline-xl > .form-group > .form-file:not(:last-child), .form-inline-xl > .form-group > .btn:not(:last-child), .form-inline-xl > .form-group > .form-label:not(:last-child), .form-inline-xl > .form-group > .form-text:not(:last-child), .form-inline-xl > .form-group > .invalid-feedback:not(:last-child) { margin-right: var(--form-inline-item-horizontal-margin); } .form-inline-xl > .form-control:not(:last-child), .form-inline-xl > .form-select:not(:last-child), .form-inline-xl > .form-range:not(:last-child), .form-inline-xl > .input-group:not(:last-child), .form-inline-xl > .form-check:not(:last-child), .form-inline-xl > .form-file:not(:last-child), .form-inline-xl > .btn:not(:last-child), .form-inline-xl > .form-label:not(:last-child), .form-inline-xl > .form-text:not(:last-child), .form-inline-xl > .invalid-feedback:not(:last-child) { margin-bottom: 0; } } .form-inline-xxl > .form-control:not(:last-child), .form-inline-xxl > .form-select:not(:last-child), .form-inline-xxl > .form-range:not(:last-child), .form-inline-xxl > .input-group:not(:last-child), .form-inline-xxl > .form-check:not(:last-child), .form-inline-xxl > .form-file:not(:last-child), .form-inline-xxl > .btn:not(:last-child), .form-inline-xxl > .form-label:not(:last-child), .form-inline-xxl > .form-text:not(:last-child), .form-inline-xxl > .invalid-feedback:not(:last-child) { margin-bottom: var(--form-inline-item-vertical-margin); } @media (min-width: 1401px) { .form-inline-xxl, .form-inline-xxl > .form-group { display: flex; flex-flow: row wrap; align-items: center; } .form-inline-xxl > .form-group { width: 100%; } .form-inline-xxl > .form-control, .form-inline-xxl > .form-select, .form-inline-xxl > .form-range, .form-inline-xxl > .input-group, .form-inline-xxl > .form-group > .form-control, .form-inline-xxl > .form-group > .form-select, .form-inline-xxl > .form-group > .form-range, .form-inline-xxl > .form-group > .input-group { position: relative; flex: 1 1 0%; min-width: 0; } .form-inline-xxl > .form-check, .form-inline-xxl > .form-file, .form-inline-xxl > .form-label, .form-inline-xxl > .form-text, .form-inline-xxl > .invalid-feedback, .form-inline-xxl > .form-group > .form-check, .form-inline-xxl > .form-group > .form-file, .form-inline-xxl > .form-group > .form-label, .form-inline-xxl > .form-group > .form-text, .form-inline-xxl > .form-group > .invalid-feedback { display: flex; align-items: center; min-width: 0; } .form-inline-xxl > .form-label, .form-inline-xxl > .form-text, .form-inline-xxl > .invalid-feedback, .form-inline-xxl > .form-group > .form-label, .form-inline-xxl > .form-group > .form-text, .form-inline-xxl > .form-group > .invalid-feedback { margin: 0; padding: 0; border: none; white-space: nowrap; } .form-inline-xxl > .form-control:not(:last-child), .form-inline-xxl > .form-select:not(:last-child), .form-inline-xxl > .form-range:not(:last-child), .form-inline-xxl > .input-group:not(:last-child), .form-inline-xxl > .form-check:not(:last-child), .form-inline-xxl > .form-file:not(:last-child), .form-inline-xxl > .btn:not(:last-child), .form-inline-xxl > .form-label:not(:last-child), .form-inline-xxl > .form-text:not(:last-child), .form-inline-xxl > .invalid-feedback:not(:last-child), .form-inline-xxl > .form-group > .form-control:not(:last-child), .form-inline-xxl > .form-group > .form-select:not(:last-child), .form-inline-xxl > .form-group > .form-range:not(:last-child), .form-inline-xxl > .form-group > .input-group:not(:last-child), .form-inline-xxl > .form-group > .form-check:not(:last-child), .form-inline-xxl > .form-group > .form-file:not(:last-child), .form-inline-xxl > .form-group > .btn:not(:last-child), .form-inline-xxl > .form-group > .form-label:not(:last-child), .form-inline-xxl > .form-group > .form-text:not(:last-child), .form-inline-xxl > .form-group > .invalid-feedback:not(:last-child) { margin-right: var(--form-inline-item-horizontal-margin); } .form-inline-xxl > .form-control:not(:last-child), .form-inline-xxl > .form-select:not(:last-child), .form-inline-xxl > .form-range:not(:last-child), .form-inline-xxl > .input-group:not(:last-child), .form-inline-xxl > .form-check:not(:last-child), .form-inline-xxl > .form-file:not(:last-child), .form-inline-xxl > .btn:not(:last-child), .form-inline-xxl > .form-label:not(:last-child), .form-inline-xxl > .form-text:not(:last-child), .form-inline-xxl > .invalid-feedback:not(:last-child) { margin-bottom: 0; } } /** * ---------------------------------------------------------------------------- * [ Dropdown ] * ---------------------------------------------------------------------------- */ .dropdown, .dropup, .dropstart, .dropend { position: relative; display: inline-block; } /* Dropdown menu */ .dropdown-menu { list-style: none; position: absolute; display: none; opacity: 0; z-index: 10; text-align: left; transition: opacity 0.25s; width: var(--dropdown-menu-width); min-width: var(--dropdown-menu-min-width); padding: var(--dropdown-menu-padding); margin: var(--dropdown-menu-margin); background-clip: var(--dropdown-menu-bg-clip); color: var(--dropdown-menu-text-color); background-color: var(--dropdown-menu-bg-color); background-image: var(--dropdown-menu-bg-image); border: var(--dropdown-menu-border-style); border-width: var(--dropdown-menu-border-width); border-color: var(--dropdown-menu-border-color); border-radius: var(--dropdown-menu-border-radius); box-shadow: var(--dropdown-menu-box-shadow); } @media (prefers-reduced-motion) { .dropdown-menu { transition: 0s; } } /* Showing the dropdown menu */ .dropdown-menu.set-d-block, .toggle-on-hover:hover > .dropdown-menu { display: block; } .dropdown-menu.show, .toggle-on-hover:hover > .dropdown-menu { opacity: 1; } /* Dropdown arrow (::before for border, ::after for background) */ .with-arrow > .dropdown-menu::before, .with-arrow > .dropdown-menu::after { content: " "; position: absolute; display: none; width: 0; height: 0; opacity: 0; z-index: 10; transition: opacity 0.075s; border: var(--dropdown-arrow-size) solid transparent; } @media (prefers-reduced-motion) { .with-arrow > .dropdown-menu::before, .with-arrow > .dropdown-menu::after { transition: 0s; } } /* Showing the dropdown arrow (::before for border, ::after for background) */ .with-arrow > .dropdown-menu.set-d-block::before, .with-arrow > .dropdown-menu.set-d-block::after, .with-arrow.toggle-on-hover:hover > .dropdown-menu::before, .with-arrow.toggle-on-hover:hover > .dropdown-menu::after { display: block; } .with-arrow > .dropdown-menu.show::before, .with-arrow > .dropdown-menu.show::after, .with-arrow.toggle-on-hover:hover > .dropdown-menu::before, .with-arrow.toggle-on-hover:hover > .dropdown-menu::after { opacity: 1; } /* Normal dropdown */ .dropdown > .dropdown-menu { top: auto; right: auto; bottom: 0; left: 0; transform: translateY(100%); } .dropdown.with-arrow > .dropdown-menu { bottom: var(--dropdown-arrow-size-negative); } .dropdown.with-arrow > .dropdown-menu::before { border-bottom-color: var(--dropdown-arrow-border-color); border-top: 0; top: var(--dropdown-arrow-size-negative); } .dropdown.with-arrow > .dropdown-menu::after { border-bottom-color: var(--dropdown-arrow-bg-color); border-top: 0; top: var(--dropdown-arrow-size-negative-plus-inner-spacing); } .dropdown.with-arrow > .dropdown-menu::before, .dropdown.with-arrow > .dropdown-menu::after { left: var(--dropdown-arrow-horizontal-spacing); right: auto; } /* Dropup */ .dropup > .dropdown-menu { top: 0; right: auto; bottom: auto; left: 0; transform: translateY(-100%); } .dropup.with-arrow > .dropdown-menu { top: var(--dropdown-arrow-size-negative); } .dropup.with-arrow > .dropdown-menu::before { border-top-color: var(--dropdown-arrow-border-color); border-bottom: 0; bottom: var(--dropdown-arrow-size-negative); } .dropup.with-arrow > .dropdown-menu::after { border-top-color: var(--dropdown-arrow-bg-color); border-bottom: 0; bottom: var(--dropdown-arrow-size-negative-plus-inner-spacing); } .dropup.with-arrow > .dropdown-menu::before, .dropup.with-arrow > .dropdown-menu::after { left: var(--dropdown-arrow-horizontal-spacing); right: auto; } /* Dropend */ .dropend > .dropdown-menu { top: 0; right: 0; bottom: auto; left: auto; transform: translateX(100%); } .dropend.with-arrow > .dropdown-menu { right: var(--dropdown-arrow-size-negative); } .dropend.with-arrow > .dropdown-menu::before { border-right-color: var(--dropdown-arrow-border-color); border-left: 0; left: var(--dropdown-arrow-size-negative); } .dropend.with-arrow > .dropdown-menu::after { border-right-color: var(--dropdown-arrow-bg-color); border-left: 0; left: var(--dropdown-arrow-size-negative-plus-inner-spacing); } .dropend.with-arrow > .dropdown-menu::before, .dropend.with-arrow > .dropdown-menu::after { top: var(--dropdown-arrow-vertical-spacing); bottom: auto; } /* Dropstart */ .dropstart > .dropdown-menu { top: 0; right: auto; bottom: auto; left: 0; transform: translateX(-100%); } .dropstart.with-arrow > .dropdown-menu { left: var(--dropdown-arrow-size-negative); } .dropstart.with-arrow > .dropdown-menu::before { border-left-color: var(--dropdown-arrow-border-color); border-right: 0; right: var(--dropdown-arrow-size-negative); } .dropstart.with-arrow > .dropdown-menu::after { border-left-color: var(--dropdown-arrow-bg-color); border-right: 0; right: var(--dropdown-arrow-size-negative-plus-inner-spacing); } .dropstart.with-arrow > .dropdown-menu::before, .dropstart.with-arrow > .dropdown-menu::after { top: var(--dropdown-arrow-vertical-spacing); bottom: auto; } /* Responsive menu placements */ /* Normal dropdown */ .dropdown > .dropdown-menu-center { top: auto; right: auto; bottom: 0; left: 50%; transform: translate(-50%, 100%); } .dropdown.with-arrow > .dropdown-menu-center::before, .dropdown.with-arrow > .dropdown-menu-center::after { left: calc(50% - var(--dropdown-arrow-size)); right: auto; } .dropdown > .dropdown-menu-end { top: auto; right: 0; bottom: 0; left: auto; transform: translateY(100%); } .dropdown.with-arrow > .dropdown-menu-end::before, .dropdown.with-arrow > .dropdown-menu-end::after { left: auto; right: var(--dropdown-arrow-horizontal-spacing); } /* Dropup */ .dropup > .dropdown-menu-center { top: 0; right: auto; bottom: auto; left: 50%; transform: translate(-50%, -100%); } .dropup.with-arrow > .dropdown-menu-center::before, .dropup.with-arrow > .dropdown-menu-center::after { left: calc(50% - var(--dropdown-arrow-size)); right: auto; } .dropup > .dropdown-menu-end { top: 0; right: 0; bottom: auto; left: auto; transform: translateY(-100%); } .dropup.with-arrow > .dropdown-menu-end::before, .dropup.with-arrow > .dropdown-menu-end::after { left: auto; right: var(--dropdown-arrow-horizontal-spacing); } /* Dropend */ .dropend > .dropdown-menu-center { top: 50%; right: 0; bottom: auto; left: auto; transform: translate(100%, -50%); } .dropend.with-arrow > .dropdown-menu-center::before, .dropend.with-arrow > .dropdown-menu-center::after { top: calc(50% - var(--dropdown-arrow-size)); bottom: auto; } .dropend > .dropdown-menu-bottom { top: auto; right: 0; bottom: 0; left: auto; transform: translateX(100%); } .dropend.with-arrow > .dropdown-menu-bottom::before, .dropend.with-arrow > .dropdown-menu-bottom::after { top: auto; bottom: var(--dropdown-arrow-vertical-spacing); } /* Dropstart */ .dropstart > .dropdown-menu-center { top: 50%; right: auto; bottom: auto; left: 0; transform: translate(-100%, -50%); } .dropstart.with-arrow > .dropdown-menu-center::before, .dropstart.with-arrow > .dropdown-menu-center::after { top: calc(50% - var(--dropdown-arrow-size)); bottom: auto; } .dropstart > .dropdown-menu-bottom { top: auto; right: auto; bottom: 0; left: 0; transform: translateX(-100%); } .dropstart.with-arrow > .dropdown-menu-bottom::before, .dropstart.with-arrow > .dropdown-menu-bottom::after { top: auto; bottom: var(--dropdown-arrow-vertical-spacing); } @media (min-width: 577px) { /* Normal dropdown */ .dropdown > .dropdown-menu-sm-start { top: auto; right: auto; bottom: 0; left: 0; transform: translateY(100%); } .dropdown.with-arrow > .dropdown-menu-sm-start::before, .dropdown.with-arrow > .dropdown-menu-sm-start::after { left: var(--dropdown-arrow-horizontal-spacing); right: auto; } .dropdown > .dropdown-menu-sm-center { top: auto; right: auto; bottom: 0; left: 50%; transform: translate(-50%, 100%); } .dropdown.with-arrow > .dropdown-menu-sm-center::before, .dropdown.with-arrow > .dropdown-menu-sm-center::after { left: calc(50% - var(--dropdown-arrow-size)); right: auto; } .dropdown > .dropdown-menu-sm-end { top: auto; right: 0; bottom: 0; left: auto; transform: translateY(100%); } .dropdown.with-arrow > .dropdown-menu-sm-end::before, .dropdown.with-arrow > .dropdown-menu-sm-end::after { left: auto; right: var(--dropdown-arrow-horizontal-spacing); } /* Dropup */ .dropup > .dropdown-menu-sm-start { top: 0; right: auto; bottom: auto; left: 0; transform: translateY(-100%); } .dropup.with-arrow > .dropdown-menu-sm-start::before, .dropup.with-arrow > .dropdown-menu-sm-start::after { left: var(--dropdown-arrow-horizontal-spacing); right: auto; } .dropup > .dropdown-menu-sm-center { top: 0; right: auto; bottom: auto; left: 50%; transform: translate(-50%, -100%); } .dropup.with-arrow > .dropdown-menu-sm-center::before, .dropup.with-arrow > .dropdown-menu-sm-center::after { left: calc(50% - var(--dropdown-arrow-size)); right: auto; } .dropup > .dropdown-menu-sm-end { top: 0; right: 0; bottom: auto; left: auto; transform: translateY(-100%); } .dropup.with-arrow > .dropdown-menu-sm-end::before, .dropup.with-arrow > .dropdown-menu-sm-end::after { left: auto; right: var(--dropdown-arrow-horizontal-spacing); } /* Dropend */ .dropend > .dropdown-menu-sm-top { top: 0; right: 0; bottom: auto; left: auto; transform: translateX(100%); } .dropend.with-arrow > .dropdown-menu-sm-top::before, .dropend.with-arrow > .dropdown-menu-sm-top::after { top: var(--dropdown-arrow-vertical-spacing); bottom: auto; } .dropend > .dropdown-menu-sm-center { top: 50%; right: 0; bottom: auto; left: auto; transform: translate(100%, -50%); } .dropend.with-arrow > .dropdown-menu-sm-center::before, .dropend.with-arrow > .dropdown-menu-sm-center::after { top: calc(50% - var(--dropdown-arrow-size)); bottom: auto; } .dropend > .dropdown-menu-sm-bottom { top: auto; right: 0; bottom: 0; left: auto; transform: translateX(100%); } .dropend.with-arrow > .dropdown-menu-sm-bottom::before, .dropend.with-arrow > .dropdown-menu-sm-bottom::after { top: auto; bottom: var(--dropdown-arrow-vertical-spacing); } /* Dropstart */ .dropstart > .dropdown-menu-sm-top { top: 0; right: auto; bottom: auto; left: 0; transform: translateX(-100%); } .dropstart.with-arrow > .dropdown-menu-sm-top::before, .dropstart.with-arrow > .dropdown-menu-sm-top::after { top: var(--dropdown-arrow-vertical-spacing); bottom: auto; } .dropstart > .dropdown-menu-sm-center { top: 50%; right: auto; bottom: auto; left: 0; transform: translate(-100%, -50%); } .dropstart.with-arrow > .dropdown-menu-sm-center::before, .dropstart.with-arrow > .dropdown-menu-sm-center::after { top: calc(50% - var(--dropdown-arrow-size)); bottom: auto; } .dropstart > .dropdown-menu-sm-bottom { top: auto; right: auto; bottom: 0; left: 0; transform: translateX(-100%); } .dropstart.with-arrow > .dropdown-menu-sm-bottom::before, .dropstart.with-arrow > .dropdown-menu-sm-bottom::after { top: auto; bottom: var(--dropdown-arrow-vertical-spacing); } } @media (min-width: 769px) { /* Normal dropdown */ .dropdown > .dropdown-menu-md-start { top: auto; right: auto; bottom: 0; left: 0; transform: translateY(100%); } .dropdown.with-arrow > .dropdown-menu-md-start::before, .dropdown.with-arrow > .dropdown-menu-md-start::after { left: var(--dropdown-arrow-horizontal-spacing); right: auto; } .dropdown > .dropdown-menu-md-center { top: auto; right: auto; bottom: 0; left: 50%; transform: translate(-50%, 100%); } .dropdown.with-arrow > .dropdown-menu-md-center::before, .dropdown.with-arrow > .dropdown-menu-md-center::after { left: calc(50% - var(--dropdown-arrow-size)); right: auto; } .dropdown > .dropdown-menu-md-end { top: auto; right: 0; bottom: 0; left: auto; transform: translateY(100%); } .dropdown.with-arrow > .dropdown-menu-md-end::before, .dropdown.with-arrow > .dropdown-menu-md-end::after { left: auto; right: var(--dropdown-arrow-horizontal-spacing); } /* Dropup */ .dropup > .dropdown-menu-md-start { top: 0; right: auto; bottom: auto; left: 0; transform: translateY(-100%); } .dropup.with-arrow > .dropdown-menu-md-start::before, .dropup.with-arrow > .dropdown-menu-md-start::after { left: var(--dropdown-arrow-horizontal-spacing); right: auto; } .dropup > .dropdown-menu-md-center { top: 0; right: auto; bottom: auto; left: 50%; transform: translate(-50%, -100%); } .dropup.with-arrow > .dropdown-menu-md-center::before, .dropup.with-arrow > .dropdown-menu-md-center::after { left: calc(50% - var(--dropdown-arrow-size)); right: auto; } .dropup > .dropdown-menu-md-end { top: 0; right: 0; bottom: auto; left: auto; transform: translateY(-100%); } .dropup.with-arrow > .dropdown-menu-md-end::before, .dropup.with-arrow > .dropdown-menu-md-end::after { left: auto; right: var(--dropdown-arrow-horizontal-spacing); } /* Dropend */ .dropend > .dropdown-menu-md-top { top: 0; right: 0; bottom: auto; left: auto; transform: translateX(100%); } .dropend.with-arrow > .dropdown-menu-md-top::before, .dropend.with-arrow > .dropdown-menu-md-top::after { top: var(--dropdown-arrow-vertical-spacing); bottom: auto; } .dropend > .dropdown-menu-md-center { top: 50%; right: 0; bottom: auto; left: auto; transform: translate(100%, -50%); } .dropend.with-arrow > .dropdown-menu-md-center::before, .dropend.with-arrow > .dropdown-menu-md-center::after { top: calc(50% - var(--dropdown-arrow-size)); bottom: auto; } .dropend > .dropdown-menu-md-bottom { top: auto; right: 0; bottom: 0; left: auto; transform: translateX(100%); } .dropend.with-arrow > .dropdown-menu-md-bottom::before, .dropend.with-arrow > .dropdown-menu-md-bottom::after { top: auto; bottom: var(--dropdown-arrow-vertical-spacing); } /* Dropstart */ .dropstart > .dropdown-menu-md-top { top: 0; right: auto; bottom: auto; left: 0; transform: translateX(-100%); } .dropstart.with-arrow > .dropdown-menu-md-top::before, .dropstart.with-arrow > .dropdown-menu-md-top::after { top: var(--dropdown-arrow-vertical-spacing); bottom: auto; } .dropstart > .dropdown-menu-md-center { top: 50%; right: auto; bottom: auto; left: 0; transform: translate(-100%, -50%); } .dropstart.with-arrow > .dropdown-menu-md-center::before, .dropstart.with-arrow > .dropdown-menu-md-center::after { top: calc(50% - var(--dropdown-arrow-size)); bottom: auto; } .dropstart > .dropdown-menu-md-bottom { top: auto; right: auto; bottom: 0; left: 0; transform: translateX(-100%); } .dropstart.with-arrow > .dropdown-menu-md-bottom::before, .dropstart.with-arrow > .dropdown-menu-md-bottom::after { top: auto; bottom: var(--dropdown-arrow-vertical-spacing); } } @media (min-width: 993px) { /* Normal dropdown */ .dropdown > .dropdown-menu-lg-start { top: auto; right: auto; bottom: 0; left: 0; transform: translateY(100%); } .dropdown.with-arrow > .dropdown-menu-lg-start::before, .dropdown.with-arrow > .dropdown-menu-lg-start::after { left: var(--dropdown-arrow-horizontal-spacing); right: auto; } .dropdown > .dropdown-menu-lg-center { top: auto; right: auto; bottom: 0; left: 50%; transform: translate(-50%, 100%); } .dropdown.with-arrow > .dropdown-menu-lg-center::before, .dropdown.with-arrow > .dropdown-menu-lg-center::after { left: calc(50% - var(--dropdown-arrow-size)); right: auto; } .dropdown > .dropdown-menu-lg-end { top: auto; right: 0; bottom: 0; left: auto; transform: translateY(100%); } .dropdown.with-arrow > .dropdown-menu-lg-end::before, .dropdown.with-arrow > .dropdown-menu-lg-end::after { left: auto; right: var(--dropdown-arrow-horizontal-spacing); } /* Dropup */ .dropup > .dropdown-menu-lg-start { top: 0; right: auto; bottom: auto; left: 0; transform: translateY(-100%); } .dropup.with-arrow > .dropdown-menu-lg-start::before, .dropup.with-arrow > .dropdown-menu-lg-start::after { left: var(--dropdown-arrow-horizontal-spacing); right: auto; } .dropup > .dropdown-menu-lg-center { top: 0; right: auto; bottom: auto; left: 50%; transform: translate(-50%, -100%); } .dropup.with-arrow > .dropdown-menu-lg-center::before, .dropup.with-arrow > .dropdown-menu-lg-center::after { left: calc(50% - var(--dropdown-arrow-size)); right: auto; } .dropup > .dropdown-menu-lg-end { top: 0; right: 0; bottom: auto; left: auto; transform: translateY(-100%); } .dropup.with-arrow > .dropdown-menu-lg-end::before, .dropup.with-arrow > .dropdown-menu-lg-end::after { left: auto; right: var(--dropdown-arrow-horizontal-spacing); } /* Dropend */ .dropend > .dropdown-menu-lg-top { top: 0; right: 0; bottom: auto; left: auto; transform: translateX(100%); } .dropend.with-arrow > .dropdown-menu-lg-top::before, .dropend.with-arrow > .dropdown-menu-lg-top::after { top: var(--dropdown-arrow-vertical-spacing); bottom: auto; } .dropend > .dropdown-menu-lg-center { top: 50%; right: 0; bottom: auto; left: auto; transform: translate(100%, -50%); } .dropend.with-arrow > .dropdown-menu-lg-center::before, .dropend.with-arrow > .dropdown-menu-lg-center::after { top: calc(50% - var(--dropdown-arrow-size)); bottom: auto; } .dropend > .dropdown-menu-lg-bottom { top: auto; right: 0; bottom: 0; left: auto; transform: translateX(100%); } .dropend.with-arrow > .dropdown-menu-lg-bottom::before, .dropend.with-arrow > .dropdown-menu-lg-bottom::after { top: auto; bottom: var(--dropdown-arrow-vertical-spacing); } /* Dropstart */ .dropstart > .dropdown-menu-lg-top { top: 0; right: auto; bottom: auto; left: 0; transform: translateX(-100%); } .dropstart.with-arrow > .dropdown-menu-lg-top::before, .dropstart.with-arrow > .dropdown-menu-lg-top::after { top: var(--dropdown-arrow-vertical-spacing); bottom: auto; } .dropstart > .dropdown-menu-lg-center { top: 50%; right: auto; bottom: auto; left: 0; transform: translate(-100%, -50%); } .dropstart.with-arrow > .dropdown-menu-lg-center::before, .dropstart.with-arrow > .dropdown-menu-lg-center::after { top: calc(50% - var(--dropdown-arrow-size)); bottom: auto; } .dropstart > .dropdown-menu-lg-bottom { top: auto; right: auto; bottom: 0; left: 0; transform: translateX(-100%); } .dropstart.with-arrow > .dropdown-menu-lg-bottom::before, .dropstart.with-arrow > .dropdown-menu-lg-bottom::after { top: auto; bottom: var(--dropdown-arrow-vertical-spacing); } } @media (min-width: 1201px) { /* Normal dropdown */ .dropdown > .dropdown-menu-xl-start { top: auto; right: auto; bottom: 0; left: 0; transform: translateY(100%); } .dropdown.with-arrow > .dropdown-menu-xl-start::before, .dropdown.with-arrow > .dropdown-menu-xl-start::after { left: var(--dropdown-arrow-horizontal-spacing); right: auto; } .dropdown > .dropdown-menu-xl-center { top: auto; right: auto; bottom: 0; left: 50%; transform: translate(-50%, 100%); } .dropdown.with-arrow > .dropdown-menu-xl-center::before, .dropdown.with-arrow > .dropdown-menu-xl-center::after { left: calc(50% - var(--dropdown-arrow-size)); right: auto; } .dropdown > .dropdown-menu-xl-end { top: auto; right: 0; bottom: 0; left: auto; transform: translateY(100%); } .dropdown.with-arrow > .dropdown-menu-xl-end::before, .dropdown.with-arrow > .dropdown-menu-xl-end::after { left: auto; right: var(--dropdown-arrow-horizontal-spacing); } /* Dropup */ .dropup > .dropdown-menu-xl-start { top: 0; right: auto; bottom: auto; left: 0; transform: translateY(-100%); } .dropup.with-arrow > .dropdown-menu-xl-start::before, .dropup.with-arrow > .dropdown-menu-xl-start::after { left: var(--dropdown-arrow-horizontal-spacing); right: auto; } .dropup > .dropdown-menu-xl-center { top: 0; right: auto; bottom: auto; left: 50%; transform: translate(-50%, -100%); } .dropup.with-arrow > .dropdown-menu-xl-center::before, .dropup.with-arrow > .dropdown-menu-xl-center::after { left: calc(50% - var(--dropdown-arrow-size)); right: auto; } .dropup > .dropdown-menu-xl-end { top: 0; right: 0; bottom: auto; left: auto; transform: translateY(-100%); } .dropup.with-arrow > .dropdown-menu-xl-end::before, .dropup.with-arrow > .dropdown-menu-xl-end::after { left: auto; right: var(--dropdown-arrow-horizontal-spacing); } /* Dropend */ .dropend > .dropdown-menu-xl-top { top: 0; right: 0; bottom: auto; left: auto; transform: translateX(100%); } .dropend.with-arrow > .dropdown-menu-xl-top::before, .dropend.with-arrow > .dropdown-menu-xl-top::after { top: var(--dropdown-arrow-vertical-spacing); bottom: auto; } .dropend > .dropdown-menu-xl-center { top: 50%; right: 0; bottom: auto; left: auto; transform: translate(100%, -50%); } .dropend.with-arrow > .dropdown-menu-xl-center::before, .dropend.with-arrow > .dropdown-menu-xl-center::after { top: calc(50% - var(--dropdown-arrow-size)); bottom: auto; } .dropend > .dropdown-menu-xl-bottom { top: auto; right: 0; bottom: 0; left: auto; transform: translateX(100%); } .dropend.with-arrow > .dropdown-menu-xl-bottom::before, .dropend.with-arrow > .dropdown-menu-xl-bottom::after { top: auto; bottom: var(--dropdown-arrow-vertical-spacing); } /* Dropstart */ .dropstart > .dropdown-menu-xl-top { top: 0; right: auto; bottom: auto; left: 0; transform: translateX(-100%); } .dropstart.with-arrow > .dropdown-menu-xl-top::before, .dropstart.with-arrow > .dropdown-menu-xl-top::after { top: var(--dropdown-arrow-vertical-spacing); bottom: auto; } .dropstart > .dropdown-menu-xl-center { top: 50%; right: auto; bottom: auto; left: 0; transform: translate(-100%, -50%); } .dropstart.with-arrow > .dropdown-menu-xl-center::before, .dropstart.with-arrow > .dropdown-menu-xl-center::after { top: calc(50% - var(--dropdown-arrow-size)); bottom: auto; } .dropstart > .dropdown-menu-xl-bottom { top: auto; right: auto; bottom: 0; left: 0; transform: translateX(-100%); } .dropstart.with-arrow > .dropdown-menu-xl-bottom::before, .dropstart.with-arrow > .dropdown-menu-xl-bottom::after { top: auto; bottom: var(--dropdown-arrow-vertical-spacing); } } @media (min-width: 1401px) { /* Normal dropdown */ .dropdown > .dropdown-menu-xxl-start { top: auto; right: auto; bottom: 0; left: 0; transform: translateY(100%); } .dropdown.with-arrow > .dropdown-menu-xxl-start::before, .dropdown.with-arrow > .dropdown-menu-xxl-start::after { left: var(--dropdown-arrow-horizontal-spacing); right: auto; } .dropdown > .dropdown-menu-xxl-center { top: auto; right: auto; bottom: 0; left: 50%; transform: translate(-50%, 100%); } .dropdown.with-arrow > .dropdown-menu-xxl-center::before, .dropdown.with-arrow > .dropdown-menu-xxl-center::after { left: calc(50% - var(--dropdown-arrow-size)); right: auto; } .dropdown > .dropdown-menu-xxl-end { top: auto; right: 0; bottom: 0; left: auto; transform: translateY(100%); } .dropdown.with-arrow > .dropdown-menu-xxl-end::before, .dropdown.with-arrow > .dropdown-menu-xxl-end::after { left: auto; right: var(--dropdown-arrow-horizontal-spacing); } /* Dropup */ .dropup > .dropdown-menu-xxl-start { top: 0; right: auto; bottom: auto; left: 0; transform: translateY(-100%); } .dropup.with-arrow > .dropdown-menu-xxl-start::before, .dropup.with-arrow > .dropdown-menu-xxl-start::after { left: var(--dropdown-arrow-horizontal-spacing); right: auto; } .dropup > .dropdown-menu-xxl-center { top: 0; right: auto; bottom: auto; left: 50%; transform: translate(-50%, -100%); } .dropup.with-arrow > .dropdown-menu-xxl-center::before, .dropup.with-arrow > .dropdown-menu-xxl-center::after { left: calc(50% - var(--dropdown-arrow-size)); right: auto; } .dropup > .dropdown-menu-xxl-end { top: 0; right: 0; bottom: auto; left: auto; transform: translateY(-100%); } .dropup.with-arrow > .dropdown-menu-xxl-end::before, .dropup.with-arrow > .dropdown-menu-xxl-end::after { left: auto; right: var(--dropdown-arrow-horizontal-spacing); } /* Dropend */ .dropend > .dropdown-menu-xxl-top { top: 0; right: 0; bottom: auto; left: auto; transform: translateX(100%); } .dropend.with-arrow > .dropdown-menu-xxl-top::before, .dropend.with-arrow > .dropdown-menu-xxl-top::after { top: var(--dropdown-arrow-vertical-spacing); bottom: auto; } .dropend > .dropdown-menu-xxl-center { top: 50%; right: 0; bottom: auto; left: auto; transform: translate(100%, -50%); } .dropend.with-arrow > .dropdown-menu-xxl-center::before, .dropend.with-arrow > .dropdown-menu-xxl-center::after { top: calc(50% - var(--dropdown-arrow-size)); bottom: auto; } .dropend > .dropdown-menu-xxl-bottom { top: auto; right: 0; bottom: 0; left: auto; transform: translateX(100%); } .dropend.with-arrow > .dropdown-menu-xxl-bottom::before, .dropend.with-arrow > .dropdown-menu-xxl-bottom::after { top: auto; bottom: var(--dropdown-arrow-vertical-spacing); } /* Dropstart */ .dropstart > .dropdown-menu-xxl-top { top: 0; right: auto; bottom: auto; left: 0; transform: translateX(-100%); } .dropstart.with-arrow > .dropdown-menu-xxl-top::before, .dropstart.with-arrow > .dropdown-menu-xxl-top::after { top: var(--dropdown-arrow-vertical-spacing); bottom: auto; } .dropstart > .dropdown-menu-xxl-center { top: 50%; right: auto; bottom: auto; left: 0; transform: translate(-100%, -50%); } .dropstart.with-arrow > .dropdown-menu-xxl-center::before, .dropstart.with-arrow > .dropdown-menu-xxl-center::after { top: calc(50% - var(--dropdown-arrow-size)); bottom: auto; } .dropstart > .dropdown-menu-xxl-bottom { top: auto; right: auto; bottom: 0; left: 0; transform: translateX(-100%); } .dropstart.with-arrow > .dropdown-menu-xxl-bottom::before, .dropstart.with-arrow > .dropdown-menu-xxl-bottom::after { top: auto; bottom: var(--dropdown-arrow-vertical-spacing); } } /* Dropdown content */ .dropdown-content { padding: var(--dropdown-content-padding); margin: var(--dropdown-content-margin); } /* Dropdown item */ .dropdown-item { display: block; width: 100%; white-space: nowrap; font-size: var(--dropdown-item-font-size); line-height: var(--dropdown-item-line-height); font-weight: var(--dropdown-item-font-weight); -webkit-font-smoothing: var(--dropdown-item-webkit-font-smoothing); -moz-osx-font-smoothing: var(--dropdown-item-moz-osx-font-smoothing); padding: var(--dropdown-item-padding); margin: var(--dropdown-item-margin); background-clip: var(--dropdown-item-bg-clip); text-decoration: var(--dropdown-item-text-decoration); color: var(--dropdown-item-text-color); background-color: var(--dropdown-item-bg-color); background-image: var(--dropdown-item-bg-image); border: var(--dropdown-item-border-style); border-width: var(--dropdown-item-border-width); border-color: var(--dropdown-item-border-color); border-radius: var(--dropdown-item-border-radius); box-shadow: var(--dropdown-item-box-shadow); } .dropdown-item:hover { text-decoration: var(--dropdown-item-text-decoration-hover); color: var(--dropdown-item-text-color-hover); background-color: var(--dropdown-item-bg-color-hover); background-image: var(--dropdown-item-bg-image-hover); border-color: var(--dropdown-item-border-color-hover); box-shadow: var(--dropdown-item-box-shadow-hover); } /* Active dropdown item */ .dropdown-item.active { -webkit-font-smoothing: var(--dropdown-item-active-webkit-font-smoothing); -moz-osx-font-smoothing: var(--dropdown-item-active-moz-osx-font-smoothing); background-clip: var(--dropdown-item-active-bg-clip); text-decoration: var(--dropdown-item-active-text-decoration); color: var(--dropdown-item-active-text-color); background-color: var(--dropdown-item-active-bg-color); background-image: var(--dropdown-item-active-bg-image); border-color: var(--dropdown-item-active-border-color); box-shadow: var(--dropdown-item-active-box-shadow); } .dropdown-item.active:hover { text-decoration: var(--dropdown-item-active-text-decoration-hover); color: var(--dropdown-item-active-text-color-hover); background-color: var(--dropdown-item-active-bg-color-hover); background-image: var(--dropdown-item-active-bg-image-hover); border-color: var(--dropdown-item-active-border-color-hover); box-shadow: var(--dropdown-item-active-box-shadow-hover); } /* Disabled dropdown item */ .dropdown-item.disabled, .dropdown-item.disabled:hover { pointer-events: none; -webkit-font-smoothing: var(--dropdown-item-disabled-webkit-font-smoothing); -moz-osx-font-smoothing: var(--dropdown-item-disabled-moz-osx-font-smoothing); background-clip: var(--dropdown-item-disabled-bg-clip); text-decoration: var(--dropdown-item-disabled-text-decoration); color: var(--dropdown-item-disabled-text-color); background-color: var(--dropdown-item-disabled-bg-color); background-image: var(--dropdown-item-disabled-bg-image); border-color: var(--dropdown-item-disabled-border-color); box-shadow: var(--dropdown-item-disabled-box-shadow); } /* Dropdown header */ .dropdown-header { display: block; width: 100%; white-space: nowrap; font-family: var(--dropdown-header-font-family); font-size: var(--dropdown-header-font-size); line-height: var(--dropdown-header-line-height); font-weight: var(--dropdown-header-font-weight); -webkit-font-smoothing: var(--dropdown-header-webkit-font-smoothing); -moz-osx-font-smoothing: var(--dropdown-header-moz-osx-font-smoothing); padding: var(--dropdown-header-padding); margin: var(--dropdown-header-margin); } /* Dropdown divider */ .dropdown-divider { height: var(--dropdown-divider-height); padding: var(--dropdown-divider-padding); margin: var(--dropdown-divider-margin); background-color: var(--dropdown-divider-color); } /** * ---------------------------------------------------------------------------- * [ Modal ] * ---------------------------------------------------------------------------- */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 99; overflow-y: auto; outline: 0; } /* Modal dialog */ .modal-dialog { position: relative; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 100%; padding: var(--modal-dialog-padding); } /* Modal content */ .modal-content { position: relative; -webkit-font-smoothing: var(--modal-content-webkit-font-smoothing); -moz-osx-font-smoothing: var(--modal-content-moz-osx-font-smoothing); width: var(--modal-content-width); max-width: 100%; padding: var(--modal-content-padding); background-clip: var(--modal-content-bg-clip); color: var(--modal-content-text-color); background-color: var(--modal-content-bg-color); background-image: var(--modal-content-bg-image); border: var(--modal-content-border-style); border-width: var(--modal-content-border-width); border-color: var(--modal-content-border-color); border-radius: var(--modal-content-border-radius); box-shadow: var(--modal-content-box-shadow); } /* Modal content media */ .modal-content-media { padding: 0; background-color: transparent; background-image: none; border: 0; border-radius: 0; box-shadow: none; } .modal-content-media img, .modal-content-media video { display: block; } /* Modal title */ .modal-title { font-family: var(--modal-title-font-family); font-size: var(--modal-title-font-size); line-height: var(--modal-title-line-height); font-weight: var(--modal-title-font-weight); -webkit-font-smoothing: var(--modal-title-webkit-font-smoothing); -moz-osx-font-smoothing: var(--modal-title-moz-osx-font-smoothing); margin-top: var(--modal-title-margin-top); margin-bottom: var(--modal-title-margin-bottom); } /* Initial adjustments (because modals are hidden by default) */ .modal { visibility: hidden; } .modal-content { bottom: 5rem; opacity: 0; transition: bottom 0.5s, opacity 0.5s; } @media (prefers-reduced-motion) { .modal-content { transition: 0s; } } /* Showing modals */ .modal.set-visible { visibility: visible; } .modal.show .modal-content { bottom: 0; opacity: 1; } /* Shake animation */ @keyframes modal-shake { 12.5% { left: -0.4rem; } 37.5% { left: 0.4rem; } 62.5% { left: -0.1rem; } 87.5% { left: 0.1rem; } } .modal.dialog-shake-animate { overflow-x: hidden; } .modal.dialog-shake-animate .modal-dialog { animation: modal-shake 0.5s; animation-timing-function: linear; } @media (prefers-reduced-motion) { .modal.dialog-shake-animate .modal-dialog { animation: none; } } /* Modal full */ .modal-fullscreen { padding: 0; } .modal-fullscreen .modal-content { -webkit-font-smoothing: var(--modal-full-content-webkit-font-smoothing); -moz-osx-font-smoothing: var(--modal-full-content-moz-osx-font-smoothing); width: 100%; min-height: 100vh; padding: var(--modal-full-content-padding); background-clip: var(--modal-full-content-bg-clip); color: var(--modal-full-content-text-color); background-color: var(--modal-full-content-bg-color); background-image: var(--modal-full-content-bg-image); border: var(--modal-full-content-border-style); border-width: var(--modal-full-content-border-width); border-color: var(--modal-full-content-border-color); border-radius: var(--modal-full-content-border-radius); box-shadow: var(--modal-full-content-box-shadow); } @media (max-width: 576px) { .modal-fullscreen-sm-down { padding: 0; } .modal-fullscreen-sm-down .modal-content { -webkit-font-smoothing: var(--modal-full-content-webkit-font-smoothing); -moz-osx-font-smoothing: var(--modal-full-content-moz-osx-font-smoothing); width: 100%; min-height: 100vh; padding: var(--modal-full-content-padding); background-clip: var(--modal-full-content-bg-clip); color: var(--modal-full-content-text-color); background-color: var(--modal-full-content-bg-color); background-image: var(--modal-full-content-bg-image); border: var(--modal-full-content-border-style); border-width: var(--modal-full-content-border-width); border-color: var(--modal-full-content-border-color); border-radius: var(--modal-full-content-border-radius); box-shadow: var(--modal-full-content-box-shadow); } } @media (max-width: 768px) { .modal-fullscreen-md-down { padding: 0; } .modal-fullscreen-md-down .modal-content { -webkit-font-smoothing: var(--modal-full-content-webkit-font-smoothing); -moz-osx-font-smoothing: var(--modal-full-content-moz-osx-font-smoothing); width: 100%; min-height: 100vh; padding: var(--modal-full-content-padding); background-clip: var(--modal-full-content-bg-clip); color: var(--modal-full-content-text-color); background-color: var(--modal-full-content-bg-color); background-image: var(--modal-full-content-bg-image); border: var(--modal-full-content-border-style); border-width: var(--modal-full-content-border-width); border-color: var(--modal-full-content-border-color); border-radius: var(--modal-full-content-border-radius); box-shadow: var(--modal-full-content-box-shadow); } } @media (max-width: 992px) { .modal-fullscreen-lg-down { padding: 0; } .modal-fullscreen-lg-down .modal-content { -webkit-font-smoothing: var(--modal-full-content-webkit-font-smoothing); -moz-osx-font-smoothing: var(--modal-full-content-moz-osx-font-smoothing); width: 100%; min-height: 100vh; padding: var(--modal-full-content-padding); background-clip: var(--modal-full-content-bg-clip); color: var(--modal-full-content-text-color); background-color: var(--modal-full-content-bg-color); background-image: var(--modal-full-content-bg-image); border: var(--modal-full-content-border-style); border-width: var(--modal-full-content-border-width); border-color: var(--modal-full-content-border-color); border-radius: var(--modal-full-content-border-radius); box-shadow: var(--modal-full-content-box-shadow); } } @media (max-width: 1200px) { .modal-fullscreen-xl-down { padding: 0; } .modal-fullscreen-xl-down .modal-content { -webkit-font-smoothing: var(--modal-full-content-webkit-font-smoothing); -moz-osx-font-smoothing: var(--modal-full-content-moz-osx-font-smoothing); width: 100%; min-height: 100vh; padding: var(--modal-full-content-padding); background-clip: var(--modal-full-content-bg-clip); color: var(--modal-full-content-text-color); background-color: var(--modal-full-content-bg-color); background-image: var(--modal-full-content-bg-image); border: var(--modal-full-content-border-style); border-width: var(--modal-full-content-border-width); border-color: var(--modal-full-content-border-color); border-radius: var(--modal-full-content-border-radius); box-shadow: var(--modal-full-content-box-shadow); } } @media (max-width: 1400px) { .modal-fullscreen-xxl-down { padding: 0; } .modal-fullscreen-xxl-down .modal-content { -webkit-font-smoothing: var(--modal-full-content-webkit-font-smoothing); -moz-osx-font-smoothing: var(--modal-full-content-moz-osx-font-smoothing); width: 100%; min-height: 100vh; padding: var(--modal-full-content-padding); background-clip: var(--modal-full-content-bg-clip); color: var(--modal-full-content-text-color); background-color: var(--modal-full-content-bg-color); background-image: var(--modal-full-content-bg-image); border: var(--modal-full-content-border-style); border-width: var(--modal-full-content-border-width); border-color: var(--modal-full-content-border-color); border-radius: var(--modal-full-content-border-radius); box-shadow: var(--modal-full-content-box-shadow); } } /* Modal close */ .modal .close { position: absolute; display: inline-block; top: 0; right: 0; text-align: center; vertical-align: middle; cursor: pointer; font-size: var(--modal-close-font-size); line-height: var(--modal-close-line-height); font-weight: var(--modal-close-font-weight); -webkit-font-smoothing: var(--modal-close-webkit-font-smoothing); -moz-osx-font-smoothing: var(--modal-close-moz-osx-font-smoothing); padding: var(--modal-close-vertical-padding) var(--modal-close-horizontal-padding); margin: var(--modal-close-margin); background-clip: var(--modal-close-bg-clip); text-decoration: var(--modal-close-text-decoration); color: var(--modal-close-text-color); background-color: var(--modal-close-bg-color); background-image: var(--modal-close-bg-image); border: var(--modal-close-border-style); border-width: var(--modal-close-border-width); border-color: var(--modal-close-border-color); border-radius: var(--modal-close-border-radius); box-shadow: var(--modal-close-box-shadow); -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; } .modal .close:hover { text-decoration: var(--modal-close-text-decoration-hover); color: var(--modal-close-text-color-hover); background-color: var(--modal-close-bg-color-hover); background-image: var(--modal-close-bg-image-hover); border-color: var(--modal-close-border-color-hover); box-shadow: var(--modal-close-box-shadow-hover); } .modal .close:active { text-decoration: var(--modal-close-text-decoration-active); color: var(--modal-close-text-color-active); background-color: var(--modal-close-bg-color-active); background-image: var(--modal-close-bg-image-active); border-color: var(--modal-close-border-color-active); box-shadow: var(--modal-close-box-shadow-active); } /** * ---------------------------------------------------------------------------- * [ Offcanvas ] * ---------------------------------------------------------------------------- */ .offcanvas { position: fixed; height: 100vh; width: 100%; z-index: 99; outline: 0; overflow-y: auto; -webkit-font-smoothing: var(--offcanvas-webkit-font-smoothing); -moz-osx-font-smoothing: var(--offcanvas-moz-osx-font-smoothing); padding: var(--offcanvas-padding); background-clip: var(--offcanvas-bg-clip); color: var(--offcanvas-text-color); background-color: var(--offcanvas-bg-color); background-image: var(--offcanvas-bg-image); border: var(--offcanvas-border-style); border-width: 0; border-color: var(--offcanvas-border-color); border-radius: 0; box-shadow: var(--offcanvas-box-shadow); } .offcanvas-start, .offcanvas-end { width: var(--offcanvas-start-end-width); max-width: 100%; } .offcanvas-top, .offcanvas-bottom { height: var(--offcanvas-top-bottom-height); max-height: 100%; } .offcanvas-start { border-right-width: var(--offcanvas-border-width); border-top-right-radius: var(--offcanvas-start-end-border-radius); border-bottom-right-radius: var(--offcanvas-start-end-border-radius); } .offcanvas-end { border-left-width: var(--offcanvas-border-width); border-top-left-radius: var(--offcanvas-start-end-border-radius); border-bottom-left-radius: var(--offcanvas-start-end-border-radius); } .offcanvas-top { border-bottom-width: var(--offcanvas-border-width); border-bottom-left-radius: var(--offcanvas-top-bottom-border-radius); border-bottom-right-radius: var(--offcanvas-top-bottom-border-radius); } .offcanvas-bottom { border-top-width: var(--offcanvas-border-width); border-top-left-radius: var(--offcanvas-top-bottom-border-radius); border-top-right-radius: var(--offcanvas-top-bottom-border-radius); } /* Initial adjustments (because offcanvas components are hidden by default) */ .offcanvas { visibility: hidden; transition: top 0.25s, right 0.25s, bottom 0.25s, left 0.25s; } @media (prefers-reduced-motion) { .offcanvas { transition: 0s; } } .offcanvas-start { left: calc((-1) * var(--offcanvas-start-end-width)); } .offcanvas-end { right: calc((-1) * var(--offcanvas-start-end-width)); } .offcanvas-top { top: calc((-1) * var(--offcanvas-top-bottom-height)); } .offcanvas-bottom { bottom: calc((-1) * var(--offcanvas-top-bottom-height)); } /* Showing offcanvas components */ .offcanvas.set-visible { visibility: visible; } .offcanvas-start.show { top: 0; left: 0; } .offcanvas-end.show { top: 0; right: 0; } .offcanvas-top.show { top: 0; left: 0; } .offcanvas-bottom.show { bottom: 0; left: 0; } /* Shake animation */ @keyframes offcanvas-shake-x { 12.5% { left: -0.4rem; } 37.5% { left: 0.4rem; } 62.5% { left: -0.1rem; } 87.5% { left: 0.1rem; } } @keyframes offcanvas-shake-y { 12.5% { top: -0.4rem; } 37.5% { top: 0.4rem; } 62.5% { top: -0.1rem; } 87.5% { top: 0.1rem; } } .offcanvas-start.dialog-shake-animate, .offcanvas-end.dialog-shake-animate { animation: offcanvas-shake-y 0.5s; animation-timing-function: linear; } .offcanvas-top.dialog-shake-animate, .offcanvas-bottom.dialog-shake-animate { animation: offcanvas-shake-x 0.5s; animation-timing-function: linear; } @media (prefers-reduced-motion) { .offcanvas-start.dialog-shake-animate, .offcanvas-end.dialog-shake-animate, .offcanvas-top.dialog-shake-animate, .offcanvas-bottom.dialog-shake-animate { animation: none; } } /* Offcanvas title */ .offcanvas-title { font-family: var(--offcanvas-title-font-family); font-size: var(--offcanvas-title-font-size); line-height: var(--offcanvas-title-line-height); font-weight: var(--offcanvas-title-font-weight); -webkit-font-smoothing: var(--offcanvas-title-webkit-font-smoothing); -moz-osx-font-smoothing: var(--offcanvas-title-moz-osx-font-smoothing); margin-top: var(--offcanvas-title-margin-top); margin-bottom: var(--offcanvas-title-margin-bottom); } /* Offcanvas close */ .offcanvas .close { position: absolute; display: inline-block; top: 0; right: 0; text-align: center; vertical-align: middle; cursor: pointer; font-size: var(--offcanvas-close-font-size); line-height: var(--offcanvas-close-line-height); font-weight: var(--offcanvas-close-font-weight); -webkit-font-smoothing: var(--offcanvas-close-webkit-font-smoothing); -moz-osx-font-smoothing: var(--offcanvas-close-moz-osx-font-smoothing); padding: var(--offcanvas-close-vertical-padding) var(--offcanvas-close-horizontal-padding); margin: var(--offcanvas-close-margin); background-clip: var(--offcanvas-close-bg-clip); text-decoration: var(--offcanvas-close-text-decoration); color: var(--offcanvas-close-text-color); background-color: var(--offcanvas-close-bg-color); background-image: var(--offcanvas-close-bg-image); border: var(--offcanvas-close-border-style); border-width: var(--offcanvas-close-border-width); border-color: var(--offcanvas-close-border-color); border-radius: var(--offcanvas-close-border-radius); box-shadow: var(--offcanvas-close-box-shadow); -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; } .offcanvas .close:hover { text-decoration: var(--offcanvas-close-text-decoration-hover); color: var(--offcanvas-close-text-color-hover); background-color: var(--offcanvas-close-bg-color-hover); background-image: var(--offcanvas-close-bg-image-hover); border-color: var(--offcanvas-close-border-color-hover); box-shadow: var(--offcanvas-close-box-shadow-hover); } .offcanvas .close:active { text-decoration: var(--offcanvas-close-text-decoration-active); color: var(--offcanvas-close-text-color-active); background-color: var(--offcanvas-close-bg-color-active); background-image: var(--offcanvas-close-bg-image-active); border-color: var(--offcanvas-close-border-color-active); box-shadow: var(--offcanvas-close-box-shadow-active); } /** * ---------------------------------------------------------------------------- * [ Alerts ] * ---------------------------------------------------------------------------- */ .alert { position: relative; font-size: var(--alert-font-size); line-height: var(--alert-line-height); -webkit-font-smoothing: var(--alert-webkit-font-smoothing); -moz-osx-font-smoothing: var(--alert-moz-osx-font-smoothing); padding: var(--alert-padding); margin-top: var(--alert-margin-top); margin-bottom: var(--alert-margin-bottom); background-clip: var(--alert-bg-clip); color: var(--alert-text-color); background-color: var(--alert-bg-color); background-image: var(--alert-bg-image); border: var(--alert-border-style); border-width: var(--alert-border-width); border-color: var(--alert-border-color); border-radius: var(--alert-border-radius); box-shadow: var(--alert-box-shadow); } /* Alert heading */ .alert-heading { font-family: var(--alert-heading-font-family); font-size: var(--alert-heading-font-size); line-height: var(--alert-heading-line-height); font-weight: var(--alert-heading-font-weight); -webkit-font-smoothing: var(--alert-heading-webkit-font-smoothing); -moz-osx-font-smoothing: var(--alert-heading-moz-osx-font-smoothing); margin-top: var(--alert-heading-margin-top); margin-bottom: var(--alert-heading-margin-bottom); } /* Alert link */ .alert-link { -webkit-font-smoothing: var(--alert-link-webkit-font-smoothing); -moz-osx-font-smoothing: var(--alert-link-moz-osx-font-smoothing); text-decoration: var(--alert-link-text-decoration); color: var(--alert-link-color); opacity: var(--alert-link-opacity); } .alert-link:hover { text-decoration: var(--alert-link-text-decoration-hover); color: var(--alert-link-color-hover); opacity: var(--alert-link-opacity-hover); } /* Alert close */ .alert .close { position: absolute; display: inline-block; top: 0; right: 0; text-align: center; vertical-align: middle; cursor: pointer; font-size: var(--alert-close-font-size); line-height: var(--alert-close-line-height); font-weight: var(--alert-close-font-weight); -webkit-font-smoothing: var(--alert-close-webkit-font-smoothing); -moz-osx-font-smoothing: var(--alert-close-moz-osx-font-smoothing); padding: var(--alert-close-vertical-padding) var(--alert-close-horizontal-padding); margin: var(--alert-close-margin); background-clip: var(--alert-close-bg-clip); text-decoration: var(--alert-close-text-decoration); color: var(--alert-close-text-color); background-color: var(--alert-close-bg-color); background-image: var(--alert-close-bg-image); border: var(--alert-close-border-style); border-width: var(--alert-close-border-width); border-color: var(--alert-close-border-color); border-radius: var(--alert-close-border-radius); box-shadow: var(--alert-close-box-shadow); -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; } .alert .close:hover { text-decoration: var(--alert-close-text-decoration-hover); color: var(--alert-close-text-color-hover); background-color: var(--alert-close-bg-color-hover); background-image: var(--alert-close-bg-image-hover); border-color: var(--alert-close-border-color-hover); box-shadow: var(--alert-close-box-shadow-hover); } .alert .close:active { text-decoration: var(--alert-close-text-decoration-active); color: var(--alert-close-text-color-active); background-color: var(--alert-close-bg-color-active); background-image: var(--alert-close-bg-image-active); border-color: var(--alert-close-border-color-active); box-shadow: var(--alert-close-box-shadow-active); } /* Primary alert */ .alert-primary { -webkit-font-smoothing: var(--alert-primary-webkit-font-smoothing); -moz-osx-font-smoothing: var(--alert-primary-moz-osx-font-smoothing); background-clip: var(--alert-primary-bg-clip); color: var(--alert-primary-text-color); background-color: var(--alert-primary-bg-color); background-image: var(--alert-primary-bg-image); border-color: var(--alert-primary-border-color); box-shadow: var(--alert-primary-box-shadow); } .alert-primary.filled, html:not(.dark-mode) .alert-primary.filled-lm, .dark-mode .alert-primary.filled-dm { -webkit-font-smoothing: var(--alert-primary-filled-webkit-font-smoothing); -moz-osx-font-smoothing: var(--alert-primary-filled-moz-osx-font-smoothing); background-clip: var(--alert-primary-filled-bg-clip); color: var(--alert-primary-filled-text-color); background-color: var(--alert-primary-filled-bg-color); background-image: var(--alert-primary-filled-bg-image); border-color: var(--alert-primary-filled-border-color); box-shadow: var(--alert-primary-filled-box-shadow); } /* Secondary alert */ .alert-secondary { -webkit-font-smoothing: var(--alert-secondary-webkit-font-smoothing); -moz-osx-font-smoothing: var(--alert-secondary-moz-osx-font-smoothing); background-clip: var(--alert-secondary-bg-clip); color: var(--alert-secondary-text-color); background-color: var(--alert-secondary-bg-color); background-image: var(--alert-secondary-bg-image); border-color: var(--alert-secondary-border-color); box-shadow: var(--alert-secondary-box-shadow); } .alert-secondary.filled, html:not(.dark-mode) .alert-secondary.filled-lm, .dark-mode .alert-secondary.filled-dm { -webkit-font-smoothing: var(--alert-secondary-filled-webkit-font-smoothing); -moz-osx-font-smoothing: var(--alert-secondary-filled-moz-osx-font-smoothing); background-clip: var(--alert-secondary-filled-bg-clip); color: var(--alert-secondary-filled-text-color); background-color: var(--alert-secondary-filled-bg-color); background-image: var(--alert-secondary-filled-bg-image); border-color: var(--alert-secondary-filled-border-color); box-shadow: var(--alert-secondary-filled-box-shadow); } /* Success alert */ .alert-success { -webkit-font-smoothing: var(--alert-success-webkit-font-smoothing); -moz-osx-font-smoothing: var(--alert-success-moz-osx-font-smoothing); background-clip: var(--alert-success-bg-clip); color: var(--alert-success-text-color); background-color: var(--alert-success-bg-color); background-image: var(--alert-success-bg-image); border-color: var(--alert-success-border-color); box-shadow: var(--alert-success-box-shadow); } .alert-success.filled, html:not(.dark-mode) .alert-success.filled-lm, .dark-mode .alert-success.filled-dm { -webkit-font-smoothing: var(--alert-success-filled-webkit-font-smoothing); -moz-osx-font-smoothing: var(--alert-success-filled-moz-osx-font-smoothing); background-clip: var(--alert-success-filled-bg-clip); color: var(--alert-success-filled-text-color); background-color: var(--alert-success-filled-bg-color); background-image: var(--alert-success-filled-bg-image); border-color: var(--alert-success-filled-border-color); box-shadow: var(--alert-success-filled-box-shadow); } /* Warning alert */ .alert-warning { -webkit-font-smoothing: var(--alert-warning-webkit-font-smoothing); -moz-osx-font-smoothing: var(--alert-warning-moz-osx-font-smoothing); background-clip: var(--alert-warning-bg-clip); color: var(--alert-warning-text-color); background-color: var(--alert-warning-bg-color); background-image: var(--alert-warning-bg-image); border-color: var(--alert-warning-border-color); box-shadow: var(--alert-warning-box-shadow); } .alert-warning.filled, html:not(.dark-mode) .alert-warning.filled-lm, .dark-mode .alert-warning.filled-dm { -webkit-font-smoothing: var(--alert-warning-filled-webkit-font-smoothing); -moz-osx-font-smoothing: var(--alert-warning-filled-moz-osx-font-smoothing); background-clip: var(--alert-warning-filled-bg-clip); color: var(--alert-warning-filled-text-color); background-color: var(--alert-warning-filled-bg-color); background-image: var(--alert-warning-filled-bg-image); border-color: var(--alert-warning-filled-border-color); box-shadow: var(--alert-warning-filled-box-shadow); } /* Danger alert */ .alert-danger { -webkit-font-smoothing: var(--alert-danger-webkit-font-smoothing); -moz-osx-font-smoothing: var(--alert-danger-moz-osx-font-smoothing); background-clip: var(--alert-danger-bg-clip); color: var(--alert-danger-text-color); background-color: var(--alert-danger-bg-color); background-image: var(--alert-danger-bg-image); border-color: var(--alert-danger-border-color); box-shadow: var(--alert-danger-box-shadow); } .alert-danger.filled, html:not(.dark-mode) .alert-danger.filled-lm, .dark-mode .alert-danger.filled-dm { -webkit-font-smoothing: var(--alert-danger-filled-webkit-font-smoothing); -moz-osx-font-smoothing: var(--alert-danger-filled-moz-osx-font-smoothing); background-clip: var(--alert-danger-filled-bg-clip); color: var(--alert-danger-filled-text-color); background-color: var(--alert-danger-filled-bg-color); background-image: var(--alert-danger-filled-bg-image); border-color: var(--alert-danger-filled-border-color); box-shadow: var(--alert-danger-filled-box-shadow); } /* Sticky alerts */ .sticky-alerts .alert { display: none; right: -50rem; } .sticky-alerts .alert.set-d-block { display: block; } .sticky-alerts .alert.show { right: 0; transition: right 0.4s cubic-bezier(.25, .8, .25, 1); } @media (prefers-reduced-motion) { .sticky-alerts .alert.show { transition: 0s; } } /* Alert fade out dismissal */ .alert.fade-out, .sticky-alerts .alert.fade-out { opacity: 0; transition: opacity 0.25s linear; } @media (prefers-reduced-motion) { .alert.fade-out, .sticky-alerts .alert.fade-out { transition: 0s; } } .alert.set-d-none { display: none; } /** * ---------------------------------------------------------------------------- * [ Navbar content ] * ---------------------------------------------------------------------------- */ .navbar .container, .navbar .container-sm, .navbar .container-md, .navbar .container-lg, .navbar .container-xl, .navbar .container-xxl, .navbar .container-fluid { width: 100%; height: 100%; position: relative; display: flex; flex-wrap: wrap; align-items: center; flex-flow: row nowrap; justify-content: flex-start; padding-left: var(--navbar-container-horizontal-padding); padding-right: var(--navbar-container-horizontal-padding); } .navbar-nav { list-style: none; display: flex; align-items: center; height: 100%; padding: var(--navbar-nav-padding); margin-top: var(--navbar-nav-vertical-margin); margin-bottom: var(--navbar-nav-vertical-margin); } .nav-item { height: 100%; } /* Navbar content */ .navbar-content { display: flex; align-items: center; padding: var(--navbar-content-padding); margin: var(--navbar-content-margin); } .navbar-content:first-child { padding-left: 0; margin-left: 0; } .navbar-content:last-child { padding-right: 0; margin-right: 0; } /* Navbar link */ .nav-link { display: flex; align-items: center; height: 100%; white-space: nowrap; font-size: var(--navbar-link-font-size); line-height: var(--navbar-link-line-height); font-weight: var(--navbar-link-font-weight); -webkit-font-smoothing: var(--navbar-link-webkit-font-smoothing); -moz-osx-font-smoothing: var(--navbar-link-moz-osx-font-smoothing); padding: var(--navbar-link-padding); margin: var(--navbar-link-margin); background-clip: var(--navbar-link-bg-clip); text-decoration: var(--navbar-link-text-decoration); color: var(--navbar-link-text-color); background-color: var(--navbar-link-bg-color); background-image: var(--navbar-link-bg-image); border: var(--navbar-link-border-style); border-width: var(--navbar-link-border-width); border-color: var(--navbar-link-border-color); border-radius: var(--navbar-link-border-radius); box-shadow: var(--navbar-link-box-shadow); } .nav-link:hover { text-decoration: var(--navbar-link-text-decoration-hover); color: var(--navbar-link-text-color-hover); background-color: var(--navbar-link-bg-color-hover); background-image: var(--navbar-link-bg-image-hover); border-color: var(--navbar-link-border-color-hover); box-shadow: var(--navbar-link-box-shadow-hover); } /* Active navbar link */ .active .nav-link { -webkit-font-smoothing: var(--navbar-link-active-webkit-font-smoothing); -moz-osx-font-smoothing: var(--navbar-link-active-moz-osx-font-smoothing); background-clip: var(--navbar-link-active-bg-clip); text-decoration: var(--navbar-link-active-text-decoration); color: var(--navbar-link-active-text-color); background-color: var(--navbar-link-active-bg-color); background-image: var(--navbar-link-active-bg-image); border-color: var(--navbar-link-active-border-color); box-shadow: var(--navbar-link-active-box-shadow); } .active .nav-link:hover { text-decoration: var(--navbar-link-active-text-decoration-hover); color: var(--navbar-link-active-text-color-hover); background-color: var(--navbar-link-active-bg-color-hover); background-image: var(--navbar-link-active-bg-image-hover); border-color: var(--navbar-link-active-border-color-hover); box-shadow: var(--navbar-link-active-box-shadow-hover); } /* Navbar brand */ .navbar-brand { display: flex; align-items: center; font-size: var(--navbar-brand-font-size); line-height: var(--navbar-brand-line-height); font-weight: var(--navbar-brand-font-weight); -webkit-font-smoothing: var(--navbar-brand-webkit-font-smoothing); -moz-osx-font-smoothing: var(--navbar-brand-moz-osx-font-smoothing); padding: var(--navbar-brand-padding); margin: var(--navbar-brand-margin); background-clip: var(--navbar-brand-bg-clip); text-decoration: var(--navbar-brand-text-decoration); color: var(--navbar-brand-text-color); background-color: var(--navbar-brand-bg-color); background-image: var(--navbar-brand-bg-image); border: var(--navbar-brand-border-style); border-width: var(--navbar-brand-border-width); border-color: var(--navbar-brand-border-color); border-radius: var(--navbar-brand-border-radius); box-shadow: var(--navbar-brand-box-shadow); } .navbar-brand:hover { text-decoration: var(--navbar-brand-text-decoration-hover); color: var(--navbar-brand-text-color-hover); background-color: var(--navbar-brand-bg-color-hover); background-image: var(--navbar-brand-bg-image-hover); border-color: var(--navbar-brand-border-color-hover); box-shadow: var(--navbar-brand-box-shadow-hover); } .navbar-brand img { height: var(--navbar-brand-image-height); margin-right: var(--navbar-brand-image-margin-end); } /* Navbar form inline */ .navbar > .form-inline { padding: var(--navbar-form-inline-padding); margin: var(--navbar-form-inline-margin); } .navbar > .form-inline:first-child { padding-left: 0; margin-left: 0; } .navbar > .form-inline:last-child { padding-right: 0; margin-right: 0; } .navbar > .form-inline > .form-control, .navbar > .form-inline > .form-group .form-control, .navbar > .form-inline > .form-select, .navbar > .form-inline > .form-group .form-select { min-width: var(--navbar-form-inline-input-min-width); } .navbar > .form-inline > .input-group { min-width: var(--navbar-form-inline-input-group-min-width); } /** * ---------------------------------------------------------------------------- * [ Sidebar content ] * ---------------------------------------------------------------------------- */ .sidebar-menu { list-style: none; padding: var(--sidebar-menu-padding); margin-top: var(--sidebar-menu-vertical-margin); margin-bottom: var(--sidebar-menu-vertical-margin); } .sidebar-content { padding: var(--sidebar-content-padding); margin: var(--sidebar-content-margin); } /* Sidebar link */ .sidebar-link { display: block; font-size: var(--sidebar-link-font-size); line-height: var(--sidebar-link-line-height); font-weight: var(--sidebar-link-font-weight); -webkit-font-smoothing: var(--sidebar-link-webkit-font-smoothing); -moz-osx-font-smoothing: var(--sidebar-link-moz-osx-font-smoothing); padding: var(--sidebar-link-padding); margin: var(--sidebar-link-margin); background-clip: var(--sidebar-link-bg-clip); text-decoration: var(--sidebar-link-text-decoration); color: var(--sidebar-link-text-color); background-color: var(--sidebar-link-bg-color); background-image: var(--sidebar-link-bg-image); border: var(--sidebar-link-border-style); border-width: var(--sidebar-link-border-width); border-color: var(--sidebar-link-border-color); border-radius: var(--sidebar-link-border-radius); box-shadow: var(--sidebar-link-box-shadow); } .sidebar-link:hover { text-decoration: var(--sidebar-link-text-decoration-hover); color: var(--sidebar-link-text-color-hover); background-color: var(--sidebar-link-bg-color-hover); background-image: var(--sidebar-link-bg-image-hover); border-color: var(--sidebar-link-border-color-hover); box-shadow: var(--sidebar-link-box-shadow-hover); } /* Active sidebar link */ .sidebar-link.active { -webkit-font-smoothing: var(--sidebar-link-active-webkit-font-smoothing); -moz-osx-font-smoothing: var(--sidebar-link-active-moz-osx-font-smoothing); background-clip: var(--sidebar-link-active-bg-clip); text-decoration: var(--sidebar-link-active-text-decoration); color: var(--sidebar-link-active-text-color); background-color: var(--sidebar-link-active-bg-color); background-image: var(--sidebar-link-active-bg-image); border-color: var(--sidebar-link-active-border-color); box-shadow: var(--sidebar-link-active-box-shadow); } .sidebar-link.active:hover { text-decoration: var(--sidebar-link-active-text-decoration-hover); color: var(--sidebar-link-active-text-color-hover); background-color: var(--sidebar-link-active-bg-color-hover); background-image: var(--sidebar-link-active-bg-image-hover); border-color: var(--sidebar-link-active-border-color-hover); box-shadow: var(--sidebar-link-active-box-shadow-hover); } /* Sidebar icon */ .sidebar-link-with-icon { display: flex; align-items: center; } .sidebar-icon { display: flex; align-items: center; justify-content: center; font-size: var(--sidebar-icon-font-size); line-height: var(--sidebar-icon-line-height); font-weight: var(--sidebar-icon-font-weight); -webkit-font-smoothing: var(--sidebar-icon-webkit-font-smoothing); -moz-osx-font-smoothing: var(--sidebar-icon-moz-osx-font-smoothing); width: var(--sidebar-icon-width); height: var(--sidebar-icon-height); padding: var(--sidebar-icon-padding); margin-right: var(--sidebar-icon-margin-end); background-clip: var(--sidebar-icon-bg-clip); text-decoration: var(--sidebar-icon-text-decoration); color: var(--sidebar-icon-text-color); background-color: var(--sidebar-icon-bg-color); background-image: var(--sidebar-icon-bg-image); border: var(--sidebar-icon-border-style); border-width: var(--sidebar-icon-border-width); border-color: var(--sidebar-icon-border-color); border-radius: var(--sidebar-icon-border-radius); box-shadow: var(--sidebar-icon-box-shadow); } .sidebar-link-with-icon:hover .sidebar-icon { text-decoration: var(--sidebar-icon-text-decoration-hover); color: var(--sidebar-icon-text-color-hover); background-color: var(--sidebar-icon-bg-color-hover); background-image: var(--sidebar-icon-bg-image-hover); border-color: var(--sidebar-icon-border-color-hover); box-shadow: var(--sidebar-icon-box-shadow-hover); } /* Active sidebar icon */ .sidebar-link-with-icon .sidebar-icon.active { -webkit-font-smoothing: var(--sidebar-icon-active-webkit-font-smoothing); -moz-osx-font-smoothing: var(--sidebar-icon-active-moz-osx-font-smoothing); background-clip: var(--sidebar-icon-active-bg-clip); text-decoration: var(--sidebar-icon-active-text-decoration); color: var(--sidebar-icon-active-text-color); background-color: var(--sidebar-icon-active-bg-color); background-image: var(--sidebar-icon-active-bg-image); border-color: var(--sidebar-icon-active-border-color); box-shadow: var(--sidebar-icon-active-box-shadow); } .sidebar-link-with-icon:hover .sidebar-icon.active { text-decoration: var(--sidebar-icon-active-text-decoration-hover); color: var(--sidebar-icon-active-text-color-hover); background-color: var(--sidebar-icon-active-bg-color-hover); background-image: var(--sidebar-icon-active-bg-image-hover); border-color: var(--sidebar-icon-active-border-color-hover); box-shadow: var(--sidebar-icon-active-box-shadow-hover); } /* Sidebar title */ .sidebar-title { font-family: var(--sidebar-title-font-family); font-size: var(--sidebar-title-font-size); line-height: var(--sidebar-title-line-height); font-weight: var(--sidebar-title-font-weight); -webkit-font-smoothing: var(--sidebar-title-webkit-font-smoothing); -moz-osx-font-smoothing: var(--sidebar-title-moz-osx-font-smoothing); padding: var(--sidebar-title-padding); margin: var(--sidebar-title-margin); } /* Sidebar brand */ .sidebar-brand { display: flex; align-items: center; font-size: var(--sidebar-brand-font-size); line-height: var(--sidebar-brand-line-height); font-weight: var(--sidebar-brand-font-weight); -webkit-font-smoothing: var(--sidebar-brand-webkit-font-smoothing); -moz-osx-font-smoothing: var(--sidebar-brand-moz-osx-font-smoothing); padding: var(--sidebar-brand-padding); margin: var(--sidebar-brand-margin); background-clip: var(--sidebar-brand-bg-clip); text-decoration: var(--sidebar-brand-text-decoration); color: var(--sidebar-brand-text-color); background-color: var(--sidebar-brand-bg-color); background-image: var(--sidebar-brand-bg-image); border: var(--sidebar-brand-border-style); border-width: var(--sidebar-brand-border-width); border-color: var(--sidebar-brand-border-color); border-radius: var(--sidebar-brand-border-radius); box-shadow: var(--sidebar-brand-box-shadow); } .sidebar-brand:hover { text-decoration: var(--sidebar-brand-text-decoration-hover); color: var(--sidebar-brand-text-color-hover); background-color: var(--sidebar-brand-bg-color-hover); background-image: var(--sidebar-brand-bg-image-hover); border-color: var(--sidebar-brand-border-color-hover); box-shadow: var(--sidebar-brand-box-shadow-hover); } .sidebar-brand img { height: var(--sidebar-brand-image-height); margin-right: var(--sidebar-brand-image-margin-end); } /* Sidebar divider */ .sidebar-divider { height: var(--sidebar-divider-height); padding: var(--sidebar-divider-padding); margin: var(--sidebar-divider-margin); background-color: var(--sidebar-divider-color); } /** * ---------------------------------------------------------------------------- * [ Pagination ] * ---------------------------------------------------------------------------- */ .pagination { list-style: none; display: flex; padding: var(--pagination-padding); margin-top: var(--pagination-margin-top); margin-bottom: var(--pagination-margin-bottom); } .page-item { margin-left: calc((-1) * var(--pagination-link-border-width)); } .page-item:first-child { margin-left: 0; } /** * Pagination link * * Pretty much the same styling is also used for list items that contain * ellipsis (to show unknown # of pages in between). Obviously, the different * states (hover and active) are not required for them. */ .page-link, .page-item.ellipsis { position: relative; display: block; text-align: center; font-size: var(--pagination-link-font-size); line-height: var(--pagination-link-line-height); font-weight: var(--pagination-link-font-weight); -webkit-font-smoothing: var(--pagination-link-webkit-font-smoothing); -moz-osx-font-smoothing: var(--pagination-link-moz-osx-font-smoothing); padding: var(--pagination-link-vertical-padding) var(--pagination-link-horizontal-padding); min-width: var(--pagination-link-min-width); background-clip: var(--pagination-link-bg-clip); text-decoration: var(--pagination-link-text-decoration); color: var(--pagination-link-text-color); background-color: var(--pagination-link-bg-color); background-image: var(--pagination-link-bg-image); border: var(--pagination-link-border-style); border-width: var(--pagination-link-border-width); border-color: var(--pagination-link-border-color); border-radius: var(--pagination-link-border-radius); box-shadow: var(--pagination-link-box-shadow); -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; } .page-link:hover { text-decoration: var(--pagination-link-text-decoration-hover); color: var(--pagination-link-text-color-hover); background-color: var(--pagination-link-bg-color-hover); background-image: var(--pagination-link-bg-image-hover); border-color: var(--pagination-link-border-color-hover); box-shadow: var(--pagination-link-box-shadow-hover); } .page-link:active { text-decoration: var(--pagination-link-text-decoration-active); color: var(--pagination-link-text-color-active); background-color: var(--pagination-link-bg-color-active); background-image: var(--pagination-link-bg-image-active); border-color: var(--pagination-link-border-color-active); box-shadow: var(--pagination-link-box-shadow-active); } .page-item.ellipsis::before { content: "\2026"; } /* Small pagination link */ .pagination-sm .page-link, .pagination-sm .page-item.ellipsis { font-size: var(--small-pagination-link-font-size); line-height: var(--small-pagination-link-line-height); padding: var(--small-pagination-link-vertical-padding) var(--small-pagination-link-horizontal-padding); min-width: var(--small-pagination-link-min-width); } /* Large pagination link */ .pagination-lg .page-link, .pagination-lg .page-item.ellipsis { font-size: var(--large-pagination-link-font-size); line-height: var(--large-pagination-link-line-height); padding: var(--large-pagination-link-vertical-padding) var(--large-pagination-link-horizontal-padding); min-width: var(--large-pagination-link-min-width); } /* Rounded pagination link */ .pagination-rounded .page-link, .pagination-rounded .page-item.ellipsis { border-radius: var(--rounded-pagination-link-border-radius); } /* Removing the rounded borders (except first and last item) */ .page-item:not(:first-child) .page-link, .page-item.ellipsis:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .page-item:not(:last-child) .page-link, .page-item.ellipsis:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } /* Active pagination link */ .active .page-link { -webkit-font-smoothing: var(--pagination-link-active-webkit-font-smoothing); -moz-osx-font-smoothing: var(--pagination-link-active-moz-osx-font-smoothing); background-clip: var(--pagination-link-active-bg-clip); text-decoration: var(--pagination-link-active-text-decoration); color: var(--pagination-link-active-text-color); background-color: var(--pagination-link-active-bg-color); background-image: var(--pagination-link-active-bg-image); border-color: var(--pagination-link-active-border-color); box-shadow: var(--pagination-link-active-box-shadow); } .active .page-link:hover { text-decoration: var(--pagination-link-active-text-decoration-hover); color: var(--pagination-link-active-text-color-hover); background-color: var(--pagination-link-active-bg-color-hover); background-image: var(--pagination-link-active-bg-image-hover); border-color: var(--pagination-link-active-border-color-hover); box-shadow: var(--pagination-link-active-box-shadow-hover); } .active .page-link:active { text-decoration: var(--pagination-link-active-text-decoration-active); color: var(--pagination-link-active-text-color-active); background-color: var(--pagination-link-active-bg-color-active); background-image: var(--pagination-link-active-bg-image-active); border-color: var(--pagination-link-active-border-color-active); box-shadow: var(--pagination-link-active-box-shadow-active); } /* Disabled pagination link */ .disabled .page-link { pointer-events: none; -webkit-font-smoothing: var(--pagination-link-disabled-webkit-font-smoothing); -moz-osx-font-smoothing: var(--pagination-link-disabled-moz-osx-font-smoothing); background-clip: var(--pagination-link-disabled-bg-clip); text-decoration: var(--pagination-link-disabled-text-decoration); color: var(--pagination-link-disabled-text-color); background-color: var(--pagination-link-disabled-bg-color); background-image: var(--pagination-link-disabled-bg-image); border-color: var(--pagination-link-disabled-border-color); box-shadow: var(--pagination-link-disabled-box-shadow); } /* Pagination z-indices */ .page-link { z-index: var(--pagination-link-z-index); } .page-link:hover { z-index: var(--pagination-link-z-index-hover); } .page-link:active { z-index: var(--pagination-link-z-index-active); } .page-link:focus-visible { z-index: var(--pagination-link-z-index-focus-visible); } .active .page-link { z-index: var(--pagination-link-active-z-index); } .active .page-link:hover { z-index: var(--pagination-link-active-z-index-hover); } .active .page-link:active { z-index: var(--pagination-link-active-z-index-active); } .active .page-link:focus-visible { z-index: var(--pagination-link-active-z-index-focus-visible); } /** * ---------------------------------------------------------------------------- * [ Breadcrumb ] * ---------------------------------------------------------------------------- */ .breadcrumb { list-style: none; font-size: var(--breadcrumb-font-size); line-height: var(--breadcrumb-line-height); -webkit-font-smoothing: var(--breadcrumb-webkit-font-smoothing); -moz-osx-font-smoothing: var(--breadcrumb-moz-osx-font-smoothing); padding: var(--breadcrumb-padding); margin-top: var(--breadcrumb-margin-top); margin-bottom: var(--breadcrumb-margin-bottom); background-clip: var(--breadcrumb-bg-clip); color: var(--breadcrumb-text-color); background-color: var(--breadcrumb-bg-color); background-image: var(--breadcrumb-bg-image); border: var(--breadcrumb-border-style); border-width: var(--breadcrumb-border-width); border-color: var(--breadcrumb-border-color); border-radius: var(--breadcrumb-border-radius); box-shadow: var(--breadcrumb-box-shadow); } .breadcrumb-item { display: inline-block; } /* Breadcrumb link */ .breadcrumb-item a { -webkit-font-smoothing: var(--breadcrumb-link-webkit-font-smoothing); -moz-osx-font-smoothing: var(--breadcrumb-link-moz-osx-font-smoothing); text-decoration: var(--breadcrumb-link-text-decoration); color: var(--breadcrumb-link-text-color); } .breadcrumb-item a:hover { text-decoration: var(--breadcrumb-link-text-decoration-hover); color: var(--breadcrumb-link-text-color-hover); } /* Active breadcrumb item */ .breadcrumb-item.active, .breadcrumb-item.active a, .breadcrumb-item.active a:hover { pointer-events: none; -webkit-font-smoothing: var(--breadcrumb-item-active-webkit-font-smoothing); -moz-osx-font-smoothing: var(--breadcrumb-item-active-moz-osx-font-smoothing); text-decoration: var(--breadcrumb-item-active-text-decoration); color: var(--breadcrumb-item-active-text-color); } /* Breadcrumb separator */ .breadcrumb-item::before { content: var(--breadcrumb-separator-content); margin-left: var(--breadcrumb-separator-margin-start); margin-right: var(--breadcrumb-separator-margin-end); } .breadcrumb-item:first-child::before { display: none; } /** * ---------------------------------------------------------------------------- * [ Tooltips ] * ---------------------------------------------------------------------------- */ [data-hm-toggle="tooltip"] { position: relative; } /* Tooltip content */ [data-hm-toggle="tooltip"]::before { content: attr(data-hm-title); white-space: normal; word-wrap: break-word; text-align: center; position: absolute; display: block; visibility: hidden; opacity: 0; z-index: 90; transition: opacity 0.2s; font-size: var(--tooltip-font-size); line-height: var(--tooltip-line-height); -webkit-font-smoothing: var(--tooltip-webkit-font-smoothing); -moz-osx-font-smoothing: var(--tooltip-moz-osx-font-smoothing); width: var(--tooltip-width); min-width: var(--tooltip-min-width); max-width: var(--tooltip-max-width); padding: var(--tooltip-padding); background-clip: var(--tooltip-bg-clip); color: var(--tooltip-text-color); background-color: var(--tooltip-bg-color); background-image: var(--tooltip-bg-image); border: var(--tooltip-border-style); border-width: var(--tooltip-border-width); border-color: var(--tooltip-border-color); border-radius: var(--tooltip-border-radius); box-shadow: var(--tooltip-box-shadow); } @media (prefers-reduced-motion) { [data-hm-toggle="tooltip"]::before { transition: 0s; } } /* Showing the tooltip (excluding positioning) */ [data-hm-toggle="tooltip"]:hover::before, [data-hm-toggle="tooltip"]:focus::before { visibility: visible; opacity: 1; } /* Responsive tooltips */ [data-hm-toggle="tooltip"][data-hm-breakpoint]:hover::before, [data-hm-toggle="tooltip"][data-hm-breakpoint]:focus::before { visibility: hidden; } @media (min-width: 577px) { [data-hm-toggle="tooltip"][data-hm-breakpoint="sm"]:hover::before, [data-hm-toggle="tooltip"][data-hm-breakpoint="sm"]:focus::before { visibility: visible; } } @media (min-width: 769px) { [data-hm-toggle="tooltip"][data-hm-breakpoint="md"]:hover::before, [data-hm-toggle="tooltip"][data-hm-breakpoint="md"]:focus::before { visibility: visible; } } @media (min-width: 993px) { [data-hm-toggle="tooltip"][data-hm-breakpoint="lg"]:hover::before, [data-hm-toggle="tooltip"][data-hm-breakpoint="lg"]:focus::before { visibility: visible; } } @media (min-width: 1201px) { [data-hm-toggle="tooltip"][data-hm-breakpoint="xl"]:hover::before, [data-hm-toggle="tooltip"][data-hm-breakpoint="xl"]:focus::before { visibility: visible; } } @media (min-width: 1401px) { [data-hm-toggle="tooltip"][data-hm-breakpoint="xxl"]:hover::before, [data-hm-toggle="tooltip"][data-hm-breakpoint="xxl"]:focus::before { visibility: visible; } } /* Normal tooltip (top) */ [data-hm-toggle="tooltip"]::before { margin: var(--tooltip-offset-negative) 0 0 0; } [data-hm-toggle="tooltip"]::before { top: 0; right: auto; bottom: auto; left: 50%; transform: translate(-50%, -100%); } [data-hm-toggle="tooltip"][data-hm-placement="top-start"]::before { top: 0; right: auto; bottom: auto; left: 0; transform: translateY(-100%); } [data-hm-toggle="tooltip"][data-hm-placement="top-end"]::before { top: 0; right: 0; bottom: auto; left: auto; transform: translateY(-100%); } /* Bottom tooltip */ [data-hm-toggle="tooltip"][data-hm-placement^="bottom"]::before { margin: 0 0 var(--tooltip-offset-negative) 0; } [data-hm-toggle="tooltip"][data-hm-placement="bottom"]::before { top: auto; right: auto; bottom: 0; left: 50%; transform: translate(-50%, 100%); } [data-hm-toggle="tooltip"][data-hm-placement="bottom-start"]::before { top: auto; right: auto; bottom: 0; left: 0; transform: translateY(100%); } [data-hm-toggle="tooltip"][data-hm-placement="bottom-end"]::before { top: auto; right: 0; bottom: 0; left: auto; transform: translateY(100%); } /* End tooltip */ [data-hm-toggle="tooltip"][data-hm-placement^="end"]::before { margin: 0 var(--tooltip-offset-negative) 0 0; } [data-hm-toggle="tooltip"][data-hm-placement="end"]::before { top: 50%; right: 0; bottom: auto; left: auto; transform: translate(100%, -50%); } [data-hm-toggle="tooltip"][data-hm-placement="end-top"]::before { top: 0; right: 0; bottom: auto; left: auto; transform: translateX(100%); } [data-hm-toggle="tooltip"][data-hm-placement="end-bottom"]::before { top: auto; right: 0; bottom: 0; left: auto; transform: translateX(100%); } /* Start tooltip */ [data-hm-toggle="tooltip"][data-hm-placement^="start"]::before { margin: 0 0 0 var(--tooltip-offset-negative); } [data-hm-toggle="tooltip"][data-hm-placement="start"]::before { top: 50%; right: auto; bottom: auto; left: 0; transform: translate(-100%, -50%); } [data-hm-toggle="tooltip"][data-hm-placement="start-top"]::before { top: 0; right: auto; bottom: auto; left: 0; transform: translateX(-100%); } [data-hm-toggle="tooltip"][data-hm-placement="start-bottom"]::before { top: auto; right: auto; bottom: 0; left: 0; transform: translateX(-100%); } /** * ---------------------------------------------------------------------------- * [ Badges ] * ---------------------------------------------------------------------------- */ .badge { position: relative; display: inline-block; white-space: nowrap; text-align: center; vertical-align: baseline; font-size: var(--badge-font-size); line-height: var(--badge-line-height); -webkit-font-smoothing: var(--badge-webkit-font-smoothing); -moz-osx-font-smoothing: var(--badge-moz-osx-font-smoothing); padding: var(--badge-padding); background-clip: var(--badge-bg-clip); text-decoration: var(--badge-text-decoration); color: var(--badge-text-color); background-color: var(--badge-bg-color); background-image: var(--badge-bg-image); border: var(--badge-border-style); border-width: var(--badge-border-width); border-color: var(--badge-border-color); border-radius: var(--badge-border-radius); box-shadow: var(--badge-box-shadow); } a.badge:hover, a.badge-group:hover .badge { text-decoration: var(--badge-text-decoration-hover); color: var(--badge-text-color-hover); background-color: var(--badge-bg-color-hover); background-image: var(--badge-bg-image-hover); border-color: var(--badge-border-color-hover); box-shadow: var(--badge-box-shadow-hover); } /* Pill badge */ .badge-pill { border-radius: var(--pill-badge-border-radius); } /* Reset font size badge */ .badge-fs-reset { font-size: var(--badge-reset-font-size); } /* Primary badge */ .badge-primary { -webkit-font-smoothing: var(--badge-primary-webkit-font-smoothing); -moz-osx-font-smoothing: var(--badge-primary-moz-osx-font-smoothing); background-clip: var(--badge-primary-bg-clip); text-decoration: var(--badge-primary-text-decoration); color: var(--badge-primary-text-color); background-color: var(--badge-primary-bg-color); background-image: var(--badge-primary-bg-image); border-color: var(--badge-primary-border-color); box-shadow: var(--badge-primary-box-shadow); } a.badge-primary:hover, a.badge-group:hover .badge-primary { text-decoration: var(--badge-primary-text-decoration-hover); color: var(--badge-primary-text-color-hover); background-color: var(--badge-primary-bg-color-hover); background-image: var(--badge-primary-bg-image-hover); border-color: var(--badge-primary-border-color-hover); box-shadow: var(--badge-primary-box-shadow-hover); } /* Secondary badge */ .badge-secondary { -webkit-font-smoothing: var(--badge-secondary-webkit-font-smoothing); -moz-osx-font-smoothing: var(--badge-secondary-moz-osx-font-smoothing); background-clip: var(--badge-secondary-bg-clip); text-decoration: var(--badge-secondary-text-decoration); color: var(--badge-secondary-text-color); background-color: var(--badge-secondary-bg-color); background-image: var(--badge-secondary-bg-image); border-color: var(--badge-secondary-border-color); box-shadow: var(--badge-secondary-box-shadow); } a.badge-secondary:hover, a.badge-group:hover .badge-secondary { text-decoration: var(--badge-secondary-text-decoration-hover); color: var(--badge-secondary-text-color-hover); background-color: var(--badge-secondary-bg-color-hover); background-image: var(--badge-secondary-bg-image-hover); border-color: var(--badge-secondary-border-color-hover); box-shadow: var(--badge-secondary-box-shadow-hover); } /* Success badge */ .badge-success { -webkit-font-smoothing: var(--badge-success-webkit-font-smoothing); -moz-osx-font-smoothing: var(--badge-success-moz-osx-font-smoothing); background-clip: var(--badge-success-bg-clip); text-decoration: var(--badge-success-text-decoration); color: var(--badge-success-text-color); background-color: var(--badge-success-bg-color); background-image: var(--badge-success-bg-image); border-color: var(--badge-success-border-color); box-shadow: var(--badge-success-box-shadow); } a.badge-success:hover, a.badge-group:hover .badge-success { text-decoration: var(--badge-success-text-decoration-hover); color: var(--badge-success-text-color-hover); background-color: var(--badge-success-bg-color-hover); background-image: var(--badge-success-bg-image-hover); border-color: var(--badge-success-border-color-hover); box-shadow: var(--badge-success-box-shadow-hover); } /* Warning badge */ .badge-warning { -webkit-font-smoothing: var(--badge-warning-webkit-font-smoothing); -moz-osx-font-smoothing: var(--badge-warning-moz-osx-font-smoothing); background-clip: var(--badge-warning-bg-clip); text-decoration: var(--badge-warning-text-decoration); color: var(--badge-warning-text-color); background-color: var(--badge-warning-bg-color); background-image: var(--badge-warning-bg-image); border-color: var(--badge-warning-border-color); box-shadow: var(--badge-warning-box-shadow); } a.badge-warning:hover, a.badge-group:hover .badge-warning { text-decoration: var(--badge-warning-text-decoration-hover); color: var(--badge-warning-text-color-hover); background-color: var(--badge-warning-bg-color-hover); background-image: var(--badge-warning-bg-image-hover); border-color: var(--badge-warning-border-color-hover); box-shadow: var(--badge-warning-box-shadow-hover); } /* Danger badge */ .badge-danger { -webkit-font-smoothing: var(--badge-danger-webkit-font-smoothing); -moz-osx-font-smoothing: var(--badge-danger-moz-osx-font-smoothing); background-clip: var(--badge-danger-bg-clip); text-decoration: var(--badge-danger-text-decoration); color: var(--badge-danger-text-color); background-color: var(--badge-danger-bg-color); background-image: var(--badge-danger-bg-image); border-color: var(--badge-danger-border-color); box-shadow: var(--badge-danger-box-shadow); } a.badge-danger:hover, a.badge-group:hover .badge-danger { text-decoration: var(--badge-danger-text-decoration-hover); color: var(--badge-danger-text-color-hover); background-color: var(--badge-danger-bg-color-hover); background-image: var(--badge-danger-bg-image-hover); border-color: var(--badge-danger-border-color-hover); box-shadow: var(--badge-danger-box-shadow-hover); } /* Badge group */ .badge-group { display: inline-flex; } a.badge-group { text-decoration: var(--badge-group-text-decoration); } a.badge-group:hover { text-decoration: var(--badge-group-text-decoration-hover); } .badge-group .badge:not(:first-child) { margin-left: calc((-1) * var(--badge-border-width)); border-top-left-radius: 0; border-bottom-left-radius: 0; } .badge-group .badge:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } /* Badge group z-indices */ .badge-group .badge { z-index: var(--badge-group-badge-z-index); } .badge-group a.badge:hover { z-index: var(--badge-group-badge-z-index-hover); } .badge-group a.badge:focus-visible { z-index: var(--badge-group-badge-z-index-focus-visible); } .badge-group .badge-primary, .badge-group .badge-secondary, .badge-group .badge-success, .badge-group .badge-warning, .badge-group .badge-danger { z-index: var(--badge-group-badge-contextual-z-index); } .badge-group a.badge-primary:hover, .badge-group a.badge-secondary:hover, .badge-group a.badge-success:hover, .badge-group a.badge-warning:hover, .badge-group a.badge-danger:hover { z-index: var(--badge-group-badge-contextual-z-index-hover); } .badge-group a.badge-primary:focus-visible, .badge-group a.badge-secondary:focus-visible, .badge-group a.badge-success:focus-visible, .badge-group a.badge-warning:focus-visible, .badge-group a.badge-danger:focus-visible { z-index: var(--badge-group-badge-contextual-z-index-focus-visible); } /** * ---------------------------------------------------------------------------- * [ Button group ] * ---------------------------------------------------------------------------- */ .btn-group, .btn-group-vertical { position: relative; display: inline-flex; vertical-align: middle; } .btn-group > .btn, .btn-group-vertical > .btn { position: relative; flex: 1 1 auto; } .btn-group > .btn:not(:first-child), .btn-group > .btn-group:not(:first-child) { margin-left: calc((-1) * var(--button-border-width)); } .btn-group > .btn:not(:first-child), .btn-group > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } .btn-group > .btn:not(:last-child):not([data-hm-toggle="dropdown"]), .btn-group > .btn-group:not(:last-child) > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; } .btn-group-vertical { flex-direction: column; align-items: flex-start; justify-content: center; } .btn-group-vertical > .btn, .btn-group-vertical > .btn-group { width: 100%; } .btn-group-vertical > .btn:not(:first-child), .btn-group-vertical > .btn-group:not(:first-child) { margin-top: calc((-1) * var(--button-border-width)); } .btn-group-vertical > .btn:not(:first-child), .btn-group-vertical > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-top-right-radius: 0; } .btn-group-vertical > .btn:not(:last-child):not([data-hm-toggle="dropdown"]), .btn-group-vertical > .btn-group:not(:last-child) > .btn { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* Button toolbar */ .btn-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-start; } .btn-toolbar .input-group { min-width: var(--button-toolbar-input-group-min-width); } /* Button group z-indices */ .btn-group > .btn, .btn-group-vertical > .btn { z-index: var(--button-group-button-z-index); } .btn-group > .btn:hover, .btn-group-vertical > .btn:hover { z-index: var(--button-group-button-z-index-hover); } .btn-group > .btn:active, .btn-group-vertical > .btn:active { z-index: var(--button-group-button-z-index-active); } .btn-group > .btn:focus-visible, .btn-group-vertical > .btn:focus-visible { z-index: var(--button-group-button-z-index-focus-visible); } .btn-group > .btn-primary, .btn-group > .btn-secondary, .btn-group > .btn-success, .btn-group > .btn-warning, .btn-group > .btn-danger, .btn-group-vertical > .btn-primary, .btn-group-vertical > .btn-secondary, .btn-group-vertical > .btn-success, .btn-group-vertical > .btn-warning, .btn-group-vertical > .btn-danger { z-index: var(--button-group-button-contextual-z-index); } .btn-group > .btn-primary:hover, .btn-group > .btn-secondary:hover, .btn-group > .btn-success:hover, .btn-group > .btn-warning:hover, .btn-group > .btn-danger:hover, .btn-group-vertical > .btn-primary:hover, .btn-group-vertical > .btn-secondary:hover, .btn-group-vertical > .btn-success:hover, .btn-group-vertical > .btn-warning:hover, .btn-group-vertical > .btn-danger:hover { z-index: var(--button-group-button-contextual-z-index-hover); } .btn-group > .btn-primary:active, .btn-group > .btn-secondary:active, .btn-group > .btn-success:active, .btn-group > .btn-warning:active, .btn-group > .btn-danger:active, .btn-group-vertical > .btn-primary:active, .btn-group-vertical > .btn-secondary:active, .btn-group-vertical > .btn-success:active, .btn-group-vertical > .btn-warning:active, .btn-group-vertical > .btn-danger:active { z-index: var(--button-group-button-contextual-z-index-active); } .btn-group > .btn-primary:focus-visible, .btn-group > .btn-secondary:focus-visible, .btn-group > .btn-success:focus-visible, .btn-group > .btn-warning:focus-visible, .btn-group > .btn-danger:focus-visible, .btn-group-vertical > .btn-primary:focus-visible, .btn-group-vertical > .btn-secondary:focus-visible, .btn-group-vertical > .btn-success:focus-visible, .btn-group-vertical > .btn-warning:focus-visible, .btn-group-vertical > .btn-danger:focus-visible { z-index: var(--button-group-button-contextual-z-index-focus-visible); } /** * ---------------------------------------------------------------------------- * [ List group ] * ---------------------------------------------------------------------------- */ .list-group { display: flex; flex-direction: column; padding-left: var(--list-group-padding-start); margin-top: var(--list-group-margin-top); margin-bottom: var(--list-group-margin-bottom); } .list-group-numbered { list-style-type: none; counter-reset: list-group-numbered-counter; } .list-group-numbered > li::before { content: counters(list-group-numbered-counter, ".") ". "; counter-increment: list-group-numbered-counter; } /* Default list group item */ .list-group-item { position: relative; display: block; width: 100%; text-align: left; line-height: var(--list-group-item-line-height); -webkit-font-smoothing: var(--list-group-item-webkit-font-smoothing); -moz-osx-font-smoothing: var(--list-group-item-moz-osx-font-smoothing); padding: var(--list-group-item-padding); background-clip: var(--list-group-item-bg-clip); text-decoration: var(--list-group-item-text-decoration); color: var(--list-group-item-text-color); background-color: var(--list-group-item-bg-color); background-image: var(--list-group-item-bg-image); border: var(--list-group-item-border-style); border-width: var(--list-group-item-border-width); border-color: var(--list-group-item-border-color); border-radius: var(--list-group-item-border-radius); box-shadow: var(--list-group-item-box-shadow); } .list-group .list-group-item:not(:first-child) { margin-top: calc((-1) * var(--list-group-item-border-width)); border-top-left-radius: 0; border-top-right-radius: 0; } .list-group .list-group-item:not(:last-child) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .list-group-item-action:hover { cursor: pointer; text-decoration: var(--list-group-item-text-decoration-hover); color: var(--list-group-item-text-color-hover); background-color: var(--list-group-item-bg-color-hover); background-image: var(--list-group-item-bg-image-hover); border-color: var(--list-group-item-border-color-hover); box-shadow: var(--list-group-item-box-shadow-hover); } .list-group-item-action:active { text-decoration: var(--list-group-item-text-decoration-active); color: var(--list-group-item-text-color-active); background-color: var(--list-group-item-bg-color-active); background-image: var(--list-group-item-bg-image-active); border-color: var(--list-group-item-border-color-active); box-shadow: var(--list-group-item-box-shadow-active); } /* Active list group item */ .list-group-item.active { -webkit-font-smoothing: var(--list-group-item-active-webkit-font-smoothing); -moz-osx-font-smoothing: var(--list-group-item-active-moz-osx-font-smoothing); background-clip: var(--list-group-item-active-bg-clip); text-decoration: var(--list-group-item-active-text-decoration); color: var(--list-group-item-active-text-color); background-color: var(--list-group-item-active-bg-color); background-image: var(--list-group-item-active-bg-image); border-color: var(--list-group-item-active-border-color); box-shadow: var(--list-group-item-active-box-shadow); } .list-group-item-action.active:hover { text-decoration: var(--list-group-item-active-text-decoration-hover); color: var(--list-group-item-active-text-color-hover); background-color: var(--list-group-item-active-bg-color-hover); background-image: var(--list-group-item-active-bg-image-hover); border-color: var(--list-group-item-active-border-color-hover); box-shadow: var(--list-group-item-active-box-shadow-hover); } .list-group-item-action.active:active { text-decoration: var(--list-group-item-active-text-decoration-active); color: var(--list-group-item-active-text-color-active); background-color: var(--list-group-item-active-bg-color-active); background-image: var(--list-group-item-active-bg-image-active); border-color: var(--list-group-item-active-border-color-active); box-shadow: var(--list-group-item-active-box-shadow-active); } /* Primary list group item */ .list-group-item-primary { -webkit-font-smoothing: var(--list-group-item-primary-webkit-font-smoothing); -moz-osx-font-smoothing: var(--list-group-item-primary-moz-osx-font-smoothing); background-clip: var(--list-group-item-primary-bg-clip); text-decoration: var(--list-group-item-primary-text-decoration); color: var(--list-group-item-primary-text-color); background-color: var(--list-group-item-primary-bg-color); background-image: var(--list-group-item-primary-bg-image); border-color: var(--list-group-item-primary-border-color); box-shadow: var(--list-group-item-primary-box-shadow); } .list-group-item-primary.list-group-item-action:hover { text-decoration: var(--list-group-item-primary-text-decoration-hover); color: var(--list-group-item-primary-text-color-hover); background-color: var(--list-group-item-primary-bg-color-hover); background-image: var(--list-group-item-primary-bg-image-hover); border-color: var(--list-group-item-primary-border-color-hover); box-shadow: var(--list-group-item-primary-box-shadow-hover); } .list-group-item-primary.list-group-item-action:active { text-decoration: var(--list-group-item-primary-text-decoration-active); color: var(--list-group-item-primary-text-color-active); background-color: var(--list-group-item-primary-bg-color-active); background-image: var(--list-group-item-primary-bg-image-active); border-color: var(--list-group-item-primary-border-color-active); box-shadow: var(--list-group-item-primary-box-shadow-active); } /* Secondary list group item */ .list-group-item-secondary { -webkit-font-smoothing: var(--list-group-item-secondary-webkit-font-smoothing); -moz-osx-font-smoothing: var(--list-group-item-secondary-moz-osx-font-smoothing); background-clip: var(--list-group-item-secondary-bg-clip); text-decoration: var(--list-group-item-secondary-text-decoration); color: var(--list-group-item-secondary-text-color); background-color: var(--list-group-item-secondary-bg-color); background-image: var(--list-group-item-secondary-bg-image); border-color: var(--list-group-item-secondary-border-color); box-shadow: var(--list-group-item-secondary-box-shadow); } .list-group-item-secondary.list-group-item-action:hover { text-decoration: var(--list-group-item-secondary-text-decoration-hover); color: var(--list-group-item-secondary-text-color-hover); background-color: var(--list-group-item-secondary-bg-color-hover); background-image: var(--list-group-item-secondary-bg-image-hover); border-color: var(--list-group-item-secondary-border-color-hover); box-shadow: var(--list-group-item-secondary-box-shadow-hover); } .list-group-item-secondary.list-group-item-action:active { text-decoration: var(--list-group-item-secondary-text-decoration-active); color: var(--list-group-item-secondary-text-color-active); background-color: var(--list-group-item-secondary-bg-color-active); background-image: var(--list-group-item-secondary-bg-image-active); border-color: var(--list-group-item-secondary-border-color-active); box-shadow: var(--list-group-item-secondary-box-shadow-active); } /* Success list group item */ .list-group-item-success { -webkit-font-smoothing: var(--list-group-item-success-webkit-font-smoothing); -moz-osx-font-smoothing: var(--list-group-item-success-moz-osx-font-smoothing); background-clip: var(--list-group-item-success-bg-clip); text-decoration: var(--list-group-item-success-text-decoration); color: var(--list-group-item-success-text-color); background-color: var(--list-group-item-success-bg-color); background-image: var(--list-group-item-success-bg-image); border-color: var(--list-group-item-success-border-color); box-shadow: var(--list-group-item-success-box-shadow); } .list-group-item-success.list-group-item-action:hover { text-decoration: var(--list-group-item-success-text-decoration-hover); color: var(--list-group-item-success-text-color-hover); background-color: var(--list-group-item-success-bg-color-hover); background-image: var(--list-group-item-success-bg-image-hover); border-color: var(--list-group-item-success-border-color-hover); box-shadow: var(--list-group-item-success-box-shadow-hover); } .list-group-item-success.list-group-item-action:active { text-decoration: var(--list-group-item-success-text-decoration-active); color: var(--list-group-item-success-text-color-active); background-color: var(--list-group-item-success-bg-color-active); background-image: var(--list-group-item-success-bg-image-active); border-color: var(--list-group-item-success-border-color-active); box-shadow: var(--list-group-item-success-box-shadow-active); } /* Warning list group item */ .list-group-item-warning { -webkit-font-smoothing: var(--list-group-item-warning-webkit-font-smoothing); -moz-osx-font-smoothing: var(--list-group-item-warning-moz-osx-font-smoothing); background-clip: var(--list-group-item-warning-bg-clip); text-decoration: var(--list-group-item-warning-text-decoration); color: var(--list-group-item-warning-text-color); background-color: var(--list-group-item-warning-bg-color); background-image: var(--list-group-item-warning-bg-image); border-color: var(--list-group-item-warning-border-color); box-shadow: var(--list-group-item-warning-box-shadow); } .list-group-item-warning.list-group-item-action:hover { text-decoration: var(--list-group-item-warning-text-decoration-hover); color: var(--list-group-item-warning-text-color-hover); background-color: var(--list-group-item-warning-bg-color-hover); background-image: var(--list-group-item-warning-bg-image-hover); border-color: var(--list-group-item-warning-border-color-hover); box-shadow: var(--list-group-item-warning-box-shadow-hover); } .list-group-item-warning.list-group-item-action:active { text-decoration: var(--list-group-item-warning-text-decoration-active); color: var(--list-group-item-warning-text-color-active); background-color: var(--list-group-item-warning-bg-color-active); background-image: var(--list-group-item-warning-bg-image-active); border-color: var(--list-group-item-warning-border-color-active); box-shadow: var(--list-group-item-warning-box-shadow-active); } /* Danger list group item */ .list-group-item-danger { -webkit-font-smoothing: var(--list-group-item-danger-webkit-font-smoothing); -moz-osx-font-smoothing: var(--list-group-item-danger-moz-osx-font-smoothing); background-clip: var(--list-group-item-danger-bg-clip); text-decoration: var(--list-group-item-danger-text-decoration); color: var(--list-group-item-danger-text-color); background-color: var(--list-group-item-danger-bg-color); background-image: var(--list-group-item-danger-bg-image); border-color: var(--list-group-item-danger-border-color); box-shadow: var(--list-group-item-danger-box-shadow); } .list-group-item-danger.list-group-item-action:hover { text-decoration: var(--list-group-item-danger-text-decoration-hover); color: var(--list-group-item-danger-text-color-hover); background-color: var(--list-group-item-danger-bg-color-hover); background-image: var(--list-group-item-danger-bg-image-hover); border-color: var(--list-group-item-danger-border-color-hover); box-shadow: var(--list-group-item-danger-box-shadow-hover); } .list-group-item-danger.list-group-item-action:active { text-decoration: var(--list-group-item-danger-text-decoration-active); color: var(--list-group-item-danger-text-color-active); background-color: var(--list-group-item-danger-bg-color-active); background-image: var(--list-group-item-danger-bg-image-active); border-color: var(--list-group-item-danger-border-color-active); box-shadow: var(--list-group-item-danger-box-shadow-active); } /* Disabled list group item */ .list-group-item:disabled, .list-group-item.disabled { pointer-events: none; -webkit-font-smoothing: var(--list-group-item-disabled-webkit-font-smoothing); -moz-osx-font-smoothing: var(--list-group-item-disabled-moz-osx-font-smoothing); background-clip: var(--list-group-item-disabled-bg-clip); text-decoration: var(--list-group-item-disabled-text-decoration); color: var(--list-group-item-disabled-text-color); background-color: var(--list-group-item-disabled-bg-color); background-image: var(--list-group-item-disabled-bg-image); border-color: var(--list-group-item-disabled-border-color); box-shadow: var(--list-group-item-disabled-box-shadow); } /* List group horizontal */ .list-group-horizontal { flex-direction: row; } .list-group-horizontal .list-group-item:not(:first-child) { margin-top: 0; margin-left: calc((-1) * var(--list-group-item-border-width)); border-top-left-radius: 0; border-bottom-left-radius: 0; } .list-group-horizontal .list-group-item:first-child { border-bottom-left-radius: var(--list-group-item-border-radius); } .list-group-horizontal .list-group-item:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .list-group-horizontal .list-group-item:last-child { border-top-right-radius: var(--list-group-item-border-radius); } @media (min-width: 577px) { .list-group-horizontal-sm { flex-direction: row; } .list-group-horizontal-sm .list-group-item:not(:first-child) { margin-top: 0; margin-left: calc((-1) * var(--list-group-item-border-width)); border-top-left-radius: 0; border-bottom-left-radius: 0; } .list-group-horizontal-sm .list-group-item:first-child { border-bottom-left-radius: var(--list-group-item-border-radius); } .list-group-horizontal-sm .list-group-item:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .list-group-horizontal-sm .list-group-item:last-child { border-top-right-radius: var(--list-group-item-border-radius); } } @media (min-width: 769px) { .list-group-horizontal-md { flex-direction: row; } .list-group-horizontal-md .list-group-item:not(:first-child) { margin-top: 0; margin-left: calc((-1) * var(--list-group-item-border-width)); border-top-left-radius: 0; border-bottom-left-radius: 0; } .list-group-horizontal-md .list-group-item:first-child { border-bottom-left-radius: var(--list-group-item-border-radius); } .list-group-horizontal-md .list-group-item:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .list-group-horizontal-md .list-group-item:last-child { border-top-right-radius: var(--list-group-item-border-radius); } } @media (min-width: 993px) { .list-group-horizontal-lg { flex-direction: row; } .list-group-horizontal-lg .list-group-item:not(:first-child) { margin-top: 0; margin-left: calc((-1) * var(--list-group-item-border-width)); border-top-left-radius: 0; border-bottom-left-radius: 0; } .list-group-horizontal-lg .list-group-item:first-child { border-bottom-left-radius: var(--list-group-item-border-radius); } .list-group-horizontal-lg .list-group-item:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .list-group-horizontal-lg .list-group-item:last-child { border-top-right-radius: var(--list-group-item-border-radius); } } @media (min-width: 1201px) { .list-group-horizontal-xl { flex-direction: row; } .list-group-horizontal-xl .list-group-item:not(:first-child) { margin-top: 0; margin-left: calc((-1) * var(--list-group-item-border-width)); border-top-left-radius: 0; border-bottom-left-radius: 0; } .list-group-horizontal-xl .list-group-item:first-child { border-bottom-left-radius: var(--list-group-item-border-radius); } .list-group-horizontal-xl .list-group-item:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .list-group-horizontal-xl .list-group-item:last-child { border-top-right-radius: var(--list-group-item-border-radius); } } @media (min-width: 1401px) { .list-group-horizontal-xxl { flex-direction: row; } .list-group-horizontal-xxl .list-group-item:not(:first-child) { margin-top: 0; margin-left: calc((-1) * var(--list-group-item-border-width)); border-top-left-radius: 0; border-bottom-left-radius: 0; } .list-group-horizontal-xxl .list-group-item:first-child { border-bottom-left-radius: var(--list-group-item-border-radius); } .list-group-horizontal-xxl .list-group-item:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .list-group-horizontal-xxl .list-group-item:last-child { border-top-right-radius: var(--list-group-item-border-radius); } } /* List group flush */ .list-group-flush .list-group-item { border-radius: 0; border-left: 0; border-right: 0; } .list-group-flush .list-group-item:first-child { border-top: 0; } .list-group-flush .list-group-item:last-child { border-bottom: 0; } /* List group item z-indices */ .list-group-item { z-index: var(--list-group-item-z-index); } .list-group-item-action:hover { z-index: var(--list-group-item-z-index-hover); } .list-group-item-action:active { z-index: var(--list-group-item-z-index-active); } .list-group-item-action:focus-visible { z-index: var(--list-group-item-z-index-focus-visible); } .list-group-item.active { z-index: var(--list-group-item-active-z-index); } .list-group-item-action.active:hover { z-index: var(--list-group-item-active-z-index-hover); } .list-group-item-action.active:active { z-index: var(--list-group-item-active-z-index-active); } .list-group-item-action.active:focus-visible { z-index: var(--list-group-item-active-z-index-focus-visible); } .list-group-item-primary, .list-group-item-secondary, .list-group-item-success, .list-group-item-warning, .list-group-item-danger { z-index: var(--list-group-item-contextual-z-index); } .list-group-item-primary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:hover, .list-group-item-success.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:hover { z-index: var(--list-group-item-contextual-z-index-hover); } .list-group-item-primary.list-group-item-action:active, .list-group-item-secondary.list-group-item-action:active, .list-group-item-success.list-group-item-action:active, .list-group-item-warning.list-group-item-action:active, .list-group-item-danger.list-group-item-action:active { z-index: var(--list-group-item-contextual-z-index-active); } .list-group-item-primary.list-group-item-action:focus-visible, .list-group-item-secondary.list-group-item-action:focus-visible, .list-group-item-success.list-group-item-action:focus-visible, .list-group-item-warning.list-group-item-action:focus-visible, .list-group-item-danger.list-group-item-action:focus-visible { z-index: var(--list-group-item-contextual-z-index-focus-visible); } /** * ---------------------------------------------------------------------------- * [ Collapse ] * ---------------------------------------------------------------------------- */ /* Fixes a Chrome bug */ details, details * { box-sizing: border-box; } /* Collapse header */ .collapse-header { position: relative; cursor: pointer; font-size: var(--collapse-header-font-size); line-height: var(--collapse-header-line-height); font-weight: var(--collapse-header-font-weight); -webkit-font-smoothing: var(--collapse-header-webkit-font-smoothing); -moz-osx-font-smoothing: var(--collapse-header-moz-osx-font-smoothing); padding: var(--collapse-header-vertical-padding) var(--collapse-header-horizontal-padding); background-clip: var(--collapse-header-bg-clip); color: var(--collapse-header-text-color); background-color: var(--collapse-header-bg-color); border: var(--collapse-header-border-style); border-width: var(--collapse-header-border-width); border-color: var(--collapse-header-border-color); border-radius: var(--collapse-header-border-radius); box-shadow: var(--collapse-header-box-shadow); } .collapse-header:focus { border-color: var(--collapse-header-border-color-focus); box-shadow: var(--collapse-header-box-shadow-focus); outline: var(--collapse-header-outline-focus); } .collapse-panel[open] .collapse-header { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* Collapse header arrow set using background image */ .collapse-header { list-style-type: none; } .collapse-header::-webkit-details-marker { display: none; } .collapse-header::marker { display: none; } .collapse-header { padding-left: var(--collapse-header-padding-start-with-bg-image); background-image: var(--collapse-header-bg-image); background-size: var(--collapse-header-bg-size); background-repeat: var(--collapse-header-bg-repeat); background-position: var(--collapse-header-bg-position); } .collapse-panel[open] .collapse-header { padding-left: var(--open-collapse-header-padding-start-with-bg-image); background-image: var(--open-collapse-header-bg-image); background-size: var(--open-collapse-header-bg-size); background-repeat: var(--open-collapse-header-bg-repeat); background-position: var(--open-collapse-header-bg-position); } .collapse-header.without-arrow, .collapse-panel[open] .collapse-header.without-arrow { padding-left: var(--collapse-header-horizontal-padding); background-image: none; background-size: auto auto; background-repeat: repeat; background-position: 0% 0%; } /* Collapse header focus effect (::after) */ .collapse-header:focus::after { content: ""; position: absolute; display: block; top: var(--collapse-header-focus-effect-top); left: var(--collapse-header-focus-effect-start); width: var(--collapse-header-focus-effect-width); height: var(--collapse-header-focus-effect-height); border-radius: var(--collapse-header-focus-effect-border-radius); box-shadow: var(--collapse-header-focus-effect-box-shadow); } /* Controlling display based on collapse open state */ .collapse-panel[open] .hidden-collapse-open { display: none; } .collapse-panel:not([open]) .hidden-collapse-closed { display: none; } /* Collapse content */ .collapse-content { -webkit-font-smoothing: var(--collapse-content-webkit-font-smoothing); -moz-osx-font-smoothing: var(--collapse-content-moz-osx-font-smoothing); padding: var(--collapse-content-padding); background-clip: var(--collapse-content-bg-clip); color: var(--collapse-content-text-color); background-color: var(--collapse-content-bg-color); background-image: var(--collapse-content-bg-image); border: var(--collapse-content-border-style); border-width: var(--collapse-content-border-width); border-color: var(--collapse-content-border-color); border-bottom-left-radius: var(--collapse-content-border-radius); border-bottom-right-radius: var(--collapse-content-border-radius); box-shadow: var(--collapse-content-box-shadow); } /* Collapse group */ .collapse-group .collapse-panel:not(:first-child) { margin-top: calc((-1) * var(--collapse-header-border-width)); } .collapse-group .collapse-panel:not(:first-child) .collapse-header { border-top-left-radius: 0; border-top-right-radius: 0; } .collapse-group .collapse-panel:not([open]):not(:last-child) .collapse-header { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .collapse-group .collapse-panel[open]:not(:first-child) .collapse-content { border-top-left-radius: 0; border-top-right-radius: 0; } .collapse-group .collapse-panel[open]:not(:last-child) .collapse-content { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; } /* Collapse group flush */ .collapse-group-flush .collapse-header, .collapse-group-flush .collapse-content { border-radius: 0; border-left: 0; border-right: 0; } .collapse-group-flush .collapse-panel:first-child .collapse-header { border-top: 0; } .collapse-group-flush .collapse-panel:not([open]):last-child .collapse-header, .collapse-group-flush .collapse-panel:last-child .collapse-content { border-bottom: 0; } /** * On browsers that don't support the
and tags (such as * IE), collapse panels are styled to be always open. This is so that they at * least look right for the most part. */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* Collapse header */ .collapse-panel .collapse-header { cursor: auto; } .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-left: var(--open-collapse-header-padding-start-with-bg-image); background-image: var(--open-collapse-header-bg-image); background-size: var(--open-collapse-header-bg-size); background-repeat: var(--open-collapse-header-bg-repeat); background-position: var(--open-collapse-header-bg-position); } /* Controlling display based on collapse open state */ .collapse-panel .hidden-collapse-open { display: none; } .collapse-panel:not([open]) .hidden-collapse-closed { display: inline-block; } /* Collapse group */ .collapse-group .collapse-panel:not(:first-child) .collapse-content { border-top-left-radius: 0; border-top-right-radius: 0; } .collapse-group .collapse-panel:not(:last-child) .collapse-content { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; } /* Collapse group flush */ .collapse-group-flush .collapse-panel:not([open]):last-child .collapse-header { border-bottom: var(--collapse-header-border-width) var(--collapse-header-border-style) var(--collapse-header-border-color); } } /** * ---------------------------------------------------------------------------- * [ Tabs ] * ---------------------------------------------------------------------------- */ .tabs { list-style: none; position: relative; display: flex; flex-wrap: wrap; padding: var(--tabs-padding); margin-top: var(--tabs-margin-top); margin-bottom: var(--tabs-margin-bottom); border-bottom-style: var(--tabs-border-style); border-bottom-width: var(--tabs-border-width); border-bottom-color: var(--tabs-border-color); } /* Tab item */ .tab-item { margin-right: var(--tab-item-horizontal-margin); } .tab-item:last-child { margin-right: 0; } /* Tab link */ .tab-link { display: block; text-align: center; white-space: nowrap; cursor: pointer; font-size: var(--tab-link-font-size); line-height: var(--tab-link-line-height); font-weight: var(--tab-link-font-weight); -webkit-font-smoothing: var(--tab-link-webkit-font-smoothing); -moz-osx-font-smoothing: var(--tab-link-moz-osx-font-smoothing); padding: var(--tab-link-padding); background-clip: var(--tab-link-bg-clip); text-decoration: var(--tab-link-text-decoration); color: var(--tab-link-text-color); background-color: var(--tab-link-bg-color); background-image: var(--tab-link-bg-image); border: var(--tab-link-border-style); border-width: var(--tab-link-border-width); border-color: var(--tab-link-border-color); border-radius: var(--tab-link-border-radius); box-shadow: var(--tab-link-box-shadow); -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; } .tab-link:hover { text-decoration: var(--tab-link-text-decoration-hover); color: var(--tab-link-text-color-hover); background-color: var(--tab-link-bg-color-hover); background-image: var(--tab-link-bg-image-hover); border-color: var(--tab-link-border-color-hover); box-shadow: var(--tab-link-box-shadow-hover); } /* Active tab link */ .tab-link.active { -webkit-font-smoothing: var(--tab-link-active-webkit-font-smoothing); -moz-osx-font-smoothing: var(--tab-link-active-moz-osx-font-smoothing); background-clip: var(--tab-link-active-bg-clip); text-decoration: var(--tab-link-active-text-decoration); color: var(--tab-link-active-text-color); background-color: var(--tab-link-active-bg-color); background-image: var(--tab-link-active-bg-image); border-color: var(--tab-link-active-border-color); box-shadow: var(--tab-link-active-box-shadow); } .tab-link.active:hover { text-decoration: var(--tab-link-active-text-decoration-hover); color: var(--tab-link-active-text-color-hover); background-color: var(--tab-link-active-bg-color-hover); background-image: var(--tab-link-active-bg-image-hover); border-color: var(--tab-link-active-border-color-hover); box-shadow: var(--tab-link-active-box-shadow-hover); } /* Disabled tab link */ .tab-link.disabled { pointer-events: none; -webkit-font-smoothing: var(--tab-link-disabled-webkit-font-smoothing); -moz-osx-font-smoothing: var(--tab-link-disabled-moz-osx-font-smoothing); background-clip: var(--tab-link-disabled-bg-clip); text-decoration: var(--tab-link-disabled-text-decoration); color: var(--tab-link-disabled-text-color); background-color: var(--tab-link-disabled-bg-color); background-image: var(--tab-link-disabled-bg-image); border-color: var(--tab-link-disabled-border-color); box-shadow: var(--tab-link-disabled-box-shadow); } /* Tabs fill */ .tabs-fill .tab-item { flex: 1 1 auto; text-align: center; } @media (min-width: 577px) { .tabs-fill-sm .tab-item { flex: 1 1 auto; text-align: center; } } @media (min-width: 769px) { .tabs-fill-md .tab-item { flex: 1 1 auto; text-align: center; } } @media (min-width: 993px) { .tabs-fill-lg .tab-item { flex: 1 1 auto; text-align: center; } } @media (min-width: 1201px) { .tabs-fill-xl .tab-item { flex: 1 1 auto; text-align: center; } } @media (min-width: 1401px) { .tabs-fill-xxl .tab-item { flex: 1 1 auto; text-align: center; } } /* Tabs justified */ .tabs-justified .tab-item { flex-basis: 0; flex-grow: 1; text-align: center; } @media (min-width: 577px) { .tabs-justified-sm .tab-item { flex-basis: 0; flex-grow: 1; text-align: center; } } @media (min-width: 769px) { .tabs-justified-md .tab-item { flex-basis: 0; flex-grow: 1; text-align: center; } } @media (min-width: 993px) { .tabs-justified-lg .tab-item { flex-basis: 0; flex-grow: 1; text-align: center; } } @media (min-width: 1201px) { .tabs-justified-xl .tab-item { flex-basis: 0; flex-grow: 1; text-align: center; } } @media (min-width: 1401px) { .tabs-justified-xxl .tab-item { flex-basis: 0; flex-grow: 1; text-align: center; } } /* Responsive tabs */ .tabs-responsive { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 576px) { .tabs-responsive-sm-down { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (max-width: 768px) { .tabs-responsive-md-down { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (max-width: 992px) { .tabs-responsive-lg-down { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (max-width: 1200px) { .tabs-responsive-xl-down { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (max-width: 1400px) { .tabs-responsive-xxl-down { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* Tab pane */ .tab-pane { display: none; opacity: 0; transition: opacity 0.4s; } .tab-pane.fade-in { opacity: 1; } .tab-pane.set-d-block { display: block; } .tab-pane.active { opacity: 1; display: block; } @media (prefers-reduced-motion) { .tab-pane { transition: 0s; } } /** * ---------------------------------------------------------------------------- * [ Progress ] * ---------------------------------------------------------------------------- */ .progress { display: flex; overflow: hidden; height: var(--progress-height); background-clip: var(--progress-bg-clip); background-color: var(--progress-bg-color); background-image: var(--progress-bg-image); border: var(--progress-border-style); border-width: var(--progress-border-width); border-color: var(--progress-border-color); border-radius: var(--progress-border-radius); box-shadow: var(--progress-box-shadow); } .progress-labelled { height: var(--progress-labelled-height); } /* Progress bar */ .progress-bar { display: flex; flex-direction: column; justify-content: center; overflow: hidden; text-align: center; white-space: nowrap; font-size: var(--progress-bar-font-size); line-height: var(--progress-bar-line-height); -webkit-font-smoothing: var(--progress-bar-webkit-font-smoothing); -moz-osx-font-smoothing: var(--progress-bar-moz-osx-font-smoothing); color: var(--progress-bar-text-color); background-color: var(--progress-bar-bg-color); background-image: var(--progress-bar-bg-image); box-shadow: var(--progress-bar-box-shadow); border-radius: var(--progress-bar-border-radius); } /* Progress bar stacking */ .progress-bar:not(:only-child) { border-radius: 0; } .progress-bar:not(:only-child):last-child { border-top-right-radius: var(--progress-bar-border-radius); border-bottom-right-radius: var(--progress-bar-border-radius); } /* Progress bar animated */ .progress-bar-animated { position: relative; } .progress-bar-animated::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; animation: progress-bar-shine 2s infinite; border-radius: var(--progress-bar-animated-highlight-border-radius); background: var(--progress-bar-animated-highlight-bg); } @keyframes progress-bar-shine { from { transform: translateX(-100%); opacity: 0.8; } to { transform: translateX(0); opacity: 0.1; } } /* Primary progress bar */ .progress-bar-primary { -webkit-font-smoothing: var(--progress-bar-primary-webkit-font-smoothing); -moz-osx-font-smoothing: var(--progress-bar-primary-moz-osx-font-smoothing); color: var(--progress-bar-primary-text-color); background-color: var(--progress-bar-primary-bg-color); background-image: var(--progress-bar-primary-bg-image); box-shadow: var(--progress-bar-primary-box-shadow); } .progress-bar-primary.progress-bar-animated::before { background: var(--progress-bar-primary-animated-highlight-bg); } /* Secondary progress bar */ .progress-bar-secondary { -webkit-font-smoothing: var(--progress-bar-secondary-webkit-font-smoothing); -moz-osx-font-smoothing: var(--progress-bar-secondary-moz-osx-font-smoothing); color: var(--progress-bar-secondary-text-color); background-color: var(--progress-bar-secondary-bg-color); background-image: var(--progress-bar-secondary-bg-image); box-shadow: var(--progress-bar-secondary-box-shadow); } .progress-bar-secondary.progress-bar-animated::before { background: var(--progress-bar-secondary-animated-highlight-bg); } /* Success progress bar */ .progress-bar-success { -webkit-font-smoothing: var(--progress-bar-success-webkit-font-smoothing); -moz-osx-font-smoothing: var(--progress-bar-success-moz-osx-font-smoothing); color: var(--progress-bar-success-text-color); background-color: var(--progress-bar-success-bg-color); background-image: var(--progress-bar-success-bg-image); box-shadow: var(--progress-bar-success-box-shadow); } .progress-bar-success.progress-bar-animated::before { background: var(--progress-bar-success-animated-highlight-bg); } /* Warning progress bar */ .progress-bar-warning { -webkit-font-smoothing: var(--progress-bar-warning-webkit-font-smoothing); -moz-osx-font-smoothing: var(--progress-bar-warning-moz-osx-font-smoothing); color: var(--progress-bar-warning-text-color); background-color: var(--progress-bar-warning-bg-color); background-image: var(--progress-bar-warning-bg-image); box-shadow: var(--progress-bar-warning-box-shadow); } .progress-bar-warning.progress-bar-animated::before { background: var(--progress-bar-warning-animated-highlight-bg); } /* Danger progress bar */ .progress-bar-danger { -webkit-font-smoothing: var(--progress-bar-danger-webkit-font-smoothing); -moz-osx-font-smoothing: var(--progress-bar-danger-moz-osx-font-smoothing); color: var(--progress-bar-danger-text-color); background-color: var(--progress-bar-danger-bg-color); background-image: var(--progress-bar-danger-bg-image); box-shadow: var(--progress-bar-danger-box-shadow); } .progress-bar-danger.progress-bar-animated::before { background: var(--progress-bar-danger-animated-highlight-bg); } /* Progress group */ .progress-group { position: relative; display: flex; flex-wrap: wrap; align-items: center; width: 100%; } .progress-group > .progress { position: relative; flex: 1 1 0%; } .progress-group > .progress, .progress-group > .progress-group-label { margin-left: var(--progress-group-item-margin); margin-right: var(--progress-group-item-margin); } .progress-group > .progress:first-child, .progress-group > .progress-group-label:first-child { margin-left: 0; } .progress-group > .progress:last-child, .progress-group > .progress-group-label:last-child { margin-right: 0; } /** * ---------------------------------------------------------------------------- * [ Spinners ] * ---------------------------------------------------------------------------- */ /* Border spinner */ .spinner-border { display: inline-block; animation: 0.75s linear infinite spinner-border; width: var(--border-spinner-width-height); height: var(--border-spinner-width-height); vertical-align: var(--border-spinner-vertical-align); border: var(--border-spinner-border-style); border-width: var(--border-spinner-border-width); border-color: var(--border-spinner-border-color); border-radius: var(--border-spinner-border-radius); } .spinner-border-sm { width: var(--small-border-spinner-width-height); height: var(--small-border-spinner-width-height); border-width: var(--small-border-spinner-border-width); } @keyframes spinner-border { to { transform: rotate(360deg) /*rtl:ignore*/; } } @media (prefers-reduced-motion: reduce) { .spinner-border { animation-duration: 1.5s; } } /* Grow spinner */ .spinner-grow { display: inline-block; opacity: 0; animation: 0.75s linear infinite spinner-grow; width: var(--grow-spinner-width-height); height: var(--grow-spinner-width-height); vertical-align: var(--grow-spinner-vertical-align); background-color: var(--grow-spinner-bg-color); border-radius: var(--grow-spinner-border-radius); } .spinner-grow-sm { width: var(--small-grow-spinner-width-height); height: var(--small-grow-spinner-width-height); } @keyframes spinner-grow { 0% { transform: scale(0); } 50% { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .spinner-grow { animation-duration: 1.5s; } } /** * ---------------------------------------------------------------------------- * [ Placeholder ] * ---------------------------------------------------------------------------- */ .placeholder { display: inline-block; vertical-align: middle; cursor: wait; min-height: var(--placeholder-min-height); opacity: var(--placeholder-opacity); background-color: var(--placeholder-bg-color); background-image: var(--placeholder-bg-image); } .placeholder.btn::before { display: inline-block; content: ""; } /** * Contextual buttons as placeholders * * The following overrides are needed because the default disabled contextual * buttons are styled without any use of the context colors. * * It is expected that buttons used as placholders will always be disabled. */ .placeholder.btn-primary { background-clip: var(--button-primary-bg-clip); background-color: var(--button-primary-bg-color); background-image: var(--button-primary-bg-image); border-color: var(--button-primary-border-color); box-shadow: var(--button-primary-box-shadow); } .placeholder.btn-secondary { background-clip: var(--button-secondary-bg-clip); background-color: var(--button-secondary-bg-color); background-image: var(--button-secondary-bg-image); border-color: var(--button-secondary-border-color); box-shadow: var(--button-secondary-box-shadow); } .placeholder.btn-success { background-clip: var(--button-success-bg-clip); background-color: var(--button-success-bg-color); background-image: var(--button-success-bg-image); border-color: var(--button-success-border-color); box-shadow: var(--button-success-box-shadow); } .placeholder.btn-warning { background-clip: var(--button-warning-bg-clip); background-color: var(--button-warning-bg-color); background-image: var(--button-warning-bg-image); border-color: var(--button-warning-border-color); box-shadow: var(--button-warning-box-shadow); } .placeholder.btn-danger { background-clip: var(--button-danger-bg-clip); background-color: var(--button-danger-bg-color); background-image: var(--button-danger-bg-image); border-color: var(--button-danger-border-color); box-shadow: var(--button-danger-box-shadow); } /* Placeholder glow */ .placeholder-glow .placeholder { animation: placeholder-glow 2s ease-in-out infinite; } @keyframes placeholder-glow { 50% { opacity: 0.2; } } /** * ---------------------------------------------------------------------------- * [ Display utilities ] * ---------------------------------------------------------------------------- */ .d-inline { display: inline !important; } .d-inline-block { display: inline-block !important; } .d-block { display: block !important; } .d-grid { display: grid !important; } .d-table { display: table !important; } .d-table-row { display: table-row !important; } .d-table-cell { display: table-cell !important; } .d-flex { display: flex !important; } .d-inline-flex { display: inline-flex !important; } .d-none { display: none !important; } @media (min-width: 577px) { .d-sm-inline { display: inline !important; } .d-sm-inline-block { display: inline-block !important; } .d-sm-block { display: block !important; } .d-sm-grid { display: grid !important; } .d-sm-table { display: table !important; } .d-sm-table-row { display: table-row !important; } .d-sm-table-cell { display: table-cell !important; } .d-sm-flex { display: flex !important; } .d-sm-inline-flex { display: inline-flex !important; } .d-sm-none { display: none !important; } } @media (min-width: 769px) { .d-md-inline { display: inline !important; } .d-md-inline-block { display: inline-block !important; } .d-md-block { display: block !important; } .d-md-grid { display: grid !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: flex !important; } .d-md-inline-flex { display: inline-flex !important; } .d-md-none { display: none !important; } } @media (min-width: 993px) { .d-lg-inline { display: inline !important; } .d-lg-inline-block { display: inline-block !important; } .d-lg-block { display: block !important; } .d-lg-grid { display: grid !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: flex !important; } .d-lg-inline-flex { display: inline-flex !important; } .d-lg-none { display: none !important; } } @media (min-width: 1201px) { .d-xl-inline { display: inline !important; } .d-xl-inline-block { display: inline-block !important; } .d-xl-block { display: block !important; } .d-xl-grid { display: grid !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: flex !important; } .d-xl-inline-flex { display: inline-flex !important; } .d-xl-none { display: none !important; } } @media (min-width: 1401px) { .d-xxl-inline { display: inline !important; } .d-xxl-inline-block { display: inline-block !important; } .d-xxl-block { display: block !important; } .d-xxl-grid { display: grid !important; } .d-xxl-table { display: table !important; } .d-xxl-table-row { display: table-row !important; } .d-xxl-table-cell { display: table-cell !important; } .d-xxl-flex { display: flex !important; } .d-xxl-inline-flex { display: inline-flex !important; } .d-xxl-none { display: none !important; } } @media print { .d-print-inline { display: inline !important; } .d-print-inline-block { display: inline-block !important; } .d-print-block { display: block !important; } .d-print-grid { display: grid !important; } .d-print-table { display: table !important; } .d-print-table-row { display: table-row !important; } .d-print-table-cell { display: table-cell !important; } .d-print-flex { display: flex !important; } .d-print-inline-flex { display: inline-flex !important; } .d-print-none { display: none !important; } } /* Hidden in light and dark mode */ html:not(.dark-mode) .hidden-lm { display: none !important; } .dark-mode .hidden-dm { display: none !important; } /** * ---------------------------------------------------------------------------- * [ Flex utilities ] * ---------------------------------------------------------------------------- */ .flex-row { flex-direction: row !important; } .flex-column { flex-direction: column !important; } .flex-row-reverse { flex-direction: row-reverse !important; } .flex-column-reverse { flex-direction: column-reverse !important; } .flex-wrap { flex-wrap: wrap !important; } .flex-nowrap { flex-wrap: nowrap !important; } .flex-wrap-reverse { flex-wrap: wrap-reverse !important; } .flex-fill { flex: 1 1 auto !important; } .flex-grow-0 { flex-grow: 0 !important; } .flex-grow-1 { flex-grow: 1 !important; } .flex-shrink-0 { flex-shrink: 0 !important; } .flex-shrink-1 { flex-shrink: 1 !important; } .justify-content-start { justify-content: flex-start !important; } .justify-content-end { justify-content: flex-end !important; } .justify-content-center { justify-content: center !important; } .justify-content-between { justify-content: space-between !important; } .justify-content-around { justify-content: space-around !important; } .justify-content-evenly { justify-content: space-evenly !important; } .align-items-start { align-items: flex-start !important; } .align-items-end { align-items: flex-end !important; } .align-items-center { align-items: center !important; } .align-items-baseline { align-items: baseline !important; } .align-items-stretch { align-items: stretch !important; } .align-content-start { align-content: flex-start !important; } .align-content-end { align-content: flex-end !important; } .align-content-center { align-content: center !important; } .align-content-between { align-content: space-between !important; } .align-content-around { align-content: space-around !important; } .align-content-stretch { align-content: stretch !important; } .align-self-auto { align-self: auto !important; } .align-self-start { align-self: flex-start !important; } .align-self-end { align-self: flex-end !important; } .align-self-center { align-self: center !important; } .align-self-baseline { align-self: baseline !important; } .align-self-stretch { align-self: stretch !important; } .order-0 { order: 0 !important; } .order-1 { order: 1 !important; } .order-2 { order: 2 !important; } .order-3 { order: 3 !important; } .order-4 { order: 4 !important; } .order-5 { order: 5 !important; } .order-last { order: 6 !important; } @media (min-width: 577px) { .flex-sm-row { flex-direction: row !important; } .flex-sm-column { flex-direction: column !important; } .flex-sm-row-reverse { flex-direction: row-reverse !important; } .flex-sm-column-reverse { flex-direction: column-reverse !important; } .flex-sm-wrap { flex-wrap: wrap !important; } .flex-sm-nowrap { flex-wrap: nowrap !important; } .flex-sm-wrap-reverse { flex-wrap: wrap-reverse !important; } .flex-sm-fill { flex: 1 1 auto !important; } .flex-sm-grow-0 { flex-grow: 0 !important; } .flex-sm-grow-1 { flex-grow: 1 !important; } .flex-sm-shrink-0 { flex-shrink: 0 !important; } .flex-sm-shrink-1 { flex-shrink: 1 !important; } .justify-content-sm-start { justify-content: flex-start !important; } .justify-content-sm-end { justify-content: flex-end !important; } .justify-content-sm-center { justify-content: center !important; } .justify-content-sm-between { justify-content: space-between !important; } .justify-content-sm-around { justify-content: space-around !important; } .justify-content-sm-evenly { justify-content: space-evenly !important; } .align-items-sm-start { align-items: flex-start !important; } .align-items-sm-end { align-items: flex-end !important; } .align-items-sm-center { align-items: center !important; } .align-items-sm-baseline { align-items: baseline !important; } .align-items-sm-stretch { align-items: stretch !important; } .align-content-sm-start { align-content: flex-start !important; } .align-content-sm-end { align-content: flex-end !important; } .align-content-sm-center { align-content: center !important; } .align-content-sm-between { align-content: space-between !important; } .align-content-sm-around { align-content: space-around !important; } .align-content-sm-stretch { align-content: stretch !important; } .align-self-sm-auto { align-self: auto !important; } .align-self-sm-start { align-self: flex-start !important; } .align-self-sm-end { align-self: flex-end !important; } .align-self-sm-center { align-self: center !important; } .align-self-sm-baseline { align-self: baseline !important; } .align-self-sm-stretch { align-self: stretch !important; } .order-sm-0 { order: 0 !important; } .order-sm-1 { order: 1 !important; } .order-sm-2 { order: 2 !important; } .order-sm-3 { order: 3 !important; } .order-sm-4 { order: 4 !important; } .order-sm-5 { order: 5 !important; } .order-sm-last { order: 6 !important; } } @media (min-width: 769px) { .flex-md-row { flex-direction: row !important; } .flex-md-column { flex-direction: column !important; } .flex-md-row-reverse { flex-direction: row-reverse !important; } .flex-md-column-reverse { flex-direction: column-reverse !important; } .flex-md-wrap { flex-wrap: wrap !important; } .flex-md-nowrap { flex-wrap: nowrap !important; } .flex-md-wrap-reverse { flex-wrap: wrap-reverse !important; } .flex-md-fill { flex: 1 1 auto !important; } .flex-md-grow-0 { flex-grow: 0 !important; } .flex-md-grow-1 { flex-grow: 1 !important; } .flex-md-shrink-0 { flex-shrink: 0 !important; } .flex-md-shrink-1 { flex-shrink: 1 !important; } .justify-content-md-start { justify-content: flex-start !important; } .justify-content-md-end { justify-content: flex-end !important; } .justify-content-md-center { justify-content: center !important; } .justify-content-md-between { justify-content: space-between !important; } .justify-content-md-around { justify-content: space-around !important; } .justify-content-md-evenly { justify-content: space-evenly !important; } .align-items-md-start { align-items: flex-start !important; } .align-items-md-end { align-items: flex-end !important; } .align-items-md-center { align-items: center !important; } .align-items-md-baseline { align-items: baseline !important; } .align-items-md-stretch { align-items: stretch !important; } .align-content-md-start { align-content: flex-start !important; } .align-content-md-end { align-content: flex-end !important; } .align-content-md-center { align-content: center !important; } .align-content-md-between { align-content: space-between !important; } .align-content-md-around { align-content: space-around !important; } .align-content-md-stretch { align-content: stretch !important; } .align-self-md-auto { align-self: auto !important; } .align-self-md-start { align-self: flex-start !important; } .align-self-md-end { align-self: flex-end !important; } .align-self-md-center { align-self: center !important; } .align-self-md-baseline { align-self: baseline !important; } .align-self-md-stretch { align-self: stretch !important; } .order-md-0 { order: 0 !important; } .order-md-1 { order: 1 !important; } .order-md-2 { order: 2 !important; } .order-md-3 { order: 3 !important; } .order-md-4 { order: 4 !important; } .order-md-5 { order: 5 !important; } .order-md-last { order: 6 !important; } } @media (min-width: 993px) { .flex-lg-row { flex-direction: row !important; } .flex-lg-column { flex-direction: column !important; } .flex-lg-row-reverse { flex-direction: row-reverse !important; } .flex-lg-column-reverse { flex-direction: column-reverse !important; } .flex-lg-wrap { flex-wrap: wrap !important; } .flex-lg-nowrap { flex-wrap: nowrap !important; } .flex-lg-wrap-reverse { flex-wrap: wrap-reverse !important; } .flex-lg-fill { flex: 1 1 auto !important; } .flex-lg-grow-0 { flex-grow: 0 !important; } .flex-lg-grow-1 { flex-grow: 1 !important; } .flex-lg-shrink-0 { flex-shrink: 0 !important; } .flex-lg-shrink-1 { flex-shrink: 1 !important; } .justify-content-lg-start { justify-content: flex-start !important; } .justify-content-lg-end { justify-content: flex-end !important; } .justify-content-lg-center { justify-content: center !important; } .justify-content-lg-between { justify-content: space-between !important; } .justify-content-lg-around { justify-content: space-around !important; } .justify-content-lg-evenly { justify-content: space-evenly !important; } .align-items-lg-start { align-items: flex-start !important; } .align-items-lg-end { align-items: flex-end !important; } .align-items-lg-center { align-items: center !important; } .align-items-lg-baseline { align-items: baseline !important; } .align-items-lg-stretch { align-items: stretch !important; } .align-content-lg-start { align-content: flex-start !important; } .align-content-lg-end { align-content: flex-end !important; } .align-content-lg-center { align-content: center !important; } .align-content-lg-between { align-content: space-between !important; } .align-content-lg-around { align-content: space-around !important; } .align-content-lg-stretch { align-content: stretch !important; } .align-self-lg-auto { align-self: auto !important; } .align-self-lg-start { align-self: flex-start !important; } .align-self-lg-end { align-self: flex-end !important; } .align-self-lg-center { align-self: center !important; } .align-self-lg-baseline { align-self: baseline !important; } .align-self-lg-stretch { align-self: stretch !important; } .order-lg-0 { order: 0 !important; } .order-lg-1 { order: 1 !important; } .order-lg-2 { order: 2 !important; } .order-lg-3 { order: 3 !important; } .order-lg-4 { order: 4 !important; } .order-lg-5 { order: 5 !important; } .order-lg-last { order: 6 !important; } } @media (min-width: 1201px) { .flex-xl-row { flex-direction: row !important; } .flex-xl-column { flex-direction: column !important; } .flex-xl-row-reverse { flex-direction: row-reverse !important; } .flex-xl-column-reverse { flex-direction: column-reverse !important; } .flex-xl-wrap { flex-wrap: wrap !important; } .flex-xl-nowrap { flex-wrap: nowrap !important; } .flex-xl-wrap-reverse { flex-wrap: wrap-reverse !important; } .flex-xl-fill { flex: 1 1 auto !important; } .flex-xl-grow-0 { flex-grow: 0 !important; } .flex-xl-grow-1 { flex-grow: 1 !important; } .flex-xl-shrink-0 { flex-shrink: 0 !important; } .flex-xl-shrink-1 { flex-shrink: 1 !important; } .justify-content-xl-start { justify-content: flex-start !important; } .justify-content-xl-end { justify-content: flex-end !important; } .justify-content-xl-center { justify-content: center !important; } .justify-content-xl-between { justify-content: space-between !important; } .justify-content-xl-around { justify-content: space-around !important; } .justify-content-xl-evenly { justify-content: space-evenly !important; } .align-items-xl-start { align-items: flex-start !important; } .align-items-xl-end { align-items: flex-end !important; } .align-items-xl-center { align-items: center !important; } .align-items-xl-baseline { align-items: baseline !important; } .align-items-xl-stretch { align-items: stretch !important; } .align-content-xl-start { align-content: flex-start !important; } .align-content-xl-end { align-content: flex-end !important; } .align-content-xl-center { align-content: center !important; } .align-content-xl-between { align-content: space-between !important; } .align-content-xl-around { align-content: space-around !important; } .align-content-xl-stretch { align-content: stretch !important; } .align-self-xl-auto { align-self: auto !important; } .align-self-xl-start { align-self: flex-start !important; } .align-self-xl-end { align-self: flex-end !important; } .align-self-xl-center { align-self: center !important; } .align-self-xl-baseline { align-self: baseline !important; } .align-self-xl-stretch { align-self: stretch !important; } .order-xl-0 { order: 0 !important; } .order-xl-1 { order: 1 !important; } .order-xl-2 { order: 2 !important; } .order-xl-3 { order: 3 !important; } .order-xl-4 { order: 4 !important; } .order-xl-5 { order: 5 !important; } .order-xl-last { order: 6 !important; } } @media (min-width: 1401px) { .flex-xxl-row { flex-direction: row !important; } .flex-xxl-column { flex-direction: column !important; } .flex-xxl-row-reverse { flex-direction: row-reverse !important; } .flex-xxl-column-reverse { flex-direction: column-reverse !important; } .flex-xxl-wrap { flex-wrap: wrap !important; } .flex-xxl-nowrap { flex-wrap: nowrap !important; } .flex-xxl-wrap-reverse { flex-wrap: wrap-reverse !important; } .flex-xxl-fill { flex: 1 1 auto !important; } .flex-xxl-grow-0 { flex-grow: 0 !important; } .flex-xxl-grow-1 { flex-grow: 1 !important; } .flex-xxl-shrink-0 { flex-shrink: 0 !important; } .flex-xxl-shrink-1 { flex-shrink: 1 !important; } .justify-content-xxl-start { justify-content: flex-start !important; } .justify-content-xxl-end { justify-content: flex-end !important; } .justify-content-xxl-center { justify-content: center !important; } .justify-content-xxl-between { justify-content: space-between !important; } .justify-content-xxl-around { justify-content: space-around !important; } .justify-content-xxl-evenly { justify-content: space-evenly !important; } .align-items-xxl-start { align-items: flex-start !important; } .align-items-xxl-end { align-items: flex-end !important; } .align-items-xxl-center { align-items: center !important; } .align-items-xxl-baseline { align-items: baseline !important; } .align-items-xxl-stretch { align-items: stretch !important; } .align-content-xxl-start { align-content: flex-start !important; } .align-content-xxl-end { align-content: flex-end !important; } .align-content-xxl-center { align-content: center !important; } .align-content-xxl-between { align-content: space-between !important; } .align-content-xxl-around { align-content: space-around !important; } .align-content-xxl-stretch { align-content: stretch !important; } .align-self-xxl-auto { align-self: auto !important; } .align-self-xxl-start { align-self: flex-start !important; } .align-self-xxl-end { align-self: flex-end !important; } .align-self-xxl-center { align-self: center !important; } .align-self-xxl-baseline { align-self: baseline !important; } .align-self-xxl-stretch { align-self: stretch !important; } .order-xxl-0 { order: 0 !important; } .order-xxl-1 { order: 1 !important; } .order-xxl-2 { order: 2 !important; } .order-xxl-3 { order: 3 !important; } .order-xxl-4 { order: 4 !important; } .order-xxl-5 { order: 5 !important; } .order-xxl-last { order: 6 !important; } } /* Flex reset */ .flex-reset { flex: 0 1 auto !important; } @media (min-width: 577px) { .flex-sm-reset { flex: 0 1 auto !important; } } @media (min-width: 769px) { .flex-md-reset { flex: 0 1 auto !important; } } @media (min-width: 993px) { .flex-lg-reset { flex: 0 1 auto !important; } } @media (min-width: 1201px) { .flex-xl-reset { flex: 0 1 auto !important; } } @media (min-width: 1401px) { .flex-xxl-reset { flex: 0 1 auto !important; } } /** * ---------------------------------------------------------------------------- * [ Spacing utilities ] * ---------------------------------------------------------------------------- */ /* 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; } .p-30 { padding: 3rem !important; } .p-40 { padding: 4rem !important; } .p-50 { padding: 5rem !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; } .px-30 { padding-left: 3rem !important; padding-right: 3rem !important; } .px-40 { padding-left: 4rem !important; padding-right: 4rem !important; } .px-50 { padding-left: 5rem !important; padding-right: 5rem !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; } .py-30 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .py-40 { padding-top: 4rem !important; padding-bottom: 4rem !important; } .py-50 { padding-top: 5rem !important; padding-bottom: 5rem !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; } .pt-30 { padding-top: 3rem !important; } .pt-40 { padding-top: 4rem !important; } .pt-50 { padding-top: 5rem !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; } .pb-30 { padding-bottom: 3rem !important; } .pb-40 { padding-bottom: 4rem !important; } .pb-50 { padding-bottom: 5rem !important; } .ps-0 { padding-left: 0 !important; } .ps-5 { padding-left: 0.5rem !important; } .ps-10 { padding-left: 1rem !important; } .ps-15 { padding-left: 1.5rem !important; } .ps-20 { padding-left: 2rem !important; } .ps-30 { padding-left: 3rem !important; } .ps-40 { padding-left: 4rem !important; } .ps-50 { padding-left: 5rem !important; } .pe-0 { padding-right: 0 !important; } .pe-5 { padding-right: 0.5rem !important; } .pe-10 { padding-right: 1rem !important; } .pe-15 { padding-right: 1.5rem !important; } .pe-20 { padding-right: 2rem !important; } .pe-30 { padding-right: 3rem !important; } .pe-40 { padding-right: 4rem !important; } .pe-50 { padding-right: 5rem !important; } @media (min-width: 577px) { .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; } .p-sm-30 { padding: 3rem !important; } .p-sm-40 { padding: 4rem !important; } .p-sm-50 { padding: 5rem !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; } .px-sm-30 { padding-left: 3rem !important; padding-right: 3rem !important; } .px-sm-40 { padding-left: 4rem !important; padding-right: 4rem !important; } .px-sm-50 { padding-left: 5rem !important; padding-right: 5rem !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; } .py-sm-30 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .py-sm-40 { padding-top: 4rem !important; padding-bottom: 4rem !important; } .py-sm-50 { padding-top: 5rem !important; padding-bottom: 5rem !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; } .pt-sm-30 { padding-top: 3rem !important; } .pt-sm-40 { padding-top: 4rem !important; } .pt-sm-50 { padding-top: 5rem !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; } .pb-sm-30 { padding-bottom: 3rem !important; } .pb-sm-40 { padding-bottom: 4rem !important; } .pb-sm-50 { padding-bottom: 5rem !important; } .ps-sm-0 { padding-left: 0 !important; } .ps-sm-5 { padding-left: 0.5rem !important; } .ps-sm-10 { padding-left: 1rem !important; } .ps-sm-15 { padding-left: 1.5rem !important; } .ps-sm-20 { padding-left: 2rem !important; } .ps-sm-30 { padding-left: 3rem !important; } .ps-sm-40 { padding-left: 4rem !important; } .ps-sm-50 { padding-left: 5rem !important; } .pe-sm-0 { padding-right: 0 !important; } .pe-sm-5 { padding-right: 0.5rem !important; } .pe-sm-10 { padding-right: 1rem !important; } .pe-sm-15 { padding-right: 1.5rem !important; } .pe-sm-20 { padding-right: 2rem !important; } .pe-sm-30 { padding-right: 3rem !important; } .pe-sm-40 { padding-right: 4rem !important; } .pe-sm-50 { padding-right: 5rem !important; } } @media (min-width: 769px) { .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; } .p-md-30 { padding: 3rem !important; } .p-md-40 { padding: 4rem !important; } .p-md-50 { padding: 5rem !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; } .px-md-30 { padding-left: 3rem !important; padding-right: 3rem !important; } .px-md-40 { padding-left: 4rem !important; padding-right: 4rem !important; } .px-md-50 { padding-left: 5rem !important; padding-right: 5rem !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; } .py-md-30 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .py-md-40 { padding-top: 4rem !important; padding-bottom: 4rem !important; } .py-md-50 { padding-top: 5rem !important; padding-bottom: 5rem !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; } .pt-md-30 { padding-top: 3rem !important; } .pt-md-40 { padding-top: 4rem !important; } .pt-md-50 { padding-top: 5rem !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; } .pb-md-30 { padding-bottom: 3rem !important; } .pb-md-40 { padding-bottom: 4rem !important; } .pb-md-50 { padding-bottom: 5rem !important; } .ps-md-0 { padding-left: 0 !important; } .ps-md-5 { padding-left: 0.5rem !important; } .ps-md-10 { padding-left: 1rem !important; } .ps-md-15 { padding-left: 1.5rem !important; } .ps-md-20 { padding-left: 2rem !important; } .ps-md-30 { padding-left: 3rem !important; } .ps-md-40 { padding-left: 4rem !important; } .ps-md-50 { padding-left: 5rem !important; } .pe-md-0 { padding-right: 0 !important; } .pe-md-5 { padding-right: 0.5rem !important; } .pe-md-10 { padding-right: 1rem !important; } .pe-md-15 { padding-right: 1.5rem !important; } .pe-md-20 { padding-right: 2rem !important; } .pe-md-30 { padding-right: 3rem !important; } .pe-md-40 { padding-right: 4rem !important; } .pe-md-50 { padding-right: 5rem !important; } } @media (min-width: 993px) { .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; } .p-lg-30 { padding: 3rem !important; } .p-lg-40 { padding: 4rem !important; } .p-lg-50 { padding: 5rem !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; } .px-lg-30 { padding-left: 3rem !important; padding-right: 3rem !important; } .px-lg-40 { padding-left: 4rem !important; padding-right: 4rem !important; } .px-lg-50 { padding-left: 5rem !important; padding-right: 5rem !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; } .py-lg-30 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .py-lg-40 { padding-top: 4rem !important; padding-bottom: 4rem !important; } .py-lg-50 { padding-top: 5rem !important; padding-bottom: 5rem !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; } .pt-lg-30 { padding-top: 3rem !important; } .pt-lg-40 { padding-top: 4rem !important; } .pt-lg-50 { padding-top: 5rem !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; } .pb-lg-30 { padding-bottom: 3rem !important; } .pb-lg-40 { padding-bottom: 4rem !important; } .pb-lg-50 { padding-bottom: 5rem !important; } .ps-lg-0 { padding-left: 0 !important; } .ps-lg-5 { padding-left: 0.5rem !important; } .ps-lg-10 { padding-left: 1rem !important; } .ps-lg-15 { padding-left: 1.5rem !important; } .ps-lg-20 { padding-left: 2rem !important; } .ps-lg-30 { padding-left: 3rem !important; } .ps-lg-40 { padding-left: 4rem !important; } .ps-lg-50 { padding-left: 5rem !important; } .pe-lg-0 { padding-right: 0 !important; } .pe-lg-5 { padding-right: 0.5rem !important; } .pe-lg-10 { padding-right: 1rem !important; } .pe-lg-15 { padding-right: 1.5rem !important; } .pe-lg-20 { padding-right: 2rem !important; } .pe-lg-30 { padding-right: 3rem !important; } .pe-lg-40 { padding-right: 4rem !important; } .pe-lg-50 { padding-right: 5rem !important; } } @media (min-width: 1201px) { .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; } .p-xl-30 { padding: 3rem !important; } .p-xl-40 { padding: 4rem !important; } .p-xl-50 { padding: 5rem !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; } .px-xl-30 { padding-left: 3rem !important; padding-right: 3rem !important; } .px-xl-40 { padding-left: 4rem !important; padding-right: 4rem !important; } .px-xl-50 { padding-left: 5rem !important; padding-right: 5rem !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; } .py-xl-30 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .py-xl-40 { padding-top: 4rem !important; padding-bottom: 4rem !important; } .py-xl-50 { padding-top: 5rem !important; padding-bottom: 5rem !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; } .pt-xl-30 { padding-top: 3rem !important; } .pt-xl-40 { padding-top: 4rem !important; } .pt-xl-50 { padding-top: 5rem !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; } .pb-xl-30 { padding-bottom: 3rem !important; } .pb-xl-40 { padding-bottom: 4rem !important; } .pb-xl-50 { padding-bottom: 5rem !important; } .ps-xl-0 { padding-left: 0 !important; } .ps-xl-5 { padding-left: 0.5rem !important; } .ps-xl-10 { padding-left: 1rem !important; } .ps-xl-15 { padding-left: 1.5rem !important; } .ps-xl-20 { padding-left: 2rem !important; } .ps-xl-30 { padding-left: 3rem !important; } .ps-xl-40 { padding-left: 4rem !important; } .ps-xl-50 { padding-left: 5rem !important; } .pe-xl-0 { padding-right: 0 !important; } .pe-xl-5 { padding-right: 0.5rem !important; } .pe-xl-10 { padding-right: 1rem !important; } .pe-xl-15 { padding-right: 1.5rem !important; } .pe-xl-20 { padding-right: 2rem !important; } .pe-xl-30 { padding-right: 3rem !important; } .pe-xl-40 { padding-right: 4rem !important; } .pe-xl-50 { padding-right: 5rem !important; } } @media (min-width: 1401px) { .p-xxl-0 { padding: 0 !important; } .p-xxl-5 { padding: 0.5rem !important; } .p-xxl-10 { padding: 1rem !important; } .p-xxl-15 { padding: 1.5rem !important; } .p-xxl-20 { padding: 2rem !important; } .p-xxl-30 { padding: 3rem !important; } .p-xxl-40 { padding: 4rem !important; } .p-xxl-50 { padding: 5rem !important; } .px-xxl-0 { padding-left: 0 !important; padding-right: 0 !important; } .px-xxl-5 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .px-xxl-10 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-xxl-15 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .px-xxl-20 { padding-left: 2rem !important; padding-right: 2rem !important; } .px-xxl-30 { padding-left: 3rem !important; padding-right: 3rem !important; } .px-xxl-40 { padding-left: 4rem !important; padding-right: 4rem !important; } .px-xxl-50 { padding-left: 5rem !important; padding-right: 5rem !important; } .py-xxl-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-xxl-5 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-xxl-10 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-xxl-15 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-xxl-20 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .py-xxl-30 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .py-xxl-40 { padding-top: 4rem !important; padding-bottom: 4rem !important; } .py-xxl-50 { padding-top: 5rem !important; padding-bottom: 5rem !important; } .pt-xxl-0 { padding-top: 0 !important; } .pt-xxl-5 { padding-top: 0.5rem !important; } .pt-xxl-10 { padding-top: 1rem !important; } .pt-xxl-15 { padding-top: 1.5rem !important; } .pt-xxl-20 { padding-top: 2rem !important; } .pt-xxl-30 { padding-top: 3rem !important; } .pt-xxl-40 { padding-top: 4rem !important; } .pt-xxl-50 { padding-top: 5rem !important; } .pb-xxl-0 { padding-bottom: 0 !important; } .pb-xxl-5 { padding-bottom: 0.5rem !important; } .pb-xxl-10 { padding-bottom: 1rem !important; } .pb-xxl-15 { padding-bottom: 1.5rem !important; } .pb-xxl-20 { padding-bottom: 2rem !important; } .pb-xxl-30 { padding-bottom: 3rem !important; } .pb-xxl-40 { padding-bottom: 4rem !important; } .pb-xxl-50 { padding-bottom: 5rem !important; } .ps-xxl-0 { padding-left: 0 !important; } .ps-xxl-5 { padding-left: 0.5rem !important; } .ps-xxl-10 { padding-left: 1rem !important; } .ps-xxl-15 { padding-left: 1.5rem !important; } .ps-xxl-20 { padding-left: 2rem !important; } .ps-xxl-30 { padding-left: 3rem !important; } .ps-xxl-40 { padding-left: 4rem !important; } .ps-xxl-50 { padding-left: 5rem !important; } .pe-xxl-0 { padding-right: 0 !important; } .pe-xxl-5 { padding-right: 0.5rem !important; } .pe-xxl-10 { padding-right: 1rem !important; } .pe-xxl-15 { padding-right: 1.5rem !important; } .pe-xxl-20 { padding-right: 2rem !important; } .pe-xxl-30 { padding-right: 3rem !important; } .pe-xxl-40 { padding-right: 4rem !important; } .pe-xxl-50 { padding-right: 5rem !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-30 { margin: 3rem !important; } .m-40 { margin: 4rem !important; } .m-50 { margin: 5rem !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-30 { margin-left: 3rem !important; margin-right: 3rem !important; } .mx-40 { margin-left: 4rem !important; margin-right: 4rem !important; } .mx-50 { margin-left: 5rem !important; margin-right: 5rem !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-30 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .my-40 { margin-top: 4rem !important; margin-bottom: 4rem !important; } .my-50 { margin-top: 5rem !important; margin-bottom: 5rem !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-30 { margin-top: 3rem !important; } .mt-40 { margin-top: 4rem !important; } .mt-50 { margin-top: 5rem !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-30 { margin-bottom: 3rem !important; } .mb-40 { margin-bottom: 4rem !important; } .mb-50 { margin-bottom: 5rem !important; } .mb-auto { margin-bottom: auto !important; } .ms-0 { margin-left: 0 !important; } .ms-5 { margin-left: 0.5rem !important; } .ms-10 { margin-left: 1rem !important; } .ms-15 { margin-left: 1.5rem !important; } .ms-20 { margin-left: 2rem !important; } .ms-30 { margin-left: 3rem !important; } .ms-40 { margin-left: 4rem !important; } .ms-50 { margin-left: 5rem !important; } .ms-auto { margin-left: auto !important; } .me-0 { margin-right: 0 !important; } .me-5 { margin-right: 0.5rem !important; } .me-10 { margin-right: 1rem !important; } .me-15 { margin-right: 1.5rem !important; } .me-20 { margin-right: 2rem !important; } .me-30 { margin-right: 3rem !important; } .me-40 { margin-right: 4rem !important; } .me-50 { margin-right: 5rem !important; } .me-auto { margin-right: auto !important; } @media (min-width: 577px) { .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-30 { margin: 3rem !important; } .m-sm-40 { margin: 4rem !important; } .m-sm-50 { margin: 5rem !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-30 { margin-left: 3rem !important; margin-right: 3rem !important; } .mx-sm-40 { margin-left: 4rem !important; margin-right: 4rem !important; } .mx-sm-50 { margin-left: 5rem !important; margin-right: 5rem !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-30 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .my-sm-40 { margin-top: 4rem !important; margin-bottom: 4rem !important; } .my-sm-50 { margin-top: 5rem !important; margin-bottom: 5rem !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-30 { margin-top: 3rem !important; } .mt-sm-40 { margin-top: 4rem !important; } .mt-sm-50 { margin-top: 5rem !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-30 { margin-bottom: 3rem !important; } .mb-sm-40 { margin-bottom: 4rem !important; } .mb-sm-50 { margin-bottom: 5rem !important; } .mb-sm-auto { margin-bottom: auto !important; } .ms-sm-0 { margin-left: 0 !important; } .ms-sm-5 { margin-left: 0.5rem !important; } .ms-sm-10 { margin-left: 1rem !important; } .ms-sm-15 { margin-left: 1.5rem !important; } .ms-sm-20 { margin-left: 2rem !important; } .ms-sm-30 { margin-left: 3rem !important; } .ms-sm-40 { margin-left: 4rem !important; } .ms-sm-50 { margin-left: 5rem !important; } .ms-sm-auto { margin-left: auto !important; } .me-sm-0 { margin-right: 0 !important; } .me-sm-5 { margin-right: 0.5rem !important; } .me-sm-10 { margin-right: 1rem !important; } .me-sm-15 { margin-right: 1.5rem !important; } .me-sm-20 { margin-right: 2rem !important; } .me-sm-30 { margin-right: 3rem !important; } .me-sm-40 { margin-right: 4rem !important; } .me-sm-50 { margin-right: 5rem !important; } .me-sm-auto { margin-right: auto !important; } } @media (min-width: 769px) { .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-30 { margin: 3rem !important; } .m-md-40 { margin: 4rem !important; } .m-md-50 { margin: 5rem !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-30 { margin-left: 3rem !important; margin-right: 3rem !important; } .mx-md-40 { margin-left: 4rem !important; margin-right: 4rem !important; } .mx-md-50 { margin-left: 5rem !important; margin-right: 5rem !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-30 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .my-md-40 { margin-top: 4rem !important; margin-bottom: 4rem !important; } .my-md-50 { margin-top: 5rem !important; margin-bottom: 5rem !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-30 { margin-top: 3rem !important; } .mt-md-40 { margin-top: 4rem !important; } .mt-md-50 { margin-top: 5rem !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-30 { margin-bottom: 3rem !important; } .mb-md-40 { margin-bottom: 4rem !important; } .mb-md-50 { margin-bottom: 5rem !important; } .mb-md-auto { margin-bottom: auto !important; } .ms-md-0 { margin-left: 0 !important; } .ms-md-5 { margin-left: 0.5rem !important; } .ms-md-10 { margin-left: 1rem !important; } .ms-md-15 { margin-left: 1.5rem !important; } .ms-md-20 { margin-left: 2rem !important; } .ms-md-30 { margin-left: 3rem !important; } .ms-md-40 { margin-left: 4rem !important; } .ms-md-50 { margin-left: 5rem !important; } .ms-md-auto { margin-left: auto !important; } .me-md-0 { margin-right: 0 !important; } .me-md-5 { margin-right: 0.5rem !important; } .me-md-10 { margin-right: 1rem !important; } .me-md-15 { margin-right: 1.5rem !important; } .me-md-20 { margin-right: 2rem !important; } .me-md-30 { margin-right: 3rem !important; } .me-md-40 { margin-right: 4rem !important; } .me-md-50 { margin-right: 5rem !important; } .me-md-auto { margin-right: auto !important; } } @media (min-width: 993px) { .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-30 { margin: 3rem !important; } .m-lg-40 { margin: 4rem !important; } .m-lg-50 { margin: 5rem !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-30 { margin-left: 3rem !important; margin-right: 3rem !important; } .mx-lg-40 { margin-left: 4rem !important; margin-right: 4rem !important; } .mx-lg-50 { margin-left: 5rem !important; margin-right: 5rem !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-30 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .my-lg-40 { margin-top: 4rem !important; margin-bottom: 4rem !important; } .my-lg-50 { margin-top: 5rem !important; margin-bottom: 5rem !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-30 { margin-top: 3rem !important; } .mt-lg-40 { margin-top: 4rem !important; } .mt-lg-50 { margin-top: 5rem !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-30 { margin-bottom: 3rem !important; } .mb-lg-40 { margin-bottom: 4rem !important; } .mb-lg-50 { margin-bottom: 5rem !important; } .mb-lg-auto { margin-bottom: auto !important; } .ms-lg-0 { margin-left: 0 !important; } .ms-lg-5 { margin-left: 0.5rem !important; } .ms-lg-10 { margin-left: 1rem !important; } .ms-lg-15 { margin-left: 1.5rem !important; } .ms-lg-20 { margin-left: 2rem !important; } .ms-lg-30 { margin-left: 3rem !important; } .ms-lg-40 { margin-left: 4rem !important; } .ms-lg-50 { margin-left: 5rem !important; } .ms-lg-auto { margin-left: auto !important; } .me-lg-0 { margin-right: 0 !important; } .me-lg-5 { margin-right: 0.5rem !important; } .me-lg-10 { margin-right: 1rem !important; } .me-lg-15 { margin-right: 1.5rem !important; } .me-lg-20 { margin-right: 2rem !important; } .me-lg-30 { margin-right: 3rem !important; } .me-lg-40 { margin-right: 4rem !important; } .me-lg-50 { margin-right: 5rem !important; } .me-lg-auto { margin-right: auto !important; } } @media (min-width: 1201px) { .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-30 { margin: 3rem !important; } .m-xl-40 { margin: 4rem !important; } .m-xl-50 { margin: 5rem !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-30 { margin-left: 3rem !important; margin-right: 3rem !important; } .mx-xl-40 { margin-left: 4rem !important; margin-right: 4rem !important; } .mx-xl-50 { margin-left: 5rem !important; margin-right: 5rem !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-30 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .my-xl-40 { margin-top: 4rem !important; margin-bottom: 4rem !important; } .my-xl-50 { margin-top: 5rem !important; margin-bottom: 5rem !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-30 { margin-top: 3rem !important; } .mt-xl-40 { margin-top: 4rem !important; } .mt-xl-50 { margin-top: 5rem !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-30 { margin-bottom: 3rem !important; } .mb-xl-40 { margin-bottom: 4rem !important; } .mb-xl-50 { margin-bottom: 5rem !important; } .mb-xl-auto { margin-bottom: auto !important; } .ms-xl-0 { margin-left: 0 !important; } .ms-xl-5 { margin-left: 0.5rem !important; } .ms-xl-10 { margin-left: 1rem !important; } .ms-xl-15 { margin-left: 1.5rem !important; } .ms-xl-20 { margin-left: 2rem !important; } .ms-xl-30 { margin-left: 3rem !important; } .ms-xl-40 { margin-left: 4rem !important; } .ms-xl-50 { margin-left: 5rem !important; } .ms-xl-auto { margin-left: auto !important; } .me-xl-0 { margin-right: 0 !important; } .me-xl-5 { margin-right: 0.5rem !important; } .me-xl-10 { margin-right: 1rem !important; } .me-xl-15 { margin-right: 1.5rem !important; } .me-xl-20 { margin-right: 2rem !important; } .me-xl-30 { margin-right: 3rem !important; } .me-xl-40 { margin-right: 4rem !important; } .me-xl-50 { margin-right: 5rem !important; } .me-xl-auto { margin-right: auto !important; } } @media (min-width: 1401px) { .m-xxl-0 { margin: 0 !important; } .m-xxl-5 { margin: 0.5rem !important; } .m-xxl-10 { margin: 1rem !important; } .m-xxl-15 { margin: 1.5rem !important; } .m-xxl-20 { margin: 2rem !important; } .m-xxl-30 { margin: 3rem !important; } .m-xxl-40 { margin: 4rem !important; } .m-xxl-50 { margin: 5rem !important; } .m-xxl-auto { margin: auto !important; } .mx-xxl-0 { margin-left: 0 !important; margin-right: 0 !important; } .mx-xxl-5 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; } .mx-xxl-10 { margin-left: 1rem !important; margin-right: 1rem !important; } .mx-xxl-15 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .mx-xxl-20 { margin-left: 2rem !important; margin-right: 2rem !important; } .mx-xxl-30 { margin-left: 3rem !important; margin-right: 3rem !important; } .mx-xxl-40 { margin-left: 4rem !important; margin-right: 4rem !important; } .mx-xxl-50 { margin-left: 5rem !important; margin-right: 5rem !important; } .mx-xxl-auto { margin-left: auto !important; margin-right: auto !important; } .my-xxl-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-xxl-5 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-xxl-10 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-xxl-15 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-xxl-20 { margin-top: 2rem !important; margin-bottom: 2rem !important; } .my-xxl-30 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .my-xxl-40 { margin-top: 4rem !important; margin-bottom: 4rem !important; } .my-xxl-50 { margin-top: 5rem !important; margin-bottom: 5rem !important; } .my-xxl-auto { margin-top: auto !important; margin-bottom: auto !important; } .mt-xxl-0 { margin-top: 0 !important; } .mt-xxl-5 { margin-top: 0.5rem !important; } .mt-xxl-10 { margin-top: 1rem !important; } .mt-xxl-15 { margin-top: 1.5rem !important; } .mt-xxl-20 { margin-top: 2rem !important; } .mt-xxl-30 { margin-top: 3rem !important; } .mt-xxl-40 { margin-top: 4rem !important; } .mt-xxl-50 { margin-top: 5rem !important; } .mt-xxl-auto { margin-top: auto !important; } .mb-xxl-0 { margin-bottom: 0 !important; } .mb-xxl-5 { margin-bottom: 0.5rem !important; } .mb-xxl-10 { margin-bottom: 1rem !important; } .mb-xxl-15 { margin-bottom: 1.5rem !important; } .mb-xxl-20 { margin-bottom: 2rem !important; } .mb-xxl-30 { margin-bottom: 3rem !important; } .mb-xxl-40 { margin-bottom: 4rem !important; } .mb-xxl-50 { margin-bottom: 5rem !important; } .mb-xxl-auto { margin-bottom: auto !important; } .ms-xxl-0 { margin-left: 0 !important; } .ms-xxl-5 { margin-left: 0.5rem !important; } .ms-xxl-10 { margin-left: 1rem !important; } .ms-xxl-15 { margin-left: 1.5rem !important; } .ms-xxl-20 { margin-left: 2rem !important; } .ms-xxl-30 { margin-left: 3rem !important; } .ms-xxl-40 { margin-left: 4rem !important; } .ms-xxl-50 { margin-left: 5rem !important; } .ms-xxl-auto { margin-left: auto !important; } .me-xxl-0 { margin-right: 0 !important; } .me-xxl-5 { margin-right: 0.5rem !important; } .me-xxl-10 { margin-right: 1rem !important; } .me-xxl-15 { margin-right: 1.5rem !important; } .me-xxl-20 { margin-right: 2rem !important; } .me-xxl-30 { margin-right: 3rem !important; } .me-xxl-40 { margin-right: 4rem !important; } .me-xxl-50 { margin-right: 5rem !important; } .me-xxl-auto { margin-right: auto !important; } } /* Gap */ .gap-0 { gap: 0 !important; } .gap-5 { gap: 0.5rem !important; } .gap-10 { gap: 1rem !important; } .gap-15 { gap: 1.5rem !important; } .gap-20 { gap: 2rem !important; } .gap-30 { gap: 3rem !important; } .gap-40 { gap: 4rem !important; } .gap-50 { gap: 5rem !important; } @media (min-width: 577px) { .gap-sm-0 { gap: 0 !important; } .gap-sm-5 { gap: 0.5rem !important; } .gap-sm-10 { gap: 1rem !important; } .gap-sm-15 { gap: 1.5rem !important; } .gap-sm-20 { gap: 2rem !important; } .gap-sm-30 { gap: 3rem !important; } .gap-sm-40 { gap: 4rem !important; } .gap-sm-50 { gap: 5rem !important; } } @media (min-width: 769px) { .gap-md-0 { gap: 0 !important; } .gap-md-5 { gap: 0.5rem !important; } .gap-md-10 { gap: 1rem !important; } .gap-md-15 { gap: 1.5rem !important; } .gap-md-20 { gap: 2rem !important; } .gap-md-30 { gap: 3rem !important; } .gap-md-40 { gap: 4rem !important; } .gap-md-50 { gap: 5rem !important; } } @media (min-width: 993px) { .gap-lg-0 { gap: 0 !important; } .gap-lg-5 { gap: 0.5rem !important; } .gap-lg-10 { gap: 1rem !important; } .gap-lg-15 { gap: 1.5rem !important; } .gap-lg-20 { gap: 2rem !important; } .gap-lg-30 { gap: 3rem !important; } .gap-lg-40 { gap: 4rem !important; } .gap-lg-50 { gap: 5rem !important; } } @media (min-width: 1201px) { .gap-xl-0 { gap: 0 !important; } .gap-xl-5 { gap: 0.5rem !important; } .gap-xl-10 { gap: 1rem !important; } .gap-xl-15 { gap: 1.5rem !important; } .gap-xl-20 { gap: 2rem !important; } .gap-xl-30 { gap: 3rem !important; } .gap-xl-40 { gap: 4rem !important; } .gap-xl-50 { gap: 5rem !important; } } @media (min-width: 1401px) { .gap-xxl-0 { gap: 0 !important; } .gap-xxl-5 { gap: 0.5rem !important; } .gap-xxl-10 { gap: 1rem !important; } .gap-xxl-15 { gap: 1.5rem !important; } .gap-xxl-20 { gap: 2rem !important; } .gap-xxl-30 { gap: 3rem !important; } .gap-xxl-40 { gap: 4rem !important; } .gap-xxl-50 { gap: 5rem !important; } } /** * ---------------------------------------------------------------------------- * [ Sizing utilities ] * ---------------------------------------------------------------------------- */ /* Width */ .ws-25 { width: 2.5rem !important; } .ws-50 { width: 5rem !important; } .ws-75 { width: 7.5rem !important; } .ws-100 { width: 10rem !important; } .ws-150 { width: 15rem !important; } .ws-200 { width: 20rem !important; } .ws-250 { width: 25rem !important; } .ws-300 { width: 30rem !important; } .ws-350 { width: 35rem !important; } .ws-400 { width: 40rem !important; } .ws-450 { width: 45rem !important; } .ws-500 { width: 50rem !important; } .ws-550 { width: 55rem !important; } .ws-600 { width: 60rem !important; } .w-auto { width: auto !important; } .w-25 { width: 25% !important; } .w-50 { width: 50% !important; } .w-75 { width: 75% !important; } .w-100 { width: 100% !important; } .mw-100 { max-width: 100% !important; } .vw-100 { width: 100vw !important; } .min-vw-100 { min-width: 100vw !important; } @media (min-width: 577px) { .ws-sm-25 { width: 2.5rem !important; } .ws-sm-50 { width: 5rem !important; } .ws-sm-75 { width: 7.5rem !important; } .ws-sm-100 { width: 10rem !important; } .ws-sm-150 { width: 15rem !important; } .ws-sm-200 { width: 20rem !important; } .ws-sm-250 { width: 25rem !important; } .ws-sm-300 { width: 30rem !important; } .ws-sm-350 { width: 35rem !important; } .ws-sm-400 { width: 40rem !important; } .ws-sm-450 { width: 45rem !important; } .ws-sm-500 { width: 50rem !important; } .ws-sm-550 { width: 55rem !important; } .ws-sm-600 { width: 60rem !important; } .w-sm-auto { width: auto !important; } .w-sm-25 { width: 25% !important; } .w-sm-50 { width: 50% !important; } .w-sm-75 { width: 75% !important; } .w-sm-100 { width: 100% !important; } .mw-sm-100 { max-width: 100% !important; } .vw-sm-100 { width: 100vw !important; } .min-vw-sm-100 { min-width: 100vw !important; } } @media (min-width: 769px) { .ws-md-25 { width: 2.5rem !important; } .ws-md-50 { width: 5rem !important; } .ws-md-75 { width: 7.5rem !important; } .ws-md-100 { width: 10rem !important; } .ws-md-150 { width: 15rem !important; } .ws-md-200 { width: 20rem !important; } .ws-md-250 { width: 25rem !important; } .ws-md-300 { width: 30rem !important; } .ws-md-350 { width: 35rem !important; } .ws-md-400 { width: 40rem !important; } .ws-md-450 { width: 45rem !important; } .ws-md-500 { width: 50rem !important; } .ws-md-550 { width: 55rem !important; } .ws-md-600 { width: 60rem !important; } .w-md-auto { width: auto !important; } .w-md-25 { width: 25% !important; } .w-md-50 { width: 50% !important; } .w-md-75 { width: 75% !important; } .w-md-100 { width: 100% !important; } .mw-md-100 { max-width: 100% !important; } .vw-md-100 { width: 100vw !important; } .min-vw-md-100 { min-width: 100vw !important; } } @media (min-width: 993px) { .ws-lg-25 { width: 2.5rem !important; } .ws-lg-50 { width: 5rem !important; } .ws-lg-75 { width: 7.5rem !important; } .ws-lg-100 { width: 10rem !important; } .ws-lg-150 { width: 15rem !important; } .ws-lg-200 { width: 20rem !important; } .ws-lg-250 { width: 25rem !important; } .ws-lg-300 { width: 30rem !important; } .ws-lg-350 { width: 35rem !important; } .ws-lg-400 { width: 40rem !important; } .ws-lg-450 { width: 45rem !important; } .ws-lg-500 { width: 50rem !important; } .ws-lg-550 { width: 55rem !important; } .ws-lg-600 { width: 60rem !important; } .w-lg-auto { width: auto !important; } .w-lg-25 { width: 25% !important; } .w-lg-50 { width: 50% !important; } .w-lg-75 { width: 75% !important; } .w-lg-100 { width: 100% !important; } .mw-lg-100 { max-width: 100% !important; } .vw-lg-100 { width: 100vw !important; } .min-vw-lg-100 { min-width: 100vw !important; } } @media (min-width: 1201px) { .ws-xl-25 { width: 2.5rem !important; } .ws-xl-50 { width: 5rem !important; } .ws-xl-75 { width: 7.5rem !important; } .ws-xl-100 { width: 10rem !important; } .ws-xl-150 { width: 15rem !important; } .ws-xl-200 { width: 20rem !important; } .ws-xl-250 { width: 25rem !important; } .ws-xl-300 { width: 30rem !important; } .ws-xl-350 { width: 35rem !important; } .ws-xl-400 { width: 40rem !important; } .ws-xl-450 { width: 45rem !important; } .ws-xl-500 { width: 50rem !important; } .ws-xl-550 { width: 55rem !important; } .ws-xl-600 { width: 60rem !important; } .w-xl-auto { width: auto !important; } .w-xl-25 { width: 25% !important; } .w-xl-50 { width: 50% !important; } .w-xl-75 { width: 75% !important; } .w-xl-100 { width: 100% !important; } .mw-xl-100 { max-width: 100% !important; } .vw-xl-100 { width: 100vw !important; } .min-vw-xl-100 { min-width: 100vw !important; } } @media (min-width: 1401px) { .ws-xxl-25 { width: 2.5rem !important; } .ws-xxl-50 { width: 5rem !important; } .ws-xxl-75 { width: 7.5rem !important; } .ws-xxl-100 { width: 10rem !important; } .ws-xxl-150 { width: 15rem !important; } .ws-xxl-200 { width: 20rem !important; } .ws-xxl-250 { width: 25rem !important; } .ws-xxl-300 { width: 30rem !important; } .ws-xxl-350 { width: 35rem !important; } .ws-xxl-400 { width: 40rem !important; } .ws-xxl-450 { width: 45rem !important; } .ws-xxl-500 { width: 50rem !important; } .ws-xxl-550 { width: 55rem !important; } .ws-xxl-600 { width: 60rem !important; } .w-xxl-auto { width: auto !important; } .w-xxl-25 { width: 25% !important; } .w-xxl-50 { width: 50% !important; } .w-xxl-75 { width: 75% !important; } .w-xxl-100 { width: 100% !important; } .mw-xxl-100 { max-width: 100% !important; } .vw-xxl-100 { width: 100vw !important; } .min-vw-xxl-100 { min-width: 100vw !important; } } /* Height */ .hs-25 { height: 2.5rem !important; } .hs-50 { height: 5rem !important; } .hs-75 { height: 7.5rem !important; } .hs-100 { height: 10rem !important; } .hs-150 { height: 15rem !important; } .hs-200 { height: 20rem !important; } .hs-250 { height: 25rem !important; } .hs-300 { height: 30rem !important; } .hs-350 { height: 35rem !important; } .hs-400 { height: 40rem !important; } .hs-450 { height: 45rem !important; } .hs-500 { height: 50rem !important; } .hs-550 { height: 55rem !important; } .hs-600 { height: 60rem !important; } .h-auto { height: auto !important; } .h-25 { height: 25% !important; } .h-50 { height: 50% !important; } .h-75 { height: 75% !important; } .h-100 { height: 100% !important; } .mh-100 { max-height: 100% !important; } .vh-100 { height: 100vh !important; } .min-vh-100 { min-height: 100vh !important; } @media (min-width: 577px) { .hs-sm-25 { height: 2.5rem !important; } .hs-sm-50 { height: 5rem !important; } .hs-sm-75 { height: 7.5rem !important; } .hs-sm-100 { height: 10rem !important; } .hs-sm-150 { height: 15rem !important; } .hs-sm-200 { height: 20rem !important; } .hs-sm-250 { height: 25rem !important; } .hs-sm-300 { height: 30rem !important; } .hs-sm-350 { height: 35rem !important; } .hs-sm-400 { height: 40rem !important; } .hs-sm-450 { height: 45rem !important; } .hs-sm-500 { height: 50rem !important; } .hs-sm-550 { height: 55rem !important; } .hs-sm-600 { height: 60rem !important; } .h-sm-auto { height: auto !important; } .h-sm-25 { height: 25% !important; } .h-sm-50 { height: 50% !important; } .h-sm-75 { height: 75% !important; } .h-sm-100 { height: 100% !important; } .mh-sm-100 { max-height: 100% !important; } .vh-sm-100 { height: 100vh !important; } .min-vh-sm-100 { min-height: 100vh !important; } } @media (min-width: 769px) { .hs-md-25 { height: 2.5rem !important; } .hs-md-50 { height: 5rem !important; } .hs-md-75 { height: 7.5rem !important; } .hs-md-100 { height: 10rem !important; } .hs-md-150 { height: 15rem !important; } .hs-md-200 { height: 20rem !important; } .hs-md-250 { height: 25rem !important; } .hs-md-300 { height: 30rem !important; } .hs-md-350 { height: 35rem !important; } .hs-md-400 { height: 40rem !important; } .hs-md-450 { height: 45rem !important; } .hs-md-500 { height: 50rem !important; } .hs-md-550 { height: 55rem !important; } .hs-md-600 { height: 60rem !important; } .h-md-auto { height: auto !important; } .h-md-25 { height: 25% !important; } .h-md-50 { height: 50% !important; } .h-md-75 { height: 75% !important; } .h-md-100 { height: 100% !important; } .mh-md-100 { max-height: 100% !important; } .vh-md-100 { height: 100vh !important; } .min-vh-md-100 { min-height: 100vh !important; } } @media (min-width: 993px) { .hs-lg-25 { height: 2.5rem !important; } .hs-lg-50 { height: 5rem !important; } .hs-lg-75 { height: 7.5rem !important; } .hs-lg-100 { height: 10rem !important; } .hs-lg-150 { height: 15rem !important; } .hs-lg-200 { height: 20rem !important; } .hs-lg-250 { height: 25rem !important; } .hs-lg-300 { height: 30rem !important; } .hs-lg-350 { height: 35rem !important; } .hs-lg-400 { height: 40rem !important; } .hs-lg-450 { height: 45rem !important; } .hs-lg-500 { height: 50rem !important; } .hs-lg-550 { height: 55rem !important; } .hs-lg-600 { height: 60rem !important; } .h-lg-auto { height: auto !important; } .h-lg-25 { height: 25% !important; } .h-lg-50 { height: 50% !important; } .h-lg-75 { height: 75% !important; } .h-lg-100 { height: 100% !important; } .mh-lg-100 { max-height: 100% !important; } .vh-lg-100 { height: 100vh !important; } .min-vh-lg-100 { min-height: 100vh !important; } } @media (min-width: 1201px) { .hs-xl-25 { height: 2.5rem !important; } .hs-xl-50 { height: 5rem !important; } .hs-xl-75 { height: 7.5rem !important; } .hs-xl-100 { height: 10rem !important; } .hs-xl-150 { height: 15rem !important; } .hs-xl-200 { height: 20rem !important; } .hs-xl-250 { height: 25rem !important; } .hs-xl-300 { height: 30rem !important; } .hs-xl-350 { height: 35rem !important; } .hs-xl-400 { height: 40rem !important; } .hs-xl-450 { height: 45rem !important; } .hs-xl-500 { height: 50rem !important; } .hs-xl-550 { height: 55rem !important; } .hs-xl-600 { height: 60rem !important; } .h-xl-auto { height: auto !important; } .h-xl-25 { height: 25% !important; } .h-xl-50 { height: 50% !important; } .h-xl-75 { height: 75% !important; } .h-xl-100 { height: 100% !important; } .mh-xl-100 { max-height: 100% !important; } .vh-xl-100 { height: 100vh !important; } .min-vh-xl-100 { min-height: 100vh !important; } } @media (min-width: 1401px) { .hs-xxl-25 { height: 2.5rem !important; } .hs-xxl-50 { height: 5rem !important; } .hs-xxl-75 { height: 7.5rem !important; } .hs-xxl-100 { height: 10rem !important; } .hs-xxl-150 { height: 15rem !important; } .hs-xxl-200 { height: 20rem !important; } .hs-xxl-250 { height: 25rem !important; } .hs-xxl-300 { height: 30rem !important; } .hs-xxl-350 { height: 35rem !important; } .hs-xxl-400 { height: 40rem !important; } .hs-xxl-450 { height: 45rem !important; } .hs-xxl-500 { height: 50rem !important; } .hs-xxl-550 { height: 55rem !important; } .hs-xxl-600 { height: 60rem !important; } .h-xxl-auto { height: auto !important; } .h-xxl-25 { height: 25% !important; } .h-xxl-50 { height: 50% !important; } .h-xxl-75 { height: 75% !important; } .h-xxl-100 { height: 100% !important; } .mh-xxl-100 { max-height: 100% !important; } .vh-xxl-100 { height: 100vh !important; } .min-vh-xxl-100 { min-height: 100vh !important; } } /** * ---------------------------------------------------------------------------- * [ Position utilities ] * ---------------------------------------------------------------------------- */ .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-navbar { top: var(--navbar-height) !important; } .top-0 { top: 0 !important; } .top-50 { top: 50% !important; } .top-100 { top: 100% !important; } .top-auto { top: auto !important; } .bottom-0 { bottom: 0 !important; } .bottom-50 { bottom: 50% !important; } .bottom-100 { bottom: 100% !important; } .bottom-auto { bottom: auto !important; } .start-0 { left: 0 !important; } .start-50 { left: 50% !important; } .start-100 { left: 100% !important; } .start-auto { left: auto !important; } .end-0 { right: 0 !important; } .end-50 { right: 50% !important; } .end-100 { right: 100% !important; } .end-auto { right: auto !important; } .translate-middle { transform: translate(-50%, -50%) !important; } .translate-x-middle { transform: translateX(-50%) !important; } .translate-y-middle { transform: translateY(-50%) !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-navbar { top: var(--navbar-height) !important; } .top-sm-0 { top: 0 !important; } .top-sm-50 { top: 50% !important; } .top-sm-100 { top: 100% !important; } .top-sm-auto { top: auto !important; } .bottom-sm-0 { bottom: 0 !important; } .bottom-sm-50 { bottom: 50% !important; } .bottom-sm-100 { bottom: 100% !important; } .bottom-sm-auto { bottom: auto !important; } .start-sm-0 { left: 0 !important; } .start-sm-50 { left: 50% !important; } .start-sm-100 { left: 100% !important; } .start-sm-auto { left: auto !important; } .end-sm-0 { right: 0 !important; } .end-sm-50 { right: 50% !important; } .end-sm-100 { right: 100% !important; } .end-sm-auto { right: auto !important; } .translate-sm-middle { transform: translate(-50%, -50%) !important; } .translate-x-sm-middle { transform: translateX(-50%) !important; } .translate-y-sm-middle { transform: translateY(-50%) !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-navbar { top: var(--navbar-height) !important; } .top-md-0 { top: 0 !important; } .top-md-50 { top: 50% !important; } .top-md-100 { top: 100% !important; } .top-md-auto { top: auto !important; } .bottom-md-0 { bottom: 0 !important; } .bottom-md-50 { bottom: 50% !important; } .bottom-md-100 { bottom: 100% !important; } .bottom-md-auto { bottom: auto !important; } .start-md-0 { left: 0 !important; } .start-md-50 { left: 50% !important; } .start-md-100 { left: 100% !important; } .start-md-auto { left: auto !important; } .end-md-0 { right: 0 !important; } .end-md-50 { right: 50% !important; } .end-md-100 { right: 100% !important; } .end-md-auto { right: auto !important; } .translate-md-middle { transform: translate(-50%, -50%) !important; } .translate-x-md-middle { transform: translateX(-50%) !important; } .translate-y-md-middle { transform: translateY(-50%) !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-navbar { top: var(--navbar-height) !important; } .top-lg-0 { top: 0 !important; } .top-lg-50 { top: 50% !important; } .top-lg-100 { top: 100% !important; } .top-lg-auto { top: auto !important; } .bottom-lg-0 { bottom: 0 !important; } .bottom-lg-50 { bottom: 50% !important; } .bottom-lg-100 { bottom: 100% !important; } .bottom-lg-auto { bottom: auto !important; } .start-lg-0 { left: 0 !important; } .start-lg-50 { left: 50% !important; } .start-lg-100 { left: 100% !important; } .start-lg-auto { left: auto !important; } .end-lg-0 { right: 0 !important; } .end-lg-50 { right: 50% !important; } .end-lg-100 { right: 100% !important; } .end-lg-auto { right: auto !important; } .translate-lg-middle { transform: translate(-50%, -50%) !important; } .translate-x-lg-middle { transform: translateX(-50%) !important; } .translate-y-lg-middle { transform: translateY(-50%) !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-navbar { top: var(--navbar-height) !important; } .top-xl-0 { top: 0 !important; } .top-xl-50 { top: 50% !important; } .top-xl-100 { top: 100% !important; } .top-xl-auto { top: auto !important; } .bottom-xl-0 { bottom: 0 !important; } .bottom-xl-50 { bottom: 50% !important; } .bottom-xl-100 { bottom: 100% !important; } .bottom-xl-auto { bottom: auto !important; } .start-xl-0 { left: 0 !important; } .start-xl-50 { left: 50% !important; } .start-xl-100 { left: 100% !important; } .start-xl-auto { left: auto !important; } .end-xl-0 { right: 0 !important; } .end-xl-50 { right: 50% !important; } .end-xl-100 { right: 100% !important; } .end-xl-auto { right: auto !important; } .translate-xl-middle { transform: translate(-50%, -50%) !important; } .translate-x-xl-middle { transform: translateX(-50%) !important; } .translate-y-xl-middle { transform: translateY(-50%) !important; } } @media (min-width: 1401px) { .position-xxl-static { position: static !important; } .position-xxl-relative { position: relative !important; } .position-xxl-absolute { position: absolute !important; } .position-xxl-fixed { position: fixed !important; } .position-xxl-sticky { position: -webkit-sticky !important; position: sticky !important; } .top-xxl-navbar { top: var(--navbar-height) !important; } .top-xxl-0 { top: 0 !important; } .top-xxl-50 { top: 50% !important; } .top-xxl-100 { top: 100% !important; } .top-xxl-auto { top: auto !important; } .bottom-xxl-0 { bottom: 0 !important; } .bottom-xxl-50 { bottom: 50% !important; } .bottom-xxl-100 { bottom: 100% !important; } .bottom-xxl-auto { bottom: auto !important; } .start-xxl-0 { left: 0 !important; } .start-xxl-50 { left: 50% !important; } .start-xxl-100 { left: 100% !important; } .start-xxl-auto { left: auto !important; } .end-xxl-0 { right: 0 !important; } .end-xxl-50 { right: 50% !important; } .end-xxl-100 { right: 100% !important; } .end-xxl-auto { right: auto !important; } .translate-xxl-middle { transform: translate(-50%, -50%) !important; } .translate-x-xxl-middle { transform: translateX(-50%) !important; } .translate-y-xxl-middle { transform: translateY(-50%) !important; } } /** * ---------------------------------------------------------------------------- * [ Overflow utilities ] * ---------------------------------------------------------------------------- */ .overflow-auto { overflow: auto !important; } .overflow-x-auto { overflow-x: auto !important; } .overflow-y-auto { overflow-y: auto !important; } .overflow-hidden { overflow: hidden !important; } .overflow-x-hidden { overflow-x: hidden !important; } .overflow-y-hidden { overflow-y: hidden !important; } .overflow-visible { overflow: visible !important; } .overflow-x-visible { overflow-x: visible !important; } .overflow-y-visible { overflow-y: visible !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-auto { overflow: auto !important; } .overflow-x-sm-auto { overflow-x: auto !important; } .overflow-y-sm-auto { overflow-y: auto !important; } .overflow-sm-hidden { overflow: hidden !important; } .overflow-x-sm-hidden { overflow-x: hidden !important; } .overflow-y-sm-hidden { overflow-y: hidden !important; } .overflow-sm-visible { overflow: visible !important; } .overflow-x-sm-visible { overflow-x: visible !important; } .overflow-y-sm-visible { overflow-y: visible !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-auto { overflow: auto !important; } .overflow-x-md-auto { overflow-x: auto !important; } .overflow-y-md-auto { overflow-y: auto !important; } .overflow-md-hidden { overflow: hidden !important; } .overflow-x-md-hidden { overflow-x: hidden !important; } .overflow-y-md-hidden { overflow-y: hidden !important; } .overflow-md-visible { overflow: visible !important; } .overflow-x-md-visible { overflow-x: visible !important; } .overflow-y-md-visible { overflow-y: visible !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-auto { overflow: auto !important; } .overflow-x-lg-auto { overflow-x: auto !important; } .overflow-y-lg-auto { overflow-y: auto !important; } .overflow-lg-hidden { overflow: hidden !important; } .overflow-x-lg-hidden { overflow-x: hidden !important; } .overflow-y-lg-hidden { overflow-y: hidden !important; } .overflow-lg-visible { overflow: visible !important; } .overflow-x-lg-visible { overflow-x: visible !important; } .overflow-y-lg-visible { overflow-y: visible !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-auto { overflow: auto !important; } .overflow-x-xl-auto { overflow-x: auto !important; } .overflow-y-xl-auto { overflow-y: auto !important; } .overflow-xl-hidden { overflow: hidden !important; } .overflow-x-xl-hidden { overflow-x: hidden !important; } .overflow-y-xl-hidden { overflow-y: hidden !important; } .overflow-xl-visible { overflow: visible !important; } .overflow-x-xl-visible { overflow-x: visible !important; } .overflow-y-xl-visible { overflow-y: visible !important; } .overflow-xl-scroll { overflow: scroll !important; } .overflow-x-xl-scroll { overflow-x: scroll !important; } .overflow-y-xl-scroll { overflow-y: scroll !important; } } @media (min-width: 1401px) { .overflow-xxl-auto { overflow: auto !important; } .overflow-x-xxl-auto { overflow-x: auto !important; } .overflow-y-xxl-auto { overflow-y: auto !important; } .overflow-xxl-hidden { overflow: hidden !important; } .overflow-x-xxl-hidden { overflow-x: hidden !important; } .overflow-y-xxl-hidden { overflow-y: hidden !important; } .overflow-xxl-visible { overflow: visible !important; } .overflow-x-xxl-visible { overflow-x: visible !important; } .overflow-y-xxl-visible { overflow-y: visible !important; } .overflow-xxl-scroll { overflow: scroll !important; } .overflow-x-xxl-scroll { overflow-x: scroll !important; } .overflow-y-xxl-scroll { overflow-y: scroll !important; } } /** * ---------------------------------------------------------------------------- * [ Float utilities ] * ---------------------------------------------------------------------------- */ .float-start { float: left !important; } .float-end { float: right !important; } .float-none { float: none !important; } @media (min-width: 577px) { .float-sm-start { float: left !important; } .float-sm-end { float: right !important; } .float-sm-none { float: none !important; } } @media (min-width: 769px) { .float-md-start { float: left !important; } .float-md-end { float: right !important; } .float-md-none { float: none !important; } } @media (min-width: 993px) { .float-lg-start { float: left !important; } .float-lg-end { float: right !important; } .float-lg-none { float: none !important; } } @media (min-width: 1201px) { .float-xl-start { float: left !important; } .float-xl-end { float: right !important; } .float-xl-none { float: none !important; } } @media (min-width: 1401px) { .float-xxl-start { float: left !important; } .float-xxl-end { float: right !important; } .float-xxl-none { float: none !important; } } /* Clearfix */ .clearfix::after { display: block; clear: both; content: ""; } /** * ---------------------------------------------------------------------------- * [ Opacity utilities ] * ---------------------------------------------------------------------------- */ .opacity-0 { opacity: 0 !important; } .opacity-25 { opacity: 0.25 !important; } .opacity-50 { opacity: 0.5 !important; } .opacity-75 { opacity: 0.75 !important; } .opacity-100 { opacity: 1 !important; } /** * ---------------------------------------------------------------------------- * [ Z-index utilities ] * ---------------------------------------------------------------------------- */ .z-0 { z-index: 0 !important; } .z-1 { z-index: 1 !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-1 { z-index: 1 !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-1 { z-index: 1 !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-1 { z-index: 1 !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-1 { z-index: 1 !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; } } @media (min-width: 1401px) { .z-xxl-0 { z-index: 0 !important; } .z-xxl-1 { z-index: 1 !important; } .z-xxl-10 { z-index: 10 !important; } .z-xxl-20 { z-index: 20 !important; } .z-xxl-30 { z-index: 30 !important; } .z-xxl-40 { z-index: 40 !important; } .z-xxl-50 { z-index: 50 !important; } .z-xxl-auto { z-index: auto !important; } } /** * ---------------------------------------------------------------------------- * [ Text alignment utilities ] * ---------------------------------------------------------------------------- */ .text-start { text-align: left !important; } .text-center { text-align: center !important; } .text-end { text-align: right !important; } @media (min-width: 577px) { .text-sm-start { text-align: left !important; } .text-sm-center { text-align: center !important; } .text-sm-end { text-align: right !important; } } @media (min-width: 769px) { .text-md-start { text-align: left !important; } .text-md-center { text-align: center !important; } .text-md-end { text-align: right !important; } } @media (min-width: 993px) { .text-lg-start { text-align: left !important; } .text-lg-center { text-align: center !important; } .text-lg-end { text-align: right !important; } } @media (min-width: 1201px) { .text-xl-start { text-align: left !important; } .text-xl-center { text-align: center !important; } .text-xl-end { text-align: right !important; } } @media (min-width: 1401px) { .text-xxl-start { text-align: left !important; } .text-xxl-center { text-align: center !important; } .text-xxl-end { text-align: right !important; } } /** * ---------------------------------------------------------------------------- * [ Text format utilities ] * ---------------------------------------------------------------------------- */ .font-monospace { font-family: var(--base-monospace-font-stack) !important; } .text-justify { text-align: justify !important; } .text-wrap { white-space: normal !important; } .text-nowrap { white-space: nowrap !important; } .text-break { word-wrap: break-word !important; } .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-lowercase { text-transform: lowercase !important; } .text-uppercase { text-transform: uppercase !important; } .text-capitalize { text-transform: capitalize !important; } .text-decoration-underline { text-decoration: underline !important; } .text-decoration-line-through { text-decoration: line-through !important; } .text-decoration-none { text-decoration: none !important; } /* Font size */ .fs-8 { font-size: 0.8rem !important; } .fs-9 { font-size: 0.9rem !important; } .fs-10 { font-size: 1rem !important; } .fs-11 { font-size: 1.1rem !important; } .fs-12 { font-size: 1.2rem !important; } .fs-13 { font-size: 1.3rem !important; } .fs-14 { font-size: 1.4rem !important; } .fs-15 { font-size: 1.5rem !important; } .fs-16 { font-size: 1.6rem !important; } .fs-17 { font-size: 1.7rem !important; } .fs-18 { font-size: 1.8rem !important; } .fs-19 { font-size: 1.9rem !important; } .fs-20 { font-size: 2rem !important; } .fs-21 { font-size: 2.1rem !important; } .fs-22 { font-size: 2.2rem !important; } .fs-23 { font-size: 2.3rem !important; } .fs-24 { font-size: 2.4rem !important; } .fs-25 { font-size: 2.5rem !important; } .fs-26 { font-size: 2.6rem !important; } .fs-27 { font-size: 2.7rem !important; } .fs-28 { font-size: 2.8rem !important; } .fs-29 { font-size: 2.9rem !important; } .fs-30 { font-size: 3rem !important; } .fs-31 { font-size: 3.1rem !important; } .fs-32 { font-size: 3.2rem !important; } .fs-base { font-size: var(--base-font-size) !important; } /* Plus/minus base font size */ .fs-base-p2 { font-size: calc(var(--base-font-size) + 0.2rem) !important; } .fs-base-p4 { font-size: calc(var(--base-font-size) + 0.4rem) !important; } .fs-base-p6 { font-size: calc(var(--base-font-size) + 0.6rem) !important; } .fs-base-p8 { font-size: calc(var(--base-font-size) + 0.8rem) !important; } .fs-base-p10 { font-size: calc(var(--base-font-size) + 1rem) !important; } .fs-base-p12 { font-size: calc(var(--base-font-size) + 1.2rem) !important; } .fs-base-p14 { font-size: calc(var(--base-font-size) + 1.4rem) !important; } .fs-base-p16 { font-size: calc(var(--base-font-size) + 1.6rem) !important; } .fs-base-p18 { font-size: calc(var(--base-font-size) + 1.8rem) !important; } .fs-base-n2 { font-size: calc(var(--base-font-size) - 0.2rem) !important; } .fs-base-n4 { font-size: calc(var(--base-font-size) - 0.4rem) !important; } .fs-base-n6 { font-size: calc(var(--base-font-size) - 0.6rem) !important; } .fs-base-n8 { font-size: calc(var(--base-font-size) - 0.8rem) !important; } .fs-base-n10 { font-size: calc(var(--base-font-size) - 1rem) !important; } .fs-base-n12 { font-size: calc(var(--base-font-size) - 1.2rem) !important; } /* Responsive font sizes */ .fsr-1 { font-size: var(--font-size-responsive-1) !important; } .fsr-2 { font-size: var(--font-size-responsive-2) !important; } .fsr-3 { font-size: var(--font-size-responsive-3) !important; } .fsr-4 { font-size: var(--font-size-responsive-4) !important; } .fsr-5 { font-size: var(--font-size-responsive-5) !important; } .fsr-6 { font-size: var(--font-size-responsive-6) !important; } /* Font weight and italics */ .fst-italic { font-style: italic !important; } .fst-normal { font-style: normal !important; } .fw-light { font-weight: 300 !important; } .fw-lighter { font-weight: lighter !important; } .fw-normal { font-weight: var(--base-font-weight) !important; } .fw-bold { font-weight: var(--bold-font-weight) !important; } .fw-bolder { font-weight: bolder !important; } .fw-100 { font-weight: 100 !important; } .fw-200 { font-weight: 200 !important; } .fw-300 { font-weight: 300 !important; } .fw-400 { font-weight: 400 !important; } .fw-500 { font-weight: 500 !important; } .fw-600 { font-weight: 600 !important; } .fw-700 { font-weight: 700 !important; } .fw-800 { font-weight: 800 !important; } .fw-900 { font-weight: 900 !important; } /* Line height */ .lh-1 { line-height: 1 !important; } .lh-sm { line-height: var(--small-line-height) !important; } .lh-base { line-height: var(--base-line-height) !important; } .lh-lg { line-height: var(--large-line-height) !important; } /** * ---------------------------------------------------------------------------- * [ Font smoothing (antialiasing) utilities ] * ---------------------------------------------------------------------------- */ .antialiased, html:not(.dark-mode) .antialiased-lm, .dark-mode .antialiased-dm { -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } .subpixel-antialiased, html:not(.dark-mode) .subpixel-antialiased-lm, .dark-mode .subpixel-antialiased-dm { -webkit-font-smoothing: auto !important; -moz-osx-font-smoothing: auto !important; } /** * ---------------------------------------------------------------------------- * [ Text color utilities ] * ---------------------------------------------------------------------------- */ /* White */ .text-white, html:not(.dark-mode) .text-white-lm, .dark-mode .text-white-dm { color: var(--white-color) !important; } /* Black */ .text-black, html:not(.dark-mode) .text-black-lm, .dark-mode .text-black-dm { color: var(--black-color) !important; } /* Light */ .text-light, html:not(.dark-mode) .text-light-lm, .dark-mode .text-light-dm { color: var(--light-text-color) !important; } /* Dark */ .text-dark, html:not(.dark-mode) .text-dark-lm, .dark-mode .text-dark-dm { color: var(--dark-text-color) !important; } /* Muted */ .text-muted, html:not(.dark-mode) .text-muted-lm, .dark-mode .text-muted-dm { color: var(--muted-text-color) !important; } /* Strong */ .text-strong, html:not(.dark-mode) .text-strong-lm, .dark-mode .text-strong-dm { color: var(--strong-text-color) !important; } /* Primary */ .text-primary, html:not(.dark-mode) .text-primary-lm, .dark-mode .text-primary-dm { color: var(--primary-color) !important; } .text-primary-light, html:not(.dark-mode) .text-primary-light-lm, .dark-mode .text-primary-light-dm { color: var(--primary-color-light) !important; } .text-primary-dim, html:not(.dark-mode) .text-primary-dim-lm, .dark-mode .text-primary-dim-dm { color: var(--primary-color-dim) !important; } .text-on-primary, html:not(.dark-mode) .text-on-primary-lm, .dark-mode .text-on-primary-dm { color: var(--text-color-on-primary-color-bg) !important; } /* Secondary */ .text-secondary, html:not(.dark-mode) .text-secondary-lm, .dark-mode .text-secondary-dm { color: var(--secondary-color) !important; } .text-secondary-light, html:not(.dark-mode) .text-secondary-light-lm, .dark-mode .text-secondary-light-dm { color: var(--secondary-color-light) !important; } .text-secondary-dim, html:not(.dark-mode) .text-secondary-dim-lm, .dark-mode .text-secondary-dim-dm { color: var(--secondary-color-dim) !important; } .text-on-secondary, html:not(.dark-mode) .text-on-secondary-lm, .dark-mode .text-on-secondary-dm { color: var(--text-color-on-secondary-color-bg) !important; } /* Success */ .text-success, html:not(.dark-mode) .text-success-lm, .dark-mode .text-success-dm { color: var(--success-color) !important; } .text-success-light, html:not(.dark-mode) .text-success-light-lm, .dark-mode .text-success-light-dm { color: var(--success-color-light) !important; } .text-success-dim, html:not(.dark-mode) .text-success-dim-lm, .dark-mode .text-success-dim-dm { color: var(--success-color-dim) !important; } .text-on-success, html:not(.dark-mode) .text-on-success-lm, .dark-mode .text-on-success-dm { color: var(--text-color-on-success-color-bg) !important; } /* Warning */ .text-warning, html:not(.dark-mode) .text-warning-lm, .dark-mode .text-warning-dm { color: var(--warning-color) !important; } .text-warning-light, html:not(.dark-mode) .text-warning-light-lm, .dark-mode .text-warning-light-dm { color: var(--warning-color-light) !important; } .text-warning-dim, html:not(.dark-mode) .text-warning-dim-lm, .dark-mode .text-warning-dim-dm { color: var(--warning-color-dim) !important; } .text-on-warning, html:not(.dark-mode) .text-on-warning-lm, .dark-mode .text-on-warning-dm { color: var(--text-color-on-warning-color-bg) !important; } /* Danger */ .text-danger, html:not(.dark-mode) .text-danger-lm, .dark-mode .text-danger-dm { color: var(--danger-color) !important; } .text-danger-light, html:not(.dark-mode) .text-danger-light-lm, .dark-mode .text-danger-light-dm { color: var(--danger-color-light) !important; } .text-danger-dim, html:not(.dark-mode) .text-danger-dim-lm, .dark-mode .text-danger-dim-dm { color: var(--danger-color-dim) !important; } .text-on-danger, html:not(.dark-mode) .text-on-danger-lm, .dark-mode .text-on-danger-dm { color: var(--text-color-on-danger-color-bg) !important; } /* Base */ .text-base, html:not(.dark-mode) .text-base-lm, .dark-mode .text-base-dm { color: var(--base-text-color) !important; } /* Base soft */ .text-base-soft, html:not(.dark-mode) .text-base-soft-lm, .dark-mode .text-base-soft-dm { color: var(--base-text-color-soft) !important; } /* Text resets */ .text-reset, .text-inherit { color: inherit !important; } .text-current { color: currentColor !important; } /* Link reset */ .link-reset { -webkit-font-smoothing: var(--link-reset-webkit-font-smoothing); -moz-osx-font-smoothing: var(--link-reset-moz-osx-font-smoothing); text-decoration: var(--link-reset-text-decoration); color: var(--link-reset-color); opacity: var(--link-reset-opacity); } .link-reset:hover { text-decoration: var(--link-reset-text-decoration-hover); color: var(--link-reset-color-hover); opacity: var(--link-reset-opacity-hover); } /** * ---------------------------------------------------------------------------- * [ Background color utilities ] * ---------------------------------------------------------------------------- */ /* White */ .bg-white, html:not(.dark-mode) .bg-white-lm, .dark-mode .bg-white-dm { background-color: var(--white-color) !important; } /* Black */ .bg-black, html:not(.dark-mode) .bg-black-lm, .dark-mode .bg-black-dm { background-color: var(--black-color) !important; } /* Light */ .bg-light, html:not(.dark-mode) .bg-light-lm, .dark-mode .bg-light-dm { background-color: var(--gray-color-very-light) !important; } /* Gray */ .bg-gray, html:not(.dark-mode) .bg-gray-lm, .dark-mode .bg-gray-dm { background-color: var(--gray-color) !important; } .bg-gray-light, html:not(.dark-mode) .bg-gray-light-lm, .dark-mode .bg-gray-light-dm { background-color: var(--gray-color-light) !important; } .bg-gray-very-light, html:not(.dark-mode) .bg-gray-very-light-lm, .dark-mode .bg-gray-very-light-dm { background-color: var(--gray-color-very-light) !important; } .bg-gray-dim, html:not(.dark-mode) .bg-gray-dim-lm, .dark-mode .bg-gray-dim-dm { background-color: var(--gray-color-dim) !important; } .bg-gray-very-dim, html:not(.dark-mode) .bg-gray-very-dim-lm, .dark-mode .bg-gray-very-dim-dm { background-color: var(--gray-color-very-dim) !important; } /* Dark gray */ .bg-darkgray, html:not(.dark-mode) .bg-darkgray-lm, .dark-mode .bg-darkgray-dm { background-color: var(--darkgray-color) !important; } .bg-darkgray-light, html:not(.dark-mode) .bg-darkgray-light-lm, .dark-mode .bg-darkgray-light-dm { background-color: var(--darkgray-color-light) !important; } .bg-darkgray-very-light, html:not(.dark-mode) .bg-darkgray-very-light-lm, .dark-mode .bg-darkgray-very-light-dm { background-color: var(--darkgray-color-very-light) !important; } .bg-darkgray-dim, html:not(.dark-mode) .bg-darkgray-dim-lm, .dark-mode .bg-darkgray-dim-dm { background-color: var(--darkgray-color-dim) !important; } .bg-darkgray-very-dim, html:not(.dark-mode) .bg-darkgray-very-dim-lm, .dark-mode .bg-darkgray-very-dim-dm { background-color: var(--darkgray-color-very-dim) !important; } /* Dark */ .bg-dark, html:not(.dark-mode) .bg-dark-lm, .dark-mode .bg-dark-dm { background-color: var(--dark-color) !important; } .bg-dark-light, html:not(.dark-mode) .bg-dark-light-lm, .dark-mode .bg-dark-light-dm { background-color: var(--dark-color-light) !important; } .bg-dark-very-light, html:not(.dark-mode) .bg-dark-very-light-lm, .dark-mode .bg-dark-very-light-dm { background-color: var(--dark-color-very-light) !important; } .bg-dark-dim, html:not(.dark-mode) .bg-dark-dim-lm, .dark-mode .bg-dark-dim-dm { background-color: var(--dark-color-dim) !important; } .bg-dark-very-dim, html:not(.dark-mode) .bg-dark-very-dim-lm, .dark-mode .bg-dark-very-dim-dm { background-color: var(--dark-color-very-dim) !important; } /* Body */ .bg-body, html:not(.dark-mode) .bg-body-lm, .dark-mode .bg-body-dm { background-color: var(--base-body-bg-color) !important; } /* Content */ .bg-content, html:not(.dark-mode) .bg-content-lm, .dark-mode .bg-content-dm { background-color: var(--base-content-bg-color) !important; } /* Primary */ .bg-primary, html:not(.dark-mode) .bg-primary-lm, .dark-mode .bg-primary-dm { background-color: var(--primary-color) !important; } .bg-primary-light, html:not(.dark-mode) .bg-primary-light-lm, .dark-mode .bg-primary-light-dm { background-color: var(--primary-color-light) !important; } .bg-primary-very-light, html:not(.dark-mode) .bg-primary-very-light-lm, .dark-mode .bg-primary-very-light-dm { background-color: var(--primary-color-very-light) !important; } .bg-primary-dim, html:not(.dark-mode) .bg-primary-dim-lm, .dark-mode .bg-primary-dim-dm { background-color: var(--primary-color-dim) !important; } .bg-primary-very-dim, html:not(.dark-mode) .bg-primary-very-dim-lm, .dark-mode .bg-primary-very-dim-dm { background-color: var(--primary-color-very-dim) !important; } /* Secondary */ .bg-secondary, html:not(.dark-mode) .bg-secondary-lm, .dark-mode .bg-secondary-dm { background-color: var(--secondary-color) !important; } .bg-secondary-light, html:not(.dark-mode) .bg-secondary-light-lm, .dark-mode .bg-secondary-light-dm { background-color: var(--secondary-color-light) !important; } .bg-secondary-very-light, html:not(.dark-mode) .bg-secondary-very-light-lm, .dark-mode .bg-secondary-very-light-dm { background-color: var(--secondary-color-very-light) !important; } .bg-secondary-dim, html:not(.dark-mode) .bg-secondary-dim-lm, .dark-mode .bg-secondary-dim-dm { background-color: var(--secondary-color-dim) !important; } .bg-secondary-very-dim, html:not(.dark-mode) .bg-secondary-very-dim-lm, .dark-mode .bg-secondary-very-dim-dm { background-color: var(--secondary-color-very-dim) !important; } /* Success */ .bg-success, html:not(.dark-mode) .bg-success-lm, .dark-mode .bg-success-dm { background-color: var(--success-color) !important; } .bg-success-light, html:not(.dark-mode) .bg-success-light-lm, .dark-mode .bg-success-light-dm { background-color: var(--success-color-light) !important; } .bg-success-very-light, html:not(.dark-mode) .bg-success-very-light-lm, .dark-mode .bg-success-very-light-dm { background-color: var(--success-color-very-light) !important; } .bg-success-dim, html:not(.dark-mode) .bg-success-dim-lm, .dark-mode .bg-success-dim-dm { background-color: var(--success-color-dim) !important; } .bg-success-very-dim, html:not(.dark-mode) .bg-success-very-dim-lm, .dark-mode .bg-success-very-dim-dm { background-color: var(--success-color-very-dim) !important; } /* Warning */ .bg-warning, html:not(.dark-mode) .bg-warning-lm, .dark-mode .bg-warning-dm { background-color: var(--warning-color) !important; } .bg-warning-light, html:not(.dark-mode) .bg-warning-light-lm, .dark-mode .bg-warning-light-dm { background-color: var(--warning-color-light) !important; } .bg-warning-very-light, html:not(.dark-mode) .bg-warning-very-light-lm, .dark-mode .bg-warning-very-light-dm { background-color: var(--warning-color-very-light) !important; } .bg-warning-dim, html:not(.dark-mode) .bg-warning-dim-lm, .dark-mode .bg-warning-dim-dm { background-color: var(--warning-color-dim) !important; } .bg-warning-very-dim, html:not(.dark-mode) .bg-warning-very-dim-lm, .dark-mode .bg-warning-very-dim-dm { background-color: var(--warning-color-very-dim) !important; } /* Danger */ .bg-danger, html:not(.dark-mode) .bg-danger-lm, .dark-mode .bg-danger-dm { background-color: var(--danger-color) !important; } .bg-danger-light, html:not(.dark-mode) .bg-danger-light-lm, .dark-mode .bg-danger-light-dm { background-color: var(--danger-color-light) !important; } .bg-danger-very-light, html:not(.dark-mode) .bg-danger-very-light-lm, .dark-mode .bg-danger-very-light-dm { background-color: var(--danger-color-very-light) !important; } .bg-danger-dim, html:not(.dark-mode) .bg-danger-dim-lm, .dark-mode .bg-danger-dim-dm { background-color: var(--danger-color-dim) !important; } .bg-danger-very-dim, html:not(.dark-mode) .bg-danger-very-dim-lm, .dark-mode .bg-danger-very-dim-dm { background-color: var(--danger-color-very-dim) !important; } /* Transparent */ .bg-transparent, html:not(.dark-mode) .bg-transparent-lm, .dark-mode .bg-transparent-dm { background-color: transparent !important; } /** * ---------------------------------------------------------------------------- * [ Background clip utilities ] * ---------------------------------------------------------------------------- */ .bg-clip-border { background-clip: border-box !important; } .bg-clip-padding { background-clip: padding-box !important; } .bg-clip-content { background-clip: content-box !important; } .bg-clip-text { background-clip: text !important; } /** * ---------------------------------------------------------------------------- * [ Border utilities ] * ---------------------------------------------------------------------------- */ /* Adding borders */ .border { border: var(--base-border-width) var(--base-border-style) var(--border-color) !important; } .border-top { border-top: var(--base-border-width) var(--base-border-style) var(--border-color) !important; } .border-bottom { border-bottom: var(--base-border-width) var(--base-border-style) var(--border-color) !important; } .border-start { border-left: var(--base-border-width) var(--base-border-style) var(--border-color) !important; } .border-end { border-right: var(--base-border-width) var(--base-border-style) var(--border-color) !important; } /* Removing borders */ .border-0 { border: 0 !important; } .border-top-0 { border-top: 0 !important; } .border-bottom-0 { border-bottom: 0 !important; } .border-start-0 { border-left: 0 !important; } .border-end-0 { border-right: 0 !important; } /* Border colors */ /* Light */ .border-light, html:not(.dark-mode) .border-light-lm, .dark-mode .border-light-dm { border-color: var(--border-color-light) !important; } /* Dark */ .border-dark, html:not(.dark-mode) .border-dark-lm, .dark-mode .border-dark-dm { border-color: var(--border-color-dark) !important; } /* Primary */ .border-primary, html:not(.dark-mode) .border-primary-lm, .dark-mode .border-primary-dm { border-color: var(--primary-color) !important; } .border-primary-light, html:not(.dark-mode) .border-primary-light-lm, .dark-mode .border-primary-light-dm { border-color: var(--primary-color-light) !important; } .border-primary-dim, html:not(.dark-mode) .border-primary-dim-lm, .dark-mode .border-primary-dim-dm { border-color: var(--primary-color-dim) !important; } /* Secondary */ .border-secondary, html:not(.dark-mode) .border-secondary-lm, .dark-mode .border-secondary-dm { border-color: var(--secondary-color) !important; } .border-secondary-light, html:not(.dark-mode) .border-secondary-light-lm, .dark-mode .border-secondary-light-dm { border-color: var(--secondary-color-light) !important; } .border-secondary-dim, html:not(.dark-mode) .border-secondary-dim-lm, .dark-mode .border-secondary-dim-dm { border-color: var(--secondary-color-dim) !important; } /* Success */ .border-success, html:not(.dark-mode) .border-success-lm, .dark-mode .border-success-dm { border-color: var(--success-color) !important; } .border-success-light, html:not(.dark-mode) .border-success-light-lm, .dark-mode .border-success-light-dm { border-color: var(--success-color-light) !important; } .border-success-dim, html:not(.dark-mode) .border-success-dim-lm, .dark-mode .border-success-dim-dm { border-color: var(--success-color-dim) !important; } /* Warning */ .border-warning, html:not(.dark-mode) .border-warning-lm, .dark-mode .border-warning-dm { border-color: var(--warning-color) !important; } .border-warning-light, html:not(.dark-mode) .border-warning-light-lm, .dark-mode .border-warning-light-dm { border-color: var(--warning-color-light) !important; } .border-warning-dim, html:not(.dark-mode) .border-warning-dim-lm, .dark-mode .border-warning-dim-dm { border-color: var(--warning-color-dim) !important; } /* Danger */ .border-danger, html:not(.dark-mode) .border-danger-lm, .dark-mode .border-danger-dm { border-color: var(--danger-color) !important; } .border-danger-light, html:not(.dark-mode) .border-danger-light-lm, .dark-mode .border-danger-light-dm { border-color: var(--danger-color-light) !important; } .border-danger-dim, html:not(.dark-mode) .border-danger-dim-lm, .dark-mode .border-danger-dim-dm { border-color: var(--danger-color-dim) !important; } /* Adding transparent borders (often useful for removing margin collapse) */ .border-transparent { border: var(--base-border-width) var(--base-border-style) transparent !important; } .border-top-transparent { border-top: var(--base-border-width) var(--base-border-style) transparent !important; } .border-bottom-transparent { border-bottom: var(--base-border-width) var(--base-border-style) transparent !important; } .border-start-transparent { border-left: var(--base-border-width) var(--base-border-style) transparent !important; } .border-end-transparent { border-right: var(--base-border-width) var(--base-border-style) transparent !important; } /* Border widths */ .border-1 { border-width: var(--border-1-border-width) !important; } .border-2 { border-width: var(--border-2-border-width) !important; } .border-3 { border-width: var(--border-3-border-width) !important; } .border-4 { border-width: var(--border-4-border-width) !important; } .border-5 { border-width: var(--border-5-border-width) !important; } /* Border styles */ .border-solid { border-style: solid !important; } .border-dashed { border-style: dashed !important; } .border-dotted { border-style: dotted !important; } .border-double { border-style: double !important; } /* Rounded borders */ .rounded-0 { border-radius: 0 !important; } .rounded { border-radius: var(--base-border-radius) !important; } .rounded-1 { border-radius: var(--rounded-1-border-radius) !important; } .rounded-2 { border-radius: var(--rounded-2-border-radius) !important; } .rounded-3 { border-radius: var(--rounded-3-border-radius) !important; } .rounded-4 { border-radius: var(--rounded-4-border-radius) !important; } .rounded-5 { border-radius: var(--rounded-5-border-radius) !important; } .rounded-top { border-top-left-radius: var(--base-border-radius) !important; border-top-right-radius: var(--base-border-radius) !important; } .rounded-bottom { border-bottom-left-radius: var(--base-border-radius) !important; border-bottom-right-radius: var(--base-border-radius) !important; } .rounded-start { border-top-left-radius: var(--base-border-radius) !important; border-bottom-left-radius: var(--base-border-radius) !important; } .rounded-end { border-top-right-radius: var(--base-border-radius) !important; border-bottom-right-radius: var(--base-border-radius) !important; } .rounded-circle { border-radius: 50% !important; } .rounded-pill { border-radius: var(--rounded-pill-border-radius) !important; } /** * ---------------------------------------------------------------------------- * [ Visibility utilities ] * ---------------------------------------------------------------------------- */ .visible { visibility: visible !important; } .invisible { visibility: hidden !important; } html:not(.dark-mode) .visible-lm { visibility: visible !important; } html:not(.dark-mode) .invisible-lm { visibility: hidden !important; } .dark-mode .visible-dm { visibility: visible !important; } .dark-mode .invisible-dm { visibility: hidden !important; } /** * ---------------------------------------------------------------------------- * [ Vertical alignment 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; } /** * ---------------------------------------------------------------------------- * [ Box shadow utilities ] * ---------------------------------------------------------------------------- */ .shadow-none { box-shadow: none !important; } .shadow-sm { box-shadow: var(--small-shadow) !important; } .shadow { box-shadow: var(--shadow) !important; } .shadow-lg { box-shadow: var(--large-shadow) !important; } /** * ---------------------------------------------------------------------------- * [ Interaction utilities ] * ---------------------------------------------------------------------------- */ .user-select-all { -webkit-user-select: all !important; -moz-user-select: all !important; user-select: all !important; } .user-select-auto { -webkit-user-select: auto !important; -moz-user-select: auto !important; user-select: auto !important; } .user-select-none { -webkit-user-select: none !important; -moz-user-select: none !important; user-select: none !important; } .pe-none { pointer-events: none !important; } .pe-auto { pointer-events: auto !important; } /** * ---------------------------------------------------------------------------- * [ Transition utilities ] * ---------------------------------------------------------------------------- */ .transition-none { transition-property: none !important; } .transition-all { transition-property: all !important; transition-timing-function: ease-in-out !important; transition-duration: 150ms !important; } .transition { transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform !important; transition-timing-function: ease-in-out !important; transition-duration: 150ms !important; } .transition-colors { transition-property: background-color, border-color, color, fill, stroke !important; transition-timing-function: ease-in-out !important; transition-duration: 150ms !important; } .transition-opacity { transition-property: opacity !important; transition-timing-function: ease-in-out !important; transition-duration: 150ms !important; } .transition-shadow { transition-property: box-shadow !important; transition-timing-function: ease-in-out !important; transition-duration: 150ms !important; } .transition-transform { transition-property: transform !important; transition-timing-function: ease-in-out !important; transition-duration: 150ms !important; } .ease-linear { transition-timing-function: linear !important; } .ease-in { transition-timing-function: ease-in !important; } .ease-out { transition-timing-function: ease-out !important; } .ease-in-out { transition-timing-function: ease-in-out !important; } .duration-75 { transition-duration: 75ms !important; } .duration-100 { transition-duration: 100ms !important; } .duration-150 { transition-duration: 150ms !important; } .duration-200 { transition-duration: 200ms !important; } .duration-300 { transition-duration: 300ms !important; } .duration-500 { transition-duration: 500ms !important; } .duration-700 { transition-duration: 700ms !important; } .duration-1000 { transition-duration: 1000ms !important; } .delay-75 { transition-delay: 75ms !important; } .delay-100 { transition-delay: 100ms !important; } .delay-150 { transition-delay: 150ms !important; } .delay-200 { transition-delay: 200ms !important; } .delay-300 { transition-delay: 300ms !important; } .delay-500 { transition-delay: 500ms !important; } .delay-700 { transition-delay: 700ms !important; } .delay-1000 { transition-delay: 1000ms !important; } /** * ---------------------------------------------------------------------------- * [ Scroll shadow utilities ] * ---------------------------------------------------------------------------- */ .scroll-shadow-body-x { background-image: linear-gradient(to right, var(--base-body-bg-color), var(--base-body-bg-color)), linear-gradient(to right, var(--base-body-bg-color), var(--base-body-bg-color)), linear-gradient(to right, hsla(var(--black-color-hsl), 0.25), transparent), linear-gradient(to left, hsla(var(--black-color-hsl), 0.25), transparent) !important; background-position: left center, right center, left center, right center !important; background-repeat: no-repeat !important; background-color: var(--base-body-bg-color) !important; background-size: 2rem 100%, 2rem 100%, 1rem 100%, 1rem 100% !important; background-attachment: local, local, scroll, scroll !important; } .dark-mode .scroll-shadow-body-x { background-image: linear-gradient(to right, var(--base-body-bg-color), var(--base-body-bg-color)), linear-gradient(to right, var(--base-body-bg-color), var(--base-body-bg-color)), linear-gradient(to right, hsla(var(--black-color-hsl), 0.4), transparent), linear-gradient(to left, hsla(var(--black-color-hsl), 0.4), transparent) !important; } .scroll-shadow-content-x { background-image: linear-gradient(to right, var(--base-content-bg-color), var(--base-content-bg-color)), linear-gradient(to right, var(--base-content-bg-color), var(--base-content-bg-color)), linear-gradient(to right, hsla(var(--black-color-hsl), 0.25), transparent), linear-gradient(to left, hsla(var(--black-color-hsl), 0.25), transparent) !important; background-position: left center, right center, left center, right center !important; background-repeat: no-repeat !important; background-color: var(--base-content-bg-color) !important; background-size: 2rem 100%, 2rem 100%, 1rem 100%, 1rem 100% !important; background-attachment: local, local, scroll, scroll !important; } .dark-mode .scroll-shadow-content-x { background-image: linear-gradient(to right, var(--base-content-bg-color), var(--base-content-bg-color)), linear-gradient(to right, var(--base-content-bg-color), var(--base-content-bg-color)), linear-gradient(to right, hsla(var(--black-color-hsl), 0.4), transparent), linear-gradient(to left, hsla(var(--black-color-hsl), 0.4), transparent) !important; } /** * ---------------------------------------------------------------------------- * [ RTL utilities ] * ---------------------------------------------------------------------------- */ html:not([dir="rtl"]) .hidden-rtl { display: none !important; } html[dir="rtl"] .hidden-ltr { display: none !important; } /** * ---------------------------------------------------------------------------- * [ Screen reader utilities ] * * Even though there is code duplication, the two selectors are kept separate * for maximum browser compatibility. To elaborate, the .visually-hidden class * would not work on browsers that do not support the :focus-within state if * it was merged with the .visually-hidden-focusable class. * ---------------------------------------------------------------------------- */ .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }