@cagovweb/state-template 6.5.0 → 6.5.2

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 (7) hide show
  1. package/dist/css/cagov.core.css +315 -702
  2. package/dist/css/cagov.core.flat.css +496 -880
  3. package/dist/css/cagov.core.min.css +1 -1
  4. package/dist/js/cagov.core.js +153 -129
  5. package/dist/js/cagov.core.min.js +2 -2
  6. package/dist/readme.md +2 -2
  7. package/package.json +3 -2
package/dist/css/cagov.core.flat.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! State Web Template Version 6.5.0 */
1
+ /*! State Web Template Version 6.5.2 */
2
2
  @charset "UTF-8";
3
3
  /*!
4
4
  * Bootstrap v5.3.3 (https://getbootstrap.com/)
@@ -12206,6 +12206,8 @@ textarea.form-control-lg {
12206
12206
  --alert-danger-border: color-mix(in srgb, var(--state-danger-bg), #000 7%);
12207
12207
  --blockquote-border-color: var(--gray-100, #ededef) !default;
12208
12208
  --text-field-color: rgba(255 255 255 / 80%);
12209
+ --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>")
12210
+ no-repeat;
12209
12211
  }
12210
12212
  /* -----------------------------------------
12211
12213
  OCEANSIDE COLOR THEME
@@ -14430,7 +14432,7 @@ body {
14430
14432
  overflow-y: scroll;
14431
14433
  }
14432
14434
 
14433
- @media (width >= 576px) {
14435
+ @media (min-width: 576px) {
14434
14436
 
14435
14437
  body {
14436
14438
  font-size: calc(var(--font-size-regular) + var(--ratio))
@@ -14462,7 +14464,7 @@ p {
14462
14464
  margin-bottom: 0.7rem;
14463
14465
  }
14464
14466
 
14465
- @media (width >= 576px) {
14467
+ @media (min-width: 576px) {
14466
14468
 
14467
14469
  p {
14468
14470
  margin-bottom: calc(0.7rem + var(--ratio))
@@ -14475,7 +14477,7 @@ p {
14475
14477
  font-weight: var(--font-weight-4);
14476
14478
  }
14477
14479
 
14478
- @media (width >= 576px) {
14480
+ @media (min-width: 576px) {
14479
14481
 
14480
14482
  .lead {
14481
14483
  font-size: calc(var(--font-size-large) + var(--ratio));
@@ -14488,7 +14490,7 @@ p {
14488
14490
  margin-bottom: 0.65rem;
14489
14491
  }
14490
14492
 
14491
- @media (width >= 576px) {
14493
+ @media (min-width: 576px) {
14492
14494
 
14493
14495
  .small {
14494
14496
  font-size: calc(var(--font-size-base, 1rem) + var(--ratio));
@@ -14500,7 +14502,7 @@ p {
14500
14502
  font-size: var(--font-size-base, 1rem);
14501
14503
  }
14502
14504
 
14503
- @media (width >= 576px) {
14505
+ @media (min-width: 576px) {
14504
14506
 
14505
14507
  .btn {
14506
14508
  font-size: calc(var(--font-size-base, 1rem) + var(--ratio))
@@ -14511,7 +14513,7 @@ p {
14511
14513
  font-size: 1.125rem;
14512
14514
  }
14513
14515
 
14514
- @media (width >= 576px) {
14516
+ @media (min-width: 576px) {
14515
14517
 
14516
14518
  .btn-lg {
14517
14519
  font-size: calc(var(--font-size-regular) + var(--ratio))
@@ -14522,7 +14524,7 @@ p {
14522
14524
  font-size: 0.9rem;
14523
14525
  }
14524
14526
 
14525
- @media (width >= 576px) {
14527
+ @media (min-width: 576px) {
14526
14528
 
14527
14529
  .btn-sm {
14528
14530
  font-size: calc(0.9rem + var(--ratio))
@@ -14543,7 +14545,7 @@ h1,
14543
14545
  line-height: var(--font-lineheight-1);
14544
14546
  }
14545
14547
 
14546
- @media (width >= 576px) {
14548
+ @media (min-width: 576px) {
14547
14549
 
14548
14550
  h1,
14549
14551
  .h1 {
@@ -14568,7 +14570,7 @@ h2,
14568
14570
  line-height: var(--font-lineheight-2);
14569
14571
  }
14570
14572
 
14571
- @media (width >= 576px) {
14573
+ @media (min-width: 576px) {
14572
14574
 
14573
14575
  h2,
14574
14576
  .h2 {
@@ -14593,7 +14595,7 @@ h3,
14593
14595
  line-height: var(--font-lineheight-3);
14594
14596
  }
14595
14597
 
14596
- @media (width >= 576px) {
14598
+ @media (min-width: 576px) {
14597
14599
 
14598
14600
  h3,
14599
14601
  .h3 {
@@ -14618,7 +14620,7 @@ h4,
14618
14620
  line-height: var(--font-lineheight-4);
14619
14621
  }
14620
14622
 
14621
- @media (width >= 576px) {
14623
+ @media (min-width: 576px) {
14622
14624
 
14623
14625
  h4,
14624
14626
  .h4 {
@@ -14643,7 +14645,7 @@ h5,
14643
14645
  line-height: var(--font-lineheight-5);
14644
14646
  }
14645
14647
 
14646
- @media (width >= 576px) {
14648
+ @media (min-width: 576px) {
14647
14649
 
14648
14650
  h5,
14649
14651
  .h5 {
@@ -14668,7 +14670,7 @@ h6,
14668
14670
  line-height: var(--font-lineheight-5);
14669
14671
  }
14670
14672
 
14671
- @media (width >= 576px) {
14673
+ @media (min-width: 576px) {
14672
14674
 
14673
14675
  h6,
14674
14676
  .h6 {
@@ -14698,7 +14700,7 @@ h6,
14698
14700
  color: var(--gray-700, #5e5e6a);
14699
14701
  }
14700
14702
 
14701
- @media (width >= 576px) {
14703
+ @media (min-width: 576px) {
14702
14704
 
14703
14705
  .subtitle {
14704
14706
  font-size: calc(var(--font-size-large) + var(--ratio));
@@ -14853,7 +14855,7 @@ a.list-group-item {
14853
14855
  ----------------------------------------- */
14854
14856
 
14855
14857
  /* this is how wide website will go on desktop */
14856
- @media (width >= 1200px) {
14858
+ @media (min-width: 1200px) {
14857
14859
  .container {
14858
14860
  max-width: var(--breakpoint-lg);
14859
14861
  }
@@ -15030,7 +15032,7 @@ a.list-group-item {
15030
15032
  }
15031
15033
  }
15032
15034
 
15033
- @media (768px <= width <= 991px) {
15035
+ @media (min-width: 768px) and (max-width: 991px) {
15034
15036
  .visible-sm {
15035
15037
  display: block !important;
15036
15038
  }
@@ -15040,7 +15042,7 @@ a.list-group-item {
15040
15042
  }
15041
15043
  }
15042
15044
 
15043
- @media (992px <= width <= 1139px) {
15045
+ @media (min-width: 992px) and (max-width: 1139px) {
15044
15046
  .visible-md {
15045
15047
  display: block !important;
15046
15048
  }
@@ -15050,7 +15052,7 @@ a.list-group-item {
15050
15052
  }
15051
15053
  }
15052
15054
 
15053
- @media (width >= 1200px) {
15055
+ @media (min-width: 1200px) {
15054
15056
  .visible-lg {
15055
15057
  display: block !important;
15056
15058
  }
@@ -15111,7 +15113,7 @@ a.list-group-item {
15111
15113
  background-color: var(--white, #fff);
15112
15114
  }
15113
15115
 
15114
- @media (width >= 992px) {
15116
+ @media (min-width: 992px) {
15115
15117
 
15116
15118
  .global-header .section-default {
15117
15119
  border-bottom: 1px solid var(--gray-200, #d4d4d7)
@@ -15126,14 +15128,14 @@ a.list-group-item {
15126
15128
  left: 0;
15127
15129
  }
15128
15130
 
15129
- @media (width >= 992px) {
15131
+ @media (min-width: 992px) {
15130
15132
 
15131
15133
  .global-header .section-default::after {
15132
15134
  border-bottom: none
15133
15135
  }
15134
15136
  }
15135
15137
 
15136
- @media (width >= 992px) {
15138
+ @media (min-width: 992px) {
15137
15139
 
15138
15140
  .global-header {
15139
15141
  border-bottom: 1px solid var(--gray-200, #d4d4d7)
@@ -15159,7 +15161,7 @@ a.list-group-item {
15159
15161
  background: #000;
15160
15162
  }
15161
15163
 
15162
- @media (width >= 768px) {
15164
+ @media (min-width: 768px) {
15163
15165
  .header-slideshow-banner.enabled {
15164
15166
  display: block;
15165
15167
  }
@@ -15178,7 +15180,7 @@ a.list-group-item {
15178
15180
  position: relative;
15179
15181
  }
15180
15182
 
15181
- @media (width <= 767px) {
15183
+ @media (max-width: 767px) {
15182
15184
 
15183
15185
  .header-single-banner,
15184
15186
  .header-large-banner {
@@ -15197,7 +15199,7 @@ a.list-group-item {
15197
15199
  overflow: hidden;
15198
15200
  }
15199
15201
 
15200
- @media (width <= 767px) {
15202
+ @media (max-width: 767px) {
15201
15203
  .ask-group + .header-primary-banner,
15202
15204
  .ask-group + .header-large-banner,
15203
15205
  .ask-group + .header-slideshow-banner {
@@ -15249,7 +15251,7 @@ a.list-group-item {
15249
15251
  FIXED-HEADER - /src/css/cagov/fixed-header.css
15250
15252
  ----------------------------------------- */
15251
15253
 
15252
- @media (width >= 768px) {
15254
+ @media (min-width: 768px) {
15253
15255
  .ask-group.fixed-hide {
15254
15256
  visibility: hidden;
15255
15257
  opacity: 0;
@@ -15295,7 +15297,7 @@ a.list-group-item {
15295
15297
  z-index: 3;
15296
15298
  }
15297
15299
 
15298
- @media (width >= 992px) {
15300
+ @media (min-width: 992px) {
15299
15301
 
15300
15302
  .global-header.fixed {
15301
15303
  z-index: 7;
@@ -15312,7 +15314,7 @@ h2 {
15312
15314
  scroll-margin-top: 75px;
15313
15315
  }
15314
15316
 
15315
- @media (width >= 992px) {
15317
+ @media (min-width: 992px) {
15316
15318
 
15317
15319
  h2 {
15318
15320
  scroll-margin-top: 150px
@@ -15331,7 +15333,7 @@ h2 {
15331
15333
  position: relative;
15332
15334
  }
15333
15335
 
15334
- @media (width >= 992px) {
15336
+ @media (min-width: 992px) {
15335
15337
 
15336
15338
  .branding {
15337
15339
  position: unset
@@ -15343,7 +15345,7 @@ h2 {
15343
15345
  padding: 0.5rem 0 0.5rem 1rem;
15344
15346
  }
15345
15347
 
15346
- @media (width <= 991px) {
15348
+ @media (max-width: 991px) {
15347
15349
 
15348
15350
  .branding .header-organization-banner {
15349
15351
  position: relative;
@@ -15365,14 +15367,14 @@ h2 {
15365
15367
  object-position: left;
15366
15368
  }
15367
15369
 
15368
- @media (768px <= width <= 992px) {
15370
+ @media (min-width: 768px) and (max-width: 992px) {
15369
15371
 
15370
15372
  .branding .header-organization-banner img {
15371
15373
  max-width: 225px
15372
15374
  }
15373
15375
  }
15374
15376
 
15375
- @media (width <= 991px) {
15377
+ @media (max-width: 991px) {
15376
15378
 
15377
15379
  .branding .header-organization-banner img {
15378
15380
  max-height: 44px
@@ -15421,7 +15423,7 @@ h2 {
15421
15423
  display: block;
15422
15424
  }
15423
15425
 
15424
- @media (width <= 991px) {
15426
+ @media (max-width: 991px) {
15425
15427
 
15426
15428
  .branding .header-organization-banner a .logo-assets .logo-text .logo-state {
15427
15429
  font-size: 0.78125rem
@@ -15439,38 +15441,38 @@ h2 {
15439
15441
  display: block;
15440
15442
  }
15441
15443
 
15442
- @media (width <= 991px) {
15444
+ @media (max-width: 991px) {
15443
15445
 
15444
15446
  .branding .header-organization-banner a .logo-assets .logo-text .logo-dept {
15445
15447
  font-size: 1rem
15446
15448
  }
15447
15449
  }
15448
15450
 
15449
- @media (width <= 991px) {
15451
+ @media (max-width: 991px) {
15450
15452
 
15451
15453
  .branding .header-organization-banner a .logo-assets {
15452
15454
  min-height: auto
15453
15455
  }
15454
15456
  }
15455
15457
 
15456
- @media (width <= 991px) {
15458
+ @media (max-width: 991px) {
15457
15459
 
15458
15460
  .branding .header-organization-banner a {
15459
15461
  min-width: 100%
15460
15462
  }
15461
15463
  }
15462
15464
 
15463
- @media (width >= 576px) {
15465
+ @media (min-width: 576px) {
15464
15466
  .branding {
15465
15467
  max-width: var(--breakpoint-xm);
15466
15468
  }
15467
15469
  }
15468
- @media (width >= 768px) {
15470
+ @media (min-width: 768px) {
15469
15471
  .branding {
15470
15472
  max-width: var(--breakpoint-sm);
15471
15473
  }
15472
15474
  }
15473
- @media (width >= 992px) {
15475
+ @media (min-width: 992px) {
15474
15476
  .branding {
15475
15477
  max-width: var(--breakpoint-md);
15476
15478
  }
@@ -15479,7 +15481,7 @@ h2 {
15479
15481
  z-index: 27;
15480
15482
  }
15481
15483
  }
15482
- @media (width >= 1200px) {
15484
+ @media (min-width: 1200px) {
15483
15485
  .branding {
15484
15486
  max-width: var(--breakpoint-lg);
15485
15487
  }
@@ -15498,7 +15500,7 @@ h2 {
15498
15500
  min-width: 200px;
15499
15501
  }
15500
15502
 
15501
- @media (width >= 768px) {
15503
+ @media (min-width: 768px) {
15502
15504
  .fixed.compact .header-organization-banner {
15503
15505
  height: 55px;
15504
15506
  max-height: 45px;
@@ -15531,8 +15533,21 @@ h2 {
15531
15533
  }
15532
15534
 
15533
15535
  .global-footer .cagov-logo .ca-gov-logo-svg {
15534
- height: 1.7rem;
15535
- width: auto;
15536
+ vertical-align: middle;
15537
+ display: inline-block;
15538
+ width: 50px;
15539
+ }
15540
+
15541
+ .global-footer .cagov-logo .ca-gov-logo-svg::before{
15542
+ float: left;
15543
+ padding-top: 55.55555555555556%;
15544
+ content: '';
15545
+ }
15546
+
15547
+ .global-footer .cagov-logo .ca-gov-logo-svg::after{
15548
+ display: block;
15549
+ content: '';
15550
+ clear: both;
15536
15551
  }
15537
15552
 
15538
15553
  .global-footer ul {
@@ -15587,7 +15602,7 @@ h2 {
15587
15602
  padding: 5px 0 var(--line-height-computed);
15588
15603
  }
15589
15604
 
15590
- @media (width >= 992px) {
15605
+ @media (min-width: 992px) {
15591
15606
  .global-footer .container .d-flex {
15592
15607
  flex-direction: row;
15593
15608
  }
@@ -15615,10 +15630,7 @@ h2 {
15615
15630
  SITE SEARCH - /src/css/cagov/search.css
15616
15631
  ----------------------------------------- */
15617
15632
 
15618
- /* stylelint-disable no-descending-specificity */
15619
-
15620
- .search-container,
15621
- .featured-search.active {
15633
+ .search-container {
15622
15634
  overflow: hidden;
15623
15635
  z-index: 7;
15624
15636
  position: relative;
@@ -15631,16 +15643,63 @@ h2 {
15631
15643
  border: none;
15632
15644
  }
15633
15645
 
15634
- @media (width >= 992px) {
15646
+ @media (min-width: 992px) {
15635
15647
 
15636
- .search-container,
15637
- .featured-search.active {
15648
+ .search-container {
15638
15649
  position: absolute;
15639
15650
  top: 96px
15640
15651
  }
15641
15652
  }
15642
15653
 
15643
- .search-container .search-textfield, .featured-search.active .search-textfield {
15654
+ .search-container #Search {
15655
+ display: flex;
15656
+ }
15657
+
15658
+ .search-container #Search .gsc-search-button {
15659
+ right: 50px;
15660
+ background-color: var(--gray-600, #72717c);
15661
+ border-color: var(--gray-600, #72717c);
15662
+ color: var(--white, #fff);
15663
+ }
15664
+
15665
+ .search-container #Search .gsc-search-button:focus {
15666
+ outline: 2px solid var(--outline-dark-mode-color);
15667
+ outline-offset: -4px;
15668
+ }
15669
+
15670
+ .search-container #Search .gsc-search-button:hover,
15671
+ .search-container #Search .gsc-search-button:focus {
15672
+ background-color: var(--gray-800, #4a4958);
15673
+ border-color: var(--gray-800, #4a4958);
15674
+ }
15675
+
15676
+ .search-container #Search .gsc-search-button .ca-gov-icon-search {
15677
+ color: var(--white, #fff);
15678
+ }
15679
+
15680
+ @media (max-width: 991px) {
15681
+
15682
+ .search-container #Search .gsc-search-button {
15683
+ background-color: var(--white, #fff);
15684
+ border-color: var(--white, #fff)
15685
+ }
15686
+
15687
+ .search-container #Search .gsc-search-button .ca-gov-icon-search {
15688
+ color: var(--gray-700, #5e5e6a);
15689
+ }
15690
+
15691
+ .search-container #Search .gsc-search-button:hover,
15692
+ .search-container #Search .gsc-search-button:focus {
15693
+ background-color: var(--gray-50, #fafafa);
15694
+ border-color: var(--gray-50, #fafafa);
15695
+ }
15696
+
15697
+ .search-container #Search .gsc-search-button:hover .ca-gov-icon-search, .search-container #Search .gsc-search-button:focus .ca-gov-icon-search {
15698
+ color: var(--gray-900, #3b3a48);
15699
+ }
15700
+ }
15701
+
15702
+ .search-container .search-textfield {
15644
15703
  font-size: 1.1rem;
15645
15704
  width: 100%;
15646
15705
  max-height: 38px;
@@ -15648,30 +15707,30 @@ h2 {
15648
15707
  transition: border 0.4s;
15649
15708
  }
15650
15709
 
15651
- .search-container .search-textfield::placeholder, .featured-search.active .search-textfield::placeholder {
15710
+ .search-container .search-textfield::placeholder {
15652
15711
  color: var(--black, #000);
15653
15712
  opacity: 1;
15654
15713
  }
15655
15714
 
15656
15715
  /* stylelint-disable-next-line selector-pseudo-element-no-unknown */
15657
15716
 
15658
- .search-container .search-textfield::input-placeholder, .featured-search.active .search-textfield::input-placeholder {
15717
+ .search-container .search-textfield::input-placeholder {
15659
15718
  color: var(--black, #000);
15660
15719
  }
15661
15720
 
15662
- .search-container .search-textfield:focus, .featured-search.active .search-textfield:focus {
15721
+ .search-container .search-textfield:focus {
15663
15722
  outline: 2px solid var(--outline-default-color);
15664
15723
  outline-offset: -2px;
15665
15724
  }
15666
15725
 
15667
- .search-container .submit-container, .featured-search.active .submit-container {
15726
+ .search-container .submit-container {
15668
15727
  float: left;
15669
15728
  height: auto;
15670
15729
  height: 40px;
15671
15730
  transition: all 0.5s 0.1s;
15672
15731
  }
15673
15732
 
15674
- .search-container .submit-container button, .featured-search.active .submit-container button {
15733
+ .search-container .submit-container button {
15675
15734
  float: left;
15676
15735
  transition: all 0.5s 0.1s;
15677
15736
  background: none;
@@ -15686,80 +15745,43 @@ h2 {
15686
15745
  padding: 0;
15687
15746
  }
15688
15747
 
15689
- .search-container .submit-container button > span, .featured-search.active .submit-container button > span {
15748
+ .search-container .submit-container button > span {
15690
15749
  position: relative;
15691
15750
  top: 0;
15692
15751
  font-size: 1.87rem;
15693
15752
  line-height: 1.875rem;
15694
15753
  }
15695
15754
 
15696
- @media (width <= 991px) {
15755
+ @media (max-width: 991px) {
15697
15756
 
15698
- .search-container .submit-container button, .featured-search.active .submit-container button {
15757
+ .search-container .submit-container button {
15699
15758
  font-size: 2rem;
15700
15759
  line-height: 1em;
15701
15760
  padding-top: 0
15702
15761
  }
15703
15762
  }
15704
15763
 
15705
- .search-container .textfield-container, .featured-search.active .textfield-container {
15764
+ .search-container .textfield-container {
15706
15765
  float: left;
15707
15766
  width: 100%;
15708
15767
  }
15709
15768
 
15710
- .search-container .close-search, .featured-search.active .close-search {
15711
- display: none;
15712
- position: absolute;
15713
- right: -10px;
15714
- cursor: pointer;
15715
- }
15716
-
15717
- .search-container .close-search .sr-only, .featured-search.active .close-search .sr-only {
15718
- height: unset !important;
15719
- width: unset !important;
15720
- position: relative !important;
15721
- clip: unset !important;
15722
- background: none !important;
15723
- margin: 0 !important;
15724
- font-size: 1.125rem !important;
15725
- color: var(--color-p2, #046b99);
15726
- text-decoration: underline;
15727
- }
15728
-
15729
- .search-container .close-search .sr-only:hover,
15730
- .search-container .close-search .sr-only:focus,
15731
- .featured-search.active .close-search .sr-only:hover,
15732
- .featured-search.active .close-search .sr-only:focus {
15733
- color: var(--color-p2-darker, #214a68);
15734
- text-decoration: none;
15735
- }
15736
-
15737
- @media (width <= 991px) {
15738
-
15739
- .search-container .close-search, .featured-search.active .close-search {
15740
- right: 0;
15741
- display: none
15742
- }
15743
- }
15744
-
15745
15769
  input[type="search"].search-textfield {
15746
- padding-left: 10px;
15747
15770
  -webkit-appearance: none;
15748
15771
  background-color: canvas;
15749
15772
  border: 1px solid #72717c;
15750
15773
  border-radius: 5px 0 0 5px;
15751
15774
  }
15752
15775
 
15753
- @media (width <= 991px) {
15754
-
15755
- .search-container input[type="search"].search-textfield {
15756
- border-color: var(--white, #fff)
15776
+ @media (max-width: 991px) {
15777
+ input[type="search"].search-textfield {
15778
+ border-color: var(--white, #fff);
15757
15779
  }
15758
15780
 
15759
- .search-container input[type="search"].search-textfield:focus {
15760
- outline-offset: -4px;
15761
- }
15781
+ input[type="search"].search-textfield:focus {
15782
+ outline-offset: -4px;
15762
15783
  }
15784
+ }
15763
15785
 
15764
15786
  #local_form {
15765
15787
  position: relative;
@@ -15772,34 +15794,16 @@ input[type="search"].search-textfield {
15772
15794
 
15773
15795
  /* Large Search Animation and Styling */
15774
15796
 
15775
- @media (width >= 992px) {
15797
+ @media (min-width: 992px) {
15776
15798
  .featured-search {
15777
15799
  display: block;
15778
15800
  position: absolute;
15779
- top: 240px;
15780
15801
  padding: 0;
15781
15802
  max-height: 100%;
15782
15803
  border-radius: 0;
15783
- width: 60%;
15784
- left: 20%;
15785
15804
  }
15786
15805
 
15787
- .flexbox .featured-search {
15788
- left: 0;
15789
- right: 0;
15790
- margin: 0 auto;
15791
- width: 60%;
15792
- max-width: 630px;
15793
- }
15794
-
15795
- .featured-search.play-animation {
15796
- animation-duration: 1s;
15797
- animation-fill-mode: both;
15798
- animation-name: pulse;
15799
- }
15800
-
15801
15806
  .featured-search .search-textfield {
15802
- padding: 14px;
15803
15807
  border-color: var(--gray-600, #72717c) !important;
15804
15808
  font-size: 1.1rem;
15805
15809
  height: 38px;
@@ -15817,395 +15821,54 @@ input[type="search"].search-textfield {
15817
15821
  width: 60px;
15818
15822
  appearance: none;
15819
15823
  }
15820
-
15821
- .featured-search .submit-container button > span {
15822
- font-size: 2.8125rem;
15823
- line-height: 2.8125rem;
15824
- }
15825
-
15826
- .featured-search.active {
15827
- position: relative;
15828
- visibility: visible;
15829
- opacity: 1;
15830
- }
15831
-
15832
- @media (width >= 992px) {
15833
-
15834
- .featured-search.active {
15835
- position: absolute
15836
- }
15837
- }
15838
-
15839
- .featured-search.active{
15840
-
15841
- transition:
15842
- top 0.4s,
15843
- left 0.2s 0.4s,
15844
- width 0.2s 0.4s,
15845
- background-color 0.4s + 0.2s,
15846
- border 0.4s,
15847
- padding 0.2s 0.4s;
15848
- top: 96px;
15849
- left: 0;
15850
- padding: 20px 0;
15851
- border-radius: 0;
15852
- padding-right: 15%;
15853
- padding-left: 15%;
15854
- border-bottom: none;
15855
- width: 100%;
15856
- max-width: 100%;
15857
- }
15858
-
15859
- .featured-search.active .close-search {
15860
- display: none;
15861
- }
15862
-
15863
- .featured-search.active .search-textfield {
15864
- font-size: 1.1rem;
15865
- height: 40px;
15866
- width: 100%;
15867
- border-radius: var(--border-radius-base);
15868
- border: 3px solid transparent;
15869
- padding: 0 4px;
15870
- transition: border 0.4s;
15871
- }
15872
- }
15873
-
15874
- /* Resize search bar to look better on tablet size screens */
15875
- @media (768px <= width <= 992px) {
15876
- .featured-search {
15877
- left: 10%;
15878
- width: 80%;
15879
- }
15880
-
15881
- .flexbox .featured-search {
15882
- left: 0;
15883
- width: 100%;
15884
- }
15885
-
15886
- .featured-search.active {
15887
- width: 100%;
15888
- }
15889
- }
15890
-
15891
- .agency-form {
15892
- margin-top: var(--spacer, 1rem) !important;
15893
- margin-bottom: var(--spacer, 1rem) !important;
15894
- }
15895
-
15896
- .agency-form .textfield-container {
15897
- float: left;
15898
- padding-right: 44px;
15899
- margin-right: -44px;
15900
- width: 100%;
15901
- }
15902
-
15903
- .agency-form .search-textfield {
15904
- width: 100%;
15905
- }
15906
-
15907
- .agency-form .submit-container {
15908
- float: left;
15909
- height: 40px;
15910
- }
15911
-
15912
- .agency-form .submit-container button {
15913
- color: #fff;
15914
- border: none;
15915
- width: 44px;
15916
- height: 100%;
15917
- float: left;
15918
- font-size: 1.5rem;
15919
- line-height: 0.9375rem;
15920
- padding: 0;
15921
- -webkit-appearance: none;
15922
- }
15923
-
15924
- .agency-form .submit-container button > span {
15925
- position: relative;
15926
- top: 0;
15927
- font-size: 1.87rem;
15928
- line-height: 1.875rem;
15929
- }
15930
-
15931
- @media (width <= 991px) {
15932
-
15933
- .agency-form .submit-container button {
15934
- font-size: 2rem;
15935
- line-height: 1em;
15936
- padding-top: 0
15937
- }
15938
- }
15939
-
15940
- .agency-form input,
15941
- .agency-form button {
15942
- height: 40px;
15943
- line-height: 2.5rem;
15944
- }
15945
-
15946
- .agency-form button {
15947
- background: var(--gray-600, #72717c);
15948
- }
15949
-
15950
- .agency-form button > span {
15951
- top: 0;
15952
- font-size: 1.8rem;
15953
- }
15954
-
15955
- .search-container .textfield-container, .search-container.featured-search.active .textfield-container {
15956
- /* Desktop Search Button Padding */
15957
- margin-right: -80px;
15958
- padding-right: 80px;
15959
- }
15960
-
15961
- /* Mobile Search button padding */
15962
-
15963
- @media (width <= 991px) {
15964
-
15965
- .search-container .textfield-container, .search-container.featured-search.active .textfield-container {
15966
- margin-right: -48px;
15967
- padding-right: 44px
15968
- }
15969
- }
15970
-
15971
- .search-container .submit-container, .search-container.featured-search.active .submit-container {
15972
- width: auto;
15973
- }
15974
-
15975
- .search-container .search-locator, .search-container.featured-search.active .search-locator {
15976
- color: var(--gray-900, #3b3a48);
15977
- float: left;
15978
- text-align: center;
15979
- width: 100px;
15980
- position: relative;
15981
- display: none;
15982
- line-height: inherit !important;
15983
- cursor: pointer;
15984
- }
15985
-
15986
- .search-container .search-locator [class^="ca-gov-icon-"], .search-container.featured-search.active .search-locator [class^="ca-gov-icon-"] {
15987
- font-size: 1.4rem;
15988
- padding: 0 !important;
15989
- position: absolute;
15990
- top: 0;
15991
- width: 100%;
15992
- left: 0;
15993
- }
15994
-
15995
- .search-container .search-locator small, .search-container.featured-search.active .search-locator small {
15996
- position: absolute;
15997
- top: 1.7em;
15998
- left: 0;
15999
- width: 100%;
16000
- text-align: center;
16001
- display: block;
16002
- overflow: hidden;
16003
- white-space: nowrap;
16004
- text-overflow: ellipsis;
16005
- }
16006
-
16007
- /* Active on mobile */
16008
-
16009
- @media (width <= 991px) {
16010
-
16011
- .search-container .search-locator, .search-container.featured-search.active .search-locator {
16012
- width: 75px;
16013
- margin-left: 5px
16014
- }
16015
- }
16016
-
16017
- .search-container.active .search-locator, .search-container.featured-search.active.active .search-locator {
16018
- display: block;
16019
- }
16020
-
16021
- @media (width <= 991px) {
16022
-
16023
- .search-container.featured-search {
16024
- padding: 0 1rem;
16025
- max-height: 100%
16026
- }
16027
- }
16028
-
16029
- .search-container.featured-search:hover,
16030
- .search-container.featured-search:focus {
16031
- background: none;
16032
- }
16033
-
16034
- .search-container.featured-search.active {
16035
- background-color: var(--gray-100, #f3f3f4);
16036
- border-top: 1px solid var(--gray-300, #bcbbc1);
16037
- }
16038
-
16039
- @media (width >= 992px) {
16040
- .fixed.compact .search-container {
16041
- opacity: 0;
16042
- }
16043
-
16044
- .active-search .fixed.compact .search-container,
16045
- .fixed.compact .search-container.active {
16046
- opacity: 1;
16047
- top: 55px;
16048
- }
16049
- }
16050
-
16051
- /* full width navigation search container */
16052
- @media (width >= 992px) {
16053
- .nav-full-width + .search-container,
16054
- .nav-full-width + .featured-search.active {
16055
- top: 35px;
16056
- }
16057
-
16058
- .active-search .fixed.compact .nav-full-width + .search-container,
16059
- .fixed.compact .nav-full-width + .search-container.active {
16060
- opacity: 1;
16061
- top: 35px;
16062
- }
16063
- }
16064
-
16065
- @media (992px <= width <= 1200px) {
16066
- .nav-full-width + .search-container,
16067
- .nav-full-width + .featured-search.active {
16068
- top: 32px;
16069
- }
16070
-
16071
- .active-search .fixed.compact .nav-full-width + .search-container,
16072
- .fixed.compact .nav-full-width + .search-container.active {
16073
- opacity: 1;
16074
- top: 32px;
16075
- }
16076
- }
16077
-
16078
- /* Search Button */
16079
-
16080
- button.gsc-search-button {
16081
- border-radius: 0 5px 5px 0;
16082
- padding: 0 12px;
16083
- border: 1px solid;
16084
- min-height: 38px;
16085
- margin-left: -1px;
16086
- }
16087
-
16088
- /* ------------- Custom search box (not google) -------------- */
16089
- .search-container #Search {
16090
- display: flex;
16091
- }
16092
- .search-container #Search .gsc-search-button {
16093
- right: 50px;
16094
- background-color: var(--gray-600, #72717c);
16095
- border-color: var(--gray-600, #72717c);
16096
- color: var(--white, #fff);
16097
- }
16098
- .search-container #Search .gsc-search-button:focus {
16099
- outline: 2px solid var(--outline-dark-mode-color);
16100
- outline-offset: -4px;
16101
- }
16102
- .search-container #Search .gsc-search-button:hover,
16103
- .search-container #Search .gsc-search-button:focus {
16104
- background-color: var(--gray-800, #4a4958);
16105
- border-color: var(--gray-800, #4a4958);
16106
- }
16107
- .search-container #Search .gsc-search-button .ca-gov-icon-search {
16108
- color: var(--white, #fff);
16109
- }
16110
- @media (width <= 991px) {
16111
- .search-container #Search .gsc-search-button {
16112
- background-color: var(--white, #fff);
16113
- border-color: var(--white, #fff)
16114
- }
16115
-
16116
- .search-container #Search .gsc-search-button .ca-gov-icon-search {
16117
- color: var(--gray-700, #5e5e6a);
16118
- }
16119
-
16120
- .search-container #Search .gsc-search-button:hover,
16121
- .search-container #Search .gsc-search-button:focus {
16122
- background-color: var(--gray-50, #fafafa);
16123
- border-color: var(--gray-50, #fafafa);
16124
- }
16125
-
16126
- .search-container #Search .gsc-search-button:hover .ca-gov-icon-search, .search-container #Search .gsc-search-button:focus .ca-gov-icon-search {
16127
- color: var(--gray-900, #3b3a48);
16128
- }
16129
- }
16130
- .search-container #Search .close-search-btn {
16131
- display: block;
16132
- }
16133
- .search-container #Search .close-search-btn .sr-only {
16134
- color: var(--color-p2, #046b99);
16135
- text-decoration: underline;
16136
- }
16137
- .search-container #Search .close-search-btn .sr-only:hover,
16138
- .search-container #Search .close-search-btn .sr-only:focus {
16139
- color: var(--color-p2-darker, #214a68);
16140
- text-decoration: none;
16141
- }
16142
- .search-container #Search .close-search {
16143
- display: block;
16144
- right: 0;
16145
- }
16146
- @media (width <= 991px) {
16147
- .search-container #Search .close-search {
16148
- display: block;
16149
- cursor: pointer;
16150
- min-height: 38px
16151
- }
16152
-
16153
- .search-container #Search .close-search .sr-only {
16154
- height: unset !important;
16155
- width: unset !important;
16156
- position: relative !important;
16157
- clip: unset !important;
16158
- background: none !important;
16159
- margin: 0 !important;
16160
- font-size: 1.125rem !important;
15824
+
15825
+ .featured-search .submit-container button > span {
15826
+ font-size: 2.8125rem;
15827
+ line-height: 2.8125rem;
16161
15828
  }
16162
- }
16163
- .search-container:hover .search-textfield, .search-container:focus .search-textfield, .search-container.active .search-textfield {
16164
- background-color: #fff;
16165
- }
16166
- .search-container:hover .submit-container button, .search-container:focus .submit-container button, .search-container.active .submit-container button {
16167
- border-color: #fff;
16168
- }
16169
- .search-container.active {
16170
- max-height: 300px;
16171
- padding: 20px 15%;
15829
+ }
15830
+
15831
+ /* Resize search bar to look better on tablet size screens */
15832
+ @media (min-width: 768px) and (max-width: 992px) {
15833
+ .featured-search {
15834
+ left: 10%;
15835
+ width: 80%;
16172
15836
  }
16173
- /* Active on mobile 991px */
16174
- @media (width <= 991px) {
16175
- .search-container.active {
16176
- padding-top: 1.125rem;
16177
- padding-bottom: 1.125rem
15837
+ }
15838
+
15839
+ @media (max-width: 991px) {
15840
+
15841
+ .search-container.featured-search {
15842
+ padding: 0 1rem;
15843
+ max-height: 100%
15844
+ }
15845
+ }
15846
+
15847
+ .search-container.featured-search:hover,
15848
+ .search-container.featured-search:focus {
15849
+ background: none;
15850
+ }
15851
+
15852
+ @media (min-width: 992px) {
15853
+ .fixed.compact .search-container {
15854
+ opacity: 0;
16178
15855
  }
16179
- }
16180
- .search-container.active .close-search {
16181
- display: block;
16182
- }
16183
- @media (width <= 991px) {
16184
- .search-container.active .close-search {
16185
- display: none
16186
- }
16187
- }
16188
- .search-container.active div.gsc-clear-button {
16189
- width: 40px;
16190
- }
16191
- .search-container.active div.gsc-clear-button::before {
16192
- content: "\4d";
16193
- font-family: CaGov;
16194
- font-size: 2rem;
16195
- width: 100%;
16196
- color: var(--gray-100, #ededef);
16197
- display: block;
16198
- margin-top: 12px;
16199
- margin-left: 2px;
16200
- }
16201
- .search-container.active{
16202
15856
 
16203
- background-color: var(--gray-100, #f3f3f4);
15857
+ .active-search .fixed.compact .search-container {
15858
+ opacity: 1;
15859
+ top: 55px;
15860
+ }
15861
+ }
15862
+
15863
+ button.gsc-search-button {
15864
+ border-radius: 0 5px 5px 0;
15865
+ padding: 0 12px;
15866
+ border: 1px solid;
15867
+ min-height: 38px;
15868
+ margin-left: -1px;
16204
15869
  }
16205
- .search-container.active .submit-container button {
16206
- border-color: var(--gray-200, #d4d4d7);
16207
- background: var(--gray-700, #5e5e6a);
16208
- }
15870
+
15871
+ /* ------------- Custom search box (not google) -------------- */
16209
15872
 
16210
15873
  .featured-search div.gsc-clear-button {
16211
15874
  width: 0;
@@ -16232,19 +15895,6 @@ button.gsc-search-button {
16232
15895
  display: none;
16233
15896
  }
16234
15897
 
16235
- .featured-search.active .search-locator {
16236
- display: block;
16237
- }
16238
-
16239
- .featured-search.active .container #Search .gsc-search-button {
16240
- right: 50px;
16241
- outline-offset: -2px;
16242
- }
16243
-
16244
- .featured-search.active .container #Search .close-search-btn {
16245
- display: block;
16246
- }
16247
-
16248
15898
  /* -----------------------------------------
16249
15899
  GOOGLE CUSTOM SEARCH CUSTOMIZATION OVERRIDES
16250
15900
  /src/css/cagov/search.css
@@ -16373,7 +16023,7 @@ table.gsc-search-box td {
16373
16023
  }
16374
16024
 
16375
16025
  /* Full Width navigation search */
16376
- @media (width >= 992px) {
16026
+ @media (min-width: 992px) {
16377
16027
  .full-width-nav .featured-search {
16378
16028
  top: -60px !important;
16379
16029
  right: 15px;
@@ -16384,67 +16034,6 @@ table.gsc-search-box td {
16384
16034
  .full-width-nav .featured-search input.search-textfield {
16385
16035
  padding: 0 8px;
16386
16036
  }
16387
-
16388
- /* full width featured search hack for IE */
16389
- @media all and (-ms-high-contrast: none) {
16390
- .full-width-nav .featured-search {
16391
- width: 100%;
16392
- max-width: 100%;
16393
- padding-right: 15px;
16394
- }
16395
-
16396
- .full-width-nav .featured-search .container {
16397
- width: 40%;
16398
- float: right;
16399
- }
16400
-
16401
- *::-ms-backdrop,
16402
- .full-width-nav .featured-search {
16403
- width: 100%;
16404
- max-width: 100%;
16405
- padding-right: 15px;
16406
- }
16407
-
16408
- *::-ms-backdrop .container, .full-width-nav .featured-search .container {
16409
- width: 40%;
16410
- float: right;
16411
- }
16412
- }
16413
- }
16414
-
16415
- @media (992px <= width <= 1200px) {
16416
- /* full width featured search hack for IE */
16417
- @media all and (-ms-high-contrast: none) {
16418
- .full-width-nav .featured-search {
16419
- width: 100%;
16420
- max-width: 100%;
16421
- padding-right: 15px;
16422
- }
16423
-
16424
- .full-width-nav .featured-search .container {
16425
- width: 40%;
16426
- float: right;
16427
- }
16428
-
16429
- *::-ms-backdrop,
16430
- .full-width-nav .featured-search {
16431
- width: 100%;
16432
- max-width: 100%;
16433
- padding-right: 15px;
16434
- }
16435
-
16436
- *::-ms-backdrop .container, .full-width-nav .featured-search .container {
16437
- width: 40%;
16438
- float: right;
16439
- }
16440
- }
16441
- }
16442
-
16443
- /* search box icons for mobile */
16444
- @media (width <= 991px) {
16445
- .search-container #Search .close-search {
16446
- padding-left: 10px;
16447
- }
16448
16037
  }
16449
16038
 
16450
16039
  /* clears the ‘X’ from Internet Explorer */
@@ -16480,7 +16069,7 @@ input[type="search"]::-webkit-search-results-decoration {
16480
16069
  opacity: 0;
16481
16070
  }
16482
16071
 
16483
- @media (width >= 768px) {
16072
+ @media (min-width: 768px) {
16484
16073
 
16485
16074
  .search-results-container {
16486
16075
  z-index: 6;
@@ -16598,7 +16187,7 @@ input[type="search"]::-webkit-search-results-decoration {
16598
16187
  z-index: 26;
16599
16188
  }
16600
16189
 
16601
- @media (width <= 991px) {
16190
+ @media (max-width: 991px) {
16602
16191
 
16603
16192
  .navigation-search {
16604
16193
  position: fixed;
@@ -16629,28 +16218,28 @@ input[type="search"]::-webkit-search-results-decoration {
16629
16218
  display: flex;
16630
16219
  }
16631
16220
 
16632
- @media (width >= 576px) {
16221
+ @media (min-width: 576px) {
16633
16222
  .main-navigation {
16634
16223
  max-width: var(--breakpoint-xm);
16635
16224
  }
16636
16225
  }
16637
- @media (width >= 768px) {
16226
+ @media (min-width: 768px) {
16638
16227
  .main-navigation {
16639
16228
  max-width: var(--breakpoint-sm);
16640
16229
  }
16641
16230
  }
16642
- @media (width >= 992px) {
16231
+ @media (min-width: 992px) {
16643
16232
  .main-navigation {
16644
16233
  max-width: var(--breakpoint-md);
16645
16234
  }
16646
16235
  }
16647
- @media (width >= 1200px) {
16236
+ @media (min-width: 1200px) {
16648
16237
  .main-navigation {
16649
16238
  max-width: var(--breakpoint-lg);
16650
16239
  }
16651
16240
  }
16652
16241
 
16653
- @media (width <= 767px) {
16242
+ @media (max-width: 767px) {
16654
16243
  .main-navigation {
16655
16244
  max-width: 100%;
16656
16245
  }
@@ -16668,14 +16257,14 @@ input[type="search"]::-webkit-search-results-decoration {
16668
16257
  font-size: var(--font-size-base, 1rem);
16669
16258
  }
16670
16259
 
16671
- @media (width >= 576px) {
16260
+ @media (min-width: 576px) {
16672
16261
 
16673
16262
  .top-level-nav .nav-item {
16674
16263
  font-size: calc(var(--font-size-base, 1rem) + var(--ratio))
16675
16264
  }
16676
16265
  }
16677
16266
 
16678
- @media (width >= 768px) {
16267
+ @media (min-width: 768px) {
16679
16268
 
16680
16269
  .nav-item:hover,
16681
16270
  .nav-item:focus,
@@ -16726,7 +16315,7 @@ input[type="search"]::-webkit-search-results-decoration {
16726
16315
  max-height: 1000px !important;
16727
16316
  }
16728
16317
 
16729
- @media (width <= 991px) {
16318
+ @media (max-width: 991px) {
16730
16319
 
16731
16320
  .nav-item .sub-nav.open, .nav-item-search .sub-nav.open {
16732
16321
  max-height: 1000px;
@@ -16765,7 +16354,7 @@ input[type="search"]::-webkit-search-results-decoration {
16765
16354
  display: block;
16766
16355
  }
16767
16356
 
16768
- @media (width >= 992px) {
16357
+ @media (min-width: 992px) {
16769
16358
  .first-level-link,
16770
16359
  .first-level-btn {
16771
16360
  display: block;
@@ -16874,7 +16463,7 @@ input[type="search"]::-webkit-search-results-decoration {
16874
16463
  display: inline-block;
16875
16464
  }
16876
16465
 
16877
- @media (width >= 992px) {
16466
+ @media (min-width: 992px) {
16878
16467
 
16879
16468
  .full-width-nav .nav-item .first-level-link > span[class^="ca-gov-icon"]:not(.carrot), .full-width-nav .nav-item .first-level-btn > span[class^="ca-gov-icon"]:not(.carrot) {
16880
16469
  /* Navigation icons */
@@ -16917,7 +16506,7 @@ input[type="search"]::-webkit-search-results-decoration {
16917
16506
  border-left: 1px solid var(--gray-200, #d4d4d7);
16918
16507
  }
16919
16508
 
16920
- @media (width >= 992px) {
16509
+ @media (min-width: 992px) {
16921
16510
  .main-navigation {
16922
16511
  z-index: 25;
16923
16512
  min-height: 85px;
@@ -16941,8 +16530,8 @@ input[type="search"]::-webkit-search-results-decoration {
16941
16530
  flex: 1 1 auto;
16942
16531
  }
16943
16532
 
16944
- .noflex .top-level-nav .nav-item,
16945
- .oldie .top-level-nav .nav-item {
16533
+ .top-level-nav .nav-item .noflex,
16534
+ .top-level-nav .nav-item .oldie {
16946
16535
  display: table-cell;
16947
16536
  }
16948
16537
 
@@ -17002,7 +16591,7 @@ input[type="search"]::-webkit-search-results-decoration {
17002
16591
  display: block;
17003
16592
  }
17004
16593
 
17005
- .touch .main-navigation.dropdown .dropdown .nav-item:hover .sub-nav, .touch .no-js .main-navigation.dropdown .nav-item:hover .sub-nav, .touch .no-js .main-navigation.megadropdown .nav-item:hover .sub-nav {
16594
+ .main-navigation.dropdown .dropdown .nav-item:hover .sub-nav .touch, .no-js .main-navigation.dropdown .nav-item:hover .sub-nav .touch, .no-js .main-navigation.megadropdown .nav-item:hover .sub-nav .touch {
17006
16595
  display: none;
17007
16596
  }
17008
16597
  .no-icons .top-level-nav .nav-item > a {
@@ -17051,7 +16640,7 @@ input[type="search"]::-webkit-search-results-decoration {
17051
16640
  }
17052
16641
 
17053
16642
  /* MOBILE NAVIGATION */
17054
- @media (width <= 991px) {
16643
+ @media (max-width: 991px) {
17055
16644
  .logo-nav {
17056
16645
  display: block;
17057
16646
  }
@@ -17241,13 +16830,13 @@ input[type="search"]::-webkit-search-results-decoration {
17241
16830
  width: 100%;
17242
16831
  }
17243
16832
 
17244
- @media (width >= 1200px) {
16833
+ @media (min-width: 1200px) {
17245
16834
  .main-navigation {
17246
16835
  padding-left: 350px;
17247
16836
  }
17248
16837
  }
17249
16838
 
17250
- @media (width >= 992px) and (width < 1200px) {
16839
+ @media (min-width: 992px) and (width < 1200px) {
17251
16840
  .main-navigation {
17252
16841
  padding-left: 250px;
17253
16842
  }
@@ -17256,7 +16845,7 @@ input[type="search"]::-webkit-search-results-decoration {
17256
16845
  }
17257
16846
  }
17258
16847
 
17259
- @media (width >= 1280px) {
16848
+ @media (min-width: 1280px) {
17260
16849
  .main-navigation {
17261
16850
  padding-left: 350px;
17262
16851
  }
@@ -17267,7 +16856,7 @@ input[type="search"]::-webkit-search-results-decoration {
17267
16856
  display: none;
17268
16857
  }
17269
16858
 
17270
- @media (width >= 992px) {
16859
+ @media (min-width: 992px) {
17271
16860
 
17272
16861
  .nav-item .toggle-sub-nav {
17273
16862
  display: none
@@ -17275,7 +16864,7 @@ input[type="search"]::-webkit-search-results-decoration {
17275
16864
  }
17276
16865
 
17277
16866
  /* FULL WIDTH MENU WITH REGULAR UTILITY BAR */
17278
- @media (width >= 992px) {
16867
+ @media (min-width: 992px) {
17279
16868
  .full-width-nav .main-navigation {
17280
16869
  padding-left: 0;
17281
16870
  margin-top: 0;
@@ -17292,10 +16881,24 @@ input[type="search"]::-webkit-search-results-decoration {
17292
16881
  }
17293
16882
  .full-width-nav .main-navigation .top-level-nav .first-level-btn.has-sub .carrot {
17294
16883
  position: absolute;
17295
- right: 0.75rem;
16884
+ right: 1.2rem;
17296
16885
  top: 0.35rem;
17297
16886
  transition: all 0.5s cubic-bezier(0.57, 0.2, 0.21, 0.89);
17298
16887
  }
16888
+
16889
+ .full-width-nav .main-navigation .top-level-nav .first-level-btn.has-sub .carrot::after {
16890
+ content: "";
16891
+ display: inline-block;
16892
+ text-decoration: none;
16893
+ position: relative;
16894
+ width: 0.55rem;
16895
+ height: 0.55rem;
16896
+ border-top: 2px solid var(--color-p2, #046b99);
16897
+ border-left: 2px solid var(--color-p2, #046b99);
16898
+ transform: rotate(225deg);
16899
+ vertical-align: middle;
16900
+ top: -2px;
16901
+ }
17299
16902
  .full-width-nav .main-navigation .top-level-nav .first-level-btn[aria-expanded="true"] .carrot {
17300
16903
  transform: rotate(180deg);
17301
16904
  top: 0.6rem;
@@ -17337,7 +16940,7 @@ input[type="search"]::-webkit-search-results-decoration {
17337
16940
  }
17338
16941
 
17339
16942
  /* Navigation button mobile */
17340
- @media (width <= 991px) {
16943
+ @media (max-width: 991px) {
17341
16944
  .top-level-nav {
17342
16945
  width: 100%;
17343
16946
  }
@@ -17364,41 +16967,46 @@ input[type="search"]::-webkit-search-results-decoration {
17364
16967
  }
17365
16968
  }
17366
16969
 
17367
- @media (width <= 991px) {
16970
+ @media (max-width: 991px) {
17368
16971
  .nav-item .first-level-link.has-sub .carrot {
17369
16972
  display: none !important;
17370
16973
  }
17371
16974
 
17372
16975
  /* button carrot */
17373
- .first-level-btn[aria-expanded="false"] .rotate {
17374
- display: block;
17375
- position: absolute;
17376
- top: 0;
17377
- right: 0;
17378
- font-size: 1.5rem !important;
17379
- line-height: 3.2rem !important;
17380
- width: 55px !important;
17381
- height: 55px !important;
17382
- text-align: center;
17383
- cursor: pointer;
17384
- border: none;
17385
- transition: all 0.2s ease !important;
17386
- color: var(--white, #fff) !important;
17387
- }
16976
+ .first-level-btn[aria-expanded="false"] .rotate,
16977
+ .first-level-btn[aria-expanded="true"] .rotate {
16978
+ display: block;
16979
+ position: absolute;
16980
+ top: 0;
16981
+ right: 0;
16982
+ width: 55px !important;
16983
+ height: 55px !important;
16984
+ text-align: center;
16985
+ cursor: pointer;
16986
+ border: none;
16987
+ transition: all 0.2s ease !important;
16988
+ color: var(--white, #fff) !important;
16989
+ }
17388
16990
 
17389
- .first-level-btn[aria-expanded="true"] .rotate {
17390
- transform: rotate(90deg) !important;
17391
- position: absolute;
17392
- width: 55px !important;
17393
- height: 55px !important;
17394
- line-height: 3rem !important;
17395
- font-size: 1.5rem !important;
17396
- top: 0;
17397
- right: 0;
17398
- text-align: center;
17399
- transition: all 0.2s ease !important;
17400
- color: var(--white, #fff) !important;
17401
- }
16991
+ .first-level-btn[aria-expanded="false"] .rotate::after, .first-level-btn[aria-expanded="true"] .rotate::after {
16992
+ content: "";
16993
+ display: inline-block;
16994
+ text-decoration: none;
16995
+ position: absolute;
16996
+ width: 0.55rem;
16997
+ height: 0.55rem;
16998
+ border-top: 2px solid #fff;
16999
+ border-left: 2px solid #fff;
17000
+ vertical-align: middle;
17001
+ top: 50%;
17002
+ transform: translateY(-50%) rotate(135deg);
17003
+ right: 1.5rem;
17004
+ margin-left: 0.5rem;
17005
+ }
17006
+
17007
+ .first-level-btn[aria-expanded="true"] .rotate {
17008
+ transform: rotate(90deg) !important;
17009
+ }
17402
17010
 
17403
17011
  /* Side nav second level active styles */
17404
17012
  aside.mobile-sidenav .side-navigation ul.list-navigation li ul li a.active {
@@ -17419,7 +17027,7 @@ input[type="search"]::-webkit-search-results-decoration {
17419
17027
  border-bottom: 4px solid var(--white, #fff);
17420
17028
  }
17421
17029
 
17422
- @media (width <= 767px) {
17030
+ @media (max-width: 767px) {
17423
17031
 
17424
17032
  .nav-media .media {
17425
17033
  border-bottom: 4px solid var(--white, #fff)
@@ -17438,7 +17046,7 @@ input[type="search"]::-webkit-search-results-decoration {
17438
17046
  MEGA MENU
17439
17047
  /src/css/cagov/nav-megamenu.css
17440
17048
  ----------------------------------------- */
17441
- @media (width <= 991px) {
17049
+ @media (max-width: 991px) {
17442
17050
  .main-navigation {
17443
17051
  margin-top: 0;
17444
17052
  padding: 0;
@@ -17451,7 +17059,7 @@ input[type="search"]::-webkit-search-results-decoration {
17451
17059
  overflow: hidden;
17452
17060
  }
17453
17061
 
17454
- @media (width <= 767px) {
17062
+ @media (max-width: 767px) {
17455
17063
 
17456
17064
  .sub-nav {
17457
17065
  border: none
@@ -17463,7 +17071,7 @@ input[type="search"]::-webkit-search-results-decoration {
17463
17071
  font-size: var(--font-size-base, 1rem);
17464
17072
  }
17465
17073
 
17466
- @media (width >= 576px) {
17074
+ @media (min-width: 576px) {
17467
17075
 
17468
17076
  .link-description {
17469
17077
  font-size: calc(var(--font-size-base, 1rem) + var(--ratio))
@@ -17500,7 +17108,7 @@ input[type="search"]::-webkit-search-results-decoration {
17500
17108
  right: initial;
17501
17109
  }
17502
17110
 
17503
- @media (width <= 991px) {
17111
+ @media (max-width: 991px) {
17504
17112
 
17505
17113
  .main-navigation.dropdown .sub-nav {
17506
17114
  max-width: 100%
@@ -17515,7 +17123,7 @@ input[type="search"]::-webkit-search-results-decoration {
17515
17123
  position: static;
17516
17124
  }
17517
17125
 
17518
- @media (width <= 991px) {
17126
+ @media (max-width: 991px) {
17519
17127
 
17520
17128
  .megadropdown .top-level-nav .nav-item {
17521
17129
  position: relative
@@ -17527,7 +17135,7 @@ input[type="search"]::-webkit-search-results-decoration {
17527
17135
  display: block;
17528
17136
  }
17529
17137
 
17530
- @media (width >= 992px) {
17138
+ @media (min-width: 992px) {
17531
17139
  /* Dynamic Element appended to each .sub-nav */
17532
17140
  .nav-arrow-container {
17533
17141
  display: block;
@@ -17560,7 +17168,7 @@ a.second-level-link {
17560
17168
  font-size: var(--font-size-regular);
17561
17169
  }
17562
17170
 
17563
- @media (width >= 576px) {
17171
+ @media (min-width: 576px) {
17564
17172
 
17565
17173
  a.second-level-link {
17566
17174
  font-size: calc(var(--font-size-regular) + var(--ratio))
@@ -17585,7 +17193,7 @@ a.second-level-link [class^="ca-gov-icon-"] {
17585
17193
  margin-right: 3px;
17586
17194
  }
17587
17195
 
17588
- @media (width <= 991px) {
17196
+ @media (max-width: 991px) {
17589
17197
 
17590
17198
  a.second-level-link {
17591
17199
  padding: 0.5rem 1rem 0.75rem 2rem !important;
@@ -17598,7 +17206,7 @@ a.second-level-link {
17598
17206
  }
17599
17207
  }
17600
17208
 
17601
- @media (width >= 992px) {
17209
+ @media (min-width: 992px) {
17602
17210
  .unit1 {
17603
17211
  min-height: 65px;
17604
17212
  }
@@ -17630,7 +17238,7 @@ a.second-level-link {
17630
17238
  }
17631
17239
 
17632
17240
  /* Megamenu State Template v4 */
17633
- @media (width >= 992px) {
17241
+ @media (min-width: 992px) {
17634
17242
  .main-navigation.megadropdown.original .second-level-nav {
17635
17243
  column-count: 3;
17636
17244
  column-gap: 20px;
@@ -17732,7 +17340,7 @@ a.second-level-link {
17732
17340
  outline: solid 2px var(--outline-default-color, #0b8ee5);
17733
17341
  }
17734
17342
 
17735
- @media (width <= 991px) {
17343
+ @media (max-width: 991px) {
17736
17344
  .main-navigation {
17737
17345
  overflow: hidden;
17738
17346
  }
@@ -17756,7 +17364,7 @@ a.second-level-link {
17756
17364
  }
17757
17365
  }
17758
17366
 
17759
- @media (width >= 992px) {
17367
+ @media (min-width: 992px) {
17760
17368
  .sub-nav {
17761
17369
  border-top: none;
17762
17370
  }
@@ -17779,7 +17387,7 @@ a.second-level-link {
17779
17387
 
17780
17388
  /* Flex Sub Nav */
17781
17389
 
17782
- @media (width >= 992px) {
17390
+ @media (min-width: 992px) {
17783
17391
  .second-level-nav.flex {
17784
17392
  display: flex;
17785
17393
  text-align: center;
@@ -17816,7 +17424,7 @@ a.second-level-link {
17816
17424
  }
17817
17425
  }
17818
17426
 
17819
- @media (width <= 991px) {
17427
+ @media (max-width: 991px) {
17820
17428
  .second-level-nav.flex {
17821
17429
  display: block;
17822
17430
  text-align: left;
@@ -17885,7 +17493,7 @@ a.second-level-link {
17885
17493
  inset: 0;
17886
17494
  }
17887
17495
 
17888
- @media (width <= 767px) {
17496
+ @media (max-width: 767px) {
17889
17497
 
17890
17498
  .with-image-right .nav-media, .with-image-left .nav-media {
17891
17499
  background-image: none !important
@@ -18028,7 +17636,7 @@ header.nav-overlay::after {
18028
17636
  top: 35px;
18029
17637
  }
18030
17638
 
18031
- @media (width >= 992px) {
17639
+ @media (min-width: 992px) {
18032
17640
 
18033
17641
  .nav-drawer {
18034
17642
  display: none
@@ -18095,22 +17703,22 @@ header.nav-overlay::after {
18095
17703
  background-color: var(--sub-nav-bg, #f1f8fb);
18096
17704
  }
18097
17705
 
18098
- @media (width >= 576px) {
17706
+ @media (min-width: 576px) {
18099
17707
  .mobile-controls {
18100
17708
  max-width: var(--breakpoint-xm);
18101
17709
  }
18102
17710
  }
18103
- @media (width >= 768px) {
17711
+ @media (min-width: 768px) {
18104
17712
  .mobile-controls {
18105
17713
  max-width: var(--breakpoint-sm);
18106
17714
  }
18107
17715
  }
18108
- @media (width >= 992px) {
17716
+ @media (min-width: 992px) {
18109
17717
  .mobile-controls {
18110
17718
  max-width: var(--breakpoint-md);
18111
17719
  }
18112
17720
  }
18113
- @media (width >= 1200px) {
17721
+ @media (min-width: 1200px) {
18114
17722
  .mobile-controls {
18115
17723
  max-width: var(--breakpoint-lg);
18116
17724
  }
@@ -18230,7 +17838,7 @@ header.nav-overlay::after {
18230
17838
  width: 100%;
18231
17839
  }
18232
17840
 
18233
- @media (width >= 768px) {
17841
+ @media (min-width: 768px) {
18234
17842
 
18235
17843
  .utility-header .half {
18236
17844
  float: left;
@@ -18238,7 +17846,7 @@ header.nav-overlay::after {
18238
17846
  }
18239
17847
  }
18240
17848
 
18241
- @media (width <= 767px) {
17849
+ @media (max-width: 767px) {
18242
17850
 
18243
17851
  .utility-header .half {
18244
17852
  padding-top: 2px;
@@ -18321,7 +17929,7 @@ header.nav-overlay::after {
18321
17929
  text-align: right;
18322
17930
  }
18323
17931
 
18324
- @media (width >= 576px) {
17932
+ @media (min-width: 576px) {
18325
17933
 
18326
17934
  .utility-header .settings-links {
18327
17935
  font-size: calc(var(--font-size-base, 1rem) + var(--ratio))
@@ -18385,6 +17993,14 @@ header.nav-overlay::after {
18385
17993
  color: var(--gray-800, #4a4958);
18386
17994
  }
18387
17995
 
17996
+ .utility-header .flex-row .social-media-links {
17997
+ display: flex;
17998
+ flex-direction: row;
17999
+ justify-content: flex-start;
18000
+ min-height: 38px;
18001
+ align-items: center;
18002
+ }
18003
+
18388
18004
  /* stylelint-disable-next-line no-descending-specificity */
18389
18005
 
18390
18006
  .utility-header .flex-row .social-media-links a {
@@ -18398,15 +18014,6 @@ header.nav-overlay::after {
18398
18014
  color: var(--gray-800, #4a4958);
18399
18015
  }
18400
18016
 
18401
- .utility-header .flex-row .social-media-links{
18402
-
18403
- display: flex;
18404
- flex-direction: row;
18405
- justify-content: flex-start;
18406
- min-height: 38px;
18407
- align-items: center;
18408
- }
18409
-
18410
18017
  .utility-header .flex-row .social-media-links .header-cagov-logo {
18411
18018
  margin-right: 0.5rem;
18412
18019
  }
@@ -18420,6 +18027,20 @@ header.nav-overlay::after {
18420
18027
 
18421
18028
  .utility-header .flex-row .social-media-links .header-cagov-logo .ca-gov-logo-svg {
18422
18029
  vertical-align: middle;
18030
+ display: inline-block;
18031
+ width: 45px;
18032
+ }
18033
+
18034
+ .utility-header .flex-row .social-media-links .header-cagov-logo .ca-gov-logo-svg::before{
18035
+ float: left;
18036
+ padding-top: 55.55555555555556%;
18037
+ content: '';
18038
+ }
18039
+
18040
+ .utility-header .flex-row .social-media-links .header-cagov-logo .ca-gov-logo-svg::after{
18041
+ display: block;
18042
+ content: '';
18043
+ clear: both;
18423
18044
  }
18424
18045
 
18425
18046
  .utility-header .flex-row .social-media-links .header-cagov-logo a {
@@ -18432,7 +18053,7 @@ header.nav-overlay::after {
18432
18053
  font-size: 0.95rem;
18433
18054
  }
18434
18055
 
18435
- @media (width <= 767px) {
18056
+ @media (max-width: 767px) {
18436
18057
 
18437
18058
  .utility-header .flex-row .social-media-links .official-tag {
18438
18059
  margin-right: 0
@@ -18448,7 +18069,7 @@ header.nav-overlay::after {
18448
18069
  height: 1.7rem;
18449
18070
  }
18450
18071
 
18451
- @media (width <= 1139px) {
18072
+ @media (max-width: 1139px) {
18452
18073
 
18453
18074
  .header-cagov-logo svg {
18454
18075
  left: 5px
@@ -18456,7 +18077,7 @@ header.nav-overlay::after {
18456
18077
  }
18457
18078
 
18458
18079
  /* Hide utilities in mobile */
18459
- @media (width <= 991px) {
18080
+ @media (max-width: 991px) {
18460
18081
  button[aria-controls="siteSettings"] {
18461
18082
  display: none;
18462
18083
  }
@@ -18474,7 +18095,7 @@ header.nav-overlay::after {
18474
18095
  overflow: hidden;
18475
18096
  }
18476
18097
 
18477
- @media (width <= 767px) {
18098
+ @media (max-width: 767px) {
18478
18099
 
18479
18100
  .section {
18480
18101
  padding-top: var(--line-height-computed);
@@ -18549,7 +18170,7 @@ header.nav-overlay::after {
18549
18170
  .section-overstated .btn-primary:not(:disabled, .disabled):active,
18550
18171
  .section-overstated .btn-primary:not(:disabled, .disabled).active,
18551
18172
  .section-overstated .btn-primary .show > .dropdown-toggle,
18552
- .open > .dropdown-toggle .section-overstated .btn-primary {
18173
+ .section-overstated .btn-primary .open > .dropdown-toggle {
18553
18174
  color: var(--white, #fff);
18554
18175
  background-color: var(--color-p2-darker, #214a68);
18555
18176
  border-color: var(--white, #fff);
@@ -18557,21 +18178,18 @@ header.nav-overlay::after {
18557
18178
  background-image: none;
18558
18179
  }
18559
18180
 
18560
- .section-overstated .btn-primary.disabled,
18561
- .section-overstated .btn-primary.disabled:hover,
18181
+ .section-overstated .btn-primary.disabled:hover,
18562
18182
  .section-overstated .btn-primary.disabled:focus,
18563
18183
  .section-overstated .btn-primary.disabled:active,
18564
18184
  .section-overstated .btn-primary.disabled.active,
18565
- .section-overstated .btn-primary[disabled],
18566
18185
  .section-overstated .btn-primary[disabled]:hover,
18567
18186
  .section-overstated .btn-primary[disabled]:focus,
18568
18187
  .section-overstated .btn-primary[disabled]:active,
18569
18188
  .section-overstated .btn-primary[disabled].active,
18570
- fieldset[disabled] .section-overstated .btn-primary,
18571
- fieldset[disabled] .section-overstated .btn-primary:hover,
18572
- fieldset[disabled] .section-overstated .btn-primary:focus,
18573
- fieldset[disabled] .section-overstated .btn-primary:active,
18574
- fieldset[disabled] .section-overstated .btn-primary.active {
18189
+ .section-overstated .btn-primary fieldset[disabled]:hover,
18190
+ .section-overstated .btn-primary fieldset[disabled]:focus,
18191
+ .section-overstated .btn-primary fieldset[disabled]:active,
18192
+ .section-overstated .btn-primary fieldset[disabled].active {
18575
18193
  background-color: var(--color-p2, #046b99) !important;
18576
18194
  border-color: var(--white, #fff);
18577
18195
  }
@@ -18593,7 +18211,7 @@ header.nav-overlay::after {
18593
18211
  .section-overstated .btn-standout:not(:disabled, .disabled):active,
18594
18212
  .section-overstated .btn-standout:not(:disabled, .disabled).active,
18595
18213
  .section-overstated .btn-standout .show > .dropdown-toggle,
18596
- .open > .dropdown-toggle .section-overstated .btn-standout {
18214
+ .section-overstated .btn-standout .open > .dropdown-toggle {
18597
18215
  color: var(--white, #fff);
18598
18216
  background-color: var(--color-p3-darker, #242830);
18599
18217
  border-color: var(--white, #fff);
@@ -18601,21 +18219,18 @@ header.nav-overlay::after {
18601
18219
  background-image: none;
18602
18220
  }
18603
18221
 
18604
- .section-overstated .btn-standout.disabled,
18605
- .section-overstated .btn-standout.disabled:hover,
18222
+ .section-overstated .btn-standout.disabled:hover,
18606
18223
  .section-overstated .btn-standout.disabled:focus,
18607
18224
  .section-overstated .btn-standout.disabled:active,
18608
18225
  .section-overstated .btn-standout.disabled.active,
18609
- .section-overstated .btn-standout[disabled],
18610
18226
  .section-overstated .btn-standout[disabled]:hover,
18611
18227
  .section-overstated .btn-standout[disabled]:focus,
18612
18228
  .section-overstated .btn-standout[disabled]:active,
18613
18229
  .section-overstated .btn-standout[disabled].active,
18614
- fieldset[disabled] .section-overstated .btn-standout,
18615
- fieldset[disabled] .section-overstated .btn-standout:hover,
18616
- fieldset[disabled] .section-overstated .btn-standout:focus,
18617
- fieldset[disabled] .section-overstated .btn-standout:active,
18618
- fieldset[disabled] .section-overstated .btn-standout.active {
18230
+ .section-overstated .btn-standout fieldset[disabled]:hover,
18231
+ .section-overstated .btn-standout fieldset[disabled]:focus,
18232
+ .section-overstated .btn-standout fieldset[disabled]:active,
18233
+ .section-overstated .btn-standout fieldset[disabled].active {
18619
18234
  background-color: var(--color-p3, #323a45) !important;
18620
18235
  border-color: var(--white, #fff);
18621
18236
  }
@@ -18667,7 +18282,7 @@ header.nav-overlay::after {
18667
18282
  .section-standout .btn-primary:not(:disabled, .disabled):active,
18668
18283
  .section-standout .btn-primary:not(:disabled, .disabled).active,
18669
18284
  .section-standout .btn-primary .show > .dropdown-toggle,
18670
- .open > .dropdown-toggle .section-standout .btn-primary {
18285
+ .section-standout .btn-primary .open > .dropdown-toggle {
18671
18286
  color: var(--white, #fff);
18672
18287
  background-color: var(--color-p2-darker, #214a68);
18673
18288
  border-color: var(--white, #fff);
@@ -18675,21 +18290,18 @@ header.nav-overlay::after {
18675
18290
  background-image: none;
18676
18291
  }
18677
18292
 
18678
- .section-standout .btn-primary.disabled,
18679
- .section-standout .btn-primary.disabled:hover,
18293
+ .section-standout .btn-primary.disabled:hover,
18680
18294
  .section-standout .btn-primary.disabled:focus,
18681
18295
  .section-standout .btn-primary.disabled:active,
18682
18296
  .section-standout .btn-primary.disabled.active,
18683
- .section-standout .btn-primary[disabled],
18684
18297
  .section-standout .btn-primary[disabled]:hover,
18685
18298
  .section-standout .btn-primary[disabled]:focus,
18686
18299
  .section-standout .btn-primary[disabled]:active,
18687
18300
  .section-standout .btn-primary[disabled].active,
18688
- fieldset[disabled] .section-standout .btn-primary,
18689
- fieldset[disabled] .section-standout .btn-primary:hover,
18690
- fieldset[disabled] .section-standout .btn-primary:focus,
18691
- fieldset[disabled] .section-standout .btn-primary:active,
18692
- fieldset[disabled] .section-standout .btn-primary.active {
18301
+ .section-standout .btn-primary fieldset[disabled]:hover,
18302
+ .section-standout .btn-primary fieldset[disabled]:focus,
18303
+ .section-standout .btn-primary fieldset[disabled]:active,
18304
+ .section-standout .btn-primary fieldset[disabled].active {
18693
18305
  background-color: var(--color-p2, #046b99) !important;
18694
18306
  border-color: var(--white, #fff);
18695
18307
  }
@@ -18721,21 +18333,18 @@ header.nav-overlay::after {
18721
18333
  background-image: none;
18722
18334
  }
18723
18335
 
18724
- .section-standout .btn-standout.disabled,
18725
- .section-standout .btn-standout.disabled:hover,
18336
+ .section-standout .btn-standout.disabled:hover,
18726
18337
  .section-standout .btn-standout.disabled:focus,
18727
18338
  .section-standout .btn-standout.disabled:active,
18728
18339
  .section-standout .btn-standout.disabled.active,
18729
- .section-standout .btn-standout[disabled],
18730
18340
  .section-standout .btn-standout[disabled]:hover,
18731
18341
  .section-standout .btn-standout[disabled]:focus,
18732
18342
  .section-standout .btn-standout[disabled]:active,
18733
18343
  .section-standout .btn-standout[disabled].active,
18734
- fieldset[disabled] .section-standout .btn-standout,
18735
- fieldset[disabled] .section-standout .btn-standout:hover,
18736
- fieldset[disabled] .section-standout .btn-standout:focus,
18737
- fieldset[disabled] .section-standout .btn-standout:active,
18738
- fieldset[disabled] .section-standout .btn-standout.active {
18344
+ .section-standout .btn-standout fieldset[disabled]:hover,
18345
+ .section-standout .btn-standout fieldset[disabled]:focus,
18346
+ .section-standout .btn-standout fieldset[disabled]:active,
18347
+ .section-standout .btn-standout fieldset[disabled].active {
18739
18348
  background-color: var(--color-p3, #323a45) !important;
18740
18349
  border-color: var(--white, #fff);
18741
18350
  }
@@ -18787,7 +18396,7 @@ header.nav-overlay::after {
18787
18396
  .section-impact .btn-primary:not(:disabled, .disabled):active,
18788
18397
  .section-impact .btn-primary:not(:disabled, .disabled).active,
18789
18398
  .section-impact .btn-primary .show > .dropdown-toggle,
18790
- .open > .dropdown-toggle .section-impact .btn-primary {
18399
+ .section-impact .btn-primary .open > .dropdown-toggle {
18791
18400
  color: var(--white, #fff);
18792
18401
  background-color: var(--color-p2-darker, #214a68);
18793
18402
  border-color: var(--white, #fff);
@@ -18795,21 +18404,18 @@ header.nav-overlay::after {
18795
18404
  background-image: none;
18796
18405
  }
18797
18406
 
18798
- .section-impact .btn-primary.disabled,
18799
- .section-impact .btn-primary.disabled:hover,
18407
+ .section-impact .btn-primary.disabled:hover,
18800
18408
  .section-impact .btn-primary.disabled:focus,
18801
18409
  .section-impact .btn-primary.disabled:active,
18802
18410
  .section-impact .btn-primary.disabled.active,
18803
- .section-impact .btn-primary[disabled],
18804
18411
  .section-impact .btn-primary[disabled]:hover,
18805
18412
  .section-impact .btn-primary[disabled]:focus,
18806
18413
  .section-impact .btn-primary[disabled]:active,
18807
18414
  .section-impact .btn-primary[disabled].active,
18808
- fieldset[disabled] .section-impact .btn-primary,
18809
- fieldset[disabled] .section-impact .btn-primary:hover,
18810
- fieldset[disabled] .section-impact .btn-primary:focus,
18811
- fieldset[disabled] .section-impact .btn-primary:active,
18812
- fieldset[disabled] .section-impact .btn-primary.active {
18415
+ .section-impact .btn-primary fieldset[disabled]:hover,
18416
+ .section-impact .btn-primary fieldset[disabled]:focus,
18417
+ .section-impact .btn-primary fieldset[disabled]:active,
18418
+ .section-impact .btn-primary fieldset[disabled].active {
18813
18419
  background-color: var(--color-p2, #046b99) !important;
18814
18420
  border-color: var(--white, #fff);
18815
18421
  }
@@ -18833,7 +18439,7 @@ header.nav-overlay::after {
18833
18439
  .section-impact .btn-standout:not(:disabled, .disabled):active,
18834
18440
  .section-impact .btn-standout:not(:disabled, .disabled).active,
18835
18441
  .section-impact .btn-standout .show > .dropdown-toggle,
18836
- .open > .dropdown-toggle .section-impact .btn-standout {
18442
+ .section-impact .btn-standout .open > .dropdown-toggle {
18837
18443
  color: var(--white, #fff);
18838
18444
  background-color: var(--color-p3-darker, #242830);
18839
18445
  border-color: var(--white, #fff);
@@ -18841,21 +18447,18 @@ header.nav-overlay::after {
18841
18447
  background-image: none;
18842
18448
  }
18843
18449
 
18844
- .section-impact .btn-standout.disabled,
18845
- .section-impact .btn-standout.disabled:hover,
18450
+ .section-impact .btn-standout.disabled:hover,
18846
18451
  .section-impact .btn-standout.disabled:focus,
18847
18452
  .section-impact .btn-standout.disabled:active,
18848
18453
  .section-impact .btn-standout.disabled.active,
18849
- .section-impact .btn-standout[disabled],
18850
18454
  .section-impact .btn-standout[disabled]:hover,
18851
18455
  .section-impact .btn-standout[disabled]:focus,
18852
18456
  .section-impact .btn-standout[disabled]:active,
18853
18457
  .section-impact .btn-standout[disabled].active,
18854
- fieldset[disabled] .section-impact .btn-standout,
18855
- fieldset[disabled] .section-impact .btn-standout:hover,
18856
- fieldset[disabled] .section-impact .btn-standout:focus,
18857
- fieldset[disabled] .section-impact .btn-standout:active,
18858
- fieldset[disabled] .section-impact .btn-standout.active {
18458
+ .section-impact .btn-standout fieldset[disabled]:hover,
18459
+ .section-impact .btn-standout fieldset[disabled]:focus,
18460
+ .section-impact .btn-standout fieldset[disabled]:active,
18461
+ .section-impact .btn-standout fieldset[disabled].active {
18859
18462
  background-color: var(--color-p3, #323a45) !important;
18860
18463
  border-color: var(--white, #fff);
18861
18464
  }
@@ -18877,7 +18480,7 @@ header.nav-overlay::after {
18877
18480
  .section-impact .btn-default:not(:disabled, .disabled):active,
18878
18481
  .section-impact .btn-default:not(:disabled, .disabled).active,
18879
18482
  .section-impact .btn-default .show > .dropdown-toggle,
18880
- .open > .dropdown-toggle .section-impact .btn-default {
18483
+ .section-impact .btn-default .open > .dropdown-toggle {
18881
18484
  color: var(--white, #fff);
18882
18485
  background-color: rgb(255 255 255 / 20%);
18883
18486
  border-color: var(--white, #fff);
@@ -18885,21 +18488,18 @@ header.nav-overlay::after {
18885
18488
  background-image: none;
18886
18489
  }
18887
18490
 
18888
- .section-impact .btn-default.disabled,
18889
- .section-impact .btn-default.disabled:hover,
18491
+ .section-impact .btn-default.disabled:hover,
18890
18492
  .section-impact .btn-default.disabled:focus,
18891
18493
  .section-impact .btn-default.disabled:active,
18892
18494
  .section-impact .btn-default.disabled.active,
18893
- .section-impact .btn-default[disabled],
18894
18495
  .section-impact .btn-default[disabled]:hover,
18895
18496
  .section-impact .btn-default[disabled]:focus,
18896
18497
  .section-impact .btn-default[disabled]:active,
18897
18498
  .section-impact .btn-default[disabled].active,
18898
- fieldset[disabled] .section-impact .btn-default,
18899
- fieldset[disabled] .section-impact .btn-default:hover,
18900
- fieldset[disabled] .section-impact .btn-default:focus,
18901
- fieldset[disabled] .section-impact .btn-default:active,
18902
- fieldset[disabled] .section-impact .btn-default.active {
18499
+ .section-impact .btn-default fieldset[disabled]:hover,
18500
+ .section-impact .btn-default fieldset[disabled]:focus,
18501
+ .section-impact .btn-default fieldset[disabled]:active,
18502
+ .section-impact .btn-default fieldset[disabled].active {
18903
18503
  background-color: transparent !important;
18904
18504
  border-color: var(--color-s2, #87b8ce);
18905
18505
  }
@@ -18952,7 +18552,7 @@ header.nav-overlay::after {
18952
18552
  .section-primary .btn-primary:not(:disabled, .disabled):active,
18953
18553
  .section-primary .btn-primary:not(:disabled, .disabled).active,
18954
18554
  .section-primary .btn-primary .show > .dropdown-toggle,
18955
- .open > .dropdown-toggle .section-primary .btn-primary {
18555
+ .section-primary .btn-primary .open > .dropdown-toggle {
18956
18556
  color: var(--white, #fff);
18957
18557
  background-color: var(--color-p2-darker, #214a68);
18958
18558
  border-color: var(--white, #fff);
@@ -18960,21 +18560,18 @@ header.nav-overlay::after {
18960
18560
  background-image: none;
18961
18561
  }
18962
18562
 
18963
- .section-primary .btn-primary.disabled,
18964
- .section-primary .btn-primary.disabled:hover,
18563
+ .section-primary .btn-primary.disabled:hover,
18965
18564
  .section-primary .btn-primary.disabled:focus,
18966
18565
  .section-primary .btn-primary.disabled:active,
18967
18566
  .section-primary .btn-primary.disabled.active,
18968
- .section-primary .btn-primary[disabled],
18969
18567
  .section-primary .btn-primary[disabled]:hover,
18970
18568
  .section-primary .btn-primary[disabled]:focus,
18971
18569
  .section-primary .btn-primary[disabled]:active,
18972
18570
  .section-primary .btn-primary[disabled].active,
18973
- fieldset[disabled] .section-primary .btn-primary,
18974
- fieldset[disabled] .section-primary .btn-primary:hover,
18975
- fieldset[disabled] .section-primary .btn-primary:focus,
18976
- fieldset[disabled] .section-primary .btn-primary:active,
18977
- fieldset[disabled] .section-primary .btn-primary.active {
18571
+ .section-primary .btn-primary fieldset[disabled]:hover,
18572
+ .section-primary .btn-primary fieldset[disabled]:focus,
18573
+ .section-primary .btn-primary fieldset[disabled]:active,
18574
+ .section-primary .btn-primary fieldset[disabled].active {
18978
18575
  background-color: var(--color-p2, #046b99) !important;
18979
18576
  border-color: var(--white, #fff);
18980
18577
  }
@@ -18998,7 +18595,7 @@ header.nav-overlay::after {
18998
18595
  .section-primary .btn-standout:not(:disabled, .disabled):active,
18999
18596
  .section-primary .btn-standout:not(:disabled, .disabled).active,
19000
18597
  .section-primary .btn-standout .show > .dropdown-toggle,
19001
- .open > .dropdown-toggle .section-primary .btn-standout {
18598
+ .section-primary .btn-standout .open > .dropdown-toggle {
19002
18599
  color: var(--white, #fff);
19003
18600
  background-color: var(--color-p3-darker, #242830);
19004
18601
  border-color: var(--white, #fff);
@@ -19006,21 +18603,18 @@ header.nav-overlay::after {
19006
18603
  background-image: none;
19007
18604
  }
19008
18605
 
19009
- .section-primary .btn-standout.disabled,
19010
- .section-primary .btn-standout.disabled:hover,
18606
+ .section-primary .btn-standout.disabled:hover,
19011
18607
  .section-primary .btn-standout.disabled:focus,
19012
18608
  .section-primary .btn-standout.disabled:active,
19013
18609
  .section-primary .btn-standout.disabled.active,
19014
- .section-primary .btn-standout[disabled],
19015
18610
  .section-primary .btn-standout[disabled]:hover,
19016
18611
  .section-primary .btn-standout[disabled]:focus,
19017
18612
  .section-primary .btn-standout[disabled]:active,
19018
18613
  .section-primary .btn-standout[disabled].active,
19019
- fieldset[disabled] .section-primary .btn-standout,
19020
- fieldset[disabled] .section-primary .btn-standout:hover,
19021
- fieldset[disabled] .section-primary .btn-standout:focus,
19022
- fieldset[disabled] .section-primary .btn-standout:active,
19023
- fieldset[disabled] .section-primary .btn-standout.active {
18614
+ .section-primary .btn-standout fieldset[disabled]:hover,
18615
+ .section-primary .btn-standout fieldset[disabled]:focus,
18616
+ .section-primary .btn-standout fieldset[disabled]:active,
18617
+ .section-primary .btn-standout fieldset[disabled].active {
19024
18618
  background-color: var(--color-p3, #323a45) !important;
19025
18619
  border-color: var(--white, #fff);
19026
18620
  }
@@ -19073,7 +18667,7 @@ header.nav-overlay::after {
19073
18667
  .section-inverted .btn-primary:not(:disabled, .disabled):active,
19074
18668
  .section-inverted .btn-primary:not(:disabled, .disabled).active,
19075
18669
  .section-inverted .btn-primary .show > .dropdown-toggle,
19076
- .open > .dropdown-toggle .section-inverted .btn-primary {
18670
+ .section-inverted .btn-primary .open > .dropdown-toggle {
19077
18671
  color: var(--white, #fff);
19078
18672
  background-color: var(--color-p2-darker, #214a68);
19079
18673
  border-color: var(--white, #fff);
@@ -19081,21 +18675,18 @@ header.nav-overlay::after {
19081
18675
  background-image: none;
19082
18676
  }
19083
18677
 
19084
- .section-inverted .btn-primary.disabled,
19085
- .section-inverted .btn-primary.disabled:hover,
18678
+ .section-inverted .btn-primary.disabled:hover,
19086
18679
  .section-inverted .btn-primary.disabled:focus,
19087
18680
  .section-inverted .btn-primary.disabled:active,
19088
18681
  .section-inverted .btn-primary.disabled.active,
19089
- .section-inverted .btn-primary[disabled],
19090
18682
  .section-inverted .btn-primary[disabled]:hover,
19091
18683
  .section-inverted .btn-primary[disabled]:focus,
19092
18684
  .section-inverted .btn-primary[disabled]:active,
19093
18685
  .section-inverted .btn-primary[disabled].active,
19094
- fieldset[disabled] .section-inverted .btn-primary,
19095
- fieldset[disabled] .section-inverted .btn-primary:hover,
19096
- fieldset[disabled] .section-inverted .btn-primary:focus,
19097
- fieldset[disabled] .section-inverted .btn-primary:active,
19098
- fieldset[disabled] .section-inverted .btn-primary.active {
18686
+ .section-inverted .btn-primary fieldset[disabled]:hover,
18687
+ .section-inverted .btn-primary fieldset[disabled]:focus,
18688
+ .section-inverted .btn-primary fieldset[disabled]:active,
18689
+ .section-inverted .btn-primary fieldset[disabled].active {
19099
18690
  background-color: var(--color-p2, #046b99) !important;
19100
18691
  border-color: var(--white, #fff);
19101
18692
  }
@@ -19119,7 +18710,7 @@ header.nav-overlay::after {
19119
18710
  .section-inverted .btn-standout:not(:disabled, .disabled):active,
19120
18711
  .section-inverted .btn-standout:not(:disabled, .disabled).active,
19121
18712
  .section-inverted .btn-standout .show > .dropdown-toggle,
19122
- .open > .dropdown-toggle .section-inverted .btn-standout {
18713
+ .section-inverted .btn-standout .open > .dropdown-toggle {
19123
18714
  color: var(--white, #fff);
19124
18715
  background-color: var(--color-p3-darker, #242830);
19125
18716
  border-color: var(--white, #fff);
@@ -19127,21 +18718,18 @@ header.nav-overlay::after {
19127
18718
  background-image: none;
19128
18719
  }
19129
18720
 
19130
- .section-inverted .btn-standout.disabled,
19131
- .section-inverted .btn-standout.disabled:hover,
18721
+ .section-inverted .btn-standout.disabled:hover,
19132
18722
  .section-inverted .btn-standout.disabled:focus,
19133
18723
  .section-inverted .btn-standout.disabled:active,
19134
18724
  .section-inverted .btn-standout.disabled.active,
19135
- .section-inverted .btn-standout[disabled],
19136
18725
  .section-inverted .btn-standout[disabled]:hover,
19137
18726
  .section-inverted .btn-standout[disabled]:focus,
19138
18727
  .section-inverted .btn-standout[disabled]:active,
19139
18728
  .section-inverted .btn-standout[disabled].active,
19140
- fieldset[disabled] .section-inverted .btn-standout,
19141
- fieldset[disabled] .section-inverted .btn-standout:hover,
19142
- fieldset[disabled] .section-inverted .btn-standout:focus,
19143
- fieldset[disabled] .section-inverted .btn-standout:active,
19144
- fieldset[disabled] .section-inverted .btn-standout.active {
18729
+ .section-inverted .btn-standout fieldset[disabled]:hover,
18730
+ .section-inverted .btn-standout fieldset[disabled]:focus,
18731
+ .section-inverted .btn-standout fieldset[disabled]:active,
18732
+ .section-inverted .btn-standout fieldset[disabled].active {
19145
18733
  background-color: var(--color-p3, #323a45) !important;
19146
18734
  border-color: var(--white, #fff);
19147
18735
  }
@@ -19928,7 +19516,7 @@ html {
19928
19516
  border-color: var(--color-p2-darker, #214a68);
19929
19517
  }
19930
19518
 
19931
- @media (width >= 992px) {
19519
+ @media (min-width: 992px) {
19932
19520
  .return-top .sr-only {
19933
19521
  position: relative !important;
19934
19522
  width: unset !important;
@@ -20142,7 +19730,7 @@ html {
20142
19730
  background: var(--body-bg);
20143
19731
  }
20144
19732
 
20145
- @media (width <= 767px) {
19733
+ @media (max-width: 767px) {
20146
19734
 
20147
19735
  .tab-group {
20148
19736
  border: none
@@ -20180,8 +19768,7 @@ html {
20180
19768
  font-weight: 600;
20181
19769
  }
20182
19770
 
20183
- .tab-group .nav-tabs li > a,
20184
- .tab-group .nav-tabs li > a:hover {
19771
+ .tab-group .nav-tabs li > a:hover {
20185
19772
  border: none;
20186
19773
  border-top: none !important;
20187
19774
  text-decoration: none;
@@ -20200,7 +19787,7 @@ html {
20200
19787
  border: 1px solid var(--gray-200, #d4d4d7);
20201
19788
  }
20202
19789
 
20203
- @media (width <= 767px) {
19790
+ @media (max-width: 767px) {
20204
19791
 
20205
19792
  .tab-group .tab-content {
20206
19793
  border: none
@@ -20227,28 +19814,28 @@ html {
20227
19814
  margin-bottom: 0;
20228
19815
  }
20229
19816
 
20230
- @media (width <= 575px) {
19817
+ @media (max-width: 575px) {
20231
19818
 
20232
19819
  .panel-group.responsive.hidden-xs.hidden-sm {
20233
19820
  display: none !important
20234
19821
  }
20235
19822
  }
20236
19823
 
20237
- @media (width >= 768px) {
19824
+ @media (min-width: 768px) {
20238
19825
 
20239
19826
  .panel-group.responsive.hidden-xs.hidden-sm {
20240
19827
  display: block !important
20241
19828
  }
20242
19829
  }
20243
19830
 
20244
- @media (width <= 575px) {
19831
+ @media (max-width: 575px) {
20245
19832
 
20246
19833
  .panel-group.responsive.visible-xs.visible-sm {
20247
19834
  display: block !important
20248
19835
  }
20249
19836
  }
20250
19837
 
20251
- @media (width >= 768px) {
19838
+ @media (min-width: 768px) {
20252
19839
 
20253
19840
  .panel-group.responsive.visible-xs.visible-sm {
20254
19841
  display: none !important
@@ -20285,10 +19872,12 @@ html {
20285
19872
  border-bottom: 3px solid;
20286
19873
  }
20287
19874
 
19875
+ /* stylelint-disable-next-line no-descending-specificity */
20288
19876
  .nav-tabs > li > a:hover {
20289
19877
  color: var(--brand-primary-darker, #29597f);
20290
19878
  }
20291
19879
 
19880
+ /* stylelint-disable-next-line no-descending-specificity */
20292
19881
  .nav-tabs > li > a:focus {
20293
19882
  outline: 2px solid var(--outline-default-color);
20294
19883
  outline-offset: -2px;
@@ -20320,7 +19909,7 @@ html {
20320
19909
  }
20321
19910
 
20322
19911
  /* Responsive desctop view */
20323
- @media (width >= 768px) {
19912
+ @media (min-width: 768px) {
20324
19913
  .responsive .nav-tabs {
20325
19914
  display: flex;
20326
19915
  background-color: transparent !important;
@@ -20352,7 +19941,7 @@ html {
20352
19941
  }
20353
19942
 
20354
19943
  /* Responsive tabs mobile view */
20355
- @media (width <= 767px) {
19944
+ @media (max-width: 767px) {
20356
19945
  .responsive .tab-pane {
20357
19946
  display: block !important;
20358
19947
  opacity: 1 !important;
@@ -20449,6 +20038,8 @@ html {
20449
20038
  font-weight: 600;
20450
20039
  }
20451
20040
 
20041
+ /* stylelint-disable-next-line no-descending-specificity */
20042
+
20452
20043
  .tabs [role="tablist"] a:focus {
20453
20044
  outline: 2px solid var(--outline-default-color);
20454
20045
  outline-offset: -2px;
@@ -20477,6 +20068,8 @@ html {
20477
20068
  margin-top: -2px;
20478
20069
  }
20479
20070
 
20071
+ /* stylelint-disable-next-line no-descending-specificity */
20072
+
20480
20073
  .tabs [role="tabpanel"] a:focus {
20481
20074
  outline: 2px solid var(--outline-default-color);
20482
20075
  }
@@ -20486,7 +20079,7 @@ html {
20486
20079
  outline-offset: -2px;
20487
20080
  }
20488
20081
 
20489
- @media (width <= 767px) {
20082
+ @media (max-width: 767px) {
20490
20083
  .tabs.responsive [role="tabpanel"] {
20491
20084
  border: none;
20492
20085
  }
@@ -20499,13 +20092,13 @@ html {
20499
20092
  /* accordion component specific classes */
20500
20093
 
20501
20094
  /* initial styles */
20502
- cagov-accordion details {
20095
+ cagov-accordion > details {
20503
20096
  margin-bottom: 0;
20504
20097
  min-height: 3rem;
20505
20098
  margin-top: 1rem;
20506
20099
  overflow: visible;
20507
20100
  }
20508
- cagov-accordion details summary {
20101
+ cagov-accordion > details > summary {
20509
20102
  cursor: pointer;
20510
20103
  padding: 0.5rem 3rem 0.5rem 3.75rem;
20511
20104
  background-color: var(--gray-50, #fafafa);
@@ -20517,7 +20110,7 @@ cagov-accordion details summary {
20517
20110
  font-weight: bold;
20518
20111
  border: 1px solid var(--gray-200, #d4d4d7);
20519
20112
  }
20520
- cagov-accordion details summary::before {
20113
+ cagov-accordion > details > summary::before {
20521
20114
  position: absolute;
20522
20115
  height: 100%;
20523
20116
  width: 2.75rem;
@@ -20528,7 +20121,7 @@ cagov-accordion details summary::before {
20528
20121
  border-radius: 3px 0 0 3px;
20529
20122
  content: "";
20530
20123
  }
20531
- cagov-accordion details summary::after {
20124
+ cagov-accordion > details > summary::after {
20532
20125
  content: "";
20533
20126
  position: absolute;
20534
20127
  top: 0;
@@ -20538,27 +20131,27 @@ cagov-accordion details summary::after {
20538
20131
  width: 100%;
20539
20132
  border-radius: 3px;
20540
20133
  }
20541
- cagov-accordion details summary .cagov-open-indicator {
20134
+ cagov-accordion > details > summary .cagov-open-indicator {
20542
20135
  position: absolute;
20543
20136
  left: 0.5rem;
20544
20137
  top: 0.4rem;
20545
20138
  width: 0;
20546
20139
  height: 0;
20547
20140
  }
20548
- cagov-accordion details summary .cagov-open-indicator::before {
20141
+ cagov-accordion > details > summary .cagov-open-indicator::before {
20549
20142
  font-family: CaGov;
20550
20143
  content: "5";
20551
20144
  position: absolute;
20552
20145
  font-size: 1.6rem;
20553
20146
  transition: transform 0.2s;
20554
20147
  }
20555
- cagov-accordion details summary:hover {
20148
+ cagov-accordion > details > summary:hover {
20556
20149
  color: black;
20557
20150
  }
20558
- cagov-accordion details summary:hover::before {
20151
+ cagov-accordion > details > summary:hover::before {
20559
20152
  background-color: var(--gray-100, #f3f3f4);
20560
20153
  }
20561
- cagov-accordion details .accordion-body {
20154
+ cagov-accordion > details .accordion-body {
20562
20155
  padding: 1rem;
20563
20156
  border-radius: 0 0 4px 4px;
20564
20157
  border: 1px solid var(--gray-200, #d4d4d7);
@@ -20566,41 +20159,41 @@ cagov-accordion details .accordion-body {
20566
20159
  }
20567
20160
 
20568
20161
  /* styles applied after custom element javascript runs */
20569
- cagov-accordion:defined details {
20162
+ cagov-accordion:defined > details {
20570
20163
  transition: height 0.2s;
20571
20164
  height: 3rem;
20572
20165
  overflow: visible;
20573
20166
  }
20574
- cagov-accordion:defined summary::-webkit-details-marker {
20575
- display: none;
20576
- }
20577
- cagov-accordion:defined details summary {
20578
- list-style: none;
20579
- border-radius: 4px;
20580
- }
20581
- cagov-accordion:defined details summary:focus::before {
20582
- background-color: var(--gray-100, #f3f3f4);
20583
- }
20584
- cagov-accordion:defined details summary:focus::after {
20585
- outline: 2px solid var(--outline-default-color);
20586
- outline-offset: -2px;
20587
- }
20588
- cagov-accordion:defined details[open] {
20589
- height: auto;
20590
- }
20591
- cagov-accordion:defined details[open] .cagov-open-indicator::before {
20592
- transform: rotate(90deg) translateY(-0.2rem);
20167
+ cagov-accordion:defined > details > summary {
20168
+ list-style: none;
20169
+ border-radius: 4px;
20170
+ }
20171
+ cagov-accordion:defined > details > summary::-webkit-details-marker {
20172
+ display: none;
20593
20173
  }
20594
- cagov-accordion:defined details[open] summary {
20595
- border-radius: 4px 4px 0 0;
20174
+ cagov-accordion:defined > details > summary:focus::before {
20175
+ background-color: var(--gray-100, #f3f3f4);
20176
+ }
20177
+ cagov-accordion:defined > details > summary:focus::after {
20178
+ outline: 2px solid var(--outline-default-color);
20179
+ outline-offset: -2px;
20180
+ }
20181
+ cagov-accordion:defined > details[open] {
20182
+ height: auto;
20596
20183
  }
20597
- cagov-accordion:defined details[open] summary::before {
20598
- border-radius: 3px 0 0;
20599
- background-color: var(--gray-100, #f3f3f4);
20184
+ cagov-accordion:defined > details[open] .cagov-open-indicator::before {
20185
+ transform: rotate(90deg) translateY(-0.2rem);
20186
+ }
20187
+ cagov-accordion:defined > details[open] > summary {
20188
+ border-radius: 4px 4px 0 0;
20600
20189
  }
20601
- cagov-accordion:defined details[open] summary:focus::after {
20602
- border-radius: 3px 3px 0 0;
20190
+ cagov-accordion:defined > details[open] > summary::before {
20191
+ border-radius: 3px 0 0;
20192
+ background-color: var(--gray-100, #f3f3f4);
20603
20193
  }
20194
+ cagov-accordion:defined > details[open] > summary:focus::after {
20195
+ border-radius: 3px 3px 0 0;
20196
+ }
20604
20197
  /* -----------------------------------------
20605
20198
  ACCORDIONS LIST
20606
20199
  /src/css/cagov/accordion-list.css
@@ -20922,13 +20515,13 @@ cagov-accordion:defined details[open] summary:focus::after {
20922
20515
  background-color: var(--gray-100, #f3f3f4);
20923
20516
  }
20924
20517
 
20925
- cagov-accordion.sidenav details {
20518
+ cagov-accordion.sidenav > details {
20926
20519
  border: none;
20927
20520
  min-height: 2rem;
20928
20521
  margin-top: 0;
20929
20522
  }
20930
20523
 
20931
- cagov-accordion.sidenav details summary {
20524
+ cagov-accordion.sidenav > details > summary {
20932
20525
  border: none;
20933
20526
  background: var(--white, #fff);
20934
20527
  padding: 0.7rem 2rem 0.7rem 1rem;
@@ -20939,93 +20532,93 @@ cagov-accordion.sidenav details summary {
20939
20532
  color: var(--gray-700, #5e5e6a);
20940
20533
  }
20941
20534
 
20942
- cagov-accordion.sidenav details summary::before {
20535
+ cagov-accordion.sidenav > details > summary::before {
20943
20536
  border: none !important;
20944
20537
  width: 3px;
20945
20538
  background-color: transparent !important;
20946
20539
  }
20947
20540
 
20948
- cagov-accordion.sidenav details summary::after {
20541
+ cagov-accordion.sidenav > details > summary::after {
20949
20542
  display: none;
20950
20543
  }
20951
20544
 
20952
- cagov-accordion.sidenav details summary:hover,
20953
- cagov-accordion.sidenav details summary:focus {
20545
+ cagov-accordion.sidenav > details > summary:hover,
20546
+ cagov-accordion.sidenav > details > summary:focus {
20954
20547
  text-decoration: none;
20955
20548
  background-color: var(--gray-50, #fafafa);
20956
20549
  color: var(--gray-700, #5e5e6a);
20957
20550
  }
20958
20551
 
20959
- cagov-accordion.sidenav details summary:hover::before, cagov-accordion.sidenav details summary:focus::before {
20552
+ cagov-accordion.sidenav > details > summary:hover::before, cagov-accordion.sidenav > details > summary:focus::before {
20960
20553
  border: none;
20961
20554
  background-color: transparent;
20962
20555
  }
20963
20556
 
20964
- cagov-accordion.sidenav details summary:focus {
20557
+ cagov-accordion.sidenav > details > summary:focus {
20965
20558
  outline: 2px solid var(--outline-default-color);
20966
20559
  outline-offset: -2px;
20967
20560
  }
20968
20561
 
20969
- cagov-accordion.sidenav details summary.active {
20562
+ cagov-accordion.sidenav > details > summary.active {
20970
20563
  color: var(--gray-700, #5e5e6a) !important;
20971
20564
  text-decoration: none;
20972
20565
  background-color: var(--gray-75, #f3f3f4);
20973
20566
  font-weight: 400;
20974
20567
  }
20975
20568
 
20976
- cagov-accordion.sidenav details summary.active::before {
20569
+ cagov-accordion.sidenav > details > summary.active::before {
20977
20570
  border: none;
20978
20571
  width: 3px;
20979
20572
  border-radius: 0;
20980
20573
  background-color: var(--color-p1, #fdb81e) !important;
20981
20574
  }
20982
20575
 
20983
- cagov-accordion.sidenav details summary.active:hover,
20984
- cagov-accordion.sidenav details summary.active:focus {
20576
+ cagov-accordion.sidenav > details > summary.active:hover,
20577
+ cagov-accordion.sidenav > details > summary.active:focus {
20985
20578
  color: var(--black, #000) !important;
20986
20579
  text-decoration: none;
20987
20580
  background-color: var(--gray-100, #f3f3f4);
20988
20581
  }
20989
20582
 
20990
- cagov-accordion.sidenav details summary.active:focus {
20583
+ cagov-accordion.sidenav > details > summary.active:focus {
20991
20584
  outline: 2px solid var(--outline-default-color);
20992
20585
  outline-offset: -2px;
20993
20586
  }
20994
20587
 
20995
- cagov-accordion.sidenav details summary[open] summary {
20588
+ cagov-accordion.sidenav > details > summary[open] > summary {
20996
20589
  color: var(--black, #000);
20997
20590
  }
20998
20591
 
20999
- cagov-accordion.sidenav details summary[open] summary::after {
20592
+ cagov-accordion.sidenav > details > summary[open] > summary::after {
21000
20593
  display: none;
21001
20594
  }
21002
20595
 
21003
- cagov-accordion.sidenav details summary .cagov-open-indicator {
20596
+ cagov-accordion.sidenav > details > summary .cagov-open-indicator {
21004
20597
  left: unset !important;
21005
20598
  right: 2.7rem;
21006
20599
  top: 0.6rem !important;
21007
20600
  }
21008
20601
 
21009
- cagov-accordion.sidenav details summary .cagov-open-indicator::before {
20602
+ cagov-accordion.sidenav > details > summary .cagov-open-indicator::before {
21010
20603
  font-size: 2.4rem;
21011
20604
  }
21012
20605
 
21013
- cagov-accordion.sidenav details .accordion-body {
20606
+ cagov-accordion.sidenav > details .accordion-body {
21014
20607
  padding: 0;
21015
20608
  border: none;
21016
20609
  outline: none;
21017
20610
  }
21018
20611
 
21019
- cagov-accordion.sidenav details .accordion-body .side-subnav {
20612
+ cagov-accordion.sidenav > details .accordion-body .side-subnav {
21020
20613
  margin-bottom: 0;
21021
20614
  margin-left: 0;
21022
20615
  }
21023
20616
 
21024
- cagov-accordion.sidenav details .accordion-body .side-subnav li:first-child {
20617
+ cagov-accordion.sidenav > details .accordion-body .side-subnav li:first-child {
21025
20618
  margin-top: 0;
21026
20619
  }
21027
20620
 
21028
- cagov-accordion.sidenav details .accordion-body .side-subnav li:last-child {
20621
+ cagov-accordion.sidenav > details .accordion-body .side-subnav li:last-child {
21029
20622
  margin-bottom: 0;
21030
20623
  }
21031
20624
  .breadcrumbs ul,
@@ -21038,7 +20631,7 @@ cagov-accordion.sidenav details .accordion-body .side-subnav li:last-child {
21038
20631
  list-style: none;
21039
20632
  font-size: var(--font-size-small);
21040
20633
  }
21041
- @media (width >= 576px) {
20634
+ @media (min-width: 576px) {
21042
20635
  .breadcrumbs ul,
21043
20636
  .breadcrumbs ol {
21044
20637
  font-size: calc(var(--font-size-small) + var(--ratio))
@@ -22011,7 +21604,7 @@ select:focus {
22011
21604
  outline: 2px solid var(--black, #000);
22012
21605
  outline-offset: -2px;
22013
21606
  }
22014
- @media (width <= 767px) {
21607
+ @media (max-width: 767px) {
22015
21608
  .panel .panel-body,
22016
21609
  .panel .card-body,
22017
21610
  .card .panel-body,
@@ -22895,7 +22488,7 @@ blockquote {
22895
22488
  border-color: var(--color-p2, #046b99);
22896
22489
  }
22897
22490
 
22898
- @media (width >= 576px) {
22491
+ @media (min-width: 576px) {
22899
22492
 
22900
22493
  blockquote {
22901
22494
  font-size: calc(var(--font-size-regular) + var(--ratio))
@@ -23642,7 +23235,7 @@ fieldset[disabled] .btn-more {
23642
23235
  filter: alpha(opacity=65);
23643
23236
  }
23644
23237
 
23645
- @media (width <= 767px) {
23238
+ @media (max-width: 767px) {
23646
23239
  [role="group"].btn-group {
23647
23240
  margin-top: 10px;
23648
23241
  display: table;
@@ -23667,7 +23260,7 @@ fieldset[disabled] .btn-more {
23667
23260
  }
23668
23261
  }
23669
23262
 
23670
- @media (width <= 767px) {
23263
+ @media (max-width: 767px) {
23671
23264
  .btn-block-xs {
23672
23265
  display: block !important;
23673
23266
  width: 100% !important;
@@ -23675,7 +23268,7 @@ fieldset[disabled] .btn-more {
23675
23268
  }
23676
23269
  }
23677
23270
 
23678
- @media (width <= 991px) {
23271
+ @media (max-width: 991px) {
23679
23272
  .btn-block-sm {
23680
23273
  display: block !important;
23681
23274
  width: 100% !important;
@@ -23688,7 +23281,7 @@ fieldset[disabled] .btn-more {
23688
23281
  margin-bottom: calc(var(--spacer, 1rem) * 0.5);
23689
23282
  }
23690
23283
 
23691
- @media (width <= 767px) {
23284
+ @media (max-width: 767px) {
23692
23285
 
23693
23286
  .btn-row .btn {
23694
23287
  margin-bottom: calc(var(--spacer, 1rem) * 0.5)
@@ -23888,7 +23481,7 @@ fieldset[disabled] .btn-more {
23888
23481
  /* -----------------------------------------
23889
23482
  Number Counter
23890
23483
  ----------------------------------------- */
23891
- .no-js .number-counter {
23484
+ .number-counter .no-js {
23892
23485
  visibility: visible;
23893
23486
  }
23894
23487
 
@@ -23976,7 +23569,7 @@ fieldset[disabled] .btn-more {
23976
23569
  top: -0.4rem;
23977
23570
  }
23978
23571
 
23979
- @media (width <= 575px) {
23572
+ @media (max-width: 575px) {
23980
23573
  .page-navigation ul.columns-2,
23981
23574
  .page-navigation ul.columns-3 {
23982
23575
  columns: 1;
@@ -24283,14 +23876,14 @@ fieldset[disabled] .btn-more {
24283
23876
  left: -30px;
24284
23877
  }
24285
23878
 
24286
- @media (width >= 576px) {
23879
+ @media (min-width: 576px) {
24287
23880
  .dot-line::before,
24288
23881
  .dot-line::after {
24289
23882
  display: block;
24290
23883
  }
24291
23884
  }
24292
23885
 
24293
- @media (width <= 575px) {
23886
+ @media (max-width: 575px) {
24294
23887
  .progress-text {
24295
23888
  text-align: left;
24296
23889
  position: relative;
@@ -24729,13 +24322,13 @@ fieldset[disabled] .btn-more {
24729
24322
  top: 0.6rem;
24730
24323
  }
24731
24324
 
24732
- @media (width >= 992px) {
24325
+ @media (min-width: 992px) {
24733
24326
  .sidenav-mobile-btn {
24734
24327
  display: none;
24735
24328
  }
24736
24329
  }
24737
24330
 
24738
- @media (width <= 991px) {
24331
+ @media (max-width: 991px) {
24739
24332
  .mobile-sidenav {
24740
24333
  max-height: 0;
24741
24334
  overflow: hidden;
@@ -25201,12 +24794,19 @@ a.sidenav.back::after {
25201
24794
  }
25202
24795
 
25203
24796
  .link-grid::after {
25204
- font-family: CaGov;
25205
- content: "5";
25206
24797
  position: absolute;
25207
- top: 0.8rem;
25208
- right: 0.7rem;
25209
- font-size: 1.6rem;
24798
+ content: "";
24799
+ display: inline-block;
24800
+ text-decoration: none;
24801
+ width: 0.55rem;
24802
+ height: 0.55rem;
24803
+ border-top: 2px solid var(--color-p2, #046b99);
24804
+ border-left: 2px solid var(--color-p2, #046b99);
24805
+ vertical-align: middle;
24806
+ top: 50%;
24807
+ transform: translateY(-50%) rotate(135deg);
24808
+ right: 1.5rem;
24809
+ margin-left: 0.5rem;
25210
24810
  }
25211
24811
 
25212
24812
  .link-before::before {
@@ -25222,6 +24822,10 @@ a.sidenav.back::after {
25222
24822
  .section-overstated .link-grid, .section-standout .link-grid, .section-impact .link-grid, .section-primary .link-grid, .section-inverted .link-grid, .bg-primary .link-grid, .bg-standout .link-grid, .bg-p2 .link-grid, .bg-p3 .link-grid {
25223
24823
  border-color: var(--white, #fff);
25224
24824
  }
24825
+ .section-overstated .link-grid::after, .section-standout .link-grid::after, .section-impact .link-grid::after, .section-primary .link-grid::after, .section-inverted .link-grid::after, .bg-primary .link-grid::after, .bg-standout .link-grid::after, .bg-p2 .link-grid::after, .bg-p3 .link-grid::after {
24826
+ border-top-color: var(--white, #fff);
24827
+ border-left-color: var(--white, #fff);
24828
+ }
25225
24829
 
25226
24830
  .bg-primary .link-grid:hover,
25227
24831
  .bg-primary .link-grid:focus,
@@ -25263,11 +24867,7 @@ a.sidenav.back::after {
25263
24867
  GLOBALS - /src/css/cagov/globals.css
25264
24868
  ----------------------------------------- */
25265
24869
  .ca-gov-logo-svg {
25266
- background: 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>")
25267
- no-repeat;
25268
- aspect-ratio: 9 / 5;
25269
- width: 45px;
25270
- display: inline-block;
24870
+ background: var(--ca-gov-logo);
25271
24871
  }
25272
24872
 
25273
24873
  .overflow-hidden {
@@ -25424,6 +25024,22 @@ a.sidenav.back::after {
25424
25024
  display: block;
25425
25025
  }
25426
25026
 
25027
+ .outline-offset-2:focus {
25028
+ outline-offset: -2px !important;
25029
+ }
25030
+
25031
+ .outline-offset-3:focus {
25032
+ outline-offset: -3px !important;
25033
+ }
25034
+
25035
+ .outline-offset-4:focus {
25036
+ outline-offset: -4px !important;
25037
+ }
25038
+
25039
+ .outline-offset-5:focus {
25040
+ outline-offset: -5px !important;
25041
+ }
25042
+
25427
25043
  .cursor-pointer {
25428
25044
  cursor: pointer;
25429
25045
  }
@@ -26122,7 +25738,7 @@ a.sidenav.back::after {
26122
25738
  border-style: solid !important;
26123
25739
  }
26124
25740
 
26125
- @media (width >= 576px) {
25741
+ @media (min-width: 576px) {
26126
25742
  .brd-sm-0 {
26127
25743
  border: none !important;
26128
25744
  }
@@ -26149,7 +25765,7 @@ a.sidenav.back::after {
26149
25765
  }
26150
25766
  }
26151
25767
 
26152
- @media (width >= 768px) {
25768
+ @media (min-width: 768px) {
26153
25769
  .brd-md-0 {
26154
25770
  border: none !important;
26155
25771
  }
@@ -26176,7 +25792,7 @@ a.sidenav.back::after {
26176
25792
  }
26177
25793
  }
26178
25794
 
26179
- @media (width >= 992px) {
25795
+ @media (min-width: 992px) {
26180
25796
  .brd-lg-0 {
26181
25797
  border: none !important;
26182
25798
  }
@@ -26289,21 +25905,21 @@ a.sidenav.back::after {
26289
25905
  left: 0 !important;
26290
25906
  }
26291
25907
 
26292
- @media (width <= 767px) {
25908
+ @media (max-width: 767px) {
26293
25909
  .top-sm-rel-40pct {
26294
25910
  position: relative;
26295
25911
  top: 40% !important;
26296
25912
  }
26297
25913
  }
26298
25914
 
26299
- @media (width <= 991px) {
25915
+ @media (max-width: 991px) {
26300
25916
  .top-md-rel-40pct {
26301
25917
  position: relative;
26302
25918
  top: 40% !important;
26303
25919
  }
26304
25920
  }
26305
25921
 
26306
- @media (width >= 992px) {
25922
+ @media (min-width: 992px) {
26307
25923
  .top-lg-rel-40pct {
26308
25924
  position: relative;
26309
25925
  top: 40% !important;
@@ -26315,21 +25931,21 @@ a.sidenav.back::after {
26315
25931
  top: 30% !important;
26316
25932
  }
26317
25933
 
26318
- @media (width <= 767px) {
25934
+ @media (max-width: 767px) {
26319
25935
  .top-sm-rel-30pct {
26320
25936
  position: relative;
26321
25937
  top: 30% !important;
26322
25938
  }
26323
25939
  }
26324
25940
 
26325
- @media (width <= 991px) {
25941
+ @media (max-width: 991px) {
26326
25942
  .top-md-rel-30pct {
26327
25943
  position: relative;
26328
25944
  top: 30% !important;
26329
25945
  }
26330
25946
  }
26331
25947
 
26332
- @media (width >= 992px) {
25948
+ @media (min-width: 992px) {
26333
25949
  .top-lg-rel-30pct {
26334
25950
  position: relative;
26335
25951
  top: 30% !important;
@@ -26341,21 +25957,21 @@ a.sidenav.back::after {
26341
25957
  top: 20% !important;
26342
25958
  }
26343
25959
 
26344
- @media (width <= 767px) {
25960
+ @media (max-width: 767px) {
26345
25961
  .top-sm-rel-20pct {
26346
25962
  position: relative;
26347
25963
  top: 20% !important;
26348
25964
  }
26349
25965
  }
26350
25966
 
26351
- @media (width <= 991px) {
25967
+ @media (max-width: 991px) {
26352
25968
  .top-md-rel-20pct {
26353
25969
  position: relative;
26354
25970
  top: 20% !important;
26355
25971
  }
26356
25972
  }
26357
25973
 
26358
- @media (width >= 992px) {
25974
+ @media (min-width: 992px) {
26359
25975
  .top-lg-rel-20pct {
26360
25976
  position: relative;
26361
25977
  top: 20% !important;
@@ -26367,21 +25983,21 @@ a.sidenav.back::after {
26367
25983
  top: 10% !important;
26368
25984
  }
26369
25985
 
26370
- @media (width <= 767px) {
25986
+ @media (max-width: 767px) {
26371
25987
  .top-sm-rel-10pct {
26372
25988
  position: relative;
26373
25989
  top: 10% !important;
26374
25990
  }
26375
25991
  }
26376
25992
 
26377
- @media (width <= 991px) {
25993
+ @media (max-width: 991px) {
26378
25994
  .top-md-rel-10pct {
26379
25995
  position: relative;
26380
25996
  top: 10% !important;
26381
25997
  }
26382
25998
  }
26383
25999
 
26384
- @media (width >= 992px) {
26000
+ @media (min-width: 992px) {
26385
26001
  .top-lg-rel-10pct {
26386
26002
  position: relative;
26387
26003
  top: 10% !important;
@@ -26393,21 +26009,21 @@ a.sidenav.back::after {
26393
26009
  top: 5% !important;
26394
26010
  }
26395
26011
 
26396
- @media (width <= 767px) {
26012
+ @media (max-width: 767px) {
26397
26013
  .top-sm-rel-5pct {
26398
26014
  position: relative;
26399
26015
  top: 5% !important;
26400
26016
  }
26401
26017
  }
26402
26018
 
26403
- @media (width <= 991px) {
26019
+ @media (max-width: 991px) {
26404
26020
  .top-md-rel-5pct {
26405
26021
  position: relative;
26406
26022
  top: 5% !important;
26407
26023
  }
26408
26024
  }
26409
26025
 
26410
- @media (width >= 992px) {
26026
+ @media (min-width: 992px) {
26411
26027
  .top-lg-rel-5pct {
26412
26028
  position: relative;
26413
26029
  top: 5% !important;