admin-lte 4.0.2 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (146) hide show
  1. package/ACCESSIBILITY-COMPLIANCE.md +60 -339
  2. package/CHANGELOG.md +66 -0
  3. package/README.md +15 -2
  4. package/dist/css/adminlte-docs.css +878 -0
  5. package/dist/css/adminlte-docs.css.map +1 -0
  6. package/dist/css/adminlte-docs.min.css +7 -0
  7. package/dist/css/adminlte-docs.min.css.map +1 -0
  8. package/dist/css/adminlte-docs.rtl.css +877 -0
  9. package/dist/css/adminlte-docs.rtl.css.map +1 -0
  10. package/dist/css/adminlte-docs.rtl.min.css +7 -0
  11. package/dist/css/adminlte-docs.rtl.min.css.map +1 -0
  12. package/dist/css/adminlte.css +1176 -2718
  13. package/dist/css/adminlte.css.map +1 -1
  14. package/dist/css/adminlte.min.css +2 -2
  15. package/dist/css/adminlte.min.css.map +1 -1
  16. package/dist/css/adminlte.rtl.css +1176 -2718
  17. package/dist/css/adminlte.rtl.css.map +1 -1
  18. package/dist/css/adminlte.rtl.min.css +2 -2
  19. package/dist/css/adminlte.rtl.min.css.map +1 -1
  20. package/dist/js/adminlte.esm.js +1365 -0
  21. package/dist/js/adminlte.esm.js.map +1 -0
  22. package/dist/js/adminlte.esm.min.js +7 -0
  23. package/dist/js/adminlte.esm.min.js.map +1 -0
  24. package/dist/js/adminlte.js +606 -310
  25. package/dist/js/adminlte.js.map +1 -1
  26. package/dist/js/adminlte.min.js +2 -2
  27. package/dist/js/adminlte.min.js.map +1 -1
  28. package/dist/js/types/accessibility.d.ts +46 -0
  29. package/dist/js/types/adminlte.d.ts +9 -0
  30. package/dist/js/types/base-component.d.ts +36 -0
  31. package/dist/js/types/card-widget.d.ts +30 -0
  32. package/dist/js/types/color-mode.d.ts +56 -0
  33. package/dist/js/types/direct-chat.d.ts +19 -0
  34. package/dist/js/types/fullscreen.d.ts +21 -0
  35. package/dist/js/types/layout.d.ts +19 -0
  36. package/dist/js/types/push-menu.d.ts +102 -0
  37. package/dist/js/types/treeview.d.ts +27 -0
  38. package/dist/js/types/util/index.d.ts +42 -0
  39. package/package.json +60 -21
  40. package/src/scss/_app-header.scss +3 -1
  41. package/src/scss/_app-main.scss +4 -0
  42. package/src/scss/_app-sidebar.scss +3 -1
  43. package/src/scss/_bootstrap-overrides.scss +60 -0
  44. package/src/scss/_callouts.scss +13 -3
  45. package/src/scss/_dropdown.scss +3 -1
  46. package/src/scss/_info-box.scss +3 -1
  47. package/src/scss/_progress-bars.scss +3 -1
  48. package/src/scss/_table.scss +4 -2
  49. package/src/scss/adminlte-docs.scss +25 -0
  50. package/src/scss/adminlte.scss +5 -4
  51. package/src/scss/pages/_login_and_register.scss +3 -1
  52. package/src/scss/parts/_core.scss +0 -1
  53. package/src/ts/accessibility.ts +129 -69
  54. package/src/ts/adminlte.ts +3 -1
  55. package/src/ts/base-component.ts +84 -0
  56. package/src/ts/card-widget.ts +134 -85
  57. package/src/ts/color-mode.ts +174 -0
  58. package/src/ts/direct-chat.ts +38 -32
  59. package/src/ts/fullscreen.ts +78 -63
  60. package/src/ts/layout.ts +2 -1
  61. package/src/ts/push-menu.ts +93 -44
  62. package/src/ts/treeview.ts +107 -47
  63. package/src/ts/util/index.ts +114 -29
  64. package/.browserslistrc +0 -17
  65. package/.prettierrc +0 -6
  66. package/CODE_OF_CONDUCT.md +0 -43
  67. package/SECURITY.md +0 -99
  68. package/dist/UI/general.html +0 -2317
  69. package/dist/UI/icons.html +0 -1126
  70. package/dist/UI/timeline.html +0 -1212
  71. package/dist/docs/browser-support.html +0 -826
  72. package/dist/docs/color-mode.html +0 -1142
  73. package/dist/docs/components/main-header.html +0 -1209
  74. package/dist/docs/components/main-sidebar.html +0 -924
  75. package/dist/docs/customization.html +0 -1080
  76. package/dist/docs/deployment.html +0 -1145
  77. package/dist/docs/faq.html +0 -1392
  78. package/dist/docs/getting-started.html +0 -991
  79. package/dist/docs/how-to-contribute.html +0 -890
  80. package/dist/docs/index.html +0 -16
  81. package/dist/docs/integrations.html +0 -1231
  82. package/dist/docs/introduction.html +0 -1008
  83. package/dist/docs/javascript/accessibility.html +0 -949
  84. package/dist/docs/javascript/card-widget.html +0 -1019
  85. package/dist/docs/javascript/direct-chat.html +0 -896
  86. package/dist/docs/javascript/fullscreen.html +0 -905
  87. package/dist/docs/javascript/layout.html +0 -908
  88. package/dist/docs/javascript/plugins-overview.html +0 -1144
  89. package/dist/docs/javascript/pushmenu.html +0 -1045
  90. package/dist/docs/javascript/treeview.html +0 -1024
  91. package/dist/docs/layout-blueprint.html +0 -1087
  92. package/dist/docs/layout.html +0 -842
  93. package/dist/docs/license.html +0 -807
  94. package/dist/docs/migration.html +0 -1149
  95. package/dist/docs/recipes.html +0 -1185
  96. package/dist/docs/rtl.html +0 -957
  97. package/dist/examples/lockscreen.html +0 -249
  98. package/dist/examples/login-v2.html +0 -282
  99. package/dist/examples/login.html +0 -272
  100. package/dist/examples/register-v2.html +0 -291
  101. package/dist/examples/register.html +0 -277
  102. package/dist/forms/elements.html +0 -1405
  103. package/dist/forms/layout.html +0 -1267
  104. package/dist/forms/validation.html +0 -1275
  105. package/dist/forms/wizard.html +0 -1410
  106. package/dist/generate/theme.html +0 -1082
  107. package/dist/index.html +0 -1745
  108. package/dist/index2.html +0 -2277
  109. package/dist/index3.html +0 -1532
  110. package/dist/layout/collapsed-sidebar-without-hover.html +0 -1144
  111. package/dist/layout/collapsed-sidebar.html +0 -1137
  112. package/dist/layout/fixed-complete.html +0 -1138
  113. package/dist/layout/fixed-footer.html +0 -1136
  114. package/dist/layout/fixed-header.html +0 -1136
  115. package/dist/layout/fixed-sidebar.html +0 -1138
  116. package/dist/layout/layout-custom-area.html +0 -1177
  117. package/dist/layout/layout-rtl.html +0 -1137
  118. package/dist/layout/logo-switch.html +0 -683
  119. package/dist/layout/sidebar-mini.html +0 -1137
  120. package/dist/layout/unfixed-sidebar.html +0 -1136
  121. package/dist/mailbox/compose.html +0 -1151
  122. package/dist/mailbox/inbox.html +0 -1509
  123. package/dist/mailbox/read.html +0 -1202
  124. package/dist/pages/404.html +0 -239
  125. package/dist/pages/500.html +0 -227
  126. package/dist/pages/calendar.html +0 -1266
  127. package/dist/pages/chat.html +0 -1427
  128. package/dist/pages/faq.html +0 -1383
  129. package/dist/pages/file-manager.html +0 -1835
  130. package/dist/pages/invoice.html +0 -1199
  131. package/dist/pages/kanban.html +0 -1439
  132. package/dist/pages/maintenance.html +0 -230
  133. package/dist/pages/pricing.html +0 -1279
  134. package/dist/pages/profile.html +0 -1382
  135. package/dist/pages/projects.html +0 -1644
  136. package/dist/pages/settings.html +0 -1387
  137. package/dist/tables/data.html +0 -1319
  138. package/dist/tables/simple.html +0 -1435
  139. package/dist/widgets/cards.html +0 -1356
  140. package/dist/widgets/info-box.html +0 -1429
  141. package/dist/widgets/small-box.html +0 -1225
  142. package/eslint.config.js +0 -82
  143. package/github-issue-response.md +0 -40
  144. package/index.html +0 -12
  145. package/netlify.toml +0 -16
  146. package/src/scss/_bootstrap-variables.scss +0 -1766
@@ -1,6 +1,6 @@
1
1
  @charset "UTF-8";
2
2
  /*!
3
- * AdminLTE v4.0.0
3
+ * AdminLTE v4.1.0
4
4
  * Author: Colorlib
5
5
  * Website: AdminLTE.io <https://adminlte.io>
6
6
  * License: Open source - MIT <https://opensource.org/licenses/MIT>
@@ -13870,6 +13870,7 @@ body:not(.app-loaded) .app-footer {
13870
13870
  line-height: 2.5rem;
13871
13871
  }
13872
13872
  .app-main .app-content-header .breadcrumb a {
13873
+ color: var(--bs-link-hover-color);
13873
13874
  text-decoration: none;
13874
13875
  }
13875
13876
  .app-main .app-content-top-area,
@@ -14079,7 +14080,7 @@ body:not(.app-loaded) .app-footer {
14079
14080
  }
14080
14081
  .navbar-nav > .user-menu > .dropdown-menu > .user-footer {
14081
14082
  padding: 10px;
14082
- background-color: var(--bs-light-bg);
14083
+ background-color: var(--bs-tertiary-bg);
14083
14084
  }
14084
14085
  @media (min-width: 576px) {
14085
14086
  .navbar-nav > .user-menu .user-image {
@@ -14098,13 +14099,17 @@ body:not(.app-loaded) .app-footer {
14098
14099
  }
14099
14100
 
14100
14101
  .callout {
14101
- --bs-link-color-rgb: var(--lte-callout-link);
14102
- --bs-code-color: var(--lte-callout-code-color);
14103
14102
  padding: 1.25rem;
14104
14103
  color: var(--lte-callout-color, inherit);
14105
14104
  background-color: var(--lte-callout-bg, var(--bs-gray-100));
14106
14105
  border-right: 0.25rem solid var(--lte-callout-border, var(--bs-gray-300));
14107
14106
  }
14107
+ .callout a {
14108
+ color: var(--lte-callout-link, var(--bs-link-color));
14109
+ }
14110
+ .callout code {
14111
+ color: var(--lte-callout-code-color, var(--bs-code-color));
14112
+ }
14108
14113
  .callout .callout-link {
14109
14114
  font-weight: 700;
14110
14115
  color: var(--bs-callout-link-color);
@@ -14123,6 +14128,8 @@ body:not(.app-loaded) .app-footer {
14123
14128
  --lte-callout-color: var(--bs-primary-text-emphasis);
14124
14129
  --lte-callout-bg: var(--bs-primary-bg-subtle);
14125
14130
  --lte-callout-border: var(--bs-primary-border-subtle);
14131
+ --lte-callout-link: var(--bs-primary-text-emphasis);
14132
+ --lte-callout-code-color: var(--bs-primary-text-emphasis);
14126
14133
  --bs-callout-link-color: var(--bs-primary-text-emphasis);
14127
14134
  }
14128
14135
 
@@ -14130,6 +14137,8 @@ body:not(.app-loaded) .app-footer {
14130
14137
  --lte-callout-color: var(--bs-secondary-text-emphasis);
14131
14138
  --lte-callout-bg: var(--bs-secondary-bg-subtle);
14132
14139
  --lte-callout-border: var(--bs-secondary-border-subtle);
14140
+ --lte-callout-link: var(--bs-secondary-text-emphasis);
14141
+ --lte-callout-code-color: var(--bs-secondary-text-emphasis);
14133
14142
  --bs-callout-link-color: var(--bs-secondary-text-emphasis);
14134
14143
  }
14135
14144
 
@@ -14137,6 +14146,8 @@ body:not(.app-loaded) .app-footer {
14137
14146
  --lte-callout-color: var(--bs-success-text-emphasis);
14138
14147
  --lte-callout-bg: var(--bs-success-bg-subtle);
14139
14148
  --lte-callout-border: var(--bs-success-border-subtle);
14149
+ --lte-callout-link: var(--bs-success-text-emphasis);
14150
+ --lte-callout-code-color: var(--bs-success-text-emphasis);
14140
14151
  --bs-callout-link-color: var(--bs-success-text-emphasis);
14141
14152
  }
14142
14153
 
@@ -14144,6 +14155,8 @@ body:not(.app-loaded) .app-footer {
14144
14155
  --lte-callout-color: var(--bs-info-text-emphasis);
14145
14156
  --lte-callout-bg: var(--bs-info-bg-subtle);
14146
14157
  --lte-callout-border: var(--bs-info-border-subtle);
14158
+ --lte-callout-link: var(--bs-info-text-emphasis);
14159
+ --lte-callout-code-color: var(--bs-info-text-emphasis);
14147
14160
  --bs-callout-link-color: var(--bs-info-text-emphasis);
14148
14161
  }
14149
14162
 
@@ -14151,6 +14164,8 @@ body:not(.app-loaded) .app-footer {
14151
14164
  --lte-callout-color: var(--bs-warning-text-emphasis);
14152
14165
  --lte-callout-bg: var(--bs-warning-bg-subtle);
14153
14166
  --lte-callout-border: var(--bs-warning-border-subtle);
14167
+ --lte-callout-link: var(--bs-warning-text-emphasis);
14168
+ --lte-callout-code-color: var(--bs-warning-text-emphasis);
14154
14169
  --bs-callout-link-color: var(--bs-warning-text-emphasis);
14155
14170
  }
14156
14171
 
@@ -14158,6 +14173,8 @@ body:not(.app-loaded) .app-footer {
14158
14173
  --lte-callout-color: var(--bs-danger-text-emphasis);
14159
14174
  --lte-callout-bg: var(--bs-danger-bg-subtle);
14160
14175
  --lte-callout-border: var(--bs-danger-border-subtle);
14176
+ --lte-callout-link: var(--bs-danger-text-emphasis);
14177
+ --lte-callout-code-color: var(--bs-danger-text-emphasis);
14161
14178
  --bs-callout-link-color: var(--bs-danger-text-emphasis);
14162
14179
  }
14163
14180
 
@@ -14165,6 +14182,8 @@ body:not(.app-loaded) .app-footer {
14165
14182
  --lte-callout-color: var(--bs-light-text-emphasis);
14166
14183
  --lte-callout-bg: var(--bs-light-bg-subtle);
14167
14184
  --lte-callout-border: var(--bs-light-border-subtle);
14185
+ --lte-callout-link: var(--bs-light-text-emphasis);
14186
+ --lte-callout-code-color: var(--bs-light-text-emphasis);
14168
14187
  --bs-callout-link-color: var(--bs-light-text-emphasis);
14169
14188
  }
14170
14189
 
@@ -14172,6 +14191,8 @@ body:not(.app-loaded) .app-footer {
14172
14191
  --lte-callout-color: var(--bs-dark-text-emphasis);
14173
14192
  --lte-callout-bg: var(--bs-dark-bg-subtle);
14174
14193
  --lte-callout-border: var(--bs-dark-border-subtle);
14194
+ --lte-callout-link: var(--bs-dark-text-emphasis);
14195
+ --lte-callout-code-color: var(--bs-dark-text-emphasis);
14175
14196
  --bs-callout-link-color: var(--bs-dark-text-emphasis);
14176
14197
  }
14177
14198
 
@@ -14211,3022 +14232,1459 @@ body:not(.app-loaded) .app-footer {
14211
14232
  max-width: 1.1rem;
14212
14233
  }
14213
14234
 
14214
- .astro-code {
14215
- padding: 0.75rem;
14216
- border-radius: 0.375rem;
14217
- }
14218
-
14219
- .docs-page .app-content > .container-fluid, .docs-page .app-content > .container-sm, .docs-page .app-content > .container-md, .docs-page .app-content > .container-lg, .docs-page .app-content > .container-xl, .docs-page .app-content > .container-xxl {
14220
- max-width: 60rem;
14235
+ .progress {
14236
+ border-radius: 1px;
14221
14237
  }
14222
- @media (min-width: 1400px) {
14223
- .docs-page .app-content > .container-fluid, .docs-page .app-content > .container-sm, .docs-page .app-content > .container-md, .docs-page .app-content > .container-lg, .docs-page .app-content > .container-xl, .docs-page .app-content > .container-xxl {
14224
- max-width: 64rem;
14225
- }
14238
+ .progress.vertical {
14239
+ position: relative;
14240
+ display: inline-block;
14241
+ width: 30px;
14242
+ height: 200px;
14243
+ margin-left: 10px;
14226
14244
  }
14227
- .docs-page .card > .card-body {
14228
- padding: 1.5rem;
14229
- font-size: 1rem;
14230
- line-height: 1.7;
14231
- color: var(--bs-body-color);
14245
+ .progress.vertical > .progress-bar {
14246
+ position: absolute;
14247
+ bottom: 0;
14248
+ width: 100%;
14232
14249
  }
14233
- @media (min-width: 768px) {
14234
- .docs-page .card > .card-body {
14235
- padding: 2.5rem;
14236
- }
14237
- }
14238
- .docs-page .card > .card-body h1,
14239
- .docs-page .card > .card-body h2,
14240
- .docs-page .card > .card-body h3,
14241
- .docs-page .card > .card-body h4,
14242
- .docs-page .card > .card-body h5,
14243
- .docs-page .card > .card-body h6,
14244
- .docs-page .card > .card-body .h1,
14245
- .docs-page .card > .card-body .h2,
14246
- .docs-page .card > .card-body .h3,
14247
- .docs-page .card > .card-body .h4,
14248
- .docs-page .card > .card-body .h5,
14249
- .docs-page .card > .card-body .h6 {
14250
- margin-top: 2em;
14251
- margin-bottom: 0.5em;
14252
- font-weight: 600;
14253
- line-height: 1.3;
14254
- color: var(--bs-emphasis-color);
14255
- scroll-margin-top: 4rem;
14256
- }
14257
- .docs-page .card > .card-body h1:first-child,
14258
- .docs-page .card > .card-body h2:first-child,
14259
- .docs-page .card > .card-body h3:first-child,
14260
- .docs-page .card > .card-body h4:first-child,
14261
- .docs-page .card > .card-body h5:first-child,
14262
- .docs-page .card > .card-body h6:first-child,
14263
- .docs-page .card > .card-body .h1:first-child,
14264
- .docs-page .card > .card-body .h2:first-child,
14265
- .docs-page .card > .card-body .h3:first-child,
14266
- .docs-page .card > .card-body .h4:first-child,
14267
- .docs-page .card > .card-body .h5:first-child,
14268
- .docs-page .card > .card-body .h6:first-child {
14269
- margin-top: 0;
14250
+ .progress.vertical.sm, .progress.vertical.progress-sm {
14251
+ width: 20px;
14270
14252
  }
14271
- .docs-page .card > .card-body h2,
14272
- .docs-page .card > .card-body .h2 {
14273
- padding-bottom: 0.35em;
14274
- font-size: 1.75rem;
14275
- border-bottom: 1px solid var(--bs-border-color);
14253
+ .progress.vertical.xs, .progress.vertical.progress-xs {
14254
+ width: 10px;
14276
14255
  }
14277
- .docs-page .card > .card-body h3,
14278
- .docs-page .card > .card-body .h3 {
14279
- font-size: 1.4rem;
14256
+ .progress.vertical.xxs, .progress.vertical.progress-xxs {
14257
+ width: 3px;
14280
14258
  }
14281
- .docs-page .card > .card-body h4,
14282
- .docs-page .card > .card-body .h4 {
14283
- font-size: 1.2rem;
14259
+
14260
+ .progress-group {
14261
+ margin-bottom: 0.5rem;
14284
14262
  }
14285
- .docs-page .card > .card-body h5,
14286
- .docs-page .card > .card-body .h5 {
14287
- padding-top: 1.5em;
14288
- margin-top: 2.5em;
14289
- font-size: 1.3rem;
14290
- border-top: 1px solid var(--bs-border-color);
14263
+
14264
+ .progress-sm {
14265
+ height: 10px;
14291
14266
  }
14292
- .docs-page .card > .card-body h5:first-child,
14293
- .docs-page .card > .card-body .h5:first-child {
14294
- padding-top: 0;
14295
- border-top: 0;
14267
+
14268
+ .progress-xs {
14269
+ height: 7px;
14296
14270
  }
14297
- .docs-page .card > .card-body h6,
14298
- .docs-page .card > .card-body .h6 {
14299
- margin-top: 1.75em;
14300
- font-size: 1.08rem;
14301
- color: var(--bs-emphasis-color);
14271
+
14272
+ .progress-xxs {
14273
+ height: 3px;
14302
14274
  }
14303
- .docs-page .card > .card-body p,
14304
- .docs-page .card > .card-body ul,
14305
- .docs-page .card > .card-body ol,
14306
- .docs-page .card > .card-body dl,
14307
- .docs-page .card > .card-body blockquote,
14308
- .docs-page .card > .card-body table {
14309
- margin-bottom: 1.1rem;
14275
+
14276
+ .table tr > td .progress {
14277
+ margin: 0;
14310
14278
  }
14311
- .docs-page .card > .card-body ul,
14312
- .docs-page .card > .card-body ol {
14313
- padding-right: 1.5rem;
14279
+
14280
+ .card {
14281
+ box-shadow: 0 0 1px rgba(var(--bs-body-color-rgb), 0.125), 0 1px 3px rgba(var(--bs-body-color-rgb), 0.2);
14314
14282
  }
14315
- .docs-page .card > .card-body ul li,
14316
- .docs-page .card > .card-body ol li {
14317
- margin-bottom: 0.35rem;
14283
+ .card[class*=card-]:not(.card-outline) > .card-header, .card[class*=text-bg-]:not(.card-outline) > .card-header {
14284
+ color: var(--lte-card-variant-color);
14285
+ background-color: var(--lte-card-variant-bg);
14318
14286
  }
14319
- .docs-page .card > .card-body ul ul,
14320
- .docs-page .card > .card-body ul ol,
14321
- .docs-page .card > .card-body ol ul,
14322
- .docs-page .card > .card-body ol ol {
14323
- margin-top: 0.35rem;
14324
- margin-bottom: 0;
14287
+ .card[class*=card-]:not(.card-outline) > .card-header .btn-tool, .card[class*=text-bg-]:not(.card-outline) > .card-header .btn-tool {
14288
+ --bs-btn-color: rgba(var(--lte-card-variant-color-rgb), .8);
14289
+ --bs-btn-hover-color: var(--lte-card-variant-color);
14325
14290
  }
14326
- .docs-page .card > .card-body h2 + p, .docs-page .card > .card-body .h2 + p,
14327
- .docs-page .card > .card-body h3 + p,
14328
- .docs-page .card > .card-body .h3 + p,
14329
- .docs-page .card > .card-body h5 + p,
14330
- .docs-page .card > .card-body .h5 + p {
14331
- margin-top: 0;
14291
+ .card.card-outline {
14292
+ border-top: 3px solid var(--lte-card-variant-bg);
14332
14293
  }
14333
- .docs-page .card > .card-body p code,
14334
- .docs-page .card > .card-body li code,
14335
- .docs-page .card > .card-body td code,
14336
- .docs-page .card > .card-body th code,
14337
- .docs-page .card > .card-body h2 code,
14338
- .docs-page .card > .card-body .h2 code,
14339
- .docs-page .card > .card-body h3 code,
14340
- .docs-page .card > .card-body .h3 code,
14341
- .docs-page .card > .card-body h4 code,
14342
- .docs-page .card > .card-body .h4 code,
14343
- .docs-page .card > .card-body h5 code,
14344
- .docs-page .card > .card-body .h5 code,
14345
- .docs-page .card > .card-body h6 code,
14346
- .docs-page .card > .card-body .h6 code {
14347
- padding: 0.15em 0.4em;
14348
- font-size: 0.875em;
14349
- color: var(--bs-emphasis-color);
14350
- background: var(--bs-tertiary-bg);
14351
- border: 1px solid var(--bs-border-color);
14352
- border-radius: 0.25rem;
14294
+ .card.maximized-card {
14295
+ position: fixed;
14296
+ top: 0;
14297
+ right: 0;
14298
+ z-index: 1050;
14299
+ width: 100% !important;
14300
+ max-width: 100% !important;
14301
+ height: 100% !important;
14302
+ max-height: 100% !important;
14353
14303
  }
14354
- .docs-page .card > .card-body pre.astro-code,
14355
- .docs-page .card > .card-body pre {
14356
- padding: 1rem 1.25rem;
14357
- margin-top: 1.25rem;
14358
- margin-bottom: 1.5rem;
14359
- overflow-x: auto;
14360
- font-size: 0.875rem;
14361
- line-height: 1.6;
14362
- border-radius: 0.375rem;
14304
+ .card.maximized-card.was-collapsed .card-body {
14305
+ display: block !important;
14363
14306
  }
14364
- .docs-page .card > .card-body pre.astro-code code,
14365
- .docs-page .card > .card-body pre code {
14366
- padding: 0;
14367
- background: transparent;
14368
- border: 0;
14307
+ .card.maximized-card .card-body {
14308
+ overflow: auto;
14369
14309
  }
14370
- .docs-page .card > .card-body table {
14371
- width: 100%;
14372
- margin-top: 1.25rem;
14373
- margin-bottom: 1.5rem;
14374
- overflow: hidden;
14375
- font-size: 0.95rem;
14376
- border-collapse: collapse;
14377
- border: 1px solid var(--bs-border-color);
14378
- border-radius: 0.25rem;
14310
+ .card.maximized-card [data-lte-toggle=card-collapse] {
14311
+ display: none;
14379
14312
  }
14380
- .docs-page .card > .card-body table th,
14381
- .docs-page .card > .card-body table td {
14382
- padding: 0.65rem 0.9rem;
14383
- text-align: right;
14384
- vertical-align: top;
14385
- border-bottom: 1px solid var(--bs-border-color);
14313
+ .card.maximized-card [data-lte-icon=maximize] {
14314
+ display: none;
14386
14315
  }
14387
- .docs-page .card > .card-body table th {
14388
- font-weight: 600;
14389
- color: var(--bs-emphasis-color);
14390
- background: var(--bs-tertiary-bg);
14316
+ .card.maximized-card .card-header,
14317
+ .card.maximized-card .card-footer {
14318
+ border-radius: 0 !important;
14391
14319
  }
14392
- .docs-page .card > .card-body table tr:last-child td {
14393
- border-bottom: 0;
14320
+ .card:not(.maximized-card) [data-lte-icon=minimize] {
14321
+ display: none;
14394
14322
  }
14395
- .docs-page .card > .card-body table code {
14396
- white-space: nowrap;
14323
+ .card.collapsed-card > .card-header [data-lte-icon=collapse] {
14324
+ display: none;
14397
14325
  }
14398
- .docs-page .card > .card-body blockquote {
14399
- padding: 0.85rem 1.1rem;
14400
- margin-top: 1.25rem;
14401
- color: var(--bs-emphasis-color);
14402
- background: var(--bs-info-bg-subtle);
14403
- border-right: 4px solid var(--bs-info-border-subtle);
14404
- border-radius: 0.25rem;
14326
+ .card.collapsed-card > .card-body,
14327
+ .card.collapsed-card > .card-footer {
14328
+ display: none;
14405
14329
  }
14406
- .docs-page .card > .card-body blockquote p:last-child {
14407
- margin-bottom: 0;
14330
+ .card:not(.collapsed-card) > .card-header [data-lte-icon=expand] {
14331
+ display: none;
14408
14332
  }
14409
- .docs-page .card > .card-body blockquote code {
14410
- background: rgba(0, 0, 0, 0.05);
14333
+ .card .nav.flex-column > li {
14334
+ margin: 0;
14335
+ border-bottom: 1px solid var(--bs-border-color-translucent);
14411
14336
  }
14412
- .docs-page .card > .card-body a:not(.btn):not(.nav-link) {
14413
- color: var(--bs-primary);
14414
- text-decoration: underline;
14415
- text-decoration-thickness: 1px;
14416
- text-underline-offset: 3px;
14337
+ .card .nav.flex-column > li:last-of-type {
14338
+ border-bottom: 0;
14417
14339
  }
14418
- .docs-page .card > .card-body a:not(.btn):not(.nav-link):hover {
14419
- text-decoration-thickness: 2px;
14340
+ .card.height-control .card-body {
14341
+ max-height: 300px;
14342
+ overflow: auto;
14420
14343
  }
14421
- .docs-page .card > .card-body hr {
14422
- margin: 2.5rem 0;
14423
- border: 0;
14424
- border-top: 1px solid var(--bs-border-color);
14425
- opacity: 1;
14344
+ .card .border-end {
14345
+ border-left: 1px solid var(--bs-border-color-translucent);
14426
14346
  }
14427
- .docs-page .card > .card-body > p:first-child,
14428
- .docs-page .card > .card-body > p:first-of-type {
14429
- margin-bottom: 2rem;
14430
- font-size: 1.125rem;
14431
- line-height: 1.6;
14432
- color: var(--bs-body-color);
14347
+ .card .border-start {
14348
+ border-right: 1px solid var(--bs-border-color-translucent);
14433
14349
  }
14434
- .docs-page .card > .card-body details.faq-item {
14435
- margin-bottom: 0.5rem;
14436
- overflow: hidden;
14437
- background: var(--bs-body-bg);
14438
- border: 1px solid var(--bs-border-color);
14439
- border-radius: 0.375rem;
14440
- transition: border-color 0.15s ease, box-shadow 0.15s ease;
14350
+ .card.card-tabs:not(.card-outline) > .card-header {
14351
+ border-bottom: 0;
14441
14352
  }
14442
- @media (prefers-reduced-motion: reduce) {
14443
- .docs-page .card > .card-body details.faq-item {
14444
- transition: none;
14445
- }
14353
+ .card.card-tabs:not(.card-outline) > .card-header .nav-item:first-child .nav-link {
14354
+ border-right-color: transparent;
14446
14355
  }
14447
- .docs-page .card > .card-body details.faq-item:hover {
14448
- border-color: var(--bs-primary-border-subtle);
14356
+ .card.card-tabs.card-outline .nav-item {
14357
+ border-bottom: 0;
14449
14358
  }
14450
- .docs-page .card > .card-body details.faq-item[open] {
14451
- background: var(--bs-body-bg);
14452
- border-color: var(--bs-primary-border-subtle);
14453
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
14359
+ .card.card-tabs.card-outline .nav-item:first-child .nav-link {
14360
+ margin-right: 0;
14361
+ border-right: 0;
14454
14362
  }
14455
- .docs-page .card > .card-body details.faq-item summary {
14456
- position: relative;
14457
- padding: 0.9rem 1.1rem 0.9rem 3rem;
14458
- font-size: 1rem;
14459
- font-weight: 600;
14460
- color: var(--bs-emphasis-color);
14461
- list-style: none;
14462
- cursor: pointer;
14463
- -webkit-user-select: none;
14464
- user-select: none;
14465
- transition: color 0.15s ease;
14363
+ .card.card-tabs .card-tools {
14364
+ margin: 0.3rem 0.5rem;
14466
14365
  }
14467
- @media (prefers-reduced-motion: reduce) {
14468
- .docs-page .card > .card-body details.faq-item summary {
14469
- transition: none;
14470
- }
14366
+ .card.card-tabs:not(.expanding-card).collapsed-card .card-header {
14367
+ border-bottom: 0;
14471
14368
  }
14472
- .docs-page .card > .card-body details.faq-item summary::-webkit-details-marker {
14473
- display: none;
14369
+ .card.card-tabs:not(.expanding-card).collapsed-card .card-header .nav-tabs {
14370
+ border-bottom: 0;
14474
14371
  }
14475
- .docs-page .card > .card-body details.faq-item summary::marker {
14476
- content: "";
14372
+ .card.card-tabs:not(.expanding-card).collapsed-card .card-header .nav-tabs .nav-item {
14373
+ margin-bottom: 0;
14477
14374
  }
14478
- .docs-page .card > .card-body details.faq-item summary:hover {
14479
- color: var(--bs-primary);
14375
+ .card.card-tabs.expanding-card .card-header .nav-tabs .nav-item {
14376
+ margin-bottom: -1px;
14480
14377
  }
14481
- .docs-page .card > .card-body details.faq-item summary::after {
14482
- position: absolute;
14483
- top: 50%;
14484
- left: 1.1rem;
14485
- display: inline-block;
14486
- width: 0.55rem;
14487
- height: 0.55rem;
14488
- margin-top: -0.4rem;
14489
- content: "";
14490
- border-left: 2px solid currentcolor;
14491
- border-bottom: 2px solid currentcolor;
14492
- opacity: 0.55;
14493
- transform: rotate(-45deg);
14494
- transition: transform 0.2s ease;
14378
+ .card.card-outline-tabs {
14379
+ border-top: 0;
14495
14380
  }
14496
- @media (prefers-reduced-motion: reduce) {
14497
- .docs-page .card > .card-body details.faq-item summary::after {
14498
- transition: none;
14499
- }
14381
+ .card.card-outline-tabs .card-header .nav-item:first-child .nav-link {
14382
+ margin-right: 0;
14383
+ border-right: 0;
14500
14384
  }
14501
- .docs-page .card > .card-body details.faq-item[open] > summary {
14502
- color: var(--bs-primary);
14503
- border-bottom: 1px solid var(--bs-border-color);
14385
+ .card.card-outline-tabs .card-header a {
14386
+ text-decoration: none;
14387
+ border-top: 3px solid transparent;
14504
14388
  }
14505
- .docs-page .card > .card-body details.faq-item[open] > summary::after {
14506
- margin-top: -0.15rem;
14507
- opacity: 1;
14508
- transform: rotate(135deg);
14389
+ .card.card-outline-tabs .card-header a:hover {
14390
+ border-top: 3px solid var(--bs-border-color);
14509
14391
  }
14510
- .docs-page .card > .card-body details.faq-item > *:not(summary) {
14511
- padding-left: 1.1rem;
14512
- padding-right: 1.1rem;
14392
+ .card.card-outline-tabs .card-header a.active:hover {
14393
+ margin-top: 0;
14513
14394
  }
14514
- .docs-page .card > .card-body details.faq-item > *:not(summary):first-of-type {
14515
- padding-top: 1rem;
14395
+ .card.card-outline-tabs .card-tools {
14396
+ margin: 0.5rem 0.5rem 0.3rem;
14516
14397
  }
14517
- .docs-page .card > .card-body details.faq-item > *:not(summary):last-child {
14518
- padding-bottom: 1rem;
14398
+ .card.card-outline-tabs:not(.expanding-card).collapsed-card .card-header {
14399
+ border-bottom: 0;
14519
14400
  }
14520
- .docs-page .card > .card-body details.faq-item p,
14521
- .docs-page .card > .card-body details.faq-item ul,
14522
- .docs-page .card > .card-body details.faq-item ol {
14523
- margin-bottom: 0.65rem;
14401
+ .card.card-outline-tabs:not(.expanding-card).collapsed-card .card-header .nav-tabs {
14402
+ border-bottom: 0;
14524
14403
  }
14525
- .docs-page .card > .card-body details.faq-item > *:last-child p:last-child,
14526
- .docs-page .card > .card-body details.faq-item > p:last-child,
14527
- .docs-page .card > .card-body details.faq-item > ul:last-child,
14528
- .docs-page .card > .card-body details.faq-item > ol:last-child {
14404
+ .card.card-outline-tabs:not(.expanding-card).collapsed-card .card-header .nav-tabs .nav-item {
14529
14405
  margin-bottom: 0;
14530
14406
  }
14531
- .docs-page .card > .card-body details.faq-item pre.astro-code,
14532
- .docs-page .card > .card-body details.faq-item pre {
14533
- margin-left: 0;
14534
- margin-right: 0;
14535
- }
14536
- .docs-page[data-bs-theme=dark] .card > .card-body blockquote code, [data-bs-theme=dark] .docs-page .card > .card-body blockquote code {
14537
- background: rgba(255, 255, 255, 0.08);
14407
+ .card.card-outline-tabs.expanding-card .card-header .nav-tabs .nav-item {
14408
+ margin-bottom: -1px;
14538
14409
  }
14539
14410
 
14540
- .faq-page .app-content > .container-fluid, .faq-page .app-content > .container-sm, .faq-page .app-content > .container-md, .faq-page .app-content > .container-lg, .faq-page .app-content > .container-xl, .faq-page .app-content > .container-xxl {
14541
- max-width: 64rem;
14542
- }
14543
- @media (min-width: 1400px) {
14544
- .faq-page .app-content > .container-fluid, .faq-page .app-content > .container-sm, .faq-page .app-content > .container-md, .faq-page .app-content > .container-lg, .faq-page .app-content > .container-xl, .faq-page .app-content > .container-xxl {
14545
- max-width: 72rem;
14546
- }
14547
- }
14548
- .faq-page .faq-hero {
14549
- position: relative;
14550
- padding: 3rem 1.5rem 2.5rem;
14551
- margin-top: 1rem;
14411
+ html.maximized-card {
14552
14412
  overflow: hidden;
14553
- background: radial-gradient(ellipse at top right, rgba(var(--bs-primary-rgb), 0.12), transparent 60%), radial-gradient(ellipse at bottom left, rgba(var(--bs-info-rgb), 0.1), transparent 65%), var(--bs-body-bg);
14554
- border: 1px solid var(--bs-border-color);
14555
- border-radius: 1rem;
14556
14413
  }
14557
- .faq-page .faq-hero-eyebrow {
14558
- display: inline-flex;
14559
- gap: 0.4rem;
14560
- align-items: center;
14561
- padding: 0.35rem 0.85rem;
14562
- margin-bottom: 1rem;
14563
- font-size: 0.75rem;
14564
- font-weight: 600;
14565
- color: var(--bs-primary);
14566
- text-transform: uppercase;
14567
- letter-spacing: 0.08em;
14568
- background: var(--bs-primary-bg-subtle);
14569
- border: 1px solid var(--bs-primary-border-subtle);
14570
- border-radius: 50rem;
14414
+
14415
+ .card-header::after,
14416
+ .card-body::after,
14417
+ .card-footer::after {
14418
+ display: block;
14419
+ clear: both;
14420
+ content: "";
14571
14421
  }
14572
- .faq-page .faq-hero-eyebrow .bi {
14573
- font-size: 0.9rem;
14422
+
14423
+ .card-header {
14424
+ position: relative;
14425
+ padding: 1rem 1rem;
14426
+ background-color: transparent;
14427
+ border-bottom: 1px solid var(--bs-border-color-translucent);
14428
+ border-top-right-radius: 0.375rem;
14429
+ border-top-left-radius: 0.375rem;
14574
14430
  }
14575
- .faq-page .faq-hero-title {
14576
- margin: 0 0 0.5rem;
14577
- font-size: 2.25rem;
14578
- font-weight: 700;
14579
- line-height: 1.15;
14580
- color: var(--bs-emphasis-color);
14431
+ .collapsed-card .card-header {
14432
+ border-bottom: 0;
14581
14433
  }
14582
- @media (min-width: 768px) {
14583
- .faq-page .faq-hero-title {
14584
- font-size: 2.75rem;
14585
- }
14434
+ .card-header > .card-tools {
14435
+ float: left;
14436
+ margin-left: -0.5rem;
14586
14437
  }
14587
- .faq-page .faq-hero-lead {
14588
- max-width: 36rem;
14589
- margin: 0 auto 1.75rem;
14590
- font-size: 1.05rem;
14591
- line-height: 1.55;
14592
- color: var(--bs-secondary-color);
14438
+ .card-header > .card-tools .input-group,
14439
+ .card-header > .card-tools .nav,
14440
+ .card-header > .card-tools .pagination {
14441
+ margin-top: -0.4rem;
14442
+ margin-bottom: -0.4rem;
14593
14443
  }
14594
- .faq-page .faq-search {
14444
+ .card-header > .card-tools [data-bs-toggle=tooltip] {
14595
14445
  position: relative;
14596
- max-width: 32rem;
14597
- margin: 0 auto;
14598
14446
  }
14599
- .faq-page .faq-search .form-control {
14600
- height: 3rem;
14601
- padding-left: 3rem;
14602
- padding-right: 3rem;
14603
- font-size: 1rem;
14604
- background: var(--bs-body-bg);
14605
- border-radius: 50rem;
14606
- transition: box-shadow 0.15s ease, border-color 0.15s ease;
14447
+
14448
+ .card-title {
14449
+ float: right;
14450
+ margin: 0;
14451
+ font-size: 1.1rem;
14452
+ font-weight: 400;
14607
14453
  }
14608
- @media (prefers-reduced-motion: reduce) {
14609
- .faq-page .faq-search .form-control {
14610
- transition: none;
14611
- }
14454
+
14455
+ .btn-tool {
14456
+ --bs-btn-padding-x: .5rem;
14457
+ --bs-btn-padding-y: .25rem;
14612
14458
  }
14613
- .faq-page .faq-search .form-control:focus {
14614
- box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15);
14459
+ .btn-tool:not(.btn-tool-custom) {
14460
+ --bs-btn-color: var(--bs-tertiary-color);
14461
+ --bs-btn-bg: transparent;
14462
+ --bs-btn-box-shadow: none;
14463
+ --bs-btn-hover-color: var(--bs-secondary-color);
14464
+ --bs-btn-active-border-color: transparent;
14615
14465
  }
14616
- .faq-page .faq-search-icon {
14617
- position: absolute;
14618
- top: 50%;
14619
- right: 1.2rem;
14620
- color: var(--bs-secondary-color);
14621
- pointer-events: none;
14622
- transform: translateY(-50%);
14466
+ .btn-tool {
14467
+ margin: -1rem 0;
14468
+ font-size: 0.875rem;
14623
14469
  }
14624
- .faq-page .faq-search-clear {
14625
- position: absolute;
14626
- top: 50%;
14627
- left: 0.65rem;
14628
- display: inline-flex;
14629
- align-items: center;
14630
- justify-content: center;
14631
- width: 2rem;
14632
- height: 2rem;
14633
- padding: 0;
14634
- color: var(--bs-secondary-color);
14635
- background: var(--bs-tertiary-bg);
14636
- border: 0;
14637
- transform: translateY(-50%);
14638
- border-radius: 50%;
14639
- transition: background 0.15s ease, color 0.15s ease;
14470
+
14471
+ .card-primary,
14472
+ .bg-primary,
14473
+ .text-bg-primary {
14474
+ --lte-card-variant-bg: #0d6efd;
14475
+ --lte-card-variant-bg-rgb: 13, 110, 253;
14476
+ --lte-card-variant-color: #fff;
14477
+ --lte-card-variant-color-rgb: 255, 255, 255;
14640
14478
  }
14641
- @media (prefers-reduced-motion: reduce) {
14642
- .faq-page .faq-search-clear {
14643
- transition: none;
14644
- }
14479
+
14480
+ .card-secondary,
14481
+ .bg-secondary,
14482
+ .text-bg-secondary {
14483
+ --lte-card-variant-bg: #6c757d;
14484
+ --lte-card-variant-bg-rgb: 108, 117, 125;
14485
+ --lte-card-variant-color: #fff;
14486
+ --lte-card-variant-color-rgb: 255, 255, 255;
14645
14487
  }
14646
- .faq-page .faq-search-clear:hover {
14647
- color: var(--bs-body-color);
14648
- background: var(--bs-secondary-bg);
14488
+
14489
+ .card-success,
14490
+ .bg-success,
14491
+ .text-bg-success {
14492
+ --lte-card-variant-bg: #198754;
14493
+ --lte-card-variant-bg-rgb: 25, 135, 84;
14494
+ --lte-card-variant-color: #fff;
14495
+ --lte-card-variant-color-rgb: 255, 255, 255;
14649
14496
  }
14650
- .faq-page .faq-empty-state {
14651
- max-width: 32rem;
14652
- padding: 1rem;
14653
- margin: 1.5rem auto 0;
14654
- font-size: 0.95rem;
14655
- color: var(--bs-secondary-color);
14656
- background: var(--bs-tertiary-bg);
14657
- border-radius: 0.375rem;
14497
+
14498
+ .card-info,
14499
+ .bg-info,
14500
+ .text-bg-info {
14501
+ --lte-card-variant-bg: #0dcaf0;
14502
+ --lte-card-variant-bg-rgb: 13, 202, 240;
14503
+ --lte-card-variant-color: #000;
14504
+ --lte-card-variant-color-rgb: 0, 0, 0;
14658
14505
  }
14659
- .faq-page .faq-empty-state .bi {
14660
- margin-left: 0.35rem;
14506
+
14507
+ .card-warning,
14508
+ .bg-warning,
14509
+ .text-bg-warning {
14510
+ --lte-card-variant-bg: #ffc107;
14511
+ --lte-card-variant-bg-rgb: 255, 193, 7;
14512
+ --lte-card-variant-color: #000;
14513
+ --lte-card-variant-color-rgb: 0, 0, 0;
14661
14514
  }
14662
- .faq-page .faq-chips {
14663
- display: flex;
14664
- flex-wrap: wrap;
14665
- gap: 0.5rem;
14666
- justify-content: center;
14515
+
14516
+ .card-danger,
14517
+ .bg-danger,
14518
+ .text-bg-danger {
14519
+ --lte-card-variant-bg: #dc3545;
14520
+ --lte-card-variant-bg-rgb: 220, 53, 69;
14521
+ --lte-card-variant-color: #fff;
14522
+ --lte-card-variant-color-rgb: 255, 255, 255;
14667
14523
  }
14668
- .faq-page .faq-chip {
14669
- display: inline-flex;
14670
- gap: 0.45rem;
14671
- align-items: center;
14672
- padding: 0.45rem 0.85rem;
14673
- font-size: 0.875rem;
14674
- font-weight: 500;
14675
- color: var(--bs-body-color);
14676
- text-decoration: none;
14677
- background: var(--bs-body-bg);
14678
- border: 1px solid var(--bs-border-color);
14679
- border-radius: 50rem;
14680
- transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
14524
+
14525
+ .card-light,
14526
+ .bg-light,
14527
+ .text-bg-light {
14528
+ --lte-card-variant-bg: #f8f9fa;
14529
+ --lte-card-variant-bg-rgb: 248, 249, 250;
14530
+ --lte-card-variant-color: #000;
14531
+ --lte-card-variant-color-rgb: 0, 0, 0;
14681
14532
  }
14682
- @media (prefers-reduced-motion: reduce) {
14683
- .faq-page .faq-chip {
14684
- transition: none;
14685
- }
14533
+
14534
+ .card-dark,
14535
+ .bg-dark,
14536
+ .text-bg-dark {
14537
+ --lte-card-variant-bg: #212529;
14538
+ --lte-card-variant-bg-rgb: 33, 37, 41;
14539
+ --lte-card-variant-color: #fff;
14540
+ --lte-card-variant-color-rgb: 255, 255, 255;
14686
14541
  }
14687
- .faq-page .faq-chip:hover {
14688
- color: var(--bs-emphasis-color);
14689
- background: var(--bs-tertiary-bg);
14690
- transform: translateY(-1px);
14542
+
14543
+ .card-body > .table {
14544
+ margin-bottom: 0;
14691
14545
  }
14692
- .faq-page .faq-chip .bi {
14693
- font-size: 1rem;
14546
+ .card-body > .table > thead > tr > th,
14547
+ .card-body > .table > thead > tr > td {
14548
+ border-top-width: 0;
14694
14549
  }
14695
- .faq-page .faq-chip-count {
14696
- padding: 0 0.45rem;
14697
- font-size: 0.7rem;
14698
- font-weight: 600;
14699
- color: var(--bs-secondary-color);
14700
- background: var(--bs-tertiary-bg);
14701
- border-radius: 50rem;
14702
- }
14703
- .faq-page .faq-chip-primary:hover {
14704
- color: var(--bs-primary-text-emphasis);
14705
- background: var(--bs-primary-bg-subtle);
14706
- border-color: var(--bs-primary-border-subtle);
14707
- }
14708
- .faq-page .faq-chip-primary:hover .faq-chip-count {
14709
- color: var(--bs-primary-text-emphasis);
14710
- background: rgba(0, 0, 0, 0.06);
14711
- }
14712
- .faq-page .faq-chip-info:hover {
14713
- color: var(--bs-info-text-emphasis);
14714
- background: var(--bs-info-bg-subtle);
14715
- border-color: var(--bs-info-border-subtle);
14716
- }
14717
- .faq-page .faq-chip-info:hover .faq-chip-count {
14718
- color: var(--bs-info-text-emphasis);
14719
- background: rgba(0, 0, 0, 0.06);
14720
- }
14721
- .faq-page .faq-chip-warning:hover {
14722
- color: var(--bs-warning-text-emphasis);
14723
- background: var(--bs-warning-bg-subtle);
14724
- border-color: var(--bs-warning-border-subtle);
14725
- }
14726
- .faq-page .faq-chip-warning:hover .faq-chip-count {
14727
- color: var(--bs-warning-text-emphasis);
14728
- background: rgba(0, 0, 0, 0.06);
14729
- }
14730
- .faq-page .faq-chip-success:hover {
14731
- color: var(--bs-success-text-emphasis);
14732
- background: var(--bs-success-bg-subtle);
14733
- border-color: var(--bs-success-border-subtle);
14734
- }
14735
- .faq-page .faq-chip-success:hover .faq-chip-count {
14736
- color: var(--bs-success-text-emphasis);
14737
- background: rgba(0, 0, 0, 0.06);
14738
- }
14739
- .faq-page .faq-chip-danger:hover {
14740
- color: var(--bs-danger-text-emphasis);
14741
- background: var(--bs-danger-bg-subtle);
14742
- border-color: var(--bs-danger-border-subtle);
14743
- }
14744
- .faq-page .faq-chip-danger:hover .faq-chip-count {
14745
- color: var(--bs-danger-text-emphasis);
14746
- background: rgba(0, 0, 0, 0.06);
14747
- }
14748
- .faq-page .faq-chip-secondary:hover {
14749
- color: var(--bs-secondary-text-emphasis);
14750
- background: var(--bs-secondary-bg-subtle);
14751
- border-color: var(--bs-secondary-border-subtle);
14752
- }
14753
- .faq-page .faq-chip-secondary:hover .faq-chip-count {
14754
- color: var(--bs-secondary-text-emphasis);
14755
- background: rgba(0, 0, 0, 0.06);
14756
- }
14757
- .faq-page .faq-section {
14758
- margin-bottom: 2.5rem;
14759
- scroll-margin-top: 5rem;
14760
- }
14761
- .faq-page .faq-section-header {
14762
- display: flex;
14763
- gap: 1rem;
14764
- align-items: center;
14765
- padding: 1rem 1.25rem;
14766
- margin-bottom: 1rem;
14767
- background: var(--bs-body-bg);
14768
- border: 1px solid var(--bs-border-color);
14769
- border-right: 4px solid var(--bs-primary);
14770
- border-radius: 0.375rem;
14550
+
14551
+ .table:not(.table-dark) {
14552
+ color: inherit;
14771
14553
  }
14772
- .faq-page .faq-section-icon {
14773
- display: inline-flex;
14774
- flex-shrink: 0;
14775
- align-items: center;
14776
- justify-content: center;
14777
- width: 2.75rem;
14778
- height: 2.75rem;
14779
- font-size: 1.35rem;
14780
- color: var(--bs-primary);
14781
- background: var(--bs-primary-bg-subtle);
14782
- border-radius: 0.375rem;
14554
+ .table.table-head-fixed thead tr:nth-child(1) th {
14555
+ position: sticky;
14556
+ top: 0;
14557
+ z-index: 10;
14558
+ background-color: var(--bs-body-bg, #fff);
14559
+ border-bottom: 0;
14560
+ box-shadow: inset 0 1px 0 var(--bs-border-color, var(--bs-border-color)), inset 0 -1px 0 var(--bs-border-color, var(--bs-border-color));
14783
14561
  }
14784
- .faq-page .faq-section-title {
14785
- margin: 0;
14786
- font-size: 1.4rem;
14787
- font-weight: 600;
14788
- line-height: 1.2;
14789
- color: var(--bs-emphasis-color);
14562
+ .table.no-border,
14563
+ .table.no-border td,
14564
+ .table.no-border th {
14565
+ border: 0;
14790
14566
  }
14791
- .faq-page .faq-section-count {
14792
- margin: 0.1rem 0 0;
14793
- font-size: 0.8rem;
14794
- color: var(--bs-secondary-color);
14567
+ .table.text-center,
14568
+ .table.text-center td,
14569
+ .table.text-center th {
14570
+ text-align: center;
14795
14571
  }
14796
- .faq-page .faq-section-primary {
14797
- border-right-color: var(--bs-primary);
14572
+ .table.table-valign-middle thead > tr > th,
14573
+ .table.table-valign-middle thead > tr > td,
14574
+ .table.table-valign-middle tbody > tr > th,
14575
+ .table.table-valign-middle tbody > tr > td {
14576
+ vertical-align: middle;
14798
14577
  }
14799
- .faq-page .faq-section-primary .faq-section-icon {
14800
- color: var(--bs-primary-text-emphasis);
14801
- background: var(--bs-primary-bg-subtle);
14578
+ .card-body.p-0 .table thead > tr > th:first-of-type,
14579
+ .card-body.p-0 .table thead > tr > td:first-of-type,
14580
+ .card-body.p-0 .table tfoot > tr > th:first-of-type,
14581
+ .card-body.p-0 .table tfoot > tr > td:first-of-type,
14582
+ .card-body.p-0 .table tbody > tr > th:first-of-type,
14583
+ .card-body.p-0 .table tbody > tr > td:first-of-type {
14584
+ padding-right: 1.5rem;
14802
14585
  }
14803
- .faq-page .faq-section-info {
14804
- border-right-color: var(--bs-info);
14586
+ .card-body.p-0 .table thead > tr > th:last-of-type,
14587
+ .card-body.p-0 .table thead > tr > td:last-of-type,
14588
+ .card-body.p-0 .table tfoot > tr > th:last-of-type,
14589
+ .card-body.p-0 .table tfoot > tr > td:last-of-type,
14590
+ .card-body.p-0 .table tbody > tr > th:last-of-type,
14591
+ .card-body.p-0 .table tbody > tr > td:last-of-type {
14592
+ padding-left: 1.5rem;
14805
14593
  }
14806
- .faq-page .faq-section-info .faq-section-icon {
14807
- color: var(--bs-info-text-emphasis);
14808
- background: var(--bs-info-bg-subtle);
14594
+
14595
+ .small-box {
14596
+ border-radius: 0.375rem;
14597
+ box-shadow: 0 0 1px rgba(var(--bs-body-color-rgb), 0.125), 0 1px 3px rgba(var(--bs-body-color-rgb), 0.2);
14598
+ position: relative;
14599
+ display: block;
14600
+ margin-bottom: 1.25rem;
14601
+ --bs-link-color-rgb: none;
14602
+ --bs-link-hover-color-rgb: none;
14603
+ --bs-heading-color: none;
14809
14604
  }
14810
- .faq-page .faq-section-warning {
14811
- border-right-color: var(--bs-warning);
14605
+ .small-box > .inner {
14606
+ padding: 10px;
14812
14607
  }
14813
- .faq-page .faq-section-warning .faq-section-icon {
14814
- color: var(--bs-warning-text-emphasis);
14815
- background: var(--bs-warning-bg-subtle);
14608
+ .small-box > .small-box-footer {
14609
+ position: relative;
14610
+ z-index: 10;
14611
+ display: block;
14612
+ padding: 3px 0;
14613
+ text-align: center;
14614
+ background-color: rgba(0, 0, 0, 0.07);
14816
14615
  }
14817
- .faq-page .faq-section-success {
14818
- border-right-color: var(--bs-success);
14616
+ .small-box > .small-box-footer:hover {
14617
+ background-color: rgba(0, 0, 0, 0.1);
14819
14618
  }
14820
- .faq-page .faq-section-success .faq-section-icon {
14821
- color: var(--bs-success-text-emphasis);
14822
- background: var(--bs-success-bg-subtle);
14619
+ .small-box h3, .small-box .h3 {
14620
+ font-size: calc(1.345rem + 1.14vw);
14823
14621
  }
14824
- .faq-page .faq-section-danger {
14825
- border-right-color: var(--bs-danger);
14622
+ @media (min-width: 1200px) {
14623
+ .small-box h3, .small-box .h3 {
14624
+ font-size: 2.2rem;
14625
+ }
14826
14626
  }
14827
- .faq-page .faq-section-danger .faq-section-icon {
14828
- color: var(--bs-danger-text-emphasis);
14829
- background: var(--bs-danger-bg-subtle);
14627
+ .small-box h3, .small-box .h3 {
14628
+ padding: 0;
14629
+ margin: 0 0 10px;
14630
+ font-weight: 700;
14631
+ white-space: nowrap;
14830
14632
  }
14831
- .faq-page .faq-section-secondary {
14832
- border-right-color: var(--bs-secondary);
14633
+ @media (min-width: 992px) {
14634
+ .col-xl-2 .small-box h3, .col-xl-2 .small-box .h3, .col-lg-2 .small-box h3, .col-lg-2 .small-box .h3, .col-md-2 .small-box h3, .col-md-2 .small-box .h3 {
14635
+ font-size: calc(1.285rem + 0.42vw);
14636
+ }
14833
14637
  }
14834
- .faq-page .faq-section-secondary .faq-section-icon {
14835
- color: var(--bs-secondary-text-emphasis);
14836
- background: var(--bs-secondary-bg-subtle);
14638
+ @media (min-width: 992px) and (min-width: 1200px) {
14639
+ .col-xl-2 .small-box h3, .col-xl-2 .small-box .h3, .col-lg-2 .small-box h3, .col-lg-2 .small-box .h3, .col-md-2 .small-box h3, .col-md-2 .small-box .h3 {
14640
+ font-size: 1.6rem;
14641
+ }
14837
14642
  }
14838
- .faq-page .faq-section-items .faq-item {
14839
- margin-bottom: 0.5rem;
14840
- overflow: hidden;
14841
- background: var(--bs-body-bg);
14842
- border: 1px solid var(--bs-border-color);
14843
- border-radius: 0.375rem;
14844
- transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
14643
+ @media (min-width: 992px) {
14644
+ .col-xl-3 .small-box h3, .col-xl-3 .small-box .h3, .col-lg-3 .small-box h3, .col-lg-3 .small-box .h3, .col-md-3 .small-box h3, .col-md-3 .small-box .h3 {
14645
+ font-size: calc(1.285rem + 0.42vw);
14646
+ }
14845
14647
  }
14846
- @media (prefers-reduced-motion: reduce) {
14847
- .faq-page .faq-section-items .faq-item {
14848
- transition: none;
14648
+ @media (min-width: 992px) and (min-width: 1200px) {
14649
+ .col-xl-3 .small-box h3, .col-xl-3 .small-box .h3, .col-lg-3 .small-box h3, .col-lg-3 .small-box .h3, .col-md-3 .small-box h3, .col-md-3 .small-box .h3 {
14650
+ font-size: 1.6rem;
14849
14651
  }
14850
14652
  }
14851
- .faq-page .faq-section-items .faq-item:hover {
14852
- border-color: var(--bs-primary-border-subtle);
14853
- transform: translateX(-2px);
14653
+ @media (min-width: 1200px) {
14654
+ .col-xl-2 .small-box h3, .col-xl-2 .small-box .h3, .col-lg-2 .small-box h3, .col-lg-2 .small-box .h3, .col-md-2 .small-box h3, .col-md-2 .small-box .h3 {
14655
+ font-size: calc(1.345rem + 1.14vw);
14656
+ }
14854
14657
  }
14855
- .faq-page .faq-section-items .faq-item[open] {
14856
- border-color: var(--bs-primary-border-subtle);
14857
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
14858
- transform: none;
14658
+ @media (min-width: 1200px) and (min-width: 1200px) {
14659
+ .col-xl-2 .small-box h3, .col-xl-2 .small-box .h3, .col-lg-2 .small-box h3, .col-lg-2 .small-box .h3, .col-md-2 .small-box h3, .col-md-2 .small-box .h3 {
14660
+ font-size: 2.2rem;
14661
+ }
14859
14662
  }
14860
- .faq-page .faq-section-items .faq-item summary {
14861
- display: flex;
14862
- gap: 0.85rem;
14863
- align-items: center;
14864
- padding: 1rem 1.25rem;
14865
- font-size: 1rem;
14866
- font-weight: 500;
14867
- color: var(--bs-emphasis-color);
14868
- list-style: none;
14869
- cursor: pointer;
14870
- -webkit-user-select: none;
14871
- user-select: none;
14872
- }
14873
- .faq-page .faq-section-items .faq-item summary::-webkit-details-marker {
14874
- display: none;
14663
+ @media (min-width: 1200px) {
14664
+ .col-xl-3 .small-box h3, .col-xl-3 .small-box .h3, .col-lg-3 .small-box h3, .col-lg-3 .small-box .h3, .col-md-3 .small-box h3, .col-md-3 .small-box .h3 {
14665
+ font-size: calc(1.345rem + 1.14vw);
14666
+ }
14875
14667
  }
14876
- .faq-page .faq-section-items .faq-item summary::marker {
14877
- content: "";
14668
+ @media (min-width: 1200px) and (min-width: 1200px) {
14669
+ .col-xl-3 .small-box h3, .col-xl-3 .small-box .h3, .col-lg-3 .small-box h3, .col-lg-3 .small-box .h3, .col-md-3 .small-box h3, .col-md-3 .small-box .h3 {
14670
+ font-size: 2.2rem;
14671
+ }
14878
14672
  }
14879
- .faq-page .faq-section-items .faq-item summary::after {
14880
- content: none;
14673
+ .small-box p {
14674
+ font-size: 1rem;
14881
14675
  }
14882
- .faq-page .faq-section-items .faq-item .faq-q-icon {
14883
- display: inline-flex;
14884
- flex-shrink: 0;
14885
- align-items: center;
14886
- justify-content: center;
14887
- width: 1.75rem;
14888
- height: 1.75rem;
14889
- font-size: 0.85rem;
14890
- color: var(--bs-primary);
14891
- background: var(--bs-primary-bg-subtle);
14892
- border-radius: 50%;
14676
+ .small-box p > small, .small-box p > .small {
14677
+ display: block;
14678
+ margin-top: 5px;
14679
+ font-size: 0.9rem;
14680
+ color: #f8f9fa;
14893
14681
  }
14894
- .faq-page .faq-section-items .faq-item .faq-q-text {
14895
- flex-grow: 1;
14682
+ .small-box h3, .small-box .h3,
14683
+ .small-box p {
14684
+ z-index: 5;
14896
14685
  }
14897
- .faq-page .faq-section-items .faq-item .faq-q-chevron {
14898
- flex-shrink: 0;
14899
- color: var(--bs-secondary-color);
14900
- transition: transform 0.2s ease, color 0.2s ease;
14686
+ .small-box .small-box-icon {
14687
+ position: absolute;
14688
+ top: 15px;
14689
+ left: 15px;
14690
+ z-index: 0;
14691
+ height: 70px;
14692
+ font-size: 70px;
14693
+ color: rgba(0, 0, 0, 0.15);
14694
+ transition: transform 0.3s linear;
14901
14695
  }
14902
14696
  @media (prefers-reduced-motion: reduce) {
14903
- .faq-page .faq-section-items .faq-item .faq-q-chevron {
14697
+ .small-box .small-box-icon {
14904
14698
  transition: none;
14905
14699
  }
14906
14700
  }
14907
- .faq-page .faq-section-items .faq-item[open] .faq-q-chevron {
14908
- color: var(--bs-primary);
14909
- transform: rotate(-180deg);
14701
+ .small-box:hover .small-box-icon {
14702
+ transform: scale(1.1);
14910
14703
  }
14911
- .faq-page .faq-section-items .faq-item[open] summary {
14912
- color: var(--bs-primary);
14913
- border-bottom: 1px solid var(--bs-border-color);
14704
+
14705
+ @media (max-width: 575.98px) {
14706
+ .small-box {
14707
+ text-align: center;
14708
+ }
14709
+ .small-box .small-box-icon {
14710
+ display: none;
14711
+ }
14712
+ .small-box p {
14713
+ font-size: 12px;
14714
+ }
14914
14715
  }
14915
- .faq-page .faq-section-items .faq-item .faq-answer {
14916
- padding: 1.1rem 3.85rem 1.1rem 1.25rem;
14917
- font-size: 0.95rem;
14918
- line-height: 1.65;
14716
+ .info-box {
14717
+ box-shadow: 0 0 1px rgba(var(--bs-body-color-rgb), 0.125), 0 1px 3px rgba(var(--bs-body-color-rgb), 0.2);
14718
+ border-radius: 0.375rem;
14719
+ position: relative;
14720
+ display: flex;
14721
+ width: 100%;
14722
+ min-height: 80px;
14723
+ padding: 0.5rem;
14724
+ margin-bottom: 1rem;
14919
14725
  color: var(--bs-body-color);
14726
+ background-color: var(--bs-body-bg);
14920
14727
  }
14921
- .faq-page .faq-section-items .faq-item .faq-answer p:last-child,
14922
- .faq-page .faq-section-items .faq-item .faq-answer ul:last-child,
14923
- .faq-page .faq-section-items .faq-item .faq-answer ol:last-child,
14924
- .faq-page .faq-section-items .faq-item .faq-answer pre:last-child {
14925
- margin-bottom: 0;
14728
+ .info-box .progress {
14729
+ height: 2px;
14730
+ margin: 5px 0;
14731
+ background-color: rgba(var(--lte-card-variant-color-rgb), 0.125);
14926
14732
  }
14927
- .faq-page .faq-section-items .faq-item .faq-answer a {
14928
- color: var(--bs-primary);
14929
- text-decoration: underline;
14930
- text-underline-offset: 2px;
14733
+ .info-box .progress .progress-bar {
14734
+ background-color: var(--lte-card-variant-color);
14931
14735
  }
14932
- .faq-page .faq-section-items .faq-item .faq-answer a:hover {
14933
- text-decoration-thickness: 2px;
14736
+ .info-box .info-box-icon {
14737
+ display: flex;
14738
+ align-items: center;
14739
+ justify-content: center;
14740
+ width: 70px;
14741
+ font-size: 1.875rem;
14742
+ text-align: center;
14743
+ border-radius: 0.375rem;
14934
14744
  }
14935
- .faq-page .faq-section-items .faq-item .faq-answer code {
14936
- padding: 0.12em 0.35em;
14937
- font-size: 0.875em;
14938
- color: var(--bs-emphasis-color);
14939
- background: var(--bs-tertiary-bg);
14940
- border: 1px solid var(--bs-border-color);
14941
- border-radius: 0.25rem;
14745
+ .info-box .info-box-icon > img {
14746
+ max-width: 100%;
14942
14747
  }
14943
- .faq-page .faq-section-items .faq-item .faq-answer pre.astro-code,
14944
- .faq-page .faq-section-items .faq-item .faq-answer pre {
14945
- padding: 0.85rem 1rem;
14946
- margin-top: 0.75rem;
14947
- margin-bottom: 0.75rem;
14948
- overflow-x: auto;
14949
- font-size: 0.85rem;
14950
- line-height: 1.55;
14951
- border-radius: 0.25rem;
14748
+ .info-box .info-box-content {
14749
+ display: flex;
14750
+ flex: 1;
14751
+ flex-direction: column;
14752
+ justify-content: center;
14753
+ padding: 0 10px;
14754
+ line-height: 1.8;
14952
14755
  }
14953
- .faq-page .faq-section-items .faq-item .faq-answer pre.astro-code code,
14954
- .faq-page .faq-section-items .faq-item .faq-answer pre code {
14955
- padding: 0;
14956
- background: transparent;
14957
- border: 0;
14756
+ .info-box .info-box-number {
14757
+ display: block;
14758
+ margin-top: 0.25rem;
14759
+ font-weight: 700;
14958
14760
  }
14959
- .faq-page .faq-cta {
14960
- padding: 2.5rem 1.5rem;
14961
- text-align: center;
14962
- background: radial-gradient(ellipse at top, rgba(var(--bs-primary-rgb), 0.08), transparent 60%), var(--bs-body-bg);
14963
- border: 1px solid var(--bs-border-color);
14964
- border-radius: 1rem;
14761
+ .info-box .progress-description,
14762
+ .info-box .info-box-text {
14763
+ display: block;
14764
+ overflow: hidden;
14765
+ text-overflow: ellipsis;
14766
+ white-space: nowrap;
14965
14767
  }
14966
- .faq-page .faq-cta-icon {
14967
- display: inline-flex;
14968
- align-items: center;
14969
- justify-content: center;
14970
- width: 3.5rem;
14971
- height: 3.5rem;
14972
- margin-bottom: 1rem;
14973
- font-size: 1.6rem;
14974
- color: var(--bs-primary);
14975
- background: var(--bs-primary-bg-subtle);
14976
- border-radius: 50%;
14768
+ .info-box .info-box-more {
14769
+ display: block;
14977
14770
  }
14978
- .faq-page .faq-cta h2, .faq-page .faq-cta .h2 {
14979
- margin: 0 0 0.5rem;
14980
- font-size: 1.5rem;
14981
- font-weight: 600;
14982
- color: var(--bs-emphasis-color);
14771
+ .info-box .progress-description {
14772
+ margin: 0;
14983
14773
  }
14984
- .faq-page .faq-cta p {
14985
- max-width: 32rem;
14986
- margin: 0 auto 1.5rem;
14987
- color: var(--bs-secondary-color);
14774
+ @media (min-width: 768px) {
14775
+ .col-xl-2 .info-box .progress-description, .col-lg-2 .info-box .progress-description, .col-md-2 .info-box .progress-description {
14776
+ display: none;
14777
+ }
14778
+ .col-xl-3 .info-box .progress-description, .col-lg-3 .info-box .progress-description, .col-md-3 .info-box .progress-description {
14779
+ display: none;
14780
+ }
14988
14781
  }
14989
- .faq-page .faq-cta-actions {
14990
- display: inline-flex;
14991
- flex-wrap: wrap;
14992
- gap: 0.5rem;
14993
- justify-content: center;
14782
+ @media (min-width: 992px) {
14783
+ .col-xl-2 .info-box .progress-description, .col-lg-2 .info-box .progress-description, .col-md-2 .info-box .progress-description {
14784
+ font-size: 0.75rem;
14785
+ display: block;
14786
+ }
14787
+ .col-xl-3 .info-box .progress-description, .col-lg-3 .info-box .progress-description, .col-md-3 .info-box .progress-description {
14788
+ font-size: 0.75rem;
14789
+ display: block;
14790
+ }
14994
14791
  }
14995
-
14996
- .progress {
14997
- border-radius: 1px;
14792
+ @media (min-width: 1200px) {
14793
+ .col-xl-2 .info-box .progress-description, .col-lg-2 .info-box .progress-description, .col-md-2 .info-box .progress-description {
14794
+ font-size: 1rem;
14795
+ display: block;
14796
+ }
14797
+ .col-xl-3 .info-box .progress-description, .col-lg-3 .info-box .progress-description, .col-md-3 .info-box .progress-description {
14798
+ font-size: 1rem;
14799
+ display: block;
14800
+ }
14998
14801
  }
14999
- .progress.vertical {
14802
+
14803
+ .timeline {
15000
14804
  position: relative;
15001
- display: inline-block;
15002
- width: 30px;
15003
- height: 200px;
15004
- margin-left: 10px;
14805
+ padding: 0;
14806
+ margin: 0 0 45px;
15005
14807
  }
15006
- .progress.vertical > .progress-bar {
14808
+ .timeline::before {
14809
+ border-radius: 0.375rem;
15007
14810
  position: absolute;
14811
+ top: 0;
15008
14812
  bottom: 0;
15009
- width: 100%;
15010
- }
15011
- .progress.vertical.sm, .progress.vertical.progress-sm {
15012
- width: 20px;
15013
- }
15014
- .progress.vertical.xs, .progress.vertical.progress-xs {
15015
- width: 10px;
15016
- }
15017
- .progress.vertical.xxs, .progress.vertical.progress-xxs {
15018
- width: 3px;
14813
+ right: 31px;
14814
+ width: 4px;
14815
+ margin: 0;
14816
+ content: "";
14817
+ background-color: var(--bs-border-color);
15019
14818
  }
15020
-
15021
- .progress-group {
15022
- margin-bottom: 0.5rem;
14819
+ .timeline > div::before, .timeline > div::after {
14820
+ display: table;
14821
+ content: "";
15023
14822
  }
15024
-
15025
- .progress-sm {
15026
- height: 10px;
14823
+ .timeline > div {
14824
+ position: relative;
14825
+ margin-left: 10px;
14826
+ margin-bottom: 15px;
15027
14827
  }
15028
-
15029
- .progress-xs {
15030
- height: 7px;
14828
+ .timeline > div > .timeline-item {
14829
+ box-shadow: 0 0 1px rgba(var(--bs-body-color-rgb), 0.125), 0 1px 3px rgba(var(--bs-body-color-rgb), 0.2);
14830
+ border-radius: 0.375rem;
14831
+ position: relative;
14832
+ padding: 0;
14833
+ margin-top: 0;
14834
+ margin-left: 15px;
14835
+ margin-right: 60px;
14836
+ color: var(--bs-body-color);
14837
+ background-color: var(--bs-body-bg);
15031
14838
  }
15032
-
15033
- .progress-xxs {
15034
- height: 3px;
14839
+ .timeline > div > .timeline-item > .time {
14840
+ float: left;
14841
+ padding: 10px;
14842
+ font-size: 12px;
14843
+ color: var(--bs-secondary-color);
15035
14844
  }
15036
-
15037
- .table tr > td .progress {
14845
+ .timeline > div > .timeline-item > .timeline-header {
14846
+ padding: 10px;
15038
14847
  margin: 0;
14848
+ font-size: 16px;
14849
+ line-height: 1.1;
14850
+ color: var(--bs-secondary-color);
14851
+ border-bottom: 1px solid var(--bs-border-color);
15039
14852
  }
15040
-
15041
- .card {
15042
- box-shadow: 0 0 1px rgba(var(--bs-body-color-rgb), 0.125), 0 1px 3px rgba(var(--bs-body-color-rgb), 0.2);
14853
+ .timeline > div > .timeline-item > .timeline-header > a {
14854
+ font-weight: 600;
14855
+ text-decoration: none;
15043
14856
  }
15044
- .card[class*=card-]:not(.card-outline) > .card-header, .card[class*=text-bg-]:not(.card-outline) > .card-header {
15045
- color: var(--lte-card-variant-color);
15046
- background-color: var(--lte-card-variant-bg);
14857
+ .timeline > div > .timeline-item > .timeline-body,
14858
+ .timeline > div > .timeline-item > .timeline-footer {
14859
+ padding: 10px;
15047
14860
  }
15048
- .card[class*=card-]:not(.card-outline) > .card-header .btn-tool, .card[class*=text-bg-]:not(.card-outline) > .card-header .btn-tool {
15049
- --bs-btn-color: rgba(var(--lte-card-variant-color-rgb), .8);
15050
- --bs-btn-hover-color: var(--lte-card-variant-color);
14861
+ .timeline > div > .timeline-item > .timeline-body > img {
14862
+ margin: 10px;
15051
14863
  }
15052
- .card.card-outline {
15053
- border-top: 3px solid var(--lte-card-variant-bg);
14864
+ .timeline > div > .timeline-item > .timeline-body > dl,
14865
+ .timeline > div > .timeline-item > .timeline-body ol,
14866
+ .timeline > div > .timeline-item > .timeline-body ul {
14867
+ margin: 0;
15054
14868
  }
15055
- .card.maximized-card {
15056
- position: fixed;
14869
+ .timeline > div .timeline-icon {
14870
+ position: absolute;
15057
14871
  top: 0;
15058
- right: 0;
15059
- z-index: 1050;
15060
- width: 100% !important;
15061
- max-width: 100% !important;
15062
- height: 100% !important;
15063
- max-height: 100% !important;
14872
+ right: 18px;
14873
+ width: 30px;
14874
+ height: 30px;
14875
+ font-size: 16px;
14876
+ line-height: 30px;
14877
+ text-align: center;
14878
+ background-color: var(--bs-secondary-bg);
14879
+ border-radius: 50%;
15064
14880
  }
15065
- .card.maximized-card.was-collapsed .card-body {
15066
- display: block !important;
14881
+ .timeline > .time-label > span {
14882
+ border-radius: 4px;
14883
+ display: inline-block;
14884
+ padding: 5px;
14885
+ font-weight: 600;
14886
+ background-color: var(--bs-body-bg);
15067
14887
  }
15068
- .card.maximized-card .card-body {
15069
- overflow: auto;
14888
+
14889
+ .timeline-inverse > div > .timeline-item {
14890
+ box-shadow: none;
14891
+ background-color: var(--bs-tertiary-bg);
14892
+ border: 1px solid var(--bs-border-color);
15070
14893
  }
15071
- .card.maximized-card [data-lte-toggle=card-collapse] {
15072
- display: none;
14894
+ .timeline-inverse > div > .timeline-item > .timeline-header {
14895
+ border-bottom-color: var(--bs-border-color);
15073
14896
  }
15074
- .card.maximized-card [data-lte-icon=maximize] {
15075
- display: none;
14897
+
14898
+ .direct-chat .card-body {
14899
+ position: relative;
14900
+ padding: 0;
14901
+ overflow-x: hidden;
15076
14902
  }
15077
- .card.maximized-card .card-header,
15078
- .card.maximized-card .card-footer {
15079
- border-radius: 0 !important;
14903
+ .direct-chat.chat-pane-open .direct-chat-contacts {
14904
+ transform: translate(0, 0);
15080
14905
  }
15081
- .card:not(.maximized-card) [data-lte-icon=minimize] {
15082
- display: none;
14906
+ .direct-chat.timestamp-light .direct-chat-timestamp {
14907
+ color: rgba(var(--bs-body-color-rgb), 0.65);
15083
14908
  }
15084
- .card.collapsed-card > .card-header [data-lte-icon=collapse] {
15085
- display: none;
14909
+ .direct-chat.timestamp-dark .direct-chat-timestamp {
14910
+ color: rgba(var(--bs-body-color-rgb), 0.9);
15086
14911
  }
15087
- .card.collapsed-card > .card-body,
15088
- .card.collapsed-card > .card-footer {
15089
- display: none;
14912
+
14913
+ .direct-chat-messages {
14914
+ height: 250px;
14915
+ padding: 10px;
14916
+ overflow: auto;
14917
+ transform: translate(0, 0);
15090
14918
  }
15091
- .card:not(.collapsed-card) > .card-header [data-lte-icon=expand] {
15092
- display: none;
14919
+
14920
+ .direct-chat-msg,
14921
+ .direct-chat-text {
14922
+ display: block;
15093
14923
  }
15094
- .card .nav.flex-column > li {
15095
- margin: 0;
15096
- border-bottom: 1px solid var(--bs-border-color-translucent);
14924
+
14925
+ .direct-chat-msg::after {
14926
+ display: block;
14927
+ clear: both;
14928
+ content: "";
15097
14929
  }
15098
- .card .nav.flex-column > li:last-of-type {
15099
- border-bottom: 0;
14930
+ .direct-chat-msg {
14931
+ margin-bottom: 10px;
15100
14932
  }
15101
- .card.height-control .card-body {
15102
- max-height: 300px;
15103
- overflow: auto;
14933
+
14934
+ .direct-chat-messages,
14935
+ .direct-chat-contacts {
14936
+ transition: transform 0.5s ease-in-out;
15104
14937
  }
15105
- .card .border-end {
15106
- border-left: 1px solid var(--bs-border-color-translucent);
14938
+ @media (prefers-reduced-motion: reduce) {
14939
+ .direct-chat-messages,
14940
+ .direct-chat-contacts {
14941
+ transition: none;
14942
+ }
15107
14943
  }
15108
- .card .border-start {
15109
- border-right: 1px solid var(--bs-border-color-translucent);
14944
+
14945
+ .direct-chat-text {
14946
+ border-radius: 0.5rem;
14947
+ position: relative;
14948
+ padding: 5px 10px;
14949
+ margin: 5px 50px 0 0;
14950
+ color: var(--bs-emphasis-color);
14951
+ background-color: var(--bs-secondary-bg);
14952
+ border: 1px solid var(--bs-border-color);
15110
14953
  }
15111
- .card.card-tabs:not(.card-outline) > .card-header {
15112
- border-bottom: 0;
14954
+ .direct-chat-text::after, .direct-chat-text::before {
14955
+ position: absolute;
14956
+ top: 15px;
14957
+ left: 100%;
14958
+ width: 0;
14959
+ height: 0;
14960
+ pointer-events: none;
14961
+ content: " ";
14962
+ border: solid transparent;
14963
+ border-left-color: var(--bs-border-color);
15113
14964
  }
15114
- .card.card-tabs:not(.card-outline) > .card-header .nav-item:first-child .nav-link {
15115
- border-right-color: transparent;
14965
+ .direct-chat-text::after {
14966
+ margin-top: -5px;
14967
+ border-width: 5px;
15116
14968
  }
15117
- .card.card-tabs.card-outline .nav-item {
15118
- border-bottom: 0;
14969
+ .direct-chat-text::before {
14970
+ margin-top: -6px;
14971
+ border-width: 6px;
15119
14972
  }
15120
- .card.card-tabs.card-outline .nav-item:first-child .nav-link {
14973
+ .end .direct-chat-text {
14974
+ margin-left: 50px;
15121
14975
  margin-right: 0;
15122
- border-right: 0;
15123
- }
15124
- .card.card-tabs .card-tools {
15125
- margin: 0.3rem 0.5rem;
15126
- }
15127
- .card.card-tabs:not(.expanding-card).collapsed-card .card-header {
15128
- border-bottom: 0;
15129
14976
  }
15130
- .card.card-tabs:not(.expanding-card).collapsed-card .card-header .nav-tabs {
15131
- border-bottom: 0;
15132
- }
15133
- .card.card-tabs:not(.expanding-card).collapsed-card .card-header .nav-tabs .nav-item {
15134
- margin-bottom: 0;
14977
+ .end .direct-chat-text::after, .end .direct-chat-text::before {
14978
+ left: auto;
14979
+ right: 100%;
14980
+ border-left-color: transparent;
14981
+ border-right-color: var(--bs-border-color);
15135
14982
  }
15136
- .card.card-tabs.expanding-card .card-header .nav-tabs .nav-item {
15137
- margin-bottom: -1px;
14983
+
14984
+ .direct-chat-img {
14985
+ border-radius: 50%;
14986
+ float: right;
14987
+ width: 40px;
14988
+ height: 40px;
15138
14989
  }
15139
- .card.card-outline-tabs {
15140
- border-top: 0;
14990
+ .end .direct-chat-img {
14991
+ float: left;
15141
14992
  }
15142
- .card.card-outline-tabs .card-header .nav-item:first-child .nav-link {
15143
- margin-right: 0;
15144
- border-right: 0;
14993
+
14994
+ .direct-chat-infos {
14995
+ display: block;
14996
+ margin-bottom: 2px;
14997
+ font-size: 0.875rem;
15145
14998
  }
15146
- .card.card-outline-tabs .card-header a {
15147
- text-decoration: none;
15148
- border-top: 3px solid transparent;
14999
+
15000
+ .direct-chat-name {
15001
+ font-weight: 600;
15149
15002
  }
15150
- .card.card-outline-tabs .card-header a:hover {
15151
- border-top: 3px solid var(--bs-border-color);
15003
+
15004
+ .direct-chat-timestamp {
15005
+ color: rgba(var(--bs-body-color-rgb), 0.75);
15152
15006
  }
15153
- .card.card-outline-tabs .card-header a.active:hover {
15154
- margin-top: 0;
15007
+
15008
+ .direct-chat-contacts-open .direct-chat-contacts {
15009
+ transform: translate(0, 0);
15155
15010
  }
15156
- .card.card-outline-tabs .card-tools {
15157
- margin: 0.5rem 0.5rem 0.3rem;
15011
+
15012
+ .direct-chat-contacts {
15013
+ position: absolute;
15014
+ top: 0;
15015
+ bottom: 0;
15016
+ width: 100%;
15017
+ height: 250px;
15018
+ overflow: auto;
15019
+ color: var(--bs-body-bg);
15020
+ background-color: var(--bs-body-color);
15021
+ transform: translate(-101%, 0);
15158
15022
  }
15159
- .card.card-outline-tabs:not(.expanding-card).collapsed-card .card-header {
15160
- border-bottom: 0;
15023
+
15024
+ .direct-chat-contacts-light {
15025
+ background-color: var(--bs-light-bg-subtle);
15161
15026
  }
15162
- .card.card-outline-tabs:not(.expanding-card).collapsed-card .card-header .nav-tabs {
15163
- border-bottom: 0;
15027
+ .direct-chat-contacts-light .contacts-list-name {
15028
+ color: var(--bs-body-color);
15164
15029
  }
15165
- .card.card-outline-tabs:not(.expanding-card).collapsed-card .card-header .nav-tabs .nav-item {
15166
- margin-bottom: 0;
15030
+ .direct-chat-contacts-light .contacts-list-date {
15031
+ color: var(--bs-secondary-color);
15167
15032
  }
15168
- .card.card-outline-tabs.expanding-card .card-header .nav-tabs .nav-item {
15169
- margin-bottom: -1px;
15033
+ .direct-chat-contacts-light .contacts-list-msg {
15034
+ color: var(--bs-secondary-color);
15170
15035
  }
15171
15036
 
15172
- html.maximized-card {
15173
- overflow: hidden;
15037
+ .contacts-list {
15038
+ padding-right: 0;
15039
+ list-style: none;
15174
15040
  }
15175
-
15176
- .card-header::after,
15177
- .card-body::after,
15178
- .card-footer::after {
15041
+ .contacts-list > li::after {
15179
15042
  display: block;
15180
15043
  clear: both;
15181
15044
  content: "";
15182
15045
  }
15183
-
15184
- .card-header {
15185
- position: relative;
15186
- padding: 1rem 1rem;
15187
- background-color: transparent;
15188
- border-bottom: 1px solid var(--bs-border-color-translucent);
15189
- border-top-right-radius: 0.375rem;
15190
- border-top-left-radius: 0.375rem;
15046
+ .contacts-list > li {
15047
+ padding: 10px;
15048
+ margin: 0;
15049
+ text-decoration: none;
15050
+ border-bottom: 1px solid rgba(0, 0, 0, 0.2);
15191
15051
  }
15192
- .collapsed-card .card-header {
15052
+ .contacts-list > li:last-of-type {
15193
15053
  border-bottom: 0;
15194
15054
  }
15195
- .card-header > .card-tools {
15196
- float: left;
15197
- margin-left: -0.5rem;
15198
- }
15199
- .card-header > .card-tools .input-group,
15200
- .card-header > .card-tools .nav,
15201
- .card-header > .card-tools .pagination {
15202
- margin-top: -0.4rem;
15203
- margin-bottom: -0.4rem;
15204
- }
15205
- .card-header > .card-tools [data-bs-toggle=tooltip] {
15206
- position: relative;
15055
+ .contacts-list > li a {
15056
+ text-decoration: none;
15207
15057
  }
15208
15058
 
15209
- .card-title {
15059
+ .contacts-list-img {
15060
+ border-radius: 50%;
15210
15061
  float: right;
15211
- margin: 0;
15212
- font-size: 1.1rem;
15213
- font-weight: 400;
15062
+ width: 40px;
15214
15063
  }
15215
15064
 
15216
- .btn-tool {
15217
- --bs-btn-padding-x: .5rem;
15218
- --bs-btn-padding-y: .25rem;
15065
+ .contacts-list-info {
15066
+ margin-right: 45px;
15067
+ color: var(--bs-body-bg);
15219
15068
  }
15220
- .btn-tool:not(.btn-tool-custom) {
15221
- --bs-btn-color: var(--bs-tertiary-color);
15222
- --bs-btn-bg: transparent;
15223
- --bs-btn-box-shadow: none;
15224
- --bs-btn-hover-color: var(--bs-secondary-color);
15225
- --bs-btn-active-border-color: transparent;
15069
+
15070
+ .contacts-list-name,
15071
+ .contacts-list-status {
15072
+ display: block;
15226
15073
  }
15227
- .btn-tool {
15228
- margin: -1rem 0;
15074
+
15075
+ .contacts-list-name {
15076
+ font-weight: 600;
15077
+ }
15078
+
15079
+ .contacts-list-status {
15229
15080
  font-size: 0.875rem;
15230
15081
  }
15231
15082
 
15232
- .card-primary,
15233
- .bg-primary,
15234
- .text-bg-primary {
15235
- --lte-card-variant-bg: #0d6efd;
15236
- --lte-card-variant-bg-rgb: 13, 110, 253;
15237
- --lte-card-variant-color: #fff;
15238
- --lte-card-variant-color-rgb: 255, 255, 255;
15083
+ .contacts-list-date {
15084
+ font-weight: 400;
15085
+ color: var(--bs-secondary-bg);
15239
15086
  }
15240
15087
 
15241
- .card-secondary,
15242
- .bg-secondary,
15243
- .text-bg-secondary {
15244
- --lte-card-variant-bg: #6c757d;
15245
- --lte-card-variant-bg-rgb: 108, 117, 125;
15246
- --lte-card-variant-color: #fff;
15247
- --lte-card-variant-color-rgb: 255, 255, 255;
15088
+ .contacts-list-msg {
15089
+ color: var(--bs-secondary-bg);
15248
15090
  }
15249
15091
 
15250
- .card-success,
15251
- .bg-success,
15252
- .text-bg-success {
15253
- --lte-card-variant-bg: #198754;
15254
- --lte-card-variant-bg-rgb: 25, 135, 84;
15255
- --lte-card-variant-color: #fff;
15256
- --lte-card-variant-color-rgb: 255, 255, 255;
15092
+ .end > .direct-chat-text {
15093
+ color: var(--lte-direct-chat-color);
15094
+ background-color: var(--lte-direct-chat-bg);
15095
+ border-color: var(--lte-direct-chat-bg);
15096
+ }
15097
+ .end > .direct-chat-text::after, .end > .direct-chat-text::before {
15098
+ border-right-color: var(--lte-direct-chat-bg);
15257
15099
  }
15258
15100
 
15259
- .card-info,
15260
- .bg-info,
15261
- .text-bg-info {
15262
- --lte-card-variant-bg: #0dcaf0;
15263
- --lte-card-variant-bg-rgb: 13, 202, 240;
15264
- --lte-card-variant-color: #000;
15265
- --lte-card-variant-color-rgb: 0, 0, 0;
15101
+ .direct-chat-primary {
15102
+ --lte-direct-chat-color: #fff;
15103
+ --lte-direct-chat-bg: #0d6efd;
15266
15104
  }
15267
15105
 
15268
- .card-warning,
15269
- .bg-warning,
15270
- .text-bg-warning {
15271
- --lte-card-variant-bg: #ffc107;
15272
- --lte-card-variant-bg-rgb: 255, 193, 7;
15273
- --lte-card-variant-color: #000;
15274
- --lte-card-variant-color-rgb: 0, 0, 0;
15106
+ .direct-chat-secondary {
15107
+ --lte-direct-chat-color: #fff;
15108
+ --lte-direct-chat-bg: #6c757d;
15275
15109
  }
15276
15110
 
15277
- .card-danger,
15278
- .bg-danger,
15279
- .text-bg-danger {
15280
- --lte-card-variant-bg: #dc3545;
15281
- --lte-card-variant-bg-rgb: 220, 53, 69;
15282
- --lte-card-variant-color: #fff;
15283
- --lte-card-variant-color-rgb: 255, 255, 255;
15111
+ .direct-chat-success {
15112
+ --lte-direct-chat-color: #fff;
15113
+ --lte-direct-chat-bg: #198754;
15284
15114
  }
15285
15115
 
15286
- .card-light,
15287
- .bg-light,
15288
- .text-bg-light {
15289
- --lte-card-variant-bg: #f8f9fa;
15290
- --lte-card-variant-bg-rgb: 248, 249, 250;
15291
- --lte-card-variant-color: #000;
15292
- --lte-card-variant-color-rgb: 0, 0, 0;
15116
+ .direct-chat-info {
15117
+ --lte-direct-chat-color: #000;
15118
+ --lte-direct-chat-bg: #0dcaf0;
15293
15119
  }
15294
15120
 
15295
- .card-dark,
15296
- .bg-dark,
15297
- .text-bg-dark {
15298
- --lte-card-variant-bg: #212529;
15299
- --lte-card-variant-bg-rgb: 33, 37, 41;
15300
- --lte-card-variant-color: #fff;
15301
- --lte-card-variant-color-rgb: 255, 255, 255;
15121
+ .direct-chat-warning {
15122
+ --lte-direct-chat-color: #000;
15123
+ --lte-direct-chat-bg: #ffc107;
15302
15124
  }
15303
15125
 
15304
- .card-body > .table {
15305
- margin-bottom: 0;
15126
+ .direct-chat-danger {
15127
+ --lte-direct-chat-color: #fff;
15128
+ --lte-direct-chat-bg: #dc3545;
15306
15129
  }
15307
- .card-body > .table > thead > tr > th,
15308
- .card-body > .table > thead > tr > td {
15309
- border-top-width: 0;
15130
+
15131
+ .direct-chat-light {
15132
+ --lte-direct-chat-color: #000;
15133
+ --lte-direct-chat-bg: #f8f9fa;
15310
15134
  }
15311
15135
 
15312
- .table:not(.table-dark) {
15313
- color: inherit;
15136
+ .direct-chat-dark {
15137
+ --lte-direct-chat-color: #fff;
15138
+ --lte-direct-chat-bg: #212529;
15314
15139
  }
15315
- .table.table-head-fixed thead tr:nth-child(1) th {
15316
- position: sticky;
15317
- top: 0;
15318
- z-index: 10;
15319
- background-color: var(--bs-body-bg, #fff);
15320
- border-bottom: 0;
15321
- box-shadow: inset 0 1px 0 var(--bs-border-color, var(--bs-border-color)), inset 0 -1px 0 var(--bs-border-color, var(--bs-border-color));
15140
+
15141
+ .toast-primary {
15142
+ --bs-toast-header-color: #fff;
15143
+ --bs-toast-header-bg: #0d6efd;
15144
+ --bs-toast-header-border-color: #0d6efd;
15145
+ --bs-toast-border-color: #0d6efd;
15146
+ --bs-toast-bg: var(--bs-primary-bg-subtle);
15322
15147
  }
15323
- .table.no-border,
15324
- .table.no-border td,
15325
- .table.no-border th {
15326
- border: 0;
15148
+ .toast-primary .btn-close {
15149
+ --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
15327
15150
  }
15328
- .table.text-center,
15329
- .table.text-center td,
15330
- .table.text-center th {
15331
- text-align: center;
15151
+
15152
+ .toast-secondary {
15153
+ --bs-toast-header-color: #fff;
15154
+ --bs-toast-header-bg: #6c757d;
15155
+ --bs-toast-header-border-color: #6c757d;
15156
+ --bs-toast-border-color: #6c757d;
15157
+ --bs-toast-bg: var(--bs-secondary-bg-subtle);
15332
15158
  }
15333
- .table.table-valign-middle thead > tr > th,
15334
- .table.table-valign-middle thead > tr > td,
15335
- .table.table-valign-middle tbody > tr > th,
15336
- .table.table-valign-middle tbody > tr > td {
15337
- vertical-align: middle;
15159
+ .toast-secondary .btn-close {
15160
+ --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
15338
15161
  }
15339
- .card-body.p-0 .table thead > tr > th:first-of-type,
15340
- .card-body.p-0 .table thead > tr > td:first-of-type,
15341
- .card-body.p-0 .table tfoot > tr > th:first-of-type,
15342
- .card-body.p-0 .table tfoot > tr > td:first-of-type,
15343
- .card-body.p-0 .table tbody > tr > th:first-of-type,
15344
- .card-body.p-0 .table tbody > tr > td:first-of-type {
15345
- padding-right: 1.5rem;
15162
+
15163
+ .toast-success {
15164
+ --bs-toast-header-color: #fff;
15165
+ --bs-toast-header-bg: #198754;
15166
+ --bs-toast-header-border-color: #198754;
15167
+ --bs-toast-border-color: #198754;
15168
+ --bs-toast-bg: var(--bs-success-bg-subtle);
15346
15169
  }
15347
- .card-body.p-0 .table thead > tr > th:last-of-type,
15348
- .card-body.p-0 .table thead > tr > td:last-of-type,
15349
- .card-body.p-0 .table tfoot > tr > th:last-of-type,
15350
- .card-body.p-0 .table tfoot > tr > td:last-of-type,
15351
- .card-body.p-0 .table tbody > tr > th:last-of-type,
15352
- .card-body.p-0 .table tbody > tr > td:last-of-type {
15353
- padding-left: 1.5rem;
15170
+ .toast-success .btn-close {
15171
+ --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
15354
15172
  }
15355
15173
 
15356
- .small-box {
15357
- border-radius: 0.375rem;
15358
- box-shadow: 0 0 1px rgba(var(--bs-body-color-rgb), 0.125), 0 1px 3px rgba(var(--bs-body-color-rgb), 0.2);
15359
- position: relative;
15360
- display: block;
15361
- margin-bottom: 1.25rem;
15362
- --bs-link-color-rgb: none;
15363
- --bs-link-hover-color-rgb: none;
15364
- --bs-heading-color: none;
15174
+ .toast-info {
15175
+ --bs-toast-header-color: #000;
15176
+ --bs-toast-header-bg: #0dcaf0;
15177
+ --bs-toast-header-border-color: #0dcaf0;
15178
+ --bs-toast-border-color: #0dcaf0;
15179
+ --bs-toast-bg: var(--bs-info-bg-subtle);
15365
15180
  }
15366
- .small-box > .inner {
15367
- padding: 10px;
15181
+
15182
+ .toast-warning {
15183
+ --bs-toast-header-color: #000;
15184
+ --bs-toast-header-bg: #ffc107;
15185
+ --bs-toast-header-border-color: #ffc107;
15186
+ --bs-toast-border-color: #ffc107;
15187
+ --bs-toast-bg: var(--bs-warning-bg-subtle);
15368
15188
  }
15369
- .small-box > .small-box-footer {
15370
- position: relative;
15371
- z-index: 10;
15372
- display: block;
15373
- padding: 3px 0;
15374
- text-align: center;
15375
- background-color: rgba(0, 0, 0, 0.07);
15189
+
15190
+ .toast-danger {
15191
+ --bs-toast-header-color: #fff;
15192
+ --bs-toast-header-bg: #dc3545;
15193
+ --bs-toast-header-border-color: #dc3545;
15194
+ --bs-toast-border-color: #dc3545;
15195
+ --bs-toast-bg: var(--bs-danger-bg-subtle);
15376
15196
  }
15377
- .small-box > .small-box-footer:hover {
15378
- background-color: rgba(0, 0, 0, 0.1);
15197
+ .toast-danger .btn-close {
15198
+ --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
15379
15199
  }
15380
- .small-box h3, .small-box .h3 {
15381
- font-size: calc(1.345rem + 1.14vw);
15200
+
15201
+ .toast-light {
15202
+ --bs-toast-header-color: #000;
15203
+ --bs-toast-header-bg: #f8f9fa;
15204
+ --bs-toast-header-border-color: #f8f9fa;
15205
+ --bs-toast-border-color: #f8f9fa;
15206
+ --bs-toast-bg: var(--bs-light-bg-subtle);
15382
15207
  }
15383
- @media (min-width: 1200px) {
15384
- .small-box h3, .small-box .h3 {
15385
- font-size: 2.2rem;
15386
- }
15208
+
15209
+ .toast-dark {
15210
+ --bs-toast-header-color: #fff;
15211
+ --bs-toast-header-bg: #212529;
15212
+ --bs-toast-header-border-color: #212529;
15213
+ --bs-toast-border-color: #212529;
15214
+ --bs-toast-bg: var(--bs-dark-bg-subtle);
15387
15215
  }
15388
- .small-box h3, .small-box .h3 {
15389
- padding: 0;
15390
- margin: 0 0 10px;
15391
- font-weight: 700;
15392
- white-space: nowrap;
15216
+ .toast-dark .btn-close {
15217
+ --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
15393
15218
  }
15394
- @media (min-width: 992px) {
15395
- .col-xl-2 .small-box h3, .col-xl-2 .small-box .h3, .col-lg-2 .small-box h3, .col-lg-2 .small-box .h3, .col-md-2 .small-box h3, .col-md-2 .small-box .h3 {
15396
- font-size: calc(1.285rem + 0.42vw);
15397
- }
15219
+
15220
+ [data-bs-theme=dark] .toast-info .btn-close {
15221
+ --bs-btn-close-white-filter: none;
15398
15222
  }
15399
- @media (min-width: 992px) and (min-width: 1200px) {
15400
- .col-xl-2 .small-box h3, .col-xl-2 .small-box .h3, .col-lg-2 .small-box h3, .col-lg-2 .small-box .h3, .col-md-2 .small-box h3, .col-md-2 .small-box .h3 {
15401
- font-size: 1.6rem;
15402
- }
15223
+ [data-bs-theme=dark] .toast-warning .btn-close {
15224
+ --bs-btn-close-white-filter: none;
15403
15225
  }
15404
- @media (min-width: 992px) {
15405
- .col-xl-3 .small-box h3, .col-xl-3 .small-box .h3, .col-lg-3 .small-box h3, .col-lg-3 .small-box .h3, .col-md-3 .small-box h3, .col-md-3 .small-box .h3 {
15406
- font-size: calc(1.285rem + 0.42vw);
15407
- }
15226
+ [data-bs-theme=dark] .toast-light .btn-close {
15227
+ --bs-btn-close-white-filter: none;
15408
15228
  }
15409
- @media (min-width: 992px) and (min-width: 1200px) {
15410
- .col-xl-3 .small-box h3, .col-xl-3 .small-box .h3, .col-lg-3 .small-box h3, .col-lg-3 .small-box .h3, .col-md-3 .small-box h3, .col-md-3 .small-box .h3 {
15411
- font-size: 1.6rem;
15412
- }
15229
+ .login-logo,
15230
+ .register-logo {
15231
+ margin-bottom: 0.9rem;
15232
+ font-size: 2.1rem;
15233
+ font-weight: 300;
15234
+ text-align: center;
15413
15235
  }
15414
- @media (min-width: 1200px) {
15415
- .col-xl-2 .small-box h3, .col-xl-2 .small-box .h3, .col-lg-2 .small-box h3, .col-lg-2 .small-box .h3, .col-md-2 .small-box h3, .col-md-2 .small-box .h3 {
15416
- font-size: calc(1.345rem + 1.14vw);
15417
- }
15236
+ .login-logo a,
15237
+ .register-logo a {
15238
+ color: var(--bs-secondary-color);
15239
+ text-decoration: none;
15418
15240
  }
15419
- @media (min-width: 1200px) and (min-width: 1200px) {
15420
- .col-xl-2 .small-box h3, .col-xl-2 .small-box .h3, .col-lg-2 .small-box h3, .col-lg-2 .small-box .h3, .col-md-2 .small-box h3, .col-md-2 .small-box .h3 {
15421
- font-size: 2.2rem;
15422
- }
15241
+
15242
+ .login-page,
15243
+ .register-page {
15244
+ display: flex;
15245
+ flex-direction: column;
15246
+ align-items: center;
15247
+ justify-content: center;
15248
+ min-height: 100vh;
15423
15249
  }
15424
- @media (min-width: 1200px) {
15425
- .col-xl-3 .small-box h3, .col-xl-3 .small-box .h3, .col-lg-3 .small-box h3, .col-lg-3 .small-box .h3, .col-md-3 .small-box h3, .col-md-3 .small-box .h3 {
15426
- font-size: calc(1.345rem + 1.14vw);
15427
- }
15250
+
15251
+ .login-box,
15252
+ .register-box {
15253
+ width: 400px;
15428
15254
  }
15429
- @media (min-width: 1200px) and (min-width: 1200px) {
15430
- .col-xl-3 .small-box h3, .col-xl-3 .small-box .h3, .col-lg-3 .small-box h3, .col-lg-3 .small-box .h3, .col-md-3 .small-box h3, .col-md-3 .small-box .h3 {
15431
- font-size: 2.2rem;
15255
+ @media (max-width: 576px) {
15256
+ .login-box,
15257
+ .register-box {
15258
+ width: 90%;
15259
+ margin-top: 0.5rem;
15432
15260
  }
15433
15261
  }
15434
- .small-box p {
15435
- font-size: 1rem;
15262
+ .login-box .card,
15263
+ .register-box .card {
15264
+ margin-bottom: 0;
15436
15265
  }
15437
- .small-box p > small, .small-box p > .small {
15438
- display: block;
15439
- margin-top: 5px;
15440
- font-size: 0.9rem;
15441
- color: #f8f9fa;
15266
+
15267
+ .login-card-body,
15268
+ .register-card-body {
15269
+ padding: 20px;
15270
+ color: var(--bs-secondary-color);
15271
+ background-color: var(--bs-body-bg);
15272
+ border-top: 0;
15442
15273
  }
15443
- .small-box h3, .small-box .h3,
15444
- .small-box p {
15445
- z-index: 5;
15274
+ .login-card-body .input-group .form-control:focus,
15275
+ .register-card-body .input-group .form-control:focus {
15276
+ box-shadow: none;
15446
15277
  }
15447
- .small-box .small-box-icon {
15448
- position: absolute;
15449
- top: 15px;
15450
- left: 15px;
15451
- z-index: 0;
15452
- height: 70px;
15453
- font-size: 70px;
15454
- color: rgba(0, 0, 0, 0.15);
15455
- transition: transform 0.3s linear;
15278
+ .login-card-body .input-group .form-control:focus ~ .input-group-prepend .input-group-text,
15279
+ .login-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text,
15280
+ .register-card-body .input-group .form-control:focus ~ .input-group-prepend .input-group-text,
15281
+ .register-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text {
15282
+ border-color: rgb(134, 182.5, 254);
15283
+ }
15284
+ .login-card-body .input-group .form-control.is-valid:focus,
15285
+ .register-card-body .input-group .form-control.is-valid:focus {
15286
+ box-shadow: none;
15287
+ }
15288
+ .login-card-body .input-group .form-control.is-valid ~ .input-group-prepend .input-group-text,
15289
+ .login-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text,
15290
+ .register-card-body .input-group .form-control.is-valid ~ .input-group-prepend .input-group-text,
15291
+ .register-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text {
15292
+ border-color: #198754;
15293
+ }
15294
+ .login-card-body .input-group .form-control.is-invalid:focus,
15295
+ .register-card-body .input-group .form-control.is-invalid:focus {
15296
+ box-shadow: none;
15297
+ }
15298
+ .login-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text,
15299
+ .register-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text {
15300
+ border-color: #dc3545;
15301
+ }
15302
+ .login-card-body .input-group .input-group-text,
15303
+ .register-card-body .input-group .input-group-text {
15304
+ color: var(--bs-secondary-color);
15305
+ background-color: transparent;
15306
+ border-top-left-radius: 0.375rem;
15307
+ border-bottom-left-radius: 0.375rem;
15308
+ transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
15456
15309
  }
15457
15310
  @media (prefers-reduced-motion: reduce) {
15458
- .small-box .small-box-icon {
15311
+ .login-card-body .input-group .input-group-text,
15312
+ .register-card-body .input-group .input-group-text {
15459
15313
  transition: none;
15460
15314
  }
15461
15315
  }
15462
- .small-box:hover .small-box-icon {
15463
- transform: scale(1.1);
15316
+
15317
+ .login-box-msg,
15318
+ .register-box-msg {
15319
+ padding: 0 20px 20px;
15320
+ margin: 0;
15321
+ text-align: center;
15464
15322
  }
15465
15323
 
15466
- @media (max-width: 575.98px) {
15467
- .small-box {
15468
- text-align: center;
15469
- }
15470
- .small-box .small-box-icon {
15471
- display: none;
15472
- }
15473
- .small-box p {
15474
- font-size: 12px;
15475
- }
15324
+ .social-auth-links {
15325
+ margin: 10px 0;
15476
15326
  }
15477
- .info-box {
15478
- box-shadow: 0 0 1px rgba(var(--bs-body-color-rgb), 0.125), 0 1px 3px rgba(var(--bs-body-color-rgb), 0.2);
15479
- border-radius: 0.375rem;
15327
+
15328
+ .lockscreen .lockscreen-name {
15329
+ font-weight: 600;
15330
+ text-align: center;
15331
+ }
15332
+ .lockscreen .lockscreen-logo {
15333
+ margin-bottom: 25px;
15334
+ font-size: 35px;
15335
+ font-weight: 300;
15336
+ text-align: center;
15337
+ }
15338
+ .lockscreen .lockscreen-logo a {
15339
+ color: var(--bs-emphasis-color);
15340
+ text-decoration: none;
15341
+ }
15342
+ .lockscreen .lockscreen-wrapper {
15343
+ max-width: 400px;
15344
+ margin: 0 auto;
15345
+ margin-top: 10%;
15346
+ }
15347
+ .lockscreen .lockscreen-item {
15480
15348
  position: relative;
15481
- display: flex;
15482
- width: 100%;
15483
- min-height: 80px;
15484
- padding: 0.5rem;
15485
- margin-bottom: 1rem;
15486
- color: var(--bs-body-color);
15349
+ width: 290px;
15350
+ padding: 0;
15351
+ margin: 10px auto 30px;
15487
15352
  background-color: var(--bs-body-bg);
15353
+ border-radius: 4px;
15488
15354
  }
15489
- .info-box .progress {
15490
- height: 2px;
15491
- margin: 5px 0;
15492
- background-color: rgba(var(--lte-card-variant-color-rgb), 0.125);
15493
- }
15494
- .info-box .progress .progress-bar {
15495
- background-color: var(--lte-card-variant-color);
15355
+ .lockscreen .lockscreen-image {
15356
+ position: absolute;
15357
+ top: -25px;
15358
+ right: -10px;
15359
+ z-index: 10;
15360
+ padding: 5px;
15361
+ background-color: var(--bs-body-bg);
15362
+ border-radius: 50%;
15496
15363
  }
15497
- .info-box .info-box-icon {
15498
- display: flex;
15499
- align-items: center;
15500
- justify-content: center;
15364
+ .lockscreen .lockscreen-image > img {
15365
+ border-radius: 50%;
15501
15366
  width: 70px;
15502
- font-size: 1.875rem;
15503
- text-align: center;
15504
- border-radius: 0.375rem;
15367
+ height: 70px;
15505
15368
  }
15506
- .info-box .info-box-icon > img {
15507
- max-width: 100%;
15369
+ .lockscreen .lockscreen-credentials {
15370
+ margin-right: 70px;
15508
15371
  }
15509
- .info-box .info-box-content {
15510
- display: flex;
15511
- flex: 1;
15512
- flex-direction: column;
15513
- justify-content: center;
15372
+ .lockscreen .lockscreen-credentials .form-control {
15373
+ border: 0;
15374
+ }
15375
+ .lockscreen .lockscreen-credentials .btn {
15514
15376
  padding: 0 10px;
15515
- line-height: 1.8;
15377
+ border: 0;
15516
15378
  }
15517
- .info-box .info-box-number {
15518
- display: block;
15519
- margin-top: 0.25rem;
15520
- font-weight: 700;
15379
+ .lockscreen .lockscreen-footer {
15380
+ margin-top: 10px;
15521
15381
  }
15522
- .info-box .progress-description,
15523
- .info-box .info-box-text {
15524
- display: block;
15525
- overflow: hidden;
15526
- text-overflow: ellipsis;
15527
- white-space: nowrap;
15382
+
15383
+ .img-size-64,
15384
+ .img-size-50,
15385
+ .img-size-32 {
15386
+ height: auto;
15528
15387
  }
15529
- .info-box .info-box-more {
15530
- display: block;
15388
+
15389
+ .img-size-64 {
15390
+ width: 64px;
15531
15391
  }
15532
- .info-box .progress-description {
15533
- margin: 0;
15534
- }
15535
- @media (min-width: 768px) {
15536
- .col-xl-2 .info-box .progress-description, .col-lg-2 .info-box .progress-description, .col-md-2 .info-box .progress-description {
15537
- display: none;
15538
- }
15539
- .col-xl-3 .info-box .progress-description, .col-lg-3 .info-box .progress-description, .col-md-3 .info-box .progress-description {
15540
- display: none;
15541
- }
15542
- }
15543
- @media (min-width: 992px) {
15544
- .col-xl-2 .info-box .progress-description, .col-lg-2 .info-box .progress-description, .col-md-2 .info-box .progress-description {
15545
- font-size: 0.75rem;
15546
- display: block;
15547
- }
15548
- .col-xl-3 .info-box .progress-description, .col-lg-3 .info-box .progress-description, .col-md-3 .info-box .progress-description {
15549
- font-size: 0.75rem;
15550
- display: block;
15551
- }
15552
- }
15553
- @media (min-width: 1200px) {
15554
- .col-xl-2 .info-box .progress-description, .col-lg-2 .info-box .progress-description, .col-md-2 .info-box .progress-description {
15555
- font-size: 1rem;
15556
- display: block;
15557
- }
15558
- .col-xl-3 .info-box .progress-description, .col-lg-3 .info-box .progress-description, .col-md-3 .info-box .progress-description {
15559
- font-size: 1rem;
15560
- display: block;
15561
- }
15392
+
15393
+ .img-size-50 {
15394
+ width: 50px;
15562
15395
  }
15563
15396
 
15564
- .timeline {
15565
- position: relative;
15566
- padding: 0;
15567
- margin: 0 0 45px;
15397
+ .img-size-32 {
15398
+ width: 32px;
15568
15399
  }
15569
- .timeline::before {
15570
- border-radius: 0.375rem;
15400
+
15401
+ /* ==========================================================================
15402
+ AdminLTE Accessibility Styles - WCAG 2.1 AA Compliance
15403
+ ========================================================================== */
15404
+ /* Skip Links - WCAG 2.4.1: Bypass Blocks */
15405
+ .skip-link {
15571
15406
  position: absolute;
15572
- top: 0;
15573
- bottom: 0;
15574
- right: 31px;
15575
- width: 4px;
15576
- margin: 0;
15577
- content: "";
15578
- background-color: var(--bs-border-color);
15579
- }
15580
- .timeline > div::before, .timeline > div::after {
15581
- display: table;
15582
- content: "";
15583
- }
15584
- .timeline > div {
15585
- position: relative;
15586
- margin-left: 10px;
15587
- margin-bottom: 15px;
15588
- }
15589
- .timeline > div > .timeline-item {
15590
- box-shadow: 0 0 1px rgba(var(--bs-body-color-rgb), 0.125), 0 1px 3px rgba(var(--bs-body-color-rgb), 0.2);
15591
- border-radius: 0.375rem;
15592
- position: relative;
15593
- padding: 0;
15594
- margin-top: 0;
15595
- margin-left: 15px;
15596
- margin-right: 60px;
15597
- color: var(--bs-body-color);
15598
- background-color: var(--bs-body-bg);
15599
- }
15600
- .timeline > div > .timeline-item > .time {
15601
- float: left;
15602
- padding: 10px;
15603
- font-size: 12px;
15604
- color: var(--bs-secondary-color);
15605
- }
15606
- .timeline > div > .timeline-item > .timeline-header {
15607
- padding: 10px;
15608
- margin: 0;
15609
- font-size: 16px;
15610
- line-height: 1.1;
15611
- color: var(--bs-secondary-color);
15612
- border-bottom: 1px solid var(--bs-border-color);
15613
- }
15614
- .timeline > div > .timeline-item > .timeline-header > a {
15407
+ top: -40px;
15408
+ right: 6px;
15409
+ z-index: 999999;
15410
+ padding: 8px 16px;
15615
15411
  font-weight: 600;
15412
+ color: var(--bs-white);
15616
15413
  text-decoration: none;
15414
+ background: var(--bs-primary);
15617
15415
  }
15618
- .timeline > div > .timeline-item > .timeline-body,
15619
- .timeline > div > .timeline-item > .timeline-footer {
15620
- padding: 10px;
15621
- }
15622
- .timeline > div > .timeline-item > .timeline-body > img {
15623
- margin: 10px;
15624
- }
15625
- .timeline > div > .timeline-item > .timeline-body > dl,
15626
- .timeline > div > .timeline-item > .timeline-body ol,
15627
- .timeline > div > .timeline-item > .timeline-body ul {
15628
- margin: 0;
15629
- }
15630
- .timeline > div .timeline-icon {
15631
- position: absolute;
15416
+ .skip-link:focus {
15632
15417
  top: 0;
15633
- right: 18px;
15634
- width: 30px;
15635
- height: 30px;
15636
- font-size: 16px;
15637
- line-height: 30px;
15638
- text-align: center;
15639
- background-color: var(--bs-secondary-bg);
15640
- border-radius: 50%;
15641
- }
15642
- .timeline > .time-label > span {
15643
- border-radius: 4px;
15644
- display: inline-block;
15645
- padding: 5px;
15646
- font-weight: 600;
15647
- background-color: var(--bs-body-bg);
15648
- }
15649
-
15650
- .timeline-inverse > div > .timeline-item {
15651
- box-shadow: none;
15652
- background-color: var(--bs-tertiary-bg);
15653
- border: 1px solid var(--bs-border-color);
15654
- }
15655
- .timeline-inverse > div > .timeline-item > .timeline-header {
15656
- border-bottom-color: var(--bs-border-color);
15657
- }
15658
-
15659
- .direct-chat .card-body {
15660
- position: relative;
15661
- padding: 0;
15662
- overflow-x: hidden;
15663
- }
15664
- .direct-chat.chat-pane-open .direct-chat-contacts {
15665
- transform: translate(0, 0);
15666
- }
15667
- .direct-chat.timestamp-light .direct-chat-timestamp {
15668
- color: rgba(var(--bs-body-color-rgb), 0.65);
15669
- }
15670
- .direct-chat.timestamp-dark .direct-chat-timestamp {
15671
- color: rgba(var(--bs-body-color-rgb), 0.9);
15672
- }
15673
-
15674
- .direct-chat-messages {
15675
- height: 250px;
15676
- padding: 10px;
15677
- overflow: auto;
15678
- transform: translate(0, 0);
15418
+ outline: 3px solid var(--bs-warning);
15419
+ outline-offset: 2px;
15679
15420
  }
15680
-
15681
- .direct-chat-msg,
15682
- .direct-chat-text {
15683
- display: block;
15421
+ .skip-link:hover {
15422
+ color: var(--bs-white);
15423
+ text-decoration: none;
15424
+ background: var(--bs-primary-emphasis);
15684
15425
  }
15685
15426
 
15686
- .direct-chat-msg::after {
15687
- display: block;
15688
- clear: both;
15689
- content: "";
15690
- }
15691
- .direct-chat-msg {
15692
- margin-bottom: 10px;
15427
+ /* Enhanced Focus Indicators - WCAG 2.4.7: Focus Visible */
15428
+ .focus-enhanced:focus {
15429
+ outline: 3px solid var(--bs-focus-ring-color, #0d6efd);
15430
+ outline-offset: 2px;
15431
+ box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
15693
15432
  }
15694
15433
 
15695
- .direct-chat-messages,
15696
- .direct-chat-contacts {
15697
- transition: transform 0.5s ease-in-out;
15434
+ /* High Contrast Mode Support */
15435
+ @media (prefers-contrast: high) {
15436
+ .card {
15437
+ border: 2px solid;
15438
+ }
15439
+ .btn {
15440
+ border-width: 2px;
15441
+ }
15442
+ .nav-link {
15443
+ border: 1px solid transparent;
15444
+ }
15445
+ .nav-link:hover, .nav-link:focus {
15446
+ border-color: currentcolor;
15447
+ }
15698
15448
  }
15449
+ /* Reduced Motion Support - WCAG 2.3.3: Animation from Interactions */
15699
15450
  @media (prefers-reduced-motion: reduce) {
15700
- .direct-chat-messages,
15701
- .direct-chat-contacts {
15702
- transition: none;
15451
+ *,
15452
+ *::before,
15453
+ *::after {
15454
+ transition-duration: 0.01ms !important;
15455
+ animation-duration: 0.01ms !important;
15456
+ animation-iteration-count: 1 !important;
15457
+ scroll-behavior: auto !important;
15703
15458
  }
15704
- }
15705
-
15706
- .direct-chat-text {
15707
- border-radius: 0.5rem;
15708
- position: relative;
15709
- padding: 5px 10px;
15710
- margin: 5px 50px 0 0;
15711
- color: var(--bs-emphasis-color);
15712
- background-color: var(--bs-secondary-bg);
15713
- border: 1px solid var(--bs-border-color);
15714
- }
15715
- .direct-chat-text::after, .direct-chat-text::before {
15716
- position: absolute;
15717
- top: 15px;
15718
- left: 100%;
15719
- width: 0;
15720
- height: 0;
15721
- pointer-events: none;
15722
- content: " ";
15723
- border: solid transparent;
15724
- border-left-color: var(--bs-border-color);
15725
- }
15726
- .direct-chat-text::after {
15727
- margin-top: -5px;
15728
- border-width: 5px;
15729
- }
15730
- .direct-chat-text::before {
15731
- margin-top: -6px;
15732
- border-width: 6px;
15733
- }
15734
- .end .direct-chat-text {
15735
- margin-left: 50px;
15736
- margin-right: 0;
15737
- }
15738
- .end .direct-chat-text::after, .end .direct-chat-text::before {
15739
- left: auto;
15740
- right: 100%;
15741
- border-left-color: transparent;
15742
- border-right-color: var(--bs-border-color);
15743
- }
15744
-
15745
- .direct-chat-img {
15746
- border-radius: 50%;
15747
- float: right;
15748
- width: 40px;
15749
- height: 40px;
15750
- }
15751
- .end .direct-chat-img {
15752
- float: left;
15753
- }
15754
-
15755
- .direct-chat-infos {
15756
- display: block;
15757
- margin-bottom: 2px;
15758
- font-size: 0.875rem;
15759
- }
15760
-
15761
- .direct-chat-name {
15762
- font-weight: 600;
15763
- }
15764
-
15765
- .direct-chat-timestamp {
15766
- color: rgba(var(--bs-body-color-rgb), 0.75);
15767
- }
15768
-
15769
- .direct-chat-contacts-open .direct-chat-contacts {
15770
- transform: translate(0, 0);
15771
- }
15772
-
15773
- .direct-chat-contacts {
15774
- position: absolute;
15775
- top: 0;
15776
- bottom: 0;
15777
- width: 100%;
15778
- height: 250px;
15779
- overflow: auto;
15780
- color: var(--bs-body-bg);
15781
- background-color: var(--bs-body-color);
15782
- transform: translate(-101%, 0);
15783
- }
15784
-
15785
- .direct-chat-contacts-light {
15786
- background-color: var(--bs-light-bg-subtle);
15787
- }
15788
- .direct-chat-contacts-light .contacts-list-name {
15789
- color: var(--bs-body-color);
15790
- }
15791
- .direct-chat-contacts-light .contacts-list-date {
15792
- color: var(--bs-secondary-color);
15793
- }
15794
- .direct-chat-contacts-light .contacts-list-msg {
15795
- color: var(--bs-secondary-color);
15796
- }
15797
-
15798
- .contacts-list {
15799
- padding-right: 0;
15800
- list-style: none;
15801
- }
15802
- .contacts-list > li::after {
15803
- display: block;
15804
- clear: both;
15805
- content: "";
15806
- }
15807
- .contacts-list > li {
15808
- padding: 10px;
15809
- margin: 0;
15810
- text-decoration: none;
15811
- border-bottom: 1px solid rgba(0, 0, 0, 0.2);
15812
- }
15813
- .contacts-list > li:last-of-type {
15814
- border-bottom: 0;
15815
- }
15816
- .contacts-list > li a {
15817
- text-decoration: none;
15818
- }
15819
-
15820
- .contacts-list-img {
15821
- border-radius: 50%;
15822
- float: right;
15823
- width: 40px;
15824
- }
15825
-
15826
- .contacts-list-info {
15827
- margin-right: 45px;
15828
- color: var(--bs-body-bg);
15829
- }
15830
-
15831
- .contacts-list-name,
15832
- .contacts-list-status {
15833
- display: block;
15834
- }
15835
-
15836
- .contacts-list-name {
15837
- font-weight: 600;
15838
- }
15839
-
15840
- .contacts-list-status {
15841
- font-size: 0.875rem;
15842
- }
15843
-
15844
- .contacts-list-date {
15845
- font-weight: 400;
15846
- color: var(--bs-secondary-bg);
15847
- }
15848
-
15849
- .contacts-list-msg {
15850
- color: var(--bs-secondary-bg);
15851
- }
15852
-
15853
- .end > .direct-chat-text {
15854
- color: var(--lte-direct-chat-color);
15855
- background-color: var(--lte-direct-chat-bg);
15856
- border-color: var(--lte-direct-chat-bg);
15857
- }
15858
- .end > .direct-chat-text::after, .end > .direct-chat-text::before {
15859
- border-right-color: var(--lte-direct-chat-bg);
15860
- }
15861
-
15862
- .direct-chat-primary {
15863
- --lte-direct-chat-color: #fff;
15864
- --lte-direct-chat-bg: #0d6efd;
15865
- }
15866
-
15867
- .direct-chat-secondary {
15868
- --lte-direct-chat-color: #fff;
15869
- --lte-direct-chat-bg: #6c757d;
15870
- }
15871
-
15872
- .direct-chat-success {
15873
- --lte-direct-chat-color: #fff;
15874
- --lte-direct-chat-bg: #198754;
15875
- }
15876
-
15877
- .direct-chat-info {
15878
- --lte-direct-chat-color: #000;
15879
- --lte-direct-chat-bg: #0dcaf0;
15880
- }
15881
-
15882
- .direct-chat-warning {
15883
- --lte-direct-chat-color: #000;
15884
- --lte-direct-chat-bg: #ffc107;
15885
- }
15886
-
15887
- .direct-chat-danger {
15888
- --lte-direct-chat-color: #fff;
15889
- --lte-direct-chat-bg: #dc3545;
15890
- }
15891
-
15892
- .direct-chat-light {
15893
- --lte-direct-chat-color: #000;
15894
- --lte-direct-chat-bg: #f8f9fa;
15895
- }
15896
-
15897
- .direct-chat-dark {
15898
- --lte-direct-chat-color: #fff;
15899
- --lte-direct-chat-bg: #212529;
15900
- }
15901
-
15902
- .toast-primary {
15903
- --bs-toast-header-color: #fff;
15904
- --bs-toast-header-bg: #0d6efd;
15905
- --bs-toast-header-border-color: #0d6efd;
15906
- --bs-toast-border-color: #0d6efd;
15907
- --bs-toast-bg: var(--bs-primary-bg-subtle);
15908
- }
15909
- .toast-primary .btn-close {
15910
- --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
15911
- }
15912
-
15913
- .toast-secondary {
15914
- --bs-toast-header-color: #fff;
15915
- --bs-toast-header-bg: #6c757d;
15916
- --bs-toast-header-border-color: #6c757d;
15917
- --bs-toast-border-color: #6c757d;
15918
- --bs-toast-bg: var(--bs-secondary-bg-subtle);
15919
- }
15920
- .toast-secondary .btn-close {
15921
- --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
15922
- }
15923
-
15924
- .toast-success {
15925
- --bs-toast-header-color: #fff;
15926
- --bs-toast-header-bg: #198754;
15927
- --bs-toast-header-border-color: #198754;
15928
- --bs-toast-border-color: #198754;
15929
- --bs-toast-bg: var(--bs-success-bg-subtle);
15930
- }
15931
- .toast-success .btn-close {
15932
- --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
15933
- }
15934
-
15935
- .toast-info {
15936
- --bs-toast-header-color: #000;
15937
- --bs-toast-header-bg: #0dcaf0;
15938
- --bs-toast-header-border-color: #0dcaf0;
15939
- --bs-toast-border-color: #0dcaf0;
15940
- --bs-toast-bg: var(--bs-info-bg-subtle);
15941
- }
15942
-
15943
- .toast-warning {
15944
- --bs-toast-header-color: #000;
15945
- --bs-toast-header-bg: #ffc107;
15946
- --bs-toast-header-border-color: #ffc107;
15947
- --bs-toast-border-color: #ffc107;
15948
- --bs-toast-bg: var(--bs-warning-bg-subtle);
15949
- }
15950
-
15951
- .toast-danger {
15952
- --bs-toast-header-color: #fff;
15953
- --bs-toast-header-bg: #dc3545;
15954
- --bs-toast-header-border-color: #dc3545;
15955
- --bs-toast-border-color: #dc3545;
15956
- --bs-toast-bg: var(--bs-danger-bg-subtle);
15957
- }
15958
- .toast-danger .btn-close {
15959
- --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
15960
- }
15961
-
15962
- .toast-light {
15963
- --bs-toast-header-color: #000;
15964
- --bs-toast-header-bg: #f8f9fa;
15965
- --bs-toast-header-border-color: #f8f9fa;
15966
- --bs-toast-border-color: #f8f9fa;
15967
- --bs-toast-bg: var(--bs-light-bg-subtle);
15968
- }
15969
-
15970
- .toast-dark {
15971
- --bs-toast-header-color: #fff;
15972
- --bs-toast-header-bg: #212529;
15973
- --bs-toast-header-border-color: #212529;
15974
- --bs-toast-border-color: #212529;
15975
- --bs-toast-bg: var(--bs-dark-bg-subtle);
15976
- }
15977
- .toast-dark .btn-close {
15978
- --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
15979
- }
15980
-
15981
- [data-bs-theme=dark] .toast-info .btn-close {
15982
- --bs-btn-close-white-filter: none;
15983
- }
15984
- [data-bs-theme=dark] .toast-warning .btn-close {
15985
- --bs-btn-close-white-filter: none;
15986
- }
15987
- [data-bs-theme=dark] .toast-light .btn-close {
15988
- --bs-btn-close-white-filter: none;
15989
- }
15990
- .login-logo,
15991
- .register-logo {
15992
- margin-bottom: 0.9rem;
15993
- font-size: 2.1rem;
15994
- font-weight: 300;
15995
- text-align: center;
15996
- }
15997
- .login-logo a,
15998
- .register-logo a {
15999
- color: var(--bs-secondary-color);
16000
- text-decoration: none;
16001
- }
16002
-
16003
- .login-page,
16004
- .register-page {
16005
- display: flex;
16006
- flex-direction: column;
16007
- align-items: center;
16008
- justify-content: center;
16009
- min-height: 100vh;
16010
- }
16011
-
16012
- .login-box,
16013
- .register-box {
16014
- width: 400px;
16015
- }
16016
- @media (max-width: 576px) {
16017
- .login-box,
16018
- .register-box {
16019
- width: 90%;
16020
- margin-top: 0.5rem;
16021
- }
16022
- }
16023
- .login-box .card,
16024
- .register-box .card {
16025
- margin-bottom: 0;
16026
- }
16027
-
16028
- .login-card-body,
16029
- .register-card-body {
16030
- padding: 20px;
16031
- color: var(--bs-secondary-color);
16032
- background-color: var(--bs-body-bg);
16033
- border-top: 0;
16034
- }
16035
- .login-card-body .input-group .form-control:focus,
16036
- .register-card-body .input-group .form-control:focus {
16037
- box-shadow: none;
16038
- }
16039
- .login-card-body .input-group .form-control:focus ~ .input-group-prepend .input-group-text,
16040
- .login-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text,
16041
- .register-card-body .input-group .form-control:focus ~ .input-group-prepend .input-group-text,
16042
- .register-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text {
16043
- border-color: rgb(134, 182.5, 254);
16044
- }
16045
- .login-card-body .input-group .form-control.is-valid:focus,
16046
- .register-card-body .input-group .form-control.is-valid:focus {
16047
- box-shadow: none;
16048
- }
16049
- .login-card-body .input-group .form-control.is-valid ~ .input-group-prepend .input-group-text,
16050
- .login-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text,
16051
- .register-card-body .input-group .form-control.is-valid ~ .input-group-prepend .input-group-text,
16052
- .register-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text {
16053
- border-color: #198754;
16054
- }
16055
- .login-card-body .input-group .form-control.is-invalid:focus,
16056
- .register-card-body .input-group .form-control.is-invalid:focus {
16057
- box-shadow: none;
16058
- }
16059
- .login-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text,
16060
- .register-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text {
16061
- border-color: #dc3545;
16062
- }
16063
- .login-card-body .input-group .input-group-text,
16064
- .register-card-body .input-group .input-group-text {
16065
- color: var(--bs-secondary-color);
16066
- background-color: transparent;
16067
- border-top-left-radius: 0.375rem;
16068
- border-bottom-left-radius: 0.375rem;
16069
- transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
16070
- }
16071
- @media (prefers-reduced-motion: reduce) {
16072
- .login-card-body .input-group .input-group-text,
16073
- .register-card-body .input-group .input-group-text {
16074
- transition: none;
16075
- }
16076
- }
16077
-
16078
- .login-box-msg,
16079
- .register-box-msg {
16080
- padding: 0 20px 20px;
16081
- margin: 0;
16082
- text-align: center;
16083
- }
16084
-
16085
- .social-auth-links {
16086
- margin: 10px 0;
16087
- }
16088
-
16089
- .lockscreen .lockscreen-name {
16090
- font-weight: 600;
16091
- text-align: center;
16092
- }
16093
- .lockscreen .lockscreen-logo {
16094
- margin-bottom: 25px;
16095
- font-size: 35px;
16096
- font-weight: 300;
16097
- text-align: center;
16098
- }
16099
- .lockscreen .lockscreen-logo a {
16100
- color: var(--bs-emphasis-color);
16101
- text-decoration: none;
16102
- }
16103
- .lockscreen .lockscreen-wrapper {
16104
- max-width: 400px;
16105
- margin: 0 auto;
16106
- margin-top: 10%;
16107
- }
16108
- .lockscreen .lockscreen-item {
16109
- position: relative;
16110
- width: 290px;
16111
- padding: 0;
16112
- margin: 10px auto 30px;
16113
- background-color: var(--bs-body-bg);
16114
- border-radius: 4px;
16115
- }
16116
- .lockscreen .lockscreen-image {
16117
- position: absolute;
16118
- top: -25px;
16119
- right: -10px;
16120
- z-index: 10;
16121
- padding: 5px;
16122
- background-color: var(--bs-body-bg);
16123
- border-radius: 50%;
16124
- }
16125
- .lockscreen .lockscreen-image > img {
16126
- border-radius: 50%;
16127
- width: 70px;
16128
- height: 70px;
16129
- }
16130
- .lockscreen .lockscreen-credentials {
16131
- margin-right: 70px;
16132
- }
16133
- .lockscreen .lockscreen-credentials .form-control {
16134
- border: 0;
16135
- }
16136
- .lockscreen .lockscreen-credentials .btn {
16137
- padding: 0 10px;
16138
- border: 0;
16139
- }
16140
- .lockscreen .lockscreen-footer {
16141
- margin-top: 10px;
16142
- }
16143
-
16144
- .img-size-64,
16145
- .img-size-50,
16146
- .img-size-32 {
16147
- height: auto;
16148
- }
16149
-
16150
- .img-size-64 {
16151
- width: 64px;
16152
- }
16153
-
16154
- .img-size-50 {
16155
- width: 50px;
16156
- }
16157
-
16158
- .img-size-32 {
16159
- width: 32px;
16160
- }
16161
-
16162
- /* ==========================================================================
16163
- AdminLTE Accessibility Styles - WCAG 2.1 AA Compliance
16164
- ========================================================================== */
16165
- /* Skip Links - WCAG 2.4.1: Bypass Blocks */
16166
- .skip-link {
16167
- position: absolute;
16168
- top: -40px;
16169
- right: 6px;
16170
- z-index: 999999;
16171
- padding: 8px 16px;
16172
- font-weight: 600;
16173
- color: var(--bs-white);
16174
- text-decoration: none;
16175
- background: var(--bs-primary);
16176
- }
16177
- .skip-link:focus {
16178
- top: 0;
16179
- outline: 3px solid var(--bs-warning);
16180
- outline-offset: 2px;
16181
- }
16182
- .skip-link:hover {
16183
- color: var(--bs-white);
16184
- text-decoration: none;
16185
- background: var(--bs-primary-emphasis);
16186
- }
16187
-
16188
- /* Enhanced Focus Indicators - WCAG 2.4.7: Focus Visible */
16189
- .focus-enhanced:focus {
16190
- outline: 3px solid var(--bs-focus-ring-color, #0d6efd);
16191
- outline-offset: 2px;
16192
- box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
16193
- }
16194
-
16195
- /* High Contrast Mode Support */
16196
- @media (prefers-contrast: high) {
16197
- .card {
16198
- border: 2px solid;
16199
- }
16200
- .btn {
16201
- border-width: 2px;
16202
- }
16203
- .nav-link {
16204
- border: 1px solid transparent;
16205
- }
16206
- .nav-link:hover, .nav-link:focus {
16207
- border-color: currentcolor;
16208
- }
16209
- }
16210
- /* Reduced Motion Support - WCAG 2.3.3: Animation from Interactions */
16211
- @media (prefers-reduced-motion: reduce) {
16212
- *,
16213
- *::before,
16214
- *::after {
16215
- transition-duration: 0.01ms !important;
16216
- animation-duration: 0.01ms !important;
16217
- animation-iteration-count: 1 !important;
16218
- scroll-behavior: auto !important;
16219
- }
16220
- .fade {
16221
- opacity: 1 !important;
16222
- /* stylelint-disable-next-line property-disallowed-list */
16223
- transition: none !important;
16224
- }
16225
- .collapse {
16226
- /* stylelint-disable-next-line property-disallowed-list */
16227
- transition: none !important;
16228
- }
16229
- .modal.fade .modal-dialog {
16230
- transform: none !important;
16231
- }
16232
- }
16233
- /* Screen Reader Only Content */
16234
- .sr-only {
16235
- position: absolute !important;
16236
- width: 1px !important;
16237
- height: 1px !important;
16238
- padding: 0 !important;
16239
- margin: -1px !important;
16240
- overflow: hidden !important;
16241
- clip: rect(0, 0, 0, 0) !important;
16242
- white-space: nowrap !important;
16243
- border: 0 !important;
16244
- }
16245
-
16246
- .sr-only-focusable:focus {
16247
- position: static !important;
16248
- width: auto !important;
16249
- height: auto !important;
16250
- padding: inherit !important;
16251
- margin: inherit !important;
16252
- overflow: visible !important;
16253
- clip: auto !important;
16254
- white-space: normal !important;
16255
- }
16256
-
16257
- /* Focus Trap Utilities */
16258
- .focus-trap:focus {
16259
- box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
16260
- }
16261
-
16262
- /* Accessible Color Combinations - WCAG 1.4.3: Contrast (Minimum) */
16263
- .text-accessible-primary {
16264
- color: #003d82; /* 4.5:1 contrast on white */
16265
- }
16266
-
16267
- .text-accessible-success {
16268
- color: #0f5132; /* 4.5:1 contrast on white */
16269
- }
16270
-
16271
- .text-accessible-danger {
16272
- color: #842029; /* 4.5:1 contrast on white */
16273
- }
16274
-
16275
- .text-accessible-warning {
16276
- color: #664d03; /* 4.5:1 contrast on white */
16277
- }
16278
-
16279
- /* ARIA Live Regions */
16280
- .live-region {
16281
- position: absolute;
16282
- right: -10000px;
16283
- width: 1px;
16284
- height: 1px;
16285
- overflow: hidden;
16286
- }
16287
- .live-region.live-region-visible {
16288
- position: static;
16289
- right: auto;
16290
- width: auto;
16291
- height: auto;
16292
- overflow: visible;
16293
- }
16294
-
16295
- /* Enhanced Error States - WCAG 3.3.1: Error Identification */
16296
- .form-control.is-invalid {
16297
- border-color: var(--bs-danger);
16298
- }
16299
- .form-control.is-invalid:focus {
16300
- border-color: var(--bs-danger);
16301
- box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
16302
- }
16303
-
16304
- .invalid-feedback[role=alert] {
16305
- font-weight: 600;
16306
- }
16307
-
16308
- /* Target Size - WCAG 2.5.8: Target Size (Minimum) */
16309
- .touch-target {
16310
- min-width: 44px;
16311
- min-height: 44px;
16312
- }
16313
- .touch-target.touch-target-small {
16314
- min-width: 24px;
16315
- min-height: 24px;
16316
- }
16317
-
16318
- /* Table Accessibility */
16319
- .table-accessible th {
16320
- font-weight: 600;
16321
- background-color: var(--bs-secondary-bg);
16322
- }
16323
- .table-accessible th[scope=col] {
16324
- border-bottom: 2px solid var(--bs-border-color);
16325
- }
16326
- .table-accessible th[scope=row] {
16327
- border-left: 2px solid var(--bs-border-color);
16328
- }
16329
- .table-accessible caption {
16330
- padding: 0.75rem;
16331
- font-weight: 600;
16332
- color: var(--bs-secondary);
16333
- text-align: right;
16334
- caption-side: top;
16335
- }
16336
-
16337
- /* Navigation Landmarks */
16338
- nav[role=navigation]:not([aria-label]):not([aria-labelledby])::before {
16339
- position: absolute;
16340
- right: -10000px;
16341
- content: "Navigation";
16342
- }
16343
-
16344
- /* Form Fieldset Styling */
16345
- fieldset {
16346
- padding: 1rem;
16347
- margin-bottom: 1rem;
16348
- border: 1px solid var(--bs-border-color);
16349
- }
16350
- fieldset legend {
16351
- padding: 0 0.5rem;
16352
- margin-bottom: 0.5rem;
16353
- font-size: 1.1em;
16354
- font-weight: 600;
16355
- }
16356
-
16357
- /* Loading States */
16358
- .loading[aria-busy=true] {
16359
- position: relative;
16360
- pointer-events: none;
16361
- }
16362
- .loading[aria-busy=true]::after {
16363
- position: absolute;
16364
- top: 50%;
16365
- right: 50%;
16366
- width: 20px;
16367
- height: 20px;
16368
- margin-top: -10px;
16369
- margin-right: -10px;
16370
- content: "";
16371
- border: 2px solid var(--bs-primary);
16372
- border-top-color: transparent;
16373
- animation: spin 1s linear infinite;
16374
- }
16375
- @media (prefers-reduced-motion: reduce) {
16376
- .loading[aria-busy=true]::after {
16377
- border-top-color: var(--bs-primary);
16378
- animation: none;
16379
- }
16380
- }
16381
-
16382
- @keyframes spin {
16383
- to {
16384
- transform: rotate(-360deg);
16385
- }
16386
- }
16387
- /* Dark Mode Accessibility */
16388
- [data-bs-theme=dark] .text-accessible-primary {
16389
- color: #6ea8fe;
16390
- }
16391
- [data-bs-theme=dark] .text-accessible-success {
16392
- color: #75b798;
16393
- }
16394
- [data-bs-theme=dark] .text-accessible-danger {
16395
- color: #f1aeb5;
16396
- }
16397
- [data-bs-theme=dark] .text-accessible-warning {
16398
- color: #ffda6a;
16399
- }
16400
-
16401
- /* Print Accessibility */
16402
- @media print {
16403
- .skip-link,
16404
- .btn,
16405
- .nav-link {
16406
- color: #000 !important;
16407
- background: transparent !important;
16408
- border: 1px solid #000 !important;
16409
- }
16410
- a[href^=http]::after {
16411
- font-size: 0.8em;
16412
- content: " (" attr(href) ")";
16413
- }
16414
- /* Print Layout Fix - Ensure sidebar and main content are both visible */
16415
- .app-wrapper {
16416
- display: grid !important;
16417
- grid-template-rows: auto 1fr auto !important;
16418
- grid-template-columns: auto 1fr !important;
16419
- }
16420
- .sidebar-overlay {
16421
- display: none !important;
16422
- }
16423
- .app-sidebar {
16424
- position: static !important;
16425
- display: block !important;
16426
- min-width: 200px !important;
16427
- max-width: 200px !important;
16428
- max-height: none !important;
16429
- margin-right: 0 !important;
16430
- overflow: visible !important;
16431
- }
16432
- .sidebar-wrapper {
16433
- height: auto !important;
16434
- overflow: visible !important;
16435
- }
16436
- .app-header {
16437
- position: static !important;
16438
- }
16439
- .app-main {
16440
- width: auto !important;
16441
- max-width: 100% !important;
16442
- overflow: visible !important;
16443
- }
16444
- .app-content {
16445
- overflow: visible !important;
16446
- }
16447
- .app-footer {
16448
- position: static !important;
16449
- }
16450
- }
16451
- .astro-code {
16452
- padding: 0.75rem;
16453
- border-radius: 0.375rem;
16454
- }
16455
-
16456
- .docs-page .app-content > .container-fluid, .docs-page .app-content > .container-sm, .docs-page .app-content > .container-md, .docs-page .app-content > .container-lg, .docs-page .app-content > .container-xl, .docs-page .app-content > .container-xxl {
16457
- max-width: 60rem;
16458
- }
16459
- @media (min-width: 1400px) {
16460
- .docs-page .app-content > .container-fluid, .docs-page .app-content > .container-sm, .docs-page .app-content > .container-md, .docs-page .app-content > .container-lg, .docs-page .app-content > .container-xl, .docs-page .app-content > .container-xxl {
16461
- max-width: 64rem;
16462
- }
16463
- }
16464
- .docs-page .card > .card-body {
16465
- padding: 1.5rem;
16466
- font-size: 1rem;
16467
- line-height: 1.7;
16468
- color: var(--bs-body-color);
16469
- }
16470
- @media (min-width: 768px) {
16471
- .docs-page .card > .card-body {
16472
- padding: 2.5rem;
16473
- }
16474
- }
16475
- .docs-page .card > .card-body h1,
16476
- .docs-page .card > .card-body h2,
16477
- .docs-page .card > .card-body h3,
16478
- .docs-page .card > .card-body h4,
16479
- .docs-page .card > .card-body h5,
16480
- .docs-page .card > .card-body h6,
16481
- .docs-page .card > .card-body .h1,
16482
- .docs-page .card > .card-body .h2,
16483
- .docs-page .card > .card-body .h3,
16484
- .docs-page .card > .card-body .h4,
16485
- .docs-page .card > .card-body .h5,
16486
- .docs-page .card > .card-body .h6 {
16487
- margin-top: 2em;
16488
- margin-bottom: 0.5em;
16489
- font-weight: 600;
16490
- line-height: 1.3;
16491
- color: var(--bs-emphasis-color);
16492
- scroll-margin-top: 4rem;
16493
- }
16494
- .docs-page .card > .card-body h1:first-child,
16495
- .docs-page .card > .card-body h2:first-child,
16496
- .docs-page .card > .card-body h3:first-child,
16497
- .docs-page .card > .card-body h4:first-child,
16498
- .docs-page .card > .card-body h5:first-child,
16499
- .docs-page .card > .card-body h6:first-child,
16500
- .docs-page .card > .card-body .h1:first-child,
16501
- .docs-page .card > .card-body .h2:first-child,
16502
- .docs-page .card > .card-body .h3:first-child,
16503
- .docs-page .card > .card-body .h4:first-child,
16504
- .docs-page .card > .card-body .h5:first-child,
16505
- .docs-page .card > .card-body .h6:first-child {
16506
- margin-top: 0;
16507
- }
16508
- .docs-page .card > .card-body h2,
16509
- .docs-page .card > .card-body .h2 {
16510
- padding-bottom: 0.35em;
16511
- font-size: 1.75rem;
16512
- border-bottom: 1px solid var(--bs-border-color);
16513
- }
16514
- .docs-page .card > .card-body h3,
16515
- .docs-page .card > .card-body .h3 {
16516
- font-size: 1.4rem;
16517
- }
16518
- .docs-page .card > .card-body h4,
16519
- .docs-page .card > .card-body .h4 {
16520
- font-size: 1.2rem;
16521
- }
16522
- .docs-page .card > .card-body h5,
16523
- .docs-page .card > .card-body .h5 {
16524
- padding-top: 1.5em;
16525
- margin-top: 2.5em;
16526
- font-size: 1.3rem;
16527
- border-top: 1px solid var(--bs-border-color);
16528
- }
16529
- .docs-page .card > .card-body h5:first-child,
16530
- .docs-page .card > .card-body .h5:first-child {
16531
- padding-top: 0;
16532
- border-top: 0;
16533
- }
16534
- .docs-page .card > .card-body h6,
16535
- .docs-page .card > .card-body .h6 {
16536
- margin-top: 1.75em;
16537
- font-size: 1.08rem;
16538
- color: var(--bs-emphasis-color);
16539
- }
16540
- .docs-page .card > .card-body p,
16541
- .docs-page .card > .card-body ul,
16542
- .docs-page .card > .card-body ol,
16543
- .docs-page .card > .card-body dl,
16544
- .docs-page .card > .card-body blockquote,
16545
- .docs-page .card > .card-body table {
16546
- margin-bottom: 1.1rem;
16547
- }
16548
- .docs-page .card > .card-body ul,
16549
- .docs-page .card > .card-body ol {
16550
- padding-right: 1.5rem;
16551
- }
16552
- .docs-page .card > .card-body ul li,
16553
- .docs-page .card > .card-body ol li {
16554
- margin-bottom: 0.35rem;
16555
- }
16556
- .docs-page .card > .card-body ul ul,
16557
- .docs-page .card > .card-body ul ol,
16558
- .docs-page .card > .card-body ol ul,
16559
- .docs-page .card > .card-body ol ol {
16560
- margin-top: 0.35rem;
16561
- margin-bottom: 0;
16562
- }
16563
- .docs-page .card > .card-body h2 + p, .docs-page .card > .card-body .h2 + p,
16564
- .docs-page .card > .card-body h3 + p,
16565
- .docs-page .card > .card-body .h3 + p,
16566
- .docs-page .card > .card-body h5 + p,
16567
- .docs-page .card > .card-body .h5 + p {
16568
- margin-top: 0;
16569
- }
16570
- .docs-page .card > .card-body p code,
16571
- .docs-page .card > .card-body li code,
16572
- .docs-page .card > .card-body td code,
16573
- .docs-page .card > .card-body th code,
16574
- .docs-page .card > .card-body h2 code,
16575
- .docs-page .card > .card-body .h2 code,
16576
- .docs-page .card > .card-body h3 code,
16577
- .docs-page .card > .card-body .h3 code,
16578
- .docs-page .card > .card-body h4 code,
16579
- .docs-page .card > .card-body .h4 code,
16580
- .docs-page .card > .card-body h5 code,
16581
- .docs-page .card > .card-body .h5 code,
16582
- .docs-page .card > .card-body h6 code,
16583
- .docs-page .card > .card-body .h6 code {
16584
- padding: 0.15em 0.4em;
16585
- font-size: 0.875em;
16586
- color: var(--bs-emphasis-color);
16587
- background: var(--bs-tertiary-bg);
16588
- border: 1px solid var(--bs-border-color);
16589
- border-radius: 0.25rem;
16590
- }
16591
- .docs-page .card > .card-body pre.astro-code,
16592
- .docs-page .card > .card-body pre {
16593
- padding: 1rem 1.25rem;
16594
- margin-top: 1.25rem;
16595
- margin-bottom: 1.5rem;
16596
- overflow-x: auto;
16597
- font-size: 0.875rem;
16598
- line-height: 1.6;
16599
- border-radius: 0.375rem;
16600
- }
16601
- .docs-page .card > .card-body pre.astro-code code,
16602
- .docs-page .card > .card-body pre code {
16603
- padding: 0;
16604
- background: transparent;
16605
- border: 0;
16606
- }
16607
- .docs-page .card > .card-body table {
16608
- width: 100%;
16609
- margin-top: 1.25rem;
16610
- margin-bottom: 1.5rem;
16611
- overflow: hidden;
16612
- font-size: 0.95rem;
16613
- border-collapse: collapse;
16614
- border: 1px solid var(--bs-border-color);
16615
- border-radius: 0.25rem;
16616
- }
16617
- .docs-page .card > .card-body table th,
16618
- .docs-page .card > .card-body table td {
16619
- padding: 0.65rem 0.9rem;
16620
- text-align: right;
16621
- vertical-align: top;
16622
- border-bottom: 1px solid var(--bs-border-color);
16623
- }
16624
- .docs-page .card > .card-body table th {
16625
- font-weight: 600;
16626
- color: var(--bs-emphasis-color);
16627
- background: var(--bs-tertiary-bg);
16628
- }
16629
- .docs-page .card > .card-body table tr:last-child td {
16630
- border-bottom: 0;
16631
- }
16632
- .docs-page .card > .card-body table code {
16633
- white-space: nowrap;
16634
- }
16635
- .docs-page .card > .card-body blockquote {
16636
- padding: 0.85rem 1.1rem;
16637
- margin-top: 1.25rem;
16638
- color: var(--bs-emphasis-color);
16639
- background: var(--bs-info-bg-subtle);
16640
- border-right: 4px solid var(--bs-info-border-subtle);
16641
- border-radius: 0.25rem;
16642
- }
16643
- .docs-page .card > .card-body blockquote p:last-child {
16644
- margin-bottom: 0;
16645
- }
16646
- .docs-page .card > .card-body blockquote code {
16647
- background: rgba(0, 0, 0, 0.05);
16648
- }
16649
- .docs-page .card > .card-body a:not(.btn):not(.nav-link) {
16650
- color: var(--bs-primary);
16651
- text-decoration: underline;
16652
- text-decoration-thickness: 1px;
16653
- text-underline-offset: 3px;
16654
- }
16655
- .docs-page .card > .card-body a:not(.btn):not(.nav-link):hover {
16656
- text-decoration-thickness: 2px;
16657
- }
16658
- .docs-page .card > .card-body hr {
16659
- margin: 2.5rem 0;
16660
- border: 0;
16661
- border-top: 1px solid var(--bs-border-color);
16662
- opacity: 1;
16663
- }
16664
- .docs-page .card > .card-body > p:first-child,
16665
- .docs-page .card > .card-body > p:first-of-type {
16666
- margin-bottom: 2rem;
16667
- font-size: 1.125rem;
16668
- line-height: 1.6;
16669
- color: var(--bs-body-color);
16670
- }
16671
- .docs-page .card > .card-body details.faq-item {
16672
- margin-bottom: 0.5rem;
16673
- overflow: hidden;
16674
- background: var(--bs-body-bg);
16675
- border: 1px solid var(--bs-border-color);
16676
- border-radius: 0.375rem;
16677
- transition: border-color 0.15s ease, box-shadow 0.15s ease;
16678
- }
16679
- @media (prefers-reduced-motion: reduce) {
16680
- .docs-page .card > .card-body details.faq-item {
16681
- transition: none;
16682
- }
16683
- }
16684
- .docs-page .card > .card-body details.faq-item:hover {
16685
- border-color: var(--bs-primary-border-subtle);
16686
- }
16687
- .docs-page .card > .card-body details.faq-item[open] {
16688
- background: var(--bs-body-bg);
16689
- border-color: var(--bs-primary-border-subtle);
16690
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
16691
- }
16692
- .docs-page .card > .card-body details.faq-item summary {
16693
- position: relative;
16694
- padding: 0.9rem 1.1rem 0.9rem 3rem;
16695
- font-size: 1rem;
16696
- font-weight: 600;
16697
- color: var(--bs-emphasis-color);
16698
- list-style: none;
16699
- cursor: pointer;
16700
- -webkit-user-select: none;
16701
- user-select: none;
16702
- transition: color 0.15s ease;
16703
- }
16704
- @media (prefers-reduced-motion: reduce) {
16705
- .docs-page .card > .card-body details.faq-item summary {
16706
- transition: none;
16707
- }
16708
- }
16709
- .docs-page .card > .card-body details.faq-item summary::-webkit-details-marker {
16710
- display: none;
16711
- }
16712
- .docs-page .card > .card-body details.faq-item summary::marker {
16713
- content: "";
16714
- }
16715
- .docs-page .card > .card-body details.faq-item summary:hover {
16716
- color: var(--bs-primary);
16717
- }
16718
- .docs-page .card > .card-body details.faq-item summary::after {
16719
- position: absolute;
16720
- top: 50%;
16721
- left: 1.1rem;
16722
- display: inline-block;
16723
- width: 0.55rem;
16724
- height: 0.55rem;
16725
- margin-top: -0.4rem;
16726
- content: "";
16727
- border-left: 2px solid currentcolor;
16728
- border-bottom: 2px solid currentcolor;
16729
- opacity: 0.55;
16730
- transform: rotate(-45deg);
16731
- transition: transform 0.2s ease;
16732
- }
16733
- @media (prefers-reduced-motion: reduce) {
16734
- .docs-page .card > .card-body details.faq-item summary::after {
16735
- transition: none;
16736
- }
16737
- }
16738
- .docs-page .card > .card-body details.faq-item[open] > summary {
16739
- color: var(--bs-primary);
16740
- border-bottom: 1px solid var(--bs-border-color);
16741
- }
16742
- .docs-page .card > .card-body details.faq-item[open] > summary::after {
16743
- margin-top: -0.15rem;
16744
- opacity: 1;
16745
- transform: rotate(135deg);
16746
- }
16747
- .docs-page .card > .card-body details.faq-item > *:not(summary) {
16748
- padding-left: 1.1rem;
16749
- padding-right: 1.1rem;
16750
- }
16751
- .docs-page .card > .card-body details.faq-item > *:not(summary):first-of-type {
16752
- padding-top: 1rem;
16753
- }
16754
- .docs-page .card > .card-body details.faq-item > *:not(summary):last-child {
16755
- padding-bottom: 1rem;
16756
- }
16757
- .docs-page .card > .card-body details.faq-item p,
16758
- .docs-page .card > .card-body details.faq-item ul,
16759
- .docs-page .card > .card-body details.faq-item ol {
16760
- margin-bottom: 0.65rem;
16761
- }
16762
- .docs-page .card > .card-body details.faq-item > *:last-child p:last-child,
16763
- .docs-page .card > .card-body details.faq-item > p:last-child,
16764
- .docs-page .card > .card-body details.faq-item > ul:last-child,
16765
- .docs-page .card > .card-body details.faq-item > ol:last-child {
16766
- margin-bottom: 0;
16767
- }
16768
- .docs-page .card > .card-body details.faq-item pre.astro-code,
16769
- .docs-page .card > .card-body details.faq-item pre {
16770
- margin-left: 0;
16771
- margin-right: 0;
16772
- }
16773
- .docs-page[data-bs-theme=dark] .card > .card-body blockquote code, [data-bs-theme=dark] .docs-page .card > .card-body blockquote code {
16774
- background: rgba(255, 255, 255, 0.08);
16775
- }
16776
-
16777
- .faq-page .app-content > .container-fluid, .faq-page .app-content > .container-sm, .faq-page .app-content > .container-md, .faq-page .app-content > .container-lg, .faq-page .app-content > .container-xl, .faq-page .app-content > .container-xxl {
16778
- max-width: 64rem;
16779
- }
16780
- @media (min-width: 1400px) {
16781
- .faq-page .app-content > .container-fluid, .faq-page .app-content > .container-sm, .faq-page .app-content > .container-md, .faq-page .app-content > .container-lg, .faq-page .app-content > .container-xl, .faq-page .app-content > .container-xxl {
16782
- max-width: 72rem;
16783
- }
16784
- }
16785
- .faq-page .faq-hero {
16786
- position: relative;
16787
- padding: 3rem 1.5rem 2.5rem;
16788
- margin-top: 1rem;
16789
- overflow: hidden;
16790
- background: radial-gradient(ellipse at top right, rgba(var(--bs-primary-rgb), 0.12), transparent 60%), radial-gradient(ellipse at bottom left, rgba(var(--bs-info-rgb), 0.1), transparent 65%), var(--bs-body-bg);
16791
- border: 1px solid var(--bs-border-color);
16792
- border-radius: 1rem;
16793
- }
16794
- .faq-page .faq-hero-eyebrow {
16795
- display: inline-flex;
16796
- gap: 0.4rem;
16797
- align-items: center;
16798
- padding: 0.35rem 0.85rem;
16799
- margin-bottom: 1rem;
16800
- font-size: 0.75rem;
16801
- font-weight: 600;
16802
- color: var(--bs-primary);
16803
- text-transform: uppercase;
16804
- letter-spacing: 0.08em;
16805
- background: var(--bs-primary-bg-subtle);
16806
- border: 1px solid var(--bs-primary-border-subtle);
16807
- border-radius: 50rem;
16808
- }
16809
- .faq-page .faq-hero-eyebrow .bi {
16810
- font-size: 0.9rem;
16811
- }
16812
- .faq-page .faq-hero-title {
16813
- margin: 0 0 0.5rem;
16814
- font-size: 2.25rem;
16815
- font-weight: 700;
16816
- line-height: 1.15;
16817
- color: var(--bs-emphasis-color);
16818
- }
16819
- @media (min-width: 768px) {
16820
- .faq-page .faq-hero-title {
16821
- font-size: 2.75rem;
16822
- }
16823
- }
16824
- .faq-page .faq-hero-lead {
16825
- max-width: 36rem;
16826
- margin: 0 auto 1.75rem;
16827
- font-size: 1.05rem;
16828
- line-height: 1.55;
16829
- color: var(--bs-secondary-color);
16830
- }
16831
- .faq-page .faq-search {
16832
- position: relative;
16833
- max-width: 32rem;
16834
- margin: 0 auto;
16835
- }
16836
- .faq-page .faq-search .form-control {
16837
- height: 3rem;
16838
- padding-left: 3rem;
16839
- padding-right: 3rem;
16840
- font-size: 1rem;
16841
- background: var(--bs-body-bg);
16842
- border-radius: 50rem;
16843
- transition: box-shadow 0.15s ease, border-color 0.15s ease;
16844
- }
16845
- @media (prefers-reduced-motion: reduce) {
16846
- .faq-page .faq-search .form-control {
16847
- transition: none;
16848
- }
16849
- }
16850
- .faq-page .faq-search .form-control:focus {
16851
- box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15);
16852
- }
16853
- .faq-page .faq-search-icon {
16854
- position: absolute;
16855
- top: 50%;
16856
- right: 1.2rem;
16857
- color: var(--bs-secondary-color);
16858
- pointer-events: none;
16859
- transform: translateY(-50%);
16860
- }
16861
- .faq-page .faq-search-clear {
16862
- position: absolute;
16863
- top: 50%;
16864
- left: 0.65rem;
16865
- display: inline-flex;
16866
- align-items: center;
16867
- justify-content: center;
16868
- width: 2rem;
16869
- height: 2rem;
16870
- padding: 0;
16871
- color: var(--bs-secondary-color);
16872
- background: var(--bs-tertiary-bg);
16873
- border: 0;
16874
- transform: translateY(-50%);
16875
- border-radius: 50%;
16876
- transition: background 0.15s ease, color 0.15s ease;
16877
- }
16878
- @media (prefers-reduced-motion: reduce) {
16879
- .faq-page .faq-search-clear {
16880
- transition: none;
16881
- }
16882
- }
16883
- .faq-page .faq-search-clear:hover {
16884
- color: var(--bs-body-color);
16885
- background: var(--bs-secondary-bg);
16886
- }
16887
- .faq-page .faq-empty-state {
16888
- max-width: 32rem;
16889
- padding: 1rem;
16890
- margin: 1.5rem auto 0;
16891
- font-size: 0.95rem;
16892
- color: var(--bs-secondary-color);
16893
- background: var(--bs-tertiary-bg);
16894
- border-radius: 0.375rem;
16895
- }
16896
- .faq-page .faq-empty-state .bi {
16897
- margin-left: 0.35rem;
16898
- }
16899
- .faq-page .faq-chips {
16900
- display: flex;
16901
- flex-wrap: wrap;
16902
- gap: 0.5rem;
16903
- justify-content: center;
16904
- }
16905
- .faq-page .faq-chip {
16906
- display: inline-flex;
16907
- gap: 0.45rem;
16908
- align-items: center;
16909
- padding: 0.45rem 0.85rem;
16910
- font-size: 0.875rem;
16911
- font-weight: 500;
16912
- color: var(--bs-body-color);
16913
- text-decoration: none;
16914
- background: var(--bs-body-bg);
16915
- border: 1px solid var(--bs-border-color);
16916
- border-radius: 50rem;
16917
- transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
16918
- }
16919
- @media (prefers-reduced-motion: reduce) {
16920
- .faq-page .faq-chip {
16921
- transition: none;
15459
+ .fade {
15460
+ opacity: 1 !important;
15461
+ /* stylelint-disable-next-line property-disallowed-list */
15462
+ transition: none !important;
15463
+ }
15464
+ .collapse {
15465
+ /* stylelint-disable-next-line property-disallowed-list */
15466
+ transition: none !important;
15467
+ }
15468
+ .modal.fade .modal-dialog {
15469
+ transform: none !important;
16922
15470
  }
16923
15471
  }
16924
- .faq-page .faq-chip:hover {
16925
- color: var(--bs-emphasis-color);
16926
- background: var(--bs-tertiary-bg);
16927
- transform: translateY(-1px);
16928
- }
16929
- .faq-page .faq-chip .bi {
16930
- font-size: 1rem;
16931
- }
16932
- .faq-page .faq-chip-count {
16933
- padding: 0 0.45rem;
16934
- font-size: 0.7rem;
16935
- font-weight: 600;
16936
- color: var(--bs-secondary-color);
16937
- background: var(--bs-tertiary-bg);
16938
- border-radius: 50rem;
16939
- }
16940
- .faq-page .faq-chip-primary:hover {
16941
- color: var(--bs-primary-text-emphasis);
16942
- background: var(--bs-primary-bg-subtle);
16943
- border-color: var(--bs-primary-border-subtle);
16944
- }
16945
- .faq-page .faq-chip-primary:hover .faq-chip-count {
16946
- color: var(--bs-primary-text-emphasis);
16947
- background: rgba(0, 0, 0, 0.06);
16948
- }
16949
- .faq-page .faq-chip-info:hover {
16950
- color: var(--bs-info-text-emphasis);
16951
- background: var(--bs-info-bg-subtle);
16952
- border-color: var(--bs-info-border-subtle);
16953
- }
16954
- .faq-page .faq-chip-info:hover .faq-chip-count {
16955
- color: var(--bs-info-text-emphasis);
16956
- background: rgba(0, 0, 0, 0.06);
16957
- }
16958
- .faq-page .faq-chip-warning:hover {
16959
- color: var(--bs-warning-text-emphasis);
16960
- background: var(--bs-warning-bg-subtle);
16961
- border-color: var(--bs-warning-border-subtle);
16962
- }
16963
- .faq-page .faq-chip-warning:hover .faq-chip-count {
16964
- color: var(--bs-warning-text-emphasis);
16965
- background: rgba(0, 0, 0, 0.06);
16966
- }
16967
- .faq-page .faq-chip-success:hover {
16968
- color: var(--bs-success-text-emphasis);
16969
- background: var(--bs-success-bg-subtle);
16970
- border-color: var(--bs-success-border-subtle);
16971
- }
16972
- .faq-page .faq-chip-success:hover .faq-chip-count {
16973
- color: var(--bs-success-text-emphasis);
16974
- background: rgba(0, 0, 0, 0.06);
16975
- }
16976
- .faq-page .faq-chip-danger:hover {
16977
- color: var(--bs-danger-text-emphasis);
16978
- background: var(--bs-danger-bg-subtle);
16979
- border-color: var(--bs-danger-border-subtle);
16980
- }
16981
- .faq-page .faq-chip-danger:hover .faq-chip-count {
16982
- color: var(--bs-danger-text-emphasis);
16983
- background: rgba(0, 0, 0, 0.06);
16984
- }
16985
- .faq-page .faq-chip-secondary:hover {
16986
- color: var(--bs-secondary-text-emphasis);
16987
- background: var(--bs-secondary-bg-subtle);
16988
- border-color: var(--bs-secondary-border-subtle);
16989
- }
16990
- .faq-page .faq-chip-secondary:hover .faq-chip-count {
16991
- color: var(--bs-secondary-text-emphasis);
16992
- background: rgba(0, 0, 0, 0.06);
16993
- }
16994
- .faq-page .faq-section {
16995
- margin-bottom: 2.5rem;
16996
- scroll-margin-top: 5rem;
16997
- }
16998
- .faq-page .faq-section-header {
16999
- display: flex;
17000
- gap: 1rem;
17001
- align-items: center;
17002
- padding: 1rem 1.25rem;
17003
- margin-bottom: 1rem;
17004
- background: var(--bs-body-bg);
17005
- border: 1px solid var(--bs-border-color);
17006
- border-right: 4px solid var(--bs-primary);
17007
- border-radius: 0.375rem;
17008
- }
17009
- .faq-page .faq-section-icon {
17010
- display: inline-flex;
17011
- flex-shrink: 0;
17012
- align-items: center;
17013
- justify-content: center;
17014
- width: 2.75rem;
17015
- height: 2.75rem;
17016
- font-size: 1.35rem;
17017
- color: var(--bs-primary);
17018
- background: var(--bs-primary-bg-subtle);
17019
- border-radius: 0.375rem;
17020
- }
17021
- .faq-page .faq-section-title {
17022
- margin: 0;
17023
- font-size: 1.4rem;
17024
- font-weight: 600;
17025
- line-height: 1.2;
17026
- color: var(--bs-emphasis-color);
17027
- }
17028
- .faq-page .faq-section-count {
17029
- margin: 0.1rem 0 0;
17030
- font-size: 0.8rem;
17031
- color: var(--bs-secondary-color);
17032
- }
17033
- .faq-page .faq-section-primary {
17034
- border-right-color: var(--bs-primary);
15472
+ /* Screen Reader Only Content */
15473
+ .sr-only {
15474
+ position: absolute !important;
15475
+ width: 1px !important;
15476
+ height: 1px !important;
15477
+ padding: 0 !important;
15478
+ margin: -1px !important;
15479
+ overflow: hidden !important;
15480
+ clip: rect(0, 0, 0, 0) !important;
15481
+ white-space: nowrap !important;
15482
+ border: 0 !important;
17035
15483
  }
17036
- .faq-page .faq-section-primary .faq-section-icon {
17037
- color: var(--bs-primary-text-emphasis);
17038
- background: var(--bs-primary-bg-subtle);
15484
+
15485
+ .sr-only-focusable:focus {
15486
+ position: static !important;
15487
+ width: auto !important;
15488
+ height: auto !important;
15489
+ padding: inherit !important;
15490
+ margin: inherit !important;
15491
+ overflow: visible !important;
15492
+ clip: auto !important;
15493
+ white-space: normal !important;
17039
15494
  }
17040
- .faq-page .faq-section-info {
17041
- border-right-color: var(--bs-info);
15495
+
15496
+ /* Focus Trap Utilities */
15497
+ .focus-trap:focus {
15498
+ box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
17042
15499
  }
17043
- .faq-page .faq-section-info .faq-section-icon {
17044
- color: var(--bs-info-text-emphasis);
17045
- background: var(--bs-info-bg-subtle);
15500
+
15501
+ /* Accessible Color Combinations - WCAG 1.4.3: Contrast (Minimum) */
15502
+ .text-accessible-primary {
15503
+ color: #003d82; /* 4.5:1 contrast on white */
17046
15504
  }
17047
- .faq-page .faq-section-warning {
17048
- border-right-color: var(--bs-warning);
15505
+
15506
+ .text-accessible-success {
15507
+ color: #0f5132; /* 4.5:1 contrast on white */
17049
15508
  }
17050
- .faq-page .faq-section-warning .faq-section-icon {
17051
- color: var(--bs-warning-text-emphasis);
17052
- background: var(--bs-warning-bg-subtle);
15509
+
15510
+ .text-accessible-danger {
15511
+ color: #842029; /* 4.5:1 contrast on white */
17053
15512
  }
17054
- .faq-page .faq-section-success {
17055
- border-right-color: var(--bs-success);
15513
+
15514
+ .text-accessible-warning {
15515
+ color: #664d03; /* 4.5:1 contrast on white */
17056
15516
  }
17057
- .faq-page .faq-section-success .faq-section-icon {
17058
- color: var(--bs-success-text-emphasis);
17059
- background: var(--bs-success-bg-subtle);
15517
+
15518
+ /* ARIA Live Regions */
15519
+ .live-region {
15520
+ position: absolute;
15521
+ right: -10000px;
15522
+ width: 1px;
15523
+ height: 1px;
15524
+ overflow: hidden;
17060
15525
  }
17061
- .faq-page .faq-section-danger {
17062
- border-right-color: var(--bs-danger);
15526
+ .live-region.live-region-visible {
15527
+ position: static;
15528
+ right: auto;
15529
+ width: auto;
15530
+ height: auto;
15531
+ overflow: visible;
17063
15532
  }
17064
- .faq-page .faq-section-danger .faq-section-icon {
17065
- color: var(--bs-danger-text-emphasis);
17066
- background: var(--bs-danger-bg-subtle);
15533
+
15534
+ /* Enhanced Error States - WCAG 3.3.1: Error Identification */
15535
+ .form-control.is-invalid {
15536
+ border-color: var(--bs-danger);
17067
15537
  }
17068
- .faq-page .faq-section-secondary {
17069
- border-right-color: var(--bs-secondary);
15538
+ .form-control.is-invalid:focus {
15539
+ border-color: var(--bs-danger);
15540
+ box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
17070
15541
  }
17071
- .faq-page .faq-section-secondary .faq-section-icon {
17072
- color: var(--bs-secondary-text-emphasis);
17073
- background: var(--bs-secondary-bg-subtle);
15542
+
15543
+ .invalid-feedback[role=alert] {
15544
+ font-weight: 600;
17074
15545
  }
17075
- .faq-page .faq-section-items .faq-item {
17076
- margin-bottom: 0.5rem;
17077
- overflow: hidden;
17078
- background: var(--bs-body-bg);
17079
- border: 1px solid var(--bs-border-color);
17080
- border-radius: 0.375rem;
17081
- transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
15546
+
15547
+ /* Target Size - WCAG 2.5.8: Target Size (Minimum) */
15548
+ .touch-target {
15549
+ min-width: 44px;
15550
+ min-height: 44px;
17082
15551
  }
17083
- @media (prefers-reduced-motion: reduce) {
17084
- .faq-page .faq-section-items .faq-item {
17085
- transition: none;
17086
- }
15552
+ .touch-target.touch-target-small {
15553
+ min-width: 24px;
15554
+ min-height: 24px;
17087
15555
  }
17088
- .faq-page .faq-section-items .faq-item:hover {
17089
- border-color: var(--bs-primary-border-subtle);
17090
- transform: translateX(-2px);
15556
+
15557
+ /* Table Accessibility */
15558
+ .table-accessible th {
15559
+ font-weight: 600;
15560
+ background-color: var(--bs-secondary-bg);
17091
15561
  }
17092
- .faq-page .faq-section-items .faq-item[open] {
17093
- border-color: var(--bs-primary-border-subtle);
17094
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
17095
- transform: none;
15562
+ .table-accessible th[scope=col] {
15563
+ border-bottom: 2px solid var(--bs-border-color);
17096
15564
  }
17097
- .faq-page .faq-section-items .faq-item summary {
17098
- display: flex;
17099
- gap: 0.85rem;
17100
- align-items: center;
17101
- padding: 1rem 1.25rem;
17102
- font-size: 1rem;
17103
- font-weight: 500;
17104
- color: var(--bs-emphasis-color);
17105
- list-style: none;
17106
- cursor: pointer;
17107
- -webkit-user-select: none;
17108
- user-select: none;
15565
+ .table-accessible th[scope=row] {
15566
+ border-left: 2px solid var(--bs-border-color);
17109
15567
  }
17110
- .faq-page .faq-section-items .faq-item summary::-webkit-details-marker {
17111
- display: none;
15568
+ .table-accessible caption {
15569
+ padding: 0.75rem;
15570
+ font-weight: 600;
15571
+ color: var(--bs-secondary);
15572
+ text-align: right;
15573
+ caption-side: top;
17112
15574
  }
17113
- .faq-page .faq-section-items .faq-item summary::marker {
17114
- content: "";
15575
+
15576
+ /* Navigation Landmarks */
15577
+ nav[role=navigation]:not([aria-label]):not([aria-labelledby])::before {
15578
+ position: absolute;
15579
+ right: -10000px;
15580
+ content: "Navigation";
17115
15581
  }
17116
- .faq-page .faq-section-items .faq-item summary::after {
17117
- content: none;
15582
+
15583
+ /* Form Fieldset Styling */
15584
+ fieldset {
15585
+ padding: 1rem;
15586
+ margin-bottom: 1rem;
15587
+ border: 1px solid var(--bs-border-color);
17118
15588
  }
17119
- .faq-page .faq-section-items .faq-item .faq-q-icon {
17120
- display: inline-flex;
17121
- flex-shrink: 0;
17122
- align-items: center;
17123
- justify-content: center;
17124
- width: 1.75rem;
17125
- height: 1.75rem;
17126
- font-size: 0.85rem;
17127
- color: var(--bs-primary);
17128
- background: var(--bs-primary-bg-subtle);
17129
- border-radius: 50%;
15589
+ fieldset legend {
15590
+ padding: 0 0.5rem;
15591
+ margin-bottom: 0.5rem;
15592
+ font-size: 1.1em;
15593
+ font-weight: 600;
17130
15594
  }
17131
- .faq-page .faq-section-items .faq-item .faq-q-text {
17132
- flex-grow: 1;
15595
+
15596
+ /* Loading States */
15597
+ .loading[aria-busy=true] {
15598
+ position: relative;
15599
+ pointer-events: none;
17133
15600
  }
17134
- .faq-page .faq-section-items .faq-item .faq-q-chevron {
17135
- flex-shrink: 0;
17136
- color: var(--bs-secondary-color);
17137
- transition: transform 0.2s ease, color 0.2s ease;
15601
+ .loading[aria-busy=true]::after {
15602
+ position: absolute;
15603
+ top: 50%;
15604
+ right: 50%;
15605
+ width: 20px;
15606
+ height: 20px;
15607
+ margin-top: -10px;
15608
+ margin-right: -10px;
15609
+ content: "";
15610
+ border: 2px solid var(--bs-primary);
15611
+ border-top-color: transparent;
15612
+ animation: spin 1s linear infinite;
17138
15613
  }
17139
15614
  @media (prefers-reduced-motion: reduce) {
17140
- .faq-page .faq-section-items .faq-item .faq-q-chevron {
17141
- transition: none;
15615
+ .loading[aria-busy=true]::after {
15616
+ border-top-color: var(--bs-primary);
15617
+ animation: none;
17142
15618
  }
17143
15619
  }
17144
- .faq-page .faq-section-items .faq-item[open] .faq-q-chevron {
17145
- color: var(--bs-primary);
17146
- transform: rotate(-180deg);
17147
- }
17148
- .faq-page .faq-section-items .faq-item[open] summary {
17149
- color: var(--bs-primary);
17150
- border-bottom: 1px solid var(--bs-border-color);
17151
- }
17152
- .faq-page .faq-section-items .faq-item .faq-answer {
17153
- padding: 1.1rem 3.85rem 1.1rem 1.25rem;
17154
- font-size: 0.95rem;
17155
- line-height: 1.65;
17156
- color: var(--bs-body-color);
17157
- }
17158
- .faq-page .faq-section-items .faq-item .faq-answer p:last-child,
17159
- .faq-page .faq-section-items .faq-item .faq-answer ul:last-child,
17160
- .faq-page .faq-section-items .faq-item .faq-answer ol:last-child,
17161
- .faq-page .faq-section-items .faq-item .faq-answer pre:last-child {
17162
- margin-bottom: 0;
17163
- }
17164
- .faq-page .faq-section-items .faq-item .faq-answer a {
17165
- color: var(--bs-primary);
17166
- text-decoration: underline;
17167
- text-underline-offset: 2px;
17168
- }
17169
- .faq-page .faq-section-items .faq-item .faq-answer a:hover {
17170
- text-decoration-thickness: 2px;
17171
- }
17172
- .faq-page .faq-section-items .faq-item .faq-answer code {
17173
- padding: 0.12em 0.35em;
17174
- font-size: 0.875em;
17175
- color: var(--bs-emphasis-color);
17176
- background: var(--bs-tertiary-bg);
17177
- border: 1px solid var(--bs-border-color);
17178
- border-radius: 0.25rem;
17179
- }
17180
- .faq-page .faq-section-items .faq-item .faq-answer pre.astro-code,
17181
- .faq-page .faq-section-items .faq-item .faq-answer pre {
17182
- padding: 0.85rem 1rem;
17183
- margin-top: 0.75rem;
17184
- margin-bottom: 0.75rem;
17185
- overflow-x: auto;
17186
- font-size: 0.85rem;
17187
- line-height: 1.55;
17188
- border-radius: 0.25rem;
17189
- }
17190
- .faq-page .faq-section-items .faq-item .faq-answer pre.astro-code code,
17191
- .faq-page .faq-section-items .faq-item .faq-answer pre code {
17192
- padding: 0;
17193
- background: transparent;
17194
- border: 0;
15620
+
15621
+ @keyframes spin {
15622
+ to {
15623
+ transform: rotate(-360deg);
15624
+ }
17195
15625
  }
17196
- .faq-page .faq-cta {
17197
- padding: 2.5rem 1.5rem;
17198
- text-align: center;
17199
- background: radial-gradient(ellipse at top, rgba(var(--bs-primary-rgb), 0.08), transparent 60%), var(--bs-body-bg);
17200
- border: 1px solid var(--bs-border-color);
17201
- border-radius: 1rem;
15626
+ /* Dark Mode Accessibility */
15627
+ [data-bs-theme=dark] .text-accessible-primary {
15628
+ color: #6ea8fe;
17202
15629
  }
17203
- .faq-page .faq-cta-icon {
17204
- display: inline-flex;
17205
- align-items: center;
17206
- justify-content: center;
17207
- width: 3.5rem;
17208
- height: 3.5rem;
17209
- margin-bottom: 1rem;
17210
- font-size: 1.6rem;
17211
- color: var(--bs-primary);
17212
- background: var(--bs-primary-bg-subtle);
17213
- border-radius: 50%;
15630
+ [data-bs-theme=dark] .text-accessible-success {
15631
+ color: #75b798;
17214
15632
  }
17215
- .faq-page .faq-cta h2, .faq-page .faq-cta .h2 {
17216
- margin: 0 0 0.5rem;
17217
- font-size: 1.5rem;
17218
- font-weight: 600;
17219
- color: var(--bs-emphasis-color);
15633
+ [data-bs-theme=dark] .text-accessible-danger {
15634
+ color: #f1aeb5;
17220
15635
  }
17221
- .faq-page .faq-cta p {
17222
- max-width: 32rem;
17223
- margin: 0 auto 1.5rem;
17224
- color: var(--bs-secondary-color);
15636
+ [data-bs-theme=dark] .text-accessible-warning {
15637
+ color: #ffda6a;
17225
15638
  }
17226
- .faq-page .faq-cta-actions {
17227
- display: inline-flex;
17228
- flex-wrap: wrap;
17229
- gap: 0.5rem;
17230
- justify-content: center;
15639
+
15640
+ /* Print Accessibility */
15641
+ @media print {
15642
+ .skip-link,
15643
+ .btn,
15644
+ .nav-link {
15645
+ color: #000 !important;
15646
+ background: transparent !important;
15647
+ border: 1px solid #000 !important;
15648
+ }
15649
+ a[href^=http]::after {
15650
+ font-size: 0.8em;
15651
+ content: " (" attr(href) ")";
15652
+ }
15653
+ /* Print Layout Fix - Ensure sidebar and main content are both visible */
15654
+ .app-wrapper {
15655
+ display: grid !important;
15656
+ grid-template-rows: auto 1fr auto !important;
15657
+ grid-template-columns: auto 1fr !important;
15658
+ }
15659
+ .sidebar-overlay {
15660
+ display: none !important;
15661
+ }
15662
+ .app-sidebar {
15663
+ position: static !important;
15664
+ display: block !important;
15665
+ min-width: 200px !important;
15666
+ max-width: 200px !important;
15667
+ max-height: none !important;
15668
+ margin-right: 0 !important;
15669
+ overflow: visible !important;
15670
+ }
15671
+ .sidebar-wrapper {
15672
+ height: auto !important;
15673
+ overflow: visible !important;
15674
+ }
15675
+ .app-header {
15676
+ position: static !important;
15677
+ }
15678
+ .app-main {
15679
+ width: auto !important;
15680
+ max-width: 100% !important;
15681
+ overflow: visible !important;
15682
+ }
15683
+ .app-content {
15684
+ overflow: visible !important;
15685
+ }
15686
+ .app-footer {
15687
+ position: static !important;
15688
+ }
17231
15689
  }
17232
15690
  /*# sourceMappingURL=adminlte.rtl.css.map */