From 8615736e84f802833d0581b1d7f58e7daddc6340 Mon Sep 17 00:00:00 2001 From: BlackDex Date: Sat, 19 Jun 2021 19:22:19 +0200 Subject: [PATCH] Multiple Admin Interface fixes and some others. Misc: - Fixed hadolint workflow, new git cli needs some extra arguments. - Add ignore paths to all specific on triggers. - Updated hadolint version. - Made SMTP_DEBUG read-only, since it can't be changed at runtime. Admin: - Migrated from Bootstrap v4 to v5 - Updated jquery to v3.6.0 - Updated Datatables - Made Javascript strict - Added a way to show which ENV Vars are overridden. - Changed the way to provide data for handlebars. - Fixed date/time check. - Made support string use details and summary feature of markdown/github. --- .github/workflows/build.yml | 17 +- .github/workflows/hadolint.yml | 9 +- src/api/admin.rs | 51 +- src/api/web.rs | 4 +- src/config.rs | 33 +- src/static/scripts/bootstrap-native.js | 5015 ++++-- src/static/scripts/bootstrap.css | 14435 ++++++++-------- src/static/scripts/datatables.css | 26 +- src/static/scripts/datatables.js | 90 +- ...ery-3.5.1.slim.js => jquery-3.6.0.slim.js} | 205 +- src/static/templates/admin/base.hbs | 21 +- src/static/templates/admin/diagnostics.hbs | 193 +- src/static/templates/admin/organizations.hbs | 22 +- src/static/templates/admin/settings.hbs | 103 +- src/static/templates/admin/users.hbs | 54 +- 15 files changed, 11393 insertions(+), 8885 deletions(-) rename src/static/scripts/{jquery-3.5.1.slim.js => jquery-3.6.0.slim.js} (98%) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 151b0d54..48b89cc1 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -2,6 +2,19 @@ name: Build on: push: + paths-ignore: + - "*.md" + - "*.txt" + - ".dockerignore" + - ".env.template" + - ".gitattributes" + - ".gitignore" + - "azure-pipelines.yml" + - "docker/**" + - "hooks/**" + - "tools/**" + - ".github/FUNDING.yml" + - ".github/ISSUE_TEMPLATE/**" pull_request: # Ignore when there are only changes done too one of these paths paths-ignore: @@ -39,13 +52,13 @@ jobs: features: [sqlite,mysql,postgresql] # Remember to update the `cargo test` to match the amount of features channel: nightly os: ubuntu-18.04 - ext: + ext: "" # - target-triple: x86_64-unknown-linux-gnu # host-triple: x86_64-unknown-linux-gnu # features: "sqlite,mysql,postgresql" # channel: stable # os: ubuntu-18.04 - # ext: + # ext: "" name: Building ${{ matrix.channel }}-${{ matrix.target-triple }} runs-on: ${{ matrix.os }} diff --git a/.github/workflows/hadolint.yml b/.github/workflows/hadolint.yml index 76ab9454..e52e5c07 100644 --- a/.github/workflows/hadolint.yml +++ b/.github/workflows/hadolint.yml @@ -2,6 +2,9 @@ name: Hadolint on: push: + # Ignore when there are only changes done too one of these paths + paths: + - "docker/**" pull_request: # Ignore when there are only changes done too one of these paths paths: @@ -22,14 +25,14 @@ jobs: - name: Download hadolint shell: bash run: | - sudo curl -L https://github.com/hadolint/hadolint/releases/download/v$HADOLINT_VERSION/hadolint-$(uname -s)-$(uname -m) -o /usr/local/bin/hadolint && \ + sudo curl -L https://github.com/hadolint/hadolint/releases/download/v${HADOLINT_VERSION}/hadolint-$(uname -s)-$(uname -m) -o /usr/local/bin/hadolint && \ sudo chmod +x /usr/local/bin/hadolint env: - HADOLINT_VERSION: 2.3.0 + HADOLINT_VERSION: 2.5.0 # End Download hadolint # Test Dockerfiles - name: Run hadolint shell: bash - run: git ls-files --exclude='docker/*/Dockerfile*' --ignored | xargs hadolint + run: git ls-files --exclude='docker/*/Dockerfile*' --ignored --cached | xargs hadolint # End Test Dockerfiles diff --git a/src/api/admin.rs b/src/api/admin.rs index c9054a29..46e39502 100644 --- a/src/api/admin.rs +++ b/src/api/admin.rs @@ -196,9 +196,7 @@ fn _validate_token(token: &str) -> bool { struct AdminTemplateData { page_content: String, version: Option<&'static str>, - users: Option>, - organizations: Option>, - diagnostics: Option, + page_data: Option, config: Value, can_backup: bool, logged_in: bool, @@ -214,51 +212,19 @@ impl AdminTemplateData { can_backup: *CAN_BACKUP, logged_in: true, urlpath: CONFIG.domain_path(), - users: None, - organizations: None, - diagnostics: None, + page_data: None, } } - fn users(users: Vec) -> Self { + fn with_data(page_content: &str, page_data: Value) -> Self { Self { - page_content: String::from("admin/users"), + page_content: String::from(page_content), version: VERSION, - users: Some(users), + page_data: Some(page_data), config: CONFIG.prepare_json(), can_backup: *CAN_BACKUP, logged_in: true, urlpath: CONFIG.domain_path(), - organizations: None, - diagnostics: None, - } - } - - fn organizations(organizations: Vec) -> Self { - Self { - page_content: String::from("admin/organizations"), - version: VERSION, - organizations: Some(organizations), - config: CONFIG.prepare_json(), - can_backup: *CAN_BACKUP, - logged_in: true, - urlpath: CONFIG.domain_path(), - users: None, - diagnostics: None, - } - } - - fn diagnostics(diagnostics: Value) -> Self { - Self { - page_content: String::from("admin/diagnostics"), - version: VERSION, - organizations: None, - config: CONFIG.prepare_json(), - can_backup: *CAN_BACKUP, - logged_in: true, - urlpath: CONFIG.domain_path(), - users: None, - diagnostics: Some(diagnostics), } } @@ -360,7 +326,7 @@ fn users_overview(_token: AdminToken, conn: DbConn) -> ApiResult> { }) .collect(); - let text = AdminTemplateData::users(users_json).render()?; + let text = AdminTemplateData::with_data("admin/users", json!(users_json)).render()?; Ok(Html(text)) } @@ -466,7 +432,7 @@ fn organizations_overview(_token: AdminToken, conn: DbConn) -> ApiResult ApiResu "db_type": *DB_TYPE, "db_version": get_sql_server_version(&conn), "admin_url": format!("{}/diagnostics", admin_url(Referer(None))), + "overrides": &CONFIG.get_overrides().join(", "), "server_time_local": Local::now().format("%Y-%m-%d %H:%M:%S %Z").to_string(), "server_time": Utc::now().format("%Y-%m-%d %H:%M:%S UTC").to_string(), // Run the date/time check as the last item to minimize the difference }); - let text = AdminTemplateData::diagnostics(diagnostics_json).render()?; + let text = AdminTemplateData::with_data("admin/diagnostics", diagnostics_json).render()?; Ok(Html(text)) } diff --git a/src/api/web.rs b/src/api/web.rs index 645f79a7..4ba65fda 100644 --- a/src/api/web.rs +++ b/src/api/web.rs @@ -91,8 +91,8 @@ fn static_files(filename: String) -> Result, Error> { "identicon.js" => Ok(Content(ContentType::JavaScript, include_bytes!("../static/scripts/identicon.js"))), "datatables.js" => Ok(Content(ContentType::JavaScript, include_bytes!("../static/scripts/datatables.js"))), "datatables.css" => Ok(Content(ContentType::CSS, include_bytes!("../static/scripts/datatables.css"))), - "jquery-3.5.1.slim.js" => { - Ok(Content(ContentType::JavaScript, include_bytes!("../static/scripts/jquery-3.5.1.slim.js"))) + "jquery-3.6.0.slim.js" => { + Ok(Content(ContentType::JavaScript, include_bytes!("../static/scripts/jquery-3.6.0.slim.js"))) } _ => err!(format!("Static file not found: {}", filename)), } diff --git a/src/config.rs b/src/config.rs index 13810caa..dd6e0f07 100644 --- a/src/config.rs +++ b/src/config.rs @@ -57,6 +57,8 @@ macro_rules! make_config { _env: ConfigBuilder, _usr: ConfigBuilder, + + _overrides: Vec, } #[derive(Debug, Clone, Default, Deserialize, Serialize)] @@ -113,8 +115,7 @@ macro_rules! make_config { /// Merges the values of both builders into a new builder. /// If both have the same element, `other` wins. - fn merge(&self, other: &Self, show_overrides: bool) -> Self { - let mut overrides = Vec::new(); + fn merge(&self, other: &Self, show_overrides: bool, overrides: &mut Vec) -> Self { let mut builder = self.clone(); $($( if let v @Some(_) = &other.$name { @@ -176,9 +177,9 @@ macro_rules! make_config { )+)+ pub fn prepare_json(&self) -> serde_json::Value { - let (def, cfg) = { + let (def, cfg, overriden) = { let inner = &self.inner.read().unwrap(); - (inner._env.build(), inner.config.clone()) + (inner._env.build(), inner.config.clone(), inner._overrides.clone()) }; fn _get_form_type(rust_type: &str) -> &'static str { @@ -210,6 +211,7 @@ macro_rules! make_config { "default": def.$name, "type": _get_form_type(stringify!($ty)), "doc": _get_doc(concat!($($doc),+)), + "overridden": overriden.contains(&stringify!($name).to_uppercase()), }, )+ ]}, )+ ]) } @@ -224,6 +226,15 @@ macro_rules! make_config { stringify!($name): make_config!{ @supportstr $name, cfg.$name, $ty, $none_action }, )+)+ }) } + + pub fn get_overrides(&self) -> Vec { + let overrides = { + let inner = &self.inner.read().unwrap(); + inner._overrides.clone() + }; + + overrides + } } }; @@ -505,7 +516,7 @@ make_config! { /// Server name sent during HELO |> By default this value should be is on the machine's hostname, but might need to be changed in case it trips some anti-spam filters helo_name: String, true, option; /// Enable SMTP debugging (Know the risks!) |> DANGEROUS: Enabling this will output very detailed SMTP messages. This could contain sensitive information like passwords and usernames! Only enable this during troubleshooting! - smtp_debug: bool, true, def, false; + smtp_debug: bool, false, def, false; /// Accept Invalid Certs (Know the risks!) |> DANGEROUS: Allow invalid certificates. This option introduces significant vulnerabilities to man-in-the-middle attacks! smtp_accept_invalid_certs: bool, true, def, false; /// Accept Invalid Hostnames (Know the risks!) |> DANGEROUS: Allow invalid hostnames. This option introduces significant vulnerabilities to man-in-the-middle attacks! @@ -639,7 +650,8 @@ impl Config { let _usr = ConfigBuilder::from_file(&CONFIG_FILE).unwrap_or_default(); // Create merged config, config file overwrites env - let builder = _env.merge(&_usr, true); + let mut _overrides = Vec::new(); + let builder = _env.merge(&_usr, true, &mut _overrides); // Fill any missing with defaults let config = builder.build(); @@ -651,6 +663,7 @@ impl Config { config, _env, _usr, + _overrides, }), }) } @@ -666,9 +679,10 @@ impl Config { let config_str = serde_json::to_string_pretty(&builder)?; // Prepare the combined config + let mut overrides = Vec::new(); let config = { let env = &self.inner.read().unwrap()._env; - env.merge(&builder, false).build() + env.merge(&builder, false, &mut overrides).build() }; validate_config(&config)?; @@ -677,6 +691,7 @@ impl Config { let mut writer = self.inner.write().unwrap(); writer.config = config; writer._usr = builder; + writer._overrides = overrides; } //Save to file @@ -690,7 +705,8 @@ impl Config { pub fn update_config_partial(&self, other: ConfigBuilder) -> Result<(), Error> { let builder = { let usr = &self.inner.read().unwrap()._usr; - usr.merge(&other, false) + let mut _overrides = Vec::new(); + usr.merge(&other, false, &mut _overrides) }; self.update_config(builder) } @@ -751,6 +767,7 @@ impl Config { let mut writer = self.inner.write().unwrap(); writer.config = config; writer._usr = usr; + writer._overrides = Vec::new(); } Ok(()) diff --git a/src/static/scripts/bootstrap-native.js b/src/static/scripts/bootstrap-native.js index 8fafa16a..e5aa0830 100644 --- a/src/static/scripts/bootstrap-native.js +++ b/src/static/scripts/bootstrap-native.js @@ -1,1671 +1,3554 @@ /*! - * Native JavaScript for Bootstrap v3.0.15 (https://thednp.github.io/bootstrap.native/) + * Native JavaScript for Bootstrap v4.0.2 (https://thednp.github.io/bootstrap.native/) * Copyright 2015-2021 © dnp_theme * Licensed under MIT (https://github.com/thednp/bootstrap.native/blob/master/LICENSE) */ - (function (global, factory) { +(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : - (global = global || self, global.BSN = factory()); + (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.BSN = factory()); }(this, (function () { 'use strict'; - var transitionEndEvent = 'webkitTransition' in document.head.style ? 'webkitTransitionEnd' : 'transitionend'; + const transitionEndEvent = 'webkitTransition' in document.head.style ? 'webkitTransitionEnd' : 'transitionend'; - var supportTransition = 'webkitTransition' in document.head.style || 'transition' in document.head.style; + const supportTransition = 'webkitTransition' in document.head.style || 'transition' in document.head.style; - var transitionDuration = 'webkitTransition' in document.head.style ? 'webkitTransitionDuration' : 'transitionDuration'; + const transitionDuration = 'webkitTransition' in document.head.style ? 'webkitTransitionDuration' : 'transitionDuration'; - var transitionProperty = 'webkitTransition' in document.head.style ? 'webkitTransitionProperty' : 'transitionProperty'; + const transitionProperty = 'webkitTransition' in document.head.style ? 'webkitTransitionProperty' : 'transitionProperty'; function getElementTransitionDuration(element) { - var computedStyle = getComputedStyle(element), - property = computedStyle[transitionProperty], - duration = supportTransition && property && property !== 'none' - ? parseFloat(computedStyle[transitionDuration]) : 0; - return !isNaN(duration) ? duration * 1000 : 0; + const computedStyle = getComputedStyle(element); + const propertyValue = computedStyle[transitionProperty]; + const durationValue = computedStyle[transitionDuration]; + const durationScale = durationValue.includes('ms') ? 1 : 1000; + const duration = supportTransition && propertyValue && propertyValue !== 'none' + ? parseFloat(durationValue) * durationScale : 0; + + return !Number.isNaN(duration) ? duration : 0; } - function emulateTransitionEnd(element,handler){ - var called = 0, duration = getElementTransitionDuration(element); - duration ? element.addEventListener( transitionEndEvent, function transitionEndWrapper(e){ - !called && handler(e), called = 1; - element.removeEventListener( transitionEndEvent, transitionEndWrapper); - }) - : setTimeout(function() { !called && handler(), called = 1; }, 17); + function emulateTransitionEnd(element, handler) { + let called = 0; + const endEvent = new Event(transitionEndEvent); + const duration = getElementTransitionDuration(element); + + if (duration) { + element.addEventListener(transitionEndEvent, function transitionEndWrapper(e) { + if (e.target === element) { + handler.apply(element, [e]); + element.removeEventListener(transitionEndEvent, transitionEndWrapper); + called = 1; + } + }); + setTimeout(() => { + if (!called) element.dispatchEvent(endEvent); + }, duration + 17); + } else { + handler.apply(element, [endEvent]); + } } function queryElement(selector, parent) { - var lookUp = parent && parent instanceof Element ? parent : document; + const lookUp = parent && parent instanceof Element ? parent : document; return selector instanceof Element ? selector : lookUp.querySelector(selector); } - function bootstrapCustomEvent(eventName, componentName, eventProperties) { - var OriginalCustomEvent = new CustomEvent( eventName + '.bs.' + componentName, {cancelable: true}); - if (typeof eventProperties !== 'undefined') { - Object.keys(eventProperties).forEach(function (key) { + function hasClass(element, classNAME) { + return element.classList.contains(classNAME); + } + + function removeClass(element, classNAME) { + element.classList.remove(classNAME); + } + + const addEventListener = 'addEventListener'; + + const removeEventListener = 'removeEventListener'; + + const fadeClass = 'fade'; + + const showClass = 'show'; + + const dataBsDismiss = 'data-bs-dismiss'; + + function bootstrapCustomEvent(namespacedEventType, eventProperties) { + const OriginalCustomEvent = new CustomEvent(namespacedEventType, { cancelable: true }); + + if (eventProperties instanceof Object) { + Object.keys(eventProperties).forEach((key) => { Object.defineProperty(OriginalCustomEvent, key, { - value: eventProperties[key] + value: eventProperties[key], }); }); } return OriginalCustomEvent; } - function dispatchCustomEvent(customEvent){ - this && this.dispatchEvent(customEvent); + function normalizeValue(value) { + if (value === 'true') { + return true; + } + + if (value === 'false') { + return false; + } + + if (!Number.isNaN(+value)) { + return +value; + } + + if (value === '' || value === 'null') { + return null; + } + + // string / function / Element / Object + return value; } - function Alert(element) { - var self = this, - alert, - closeCustomEvent = bootstrapCustomEvent('close','alert'), - closedCustomEvent = bootstrapCustomEvent('closed','alert'); - function triggerHandler() { - alert.classList.contains('fade') ? emulateTransitionEnd(alert,transitionEndHandler) : transitionEndHandler(); - } - function toggleEvents(action){ - action = action ? 'addEventListener' : 'removeEventListener'; - element[action]('click',clickHandler,false); - } - function clickHandler(e) { - alert = e && e.target.closest(".alert"); - element = queryElement('[data-dismiss="alert"]',alert); - element && alert && (element === e.target || element.contains(e.target)) && self.close(); - } - function transitionEndHandler() { - toggleEvents(); - alert.parentNode.removeChild(alert); - dispatchCustomEvent.call(alert,closedCustomEvent); - } - self.close = function () { - if ( alert && element && alert.classList.contains('show') ) { - dispatchCustomEvent.call(alert,closeCustomEvent); - if ( closeCustomEvent.defaultPrevented ) { return; } - self.dispose(); - alert.classList.remove('show'); - triggerHandler(); - } - }; - self.dispose = function () { - toggleEvents(); - delete element.Alert; - }; - element = queryElement(element); - alert = element.closest('.alert'); - element.Alert && element.Alert.dispose(); - if ( !element.Alert ) { - toggleEvents(1); - } - self.element = element; - element.Alert = self; - } + function normalizeOptions(element, defaultOps, inputOps, ns) { + const normalOps = {}; + const dataOps = {}; + const data = { ...element.dataset }; - function Button(element) { - var self = this, labels, - changeCustomEvent = bootstrapCustomEvent('change', 'button'); - function toggle(e) { - var input, - label = e.target.tagName === 'LABEL' ? e.target - : e.target.closest('LABEL') ? e.target.closest('LABEL') : null; - input = label && label.getElementsByTagName('INPUT')[0]; - if ( !input ) { return; } - dispatchCustomEvent.call(input, changeCustomEvent); - dispatchCustomEvent.call(element, changeCustomEvent); - if ( input.type === 'checkbox' ) { - if ( changeCustomEvent.defaultPrevented ) { return; } - if ( !input.checked ) { - label.classList.add('active'); - input.getAttribute('checked'); - input.setAttribute('checked','checked'); - input.checked = true; + Object.keys(data) + .forEach((k) => { + const key = k.includes(ns) + ? k.replace(ns, '').replace(/[A-Z]/, (match) => match.toLowerCase()) + : k; + + dataOps[key] = normalizeValue(data[k]); + }); + + Object.keys(inputOps) + .forEach((k) => { + inputOps[k] = normalizeValue(inputOps[k]); + }); + + Object.keys(defaultOps) + .forEach((k) => { + if (k in inputOps) { + normalOps[k] = inputOps[k]; + } else if (k in dataOps) { + normalOps[k] = dataOps[k]; } else { - label.classList.remove('active'); - input.getAttribute('checked'); - input.removeAttribute('checked'); - input.checked = false; - } - if (!element.toggled) { - element.toggled = true; - } - } - if ( input.type === 'radio' && !element.toggled ) { - if ( changeCustomEvent.defaultPrevented ) { return; } - if ( !input.checked || (e.screenX === 0 && e.screenY == 0) ) { - label.classList.add('active'); - label.classList.add('focus'); - input.setAttribute('checked','checked'); - input.checked = true; - element.toggled = true; - Array.from(labels).map(function (otherLabel){ - var otherInput = otherLabel.getElementsByTagName('INPUT')[0]; - if ( otherLabel !== label && otherLabel.classList.contains('active') ) { - dispatchCustomEvent.call(otherInput, changeCustomEvent); - otherLabel.classList.remove('active'); - otherInput.removeAttribute('checked'); - otherInput.checked = false; - } - }); - } - } - setTimeout( function () { element.toggled = false; }, 50 ); - } - function keyHandler(e) { - var key = e.which || e.keyCode; - key === 32 && e.target === document.activeElement && toggle(e); - } - function preventScroll(e) { - var key = e.which || e.keyCode; - key === 32 && e.preventDefault(); - } - function focusToggle(e) { - if (e.target.tagName === 'INPUT' ) { - var action = e.type === 'focusin' ? 'add' : 'remove'; - e.target.closest('.btn').classList[action]('focus'); - } - } - function toggleEvents(action) { - action = action ? 'addEventListener' : 'removeEventListener'; - element[action]('click',toggle,false ); - element[action]('keyup',keyHandler,false), element[action]('keydown',preventScroll,false); - element[action]('focusin',focusToggle,false), element[action]('focusout',focusToggle,false); - } - self.dispose = function () { - toggleEvents(); - delete element.Button; - }; - element = queryElement(element); - element.Button && element.Button.dispose(); - labels = element.getElementsByClassName('btn'); - if (!labels.length) { return; } - if ( !element.Button ) { - toggleEvents(1); - } - element.toggled = false; - element.Button = self; - Array.from(labels).map(function (btn){ - !btn.classList.contains('active') - && queryElement('input:checked',btn) - && btn.classList.add('active'); - btn.classList.contains('active') - && !queryElement('input:checked',btn) - && btn.classList.remove('active'); - }); - } - - var mouseHoverEvents = ('onmouseleave' in document) ? [ 'mouseenter', 'mouseleave'] : [ 'mouseover', 'mouseout' ]; - - var supportPassive = (function () { - var result = false; - try { - var opts = Object.defineProperty({}, 'passive', { - get: function() { - result = true; + normalOps[k] = defaultOps[k]; } }); - document.addEventListener('DOMContentLoaded', function wrap(){ - document.removeEventListener('DOMContentLoaded', wrap, opts); + + return normalOps; + } + + /* Native JavaScript for Bootstrap 5 | Base Component + ----------------------------------------------------- */ + + class BaseComponent { + constructor(name, target, defaults, config) { + const self = this; + const element = queryElement(target); + + if (element[name]) element[name].dispose(); + self.element = element; + + if (defaults && Object.keys(defaults).length) { + self.options = normalizeOptions(element, defaults, (config || {}), 'bs'); + } + element[name] = self; + } + + dispose(name) { + const self = this; + self.element[name] = null; + Object.keys(self).forEach((prop) => { self[prop] = null; }); + } + } + + /* Native JavaScript for Bootstrap 5 | Alert + -------------------------------------------- */ + + // ALERT PRIVATE GC + // ================ + const alertString = 'alert'; + const alertComponent = 'Alert'; + const alertSelector = `.${alertString}`; + const alertDismissSelector = `[${dataBsDismiss}="${alertString}"]`; + + // ALERT CUSTOM EVENTS + // =================== + const closeAlertEvent = bootstrapCustomEvent(`close.bs.${alertString}`); + const closedAlertEvent = bootstrapCustomEvent(`closed.bs.${alertString}`); + + // ALERT EVENT HANDLERS + // ==================== + function alertTransitionEnd(self) { + const { element, relatedTarget } = self; + toggleAlertHandler(self); + + if (relatedTarget) closedAlertEvent.relatedTarget = relatedTarget; + element.dispatchEvent(closedAlertEvent); + + self.dispose(); + element.parentNode.removeChild(element); + } + + // ALERT PRIVATE METHOD + // ==================== + function toggleAlertHandler(self, add) { + const action = add ? addEventListener : removeEventListener; + if (self.dismiss) self.dismiss[action]('click', self.close); + } + + // ALERT DEFINITION + // ================ + class Alert extends BaseComponent { + constructor(target) { + super(alertComponent, target); + // bind + const self = this; + + // initialization element + const { element } = self; + + // the dismiss button + self.dismiss = queryElement(alertDismissSelector, element); + self.relatedTarget = null; + + // add event listener + toggleAlertHandler(self, 1); + } + + // ALERT PUBLIC METHODS + // ==================== + close(e) { + const target = e ? e.target : null; + const self = e + ? e.target.closest(alertSelector)[alertComponent] + : this; + const { element } = self; + + if (self && element && hasClass(element, showClass)) { + if (target) { + closeAlertEvent.relatedTarget = target; + self.relatedTarget = target; + } + element.dispatchEvent(closeAlertEvent); + if (closeAlertEvent.defaultPrevented) return; + + removeClass(element, showClass); + + if (hasClass(element, fadeClass)) { + emulateTransitionEnd(element, () => alertTransitionEnd(self)); + } else alertTransitionEnd(self); + } + } + + dispose() { + toggleAlertHandler(this); + super.dispose(alertComponent); + } + } + + Alert.init = { + component: alertComponent, + selector: alertSelector, + constructor: Alert, + }; + + function addClass(element, classNAME) { + element.classList.add(classNAME); + } + + const activeClass = 'active'; + + const dataBsToggle = 'data-bs-toggle'; + + /* Native JavaScript for Bootstrap 5 | Button + ---------------------------------------------*/ + + // BUTTON PRIVATE GC + // ================= + const buttonString = 'button'; + const buttonComponent = 'Button'; + const buttonSelector = `[${dataBsToggle}="${buttonString}"]`; + const ariaPressed = 'aria-pressed'; + + // BUTTON PRIVATE METHOD + // ===================== + function toggleButtonHandler(self, add) { + const action = add ? addEventListener : removeEventListener; + self.element[action]('click', self.toggle); + } + + // BUTTON DEFINITION + // ================= + class Button extends BaseComponent { + constructor(target) { + super(buttonComponent, target); + const self = this; + + // initialization element + const { element } = self; + + // set initial state + self.isActive = hasClass(element, activeClass); + element.setAttribute(ariaPressed, !!self.isActive); + + // add event listener + toggleButtonHandler(self, 1); + } + + // BUTTON PUBLIC METHODS + // ===================== + toggle(e) { + if (e) e.preventDefault(); + const self = e ? this[buttonComponent] : this; + const { element } = self; + + if (hasClass(element, 'disabled')) return; + + self.isActive = hasClass(element, activeClass); + const { isActive } = self; + + const action = isActive ? removeClass : addClass; + const ariaValue = isActive ? 'false' : 'true'; + + action(element, activeClass); + element.setAttribute(ariaPressed, ariaValue); + } + + dispose() { + toggleButtonHandler(this); + super.dispose(buttonComponent); + } + } + + Button.init = { + component: buttonComponent, + selector: buttonSelector, + constructor: Button, + }; + + const supportPassive = (() => { + let result = false; + try { + const opts = Object.defineProperty({}, 'passive', { + get() { + result = true; + return result; + }, + }); + document[addEventListener]('DOMContentLoaded', function wrap() { + document[removeEventListener]('DOMContentLoaded', wrap, opts); }, opts); - } catch (e) {} + } catch (e) { + throw Error('Passive events are not supported'); + } + return result; })(); + // general event options + var passiveHandler = supportPassive ? { passive: true } : false; - function isElementInScrollRange(element) { - var bcr = element.getBoundingClientRect(), - viewportHeight = window.innerHeight || document.documentElement.clientHeight; - return bcr.top <= viewportHeight && bcr.bottom >= 0; + function reflow(element) { + return element.offsetHeight; } - function Carousel (element,options) { - options = options || {}; - var self = this, - vars, ops, - slideCustomEvent, slidCustomEvent, - slides, leftArrow, rightArrow, indicator, indicators; - function pauseHandler() { - if ( ops.interval !==false && !element.classList.contains('paused') ) { - element.classList.add('paused'); - !vars.isSliding && ( clearInterval(vars.timer), vars.timer = null ); + function isElementInScrollRange(element) { + const bcr = element.getBoundingClientRect(); + const viewportHeight = window.innerHeight || document.documentElement.clientHeight; + return bcr.top <= viewportHeight && bcr.bottom >= 0; // bottom && top + } + + /* Native JavaScript for Bootstrap 5 | Carousel + ----------------------------------------------- */ + + // CAROUSEL PRIVATE GC + // =================== + const carouselString = 'carousel'; + const carouselComponent = 'Carousel'; + const carouselSelector = `[data-bs-ride="${carouselString}"]`; + const carouselControl = `${carouselString}-control`; + const carouselItem = `${carouselString}-item`; + const dataBsSlideTo = 'data-bs-slide-to'; + const pausedClass = 'paused'; + const defaultCarouselOptions = { + pause: 'hover', // 'boolean|string' + keyboard: false, // 'boolean' + touch: true, // 'boolean' + interval: 5000, // 'boolean|number' + }; + let startX = 0; + let currentX = 0; + let endX = 0; + + // CAROUSEL CUSTOM EVENTS + // ====================== + const carouselSlideEvent = bootstrapCustomEvent(`slide.bs.${carouselString}`); + const carouselSlidEvent = bootstrapCustomEvent(`slid.bs.${carouselString}`); + + // CAROUSEL EVENT HANDLERS + // ======================= + function carouselTransitionEndHandler(self) { + const { + index, direction, element, slides, options, isAnimating, + } = self; + + // discontinue disposed instances + if (isAnimating && element[carouselComponent]) { + const activeItem = getActiveIndex(self); + const orientation = direction === 'left' ? 'next' : 'prev'; + const directionClass = direction === 'left' ? 'start' : 'end'; + self.isAnimating = false; + + addClass(slides[index], activeClass); + removeClass(slides[activeItem], activeClass); + + removeClass(slides[index], `${carouselItem}-${orientation}`); + removeClass(slides[index], `${carouselItem}-${directionClass}`); + removeClass(slides[activeItem], `${carouselItem}-${directionClass}`); + + element.dispatchEvent(carouselSlidEvent); + + // check for element, might have been disposed + if (!document.hidden && options.interval + && !hasClass(element, pausedClass)) { + self.cycle(); } } - function resumeHandler() { - if ( ops.interval !== false && element.classList.contains('paused') ) { - element.classList.remove('paused'); - !vars.isSliding && ( clearInterval(vars.timer), vars.timer = null ); - !vars.isSliding && self.cycle(); + } + + function carouselPauseHandler(e) { + const eventTarget = e.target; + const self = eventTarget.closest(carouselSelector)[carouselComponent]; + const { element, isAnimating } = self; + + if (!hasClass(element, pausedClass)) { + addClass(element, pausedClass); + if (!isAnimating) { + clearInterval(self.timer); + self.timer = null; } } - function indicatorHandler(e) { + } + + function carouselResumeHandler(e) { + const eventTarget = e.target; + const self = eventTarget.closest(carouselSelector)[carouselComponent]; + const { isPaused, isAnimating, element } = self; + + if (!isPaused && hasClass(element, pausedClass)) { + removeClass(element, pausedClass); + + if (!isAnimating) { + clearInterval(self.timer); + self.timer = null; + self.cycle(); + } + } + } + + function carouselIndicatorHandler(e) { + e.preventDefault(); + const { target } = e; + const self = target.closest(carouselSelector)[carouselComponent]; + + if (self.isAnimating) return; + + const newIndex = target.getAttribute(dataBsSlideTo); + + if (target && !hasClass(target, activeClass) // event target is not active + && newIndex) { // AND has the specific attribute + self.to(+newIndex); // do the slide + } + } + + function carouselControlsHandler(e) { + e.preventDefault(); + const that = this; + const self = that.closest(carouselSelector)[carouselComponent]; + const { controls } = self; + + if (controls[1] && that === controls[1]) { + self.next(); + } else if (controls[1] && that === controls[0]) { + self.prev(); + } + } + + function carouselKeyHandler({ which }) { + const [element] = Array.from(document.querySelectorAll(carouselSelector)) + .filter((x) => isElementInScrollRange(x)); + + if (!element) return; + const self = element[carouselComponent]; + + switch (which) { + case 39: + self.next(); + break; + case 37: + self.prev(); + break; + } + } + + // CAROUSEL TOUCH HANDLERS + // ======================= + function carouselTouchDownHandler(e) { + const element = this; + const self = element[carouselComponent]; + + if (!self || self.isTouch) { return; } + + startX = e.changedTouches[0].pageX; + + if (element.contains(e.target)) { + self.isTouch = true; + toggleCarouselTouchHandlers(self, 1); + } + } + + function carouselTouchMoveHandler(e) { + const { changedTouches, type } = e; + const self = this[carouselComponent]; + + if (!self || !self.isTouch) { return; } + + currentX = changedTouches[0].pageX; + + // cancel touch if more than one changedTouches detected + if (type === 'touchmove' && changedTouches.length > 1) { e.preventDefault(); - if (vars.isSliding) { return; } - var eventTarget = e.target; - if ( eventTarget && !eventTarget.classList.contains('active') && eventTarget.getAttribute('data-slide-to') ) { - vars.index = parseInt( eventTarget.getAttribute('data-slide-to')); - } else { return false; } - self.slideTo( vars.index ); } - function controlsHandler(e) { - e.preventDefault(); - if (vars.isSliding) { return; } - var eventTarget = e.currentTarget || e.srcElement; - if ( eventTarget === rightArrow ) { - vars.index++; - } else if ( eventTarget === leftArrow ) { - vars.index--; - } - self.slideTo( vars.index ); - } - function keyHandler(ref) { - var which = ref.which; - if (vars.isSliding) { return; } - switch (which) { - case 39: - vars.index++; - break; - case 37: - vars.index--; - break; - default: return; - } - self.slideTo( vars.index ); - } - function toggleEvents(action) { - action = action ? 'addEventListener' : 'removeEventListener'; - if ( ops.pause && ops.interval ) { - element[action]( mouseHoverEvents[0], pauseHandler, false ); - element[action]( mouseHoverEvents[1], resumeHandler, false ); - element[action]( 'touchstart', pauseHandler, passiveHandler ); - element[action]( 'touchend', resumeHandler, passiveHandler ); - } - ops.touch && slides.length > 1 && element[action]( 'touchstart', touchDownHandler, passiveHandler ); - rightArrow && rightArrow[action]( 'click', controlsHandler,false ); - leftArrow && leftArrow[action]( 'click', controlsHandler,false ); - indicator && indicator[action]( 'click', indicatorHandler,false ); - ops.keyboard && window[action]( 'keydown', keyHandler,false ); - } - function toggleTouchEvents(action) { - action = action ? 'addEventListener' : 'removeEventListener'; - element[action]( 'touchmove', touchMoveHandler, passiveHandler ); - element[action]( 'touchend', touchEndHandler, passiveHandler ); - } - function touchDownHandler(e) { - if ( vars.isTouch ) { return; } - vars.touchPosition.startX = e.changedTouches[0].pageX; - if ( element.contains(e.target) ) { - vars.isTouch = true; - toggleTouchEvents(1); - } - } - function touchMoveHandler(e) { - if ( !vars.isTouch ) { e.preventDefault(); return; } - vars.touchPosition.currentX = e.changedTouches[0].pageX; - if ( e.type === 'touchmove' && e.changedTouches.length > 1 ) { - e.preventDefault(); - return false; - } - } - function touchEndHandler (e) { - if ( !vars.isTouch || vars.isSliding ) { return } - vars.touchPosition.endX = vars.touchPosition.currentX || e.changedTouches[0].pageX; - if ( vars.isTouch ) { - if ( (!element.contains(e.target) || !element.contains(e.relatedTarget) ) - && Math.abs(vars.touchPosition.startX - vars.touchPosition.endX) < 75 ) { - return false; - } else { - if ( vars.touchPosition.currentX < vars.touchPosition.startX ) { - vars.index++; - } else if ( vars.touchPosition.currentX > vars.touchPosition.startX ) { - vars.index--; - } - vars.isTouch = false; - self.slideTo(vars.index); - } - toggleTouchEvents(); - } - } - function setActivePage(pageIndex) { - Array.from(indicators).map(function (x){x.classList.remove('active');}); - indicators[pageIndex] && indicators[pageIndex].classList.add('active'); - } - function transitionEndHandler(e){ - if (vars.touchPosition){ - var next = vars.index, - timeout = e && e.target !== slides[next] ? e.elapsedTime*1000+100 : 20, - activeItem = self.getActiveIndex(), - orientation = vars.direction === 'left' ? 'next' : 'prev'; - vars.isSliding && setTimeout(function () { - if (vars.touchPosition){ - vars.isSliding = false; - slides[next].classList.add('active'); - slides[activeItem].classList.remove('active'); - slides[next].classList.remove(("carousel-item-" + orientation)); - slides[next].classList.remove(("carousel-item-" + (vars.direction))); - slides[activeItem].classList.remove(("carousel-item-" + (vars.direction))); - dispatchCustomEvent.call(element, slidCustomEvent); - if ( !document.hidden && ops.interval && !element.classList.contains('paused') ) { - self.cycle(); - } - } - }, timeout); - } - } - self.cycle = function () { - if (vars.timer) { - clearInterval(vars.timer); - vars.timer = null; - } - vars.timer = setInterval(function () { - var idx = vars.index || self.getActiveIndex(); - isElementInScrollRange(element) && (idx++, self.slideTo( idx ) ); - }, ops.interval); - }; - self.slideTo = function (next) { - if (vars.isSliding) { return; } - var activeItem = self.getActiveIndex(), orientation, eventProperties; - if ( activeItem === next ) { + } + + function carouselTouchEndHandler(e) { + const element = this; + const self = element[carouselComponent]; + + if (!self || !self.isTouch) { return; } + + endX = currentX || e.changedTouches[0].pageX; + + if (self.isTouch) { + // the event target is outside the carousel OR carousel doens't include the related target + if ((!element.contains(e.target) || !element.contains(e.relatedTarget)) + && Math.abs(startX - endX) < 75) { // AND swipe distance is less than 75px + // when the above conditions are satisfied, no need to continue return; - } else if ( (activeItem < next ) || (activeItem === 0 && next === slides.length -1 ) ) { - vars.direction = 'left'; - } else if ( (activeItem > next) || (activeItem === slides.length - 1 && next === 0 ) ) { - vars.direction = 'right'; + } // OR determine next index to slide to + if (currentX < startX) { + self.index += 1; + } else if (currentX > startX) { + self.index -= 1; } - if ( next < 0 ) { next = slides.length - 1; } - else if ( next >= slides.length ){ next = 0; } - orientation = vars.direction === 'left' ? 'next' : 'prev'; - eventProperties = { relatedTarget: slides[next], direction: vars.direction, from: activeItem, to: next }; - slideCustomEvent = bootstrapCustomEvent('slide', 'carousel', eventProperties); - slidCustomEvent = bootstrapCustomEvent('slid', 'carousel', eventProperties); - dispatchCustomEvent.call(element, slideCustomEvent); - if (slideCustomEvent.defaultPrevented) { return; } - vars.index = next; - vars.isSliding = true; - clearInterval(vars.timer); - vars.timer = null; - setActivePage( next ); - if ( getElementTransitionDuration(slides[next]) && element.classList.contains('slide') ) { - slides[next].classList.add(("carousel-item-" + orientation)); - slides[next].offsetWidth; - slides[next].classList.add(("carousel-item-" + (vars.direction))); - slides[activeItem].classList.add(("carousel-item-" + (vars.direction))); - emulateTransitionEnd(slides[next], transitionEndHandler); + + self.isTouch = false; + self.to(self.index); // do the slide + + toggleCarouselTouchHandlers(self); // remove touch events handlers + } + } + + // CAROUSEL PRIVATE METHODS + // ======================== + function activateCarouselIndicator(self, pageIndex) { // indicators + const { indicators } = self; + Array.from(indicators).forEach((x) => removeClass(x, activeClass)); + if (self.indicators[pageIndex]) addClass(indicators[pageIndex], activeClass); + } + + function toggleCarouselTouchHandlers(self, add) { + const { element } = self; + const action = add ? addEventListener : removeEventListener; + element[action]('touchmove', carouselTouchMoveHandler, passiveHandler); + element[action]('touchend', carouselTouchEndHandler, passiveHandler); + } + + function toggleCarouselHandlers(self, add) { + const { + element, options, slides, controls, indicator, + } = self; + const { + touch, pause, interval, keyboard, + } = options; + const action = add ? addEventListener : removeEventListener; + + if (pause && interval) { + element[action]('mouseenter', carouselPauseHandler); + element[action]('mouseleave', carouselResumeHandler); + element[action]('touchstart', carouselPauseHandler, passiveHandler); + element[action]('touchend', carouselResumeHandler, passiveHandler); + } + + if (touch && slides.length > 1) { + element[action]('touchstart', carouselTouchDownHandler, passiveHandler); + } + + controls.forEach((arrow) => { + if (arrow) arrow[action]('click', carouselControlsHandler); + }); + + if (indicator) indicator[action]('click', carouselIndicatorHandler); + if (keyboard) window[action]('keydown', carouselKeyHandler); + } + + function getActiveIndex(self) { + const { slides, element } = self; + return Array.from(slides) + .indexOf(element.getElementsByClassName(`${carouselItem} ${activeClass}`)[0]) || 0; + } + + // CAROUSEL DEFINITION + // =================== + class Carousel extends BaseComponent { + constructor(target, config) { + super(carouselComponent, target, defaultCarouselOptions, config); + // bind + const self = this; + + // additional properties + self.timer = null; + self.direction = 'left'; + self.isPaused = false; + self.isAnimating = false; + self.index = 0; + self.timer = null; + self.isTouch = false; + + // initialization element + const { element } = self; + // carousel elements + // a LIVE collection is prefferable + self.slides = element.getElementsByClassName(carouselItem); + const { slides } = self; + + // invalidate when not enough items + // no need to go further + if (slides.length < 2) { return; } + + self.controls = [ + queryElement(`.${carouselControl}-prev`, element), + queryElement(`.${carouselControl}-next`, element), + ]; + + // a LIVE collection is prefferable + self.indicator = queryElement('.carousel-indicators', element); + self.indicators = (self.indicator && self.indicator.querySelectorAll(`[${dataBsSlideTo}]`)) || []; + + // set JavaScript and DATA API options + const { options } = self; + + // don't use TRUE as interval, it's actually 0, use the default 5000ms better + self.options.interval = options.interval === true + ? defaultCarouselOptions.interval + : options.interval; + + // set first slide active if none + if (getActiveIndex(self) < 0) { + if (slides.length) addClass(slides[0], activeClass); + if (self.indicators.length) activateCarouselIndicator(self, 0); + } + + // attach event handlers + toggleCarouselHandlers(self, 1); + + // start to cycle if interval is set + if (options.interval) self.cycle(); + } + + // CAROUSEL PUBLIC METHODS + // ======================= + cycle() { + const self = this; + const { isPaused, element, options } = self; + if (self.timer) { + clearInterval(self.timer); + self.timer = null; + } + + if (isPaused) { + removeClass(element, pausedClass); + self.isPaused = !isPaused; + } + + self.timer = setInterval(() => { + if (isElementInScrollRange(element)) { + self.index += 1; + self.to(self.index); + } + }, options.interval); + } + + pause() { + const self = this; + const { element, options, isPaused } = self; + if (options.interval && !isPaused) { + clearInterval(self.timer); + self.timer = null; + addClass(element, pausedClass); + self.isPaused = !isPaused; + } + } + + next() { + const self = this; + if (!self.isAnimating) { self.index += 1; self.to(self.index); } + } + + prev() { + const self = this; + if (!self.isAnimating) { self.index -= 1; self.to(self.index); } + } + + to(idx) { + const self = this; + const { + element, isAnimating, slides, options, + } = self; + const activeItem = getActiveIndex(self); + let next = idx; + + // when controled via methods, make sure to check again + // first return if we're on the same item #227 + if (isAnimating || activeItem === next) return; + + // determine transition direction + if ((activeItem < next) || (activeItem === 0 && next === slides.length - 1)) { + self.direction = 'left'; // next + } else if ((activeItem > next) || (activeItem === slides.length - 1 && next === 0)) { + self.direction = 'right'; // prev + } + const { direction } = self; + + // find the right next index + if (next < 0) { next = slides.length - 1; } else if (next >= slides.length) { next = 0; } + + // orientation, class name, eventProperties + const orientation = direction === 'left' ? 'next' : 'prev'; + const directionClass = direction === 'left' ? 'start' : 'end'; + const eventProperties = { + relatedTarget: slides[next], direction, from: activeItem, to: next, + }; + + // update event properties + Object.keys(eventProperties).forEach((k) => { + carouselSlideEvent[k] = eventProperties[k]; + carouselSlidEvent[k] = eventProperties[k]; + }); + + // discontinue when prevented + element.dispatchEvent(carouselSlideEvent); + if (carouselSlideEvent.defaultPrevented) return; + + // update index + self.index = next; + + clearInterval(self.timer); + self.timer = null; + + self.isAnimating = true; + activateCarouselIndicator(self, next); + + if (getElementTransitionDuration(slides[next]) && hasClass(element, 'slide')) { + addClass(slides[next], `${carouselItem}-${orientation}`); + reflow(slides[next]); + addClass(slides[next], `${carouselItem}-${directionClass}`); + addClass(slides[activeItem], `${carouselItem}-${directionClass}`); + + emulateTransitionEnd(slides[next], () => carouselTransitionEndHandler(self)); } else { - slides[next].classList.add('active'); - slides[next].offsetWidth; - slides[activeItem].classList.remove('active'); - setTimeout(function () { - vars.isSliding = false; - if ( ops.interval && element && !element.classList.contains('paused') ) { + addClass(slides[next], activeClass); + removeClass(slides[activeItem], activeClass); + + setTimeout(() => { + self.isAnimating = false; + + // check for element, might have been disposed + if (element && options.interval && !hasClass(element, pausedClass)) { self.cycle(); } - dispatchCustomEvent.call(element, slidCustomEvent); - }, 100 ); + + element.dispatchEvent(carouselSlidEvent); + }, 100); } - }; - self.getActiveIndex = function () { return Array.from(slides).indexOf(element.getElementsByClassName('carousel-item active')[0]) || 0; }; - self.dispose = function () { - var itemClasses = ['left','right','prev','next']; - Array.from(slides).map(function (slide,idx) { - slide.classList.contains('active') && setActivePage( idx ); - itemClasses.map(function (cls) { return slide.classList.remove(("carousel-item-" + cls)); }); - }); - clearInterval(vars.timer); - toggleEvents(); - vars = {}; - ops = {}; - delete element.Carousel; - }; - element = queryElement( element ); - element.Carousel && element.Carousel.dispose(); - slides = element.getElementsByClassName('carousel-item'); - leftArrow = element.getElementsByClassName('carousel-control-prev')[0]; - rightArrow = element.getElementsByClassName('carousel-control-next')[0]; - indicator = element.getElementsByClassName('carousel-indicators')[0]; - indicators = indicator && indicator.getElementsByTagName( "LI" ) || []; - if (slides.length < 2) { return } - var - intervalAttribute = element.getAttribute('data-interval'), - intervalData = intervalAttribute === 'false' ? 0 : parseInt(intervalAttribute), - touchData = element.getAttribute('data-touch') === 'false' ? 0 : 1, - pauseData = element.getAttribute('data-pause') === 'hover' || false, - keyboardData = element.getAttribute('data-keyboard') === 'true' || false, - intervalOption = options.interval, - touchOption = options.touch; - ops = {}; - ops.keyboard = options.keyboard === true || keyboardData; - ops.pause = (options.pause === 'hover' || pauseData) ? 'hover' : false; - ops.touch = touchOption || touchData; - ops.interval = typeof intervalOption === 'number' ? intervalOption - : intervalOption === false || intervalData === 0 || intervalData === false ? 0 - : isNaN(intervalData) ? 5000 - : intervalData; - if (self.getActiveIndex()<0) { - slides.length && slides[0].classList.add('active'); - indicators.length && setActivePage(0); } - vars = {}; - vars.direction = 'left'; - vars.index = 0; - vars.timer = null; - vars.isSliding = false; - vars.isTouch = false; - vars.touchPosition = { - startX : 0, - currentX : 0, - endX : 0 - }; - toggleEvents(1); - if ( ops.interval ){ self.cycle(); } - element.Carousel = self; + + dispose() { + const self = this; + const { slides } = self; + const itemClasses = ['start', 'end', 'prev', 'next']; + + Array.from(slides).forEach((slide, idx) => { + if (hasClass(slide, activeClass)) activateCarouselIndicator(self, idx); + itemClasses.forEach((c) => removeClass(slide, `${carouselItem}-${c}`)); + }); + + toggleCarouselHandlers(self); + clearInterval(self.timer); + super.dispose(carouselComponent); + } } - function Collapse(element,options) { - options = options || {}; - var self = this; - var accordion = null, - collapse = null, - activeCollapse, - activeElement, - showCustomEvent, - shownCustomEvent, - hideCustomEvent, - hiddenCustomEvent; - function openAction(collapseElement, toggle) { - dispatchCustomEvent.call(collapseElement, showCustomEvent); - if ( showCustomEvent.defaultPrevented ) { return; } - collapseElement.isAnimating = true; - collapseElement.classList.add('collapsing'); - collapseElement.classList.remove('collapse'); - collapseElement.style.height = (collapseElement.scrollHeight) + "px"; - emulateTransitionEnd(collapseElement, function () { - collapseElement.isAnimating = false; - collapseElement.setAttribute('aria-expanded','true'); - toggle.setAttribute('aria-expanded','true'); - collapseElement.classList.remove('collapsing'); - collapseElement.classList.add('collapse'); - collapseElement.classList.add('show'); - collapseElement.style.height = ''; - dispatchCustomEvent.call(collapseElement, shownCustomEvent); - }); - } - function closeAction(collapseElement, toggle) { - dispatchCustomEvent.call(collapseElement, hideCustomEvent); - if ( hideCustomEvent.defaultPrevented ) { return; } - collapseElement.isAnimating = true; - collapseElement.style.height = (collapseElement.scrollHeight) + "px"; - collapseElement.classList.remove('collapse'); - collapseElement.classList.remove('show'); - collapseElement.classList.add('collapsing'); - collapseElement.offsetWidth; - collapseElement.style.height = '0px'; - emulateTransitionEnd(collapseElement, function () { - collapseElement.isAnimating = false; - collapseElement.setAttribute('aria-expanded','false'); - toggle.setAttribute('aria-expanded','false'); - collapseElement.classList.remove('collapsing'); - collapseElement.classList.add('collapse'); - collapseElement.style.height = ''; - dispatchCustomEvent.call(collapseElement, hiddenCustomEvent); - }); - } - self.toggle = function (e) { - if (e && e.target.tagName === 'A' || element.tagName === 'A') {e.preventDefault();} - if (element.contains(e.target) || e.target === element) { - if (!collapse.classList.contains('show')) { self.show(); } - else { self.hide(); } - } - }; - self.hide = function () { - if ( collapse.isAnimating ) { return; } - closeAction(collapse,element); - element.classList.add('collapsed'); - }; - self.show = function () { - if ( accordion ) { - activeCollapse = accordion.getElementsByClassName("collapse show")[0]; - activeElement = activeCollapse && (queryElement(("[data-target=\"#" + (activeCollapse.id) + "\"]"),accordion) - || queryElement(("[href=\"#" + (activeCollapse.id) + "\"]"),accordion) ); - } - if ( !collapse.isAnimating ) { - if ( activeElement && activeCollapse !== collapse ) { - closeAction(activeCollapse,activeElement); - activeElement.classList.add('collapsed'); - } - openAction(collapse,element); - element.classList.remove('collapsed'); - } - }; - self.dispose = function () { - element.removeEventListener('click',self.toggle,false); - delete element.Collapse; - }; - element = queryElement(element); - element.Collapse && element.Collapse.dispose(); - var accordionData = element.getAttribute('data-parent'); - showCustomEvent = bootstrapCustomEvent('show', 'collapse'); - shownCustomEvent = bootstrapCustomEvent('shown', 'collapse'); - hideCustomEvent = bootstrapCustomEvent('hide', 'collapse'); - hiddenCustomEvent = bootstrapCustomEvent('hidden', 'collapse'); - collapse = queryElement(options.target || element.getAttribute('data-target') || element.getAttribute('href')); - collapse.isAnimating = false; - accordion = element.closest(options.parent || accordionData); - if ( !element.Collapse ) { - element.addEventListener('click',self.toggle,false); - } - element.Collapse = self; + Carousel.init = { + component: carouselComponent, + selector: carouselSelector, + constructor: Carousel, + }; + + const ariaExpanded = 'aria-expanded'; + + // collapse / tab + const collapsingClass = 'collapsing'; + + const dataBsTarget = 'data-bs-target'; + + const dataBsParent = 'data-bs-parent'; + + const dataBsContainer = 'data-bs-container'; + + function getTargetElement(element) { + return queryElement(element.getAttribute(dataBsTarget) || element.getAttribute('href')) + || element.closest(element.getAttribute(dataBsParent)) + || queryElement(element.getAttribute(dataBsContainer)); } - function setFocus (element){ - element.focus ? element.focus() : element.setActive(); - } + /* Native JavaScript for Bootstrap 5 | Collapse + ----------------------------------------------- */ - function Dropdown(element,option) { - var self = this, - showCustomEvent, - shownCustomEvent, - hideCustomEvent, - hiddenCustomEvent, - relatedTarget = null, - parent, menu, menuItems = [], - persist; - function preventEmptyAnchor(anchor) { - (anchor.href && anchor.href.slice(-1) === '#' || anchor.parentNode && anchor.parentNode.href - && anchor.parentNode.href.slice(-1) === '#') && this.preventDefault(); - } - function toggleDismiss() { - var action = element.open ? 'addEventListener' : 'removeEventListener'; - document[action]('click',dismissHandler,false); - document[action]('keydown',preventScroll,false); - document[action]('keyup',keyHandler,false); - document[action]('focus',dismissHandler,false); - } - function dismissHandler(e) { - var eventTarget = e.target, - hasData = eventTarget && (eventTarget.getAttribute('data-toggle') - || eventTarget.parentNode && eventTarget.parentNode.getAttribute - && eventTarget.parentNode.getAttribute('data-toggle')); - if ( e.type === 'focus' && (eventTarget === element || eventTarget === menu || menu.contains(eventTarget) ) ) { - return; - } - if ( (eventTarget === menu || menu.contains(eventTarget)) && (persist || hasData) ) { return; } - else { - relatedTarget = eventTarget === element || element.contains(eventTarget) ? element : null; - self.hide(); - } - preventEmptyAnchor.call(e,eventTarget); - } - function clickHandler(e) { - relatedTarget = element; - self.show(); - preventEmptyAnchor.call(e,e.target); - } - function preventScroll(e) { - var key = e.which || e.keyCode; - if( key === 38 || key === 40 ) { e.preventDefault(); } - } - function keyHandler(e) { - var key = e.which || e.keyCode, - activeItem = document.activeElement, - isSameElement = activeItem === element, - isInsideMenu = menu.contains(activeItem), - isMenuItem = activeItem.parentNode === menu || activeItem.parentNode.parentNode === menu, - idx = menuItems.indexOf(activeItem); - if ( isMenuItem ) { - idx = isSameElement ? 0 - : key === 38 ? (idx>1?idx-1:0) - : key === 40 ? (idx { + self.isAnimating = false; + if (parent) parent.isAnimating = false; + + triggers.forEach((btn) => btn.setAttribute(ariaExpanded, 'true')); + + removeClass(element, collapsingClass); + addClass(element, collapseString); + addClass(element, showClass); + + element.style.height = ''; + + element.dispatchEvent(shownCollapseEvent); }); - if ( !element.Dropdown ) { - !('tabindex' in menu) && menu.setAttribute('tabindex', '0'); - element.addEventListener('click',clickHandler,false); - } - persist = option === true || element.getAttribute('data-persist') === 'true' || false; - element.open = false; - element.Dropdown = self; } - function Modal(element,options) { - options = options || {}; - var self = this, modal, - showCustomEvent, - shownCustomEvent, - hideCustomEvent, - hiddenCustomEvent, - relatedTarget = null, - scrollBarWidth, - overlay, - overlayDelay, - fixedItems, - ops = {}; - function setScrollbar() { - var openModal = document.body.classList.contains('modal-open'), - bodyPad = parseInt(getComputedStyle(document.body).paddingRight), - bodyOverflow = document.documentElement.clientHeight !== document.documentElement.scrollHeight - || document.body.clientHeight !== document.body.scrollHeight, - modalOverflow = modal.clientHeight !== modal.scrollHeight; - scrollBarWidth = measureScrollbar(); - modal.style.paddingRight = !modalOverflow && scrollBarWidth ? (scrollBarWidth + "px") : ''; - document.body.style.paddingRight = modalOverflow || bodyOverflow ? ((bodyPad + (openModal ? 0:scrollBarWidth)) + "px") : ''; - fixedItems.length && fixedItems.map(function (fixed){ - var itemPad = getComputedStyle(fixed).paddingRight; - fixed.style.paddingRight = modalOverflow || bodyOverflow ? ((parseInt(itemPad) + (openModal?0:scrollBarWidth)) + "px") : ((parseInt(itemPad)) + "px"); - }); + function collapseContent(self) { + const { + element, parent, triggers, + } = self; + + element.dispatchEvent(hideCollapseEvent); + + if (hideCollapseEvent.defaultPrevented) return; + + self.isAnimating = true; + if (parent) parent.isAnimating = true; + + element.style.height = `${element.scrollHeight}px`; + + removeClass(element, collapseString); + removeClass(element, showClass); + addClass(element, collapsingClass); + + reflow(element); + element.style.height = '0px'; + + emulateTransitionEnd(element, () => { + self.isAnimating = false; + if (parent) parent.isAnimating = false; + + triggers.forEach((btn) => btn.setAttribute(ariaExpanded, 'false')); + + removeClass(element, collapsingClass); + addClass(element, collapseString); + + element.style.height = ''; + + element.dispatchEvent(hiddenCollapseEvent); + }); + } + + function toggleCollapseHandler(self, add) { + const action = add ? addEventListener : removeEventListener; + const { triggers } = self; + + if (triggers.length) { + triggers.forEach((btn) => btn[action]('click', collapseClickHandler)); } - function resetScrollbar() { - document.body.style.paddingRight = ''; - modal.style.paddingRight = ''; - fixedItems.length && fixedItems.map(function (fixed){ + } + + // COLLAPSE EVENT HANDLER + // ====================== + function collapseClickHandler(e) { + const { target } = e; + const trigger = target.closest(collapseToggleSelector); + const element = getTargetElement(trigger); + const self = element && element[collapseComponent]; + if (self) self.toggle(target); + + // event target is anchor link #398 + if (trigger && trigger.tagName === 'A') e.preventDefault(); + } + + // COLLAPSE DEFINITION + // =================== + class Collapse extends BaseComponent { + constructor(target, config) { + super(collapseComponent, target, { parent: null }, config); + // bind + const self = this; + + // initialization element + const { element } = self; + + // set triggering elements + self.triggers = Array.from(document.querySelectorAll(collapseToggleSelector)) + .filter((btn) => getTargetElement(btn) === element); + + // set parent accordion + self.parent = queryElement(self.options.parent); + const { parent } = self; + + // set initial state + self.isAnimating = false; + if (parent) parent.isAnimating = false; + + // add event listeners + toggleCollapseHandler(self, 1); + } + + // COLLAPSE PUBLIC METHODS + // ======================= + toggle(related) { + const self = this; + if (!hasClass(self.element, showClass)) self.show(related); + else self.hide(related); + } + + hide() { + const self = this; + const { triggers, isAnimating } = self; + if (isAnimating) return; + + collapseContent(self); + if (triggers.length) { + triggers.forEach((btn) => addClass(btn, `${collapseString}d`)); + } + } + + show() { + const self = this; + const { + element, parent, triggers, isAnimating, + } = self; + let activeCollapse; + let activeCollapseInstance; + + if (parent) { + activeCollapse = Array.from(parent.querySelectorAll(`.${collapseString}.${showClass}`)) + .find((i) => i[collapseComponent]); + activeCollapseInstance = activeCollapse && activeCollapse[collapseComponent]; + } + + if ((!parent || (parent && !parent.isAnimating)) && !isAnimating) { + if (activeCollapseInstance && activeCollapse !== element) { + collapseContent(activeCollapseInstance); + activeCollapseInstance.triggers.forEach((btn) => { + addClass(btn, `${collapseString}d`); + }); + } + + expandCollapse(self); + if (triggers.length) { + triggers.forEach((btn) => removeClass(btn, `${collapseString}d`)); + } + } + } + + dispose() { + const self = this; + const { parent } = self; + toggleCollapseHandler(self); + + if (parent) delete parent.isAnimating; + super.dispose(collapseComponent); + } + } + + Collapse.init = { + component: collapseComponent, + selector: collapseSelector, + constructor: Collapse, + }; + + const dropdownMenuClasses = ['dropdown', 'dropup', 'dropstart', 'dropend']; + + const dropdownMenuClass = 'dropdown-menu'; + + function isEmptyAnchor(elem) { + const parentAnchor = elem.closest('A'); + // anchor href starts with # + return elem && ((elem.href && elem.href.slice(-1) === '#') + // OR a child of an anchor with href starts with # + || (parentAnchor && parentAnchor.href && parentAnchor.href.slice(-1) === '#')); + } + + function setFocus(element) { + element.focus(); + } + + /* Native JavaScript for Bootstrap 5 | Dropdown + ----------------------------------------------- */ + + // DROPDOWN PRIVATE GC + // =================== + const [dropdownString] = dropdownMenuClasses; + const dropdownComponent = 'Dropdown'; + const dropdownSelector = `[${dataBsToggle}="${dropdownString}"]`; + + // DROPDOWN PRIVATE GC + // =================== + const dropupString = dropdownMenuClasses[1]; + const dropstartString = dropdownMenuClasses[2]; + const dropendString = dropdownMenuClasses[3]; + const dropdownMenuEndClass = `${dropdownMenuClass}-end`; + const hideMenuClass = ['d-block', 'invisible']; + const verticalClass = [dropdownString, dropupString]; + const horizontalClass = [dropstartString, dropendString]; + const defaultDropdownOptions = { + offset: 5, // [number] 5(px) + display: 'dynamic', // [dynamic|static] + }; + + // DROPDOWN CUSTOM EVENTS + // ======================== + const showDropdownEvent = bootstrapCustomEvent(`show.bs.${dropdownString}`); + const shownDropdownEvent = bootstrapCustomEvent(`shown.bs.${dropdownString}`); + const hideDropdownEvent = bootstrapCustomEvent(`hide.bs.${dropdownString}`); + const hiddenDropdownEvent = bootstrapCustomEvent(`hidden.bs.${dropdownString}`); + + // DROPDOWN PRIVATE METHODS + // ======================== + function styleDropdown(self, show) { + const { + element, menu, originalClass, menuEnd, options, + } = self; + const parent = element.parentElement; + + // reset menu offset and position + const resetProps = ['margin', 'top', 'bottom', 'left', 'right']; + resetProps.forEach((p) => { menu.style[p] = ''; }); + removeClass(parent, 'position-static'); + + if (!show) { + parent.className = originalClass.join(' '); + const menuAction = menuEnd && !hasClass(menu, dropdownMenuEndClass) ? addClass : removeClass; + menuAction(menu, dropdownMenuEndClass); + return; + } + + const { offset } = options; + let positionClass = dropdownMenuClasses.find((c) => originalClass.includes(c)); + + let dropdownMargin = { + dropdown: [offset, 0, 0], + dropup: [0, 0, offset], + dropstart: [-1, offset, 0], + dropend: [-1, 0, 0, offset], + }; + + const dropdownPosition = { + dropdown: { top: '100%' }, + dropup: { top: 'auto', bottom: '100%' }, + dropstart: { left: 'auto', right: '100%' }, + dropend: { left: '100%', right: 'auto' }, + menuEnd: { right: 0, left: 'auto' }, + }; + + // force showing the menu to calculate its size + hideMenuClass.forEach((c) => addClass(menu, c)); + + const dropdownRegex = new RegExp(`\\b(${dropdownString}|${dropupString}|${dropstartString}|${dropendString})+`); + const elementDimensions = { w: element.offsetWidth, h: element.offsetHeight }; + const menuDimensions = { w: menu.offsetWidth, h: menu.offsetHeight }; + const HTML = document.documentElement; + const BD = document.body; + const windowWidth = (HTML.clientWidth || BD.clientWidth); + const windowHeight = (HTML.clientHeight || BD.clientHeight); + const targetBCR = element.getBoundingClientRect(); + // dropdownMenuEnd && [ dropdown | dropup ] + const leftExceed = targetBCR.left + elementDimensions.w - menuDimensions.w < 0; + // dropstart + const leftFullExceed = targetBCR.left - menuDimensions.w < 0; + // !dropdownMenuEnd && [ dropdown | dropup ] + const rightExceed = targetBCR.left + menuDimensions.w >= windowWidth; + // dropend + const rightFullExceed = targetBCR.left + menuDimensions.w + elementDimensions.w >= windowWidth; + // dropstart | dropend + const bottomExceed = targetBCR.top + menuDimensions.h >= windowHeight; + // dropdown + const bottomFullExceed = targetBCR.top + menuDimensions.h + elementDimensions.h >= windowHeight; + // dropup + const topExceed = targetBCR.top - menuDimensions.h < 0; + + const btnGroup = parent.parentNode.closest('.btn-group,.btn-group-vertical'); + + // recompute position + if (horizontalClass.includes(positionClass) && leftFullExceed && rightFullExceed) { + positionClass = dropdownString; + } + if (horizontalClass.includes(positionClass) && bottomExceed) { + positionClass = dropupString; + } + if (positionClass === dropstartString && leftFullExceed && !bottomExceed) { + positionClass = dropendString; + } + if (positionClass === dropendString && rightFullExceed && !bottomExceed) { + positionClass = dropstartString; + } + if (positionClass === dropupString && topExceed && !bottomFullExceed) { + positionClass = dropdownString; + } + if (positionClass === dropdownString && bottomFullExceed && !topExceed) { + positionClass = dropupString; + } + + // set spacing + dropdownMargin = dropdownMargin[positionClass]; + menu.style.margin = `${dropdownMargin.map((x) => (x ? `${x}px` : x)).join(' ')}`; + Object.keys(dropdownPosition[positionClass]).forEach((position) => { + menu.style[position] = dropdownPosition[positionClass][position]; + }); + + // update dropdown position class + if (!hasClass(parent, positionClass)) { + parent.className = parent.className.replace(dropdownRegex, positionClass); + } + + // update dropdown / dropup to handle parent btn-group element + // as well as the dropdown-menu-end utility class + if (verticalClass.includes(positionClass)) { + const menuEndAction = rightExceed ? addClass : removeClass; + + if (!btnGroup) menuEndAction(menu, dropdownMenuEndClass); + else if (leftExceed) addClass(parent, 'position-static'); + + if (hasClass(menu, dropdownMenuEndClass)) { + Object.keys(dropdownPosition.menuEnd).forEach((p) => { + menu.style[p] = dropdownPosition.menuEnd[p]; + }); + } + } + + // remove util classes from the menu, we have its size + hideMenuClass.forEach((c) => removeClass(menu, c)); + } + + function toggleDropdownDismiss(self) { + const action = self.open ? addEventListener : removeEventListener; + + document[action]('click', dropdownDismissHandler); + document[action]('focus', dropdownDismissHandler); + document[action]('keydown', dropdownPreventScroll); + document[action]('keyup', dropdownKeyHandler); + if (self.options.display === 'dynamic') { + window[action]('scroll', dropdownLayoutHandler, passiveHandler); + window[action]('resize', dropdownLayoutHandler, passiveHandler); + } + } + + function toggleDropdownHandler(self, add) { + const action = add ? addEventListener : removeEventListener; + self.element[action]('click', dropdownClickHandler); + } + + function getCurrentOpenDropdown() { + const currentParent = dropdownMenuClasses + .map((c) => document.getElementsByClassName(`${c} ${showClass}`)) + .find((x) => x.length); + + if (currentParent && currentParent.length) { + return Array.from(currentParent[0].children).find((x) => x.hasAttribute(dataBsToggle)); + } + return null; + } + + // DROPDOWN EVENT HANDLERS + // ======================= + function dropdownDismissHandler(e) { + const { target, type } = e; + if (!target.closest) return; // some weird FF bug #409 + + const element = getCurrentOpenDropdown(); + const parent = element && element.parentNode; + const self = element && element[dropdownComponent]; + const menu = self && self.menu; + + const hasData = target.closest(dropdownSelector) !== null; + const isForm = parent && parent.contains(target) + && (target.tagName === 'form' || target.closest('form') !== null); + + if (type === 'click' && isEmptyAnchor(target)) { + e.preventDefault(); + } + if (type === 'focus' + && (target === element || target === menu || menu.contains(target))) { + return; + } + + if (isForm || hasData) ; else if (self) { + self.hide(element); + } + } + + function dropdownClickHandler(e) { + const element = this; + const self = element[dropdownComponent]; + self.toggle(element); + + if (isEmptyAnchor(e.target)) e.preventDefault(); + } + + function dropdownPreventScroll(e) { + if (e.which === 38 || e.which === 40) e.preventDefault(); + } + + function dropdownKeyHandler({ which }) { + const element = getCurrentOpenDropdown(); + const self = element[dropdownComponent]; + const { menu, menuItems, open } = self; + const activeItem = document.activeElement; + const isSameElement = activeItem === element; + const isInsideMenu = menu.contains(activeItem); + const isMenuItem = activeItem.parentNode === menu || activeItem.parentNode.parentNode === menu; + + let idx = menuItems.indexOf(activeItem); + + if (isMenuItem) { // navigate up | down + if (isSameElement) { + idx = 0; + } else if (which === 38) { + idx = idx > 1 ? idx - 1 : 0; + } else if (which === 40) { + idx = idx < menuItems.length - 1 ? idx + 1 : idx; + } + + if (menuItems[idx]) setFocus(menuItems[idx]); + } + + if (((menuItems.length && isMenuItem) // menu has items + || (!menuItems.length && (isInsideMenu || isSameElement)) // menu might be a form + || !isInsideMenu) // or the focused element is not in the menu at all + && open && which === 27 // menu must be open + ) { + self.toggle(); + } + } + + function dropdownLayoutHandler() { + const element = getCurrentOpenDropdown(); + const self = element && element[dropdownComponent]; + + if (self && self.open) styleDropdown(self, 1); + } + + // DROPDOWN DEFINITION + // =================== + class Dropdown extends BaseComponent { + constructor(target, config) { + super(dropdownComponent, target, defaultDropdownOptions, config); + // bind + const self = this; + + // initialization element + const { element } = self; + + // set targets + const parent = element.parentElement; + self.menu = queryElement(`.${dropdownMenuClass}`, parent); + const { menu } = self; + + self.originalClass = Array.from(parent.classList); + + // set original position + self.menuEnd = hasClass(menu, dropdownMenuEndClass); + + self.menuItems = []; + + Array.from(menu.children).forEach((child) => { + if (child.children.length && (child.children[0].tagName === 'A')) self.menuItems.push(child.children[0]); + if (child.tagName === 'A') self.menuItems.push(child); + }); + + // set initial state to closed + self.open = false; + + // add event listener + toggleDropdownHandler(self, 1); + } + + // DROPDOWN PUBLIC METHODS + // ======================= + toggle(related) { + const self = this; + const { open } = self; + + if (open) self.hide(related); + else self.show(related); + } + + show(related) { + const self = this; + const currentParent = queryElement(dropdownMenuClasses.map((c) => `.${c}.${showClass}`).join(',')); + const currentElement = currentParent && queryElement(dropdownSelector, currentParent); + + if (currentElement) currentElement[dropdownComponent].hide(); + + const { element, menu, open } = self; + const parent = element.parentNode; + + // update relatedTarget and dispatch + showDropdownEvent.relatedTarget = related || null; + parent.dispatchEvent(showDropdownEvent); + if (showDropdownEvent.defaultPrevented) return; + + // change menu position + styleDropdown(self, 1); + + addClass(menu, showClass); + addClass(parent, showClass); + + element.setAttribute(ariaExpanded, true); + self.open = !open; + + setTimeout(() => { + setFocus(menu.getElementsByTagName('INPUT')[0] || element); // focus the first input item | element + toggleDropdownDismiss(self); + + shownDropdownEvent.relatedTarget = related || null; + parent.dispatchEvent(shownDropdownEvent); + }, 1); + } + + hide(related) { + const self = this; + const { element, menu, open } = self; + const parent = element.parentNode; + hideDropdownEvent.relatedTarget = related || null; + parent.dispatchEvent(hideDropdownEvent); + if (hideDropdownEvent.defaultPrevented) return; + + removeClass(menu, showClass); + removeClass(parent, showClass); + + // revert to original position + styleDropdown(self); + + element.setAttribute(ariaExpanded, false); + self.open = !open; + + setFocus(element); + + // only re-attach handler if the instance is not disposed + setTimeout(() => toggleDropdownDismiss(self), 1); + + // update relatedTarget and dispatch + hiddenDropdownEvent.relatedTarget = related || null; + parent.dispatchEvent(hiddenDropdownEvent); + } + + dispose() { + const self = this; + const { element } = self; + + if (hasClass(element.parentNode, showClass) && self.open) self.hide(); + + toggleDropdownHandler(self); + + super.dispose(dropdownComponent); + } + } + + Dropdown.init = { + component: dropdownComponent, + selector: dropdownSelector, + constructor: Dropdown, + }; + + const ariaHidden = 'aria-hidden'; + + const ariaModal = 'aria-modal'; + + const fixedTopClass = 'fixed-top'; + + const fixedBottomClass = 'fixed-bottom'; + + const stickyTopClass = 'sticky-top'; + + const fixedItems = Array.from(document.getElementsByClassName(fixedTopClass)) + .concat(Array.from(document.getElementsByClassName(fixedBottomClass))) + .concat(Array.from(document.getElementsByClassName(stickyTopClass))) + .concat(Array.from(document.getElementsByClassName('is-fixed'))); + + function resetScrollbar() { + const bd = document.body; + bd.style.paddingRight = ''; + bd.style.overflow = ''; + + if (fixedItems.length) { + fixedItems.forEach((fixed) => { fixed.style.paddingRight = ''; + fixed.style.marginRight = ''; }); } - function measureScrollbar() { - var scrollDiv = document.createElement('div'), widthValue; - scrollDiv.className = 'modal-scrollbar-measure'; - document.body.appendChild(scrollDiv); - widthValue = scrollDiv.offsetWidth - scrollDiv.clientWidth; - document.body.removeChild(scrollDiv); - return widthValue; - } - function createOverlay() { - var newOverlay = document.createElement('div'); - overlay = queryElement('.modal-backdrop'); - if ( overlay === null ) { - newOverlay.setAttribute('class', 'modal-backdrop' + (ops.animation ? ' fade' : '')); - overlay = newOverlay; - document.body.appendChild(overlay); - } - return overlay; - } - function removeOverlay () { - overlay = queryElement('.modal-backdrop'); - if ( overlay && !document.getElementsByClassName('modal show')[0] ) { - document.body.removeChild(overlay); overlay = null; - } - overlay === null && (document.body.classList.remove('modal-open'), resetScrollbar()); - } - function toggleEvents(action) { - action = action ? 'addEventListener' : 'removeEventListener'; - window[action]( 'resize', self.update, passiveHandler); - modal[action]( 'click',dismissHandler,false); - document[action]( 'keydown',keyHandler,false); - } - function beforeShow() { - modal.style.display = 'block'; - setScrollbar(); - !document.getElementsByClassName('modal show')[0] && document.body.classList.add('modal-open'); - modal.classList.add('show'); - modal.setAttribute('aria-hidden', false); - modal.classList.contains('fade') ? emulateTransitionEnd(modal, triggerShow) : triggerShow(); - } - function triggerShow() { - setFocus(modal); - modal.isAnimating = false; - toggleEvents(1); - shownCustomEvent = bootstrapCustomEvent('shown', 'modal', { relatedTarget: relatedTarget }); - dispatchCustomEvent.call(modal, shownCustomEvent); - } - function triggerHide(force) { - modal.style.display = ''; - element && (setFocus(element)); - overlay = queryElement('.modal-backdrop'); - if (force !== 1 && overlay && overlay.classList.contains('show') && !document.getElementsByClassName('modal show')[0]) { - overlay.classList.remove('show'); - emulateTransitionEnd(overlay,removeOverlay); - } else { - removeOverlay(); - } - toggleEvents(); - modal.isAnimating = false; - hiddenCustomEvent = bootstrapCustomEvent('hidden', 'modal'); - dispatchCustomEvent.call(modal, hiddenCustomEvent); - } - function clickHandler(e) { - if ( modal.isAnimating ) { return; } - var clickTarget = e.target, - modalID = "#" + (modal.getAttribute('id')), - targetAttrValue = clickTarget.getAttribute('data-target') || clickTarget.getAttribute('href'), - elemAttrValue = element.getAttribute('data-target') || element.getAttribute('href'); - if ( !modal.classList.contains('show') - && (clickTarget === element && targetAttrValue === modalID - || element.contains(clickTarget) && elemAttrValue === modalID) ) { - modal.modalTrigger = element; - relatedTarget = element; - self.show(); - e.preventDefault(); - } - } - function keyHandler(ref) { - var which = ref.which; - if (!modal.isAnimating && ops.keyboard && which == 27 && modal.classList.contains('show') ) { - self.hide(); - } - } - function dismissHandler(e) { - if ( modal.isAnimating ) { return; } - var clickTarget = e.target, - hasData = clickTarget.getAttribute('data-dismiss') === 'modal', - parentWithData = clickTarget.closest('[data-dismiss="modal"]'); - if ( modal.classList.contains('show') && ( parentWithData || hasData - || clickTarget === modal && ops.backdrop !== 'static' ) ) { - self.hide(); relatedTarget = null; - e.preventDefault(); - } - } - self.toggle = function () { - if ( modal.classList.contains('show') ) {self.hide();} else {self.show();} - }; - self.show = function () { - if (modal.classList.contains('show') && !!modal.isAnimating ) {return} - showCustomEvent = bootstrapCustomEvent('show', 'modal', { relatedTarget: relatedTarget }); - dispatchCustomEvent.call(modal, showCustomEvent); - if ( showCustomEvent.defaultPrevented ) { return; } - modal.isAnimating = true; - var currentOpen = document.getElementsByClassName('modal show')[0]; - if (currentOpen && currentOpen !== modal) { - currentOpen.modalTrigger && currentOpen.modalTrigger.Modal.hide(); - currentOpen.Modal && currentOpen.Modal.hide(); - } - if ( ops.backdrop ) { - overlay = createOverlay(); - } - if ( overlay && !currentOpen && !overlay.classList.contains('show') ) { - overlay.offsetWidth; - overlayDelay = getElementTransitionDuration(overlay); - overlay.classList.add('show'); - } - !currentOpen ? setTimeout( beforeShow, overlay && overlayDelay ? overlayDelay:0 ) : beforeShow(); - }; - self.hide = function (force) { - if ( !modal.classList.contains('show') ) {return} - hideCustomEvent = bootstrapCustomEvent( 'hide', 'modal'); - dispatchCustomEvent.call(modal, hideCustomEvent); - if ( hideCustomEvent.defaultPrevented ) { return; } - modal.isAnimating = true; - modal.classList.remove('show'); - modal.setAttribute('aria-hidden', true); - modal.classList.contains('fade') && force !== 1 ? emulateTransitionEnd(modal, triggerHide) : triggerHide(); - }; - self.setContent = function (content) { - queryElement('.modal-content',modal).innerHTML = content; - }; - self.update = function () { - if (modal.classList.contains('show')) { - setScrollbar(); - } - }; - self.dispose = function () { - self.hide(1); - if (element) {element.removeEventListener('click',clickHandler,false); delete element.Modal; } - else {delete modal.Modal;} - }; - element = queryElement(element); - var checkModal = queryElement( element.getAttribute('data-target') || element.getAttribute('href') ); - modal = element.classList.contains('modal') ? element : checkModal; - fixedItems = Array.from(document.getElementsByClassName('fixed-top')) - .concat(Array.from(document.getElementsByClassName('fixed-bottom'))); - if ( element.classList.contains('modal') ) { element = null; } - element && element.Modal && element.Modal.dispose(); - modal && modal.Modal && modal.Modal.dispose(); - ops.keyboard = options.keyboard === false || modal.getAttribute('data-keyboard') === 'false' ? false : true; - ops.backdrop = options.backdrop === 'static' || modal.getAttribute('data-backdrop') === 'static' ? 'static' : true; - ops.backdrop = options.backdrop === false || modal.getAttribute('data-backdrop') === 'false' ? false : ops.backdrop; - ops.animation = modal.classList.contains('fade') ? true : false; - ops.content = options.content; - modal.isAnimating = false; - if ( element && !element.Modal ) { - element.addEventListener('click',clickHandler,false); - } - if ( ops.content ) { - self.setContent( ops.content.trim() ); - } - if (element) { - modal.modalTrigger = element; - element.Modal = self; - } else { - modal.Modal = self; - } } - var mouseClickEvents = { down: 'mousedown', up: 'mouseup' }; - - function getScroll() { - return { - y : window.pageYOffset || document.documentElement.scrollTop, - x : window.pageXOffset || document.documentElement.scrollLeft - } + function measureScrollbar() { + const windowWidth = document.documentElement.clientWidth; + return Math.abs(window.innerWidth - windowWidth); } - function styleTip(link,element,position,parent) { - var tipPositions = /\b(top|bottom|left|right)+/, - elementDimensions = { w : element.offsetWidth, h: element.offsetHeight }, - windowWidth = (document.documentElement.clientWidth || document.body.clientWidth), - windowHeight = (document.documentElement.clientHeight || document.body.clientHeight), - rect = link.getBoundingClientRect(), - scroll = parent === document.body ? getScroll() : { x: parent.offsetLeft + parent.scrollLeft, y: parent.offsetTop + parent.scrollTop }, - linkDimensions = { w: rect.right - rect.left, h: rect.bottom - rect.top }, - isPopover = element.classList.contains('popover'), - arrow = element.getElementsByClassName('arrow')[0], - halfTopExceed = rect.top + linkDimensions.h/2 - elementDimensions.h/2 < 0, - halfLeftExceed = rect.left + linkDimensions.w/2 - elementDimensions.w/2 < 0, - halfRightExceed = rect.left + elementDimensions.w/2 + linkDimensions.w/2 >= windowWidth, - halfBottomExceed = rect.top + elementDimensions.h/2 + linkDimensions.h/2 >= windowHeight, - topExceed = rect.top - elementDimensions.h < 0, - leftExceed = rect.left - elementDimensions.w < 0, - bottomExceed = rect.top + elementDimensions.h + linkDimensions.h >= windowHeight, - rightExceed = rect.left + elementDimensions.w + linkDimensions.w >= windowWidth; - position = (position === 'left' || position === 'right') && leftExceed && rightExceed ? 'top' : position; - position = position === 'top' && topExceed ? 'bottom' : position; - position = position === 'bottom' && bottomExceed ? 'top' : position; - position = position === 'left' && leftExceed ? 'right' : position; - position = position === 'right' && rightExceed ? 'left' : position; - var topPosition, - leftPosition, - arrowTop, - arrowLeft, - arrowWidth, - arrowHeight; - element.className.indexOf(position) === -1 && (element.className = element.className.replace(tipPositions,position)); - arrowWidth = arrow.offsetWidth; arrowHeight = arrow.offsetHeight; - if ( position === 'left' || position === 'right' ) { - if ( position === 'left' ) { - leftPosition = rect.left + scroll.x - elementDimensions.w - ( isPopover ? arrowWidth : 0 ); - } else { - leftPosition = rect.left + scroll.x + linkDimensions.w; - } - if (halfTopExceed) { - topPosition = rect.top + scroll.y; - arrowTop = linkDimensions.h/2 - arrowWidth; - } else if (halfBottomExceed) { - topPosition = rect.top + scroll.y - elementDimensions.h + linkDimensions.h; - arrowTop = elementDimensions.h - linkDimensions.h/2 - arrowWidth; - } else { - topPosition = rect.top + scroll.y - elementDimensions.h/2 + linkDimensions.h/2; - arrowTop = elementDimensions.h/2 - (isPopover ? arrowHeight*0.9 : arrowHeight/2); - } - } else if ( position === 'top' || position === 'bottom' ) { - if ( position === 'top') { - topPosition = rect.top + scroll.y - elementDimensions.h - ( isPopover ? arrowHeight : 0 ); - } else { - topPosition = rect.top + scroll.y + linkDimensions.h; - } - if (halfLeftExceed) { - leftPosition = 0; - arrowLeft = rect.left + linkDimensions.w/2 - arrowWidth; - } else if (halfRightExceed) { - leftPosition = windowWidth - elementDimensions.w*1.01; - arrowLeft = elementDimensions.w - ( windowWidth - rect.left ) + linkDimensions.w/2 - arrowWidth/2; - } else { - leftPosition = rect.left + scroll.x - elementDimensions.w/2 + linkDimensions.w/2; - arrowLeft = elementDimensions.w/2 - ( isPopover ? arrowWidth : arrowWidth/2 ); - } - } - element.style.top = topPosition + 'px'; - element.style.left = leftPosition + 'px'; - arrowTop && (arrow.style.top = arrowTop + 'px'); - arrowLeft && (arrow.style.left = arrowLeft + 'px'); - } + function setScrollbar(scrollbarWidth, overflow) { + const bd = document.body; + const bdStyle = getComputedStyle(bd); + const bodyPad = parseInt(bdStyle.paddingRight, 10); + const isOpen = bdStyle.overflow === 'hidden'; + const sbWidth = isOpen && bodyPad ? 0 : scrollbarWidth; - function Popover(element,options) { - options = options || {}; - var self = this; - var popover = null, - timer = 0, - isIphone = /(iPhone|iPod|iPad)/.test(navigator.userAgent), - titleString, - contentString, - ops = {}; - var triggerData, - animationData, - placementData, - dismissibleData, - delayData, - containerData, - closeBtn, - showCustomEvent, - shownCustomEvent, - hideCustomEvent, - hiddenCustomEvent, - containerElement, - containerDataElement, - modal, - navbarFixedTop, - navbarFixedBottom, - placementClass; - function dismissibleHandler(e) { - if (popover !== null && e.target === queryElement('.close',popover)) { - self.hide(); - } - } - function getContents() { - return { - 0 : options.title || element.getAttribute('data-title') || null, - 1 : options.content || element.getAttribute('data-content') || null - } - } - function removePopover() { - ops.container.removeChild(popover); - timer = null; popover = null; - } - function createPopover() { - titleString = getContents()[0] || null; - contentString = getContents()[1]; - contentString = !!contentString ? contentString.trim() : null; - popover = document.createElement('div'); - var popoverArrow = document.createElement('div'); - popoverArrow.classList.add('arrow'); - popover.appendChild(popoverArrow); - if ( contentString !== null && ops.template === null ) { - popover.setAttribute('role','tooltip'); - if (titleString !== null) { - var popoverTitle = document.createElement('h3'); - popoverTitle.classList.add('popover-header'); - popoverTitle.innerHTML = ops.dismissible ? titleString + closeBtn : titleString; - popover.appendChild(popoverTitle); - } - var popoverBodyMarkup = document.createElement('div'); - popoverBodyMarkup.classList.add('popover-body'); - popoverBodyMarkup.innerHTML = ops.dismissible && titleString === null ? contentString + closeBtn : contentString; - popover.appendChild(popoverBodyMarkup); - } else { - var popoverTemplate = document.createElement('div'); - popoverTemplate.innerHTML = ops.template.trim(); - popover.className = popoverTemplate.firstChild.className; - popover.innerHTML = popoverTemplate.firstChild.innerHTML; - var popoverHeader = queryElement('.popover-header',popover), - popoverBody = queryElement('.popover-body',popover); - titleString && popoverHeader && (popoverHeader.innerHTML = titleString.trim()); - contentString && popoverBody && (popoverBody.innerHTML = contentString.trim()); - } - ops.container.appendChild(popover); - popover.style.display = 'block'; - !popover.classList.contains( 'popover') && popover.classList.add('popover'); - !popover.classList.contains( ops.animation) && popover.classList.add(ops.animation); - !popover.classList.contains( placementClass) && popover.classList.add(placementClass); - } - function showPopover() { - !popover.classList.contains('show') && ( popover.classList.add('show') ); - } - function updatePopover() { - styleTip(element, popover, ops.placement, ops.container); - } - function forceFocus () { - if (popover === null) { element.focus(); } - } - function toggleEvents(action) { - action = action ? 'addEventListener' : 'removeEventListener'; - if (ops.trigger === 'hover') { - element[action]( mouseClickEvents.down, self.show ); - element[action]( mouseHoverEvents[0], self.show ); - if (!ops.dismissible) { element[action]( mouseHoverEvents[1], self.hide ); } - } else if ('click' == ops.trigger) { - element[action]( ops.trigger, self.toggle ); - } else if ('focus' == ops.trigger) { - isIphone && element[action]( 'click', forceFocus, false ); - element[action]( ops.trigger, self.toggle ); - } - } - function touchHandler(e){ - if ( popover && popover.contains(e.target) || e.target === element || element.contains(e.target)) ; else { - self.hide(); - } - } - function dismissHandlerToggle(action) { - action = action ? 'addEventListener' : 'removeEventListener'; - if (ops.dismissible) { - document[action]('click', dismissibleHandler, false ); - } else { - 'focus' == ops.trigger && element[action]( 'blur', self.hide ); - 'hover' == ops.trigger && document[action]( 'touchstart', touchHandler, passiveHandler ); - } - window[action]('resize', self.hide, passiveHandler ); - } - function showTrigger() { - dismissHandlerToggle(1); - dispatchCustomEvent.call(element, shownCustomEvent); - } - function hideTrigger() { - dismissHandlerToggle(); - removePopover(); - dispatchCustomEvent.call(element, hiddenCustomEvent); - } - self.toggle = function () { - if (popover === null) { self.show(); } - else { self.hide(); } - }; - self.show = function () { - clearTimeout(timer); - timer = setTimeout( function () { - if (popover === null) { - dispatchCustomEvent.call(element, showCustomEvent); - if ( showCustomEvent.defaultPrevented ) { return; } - createPopover(); - updatePopover(); - showPopover(); - !!ops.animation ? emulateTransitionEnd(popover, showTrigger) : showTrigger(); - } - }, 20 ); - }; - self.hide = function () { - clearTimeout(timer); - timer = setTimeout( function () { - if (popover && popover !== null && popover.classList.contains('show')) { - dispatchCustomEvent.call(element, hideCustomEvent); - if ( hideCustomEvent.defaultPrevented ) { return; } - popover.classList.remove('show'); - !!ops.animation ? emulateTransitionEnd(popover, hideTrigger) : hideTrigger(); - } - }, ops.delay ); - }; - self.dispose = function () { - self.hide(); - toggleEvents(); - delete element.Popover; - }; - element = queryElement(element); - element.Popover && element.Popover.dispose(); - triggerData = element.getAttribute('data-trigger'); - animationData = element.getAttribute('data-animation'); - placementData = element.getAttribute('data-placement'); - dismissibleData = element.getAttribute('data-dismissible'); - delayData = element.getAttribute('data-delay'); - containerData = element.getAttribute('data-container'); - closeBtn = ''; - showCustomEvent = bootstrapCustomEvent('show', 'popover'); - shownCustomEvent = bootstrapCustomEvent('shown', 'popover'); - hideCustomEvent = bootstrapCustomEvent('hide', 'popover'); - hiddenCustomEvent = bootstrapCustomEvent('hidden', 'popover'); - containerElement = queryElement(options.container); - containerDataElement = queryElement(containerData); - modal = element.closest('.modal'); - navbarFixedTop = element.closest('.fixed-top'); - navbarFixedBottom = element.closest('.fixed-bottom'); - ops.template = options.template ? options.template : null; - ops.trigger = options.trigger ? options.trigger : triggerData || 'hover'; - ops.animation = options.animation && options.animation !== 'fade' ? options.animation : animationData || 'fade'; - ops.placement = options.placement ? options.placement : placementData || 'top'; - ops.delay = parseInt(options.delay || delayData) || 200; - ops.dismissible = options.dismissible || dismissibleData === 'true' ? true : false; - ops.container = containerElement ? containerElement - : containerDataElement ? containerDataElement - : navbarFixedTop ? navbarFixedTop - : navbarFixedBottom ? navbarFixedBottom - : modal ? modal : document.body; - placementClass = "bs-popover-" + (ops.placement); - var popoverContents = getContents(); - titleString = popoverContents[0]; - contentString = popoverContents[1]; - if ( !contentString && !ops.template ) { return; } - if ( !element.Popover ) { - toggleEvents(1); - } - element.Popover = self; - } + if (overflow) { + bd.style.overflow = 'hidden'; + bd.style.paddingRight = `${bodyPad + sbWidth}px`; - function ScrollSpy(element,options) { - options = options || {}; - var self = this, - vars, - targetData, - offsetData, - spyTarget, - scrollTarget, - ops = {}; - function updateTargets(){ - var links = spyTarget.getElementsByTagName('A'); - if (vars.length !== links.length) { - vars.items = []; - vars.targets = []; - Array.from(links).map(function (link){ - var href = link.getAttribute('href'), - targetItem = href && href.charAt(0) === '#' && href.slice(-1) !== '#' && queryElement(href); - if ( targetItem ) { - vars.items.push(link); - vars.targets.push(targetItem); + if (fixedItems.length) { + fixedItems.forEach((fixed) => { + const isSticky = hasClass(fixed, stickyTopClass); + const itemPadValue = getComputedStyle(fixed).paddingRight; + fixed.style.paddingRight = `${parseInt(itemPadValue, 10) + sbWidth}px`; + if (isSticky) { + const itemMValue = getComputedStyle(fixed).marginRight; + fixed.style.marginRight = `${parseInt(itemMValue, 10) - sbWidth}px`; } }); - vars.length = links.length; } } - function updateItem(index) { - var item = vars.items[index], - targetItem = vars.targets[index], - dropmenu = item.classList.contains('dropdown-item') && item.closest('.dropdown-menu'), - dropLink = dropmenu && dropmenu.previousElementSibling, - nextSibling = item.nextElementSibling, - activeSibling = nextSibling && nextSibling.getElementsByClassName('active').length, - targetRect = vars.isWindow && targetItem.getBoundingClientRect(), - isActive = item.classList.contains('active') || false, - topEdge = (vars.isWindow ? targetRect.top + vars.scrollOffset : targetItem.offsetTop) - ops.offset, - bottomEdge = vars.isWindow ? targetRect.bottom + vars.scrollOffset - ops.offset - : vars.targets[index+1] ? vars.targets[index+1].offsetTop - ops.offset - : element.scrollHeight, - inside = activeSibling || vars.scrollOffset >= topEdge && bottomEdge > vars.scrollOffset; - if ( !isActive && inside ) { - item.classList.add('active'); - if (dropLink && !dropLink.classList.contains('active') ) { - dropLink.classList.add('active'); - } - dispatchCustomEvent.call(element, bootstrapCustomEvent( 'activate', 'scrollspy', { relatedTarget: vars.items[index] })); - } else if ( isActive && !inside ) { - item.classList.remove('active'); - if (dropLink && dropLink.classList.contains('active') && !item.parentNode.getElementsByClassName('active').length ) { - dropLink.classList.remove('active'); - } - } else if ( isActive && inside || !inside && !isActive ) { - return; - } - } - function updateItems() { - updateTargets(); - vars.scrollOffset = vars.isWindow ? getScroll().y : element.scrollTop; - vars.items.map(function (l,idx){ return updateItem(idx); }); - } - function toggleEvents(action) { - action = action ? 'addEventListener' : 'removeEventListener'; - scrollTarget[action]('scroll', self.refresh, passiveHandler ); - window[action]( 'resize', self.refresh, passiveHandler ); - } - self.refresh = function () { - updateItems(); - }; - self.dispose = function () { - toggleEvents(); - delete element.ScrollSpy; - }; - element = queryElement(element); - element.ScrollSpy && element.ScrollSpy.dispose(); - targetData = element.getAttribute('data-target'); - offsetData = element.getAttribute('data-offset'); - spyTarget = queryElement(options.target || targetData); - scrollTarget = element.offsetHeight < element.scrollHeight ? element : window; - if (!spyTarget) { return } - ops.target = spyTarget; - ops.offset = parseInt(options.offset || offsetData) || 10; - vars = {}; - vars.length = 0; - vars.items = []; - vars.targets = []; - vars.isWindow = scrollTarget === window; - if ( !element.ScrollSpy ) { - toggleEvents(1); - } - self.refresh(); - element.ScrollSpy = self; } - function Tab(element,options) { - options = options || {}; - var self = this, - heightData, - tabs, dropdown, - showCustomEvent, - shownCustomEvent, - hideCustomEvent, - hiddenCustomEvent, - next, - tabsContentContainer = false, - activeTab, - activeContent, - nextContent, - containerHeight, - equalContents, - nextHeight, - animateHeight; - function triggerEnd() { - tabsContentContainer.style.height = ''; - tabsContentContainer.classList.remove('collapsing'); - tabs.isAnimating = false; + const modalOpenClass = 'modal-open'; + const modalBackdropClass = 'modal-backdrop'; + const modalActiveSelector = `.modal.${showClass}`; + const offcanvasActiveSelector = `.offcanvas.${showClass}`; + + const overlay = document.createElement('div'); + overlay.setAttribute('class', `${modalBackdropClass}`); + + function getCurrentOpen() { + return queryElement(`${modalActiveSelector},${offcanvasActiveSelector}`); + } + + function appendOverlay(hasFade) { + document.body.appendChild(overlay); + if (hasFade) addClass(overlay, fadeClass); + } + + function showOverlay() { + addClass(overlay, showClass); + reflow(overlay); + } + + function hideOverlay() { + removeClass(overlay, showClass); + } + + function removeOverlay() { + const bd = document.body; + const currentOpen = getCurrentOpen(); + + if (!currentOpen) { + removeClass(overlay, fadeClass); + removeClass(bd, modalOpenClass); + bd.removeChild(overlay); + resetScrollbar(); } - function triggerShow() { - if (tabsContentContainer) { - if ( equalContents ) { - triggerEnd(); + } + + function isVisible(element) { + return getComputedStyle(element).visibility !== 'hidden' + && element.offsetParent !== null; + } + + /* Native JavaScript for Bootstrap 5 | Modal + -------------------------------------------- */ + + // MODAL PRIVATE GC + // ================ + const modalString = 'modal'; + const modalComponent = 'Modal'; + const modalSelector = `.${modalString}`; + // const modalActiveSelector = `.${modalString}.${showClass}`; + const modalToggleSelector = `[${dataBsToggle}="${modalString}"]`; + const modalDismissSelector = `[${dataBsDismiss}="${modalString}"]`; + const modalStaticClass = `${modalString}-static`; + const modalDefaultOptions = { + backdrop: true, // boolean|string + keyboard: true, // boolean + }; + + // MODAL CUSTOM EVENTS + // =================== + const showModalEvent = bootstrapCustomEvent(`show.bs.${modalString}`); + const shownModalEvent = bootstrapCustomEvent(`shown.bs.${modalString}`); + const hideModalEvent = bootstrapCustomEvent(`hide.bs.${modalString}`); + const hiddenModalEvent = bootstrapCustomEvent(`hidden.bs.${modalString}`); + + // MODAL PRIVATE METHODS + // ===================== + function setModalScrollbar(self) { + const { element, scrollbarWidth } = self; + const bd = document.body; + const html = document.documentElement; + const bodyOverflow = html.clientHeight !== html.scrollHeight + || bd.clientHeight !== bd.scrollHeight; + const modalOverflow = element.clientHeight !== element.scrollHeight; + + if (!modalOverflow && scrollbarWidth) { + element.style.paddingRight = `${scrollbarWidth}px`; + } + setScrollbar(scrollbarWidth, (modalOverflow || bodyOverflow)); + } + + function toggleModalDismiss(self, add) { + const action = add ? addEventListener : removeEventListener; + window[action]('resize', self.update, passiveHandler); + self.element[action]('click', modalDismissHandler); + document[action]('keydown', modalKeyHandler); + } + + function toggleModalHandler(self, add) { + const action = add ? addEventListener : removeEventListener; + const { triggers } = self; + + if (triggers.length) { + triggers.forEach((btn) => btn[action]('click', modalClickHandler)); + } + } + + function afterModalHide(self) { + const { triggers } = self; + removeOverlay(); + self.element.style.paddingRight = ''; + self.isAnimating = false; + + if (triggers.length) { + const visibleTrigger = triggers.find((x) => isVisible(x)); + if (visibleTrigger) setFocus(visibleTrigger); + } + } + + function afterModalShow(self) { + const { element, relatedTarget } = self; + setFocus(element); + self.isAnimating = false; + + toggleModalDismiss(self, 1); + + shownModalEvent.relatedTarget = relatedTarget; + element.dispatchEvent(shownModalEvent); + } + + function beforeModalShow(self) { + const { element, hasFade } = self; + element.style.display = 'block'; + + setModalScrollbar(self); + if (!queryElement(modalActiveSelector)) { + document.body.style.overflow = 'hidden'; + addClass(document.body, modalOpenClass); + } + + addClass(element, showClass); + element.removeAttribute(ariaHidden); + element.setAttribute(ariaModal, true); + + if (hasFade) emulateTransitionEnd(element, () => afterModalShow(self)); + else afterModalShow(self); + } + + function beforeModalHide(self, force) { + const { + element, relatedTarget, hasFade, + } = self; + const currentOpen = getCurrentOpen(); + + element.style.display = ''; + + // force can also be the transitionEvent object, we wanna make sure it's not + // call is not forced and overlay is visible + if (!force && hasFade && hasClass(overlay, showClass) + && !currentOpen) { // AND no modal is visible + hideOverlay(); + emulateTransitionEnd(overlay, () => afterModalHide(self)); + } else { + afterModalHide(self); + } + + toggleModalDismiss(self); + + hiddenModalEvent.relatedTarget = relatedTarget; + element.dispatchEvent(hiddenModalEvent); + } + + // MODAL EVENT HANDLERS + // ==================== + function modalClickHandler(e) { + const { target } = e; + const trigger = target.closest(modalToggleSelector); + const element = getTargetElement(trigger); + const self = element && element[modalComponent]; + + if (trigger.tagName === 'A') e.preventDefault(); + + if (self.isAnimating) return; + + self.relatedTarget = trigger; + + self.toggle(); + } + + function modalKeyHandler({ which }) { + const element = queryElement(modalActiveSelector); + const self = element[modalComponent]; + const { options, isAnimating } = self; + if (!isAnimating // modal has no animations running + && options.keyboard && which === 27 // the keyboard option is enabled and the key is 27 + && hasClass(element, showClass)) { // the modal is not visible + self.relatedTarget = null; + self.hide(); + } + } + + function modalDismissHandler(e) { + const element = this; + const self = element[modalComponent]; + + if (self.isAnimating) return; + + const { isStatic, modalDialog } = self; + const { target } = e; + const selectedText = document.getSelection().toString().length; + const targetInsideDialog = modalDialog.contains(target); + const dismiss = target.closest(modalDismissSelector); + + if (isStatic && !targetInsideDialog) { + addClass(element, modalStaticClass); + self.isAnimating = true; + emulateTransitionEnd(modalDialog, () => staticTransitionEnd(self)); + } else if (dismiss || (!selectedText && !isStatic && !targetInsideDialog)) { + self.relatedTarget = dismiss || null; + self.hide(); + e.preventDefault(); + } + } + + function staticTransitionEnd(self) { + const duration = getElementTransitionDuration(self.modalDialog) + 17; + removeClass(self.element, modalStaticClass); + // user must wait for zoom out transition + setTimeout(() => { self.isAnimating = false; }, duration); + } + + // MODAL DEFINITION + // ================ + class Modal extends BaseComponent { + constructor(target, config) { + super(modalComponent, target, modalDefaultOptions, config); + + // bind + const self = this; + + // the modal + const { element } = self; + + // the modal-dialog + self.modalDialog = queryElement(`.${modalString}-dialog`, element); + + // modal can have multiple triggering elements + self.triggers = Array.from(document.querySelectorAll(modalToggleSelector)) + .filter((btn) => getTargetElement(btn) === element); + + // additional internals + self.isStatic = self.options.backdrop === 'static'; + self.hasFade = hasClass(element, fadeClass); + self.isAnimating = false; + self.scrollbarWidth = measureScrollbar(); + self.relatedTarget = null; + + // attach event listeners + toggleModalHandler(self, 1); + + // bind + self.update = self.update.bind(self); + } + + // MODAL PUBLIC METHODS + // ==================== + toggle() { + const self = this; + if (hasClass(self.element, showClass)) self.hide(); + else self.show(); + } + + show() { + const self = this; + const { + element, isAnimating, hasFade, relatedTarget, + } = self; + let overlayDelay = 0; + + if (hasClass(element, showClass) && !isAnimating) return; + + showModalEvent.relatedTarget = relatedTarget || null; + element.dispatchEvent(showModalEvent); + if (showModalEvent.defaultPrevented) return; + + self.isAnimating = true; + + // we elegantly hide any opened modal/offcanvas + const currentOpen = getCurrentOpen(); + if (currentOpen && currentOpen !== element) { + const that = currentOpen[modalComponent] + ? currentOpen[modalComponent] + : currentOpen.Offcanvas; + that.hide(); + } + + if (!queryElement(`.${modalBackdropClass}`)) { + appendOverlay(hasFade); + } + overlayDelay = getElementTransitionDuration(overlay); + + if (!hasClass(overlay, showClass)) { + showOverlay(); + } + + if (!currentOpen) { + setTimeout(() => beforeModalShow(self), overlayDelay); + } else beforeModalShow(self); + } + + hide(force) { + const self = this; + const { + element, isAnimating, hasFade, relatedTarget, + } = self; + if (!hasClass(element, showClass) && !isAnimating) return; + + hideModalEvent.relatedTarget = relatedTarget || null; + element.dispatchEvent(hideModalEvent); + if (hideModalEvent.defaultPrevented) return; + + self.isAnimating = true; + removeClass(element, showClass); + element.setAttribute(ariaHidden, true); + element.removeAttribute(ariaModal); + + if (hasFade && force !== 1) { + emulateTransitionEnd(element, () => beforeModalHide(self)); + } else { + beforeModalHide(self, force); + } + } + + update() { + const self = this; + + if (hasClass(self.element, showClass)) setModalScrollbar(self); + } + + dispose() { + const self = this; + self.hide(1); // forced call + + toggleModalHandler(self); + + super.dispose(modalComponent); + } + } + + Modal.init = { + component: modalComponent, + selector: modalSelector, + constructor: Modal, + }; + + /* Native JavaScript for Bootstrap 5 | OffCanvas + ------------------------------------------------ */ + + // OFFCANVAS PRIVATE GC + // ==================== + const offcanvasString = 'offcanvas'; + const offcanvasComponent = 'Offcanvas'; + const OffcanvasSelector = `.${offcanvasString}`; + const offcanvasToggleSelector = `[${dataBsToggle}="${offcanvasString}"]`; + const offcanvasDismissSelector = `[${dataBsDismiss}="${offcanvasString}"]`; + const offcanvasTogglingClass = `${offcanvasString}-toggling`; + const offcanvasDefaultOptions = { + backdrop: true, // boolean + keyboard: true, // boolean + scroll: false, // boolean + }; + + // OFFCANVAS CUSTOM EVENTS + // ======================= + const showOffcanvasEvent = bootstrapCustomEvent(`show.bs.${offcanvasString}`); + const shownOffcanvasEvent = bootstrapCustomEvent(`shown.bs.${offcanvasString}`); + const hideOffcanvasEvent = bootstrapCustomEvent(`hide.bs.${offcanvasString}`); + const hiddenOffcanvasEvent = bootstrapCustomEvent(`hidden.bs.${offcanvasString}`); + + // OFFCANVAS PRIVATE METHODS + // ========================= + function setOffCanvasScrollbar(self) { + const bd = document.body; + const html = document.documentElement; + const bodyOverflow = html.clientHeight !== html.scrollHeight + || bd.clientHeight !== bd.scrollHeight; + setScrollbar(self.scrollbarWidth, bodyOverflow); + } + + function toggleOffcanvasEvents(self, add) { + const action = add ? addEventListener : removeEventListener; + self.triggers.forEach((btn) => btn[action]('click', offcanvasTriggerHandler)); + } + + function toggleOffCanvasDismiss(add) { + const action = add ? addEventListener : removeEventListener; + document[action]('keydown', offcanvasKeyDismissHandler); + document[action]('click', offcanvasDismissHandler); + } + + function beforeOffcanvasShow(self) { + const { element, options } = self; + + if (!options.scroll) { + addClass(document.body, modalOpenClass); + document.body.style.overflow = 'hidden'; + setOffCanvasScrollbar(self); + } + + addClass(element, offcanvasTogglingClass); + addClass(element, showClass); + element.style.visibility = 'visible'; + + emulateTransitionEnd(element, () => showOffcanvasComplete(self)); + } + + function beforeOffcanvasHide(self) { + const { element, options } = self; + const currentOpen = getCurrentOpen(); + + element.blur(); + + if (!currentOpen && options.backdrop && hasClass(overlay, showClass)) { + hideOverlay(); + emulateTransitionEnd(overlay, () => hideOffcanvasComplete(self)); + } else hideOffcanvasComplete(self); + } + + // OFFCANVAS EVENT HANDLERS + // ======================== + function offcanvasTriggerHandler(e) { + const trigger = this.closest(offcanvasToggleSelector); + const element = getTargetElement(trigger); + const self = element && element[offcanvasComponent]; + + if (trigger.tagName === 'A') e.preventDefault(); + if (self) { + self.relatedTarget = trigger; + self.toggle(); + } + } + + function offcanvasDismissHandler(e) { + const element = queryElement(offcanvasActiveSelector); + if (!element) return; + + const offCanvasDismiss = queryElement(offcanvasDismissSelector, element); + const self = element[offcanvasComponent]; + if (!self) return; + + const { options, open, triggers } = self; + const { target } = e; + const trigger = target.closest(offcanvasToggleSelector); + + if (trigger && trigger.tagName === 'A') e.preventDefault(); + + if (open && ((!element.contains(target) && options.backdrop + && (!trigger || (trigger && !triggers.includes(trigger)))) + || offCanvasDismiss.contains(target))) { + self.relatedTarget = target === offCanvasDismiss ? offCanvasDismiss : null; + self.hide(); + } + } + + function offcanvasKeyDismissHandler({ which }) { + const element = queryElement(offcanvasActiveSelector); + if (!element) return; + + const self = element[offcanvasComponent]; + + if (self && self.options.keyboard && which === 27) { + self.relatedTarget = null; + self.hide(); + } + } + + function showOffcanvasComplete(self) { + const { element, triggers, relatedTarget } = self; + removeClass(element, offcanvasTogglingClass); + + element.removeAttribute(ariaHidden); + element.setAttribute(ariaModal, true); + element.setAttribute('role', 'dialog'); + self.isAnimating = false; + + if (triggers.length) { + triggers.forEach((btn) => btn.setAttribute(ariaExpanded, true)); + } + + shownOffcanvasEvent.relatedTarget = relatedTarget || null; + element.dispatchEvent(shownOffcanvasEvent); + + toggleOffCanvasDismiss(1); + setFocus(element); + } + + function hideOffcanvasComplete(self) { + const { + element, options, relatedTarget, triggers, + } = self; + const currentOpen = getCurrentOpen(); + + element.setAttribute(ariaHidden, true); + element.removeAttribute(ariaModal); + element.removeAttribute('role'); + element.style.visibility = ''; + self.open = false; + self.isAnimating = false; + + if (triggers.length) { + triggers.forEach((btn) => btn.setAttribute(ariaExpanded, false)); + const visibleTrigger = triggers.find((x) => isVisible(x)); + if (visibleTrigger) setFocus(visibleTrigger); + } + + // handle new offcanvas showing up + if (!currentOpen) { + if (options.backdrop) removeOverlay(); + if (!options.scroll) { + resetScrollbar(); + removeClass(document.body, modalOpenClass); + } + } + + hiddenOffcanvasEvent.relatedTarget = relatedTarget || null; + element.dispatchEvent(hiddenOffcanvasEvent); + removeClass(element, offcanvasTogglingClass); + + toggleOffCanvasDismiss(); + } + + // OFFCANVAS DEFINITION + // ==================== + class Offcanvas extends BaseComponent { + constructor(target, config) { + super(offcanvasComponent, target, offcanvasDefaultOptions, config); + const self = this; + + // instance element + const { element } = self; + + // all the triggering buttons + self.triggers = Array.from(document.querySelectorAll(offcanvasToggleSelector)) + .filter((btn) => getTargetElement(btn) === element); + + // additional instance property + self.open = false; + self.isAnimating = false; + self.scrollbarWidth = measureScrollbar(); + + // attach event listeners + toggleOffcanvasEvents(self, 1); + } + + // OFFCANVAS PUBLIC METHODS + // ======================== + toggle() { + const self = this; + return self.open ? self.hide() : self.show(); + } + + show() { + const self = this[offcanvasComponent] ? this[offcanvasComponent] : this; + const { + element, options, isAnimating, relatedTarget, + } = self; + let overlayDelay = 0; + + if (self.open || isAnimating) return; + + showOffcanvasEvent.relatedTarget = relatedTarget || null; + element.dispatchEvent(showOffcanvasEvent); + + if (showOffcanvasEvent.defaultPrevented) return; + + // we elegantly hide any opened modal/offcanvas + const currentOpen = getCurrentOpen(); + if (currentOpen && currentOpen !== element) { + const that = currentOpen[offcanvasComponent] + ? currentOpen[offcanvasComponent] + : currentOpen.Modal; + that.hide(); + } + + self.open = true; + self.isAnimating = true; + + if (options.backdrop) { + if (!queryElement(`.${modalBackdropClass}`)) { + appendOverlay(1); + } + + overlayDelay = getElementTransitionDuration(overlay); + + if (!hasClass(overlay, showClass)) showOverlay(); + + setTimeout(() => beforeOffcanvasShow(self), overlayDelay); + } else beforeOffcanvasShow(self); + } + + hide(force) { + const self = this; + const { element, isAnimating, relatedTarget } = self; + + if (!self.open || isAnimating) return; + + hideOffcanvasEvent.relatedTarget = relatedTarget || null; + element.dispatchEvent(hideOffcanvasEvent); + if (hideOffcanvasEvent.defaultPrevented) return; + + self.isAnimating = true; + addClass(element, offcanvasTogglingClass); + removeClass(element, showClass); + + if (!force) { + emulateTransitionEnd(element, () => beforeOffcanvasHide(self)); + } else beforeOffcanvasHide(self); + } + + dispose() { + const self = this; + self.hide(1); + toggleOffcanvasEvents(self); + super.dispose(offcanvasComponent); + } + } + + Offcanvas.init = { + component: offcanvasComponent, + selector: OffcanvasSelector, + constructor: Offcanvas, + }; + + const ariaDescribedBy = 'aria-describedby'; + + var tipClassPositions = { + top: 'top', bottom: 'bottom', left: 'start', right: 'end', + }; + + function isVisibleTip(tip, container) { + return container.contains(tip); + } + + function isMedia(element) { + return [SVGElement, HTMLImageElement, HTMLVideoElement] + .some((mediaType) => element instanceof mediaType); + } + + function closestRelative(element) { + let retval = null; + let el = element; + while (el !== document.body) { + el = el.parentElement; + if (getComputedStyle(el).position === 'relative') { + retval = el; + break; + } + } + return retval; + } + + // both popovers and tooltips (this, event) + function styleTip(self, e) { + const tipClasses = /\b(top|bottom|start|end)+/; + const tip = self.tooltip || self.popover; + // reset tip style + tip.style.top = ''; + tip.style.left = ''; + tip.style.right = ''; + // continue with metrics + const isPopover = !!self.popover; + let tipDimensions = { w: tip.offsetWidth, h: tip.offsetHeight }; + const windowWidth = (document.documentElement.clientWidth || document.body.clientWidth); + const windowHeight = (document.documentElement.clientHeight || document.body.clientHeight); + const { element, options, arrow } = self; + let { container, placement } = options; + let parentIsBody = container === document.body; + const targetPosition = getComputedStyle(element).position; + const parentPosition = getComputedStyle(container).position; + const staticParent = !parentIsBody && parentPosition === 'static'; + let relativeParent = !parentIsBody && parentPosition === 'relative'; + const relContainer = staticParent && closestRelative(container); + // static containers should refer to another relative container or the body + container = relContainer || container; + relativeParent = staticParent && relContainer ? 1 : relativeParent; + parentIsBody = container === document.body; + const parentRect = container.getBoundingClientRect(); + const leftBoundry = relativeParent ? parentRect.left : 0; + const rightBoundry = relativeParent ? parentRect.right : windowWidth; + // this case should not be possible + // absoluteParent = !parentIsBody && parentPosition === 'absolute', + // this case requires a container with placement: relative + const absoluteTarget = targetPosition === 'absolute'; + const targetRect = element.getBoundingClientRect(); + const scroll = parentIsBody + ? { x: window.pageXOffset, y: window.pageYOffset } + : { x: container.scrollLeft, y: container.scrollTop }; + const elemDimensions = { w: element.offsetWidth, h: element.offsetHeight }; + const top = relativeParent ? element.offsetTop : targetRect.top; + const left = relativeParent ? element.offsetLeft : targetRect.left; + // reset arrow style + arrow.style.top = ''; + arrow.style.left = ''; + arrow.style.right = ''; + let topPosition; + let leftPosition; + let rightPosition; + let arrowTop; + let arrowLeft; + let arrowRight; + + // check placement + let topExceed = targetRect.top - tipDimensions.h < 0; + let bottomExceed = targetRect.top + tipDimensions.h + elemDimensions.h >= windowHeight; + let leftExceed = targetRect.left - tipDimensions.w < leftBoundry; + let rightExceed = targetRect.left + tipDimensions.w + elemDimensions.w >= rightBoundry; + + topExceed = ['left', 'right'].includes(placement) + ? targetRect.top + elemDimensions.h / 2 - tipDimensions.h / 2 < 0 + : topExceed; + bottomExceed = ['left', 'right'].includes(placement) + ? targetRect.top + tipDimensions.h / 2 + elemDimensions.h / 2 >= windowHeight + : bottomExceed; + leftExceed = ['top', 'bottom'].includes(placement) + ? targetRect.left + elemDimensions.w / 2 - tipDimensions.w / 2 < leftBoundry + : leftExceed; + rightExceed = ['top', 'bottom'].includes(placement) + ? targetRect.left + tipDimensions.w / 2 + elemDimensions.w / 2 >= rightBoundry + : rightExceed; + + // recompute placement + // first, when both left and right limits are exceeded, we fall back to top|bottom + placement = (['left', 'right'].includes(placement)) && leftExceed && rightExceed ? 'top' : placement; + placement = placement === 'top' && topExceed ? 'bottom' : placement; + placement = placement === 'bottom' && bottomExceed ? 'top' : placement; + placement = placement === 'left' && leftExceed ? 'right' : placement; + placement = placement === 'right' && rightExceed ? 'left' : placement; + + // update tooltip/popover class + if (!tip.className.includes(placement)) { + tip.className = tip.className.replace(tipClasses, tipClassPositions[placement]); + } + // if position has changed, update tip dimensions + tipDimensions = { w: tip.offsetWidth, h: tip.offsetHeight }; + + // we check the computed width & height and update here + const arrowWidth = arrow.offsetWidth || 0; + const arrowHeight = arrow.offsetHeight || 0; + const arrowAdjust = arrowWidth / 2; + + // compute tooltip / popover coordinates + if (['left', 'right'].includes(placement)) { // secondary|side positions + if (placement === 'left') { // LEFT + leftPosition = left + scroll.x - tipDimensions.w - (isPopover ? arrowWidth : 0); + } else { // RIGHT + leftPosition = left + scroll.x + elemDimensions.w + (isPopover ? arrowWidth : 0); + } + + // adjust top and arrow + if (topExceed) { + topPosition = top + scroll.y; + arrowTop = elemDimensions.h / 2 - arrowWidth; + } else if (bottomExceed) { + topPosition = top + scroll.y - tipDimensions.h + elemDimensions.h; + arrowTop = tipDimensions.h - elemDimensions.h / 2 - arrowWidth; + } else { + topPosition = top + scroll.y - tipDimensions.h / 2 + elemDimensions.h / 2; + arrowTop = tipDimensions.h / 2 - arrowHeight / 2; + } + } else if (['top', 'bottom'].includes(placement)) { + if (e && isMedia(element)) { + const eX = !relativeParent ? e.pageX : e.layerX + (absoluteTarget ? element.offsetLeft : 0); + const eY = !relativeParent ? e.pageY : e.layerY + (absoluteTarget ? element.offsetTop : 0); + + if (placement === 'top') { + topPosition = eY - tipDimensions.h - (isPopover ? arrowWidth : arrowHeight); } else { - setTimeout(function () { - tabsContentContainer.style.height = nextHeight + "px"; - tabsContentContainer.offsetWidth; - emulateTransitionEnd(tabsContentContainer, triggerEnd); - },50); + topPosition = eY + arrowHeight; + } + + // adjust left | right and also the arrow + if (e.clientX - tipDimensions.w / 2 < leftBoundry) { // when exceeds left + leftPosition = 0; + arrowLeft = eX - arrowAdjust; + } else if (e.clientX + tipDimensions.w * 0.51 >= rightBoundry) { // when exceeds right + leftPosition = 'auto'; + rightPosition = 0; + arrowLeft = tipDimensions.w - (rightBoundry - eX) - arrowAdjust; + } else { // normal top/bottom + leftPosition = eX - tipDimensions.w / 2; + arrowLeft = tipDimensions.w / 2 - arrowAdjust; } } else { - tabs.isAnimating = false; - } - shownCustomEvent = bootstrapCustomEvent('shown', 'tab', { relatedTarget: activeTab }); - dispatchCustomEvent.call(next, shownCustomEvent); - } - function triggerHide() { - if (tabsContentContainer) { - activeContent.style.float = 'left'; - nextContent.style.float = 'left'; - containerHeight = activeContent.scrollHeight; - } - showCustomEvent = bootstrapCustomEvent('show', 'tab', { relatedTarget: activeTab }); - hiddenCustomEvent = bootstrapCustomEvent('hidden', 'tab', { relatedTarget: next }); - dispatchCustomEvent.call(next, showCustomEvent); - if ( showCustomEvent.defaultPrevented ) { return; } - nextContent.classList.add('active'); - activeContent.classList.remove('active'); - if (tabsContentContainer) { - nextHeight = nextContent.scrollHeight; - equalContents = nextHeight === containerHeight; - tabsContentContainer.classList.add('collapsing'); - tabsContentContainer.style.height = containerHeight + "px"; - tabsContentContainer.offsetHeight; - activeContent.style.float = ''; - nextContent.style.float = ''; - } - if ( nextContent.classList.contains('fade') ) { - setTimeout(function () { - nextContent.classList.add('show'); - emulateTransitionEnd(nextContent,triggerShow); - },20); - } else { triggerShow(); } - dispatchCustomEvent.call(activeTab, hiddenCustomEvent); - } - function getActiveTab() { - var activeTabs = tabs.getElementsByClassName('active'), activeTab; - if ( activeTabs.length === 1 && !activeTabs[0].parentNode.classList.contains('dropdown') ) { - activeTab = activeTabs[0]; - } else if ( activeTabs.length > 1 ) { - activeTab = activeTabs[activeTabs.length-1]; - } - return activeTab; - } - function getActiveContent() { return queryElement(getActiveTab().getAttribute('href')) } - function clickHandler(e) { - e.preventDefault(); - next = e.currentTarget; - !tabs.isAnimating && self.show(); - } - self.show = function () { - next = next || element; - if (!next.classList.contains('active')) { - nextContent = queryElement(next.getAttribute('href')); - activeTab = getActiveTab(); - activeContent = getActiveContent(); - hideCustomEvent = bootstrapCustomEvent( 'hide', 'tab', { relatedTarget: next }); - dispatchCustomEvent.call(activeTab, hideCustomEvent); - if (hideCustomEvent.defaultPrevented) { return; } - tabs.isAnimating = true; - activeTab.classList.remove('active'); - activeTab.setAttribute('aria-selected','false'); - next.classList.add('active'); - next.setAttribute('aria-selected','true'); - if ( dropdown ) { - if ( !element.parentNode.classList.contains('dropdown-menu') ) { - if (dropdown.classList.contains('active')) { dropdown.classList.remove('active'); } - } else { - if (!dropdown.classList.contains('active')) { dropdown.classList.add('active'); } - } + if (placement === 'top') { + topPosition = top + scroll.y - tipDimensions.h - (isPopover ? arrowHeight : 0); + } else { // BOTTOM + topPosition = top + scroll.y + elemDimensions.h + (isPopover ? arrowHeight : 0); } - if (activeContent.classList.contains('fade')) { - activeContent.classList.remove('show'); - emulateTransitionEnd(activeContent, triggerHide); - } else { triggerHide(); } - } - }; - self.dispose = function () { - element.removeEventListener('click',clickHandler,false); - delete element.Tab; - }; - element = queryElement(element); - element.Tab && element.Tab.dispose(); - heightData = element.getAttribute('data-height'); - tabs = element.closest('.nav'); - dropdown = tabs && queryElement('.dropdown-toggle',tabs); - animateHeight = !supportTransition || (options.height === false || heightData === 'false') ? false : true; - tabs.isAnimating = false; - if ( !element.Tab ) { - element.addEventListener('click',clickHandler,false); - } - if (animateHeight) { tabsContentContainer = getActiveContent().parentNode; } - element.Tab = self; - } - function Toast(element,options) { - options = options || {}; - var self = this, - toast, timer = 0, - animationData, - autohideData, - delayData, - showCustomEvent, - hideCustomEvent, - shownCustomEvent, - hiddenCustomEvent, - ops = {}; - function showComplete() { - toast.classList.remove( 'showing' ); - toast.classList.add( 'show' ); - dispatchCustomEvent.call(toast,shownCustomEvent); - if (ops.autohide) { self.hide(); } - } - function hideComplete() { - toast.classList.add( 'hide' ); - dispatchCustomEvent.call(toast,hiddenCustomEvent); - } - function close () { - toast.classList.remove('show' ); - ops.animation ? emulateTransitionEnd(toast, hideComplete) : hideComplete(); - } - function disposeComplete() { - clearTimeout(timer); - element.removeEventListener('click',self.hide,false); - delete element.Toast; - } - self.show = function () { - if (toast && !toast.classList.contains('show')) { - dispatchCustomEvent.call(toast,showCustomEvent); - if (showCustomEvent.defaultPrevented) { return; } - ops.animation && toast.classList.add( 'fade' ); - toast.classList.remove('hide' ); - toast.offsetWidth; - toast.classList.add('showing' ); - ops.animation ? emulateTransitionEnd(toast, showComplete) : showComplete(); - } - }; - self.hide = function (noTimer) { - if (toast && toast.classList.contains('show')) { - dispatchCustomEvent.call(toast,hideCustomEvent); - if(hideCustomEvent.defaultPrevented) { return; } - noTimer ? close() : (timer = setTimeout( close, ops.delay)); - } - }; - self.dispose = function () { - ops.animation ? emulateTransitionEnd(toast, disposeComplete) : disposeComplete(); - }; - element = queryElement(element); - element.Toast && element.Toast.dispose(); - toast = element.closest('.toast'); - animationData = element.getAttribute('data-animation'); - autohideData = element.getAttribute('data-autohide'); - delayData = element.getAttribute('data-delay'); - showCustomEvent = bootstrapCustomEvent('show', 'toast'); - hideCustomEvent = bootstrapCustomEvent('hide', 'toast'); - shownCustomEvent = bootstrapCustomEvent('shown', 'toast'); - hiddenCustomEvent = bootstrapCustomEvent('hidden', 'toast'); - ops.animation = options.animation === false || animationData === 'false' ? 0 : 1; - ops.autohide = options.autohide === false || autohideData === 'false' ? 0 : 1; - ops.delay = parseInt(options.delay || delayData) || 500; - if ( !element.Toast ) { - element.addEventListener('click',self.hide,false); - } - element.Toast = self; - } - - function Tooltip(element,options) { - options = options || {}; - var self = this, - tooltip = null, timer = 0, titleString, - animationData, - placementData, - delayData, - containerData, - showCustomEvent, - shownCustomEvent, - hideCustomEvent, - hiddenCustomEvent, - containerElement, - containerDataElement, - modal, - navbarFixedTop, - navbarFixedBottom, - placementClass, - ops = {}; - function getTitle() { - return element.getAttribute('title') - || element.getAttribute('data-title') - || element.getAttribute('data-original-title') - } - function removeToolTip() { - ops.container.removeChild(tooltip); - tooltip = null; timer = null; - } - function createToolTip() { - titleString = getTitle(); - if ( titleString ) { - tooltip = document.createElement('div'); - if (ops.template) { - var tooltipMarkup = document.createElement('div'); - tooltipMarkup.innerHTML = ops.template.trim(); - tooltip.className = tooltipMarkup.firstChild.className; - tooltip.innerHTML = tooltipMarkup.firstChild.innerHTML; - queryElement('.tooltip-inner',tooltip).innerHTML = titleString.trim(); + // adjust left | right and also the arrow + if (leftExceed) { + leftPosition = 0; + arrowLeft = left + elemDimensions.w / 2 - arrowAdjust; + } else if (rightExceed) { + leftPosition = 'auto'; + rightPosition = 0; + arrowRight = elemDimensions.w / 2 + (parentRect.right - targetRect.right) - arrowAdjust; } else { - var tooltipArrow = document.createElement('div'); - tooltipArrow.classList.add('arrow'); - tooltip.appendChild(tooltipArrow); - var tooltipInner = document.createElement('div'); - tooltipInner.classList.add('tooltip-inner'); - tooltip.appendChild(tooltipInner); - tooltipInner.innerHTML = titleString; + leftPosition = left + scroll.x - tipDimensions.w / 2 + elemDimensions.w / 2; + arrowLeft = tipDimensions.w / 2 - arrowAdjust; } - tooltip.style.left = '0'; - tooltip.style.top = '0'; - tooltip.setAttribute('role','tooltip'); - !tooltip.classList.contains('tooltip') && tooltip.classList.add('tooltip'); - !tooltip.classList.contains(ops.animation) && tooltip.classList.add(ops.animation); - !tooltip.classList.contains(placementClass) && tooltip.classList.add(placementClass); - ops.container.appendChild(tooltip); } } - function updateTooltip() { - styleTip(element, tooltip, ops.placement, ops.container); + + // apply style to tooltip/popover and its arrow + tip.style.top = `${topPosition}px`; + tip.style.left = leftPosition === 'auto' ? leftPosition : `${leftPosition}px`; + tip.style.right = rightPosition !== undefined ? `${rightPosition}px` : ''; + // update arrow placement or clear side + if (arrowTop !== undefined) { + arrow.style.top = `${arrowTop}px`; } - function showTooltip() { - !tooltip.classList.contains('show') && ( tooltip.classList.add('show') ); + + if (arrowLeft !== undefined) { + arrow.style.left = `${arrowLeft}px`; + } else if (arrowRight !== undefined) { + arrow.style.right = `${arrowRight}px`; } - function touchHandler(e){ - if ( tooltip && tooltip.contains(e.target) || e.target === element || element.contains(e.target)) ; else { - self.hide(); - } - } - function toggleAction(action){ - action = action ? 'addEventListener' : 'removeEventListener'; - document[action]( 'touchstart', touchHandler, passiveHandler ); - window[action]( 'resize', self.hide, passiveHandler ); - } - function showAction() { - toggleAction(1); - dispatchCustomEvent.call(element, shownCustomEvent); - } - function hideAction() { - toggleAction(); - removeToolTip(); - dispatchCustomEvent.call(element, hiddenCustomEvent); - } - function toggleEvents(action) { - action = action ? 'addEventListener' : 'removeEventListener'; - element[action](mouseClickEvents.down, self.show,false); - element[action](mouseHoverEvents[0], self.show,false); - element[action](mouseHoverEvents[1], self.hide,false); - } - self.show = function () { - clearTimeout(timer); - timer = setTimeout( function () { - if (tooltip === null) { - dispatchCustomEvent.call(element, showCustomEvent); - if (showCustomEvent.defaultPrevented) { return; } - if(createToolTip() !== false) { - updateTooltip(); - showTooltip(); - !!ops.animation ? emulateTransitionEnd(tooltip, showAction) : showAction(); - } - } - }, 20 ); - }; - self.hide = function () { - clearTimeout(timer); - timer = setTimeout( function () { - if (tooltip && tooltip.classList.contains('show')) { - dispatchCustomEvent.call(element, hideCustomEvent); - if (hideCustomEvent.defaultPrevented) { return; } - tooltip.classList.remove('show'); - !!ops.animation ? emulateTransitionEnd(tooltip, hideAction) : hideAction(); - } - }, ops.delay); - }; - self.toggle = function () { - if (!tooltip) { self.show(); } - else { self.hide(); } - }; - self.dispose = function () { - toggleEvents(); + } + + let bsnUID = 1; + + // popover, tooltip, scrollspy need a unique id + function getUID(element, key) { + bsnUID += 1; + return element[key] || bsnUID; + } + + function getTipContainer(element) { + // maybe the element is inside a modal + const modal = element.closest('.modal'); + + // OR maybe the element is inside a fixed navbar + const navbarFixed = element.closest(`.${fixedTopClass},.${fixedBottomClass}`); + + // set default container option appropriate for the context + return modal || navbarFixed || document.body; + } + + /* Native JavaScript for Bootstrap 5 | Popover + ---------------------------------------------- */ + + // POPOVER PRIVATE GC + // ================== + const popoverString = 'popover'; + const popoverComponent = 'Popover'; + const popoverSelector = `[${dataBsToggle}="${popoverString}"],[data-tip="${popoverString}"]`; + const popoverDefaultOptions = { + template: '', // string + title: null, // string + content: null, // string + sanitizeFn: null, // function + customClass: null, // string + dismissible: false, // boolean + animation: true, // boolean + trigger: 'hover', // string + placement: 'top', // string + delay: 200, // number + }; + + // POPOVER PRIVATE GC + // ================== + const appleBrands = /(iPhone|iPod|iPad)/; + const isIphone = navigator.userAgentData + ? navigator.userAgentData.brands.some((x) => appleBrands.test(x.brand)) + : appleBrands.test(navigator.userAgent); + // popoverArrowClass = `${popoverString}-arrow`, + const popoverHeaderClass = `${popoverString}-header`; + const popoverBodyClass = `${popoverString}-body`; + // close btn for dissmissible popover + let popoverCloseButton = ''; + + // POPOVER CUSTOM EVENTS + // ===================== + const showPopoverEvent = bootstrapCustomEvent(`show.bs.${popoverString}`); + const shownPopoverEvent = bootstrapCustomEvent(`shown.bs.${popoverString}`); + const hidePopoverEvent = bootstrapCustomEvent(`hide.bs.${popoverString}`); + const hiddenPopoverEvent = bootstrapCustomEvent(`hidden.bs.${popoverString}`); + + // POPOVER EVENT HANDLERS + // ====================== + function popoverForceFocus() { + setFocus(this); + } + + function popoverTouchHandler({ target }) { + const self = this; + const { popover, element } = self; + + if ((popover && popover.contains(target)) // popover includes touch target + || target === element // OR touch target is element + || element.contains(target)) ; else { self.hide(); - element.setAttribute('title', element.getAttribute('data-original-title')); - element.removeAttribute('data-original-title'); - delete element.Tooltip; - }; - element = queryElement(element); - element.Tooltip && element.Tooltip.dispose(); - animationData = element.getAttribute('data-animation'); - placementData = element.getAttribute('data-placement'); - delayData = element.getAttribute('data-delay'); - containerData = element.getAttribute('data-container'); - showCustomEvent = bootstrapCustomEvent('show', 'tooltip'); - shownCustomEvent = bootstrapCustomEvent('shown', 'tooltip'); - hideCustomEvent = bootstrapCustomEvent('hide', 'tooltip'); - hiddenCustomEvent = bootstrapCustomEvent('hidden', 'tooltip'); - containerElement = queryElement(options.container); - containerDataElement = queryElement(containerData); - modal = element.closest('.modal'); - navbarFixedTop = element.closest('.fixed-top'); - navbarFixedBottom = element.closest('.fixed-bottom'); - ops.animation = options.animation && options.animation !== 'fade' ? options.animation : animationData || 'fade'; - ops.placement = options.placement ? options.placement : placementData || 'top'; - ops.template = options.template ? options.template : null; - ops.delay = parseInt(options.delay || delayData) || 200; - ops.container = containerElement ? containerElement - : containerDataElement ? containerDataElement - : navbarFixedTop ? navbarFixedTop - : navbarFixedBottom ? navbarFixedBottom - : modal ? modal : document.body; - placementClass = "bs-tooltip-" + (ops.placement); - titleString = getTitle(); - if ( !titleString ) { return; } - if (!element.Tooltip) { - element.setAttribute('data-original-title',titleString); - element.removeAttribute('title'); - toggleEvents(1); - } - element.Tooltip = self; - } - - var componentsInit = {}; - - function initializeDataAPI( Constructor, collection ){ - Array.from(collection).map(function (x){ return new Constructor(x); }); - } - function initCallback(lookUp){ - lookUp = lookUp || document; - for (var component in componentsInit) { - initializeDataAPI( componentsInit[component][0], lookUp.querySelectorAll (componentsInit[component][1]) ); } } - componentsInit.Alert = [ Alert, '[data-dismiss="alert"]']; - componentsInit.Button = [ Button, '[data-toggle="buttons"]' ]; - componentsInit.Carousel = [ Carousel, '[data-ride="carousel"]' ]; - componentsInit.Collapse = [ Collapse, '[data-toggle="collapse"]' ]; - componentsInit.Dropdown = [ Dropdown, '[data-toggle="dropdown"]']; - componentsInit.Modal = [ Modal, '[data-toggle="modal"]' ]; - componentsInit.Popover = [ Popover, '[data-toggle="popover"],[data-tip="popover"]' ]; - componentsInit.ScrollSpy = [ ScrollSpy, '[data-spy="scroll"]' ]; - componentsInit.Tab = [ Tab, '[data-toggle="tab"]' ]; - componentsInit.Toast = [ Toast, '[data-dismiss="toast"]' ]; - componentsInit.Tooltip = [ Tooltip, '[data-toggle="tooltip"],[data-tip="tooltip"]' ]; - document.body ? initCallback() : document.addEventListener( 'DOMContentLoaded', function initWrapper(){ - initCallback(); - document.removeEventListener('DOMContentLoaded',initWrapper,false); - }, false ); + // POPOVER PRIVATE METHODS + // ======================= + function createPopover(self) { + const { id, options } = self; + const { + animation, customClass, sanitizeFn, placement, dismissible, + } = options; + let { title, content, template } = options; - function removeElementDataAPI( ConstructorName, collection ){ - Array.from(collection).map(function (x){ return x[ConstructorName].dispose(); }); + // set initial popover class + const placementClass = `bs-${popoverString}-${tipClassPositions[placement]}`; + + // fixing #233 + title = title ? title.trim() : null; + content = content ? content.trim() : null; + + // sanitize title && content + if (sanitizeFn) { + title = title ? sanitizeFn(title) : null; + content = content ? sanitizeFn(content) : null; + template = template ? sanitizeFn(template) : null; + popoverCloseButton = sanitizeFn(popoverCloseButton); + } + + self.popover = document.createElement('div'); + const { popover } = self; + + // set id and aria-describedby + popover.setAttribute('id', id); + popover.setAttribute('role', 'tooltip'); + + // load template + const popoverTemplate = document.createElement('div'); + popoverTemplate.innerHTML = template.trim(); + popover.className = popoverTemplate.firstChild.className; + popover.innerHTML = popoverTemplate.firstChild.innerHTML; + + const popoverHeader = queryElement(`.${popoverHeaderClass}`, popover); + const popoverBody = queryElement(`.${popoverBodyClass}`, popover); + + // set arrow + self.arrow = queryElement(`.${popoverString}-arrow`, popover); + + // set dismissible button + if (dismissible) { + title = title ? title + popoverCloseButton : title; + content = title === null ? +popoverCloseButton : content; + } + + // fill the template with content from data attributes + if (title && popoverHeader) popoverHeader.innerHTML = title.trim(); + if (content && popoverBody) popoverBody.innerHTML = content.trim(); + + // set popover animation and placement + if (!hasClass(popover, popoverString)) addClass(popover, popoverString); + if (animation && !hasClass(popover, fadeClass)) addClass(popover, fadeClass); + if (customClass && !hasClass(popover, customClass)) { + addClass(popover, customClass); + } + if (!hasClass(popover, placementClass)) addClass(popover, placementClass); } - function removeDataAPI(lookUp) { - lookUp = lookUp || document; - for (var component in componentsInit) { - removeElementDataAPI( component, lookUp.querySelectorAll (componentsInit[component][1]) ); + + function removePopover(self) { + const { element, popover, options } = self; + element.removeAttribute(ariaDescribedBy); + options.container.removeChild(popover); + self.timer = null; + } + + function togglePopoverHandlers(self, add) { + const action = add ? addEventListener : removeEventListener; + const { element, options } = self; + const { trigger, dismissible } = options; + self.enabled = !!add; + + if (trigger === 'hover') { + element[action]('mousedown', self.show); + element[action]('mouseenter', self.show); + if (isMedia(element)) element[action]('mousemove', self.update, passiveHandler); + if (!dismissible) element[action]('mouseleave', self.hide); + } else if (trigger === 'click') { + element[action](trigger, self.toggle); + } else if (trigger === 'focus') { + if (isIphone) element[action]('click', popoverForceFocus); + element[action]('focusin', self.show); } } - var version = "3.0.15"; + function dismissHandlerToggle(self, add) { + const action = add ? addEventListener : removeEventListener; + const { options, element, popover } = self; + const { trigger, dismissible } = options; + + if (dismissible) { + const [btnClose] = popover.getElementsByClassName('btn-close'); + if (btnClose) btnClose[action]('click', self.hide); + } else { + if (trigger === 'focus') element[action]('focusout', self.hide); + if (trigger === 'hover') document[action]('touchstart', popoverTouchHandler, passiveHandler); + } + + if (!isMedia(element)) { + window[action]('scroll', self.update, passiveHandler); + window[action]('resize', self.update, passiveHandler); + } + } + + function popoverShowTrigger(self) { + dismissHandlerToggle(self, 1); + self.element.dispatchEvent(shownPopoverEvent); + } + + function popoverHideTrigger(self) { + dismissHandlerToggle(self); + removePopover(self); + self.element.dispatchEvent(hiddenPopoverEvent); + } + + // POPOVER DEFINITION + // ================== + class Popover extends BaseComponent { + constructor(target, config) { + popoverDefaultOptions.container = getTipContainer(queryElement(target)); + super(popoverComponent, target, popoverDefaultOptions, config); + + // bind + const self = this; + + // initialization element + const { element } = self; + // additional instance properties + self.timer = null; + self.popover = null; + self.arrow = null; + self.enabled = false; + // set unique ID for aria-describedby + self.id = `${popoverString}-${getUID(element)}`; + + // set instance options + const { options } = self; + + // media elements only work with body as a container + self.options.container = isMedia(element) + ? popoverDefaultOptions.container + : queryElement(options.container); + + // reset default container + popoverDefaultOptions.container = null; + + // invalidate when no content is set + if (!options.content) return; + + // crate popover + createPopover(self); + + // bind + self.update = self.update.bind(self); + + // attach event listeners + togglePopoverHandlers(self, 1); + } + + update(e) { + styleTip(this, e); + } + + // POPOVER PUBLIC METHODS + // ====================== + toggle(e) { + const self = e ? this[popoverComponent] : this; + const { popover, options } = self; + if (!isVisibleTip(popover, options.container)) self.show(); + else self.hide(); + } + + show(e) { + const self = e ? this[popoverComponent] : this; + const { + element, popover, options, id, + } = self; + const { container } = options; + + clearTimeout(self.timer); + + self.timer = setTimeout(() => { + if (!isVisibleTip(popover, container)) { + element.dispatchEvent(showPopoverEvent); + if (showPopoverEvent.defaultPrevented) return; + + // append to the container + container.appendChild(popover); + element.setAttribute(ariaDescribedBy, id); + + self.update(e); + if (!hasClass(popover, showClass)) addClass(popover, showClass); + + if (options.animation) emulateTransitionEnd(popover, () => popoverShowTrigger(self)); + else popoverShowTrigger(self); + } + }, 17); + } + + hide(e) { + let self; + if (e && this[popoverComponent]) { + self = this[popoverComponent]; + } else if (e) { // dismissible popover + const dPopover = this.closest(`.${popoverString}`); + const dEl = dPopover && queryElement(`[${ariaDescribedBy}="${dPopover.id}"]`); + self = dEl[popoverComponent]; + } else { + self = this; + } + const { element, popover, options } = self; + + clearTimeout(self.timer); + + self.timer = setTimeout(() => { + if (isVisibleTip(popover, options.container)) { + element.dispatchEvent(hidePopoverEvent); + if (hidePopoverEvent.defaultPrevented) return; + + removeClass(popover, showClass); + + if (options.animation) emulateTransitionEnd(popover, () => popoverHideTrigger(self)); + else popoverHideTrigger(self); + } + }, options.delay + 17); + } + + enable() { + const self = this; + const { enabled } = self; + if (!enabled) { + togglePopoverHandlers(self, 1); + self.enabled = !enabled; + } + } + + disable() { + const self = this; + const { enabled, popover, options } = self; + if (enabled) { + if (isVisibleTip(popover, options.container) && options.animation) { + self.hide(); + + setTimeout( + () => togglePopoverHandlers(self), + getElementTransitionDuration(popover) + options.delay + 17, + ); + } else { + togglePopoverHandlers(self); + } + self.enabled = !enabled; + } + } + + toggleEnabled() { + const self = this; + if (!self.enabled) self.enable(); + else self.disable(); + } + + dispose() { + const self = this; + const { popover, options } = self; + const { container, animation } = options; + if (animation && isVisibleTip(popover, container)) { + options.delay = 0; // reset delay + self.hide(); + emulateTransitionEnd(popover, () => togglePopoverHandlers(self)); + } else { + togglePopoverHandlers(self); + } + super.dispose(popoverComponent); + } + } + + Popover.init = { + component: popoverComponent, + selector: popoverSelector, + constructor: Popover, + }; + + /* Native JavaScript for Bootstrap 5 | ScrollSpy + ------------------------------------------------ */ + + // SCROLLSPY PRIVATE GC + // ==================== + const scrollspyString = 'scrollspy'; + const scrollspyComponent = 'ScrollSpy'; + const scrollspySelector = '[data-bs-spy="scroll"]'; + const scrollSpyDefaultOptions = { + offset: 10, + target: null, + }; + + // SCROLLSPY CUSTOM EVENT + // ====================== + const activateScrollSpy = bootstrapCustomEvent(`activate.bs.${scrollspyString}`); + + // SCROLLSPY PRIVATE METHODS + // ========================= + function updateSpyTargets(self) { + const { + target, scrollTarget, isWindow, options, itemsLength, scrollHeight, + } = self; + const { offset } = options; + const links = target.getElementsByTagName('A'); + + self.scrollTop = isWindow + ? scrollTarget.pageYOffset + : scrollTarget.scrollTop; + + // only update items/offsets once or with each mutation + if (itemsLength !== links.length || getScrollHeight(scrollTarget) !== scrollHeight) { + let href; + let targetItem; + let rect; + + // reset arrays & update + self.items = []; + self.offsets = []; + self.scrollHeight = getScrollHeight(scrollTarget); + self.maxScroll = self.scrollHeight - getOffsetHeight(self); + + Array.from(links).forEach((link) => { + href = link.getAttribute('href'); + targetItem = href && href.charAt(0) === '#' && href.slice(-1) !== '#' && queryElement(href); + + if (targetItem) { + self.items.push(link); + rect = targetItem.getBoundingClientRect(); + self.offsets.push((isWindow ? rect.top + self.scrollTop : targetItem.offsetTop) - offset); + } + }); + self.itemsLength = self.items.length; + } + } + + function getScrollHeight(scrollTarget) { + return scrollTarget.scrollHeight || Math.max( + document.body.scrollHeight, + document.documentElement.scrollHeight, + ); + } + + function getOffsetHeight({ element, isWindow }) { + if (!isWindow) return element.getBoundingClientRect().height; + return window.innerHeight; + } + + function clear(target) { + Array.from(target.getElementsByTagName('A')).forEach((item) => { + if (hasClass(item, activeClass)) removeClass(item, activeClass); + }); + } + + function activate(self, item) { + const { target, element } = self; + clear(target); + self.activeItem = item; + addClass(item, activeClass); + + // activate all parents + const parents = []; + let parentItem = item; + while (parentItem !== document.body) { + parentItem = parentItem.parentNode; + if (hasClass(parentItem, 'nav') || hasClass(parentItem, 'dropdown-menu')) parents.push(parentItem); + } + + parents.forEach((menuItem) => { + const parentLink = menuItem.previousElementSibling; + + if (parentLink && !hasClass(parentLink, activeClass)) { + addClass(parentLink, activeClass); + } + }); + + // update relatedTarget and dispatch + activateScrollSpy.relatedTarget = item; + element.dispatchEvent(activateScrollSpy); + } + + function toggleSpyHandlers(self, add) { + const action = add ? addEventListener : removeEventListener; + self.scrollTarget[action]('scroll', self.refresh, passiveHandler); + } + + // SCROLLSPY DEFINITION + // ==================== + class ScrollSpy extends BaseComponent { + constructor(target, config) { + super(scrollspyComponent, target, scrollSpyDefaultOptions, config); + // bind + const self = this; + + // initialization element & options + const { element, options } = self; + + // additional properties + self.target = queryElement(options.target); + + // invalidate + if (!self.target) return; + + // set initial state + self.scrollTarget = element.clientHeight < element.scrollHeight ? element : window; + self.isWindow = self.scrollTarget === window; + self.scrollTop = 0; + self.maxScroll = 0; + self.scrollHeight = 0; + self.activeItem = null; + self.items = []; + self.offsets = []; + + // bind events + self.refresh = self.refresh.bind(self); + + // add event handlers + toggleSpyHandlers(self, 1); + + self.refresh(); + } + + // SCROLLSPY PUBLIC METHODS + // ======================== + refresh() { + const self = this; + const { target } = self; + + // check if target is visible and invalidate + if (target.offsetHeight === 0) return; + + updateSpyTargets(self); + + const { + scrollTop, maxScroll, itemsLength, items, activeItem, + } = self; + + if (scrollTop >= maxScroll) { + const newActiveItem = items[itemsLength - 1]; + + if (activeItem !== newActiveItem) { + activate(self, newActiveItem); + } + return; + } + + const { offsets } = self; + + if (activeItem && scrollTop < offsets[0] && offsets[0] > 0) { + self.activeItem = null; + clear(target); + return; + } + + items.forEach((item, i) => { + if (activeItem !== item && scrollTop >= offsets[i] + && (typeof offsets[i + 1] === 'undefined' || scrollTop < offsets[i + 1])) { + activate(self, item); + } + }); + } + + dispose() { + toggleSpyHandlers(this); + super.dispose(scrollspyComponent); + } + } + + ScrollSpy.init = { + component: scrollspyComponent, + selector: scrollspySelector, + constructor: ScrollSpy, + }; + + const ariaSelected = 'aria-selected'; + + /* Native JavaScript for Bootstrap 5 | Tab + ------------------------------------------ */ + + // TAB PRIVATE GC + // ================ + const tabString = 'tab'; + const tabComponent = 'Tab'; + const tabSelector = `[${dataBsToggle}="${tabString}"]`; + + // TAB CUSTOM EVENTS + // ================= + const showTabEvent = bootstrapCustomEvent(`show.bs.${tabString}`); + const shownTabEvent = bootstrapCustomEvent(`shown.bs.${tabString}`); + const hideTabEvent = bootstrapCustomEvent(`hide.bs.${tabString}`); + const hiddenTabEvent = bootstrapCustomEvent(`hidden.bs.${tabString}`); + + let nextTab; + let nextTabContent; + let nextTabHeight; + let activeTab; + let activeTabContent; + let tabContainerHeight; + let tabEqualContents; + + // TAB PRIVATE METHODS + // =================== + function triggerTabEnd(self) { + const { tabContent, nav } = self; + tabContent.style.height = ''; + removeClass(tabContent, collapsingClass); + nav.isAnimating = false; + } + + function triggerTabShow(self) { + const { tabContent, nav } = self; + + if (tabContent) { // height animation + if (tabEqualContents) { + triggerTabEnd(self); + } else { + setTimeout(() => { // enables height animation + tabContent.style.height = `${nextTabHeight}px`; // height animation + reflow(tabContent); + emulateTransitionEnd(tabContent, () => triggerTabEnd(self)); + }, 50); + } + } else { + nav.isAnimating = false; + } + shownTabEvent.relatedTarget = activeTab; + nextTab.dispatchEvent(shownTabEvent); + } + + function triggerTabHide(self) { + const { tabContent } = self; + if (tabContent) { + activeTabContent.style.float = 'left'; + nextTabContent.style.float = 'left'; + tabContainerHeight = activeTabContent.scrollHeight; + } + + // update relatedTarget and dispatch event + showTabEvent.relatedTarget = activeTab; + hiddenTabEvent.relatedTarget = nextTab; + nextTab.dispatchEvent(showTabEvent); + if (showTabEvent.defaultPrevented) return; + + addClass(nextTabContent, activeClass); + removeClass(activeTabContent, activeClass); + + if (tabContent) { + nextTabHeight = nextTabContent.scrollHeight; + tabEqualContents = nextTabHeight === tabContainerHeight; + addClass(tabContent, collapsingClass); + tabContent.style.height = `${tabContainerHeight}px`; // height animation + reflow(tabContent); + activeTabContent.style.float = ''; + nextTabContent.style.float = ''; + } + + if (hasClass(nextTabContent, fadeClass)) { + setTimeout(() => { + addClass(nextTabContent, showClass); + emulateTransitionEnd(nextTabContent, () => { + triggerTabShow(self); + }); + }, 20); + } else { triggerTabShow(self); } + + activeTab.dispatchEvent(hiddenTabEvent); + } + + function getActiveTab({ nav }) { + const activeTabs = nav.getElementsByClassName(activeClass); + + if (activeTabs.length === 1 + && !dropdownMenuClasses.some((c) => hasClass(activeTabs[0].parentNode, c))) { + [activeTab] = activeTabs; + } else if (activeTabs.length > 1) { + activeTab = activeTabs[activeTabs.length - 1]; + } + return activeTab; + } + + function getActiveTabContent(self) { + return queryElement(getActiveTab(self).getAttribute('href')); + } + + function toggleTabHandler(self, add) { + const action = add ? addEventListener : removeEventListener; + self.element[action]('click', tabClickHandler); + } + + // TAB EVENT HANDLER + // ================= + function tabClickHandler(e) { + const self = this[tabComponent]; + e.preventDefault(); + if (!self.nav.isAnimating) self.show(); + } + + // TAB DEFINITION + // ============== + class Tab extends BaseComponent { + constructor(target) { + super(tabComponent, target); + // bind + const self = this; + + // initialization element + const { element } = self; + + // event targets + self.nav = element.closest('.nav'); + const { nav } = self; + self.dropdown = nav && queryElement(`.${dropdownMenuClasses[0]}-toggle`, nav); + activeTabContent = getActiveTabContent(self); + self.tabContent = supportTransition && activeTabContent.closest('.tab-content'); + tabContainerHeight = activeTabContent.scrollHeight; + + // set default animation state + nav.isAnimating = false; + + // add event listener + toggleTabHandler(self, 1); + } + + // TAB PUBLIC METHODS + // ================== + show() { // the tab we clicked is now the nextTab tab + const self = this; + const { element, nav, dropdown } = self; + nextTab = element; + if (!hasClass(nextTab, activeClass)) { + // this is the actual object, the nextTab tab content to activate + nextTabContent = queryElement(nextTab.getAttribute('href')); + activeTab = getActiveTab({ nav }); + activeTabContent = getActiveTabContent({ nav }); + + // update relatedTarget and dispatch + hideTabEvent.relatedTarget = nextTab; + activeTab.dispatchEvent(hideTabEvent); + if (hideTabEvent.defaultPrevented) return; + + nav.isAnimating = true; + removeClass(activeTab, activeClass); + activeTab.setAttribute(ariaSelected, 'false'); + addClass(nextTab, activeClass); + nextTab.setAttribute(ariaSelected, 'true'); + + if (dropdown) { + if (!hasClass(element.parentNode, dropdownMenuClass)) { + if (hasClass(dropdown, activeClass)) removeClass(dropdown, activeClass); + } else if (!hasClass(dropdown, activeClass)) addClass(dropdown, activeClass); + } + + if (hasClass(activeTabContent, fadeClass)) { + removeClass(activeTabContent, showClass); + emulateTransitionEnd(activeTabContent, () => triggerTabHide(self)); + } else { + triggerTabHide(self); + } + } + } + + dispose() { + toggleTabHandler(this); + super.dispose(tabComponent); + } + } + + Tab.init = { + component: tabComponent, + selector: tabSelector, + constructor: Tab, + }; + + /* Native JavaScript for Bootstrap 5 | Toast + -------------------------------------------- */ + + // TOAST PRIVATE GC + // ================ + const toastString = 'toast'; + const toastComponent = 'Toast'; + const toastSelector = `.${toastString}`; + const toastDismissSelector = `[${dataBsDismiss}="${toastString}"]`; + const showingClass = 'showing'; + const hideClass = 'hide'; + const toastDefaultOptions = { + animation: true, + autohide: true, + delay: 500, + }; + + // TOAST CUSTOM EVENTS + // =================== + const showToastEvent = bootstrapCustomEvent(`show.bs.${toastString}`); + const hideToastEvent = bootstrapCustomEvent(`hide.bs.${toastString}`); + const shownToastEvent = bootstrapCustomEvent(`shown.bs.${toastString}`); + const hiddenToastEvent = bootstrapCustomEvent(`hidden.bs.${toastString}`); + + // TOAST PRIVATE METHODS + // ===================== + function showToastComplete(self) { + const { element, options } = self; + if (!options.animation) { + removeClass(element, showingClass); + addClass(element, showClass); + } + + element.dispatchEvent(shownToastEvent); + if (options.autohide) self.hide(); + } + + function hideToastComplete(self) { + const { element } = self; + addClass(element, hideClass); + element.dispatchEvent(hiddenToastEvent); + } + + function closeToast(self) { + const { element, options } = self; + removeClass(element, showClass); + + if (options.animation) { + reflow(element); + emulateTransitionEnd(element, () => hideToastComplete(self)); + } else { + hideToastComplete(self); + } + } + + function openToast(self) { + const { element, options } = self; + removeClass(element, hideClass); + + if (options.animation) { + reflow(element); + addClass(element, showingClass); + addClass(element, showClass); + + emulateTransitionEnd(element, () => showToastComplete(self)); + } else { + showToastComplete(self); + } + } + + function toggleToastHandler(self, add) { + const action = add ? addEventListener : removeEventListener; + if (self.dismiss) { + self.dismiss[action]('click', self.hide); + } + } + + // TOAST EVENT HANDLERS + // ==================== + function completeDisposeToast(self) { + clearTimeout(self.timer); + toggleToastHandler(self); + } + + // TOAST DEFINITION + // ================ + class Toast extends BaseComponent { + constructor(target, config) { + super(toastComponent, target, toastDefaultOptions, config); + // bind + const self = this; + + // dismiss button + self.dismiss = queryElement(toastDismissSelector, self.element); + + // bind + self.show = self.show.bind(self); + self.hide = self.hide.bind(self); + + // add event listener + toggleToastHandler(self, 1); + } + + // TOAST PUBLIC METHODS + // ==================== + show() { + const self = this; + const { element } = self; + if (element && hasClass(element, hideClass)) { + element.dispatchEvent(showToastEvent); + if (showToastEvent.defaultPrevented) return; + + addClass(element, fadeClass); + clearTimeout(self.timer); + self.timer = setTimeout(() => openToast(self), 10); + } + } + + hide(noTimer) { + const self = this; + const { element, options } = self; + + if (element && hasClass(element, showClass)) { + element.dispatchEvent(hideToastEvent); + if (hideToastEvent.defaultPrevented) return; + + clearTimeout(self.timer); + self.timer = setTimeout(() => closeToast(self), // Bugfix by BlackDex to get autohide with a delay working. + noTimer ? 10 : options.delay, + ); + } + } + + dispose() { + const self = this; + const { element, options } = self; + self.hide(); + + if (options.animation) emulateTransitionEnd(element, () => completeDisposeToast(self)); + else completeDisposeToast(self); + + super.dispose(toastComponent); + } + } + + Toast.init = { + component: toastComponent, + selector: toastSelector, + constructor: Toast, + }; + + const dataOriginalTitle = 'data-original-title'; + + /* Native JavaScript for Bootstrap 5 | Tooltip + ---------------------------------------------- */ + + // TOOLTIP PRIVATE GC + // ================== + const tooltipString = 'tooltip'; + const tooltipComponent = 'Tooltip'; + const tooltipSelector = `[${dataBsToggle}="${tooltipString}"],[data-tip="${tooltipString}"]`; + + const titleAttr = 'title'; + const tooltipInnerClass = `${tooltipString}-inner`; + const tooltipDefaultOptions = { + title: null, + template: '', + placement: 'top', + animation: true, + customClass: null, + delay: 200, + sanitizeFn: null, + }; + + // TOOLTIP CUSTOM EVENTS + // ===================== + const showTooltipEvent = bootstrapCustomEvent(`show.bs.${tooltipString}`); + const shownTooltipEvent = bootstrapCustomEvent(`shown.bs.${tooltipString}`); + const hideTooltipEvent = bootstrapCustomEvent(`hide.bs.${tooltipString}`); + const hiddenTooltipEvent = bootstrapCustomEvent(`hidden.bs.${tooltipString}`); + + // TOOLTIP PRIVATE METHODS + // ======================= + function createTooltip(self) { + const { options, id } = self; + const placementClass = `bs-${tooltipString}-${tipClassPositions[options.placement]}`; + let titleString = options.title.trim(); + + // sanitize stuff + if (options.sanitizeFn) { + titleString = options.sanitizeFn(titleString); + options.template = options.sanitizeFn(options.template); + } + + if (!titleString) return; + + // create tooltip + self.tooltip = document.createElement('div'); + const { tooltip } = self; + + // set aria + tooltip.setAttribute('id', id); + + // set markup + const tooltipMarkup = document.createElement('div'); + tooltipMarkup.innerHTML = options.template.trim(); + + tooltip.className = tooltipMarkup.firstChild.className; + tooltip.innerHTML = tooltipMarkup.firstChild.innerHTML; + + queryElement(`.${tooltipInnerClass}`, tooltip).innerHTML = titleString; + + // set arrow + self.arrow = queryElement(`.${tooltipString}-arrow`, tooltip); + + // set class and role attribute + tooltip.setAttribute('role', tooltipString); + // set classes + if (!hasClass(tooltip, tooltipString)) addClass(tooltip, tooltipString); + if (options.animation && !hasClass(tooltip, fadeClass)) addClass(tooltip, fadeClass); + if (options.customClass && !hasClass(tooltip, options.customClass)) { + addClass(tooltip, options.customClass); + } + if (!hasClass(tooltip, placementClass)) addClass(tooltip, placementClass); + } + + function removeTooltip(self) { + const { element, options, tooltip } = self; + element.removeAttribute(ariaDescribedBy); + options.container.removeChild(tooltip); + self.timer = null; + } + + function disposeTooltipComplete(self) { + const { element } = self; + toggleTooltipHandlers(self); + if (element.hasAttribute(dataOriginalTitle)) toggleTooltipTitle(self); + } + function toggleTooltipAction(self, add) { + const action = add ? addEventListener : removeEventListener; + + document[action]('touchstart', tooltipTouchHandler, passiveHandler); + + if (!isMedia(self.element)) { + window[action]('scroll', self.update, passiveHandler); + window[action]('resize', self.update, passiveHandler); + } + } + function tooltipShownAction(self) { + toggleTooltipAction(self, 1); + self.element.dispatchEvent(shownTooltipEvent); + } + function tooltipHiddenAction(self) { + toggleTooltipAction(self); + removeTooltip(self); + self.element.dispatchEvent(hiddenTooltipEvent); + } + function toggleTooltipHandlers(self, add) { + const action = add ? addEventListener : removeEventListener; + const { element } = self; + + if (isMedia(element)) element[action]('mousemove', self.update, passiveHandler); + element[action]('mousedown', self.show); + element[action]('mouseenter', self.show); + element[action]('mouseleave', self.hide); + } + + function toggleTooltipTitle(self, content) { + // [0 - add, 1 - remove] | [0 - remove, 1 - add] + const titleAtt = [dataOriginalTitle, titleAttr]; + const { element } = self; + + element.setAttribute(titleAtt[content ? 0 : 1], + (content || element.getAttribute(titleAtt[0]))); + element.removeAttribute(titleAtt[content ? 1 : 0]); + } + + // TOOLTIP EVENT HANDLERS + // ====================== + function tooltipTouchHandler({ target }) { + const { tooltip, element } = this; + if (tooltip.contains(target) || target === element || element.contains(target)) ; else { + this.hide(); + } + } + + // TOOLTIP DEFINITION + // ================== + class Tooltip extends BaseComponent { + constructor(target, config) { + // initialization element + const element = queryElement(target); + tooltipDefaultOptions.title = element.getAttribute(titleAttr); + tooltipDefaultOptions.container = getTipContainer(element); + super(tooltipComponent, element, tooltipDefaultOptions, config); + + // bind + const self = this; + + // additional properties + self.tooltip = null; + self.arrow = null; + self.timer = null; + self.enabled = false; + + // instance options + const { options } = self; + + // media elements only work with body as a container + self.options.container = isMedia(element) + ? tooltipDefaultOptions.container + : queryElement(options.container); + + // reset default options + tooltipDefaultOptions.container = null; + tooltipDefaultOptions[titleAttr] = null; + + // invalidate + if (!options.title) return; + + // all functions bind + tooltipTouchHandler.bind(self); + self.update = self.update.bind(self); + + // set title attributes and add event listeners + if (element.hasAttribute(titleAttr)) toggleTooltipTitle(self, options.title); + + // create tooltip here + self.id = `${tooltipString}-${getUID(element)}`; + createTooltip(self); + + // attach events + toggleTooltipHandlers(self, 1); + } + + // TOOLTIP PUBLIC METHODS + // ====================== + show(e) { + const self = e ? this[tooltipComponent] : this; + const { + options, tooltip, element, id, + } = self; + clearTimeout(self.timer); + self.timer = setTimeout(() => { + if (!isVisibleTip(tooltip, options.container)) { + element.dispatchEvent(showTooltipEvent); + if (showTooltipEvent.defaultPrevented) return; + + // append to container + options.container.appendChild(tooltip); + element.setAttribute(ariaDescribedBy, id); + + self.update(e); + if (!hasClass(tooltip, showClass)) addClass(tooltip, showClass); + if (options.animation) emulateTransitionEnd(tooltip, () => tooltipShownAction(self)); + else tooltipShownAction(self); + } + }, 20); + } + + hide(e) { + const self = e ? this[tooltipComponent] : this; + const { options, tooltip, element } = self; + + clearTimeout(self.timer); + self.timer = setTimeout(() => { + if (isVisibleTip(tooltip, options.container)) { + element.dispatchEvent(hideTooltipEvent); + if (hideTooltipEvent.defaultPrevented) return; + + removeClass(tooltip, showClass); + if (options.animation) emulateTransitionEnd(tooltip, () => tooltipHiddenAction(self)); + else tooltipHiddenAction(self); + } + }, options.delay); + } + + update(e) { + styleTip(this, e); + } + + toggle() { + const self = this; + const { tooltip, options } = self; + if (!isVisibleTip(tooltip, options.container)) self.show(); + else self.hide(); + } + + enable() { + const self = this; + const { enabled } = self; + if (!enabled) { + toggleTooltipHandlers(self, 1); + self.enabled = !enabled; + } + } + + disable() { + const self = this; + const { tooltip, options, enabled } = self; + if (enabled) { + if (!isVisibleTip(tooltip, options.container) && options.animation) { + self.hide(); + + setTimeout( + () => toggleTooltipHandlers(self), + getElementTransitionDuration(tooltip) + options.delay + 17, + ); + } else { + toggleTooltipHandlers(self); + } + self.enabled = !enabled; + } + } + + toggleEnabled() { + const self = this; + if (!self.enabled) self.enable(); + else self.disable(); + } + + dispose() { + const self = this; + const { tooltip, options } = self; + + if (options.animation && isVisibleTip(tooltip, options.container)) { + options.delay = 0; // reset delay + self.hide(); + emulateTransitionEnd(tooltip, () => disposeTooltipComplete(self)); + } else { + disposeTooltipComplete(self); + } + super.dispose(tooltipComponent); + } + } + + Tooltip.init = { + component: tooltipComponent, + selector: tooltipSelector, + constructor: Tooltip, + }; + + var version = "4.0.2"; + + // import { alertInit } from '../components/alert-native.js'; + // import { buttonInit } from '../components/button-native.js'; + // import { carouselInit } from '../components/carousel-native.js'; + // import { collapseInit } from '../components/collapse-native.js'; + // import { dropdownInit } from '../components/dropdown-native.js'; + // import { modalInit } from '../components/modal-native.js'; + // import { offcanvasInit } from '../components/offcanvas-native.js'; + // import { popoverInit } from '../components/popover-native.js'; + // import { scrollSpyInit } from '../components/scrollspy-native.js'; + // import { tabInit } from '../components/tab-native.js'; + // import { toastInit } from '../components/toast-native.js'; + // import { tooltipInit } from '../components/tooltip-native.js'; + + const componentsInit = { + Alert: Alert.init, + Button: Button.init, + Carousel: Carousel.init, + Collapse: Collapse.init, + Dropdown: Dropdown.init, + Modal: Modal.init, + Offcanvas: Offcanvas.init, + Popover: Popover.init, + ScrollSpy: ScrollSpy.init, + Tab: Tab.init, + Toast: Toast.init, + Tooltip: Tooltip.init, + }; + + function initializeDataAPI(Konstructor, collection) { + Array.from(collection).forEach((x) => new Konstructor(x)); + } + + function initCallback(context) { + const lookUp = context instanceof Element ? context : document; + + Object.keys(componentsInit).forEach((comp) => { + const { constructor, selector } = componentsInit[comp]; + initializeDataAPI(constructor, lookUp.querySelectorAll(selector)); + }); + } + + // bulk initialize all components + if (document.body) initCallback(); + else { + document.addEventListener('DOMContentLoaded', () => initCallback(), { once: true }); + } var index = { - Alert: Alert, - Button: Button, - Carousel: Carousel, - Collapse: Collapse, - Dropdown: Dropdown, - Modal: Modal, - Popover: Popover, - ScrollSpy: ScrollSpy, - Tab: Tab, - Toast: Toast, - Tooltip: Tooltip, - initCallback: initCallback, - removeDataAPI: removeDataAPI, - componentsInit: componentsInit, - Version: version + Alert, + Button, + Carousel, + Collapse, + Dropdown, + Modal, + Offcanvas, + Popover, + ScrollSpy, + Tab, + Toast, + Tooltip, + + initCallback, + Version: version, }; return index; diff --git a/src/static/scripts/bootstrap.css b/src/static/scripts/bootstrap.css index a3171bef..386e8b06 100644 --- a/src/static/scripts/bootstrap.css +++ b/src/static/scripts/bootstrap.css @@ -1,38 +1,35 @@ +@charset "UTF-8"; /*! - * Bootstrap v4.5.3 (https://getbootstrap.com/) - * Copyright 2011-2020 The Bootstrap Authors - * Copyright 2011-2020 Twitter, Inc. + * Bootstrap v5.0.1 (https://getbootstrap.com/) + * Copyright 2011-2021 The Bootstrap Authors + * Copyright 2011-2021 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ :root { - --blue: #007bff; - --indigo: #6610f2; - --purple: #6f42c1; - --pink: #e83e8c; - --red: #dc3545; - --orange: #fd7e14; - --yellow: #ffc107; - --green: #28a745; - --teal: #20c997; - --cyan: #17a2b8; - --white: #fff; - --gray: #6c757d; - --gray-dark: #343a40; - --primary: #007bff; - --secondary: #6c757d; - --success: #28a745; - --info: #17a2b8; - --warning: #ffc107; - --danger: #dc3545; - --light: #f8f9fa; - --dark: #343a40; - --breakpoint-xs: 0; - --breakpoint-sm: 576px; - --breakpoint-md: 768px; - --breakpoint-lg: 992px; - --breakpoint-xl: 1200px; - --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --bs-blue: #0d6efd; + --bs-indigo: #6610f2; + --bs-purple: #6f42c1; + --bs-pink: #d63384; + --bs-red: #dc3545; + --bs-orange: #fd7e14; + --bs-yellow: #ffc107; + --bs-green: #198754; + --bs-teal: #20c997; + --bs-cyan: #0dcaf0; + --bs-white: #fff; + --bs-gray: #6c757d; + --bs-gray-dark: #343a40; + --bs-primary: #0d6efd; + --bs-secondary: #6c757d; + --bs-success: #198754; + --bs-info: #0dcaf0; + --bs-warning: #ffc107; + --bs-danger: #dc3545; + --bs-light: #f8f9fa; + --bs-dark: #212529; + --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); } *, @@ -41,41 +38,85 @@ box-sizing: border-box; } -html { - font-family: sans-serif; - line-height: 1.15; - -webkit-text-size-adjust: 100%; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - -article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { - display: block; +@media (prefers-reduced-motion: no-preference) { + :root { + scroll-behavior: smooth; + } } body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: var(--bs-font-sans-serif); font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; - text-align: left; background-color: #fff; -} - -[tabindex="-1"]:focus:not(:focus-visible) { - outline: 0 !important; + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } hr { - box-sizing: content-box; - height: 0; - overflow: visible; + margin: 1rem 0; + color: inherit; + background-color: currentColor; + border: 0; + opacity: 0.25; } -h1, h2, h3, h4, h5, h6 { +hr:not([size]) { + height: 1px; +} + +h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 { margin-top: 0; margin-bottom: 0.5rem; + font-weight: 500; + line-height: 1.2; +} + +h1, .h1 { + font-size: calc(1.375rem + 1.5vw); +} +@media (min-width: 1200px) { + h1, .h1 { + font-size: 2.5rem; + } +} + +h2, .h2 { + font-size: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + h2, .h2 { + font-size: 2rem; + } +} + +h3, .h3 { + font-size: calc(1.3rem + 0.6vw); +} +@media (min-width: 1200px) { + h3, .h3 { + font-size: 1.75rem; + } +} + +h4, .h4 { + font-size: calc(1.275rem + 0.3vw); +} +@media (min-width: 1200px) { + h4, .h4 { + font-size: 1.5rem; + } +} + +h5, .h5 { + font-size: 1.25rem; +} + +h6, .h6 { + font-size: 1rem; } p { @@ -84,12 +125,10 @@ p { } abbr[title], -abbr[data-original-title] { - text-decoration: underline; +abbr[data-bs-original-title] { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; cursor: help; - border-bottom: 0; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; } @@ -100,6 +139,11 @@ address { line-height: inherit; } +ol, +ul { + padding-left: 2rem; +} + ol, ul, dl { @@ -119,7 +163,7 @@ dt { } dd { - margin-bottom: .5rem; + margin-bottom: 0.5rem; margin-left: 0; } @@ -132,43 +176,40 @@ strong { font-weight: bolder; } -small { - font-size: 80%; +small, .small { + font-size: 0.875em; +} + +mark, .mark { + padding: 0.2em; + background-color: #fcf8e3; } sub, sup { position: relative; - font-size: 75%; + font-size: 0.75em; line-height: 0; vertical-align: baseline; } sub { - bottom: -.25em; + bottom: -0.25em; } sup { - top: -.5em; + top: -0.5em; } a { - color: #007bff; - text-decoration: none; - background-color: transparent; -} - -a:hover { - color: #0056b3; + color: #0d6efd; text-decoration: underline; } - -a:not([href]):not([class]) { - color: inherit; - text-decoration: none; +a:hover { + color: #0a58ca; } -a:not([href]):not([class]):hover { +a:not([href]):not([class]), a:not([href]):not([class]):hover { color: inherit; text-decoration: none; } @@ -177,41 +218,66 @@ pre, code, kbd, samp { - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: var(--bs-font-monospace); font-size: 1em; + direction: ltr /* rtl:ignore */; + unicode-bidi: bidi-override; } pre { + display: block; margin-top: 0; margin-bottom: 1rem; overflow: auto; - -ms-overflow-style: scrollbar; + font-size: 0.875em; +} +pre code { + font-size: inherit; + color: inherit; + word-break: normal; +} + +code { + font-size: 0.875em; + color: #d63384; + word-wrap: break-word; +} +a > code { + color: inherit; +} + +kbd { + padding: 0.2rem 0.4rem; + font-size: 0.875em; + color: #fff; + background-color: #212529; + border-radius: 0.2rem; +} +kbd kbd { + padding: 0; + font-size: 1em; + font-weight: 700; } figure { margin: 0 0 1rem; } -img { - vertical-align: middle; - border-style: none; -} - +img, svg { - overflow: hidden; vertical-align: middle; } table { + caption-side: bottom; border-collapse: collapse; } caption { - padding-top: 0.75rem; - padding-bottom: 0.75rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; color: #6c757d; text-align: left; - caption-side: bottom; } th { @@ -219,18 +285,27 @@ th { text-align: -webkit-match-parent; } +thead, +tbody, +tfoot, +tr, +td, +th { + border-color: inherit; + border-style: solid; + border-width: 0; +} + label { display: inline-block; - margin-bottom: 0.5rem; } button { border-radius: 0; } -button:focus { - outline: 1px dotted; - outline: 5px auto -webkit-focus-ring-color; +button:focus:not(:focus-visible) { + outline: 0; } input, @@ -244,54 +319,45 @@ textarea { line-height: inherit; } -button, -input { - overflow: visible; -} - button, select { text-transform: none; } -[role="button"] { +[role=button] { cursor: pointer; } select { word-wrap: normal; } - -button, -[type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; +select:disabled { + opacity: 1; } +[list]::-webkit-calendar-picker-indicator { + display: none; +} + +button, +[type=button], +[type=reset], +[type=submit] { + -webkit-appearance: button; +} button:not(:disabled), -[type="button"]:not(:disabled), -[type="reset"]:not(:disabled), -[type="submit"]:not(:disabled) { +[type=button]:not(:disabled), +[type=reset]:not(:disabled), +[type=submit]:not(:disabled) { cursor: pointer; } -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { +::-moz-focus-inner { padding: 0; border-style: none; } -input[type="radio"], -input[type="checkbox"] { - box-sizing: border-box; - padding: 0; -} - textarea { - overflow: auto; resize: vertical; } @@ -303,33 +369,59 @@ fieldset { } legend { - display: block; + float: left; width: 100%; - max-width: 100%; padding: 0; - margin-bottom: .5rem; - font-size: 1.5rem; + margin-bottom: 0.5rem; + font-size: calc(1.275rem + 0.3vw); line-height: inherit; - color: inherit; - white-space: normal; +} +@media (min-width: 1200px) { + legend { + font-size: 1.5rem; + } +} +legend + * { + clear: left; } -progress { - vertical-align: baseline; +::-webkit-datetime-edit-fields-wrapper, +::-webkit-datetime-edit-text, +::-webkit-datetime-edit-minute, +::-webkit-datetime-edit-hour-field, +::-webkit-datetime-edit-day-field, +::-webkit-datetime-edit-month-field, +::-webkit-datetime-edit-year-field { + padding: 0; } -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { +::-webkit-inner-spin-button { height: auto; } -[type="search"] { +[type=search] { outline-offset: -2px; + -webkit-appearance: textfield; +} + +/* rtl:raw: +[type="tel"], +[type="url"], +[type="email"], +[type="number"] { + direction: ltr; +} +*/ +::-webkit-search-decoration { -webkit-appearance: none; } -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; +::-webkit-color-swatch-wrapper { + padding: 0; +} + +::file-selector-button { + font: inherit; } ::-webkit-file-upload-button { @@ -341,96 +433,92 @@ output { display: inline-block; } +iframe { + border: 0; +} + summary { display: list-item; cursor: pointer; } -template { - display: none; +progress { + vertical-align: baseline; } [hidden] { display: none !important; } -h1, h2, h3, h4, h5, h6, -.h1, .h2, .h3, .h4, .h5, .h6 { - margin-bottom: 0.5rem; - font-weight: 500; - line-height: 1.2; -} - -h1, .h1 { - font-size: 2.5rem; -} - -h2, .h2 { - font-size: 2rem; -} - -h3, .h3 { - font-size: 1.75rem; -} - -h4, .h4 { - font-size: 1.5rem; -} - -h5, .h5 { - font-size: 1.25rem; -} - -h6, .h6 { - font-size: 1rem; -} - .lead { font-size: 1.25rem; font-weight: 300; } .display-1 { - font-size: 6rem; + font-size: calc(1.625rem + 4.5vw); font-weight: 300; line-height: 1.2; } +@media (min-width: 1200px) { + .display-1 { + font-size: 5rem; + } +} .display-2 { - font-size: 5.5rem; + font-size: calc(1.575rem + 3.9vw); font-weight: 300; line-height: 1.2; } +@media (min-width: 1200px) { + .display-2 { + font-size: 4.5rem; + } +} .display-3 { - font-size: 4.5rem; + font-size: calc(1.525rem + 3.3vw); font-weight: 300; line-height: 1.2; } +@media (min-width: 1200px) { + .display-3 { + font-size: 4rem; + } +} .display-4 { - font-size: 3.5rem; + font-size: calc(1.475rem + 2.7vw); font-weight: 300; line-height: 1.2; } - -hr { - margin-top: 1rem; - margin-bottom: 1rem; - border: 0; - border-top: 1px solid rgba(0, 0, 0, 0.1); +@media (min-width: 1200px) { + .display-4 { + font-size: 3.5rem; + } } -small, -.small { - font-size: 80%; - font-weight: 400; +.display-5 { + font-size: calc(1.425rem + 2.1vw); + font-weight: 300; + line-height: 1.2; +} +@media (min-width: 1200px) { + .display-5 { + font-size: 3rem; + } } -mark, -.mark { - padding: 0.2em; - background-color: #fcf8e3; +.display-6 { + font-size: calc(1.375rem + 1.5vw); + font-weight: 300; + line-height: 1.2; +} +@media (min-width: 1200px) { + .display-6 { + font-size: 2.5rem; + } } .list-unstyled { @@ -446,13 +534,12 @@ mark, .list-inline-item { display: inline-block; } - .list-inline-item:not(:last-child) { margin-right: 0.5rem; } .initialism { - font-size: 90%; + font-size: 0.875em; text-transform: uppercase; } @@ -460,15 +547,18 @@ mark, margin-bottom: 1rem; font-size: 1.25rem; } - -.blockquote-footer { - display: block; - font-size: 80%; - color: #6c757d; +.blockquote > :last-child { + margin-bottom: 0; } +.blockquote-footer { + margin-top: -1rem; + margin-bottom: 1rem; + font-size: 0.875em; + color: #6c757d; +} .blockquote-footer::before { - content: "\2014\00A0"; + content: "— "; } .img-fluid { @@ -495,324 +585,177 @@ mark, } .figure-caption { - font-size: 90%; + font-size: 0.875em; color: #6c757d; } -code { - font-size: 87.5%; - color: #e83e8c; - word-wrap: break-word; -} - -a > code { - color: inherit; -} - -kbd { - padding: 0.2rem 0.4rem; - font-size: 87.5%; - color: #fff; - background-color: #212529; - border-radius: 0.2rem; -} - -kbd kbd { - padding: 0; - font-size: 100%; - font-weight: 700; -} - -pre { - display: block; - font-size: 87.5%; - color: #212529; -} - -pre code { - font-size: inherit; - color: inherit; - word-break: normal; -} - -.pre-scrollable { - max-height: 340px; - overflow-y: scroll; -} - .container, .container-fluid, -.container-sm, -.container-md, +.container-xxl, +.container-xl, .container-lg, -.container-xl { +.container-md, +.container-sm { width: 100%; - padding-right: 15px; - padding-left: 15px; + padding-right: var(--bs-gutter-x, 0.75rem); + padding-left: var(--bs-gutter-x, 0.75rem); margin-right: auto; margin-left: auto; } @media (min-width: 576px) { - .container, .container-sm { + .container-sm, .container { max-width: 540px; } } - @media (min-width: 768px) { - .container, .container-sm, .container-md { + .container-md, .container-sm, .container { max-width: 720px; } } - @media (min-width: 992px) { - .container, .container-sm, .container-md, .container-lg { + .container-lg, .container-md, .container-sm, .container { max-width: 960px; } } - @media (min-width: 1200px) { - .container, .container-sm, .container-md, .container-lg, .container-xl { + .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1140px; } } - +@media (min-width: 1400px) { + .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container { + max-width: 1320px; + } +} .row { - display: -ms-flexbox; + --bs-gutter-x: 1.5rem; + --bs-gutter-y: 0; display: flex; - -ms-flex-wrap: wrap; flex-wrap: wrap; - margin-right: -15px; - margin-left: -15px; + margin-top: calc(var(--bs-gutter-y) * -1); + margin-right: calc(var(--bs-gutter-x) / -2); + margin-left: calc(var(--bs-gutter-x) / -2); } - -.no-gutters { - margin-right: 0; - margin-left: 0; -} - -.no-gutters > .col, -.no-gutters > [class*="col-"] { - padding-right: 0; - padding-left: 0; -} - -.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, -.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, -.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, -.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, -.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, -.col-xl-auto { - position: relative; +.row > * { + flex-shrink: 0; width: 100%; - padding-right: 15px; - padding-left: 15px; + max-width: 100%; + padding-right: calc(var(--bs-gutter-x) / 2); + padding-left: calc(var(--bs-gutter-x) / 2); + margin-top: var(--bs-gutter-y); } .col { - -ms-flex-preferred-size: 0; - flex-basis: 0; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; + flex: 1 0 0%; +} + +.row-cols-auto > * { + flex: 0 0 auto; + width: auto; } .row-cols-1 > * { - -ms-flex: 0 0 100%; - flex: 0 0 100%; - max-width: 100%; + flex: 0 0 auto; + width: 100%; } .row-cols-2 > * { - -ms-flex: 0 0 50%; - flex: 0 0 50%; - max-width: 50%; + flex: 0 0 auto; + width: 50%; } .row-cols-3 > * { - -ms-flex: 0 0 33.333333%; - flex: 0 0 33.333333%; - max-width: 33.333333%; + flex: 0 0 auto; + width: 33.3333333333%; } .row-cols-4 > * { - -ms-flex: 0 0 25%; - flex: 0 0 25%; - max-width: 25%; + flex: 0 0 auto; + width: 25%; } .row-cols-5 > * { - -ms-flex: 0 0 20%; - flex: 0 0 20%; - max-width: 20%; + flex: 0 0 auto; + width: 20%; } .row-cols-6 > * { - -ms-flex: 0 0 16.666667%; - flex: 0 0 16.666667%; - max-width: 16.666667%; + flex: 0 0 auto; + width: 16.6666666667%; } .col-auto { - -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; - max-width: 100%; } .col-1 { - -ms-flex: 0 0 8.333333%; - flex: 0 0 8.333333%; - max-width: 8.333333%; + flex: 0 0 auto; + width: 8.3333333333%; } .col-2 { - -ms-flex: 0 0 16.666667%; - flex: 0 0 16.666667%; - max-width: 16.666667%; + flex: 0 0 auto; + width: 16.6666666667%; } .col-3 { - -ms-flex: 0 0 25%; - flex: 0 0 25%; - max-width: 25%; + flex: 0 0 auto; + width: 25%; } .col-4 { - -ms-flex: 0 0 33.333333%; - flex: 0 0 33.333333%; - max-width: 33.333333%; + flex: 0 0 auto; + width: 33.3333333333%; } .col-5 { - -ms-flex: 0 0 41.666667%; - flex: 0 0 41.666667%; - max-width: 41.666667%; + flex: 0 0 auto; + width: 41.6666666667%; } .col-6 { - -ms-flex: 0 0 50%; - flex: 0 0 50%; - max-width: 50%; + flex: 0 0 auto; + width: 50%; } .col-7 { - -ms-flex: 0 0 58.333333%; - flex: 0 0 58.333333%; - max-width: 58.333333%; + flex: 0 0 auto; + width: 58.3333333333%; } .col-8 { - -ms-flex: 0 0 66.666667%; - flex: 0 0 66.666667%; - max-width: 66.666667%; + flex: 0 0 auto; + width: 66.6666666667%; } .col-9 { - -ms-flex: 0 0 75%; - flex: 0 0 75%; - max-width: 75%; + flex: 0 0 auto; + width: 75%; } .col-10 { - -ms-flex: 0 0 83.333333%; - flex: 0 0 83.333333%; - max-width: 83.333333%; + flex: 0 0 auto; + width: 83.3333333333%; } .col-11 { - -ms-flex: 0 0 91.666667%; - flex: 0 0 91.666667%; - max-width: 91.666667%; + flex: 0 0 auto; + width: 91.6666666667%; } .col-12 { - -ms-flex: 0 0 100%; - flex: 0 0 100%; - max-width: 100%; -} - -.order-first { - -ms-flex-order: -1; - order: -1; -} - -.order-last { - -ms-flex-order: 13; - order: 13; -} - -.order-0 { - -ms-flex-order: 0; - order: 0; -} - -.order-1 { - -ms-flex-order: 1; - order: 1; -} - -.order-2 { - -ms-flex-order: 2; - order: 2; -} - -.order-3 { - -ms-flex-order: 3; - order: 3; -} - -.order-4 { - -ms-flex-order: 4; - order: 4; -} - -.order-5 { - -ms-flex-order: 5; - order: 5; -} - -.order-6 { - -ms-flex-order: 6; - order: 6; -} - -.order-7 { - -ms-flex-order: 7; - order: 7; -} - -.order-8 { - -ms-flex-order: 8; - order: 8; -} - -.order-9 { - -ms-flex-order: 9; - order: 9; -} - -.order-10 { - -ms-flex-order: 10; - order: 10; -} - -.order-11 { - -ms-flex-order: 11; - order: 11; -} - -.order-12 { - -ms-flex-order: 12; - order: 12; + flex: 0 0 auto; + width: 100%; } .offset-1 { - margin-left: 8.333333%; + margin-left: 8.3333333333%; } .offset-2 { - margin-left: 16.666667%; + margin-left: 16.6666666667%; } .offset-3 { @@ -820,11 +763,11 @@ pre code { } .offset-4 { - margin-left: 33.333333%; + margin-left: 33.3333333333%; } .offset-5 { - margin-left: 41.666667%; + margin-left: 41.6666666667%; } .offset-6 { @@ -832,11 +775,11 @@ pre code { } .offset-7 { - margin-left: 58.333333%; + margin-left: 58.3333333333%; } .offset-8 { - margin-left: 66.666667%; + margin-left: 66.6666666667%; } .offset-9 { @@ -844,1252 +787,1336 @@ pre code { } .offset-10 { - margin-left: 83.333333%; + margin-left: 83.3333333333%; } .offset-11 { - margin-left: 91.666667%; + margin-left: 91.6666666667%; +} + +.g-0, +.gx-0 { + --bs-gutter-x: 0; +} + +.g-0, +.gy-0 { + --bs-gutter-y: 0; +} + +.g-1, +.gx-1 { + --bs-gutter-x: 0.25rem; +} + +.g-1, +.gy-1 { + --bs-gutter-y: 0.25rem; +} + +.g-2, +.gx-2 { + --bs-gutter-x: 0.5rem; +} + +.g-2, +.gy-2 { + --bs-gutter-y: 0.5rem; +} + +.g-3, +.gx-3 { + --bs-gutter-x: 1rem; +} + +.g-3, +.gy-3 { + --bs-gutter-y: 1rem; +} + +.g-4, +.gx-4 { + --bs-gutter-x: 1.5rem; +} + +.g-4, +.gy-4 { + --bs-gutter-y: 1.5rem; +} + +.g-5, +.gx-5 { + --bs-gutter-x: 3rem; +} + +.g-5, +.gy-5 { + --bs-gutter-y: 3rem; } @media (min-width: 576px) { .col-sm { - -ms-flex-preferred-size: 0; - flex-basis: 0; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; + flex: 1 0 0%; } - .row-cols-sm-1 > * { - -ms-flex: 0 0 100%; - flex: 0 0 100%; - max-width: 100%; - } - .row-cols-sm-2 > * { - -ms-flex: 0 0 50%; - flex: 0 0 50%; - max-width: 50%; - } - .row-cols-sm-3 > * { - -ms-flex: 0 0 33.333333%; - flex: 0 0 33.333333%; - max-width: 33.333333%; - } - .row-cols-sm-4 > * { - -ms-flex: 0 0 25%; - flex: 0 0 25%; - max-width: 25%; - } - .row-cols-sm-5 > * { - -ms-flex: 0 0 20%; - flex: 0 0 20%; - max-width: 20%; - } - .row-cols-sm-6 > * { - -ms-flex: 0 0 16.666667%; - flex: 0 0 16.666667%; - max-width: 16.666667%; - } - .col-sm-auto { - -ms-flex: 0 0 auto; + + .row-cols-sm-auto > * { flex: 0 0 auto; width: auto; - max-width: 100%; } + + .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 { - -ms-flex: 0 0 8.333333%; - flex: 0 0 8.333333%; - max-width: 8.333333%; + flex: 0 0 auto; + width: 8.3333333333%; } + .col-sm-2 { - -ms-flex: 0 0 16.666667%; - flex: 0 0 16.666667%; - max-width: 16.666667%; + flex: 0 0 auto; + width: 16.6666666667%; } + .col-sm-3 { - -ms-flex: 0 0 25%; - flex: 0 0 25%; - max-width: 25%; + flex: 0 0 auto; + width: 25%; } + .col-sm-4 { - -ms-flex: 0 0 33.333333%; - flex: 0 0 33.333333%; - max-width: 33.333333%; + flex: 0 0 auto; + width: 33.3333333333%; } + .col-sm-5 { - -ms-flex: 0 0 41.666667%; - flex: 0 0 41.666667%; - max-width: 41.666667%; + flex: 0 0 auto; + width: 41.6666666667%; } + .col-sm-6 { - -ms-flex: 0 0 50%; - flex: 0 0 50%; - max-width: 50%; + flex: 0 0 auto; + width: 50%; } + .col-sm-7 { - -ms-flex: 0 0 58.333333%; - flex: 0 0 58.333333%; - max-width: 58.333333%; + flex: 0 0 auto; + width: 58.3333333333%; } + .col-sm-8 { - -ms-flex: 0 0 66.666667%; - flex: 0 0 66.666667%; - max-width: 66.666667%; + flex: 0 0 auto; + width: 66.6666666667%; } + .col-sm-9 { - -ms-flex: 0 0 75%; - flex: 0 0 75%; - max-width: 75%; + flex: 0 0 auto; + width: 75%; } + .col-sm-10 { - -ms-flex: 0 0 83.333333%; - flex: 0 0 83.333333%; - max-width: 83.333333%; + flex: 0 0 auto; + width: 83.3333333333%; } + .col-sm-11 { - -ms-flex: 0 0 91.666667%; - flex: 0 0 91.666667%; - max-width: 91.666667%; + flex: 0 0 auto; + width: 91.6666666667%; } + .col-sm-12 { - -ms-flex: 0 0 100%; - flex: 0 0 100%; - max-width: 100%; - } - .order-sm-first { - -ms-flex-order: -1; - order: -1; - } - .order-sm-last { - -ms-flex-order: 13; - order: 13; - } - .order-sm-0 { - -ms-flex-order: 0; - order: 0; - } - .order-sm-1 { - -ms-flex-order: 1; - order: 1; - } - .order-sm-2 { - -ms-flex-order: 2; - order: 2; - } - .order-sm-3 { - -ms-flex-order: 3; - order: 3; - } - .order-sm-4 { - -ms-flex-order: 4; - order: 4; - } - .order-sm-5 { - -ms-flex-order: 5; - order: 5; - } - .order-sm-6 { - -ms-flex-order: 6; - order: 6; - } - .order-sm-7 { - -ms-flex-order: 7; - order: 7; - } - .order-sm-8 { - -ms-flex-order: 8; - order: 8; - } - .order-sm-9 { - -ms-flex-order: 9; - order: 9; - } - .order-sm-10 { - -ms-flex-order: 10; - order: 10; - } - .order-sm-11 { - -ms-flex-order: 11; - order: 11; - } - .order-sm-12 { - -ms-flex-order: 12; - order: 12; + flex: 0 0 auto; + width: 100%; } + .offset-sm-0 { margin-left: 0; } + .offset-sm-1 { - margin-left: 8.333333%; + margin-left: 8.3333333333%; } + .offset-sm-2 { - margin-left: 16.666667%; + margin-left: 16.6666666667%; } + .offset-sm-3 { margin-left: 25%; } + .offset-sm-4 { - margin-left: 33.333333%; + margin-left: 33.3333333333%; } + .offset-sm-5 { - margin-left: 41.666667%; + margin-left: 41.6666666667%; } + .offset-sm-6 { margin-left: 50%; } + .offset-sm-7 { - margin-left: 58.333333%; + margin-left: 58.3333333333%; } + .offset-sm-8 { - margin-left: 66.666667%; + margin-left: 66.6666666667%; } + .offset-sm-9 { margin-left: 75%; } + .offset-sm-10 { - margin-left: 83.333333%; + margin-left: 83.3333333333%; } + .offset-sm-11 { - margin-left: 91.666667%; + margin-left: 91.6666666667%; + } + + .g-sm-0, +.gx-sm-0 { + --bs-gutter-x: 0; + } + + .g-sm-0, +.gy-sm-0 { + --bs-gutter-y: 0; + } + + .g-sm-1, +.gx-sm-1 { + --bs-gutter-x: 0.25rem; + } + + .g-sm-1, +.gy-sm-1 { + --bs-gutter-y: 0.25rem; + } + + .g-sm-2, +.gx-sm-2 { + --bs-gutter-x: 0.5rem; + } + + .g-sm-2, +.gy-sm-2 { + --bs-gutter-y: 0.5rem; + } + + .g-sm-3, +.gx-sm-3 { + --bs-gutter-x: 1rem; + } + + .g-sm-3, +.gy-sm-3 { + --bs-gutter-y: 1rem; + } + + .g-sm-4, +.gx-sm-4 { + --bs-gutter-x: 1.5rem; + } + + .g-sm-4, +.gy-sm-4 { + --bs-gutter-y: 1.5rem; + } + + .g-sm-5, +.gx-sm-5 { + --bs-gutter-x: 3rem; + } + + .g-sm-5, +.gy-sm-5 { + --bs-gutter-y: 3rem; } } - @media (min-width: 768px) { .col-md { - -ms-flex-preferred-size: 0; - flex-basis: 0; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; + flex: 1 0 0%; } - .row-cols-md-1 > * { - -ms-flex: 0 0 100%; - flex: 0 0 100%; - max-width: 100%; - } - .row-cols-md-2 > * { - -ms-flex: 0 0 50%; - flex: 0 0 50%; - max-width: 50%; - } - .row-cols-md-3 > * { - -ms-flex: 0 0 33.333333%; - flex: 0 0 33.333333%; - max-width: 33.333333%; - } - .row-cols-md-4 > * { - -ms-flex: 0 0 25%; - flex: 0 0 25%; - max-width: 25%; - } - .row-cols-md-5 > * { - -ms-flex: 0 0 20%; - flex: 0 0 20%; - max-width: 20%; - } - .row-cols-md-6 > * { - -ms-flex: 0 0 16.666667%; - flex: 0 0 16.666667%; - max-width: 16.666667%; - } - .col-md-auto { - -ms-flex: 0 0 auto; + + .row-cols-md-auto > * { flex: 0 0 auto; width: auto; - max-width: 100%; } + + .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 { - -ms-flex: 0 0 8.333333%; - flex: 0 0 8.333333%; - max-width: 8.333333%; + flex: 0 0 auto; + width: 8.3333333333%; } + .col-md-2 { - -ms-flex: 0 0 16.666667%; - flex: 0 0 16.666667%; - max-width: 16.666667%; + flex: 0 0 auto; + width: 16.6666666667%; } + .col-md-3 { - -ms-flex: 0 0 25%; - flex: 0 0 25%; - max-width: 25%; + flex: 0 0 auto; + width: 25%; } + .col-md-4 { - -ms-flex: 0 0 33.333333%; - flex: 0 0 33.333333%; - max-width: 33.333333%; + flex: 0 0 auto; + width: 33.3333333333%; } + .col-md-5 { - -ms-flex: 0 0 41.666667%; - flex: 0 0 41.666667%; - max-width: 41.666667%; + flex: 0 0 auto; + width: 41.6666666667%; } + .col-md-6 { - -ms-flex: 0 0 50%; - flex: 0 0 50%; - max-width: 50%; + flex: 0 0 auto; + width: 50%; } + .col-md-7 { - -ms-flex: 0 0 58.333333%; - flex: 0 0 58.333333%; - max-width: 58.333333%; + flex: 0 0 auto; + width: 58.3333333333%; } + .col-md-8 { - -ms-flex: 0 0 66.666667%; - flex: 0 0 66.666667%; - max-width: 66.666667%; + flex: 0 0 auto; + width: 66.6666666667%; } + .col-md-9 { - -ms-flex: 0 0 75%; - flex: 0 0 75%; - max-width: 75%; + flex: 0 0 auto; + width: 75%; } + .col-md-10 { - -ms-flex: 0 0 83.333333%; - flex: 0 0 83.333333%; - max-width: 83.333333%; + flex: 0 0 auto; + width: 83.3333333333%; } + .col-md-11 { - -ms-flex: 0 0 91.666667%; - flex: 0 0 91.666667%; - max-width: 91.666667%; + flex: 0 0 auto; + width: 91.6666666667%; } + .col-md-12 { - -ms-flex: 0 0 100%; - flex: 0 0 100%; - max-width: 100%; - } - .order-md-first { - -ms-flex-order: -1; - order: -1; - } - .order-md-last { - -ms-flex-order: 13; - order: 13; - } - .order-md-0 { - -ms-flex-order: 0; - order: 0; - } - .order-md-1 { - -ms-flex-order: 1; - order: 1; - } - .order-md-2 { - -ms-flex-order: 2; - order: 2; - } - .order-md-3 { - -ms-flex-order: 3; - order: 3; - } - .order-md-4 { - -ms-flex-order: 4; - order: 4; - } - .order-md-5 { - -ms-flex-order: 5; - order: 5; - } - .order-md-6 { - -ms-flex-order: 6; - order: 6; - } - .order-md-7 { - -ms-flex-order: 7; - order: 7; - } - .order-md-8 { - -ms-flex-order: 8; - order: 8; - } - .order-md-9 { - -ms-flex-order: 9; - order: 9; - } - .order-md-10 { - -ms-flex-order: 10; - order: 10; - } - .order-md-11 { - -ms-flex-order: 11; - order: 11; - } - .order-md-12 { - -ms-flex-order: 12; - order: 12; + flex: 0 0 auto; + width: 100%; } + .offset-md-0 { margin-left: 0; } + .offset-md-1 { - margin-left: 8.333333%; + margin-left: 8.3333333333%; } + .offset-md-2 { - margin-left: 16.666667%; + margin-left: 16.6666666667%; } + .offset-md-3 { margin-left: 25%; } + .offset-md-4 { - margin-left: 33.333333%; + margin-left: 33.3333333333%; } + .offset-md-5 { - margin-left: 41.666667%; + margin-left: 41.6666666667%; } + .offset-md-6 { margin-left: 50%; } + .offset-md-7 { - margin-left: 58.333333%; + margin-left: 58.3333333333%; } + .offset-md-8 { - margin-left: 66.666667%; + margin-left: 66.6666666667%; } + .offset-md-9 { margin-left: 75%; } + .offset-md-10 { - margin-left: 83.333333%; + margin-left: 83.3333333333%; } + .offset-md-11 { - margin-left: 91.666667%; + margin-left: 91.6666666667%; + } + + .g-md-0, +.gx-md-0 { + --bs-gutter-x: 0; + } + + .g-md-0, +.gy-md-0 { + --bs-gutter-y: 0; + } + + .g-md-1, +.gx-md-1 { + --bs-gutter-x: 0.25rem; + } + + .g-md-1, +.gy-md-1 { + --bs-gutter-y: 0.25rem; + } + + .g-md-2, +.gx-md-2 { + --bs-gutter-x: 0.5rem; + } + + .g-md-2, +.gy-md-2 { + --bs-gutter-y: 0.5rem; + } + + .g-md-3, +.gx-md-3 { + --bs-gutter-x: 1rem; + } + + .g-md-3, +.gy-md-3 { + --bs-gutter-y: 1rem; + } + + .g-md-4, +.gx-md-4 { + --bs-gutter-x: 1.5rem; + } + + .g-md-4, +.gy-md-4 { + --bs-gutter-y: 1.5rem; + } + + .g-md-5, +.gx-md-5 { + --bs-gutter-x: 3rem; + } + + .g-md-5, +.gy-md-5 { + --bs-gutter-y: 3rem; } } - @media (min-width: 992px) { .col-lg { - -ms-flex-preferred-size: 0; - flex-basis: 0; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; + flex: 1 0 0%; } - .row-cols-lg-1 > * { - -ms-flex: 0 0 100%; - flex: 0 0 100%; - max-width: 100%; - } - .row-cols-lg-2 > * { - -ms-flex: 0 0 50%; - flex: 0 0 50%; - max-width: 50%; - } - .row-cols-lg-3 > * { - -ms-flex: 0 0 33.333333%; - flex: 0 0 33.333333%; - max-width: 33.333333%; - } - .row-cols-lg-4 > * { - -ms-flex: 0 0 25%; - flex: 0 0 25%; - max-width: 25%; - } - .row-cols-lg-5 > * { - -ms-flex: 0 0 20%; - flex: 0 0 20%; - max-width: 20%; - } - .row-cols-lg-6 > * { - -ms-flex: 0 0 16.666667%; - flex: 0 0 16.666667%; - max-width: 16.666667%; - } - .col-lg-auto { - -ms-flex: 0 0 auto; + + .row-cols-lg-auto > * { flex: 0 0 auto; width: auto; - max-width: 100%; } + + .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 { - -ms-flex: 0 0 8.333333%; - flex: 0 0 8.333333%; - max-width: 8.333333%; + flex: 0 0 auto; + width: 8.3333333333%; } + .col-lg-2 { - -ms-flex: 0 0 16.666667%; - flex: 0 0 16.666667%; - max-width: 16.666667%; + flex: 0 0 auto; + width: 16.6666666667%; } + .col-lg-3 { - -ms-flex: 0 0 25%; - flex: 0 0 25%; - max-width: 25%; + flex: 0 0 auto; + width: 25%; } + .col-lg-4 { - -ms-flex: 0 0 33.333333%; - flex: 0 0 33.333333%; - max-width: 33.333333%; + flex: 0 0 auto; + width: 33.3333333333%; } + .col-lg-5 { - -ms-flex: 0 0 41.666667%; - flex: 0 0 41.666667%; - max-width: 41.666667%; + flex: 0 0 auto; + width: 41.6666666667%; } + .col-lg-6 { - -ms-flex: 0 0 50%; - flex: 0 0 50%; - max-width: 50%; + flex: 0 0 auto; + width: 50%; } + .col-lg-7 { - -ms-flex: 0 0 58.333333%; - flex: 0 0 58.333333%; - max-width: 58.333333%; + flex: 0 0 auto; + width: 58.3333333333%; } + .col-lg-8 { - -ms-flex: 0 0 66.666667%; - flex: 0 0 66.666667%; - max-width: 66.666667%; + flex: 0 0 auto; + width: 66.6666666667%; } + .col-lg-9 { - -ms-flex: 0 0 75%; - flex: 0 0 75%; - max-width: 75%; + flex: 0 0 auto; + width: 75%; } + .col-lg-10 { - -ms-flex: 0 0 83.333333%; - flex: 0 0 83.333333%; - max-width: 83.333333%; + flex: 0 0 auto; + width: 83.3333333333%; } + .col-lg-11 { - -ms-flex: 0 0 91.666667%; - flex: 0 0 91.666667%; - max-width: 91.666667%; + flex: 0 0 auto; + width: 91.6666666667%; } + .col-lg-12 { - -ms-flex: 0 0 100%; - flex: 0 0 100%; - max-width: 100%; - } - .order-lg-first { - -ms-flex-order: -1; - order: -1; - } - .order-lg-last { - -ms-flex-order: 13; - order: 13; - } - .order-lg-0 { - -ms-flex-order: 0; - order: 0; - } - .order-lg-1 { - -ms-flex-order: 1; - order: 1; - } - .order-lg-2 { - -ms-flex-order: 2; - order: 2; - } - .order-lg-3 { - -ms-flex-order: 3; - order: 3; - } - .order-lg-4 { - -ms-flex-order: 4; - order: 4; - } - .order-lg-5 { - -ms-flex-order: 5; - order: 5; - } - .order-lg-6 { - -ms-flex-order: 6; - order: 6; - } - .order-lg-7 { - -ms-flex-order: 7; - order: 7; - } - .order-lg-8 { - -ms-flex-order: 8; - order: 8; - } - .order-lg-9 { - -ms-flex-order: 9; - order: 9; - } - .order-lg-10 { - -ms-flex-order: 10; - order: 10; - } - .order-lg-11 { - -ms-flex-order: 11; - order: 11; - } - .order-lg-12 { - -ms-flex-order: 12; - order: 12; + flex: 0 0 auto; + width: 100%; } + .offset-lg-0 { margin-left: 0; } + .offset-lg-1 { - margin-left: 8.333333%; + margin-left: 8.3333333333%; } + .offset-lg-2 { - margin-left: 16.666667%; + margin-left: 16.6666666667%; } + .offset-lg-3 { margin-left: 25%; } + .offset-lg-4 { - margin-left: 33.333333%; + margin-left: 33.3333333333%; } + .offset-lg-5 { - margin-left: 41.666667%; + margin-left: 41.6666666667%; } + .offset-lg-6 { margin-left: 50%; } + .offset-lg-7 { - margin-left: 58.333333%; + margin-left: 58.3333333333%; } + .offset-lg-8 { - margin-left: 66.666667%; + margin-left: 66.6666666667%; } + .offset-lg-9 { margin-left: 75%; } + .offset-lg-10 { - margin-left: 83.333333%; + margin-left: 83.3333333333%; } + .offset-lg-11 { - margin-left: 91.666667%; + margin-left: 91.6666666667%; + } + + .g-lg-0, +.gx-lg-0 { + --bs-gutter-x: 0; + } + + .g-lg-0, +.gy-lg-0 { + --bs-gutter-y: 0; + } + + .g-lg-1, +.gx-lg-1 { + --bs-gutter-x: 0.25rem; + } + + .g-lg-1, +.gy-lg-1 { + --bs-gutter-y: 0.25rem; + } + + .g-lg-2, +.gx-lg-2 { + --bs-gutter-x: 0.5rem; + } + + .g-lg-2, +.gy-lg-2 { + --bs-gutter-y: 0.5rem; + } + + .g-lg-3, +.gx-lg-3 { + --bs-gutter-x: 1rem; + } + + .g-lg-3, +.gy-lg-3 { + --bs-gutter-y: 1rem; + } + + .g-lg-4, +.gx-lg-4 { + --bs-gutter-x: 1.5rem; + } + + .g-lg-4, +.gy-lg-4 { + --bs-gutter-y: 1.5rem; + } + + .g-lg-5, +.gx-lg-5 { + --bs-gutter-x: 3rem; + } + + .g-lg-5, +.gy-lg-5 { + --bs-gutter-y: 3rem; } } - @media (min-width: 1200px) { .col-xl { - -ms-flex-preferred-size: 0; - flex-basis: 0; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; + flex: 1 0 0%; } - .row-cols-xl-1 > * { - -ms-flex: 0 0 100%; - flex: 0 0 100%; - max-width: 100%; - } - .row-cols-xl-2 > * { - -ms-flex: 0 0 50%; - flex: 0 0 50%; - max-width: 50%; - } - .row-cols-xl-3 > * { - -ms-flex: 0 0 33.333333%; - flex: 0 0 33.333333%; - max-width: 33.333333%; - } - .row-cols-xl-4 > * { - -ms-flex: 0 0 25%; - flex: 0 0 25%; - max-width: 25%; - } - .row-cols-xl-5 > * { - -ms-flex: 0 0 20%; - flex: 0 0 20%; - max-width: 20%; - } - .row-cols-xl-6 > * { - -ms-flex: 0 0 16.666667%; - flex: 0 0 16.666667%; - max-width: 16.666667%; - } - .col-xl-auto { - -ms-flex: 0 0 auto; + + .row-cols-xl-auto > * { flex: 0 0 auto; width: auto; - max-width: 100%; } + + .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 { - -ms-flex: 0 0 8.333333%; - flex: 0 0 8.333333%; - max-width: 8.333333%; + flex: 0 0 auto; + width: 8.3333333333%; } + .col-xl-2 { - -ms-flex: 0 0 16.666667%; - flex: 0 0 16.666667%; - max-width: 16.666667%; + flex: 0 0 auto; + width: 16.6666666667%; } + .col-xl-3 { - -ms-flex: 0 0 25%; - flex: 0 0 25%; - max-width: 25%; + flex: 0 0 auto; + width: 25%; } + .col-xl-4 { - -ms-flex: 0 0 33.333333%; - flex: 0 0 33.333333%; - max-width: 33.333333%; + flex: 0 0 auto; + width: 33.3333333333%; } + .col-xl-5 { - -ms-flex: 0 0 41.666667%; - flex: 0 0 41.666667%; - max-width: 41.666667%; + flex: 0 0 auto; + width: 41.6666666667%; } + .col-xl-6 { - -ms-flex: 0 0 50%; - flex: 0 0 50%; - max-width: 50%; + flex: 0 0 auto; + width: 50%; } + .col-xl-7 { - -ms-flex: 0 0 58.333333%; - flex: 0 0 58.333333%; - max-width: 58.333333%; + flex: 0 0 auto; + width: 58.3333333333%; } + .col-xl-8 { - -ms-flex: 0 0 66.666667%; - flex: 0 0 66.666667%; - max-width: 66.666667%; + flex: 0 0 auto; + width: 66.6666666667%; } + .col-xl-9 { - -ms-flex: 0 0 75%; - flex: 0 0 75%; - max-width: 75%; + flex: 0 0 auto; + width: 75%; } + .col-xl-10 { - -ms-flex: 0 0 83.333333%; - flex: 0 0 83.333333%; - max-width: 83.333333%; + flex: 0 0 auto; + width: 83.3333333333%; } + .col-xl-11 { - -ms-flex: 0 0 91.666667%; - flex: 0 0 91.666667%; - max-width: 91.666667%; + flex: 0 0 auto; + width: 91.6666666667%; } + .col-xl-12 { - -ms-flex: 0 0 100%; - flex: 0 0 100%; - max-width: 100%; - } - .order-xl-first { - -ms-flex-order: -1; - order: -1; - } - .order-xl-last { - -ms-flex-order: 13; - order: 13; - } - .order-xl-0 { - -ms-flex-order: 0; - order: 0; - } - .order-xl-1 { - -ms-flex-order: 1; - order: 1; - } - .order-xl-2 { - -ms-flex-order: 2; - order: 2; - } - .order-xl-3 { - -ms-flex-order: 3; - order: 3; - } - .order-xl-4 { - -ms-flex-order: 4; - order: 4; - } - .order-xl-5 { - -ms-flex-order: 5; - order: 5; - } - .order-xl-6 { - -ms-flex-order: 6; - order: 6; - } - .order-xl-7 { - -ms-flex-order: 7; - order: 7; - } - .order-xl-8 { - -ms-flex-order: 8; - order: 8; - } - .order-xl-9 { - -ms-flex-order: 9; - order: 9; - } - .order-xl-10 { - -ms-flex-order: 10; - order: 10; - } - .order-xl-11 { - -ms-flex-order: 11; - order: 11; - } - .order-xl-12 { - -ms-flex-order: 12; - order: 12; + flex: 0 0 auto; + width: 100%; } + .offset-xl-0 { margin-left: 0; } + .offset-xl-1 { - margin-left: 8.333333%; + margin-left: 8.3333333333%; } + .offset-xl-2 { - margin-left: 16.666667%; + margin-left: 16.6666666667%; } + .offset-xl-3 { margin-left: 25%; } + .offset-xl-4 { - margin-left: 33.333333%; + margin-left: 33.3333333333%; } + .offset-xl-5 { - margin-left: 41.666667%; + margin-left: 41.6666666667%; } + .offset-xl-6 { margin-left: 50%; } + .offset-xl-7 { - margin-left: 58.333333%; + margin-left: 58.3333333333%; } + .offset-xl-8 { - margin-left: 66.666667%; + margin-left: 66.6666666667%; } + .offset-xl-9 { margin-left: 75%; } + .offset-xl-10 { - margin-left: 83.333333%; + margin-left: 83.3333333333%; } + .offset-xl-11 { - margin-left: 91.666667%; + margin-left: 91.6666666667%; + } + + .g-xl-0, +.gx-xl-0 { + --bs-gutter-x: 0; + } + + .g-xl-0, +.gy-xl-0 { + --bs-gutter-y: 0; + } + + .g-xl-1, +.gx-xl-1 { + --bs-gutter-x: 0.25rem; + } + + .g-xl-1, +.gy-xl-1 { + --bs-gutter-y: 0.25rem; + } + + .g-xl-2, +.gx-xl-2 { + --bs-gutter-x: 0.5rem; + } + + .g-xl-2, +.gy-xl-2 { + --bs-gutter-y: 0.5rem; + } + + .g-xl-3, +.gx-xl-3 { + --bs-gutter-x: 1rem; + } + + .g-xl-3, +.gy-xl-3 { + --bs-gutter-y: 1rem; + } + + .g-xl-4, +.gx-xl-4 { + --bs-gutter-x: 1.5rem; + } + + .g-xl-4, +.gy-xl-4 { + --bs-gutter-y: 1.5rem; + } + + .g-xl-5, +.gx-xl-5 { + --bs-gutter-x: 3rem; + } + + .g-xl-5, +.gy-xl-5 { + --bs-gutter-y: 3rem; } } +@media (min-width: 1400px) { + .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.3333333333%; + } + + .col-xxl-2 { + flex: 0 0 auto; + width: 16.6666666667%; + } + + .col-xxl-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-xxl-4 { + flex: 0 0 auto; + width: 33.3333333333%; + } + + .col-xxl-5 { + flex: 0 0 auto; + width: 41.6666666667%; + } + + .col-xxl-6 { + flex: 0 0 auto; + width: 50%; + } + + .col-xxl-7 { + flex: 0 0 auto; + width: 58.3333333333%; + } + + .col-xxl-8 { + flex: 0 0 auto; + width: 66.6666666667%; + } + + .col-xxl-9 { + flex: 0 0 auto; + width: 75%; + } + + .col-xxl-10 { + flex: 0 0 auto; + width: 83.3333333333%; + } + + .col-xxl-11 { + flex: 0 0 auto; + width: 91.6666666667%; + } + + .col-xxl-12 { + flex: 0 0 auto; + width: 100%; + } + + .offset-xxl-0 { + margin-left: 0; + } + + .offset-xxl-1 { + margin-left: 8.3333333333%; + } + + .offset-xxl-2 { + margin-left: 16.6666666667%; + } + + .offset-xxl-3 { + margin-left: 25%; + } + + .offset-xxl-4 { + margin-left: 33.3333333333%; + } + + .offset-xxl-5 { + margin-left: 41.6666666667%; + } + + .offset-xxl-6 { + margin-left: 50%; + } + + .offset-xxl-7 { + margin-left: 58.3333333333%; + } + + .offset-xxl-8 { + margin-left: 66.6666666667%; + } + + .offset-xxl-9 { + margin-left: 75%; + } + + .offset-xxl-10 { + margin-left: 83.3333333333%; + } + + .offset-xxl-11 { + margin-left: 91.6666666667%; + } + + .g-xxl-0, +.gx-xxl-0 { + --bs-gutter-x: 0; + } + + .g-xxl-0, +.gy-xxl-0 { + --bs-gutter-y: 0; + } + + .g-xxl-1, +.gx-xxl-1 { + --bs-gutter-x: 0.25rem; + } + + .g-xxl-1, +.gy-xxl-1 { + --bs-gutter-y: 0.25rem; + } + + .g-xxl-2, +.gx-xxl-2 { + --bs-gutter-x: 0.5rem; + } + + .g-xxl-2, +.gy-xxl-2 { + --bs-gutter-y: 0.5rem; + } + + .g-xxl-3, +.gx-xxl-3 { + --bs-gutter-x: 1rem; + } + + .g-xxl-3, +.gy-xxl-3 { + --bs-gutter-y: 1rem; + } + + .g-xxl-4, +.gx-xxl-4 { + --bs-gutter-x: 1.5rem; + } + + .g-xxl-4, +.gy-xxl-4 { + --bs-gutter-y: 1.5rem; + } + + .g-xxl-5, +.gx-xxl-5 { + --bs-gutter-x: 3rem; + } + + .g-xxl-5, +.gy-xxl-5 { + --bs-gutter-y: 3rem; + } +} .table { + --bs-table-bg: transparent; + --bs-table-accent-bg: transparent; + --bs-table-striped-color: #212529; + --bs-table-striped-bg: rgba(0, 0, 0, 0.05); + --bs-table-active-color: #212529; + --bs-table-active-bg: rgba(0, 0, 0, 0.1); + --bs-table-hover-color: #212529; + --bs-table-hover-bg: rgba(0, 0, 0, 0.075); width: 100%; margin-bottom: 1rem; color: #212529; -} - -.table th, -.table td { - padding: 0.75rem; vertical-align: top; - border-top: 1px solid #dee2e6; -} - -.table thead th { - vertical-align: bottom; - border-bottom: 2px solid #dee2e6; -} - -.table tbody + tbody { - border-top: 2px solid #dee2e6; -} - -.table-sm th, -.table-sm td { - padding: 0.3rem; -} - -.table-bordered { - border: 1px solid #dee2e6; -} - -.table-bordered th, -.table-bordered td { - border: 1px solid #dee2e6; -} - -.table-bordered thead th, -.table-bordered thead td { - border-bottom-width: 2px; -} - -.table-borderless th, -.table-borderless td, -.table-borderless thead th, -.table-borderless tbody + tbody { - border: 0; -} - -.table-striped tbody tr:nth-of-type(odd) { - background-color: rgba(0, 0, 0, 0.05); -} - -.table-hover tbody tr:hover { - color: #212529; - background-color: rgba(0, 0, 0, 0.075); -} - -.table-primary, -.table-primary > th, -.table-primary > td { - background-color: #b8daff; -} - -.table-primary th, -.table-primary td, -.table-primary thead th, -.table-primary tbody + tbody { - border-color: #7abaff; -} - -.table-hover .table-primary:hover { - background-color: #9fcdff; -} - -.table-hover .table-primary:hover > td, -.table-hover .table-primary:hover > th { - background-color: #9fcdff; -} - -.table-secondary, -.table-secondary > th, -.table-secondary > td { - background-color: #d6d8db; -} - -.table-secondary th, -.table-secondary td, -.table-secondary thead th, -.table-secondary tbody + tbody { - border-color: #b3b7bb; -} - -.table-hover .table-secondary:hover { - background-color: #c8cbcf; -} - -.table-hover .table-secondary:hover > td, -.table-hover .table-secondary:hover > th { - background-color: #c8cbcf; -} - -.table-success, -.table-success > th, -.table-success > td { - background-color: #c3e6cb; -} - -.table-success th, -.table-success td, -.table-success thead th, -.table-success tbody + tbody { - border-color: #8fd19e; -} - -.table-hover .table-success:hover { - background-color: #b1dfbb; -} - -.table-hover .table-success:hover > td, -.table-hover .table-success:hover > th { - background-color: #b1dfbb; -} - -.table-info, -.table-info > th, -.table-info > td { - background-color: #bee5eb; -} - -.table-info th, -.table-info td, -.table-info thead th, -.table-info tbody + tbody { - border-color: #86cfda; -} - -.table-hover .table-info:hover { - background-color: #abdde5; -} - -.table-hover .table-info:hover > td, -.table-hover .table-info:hover > th { - background-color: #abdde5; -} - -.table-warning, -.table-warning > th, -.table-warning > td { - background-color: #ffeeba; -} - -.table-warning th, -.table-warning td, -.table-warning thead th, -.table-warning tbody + tbody { - border-color: #ffdf7e; -} - -.table-hover .table-warning:hover { - background-color: #ffe8a1; -} - -.table-hover .table-warning:hover > td, -.table-hover .table-warning:hover > th { - background-color: #ffe8a1; -} - -.table-danger, -.table-danger > th, -.table-danger > td { - background-color: #f5c6cb; -} - -.table-danger th, -.table-danger td, -.table-danger thead th, -.table-danger tbody + tbody { - border-color: #ed969e; -} - -.table-hover .table-danger:hover { - background-color: #f1b0b7; -} - -.table-hover .table-danger:hover > td, -.table-hover .table-danger:hover > th { - background-color: #f1b0b7; -} - -.table-light, -.table-light > th, -.table-light > td { - background-color: #fdfdfe; -} - -.table-light th, -.table-light td, -.table-light thead th, -.table-light tbody + tbody { - border-color: #fbfcfc; -} - -.table-hover .table-light:hover { - background-color: #ececf6; -} - -.table-hover .table-light:hover > td, -.table-hover .table-light:hover > th { - background-color: #ececf6; -} - -.table-dark, -.table-dark > th, -.table-dark > td { - background-color: #c6c8ca; -} - -.table-dark th, -.table-dark td, -.table-dark thead th, -.table-dark tbody + tbody { - border-color: #95999c; -} - -.table-hover .table-dark:hover { - background-color: #b9bbbe; -} - -.table-hover .table-dark:hover > td, -.table-hover .table-dark:hover > th { - background-color: #b9bbbe; -} - -.table-active, -.table-active > th, -.table-active > td { - background-color: rgba(0, 0, 0, 0.075); -} - -.table-hover .table-active:hover { - background-color: rgba(0, 0, 0, 0.075); -} - -.table-hover .table-active:hover > td, -.table-hover .table-active:hover > th { - background-color: rgba(0, 0, 0, 0.075); -} - -.table .thead-dark th { - color: #fff; - background-color: #343a40; - border-color: #454d55; -} - -.table .thead-light th { - color: #495057; - background-color: #e9ecef; border-color: #dee2e6; } +.table > :not(caption) > * > * { + padding: 0.5rem 0.5rem; + background-color: var(--bs-table-bg); + border-bottom-width: 1px; + box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); +} +.table > tbody { + vertical-align: inherit; +} +.table > thead { + vertical-align: bottom; +} +.table > :not(:last-child) > :last-child > * { + border-bottom-color: currentColor; +} + +.caption-top { + caption-side: top; +} + +.table-sm > :not(caption) > * > * { + padding: 0.25rem 0.25rem; +} + +.table-bordered > :not(caption) > * { + border-width: 1px 0; +} +.table-bordered > :not(caption) > * > * { + border-width: 0 1px; +} + +.table-borderless > :not(caption) > * > * { + border-bottom-width: 0; +} + +.table-striped > tbody > tr:nth-of-type(odd) { + --bs-table-accent-bg: var(--bs-table-striped-bg); + color: var(--bs-table-striped-color); +} + +.table-active { + --bs-table-accent-bg: var(--bs-table-active-bg); + color: var(--bs-table-active-color); +} + +.table-hover > tbody > tr:hover { + --bs-table-accent-bg: var(--bs-table-hover-bg); + color: var(--bs-table-hover-color); +} + +.table-primary { + --bs-table-bg: #cfe2ff; + --bs-table-striped-bg: #c5d7f2; + --bs-table-striped-color: #000; + --bs-table-active-bg: #bacbe6; + --bs-table-active-color: #000; + --bs-table-hover-bg: #bfd1ec; + --bs-table-hover-color: #000; + color: #000; + border-color: #bacbe6; +} + +.table-secondary { + --bs-table-bg: #e2e3e5; + --bs-table-striped-bg: #d7d8da; + --bs-table-striped-color: #000; + --bs-table-active-bg: #cbccce; + --bs-table-active-color: #000; + --bs-table-hover-bg: #d1d2d4; + --bs-table-hover-color: #000; + color: #000; + border-color: #cbccce; +} + +.table-success { + --bs-table-bg: #d1e7dd; + --bs-table-striped-bg: #c7dbd2; + --bs-table-striped-color: #000; + --bs-table-active-bg: #bcd0c7; + --bs-table-active-color: #000; + --bs-table-hover-bg: #c1d6cc; + --bs-table-hover-color: #000; + color: #000; + border-color: #bcd0c7; +} + +.table-info { + --bs-table-bg: #cff4fc; + --bs-table-striped-bg: #c5e8ef; + --bs-table-striped-color: #000; + --bs-table-active-bg: #badce3; + --bs-table-active-color: #000; + --bs-table-hover-bg: #bfe2e9; + --bs-table-hover-color: #000; + color: #000; + border-color: #badce3; +} + +.table-warning { + --bs-table-bg: #fff3cd; + --bs-table-striped-bg: #f2e7c3; + --bs-table-striped-color: #000; + --bs-table-active-bg: #e6dbb9; + --bs-table-active-color: #000; + --bs-table-hover-bg: #ece1be; + --bs-table-hover-color: #000; + color: #000; + border-color: #e6dbb9; +} + +.table-danger { + --bs-table-bg: #f8d7da; + --bs-table-striped-bg: #eccccf; + --bs-table-striped-color: #000; + --bs-table-active-bg: #dfc2c4; + --bs-table-active-color: #000; + --bs-table-hover-bg: #e5c7ca; + --bs-table-hover-color: #000; + color: #000; + border-color: #dfc2c4; +} + +.table-light { + --bs-table-bg: #f8f9fa; + --bs-table-striped-bg: #ecedee; + --bs-table-striped-color: #000; + --bs-table-active-bg: #dfe0e1; + --bs-table-active-color: #000; + --bs-table-hover-bg: #e5e6e7; + --bs-table-hover-color: #000; + color: #000; + border-color: #dfe0e1; +} .table-dark { + --bs-table-bg: #212529; + --bs-table-striped-bg: #2c3034; + --bs-table-striped-color: #fff; + --bs-table-active-bg: #373b3e; + --bs-table-active-color: #fff; + --bs-table-hover-bg: #323539; + --bs-table-hover-color: #fff; color: #fff; - background-color: #343a40; -} - -.table-dark th, -.table-dark td, -.table-dark thead th { - border-color: #454d55; -} - -.table-dark.table-bordered { - border: 0; -} - -.table-dark.table-striped tbody tr:nth-of-type(odd) { - background-color: rgba(255, 255, 255, 0.05); -} - -.table-dark.table-hover tbody tr:hover { - color: #fff; - background-color: rgba(255, 255, 255, 0.075); -} - -@media (max-width: 575.98px) { - .table-responsive-sm { - display: block; - width: 100%; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - } - .table-responsive-sm > .table-bordered { - border: 0; - } -} - -@media (max-width: 767.98px) { - .table-responsive-md { - display: block; - width: 100%; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - } - .table-responsive-md > .table-bordered { - border: 0; - } -} - -@media (max-width: 991.98px) { - .table-responsive-lg { - display: block; - width: 100%; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - } - .table-responsive-lg > .table-bordered { - border: 0; - } -} - -@media (max-width: 1199.98px) { - .table-responsive-xl { - display: block; - width: 100%; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - } - .table-responsive-xl > .table-bordered { - border: 0; - } + border-color: #373b3e; } .table-responsive { - display: block; - width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } -.table-responsive > .table-bordered { - border: 0; -} - -.form-control { - display: block; - width: 100%; - height: calc(1.5em + 0.75rem + 2px); - padding: 0.375rem 0.75rem; - font-size: 1rem; - font-weight: 400; - line-height: 1.5; - color: #495057; - background-color: #fff; - background-clip: padding-box; - border: 1px solid #ced4da; - border-radius: 0.25rem; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -} - -@media (prefers-reduced-motion: reduce) { - .form-control { - transition: none; +@media (max-width: 575.98px) { + .table-responsive-sm { + overflow-x: auto; + -webkit-overflow-scrolling: touch; } } - -.form-control::-ms-expand { - background-color: transparent; - border: 0; +@media (max-width: 767.98px) { + .table-responsive-md { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } } - -.form-control:-moz-focusring { - color: transparent; - text-shadow: 0 0 0 #495057; +@media (max-width: 991.98px) { + .table-responsive-lg { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } } - -.form-control:focus { - color: #495057; - background-color: #fff; - border-color: #80bdff; - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); +@media (max-width: 1199.98px) { + .table-responsive-xl { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } } - -.form-control::-webkit-input-placeholder { - color: #6c757d; - opacity: 1; +@media (max-width: 1399.98px) { + .table-responsive-xxl { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } } - -.form-control::-moz-placeholder { - color: #6c757d; - opacity: 1; -} - -.form-control:-ms-input-placeholder { - color: #6c757d; - opacity: 1; -} - -.form-control::-ms-input-placeholder { - color: #6c757d; - opacity: 1; -} - -.form-control::placeholder { - color: #6c757d; - opacity: 1; -} - -.form-control:disabled, .form-control[readonly] { - background-color: #e9ecef; - opacity: 1; -} - -input[type="date"].form-control, -input[type="time"].form-control, -input[type="datetime-local"].form-control, -input[type="month"].form-control { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} - -select.form-control:focus::-ms-value { - color: #495057; - background-color: #fff; -} - -.form-control-file, -.form-control-range { - display: block; - width: 100%; +.form-label { + margin-bottom: 0.5rem; } .col-form-label { @@ -2104,14 +2131,117 @@ select.form-control:focus::-ms-value { padding-top: calc(0.5rem + 1px); padding-bottom: calc(0.5rem + 1px); font-size: 1.25rem; - line-height: 1.5; } .col-form-label-sm { padding-top: calc(0.25rem + 1px); padding-bottom: calc(0.25rem + 1px); font-size: 0.875rem; +} + +.form-text { + margin-top: 0.25rem; + font-size: 0.875em; + color: #6c757d; +} + +.form-control { + display: block; + width: 100%; + padding: 0.375rem 0.75rem; + font-size: 1rem; + font-weight: 400; line-height: 1.5; + color: #212529; + background-color: #fff; + background-clip: padding-box; + border: 1px solid #ced4da; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0.25rem; + transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} +@media (prefers-reduced-motion: reduce) { + .form-control { + transition: none; + } +} +.form-control[type=file] { + overflow: hidden; +} +.form-control[type=file]:not(:disabled):not([readonly]) { + cursor: pointer; +} +.form-control:focus { + color: #212529; + background-color: #fff; + border-color: #86b7fe; + outline: 0; + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); +} +.form-control::-webkit-date-and-time-value { + height: 1.5em; +} +.form-control::-moz-placeholder { + color: #6c757d; + opacity: 1; +} +.form-control::placeholder { + color: #6c757d; + opacity: 1; +} +.form-control:disabled, .form-control[readonly] { + background-color: #e9ecef; + opacity: 1; +} +.form-control::file-selector-button { + padding: 0.375rem 0.75rem; + margin: -0.375rem -0.75rem; + -webkit-margin-end: 0.75rem; + margin-inline-end: 0.75rem; + color: #212529; + background-color: #e9ecef; + pointer-events: none; + border-color: inherit; + border-style: solid; + border-width: 0; + border-inline-end-width: 1px; + border-radius: 0; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} +@media (prefers-reduced-motion: reduce) { + .form-control::file-selector-button { + transition: none; + } +} +.form-control:hover:not(:disabled):not([readonly])::file-selector-button { + background-color: #dde0e3; +} +.form-control::-webkit-file-upload-button { + padding: 0.375rem 0.75rem; + margin: -0.375rem -0.75rem; + -webkit-margin-end: 0.75rem; + margin-inline-end: 0.75rem; + color: #212529; + background-color: #e9ecef; + pointer-events: none; + border-color: inherit; + border-style: solid; + border-width: 0; + border-inline-end-width: 1px; + border-radius: 0; + -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} +@media (prefers-reduced-motion: reduce) { + .form-control::-webkit-file-upload-button { + -webkit-transition: none; + transition: none; + } +} +.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button { + background-color: #dde0e3; } .form-control-plaintext { @@ -2119,125 +2249,487 @@ select.form-control:focus::-ms-value { width: 100%; padding: 0.375rem 0; margin-bottom: 0; - font-size: 1rem; line-height: 1.5; color: #212529; background-color: transparent; border: solid transparent; border-width: 1px 0; } - .form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg { padding-right: 0; padding-left: 0; } .form-control-sm { - height: calc(1.5em + 0.5rem + 2px); + min-height: calc(1.5em + 0.5rem + 2px); padding: 0.25rem 0.5rem; font-size: 0.875rem; - line-height: 1.5; border-radius: 0.2rem; } +.form-control-sm::file-selector-button { + padding: 0.25rem 0.5rem; + margin: -0.25rem -0.5rem; + -webkit-margin-end: 0.5rem; + margin-inline-end: 0.5rem; +} +.form-control-sm::-webkit-file-upload-button { + padding: 0.25rem 0.5rem; + margin: -0.25rem -0.5rem; + -webkit-margin-end: 0.5rem; + margin-inline-end: 0.5rem; +} .form-control-lg { - height: calc(1.5em + 1rem + 2px); + min-height: calc(1.5em + 1rem + 2px); padding: 0.5rem 1rem; font-size: 1.25rem; - line-height: 1.5; border-radius: 0.3rem; } - -select.form-control[size], select.form-control[multiple] { - height: auto; +.form-control-lg::file-selector-button { + padding: 0.5rem 1rem; + margin: -0.5rem -1rem; + -webkit-margin-end: 1rem; + margin-inline-end: 1rem; +} +.form-control-lg::-webkit-file-upload-button { + padding: 0.5rem 1rem; + margin: -0.5rem -1rem; + -webkit-margin-end: 1rem; + margin-inline-end: 1rem; } textarea.form-control { + min-height: calc(1.5em + 0.75rem + 2px); +} +textarea.form-control-sm { + min-height: calc(1.5em + 0.5rem + 2px); +} +textarea.form-control-lg { + min-height: calc(1.5em + 1rem + 2px); +} + +.form-control-color { + max-width: 3rem; height: auto; + padding: 0.375rem; +} +.form-control-color:not(:disabled):not([readonly]) { + cursor: pointer; +} +.form-control-color::-moz-color-swatch { + height: 1.5em; + border-radius: 0.25rem; +} +.form-control-color::-webkit-color-swatch { + height: 1.5em; + border-radius: 0.25rem; } -.form-group { - margin-bottom: 1rem; -} - -.form-text { +.form-select { display: block; - margin-top: 0.25rem; + width: 100%; + padding: 0.375rem 2.25rem 0.375rem 0.75rem; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: #212529; + background-color: #fff; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); + background-repeat: no-repeat; + background-position: right 0.75rem center; + background-size: 16px 12px; + border: 1px solid #ced4da; + border-radius: 0.25rem; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} +.form-select:focus { + border-color: #86b7fe; + outline: 0; + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); +} +.form-select[multiple], .form-select[size]:not([size="1"]) { + padding-right: 0.75rem; + background-image: none; +} +.form-select:disabled { + background-color: #e9ecef; +} +.form-select:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 #212529; } -.form-row { - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin-right: -5px; - margin-left: -5px; +.form-select-sm { + padding-top: 0.25rem; + padding-bottom: 0.25rem; + padding-left: 0.5rem; + font-size: 0.875rem; } -.form-row > .col, -.form-row > [class*="col-"] { - padding-right: 5px; - padding-left: 5px; +.form-select-lg { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + padding-left: 1rem; + font-size: 1.25rem; } .form-check { - position: relative; display: block; - padding-left: 1.25rem; + min-height: 1.5rem; + padding-left: 1.5em; + margin-bottom: 0.125rem; +} +.form-check .form-check-input { + float: left; + margin-left: -1.5em; } .form-check-input { - position: absolute; - margin-top: 0.3rem; - margin-left: -1.25rem; + width: 1em; + height: 1em; + margin-top: 0.25em; + vertical-align: top; + background-color: #fff; + background-repeat: no-repeat; + background-position: center; + background-size: contain; + border: 1px solid rgba(0, 0, 0, 0.25); + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + -webkit-print-color-adjust: exact; + color-adjust: exact; +} +.form-check-input[type=checkbox] { + border-radius: 0.25em; +} +.form-check-input[type=radio] { + border-radius: 50%; +} +.form-check-input:active { + filter: brightness(90%); +} +.form-check-input:focus { + border-color: #86b7fe; + outline: 0; + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); +} +.form-check-input:checked { + background-color: #0d6efd; + border-color: #0d6efd; +} +.form-check-input:checked[type=checkbox] { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"); +} +.form-check-input:checked[type=radio] { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e"); +} +.form-check-input[type=checkbox]:indeterminate { + background-color: #0d6efd; + border-color: #0d6efd; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e"); +} +.form-check-input:disabled { + pointer-events: none; + filter: none; + opacity: 0.5; +} +.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label { + opacity: 0.5; } -.form-check-input[disabled] ~ .form-check-label, -.form-check-input:disabled ~ .form-check-label { - color: #6c757d; +.form-switch { + padding-left: 2.5em; } - -.form-check-label { - margin-bottom: 0; +.form-switch .form-check-input { + width: 2em; + margin-left: -2.5em; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e"); + background-position: left center; + border-radius: 2em; + transition: background-position 0.15s ease-in-out; +} +@media (prefers-reduced-motion: reduce) { + .form-switch .form-check-input { + transition: none; + } +} +.form-switch .form-check-input:focus { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e"); +} +.form-switch .form-check-input:checked { + background-position: right center; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); } .form-check-inline { - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-align: center; - align-items: center; - padding-left: 0; - margin-right: 0.75rem; + display: inline-block; + margin-right: 1rem; } -.form-check-inline .form-check-input { - position: static; - margin-top: 0; - margin-right: 0.3125rem; - margin-left: 0; +.btn-check { + position: absolute; + clip: rect(0, 0, 0, 0); + pointer-events: none; +} +.btn-check[disabled] + .btn, .btn-check:disabled + .btn { + pointer-events: none; + filter: none; + opacity: 0.65; +} + +.form-range { + width: 100%; + height: 1.5rem; + padding: 0; + background-color: transparent; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} +.form-range:focus { + outline: 0; +} +.form-range:focus::-webkit-slider-thumb { + box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25); +} +.form-range:focus::-moz-range-thumb { + box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25); +} +.form-range::-moz-focus-outer { + border: 0; +} +.form-range::-webkit-slider-thumb { + width: 1rem; + height: 1rem; + margin-top: -0.25rem; + background-color: #0d6efd; + border: 0; + border-radius: 1rem; + -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + -webkit-appearance: none; + appearance: none; +} +@media (prefers-reduced-motion: reduce) { + .form-range::-webkit-slider-thumb { + -webkit-transition: none; + transition: none; + } +} +.form-range::-webkit-slider-thumb:active { + background-color: #b6d4fe; +} +.form-range::-webkit-slider-runnable-track { + width: 100%; + height: 0.5rem; + color: transparent; + cursor: pointer; + background-color: #dee2e6; + border-color: transparent; + border-radius: 1rem; +} +.form-range::-moz-range-thumb { + width: 1rem; + height: 1rem; + background-color: #0d6efd; + border: 0; + border-radius: 1rem; + -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + -moz-appearance: none; + appearance: none; +} +@media (prefers-reduced-motion: reduce) { + .form-range::-moz-range-thumb { + -moz-transition: none; + transition: none; + } +} +.form-range::-moz-range-thumb:active { + background-color: #b6d4fe; +} +.form-range::-moz-range-track { + width: 100%; + height: 0.5rem; + color: transparent; + cursor: pointer; + background-color: #dee2e6; + border-color: transparent; + border-radius: 1rem; +} +.form-range:disabled { + pointer-events: none; +} +.form-range:disabled::-webkit-slider-thumb { + background-color: #adb5bd; +} +.form-range:disabled::-moz-range-thumb { + background-color: #adb5bd; +} + +.form-floating { + position: relative; +} +.form-floating > .form-control, +.form-floating > .form-select { + height: calc(3.5rem + 2px); + padding: 1rem 0.75rem; +} +.form-floating > label { + position: absolute; + top: 0; + left: 0; + height: 100%; + padding: 1rem 0.75rem; + pointer-events: none; + border: 1px solid transparent; + transform-origin: 0 0; + transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out; +} +@media (prefers-reduced-motion: reduce) { + .form-floating > label { + transition: none; + } +} +.form-floating > .form-control::-moz-placeholder { + color: transparent; +} +.form-floating > .form-control::placeholder { + color: transparent; +} +.form-floating > .form-control:not(:-moz-placeholder-shown) { + padding-top: 1.625rem; + padding-bottom: 0.625rem; +} +.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) { + padding-top: 1.625rem; + padding-bottom: 0.625rem; +} +.form-floating > .form-control:-webkit-autofill { + padding-top: 1.625rem; + padding-bottom: 0.625rem; +} +.form-floating > .form-select { + padding-top: 1.625rem; + padding-bottom: 0.625rem; +} +.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label { + opacity: 0.65; + transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); +} +.form-floating > .form-control:focus ~ label, +.form-floating > .form-control:not(:placeholder-shown) ~ label, +.form-floating > .form-select ~ label { + opacity: 0.65; + transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); +} +.form-floating > .form-control:-webkit-autofill ~ label { + opacity: 0.65; + transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); +} + +.input-group { + position: relative; + display: flex; + flex-wrap: wrap; + align-items: stretch; + width: 100%; +} +.input-group > .form-control, +.input-group > .form-select { + position: relative; + flex: 1 1 auto; + width: 1%; + min-width: 0; +} +.input-group > .form-control:focus, +.input-group > .form-select:focus { + z-index: 3; +} +.input-group .btn { + position: relative; + z-index: 2; +} +.input-group .btn:focus { + z-index: 3; +} + +.input-group-text { + display: flex; + align-items: center; + padding: 0.375rem 0.75rem; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: #212529; + text-align: center; + white-space: nowrap; + background-color: #e9ecef; + border: 1px solid #ced4da; + border-radius: 0.25rem; +} + +.input-group-lg > .form-control, +.input-group-lg > .form-select, +.input-group-lg > .input-group-text, +.input-group-lg > .btn { + padding: 0.5rem 1rem; + font-size: 1.25rem; + border-radius: 0.3rem; +} + +.input-group-sm > .form-control, +.input-group-sm > .form-select, +.input-group-sm > .input-group-text, +.input-group-sm > .btn { + padding: 0.25rem 0.5rem; + font-size: 0.875rem; + border-radius: 0.2rem; +} + +.input-group-lg > .form-select, +.input-group-sm > .form-select { + padding-right: 3rem; +} + +.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu), +.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu), +.input-group.has-validation > .dropdown-toggle:nth-last-child(n+4) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { + margin-left: -1px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } .valid-feedback { display: none; width: 100%; margin-top: 0.25rem; - font-size: 80%; - color: #28a745; + font-size: 0.875em; + color: #198754; } .valid-tooltip { position: absolute; top: 100%; - left: 0; z-index: 5; display: none; max-width: 100%; padding: 0.25rem 0.5rem; - margin-top: .1rem; + margin-top: 0.1rem; font-size: 0.875rem; - line-height: 1.5; color: #fff; - background-color: rgba(40, 167, 69, 0.9); + background-color: rgba(25, 135, 84, 0.9); border-radius: 0.25rem; } @@ -2249,17 +2741,16 @@ textarea.form-control { } .was-validated .form-control:valid, .form-control.is-valid { - border-color: #28a745; + border-color: #198754; padding-right: calc(1.5em + 0.75rem); - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } - .was-validated .form-control:valid:focus, .form-control.is-valid:focus { - border-color: #28a745; - box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); + border-color: #198754; + box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25); } .was-validated textarea.form-control:valid, textarea.form-control.is-valid { @@ -2267,76 +2758,65 @@ textarea.form-control { background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); } -.was-validated .custom-select:valid, .custom-select.is-valid { - border-color: #28a745; - padding-right: calc(0.75em + 2.3125rem); - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); +.was-validated .form-select:valid, .form-select.is-valid { + border-color: #198754; +} +.was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] { + padding-right: 4.125rem; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); + background-position: right 0.75rem center, center right 2.25rem; + background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); +} +.was-validated .form-select:valid:focus, .form-select.is-valid:focus { + border-color: #198754; + box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25); } -.was-validated .custom-select:valid:focus, .custom-select.is-valid:focus { - border-color: #28a745; - box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); +.was-validated .form-check-input:valid, .form-check-input.is-valid { + border-color: #198754; +} +.was-validated .form-check-input:valid:checked, .form-check-input.is-valid:checked { + background-color: #198754; +} +.was-validated .form-check-input:valid:focus, .form-check-input.is-valid:focus { + box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25); } - .was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label { - color: #28a745; + color: #198754; } -.was-validated .form-check-input:valid ~ .valid-feedback, -.was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback, -.form-check-input.is-valid ~ .valid-tooltip { - display: block; +.form-check-inline .form-check-input ~ .valid-feedback { + margin-left: 0.5em; } -.was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label { - color: #28a745; +.was-validated .input-group .form-control:valid, .input-group .form-control.is-valid, +.was-validated .input-group .form-select:valid, +.input-group .form-select.is-valid { + z-index: 1; } - -.was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before { - border-color: #28a745; -} - -.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before { - border-color: #34ce57; - background-color: #34ce57; -} - -.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before { - box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); -} - -.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before { - border-color: #28a745; -} - -.was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label { - border-color: #28a745; -} - -.was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label { - border-color: #28a745; - box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); +.was-validated .input-group .form-control:valid:focus, .input-group .form-control.is-valid:focus, +.was-validated .input-group .form-select:valid:focus, +.input-group .form-select.is-valid:focus { + z-index: 3; } .invalid-feedback { display: none; width: 100%; margin-top: 0.25rem; - font-size: 80%; + font-size: 0.875em; color: #dc3545; } .invalid-tooltip { position: absolute; top: 100%; - left: 0; z-index: 5; display: none; max-width: 100%; padding: 0.25rem 0.5rem; - margin-top: .1rem; + margin-top: 0.1rem; font-size: 0.875rem; - line-height: 1.5; color: #fff; background-color: rgba(220, 53, 69, 0.9); border-radius: 0.25rem; @@ -2352,15 +2832,14 @@ textarea.form-control { .was-validated .form-control:invalid, .form-control.is-invalid { border-color: #dc3545; padding-right: calc(1.5em + 0.75rem); - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e"); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } - .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus { border-color: #dc3545; - box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); + box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25); } .was-validated textarea.form-control:invalid, textarea.form-control.is-invalid { @@ -2368,215 +2847,112 @@ textarea.form-control { background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); } -.was-validated .custom-select:invalid, .custom-select.is-invalid { +.was-validated .form-select:invalid, .form-select.is-invalid { border-color: #dc3545; - padding-right: calc(0.75em + 2.3125rem); - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); +} +.was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] { + padding-right: 4.125rem; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e"); + background-position: right 0.75rem center, center right 2.25rem; + background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); +} +.was-validated .form-select:invalid:focus, .form-select.is-invalid:focus { + border-color: #dc3545; + box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25); } -.was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus { +.was-validated .form-check-input:invalid, .form-check-input.is-invalid { border-color: #dc3545; - box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); } - +.was-validated .form-check-input:invalid:checked, .form-check-input.is-invalid:checked { + background-color: #dc3545; +} +.was-validated .form-check-input:invalid:focus, .form-check-input.is-invalid:focus { + box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25); +} .was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label { color: #dc3545; } -.was-validated .form-check-input:invalid ~ .invalid-feedback, -.was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback, -.form-check-input.is-invalid ~ .invalid-tooltip { - display: block; +.form-check-inline .form-check-input ~ .invalid-feedback { + margin-left: 0.5em; } -.was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label { - color: #dc3545; +.was-validated .input-group .form-control:invalid, .input-group .form-control.is-invalid, +.was-validated .input-group .form-select:invalid, +.input-group .form-select.is-invalid { + z-index: 2; } - -.was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before { - border-color: #dc3545; -} - -.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before { - border-color: #e4606d; - background-color: #e4606d; -} - -.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before { - box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); -} - -.was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before { - border-color: #dc3545; -} - -.was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label { - border-color: #dc3545; -} - -.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label { - border-color: #dc3545; - box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); -} - -.form-inline { - display: -ms-flexbox; - display: flex; - -ms-flex-flow: row wrap; - flex-flow: row wrap; - -ms-flex-align: center; - align-items: center; -} - -.form-inline .form-check { - width: 100%; -} - -@media (min-width: 576px) { - .form-inline label { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - margin-bottom: 0; - } - .form-inline .form-group { - display: -ms-flexbox; - display: flex; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - -ms-flex-flow: row wrap; - flex-flow: row wrap; - -ms-flex-align: center; - align-items: center; - margin-bottom: 0; - } - .form-inline .form-control { - display: inline-block; - width: auto; - vertical-align: middle; - } - .form-inline .form-control-plaintext { - display: inline-block; - } - .form-inline .input-group, - .form-inline .custom-select { - width: auto; - } - .form-inline .form-check { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - width: auto; - padding-left: 0; - } - .form-inline .form-check-input { - position: relative; - -ms-flex-negative: 0; - flex-shrink: 0; - margin-top: 0; - margin-right: 0.25rem; - margin-left: 0; - } - .form-inline .custom-control { - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - } - .form-inline .custom-control-label { - margin-bottom: 0; - } +.was-validated .input-group .form-control:invalid:focus, .input-group .form-control.is-invalid:focus, +.was-validated .input-group .form-select:invalid:focus, +.input-group .form-select.is-invalid:focus { + z-index: 3; } .btn { display: inline-block; font-weight: 400; + line-height: 1.5; color: #212529; text-align: center; + text-decoration: none; vertical-align: middle; + cursor: pointer; -webkit-user-select: none; -moz-user-select: none; - -ms-user-select: none; user-select: none; background-color: transparent; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; - line-height: 1.5; border-radius: 0.25rem; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } - @media (prefers-reduced-motion: reduce) { .btn { transition: none; } } - .btn:hover { color: #212529; - text-decoration: none; } - -.btn:focus, .btn.focus { +.btn-check:focus + .btn, .btn:focus { outline: 0; - box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } - -.btn.disabled, .btn:disabled { - opacity: 0.65; -} - -.btn:not(:disabled):not(.disabled) { - cursor: pointer; -} - -a.btn.disabled, -fieldset:disabled a.btn { +.btn:disabled, .btn.disabled, fieldset:disabled .btn { pointer-events: none; + opacity: 0.65; } .btn-primary { color: #fff; - background-color: #007bff; - border-color: #007bff; + background-color: #0d6efd; + border-color: #0d6efd; } - .btn-primary:hover { color: #fff; - background-color: #0069d9; - border-color: #0062cc; + background-color: #0b5ed7; + border-color: #0a58ca; } - -.btn-primary:focus, .btn-primary.focus { +.btn-check:focus + .btn-primary, .btn-primary:focus { color: #fff; - background-color: #0069d9; - border-color: #0062cc; - box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); + background-color: #0b5ed7; + border-color: #0a58ca; + box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5); } - -.btn-primary.disabled, .btn-primary:disabled { +.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle { color: #fff; - background-color: #007bff; - border-color: #007bff; + background-color: #0a58ca; + border-color: #0a53be; } - -.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, -.show > .btn-primary.dropdown-toggle { +.btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus { + box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5); +} +.btn-primary:disabled, .btn-primary.disabled { color: #fff; - background-color: #0062cc; - border-color: #005cbf; -} - -.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, -.show > .btn-primary.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); + background-color: #0d6efd; + border-color: #0d6efd; } .btn-secondary { @@ -2584,575 +2960,443 @@ fieldset:disabled a.btn { background-color: #6c757d; border-color: #6c757d; } - .btn-secondary:hover { color: #fff; - background-color: #5a6268; - border-color: #545b62; + background-color: #5c636a; + border-color: #565e64; } - -.btn-secondary:focus, .btn-secondary.focus { +.btn-check:focus + .btn-secondary, .btn-secondary:focus { color: #fff; - background-color: #5a6268; - border-color: #545b62; - box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5); + background-color: #5c636a; + border-color: #565e64; + box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5); } - -.btn-secondary.disabled, .btn-secondary:disabled { +.btn-check:checked + .btn-secondary, .btn-check:active + .btn-secondary, .btn-secondary:active, .btn-secondary.active, .show > .btn-secondary.dropdown-toggle { + color: #fff; + background-color: #565e64; + border-color: #51585e; +} +.btn-check:checked + .btn-secondary:focus, .btn-check:active + .btn-secondary:focus, .btn-secondary:active:focus, .btn-secondary.active:focus, .show > .btn-secondary.dropdown-toggle:focus { + box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5); +} +.btn-secondary:disabled, .btn-secondary.disabled { color: #fff; background-color: #6c757d; border-color: #6c757d; } -.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, -.show > .btn-secondary.dropdown-toggle { - color: #fff; - background-color: #545b62; - border-color: #4e555b; -} - -.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus, -.show > .btn-secondary.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5); -} - .btn-success { color: #fff; - background-color: #28a745; - border-color: #28a745; + background-color: #198754; + border-color: #198754; } - .btn-success:hover { color: #fff; - background-color: #218838; - border-color: #1e7e34; + background-color: #157347; + border-color: #146c43; } - -.btn-success:focus, .btn-success.focus { +.btn-check:focus + .btn-success, .btn-success:focus { color: #fff; - background-color: #218838; - border-color: #1e7e34; - box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5); + background-color: #157347; + border-color: #146c43; + box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5); } - -.btn-success.disabled, .btn-success:disabled { +.btn-check:checked + .btn-success, .btn-check:active + .btn-success, .btn-success:active, .btn-success.active, .show > .btn-success.dropdown-toggle { color: #fff; - background-color: #28a745; - border-color: #28a745; + background-color: #146c43; + border-color: #13653f; } - -.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, -.show > .btn-success.dropdown-toggle { +.btn-check:checked + .btn-success:focus, .btn-check:active + .btn-success:focus, .btn-success:active:focus, .btn-success.active:focus, .show > .btn-success.dropdown-toggle:focus { + box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5); +} +.btn-success:disabled, .btn-success.disabled { color: #fff; - background-color: #1e7e34; - border-color: #1c7430; -} - -.btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus, -.show > .btn-success.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5); + background-color: #198754; + border-color: #198754; } .btn-info { - color: #fff; - background-color: #17a2b8; - border-color: #17a2b8; + color: #000; + background-color: #0dcaf0; + border-color: #0dcaf0; } - .btn-info:hover { - color: #fff; - background-color: #138496; - border-color: #117a8b; + color: #000; + background-color: #31d2f2; + border-color: #25cff2; } - -.btn-info:focus, .btn-info.focus { - color: #fff; - background-color: #138496; - border-color: #117a8b; - box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5); +.btn-check:focus + .btn-info, .btn-info:focus { + color: #000; + background-color: #31d2f2; + border-color: #25cff2; + box-shadow: 0 0 0 0.25rem rgba(11, 172, 204, 0.5); } - -.btn-info.disabled, .btn-info:disabled { - color: #fff; - background-color: #17a2b8; - border-color: #17a2b8; +.btn-check:checked + .btn-info, .btn-check:active + .btn-info, .btn-info:active, .btn-info.active, .show > .btn-info.dropdown-toggle { + color: #000; + background-color: #3dd5f3; + border-color: #25cff2; } - -.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, -.show > .btn-info.dropdown-toggle { - color: #fff; - background-color: #117a8b; - border-color: #10707f; +.btn-check:checked + .btn-info:focus, .btn-check:active + .btn-info:focus, .btn-info:active:focus, .btn-info.active:focus, .show > .btn-info.dropdown-toggle:focus { + box-shadow: 0 0 0 0.25rem rgba(11, 172, 204, 0.5); } - -.btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus, -.show > .btn-info.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5); +.btn-info:disabled, .btn-info.disabled { + color: #000; + background-color: #0dcaf0; + border-color: #0dcaf0; } .btn-warning { - color: #212529; + color: #000; background-color: #ffc107; border-color: #ffc107; } - .btn-warning:hover { - color: #212529; - background-color: #e0a800; - border-color: #d39e00; + color: #000; + background-color: #ffca2c; + border-color: #ffc720; } - -.btn-warning:focus, .btn-warning.focus { - color: #212529; - background-color: #e0a800; - border-color: #d39e00; - box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5); +.btn-check:focus + .btn-warning, .btn-warning:focus { + color: #000; + background-color: #ffca2c; + border-color: #ffc720; + box-shadow: 0 0 0 0.25rem rgba(217, 164, 6, 0.5); } - -.btn-warning.disabled, .btn-warning:disabled { - color: #212529; +.btn-check:checked + .btn-warning, .btn-check:active + .btn-warning, .btn-warning:active, .btn-warning.active, .show > .btn-warning.dropdown-toggle { + color: #000; + background-color: #ffcd39; + border-color: #ffc720; +} +.btn-check:checked + .btn-warning:focus, .btn-check:active + .btn-warning:focus, .btn-warning:active:focus, .btn-warning.active:focus, .show > .btn-warning.dropdown-toggle:focus { + box-shadow: 0 0 0 0.25rem rgba(217, 164, 6, 0.5); +} +.btn-warning:disabled, .btn-warning.disabled { + color: #000; background-color: #ffc107; border-color: #ffc107; } -.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, -.show > .btn-warning.dropdown-toggle { - color: #212529; - background-color: #d39e00; - border-color: #c69500; -} - -.btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus, -.show > .btn-warning.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5); -} - .btn-danger { color: #fff; background-color: #dc3545; border-color: #dc3545; } - .btn-danger:hover { color: #fff; - background-color: #c82333; - border-color: #bd2130; + background-color: #bb2d3b; + border-color: #b02a37; } - -.btn-danger:focus, .btn-danger.focus { +.btn-check:focus + .btn-danger, .btn-danger:focus { color: #fff; - background-color: #c82333; - border-color: #bd2130; - box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5); + background-color: #bb2d3b; + border-color: #b02a37; + box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5); } - -.btn-danger.disabled, .btn-danger:disabled { +.btn-check:checked + .btn-danger, .btn-check:active + .btn-danger, .btn-danger:active, .btn-danger.active, .show > .btn-danger.dropdown-toggle { + color: #fff; + background-color: #b02a37; + border-color: #a52834; +} +.btn-check:checked + .btn-danger:focus, .btn-check:active + .btn-danger:focus, .btn-danger:active:focus, .btn-danger.active:focus, .show > .btn-danger.dropdown-toggle:focus { + box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5); +} +.btn-danger:disabled, .btn-danger.disabled { color: #fff; background-color: #dc3545; border-color: #dc3545; } -.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, -.show > .btn-danger.dropdown-toggle { - color: #fff; - background-color: #bd2130; - border-color: #b21f2d; -} - -.btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus, -.show > .btn-danger.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5); -} - .btn-light { - color: #212529; + color: #000; background-color: #f8f9fa; border-color: #f8f9fa; } - .btn-light:hover { - color: #212529; - background-color: #e2e6ea; - border-color: #dae0e5; + color: #000; + background-color: #f9fafb; + border-color: #f9fafb; } - -.btn-light:focus, .btn-light.focus { - color: #212529; - background-color: #e2e6ea; - border-color: #dae0e5; - box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5); +.btn-check:focus + .btn-light, .btn-light:focus { + color: #000; + background-color: #f9fafb; + border-color: #f9fafb; + box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5); } - -.btn-light.disabled, .btn-light:disabled { - color: #212529; +.btn-check:checked + .btn-light, .btn-check:active + .btn-light, .btn-light:active, .btn-light.active, .show > .btn-light.dropdown-toggle { + color: #000; + background-color: #f9fafb; + border-color: #f9fafb; +} +.btn-check:checked + .btn-light:focus, .btn-check:active + .btn-light:focus, .btn-light:active:focus, .btn-light.active:focus, .show > .btn-light.dropdown-toggle:focus { + box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5); +} +.btn-light:disabled, .btn-light.disabled { + color: #000; background-color: #f8f9fa; border-color: #f8f9fa; } -.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active, -.show > .btn-light.dropdown-toggle { - color: #212529; - background-color: #dae0e5; - border-color: #d3d9df; -} - -.btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus, -.show > .btn-light.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5); -} - .btn-dark { color: #fff; - background-color: #343a40; - border-color: #343a40; + background-color: #212529; + border-color: #212529; } - .btn-dark:hover { color: #fff; - background-color: #23272b; - border-color: #1d2124; + background-color: #1c1f23; + border-color: #1a1e21; } - -.btn-dark:focus, .btn-dark.focus { +.btn-check:focus + .btn-dark, .btn-dark:focus { color: #fff; - background-color: #23272b; - border-color: #1d2124; - box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5); + background-color: #1c1f23; + border-color: #1a1e21; + box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); } - -.btn-dark.disabled, .btn-dark:disabled { +.btn-check:checked + .btn-dark, .btn-check:active + .btn-dark, .btn-dark:active, .btn-dark.active, .show > .btn-dark.dropdown-toggle { color: #fff; - background-color: #343a40; - border-color: #343a40; + background-color: #1a1e21; + border-color: #191c1f; } - -.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, -.show > .btn-dark.dropdown-toggle { +.btn-check:checked + .btn-dark:focus, .btn-check:active + .btn-dark:focus, .btn-dark:active:focus, .btn-dark.active:focus, .show > .btn-dark.dropdown-toggle:focus { + box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); +} +.btn-dark:disabled, .btn-dark.disabled { color: #fff; - background-color: #1d2124; - border-color: #171a1d; -} - -.btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus, -.show > .btn-dark.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5); + background-color: #212529; + border-color: #212529; } .btn-outline-primary { - color: #007bff; - border-color: #007bff; + color: #0d6efd; + border-color: #0d6efd; } - .btn-outline-primary:hover { color: #fff; - background-color: #007bff; - border-color: #007bff; + background-color: #0d6efd; + border-color: #0d6efd; } - -.btn-outline-primary:focus, .btn-outline-primary.focus { - box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); +.btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus { + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5); } - -.btn-outline-primary.disabled, .btn-outline-primary:disabled { - color: #007bff; - background-color: transparent; -} - -.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, -.show > .btn-outline-primary.dropdown-toggle { +.btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show { color: #fff; - background-color: #007bff; - border-color: #007bff; + background-color: #0d6efd; + border-color: #0d6efd; } - -.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, -.show > .btn-outline-primary.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); +.btn-check:checked + .btn-outline-primary:focus, .btn-check:active + .btn-outline-primary:focus, .btn-outline-primary:active:focus, .btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus { + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5); +} +.btn-outline-primary:disabled, .btn-outline-primary.disabled { + color: #0d6efd; + background-color: transparent; } .btn-outline-secondary { color: #6c757d; border-color: #6c757d; } - .btn-outline-secondary:hover { color: #fff; background-color: #6c757d; border-color: #6c757d; } - -.btn-outline-secondary:focus, .btn-outline-secondary.focus { - box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); +.btn-check:focus + .btn-outline-secondary, .btn-outline-secondary:focus { + box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5); } - -.btn-outline-secondary.disabled, .btn-outline-secondary:disabled { - color: #6c757d; - background-color: transparent; -} - -.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, -.show > .btn-outline-secondary.dropdown-toggle { +.btn-check:checked + .btn-outline-secondary, .btn-check:active + .btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show { color: #fff; background-color: #6c757d; border-color: #6c757d; } - -.btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus, -.show > .btn-outline-secondary.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); +.btn-check:checked + .btn-outline-secondary:focus, .btn-check:active + .btn-outline-secondary:focus, .btn-outline-secondary:active:focus, .btn-outline-secondary.active:focus, .btn-outline-secondary.dropdown-toggle.show:focus { + box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5); +} +.btn-outline-secondary:disabled, .btn-outline-secondary.disabled { + color: #6c757d; + background-color: transparent; } .btn-outline-success { - color: #28a745; - border-color: #28a745; + color: #198754; + border-color: #198754; } - .btn-outline-success:hover { color: #fff; - background-color: #28a745; - border-color: #28a745; + background-color: #198754; + border-color: #198754; } - -.btn-outline-success:focus, .btn-outline-success.focus { - box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); +.btn-check:focus + .btn-outline-success, .btn-outline-success:focus { + box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5); } - -.btn-outline-success.disabled, .btn-outline-success:disabled { - color: #28a745; - background-color: transparent; -} - -.btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active, -.show > .btn-outline-success.dropdown-toggle { +.btn-check:checked + .btn-outline-success, .btn-check:active + .btn-outline-success, .btn-outline-success:active, .btn-outline-success.active, .btn-outline-success.dropdown-toggle.show { color: #fff; - background-color: #28a745; - border-color: #28a745; + background-color: #198754; + border-color: #198754; } - -.btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus, -.show > .btn-outline-success.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); +.btn-check:checked + .btn-outline-success:focus, .btn-check:active + .btn-outline-success:focus, .btn-outline-success:active:focus, .btn-outline-success.active:focus, .btn-outline-success.dropdown-toggle.show:focus { + box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5); +} +.btn-outline-success:disabled, .btn-outline-success.disabled { + color: #198754; + background-color: transparent; } .btn-outline-info { - color: #17a2b8; - border-color: #17a2b8; + color: #0dcaf0; + border-color: #0dcaf0; } - .btn-outline-info:hover { - color: #fff; - background-color: #17a2b8; - border-color: #17a2b8; + color: #000; + background-color: #0dcaf0; + border-color: #0dcaf0; } - -.btn-outline-info:focus, .btn-outline-info.focus { - box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5); +.btn-check:focus + .btn-outline-info, .btn-outline-info:focus { + box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.5); } - -.btn-outline-info.disabled, .btn-outline-info:disabled { - color: #17a2b8; +.btn-check:checked + .btn-outline-info, .btn-check:active + .btn-outline-info, .btn-outline-info:active, .btn-outline-info.active, .btn-outline-info.dropdown-toggle.show { + color: #000; + background-color: #0dcaf0; + border-color: #0dcaf0; +} +.btn-check:checked + .btn-outline-info:focus, .btn-check:active + .btn-outline-info:focus, .btn-outline-info:active:focus, .btn-outline-info.active:focus, .btn-outline-info.dropdown-toggle.show:focus { + box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.5); +} +.btn-outline-info:disabled, .btn-outline-info.disabled { + color: #0dcaf0; background-color: transparent; } -.btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active, -.show > .btn-outline-info.dropdown-toggle { - color: #fff; - background-color: #17a2b8; - border-color: #17a2b8; -} - -.btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus, -.show > .btn-outline-info.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5); -} - .btn-outline-warning { color: #ffc107; border-color: #ffc107; } - .btn-outline-warning:hover { - color: #212529; + color: #000; background-color: #ffc107; border-color: #ffc107; } - -.btn-outline-warning:focus, .btn-outline-warning.focus { - box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); +.btn-check:focus + .btn-outline-warning, .btn-outline-warning:focus { + box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5); } - -.btn-outline-warning.disabled, .btn-outline-warning:disabled { +.btn-check:checked + .btn-outline-warning, .btn-check:active + .btn-outline-warning, .btn-outline-warning:active, .btn-outline-warning.active, .btn-outline-warning.dropdown-toggle.show { + color: #000; + background-color: #ffc107; + border-color: #ffc107; +} +.btn-check:checked + .btn-outline-warning:focus, .btn-check:active + .btn-outline-warning:focus, .btn-outline-warning:active:focus, .btn-outline-warning.active:focus, .btn-outline-warning.dropdown-toggle.show:focus { + box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5); +} +.btn-outline-warning:disabled, .btn-outline-warning.disabled { color: #ffc107; background-color: transparent; } -.btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active, -.show > .btn-outline-warning.dropdown-toggle { - color: #212529; - background-color: #ffc107; - border-color: #ffc107; -} - -.btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus, -.show > .btn-outline-warning.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); -} - .btn-outline-danger { color: #dc3545; border-color: #dc3545; } - .btn-outline-danger:hover { color: #fff; background-color: #dc3545; border-color: #dc3545; } - -.btn-outline-danger:focus, .btn-outline-danger.focus { - box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5); +.btn-check:focus + .btn-outline-danger, .btn-outline-danger:focus { + box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5); } - -.btn-outline-danger.disabled, .btn-outline-danger:disabled { - color: #dc3545; - background-color: transparent; -} - -.btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active, -.show > .btn-outline-danger.dropdown-toggle { +.btn-check:checked + .btn-outline-danger, .btn-check:active + .btn-outline-danger, .btn-outline-danger:active, .btn-outline-danger.active, .btn-outline-danger.dropdown-toggle.show { color: #fff; background-color: #dc3545; border-color: #dc3545; } - -.btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus, -.show > .btn-outline-danger.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5); +.btn-check:checked + .btn-outline-danger:focus, .btn-check:active + .btn-outline-danger:focus, .btn-outline-danger:active:focus, .btn-outline-danger.active:focus, .btn-outline-danger.dropdown-toggle.show:focus { + box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5); +} +.btn-outline-danger:disabled, .btn-outline-danger.disabled { + color: #dc3545; + background-color: transparent; } .btn-outline-light { color: #f8f9fa; border-color: #f8f9fa; } - .btn-outline-light:hover { - color: #212529; + color: #000; background-color: #f8f9fa; border-color: #f8f9fa; } - -.btn-outline-light:focus, .btn-outline-light.focus { - box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5); +.btn-check:focus + .btn-outline-light, .btn-outline-light:focus { + box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5); } - -.btn-outline-light.disabled, .btn-outline-light:disabled { +.btn-check:checked + .btn-outline-light, .btn-check:active + .btn-outline-light, .btn-outline-light:active, .btn-outline-light.active, .btn-outline-light.dropdown-toggle.show { + color: #000; + background-color: #f8f9fa; + border-color: #f8f9fa; +} +.btn-check:checked + .btn-outline-light:focus, .btn-check:active + .btn-outline-light:focus, .btn-outline-light:active:focus, .btn-outline-light.active:focus, .btn-outline-light.dropdown-toggle.show:focus { + box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5); +} +.btn-outline-light:disabled, .btn-outline-light.disabled { color: #f8f9fa; background-color: transparent; } -.btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active, -.show > .btn-outline-light.dropdown-toggle { - color: #212529; - background-color: #f8f9fa; - border-color: #f8f9fa; -} - -.btn-outline-light:not(:disabled):not(.disabled):active:focus, .btn-outline-light:not(:disabled):not(.disabled).active:focus, -.show > .btn-outline-light.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5); -} - .btn-outline-dark { - color: #343a40; - border-color: #343a40; + color: #212529; + border-color: #212529; } - .btn-outline-dark:hover { color: #fff; - background-color: #343a40; - border-color: #343a40; + background-color: #212529; + border-color: #212529; } - -.btn-outline-dark:focus, .btn-outline-dark.focus { - box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); +.btn-check:focus + .btn-outline-dark, .btn-outline-dark:focus { + box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5); } - -.btn-outline-dark.disabled, .btn-outline-dark:disabled { - color: #343a40; - background-color: transparent; -} - -.btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active, -.show > .btn-outline-dark.dropdown-toggle { +.btn-check:checked + .btn-outline-dark, .btn-check:active + .btn-outline-dark, .btn-outline-dark:active, .btn-outline-dark.active, .btn-outline-dark.dropdown-toggle.show { color: #fff; - background-color: #343a40; - border-color: #343a40; + background-color: #212529; + border-color: #212529; } - -.btn-outline-dark:not(:disabled):not(.disabled):active:focus, .btn-outline-dark:not(:disabled):not(.disabled).active:focus, -.show > .btn-outline-dark.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); +.btn-check:checked + .btn-outline-dark:focus, .btn-check:active + .btn-outline-dark:focus, .btn-outline-dark:active:focus, .btn-outline-dark.active:focus, .btn-outline-dark.dropdown-toggle.show:focus { + box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5); +} +.btn-outline-dark:disabled, .btn-outline-dark.disabled { + color: #212529; + background-color: transparent; } .btn-link { font-weight: 400; - color: #007bff; - text-decoration: none; + color: #0d6efd; + text-decoration: underline; } - .btn-link:hover { - color: #0056b3; - text-decoration: underline; + color: #0a58ca; } - -.btn-link:focus, .btn-link.focus { - text-decoration: underline; -} - .btn-link:disabled, .btn-link.disabled { color: #6c757d; - pointer-events: none; } .btn-lg, .btn-group-lg > .btn { padding: 0.5rem 1rem; font-size: 1.25rem; - line-height: 1.5; border-radius: 0.3rem; } .btn-sm, .btn-group-sm > .btn { padding: 0.25rem 0.5rem; font-size: 0.875rem; - line-height: 1.5; border-radius: 0.2rem; } -.btn-block { - display: block; - width: 100%; -} - -.btn-block + .btn-block { - margin-top: 0.5rem; -} - -input[type="submit"].btn-block, -input[type="reset"].btn-block, -input[type="button"].btn-block { - width: 100%; -} - .fade { transition: opacity 0.15s linear; } - @media (prefers-reduced-motion: reduce) { .fade { transition: none; } } - .fade:not(.show) { opacity: 0; } @@ -3162,12 +3406,10 @@ input[type="button"].btn-block { } .collapsing { - position: relative; height: 0; overflow: hidden; transition: height 0.35s ease; } - @media (prefers-reduced-motion: reduce) { .collapsing { transition: none; @@ -3175,16 +3417,15 @@ input[type="button"].btn-block { } .dropup, -.dropright, +.dropend, .dropdown, -.dropleft { +.dropstart { position: relative; } .dropdown-toggle { white-space: nowrap; } - .dropdown-toggle::after { display: inline-block; margin-left: 0.255em; @@ -3195,21 +3436,17 @@ input[type="button"].btn-block { border-bottom: 0; border-left: 0.3em solid transparent; } - .dropdown-toggle:empty::after { margin-left: 0; } .dropdown-menu { position: absolute; - top: 100%; - left: 0; z-index: 1000; display: none; - float: left; min-width: 10rem; padding: 0.5rem 0; - margin: 0.125rem 0 0; + margin: 0; font-size: 1rem; color: #212529; text-align: left; @@ -3219,68 +3456,119 @@ input[type="button"].btn-block { border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0.25rem; } - -.dropdown-menu-left { - right: auto; +.dropdown-menu[data-bs-popper] { + top: 100%; left: 0; + margin-top: 0.125rem; } -.dropdown-menu-right { - right: 0; - left: auto; +.dropdown-menu-start { + --bs-position: start; +} +.dropdown-menu-start[data-bs-popper] { + right: auto /* rtl:ignore */; + left: 0 /* rtl:ignore */; +} + +.dropdown-menu-end { + --bs-position: end; +} +.dropdown-menu-end[data-bs-popper] { + right: 0 /* rtl:ignore */; + left: auto /* rtl:ignore */; } @media (min-width: 576px) { - .dropdown-menu-sm-left { - right: auto; - left: 0; + .dropdown-menu-sm-start { + --bs-position: start; } - .dropdown-menu-sm-right { - right: 0; - left: auto; + .dropdown-menu-sm-start[data-bs-popper] { + right: auto /* rtl:ignore */; + left: 0 /* rtl:ignore */; + } + + .dropdown-menu-sm-end { + --bs-position: end; + } + .dropdown-menu-sm-end[data-bs-popper] { + right: 0 /* rtl:ignore */; + left: auto /* rtl:ignore */; } } - @media (min-width: 768px) { - .dropdown-menu-md-left { - right: auto; - left: 0; + .dropdown-menu-md-start { + --bs-position: start; } - .dropdown-menu-md-right { - right: 0; - left: auto; + .dropdown-menu-md-start[data-bs-popper] { + right: auto /* rtl:ignore */; + left: 0 /* rtl:ignore */; + } + + .dropdown-menu-md-end { + --bs-position: end; + } + .dropdown-menu-md-end[data-bs-popper] { + right: 0 /* rtl:ignore */; + left: auto /* rtl:ignore */; } } - @media (min-width: 992px) { - .dropdown-menu-lg-left { - right: auto; - left: 0; + .dropdown-menu-lg-start { + --bs-position: start; } - .dropdown-menu-lg-right { - right: 0; - left: auto; + .dropdown-menu-lg-start[data-bs-popper] { + right: auto /* rtl:ignore */; + left: 0 /* rtl:ignore */; + } + + .dropdown-menu-lg-end { + --bs-position: end; + } + .dropdown-menu-lg-end[data-bs-popper] { + right: 0 /* rtl:ignore */; + left: auto /* rtl:ignore */; } } - @media (min-width: 1200px) { - .dropdown-menu-xl-left { - right: auto; - left: 0; + .dropdown-menu-xl-start { + --bs-position: start; } - .dropdown-menu-xl-right { - right: 0; - left: auto; + .dropdown-menu-xl-start[data-bs-popper] { + right: auto /* rtl:ignore */; + left: 0 /* rtl:ignore */; + } + + .dropdown-menu-xl-end { + --bs-position: end; + } + .dropdown-menu-xl-end[data-bs-popper] { + right: 0 /* rtl:ignore */; + left: auto /* rtl:ignore */; } } +@media (min-width: 1400px) { + .dropdown-menu-xxl-start { + --bs-position: start; + } + .dropdown-menu-xxl-start[data-bs-popper] { + right: auto /* rtl:ignore */; + left: 0 /* rtl:ignore */; + } -.dropup .dropdown-menu { + .dropdown-menu-xxl-end { + --bs-position: end; + } + .dropdown-menu-xxl-end[data-bs-popper] { + right: 0 /* rtl:ignore */; + left: auto /* rtl:ignore */; + } +} +.dropup .dropdown-menu[data-bs-popper] { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 0.125rem; } - .dropup .dropdown-toggle::after { display: inline-block; margin-left: 0.255em; @@ -3291,20 +3579,18 @@ input[type="button"].btn-block { border-bottom: 0.3em solid; border-left: 0.3em solid transparent; } - .dropup .dropdown-toggle:empty::after { margin-left: 0; } -.dropright .dropdown-menu { +.dropend .dropdown-menu[data-bs-popper] { top: 0; right: auto; left: 100%; margin-top: 0; margin-left: 0.125rem; } - -.dropright .dropdown-toggle::after { +.dropend .dropdown-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; @@ -3314,35 +3600,30 @@ input[type="button"].btn-block { border-bottom: 0.3em solid transparent; border-left: 0.3em solid; } - -.dropright .dropdown-toggle:empty::after { +.dropend .dropdown-toggle:empty::after { margin-left: 0; } - -.dropright .dropdown-toggle::after { +.dropend .dropdown-toggle::after { vertical-align: 0; } -.dropleft .dropdown-menu { +.dropstart .dropdown-menu[data-bs-popper] { top: 0; right: 100%; left: auto; margin-top: 0; margin-right: 0.125rem; } - -.dropleft .dropdown-toggle::after { +.dropstart .dropdown-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; } - -.dropleft .dropdown-toggle::after { +.dropstart .dropdown-toggle::after { display: none; } - -.dropleft .dropdown-toggle::before { +.dropstart .dropdown-toggle::before { display: inline-block; margin-right: 0.255em; vertical-align: 0.255em; @@ -3351,54 +3632,44 @@ input[type="button"].btn-block { border-right: 0.3em solid; border-bottom: 0.3em solid transparent; } - -.dropleft .dropdown-toggle:empty::after { +.dropstart .dropdown-toggle:empty::after { margin-left: 0; } - -.dropleft .dropdown-toggle::before { +.dropstart .dropdown-toggle::before { vertical-align: 0; } -.dropdown-menu[x-placement^="top"], .dropdown-menu[x-placement^="right"], .dropdown-menu[x-placement^="bottom"], .dropdown-menu[x-placement^="left"] { - right: auto; - bottom: auto; -} - .dropdown-divider { height: 0; margin: 0.5rem 0; overflow: hidden; - border-top: 1px solid #e9ecef; + border-top: 1px solid rgba(0, 0, 0, 0.15); } .dropdown-item { display: block; width: 100%; - padding: 0.25rem 1.5rem; + padding: 0.25rem 1rem; clear: both; font-weight: 400; color: #212529; text-align: inherit; + text-decoration: none; white-space: nowrap; background-color: transparent; border: 0; } - .dropdown-item:hover, .dropdown-item:focus { - color: #16181b; - text-decoration: none; - background-color: #f8f9fa; + color: #1e2125; + background-color: #e9ecef; } - .dropdown-item.active, .dropdown-item:active { color: #fff; text-decoration: none; - background-color: #007bff; + background-color: #0d6efd; } - .dropdown-item.disabled, .dropdown-item:disabled { - color: #6c757d; + color: #adb5bd; pointer-events: none; background-color: transparent; } @@ -3409,7 +3680,7 @@ input[type="button"].btn-block { .dropdown-header { display: block; - padding: 0.5rem 1.5rem; + padding: 0.5rem 1rem; margin-bottom: 0; font-size: 0.875rem; color: #6c757d; @@ -3418,31 +3689,59 @@ input[type="button"].btn-block { .dropdown-item-text { display: block; - padding: 0.25rem 1.5rem; + padding: 0.25rem 1rem; color: #212529; } +.dropdown-menu-dark { + color: #dee2e6; + background-color: #343a40; + border-color: rgba(0, 0, 0, 0.15); +} +.dropdown-menu-dark .dropdown-item { + color: #dee2e6; +} +.dropdown-menu-dark .dropdown-item:hover, .dropdown-menu-dark .dropdown-item:focus { + color: #fff; + background-color: rgba(255, 255, 255, 0.15); +} +.dropdown-menu-dark .dropdown-item.active, .dropdown-menu-dark .dropdown-item:active { + color: #fff; + background-color: #0d6efd; +} +.dropdown-menu-dark .dropdown-item.disabled, .dropdown-menu-dark .dropdown-item:disabled { + color: #adb5bd; +} +.dropdown-menu-dark .dropdown-divider { + border-color: rgba(0, 0, 0, 0.15); +} +.dropdown-menu-dark .dropdown-item-text { + color: #dee2e6; +} +.dropdown-menu-dark .dropdown-header { + color: #adb5bd; +} + .btn-group, .btn-group-vertical { position: relative; - display: -ms-inline-flexbox; display: inline-flex; vertical-align: middle; } - .btn-group > .btn, .btn-group-vertical > .btn { position: relative; - -ms-flex: 1 1 auto; flex: 1 1 auto; } - +.btn-group > .btn-check:checked + .btn, +.btn-group > .btn-check:focus + .btn, .btn-group > .btn:hover, -.btn-group-vertical > .btn:hover { - z-index: 1; -} - -.btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active, +.btn-group > .btn:focus, +.btn-group > .btn:active, +.btn-group > .btn.active, +.btn-group-vertical > .btn-check:checked + .btn, +.btn-group-vertical > .btn-check:focus + .btn, +.btn-group-vertical > .btn:hover, .btn-group-vertical > .btn:focus, .btn-group-vertical > .btn:active, .btn-group-vertical > .btn.active { @@ -3450,14 +3749,10 @@ input[type="button"].btn-block { } .btn-toolbar { - display: -ms-flexbox; display: flex; - -ms-flex-wrap: wrap; flex-wrap: wrap; - -ms-flex-pack: start; justify-content: flex-start; } - .btn-toolbar .input-group { width: auto; } @@ -3466,14 +3761,13 @@ input[type="button"].btn-block { .btn-group > .btn-group:not(:first-child) { margin-left: -1px; } - .btn-group > .btn:not(:last-child):not(.dropdown-toggle), .btn-group > .btn-group:not(:last-child) > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; } - -.btn-group > .btn:not(:first-child), +.btn-group > .btn:nth-child(n+3), +.btn-group > :not(.btn-check) + .btn, .btn-group > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; @@ -3483,14 +3777,10 @@ input[type="button"].btn-block { padding-right: 0.5625rem; padding-left: 0.5625rem; } - -.dropdown-toggle-split::after, -.dropup .dropdown-toggle-split::after, -.dropright .dropdown-toggle-split::after { +.dropdown-toggle-split::after, .dropup .dropdown-toggle-split::after, .dropend .dropdown-toggle-split::after { margin-left: 0; } - -.dropleft .dropdown-toggle-split::before { +.dropstart .dropdown-toggle-split::before { margin-right: 0; } @@ -3505,719 +3795,31 @@ input[type="button"].btn-block { } .btn-group-vertical { - -ms-flex-direction: column; flex-direction: column; - -ms-flex-align: start; align-items: flex-start; - -ms-flex-pack: center; justify-content: center; } - .btn-group-vertical > .btn, .btn-group-vertical > .btn-group { width: 100%; } - .btn-group-vertical > .btn:not(:first-child), .btn-group-vertical > .btn-group:not(:first-child) { margin-top: -1px; } - .btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle), .btn-group-vertical > .btn-group:not(:last-child) > .btn { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } - -.btn-group-vertical > .btn:not(:first-child), +.btn-group-vertical > .btn ~ .btn, .btn-group-vertical > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-top-right-radius: 0; } -.btn-group-toggle > .btn, -.btn-group-toggle > .btn-group > .btn { - margin-bottom: 0; -} - -.btn-group-toggle > .btn input[type="radio"], -.btn-group-toggle > .btn input[type="checkbox"], -.btn-group-toggle > .btn-group > .btn input[type="radio"], -.btn-group-toggle > .btn-group > .btn input[type="checkbox"] { - position: absolute; - clip: rect(0, 0, 0, 0); - pointer-events: none; -} - -.input-group { - position: relative; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -ms-flex-align: stretch; - align-items: stretch; - width: 100%; -} - -.input-group > .form-control, -.input-group > .form-control-plaintext, -.input-group > .custom-select, -.input-group > .custom-file { - position: relative; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - width: 1%; - min-width: 0; - margin-bottom: 0; -} - -.input-group > .form-control + .form-control, -.input-group > .form-control + .custom-select, -.input-group > .form-control + .custom-file, -.input-group > .form-control-plaintext + .form-control, -.input-group > .form-control-plaintext + .custom-select, -.input-group > .form-control-plaintext + .custom-file, -.input-group > .custom-select + .form-control, -.input-group > .custom-select + .custom-select, -.input-group > .custom-select + .custom-file, -.input-group > .custom-file + .form-control, -.input-group > .custom-file + .custom-select, -.input-group > .custom-file + .custom-file { - margin-left: -1px; -} - -.input-group > .form-control:focus, -.input-group > .custom-select:focus, -.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label { - z-index: 3; -} - -.input-group > .custom-file .custom-file-input:focus { - z-index: 4; -} - -.input-group > .form-control:not(:last-child), -.input-group > .custom-select:not(:last-child) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.input-group > .form-control:not(:first-child), -.input-group > .custom-select:not(:first-child) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -.input-group > .custom-file { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; -} - -.input-group > .custom-file:not(:last-child) .custom-file-label, -.input-group > .custom-file:not(:last-child) .custom-file-label::after { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.input-group > .custom-file:not(:first-child) .custom-file-label { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -.input-group-prepend, -.input-group-append { - display: -ms-flexbox; - display: flex; -} - -.input-group-prepend .btn, -.input-group-append .btn { - position: relative; - z-index: 2; -} - -.input-group-prepend .btn:focus, -.input-group-append .btn:focus { - z-index: 3; -} - -.input-group-prepend .btn + .btn, -.input-group-prepend .btn + .input-group-text, -.input-group-prepend .input-group-text + .input-group-text, -.input-group-prepend .input-group-text + .btn, -.input-group-append .btn + .btn, -.input-group-append .btn + .input-group-text, -.input-group-append .input-group-text + .input-group-text, -.input-group-append .input-group-text + .btn { - margin-left: -1px; -} - -.input-group-prepend { - margin-right: -1px; -} - -.input-group-append { - margin-left: -1px; -} - -.input-group-text { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - padding: 0.375rem 0.75rem; - margin-bottom: 0; - font-size: 1rem; - font-weight: 400; - line-height: 1.5; - color: #495057; - text-align: center; - white-space: nowrap; - background-color: #e9ecef; - border: 1px solid #ced4da; - border-radius: 0.25rem; -} - -.input-group-text input[type="radio"], -.input-group-text input[type="checkbox"] { - margin-top: 0; -} - -.input-group-lg > .form-control:not(textarea), -.input-group-lg > .custom-select { - height: calc(1.5em + 1rem + 2px); -} - -.input-group-lg > .form-control, -.input-group-lg > .custom-select, -.input-group-lg > .input-group-prepend > .input-group-text, -.input-group-lg > .input-group-append > .input-group-text, -.input-group-lg > .input-group-prepend > .btn, -.input-group-lg > .input-group-append > .btn { - padding: 0.5rem 1rem; - font-size: 1.25rem; - line-height: 1.5; - border-radius: 0.3rem; -} - -.input-group-sm > .form-control:not(textarea), -.input-group-sm > .custom-select { - height: calc(1.5em + 0.5rem + 2px); -} - -.input-group-sm > .form-control, -.input-group-sm > .custom-select, -.input-group-sm > .input-group-prepend > .input-group-text, -.input-group-sm > .input-group-append > .input-group-text, -.input-group-sm > .input-group-prepend > .btn, -.input-group-sm > .input-group-append > .btn { - padding: 0.25rem 0.5rem; - font-size: 0.875rem; - line-height: 1.5; - border-radius: 0.2rem; -} - -.input-group-lg > .custom-select, -.input-group-sm > .custom-select { - padding-right: 1.75rem; -} - -.input-group > .input-group-prepend > .btn, -.input-group > .input-group-prepend > .input-group-text, -.input-group > .input-group-append:not(:last-child) > .btn, -.input-group > .input-group-append:not(:last-child) > .input-group-text, -.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), -.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.input-group > .input-group-append > .btn, -.input-group > .input-group-append > .input-group-text, -.input-group > .input-group-prepend:not(:first-child) > .btn, -.input-group > .input-group-prepend:not(:first-child) > .input-group-text, -.input-group > .input-group-prepend:first-child > .btn:not(:first-child), -.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -.custom-control { - position: relative; - z-index: 1; - display: block; - min-height: 1.5rem; - padding-left: 1.5rem; - -webkit-print-color-adjust: exact; - color-adjust: exact; -} - -.custom-control-inline { - display: -ms-inline-flexbox; - display: inline-flex; - margin-right: 1rem; -} - -.custom-control-input { - position: absolute; - left: 0; - z-index: -1; - width: 1rem; - height: 1.25rem; - opacity: 0; -} - -.custom-control-input:checked ~ .custom-control-label::before { - color: #fff; - border-color: #007bff; - background-color: #007bff; -} - -.custom-control-input:focus ~ .custom-control-label::before { - box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); -} - -.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { - border-color: #80bdff; -} - -.custom-control-input:not(:disabled):active ~ .custom-control-label::before { - color: #fff; - background-color: #b3d7ff; - border-color: #b3d7ff; -} - -.custom-control-input[disabled] ~ .custom-control-label, .custom-control-input:disabled ~ .custom-control-label { - color: #6c757d; -} - -.custom-control-input[disabled] ~ .custom-control-label::before, .custom-control-input:disabled ~ .custom-control-label::before { - background-color: #e9ecef; -} - -.custom-control-label { - position: relative; - margin-bottom: 0; - vertical-align: top; -} - -.custom-control-label::before { - position: absolute; - top: 0.25rem; - left: -1.5rem; - display: block; - width: 1rem; - height: 1rem; - pointer-events: none; - content: ""; - background-color: #fff; - border: #adb5bd solid 1px; -} - -.custom-control-label::after { - position: absolute; - top: 0.25rem; - left: -1.5rem; - display: block; - width: 1rem; - height: 1rem; - content: ""; - background: no-repeat 50% / 50% 50%; -} - -.custom-checkbox .custom-control-label::before { - border-radius: 0.25rem; -} - -.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e"); -} - -.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { - border-color: #007bff; - background-color: #007bff; -} - -.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e"); -} - -.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before { - background-color: rgba(0, 123, 255, 0.5); -} - -.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before { - background-color: rgba(0, 123, 255, 0.5); -} - -.custom-radio .custom-control-label::before { - border-radius: 50%; -} - -.custom-radio .custom-control-input:checked ~ .custom-control-label::after { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); -} - -.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before { - background-color: rgba(0, 123, 255, 0.5); -} - -.custom-switch { - padding-left: 2.25rem; -} - -.custom-switch .custom-control-label::before { - left: -2.25rem; - width: 1.75rem; - pointer-events: all; - border-radius: 0.5rem; -} - -.custom-switch .custom-control-label::after { - top: calc(0.25rem + 2px); - left: calc(-2.25rem + 2px); - width: calc(1rem - 4px); - height: calc(1rem - 4px); - background-color: #adb5bd; - border-radius: 0.5rem; - transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out; - transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out; -} - -@media (prefers-reduced-motion: reduce) { - .custom-switch .custom-control-label::after { - transition: none; - } -} - -.custom-switch .custom-control-input:checked ~ .custom-control-label::after { - background-color: #fff; - -webkit-transform: translateX(0.75rem); - transform: translateX(0.75rem); -} - -.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before { - background-color: rgba(0, 123, 255, 0.5); -} - -.custom-select { - display: inline-block; - width: 100%; - height: calc(1.5em + 0.75rem + 2px); - padding: 0.375rem 1.75rem 0.375rem 0.75rem; - font-size: 1rem; - font-weight: 400; - line-height: 1.5; - color: #495057; - vertical-align: middle; - background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px; - border: 1px solid #ced4da; - border-radius: 0.25rem; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} - -.custom-select:focus { - border-color: #80bdff; - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); -} - -.custom-select:focus::-ms-value { - color: #495057; - background-color: #fff; -} - -.custom-select[multiple], .custom-select[size]:not([size="1"]) { - height: auto; - padding-right: 0.75rem; - background-image: none; -} - -.custom-select:disabled { - color: #6c757d; - background-color: #e9ecef; -} - -.custom-select::-ms-expand { - display: none; -} - -.custom-select:-moz-focusring { - color: transparent; - text-shadow: 0 0 0 #495057; -} - -.custom-select-sm { - height: calc(1.5em + 0.5rem + 2px); - padding-top: 0.25rem; - padding-bottom: 0.25rem; - padding-left: 0.5rem; - font-size: 0.875rem; -} - -.custom-select-lg { - height: calc(1.5em + 1rem + 2px); - padding-top: 0.5rem; - padding-bottom: 0.5rem; - padding-left: 1rem; - font-size: 1.25rem; -} - -.custom-file { - position: relative; - display: inline-block; - width: 100%; - height: calc(1.5em + 0.75rem + 2px); - margin-bottom: 0; -} - -.custom-file-input { - position: relative; - z-index: 2; - width: 100%; - height: calc(1.5em + 0.75rem + 2px); - margin: 0; - opacity: 0; -} - -.custom-file-input:focus ~ .custom-file-label { - border-color: #80bdff; - box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); -} - -.custom-file-input[disabled] ~ .custom-file-label, -.custom-file-input:disabled ~ .custom-file-label { - background-color: #e9ecef; -} - -.custom-file-input:lang(en) ~ .custom-file-label::after { - content: "Browse"; -} - -.custom-file-input ~ .custom-file-label[data-browse]::after { - content: attr(data-browse); -} - -.custom-file-label { - position: absolute; - top: 0; - right: 0; - left: 0; - z-index: 1; - height: calc(1.5em + 0.75rem + 2px); - padding: 0.375rem 0.75rem; - font-weight: 400; - line-height: 1.5; - color: #495057; - background-color: #fff; - border: 1px solid #ced4da; - border-radius: 0.25rem; -} - -.custom-file-label::after { - position: absolute; - top: 0; - right: 0; - bottom: 0; - z-index: 3; - display: block; - height: calc(1.5em + 0.75rem); - padding: 0.375rem 0.75rem; - line-height: 1.5; - color: #495057; - content: "Browse"; - background-color: #e9ecef; - border-left: inherit; - border-radius: 0 0.25rem 0.25rem 0; -} - -.custom-range { - width: 100%; - height: 1.4rem; - padding: 0; - background-color: transparent; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} - -.custom-range:focus { - outline: none; -} - -.custom-range:focus::-webkit-slider-thumb { - box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25); -} - -.custom-range:focus::-moz-range-thumb { - box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25); -} - -.custom-range:focus::-ms-thumb { - box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25); -} - -.custom-range::-moz-focus-outer { - border: 0; -} - -.custom-range::-webkit-slider-thumb { - width: 1rem; - height: 1rem; - margin-top: -0.25rem; - background-color: #007bff; - border: 0; - border-radius: 1rem; - -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - -webkit-appearance: none; - appearance: none; -} - -@media (prefers-reduced-motion: reduce) { - .custom-range::-webkit-slider-thumb { - -webkit-transition: none; - transition: none; - } -} - -.custom-range::-webkit-slider-thumb:active { - background-color: #b3d7ff; -} - -.custom-range::-webkit-slider-runnable-track { - width: 100%; - height: 0.5rem; - color: transparent; - cursor: pointer; - background-color: #dee2e6; - border-color: transparent; - border-radius: 1rem; -} - -.custom-range::-moz-range-thumb { - width: 1rem; - height: 1rem; - background-color: #007bff; - border: 0; - border-radius: 1rem; - -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - -moz-appearance: none; - appearance: none; -} - -@media (prefers-reduced-motion: reduce) { - .custom-range::-moz-range-thumb { - -moz-transition: none; - transition: none; - } -} - -.custom-range::-moz-range-thumb:active { - background-color: #b3d7ff; -} - -.custom-range::-moz-range-track { - width: 100%; - height: 0.5rem; - color: transparent; - cursor: pointer; - background-color: #dee2e6; - border-color: transparent; - border-radius: 1rem; -} - -.custom-range::-ms-thumb { - width: 1rem; - height: 1rem; - margin-top: 0; - margin-right: 0.2rem; - margin-left: 0.2rem; - background-color: #007bff; - border: 0; - border-radius: 1rem; - -ms-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - appearance: none; -} - -@media (prefers-reduced-motion: reduce) { - .custom-range::-ms-thumb { - -ms-transition: none; - transition: none; - } -} - -.custom-range::-ms-thumb:active { - background-color: #b3d7ff; -} - -.custom-range::-ms-track { - width: 100%; - height: 0.5rem; - color: transparent; - cursor: pointer; - background-color: transparent; - border-color: transparent; - border-width: 0.5rem; -} - -.custom-range::-ms-fill-lower { - background-color: #dee2e6; - border-radius: 1rem; -} - -.custom-range::-ms-fill-upper { - margin-right: 15px; - background-color: #dee2e6; - border-radius: 1rem; -} - -.custom-range:disabled::-webkit-slider-thumb { - background-color: #adb5bd; -} - -.custom-range:disabled::-webkit-slider-runnable-track { - cursor: default; -} - -.custom-range:disabled::-moz-range-thumb { - background-color: #adb5bd; -} - -.custom-range:disabled::-moz-range-track { - cursor: default; -} - -.custom-range:disabled::-ms-thumb { - background-color: #adb5bd; -} - -.custom-control-label::before, -.custom-file-label, -.custom-select { - transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -} - -@media (prefers-reduced-motion: reduce) { - .custom-control-label::before, - .custom-file-label, - .custom-select { - transition: none; - } -} - .nav { - display: -ms-flexbox; display: flex; - -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; @@ -4227,12 +3829,18 @@ input[type="button"].btn-block { .nav-link { display: block; padding: 0.5rem 1rem; -} - -.nav-link:hover, .nav-link:focus { + color: #0d6efd; text-decoration: none; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; +} +@media (prefers-reduced-motion: reduce) { + .nav-link { + transition: none; + } +} +.nav-link:hover, .nav-link:focus { + color: #0a58ca; } - .nav-link.disabled { color: #6c757d; pointer-events: none; @@ -4242,34 +3850,28 @@ input[type="button"].btn-block { .nav-tabs { border-bottom: 1px solid #dee2e6; } - -.nav-tabs .nav-item { - margin-bottom: -1px; -} - .nav-tabs .nav-link { + margin-bottom: -1px; + background: none; border: 1px solid transparent; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } - .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { border-color: #e9ecef #e9ecef #dee2e6; + isolation: isolate; } - .nav-tabs .nav-link.disabled { color: #6c757d; background-color: transparent; border-color: transparent; } - .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: #495057; background-color: #fff; border-color: #dee2e6 #dee2e6 #fff; } - .nav-tabs .dropdown-menu { margin-top: -1px; border-top-left-radius: 0; @@ -4277,110 +3879,93 @@ input[type="button"].btn-block { } .nav-pills .nav-link { + background: none; + border: 0; border-radius: 0.25rem; } - .nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: #fff; - background-color: #007bff; + background-color: #0d6efd; } .nav-fill > .nav-link, .nav-fill .nav-item { - -ms-flex: 1 1 auto; flex: 1 1 auto; text-align: center; } .nav-justified > .nav-link, .nav-justified .nav-item { - -ms-flex-preferred-size: 0; flex-basis: 0; - -ms-flex-positive: 1; flex-grow: 1; text-align: center; } +.nav-fill .nav-item .nav-link, +.nav-justified .nav-item .nav-link { + width: 100%; +} + .tab-content > .tab-pane { display: none; } - .tab-content > .active { display: block; } .navbar { position: relative; - display: -ms-flexbox; display: flex; - -ms-flex-wrap: wrap; flex-wrap: wrap; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: justify; justify-content: space-between; - padding: 0.5rem 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; } - -.navbar .container, -.navbar .container-fluid, .navbar .container-sm, .navbar .container-md, .navbar .container-lg, .navbar .container-xl { - display: -ms-flexbox; +.navbar > .container, +.navbar > .container-fluid, +.navbar > .container-sm, +.navbar > .container-md, +.navbar > .container-lg, +.navbar > .container-xl, +.navbar > .container-xxl { display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -ms-flex-align: center; + flex-wrap: inherit; align-items: center; - -ms-flex-pack: justify; justify-content: space-between; } - .navbar-brand { - display: inline-block; padding-top: 0.3125rem; padding-bottom: 0.3125rem; margin-right: 1rem; font-size: 1.25rem; - line-height: inherit; + text-decoration: none; white-space: nowrap; } - -.navbar-brand:hover, .navbar-brand:focus { - text-decoration: none; -} - .navbar-nav { - display: -ms-flexbox; display: flex; - -ms-flex-direction: column; flex-direction: column; padding-left: 0; margin-bottom: 0; list-style: none; } - .navbar-nav .nav-link { padding-right: 0; padding-left: 0; } - .navbar-nav .dropdown-menu { position: static; - float: none; } .navbar-text { - display: inline-block; padding-top: 0.5rem; padding-bottom: 0.5rem; } .navbar-collapse { - -ms-flex-preferred-size: 100%; flex-basis: 100%; - -ms-flex-positive: 1; flex-grow: 1; - -ms-flex-align: center; align-items: center; } @@ -4391,39 +3976,43 @@ input[type="button"].btn-block { background-color: transparent; border: 1px solid transparent; border-radius: 0.25rem; + transition: box-shadow 0.15s ease-in-out; } - -.navbar-toggler:hover, .navbar-toggler:focus { +@media (prefers-reduced-motion: reduce) { + .navbar-toggler { + transition: none; + } +} +.navbar-toggler:hover { text-decoration: none; } +.navbar-toggler:focus { + text-decoration: none; + outline: 0; + box-shadow: 0 0 0 0.25rem; +} .navbar-toggler-icon { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; - content: ""; - background: no-repeat center center; - background-size: 100% 100%; + background-repeat: no-repeat; + background-position: center; + background-size: 100%; } -@media (max-width: 575.98px) { - .navbar-expand-sm > .container, - .navbar-expand-sm > .container-fluid, .navbar-expand-sm > .container-sm, .navbar-expand-sm > .container-md, .navbar-expand-sm > .container-lg, .navbar-expand-sm > .container-xl { - padding-right: 0; - padding-left: 0; - } +.navbar-nav-scroll { + max-height: var(--bs-scroll-height, 75vh); + overflow-y: auto; } @media (min-width: 576px) { .navbar-expand-sm { - -ms-flex-flow: row nowrap; - flex-flow: row nowrap; - -ms-flex-pack: start; + flex-wrap: nowrap; justify-content: flex-start; } .navbar-expand-sm .navbar-nav { - -ms-flex-direction: row; flex-direction: row; } .navbar-expand-sm .navbar-nav .dropdown-menu { @@ -4433,39 +4022,23 @@ input[type="button"].btn-block { padding-right: 0.5rem; padding-left: 0.5rem; } - .navbar-expand-sm > .container, - .navbar-expand-sm > .container-fluid, .navbar-expand-sm > .container-sm, .navbar-expand-sm > .container-md, .navbar-expand-sm > .container-lg, .navbar-expand-sm > .container-xl { - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; + .navbar-expand-sm .navbar-nav-scroll { + overflow: visible; } .navbar-expand-sm .navbar-collapse { - display: -ms-flexbox !important; display: flex !important; - -ms-flex-preferred-size: auto; flex-basis: auto; } .navbar-expand-sm .navbar-toggler { display: none; } } - -@media (max-width: 767.98px) { - .navbar-expand-md > .container, - .navbar-expand-md > .container-fluid, .navbar-expand-md > .container-sm, .navbar-expand-md > .container-md, .navbar-expand-md > .container-lg, .navbar-expand-md > .container-xl { - padding-right: 0; - padding-left: 0; - } -} - @media (min-width: 768px) { .navbar-expand-md { - -ms-flex-flow: row nowrap; - flex-flow: row nowrap; - -ms-flex-pack: start; + flex-wrap: nowrap; justify-content: flex-start; } .navbar-expand-md .navbar-nav { - -ms-flex-direction: row; flex-direction: row; } .navbar-expand-md .navbar-nav .dropdown-menu { @@ -4475,39 +4048,23 @@ input[type="button"].btn-block { padding-right: 0.5rem; padding-left: 0.5rem; } - .navbar-expand-md > .container, - .navbar-expand-md > .container-fluid, .navbar-expand-md > .container-sm, .navbar-expand-md > .container-md, .navbar-expand-md > .container-lg, .navbar-expand-md > .container-xl { - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; + .navbar-expand-md .navbar-nav-scroll { + overflow: visible; } .navbar-expand-md .navbar-collapse { - display: -ms-flexbox !important; display: flex !important; - -ms-flex-preferred-size: auto; flex-basis: auto; } .navbar-expand-md .navbar-toggler { display: none; } } - -@media (max-width: 991.98px) { - .navbar-expand-lg > .container, - .navbar-expand-lg > .container-fluid, .navbar-expand-lg > .container-sm, .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-xl { - padding-right: 0; - padding-left: 0; - } -} - @media (min-width: 992px) { .navbar-expand-lg { - -ms-flex-flow: row nowrap; - flex-flow: row nowrap; - -ms-flex-pack: start; + flex-wrap: nowrap; justify-content: flex-start; } .navbar-expand-lg .navbar-nav { - -ms-flex-direction: row; flex-direction: row; } .navbar-expand-lg .navbar-nav .dropdown-menu { @@ -4517,39 +4074,23 @@ input[type="button"].btn-block { padding-right: 0.5rem; padding-left: 0.5rem; } - .navbar-expand-lg > .container, - .navbar-expand-lg > .container-fluid, .navbar-expand-lg > .container-sm, .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-xl { - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; + .navbar-expand-lg .navbar-nav-scroll { + overflow: visible; } .navbar-expand-lg .navbar-collapse { - display: -ms-flexbox !important; display: flex !important; - -ms-flex-preferred-size: auto; flex-basis: auto; } .navbar-expand-lg .navbar-toggler { display: none; } } - -@media (max-width: 1199.98px) { - .navbar-expand-xl > .container, - .navbar-expand-xl > .container-fluid, .navbar-expand-xl > .container-sm, .navbar-expand-xl > .container-md, .navbar-expand-xl > .container-lg, .navbar-expand-xl > .container-xl { - padding-right: 0; - padding-left: 0; - } -} - @media (min-width: 1200px) { .navbar-expand-xl { - -ms-flex-flow: row nowrap; - flex-flow: row nowrap; - -ms-flex-pack: start; + flex-wrap: nowrap; justify-content: flex-start; } .navbar-expand-xl .navbar-nav { - -ms-flex-direction: row; flex-direction: row; } .navbar-expand-xl .navbar-nav .dropdown-menu { @@ -4559,62 +4100,64 @@ input[type="button"].btn-block { padding-right: 0.5rem; padding-left: 0.5rem; } - .navbar-expand-xl > .container, - .navbar-expand-xl > .container-fluid, .navbar-expand-xl > .container-sm, .navbar-expand-xl > .container-md, .navbar-expand-xl > .container-lg, .navbar-expand-xl > .container-xl { - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; + .navbar-expand-xl .navbar-nav-scroll { + overflow: visible; } .navbar-expand-xl .navbar-collapse { - display: -ms-flexbox !important; display: flex !important; - -ms-flex-preferred-size: auto; flex-basis: auto; } .navbar-expand-xl .navbar-toggler { display: none; } } - +@media (min-width: 1400px) { + .navbar-expand-xxl { + flex-wrap: nowrap; + justify-content: flex-start; + } + .navbar-expand-xxl .navbar-nav { + flex-direction: row; + } + .navbar-expand-xxl .navbar-nav .dropdown-menu { + position: absolute; + } + .navbar-expand-xxl .navbar-nav .nav-link { + padding-right: 0.5rem; + padding-left: 0.5rem; + } + .navbar-expand-xxl .navbar-nav-scroll { + overflow: visible; + } + .navbar-expand-xxl .navbar-collapse { + display: flex !important; + flex-basis: auto; + } + .navbar-expand-xxl .navbar-toggler { + display: none; + } +} .navbar-expand { - -ms-flex-flow: row nowrap; - flex-flow: row nowrap; - -ms-flex-pack: start; + flex-wrap: nowrap; justify-content: flex-start; } - -.navbar-expand > .container, -.navbar-expand > .container-fluid, .navbar-expand > .container-sm, .navbar-expand > .container-md, .navbar-expand > .container-lg, .navbar-expand > .container-xl { - padding-right: 0; - padding-left: 0; -} - .navbar-expand .navbar-nav { - -ms-flex-direction: row; flex-direction: row; } - .navbar-expand .navbar-nav .dropdown-menu { position: absolute; } - .navbar-expand .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; } - -.navbar-expand > .container, -.navbar-expand > .container-fluid, .navbar-expand > .container-sm, .navbar-expand > .container-md, .navbar-expand > .container-lg, .navbar-expand > .container-xl { - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; +.navbar-expand .navbar-nav-scroll { + overflow: visible; } - .navbar-expand .navbar-collapse { - display: -ms-flexbox !important; display: flex !important; - -ms-flex-preferred-size: auto; flex-basis: auto; } - .navbar-expand .navbar-toggler { display: none; } @@ -4622,104 +4165,76 @@ input[type="button"].btn-block { .navbar-light .navbar-brand { color: rgba(0, 0, 0, 0.9); } - .navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus { color: rgba(0, 0, 0, 0.9); } - .navbar-light .navbar-nav .nav-link { - color: rgba(0, 0, 0, 0.5); + color: rgba(0, 0, 0, 0.55); } - .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus { color: rgba(0, 0, 0, 0.7); } - .navbar-light .navbar-nav .nav-link.disabled { color: rgba(0, 0, 0, 0.3); } - .navbar-light .navbar-nav .show > .nav-link, -.navbar-light .navbar-nav .active > .nav-link, -.navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active { color: rgba(0, 0, 0, 0.9); } - .navbar-light .navbar-toggler { - color: rgba(0, 0, 0, 0.5); + color: rgba(0, 0, 0, 0.55); border-color: rgba(0, 0, 0, 0.1); } - .navbar-light .navbar-toggler-icon { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } - .navbar-light .navbar-text { - color: rgba(0, 0, 0, 0.5); + color: rgba(0, 0, 0, 0.55); } - -.navbar-light .navbar-text a { - color: rgba(0, 0, 0, 0.9); -} - -.navbar-light .navbar-text a:hover, .navbar-light .navbar-text a:focus { +.navbar-light .navbar-text a, +.navbar-light .navbar-text a:hover, +.navbar-light .navbar-text a:focus { color: rgba(0, 0, 0, 0.9); } .navbar-dark .navbar-brand { color: #fff; } - .navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus { color: #fff; } - .navbar-dark .navbar-nav .nav-link { - color: rgba(255, 255, 255, 0.5); + color: rgba(255, 255, 255, 0.55); } - .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus { color: rgba(255, 255, 255, 0.75); } - .navbar-dark .navbar-nav .nav-link.disabled { color: rgba(255, 255, 255, 0.25); } - .navbar-dark .navbar-nav .show > .nav-link, -.navbar-dark .navbar-nav .active > .nav-link, -.navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .nav-link.active { color: #fff; } - .navbar-dark .navbar-toggler { - color: rgba(255, 255, 255, 0.5); + color: rgba(255, 255, 255, 0.55); border-color: rgba(255, 255, 255, 0.1); } - .navbar-dark .navbar-toggler-icon { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } - .navbar-dark .navbar-text { - color: rgba(255, 255, 255, 0.5); + color: rgba(255, 255, 255, 0.55); } - -.navbar-dark .navbar-text a { - color: #fff; -} - -.navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus { +.navbar-dark .navbar-text a, +.navbar-dark .navbar-text a:hover, +.navbar-dark .navbar-text a:focus { color: #fff; } .card { position: relative; - display: -ms-flexbox; display: flex; - -ms-flex-direction: column; flex-direction: column; min-width: 0; word-wrap: break-word; @@ -4728,47 +4243,40 @@ input[type="button"].btn-block { border: 1px solid rgba(0, 0, 0, 0.125); border-radius: 0.25rem; } - .card > hr { margin-right: 0; margin-left: 0; } - .card > .list-group { border-top: inherit; border-bottom: inherit; } - .card > .list-group:first-child { border-top-width: 0; border-top-left-radius: calc(0.25rem - 1px); border-top-right-radius: calc(0.25rem - 1px); } - .card > .list-group:last-child { border-bottom-width: 0; border-bottom-right-radius: calc(0.25rem - 1px); border-bottom-left-radius: calc(0.25rem - 1px); } - .card > .card-header + .list-group, .card > .list-group + .card-footer { border-top: 0; } .card-body { - -ms-flex: 1 1 auto; flex: 1 1 auto; - min-height: 1px; - padding: 1.25rem; + padding: 1rem 1rem; } .card-title { - margin-bottom: 0.75rem; + margin-bottom: 0.5rem; } .card-subtitle { - margin-top: -0.375rem; + margin-top: -0.25rem; margin-bottom: 0; } @@ -4779,42 +4287,39 @@ input[type="button"].btn-block { .card-link:hover { text-decoration: none; } - .card-link + .card-link { - margin-left: 1.25rem; + margin-left: 1rem; } .card-header { - padding: 0.75rem 1.25rem; + padding: 0.5rem 1rem; margin-bottom: 0; background-color: rgba(0, 0, 0, 0.03); border-bottom: 1px solid rgba(0, 0, 0, 0.125); } - .card-header:first-child { border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0; } .card-footer { - padding: 0.75rem 1.25rem; + padding: 0.5rem 1rem; background-color: rgba(0, 0, 0, 0.03); border-top: 1px solid rgba(0, 0, 0, 0.125); } - .card-footer:last-child { border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px); } .card-header-tabs { - margin-right: -0.625rem; - margin-bottom: -0.75rem; - margin-left: -0.625rem; + margin-right: -0.5rem; + margin-bottom: -0.5rem; + margin-left: -0.5rem; border-bottom: 0; } .card-header-pills { - margin-right: -0.625rem; - margin-left: -0.625rem; + margin-right: -0.5rem; + margin-left: -0.5rem; } .card-img-overlay { @@ -4823,15 +4328,13 @@ input[type="button"].btn-block { right: 0; bottom: 0; left: 0; - padding: 1.25rem; + padding: 1rem; border-radius: calc(0.25rem - 1px); } .card-img, .card-img-top, .card-img-bottom { - -ms-flex-negative: 0; - flex-shrink: 0; width: 100%; } @@ -4847,41 +4350,15 @@ input[type="button"].btn-block { border-bottom-left-radius: calc(0.25rem - 1px); } -.card-deck .card { - margin-bottom: 15px; -} - -@media (min-width: 576px) { - .card-deck { - display: -ms-flexbox; - display: flex; - -ms-flex-flow: row wrap; - flex-flow: row wrap; - margin-right: -15px; - margin-left: -15px; - } - .card-deck .card { - -ms-flex: 1 0 0%; - flex: 1 0 0%; - margin-right: 15px; - margin-bottom: 0; - margin-left: 15px; - } -} - .card-group > .card { - margin-bottom: 15px; + margin-bottom: 0.75rem; } - @media (min-width: 576px) { .card-group { - display: -ms-flexbox; display: flex; - -ms-flex-flow: row wrap; flex-flow: row wrap; } .card-group > .card { - -ms-flex: 1 0 0%; flex: 1 0 0%; margin-bottom: 0; } @@ -4894,11 +4371,11 @@ input[type="button"].btn-block { border-bottom-right-radius: 0; } .card-group > .card:not(:last-child) .card-img-top, - .card-group > .card:not(:last-child) .card-header { +.card-group > .card:not(:last-child) .card-header { border-top-right-radius: 0; } .card-group > .card:not(:last-child) .card-img-bottom, - .card-group > .card:not(:last-child) .card-footer { +.card-group > .card:not(:last-child) .card-footer { border-bottom-right-radius: 0; } .card-group > .card:not(:first-child) { @@ -4906,170 +4383,216 @@ input[type="button"].btn-block { border-bottom-left-radius: 0; } .card-group > .card:not(:first-child) .card-img-top, - .card-group > .card:not(:first-child) .card-header { +.card-group > .card:not(:first-child) .card-header { border-top-left-radius: 0; } .card-group > .card:not(:first-child) .card-img-bottom, - .card-group > .card:not(:first-child) .card-footer { +.card-group > .card:not(:first-child) .card-footer { border-bottom-left-radius: 0; } } -.card-columns .card { - margin-bottom: 0.75rem; -} - -@media (min-width: 576px) { - .card-columns { - -webkit-column-count: 3; - -moz-column-count: 3; - column-count: 3; - -webkit-column-gap: 1.25rem; - -moz-column-gap: 1.25rem; - column-gap: 1.25rem; - orphans: 1; - widows: 1; - } - .card-columns .card { - display: inline-block; - width: 100%; - } -} - -.accordion { - overflow-anchor: none; -} - -.accordion > .card { - overflow: hidden; -} - -.accordion > .card:not(:last-of-type) { - border-bottom: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; -} - -.accordion > .card:not(:first-of-type) { - border-top-left-radius: 0; - border-top-right-radius: 0; -} - -.accordion > .card > .card-header { +.accordion-button { + position: relative; + display: flex; + align-items: center; + width: 100%; + padding: 1rem 1.25rem; + font-size: 1rem; + color: #212529; + text-align: left; + background-color: #fff; + border: 0; + border-radius: 0; + overflow-anchor: none; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease; +} +@media (prefers-reduced-motion: reduce) { + .accordion-button { + transition: none; + } +} +.accordion-button:not(.collapsed) { + color: #0c63e4; + background-color: #e7f1ff; + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125); +} +.accordion-button:not(.collapsed)::after { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); + transform: rotate(-180deg); +} +.accordion-button::after { + flex-shrink: 0; + width: 1.25rem; + height: 1.25rem; + margin-left: auto; + content: ""; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); + background-repeat: no-repeat; + background-size: 1.25rem; + transition: transform 0.2s ease-in-out; +} +@media (prefers-reduced-motion: reduce) { + .accordion-button::after { + transition: none; + } +} +.accordion-button:hover { + z-index: 2; +} +.accordion-button:focus { + z-index: 3; + border-color: #86b7fe; + outline: 0; + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); +} + +.accordion-header { + margin-bottom: 0; +} + +.accordion-item { + background-color: #fff; + border: 1px solid rgba(0, 0, 0, 0.125); +} +.accordion-item:first-of-type { + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; +} +.accordion-item:first-of-type .accordion-button { + border-top-left-radius: calc(0.25rem - 1px); + border-top-right-radius: calc(0.25rem - 1px); +} +.accordion-item:not(:first-of-type) { + border-top: 0; +} +.accordion-item:last-of-type { + border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; +} +.accordion-item:last-of-type .accordion-button.collapsed { + border-bottom-right-radius: calc(0.25rem - 1px); + border-bottom-left-radius: calc(0.25rem - 1px); +} +.accordion-item:last-of-type .accordion-collapse { + border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; +} + +.accordion-body { + padding: 1rem 1.25rem; +} + +.accordion-flush .accordion-collapse { + border-width: 0; +} +.accordion-flush .accordion-item { + border-right: 0; + border-left: 0; + border-radius: 0; +} +.accordion-flush .accordion-item:first-child { + border-top: 0; +} +.accordion-flush .accordion-item:last-child { + border-bottom: 0; +} +.accordion-flush .accordion-item .accordion-button { border-radius: 0; - margin-bottom: -1px; } .breadcrumb { - display: -ms-flexbox; display: flex; - -ms-flex-wrap: wrap; flex-wrap: wrap; - padding: 0.75rem 1rem; + padding: 0 0; margin-bottom: 1rem; list-style: none; - background-color: #e9ecef; - border-radius: 0.25rem; -} - -.breadcrumb-item { - display: -ms-flexbox; - display: flex; } .breadcrumb-item + .breadcrumb-item { padding-left: 0.5rem; } - .breadcrumb-item + .breadcrumb-item::before { - display: inline-block; + float: left; padding-right: 0.5rem; color: #6c757d; - content: "/"; + content: var(--bs-breadcrumb-divider, "/") /* rtl: var(--bs-breadcrumb-divider, "/") */; } - -.breadcrumb-item + .breadcrumb-item:hover::before { - text-decoration: underline; -} - -.breadcrumb-item + .breadcrumb-item:hover::before { - text-decoration: none; -} - .breadcrumb-item.active { color: #6c757d; } .pagination { - display: -ms-flexbox; display: flex; padding-left: 0; list-style: none; - border-radius: 0.25rem; } .page-link { position: relative; display: block; - padding: 0.5rem 0.75rem; - margin-left: -1px; - line-height: 1.25; - color: #007bff; + color: #0d6efd; + text-decoration: none; background-color: #fff; border: 1px solid #dee2e6; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} +@media (prefers-reduced-motion: reduce) { + .page-link { + transition: none; + } } - .page-link:hover { z-index: 2; - color: #0056b3; - text-decoration: none; + color: #0a58ca; background-color: #e9ecef; border-color: #dee2e6; } - .page-link:focus { z-index: 3; + color: #0a58ca; + background-color: #e9ecef; outline: 0; - box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); +} + +.page-item:not(:first-child) .page-link { + margin-left: -1px; +} +.page-item.active .page-link { + z-index: 3; + color: #fff; + background-color: #0d6efd; + border-color: #0d6efd; +} +.page-item.disabled .page-link { + color: #6c757d; + pointer-events: none; + background-color: #fff; + border-color: #dee2e6; +} + +.page-link { + padding: 0.375rem 0.75rem; } .page-item:first-child .page-link { - margin-left: 0; border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } - .page-item:last-child .page-link { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } -.page-item.active .page-link { - z-index: 3; - color: #fff; - background-color: #007bff; - border-color: #007bff; -} - -.page-item.disabled .page-link { - color: #6c757d; - pointer-events: none; - cursor: auto; - background-color: #fff; - border-color: #dee2e6; -} - .pagination-lg .page-link { padding: 0.75rem 1.5rem; font-size: 1.25rem; - line-height: 1.5; } - .pagination-lg .page-item:first-child .page-link { border-top-left-radius: 0.3rem; border-bottom-left-radius: 0.3rem; } - .pagination-lg .page-item:last-child .page-link { border-top-right-radius: 0.3rem; border-bottom-right-radius: 0.3rem; @@ -5078,14 +4601,11 @@ input[type="button"].btn-block { .pagination-sm .page-link { padding: 0.25rem 0.5rem; font-size: 0.875rem; - line-height: 1.5; } - .pagination-sm .page-item:first-child .page-link { border-top-left-radius: 0.2rem; border-bottom-left-radius: 0.2rem; } - .pagination-sm .page-item:last-child .page-link { border-top-right-radius: 0.2rem; border-bottom-right-radius: 0.2rem; @@ -5093,27 +4613,16 @@ input[type="button"].btn-block { .badge { display: inline-block; - padding: 0.25em 0.4em; - font-size: 75%; + padding: 0.35em 0.65em; + font-size: 0.75em; font-weight: 700; line-height: 1; + color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.25rem; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } - -@media (prefers-reduced-motion: reduce) { - .badge { - transition: none; - } -} - -a.badge:hover, a.badge:focus { - text-decoration: none; -} - .badge:empty { display: none; } @@ -5123,154 +4632,9 @@ a.badge:hover, a.badge:focus { top: -1px; } -.badge-pill { - padding-right: 0.6em; - padding-left: 0.6em; - border-radius: 10rem; -} - -.badge-primary { - color: #fff; - background-color: #007bff; -} - -a.badge-primary:hover, a.badge-primary:focus { - color: #fff; - background-color: #0062cc; -} - -a.badge-primary:focus, a.badge-primary.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); -} - -.badge-secondary { - color: #fff; - background-color: #6c757d; -} - -a.badge-secondary:hover, a.badge-secondary:focus { - color: #fff; - background-color: #545b62; -} - -a.badge-secondary:focus, a.badge-secondary.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); -} - -.badge-success { - color: #fff; - background-color: #28a745; -} - -a.badge-success:hover, a.badge-success:focus { - color: #fff; - background-color: #1e7e34; -} - -a.badge-success:focus, a.badge-success.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); -} - -.badge-info { - color: #fff; - background-color: #17a2b8; -} - -a.badge-info:hover, a.badge-info:focus { - color: #fff; - background-color: #117a8b; -} - -a.badge-info:focus, a.badge-info.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5); -} - -.badge-warning { - color: #212529; - background-color: #ffc107; -} - -a.badge-warning:hover, a.badge-warning:focus { - color: #212529; - background-color: #d39e00; -} - -a.badge-warning:focus, a.badge-warning.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); -} - -.badge-danger { - color: #fff; - background-color: #dc3545; -} - -a.badge-danger:hover, a.badge-danger:focus { - color: #fff; - background-color: #bd2130; -} - -a.badge-danger:focus, a.badge-danger.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5); -} - -.badge-light { - color: #212529; - background-color: #f8f9fa; -} - -a.badge-light:hover, a.badge-light:focus { - color: #212529; - background-color: #dae0e5; -} - -a.badge-light:focus, a.badge-light.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5); -} - -.badge-dark { - color: #fff; - background-color: #343a40; -} - -a.badge-dark:hover, a.badge-dark:focus { - color: #fff; - background-color: #1d2124; -} - -a.badge-dark:focus, a.badge-dark.focus { - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); -} - -.jumbotron { - padding: 2rem 1rem; - margin-bottom: 2rem; - background-color: #e9ecef; - border-radius: 0.3rem; -} - -@media (min-width: 576px) { - .jumbotron { - padding: 4rem 2rem; - } -} - -.jumbotron-fluid { - padding-right: 0; - padding-left: 0; - border-radius: 0; -} - .alert { position: relative; - padding: 0.75rem 1.25rem; + padding: 1rem 1rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.25rem; @@ -5285,174 +4649,119 @@ a.badge-dark:focus, a.badge-dark.focus { } .alert-dismissible { - padding-right: 4rem; + padding-right: 3rem; } - -.alert-dismissible .close { +.alert-dismissible .btn-close { position: absolute; top: 0; right: 0; z-index: 2; - padding: 0.75rem 1.25rem; - color: inherit; + padding: 1.25rem 1rem; } .alert-primary { - color: #004085; - background-color: #cce5ff; - border-color: #b8daff; + color: #084298; + background-color: #cfe2ff; + border-color: #b6d4fe; } - -.alert-primary hr { - border-top-color: #9fcdff; -} - .alert-primary .alert-link { - color: #002752; + color: #06357a; } .alert-secondary { - color: #383d41; + color: #41464b; background-color: #e2e3e5; - border-color: #d6d8db; + border-color: #d3d6d8; } - -.alert-secondary hr { - border-top-color: #c8cbcf; -} - .alert-secondary .alert-link { - color: #202326; + color: #34383c; } .alert-success { - color: #155724; - background-color: #d4edda; - border-color: #c3e6cb; + color: #0f5132; + background-color: #d1e7dd; + border-color: #badbcc; } - -.alert-success hr { - border-top-color: #b1dfbb; -} - .alert-success .alert-link { - color: #0b2e13; + color: #0c4128; } .alert-info { - color: #0c5460; - background-color: #d1ecf1; - border-color: #bee5eb; + color: #055160; + background-color: #cff4fc; + border-color: #b6effb; } - -.alert-info hr { - border-top-color: #abdde5; -} - .alert-info .alert-link { - color: #062c33; + color: #04414d; } .alert-warning { - color: #856404; + color: #664d03; background-color: #fff3cd; - border-color: #ffeeba; + border-color: #ffecb5; } - -.alert-warning hr { - border-top-color: #ffe8a1; -} - .alert-warning .alert-link { - color: #533f03; + color: #523e02; } .alert-danger { - color: #721c24; + color: #842029; background-color: #f8d7da; - border-color: #f5c6cb; + border-color: #f5c2c7; } - -.alert-danger hr { - border-top-color: #f1b0b7; -} - .alert-danger .alert-link { - color: #491217; + color: #6a1a21; } .alert-light { - color: #818182; + color: #636464; background-color: #fefefe; border-color: #fdfdfe; } - -.alert-light hr { - border-top-color: #ececf6; -} - .alert-light .alert-link { - color: #686868; + color: #4f5050; } .alert-dark { - color: #1b1e21; - background-color: #d6d8d9; - border-color: #c6c8ca; + color: #141619; + background-color: #d3d3d4; + border-color: #bcbebf; } - -.alert-dark hr { - border-top-color: #b9bbbe; -} - .alert-dark .alert-link { - color: #040505; + color: #101214; } @-webkit-keyframes progress-bar-stripes { - from { - background-position: 1rem 0; - } - to { - background-position: 0 0; + 0% { + background-position-x: 1rem; } } @keyframes progress-bar-stripes { - from { - background-position: 1rem 0; - } - to { - background-position: 0 0; + 0% { + background-position-x: 1rem; } } - .progress { - display: -ms-flexbox; display: flex; height: 1rem; overflow: hidden; - line-height: 0; font-size: 0.75rem; background-color: #e9ecef; border-radius: 0.25rem; } .progress-bar { - display: -ms-flexbox; display: flex; - -ms-flex-direction: column; flex-direction: column; - -ms-flex-pack: center; justify-content: center; overflow: hidden; color: #fff; text-align: center; white-space: nowrap; - background-color: #007bff; + background-color: #0d6efd; transition: width 0.6s ease; } - @media (prefers-reduced-motion: reduce) { .progress-bar { transition: none; @@ -5465,10 +4774,9 @@ a.badge-dark:focus, a.badge-dark.focus { } .progress-bar-animated { - -webkit-animation: progress-bar-stripes 1s linear infinite; - animation: progress-bar-stripes 1s linear infinite; + -webkit-animation: 1s linear infinite progress-bar-stripes; + animation: 1s linear infinite progress-bar-stripes; } - @media (prefers-reduced-motion: reduce) { .progress-bar-animated { -webkit-animation: none; @@ -5476,41 +4784,34 @@ a.badge-dark:focus, a.badge-dark.focus { } } -.media { - display: -ms-flexbox; - display: flex; - -ms-flex-align: start; - align-items: flex-start; -} - -.media-body { - -ms-flex: 1; - flex: 1; -} - .list-group { - display: -ms-flexbox; display: flex; - -ms-flex-direction: column; flex-direction: column; padding-left: 0; margin-bottom: 0; border-radius: 0.25rem; } +.list-group-numbered { + list-style-type: none; + counter-reset: section; +} +.list-group-numbered > li::before { + content: counters(section, ".") ". "; + counter-increment: section; +} + .list-group-item-action { width: 100%; color: #495057; text-align: inherit; } - .list-group-item-action:hover, .list-group-item-action:focus { z-index: 1; color: #495057; text-decoration: none; background-color: #f8f9fa; } - .list-group-item-action:active { color: #212529; background-color: #e9ecef; @@ -5519,67 +4820,57 @@ a.badge-dark:focus, a.badge-dark.focus { .list-group-item { position: relative; display: block; - padding: 0.75rem 1.25rem; + padding: 0.5rem 1rem; + color: #212529; + text-decoration: none; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.125); } - .list-group-item:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; } - .list-group-item:last-child { border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; } - .list-group-item.disabled, .list-group-item:disabled { color: #6c757d; pointer-events: none; background-color: #fff; } - .list-group-item.active { z-index: 2; color: #fff; - background-color: #007bff; - border-color: #007bff; + background-color: #0d6efd; + border-color: #0d6efd; } - .list-group-item + .list-group-item { border-top-width: 0; } - .list-group-item + .list-group-item.active { margin-top: -1px; border-top-width: 1px; } .list-group-horizontal { - -ms-flex-direction: row; flex-direction: row; } - .list-group-horizontal > .list-group-item:first-child { border-bottom-left-radius: 0.25rem; border-top-right-radius: 0; } - .list-group-horizontal > .list-group-item:last-child { border-top-right-radius: 0.25rem; border-bottom-left-radius: 0; } - .list-group-horizontal > .list-group-item.active { margin-top: 0; } - .list-group-horizontal > .list-group-item + .list-group-item { border-top-width: 1px; border-left-width: 0; } - .list-group-horizontal > .list-group-item + .list-group-item.active { margin-left: -1px; border-left-width: 1px; @@ -5587,7 +4878,6 @@ a.badge-dark:focus, a.badge-dark.focus { @media (min-width: 576px) { .list-group-horizontal-sm { - -ms-flex-direction: row; flex-direction: row; } .list-group-horizontal-sm > .list-group-item:first-child { @@ -5610,10 +4900,8 @@ a.badge-dark:focus, a.badge-dark.focus { border-left-width: 1px; } } - @media (min-width: 768px) { .list-group-horizontal-md { - -ms-flex-direction: row; flex-direction: row; } .list-group-horizontal-md > .list-group-item:first-child { @@ -5636,10 +4924,8 @@ a.badge-dark:focus, a.badge-dark.focus { border-left-width: 1px; } } - @media (min-width: 992px) { .list-group-horizontal-lg { - -ms-flex-direction: row; flex-direction: row; } .list-group-horizontal-lg > .list-group-item:first-child { @@ -5662,10 +4948,8 @@ a.badge-dark:focus, a.badge-dark.focus { border-left-width: 1px; } } - @media (min-width: 1200px) { .list-group-horizontal-xl { - -ms-flex-direction: row; flex-direction: row; } .list-group-horizontal-xl > .list-group-item:first-child { @@ -5688,212 +4972,218 @@ a.badge-dark:focus, a.badge-dark.focus { border-left-width: 1px; } } - +@media (min-width: 1400px) { + .list-group-horizontal-xxl { + flex-direction: row; + } + .list-group-horizontal-xxl > .list-group-item:first-child { + border-bottom-left-radius: 0.25rem; + border-top-right-radius: 0; + } + .list-group-horizontal-xxl > .list-group-item:last-child { + border-top-right-radius: 0.25rem; + border-bottom-left-radius: 0; + } + .list-group-horizontal-xxl > .list-group-item.active { + margin-top: 0; + } + .list-group-horizontal-xxl > .list-group-item + .list-group-item { + border-top-width: 1px; + border-left-width: 0; + } + .list-group-horizontal-xxl > .list-group-item + .list-group-item.active { + margin-left: -1px; + border-left-width: 1px; + } +} .list-group-flush { border-radius: 0; } - .list-group-flush > .list-group-item { border-width: 0 0 1px; } - .list-group-flush > .list-group-item:last-child { border-bottom-width: 0; } .list-group-item-primary { - color: #004085; - background-color: #b8daff; + color: #084298; + background-color: #cfe2ff; } - .list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus { - color: #004085; - background-color: #9fcdff; + color: #084298; + background-color: #bacbe6; } - .list-group-item-primary.list-group-item-action.active { color: #fff; - background-color: #004085; - border-color: #004085; + background-color: #084298; + border-color: #084298; } .list-group-item-secondary { - color: #383d41; - background-color: #d6d8db; + color: #41464b; + background-color: #e2e3e5; } - .list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus { - color: #383d41; - background-color: #c8cbcf; + color: #41464b; + background-color: #cbccce; } - .list-group-item-secondary.list-group-item-action.active { color: #fff; - background-color: #383d41; - border-color: #383d41; + background-color: #41464b; + border-color: #41464b; } .list-group-item-success { - color: #155724; - background-color: #c3e6cb; + color: #0f5132; + background-color: #d1e7dd; } - .list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus { - color: #155724; - background-color: #b1dfbb; + color: #0f5132; + background-color: #bcd0c7; } - .list-group-item-success.list-group-item-action.active { color: #fff; - background-color: #155724; - border-color: #155724; + background-color: #0f5132; + border-color: #0f5132; } .list-group-item-info { - color: #0c5460; - background-color: #bee5eb; + color: #055160; + background-color: #cff4fc; } - .list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus { - color: #0c5460; - background-color: #abdde5; + color: #055160; + background-color: #badce3; } - .list-group-item-info.list-group-item-action.active { color: #fff; - background-color: #0c5460; - border-color: #0c5460; + background-color: #055160; + border-color: #055160; } .list-group-item-warning { - color: #856404; - background-color: #ffeeba; + color: #664d03; + background-color: #fff3cd; } - .list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus { - color: #856404; - background-color: #ffe8a1; + color: #664d03; + background-color: #e6dbb9; } - .list-group-item-warning.list-group-item-action.active { color: #fff; - background-color: #856404; - border-color: #856404; + background-color: #664d03; + border-color: #664d03; } .list-group-item-danger { - color: #721c24; - background-color: #f5c6cb; + color: #842029; + background-color: #f8d7da; } - .list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus { - color: #721c24; - background-color: #f1b0b7; + color: #842029; + background-color: #dfc2c4; } - .list-group-item-danger.list-group-item-action.active { color: #fff; - background-color: #721c24; - border-color: #721c24; + background-color: #842029; + border-color: #842029; } .list-group-item-light { - color: #818182; - background-color: #fdfdfe; + color: #636464; + background-color: #fefefe; } - .list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus { - color: #818182; - background-color: #ececf6; + color: #636464; + background-color: #e5e5e5; } - .list-group-item-light.list-group-item-action.active { color: #fff; - background-color: #818182; - border-color: #818182; + background-color: #636464; + border-color: #636464; } .list-group-item-dark { - color: #1b1e21; - background-color: #c6c8ca; + color: #141619; + background-color: #d3d3d4; } - .list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus { - color: #1b1e21; - background-color: #b9bbbe; + color: #141619; + background-color: #bebebf; } - .list-group-item-dark.list-group-item-action.active { color: #fff; - background-color: #1b1e21; - border-color: #1b1e21; + background-color: #141619; + border-color: #141619; } -.close { - float: right; - font-size: 1.5rem; - font-weight: 700; - line-height: 1; +.btn-close { + box-sizing: content-box; + width: 1em; + height: 1em; + padding: 0.25em 0.25em; color: #000; - text-shadow: 0 1px 0 #fff; - opacity: .5; + background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; + border: 0; + border-radius: 0.25rem; + opacity: 0.5; } - -.close:hover { +.btn-close:hover { color: #000; text-decoration: none; + opacity: 0.75; } - -.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus { - opacity: .75; +.btn-close:focus { + outline: 0; + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); + opacity: 1; } - -button.close { - padding: 0; - background-color: transparent; - border: 0; -} - -a.close.disabled { +.btn-close:disabled, .btn-close.disabled { pointer-events: none; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + opacity: 0.25; +} + +.btn-close-white { + filter: invert(1) grayscale(100%) brightness(200%); } .toast { - -ms-flex-preferred-size: 350px; - flex-basis: 350px; - max-width: 350px; + width: 350px; + max-width: 100%; font-size: 0.875rem; + pointer-events: auto; background-color: rgba(255, 255, 255, 0.85); background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.1); - box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1); - opacity: 0; + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); border-radius: 0.25rem; } - -.toast:not(:last-child) { - margin-bottom: 0.75rem; +.toast:not(.showing):not(.show) { + opacity: 0; } - -.toast.showing { - opacity: 1; -} - -.toast.show { - display: block; - opacity: 1; -} - .toast.hide { display: none; } +.toast-container { + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + max-width: 100%; + pointer-events: none; +} +.toast-container > :not(:last-child) { + margin-bottom: 0.75rem; +} + .toast-header { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - padding: 0.25rem 0.75rem; + padding: 0.5rem 0.75rem; color: #6c757d; background-color: rgba(255, 255, 255, 0.85); background-clip: padding-box; @@ -5901,29 +5191,26 @@ a.close.disabled { border-top-left-radius: calc(0.25rem - 1px); border-top-right-radius: calc(0.25rem - 1px); } +.toast-header .btn-close { + margin-right: -0.375rem; + margin-left: 0.75rem; +} .toast-body { padding: 0.75rem; -} - -.modal-open { - overflow: hidden; -} - -.modal-open .modal { - overflow-x: hidden; - overflow-y: auto; + word-wrap: break-word; } .modal { position: fixed; top: 0; left: 0; - z-index: 1050; + z-index: 1060; display: none; width: 100%; height: 100%; - overflow: hidden; + overflow-x: hidden; + overflow-y: auto; outline: 0; } @@ -5933,90 +5220,42 @@ a.close.disabled { margin: 0.5rem; pointer-events: none; } - .modal.fade .modal-dialog { - transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; - transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; - -webkit-transform: translate(0, -50px); transform: translate(0, -50px); } - @media (prefers-reduced-motion: reduce) { .modal.fade .modal-dialog { transition: none; } } - .modal.show .modal-dialog { - -webkit-transform: none; transform: none; } - .modal.modal-static .modal-dialog { - -webkit-transform: scale(1.02); transform: scale(1.02); } .modal-dialog-scrollable { - display: -ms-flexbox; - display: flex; - max-height: calc(100% - 1rem); + height: calc(100% - 1rem); } - .modal-dialog-scrollable .modal-content { - max-height: calc(100vh - 1rem); + max-height: 100%; overflow: hidden; } - -.modal-dialog-scrollable .modal-header, -.modal-dialog-scrollable .modal-footer { - -ms-flex-negative: 0; - flex-shrink: 0; -} - .modal-dialog-scrollable .modal-body { overflow-y: auto; } .modal-dialog-centered { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; min-height: calc(100% - 1rem); } -.modal-dialog-centered::before { - display: block; - height: calc(100vh - 1rem); - height: -webkit-min-content; - height: -moz-min-content; - height: min-content; - content: ""; -} - -.modal-dialog-centered.modal-dialog-scrollable { - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-pack: center; - justify-content: center; - height: 100%; -} - -.modal-dialog-centered.modal-dialog-scrollable .modal-content { - max-height: none; -} - -.modal-dialog-centered.modal-dialog-scrollable::before { - content: none; -} - .modal-content { position: relative; - display: -ms-flexbox; display: flex; - -ms-flex-direction: column; flex-direction: column; width: 100%; pointer-events: auto; @@ -6036,31 +5275,26 @@ a.close.disabled { height: 100vh; background-color: #000; } - .modal-backdrop.fade { opacity: 0; } - .modal-backdrop.show { opacity: 0.5; } .modal-header { - display: -ms-flexbox; display: flex; - -ms-flex-align: start; - align-items: flex-start; - -ms-flex-pack: justify; + flex-shrink: 0; + align-items: center; justify-content: space-between; padding: 1rem 1rem; border-bottom: 1px solid #dee2e6; border-top-left-radius: calc(0.3rem - 1px); border-top-right-radius: calc(0.3rem - 1px); } - -.modal-header .close { - padding: 1rem 1rem; - margin: -1rem -1rem -1rem auto; +.modal-header .btn-close { + padding: 0.5rem 0.5rem; + margin: -0.5rem -0.5rem -0.5rem auto; } .modal-title { @@ -6070,82 +5304,191 @@ a.close.disabled { .modal-body { position: relative; - -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 1rem; } .modal-footer { - display: -ms-flexbox; display: flex; - -ms-flex-wrap: wrap; flex-wrap: wrap; - -ms-flex-align: center; + flex-shrink: 0; align-items: center; - -ms-flex-pack: end; justify-content: flex-end; padding: 0.75rem; border-top: 1px solid #dee2e6; border-bottom-right-radius: calc(0.3rem - 1px); border-bottom-left-radius: calc(0.3rem - 1px); } - .modal-footer > * { margin: 0.25rem; } -.modal-scrollbar-measure { - position: absolute; - top: -9999px; - width: 50px; - height: 50px; - overflow: scroll; -} - @media (min-width: 576px) { .modal-dialog { max-width: 500px; margin: 1.75rem auto; } + .modal-dialog-scrollable { - max-height: calc(100% - 3.5rem); - } - .modal-dialog-scrollable .modal-content { - max-height: calc(100vh - 3.5rem); + height: calc(100% - 3.5rem); } + .modal-dialog-centered { min-height: calc(100% - 3.5rem); } - .modal-dialog-centered::before { - height: calc(100vh - 3.5rem); - height: -webkit-min-content; - height: -moz-min-content; - height: min-content; - } + .modal-sm { max-width: 300px; } } - @media (min-width: 992px) { .modal-lg, - .modal-xl { +.modal-xl { max-width: 800px; } } - @media (min-width: 1200px) { .modal-xl { max-width: 1140px; } } +.modal-fullscreen { + width: 100vw; + max-width: none; + height: 100%; + margin: 0; +} +.modal-fullscreen .modal-content { + height: 100%; + border: 0; + border-radius: 0; +} +.modal-fullscreen .modal-header { + border-radius: 0; +} +.modal-fullscreen .modal-body { + overflow-y: auto; +} +.modal-fullscreen .modal-footer { + border-radius: 0; +} +@media (max-width: 575.98px) { + .modal-fullscreen-sm-down { + width: 100vw; + max-width: none; + height: 100%; + margin: 0; + } + .modal-fullscreen-sm-down .modal-content { + height: 100%; + border: 0; + border-radius: 0; + } + .modal-fullscreen-sm-down .modal-header { + border-radius: 0; + } + .modal-fullscreen-sm-down .modal-body { + overflow-y: auto; + } + .modal-fullscreen-sm-down .modal-footer { + border-radius: 0; + } +} +@media (max-width: 767.98px) { + .modal-fullscreen-md-down { + width: 100vw; + max-width: none; + height: 100%; + margin: 0; + } + .modal-fullscreen-md-down .modal-content { + height: 100%; + border: 0; + border-radius: 0; + } + .modal-fullscreen-md-down .modal-header { + border-radius: 0; + } + .modal-fullscreen-md-down .modal-body { + overflow-y: auto; + } + .modal-fullscreen-md-down .modal-footer { + border-radius: 0; + } +} +@media (max-width: 991.98px) { + .modal-fullscreen-lg-down { + width: 100vw; + max-width: none; + height: 100%; + margin: 0; + } + .modal-fullscreen-lg-down .modal-content { + height: 100%; + border: 0; + border-radius: 0; + } + .modal-fullscreen-lg-down .modal-header { + border-radius: 0; + } + .modal-fullscreen-lg-down .modal-body { + overflow-y: auto; + } + .modal-fullscreen-lg-down .modal-footer { + border-radius: 0; + } +} +@media (max-width: 1199.98px) { + .modal-fullscreen-xl-down { + width: 100vw; + max-width: none; + height: 100%; + margin: 0; + } + .modal-fullscreen-xl-down .modal-content { + height: 100%; + border: 0; + border-radius: 0; + } + .modal-fullscreen-xl-down .modal-header { + border-radius: 0; + } + .modal-fullscreen-xl-down .modal-body { + overflow-y: auto; + } + .modal-fullscreen-xl-down .modal-footer { + border-radius: 0; + } +} +@media (max-width: 1399.98px) { + .modal-fullscreen-xxl-down { + width: 100vw; + max-width: none; + height: 100%; + margin: 0; + } + .modal-fullscreen-xxl-down .modal-content { + height: 100%; + border: 0; + border-radius: 0; + } + .modal-fullscreen-xxl-down .modal-header { + border-radius: 0; + } + .modal-fullscreen-xxl-down .modal-body { + overflow-y: auto; + } + .modal-fullscreen-xxl-down .modal-footer { + border-radius: 0; + } +} .tooltip { position: absolute; - z-index: 1070; + z-index: 1080; display: block; margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: var(--bs-font-sans-serif); font-style: normal; font-weight: 400; line-height: 1.5; @@ -6163,81 +5506,70 @@ a.close.disabled { word-wrap: break-word; opacity: 0; } - .tooltip.show { opacity: 0.9; } - -.tooltip .arrow { +.tooltip .tooltip-arrow { position: absolute; display: block; width: 0.8rem; height: 0.4rem; } - -.tooltip .arrow::before { +.tooltip .tooltip-arrow::before { position: absolute; content: ""; border-color: transparent; border-style: solid; } -.bs-tooltip-top, .bs-tooltip-auto[x-placement^="top"] { +.bs-tooltip-top, .bs-tooltip-auto[data-popper-placement^=top] { padding: 0.4rem 0; } - -.bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^="top"] .arrow { +.bs-tooltip-top .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow { bottom: 0; } - -.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before { - top: 0; +.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before { + top: -1px; border-width: 0.4rem 0.4rem 0; border-top-color: #000; } -.bs-tooltip-right, .bs-tooltip-auto[x-placement^="right"] { +.bs-tooltip-end, .bs-tooltip-auto[data-popper-placement^=right] { padding: 0 0.4rem; } - -.bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^="right"] .arrow { +.bs-tooltip-end .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow { left: 0; width: 0.4rem; height: 0.8rem; } - -.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before { - right: 0; +.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before { + right: -1px; border-width: 0.4rem 0.4rem 0.4rem 0; border-right-color: #000; } -.bs-tooltip-bottom, .bs-tooltip-auto[x-placement^="bottom"] { +.bs-tooltip-bottom, .bs-tooltip-auto[data-popper-placement^=bottom] { padding: 0.4rem 0; } - -.bs-tooltip-bottom .arrow, .bs-tooltip-auto[x-placement^="bottom"] .arrow { +.bs-tooltip-bottom .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow { top: 0; } - -.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { - bottom: 0; +.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before { + bottom: -1px; border-width: 0 0.4rem 0.4rem; border-bottom-color: #000; } -.bs-tooltip-left, .bs-tooltip-auto[x-placement^="left"] { +.bs-tooltip-start, .bs-tooltip-auto[data-popper-placement^=left] { padding: 0 0.4rem; } - -.bs-tooltip-left .arrow, .bs-tooltip-auto[x-placement^="left"] .arrow { +.bs-tooltip-start .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow { right: 0; width: 0.4rem; height: 0.8rem; } - -.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before { - left: 0; +.bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before { + left: -1px; border-width: 0.4rem 0 0.4rem 0.4rem; border-left-color: #000; } @@ -6254,11 +5586,11 @@ a.close.disabled { .popover { position: absolute; top: 0; - left: 0; - z-index: 1060; + left: 0 /* rtl:ignore */; + z-index: 1070; display: block; max-width: 276px; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: var(--bs-font-sans-serif); font-style: normal; font-weight: 400; line-height: 1.5; @@ -6279,16 +5611,13 @@ a.close.disabled { border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.3rem; } - -.popover .arrow { +.popover .popover-arrow { position: absolute; display: block; width: 1rem; height: 0.5rem; - margin: 0 0.3rem; } - -.popover .arrow::before, .popover .arrow::after { +.popover .popover-arrow::before, .popover .popover-arrow::after { position: absolute; display: block; content: ""; @@ -6296,70 +5625,50 @@ a.close.disabled { border-style: solid; } -.bs-popover-top, .bs-popover-auto[x-placement^="top"] { - margin-bottom: 0.5rem; -} - -.bs-popover-top > .arrow, .bs-popover-auto[x-placement^="top"] > .arrow { +.bs-popover-top > .popover-arrow, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow { bottom: calc(-0.5rem - 1px); } - -.bs-popover-top > .arrow::before, .bs-popover-auto[x-placement^="top"] > .arrow::before { +.bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before { bottom: 0; border-width: 0.5rem 0.5rem 0; border-top-color: rgba(0, 0, 0, 0.25); } - -.bs-popover-top > .arrow::after, .bs-popover-auto[x-placement^="top"] > .arrow::after { +.bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after { bottom: 1px; border-width: 0.5rem 0.5rem 0; border-top-color: #fff; } -.bs-popover-right, .bs-popover-auto[x-placement^="right"] { - margin-left: 0.5rem; -} - -.bs-popover-right > .arrow, .bs-popover-auto[x-placement^="right"] > .arrow { +.bs-popover-end > .popover-arrow, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow { left: calc(-0.5rem - 1px); width: 0.5rem; height: 1rem; - margin: 0.3rem 0; } - -.bs-popover-right > .arrow::before, .bs-popover-auto[x-placement^="right"] > .arrow::before { +.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before { left: 0; border-width: 0.5rem 0.5rem 0.5rem 0; border-right-color: rgba(0, 0, 0, 0.25); } - -.bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^="right"] > .arrow::after { +.bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after { left: 1px; border-width: 0.5rem 0.5rem 0.5rem 0; border-right-color: #fff; } -.bs-popover-bottom, .bs-popover-auto[x-placement^="bottom"] { - margin-top: 0.5rem; -} - -.bs-popover-bottom > .arrow, .bs-popover-auto[x-placement^="bottom"] > .arrow { +.bs-popover-bottom > .popover-arrow, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow { top: calc(-0.5rem - 1px); } - -.bs-popover-bottom > .arrow::before, .bs-popover-auto[x-placement^="bottom"] > .arrow::before { +.bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before { top: 0; border-width: 0 0.5rem 0.5rem 0.5rem; border-bottom-color: rgba(0, 0, 0, 0.25); } - -.bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^="bottom"] > .arrow::after { +.bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after { top: 1px; border-width: 0 0.5rem 0.5rem 0.5rem; border-bottom-color: #fff; } - -.bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^="bottom"] .popover-header::before { +.bs-popover-bottom .popover-header::before, .bs-popover-auto[data-popper-placement^=bottom] .popover-header::before { position: absolute; top: 0; left: 50%; @@ -6367,48 +5676,40 @@ a.close.disabled { width: 1rem; margin-left: -0.5rem; content: ""; - border-bottom: 1px solid #f7f7f7; + border-bottom: 1px solid #f0f0f0; } -.bs-popover-left, .bs-popover-auto[x-placement^="left"] { - margin-right: 0.5rem; -} - -.bs-popover-left > .arrow, .bs-popover-auto[x-placement^="left"] > .arrow { +.bs-popover-start > .popover-arrow, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow { right: calc(-0.5rem - 1px); width: 0.5rem; height: 1rem; - margin: 0.3rem 0; } - -.bs-popover-left > .arrow::before, .bs-popover-auto[x-placement^="left"] > .arrow::before { +.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before { right: 0; border-width: 0.5rem 0 0.5rem 0.5rem; border-left-color: rgba(0, 0, 0, 0.25); } - -.bs-popover-left > .arrow::after, .bs-popover-auto[x-placement^="left"] > .arrow::after { +.bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after { right: 1px; border-width: 0.5rem 0 0.5rem 0.5rem; border-left-color: #fff; } .popover-header { - padding: 0.5rem 0.75rem; + padding: 0.5rem 1rem; margin-bottom: 0; font-size: 1rem; - background-color: #f7f7f7; - border-bottom: 1px solid #ebebeb; + background-color: #f0f0f0; + border-bottom: 1px solid #d8d8d8; border-top-left-radius: calc(0.3rem - 1px); border-top-right-radius: calc(0.3rem - 1px); } - .popover-header:empty { display: none; } .popover-body { - padding: 0.5rem 0.75rem; + padding: 1rem 1rem; color: #212529; } @@ -6417,7 +5718,6 @@ a.close.disabled { } .carousel.pointer-event { - -ms-touch-action: pan-y; touch-action: pan-y; } @@ -6426,7 +5726,6 @@ a.close.disabled { width: 100%; overflow: hidden; } - .carousel-inner::after { display: block; clear: both; @@ -6441,11 +5740,8 @@ a.close.disabled { margin-right: -100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; - transition: -webkit-transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out; - transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out; } - @media (prefers-reduced-motion: reduce) { .carousel-item { transition: none; @@ -6458,42 +5754,38 @@ a.close.disabled { display: block; } -.carousel-item-next:not(.carousel-item-left), -.active.carousel-item-right { - -webkit-transform: translateX(100%); +/* rtl:begin:ignore */ +.carousel-item-next:not(.carousel-item-start), +.active.carousel-item-end { transform: translateX(100%); } -.carousel-item-prev:not(.carousel-item-right), -.active.carousel-item-left { - -webkit-transform: translateX(-100%); +.carousel-item-prev:not(.carousel-item-end), +.active.carousel-item-start { transform: translateX(-100%); } +/* rtl:end:ignore */ .carousel-fade .carousel-item { opacity: 0; transition-property: opacity; - -webkit-transform: none; transform: none; } - .carousel-fade .carousel-item.active, -.carousel-fade .carousel-item-next.carousel-item-left, -.carousel-fade .carousel-item-prev.carousel-item-right { +.carousel-fade .carousel-item-next.carousel-item-start, +.carousel-fade .carousel-item-prev.carousel-item-end { z-index: 1; opacity: 1; } - -.carousel-fade .active.carousel-item-left, -.carousel-fade .active.carousel-item-right { +.carousel-fade .active.carousel-item-start, +.carousel-fade .active.carousel-item-end { z-index: 0; opacity: 0; transition: opacity 0s 0.6s; } - @media (prefers-reduced-motion: reduce) { - .carousel-fade .active.carousel-item-left, - .carousel-fade .active.carousel-item-right { + .carousel-fade .active.carousel-item-start, +.carousel-fade .active.carousel-item-end { transition: none; } } @@ -6504,26 +5796,24 @@ a.close.disabled { top: 0; bottom: 0; z-index: 1; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; width: 15%; + padding: 0; color: #fff; text-align: center; + background: none; + border: 0; opacity: 0.5; transition: opacity 0.15s ease; } - @media (prefers-reduced-motion: reduce) { .carousel-control-prev, - .carousel-control-next { +.carousel-control-next { transition: none; } } - .carousel-control-prev:hover, .carousel-control-prev:focus, .carousel-control-next:hover, .carousel-control-next:focus { @@ -6544,17 +5834,27 @@ a.close.disabled { .carousel-control-prev-icon, .carousel-control-next-icon { display: inline-block; - width: 20px; - height: 20px; - background: no-repeat 50% / 100% 100%; + width: 2rem; + height: 2rem; + background-repeat: no-repeat; + background-position: 50%; + background-size: 100% 100%; } +/* rtl:options: { + "autoRename": true, + "stringMap":[ { + "name" : "prev-next", + "search" : "prev", + "replace" : "next" + } ] +} */ .carousel-control-prev-icon { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e"); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e"); } .carousel-control-next-icon { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e"); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } .carousel-indicators { @@ -6562,41 +5862,38 @@ a.close.disabled { right: 0; bottom: 0; left: 0; - z-index: 15; - display: -ms-flexbox; + z-index: 2; display: flex; - -ms-flex-pack: center; justify-content: center; - padding-left: 0; + padding: 0; margin-right: 15%; + margin-bottom: 1rem; margin-left: 15%; list-style: none; } - -.carousel-indicators li { +.carousel-indicators [data-bs-target] { box-sizing: content-box; - -ms-flex: 0 1 auto; flex: 0 1 auto; width: 30px; height: 3px; + padding: 0; margin-right: 3px; margin-left: 3px; text-indent: -999px; cursor: pointer; background-color: #fff; background-clip: padding-box; + border: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; - opacity: .5; + opacity: 0.5; transition: opacity 0.6s ease; } - @media (prefers-reduced-motion: reduce) { - .carousel-indicators li { + .carousel-indicators [data-bs-target] { transition: none; } } - .carousel-indicators .active { opacity: 1; } @@ -6604,39 +5901,46 @@ a.close.disabled { .carousel-caption { position: absolute; right: 15%; - bottom: 20px; + bottom: 1.25rem; left: 15%; - z-index: 10; - padding-top: 20px; - padding-bottom: 20px; + padding-top: 1.25rem; + padding-bottom: 1.25rem; color: #fff; text-align: center; } +.carousel-dark .carousel-control-prev-icon, +.carousel-dark .carousel-control-next-icon { + filter: invert(1) grayscale(100); +} +.carousel-dark .carousel-indicators [data-bs-target] { + background-color: #000; +} +.carousel-dark .carousel-caption { + color: #000; +} + @-webkit-keyframes spinner-border { to { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); + transform: rotate(360deg) /* rtl:ignore */; } } @keyframes spinner-border { to { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); + transform: rotate(360deg) /* rtl:ignore */; } } - .spinner-border { display: inline-block; width: 2rem; height: 2rem; - vertical-align: text-bottom; + vertical-align: -0.125em; border: 0.25em solid currentColor; border-right-color: transparent; border-radius: 50%; - -webkit-animation: spinner-border .75s linear infinite; - animation: spinner-border .75s linear infinite; + -webkit-animation: 0.75s linear infinite spinner-border; + animation: 0.75s linear infinite spinner-border; } .spinner-border-sm { @@ -6647,38 +5951,33 @@ a.close.disabled { @-webkit-keyframes spinner-grow { 0% { - -webkit-transform: scale(0); transform: scale(0); } 50% { opacity: 1; - -webkit-transform: none; transform: none; } } @keyframes spinner-grow { 0% { - -webkit-transform: scale(0); transform: scale(0); } 50% { opacity: 1; - -webkit-transform: none; transform: none; } } - .spinner-grow { display: inline-block; width: 2rem; height: 2rem; - vertical-align: text-bottom; + vertical-align: -0.125em; background-color: currentColor; border-radius: 50%; opacity: 0; - -webkit-animation: spinner-grow .75s linear infinite; - animation: spinner-grow .75s linear infinite; + -webkit-animation: 0.75s linear infinite spinner-grow; + animation: 0.75s linear infinite spinner-grow; } .spinner-grow-sm { @@ -6686,6 +5985,280 @@ a.close.disabled { height: 1rem; } +@media (prefers-reduced-motion: reduce) { + .spinner-border, +.spinner-grow { + -webkit-animation-duration: 1.5s; + animation-duration: 1.5s; + } +} +.offcanvas { + position: fixed; + bottom: 0; + z-index: 1050; + display: flex; + flex-direction: column; + max-width: 100%; + visibility: hidden; + background-color: #fff; + background-clip: padding-box; + outline: 0; + transition: transform 0.3s ease-in-out; +} +@media (prefers-reduced-motion: reduce) { + .offcanvas { + transition: none; + } +} + +.offcanvas-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem 1rem; +} +.offcanvas-header .btn-close { + padding: 0.5rem 0.5rem; + margin: -0.5rem -0.5rem -0.5rem auto; +} + +.offcanvas-title { + margin-bottom: 0; + line-height: 1.5; +} + +.offcanvas-body { + flex-grow: 1; + padding: 1rem 1rem; + overflow-y: auto; +} + +.offcanvas-start { + top: 0; + left: 0; + width: 400px; + border-right: 1px solid rgba(0, 0, 0, 0.2); + transform: translateX(-100%); +} + +.offcanvas-end { + top: 0; + right: 0; + width: 400px; + border-left: 1px solid rgba(0, 0, 0, 0.2); + transform: translateX(100%); +} + +.offcanvas-top { + top: 0; + right: 0; + left: 0; + height: 30vh; + max-height: 100%; + border-bottom: 1px solid rgba(0, 0, 0, 0.2); + transform: translateY(-100%); +} + +.offcanvas-bottom { + right: 0; + left: 0; + height: 30vh; + max-height: 100%; + border-top: 1px solid rgba(0, 0, 0, 0.2); + transform: translateY(100%); +} + +.offcanvas.show { + transform: none; +} + +.clearfix::after { + display: block; + clear: both; + content: ""; +} + +.link-primary { + color: #0d6efd; +} +.link-primary:hover, .link-primary:focus { + color: #0a58ca; +} + +.link-secondary { + color: #6c757d; +} +.link-secondary:hover, .link-secondary:focus { + color: #565e64; +} + +.link-success { + color: #198754; +} +.link-success:hover, .link-success:focus { + color: #146c43; +} + +.link-info { + color: #0dcaf0; +} +.link-info:hover, .link-info:focus { + color: #3dd5f3; +} + +.link-warning { + color: #ffc107; +} +.link-warning:hover, .link-warning:focus { + color: #ffcd39; +} + +.link-danger { + color: #dc3545; +} +.link-danger:hover, .link-danger:focus { + color: #b02a37; +} + +.link-light { + color: #f8f9fa; +} +.link-light:hover, .link-light:focus { + color: #f9fafb; +} + +.link-dark { + color: #212529; +} +.link-dark:hover, .link-dark:focus { + color: #1a1e21; +} + +.ratio { + position: relative; + width: 100%; +} +.ratio::before { + display: block; + padding-top: var(--bs-aspect-ratio); + content: ""; +} +.ratio > * { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.ratio-1x1 { + --bs-aspect-ratio: 100%; +} + +.ratio-4x3 { + --bs-aspect-ratio: calc(3 / 4 * 100%); +} + +.ratio-16x9 { + --bs-aspect-ratio: calc(9 / 16 * 100%); +} + +.ratio-21x9 { + --bs-aspect-ratio: calc(9 / 21 * 100%); +} + +.fixed-top { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; +} + +.fixed-bottom { + position: fixed; + right: 0; + bottom: 0; + left: 0; + z-index: 1030; +} + +.sticky-top { + position: -webkit-sticky; + position: sticky; + top: 0; + z-index: 1020; +} + +@media (min-width: 576px) { + .sticky-sm-top { + position: -webkit-sticky; + position: sticky; + top: 0; + z-index: 1020; + } +} +@media (min-width: 768px) { + .sticky-md-top { + position: -webkit-sticky; + position: sticky; + top: 0; + z-index: 1020; + } +} +@media (min-width: 992px) { + .sticky-lg-top { + position: -webkit-sticky; + position: sticky; + top: 0; + z-index: 1020; + } +} +@media (min-width: 1200px) { + .sticky-xl-top { + position: -webkit-sticky; + position: sticky; + top: 0; + z-index: 1020; + } +} +@media (min-width: 1400px) { + .sticky-xxl-top { + position: -webkit-sticky; + position: sticky; + top: 0; + z-index: 1020; + } +} +.visually-hidden, +.visually-hidden-focusable:not(:focus):not(:focus-within) { + position: absolute !important; + width: 1px !important; + height: 1px !important; + padding: 0 !important; + margin: -1px !important; + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; + white-space: nowrap !important; + border: 0 !important; +} + +.stretched-link::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; + content: ""; +} + +.text-truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + .align-baseline { vertical-align: baseline !important; } @@ -6710,222 +6283,32 @@ a.close.disabled { vertical-align: text-top !important; } -.bg-primary { - background-color: #007bff !important; +.float-start { + float: left !important; } -a.bg-primary:hover, a.bg-primary:focus, -button.bg-primary:hover, -button.bg-primary:focus { - background-color: #0062cc !important; +.float-end { + float: right !important; } -.bg-secondary { - background-color: #6c757d !important; +.float-none { + float: none !important; } -a.bg-secondary:hover, a.bg-secondary:focus, -button.bg-secondary:hover, -button.bg-secondary:focus { - background-color: #545b62 !important; +.overflow-auto { + overflow: auto !important; } -.bg-success { - background-color: #28a745 !important; +.overflow-hidden { + overflow: hidden !important; } -a.bg-success:hover, a.bg-success:focus, -button.bg-success:hover, -button.bg-success:focus { - background-color: #1e7e34 !important; +.overflow-visible { + overflow: visible !important; } -.bg-info { - background-color: #17a2b8 !important; -} - -a.bg-info:hover, a.bg-info:focus, -button.bg-info:hover, -button.bg-info:focus { - background-color: #117a8b !important; -} - -.bg-warning { - background-color: #ffc107 !important; -} - -a.bg-warning:hover, a.bg-warning:focus, -button.bg-warning:hover, -button.bg-warning:focus { - background-color: #d39e00 !important; -} - -.bg-danger { - background-color: #dc3545 !important; -} - -a.bg-danger:hover, a.bg-danger:focus, -button.bg-danger:hover, -button.bg-danger:focus { - background-color: #bd2130 !important; -} - -.bg-light { - background-color: #f8f9fa !important; -} - -a.bg-light:hover, a.bg-light:focus, -button.bg-light:hover, -button.bg-light:focus { - background-color: #dae0e5 !important; -} - -.bg-dark { - background-color: #343a40 !important; -} - -a.bg-dark:hover, a.bg-dark:focus, -button.bg-dark:hover, -button.bg-dark:focus { - background-color: #1d2124 !important; -} - -.bg-white { - background-color: #fff !important; -} - -.bg-transparent { - background-color: transparent !important; -} - -.border { - border: 1px solid #dee2e6 !important; -} - -.border-top { - border-top: 1px solid #dee2e6 !important; -} - -.border-right { - border-right: 1px solid #dee2e6 !important; -} - -.border-bottom { - border-bottom: 1px solid #dee2e6 !important; -} - -.border-left { - border-left: 1px solid #dee2e6 !important; -} - -.border-0 { - border: 0 !important; -} - -.border-top-0 { - border-top: 0 !important; -} - -.border-right-0 { - border-right: 0 !important; -} - -.border-bottom-0 { - border-bottom: 0 !important; -} - -.border-left-0 { - border-left: 0 !important; -} - -.border-primary { - border-color: #007bff !important; -} - -.border-secondary { - border-color: #6c757d !important; -} - -.border-success { - border-color: #28a745 !important; -} - -.border-info { - border-color: #17a2b8 !important; -} - -.border-warning { - border-color: #ffc107 !important; -} - -.border-danger { - border-color: #dc3545 !important; -} - -.border-light { - border-color: #f8f9fa !important; -} - -.border-dark { - border-color: #343a40 !important; -} - -.border-white { - border-color: #fff !important; -} - -.rounded-sm { - border-radius: 0.2rem !important; -} - -.rounded { - border-radius: 0.25rem !important; -} - -.rounded-top { - border-top-left-radius: 0.25rem !important; - border-top-right-radius: 0.25rem !important; -} - -.rounded-right { - border-top-right-radius: 0.25rem !important; - border-bottom-right-radius: 0.25rem !important; -} - -.rounded-bottom { - border-bottom-right-radius: 0.25rem !important; - border-bottom-left-radius: 0.25rem !important; -} - -.rounded-left { - border-top-left-radius: 0.25rem !important; - border-bottom-left-radius: 0.25rem !important; -} - -.rounded-lg { - border-radius: 0.3rem !important; -} - -.rounded-circle { - border-radius: 50% !important; -} - -.rounded-pill { - border-radius: 50rem !important; -} - -.rounded-0 { - border-radius: 0 !important; -} - -.clearfix::after { - display: block; - clear: both; - content: ""; -} - -.d-none { - display: none !important; +.overflow-scroll { + overflow: scroll !important; } .d-inline { @@ -6940,6 +6323,10 @@ button.bg-dark:focus { display: block !important; } +.d-grid { + display: grid !important; +} + .d-table { display: table !important; } @@ -6953,1031 +6340,31 @@ button.bg-dark:focus { } .d-flex { - display: -ms-flexbox !important; display: flex !important; } .d-inline-flex { - display: -ms-inline-flexbox !important; display: inline-flex !important; } -@media (min-width: 576px) { - .d-sm-none { - display: none !important; - } - .d-sm-inline { - display: inline !important; - } - .d-sm-inline-block { - display: inline-block !important; - } - .d-sm-block { - display: block !important; - } - .d-sm-table { - display: table !important; - } - .d-sm-table-row { - display: table-row !important; - } - .d-sm-table-cell { - display: table-cell !important; - } - .d-sm-flex { - display: -ms-flexbox !important; - display: flex !important; - } - .d-sm-inline-flex { - display: -ms-inline-flexbox !important; - display: inline-flex !important; - } +.d-none { + display: none !important; } -@media (min-width: 768px) { - .d-md-none { - display: none !important; - } - .d-md-inline { - display: inline !important; - } - .d-md-inline-block { - display: inline-block !important; - } - .d-md-block { - display: block !important; - } - .d-md-table { - display: table !important; - } - .d-md-table-row { - display: table-row !important; - } - .d-md-table-cell { - display: table-cell !important; - } - .d-md-flex { - display: -ms-flexbox !important; - display: flex !important; - } - .d-md-inline-flex { - display: -ms-inline-flexbox !important; - display: inline-flex !important; - } +.shadow { + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; } -@media (min-width: 992px) { - .d-lg-none { - display: none !important; - } - .d-lg-inline { - display: inline !important; - } - .d-lg-inline-block { - display: inline-block !important; - } - .d-lg-block { - display: block !important; - } - .d-lg-table { - display: table !important; - } - .d-lg-table-row { - display: table-row !important; - } - .d-lg-table-cell { - display: table-cell !important; - } - .d-lg-flex { - display: -ms-flexbox !important; - display: flex !important; - } - .d-lg-inline-flex { - display: -ms-inline-flexbox !important; - display: inline-flex !important; - } +.shadow-sm { + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; } -@media (min-width: 1200px) { - .d-xl-none { - display: none !important; - } - .d-xl-inline { - display: inline !important; - } - .d-xl-inline-block { - display: inline-block !important; - } - .d-xl-block { - display: block !important; - } - .d-xl-table { - display: table !important; - } - .d-xl-table-row { - display: table-row !important; - } - .d-xl-table-cell { - display: table-cell !important; - } - .d-xl-flex { - display: -ms-flexbox !important; - display: flex !important; - } - .d-xl-inline-flex { - display: -ms-inline-flexbox !important; - display: inline-flex !important; - } +.shadow-lg { + box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; } -@media print { - .d-print-none { - display: none !important; - } - .d-print-inline { - display: inline !important; - } - .d-print-inline-block { - display: inline-block !important; - } - .d-print-block { - display: block !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: -ms-flexbox !important; - display: flex !important; - } - .d-print-inline-flex { - display: -ms-inline-flexbox !important; - display: inline-flex !important; - } -} - -.embed-responsive { - position: relative; - display: block; - width: 100%; - padding: 0; - overflow: hidden; -} - -.embed-responsive::before { - display: block; - content: ""; -} - -.embed-responsive .embed-responsive-item, -.embed-responsive iframe, -.embed-responsive embed, -.embed-responsive object, -.embed-responsive video { - position: absolute; - top: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - border: 0; -} - -.embed-responsive-21by9::before { - padding-top: 42.857143%; -} - -.embed-responsive-16by9::before { - padding-top: 56.25%; -} - -.embed-responsive-4by3::before { - padding-top: 75%; -} - -.embed-responsive-1by1::before { - padding-top: 100%; -} - -.flex-row { - -ms-flex-direction: row !important; - flex-direction: row !important; -} - -.flex-column { - -ms-flex-direction: column !important; - flex-direction: column !important; -} - -.flex-row-reverse { - -ms-flex-direction: row-reverse !important; - flex-direction: row-reverse !important; -} - -.flex-column-reverse { - -ms-flex-direction: column-reverse !important; - flex-direction: column-reverse !important; -} - -.flex-wrap { - -ms-flex-wrap: wrap !important; - flex-wrap: wrap !important; -} - -.flex-nowrap { - -ms-flex-wrap: nowrap !important; - flex-wrap: nowrap !important; -} - -.flex-wrap-reverse { - -ms-flex-wrap: wrap-reverse !important; - flex-wrap: wrap-reverse !important; -} - -.flex-fill { - -ms-flex: 1 1 auto !important; - flex: 1 1 auto !important; -} - -.flex-grow-0 { - -ms-flex-positive: 0 !important; - flex-grow: 0 !important; -} - -.flex-grow-1 { - -ms-flex-positive: 1 !important; - flex-grow: 1 !important; -} - -.flex-shrink-0 { - -ms-flex-negative: 0 !important; - flex-shrink: 0 !important; -} - -.flex-shrink-1 { - -ms-flex-negative: 1 !important; - flex-shrink: 1 !important; -} - -.justify-content-start { - -ms-flex-pack: start !important; - justify-content: flex-start !important; -} - -.justify-content-end { - -ms-flex-pack: end !important; - justify-content: flex-end !important; -} - -.justify-content-center { - -ms-flex-pack: center !important; - justify-content: center !important; -} - -.justify-content-between { - -ms-flex-pack: justify !important; - justify-content: space-between !important; -} - -.justify-content-around { - -ms-flex-pack: distribute !important; - justify-content: space-around !important; -} - -.align-items-start { - -ms-flex-align: start !important; - align-items: flex-start !important; -} - -.align-items-end { - -ms-flex-align: end !important; - align-items: flex-end !important; -} - -.align-items-center { - -ms-flex-align: center !important; - align-items: center !important; -} - -.align-items-baseline { - -ms-flex-align: baseline !important; - align-items: baseline !important; -} - -.align-items-stretch { - -ms-flex-align: stretch !important; - align-items: stretch !important; -} - -.align-content-start { - -ms-flex-line-pack: start !important; - align-content: flex-start !important; -} - -.align-content-end { - -ms-flex-line-pack: end !important; - align-content: flex-end !important; -} - -.align-content-center { - -ms-flex-line-pack: center !important; - align-content: center !important; -} - -.align-content-between { - -ms-flex-line-pack: justify !important; - align-content: space-between !important; -} - -.align-content-around { - -ms-flex-line-pack: distribute !important; - align-content: space-around !important; -} - -.align-content-stretch { - -ms-flex-line-pack: stretch !important; - align-content: stretch !important; -} - -.align-self-auto { - -ms-flex-item-align: auto !important; - align-self: auto !important; -} - -.align-self-start { - -ms-flex-item-align: start !important; - align-self: flex-start !important; -} - -.align-self-end { - -ms-flex-item-align: end !important; - align-self: flex-end !important; -} - -.align-self-center { - -ms-flex-item-align: center !important; - align-self: center !important; -} - -.align-self-baseline { - -ms-flex-item-align: baseline !important; - align-self: baseline !important; -} - -.align-self-stretch { - -ms-flex-item-align: stretch !important; - align-self: stretch !important; -} - -@media (min-width: 576px) { - .flex-sm-row { - -ms-flex-direction: row !important; - flex-direction: row !important; - } - .flex-sm-column { - -ms-flex-direction: column !important; - flex-direction: column !important; - } - .flex-sm-row-reverse { - -ms-flex-direction: row-reverse !important; - flex-direction: row-reverse !important; - } - .flex-sm-column-reverse { - -ms-flex-direction: column-reverse !important; - flex-direction: column-reverse !important; - } - .flex-sm-wrap { - -ms-flex-wrap: wrap !important; - flex-wrap: wrap !important; - } - .flex-sm-nowrap { - -ms-flex-wrap: nowrap !important; - flex-wrap: nowrap !important; - } - .flex-sm-wrap-reverse { - -ms-flex-wrap: wrap-reverse !important; - flex-wrap: wrap-reverse !important; - } - .flex-sm-fill { - -ms-flex: 1 1 auto !important; - flex: 1 1 auto !important; - } - .flex-sm-grow-0 { - -ms-flex-positive: 0 !important; - flex-grow: 0 !important; - } - .flex-sm-grow-1 { - -ms-flex-positive: 1 !important; - flex-grow: 1 !important; - } - .flex-sm-shrink-0 { - -ms-flex-negative: 0 !important; - flex-shrink: 0 !important; - } - .flex-sm-shrink-1 { - -ms-flex-negative: 1 !important; - flex-shrink: 1 !important; - } - .justify-content-sm-start { - -ms-flex-pack: start !important; - justify-content: flex-start !important; - } - .justify-content-sm-end { - -ms-flex-pack: end !important; - justify-content: flex-end !important; - } - .justify-content-sm-center { - -ms-flex-pack: center !important; - justify-content: center !important; - } - .justify-content-sm-between { - -ms-flex-pack: justify !important; - justify-content: space-between !important; - } - .justify-content-sm-around { - -ms-flex-pack: distribute !important; - justify-content: space-around !important; - } - .align-items-sm-start { - -ms-flex-align: start !important; - align-items: flex-start !important; - } - .align-items-sm-end { - -ms-flex-align: end !important; - align-items: flex-end !important; - } - .align-items-sm-center { - -ms-flex-align: center !important; - align-items: center !important; - } - .align-items-sm-baseline { - -ms-flex-align: baseline !important; - align-items: baseline !important; - } - .align-items-sm-stretch { - -ms-flex-align: stretch !important; - align-items: stretch !important; - } - .align-content-sm-start { - -ms-flex-line-pack: start !important; - align-content: flex-start !important; - } - .align-content-sm-end { - -ms-flex-line-pack: end !important; - align-content: flex-end !important; - } - .align-content-sm-center { - -ms-flex-line-pack: center !important; - align-content: center !important; - } - .align-content-sm-between { - -ms-flex-line-pack: justify !important; - align-content: space-between !important; - } - .align-content-sm-around { - -ms-flex-line-pack: distribute !important; - align-content: space-around !important; - } - .align-content-sm-stretch { - -ms-flex-line-pack: stretch !important; - align-content: stretch !important; - } - .align-self-sm-auto { - -ms-flex-item-align: auto !important; - align-self: auto !important; - } - .align-self-sm-start { - -ms-flex-item-align: start !important; - align-self: flex-start !important; - } - .align-self-sm-end { - -ms-flex-item-align: end !important; - align-self: flex-end !important; - } - .align-self-sm-center { - -ms-flex-item-align: center !important; - align-self: center !important; - } - .align-self-sm-baseline { - -ms-flex-item-align: baseline !important; - align-self: baseline !important; - } - .align-self-sm-stretch { - -ms-flex-item-align: stretch !important; - align-self: stretch !important; - } -} - -@media (min-width: 768px) { - .flex-md-row { - -ms-flex-direction: row !important; - flex-direction: row !important; - } - .flex-md-column { - -ms-flex-direction: column !important; - flex-direction: column !important; - } - .flex-md-row-reverse { - -ms-flex-direction: row-reverse !important; - flex-direction: row-reverse !important; - } - .flex-md-column-reverse { - -ms-flex-direction: column-reverse !important; - flex-direction: column-reverse !important; - } - .flex-md-wrap { - -ms-flex-wrap: wrap !important; - flex-wrap: wrap !important; - } - .flex-md-nowrap { - -ms-flex-wrap: nowrap !important; - flex-wrap: nowrap !important; - } - .flex-md-wrap-reverse { - -ms-flex-wrap: wrap-reverse !important; - flex-wrap: wrap-reverse !important; - } - .flex-md-fill { - -ms-flex: 1 1 auto !important; - flex: 1 1 auto !important; - } - .flex-md-grow-0 { - -ms-flex-positive: 0 !important; - flex-grow: 0 !important; - } - .flex-md-grow-1 { - -ms-flex-positive: 1 !important; - flex-grow: 1 !important; - } - .flex-md-shrink-0 { - -ms-flex-negative: 0 !important; - flex-shrink: 0 !important; - } - .flex-md-shrink-1 { - -ms-flex-negative: 1 !important; - flex-shrink: 1 !important; - } - .justify-content-md-start { - -ms-flex-pack: start !important; - justify-content: flex-start !important; - } - .justify-content-md-end { - -ms-flex-pack: end !important; - justify-content: flex-end !important; - } - .justify-content-md-center { - -ms-flex-pack: center !important; - justify-content: center !important; - } - .justify-content-md-between { - -ms-flex-pack: justify !important; - justify-content: space-between !important; - } - .justify-content-md-around { - -ms-flex-pack: distribute !important; - justify-content: space-around !important; - } - .align-items-md-start { - -ms-flex-align: start !important; - align-items: flex-start !important; - } - .align-items-md-end { - -ms-flex-align: end !important; - align-items: flex-end !important; - } - .align-items-md-center { - -ms-flex-align: center !important; - align-items: center !important; - } - .align-items-md-baseline { - -ms-flex-align: baseline !important; - align-items: baseline !important; - } - .align-items-md-stretch { - -ms-flex-align: stretch !important; - align-items: stretch !important; - } - .align-content-md-start { - -ms-flex-line-pack: start !important; - align-content: flex-start !important; - } - .align-content-md-end { - -ms-flex-line-pack: end !important; - align-content: flex-end !important; - } - .align-content-md-center { - -ms-flex-line-pack: center !important; - align-content: center !important; - } - .align-content-md-between { - -ms-flex-line-pack: justify !important; - align-content: space-between !important; - } - .align-content-md-around { - -ms-flex-line-pack: distribute !important; - align-content: space-around !important; - } - .align-content-md-stretch { - -ms-flex-line-pack: stretch !important; - align-content: stretch !important; - } - .align-self-md-auto { - -ms-flex-item-align: auto !important; - align-self: auto !important; - } - .align-self-md-start { - -ms-flex-item-align: start !important; - align-self: flex-start !important; - } - .align-self-md-end { - -ms-flex-item-align: end !important; - align-self: flex-end !important; - } - .align-self-md-center { - -ms-flex-item-align: center !important; - align-self: center !important; - } - .align-self-md-baseline { - -ms-flex-item-align: baseline !important; - align-self: baseline !important; - } - .align-self-md-stretch { - -ms-flex-item-align: stretch !important; - align-self: stretch !important; - } -} - -@media (min-width: 992px) { - .flex-lg-row { - -ms-flex-direction: row !important; - flex-direction: row !important; - } - .flex-lg-column { - -ms-flex-direction: column !important; - flex-direction: column !important; - } - .flex-lg-row-reverse { - -ms-flex-direction: row-reverse !important; - flex-direction: row-reverse !important; - } - .flex-lg-column-reverse { - -ms-flex-direction: column-reverse !important; - flex-direction: column-reverse !important; - } - .flex-lg-wrap { - -ms-flex-wrap: wrap !important; - flex-wrap: wrap !important; - } - .flex-lg-nowrap { - -ms-flex-wrap: nowrap !important; - flex-wrap: nowrap !important; - } - .flex-lg-wrap-reverse { - -ms-flex-wrap: wrap-reverse !important; - flex-wrap: wrap-reverse !important; - } - .flex-lg-fill { - -ms-flex: 1 1 auto !important; - flex: 1 1 auto !important; - } - .flex-lg-grow-0 { - -ms-flex-positive: 0 !important; - flex-grow: 0 !important; - } - .flex-lg-grow-1 { - -ms-flex-positive: 1 !important; - flex-grow: 1 !important; - } - .flex-lg-shrink-0 { - -ms-flex-negative: 0 !important; - flex-shrink: 0 !important; - } - .flex-lg-shrink-1 { - -ms-flex-negative: 1 !important; - flex-shrink: 1 !important; - } - .justify-content-lg-start { - -ms-flex-pack: start !important; - justify-content: flex-start !important; - } - .justify-content-lg-end { - -ms-flex-pack: end !important; - justify-content: flex-end !important; - } - .justify-content-lg-center { - -ms-flex-pack: center !important; - justify-content: center !important; - } - .justify-content-lg-between { - -ms-flex-pack: justify !important; - justify-content: space-between !important; - } - .justify-content-lg-around { - -ms-flex-pack: distribute !important; - justify-content: space-around !important; - } - .align-items-lg-start { - -ms-flex-align: start !important; - align-items: flex-start !important; - } - .align-items-lg-end { - -ms-flex-align: end !important; - align-items: flex-end !important; - } - .align-items-lg-center { - -ms-flex-align: center !important; - align-items: center !important; - } - .align-items-lg-baseline { - -ms-flex-align: baseline !important; - align-items: baseline !important; - } - .align-items-lg-stretch { - -ms-flex-align: stretch !important; - align-items: stretch !important; - } - .align-content-lg-start { - -ms-flex-line-pack: start !important; - align-content: flex-start !important; - } - .align-content-lg-end { - -ms-flex-line-pack: end !important; - align-content: flex-end !important; - } - .align-content-lg-center { - -ms-flex-line-pack: center !important; - align-content: center !important; - } - .align-content-lg-between { - -ms-flex-line-pack: justify !important; - align-content: space-between !important; - } - .align-content-lg-around { - -ms-flex-line-pack: distribute !important; - align-content: space-around !important; - } - .align-content-lg-stretch { - -ms-flex-line-pack: stretch !important; - align-content: stretch !important; - } - .align-self-lg-auto { - -ms-flex-item-align: auto !important; - align-self: auto !important; - } - .align-self-lg-start { - -ms-flex-item-align: start !important; - align-self: flex-start !important; - } - .align-self-lg-end { - -ms-flex-item-align: end !important; - align-self: flex-end !important; - } - .align-self-lg-center { - -ms-flex-item-align: center !important; - align-self: center !important; - } - .align-self-lg-baseline { - -ms-flex-item-align: baseline !important; - align-self: baseline !important; - } - .align-self-lg-stretch { - -ms-flex-item-align: stretch !important; - align-self: stretch !important; - } -} - -@media (min-width: 1200px) { - .flex-xl-row { - -ms-flex-direction: row !important; - flex-direction: row !important; - } - .flex-xl-column { - -ms-flex-direction: column !important; - flex-direction: column !important; - } - .flex-xl-row-reverse { - -ms-flex-direction: row-reverse !important; - flex-direction: row-reverse !important; - } - .flex-xl-column-reverse { - -ms-flex-direction: column-reverse !important; - flex-direction: column-reverse !important; - } - .flex-xl-wrap { - -ms-flex-wrap: wrap !important; - flex-wrap: wrap !important; - } - .flex-xl-nowrap { - -ms-flex-wrap: nowrap !important; - flex-wrap: nowrap !important; - } - .flex-xl-wrap-reverse { - -ms-flex-wrap: wrap-reverse !important; - flex-wrap: wrap-reverse !important; - } - .flex-xl-fill { - -ms-flex: 1 1 auto !important; - flex: 1 1 auto !important; - } - .flex-xl-grow-0 { - -ms-flex-positive: 0 !important; - flex-grow: 0 !important; - } - .flex-xl-grow-1 { - -ms-flex-positive: 1 !important; - flex-grow: 1 !important; - } - .flex-xl-shrink-0 { - -ms-flex-negative: 0 !important; - flex-shrink: 0 !important; - } - .flex-xl-shrink-1 { - -ms-flex-negative: 1 !important; - flex-shrink: 1 !important; - } - .justify-content-xl-start { - -ms-flex-pack: start !important; - justify-content: flex-start !important; - } - .justify-content-xl-end { - -ms-flex-pack: end !important; - justify-content: flex-end !important; - } - .justify-content-xl-center { - -ms-flex-pack: center !important; - justify-content: center !important; - } - .justify-content-xl-between { - -ms-flex-pack: justify !important; - justify-content: space-between !important; - } - .justify-content-xl-around { - -ms-flex-pack: distribute !important; - justify-content: space-around !important; - } - .align-items-xl-start { - -ms-flex-align: start !important; - align-items: flex-start !important; - } - .align-items-xl-end { - -ms-flex-align: end !important; - align-items: flex-end !important; - } - .align-items-xl-center { - -ms-flex-align: center !important; - align-items: center !important; - } - .align-items-xl-baseline { - -ms-flex-align: baseline !important; - align-items: baseline !important; - } - .align-items-xl-stretch { - -ms-flex-align: stretch !important; - align-items: stretch !important; - } - .align-content-xl-start { - -ms-flex-line-pack: start !important; - align-content: flex-start !important; - } - .align-content-xl-end { - -ms-flex-line-pack: end !important; - align-content: flex-end !important; - } - .align-content-xl-center { - -ms-flex-line-pack: center !important; - align-content: center !important; - } - .align-content-xl-between { - -ms-flex-line-pack: justify !important; - align-content: space-between !important; - } - .align-content-xl-around { - -ms-flex-line-pack: distribute !important; - align-content: space-around !important; - } - .align-content-xl-stretch { - -ms-flex-line-pack: stretch !important; - align-content: stretch !important; - } - .align-self-xl-auto { - -ms-flex-item-align: auto !important; - align-self: auto !important; - } - .align-self-xl-start { - -ms-flex-item-align: start !important; - align-self: flex-start !important; - } - .align-self-xl-end { - -ms-flex-item-align: end !important; - align-self: flex-end !important; - } - .align-self-xl-center { - -ms-flex-item-align: center !important; - align-self: center !important; - } - .align-self-xl-baseline { - -ms-flex-item-align: baseline !important; - align-self: baseline !important; - } - .align-self-xl-stretch { - -ms-flex-item-align: stretch !important; - align-self: stretch !important; - } -} - -.float-left { - float: left !important; -} - -.float-right { - float: right !important; -} - -.float-none { - float: none !important; -} - -@media (min-width: 576px) { - .float-sm-left { - float: left !important; - } - .float-sm-right { - float: right !important; - } - .float-sm-none { - float: none !important; - } -} - -@media (min-width: 768px) { - .float-md-left { - float: left !important; - } - .float-md-right { - float: right !important; - } - .float-md-none { - float: none !important; - } -} - -@media (min-width: 992px) { - .float-lg-left { - float: left !important; - } - .float-lg-right { - float: right !important; - } - .float-lg-none { - float: none !important; - } -} - -@media (min-width: 1200px) { - .float-xl-left { - float: left !important; - } - .float-xl-right { - float: right !important; - } - .float-xl-none { - float: none !important; - } -} - -.user-select-all { - -webkit-user-select: all !important; - -moz-user-select: all !important; - -ms-user-select: all !important; - user-select: all !important; -} - -.user-select-auto { - -webkit-user-select: auto !important; - -moz-user-select: auto !important; - -ms-user-select: auto !important; - user-select: auto !important; -} - -.user-select-none { - -webkit-user-select: none !important; - -moz-user-select: none !important; - -ms-user-select: none !important; - user-select: none !important; -} - -.overflow-auto { - overflow: auto !important; -} - -.overflow-hidden { - overflow: hidden !important; +.shadow-none { + box-shadow: none !important; } .position-static { @@ -8001,66 +6388,160 @@ button.bg-dark:focus { position: sticky !important; } -.fixed-top { - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: 1030; +.top-0 { + top: 0 !important; } -.fixed-bottom { - position: fixed; - right: 0; - bottom: 0; - left: 0; - z-index: 1030; +.top-50 { + top: 50% !important; } -@supports ((position: -webkit-sticky) or (position: sticky)) { - .sticky-top { - position: -webkit-sticky; - position: sticky; - top: 0; - z-index: 1020; - } +.top-100 { + top: 100% !important; } -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; +.bottom-0 { + bottom: 0 !important; } -.sr-only-focusable:active, .sr-only-focusable:focus { - position: static; - width: auto; - height: auto; - overflow: visible; - clip: auto; - white-space: normal; +.bottom-50 { + bottom: 50% !important; } -.shadow-sm { - box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; +.bottom-100 { + bottom: 100% !important; } -.shadow { - box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; +.start-0 { + left: 0 !important; } -.shadow-lg { - box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; +.start-50 { + left: 50% !important; } -.shadow-none { - box-shadow: none !important; +.start-100 { + left: 100% !important; +} + +.end-0 { + right: 0 !important; +} + +.end-50 { + right: 50% !important; +} + +.end-100 { + right: 100% !important; +} + +.translate-middle { + transform: translate(-50%, -50%) !important; +} + +.translate-middle-x { + transform: translateX(-50%) !important; +} + +.translate-middle-y { + transform: translateY(-50%) !important; +} + +.border { + border: 1px solid #dee2e6 !important; +} + +.border-0 { + border: 0 !important; +} + +.border-top { + border-top: 1px solid #dee2e6 !important; +} + +.border-top-0 { + border-top: 0 !important; +} + +.border-end { + border-right: 1px solid #dee2e6 !important; +} + +.border-end-0 { + border-right: 0 !important; +} + +.border-bottom { + border-bottom: 1px solid #dee2e6 !important; +} + +.border-bottom-0 { + border-bottom: 0 !important; +} + +.border-start { + border-left: 1px solid #dee2e6 !important; +} + +.border-start-0 { + border-left: 0 !important; +} + +.border-primary { + border-color: #0d6efd !important; +} + +.border-secondary { + border-color: #6c757d !important; +} + +.border-success { + border-color: #198754 !important; +} + +.border-info { + border-color: #0dcaf0 !important; +} + +.border-warning { + border-color: #ffc107 !important; +} + +.border-danger { + border-color: #dc3545 !important; +} + +.border-light { + border-color: #f8f9fa !important; +} + +.border-dark { + border-color: #212529 !important; +} + +.border-white { + border-color: #fff !important; +} + +.border-1 { + border-width: 1px !important; +} + +.border-2 { + border-width: 2px !important; +} + +.border-3 { + border-width: 3px !important; +} + +.border-4 { + border-width: 4px !important; +} + +.border-5 { + border-width: 5px !important; } .w-25 { @@ -8083,6 +6564,18 @@ button.bg-dark:focus { width: auto !important; } +.mw-100 { + max-width: 100% !important; +} + +.vw-100 { + width: 100vw !important; +} + +.min-vw-100 { + min-width: 100vw !important; +} + .h-25 { height: 25% !important; } @@ -8103,1881 +6596,681 @@ button.bg-dark:focus { height: auto !important; } -.mw-100 { - max-width: 100% !important; -} - .mh-100 { max-height: 100% !important; } -.min-vw-100 { - min-width: 100vw !important; -} - -.min-vh-100 { - min-height: 100vh !important; -} - -.vw-100 { - width: 100vw !important; -} - .vh-100 { height: 100vh !important; } +.min-vh-100 { + min-height: 100vh !important; +} + +.flex-fill { + flex: 1 1 auto !important; +} + +.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-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; +} + +.flex-wrap { + flex-wrap: wrap !important; +} + +.flex-nowrap { + flex-wrap: nowrap !important; +} + +.flex-wrap-reverse { + flex-wrap: wrap-reverse !important; +} + +.gap-0 { + gap: 0 !important; +} + +.gap-1 { + gap: 0.25rem !important; +} + +.gap-2 { + gap: 0.5rem !important; +} + +.gap-3 { + gap: 1rem !important; +} + +.gap-4 { + gap: 1.5rem !important; +} + +.gap-5 { + gap: 3rem !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-first { + order: -1 !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; +} + .m-0 { margin: 0 !important; } -.mt-0, -.my-0 { - margin-top: 0 !important; -} - -.mr-0, -.mx-0 { - margin-right: 0 !important; -} - -.mb-0, -.my-0 { - margin-bottom: 0 !important; -} - -.ml-0, -.mx-0 { - margin-left: 0 !important; -} - .m-1 { margin: 0.25rem !important; } -.mt-1, -.my-1 { - margin-top: 0.25rem !important; -} - -.mr-1, -.mx-1 { - margin-right: 0.25rem !important; -} - -.mb-1, -.my-1 { - margin-bottom: 0.25rem !important; -} - -.ml-1, -.mx-1 { - margin-left: 0.25rem !important; -} - .m-2 { margin: 0.5rem !important; } -.mt-2, -.my-2 { - margin-top: 0.5rem !important; -} - -.mr-2, -.mx-2 { - margin-right: 0.5rem !important; -} - -.mb-2, -.my-2 { - margin-bottom: 0.5rem !important; -} - -.ml-2, -.mx-2 { - margin-left: 0.5rem !important; -} - .m-3 { margin: 1rem !important; } -.mt-3, -.my-3 { - margin-top: 1rem !important; -} - -.mr-3, -.mx-3 { - margin-right: 1rem !important; -} - -.mb-3, -.my-3 { - margin-bottom: 1rem !important; -} - -.ml-3, -.mx-3 { - margin-left: 1rem !important; -} - .m-4 { margin: 1.5rem !important; } -.mt-4, -.my-4 { - margin-top: 1.5rem !important; -} - -.mr-4, -.mx-4 { - margin-right: 1.5rem !important; -} - -.mb-4, -.my-4 { - margin-bottom: 1.5rem !important; -} - -.ml-4, -.mx-4 { - margin-left: 1.5rem !important; -} - .m-5 { margin: 3rem !important; } -.mt-5, -.my-5 { - margin-top: 3rem !important; +.m-auto { + margin: auto !important; +} + +.mx-0 { + margin-right: 0 !important; + margin-left: 0 !important; +} + +.mx-1 { + margin-right: 0.25rem !important; + margin-left: 0.25rem !important; +} + +.mx-2 { + margin-right: 0.5rem !important; + margin-left: 0.5rem !important; +} + +.mx-3 { + margin-right: 1rem !important; + margin-left: 1rem !important; +} + +.mx-4 { + margin-right: 1.5rem !important; + margin-left: 1.5rem !important; } -.mr-5, .mx-5 { margin-right: 3rem !important; + margin-left: 3rem !important; +} + +.mx-auto { + margin-right: auto !important; + margin-left: auto !important; +} + +.my-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +.my-1 { + margin-top: 0.25rem !important; + margin-bottom: 0.25rem !important; +} + +.my-2 { + margin-top: 0.5rem !important; + margin-bottom: 0.5rem !important; +} + +.my-3 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; +} + +.my-4 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; } -.mb-5, .my-5 { + margin-top: 3rem !important; margin-bottom: 3rem !important; } -.ml-5, -.mx-5 { +.my-auto { + margin-top: auto !important; + margin-bottom: auto !important; +} + +.mt-0 { + margin-top: 0 !important; +} + +.mt-1 { + margin-top: 0.25rem !important; +} + +.mt-2 { + margin-top: 0.5rem !important; +} + +.mt-3 { + margin-top: 1rem !important; +} + +.mt-4 { + margin-top: 1.5rem !important; +} + +.mt-5 { + margin-top: 3rem !important; +} + +.mt-auto { + margin-top: auto !important; +} + +.me-0 { + margin-right: 0 !important; +} + +.me-1 { + margin-right: 0.25rem !important; +} + +.me-2 { + margin-right: 0.5rem !important; +} + +.me-3 { + margin-right: 1rem !important; +} + +.me-4 { + margin-right: 1.5rem !important; +} + +.me-5 { + margin-right: 3rem !important; +} + +.me-auto { + margin-right: auto !important; +} + +.mb-0 { + margin-bottom: 0 !important; +} + +.mb-1 { + margin-bottom: 0.25rem !important; +} + +.mb-2 { + margin-bottom: 0.5rem !important; +} + +.mb-3 { + margin-bottom: 1rem !important; +} + +.mb-4 { + margin-bottom: 1.5rem !important; +} + +.mb-5 { + margin-bottom: 3rem !important; +} + +.mb-auto { + margin-bottom: auto !important; +} + +.ms-0 { + margin-left: 0 !important; +} + +.ms-1 { + margin-left: 0.25rem !important; +} + +.ms-2 { + margin-left: 0.5rem !important; +} + +.ms-3 { + margin-left: 1rem !important; +} + +.ms-4 { + margin-left: 1.5rem !important; +} + +.ms-5 { margin-left: 3rem !important; } +.ms-auto { + margin-left: auto !important; +} + .p-0 { padding: 0 !important; } -.pt-0, -.py-0 { - padding-top: 0 !important; -} - -.pr-0, -.px-0 { - padding-right: 0 !important; -} - -.pb-0, -.py-0 { - padding-bottom: 0 !important; -} - -.pl-0, -.px-0 { - padding-left: 0 !important; -} - .p-1 { padding: 0.25rem !important; } -.pt-1, -.py-1 { - padding-top: 0.25rem !important; -} - -.pr-1, -.px-1 { - padding-right: 0.25rem !important; -} - -.pb-1, -.py-1 { - padding-bottom: 0.25rem !important; -} - -.pl-1, -.px-1 { - padding-left: 0.25rem !important; -} - .p-2 { padding: 0.5rem !important; } -.pt-2, -.py-2 { - padding-top: 0.5rem !important; -} - -.pr-2, -.px-2 { - padding-right: 0.5rem !important; -} - -.pb-2, -.py-2 { - padding-bottom: 0.5rem !important; -} - -.pl-2, -.px-2 { - padding-left: 0.5rem !important; -} - .p-3 { padding: 1rem !important; } -.pt-3, -.py-3 { - padding-top: 1rem !important; -} - -.pr-3, -.px-3 { - padding-right: 1rem !important; -} - -.pb-3, -.py-3 { - padding-bottom: 1rem !important; -} - -.pl-3, -.px-3 { - padding-left: 1rem !important; -} - .p-4 { padding: 1.5rem !important; } -.pt-4, -.py-4 { - padding-top: 1.5rem !important; -} - -.pr-4, -.px-4 { - padding-right: 1.5rem !important; -} - -.pb-4, -.py-4 { - padding-bottom: 1.5rem !important; -} - -.pl-4, -.px-4 { - padding-left: 1.5rem !important; -} - .p-5 { padding: 3rem !important; } -.pt-5, -.py-5 { - padding-top: 3rem !important; +.px-0 { + padding-right: 0 !important; + padding-left: 0 !important; +} + +.px-1 { + padding-right: 0.25rem !important; + padding-left: 0.25rem !important; +} + +.px-2 { + padding-right: 0.5rem !important; + padding-left: 0.5rem !important; +} + +.px-3 { + padding-right: 1rem !important; + padding-left: 1rem !important; +} + +.px-4 { + padding-right: 1.5rem !important; + padding-left: 1.5rem !important; } -.pr-5, .px-5 { padding-right: 3rem !important; -} - -.pb-5, -.py-5 { - padding-bottom: 3rem !important; -} - -.pl-5, -.px-5 { padding-left: 3rem !important; } -.m-n1 { - margin: -0.25rem !important; +.py-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; } -.mt-n1, -.my-n1 { - margin-top: -0.25rem !important; +.py-1 { + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; } -.mr-n1, -.mx-n1 { - margin-right: -0.25rem !important; +.py-2 { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; } -.mb-n1, -.my-n1 { - margin-bottom: -0.25rem !important; +.py-3 { + padding-top: 1rem !important; + padding-bottom: 1rem !important; } -.ml-n1, -.mx-n1 { - margin-left: -0.25rem !important; +.py-4 { + padding-top: 1.5rem !important; + padding-bottom: 1.5rem !important; } -.m-n2 { - margin: -0.5rem !important; +.py-5 { + padding-top: 3rem !important; + padding-bottom: 3rem !important; } -.mt-n2, -.my-n2 { - margin-top: -0.5rem !important; +.pt-0 { + padding-top: 0 !important; } -.mr-n2, -.mx-n2 { - margin-right: -0.5rem !important; +.pt-1 { + padding-top: 0.25rem !important; } -.mb-n2, -.my-n2 { - margin-bottom: -0.5rem !important; +.pt-2 { + padding-top: 0.5rem !important; } -.ml-n2, -.mx-n2 { - margin-left: -0.5rem !important; +.pt-3 { + padding-top: 1rem !important; } -.m-n3 { - margin: -1rem !important; +.pt-4 { + padding-top: 1.5rem !important; } -.mt-n3, -.my-n3 { - margin-top: -1rem !important; +.pt-5 { + padding-top: 3rem !important; } -.mr-n3, -.mx-n3 { - margin-right: -1rem !important; +.pe-0 { + padding-right: 0 !important; } -.mb-n3, -.my-n3 { - margin-bottom: -1rem !important; +.pe-1 { + padding-right: 0.25rem !important; } -.ml-n3, -.mx-n3 { - margin-left: -1rem !important; +.pe-2 { + padding-right: 0.5rem !important; } -.m-n4 { - margin: -1.5rem !important; +.pe-3 { + padding-right: 1rem !important; } -.mt-n4, -.my-n4 { - margin-top: -1.5rem !important; +.pe-4 { + padding-right: 1.5rem !important; } -.mr-n4, -.mx-n4 { - margin-right: -1.5rem !important; +.pe-5 { + padding-right: 3rem !important; } -.mb-n4, -.my-n4 { - margin-bottom: -1.5rem !important; +.pb-0 { + padding-bottom: 0 !important; } -.ml-n4, -.mx-n4 { - margin-left: -1.5rem !important; +.pb-1 { + padding-bottom: 0.25rem !important; } -.m-n5 { - margin: -3rem !important; +.pb-2 { + padding-bottom: 0.5rem !important; } -.mt-n5, -.my-n5 { - margin-top: -3rem !important; +.pb-3 { + padding-bottom: 1rem !important; } -.mr-n5, -.mx-n5 { - margin-right: -3rem !important; +.pb-4 { + padding-bottom: 1.5rem !important; } -.mb-n5, -.my-n5 { - margin-bottom: -3rem !important; +.pb-5 { + padding-bottom: 3rem !important; } -.ml-n5, -.mx-n5 { - margin-left: -3rem !important; +.ps-0 { + padding-left: 0 !important; } -.m-auto { - margin: auto !important; +.ps-1 { + padding-left: 0.25rem !important; } -.mt-auto, -.my-auto { - margin-top: auto !important; +.ps-2 { + padding-left: 0.5rem !important; } -.mr-auto, -.mx-auto { - margin-right: auto !important; +.ps-3 { + padding-left: 1rem !important; } -.mb-auto, -.my-auto { - margin-bottom: auto !important; +.ps-4 { + padding-left: 1.5rem !important; } -.ml-auto, -.mx-auto { - margin-left: auto !important; +.ps-5 { + padding-left: 3rem !important; } -@media (min-width: 576px) { - .m-sm-0 { - margin: 0 !important; - } - .mt-sm-0, - .my-sm-0 { - margin-top: 0 !important; - } - .mr-sm-0, - .mx-sm-0 { - margin-right: 0 !important; - } - .mb-sm-0, - .my-sm-0 { - margin-bottom: 0 !important; - } - .ml-sm-0, - .mx-sm-0 { - margin-left: 0 !important; - } - .m-sm-1 { - margin: 0.25rem !important; - } - .mt-sm-1, - .my-sm-1 { - margin-top: 0.25rem !important; - } - .mr-sm-1, - .mx-sm-1 { - margin-right: 0.25rem !important; - } - .mb-sm-1, - .my-sm-1 { - margin-bottom: 0.25rem !important; - } - .ml-sm-1, - .mx-sm-1 { - margin-left: 0.25rem !important; - } - .m-sm-2 { - margin: 0.5rem !important; - } - .mt-sm-2, - .my-sm-2 { - margin-top: 0.5rem !important; - } - .mr-sm-2, - .mx-sm-2 { - margin-right: 0.5rem !important; - } - .mb-sm-2, - .my-sm-2 { - margin-bottom: 0.5rem !important; - } - .ml-sm-2, - .mx-sm-2 { - margin-left: 0.5rem !important; - } - .m-sm-3 { - margin: 1rem !important; - } - .mt-sm-3, - .my-sm-3 { - margin-top: 1rem !important; - } - .mr-sm-3, - .mx-sm-3 { - margin-right: 1rem !important; - } - .mb-sm-3, - .my-sm-3 { - margin-bottom: 1rem !important; - } - .ml-sm-3, - .mx-sm-3 { - margin-left: 1rem !important; - } - .m-sm-4 { - margin: 1.5rem !important; - } - .mt-sm-4, - .my-sm-4 { - margin-top: 1.5rem !important; - } - .mr-sm-4, - .mx-sm-4 { - margin-right: 1.5rem !important; - } - .mb-sm-4, - .my-sm-4 { - margin-bottom: 1.5rem !important; - } - .ml-sm-4, - .mx-sm-4 { - margin-left: 1.5rem !important; - } - .m-sm-5 { - margin: 3rem !important; - } - .mt-sm-5, - .my-sm-5 { - margin-top: 3rem !important; - } - .mr-sm-5, - .mx-sm-5 { - margin-right: 3rem !important; - } - .mb-sm-5, - .my-sm-5 { - margin-bottom: 3rem !important; - } - .ml-sm-5, - .mx-sm-5 { - margin-left: 3rem !important; - } - .p-sm-0 { - padding: 0 !important; - } - .pt-sm-0, - .py-sm-0 { - padding-top: 0 !important; - } - .pr-sm-0, - .px-sm-0 { - padding-right: 0 !important; - } - .pb-sm-0, - .py-sm-0 { - padding-bottom: 0 !important; - } - .pl-sm-0, - .px-sm-0 { - padding-left: 0 !important; - } - .p-sm-1 { - padding: 0.25rem !important; - } - .pt-sm-1, - .py-sm-1 { - padding-top: 0.25rem !important; - } - .pr-sm-1, - .px-sm-1 { - padding-right: 0.25rem !important; - } - .pb-sm-1, - .py-sm-1 { - padding-bottom: 0.25rem !important; - } - .pl-sm-1, - .px-sm-1 { - padding-left: 0.25rem !important; - } - .p-sm-2 { - padding: 0.5rem !important; - } - .pt-sm-2, - .py-sm-2 { - padding-top: 0.5rem !important; - } - .pr-sm-2, - .px-sm-2 { - padding-right: 0.5rem !important; - } - .pb-sm-2, - .py-sm-2 { - padding-bottom: 0.5rem !important; - } - .pl-sm-2, - .px-sm-2 { - padding-left: 0.5rem !important; - } - .p-sm-3 { - padding: 1rem !important; - } - .pt-sm-3, - .py-sm-3 { - padding-top: 1rem !important; - } - .pr-sm-3, - .px-sm-3 { - padding-right: 1rem !important; - } - .pb-sm-3, - .py-sm-3 { - padding-bottom: 1rem !important; - } - .pl-sm-3, - .px-sm-3 { - padding-left: 1rem !important; - } - .p-sm-4 { - padding: 1.5rem !important; - } - .pt-sm-4, - .py-sm-4 { - padding-top: 1.5rem !important; - } - .pr-sm-4, - .px-sm-4 { - padding-right: 1.5rem !important; - } - .pb-sm-4, - .py-sm-4 { - padding-bottom: 1.5rem !important; - } - .pl-sm-4, - .px-sm-4 { - padding-left: 1.5rem !important; - } - .p-sm-5 { - padding: 3rem !important; - } - .pt-sm-5, - .py-sm-5 { - padding-top: 3rem !important; - } - .pr-sm-5, - .px-sm-5 { - padding-right: 3rem !important; - } - .pb-sm-5, - .py-sm-5 { - padding-bottom: 3rem !important; - } - .pl-sm-5, - .px-sm-5 { - padding-left: 3rem !important; - } - .m-sm-n1 { - margin: -0.25rem !important; - } - .mt-sm-n1, - .my-sm-n1 { - margin-top: -0.25rem !important; - } - .mr-sm-n1, - .mx-sm-n1 { - margin-right: -0.25rem !important; - } - .mb-sm-n1, - .my-sm-n1 { - margin-bottom: -0.25rem !important; - } - .ml-sm-n1, - .mx-sm-n1 { - margin-left: -0.25rem !important; - } - .m-sm-n2 { - margin: -0.5rem !important; - } - .mt-sm-n2, - .my-sm-n2 { - margin-top: -0.5rem !important; - } - .mr-sm-n2, - .mx-sm-n2 { - margin-right: -0.5rem !important; - } - .mb-sm-n2, - .my-sm-n2 { - margin-bottom: -0.5rem !important; - } - .ml-sm-n2, - .mx-sm-n2 { - margin-left: -0.5rem !important; - } - .m-sm-n3 { - margin: -1rem !important; - } - .mt-sm-n3, - .my-sm-n3 { - margin-top: -1rem !important; - } - .mr-sm-n3, - .mx-sm-n3 { - margin-right: -1rem !important; - } - .mb-sm-n3, - .my-sm-n3 { - margin-bottom: -1rem !important; - } - .ml-sm-n3, - .mx-sm-n3 { - margin-left: -1rem !important; - } - .m-sm-n4 { - margin: -1.5rem !important; - } - .mt-sm-n4, - .my-sm-n4 { - margin-top: -1.5rem !important; - } - .mr-sm-n4, - .mx-sm-n4 { - margin-right: -1.5rem !important; - } - .mb-sm-n4, - .my-sm-n4 { - margin-bottom: -1.5rem !important; - } - .ml-sm-n4, - .mx-sm-n4 { - margin-left: -1.5rem !important; - } - .m-sm-n5 { - margin: -3rem !important; - } - .mt-sm-n5, - .my-sm-n5 { - margin-top: -3rem !important; - } - .mr-sm-n5, - .mx-sm-n5 { - margin-right: -3rem !important; - } - .mb-sm-n5, - .my-sm-n5 { - margin-bottom: -3rem !important; - } - .ml-sm-n5, - .mx-sm-n5 { - margin-left: -3rem !important; - } - .m-sm-auto { - margin: auto !important; - } - .mt-sm-auto, - .my-sm-auto { - margin-top: auto !important; - } - .mr-sm-auto, - .mx-sm-auto { - margin-right: auto !important; - } - .mb-sm-auto, - .my-sm-auto { - margin-bottom: auto !important; - } - .ml-sm-auto, - .mx-sm-auto { - margin-left: auto !important; - } +.font-monospace { + font-family: var(--bs-font-monospace) !important; } -@media (min-width: 768px) { - .m-md-0 { - margin: 0 !important; - } - .mt-md-0, - .my-md-0 { - margin-top: 0 !important; - } - .mr-md-0, - .mx-md-0 { - margin-right: 0 !important; - } - .mb-md-0, - .my-md-0 { - margin-bottom: 0 !important; - } - .ml-md-0, - .mx-md-0 { - margin-left: 0 !important; - } - .m-md-1 { - margin: 0.25rem !important; - } - .mt-md-1, - .my-md-1 { - margin-top: 0.25rem !important; - } - .mr-md-1, - .mx-md-1 { - margin-right: 0.25rem !important; - } - .mb-md-1, - .my-md-1 { - margin-bottom: 0.25rem !important; - } - .ml-md-1, - .mx-md-1 { - margin-left: 0.25rem !important; - } - .m-md-2 { - margin: 0.5rem !important; - } - .mt-md-2, - .my-md-2 { - margin-top: 0.5rem !important; - } - .mr-md-2, - .mx-md-2 { - margin-right: 0.5rem !important; - } - .mb-md-2, - .my-md-2 { - margin-bottom: 0.5rem !important; - } - .ml-md-2, - .mx-md-2 { - margin-left: 0.5rem !important; - } - .m-md-3 { - margin: 1rem !important; - } - .mt-md-3, - .my-md-3 { - margin-top: 1rem !important; - } - .mr-md-3, - .mx-md-3 { - margin-right: 1rem !important; - } - .mb-md-3, - .my-md-3 { - margin-bottom: 1rem !important; - } - .ml-md-3, - .mx-md-3 { - margin-left: 1rem !important; - } - .m-md-4 { - margin: 1.5rem !important; - } - .mt-md-4, - .my-md-4 { - margin-top: 1.5rem !important; - } - .mr-md-4, - .mx-md-4 { - margin-right: 1.5rem !important; - } - .mb-md-4, - .my-md-4 { - margin-bottom: 1.5rem !important; - } - .ml-md-4, - .mx-md-4 { - margin-left: 1.5rem !important; - } - .m-md-5 { - margin: 3rem !important; - } - .mt-md-5, - .my-md-5 { - margin-top: 3rem !important; - } - .mr-md-5, - .mx-md-5 { - margin-right: 3rem !important; - } - .mb-md-5, - .my-md-5 { - margin-bottom: 3rem !important; - } - .ml-md-5, - .mx-md-5 { - margin-left: 3rem !important; - } - .p-md-0 { - padding: 0 !important; - } - .pt-md-0, - .py-md-0 { - padding-top: 0 !important; - } - .pr-md-0, - .px-md-0 { - padding-right: 0 !important; - } - .pb-md-0, - .py-md-0 { - padding-bottom: 0 !important; - } - .pl-md-0, - .px-md-0 { - padding-left: 0 !important; - } - .p-md-1 { - padding: 0.25rem !important; - } - .pt-md-1, - .py-md-1 { - padding-top: 0.25rem !important; - } - .pr-md-1, - .px-md-1 { - padding-right: 0.25rem !important; - } - .pb-md-1, - .py-md-1 { - padding-bottom: 0.25rem !important; - } - .pl-md-1, - .px-md-1 { - padding-left: 0.25rem !important; - } - .p-md-2 { - padding: 0.5rem !important; - } - .pt-md-2, - .py-md-2 { - padding-top: 0.5rem !important; - } - .pr-md-2, - .px-md-2 { - padding-right: 0.5rem !important; - } - .pb-md-2, - .py-md-2 { - padding-bottom: 0.5rem !important; - } - .pl-md-2, - .px-md-2 { - padding-left: 0.5rem !important; - } - .p-md-3 { - padding: 1rem !important; - } - .pt-md-3, - .py-md-3 { - padding-top: 1rem !important; - } - .pr-md-3, - .px-md-3 { - padding-right: 1rem !important; - } - .pb-md-3, - .py-md-3 { - padding-bottom: 1rem !important; - } - .pl-md-3, - .px-md-3 { - padding-left: 1rem !important; - } - .p-md-4 { - padding: 1.5rem !important; - } - .pt-md-4, - .py-md-4 { - padding-top: 1.5rem !important; - } - .pr-md-4, - .px-md-4 { - padding-right: 1.5rem !important; - } - .pb-md-4, - .py-md-4 { - padding-bottom: 1.5rem !important; - } - .pl-md-4, - .px-md-4 { - padding-left: 1.5rem !important; - } - .p-md-5 { - padding: 3rem !important; - } - .pt-md-5, - .py-md-5 { - padding-top: 3rem !important; - } - .pr-md-5, - .px-md-5 { - padding-right: 3rem !important; - } - .pb-md-5, - .py-md-5 { - padding-bottom: 3rem !important; - } - .pl-md-5, - .px-md-5 { - padding-left: 3rem !important; - } - .m-md-n1 { - margin: -0.25rem !important; - } - .mt-md-n1, - .my-md-n1 { - margin-top: -0.25rem !important; - } - .mr-md-n1, - .mx-md-n1 { - margin-right: -0.25rem !important; - } - .mb-md-n1, - .my-md-n1 { - margin-bottom: -0.25rem !important; - } - .ml-md-n1, - .mx-md-n1 { - margin-left: -0.25rem !important; - } - .m-md-n2 { - margin: -0.5rem !important; - } - .mt-md-n2, - .my-md-n2 { - margin-top: -0.5rem !important; - } - .mr-md-n2, - .mx-md-n2 { - margin-right: -0.5rem !important; - } - .mb-md-n2, - .my-md-n2 { - margin-bottom: -0.5rem !important; - } - .ml-md-n2, - .mx-md-n2 { - margin-left: -0.5rem !important; - } - .m-md-n3 { - margin: -1rem !important; - } - .mt-md-n3, - .my-md-n3 { - margin-top: -1rem !important; - } - .mr-md-n3, - .mx-md-n3 { - margin-right: -1rem !important; - } - .mb-md-n3, - .my-md-n3 { - margin-bottom: -1rem !important; - } - .ml-md-n3, - .mx-md-n3 { - margin-left: -1rem !important; - } - .m-md-n4 { - margin: -1.5rem !important; - } - .mt-md-n4, - .my-md-n4 { - margin-top: -1.5rem !important; - } - .mr-md-n4, - .mx-md-n4 { - margin-right: -1.5rem !important; - } - .mb-md-n4, - .my-md-n4 { - margin-bottom: -1.5rem !important; - } - .ml-md-n4, - .mx-md-n4 { - margin-left: -1.5rem !important; - } - .m-md-n5 { - margin: -3rem !important; - } - .mt-md-n5, - .my-md-n5 { - margin-top: -3rem !important; - } - .mr-md-n5, - .mx-md-n5 { - margin-right: -3rem !important; - } - .mb-md-n5, - .my-md-n5 { - margin-bottom: -3rem !important; - } - .ml-md-n5, - .mx-md-n5 { - margin-left: -3rem !important; - } - .m-md-auto { - margin: auto !important; - } - .mt-md-auto, - .my-md-auto { - margin-top: auto !important; - } - .mr-md-auto, - .mx-md-auto { - margin-right: auto !important; - } - .mb-md-auto, - .my-md-auto { - margin-bottom: auto !important; - } - .ml-md-auto, - .mx-md-auto { - margin-left: auto !important; - } +.fs-1 { + font-size: calc(1.375rem + 1.5vw) !important; } -@media (min-width: 992px) { - .m-lg-0 { - margin: 0 !important; - } - .mt-lg-0, - .my-lg-0 { - margin-top: 0 !important; - } - .mr-lg-0, - .mx-lg-0 { - margin-right: 0 !important; - } - .mb-lg-0, - .my-lg-0 { - margin-bottom: 0 !important; - } - .ml-lg-0, - .mx-lg-0 { - margin-left: 0 !important; - } - .m-lg-1 { - margin: 0.25rem !important; - } - .mt-lg-1, - .my-lg-1 { - margin-top: 0.25rem !important; - } - .mr-lg-1, - .mx-lg-1 { - margin-right: 0.25rem !important; - } - .mb-lg-1, - .my-lg-1 { - margin-bottom: 0.25rem !important; - } - .ml-lg-1, - .mx-lg-1 { - margin-left: 0.25rem !important; - } - .m-lg-2 { - margin: 0.5rem !important; - } - .mt-lg-2, - .my-lg-2 { - margin-top: 0.5rem !important; - } - .mr-lg-2, - .mx-lg-2 { - margin-right: 0.5rem !important; - } - .mb-lg-2, - .my-lg-2 { - margin-bottom: 0.5rem !important; - } - .ml-lg-2, - .mx-lg-2 { - margin-left: 0.5rem !important; - } - .m-lg-3 { - margin: 1rem !important; - } - .mt-lg-3, - .my-lg-3 { - margin-top: 1rem !important; - } - .mr-lg-3, - .mx-lg-3 { - margin-right: 1rem !important; - } - .mb-lg-3, - .my-lg-3 { - margin-bottom: 1rem !important; - } - .ml-lg-3, - .mx-lg-3 { - margin-left: 1rem !important; - } - .m-lg-4 { - margin: 1.5rem !important; - } - .mt-lg-4, - .my-lg-4 { - margin-top: 1.5rem !important; - } - .mr-lg-4, - .mx-lg-4 { - margin-right: 1.5rem !important; - } - .mb-lg-4, - .my-lg-4 { - margin-bottom: 1.5rem !important; - } - .ml-lg-4, - .mx-lg-4 { - margin-left: 1.5rem !important; - } - .m-lg-5 { - margin: 3rem !important; - } - .mt-lg-5, - .my-lg-5 { - margin-top: 3rem !important; - } - .mr-lg-5, - .mx-lg-5 { - margin-right: 3rem !important; - } - .mb-lg-5, - .my-lg-5 { - margin-bottom: 3rem !important; - } - .ml-lg-5, - .mx-lg-5 { - margin-left: 3rem !important; - } - .p-lg-0 { - padding: 0 !important; - } - .pt-lg-0, - .py-lg-0 { - padding-top: 0 !important; - } - .pr-lg-0, - .px-lg-0 { - padding-right: 0 !important; - } - .pb-lg-0, - .py-lg-0 { - padding-bottom: 0 !important; - } - .pl-lg-0, - .px-lg-0 { - padding-left: 0 !important; - } - .p-lg-1 { - padding: 0.25rem !important; - } - .pt-lg-1, - .py-lg-1 { - padding-top: 0.25rem !important; - } - .pr-lg-1, - .px-lg-1 { - padding-right: 0.25rem !important; - } - .pb-lg-1, - .py-lg-1 { - padding-bottom: 0.25rem !important; - } - .pl-lg-1, - .px-lg-1 { - padding-left: 0.25rem !important; - } - .p-lg-2 { - padding: 0.5rem !important; - } - .pt-lg-2, - .py-lg-2 { - padding-top: 0.5rem !important; - } - .pr-lg-2, - .px-lg-2 { - padding-right: 0.5rem !important; - } - .pb-lg-2, - .py-lg-2 { - padding-bottom: 0.5rem !important; - } - .pl-lg-2, - .px-lg-2 { - padding-left: 0.5rem !important; - } - .p-lg-3 { - padding: 1rem !important; - } - .pt-lg-3, - .py-lg-3 { - padding-top: 1rem !important; - } - .pr-lg-3, - .px-lg-3 { - padding-right: 1rem !important; - } - .pb-lg-3, - .py-lg-3 { - padding-bottom: 1rem !important; - } - .pl-lg-3, - .px-lg-3 { - padding-left: 1rem !important; - } - .p-lg-4 { - padding: 1.5rem !important; - } - .pt-lg-4, - .py-lg-4 { - padding-top: 1.5rem !important; - } - .pr-lg-4, - .px-lg-4 { - padding-right: 1.5rem !important; - } - .pb-lg-4, - .py-lg-4 { - padding-bottom: 1.5rem !important; - } - .pl-lg-4, - .px-lg-4 { - padding-left: 1.5rem !important; - } - .p-lg-5 { - padding: 3rem !important; - } - .pt-lg-5, - .py-lg-5 { - padding-top: 3rem !important; - } - .pr-lg-5, - .px-lg-5 { - padding-right: 3rem !important; - } - .pb-lg-5, - .py-lg-5 { - padding-bottom: 3rem !important; - } - .pl-lg-5, - .px-lg-5 { - padding-left: 3rem !important; - } - .m-lg-n1 { - margin: -0.25rem !important; - } - .mt-lg-n1, - .my-lg-n1 { - margin-top: -0.25rem !important; - } - .mr-lg-n1, - .mx-lg-n1 { - margin-right: -0.25rem !important; - } - .mb-lg-n1, - .my-lg-n1 { - margin-bottom: -0.25rem !important; - } - .ml-lg-n1, - .mx-lg-n1 { - margin-left: -0.25rem !important; - } - .m-lg-n2 { - margin: -0.5rem !important; - } - .mt-lg-n2, - .my-lg-n2 { - margin-top: -0.5rem !important; - } - .mr-lg-n2, - .mx-lg-n2 { - margin-right: -0.5rem !important; - } - .mb-lg-n2, - .my-lg-n2 { - margin-bottom: -0.5rem !important; - } - .ml-lg-n2, - .mx-lg-n2 { - margin-left: -0.5rem !important; - } - .m-lg-n3 { - margin: -1rem !important; - } - .mt-lg-n3, - .my-lg-n3 { - margin-top: -1rem !important; - } - .mr-lg-n3, - .mx-lg-n3 { - margin-right: -1rem !important; - } - .mb-lg-n3, - .my-lg-n3 { - margin-bottom: -1rem !important; - } - .ml-lg-n3, - .mx-lg-n3 { - margin-left: -1rem !important; - } - .m-lg-n4 { - margin: -1.5rem !important; - } - .mt-lg-n4, - .my-lg-n4 { - margin-top: -1.5rem !important; - } - .mr-lg-n4, - .mx-lg-n4 { - margin-right: -1.5rem !important; - } - .mb-lg-n4, - .my-lg-n4 { - margin-bottom: -1.5rem !important; - } - .ml-lg-n4, - .mx-lg-n4 { - margin-left: -1.5rem !important; - } - .m-lg-n5 { - margin: -3rem !important; - } - .mt-lg-n5, - .my-lg-n5 { - margin-top: -3rem !important; - } - .mr-lg-n5, - .mx-lg-n5 { - margin-right: -3rem !important; - } - .mb-lg-n5, - .my-lg-n5 { - margin-bottom: -3rem !important; - } - .ml-lg-n5, - .mx-lg-n5 { - margin-left: -3rem !important; - } - .m-lg-auto { - margin: auto !important; - } - .mt-lg-auto, - .my-lg-auto { - margin-top: auto !important; - } - .mr-lg-auto, - .mx-lg-auto { - margin-right: auto !important; - } - .mb-lg-auto, - .my-lg-auto { - margin-bottom: auto !important; - } - .ml-lg-auto, - .mx-lg-auto { - margin-left: auto !important; - } +.fs-2 { + font-size: calc(1.325rem + 0.9vw) !important; } -@media (min-width: 1200px) { - .m-xl-0 { - margin: 0 !important; - } - .mt-xl-0, - .my-xl-0 { - margin-top: 0 !important; - } - .mr-xl-0, - .mx-xl-0 { - margin-right: 0 !important; - } - .mb-xl-0, - .my-xl-0 { - margin-bottom: 0 !important; - } - .ml-xl-0, - .mx-xl-0 { - margin-left: 0 !important; - } - .m-xl-1 { - margin: 0.25rem !important; - } - .mt-xl-1, - .my-xl-1 { - margin-top: 0.25rem !important; - } - .mr-xl-1, - .mx-xl-1 { - margin-right: 0.25rem !important; - } - .mb-xl-1, - .my-xl-1 { - margin-bottom: 0.25rem !important; - } - .ml-xl-1, - .mx-xl-1 { - margin-left: 0.25rem !important; - } - .m-xl-2 { - margin: 0.5rem !important; - } - .mt-xl-2, - .my-xl-2 { - margin-top: 0.5rem !important; - } - .mr-xl-2, - .mx-xl-2 { - margin-right: 0.5rem !important; - } - .mb-xl-2, - .my-xl-2 { - margin-bottom: 0.5rem !important; - } - .ml-xl-2, - .mx-xl-2 { - margin-left: 0.5rem !important; - } - .m-xl-3 { - margin: 1rem !important; - } - .mt-xl-3, - .my-xl-3 { - margin-top: 1rem !important; - } - .mr-xl-3, - .mx-xl-3 { - margin-right: 1rem !important; - } - .mb-xl-3, - .my-xl-3 { - margin-bottom: 1rem !important; - } - .ml-xl-3, - .mx-xl-3 { - margin-left: 1rem !important; - } - .m-xl-4 { - margin: 1.5rem !important; - } - .mt-xl-4, - .my-xl-4 { - margin-top: 1.5rem !important; - } - .mr-xl-4, - .mx-xl-4 { - margin-right: 1.5rem !important; - } - .mb-xl-4, - .my-xl-4 { - margin-bottom: 1.5rem !important; - } - .ml-xl-4, - .mx-xl-4 { - margin-left: 1.5rem !important; - } - .m-xl-5 { - margin: 3rem !important; - } - .mt-xl-5, - .my-xl-5 { - margin-top: 3rem !important; - } - .mr-xl-5, - .mx-xl-5 { - margin-right: 3rem !important; - } - .mb-xl-5, - .my-xl-5 { - margin-bottom: 3rem !important; - } - .ml-xl-5, - .mx-xl-5 { - margin-left: 3rem !important; - } - .p-xl-0 { - padding: 0 !important; - } - .pt-xl-0, - .py-xl-0 { - padding-top: 0 !important; - } - .pr-xl-0, - .px-xl-0 { - padding-right: 0 !important; - } - .pb-xl-0, - .py-xl-0 { - padding-bottom: 0 !important; - } - .pl-xl-0, - .px-xl-0 { - padding-left: 0 !important; - } - .p-xl-1 { - padding: 0.25rem !important; - } - .pt-xl-1, - .py-xl-1 { - padding-top: 0.25rem !important; - } - .pr-xl-1, - .px-xl-1 { - padding-right: 0.25rem !important; - } - .pb-xl-1, - .py-xl-1 { - padding-bottom: 0.25rem !important; - } - .pl-xl-1, - .px-xl-1 { - padding-left: 0.25rem !important; - } - .p-xl-2 { - padding: 0.5rem !important; - } - .pt-xl-2, - .py-xl-2 { - padding-top: 0.5rem !important; - } - .pr-xl-2, - .px-xl-2 { - padding-right: 0.5rem !important; - } - .pb-xl-2, - .py-xl-2 { - padding-bottom: 0.5rem !important; - } - .pl-xl-2, - .px-xl-2 { - padding-left: 0.5rem !important; - } - .p-xl-3 { - padding: 1rem !important; - } - .pt-xl-3, - .py-xl-3 { - padding-top: 1rem !important; - } - .pr-xl-3, - .px-xl-3 { - padding-right: 1rem !important; - } - .pb-xl-3, - .py-xl-3 { - padding-bottom: 1rem !important; - } - .pl-xl-3, - .px-xl-3 { - padding-left: 1rem !important; - } - .p-xl-4 { - padding: 1.5rem !important; - } - .pt-xl-4, - .py-xl-4 { - padding-top: 1.5rem !important; - } - .pr-xl-4, - .px-xl-4 { - padding-right: 1.5rem !important; - } - .pb-xl-4, - .py-xl-4 { - padding-bottom: 1.5rem !important; - } - .pl-xl-4, - .px-xl-4 { - padding-left: 1.5rem !important; - } - .p-xl-5 { - padding: 3rem !important; - } - .pt-xl-5, - .py-xl-5 { - padding-top: 3rem !important; - } - .pr-xl-5, - .px-xl-5 { - padding-right: 3rem !important; - } - .pb-xl-5, - .py-xl-5 { - padding-bottom: 3rem !important; - } - .pl-xl-5, - .px-xl-5 { - padding-left: 3rem !important; - } - .m-xl-n1 { - margin: -0.25rem !important; - } - .mt-xl-n1, - .my-xl-n1 { - margin-top: -0.25rem !important; - } - .mr-xl-n1, - .mx-xl-n1 { - margin-right: -0.25rem !important; - } - .mb-xl-n1, - .my-xl-n1 { - margin-bottom: -0.25rem !important; - } - .ml-xl-n1, - .mx-xl-n1 { - margin-left: -0.25rem !important; - } - .m-xl-n2 { - margin: -0.5rem !important; - } - .mt-xl-n2, - .my-xl-n2 { - margin-top: -0.5rem !important; - } - .mr-xl-n2, - .mx-xl-n2 { - margin-right: -0.5rem !important; - } - .mb-xl-n2, - .my-xl-n2 { - margin-bottom: -0.5rem !important; - } - .ml-xl-n2, - .mx-xl-n2 { - margin-left: -0.5rem !important; - } - .m-xl-n3 { - margin: -1rem !important; - } - .mt-xl-n3, - .my-xl-n3 { - margin-top: -1rem !important; - } - .mr-xl-n3, - .mx-xl-n3 { - margin-right: -1rem !important; - } - .mb-xl-n3, - .my-xl-n3 { - margin-bottom: -1rem !important; - } - .ml-xl-n3, - .mx-xl-n3 { - margin-left: -1rem !important; - } - .m-xl-n4 { - margin: -1.5rem !important; - } - .mt-xl-n4, - .my-xl-n4 { - margin-top: -1.5rem !important; - } - .mr-xl-n4, - .mx-xl-n4 { - margin-right: -1.5rem !important; - } - .mb-xl-n4, - .my-xl-n4 { - margin-bottom: -1.5rem !important; - } - .ml-xl-n4, - .mx-xl-n4 { - margin-left: -1.5rem !important; - } - .m-xl-n5 { - margin: -3rem !important; - } - .mt-xl-n5, - .my-xl-n5 { - margin-top: -3rem !important; - } - .mr-xl-n5, - .mx-xl-n5 { - margin-right: -3rem !important; - } - .mb-xl-n5, - .my-xl-n5 { - margin-bottom: -3rem !important; - } - .ml-xl-n5, - .mx-xl-n5 { - margin-left: -3rem !important; - } - .m-xl-auto { - margin: auto !important; - } - .mt-xl-auto, - .my-xl-auto { - margin-top: auto !important; - } - .mr-xl-auto, - .mx-xl-auto { - margin-right: auto !important; - } - .mb-xl-auto, - .my-xl-auto { - margin-bottom: auto !important; - } - .ml-xl-auto, - .mx-xl-auto { - margin-left: auto !important; - } +.fs-3 { + font-size: calc(1.3rem + 0.6vw) !important; } -.stretched-link::after { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1; - pointer-events: auto; - content: ""; - background-color: rgba(0, 0, 0, 0); +.fs-4 { + font-size: calc(1.275rem + 0.3vw) !important; } -.text-monospace { - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; +.fs-5 { + font-size: 1.25rem !important; } -.text-justify { - text-align: justify !important; +.fs-6 { + font-size: 1rem !important; } -.text-wrap { - white-space: normal !important; +.fst-italic { + font-style: italic !important; } -.text-nowrap { - white-space: nowrap !important; +.fst-normal { + font-style: normal !important; } -.text-truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; +.fw-light { + font-weight: 300 !important; } -.text-left { +.fw-lighter { + font-weight: lighter !important; +} + +.fw-normal { + font-weight: 400 !important; +} + +.fw-bold { + font-weight: 700 !important; +} + +.fw-bolder { + font-weight: bolder !important; +} + +.lh-1 { + line-height: 1 !important; +} + +.lh-sm { + line-height: 1.25 !important; +} + +.lh-base { + line-height: 1.5 !important; +} + +.lh-lg { + line-height: 2 !important; +} + +.text-start { text-align: left !important; } -.text-right { +.text-end { text-align: right !important; } @@ -9985,52 +7278,16 @@ button.bg-dark:focus { text-align: center !important; } -@media (min-width: 576px) { - .text-sm-left { - text-align: left !important; - } - .text-sm-right { - text-align: right !important; - } - .text-sm-center { - text-align: center !important; - } +.text-decoration-none { + text-decoration: none !important; } -@media (min-width: 768px) { - .text-md-left { - text-align: left !important; - } - .text-md-right { - text-align: right !important; - } - .text-md-center { - text-align: center !important; - } +.text-decoration-underline { + text-decoration: underline !important; } -@media (min-width: 992px) { - .text-lg-left { - text-align: left !important; - } - .text-lg-right { - text-align: right !important; - } - .text-lg-center { - text-align: center !important; - } -} - -@media (min-width: 1200px) { - .text-xl-left { - text-align: left !important; - } - .text-xl-right { - text-align: right !important; - } - .text-xl-center { - text-align: center !important; - } +.text-decoration-line-through { + text-decoration: line-through !important; } .text-lowercase { @@ -10045,96 +7302,55 @@ button.bg-dark:focus { text-transform: capitalize !important; } -.font-weight-light { - font-weight: 300 !important; +.text-wrap { + white-space: normal !important; } -.font-weight-lighter { - font-weight: lighter !important; +.text-nowrap { + white-space: nowrap !important; } -.font-weight-normal { - font-weight: 400 !important; -} - -.font-weight-bold { - font-weight: 700 !important; -} - -.font-weight-bolder { - font-weight: bolder !important; -} - -.font-italic { - font-style: italic !important; -} - -.text-white { - color: #fff !important; +/* rtl:begin:remove */ +.text-break { + word-wrap: break-word !important; + word-break: break-word !important; } +/* rtl:end:remove */ .text-primary { - color: #007bff !important; -} - -a.text-primary:hover, a.text-primary:focus { - color: #0056b3 !important; + color: #0d6efd !important; } .text-secondary { color: #6c757d !important; } -a.text-secondary:hover, a.text-secondary:focus { - color: #494f54 !important; -} - .text-success { - color: #28a745 !important; -} - -a.text-success:hover, a.text-success:focus { - color: #19692c !important; + color: #198754 !important; } .text-info { - color: #17a2b8 !important; -} - -a.text-info:hover, a.text-info:focus { - color: #0f6674 !important; + color: #0dcaf0 !important; } .text-warning { color: #ffc107 !important; } -a.text-warning:hover, a.text-warning:focus { - color: #ba8b00 !important; -} - .text-danger { color: #dc3545 !important; } -a.text-danger:hover, a.text-danger:focus { - color: #a71d2a !important; -} - .text-light { color: #f8f9fa !important; } -a.text-light:hover, a.text-light:focus { - color: #cbd3da !important; -} - .text-dark { - color: #343a40 !important; + color: #212529 !important; } -a.text-dark:hover, a.text-dark:focus { - color: #121416 !important; +.text-white { + color: #fff !important; } .text-body { @@ -10153,27 +7369,132 @@ a.text-dark:hover, a.text-dark:focus { color: rgba(255, 255, 255, 0.5) !important; } -.text-hide { - font: 0/0 a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; -} - -.text-decoration-none { - text-decoration: none !important; -} - -.text-break { - word-break: break-word !important; - word-wrap: break-word !important; -} - .text-reset { color: inherit !important; } +.bg-primary { + background-color: #0d6efd !important; +} + +.bg-secondary { + background-color: #6c757d !important; +} + +.bg-success { + background-color: #198754 !important; +} + +.bg-info { + background-color: #0dcaf0 !important; +} + +.bg-warning { + background-color: #ffc107 !important; +} + +.bg-danger { + background-color: #dc3545 !important; +} + +.bg-light { + background-color: #f8f9fa !important; +} + +.bg-dark { + background-color: #212529 !important; +} + +.bg-body { + background-color: #fff !important; +} + +.bg-white { + background-color: #fff !important; +} + +.bg-transparent { + background-color: transparent !important; +} + +.bg-gradient { + background-image: var(--bs-gradient) !important; +} + +.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; +} + +.rounded { + border-radius: 0.25rem !important; +} + +.rounded-0 { + border-radius: 0 !important; +} + +.rounded-1 { + border-radius: 0.2rem !important; +} + +.rounded-2 { + border-radius: 0.25rem !important; +} + +.rounded-3 { + border-radius: 0.3rem !important; +} + +.rounded-circle { + border-radius: 50% !important; +} + +.rounded-pill { + border-radius: 50rem !important; +} + +.rounded-top { + border-top-left-radius: 0.25rem !important; + border-top-right-radius: 0.25rem !important; +} + +.rounded-end { + border-top-right-radius: 0.25rem !important; + border-bottom-right-radius: 0.25rem !important; +} + +.rounded-bottom { + border-bottom-right-radius: 0.25rem !important; + border-bottom-left-radius: 0.25rem !important; +} + +.rounded-start { + border-bottom-left-radius: 0.25rem !important; + border-top-left-radius: 0.25rem !important; +} + .visible { visibility: visible !important; } @@ -10182,82 +7503,3318 @@ a.text-dark:hover, a.text-dark:focus { visibility: hidden !important; } -@media print { - *, - *::before, - *::after { - text-shadow: none !important; - box-shadow: none !important; +@media (min-width: 576px) { + .float-sm-start { + float: left !important; } - a:not(.btn) { - text-decoration: underline; + + .float-sm-end { + float: right !important; } - abbr[title]::after { - content: " (" attr(title) ")"; + + .float-sm-none { + float: none !important; } - pre { - white-space: pre-wrap !important; + + .d-sm-inline { + display: inline !important; } - pre, - blockquote { - border: 1px solid #adb5bd; - page-break-inside: avoid; + + .d-sm-inline-block { + display: inline-block !important; } - thead { - display: table-header-group; + + .d-sm-block { + display: block !important; } - tr, - img { - page-break-inside: avoid; + + .d-sm-grid { + display: grid !important; } - p, - h2, - h3 { - orphans: 3; - widows: 3; + + .d-sm-table { + display: table !important; } - h2, - h3 { - page-break-after: avoid; + + .d-sm-table-row { + display: table-row !important; } - @page { - size: a3; + + .d-sm-table-cell { + display: table-cell !important; } - body { - min-width: 992px !important; + + .d-sm-flex { + display: flex !important; } - .container { - min-width: 992px !important; + + .d-sm-inline-flex { + display: inline-flex !important; } - .navbar { - display: none; + + .d-sm-none { + display: none !important; } - .badge { - border: 1px solid #000; + + .flex-sm-fill { + flex: 1 1 auto !important; } - .table { - border-collapse: collapse !important; + + .flex-sm-row { + flex-direction: row !important; } - .table td, - .table th { - background-color: #fff !important; + + .flex-sm-column { + flex-direction: column !important; } - .table-bordered th, - .table-bordered td { - border: 1px solid #dee2e6 !important; + + .flex-sm-row-reverse { + flex-direction: row-reverse !important; } - .table-dark { - color: inherit; + + .flex-sm-column-reverse { + flex-direction: column-reverse !important; } - .table-dark th, - .table-dark td, - .table-dark thead th, - .table-dark tbody + tbody { - border-color: #dee2e6; + + .flex-sm-grow-0 { + flex-grow: 0 !important; } - .table .thead-dark th { - color: inherit; - border-color: #dee2e6; + + .flex-sm-grow-1 { + flex-grow: 1 !important; + } + + .flex-sm-shrink-0 { + flex-shrink: 0 !important; + } + + .flex-sm-shrink-1 { + flex-shrink: 1 !important; + } + + .flex-sm-wrap { + flex-wrap: wrap !important; + } + + .flex-sm-nowrap { + flex-wrap: nowrap !important; + } + + .flex-sm-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + + .gap-sm-0 { + gap: 0 !important; + } + + .gap-sm-1 { + gap: 0.25rem !important; + } + + .gap-sm-2 { + gap: 0.5rem !important; + } + + .gap-sm-3 { + gap: 1rem !important; + } + + .gap-sm-4 { + gap: 1.5rem !important; + } + + .gap-sm-5 { + gap: 3rem !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-first { + order: -1 !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; + } + + .m-sm-0 { + margin: 0 !important; + } + + .m-sm-1 { + margin: 0.25rem !important; + } + + .m-sm-2 { + margin: 0.5rem !important; + } + + .m-sm-3 { + margin: 1rem !important; + } + + .m-sm-4 { + margin: 1.5rem !important; + } + + .m-sm-5 { + margin: 3rem !important; + } + + .m-sm-auto { + margin: auto !important; + } + + .mx-sm-0 { + margin-right: 0 !important; + margin-left: 0 !important; + } + + .mx-sm-1 { + margin-right: 0.25rem !important; + margin-left: 0.25rem !important; + } + + .mx-sm-2 { + margin-right: 0.5rem !important; + margin-left: 0.5rem !important; + } + + .mx-sm-3 { + margin-right: 1rem !important; + margin-left: 1rem !important; + } + + .mx-sm-4 { + margin-right: 1.5rem !important; + margin-left: 1.5rem !important; + } + + .mx-sm-5 { + margin-right: 3rem !important; + margin-left: 3rem !important; + } + + .mx-sm-auto { + margin-right: auto !important; + margin-left: auto !important; + } + + .my-sm-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + + .my-sm-1 { + margin-top: 0.25rem !important; + margin-bottom: 0.25rem !important; + } + + .my-sm-2 { + margin-top: 0.5rem !important; + margin-bottom: 0.5rem !important; + } + + .my-sm-3 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; + } + + .my-sm-4 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; + } + + .my-sm-5 { + margin-top: 3rem !important; + margin-bottom: 3rem !important; + } + + .my-sm-auto { + margin-top: auto !important; + margin-bottom: auto !important; + } + + .mt-sm-0 { + margin-top: 0 !important; + } + + .mt-sm-1 { + margin-top: 0.25rem !important; + } + + .mt-sm-2 { + margin-top: 0.5rem !important; + } + + .mt-sm-3 { + margin-top: 1rem !important; + } + + .mt-sm-4 { + margin-top: 1.5rem !important; + } + + .mt-sm-5 { + margin-top: 3rem !important; + } + + .mt-sm-auto { + margin-top: auto !important; + } + + .me-sm-0 { + margin-right: 0 !important; + } + + .me-sm-1 { + margin-right: 0.25rem !important; + } + + .me-sm-2 { + margin-right: 0.5rem !important; + } + + .me-sm-3 { + margin-right: 1rem !important; + } + + .me-sm-4 { + margin-right: 1.5rem !important; + } + + .me-sm-5 { + margin-right: 3rem !important; + } + + .me-sm-auto { + margin-right: auto !important; + } + + .mb-sm-0 { + margin-bottom: 0 !important; + } + + .mb-sm-1 { + margin-bottom: 0.25rem !important; + } + + .mb-sm-2 { + margin-bottom: 0.5rem !important; + } + + .mb-sm-3 { + margin-bottom: 1rem !important; + } + + .mb-sm-4 { + margin-bottom: 1.5rem !important; + } + + .mb-sm-5 { + margin-bottom: 3rem !important; + } + + .mb-sm-auto { + margin-bottom: auto !important; + } + + .ms-sm-0 { + margin-left: 0 !important; + } + + .ms-sm-1 { + margin-left: 0.25rem !important; + } + + .ms-sm-2 { + margin-left: 0.5rem !important; + } + + .ms-sm-3 { + margin-left: 1rem !important; + } + + .ms-sm-4 { + margin-left: 1.5rem !important; + } + + .ms-sm-5 { + margin-left: 3rem !important; + } + + .ms-sm-auto { + margin-left: auto !important; + } + + .p-sm-0 { + padding: 0 !important; + } + + .p-sm-1 { + padding: 0.25rem !important; + } + + .p-sm-2 { + padding: 0.5rem !important; + } + + .p-sm-3 { + padding: 1rem !important; + } + + .p-sm-4 { + padding: 1.5rem !important; + } + + .p-sm-5 { + padding: 3rem !important; + } + + .px-sm-0 { + padding-right: 0 !important; + padding-left: 0 !important; + } + + .px-sm-1 { + padding-right: 0.25rem !important; + padding-left: 0.25rem !important; + } + + .px-sm-2 { + padding-right: 0.5rem !important; + padding-left: 0.5rem !important; + } + + .px-sm-3 { + padding-right: 1rem !important; + padding-left: 1rem !important; + } + + .px-sm-4 { + padding-right: 1.5rem !important; + padding-left: 1.5rem !important; + } + + .px-sm-5 { + padding-right: 3rem !important; + padding-left: 3rem !important; + } + + .py-sm-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + + .py-sm-1 { + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; + } + + .py-sm-2 { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; + } + + .py-sm-3 { + padding-top: 1rem !important; + padding-bottom: 1rem !important; + } + + .py-sm-4 { + padding-top: 1.5rem !important; + padding-bottom: 1.5rem !important; + } + + .py-sm-5 { + padding-top: 3rem !important; + padding-bottom: 3rem !important; + } + + .pt-sm-0 { + padding-top: 0 !important; + } + + .pt-sm-1 { + padding-top: 0.25rem !important; + } + + .pt-sm-2 { + padding-top: 0.5rem !important; + } + + .pt-sm-3 { + padding-top: 1rem !important; + } + + .pt-sm-4 { + padding-top: 1.5rem !important; + } + + .pt-sm-5 { + padding-top: 3rem !important; + } + + .pe-sm-0 { + padding-right: 0 !important; + } + + .pe-sm-1 { + padding-right: 0.25rem !important; + } + + .pe-sm-2 { + padding-right: 0.5rem !important; + } + + .pe-sm-3 { + padding-right: 1rem !important; + } + + .pe-sm-4 { + padding-right: 1.5rem !important; + } + + .pe-sm-5 { + padding-right: 3rem !important; + } + + .pb-sm-0 { + padding-bottom: 0 !important; + } + + .pb-sm-1 { + padding-bottom: 0.25rem !important; + } + + .pb-sm-2 { + padding-bottom: 0.5rem !important; + } + + .pb-sm-3 { + padding-bottom: 1rem !important; + } + + .pb-sm-4 { + padding-bottom: 1.5rem !important; + } + + .pb-sm-5 { + padding-bottom: 3rem !important; + } + + .ps-sm-0 { + padding-left: 0 !important; + } + + .ps-sm-1 { + padding-left: 0.25rem !important; + } + + .ps-sm-2 { + padding-left: 0.5rem !important; + } + + .ps-sm-3 { + padding-left: 1rem !important; + } + + .ps-sm-4 { + padding-left: 1.5rem !important; + } + + .ps-sm-5 { + padding-left: 3rem !important; + } + + .text-sm-start { + text-align: left !important; + } + + .text-sm-end { + text-align: right !important; + } + + .text-sm-center { + text-align: center !important; } } +@media (min-width: 768px) { + .float-md-start { + float: left !important; + } + + .float-md-end { + float: right !important; + } + + .float-md-none { + float: none !important; + } + + .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; + } + + .flex-md-fill { + flex: 1 1 auto !important; + } + + .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-grow-0 { + flex-grow: 0 !important; + } + + .flex-md-grow-1 { + flex-grow: 1 !important; + } + + .flex-md-shrink-0 { + flex-shrink: 0 !important; + } + + .flex-md-shrink-1 { + flex-shrink: 1 !important; + } + + .flex-md-wrap { + flex-wrap: wrap !important; + } + + .flex-md-nowrap { + flex-wrap: nowrap !important; + } + + .flex-md-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + + .gap-md-0 { + gap: 0 !important; + } + + .gap-md-1 { + gap: 0.25rem !important; + } + + .gap-md-2 { + gap: 0.5rem !important; + } + + .gap-md-3 { + gap: 1rem !important; + } + + .gap-md-4 { + gap: 1.5rem !important; + } + + .gap-md-5 { + gap: 3rem !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-first { + order: -1 !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; + } + + .m-md-0 { + margin: 0 !important; + } + + .m-md-1 { + margin: 0.25rem !important; + } + + .m-md-2 { + margin: 0.5rem !important; + } + + .m-md-3 { + margin: 1rem !important; + } + + .m-md-4 { + margin: 1.5rem !important; + } + + .m-md-5 { + margin: 3rem !important; + } + + .m-md-auto { + margin: auto !important; + } + + .mx-md-0 { + margin-right: 0 !important; + margin-left: 0 !important; + } + + .mx-md-1 { + margin-right: 0.25rem !important; + margin-left: 0.25rem !important; + } + + .mx-md-2 { + margin-right: 0.5rem !important; + margin-left: 0.5rem !important; + } + + .mx-md-3 { + margin-right: 1rem !important; + margin-left: 1rem !important; + } + + .mx-md-4 { + margin-right: 1.5rem !important; + margin-left: 1.5rem !important; + } + + .mx-md-5 { + margin-right: 3rem !important; + margin-left: 3rem !important; + } + + .mx-md-auto { + margin-right: auto !important; + margin-left: auto !important; + } + + .my-md-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + + .my-md-1 { + margin-top: 0.25rem !important; + margin-bottom: 0.25rem !important; + } + + .my-md-2 { + margin-top: 0.5rem !important; + margin-bottom: 0.5rem !important; + } + + .my-md-3 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; + } + + .my-md-4 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; + } + + .my-md-5 { + margin-top: 3rem !important; + margin-bottom: 3rem !important; + } + + .my-md-auto { + margin-top: auto !important; + margin-bottom: auto !important; + } + + .mt-md-0 { + margin-top: 0 !important; + } + + .mt-md-1 { + margin-top: 0.25rem !important; + } + + .mt-md-2 { + margin-top: 0.5rem !important; + } + + .mt-md-3 { + margin-top: 1rem !important; + } + + .mt-md-4 { + margin-top: 1.5rem !important; + } + + .mt-md-5 { + margin-top: 3rem !important; + } + + .mt-md-auto { + margin-top: auto !important; + } + + .me-md-0 { + margin-right: 0 !important; + } + + .me-md-1 { + margin-right: 0.25rem !important; + } + + .me-md-2 { + margin-right: 0.5rem !important; + } + + .me-md-3 { + margin-right: 1rem !important; + } + + .me-md-4 { + margin-right: 1.5rem !important; + } + + .me-md-5 { + margin-right: 3rem !important; + } + + .me-md-auto { + margin-right: auto !important; + } + + .mb-md-0 { + margin-bottom: 0 !important; + } + + .mb-md-1 { + margin-bottom: 0.25rem !important; + } + + .mb-md-2 { + margin-bottom: 0.5rem !important; + } + + .mb-md-3 { + margin-bottom: 1rem !important; + } + + .mb-md-4 { + margin-bottom: 1.5rem !important; + } + + .mb-md-5 { + margin-bottom: 3rem !important; + } + + .mb-md-auto { + margin-bottom: auto !important; + } + + .ms-md-0 { + margin-left: 0 !important; + } + + .ms-md-1 { + margin-left: 0.25rem !important; + } + + .ms-md-2 { + margin-left: 0.5rem !important; + } + + .ms-md-3 { + margin-left: 1rem !important; + } + + .ms-md-4 { + margin-left: 1.5rem !important; + } + + .ms-md-5 { + margin-left: 3rem !important; + } + + .ms-md-auto { + margin-left: auto !important; + } + + .p-md-0 { + padding: 0 !important; + } + + .p-md-1 { + padding: 0.25rem !important; + } + + .p-md-2 { + padding: 0.5rem !important; + } + + .p-md-3 { + padding: 1rem !important; + } + + .p-md-4 { + padding: 1.5rem !important; + } + + .p-md-5 { + padding: 3rem !important; + } + + .px-md-0 { + padding-right: 0 !important; + padding-left: 0 !important; + } + + .px-md-1 { + padding-right: 0.25rem !important; + padding-left: 0.25rem !important; + } + + .px-md-2 { + padding-right: 0.5rem !important; + padding-left: 0.5rem !important; + } + + .px-md-3 { + padding-right: 1rem !important; + padding-left: 1rem !important; + } + + .px-md-4 { + padding-right: 1.5rem !important; + padding-left: 1.5rem !important; + } + + .px-md-5 { + padding-right: 3rem !important; + padding-left: 3rem !important; + } + + .py-md-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + + .py-md-1 { + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; + } + + .py-md-2 { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; + } + + .py-md-3 { + padding-top: 1rem !important; + padding-bottom: 1rem !important; + } + + .py-md-4 { + padding-top: 1.5rem !important; + padding-bottom: 1.5rem !important; + } + + .py-md-5 { + padding-top: 3rem !important; + padding-bottom: 3rem !important; + } + + .pt-md-0 { + padding-top: 0 !important; + } + + .pt-md-1 { + padding-top: 0.25rem !important; + } + + .pt-md-2 { + padding-top: 0.5rem !important; + } + + .pt-md-3 { + padding-top: 1rem !important; + } + + .pt-md-4 { + padding-top: 1.5rem !important; + } + + .pt-md-5 { + padding-top: 3rem !important; + } + + .pe-md-0 { + padding-right: 0 !important; + } + + .pe-md-1 { + padding-right: 0.25rem !important; + } + + .pe-md-2 { + padding-right: 0.5rem !important; + } + + .pe-md-3 { + padding-right: 1rem !important; + } + + .pe-md-4 { + padding-right: 1.5rem !important; + } + + .pe-md-5 { + padding-right: 3rem !important; + } + + .pb-md-0 { + padding-bottom: 0 !important; + } + + .pb-md-1 { + padding-bottom: 0.25rem !important; + } + + .pb-md-2 { + padding-bottom: 0.5rem !important; + } + + .pb-md-3 { + padding-bottom: 1rem !important; + } + + .pb-md-4 { + padding-bottom: 1.5rem !important; + } + + .pb-md-5 { + padding-bottom: 3rem !important; + } + + .ps-md-0 { + padding-left: 0 !important; + } + + .ps-md-1 { + padding-left: 0.25rem !important; + } + + .ps-md-2 { + padding-left: 0.5rem !important; + } + + .ps-md-3 { + padding-left: 1rem !important; + } + + .ps-md-4 { + padding-left: 1.5rem !important; + } + + .ps-md-5 { + padding-left: 3rem !important; + } + + .text-md-start { + text-align: left !important; + } + + .text-md-end { + text-align: right !important; + } + + .text-md-center { + text-align: center !important; + } +} +@media (min-width: 992px) { + .float-lg-start { + float: left !important; + } + + .float-lg-end { + float: right !important; + } + + .float-lg-none { + float: none !important; + } + + .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; + } + + .flex-lg-fill { + flex: 1 1 auto !important; + } + + .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-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; + } + + .flex-lg-wrap { + flex-wrap: wrap !important; + } + + .flex-lg-nowrap { + flex-wrap: nowrap !important; + } + + .flex-lg-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + + .gap-lg-0 { + gap: 0 !important; + } + + .gap-lg-1 { + gap: 0.25rem !important; + } + + .gap-lg-2 { + gap: 0.5rem !important; + } + + .gap-lg-3 { + gap: 1rem !important; + } + + .gap-lg-4 { + gap: 1.5rem !important; + } + + .gap-lg-5 { + gap: 3rem !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-first { + order: -1 !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; + } + + .m-lg-0 { + margin: 0 !important; + } + + .m-lg-1 { + margin: 0.25rem !important; + } + + .m-lg-2 { + margin: 0.5rem !important; + } + + .m-lg-3 { + margin: 1rem !important; + } + + .m-lg-4 { + margin: 1.5rem !important; + } + + .m-lg-5 { + margin: 3rem !important; + } + + .m-lg-auto { + margin: auto !important; + } + + .mx-lg-0 { + margin-right: 0 !important; + margin-left: 0 !important; + } + + .mx-lg-1 { + margin-right: 0.25rem !important; + margin-left: 0.25rem !important; + } + + .mx-lg-2 { + margin-right: 0.5rem !important; + margin-left: 0.5rem !important; + } + + .mx-lg-3 { + margin-right: 1rem !important; + margin-left: 1rem !important; + } + + .mx-lg-4 { + margin-right: 1.5rem !important; + margin-left: 1.5rem !important; + } + + .mx-lg-5 { + margin-right: 3rem !important; + margin-left: 3rem !important; + } + + .mx-lg-auto { + margin-right: auto !important; + margin-left: auto !important; + } + + .my-lg-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + + .my-lg-1 { + margin-top: 0.25rem !important; + margin-bottom: 0.25rem !important; + } + + .my-lg-2 { + margin-top: 0.5rem !important; + margin-bottom: 0.5rem !important; + } + + .my-lg-3 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; + } + + .my-lg-4 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; + } + + .my-lg-5 { + margin-top: 3rem !important; + margin-bottom: 3rem !important; + } + + .my-lg-auto { + margin-top: auto !important; + margin-bottom: auto !important; + } + + .mt-lg-0 { + margin-top: 0 !important; + } + + .mt-lg-1 { + margin-top: 0.25rem !important; + } + + .mt-lg-2 { + margin-top: 0.5rem !important; + } + + .mt-lg-3 { + margin-top: 1rem !important; + } + + .mt-lg-4 { + margin-top: 1.5rem !important; + } + + .mt-lg-5 { + margin-top: 3rem !important; + } + + .mt-lg-auto { + margin-top: auto !important; + } + + .me-lg-0 { + margin-right: 0 !important; + } + + .me-lg-1 { + margin-right: 0.25rem !important; + } + + .me-lg-2 { + margin-right: 0.5rem !important; + } + + .me-lg-3 { + margin-right: 1rem !important; + } + + .me-lg-4 { + margin-right: 1.5rem !important; + } + + .me-lg-5 { + margin-right: 3rem !important; + } + + .me-lg-auto { + margin-right: auto !important; + } + + .mb-lg-0 { + margin-bottom: 0 !important; + } + + .mb-lg-1 { + margin-bottom: 0.25rem !important; + } + + .mb-lg-2 { + margin-bottom: 0.5rem !important; + } + + .mb-lg-3 { + margin-bottom: 1rem !important; + } + + .mb-lg-4 { + margin-bottom: 1.5rem !important; + } + + .mb-lg-5 { + margin-bottom: 3rem !important; + } + + .mb-lg-auto { + margin-bottom: auto !important; + } + + .ms-lg-0 { + margin-left: 0 !important; + } + + .ms-lg-1 { + margin-left: 0.25rem !important; + } + + .ms-lg-2 { + margin-left: 0.5rem !important; + } + + .ms-lg-3 { + margin-left: 1rem !important; + } + + .ms-lg-4 { + margin-left: 1.5rem !important; + } + + .ms-lg-5 { + margin-left: 3rem !important; + } + + .ms-lg-auto { + margin-left: auto !important; + } + + .p-lg-0 { + padding: 0 !important; + } + + .p-lg-1 { + padding: 0.25rem !important; + } + + .p-lg-2 { + padding: 0.5rem !important; + } + + .p-lg-3 { + padding: 1rem !important; + } + + .p-lg-4 { + padding: 1.5rem !important; + } + + .p-lg-5 { + padding: 3rem !important; + } + + .px-lg-0 { + padding-right: 0 !important; + padding-left: 0 !important; + } + + .px-lg-1 { + padding-right: 0.25rem !important; + padding-left: 0.25rem !important; + } + + .px-lg-2 { + padding-right: 0.5rem !important; + padding-left: 0.5rem !important; + } + + .px-lg-3 { + padding-right: 1rem !important; + padding-left: 1rem !important; + } + + .px-lg-4 { + padding-right: 1.5rem !important; + padding-left: 1.5rem !important; + } + + .px-lg-5 { + padding-right: 3rem !important; + padding-left: 3rem !important; + } + + .py-lg-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + + .py-lg-1 { + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; + } + + .py-lg-2 { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; + } + + .py-lg-3 { + padding-top: 1rem !important; + padding-bottom: 1rem !important; + } + + .py-lg-4 { + padding-top: 1.5rem !important; + padding-bottom: 1.5rem !important; + } + + .py-lg-5 { + padding-top: 3rem !important; + padding-bottom: 3rem !important; + } + + .pt-lg-0 { + padding-top: 0 !important; + } + + .pt-lg-1 { + padding-top: 0.25rem !important; + } + + .pt-lg-2 { + padding-top: 0.5rem !important; + } + + .pt-lg-3 { + padding-top: 1rem !important; + } + + .pt-lg-4 { + padding-top: 1.5rem !important; + } + + .pt-lg-5 { + padding-top: 3rem !important; + } + + .pe-lg-0 { + padding-right: 0 !important; + } + + .pe-lg-1 { + padding-right: 0.25rem !important; + } + + .pe-lg-2 { + padding-right: 0.5rem !important; + } + + .pe-lg-3 { + padding-right: 1rem !important; + } + + .pe-lg-4 { + padding-right: 1.5rem !important; + } + + .pe-lg-5 { + padding-right: 3rem !important; + } + + .pb-lg-0 { + padding-bottom: 0 !important; + } + + .pb-lg-1 { + padding-bottom: 0.25rem !important; + } + + .pb-lg-2 { + padding-bottom: 0.5rem !important; + } + + .pb-lg-3 { + padding-bottom: 1rem !important; + } + + .pb-lg-4 { + padding-bottom: 1.5rem !important; + } + + .pb-lg-5 { + padding-bottom: 3rem !important; + } + + .ps-lg-0 { + padding-left: 0 !important; + } + + .ps-lg-1 { + padding-left: 0.25rem !important; + } + + .ps-lg-2 { + padding-left: 0.5rem !important; + } + + .ps-lg-3 { + padding-left: 1rem !important; + } + + .ps-lg-4 { + padding-left: 1.5rem !important; + } + + .ps-lg-5 { + padding-left: 3rem !important; + } + + .text-lg-start { + text-align: left !important; + } + + .text-lg-end { + text-align: right !important; + } + + .text-lg-center { + text-align: center !important; + } +} +@media (min-width: 1200px) { + .float-xl-start { + float: left !important; + } + + .float-xl-end { + float: right !important; + } + + .float-xl-none { + float: none !important; + } + + .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; + } + + .flex-xl-fill { + flex: 1 1 auto !important; + } + + .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-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; + } + + .flex-xl-wrap { + flex-wrap: wrap !important; + } + + .flex-xl-nowrap { + flex-wrap: nowrap !important; + } + + .flex-xl-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + + .gap-xl-0 { + gap: 0 !important; + } + + .gap-xl-1 { + gap: 0.25rem !important; + } + + .gap-xl-2 { + gap: 0.5rem !important; + } + + .gap-xl-3 { + gap: 1rem !important; + } + + .gap-xl-4 { + gap: 1.5rem !important; + } + + .gap-xl-5 { + gap: 3rem !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-first { + order: -1 !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; + } + + .m-xl-0 { + margin: 0 !important; + } + + .m-xl-1 { + margin: 0.25rem !important; + } + + .m-xl-2 { + margin: 0.5rem !important; + } + + .m-xl-3 { + margin: 1rem !important; + } + + .m-xl-4 { + margin: 1.5rem !important; + } + + .m-xl-5 { + margin: 3rem !important; + } + + .m-xl-auto { + margin: auto !important; + } + + .mx-xl-0 { + margin-right: 0 !important; + margin-left: 0 !important; + } + + .mx-xl-1 { + margin-right: 0.25rem !important; + margin-left: 0.25rem !important; + } + + .mx-xl-2 { + margin-right: 0.5rem !important; + margin-left: 0.5rem !important; + } + + .mx-xl-3 { + margin-right: 1rem !important; + margin-left: 1rem !important; + } + + .mx-xl-4 { + margin-right: 1.5rem !important; + margin-left: 1.5rem !important; + } + + .mx-xl-5 { + margin-right: 3rem !important; + margin-left: 3rem !important; + } + + .mx-xl-auto { + margin-right: auto !important; + margin-left: auto !important; + } + + .my-xl-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + + .my-xl-1 { + margin-top: 0.25rem !important; + margin-bottom: 0.25rem !important; + } + + .my-xl-2 { + margin-top: 0.5rem !important; + margin-bottom: 0.5rem !important; + } + + .my-xl-3 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; + } + + .my-xl-4 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; + } + + .my-xl-5 { + margin-top: 3rem !important; + margin-bottom: 3rem !important; + } + + .my-xl-auto { + margin-top: auto !important; + margin-bottom: auto !important; + } + + .mt-xl-0 { + margin-top: 0 !important; + } + + .mt-xl-1 { + margin-top: 0.25rem !important; + } + + .mt-xl-2 { + margin-top: 0.5rem !important; + } + + .mt-xl-3 { + margin-top: 1rem !important; + } + + .mt-xl-4 { + margin-top: 1.5rem !important; + } + + .mt-xl-5 { + margin-top: 3rem !important; + } + + .mt-xl-auto { + margin-top: auto !important; + } + + .me-xl-0 { + margin-right: 0 !important; + } + + .me-xl-1 { + margin-right: 0.25rem !important; + } + + .me-xl-2 { + margin-right: 0.5rem !important; + } + + .me-xl-3 { + margin-right: 1rem !important; + } + + .me-xl-4 { + margin-right: 1.5rem !important; + } + + .me-xl-5 { + margin-right: 3rem !important; + } + + .me-xl-auto { + margin-right: auto !important; + } + + .mb-xl-0 { + margin-bottom: 0 !important; + } + + .mb-xl-1 { + margin-bottom: 0.25rem !important; + } + + .mb-xl-2 { + margin-bottom: 0.5rem !important; + } + + .mb-xl-3 { + margin-bottom: 1rem !important; + } + + .mb-xl-4 { + margin-bottom: 1.5rem !important; + } + + .mb-xl-5 { + margin-bottom: 3rem !important; + } + + .mb-xl-auto { + margin-bottom: auto !important; + } + + .ms-xl-0 { + margin-left: 0 !important; + } + + .ms-xl-1 { + margin-left: 0.25rem !important; + } + + .ms-xl-2 { + margin-left: 0.5rem !important; + } + + .ms-xl-3 { + margin-left: 1rem !important; + } + + .ms-xl-4 { + margin-left: 1.5rem !important; + } + + .ms-xl-5 { + margin-left: 3rem !important; + } + + .ms-xl-auto { + margin-left: auto !important; + } + + .p-xl-0 { + padding: 0 !important; + } + + .p-xl-1 { + padding: 0.25rem !important; + } + + .p-xl-2 { + padding: 0.5rem !important; + } + + .p-xl-3 { + padding: 1rem !important; + } + + .p-xl-4 { + padding: 1.5rem !important; + } + + .p-xl-5 { + padding: 3rem !important; + } + + .px-xl-0 { + padding-right: 0 !important; + padding-left: 0 !important; + } + + .px-xl-1 { + padding-right: 0.25rem !important; + padding-left: 0.25rem !important; + } + + .px-xl-2 { + padding-right: 0.5rem !important; + padding-left: 0.5rem !important; + } + + .px-xl-3 { + padding-right: 1rem !important; + padding-left: 1rem !important; + } + + .px-xl-4 { + padding-right: 1.5rem !important; + padding-left: 1.5rem !important; + } + + .px-xl-5 { + padding-right: 3rem !important; + padding-left: 3rem !important; + } + + .py-xl-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + + .py-xl-1 { + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; + } + + .py-xl-2 { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; + } + + .py-xl-3 { + padding-top: 1rem !important; + padding-bottom: 1rem !important; + } + + .py-xl-4 { + padding-top: 1.5rem !important; + padding-bottom: 1.5rem !important; + } + + .py-xl-5 { + padding-top: 3rem !important; + padding-bottom: 3rem !important; + } + + .pt-xl-0 { + padding-top: 0 !important; + } + + .pt-xl-1 { + padding-top: 0.25rem !important; + } + + .pt-xl-2 { + padding-top: 0.5rem !important; + } + + .pt-xl-3 { + padding-top: 1rem !important; + } + + .pt-xl-4 { + padding-top: 1.5rem !important; + } + + .pt-xl-5 { + padding-top: 3rem !important; + } + + .pe-xl-0 { + padding-right: 0 !important; + } + + .pe-xl-1 { + padding-right: 0.25rem !important; + } + + .pe-xl-2 { + padding-right: 0.5rem !important; + } + + .pe-xl-3 { + padding-right: 1rem !important; + } + + .pe-xl-4 { + padding-right: 1.5rem !important; + } + + .pe-xl-5 { + padding-right: 3rem !important; + } + + .pb-xl-0 { + padding-bottom: 0 !important; + } + + .pb-xl-1 { + padding-bottom: 0.25rem !important; + } + + .pb-xl-2 { + padding-bottom: 0.5rem !important; + } + + .pb-xl-3 { + padding-bottom: 1rem !important; + } + + .pb-xl-4 { + padding-bottom: 1.5rem !important; + } + + .pb-xl-5 { + padding-bottom: 3rem !important; + } + + .ps-xl-0 { + padding-left: 0 !important; + } + + .ps-xl-1 { + padding-left: 0.25rem !important; + } + + .ps-xl-2 { + padding-left: 0.5rem !important; + } + + .ps-xl-3 { + padding-left: 1rem !important; + } + + .ps-xl-4 { + padding-left: 1.5rem !important; + } + + .ps-xl-5 { + padding-left: 3rem !important; + } + + .text-xl-start { + text-align: left !important; + } + + .text-xl-end { + text-align: right !important; + } + + .text-xl-center { + text-align: center !important; + } +} +@media (min-width: 1400px) { + .float-xxl-start { + float: left !important; + } + + .float-xxl-end { + float: right !important; + } + + .float-xxl-none { + float: none !important; + } + + .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; + } + + .flex-xxl-fill { + flex: 1 1 auto !important; + } + + .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-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; + } + + .flex-xxl-wrap { + flex-wrap: wrap !important; + } + + .flex-xxl-nowrap { + flex-wrap: nowrap !important; + } + + .flex-xxl-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + + .gap-xxl-0 { + gap: 0 !important; + } + + .gap-xxl-1 { + gap: 0.25rem !important; + } + + .gap-xxl-2 { + gap: 0.5rem !important; + } + + .gap-xxl-3 { + gap: 1rem !important; + } + + .gap-xxl-4 { + gap: 1.5rem !important; + } + + .gap-xxl-5 { + gap: 3rem !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-first { + order: -1 !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; + } + + .m-xxl-0 { + margin: 0 !important; + } + + .m-xxl-1 { + margin: 0.25rem !important; + } + + .m-xxl-2 { + margin: 0.5rem !important; + } + + .m-xxl-3 { + margin: 1rem !important; + } + + .m-xxl-4 { + margin: 1.5rem !important; + } + + .m-xxl-5 { + margin: 3rem !important; + } + + .m-xxl-auto { + margin: auto !important; + } + + .mx-xxl-0 { + margin-right: 0 !important; + margin-left: 0 !important; + } + + .mx-xxl-1 { + margin-right: 0.25rem !important; + margin-left: 0.25rem !important; + } + + .mx-xxl-2 { + margin-right: 0.5rem !important; + margin-left: 0.5rem !important; + } + + .mx-xxl-3 { + margin-right: 1rem !important; + margin-left: 1rem !important; + } + + .mx-xxl-4 { + margin-right: 1.5rem !important; + margin-left: 1.5rem !important; + } + + .mx-xxl-5 { + margin-right: 3rem !important; + margin-left: 3rem !important; + } + + .mx-xxl-auto { + margin-right: auto !important; + margin-left: auto !important; + } + + .my-xxl-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + + .my-xxl-1 { + margin-top: 0.25rem !important; + margin-bottom: 0.25rem !important; + } + + .my-xxl-2 { + margin-top: 0.5rem !important; + margin-bottom: 0.5rem !important; + } + + .my-xxl-3 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; + } + + .my-xxl-4 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; + } + + .my-xxl-5 { + margin-top: 3rem !important; + margin-bottom: 3rem !important; + } + + .my-xxl-auto { + margin-top: auto !important; + margin-bottom: auto !important; + } + + .mt-xxl-0 { + margin-top: 0 !important; + } + + .mt-xxl-1 { + margin-top: 0.25rem !important; + } + + .mt-xxl-2 { + margin-top: 0.5rem !important; + } + + .mt-xxl-3 { + margin-top: 1rem !important; + } + + .mt-xxl-4 { + margin-top: 1.5rem !important; + } + + .mt-xxl-5 { + margin-top: 3rem !important; + } + + .mt-xxl-auto { + margin-top: auto !important; + } + + .me-xxl-0 { + margin-right: 0 !important; + } + + .me-xxl-1 { + margin-right: 0.25rem !important; + } + + .me-xxl-2 { + margin-right: 0.5rem !important; + } + + .me-xxl-3 { + margin-right: 1rem !important; + } + + .me-xxl-4 { + margin-right: 1.5rem !important; + } + + .me-xxl-5 { + margin-right: 3rem !important; + } + + .me-xxl-auto { + margin-right: auto !important; + } + + .mb-xxl-0 { + margin-bottom: 0 !important; + } + + .mb-xxl-1 { + margin-bottom: 0.25rem !important; + } + + .mb-xxl-2 { + margin-bottom: 0.5rem !important; + } + + .mb-xxl-3 { + margin-bottom: 1rem !important; + } + + .mb-xxl-4 { + margin-bottom: 1.5rem !important; + } + + .mb-xxl-5 { + margin-bottom: 3rem !important; + } + + .mb-xxl-auto { + margin-bottom: auto !important; + } + + .ms-xxl-0 { + margin-left: 0 !important; + } + + .ms-xxl-1 { + margin-left: 0.25rem !important; + } + + .ms-xxl-2 { + margin-left: 0.5rem !important; + } + + .ms-xxl-3 { + margin-left: 1rem !important; + } + + .ms-xxl-4 { + margin-left: 1.5rem !important; + } + + .ms-xxl-5 { + margin-left: 3rem !important; + } + + .ms-xxl-auto { + margin-left: auto !important; + } + + .p-xxl-0 { + padding: 0 !important; + } + + .p-xxl-1 { + padding: 0.25rem !important; + } + + .p-xxl-2 { + padding: 0.5rem !important; + } + + .p-xxl-3 { + padding: 1rem !important; + } + + .p-xxl-4 { + padding: 1.5rem !important; + } + + .p-xxl-5 { + padding: 3rem !important; + } + + .px-xxl-0 { + padding-right: 0 !important; + padding-left: 0 !important; + } + + .px-xxl-1 { + padding-right: 0.25rem !important; + padding-left: 0.25rem !important; + } + + .px-xxl-2 { + padding-right: 0.5rem !important; + padding-left: 0.5rem !important; + } + + .px-xxl-3 { + padding-right: 1rem !important; + padding-left: 1rem !important; + } + + .px-xxl-4 { + padding-right: 1.5rem !important; + padding-left: 1.5rem !important; + } + + .px-xxl-5 { + padding-right: 3rem !important; + padding-left: 3rem !important; + } + + .py-xxl-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + + .py-xxl-1 { + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; + } + + .py-xxl-2 { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; + } + + .py-xxl-3 { + padding-top: 1rem !important; + padding-bottom: 1rem !important; + } + + .py-xxl-4 { + padding-top: 1.5rem !important; + padding-bottom: 1.5rem !important; + } + + .py-xxl-5 { + padding-top: 3rem !important; + padding-bottom: 3rem !important; + } + + .pt-xxl-0 { + padding-top: 0 !important; + } + + .pt-xxl-1 { + padding-top: 0.25rem !important; + } + + .pt-xxl-2 { + padding-top: 0.5rem !important; + } + + .pt-xxl-3 { + padding-top: 1rem !important; + } + + .pt-xxl-4 { + padding-top: 1.5rem !important; + } + + .pt-xxl-5 { + padding-top: 3rem !important; + } + + .pe-xxl-0 { + padding-right: 0 !important; + } + + .pe-xxl-1 { + padding-right: 0.25rem !important; + } + + .pe-xxl-2 { + padding-right: 0.5rem !important; + } + + .pe-xxl-3 { + padding-right: 1rem !important; + } + + .pe-xxl-4 { + padding-right: 1.5rem !important; + } + + .pe-xxl-5 { + padding-right: 3rem !important; + } + + .pb-xxl-0 { + padding-bottom: 0 !important; + } + + .pb-xxl-1 { + padding-bottom: 0.25rem !important; + } + + .pb-xxl-2 { + padding-bottom: 0.5rem !important; + } + + .pb-xxl-3 { + padding-bottom: 1rem !important; + } + + .pb-xxl-4 { + padding-bottom: 1.5rem !important; + } + + .pb-xxl-5 { + padding-bottom: 3rem !important; + } + + .ps-xxl-0 { + padding-left: 0 !important; + } + + .ps-xxl-1 { + padding-left: 0.25rem !important; + } + + .ps-xxl-2 { + padding-left: 0.5rem !important; + } + + .ps-xxl-3 { + padding-left: 1rem !important; + } + + .ps-xxl-4 { + padding-left: 1.5rem !important; + } + + .ps-xxl-5 { + padding-left: 3rem !important; + } + + .text-xxl-start { + text-align: left !important; + } + + .text-xxl-end { + text-align: right !important; + } + + .text-xxl-center { + text-align: center !important; + } +} +@media (min-width: 1200px) { + .fs-1 { + font-size: 2.5rem !important; + } + + .fs-2 { + font-size: 2rem !important; + } + + .fs-3 { + font-size: 1.75rem !important; + } + + .fs-4 { + font-size: 1.5rem !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; + } +} + /*# sourceMappingURL=bootstrap.css.map */ \ No newline at end of file diff --git a/src/static/scripts/datatables.css b/src/static/scripts/datatables.css index 590d541a..db60b110 100644 --- a/src/static/scripts/datatables.css +++ b/src/static/scripts/datatables.css @@ -4,13 +4,18 @@ * * To rebuild or modify this file with the latest versions of the included * software please visit: - * https://datatables.net/download/#bs4/dt-1.10.23 + * https://datatables.net/download/#bs5/dt-1.10.25 * * Included libraries: - * DataTables 1.10.23 + * DataTables 1.10.25 */ @charset "UTF-8"; +/*! Bootstrap 5 integration for DataTables + * + * ©2020 SpryMedia Ltd, all rights reserved. + * License: MIT datatables.net/license/mit + */ table.dataTable { clear: both; margin-top: 6px !important; @@ -105,7 +110,7 @@ table.dataTable > thead .sorting_asc_disabled:after, table.dataTable > thead .sorting_desc_disabled:before, table.dataTable > thead .sorting_desc_disabled:after { position: absolute; - bottom: 0.9em; + bottom: 0.5em; display: block; opacity: 0.3; } @@ -193,18 +198,27 @@ table.dataTable.table-sm .sorting_desc:after { table.table-bordered.dataTable { border-right-width: 0; } +table.table-bordered.dataTable thead tr:first-child th, +table.table-bordered.dataTable thead tr:first-child td { + border-top-width: 1px; +} table.table-bordered.dataTable th, table.table-bordered.dataTable td { border-left-width: 0; } +table.table-bordered.dataTable th:first-child, table.table-bordered.dataTable th:first-child, +table.table-bordered.dataTable td:first-child, +table.table-bordered.dataTable td:first-child { + border-left-width: 1px; +} table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable td:last-child, table.table-bordered.dataTable td:last-child { border-right-width: 1px; } -table.table-bordered.dataTable tbody th, -table.table-bordered.dataTable tbody td { - border-bottom-width: 0; +table.table-bordered.dataTable th, +table.table-bordered.dataTable td { + border-bottom-width: 1px; } div.dataTables_scrollHead table.table-bordered { diff --git a/src/static/scripts/datatables.js b/src/static/scripts/datatables.js index e25c916c..f8f1f3d2 100644 --- a/src/static/scripts/datatables.js +++ b/src/static/scripts/datatables.js @@ -4,24 +4,24 @@ * * To rebuild or modify this file with the latest versions of the included * software please visit: - * https://datatables.net/download/#bs4/dt-1.10.23 + * https://datatables.net/download/#bs5/dt-1.10.25 * * Included libraries: - * DataTables 1.10.23 + * DataTables 1.10.25 */ -/*! DataTables 1.10.23 - * ©2008-2020 SpryMedia Ltd - datatables.net/license +/*! DataTables 1.10.25 + * ©2008-2021 SpryMedia Ltd - datatables.net/license */ /** * @summary DataTables * @description Paginate, search and order HTML tables - * @version 1.10.23 + * @version 1.10.25 * @file jquery.dataTables.js * @author SpryMedia Ltd * @contact www.datatables.net - * @copyright Copyright 2008-2020 SpryMedia Ltd. + * @copyright Copyright 2008-2021 SpryMedia Ltd. * * This source file is free software, available under the following license: * MIT license - http://datatables.net/license @@ -1100,6 +1100,8 @@ _fnLanguageCompat( json ); _fnCamelToHungarian( defaults.oLanguage, json ); $.extend( true, oLanguage, json ); + + _fnCallbackFire( oSettings, null, 'i18n', [oSettings]); _fnInitialise( oSettings ); }, error: function () { @@ -1109,6 +1111,9 @@ } ); bInitHandedOff = true; } + else { + _fnCallbackFire( oSettings, null, 'i18n', [oSettings]); + } /* * Stripes @@ -1260,7 +1265,7 @@ var tbody = $this.children('tbody'); if ( tbody.length === 0 ) { - tbody = $('').appendTo($this); + tbody = $('').insertAfter(thead); } oSettings.nTBody = tbody[0]; @@ -2315,8 +2320,9 @@ } // Only a single match is needed for html type since it is - // bottom of the pile and very similar to string - if ( detectedType === 'html' ) { + // bottom of the pile and very similar to string - but it + // must not be empty + if ( detectedType === 'html' && ! _empty(cache[k]) ) { break; } } @@ -3421,9 +3427,10 @@ /** * Insert the required TR nodes into the table for display * @param {object} oSettings dataTables settings object + * @param ajaxComplete true after ajax call to complete rendering * @memberof DataTable#oApi */ - function _fnDraw( oSettings ) + function _fnDraw( oSettings, ajaxComplete ) { /* Provide a pre-callback function which can be used to cancel the draw is false is returned */ var aPreDraw = _fnCallbackFire( oSettings, 'aoPreDrawCallback', 'preDraw', [oSettings] ); @@ -3472,8 +3479,9 @@ { oSettings.iDraw++; } - else if ( !oSettings.bDestroying && !_fnAjaxUpdate( oSettings ) ) + else if ( !oSettings.bDestroying && !ajaxComplete) { + _fnAjaxUpdate( oSettings ); return; } @@ -4005,21 +4013,16 @@ */ function _fnAjaxUpdate( settings ) { - if ( settings.bAjaxDataGet ) { - settings.iDraw++; - _fnProcessingDisplay( settings, true ); + settings.iDraw++; + _fnProcessingDisplay( settings, true ); - _fnBuildAjax( - settings, - _fnAjaxParameters( settings ), - function(json) { - _fnAjaxUpdateDraw( settings, json ); - } - ); - - return false; - } - return true; + _fnBuildAjax( + settings, + _fnAjaxParameters( settings ), + function(json) { + _fnAjaxUpdateDraw( settings, json ); + } + ); } @@ -4172,14 +4175,12 @@ } settings.aiDisplay = settings.aiDisplayMaster.slice(); - settings.bAjaxDataGet = false; - _fnDraw( settings ); + _fnDraw( settings, true ); if ( ! settings._bInitComplete ) { _fnInitComplete( settings, json ); } - settings.bAjaxDataGet = true; _fnProcessingDisplay( settings, false ); } @@ -6108,7 +6109,7 @@ { var col = columns[i]; var asSorting = col.asSorting; - var sTitle = col.sTitle.replace( /<.*?>/g, "" ); + var sTitle = col.ariaTitle || col.sTitle.replace( /<.*?>/g, "" ); var th = col.nTh; // IE7 is throwing an error when setting these properties with jQuery's @@ -9542,7 +9543,7 @@ * @type string * @default Version number */ - DataTable.version = "1.10.23"; + DataTable.version = "1.10.25"; /** * Private data store, containing all of the settings objects that are @@ -13623,13 +13624,6 @@ */ "sAjaxDataProp": null, - /** - * Note if draw should be blocked while getting data - * @type boolean - * @default true - */ - "bAjaxDataGet": true, - /** * The last jQuery XHR object that was used for server-side data gathering. * This can be used for working with the XHR information in one of the @@ -13966,7 +13960,7 @@ * * @type string */ - build:"bs4/dt-1.10.23", + build:"bs5/dt-1.10.25", /** @@ -14494,8 +14488,8 @@ "sSortAsc": "sorting_asc", "sSortDesc": "sorting_desc", "sSortable": "sorting", /* Sortable in both directions */ - "sSortableAsc": "sorting_asc_disabled", - "sSortableDesc": "sorting_desc_disabled", + "sSortableAsc": "sorting_desc_disabled", + "sSortableDesc": "sorting_asc_disabled", "sSortableNone": "sorting_disabled", "sSortColumn": "sorting_", /* Note that an int is postfixed for the sorting order */ @@ -14936,7 +14930,6 @@ cell .removeClass( - column.sSortingClass +' '+ classes.sSortAsc +' '+ classes.sSortDesc ) @@ -15061,6 +15054,11 @@ decimal+(d - intPart).toFixed( precision ).substring( 2 ): ''; + // If zero, then can't have a negative prefix + if (intPart === 0 && parseFloat(floatPart) === 0) { + negative = ''; + } + return negative + (prefix||'') + intPart.toString().replace( /\B(?=(\d{3})+(?!\d))/g, thousands @@ -15395,12 +15393,12 @@ })); -/*! DataTables Bootstrap 4 integration - * ©2011-2017 SpryMedia Ltd - datatables.net/license +/*! DataTables Bootstrap 5 integration + * 2020 SpryMedia Ltd - datatables.net/license */ /** - * DataTables integration for Bootstrap 4. This requires Bootstrap 4 and + * DataTables integration for Bootstrap 4. This requires Bootstrap 5 and * DataTables 1.10 or newer. * * This file sets the defaults and adds options to DataTables to style its @@ -15452,9 +15450,9 @@ $.extend( true, DataTable.defaults, { /* Default class modification */ $.extend( DataTable.ext.classes, { - sWrapper: "dataTables_wrapper dt-bootstrap4", + sWrapper: "dataTables_wrapper dt-bootstrap5", sFilterInput: "form-control form-control-sm", - sLengthSelect: "custom-select custom-select-sm form-control form-control-sm", + sLengthSelect: "form-select form-select-sm", sProcessing: "dataTables_processing card", sPageButton: "paginate_button page-item" } ); diff --git a/src/static/scripts/jquery-3.5.1.slim.js b/src/static/scripts/jquery-3.6.0.slim.js similarity index 98% rename from src/static/scripts/jquery-3.5.1.slim.js rename to src/static/scripts/jquery-3.6.0.slim.js index 790e7ec8..665bf108 100644 --- a/src/static/scripts/jquery-3.5.1.slim.js +++ b/src/static/scripts/jquery-3.6.0.slim.js @@ -1,15 +1,15 @@ /*! - * jQuery JavaScript Library v3.5.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-deprecated/ajax-event-alias,-effects,-effects/Tween,-effects/animatedSelector + * jQuery JavaScript Library v3.6.0 -ajax,-ajax/jsonp,-ajax/load,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-deprecated/ajax-event-alias,-effects,-effects/Tween,-effects/animatedSelector * https://jquery.com/ * * Includes Sizzle.js * https://sizzlejs.com/ * - * Copyright JS Foundation and other contributors + * Copyright OpenJS Foundation and other contributors * Released under the MIT license * https://jquery.org/license * - * Date: 2020-05-04T22:49Z + * Date: 2021-03-02T17:08Z */ ( function( global, factory ) { @@ -76,12 +76,16 @@ var support = {}; var isFunction = function isFunction( obj ) { - // Support: Chrome <=57, Firefox <=52 - // In some browsers, typeof returns "function" for HTML elements - // (i.e., `typeof document.createElement( "object" ) === "function"`). - // We don't want to classify *any* DOM node as a function. - return typeof obj === "function" && typeof obj.nodeType !== "number"; - }; + // Support: Chrome <=57, Firefox <=52 + // In some browsers, typeof returns "function" for HTML elements + // (i.e., `typeof document.createElement( "object" ) === "function"`). + // We don't want to classify *any* DOM node as a function. + // Support: QtWeb <=3.8.5, WebKit <=534.34, wkhtmltopdf tool <=0.12.5 + // Plus for old WebKit, typeof returns "function" for HTML collections + // (e.g., `typeof document.getElementsByTagName("div") === "function"`). (gh-4756) + return typeof obj === "function" && typeof obj.nodeType !== "number" && + typeof obj.item !== "function"; + }; var isWindow = function isWindow( obj ) { @@ -147,7 +151,7 @@ function toType( obj ) { var - version = "3.5.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-deprecated/ajax-event-alias,-effects,-effects/Tween,-effects/animatedSelector", + version = "3.6.0 -ajax,-ajax/jsonp,-ajax/load,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-deprecated/ajax-event-alias,-effects,-effects/Tween,-effects/animatedSelector", // Define a local copy of jQuery jQuery = function( selector, context ) { @@ -401,7 +405,7 @@ jQuery.extend( { if ( isArrayLike( Object( arr ) ) ) { jQuery.merge( ret, typeof arr === "string" ? - [ arr ] : arr + [ arr ] : arr ); } else { push.call( ret, arr ); @@ -496,9 +500,9 @@ if ( typeof Symbol === "function" ) { // Populate the class2type map jQuery.each( "Boolean Number String Function Array Date RegExp Object Error Symbol".split( " " ), -function( _i, name ) { - class2type[ "[object " + name + "]" ] = name.toLowerCase(); -} ); + function( _i, name ) { + class2type[ "[object " + name + "]" ] = name.toLowerCase(); + } ); function isArrayLike( obj ) { @@ -518,14 +522,14 @@ function isArrayLike( obj ) { } var Sizzle = /*! - * Sizzle CSS Selector Engine v2.3.5 + * Sizzle CSS Selector Engine v2.3.6 * https://sizzlejs.com/ * * Copyright JS Foundation and other contributors * Released under the MIT license * https://js.foundation/ * - * Date: 2020-03-14 + * Date: 2021-02-16 */ ( function( window ) { var i, @@ -1108,8 +1112,8 @@ support = Sizzle.support = {}; * @returns {Boolean} True iff elem is a non-HTML XML node */ isXML = Sizzle.isXML = function( elem ) { - var namespace = elem.namespaceURI, - docElem = ( elem.ownerDocument || elem ).documentElement; + var namespace = elem && elem.namespaceURI, + docElem = elem && ( elem.ownerDocument || elem ).documentElement; // Support: IE <=8 // Assume HTML when documentElement doesn't yet exist, such as inside loading iframes @@ -3024,9 +3028,9 @@ var rneedsContext = jQuery.expr.match.needsContext; function nodeName( elem, name ) { - return elem.nodeName && elem.nodeName.toLowerCase() === name.toLowerCase(); + return elem.nodeName && elem.nodeName.toLowerCase() === name.toLowerCase(); -}; +} var rsingleTag = ( /^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i ); @@ -3997,8 +4001,8 @@ jQuery.extend( { resolveContexts = Array( i ), resolveValues = slice.call( arguments ), - // the master Deferred - master = jQuery.Deferred(), + // the primary Deferred + primary = jQuery.Deferred(), // subordinate callback factory updateFunc = function( i ) { @@ -4006,30 +4010,30 @@ jQuery.extend( { resolveContexts[ i ] = this; resolveValues[ i ] = arguments.length > 1 ? slice.call( arguments ) : value; if ( !( --remaining ) ) { - master.resolveWith( resolveContexts, resolveValues ); + primary.resolveWith( resolveContexts, resolveValues ); } }; }; // Single- and empty arguments are adopted like Promise.resolve if ( remaining <= 1 ) { - adoptValue( singleValue, master.done( updateFunc( i ) ).resolve, master.reject, + adoptValue( singleValue, primary.done( updateFunc( i ) ).resolve, primary.reject, !remaining ); // Use .then() to unwrap secondary thenables (cf. gh-3000) - if ( master.state() === "pending" || + if ( primary.state() === "pending" || isFunction( resolveValues[ i ] && resolveValues[ i ].then ) ) { - return master.then(); + return primary.then(); } } // Multiple arguments are aggregated like Promise.all array elements while ( i-- ) { - adoptValue( resolveValues[ i ], updateFunc( i ), master.reject ); + adoptValue( resolveValues[ i ], updateFunc( i ), primary.reject ); } - return master.promise(); + return primary.promise(); } } ); @@ -4180,8 +4184,8 @@ var access = function( elems, fn, key, value, chainable, emptyGet, raw ) { for ( ; i < len; i++ ) { fn( elems[ i ], key, raw ? - value : - value.call( elems[ i ], i, fn( elems[ i ], key ) ) + value : + value.call( elems[ i ], i, fn( elems[ i ], key ) ) ); } } @@ -5089,10 +5093,7 @@ function buildFragment( elems, context, scripts, selection, ignored ) { } -var - rkeyEvent = /^key/, - rmouseEvent = /^(?:mouse|pointer|contextmenu|drag|drop)|click/, - rtypenamespace = /^([^.]*)(?:\.(.+)|)/; +var rtypenamespace = /^([^.]*)(?:\.(.+)|)/; function returnTrue() { return true; @@ -5387,8 +5388,8 @@ jQuery.event = { event = jQuery.event.fix( nativeEvent ), handlers = ( - dataPriv.get( this, "events" ) || Object.create( null ) - )[ event.type ] || [], + dataPriv.get( this, "events" ) || Object.create( null ) + )[ event.type ] || [], special = jQuery.event.special[ event.type ] || {}; // Use the fix-ed jQuery.Event rather than the (read-only) native event @@ -5512,12 +5513,12 @@ jQuery.event = { get: isFunction( hook ) ? function() { if ( this.originalEvent ) { - return hook( this.originalEvent ); + return hook( this.originalEvent ); } } : function() { if ( this.originalEvent ) { - return this.originalEvent[ name ]; + return this.originalEvent[ name ]; } }, @@ -5656,7 +5657,13 @@ function leverageNative( el, type, expectSync ) { // Cancel the outer synthetic event event.stopImmediatePropagation(); event.preventDefault(); - return result.value; + + // Support: Chrome 86+ + // In Chrome, if an element having a focusout handler is blurred by + // clicking outside of it, it invokes the handler synchronously. If + // that handler calls `.remove()` on the element, the data is cleared, + // leaving `result` undefined. We need to guard against this. + return result && result.value; } // If this is an inner synthetic event for an event with a bubbling surrogate @@ -5821,34 +5828,7 @@ jQuery.each( { targetTouches: true, toElement: true, touches: true, - - which: function( event ) { - var button = event.button; - - // Add which for key events - if ( event.which == null && rkeyEvent.test( event.type ) ) { - return event.charCode != null ? event.charCode : event.keyCode; - } - - // Add which for click: 1 === left; 2 === middle; 3 === right - if ( !event.which && button !== undefined && rmouseEvent.test( event.type ) ) { - if ( button & 1 ) { - return 1; - } - - if ( button & 2 ) { - return 3; - } - - if ( button & 4 ) { - return 2; - } - - return 0; - } - - return event.which; - } + which: true }, jQuery.event.addProp ); jQuery.each( { focus: "focusin", blur: "focusout" }, function( type, delegateType ) { @@ -5874,6 +5854,12 @@ jQuery.each( { focus: "focusin", blur: "focusout" }, function( type, delegateTyp return true; }, + // Suppress native focus or blur as it's already being fired + // in leverageNative. + _default: function() { + return true; + }, + delegateType: delegateType }; } ); @@ -6541,6 +6527,10 @@ var rboxStyle = new RegExp( cssExpand.join( "|" ), "i" ); // set in CSS while `offset*` properties report correct values. // Behavior in IE 9 is more subtle than in newer versions & it passes // some versions of this test; make sure not to make it pass there! + // + // Support: Firefox 70+ + // Only Firefox includes border widths + // in computed dimensions. (gh-4529) reliableTrDimensions: function() { var table, tr, trChild, trStyle; if ( reliableTrDimensionsVal == null ) { @@ -6548,17 +6538,32 @@ var rboxStyle = new RegExp( cssExpand.join( "|" ), "i" ); tr = document.createElement( "tr" ); trChild = document.createElement( "div" ); - table.style.cssText = "position:absolute;left:-11111px"; + table.style.cssText = "position:absolute;left:-11111px;border-collapse:separate"; + tr.style.cssText = "border:1px solid"; + + // Support: Chrome 86+ + // Height set through cssText does not get applied. + // Computed height then comes back as 0. tr.style.height = "1px"; trChild.style.height = "9px"; + // Support: Android 8 Chrome 86+ + // In our bodyBackground.html iframe, + // display for all div elements is set to "inline", + // which causes a problem only in Android 8 Chrome 86. + // Ensuring the div is display: block + // gets around this issue. + trChild.style.display = "block"; + documentElement .appendChild( table ) .appendChild( tr ) .appendChild( trChild ); trStyle = window.getComputedStyle( tr ); - reliableTrDimensionsVal = parseInt( trStyle.height ) > 3; + reliableTrDimensionsVal = ( parseInt( trStyle.height, 10 ) + + parseInt( trStyle.borderTopWidth, 10 ) + + parseInt( trStyle.borderBottomWidth, 10 ) ) === tr.offsetHeight; documentElement.removeChild( table ); } @@ -7022,10 +7027,10 @@ jQuery.each( [ "height", "width" ], function( _i, dimension ) { // Running getBoundingClientRect on a disconnected node // in IE throws an error. ( !elem.getClientRects().length || !elem.getBoundingClientRect().width ) ? - swap( elem, cssShow, function() { - return getWidthOrHeight( elem, dimension, extra ); - } ) : - getWidthOrHeight( elem, dimension, extra ); + swap( elem, cssShow, function() { + return getWidthOrHeight( elem, dimension, extra ); + } ) : + getWidthOrHeight( elem, dimension, extra ); } }, @@ -7084,7 +7089,7 @@ jQuery.cssHooks.marginLeft = addGetHookIf( support.reliableMarginLeft, swap( elem, { marginLeft: 0 }, function() { return elem.getBoundingClientRect().left; } ) - ) + "px"; + ) + "px"; } } ); @@ -7608,8 +7613,8 @@ jQuery.fn.extend( { if ( this.setAttribute ) { this.setAttribute( "class", className || value === false ? - "" : - dataPriv.get( this, "__className__" ) || "" + "" : + dataPriv.get( this, "__className__" ) || "" ); } } @@ -7624,7 +7629,7 @@ jQuery.fn.extend( { while ( ( elem = this[ i++ ] ) ) { if ( elem.nodeType === 1 && ( " " + stripAndCollapse( getClass( elem ) ) + " " ).indexOf( className ) > -1 ) { - return true; + return true; } } @@ -7914,9 +7919,7 @@ jQuery.extend( jQuery.event, { special.bindType || type; // jQuery handler - handle = ( - dataPriv.get( cur, "events" ) || Object.create( null ) - )[ event.type ] && + handle = ( dataPriv.get( cur, "events" ) || Object.create( null ) )[ event.type ] && dataPriv.get( cur, "handle" ); if ( handle ) { handle.apply( cur, data ); @@ -8057,7 +8060,7 @@ if ( !support.focusin ) { // Cross-browser xml parsing jQuery.parseXML = function( data ) { - var xml; + var xml, parserErrorElem; if ( !data || typeof data !== "string" ) { return null; } @@ -8066,12 +8069,17 @@ jQuery.parseXML = function( data ) { // IE throws on parseFromString with invalid input. try { xml = ( new window.DOMParser() ).parseFromString( data, "text/xml" ); - } catch ( e ) { - xml = undefined; - } + } catch ( e ) {} - if ( !xml || xml.getElementsByTagName( "parsererror" ).length ) { - jQuery.error( "Invalid XML: " + data ); + parserErrorElem = xml && xml.getElementsByTagName( "parsererror" )[ 0 ]; + if ( !xml || parserErrorElem ) { + jQuery.error( "Invalid XML: " + ( + parserErrorElem ? + jQuery.map( parserErrorElem.childNodes, function( el ) { + return el.textContent; + } ).join( "\n" ) : + data + ) ); } return xml; }; @@ -8172,16 +8180,14 @@ jQuery.fn.extend( { // Can add propHook for "elements" to filter or add form elements var elements = jQuery.prop( this, "elements" ); return elements ? jQuery.makeArray( elements ) : this; - } ) - .filter( function() { + } ).filter( function() { var type = this.type; // Use .is( ":disabled" ) so that fieldset[disabled] works return this.name && !jQuery( this ).is( ":disabled" ) && rsubmittable.test( this.nodeName ) && !rsubmitterTypes.test( type ) && ( this.checked || !rcheckableType.test( type ) ); - } ) - .map( function( _i, elem ) { + } ).map( function( _i, elem ) { var val = jQuery( this ).val(); if ( val == null ) { @@ -8387,12 +8393,6 @@ jQuery.offset = { options.using.call( elem, props ); } else { - if ( typeof props.top === "number" ) { - props.top += "px"; - } - if ( typeof props.left === "number" ) { - props.left += "px"; - } curElem.css( props ); } } @@ -8561,8 +8561,11 @@ jQuery.each( [ "top", "left" ], function( _i, prop ) { // Create innerHeight, innerWidth, height, width, outerHeight and outerWidth methods jQuery.each( { Height: "height", Width: "width" }, function( name, type ) { - jQuery.each( { padding: "inner" + name, content: type, "": "outer" + name }, - function( defaultExtra, funcName ) { + jQuery.each( { + padding: "inner" + name, + content: type, + "": "outer" + name + }, function( defaultExtra, funcName ) { // Margin is only for outerHeight, outerWidth jQuery.fn[ funcName ] = function( margin, value ) { @@ -8631,7 +8634,8 @@ jQuery.fn.extend( { } } ); -jQuery.each( ( "blur focus focusin focusout resize scroll click dblclick " + +jQuery.each( + ( "blur focus focusin focusout resize scroll click dblclick " + "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " + "change select submit keydown keypress keyup contextmenu" ).split( " " ), function( _i, name ) { @@ -8642,7 +8646,8 @@ jQuery.each( ( "blur focus focusin focusout resize scroll click dblclick " + this.on( name, null, data, fn ) : this.trigger( name ); }; - } ); + } +); diff --git a/src/static/templates/admin/base.hbs b/src/static/templates/admin/base.hbs index eec65524..94684ede 100644 --- a/src/static/templates/admin/base.hbs +++ b/src/static/templates/admin/base.hbs @@ -15,14 +15,16 @@ width: 48px; height: 48px; } - .navbar .vaultwarden-icon { + .vaultwarden-icon { height: 32px; width: auto; - margin: -5px -3px 0 0; + margin: -5px 0 0 0; } -