@cagovweb/state-template 6.5.4 → 6.6.0-beta

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 (36) hide show
  1. package/dist/css/cagov.core.css +2952 -14244
  2. package/dist/css/cagov.core.flat.css +1053 -451
  3. package/dist/css/cagov.core.min.css +1 -1
  4. package/dist/css/colortheme-delta.css +4 -0
  5. package/dist/css/colortheme-delta.min.css +1 -1
  6. package/dist/css/colortheme-eureka.css +4 -0
  7. package/dist/css/colortheme-eureka.min.css +1 -1
  8. package/dist/css/colortheme-mono.css +4 -0
  9. package/dist/css/colortheme-mono.min.css +1 -1
  10. package/dist/css/colortheme-oceanside.css +4 -0
  11. package/dist/css/colortheme-oceanside.min.css +1 -1
  12. package/dist/css/colortheme-orangecounty.css +4 -0
  13. package/dist/css/colortheme-orangecounty.min.css +1 -1
  14. package/dist/css/colortheme-pasorobles.css +4 -0
  15. package/dist/css/colortheme-pasorobles.min.css +1 -1
  16. package/dist/css/colortheme-sacramento.css +4 -0
  17. package/dist/css/colortheme-sacramento.min.css +1 -1
  18. package/dist/css/colortheme-santabarbara.css +4 -0
  19. package/dist/css/colortheme-santabarbara.min.css +1 -1
  20. package/dist/css/colortheme-santacruz.css +4 -0
  21. package/dist/css/colortheme-santacruz.min.css +1 -1
  22. package/dist/css/colortheme-shasta.css +4 -0
  23. package/dist/css/colortheme-shasta.min.css +1 -1
  24. package/dist/css/colortheme-sierra.css +4 -0
  25. package/dist/css/colortheme-sierra.min.css +1 -1
  26. package/dist/css/colortheme-trinity.css +4 -0
  27. package/dist/css/colortheme-trinity.min.css +1 -1
  28. package/dist/css/colortheme-ukiah-night.css +292 -0
  29. package/dist/css/colortheme-ukiah-night.min.css +1 -0
  30. package/dist/css/colortheme-ventura-night.css +279 -0
  31. package/dist/css/colortheme-ventura-night.min.css +1 -0
  32. package/dist/js/cagov.core.js +129 -61
  33. package/dist/js/cagov.core.min.js +2 -2
  34. package/dist/readme.md +2 -2
  35. package/package.json +2 -2
  36. package/readme.md +1 -1
@@ -1,4 +1,5 @@
1
- /*! State Web Template Version 6.5.4 */
1
+
2
+ /*! State Web Template Version 6.6.0-beta */
2
3
  @charset "UTF-8";
3
4
  /*!
4
5
  * Bootstrap v5.3.8 (https://getbootstrap.com/)
@@ -12044,7 +12045,9 @@ textarea.form-control-lg {
12044
12045
  .d-print-none {
12045
12046
  display: none !important;
12046
12047
  }
12047
- }:root {
12048
+ }
12049
+
12050
+ /*# sourceMappingURL=bootstrap.css.map */:root {
12048
12051
  --white: #fff;
12049
12052
  --gray-50: #fafafa;
12050
12053
  --gray-75: #f3f3f4;
@@ -12105,16 +12108,28 @@ textarea.form-control-lg {
12105
12108
  --share-github: #25292e;
12106
12109
  --btn-default-color: var(--gray-900);
12107
12110
  --text-color: var(--gray-900, #3b3a48);
12111
+ --text-color-hover: var(--black, #000);
12112
+ --text-secondary: var(--gray-800, #4a4958);
12108
12113
  --text-muted: var(--gray-700, #5e5e6a);
12109
12114
  --link-color: var(--brand-primary, #046b99);
12110
- --link-hover-color: var(--brand-primary-darkest, #005a7f);
12115
+ --link-color-hover: var(--brand-primary-darkest, #005a7f);
12111
12116
  --body-bg: var(--white);
12117
+ --base-light: var(--white);
12118
+ --base-dark: var(--black);
12119
+ --default-bg: var(--gray-50);
12120
+ --default-bg-darker: var(--gray-100);
12121
+ --default-bg-hover: var(--gray-75);
12122
+ --default-bg-hover-darker: var(--gray-100);
12112
12123
  --outline-default-color: #0b8ee5;
12113
12124
  --outline-dark-mode-color: #85cbf9;
12114
- --font-family-sans-serif: "Public Sans", system-ui, -apple-system, "Segoe UI",
12115
- "Roboto", "Helvetica Neue", "Noto Sans", sans-serif;
12125
+ --outline-for-dark-bg: #85cbf9;
12126
+ --outline-for-light-bg: #0b8ee5;
12127
+ --font-family-sans-serif:
12128
+ "Public Sans", system-ui, -apple-system, "Segoe UI", "Roboto",
12129
+ "Helvetica Neue", "Noto Sans", sans-serif;
12116
12130
  --font-family-serif: "Merriweather", "Times New Roman", serif;
12117
- --font-family-monospace: menlo, monaco, consolas, "Courier New", monospace !default;
12131
+ --font-family-monospace:
12132
+ menlo, monaco, consolas, "Courier New", monospace !default;
12118
12133
  --font-size-base: 1rem;
12119
12134
  --font-size-regular: calc(var(--font-size-base, 1rem) * 1.125);
12120
12135
  --font-size-large: calc(var(--font-size-base, 1rem) * 1.4375);
@@ -12162,6 +12177,8 @@ textarea.form-control-lg {
12162
12177
  --padding-xs-horizontal: 5px;
12163
12178
  --line-height-large: 1.3;
12164
12179
  --line-height-small: 1.5;
12180
+ --border-color-default: var(--gray-200, #d4d4d7);
12181
+ --border-color-muted: var(--gray-100, #ededef);
12165
12182
  --border-radius-base: 0;
12166
12183
  --border-radius-large: 6px;
12167
12184
  --border-radius-small: 3px;
@@ -12197,10 +12214,34 @@ textarea.form-control-lg {
12197
12214
  --alert-danger-border: color-mix(in srgb, var(--state-danger-bg), #000 7%);
12198
12215
  --blockquote-border-color: var(--gray-100, #ededef) !default;
12199
12216
  --text-field-color: rgba(255 255 255 / 80%);
12217
+ --text-field-bg-color: var(--white, #fff);
12200
12218
  --ca-gov-logo: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8192 4563'><defs><linearGradient id='grad1' y1='2329' x2='0' y2='4499' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%238b5a24'/><stop offset='1' stop-color='%23441a12'/></linearGradient><linearGradient id='grad2' y1='396' x2='0' y2='4498' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%231b93b8'/><stop offset='.6' stop-color='%231b93b8'/><stop offset='1' stop-color='%2304628d'/></linearGradient></defs><path fill='url(%23grad1)' d='M7850 3454l-4 2c-6-125-108-382-197-463 39-115-15-173-46-212-18-23-79-39-106-49-97-147-304-280-593-365-188-55-410-91-661-96-11 0-24-1-37-1-25 0-53 1-84 3-230 13-583 64-665 64h-7c-35-2-120-40-221-79-119-47-257-98-360-98 0 0-21 0-31 2-97 12-324 157-409 203-58 32-335 150-345 153-133 45-227 197-267 223-4-16-54-86-125-86s-17 1-25 3c-86 36-80 99-80 130-17-7-42-38-89-37s-37 4-59 14c-95 51-44 134-66 163-34 45-146 157-188 234-18 32 2 115-12 148-37 91-238 251-256 288-7 17 47 71 114 123 61 48 82 79 175 104s385-51 443-57h1c17 0 47 11 86 21 34 9 75 17 121 17s26 0 39-2c60-13 100-40 133-73 54-55 86-125 148-152 47-21 108-37 161-37s50 4 70 13c-99 177-77 414-112 448-39 37-69 76-92 113-85 130-97 248-137 276-11 8-26 10-42 10-46 0-109-22-154-22s-20 1-29 4c-53 19-176 133-131 160 14 1 216 1 428 1h184c6 0 118-103 124-103h299c28-4 25-49 154-115 146-57 76-339 263-554 2 0 57-52 70-52 65 0 174 118 566 118s487-135 541-135 81 41 81 54c-175 298 266 632 230 653-1 1-3 1-4 1-15 0-58-24-122-24s-55 4-87 15c-72 24-129 114-74 141 15 0 190 1 364 1s194 0 263-1c22-3 20-45 19-86-1-27-1-53 5-68 18-24 35-108 81-167 46-50 81-89 119-89s31 7 47 21c83 45 282 70 395 111 47 17 80 36 82 62-2 14-13 18-29 18s-15-1-23-2c-28-4-64-13-99-13s-36 3-52 9c-51 19-103 75-118 116-8 22-5 40 16 45h470c54 0 34-108 154-348 18-68-151-160-175-288-16-84-32-250-34-412l3-1 1-1hZ'/><path fill='url(%23grad2)' d='M5362 193h774l711 1843c-187-43-388-67-598-72h-44c-30 0-61 1-90 3h-10c-13 1-26 2-39 3l-312-807-327 846c-9-4-18-8-27-11-19-8-39-16-59-24-156-62-269-113-422-121-153-7-208 25-208 25l651-1685ZM2279 4542c478 0 838-95 1157-264l69-174c-113 17-258 49-374 21s-180-75-289-161c-42-33-109-87-161-159-120 28-248 43-389 43-924 0-1569-643-1569-1563s681-1568 1550-1550c476 10 919 194 1318 593l283-718C3432 236 2874 30 2292 30S1107 249 685 646C246 1058 4 1639 4 2281c0 1332 936 2262 2275 2262v-1h0Z'/><path fill='%23b91f39' d='M2886 1844l-148-424-148 424h-446l361 276-128 424 361-276 361 276-128-424 361-276h-446 1-Z'/></svg>")
12201
12219
  no-repeat;
12202
12220
  --is-mobile: 0;
12221
+
12222
+ /* utility header */
12223
+ --utility-link: #000;
12224
+ --utility-link-hover: #4a4958;
12225
+ --utility-header-background: #eef8fb;
12226
+
12227
+ /* main nav */
12228
+ --mobile-menu-icon-color: var(--brand-primary);
12229
+ --main-nav-color: var(--brand-primary);
12230
+ --main-nav-color-hover: var(--gray-900);
12231
+ --main-nav-bg: var(--white);
12232
+ --main-nav-bg-hover: var(--gray-50);
12233
+ --main-nav-border-color: var(--gray-200);
12234
+ --main-nav-color-active: var(--black);
12235
+ --main-nav-color-active-hover: var(--gray-800);
12236
+ --main-nav-bg-active: var(--gray-50);
12237
+ --main-nav-bg-active-hover: var(--gray-100);
12238
+
12239
+ /* global footer */
12240
+ --global-footer-bg: var(--gray-50);
12241
+ --footer-links-color: var(--black);
12242
+ --footer-links-color-hover: var(--gray-800);
12203
12243
  }
12244
+
12204
12245
  @media (max-width: 991px) {
12205
12246
  :root {
12206
12247
  --is-mobile: 1;
@@ -12263,6 +12304,10 @@ textarea.form-control-lg {
12263
12304
  /* Mobile navigation drawer background */
12264
12305
  --mobile-drawer: var(--color-p2-darker);
12265
12306
  --mobile-drawer-active: var(--color-p2);
12307
+
12308
+ /* Global */
12309
+ --link-color: var(--color-p2);
12310
+ --link-color-hover: var(--color-p2-darker);
12266
12311
  }
12267
12312
 
12268
12313
  /* color-mix is used for the newer browsers */
@@ -14425,7 +14470,7 @@ textarea.form-control-lg {
14425
14470
  body {
14426
14471
  font: var(--font-size-regular) / var(--line-height-base)
14427
14472
  var(--font-family-sans-serif);
14428
- color: var(--gray-900, #3b3a48);
14473
+ color: var(--text-color, #3b3a48);
14429
14474
  overflow-y: scroll;
14430
14475
  }
14431
14476
 
@@ -14437,12 +14482,12 @@ body {
14437
14482
  }
14438
14483
 
14439
14484
  a {
14440
- color: var(--color-p2, #046b99);
14485
+ color: var(--link-color, #046b99);
14441
14486
  }
14442
14487
 
14443
14488
  a:hover,
14444
14489
  a:focus {
14445
- color: var(--color-p2-darker, #214a68);
14490
+ color: var(--link-color-hover, #214a68);
14446
14491
  }
14447
14492
 
14448
14493
  a:focus {
@@ -14770,6 +14815,12 @@ svg ~ .external-link-icon,
14770
14815
  display: none;
14771
14816
  }
14772
14817
 
14818
+ .socialsharer-container a.cagov-external-link::after,
14819
+ a[class*="ca-gov-icon-"].cagov-external-link::after {
14820
+ content: none;
14821
+ display: none;
14822
+ }
14823
+
14773
14824
  /* stylelint-disable-next-line no-descending-specificity */
14774
14825
  .icon-abs-right .external-link-icon {
14775
14826
  position: absolute;
@@ -14994,7 +15045,7 @@ a.list-group-item {
14994
15045
 
14995
15046
  /* Default layout is 1 column */
14996
15047
  .main-content {
14997
- background: #fff;
15048
+ background: var(--body-bg, #fff);
14998
15049
  min-height: 400px;
14999
15050
  }
15000
15051
  .main-content > .section {
@@ -15088,7 +15139,8 @@ a.list-group-item {
15088
15139
  left: 50% !important;
15089
15140
  transform: translateX(-50%);
15090
15141
  clip: unset;
15091
- background-color: white;
15142
+ background-color: var(--body-bg, #fff);
15143
+ color: var(--text-color, #292b2c);
15092
15144
  border-radius: 0 0 7px 7px;
15093
15145
  overflow: hidden;
15094
15146
  }
@@ -15102,40 +15154,37 @@ a.list-group-item {
15102
15154
  position: relative;
15103
15155
  z-index: 1;
15104
15156
  padding: 0;
15105
- background: var(--white, #fff);
15157
+ background: var(--body-bg, #fff);
15106
15158
  width: auto;
15107
15159
  }
15108
15160
 
15109
15161
  .global-header .section-default {
15110
- background-color: var(--white, #fff);
15162
+ background-color: var(--body-bg, #fff);
15111
15163
  }
15112
15164
 
15113
15165
  @media (min-width: 992px) {
15114
15166
 
15115
15167
  .global-header .section-default {
15116
- border-bottom: 1px solid var(--gray-200, #d4d4d7)
15168
+ border-bottom: 1px solid var(--border-color-default, #d4d4d7)
15117
15169
  }
15118
15170
  }
15119
15171
 
15120
15172
  .global-header .section-default::after {
15121
15173
  content: "";
15122
- border-bottom: 1px solid var(--gray-200, #d4d4d7);
15174
+ border-bottom: 1px solid var(--border-color-default, #d4d4d7);
15123
15175
  position: absolute;
15124
15176
  width: 100%;
15125
15177
  left: 0;
15126
15178
  }
15127
15179
 
15128
- @media (min-width: 992px) {
15129
-
15130
- .global-header .section-default::after {
15131
- border-bottom: none
15132
- }
15180
+ .global-header .section-default::after ` @media (min-width: 992px) {
15181
+ border-bottom: none;
15133
15182
  }
15134
15183
 
15135
15184
  @media (min-width: 992px) {
15136
15185
 
15137
15186
  .global-header {
15138
- border-bottom: 1px solid var(--gray-200, #d4d4d7)
15187
+ border-bottom: 1px solid var(--border-color-default, #d4d4d7)
15139
15188
  }
15140
15189
  .global-header .section-default::after {
15141
15190
  bottom: 55px;
@@ -15413,7 +15462,7 @@ h2 {
15413
15462
  font: 1rem var(--font-family-sans-serif);
15414
15463
  margin: 0;
15415
15464
  padding: 0;
15416
- color: var(--gray-900, #3b3a48);
15465
+ color: var(--text-color, #3b3a48);
15417
15466
  height: 20px;
15418
15467
  line-height: 1.2em;
15419
15468
  transition: all 0.3s;
@@ -15431,7 +15480,7 @@ h2 {
15431
15480
  font: 700 1.75rem var(--font-family-sans-serif);
15432
15481
  margin: 0;
15433
15482
  padding: 0;
15434
- color: var(--color-p3, #323a45);
15483
+ color: var(--text-color, #3b3a48);
15435
15484
  height: 24px;
15436
15485
  line-height: 1.2em;
15437
15486
  transition: all 0.3s;
@@ -15512,8 +15561,8 @@ h2 {
15512
15561
  ----------------------------------------- */
15513
15562
 
15514
15563
  .global-footer {
15515
- background-color: var(--gray-50, #fafafa);
15516
- border-top: 1px solid var(--gray-200, #d4d4d7);
15564
+ background-color: var(--global-footer-bg, var(--gray-50, #fafafa));
15565
+ border-top: 1px solid var(--border-color-default, var(--gray-200, #d4d4d7));
15517
15566
  padding-top: 1rem;
15518
15567
  }
15519
15568
 
@@ -15586,12 +15635,12 @@ h2 {
15586
15635
  }
15587
15636
 
15588
15637
  .global-footer .footer-links li a {
15589
- color: var(--black, #000);
15638
+ color: var(--footer-links-color, var(--black, #000));
15590
15639
  text-decoration: none;
15591
15640
  }
15592
15641
 
15593
15642
  .global-footer .footer-links li a:hover {
15594
- color: var(--gray-800, #4a4958);
15643
+ color: var(--footer-links-color-hover, var(--gray-800, #4a4958));
15595
15644
  }
15596
15645
 
15597
15646
  .global-footer .copyright {
@@ -15660,7 +15709,7 @@ h2 {
15660
15709
  }
15661
15710
 
15662
15711
  .search-container #Search .gsc-search-button:focus {
15663
- outline: 2px solid var(--outline-dark-mode-color);
15712
+ outline: 2px solid var(--outline-for-dark-bg);
15664
15713
  outline-offset: -4px;
15665
15714
  }
15666
15715
 
@@ -15678,7 +15727,7 @@ h2 {
15678
15727
 
15679
15728
  .search-container #Search .gsc-search-button {
15680
15729
  background-color: var(--white, #fff);
15681
- border-color: var(--white, #fff)
15730
+ border-color: var(--gray-600, #72717c)
15682
15731
  }
15683
15732
 
15684
15733
  .search-container #Search .gsc-search-button .ca-gov-icon-search {
@@ -15688,7 +15737,8 @@ h2 {
15688
15737
  .search-container #Search .gsc-search-button:hover,
15689
15738
  .search-container #Search .gsc-search-button:focus {
15690
15739
  background-color: var(--gray-50, #fafafa);
15691
- border-color: var(--gray-50, #fafafa);
15740
+ outline: var(--outline-for-light-bg, #0b8ee5);
15741
+ outline-offset: -2px;
15692
15742
  }
15693
15743
 
15694
15744
  .search-container #Search .gsc-search-button:hover .ca-gov-icon-search, .search-container #Search .gsc-search-button:focus .ca-gov-icon-search {
@@ -15705,16 +15755,10 @@ h2 {
15705
15755
  }
15706
15756
 
15707
15757
  .search-container .search-textfield::placeholder {
15708
- color: var(--black, #000);
15758
+ color: var(--text-field-color, #000);
15709
15759
  opacity: 1;
15710
15760
  }
15711
15761
 
15712
- /* stylelint-disable-next-line selector-pseudo-element-no-unknown */
15713
-
15714
- .search-container .search-textfield::input-placeholder {
15715
- color: var(--black, #000);
15716
- }
15717
-
15718
15762
  .search-container .search-textfield:focus {
15719
15763
  outline: 2px solid var(--outline-default-color);
15720
15764
  outline-offset: -2px;
@@ -15763,18 +15807,14 @@ h2 {
15763
15807
  width: 100%;
15764
15808
  }
15765
15809
 
15766
- input[type="search"].search-textfield {
15810
+ & input[type="search"].search-textfield {
15767
15811
  -webkit-appearance: none;
15768
- background-color: canvas;
15769
- border: 1px solid #72717c;
15812
+ background-color: var(--text-field-bg-color, #fff);
15813
+ border: 1px solid var(--gray-600, #72717c);
15770
15814
  border-radius: 5px 0 0 5px;
15771
15815
  }
15772
15816
 
15773
15817
  @media (max-width: 991px) {
15774
- input[type="search"].search-textfield {
15775
- border-color: var(--white, #fff);
15776
- }
15777
-
15778
15818
  input[type="search"].search-textfield:focus {
15779
15819
  outline-offset: -4px;
15780
15820
  }
@@ -15787,6 +15827,22 @@ input[type="search"].search-textfield {
15787
15827
  .cse .gsc-control-cse,
15788
15828
  .gsc-control-cse {
15789
15829
  padding: 0 !important;
15830
+ background-color: var(--body-bg, #fff) !important;
15831
+ border-color: var(--body-bg, #fff) !important;
15832
+ }
15833
+
15834
+ .gsc-webResult.gsc-result,
15835
+ .gsc-results .gsc-imageResult {
15836
+ background-color: var(--body-bg, #fff) !important;
15837
+ border-color: var(--body-bg, #fff) !important;
15838
+ }
15839
+
15840
+ .gsc-result-info-container .gsc-result-info {
15841
+ color: var(--text-muted, #5e5e6a);
15842
+ }
15843
+
15844
+ .gsc-orderby-container .gsc-orderby-label {
15845
+ color: var(--text-muted, #5e5e6a);
15790
15846
  }
15791
15847
 
15792
15848
  /* Large Search Animation and Styling */
@@ -15857,7 +15913,7 @@ input[type="search"].search-textfield {
15857
15913
  }
15858
15914
  }
15859
15915
 
15860
- button.gsc-search-button {
15916
+ & button.gsc-search-button {
15861
15917
  border-radius: 0 5px 5px 0;
15862
15918
  padding: 0 12px;
15863
15919
  border: 1px solid;
@@ -15996,7 +16052,7 @@ GOOGLE CUSTOM SEARCH CUSTOMIZATION OVERRIDES
15996
16052
  display: none;
15997
16053
  }
15998
16054
 
15999
- table.gsc-search-box table td div {
16055
+ & table.gsc-search-box table td div {
16000
16056
  padding: 0 !important;
16001
16057
  }
16002
16058
 
@@ -16006,7 +16062,7 @@ table.gsc-search-box table td div {
16006
16062
  border: none !important;
16007
16063
  }
16008
16064
 
16009
- table.gsc-search-box td {
16065
+ & table.gsc-search-box td {
16010
16066
  padding: 0 !important;
16011
16067
  }
16012
16068
 
@@ -16034,23 +16090,23 @@ table.gsc-search-box td {
16034
16090
  }
16035
16091
 
16036
16092
  /* clears the ‘X’ from Internet Explorer */
16037
- input[type="search"]::-ms-clear {
16093
+ & input[type="search"]::-ms-clear {
16038
16094
  display: none;
16039
16095
  width: 0;
16040
16096
  height: 0;
16041
16097
  }
16042
16098
 
16043
- input[type="search"]::-ms-reveal {
16099
+ & input[type="search"]::-ms-reveal {
16044
16100
  display: none;
16045
16101
  width: 0;
16046
16102
  height: 0;
16047
16103
  }
16048
16104
 
16049
16105
  /* clears the ‘X’ from Chrome */
16050
- input[type="search"]::-webkit-search-decoration,
16051
- input[type="search"]::-webkit-search-cancel-button,
16052
- input[type="search"]::-webkit-search-results-button,
16053
- input[type="search"]::-webkit-search-results-decoration {
16106
+ & input[type="search"]::-webkit-search-decoration,
16107
+ & input[type="search"]::-webkit-search-cancel-button,
16108
+ & input[type="search"]::-webkit-search-results-button,
16109
+ & input[type="search"]::-webkit-search-results-decoration {
16054
16110
  display: none;
16055
16111
  }
16056
16112
  /* -----------------------------------------
@@ -16124,6 +16180,15 @@ input[type="search"]::-webkit-search-results-decoration {
16124
16180
  .compact + .search-results-container .search-results .search-results-header {
16125
16181
  padding-top: 50px;
16126
16182
  }
16183
+
16184
+ div.search-results-header form .search-textfield {
16185
+ outline-offset: -4px;
16186
+ }
16187
+
16188
+ div.search-results-header form .gsc-search-button {
16189
+ display: block !important;
16190
+ outline-offset: -4px;
16191
+ }
16127
16192
  /* -----------------------------------------
16128
16193
  GOOGLE CSE RESULTS
16129
16194
  /src/css/cagov/search-google-cse.css
@@ -16151,27 +16216,48 @@ input[type="search"]::-webkit-search-results-decoration {
16151
16216
 
16152
16217
  .gs-result a.gs-title,
16153
16218
  .gs-result a.gs-title b {
16154
- color: var(--color-p2, #046b99) !important;
16219
+ color: var(--link-color, #046b99) !important;
16155
16220
  }
16156
16221
 
16222
+ .gs-result a.gs-title:hover,
16223
+ .gs-result a.gs-title:focus,
16224
+ .gs-result a.gs-title b:hover,
16225
+ .gs-result a.gs-title b:focus {
16226
+ color: var(--link-hover-color, #005a7f) !important;
16227
+ }
16228
+
16157
16229
  .gs-result .gsc-url-top .gs-visibleUrl-breadcrumb span {
16158
- color: var(--gray-600, #72717c) !important;
16230
+ color: var(--text-muted, #72717c) !important;
16159
16231
  }
16160
16232
 
16161
16233
  .gs-result .gs-snippet {
16162
- color: var(--gray-900, #3b3a48) !important;
16234
+ color: var(--text-color, #3b3a48) !important;
16163
16235
  }
16164
16236
 
16165
16237
  .gsc-cursor-box .gsc-cursor .gsc-cursor-page {
16166
- color: var(--color-p3, #323a45) !important;
16238
+ color: var(--text-color, #3b3a48) !important;
16167
16239
  }
16168
16240
 
16169
16241
  .gsc-cursor-box .gsc-cursor .gsc-cursor-current-page {
16170
- color: var(--color-p3, #323a45) !important;
16242
+ color: var(--text-color, #3b3a48) !important;
16171
16243
  }
16172
16244
 
16173
16245
  .gcsc-find-more-on-google {
16174
- color: var(--color-p2, #046b99) !important;
16246
+ color: var(--link-color, #046b99) !important;
16247
+ }
16248
+
16249
+ .gcsc-find-more-on-google-magnifier {
16250
+ fill: var(--link-color, #046b99) !important;
16251
+ }
16252
+
16253
+ .gsc-results .gsc-cursor-box .gsc-cursor-page {
16254
+ background-color: var(--body-bg, #fff) !important;
16255
+ color: var(--link-color, #046b99) !important;
16256
+ }
16257
+
16258
+ .gsc-results .gsc-cursor-box .gsc-cursor-current-page {
16259
+ color: var(--text-color, #3b3a48) !important;
16260
+ background-color: var(--body-bg, #fff) !important;
16175
16261
  }
16176
16262
  /* -----------------------------------------
16177
16263
  GLOBAL NAVIGATION - /src/css/cagov/navigation.css
@@ -16283,7 +16369,7 @@ input[type="search"]::-webkit-search-results-decoration {
16283
16369
  .nav-item-search:focus > a,
16284
16370
  .nav-item-search:focus .first-level-btn,
16285
16371
  .nav-item-search:focus .first-level-link {
16286
- color: var(--color-p2, #046b99);
16372
+ color: var(--main-nav-color, var(--color-p2, #046b99));
16287
16373
  }
16288
16374
 
16289
16375
  .nav-item:hover > a > span[class^="ca-gov-icon"], .nav-item:hover .first-level-btn > span[class^="ca-gov-icon"], .nav-item:hover .first-level-link > span[class^="ca-gov-icon"], .nav-item:focus > a > span[class^="ca-gov-icon"], .nav-item:focus .first-level-btn > span[class^="ca-gov-icon"], .nav-item:focus .first-level-link > span[class^="ca-gov-icon"], .nav-item-search:hover > a > span[class^="ca-gov-icon"], .nav-item-search:hover .first-level-btn > span[class^="ca-gov-icon"], .nav-item-search:hover .first-level-link > span[class^="ca-gov-icon"], .nav-item-search:focus > a > span[class^="ca-gov-icon"], .nav-item-search:focus .first-level-btn > span[class^="ca-gov-icon"], .nav-item-search:focus .first-level-link > span[class^="ca-gov-icon"] {
@@ -16296,7 +16382,7 @@ input[type="search"]::-webkit-search-results-decoration {
16296
16382
  .nav-item-search.active > a,
16297
16383
  .nav-item-search.active .first-level-btn,
16298
16384
  .nav-item-search.active .first-level-link {
16299
- color: var(--color-p2, #046b99);
16385
+ color: var(--main-nav-color, var(--color-p2, #046b99));
16300
16386
  }
16301
16387
 
16302
16388
  /* stylelint-disable-next-line no-descending-specificity */
@@ -16359,14 +16445,14 @@ input[type="search"]::-webkit-search-results-decoration {
16359
16445
  position: relative;
16360
16446
  text-align: center;
16361
16447
  text-decoration: none;
16362
- color: var(--color-p2, #046b99);
16448
+ color: var(--main-nav-color, var(--color-p2, #046b99));
16363
16449
  }
16364
16450
 
16365
16451
  .first-level-link:hover,
16366
16452
  .first-level-link:focus,
16367
16453
  .first-level-btn:hover,
16368
16454
  .first-level-btn:focus {
16369
- color: var(--gray-900, #3b3a48);
16455
+ color: var(--main-nav-color-hover, var(--gray-900, #3b3a48));
16370
16456
  }
16371
16457
 
16372
16458
  .first-level-link:focus, .first-level-btn:focus {
@@ -16410,21 +16496,24 @@ input[type="search"]::-webkit-search-results-decoration {
16410
16496
  .full-width-nav .nav-item .first-level-link:focus,
16411
16497
  .full-width-nav .nav-item .first-level-btn:hover,
16412
16498
  .full-width-nav .nav-item .first-level-btn:focus {
16413
- background-color: var(--gray-50, #fafafa);
16499
+ background-color: var(--main-nav-bg-hover, var(--gray-50, #fafafa));
16414
16500
  }
16415
16501
 
16416
16502
  .full-width-nav .nav-item .first-level-link.active, .full-width-nav .nav-item .first-level-btn.active {
16417
- background-color: var(--gray-50, #fafafa);
16503
+ background-color: var(--main-nav-bg-active, var(--gray-50, #fafafa));
16418
16504
  position: relative;
16419
- color: var(--black, #000);
16505
+ color: var(--main-nav-color-active, var(--black, #000));
16420
16506
  }
16421
16507
 
16422
16508
  .full-width-nav .nav-item .first-level-link.active:hover,
16423
16509
  .full-width-nav .nav-item .first-level-link.active:focus,
16424
16510
  .full-width-nav .nav-item .first-level-btn.active:hover,
16425
16511
  .full-width-nav .nav-item .first-level-btn.active:focus {
16426
- color: var(--gray-800, #4a4958);
16427
- background-color: var(--gray-100, #f3f3f4);
16512
+ color: var(--main-nav-color-active-hover, var(--gray-800, #4a4958));
16513
+ background-color: var(
16514
+ --main-nav-bg-active-hover,
16515
+ var(--gray-100, #f3f3f4)
16516
+ );
16428
16517
  }
16429
16518
 
16430
16519
  .full-width-nav .nav-item .first-level-link.active::before, .full-width-nav .nav-item .first-level-btn.active::before {
@@ -16433,7 +16522,8 @@ input[type="search"]::-webkit-search-results-decoration {
16433
16522
  top: 0;
16434
16523
  left: 0;
16435
16524
  height: 100%;
16436
- border-left: 1px solid var(--gray-200, #d4d4d7);
16525
+ border-left: 1px solid
16526
+ var(--main-nav-border-color, var(--gray-200, #d4d4d7));
16437
16527
  }
16438
16528
 
16439
16529
  .full-width-nav .nav-item .first-level-link.active::after, .full-width-nav .nav-item .first-level-btn.active::after {
@@ -16442,7 +16532,8 @@ input[type="search"]::-webkit-search-results-decoration {
16442
16532
  top: 0;
16443
16533
  right: 0;
16444
16534
  height: 100%;
16445
- border-left: 1px solid var(--gray-200, #d4d4d7);
16535
+ border-left: 1px solid
16536
+ var(--main-nav-border-color, var(--gray-200, #d4d4d7));
16446
16537
  }
16447
16538
 
16448
16539
  .full-width-nav .nav-item .first-level-link.has-sub, .full-width-nav .nav-item .first-level-btn.has-sub {
@@ -16472,17 +16563,20 @@ input[type="search"]::-webkit-search-results-decoration {
16472
16563
 
16473
16564
  .full-width-nav .nav-item.active .first-level-link,
16474
16565
  .full-width-nav .nav-item.active .first-level-btn {
16475
- background-color: var(--gray-50, #fafafa);
16566
+ background-color: var(--main-nav-bg-active, var(--gray-50, #fafafa));
16476
16567
  position: relative;
16477
- color: var(--black, #000);
16568
+ color: var(--main-nav-color-active, var(--black, #000));
16478
16569
  }
16479
16570
 
16480
16571
  .full-width-nav .nav-item.active .first-level-link:hover,
16481
16572
  .full-width-nav .nav-item.active .first-level-link:focus,
16482
16573
  .full-width-nav .nav-item.active .first-level-btn:hover,
16483
16574
  .full-width-nav .nav-item.active .first-level-btn:focus {
16484
- color: var(--gray-800, #4a4958);
16485
- background-color: var(--gray-100, #f3f3f4);
16575
+ color: var(--main-nav-color-active-hover, var(--gray-800, #4a4958));
16576
+ background-color: var(
16577
+ --main-nav-bg-active-hover,
16578
+ var(--gray-100, #f3f3f4)
16579
+ );
16486
16580
  }
16487
16581
 
16488
16582
  .full-width-nav .nav-item.active .first-level-link::before, .full-width-nav .nav-item.active .first-level-btn::before {
@@ -16491,7 +16585,8 @@ input[type="search"]::-webkit-search-results-decoration {
16491
16585
  top: 0;
16492
16586
  left: 0;
16493
16587
  height: 100%;
16494
- border-left: 1px solid var(--gray-200, #d4d4d7);
16588
+ border-left: 1px solid
16589
+ var(--main-nav-border-color, var(--gray-200, #d4d4d7));
16495
16590
  }
16496
16591
 
16497
16592
  .full-width-nav .nav-item.active .first-level-link::after, .full-width-nav .nav-item.active .first-level-btn::after {
@@ -16500,7 +16595,8 @@ input[type="search"]::-webkit-search-results-decoration {
16500
16595
  top: 0;
16501
16596
  right: 0;
16502
16597
  height: 100%;
16503
- border-left: 1px solid var(--gray-200, #d4d4d7);
16598
+ border-left: 1px solid
16599
+ var(--main-nav-border-color, var(--gray-200, #d4d4d7));
16504
16600
  }
16505
16601
 
16506
16602
  @media (min-width: 992px) {
@@ -16534,9 +16630,9 @@ input[type="search"]::-webkit-search-results-decoration {
16534
16630
 
16535
16631
  .top-level-nav .nav-item .sub-nav {
16536
16632
  top: 100%;
16537
- border: solid 1px #ccc;
16633
+ border: solid 1px var(--main-nav-border-color, #ccc);
16538
16634
  box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
16539
- background: var(--white, #fff);
16635
+ background: var(--main-nav-bg, var(--white, #fff));
16540
16636
  }
16541
16637
  .top-level-nav .nav-item .sub-nav .second-level-nav > li {
16542
16638
  border: none;
@@ -16544,19 +16640,19 @@ input[type="search"]::-webkit-search-results-decoration {
16544
16640
 
16545
16641
  .top-level-nav .nav-item .sub-nav .second-level-nav > li:hover,
16546
16642
  .top-level-nav .nav-item .sub-nav .second-level-nav > li:focus {
16547
- background: #fff;
16643
+ background: var(--main-nav-bg-hover, #fff);
16548
16644
  }
16549
16645
 
16550
16646
  .top-level-nav .nav-item .sub-nav .second-level-nav .link-description {
16551
- color: var(--gray-700, #5e5e6a);
16647
+ color: var(--text-muted, var(--gray-700, #5e5e6a));
16552
16648
  }
16553
16649
 
16554
16650
  .top-level-nav .nav-item .sub-nav .second-level-link {
16555
- color: var(--color-p2, #046b99);
16651
+ color: var(--main-nav-color, var(--color-p2, #046b99));
16556
16652
  }
16557
16653
 
16558
16654
  .top-level-nav .nav-item .sub-nav .second-level-link [class^="ca-gov-icon-"] {
16559
- color: var(--gray-700, #5e5e6a);
16655
+ color: var(--text-muted, var(--gray-700, #5e5e6a));
16560
16656
  }
16561
16657
 
16562
16658
  .top-level-nav .nav-item > a {
@@ -16715,7 +16811,7 @@ input[type="search"]::-webkit-search-results-decoration {
16715
16811
  }
16716
16812
 
16717
16813
  .top-level-nav .nav-item .first-level-link:focus, .top-level-nav .nav-item .first-level-btn:focus {
16718
- outline: 2px solid var(--outline-dark-mode-color);
16814
+ outline: 2px solid var(--outline-for-dark-bg);
16719
16815
  outline-offset: -4px;
16720
16816
  }
16721
16817
 
@@ -16775,7 +16871,7 @@ input[type="search"]::-webkit-search-results-decoration {
16775
16871
  }
16776
16872
 
16777
16873
  .top-level-nav .nav-item .sub-nav .second-level-link:focus {
16778
- outline: 2px solid var(--outline-dark-mode-color);
16874
+ outline: 2px solid var(--outline-for-dark-bg);
16779
16875
  outline-offset: -4px;
16780
16876
  }
16781
16877
 
@@ -16814,9 +16910,17 @@ input[type="search"]::-webkit-search-results-decoration {
16814
16910
  .header-decoration {
16815
16911
  display: none;
16816
16912
  }
16817
- .nav-drawer + .search-container #Search .gsc-search-button:focus {
16818
- outline: 2px solid var(--outline-default-color);
16913
+ .nav-drawer + .search-container #Search .search-textfield {
16914
+ border-color: var(--white, #fff);
16915
+ }
16916
+
16917
+ .nav-drawer + .search-container #Search .gsc-search-button {
16918
+ border-color: var(--white, #fff);
16819
16919
  }
16920
+
16921
+ .nav-drawer + .search-container #Search .gsc-search-button:focus {
16922
+ outline: 2px solid var(--outline-for-light-bg, #0b8ee5);
16923
+ }
16820
16924
  }
16821
16925
 
16822
16926
  .nav-arrow-down {
@@ -16873,7 +16977,7 @@ input[type="search"]::-webkit-search-results-decoration {
16873
16977
 
16874
16978
  .full-width-nav .main-navigation.dropdown .second-level-nav .unit1 a.second-level-link:hover,
16875
16979
  .full-width-nav .main-navigation.dropdown .second-level-nav .unit1 a.second-level-link:focus {
16876
- background-color: var(--gray-50, #fafafa);
16980
+ background-color: var(--main-nav-bg-hover, var(--gray-50, #fafafa));
16877
16981
  text-decoration: none;
16878
16982
  }
16879
16983
  .full-width-nav .main-navigation .top-level-nav .first-level-btn.has-sub .carrot {
@@ -16890,8 +16994,8 @@ input[type="search"]::-webkit-search-results-decoration {
16890
16994
  position: relative;
16891
16995
  width: 0.55rem;
16892
16996
  height: 0.55rem;
16893
- border-top: 2px solid var(--color-p2, #046b99);
16894
- border-left: 2px solid var(--color-p2, #046b99);
16997
+ border-top: 2px solid var(--main-nav-color, #046b99);
16998
+ border-left: 2px solid var(--main-nav-color, #046b99);
16895
16999
  transform: rotate(225deg);
16896
17000
  vertical-align: middle;
16897
17001
  top: -2px;
@@ -17402,7 +17506,7 @@ a.second-level-link {
17402
17506
  }
17403
17507
 
17404
17508
  .second-level-nav.flex a:hover {
17405
- background: #fff;
17509
+ background: var(--main-nav-bg-hover, #fff);
17406
17510
  }
17407
17511
 
17408
17512
  .second-level-nav.flex .sub-nav-link {
@@ -17410,15 +17514,23 @@ a.second-level-link {
17410
17514
  margin: 0;
17411
17515
  }
17412
17516
 
17517
+ .second-level-nav.flex .image-icon {
17518
+ width: 6rem;
17519
+ }
17520
+
17413
17521
  .second-level-nav.flex.with-border a {
17414
- border-top: 2px dotted #ccc;
17415
- border-right: 2px dotted #ccc;
17416
- border-bottom: 2px dotted #ccc;
17522
+ border-top: 2px dotted var(--border-color-default, #ccc);
17523
+ border-right: 2px dotted var(--border-color-default, #ccc);
17524
+ border-bottom: 2px dotted var(--border-color-default, #ccc);
17417
17525
  }
17418
17526
 
17419
- .second-level-nav.flex.with-border a:first-child {
17420
- border-left: 2px dotted #ccc;
17527
+ .second-level-nav.flex.with-border a:first-of-type {
17528
+ border-left: 2px dotted var(--border-color-default, #ccc);
17421
17529
  }
17530
+
17531
+ /* .second-level-nav.flex.with-border a:first-of-type {
17532
+ border-left: 2px dotted var(--border-color-default, #ccc);
17533
+ } */
17422
17534
  }
17423
17535
 
17424
17536
  @media (max-width: 991px) {
@@ -17430,7 +17542,7 @@ a.second-level-link {
17430
17542
 
17431
17543
  .second-level-nav.flex a {
17432
17544
  display: block;
17433
- border-bottom: 1px solid #ccc;
17545
+ border-bottom: 1px solid var(--border-color-default, #ccc);
17434
17546
  padding: 0;
17435
17547
  margin-top: 0;
17436
17548
  margin-bottom: 0;
@@ -17439,7 +17551,7 @@ a.second-level-link {
17439
17551
  }
17440
17552
 
17441
17553
  .second-level-nav.flex a:hover {
17442
- background: #fff;
17554
+ background: var(--main-nav-bg-hover, #fff);
17443
17555
  }
17444
17556
 
17445
17557
  .second-level-nav.flex .sub-nav-link {
@@ -17553,7 +17665,7 @@ header.nav-overlay::after {
17553
17665
  opacity: 1;
17554
17666
  transform: rotate(0deg);
17555
17667
  transition: 0.25s ease-in-out;
17556
- background-color: var(--color-p2, #046b99);
17668
+ background-color: var(--mobile-menu-icon-color, #046b99);
17557
17669
  }
17558
17670
 
17559
17671
  .toggle-menu span:nth-child(1) {
@@ -17599,7 +17711,7 @@ header.nav-overlay::after {
17599
17711
  }
17600
17712
 
17601
17713
  .nav-drawer .toggle-menu:focus {
17602
- outline: 2px solid var(--outline-dark-mode-color);
17714
+ outline: 2px solid var(--outline-for-dark-bg);
17603
17715
  }
17604
17716
 
17605
17717
  /* stylelint-disable-next-line no-descending-specificity */
@@ -17690,7 +17802,7 @@ header.nav-overlay::after {
17690
17802
  }
17691
17803
 
17692
17804
  .mobile-controls.toggle-sub-nav {
17693
- color: var(--color-p2, #046b99);
17805
+ color: var(--mobile-menu-icon-color, #046b99);
17694
17806
  background-color: color-mix(in srgb, var(--color-s1), #000 6%);
17695
17807
  }
17696
17808
 
@@ -17821,8 +17933,8 @@ header.nav-overlay::after {
17821
17933
  width: 100%;
17822
17934
  min-height: 42px;
17823
17935
  transition: all 0.3s ease;
17824
- background: var(--color-s1, #eef8fb);
17825
- color: var(--black, #000);
17936
+ background: var(--utility-header-background, var(--color-s1, #eef8fb));
17937
+ color: var(--text-color, #000);
17826
17938
  }
17827
17939
 
17828
17940
  .utility-header .half {
@@ -17866,14 +17978,14 @@ header.nav-overlay::after {
17866
17978
  display: inline-block;
17867
17979
  padding: 0;
17868
17980
  text-decoration: underline;
17869
- color: var(--black, #000);
17981
+ color: var(--utility-link, #000);
17870
17982
  }
17871
17983
 
17872
17984
  .utility-header a:hover,
17873
17985
  .utility-header a:focus,
17874
17986
  .utility-header a.hovered {
17875
17987
  text-decoration: none;
17876
- color: var(--gray-800, #4a4958);
17988
+ color: var(--utility-link-hover, #4a4958);
17877
17989
  }
17878
17990
 
17879
17991
  .utility-header ul {
@@ -17916,7 +18028,7 @@ header.nav-overlay::after {
17916
18028
 
17917
18029
  .utility-header ul li button:hover,
17918
18030
  .utility-header ul li button:focus {
17919
- color: var(--gray-800, #4a4958);
18031
+ color: var(--utility-link-hover, #4a4958);
17920
18032
  background-color: transparent;
17921
18033
  border: none;
17922
18034
  }
@@ -17951,7 +18063,7 @@ header.nav-overlay::after {
17951
18063
  vertical-align: initial;
17952
18064
  line-height: 120%;
17953
18065
  background: white;
17954
- color: var(--black, #000);
18066
+ color: var(--text-color, #000);
17955
18067
  }
17956
18068
 
17957
18069
  .utility-header .flex-row {
@@ -17981,13 +18093,13 @@ header.nav-overlay::after {
17981
18093
  margin: 0;
17982
18094
  padding-right: 0;
17983
18095
  font-size: 0.95rem;
17984
- color: var(--black, #000);
18096
+ color: var(--utility-link, #000);
17985
18097
  }
17986
18098
 
17987
18099
  .utility-header .flex-row .settings-links button:hover,
17988
18100
  .utility-header .flex-row .settings-links button:focus {
17989
18101
  text-decoration: none;
17990
- color: var(--gray-800, #4a4958);
18102
+ color: var(--utility-link-hover, #4a4958);
17991
18103
  }
17992
18104
 
17993
18105
  .utility-header .flex-row .social-media-links {
@@ -18002,13 +18114,13 @@ header.nav-overlay::after {
18002
18114
 
18003
18115
  .utility-header .flex-row .social-media-links a {
18004
18116
  margin: 0 10px;
18005
- color: var(--black, #000);
18117
+ color: var(--link-color, #000);
18006
18118
  text-decoration: none;
18007
18119
  }
18008
18120
 
18009
18121
  .utility-header .flex-row .social-media-links a:hover,
18010
18122
  .utility-header .flex-row .social-media-links a:focus {
18011
- color: var(--gray-800, #4a4958);
18123
+ color: var(--link-color-hover, #4a4958);
18012
18124
  }
18013
18125
 
18014
18126
  .utility-header .flex-row .social-media-links .header-cagov-logo {
@@ -18048,6 +18160,7 @@ header.nav-overlay::after {
18048
18160
  .utility-header .flex-row .social-media-links .official-tag {
18049
18161
  margin: 0 1rem 0 0;
18050
18162
  font-size: 0.95rem;
18163
+ color: var(--text-color, #3b3a48);
18051
18164
  }
18052
18165
 
18053
18166
  @media (max-width: 767px) {
@@ -18087,7 +18200,7 @@ header.nav-overlay::after {
18087
18200
  .section {
18088
18201
  padding-top: 25px;
18089
18202
  padding-bottom: 25px;
18090
- background: var(--white, #fff);
18203
+ background: var(--body-bg, #fff);
18091
18204
  position: relative;
18092
18205
  overflow: hidden;
18093
18206
  }
@@ -18115,7 +18228,12 @@ header.nav-overlay::after {
18115
18228
  }
18116
18229
 
18117
18230
  .section-default {
18118
- background: var(--gray-50, #fafafa);
18231
+ background: var(--default-bg, var(--gray-50, #fafafa));
18232
+ }
18233
+
18234
+ .section-default-hover:hover,
18235
+ .section-default-hover:focus {
18236
+ background: var(--default-bg-hover, var(--gray-75, #f2f2f2));
18119
18237
  }
18120
18238
 
18121
18239
  .section-understated {
@@ -18520,18 +18638,18 @@ header.nav-overlay::after {
18520
18638
  /* stylelint-disable-next-line no-descending-specificity */
18521
18639
 
18522
18640
  .section-primary a:not(.btn) {
18523
- color: var(--white, #fff);
18641
+ color: var(--dark-section-link-color, var(--white, #fff));
18524
18642
  text-decoration: underline;
18525
18643
  }
18526
18644
 
18527
18645
  .section-primary a:not(.btn):hover,
18528
18646
  .section-primary a:not(.btn):focus {
18529
- color: var(--color-s1, #eef8fb);
18647
+ color: var(--dark-section-link-color-hover, var(--color-s1, #eef8fb));
18530
18648
  text-decoration: underline;
18531
18649
  }
18532
18650
 
18533
18651
  .section-primary a:not(.btn):focus {
18534
- outline: 2px solid var(--outline-dark-mode-color);
18652
+ outline: 2px solid var(--outline-for-dark-bg);
18535
18653
  outline-offset: -2px;
18536
18654
  }
18537
18655
 
@@ -19577,6 +19695,10 @@ html {
19577
19695
  color: var(--white, #fff);
19578
19696
  }
19579
19697
 
19698
+ .alert-banner.alert-dismissible {
19699
+ padding-right: 3rem;
19700
+ }
19701
+
19580
19702
  .alert-banner .alert-icon {
19581
19703
  font-size: 1.6rem;
19582
19704
  position: absolute;
@@ -19781,7 +19903,7 @@ html {
19781
19903
  }
19782
19904
 
19783
19905
  .tab-group .tab-content {
19784
- border: 1px solid var(--gray-200, #d4d4d7);
19906
+ border: 1px solid var(--border-color-default, #d4d4d7);
19785
19907
  }
19786
19908
 
19787
19909
  @media (max-width: 767px) {
@@ -19852,12 +19974,12 @@ html {
19852
19974
  background-color: transparent !important;
19853
19975
  border: none !important;
19854
19976
  cursor: default;
19855
- color: var(--gray-900, #3b3a48) !important;
19977
+ color: var(--text-color, #3b3a48) !important;
19856
19978
  position: relative;
19857
19979
  }
19858
19980
 
19859
19981
  .nav-tabs > li > a.active:hover {
19860
- color: var(--gray-700, #5e5e6a) !important;
19982
+ color: var(--text-muted, #5e5e6a) !important;
19861
19983
  }
19862
19984
 
19863
19985
  .nav-tabs > li > a.active::after {
@@ -19957,14 +20079,14 @@ html {
19957
20079
  padding: 0.5rem 1rem;
19958
20080
  font-size: 1.25rem;
19959
20081
  font-weight: 600;
19960
- background-color: var(--gray-50, #fafafa);
20082
+ background-color: var(--default-bg, #fafafa);
19961
20083
  text-decoration: none;
19962
20084
  position: relative;
19963
20085
  }
19964
20086
 
19965
20087
  .responsive .tab-pane .card-header a:hover,
19966
20088
  .responsive .tab-pane .card-header a:focus {
19967
- background-color: var(--gray-100, #f3f3f4);
20089
+ background-color: var(--default-bg-darker, #f3f3f4);
19968
20090
  }
19969
20091
 
19970
20092
  .responsive .tab-pane .card-header a:focus {
@@ -19977,8 +20099,8 @@ html {
19977
20099
  position: absolute;
19978
20100
  top: 1.125rem;
19979
20101
  right: 1rem;
19980
- border-right: 2px solid black;
19981
- border-top: 2px solid black;
20102
+ border-right: 2px solid var(--base-dark, #000);
20103
+ border-top: 2px solid var(--base-dark, #000);
19982
20104
  border-radius: 3px;
19983
20105
  width: 10px;
19984
20106
  height: 10px;
@@ -19987,12 +20109,12 @@ html {
19987
20109
  }
19988
20110
 
19989
20111
  .responsive .tab-pane .card-header a[aria-expanded="true"] {
19990
- color: var(--black, #000);
20112
+ color: var(--base-dark, #000);
19991
20113
  }
19992
20114
 
19993
20115
  .responsive .tab-pane .card-header a[aria-expanded="true"]:hover,
19994
20116
  .responsive .tab-pane .card-header a[aria-expanded="true"]:focus {
19995
- color: var(--gray-800, #4a4958);
20117
+ color: var(--text-secondary, var(--gray-800, #4a4958));
19996
20118
  }
19997
20119
 
19998
20120
  .responsive .tab-pane .card-header a[aria-expanded="true"]::before {
@@ -20046,7 +20168,7 @@ html {
20046
20168
  border: none;
20047
20169
  position: relative;
20048
20170
  margin: 0;
20049
- color: var(--black, #000);
20171
+ color: var(--base-dark, var(--black, #000));
20050
20172
  }
20051
20173
 
20052
20174
  .tabs [role="tablist"] [aria-selected]::after {
@@ -20060,7 +20182,7 @@ html {
20060
20182
  }
20061
20183
 
20062
20184
  .tabs [role="tabpanel"] {
20063
- border: 1px solid var(--gray-200, #d4d4d7);
20185
+ border: 1px solid var(--border-color-default, #d4d4d7);
20064
20186
  padding: 1.1rem;
20065
20187
  margin-top: -2px;
20066
20188
  }
@@ -20098,23 +20220,24 @@ cagov-accordion > details {
20098
20220
  cagov-accordion > details > summary {
20099
20221
  cursor: pointer;
20100
20222
  padding: 0.5rem 3rem 0.5rem 3.75rem;
20101
- background-color: var(--gray-50, #fafafa);
20223
+ background-color: var(--default-bg, var(--gray-50, #fafafa));
20102
20224
  position: relative;
20103
20225
  line-height: 2rem;
20104
20226
  margin: 0;
20105
- color: var(--gray-800, #4a4958);
20227
+ color: var(--text-color, var(--gray-900, #3b3a48));
20106
20228
  font-size: 1.125rem;
20107
20229
  font-weight: bold;
20108
- border: 1px solid var(--gray-200, #d4d4d7);
20230
+ border: 1px solid var(--border-color-default, var(--gray-200, #d4d4d7));
20109
20231
  }
20110
20232
  cagov-accordion > details > summary::before {
20111
20233
  position: absolute;
20112
20234
  height: 100%;
20113
20235
  width: 2.75rem;
20114
- border-right: 1px solid var(--gray-200, #d4d4d7);
20236
+ border-right: 1px solid
20237
+ var(--border-color-default, var(--gray-200, #d4d4d7));
20115
20238
  top: 0;
20116
20239
  left: 0;
20117
- background-color: var(--gray-50, #fafafa);
20240
+ background-color: var(--default-bg, var(--gray-50, #fafafa));
20118
20241
  border-radius: 3px 0 0 3px;
20119
20242
  content: "";
20120
20243
  }
@@ -20136,17 +20259,29 @@ cagov-accordion > details > summary .cagov-open-indicator {
20136
20259
  height: 0;
20137
20260
  }
20138
20261
  cagov-accordion > details > summary .cagov-open-indicator::before {
20139
- font-family: CaGov;
20140
- content: "5";
20262
+ content: "";
20263
+ display: inline-block;
20264
+ text-decoration: none;
20141
20265
  position: absolute;
20142
- font-size: 1.6rem;
20143
- transition: transform 0.2s;
20266
+ width: 0.5rem;
20267
+ height: 0.5rem;
20268
+ border-top: 2px solid var(--text-color, var(--gray-900, #3b3a48));
20269
+ border-left: 2px solid var(--text-color, var(--gray-900, #3b3a48));
20270
+ left: 0.55rem;
20271
+ top: 1rem;
20272
+ vertical-align: middle;
20273
+ transform-origin: center;
20274
+ transform: translateY(-50%) rotate(135deg);
20275
+ transition: transform 300ms ease-in-out;
20144
20276
  }
20145
20277
  cagov-accordion > details > summary:hover {
20146
- color: black;
20278
+ color: var(--text-color-hover, black);
20147
20279
  }
20148
20280
  cagov-accordion > details > summary:hover::before {
20149
- background-color: var(--gray-100, #f3f3f4);
20281
+ background-color: var(
20282
+ --default-bg-hover-darker,
20283
+ var(--gray-100, #f3f3f4)
20284
+ );
20150
20285
  }
20151
20286
  cagov-accordion > details .accordion-body {
20152
20287
  padding: 1rem;
@@ -20169,7 +20304,10 @@ cagov-accordion:defined > details > summary::-webkit-details-marker {
20169
20304
  display: none;
20170
20305
  }
20171
20306
  cagov-accordion:defined > details > summary:focus::before {
20172
- background-color: var(--gray-100, #f3f3f4);
20307
+ background-color: var(
20308
+ --default-bg-hover-darker,
20309
+ var(--gray-100, #f3f3f4)
20310
+ );
20173
20311
  }
20174
20312
  cagov-accordion:defined > details > summary:focus::after {
20175
20313
  outline: 2px solid var(--outline-default-color);
@@ -20179,14 +20317,17 @@ cagov-accordion:defined > details[open] {
20179
20317
  height: auto;
20180
20318
  }
20181
20319
  cagov-accordion:defined > details[open] .cagov-open-indicator::before {
20182
- transform: rotate(90deg) translateY(-0.2rem);
20320
+ transform: translate(0.125rem, -50%) rotate(225deg);
20183
20321
  }
20184
20322
  cagov-accordion:defined > details[open] > summary {
20185
20323
  border-radius: 4px 4px 0 0;
20186
20324
  }
20187
20325
  cagov-accordion:defined > details[open] > summary::before {
20188
20326
  border-radius: 3px 0 0;
20189
- background-color: var(--gray-100, #f3f3f4);
20327
+ background-color: var(
20328
+ --default-bg-hover-darker,
20329
+ var(--gray-100, #f3f3f4)
20330
+ );
20190
20331
  }
20191
20332
  cagov-accordion:defined > details[open] > summary:focus::after {
20192
20333
  border-radius: 3px 3px 0 0;
@@ -20254,13 +20395,13 @@ cagov-accordion:defined > details[open] > summary:focus::after {
20254
20395
  }
20255
20396
 
20256
20397
  .accordion__trigger:hover {
20257
- color: var(--link-hover-color, #005a7f);
20398
+ color: var(--link-color-hover, #005a7f);
20258
20399
  }
20259
20400
 
20260
20401
  .accordion__trigger::before {
20261
20402
  border-left: 0.3em solid transparent;
20262
20403
  border-right: 0.3em solid transparent;
20263
- border-top: 0.3em solid #222;
20404
+ border-top: 0.3em solid var(--text-color, #3b3a48);
20264
20405
  bottom: 0;
20265
20406
  content: "";
20266
20407
  height: 0;
@@ -20335,13 +20476,13 @@ cagov-accordion:defined > details[open] > summary:focus::after {
20335
20476
  .accordion-list.list-group .list-group-item:focus {
20336
20477
  outline: 2px solid var(--outline-default-color);
20337
20478
  outline-offset: -2px;
20338
- background-color: var(--gray-50, #fafafa);
20479
+ background-color: var(--default-bg, (--gray-50, #fafafa));
20339
20480
  }
20340
20481
  .accordion-list.list-group .list-group-item:hover {
20341
- background-color: var(--gray-50, #fafafa);
20482
+ background-color: var(--default-bg, (--gray-50, #fafafa));
20342
20483
  }
20343
20484
  .accordion-list.list-group .list-group-item.open {
20344
- background-color: var(--gray-50, #fafafa);
20485
+ background-color: var(--default-bg, (--gray-50, #fafafa));
20345
20486
  }
20346
20487
  .accordion-list.list-group .list-group-item.open .rotate {
20347
20488
  transform: rotate(90deg) !important;
@@ -20384,12 +20525,12 @@ cagov-accordion:defined > details[open] > summary:focus::after {
20384
20525
  padding: 0.75rem 1.25rem !important;
20385
20526
  text-decoration: none;
20386
20527
  font-weight: 500;
20387
- color: var(--gray-800, #4a4958);
20528
+ color: var(--text-color, var(--gray-800, #4a4958));
20388
20529
  }
20389
20530
 
20390
20531
  .side-nav .accordion .accordion__heading .accordion__trigger:hover,
20391
20532
  .side-nav .accordion .accordion__heading .accordion__trigger:focus {
20392
- background-color: #f8f9fa;
20533
+ background-color: var(--sidenav-hover-bg, var(--gray-50, #fafafa));
20393
20534
  }
20394
20535
 
20395
20536
  .side-nav .accordion .accordion__heading .accordion__trigger::before {
@@ -20409,48 +20550,74 @@ cagov-accordion:defined > details[open] > summary:focus::after {
20409
20550
  }
20410
20551
 
20411
20552
  .side-nav .accordion .accordion__heading.active .accordion__trigger {
20412
- color: var(--white, #fff) !important;
20413
- background-color: var(--color-p2, #046b99);
20553
+ color: var(--base-light, var(--white, #fff)) !important;
20554
+ background-color: var(--link-color, var(--color-p2, #046b99));
20414
20555
  }
20415
20556
 
20416
20557
  .side-nav .accordion .accordion__heading.active .accordion__trigger:hover,
20417
20558
  .side-nav .accordion .accordion__heading.active .accordion__trigger:focus {
20418
- background-color: var(--color-p2-darker, #214a68) !important;
20559
+ background-color: var(
20560
+ --link-color-hover,
20561
+ var(--color-p2-darker, #214a68)
20562
+ ) !important;
20419
20563
  }
20420
20564
 
20421
20565
  .side-nav.section-understated .accordion .accordion__heading .accordion__trigger {
20422
- color: var(--gray-800, #4a4958);
20566
+ color: var(--text-color, var(--gray-800, #4a4958));
20423
20567
  }
20424
20568
 
20425
20569
  .side-nav.section-understated .accordion .accordion__heading.active .accordion__trigger {
20426
- background-color: var(--color-p2, #046b99) !important;
20570
+ color: var(--base-light, var(--white, #fff)) !important;
20571
+ background-color: var(
20572
+ --link-color,
20573
+ var(--color-p2, #046b99)
20574
+ ) !important;
20427
20575
  }
20428
20576
 
20429
20577
  .side-nav.section-understated .accordion .accordion__heading.active .accordion__trigger:hover,
20430
20578
  .side-nav.section-understated .accordion .accordion__heading.active .accordion__trigger:focus {
20431
- background-color: var(--color-p2-darker, #214a68) !important;
20579
+ background-color: var(
20580
+ --link-color-hover,
20581
+ var(--color-p2-darker, #214a68)
20582
+ ) !important;
20432
20583
  }
20433
20584
 
20434
20585
  .side-nav.section-standout .accordion .accordion__heading.active .accordion__trigger {
20435
- color: var(--gray-800, #4a4958) !important;
20436
- background-color: var(--gray-50, #fafafa) !important;
20586
+ color: var(--text-color, var(--gray-800, #4a4958)) !important;
20587
+ background-color: var(
20588
+ --default-bg,
20589
+ var(--gray-50, #fafafa)
20590
+ ) !important;
20437
20591
  }
20438
20592
 
20439
20593
  .side-nav.section-standout .accordion .accordion__heading.active .accordion__trigger:hover,
20440
20594
  .side-nav.section-standout .accordion .accordion__heading.active .accordion__trigger:focus {
20441
- color: var(--black, #000) !important;
20442
- background-color: var(--gray-100, #f3f3f4) !important;
20595
+ color: var(--text-color-hover, var(--black, #000)) !important;
20596
+ background-color: var(
20597
+ --default-bg-hover,
20598
+ var(--gray-100, #f3f3f4)
20599
+ ) !important;
20443
20600
  }
20444
20601
 
20602
+ .side-nav.section-primary .accordion .accordion__heading.active {
20603
+ border: 1px solid var(--base-dark, var(--black, #000)) !important;
20604
+ }
20605
+
20445
20606
  .side-nav.section-primary .accordion .accordion__heading.active .accordion__trigger {
20446
- color: var(--gray-800, #4a4958) !important;
20447
- background-color: var(--gray-50, #fafafa) !important;
20607
+ color: var(--base-dark, var(--gray-800, #4a4958)) !important;
20608
+ background-color: var(
20609
+ --sidenav-active-bg,
20610
+ var(--gray-75, #f2f2f2)
20611
+ ) !important;
20448
20612
  }
20449
20613
 
20450
20614
  .side-nav.section-primary .accordion .accordion__heading.active .accordion__trigger:hover,
20451
20615
  .side-nav.section-primary .accordion .accordion__heading.active .accordion__trigger:focus {
20452
- color: var(--black, #000) !important;
20453
- background-color: var(--gray-100, #f3f3f4) !important;
20616
+ color: var(--text-color-hover, var(--black, #000)) !important;
20617
+ background-color: var(
20618
+ --sidenav-active-hover-bg,
20619
+ var(--gray-100, #f3f3f4)
20620
+ ) !important;
20454
20621
  }
20455
20622
 
20456
20623
  .side-subnav {
@@ -20471,15 +20638,16 @@ cagov-accordion:defined > details[open] > summary:focus::after {
20471
20638
  padding-bottom: 0.7rem;
20472
20639
  padding-left: 2.5rem;
20473
20640
  text-decoration: none !important;
20474
- border-bottom: 1px solid var(--gray-100, #f3f3f4);
20475
- color: var(--gray-800, #4a4958);
20641
+ border-bottom: 1px solid
20642
+ var(--border-color-muted, var(--gray-100, #f3f3f4));
20643
+ color: var(--text-color, var(--gray-800, #4a4958));
20476
20644
  }
20477
20645
 
20478
20646
  .side-subnav li a:hover,
20479
20647
  .side-subnav li a:focus {
20480
20648
  text-decoration: none;
20481
- background-color: var(--gray-50, #fafafa);
20482
- color: var(--black, #000);
20649
+ background-color: var(--sidenav-hover-bg, var(--gray-50, #fafafa));
20650
+ color: var(--text-color-hover, var(--black, #000));
20483
20651
  }
20484
20652
 
20485
20653
  .side-subnav li a:focus {
@@ -20488,9 +20656,9 @@ cagov-accordion:defined > details[open] > summary:focus::after {
20488
20656
  }
20489
20657
 
20490
20658
  .side-subnav li a.active {
20491
- color: var(--gray-700, #5e5e6a);
20659
+ color: var(--sidenav-active-color, var(--gray-700, #5e5e6a));
20492
20660
  text-decoration: none;
20493
- background-color: var(--gray-75, #f3f3f4);
20661
+ background-color: var(--sidenav-active-bg, var(--gray-75, #f2f2f2));
20494
20662
  }
20495
20663
 
20496
20664
  .side-subnav li a.active::before {
@@ -20507,9 +20675,12 @@ cagov-accordion:defined > details[open] > summary:focus::after {
20507
20675
 
20508
20676
  .side-subnav li a.active:hover,
20509
20677
  .side-subnav li a.active:focus {
20510
- color: var(--black, #000);
20678
+ color: var(--text-color-hover, var(--black, #000));
20511
20679
  text-decoration: none;
20512
- background-color: var(--gray-100, #f3f3f4);
20680
+ background-color: var(
20681
+ --default-bg-hover-darker,
20682
+ var(--gray-100, #ededef)
20683
+ );
20513
20684
  }
20514
20685
 
20515
20686
  cagov-accordion.sidenav > details {
@@ -20520,13 +20691,14 @@ cagov-accordion.sidenav > details {
20520
20691
 
20521
20692
  cagov-accordion.sidenav > details > summary {
20522
20693
  border: none;
20523
- background: var(--white, #fff);
20694
+ background: var(--body-bg, var(--white, #fff));
20524
20695
  padding: 0.7rem 2rem 0.7rem 1rem;
20525
20696
  font-size: calc(1rem + var(--ratio));
20526
20697
  font-weight: 400;
20527
20698
  text-decoration: none;
20528
- border-bottom: 1px solid var(--gray-100, #f3f3f4);
20529
- color: var(--gray-700, #5e5e6a);
20699
+ border-bottom: 1px solid
20700
+ var(--border-color-muted, var(--gray-100, #f3f3f4));
20701
+ color: var(--text-muted, var(--gray-700, #5e5e6a));
20530
20702
  }
20531
20703
 
20532
20704
  cagov-accordion.sidenav > details > summary::before {
@@ -20542,8 +20714,8 @@ cagov-accordion.sidenav > details > summary::after {
20542
20714
  cagov-accordion.sidenav > details > summary:hover,
20543
20715
  cagov-accordion.sidenav > details > summary:focus {
20544
20716
  text-decoration: none;
20545
- background-color: var(--gray-50, #fafafa);
20546
- color: var(--gray-700, #5e5e6a);
20717
+ background-color: var(--sidenav-hover-bg, var(--gray-50, #fafafa));
20718
+ color: var(--text-color-hover, var(--black, #000));
20547
20719
  }
20548
20720
 
20549
20721
  cagov-accordion.sidenav > details > summary:hover::before, cagov-accordion.sidenav > details > summary:focus::before {
@@ -20557,9 +20729,9 @@ cagov-accordion.sidenav > details > summary:focus {
20557
20729
  }
20558
20730
 
20559
20731
  cagov-accordion.sidenav > details > summary.active {
20560
- color: var(--gray-700, #5e5e6a) !important;
20732
+ color: var(--sidenav-active-color, var(--gray-700, #5e5e6a)) !important;
20561
20733
  text-decoration: none;
20562
- background-color: var(--gray-75, #f3f3f4);
20734
+ background-color: var(--sidenav-active-bg, var(--gray-75, #f2f2f2));
20563
20735
  font-weight: 400;
20564
20736
  }
20565
20737
 
@@ -20572,9 +20744,12 @@ cagov-accordion.sidenav > details > summary.active::before {
20572
20744
 
20573
20745
  cagov-accordion.sidenav > details > summary.active:hover,
20574
20746
  cagov-accordion.sidenav > details > summary.active:focus {
20575
- color: var(--black, #000) !important;
20747
+ color: var(--text-color-hover, var(--black, #000)) !important;
20576
20748
  text-decoration: none;
20577
- background-color: var(--gray-100, #f3f3f4);
20749
+ background-color: var(
20750
+ --sidenav-active-hover-bg,
20751
+ var(--gray-100, #ededef)
20752
+ );
20578
20753
  }
20579
20754
 
20580
20755
  cagov-accordion.sidenav > details > summary.active:focus {
@@ -20583,7 +20758,7 @@ cagov-accordion.sidenav > details > summary.active:focus {
20583
20758
  }
20584
20759
 
20585
20760
  cagov-accordion.sidenav > details > summary[open] > summary {
20586
- color: var(--black, #000);
20761
+ color: var(--text-color-hover, var(--black, #000));
20587
20762
  }
20588
20763
 
20589
20764
  cagov-accordion.sidenav > details > summary[open] > summary::after {
@@ -20618,49 +20793,48 @@ cagov-accordion.sidenav > details .accordion-body .side-subnav li:first-child {
20618
20793
  cagov-accordion.sidenav > details .accordion-body .side-subnav li:last-child {
20619
20794
  margin-bottom: 0;
20620
20795
  }
20621
- .breadcrumbs ul,
20622
- .breadcrumbs ol {
20623
- padding: 0.5em 1rem;
20624
- padding-left: 0;
20625
- margin-bottom: 2rem;
20626
- display: flex;
20627
- flex-wrap: wrap;
20628
- list-style: none;
20629
- font-size: var(--font-size-small);
20630
- }
20631
- @media (min-width: 576px) {
20632
- .breadcrumbs ul,
20633
- .breadcrumbs ol {
20634
- font-size: calc(var(--font-size-small) + var(--ratio))
20635
- }
20796
+ nav.breadcrumbs > ul,
20797
+ nav.breadcrumbs > ol {
20798
+ padding: 0.5em 1rem;
20799
+ padding-left: 0;
20800
+ margin-bottom: 2rem;
20801
+ display: flex;
20802
+ flex-wrap: wrap;
20803
+ list-style: none;
20804
+ font-size: var(--font-size-small);
20636
20805
  }
20637
- .breadcrumbs ul li, .breadcrumbs ol li {
20638
- position: relative;
20639
- padding-left: 0.75rem;
20640
- padding-right: 0.75rem;
20806
+ @media (min-width: 576px) {
20807
+ nav.breadcrumbs > ul,
20808
+ nav.breadcrumbs > ol {
20809
+ font-size: calc(var(--font-size-small) + var(--ratio))
20641
20810
  }
20642
- .breadcrumbs ul li a, .breadcrumbs ol li a {
20643
- padding: 0.375rem 0;
20644
20811
  }
20645
- .breadcrumbs ul li:first-child, .breadcrumbs ol li:first-child {
20646
- padding-left: 0;
20647
- }
20648
- .breadcrumbs ul li::after, .breadcrumbs ol li::after {
20649
- content: "";
20650
- color: var(--gray-900, #3b3a48);
20651
- border: none;
20652
- margin: 0 calc(var(--grid-gutter-width) / 2);
20653
- font-size: 1.125rem;
20654
- font-weight: 200;
20655
- position: absolute;
20656
- border-left: 1px solid;
20657
- height: 70%;
20658
- top: 5px;
20659
- right: -9px;
20660
- transform: rotate(15deg);
20812
+ nav.breadcrumbs > ul > li, nav.breadcrumbs > ol > li {
20813
+ position: relative;
20814
+ padding-left: 0.75rem;
20815
+ padding-right: 0.75rem;
20661
20816
  }
20662
- .breadcrumbs ul li:last-child::after, .breadcrumbs ol li:last-child::after {
20817
+ nav.breadcrumbs > ul > li > a, nav.breadcrumbs > ol > li > a {
20818
+ padding: 0.375rem 0;
20819
+ }
20820
+ nav.breadcrumbs > ul > li:first-child, nav.breadcrumbs > ol > li:first-child {
20821
+ padding-left: 0;
20822
+ }
20823
+ nav.breadcrumbs > ul > li::after, nav.breadcrumbs > ol > li::after {
20663
20824
  content: "";
20825
+ color: var(--gray-900, #3b3a48);
20826
+ border: none;
20827
+ margin: 0 calc(var(--grid-gutter-width) / 2);
20828
+ font-size: 1.125rem;
20829
+ font-weight: 200;
20830
+ position: absolute;
20831
+ border-left: 1px solid;
20832
+ height: 70%;
20833
+ top: 5px;
20834
+ right: -9px;
20835
+ transform: rotate(15deg);
20836
+ }
20837
+ nav.breadcrumbs > ul > li:last-child::after, nav.breadcrumbs > ol > li:last-child::after {
20664
20838
  border-left: none;
20665
20839
  margin: 0;
20666
20840
  }
@@ -20760,13 +20934,13 @@ hr.hr-light {
20760
20934
  ----------------------------------------- */
20761
20935
 
20762
20936
  figure {
20763
- border: 1px solid #ddd;
20937
+ border: 1px solid var(--border-color-default, #d4d4d7);
20764
20938
  margin-bottom: 15px;
20765
- background-color: var(--white, #fff);
20766
- border-color: var(--gray-200, #d4d4d7);
20939
+ background-color: var(--base-light, var(--white, #fff));
20940
+ border-color: var(--border-color-default, var(--gray-200, #d4d4d7));
20767
20941
  }
20768
20942
 
20769
- figure img {
20943
+ figure > img {
20770
20944
  width: 100%;
20771
20945
  }
20772
20946
 
@@ -20799,8 +20973,8 @@ figcaption {
20799
20973
  text-align: center;
20800
20974
  }
20801
20975
 
20802
- .media .media-top img,
20803
- .media .media-top span {
20976
+ .media .media-top > img,
20977
+ .media .media-top > span {
20804
20978
  display: inherit;
20805
20979
  margin-bottom: var(--line-height-computed);
20806
20980
  }
@@ -20828,6 +21002,19 @@ figcaption {
20828
21002
  div.modal-header > button.close {
20829
21003
  margin-left: auto;
20830
21004
  }
21005
+
21006
+ .modal-body,
21007
+ .modal-title {
21008
+ color: var(--text-color);
21009
+ }
21010
+
21011
+ .modal-header {
21012
+ border-bottom: 1px solid var(--border-color-default);
21013
+ }
21014
+
21015
+ .modal-footer {
21016
+ border-top: 1px solid var(--border-color-default);
21017
+ }
20831
21018
  /* -----------------------------------------
20832
21019
  YouTube Video Player
20833
21020
  /src/css/cagov/youtube.css
@@ -20854,6 +21041,35 @@ div.modal-header > button.close {
20854
21041
  FORMS - /src/css/cagov/forms.css
20855
21042
  ----------------------------------------- */
20856
21043
 
21044
+ input[type="search"],
21045
+ input[type="search"].form-control,
21046
+ input[type="text"],
21047
+ input[type="text"].form-control,
21048
+ input[type="number"],
21049
+ input[type="number"].form-control,
21050
+ input[type="email"],
21051
+ input[type="email"].form-control,
21052
+ input[type="password"],
21053
+ input[type="password"].form-control,
21054
+ textarea,
21055
+ textarea.form-control,
21056
+ textarea.form-control:focus {
21057
+ background-color: var(--body-bg, #fff);
21058
+ color: var(--text-color, var(--gray-900, #3b3a48));
21059
+ }
21060
+
21061
+ /* placeholder styling */
21062
+ input::placeholder,
21063
+ input.form-control::placeholder,
21064
+ textarea::placeholder {
21065
+ color: var(--text-color, var(--gray-900, #3b3a48));
21066
+ opacity: 0.8;
21067
+ }
21068
+
21069
+ input[type="file"] {
21070
+ color: var(--text-color, var(--gray-900, #3b3a48));
21071
+ }
21072
+
20857
21073
  .form-control,
20858
21074
  .custom-file-label,
20859
21075
  .custom-select {
@@ -20926,7 +21142,7 @@ label {
20926
21142
  min-width: 38px;
20927
21143
  background-color: transparent;
20928
21144
  border: 1px solid;
20929
- border-color: #ccc;
21145
+ border-color: var(--border-color-default, #d4d4d7);
20930
21146
  transition: border-color 0.15s ease-in-out 0s;
20931
21147
  -moz-box-align: center;
20932
21148
  align-items: center;
@@ -21008,8 +21224,8 @@ label {
21008
21224
  font-size: 12px;
21009
21225
  border: 1px solid;
21010
21226
  border-radius: 50%;
21011
- color: var(--color-p2, #046b99);
21012
- border-color: var(--color-p2, #046b99);
21227
+ color: var(--link-color, var(--color-p2, #046b99));
21228
+ border-color: var(--link-color, var(--color-p2, #046b99));
21013
21229
  }
21014
21230
 
21015
21231
  .check-icon-radio i {
@@ -21040,9 +21256,9 @@ label {
21040
21256
  width: 18px;
21041
21257
  height: 18px;
21042
21258
  font-size: 12px;
21043
- color: var(--white, #fff);
21259
+ color: var(--base-light, var(--white, #fff));
21044
21260
  border: 1px solid;
21045
- border-color: var(--color-p2, #046b99);
21261
+ border-color: var(--link-color, var(--color-p2, #046b99));
21046
21262
  }
21047
21263
 
21048
21264
  .check-icon-checkbox i {
@@ -21068,13 +21284,13 @@ input[type="radio"]:checked + i,
21068
21284
  input[type="checkbox"]:checked + * i,
21069
21285
  input[type="radio"]:checked + * i {
21070
21286
  color: #fff;
21071
- background-color: var(--color-p2, #046b99);
21072
- border-color: var(--color-p2, #046b99);
21287
+ background-color: var(--link-color, var(--color-p2, #046b99));
21288
+ border-color: var(--link-color, var(--color-p2, #046b99));
21073
21289
  }
21074
21290
 
21075
21291
  .bg-primary--checked.checked,
21076
21292
  .checked .bg-primary--checked {
21077
- background-color: var(--color-p2, #046b99) !important;
21293
+ background-color: var(--link-color, var(--color-p2, #046b99)) !important;
21078
21294
  }
21079
21295
 
21080
21296
  /* primary Color */
@@ -21082,7 +21298,7 @@ input[type="checkbox"]:checked + .bg-primary--checked,
21082
21298
  input[type="radio"]:checked + .bg-primary--checked,
21083
21299
  input[type="checkbox"]:checked + * .bg-primary--checked,
21084
21300
  input[type="radio"]:checked + * .bg-primary--checked {
21085
- background-color: var(--color-p2, #046b99);
21301
+ background-color: var(--link-color, var(--color-p2, #046b99));
21086
21302
  }
21087
21303
 
21088
21304
  /* highlight Color */
@@ -21104,25 +21320,41 @@ input[type="radio"]:focus + div {
21104
21320
  }
21105
21321
 
21106
21322
  .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
21107
- background-color: var(--color-p2, #046b99);
21323
+ background-color: var(--link-color, var(--color-p2, #046b99));
21108
21324
  border-radius: var(--border-radius-base);
21109
21325
  }
21110
21326
 
21111
21327
  .custom-radio .custom-control-input:checked ~ .custom-control-label::before {
21112
- background-color: var(--color-p2, #046b99);
21328
+ background-color: var(--link-color, var(--color-p2, #046b99));
21113
21329
  }
21114
21330
 
21331
+ .form-check-input:focus {
21332
+ outline: 2px solid var(--outline-default-color);
21333
+ box-shadow: none;
21334
+ outline-offset: 2px;
21335
+ }
21336
+
21115
21337
  .form-check-input:checked,
21116
21338
  .custom-control-input:checked {
21117
- background-color: var(--color-p2, #046b99);
21118
- border-color: var(--color-p2, #046b99);
21339
+ background-color: var(--link-color, var(--color-p2, #046b99));
21340
+ border-color: var(--link-color, var(--color-p2, #046b99));
21119
21341
  }
21120
21342
 
21121
21343
  .form-select {
21122
- background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'><path d='M17.087 10.35l-4.337 4.336-4.337-4.336c-0.293-0.293-0.768-0.293-1.060 0s-0.293 0.768 0 1.060l4.864 4.864c0.147 0.147 0.341 0.221 0.533 0.219 0.194 0 0.386-0.072 0.533-0.219l4.865-4.864c0.293-0.293 0.293-0.768 0-1.060s-0.768-0.293-1.061 0z'/></svg>");
21344
+ background-image: var(
21345
+ --cagov-form-select-bg-image,
21346
+ url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'><path d='M17.087 10.35l-4.337 4.336-4.337-4.336c-0.293-0.293-0.768-0.293-1.060 0s-0.293 0.768 0 1.060l4.864 4.864c0.147 0.147 0.341 0.221 0.533 0.219 0.194 0 0.386-0.072 0.533-0.219l4.865-4.864c0.293-0.293 0.293-0.768 0-1.060s-0.768-0.293-1.061 0z'/></svg>")
21347
+ );
21123
21348
  background-size: 20px 20px;
21349
+ color: var(--text-color);
21124
21350
  }
21125
21351
 
21352
+ .form-select:focus {
21353
+ outline: 2px solid var(--outline-default-color);
21354
+ outline-offset: 2px;
21355
+ box-shadow: none;
21356
+ }
21357
+
21126
21358
  .select {
21127
21359
  border: 1px solid var(--input-border);
21128
21360
  overflow: hidden;
@@ -21148,7 +21380,7 @@ input[type="radio"]:focus + div {
21148
21380
  position: absolute;
21149
21381
  right: 0;
21150
21382
  top: 0;
21151
- background: var(--white, #fff);
21383
+ background: var(--base-light, var(--white, #fff));
21152
21384
  z-index: 3;
21153
21385
  text-align: center;
21154
21386
  width: 30px;
@@ -21167,7 +21399,7 @@ input[type="text"]::-ms-clear {
21167
21399
  .check {
21168
21400
  position: relative;
21169
21401
  cursor: pointer;
21170
- border: 1px solid #ccc;
21402
+ border: 1px solid var(--border-color-default, #d4d4d7);
21171
21403
  min-width: 100px;
21172
21404
  }
21173
21405
 
@@ -21176,7 +21408,7 @@ input[type="checkbox"]:checked + .color-white--checked,
21176
21408
  input[type="radio"]:checked + .color-white--checked,
21177
21409
  input[type="checkbox"]:checked + * .color-white--checked,
21178
21410
  input[type="radio"]:checked + * .color-white--checked {
21179
- color: #fff !important;
21411
+ color: var(--base-light, var(--white, #fff)) !important;
21180
21412
  }
21181
21413
 
21182
21414
  input[type="checkbox"]:focus + .btn,
@@ -21190,10 +21422,16 @@ input[type="radio"]:focus + .btn {
21190
21422
 
21191
21423
  /* Accessibilty focus */
21192
21424
  input:focus,
21425
+ input.form-control:focus,
21193
21426
  textarea:focus,
21427
+ textarea.form-control:focus,
21194
21428
  button:focus,
21195
- select:focus {
21429
+ button.form-control:focus,
21430
+ select:focus,
21431
+ select.form-control:focus {
21196
21432
  outline: 2px solid var(--outline-default-color);
21433
+ outline-offset: 2px;
21434
+ box-shadow: none;
21197
21435
  }
21198
21436
 
21199
21437
  /* bootstrap 4.4.1 adjustments */
@@ -21203,6 +21441,29 @@ select:focus {
21203
21441
 
21204
21442
  .invalid-feedback {
21205
21443
  font-size: 0.75em;
21444
+ color: var(--brand-danger, #d62929);
21445
+ }
21446
+
21447
+ /* Custom Checkmark Variables Mapping */
21448
+ .form-check-input:checked[type="checkbox"] {
21449
+ --bs-form-check-bg-image: var(
21450
+ --cagov-form-check-bg-image,
21451
+ url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")
21452
+ );
21453
+ }
21454
+
21455
+ .form-check-input:checked[type="radio"] {
21456
+ --bs-form-check-bg-image: var(
21457
+ --cagov-form-radio-bg-image,
21458
+ url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e")
21459
+ );
21460
+ }
21461
+
21462
+ .form-check-input[type="checkbox"]:indeterminate {
21463
+ --bs-form-check-bg-image: var(
21464
+ --cagov-form-indeterminate-bg-image,
21465
+ url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")
21466
+ );
21206
21467
  }
21207
21468
  /* -----------------------------------------
21208
21469
  CARDS - /src/css/cagov/cards.css
@@ -21649,9 +21910,10 @@ select:focus {
21649
21910
  .card {
21650
21911
  position: relative;
21651
21912
  display: block;
21652
- background-color: var(--white, #fff);
21913
+ background-color: var(--card-bg, var(--white, #fff));
21653
21914
  border: none;
21654
21915
  border-radius: var(--card-border-radius);
21916
+ color: var(--text-color, var(--gray-900, #3b3a48));
21655
21917
  }
21656
21918
  .card .card-body {
21657
21919
  padding: 1.5rem;
@@ -21692,7 +21954,7 @@ select:focus {
21692
21954
  .card-default,
21693
21955
  .panel-default {
21694
21956
  border: 1px solid;
21695
- border-color: var(--gray-200, #d4d4d7);
21957
+ border-color: var(--border-color-default, #d4d4d7);
21696
21958
  }
21697
21959
  .card-default > .panel-heading,
21698
21960
  .card-default > .card-heading,
@@ -21700,7 +21962,7 @@ select:focus {
21700
21962
  .panel-default > .card-heading {
21701
21963
  color: var(--gray-900, #3b3a48);
21702
21964
  background-color: var(--gray-75, #f3f3f4);
21703
- border-color: var(--gray-200, #d4d4d7);
21965
+ border-color: var(--border-color-default, #d4d4d7);
21704
21966
  }
21705
21967
  .card-default > .panel-heading + .panel-collapse > .panel-body,
21706
21968
  .card-default > .panel-heading + .card-collapse > .card-body,
@@ -21710,11 +21972,11 @@ select:focus {
21710
21972
  .panel-default > .panel-heading + .card-collapse > .card-body,
21711
21973
  .panel-default > .card-heading + .panel-collapse > .panel-body,
21712
21974
  .panel-default > .card-heading + .card-collapse > .card-body {
21713
- border-top-color: var(--gray-200, #d4d4d7);
21975
+ border-top-color: var(--border-color-default, #d4d4d7);
21714
21976
  }
21715
21977
  .card-default > .panel-heading .badge, .card-default > .card-heading .badge, .panel-default > .panel-heading .badge, .panel-default > .card-heading .badge {
21716
21978
  color: var(--gray-75, #f3f3f4);
21717
- background-color: var(--gray-900, #3b3a48);
21979
+ background-color: var(--text-color, #3b3a48);
21718
21980
  }
21719
21981
  .card-default > .panel-footer + .panel-collapse > .panel-body,
21720
21982
  .card-default > .panel-footer + .card-collapse > .card-body,
@@ -21726,6 +21988,32 @@ select:focus {
21726
21988
  .panel-default > .card-footer + .card-collapse > .card-body {
21727
21989
  border-bottom-color: var(--gray-200, #d4d4d7);
21728
21990
  }
21991
+ .card-default .card-heading h2,
21992
+ .card-default .card-heading h3,
21993
+ .card-default .card-heading h4,
21994
+ .card-default .card-heading h5,
21995
+ .card-default .card-header h2,
21996
+ .card-default .card-header h3,
21997
+ .card-default .card-header h4,
21998
+ .card-default .card-header h5,
21999
+ .card-default .panel-heading h2,
22000
+ .card-default .panel-heading h3,
22001
+ .card-default .panel-heading h4,
22002
+ .card-default .panel-heading h5,
22003
+ .panel-default .card-heading h2,
22004
+ .panel-default .card-heading h3,
22005
+ .panel-default .card-heading h4,
22006
+ .panel-default .card-heading h5,
22007
+ .panel-default .card-header h2,
22008
+ .panel-default .card-header h3,
22009
+ .panel-default .card-header h4,
22010
+ .panel-default .card-header h5,
22011
+ .panel-default .panel-heading h2,
22012
+ .panel-default .panel-heading h3,
22013
+ .panel-default .panel-heading h4,
22014
+ .panel-default .panel-heading h5 {
22015
+ color: var(--gray-900, #3b3a48);
22016
+ }
21729
22017
  .card-default .card-heading h2 span[class^="ca-gov-icon-"], .card-default .card-heading h3 span[class^="ca-gov-icon-"], .card-default .card-heading h4 span[class^="ca-gov-icon-"], .card-default .card-heading h5 span[class^="ca-gov-icon-"], .card-default .card-header h2 span[class^="ca-gov-icon-"], .card-default .card-header h3 span[class^="ca-gov-icon-"], .card-default .card-header h4 span[class^="ca-gov-icon-"], .card-default .card-header h5 span[class^="ca-gov-icon-"], .card-default .panel-heading h2 span[class^="ca-gov-icon-"], .card-default .panel-heading h3 span[class^="ca-gov-icon-"], .card-default .panel-heading h4 span[class^="ca-gov-icon-"], .card-default .panel-heading h5 span[class^="ca-gov-icon-"], .panel-default .card-heading h2 span[class^="ca-gov-icon-"], .panel-default .card-heading h3 span[class^="ca-gov-icon-"], .panel-default .card-heading h4 span[class^="ca-gov-icon-"], .panel-default .card-heading h5 span[class^="ca-gov-icon-"], .panel-default .card-header h2 span[class^="ca-gov-icon-"], .panel-default .card-header h3 span[class^="ca-gov-icon-"], .panel-default .card-header h4 span[class^="ca-gov-icon-"], .panel-default .card-header h5 span[class^="ca-gov-icon-"], .panel-default .panel-heading h2 span[class^="ca-gov-icon-"], .panel-default .panel-heading h3 span[class^="ca-gov-icon-"], .panel-default .panel-heading h4 span[class^="ca-gov-icon-"], .panel-default .panel-heading h5 span[class^="ca-gov-icon-"] {
21730
22018
  color: var(--color-p3, #323a45);
21731
22019
  }
@@ -21824,11 +22112,11 @@ select:focus {
21824
22112
  .panel-overstated .card-body a:not(.btn):focus,
21825
22113
  .panel-overstated .panel-body a:not(.btn):hover,
21826
22114
  .panel-overstated .panel-body a:not(.btn):focus {
21827
- color: var(--link-hover-color, #005a7f);
22115
+ color: var(--link-color-hover, #005a7f);
21828
22116
  text-decoration: underline;
21829
22117
  }
21830
22118
  .card-overstated .card-body a:not(.btn):focus, .card-overstated .panel-body a:not(.btn):focus, .panel-overstated .card-body a:not(.btn):focus, .panel-overstated .panel-body a:not(.btn):focus {
21831
- outline: 2px solid var(--link-hover-color, #005a7f);
22119
+ outline: 2px solid var(--link-color-hover, #005a7f);
21832
22120
  outline-offset: -2px;
21833
22121
  }
21834
22122
 
@@ -21977,11 +22265,11 @@ select:focus {
21977
22265
  .panel-standout .card-body a:not(.btn):focus,
21978
22266
  .panel-standout .panel-body a:not(.btn):hover,
21979
22267
  .panel-standout .panel-body a:not(.btn):focus {
21980
- color: var(--link-hover-color, #005a7f);
22268
+ color: var(--link-color-hover, #005a7f);
21981
22269
  text-decoration: underline;
21982
22270
  }
21983
22271
  .card-standout .card-body a:not(.btn):focus, .card-standout .panel-body a:not(.btn):focus, .panel-standout .card-body a:not(.btn):focus, .panel-standout .panel-body a:not(.btn):focus {
21984
- outline: 2px solid var(--link-hover-color, #005a7f);
22272
+ outline: 2px solid var(--link-color-hover, #005a7f);
21985
22273
  outline-offset: -2px;
21986
22274
  }
21987
22275
 
@@ -22056,15 +22344,15 @@ select:focus {
22056
22344
  ----------------------------------------- */
22057
22345
 
22058
22346
  /* Adding the explicit classes below so that they are available in Rich Text Editor */
22347
+ .table > :not(caption) > * > * {
22348
+ color: var(--text-color, #3b3a48);
22349
+ border-color: var(--border-color-default, #d4d4d7);
22350
+ }
22059
22351
 
22060
22352
  table.table {
22061
22353
  border-spacing: 0;
22062
22354
  }
22063
22355
 
22064
- .table {
22065
- color: var(--gray-900, #3b3a48);
22066
- }
22067
-
22068
22356
  .table.table-default {
22069
22357
  border: none;
22070
22358
  }
@@ -22075,18 +22363,23 @@ table.table {
22075
22363
  .table.table-default > tbody > tr > td,
22076
22364
  .table.table-default > tfoot > tr > th,
22077
22365
  .table.table-default > tfoot > tr > td {
22078
- background: #f3f3f4;
22079
- border: 2px solid #fff;
22366
+ background: var(--default-bg, #fafafa);
22367
+ border: 2px solid var(--body-bg, #fff);
22368
+ color: var(--text-color, #3b3a48);
22080
22369
  }
22081
22370
 
22082
22371
  .table.table-default > thead > tr > th,
22083
22372
  .table.table-default > thead > tr > td {
22084
- background: #d9d9d9;
22085
- border: 2px solid #fff;
22373
+ background: var(--default-bg-darker, #d9d9d9);
22374
+ border: 2px solid var(--body-bg, #fff);
22086
22375
  }
22087
22376
 
22088
22377
  .table-striped > tbody > tr:nth-of-type(2n + 1) > * {
22089
- color: var(--gray-900, #3b3a48);
22378
+ color: var(--text-color, #3b3a48);
22379
+ }
22380
+
22381
+ .table-striped > tbody > tr:nth-of-type(odd) > * {
22382
+ background: var(--default-bg, #fafafa);
22090
22383
  }
22091
22384
  /* -----------------------------------------
22092
22385
  LIST STYLES /src/css/cagov/lists.css
@@ -22482,7 +22775,7 @@ blockquote {
22482
22775
  padding: 11px 22px;
22483
22776
  margin: 0 0 22px;
22484
22777
  border-left: 4px solid;
22485
- border-color: var(--color-p2, #046b99);
22778
+ border-color: var(--link-color, var(--color-p2, #046b99));
22486
22779
  }
22487
22780
 
22488
22781
  @media (min-width: 576px) {
@@ -22497,7 +22790,7 @@ blockquote::before {
22497
22790
  font-family: CaGov;
22498
22791
  font-size: 3rem;
22499
22792
  line-height: 2rem;
22500
- color: var(--color-p2, #046b99);
22793
+ color: var(--link-color, var(--color-p2, #046b99));
22501
22794
  }
22502
22795
 
22503
22796
  blockquote footer {
@@ -22537,14 +22830,14 @@ blockquote.pull-quote,
22537
22830
  blockquote.prominent {
22538
22831
  border-radius: 1rem;
22539
22832
  padding: 2rem;
22540
- background-color: var(--color-p2, #046b99);
22541
- color: var(--white, #fff);
22833
+ background-color: var(--link-color, var(--color-p2, #046b99));
22834
+ color: var(--base-light, var(--white, #fff));
22542
22835
  }
22543
22836
 
22544
22837
  blockquote.prominent p,
22545
22838
  blockquote.prominent footer,
22546
22839
  blockquote.prominent::before {
22547
- color: var(--white, #fff);
22840
+ color: var(--base-light, var(--white, #fff));
22548
22841
  }
22549
22842
 
22550
22843
  blockquote.blockquote-reverse {
@@ -22569,17 +22862,20 @@ blockquote.blockquote-reverse footer::after, blockquote.blockquote-reverse small
22569
22862
 
22570
22863
  /* PRIMARY BUTTON */
22571
22864
  .btn-primary {
22572
- color: var(--white, #fff);
22573
- background-color: var(--color-p2, #046b99);
22574
- border-color: var(--color-p2, #046b99);
22865
+ color: var(--primary-btn-color, #fff);
22866
+ background-color: var(--primary-btn-bg, var(--color-p2, #046b99));
22867
+ border-color: var(--primary-btn-border-color, var(--color-p2, #046b99));
22575
22868
  font-weight: var(--font-weight-6);
22576
22869
  }
22577
22870
  .btn-primary:focus {
22578
- outline: solid 2px var(--outline-dark-mode-color, #85cbf9) !important;
22871
+ outline: solid 2px var(--outline-primary-btn, #85cbf9) !important;
22579
22872
  outline-offset: -4px;
22580
22873
  }
22581
22874
  .btn-primary:disabled {
22582
- color: var(--white, #fff) !important;
22875
+ color: var(
22876
+ --primary-btn-color-disabled,
22877
+ var(--primary-btn-color, #fff)
22878
+ ) !important;
22583
22879
  }
22584
22880
  .btn-primary .badge {
22585
22881
  color: var(--color-p2, #046b99);
@@ -22592,9 +22888,15 @@ blockquote.blockquote-reverse footer::after, blockquote.blockquote-reverse small
22592
22888
  .btn-primary:not(:disabled, .disabled).active,
22593
22889
  .btn-primary .show > .dropdown-toggle,
22594
22890
  .open > .dropdown-toggle .btn-primary {
22595
- color: var(--white, #fff);
22596
- background-color: var(--color-p2-darker, #214a68);
22597
- border-color: var(--color-p2-darker, #214a68);
22891
+ color: var(--primary-btn-color-hover, var(--white, #fff));
22892
+ background-color: var(
22893
+ --primary-btn-bg-hover,
22894
+ var(--color-p2-darker, #214a68)
22895
+ );
22896
+ border-color: var(
22897
+ --primary-btn-border-color-hover,
22898
+ var(--color-p2-darker, #214a68)
22899
+ );
22598
22900
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
22599
22901
  background-image: none;
22600
22902
  }
@@ -22614,24 +22916,37 @@ fieldset[disabled] .btn-primary:hover,
22614
22916
  fieldset[disabled] .btn-primary:focus,
22615
22917
  fieldset[disabled] .btn-primary:active,
22616
22918
  fieldset[disabled] .btn-primary.active {
22617
- background-color: var(--color-p2, #046b99) !important;
22618
- border-color: var(--color-p2, #046b99);
22919
+ color: var(
22920
+ --primary-btn-color-disabled,
22921
+ var(--primary-btn-color, #fff)
22922
+ ) !important;
22923
+ background-color: var(
22924
+ --primary-btn-bg-disabled,
22925
+ var(--primary-btn-bg, var(--color-p2, #046b99))
22926
+ ) !important;
22927
+ border-color: var(
22928
+ --primary-btn-border-color-disabled,
22929
+ var(--primary-btn-border-color, var(--color-p2, #046b99))
22930
+ );
22619
22931
  }
22620
22932
 
22621
22933
  /* PRIMARY OUTLINE BUTTON */
22622
22934
  .btn-outline-primary {
22623
- color: var(--color-p2, #046b99);
22624
- background-color: var(--white, #fff);
22625
- border-color: var(--color-p2, #046b99);
22935
+ color: var(--primary-outline-btn-color, var(--color-p2, #046b99));
22936
+ background-color: var(--primary-outline-btn-bg, var(--white, #fff));
22937
+ border-color: var(
22938
+ --primary-outline-btn-border-color,
22939
+ var(--color-p2, #046b99)
22940
+ );
22626
22941
  font-weight: var(--font-weight-6);
22627
22942
  }
22628
22943
  .btn-outline-primary:focus {
22629
- outline: solid 2px var(--outline-default-color) !important;
22944
+ outline: solid 2px var(--outline-primary-outline-btn, var(--white, #fff)) !important;
22630
22945
  outline-offset: -4px;
22631
22946
  }
22632
22947
  .btn-outline-primary .badge {
22633
22948
  color: var(--white, #fff);
22634
- background-color: var(--color-p2, #046b99);
22949
+ background-color: var(--primary-btn-bg, var(--color-p2, #046b99));
22635
22950
  }
22636
22951
 
22637
22952
  .btn-outline-primary:hover,
@@ -22640,14 +22955,20 @@ fieldset[disabled] .btn-primary.active {
22640
22955
  .btn-outline-primary:not(:disabled, .disabled).active,
22641
22956
  .btn-outline-primary .show > .dropdown-toggle,
22642
22957
  .open > .dropdown-toggle .btn-outline-primary {
22643
- color: var(--color-p2-darker, #214a68);
22644
- background-color: var(--white, #fff);
22645
- border-color: var(--color-p2-darker, #214a68);
22958
+ color: var(
22959
+ --primary-outline-btn-color-hover,
22960
+ var(--color-p2-darker, #214a68)
22961
+ );
22962
+ background-color: var(--primary-outline-btn-bg-hover, var(--white, #fff));
22963
+ border-color: var(
22964
+ --primary-outline-btn-border-color-hover,
22965
+ var(--color-p2-darker, #214a68)
22966
+ );
22646
22967
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
22647
22968
  background-image: none;
22648
22969
  }
22649
22970
 
22650
- .btn-outline-primary .btn-outline-primary.disabled,
22971
+ .btn-outline-primary.disabled,
22651
22972
  .btn-outline-primary.disabled:hover,
22652
22973
  .btn-outline-primary.disabled:focus,
22653
22974
  .btn-outline-primary.disabled:active,
@@ -22662,19 +22983,26 @@ fieldset[disabled] .btn-outline-primary:hover,
22662
22983
  fieldset[disabled] .btn-outline-primary:focus,
22663
22984
  fieldset[disabled] .btn-outline-primary:active,
22664
22985
  fieldset[disabled] .btn-outline-primary.active {
22665
- background-color: var(--white, #fff) !important;
22666
- border-color: var(--color-p2, #046b99);
22986
+ color: var(--primary-outline-btn-color-disabled, var(--color-p2, #046b99));
22987
+ background-color: var(
22988
+ --primary-outline-btn-bg-disabled,
22989
+ var(--primary-outline-btn-bg, var(--white, #fff))
22990
+ ) !important;
22991
+ border-color: var(
22992
+ --primary-outline-btn-border-color-disabled,
22993
+ var(--primary-outline-btn-border-color, var(--color-p2, #046b99))
22994
+ );
22667
22995
  }
22668
22996
 
22669
22997
  /* DEFAULT BUTTON */
22670
22998
  .btn-default {
22671
- color: var(--gray-700, #5e5e6a);
22672
- background-color: var(--gray-50, #fafafa);
22673
- border-color: var(--gray-700, #5e5e6a);
22999
+ color: var(--default-btn-color, var(--gray-700, #5e5e6a));
23000
+ background-color: var(--default-btn-bg, var(--gray-50, #fafafa));
23001
+ border-color: var(--default-btn-border-color, var(--gray-700, #5e5e6a));
22674
23002
  font-weight: var(--font-weight-6);
22675
23003
  }
22676
23004
  .btn-default:focus {
22677
- outline: solid 2px var(--outline-default-color) !important;
23005
+ outline: solid 2px var(--outline-default-btn, var(--outline-default-color)) !important;
22678
23006
  outline-offset: -4px;
22679
23007
  }
22680
23008
  .btn-default .badge {
@@ -22688,9 +23016,9 @@ fieldset[disabled] .btn-outline-primary.active {
22688
23016
  .btn-default:not(:disabled, .disabled).active,
22689
23017
  .btn-default .show > .dropdown-toggle,
22690
23018
  .open > .dropdown-toggle .btn-default {
22691
- color: var(--black, #000);
22692
- background-color: var(--gray-75, #f8f9fa);
22693
- border-color: var(--black, #000);
23019
+ color: var(--default-btn-color-hover, var(--black, #000));
23020
+ background-color: var(--default-btn-bg-hover, var(--gray-75, #f8f9fa));
23021
+ border-color: var(--default-btn-border-color-hover, var(--black, #000));
22694
23022
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
22695
23023
  background-image: none;
22696
23024
  }
@@ -22710,19 +23038,26 @@ fieldset[disabled] .btn-default:hover,
22710
23038
  fieldset[disabled] .btn-default:focus,
22711
23039
  fieldset[disabled] .btn-default:active,
22712
23040
  fieldset[disabled] .btn-default.active {
22713
- background-color: rgba(255 255 255 / 65%) !important;
22714
- border-color: var(--gray-700, #5e5e6a);
23041
+ background-color: var(
23042
+ --default-btn-bg-disabled,
23043
+ var(--default-btn-bg, rgba(255 255 255 / 65%))
23044
+ ) !important;
23045
+ border-color: var(
23046
+ --default-btn-border-color-disabled,
23047
+ var(--default-btn-border-color, var(--gray-700, #5e5e6a))
23048
+ );
22715
23049
  }
22716
23050
 
22717
23051
  /* STANDOUT BUTTON */
22718
23052
  .btn-standout {
22719
- color: var(--white, #fff);
22720
- background-color: var(--color-p3, #323a45);
22721
- border-color: var(--color-p3, #323a45);
23053
+ color: var(--standout-btn-color, var(--white, #fff));
23054
+ background-color: var(--standout-btn-bg, var(--color-p3, #323a45));
23055
+ border-color: var(--standout-btn-border-color, var(--color-p3, #323a45));
22722
23056
  font-weight: var(--font-weight-6);
22723
23057
  }
22724
23058
  .btn-standout:focus {
22725
- outline: solid 2px var(--outline-dark-mode-color, #85cbf9) !important;
23059
+ outline: solid 2px
23060
+ var(--outline-standout-btn, var(--outline-dark-mode-color, #85cbf9)) !important;
22726
23061
  outline-offset: -4px;
22727
23062
  }
22728
23063
  .btn-standout .badge {
@@ -22731,7 +23066,10 @@ fieldset[disabled] .btn-default.active {
22731
23066
  }
22732
23067
  .btn-standout:disabled,
22733
23068
  .btn-standout.disabled {
22734
- color: var(--white, #fff) !important;
23069
+ color: var(
23070
+ --standout-btn-color-disabled,
23071
+ var(--standout-btn-color, var(--white, #fff))
23072
+ ) !important;
22735
23073
  }
22736
23074
 
22737
23075
  .btn-standout:hover,
@@ -22740,9 +23078,15 @@ fieldset[disabled] .btn-default.active {
22740
23078
  .btn-standout:not(:disabled, .disabled).active,
22741
23079
  .btn-standout .show > .dropdown-toggle,
22742
23080
  .open > .dropdown-toggle .btn-standout {
22743
- color: var(--white, #fff);
22744
- background-color: var(--color-p3-darker, #242830);
22745
- border-color: var(--color-p3-darker, #242830);
23081
+ color: var(--standout-btn-color-hover, var(--white, #fff));
23082
+ background-color: var(
23083
+ --standout-btn-bg-hover,
23084
+ var(--color-p3-darker, #242830)
23085
+ );
23086
+ border-color: var(
23087
+ --standout-btn-border-color-hover,
23088
+ var(--color-p3-darker, #242830)
23089
+ );
22746
23090
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
22747
23091
  background-image: none;
22748
23092
  }
@@ -22762,19 +23106,29 @@ fieldset[disabled] .btn-standout:hover,
22762
23106
  fieldset[disabled] .btn-standout:focus,
22763
23107
  fieldset[disabled] .btn-standout:active,
22764
23108
  fieldset[disabled] .btn-standout.active {
22765
- background-color: var(--color-p3, #323a45) !important;
22766
- border-color: var(--color-p3, #323a45);
23109
+ background-color: var(
23110
+ --standout-btn-bg-disabled,
23111
+ var(--standout-btn-bg, var(--color-p3, #323a45))
23112
+ ) !important;
23113
+ border-color: var(
23114
+ --standout-btn-border-color-disabled,
23115
+ var(--standout-btn-border-color, var(--color-p3, #323a45))
23116
+ );
22767
23117
  }
22768
23118
 
22769
23119
  /* STANDOUT OUTLINE BUTTON */
22770
23120
  .btn-outline-standout {
22771
- color: var(--color-p3, #323a45);
22772
- background-color: var(--white, #fff);
22773
- border-color: var(--color-p3, #323a45);
23121
+ color: var(--standout-outline-btn-color, var(--color-p3, #323a45));
23122
+ background-color: var(--standout-outline-btn-bg, var(--white, #fff));
23123
+ border-color: var(
23124
+ --standout-outline-btn-border-color,
23125
+ var(--color-p3, #323a45)
23126
+ );
22774
23127
  font-weight: var(--font-weight-6);
22775
23128
  }
22776
23129
  .btn-outline-standout:focus {
22777
- outline: solid 2px var(--outline-default-color) !important;
23130
+ outline: solid 2px
23131
+ var(--outline-standout-outline-btn, var(--outline-default-color)) !important;
22778
23132
  outline-offset: -4px;
22779
23133
  }
22780
23134
  .btn-outline-standout .badge {
@@ -22788,9 +23142,15 @@ fieldset[disabled] .btn-standout.active {
22788
23142
  .btn-outline-standout:not(:disabled, .disabled).active,
22789
23143
  .btn-outline-standout .show > .dropdown-toggle,
22790
23144
  .open > .dropdown-toggle .btn-outline-standout {
22791
- color: var(--color-p3-darker, #242830);
22792
- background-color: var(--white, #fff);
22793
- border-color: var(--color-p3-darker, #242830);
23145
+ color: var(
23146
+ --standout-outline-btn-color-hover,
23147
+ var(--color-p3-darker, #242830)
23148
+ );
23149
+ background-color: var(--standout-outline-btn-bg-hover, var(--white, #fff));
23150
+ border-color: var(
23151
+ --standout-outline-btn-border-color-hover,
23152
+ var(--color-p3-darker, #242830)
23153
+ );
22794
23154
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
22795
23155
  background-image: none;
22796
23156
  }
@@ -22810,19 +23170,28 @@ fieldset[disabled] .btn-outline-standout:hover,
22810
23170
  fieldset[disabled] .btn-outline-standout:focus,
22811
23171
  fieldset[disabled] .btn-outline-standout:active,
22812
23172
  fieldset[disabled] .btn-outline-standout.active {
22813
- background-color: var(--white, #fff) !important;
22814
- border-color: var(--color-p3, #323a45);
23173
+ background-color: var(
23174
+ --standout-outline-btn-bg-disabled,
23175
+ var(--standout-outline-btn-bg, var(--white, #fff))
23176
+ ) !important;
23177
+ border-color: var(
23178
+ --standout-outline-btn-border-color-disabled,
23179
+ var(--standout-outline-btn-border-color, var(--color-p3, #323a45))
23180
+ );
22815
23181
  }
22816
23182
 
22817
23183
  /* HIGHLIGHT BUTTON */
22818
23184
  .btn-highlight {
22819
- color: var(--black, #000);
22820
- background-color: var(--color-p1-light, #f2c45a);
22821
- border-color: var(--color-p1-light, #f2c45a);
23185
+ color: var(--highlight-btn-color, var(--black, #000));
23186
+ background-color: var(--highlight-btn-bg, var(--color-p1-light, #f2c45a));
23187
+ border-color: var(
23188
+ --highlight-btn-border-color,
23189
+ var(--color-p1-light, #f2c45a)
23190
+ );
22822
23191
  font-weight: var(--font-weight-6);
22823
23192
  }
22824
23193
  .btn-highlight:focus {
22825
- outline: solid 2px var(--black, #000) !important;
23194
+ outline: solid 2px var(--outline-highlight-btn, var(--black, #000)) !important;
22826
23195
  outline-offset: -4px;
22827
23196
  }
22828
23197
  .btn-highlight .badge {
@@ -22836,9 +23205,15 @@ fieldset[disabled] .btn-outline-standout.active {
22836
23205
  .btn-highlight:not(:disabled, .disabled).active,
22837
23206
  .btn-highlight .show > .dropdown-toggle,
22838
23207
  .open > .dropdown-toggle .btn-highlight {
22839
- color: var(--gray-900, #3b3a48);
22840
- background-color: var(--color-p1-lighter, #f5ce73);
22841
- border-color: var(--color-p1-lighter, #f5ce73);
23208
+ color: var(--highlight-btn-color-hover, var(--gray-900, #3b3a48));
23209
+ background-color: var(
23210
+ --highlight-btn-bg-hover,
23211
+ var(--color-p1-lighter, #f5ce73)
23212
+ );
23213
+ border-color: var(
23214
+ --highlight-btn-border-color-hover,
23215
+ var(--color-p1-lighter, #f5ce73)
23216
+ );
22842
23217
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
22843
23218
  background-image: none;
22844
23219
  }
@@ -22858,19 +23233,30 @@ fieldset[disabled] .btn-highlight:hover,
22858
23233
  fieldset[disabled] .btn-highlight:focus,
22859
23234
  fieldset[disabled] .btn-highlight:active,
22860
23235
  fieldset[disabled] .btn-highlight.active {
22861
- background-color: var(--color-p1-light, #f2c45a) !important;
22862
- border-color: var(--color-p1-light, #f2c45a);
23236
+ color: var(--highlight-btn-color-disabled, var(--black, #000));
23237
+ background-color: var(
23238
+ --highlight-btn-bg-disabled,
23239
+ var(--highlight-btn-bg, var(--color-p1-light, #f2c45a))
23240
+ ) !important;
23241
+ border-color: var(
23242
+ --highlight-btn-border-color-disabled,
23243
+ var(--highlight-btn-border-color, var(--color-p1-light, #f2c45a))
23244
+ );
22863
23245
  }
22864
23246
 
22865
23247
  /* HIGHLIGHT OUTLINE BUTTON */
22866
23248
  .btn-outline-highlight {
22867
- color: var(--black, #000);
22868
- background-color: transparent;
22869
- border-color: var(--color-p1-light, #f2c45a);
23249
+ color: var(--highlight-outline-btn-color, var(--black, #000));
23250
+ background-color: var(--highlight-outline-btn-bg, transparent);
23251
+ border-color: var(
23252
+ --highlight-outline-btn-border-color,
23253
+ var(--color-p1-light, #f2c45a)
23254
+ );
22870
23255
  font-weight: var(--font-weight-6);
22871
23256
  }
22872
23257
  .btn-outline-highlight:focus {
22873
- outline: solid 2px var(--outline-default-color) !important;
23258
+ outline: solid 2px
23259
+ var(--outline-highlight-outline-btn, var(--outline-default-color)) !important;
22874
23260
  outline-offset: -4px;
22875
23261
  }
22876
23262
  .btn-outline-highlight .badge {
@@ -22884,9 +23270,15 @@ fieldset[disabled] .btn-highlight.active {
22884
23270
  .btn-outline-highlight:not(:disabled, .disabled).active,
22885
23271
  .btn-outline-highlight .show > .dropdown-toggle,
22886
23272
  .open > .dropdown-toggle .btn-outline-highlight {
22887
- color: var(--gray-900, #3b3a48);
22888
- background-color: var(--gray-50, #fafafa);
22889
- border-color: var(--color-p1-lighter, #f5ce73);
23273
+ color: var(--highlight-outline-btn-color-hover, var(--gray-900, #3b3a48));
23274
+ background-color: var(
23275
+ --highlight-outline-btn-bg-hover,
23276
+ var(--gray-50, #fafafa)
23277
+ );
23278
+ border-color: var(
23279
+ --highlight-outline-btn-border-color-hover,
23280
+ var(--color-p1-lighter, #f5ce73)
23281
+ );
22890
23282
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
22891
23283
  background-image: none;
22892
23284
  }
@@ -22906,25 +23298,36 @@ fieldset[disabled] .btn-outline-highlight:hover,
22906
23298
  fieldset[disabled] .btn-outline-highlight:focus,
22907
23299
  fieldset[disabled] .btn-outline-highlight:active,
22908
23300
  fieldset[disabled] .btn-outline-highlight.active {
22909
- background-color: transparent !important;
22910
- border-color: var(--color-p1-light, #f2c45a);
23301
+ color: var(--highlight-outline-btn-color-disabled, var(--gray-900, #3b3a48));
23302
+ background-color: var(
23303
+ --highlight-outline-btn-bg-disabled,
23304
+ var(--highlight-outline-btn-bg, transparent)
23305
+ ) !important;
23306
+ border-color: var(
23307
+ --highlight-outline-btn-border-color-disabled,
23308
+ var(--highlight-outline-btn-border-color, var(--color-p1-light, #f2c45a))
23309
+ );
22911
23310
  }
22912
23311
 
22913
23312
  /* SECONDARY BUTTON */
22914
23313
  .btn-secondary {
22915
- color: var(--gray-700, #5e5e6a);
22916
- background-color: var(--gray-50, #fafafa);
22917
- border-color: var(--gray-700, #5e5e6a);
23314
+ color: var(--secondary-btn-color, var(--gray-700, #5e5e6a));
23315
+ background-color: var(--secondary-btn-bg, var(--gray-50, #fafafa));
23316
+ border-color: var(--secondary-btn-border-color, var(--gray-700, #5e5e6a));
22918
23317
  font-weight: var(--font-weight-6);
22919
23318
  border-width: 1px;
22920
23319
  }
22921
23320
  .btn-secondary:focus {
22922
- outline: solid 2px var(--outline-default-color) !important;
23321
+ outline: solid 2px
23322
+ var(--outline-secondary-btn, var(--outline-default-color)) !important;
22923
23323
  outline-offset: -4px;
22924
23324
  }
22925
23325
  .btn-secondary:disabled,
22926
23326
  .btn-secondary.disabled {
22927
- color: var(--black, #000);
23327
+ color: var(
23328
+ --secondary-btn-color-disabled,
23329
+ var(--secondary-btn-color, var(--black, #000))
23330
+ );
22928
23331
  }
22929
23332
  .btn-secondary.active {
22930
23333
  background: #fff;
@@ -22942,9 +23345,9 @@ fieldset[disabled] .btn-outline-highlight.active {
22942
23345
  .btn-secondary:not(:disabled, .disabled).active,
22943
23346
  .btn-secondary .show > .dropdown-toggle,
22944
23347
  .open > .dropdown-toggle .btn-secondary {
22945
- color: var(--link-hover-color, #005a7f);
22946
- background-color: #fff;
22947
- border-color: var(--black, #000);
23348
+ color: var(--secondary-btn-color-hover, var(--link-color-hover, #005a7f));
23349
+ background-color: var(--secondary-btn-bg-hover, #fff);
23350
+ border-color: var(--secondary-btn-border-color-hover, var(--black, #000));
22948
23351
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
22949
23352
  background-image: none;
22950
23353
  }
@@ -22964,20 +23367,30 @@ fieldset[disabled] .btn-secondary:hover,
22964
23367
  fieldset[disabled] .btn-secondary:focus,
22965
23368
  fieldset[disabled] .btn-secondary:active,
22966
23369
  fieldset[disabled] .btn-secondary.active {
22967
- background-color: var(--gray-50, #fafafa) !important;
22968
- border-color: var(--gray-700, #5e5e6a);
23370
+ background-color: var(
23371
+ --secondary-btn-bg-disabled,
23372
+ var(--secondary-btn-bg, var(--gray-50, #fafafa))
23373
+ ) !important;
23374
+ border-color: var(
23375
+ --secondary-btn-border-color-disabled,
23376
+ var(--secondary-btn-border-color, var(--gray-700, #5e5e6a))
23377
+ );
22969
23378
  }
22970
23379
 
22971
23380
  /* SECONDARY OUTLINE BUTTON */
22972
23381
  .btn-outline-secondary {
22973
- color: var(--gray-700, #5e5e6a);
22974
- background-color: var(--white, #fff);
22975
- border-color: var(--gray-700, #5e5e6a);
23382
+ color: var(--secondary-outline-btn-color, var(--gray-700, #5e5e6a));
23383
+ background-color: var(--secondary-outline-btn-bg, var(--white, #fff));
23384
+ border-color: var(
23385
+ --secondary-outline-btn-border-color,
23386
+ var(--gray-700, #5e5e6a)
23387
+ );
22976
23388
  font-weight: var(--font-weight-6);
22977
23389
  }
22978
23390
  .btn-outline-secondary:focus {
22979
- outline: solid 2px var(--outline-default-color) !important;
22980
- offset: -4px;
23391
+ outline: solid 2px
23392
+ var(--outline-secondary-outline-btn, var(--outline-default-color)) !important;
23393
+ outline-offset: -4px !important;
22981
23394
  }
22982
23395
  .btn-outline-secondary .badge {
22983
23396
  color: var(--white, #fff);
@@ -22990,9 +23403,12 @@ fieldset[disabled] .btn-secondary.active {
22990
23403
  .btn-outline-secondary:not(:disabled, .disabled).active,
22991
23404
  .btn-outline-secondary .show > .dropdown-toggle,
22992
23405
  .open > .dropdown-toggle .btn-outline-secondary {
22993
- color: var(--gray-900, #3b3a48);
22994
- background-color: var(--white, #fff);
22995
- border-color: var(--gray-900, #3b3a48);
23406
+ color: var(--secondary-outline-btn-color-hover, var(--gray-900, #3b3a48));
23407
+ background-color: var(--secondary-outline-btn-bg-hover, var(--white, #fff));
23408
+ border-color: var(
23409
+ --secondary-outline-btn-border-color-hover,
23410
+ var(--gray-900, #3b3a48)
23411
+ );
22996
23412
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
22997
23413
  background-image: none;
22998
23414
  }
@@ -23012,19 +23428,25 @@ fieldset[disabled] .btn-outline-secondary:hover,
23012
23428
  fieldset[disabled] .btn-outline-secondary:focus,
23013
23429
  fieldset[disabled] .btn-outline-secondary:active,
23014
23430
  fieldset[disabled] .btn-outline-secondary.active {
23015
- background-color: var(--white, #fff) !important;
23016
- border-color: var(--gray-700, #5e5e6a);
23431
+ background-color: var(
23432
+ --secondary-outline-btn-bg-disabled,
23433
+ var(--secondary-outline-btn-bg, var(--white, #fff))
23434
+ ) !important;
23435
+ border-color: var(
23436
+ --secondary-outline-btn-border-color-disabled,
23437
+ var(--secondary-outline-btn-border-color, var(--gray-700, #5e5e6a))
23438
+ );
23017
23439
  }
23018
23440
 
23019
23441
  /* S1 BUTTON */
23020
23442
  .btn-s1 {
23021
- color: var(--gray-700, #5e5e6a);
23022
- background-color: var(--color-s1, #eef8fb);
23023
- border-color: var(--gray-700, #5e5e6a);
23443
+ color: var(--s1-btn-color, var(--gray-700, #5e5e6a));
23444
+ background-color: var(--s1-btn-bg, var(--color-s1, #eef8fb));
23445
+ border-color: var(--s1-btn-border-color, var(--gray-700, #5e5e6a));
23024
23446
  font-weight: var(--font-weight-6);
23025
23447
  }
23026
23448
  .btn-s1:focus {
23027
- outline: solid 2px var(--outline-default-color) !important;
23449
+ outline: solid 2px var(--outline-s1-btn, var(--outline-default-color)) !important;
23028
23450
  outline-offset: -4px;
23029
23451
  }
23030
23452
  .btn-s1.active {
@@ -23032,7 +23454,10 @@ fieldset[disabled] .btn-outline-secondary.active {
23032
23454
  }
23033
23455
  .btn-s1.active,
23034
23456
  .btn-s1:disabled {
23035
- color: var(--black, #000);
23457
+ color: var(
23458
+ --s1-btn-color-disabled,
23459
+ var(--s1-btn-color, var(--black, #000))
23460
+ );
23036
23461
  }
23037
23462
  .btn-s1 .badge {
23038
23463
  color: var(--color-s1, #eef8fb);
@@ -23045,9 +23470,9 @@ fieldset[disabled] .btn-outline-secondary.active {
23045
23470
  .btn-s1:not(:disabled, .disabled).active,
23046
23471
  .btn-s1 .show > .dropdown-toggle,
23047
23472
  .open > .dropdown-toggle .btn-s1 {
23048
- color: var(--black, #000);
23049
- background-color: #fff;
23050
- border-color: var(--black, #000);
23473
+ color: var(--s1-btn-color-hover, var(--black, #000));
23474
+ background-color: var(--s1-btn-bg-hover, #fff);
23475
+ border-color: var(--s1-btn-border-color-hover, var(--black, #000));
23051
23476
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
23052
23477
  background-image: none;
23053
23478
  }
@@ -23067,8 +23492,14 @@ fieldset[disabled] .btn-s1:hover,
23067
23492
  fieldset[disabled] .btn-s1:focus,
23068
23493
  fieldset[disabled] .btn-s1:active,
23069
23494
  fieldset[disabled] .btn-s1.active {
23070
- background-color: var(--color-s1, #eef8fb) !important;
23071
- border-color: var(--gray-700, #5e5e6a);
23495
+ background-color: var(
23496
+ --s1-btn-bg-disabled,
23497
+ var(--s1-btn-bg, var(--color-s1, #eef8fb))
23498
+ ) !important;
23499
+ border-color: var(
23500
+ --s1-btn-border-color-disabled,
23501
+ var(--s1-btn-border-color, var(--gray-700, #5e5e6a))
23502
+ );
23072
23503
  }
23073
23504
 
23074
23505
  /* LIGHT BUTTON */
@@ -23079,7 +23510,7 @@ fieldset[disabled] .btn-s1.active {
23079
23510
  font-weight: var(--font-weight-6);
23080
23511
  }
23081
23512
  .btn-light:focus {
23082
- outline: solid 2px var(--outline-default-color) !important;
23513
+ outline: solid 2px var(--outline-light-btn, var(--outline-default-color)) !important;
23083
23514
  outline-offset: -4px;
23084
23515
  }
23085
23516
  .btn-light .badge {
@@ -23115,19 +23546,20 @@ fieldset[disabled] .btn-light:hover,
23115
23546
  fieldset[disabled] .btn-light:focus,
23116
23547
  fieldset[disabled] .btn-light:active,
23117
23548
  fieldset[disabled] .btn-light.active {
23118
- background-color: var(--white, #fff) !important;
23119
- border-color: var(--white, #fff);
23549
+ background-color: var(--light-btn-bg-disabled, var(--white, #fff)) !important;
23550
+ border-color: var(--light-btn-border-color-disabled, var(--white, #fff));
23120
23551
  }
23121
23552
 
23122
23553
  /* LIGHT OUTLINE BUTTON */
23123
23554
  .btn-outline-light {
23124
- color: var(--white, #fff);
23125
- background-color: transparent;
23126
- border-color: var(--white, #fff);
23555
+ color: var(--light-outline-btn-color, var(--white, #fff));
23556
+ background-color: var(--light-outline-btn-bg, transparent);
23557
+ border-color: var(--light-outline-btn-border-color, var(--white, #fff));
23127
23558
  font-weight: var(--font-weight-6);
23128
23559
  }
23129
23560
  .btn-outline-light:focus {
23130
- outline: solid 2px var(--outline-dark-mode-color) !important;
23561
+ outline: solid 2px
23562
+ var(--outline-light-outline-btn, var(--outline-dark-mode-color)) !important;
23131
23563
  outline-offset: -4px;
23132
23564
  }
23133
23565
  .btn-outline-light .badge {
@@ -23141,9 +23573,12 @@ fieldset[disabled] .btn-light.active {
23141
23573
  .btn-outline-light:not(:disabled, .disabled).active,
23142
23574
  .btn-outline-light .show > .dropdown-toggle,
23143
23575
  .open > .dropdown-toggle .btn-outline-light {
23144
- color: var(--gray-100, #f3f3f4);
23145
- background-color: transparent;
23146
- border-color: var(--gray-100, #f3f3f4);
23576
+ color: var(--light-outline-btn-color-hover, var(--gray-100, #f3f3f4));
23577
+ background-color: var(--light-outline-btn-bg-hover, transparent);
23578
+ border-color: var(
23579
+ --light-outline-btn-border-color-hover,
23580
+ var(--gray-100, #f3f3f4)
23581
+ );
23147
23582
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
23148
23583
  background-image: none;
23149
23584
  }
@@ -23163,8 +23598,14 @@ fieldset[disabled] .btn-outline-light:hover,
23163
23598
  fieldset[disabled] .btn-outline-light:focus,
23164
23599
  fieldset[disabled] .btn-outline-light:active,
23165
23600
  fieldset[disabled] .btn-outline-light.active {
23166
- background-color: transparent !important;
23167
- border-color: var(--white, #fff);
23601
+ background-color: var(
23602
+ --light-outline-btn-bg-disabled,
23603
+ var(--light-outline-btn-bg, transparent)
23604
+ ) !important;
23605
+ border-color: var(
23606
+ --light-outline-btn-border-color-disabled,
23607
+ var(--light-outline-btn-border-color, var(--white, #fff))
23608
+ );
23168
23609
  }
23169
23610
 
23170
23611
  /* BUTTON MORE */
@@ -23326,52 +23767,55 @@ fieldset[disabled] .btn-more {
23326
23767
  }
23327
23768
 
23328
23769
  .btn-default.btn-hover:hover {
23329
- background-color: var(--white, #fff);
23770
+ background-color: var(--btn-hover-default-bg, var(--white, #fff));
23330
23771
  overflow: hidden;
23331
23772
  }
23332
23773
 
23333
23774
  .btn-default.btn-hover::before {
23334
- background: var(--gray-50, #fafafa);
23775
+ background: var(--btn-hover-default-overlay, var(--gray-50, #fafafa));
23335
23776
  overflow: hidden;
23336
23777
  }
23337
23778
 
23338
23779
  .btn-primary.btn-hover:hover {
23339
- background-color: var(--color-p2, #046b99);
23780
+ background-color: var(--btn-hover-primary-bg, var(--color-p2, #046b99));
23340
23781
  overflow: hidden;
23341
23782
  }
23342
23783
 
23343
23784
  .btn-primary.btn-hover::before {
23344
- background: var(--color-p2-darker, #214a68);
23785
+ background: var(--btn-hover-primary-overlay, var(--color-p2-darker, #214a68));
23345
23786
  overflow: hidden;
23346
23787
  }
23347
23788
 
23348
23789
  .btn-highlight.btn-hover:hover {
23349
- background-color: var(--color-p1, #fdb81e);
23790
+ background-color: var(--btn-hover-highlight-bg, var(--color-p1, #fdb81e));
23350
23791
  overflow: hidden;
23351
23792
  }
23352
23793
 
23353
23794
  .btn-highlight.btn-hover::before {
23354
- background: var(--color-p1-light, #f2c45a);
23795
+ background: var(
23796
+ --btn-hover-highlight-overlay,
23797
+ var(--color-p1-light, #f2c45a)
23798
+ );
23355
23799
  overflow: hidden;
23356
23800
  }
23357
23801
 
23358
23802
  .btn-standout.btn-hover:hover {
23359
- background-color: var(--color-p3, #323a45);
23803
+ background-color: var(--btn-hover-standout-bg, var(--color-p3, #323a45));
23360
23804
  overflow: hidden;
23361
23805
  }
23362
23806
 
23363
23807
  .btn-standout.btn-hover::before {
23364
- background: var(--color-p3-light, #525760);
23808
+ background: var(--btn-hover-standout-overlay, var(--color-p3-light, #525760));
23365
23809
  overflow: hidden;
23366
23810
  }
23367
23811
 
23368
23812
  .btn-secondary.btn-hover:hover {
23369
- background-color: var(--gray-50, #fafafa);
23813
+ background-color: var(--btn-hover-secondary-bg, var(--gray-50, #fafafa));
23370
23814
  overflow: hidden;
23371
23815
  }
23372
23816
 
23373
23817
  .btn-secondary.btn-hover::before {
23374
- background: var(--white, #fff);
23818
+ background: var(--btn-hover-secondary-overlay, var(--white, #fff));
23375
23819
  overflow: hidden;
23376
23820
  }
23377
23821
 
@@ -23381,7 +23825,7 @@ fieldset[disabled] .btn-more {
23381
23825
  }
23382
23826
 
23383
23827
  .btn-outline-primary.btn-hover::before {
23384
- background: var(--gray-50, #fafafa);
23828
+ background: var(--btn-hover-primary-overlay, var(--gray-50, #fafafa));
23385
23829
  overflow: hidden;
23386
23830
  }
23387
23831
 
@@ -23391,7 +23835,7 @@ fieldset[disabled] .btn-more {
23391
23835
  }
23392
23836
 
23393
23837
  .btn-outline-standout.btn-hover::before {
23394
- background: var(--gray-50, #fafafa);
23838
+ background: var(--btn-hover-standout-overlay, var(--gray-50, #fafafa));
23395
23839
  overflow: hidden;
23396
23840
  }
23397
23841
 
@@ -23401,7 +23845,7 @@ fieldset[disabled] .btn-more {
23401
23845
  }
23402
23846
 
23403
23847
  .btn-outline-secondary.btn-hover::before {
23404
- background: var(--gray-50, #fafafa);
23848
+ background: var(--btn-hover-secondary-overlay, var(--gray-50, #fafafa));
23405
23849
  overflow: hidden;
23406
23850
  }
23407
23851
 
@@ -23475,6 +23919,42 @@ fieldset[disabled] .btn-more {
23475
23919
  .btn-block {
23476
23920
  white-space: normal;
23477
23921
  }
23922
+ /* -----------------------------------------
23923
+ EXTERNAL LINKS
23924
+ /src/css/cagov/external-link.css
23925
+ ----------------------------------------- */
23926
+
23927
+ :root {
23928
+ --cagov-external-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 3h7v7h-2V7l-9 9-2-2 9-9H14V3M5 5h5V3H5c-1 0-2 1-2 2v14c0 1 1 2 2 2h14c1 0 2-1 2-2v-5h-2v5H5V5'/></svg>");
23929
+ }
23930
+
23931
+ a.cagov-external-link {
23932
+ position: relative;
23933
+ }
23934
+
23935
+ a.cagov-external-link::after {
23936
+ content: "";
23937
+ display: inline-block;
23938
+ width: 0.9em;
23939
+ height: 0.9em;
23940
+ margin-left: 0.25em;
23941
+
23942
+ /* Icon color follows the link text color */
23943
+ background-color: currentColor;
23944
+ vertical-align: text-bottom;
23945
+
23946
+ /* Safari 13.1 requires prefixed mask properties */
23947
+ -webkit-mask-image: var(--cagov-external-icon);
23948
+ -webkit-mask-repeat: no-repeat;
23949
+ -webkit-mask-size: 100% 100%;
23950
+ -webkit-mask-position: center;
23951
+
23952
+ /* Standard mask */
23953
+ mask-image: var(--cagov-external-icon);
23954
+ mask-repeat: no-repeat;
23955
+ mask-size: 100% 100%;
23956
+ mask-position: center;
23957
+ }
23478
23958
  /* -----------------------------------------
23479
23959
  Number Counter
23480
23960
  ----------------------------------------- */
@@ -23502,7 +23982,7 @@ fieldset[disabled] .btn-more {
23502
23982
  margin-top: 0;
23503
23983
  font-weight: 700;
23504
23984
  line-height: 1.1;
23505
- border-left: 3px solid #fff;
23985
+ border-left: 3px solid var(--body-bg, var(--white, #fff));
23506
23986
  }
23507
23987
 
23508
23988
  .countdown-text {
@@ -23516,11 +23996,11 @@ fieldset[disabled] .btn-more {
23516
23996
  .page-navigation {
23517
23997
  margin-bottom: 1.5rem;
23518
23998
  padding-bottom: 0.75rem;
23519
- border-bottom: 1px solid var(--gray-200, #d4d4d7);
23999
+ border-bottom: 1px solid var(--border-color-default, var(--gray-200, #d4d4d7));
23520
24000
  }
23521
24001
 
23522
24002
  .page-navigation .label {
23523
- color: var(--gray-700, #5e5e6a);
24003
+ color: var(--text-muted, var(--gray-700, #5e5e6a));
23524
24004
  font-weight: var(--font-weight-7);
23525
24005
  font-size: calc(var(--font-size-regular) + var(--ratio));
23526
24006
  line-height: var(--font-lineheight-5);
@@ -23575,6 +24055,11 @@ fieldset[disabled] .btn-more {
23575
24055
  /* -----------------------------------------
23576
24056
  PROGRESS BAR - /src/css/cagov/progress-bar.css
23577
24057
  ----------------------------------------- */
24058
+
24059
+ .progress {
24060
+ background-color: var(--default-bg-darker, #d4d4d7);
24061
+ }
24062
+
23578
24063
  .progress-pointer {
23579
24064
  position: absolute;
23580
24065
  bottom: 100%;
@@ -23588,6 +24073,7 @@ fieldset[disabled] .btn-more {
23588
24073
  background-color: transparent;
23589
24074
  z-index: 1;
23590
24075
  }
24076
+
23591
24077
  .progress-pointer::after {
23592
24078
  content: "";
23593
24079
  position: absolute;
@@ -23916,7 +24402,7 @@ fieldset[disabled] .btn-more {
23916
24402
  margin-top: 0;
23917
24403
  margin-bottom: 0;
23918
24404
  padding-left: 2rem;
23919
- border-left: 1px solid #ddd;
24405
+ border-left: 1px solid var(--border-color-default, #d4d4d7);
23920
24406
  }
23921
24407
 
23922
24408
  .dot-text h3 {
@@ -23930,7 +24416,7 @@ fieldset[disabled] .btn-more {
23930
24416
 
23931
24417
  .timeline-lines .col-sm-3:nth-last-of-type(2) .dot-text::before,
23932
24418
  .timeline-lines .col-sm-3:last-of-type .dot-text::before {
23933
- background: #ddd;
24419
+ background: var(--border-color-default, #d4d4d7);
23934
24420
  }
23935
24421
  }
23936
24422
 
@@ -24169,15 +24655,17 @@ ul.list-navigation > li > a, ul.list-navigation > li > ul > li > a, nav.side-nav
24169
24655
  position: relative;
24170
24656
  display: block;
24171
24657
  text-decoration: none !important;
24172
- color: var(--gray-700, #5e5e6a);
24658
+ color: var(--text-muted, var(--gray-700, #5e5e6a));
24173
24659
  padding-bottom: 0.7rem;
24174
24660
  padding-top: 0.7rem;
24175
24661
  padding-left: 1rem;
24176
- border-bottom: 1px solid var(--gray-100, #f3f3f4);
24662
+ border-bottom: 1px solid
24663
+ var(--border-color-muted, var(--gray-100, #f3f3f4));
24177
24664
  }
24178
24665
 
24179
24666
  ul.list-navigation > li > a.active, ul.list-navigation > li > ul > li > a.active, nav.side-navigation > ul > li > a.active, nav.side-navigation > ul > li > ul > li > a.active {
24180
- background-color: var(--gray-75, #f3f3f4);
24667
+ background-color: var(--sidenav-active-bg, var(--gray-75, #f3f3f4));
24668
+ color: var(--sidenav-active-color, inherit);
24181
24669
  }
24182
24670
 
24183
24671
  ul.list-navigation > li > a.active::before, ul.list-navigation > li > ul > li > a.active::before, nav.side-navigation > ul > li > a.active::before, nav.side-navigation > ul > li > ul > li > a.active::before {
@@ -24193,7 +24681,7 @@ ul.list-navigation > li > a.active::before, ul.list-navigation > li > ul > li >
24193
24681
  }
24194
24682
 
24195
24683
  ul.list-navigation > li > a:hover, ul.list-navigation > li > ul > li > a:hover, nav.side-navigation > ul > li > a:hover, nav.side-navigation > ul > li > ul > li > a:hover {
24196
- color: var(--gray-900, #3b3a48);
24684
+ color: var(--text-color, var(--gray-900, #3b3a48));
24197
24685
  }
24198
24686
 
24199
24687
  /* stylelint-disable-next-line no-descending-specificity */
@@ -24211,13 +24699,16 @@ ul.list-navigation > li > a:focus,
24211
24699
  nav.side-navigation > ul > li > a:hover,
24212
24700
  nav.side-navigation > ul > li > ul > li > a:focus,
24213
24701
  nav.side-navigation > ul > li > ul > li > a:hover {
24214
- background-color: var(--gray-50, #fafafa);
24702
+ background-color: var(--sidenav-hover-bg, var(--gray-50, #fafafa));
24215
24703
  }
24216
24704
 
24217
24705
  /* stylelint-disable-next-line no-descending-specificity */
24218
24706
 
24219
24707
  ul.list-navigation > li > a:focus.active, ul.list-navigation > li > a:hover.active, ul.list-navigation > li > ul > li > a:focus.active, ul.list-navigation > li > ul > li > a:hover.active, nav.side-navigation > ul > li > a:focus.active, nav.side-navigation > ul > li > a:hover.active, nav.side-navigation > ul > li > ul > li > a:focus.active, nav.side-navigation > ul > li > ul > li > a:hover.active {
24220
- background-color: var(--gray-100, #f3f3f4);
24708
+ background-color: var(
24709
+ --sidenav-active-hover-bg,
24710
+ var(--gray-100, #f3f3f4)
24711
+ );
24221
24712
  }
24222
24713
 
24223
24714
  ul.list-navigation > li > a.landing, ul.list-navigation > li > ul > li > a.landing, nav.side-navigation > ul > li > a.landing, nav.side-navigation > ul > li > ul > li > a.landing {
@@ -24265,12 +24756,12 @@ ul.list-navigation > li > ul > li > a, ul.list-navigation > li > ul > li > ul >
24265
24756
  position: relative;
24266
24757
  right: 0;
24267
24758
  padding-right: 2.3rem;
24268
- color: var(--color-p2, #046b99);
24759
+ color: var(--link-color, var(--color-p2, #046b99));
24269
24760
  }
24270
24761
 
24271
24762
  .sidenav-toggle:hover,
24272
24763
  .sidenav-toggle:focus {
24273
- color: var(--color-p2-darker, #214a68);
24764
+ color: var(--link-color-hover, var(--color-p2-darker, #214a68));
24274
24765
  }
24275
24766
 
24276
24767
  .sidenav-toggle .ca-gov-icon-caret-down {
@@ -24371,16 +24862,16 @@ a.sidenav {
24371
24862
  padding-left: 1rem;
24372
24863
  position: relative;
24373
24864
  text-decoration: none !important;
24374
- color: var(--gray-700, #5e5e6a);
24375
- border-bottom: 1px solid var(--gray-100, #f3f3f4);
24376
- background-color: var(--white, #fff);
24865
+ color: var(--text-muted, var(--gray-700, #5e5e6a));
24866
+ border-bottom: 1px solid var(--border-color-muted, var(--gray-100, #f3f3f4));
24867
+ background-color: var(--body-bg, var(--white, #fff));
24377
24868
  }
24378
24869
 
24379
24870
  a.sidenav:hover,
24380
24871
  a.sidenav:focus {
24381
24872
  text-decoration: none;
24382
- background-color: var(--gray-50, #fafafa);
24383
- color: var(--gray-900, #3b3a48);
24873
+ background-color: var(--sidenav-hover-bg, var(--gray-50, #fafafa));
24874
+ color: var(--text-color, var(--gray-900, #3b3a48));
24384
24875
  }
24385
24876
 
24386
24877
  a.sidenav:focus {
@@ -24388,16 +24879,19 @@ a.sidenav:focus {
24388
24879
  }
24389
24880
 
24390
24881
  a.sidenav.active {
24391
- color: var(--gray-700, #5e5e6a);
24882
+ color: var(--sidenav-active-color, var(--gray-700, #5e5e6a));
24392
24883
  text-decoration: none;
24393
- background-color: var(--gray-75, #f3f3f4);
24884
+ background-color: var(--sidenav-active-bg, var(--gray-75, #f3f3f4));
24394
24885
  }
24395
24886
 
24396
24887
  a.sidenav.active:hover,
24397
24888
  a.sidenav.active:focus {
24398
24889
  text-decoration: none !important;
24399
- color: var(--black, #000);
24400
- background-color: var(--gray-100, #f3f3f4);
24890
+ color: var(--sidenav-active-hover-color, var(--black, #000));
24891
+ background-color: var(
24892
+ --sidenav-active-hover-bg,
24893
+ var(--gray-100, #f3f3f4)
24894
+ );
24401
24895
  }
24402
24896
 
24403
24897
  a.sidenav.active::before {
@@ -24693,13 +25187,15 @@ a.sidenav.back::after {
24693
25187
  line-height: var(--font-lineheight-3);
24694
25188
  margin-bottom: 0;
24695
25189
  border-color: var(--color-p1, #fdb81e);
25190
+
25191
+ /* White Color */
24696
25192
  }
24697
25193
 
24698
25194
  .cagov-step-list > li::before {
24699
25195
  font-size: 1.625rem;
24700
25196
  font-weight: 700;
24701
25197
  border: 5px solid;
24702
- background-color: #fff;
25198
+ background-color: var(--body-bg, #fff);
24703
25199
  border-radius: 50%;
24704
25200
  text-align: center;
24705
25201
  position: absolute;
@@ -24719,8 +25215,6 @@ a.sidenav.back::after {
24719
25215
  margin-left: 5px;
24720
25216
  }
24721
25217
 
24722
- /* White Color */
24723
-
24724
25218
  .cagov-step-list > li span.has-black-color,
24725
25219
  .cagov-step-list > li .cagov-step-list-content {
24726
25220
  margin-top: 1rem;
@@ -24736,7 +25230,7 @@ a.sidenav.back::after {
24736
25230
 
24737
25231
  .link-grid {
24738
25232
  display: block;
24739
- border: 1px solid var(--gray-200, #d4d4d7);
25233
+ border: 1px solid var(--border-color-default, #d4d4d7);
24740
25234
  border-radius: 5px;
24741
25235
  font-size: 1.4rem;
24742
25236
  font-weight: 700;
@@ -24744,14 +25238,15 @@ a.sidenav.back::after {
24744
25238
  position: relative;
24745
25239
  text-decoration: none !important;
24746
25240
  height: 100%;
24747
- color: var(--color-p2, #046b99);
24748
- border-bottom: 4px solid var(--color-p2, #046b99);
25241
+ color: var(--link-grid-color, var(--color-p2, #046b99));
25242
+ border-bottom: 4px solid
25243
+ var(--link-grid-border-bottom-color, var(--color-p2, #046b99));
24749
25244
  }
24750
25245
 
24751
25246
  .link-grid:hover,
24752
25247
  .link-grid:focus {
24753
- background: var(--gray-100, #f3f3f4);
24754
- color: var(--color-p2-darker, #214a68);
25248
+ background: var(--link-grid-hover-bg, var(--gray-100, #f3f3f4));
25249
+ color: var(--link-grid-hover-color, var(--color-p2-darker, #214a68));
24755
25250
  }
24756
25251
 
24757
25252
  .link-grid:focus {
@@ -24765,8 +25260,8 @@ a.sidenav.back::after {
24765
25260
  text-decoration: none;
24766
25261
  width: 0.55rem;
24767
25262
  height: 0.55rem;
24768
- border-top: 2px solid var(--color-p2, #046b99);
24769
- border-left: 2px solid var(--color-p2, #046b99);
25263
+ border-top: 2px solid var(--link-grid-color, var(--color-p2, #046b99));
25264
+ border-left: 2px solid var(--link-grid-color, var(--color-p2, #046b99));
24770
25265
  vertical-align: middle;
24771
25266
  top: 50%;
24772
25267
  transform: translateY(-50%) rotate(135deg);
@@ -25292,7 +25787,7 @@ a.sidenav.back::after {
25292
25787
 
25293
25788
  .color-gray-dark,
25294
25789
  .color-grey-dark {
25295
- color: var(--gray-900, #3b3a48);
25790
+ color: var(--text-color, var(--gray-900, #3b3a48));
25296
25791
  }
25297
25792
 
25298
25793
  .color-gray,
@@ -25300,6 +25795,15 @@ a.sidenav.back::after {
25300
25795
  color: var(--gray-700, #5e5e6a);
25301
25796
  }
25302
25797
 
25798
+ .color-muted {
25799
+ color: var(--text-muted, var(--gray-700, #5e5e6a)) !important;
25800
+ }
25801
+
25802
+ .color-muted-hover:hover,
25803
+ .color-muted-hover:focus {
25804
+ color: var(--text-color, var(--gray-900, #3b3a48)) !important;
25805
+ }
25806
+
25303
25807
  .gray-50,
25304
25808
  .gray-50-hover:hover,
25305
25809
  .gray-50-hover:focus {
@@ -25333,7 +25837,7 @@ a.sidenav.back::after {
25333
25837
  .gray-500,
25334
25838
  .gray-500-hover:hover,
25335
25839
  .gray-500-hover:focus {
25336
- color: var(--gray-50, #fafafa) !important;
25840
+ color: var(--gray-500, #898891) !important;
25337
25841
  }
25338
25842
 
25339
25843
  .gray-600,
@@ -25372,6 +25876,24 @@ a.sidenav.back::after {
25372
25876
  color: var(--gray-50, #fafafa) !important;
25373
25877
  }
25374
25878
 
25879
+ .text-color {
25880
+ color: var(--text-color, #3b3a48) !important;
25881
+ }
25882
+
25883
+ .text-color-hover:hover,
25884
+ .text-color-hover:focus {
25885
+ color: var(--text-color-hover, #000) !important;
25886
+ }
25887
+
25888
+ .link-color {
25889
+ color: var(--link-color, var(--color-p2, #046b99)) !important;
25890
+ }
25891
+
25892
+ .link-color-hover:hover,
25893
+ .link-color-hover:focus {
25894
+ color: var(--link-color-hover, var(--color-p2-darker, #035376)) !important;
25895
+ }
25896
+
25375
25897
  .text-primary {
25376
25898
  color: var(--color-p2, #046b99) !important;
25377
25899
  }
@@ -25398,57 +25920,94 @@ a.sidenav.back::after {
25398
25920
  color: var(--brand-danger, #cd402d) !important;
25399
25921
  }
25400
25922
 
25923
+ .bg-base-light {
25924
+ background-color: var(--base-light, #fff) !important;
25925
+ }
25926
+
25927
+ .bg-body {
25928
+ background-color: var(--body-bg, #fff) !important;
25929
+ }
25930
+
25931
+ .bg-base-light-hover:hover,
25932
+ .bg-base-light-hover:focus {
25933
+ background-color: var(--base-light, #fff) !important;
25934
+ }
25935
+
25401
25936
  .bg-white {
25402
25937
  background-color: var(--white, #fff) !important;
25403
25938
  }
25404
25939
 
25940
+ .bg-white-hover:hover,
25941
+ .bg-white-hover:focus {
25942
+ background-color: var(--white, #fff) !important;
25943
+ }
25944
+
25945
+ .bg-default {
25946
+ background-color: var(--default-bg, var(--gray-50, #fafafa)) !important;
25947
+ }
25948
+
25949
+ .bg-default-hover:hover,
25950
+ .bg-default-hover:focus {
25951
+ background-color: var(--default-bg-hover, var(--gray-75, #f3f3f4)) !important;
25952
+ }
25953
+
25954
+ .bg-default-hover-darker:hover,
25955
+ .bg-default-hover-darker:focus {
25956
+ background-color: var(
25957
+ --default-bg-hover-darker,
25958
+ var(--gray-100, #ededef)
25959
+ ) !important;
25960
+ }
25961
+
25405
25962
  .bg-outline-color,
25406
25963
  .bg-outline-color:hover,
25407
25964
  .bg-outline-color:focus {
25408
25965
  background-color: var(--outline-default-color, #2ea3f2) !important;
25409
25966
  }
25410
25967
 
25411
- .bg-white-hover:hover,
25412
- .bg-white-hover:focus {
25413
- background-color: var(--white, #fff) !important;
25414
- }
25415
-
25416
25968
  .bg-gray-light,
25417
25969
  .bg-grey-light {
25418
- background-color: var(--gray-100, #ededef) !important;
25970
+ background-color: var(
25971
+ --default-bg-darker,
25972
+ var(--gray-100, #ededef)
25973
+ ) !important;
25419
25974
  }
25420
25975
 
25421
25976
  .bg-gray-light-hover:hover,
25422
25977
  .bg-gray-light-hover:focus,
25423
25978
  .bg-grey-light-hover:hover,
25424
25979
  .bg-grey-light-hover:focus {
25425
- background-color: var(--gray-100, #ededef) !important;
25980
+ background-color: var(
25981
+ --default-bg-darker,
25982
+ var(--gray-100, #ededef)
25983
+ ) !important;
25426
25984
  }
25427
25985
 
25428
25986
  .bg-gray-light-hover-darker:hover,
25429
25987
  .bg-gray-light-hover-darker:focus,
25430
25988
  .bg-grey-light-hover-darker:hover,
25431
25989
  .bg-grey-light-hover-darker:focus {
25432
- background-color: var(--gray-200, #d4d4d7) !important;
25990
+ background-color: var(
25991
+ --border-color-default,
25992
+ var(--gray-200, #d4d4d7)
25993
+ ) !important;
25433
25994
  }
25434
25995
 
25435
- .bg-gray-lightest,
25436
- .bg-grey-lightest {
25437
- background-color: var(--gray-50, #fafafa) !important;
25996
+ .bg-gray-lighter,
25997
+ .bg-grey-lighter {
25998
+ background-color: var(--default-bg-hover, var(--gray-75, #f3f3f4)) !important;
25438
25999
  }
25439
26000
 
25440
- .bg-gray-lightest-hover:hover,
25441
- .bg-gray-lightest-hover:focus,
25442
- .bg-grey-lightest-hover:hover,
25443
- .bg-grey-lightest-hover:focus {
25444
- background-color: var(--gray-50, #fafafa) !important;
26001
+ .bg-gray-lightest,
26002
+ .bg-grey-lightest {
26003
+ background-color: var(--default-bg, var(--gray-50, #fafafa)) !important;
25445
26004
  }
25446
26005
 
25447
26006
  .bg-gray-lightest-hover-darker:hover,
25448
26007
  .bg-gray-lightest-hover-darker:focus,
25449
26008
  .bg-grey-lightest-hover-darker:hover,
25450
26009
  .bg-grey-lightest-hover-darker:focus {
25451
- background-color: var(--gray-75, #f3f3f4) !important;
26010
+ background-color: var(--default-bg-hover, var(--gray-75, #f3f3f4)) !important;
25452
26011
  }
25453
26012
 
25454
26013
  .bg-gray-50,
@@ -25517,6 +26076,15 @@ a.sidenav.back::after {
25517
26076
  background-color: var(--gray-900, #3b3a48) !important;
25518
26077
  }
25519
26078
 
26079
+ .bg-base-dark {
26080
+ background-color: var(--base-dark, #000) !important;
26081
+ }
26082
+
26083
+ .bg-base-dark-hover:hover,
26084
+ .bg-base-dark-hover:focus {
26085
+ background-color: var(--base-dark, #000) !important;
26086
+ }
26087
+
25520
26088
  .bg-none {
25521
26089
  background: none !important;
25522
26090
  }
@@ -25558,30 +26126,30 @@ a.sidenav.back::after {
25558
26126
  ------------------------------------ */
25559
26127
  .brd-white-before::before,
25560
26128
  .brd-white-after::after {
25561
- border-color: var(--white, #fff) !important;
26129
+ border-color: var(--base-light, var(--white, #fff)) !important;
25562
26130
  }
25563
26131
 
25564
26132
  .brd-gray-light,
25565
26133
  .brd-gray-light-hover:hover,
25566
26134
  .brd-gray-light-hover:focus {
25567
- border-color: var(--card-border-color, #ddd) !important;
26135
+ border-color: var(--border-color-default, #d4d4d7) !important;
25568
26136
  }
25569
26137
 
25570
26138
  .brd-gray-dark,
25571
26139
  .brd-gray-dark-hover:hover,
25572
26140
  .brd-gray-dark-hover:focus {
25573
- border-color: var(--gray-900, #3b3a48) !important;
26141
+ border-color: var(--text-color, var(--gray-900, #3b3a48)) !important;
25574
26142
  }
25575
26143
 
25576
26144
  .brd-gray,
25577
26145
  .brd-gray-hover:hover,
25578
26146
  .brd-gray-hover:focus {
25579
- border-color: var(--gray-700, #5e5e6a) !important;
26147
+ border-color: var(--text-muted, var(--gray-700, #5e5e6a)) !important;
25580
26148
  }
25581
26149
 
25582
26150
  .brd-gray-light-before::before,
25583
26151
  .brd-gray-light-after::after {
25584
- border-color: var(--card-border-color, #ddd) !important;
26152
+ border-color: var(--border-color-default, #d4d4d7) !important;
25585
26153
  }
25586
26154
 
25587
26155
  .brd-transparent-before::before,
@@ -25589,6 +26157,17 @@ a.sidenav.back::after {
25589
26157
  border-color: transparent !important;
25590
26158
  }
25591
26159
 
26160
+ .brd-color-default {
26161
+ border-color: var(
26162
+ --border-color-default,
26163
+ var(--gray-200, #d4d4d7)
26164
+ ) !important;
26165
+ }
26166
+
26167
+ .brd-color-muted {
26168
+ border-color: var(--border-color-muted, var(--gray-100, #f3f3f4)) !important;
26169
+ }
26170
+
25592
26171
  .brd-gray-100 {
25593
26172
  border-color: var(--gray-100, #f3f3f4) !important;
25594
26173
  }
@@ -26319,14 +26898,22 @@ a.sidenav.back::after {
26319
26898
  color: var(--color-p1-light, #f2c45a) !important;
26320
26899
  }
26321
26900
 
26322
- .color-primary,
26323
26901
  .color-p2 {
26324
- color: var(--color-p2, #046b99);
26902
+ color: var(--color-p2, #046b99) !important;
26903
+ }
26904
+
26905
+ .color-p2-hover:hover,
26906
+ .color-p2-hover:focus {
26907
+ color: var(--color-p2-darker, #214a68) !important;
26908
+ }
26909
+
26910
+ .color-primary {
26911
+ color: var(--link-color, var(--color-p2, #046b99)) !important;
26325
26912
  }
26326
26913
 
26327
26914
  .color-primary-hover:hover,
26328
26915
  .color-primary-hover:focus {
26329
- color: var(--color-p2-darker, #214a68) !important;
26916
+ color: var(--link-color-hover, var(--color-p2-darker, #214a68)) !important;
26330
26917
  }
26331
26918
 
26332
26919
  .color-standout,
@@ -26436,12 +27023,18 @@ a.sidenav.back::after {
26436
27023
  }
26437
27024
 
26438
27025
  .bg-primary-light {
26439
- background-color: var(--color-p2-lightest, #a4c3d4) !important;
27026
+ background-color: var(
27027
+ --color-primary-light,
27028
+ var(--color-p2-lightest, #a4c3d4)
27029
+ ) !important;
26440
27030
  }
26441
27031
 
26442
27032
  .bg-primary-light-hover:hover,
26443
27033
  .bg-primary-light-hover:focus {
26444
- background-color: var(--color-p2-lightest, #a4c3d4) !important;
27034
+ background-color: var(
27035
+ --color-primary-light,
27036
+ var(--color-p2-lightest, #a4c3d4)
27037
+ ) !important;
26445
27038
  }
26446
27039
 
26447
27040
  .bg-highlight-light {
@@ -26493,15 +27086,21 @@ a.sidenav.back::after {
26493
27086
 
26494
27087
  /* border colors */
26495
27088
  .brd-primary {
26496
- border-color: var(--color-p2, #046b99) !important;
27089
+ border-color: var(--color-primary, var(--color-p2, #046b99)) !important;
26497
27090
  }
26498
27091
 
26499
27092
  .brd-primary-light {
26500
- border-color: var(--color-p2-lightest, #a4c3d4) !important;
27093
+ border-color: var(
27094
+ --color-primary-light,
27095
+ var(--color-p2-lightest, #a4c3d4)
27096
+ ) !important;
26501
27097
  }
26502
27098
 
26503
27099
  .brd-primary-dark {
26504
- border-color: var(--color-p2-darker, #214a68) !important;
27100
+ border-color: var(
27101
+ --color-primary-dark,
27102
+ var(--color-p2-darker, #214a68)
27103
+ ) !important;
26505
27104
  }
26506
27105
 
26507
27106
  .brd-standout {
@@ -26542,7 +27141,10 @@ a.sidenav.back::after {
26542
27141
 
26543
27142
  .brd-primary-light-before::before,
26544
27143
  .brd-primary-light-after::after {
26545
- border-color: var(--color-p2-lightest, #a4c3d4) !important;
27144
+ border-color: var(
27145
+ --color-primary-light,
27146
+ var(--color-p2-lightest, #a4c3d4)
27147
+ ) !important;
26546
27148
  }
26547
27149
 
26548
27150
  .brd-highlight-light-before::before,