diff --git a/media/templates/site/moko-cassiopeia/css/editor.css b/media/templates/site/moko-cassiopeia/css/editor.css index 340e34a..bd2032d 100644 --- a/media/templates/site/moko-cassiopeia/css/editor.css +++ b/media/templates/site/moko-cassiopeia/css/editor.css @@ -1,72 +1,71 @@ /* STYLES FOR JOOMLA! EDITOR */ body { - margin: 1rem; - font-size: 1rem; - font-weight: 400; - line-height: 1.5; - color: #22262a; - background-color: #fff; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: #22262a; + background-color: #fff; } h1, h2, h3, h4, h5, h6 { - margin-top: 0; - margin-bottom: 0.5rem; - font-weight: 700; - line-height: 1.2; + margin-top: 0; + margin-bottom: 0.5rem; + font-weight: 700; + line-height: 1.2; } h1 { - font-size: calc(1.375rem + 1.5vw); + font-size: calc(1.375rem + 1.5vw); } h2 { - font-size: calc(1.325rem + 0.9vw); + font-size: calc(1.325rem + 0.9vw); } h3 { - font-size: calc(1.3rem + 0.6vw); + font-size: calc(1.3rem + 0.6vw); } h4 { - font-size: calc(1.275rem + 0.3vw); + font-size: calc(1.275rem + 0.3vw); } h5 { - font-size: 1.25rem; + font-size: 1.25rem; } h6 { - font-size: 1rem; + font-size: 1rem; } a { - text-decoration: none; + text-decoration: none; } a:link { - color: #224faa; + color: #224faa; } a:hover { - color: #424077; + color: #424077; } p { - margin-top: 0; - margin-bottom: 1rem; + margin-top: 0; + margin-bottom: 1rem; } /* STYLES FOR JOOMLA! EDITOR */ hr#system-readmore { - color: #f00; - border: #f00 dashed 1px; + color: #f00; + border: #f00 dashed 1px; } span[lang] { - padding: 2px; - border: 1px dashed #bbb; + padding: 2px; + border: 1px dashed #bbb; } span[lang]:after { - font-size: smaller; - color: #f00; - vertical-align: super; - content: attr(lang); -} \ No newline at end of file + font-size: smaller; + color: #f00; + vertical-align: super; + content: attr(lang); +} diff --git a/media/templates/site/moko-cassiopeia/css/global/colors/dark/colors_alternative.css b/media/templates/site/moko-cassiopeia/css/global/colors/dark/colors_alternative.css new file mode 100644 index 0000000..c7d0121 --- /dev/null +++ b/media/templates/site/moko-cassiopeia/css/global/colors/dark/colors_alternative.css @@ -0,0 +1,351 @@ +/*! + * @package Joomla.Site + * @subpackage Templates.moko-cassiopeia + * @file /media/templates/sote/moko-cassiopeia/css/global/dark/colors_alternative.css + * + * @copyright 2025 Moko Consulting + * @license GNU General Public License version 2 or later; see LICENSE.txt + * + * Website: https://mokoconsulting.tech + * Email: hello@mokoconsulting.tech + * Phone: +1 (931) 279-6313 + */ + +/* ----------------------------------------------- + * DARK THEME + * --------------------------------------------- */ + +:root[data-bs-theme='dark']{ + /* System hint for native widgets */ + color-scheme: dark; + + /* Brand & links */ + --color-primary: #112855; + --accent-color-primary: #3f8ff0; + --accent-color-secondary: #6fb3ff; + + --mainmenu-nav-link-color: #fff; + + --color-link: #224FAA; + --color-hover: #224FAA; + + /* Header background (kept same image; works over dark bg) */ + --header-background-image: url('../../../../../../media/templates/site/moko-cassiopeia/images/bg.svg'); --header-background-attachment: fixed; + --header-background-repeat: repeat; + --header-background-size: auto; + + /* Section containers */ + --container-below-topbar-bg-image: ; + --container-below-topbar-bg-color: ; + --container-below-topbar-bg-position: center; + --container-below-topbar-bg-attachment: fixed; + --container-below-topbar-bg-repeat: no-repeat; + --container-below-topbar-bg-size: cover; + --container-below-topbar-border: ; + --container-below-topbar-border-radius: ; + + --container-top-a-bg-image: ; + --container-top-a-bg-color: ; + --container-top-a-bg-position: center; + --container-top-a-bg-attachment: fixed; + --container-top-a-bg-repeat: no-repeat; + --container-top-a-bg-size: cover; + --container-top-a-border: ; + --container-top-a-border-radius: ; + + --container-top-b-bg-image: ; + --container-top-b-bg-color: ; + --container-top-b-bg-position: center; + --container-top-b-bg-attachment: fixed; + --container-top-b-bg-repeat: no-repeat; + --container-top-b-bg-size: cover; + --container-top-b-border: ; + --container-top-b-border-radius: ; + + --container-toc-bg: ; + --container-toc-color: #dbe3ff; + + --container-sidebar-bg-image: ; + --container-sidebar-bg-color: ; + --container-sidebar-bg-position: center; + --container-sidebar-bg-attachment: scroll; + --container-sidebar-bg-repeat: repeat; + --container-sidebar-bg-size: auto; + --container-sidebar-border: ; + --container-sidebar-border-radius: ; + + --container-bottom-a-bg-image: ; + --container-bottom-a-bg-color: ; + --container-bottom-a-bg-position: center; + --container-bottom-a-bg-attachment: fixed; + --container-bottom-a-bg-repeat: no-repeat; + --container-bottom-a-bg-size: cover; + --container-bottom-a-border: ; + --container-bottom-a-border-radius: 5px; + + --container-bottom-b-bg-image: ; + --container-bottom-b-bg-color: ; + --container-bottom-b-bg-position: center; + --container-bottom-b-bg-attachment: fixed; + --container-bottom-b-bg-repeat: no-repeat; + --container-bottom-b-bg-size: cover; + --container-bottom-b-border: ; + --container-bottom-b-border-radius: ; + + /* Nav & accents */ + --nav-text-color: var(--mainmenu-nav-link-color); + --nav-bg-color: var(--color-link); + --border: 5px; + + --muted-color: #6d757e; + --hr-color: var(--border-color, #dfe3e7); + --link-active-color: var(--link-color); + --code-color-ink: var(--code-color, #e93f8e); + --border-color-soft: var(--border-color, #dfe3e7); + --kbd-bg: var(--secondary-bg, #eaedf0); + --kbd-ink: var(--body-bg, #fff); + --toc-bg: var(--secondary-bg, #eaedf0); + --toc-ink: var(--color-primary, #112855); + --selection-bg: var(--highlight-bg, #fbeea8); + --selection-ink: var(--body-color, #22262a); + + /* Palette */ + --blue: #91a4ff; + --black: #000; + --indigo: #b19cff; + --purple: #c0a5ff; + --pink: #ff8fc0; + --red: #ff7a73; + --orange: #ff9c4d; + --yellow: #ffd166; + --green: #78d694; + --teal: #76e3ff; + --cyan: #6fb7ff; + --white: #fff; + + /* Grays tuned for dark */ + --gray-100: #161a20; + --gray-200: #1b2027; + --gray-300: #222831; + --gray-400: #2b323b; + --gray-500: #36404a; + --gray-600: #48525d; + --gray-700: #5b6672; + --gray-800: #cfd6de; + --gray-900: #e6ebf1; + + /* Contextuals (keep brand hues) */ + --primary: #010156; + --secondary: #48525d; + --success: #4aa664; + --info: #4f7aa0; + --warning: #c77a00; + --danger: #c23a31; + --light: #1b2027; + --dark: #0f1318; + + /* RGB helpers */ + --primary-rgb: 1,1,86; + --secondary-rgb: 72,82,93; + --success-rgb: 74,166,100; + --info-rgb: 79,122,160; + --warning-rgb: 199,122,0; + --danger-rgb: 194,58,49; + --light-rgb: 27,32,39; + --dark-rgb: 15,19,24; + + /* Emphasis & subtle variants */ + --primary-text-emphasis: #c7ccff; + --secondary-text-emphasis: #cfd6de; + --success-text-emphasis: #bde8c9; + --info-text-emphasis: #bcd6ee; + --warning-text-emphasis: #ffd9a6; + --danger-text-emphasis: #ffb7b2; + --light-text-emphasis: #d2d8df; + --dark-text-emphasis: #d2d8df; + + --primary-bg-subtle: #0b1030; + --secondary-bg-subtle: #1e2430; + --success-bg-subtle: #0f2a1b; + --info-bg-subtle: #0d2232; + --warning-bg-subtle: #2a1e06; + --danger-bg-subtle: #2d1110; + --light-bg-subtle: #12161d; + --dark-bg-subtle: #1e2430; + + --primary-border-subtle: #2b3a7a; + --secondary-border-subtle: #2b323b; + --success-border-subtle: #2b5b40; + --info-border-subtle: #254861; + --warning-border-subtle: #5a3c0e; + --danger-border-subtle: #5c2723; + --light-border-subtle: #222831; + --dark-border-subtle: #2b323b; + + /* Typography & layout */ + --body-font-family: var(--optain-cassiopeia-font-family-body, -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'); + --body-font-size: 1rem; + --body-font-weight: 400; + --body-line-height: 1.5; + + --body-color: #e6ebf1; + --body-color-rgb: 230, 235, 241; + --body-bg: #0e1318; + --body-bg-rgb: 14, 19, 24; + + --emphasis-color: #fff; + --emphasis-color-rgb: 255, 255, 255; + + --secondary-color: #e6ebf1bf; + --secondary-color-rgb: 230, 235, 241; + + --secondary-bg: #151b22; + --secondary-bg-rgb: 21, 27, 34; + + --tertiary-color: #e6ebf180; + --tertiary-color-rgb: 230, 235, 241; + --tertiary-bg: #10151b; + --tertiary-bg-rgb: 16, 21, 27; + + --heading-color: #f1f5f9; + + --link-color: #8ab4f8; + --link-color-rgb: 138, 180, 248; + --link-decoration: underline; + --link-hover-color: #c3d6ff; + --link-hover-color-rgb: 195, 214, 255; + + --code-color: #ff7abd; + --highlight-color: #111; + --highlight-bg: #ffe28a1a; + + --border-width: 1px; + --border-style: solid; + --border-color: #2b323b; + --border-color-translucent: #ffffff26; + + --border-radius: .25rem; + --border-radius-sm: .2rem; + --border-radius-lg: .3rem; + --border-radius-xl: .3rem; + --border-radius-xxl: 2rem; + --border-radius-2xl: var(--border-radius-xxl); + --border-radius-pill: 50rem; + + --box-shadow: 0 .5rem 1rem #00000066; + --box-shadow-sm: 0 .125rem .25rem #00000040; + --box-shadow-lg: 0 1rem 3rem #00000080; + --box-shadow-inset: inset 0 1px 2px #00000040; + + --focus-ring-width: .25rem; + --focus-ring-opacity: .6; + --focus-ring-color: #5472ff66; + + --form-valid-color: #78d694; + --form-valid-border-color: #78d694; + --form-invalid-color: #ff8e86; + --form-invalid-border-color: #ff8e86; +} + +.btn { + --btn-padding-x: 1rem; + --btn-padding-y: 0.6rem; + --btn-font-family: ; + --btn-font-size: 1rem; + --btn-font-weight: 400; + --btn-line-height: 1.5; + --btn-color: var(--white); + --btn-bg: transparent; + --btn-border-width: 1px; + --btn-border-color: transparent; + --btn-border-radius: 0.25rem; + --btn-active-border-color: transparent; + --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); + --btn-disabled-opacity: 0.65; + --btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5); + display: inline-block; + padding: var(--btn-padding-y) var(--btn-padding-x); + font-family: var(--btn-font-family); + font-size: var(--btn-font-size); + font-weight: var(--btn-font-weight); + line-height: var(--btn-line-height); + color: var(--btn-color); + 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; + border: var(--btn-border-width) solid var(--btn-border-color); + border-radius: var(--btn-border-radius); + background-color: var(--btn-bg); + -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-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, -webkit-box-shadow 0.15s ease-in-out; + -o-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; + 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, -webkit-box-shadow 0.15s ease-in-out; +} + +/* Buttons — inherit brand hues; ensure strong contrast on dark bg */ +.btn-primary { + --btn-color: hsl(0, 0%, 100%); + --btn-bg: hsl(240, 98%, 17%); + --btn-border-color: hsl(240, 98%, 17%); + --btn-hover-color: hsl(0, 0%, 100%); + --btn-hover-bg: #010149; + --btn-hover-border-color: #010145; + --btn-focus-shadow-rgb: 84, 114, 255; + --btn-active-color: hsl(0, 0%, 100%); + --btn-active-bg: #010145; + --btn-active-border-color: #010141; +} + +.btn-secondary { + --btn-color: var(--nav-text-color); + --btn-bg: var(--nav-bg-color); + --btn-border-color: #3a4250; + --btn-hover-color: #fff; + --btn-hover-bg: #1b2a55; + --btn-hover-border-color: #162448; + --btn-focus-shadow-rgb: 84, 114, 255; + --btn-active-color: #fff; + --btn-active-bg: #162448; + --btn-active-border-color: #12203f; +} + +/* Outline buttons on dark: keep readable borders */ +.btn-outline-light { + --btn-color: #e6ebf1; + --btn-border-color: #e6ebf1; + --btn-hover-color: #111; + --btn-hover-bg: #e6ebf1; + --btn-hover-border-color: #e6ebf1; + --btn-active-color: #111; + --btn-active-bg: #d7dce2; + --btn-active-border-color: #d7dce2; + --gradient: none; +} + +/* Links as buttons */ +.btn-link { + --btn-font-weight: 400; + --btn-color: var(--link-color); + --btn-bg: transparent; + --btn-border-color: transparent; + --btn-hover-color: var(--link-hover-color); + --btn-hover-border-color: transparent; + --btn-active-color: var(--link-hover-color); + --btn-active-border-color: transparent; + --btn-disabled-color: #6d7781; + --btn-disabled-border-color: transparent; + --btn-box-shadow: none; + --btn-focus-shadow-rgb: 84, 114, 255; + text-decoration: underline; +} + +.btn-secondary { + --btn-color: var(--nav-text-color); + --btn-bg: var(--nav-bg-color); +} diff --git a/media/templates/site/moko-cassiopeia/css/global/colors/dark/colors_standard.css b/media/templates/site/moko-cassiopeia/css/global/colors/dark/colors_standard.css new file mode 100644 index 0000000..8a2ebd9 --- /dev/null +++ b/media/templates/site/moko-cassiopeia/css/global/colors/dark/colors_standard.css @@ -0,0 +1,351 @@ +/*! + * @package Joomla.Site + * @subpackage Templates.moko-cassiopeia + * @file /media/templates/sote/moko-cassiopeia/css/global/dark/colors_standard.css + * + * @copyright 2025 Moko Consulting + * @license GNU General Public License version 2 or later; see LICENSE.txt + * + * Website: https://mokoconsulting.tech + * Email: hello@mokoconsulting.tech + * Phone: +1 (931) 279-6313 + */ + +/* ----------------------------------------------- + * DARK THEME + * --------------------------------------------- */ + +:root[data-bs-theme='dark']{ + /* System hint for native widgets */ + color-scheme: dark; + + /* Brand & links */ + --color-primary: #112855; + --accent-color-primary: #3f8ff0; + --accent-color-secondary: #6fb3ff; + + --mainmenu-nav-link-color: #fff; + + --color-link: #224FAA; + --color-hover: #224FAA; + + /* Header background (kept same image; works over dark bg) */ + --header-background-image: url('../../../../../../media/templates/site/moko-cassiopeia/images/bg.svg'); --header-background-attachment: fixed; + --header-background-repeat: repeat; + --header-background-size: auto; + + /* Section containers */ + --container-below-topbar-bg-image: ; + --container-below-topbar-bg-color: ; + --container-below-topbar-bg-position: center; + --container-below-topbar-bg-attachment: fixed; + --container-below-topbar-bg-repeat: no-repeat; + --container-below-topbar-bg-size: cover; + --container-below-topbar-border: ; + --container-below-topbar-border-radius: ; + + --container-top-a-bg-image: ; + --container-top-a-bg-color: ; + --container-top-a-bg-position: center; + --container-top-a-bg-attachment: fixed; + --container-top-a-bg-repeat: no-repeat; + --container-top-a-bg-size: cover; + --container-top-a-border: ; + --container-top-a-border-radius: ; + + --container-top-b-bg-image: ; + --container-top-b-bg-color: ; + --container-top-b-bg-position: center; + --container-top-b-bg-attachment: fixed; + --container-top-b-bg-repeat: no-repeat; + --container-top-b-bg-size: cover; + --container-top-b-border: ; + --container-top-b-border-radius: ; + + --container-toc-bg: ; + --container-toc-color: #dbe3ff; + + --container-sidebar-bg-image: ; + --container-sidebar-bg-color: ; + --container-sidebar-bg-position: center; + --container-sidebar-bg-attachment: scroll; + --container-sidebar-bg-repeat: repeat; + --container-sidebar-bg-size: auto; + --container-sidebar-border: ; + --container-sidebar-border-radius: ; + + --container-bottom-a-bg-image: ; + --container-bottom-a-bg-color: ; + --container-bottom-a-bg-position: center; + --container-bottom-a-bg-attachment: fixed; + --container-bottom-a-bg-repeat: no-repeat; + --container-bottom-a-bg-size: cover; + --container-bottom-a-border: ; + --container-bottom-a-border-radius: 5px; + + --container-bottom-b-bg-image: ; + --container-bottom-b-bg-color: ; + --container-bottom-b-bg-position: center; + --container-bottom-b-bg-attachment: fixed; + --container-bottom-b-bg-repeat: no-repeat; + --container-bottom-b-bg-size: cover; + --container-bottom-b-border: ; + --container-bottom-b-border-radius: ; + + /* Nav & accents */ + --nav-text-color: var(--mainmenu-nav-link-color); + --nav-bg-color: var(--color-link); + --border: 5px; + + --muted-color: #6d757e; + --hr-color: var(--border-color, #dfe3e7); + --link-active-color: var(--link-color); + --code-color-ink: var(--code-color, #e93f8e); + --border-color-soft: var(--border-color, #dfe3e7); + --kbd-bg: var(--secondary-bg, #eaedf0); + --kbd-ink: var(--body-bg, #fff); + --toc-bg: var(--secondary-bg, #eaedf0); + --toc-ink: var(--color-primary, #112855); + --selection-bg: var(--highlight-bg, #fbeea8); + --selection-ink: var(--body-color, #22262a); + + /* Palette */ + --blue: #91a4ff; + --black: #000; + --indigo: #b19cff; + --purple: #c0a5ff; + --pink: #ff8fc0; + --red: #ff7a73; + --orange: #ff9c4d; + --yellow: #ffd166; + --green: #78d694; + --teal: #76e3ff; + --cyan: #6fb7ff; + --white: #fff; + + /* Grays tuned for dark */ + --gray-100: #161a20; + --gray-200: #1b2027; + --gray-300: #222831; + --gray-400: #2b323b; + --gray-500: #36404a; + --gray-600: #48525d; + --gray-700: #5b6672; + --gray-800: #cfd6de; + --gray-900: #e6ebf1; + + /* Contextuals (keep brand hues) */ + --primary: #010156; + --secondary: #48525d; + --success: #4aa664; + --info: #4f7aa0; + --warning: #c77a00; + --danger: #c23a31; + --light: #1b2027; + --dark: #0f1318; + + /* RGB helpers */ + --primary-rgb: 1,1,86; + --secondary-rgb: 72,82,93; + --success-rgb: 74,166,100; + --info-rgb: 79,122,160; + --warning-rgb: 199,122,0; + --danger-rgb: 194,58,49; + --light-rgb: 27,32,39; + --dark-rgb: 15,19,24; + + /* Emphasis & subtle variants */ + --primary-text-emphasis: #c7ccff; + --secondary-text-emphasis: #cfd6de; + --success-text-emphasis: #bde8c9; + --info-text-emphasis: #bcd6ee; + --warning-text-emphasis: #ffd9a6; + --danger-text-emphasis: #ffb7b2; + --light-text-emphasis: #d2d8df; + --dark-text-emphasis: #d2d8df; + + --primary-bg-subtle: #0b1030; + --secondary-bg-subtle: #1e2430; + --success-bg-subtle: #0f2a1b; + --info-bg-subtle: #0d2232; + --warning-bg-subtle: #2a1e06; + --danger-bg-subtle: #2d1110; + --light-bg-subtle: #12161d; + --dark-bg-subtle: #1e2430; + + --primary-border-subtle: #2b3a7a; + --secondary-border-subtle: #2b323b; + --success-border-subtle: #2b5b40; + --info-border-subtle: #254861; + --warning-border-subtle: #5a3c0e; + --danger-border-subtle: #5c2723; + --light-border-subtle: #222831; + --dark-border-subtle: #2b323b; + + /* Typography & layout */ + --body-font-family: var(--optain-cassiopeia-font-family-body, -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'); + --body-font-size: 1rem; + --body-font-weight: 400; + --body-line-height: 1.5; + + --body-color: #e6ebf1; + --body-color-rgb: 230, 235, 241; + --body-bg: #0e1318; + --body-bg-rgb: 14, 19, 24; + + --emphasis-color: #fff; + --emphasis-color-rgb: 255, 255, 255; + + --secondary-color: #e6ebf1bf; + --secondary-color-rgb: 230, 235, 241; + + --secondary-bg: #151b22; + --secondary-bg-rgb: 21, 27, 34; + + --tertiary-color: #e6ebf180; + --tertiary-color-rgb: 230, 235, 241; + --tertiary-bg: #10151b; + --tertiary-bg-rgb: 16, 21, 27; + + --heading-color: #f1f5f9; + + --link-color: #8ab4f8; + --link-color-rgb: 138, 180, 248; + --link-decoration: underline; + --link-hover-color: #c3d6ff; + --link-hover-color-rgb: 195, 214, 255; + + --code-color: #ff7abd; + --highlight-color: #111; + --highlight-bg: #ffe28a1a; + + --border-width: 1px; + --border-style: solid; + --border-color: #2b323b; + --border-color-translucent: #ffffff26; + + --border-radius: .25rem; + --border-radius-sm: .2rem; + --border-radius-lg: .3rem; + --border-radius-xl: .3rem; + --border-radius-xxl: 2rem; + --border-radius-2xl: var(--border-radius-xxl); + --border-radius-pill: 50rem; + + --box-shadow: 0 .5rem 1rem #00000066; + --box-shadow-sm: 0 .125rem .25rem #00000040; + --box-shadow-lg: 0 1rem 3rem #00000080; + --box-shadow-inset: inset 0 1px 2px #00000040; + + --focus-ring-width: .25rem; + --focus-ring-opacity: .6; + --focus-ring-color: #5472ff66; + + --form-valid-color: #78d694; + --form-valid-border-color: #78d694; + --form-invalid-color: #ff8e86; + --form-invalid-border-color: #ff8e86; +} + +.btn { + --btn-padding-x: 1rem; + --btn-padding-y: 0.6rem; + --btn-font-family: ; + --btn-font-size: 1rem; + --btn-font-weight: 400; + --btn-line-height: 1.5; + --btn-color: var(--white); + --btn-bg: transparent; + --btn-border-width: 1px; + --btn-border-color: transparent; + --btn-border-radius: 0.25rem; + --btn-active-border-color: transparent; + --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); + --btn-disabled-opacity: 0.65; + --btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5); + display: inline-block; + padding: var(--btn-padding-y) var(--btn-padding-x); + font-family: var(--btn-font-family); + font-size: var(--btn-font-size); + font-weight: var(--btn-font-weight); + line-height: var(--btn-line-height); + color: var(--btn-color); + 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; + border: var(--btn-border-width) solid var(--btn-border-color); + border-radius: var(--btn-border-radius); + background-color: var(--btn-bg); + -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-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, -webkit-box-shadow 0.15s ease-in-out; + -o-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; + 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, -webkit-box-shadow 0.15s ease-in-out; +} + +/* Buttons — inherit brand hues; ensure strong contrast on dark bg */ +.btn-primary { + --btn-color: hsl(0, 0%, 100%); + --btn-bg: hsl(240, 98%, 17%); + --btn-border-color: hsl(240, 98%, 17%); + --btn-hover-color: hsl(0, 0%, 100%); + --btn-hover-bg: #010149; + --btn-hover-border-color: #010145; + --btn-focus-shadow-rgb: 84, 114, 255; + --btn-active-color: hsl(0, 0%, 100%); + --btn-active-bg: #010145; + --btn-active-border-color: #010141; +} + +.btn-secondary { + --btn-color: var(--nav-text-color); + --btn-bg: var(--nav-bg-color); + --btn-border-color: #3a4250; + --btn-hover-color: #fff; + --btn-hover-bg: #1b2a55; + --btn-hover-border-color: #162448; + --btn-focus-shadow-rgb: 84, 114, 255; + --btn-active-color: #fff; + --btn-active-bg: #162448; + --btn-active-border-color: #12203f; +} + +/* Outline buttons on dark: keep readable borders */ +.btn-outline-light { + --btn-color: #e6ebf1; + --btn-border-color: #e6ebf1; + --btn-hover-color: #111; + --btn-hover-bg: #e6ebf1; + --btn-hover-border-color: #e6ebf1; + --btn-active-color: #111; + --btn-active-bg: #d7dce2; + --btn-active-border-color: #d7dce2; + --gradient: none; +} + +/* Links as buttons */ +.btn-link { + --btn-font-weight: 400; + --btn-color: var(--link-color); + --btn-bg: transparent; + --btn-border-color: transparent; + --btn-hover-color: var(--link-hover-color); + --btn-hover-border-color: transparent; + --btn-active-color: var(--link-hover-color); + --btn-active-border-color: transparent; + --btn-disabled-color: #6d7781; + --btn-disabled-border-color: transparent; + --btn-box-shadow: none; + --btn-focus-shadow-rgb: 84, 114, 255; + text-decoration: underline; +} + +.btn-secondary { + --btn-color: var(--nav-text-color); + --btn-bg: var(--nav-bg-color); +} diff --git a/media/templates/site/moko-cassiopeia/css/global/colors_alternative.css b/media/templates/site/moko-cassiopeia/css/global/colors/light/colors_alternative.css similarity index 64% rename from media/templates/site/moko-cassiopeia/css/global/colors_alternative.css rename to media/templates/site/moko-cassiopeia/css/global/colors/light/colors_alternative.css index a698757..79f199a 100644 --- a/media/templates/site/moko-cassiopeia/css/global/colors_alternative.css +++ b/media/templates/site/moko-cassiopeia/css/global/colors/light/colors_alternative.css @@ -1,10 +1,9 @@ -/* MOKO-COPYRIGHT: © 2025-08-10 Jonathan Miller || Moko Consulting — https://mokoconsulting.tech */ /*! * @package Joomla.Site * @subpackage Templates.moko-cassiopeia - * @file /media/templates/sote/moko-cassiopeia/css/global/colors_standard.css + * @file /media/templates/sote/moko-cassiopeia/css/global/light/colors_alternative.css * - * © 2025 Moko Consulting — All Rights Reserved + * @copyright 2025 Moko Consulting * @license GNU General Public License version 2 or later; see LICENSE.txt * * Website: https://mokoconsulting.tech @@ -12,14 +11,22 @@ * Phone: +1 (931) 279-6313 */ -:root, [data-bs-theme="light"] { +/* ----------------------------------------------- + * LIGHT THEME + * --------------------------------------------- */ + +:root[data-bs-theme="light"] { color-scheme: light; - --color-primary: #112855; - --color-link: #224FAA; - --color-hover: #224FAA; + --accent-color-primary: #3f8ff0; + --accent-color-secondary: #3f8ff0; - --header-background-image: url('../../../../../media/templates/site/moko-cassiopeia/images/bg.svg'); + --mainmenu-nav-link-color: white; + + --color-link: #224FAA; + --color-hover: var(--accent-color-primary); + + --header-background-image: url('../../../../../../media/templates/site/moko-cassiopeia/images/bg.svg'); --header-background-attachment: fixed; --header-background-repeat: repeat; --header-background-size: auto; @@ -51,7 +58,7 @@ --container-top-b-border: ; --container-top-b-border-radius: ; - --container-toc-bg: white; + --container-toc-bg: var(--mainmenu-nav-link-color); --container-toc-color: var(--color-primary); --container-sidebar-bg-image: ; @@ -70,7 +77,7 @@ --container-bottom-a-bg-repeat: repeat; --container-bottom-a-bg-size: auto; --container-bottom-a-border: ; - --container-bottom-a-border-radius: 5px; + --container-bottom-a-border-radius: ; --container-bottom-b-bg-image: ; --container-bottom-b-bg-color: ; @@ -81,12 +88,21 @@ --container-bottom-b-border: ; --container-bottom-b-border-radius: ; - --nav-text-color: white; - --nav-bg-color: #224FAA; - --accent-color-primary: #3f8ff0; - --accent-color-secondary: #3f8ff0; + --nav-text-color: var(--mainmenu-nav-link-color); + --nav-bg-color: var(--color-link); --border: 5px; - --mainmenu-nav-link-color: white; + + --muted-color: #6d757e; + --hr-color: var(--border-color, #dfe3e7); + --link-active-color: var(--link-color); + --code-color-ink: var(--code-color, #e93f8e); + --border-color-soft: var(--border-color, #dfe3e7); + --kbd-bg: var(--secondary-bg, #eaedf0); + --kbd-ink: var(--body-bg, #fff); + --toc-bg: var(--secondary-bg, #eaedf0); + --toc-ink: var(--color-primary, #112855); + --selection-bg: var(--highlight-bg, #fbeea8); + --selection-ink: var(--body-color, #22262a); --blue: #010156; --black: #000; @@ -190,7 +206,7 @@ --border-radius-lg: .3rem; --border-radius-xl: .3rem; --border-radius-xxl: 2rem; - --border-radius-2xl: var(--border-radius-xxl); + --border-radius-2xl: var(--border-radius-xxl)*2; --border-radius-pill: 50rem; --box-shadow: 0 .5rem 1rem #00000026; --box-shadow-sm: 0 .125rem .25rem #00000013; @@ -205,6 +221,47 @@ --form-invalid-border-color: #a51f18; } +.btn { + --btn-padding-x: 1rem; + --btn-padding-y: 0.6rem; + --btn-font-family: ; + --btn-font-size: 1rem; + --btn-font-weight: 400; + --btn-line-height: 1.5; + --btn-color: hsl(210, 11%, 15%); + --btn-bg: transparent; + --btn-border-width: 1px; + --btn-border-color: transparent; + --btn-border-radius: 0.25rem; + --btn-active-border-color: transparent; + --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); + --btn-disabled-opacity: 0.65; + --btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5); + display: inline-block; + padding: var(--btn-padding-y) var(--btn-padding-x); + font-family: var(--btn-font-family); + font-size: var(--btn-font-size); + font-weight: var(--btn-font-weight); + line-height: var(--btn-line-height); + color: var(--btn-color); + 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; + border: var(--btn-border-width) solid var(--btn-border-color); + border-radius: var(--btn-border-radius); + background-color: var(--btn-bg); + -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-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, -webkit-box-shadow 0.15s ease-in-out; + -o-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; + 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, -webkit-box-shadow 0.15s ease-in-out; +} + .btn-primary { --btn-color: hsl(0, 0%, 100%); --btn-bg: hsl(240, 98%, 17%); @@ -492,293 +549,3 @@ --btn-focus-shadow-rgb: 39, 39, 111; text-decoration: underline; } - -/* ----------------------------------------------- - * DARK THEME — append below your light block - * --------------------------------------------- */ - -:root[data-bs-theme='dark'], [data-bs-theme='dark'] { - /* System hint for native widgets */ - color-scheme: dark; - - /* Brand & links */ - --color-primary: #c7d2ff; - --color-link: #8ab4f8; - --color-hover: #bcd1ff; - - /* Header background (kept same image; works over dark bg) */ - --header-background-image: url('../../../../../media/templates/site/moko-cassiopeia/images/bg.svg'); - --header-background-attachment: fixed; - --header-background-repeat: repeat; - --header-background-size: auto; - - /* Section containers */ - --container-below-topbar-bg-image: ; - --container-below-topbar-bg-color: #0f141b; - --container-below-topbar-bg-position: center; - --container-below-topbar-bg-attachment: fixed; - --container-below-topbar-bg-repeat: no-repeat; - --container-below-topbar-bg-size: cover; - --container-below-topbar-border: 1px solid #2b323b; - --container-below-topbar-border-radius: 8px; - - --container-top-a-bg-image: ; - --container-top-a-bg-color: #0e1319; - --container-top-a-bg-position: center; - --container-top-a-bg-attachment: fixed; - --container-top-a-bg-repeat: no-repeat; - --container-top-a-bg-size: cover; - --container-top-a-border: 1px solid #2b323b; - --container-top-a-border-radius: 8px; - - --container-top-b-bg-image: ; - --container-top-b-bg-color: #0e1319; - --container-top-b-bg-position: center; - --container-top-b-bg-attachment: fixed; - --container-top-b-bg-repeat: no-repeat; - --container-top-b-bg-size: cover; - --container-top-b-border: 1px solid #2b323b; - --container-top-b-border-radius: 8px; - - --container-toc-bg: #0f141b; - --container-toc-color: #dbe3ff; - - --container-sidebar-bg-image: ; - --container-sidebar-bg-color: #0c1016; - --container-sidebar-bg-position: center; - --container-sidebar-bg-attachment: scroll; - --container-sidebar-bg-repeat: repeat; - --container-sidebar-bg-size: auto; - --container-sidebar-border: 1px solid #28303a; - --container-sidebar-border-radius: 8px; - - --container-bottom-a-bg-image: ; - --container-bottom-a-bg-color: #0e141b; - --container-bottom-a-bg-position: center; - --container-bottom-a-bg-attachment: fixed; - --container-bottom-a-bg-repeat: no-repeat; - --container-bottom-a-bg-size: cover; - --container-bottom-a-border: 1px solid #2b323b; - --container-bottom-a-border-radius: 5px; - - --container-bottom-b-bg-image: ; - --container-bottom-b-bg-color: #0e141b; - --container-bottom-b-bg-position: center; - --container-bottom-b-bg-attachment: fixed; - --container-bottom-b-bg-repeat: no-repeat; - --container-bottom-b-bg-size: cover; - --container-bottom-b-border: 1px solid #2b323b; - --container-bottom-b-border-radius: 8px; - - /* Nav & accents */ - --nav-text-color: #fff; - --nav-bg-color: #0e1a3c; - --accent-color-primary: #3f8ff0; - --accent-color-secondary: #6fb3ff; - --border: 5px; - --mainmenu-nav-link-color: #fff; - - /* Palette */ - --blue: #91a4ff; - --black: #000; - --indigo: #b19cff; - --purple: #c0a5ff; - --pink: #ff8fc0; - --red: #ff7a73; - --orange: #ff9c4d; - --yellow: #ffd166; - --green: #78d694; - --teal: #76e3ff; - --cyan: #6fb7ff; - --white: #fff; - - /* Grays tuned for dark */ - --gray-100: #161a20; - --gray-200: #1b2027; - --gray-300: #222831; - --gray-400: #2b323b; - --gray-500: #36404a; - --gray-600: #48525d; - --gray-700: #5b6672; - --gray-800: #cfd6de; - --gray-900: #e6ebf1; - - /* Contextuals (keep brand hues) */ - --primary: #010156; - --secondary: #48525d; - --success: #4aa664; - --info: #4f7aa0; - --warning: #c77a00; - --danger: #c23a31; - --light: #1b2027; - --dark: #0f1318; - - /* RGB helpers */ - --primary-rgb: 1,1,86; - --secondary-rgb: 72,82,93; - --success-rgb: 74,166,100; - --info-rgb: 79,122,160; - --warning-rgb: 199,122,0; - --danger-rgb: 194,58,49; - --light-rgb: 27,32,39; - --dark-rgb: 15,19,24; - - /* Emphasis & subtle variants */ - --primary-text-emphasis: #c7ccff; - --secondary-text-emphasis: #cfd6de; - --success-text-emphasis: #bde8c9; - --info-text-emphasis: #bcd6ee; - --warning-text-emphasis: #ffd9a6; - --danger-text-emphasis: #ffb7b2; - --light-text-emphasis: #d2d8df; - --dark-text-emphasis: #d2d8df; - - --primary-bg-subtle: #0b1030; - --secondary-bg-subtle: #1e2430; - --success-bg-subtle: #0f2a1b; - --info-bg-subtle: #0d2232; - --warning-bg-subtle: #2a1e06; - --danger-bg-subtle: #2d1110; - --light-bg-subtle: #12161d; - --dark-bg-subtle: #1e2430; - - --primary-border-subtle: #2b3a7a; - --secondary-border-subtle: #2b323b; - --success-border-subtle: #2b5b40; - --info-border-subtle: #254861; - --warning-border-subtle: #5a3c0e; - --danger-border-subtle: #5c2723; - --light-border-subtle: #222831; - --dark-border-subtle: #2b323b; - - /* Typography & layout */ - --body-font-family: var(--optain-cassiopeia-font-family-body, -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'); - --body-font-size: 1rem; - --body-font-weight: 400; - --body-line-height: 1.5; - - --body-color: #e6ebf1; - --body-color-rgb: 230, 235, 241; - --body-bg: #0e1318; - --body-bg-rgb: 14, 19, 24; - - --emphasis-color: #fff; - --emphasis-color-rgb: 255, 255, 255; - - --secondary-color: #e6ebf1bf; - --secondary-color-rgb: 230, 235, 241; - - --secondary-bg: #151b22; - --secondary-bg-rgb: 21, 27, 34; - - --tertiary-color: #e6ebf180; - --tertiary-color-rgb: 230, 235, 241; - --tertiary-bg: #10151b; - --tertiary-bg-rgb: 16, 21, 27; - - --heading-color: #f1f5f9; - - --link-color: #8ab4f8; - --link-color-rgb: 138, 180, 248; - --link-decoration: underline; - --link-hover-color: #c3d6ff; - --link-hover-color-rgb: 195, 214, 255; - - --code-color: #ff7abd; - --highlight-color: #111; - --highlight-bg: #ffe28a1a; - - --border-width: 1px; - --border-style: solid; - --border-color: #2b323b; - --border-color-translucent: #ffffff26; - - --border-radius: .25rem; - --border-radius-sm: .2rem; - --border-radius-lg: .3rem; - --border-radius-xl: .3rem; - --border-radius-xxl: 2rem; - --border-radius-2xl: var(--border-radius-xxl); - --border-radius-pill: 50rem; - - --box-shadow: 0 .5rem 1rem #00000066; - --box-shadow-sm: 0 .125rem .25rem #00000040; - --box-shadow-lg: 0 1rem 3rem #00000080; - --box-shadow-inset: inset 0 1px 2px #00000040; - - --focus-ring-width: .25rem; - --focus-ring-opacity: .6; - --focus-ring-color: #5472ff66; - - --form-valid-color: #78d694; - --form-valid-border-color: #78d694; - --form-invalid-color: #ff8e86; - --form-invalid-border-color: #ff8e86; -} - -/* Buttons — inherit brand hues; ensure strong contrast on dark bg */ -[data-bs-theme='dark'] .btn-primary { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(240, 98%, 17%); - --btn-border-color: hsl(240, 98%, 17%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #010149; - --btn-hover-border-color: #010145; - --btn-focus-shadow-rgb: 84, 114, 255; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #010145; - --btn-active-border-color: #010141; -} - -[data-bs-theme='dark'] .btn-secondary { - --btn-color: var(--nav-text-color); - --btn-bg: var(--nav-bg-color); - --btn-border-color: #3a4250; - --btn-hover-color: #fff; - --btn-hover-bg: #1b2a55; - --btn-hover-border-color: #162448; - --btn-focus-shadow-rgb: 84, 114, 255; - --btn-active-color: #fff; - --btn-active-bg: #162448; - --btn-active-border-color: #12203f; -} - -/* Outline buttons on dark: keep readable borders */ -[data-bs-theme='dark'] .btn-outline-light { - --btn-color: #e6ebf1; - --btn-border-color: #e6ebf1; - --btn-hover-color: #111; - --btn-hover-bg: #e6ebf1; - --btn-hover-border-color: #e6ebf1; - --btn-active-color: #111; - --btn-active-bg: #d7dce2; - --btn-active-border-color: #d7dce2; - --gradient: none; -} - -/* Links as buttons */ -[data-bs-theme='dark'] .btn-link { - --btn-font-weight: 400; - --btn-color: var(--link-color); - --btn-bg: transparent; - --btn-border-color: transparent; - --btn-hover-color: var(--link-hover-color); - --btn-hover-border-color: transparent; - --btn-active-color: var(--link-hover-color); - --btn-active-border-color: transparent; - --btn-disabled-color: #6d7781; - --btn-disabled-border-color: transparent; - --btn-box-shadow: none; - --btn-focus-shadow-rgb: 84, 114, 255; - text-decoration: underline; -} - -/* ----------------------------------------------- - * OPTIONAL: small fix for .btn-secondary in light - * (uses var() so it picks up your nav colors) - * --------------------------------------------- */ -[data-bs-theme='light'] .btn-secondary, -:root .btn-secondary { - --btn-color: var(--nav-text-color); - --btn-bg: var(--nav-bg-color); -} diff --git a/media/templates/site/moko-cassiopeia/css/global/colors_standard.css b/media/templates/site/moko-cassiopeia/css/global/colors/light/colors_standard.css similarity index 64% rename from media/templates/site/moko-cassiopeia/css/global/colors_standard.css rename to media/templates/site/moko-cassiopeia/css/global/colors/light/colors_standard.css index 56b7725..f6a3065 100644 --- a/media/templates/site/moko-cassiopeia/css/global/colors_standard.css +++ b/media/templates/site/moko-cassiopeia/css/global/colors/light/colors_standard.css @@ -1,10 +1,9 @@ -/* MOKO-COPYRIGHT: © 2025-08-10 Jonathan Miller || Moko Consulting — https://mokoconsulting.tech */ /*! * @package Joomla.Site * @subpackage Templates.moko-cassiopeia - * @file /media/templates/sote/moko-cassiopeia/css/global/colors_standard.css + * @file /media/templates/sote/moko-cassiopeia/css/global/light/colors_standard.css * - * © 2025 Moko Consulting — All Rights Reserved + * @copyright 2025 Moko Consulting * @license GNU General Public License version 2 or later; see LICENSE.txt * * Website: https://mokoconsulting.tech @@ -12,14 +11,22 @@ * Phone: +1 (931) 279-6313 */ -:root, [data-bs-theme="light"] { +/* ----------------------------------------------- + * LIGHT THEME + * --------------------------------------------- */ + +:root[data-bs-theme="light"] { color-scheme: light; - --color-primary: #112855; - --color-link: #224FAA; - --color-hover: #224FAA; + --accent-color-primary: #3f8ff0; + --accent-color-secondary: #3f8ff0; - --header-background-image: url('../../../../../media/templates/site/moko-cassiopeia/images/bg.svg'); + --mainmenu-nav-link-color: white; + + --color-link: #224FAA; + --color-hover: var(--accent-color-primary); + + --header-background-image: url('../../../../../../media/templates/site/moko-cassiopeia/images/bg.svg'); --header-background-attachment: fixed; --header-background-repeat: repeat; --header-background-size: auto; @@ -51,7 +58,7 @@ --container-top-b-border: ; --container-top-b-border-radius: ; - --container-toc-bg: white; + --container-toc-bg: var(--mainmenu-nav-link-color); --container-toc-color: var(--color-primary); --container-sidebar-bg-image: ; @@ -70,7 +77,7 @@ --container-bottom-a-bg-repeat: repeat; --container-bottom-a-bg-size: auto; --container-bottom-a-border: ; - --container-bottom-a-border-radius: 5px; + --container-bottom-a-border-radius: ; --container-bottom-b-bg-image: ; --container-bottom-b-bg-color: ; @@ -81,12 +88,21 @@ --container-bottom-b-border: ; --container-bottom-b-border-radius: ; - --nav-text-color: white; - --nav-bg-color: #224FAA; - --accent-color-primary: #3f8ff0; - --accent-color-secondary: #3f8ff0; + --nav-text-color: var(--mainmenu-nav-link-color); + --nav-bg-color: var(--color-link); --border: 5px; - --mainmenu-nav-link-color: white; + + --muted-color: #6d757e; + --hr-color: var(--border-color, #dfe3e7); + --link-active-color: var(--link-color); + --code-color-ink: var(--code-color, #e93f8e); + --border-color-soft: var(--border-color, #dfe3e7); + --kbd-bg: var(--secondary-bg, #eaedf0); + --kbd-ink: var(--body-bg, #fff); + --toc-bg: var(--secondary-bg, #eaedf0); + --toc-ink: var(--color-primary, #112855); + --selection-bg: var(--highlight-bg, #fbeea8); + --selection-ink: var(--body-color, #22262a); --blue: #010156; --black: #000; @@ -190,7 +206,7 @@ --border-radius-lg: .3rem; --border-radius-xl: .3rem; --border-radius-xxl: 2rem; - --border-radius-2xl: var(--border-radius-xxl); + --border-radius-2xl: var(--border-radius-xxl)*2; --border-radius-pill: 50rem; --box-shadow: 0 .5rem 1rem #00000026; --box-shadow-sm: 0 .125rem .25rem #00000013; @@ -205,6 +221,47 @@ --form-invalid-border-color: #a51f18; } +.btn { + --btn-padding-x: 1rem; + --btn-padding-y: 0.6rem; + --btn-font-family: ; + --btn-font-size: 1rem; + --btn-font-weight: 400; + --btn-line-height: 1.5; + --btn-color: hsl(210, 11%, 15%); + --btn-bg: transparent; + --btn-border-width: 1px; + --btn-border-color: transparent; + --btn-border-radius: 0.25rem; + --btn-active-border-color: transparent; + --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); + --btn-disabled-opacity: 0.65; + --btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5); + display: inline-block; + padding: var(--btn-padding-y) var(--btn-padding-x); + font-family: var(--btn-font-family); + font-size: var(--btn-font-size); + font-weight: var(--btn-font-weight); + line-height: var(--btn-line-height); + color: var(--btn-color); + 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; + border: var(--btn-border-width) solid var(--btn-border-color); + border-radius: var(--btn-border-radius); + background-color: var(--btn-bg); + -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-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, -webkit-box-shadow 0.15s ease-in-out; + -o-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; + 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, -webkit-box-shadow 0.15s ease-in-out; +} + .btn-primary { --btn-color: hsl(0, 0%, 100%); --btn-bg: hsl(240, 98%, 17%); @@ -492,293 +549,3 @@ --btn-focus-shadow-rgb: 39, 39, 111; text-decoration: underline; } - -/* ----------------------------------------------- - * DARK THEME — append below your light block - * --------------------------------------------- */ - -:root[data-bs-theme='dark'], [data-bs-theme='dark'] { - /* System hint for native widgets */ - color-scheme: dark; - - /* Brand & links */ - --color-primary: #112855; - --color-link: #224FAA; - --color-hover: #224FAA; - - /* Header background (kept same image; works over dark bg) */ - --header-background-image: url('../../../../../media/templates/site/moko-cassiopeia/images/bg.svg'); - --header-background-attachment: fixed; - --header-background-repeat: repeat; - --header-background-size: auto; - - /* Section containers */ - --container-below-topbar-bg-image: ; - --container-below-topbar-bg-color: #0f141b; - --container-below-topbar-bg-position: center; - --container-below-topbar-bg-attachment: fixed; - --container-below-topbar-bg-repeat: no-repeat; - --container-below-topbar-bg-size: cover; - --container-below-topbar-border: 1px solid #2b323b; - --container-below-topbar-border-radius: 8px; - - --container-top-a-bg-image: ; - --container-top-a-bg-color: #0e1319; - --container-top-a-bg-position: center; - --container-top-a-bg-attachment: fixed; - --container-top-a-bg-repeat: no-repeat; - --container-top-a-bg-size: cover; - --container-top-a-border: 1px solid #2b323b; - --container-top-a-border-radius: 8px; - - --container-top-b-bg-image: ; - --container-top-b-bg-color: #0e1319; - --container-top-b-bg-position: center; - --container-top-b-bg-attachment: fixed; - --container-top-b-bg-repeat: no-repeat; - --container-top-b-bg-size: cover; - --container-top-b-border: 1px solid #2b323b; - --container-top-b-border-radius: 8px; - - --container-toc-bg: #0f141b; - --container-toc-color: #dbe3ff; - - --container-sidebar-bg-image: ; - --container-sidebar-bg-color: #0c1016; - --container-sidebar-bg-position: center; - --container-sidebar-bg-attachment: scroll; - --container-sidebar-bg-repeat: repeat; - --container-sidebar-bg-size: auto; - --container-sidebar-border: 1px solid #28303a; - --container-sidebar-border-radius: 8px; - - --container-bottom-a-bg-image: ; - --container-bottom-a-bg-color: #0e141b; - --container-bottom-a-bg-position: center; - --container-bottom-a-bg-attachment: fixed; - --container-bottom-a-bg-repeat: no-repeat; - --container-bottom-a-bg-size: cover; - --container-bottom-a-border: 1px solid #2b323b; - --container-bottom-a-border-radius: 5px; - - --container-bottom-b-bg-image: ; - --container-bottom-b-bg-color: #0e141b; - --container-bottom-b-bg-position: center; - --container-bottom-b-bg-attachment: fixed; - --container-bottom-b-bg-repeat: no-repeat; - --container-bottom-b-bg-size: cover; - --container-bottom-b-border: 1px solid #2b323b; - --container-bottom-b-border-radius: 8px; - - /* Nav & accents */ - --nav-text-color: #fff; - --nav-bg-color: #0e1a3c; - --accent-color-primary: #3f8ff0; - --accent-color-secondary: #6fb3ff; - --border: 5px; - --mainmenu-nav-link-color: #fff; - - /* Palette */ - --blue: #91a4ff; - --black: #000; - --indigo: #b19cff; - --purple: #c0a5ff; - --pink: #ff8fc0; - --red: #ff7a73; - --orange: #ff9c4d; - --yellow: #ffd166; - --green: #78d694; - --teal: #76e3ff; - --cyan: #6fb7ff; - --white: #fff; - - /* Grays tuned for dark */ - --gray-100: #161a20; - --gray-200: #1b2027; - --gray-300: #222831; - --gray-400: #2b323b; - --gray-500: #36404a; - --gray-600: #48525d; - --gray-700: #5b6672; - --gray-800: #cfd6de; - --gray-900: #e6ebf1; - - /* Contextuals (keep brand hues) */ - --primary: #010156; - --secondary: #48525d; - --success: #4aa664; - --info: #4f7aa0; - --warning: #c77a00; - --danger: #c23a31; - --light: #1b2027; - --dark: #0f1318; - - /* RGB helpers */ - --primary-rgb: 1,1,86; - --secondary-rgb: 72,82,93; - --success-rgb: 74,166,100; - --info-rgb: 79,122,160; - --warning-rgb: 199,122,0; - --danger-rgb: 194,58,49; - --light-rgb: 27,32,39; - --dark-rgb: 15,19,24; - - /* Emphasis & subtle variants */ - --primary-text-emphasis: #c7ccff; - --secondary-text-emphasis: #cfd6de; - --success-text-emphasis: #bde8c9; - --info-text-emphasis: #bcd6ee; - --warning-text-emphasis: #ffd9a6; - --danger-text-emphasis: #ffb7b2; - --light-text-emphasis: #d2d8df; - --dark-text-emphasis: #d2d8df; - - --primary-bg-subtle: #0b1030; - --secondary-bg-subtle: #1e2430; - --success-bg-subtle: #0f2a1b; - --info-bg-subtle: #0d2232; - --warning-bg-subtle: #2a1e06; - --danger-bg-subtle: #2d1110; - --light-bg-subtle: #12161d; - --dark-bg-subtle: #1e2430; - - --primary-border-subtle: #2b3a7a; - --secondary-border-subtle: #2b323b; - --success-border-subtle: #2b5b40; - --info-border-subtle: #254861; - --warning-border-subtle: #5a3c0e; - --danger-border-subtle: #5c2723; - --light-border-subtle: #222831; - --dark-border-subtle: #2b323b; - - /* Typography & layout */ - --body-font-family: var(--optain-cassiopeia-font-family-body, -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'); - --body-font-size: 1rem; - --body-font-weight: 400; - --body-line-height: 1.5; - - --body-color: #e6ebf1; - --body-color-rgb: 230, 235, 241; - --body-bg: #0e1318; - --body-bg-rgb: 14, 19, 24; - - --emphasis-color: #fff; - --emphasis-color-rgb: 255, 255, 255; - - --secondary-color: #e6ebf1bf; - --secondary-color-rgb: 230, 235, 241; - - --secondary-bg: #151b22; - --secondary-bg-rgb: 21, 27, 34; - - --tertiary-color: #e6ebf180; - --tertiary-color-rgb: 230, 235, 241; - --tertiary-bg: #10151b; - --tertiary-bg-rgb: 16, 21, 27; - - --heading-color: #f1f5f9; - - --link-color: #8ab4f8; - --link-color-rgb: 138, 180, 248; - --link-decoration: underline; - --link-hover-color: #c3d6ff; - --link-hover-color-rgb: 195, 214, 255; - - --code-color: #ff7abd; - --highlight-color: #111; - --highlight-bg: #ffe28a1a; - - --border-width: 1px; - --border-style: solid; - --border-color: #2b323b; - --border-color-translucent: #ffffff26; - - --border-radius: .25rem; - --border-radius-sm: .2rem; - --border-radius-lg: .3rem; - --border-radius-xl: .3rem; - --border-radius-xxl: 2rem; - --border-radius-2xl: var(--border-radius-xxl); - --border-radius-pill: 50rem; - - --box-shadow: 0 .5rem 1rem #00000066; - --box-shadow-sm: 0 .125rem .25rem #00000040; - --box-shadow-lg: 0 1rem 3rem #00000080; - --box-shadow-inset: inset 0 1px 2px #00000040; - - --focus-ring-width: .25rem; - --focus-ring-opacity: .6; - --focus-ring-color: #5472ff66; - - --form-valid-color: #78d694; - --form-valid-border-color: #78d694; - --form-invalid-color: #ff8e86; - --form-invalid-border-color: #ff8e86; -} - -/* Buttons — inherit brand hues; ensure strong contrast on dark bg */ -[data-bs-theme='dark'] .btn-primary { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(240, 98%, 17%); - --btn-border-color: hsl(240, 98%, 17%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #010149; - --btn-hover-border-color: #010145; - --btn-focus-shadow-rgb: 84, 114, 255; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #010145; - --btn-active-border-color: #010141; -} - -[data-bs-theme='dark'] .btn-secondary { - --btn-color: var(--nav-text-color); - --btn-bg: var(--nav-bg-color); - --btn-border-color: #3a4250; - --btn-hover-color: #fff; - --btn-hover-bg: #1b2a55; - --btn-hover-border-color: #162448; - --btn-focus-shadow-rgb: 84, 114, 255; - --btn-active-color: #fff; - --btn-active-bg: #162448; - --btn-active-border-color: #12203f; -} - -/* Outline buttons on dark: keep readable borders */ -[data-bs-theme='dark'] .btn-outline-light { - --btn-color: #e6ebf1; - --btn-border-color: #e6ebf1; - --btn-hover-color: #111; - --btn-hover-bg: #e6ebf1; - --btn-hover-border-color: #e6ebf1; - --btn-active-color: #111; - --btn-active-bg: #d7dce2; - --btn-active-border-color: #d7dce2; - --gradient: none; -} - -/* Links as buttons */ -[data-bs-theme='dark'] .btn-link { - --btn-font-weight: 400; - --btn-color: var(--link-color); - --btn-bg: transparent; - --btn-border-color: transparent; - --btn-hover-color: var(--link-hover-color); - --btn-hover-border-color: transparent; - --btn-active-color: var(--link-hover-color); - --btn-active-border-color: transparent; - --btn-disabled-color: #6d7781; - --btn-disabled-border-color: transparent; - --btn-box-shadow: none; - --btn-focus-shadow-rgb: 84, 114, 255; - text-decoration: underline; -} - -/* ----------------------------------------------- - * OPTIONAL: small fix for .btn-secondary in light - * (uses var() so it picks up your nav colors) - * --------------------------------------------- */ -[data-bs-theme='light'] .btn-secondary, -:root .btn-secondary { - --btn-color: var(--nav-text-color); - --btn-bg: var(--nav-bg-color); -} diff --git a/media/templates/site/moko-cassiopeia/css/global/social-media-demo.css b/media/templates/site/moko-cassiopeia/css/global/social-media-demo.css new file mode 100644 index 0000000..e42553c --- /dev/null +++ b/media/templates/site/moko-cassiopeia/css/global/social-media-demo.css @@ -0,0 +1,220 @@ +/*! + * @package Joomla.Site + * @subpackage Templates.moko-cassiopeia + * @file /media/templates/sote/moko-cassiopeia/css/global/csocial-media-demos.css + * + * @copyright 2025 Moko Consulting + * @license GNU General Public License version 2 or later; see LICENSE.txt + * + * Website: https://mokoconsulting.tech + * Email: hello@mokoconsulting.tech + * Phone: +1 (931) 279-6313 + */ + * +/* +====================================================================== +Social Media Demo — FULL CSS (Joomla-safe, fully scoped) +Scope: All selectors prefixed with .social-media-demo to avoid leakage +Usage: Wrap your article markup in +Version: 2.0 (2025-08-23) + +How it’s organized: + 1) Container-level CSS variables (IMAGES ONLY). Colors are hard-coded per brand below. + 2) Base/layout styles (sections, header shell, placeholders, buttons). + 3) Platform brand colors (hard-coded) and cover height tweaks. + 4) Image assignments (map classes like .fb-cover → variable --fb-cover-img). + +INSTRUCTIONS: + - Save the images in their requried sizes into the [SITEROOT]/images/social/ folder with the exact names. + - For circle images, sue a square image t fille the entire space + - All images are center and miiddle aligned when loaded. +====================================================================== +REQUIRED IMAGE SIZES — Social Media Demo Wireframes + + Facebook + --fb-cover-img → Cover: 820×312 (desktop), 640×360 (mobile safe) + --fb-avatar-img → Profile: 176×176 (shown as circle, but use square image) + + Twitter / X + --x-cover-img → Header: 1500×500 + --x-avatar-img → Profile: up to 400×400 (shown as circle, but use square image) + + LinkedIn Company + --li-cover-img → Banner: ~1128×191 + --li-logo-img → Logo: up to 300×300 (rounded square) + + Google Business Profile + --gmb-cover-img → Banner: ~960×200 (mobile ~960×140) + --gmb-logo-img → Logo: up to 300×300 (shown as circle, but use square image) + + Instagram Business + --ig-cover-img → Not always visible, safe 1080×608 for highlight background + --ig-avatar-img → Profile: 320×320 (shown as circle, but use square image) + + YouTube Channel + --yt-cover-img → Channel art: 2560×1440 (safe area ~1546×423 center) + --yt-avatar-img → Channel icon: 800×800 (shown as circle, but use square image) + + TikTok Business + --tt-cover-img → Profile header: ~900×500 (safe area ~720×405) + --tt-avatar-img → Profile: 200×200 (shown as circle, but use square image) + + Pinterest Business + --pin-cover-img → Board/brand banner: ~800×450 + --pin-avatar-img → Profile: 165×165 (shown as circle, but use square image) + + Snapchat Public Profile + --sc-cover-img → Banner: ~1080×1920 (stories/poster) + --sc-avatar-img → Bitmoji/Profile: 320×320 (shown as circle, but use square image) + + Reddit Community + --rd-cover-img → Banner: 1920×384 + --rd-avatar-img → Community icon: 256×256 (shown as circle, but use square image) + ====================================================================== */ + +/* Container variables — IMAGES ONLY (safe-scoped) */ +.social-media-demo { + --fb-cover-img: url('../../../../../image/social/fb-cover.jpg'); + --fb-avatar-img: url('../../../../../image/social/fb-avatar.jpg'); + + --x-cover-img: url('../../../../../image/social/x-cover.jpg'); + --x-avatar-img: url('../../../../../image/social/x-avatar.jpg'); + + --li-cover-img: url('../../../../../image/social/li-cover.jpg'); + --li-logo-img: url('../../../../../image/social/li-logo.jpg'); + + --gmb-cover-img: url('../../../../../image/social/gmb-cover.jpg'); + --gmb-logo-img: url('../../../../../image/social/gmb-logo.jpg'); + + --ig-cover-img: url('../../../../../image/social/ig-cover.jpg'); + --ig-avatar-img: url('../../../../../image/social/ig-avatar.jpg'); + + --yt-cover-img: url('../../../../../image/social/yt-cover.jpg'); + --yt-avatar-img: url('../../../../../image/social/yt-avatar.jpg'); + + --tt-cover-img: url('../../../../../image/social/tt-cover.jpg'); + --tt-avatar-img: url('../../../../../image/social/tt-avatar.jpg'); + + --pin-cover-img: url('../../../../../image/social/pin-cover.jpg'); + --pin-avatar-img: url('../../../../../image/social/pin-avatar.jpg'); + + --sc-cover-img: url('../../../../../image/social/sc-cover.jpg'); + --sc-avatar-img: url('../../../../../image/social/sc-avatar.jpg'); + + --rd-cover-img: url('../../../../../image/social/rd-cover.jpg'); + --rd-avatar-img: url('../../../../../image/social/rd-avatar.jpg'); +} + +/* DO NOT TOUCH */ +.social-media-demo * { box-sizing: border-box; } +.social-media-demo section { margin: 24px auto; max-width: 1128px; background: #fff; border: 1px solid #d9dee3; border-radius: 12px; overflow: hidden; } +.social-media-demo section h2 { margin: 0; padding: 12px 16px; background: #f9fafb; border-bottom: 1px solid #d9dee3; font-size: 16px; font-weight: 800; color: #111; } +.social-media-demo .preview { padding: 16px; } + +/* Header shell */ +.social-media-demo .header { position: relative; border: 1px solid #d9dee3; border-radius: 12px; overflow: hidden; background: #fff; } +.social-media-demo .cover { position: relative; width: 100%; height: 200px; background-size: cover; background-position: center; background-color: #e8edf3; } +.social-media-demo .avatar-wrap { position: absolute; left: 16px; bottom: -48px; } +.social-media-demo .avatar, +.social-media-demo .logo { width: 160px; height: 160px; border: 4px solid #fff; background-size: cover; background-position: center; overflow: hidden; } +.social-media-demo .avatar.shown as circle, but use square image { border-radius: 999px; } +.social-media-demo .logo.rounded { border-radius: 16px; } + +/* Meta */ +.social-media-demo .meta { display: flex; justify-content: space-between; align-items: end; gap: 16px; padding: 16px; padding-top: 56px; } +.social-media-demo .name { font-size: 22px; font-weight: 800; color: #111; } +.social-media-demo .subline { font-size: 13px; color: #666; } + +/* Buttons */ +.social-media-demo .btn { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid #d9dee3; background: #fff; font-weight: 700; color: #111; } +.social-media-demo .btn.primary { color: #fff; border-color: transparent; } + +/* Placeholder visuals (used until you swap in real images) */ +.social-media-demo .placeholder { position: relative; width: 100%; height: 100%; display: grid; place-items: center; text-align: center; font-weight: 600; color: #6b7280; background: repeating-linear-gradient(45deg,#f6f7f9 0 12px,#eef0f3 12px 24px); border: 1px dashed #cfd3d8; } +.social-media-demo .placeholder .dims { position: absolute; bottom: 8px; right: 8px; font-size: 12px; opacity: .85; } + +/* 3) Platform brand colors & cover height tweaks (hard-coded colors on purpose) */ +/* Facebook */ +.social-media-demo #fb .btn.primary { background: #1877F2; } +.social-media-demo #fb .cover { height: 312px; } +@media (max-width: 480px) { .social-media-demo #fb .cover { height: 360px; } } + +/* Twitter / X */ +.social-media-demo #x .btn.primary { background: #1D9BF0; } +.social-media-demo #x .cover { height: 200px; background-color: #22303C; } +@media (max-width: 480px) { .social-media-demo #x .cover { height: 160px; } } + +/* LinkedIn */ +.social-media-demo #li .btn.primary { background: #0A66C2; } +.social-media-demo #li .cover { height: 220px; background-color: #e6edf5; } +@media (max-width: 480px) { .social-media-demo #li .cover { height: 160px; } } + +/* Google Business Profile */ +.social-media-demo #gmb .btn.primary { background: #4285F4; } +.social-media-demo #gmb .cover { height: 200px; } +@media (max-width: 480px) { .social-media-demo #gmb .cover { height: 140px; } } + +/* Instagram Business */ +.social-media-demo #ig .btn.primary { background: #E1306C; } +.social-media-demo #ig .cover { height: 200px; } + +/* YouTube Channel */ +.social-media-demo #yt .btn.primary { background: #FF0000; } +.social-media-demo #yt .cover { height: 180px; } + +/* TikTok Business */ +.social-media-demo #tt .btn.primary { background: #000000; color: #fff; } +.social-media-demo #tt .cover { height: 200px; } + +/* Pinterest Business */ +.social-media-demo #pin .btn.primary { background: #E60023; } +.social-media-demo #pin .cover { height: 200px; } + +/* Snapchat Public Profile */ +.social-media-demo #sc .btn.primary { background: #FFFC00; color: #000; } +.social-media-demo #sc .cover { height: 160px; } + +/* Reddit Community */ +.social-media-demo #rd .btn.primary { background: #FF4500; } +.social-media-demo #rd .cover { height: 180px; } + +/* 4) Image assignments — map classes to variables (swap vars to change images) */ +/* Facebook */ +.social-media-demo .fb-cover { background-image: var(--fb-cover-img); } +.social-media-demo .fb-avatar { background-image: var(--fb-avatar-img); } + +/* X */ +.social-media-demo .x-cover { background-image: var(--x-cover-img); } +.social-media-demo .x-avatar { background-image: var(--x-avatar-img); } + +/* LinkedIn */ +.social-media-demo .li-cover { background-image: var(--li-cover-img); } +.social-media-demo .li-logo { background-image: var(--li-logo-img); } + +/* Google Business */ +.social-media-demo .gmb-cover { background-image: var(--gmb-cover-img); } +.social-media-demo .gmb-logo { background-image: var(--gmb-logo-img); } + +/* Instagram */ +.social-media-demo .ig-cover { background-image: var(--ig-cover-img); } +.social-media-demo .ig-avatar { background-image: var(--ig-avatar-img); } + +/* YouTube */ +.social-media-demo .yt-cover { background-image: var(--yt-cover-img); } +.social-media-demo .yt-avatar { background-image: var(--yt-avatar-img); } + +/* TikTok */ +.social-media-demo .tt-cover { background-image: var(--tt-cover-img); } +.social-media-demo .tt-avatar { background-image: var(--tt-avatar-img); } + +/* Pinterest */ +.social-media-demo .pin-cover { background-image: var(--pin-cover-img); } +.social-media-demo .pin-avatar { background-image: var(--pin-avatar-img); } + +/* Snapchat */ +.social-media-demo .sc-cover { background-image: var(--sc-cover-img); } +.social-media-demo .sc-avatar { background-image: var(--sc-avatar-img); } + +/* Reddit */ +.social-media-demo .rd-cover { background-image: var(--rd-cover-img); } +.social-media-demo .rd-avatar { background-image: var(--rd-avatar-img); } diff --git a/media/templates/site/moko-cassiopeia/css/offline.css b/media/templates/site/moko-cassiopeia/css/offline.css deleted file mode 100644 index 2f9e888..0000000 --- a/media/templates/site/moko-cassiopeia/css/offline.css +++ /dev/null @@ -1,163 +0,0 @@ -body { - background-image: url(../images/teaser_bg_sm.png); - background-repeat: repeat-x; - background-attachment: fixed; -} -.outer { - position: relative; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; - min-height: 100vh; - padding: 0; - overflow: hidden; -} -@media only screen and (min-width: 600px) { - .outer { - padding: 3em 0; - padding-bottom: 0; - padding-top:0; - - } -} -.offline-card { - background-color:white; - padding:1em; -} -@media only screen and (min-width: 600px) { - .offline-card { - margin: 0 5em; - } -} -footer { - padding: 0 6em; - color: hsl(0, 0%, 100%); - background-color: var(--color-primary); - background-image: -o-linear-gradient(315deg, var(--color-primary) 0%, var(--color-hover) 100%); - background-image: linear-gradient(135deg, var(--color-primary) 0%, var(--color-hover) 100%); - border-radius: 5px 5px 0 0; -} -.footer{ - margin-top: 0; -} -.footer .grid-child { - padding: 0 0.75em; -} -.offline-message-card { - width: 100%; - max-width: 30em; - margin: 60px auto; - background-color: hsl(0, 0%, 100%); - border: 1px solid hsla(0, 0%, 0%, 0.1); - border-radius: 5px; - -webkit-box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.05); - box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.05); -} - -.header { - position: relative; - padding: 1em 2em; - margin: 0; - color: hsl(0, 0%, 100%); - text-align: center; - background-color: var(--color-primary); - background-image: -o-linear-gradient(315deg, var(--color-primary) 0%, var(--color-hover) 100%); - background-image: linear-gradient(135deg, var(--color-primary) 0%, var(--color-hover) 100%); - border-radius: 5px 5px 0 0; -} -[dir=rtl] .header { - background-image: -o-linear-gradient(315deg, var(--color-hover) 0%, var(--color-primary) 100%); - background-image: linear-gradient(135deg, var(--color-hover) 0%, var(--color-primary) 100%); -} - -.login { - padding: 40px 20px 20px; - background-color: var(--nav-bg-color); -} - -.form-control { - max-width: none; -} - -img { - height: auto; - margin: 5px 0; - border: 0; -} - -form, -fieldset { - padding: 0; - margin: 0; -} - -label { - display: block; - margin: 0; -} - -input[type=text], -input[type=password] { - -webkit-box-sizing: border-box; - box-sizing: border-box; - width: 100%; - height: auto; -} - -input { - margin: 0.5em 0 1em; -} -.offline-card a { -} -.logo { - max-width: 300px; - max-height: 200px; - width: auto; - height: auto; -} -.offline-image { - max-height: 300px; -} -#offline-login-link{ - background-image: linear-gradient(to top, rgba(255,0,0,0), rgba(255,255,255,1)); - margin: 0 5em; -} -.logo-icon { - margin: 0 auto; - width: 37px; - height:37px; - z-index: 1; - padding: 12px; - margin-top: 2px; - background-color: hsl(0, 0%, 100%); - border: 1px solid hsla(0, 0%, 0%, 0.75); - border-radius: 50%; - -webkit-box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.075); - box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.075); - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); -} - -.logo-icon svg { - display: block; - width: 38px; -} -a.social-icon { - ext-decoration:none; - border:0;width:36px; - height:36px;padding:2px; - margin:5px; - color:#000; - border-radius:50%;background-color:#ffffff; -} \ No newline at end of file diff --git a/media/templates/site/moko-cassiopeia/css/template-rtl.css b/media/templates/site/moko-cassiopeia/css/template-rtl.css index 4586957..f9a3955 100644 --- a/media/templates/site/moko-cassiopeia/css/template-rtl.css +++ b/media/templates/site/moko-cassiopeia/css/template-rtl.css @@ -1,14657 +1,4376 @@ @charset "UTF-8"; /*! - * Bootstrap v5.2.3 (https://getbootstrap.com/) - * Copyright 2011-2022 The Bootstrap Authors - * Copyright 2011-2022 Twitter, Inc. - * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) + * @package Joomla.Site + * @subpackage Templates.moko-cassiopeia + * @file /media/templates/sote/moko-cassiopeia/css/template-rtl.css + * + * @copyright 2025 Moko Consulting + * @license GNU General Public License version 2 or later; see LICENSE.txt + * + * Website: https://mokoconsulting.tech + * Email: hello@mokoconsulting.tech + * Phone: +1 (931) 279-6313 */ -:root { - --blue: hsl(240, 98%, 17%); - --indigo: hsl(263, 90%, 51%); - --purple: hsl(261, 51%, 51%); - --pink: hsl(332, 79%, 58%); - --red: hsl(3, 75%, 37%); - --orange: hsl(27, 98%, 54%); - --yellow: hsl(34, 100%, 34%); - --green: hsl(120, 32%, 39%); - --teal: hsl(194, 66%, 61%); - --cyan: hsl(207, 49%, 37%); - --white: hsl(0, 0%, 100%); - --gray-100: hsl(210, 17%, 98%); - --gray-200: hsl(210, 16%, 93%); - --gray-300: hsl(210, 14%, 89%); - --gray-400: hsl(210, 14%, 83%); - --gray-500: hsl(210, 11%, 71%); - --gray-600: hsl(210, 7%, 46%); - --gray-700: hsl(210, 9%, 31%); - --gray-800: hsl(210, 10%, 23%); - --gray-900: hsl(210, 11%, 15%); - --primary: hsl(240, 98%, 17%); - --secondary: hsl(210, 7%, 46%); - --success: hsl(120, 32%, 39%); - --info: hsl(207, 49%, 37%); - --warning: hsl(34, 100%, 34%); - --danger: hsl(3, 75%, 37%); - --light: hsl(210, 17%, 98%); - --dark: hsl(210, 10%, 23%); - --primary-rgb: 1, 1, 86; - --secondary-rgb: 109, 117, 126; - --success-rgb: 68, 131, 68; - --info-rgb: 48, 99, 141; - --warning-rgb: 173, 98, 0; - --danger-rgb: 165, 31, 24; - --light-rgb: 249, 250, 251; - --dark-rgb: 53, 59, 65; - --white-rgb: 255, 255, 255; - --black-rgb: 0, 0, 0; - --body-color-rgb: 34, 38, 42; - --body-bg-rgb: 255, 255, 255; - --font-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-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - --gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); - --body-font-family: var(--font-family-body, -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"); - --body-font-size: 1rem; - --body-font-weight: 400; - --body-line-height: 1.5; - --body-color: hsl(210, 11%, 15%); - --body-bg: hsl(0, 0%, 100%); - --border-width: 1px; - --border-style: solid; - --border-color: hsl(210, 14%, 89%); - --border-color-translucent: rgba(0, 0, 0, 0.175); - --border-radius: 0.25rem; - --border-radius-sm: 0.2rem; - --border-radius-lg: 0.3rem; - --border-radius-xl: 0.3rem; - --border-radius-2xl: 0.3rem; - --border-radius-pill: 50rem; - --link-color: var(--color-link); - --link-hover-color: var(--color-hover); - --code-color: hsl(332, 79%, 58%); - --highlight-bg: #fbeea8; -} - -*, -*::before, -*::after { - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -@media (prefers-reduced-motion: no-preference) { - :root { - scroll-behavior: smooth; - } -} - -body { - margin: 0; - font-family: var(--body-font-family); - font-size: var(--body-font-size); - font-weight: var(--body-font-weight); - line-height: var(--body-line-height); - color: var(--body-color); - text-align: var(--body-text-align); - background-color: var(--body-bg); - -webkit-text-size-adjust: 100%; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - -hr { - margin: 1rem 0; - color: inherit; - border: 0; - border-top: 1px solid; - opacity: 0.25; -} - -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 { - margin-top: 0; - margin-bottom: 1rem; -} - -abbr[title] { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; - cursor: help; - -webkit-text-decoration-skip-ink: none; - text-decoration-skip-ink: none; -} - -address { - margin-bottom: 1rem; - font-style: normal; - line-height: inherit; -} - -ol, -ul { - padding-right: 2rem; -} - -ol, -ul, -dl { - margin-top: 0; - margin-bottom: 1rem; -} - -ol ol, -ul ul, -ol ul, -ul ol { - margin-bottom: 0; -} - -dt { - font-weight: 700; -} - -dd { - margin-bottom: 0.5rem; - margin-right: 0; -} - -blockquote { - margin: 0 0 1rem; -} - -b, -strong { - font-weight: bolder; -} - -small, .small { - font-size: 0.875em; -} - -mark, .mark { - padding: 0.1875em; - background-color: var(--highlight-bg); -} - -sub, -sup { - position: relative; - font-size: 0.75em; - line-height: 0; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -a { - color: var(--link-color); - text-decoration: underline; -} -a:hover { - color: var(--link-hover-color); -} - -a:not([href]):not([class]), a:not([href]):not([class]):hover { - color: inherit; - text-decoration: none; -} - -pre, -code, -kbd, -samp { - font-family: var(--font-monospace); - font-size: 1em; -} - -pre { - display: block; - margin-top: 0; - margin-bottom: 1rem; - overflow: auto; - font-size: 0.875em; -} -pre code { - font-size: inherit; - color: inherit; - word-break: normal; -} - -code { - font-size: 0.875em; - color: var(--code-color); - word-wrap: break-word; -} -a > code { - color: inherit; -} - -kbd { - padding: 0.1875rem 0.375rem; - font-size: 0.875em; - color: var(--body-bg); - background-color: var(--body-color); - border-radius: 0.2rem; -} -kbd kbd { - padding: 0; - font-size: 1em; -} - -figure { - margin: 0 0 1rem; -} - -img, -svg { - vertical-align: middle; -} - -table { - caption-side: bottom; - border-collapse: collapse; -} - -caption { - padding-top: 0.5rem; - padding-bottom: 0.5rem; - color: hsl(210, 7%, 46%); - text-align: right; -} - -th { - text-align: inherit; - text-align: -webkit-match-parent; -} - -thead, -tbody, -tfoot, -tr, -td, -th { - border-color: inherit; - border-style: solid; - border-width: 0; -} - -label { - display: inline-block; -} - -button { - border-radius: 0; -} - -button:focus:not(:focus-visible) { - outline: 0; -} - -input, -button, -select, -optgroup, -textarea { - margin: 0; - font-family: inherit; - font-size: inherit; - line-height: inherit; -} - -button, -select { - text-transform: none; -} - -[role=button] { - cursor: pointer; -} - -select { - word-wrap: normal; -} -select:disabled { - opacity: 1; -} -[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator { - display: none !important; -} +/*! + * RTL Overrides for template.css + * Strategy: For blocks that contain directional declarations, we emit + * [dir="rtl"]-prefixed overrides with left/right swapped and aligned. + * This file assumes the base CSS uses logical tokens; only direction- + * sensitive rules are mirrored here to keep file size reasonable. + */ -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) { - cursor: pointer; -} -::-moz-focus-inner { - padding: 0; - border-style: none; -} +[dir="rtl"] .table-of-contents-ck-wrap { -textarea { - resize: vertical; + width: 30%; + float: left; + border: 1px solid var(--color-primary); } -fieldset { - min-width: 0; - padding: 0; - margin: 0; - border: 0; -} +[dir="rtl"] .drawer-toggle-left { -legend { - float: right; - width: 100%; - padding: 0; - margin-bottom: 0.5rem; - font-size: calc(1.275rem + 0.3vw); - line-height: inherit; -} -@media (min-width: 1200px) { - legend { - font-size: 1.5rem; - } -} -legend + * { - clear: right; + position: fixed; + top: 250px; + right: 0px; + z-index: 1050; + background-color: var(--nav-bg-color) !important; + color: var(--nav-text-color) !important; + padding-left: calc(var(--btn-padding-x)*0.5) !important; + padding-right: calc(var(--btn-padding-x)*0.5) !important; } -::-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; -} +[dir="rtl"] .drawer-toggle-right { -::-webkit-inner-spin-button { - height: auto; + position: fixed; + top: 250px; + left: 0px; + z-index: 1050; + background-color: var(--nav-bg-color) !important; + color: var(--nav-text-color) !important; + padding-left: calc(var(--btn-padding-x)*0.5) !important; + padding-right: calc(var(--btn-padding-x)*0.5) !important; } -[type=search] { - outline-offset: -2px; - -webkit-appearance: textfield; -} +[dir="rtl"] ol, +[dir="rtl"] ul { -[type="tel"], -[type="url"], -[type="email"], -[type="number"] { - direction: ltr; -} -::-webkit-search-decoration { - -webkit-appearance: none; + padding-left: 2rem; } -::-webkit-color-swatch-wrapper { - padding: 0; -} +[dir="rtl"] dd { -::-webkit-file-upload-button { - font: inherit; - -webkit-appearance: button; + margin-bottom: 0.5rem; + margin-left: 0; } -::file-selector-button { - font: inherit; - -webkit-appearance: button; -} +[dir="rtl"] caption { -output { - display: inline-block; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + color: var(--secondary-color); + text-align: left; } -iframe { - border: 0; -} +[dir="rtl"] legend { -summary { - display: list-item; - cursor: pointer; + float: left; + width: 100%; + padding: 0; + margin-bottom: 0.5rem; + font-size: calc(1.275rem + 0.3vw); + line-height: inherit; } -progress { - vertical-align: baseline; -} +[dir="rtl"] } -[hidden] { - display: none !important; -} +legend+* { -.lead { - font-size: 1.25rem; - font-weight: 300; + clear: left; } -.display-1 { - 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: 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: 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: calc(1.475rem + 2.7vw); - font-weight: 300; - line-height: 1.2; -} -@media (min-width: 1200px) { - .display-4 { - font-size: 3.5rem; - } -} - -.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; - } -} - -.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; - } -} +[dir="rtl"] } .list-unstyled { - padding-right: 0; - list-style: none; + + padding-left: 0; + list-style: none; } -.list-inline { - padding-right: 0; - list-style: none; +[dir="rtl"] .list-inline { + + padding-left: 0; + list-style: none; } -.list-inline-item { - display: inline-block; -} -.list-inline-item:not(:last-child) { - margin-left: 0.5rem; +[dir="rtl"] .list-inline-item:not(:last-child) { + + margin-right: 0.5rem; } -.initialism { - font-size: 0.875em; - text-transform: uppercase; +[dir="rtl"] .container-component, +[dir="rtl"] .container, +[dir="rtl"] .container-fluid, +[dir="rtl"] .container-xxl, +[dir="rtl"] .container-xl, +[dir="rtl"] .container-lg, +[dir="rtl"] .container-md, +[dir="rtl"] .container-sm { + + --gutter-x: 1rem; + --gutter-y: 0; + width: 100%; + padding-right: calc(var(--gutter-x) * 0.5); + padding-left: calc(var(--gutter-x) * 0.5); + margin-right: auto; + margin-left: auto; + padding-bottom: calc(var(--gutter-x) * 0.5); } -.blockquote { - margin-bottom: 1rem; - font-size: 1.25rem; -} -.blockquote > :last-child { - margin-bottom: 0; -} +[dir="rtl"] } -.blockquote-footer { - margin-top: -1rem; - margin-bottom: 1rem; - font-size: 0.875em; - color: hsl(210, 7%, 46%); -} -.blockquote-footer::before { - content: "— "; -} - -.img-fluid { - max-width: 100%; - height: auto; -} - -.img-thumbnail { - padding: 0.25rem; - background-color: hsl(0, 0%, 100%); - border: 1px solid var(--border-color); - border-radius: 0.25rem; - max-width: 100%; - height: auto; -} - -.figure { - display: inline-block; -} - -.figure-img { - margin-bottom: 0.5rem; - line-height: 1; -} - -.figure-caption { - font-size: 0.875em; - color: hsl(210, 7%, 46%); -} - -.container, -.container-fluid, -.container-xxl, -.container-xl, -.container-lg, -.container-md, -.container-sm { - --gutter-x: 1em; - --gutter-y: 0; - width: 100%; - padding-left: calc(var(--gutter-x) * 0.5); - padding-right: calc(var(--gutter-x) * 0.5); - margin-left: auto; - margin-right: auto; -} - -@media (min-width: 576px) { - .container-sm, .container { - max-width: 540px; - } -} -@media (min-width: 768px) { - .container-md, .container-sm, .container { - max-width: 720px; - } -} -@media (min-width: 992px) { - .container-lg, .container-md, .container-sm, .container { - max-width: 960px; - } -} -@media (min-width: 1200px) { - .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 { - --gutter-x: 1em; - --gutter-y: 0; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin-top: calc(-1 * var(--gutter-y)); - margin-left: calc(-0.5 * var(--gutter-x)); - margin-right: calc(-0.5 * var(--gutter-x)); + + --gutter-x: 1rem; + --gutter-y: 0; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-top: calc(-1 * var(--gutter-y)); + margin-right: calc(-0.5 * var(--gutter-x)); + margin-left: calc(-0.5 * var(--gutter-x)); +} + +[dir="rtl"] .row>* { + + -ms-flex-negative: 0; + flex-shrink: 0; + width: 100%; + max-width: 100%; + padding-right: 0; + padding-left: 0; + margin-top: var(--gutter-y); +} + +[dir="rtl"] .product-container { + + margin-right: calc(var(--gutter-x) * .25); + margin-left: calc(var(--gutter-x) * .25); + padding-right: calc(var(--gutter-x) * .25); + padding-left: calc(var(--gutter-x) * .25); + margin-top: var(--gutter-y); + //background-color: var(--gray-200); + -webkit-border-radius: var(--border-radius); + -moz-border-radius: var(--border-radius); + border-radius: var(--border-radius); +} + +[dir="rtl"] .offset-1 { + + margin-left: 8.33333333%; +} + +[dir="rtl"] .offset-2 { + + margin-left: 16.66666667%; +} + +[dir="rtl"] .offset-3 { + + margin-left: 25%; +} + +[dir="rtl"] .offset-4 { + + margin-left: 33.33333333%; +} + +[dir="rtl"] .offset-5 { + + margin-left: 41.66666667%; +} + +[dir="rtl"] .offset-6 { + + margin-left: 50%; +} + +[dir="rtl"] .offset-7 { + + margin-left: 58.33333333%; +} + +[dir="rtl"] .offset-8 { + + margin-left: 66.66666667%; +} + +[dir="rtl"] .offset-9 { + + margin-left: 75%; +} + +[dir="rtl"] .offset-10 { + + margin-left: 83.33333333%; +} + +[dir="rtl"] .offset-11 { + + margin-left: 91.66666667%; +} + +[dir="rtl"] .offset-sm-0 { + + margin-left: 0; + +} + +[dir="rtl"] .offset-sm-1 { + + margin-left: 8.33333333%; + +} + +[dir="rtl"] .offset-sm-2 { + + margin-left: 16.66666667%; + +} + +[dir="rtl"] .offset-sm-3 { + + margin-left: 25%; + +} + +[dir="rtl"] .offset-sm-4 { + + margin-left: 33.33333333%; + +} + +[dir="rtl"] .offset-sm-5 { + + margin-left: 41.66666667%; + +} + +[dir="rtl"] .offset-sm-6 { + + margin-left: 50%; + +} + +[dir="rtl"] .offset-sm-7 { + + margin-left: 58.33333333%; + +} + +[dir="rtl"] .offset-sm-8 { + + margin-left: 66.66666667%; + +} + +[dir="rtl"] .offset-sm-9 { + + margin-left: 75%; + +} + +[dir="rtl"] .offset-sm-10 { + + margin-left: 83.33333333%; + +} + +[dir="rtl"] .offset-sm-11 { + + margin-left: 91.66666667%; + +} + +[dir="rtl"] .offset-md-0 { + + margin-left: 0; + +} + +[dir="rtl"] .offset-md-1 { + + margin-left: 8.33333333%; + +} + +[dir="rtl"] .offset-md-2 { + + margin-left: 16.66666667%; + +} + +[dir="rtl"] .offset-md-3 { + + margin-left: 25%; + +} + +[dir="rtl"] .offset-md-4 { + + margin-left: 33.33333333%; + +} + +[dir="rtl"] .offset-md-5 { + + margin-left: 41.66666667%; + +} + +[dir="rtl"] .offset-md-6 { + + margin-left: 50%; + +} + +[dir="rtl"] .offset-md-7 { + + margin-left: 58.33333333%; + +} + +[dir="rtl"] .offset-md-8 { + + margin-left: 66.66666667%; + +} + +[dir="rtl"] .offset-md-9 { + + margin-left: 75%; + +} + +[dir="rtl"] .offset-md-10 { + + margin-left: 83.33333333%; + +} + +[dir="rtl"] .offset-md-11 { + + margin-left: 91.66666667%; + +} + +[dir="rtl"] .offset-lg-0 { + + margin-left: 0; + +} + +[dir="rtl"] .offset-lg-1 { + + margin-left: 8.33333333%; + +} + +[dir="rtl"] .offset-lg-2 { + + margin-left: 16.66666667%; + +} + +[dir="rtl"] .offset-lg-3 { + + margin-left: 25%; + +} + +[dir="rtl"] .offset-lg-4 { + + margin-left: 33.33333333%; + +} + +[dir="rtl"] .offset-lg-5 { + + margin-left: 41.66666667%; + +} + +[dir="rtl"] .offset-lg-6 { + + margin-left: 50%; + +} + +[dir="rtl"] .offset-lg-7 { + + margin-left: 58.33333333%; + +} + +[dir="rtl"] .offset-lg-8 { + + margin-left: 66.66666667%; + +} + +[dir="rtl"] .offset-lg-9 { + + margin-left: 75%; + +} + +[dir="rtl"] .offset-lg-10 { + + margin-left: 83.33333333%; + +} + +[dir="rtl"] .offset-lg-11 { + + margin-left: 91.66666667%; + +} + +[dir="rtl"] .offset-xl-0 { + + margin-left: 0; + +} + +[dir="rtl"] .offset-xl-1 { + + margin-left: 8.33333333%; + +} + +[dir="rtl"] .offset-xl-2 { + + margin-left: 16.66666667%; + +} + +[dir="rtl"] .offset-xl-3 { + + margin-left: 25%; + +} + +[dir="rtl"] .offset-xl-4 { + + margin-left: 33.33333333%; + } -.row > * { - -ms-flex-negative: 0; - flex-shrink: 0; - width: 100%; - max-width: 100%; - padding-left: calc(var(--gutter-x) * 0.5); - padding-right: calc(var(--gutter-x) * 0.5); - margin-top: var(--gutter-y); + +[dir="rtl"] .offset-xl-5 { + + margin-left: 41.66666667%; + } -.col { - -webkit-box-flex: 1; - -ms-flex: 1 0 0%; - flex: 1 0 0%; +[dir="rtl"] .offset-xl-6 { + + margin-left: 50%; + } -.row-cols-auto > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; +[dir="rtl"] .offset-xl-7 { + + margin-left: 58.33333333%; + } -.row-cols-1 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 100%; +[dir="rtl"] .offset-xl-8 { + + margin-left: 66.66666667%; + } -.row-cols-2 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 50%; +[dir="rtl"] .offset-xl-9 { + + margin-left: 75%; + } -.row-cols-3 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 33.3333333333%; +[dir="rtl"] .offset-xl-10 { + + margin-left: 83.33333333%; + } -.row-cols-4 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 25%; +[dir="rtl"] .offset-xl-11 { + + margin-left: 91.66666667%; + } -.row-cols-5 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 20%; +[dir="rtl"] .offset-xxl-0 { + + margin-left: 0; + } -.row-cols-6 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 16.6666666667%; +[dir="rtl"] .offset-xxl-1 { + + margin-left: 8.33333333%; + } -.col-auto { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; +[dir="rtl"] .offset-xxl-2 { + + margin-left: 16.66666667%; + } -.col-1 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 8.33333333%; +[dir="rtl"] .offset-xxl-3 { + + margin-left: 25%; + } -.col-2 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 16.66666667%; +[dir="rtl"] .offset-xxl-4 { + + margin-left: 33.33333333%; + } -.col-3 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 25%; +[dir="rtl"] .offset-xxl-5 { + + margin-left: 41.66666667%; + } -.col-4 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 33.33333333%; +[dir="rtl"] .offset-xxl-6 { + + margin-left: 50%; + } -.col-5 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 41.66666667%; +[dir="rtl"] .offset-xxl-7 { + + margin-left: 58.33333333%; + } -.col-6 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 50%; +[dir="rtl"] .offset-xxl-8 { + + margin-left: 66.66666667%; + } -.col-7 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 58.33333333%; +[dir="rtl"] .offset-xxl-9 { + + margin-left: 75%; + } -.col-8 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 66.66666667%; +[dir="rtl"] .offset-xxl-10 { + + margin-left: 83.33333333%; + } -.col-9 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 75%; +[dir="rtl"] .offset-xxl-11 { + + margin-left: 91.66666667%; + } -.col-10 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 83.33333333%; +[dir="rtl"] .form-control-plaintext.form-control-sm, +[dir="rtl"] .form-control-plaintext.form-control-lg { + + padding-right: 0; + padding-left: 0; } -.col-11 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 91.66666667%; +[dir="rtl"] .form-select[multiple], +[dir="rtl"] [multiple].custom-select, +[dir="rtl"] .form-select[size]:not([size="1"]), +[dir="rtl"] [size].custom-select:not([size="1"]) { + + padding-right: 1rem; + background-image: none; } -.col-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 100%; +[dir="rtl"] .form-select-sm { + + padding-top: 0.25rem; + padding-bottom: 0.25rem; + padding-left: 0.5rem; + font-size: 0.875rem; + border-radius: 0.2rem; } -.offset-1 { - margin-right: 8.33333333%; +[dir="rtl"] .form-select-lg { + + padding-top: 0.5rem; + padding-bottom: 0.5rem; + padding-left: 1rem; + font-size: 1.25rem; + border-radius: 0.3rem; } -.offset-2 { - margin-right: 16.66666667%; +[dir="rtl"] .form-check { + + display: block; + min-height: 1.5rem; + padding-left: 1.5rem; + margin-bottom: 0.125rem; } -.offset-3 { - margin-right: 25%; +[dir="rtl"] .form-check .form-check-input { + + float: left; + margin-left: -1.5rem; } -.offset-4 { - margin-right: 33.33333333%; +[dir="rtl"] .form-check-reverse { + + padding-right: 1.5rem; + padding-left: 0; + text-align: left; } -.offset-5 { - margin-right: 41.66666667%; +[dir="rtl"] .form-check-reverse .form-check-input { + + float: left; + margin-right: -1.5rem; + margin-left: 0; } -.offset-6 { - margin-right: 50%; +[dir="rtl"] .form-switch { + + padding-left: 2.5rem; } -.offset-7 { - margin-right: 58.33333333%; +[dir="rtl"] .form-switch .form-check-input { + + width: 2rem; + margin-left: -2.5rem; + 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: 2rem; + -webkit-transition: background-position 0.15s ease-in-out; + -o-transition: background-position 0.15s ease-in-out; + transition: background-position 0.15s ease-in-out; } -.offset-8 { - margin-right: 66.66666667%; +[dir="rtl"] .form-switch.form-check-reverse { + + padding-right: 2.5rem; + padding-left: 0; } -.offset-9 { - margin-right: 75%; +[dir="rtl"] .form-switch.form-check-reverse .form-check-input { + + margin-right: -2.5rem; + margin-left: 0; } -.offset-10 { - margin-right: 83.33333333%; +[dir="rtl"] .form-check-inline { + + display: inline-block; + margin-right: 1rem; } -.offset-11 { - margin-right: 91.66666667%; +[dir="rtl"] .form-floating>label { + + position: absolute; + top: 0; + right: 0; + width: 100%; + height: 100%; + padding: 1rem 1rem; + overflow: hidden; + text-align: start; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + white-space: nowrap; + pointer-events: none; + border: 1px solid transparent; + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transition: opacity 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out; + transition: opacity 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out; + -o-transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out; + transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out; + transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out; } -.g-0, -.gx-0 { - --gutter-x: 0; +[dir="rtl"] .input-group-lg>.form-select, +[dir="rtl"] .input-group-lg>.custom-select, +[dir="rtl"] .input-group-sm>.form-select, +[dir="rtl"] .input-group-sm>.custom-select { + + padding-right: 4rem; } -.g-0, -.gy-0 { - --gutter-y: 0; +[dir="rtl"] .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; } -.g-1, -.gx-1 { - --gutter-x: 0.25rem; +[dir="rtl"] .was-validated .form-control:valid, +[dir="rtl"] .form-control.is-valid { + + border-color: hsl(120, 32%, 39%); + padding-right: calc(1.5rem + 1.2rem); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='hsl%28120, 32%, 39%%29' d='M2.3 6.73.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.375rem + 0.3rem) center; + background-size: calc(0.75rem + 0.6rem) calc(0.75rem + 0.6rem); } -.g-1, -.gy-1 { - --gutter-y: 0.25rem; +[dir="rtl"] .was-validated textarea.form-control:valid, +[dir="rtl"] textarea.form-control.is-valid { + + padding-right: calc(1.5rem + 1.2rem); + background-position: top calc(0.375rem + 0.3rem) right calc(0.375rem + 0.3rem); } -.g-2, -.gx-2 { - --gutter-x: 0.5rem; +[dir="rtl"] .was-validated .form-select:valid:not([multiple]):not([size]), +[dir="rtl"] .was-validated .custom-select:valid:not([multiple]):not([size]), +[dir="rtl"] .was-validated .form-select:valid:not([multiple])[size="1"], +[dir="rtl"] .was-validated .custom-select:valid:not([multiple])[size="1"], +[dir="rtl"] .form-select.is-valid:not([multiple]):not([size]), +[dir="rtl"] .is-valid.custom-select:not([multiple]):not([size]), +[dir="rtl"] .form-select.is-valid:not([multiple])[size="1"], +[dir="rtl"] .is-valid.custom-select:not([multiple])[size="1"] { + + padding-right: 5.5rem; + background-image: url("../images/select-bg.svg"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='hsl%28120, 32%, 39%%29' d='M2.3 6.73.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 1rem center, center right 3rem; + background-size: 116rem, calc(0.75rem + 0.6rem) calc(0.75rem + 0.6rem); } -.g-2, -.gy-2 { - --gutter-y: 0.5rem; +[dir="rtl"] .form-check-inline .form-check-input~.valid-feedback { + + margin-left: 0.5rem; } -.g-3, -.gx-3 { - --gutter-x: 1rem; +[dir="rtl"] .was-validated .form-control:invalid, +[dir="rtl"] .form-control.is-invalid { + + border-color: hsl(3, 75%, 37%); + padding-right: calc(1.5rem + 1.2rem); + 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='hsl%283, 75%, 37%%29'%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='hsl%283, 75%, 37%%29' stroke='none'/%3e%3c/svg%3e"); + background-repeat: no-repeat; + background-position: right calc(0.375rem + 0.3rem) center; + background-size: calc(0.75rem + 0.6rem) calc(0.75rem + 0.6rem); } -.g-3, -.gy-3 { - --gutter-y: 1rem; +[dir="rtl"] .was-validated textarea.form-control:invalid, +[dir="rtl"] textarea.form-control.is-invalid { + + padding-right: calc(1.5rem + 1.2rem); + background-position: top calc(0.375rem + 0.3rem) right calc(0.375rem + 0.3rem); } -.g-4, -.gx-4 { - --gutter-x: 1.5rem; +[dir="rtl"] .was-validated .form-select:invalid:not([multiple]):not([size]), +[dir="rtl"] .was-validated .custom-select:invalid:not([multiple]):not([size]), +[dir="rtl"] .was-validated .form-select:invalid:not([multiple])[size="1"], +[dir="rtl"] .was-validated .custom-select:invalid:not([multiple])[size="1"], +[dir="rtl"] .form-select.is-invalid:not([multiple]):not([size]), +[dir="rtl"] .is-invalid.custom-select:not([multiple]):not([size]), +[dir="rtl"] .form-select.is-invalid:not([multiple])[size="1"], +[dir="rtl"] .is-invalid.custom-select:not([multiple])[size="1"] { + + padding-right: 5.5rem; + background-image: url("../images/select-bg.svg"), 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='hsl%283, 75%, 37%%29'%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='hsl%283, 75%, 37%%29' stroke='none'/%3e%3c/svg%3e"); + background-position: right 1rem center, center right 3rem; + background-size: 116rem, calc(0.75rem + 0.6rem) calc(0.75rem + 0.6rem); } -.g-4, -.gy-4 { - --gutter-y: 1.5rem; -} - -.g-5, -.gx-5 { - --gutter-x: 3rem; -} - -.g-5, -.gy-5 { - --gutter-y: 3rem; -} - -@media (min-width: 576px) { - .col-sm { - -webkit-box-flex: 1; - -ms-flex: 1 0 0%; - flex: 1 0 0%; - } - .row-cols-sm-auto > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - } - .row-cols-sm-1 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 100%; - } - .row-cols-sm-2 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 50%; - } - .row-cols-sm-3 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 33.3333333333%; - } - .row-cols-sm-4 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 25%; - } - .row-cols-sm-5 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 20%; - } - .row-cols-sm-6 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 16.6666666667%; - } - .col-sm-auto { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - } - .col-sm-1 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 8.33333333%; - } - .col-sm-2 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 16.66666667%; - } - .col-sm-3 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 25%; - } - .col-sm-4 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 33.33333333%; - } - .col-sm-5 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 41.66666667%; - } - .col-sm-6 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 50%; - } - .col-sm-7 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 58.33333333%; - } - .col-sm-8 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 66.66666667%; - } - .col-sm-9 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 75%; - } - .col-sm-10 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 83.33333333%; - } - .col-sm-11 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 91.66666667%; - } - .col-sm-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 100%; - } - .offset-sm-0 { - margin-right: 0; - } - .offset-sm-1 { - margin-right: 8.33333333%; - } - .offset-sm-2 { - margin-right: 16.66666667%; - } - .offset-sm-3 { - margin-right: 25%; - } - .offset-sm-4 { - margin-right: 33.33333333%; - } - .offset-sm-5 { - margin-right: 41.66666667%; - } - .offset-sm-6 { - margin-right: 50%; - } - .offset-sm-7 { - margin-right: 58.33333333%; - } - .offset-sm-8 { - margin-right: 66.66666667%; - } - .offset-sm-9 { - margin-right: 75%; - } - .offset-sm-10 { - margin-right: 83.33333333%; - } - .offset-sm-11 { - margin-right: 91.66666667%; - } - .g-sm-0, - .gx-sm-0 { - --gutter-x: 0; - } - .g-sm-0, - .gy-sm-0 { - --gutter-y: 0; - } - .g-sm-1, - .gx-sm-1 { - --gutter-x: 0.25rem; - } - .g-sm-1, - .gy-sm-1 { - --gutter-y: 0.25rem; - } - .g-sm-2, - .gx-sm-2 { - --gutter-x: 0.5rem; - } - .g-sm-2, - .gy-sm-2 { - --gutter-y: 0.5rem; - } - .g-sm-3, - .gx-sm-3 { - --gutter-x: 1rem; - } - .g-sm-3, - .gy-sm-3 { - --gutter-y: 1rem; - } - .g-sm-4, - .gx-sm-4 { - --gutter-x: 1.5rem; - } - .g-sm-4, - .gy-sm-4 { - --gutter-y: 1.5rem; - } - .g-sm-5, - .gx-sm-5 { - --gutter-x: 3rem; - } - .g-sm-5, - .gy-sm-5 { - --gutter-y: 3rem; - } -} -@media (min-width: 768px) { - .col-md { - -webkit-box-flex: 1; - -ms-flex: 1 0 0%; - flex: 1 0 0%; - } - .row-cols-md-auto > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - } - .row-cols-md-1 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 100%; - } - .row-cols-md-2 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 50%; - } - .row-cols-md-3 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 33.3333333333%; - } - .row-cols-md-4 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 25%; - } - .row-cols-md-5 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 20%; - } - .row-cols-md-6 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 16.6666666667%; - } - .col-md-auto { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - } - .col-md-1 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 8.33333333%; - } - .col-md-2 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 16.66666667%; - } - .col-md-3 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 25%; - } - .col-md-4 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 33.33333333%; - } - .col-md-5 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 41.66666667%; - } - .col-md-6 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 50%; - } - .col-md-7 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 58.33333333%; - } - .col-md-8 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 66.66666667%; - } - .col-md-9 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 75%; - } - .col-md-10 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 83.33333333%; - } - .col-md-11 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 91.66666667%; - } - .col-md-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 100%; - } - .offset-md-0 { - margin-right: 0; - } - .offset-md-1 { - margin-right: 8.33333333%; - } - .offset-md-2 { - margin-right: 16.66666667%; - } - .offset-md-3 { - margin-right: 25%; - } - .offset-md-4 { - margin-right: 33.33333333%; - } - .offset-md-5 { - margin-right: 41.66666667%; - } - .offset-md-6 { - margin-right: 50%; - } - .offset-md-7 { - margin-right: 58.33333333%; - } - .offset-md-8 { - margin-right: 66.66666667%; - } - .offset-md-9 { - margin-right: 75%; - } - .offset-md-10 { - margin-right: 83.33333333%; - } - .offset-md-11 { - margin-right: 91.66666667%; - } - .g-md-0, - .gx-md-0 { - --gutter-x: 0; - } - .g-md-0, - .gy-md-0 { - --gutter-y: 0; - } - .g-md-1, - .gx-md-1 { - --gutter-x: 0.25rem; - } - .g-md-1, - .gy-md-1 { - --gutter-y: 0.25rem; - } - .g-md-2, - .gx-md-2 { - --gutter-x: 0.5rem; - } - .g-md-2, - .gy-md-2 { - --gutter-y: 0.5rem; - } - .g-md-3, - .gx-md-3 { - --gutter-x: 1rem; - } - .g-md-3, - .gy-md-3 { - --gutter-y: 1rem; - } - .g-md-4, - .gx-md-4 { - --gutter-x: 1.5rem; - } - .g-md-4, - .gy-md-4 { - --gutter-y: 1.5rem; - } - .g-md-5, - .gx-md-5 { - --gutter-x: 3rem; - } - .g-md-5, - .gy-md-5 { - --gutter-y: 3rem; - } -} -@media (min-width: 992px) { - .col-lg { - -webkit-box-flex: 1; - -ms-flex: 1 0 0%; - flex: 1 0 0%; - } - .row-cols-lg-auto > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - } - .row-cols-lg-1 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 100%; - } - .row-cols-lg-2 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 50%; - } - .row-cols-lg-3 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 33.3333333333%; - } - .row-cols-lg-4 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 25%; - } - .row-cols-lg-5 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 20%; - } - .row-cols-lg-6 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 16.6666666667%; - } - .col-lg-auto { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - } - .col-lg-1 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 8.33333333%; - } - .col-lg-2 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 16.66666667%; - } - .col-lg-3 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 25%; - } - .col-lg-4 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 33.33333333%; - } - .col-lg-5 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 41.66666667%; - } - .col-lg-6 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 50%; - } - .col-lg-7 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 58.33333333%; - } - .col-lg-8 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 66.66666667%; - } - .col-lg-9 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 75%; - } - .col-lg-10 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 83.33333333%; - } - .col-lg-11 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 91.66666667%; - } - .col-lg-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 100%; - } - .offset-lg-0 { - margin-right: 0; - } - .offset-lg-1 { - margin-right: 8.33333333%; - } - .offset-lg-2 { - margin-right: 16.66666667%; - } - .offset-lg-3 { - margin-right: 25%; - } - .offset-lg-4 { - margin-right: 33.33333333%; - } - .offset-lg-5 { - margin-right: 41.66666667%; - } - .offset-lg-6 { - margin-right: 50%; - } - .offset-lg-7 { - margin-right: 58.33333333%; - } - .offset-lg-8 { - margin-right: 66.66666667%; - } - .offset-lg-9 { - margin-right: 75%; - } - .offset-lg-10 { - margin-right: 83.33333333%; - } - .offset-lg-11 { - margin-right: 91.66666667%; - } - .g-lg-0, - .gx-lg-0 { - --gutter-x: 0; - } - .g-lg-0, - .gy-lg-0 { - --gutter-y: 0; - } - .g-lg-1, - .gx-lg-1 { - --gutter-x: 0.25rem; - } - .g-lg-1, - .gy-lg-1 { - --gutter-y: 0.25rem; - } - .g-lg-2, - .gx-lg-2 { - --gutter-x: 0.5rem; - } - .g-lg-2, - .gy-lg-2 { - --gutter-y: 0.5rem; - } - .g-lg-3, - .gx-lg-3 { - --gutter-x: 1rem; - } - .g-lg-3, - .gy-lg-3 { - --gutter-y: 1rem; - } - .g-lg-4, - .gx-lg-4 { - --gutter-x: 1.5rem; - } - .g-lg-4, - .gy-lg-4 { - --gutter-y: 1.5rem; - } - .g-lg-5, - .gx-lg-5 { - --gutter-x: 3rem; - } - .g-lg-5, - .gy-lg-5 { - --gutter-y: 3rem; - } -} -@media (min-width: 1200px) { - .col-xl { - -webkit-box-flex: 1; - -ms-flex: 1 0 0%; - flex: 1 0 0%; - } - .row-cols-xl-auto > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - } - .row-cols-xl-1 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 100%; - } - .row-cols-xl-2 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 50%; - } - .row-cols-xl-3 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 33.3333333333%; - } - .row-cols-xl-4 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 25%; - } - .row-cols-xl-5 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 20%; - } - .row-cols-xl-6 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 16.6666666667%; - } - .col-xl-auto { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - } - .col-xl-1 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 8.33333333%; - } - .col-xl-2 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 16.66666667%; - } - .col-xl-3 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 25%; - } - .col-xl-4 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 33.33333333%; - } - .col-xl-5 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 41.66666667%; - } - .col-xl-6 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 50%; - } - .col-xl-7 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 58.33333333%; - } - .col-xl-8 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 66.66666667%; - } - .col-xl-9 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 75%; - } - .col-xl-10 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 83.33333333%; - } - .col-xl-11 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 91.66666667%; - } - .col-xl-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 100%; - } - .offset-xl-0 { - margin-right: 0; - } - .offset-xl-1 { - margin-right: 8.33333333%; - } - .offset-xl-2 { - margin-right: 16.66666667%; - } - .offset-xl-3 { - margin-right: 25%; - } - .offset-xl-4 { - margin-right: 33.33333333%; - } - .offset-xl-5 { - margin-right: 41.66666667%; - } - .offset-xl-6 { - margin-right: 50%; - } - .offset-xl-7 { - margin-right: 58.33333333%; - } - .offset-xl-8 { - margin-right: 66.66666667%; - } - .offset-xl-9 { - margin-right: 75%; - } - .offset-xl-10 { - margin-right: 83.33333333%; - } - .offset-xl-11 { - margin-right: 91.66666667%; - } - .g-xl-0, - .gx-xl-0 { - --gutter-x: 0; - } - .g-xl-0, - .gy-xl-0 { - --gutter-y: 0; - } - .g-xl-1, - .gx-xl-1 { - --gutter-x: 0.25rem; - } - .g-xl-1, - .gy-xl-1 { - --gutter-y: 0.25rem; - } - .g-xl-2, - .gx-xl-2 { - --gutter-x: 0.5rem; - } - .g-xl-2, - .gy-xl-2 { - --gutter-y: 0.5rem; - } - .g-xl-3, - .gx-xl-3 { - --gutter-x: 1rem; - } - .g-xl-3, - .gy-xl-3 { - --gutter-y: 1rem; - } - .g-xl-4, - .gx-xl-4 { - --gutter-x: 1.5rem; - } - .g-xl-4, - .gy-xl-4 { - --gutter-y: 1.5rem; - } - .g-xl-5, - .gx-xl-5 { - --gutter-x: 3rem; - } - .g-xl-5, - .gy-xl-5 { - --gutter-y: 3rem; - } -} -@media (min-width: 1400px) { - .col-xxl { - -webkit-box-flex: 1; - -ms-flex: 1 0 0%; - flex: 1 0 0%; - } - .row-cols-xxl-auto > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - } - .row-cols-xxl-1 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 100%; - } - .row-cols-xxl-2 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 50%; - } - .row-cols-xxl-3 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 33.3333333333%; - } - .row-cols-xxl-4 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 25%; - } - .row-cols-xxl-5 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 20%; - } - .row-cols-xxl-6 > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 16.6666666667%; - } - .col-xxl-auto { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: auto; - } - .col-xxl-1 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 8.33333333%; - } - .col-xxl-2 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 16.66666667%; - } - .col-xxl-3 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 25%; - } - .col-xxl-4 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 33.33333333%; - } - .col-xxl-5 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 41.66666667%; - } - .col-xxl-6 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 50%; - } - .col-xxl-7 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 58.33333333%; - } - .col-xxl-8 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 66.66666667%; - } - .col-xxl-9 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 75%; - } - .col-xxl-10 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 83.33333333%; - } - .col-xxl-11 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 91.66666667%; - } - .col-xxl-12 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 100%; - } - .offset-xxl-0 { - margin-right: 0; - } - .offset-xxl-1 { - margin-right: 8.33333333%; - } - .offset-xxl-2 { - margin-right: 16.66666667%; - } - .offset-xxl-3 { - margin-right: 25%; - } - .offset-xxl-4 { - margin-right: 33.33333333%; - } - .offset-xxl-5 { - margin-right: 41.66666667%; - } - .offset-xxl-6 { - margin-right: 50%; - } - .offset-xxl-7 { - margin-right: 58.33333333%; - } - .offset-xxl-8 { - margin-right: 66.66666667%; - } - .offset-xxl-9 { - margin-right: 75%; - } - .offset-xxl-10 { - margin-right: 83.33333333%; - } - .offset-xxl-11 { - margin-right: 91.66666667%; - } - .g-xxl-0, - .gx-xxl-0 { - --gutter-x: 0; - } - .g-xxl-0, - .gy-xxl-0 { - --gutter-y: 0; - } - .g-xxl-1, - .gx-xxl-1 { - --gutter-x: 0.25rem; - } - .g-xxl-1, - .gy-xxl-1 { - --gutter-y: 0.25rem; - } - .g-xxl-2, - .gx-xxl-2 { - --gutter-x: 0.5rem; - } - .g-xxl-2, - .gy-xxl-2 { - --gutter-y: 0.5rem; - } - .g-xxl-3, - .gx-xxl-3 { - --gutter-x: 1rem; - } - .g-xxl-3, - .gy-xxl-3 { - --gutter-y: 1rem; - } - .g-xxl-4, - .gx-xxl-4 { - --gutter-x: 1.5rem; - } - .g-xxl-4, - .gy-xxl-4 { - --gutter-y: 1.5rem; - } - .g-xxl-5, - .gx-xxl-5 { - --gutter-x: 3rem; - } - .g-xxl-5, - .gy-xxl-5 { - --gutter-y: 3rem; - } -} -.table { - --table-color: var(--body-color); - --table-bg: transparent; - --table-border-color: var(--border-color); - --table-accent-bg: transparent; - --table-striped-color: var(--body-color); - --table-striped-bg: rgba(0, 0, 0, 0.05); - --table-active-color: var(--body-color); - --table-active-bg: rgba(0, 0, 0, 0.1); - --table-hover-color: var(--body-color); - --table-hover-bg: rgba(0, 0, 0, 0.075); - width: 100%; - margin-bottom: 1rem; - color: var(--table-color); - vertical-align: top; - border-color: var(--table-border-color); -} -.table > :not(caption) > * > * { - padding: 0.5rem 0.5rem; - background-color: var(--table-bg); - border-bottom-width: 1px; - -webkit-box-shadow: inset 0 0 0 9999px var(--table-accent-bg); - box-shadow: inset 0 0 0 9999px var(--table-accent-bg); -} -.table > tbody { - vertical-align: inherit; -} -.table > thead { - vertical-align: bottom; -} - -.table-group-divider { - border-top: 2px solid 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-borderless > :not(:first-child) { - border-top-width: 0; -} - -.table-striped > tbody > tr:nth-of-type(odd) > * { - --table-accent-bg: var(--table-striped-bg); - color: var(--table-striped-color); -} - -.table-striped-columns > :not(caption) > tr > :nth-child(even) { - --table-accent-bg: var(--table-striped-bg); - color: var(--table-striped-color); -} - -.table-active { - --table-accent-bg: var(--table-active-bg); - color: var(--table-active-color); -} - -.table-hover > tbody > tr:hover > * { - --table-accent-bg: var(--table-hover-bg); - color: var(--table-hover-color); -} - -.table-primary { - --table-color: hsl(0, 0%, 0%); - --table-bg: #cfd4dd; - --table-border-color: #babfc7; - --table-striped-bg: #c5c9d2; - --table-striped-color: hsl(0, 0%, 0%); - --table-active-bg: #babfc7; - --table-active-color: hsl(0, 0%, 0%); - --table-hover-bg: #bfc4cc; - --table-hover-color: hsl(0, 0%, 0%); - color: var(--table-color); - border-color: var(--table-border-color); -} - -.table-secondary { - --table-color: hsl(0, 0%, 0%); - --table-bg: #e2e3e5; - --table-border-color: #cbccce; - --table-striped-bg: #d7d8da; - --table-striped-color: hsl(0, 0%, 0%); - --table-active-bg: #cbccce; - --table-active-color: hsl(0, 0%, 0%); - --table-hover-bg: #d1d2d4; - --table-hover-color: hsl(0, 0%, 0%); - color: var(--table-color); - border-color: var(--table-border-color); -} - -.table-success { - --table-color: hsl(0, 0%, 0%); - --table-bg: #dae6da; - --table-border-color: #c4cfc4; - --table-striped-bg: #cfdbcf; - --table-striped-color: hsl(0, 0%, 0%); - --table-active-bg: #c4cfc4; - --table-active-color: hsl(0, 0%, 0%); - --table-hover-bg: #cad5ca; - --table-hover-color: hsl(0, 0%, 0%); - color: var(--table-color); - border-color: var(--table-border-color); -} - -.table-info { - --table-color: hsl(0, 0%, 0%); - --table-bg: #d6e0e8; - --table-border-color: #c1cad1; - --table-striped-bg: #cbd5dc; - --table-striped-color: hsl(0, 0%, 0%); - --table-active-bg: #c1cad1; - --table-active-color: hsl(0, 0%, 0%); - --table-hover-bg: #c6cfd7; - --table-hover-color: hsl(0, 0%, 0%); - color: var(--table-color); - border-color: var(--table-border-color); -} - -.table-warning { - --table-color: hsl(0, 0%, 0%); - --table-bg: #efe0cc; - --table-border-color: #d7cab8; - --table-striped-bg: #e3d5c2; - --table-striped-color: hsl(0, 0%, 0%); - --table-active-bg: #d7cab8; - --table-active-color: hsl(0, 0%, 0%); - --table-hover-bg: #ddcfbd; - --table-hover-color: hsl(0, 0%, 0%); - color: var(--table-color); - border-color: var(--table-border-color); -} - -.table-danger { - --table-color: hsl(0, 0%, 0%); - --table-bg: #edd2d1; - --table-border-color: #d5bdbc; - --table-striped-bg: #e1c8c7; - --table-striped-color: hsl(0, 0%, 0%); - --table-active-bg: #d5bdbc; - --table-active-color: hsl(0, 0%, 0%); - --table-hover-bg: #dbc2c1; - --table-hover-color: hsl(0, 0%, 0%); - color: var(--table-color); - border-color: var(--table-border-color); -} - -.table-light { - --table-color: hsl(0, 0%, 0%); - --table-bg: hsl(210, 17%, 98%); - --table-border-color: #e0e1e2; - --table-striped-bg: #edeeee; - --table-striped-color: hsl(0, 0%, 0%); - --table-active-bg: #e0e1e2; - --table-active-color: hsl(0, 0%, 0%); - --table-hover-bg: #e6e7e8; - --table-hover-color: hsl(0, 0%, 0%); - color: var(--table-color); - border-color: var(--table-border-color); -} - -.table-dark { - --table-color: hsl(0, 0%, 100%); - --table-bg: hsl(210, 10%, 23%); - --table-border-color: #494f54; - --table-striped-bg: #3f454b; - --table-striped-color: hsl(0, 0%, 100%); - --table-active-bg: #494f54; - --table-active-color: hsl(0, 0%, 100%); - --table-hover-bg: #444a4f; - --table-hover-color: hsl(0, 0%, 100%); - color: var(--table-color); - border-color: var(--table-border-color); -} - -.table-responsive { - overflow-x: auto; - -webkit-overflow-scrolling: touch; -} - -@media (max-width: 575.98px) { - .table-responsive-sm { - overflow-x: auto; - -webkit-overflow-scrolling: touch; - } -} -@media (max-width: 767.98px) { - .table-responsive-md { - overflow-x: auto; - -webkit-overflow-scrolling: touch; - } -} -@media (max-width: 991.98px) { - .table-responsive-lg { - overflow-x: auto; - -webkit-overflow-scrolling: touch; - } -} -@media (max-width: 1199.98px) { - .table-responsive-xl { - overflow-x: auto; - -webkit-overflow-scrolling: touch; - } -} -@media (max-width: 1399.98px) { - .table-responsive-xxl { - overflow-x: auto; - -webkit-overflow-scrolling: touch; - } -} -.form-label { - margin-bottom: 0.5rem; -} - -.col-form-label { - padding-top: calc(0.6rem + 1px); - padding-bottom: calc(0.6rem + 1px); - margin-bottom: 0; - font-size: inherit; - line-height: 1.5; -} - -.col-form-label-lg { - padding-top: calc(0.5rem + 1px); - padding-bottom: calc(0.5rem + 1px); - font-size: 1.25rem; -} - -.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: hsl(210, 7%, 46%); -} - -.form-control { - display: block; - width: 100%; - padding: 0.6rem 1rem; - font-size: 1rem; - font-weight: 400; - line-height: 1.5; - color: hsl(210, 11%, 15%); - background-color: hsl(0, 0%, 100%); - background-clip: padding-box; - border: 1px solid hsl(210, 14%, 83%); - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border-radius: 0.25rem; - -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - -o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; -} -@media (prefers-reduced-motion: reduce) { - .form-control { - -webkit-transition: none; - -o-transition: none; - transition: none; - } -} -.form-control[type=file] { - overflow: hidden; -} -.form-control[type=file]:not(:disabled):not([readonly]) { - cursor: pointer; -} -.form-control:focus { - color: hsl(210, 11%, 15%); - background-color: hsl(0, 0%, 100%); - border-color: #8894aa; - outline: 0; - -webkit-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); - box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); -} -.form-control::-webkit-date-and-time-value { - height: 1.5em; -} -.form-control::-webkit-input-placeholder { - color: hsl(210, 7%, 46%); - opacity: 1; -} -.form-control::-moz-placeholder { - color: hsl(210, 7%, 46%); - opacity: 1; -} -.form-control:-ms-input-placeholder { - color: hsl(210, 7%, 46%); - opacity: 1; -} -.form-control::-ms-input-placeholder { - color: hsl(210, 7%, 46%); - opacity: 1; -} -.form-control::placeholder { - color: hsl(210, 7%, 46%); - opacity: 1; -} -.form-control:disabled { - background-color: hsl(210, 16%, 93%); - opacity: 1; -} -.form-control::-webkit-file-upload-button { - padding: 0.6rem 1rem; - margin: -0.6rem -1rem; - -webkit-margin-end: 1rem; - margin-inline-end: 1rem; - color: hsl(210, 11%, 15%); - background-color: hsl(210, 16%, 93%); - 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, -webkit-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, -webkit-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; - 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, -webkit-box-shadow 0.15s ease-in-out; -} -.form-control::file-selector-button { - padding: 0.6rem 1rem; - margin: -0.6rem -1rem; - -webkit-margin-end: 1rem; - margin-inline-end: 1rem; - color: hsl(210, 11%, 15%); - background-color: hsl(210, 16%, 93%); - 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, -webkit-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, -webkit-box-shadow 0.15s ease-in-out; - -o-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; - 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, -webkit-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::file-selector-button { - -webkit-transition: none; - -o-transition: none; - transition: none; - } -} -.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button { - background-color: #dee1e4; -} -.form-control:hover:not(:disabled):not([readonly])::file-selector-button { - background-color: #dee1e4; -} - -.form-control-plaintext { - display: block; - width: 100%; - padding: 0.6rem 0; - margin-bottom: 0; - line-height: 1.5; - color: hsl(210, 11%, 15%); - background-color: transparent; - border: solid transparent; - border-width: 1px 0; -} -.form-control-plaintext:focus { - outline: 0; -} -.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg { - padding-left: 0; - padding-right: 0; -} - -.form-control-sm { - min-height: calc(1.5em + 0.5rem + 2px); - padding: 0.25rem 0.5rem; - font-size: 0.875rem; - border-radius: 0.2rem; -} -.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-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-lg { - min-height: calc(1.5em + 1rem + 2px); - padding: 0.5rem 1rem; - font-size: 1.25rem; - border-radius: 0.3rem; -} -.form-control-lg::-webkit-file-upload-button { - padding: 0.5rem 1rem; - margin: -0.5rem -1rem; - -webkit-margin-end: 1rem; - margin-inline-end: 1rem; -} -.form-control-lg::file-selector-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 + 1.2rem + 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 { - width: 3rem; - height: calc(1.5em + 1.2rem + 2px); - padding: 0.6rem; -} -.form-control-color:not(:disabled):not([readonly]) { - cursor: pointer; -} -.form-control-color::-moz-color-swatch { - border: 0 !important; - border-radius: 0.25rem; -} -.form-control-color::-webkit-color-swatch { - border-radius: 0.25rem; -} -.form-control-color.form-control-sm { - height: calc(1.5em + 0.5rem + 2px); -} -.form-control-color.form-control-lg { - height: calc(1.5em + 1rem + 2px); -} - -.form-select, .custom-select { - display: block; - width: 100%; - padding: 0.6rem 1rem 0.6rem 3rem; - -moz-padding-start: calc(1rem - 3px); - font-size: 1rem; - font-weight: 400; - line-height: 1.5; - color: hsl(210, 11%, 15%); - background-color: hsl(210, 16%, 93%); - background-image: url("../images/select-bg.svg"); - background-repeat: no-repeat; - background-position: left 1rem center; - background-size: 116rem; - border: 1px solid hsl(210, 14%, 83%); - border-radius: 0.25rem; - -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - -o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} -@media (prefers-reduced-motion: reduce) { - .form-select, .custom-select { - -webkit-transition: none; - -o-transition: none; - transition: none; - } -} -.form-select:focus, .custom-select:focus { - border-color: #8894aa; - outline: 0; - -webkit-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); - box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); -} -.form-select[multiple], [multiple].custom-select, .form-select[size]:not([size="1"]), [size].custom-select:not([size="1"]) { - padding-left: 1rem; - background-image: none; -} -.form-select:disabled, .custom-select:disabled { - background-color: hsl(210, 16%, 93%); -} -.form-select:-moz-focusring, .custom-select:-moz-focusring { - color: transparent; - text-shadow: 0 0 0 hsl(210, 11%, 15%); -} - -.form-select-sm { - padding-top: 0.25rem; - padding-bottom: 0.25rem; - padding-right: 0.5rem; - font-size: 0.875rem; - border-radius: 0.2rem; -} - -.form-select-lg { - padding-top: 0.5rem; - padding-bottom: 0.5rem; - padding-right: 1rem; - font-size: 1.25rem; - border-radius: 0.3rem; -} - -.form-check { - display: block; - min-height: 1.5rem; - padding-right: 1.5em; - margin-bottom: 0.125rem; -} -.form-check .form-check-input { - float: right; - margin-right: -1.5em; -} - -.form-check-reverse { - padding-left: 1.5em; - padding-right: 0; - text-align: left; -} -.form-check-reverse .form-check-input { - float: left; - margin-left: -1.5em; - margin-right: 0; -} - -.form-check-input { - width: 1em; - height: 1em; - margin-top: 0.25em; - vertical-align: top; - background-color: hsl(0, 0%, 100%); - 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; - print-color-adjust: exact; -} -.form-check-input[type=checkbox] { - border-radius: 0.25em; -} -.form-check-input[type=radio] { - border-radius: 50%; -} -.form-check-input:active { - -webkit-filter: brightness(90%); - filter: brightness(90%); -} -.form-check-input:focus { - border-color: #8894aa; - outline: 0; - -webkit-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); - box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); -} -.form-check-input:checked { - background-color: hsl(240, 98%, 17%); - border-color: hsl(240, 98%, 17%); -} -.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='hsl%280, 0%, 100%%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-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='hsl%280, 0%, 100%%29'/%3e%3c/svg%3e"); -} -.form-check-input[type=checkbox]:indeterminate { - background-color: hsl(240, 98%, 17%); - border-color: hsl(240, 98%, 17%); - 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='hsl%280, 0%, 100%%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e"); -} -.form-check-input:disabled { - pointer-events: none; - -webkit-filter: none; - filter: none; - opacity: 0.5; -} -.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label { - cursor: default; - opacity: 0.5; -} - -.form-switch { - padding-right: 2.5em; -} -.form-switch .form-check-input { - width: 2em; - margin-right: -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: right center; - border-radius: 2em; - -webkit-transition: background-position 0.15s ease-in-out; - -o-transition: background-position 0.15s ease-in-out; - transition: background-position 0.15s ease-in-out; -} -@media (prefers-reduced-motion: reduce) { - .form-switch .form-check-input { - -webkit-transition: none; - -o-transition: none; - 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='%238894aa'/%3e%3c/svg%3e"); -} -.form-switch .form-check-input:checked { - background-position: left 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='hsl%280, 0%, 100%%29'/%3e%3c/svg%3e"); -} -.form-switch.form-check-reverse { - padding-left: 2.5em; - padding-right: 0; -} -.form-switch.form-check-reverse .form-check-input { - margin-left: -2.5em; - margin-right: 0; -} - -.form-check-inline { - display: inline-block; - margin-left: 1rem; -} - -.btn-check { - position: absolute; - clip: rect(0, 0, 0, 0); - pointer-events: none; -} -.btn-check[disabled] + .btn, .btn-check:disabled + .btn { - pointer-events: none; - -webkit-filter: 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 { - -webkit-box-shadow: 0 0 0 1px hsl(0, 0%, 100%), 0 0 0 0.25rem rgba(1, 1, 86, 0.25); - box-shadow: 0 0 0 1px hsl(0, 0%, 100%), 0 0 0 0.25rem rgba(1, 1, 86, 0.25); -} -.form-range:focus::-moz-range-thumb { - box-shadow: 0 0 0 1px hsl(0, 0%, 100%), 0 0 0 0.25rem rgba(1, 1, 86, 0.25); -} -.form-range::-moz-focus-outer { - border: 0; -} -.form-range::-webkit-slider-thumb { - width: 1rem; - height: 1rem; - margin-top: -0.25rem; - background-color: hsl(240, 98%, 17%); - border: 0; - border-radius: 1rem; - -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-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; - transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-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: #b8bfcc; -} -.form-range::-webkit-slider-runnable-track { - width: 100%; - height: 0.5rem; - color: transparent; - cursor: pointer; - background-color: hsl(210, 14%, 89%); - border-color: transparent; - border-radius: 1rem; -} -.form-range::-moz-range-thumb { - width: 1rem; - height: 1rem; - background-color: hsl(240, 98%, 17%); - 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: #b8bfcc; -} -.form-range::-moz-range-track { - width: 100%; - height: 0.5rem; - color: transparent; - cursor: pointer; - background-color: hsl(210, 14%, 89%); - border-color: transparent; - border-radius: 1rem; -} -.form-range:disabled { - pointer-events: none; -} -.form-range:disabled::-webkit-slider-thumb { - background-color: hsl(210, 11%, 71%); -} -.form-range:disabled::-moz-range-thumb { - background-color: hsl(210, 11%, 71%); -} - -.form-floating { - position: relative; -} -.form-floating > .form-control, -.form-floating > .form-control-plaintext, -.form-floating > .form-select, -.form-floating > .custom-select { - height: calc(3.5rem + 2px); - line-height: 1.25; -} -.form-floating > label { - position: absolute; - top: 0; - right: 0; - width: 100%; - height: 100%; - padding: 1rem 1rem; - overflow: hidden; - text-align: start; - -o-text-overflow: ellipsis; - text-overflow: ellipsis; - white-space: nowrap; - pointer-events: none; - border: 1px solid transparent; - -webkit-transform-origin: 100% 0; - transform-origin: 100% 0; - -webkit-transition: opacity 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out; - transition: opacity 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out; - -o-transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out; - transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out; - transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out; -} -@media (prefers-reduced-motion: reduce) { - .form-floating > label { - -webkit-transition: none; - -o-transition: none; - transition: none; - } -} -.form-floating > .form-control, -.form-floating > .form-control-plaintext { - padding: 1rem 1rem; -} -.form-floating > .form-control::-webkit-input-placeholder, .form-floating > .form-control-plaintext::-webkit-input-placeholder { - color: transparent; -} -.form-floating > .form-control::-moz-placeholder, .form-floating > .form-control-plaintext::-moz-placeholder { - color: transparent; -} -.form-floating > .form-control:-ms-input-placeholder, .form-floating > .form-control-plaintext:-ms-input-placeholder { - color: transparent; -} -.form-floating > .form-control::-ms-input-placeholder, .form-floating > .form-control-plaintext::-ms-input-placeholder { - color: transparent; -} -.form-floating > .form-control::placeholder, -.form-floating > .form-control-plaintext::placeholder { - color: transparent; -} -.form-floating > .form-control:not(:-moz-placeholder-shown), .form-floating > .form-control-plaintext:not(:-moz-placeholder-shown) { - padding-top: 1.625rem; - padding-bottom: 0.625rem; -} -.form-floating > .form-control:not(:-ms-input-placeholder), .form-floating > .form-control-plaintext:not(:-ms-input-placeholder) { - padding-top: 1.625rem; - padding-bottom: 0.625rem; -} -.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown), -.form-floating > .form-control-plaintext:focus, -.form-floating > .form-control-plaintext:not(:placeholder-shown) { - padding-top: 1.625rem; - padding-bottom: 0.625rem; -} -.form-floating > .form-control:-webkit-autofill, -.form-floating > .form-control-plaintext:-webkit-autofill { - padding-top: 1.625rem; - padding-bottom: 0.625rem; -} -.form-floating > .form-select, .form-floating > .custom-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:not(:-ms-input-placeholder) ~ 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-control-plaintext ~ label, -.form-floating > .form-select ~ label, -.form-floating > .custom-select ~ label { - opacity: 0.65; - -webkit-transform: scale(0.85) translateY(-0.5rem) translateX(-0.15rem); - transform: scale(0.85) translateY(-0.5rem) translateX(-0.15rem); -} -.form-floating > .form-control:-webkit-autofill ~ label { - opacity: 0.65; - -webkit-transform: scale(0.85) translateY(-0.5rem) translateX(-0.15rem); - transform: scale(0.85) translateY(-0.5rem) translateX(-0.15rem); -} -.form-floating > .form-control-plaintext ~ label { - border-width: 1px 0; -} - -.input-group { - position: relative; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - width: 100%; -} -.input-group > .form-control, -.input-group > .form-select, -.input-group > .custom-select, -.input-group > .form-floating { - position: relative; - -webkit-box-flex: 1; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - width: 1%; - min-width: 0; -} -.input-group > .form-control:focus, -.input-group > .form-select:focus, -.input-group > .custom-select:focus, -.input-group > .form-floating:focus-within { - z-index: 5; -} -.input-group .btn { - position: relative; - z-index: 2; -} -.input-group .btn:focus { - z-index: 5; -} - -.input-group-text { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding: 0.6rem 1rem; - font-size: 1rem; - font-weight: 400; - line-height: 1.5; - color: hsl(210, 11%, 15%); - text-align: center; - white-space: nowrap; - background-color: hsl(210, 16%, 93%); - border: 1px solid hsl(210, 14%, 83%); - border-radius: 0.25rem; -} - -.input-group-lg > .form-control, -.input-group-lg > .form-select, -.input-group-lg > .custom-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 > .custom-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-lg > .custom-select, -.input-group-sm > .form-select, -.input-group-sm > .custom-select { - padding-left: 4rem; -} - -.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating), -.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3), -.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control, -.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select, -.input-group:not(.has-validation) > .form-floating:not(:last-child) > .custom-select { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} -.input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating), -.input-group.has-validation > .dropdown-toggle:nth-last-child(n+4), -.input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-control, -.input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-select, -.input-group.has-validation > .form-floating:nth-last-child(n+3) > .custom-select { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} -.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { - margin-right: -1px; - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} -.input-group > .form-floating:not(:first-child) > .form-control, -.input-group > .form-floating:not(:first-child) > .form-select, -.input-group > .form-floating:not(:first-child) > .custom-select { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.valid-feedback { - display: none; - width: 100%; - margin-top: 0.25rem; - font-size: 0.875em; - color: hsl(120, 32%, 39%); -} - -.valid-tooltip { - position: absolute; - top: 100%; - z-index: 5; - display: none; - max-width: 100%; - padding: 0.25rem 0.5rem; - margin-top: 0.1rem; - font-size: 0.875rem; - color: hsl(0, 0%, 100%); - background-color: rgba(68, 131, 68, 0.9); - border-radius: 0.25rem; -} - -.was-validated :valid ~ .valid-feedback, -.was-validated :valid ~ .valid-tooltip, -.is-valid ~ .valid-feedback, -.is-valid ~ .valid-tooltip { - display: block; -} - -.was-validated .form-control:valid, .form-control.is-valid { - border-color: hsl(120, 32%, 39%); - padding-left: calc(1.5em + 1.2rem); - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='hsl%28120, 32%, 39%%29' d='M2.3 6.73.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: left calc(0.375em + 0.3rem) center; - background-size: calc(0.75em + 0.6rem) calc(0.75em + 0.6rem); -} -.was-validated .form-control:valid:focus, .form-control.is-valid:focus { - border-color: hsl(120, 32%, 39%); - -webkit-box-shadow: 0 0 0 0.25rem rgba(68, 131, 68, 0.25); - box-shadow: 0 0 0 0.25rem rgba(68, 131, 68, 0.25); -} +[dir="rtl"] .form-check-inline .form-check-input~.invalid-feedback { -.was-validated textarea.form-control:valid, textarea.form-control.is-valid { - padding-left: calc(1.5em + 1.2rem); - background-position: top calc(0.375em + 0.3rem) left calc(0.375em + 0.3rem); -} - -.was-validated .form-select:valid, .was-validated .custom-select:valid, .form-select.is-valid, .is-valid.custom-select { - border-color: hsl(120, 32%, 39%); -} -.was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .custom-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .was-validated .custom-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .is-valid.custom-select:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"], .is-valid.custom-select:not([multiple])[size="1"] { - padding-left: 5.5rem; - background-image: url("../images/select-bg.svg"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='hsl%28120, 32%, 39%%29' d='M2.3 6.73.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: left 1rem center, center left 3rem; - background-size: 116rem, calc(0.75em + 0.6rem) calc(0.75em + 0.6rem); -} -.was-validated .form-select:valid:focus, .was-validated .custom-select:valid:focus, .form-select.is-valid:focus, .is-valid.custom-select:focus { - border-color: hsl(120, 32%, 39%); - -webkit-box-shadow: 0 0 0 0.25rem rgba(68, 131, 68, 0.25); - box-shadow: 0 0 0 0.25rem rgba(68, 131, 68, 0.25); + margin-left: 0.5rem; } -.was-validated .form-control-color:valid, .form-control-color.is-valid { - width: calc(3rem + calc(1.5em + 1.2rem)); +[dir="rtl"] .dropdown-toggle::after { + + display: inline-block; + margin-left: 0.255rem; + vertical-align: 0.255rem; + content: ""; + border-top: 0.3rem solid; + border-right: 0.3rem solid transparent; + border-bottom: 0; + border-left: 0.3rem solid transparent; } -.was-validated .form-check-input:valid, .form-check-input.is-valid { - border-color: hsl(120, 32%, 39%); +[dir="rtl"] .dropdown-toggle:empty::after { + + margin-left: 0; } -.was-validated .form-check-input:valid:checked, .form-check-input.is-valid:checked { - background-color: hsl(120, 32%, 39%); + +[dir="rtl"] .dropdown-menu { + + --dropdown-zindex: 1000; + --dropdown-min-width: 10rem; + --dropdown-padding-x: 0; + --dropdown-padding-y: 0.5rem; + --dropdown-spacer: 0.125rem; + --dropdown-font-size: 1rem; + --dropdown-color: var(--body-color); + --dropdown-bg: hsl(0, 0%, 100%); + --dropdown-border-color: var(--border-color-translucent); + --dropdown-border-radius: 0.25rem; + --dropdown-border-width: 1px; + --dropdown-inner-border-radius: calc(0.25rem - 1px); + --dropdown-divider-bg: var(--border-color-translucent); + --dropdown-divider-margin-y: 0.5rem; + --dropdown-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); + --dropdown-link-color: var(--body-color); + --dropdown-link-active-color: #1f2226; + --dropdown-link-active-bg: var(--secondary-bg); + --dropdown-link-active-color: var(--white); + --dropdown-link-active-bg: hsl(240, 98%, 17%); + --dropdown-link-disabled-color: hsl(210, 11%, 71%); + --dropdown-item-padding-x: 1rem; + --dropdown-item-padding-y: 0.25rem; + --dropdown-header-color: var(--secondary-color); + --dropdown-header-padding-x: 1rem; + --dropdown-header-padding-y: 0.5rem; + position: absolute; + z-index: var(--dropdown-zindex); + display: none; + min-width: var(--dropdown-min-width); + padding: var(--dropdown-padding-y) var(--dropdown-padding-x); + margin: 0; + font-size: var(--dropdown-font-size); + color: var(--dropdown-color); + text-align: left; + list-style: none; + background-color: var(--dropdown-bg); + background-clip: padding-box; + border: var(--dropdown-border-width) solid var(--dropdown-border-color); + border-radius: var(--dropdown-border-radius); } -.was-validated .form-check-input:valid:focus, .form-check-input.is-valid:focus { - -webkit-box-shadow: 0 0 0 0.25rem rgba(68, 131, 68, 0.25); - box-shadow: 0 0 0 0.25rem rgba(68, 131, 68, 0.25); + +[dir="rtl"] .dropdown-menu[data-bs-popper] { + + top: 100%; + right: 0; + margin-top: var(--dropdown-spacer); } -.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label { - color: hsl(120, 32%, 39%); + +[dir="rtl"] .dropdown-menu-start[data-bs-popper] { + + left: auto; + right: 0; } -.form-check-inline .form-check-input ~ .valid-feedback { - margin-right: 0.5em; +[dir="rtl"] .dropdown-menu-end[data-bs-popper] { + + left: 0; + right: auto; } -.was-validated .input-group > .form-control:not(:focus):valid, .input-group > .form-control:not(:focus).is-valid, -.was-validated .input-group > .form-select:not(:focus):valid, -.was-validated .input-group > .custom-select:not(:focus):valid, -.input-group > .form-select:not(:focus).is-valid, -.input-group > .custom-select:not(:focus).is-valid, -.was-validated .input-group > .form-floating:not(:focus-within):valid, -.input-group > .form-floating:not(:focus-within).is-valid { - z-index: 3; +[dir="rtl"] .dropdown-menu-sm-start[data-bs-popper] { + + left: auto; + right: 0; + } -.invalid-feedback { - display: none; - width: 100%; - margin-top: 0.25rem; - font-size: 0.875em; - color: hsl(3, 75%, 37%); +[dir="rtl"] .dropdown-menu-sm-end[data-bs-popper] { + + left: 0; + right: auto; + } -.invalid-tooltip { - position: absolute; - top: 100%; - z-index: 5; - display: none; - max-width: 100%; - padding: 0.25rem 0.5rem; - margin-top: 0.1rem; - font-size: 0.875rem; - color: hsl(0, 0%, 100%); - background-color: rgba(165, 31, 24, 0.9); - border-radius: 0.25rem; +[dir="rtl"] .dropdown-menu-md-start[data-bs-popper] { + + left: auto; + right: 0; + } -.was-validated :invalid ~ .invalid-feedback, -.was-validated :invalid ~ .invalid-tooltip, -.is-invalid ~ .invalid-feedback, -.is-invalid ~ .invalid-tooltip { - display: block; -} - -.was-validated .form-control:invalid, .form-control.is-invalid { - border-color: hsl(3, 75%, 37%); - padding-left: calc(1.5em + 1.2rem); - 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='hsl%283, 75%, 37%%29'%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='hsl%283, 75%, 37%%29' stroke='none'/%3e%3c/svg%3e"); - background-repeat: no-repeat; - background-position: left calc(0.375em + 0.3rem) center; - background-size: calc(0.75em + 0.6rem) calc(0.75em + 0.6rem); -} -.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus { - border-color: hsl(3, 75%, 37%); - -webkit-box-shadow: 0 0 0 0.25rem rgba(165, 31, 24, 0.25); - box-shadow: 0 0 0 0.25rem rgba(165, 31, 24, 0.25); -} - -.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid { - padding-left: calc(1.5em + 1.2rem); - background-position: top calc(0.375em + 0.3rem) left calc(0.375em + 0.3rem); -} - -.was-validated .form-select:invalid, .was-validated .custom-select:invalid, .form-select.is-invalid, .is-invalid.custom-select { - border-color: hsl(3, 75%, 37%); -} -.was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .custom-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .was-validated .custom-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .is-invalid.custom-select:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"], .is-invalid.custom-select:not([multiple])[size="1"] { - padding-left: 5.5rem; - background-image: url("../images/select-bg.svg"), 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='hsl%283, 75%, 37%%29'%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='hsl%283, 75%, 37%%29' stroke='none'/%3e%3c/svg%3e"); - background-position: left 1rem center, center left 3rem; - background-size: 116rem, calc(0.75em + 0.6rem) calc(0.75em + 0.6rem); -} -.was-validated .form-select:invalid:focus, .was-validated .custom-select:invalid:focus, .form-select.is-invalid:focus, .is-invalid.custom-select:focus { - border-color: hsl(3, 75%, 37%); - -webkit-box-shadow: 0 0 0 0.25rem rgba(165, 31, 24, 0.25); - box-shadow: 0 0 0 0.25rem rgba(165, 31, 24, 0.25); -} - -.was-validated .form-control-color:invalid, .form-control-color.is-invalid { - width: calc(3rem + calc(1.5em + 1.2rem)); -} - -.was-validated .form-check-input:invalid, .form-check-input.is-invalid { - border-color: hsl(3, 75%, 37%); -} -.was-validated .form-check-input:invalid:checked, .form-check-input.is-invalid:checked { - background-color: hsl(3, 75%, 37%); -} -.was-validated .form-check-input:invalid:focus, .form-check-input.is-invalid:focus { - -webkit-box-shadow: 0 0 0 0.25rem rgba(165, 31, 24, 0.25); - box-shadow: 0 0 0 0.25rem rgba(165, 31, 24, 0.25); -} -.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label { - color: hsl(3, 75%, 37%); -} - -.form-check-inline .form-check-input ~ .invalid-feedback { - margin-right: 0.5em; -} - -.was-validated .input-group > .form-control:not(:focus):invalid, .input-group > .form-control:not(:focus).is-invalid, -.was-validated .input-group > .form-select:not(:focus):invalid, -.was-validated .input-group > .custom-select:not(:focus):invalid, -.input-group > .form-select:not(:focus).is-invalid, -.input-group > .custom-select:not(:focus).is-invalid, -.was-validated .input-group > .form-floating:not(:focus-within):invalid, -.input-group > .form-floating:not(:focus-within).is-invalid { - z-index: 4; -} - -.btn { - --btn-padding-x: 1rem; - --btn-padding-y: 0.6rem; - --btn-font-family: ; - --btn-font-size: 1rem; - --btn-font-weight: 400; - --btn-line-height: 1.5; - --btn-color: hsl(210, 11%, 15%); - --btn-bg: transparent; - --btn-border-width: 1px; - --btn-border-color: transparent; - --btn-border-radius: 0.25rem; - --btn-hover-border-color: transparent; - --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); - --btn-disabled-opacity: 0.65; - --btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5); - display: inline-block; - padding: var(--btn-padding-y) var(--btn-padding-x); - font-family: var(--btn-font-family); - font-size: var(--btn-font-size); - font-weight: var(--btn-font-weight); - line-height: var(--btn-line-height); - color: var(--btn-color); - 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; - border: var(--btn-border-width) solid var(--btn-border-color); - border-radius: var(--btn-border-radius); - background-color: var(--btn-bg); - -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-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, -webkit-box-shadow 0.15s ease-in-out; - -o-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; - 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, -webkit-box-shadow 0.15s ease-in-out; -} -@media (prefers-reduced-motion: reduce) { - .btn { - -webkit-transition: none; - -o-transition: none; - transition: none; - } -} -.btn:hover { - color: var(--btn-hover-color); - background-color: var(--btn-hover-bg); - border-color: var(--btn-hover-border-color); -} -.btn-check + .btn:hover { - color: var(--btn-color); - background-color: var(--btn-bg); - border-color: var(--btn-border-color); -} -.btn:focus-visible { - color: var(--btn-hover-color); - background-color: var(--btn-hover-bg); - border-color: var(--btn-hover-border-color); - outline: 0; - -webkit-box-shadow: var(--btn-focus-box-shadow); - box-shadow: var(--btn-focus-box-shadow); -} -.btn-check:focus-visible + .btn { - border-color: var(--btn-hover-border-color); - outline: 0; - -webkit-box-shadow: var(--btn-focus-box-shadow); - box-shadow: var(--btn-focus-box-shadow); -} -.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show { - color: var(--btn-active-color); - background-color: var(--btn-active-bg); - border-color: var(--btn-active-border-color); -} -.btn-check:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible { - -webkit-box-shadow: var(--btn-focus-box-shadow); - box-shadow: var(--btn-focus-box-shadow); -} -.btn:disabled, .btn.disabled, fieldset:disabled .btn { - color: var(--btn-disabled-color); - pointer-events: none; - background-color: var(--btn-disabled-bg); - border-color: var(--btn-disabled-border-color); - opacity: var(--btn-disabled-opacity); -} - -.btn-primary { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(240, 98%, 17%); - --btn-border-color: hsl(240, 98%, 17%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #010149; - --btn-hover-border-color: #010145; - --btn-focus-shadow-rgb: 39, 39, 111; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #010145; - --btn-active-border-color: #010141; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(240, 98%, 17%); - --btn-disabled-border-color: hsl(240, 98%, 17%); -} - -.btn-secondary { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(210, 7%, 46%); - --btn-border-color: hsl(210, 7%, 46%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #5d636b; - --btn-hover-border-color: #575e65; - --btn-focus-shadow-rgb: 131, 138, 145; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #575e65; - --btn-active-border-color: #52585f; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(210, 7%, 46%); - --btn-disabled-border-color: hsl(210, 7%, 46%); -} - -.btn-success { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(120, 32%, 39%); - --btn-border-color: hsl(120, 32%, 39%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #3a6f3a; - --btn-hover-border-color: #366936; - --btn-focus-shadow-rgb: 96, 150, 96; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #366936; - --btn-active-border-color: #336233; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(120, 32%, 39%); - --btn-disabled-border-color: hsl(120, 32%, 39%); -} - -.btn-info { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(207, 49%, 37%); - --btn-border-color: hsl(207, 49%, 37%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #295478; - --btn-hover-border-color: #264f71; - --btn-focus-shadow-rgb: 79, 122, 158; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #264f71; - --btn-active-border-color: #244a6a; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(207, 49%, 37%); - --btn-disabled-border-color: hsl(207, 49%, 37%); -} - -.btn-warning { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(34, 100%, 34%); - --btn-border-color: hsl(34, 100%, 34%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #935300; - --btn-hover-border-color: #8a4e00; - --btn-focus-shadow-rgb: 185, 122, 38; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #8a4e00; - --btn-active-border-color: #824a00; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(34, 100%, 34%); - --btn-disabled-border-color: hsl(34, 100%, 34%); -} - -.btn-danger { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(3, 75%, 37%); - --btn-border-color: hsl(3, 75%, 37%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #8c1a14; - --btn-hover-border-color: #841913; - --btn-focus-shadow-rgb: 179, 65, 59; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #841913; - --btn-active-border-color: #7c1712; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(3, 75%, 37%); - --btn-disabled-border-color: hsl(3, 75%, 37%); -} - -.btn-light { - --btn-color: hsl(0, 0%, 0%); - --btn-bg: hsl(210, 17%, 98%); - --btn-border-color: hsl(210, 17%, 98%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: #d4d5d5; - --btn-hover-border-color: #c7c8c9; - --btn-focus-shadow-rgb: 212, 213, 213; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: #c7c8c9; - --btn-active-border-color: #bbbcbc; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 0%); - --btn-disabled-bg: hsl(210, 17%, 98%); - --btn-disabled-border-color: hsl(210, 17%, 98%); -} - -.btn-dark { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(210, 10%, 23%); - --btn-border-color: hsl(210, 10%, 23%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #53585e; - --btn-hover-border-color: #494f54; - --btn-focus-shadow-rgb: 83, 88, 94; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #5d6267; - --btn-active-border-color: #494f54; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(210, 10%, 23%); - --btn-disabled-border-color: hsl(210, 10%, 23%); -} - -.btn-outline-primary { - --btn-color: hsl(240, 98%, 17%); - --btn-border-color: hsl(240, 98%, 17%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(240, 98%, 17%); - --btn-hover-border-color: hsl(240, 98%, 17%); - --btn-focus-shadow-rgb: 1, 1, 86; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(240, 98%, 17%); - --btn-active-border-color: hsl(240, 98%, 17%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(240, 98%, 17%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(240, 98%, 17%); - --gradient: none; -} - -.btn-outline-secondary { - --btn-color: hsl(210, 7%, 46%); - --btn-border-color: hsl(210, 7%, 46%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(210, 7%, 46%); - --btn-hover-border-color: hsl(210, 7%, 46%); - --btn-focus-shadow-rgb: 109, 117, 126; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(210, 7%, 46%); - --btn-active-border-color: hsl(210, 7%, 46%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(210, 7%, 46%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(210, 7%, 46%); - --gradient: none; -} - -.btn-outline-success { - --btn-color: hsl(120, 32%, 39%); - --btn-border-color: hsl(120, 32%, 39%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(120, 32%, 39%); - --btn-hover-border-color: hsl(120, 32%, 39%); - --btn-focus-shadow-rgb: 68, 131, 68; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(120, 32%, 39%); - --btn-active-border-color: hsl(120, 32%, 39%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(120, 32%, 39%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(120, 32%, 39%); - --gradient: none; -} - -.btn-outline-info { - --btn-color: hsl(207, 49%, 37%); - --btn-border-color: hsl(207, 49%, 37%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(207, 49%, 37%); - --btn-hover-border-color: hsl(207, 49%, 37%); - --btn-focus-shadow-rgb: 48, 99, 141; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(207, 49%, 37%); - --btn-active-border-color: hsl(207, 49%, 37%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(207, 49%, 37%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(207, 49%, 37%); - --gradient: none; -} - -.btn-outline-warning { - --btn-color: hsl(34, 100%, 34%); - --btn-border-color: hsl(34, 100%, 34%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(34, 100%, 34%); - --btn-hover-border-color: hsl(34, 100%, 34%); - --btn-focus-shadow-rgb: 173, 98, 0; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(34, 100%, 34%); - --btn-active-border-color: hsl(34, 100%, 34%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(34, 100%, 34%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(34, 100%, 34%); - --gradient: none; -} - -.btn-outline-danger { - --btn-color: hsl(3, 75%, 37%); - --btn-border-color: hsl(3, 75%, 37%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(3, 75%, 37%); - --btn-hover-border-color: hsl(3, 75%, 37%); - --btn-focus-shadow-rgb: 165, 31, 24; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(3, 75%, 37%); - --btn-active-border-color: hsl(3, 75%, 37%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(3, 75%, 37%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(3, 75%, 37%); - --gradient: none; -} - -.btn-outline-light { - --btn-color: hsl(210, 17%, 98%); - --btn-border-color: hsl(210, 17%, 98%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(210, 17%, 98%); - --btn-hover-border-color: hsl(210, 17%, 98%); - --btn-focus-shadow-rgb: 249, 250, 251; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(210, 17%, 98%); - --btn-active-border-color: hsl(210, 17%, 98%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(210, 17%, 98%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(210, 17%, 98%); - --gradient: none; -} - -.btn-outline-dark { - --btn-color: hsl(210, 10%, 23%); - --btn-border-color: hsl(210, 10%, 23%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(210, 10%, 23%); - --btn-hover-border-color: hsl(210, 10%, 23%); - --btn-focus-shadow-rgb: 53, 59, 65; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(210, 10%, 23%); - --btn-active-border-color: hsl(210, 10%, 23%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(210, 10%, 23%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(210, 10%, 23%); - --gradient: none; -} - -.btn-link { - --btn-font-weight: 400; - --btn-color: var(--link-color); - --btn-bg: transparent; - --btn-border-color: transparent; - --btn-hover-color: var(--link-hover-color); - --btn-hover-border-color: transparent; - --btn-active-color: var(--link-hover-color); - --btn-active-border-color: transparent; - --btn-disabled-color: hsl(210, 7%, 46%); - --btn-disabled-border-color: transparent; - --btn-box-shadow: none; - --btn-focus-shadow-rgb: 39, 39, 111; - text-decoration: underline; -} -.btn-link:focus-visible { - color: var(--btn-color); -} -.btn-link:hover { - color: var(--btn-hover-color); -} - -.btn-lg, .btn-group-lg > .btn { - --btn-padding-y: 0.5rem; - --btn-padding-x: 1rem; - --btn-font-size: 1.25rem; - --btn-border-radius: 0.3rem; -} - -.btn-sm, .btn-group-sm > .btn { - --btn-padding-y: 0.25rem; - --btn-padding-x: 0.5rem; - --btn-font-size: 0.875rem; - --btn-border-radius: 0.2rem; -} - -.fade { - -webkit-transition: opacity 0.15s linear; - -o-transition: opacity 0.15s linear; - transition: opacity 0.15s linear; -} -@media (prefers-reduced-motion: reduce) { - .fade { - -webkit-transition: none; - -o-transition: none; - transition: none; - } -} -.fade:not(.show) { - opacity: 0; -} - -.collapse:not(.show) { - display: none; -} - -.collapsing { - height: 0; - overflow: hidden; - -webkit-transition: height 0.35s ease; - -o-transition: height 0.35s ease; - transition: height 0.35s ease; -} -@media (prefers-reduced-motion: reduce) { - .collapsing { - -webkit-transition: none; - -o-transition: none; - transition: none; - } -} -.collapsing.collapse-horizontal { - width: 0; - height: auto; - -webkit-transition: width 0.35s ease; - -o-transition: width 0.35s ease; - transition: width 0.35s ease; -} -@media (prefers-reduced-motion: reduce) { - .collapsing.collapse-horizontal { - -webkit-transition: none; - -o-transition: none; - transition: none; - } -} - -.dropup, -.dropend, -.dropdown, -.dropstart, -.dropup-center, -.dropdown-center { - position: relative; -} - -.dropdown-toggle { - white-space: nowrap; -} -.dropdown-toggle::after { - display: inline-block; - margin-right: 0.255em; - vertical-align: 0.255em; - content: ""; - border-top: 0.3em solid; - border-left: 0.3em solid transparent; - border-bottom: 0; - border-right: 0.3em solid transparent; -} -.dropdown-toggle:empty::after { - margin-right: 0; -} - -.dropdown-menu { - --dropdown-zindex: 1000; - --dropdown-min-width: 10rem; - --dropdown-padding-x: 0; - --dropdown-padding-y: 0.5rem; - --dropdown-spacer: 0.125rem; - --dropdown-font-size: 1rem; - --dropdown-color: hsl(210, 11%, 15%); - --dropdown-bg: hsl(0, 0%, 100%); - --dropdown-border-color: var(--border-color-translucent); - --dropdown-border-radius: 0.25rem; - --dropdown-border-width: 1px; - --dropdown-inner-border-radius: calc(0.25rem - 1px); - --dropdown-divider-bg: var(--border-color-translucent); - --dropdown-divider-margin-y: 0.5rem; - --dropdown-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); - --dropdown-link-color: hsl(210, 11%, 15%); - --dropdown-link-hover-color: #1f2226; - --dropdown-link-hover-bg: hsl(210, 16%, 93%); - --dropdown-link-active-color: hsl(0, 0%, 100%); - --dropdown-link-active-bg: hsl(240, 98%, 17%); - --dropdown-link-disabled-color: hsl(210, 11%, 71%); - --dropdown-item-padding-x: 1rem; - --dropdown-item-padding-y: 0.25rem; - --dropdown-header-color: hsl(210, 7%, 46%); - --dropdown-header-padding-x: 1rem; - --dropdown-header-padding-y: 0.5rem; - position: absolute; - z-index: var(--dropdown-zindex); - display: none; - min-width: var(--dropdown-min-width); - padding: var(--dropdown-padding-y) var(--dropdown-padding-x); - margin: 0; - font-size: var(--dropdown-font-size); - color: var(--dropdown-color); - text-align: right; - list-style: none; - background-color: var(--dropdown-bg); - background-clip: padding-box; - border: var(--dropdown-border-width) solid var(--dropdown-border-color); - border-radius: var(--dropdown-border-radius); -} -.dropdown-menu[data-bs-popper] { - top: 100%; - right: 0; - margin-top: var(--dropdown-spacer); -} - -.dropdown-menu-start { - --bs-position: start; -} -.dropdown-menu-start[data-bs-popper] { - left: auto; - right: 0; -} - -.dropdown-menu-end { - --bs-position: end; -} -.dropdown-menu-end[data-bs-popper] { - left: 0; - right: auto; -} - -@media (min-width: 576px) { - .dropdown-menu-sm-start { - --bs-position: start; - } - .dropdown-menu-sm-start[data-bs-popper] { - left: auto; - right: 0; - } - .dropdown-menu-sm-end { - --bs-position: end; - } - .dropdown-menu-sm-end[data-bs-popper] { - left: 0; - right: auto; - } -} -@media (min-width: 768px) { - .dropdown-menu-md-start { - --bs-position: start; - } - .dropdown-menu-md-start[data-bs-popper] { - left: auto; - right: 0; - } - .dropdown-menu-md-end { - --bs-position: end; - } - .dropdown-menu-md-end[data-bs-popper] { - left: 0; - right: auto; - } -} -@media (min-width: 992px) { - .dropdown-menu-lg-start { - --bs-position: start; - } - .dropdown-menu-lg-start[data-bs-popper] { - left: auto; - right: 0; - } - .dropdown-menu-lg-end { - --bs-position: end; - } - .dropdown-menu-lg-end[data-bs-popper] { - left: 0; - right: auto; - } -} -@media (min-width: 1200px) { - .dropdown-menu-xl-start { - --bs-position: start; - } - .dropdown-menu-xl-start[data-bs-popper] { - left: auto; - right: 0; - } - .dropdown-menu-xl-end { - --bs-position: end; - } - .dropdown-menu-xl-end[data-bs-popper] { - left: 0; - right: auto; - } -} -@media (min-width: 1400px) { - .dropdown-menu-xxl-start { - --bs-position: start; - } - .dropdown-menu-xxl-start[data-bs-popper] { - left: auto; - right: 0; - } - .dropdown-menu-xxl-end { - --bs-position: end; - } - .dropdown-menu-xxl-end[data-bs-popper] { - left: 0; - right: auto; - } -} -.dropup .dropdown-menu[data-bs-popper] { - top: auto; - bottom: 100%; - margin-top: 0; - margin-bottom: var(--dropdown-spacer); -} -.dropup .dropdown-toggle::after { - display: inline-block; - margin-right: 0.255em; - vertical-align: 0.255em; - content: ""; - border-top: 0; - border-left: 0.3em solid transparent; - border-bottom: 0.3em solid; - border-right: 0.3em solid transparent; -} -.dropup .dropdown-toggle:empty::after { - margin-right: 0; -} - -.dropend .dropdown-menu[data-bs-popper] { - top: 0; - left: auto; - right: 100%; - margin-top: 0; - margin-right: var(--dropdown-spacer); -} -.dropend .dropdown-toggle::after { - display: inline-block; - margin-right: 0.255em; - vertical-align: 0.255em; - content: ""; - border-top: 0.3em solid transparent; - border-left: 0; - border-bottom: 0.3em solid transparent; - border-right: 0.3em solid; -} -.dropend .dropdown-toggle:empty::after { - margin-right: 0; -} -.dropend .dropdown-toggle::after { - vertical-align: 0; -} - -.dropstart .dropdown-menu[data-bs-popper] { - top: 0; - left: 100%; - right: auto; - margin-top: 0; - margin-left: var(--dropdown-spacer); -} -.dropstart .dropdown-toggle::after { - display: inline-block; - margin-right: 0.255em; - vertical-align: 0.255em; - content: ""; -} -.dropstart .dropdown-toggle::after { - display: none; -} -.dropstart .dropdown-toggle::before { - display: inline-block; - margin-left: 0.255em; - vertical-align: 0.255em; - content: ""; - border-top: 0.3em solid transparent; - border-left: 0.3em solid; - border-bottom: 0.3em solid transparent; -} -.dropstart .dropdown-toggle:empty::after { - margin-right: 0; -} -.dropstart .dropdown-toggle::before { - vertical-align: 0; -} - -.dropdown-divider { - height: 0; - margin: var(--dropdown-divider-margin-y) 0; - overflow: hidden; - border-top: 1px solid var(--dropdown-divider-bg); - opacity: 1; -} - -.dropdown-item { - display: block; - width: 100%; - padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x); - clear: both; - font-weight: 400; - color: var(--dropdown-link-color); - text-align: inherit; - text-decoration: none; - white-space: nowrap; - background-color: transparent; - border: 0; -} -.dropdown-item:hover, .dropdown-item:focus { - color: var(--dropdown-link-hover-color); - background-color: var(--dropdown-link-hover-bg); -} -.dropdown-item.active, .dropdown-item:active { - color: var(--dropdown-link-active-color); - text-decoration: none; - background-color: var(--dropdown-link-active-bg); -} -.dropdown-item.disabled, .dropdown-item:disabled { - color: var(--dropdown-link-disabled-color); - pointer-events: none; - background-color: transparent; -} - -.dropdown-menu.show { - display: block; -} - -.dropdown-header { - display: block; - padding: var(--dropdown-header-padding-y) var(--dropdown-header-padding-x); - margin-bottom: 0; - font-size: 0.875rem; - color: var(--dropdown-header-color); - white-space: nowrap; -} - -.dropdown-item-text { - display: block; - padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x); - color: var(--dropdown-link-color); -} - -.dropdown-menu-dark { - --dropdown-color: hsl(210, 14%, 89%); - --dropdown-bg: hsl(210, 10%, 23%); - --dropdown-border-color: var(--border-color-translucent); - --dropdown-box-shadow: ; - --dropdown-link-color: hsl(210, 14%, 89%); - --dropdown-link-hover-color: hsl(0, 0%, 100%); - --dropdown-divider-bg: var(--border-color-translucent); - --dropdown-link-hover-bg: rgba(255, 255, 255, 0.15); - --dropdown-link-active-color: hsl(0, 0%, 100%); - --dropdown-link-active-bg: hsl(240, 98%, 17%); - --dropdown-link-disabled-color: hsl(210, 11%, 71%); - --dropdown-header-color: hsl(210, 11%, 71%); -} - -.btn-group, -.btn-group-vertical { - position: relative; - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; - vertical-align: middle; -} -.btn-group > .btn, -.btn-group-vertical > .btn { - position: relative; - -webkit-box-flex: 1; - -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 > .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 { - z-index: 1; -} - -.btn-toolbar { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; -} -.btn-toolbar .input-group { - width: auto; -} - -.btn-group { - border-radius: 0.25rem; -} -.btn-group > :not(.btn-check:first-child) + .btn, -.btn-group > .btn-group:not(:first-child) { - margin-right: -1px; -} -.btn-group > .btn:not(:last-child):not(.dropdown-toggle), -.btn-group > .btn.dropdown-toggle-split:first-child, -.btn-group > .btn-group:not(:last-child) > .btn { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} -.btn-group > .btn:nth-child(n+3), -.btn-group > :not(.btn-check) + .btn, -.btn-group > .btn-group:not(:first-child) > .btn { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.dropdown-toggle-split { - padding-left: 0.75rem; - padding-right: 0.75rem; -} -.dropdown-toggle-split::after, .dropup .dropdown-toggle-split::after, .dropend .dropdown-toggle-split::after { - margin-right: 0; -} -.dropstart .dropdown-toggle-split::before { - margin-left: 0; -} - -.btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split { - padding-left: 0.375rem; - padding-right: 0.375rem; -} - -.btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split { - padding-left: 0.75rem; - padding-right: 0.75rem; -} - -.btn-group-vertical { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; - -webkit-box-pack: center; - -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-left-radius: 0; - border-bottom-right-radius: 0; -} -.btn-group-vertical > .btn ~ .btn, -.btn-group-vertical > .btn-group:not(:first-child) > .btn { - border-top-right-radius: 0; - border-top-left-radius: 0; -} - -.nav { - --nav-link-padding-x: 1rem; - --nav-link-padding-y: 0.5rem; - --nav-link-font-weight: ; - --nav-link-color: var(--link-color); - --nav-link-hover-color: var(--link-hover-color); - --nav-link-disabled-color: hsl(210, 7%, 46%); - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - padding-right: 0; - margin-bottom: 0; - list-style: none; -} - -.nav-link { - display: block; - padding: var(--nav-link-padding-y) var(--nav-link-padding-x); - font-size: var(--nav-link-font-size); - font-weight: var(--nav-link-font-weight); - color: var(--nav-link-color); - text-decoration: none; - -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; - -o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 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; -} -@media (prefers-reduced-motion: reduce) { - .nav-link { - -webkit-transition: none; - -o-transition: none; - transition: none; - } -} -.nav-link:hover, .nav-link:focus { - color: var(--nav-link-hover-color); -} -.nav-link.disabled { - color: var(--nav-link-disabled-color); - pointer-events: none; - cursor: default; -} - -.nav-tabs { - --nav-tabs-border-width: 1px; - --nav-tabs-border-color: hsl(210, 14%, 89%); - --nav-tabs-border-radius: 0.25rem; - --nav-tabs-link-hover-border-color: hsl(210, 16%, 93%) hsl(210, 16%, 93%) hsl(210, 14%, 89%); - --nav-tabs-link-active-color: hsl(210, 9%, 31%); - --nav-tabs-link-active-bg: hsl(0, 0%, 100%); - --nav-tabs-link-active-border-color: hsl(210, 14%, 89%) hsl(210, 14%, 89%) hsl(0, 0%, 100%); - border-bottom: var(--nav-tabs-border-width) solid var(--nav-tabs-border-color); -} -.nav-tabs .nav-link { - margin-bottom: calc(-1 * var(--nav-tabs-border-width)); - background: none; - border: var(--nav-tabs-border-width) solid transparent; - border-top-right-radius: var(--nav-tabs-border-radius); - border-top-left-radius: var(--nav-tabs-border-radius); -} -.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { - isolation: isolate; - border-color: var(--nav-tabs-link-hover-border-color); -} -.nav-tabs .nav-link.disabled, .nav-tabs .nav-link:disabled { - color: var(--nav-link-disabled-color); - background-color: transparent; - border-color: transparent; -} -.nav-tabs .nav-link.active, -.nav-tabs .nav-item.show .nav-link { - color: var(--nav-tabs-link-active-color); - background-color: var(--nav-tabs-link-active-bg); - border-color: var(--nav-tabs-link-active-border-color); -} -.nav-tabs .dropdown-menu { - margin-top: calc(-1 * var(--nav-tabs-border-width)); - border-top-right-radius: 0; - border-top-left-radius: 0; -} - -.nav-pills { - --nav-pills-border-radius: 0.25rem; - --nav-pills-link-active-color: hsl(0, 0%, 100%); - --nav-pills-link-active-bg: hsl(240, 98%, 17%); -} -.nav-pills .nav-link { - background: none; - border: 0; - border-radius: var(--nav-pills-border-radius); -} -.nav-pills .nav-link:disabled { - color: var(--nav-link-disabled-color); - background-color: transparent; - border-color: transparent; -} -.nav-pills .nav-link.active, -.nav-pills .show > .nav-link { - color: var(--nav-pills-link-active-color); - background-color: var(--nav-pills-link-active-bg); -} - -.nav-fill > .nav-link, -.nav-fill .nav-item { - -webkit-box-flex: 1; - -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; - -webkit-box-flex: 1; - -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 { - --navbar-padding-x: 0; - --navbar-padding-y: 0.5rem; - --navbar-color: rgba(0, 0, 0, 0.55); - --navbar-hover-color: rgba(0, 0, 0, 0.7); - --navbar-disabled-color: rgba(0, 0, 0, 0.3); - --navbar-active-color: rgba(0, 0, 0, 0.9); - --navbar-brand-padding-y: 0.3125rem; - --navbar-brand-margin-end: 1rem; - --navbar-brand-font-size: 1.25rem; - --navbar-brand-color: rgba(0, 0, 0, 0.9); - --navbar-brand-hover-color: rgba(0, 0, 0, 0.9); - --navbar-nav-link-padding-x: 0.5rem; - --navbar-toggler-padding-y: 0.25rem; - --navbar-toggler-padding-x: 0.75rem; - --navbar-toggler-font-size: 1.25rem; - --navbar-toggler-icon-bg: 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-toggler-border-color: rgba(0, 0, 0, 0.1); - --navbar-toggler-border-radius: 0.25rem; - --navbar-toggler-focus-width: 0.25rem; - --navbar-toggler-transition: box-shadow 0.15s ease-in-out; - position: relative; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - padding: var(--navbar-padding-y) var(--navbar-padding-x); -} -.navbar > .container, -.navbar > .container-fluid, -.navbar > .container-sm, -.navbar > .container-md, -.navbar > .container-lg, -.navbar > .container-xl, -.navbar > .container-xxl { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: inherit; - flex-wrap: inherit; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; -} -.navbar-brand { - padding-top: var(--navbar-brand-padding-y); - padding-bottom: var(--navbar-brand-padding-y); - margin-left: var(--navbar-brand-margin-end); - font-size: var(--navbar-brand-font-size); - color: var(--navbar-brand-color); - text-decoration: none; - white-space: nowrap; -} -.navbar-brand:hover, .navbar-brand:focus { - color: var(--navbar-brand-hover-color); -} - -.navbar-nav { - --nav-link-padding-x: 0; - --nav-link-padding-y: 0.5rem; - --nav-link-font-weight: ; - --nav-link-color: var(--navbar-color); - --nav-link-hover-color: var(--navbar-hover-color); - --nav-link-disabled-color: var(--navbar-disabled-color); - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - padding-right: 0; - margin-bottom: 0; - list-style: none; -} -.navbar-nav .show > .nav-link, -.navbar-nav .nav-link.active { - color: var(--navbar-active-color); -} -.navbar-nav .dropdown-menu { - position: static; -} - -.navbar-text { - padding-top: 0.5rem; - padding-bottom: 0.5rem; - color: var(--navbar-color); -} -.navbar-text a, -.navbar-text a:hover, -.navbar-text a:focus { - color: var(--navbar-active-color); -} - -.navbar-collapse { - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.navbar-toggler { - padding: var(--navbar-toggler-padding-y) var(--navbar-toggler-padding-x); - font-size: var(--navbar-toggler-font-size); - line-height: 1; - color: var(--navbar-color); - background-color: transparent; - border: var(--border-width) solid var(--navbar-toggler-border-color); - border-radius: var(--navbar-toggler-border-radius); - -webkit-transition: var(--navbar-toggler-transition); - -o-transition: var(--navbar-toggler-transition); - transition: var(--navbar-toggler-transition); -} -@media (prefers-reduced-motion: reduce) { - .navbar-toggler { - -webkit-transition: none; - -o-transition: none; - transition: none; - } -} -.navbar-toggler:hover { - text-decoration: none; -} -.navbar-toggler:focus { - text-decoration: none; - outline: 0; - -webkit-box-shadow: 0 0 0 var(--navbar-toggler-focus-width); - box-shadow: 0 0 0 var(--navbar-toggler-focus-width); -} - -.navbar-toggler-icon { - display: inline-block; - width: 1.5em; - height: 1.5em; - vertical-align: middle; - background-image: var(--navbar-toggler-icon-bg); - background-repeat: no-repeat; - background-position: center; - background-size: 100%; -} - -.navbar-nav-scroll { - max-height: var(--scroll-height, 75vh); - overflow-y: auto; -} - -@media (min-width: 576px) { - .navbar-expand-sm { - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - } - .navbar-expand-sm .navbar-nav { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - } - .navbar-expand-sm .navbar-nav .dropdown-menu { - position: absolute; - } - .navbar-expand-sm .navbar-nav .nav-link { - padding-left: var(--navbar-nav-link-padding-x); - padding-right: var(--navbar-nav-link-padding-x); - } - .navbar-expand-sm .navbar-nav-scroll { - overflow: visible; - } - .navbar-expand-sm .navbar-collapse { - display: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; - -ms-flex-preferred-size: auto; - flex-basis: auto; - } - .navbar-expand-sm .navbar-toggler { - display: none; - } - .navbar-expand-sm .offcanvas { - position: static; - z-index: auto; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - width: auto !important; - height: auto !important; - visibility: visible !important; - background-color: transparent !important; - border: 0 !important; - -webkit-transform: none !important; - transform: none !important; - -webkit-transition: none; - -o-transition: none; - transition: none; - } - .navbar-expand-sm .offcanvas .offcanvas-header { - display: none; - } - .navbar-expand-sm .offcanvas .offcanvas-body { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - padding: 0; - overflow-y: visible; - } -} -@media (min-width: 768px) { - .navbar-expand-md { - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - } - .navbar-expand-md .navbar-nav { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - } - .navbar-expand-md .navbar-nav .dropdown-menu { - position: absolute; - } - .navbar-expand-md .navbar-nav .nav-link { - padding-left: var(--navbar-nav-link-padding-x); - padding-right: var(--navbar-nav-link-padding-x); - } - .navbar-expand-md .navbar-nav-scroll { - overflow: visible; - } - .navbar-expand-md .navbar-collapse { - display: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; - -ms-flex-preferred-size: auto; - flex-basis: auto; - } - .navbar-expand-md .navbar-toggler { - display: none; - } - .navbar-expand-md .offcanvas { - position: static; - z-index: auto; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - width: auto !important; - height: auto !important; - visibility: visible !important; - background-color: transparent !important; - border: 0 !important; - -webkit-transform: none !important; - transform: none !important; - -webkit-transition: none; - -o-transition: none; - transition: none; - } - .navbar-expand-md .offcanvas .offcanvas-header { - display: none; - } - .navbar-expand-md .offcanvas .offcanvas-body { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - padding: 0; - overflow-y: visible; - } -} -@media (min-width: 992px) { - .navbar-expand-lg { - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - } - .navbar-expand-lg .navbar-nav { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - } - .navbar-expand-lg .navbar-nav .dropdown-menu { - position: absolute; - } - .navbar-expand-lg .navbar-nav .nav-link { - padding-left: var(--navbar-nav-link-padding-x); - padding-right: var(--navbar-nav-link-padding-x); - } - .navbar-expand-lg .navbar-nav-scroll { - overflow: visible; - } - .navbar-expand-lg .navbar-collapse { - display: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; - -ms-flex-preferred-size: auto; - flex-basis: auto; - } - .navbar-expand-lg .navbar-toggler { - display: none; - } - .navbar-expand-lg .offcanvas { - position: static; - z-index: auto; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - width: auto !important; - height: auto !important; - visibility: visible !important; - background-color: transparent !important; - border: 0 !important; - -webkit-transform: none !important; - transform: none !important; - -webkit-transition: none; - -o-transition: none; - transition: none; - } - .navbar-expand-lg .offcanvas .offcanvas-header { - display: none; - } - .navbar-expand-lg .offcanvas .offcanvas-body { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - padding: 0; - overflow-y: visible; - } -} -@media (min-width: 1200px) { - .navbar-expand-xl { - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - } - .navbar-expand-xl .navbar-nav { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - } - .navbar-expand-xl .navbar-nav .dropdown-menu { - position: absolute; - } - .navbar-expand-xl .navbar-nav .nav-link { - padding-left: var(--navbar-nav-link-padding-x); - padding-right: var(--navbar-nav-link-padding-x); - } - .navbar-expand-xl .navbar-nav-scroll { - overflow: visible; - } - .navbar-expand-xl .navbar-collapse { - display: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; - -ms-flex-preferred-size: auto; - flex-basis: auto; - } - .navbar-expand-xl .navbar-toggler { - display: none; - } - .navbar-expand-xl .offcanvas { - position: static; - z-index: auto; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - width: auto !important; - height: auto !important; - visibility: visible !important; - background-color: transparent !important; - border: 0 !important; - -webkit-transform: none !important; - transform: none !important; - -webkit-transition: none; - -o-transition: none; - transition: none; - } - .navbar-expand-xl .offcanvas .offcanvas-header { - display: none; - } - .navbar-expand-xl .offcanvas .offcanvas-body { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - padding: 0; - overflow-y: visible; - } -} -@media (min-width: 1400px) { - .navbar-expand-xxl { - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - } - .navbar-expand-xxl .navbar-nav { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - } - .navbar-expand-xxl .navbar-nav .dropdown-menu { - position: absolute; - } - .navbar-expand-xxl .navbar-nav .nav-link { - padding-left: var(--navbar-nav-link-padding-x); - padding-right: var(--navbar-nav-link-padding-x); - } - .navbar-expand-xxl .navbar-nav-scroll { - overflow: visible; - } - .navbar-expand-xxl .navbar-collapse { - display: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; - -ms-flex-preferred-size: auto; - flex-basis: auto; - } - .navbar-expand-xxl .navbar-toggler { - display: none; - } - .navbar-expand-xxl .offcanvas { - position: static; - z-index: auto; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - width: auto !important; - height: auto !important; - visibility: visible !important; - background-color: transparent !important; - border: 0 !important; - -webkit-transform: none !important; - transform: none !important; - -webkit-transition: none; - -o-transition: none; - transition: none; - } - .navbar-expand-xxl .offcanvas .offcanvas-header { - display: none; - } - .navbar-expand-xxl .offcanvas .offcanvas-body { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - padding: 0; - overflow-y: visible; - } -} -.navbar-expand { - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; -} -.navbar-expand .navbar-nav { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; -} -.navbar-expand .navbar-nav .dropdown-menu { - position: absolute; -} -.navbar-expand .navbar-nav .nav-link { - padding-left: var(--navbar-nav-link-padding-x); - padding-right: var(--navbar-nav-link-padding-x); -} -.navbar-expand .navbar-nav-scroll { - overflow: visible; -} -.navbar-expand .navbar-collapse { - display: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; - -ms-flex-preferred-size: auto; - flex-basis: auto; -} -.navbar-expand .navbar-toggler { - display: none; -} -.navbar-expand .offcanvas { - position: static; - z-index: auto; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - width: auto !important; - height: auto !important; - visibility: visible !important; - background-color: transparent !important; - border: 0 !important; - -webkit-transform: none !important; - transform: none !important; - -webkit-transition: none; - -o-transition: none; - transition: none; -} -.navbar-expand .offcanvas .offcanvas-header { - display: none; -} -.navbar-expand .offcanvas .offcanvas-body { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - padding: 0; - overflow-y: visible; -} - -.navbar-dark { - --navbar-color: rgba(255, 255, 255, 0.55); - --navbar-hover-color: rgba(255, 255, 255, 0.75); - --navbar-disabled-color: rgba(255, 255, 255, 0.25); - --navbar-active-color: hsl(0, 0%, 100%); - --navbar-brand-color: hsl(0, 0%, 100%); - --navbar-brand-hover-color: hsl(0, 0%, 100%); - --navbar-toggler-border-color: rgba(255, 255, 255, 0.1); - --navbar-toggler-icon-bg: 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"); -} - -.card { - --card-spacer-y: 1rem; - --card-spacer-x: 1rem; - --card-title-spacer-y: 0.5rem; - --card-border-width: 1px; - --card-border-color: hsl(210, 14%, 89%); - --card-border-radius: 0.25rem; - --card-box-shadow: ; - --card-inner-border-radius: calc(0.25rem - 1px); - --card-cap-padding-y: 0.5rem; - --card-cap-padding-x: 1rem; - --card-cap-bg: rgba(0, 0, 0, 0.03); - --card-cap-color: ; - --card-height: ; - --card-color: ; - --card-bg: hsl(0, 0%, 100%); - --card-img-overlay-padding: 1rem; - --card-group-margin: 0.5em; - position: relative; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - min-width: 0; - height: var(--card-height); - word-wrap: break-word; - background-color: var(--card-bg); - background-clip: border-box; - border: var(--card-border-width) solid var(--card-border-color); - border-radius: var(--card-border-radius); -} -.card > hr { - margin-left: 0; - margin-right: 0; -} -.card > .list-group { - border-top: inherit; - border-bottom: inherit; -} -.card > .list-group:first-child { - border-top-width: 0; - border-top-right-radius: var(--card-inner-border-radius); - border-top-left-radius: var(--card-inner-border-radius); -} -.card > .list-group:last-child { - border-bottom-width: 0; - border-bottom-left-radius: var(--card-inner-border-radius); - border-bottom-right-radius: var(--card-inner-border-radius); -} -.card > .card-header + .list-group, -.card > .list-group + .card-footer { - border-top: 0; -} - -.card-body { - -webkit-box-flex: 1; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - padding: var(--card-spacer-y) var(--card-spacer-x); - color: var(--card-color); -} - -.card-title { - margin-bottom: var(--card-title-spacer-y); -} - -.card-subtitle { - margin-top: calc(-0.5 * var(--card-title-spacer-y)); - margin-bottom: 0; -} - -.card-text:last-child { - margin-bottom: 0; -} - -.card-link + .card-link { - margin-right: var(--card-spacer-x); -} - -.card-header { - padding: var(--card-cap-padding-y) var(--card-cap-padding-x); - margin-bottom: 0; - color: var(--card-cap-color); - background-color: var(--card-cap-bg); - border-bottom: var(--card-border-width) solid var(--card-border-color); -} -.card-header:first-child { - border-radius: var(--card-inner-border-radius) var(--card-inner-border-radius) 0 0; -} - -.card-footer { - padding: var(--card-cap-padding-y) var(--card-cap-padding-x); - color: var(--card-cap-color); - background-color: var(--card-cap-bg); - border-top: var(--card-border-width) solid var(--card-border-color); -} -.card-footer:last-child { - border-radius: 0 0 var(--card-inner-border-radius) var(--card-inner-border-radius); -} - -.card-header-tabs { - margin-left: calc(-0.5 * var(--card-cap-padding-x)); - margin-bottom: calc(-1 * var(--card-cap-padding-y)); - margin-right: calc(-0.5 * var(--card-cap-padding-x)); - border-bottom: 0; -} -.card-header-tabs .nav-link.active { - background-color: var(--card-bg); - border-bottom-color: var(--card-bg); -} - -.card-header-pills { - margin-left: calc(-0.5 * var(--card-cap-padding-x)); - margin-right: calc(-0.5 * var(--card-cap-padding-x)); -} - -.card-img-overlay { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - padding: var(--card-img-overlay-padding); - border-radius: var(--card-inner-border-radius); -} - -.card-img, -.card-img-top, -.card-img-bottom { - width: 100%; -} - -.card-img, -.card-img-top { - border-top-right-radius: var(--card-inner-border-radius); - border-top-left-radius: var(--card-inner-border-radius); -} - -.card-img, -.card-img-bottom { - border-bottom-left-radius: var(--card-inner-border-radius); - border-bottom-right-radius: var(--card-inner-border-radius); -} - -.card-group > .card { - margin-bottom: var(--card-group-margin); -} -@media (min-width: 576px) { - .card-group { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-flow: row wrap; - flex-flow: row wrap; - } - .card-group > .card { - -webkit-box-flex: 1; - -ms-flex: 1 0 0%; - flex: 1 0 0%; - margin-bottom: 0; - } - .card-group > .card + .card { - margin-right: 0; - border-right: 0; - } - .card-group > .card:not(:last-child) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - .card-group > .card:not(:last-child) .card-img-top, - .card-group > .card:not(:last-child) .card-header { - border-top-left-radius: 0; - } - .card-group > .card:not(:last-child) .card-img-bottom, - .card-group > .card:not(:last-child) .card-footer { - border-bottom-left-radius: 0; - } - .card-group > .card:not(:first-child) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - .card-group > .card:not(:first-child) .card-img-top, - .card-group > .card:not(:first-child) .card-header { - border-top-right-radius: 0; - } - .card-group > .card:not(:first-child) .card-img-bottom, - .card-group > .card:not(:first-child) .card-footer { - border-bottom-right-radius: 0; - } -} - -.accordion { - --accordion-color: hsl(210, 11%, 15%); - --accordion-bg: hsl(0, 0%, 100%); - --accordion-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; - --accordion-border-color: var(--border-color); - --accordion-border-width: 1px; - --accordion-border-radius: 0.25rem; - --accordion-inner-border-radius: calc(0.25rem - 1px); - --accordion-btn-padding-x: 1.25rem; - --accordion-btn-padding-y: 1rem; - --accordion-btn-color: hsl(210, 11%, 15%); - --accordion-btn-bg: var(--accordion-bg); - --accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='hsl%28210, 11%, 15%%29'%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"); - --accordion-btn-icon-width: 1.25rem; - --accordion-btn-icon-transform: rotate(-180deg); - --accordion-btn-icon-transition: transform 0.2s ease-in-out; - --accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230f244d'%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"); - --accordion-btn-focus-border-color: #8894aa; - --accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); - --accordion-body-padding-x: 1.25rem; - --accordion-body-padding-y: 1rem; - --accordion-active-color: #0f244d; - --accordion-active-bg: #e7eaee; -} - -.accordion-button { - position: relative; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - width: 100%; - padding: var(--accordion-btn-padding-y) var(--accordion-btn-padding-x); - font-size: 1rem; - color: var(--accordion-btn-color); - text-align: right; - background-color: var(--accordion-btn-bg); - border: 0; - border-radius: 0; - overflow-anchor: none; - -webkit-transition: var(--accordion-transition); - -o-transition: var(--accordion-transition); - transition: var(--accordion-transition); -} -@media (prefers-reduced-motion: reduce) { - .accordion-button { - -webkit-transition: none; - -o-transition: none; - transition: none; - } -} -.accordion-button:not(.collapsed) { - color: var(--accordion-active-color); - background-color: var(--accordion-active-bg); - -webkit-box-shadow: inset 0 calc(-1 * var(--accordion-border-width)) 0 var(--accordion-border-color); - box-shadow: inset 0 calc(-1 * var(--accordion-border-width)) 0 var(--accordion-border-color); -} -.accordion-button:not(.collapsed)::after { - background-image: var(--accordion-btn-active-icon); - -webkit-transform: var(--accordion-btn-icon-transform); - transform: var(--accordion-btn-icon-transform); -} -.accordion-button::after { - -ms-flex-negative: 0; - flex-shrink: 0; - width: var(--accordion-btn-icon-width); - height: var(--accordion-btn-icon-width); - margin-right: auto; - content: ""; - background-image: var(--accordion-btn-icon); - background-repeat: no-repeat; - background-size: var(--accordion-btn-icon-width); - -webkit-transition: var(--accordion-btn-icon-transition); - -o-transition: var(--accordion-btn-icon-transition); - transition: var(--accordion-btn-icon-transition); -} -@media (prefers-reduced-motion: reduce) { - .accordion-button::after { - -webkit-transition: none; - -o-transition: none; - transition: none; - } -} -.accordion-button:hover { - z-index: 2; -} -.accordion-button:focus { - z-index: 3; - border-color: var(--accordion-btn-focus-border-color); - outline: 0; - -webkit-box-shadow: var(--accordion-btn-focus-box-shadow); - box-shadow: var(--accordion-btn-focus-box-shadow); -} - -.accordion-header { - margin-bottom: 0; -} - -.accordion-item { - color: var(--accordion-color); - background-color: var(--accordion-bg); - border: var(--accordion-border-width) solid var(--accordion-border-color); -} -.accordion-item:first-of-type { - border-top-right-radius: var(--accordion-border-radius); - border-top-left-radius: var(--accordion-border-radius); -} -.accordion-item:first-of-type .accordion-button { - border-top-right-radius: var(--accordion-inner-border-radius); - border-top-left-radius: var(--accordion-inner-border-radius); -} -.accordion-item:not(:first-of-type) { - border-top: 0; -} -.accordion-item:last-of-type { - border-bottom-left-radius: var(--accordion-border-radius); - border-bottom-right-radius: var(--accordion-border-radius); -} -.accordion-item:last-of-type .accordion-button.collapsed { - border-bottom-left-radius: var(--accordion-inner-border-radius); - border-bottom-right-radius: var(--accordion-inner-border-radius); -} -.accordion-item:last-of-type .accordion-collapse { - border-bottom-left-radius: var(--accordion-border-radius); - border-bottom-right-radius: var(--accordion-border-radius); -} - -.accordion-body { - padding: var(--accordion-body-padding-y) var(--accordion-body-padding-x); -} - -.accordion-flush .accordion-collapse { - border-width: 0; -} -.accordion-flush .accordion-item { - border-left: 0; - border-right: 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, .accordion-flush .accordion-item .accordion-button.collapsed { - border-radius: 0; -} - -.breadcrumb { - --breadcrumb-padding-x: 0; - --breadcrumb-padding-y: 0; - --breadcrumb-margin-bottom: 1rem; - --breadcrumb-bg: ; - --breadcrumb-border-radius: ; - --breadcrumb-divider-color: hsl(210, 7%, 46%); - --breadcrumb-item-padding-x: 0.5rem; - --breadcrumb-item-active-color: hsl(210, 9%, 31%); - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - padding: var(--breadcrumb-padding-y) var(--breadcrumb-padding-x); - margin-bottom: var(--breadcrumb-margin-bottom); - font-size: var(--breadcrumb-font-size); - list-style: none; - background-color: var(--breadcrumb-bg); - border-radius: var(--breadcrumb-border-radius); -} - -.breadcrumb-item + .breadcrumb-item { - padding-right: var(--breadcrumb-item-padding-x); -} -.breadcrumb-item + .breadcrumb-item::before { - float: right; - padding-left: var(--breadcrumb-item-padding-x); - color: var(--breadcrumb-divider-color); - content: var(--breadcrumb-divider, "/") ; -} -.breadcrumb-item.active { - color: var(--breadcrumb-item-active-color); -} - -.pagination { - --pagination-padding-x: 0.75rem; - --pagination-padding-y: 0.375rem; - --pagination-font-size: 1rem; - --pagination-color: var(--link-color); - --pagination-bg: hsl(0, 0%, 100%); - --pagination-border-width: 1px; - --pagination-border-color: hsl(210, 14%, 89%); - --pagination-border-radius: 0.25rem; - --pagination-hover-color: var(--link-hover-color); - --pagination-hover-bg: hsl(210, 16%, 93%); - --pagination-hover-border-color: hsl(210, 14%, 89%); - --pagination-focus-color: var(--link-hover-color); - --pagination-focus-bg: hsl(210, 16%, 93%); - --pagination-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); - --pagination-active-color: hsl(0, 0%, 100%); - --pagination-active-bg: hsl(240, 98%, 17%); - --pagination-active-border-color: hsl(240, 98%, 17%); - --pagination-disabled-color: hsl(210, 7%, 46%); - --pagination-disabled-bg: hsl(0, 0%, 100%); - --pagination-disabled-border-color: hsl(210, 14%, 89%); - display: -webkit-box; - display: -ms-flexbox; - display: flex; - padding-right: 0; - list-style: none; -} - -.page-link { - position: relative; - display: block; - padding: var(--pagination-padding-y) var(--pagination-padding-x); - font-size: var(--pagination-font-size); - color: var(--pagination-color); - text-decoration: none; - background-color: var(--pagination-bg); - border: var(--pagination-border-width) solid var(--pagination-border-color); - -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-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, -webkit-box-shadow 0.15s ease-in-out; - -o-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; - 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, -webkit-box-shadow 0.15s ease-in-out; -} -@media (prefers-reduced-motion: reduce) { - .page-link { - -webkit-transition: none; - -o-transition: none; - transition: none; - } -} -.page-link:hover { - z-index: 2; - color: var(--pagination-hover-color); - background-color: var(--pagination-hover-bg); - border-color: var(--pagination-hover-border-color); -} -.page-link:focus { - z-index: 3; - color: var(--pagination-focus-color); - background-color: var(--pagination-focus-bg); - outline: 0; - -webkit-box-shadow: var(--pagination-focus-box-shadow); - box-shadow: var(--pagination-focus-box-shadow); -} -.page-link.active, .active > .page-link { - z-index: 3; - color: var(--pagination-active-color); - background-color: var(--pagination-active-bg); - border-color: var(--pagination-active-border-color); -} -.page-link.disabled, .disabled > .page-link { - color: var(--pagination-disabled-color); - pointer-events: none; - background-color: var(--pagination-disabled-bg); - border-color: var(--pagination-disabled-border-color); -} - -.page-item:not(:first-child) .page-link { - margin-right: -1px; -} -.page-item:first-child .page-link { - border-top-right-radius: var(--pagination-border-radius); - border-bottom-right-radius: var(--pagination-border-radius); -} -.page-item:last-child .page-link { - border-top-left-radius: var(--pagination-border-radius); - border-bottom-left-radius: var(--pagination-border-radius); -} - -.pagination-lg { - --pagination-padding-x: 1.5rem; - --pagination-padding-y: 0.75rem; - --pagination-font-size: 1.25rem; - --pagination-border-radius: 0.3rem; -} - -.pagination-sm { - --pagination-padding-x: 0.5rem; - --pagination-padding-y: 0.25rem; - --pagination-font-size: 0.875rem; - --pagination-border-radius: 0.2rem; -} - -.badge { - --badge-padding-x: 0.65em; - --badge-padding-y: 0.35em; - --badge-font-size: 0.75em; - --badge-font-weight: 700; - --badge-color: hsl(0, 0%, 100%); - --badge-border-radius: 0.25rem; - display: inline-block; - padding: var(--badge-padding-y) var(--badge-padding-x); - font-size: var(--badge-font-size); - font-weight: var(--badge-font-weight); - line-height: 1; - color: var(--badge-color); - text-align: center; - white-space: nowrap; - vertical-align: baseline; - border-radius: var(--badge-border-radius); -} -.badge:empty { - display: none; -} - -.btn .badge { - position: relative; - top: -1px; -} +[dir="rtl"] .dropdown-menu-md-end[data-bs-popper] { + + left: 0; + right: auto; -.alert { - --alert-bg: transparent; - --alert-padding-x: 1rem; - --alert-padding-y: 1rem; - --alert-margin-bottom: 1rem; - --alert-color: inherit; - --alert-border-color: transparent; - --alert-border: 1px solid var(--alert-border-color); - --alert-border-radius: 0.25rem; - position: relative; - padding: var(--alert-padding-y) var(--alert-padding-x); - margin-bottom: var(--alert-margin-bottom); - color: var(--alert-color); - background-color: var(--alert-bg); - border: var(--alert-border); - border-radius: var(--alert-border-radius); } -.alert-heading { - color: inherit; +[dir="rtl"] .dropdown-menu-lg-start[data-bs-popper] { + + left: auto; + right: 0; + } -.alert-link { - font-weight: 700; +[dir="rtl"] .dropdown-menu-lg-end[data-bs-popper] { + + left: 0; + right: auto; + } -.alert-dismissible { - padding-left: 3rem; +[dir="rtl"] .dropdown-menu-xl-start[data-bs-popper] { + + left: auto; + right: 0; + } -.alert-dismissible .btn-close { - position: absolute; - top: 0; - left: 0; - z-index: 2; - padding: 1.25rem 1rem; + +[dir="rtl"] .dropdown-menu-xl-end[data-bs-popper] { + + left: 0; + right: auto; + } -.alert-primary { - --alert-color: #010134; - --alert-bg: #ccccdd; - --alert-border-color: #b3b3cc; +[dir="rtl"] .dropdown-menu-xxl-start[data-bs-popper] { + + left: auto; + right: 0; + } -.alert-primary .alert-link { - color: #01012a; + +[dir="rtl"] .dropdown-menu-xxl-end[data-bs-popper] { + + left: 0; + right: auto; + } -.alert-secondary { - --alert-color: #41464c; - --alert-bg: #e2e3e5; - --alert-border-color: #d3d6d8; +[dir="rtl"] .dropup .dropdown-toggle::after { + + display: inline-block; + margin-left: 0.255rem; + vertical-align: 0.255rem; + content: ""; + border-top: 0; + border-right: 0.3rem solid transparent; + border-bottom: 0.3rem solid; + border-left: 0.3rem solid transparent; } -.alert-secondary .alert-link { - color: #34383d; + +[dir="rtl"] .dropup .dropdown-toggle:empty::after { + + margin-left: 0; } - -.alert-success { - --alert-color: #294f29; - --alert-bg: #dae6da; - --alert-border-color: #c7dac7; -} -.alert-success .alert-link { - color: #213f21; -} - -.alert-info { - --alert-color: #1d3b55; - --alert-bg: #d6e0e8; - --alert-border-color: #c1d0dd; -} -.alert-info .alert-link { - color: #172f44; -} - -.alert-warning { - --alert-color: #683b00; - --alert-bg: #efe0cc; - --alert-border-color: #e6d0b3; -} -.alert-warning .alert-link { - color: #532f00; -} - -.alert-danger { - --alert-color: #63130e; - --alert-bg: #edd2d1; - --alert-border-color: #e4bcba; + +[dir="rtl"] .dropend .dropdown-menu[data-bs-popper] { + + top: 0; + left: auto; + right: 100%; + margin-top: 0; + margin-left: var(--dropdown-spacer); } -.alert-danger .alert-link { - color: #4f0f0b; + +[dir="rtl"] .dropend .dropdown-toggle::after { + + display: inline-block; + margin-left: 0.255rem; + vertical-align: 0.255rem; + content: ""; + border-top: 0.3rem solid transparent; + border-right: 0; + border-bottom: 0.3rem solid transparent; + border-left: 0.3rem solid; +} + +[dir="rtl"] .dropend .dropdown-toggle:empty::after { + + margin-left: 0; +} + +[dir="rtl"] .dropstart .dropdown-menu[data-bs-popper] { + + top: 0; + left: 100%; + right: auto; + margin-top: 0; + margin-right: var(--dropdown-spacer); +} + +[dir="rtl"] .dropstart .dropdown-toggle::after { + + display: inline-block; + margin-left: 0.255rem; + vertical-align: 0.255rem; + content: ""; +} + +[dir="rtl"] .dropstart .dropdown-toggle::before { + + display: inline-block; + margin-right: 0.255rem; + vertical-align: 0.255rem; + content: ""; + border-top: 0.3rem solid transparent; + border-right: 0.3rem solid; + border-bottom: 0.3rem solid transparent; +} + +[dir="rtl"] .dropstart .dropdown-toggle:empty::after { + + margin-left: 0; +} + +[dir="rtl"] .btn-group> :not(.btn-check:first-child)+.btn, +[dir="rtl"] .btn-group>.btn-group:not(:first-child) { + + margin-left: -1px; +} + +[dir="rtl"] .dropdown-toggle-split { + + padding-right: 0.75rem; + padding-left: 0.75rem; +} + +[dir="rtl"] .dropdown-toggle-split::after, +[dir="rtl"] .dropup .dropdown-toggle-split::after, +[dir="rtl"] .dropend .dropdown-toggle-split::after { + + margin-left: 0; +} + +[dir="rtl"] .dropstart .dropdown-toggle-split::before { + + margin-right: 0; +} + +[dir="rtl"] .btn-sm+.dropdown-toggle-split, +[dir="rtl"] .btn-group-sm>.btn+.dropdown-toggle-split { + + padding-right: 0.375rem; + padding-left: 0.375rem; +} + +[dir="rtl"] .btn-lg+.dropdown-toggle-split, +[dir="rtl"] .btn-group-lg>.btn+.dropdown-toggle-split { + + padding-right: 0.75rem; + padding-left: 0.75rem; +} + +[dir="rtl"] .nav { + + --nav-link-padding-x: 1rem; + --nav-link-padding-y: 0.5rem; + --nav-link-font-weight: ; + --nav-link-color: var(--link-color); + --nav-link-active-color: var(--link-active-color); + --nav-link-disabled-color: var(--secondary-color); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + padding-left: 0; + margin-bottom: 0; + list-style: none; +} + +[dir="rtl"] .navbar-brand { + + padding-top: var(--navbar-brand-padding-y); + padding-bottom: var(--navbar-brand-padding-y); + margin-right: var(--navbar-brand-margin-end); + font-size: var(--navbar-brand-font-size); + color: var(--navbar-brand-color); + text-decoration: none; + white-space: nowrap; +} + +[dir="rtl"] .navbar-nav { + + --nav-link-padding-x: 0; + --nav-link-padding-y: 0.5rem; + --nav-link-font-weight: ; + --nav-link-color: var(--navbar-color); + --nav-link-active-color: var(--navbar-active-color); + --nav-link-disabled-color: var(--navbar-disabled-color); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + padding-left: 0; + margin-bottom: 0; + list-style: none; +} + +[dir="rtl"] .navbar-expand-sm .navbar-nav .nav-link { + + padding-right: var(--navbar-nav-link-padding-x); + padding-left: var(--navbar-nav-link-padding-x); + +} + +[dir="rtl"] .navbar-expand-md .navbar-nav .nav-link { + + padding-right: var(--navbar-nav-link-padding-x); + padding-left: var(--navbar-nav-link-padding-x); + +} + +[dir="rtl"] .navbar-expand-lg .navbar-nav .nav-link { + + padding-right: var(--navbar-nav-link-padding-x); + padding-left: var(--navbar-nav-link-padding-x); + +} + +[dir="rtl"] .navbar-expand-xl .navbar-nav .nav-link { + + padding-right: var(--navbar-nav-link-padding-x); + padding-left: var(--navbar-nav-link-padding-x); + +} + +[dir="rtl"] .navbar-expand-xxl .navbar-nav .nav-link { + + padding-right: var(--navbar-nav-link-padding-x); + padding-left: var(--navbar-nav-link-padding-x); + +} + +[dir="rtl"] .navbar-expand .navbar-nav .nav-link { + + padding-right: var(--navbar-nav-link-padding-x); + padding-left: var(--navbar-nav-link-padding-x); +} + +[dir="rtl"] .card>hr { + + margin-right: 0; + margin-left: 0; +} + +[dir="rtl"] .card-link+.card-link { + + margin-left: var(--card-spacer-x); +} + +[dir="rtl"] .card-header-tabs { + + margin-right: calc(-0.5 * var(--card-cap-padding-x)); + margin-bottom: calc(-1 * var(--card-cap-padding-y)); + margin-left: calc(-0.5 * var(--card-cap-padding-x)); + border-bottom: 0; } -.alert-light { - --alert-color: #646464; - --alert-bg: #fefefe; - --alert-border-color: #fdfefe; +[dir="rtl"] .card-header-pills { + + margin-right: calc(-0.5 * var(--card-cap-padding-x)); + margin-left: calc(-0.5 * var(--card-cap-padding-x)); } -.alert-light .alert-link { - color: #505050; + +[dir="rtl"] .card-img-overlay { + + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + padding: var(--card-img-overlay-padding); + border-radius: var(--card-inner-border-radius); } -.alert-dark { - --alert-color: #202327; - --alert-bg: #d7d8d9; - --alert-border-color: #c2c4c6; +[dir="rtl"] .card-group>.card+.card { + + margin-left: 0; + border-left: 0; + } -.alert-dark .alert-link { - color: #1a1c1f; + +[dir="rtl"] .accordion-button { + + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 100%; + padding: var(--accordion-btn-padding-y) var(--accordion-btn-padding-x); + font-size: 1rem; + color: var(--accordion-btn-color); + text-align: left; + background-color: var(--accordion-btn-bg); + border: 0; + border-radius: 0; + overflow-anchor: none; + -webkit-transition: var(--accordion-transition); + -o-transition: var(--accordion-transition); + transition: var(--accordion-transition); } -@-webkit-keyframes progress-bar-stripes { - 0% { - background-position-x: 1rem; - } +[dir="rtl"] .accordion-button::after { + + -ms-flex-negative: 0; + flex-shrink: 0; + width: var(--accordion-btn-icon-width); + height: var(--accordion-btn-icon-width); + margin-left: auto; + content: ""; + background-image: var(--accordion-btn-icon); + background-repeat: no-repeat; + background-size: var(--accordion-btn-icon-width); + -webkit-transition: var(--accordion-btn-icon-transition); + -o-transition: var(--accordion-btn-icon-transition); + transition: var(--accordion-btn-icon-transition); } -@keyframes progress-bar-stripes { - 0% { - background-position-x: 1rem; - } +[dir="rtl"] .accordion-flush .accordion-item { + + border-right: 0; + border-left: 0; + border-radius: 0; } -.progress { - --progress-height: 1rem; - --progress-font-size: 0.75rem; - --progress-bg: hsl(210, 16%, 93%); - --progress-border-radius: 0.25rem; - --progress-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075); - --progress-bar-color: hsl(0, 0%, 100%); - --progress-bar-bg: hsl(240, 98%, 17%); - --progress-bar-transition: width 0.6s ease; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - height: var(--progress-height); - overflow: hidden; - font-size: var(--progress-font-size); - background-color: var(--progress-bg); - border-radius: var(--progress-border-radius); + +[dir="rtl"] .breadcrumb-item+.breadcrumb-item { + + padding-left: var(--breadcrumb-item-padding-x); } -.progress-bar { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - overflow: hidden; - color: var(--progress-bar-color); - text-align: center; - white-space: nowrap; - background-color: var(--progress-bar-bg); - -webkit-transition: var(--progress-bar-transition); - -o-transition: var(--progress-bar-transition); - transition: var(--progress-bar-transition); -} -@media (prefers-reduced-motion: reduce) { - .progress-bar { - -webkit-transition: none; - -o-transition: none; - transition: none; - } -} - -.progress-bar-striped { - background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-size: var(--progress-height) var(--progress-height); -} - -.progress-bar-animated { - -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; - animation: none; - } +[dir="rtl"] .breadcrumb-item+.breadcrumb-item::before { + + float: left; + padding-right: var(--breadcrumb-item-padding-x); + color: var(--breadcrumb-divider-color); + content: var(--breadcrumb-divider, "/") + /* rtl: var(--breadcrumb-divider, "/") */ + ; } +[dir="rtl"] .pagination { + + --pagination-padding-x: 0.75rem; + --pagination-padding-y: 0.375rem; + --pagination-font-size: 1rem; + --pagination-color: var(--link-color); + --pagination-bg: hsl(0, 0%, 100%); + --pagination-border-width: 1px; + --pagination-border-color: hsl(210, 14%, 89%); + --pagination-border-radius: 0.25rem; + --pagination-active-color: var(--link-active-color); + --pagination-active-bg: var(--secondary-bg); + --pagination-active-border-color: hsl(210, 14%, 89%); + --pagination-focus-color: var(--link-active-color); + --pagination-focus-bg: var(--secondary-bg); + --pagination-focus-box-shadow: 0 0 0 0.25rem var(--focus-ring-color); + --pagination-active-color: var(--white); + --pagination-active-bg: hsl(240, 98%, 17%); + --pagination-active-border-color: hsl(240, 98%, 17%); + --pagination-disabled-color: var(--secondary-color); + --pagination-disabled-bg: hsl(0, 0%, 100%); + --pagination-disabled-border-color: hsl(210, 14%, 89%); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + padding-left: 0; + list-style: none; +} + +[dir="rtl"] .page-item:not(:first-child) .page-link { + + margin-left: -1px; +} + +[dir="rtl"] .alert-dismissible { + + padding-right: 3rem; +} + +[dir="rtl"] .alert-dismissible .btn-close { + + position: absolute; + top: 0; + left: 0; + z-index: 2; + padding: 1.25rem 1rem; +} + +[dir="rtl"] } + .list-group { - --list-group-color: hsl(210, 11%, 15%); - --list-group-bg: hsl(0, 0%, 100%); - --list-group-border-color: rgba(0, 0, 0, 0.125); - --list-group-border-width: 1px; - --list-group-border-radius: 0.25rem; - --list-group-item-padding-x: 1rem; - --list-group-item-padding-y: 0.5rem; - --list-group-action-color: hsl(210, 9%, 31%); - --list-group-action-hover-color: hsl(210, 9%, 31%); - --list-group-action-hover-bg: hsl(210, 17%, 98%); - --list-group-action-active-color: hsl(210, 11%, 15%); - --list-group-action-active-bg: hsl(210, 16%, 93%); - --list-group-disabled-color: hsl(210, 7%, 46%); - --list-group-disabled-bg: hsl(0, 0%, 100%); - --list-group-active-color: hsl(0, 0%, 100%); - --list-group-active-bg: hsl(240, 98%, 17%); - --list-group-active-border-color: hsl(240, 98%, 17%); - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - padding-right: 0; - margin-bottom: 0; - border-radius: var(--list-group-border-radius); + + --list-group-color: var(--body-color); + --list-group-bg: hsl(0, 0%, 100%); + --list-group-border-color: rgba(0, 0, 0, 0.125); + --list-group-border-width: 1px; + --list-group-border-radius: 0.25rem; + --list-group-item-padding-x: 1rem; + --list-group-item-padding-y: 0.5rem; + --list-group-action-color: hsl(210, 9%, 31%); + --list-group-action-active-color: hsl(210, 9%, 31%); + --list-group-action-active-bg: hsl(210, 17%, 98%); + --list-group-action-active-color: var(--body-color); + --list-group-action-active-bg: var(--secondary-bg); + --list-group-disabled-color: var(--secondary-color); + --list-group-disabled-bg: hsl(0, 0%, 100%); + --list-group-active-color: var(--white); + --list-group-active-bg: hsl(240, 98%, 17%); + --list-group-active-border-color: hsl(240, 98%, 17%); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + padding-left: 0; + margin-bottom: 0; + border-radius: var(--list-group-border-radius); } -.list-group-numbered { - list-style-type: none; - counter-reset: section; -} -.list-group-numbered > .list-group-item::before { - content: counters(section, ".") ". "; - counter-increment: section; +[dir="rtl"] .list-group-horizontal>.list-group-item+.list-group-item { + + border-top-width: var(--list-group-border-width); + border-right-width: 0; } -.list-group-item-action { - width: 100%; - color: var(--list-group-action-color); - text-align: inherit; -} -.list-group-item-action:hover, .list-group-item-action:focus { - z-index: 1; - color: var(--list-group-action-hover-color); - text-decoration: none; - background-color: var(--list-group-action-hover-bg); -} -.list-group-item-action:active { - color: var(--list-group-action-active-color); - background-color: var(--list-group-action-active-bg); +[dir="rtl"] .list-group-horizontal>.list-group-item+.list-group-item.active { + + margin-left: calc(-1 * var(--list-group-border-width)); + border-right-width: var(--list-group-border-width); } -.list-group-item { - position: relative; - display: block; - padding: var(--list-group-item-padding-y) var(--list-group-item-padding-x); - color: var(--list-group-color); - text-decoration: none; - background-color: var(--list-group-bg); - border: var(--list-group-border-width) solid var(--list-group-border-color); -} -.list-group-item:first-child { - border-top-right-radius: inherit; - border-top-left-radius: inherit; -} -.list-group-item:last-child { - border-bottom-left-radius: inherit; - border-bottom-right-radius: inherit; -} -.list-group-item.disabled, .list-group-item:disabled { - color: var(--list-group-disabled-color); - pointer-events: none; - background-color: var(--list-group-disabled-bg); -} -.list-group-item.active { - z-index: 2; - color: var(--list-group-active-color); - background-color: var(--list-group-active-bg); - border-color: var(--list-group-active-border-color); -} -.list-group-item + .list-group-item { - border-top-width: 0; -} -.list-group-item + .list-group-item.active { - margin-top: calc(-1 * var(--list-group-border-width)); - border-top-width: var(--list-group-border-width); +[dir="rtl"] .list-group-horizontal-sm>.list-group-item+.list-group-item { + + border-top-width: var(--list-group-border-width); + border-right-width: 0; + } -.list-group-horizontal { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; -} -.list-group-horizontal > .list-group-item:first-child:not(:last-child) { - border-bottom-right-radius: var(--list-group-border-radius); - border-top-left-radius: 0; -} -.list-group-horizontal > .list-group-item:last-child:not(:first-child) { - border-top-left-radius: var(--list-group-border-radius); - border-bottom-right-radius: 0; -} -.list-group-horizontal > .list-group-item.active { - margin-top: 0; -} -.list-group-horizontal > .list-group-item + .list-group-item { - border-top-width: var(--list-group-border-width); - border-right-width: 0; -} -.list-group-horizontal > .list-group-item + .list-group-item.active { - margin-right: calc(-1 * var(--list-group-border-width)); - border-right-width: var(--list-group-border-width); +[dir="rtl"] .list-group-horizontal-sm>.list-group-item+.list-group-item.active { + + margin-left: calc(-1 * var(--list-group-border-width)); + border-right-width: var(--list-group-border-width); + } -@media (min-width: 576px) { - .list-group-horizontal-sm { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - } - .list-group-horizontal-sm > .list-group-item:first-child:not(:last-child) { - border-bottom-right-radius: var(--list-group-border-radius); - border-top-left-radius: 0; - } - .list-group-horizontal-sm > .list-group-item:last-child:not(:first-child) { - border-top-left-radius: var(--list-group-border-radius); - border-bottom-right-radius: 0; - } - .list-group-horizontal-sm > .list-group-item.active { - margin-top: 0; - } - .list-group-horizontal-sm > .list-group-item + .list-group-item { - border-top-width: var(--list-group-border-width); - border-right-width: 0; - } - .list-group-horizontal-sm > .list-group-item + .list-group-item.active { - margin-right: calc(-1 * var(--list-group-border-width)); - border-right-width: var(--list-group-border-width); - } -} -@media (min-width: 768px) { - .list-group-horizontal-md { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - } - .list-group-horizontal-md > .list-group-item:first-child:not(:last-child) { - border-bottom-right-radius: var(--list-group-border-radius); - border-top-left-radius: 0; - } - .list-group-horizontal-md > .list-group-item:last-child:not(:first-child) { - border-top-left-radius: var(--list-group-border-radius); - border-bottom-right-radius: 0; - } - .list-group-horizontal-md > .list-group-item.active { - margin-top: 0; - } - .list-group-horizontal-md > .list-group-item + .list-group-item { - border-top-width: var(--list-group-border-width); - border-right-width: 0; - } - .list-group-horizontal-md > .list-group-item + .list-group-item.active { - margin-right: calc(-1 * var(--list-group-border-width)); - border-right-width: var(--list-group-border-width); - } -} -@media (min-width: 992px) { - .list-group-horizontal-lg { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - } - .list-group-horizontal-lg > .list-group-item:first-child:not(:last-child) { - border-bottom-right-radius: var(--list-group-border-radius); - border-top-left-radius: 0; - } - .list-group-horizontal-lg > .list-group-item:last-child:not(:first-child) { - border-top-left-radius: var(--list-group-border-radius); - border-bottom-right-radius: 0; - } - .list-group-horizontal-lg > .list-group-item.active { - margin-top: 0; - } - .list-group-horizontal-lg > .list-group-item + .list-group-item { - border-top-width: var(--list-group-border-width); - border-right-width: 0; - } - .list-group-horizontal-lg > .list-group-item + .list-group-item.active { - margin-right: calc(-1 * var(--list-group-border-width)); - border-right-width: var(--list-group-border-width); - } -} -@media (min-width: 1200px) { - .list-group-horizontal-xl { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - } - .list-group-horizontal-xl > .list-group-item:first-child:not(:last-child) { - border-bottom-right-radius: var(--list-group-border-radius); - border-top-left-radius: 0; - } - .list-group-horizontal-xl > .list-group-item:last-child:not(:first-child) { - border-top-left-radius: var(--list-group-border-radius); - border-bottom-right-radius: 0; - } - .list-group-horizontal-xl > .list-group-item.active { - margin-top: 0; - } - .list-group-horizontal-xl > .list-group-item + .list-group-item { - border-top-width: var(--list-group-border-width); - border-right-width: 0; - } - .list-group-horizontal-xl > .list-group-item + .list-group-item.active { - margin-right: calc(-1 * var(--list-group-border-width)); - border-right-width: var(--list-group-border-width); - } -} -@media (min-width: 1400px) { - .list-group-horizontal-xxl { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - } - .list-group-horizontal-xxl > .list-group-item:first-child:not(:last-child) { - border-bottom-right-radius: var(--list-group-border-radius); - border-top-left-radius: 0; - } - .list-group-horizontal-xxl > .list-group-item:last-child:not(:first-child) { - border-top-left-radius: var(--list-group-border-radius); - border-bottom-right-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: var(--list-group-border-width); - border-right-width: 0; - } - .list-group-horizontal-xxl > .list-group-item + .list-group-item.active { - margin-right: calc(-1 * var(--list-group-border-width)); - border-right-width: var(--list-group-border-width); - } -} -.list-group-flush { - border-radius: 0; -} -.list-group-flush > .list-group-item { - border-width: 0 0 var(--list-group-border-width); -} -.list-group-flush > .list-group-item:last-child { - border-bottom-width: 0; +[dir="rtl"] .list-group-horizontal-md>.list-group-item+.list-group-item { + + border-top-width: var(--list-group-border-width); + border-right-width: 0; + } -.list-group-item-primary { - color: #010134; - background-color: #ccccdd; -} -.list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus { - color: #010134; - background-color: #b8b8c7; -} -.list-group-item-primary.list-group-item-action.active { - color: hsl(0, 0%, 100%); - background-color: #010134; - border-color: #010134; +[dir="rtl"] .list-group-horizontal-md>.list-group-item+.list-group-item.active { + + margin-left: calc(-1 * var(--list-group-border-width)); + border-right-width: var(--list-group-border-width); + } -.list-group-item-secondary { - color: #41464c; - background-color: #e2e3e5; -} -.list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus { - color: #41464c; - background-color: #cbccce; -} -.list-group-item-secondary.list-group-item-action.active { - color: hsl(0, 0%, 100%); - background-color: #41464c; - border-color: #41464c; +[dir="rtl"] .list-group-horizontal-lg>.list-group-item+.list-group-item { + + border-top-width: var(--list-group-border-width); + border-right-width: 0; + } -.list-group-item-success { - color: #294f29; - background-color: #dae6da; -} -.list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus { - color: #294f29; - background-color: #c4cfc4; -} -.list-group-item-success.list-group-item-action.active { - color: hsl(0, 0%, 100%); - background-color: #294f29; - border-color: #294f29; +[dir="rtl"] .list-group-horizontal-lg>.list-group-item+.list-group-item.active { + + margin-left: calc(-1 * var(--list-group-border-width)); + border-right-width: var(--list-group-border-width); + } -.list-group-item-info { - color: #1d3b55; - background-color: #d6e0e8; -} -.list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus { - color: #1d3b55; - background-color: #c1cad1; -} -.list-group-item-info.list-group-item-action.active { - color: hsl(0, 0%, 100%); - background-color: #1d3b55; - border-color: #1d3b55; +[dir="rtl"] .list-group-horizontal-xl>.list-group-item+.list-group-item { + + border-top-width: var(--list-group-border-width); + border-right-width: 0; + } -.list-group-item-warning { - color: #683b00; - background-color: #efe0cc; -} -.list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus { - color: #683b00; - background-color: #d7cab8; -} -.list-group-item-warning.list-group-item-action.active { - color: hsl(0, 0%, 100%); - background-color: #683b00; - border-color: #683b00; +[dir="rtl"] .list-group-horizontal-xl>.list-group-item+.list-group-item.active { + + margin-left: calc(-1 * var(--list-group-border-width)); + border-right-width: var(--list-group-border-width); + } -.list-group-item-danger { - color: #63130e; - background-color: #edd2d1; -} -.list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus { - color: #63130e; - background-color: #d5bdbc; -} -.list-group-item-danger.list-group-item-action.active { - color: hsl(0, 0%, 100%); - background-color: #63130e; - border-color: #63130e; +[dir="rtl"] .list-group-horizontal-xxl>.list-group-item+.list-group-item { + + border-top-width: var(--list-group-border-width); + border-right-width: 0; + } -.list-group-item-light { - color: #646464; - background-color: #fefefe; -} -.list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus { - color: #646464; - background-color: #e5e5e5; -} -.list-group-item-light.list-group-item-action.active { - color: hsl(0, 0%, 100%); - background-color: #646464; - border-color: #646464; +[dir="rtl"] .list-group-horizontal-xxl>.list-group-item+.list-group-item.active { + + margin-left: calc(-1 * var(--list-group-border-width)); + border-right-width: var(--list-group-border-width); + } -.list-group-item-dark { - color: #202327; - background-color: #d7d8d9; -} -.list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus { - color: #202327; - background-color: #c2c2c3; -} -.list-group-item-dark.list-group-item-action.active { - color: hsl(0, 0%, 100%); - background-color: #202327; - border-color: #202327; +[dir="rtl"] .toast-header .btn-close { + + margin-right: calc(-0.5 * var(--toast-padding-x)); + margin-left: var(--toast-padding-x); } -.btn-close { - -webkit-box-sizing: content-box; - box-sizing: content-box; - width: 1em; - height: 1em; - padding: 0.25em 0.25em; - color: hsl(0, 0%, 0%); - background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='hsl%280, 0%, 0%%29'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; - border: 0; - border-radius: 0.25rem; - opacity: 0.5; -} -.btn-close:hover { - color: hsl(0, 0%, 0%); - text-decoration: none; - opacity: 0.75; -} -.btn-close:focus { - outline: 0; - -webkit-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); - box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); - opacity: 1; -} -.btn-close:disabled, .btn-close.disabled { - pointer-events: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - opacity: 0.25; +[dir="rtl"] .modal { + + --modal-zindex: 1050; + --modal-width: 500px; + --modal-padding: 1rem; + --modal-margin: 0.5rem; + --modal-color: ; + --modal-bg: hsl(0, 0%, 100%); + --modal-border-color: var(--border-color-translucent); + --modal-border-width: 1px; + --modal-border-radius: 0.3rem; + --modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); + --modal-inner-border-radius: calc(0.3rem - 1px); + --modal-header-padding-x: 1rem; + --modal-header-padding-y: 1rem; + --modal-header-padding: 1rem 1rem; + --modal-header-border-color: var(--border-color); + --modal-header-border-width: 1px; + --modal-title-line-height: 1.5; + --modal-footer-gap: 0.5rem; + --modal-footer-bg: ; + --modal-footer-border-color: var(--border-color); + --modal-footer-border-width: 1px; + position: fixed; + top: 0; + right: 0; + z-index: var(--modal-zindex); + display: none; + width: 100%; + height: 100%; + overflow-x: hidden; + overflow-y: auto; + outline: 0; } -.btn-close-white { - -webkit-filter: invert(1) grayscale(100%) brightness(200%); - filter: invert(1) grayscale(100%) brightness(200%); +[dir="rtl"] .modal-backdrop { + + --backdrop-zindex: 1040; + --backdrop-bg: hsl(0, 0%, 0%); + --backdrop-opacity: 0.5; + position: fixed; + top: 0; + right: 0; + z-index: var(--backdrop-zindex); + width: 100vw; + height: 100vh; + background-color: var(--backdrop-bg); } -.toast { - --toast-zindex: 1090; - --toast-padding-x: 0.75rem; - --toast-padding-y: 0.5rem; - --toast-spacing: 1em; - --toast-max-width: 350px; - --toast-font-size: 0.875rem; - --toast-color: ; - --toast-bg: rgba(255, 255, 255, 0.85); - --toast-border-width: 1px; - --toast-border-color: var(--border-color-translucent); - --toast-border-radius: 0.25rem; - --toast-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); - --toast-header-color: hsl(210, 7%, 46%); - --toast-header-bg: rgba(255, 255, 255, 0.85); - --toast-header-border-color: rgba(0, 0, 0, 0.05); - width: var(--toast-max-width); - max-width: 100%; - font-size: var(--toast-font-size); - color: var(--toast-color); - pointer-events: auto; - background-color: var(--toast-bg); - background-clip: padding-box; - border: var(--toast-border-width) solid var(--toast-border-color); - -webkit-box-shadow: var(--toast-box-shadow); - box-shadow: var(--toast-box-shadow); - border-radius: var(--toast-border-radius); -} -.toast.showing { - opacity: 0; -} -.toast:not(.show) { - display: none; +[dir="rtl"] .modal-dialog { + + max-width: var(--modal-width); + margin-right: auto; + margin-left: auto; + } -.toast-container { - --toast-zindex: 1090; - position: absolute; - z-index: var(--toast-zindex); - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; - max-width: 100%; - pointer-events: none; -} -.toast-container > :not(:last-child) { - margin-bottom: var(--toast-spacing); -} +[dir="rtl"] } -.toast-header { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding: var(--toast-padding-y) var(--toast-padding-x); - color: var(--toast-header-color); - background-color: var(--toast-header-bg); - background-clip: padding-box; - border-bottom: var(--toast-border-width) solid var(--toast-header-border-color); - border-top-right-radius: calc(var(--toast-border-radius) - var(--toast-border-width)); - border-top-left-radius: calc(var(--toast-border-radius) - var(--toast-border-width)); -} -.toast-header .btn-close { - margin-left: calc(-0.5 * var(--toast-padding-x)); - margin-right: var(--toast-padding-x); -} - -.toast-body { - padding: var(--toast-padding-x); - word-wrap: break-word; -} - -.modal { - --modal-zindex: 1050; - --modal-width: 500px; - --modal-padding: 1rem; - --modal-margin: 0.5rem; - --modal-color: ; - --modal-bg: hsl(0, 0%, 100%); - --modal-border-color: var(--border-color-translucent); - --modal-border-width: 1px; - --modal-border-radius: 0.3rem; - --modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); - --modal-inner-border-radius: calc(0.3rem - 1px); - --modal-header-padding-x: 1rem; - --modal-header-padding-y: 1rem; - --modal-header-padding: 1rem 1rem; - --modal-header-border-color: var(--border-color); - --modal-header-border-width: 1px; - --modal-title-line-height: 1.5; - --modal-footer-gap: 0.5rem; - --modal-footer-bg: ; - --modal-footer-border-color: var(--border-color); - --modal-footer-border-width: 1px; - position: fixed; - top: 0; - right: 0; - z-index: var(--modal-zindex); - display: none; - width: 100%; - height: 100%; - overflow-x: hidden; - overflow-y: auto; - outline: 0; -} - -.modal-dialog { - position: relative; - width: auto; - margin: var(--modal-margin); - pointer-events: none; -} -.modal.fade .modal-dialog { - -webkit-transition: -webkit-transform 0.3s ease-out; - transition: -webkit-transform 0.3s ease-out; - -o-transition: 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 { - -webkit-transition: none; - -o-transition: none; - 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 { - height: calc(100% - var(--modal-margin) * 2); -} -.modal-dialog-scrollable .modal-content { - max-height: 100%; - overflow: hidden; -} -.modal-dialog-scrollable .modal-body { - overflow-y: auto; -} - -.modal-dialog-centered { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - min-height: calc(100% - var(--modal-margin) * 2); -} - -.modal-content { - position: relative; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - width: 100%; - color: var(--modal-color); - pointer-events: auto; - background-color: var(--modal-bg); - background-clip: padding-box; - border: var(--modal-border-width) solid var(--modal-border-color); - border-radius: var(--modal-border-radius); - outline: 0; -} - -.modal-backdrop { - --backdrop-zindex: 1040; - --backdrop-bg: hsl(0, 0%, 0%); - --backdrop-opacity: 0.5; - position: fixed; - top: 0; - right: 0; - z-index: var(--backdrop-zindex); - width: 100vw; - height: 100vh; - background-color: var(--backdrop-bg); -} -.modal-backdrop.fade { - opacity: 0; -} -.modal-backdrop.show { - opacity: var(--backdrop-opacity); -} - -.modal-header { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - padding: var(--modal-header-padding); - border-bottom: var(--modal-header-border-width) solid var(--modal-header-border-color); - border-top-right-radius: var(--modal-inner-border-radius); - border-top-left-radius: var(--modal-inner-border-radius); -} -.modal-header .btn-close { - padding: calc(var(--modal-header-padding-y) * 0.5) calc(var(--modal-header-padding-x) * 0.5); - margin: calc(-0.5 * var(--modal-header-padding-y)) auto calc(-0.5 * var(--modal-header-padding-y)) calc(-0.5 * var(--modal-header-padding-x)); -} - -.modal-title { - margin-bottom: 0; - line-height: var(--modal-title-line-height); -} - -.modal-body { - position: relative; - -webkit-box-flex: 1; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - padding: var(--modal-padding); -} - -.modal-footer { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-negative: 0; - flex-shrink: 0; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; - padding: calc(var(--modal-padding) - var(--modal-footer-gap) * 0.5); - background-color: var(--modal-footer-bg); - border-top: var(--modal-footer-border-width) solid var(--modal-footer-border-color); - border-bottom-left-radius: var(--modal-inner-border-radius); - border-bottom-right-radius: var(--modal-inner-border-radius); -} -.modal-footer > * { - margin: calc(var(--modal-footer-gap) * 0.5); -} - -@media (min-width: 576px) { - .modal { - --modal-margin: 1.75rem; - --modal-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); - } - .modal-dialog { - max-width: var(--modal-width); - margin-left: auto; - margin-right: auto; - } - .modal-sm { - --modal-width: 300px; - } -} -@media (min-width: 992px) { - .modal-lg, - .modal-xl { - --modal-width: 800px; - } -} -@media (min-width: 1200px) { - .modal-xl { - --modal-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, -.modal-fullscreen .modal-footer { - border-radius: 0; -} -.modal-fullscreen .modal-body { - overflow-y: auto; -} - -@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, - .modal-fullscreen-sm-down .modal-footer { - border-radius: 0; - } - .modal-fullscreen-sm-down .modal-body { - overflow-y: auto; - } -} -@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, - .modal-fullscreen-md-down .modal-footer { - border-radius: 0; - } - .modal-fullscreen-md-down .modal-body { - overflow-y: auto; - } -} -@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, - .modal-fullscreen-lg-down .modal-footer { - border-radius: 0; - } - .modal-fullscreen-lg-down .modal-body { - overflow-y: auto; - } -} -@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, - .modal-fullscreen-xl-down .modal-footer { - border-radius: 0; - } - .modal-fullscreen-xl-down .modal-body { - overflow-y: auto; - } -} -@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, - .modal-fullscreen-xxl-down .modal-footer { - border-radius: 0; - } - .modal-fullscreen-xxl-down .modal-body { - overflow-y: auto; - } -} .tooltip { - --tooltip-zindex: 1070; - --tooltip-max-width: 200px; - --tooltip-padding-x: 0.5rem; - --tooltip-padding-y: 0.25rem; - --tooltip-margin: ; - --tooltip-font-size: 0.875rem; - --tooltip-color: hsl(0, 0%, 100%); - --tooltip-bg: hsl(0, 0%, 0%); - --tooltip-border-radius: 0.25rem; - --tooltip-opacity: 0.9; - --tooltip-arrow-width: 0.8rem; - --tooltip-arrow-height: 0.4rem; - z-index: var(--tooltip-zindex); - display: block; - padding: var(--tooltip-arrow-height); - margin: var(--tooltip-margin); - font-family: var(--font-family-body, -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-style: normal; - font-weight: 400; - line-height: 1.5; - text-align: right; - text-align: start; - text-decoration: none; - text-shadow: none; - text-transform: none; - letter-spacing: normal; - word-break: normal; - white-space: normal; - word-spacing: normal; - line-break: auto; - font-size: var(--tooltip-font-size); - word-wrap: break-word; - opacity: 0; -} -.tooltip.show { - opacity: var(--tooltip-opacity); -} -.tooltip .tooltip-arrow { - display: block; - width: var(--tooltip-arrow-width); - height: var(--tooltip-arrow-height); -} -.tooltip .tooltip-arrow::before { - position: absolute; - content: ""; - border-color: transparent; - border-style: solid; + + --tooltip-zindex: 1070; + --tooltip-max-width: 200px; + --tooltip-padding-x: 0.5rem; + --tooltip-padding-y: 0.25rem; + --tooltip-margin: ; + --tooltip-font-size: 0.875rem; + --tooltip-color: var(--white); + --tooltip-bg: hsl(0, 0%, 0%); + --tooltip-border-radius: 0.25rem; + --tooltip-opacity: 0.9; + --tooltip-arrow-width: 0.8rem; + --tooltip-arrow-height: 0.4rem; + z-index: var(--tooltip-zindex); + display: block; + padding: var(--tooltip-arrow-height); + margin: var(--tooltip-margin); + font-family: var(--font-family-body, -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-style: normal; + font-weight: 400; + line-height: 1.5; + text-align: left; + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + letter-spacing: normal; + word-break: normal; + white-space: normal; + word-spacing: normal; + line-break: auto; + font-size: var(--tooltip-font-size); + word-wrap: break-word; + opacity: 0; } -.bs-tooltip-top .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow { - bottom: 0; -} -.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before { - top: -1px; - border-width: var(--tooltip-arrow-height) calc(var(--tooltip-arrow-width) * 0.5) 0; - border-top-color: var(--tooltip-bg); -} -.bs-tooltip-end .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow { - left: 0; - width: var(--tooltip-arrow-height); - height: var(--tooltip-arrow-width); -} -.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before { - right: -1px; - border-width: calc(var(--tooltip-arrow-width) * 0.5) var(--tooltip-arrow-height) calc(var(--tooltip-arrow-width) * 0.5) 0; - border-right-color: var(--tooltip-bg); -} -.bs-tooltip-bottom .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow { - top: 0; -} -.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before { - bottom: -1px; - border-width: 0 calc(var(--tooltip-arrow-width) * 0.5) var(--tooltip-arrow-height); - border-bottom-color: var(--tooltip-bg); -} -.bs-tooltip-start .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow { - right: 0; - width: var(--tooltip-arrow-height); - height: var(--tooltip-arrow-width); -} -.bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before { - left: -1px; - border-width: calc(var(--tooltip-arrow-width) * 0.5) 0 calc(var(--tooltip-arrow-width) * 0.5) var(--tooltip-arrow-height); - border-left-color: var(--tooltip-bg); -} -.tooltip-inner { - max-width: var(--tooltip-max-width); - padding: var(--tooltip-padding-y) var(--tooltip-padding-x); - color: var(--tooltip-color); - text-align: center; - background-color: var(--tooltip-bg); - border-radius: var(--tooltip-border-radius); +[dir="rtl"] /* rtl:begin:ignore */ +.bs-tooltip-end .tooltip-arrow, +[dir="rtl"] .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow { + + right: 0; + width: var(--tooltip-arrow-height); + height: var(--tooltip-arrow-width); } -.popover { - --popover-zindex: 1060; - --popover-max-width: 276px; - --popover-font-size: 0.875rem; - --popover-bg: hsl(0, 0%, 100%); - --popover-border-width: 1px; - --popover-border-color: var(--border-color-translucent); - --popover-border-radius: 0.3rem; - --popover-inner-border-radius: calc(0.3rem - 1px); - --popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); - --popover-header-padding-x: 1rem; - --popover-header-padding-y: 0.5rem; - --popover-header-font-size: 1rem; - --popover-header-color: ; - --popover-header-bg: #f0f0f0; - --popover-body-padding-x: 1rem; - --popover-body-padding-y: 1rem; - --popover-body-color: hsl(210, 11%, 15%); - --popover-arrow-width: 1rem; - --popover-arrow-height: 0.5rem; - --popover-arrow-border: var(--popover-border-color); - z-index: var(--popover-zindex); - display: block; - max-width: var(--popover-max-width); - font-family: var(--font-family-body, -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-style: normal; - font-weight: 400; - line-height: 1.5; - text-align: right; - text-align: start; - text-decoration: none; - text-shadow: none; - text-transform: none; - letter-spacing: normal; - word-break: normal; - white-space: normal; - word-spacing: normal; - line-break: auto; - font-size: var(--popover-font-size); - word-wrap: break-word; - background-color: var(--popover-bg); - background-clip: padding-box; - border: var(--popover-border-width) solid var(--popover-border-color); - border-radius: var(--popover-border-radius); -} -.popover .popover-arrow { - display: block; - width: var(--popover-arrow-width); - height: var(--popover-arrow-height); -} -.popover .popover-arrow::before, .popover .popover-arrow::after { - position: absolute; - display: block; - content: ""; - border-color: transparent; - border-style: solid; - border-width: 0; +[dir="rtl"] .bs-tooltip-end .tooltip-arrow::before, +[dir="rtl"] .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before { + + left: -1px; + border-width: calc(var(--tooltip-arrow-width) * 0.5) var(--tooltip-arrow-height) calc(var(--tooltip-arrow-width) * 0.5) 0; + border-left-color: var(--tooltip-bg); } -.bs-popover-top > .popover-arrow, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow { - bottom: calc(-1 * (var(--popover-arrow-height)) - var(--popover-border-width)); -} -.bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after { - border-width: var(--popover-arrow-height) calc(var(--popover-arrow-width) * 0.5) 0; -} -.bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before { - bottom: 0; - border-top-color: var(--popover-arrow-border); -} -.bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after { - bottom: var(--popover-border-width); - border-top-color: var(--popover-bg); -} -.bs-popover-end > .popover-arrow, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow { - left: calc(-1 * (var(--popover-arrow-height)) - var(--popover-border-width)); - width: var(--popover-arrow-height); - height: var(--popover-arrow-width); -} -.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after { - border-width: calc(var(--popover-arrow-width) * 0.5) var(--popover-arrow-height) calc(var(--popover-arrow-width) * 0.5) 0; -} -.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before { - left: 0; - border-right-color: var(--popover-arrow-border); -} -.bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after { - left: var(--popover-border-width); - border-right-color: var(--popover-bg); -} -.bs-popover-bottom > .popover-arrow, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow { - top: calc(-1 * (var(--popover-arrow-height)) - var(--popover-border-width)); -} -.bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after { - border-width: 0 calc(var(--popover-arrow-width) * 0.5) var(--popover-arrow-height); -} -.bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before { - top: 0; - border-bottom-color: var(--popover-arrow-border); -} -.bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after { - top: var(--popover-border-width); - border-bottom-color: var(--popover-bg); -} -.bs-popover-bottom .popover-header::before, .bs-popover-auto[data-popper-placement^=bottom] .popover-header::before { - position: absolute; - top: 0; - right: 50%; - display: block; - width: var(--popover-arrow-width); - margin-right: calc(-0.5 * var(--popover-arrow-width)); - content: ""; - border-bottom: var(--popover-border-width) solid var(--popover-header-bg); -} -.bs-popover-start > .popover-arrow, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow { - right: calc(-1 * (var(--popover-arrow-height)) - var(--popover-border-width)); - width: var(--popover-arrow-height); - height: var(--popover-arrow-width); -} -.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after { - border-width: calc(var(--popover-arrow-width) * 0.5) 0 calc(var(--popover-arrow-width) * 0.5) var(--popover-arrow-height); -} -.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before { - right: 0; - border-left-color: var(--popover-arrow-border); -} -.bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after { - right: var(--popover-border-width); - border-left-color: var(--popover-bg); -} -.popover-header { - padding: var(--popover-header-padding-y) var(--popover-header-padding-x); - margin-bottom: 0; - font-size: var(--popover-header-font-size); - color: var(--popover-header-color); - background-color: var(--popover-header-bg); - border-bottom: var(--popover-border-width) solid var(--popover-border-color); - border-top-right-radius: var(--popover-inner-border-radius); - border-top-left-radius: var(--popover-inner-border-radius); -} -.popover-header:empty { - display: none; +[dir="rtl"] /* rtl:begin:ignore */ +.bs-tooltip-start .tooltip-arrow, +[dir="rtl"] .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow { + + left: 0; + width: var(--tooltip-arrow-height); + height: var(--tooltip-arrow-width); } -.popover-body { - padding: var(--popover-body-padding-y) var(--popover-body-padding-x); - color: var(--popover-body-color); +[dir="rtl"] .bs-tooltip-start .tooltip-arrow::before, +[dir="rtl"] .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before { + + right: -1px; + border-width: calc(var(--tooltip-arrow-width) * 0.5) 0 calc(var(--tooltip-arrow-width) * 0.5) var(--tooltip-arrow-height); + border-right-color: var(--tooltip-bg); } -.carousel { - position: relative; +[dir="rtl"] .popover { + + --popover-zindex: 1060; + --popover-max-width: 276px; + --popover-font-size: 0.875rem; + --popover-bg: hsl(0, 0%, 100%); + --popover-border-width: 1px; + --popover-border-color: var(--border-color-translucent); + --popover-border-radius: 0.3rem; + --popover-inner-border-radius: calc(0.3rem - 1px); + --popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); + --popover-header-padding-x: 1rem; + --popover-header-padding-y: 0.5rem; + --popover-header-font-size: 1rem; + --popover-header-color: ; + --popover-header-bg: #f0f0f0; + --popover-body-padding-x: 1rem; + --popover-body-padding-y: 1rem; + --popover-body-color: var(--body-color); + --popover-arrow-width: 1rem; + --popover-arrow-height: 0.5rem; + --popover-arrow-border: var(--popover-border-color); + z-index: var(--popover-zindex); + display: block; + max-width: var(--popover-max-width); + font-family: var(--font-family-body, -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-style: normal; + font-weight: 400; + line-height: 1.5; + text-align: left; + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + letter-spacing: normal; + word-break: normal; + white-space: normal; + word-spacing: normal; + line-break: auto; + font-size: var(--popover-font-size); + word-wrap: break-word; + background-color: var(--popover-bg); + background-clip: padding-box; + border: var(--popover-border-width) solid var(--popover-border-color); + border-radius: var(--popover-border-radius); } -.carousel.pointer-event { - -ms-touch-action: pan-y; - touch-action: pan-y; +[dir="rtl"] /* rtl:begin:ignore */ +.bs-popover-end>.popover-arrow, +[dir="rtl"] .bs-popover-auto[data-popper-placement^=right]>.popover-arrow { + + right: calc(-1 * (var(--popover-arrow-height)) - var(--popover-border-width)); + width: var(--popover-arrow-height); + height: var(--popover-arrow-width); } -.carousel-inner { - position: relative; - width: 100%; - overflow: hidden; -} -.carousel-inner::after { - display: block; - clear: both; - content: ""; +[dir="rtl"] .bs-popover-end>.popover-arrow::before, +[dir="rtl"] .bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before { + + right: 0; + border-left-color: var(--popover-arrow-border); } -.carousel-item { - position: relative; - display: none; - float: right; - width: 100%; - margin-left: -100%; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - -webkit-transition: -webkit-transform 0.6s ease-in-out; - transition: -webkit-transform 0.6s ease-in-out; - -o-transition: 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 { - -webkit-transition: none; - -o-transition: none; - transition: none; - } +[dir="rtl"] .bs-popover-end>.popover-arrow::after, +[dir="rtl"] .bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after { + + right: var(--popover-border-width); + border-left-color: var(--popover-bg); } -.carousel-item.active, -.carousel-item-next, -.carousel-item-prev { - display: block; +[dir="rtl"] .bs-popover-bottom .popover-header::before, +[dir="rtl"] .bs-popover-auto[data-popper-placement^=bottom] .popover-header::before { + + position: absolute; + top: 0; + right: 50%; + display: block; + width: var(--popover-arrow-width); + margin-left: calc(-0.5 * var(--popover-arrow-width)); + content: ""; + border-bottom: var(--popover-border-width) solid var(--popover-header-bg); } -.carousel-item-next:not(.carousel-item-start), -.active.carousel-item-end { - -webkit-transform: translateX(-100%); - transform: translateX(-100%); +[dir="rtl"] /* rtl:begin:ignore */ +.bs-popover-start>.popover-arrow, +[dir="rtl"] .bs-popover-auto[data-popper-placement^=left]>.popover-arrow { + + left: calc(-1 * (var(--popover-arrow-height)) - var(--popover-border-width)); + width: var(--popover-arrow-height); + height: var(--popover-arrow-width); } -.carousel-item-prev:not(.carousel-item-end), -.active.carousel-item-start { - -webkit-transform: translateX(100%); - transform: translateX(100%); +[dir="rtl"] .bs-popover-start>.popover-arrow::before, +[dir="rtl"] .bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before { + + left: 0; + border-right-color: var(--popover-arrow-border); } -.carousel-fade .carousel-item { - opacity: 0; - -webkit-transition-property: opacity; - -o-transition-property: opacity; - transition-property: opacity; - -webkit-transform: none; - transform: none; -} -.carousel-fade .carousel-item.active, -.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-start, -.carousel-fade .active.carousel-item-end { - z-index: 0; - opacity: 0; - -webkit-transition: opacity 0s 0.6s; - -o-transition: opacity 0s 0.6s; - transition: opacity 0s 0.6s; -} -@media (prefers-reduced-motion: reduce) { - .carousel-fade .active.carousel-item-start, - .carousel-fade .active.carousel-item-end { - -webkit-transition: none; - -o-transition: none; - transition: none; - } +[dir="rtl"] .bs-popover-start>.popover-arrow::after, +[dir="rtl"] .bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after { + + left: var(--popover-border-width); + border-right-color: var(--popover-bg); } -.carousel-control-prev, -.carousel-control-next { - position: absolute; - top: 0; - bottom: 0; - z-index: 1; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - width: 15%; - padding: 0; - color: hsl(0, 0%, 100%); - text-align: center; - background: none; - border: 0; - opacity: 0.5; - -webkit-transition: opacity 0.15s ease; - -o-transition: opacity 0.15s ease; - transition: opacity 0.15s ease; -} -@media (prefers-reduced-motion: reduce) { - .carousel-control-prev, - .carousel-control-next { - -webkit-transition: none; - -o-transition: none; - transition: none; - } -} -.carousel-control-prev:hover, .carousel-control-prev:focus, -.carousel-control-next:hover, -.carousel-control-next:focus { - color: hsl(0, 0%, 100%); - text-decoration: none; - outline: 0; - opacity: 0.9; +[dir="rtl"] .carousel-item { + + position: relative; + display: none; + float: left; + width: 100%; + margin-right: -100%; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transition: -webkit-transform 0.6s ease-in-out; + transition: -webkit-transform 0.6s ease-in-out; + -o-transition: 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; } -.carousel-control-prev { - right: 0; +[dir="rtl"] .carousel-control-prev { + + right: 0; } -.carousel-control-next { - left: 0; +[dir="rtl"] .carousel-control-next { + + left: 0; } -.carousel-control-prev-icon, -.carousel-control-next-icon { - display: inline-block; - width: 2rem; - height: 2rem; - background-repeat: no-repeat; - background-position: 50%; - background-size: 100% 100%; -} -.carousel-control-next-icon { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='hsl%280, 0%, 100%%29'%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"); +[dir="rtl"] .carousel-indicators { + + position: absolute; + left: 0; + bottom: 0; + right: 0; + z-index: 2; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + padding: 0; + margin-right: 15%; + margin-bottom: 1rem; + margin-left: 15%; + list-style: none; } -.carousel-control-prev-icon { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='hsl%280, 0%, 100%%29'%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"); +[dir="rtl"] .carousel-indicators [data-bs-target] { + + -webkit-box-sizing: content-box; + box-sizing: content-box; + -webkit-box-flex: 0; + -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: var(--body-bg); + background-clip: padding-box; + border: 0; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; + opacity: 0.5; + -webkit-transition: opacity 0.6s ease; + -o-transition: opacity 0.6s ease; + transition: opacity 0.6s ease; } -.carousel-indicators { - position: absolute; - left: 0; - bottom: 0; - right: 0; - z-index: 2; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - padding: 0; - margin-left: 15%; - margin-bottom: 1rem; - margin-right: 15%; - list-style: none; -} -.carousel-indicators [data-bs-target] { - -webkit-box-sizing: content-box; - box-sizing: content-box; - -webkit-box-flex: 0; - -ms-flex: 0 1 auto; - flex: 0 1 auto; - width: 30px; - height: 3px; - padding: 0; - margin-left: 3px; - margin-right: 3px; - text-indent: -999px; - cursor: pointer; - background-color: hsl(0, 0%, 100%); - background-clip: padding-box; - border: 0; - border-top: 10px solid transparent; - border-bottom: 10px solid transparent; - opacity: 0.5; - -webkit-transition: opacity 0.6s ease; - -o-transition: opacity 0.6s ease; - transition: opacity 0.6s ease; -} -@media (prefers-reduced-motion: reduce) { - .carousel-indicators [data-bs-target] { - -webkit-transition: none; - -o-transition: none; - transition: none; - } -} -.carousel-indicators .active { - opacity: 1; +[dir="rtl"] .carousel-caption { + + position: absolute; + left: 15%; + bottom: 1.25rem; + right: 15%; + padding-top: 1.25rem; + padding-bottom: 1.25rem; + color: var(--white); + text-align: center; } -.carousel-caption { - position: absolute; - left: 15%; - bottom: 1.25rem; - right: 15%; - padding-top: 1.25rem; - padding-bottom: 1.25rem; - color: hsl(0, 0%, 100%); - text-align: center; -} +[dir="rtl"] } -.carousel-dark .carousel-control-next-icon, -.carousel-dark .carousel-control-prev-icon { - -webkit-filter: invert(1) grayscale(100); - filter: invert(1) grayscale(100); -} -.carousel-dark .carousel-indicators [data-bs-target] { - background-color: hsl(0, 0%, 0%); -} -.carousel-dark .carousel-caption { - color: hsl(0, 0%, 0%); -} - -.spinner-grow, .spinner-border { - display: inline-block; - width: var(--spinner-width); - height: var(--spinner-height); - vertical-align: var(--spinner-vertical-align); - border-radius: 50%; - -webkit-animation: var(--spinner-animation-speed) linear infinite var(--spinner-animation-name); - animation: var(--spinner-animation-speed) linear infinite var(--spinner-animation-name); + + --spinner-width: 2rem; + --spinner-height: 2rem; + --spinner-vertical-align: -0.125rem; + --spinner-border-width: 0.25rem; + --spinner-animation-speed: 0.75s; + --spinner-animation-name: spinner-border; + border: var(--spinner-border-width) solid currentcolor; + border-left-color: transparent; } -@-webkit-keyframes spinner-border { - to { - -webkit-transform: rotate(360deg) ; - transform: rotate(360deg) ; - } -} - -@keyframes spinner-border { - to { - -webkit-transform: rotate(360deg) ; - transform: rotate(360deg) ; - } -} -.spinner-border { - --spinner-width: 2rem; - --spinner-height: 2rem; - --spinner-vertical-align: -0.125em; - --spinner-border-width: 0.25em; - --spinner-animation-speed: 0.75s; - --spinner-animation-name: spinner-border; - border: var(--spinner-border-width) solid currentcolor; - border-left-color: transparent; -} - -.spinner-border-sm { - --spinner-width: 1rem; - --spinner-height: 1rem; - --spinner-border-width: 0.2em; -} - -@-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 { - --spinner-width: 2rem; - --spinner-height: 2rem; - --spinner-vertical-align: -0.125em; - --spinner-animation-speed: 0.75s; - --spinner-animation-name: spinner-grow; - background-color: currentcolor; - opacity: 0; -} - -.spinner-grow-sm { - --spinner-width: 1rem; - --spinner-height: 1rem; -} - -@media (prefers-reduced-motion: reduce) { - .spinner-border, - .spinner-grow { - --spinner-animation-speed: 1.5s; - } -} -.offcanvas, .offcanvas-xxl, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm { - --offcanvas-zindex: 1045; - --offcanvas-width: 400px; - --offcanvas-height: 30vh; - --offcanvas-padding-x: 1rem; - --offcanvas-padding-y: 1rem; - --offcanvas-color: ; - --offcanvas-bg: hsl(0, 0%, 100%); - --offcanvas-border-width: 1px; - --offcanvas-border-color: var(--border-color-translucent); - --offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); -} +[dir="rtl"] } @media (max-width: 575.98px) { - .offcanvas-sm { - position: fixed; - bottom: 0; - z-index: var(--offcanvas-zindex); - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - max-width: 100%; - color: var(--offcanvas-color); - visibility: hidden; - background-color: var(--offcanvas-bg); - background-clip: padding-box; - outline: 0; - -webkit-transition: -webkit-transform 0.3s ease-in-out; - transition: -webkit-transform 0.3s ease-in-out; - -o-transition: transform 0.3s ease-in-out; - transition: transform 0.3s ease-in-out; - transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; - } -} -@media (max-width: 575.98px) and (prefers-reduced-motion: reduce) { - .offcanvas-sm { - -webkit-transition: none; - -o-transition: none; - transition: none; - } -} -@media (max-width: 575.98px) { - .offcanvas-sm.offcanvas-start { - top: 0; - right: 0; - width: var(--offcanvas-width); - border-left: var(--offcanvas-border-width) solid var(--offcanvas-border-color); - -webkit-transform: translateX(100%); - transform: translateX(100%); - } -} -@media (max-width: 575.98px) { - .offcanvas-sm.offcanvas-end { - top: 0; - left: 0; - width: var(--offcanvas-width); - border-right: var(--offcanvas-border-width) solid var(--offcanvas-border-color); - -webkit-transform: translateX(-100%); - transform: translateX(-100%); - } -} -@media (max-width: 575.98px) { - .offcanvas-sm.offcanvas-top { - top: 0; - left: 0; - right: 0; - height: var(--offcanvas-height); - max-height: 100%; - border-bottom: var(--offcanvas-border-width) solid var(--offcanvas-border-color); - -webkit-transform: translateY(-100%); - transform: translateY(-100%); - } -} -@media (max-width: 575.98px) { - .offcanvas-sm.offcanvas-bottom { - left: 0; - right: 0; - height: var(--offcanvas-height); - max-height: 100%; - border-top: var(--offcanvas-border-width) solid var(--offcanvas-border-color); - -webkit-transform: translateY(100%); - transform: translateY(100%); - } -} -@media (max-width: 575.98px) { - .offcanvas-sm.showing, .offcanvas-sm.show:not(.hiding) { - -webkit-transform: none; - transform: none; - } -} -@media (max-width: 575.98px) { - .offcanvas-sm.showing, .offcanvas-sm.hiding, .offcanvas-sm.show { - visibility: visible; - } -} -@media (min-width: 576px) { - .offcanvas-sm { - --offcanvas-height: auto; - --offcanvas-border-width: 0; - background-color: transparent !important; - } - .offcanvas-sm .offcanvas-header { - display: none; - } - .offcanvas-sm .offcanvas-body { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - padding: 0; - overflow-y: visible; - background-color: transparent !important; - } + + .offcanvas-sm.offcanvas-start { + top: 0; + right: 0; + width: var(--offcanvas-width); + border-right: var(--offcanvas-border-width) solid var(--offcanvas-border-color); + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + } -@media (max-width: 767.98px) { - .offcanvas-md { - position: fixed; - bottom: 0; - z-index: var(--offcanvas-zindex); - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - max-width: 100%; - color: var(--offcanvas-color); - visibility: hidden; - background-color: var(--offcanvas-bg); - background-clip: padding-box; - outline: 0; - -webkit-transition: -webkit-transform 0.3s ease-in-out; - transition: -webkit-transform 0.3s ease-in-out; - -o-transition: transform 0.3s ease-in-out; - transition: transform 0.3s ease-in-out; - transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; - } -} -@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) { - .offcanvas-md { - -webkit-transition: none; - -o-transition: none; - transition: none; - } -} -@media (max-width: 767.98px) { - .offcanvas-md.offcanvas-start { - top: 0; - right: 0; - width: var(--offcanvas-width); - border-left: var(--offcanvas-border-width) solid var(--offcanvas-border-color); - -webkit-transform: translateX(100%); - transform: translateX(100%); - } -} -@media (max-width: 767.98px) { - .offcanvas-md.offcanvas-end { - top: 0; - left: 0; - width: var(--offcanvas-width); - border-right: var(--offcanvas-border-width) solid var(--offcanvas-border-color); - -webkit-transform: translateX(-100%); - transform: translateX(-100%); - } -} -@media (max-width: 767.98px) { - .offcanvas-md.offcanvas-top { - top: 0; - left: 0; - right: 0; - height: var(--offcanvas-height); - max-height: 100%; - border-bottom: var(--offcanvas-border-width) solid var(--offcanvas-border-color); - -webkit-transform: translateY(-100%); - transform: translateY(-100%); - } -} -@media (max-width: 767.98px) { - .offcanvas-md.offcanvas-bottom { - left: 0; - right: 0; - height: var(--offcanvas-height); - max-height: 100%; - border-top: var(--offcanvas-border-width) solid var(--offcanvas-border-color); - -webkit-transform: translateY(100%); - transform: translateY(100%); - } -} -@media (max-width: 767.98px) { - .offcanvas-md.showing, .offcanvas-md.show:not(.hiding) { - -webkit-transform: none; - transform: none; - } -} -@media (max-width: 767.98px) { - .offcanvas-md.showing, .offcanvas-md.hiding, .offcanvas-md.show { - visibility: visible; - } -} -@media (min-width: 768px) { - .offcanvas-md { - --offcanvas-height: auto; - --offcanvas-border-width: 0; - background-color: transparent !important; - } - .offcanvas-md .offcanvas-header { - display: none; - } - .offcanvas-md .offcanvas-body { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - padding: 0; - overflow-y: visible; - background-color: transparent !important; - } +[dir="rtl"] } + +@media (max-width: 575.98px) { + + .offcanvas-sm.offcanvas-end { + top: 0; + left: 0; + width: var(--offcanvas-width); + border-left: var(--offcanvas-border-width) solid var(--offcanvas-border-color); + -webkit-transform: translateX(100%); + transform: translateX(100%); + } -@media (max-width: 991.98px) { - .offcanvas-lg { - position: fixed; - bottom: 0; - z-index: var(--offcanvas-zindex); - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - max-width: 100%; - color: var(--offcanvas-color); - visibility: hidden; - background-color: var(--offcanvas-bg); - background-clip: padding-box; - outline: 0; - -webkit-transition: -webkit-transform 0.3s ease-in-out; - transition: -webkit-transform 0.3s ease-in-out; - -o-transition: transform 0.3s ease-in-out; - transition: transform 0.3s ease-in-out; - transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; - } -} -@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) { - .offcanvas-lg { - -webkit-transition: none; - -o-transition: none; - transition: none; - } -} -@media (max-width: 991.98px) { - .offcanvas-lg.offcanvas-start { - top: 0; - right: 0; - width: var(--offcanvas-width); - border-left: var(--offcanvas-border-width) solid var(--offcanvas-border-color); - -webkit-transform: translateX(100%); - transform: translateX(100%); - } -} -@media (max-width: 991.98px) { - .offcanvas-lg.offcanvas-end { - top: 0; - left: 0; - width: var(--offcanvas-width); - border-right: var(--offcanvas-border-width) solid var(--offcanvas-border-color); - -webkit-transform: translateX(-100%); - transform: translateX(-100%); - } -} -@media (max-width: 991.98px) { - .offcanvas-lg.offcanvas-top { - top: 0; - left: 0; - right: 0; - height: var(--offcanvas-height); - max-height: 100%; - border-bottom: var(--offcanvas-border-width) solid var(--offcanvas-border-color); - -webkit-transform: translateY(-100%); - transform: translateY(-100%); - } -} -@media (max-width: 991.98px) { - .offcanvas-lg.offcanvas-bottom { - left: 0; - right: 0; - height: var(--offcanvas-height); - max-height: 100%; - border-top: var(--offcanvas-border-width) solid var(--offcanvas-border-color); - -webkit-transform: translateY(100%); - transform: translateY(100%); - } -} -@media (max-width: 991.98px) { - .offcanvas-lg.showing, .offcanvas-lg.show:not(.hiding) { - -webkit-transform: none; - transform: none; - } -} -@media (max-width: 991.98px) { - .offcanvas-lg.showing, .offcanvas-lg.hiding, .offcanvas-lg.show { - visibility: visible; - } -} -@media (min-width: 992px) { - .offcanvas-lg { - --offcanvas-height: auto; - --offcanvas-border-width: 0; - background-color: transparent !important; - } - .offcanvas-lg .offcanvas-header { - display: none; - } - .offcanvas-lg .offcanvas-body { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - padding: 0; - overflow-y: visible; - background-color: transparent !important; - } +[dir="rtl"] } + +@media (max-width: 575.98px) { + + .offcanvas-sm.offcanvas-top { + top: 0; + left: 0; + right: 0; + height: var(--offcanvas-height); + max-height: 100%; + border-bottom: var(--offcanvas-border-width) solid var(--offcanvas-border-color); + -webkit-transform: translateY(-100%); + transform: translateY(-100%); + } -@media (max-width: 1199.98px) { - .offcanvas-xl { - position: fixed; - bottom: 0; - z-index: var(--offcanvas-zindex); - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - max-width: 100%; - color: var(--offcanvas-color); - visibility: hidden; - background-color: var(--offcanvas-bg); - background-clip: padding-box; - outline: 0; - -webkit-transition: -webkit-transform 0.3s ease-in-out; - transition: -webkit-transform 0.3s ease-in-out; - -o-transition: transform 0.3s ease-in-out; - transition: transform 0.3s ease-in-out; - transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; - } -} -@media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) { - .offcanvas-xl { - -webkit-transition: none; - -o-transition: none; - transition: none; - } -} -@media (max-width: 1199.98px) { - .offcanvas-xl.offcanvas-start { - top: 0; - right: 0; - width: var(--offcanvas-width); - border-left: var(--offcanvas-border-width) solid var(--offcanvas-border-color); - -webkit-transform: translateX(100%); - transform: translateX(100%); - } -} -@media (max-width: 1199.98px) { - .offcanvas-xl.offcanvas-end { - top: 0; - left: 0; - width: var(--offcanvas-width); - border-right: var(--offcanvas-border-width) solid var(--offcanvas-border-color); - -webkit-transform: translateX(-100%); - transform: translateX(-100%); - } -} -@media (max-width: 1199.98px) { - .offcanvas-xl.offcanvas-top { - top: 0; - left: 0; - right: 0; - height: var(--offcanvas-height); - max-height: 100%; - border-bottom: var(--offcanvas-border-width) solid var(--offcanvas-border-color); - -webkit-transform: translateY(-100%); - transform: translateY(-100%); - } -} -@media (max-width: 1199.98px) { - .offcanvas-xl.offcanvas-bottom { - left: 0; - right: 0; - height: var(--offcanvas-height); - max-height: 100%; - border-top: var(--offcanvas-border-width) solid var(--offcanvas-border-color); - -webkit-transform: translateY(100%); - transform: translateY(100%); - } -} -@media (max-width: 1199.98px) { - .offcanvas-xl.showing, .offcanvas-xl.show:not(.hiding) { - -webkit-transform: none; - transform: none; - } -} -@media (max-width: 1199.98px) { - .offcanvas-xl.showing, .offcanvas-xl.hiding, .offcanvas-xl.show { - visibility: visible; - } -} -@media (min-width: 1200px) { - .offcanvas-xl { - --offcanvas-height: auto; - --offcanvas-border-width: 0; - background-color: transparent !important; - } - .offcanvas-xl .offcanvas-header { - display: none; - } - .offcanvas-xl .offcanvas-body { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - padding: 0; - overflow-y: visible; - background-color: transparent !important; - } +[dir="rtl"] } + +@media (max-width: 575.98px) { + + .offcanvas-sm.offcanvas-bottom { + left: 0; + right: 0; + height: var(--offcanvas-height); + max-height: 100%; + border-top: var(--offcanvas-border-width) solid var(--offcanvas-border-color); + -webkit-transform: translateY(100%); + transform: translateY(100%); + } -@media (max-width: 1399.98px) { - .offcanvas-xxl { - position: fixed; - bottom: 0; - z-index: var(--offcanvas-zindex); - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - max-width: 100%; - color: var(--offcanvas-color); - visibility: hidden; - background-color: var(--offcanvas-bg); - background-clip: padding-box; - outline: 0; - -webkit-transition: -webkit-transform 0.3s ease-in-out; - transition: -webkit-transform 0.3s ease-in-out; - -o-transition: transform 0.3s ease-in-out; - transition: transform 0.3s ease-in-out; - transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; - } -} -@media (max-width: 1399.98px) and (prefers-reduced-motion: reduce) { - .offcanvas-xxl { - -webkit-transition: none; - -o-transition: none; - transition: none; - } -} -@media (max-width: 1399.98px) { - .offcanvas-xxl.offcanvas-start { - top: 0; - right: 0; - width: var(--offcanvas-width); - border-left: var(--offcanvas-border-width) solid var(--offcanvas-border-color); - -webkit-transform: translateX(100%); - transform: translateX(100%); - } -} -@media (max-width: 1399.98px) { - .offcanvas-xxl.offcanvas-end { - top: 0; - left: 0; - width: var(--offcanvas-width); - border-right: var(--offcanvas-border-width) solid var(--offcanvas-border-color); - -webkit-transform: translateX(-100%); - transform: translateX(-100%); - } -} -@media (max-width: 1399.98px) { - .offcanvas-xxl.offcanvas-top { - top: 0; - left: 0; - right: 0; - height: var(--offcanvas-height); - max-height: 100%; - border-bottom: var(--offcanvas-border-width) solid var(--offcanvas-border-color); - -webkit-transform: translateY(-100%); - transform: translateY(-100%); - } -} -@media (max-width: 1399.98px) { - .offcanvas-xxl.offcanvas-bottom { - left: 0; - right: 0; - height: var(--offcanvas-height); - max-height: 100%; - border-top: var(--offcanvas-border-width) solid var(--offcanvas-border-color); - -webkit-transform: translateY(100%); - transform: translateY(100%); - } -} -@media (max-width: 1399.98px) { - .offcanvas-xxl.showing, .offcanvas-xxl.show:not(.hiding) { - -webkit-transform: none; - transform: none; - } -} -@media (max-width: 1399.98px) { - .offcanvas-xxl.showing, .offcanvas-xxl.hiding, .offcanvas-xxl.show { - visibility: visible; - } -} -@media (min-width: 1400px) { - .offcanvas-xxl { - --offcanvas-height: auto; - --offcanvas-border-width: 0; - background-color: transparent !important; - } - .offcanvas-xxl .offcanvas-header { - display: none; - } - .offcanvas-xxl .offcanvas-body { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - padding: 0; - overflow-y: visible; - background-color: transparent !important; - } +[dir="rtl"] } + +@media (max-width: 767.98px) { + + .offcanvas-md.offcanvas-start { + top: 0; + right: 0; + width: var(--offcanvas-width); + border-right: var(--offcanvas-border-width) solid var(--offcanvas-border-color); + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + } -.offcanvas { - position: fixed; - bottom: 0; - z-index: var(--offcanvas-zindex); - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - max-width: 100%; - color: var(--offcanvas-color); - visibility: hidden; - background-color: var(--offcanvas-bg); - background-clip: padding-box; - outline: 0; - -webkit-transition: -webkit-transform 0.3s ease-in-out; - transition: -webkit-transform 0.3s ease-in-out; - -o-transition: transform 0.3s ease-in-out; - transition: transform 0.3s ease-in-out; - transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; +[dir="rtl"] } + +@media (max-width: 767.98px) { + + .offcanvas-md.offcanvas-end { + top: 0; + left: 0; + width: var(--offcanvas-width); + border-left: var(--offcanvas-border-width) solid var(--offcanvas-border-color); + -webkit-transform: translateX(100%); + transform: translateX(100%); + } -@media (prefers-reduced-motion: reduce) { - .offcanvas { - -webkit-transition: none; - -o-transition: none; - transition: none; - } + +[dir="rtl"] } + +@media (max-width: 767.98px) { + + .offcanvas-md.offcanvas-top { + top: 0; + left: 0; + right: 0; + height: var(--offcanvas-height); + max-height: 100%; + border-bottom: var(--offcanvas-border-width) solid var(--offcanvas-border-color); + -webkit-transform: translateY(-100%); + transform: translateY(-100%); + } + +[dir="rtl"] } + +@media (max-width: 767.98px) { + + .offcanvas-md.offcanvas-bottom { + left: 0; + right: 0; + height: var(--offcanvas-height); + max-height: 100%; + border-top: var(--offcanvas-border-width) solid var(--offcanvas-border-color); + -webkit-transform: translateY(100%); + transform: translateY(100%); + +} + +[dir="rtl"] } + +@media (max-width: 991.98px) { + + .offcanvas-lg.offcanvas-start { + top: 0; + right: 0; + width: var(--offcanvas-width); + border-right: var(--offcanvas-border-width) solid var(--offcanvas-border-color); + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + +} + +[dir="rtl"] } + +@media (max-width: 991.98px) { + + .offcanvas-lg.offcanvas-end { + top: 0; + left: 0; + width: var(--offcanvas-width); + border-left: var(--offcanvas-border-width) solid var(--offcanvas-border-color); + -webkit-transform: translateX(100%); + transform: translateX(100%); + +} + +[dir="rtl"] } + +@media (max-width: 991.98px) { + + .offcanvas-lg.offcanvas-top { + top: 0; + left: 0; + right: 0; + height: var(--offcanvas-height); + max-height: 100%; + border-bottom: var(--offcanvas-border-width) solid var(--offcanvas-border-color); + -webkit-transform: translateY(-100%); + transform: translateY(-100%); + +} + +[dir="rtl"] } + +@media (max-width: 991.98px) { + + .offcanvas-lg.offcanvas-bottom { + left: 0; + right: 0; + height: var(--offcanvas-height); + max-height: 100%; + border-top: var(--offcanvas-border-width) solid var(--offcanvas-border-color); + -webkit-transform: translateY(100%); + transform: translateY(100%); + +} + +[dir="rtl"] } + +@media (max-width: 1199.98px) { + + .offcanvas-xl.offcanvas-start { + top: 0; + right: 0; + width: var(--offcanvas-width); + border-right: var(--offcanvas-border-width) solid var(--offcanvas-border-color); + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + +} + +[dir="rtl"] } + +@media (max-width: 1199.98px) { + + .offcanvas-xl.offcanvas-end { + top: 0; + left: 0; + width: var(--offcanvas-width); + border-left: var(--offcanvas-border-width) solid var(--offcanvas-border-color); + -webkit-transform: translateX(100%); + transform: translateX(100%); + +} + +[dir="rtl"] } + +@media (max-width: 1199.98px) { + + .offcanvas-xl.offcanvas-top { + top: 0; + left: 0; + right: 0; + height: var(--offcanvas-height); + max-height: 100%; + border-bottom: var(--offcanvas-border-width) solid var(--offcanvas-border-color); + -webkit-transform: translateY(-100%); + transform: translateY(-100%); + +} + +[dir="rtl"] } + +@media (max-width: 1199.98px) { + + .offcanvas-xl.offcanvas-bottom { + left: 0; + right: 0; + height: var(--offcanvas-height); + max-height: 100%; + border-top: var(--offcanvas-border-width) solid var(--offcanvas-border-color); + -webkit-transform: translateY(100%); + transform: translateY(100%); + +} + +[dir="rtl"] } + +@media (max-width: 1399.98px) { + + .offcanvas-xxl.offcanvas-start { + top: 0; + right: 0; + width: var(--offcanvas-width); + border-right: var(--offcanvas-border-width) solid var(--offcanvas-border-color); + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + +} + +[dir="rtl"] } + +@media (max-width: 1399.98px) { + + .offcanvas-xxl.offcanvas-end { + top: 0; + left: 0; + width: var(--offcanvas-width); + border-left: var(--offcanvas-border-width) solid var(--offcanvas-border-color); + -webkit-transform: translateX(100%); + transform: translateX(100%); + +} + +[dir="rtl"] } + +@media (max-width: 1399.98px) { + + .offcanvas-xxl.offcanvas-top { + top: 0; + left: 0; + right: 0; + height: var(--offcanvas-height); + max-height: 100%; + border-bottom: var(--offcanvas-border-width) solid var(--offcanvas-border-color); + -webkit-transform: translateY(-100%); + transform: translateY(-100%); + +} + +[dir="rtl"] } + +@media (max-width: 1399.98px) { + + .offcanvas-xxl.offcanvas-bottom { + left: 0; + right: 0; + height: var(--offcanvas-height); + max-height: 100%; + border-top: var(--offcanvas-border-width) solid var(--offcanvas-border-color); + -webkit-transform: translateY(100%); + transform: translateY(100%); + +} + +[dir="rtl"] } + .offcanvas.offcanvas-start { - top: 0; - right: 0; - width: var(--offcanvas-width); - border-left: var(--offcanvas-border-width) solid var(--offcanvas-border-color); - -webkit-transform: translateX(100%); - transform: translateX(100%); -} -.offcanvas.offcanvas-end { - top: 0; - left: 0; - width: var(--offcanvas-width); - border-right: var(--offcanvas-border-width) solid var(--offcanvas-border-color); - -webkit-transform: translateX(-100%); - transform: translateX(-100%); -} -.offcanvas.offcanvas-top { - top: 0; - left: 0; - right: 0; - height: var(--offcanvas-height); - max-height: 100%; - border-bottom: var(--offcanvas-border-width) solid var(--offcanvas-border-color); - -webkit-transform: translateY(-100%); - transform: translateY(-100%); -} -.offcanvas.offcanvas-bottom { - left: 0; - right: 0; - height: var(--offcanvas-height); - max-height: 100%; - border-top: var(--offcanvas-border-width) solid var(--offcanvas-border-color); - -webkit-transform: translateY(100%); - transform: translateY(100%); -} -.offcanvas.showing, .offcanvas.show:not(.hiding) { - -webkit-transform: none; - transform: none; -} -.offcanvas.showing, .offcanvas.hiding, .offcanvas.show { - visibility: visible; + + top: 0; + right: 0; + width: var(--offcanvas-width); + border-right: var(--offcanvas-border-width) solid var(--offcanvas-border-color); + -webkit-transform: translateX(-100%); + transform: translateX(-100%); } -.offcanvas-backdrop { - position: fixed; - top: 0; - right: 0; - z-index: 1040; - width: 100vw; - height: 100vh; - background-color: hsl(0, 0%, 0%); -} -.offcanvas-backdrop.fade { - opacity: 0; -} -.offcanvas-backdrop.show { - opacity: 0.5; +[dir="rtl"] .offcanvas.offcanvas-end { + + top: 0; + left: 0; + width: var(--offcanvas-width); + border-left: var(--offcanvas-border-width) solid var(--offcanvas-border-color); + -webkit-transform: translateX(100%); + transform: translateX(100%); } -.offcanvas-header { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - padding: var(--offcanvas-padding-y) var(--offcanvas-padding-x); -} -.offcanvas-header .btn-close { - padding: calc(var(--offcanvas-padding-y) * 0.5) calc(var(--offcanvas-padding-x) * 0.5); - margin-top: calc(-0.5 * var(--offcanvas-padding-y)); - margin-left: calc(-0.5 * var(--offcanvas-padding-x)); - margin-bottom: calc(-0.5 * var(--offcanvas-padding-y)); +[dir="rtl"] .offcanvas.offcanvas-top { + + top: 0; + left: 0; + right: 0; + height: var(--offcanvas-height); + max-height: 100%; + border-bottom: var(--offcanvas-border-width) solid var(--offcanvas-border-color); + -webkit-transform: translateY(-100%); + transform: translateY(-100%); } -.offcanvas-title { - margin-bottom: 0; - line-height: 1.5; +[dir="rtl"] .offcanvas.offcanvas-bottom { + + left: 0; + right: 0; + height: var(--offcanvas-height); + max-height: 100%; + border-top: var(--offcanvas-border-width) solid var(--offcanvas-border-color); + -webkit-transform: translateY(100%); + transform: translateY(100%); } -.offcanvas-body { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - padding: var(--offcanvas-padding-y) var(--offcanvas-padding-x); - overflow-y: auto; +[dir="rtl"] .offcanvas-backdrop { + + position: fixed; + top: 0; + right: 0; + z-index: 1040; + width: 100vw; + height: 100vh; + background-color: hsl(0, 0%, 0%); } -.placeholder { - display: inline-block; - min-height: 1em; - vertical-align: middle; - cursor: wait; - background-color: currentcolor; - opacity: 0.5; -} -.placeholder.btn::before { - display: inline-block; - content: ""; +[dir="rtl"] .offcanvas-header .btn-close { + + padding: calc(var(--offcanvas-padding-y) * 0.5) calc(var(--offcanvas-padding-x) * 0.5); + margin-top: calc(-0.5 * var(--offcanvas-padding-y)); + margin-right: calc(-0.5 * var(--offcanvas-padding-x)); + margin-bottom: calc(-0.5 * var(--offcanvas-padding-y)); } -.placeholder-xs { - min-height: 0.6em; +[dir="rtl"] .ratio>* { + + position: absolute; + top: 0; + right: 0; + width: 100%; + height: 100%; } -.placeholder-sm { - min-height: 0.8em; +[dir="rtl"] .fixed-top { + + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1030; } -.placeholder-lg { - min-height: 1.2em; +[dir="rtl"] .fixed-bottom { + + position: fixed; + left: 0; + bottom: 0; + right: 0; + z-index: 1030; } -.placeholder-glow .placeholder { - -webkit-animation: placeholder-glow 2s ease-in-out infinite; - animation: placeholder-glow 2s ease-in-out infinite; +[dir="rtl"] .stretched-link::after { + + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + z-index: 1; + content: ""; } -@-webkit-keyframes placeholder-glow { - 50% { - opacity: 0.2; - } +[dir="rtl"] .float-start { + + float: left !important; } -@keyframes placeholder-glow { - 50% { - opacity: 0.2; - } -} -.placeholder-wave { - -webkit-mask-image: linear-gradient(130deg, hsl(0, 0%, 0%) 55%, rgba(0, 0, 0, 0.8) 75%, hsl(0, 0%, 0%) 95%); - mask-image: linear-gradient(130deg, hsl(0, 0%, 0%) 55%, rgba(0, 0, 0, 0.8) 75%, hsl(0, 0%, 0%) 95%); - -webkit-mask-size: 200% 100%; - mask-size: 200% 100%; - -webkit-animation: placeholder-wave 2s linear infinite; - animation: placeholder-wave 2s linear infinite; +[dir="rtl"] .float-end { + + float: left !important; } -@-webkit-keyframes placeholder-wave { - 100% { - -webkit-mask-position: -200% 0%; - mask-position: -200% 0%; - } +[dir="rtl"] .start-0 { + + right: 0 !important; } -@keyframes placeholder-wave { - 100% { - -webkit-mask-position: -200% 0%; - mask-position: -200% 0%; - } -} -.clearfix::after { - display: block; - clear: both; - content: ""; +[dir="rtl"] .start-50 { + + right: 50% !important; } -.text-bg-primary { - color: hsl(0, 0%, 100%) !important; - background-color: RGBA(1, 1, 86, var(--bg-opacity, 1)) !important; +[dir="rtl"] .start-100 { + + right: 100% !important; } -.text-bg-secondary { - color: hsl(0, 0%, 100%) !important; - background-color: RGBA(109, 117, 126, var(--bg-opacity, 1)) !important; +[dir="rtl"] .end-0 { + + left: 0 !important; } -.text-bg-success { - color: hsl(0, 0%, 100%) !important; - background-color: RGBA(68, 131, 68, var(--bg-opacity, 1)) !important; +[dir="rtl"] .end-50 { + + left: 50% !important; } -.text-bg-info { - color: hsl(0, 0%, 100%) !important; - background-color: RGBA(48, 99, 141, var(--bg-opacity, 1)) !important; +[dir="rtl"] .end-100 { + + left: 100% !important; } -.text-bg-warning { - color: hsl(0, 0%, 100%) !important; - background-color: RGBA(173, 98, 0, var(--bg-opacity, 1)) !important; +[dir="rtl"] .border-end { + + border-right: var(--border-width) var(--border-style) var(--border-color) !important; } -.text-bg-danger { - color: hsl(0, 0%, 100%) !important; - background-color: RGBA(165, 31, 24, var(--bg-opacity, 1)) !important; +[dir="rtl"] .border-end-0 { + + border-right: 0 !important; } -.text-bg-light { - color: hsl(0, 0%, 0%) !important; - background-color: RGBA(249, 250, 251, var(--bg-opacity, 1)) !important; +[dir="rtl"] .border-start { + + border-left: var(--border-width) var(--border-style) var(--border-color) !important; } -.text-bg-dark { - color: hsl(0, 0%, 100%) !important; - background-color: RGBA(53, 59, 65, var(--bg-opacity, 1)) !important; +[dir="rtl"] .border-start-0 { + + border-left: 0 !important; } -.link-primary { - color: hsl(240, 98%, 17%) !important; -} -.link-primary:hover, .link-primary:focus { - color: #010145 !important; +[dir="rtl"] .mx-0 { + + margin-right: 0 !important; + margin-left: 0 !important; } -.link-secondary { - color: hsl(210, 7%, 46%) !important; -} -.link-secondary:hover, .link-secondary:focus { - color: #575e65 !important; +[dir="rtl"] .mx-1 { + + margin-right: 0.25rem !important; + margin-left: 0.25rem !important; } -.link-success { - color: hsl(120, 32%, 39%) !important; -} -.link-success:hover, .link-success:focus { - color: #366936 !important; +[dir="rtl"] .mx-2 { + + margin-right: 0.5rem !important; + margin-left: 0.5rem !important; } -.link-info { - color: hsl(207, 49%, 37%) !important; -} -.link-info:hover, .link-info:focus { - color: #264f71 !important; +[dir="rtl"] .mx-3 { + + margin-right: 1rem !important; + margin-left: 1rem !important; } -.link-warning { - color: hsl(34, 100%, 34%) !important; -} -.link-warning:hover, .link-warning:focus { - color: #8a4e00 !important; +[dir="rtl"] .mx-4 { + + margin-right: 1.5rem !important; + margin-left: 1.5rem !important; } -.link-danger { - color: hsl(3, 75%, 37%) !important; -} -.link-danger:hover, .link-danger:focus { - color: #841913 !important; +[dir="rtl"] .mx-5 { + + margin-right: 3rem !important; + margin-left: 3rem !important; } -.link-light { - color: hsl(210, 17%, 98%) !important; -} -.link-light:hover, .link-light:focus { - color: #fafbfc !important; +[dir="rtl"] .mx-auto { + + margin-right: auto !important; + margin-left: auto !important; } -.link-dark { - color: hsl(210, 10%, 23%) !important; -} -.link-dark:hover, .link-dark:focus { - color: #2a2f34 !important; +[dir="rtl"] .me-0 { + + margin-right: 0 !important; } -.ratio { - position: relative; - width: 100%; -} -.ratio::before { - display: block; - padding-top: var(--aspect-ratio); - content: ""; -} -.ratio > * { - position: absolute; - top: 0; - right: 0; - width: 100%; - height: 100%; +[dir="rtl"] .me-1 { + + margin-right: 0.25rem !important; } -.ratio-1x1 { - --aspect-ratio: 100%; +[dir="rtl"] .me-2 { + + margin-right: 0.5rem !important; } -.ratio-4x3 { - --aspect-ratio: 75%; +[dir="rtl"] .me-3 { + + margin-right: 1rem !important; } -.ratio-16x9 { - --aspect-ratio: 56.25%; +[dir="rtl"] .me-4 { + + margin-right: 1.5rem !important; } -.ratio-21x9 { - --aspect-ratio: 42.8571428571%; +[dir="rtl"] .me-5 { + + margin-right: 3rem !important; } -.fixed-top { - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 1030; +[dir="rtl"] .me-auto { + + margin-right: auto !important; } -.fixed-bottom { - position: fixed; - left: 0; - bottom: 0; - right: 0; - z-index: 1030; +[dir="rtl"] .ms-0 { + + margin-left: 0 !important; } -.sticky-top { - position: sticky; - top: 0; - z-index: 1020; +[dir="rtl"] .ms-1 { + + margin-left: 0.25rem !important; } -.sticky-bottom { - position: sticky; - bottom: 0; - z-index: 1020; +[dir="rtl"] .ms-2 { + + margin-left: 0.5rem !important; } -@media (min-width: 576px) { - .sticky-sm-top { - position: sticky; - top: 0; - z-index: 1020; - } - .sticky-sm-bottom { - position: sticky; - bottom: 0; - z-index: 1020; - } +[dir="rtl"] .ms-3 { + + margin-left: 1rem !important; } + +[dir="rtl"] .ms-4 { + + margin-left: 1.5rem !important; +} + +[dir="rtl"] .ms-5 { + + margin-left: 3rem !important; +} + +[dir="rtl"] .ms-auto { + + margin-left: auto !important; +} + +[dir="rtl"] .px-0 { + + padding-right: 0 !important; + padding-left: 0 !important; +} + +[dir="rtl"] .px-1 { + + padding-right: 0.25rem !important; + padding-left: 0.25rem !important; +} + +[dir="rtl"] .px-2 { + + padding-right: 0.5rem !important; + padding-left: 0.5rem !important; +} + +[dir="rtl"] .px-3 { + + padding-right: 1rem !important; + padding-left: 1rem !important; +} + +[dir="rtl"] .px-4 { + + padding-right: 1.5rem !important; + padding-left: 1.5rem !important; +} + +[dir="rtl"] .px-5 { + + padding-right: 3rem !important; + padding-left: 3rem !important; +} + +[dir="rtl"] .pe-0 { + + padding-right: 0 !important; +} + +[dir="rtl"] .pe-1 { + + padding-right: 0.25rem !important; +} + +[dir="rtl"] .pe-2 { + + padding-right: 0.5rem !important; +} + +[dir="rtl"] .pe-3 { + + padding-right: 1rem !important; +} + +[dir="rtl"] .pe-4 { + + padding-right: 1.5rem !important; +} + +[dir="rtl"] .pe-5 { + + padding-right: 3rem !important; +} + +[dir="rtl"] .ps-0 { + + padding-left: 0 !important; +} + +[dir="rtl"] .ps-1 { + + padding-left: 0.25rem !important; +} + +[dir="rtl"] .ps-2 { + + padding-left: 0.5rem !important; +} + +[dir="rtl"] .ps-3 { + + padding-left: 1rem !important; +} + +[dir="rtl"] .ps-4 { + + padding-left: 1.5rem !important; +} + +[dir="rtl"] .ps-5 { + + padding-left: 3rem !important; +} + +[dir="rtl"] .text-start { + + text-align: left !important; +} + +[dir="rtl"] .text-end { + + text-align: left !important; +} + +[dir="rtl"] @media (min-width: 576px) { + + .float-sm-start { + float: left !important; + +} + +[dir="rtl"] .float-sm-end { + + float: left !important; + +} + +[dir="rtl"] .mx-sm-0 { + + margin-right: 0 !important; + margin-left: 0 !important; + +} + +[dir="rtl"] .mx-sm-1 { + + margin-right: 0.25rem !important; + margin-left: 0.25rem !important; + +} + +[dir="rtl"] .mx-sm-2 { + + margin-right: 0.5rem !important; + margin-left: 0.5rem !important; + +} + +[dir="rtl"] .mx-sm-3 { + + margin-right: 1rem !important; + margin-left: 1rem !important; + +} + +[dir="rtl"] .mx-sm-4 { + + margin-right: 1.5rem !important; + margin-left: 1.5rem !important; + +} + +[dir="rtl"] .mx-sm-5 { + + margin-right: 3rem !important; + margin-left: 3rem !important; + +} + +[dir="rtl"] .mx-sm-auto { + + margin-right: auto !important; + margin-left: auto !important; + +} + +[dir="rtl"] .me-sm-0 { + + margin-right: 0 !important; + +} + +[dir="rtl"] .me-sm-1 { + + margin-right: 0.25rem !important; + +} + +[dir="rtl"] .me-sm-2 { + + margin-right: 0.5rem !important; + +} + +[dir="rtl"] .me-sm-3 { + + margin-right: 1rem !important; + +} + +[dir="rtl"] .me-sm-4 { + + margin-right: 1.5rem !important; + +} + +[dir="rtl"] .me-sm-5 { + + margin-right: 3rem !important; + +} + +[dir="rtl"] .me-sm-auto { + + margin-right: auto !important; + +} + +[dir="rtl"] .ms-sm-0 { + + margin-left: 0 !important; + +} + +[dir="rtl"] .ms-sm-1 { + + margin-left: 0.25rem !important; + +} + +[dir="rtl"] .ms-sm-2 { + + margin-left: 0.5rem !important; + +} + +[dir="rtl"] .ms-sm-3 { + + margin-left: 1rem !important; + +} + +[dir="rtl"] .ms-sm-4 { + + margin-left: 1.5rem !important; + +} + +[dir="rtl"] .ms-sm-5 { + + margin-left: 3rem !important; + +} + +[dir="rtl"] .ms-sm-auto { + + margin-left: auto !important; + +} + +[dir="rtl"] .px-sm-0 { + + padding-right: 0 !important; + padding-left: 0 !important; + +} + +[dir="rtl"] .px-sm-1 { + + padding-right: 0.25rem !important; + padding-left: 0.25rem !important; + +} + +[dir="rtl"] .px-sm-2 { + + padding-right: 0.5rem !important; + padding-left: 0.5rem !important; + +} + +[dir="rtl"] .px-sm-3 { + + padding-right: 1rem !important; + padding-left: 1rem !important; + +} + +[dir="rtl"] .px-sm-4 { + + padding-right: 1.5rem !important; + padding-left: 1.5rem !important; + +} + +[dir="rtl"] .px-sm-5 { + + padding-right: 3rem !important; + padding-left: 3rem !important; + +} + +[dir="rtl"] .pe-sm-0 { + + padding-right: 0 !important; + +} + +[dir="rtl"] .pe-sm-1 { + + padding-right: 0.25rem !important; + +} + +[dir="rtl"] .pe-sm-2 { + + padding-right: 0.5rem !important; + +} + +[dir="rtl"] .pe-sm-3 { + + padding-right: 1rem !important; + +} + +[dir="rtl"] .pe-sm-4 { + + padding-right: 1.5rem !important; + +} + +[dir="rtl"] .pe-sm-5 { + + padding-right: 3rem !important; + +} + +[dir="rtl"] .ps-sm-0 { + + padding-left: 0 !important; + +} + +[dir="rtl"] .ps-sm-1 { + + padding-left: 0.25rem !important; + +} + +[dir="rtl"] .ps-sm-2 { + + padding-left: 0.5rem !important; + +} + +[dir="rtl"] .ps-sm-3 { + + padding-left: 1rem !important; + +} + +[dir="rtl"] .ps-sm-4 { + + padding-left: 1.5rem !important; + +} + +[dir="rtl"] .ps-sm-5 { + + padding-left: 3rem !important; + +} + +[dir="rtl"] .text-sm-start { + + text-align: left !important; + +} + +[dir="rtl"] .text-sm-end { + + text-align: left !important; + +} + +[dir="rtl"] } + @media (min-width: 768px) { - .sticky-md-top { - position: sticky; - top: 0; - z-index: 1020; - } - .sticky-md-bottom { - position: sticky; - bottom: 0; - z-index: 1020; - } + + .float-md-start { + float: left !important; + } + +[dir="rtl"] .float-md-end { + + float: left !important; + +} + +[dir="rtl"] .mx-md-0 { + + margin-right: 0 !important; + margin-left: 0 !important; + +} + +[dir="rtl"] .mx-md-1 { + + margin-right: 0.25rem !important; + margin-left: 0.25rem !important; + +} + +[dir="rtl"] .mx-md-2 { + + margin-right: 0.5rem !important; + margin-left: 0.5rem !important; + +} + +[dir="rtl"] .mx-md-3 { + + margin-right: 1rem !important; + margin-left: 1rem !important; + +} + +[dir="rtl"] .mx-md-4 { + + margin-right: 1.5rem !important; + margin-left: 1.5rem !important; + +} + +[dir="rtl"] .mx-md-5 { + + margin-right: 3rem !important; + margin-left: 3rem !important; + +} + +[dir="rtl"] .mx-md-auto { + + margin-right: auto !important; + margin-left: auto !important; + +} + +[dir="rtl"] .me-md-0 { + + margin-right: 0 !important; + +} + +[dir="rtl"] .me-md-1 { + + margin-right: 0.25rem !important; + +} + +[dir="rtl"] .me-md-2 { + + margin-right: 0.5rem !important; + +} + +[dir="rtl"] .me-md-3 { + + margin-right: 1rem !important; + +} + +[dir="rtl"] .me-md-4 { + + margin-right: 1.5rem !important; + +} + +[dir="rtl"] .me-md-5 { + + margin-right: 3rem !important; + +} + +[dir="rtl"] .me-md-auto { + + margin-right: auto !important; + +} + +[dir="rtl"] .ms-md-0 { + + margin-left: 0 !important; + +} + +[dir="rtl"] .ms-md-1 { + + margin-left: 0.25rem !important; + +} + +[dir="rtl"] .ms-md-2 { + + margin-left: 0.5rem !important; + +} + +[dir="rtl"] .ms-md-3 { + + margin-left: 1rem !important; + +} + +[dir="rtl"] .ms-md-4 { + + margin-left: 1.5rem !important; + +} + +[dir="rtl"] .ms-md-5 { + + margin-left: 3rem !important; + +} + +[dir="rtl"] .ms-md-auto { + + margin-left: auto !important; + +} + +[dir="rtl"] .px-md-0 { + + padding-right: 0 !important; + padding-left: 0 !important; + +} + +[dir="rtl"] .px-md-1 { + + padding-right: 0.25rem !important; + padding-left: 0.25rem !important; + +} + +[dir="rtl"] .px-md-2 { + + padding-right: 0.5rem !important; + padding-left: 0.5rem !important; + +} + +[dir="rtl"] .px-md-3 { + + padding-right: 1rem !important; + padding-left: 1rem !important; + +} + +[dir="rtl"] .px-md-4 { + + padding-right: 1.5rem !important; + padding-left: 1.5rem !important; + +} + +[dir="rtl"] .px-md-5 { + + padding-right: 3rem !important; + padding-left: 3rem !important; + +} + +[dir="rtl"] .pe-md-0 { + + padding-right: 0 !important; + +} + +[dir="rtl"] .pe-md-1 { + + padding-right: 0.25rem !important; + +} + +[dir="rtl"] .pe-md-2 { + + padding-right: 0.5rem !important; + +} + +[dir="rtl"] .pe-md-3 { + + padding-right: 1rem !important; + +} + +[dir="rtl"] .pe-md-4 { + + padding-right: 1.5rem !important; + +} + +[dir="rtl"] .pe-md-5 { + + padding-right: 3rem !important; + +} + +[dir="rtl"] .ps-md-0 { + + padding-left: 0 !important; + +} + +[dir="rtl"] .ps-md-1 { + + padding-left: 0.25rem !important; + +} + +[dir="rtl"] .ps-md-2 { + + padding-left: 0.5rem !important; + +} + +[dir="rtl"] .ps-md-3 { + + padding-left: 1rem !important; + +} + +[dir="rtl"] .ps-md-4 { + + padding-left: 1.5rem !important; + +} + +[dir="rtl"] .ps-md-5 { + + padding-left: 3rem !important; + +} + +[dir="rtl"] .text-md-start { + + text-align: left !important; + +} + +[dir="rtl"] .text-md-end { + + text-align: left !important; + +} + +[dir="rtl"] } + @media (min-width: 992px) { - .sticky-lg-top { - position: sticky; - top: 0; - z-index: 1020; - } - .sticky-lg-bottom { - position: sticky; - bottom: 0; - z-index: 1020; - } + + .float-lg-start { + float: left !important; + } + +[dir="rtl"] .float-lg-end { + + float: left !important; + +} + +[dir="rtl"] .mx-lg-0 { + + margin-right: 0 !important; + margin-left: 0 !important; + +} + +[dir="rtl"] .mx-lg-1 { + + margin-right: 0.25rem !important; + margin-left: 0.25rem !important; + +} + +[dir="rtl"] .mx-lg-2 { + + margin-right: 0.5rem !important; + margin-left: 0.5rem !important; + +} + +[dir="rtl"] .mx-lg-3 { + + margin-right: 1rem !important; + margin-left: 1rem !important; + +} + +[dir="rtl"] .mx-lg-4 { + + margin-right: 1.5rem !important; + margin-left: 1.5rem !important; + +} + +[dir="rtl"] .mx-lg-5 { + + margin-right: 3rem !important; + margin-left: 3rem !important; + +} + +[dir="rtl"] .mx-lg-auto { + + margin-right: auto !important; + margin-left: auto !important; + +} + +[dir="rtl"] .me-lg-0 { + + margin-right: 0 !important; + +} + +[dir="rtl"] .me-lg-1 { + + margin-right: 0.25rem !important; + +} + +[dir="rtl"] .me-lg-2 { + + margin-right: 0.5rem !important; + +} + +[dir="rtl"] .me-lg-3 { + + margin-right: 1rem !important; + +} + +[dir="rtl"] .me-lg-4 { + + margin-right: 1.5rem !important; + +} + +[dir="rtl"] .me-lg-5 { + + margin-right: 3rem !important; + +} + +[dir="rtl"] .me-lg-auto { + + margin-right: auto !important; + +} + +[dir="rtl"] .ms-lg-0 { + + margin-left: 0 !important; + +} + +[dir="rtl"] .ms-lg-1 { + + margin-left: 0.25rem !important; + +} + +[dir="rtl"] .ms-lg-2 { + + margin-left: 0.5rem !important; + +} + +[dir="rtl"] .ms-lg-3 { + + margin-left: 1rem !important; + +} + +[dir="rtl"] .ms-lg-4 { + + margin-left: 1.5rem !important; + +} + +[dir="rtl"] .ms-lg-5 { + + margin-left: 3rem !important; + +} + +[dir="rtl"] .ms-lg-auto { + + margin-left: auto !important; + +} + +[dir="rtl"] .px-lg-0 { + + padding-right: 0 !important; + padding-left: 0 !important; + +} + +[dir="rtl"] .px-lg-1 { + + padding-right: 0.25rem !important; + padding-left: 0.25rem !important; + +} + +[dir="rtl"] .px-lg-2 { + + padding-right: 0.5rem !important; + padding-left: 0.5rem !important; + +} + +[dir="rtl"] .px-lg-3 { + + padding-right: 1rem !important; + padding-left: 1rem !important; + +} + +[dir="rtl"] .px-lg-4 { + + padding-right: 1.5rem !important; + padding-left: 1.5rem !important; + +} + +[dir="rtl"] .px-lg-5 { + + padding-right: 3rem !important; + padding-left: 3rem !important; + +} + +[dir="rtl"] .pe-lg-0 { + + padding-right: 0 !important; + +} + +[dir="rtl"] .pe-lg-1 { + + padding-right: 0.25rem !important; + +} + +[dir="rtl"] .pe-lg-2 { + + padding-right: 0.5rem !important; + +} + +[dir="rtl"] .pe-lg-3 { + + padding-right: 1rem !important; + +} + +[dir="rtl"] .pe-lg-4 { + + padding-right: 1.5rem !important; + +} + +[dir="rtl"] .pe-lg-5 { + + padding-right: 3rem !important; + +} + +[dir="rtl"] .ps-lg-0 { + + padding-left: 0 !important; + +} + +[dir="rtl"] .ps-lg-1 { + + padding-left: 0.25rem !important; + +} + +[dir="rtl"] .ps-lg-2 { + + padding-left: 0.5rem !important; + +} + +[dir="rtl"] .ps-lg-3 { + + padding-left: 1rem !important; + +} + +[dir="rtl"] .ps-lg-4 { + + padding-left: 1.5rem !important; + +} + +[dir="rtl"] .ps-lg-5 { + + padding-left: 3rem !important; + +} + +[dir="rtl"] .text-lg-start { + + text-align: left !important; + +} + +[dir="rtl"] .text-lg-end { + + text-align: left !important; + +} + +[dir="rtl"] } + @media (min-width: 1200px) { - .sticky-xl-top { - position: sticky; - top: 0; - z-index: 1020; - } - .sticky-xl-bottom { - position: sticky; - bottom: 0; - z-index: 1020; - } + + .float-xl-start { + float: left !important; + } + +[dir="rtl"] .float-xl-end { + + float: left !important; + +} + +[dir="rtl"] .mx-xl-0 { + + margin-right: 0 !important; + margin-left: 0 !important; + +} + +[dir="rtl"] .mx-xl-1 { + + margin-right: 0.25rem !important; + margin-left: 0.25rem !important; + +} + +[dir="rtl"] .mx-xl-2 { + + margin-right: 0.5rem !important; + margin-left: 0.5rem !important; + +} + +[dir="rtl"] .mx-xl-3 { + + margin-right: 1rem !important; + margin-left: 1rem !important; + +} + +[dir="rtl"] .mx-xl-4 { + + margin-right: 1.5rem !important; + margin-left: 1.5rem !important; + +} + +[dir="rtl"] .mx-xl-5 { + + margin-right: 3rem !important; + margin-left: 3rem !important; + +} + +[dir="rtl"] .mx-xl-auto { + + margin-right: auto !important; + margin-left: auto !important; + +} + +[dir="rtl"] .me-xl-0 { + + margin-right: 0 !important; + +} + +[dir="rtl"] .me-xl-1 { + + margin-right: 0.25rem !important; + +} + +[dir="rtl"] .me-xl-2 { + + margin-right: 0.5rem !important; + +} + +[dir="rtl"] .me-xl-3 { + + margin-right: 1rem !important; + +} + +[dir="rtl"] .me-xl-4 { + + margin-right: 1.5rem !important; + +} + +[dir="rtl"] .me-xl-5 { + + margin-right: 3rem !important; + +} + +[dir="rtl"] .me-xl-auto { + + margin-right: auto !important; + +} + +[dir="rtl"] .ms-xl-0 { + + margin-left: 0 !important; + +} + +[dir="rtl"] .ms-xl-1 { + + margin-left: 0.25rem !important; + +} + +[dir="rtl"] .ms-xl-2 { + + margin-left: 0.5rem !important; + +} + +[dir="rtl"] .ms-xl-3 { + + margin-left: 1rem !important; + +} + +[dir="rtl"] .ms-xl-4 { + + margin-left: 1.5rem !important; + +} + +[dir="rtl"] .ms-xl-5 { + + margin-left: 3rem !important; + +} + +[dir="rtl"] .ms-xl-auto { + + margin-left: auto !important; + +} + +[dir="rtl"] .px-xl-0 { + + padding-right: 0 !important; + padding-left: 0 !important; + +} + +[dir="rtl"] .px-xl-1 { + + padding-right: 0.25rem !important; + padding-left: 0.25rem !important; + +} + +[dir="rtl"] .px-xl-2 { + + padding-right: 0.5rem !important; + padding-left: 0.5rem !important; + +} + +[dir="rtl"] .px-xl-3 { + + padding-right: 1rem !important; + padding-left: 1rem !important; + +} + +[dir="rtl"] .px-xl-4 { + + padding-right: 1.5rem !important; + padding-left: 1.5rem !important; + +} + +[dir="rtl"] .px-xl-5 { + + padding-right: 3rem !important; + padding-left: 3rem !important; + +} + +[dir="rtl"] .pe-xl-0 { + + padding-right: 0 !important; + +} + +[dir="rtl"] .pe-xl-1 { + + padding-right: 0.25rem !important; + +} + +[dir="rtl"] .pe-xl-2 { + + padding-right: 0.5rem !important; + +} + +[dir="rtl"] .pe-xl-3 { + + padding-right: 1rem !important; + +} + +[dir="rtl"] .pe-xl-4 { + + padding-right: 1.5rem !important; + +} + +[dir="rtl"] .pe-xl-5 { + + padding-right: 3rem !important; + +} + +[dir="rtl"] .ps-xl-0 { + + padding-left: 0 !important; + +} + +[dir="rtl"] .ps-xl-1 { + + padding-left: 0.25rem !important; + +} + +[dir="rtl"] .ps-xl-2 { + + padding-left: 0.5rem !important; + +} + +[dir="rtl"] .ps-xl-3 { + + padding-left: 1rem !important; + +} + +[dir="rtl"] .ps-xl-4 { + + padding-left: 1.5rem !important; + +} + +[dir="rtl"] .ps-xl-5 { + + padding-left: 3rem !important; + +} + +[dir="rtl"] .text-xl-start { + + text-align: left !important; + +} + +[dir="rtl"] .text-xl-end { + + text-align: left !important; + +} + +[dir="rtl"] } + @media (min-width: 1400px) { - .sticky-xxl-top { - position: sticky; - top: 0; - z-index: 1020; - } - .sticky-xxl-bottom { - position: sticky; - bottom: 0; - z-index: 1020; - } -} -.hstack { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -ms-flex-item-align: stretch; - align-self: stretch; -} - -.vstack { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 1; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-item-align: stretch; - align-self: stretch; -} - -.visually-hidden, .sr-only, -.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; - left: 0; - bottom: 0; - right: 0; - z-index: 1; - content: ""; -} - -.text-truncate { - overflow: hidden; - -o-text-overflow: ellipsis; - text-overflow: ellipsis; - white-space: nowrap; -} - -.vr { - display: inline-block; - -ms-flex-item-align: stretch; - align-self: stretch; - width: 1px; - min-height: 1em; - background-color: currentcolor; - opacity: 0.25; -} - -.align-baseline { - vertical-align: baseline !important; -} - -.align-top { - vertical-align: top !important; -} - -.align-middle { - vertical-align: middle !important; -} - -.align-bottom { - vertical-align: bottom !important; -} - -.align-text-bottom { - vertical-align: text-bottom !important; -} - -.align-text-top { - vertical-align: text-top !important; -} - -.float-start { - float: right !important; -} - -.float-end { - float: left !important; -} - -.float-none { - float: none !important; -} - -.opacity-0 { - opacity: 0 !important; -} - -.opacity-25 { - opacity: 0.25 !important; -} - -.opacity-50 { - opacity: 0.5 !important; -} - -.opacity-75 { - opacity: 0.75 !important; -} - -.opacity-100 { - opacity: 1 !important; -} - -.overflow-auto { - overflow: auto !important; -} - -.overflow-hidden { - overflow: hidden !important; -} - -.overflow-visible { - overflow: visible !important; -} - -.overflow-scroll { - overflow: scroll !important; -} - -.d-inline { - display: inline !important; -} - -.d-inline-block { - display: inline-block !important; -} - -.d-block { - display: block !important; -} - -.d-grid { - display: grid !important; -} - -.d-table { - display: table !important; -} - -.d-table-row { - display: table-row !important; -} - -.d-table-cell { - display: table-cell !important; -} - -.d-flex { - display: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; -} - -.d-inline-flex { - display: -webkit-inline-box !important; - display: -ms-inline-flexbox !important; - display: inline-flex !important; -} - -.d-none { - display: none !important; -} - -.shadow { - -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; - box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; -} - -.shadow-sm { - -webkit-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; - box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; -} - -.shadow-lg { - -webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; - box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; -} - -.shadow-none { - -webkit-box-shadow: none !important; - box-shadow: none !important; -} - -.position-static { - position: static !important; -} - -.position-relative { - position: relative !important; -} - -.position-absolute { - position: absolute !important; -} - -.position-fixed { - position: fixed !important; -} - -.position-sticky { - position: sticky !important; -} - -.top-0 { - top: 0 !important; -} - -.top-50 { - top: 50% !important; -} - -.top-100 { - top: 100% !important; -} - -.bottom-0 { - bottom: 0 !important; -} - -.bottom-50 { - bottom: 50% !important; -} - -.bottom-100 { - bottom: 100% !important; -} - -.start-0 { - right: 0 !important; -} - -.start-50 { - right: 50% !important; -} - -.start-100 { - right: 100% !important; -} - -.end-0 { - left: 0 !important; -} - -.end-50 { - left: 50% !important; -} - -.end-100 { - left: 100% !important; -} - -.translate-middle { - -webkit-transform: translate(50%, -50%) !important; - transform: translate(50%, -50%) !important; -} - -.translate-middle-x { - -webkit-transform: translateX(50%) !important; - transform: translateX(50%) !important; -} - -.translate-middle-y { - -webkit-transform: translateY(-50%) !important; - transform: translateY(-50%) !important; -} - -.border { - border: var(--border-width) var(--border-style) var(--border-color) !important; -} - -.border-0 { - border: 0 !important; -} - -.border-top { - border-top: var(--border-width) var(--border-style) var(--border-color) !important; -} - -.border-top-0 { - border-top: 0 !important; -} - -.border-end { - border-left: var(--border-width) var(--border-style) var(--border-color) !important; -} - -.border-end-0 { - border-left: 0 !important; -} - -.border-bottom { - border-bottom: var(--border-width) var(--border-style) var(--border-color) !important; -} - -.border-bottom-0 { - border-bottom: 0 !important; -} - -.border-start { - border-right: var(--border-width) var(--border-style) var(--border-color) !important; -} - -.border-start-0 { - border-right: 0 !important; -} - -.border-primary { - --border-opacity: 1; - border-color: rgba(var(--primary-rgb), var(--border-opacity)) !important; -} - -.border-secondary { - --border-opacity: 1; - border-color: rgba(var(--secondary-rgb), var(--border-opacity)) !important; -} - -.border-success { - --border-opacity: 1; - border-color: rgba(var(--success-rgb), var(--border-opacity)) !important; -} - -.border-info { - --border-opacity: 1; - border-color: rgba(var(--info-rgb), var(--border-opacity)) !important; -} - -.border-warning { - --border-opacity: 1; - border-color: rgba(var(--warning-rgb), var(--border-opacity)) !important; -} - -.border-danger { - --border-opacity: 1; - border-color: rgba(var(--danger-rgb), var(--border-opacity)) !important; -} - -.border-light { - --border-opacity: 1; - border-color: rgba(var(--light-rgb), var(--border-opacity)) !important; -} - -.border-dark { - --border-opacity: 1; - border-color: rgba(var(--dark-rgb), var(--border-opacity)) !important; -} - -.border-white { - --border-opacity: 1; - border-color: rgba(var(--white-rgb), var(--border-opacity)) !important; -} - -.border-1 { - --border-width: 1px; -} - -.border-2 { - --border-width: 2px; -} - -.border-3 { - --border-width: 3px; -} - -.border-4 { - --border-width: 4px; -} - -.border-5 { - --border-width: 5px; -} - -.border-opacity-10 { - --border-opacity: 0.1; -} - -.border-opacity-25 { - --border-opacity: 0.25; -} - -.border-opacity-50 { - --border-opacity: 0.5; -} - -.border-opacity-75 { - --border-opacity: 0.75; -} - -.border-opacity-100 { - --border-opacity: 1; -} - -.w-25 { - width: 25% !important; -} - -.w-50 { - width: 50% !important; -} - -.w-75 { - width: 75% !important; -} - -.w-100 { - width: 100% !important; -} - -.w-auto { - 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; -} - -.h-50 { - height: 50% !important; -} - -.h-75 { - height: 75% !important; -} - -.h-100 { - height: 100% !important; -} - -.h-auto { - height: auto !important; -} - -.mh-100 { - max-height: 100% !important; -} - -.vh-100 { - height: 100vh !important; -} - -.min-vh-100 { - min-height: 100vh !important; -} - -.flex-fill { - -webkit-box-flex: 1 !important; - -ms-flex: 1 1 auto !important; - flex: 1 1 auto !important; -} - -.flex-row { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: row !important; - flex-direction: row !important; -} - -.flex-column { - -webkit-box-orient: vertical !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: column !important; - flex-direction: column !important; -} - -.flex-row-reverse { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: row-reverse !important; - flex-direction: row-reverse !important; -} - -.flex-column-reverse { - -webkit-box-orient: vertical !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: column-reverse !important; - flex-direction: column-reverse !important; -} - -.flex-grow-0 { - -webkit-box-flex: 0 !important; - -ms-flex-positive: 0 !important; - flex-grow: 0 !important; -} - -.flex-grow-1 { - -webkit-box-flex: 1 !important; - -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; -} - -.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; -} - -.justify-content-start { - -webkit-box-pack: start !important; - -ms-flex-pack: start !important; - justify-content: flex-start !important; -} - -.justify-content-end { - -webkit-box-pack: end !important; - -ms-flex-pack: end !important; - justify-content: flex-end !important; -} - -.justify-content-center { - -webkit-box-pack: center !important; - -ms-flex-pack: center !important; - justify-content: center !important; -} - -.justify-content-between { - -webkit-box-pack: justify !important; - -ms-flex-pack: justify !important; - justify-content: space-between !important; -} - -.justify-content-around { - -ms-flex-pack: distribute !important; - justify-content: space-around !important; -} - -.justify-content-evenly { - -webkit-box-pack: space-evenly !important; - -ms-flex-pack: space-evenly !important; - justify-content: space-evenly !important; -} - -.align-items-start { - -webkit-box-align: start !important; - -ms-flex-align: start !important; - align-items: flex-start !important; -} - -.align-items-end { - -webkit-box-align: end !important; - -ms-flex-align: end !important; - align-items: flex-end !important; -} - -.align-items-center { - -webkit-box-align: center !important; - -ms-flex-align: center !important; - align-items: center !important; -} - -.align-items-baseline { - -webkit-box-align: baseline !important; - -ms-flex-align: baseline !important; - align-items: baseline !important; -} - -.align-items-stretch { - -webkit-box-align: stretch !important; - -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; -} - -.order-first { - -webkit-box-ordinal-group: 0 !important; - -ms-flex-order: -1 !important; - order: -1 !important; -} - -.order-0 { - -webkit-box-ordinal-group: 1 !important; - -ms-flex-order: 0 !important; - order: 0 !important; -} - -.order-1 { - -webkit-box-ordinal-group: 2 !important; - -ms-flex-order: 1 !important; - order: 1 !important; -} - -.order-2 { - -webkit-box-ordinal-group: 3 !important; - -ms-flex-order: 2 !important; - order: 2 !important; -} - -.order-3 { - -webkit-box-ordinal-group: 4 !important; - -ms-flex-order: 3 !important; - order: 3 !important; -} - -.order-4 { - -webkit-box-ordinal-group: 5 !important; - -ms-flex-order: 4 !important; - order: 4 !important; -} - -.order-5 { - -webkit-box-ordinal-group: 6 !important; - -ms-flex-order: 5 !important; - order: 5 !important; -} - -.order-last { - -webkit-box-ordinal-group: 7 !important; - -ms-flex-order: 6 !important; - order: 6 !important; -} - -.m-0 { - margin: 0 !important; -} - -.m-1 { - margin: 0.25rem !important; -} - -.m-2 { - margin: 0.5rem !important; -} - -.m-3 { - margin: 1rem !important; -} - -.m-4 { - margin: 1.5rem !important; -} - -.m-5 { - margin: 3rem !important; -} - -.m-auto { - margin: auto !important; -} - -.mx-0 { - margin-left: 0 !important; - margin-right: 0 !important; -} - -.mx-1 { - margin-left: 0.25rem !important; - margin-right: 0.25rem !important; -} - -.mx-2 { - margin-left: 0.5rem !important; - margin-right: 0.5rem !important; -} - -.mx-3 { - margin-left: 1rem !important; - margin-right: 1rem !important; -} - -.mx-4 { - margin-left: 1.5rem !important; - margin-right: 1.5rem !important; -} - -.mx-5 { - margin-left: 3rem !important; - margin-right: 3rem !important; -} - -.mx-auto { - margin-left: auto !important; - margin-right: 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; -} - -.my-5 { - margin-top: 3rem !important; - margin-bottom: 3rem !important; -} - -.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-left: 0 !important; -} - -.me-1 { - margin-left: 0.25rem !important; -} - -.me-2 { - margin-left: 0.5rem !important; -} - -.me-3 { - margin-left: 1rem !important; -} -.me-4 { - margin-left: 1.5rem !important; -} - -.me-5 { - margin-left: 3rem !important; -} - -.me-auto { - margin-left: auto !important; -} - -.mb-0 { - margin-bottom: 0 !important; -} - -.mb-1 { - margin-bottom: 0.25rem !important; -} - -.mb-2 { - margin-bottom: 0.5rem !important; -} - -.mb-3, .form-group { - 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-right: 0 !important; -} - -.ms-1 { - margin-right: 0.25rem !important; -} - -.ms-2 { - margin-right: 0.5rem !important; -} - -.ms-3 { - margin-right: 1rem !important; -} - -.ms-4 { - margin-right: 1.5rem !important; -} - -.ms-5 { - margin-right: 3rem !important; -} - -.ms-auto { - margin-right: auto !important; -} - -.p-0 { - padding: 0 !important; -} - -.p-1 { - padding: 0.25rem !important; -} - -.p-2 { - padding: 0.5rem !important; -} - -.p-3 { - padding: 1rem !important; -} - -.p-4 { - padding: 1.5rem !important; -} - -.p-5 { - padding: 3rem !important; -} - -.px-0 { - padding-left: 0 !important; - padding-right: 0 !important; -} - -.px-1 { - padding-left: 0.25rem !important; - padding-right: 0.25rem !important; -} - -.px-2 { - padding-left: 0.5rem !important; - padding-right: 0.5rem !important; -} - -.px-3 { - padding-left: 1rem !important; - padding-right: 1rem !important; -} - -.px-4 { - padding-left: 1.5rem !important; - padding-right: 1.5rem !important; -} - -.px-5 { - padding-left: 3rem !important; - padding-right: 3rem !important; -} - -.py-0 { - padding-top: 0 !important; - padding-bottom: 0 !important; -} - -.py-1 { - padding-top: 0.25rem !important; - padding-bottom: 0.25rem !important; -} - -.py-2 { - padding-top: 0.5rem !important; - padding-bottom: 0.5rem !important; -} - -.py-3 { - padding-top: 1rem !important; - padding-bottom: 1rem !important; -} - -.py-4 { - padding-top: 1.5rem !important; - padding-bottom: 1.5rem !important; -} - -.py-5 { - padding-top: 3rem !important; - padding-bottom: 3rem !important; -} - -.pt-0 { - padding-top: 0 !important; -} - -.pt-1 { - padding-top: 0.25rem !important; -} - -.pt-2 { - padding-top: 0.5rem !important; -} - -.pt-3 { - padding-top: 1rem !important; -} - -.pt-4 { - padding-top: 1.5rem !important; -} - -.pt-5 { - padding-top: 3rem !important; -} - -.pe-0 { - padding-left: 0 !important; -} - -.pe-1 { - padding-left: 0.25rem !important; -} - -.pe-2 { - padding-left: 0.5rem !important; -} - -.pe-3 { - padding-left: 1rem !important; -} - -.pe-4 { - padding-left: 1.5rem !important; -} - -.pe-5 { - padding-left: 3rem !important; -} - -.pb-0 { - padding-bottom: 0 !important; -} - -.pb-1 { - padding-bottom: 0.25rem !important; -} - -.pb-2 { - padding-bottom: 0.5rem !important; -} + .float-xxl-start { + float: left !important; -.pb-3 { - padding-bottom: 1rem !important; } -.pb-4 { - padding-bottom: 1.5rem !important; -} +[dir="rtl"] .float-xxl-end { -.pb-5 { - padding-bottom: 3rem !important; -} + float: left !important; -.ps-0 { - padding-right: 0 !important; } -.ps-1 { - padding-right: 0.25rem !important; -} +[dir="rtl"] .mx-xxl-0 { -.ps-2 { - padding-right: 0.5rem !important; -} + margin-right: 0 !important; + margin-left: 0 !important; -.ps-3 { - padding-right: 1rem !important; } -.ps-4 { - padding-right: 1.5rem !important; -} +[dir="rtl"] .mx-xxl-1 { -.ps-5 { - padding-right: 3rem !important; -} + margin-right: 0.25rem !important; + margin-left: 0.25rem !important; -.gap-0 { - gap: 0 !important; } -.gap-1 { - gap: 0.25rem !important; -} +[dir="rtl"] .mx-xxl-2 { -.gap-2 { - gap: 0.5rem !important; -} + margin-right: 0.5rem !important; + margin-left: 0.5rem !important; -.gap-3 { - gap: 1rem !important; } -.gap-4 { - gap: 1.5rem !important; -} +[dir="rtl"] .mx-xxl-3 { -.gap-5 { - gap: 3rem !important; -} + margin-right: 1rem !important; + margin-left: 1rem !important; -.font-monospace { - font-family: var(--font-monospace) !important; } -.fs-1 { - font-size: calc(1.375rem + 1.5vw) !important; -} +[dir="rtl"] .mx-xxl-4 { -.fs-2 { - font-size: calc(1.325rem + 0.9vw) !important; -} + margin-right: 1.5rem !important; + margin-left: 1.5rem !important; -.fs-3 { - font-size: calc(1.3rem + 0.6vw) !important; } -.fs-4 { - font-size: calc(1.275rem + 0.3vw) !important; -} +[dir="rtl"] .mx-xxl-5 { -.fs-5 { - font-size: 1.25rem !important; -} + margin-right: 3rem !important; + margin-left: 3rem !important; -.fs-6 { - font-size: 1rem !important; } -.fst-italic { - font-style: italic !important; -} +[dir="rtl"] .mx-xxl-auto { -.fst-normal { - font-style: normal !important; -} + margin-right: auto !important; + margin-left: auto !important; -.fw-light { - font-weight: 300 !important; } -.fw-lighter { - font-weight: lighter !important; -} +[dir="rtl"] .me-xxl-0 { -.fw-normal { - font-weight: 400 !important; -} + margin-right: 0 !important; -.fw-bold { - font-weight: 700 !important; } -.fw-semibold { - font-weight: 600 !important; -} +[dir="rtl"] .me-xxl-1 { -.fw-bolder { - font-weight: bolder !important; -} + margin-right: 0.25rem !important; -.lh-1 { - line-height: 1 !important; } -.lh-sm { - line-height: 1.25 !important; -} +[dir="rtl"] .me-xxl-2 { -.lh-base { - line-height: 1.5 !important; -} + margin-right: 0.5rem !important; -.lh-lg { - line-height: 2 !important; } -.text-start { - text-align: right !important; -} +[dir="rtl"] .me-xxl-3 { -.text-end { - text-align: left !important; -} + margin-right: 1rem !important; -.text-center { - text-align: center !important; } -.text-decoration-none { - text-decoration: none !important; -} +[dir="rtl"] .me-xxl-4 { -.text-decoration-underline { - text-decoration: underline !important; -} + margin-right: 1.5rem !important; -.text-decoration-line-through { - text-decoration: line-through !important; } -.text-lowercase { - text-transform: lowercase !important; -} +[dir="rtl"] .me-xxl-5 { -.text-uppercase { - text-transform: uppercase !important; -} + margin-right: 3rem !important; -.text-capitalize { - text-transform: capitalize !important; } -.text-wrap { - white-space: normal !important; -} +[dir="rtl"] .me-xxl-auto { -.text-nowrap { - white-space: nowrap !important; -} -.text-primary { - --text-opacity: 1; - color: rgba(var(--primary-rgb), var(--text-opacity)) !important; -} + margin-right: auto !important; -.text-secondary { - --text-opacity: 1; - color: rgba(var(--secondary-rgb), var(--text-opacity)) !important; } -.text-success { - --text-opacity: 1; - color: rgba(var(--success-rgb), var(--text-opacity)) !important; -} +[dir="rtl"] .ms-xxl-0 { -.text-info { - --text-opacity: 1; - color: rgba(var(--info-rgb), var(--text-opacity)) !important; -} + margin-left: 0 !important; -.text-warning { - --text-opacity: 1; - color: rgba(var(--warning-rgb), var(--text-opacity)) !important; } -.text-danger { - --text-opacity: 1; - color: rgba(var(--danger-rgb), var(--text-opacity)) !important; -} +[dir="rtl"] .ms-xxl-1 { -.text-light { - --text-opacity: 1; - color: rgba(var(--light-rgb), var(--text-opacity)) !important; -} + margin-left: 0.25rem !important; -.text-dark { - --text-opacity: 1; - color: rgba(var(--dark-rgb), var(--text-opacity)) !important; } -.text-black { - --text-opacity: 1; - color: rgba(var(--black-rgb), var(--text-opacity)) !important; -} +[dir="rtl"] .ms-xxl-2 { -.text-white { - --text-opacity: 1; - color: rgba(var(--white-rgb), var(--text-opacity)) !important; -} + margin-left: 0.5rem !important; -.text-body { - --text-opacity: 1; - color: rgba(var(--body-color-rgb), var(--text-opacity)) !important; } -.text-muted { - --text-opacity: 1; - color: hsl(210, 7%, 46%) !important; -} +[dir="rtl"] .ms-xxl-3 { -.text-black-50 { - --text-opacity: 1; - color: rgba(0, 0, 0, 0.5) !important; -} + margin-left: 1rem !important; -.text-white-50 { - --text-opacity: 1; - color: rgba(255, 255, 255, 0.5) !important; } -.text-reset { - --text-opacity: 1; - color: inherit !important; -} +[dir="rtl"] .ms-xxl-4 { -.text-opacity-25 { - --text-opacity: 0.25; -} + margin-left: 1.5rem !important; -.text-opacity-50 { - --text-opacity: 0.5; } -.text-opacity-75 { - --text-opacity: 0.75; -} +[dir="rtl"] .ms-xxl-5 { -.text-opacity-100 { - --text-opacity: 1; -} + margin-left: 3rem !important; -.bg-primary { - --bg-opacity: 1; - background-color: rgba(var(--primary-rgb), var(--bg-opacity)) !important; } -.bg-secondary { - --bg-opacity: 1; - background-color: rgba(var(--secondary-rgb), var(--bg-opacity)) !important; -} +[dir="rtl"] .ms-xxl-auto { -.bg-success { - --bg-opacity: 1; - background-color: rgba(var(--success-rgb), var(--bg-opacity)) !important; -} + margin-left: auto !important; -.bg-info { - --bg-opacity: 1; - background-color: rgba(var(--info-rgb), var(--bg-opacity)) !important; } -.bg-warning { - --bg-opacity: 1; - background-color: rgba(var(--warning-rgb), var(--bg-opacity)) !important; -} +[dir="rtl"] .px-xxl-0 { -.bg-danger { - --bg-opacity: 1; - background-color: rgba(var(--danger-rgb), var(--bg-opacity)) !important; -} + padding-right: 0 !important; + padding-left: 0 !important; -.bg-light { - --bg-opacity: 1; - background-color: rgba(var(--light-rgb), var(--bg-opacity)) !important; } -.bg-dark { - --bg-opacity: 1; - background-color: rgba(var(--dark-rgb), var(--bg-opacity)) !important; -} +[dir="rtl"] .px-xxl-1 { -.bg-black { - --bg-opacity: 1; - background-color: rgba(var(--black-rgb), var(--bg-opacity)) !important; -} + padding-right: 0.25rem !important; + padding-left: 0.25rem !important; -.bg-white { - --bg-opacity: 1; - background-color: rgba(var(--white-rgb), var(--bg-opacity)) !important; } -.bg-body { - --bg-opacity: 1; - background-color: rgba(var(--body-bg-rgb), var(--bg-opacity)) !important; -} +[dir="rtl"] .px-xxl-2 { -.bg-transparent { - --bg-opacity: 1; - background-color: transparent !important; -} + padding-right: 0.5rem !important; + padding-left: 0.5rem !important; -.bg-opacity-10 { - --bg-opacity: 0.1; } -.bg-opacity-25 { - --bg-opacity: 0.25; -} +[dir="rtl"] .px-xxl-3 { -.bg-opacity-50 { - --bg-opacity: 0.5; -} + padding-right: 1rem !important; + padding-left: 1rem !important; -.bg-opacity-75 { - --bg-opacity: 0.75; } -.bg-opacity-100 { - --bg-opacity: 1; -} +[dir="rtl"] .px-xxl-4 { -.bg-gradient { - background-image: var(--gradient) !important; -} + padding-right: 1.5rem !important; + padding-left: 1.5rem !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; - -ms-user-select: auto !important; - user-select: auto !important; -} +[dir="rtl"] .px-xxl-5 { -.user-select-none { - -webkit-user-select: none !important; - -moz-user-select: none !important; - -ms-user-select: none !important; - user-select: none !important; -} + padding-right: 3rem !important; + padding-left: 3rem !important; -.pe-none { - pointer-events: none !important; } -.pe-auto { - pointer-events: auto !important; -} +[dir="rtl"] .pe-xxl-0 { -.rounded { - border-radius: var(--border-radius) !important; -} + padding-right: 0 !important; -.rounded-0 { - border-radius: 0 !important; } -.rounded-1 { - border-radius: var(--border-radius-sm) !important; -} +[dir="rtl"] .pe-xxl-1 { -.rounded-2 { - border-radius: var(--border-radius) !important; -} + padding-right: 0.25rem !important; -.rounded-3 { - border-radius: var(--border-radius-lg) !important; } -.rounded-4 { - border-radius: var(--border-radius-xl) !important; -} +[dir="rtl"] .pe-xxl-2 { -.rounded-5 { - border-radius: var(--border-radius-2xl) !important; -} + padding-right: 0.5rem !important; -.rounded-circle { - border-radius: 50% !important; } -.rounded-pill { - border-radius: var(--border-radius-pill) !important; -} +[dir="rtl"] .pe-xxl-3 { -.rounded-top { - border-top-right-radius: var(--border-radius) !important; - border-top-left-radius: var(--border-radius) !important; -} + padding-right: 1rem !important; -.rounded-end { - border-top-left-radius: var(--border-radius) !important; - border-bottom-left-radius: var(--border-radius) !important; } -.rounded-bottom { - border-bottom-left-radius: var(--border-radius) !important; - border-bottom-right-radius: var(--border-radius) !important; -} +[dir="rtl"] .pe-xxl-4 { -.rounded-start { - border-bottom-right-radius: var(--border-radius) !important; - border-top-right-radius: var(--border-radius) !important; -} + padding-right: 1.5rem !important; -.visible { - visibility: visible !important; } -.invisible { - visibility: hidden !important; -} +[dir="rtl"] .pe-xxl-5 { -@media (min-width: 576px) { - .float-sm-start { - float: right !important; - } - .float-sm-end { - float: left !important; - } - .float-sm-none { - float: none !important; - } - .d-sm-inline { - display: inline !important; - } - .d-sm-inline-block { - display: inline-block !important; - } - .d-sm-block { - display: block !important; - } - .d-sm-grid { - display: grid !important; - } - .d-sm-table { - display: table !important; - } - .d-sm-table-row { - display: table-row !important; - } - .d-sm-table-cell { - display: table-cell !important; - } - .d-sm-flex { - display: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; - } - .d-sm-inline-flex { - display: -webkit-inline-box !important; - display: -ms-inline-flexbox !important; - display: inline-flex !important; - } - .d-sm-none { - display: none !important; - } - .flex-sm-fill { - -webkit-box-flex: 1 !important; - -ms-flex: 1 1 auto !important; - flex: 1 1 auto !important; - } - .flex-sm-row { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: row !important; - flex-direction: row !important; - } - .flex-sm-column { - -webkit-box-orient: vertical !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: column !important; - flex-direction: column !important; - } - .flex-sm-row-reverse { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: row-reverse !important; - flex-direction: row-reverse !important; - } - .flex-sm-column-reverse { - -webkit-box-orient: vertical !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: column-reverse !important; - flex-direction: column-reverse !important; - } - .flex-sm-grow-0 { - -webkit-box-flex: 0 !important; - -ms-flex-positive: 0 !important; - flex-grow: 0 !important; - } - .flex-sm-grow-1 { - -webkit-box-flex: 1 !important; - -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; - } - .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; - } - .justify-content-sm-start { - -webkit-box-pack: start !important; - -ms-flex-pack: start !important; - justify-content: flex-start !important; - } - .justify-content-sm-end { - -webkit-box-pack: end !important; - -ms-flex-pack: end !important; - justify-content: flex-end !important; - } - .justify-content-sm-center { - -webkit-box-pack: center !important; - -ms-flex-pack: center !important; - justify-content: center !important; - } - .justify-content-sm-between { - -webkit-box-pack: justify !important; - -ms-flex-pack: justify !important; - justify-content: space-between !important; - } - .justify-content-sm-around { - -ms-flex-pack: distribute !important; - justify-content: space-around !important; - } - .justify-content-sm-evenly { - -webkit-box-pack: space-evenly !important; - -ms-flex-pack: space-evenly !important; - justify-content: space-evenly !important; - } - .align-items-sm-start { - -webkit-box-align: start !important; - -ms-flex-align: start !important; - align-items: flex-start !important; - } - .align-items-sm-end { - -webkit-box-align: end !important; - -ms-flex-align: end !important; - align-items: flex-end !important; - } - .align-items-sm-center { - -webkit-box-align: center !important; - -ms-flex-align: center !important; - align-items: center !important; - } - .align-items-sm-baseline { - -webkit-box-align: baseline !important; - -ms-flex-align: baseline !important; - align-items: baseline !important; - } - .align-items-sm-stretch { - -webkit-box-align: stretch !important; - -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; - } - .order-sm-first { - -webkit-box-ordinal-group: 0 !important; - -ms-flex-order: -1 !important; - order: -1 !important; - } - .order-sm-0 { - -webkit-box-ordinal-group: 1 !important; - -ms-flex-order: 0 !important; - order: 0 !important; - } - .order-sm-1 { - -webkit-box-ordinal-group: 2 !important; - -ms-flex-order: 1 !important; - order: 1 !important; - } - .order-sm-2 { - -webkit-box-ordinal-group: 3 !important; - -ms-flex-order: 2 !important; - order: 2 !important; - } - .order-sm-3 { - -webkit-box-ordinal-group: 4 !important; - -ms-flex-order: 3 !important; - order: 3 !important; - } - .order-sm-4 { - -webkit-box-ordinal-group: 5 !important; - -ms-flex-order: 4 !important; - order: 4 !important; - } - .order-sm-5 { - -webkit-box-ordinal-group: 6 !important; - -ms-flex-order: 5 !important; - order: 5 !important; - } - .order-sm-last { - -webkit-box-ordinal-group: 7 !important; - -ms-flex-order: 6 !important; - 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-left: 0 !important; - margin-right: 0 !important; - } - .mx-sm-1 { - margin-left: 0.25rem !important; - margin-right: 0.25rem !important; - } - .mx-sm-2 { - margin-left: 0.5rem !important; - margin-right: 0.5rem !important; - } - .mx-sm-3 { - margin-left: 1rem !important; - margin-right: 1rem !important; - } - .mx-sm-4 { - margin-left: 1.5rem !important; - margin-right: 1.5rem !important; - } - .mx-sm-5 { - margin-left: 3rem !important; - margin-right: 3rem !important; - } - .mx-sm-auto { - margin-left: auto !important; - margin-right: auto !important; - } - .my-sm-0 { - margin-top: 0 !important; - margin-bottom: 0 !important; - } - .my-sm-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-left: 0 !important; - } - .me-sm-1 { - margin-left: 0.25rem !important; - } - .me-sm-2 { - margin-left: 0.5rem !important; - } - .me-sm-3 { - margin-left: 1rem !important; - } - .me-sm-4 { - margin-left: 1.5rem !important; - } - .me-sm-5 { - margin-left: 3rem !important; - } - .me-sm-auto { - margin-left: 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-right: 0 !important; - } - .ms-sm-1 { - margin-right: 0.25rem !important; - } - .ms-sm-2 { - margin-right: 0.5rem !important; - } - .ms-sm-3 { - margin-right: 1rem !important; - } - .ms-sm-4 { - margin-right: 1.5rem !important; - } - .ms-sm-5 { - margin-right: 3rem !important; - } - .ms-sm-auto { - margin-right: 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-left: 0 !important; - padding-right: 0 !important; - } - .px-sm-1 { - padding-left: 0.25rem !important; - padding-right: 0.25rem !important; - } - .px-sm-2 { - padding-left: 0.5rem !important; - padding-right: 0.5rem !important; - } - .px-sm-3 { - padding-left: 1rem !important; - padding-right: 1rem !important; - } - .px-sm-4 { - padding-left: 1.5rem !important; - padding-right: 1.5rem !important; - } - .px-sm-5 { - padding-left: 3rem !important; - padding-right: 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-left: 0 !important; - } - .pe-sm-1 { - padding-left: 0.25rem !important; - } - .pe-sm-2 { - padding-left: 0.5rem !important; - } - .pe-sm-3 { - padding-left: 1rem !important; - } - .pe-sm-4 { - padding-left: 1.5rem !important; - } - .pe-sm-5 { - padding-left: 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-right: 0 !important; - } - .ps-sm-1 { - padding-right: 0.25rem !important; - } - .ps-sm-2 { - padding-right: 0.5rem !important; - } - .ps-sm-3 { - padding-right: 1rem !important; - } - .ps-sm-4 { - padding-right: 1.5rem !important; - } - .ps-sm-5 { - padding-right: 3rem !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; - } - .text-sm-start { - text-align: right !important; - } - .text-sm-end { - text-align: left !important; - } - .text-sm-center { - text-align: center !important; - } -} -@media (min-width: 768px) { - .float-md-start { - float: right !important; - } - .float-md-end { - float: left !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: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; - } - .d-md-inline-flex { - display: -webkit-inline-box !important; - display: -ms-inline-flexbox !important; - display: inline-flex !important; - } - .d-md-none { - display: none !important; - } - .flex-md-fill { - -webkit-box-flex: 1 !important; - -ms-flex: 1 1 auto !important; - flex: 1 1 auto !important; - } - .flex-md-row { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: row !important; - flex-direction: row !important; - } - .flex-md-column { - -webkit-box-orient: vertical !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: column !important; - flex-direction: column !important; - } - .flex-md-row-reverse { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: row-reverse !important; - flex-direction: row-reverse !important; - } - .flex-md-column-reverse { - -webkit-box-orient: vertical !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: column-reverse !important; - flex-direction: column-reverse !important; - } - .flex-md-grow-0 { - -webkit-box-flex: 0 !important; - -ms-flex-positive: 0 !important; - flex-grow: 0 !important; - } - .flex-md-grow-1 { - -webkit-box-flex: 1 !important; - -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; - } - .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; - } - .justify-content-md-start { - -webkit-box-pack: start !important; - -ms-flex-pack: start !important; - justify-content: flex-start !important; - } - .justify-content-md-end { - -webkit-box-pack: end !important; - -ms-flex-pack: end !important; - justify-content: flex-end !important; - } - .justify-content-md-center { - -webkit-box-pack: center !important; - -ms-flex-pack: center !important; - justify-content: center !important; - } - .justify-content-md-between { - -webkit-box-pack: justify !important; - -ms-flex-pack: justify !important; - justify-content: space-between !important; - } - .justify-content-md-around { - -ms-flex-pack: distribute !important; - justify-content: space-around !important; - } - .justify-content-md-evenly { - -webkit-box-pack: space-evenly !important; - -ms-flex-pack: space-evenly !important; - justify-content: space-evenly !important; - } - .align-items-md-start { - -webkit-box-align: start !important; - -ms-flex-align: start !important; - align-items: flex-start !important; - } - .align-items-md-end { - -webkit-box-align: end !important; - -ms-flex-align: end !important; - align-items: flex-end !important; - } - .align-items-md-center { - -webkit-box-align: center !important; - -ms-flex-align: center !important; - align-items: center !important; - } - .align-items-md-baseline { - -webkit-box-align: baseline !important; - -ms-flex-align: baseline !important; - align-items: baseline !important; - } - .align-items-md-stretch { - -webkit-box-align: stretch !important; - -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; - } - .order-md-first { - -webkit-box-ordinal-group: 0 !important; - -ms-flex-order: -1 !important; - order: -1 !important; - } - .order-md-0 { - -webkit-box-ordinal-group: 1 !important; - -ms-flex-order: 0 !important; - order: 0 !important; - } - .order-md-1 { - -webkit-box-ordinal-group: 2 !important; - -ms-flex-order: 1 !important; - order: 1 !important; - } - .order-md-2 { - -webkit-box-ordinal-group: 3 !important; - -ms-flex-order: 2 !important; - order: 2 !important; - } - .order-md-3 { - -webkit-box-ordinal-group: 4 !important; - -ms-flex-order: 3 !important; - order: 3 !important; - } - .order-md-4 { - -webkit-box-ordinal-group: 5 !important; - -ms-flex-order: 4 !important; - order: 4 !important; - } - .order-md-5 { - -webkit-box-ordinal-group: 6 !important; - -ms-flex-order: 5 !important; - order: 5 !important; - } - .order-md-last { - -webkit-box-ordinal-group: 7 !important; - -ms-flex-order: 6 !important; - 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-left: 0 !important; - margin-right: 0 !important; - } - .mx-md-1 { - margin-left: 0.25rem !important; - margin-right: 0.25rem !important; - } - .mx-md-2 { - margin-left: 0.5rem !important; - margin-right: 0.5rem !important; - } - .mx-md-3 { - margin-left: 1rem !important; - margin-right: 1rem !important; - } - .mx-md-4 { - margin-left: 1.5rem !important; - margin-right: 1.5rem !important; - } - .mx-md-5 { - margin-left: 3rem !important; - margin-right: 3rem !important; - } - .mx-md-auto { - margin-left: auto !important; - margin-right: auto !important; - } - .my-md-0 { - margin-top: 0 !important; - margin-bottom: 0 !important; - } - .my-md-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-left: 0 !important; - } - .me-md-1 { - margin-left: 0.25rem !important; - } - .me-md-2 { - margin-left: 0.5rem !important; - } - .me-md-3 { - margin-left: 1rem !important; - } - .me-md-4 { - margin-left: 1.5rem !important; - } - .me-md-5 { - margin-left: 3rem !important; - } - .me-md-auto { - margin-left: 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-right: 0 !important; - } - .ms-md-1 { - margin-right: 0.25rem !important; - } - .ms-md-2 { - margin-right: 0.5rem !important; - } - .ms-md-3 { - margin-right: 1rem !important; - } - .ms-md-4 { - margin-right: 1.5rem !important; - } - .ms-md-5 { - margin-right: 3rem !important; - } - .ms-md-auto { - margin-right: 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-left: 0 !important; - padding-right: 0 !important; - } - .px-md-1 { - padding-left: 0.25rem !important; - padding-right: 0.25rem !important; - } - .px-md-2 { - padding-left: 0.5rem !important; - padding-right: 0.5rem !important; - } - .px-md-3 { - padding-left: 1rem !important; - padding-right: 1rem !important; - } - .px-md-4 { - padding-left: 1.5rem !important; - padding-right: 1.5rem !important; - } - .px-md-5 { - padding-left: 3rem !important; - padding-right: 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-left: 0 !important; - } - .pe-md-1 { - padding-left: 0.25rem !important; - } - .pe-md-2 { - padding-left: 0.5rem !important; - } - .pe-md-3 { - padding-left: 1rem !important; - } - .pe-md-4 { - padding-left: 1.5rem !important; - } - .pe-md-5 { - padding-left: 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-right: 0 !important; - } - .ps-md-1 { - padding-right: 0.25rem !important; - } - .ps-md-2 { - padding-right: 0.5rem !important; - } - .ps-md-3 { - padding-right: 1rem !important; - } - .ps-md-4 { - padding-right: 1.5rem !important; - } - .ps-md-5 { - padding-right: 3rem !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; - } - .text-md-start { - text-align: right !important; - } - .text-md-end { - text-align: left !important; - } - .text-md-center { - text-align: center !important; - } -} -@media (min-width: 992px) { - .float-lg-start { - float: right !important; - } - .float-lg-end { - float: left !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: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; - } - .d-lg-inline-flex { - display: -webkit-inline-box !important; - display: -ms-inline-flexbox !important; - display: inline-flex !important; - } - .d-lg-none { - display: none !important; - } - .flex-lg-fill { - -webkit-box-flex: 1 !important; - -ms-flex: 1 1 auto !important; - flex: 1 1 auto !important; - } - .flex-lg-row { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: row !important; - flex-direction: row !important; - } - .flex-lg-column { - -webkit-box-orient: vertical !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: column !important; - flex-direction: column !important; - } - .flex-lg-row-reverse { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: row-reverse !important; - flex-direction: row-reverse !important; - } - .flex-lg-column-reverse { - -webkit-box-orient: vertical !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: column-reverse !important; - flex-direction: column-reverse !important; - } - .flex-lg-grow-0 { - -webkit-box-flex: 0 !important; - -ms-flex-positive: 0 !important; - flex-grow: 0 !important; - } - .flex-lg-grow-1 { - -webkit-box-flex: 1 !important; - -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; - } - .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; - } - .justify-content-lg-start { - -webkit-box-pack: start !important; - -ms-flex-pack: start !important; - justify-content: flex-start !important; - } - .justify-content-lg-end { - -webkit-box-pack: end !important; - -ms-flex-pack: end !important; - justify-content: flex-end !important; - } - .justify-content-lg-center { - -webkit-box-pack: center !important; - -ms-flex-pack: center !important; - justify-content: center !important; - } - .justify-content-lg-between { - -webkit-box-pack: justify !important; - -ms-flex-pack: justify !important; - justify-content: space-between !important; - } - .justify-content-lg-around { - -ms-flex-pack: distribute !important; - justify-content: space-around !important; - } - .justify-content-lg-evenly { - -webkit-box-pack: space-evenly !important; - -ms-flex-pack: space-evenly !important; - justify-content: space-evenly !important; - } - .align-items-lg-start { - -webkit-box-align: start !important; - -ms-flex-align: start !important; - align-items: flex-start !important; - } - .align-items-lg-end { - -webkit-box-align: end !important; - -ms-flex-align: end !important; - align-items: flex-end !important; - } - .align-items-lg-center { - -webkit-box-align: center !important; - -ms-flex-align: center !important; - align-items: center !important; - } - .align-items-lg-baseline { - -webkit-box-align: baseline !important; - -ms-flex-align: baseline !important; - align-items: baseline !important; - } - .align-items-lg-stretch { - -webkit-box-align: stretch !important; - -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; - } - .order-lg-first { - -webkit-box-ordinal-group: 0 !important; - -ms-flex-order: -1 !important; - order: -1 !important; - } - .order-lg-0 { - -webkit-box-ordinal-group: 1 !important; - -ms-flex-order: 0 !important; - order: 0 !important; - } - .order-lg-1 { - -webkit-box-ordinal-group: 2 !important; - -ms-flex-order: 1 !important; - order: 1 !important; - } - .order-lg-2 { - -webkit-box-ordinal-group: 3 !important; - -ms-flex-order: 2 !important; - order: 2 !important; - } - .order-lg-3 { - -webkit-box-ordinal-group: 4 !important; - -ms-flex-order: 3 !important; - order: 3 !important; - } - .order-lg-4 { - -webkit-box-ordinal-group: 5 !important; - -ms-flex-order: 4 !important; - order: 4 !important; - } - .order-lg-5 { - -webkit-box-ordinal-group: 6 !important; - -ms-flex-order: 5 !important; - order: 5 !important; - } - .order-lg-last { - -webkit-box-ordinal-group: 7 !important; - -ms-flex-order: 6 !important; - 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-left: 0 !important; - margin-right: 0 !important; - } - .mx-lg-1 { - margin-left: 0.25rem !important; - margin-right: 0.25rem !important; - } - .mx-lg-2 { - margin-left: 0.5rem !important; - margin-right: 0.5rem !important; - } - .mx-lg-3 { - margin-left: 1rem !important; - margin-right: 1rem !important; - } - .mx-lg-4 { - margin-left: 1.5rem !important; - margin-right: 1.5rem !important; - } - .mx-lg-5 { - margin-left: 3rem !important; - margin-right: 3rem !important; - } - .mx-lg-auto { - margin-left: auto !important; - margin-right: auto !important; - } - .my-lg-0 { - margin-top: 0 !important; - margin-bottom: 0 !important; - } - .my-lg-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-left: 0 !important; - } - .me-lg-1 { - margin-left: 0.25rem !important; - } - .me-lg-2 { - margin-left: 0.5rem !important; - } - .me-lg-3 { - margin-left: 1rem !important; - } - .me-lg-4 { - margin-left: 1.5rem !important; - } - .me-lg-5 { - margin-left: 3rem !important; - } - .me-lg-auto { - margin-left: 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-right: 0 !important; - } - .ms-lg-1 { - margin-right: 0.25rem !important; - } - .ms-lg-2 { - margin-right: 0.5rem !important; - } - .ms-lg-3 { - margin-right: 1rem !important; - } - .ms-lg-4 { - margin-right: 1.5rem !important; - } - .ms-lg-5 { - margin-right: 3rem !important; - } - .ms-lg-auto { - margin-right: 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-left: 0 !important; - padding-right: 0 !important; - } - .px-lg-1 { - padding-left: 0.25rem !important; - padding-right: 0.25rem !important; - } - .px-lg-2 { - padding-left: 0.5rem !important; - padding-right: 0.5rem !important; - } - .px-lg-3 { - padding-left: 1rem !important; - padding-right: 1rem !important; - } - .px-lg-4 { - padding-left: 1.5rem !important; - padding-right: 1.5rem !important; - } - .px-lg-5 { - padding-left: 3rem !important; - padding-right: 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-left: 0 !important; - } - .pe-lg-1 { - padding-left: 0.25rem !important; - } - .pe-lg-2 { - padding-left: 0.5rem !important; - } - .pe-lg-3 { - padding-left: 1rem !important; - } - .pe-lg-4 { - padding-left: 1.5rem !important; - } - .pe-lg-5 { - padding-left: 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-right: 0 !important; - } - .ps-lg-1 { - padding-right: 0.25rem !important; - } - .ps-lg-2 { - padding-right: 0.5rem !important; - } - .ps-lg-3 { - padding-right: 1rem !important; - } - .ps-lg-4 { - padding-right: 1.5rem !important; - } - .ps-lg-5 { - padding-right: 3rem !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; - } - .text-lg-start { - text-align: right !important; - } - .text-lg-end { - text-align: left !important; - } - .text-lg-center { - text-align: center !important; - } -} -@media (min-width: 1200px) { - .float-xl-start { - float: right !important; - } - .float-xl-end { - float: left !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: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; - } - .d-xl-inline-flex { - display: -webkit-inline-box !important; - display: -ms-inline-flexbox !important; - display: inline-flex !important; - } - .d-xl-none { - display: none !important; - } - .flex-xl-fill { - -webkit-box-flex: 1 !important; - -ms-flex: 1 1 auto !important; - flex: 1 1 auto !important; - } - .flex-xl-row { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: row !important; - flex-direction: row !important; - } - .flex-xl-column { - -webkit-box-orient: vertical !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: column !important; - flex-direction: column !important; - } - .flex-xl-row-reverse { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: row-reverse !important; - flex-direction: row-reverse !important; - } - .flex-xl-column-reverse { - -webkit-box-orient: vertical !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: column-reverse !important; - flex-direction: column-reverse !important; - } - .flex-xl-grow-0 { - -webkit-box-flex: 0 !important; - -ms-flex-positive: 0 !important; - flex-grow: 0 !important; - } - .flex-xl-grow-1 { - -webkit-box-flex: 1 !important; - -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; - } - .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; - } - .justify-content-xl-start { - -webkit-box-pack: start !important; - -ms-flex-pack: start !important; - justify-content: flex-start !important; - } - .justify-content-xl-end { - -webkit-box-pack: end !important; - -ms-flex-pack: end !important; - justify-content: flex-end !important; - } - .justify-content-xl-center { - -webkit-box-pack: center !important; - -ms-flex-pack: center !important; - justify-content: center !important; - } - .justify-content-xl-between { - -webkit-box-pack: justify !important; - -ms-flex-pack: justify !important; - justify-content: space-between !important; - } - .justify-content-xl-around { - -ms-flex-pack: distribute !important; - justify-content: space-around !important; - } - .justify-content-xl-evenly { - -webkit-box-pack: space-evenly !important; - -ms-flex-pack: space-evenly !important; - justify-content: space-evenly !important; - } - .align-items-xl-start { - -webkit-box-align: start !important; - -ms-flex-align: start !important; - align-items: flex-start !important; - } - .align-items-xl-end { - -webkit-box-align: end !important; - -ms-flex-align: end !important; - align-items: flex-end !important; - } - .align-items-xl-center { - -webkit-box-align: center !important; - -ms-flex-align: center !important; - align-items: center !important; - } - .align-items-xl-baseline { - -webkit-box-align: baseline !important; - -ms-flex-align: baseline !important; - align-items: baseline !important; - } - .align-items-xl-stretch { - -webkit-box-align: stretch !important; - -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; - } - .order-xl-first { - -webkit-box-ordinal-group: 0 !important; - -ms-flex-order: -1 !important; - order: -1 !important; - } - .order-xl-0 { - -webkit-box-ordinal-group: 1 !important; - -ms-flex-order: 0 !important; - order: 0 !important; - } - .order-xl-1 { - -webkit-box-ordinal-group: 2 !important; - -ms-flex-order: 1 !important; - order: 1 !important; - } - .order-xl-2 { - -webkit-box-ordinal-group: 3 !important; - -ms-flex-order: 2 !important; - order: 2 !important; - } - .order-xl-3 { - -webkit-box-ordinal-group: 4 !important; - -ms-flex-order: 3 !important; - order: 3 !important; - } - .order-xl-4 { - -webkit-box-ordinal-group: 5 !important; - -ms-flex-order: 4 !important; - order: 4 !important; - } - .order-xl-5 { - -webkit-box-ordinal-group: 6 !important; - -ms-flex-order: 5 !important; - order: 5 !important; - } - .order-xl-last { - -webkit-box-ordinal-group: 7 !important; - -ms-flex-order: 6 !important; - 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-left: 0 !important; - margin-right: 0 !important; - } - .mx-xl-1 { - margin-left: 0.25rem !important; - margin-right: 0.25rem !important; - } - .mx-xl-2 { - margin-left: 0.5rem !important; - margin-right: 0.5rem !important; - } - .mx-xl-3 { - margin-left: 1rem !important; - margin-right: 1rem !important; - } - .mx-xl-4 { - margin-left: 1.5rem !important; - margin-right: 1.5rem !important; - } - .mx-xl-5 { - margin-left: 3rem !important; - margin-right: 3rem !important; - } - .mx-xl-auto { - margin-left: auto !important; - margin-right: auto !important; - } - .my-xl-0 { - margin-top: 0 !important; - margin-bottom: 0 !important; - } - .my-xl-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-left: 0 !important; - } - .me-xl-1 { - margin-left: 0.25rem !important; - } - .me-xl-2 { - margin-left: 0.5rem !important; - } - .me-xl-3 { - margin-left: 1rem !important; - } - .me-xl-4 { - margin-left: 1.5rem !important; - } - .me-xl-5 { - margin-left: 3rem !important; - } - .me-xl-auto { - margin-left: 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-right: 0 !important; - } - .ms-xl-1 { - margin-right: 0.25rem !important; - } - .ms-xl-2 { - margin-right: 0.5rem !important; - } - .ms-xl-3 { - margin-right: 1rem !important; - } - .ms-xl-4 { - margin-right: 1.5rem !important; - } - .ms-xl-5 { - margin-right: 3rem !important; - } - .ms-xl-auto { - margin-right: 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-left: 0 !important; - padding-right: 0 !important; - } - .px-xl-1 { - padding-left: 0.25rem !important; - padding-right: 0.25rem !important; - } - .px-xl-2 { - padding-left: 0.5rem !important; - padding-right: 0.5rem !important; - } - .px-xl-3 { - padding-left: 1rem !important; - padding-right: 1rem !important; - } - .px-xl-4 { - padding-left: 1.5rem !important; - padding-right: 1.5rem !important; - } - .px-xl-5 { - padding-left: 3rem !important; - padding-right: 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-left: 0 !important; - } - .pe-xl-1 { - padding-left: 0.25rem !important; - } - .pe-xl-2 { - padding-left: 0.5rem !important; - } - .pe-xl-3 { - padding-left: 1rem !important; - } - .pe-xl-4 { - padding-left: 1.5rem !important; - } - .pe-xl-5 { - padding-left: 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-right: 0 !important; - } - .ps-xl-1 { - padding-right: 0.25rem !important; - } - .ps-xl-2 { - padding-right: 0.5rem !important; - } - .ps-xl-3 { - padding-right: 1rem !important; - } - .ps-xl-4 { - padding-right: 1.5rem !important; - } - .ps-xl-5 { - padding-right: 3rem !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; - } - .text-xl-start { - text-align: right !important; - } - .text-xl-end { - text-align: left !important; - } - .text-xl-center { - text-align: center !important; - } -} -@media (min-width: 1400px) { - .float-xxl-start { - float: right !important; - } - .float-xxl-end { - float: left !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: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; - } - .d-xxl-inline-flex { - display: -webkit-inline-box !important; - display: -ms-inline-flexbox !important; - display: inline-flex !important; - } - .d-xxl-none { - display: none !important; - } - .flex-xxl-fill { - -webkit-box-flex: 1 !important; - -ms-flex: 1 1 auto !important; - flex: 1 1 auto !important; - } - .flex-xxl-row { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: row !important; - flex-direction: row !important; - } - .flex-xxl-column { - -webkit-box-orient: vertical !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: column !important; - flex-direction: column !important; - } - .flex-xxl-row-reverse { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: row-reverse !important; - flex-direction: row-reverse !important; - } - .flex-xxl-column-reverse { - -webkit-box-orient: vertical !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: column-reverse !important; - flex-direction: column-reverse !important; - } - .flex-xxl-grow-0 { - -webkit-box-flex: 0 !important; - -ms-flex-positive: 0 !important; - flex-grow: 0 !important; - } - .flex-xxl-grow-1 { - -webkit-box-flex: 1 !important; - -ms-flex-positive: 1 !important; - flex-grow: 1 !important; - } - .flex-xxl-shrink-0 { - -ms-flex-negative: 0 !important; - flex-shrink: 0 !important; - } - .flex-xxl-shrink-1 { - -ms-flex-negative: 1 !important; - flex-shrink: 1 !important; - } - .flex-xxl-wrap { - -ms-flex-wrap: wrap !important; - flex-wrap: wrap !important; - } - .flex-xxl-nowrap { - -ms-flex-wrap: nowrap !important; - flex-wrap: nowrap !important; - } - .flex-xxl-wrap-reverse { - -ms-flex-wrap: wrap-reverse !important; - flex-wrap: wrap-reverse !important; - } - .justify-content-xxl-start { - -webkit-box-pack: start !important; - -ms-flex-pack: start !important; - justify-content: flex-start !important; - } - .justify-content-xxl-end { - -webkit-box-pack: end !important; - -ms-flex-pack: end !important; - justify-content: flex-end !important; - } - .justify-content-xxl-center { - -webkit-box-pack: center !important; - -ms-flex-pack: center !important; - justify-content: center !important; - } - .justify-content-xxl-between { - -webkit-box-pack: justify !important; - -ms-flex-pack: justify !important; - justify-content: space-between !important; - } - .justify-content-xxl-around { - -ms-flex-pack: distribute !important; - justify-content: space-around !important; - } - .justify-content-xxl-evenly { - -webkit-box-pack: space-evenly !important; - -ms-flex-pack: space-evenly !important; - justify-content: space-evenly !important; - } - .align-items-xxl-start { - -webkit-box-align: start !important; - -ms-flex-align: start !important; - align-items: flex-start !important; - } - .align-items-xxl-end { - -webkit-box-align: end !important; - -ms-flex-align: end !important; - align-items: flex-end !important; - } - .align-items-xxl-center { - -webkit-box-align: center !important; - -ms-flex-align: center !important; - align-items: center !important; - } - .align-items-xxl-baseline { - -webkit-box-align: baseline !important; - -ms-flex-align: baseline !important; - align-items: baseline !important; - } - .align-items-xxl-stretch { - -webkit-box-align: stretch !important; - -ms-flex-align: stretch !important; - align-items: stretch !important; - } - .align-content-xxl-start { - -ms-flex-line-pack: start !important; - align-content: flex-start !important; - } - .align-content-xxl-end { - -ms-flex-line-pack: end !important; - align-content: flex-end !important; - } - .align-content-xxl-center { - -ms-flex-line-pack: center !important; - align-content: center !important; - } - .align-content-xxl-between { - -ms-flex-line-pack: justify !important; - align-content: space-between !important; - } - .align-content-xxl-around { - -ms-flex-line-pack: distribute !important; - align-content: space-around !important; - } - .align-content-xxl-stretch { - -ms-flex-line-pack: stretch !important; - align-content: stretch !important; - } - .align-self-xxl-auto { - -ms-flex-item-align: auto !important; - align-self: auto !important; - } - .align-self-xxl-start { - -ms-flex-item-align: start !important; - align-self: flex-start !important; - } - .align-self-xxl-end { - -ms-flex-item-align: end !important; - align-self: flex-end !important; - } - .align-self-xxl-center { - -ms-flex-item-align: center !important; - align-self: center !important; - } - .align-self-xxl-baseline { - -ms-flex-item-align: baseline !important; - align-self: baseline !important; - } - .align-self-xxl-stretch { - -ms-flex-item-align: stretch !important; - align-self: stretch !important; - } - .order-xxl-first { - -webkit-box-ordinal-group: 0 !important; - -ms-flex-order: -1 !important; - order: -1 !important; - } - .order-xxl-0 { - -webkit-box-ordinal-group: 1 !important; - -ms-flex-order: 0 !important; - order: 0 !important; - } - .order-xxl-1 { - -webkit-box-ordinal-group: 2 !important; - -ms-flex-order: 1 !important; - order: 1 !important; - } - .order-xxl-2 { - -webkit-box-ordinal-group: 3 !important; - -ms-flex-order: 2 !important; - order: 2 !important; - } - .order-xxl-3 { - -webkit-box-ordinal-group: 4 !important; - -ms-flex-order: 3 !important; - order: 3 !important; - } - .order-xxl-4 { - -webkit-box-ordinal-group: 5 !important; - -ms-flex-order: 4 !important; - order: 4 !important; - } - .order-xxl-5 { - -webkit-box-ordinal-group: 6 !important; - -ms-flex-order: 5 !important; - order: 5 !important; - } - .order-xxl-last { - -webkit-box-ordinal-group: 7 !important; - -ms-flex-order: 6 !important; - 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-left: 0 !important; - margin-right: 0 !important; - } - .mx-xxl-1 { - margin-left: 0.25rem !important; - margin-right: 0.25rem !important; - } - .mx-xxl-2 { - margin-left: 0.5rem !important; - margin-right: 0.5rem !important; - } - .mx-xxl-3 { - margin-left: 1rem !important; - margin-right: 1rem !important; - } - .mx-xxl-4 { - margin-left: 1.5rem !important; - margin-right: 1.5rem !important; - } - .mx-xxl-5 { - margin-left: 3rem !important; - margin-right: 3rem !important; - } - .mx-xxl-auto { - margin-left: auto !important; - margin-right: auto !important; - } - .my-xxl-0 { - margin-top: 0 !important; - margin-bottom: 0 !important; - } - .my-xxl-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-left: 0 !important; - } - .me-xxl-1 { - margin-left: 0.25rem !important; - } - .me-xxl-2 { - margin-left: 0.5rem !important; - } - .me-xxl-3 { - margin-left: 1rem !important; - } - .me-xxl-4 { - margin-left: 1.5rem !important; - } - .me-xxl-5 { - margin-left: 3rem !important; - } - .me-xxl-auto { - margin-left: 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-right: 0 !important; - } - .ms-xxl-1 { - margin-right: 0.25rem !important; - } - .ms-xxl-2 { - margin-right: 0.5rem !important; - } - .ms-xxl-3 { - margin-right: 1rem !important; - } - .ms-xxl-4 { - margin-right: 1.5rem !important; - } - .ms-xxl-5 { - margin-right: 3rem !important; - } - .ms-xxl-auto { - margin-right: 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-left: 0 !important; - padding-right: 0 !important; - } - .px-xxl-1 { - padding-left: 0.25rem !important; - padding-right: 0.25rem !important; - } - .px-xxl-2 { - padding-left: 0.5rem !important; - padding-right: 0.5rem !important; - } - .px-xxl-3 { - padding-left: 1rem !important; - padding-right: 1rem !important; - } - .px-xxl-4 { - padding-left: 1.5rem !important; - padding-right: 1.5rem !important; - } - .px-xxl-5 { - padding-left: 3rem !important; - padding-right: 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-left: 0 !important; - } - .pe-xxl-1 { - padding-left: 0.25rem !important; - } - .pe-xxl-2 { - padding-left: 0.5rem !important; - } - .pe-xxl-3 { - padding-left: 1rem !important; - } - .pe-xxl-4 { - padding-left: 1.5rem !important; - } - .pe-xxl-5 { - padding-left: 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-right: 0 !important; - } - .ps-xxl-1 { - padding-right: 0.25rem !important; - } - .ps-xxl-2 { - padding-right: 0.5rem !important; - } - .ps-xxl-3 { - padding-right: 1rem !important; - } - .ps-xxl-4 { - padding-right: 1.5rem !important; - } - .ps-xxl-5 { - padding-right: 3rem !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; - } - .text-xxl-start { - text-align: right !important; - } - .text-xxl-end { - text-align: left !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: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; - } - .d-print-inline-flex { - display: -webkit-inline-box !important; - display: -ms-inline-flexbox !important; - display: inline-flex !important; - } - .d-print-none { - display: none !important; - } -} -.minicolors-theme-bootstrap .minicolors-swatch { - width: 36px; - height: 36px; -} -.minicolors-theme-bootstrap .minicolors-swatch > .minicolors-sprite { - top: 50%; - right: 8px; - border-radius: 0; - -webkit-transform: translateY(-50%); - transform: translateY(-50%); -} + padding-right: 3rem !important; -span.minicolors-swatch-color { - cursor: pointer; } -:root { - scroll-behavior: smooth; -} -@media screen and (prefers-reduced-motion: reduce) { - :root { - scroll-behavior: auto; - } -} +[dir="rtl"] .ps-xxl-0 { -html { - background-color: hsl(0, 0%, 100%); -} + padding-left: 0 !important; -body { - position: relative; - min-height: 100vh; } -img { - max-width: 100%; - height: auto; -} +[dir="rtl"] .ps-xxl-1 { -h1, .h1, -h2, -.h2, -h3, -.h3, -h4, -.h4, -h5, -.h5, -h6, -.h6 { - font-family: var(--font-family-headings, -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-weight: var(--font-weight-headings, 700); -} + padding-left: 0.25rem !important; -.display-1 { - font-size: clamp(2.7rem, 8vw, 5.5rem); } -.display-2 { - font-size: clamp(2.3rem, 7vw, 4.5rem); -} +[dir="rtl"] .ps-xxl-2 { -.display-3 { - font-size: clamp(1.9rem, 6vw, 3.5rem); -} + padding-left: 0.5rem !important; -.display-4 { - font-size: clamp(1.5rem, 5vw, 2.5rem); } -.lead { - font-size: clamp(1.1rem, 3vw, 1.25rem); -} +[dir="rtl"] .ps-xxl-3 { -a { - color: var(--color-link); -} -a:not([class]) { - text-decoration: underline; -} -a:hover, a:focus { - color: var(--color-hover); -} -a.navbar-brand { - color: var(--color-brand); -} + padding-left: 1rem !important; -.btn-primary { - background-color: var(--color-primary); - border-color: var(--color-primary); -} -.btn-primary:hover, .btn-primary:focus { - background-color: var(--color-hover); - border-color: var(--color-hover); } -.btn-group { - margin-bottom: 1em; -} -.btn-group > input { - padding: 0.5em; - border: 1px solid hsl(210, 14%, 83%); - border-top-right-radius: 0.25rem; - border-bottom-right-radius: 0.25rem; - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} -.btn-group > .btn-group { - margin-bottom: 0; -} +[dir="rtl"] .ps-xxl-4 { -.com-content-article ol, -.com-content-article ul { - overflow: hidden; -} + padding-left: 1.5rem !important; -.com-content-category__pagination { - margin-bottom: 1em; } -small, -.small { - font-size: 0.875rem; -} +[dir="rtl"] .ps-xxl-5 { -dd { - padding: 0; - word-wrap: break-word; -} + padding-left: 3rem !important; -th dd { - font-weight: var(--font-weight-normal, 400); } -.com-contact__thumbnail { - text-align: right; -} +[dir="rtl"] .text-xxl-start { -@media (min-width: 1200px) { - dl.dl-horizontal { - display: grid; - grid-template-columns: auto 1fr; - } - dl.dl-horizontal dt { - grid-column-start: 1; - grid-column-end: 2; - } - dl.dl-horizontal dd { - grid-column-start: 2; - grid-column-end: 3; - padding: 0 1em 0 0; - margin-bottom: 0; - } - .com-contact__container { - display: grid; - grid-template-columns: repeat(4, 1fr); - grid-template-rows: repeat(4, auto); - grid-gap: 1rem; - margin-bottom: 1em; - } - .com-contact__container h3, .com-contact__container .h3 { - grid-column: 1/5; - } - .com-contact__container .com-contact__thumbnail { - grid-column: 3/5; - grid-row: 2/5; - margin-bottom: 1em; - text-align: left; - } - .com-contact__container .com-contact__position { - grid-column: 1/3; - grid-row: 2/3; - } - .com-contact__container .com-contact__info { - grid-column: 1/3; - grid-row: 3/4; - } - .com-users-profile dt { - min-width: 180px; - } -} -figure { - margin: 0 0 2em; -} -figure.float-start { - margin-left: 1em; -} -figure.float-end { - margin-right: 1em; -} + text-align: left !important; -figcaption { - font-size: 0.9em; - color: hsl(210, 7%, 46%); } -.mod-menu { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; -} +[dir="rtl"] .text-xxl-end { -meter { - width: 100%; -} + text-align: left !important; -.pagenavigation, -.pager { - clear: both; -} -.pagenavigation .pagination, -.pager .pagination { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - padding: 0; - margin: 1em 0; -} -.pagenavigation .pagination .next:only-child, -.pager .pagination .next:only-child { - margin-right: auto; } -.page-link { - color: var(--color-link); -} -.page-link:hover { - color: var(--color-link); -} +[dir="rtl"] .minicolors-theme-bootstrap .minicolors-swatch>.minicolors-sprite { -.pager .pagination { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + top: 50%; + right: 8px; + border-radius: 0; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); } -[dir=rtl] li.next .page-link { - border-top-right-radius: 0.25rem; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0.25rem; -} +[dir="rtl"] .com-contact__thumbnail { -[dir=rtl] li.previous .page-link { - border-top-right-radius: 0; - border-top-left-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; - border-bottom-right-radius: 0; + text-align: left; + margin: 2rem; + padding:1rem; } -.article-index .toclink.active { - color: currentColor; -} +[dir="rtl"] .com-contact__container .com-contact__thumbnail { -.j-main-container .alert { - margin: 0.75rem; -} + grid-column: 1/5; + grid-row: 2/5; + text-align: left; -.alert-heading { - font-size: 1.5rem; } -@-webkit-keyframes fadeIn { - from { - opacity: 0; - -webkit-transform: translateY(-1rem); - transform: translateY(-1rem); - } - to { - opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); - } -} +[dir="rtl"] figure.float-start { -@keyframes fadeIn { - from { - opacity: 0; - -webkit-transform: translateY(-1rem); - transform: translateY(-1rem); - } - to { - opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); - } -} -/** -* Back to Top -*/ -.back-to-top-link { - position: absolute; - inset-inline-end: 1rem; - bottom: 1rem; - z-index: 10000; - padding: 0.5em; - color: var(--color-primary, hsl(220, 67%, 20%)); - pointer-events: all; - background-color: var(--white, hsl(0, 0%, 100%)); - border: 1px solid var(--color-primary, hsl(220, 67%, 20%)); - border-radius: 0.25rem; - opacity: 0; - -webkit-transition: opacity 200ms ease-in; - -o-transition: opacity 200ms ease-in; - transition: opacity 200ms ease-in; -} -.back-to-top-link.visible { - opacity: 1; -} -.back-to-top-link:hover, .back-to-top-link:focus { - color: var(--white, hsl(0, 0%, 100%)); - background-color: var(--color-hover); - border-color: var(--white, hsl(0, 0%, 100%)); + margin-right: 1rem; } -.container-banner img { - display: block; - margin: auto; -} -.container-banner .banner-overlay { - height: 70vh; - color: hsl(0, 0%, 100%); - background-repeat: no-repeat; - background-attachment: fixed; - background-position: top, center; - background-size: cover; -} -.container-banner .banner-overlay .overlay { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - height: 100%; - padding: 1em; - text-align: center; - background-color: hsla(0, 0%, 0%, 0.5); -} -.container-banner .banner-overlay .overlay .text-thin { - font-weight: lighter; -} -.container-banner .banner-overlay .overlay .text-thin::after { - display: block; - width: 30%; - height: 4px; - margin: 1rem auto 2rem; - content: ""; - background: hsl(0, 0%, 100%); -} -.container-banner .banner-overlay .overlay .text-thin .lead { - font-size: 150vh; -} -@media screen and (max-height: 740px) { - .container-banner .banner-overlay { - height: 100vh; - } -} +[dir="rtl"] figure.float-end { -.footer { - margin-top: 1em; - color: hsl(0, 0%, 100%); - background-color: var(--color-primary); - background-image: -o-linear-gradient(315deg, var(--color-hover) 0%, var(--color-primary) 100%) ; - background-image: linear-gradient(135deg, var(--color-hover) 0%, var(--color-primary) 100%) ; -} -.footer .grid-child { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - padding: 2.5rem 0.5em; -} -.footer a { - color: currentColor; -} -.footer .mod-menu { - position: relative; -} -.footer .metismenu.mod-menu .mm-collapse { - background: var(--color-primary); -} -@media (max-width: 991.98px) { - .footer .grid-child { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - } - .footer .grid-child .mod-footer { - margin: 0.375rem 0; - } + margin-left: 1rem; } -.form-control { - max-width: 100%; - background-color: hsl(0, 0%, 100%); -} -.form-control.input-xlarge { - max-width: 21.875rem; -} -.form-control.input-xxlarge { - max-width: 34.375rem; -} -.form-control.input-full { - max-width: 100%; -} +[dir="rtl"] .pagenavigation .pagination .next:only-child, +[dir="rtl"] .pager .pagination .next:only-child { -.spacer hr { - width: 23.75rem; + margin-left: auto; } -.form-select, .custom-select { - max-width: 100%; -} +[dir="rtl"] .checkboxes .checkbox input { -.form-inline .form-select, .form-inline .custom-select { - display: inline-block; - width: auto; + position: static; + margin-left: 0; } -@media (max-width: 991.98px) { - .form-inline .form-select, .form-inline .custom-select { - width: 100%; - } -} -td .form-control { - display: inline-block; - width: auto; -} +[dir="rtl"] [role=tooltip]:not(.show) { -.checkboxes { - padding-top: 5px; -} -.checkboxes .checkbox input { - position: static; - margin-right: 0; + left: 5rem; + z-index: 1070; + display: none; + max-width: 100%; + padding: 0.5rem; + margin: 0.5rem; + color: hsl(0, 0%, 0%); + text-align: start; + background: var(--body-bg); + border: 1px solid hsl(210, 7%, 46%); + border-radius: 0.25rem; + -webkit-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.8); + box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.8); } -.modal label { - width: 100%; -} +[dir="rtl"] [role=tooltip]:not(.show)[id^=editarticle-] { -.invalid { - color: hsl(3, 75%, 37%); - border-color: hsl(3, 75%, 37%); + left: auto; + -webkit-margin-start: -10rem; + margin-inline-start: -10rem; } -.valid { - border-color: hsl(120, 32%, 39%); -} +[dir="rtl"] [role=tooltip]:not(.show)[id^=editcontact-] { -.form-control-feedback { - display: block; + left: auto; + -webkit-margin-start: -10rem; + margin-inline-start: -10rem; } -[role=tooltip]:not(.show) { - left: 5em; - z-index: 1070; - display: none; - max-width: 100%; - padding: 0.5em; - margin: 0.5em; - color: hsl(0, 0%, 0%); - text-align: start; - background: hsl(0, 0%, 100%); - border: 1px solid hsl(210, 7%, 46%); - border-radius: 0.25rem; - -webkit-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.8); - box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.8); -} -[role=tooltip]:not(.show)[id^=editarticle-] { - left: auto; - -webkit-margin-start: -10em; - margin-inline-start: -10em; -} -[role=tooltip]:not(.show)[id^=editcontact-] { - left: auto; - -webkit-margin-start: -10em; - margin-inline-start: -10em; -} -[role=tooltip]:not(.show)[id^=id-skip-] { - left: auto; -} -[role=tooltip]:not(.show)[id^=cbunpublish] { - left: auto; -} +[dir="rtl"] [role=tooltip]:not(.show)[id^=id-skip-] { -:focus + [role=tooltip], -:hover + [role=tooltip] { - position: absolute; - display: block; + left: auto; } -.filter-search-bar__description { - bottom: 100%; -} +[dir="rtl"] [role=tooltip]:not(.show)[id^=cbunpublish] { -fieldset { - margin-bottom: 2em; -} -fieldset + fieldset { - margin-top: 2em; -} -fieldset > * { - margin-bottom: 0; + left: auto; } -.control-group { - margin: 1em 0; -} +[dir="rtl"] .btn.jmodedit { -.container-popup .filter-search-bar__description { - top: 100%; - bottom: auto; + position: absolute; + top: 0; + left: 0; + right: auto; + z-index: 900; + color: var(--color-link); + background-color: rgba(255, 255, 255, 0.5); + border: 1px solid #58595a; + border-radius: 0.25rem; } -.com-users-login__options { - margin-top: 2em; -} +[dir="rtl"] .container-header .container-nav { -.com-users-profile__edit #jform_privacyconsent_privacy .radio, -.com-users-profile__edit #jform_profile_tos .radio, -.com-users-profile__edit #jform_terms_terms .radio, -.com-users-registration #jform_privacyconsent_privacy .radio, -.com-users-registration #jform_profile_tos .radio, -.com-users-registration #jform_terms_terms .radio { - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; - gap: 1rem; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + padding-bottom: 0.3rem; + background-color: var(--nav-bg-color); + border-width: var(--border) 0; + border-top: solid var(--accent-color-primary); + border-bottom: solid var(--accent-color-secondary); + border-left: none; + border-right: none; } -.btn.jmodedit { - position: absolute; - top: 0; - left: 0; - right: auto; - z-index: 900; - color: var(--color-link); - background-color: rgba(255, 255, 255, 0.5); - border: 1px solid #58595a; - border-radius: 0.25rem; -} +[dir="rtl"] } -.container-header { - position: relative; - z-index: 10; - background-color: var(--color-primary); - background-image: -o-linear-gradient(225deg, var(--color-primary) 0%, var(--color-hover) 100%); - background-image: linear-gradient(-135deg, var(--color-primary) 0%, var(--color-hover) 100%); - -webkit-box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.03) inset; - box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.03) inset; -} -@media (max-width: 991.98px) { - .container-header { - position: relative !important; - } -} -.container-header .grid-child { - padding: 0.5em; -} -.container-header nav { - padding: 0; - margin-top: 0.5em; -} -.container-header .site-description { - font-size: 1rem; - color: hsl(0, 0%, 100%); - white-space: normal; -} -.container-header .navbar-brand { - position: relative; - display: inline-block; - padding-top: 0.3125rem; - padding-bottom: 0.3125rem; - font-size: 2rem; - color: hsl(0, 0%, 100%); - -webkit-margin-end: auto; - margin-inline-end: auto; -} -.container-header .navbar-brand a { - color: hsl(0, 0%, 100%); -} -.container-header .navbar-brand:hover, .container-header .navbar-brand:focus { - color: #f0f0f0; -} -.container-header .container-nav { - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - padding-bottom: 1em; -} -@media (max-width: 767.98px) { - .container-header .container-nav .container-search, - .container-header .container-nav nav { - margin-top: 1em; - } -} .container-header .container-nav .container-search:only-child { - margin-right: auto; -} -.container-header .navbar-collapse.show { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; -} -.container-header .mod-menu { - -webkit-box-flex: 1; - -ms-flex: 1 0 100%; - flex: 1 0 100%; - padding: 0; - margin: 0; - color: hsl(0, 0%, 100%); - list-style: none; -} -@media (min-width: 992px) { - .container-header .mod-menu { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 1; - -ms-flex: 1 1 0%; - flex: 1 1 0%; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - } -} -.container-header .mod-menu > li { - position: relative; -} -@media (min-width: 992px) { - .container-header .mod-menu > li + li { - margin-right: 1.55em; - } -} -.container-header .mod-menu > li > a, -.container-header .mod-menu > li > span { - position: relative; - color: currentColor; - text-decoration: none; -} -@media (min-width: 992px) { - .container-header .mod-menu > li::after { - position: absolute; - left: 50%; - bottom: 0; - right: 50%; - display: block; - height: 2px; - margin: auto; - content: ""; - background: transparent; - opacity: 0.2; - -webkit-transition: all 0.2s ease, background-color 0.2s ease; - -o-transition: all 0.2s ease, background-color 0.2s ease; - transition: all 0.2s ease, background-color 0.2s ease; - } -} -.container-header .mod-menu > li.active::after, .container-header .mod-menu > li:hover::after { - left: 2px; - right: 0; - background: hsl(0, 0%, 100%); -} -@media (max-width: 991.98px) { - .container-header .mod-menu > li.active > a, .container-header .mod-menu > li.active > span, - .container-header .mod-menu > li > a:hover { - text-decoration: underline; - } -} -.container-header .mod-menu .parent > ul { - display: none; - color: hsl(210, 11%, 15%); -} -.container-header .metismenu > li + li { - margin-right: 0; -} -@media (min-width: 992px) { - .container-header .metismenu > li > a::after, - .container-header .metismenu > li > button::before { - position: absolute; - left: 50%; - bottom: 0; - right: 50%; - display: block; - height: 2px; - margin: auto; - content: ""; - background: transparent; - opacity: 0.2; - -webkit-transition: all 0.2s ease, background-color 0.2s ease; - -o-transition: all 0.2s ease, background-color 0.2s ease; - transition: all 0.2s ease, background-color 0.2s ease; - } -} -.container-header .metismenu > li > a:hover::after, -.container-header .metismenu > li > button:hover::before, .container-header .metismenu > li.active > a::after, .container-header .metismenu > li.active > button::before { - left: 0; - right: 0; - background: hsl(0, 0%, 100%); -} -.container-header .metismenu > li > button.mm-toggler-link:hover::before, .container-header .metismenu > li.active > button.mm-toggler-link::before { - left: 0; - right: 0.5em; -} -@media (min-width: 992px) { - .container-header .metismenu > li.level-1.active > a, .container-header .metismenu > li.level-1.active > button, - .container-header .metismenu > li.level-1 > a:hover, - .container-header .metismenu > li.level-1 > button:hover { - text-decoration: none; - } -} -.container-header .metismenu > li.level-1 > ul { - min-width: 12rem; -} -.container-header .navbar-toggler { - color: hsl(0, 0%, 100%); - cursor: pointer; - border: 1px solid hsl(0, 0%, 100%); -} -.container-header .navbar-toggler .fas { - font-size: 1.5rem; -} -.container-header .container-search { - margin-top: 0.5em; -} -.container-header .mod-finder { - color: hsl(0, 0%, 100%); -} -.container-header .mod-finder a { - color: hsl(0, 0%, 100%); -} -.container-header .mod-finder a:hover, .container-header .mod-finder a:focus { - color: #e6e6e6; -} -.container-header .mod-finder .awesomplete { - color: var(--body-color); -} -.container-header .mod-finder .awesomplete > ul { - background: -webkit-gradient(linear, right top, left bottom, from(hsl(0, 0%, 100%)), to(hsla(0, 0%, 100%, 0.9))); - background: -o-linear-gradient(top right, hsl(0, 0%, 100%), hsla(0, 0%, 100%, 0.9)); - background: linear-gradient(to bottom left, hsl(0, 0%, 100%), hsla(0, 0%, 100%, 0.9)); + + margin-left: auto; } -.icon-white { - color: hsl(0, 0%, 100%); +[dir="rtl"] @media (min-width: 992px) { + + .container-header .mod-menu>li+li { + margin-left: 1.55rem; + } -.input-group-text::before { - min-width: 16px; +[dir="rtl"] @media (min-width: 992px) { + + .container-header .mod-menu>li::after { + position: absolute; + left: 50%; + bottom: 0; + right: 50%; + display: block; + height: 2px; + margin: auto; + content: ""; + background: transparent; + opacity: 0.2; + -webkit-transition: all 0.2s ease, background-color 0.2s ease; + -o-transition: all 0.2s ease, background-color 0.2s ease; + transition: all 0.2s ease, background-color 0.2s ease; + } -.tbody-icon { - padding: 0 3px; - text-align: center; - background-color: transparent; - border: 0; -} -.tbody-icon [class^=icon-], -.tbody-icon [class*=" icon-"], -.tbody-icon [class^=fa-], -.tbody-icon [class*=" fa-"] { - width: 26px; - height: 26px; - font-size: 1.1rem; - line-height: 22px; - color: hsl(210, 14%, 83%); - border: 2px solid var(--border); - border-radius: 50%; -} -.tbody-icon .icon-publish, -.tbody-icon .icon-check, -.tbody-icon .fa-check { - color: hsl(120, 32%, 39%); - border-color: hsl(120, 32%, 39%); -} -.tbody-icon .icon-checkedout, -.tbody-icon .icon-lock, -.tbody-icon .fa-lock { - width: auto; - height: auto; - font-size: 1.2rem; - line-height: 1rem; - color: hsl(210, 9%, 31%); - border: 0; -} -.tbody-icon.home-disabled, .tbody-icon.featured-disabled, .tbody-icon.color-featured-disabled, .tbody-icon.icon-star-disabled, .tbody-icon.fa-star-disabled { - cursor: not-allowed; - opacity: 1; +[dir="rtl"] } + +.container-header .mod-menu>li.active::after, +[dir="rtl"] .container-header .mod-menu>li:active::after { + + left: 2px; + right: 0; + background: var(--navbar-brand-color); } -.tbody-icon .icon-delete, -.tbody-icon .fa-delete, -.tbody-icon .icon-times, -.tbody-icon .fa-times { - color: hsl(3, 75%, 37%); - border-color: hsl(3, 75%, 37%); +[dir="rtl"] .container-header .metismenu>li+li { + + margin-left: 0; } -.plg_system_webauthn_login_button svg { - -webkit-margin-end: 2px; - margin-inline-end: 2px; +[dir="rtl"] @media (min-width: 992px) { + + + .container-header .metismenu>li>a::after, + .container-header .metismenu>li>button::before { + position: absolute; + left: 50%; + bottom: 0; + right: 50%; + display: block; + height: 2px; + margin: auto; + content: ""; + background: transparent; + opacity: 0.2; + -webkit-transition: all 0.2s ease, background-color 0.2s ease; + -o-transition: all 0.2s ease, background-color 0.2s ease; + transition: all 0.2s ease, background-color 0.2s ease; + } -.plg_system_webauthn_login_button svg path { - fill: var(--black); +[dir="rtl"] } + +.container-header .metismenu>li>a:active::after, +[dir="rtl"] .container-header .metismenu>li>button:active::before, +[dir="rtl"] .container-header .metismenu>li.active>a::after, +[dir="rtl"] .container-header .metismenu>li.active>button::before { + + left: 0; + right: 0; + background: var(--navbar-color); } -iframe { - border: 0; +[dir="rtl"] .container-header .metismenu>li>button.mm-toggler-link:active::before, +[dir="rtl"] .container-header .metismenu>li.active>button.mm-toggler-link::before { + + left: 0; + right: 0.5rem; } -.modal iframe { - width: 100%; +[dir="rtl"] .grid-child { + + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin-right: auto; + margin-left: auto; } -.grid-child { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - width: 100%; - max-width: 1320px; - margin-left: auto; - margin-right: auto; +[dir="rtl"] .modal .btn { + + margin-right: 0.5rem; } -.mod-custom { - position: relative; -} +[dir="rtl"] } -.container-topbar, -.container-below-top { - color: hsl(0, 0%, 100%); -} -.container-topbar a, -.container-below-top a { - color: currentColor; -} - -.container-banner { - display: block; - margin: 0 0 2rem; -} - -.container-top-a, -.container-top-b, -.container-bottom-a, -.container-bottom-b { - position: relative; -} -.container-top-a > *, -.container-top-b > *, -.container-bottom-a > *, -.container-bottom-b > * { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - margin: 0.5em 0; -} -@media (max-width: 991.98px) { - .container-top-a, - .container-top-b, - .container-bottom-a, - .container-bottom-b { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - } - .container-top-a > *, - .container-top-b > *, - .container-bottom-a > *, - .container-bottom-b > * { - -webkit-box-flex: 0; - -ms-flex: 0 1 auto; - flex: 0 1 auto; - } -} - -.container-component nav { - position: relative; -} - -.container-component, -.container-sidebar-right, -.container-sidebar-left { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; -} -.container-component > *, -.container-sidebar-right > *, -.container-sidebar-left > * { - margin-bottom: 0; -} -.container-component > *:first-child, -.container-sidebar-right > *:first-child, -.container-sidebar-left > *:first-child { - margin-top: 1em; -} -.container-component > * + *, -.container-sidebar-right > * + *, -.container-sidebar-left > * + * { - margin-top: 1em; -} - -.container-sidebar-right, -.container-sidebar-left { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: calc(100% - 1em); - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; -} -@media (min-width: 768px) { - .container-sidebar-right, - .container-sidebar-left { - width: calc(25% - 1em); - -webkit-box-ordinal-group: 1; - -ms-flex-order: 0; - order: 0; - } -} - -.container-sidebar-right .sidebar-right:first-child { - margin-top: 1em; -} -.container-sidebar-right .sidebar-right:last-child { - margin-bottom: 1em; -} - -.container-sidebar-left .sidebar-left:first-child { - margin-top: 1em; -} -.container-sidebar-left .sidebar-left:last-child { - margin-bottom: 1em; -} - -.system-debug { - display: block; -} - -.options-form { - width: 100%; - padding: 1vw 2vw; - margin-bottom: 1rem; - color: #495057; - background-color: hsl(0, 0%, 100%); - border: 1px solid #b2bfcd; -} -.options-form > legend { - float: none; - width: auto; - padding: 0 0.5rem; - font-weight: 700; - color: #495057; - background-color: hsl(0, 0%, 100%); -} - -.modal .btn { - margin-left: 0.5rem; -} -.modal .btn-primary:not([href]), -.modal .btn-success:not([href]) { - color: hsl(0, 0%, 100%); -} -.modal .btn-primary:not([href]):hover, -.modal .btn-success:not([href]):hover { - color: hsl(0, 0%, 100%); -} - -.modal-header { - padding: 0 15px; -} - -.modal-title { - font-weight: var(--font-weight-normal, 400); - line-height: 3rem; -} - -.contentpane { - padding: 15px; -} -.contentpane .main-card { - margin: -10px; - -webkit-box-shadow: none; - box-shadow: none; -} - -.error_site .page-header { - margin-top: 1em; -} - -[class^=container-] .span-col-2, -[class*=" container-"] .span-col-2 { - -webkit-box-flex: 0; - -ms-flex: 0 0 50%; - flex: 0 0 50%; - max-width: calc(50% - 1em); -} -[class^=container-] .span-col-3, -[class*=" container-"] .span-col-3 { - -webkit-box-flex: 0; - -ms-flex: 0 0 33.333%; - flex: 0 0 33.333%; - max-width: calc(33.333% - 1em); -} -[class^=container-] .span-col-4, -[class*=" container-"] .span-col-4 { - -webkit-box-flex: 0; - -ms-flex: 0 0 25%; - flex: 0 0 25%; - max-width: calc(25% - 1em); -} - -@supports (display: grid) { - [class^=span-], - [class*=" span-"] { - grid-column-end: auto; - grid-row-end: auto; - } - @media (min-width: 768px) { - [class^=span-col], - [class*=" span-col"] { - grid-column-end: span 2; - } - } - @media (min-width: 992px) { - .span-col-2 { - grid-column-end: span 2; - } - .span-col-3 { - grid-column-end: span 3; - } - .span-col-4 { - grid-column-end: span 4; - } - .span-row-2 { - grid-row-end: span 2; - } - .span-row-3 { - grid-row-end: span 3; - } - .span-row-4 { - grid-row-end: span 4; - } - } - [class^=container-] [class^=span-], - [class^=container-] [class*=" span-"], - [class*=" container-"] [class^=span-], - [class*=" container-"] [class*=" span-"] { - -webkit-box-flex: 0; - -ms-flex: 0 1 auto; - flex: 0 1 auto; - max-width: none; - } -} .blog-items { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - width: 100%; - padding: 0; - margin-left: -0.5em; - margin-bottom: 1em; - margin-right: -0.5em; -} -@media (min-width: 992px) { - .blog-items.columns-2 > div { - width: 50%; - } - .blog-items.columns-3 > div { - width: 33.33333%; - } - .blog-items.columns-4 > div { - width: 25%; - } + + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + width: 100%; + padding: 0; + margin-right: -0.5rem; + margin-bottom: 1rem; + margin-left: -0.5rem; } -.blog-item { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - padding: 0 0.5em 1em; - overflow: hidden; -} -.boxed .blog-item { - background-color: hsl(0, 0%, 100%); - -webkit-box-shadow: 0 0 2px hsla(216, 13%, 23%, 0.1), 0 2px 5px hsla(216, 13%, 23%, 0.08), 0 5px 15px hsla(216, 13%, 23%, 0.08), inset 0 3px 0 var(--color-primary); - box-shadow: 0 0 2px hsla(216, 13%, 23%, 0.1), 0 2px 5px hsla(216, 13%, 23%, 0.08), 0 5px 15px hsla(216, 13%, 23%, 0.08), inset 0 3px 0 var(--color-primary); -} -.boxed .blog-item .item-content { - padding: 25px; -} -.blog-item .item-image { - margin-top: 3px; - margin-bottom: 15px; - overflow: hidden; -} -.boxed .blog-item .item-image { - margin-bottom: 0; -} -@media (min-width: 992px) { - .image-left .blog-item .item-image { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; - } -} -.image-bottom .blog-item .item-image { - margin-top: -15px; - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; -} -.image-left .blog-item .item-content { - padding-right: 25px; -} -.image-right .blog-item .item-content { - padding-left: 25px; -} -.image-right .blog-item, .image-left .blog-item { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; -} -@media (min-width: 992px) { - .image-right .blog-item, .image-left .blog-item { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - } - .image-right .blog-item .item-image, .image-left .blog-item .item-image { - -webkit-box-flex: 1; - -ms-flex: 1 0 40%; - flex: 1 0 40%; - } - .image-right .blog-item .item-content, .image-left .blog-item .item-content { - -webkit-box-flex: 1; - -ms-flex: 1 0 60%; - flex: 1 0 60%; - } +[dir="rtl"] } + +.readmore { + + text-align: left; } -.article-info dd { - padding: 0; +[dir="rtl"] .image-left .blog-item .item-content { + + padding-left: 25px; } -@supports (display: grid) { - .blog-items { - display: grid; - margin: 0 0 1em; - grid-auto-flow: row; - grid-template-columns: 1fr; - grid-gap: 1em; - } - .blog-items .blog-item { - padding: 0; - } - .blog-items[class^=columns-] > div, .blog-items[class*=" columns-"] > div { - -webkit-box-flex: 0; - -ms-flex: 0 1 auto; - flex: 0 1 auto; - width: auto; - max-width: none; - } - @media (min-width: 992px) { - .blog-items.columns-2 { - grid-template-columns: 1fr 1fr; - } - .blog-items.columns-3 { - grid-template-columns: 1fr 1fr 1fr; - } - .blog-items.columns-4 { - grid-template-columns: 1fr 1fr 1fr 1fr; - } - } -} -.blog-items[class^=masonry-], .blog-items[class*=" masonry-"] { - display: block; - -webkit-column-gap: 1em; - -moz-column-gap: 1em; - column-gap: 1em; -} -.blog-items[class^=masonry-] .blog-item, .blog-items[class*=" masonry-"] .blog-item { - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; - margin-bottom: 1em; - page-break-inside: avoid; - -webkit-column-break-inside: avoid; - -moz-column-break-inside: avoid; - break-inside: avoid; -} -@media (min-width: 992px) { - .blog-items.masonry-2 { - -webkit-column-count: 2; - -moz-column-count: 2; - column-count: 2; - } - .blog-items.masonry-3 { - -webkit-column-count: 3; - -moz-column-count: 3; - column-count: 3; - } - .blog-items.masonry-4 { - -webkit-column-count: 4; - -moz-column-count: 4; - column-count: 4; - } +[dir="rtl"] .image-right .blog-item .item-content { + + padding-right: 25px; } -.image-alternate .blog-item:nth-of-type(2n+1) .item-image { - -webkit-box-ordinal-group: 1; - -ms-flex-order: 0; - order: 0; -} -.image-alternate.image-left .blog-item:nth-of-type(2n+1) .item-image { - margin-left: 0; - margin-right: 25px; - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; -} -.image-alternate.image-top .blog-item:nth-of-type(2n+1) .item-image { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; +[dir="rtl"] .image-left .blog-item .item-image, +[dir="rtl"] .image-right .blog-item .item-image { + + -webkit-box-flex: 1; + -ms-flex: 1 0 40%; + flex: 1 0 40%; + max-width: 35%; + margin-right: 1rem; + } -.breadcrumb { - margin-bottom: 0; - background-color: hsla(0, 0%, 0%, 0.03); +[dir="rtl"] .image-alternate.image-left .blog-item:nth-of-type(2n+1) .item-image { + + margin-right: 0; + margin-left: 25px; + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; } -.no-card .newsflash-horiz li { - padding: 0 1rem 1rem; - border: 1px solid hsl(210, 14%, 89%); - border-top-right-radius: 0; - border-top-left-radius: 0; - border-bottom-right-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; - -webkit-box-shadow: -1px 1px 4px hsla(0, 0%, 0%, 0.1); - box-shadow: -1px 1px 4px hsla(0, 0%, 0%, 0.1); -} -.no-card .newsflash-horiz li figure { - margin: 0 -1rem 1rem; +[dir="rtl"] .mod-list li .mod-menu__sub { + + padding-left: 1rem; } -.mod-list { - -webkit-padding-start: 0; - padding-inline-start: 0; - list-style: none; -} -.mod-list li { - padding: 0.25em 0; -} -.mod-list li a { - text-decoration: none; -} -.mod-list li a:hover { - text-decoration: underline; -} -.container-header .mod-list li a:hover { - text-decoration: none; +[dir="rtl"] .subhead { + + position: sticky; + top: 0; + left: 0; + right: 0; + z-index: 1000; + width: auto; + min-height: 43px; + padding: 0.25rem; + color: #495057; + background: var(--body-bg); + -webkit-box-shadow: -3px -2px 22px #ddd; + box-shadow: -3px -2px 22px #ddd; } -.mod-list li.active > a { - text-decoration: underline; -} -.container-header .mod-list li.active > a { - text-decoration: none; +[dir="rtl"] .subhead .row { + + margin-right: 0; + margin-left: 0; } -.mod-list li .mod-menu__sub { - padding-right: 1em; +[dir="rtl"] .subhead joomla-toolbar-button, +[dir="rtl"] .subhead .btn-group, +[dir="rtl"] .subhead .btn { + + width: 100%; + margin-left: 0; + text-align: left; + } -.element-invisible { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; - -webkit-clip-path: inset(50%); - clip-path: inset(50%); +[dir="rtl"] .subhead .btn-toolbar>.btn-group, +[dir="rtl"] .subhead .btn-toolbar>joomla-toolbar-button { + + margin-left: 0; + } -.hidden { - display: none; - visibility: hidden; -} +[dir="rtl"] } -.table-row { - display: table-row; -} - -joomla-alert { - display: none; -} - -.editor-xtd-buttons .btn { - margin-bottom: 5px; -} - -.subhead { - position: sticky; - top: 0; - left: 0; - right: 0; - z-index: 1000; - width: auto; - min-height: 43px; - padding: 0.25rem; - color: #495057; - background: hsl(0, 0%, 100%); - -webkit-box-shadow: 3px -2px 22px #ddd; - box-shadow: 3px -2px 22px #ddd; -} -.subhead .row { - margin-left: 0; - margin-right: 0; -} -.subhead.noshadow { - -webkit-box-shadow: none; - box-shadow: none; -} -.subhead joomla-toolbar-button, -.subhead .btn-group { - -webkit-margin-start: 0.75rem; - margin-inline-start: 0.75rem; -} -.subhead joomla-toolbar-button:first-child, -.subhead .btn-group:first-child { - -webkit-margin-start: 0; - margin-inline-start: 0; -} -.subhead joomla-toolbar-button .btn > span, -.subhead joomla-toolbar-button .dropdown-item > span { - -webkit-margin-end: 0.5rem; - margin-inline-end: 0.5rem; - width: 1.25em; - text-align: center; -} -.subhead .btn { - --subhead-btn-accent: #495057; - padding: 0 1rem; - margin: 5px 0; - font-size: 1rem; - line-height: 2.45rem; - color: #495057; - background: hsl(0, 0%, 100%); - border-color: hsl(210, 11%, 71%); -} -.subhead .btn > span { - display: inline-block; - color: var(--subhead-btn-accent); -} -.subhead .btn:not([disabled]):hover, .subhead .btn:not([disabled]):active, .subhead .btn:not([disabled]):focus { - color: rgba(255, 255, 255, 0.9); - background-color: var(--subhead-btn-accent); - border-color: var(--subhead-btn-accent); -} -.subhead .btn:not([disabled]):hover > span, .subhead .btn:not([disabled]):active > span, .subhead .btn:not([disabled]):focus > span { - color: rgba(255, 255, 255, 0.9); -} -.subhead .btn.btn-success { - --subhead-btn-accent: var(--success); -} -.subhead .btn.btn-danger { - --subhead-btn-accent: var(--danger); -} -.subhead .btn.btn-primary { - --subhead-btn-accent: #2a69b8; -} -.subhead .btn.btn-secondary { - --subhead-btn-accent: #001b4c; -} -.subhead .btn.btn-info { - --subhead-btn-accent: #132f53; -} -.subhead .btn.btn-action { - --subhead-btn-accent: #132f53; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} -.subhead .btn.btn-action::after { - width: 2.375rem; - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: "\f078"; - border: 0; -} -.subhead .btn[disabled], .subhead .btn.dropdown-toggle[disabled] { - --subhead-btn-accent: #132f53; - background: rgba(223, 227, 231, 0.8); - opacity: 0.5; -} -.subhead .btn[disabled]:hover, .subhead .btn[disabled]:active, .subhead .btn[disabled]:focus, .subhead .btn.dropdown-toggle[disabled]:hover, .subhead .btn.dropdown-toggle[disabled]:active, .subhead .btn.dropdown-toggle[disabled]:focus { - cursor: not-allowed; -} -.subhead .dropdown-toggle.btn { - -webkit-padding-end: 0; - padding-inline-end: 0; -} -.subhead .btn-group:not(:last-child) > .dropdown-toggle-split { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; - -webkit-margin-start: -0.25rem; - margin-inline-start: -0.25rem; - border-radius: 0.25rem 0 0 0.25rem; -} -.subhead .dropdown-menu joomla-toolbar-button, -.subhead .btn-group joomla-toolbar-button { - -webkit-margin-start: 0; - margin-inline-start: 0; -} - -@media (max-width: 767.98px) { - joomla-tab[view=accordion] .col-md-9, - joomla-tab[view=accordion] .col-md-3 { - padding: 0.5rem 1rem !important; - } - #myTab { - margin-top: 1rem; - margin-bottom: 1.5rem; - } - joomla-tab[view=accordion] ul li { - width: 100%; - } - .subhead joomla-toolbar-button, - .subhead .btn-group, - .subhead .btn { - width: 100%; - margin-right: 0; - text-align: right; - } - .subhead .btn-toolbar > .btn-group, - .subhead .btn-toolbar > joomla-toolbar-button { - margin-right: 0; - } - .subhead .btn.btn-action::after { - text-align: center; - -webkit-margin-start: auto; - margin-inline-start: auto; - } - .subhead .dropdown-toggle-split { - width: auto; - } -} .left.item-image { - float: right; -} - -.right.item-image { - float: left; -} - -.tags .list-inline-item { - margin: 0.25rem 0.25rem 0.5rem; -} -.tags a.btn { - font-weight: 700; -} - -.tag { - display: inline-block; - padding: 0.5rem 0 0.5rem 0.5rem; -} - -body { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; -} -body.wrapper-fluid .site-grid { - grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 25%)) [main-end] minmax(0, 1fr) [full-end]; - grid-gap: 0 2em; -} -body.wrapper-fluid .grid-child { - max-width: none; -} -body.wrapper-fluid header > .grid-child, -body.wrapper-fluid footer > .grid-child { - padding-left: 2em; - padding-right: 2em; -} -body:not(.has-sidebar-right) .site-grid .container-component { - grid-column-start: main-start; -} -body:not(.has-sidebar-left) .site-grid .container-component { - grid-column-end: main-end; -} - -.site-grid { - margin-bottom: auto; -} - -@supports (display: grid) { - .site-grid { - display: grid; - grid-template-areas: ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". comp comp comp comp ." ". side-r side-r side-r side-r ." ". side-l side-l side-l side-l ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b ."; - grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 19.875rem)) [main-end] minmax(0, 1fr) [full-end]; - grid-gap: 0 1em; - } - .site-grid > [class^=container-], - .site-grid > [class*=" container-"] { - width: 100%; - max-width: none; - -webkit-column-gap: 1em; - -moz-column-gap: 1em; - column-gap: 1em; - } - .site-grid > .full-width { - grid-column: full-start/full-end; - } - @media (min-width: 992px) { - .site-grid { - grid-template-areas: ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". side-l comp comp side-r ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b ."; - } - } -} -.container-banner { - grid-area: banner; -} - -.container-top-a { - grid-area: top-a; -} - -.container-top-b { - grid-area: top-b; -} - -.container-component { - grid-area: comp; -} - -.container-sidebar-right { - grid-area: side-l; -} - -.container-sidebar-left { - grid-area: side-r; -} - -.container-main-top { - grid-area: main-t; -} - -.container-main-bottom { - grid-area: main-b; -} - -.container-breadcrumbs { - grid-area: bread; -} - -.container-bottom-a { - grid-area: bot-a; -} - -.container-bottom-b { - grid-area: bot-b; -} - -.mod-finder__search.input-group { - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; -} -.mod-finder__search.input-group .awesomplete input { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} -.mod-finder__search.input-group button { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} -.mod-finder__search.input-group button .icon-search { - -webkit-margin-end: 0.2em; - margin-inline-end: 0.2em; -} - -.awesomplete > input { - max-width: 200px; -} -@media (min-width: 992px) { - .awesomplete > input { - max-width: none; - } -} -.awesomplete > ul { - z-index: 1000 !important; -} - -.btn:focus, -.btn.focus, -.btn:active:focus, -.btn.focus:active, -.btn.active:focus, -.btn.active.focus { - text-decoration: none; -} - -.btn.group-move { - cursor: move; -} - -.btn-secondary { - color: hsl(210, 10%, 23%); - background-color: hsl(0, 0%, 100%); - border-color: hsl(210, 14%, 83%); -} -.btn-secondary:hover, .btn-secondary:focus { - color: hsl(210, 10%, 23%); - background-color: hsl(210, 17%, 98%); -} - -.article-info .association .btn-secondary, -.cat-list-association .btn-secondary { - font-weight: 700; - color: hsl(0, 0%, 100%); - background-color: hsl(210, 7%, 46%); - border-color: hsl(210, 14%, 83%); -} -.article-info .association .btn-secondary:hover, .article-info .association .btn-secondary:focus, -.cat-list-association .btn-secondary:hover, -.cat-list-association .btn-secondary:focus { - color: hsl(0, 0%, 100%); - background-color: hsl(210, 10%, 23%); -} -.article-info .association .btn-sm, .article-info .association .btn-group-sm > .btn, -.cat-list-association .btn-sm, -.cat-list-association .btn-group-sm > .btn { - padding: 0 0.25rem; - font-size: 0.8rem; - border-radius: 0.2rem; -} - -@media (max-width: 991.98px) { - .btn { - margin-bottom: 0.25rem; - } - .input-group .btn { - margin-bottom: 0; - } -} -.form-select, .custom-select { - max-width: 100%; - cursor: pointer; - background: url("../images/select-bg-rtl.svg") no-repeat left center/116rem ; - background-color: hsl(210, 16%, 93%); - border: 1px solid hsl(210, 14%, 83%); -} -.form-select:focus, .custom-select:focus { - border-color: #000; - -webkit-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); - box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); -} -.form-select[multiple], [multiple].custom-select { - padding: 0; - background-color: hsl(0, 0%, 100%); -} -.form-select[multiple] option, [multiple].custom-select option { - padding: 0.3rem 1rem; - background-color: hsl(0, 0%, 100%); -} -.form-select[multiple] option:checked, [multiple].custom-select option:checked { - color: hsl(0, 0%, 100%); - background-color: var(--color-primary) !important; -} -.form-select.form-select-success, .form-select-success.custom-select, .form-select.custom-select-success, .custom-select-success.custom-select { - color: hsl(120, 32%, 39%); - background-color: hsl(120, 32%, 39%); -} -.form-select.form-select-success option, .form-select-success.custom-select option, .form-select.custom-select-success option, .custom-select-success.custom-select option { - color: hsl(210, 11%, 15%); - background-color: hsl(0, 0%, 100%); -} -.form-select.form-select-danger, .form-select-danger.custom-select, .form-select.custom-select-danger, .custom-select-danger.custom-select { - color: hsl(3, 75%, 37%); - background-color: hsl(3, 75%, 37%); -} -.form-select.form-select-danger option, .form-select-danger.custom-select option, .form-select.custom-select-danger option, .custom-select-danger.custom-select option { - color: hsl(210, 11%, 15%); - background-color: hsl(0, 0%, 100%); -} -.form-select optgroup, .custom-select optgroup, -.form-select option, -.custom-select option { - color: var(--dark); - background-color: hsl(0, 0%, 100%); -} - -.accordion .card-header { - display: block; - font-size: 1.25rem; - font-weight: var(--font-weight-headings, 700); - line-height: 1.2; -} -.accordion .list-group-item { - color: var(--color-link); -} - -.dropdown-menu { - padding: 0.2rem 0; - margin-top: 0.5rem; - background-color: hsl(0, 0%, 100%); - border-color: hsl(210, 14%, 89%); -} - -.dropdown-menu-end::after { - left: 0.9rem; - right: auto; -} - -.field-media-wrapper { - display: block; - width: 100%; - max-width: calc(50vw - 5rem); -} -.field-media-wrapper .field-media-preview { - width: 100%; - max-width: none; -} -@media (max-width: 991.98px) { - .field-media-wrapper { - min-width: 100%; - } -} - -.list-group-item { - background-color: hsl(0, 0%, 100%); -} - -.list-unstyled .list-unstyled { - padding-right: 20px; -} - -.jviewport-height10 { - height: 10vh; -} -.jviewport-height20 { - height: 20vh; -} -.jviewport-height30 { - height: 30vh; -} -.jviewport-height40 { - height: 40vh; -} -.jviewport-height50 { - height: 50vh; -} -.jviewport-height60 { - height: 60vh; -} -.jviewport-height70 { - height: 70vh; -} -.jviewport-height80 { - height: 80vh; -} -.jviewport-height90 { - height: 90vh; -} -.jviewport-height100 { - height: 100vh; -} - -[class*=jviewport-height] iframe { - height: 100%; -} - -.modal-dialog.jviewport-width10 { - width: 10vw; - max-width: none; -} -.modal-dialog.jviewport-width20 { - width: 20vw; - max-width: none; -} -.modal-dialog.jviewport-width30 { - width: 30vw; - max-width: none; -} -.modal-dialog.jviewport-width40 { - width: 40vw; - max-width: none; -} -.modal-dialog.jviewport-width50 { - width: 50vw; - max-width: none; -} -.modal-dialog.jviewport-width60 { - width: 60vw; - max-width: none; -} -.modal-dialog.jviewport-width70 { - width: 70vw; - max-width: none; -} -.modal-dialog.jviewport-width80 { - width: 80vw; - max-width: none; -} -.modal-dialog.jviewport-width90 { - width: 90vw; - max-width: none; -} -.modal-dialog.jviewport-width100 { - width: 100vw; - max-width: none; -} -.nav.nav-tabs { - padding: 0; - margin: 0; - background-color: hsl(0, 0%, 96%); - border: 1px solid hsl(210, 14%, 89%); - border-bottom: 0; - border-radius: 0.25rem 0.25rem 0 0; - -webkit-box-shadow: 0 1px hsl(0, 0%, 100%) inset, 0 2px 3px -3px hsla(0, 0%, 0%, 0.15), 0 -4px 0 hsla(0, 0%, 0%, 0.05) inset, -1px 1px 4px hsla(0, 0%, 0%, 0.1); - box-shadow: 0 1px hsl(0, 0%, 100%) inset, 0 2px 3px -3px hsla(0, 0%, 0%, 0.15), 0 -4px 0 hsla(0, 0%, 0%, 0.05) inset, -1px 1px 4px hsla(0, 0%, 0%, 0.1); -} -.nav.nav-tabs .nav-item { - margin-bottom: 0; - margin-right: 0; -} -.nav.nav-tabs .nav-item:first-of-type .nav-link.active { - border-radius: 0 0.25rem 0 0; - -webkit-box-shadow: 1px 0 1px -1px hsla(0, 0%, 0%, 0.06), inset 2px 0 1px -1px hsla(0, 0%, 0%, 0.08), inset 0 1px 0 hsla(0, 0%, 0%, 0.02); - box-shadow: 1px 0 1px -1px hsla(0, 0%, 0%, 0.06), inset 2px 0 1px -1px hsla(0, 0%, 0%, 0.08), inset 0 1px 0 hsla(0, 0%, 0%, 0.02); -} -.nav.nav-tabs .nav-item:last-of-type .nav-link { - -webkit-box-shadow: 1px 0 0 hsla(0, 0%, 0%, 0.05), -1px 0 0 hsla(0, 0%, 0%, 0.05); - box-shadow: 1px 0 0 hsla(0, 0%, 0%, 0.05), -1px 0 0 hsla(0, 0%, 0%, 0.05); -} -.nav.nav-tabs .nav-item:last-of-type .nav-link.active { - -webkit-box-shadow: inset -2px 0 1px -1px hsla(0, 0%, 0%, 0.08), inset 2px 0 1px -1px hsla(0, 0%, 0%, 0.08), inset 0 1px 0 hsla(0, 0%, 0%, 0.02); - box-shadow: inset -2px 0 1px -1px hsla(0, 0%, 0%, 0.08), inset 2px 0 1px -1px hsla(0, 0%, 0%, 0.08), inset 0 1px 0 hsla(0, 0%, 0%, 0.02); -} -.nav.nav-tabs .nav-link { - position: relative; - padding: 0.75em 1em; - color: var(--color-primary); - border: 0; - border-top-right-radius: 0; - border-top-left-radius: 0; - -webkit-box-shadow: 1px 0 0 hsla(0, 0%, 0%, 0.05); - box-shadow: 1px 0 0 hsla(0, 0%, 0%, 0.05); -} -.nav.nav-tabs .nav-link.active { - background-color: hsla(0, 0%, 0%, 0.3); - background-image: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 0%, 0)), to(hsla(0, 0%, 0%, 0.05))); - background-image: -o-linear-gradient(top, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.05) 100%); - background-image: linear-gradient(to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.05) 100%); - border-left: 0; - border-right: 0; - border-top-right-radius: 0; - border-top-left-radius: 0; - -webkit-box-shadow: inset -2px 0 1px -1px hsla(0, 0%, 0%, 0.08), inset 2px 0 1px -1px hsla(0, 0%, 0%, 0.08), inset 0 1px 0 hsla(0, 0%, 0%, 0.02); - box-shadow: inset -2px 0 1px -1px hsla(0, 0%, 0%, 0.08), inset 2px 0 1px -1px hsla(0, 0%, 0%, 0.08), inset 0 1px 0 hsla(0, 0%, 0%, 0.02); -} -.nav.nav-tabs .nav-link.active::after { - position: absolute; - left: 0; - bottom: -1px; - right: 0; - height: 5px; - content: ""; - background-color: var(--color-primary); - opacity: 0.8; + float: left; } -.nav-tabs + .tab-content { - padding: 15px; - background: hsl(0, 0%, 100%); - border: 1px solid; - border-color: hsl(210, 14%, 89%); - border-radius: 0 0 0.25rem 0.25rem; - -webkit-box-shadow: -1px 1px 4px hsla(0, 0%, 0%, 0.1); - box-shadow: -1px 1px 4px hsla(0, 0%, 0%, 0.1); -} +[dir="rtl"] .right.item-image { -.pagination { - margin: 1rem; + float: left; + width: 40%; + max-width: 300px; } -.table th { - font-weight: 500; -} -.table thead th { - white-space: nowrap; - border-bottom-width: 1px; -} -.table th, -.table td { - vertical-align: middle; -} -.table th label, -.table td label { - margin-bottom: 0; -} +[dir="rtl"] body.wrapper-fluid header>.grid-child, +[dir="rtl"] body.wrapper-fluid footer>.grid-child { -.chosen-container.chosen-container-single { - max-width: 100%; - font-size: 1rem; -} -.chosen-container.chosen-container-single .chosen-single { - display: inline-block; - height: calc(1.5em + 1.2rem + 2px); - padding: 0.81rem 1rem 0.81rem 4rem; - line-height: 1.5; - color: hsl(210, 11%, 15%); - vertical-align: middle; - background: hsl(210, 16%, 93%) url("../images/select-bg.svg") no-repeat left 1rem center; - background-image: none \9 ; - background-size: 116rem; - border: 1px solid hsl(210, 14%, 83%); - -webkit-box-shadow: none; - box-shadow: none; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border-radius: 0.25rem; -} -.chosen-container.chosen-container-single .chosen-single abbr { - top: 10px; -} -.chosen-container.chosen-container-single .chosen-single:focus { - border-color: #8894aa; - outline: none; -} -.chosen-container.chosen-container-single .chosen-single:disabled { - cursor: not-allowed; - background-color: hsl(210, 16%, 93%); -} -.chosen-container.chosen-container-single .chosen-single div b { - background: none !important; -} -.chosen-container.chosen-container-single .chosen-drop { - background: hsl(0, 0%, 100%); - border: 1px solid hsl(210, 14%, 83%); -} -.chosen-container.chosen-container-single .chosen-results li { - line-height: calc(1rem + .3rem); -} -.chosen-container.chosen-container-single.chosen-container-active .chosen-single { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; + padding-right: 2rem; + padding-left: 2rem; + padding-top: 0; + padding-bottom: 0; + //margin-left: 6rem; + //margin-right: 6rem; } -.chosen-container.chosen-container-multi .chosen-choices { - max-width: 100%; - min-height: calc(1.5em + 1.2rem + 2px); - font-size: 1rem; - line-height: 1.5; - background-image: hsl(0, 0%, 100%); -} -.chosen-container.chosen-container-multi .chosen-choices li.search-choice { - padding: 5px 10px 5px 33px; - color: hsl(0, 0%, 100%); - background: var(--primary); - border: 0; - -webkit-box-shadow: -1px 1px 4px hsla(0, 0%, 0%, 0.1); - box-shadow: -1px 1px 4px hsla(0, 0%, 0%, 0.1); - border-radius: 0.25rem; -} -.chosen-container.chosen-container-multi .chosen-choices li.search-choice .search-choice-close { - top: 0; - left: 0; - width: 20px; - height: 100%; - background: hsla(0, 0%, 0%, 0.2); - background-image: none !important; -} -.chosen-container.chosen-container-multi .chosen-choices li.search-choice .search-choice-close::before { - position: absolute; - top: 6px; - left: 5px; - font-size: 1rem; - color: hsl(0, 0%, 100%); - content: "×"; -} +[dir="rtl"] header .grid-child .navbar-brand { -.chosen-container-active.chosen-with-drop .chosen-single { - -webkit-box-shadow: none; - box-shadow: none; + padding-left: 0; + padding-right: 0; } -.chosen-container-single { - width: auto !important; -} +[dir="rtl"] .dropdown-menu-end::after { -.card .chosen-container.chosen-container-single { - width: 100% !important; -} -.card .chosen-container.chosen-container-single .chosen-single { - width: 100% !important; + left: 0.9rem; + right: auto; } -.gu-mirror { - position: fixed !important; - z-index: 9999 !important; - margin: 0 !important; - background-color: hsl(120, 73%, 75%); - opacity: 0.8; -} -.gu-mirror.table { - display: table; -} -.gu-mirror.table td { - display: table-cell; -} +[dir="rtl"] .list-unstyled .list-unstyled { -.metismenu.menu-horizontal { - -webkit-box-flex: 1; - -ms-flex: 1 0 100%; - flex: 1 0 100%; - padding: 0; - margin: 0; - list-style: none; -} -@media (min-width: 992px) { - .metismenu.menu-horizontal { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 1; - -ms-flex: 1 1 0%; - flex: 1 1 0%; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - } -} -.metismenu.menu-horizontal > li { - position: relative; -} -.metismenu.menu-horizontal .level-1 > ul { - min-width: 12rem; -} -.metismenu.mod-menu { - margin: 0; -} -.metismenu.mod-menu .metismenu-item { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding: 0.5em 1em; - font-size: 1.1rem; - line-height: 1.5; -} -.metismenu.mod-menu .metismenu-item.parent { - position: relative; -} -.metismenu.mod-menu .metismenu-item > ul { - position: absolute; - top: 100%; - z-index: 1001; - display: block; - padding: 0; - list-style: none; - -webkit-box-shadow: 0 0 0.5em hsla(0, 0%, 0%, 0.1); - box-shadow: 0 0 0.5em hsla(0, 0%, 0%, 0.1); -} -.metismenu.mod-menu .metismenu-item > span, -.metismenu.mod-menu .metismenu-item > a, -.metismenu.mod-menu .metismenu-item > button { - overflow: hidden; - text-decoration: none; - -o-text-overflow: ellipsis; - text-overflow: ellipsis; - white-space: nowrap; -} -.metismenu.mod-menu .metismenu-item > a:focus, -.metismenu.mod-menu .metismenu-item > button:focus { - outline: 1px dotted hsl(210, 14%, 83%); - outline-offset: 2px; -} -.metismenu.mod-menu .metismenu-item.active > a, .metismenu.mod-menu .metismenu-item.active > button, -.metismenu.mod-menu .metismenu-item > a:hover, -.metismenu.mod-menu .metismenu-item > button:hover { - text-decoration: underline; -} -.metismenu.mod-menu .metismenu-item::after { - content: none; -} -.metismenu.mod-menu .metismenu-item:not(.level-1) > ul, .metismenu.mod-menu .metismenu-item:not(.level-2) > ul { - -webkit-margin-end: -1em; - margin-inline-end: -1em; -} -.metismenu.mod-menu .metismenu-item.divider:not(.parent) { - width: 1px; - padding: 0; - margin: 0.25em; - overflow: hidden; - border-left: 1px solid hsl(210, 14%, 83%); -} -@media (max-width: 991.98px) { - .metismenu.mod-menu .metismenu-item.divider:not(.parent) { - width: auto; - height: 1px; - border-bottom: 1px solid hsl(210, 14%, 83%); - } -} -.metismenu.mod-menu .mm-collapsing { - height: 0; - overflow: hidden; - -webkit-transition-timing-function: ease; - -o-transition-timing-function: ease; - transition-timing-function: ease; - -webkit-transition-duration: 0.35s; - -o-transition-duration: 0.35s; - transition-duration: 0.35s; - -webkit-transition-property: color, background-color, height, visibility; - -o-transition-property: color, background-color, height, visibility; - transition-property: color, background-color, height, visibility; -} -.metismenu.mod-menu .mm-collapse { - position: absolute; - background-color: hsl(0, 0%, 100%); - -webkit-box-shadow: -1px 1px 4px hsla(0, 0%, 0%, 0.1); - box-shadow: -1px 1px 4px hsla(0, 0%, 0%, 0.1); -} -.metismenu.mod-menu .mm-collapse:not(.mm-show) { - display: none; -} -.metismenu.mod-menu .mm-collapse > li > a { - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; -} -.metismenu.mod-menu .mm-collapse > li.divider:not(.parent) { - width: auto; - height: 1px; - border-bottom: 1px solid hsl(210, 14%, 83%); -} -.metismenu.mod-menu .mm-collapse > li.parent .mm-toggler { - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; -} -.metismenu.mod-menu .mm-collapse > li.parent > ul { - position: relative; - top: 0; - -ms-flex-preferred-size: calc(100% + 1em); - flex-basis: calc(100% + 1em); - margin-top: 0.5em; - margin-bottom: -0.5em; - background-color: hsla(0, 0%, 0%, 0.03); - -webkit-box-shadow: none; - box-shadow: none; -} -.metismenu.mod-menu .mm-toggler { - position: relative; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - height: 100%; - padding: 0; - color: currentColor; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - background: none; - border: none; - -webkit-box-shadow: none; - box-shadow: none; -} -.metismenu.mod-menu .mm-toggler:after { - width: 0; - height: 0; - -webkit-margin-start: 0.5em; - margin-inline-start: 0.5em; - content: ""; - border-top: 0.5em solid currentColor; - border-left: 0.5em solid transparent; - border-right: 0.5em solid transparent; - -webkit-transition: all 0.3s ease-out; - -o-transition: all 0.3s ease-out; - transition: all 0.3s ease-out; -} -.mm-active > .metismenu.mod-menu .mm-toggler:after { - -webkit-transform: rotateX(-180deg); - transform: rotateX(-180deg); + padding-left: 20px; } -.metismenu.mod-menu .mm-toggler[aria-expanded=true]:after { - -webkit-transform: rotateX(-180deg); - transform: rotateX(-180deg); -} -.metismenu.mod-menu .parent > ul { - color: hsl(210, 11%, 15%); -} +[dir="rtl"] .nav.nav-tabs .nav-item { -.sidebar-left .metismenu .mm-collapse, -.sidebar-right .metismenu .mm-collapse { - position: relative; - background-color: hsla(0, 0%, 0%, 0.03); -} -.sidebar-left .metismenu li.parent > ul, -.sidebar-right .metismenu li.parent > ul { - position: relative; - top: 0; - -webkit-box-shadow: none; - box-shadow: none; -} -@media (max-width: 1199.98px) { - .sidebar-left .metismenu li.parent > ul, - .sidebar-right .metismenu li.parent > ul { - width: 100%; - } -} -.sidebar-left .metismenu .metismenu-item > span, -.sidebar-left .metismenu .metismenu-item > a, -.sidebar-right .metismenu .metismenu-item > span, -.sidebar-right .metismenu .metismenu-item > a { - white-space: inherit; -} -.sidebar-left .metismenu .metismenu-item.divider:not(.parent), -.sidebar-right .metismenu .metismenu-item.divider:not(.parent) { - width: auto; - height: 1px; - border-bottom: 1px solid hsl(210, 14%, 83%); + margin-bottom: 0; + margin-left: 0; } -.minicolors-theme-bootstrap .minicolors-input { - width: 120px; -} -.minicolors-theme-bootstrap .rgb { - width: 175px; -} -.minicolors-theme-bootstrap .rgba { - width: 220px; -} +[dir="rtl"] .nav.nav-tabs .nav-link.active { -.editor .toggle-editor { - margin-top: 1rem; -} -.editor .mce-tinymce { - border: 1px solid hsl(210, 14%, 89%); - border-radius: 0.25rem; -} -.editor .mce-btn, -.editor .mce-panel { - background: hsl(210, 17%, 98%); + background-color: hsla(0, 0%, 0%, 0.3); + background-image: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 0%, 0)), to(hsla(0, 0%, 0%, 0.05))); + background-image: -o-linear-gradient(top, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.05) 100%); + background-image: linear-gradient(to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.05) 100%); + border-right: 0; + border-left: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; + -webkit-box-shadow: inset 2px 0 1px -1px hsla(0, 0%, 0%, 0.08), inset -2px 0 1px -1px hsla(0, 0%, 0%, 0.08), inset 0 1px 0 hsla(0, 0%, 0%, 0.02); + box-shadow: inset 2px 0 1px -1px hsla(0, 0%, 0%, 0.08), inset -2px 0 1px -1px hsla(0, 0%, 0%, 0.08), inset 0 1px 0 hsla(0, 0%, 0%, 0.02); } -.tox { - white-space: nowrap !important; -} +[dir="rtl"] .nav.nav-tabs .nav-link.active::after { -:root { - --template-sidebar-bg: var(--template-bg-dark-80); - --template-sidebar-font-color: hsl(0, 0%, 100%); - --template-sidebar-link-color: hsl(0, 0%, 100%); - --template-bg-light: #f0f4fb; - --template-text-light: hsl(0, 0%, 100%); - --template-special-color: #132f53; - --template-link-color: #2a69b8; - --template-link-hover-color: #173a65; - --template-contrast: #2a69b8; - --template-bg-dark: hsl(var(--hue), 40%, 20%); - --template-bg-dark-3: hsl(var(--hue), 40%, 97%); - --template-bg-dark-5: hsl(var(--hue), 40%, 95%); - --template-bg-dark-7: hsl(var(--hue), 40%, 93%); - --template-bg-dark-10: hsl(var(--hue), 40%, 90%); - --template-bg-dark-15: hsl(var(--hue), 40%, 85%); - --template-bg-dark-20: hsl(var(--hue), 40%, 80%); - --template-bg-dark-30: hsl(var(--hue), 40%, 70%); - --template-bg-dark-40: hsl(var(--hue), 40%, 60%); - --template-bg-dark-50: hsl(var(--hue), 40%, 50%); - --template-bg-dark-60: hsl(var(--hue), 40%, 40%); - --template-bg-dark-65: hsl(var(--hue), 40%, 35%); - --template-bg-dark-70: hsl(var(--hue), 40%, 30%); - --template-bg-dark-75: hsl(var(--hue), 40%, 25%); - --template-bg-dark-80: hsl(var(--hue), 40%, 20%); - --template-bg-dark-90: hsl(var(--hue), 40%, 10%); + position: absolute; + left: 0; + bottom: -1px; + right: 0; + height: 5px; + content: ""; + background-color: var(--color-primary); + opacity: 0.8; } -.border-primary { - border-color: var(--primary) !important; -} +[dir="rtl"] .chosen-container.chosen-container-multi .chosen-choices li.search-choice .search-choice-close { -.border-secondary { - border-color: var(--secondary) !important; + top: 0; + left: 0; + width: 20px; + height: 100%; + background: hsla(0, 0%, 0%, 0.2); + background-image: none !important; } -.border-success { - border-color: var(--success) !important; -} +[dir="rtl"] .chosen-container.chosen-container-multi .chosen-choices li.search-choice .search-choice-close::before { -.border-info { - border-color: var(--info) !important; + position: absolute; + top: 6px; + left: 5px; + font-size: 1rem; + color: var(--white); + content: "×"; } -.border-warning { - border-color: var(--warning) !important; -} +[dir="rtl"] .metismenu.mod-menu .metismenu-item.divider:not(.parent) { -.border-danger { - border-color: var(--danger) !important; + width: 1px; + padding: 0; + margin: 0.25rem; + overflow: hidden; + border-right: 1px solid var(--border-color); } -.border-light { - border-color: var(--light) !important; -} +[dir="rtl"] .metismenu.mod-menu .mm-toggler:after { -.border-dark { - border-color: var(--dark) !important; + width: 0; + height: 0; + -webkit-margin-start: 0.5rem; + margin-inline-start: 0.5rem; + content: ""; + border-top: 0.5rem solid currentColor; + border-right: 0.5rem solid transparent; + border-left: 0.5rem solid transparent; + -webkit-transition: all 0.3s ease-out; + -o-transition: all 0.3s ease-out; + transition: all 0.3s ease-out; } -.border-white { - border-color: var(--white) !important; -} +[dir="rtl"] /*! + * Bootstrap Table of Contents v1.0.1 (http://afeld.github.io/bootstrap-toc/) + * Copyright 2015 Aidan Feldman + * Licensed under MIT (https://github.com/afeld/bootstrap-toc/blob/gh-pages/LICENSE.md) + * + * Custom layout/styling modifications by Moko Consulting + * © 2025 Moko Consulting — All Rights Reserved + * Website: https://mokoconsulting.tech + * Email: hello@mokoconsulting.tech + * Phone: +1 (931) 279-6313 + */ -.text-primary { - color: var(--primary) !important; -} -.text-secondary { - color: var(--secondary) !important; +/* --- TOC right-rail container (non-invasive) --- */ +.container-toc-right { + + float: left; + width: 280px; + margin: 0 0 1.25rem 1.25rem; + /* gap from main content */ + position: relative; + z-index: 1; + color: var(--container-toc-color); +} + +[dir="rtl"] } + +/* --- TOC left-rail container (non-invasive) --- */ +.container-toc-left { + + float: left; + width: 280px; + margin: 0 1.25rem 1.25rem 0; + /* space on right side for main content */ + position: relative; + z-index: 1; + color: var(--container-toc-color); } -.text-success { - color: var(--success) !important; -} +[dir="rtl"] .container-top-a { -.text-info { - color: var(--info) !important; + padding-left: var(--border); + padding-right: var(--border); + background-image: var(--container-top-a-bg-image); + background-color: var(--container-top-a-bg-color); + background-size: var(--container-top-a-bg-size); + -webkit-box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.03) inset; + box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.03) inset; + background-repeat: var(--container-top-a-background-repeat); + -webkit-border-radius: var(--container-top-a-border-radius); + -moz-border-radius: var(--container-top-a-border-radius); + border-radius: var(--container-top-a-border-radius); + border: var(--container-top-a-border); } -.text-warning { - color: var(--warning) !important; -} +[dir="rtl"] .container-top-b { + + padding-left: var(--border); + padding-right: var(--border); + background-image: var(--container-top-b-bg-image); + background-color: var(--container-top-b-bg-color); + background-size: var(--container-top-b-bg-size); + -webkit-box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.03) inset; + box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.03) inset; + background-repeat: var(--container-top-b-background-repeat); + -webkit-border-radius: var(--container-top-b-border-radius); + -moz-border-radius: var(--container-top-b-border-radius); + border-radius: var(--container-top-b-border-radius); + border: var(--container-top-b-border); +} + +[dir="rtl"] .container-sidebar-left, +[dir="rtl"] .container-sidebar-right { -.text-danger { - color: var(--danger) !important; -} + padding-left: var(--border); + padding-right: var(--border); + background-image: var(--container-sidebar-bg-image); + background-color: var(--container-sidebar-bg-color); + background-size: var(--container-sidebar-bg-size); + -webkit-box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.03) inset; + box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.03) inset; + background-repeat: var(--container-sidebar-background-repeat); + -webkit-border-radius: var(--container-sidebar-border-radius); + -moz-border-radius: var(--container-sidebar-border-radius); + border-radius: var(--container-sidebar-border-radius); + border: var(--container-sidebar-border); +} + +[dir="rtl"] .container-bottom-a { + + padding-left: var(--border); + padding-right: var(--border); + background-image: var(--container-bottom-a-bg-image); + background-color: var(--container-bottom-a-bg-color); + background-size: var(--container-bottom-a-bg-size); + -webkit-box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.03) inset; + box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.03) inset; + background-repeat: var(--container-bottom-a-background-repeat); + -webkit-border-radius: var(--container-bottom-a-border-radius); + -moz-border-radius: var(--container-bottom-a-border-radius); + border-radius: var(--container-bottom-a-border-radius); + border: var(--container-bottom-a-border); +} + +[dir="rtl"] .container-bottom-b { -.text-light { - color: var(--light) !important; + padding-left: var(--border); + padding-right: var(--border); + background-image: var(--container-bottom-b-bg-image); + background-color: var(--container-bottom-b-bg-color); + background-size: var(--container-bottom-b-bg-size); + -webkit-box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.03) inset; + box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.03) inset; + background-repeat: var(--container-bottom-b-background-repeat); + -webkit-border-radius: var(--container-bottom-b-border-radius); + -moz-border-radius: var(--container-bottom-b-border-radius); + border-radius: var(--container-bottom-b-border-radius); + border: var(--container-bottom-b-border); } -.text-dark { - color: var(--dark) !important; +[dir="rtl"] #mokoThemeFab.pos-br { + left: 1rem; bottom: 1rem; } -.text-black { - color: var(--black) !important; +[dir="rtl"] #mokoThemeFab.pos-bl { + right: 1rem; bottom: 1rem; } - -.text-white { - color: var(--white) !important; + +[dir="rtl"] #mokoThemeFab.pos-tr { + left: 1rem; top: 1rem; +} + +[dir="rtl"] #mokoThemeFab.pos-tl { + right: 1rem; top: 1rem; } -.text-body { - color: var(--body-color) !important; -} +[dir="rtl"] #mokoThemeFab .knob { -.bg-primary { - background-color: var(--primary) !important; + position: absolute; top: 2px; right: 2px; + width: 20px; height: 20px; border-radius: 50%; + background: var(--bs-body-bg, #fff); + box-shadow: 0 1px 3px rgba(0,0,0,.25); + transition: transform .2s ease; } - -.bg-secondary { - background-color: var(--secondary) !important; -} - -.bg-success { - background-color: var(--success) !important; -} - -.bg-info { - background-color: var(--info) !important; -} - -.bg-warning { - background-color: var(--warning) !important; -} - -.bg-danger { - background-color: var(--danger) !important; -} - -.bg-light { - background-color: var(--light) !important; -} - -.bg-dark { - background-color: var(--dark) !important; -} - -.bg-black { - background-color: var(--black) !important; -} - -.bg-white { - background-color: var(--white) !important; -} - -.bg-body { - background-color: var(--body-bg) !important; -} \ No newline at end of file diff --git a/media/templates/site/moko-cassiopeia/css/template.css b/media/templates/site/moko-cassiopeia/css/template.css index f635f2c..530d204 100644 --- a/media/templates/site/moko-cassiopeia/css/template.css +++ b/media/templates/site/moko-cassiopeia/css/template.css @@ -1,11 +1,10 @@ -/* MOKO-COPYRIGHT: © 2025-08-10 Jonathan Miller — | Moko Consulting|https://mokoconsulting.tech */ @charset "UTF-8"; /*! * @package Joomla.Site * @subpackage Templates.moko-cassiopeia * @file /media/templates/sote/moko-cassiopeia/css/template.css * - * © 2025 Moko Consulting — All Rights Reserved + * @copyright 2025 Moko Consulting * @license GNU General Public License version 2 or later; see LICENSE.txt * * Website: https://mokoconsulting.tech @@ -3690,47 +3689,6 @@ textarea.form-control.is-invalid { z-index: 4; } -.btn { - --btn-padding-x: 1rem; - --btn-padding-y: 0.6rem; - --btn-font-family: ; - --btn-font-size: 1rem; - --btn-font-weight: 400; - --btn-line-height: 1.5; - --btn-color: hsl(210, 11%, 15%); - --btn-bg: transparent; - --btn-border-width: 1px; - --btn-border-color: transparent; - --btn-border-radius: 0.25rem; - --btn-active-border-color: transparent; - --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); - --btn-disabled-opacity: 0.65; - --btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5); - display: inline-block; - padding: var(--btn-padding-y) var(--btn-padding-x); - font-family: var(--btn-font-family); - font-size: var(--btn-font-size); - font-weight: var(--btn-font-weight); - line-height: var(--btn-line-height); - color: var(--btn-color); - 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; - border: var(--btn-border-width) solid var(--btn-border-color); - border-radius: var(--btn-border-radius); - background-color: var(--btn-bg); - -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-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, -webkit-box-shadow 0.15s ease-in-out; - -o-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; - 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, -webkit-box-shadow 0.15s ease-in-out; -} - @media (prefers-reduced-motion: reduce) { .btn { -webkit-transition: none; @@ -3796,278 +3754,6 @@ fieldset:disabled .btn { opacity: var(--btn-disabled-opacity); } -.btn-primary { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(240, 98%, 17%); - --btn-border-color: hsl(240, 98%, 17%); - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #010149; - --btn-active-border-color: #010145; - --btn-focus-shadow-rgb: 39, 39, 111; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #010145; - --btn-active-border-color: #010141; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(240, 98%, 17%); - --btn-disabled-border-color: hsl(240, 98%, 17%); -} - -.btn-secondary { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(210, 7%, 46%); - --btn-border-color: hsl(210, 7%, 46%); - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #5d636b; - --btn-active-border-color: #575e65; - --btn-focus-shadow-rgb: 131, 138, 145; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #575e65; - --btn-active-border-color: #52585f; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(210, 7%, 46%); - --btn-disabled-border-color: hsl(210, 7%, 46%); -} - -.btn-success { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(120, 32%, 39%); - --btn-border-color: hsl(120, 32%, 39%); - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #3a6f3a; - --btn-active-border-color: #366936; - --btn-focus-shadow-rgb: 96, 150, 96; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #366936; - --btn-active-border-color: #336233; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(120, 32%, 39%); - --btn-disabled-border-color: hsl(120, 32%, 39%); -} - -.btn-info { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(207, 49%, 37%); - --btn-border-color: hsl(207, 49%, 37%); - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #295478; - --btn-active-border-color: #264f71; - --btn-focus-shadow-rgb: 79, 122, 158; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #264f71; - --btn-active-border-color: #244a6a; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(207, 49%, 37%); - --btn-disabled-border-color: hsl(207, 49%, 37%); -} - -.btn-warning { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(34, 100%, 34%); - --btn-border-color: hsl(34, 100%, 34%); - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #935300; - --btn-active-border-color: #8a4e00; - --btn-focus-shadow-rgb: 185, 122, 38; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #8a4e00; - --btn-active-border-color: #824a00; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(34, 100%, 34%); - --btn-disabled-border-color: hsl(34, 100%, 34%); -} - -.btn-danger { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(3, 75%, 37%); - --btn-border-color: hsl(3, 75%, 37%); - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #8c1a14; - --btn-active-border-color: #841913; - --btn-focus-shadow-rgb: 179, 65, 59; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #841913; - --btn-active-border-color: #7c1712; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(3, 75%, 37%); - --btn-disabled-border-color: hsl(3, 75%, 37%); -} - -.btn-light { - --btn-color: hsl(0, 0%, 0%); - --btn-bg: hsl(210, 17%, 98%); - --btn-border-color: hsl(210, 17%, 98%); - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: #d4d5d5; - --btn-active-border-color: #c7c8c9; - --btn-focus-shadow-rgb: 212, 213, 213; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: #c7c8c9; - --btn-active-border-color: #bbbcbc; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 0%); - --btn-disabled-bg: hsl(210, 17%, 98%); - --btn-disabled-border-color: hsl(210, 17%, 98%); -} - -.btn-dark { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(210, 10%, 23%); - --btn-border-color: hsl(210, 10%, 23%); - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #53585e; - --btn-active-border-color: #494f54; - --btn-focus-shadow-rgb: 83, 88, 94; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #5d6267; - --btn-active-border-color: #494f54; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(210, 10%, 23%); - --btn-disabled-border-color: hsl(210, 10%, 23%); -} - -.btn-outline-primary { - --btn-color: hsl(240, 98%, 17%); - --btn-border-color: hsl(240, 98%, 17%); - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(240, 98%, 17%); - --btn-active-border-color: hsl(240, 98%, 17%); - --btn-focus-shadow-rgb: 1, 1, 86; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(240, 98%, 17%); - --btn-active-border-color: hsl(240, 98%, 17%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(240, 98%, 17%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(240, 98%, 17%); - --gradient: none; -} - -.btn-outline-secondary { - --btn-color: hsl(210, 7%, 46%); - --btn-border-color: hsl(210, 7%, 46%); - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(210, 7%, 46%); - --btn-active-border-color: hsl(210, 7%, 46%); - --btn-focus-shadow-rgb: 109, 117, 126; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(210, 7%, 46%); - --btn-active-border-color: hsl(210, 7%, 46%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(210, 7%, 46%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(210, 7%, 46%); - --gradient: none; -} - -.btn-outline-success { - --btn-color: hsl(120, 32%, 39%); - --btn-border-color: hsl(120, 32%, 39%); - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(120, 32%, 39%); - --btn-active-border-color: hsl(120, 32%, 39%); - --btn-focus-shadow-rgb: 68, 131, 68; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(120, 32%, 39%); - --btn-active-border-color: hsl(120, 32%, 39%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(120, 32%, 39%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(120, 32%, 39%); - --gradient: none; -} - -.btn-outline-info { - --btn-color: hsl(207, 49%, 37%); - --btn-border-color: hsl(207, 49%, 37%); - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(207, 49%, 37%); - --btn-active-border-color: hsl(207, 49%, 37%); - --btn-focus-shadow-rgb: 48, 99, 141; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(207, 49%, 37%); - --btn-active-border-color: hsl(207, 49%, 37%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(207, 49%, 37%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(207, 49%, 37%); - --gradient: none; -} - -.btn-outline-warning { - --btn-color: hsl(34, 100%, 34%); - --btn-border-color: hsl(34, 100%, 34%); - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(34, 100%, 34%); - --btn-active-border-color: hsl(34, 100%, 34%); - --btn-focus-shadow-rgb: 173, 98, 0; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(34, 100%, 34%); - --btn-active-border-color: hsl(34, 100%, 34%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(34, 100%, 34%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(34, 100%, 34%); - --gradient: none; -} - -.btn-outline-danger { - --btn-color: hsl(3, 75%, 37%); - --btn-border-color: hsl(3, 75%, 37%); - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(3, 75%, 37%); - --btn-active-border-color: hsl(3, 75%, 37%); - --btn-focus-shadow-rgb: 165, 31, 24; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(3, 75%, 37%); - --btn-active-border-color: hsl(3, 75%, 37%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(3, 75%, 37%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(3, 75%, 37%); - --gradient: none; -} - -.btn-outline-light { - --btn-color: hsl(210, 17%, 98%); - --btn-border-color: hsl(210, 17%, 98%); - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(210, 17%, 98%); - --btn-active-border-color: hsl(210, 17%, 98%); - --btn-focus-shadow-rgb: 249, 250, 251; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(210, 17%, 98%); - --btn-active-border-color: hsl(210, 17%, 98%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(210, 17%, 98%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(210, 17%, 98%); - --gradient: none; -} - -.btn-outline-dark { - --btn-color: hsl(210, 10%, 23%); - --btn-border-color: hsl(210, 10%, 23%); - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(210, 10%, 23%); - --btn-active-border-color: hsl(210, 10%, 23%); - --btn-focus-shadow-rgb: 53, 59, 65; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(210, 10%, 23%); - --btn-active-border-color: hsl(210, 10%, 23%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(210, 10%, 23%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(210, 10%, 23%); - --gradient: none; -} - .btn-link { --btn-font-weight: 400; --btn-color: var(--link-color); @@ -8792,7 +8478,7 @@ fieldset:disabled .btn { } .sticky-top { - position: sticky; + position: sticky !important; top: 0; z-index: 1020; } @@ -14257,7 +13943,7 @@ th dd { .com-contact__thumbnail { text-align: left; margin: 2em; - padding:1rem; + padding: 1rem; } [data-bs-theme='dark'] .com-contact__thumbnail { @@ -14873,7 +14559,7 @@ li.current a { .container-header .mod-menu>li>a, .container-header .mod-menu>li>span { position: relative; - color: currentColor; + color: var(--nav-text-color); text-decoration: none; } @@ -15179,6 +14865,12 @@ iframe { margin-bottom: 0; } +.container-component, +.sidebar-left, +.sidebar-right { + height: 100%; +} + .container-component>*:first-child, .container-sidebar-left>*:first-child, .container-sidebar-right>*:first-child { @@ -15930,6 +15622,10 @@ body.wrapper-fluid .site-grid { background-repeat: repeat-x; } +[data-bs-theme="dark"] body .site-grid { + background-image: none; +} + body.wrapper-fluid .grid-child { //max-width: none; } @@ -17308,3 +17004,207 @@ form .form-select { border: var(--container-bottom-b-border); } +/* Moko Theme FAB */ +#mokoThemeFab { + position: fixed; + z-index: 1200; + display: flex; + align-items: center; + gap: .5rem; + padding: .5rem .75rem; + border-radius: 999px; + border: none; + background: var(--muted-color); + box-shadow: var(--box-shadow); + font: inherit; + color: var(--white); +} + +#mokoThemeFab.pos-br { + right: 2.5rem; + bottom: 1rem; +} + +#mokoThemeFab.pos-bl { + left: 2.5rem; + bottom: 1rem; +} + +#mokoThemeFab.pos-tr { + right: 2.5rem; + top: 1rem; +} + +#mokoThemeFab.pos-tl { + left: 2.5rem; + top: 1rem; +} + +#mokoThemeFab .switch { + display: inline-flex; + align-items: center; + position: relative; + width: 44px; + height: 24px; + background: var(--secondary-color); + transition: background .2s, border-color .2s; + border-radius: var(--border-radius-xxl); +} + +#mokoThemeFab .knob { + position: absolute; + top: 2px; + left: 2px; + width: 20px; + height: 20px; + border-radius: var(--border-radius-xxl); + background: var(--bs-body-bg, #fff); + box-shadow: var(--box-shadow); + transition: transform .2s ease; +} + +#mokoThemeFab [role="switch"][aria-checked="true"] .knob { + transform: translateX(20px); +} + +#mokoThemeFab [role="switch"][aria-checked="true"] .switch { + background: rgba(var(--secondary-color), .15); +} + +button#mokoThemeSwitch { + border: unset; + background-color: unset; +} + +#mokoThemeFab .label { + user-select: none; + font-size: .875rem; +} + +#mokoThemeFab.debug-outline { + outline: 2px dashed var(--pink); + outline-offset: 2px; +} + +body.site.error-page { + margin: 0; + padding: 0; +} + +.error-wrap { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + padding: 2rem; +} + +.error-card { + max-width: 820px; + width: 100%; + border: 1px solid color-mix(in srgb, currentColor 15%, transparent); + border-radius: 14px; + padding: 2rem; + background: var(--template-bg-light, #fff); + + + .error-brand { + display: flex; + align-items: center; + gap: 1rem; + margin-bottom: 1rem; + } + + .error-brand .brand-logo { + background-color: invert(var(--body-bg)); + padding: var(--border-radius-sxl); + border-radius: var(--border-radius-2xl); + } + + .error-brand .logo { + max-height: 48px; + width: auto; + display: block; + } + + .error-title { + margin: 0.5rem 0 0; + font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem); + font-weight: 700; + } + + .error-code { + opacity: .75; + font-weight: 600; + } + + .error-actions { + display: flex; + flex-wrap: wrap; + gap: .75rem; + margin-top: 1.25rem; + } + + .moko-offline-wrap { + min-height: 100vh; + display: grid; + grid-template-rows: auto 1fr auto; + } + + .moko-offline-main { + display: grid; + place-items: center; + padding: 2rem 1rem; + } + + .moko-card { + max-width: 720px; + width: 100%; + } + + .moko-brand { + display: flex; + align-items: center; + gap: .75rem; + text-decoration: none; + } + + .moko-brand .brand-tagline { + display: block; + opacity: .75; + font-size: .875rem; + line-height: 1.2; + } + + .theme-switcher .dropdown-item.active { + font-weight: 600; + } + + .skip-link { + position: absolute; + left: -9999px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; + } + + .skip-l ink:focus { + position: static; + width: auto; + height: auto; + padding: .5rem 1rem; + } + + .btn { + display: inline-flex; + align-items: center; + gap: .5rem; + border: 1px solid color-mix(in srgb, currentColor 20%, transparent); + border-radius: 8px; + padding: .5rem .9rem; + text-decoration: none; + } + + /* SOCIAL MEDIA DEMOS */ + @import url("global/social-media-demos.css"); diff --git a/media/templates/site/moko-cassiopeia/images/robots.txt b/media/templates/site/moko-cassiopeia/css/user.css similarity index 100% rename from media/templates/site/moko-cassiopeia/images/robots.txt rename to media/templates/site/moko-cassiopeia/css/user.css diff --git a/media/templates/site/moko-cassiopeia/css/vmbasic.css b/media/templates/site/moko-cassiopeia/css/vendor/vmbasic.css similarity index 100% rename from media/templates/site/moko-cassiopeia/css/vmbasic.css rename to media/templates/site/moko-cassiopeia/css/vendor/vmbasic.css diff --git a/media/templates/site/moko-cassiopeia/images/bg.svg b/media/templates/site/moko-cassiopeia/images/bg.svg deleted file mode 100644 index 6e73f8c..0000000 --- a/media/templates/site/moko-cassiopeia/images/bg.svg +++ /dev/null @@ -1,107 +0,0 @@ - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - diff --git a/media/templates/site/moko-cassiopeia/images/logo.svg b/media/templates/site/moko-cassiopeia/images/logo.svg deleted file mode 100644 index c4b4647..0000000 --- a/media/templates/site/moko-cassiopeia/images/logo.svg +++ /dev/null @@ -1,93 +0,0 @@ - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - diff --git a/media/templates/site/moko-cassiopeia/images/select-bg-active-rtl.svg b/media/templates/site/moko-cassiopeia/images/select-bg-active-rtl.svg deleted file mode 100644 index eae47aa..0000000 --- a/media/templates/site/moko-cassiopeia/images/select-bg-active-rtl.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/media/templates/site/moko-cassiopeia/images/select-bg-active.svg b/media/templates/site/moko-cassiopeia/images/select-bg-active.svg deleted file mode 100644 index 19cd786..0000000 --- a/media/templates/site/moko-cassiopeia/images/select-bg-active.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/media/templates/site/moko-cassiopeia/images/select-bg-rtl.svg b/media/templates/site/moko-cassiopeia/images/select-bg-rtl.svg deleted file mode 100644 index a1ae9a3..0000000 --- a/media/templates/site/moko-cassiopeia/images/select-bg-rtl.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/media/templates/site/moko-cassiopeia/images/select-bg.svg b/media/templates/site/moko-cassiopeia/images/select-bg.svg deleted file mode 100644 index e2fefcc..0000000 --- a/media/templates/site/moko-cassiopeia/images/select-bg.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/media/templates/site/moko-cassiopeia/images/teaser_bg_sm.png b/media/templates/site/moko-cassiopeia/images/teaser_bg_sm.png deleted file mode 100644 index 8c1d0da..0000000 Binary files a/media/templates/site/moko-cassiopeia/images/teaser_bg_sm.png and /dev/null differ diff --git a/media/templates/site/moko-cassiopeia/images/template_preview.png b/media/templates/site/moko-cassiopeia/images/template_preview.png deleted file mode 100644 index a83ca41..0000000 Binary files a/media/templates/site/moko-cassiopeia/images/template_preview.png and /dev/null differ diff --git a/media/templates/site/moko-cassiopeia/images/template_thumbnail.png b/media/templates/site/moko-cassiopeia/images/template_thumbnail.png deleted file mode 100644 index e237919..0000000 Binary files a/media/templates/site/moko-cassiopeia/images/template_thumbnail.png and /dev/null differ diff --git a/media/templates/site/moko-cassiopeia/js/darkmode-toggle.js b/media/templates/site/moko-cassiopeia/js/darkmode-toggle.js new file mode 100644 index 0000000..cd2485d --- /dev/null +++ b/media/templates/site/moko-cassiopeia/js/darkmode-toggle.js @@ -0,0 +1,147 @@ +/** + * darkmode-toggle.js — Floating theme switch (class-based, CSP-proof) + * @version 2.2.1 + * Storage key: "theme" -> "light" | "dark" + * Corner from (default br) + */ +(function () { + 'use strict'; + + var STORAGE_KEY = 'theme'; + var docEl = document.documentElement; + var mql = window.matchMedia('(prefers-color-scheme: dark)'); + + function getStored() { try { return localStorage.getItem(STORAGE_KEY); } catch (e) { return null; } } + function setStored(v) { try { localStorage.setItem(STORAGE_KEY, v); } catch (e) {} } + function clearStored() { try { localStorage.removeItem(STORAGE_KEY); } catch (e) {} } + function systemTheme() { return mql.matches ? 'dark' : 'light'; } + + function applyTheme(theme) { + docEl.setAttribute('data-bs-theme', theme); + docEl.setAttribute('data-aria-theme', theme); + var meta = document.querySelector('meta[name="theme-color"]'); + if (meta) { + meta.setAttribute('content', theme === 'dark' ? '#0f1115' : '#ffffff'); + } + var sw = document.getElementById('mokoThemeSwitch'); + if (sw) { + sw.setAttribute('aria-checked', theme === 'dark' ? 'true' : 'false'); + } + } + + function initTheme() { + var stored = getStored(); + applyTheme(stored ? stored : systemTheme()); + } + + function posClassFromBody() { + var pos = (document.body.getAttribute('data-theme-fab-pos') || 'br').toLowerCase(); + if (!/^(br|bl|tr|tl)$/.test(pos)) pos = 'br'; + return 'pos-' + pos; + } + + function buildToggle() { + if (document.getElementById('mokoThemeFab')) return; + + var wrap = document.createElement('div'); + wrap.id = 'mokoThemeFab'; + wrap.className = posClassFromBody(); + + // Light label + var lblL = document.createElement('span'); + lblL.className = 'label'; + lblL.textContent = 'Light'; + + // Switch + var switchWrap = document.createElement('button'); + switchWrap.id = 'mokoThemeSwitch'; + switchWrap.type = 'button'; + switchWrap.setAttribute('role', 'switch'); + switchWrap.setAttribute('aria-label', 'Toggle dark mode'); + switchWrap.setAttribute('aria-checked', 'false'); // updated after init + + var track = document.createElement('span'); + track.className = 'switch'; + var knob = document.createElement('span'); + knob.className = 'knob'; + track.appendChild(knob); + switchWrap.appendChild(track); + + // Dark label + var lblD = document.createElement('span'); + lblD.className = 'label'; + lblD.textContent = 'Dark'; + + // Auto button + var auto = document.createElement('button'); + auto.id = 'mokoThemeAuto'; + auto.type = 'button'; + auto.className = 'btn btn-sm btn-link text-decoration-none px-2'; + auto.setAttribute('aria-label', 'Follow system theme'); + auto.textContent = 'Auto'; + + // Behavior + switchWrap.addEventListener('click', function () { + var current = (docEl.getAttribute('data-bs-theme') || 'light').toLowerCase(); + var next = current === 'dark' ? 'light' : 'dark'; + applyTheme(next); + setStored(next); + }); + + auto.addEventListener('click', function () { + clearStored(); + applyTheme(systemTheme()); + }); + + // Respond to OS changes only when not user-forced + var onMql = function () { + if (!getStored()) applyTheme(systemTheme()); + }; + if (typeof mql.addEventListener === 'function') mql.addEventListener('change', onMql); + else if (typeof mql.addListener === 'function') mql.addListener(onMql); + + // Initial state + var initial = getStored() || systemTheme(); + switchWrap.setAttribute('aria-checked', initial === 'dark' ? 'true' : 'false'); + + // Mount + wrap.appendChild(lblL); + wrap.appendChild(switchWrap); + wrap.appendChild(lblD); + wrap.appendChild(auto); + document.body.appendChild(wrap); + + // Debug helper + window.mokoThemeFabStatus = function () { + var el = document.getElementById('mokoThemeFab'); + if (!el) return { mounted: false }; + var r = el.getBoundingClientRect(); + return { + mounted: true, + rect: { top: r.top, left: r.left, width: r.width, height: r.height }, + zIndex: window.getComputedStyle(el).zIndex, + posClass: el.className + }; + }; + + // Outline if invisible + setTimeout(function () { + var r = wrap.getBoundingClientRect(); + if (r.width < 10 || r.height < 10) { + wrap.classList.add('debug-outline'); + console.warn('[moko] Theme FAB mounted but appears too small — check CSS collisions.'); + } + }, 50); + } + + function init() { + initTheme(); + buildToggle(); + } + + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', init); + } else { + init(); + } +})(); diff --git a/media/templates/site/moko-cassiopeia/js/gtm.js b/media/templates/site/moko-cassiopeia/js/gtm.js new file mode 100644 index 0000000..e69de29 diff --git a/media/templates/site/moko-cassiopeia/js/mod_gabble/gabble_com.js b/media/templates/site/moko-cassiopeia/js/mod_gabble/gabble_com.js index 140f8a0..095a744 100644 --- a/media/templates/site/moko-cassiopeia/js/mod_gabble/gabble_com.js +++ b/media/templates/site/moko-cassiopeia/js/mod_gabble/gabble_com.js @@ -1,2 +1,11 @@ -/* MOKO-COPYRIGHT: © 2025-08-10 Jonathan Miller || Moko Consulting — https://mokoconsulting.tech */ - +/** + * @package Joomla.Site + * @subpackage Templates.Moko-Cassiopeia + * @file /media/templates/site/moko-cassiopeia/js/mod_gabble.js + * @copyright (C) 2025 Jonathan Miler || Moko Consulting + * @website: https://mokoconsulting.tech + * @email: hello@mokoconsulting.tech + * @phone: +1 (931) 279-6313 + * @license GNU General Public License version 2 or later; see LICENSE.txt + * @note This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. + */ diff --git a/media/templates/site/moko-cassiopeia/js/mod_menu/menu-metismenu-es5.js b/media/templates/site/moko-cassiopeia/js/mod_menu/menu-metismenu-es5.js index a1934cd..9ce15e8 100644 --- a/media/templates/site/moko-cassiopeia/js/mod_menu/menu-metismenu-es5.js +++ b/media/templates/site/moko-cassiopeia/js/mod_menu/menu-metismenu-es5.js @@ -1,31 +1,42 @@ -/* MOKO-COPYRIGHT: © 2025-08-10 Jonathan Miller || Moko Consulting — https://mokoconsulting.tech */ +/** + * @package Joomla.Site + * @subpackage Templates.Moko-Cassiopeia + * @file /media/templates/site/moko-cassiopeia/js/mod_menu/menu-metismenu-es5.js + * @copyright (C) 2025 Jonathan Miler || Moko Consulting + * @website: https://mokoconsulting.tech + * @email: hello@mokoconsulting.tech + * @phone: +1 (931) 279-6313 + * @license GNU General Public License version 2 or later; see LICENSE.txt + * @note This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. + */ + (function () { - 'use strict'; + 'use strict'; - /** - * @package Joomla.Site - * @subpackage Templates.Moko-Cassiopeia - * @copyright (C) 2020 Open Source Matters, Inc. - * @license GNU General Public License version 2 or later; see LICENSE.txt - * @since 4.0.0 - */ + /** + * @package Joomla.Site + * @subpackage Templates.Moko-Cassiopeia + * @copyright (C) 2020 Open Source Matters, Inc. + * @license GNU General Public License version 2 or later; see LICENSE.txt + * @since 4.0.0 + */ - document.addEventListener('DOMContentLoaded', function () { - var allMenus = document.querySelectorAll('ul.mod-menu_dropdown-metismenu'); - allMenus.forEach(function (menu) { - // eslint-disable-next-line no-new, no-undef - var mm = new MetisMenu(menu, { - triggerElement: 'button.mm-toggler' - }).on('shown.metisMenu', function (event) { - window.addEventListener('click', function mmClick(e) { - if (!event.target.contains(e.target)) { - mm.hide(event.detail.shownElement); - window.removeEventListener('click', mmClick); - } - }); - }); - }); - }); + document.addEventListener('DOMContentLoaded', function () { + var allMenus = document.querySelectorAll('ul.mod-menu_dropdown-metismenu'); + allMenus.forEach(function (menu) { + // eslint-disable-next-line no-new, no-undef + var mm = new MetisMenu(menu, { + triggerElement: 'button.mm-toggler' + }).on('shown.metisMenu', function (event) { + window.addEventListener('click', function mmClick(e) { + if (!event.target.contains(e.target)) { + mm.hide(event.detail.shownElement); + window.removeEventListener('click', mmClick); + } + }); + }); + }); + }); })(); diff --git a/media/templates/site/moko-cassiopeia/js/mod_menu/menu-metismenu.js b/media/templates/site/moko-cassiopeia/js/mod_menu/menu-metismenu.js index 34e3f8d..d8e5627 100644 --- a/media/templates/site/moko-cassiopeia/js/mod_menu/menu-metismenu.js +++ b/media/templates/site/moko-cassiopeia/js/mod_menu/menu-metismenu.js @@ -1,27 +1,29 @@ -/* MOKO-COPYRIGHT: © 2025-08-10 Jonathan Miller || Moko Consulting — https://mokoconsulting.tech */ /** * @package Joomla.Site * @subpackage Templates.Moko-Cassiopeia - * @copyright (C) 2020 Open Source Matters, Inc. - * @copyright (C) 2025 Jonathan Miler || Moko Consulting - * @license GNU General Public License version 2 or later; see LICENSE.txt - * @since 4.0.0 + * @file /media/templates/site/moko-cassiopeia/js/mod_menu/menu-metismenu.js + * @copyright (C) 2025 Jonathan Miler || Moko Consulting + * @website: https://mokoconsulting.tech + * @email: hello@mokoconsulting.tech + * @phone: +1 (931) 279-6313 + * @license GNU General Public License version 2 or later; see LICENSE.txt + * @note This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. */ document.addEventListener('DOMContentLoaded', () => { - const allMenus = document.querySelectorAll('ul.mod-menu_dropdown-metismenu'); - allMenus.forEach(menu => { - // eslint-disable-next-line no-new, no-undef - const mm = new MetisMenu(menu, { - triggerElement: 'button.mm-toggler' - }).on('shown.metisMenu', event => { - window.addEventListener('click', function mmClick(e) { - if (!event.target.contains(e.target)) { - mm.hide(event.detail.shownElement); - window.removeEventListener('click', mmClick); - } - }); - }); - }); + const allMenus = document.querySelectorAll('ul.mod-menu_dropdown-metismenu'); + allMenus.forEach(menu => { + // eslint-disable-next-line no-new, no-undef + const mm = new MetisMenu(menu, { + triggerElement: 'button.mm-toggler' + }).on('shown.metisMenu', event => { + window.addEventListener('click', function mmClick(e) { + if (!event.target.contains(e.target)) { + mm.hide(event.detail.shownElement); + window.removeEventListener('click', mmClick); + } + }); + }); + }); }); diff --git a/media/templates/site/moko-cassiopeia/js/template.js b/media/templates/site/moko-cassiopeia/js/template.js index 9e5ce86..a81ab39 100644 --- a/media/templates/site/moko-cassiopeia/js/template.js +++ b/media/templates/site/moko-cassiopeia/js/template.js @@ -1,76 +1,120 @@ -/* MOKO-COPYRIGHT: © 2025-08-10 Jonathan Miller || Moko Consulting — https://mokoconsulting.tech */ /** + * template.js — Custom JavaScript for the Moko Cassiopeia Joomla template + * * @package Joomla.Site * @subpackage Templates.Moko-Cassiopeia - * @copyright (C) 2017 Open Source Matters, Inc. - * @license GNU General Public License version 2 or later; see LICENSE.txt - * @since 4.0.0 + * @file /media/templates/site/moko-cassiopeia/js/template.js + * @version 2.0 + * + * @copyright (C) 2025 Moko Consulting + * @author Jonathan Miller + * @website https://mokoconsulting.tech + * @email hello@mokoconsulting.tech + * @phone +1 (931) 279-6313 + * + * SPDX-License-Identifier: GPL-3.0-or-later + * + * This file is part of a Moko Consulting project. + * + * This program is free software: you can redistribute it and/or modify it + * under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or (at + * your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . */ -Joomla = window.Joomla || {}; +(function (win, doc) { + "use strict"; -(function(Joomla, document) { - 'use strict'; + /** + * Utility: smooth scroll to top + */ + function backToTop() { + win.scrollTo({ top: 0, behavior: "smooth" }); + } - function initTemplate(event) { - var target = event && event.target ? event.target : document; + /** + * Utility: toggle body class on scroll for sticky header styling + */ + function handleScroll() { + if (win.scrollY > 50) { + doc.body.classList.add("scrolled"); + } else { + doc.body.classList.remove("scrolled"); + } + } - /** - * Prevent clicks on buttons within a disabled fieldset - */ - var fieldsets = target.querySelectorAll('fieldset.btn-group'); - for (var i = 0; i < fieldsets.length; i++) { - var self = fieldsets[i]; - if (self.getAttribute('disabled') === true) { - self.style.pointerEvents = 'none'; - var btns = self.querySelectorAll('.btn'); - for (var ib = 0; ib < btns.length; ib++) { - btns[ib].classList.add('disabled'); - } - } - } - } + /** + * Initialize Bootstrap TOC if #toc element exists. + * Requires bootstrap-toc.min.js to be loaded. + */ + function initTOC() { + if (typeof win.Toc === "function" && doc.querySelector("#toc")) { + win.Toc.init({ + $nav: $("#toc"), + $scope: $("main") + }); + } + } - document.addEventListener('DOMContentLoaded', function (event) { - initTemplate(event); + /** + * Initialize offcanvas drawer buttons for left/right drawers. + * Uses Bootstrap's offcanvas component. + */ + function initDrawers() { + var leftBtn = doc.querySelector(".drawer-toggle-left"); + var rightBtn = doc.querySelector(".drawer-toggle-right"); + if (leftBtn) { + leftBtn.addEventListener("click", function () { + var target = doc.querySelector(leftBtn.getAttribute("data-bs-target")); + if (target) new bootstrap.Offcanvas(target).show(); + }); + } + if (rightBtn) { + rightBtn.addEventListener("click", function () { + var target = doc.querySelector(rightBtn.getAttribute("data-bs-target")); + if (target) new bootstrap.Offcanvas(target).show(); + }); + } + } - /** - * Back to top - */ - var backToTop = document.getElementById('back-top'); + /** + * Initialize back-to-top link if present + */ + function initBackTop() { + var backTop = doc.getElementById("back-top"); + if (backTop) { + backTop.addEventListener("click", function (e) { + e.preventDefault(); + backToTop(); + }); + } + } - if (backToTop) { + /** + * Run all template JS initializations + */ + function init() { + // Sticky header behavior + handleScroll(); + win.addEventListener("scroll", handleScroll); - function checkScrollPos() { - if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { - backToTop.classList.add('visible'); - } else { - backToTop.classList.remove('visible') - } - } - - checkScrollPos(); - - window.onscroll = function() { - checkScrollPos(); - }; - - backToTop.addEventListener('click', function(event) { - event.preventDefault(); - window.scrollTo(0, 0); - }); - } - - [].slice.call(document.head.querySelectorAll('link[rel="lazy-stylesheet"]')) - .forEach(function($link){ - $link.rel = "stylesheet"; - }); - }); - - /** - * Initialize when a part of the page was updated - */ - document.addEventListener('joomla:updated', initTemplate); - -})(Joomla, document); + // Init features + initTOC(); + initDrawers(); + initBackTop(); + } + if (doc.readyState === "loading") { + doc.addEventListener("DOMContentLoaded", init); + } else { + init(); + } +})(window, document); diff --git a/media/templates/site/moko-cassiopeia/js/theme-init.js b/media/templates/site/moko-cassiopeia/js/theme-init.js new file mode 100644 index 0000000..8cefc65 --- /dev/null +++ b/media/templates/site/moko-cassiopeia/js/theme-init.js @@ -0,0 +1,111 @@ +/** + * theme-init.js — Light/Dark mode initialization for Moko Cassiopeia + * + * @package Joomla.Site + * @subpackage Templates.Moko-Cassiopeia + * @file /media/templates/site/moko-cassiopeia/js/theme-init.js + * @version 2.0 + * + * @copyright (C) 2025 Moko Consulting + * @author Jonathan Miller + * @website https://mokoconsulting.tech + * @email hello@mokoconsulting.tech + * @phone +1 (931) 279-6313 + * + * SPDX-License-Identifier: GPL-3.0-or-later + * + * This file is part of a Moko Consulting project. + * + * This program is free software: you can redistribute it and/or modify it + * under the terms of the GNU General Public License as published by + * the Free Software Foundation; either version 3 of the License, or (at + * your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +(function (win, doc) { + "use strict"; + + var storageKey = "theme"; // localStorage key + var mql = win.matchMedia("(prefers-color-scheme: dark)"); + var root = doc.documentElement; + + /** + * Apply theme to , syncing both data-bs-theme and data-aria-theme. + * @param {"light"|"dark"} theme + */ + function applyTheme(theme) { + root.setAttribute("data-bs-theme", theme); + root.setAttribute("data-aria-theme", theme); + try { localStorage.setItem(storageKey, theme); } catch (e) {} + } + + /** + * Clear stored preference so system preference is followed. + */ + function clearStored() { + try { localStorage.removeItem(storageKey); } catch (e) {} + } + + /** + * Determine system theme. + */ + function systemTheme() { + return mql.matches ? "dark" : "light"; + } + + /** + * Initialize theme on load. + */ + function init() { + var stored = null; + try { stored = localStorage.getItem(storageKey); } catch (e) {} + + var theme = stored ? stored : systemTheme(); + applyTheme(theme); + + // Listen for system changes only if Auto mode (no stored) + var onChange = function () { + if (!localStorage.getItem(storageKey)) { + applyTheme(systemTheme()); + } + }; + if (typeof mql.addEventListener === "function") { + mql.addEventListener("change", onChange); + } else if (typeof mql.addListener === "function") { + mql.addListener(onChange); + } + + // Hook toggle UI if present + var switchEl = doc.getElementById("themeSwitch"); + var autoBtn = doc.getElementById("themeAuto"); + + if (switchEl) { + switchEl.checked = (theme === "dark"); + switchEl.addEventListener("change", function () { + var choice = switchEl.checked ? "dark" : "light"; + applyTheme(choice); + }); + } + + if (autoBtn) { + autoBtn.addEventListener("click", function () { + clearStored(); + applyTheme(systemTheme()); + }); + } + } + + if (doc.readyState === "loading") { + doc.addEventListener("DOMContentLoaded", init); + } else { + init(); + } +})(window, document); diff --git a/media/templates/site/moko-cassiopeia/js/user.js b/media/templates/site/moko-cassiopeia/js/user.js new file mode 100644 index 0000000..c5ec610 --- /dev/null +++ b/media/templates/site/moko-cassiopeia/js/user.js @@ -0,0 +1,31 @@ +/** + * user.js — User Custom JS File for Moko Cassiopeia + * + * @package Joomla.Site + * @subpackage Templates.Moko-Cassiopeia + * @file /media/templates/site/moko-cassiopeia/js/user.js + * @version 2.0 + * + * @copyright (C) 2025 Moko Consulting + * @author Jonathan Miller + * @website https://mokoconsulting.tech + * @email hello@mokoconsulting.tech + * @phone +1 (931) 279-6313 + * + * SPDX-License-Identifier: GPL-3.0-or-later + * + * This file is part of a Moko Consulting project. + * + * This program is free software: you can redistribute it and/or modify it + * under the terms of the GNU General Public License as published by + * the Free Software Foundation; either version 3 of the License, or (at + * your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ diff --git a/media/templates/site/moko-cassiopeia/js/vendor/afeld/bootstrap-toc.min.js b/media/templates/site/moko-cassiopeia/js/vendor/afeld/bootstrap-toc.min.js index 884b327..7f76b1c 100644 --- a/media/templates/site/moko-cassiopeia/js/vendor/afeld/bootstrap-toc.min.js +++ b/media/templates/site/moko-cassiopeia/js/vendor/afeld/bootstrap-toc.min.js @@ -1,4 +1,3 @@ -/* MOKO-COPYRIGHT: © 2025-08-10 Jonathan Miller || Moko Consulting — https://mokoconsulting.tech */ /*! * Bootstrap Table of Contents v1.0.1 (http://afeld.github.io/bootstrap-toc/) * Copyright 2015 Aidan Feldman diff --git a/templates/moko-cassiopeia/component.php b/templates/moko-cassiopeia/component.php index cf098c6..841d12e 100644 --- a/templates/moko-cassiopeia/component.php +++ b/templates/moko-cassiopeia/component.php @@ -1,6 +1,5 @@ usePreset('template.MOKO-CASSIOPEIA.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr')) +$wa->usePreset('template.moko-cassiopeia.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr')) ->useStyle('template.active.language') ->useStyle('template.user') ->useScript('template.user') @@ -64,7 +63,7 @@ $wa->usePreset('template.MOKO-CASSIOPEIA.' . ($this->direction === 'rtl' ? 'rtl' // Override 'template.active' asset to set correct ltr/rtl dependency -$wa->registerStyle('template.active', '', [], [], ['template.MOKO-CASSIOPEIA.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr')]); +$wa->registerStyle('template.active', '', [], [], ['template.moko-cassiopeia.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr')]); // Browsers support SVG favicons $this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon.svg', '', [], true, 1), 'icon', 'rel', ['type' => 'image/svg+xml']); @@ -87,4 +86,3 @@ $wa->getAsset('style', 'fontawesome')->setAttribute('rel', 'lazy-stylesheet'); - diff --git a/templates/moko-cassiopeia/custom.php b/templates/moko-cassiopeia/custom.php index c987ece..b7b611a 100644 --- a/templates/moko-cassiopeia/custom.php +++ b/templates/moko-cassiopeia/custom.php @@ -1,24 +1,30 @@ ' . $js_code . ''; - } - echo $js_code; - } + function console_log($output, $with_script_tags = true) { + $js_code = 'console.log(' . json_encode($output, JSON_HEX_TAG) . + ');'; + if ($with_script_tags) { + $js_code = ''; + } + echo $js_code; + } ?> Custom code included here diff --git a/templates/moko-cassiopeia/error.php b/templates/moko-cassiopeia/error.php index a39d40a..1caa0e2 100644 --- a/templates/moko-cassiopeia/error.php +++ b/templates/moko-cassiopeia/error.php @@ -1,16 +1,21 @@ params; +$wa = $this->getWebAssetManager(); -$app = Factory::getApplication(); -$input = $app->getInput(); -$wa = $this->getWebAssetManager(); +// ------------------ Params ------------------ +$colorLight = (string) $params->get('colorLightName', 'colors_standard'); +$colorDark = (string) $params->get('colorDarkName', 'colors_standard'); +$themeFab = (int) $params->get('theme_fab_enabled', 1); +$fABodyPos = (string) $params->get('theme_fab_pos', 'br'); +$gtmEnabled = (int) $params->get('googletagmanager', 0); +$gtmId = (string) $params->get('googletagmanagerid', ''); +$fa6KitCode = (string) $params->get('fA6KitCode', ''); +$stickyHeader = (bool) $params->get('stickyHeader', 0); +$brandEnabled = (int) $params->get('brand', 1); +$siteDescription = (string) $params->get('siteDescription', ''); +// Drawer icon params (escaped) +$params_leftIcon = htmlspecialchars($params->get('drawerLeftIcon', 'fa-solid fa-chevron-right'), ENT_QUOTES, 'UTF-8'); +$params_rightIcon = htmlspecialchars($params->get('drawerRightIcon', 'fa-solid fa-chevron-left'), ENT_QUOTES, 'UTF-8'); -// Browsers support SVG favicons -$this->addHeadLink(HTMLHelper::_('image', '../media/templates/site/moko-cassiopeia/images/favicon/favicon.svg', '', [], true, 1), 'icon', 'rel', ['type' => 'image/svg+xml']); -$this->addHeadLink(HTMLHelper::_('image', '../media/templates/site/moko-cassiopeia/images/favicon/favicon.ico', '', [], true, 1), 'alternate icon', 'rel', ['type' => 'image/vnd.microsoft.icon']); -$this->addHeadLink(HTMLHelper::_('image', '../media/templates/site/moko-cassiopeia/images/favicon/favicon.svg', '', [], true, 1), 'mask-icon', 'rel', ['color' => '#fff']); +// ------------------ Styles ------------------ +$wa->useStyle('template.base'); +$wa->useStyle('template.user'); +$wa->useStyle('vendor.vmbasic'); +$wa->useStyle('vendor.gable'); -//add Bootsrap 5 Support -HTMLHelper::_('bootstrap.alert'); -HTMLHelper::_('bootstrap.button'); -HTMLHelper::_('bootstrap.carousel'); -HTMLHelper::_('bootstrap.collapse'); -HTMLHelper::_('bootstrap.dropdown'); -HTMLHelper::_('bootstrap.modal'); -HTMLHelper::_('bootstrap.offcanvas'); -HTMLHelper::_('bootstrap.popover'); -HTMLHelper::_('bootstrap.scrollspy'); -HTMLHelper::_('bootstrap.tab'); -HTMLHelper::_('bootstrap.tooltip'); -HTMLHelper::_('bootstrap.toast'); - - -// Detecting Active Variables -$option = $input->getCmd('option', ''); -$view = $input->getCmd('view', ''); -$layout = $input->getCmd('layout', ''); -$task = $input->getCmd('task', ''); -$itemid = $input->getCmd('Itemid', ''); -$sitename = htmlspecialchars($app->get('sitename'), ENT_QUOTES, 'UTF-8'); -$menu = $app->getMenu()->getActive(); -$pageclass = $menu !== null ? $menu->getParams()->get('pageclass_sfx', '') : ''; - -// Template path -$templatePath = 'media/templates/site/moko-cassiopeia'; - -// Color Theme -$paramsColorName = $this->params->get('colorName', 'colors_standard'); -$assetColorName = 'theme.' . $paramsColorName; -$wa->registerAndUseStyle($assetColorName, $templatePath . '/css/global/' . $paramsColorName . '.css'); - -// Use a font scheme if set in the template style options -$paramsFontScheme = $this->params->get('useFontScheme', false); -$fontStyles = ''; - -if ($paramsFontScheme) { - if (stripos($paramsFontScheme, 'https://') === 0) { - $this->getPreloadManager()->preconnect('https://fonts.googleapis.com/', ['crossorigin' => 'anonymous']); - $this->getPreloadManager()->preconnect('https://fonts.gstatic.com/', ['crossorigin' => 'anonymous']); - $this->getPreloadManager()->preload($paramsFontScheme, ['as' => 'style', 'crossorigin' => 'anonymous']); - $wa->registerAndUseStyle('fontscheme.current', $paramsFontScheme, [], ['media' => 'print', 'rel' => 'lazy-stylesheet', 'onload' => 'this.media=\'all\'', 'crossorigin' => 'anonymous']); - - if (preg_match_all('/family=([^?:]*):/i', $paramsFontScheme, $matches) > 0) { - $fontStyles = '--font-family-body: "' . str_replace('+', ' ', $matches[1][0]) . '", sans-serif; - --font-family-headings: "' . str_replace('+', ' ', isset($matches[1][1]) ? $matches[1][1] : $matches[1][0]) . '", sans-serif; - --font-weight-normal: 400; - --font-weight-headings: 700;'; - } - } else { - $wa->registerAndUseStyle('fontscheme.current', $paramsFontScheme, ['version' => 'auto'], ['media' => 'print', 'rel' => 'lazy-stylesheet', 'onload' => 'this.media=\'all\'']); - $this->getPreloadManager()->preload($wa->getAsset('style', 'fontscheme.current')->getUri() . '?' . $this->getMediaVersion(), ['as' => 'style']); - } +// Light/Dark variable sheets (load before consumers) +if ($wa->assetExists('style', 'template.light.' . $colorLight)) { + $wa->useStyle('template.light.' . $colorLight); +} +if ($wa->assetExists('style', 'template.dark.' . $colorDark)) { + $wa->useStyle('template.dark.' . $colorDark); } -// Enable assets -$wa->usePreset('template.MOKO-CASSIOPEIA.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr')) - ->useStyle('template.active.language') - ->useStyle('template.user') - ->useScript('template.user') - ->addInlineStyle(":root { - --hue: 214; - --template-bg-light: #f0f4fb; - --template-text-dark: #495057; - --template-text-light: #ffffff; - --template-link-color: #2a69b8; - --template-special-color: #001B4C; - $fontStyles - }"); +// ------------------ Scripts ------------------ +$wa->useScript('theme-init.js'); +if ($themeFab === 1) { + $wa->useScript('darkmode-toggle.js'); +} +if ($gtmEnabled === 1) { + $wa->useScript('gtm.js'); +} -// Override 'template.active' asset to set correct ltr/rtl dependency -$wa->registerStyle('template.active', '', [], [], ['template.MOKO-CASSIOPEIA.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr')]); - -// Browsers support SVG favicons -$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon.svg', '', [], true, 1), 'icon', 'rel', ['type' => 'image/svg+xml']); -$this->addHeadLink(HTMLHelper::_('image', 'favicon.ico', '', [], true, 1), 'alternate icon', 'rel', ['type' => 'image/vnd.microsoft.icon']); -$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon-pinned.svg', '', [], true, 1), 'mask-icon', 'rel', ['color' => '#000']); - -// Logo file or site title param -if ($this->params->get('logoFile')) { - $logo = HTMLHelper::_('image', Uri::root(false) . htmlspecialchars($this->params->get('logoFile'), ENT_QUOTES), $sitename, ['loading' => 'eager', 'decoding' => 'async'], false, 0); -} elseif ($this->params->get('siteTitle')) { - $logo = '' . htmlspecialchars($this->params->get('siteTitle'), ENT_COMPAT, 'UTF-8') . ''; +// Optional Font Awesome 6 Kit (preferred) or FA5 fallback +if (!empty($fa6KitCode)) { + HTMLHelper::_('script', 'https://kit.fontawesome.com/' . rawurlencode($fa6KitCode) . '.js', [ + 'crossorigin' => 'anonymous' + ]); } else { - $logo = HTMLHelper::_('image', 'logo.svg', $sitename, ['class' => 'logo d-inline-block', 'loading' => 'eager', 'decoding' => 'async'], true, 0); + HTMLHelper::_('stylesheet', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css', ['version' => 'auto'], [ + 'crossorigin' => 'anonymous', + 'referrerpolicy' => 'no-referrer', + ]); } -// Container -$wrapper = $this->params->get('fluidContainer') ? 'wrapper-fluid' : 'wrapper-static'; +// ------------------ Context (logo, bootstrap needs) ------------------ +$sitename = htmlspecialchars($app->get('sitename'), ENT_QUOTES, 'UTF-8'); -$this->setMetaData('viewport', 'width=device-width, initial-scale=1'); +// Build logo/title +if ($params->get('logoFile')) { + $logo = HTMLHelper::_( + 'image', + Uri::root(false) . htmlspecialchars($params->get('logoFile'), ENT_QUOTES), + $sitename, + ['loading' => 'eager', 'decoding' => 'async'], + false, + 0 + ); +} elseif ($params->get('siteTitle')) { + $logo = '' . htmlspecialchars($params->get('siteTitle'), ENT_COMPAT, 'UTF-8') . ''; +} else { + $logo = HTMLHelper::_('image', 'full_logo.png', $sitename, ['class' => 'logo d-inline-block', 'loading' => 'eager', 'decoding' => 'async'], true, 0); +} -// Defer font awesome -$wa->getAsset('style', 'fontawesome')->setAttribute('rel', 'lazy-stylesheet'); +// ------------------ Error details ------------------ +$errorObj = isset($this->error) && is_object($this->error) ? $this->error : null; +$errorCode = $errorObj ? (int) $errorObj->getCode() : 500; +$errorMsg = $errorObj ? $errorObj->getMessage() : Text::_('JERROR_AN_ERROR_HAS_OCCURRED'); +$debugOn = defined('JDEBUG') && JDEBUG; ?> - - - + + + + + + + + + + - + +
+ countModules('topbar')) : ?> +
+ +
+ -
- params->get('brand', 1)) : ?> -
-
- - params->get('siteDescription')) : ?> -
params->get('siteDescription')); ?>
- -
-
- - countModules('menu') || $this->countModules('search')) : ?> -
- countModules('menu')) : ?> - - - countModules('search')) : ?> -
- -
- -
- -
+
+ countModules('below-topbar')) : ?> +
+ +
+ -
-
-

-
-
- -

-

-
    -
    • -
    • -
    • -
    • -
-

-

-
-

-
- error->getCode(); ?> error->getMessage(), ENT_QUOTES, 'UTF-8'); ?> -
- debug) : ?> -
- renderBacktrace(); ?> - - error->getPrevious()) : ?> - - _error here and in the loop as setError() assigns errors to this property and we need this for the backtrace to work correctly ?> - - setError($this->_error->getPrevious()); ?> - -

-

_error->getMessage(), ENT_QUOTES, 'UTF-8'); ?>

- renderBacktrace(); ?> - setError($this->_error->getPrevious()); ?> - - - setError($this->error); ?> - -
- -
-
-
-
- countModules('footer')) : ?> -
-
- -
-
- + +
+
+ + +
+ +
+
+ - + countModules('below-logo')) : ?> + + +
+ + countModules('menu', true) || $this->countModules('search', true)) : ?> +
+ countModules('menu', true)) : ?> + + + countModules('search', true)) : ?> +
+ +
+ +
+ +
+ + +
+
+
+

+ : + +

+

+ +

+

+ +

+
+
+ +
+ + + + + +
+ + +
+
Debug mode is ON — detailed error information is shown below.
+ +
+
Exception
+
+
+
Class
+
+ +
Code
+
getCode(); ?>
+ +
Message
+
getMessage(), ENT_QUOTES, 'UTF-8'); ?>
+ +
File
+
getFile(), ENT_QUOTES, 'UTF-8'); ?> : getLine(); ?>
+
+
+
+ + getTrace() : []; ?> +
+
Stack Trace ( frames)
+
+ +
    + $frame) : + $file = $frame['file'] ?? '[internal]'; + $line = isset($frame['line']) ? (int) $frame['line'] : 0; + $func = $frame['function'] ?? ''; + $class= $frame['class'] ?? ''; + $type = $frame['type'] ?? ''; + ?> +
  1. +
    # ()
    +
    +
    2. + +
+ + No stack trace available. + +
+
+
+ +
+
+ countModules('footer-menu', true)) : ?> +
+ +
+ + countModules('footer', true)) : ?> +
+ +
+ +
+ + - diff --git a/templates/moko-cassiopeia/joomla.asset.json b/templates/moko-cassiopeia/joomla.asset.json index a123949..89f8c34 100644 --- a/templates/moko-cassiopeia/joomla.asset.json +++ b/templates/moko-cassiopeia/joomla.asset.json @@ -1,110 +1,151 @@ { - "$schema": "https://developer.joomla.org/schemas/json-schema/web_assets.json", - "name": "moko-cassiopeia", - "version": "4.0.0", - "description": "This file contains details of the assets used by moko-cassiopeia, the default Joomla 4 site template.", - "license": "GPL-2.0-or-later", - "assets": [ - { - "name": "template.MOKO-CASSIOPEIA.ltr", - "description": "The css file to be used when the site is left to right (LTR).", - "type": "style", - "uri": "template.min.css", - "dependencies": [ - "fontawesome" - ] - }, - { - "name": "template.MOKO-CASSIOPEIA.rtl", - "description": "The css file to be used when the site is right to left (RTL).", - "type": "style", - "uri": "template-rtl.min.css", - "dependencies": [ - "fontawesome" - ] - }, - { - "name": "template.offline", - "description": "The css file to be used when the site is offline and offline.php is being used.", - "type": "style", - "uri": "offline.css" - }, - { - "name": "template.active.language", - "description": "An asset to allow language specific css, eg 'language/[lang-CODE]/[lang-CODE].css', to use it as a dependency to the active template", - "type": "style", - "uri": "", - "class": "LangActiveAssetItem", - "dependencies": [ - "template.active" - ] - }, - { - "name": "template.user", - "description": "A file where a user can add their own css.", - "type": "style", - "uri": "user.css", - "weight": 500, - "dependencies": [ - "template.active", - "template.active.language" - ] - }, - { - "name": "template.MOKO-CASSIOPEIA", - "description": "The file containing the javascript for this template.", - "type": "script", - "uri": "template.js", - "attributes" : { - "defer": true - }, - "dependencies": [ - "core" - ] - }, - { - "name": "template.active", - "description": "A dummy asset to allow extensions to use it as a dependency to the active template.", - "type": "script", - "uri": "", - "dependencies": [ - "template.MOKO-CASSIOPEIA" - ] - }, - { - "name": "template.user", - "description": "The name of a file where a user can add their own javascript", - "type": "script", - "uri": "user.js", - "dependencies": [ - "template.active" - ] - }, - { - "name": "template.MOKO-CASSIOPEIA.ltr", - "type": "preset", - "dependencies": [ - "template.MOKO-CASSIOPEIA.ltr#style", - "template.MOKO-CASSIOPEIA#script" - ] - }, - { - "name": "template.MOKO-CASSIOPEIA.rtl", - "type": "preset", - "dependencies": [ - "template.MOKO-CASSIOPEIA.rtl#style", - "template.MOKO-CASSIOPEIA#script" - ] - }, - { - "name": "searchtools", - "type": "style", - "uri": "system/searchtools/searchtools.min.css" - }, - { - "name": "fontawesome", - "type": "style", - "uri": "system/joomla-fontawesome.min.css" - } - ] + "$schema": "https://developer.joomla.org/schemas/json-schema/web_assets.json", + "name": "tpl_moko-cassiopeia", + "version": "02.00", + "description": "Moko-Cassiopeia template assets", + "license": "GPL-3.0-or-later", + "x-header": + { + "copyright_year": 2025, + "author": "Jonathan Miller", + "owner": "Moko Consulting", + "contact": "hello@mokoconsulting.tech", + "project": "Moko-Cassiopeia Template", + "spdx_license": "GPL-3.0-or-later", + "notice": "This file is part of a Moko Consulting project.", + "disclaimer": "This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License; either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program. If not, see https://www.gnu.org/licenses/." + }, + "assets": [ + { + "name": "template.base", + "type": "style", + "uri": "media/templates/site/moko-cassiopeia/css/template.css", + "attributes": + { + "media": "all" + } + }, + { + "name": "template.user", + "type": "style", + "uri": "media/templates/site/moko-cassiopeia/css/user.css", + "attributes": + { + "media": "all" + } + }, + { + "name": "template.editor", + "type": "style", + "uri": "media/templates/site/moko-cassiopeia/css/editor.css", + "attributes": + { + "media": "all" + } + }, + { + "name": "vendor.vmbasic", + "type": "style", + "uri": "media/templates/site/moko-cassiopeia/css/vendor/vmbasic.css", + "attributes": + { + "media": "all" + } + }, + { + "name": "vendor.gable", + "type": "style", + "uri": "media/templates/site/moko-cassiopeia/css/vendor/gable.css", + "attributes": + { + "media": "all" + } + }, + { + "name": "vendor.bootstrap-toc", + "type": "style", + "uri": "media/templates/site/moko-cassiopeia/css/vendor/afeld/bootstrap-toc.min.css", + "attributes": + { + "media": "all" + } + }, + { + "name": "template.light.colors_standard", + "type": "style", + "uri": "media/templates/site/moko-cassiopeia/css/global/colors/light/colors_standard.css" + }, + { + "name": "template.light.colors_alternative", + "type": "style", + "uri": "media/templates/site/moko-cassiopeia/css/global/colors/light/colors_alternative.css" + }, + { + "name": "template.light.colors_custom", + "type": "style", + "uri": "media/templates/site/moko-cassiopeia/css/global/colors/light/colors_custom.css" + }, + + { + "name": "template.dark.colors_standard", + "type": "style", + "uri": "media/templates/site/moko-cassiopeia/css/global/colors/dark/colors_standard.css" + }, + { + "name": "template.dark.colors_alternative", + "type": "style", + "uri": "media/templates/site/moko-cassiopeia/css/global/colors/dark/colors_alternative.css" + }, + { + "name": "template.dark.colors_custom", + "type": "style", + "uri": "media/templates/site/moko-cassiopeia/css/global/colors/dark/colors_custom.css" + }, + + { + "name": "template.js", + "type": "script", + "uri": "media/templates/site/moko-cassiopeia/js/template.js", + "attributes": + { + "defer": true + } + }, + { + "name": "theme-init.js", + "type": "script", + "uri": "media/templates/site/moko-cassiopeia/js/theme-init.js", + "attributes": + { + "defer": true + } + }, + { + "name": "darkmode-toggle.js", + "type": "script", + "uri": "media/templates/site/moko-cassiopeia/js/darkmode-toggle.js", + "attributes": + { + "defer": true + } + }, + { + "name": "gtm.js", + "type": "script", + "uri": "media/templates/site/moko-cassiopeia/js/gtm.js", + "attributes": + { + "defer": true + } + }, + { + "name": "vendor.bootstrap-toc.js", + "type": "script", + "uri": "media/templates/site/moko-cassiopeia/js/vendor/afeld/bootstrap-toc.min.js", + "attributes": + { + "defer": true + } + } + ] } diff --git a/templates/moko-cassiopeia/offline.php b/templates/moko-cassiopeia/offline.php index 0bb13af..f08722e 100644 --- a/templates/moko-cassiopeia/offline.php +++ b/templates/moko-cassiopeia/offline.php @@ -1,263 +1,91 @@ params + * @var string $this->language + * @var string $this->direction + */ -$extraButtons = AuthenticationHelper::getLoginButtons('form-login'); -$app = Factory::getApplication(); -$wa = $this->getWebAssetManager(); +$app = Factory::getApplication(); +$doc = Factory::getDocument(); +$params = $this->params ?: $app->getTemplate(true)->params; +$direction = $this->direction ?: 'ltr'; +/* ----------------------- + Load ONLY template.css + colors_*.css (with min toggle) +------------------------ */ +$useMin = !((int) $params->get('development_mode', 0) === 1); +$assetSuffix = $useMin ? '.min' : ''; +$base = rtrim(Uri::root(true), '/') . '/templates/' . $this->template . '/css/'; -if ($this->params->get('offlineEmbed')) { - $fullWidth = 1; +$doc->addStyleSheet($base . 'template' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-template']); +/* If you have a template param for color variant, set it here; defaults to 'standard' */ +$colorKey = (string) ($params->get('colors', 'standard') ?: 'standard'); +$colorKey = preg_replace('~[^a-z0-9_-]~i', '', $colorKey); +$doc->addStyleSheet($base . 'colors_' . $colorKey . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-colors']); + +/* Bootstrap CSS/JS for accordion behavior; safe to keep. */ +HTMLHelper::_('bootstrap.loadCss', true, $doc); +HTMLHelper::_('bootstrap.framework'); + +/* ----------------------- + Title + Meta (Include Site Name in Page Titles) +------------------------ */ +$sitename = (string) $app->get('sitename'); +$baseTitle = Text::_('JGLOBAL_OFFLINE') ?: 'Offline'; +$snSetting = (int) $app->get('sitename_pagetitles', 0); // 0=no, 1=before, 2=after + +if ($snSetting === 1) { + $doc->setTitle(Text::sprintf('JPAGETITLE', $sitename, $baseTitle)); // Site Name BEFORE +} elseif ($snSetting === 2) { + $doc->setTitle(Text::sprintf('JPAGETITLE', $baseTitle, $sitename)); // Site Name AFTER } else { - $fullWidth = 0; + $doc->setTitle($baseTitle); } +$doc->setMetaData('robots', 'noindex, nofollow'); -// Template path -$templatePath = 'media/templates/site/moko-cassiopeia'; - -// Color Theme -$paramsColorName = $this->params->get('colorName', 'colors_standard'); -$assetColorName = 'theme.' . $paramsColorName; -$wa->registerAndUseStyle($assetColorName, $templatePath . '/css/global/' . $paramsColorName . '.css'); - -// Use a font scheme if set in the template style options -$paramsFontScheme = $this->params->get('useFontScheme', false); -$fontStyles = ''; - -if ($paramsFontScheme) { - if (stripos($paramsFontScheme, 'https://') === 0) { - $this->getPreloadManager()->preconnect('https://fonts.googleapis.com/', ['crossorigin' => 'anonymous']); - $this->getPreloadManager()->preconnect('https://fonts.gstatic.com/', ['crossorigin' => 'anonymous']); - $this->getPreloadManager()->preload($paramsFontScheme, ['as' => 'style', 'crossorigin' => 'anonymous']); - $wa->registerAndUseStyle('fontscheme.current', $paramsFontScheme, [], ['media' => 'print', 'rel' => 'lazy-stylesheet', 'onload' => 'this.media=\'all\'', 'crossorigin' => 'anonymous']); - - if (preg_match_all('/family=([^?:]*):/i', $paramsFontScheme, $matches) > 0) { - $fontStyles = '--font-family-body: "' . str_replace('+', ' ', $matches[1][0]) . '", sans-serif; - --font-family-headings: "' . str_replace('+', ' ', isset($matches[1][1]) ? $matches[1][1] : $matches[1][0]) . '", sans-serif; - --font-weight-normal: 400; - --font-weight-headings: 700;'; - } - } else { - $wa->registerAndUseStyle('fontscheme.current', $paramsFontScheme, ['version' => 'auto'], ['media' => 'print', 'rel' => 'lazy-stylesheet', 'onload' => 'this.media=\'all\'']); - $this->getPreloadManager()->preload($wa->getAsset('style', 'fontscheme.current')->getUri() . '?' . $this->getMediaVersion(), ['as' => 'style']); - } -} - -// Enable assets -$wa->usePreset('template.MOKO-CASSIOPEIA.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr')) - ->useStyle('template.active.language') - ->useStyle('template.offline') - ->useStyle('template.user') - ->useScript('template.user') - ->addInlineStyle(":root { - --hue: 214; - --template-bg-light: #f0f4fb; - --template-text-dark: #495057; - --template-text-light: #ffffff; - --template-link-color: #2a69b8; - --template-special-color: #001B4C; - $fontStyles - }"); - -// Override 'template.active' asset to set correct ltr/rtl dependency -$wa->registerStyle('template.active', '', [], [], ['template.MOKO-CASSIOPEIA.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr')]); -$this->addStyleSheet('//cdn-images.mailchimp.com/embedcode/classic-061523.css'); -// Logo file or site title param -$sitename = htmlspecialchars($app->get('sitename'), ENT_QUOTES, 'UTF-8'); - -// Browsers support SVG favicons -$this->addHeadLink(HTMLHelper::_('image', 'favicon.svg', '', [], true, 1), 'icon', 'rel', ['type' => 'image/svg+xml']); -$this->addHeadLink(HTMLHelper::_('image', 'favicon.ico', '', [], true, 1), 'alternate icon', 'rel', ['type' => 'image/vnd.microsoft.icon']); -$this->addHeadLink(HTMLHelper::_('image', 'favicon.svg', '', [], true, 1), 'mask-icon', 'rel', ['color' => '#fff']); - - -//add Bootsrap 5 Support -HTMLHelper::_('bootstrap.alert'); -HTMLHelper::_('bootstrap.button'); -HTMLHelper::_('bootstrap.carousel'); -HTMLHelper::_('bootstrap.collapse'); -HTMLHelper::_('bootstrap.dropdown'); -HTMLHelper::_('bootstrap.modal'); -HTMLHelper::_('bootstrap.offcanvas'); -HTMLHelper::_('bootstrap.popover'); -HTMLHelper::_('bootstrap.scrollspy'); -HTMLHelper::_('bootstrap.tab'); -HTMLHelper::_('bootstrap.tooltip'); -HTMLHelper::_('bootstrap.toast'); - - -if ($this->params->get('logoFile')) { - $logo = HTMLHelper::_('image', Uri::root(false) . htmlspecialchars($this->params->get('logoFile'), ENT_QUOTES), $sitename, ['class' => 'logo d-inline-block', 'loading' => 'eager', 'decoding' => 'async'], false, 0); -} elseif ($this->params->get('siteTitle')) { - $logo = '' . htmlspecialchars($this->params->get('siteTitle'), ENT_COMPAT, 'UTF-8') . ''; -} else { - $logo = HTMLHelper::_('image', 'logo.svg', $sitename, ['class' => 'logo d-inline-block', 'loading' => 'eager', 'decoding' => 'async'], true, 0); -} - -if($this->params->get('fA6KitCode')){ - //build unique kit embed code - $fa6Kit="https://kit.fontawesome.com/".$this->params->get('fA6KitCode').".js"; - - //adding FontAwesome V6 Kit Code - JHtml::_('script', $fa6Kit, array('crossorigin' => 'anonymous')); -} else { - // Defer fontawesome for increased performance. Once the page is loaded javascript changes it to a stylesheet. - $wa->getAsset('style', 'fontawesome')->setAttribute('rel', 'lazy-stylesheet'); -} - -if ($app->get('offline_image')){ - //echo HTMLHelper::_('image', $app->get('offline_image'), $sitename, ['class' => 'offline-image'], false, 0); - $backgroundstyle=' - body { - background-image: url('.$app->get('offline_image').'); - background-repeat: no-repeat; - background-attachment: fixed; - background-size: cover; - }'; - $this->addStyleDeclaration($backgroundstyle); -} - - -?> - - - - - - - - - - -
-
-
- -

- -

- - countModules('offline-header')) : ?> - -
- get('display_offline_message', 1) == 1 && str_replace(' ', '', $app->get('offline_message')) != '') : ?> -

get('offline_message'); ?>

- get('display_offline_message', 1) == 2) : ?> -

-
- countModules('offline')) : ?> - -
- -
- -
- -
- countModules('offline-footer')) : ?> - - -
- countModules('footer-menu', true)) : ?> -
- -
- - countModules('footer')) : ?> - - -
- - - params->get('backTop') == 1) : ?> - - - - - - - - +/* ----------------------- + Offline content from Global Config +------------------------ */ +$displayOfflineMessage = (int) $app->get('display_offline_message', 1); // 0|1|2 +$offlineMessage = trim((string) $app->get('offline_message', '')); +/* ----------------------- + Brand (mutually exclusive: logoFile OR siteTitle) +------------------------ */ +if ($params->get('logoFile')) { + $logo = HTMLHelper::_( + 'image', + Uri::root(false) . htmlspecialchars((string) $params->get('logoFile'), ENT_QUOTES, 'UTF-8'), + $sitename, + [ + 'class' => 'logo d-inline-block', + 'loading' => 'eager', + 'decoding' => 'async', + 'style' => 'max-height:64px;height:auto;width:auto;' + ], + false, + 0 + ); +} elseif ($params->get('siteTitle')) { + $logo = '
+ - - - - - - - -
+ +
@@ -134,14 +106,132 @@
-
+ + +
+ +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +