@openeuropa/bcl-theme-joinup 0.4020.202509111730 → 0.4068.202509021515

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.
@@ -8192,6 +8192,14 @@ svg {
8192
8192
  border-color: #dadee0;
8193
8193
  }
8194
8194
 
8195
+ .border-top-subtle {
8196
+ border-top: 1px solid tint-color(#253ebe, 80%);
8197
+ }
8198
+
8199
+ .border-bottom-subtle {
8200
+ border-bottom: 1px solid tint-color(#253ebe, 80%);
8201
+ }
8202
+
8195
8203
  .grid-3-9 {
8196
8204
  -ms-grid-columns: 25% 75%;
8197
8205
  grid-template-columns: 25% 75%;
@@ -17394,74 +17402,36 @@ em.placeholder {
17394
17402
  display: inline;
17395
17403
  }
17396
17404
 
17397
- .bcl-header .container {
17398
- position: relative;
17399
- }
17400
-
17401
- .bcl-header__project,
17402
- .bcl-header__navbar {
17403
- background: linear-gradient(90deg, #039 0%, #1b4ac3 100%);
17404
- }
17405
-
17406
- .bcl-header__top-navbar .navbar-collapse {
17407
- -ms-flex-pack: end;
17408
- justify-content: end;
17409
- }
17410
- .bcl-header__top-navbar .navbar-toggler {
17411
- border: none;
17412
- color: #f8f9fa;
17413
- }
17414
- .bcl-header__top-navbar .navbar-toggler-icon {
17415
- background: url("data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2Ij48cmVjdCB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgZmlsbD0ibm9uZSIvPjxjaXJjbGUgY3g9IjEyOCIgY3k9IjY0IiByPSIxNiIvPjxjaXJjbGUgY3g9IjEyOCIgY3k9IjEyOCIgcj0iMTYiLz48Y2lyY2xlIGN4PSIxMjgiIGN5PSIxOTIiIHI9IjE2Ii8+PC9zdmc+");
17416
- }
17417
-
17418
17405
  .bcl-header .nav-link {
17419
17406
  color: #1b4ac3;
17420
17407
  display: -ms-flexbox;
17421
17408
  display: flex;
17422
17409
  -ms-flex-align: center;
17423
17410
  align-items: center;
17424
- padding: 0.5rem;
17425
17411
  }
17426
17412
 
17427
- .bcl-header__navbar .navbar-collapse {
17428
- padding-bottom: 1rem;
17429
- }
17430
- .bcl-header__navbar .navbar-nav .nav-link {
17431
- color: #fafbfc;
17432
- }
17433
- .bcl-header__navbar .navbar-nav .nav-link:focus, .bcl-header__navbar .navbar-nav .nav-link:hover, .bcl-header__navbar .navbar-nav .nav-link.active {
17434
- color: #fff;
17413
+ .bcl-navbar-toggler {
17414
+ background: transparent;
17415
+ border: none;
17416
+ padding: 0.5rem;
17435
17417
  }
17436
- .bcl-header__navbar .navbar-nav .nav-link:focus-visible {
17437
- outline: 2px solid #fff;
17438
- border-radius: 4px;
17439
- outline-offset: 0;
17418
+ .bcl-navbar-toggler .active-icon {
17419
+ display: none;
17440
17420
  }
17441
- .bcl-header__navbar .navbar-toggler {
17442
- position: absolute;
17443
- top: -43px;
17444
- left: 0.75rem;
17445
- border-color: #fff;
17421
+ .bcl-navbar-toggler[aria-expanded=true] {
17422
+ background-color: tint-color(#253ebe, 90%);
17446
17423
  }
17447
- .bcl-header__navbar .navbar-toggler-icon {
17448
- background: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
17424
+ .bcl-navbar-toggler[aria-expanded=true] .active-icon {
17425
+ display: block;
17449
17426
  }
17450
- .bcl-header__navbar input:active,
17451
- .bcl-header__navbar input:focus {
17452
- box-shadow: 0 0 0 0.25rem hsla(210, 2%, 83%, 0.5);
17427
+ .bcl-navbar-toggler[aria-expanded=true] .default-icon {
17428
+ display: none;
17453
17429
  }
17454
17430
 
17455
17431
  .bcl-header--ec,
17456
17432
  .ec__header {
17457
17433
  /* stylelint-disable-next-line no-descending-specificity */
17458
17434
  }
17459
- .bcl-header--ec .bcl-header__project,
17460
- .bcl-header--ec .bcl-header__navbar,
17461
- .ec__header .bcl-header__project,
17462
- .ec__header .bcl-header__navbar {
17463
- background: #004494;
17464
- }
17465
17435
  .bcl-header--ec .nav-link,
17466
17436
  .ec__header .nav-link {
17467
17437
  color: #17458f;
@@ -17472,18 +17442,6 @@ em.placeholder {
17472
17442
  align-items: flex-end;
17473
17443
  }
17474
17444
 
17475
- .bcl-header--neutral .bcl-header__project,
17476
- .bcl-header--neutral .bcl-header__navbar {
17477
- background: #555859;
17478
- }
17479
-
17480
- .bcl-header:not(.bcl-header--neutral) .bcl-header__project {
17481
- padding-top: 1rem;
17482
- }
17483
-
17484
- .bcl-header .navbar-brand img {
17485
- width: 100px;
17486
- }
17487
17445
  .bcl-header .notification {
17488
17446
  position: relative;
17489
17447
  padding-right: 0;
@@ -17499,26 +17457,19 @@ em.placeholder {
17499
17457
  transform: translate(-11px, 5px);
17500
17458
  }
17501
17459
 
17502
- .bcl-header__project .bcl-header__site-name {
17503
- display: inline-block;
17504
- margin-bottom: 0;
17505
- font-size: 1.3rem;
17506
- font-weight: 300;
17507
- color: #fff;
17508
- vertical-align: middle;
17509
- max-width: 80%;
17460
+ .bcl-header__navbar.navbar {
17461
+ padding: 0;
17510
17462
  }
17511
-
17512
- @media only screen and (max-width: 400px) {
17513
- .bcl-header--neutral .bcl-header__project-logo {
17514
- display: none;
17515
- }
17463
+ .bcl-header__navbar.navbar .dropdown-toggle,
17464
+ .bcl-header__navbar.navbar .nav-link {
17465
+ padding: 0.75rem 1rem;
17466
+ border: none;
17467
+ background: transparent;
17516
17468
  }
17517
- @media (max-width: 575.98px) {
17518
- .bcl-header .navbar:first-child .nav-link {
17519
- padding: 0.5rem 0.4rem;
17520
- }
17469
+ .bcl-header__navbar.navbar.collapsing {
17470
+ transition: none;
17521
17471
  }
17472
+
17522
17473
  @media (min-width: 768px) {
17523
17474
  .bcl-header--ec .navbar-brand img,
17524
17475
  .ec__header .navbar-brand img {
@@ -17526,32 +17477,31 @@ em.placeholder {
17526
17477
  }
17527
17478
  }
17528
17479
  @media (max-width: 991.98px) {
17529
- .bcl-header__site-name {
17530
- margin-left: 5rem;
17531
- }
17532
- .bcl-header__top-navbar .navbar-collapse {
17533
- z-index: 1050;
17534
- position: absolute;
17535
- right: 0.75rem;
17536
- top: 100%;
17537
- background: white;
17538
- border: 1px solid #dadee0;
17539
- border-radius: 4px;
17540
- }
17541
- .bcl-header__top-navbar .navbar-collapse .nav {
17542
- -ms-flex-align: start;
17543
- align-items: flex-start;
17544
- -ms-flex-direction: column;
17545
- flex-direction: column;
17546
- min-width: 16rem;
17547
- padding: 1rem;
17480
+ body:has(.bcl-header__navbar #main-navbar.collapsing),
17481
+ body:has(.bcl-header__navbar #main-navbar.show),
17482
+ body:has(.bcl-header__navbar.collapsing),
17483
+ body:has(.bcl-header__navbar.show) {
17484
+ overflow: hidden;
17548
17485
  }
17549
- .bcl-header__top-navbar .navbar-collapse .nav li {
17550
- width: 100%;
17486
+ header:has(.bcl-header__navbar #main-navbar.collapsing),
17487
+ header:has(.bcl-header__navbar #main-navbar.show),
17488
+ header:has(.bcl-header__navbar.collapsing),
17489
+ header:has(.bcl-header__navbar.show) {
17490
+ height: 100vh;
17491
+ display: -ms-flexbox;
17492
+ display: flex;
17493
+ -ms-flex-flow: column;
17494
+ flex-flow: column;
17495
+ overflow: auto;
17496
+ }
17497
+ header:has(.bcl-header__navbar #main-navbar.collapsing) > div:has(.breadcrumb),
17498
+ header:has(.bcl-header__navbar #main-navbar.show) > div:has(.breadcrumb),
17499
+ header:has(.bcl-header__navbar.collapsing) > div:has(.breadcrumb),
17500
+ header:has(.bcl-header__navbar.show) > div:has(.breadcrumb) {
17501
+ display: none;
17551
17502
  }
17552
- .bcl-header__project {
17553
- min-height: 3rem;
17554
- padding-top: 1rem;
17503
+ .bcl-header > .navbar:first-child {
17504
+ box-shadow: var(--bs-box-shadow);
17555
17505
  }
17556
17506
  .bcl-header nav + nav {
17557
17507
  min-height: 3.5rem;
@@ -17559,53 +17509,169 @@ em.placeholder {
17559
17509
  .bcl-header nav + nav .navbar-toggler {
17560
17510
  position: static;
17561
17511
  }
17562
- .bcl-header__navbar .navbar-collapse {
17563
- max-width: 100%;
17512
+ .bcl-header__top-navbar {
17513
+ z-index: 1040;
17564
17514
  }
17565
- .bcl-header__navbar .navbar-collapse .nav-item.dropdown {
17566
- max-width: 100%;
17515
+ .bcl-header__navbar.navbar {
17516
+ background: #fff;
17517
+ padding-top: 0;
17518
+ z-index: 1030;
17519
+ width: 100%;
17520
+ -ms-flex-align: start;
17521
+ align-items: flex-start;
17522
+ }
17523
+ .bcl-header__navbar.navbar .navbar-nav {
17524
+ width: 100%;
17525
+ margin-top: 1rem;
17567
17526
  }
17568
- .bcl-header__navbar .navbar-collapse .nav-item.dropdown a {
17527
+ .bcl-header__navbar.navbar .navbar-nav:has(.bcl-mega-menu__container.show) .nav-item {
17528
+ display: none;
17529
+ }
17530
+ .bcl-header__navbar.navbar .navbar-nav:has(.bcl-mega-menu__container.show) .nav-item:has(.bcl-mega-menu__container.show) {
17531
+ display: block;
17532
+ }
17533
+ .bcl-header__navbar.navbar .navbar-nav .dropdown-toggle,
17534
+ .bcl-header__navbar.navbar .navbar-nav .nav-link {
17535
+ color: #212529;
17536
+ width: 100%;
17537
+ display: -ms-flexbox;
17538
+ display: flex;
17539
+ gap: 1rem;
17540
+ -ms-flex-pack: justify;
17541
+ justify-content: space-between;
17542
+ position: relative;
17543
+ padding: 1rem;
17544
+ border-bottom: 1px solid tint-color(#253ebe, 90%);
17545
+ text-align: left;
17546
+ border-radius: 0;
17569
17547
  white-space: normal;
17570
17548
  }
17571
- .bcl-header__navbar .navbar-collapse .nav-item.dropdown .dropdown-menu {
17572
- max-width: 100%;
17549
+ .bcl-header__navbar.navbar .navbar-nav .dropdown-toggle.active,
17550
+ .bcl-header__navbar.navbar .navbar-nav .nav-link.active {
17551
+ color: #212529;
17552
+ }
17553
+ .bcl-header__navbar.navbar .navbar-nav .dropdown-toggle:focus-visible,
17554
+ .bcl-header__navbar.navbar .navbar-nav .nav-link:focus-visible {
17555
+ outline: 2px solid #143b76;
17556
+ outline-offset: -2px;
17557
+ box-shadow: none;
17558
+ }
17559
+ .bcl-header__navbar.navbar .navbar-nav .dropdown-toggle::after,
17560
+ .bcl-header__navbar.navbar .navbar-nav .nav-link::after {
17561
+ -ms-flex-negative: 0;
17562
+ flex-shrink: 0;
17563
+ }
17564
+ .bcl-header__navbar.navbar .navbar-nav .bcl-mega-menu > .dropdown-toggle:after {
17565
+ background: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2215%22%20viewBox%3D%220%200%2016%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7.57488%2013.25L8.46238%2014.125L15.1374%207.45L8.43738%200.75L7.56238%201.625L12.7276%206.81247H0.5V8.06247H12.7512L7.57488%2013.25Z%22%20fill%3D%22%23212529%22%2F%3E%3C%2Fsvg%3E");
17566
+ -ms-flex-item-align: center;
17567
+ -ms-grid-row-align: center;
17568
+ align-self: center;
17569
+ content: "";
17570
+ border: none;
17571
+ width: 20px;
17572
+ height: 20px;
17573
+ background-size: cover;
17574
+ background-position: center;
17575
+ }
17576
+ .bcl-header__navbar.navbar .navbar-nav .dropdown-item {
17577
+ white-space: normal;
17573
17578
  }
17574
17579
  }
17575
17580
  @media (min-width: 992px) {
17576
- .bcl-header__project.light,
17577
- .bcl-header--ec .bcl-header__project.light,
17578
- .ec__header .bcl-header__project.light {
17579
- background: #fff;
17581
+ .bcl-header__navbar {
17582
+ background: linear-gradient(90deg, #039 0%, #1b4ac3 100%);
17583
+ }
17584
+ .bcl-header__navbar .dropdown-toggle,
17585
+ .bcl-header__navbar .nav-link {
17586
+ color: #fff;
17587
+ }
17588
+ .bcl-header--ec .bcl-header__navbar,
17589
+ .ec__header .bcl-header__navbar {
17590
+ background: #004494;
17591
+ }
17592
+ .bcl-header--neutral .bcl-header__navbar {
17593
+ background: #555859;
17580
17594
  }
17581
17595
  .bcl-header__site-name {
17582
17596
  margin-left: 1.5rem;
17583
17597
  font-weight: 500;
17584
17598
  }
17585
- .bcl-header__project.light .bcl-header__site-name {
17586
- color: #000;
17587
- }
17588
17599
  .bcl-header .navbar-toggler {
17589
17600
  position: relative;
17590
17601
  right: 0;
17591
17602
  bottom: 0;
17592
17603
  }
17593
- .bcl-header .navbar-brand img {
17594
- width: auto;
17595
- }
17596
- .bcl-header__navbar .navbar-collapse {
17597
- padding-bottom: 0;
17598
- }
17599
- .bcl-header__navbar .dropdown-menu {
17600
- z-index: 1050;
17604
+ .bcl-header__navbar .bcl-mega-menu {
17605
+ --bcl-mega-menu-zindex: 1050;
17601
17606
  }
17602
- .bcl-header:not(.bcl-header--neutral) .bcl-header__project {
17603
- padding-bottom: 1rem;
17607
+ .bcl-header__navbar.collapse {
17608
+ display: block;
17604
17609
  }
17605
17610
  .bcl-header--ec .navbar-brand img,
17606
17611
  .ec__header .navbar-brand img {
17607
17612
  width: 285px;
17608
17613
  }
17614
+ .bcl-header__navbar.navbar .dropdown-toggle,
17615
+ .bcl-header__navbar.navbar .nav-link {
17616
+ border-radius: 0;
17617
+ }
17618
+ .bcl-header__navbar.navbar .dropdown-toggle:hover,
17619
+ .bcl-header__navbar.navbar .nav-link:hover {
17620
+ background: tint-color(#253ebe, 90%);
17621
+ color: #212529;
17622
+ }
17623
+ .bcl-header__navbar.navbar .dropdown-toggle:hover:focus-visible,
17624
+ .bcl-header__navbar.navbar .nav-link:hover:focus-visible {
17625
+ outline-color: #143b76;
17626
+ }
17627
+ .bcl-header__navbar.navbar .dropdown-toggle.active, .bcl-header__navbar.navbar .dropdown-toggle.show,
17628
+ .bcl-header__navbar.navbar .nav-link.active,
17629
+ .bcl-header__navbar.navbar .nav-link.show {
17630
+ background: #fff;
17631
+ color: #212529;
17632
+ }
17633
+ .bcl-header__navbar.navbar .dropdown-toggle.active:focus-visible, .bcl-header__navbar.navbar .dropdown-toggle.show:focus-visible,
17634
+ .bcl-header__navbar.navbar .nav-link.active:focus-visible,
17635
+ .bcl-header__navbar.navbar .nav-link.show:focus-visible {
17636
+ outline-color: #143b76;
17637
+ }
17638
+ .bcl-header__navbar.navbar .dropdown-toggle:focus-visible,
17639
+ .bcl-header__navbar.navbar .nav-link:focus-visible {
17640
+ box-shadow: none;
17641
+ border: none;
17642
+ outline: 2px solid #fff;
17643
+ outline-offset: -8px;
17644
+ }
17645
+ .bcl-header__navbar.navbar .dropdown-toggle:after {
17646
+ background-color: #fff;
17647
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0.625 0.725L1.19375 0.1375L4.99375 3.9625L8.80625 0.125L9.375 0.7125L4.99375 5.125L0.625 0.725Z' fill='black'/%3E%3C/svg%3E");
17648
+ -webkit-mask-repeat: no-repeat;
17649
+ -webkit-mask-size: contain;
17650
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0.625 0.725L1.19375 0.1375L4.99375 3.9625L8.80625 0.125L9.375 0.7125L4.99375 5.125L0.625 0.725Z' fill='black'/%3E%3C/svg%3E");
17651
+ mask-repeat: no-repeat;
17652
+ -webkit-mask-position: center;
17653
+ mask-position: center;
17654
+ mask-size: contain;
17655
+ display: inline-block;
17656
+ width: 10px;
17657
+ height: 10px;
17658
+ border: none;
17659
+ margin-top: 4px;
17660
+ }
17661
+ .bcl-header__navbar.navbar .dropdown-toggle:hover:after {
17662
+ background-color: #212529;
17663
+ }
17664
+ .bcl-header__navbar.navbar .dropdown-toggle.active:after {
17665
+ background-color: #143b76;
17666
+ }
17667
+ .bcl-header__navbar.navbar .dropdown-toggle.show:after {
17668
+ background-color: #143b76;
17669
+ -webkit-transform: rotate(180deg);
17670
+ transform: rotate(180deg);
17671
+ }
17672
+ .bcl-header__navbar.navbar .dropdown-toggle.no-chevron:after {
17673
+ display: none;
17674
+ }
17609
17675
  }
17610
17676
  .bcl-language-list-modal .btn-close {
17611
17677
  opacity: 1;
@@ -17802,6 +17868,17 @@ dd + dd {
17802
17868
  color: #6d7173;
17803
17869
  }
17804
17870
 
17871
+ .icon--mobile-m-desktop-xs {
17872
+ width: 1.5rem;
17873
+ height: 1.5rem;
17874
+ }
17875
+ @media (min-width: 1200px) {
17876
+ .icon--mobile-m-desktop-xs {
17877
+ width: 1rem;
17878
+ height: 1rem;
17879
+ }
17880
+ }
17881
+
17805
17882
  .btn {
17806
17883
  display: -ms-inline-flexbox;
17807
17884
  display: inline-flex;
@@ -19538,19 +19615,6 @@ select.multi-select {
19538
19615
  background-color: var(--ss-highlight-color);
19539
19616
  }
19540
19617
 
19541
- .ss-sr-only {
19542
- position: absolute;
19543
- width: 1px;
19544
- height: 1px;
19545
- margin: -1px;
19546
- padding: 0;
19547
- border: 0;
19548
- clip: rect(0, 0, 0, 0);
19549
- -webkit-clip-path: inset(50%);
19550
- clip-path: inset(50%);
19551
- overflow: hidden;
19552
- }
19553
-
19554
19618
  .ss-main.multi-select.is-invalid,
19555
19619
  .was-validated .multi-select:invalid + .ss-main.multi-select {
19556
19620
  border-color: #eb3434;
@@ -19569,6 +19633,398 @@ select.multi-select {
19569
19633
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM12.0303 4.96967C11.7374 4.67678 11.2626 4.67678 10.9697 4.96967C10.9626 4.97674 10.9559 4.98424 10.9498 4.9921L7.4774 9.41674L5.38388 7.32322C5.09098 7.03033 4.61611 7.03033 4.32322 7.32322C4.03032 7.61612 4.03032 8.09099 4.32322 8.38388L6.96966 11.0303C7.26256 11.3232 7.73743 11.3232 8.03032 11.0303C8.03685 11.0238 8.043 11.0169 8.04876 11.0097L12.041 6.01947C12.3232 5.72582 12.3196 5.25897 12.0303 4.96967Z' fill='%2328A745'/%3E%3C/svg%3E%0A");
19570
19634
  }
19571
19635
 
19636
+ /* stylelint-disable no-descending-specificity, declaration-no-important */
19637
+ /* -------------------------------------
19638
+ Design tokens & helpers
19639
+ -------------------------------------- */
19640
+ /* Helpers */
19641
+ /* -------------------------------------
19642
+ Component
19643
+ -------------------------------------- */
19644
+ .bcl-mega-menu {
19645
+ --bcl-mega-menu-zindex: 40;
19646
+ }
19647
+
19648
+ @media (min-width: 992px) {
19649
+ .nav-item:has(> .bcl-mega-menu) {
19650
+ position: static;
19651
+ }
19652
+ }
19653
+
19654
+ .bcl-mega-menu__container :where(a) {
19655
+ text-decoration: none;
19656
+ }
19657
+ .bcl-mega-menu__container :where(a):hover {
19658
+ text-decoration: underline;
19659
+ }
19660
+ .bcl-mega-menu__container :where(a, button):focus-visible {
19661
+ outline: 2px solid #143b76;
19662
+ outline-offset: -2px;
19663
+ }
19664
+
19665
+ @media (min-width: 992px) {
19666
+ body:has(.bcl-mega-menu > [aria-expanded=true]) {
19667
+ overflow-y: hidden;
19668
+ }
19669
+ }
19670
+ @media (min-width: 992px) {
19671
+ .bcl-mega-menu:has(> [aria-expanded=true])::after {
19672
+ position: absolute;
19673
+ inset-inline: 0;
19674
+ background: #fff;
19675
+ opacity: 0.5;
19676
+ content: "";
19677
+ z-index: calc(var(--bcl-mega-menu-zindex) - 10);
19678
+ block-size: 300vw;
19679
+ }
19680
+ }
19681
+ .bcl-mega-menu__container[class] {
19682
+ display: none;
19683
+ z-index: var(--bcl-mega-menu-zindex);
19684
+ position: absolute;
19685
+ inset-block-start: 0;
19686
+ inset-inline-start: 0;
19687
+ inline-size: 100%;
19688
+ -webkit-margin-before: 0;
19689
+ margin-block-start: 0;
19690
+ padding: 0;
19691
+ border: 0;
19692
+ border-radius: 0;
19693
+ }
19694
+ .bcl-mega-menu > [aria-expanded=true] + .bcl-mega-menu__container[class] {
19695
+ display: block;
19696
+ }
19697
+ @media (min-width: 992px) {
19698
+ .bcl-mega-menu > [aria-expanded=true] + .bcl-mega-menu__container[class] {
19699
+ display: -ms-flexbox;
19700
+ display: flex;
19701
+ }
19702
+ }
19703
+ @media (prefers-reduced-motion: no-preference) {
19704
+ .bcl-mega-menu__container[class] {
19705
+ transition: opacity 0.15s ease, -webkit-transform 0.15s ease;
19706
+ transition: opacity 0.15s ease, transform 0.15s ease;
19707
+ transition: opacity 0.15s ease, transform 0.15s ease, -webkit-transform 0.15s ease;
19708
+ }
19709
+ .bcl-mega-menu > [aria-expanded=true] + .bcl-mega-menu__container[class] {
19710
+ opacity: 1;
19711
+ -webkit-transform: none;
19712
+ transform: none;
19713
+ }
19714
+ .bcl-mega-menu > [aria-expanded=false] + .bcl-mega-menu__container[class] {
19715
+ opacity: 0;
19716
+ -webkit-transform: translateY(-4px);
19717
+ transform: translateY(-4px);
19718
+ pointer-events: none;
19719
+ }
19720
+ }
19721
+ @media (min-width: 992px) {
19722
+ .bcl-mega-menu__container[class] {
19723
+ inset-block-start: 100%;
19724
+ padding-block: 0.75rem;
19725
+ border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
19726
+ }
19727
+ }
19728
+
19729
+ @media (min-width: 992px) {
19730
+ .bcl-mega-menu__container .shadow-container {
19731
+ position: relative;
19732
+ }
19733
+ .bcl-mega-menu__container .shadow-container .shadow-bg {
19734
+ position: absolute;
19735
+ inset-inline-start: 50%;
19736
+ inset-block-end: 0;
19737
+ inline-size: 100vw;
19738
+ block-size: 8px;
19739
+ -webkit-transform: translateX(-50%);
19740
+ transform: translateX(-50%);
19741
+ box-shadow: 0 4px 5px 0 rgba(224, 229, 245, 0.5);
19742
+ }
19743
+ }
19744
+ @media (min-width: 1200px) {
19745
+ .bcl-mega-menu__container .shadow-container {
19746
+ block-size: 100%;
19747
+ position: absolute;
19748
+ inset-inline-end: 0;
19749
+ inset-block-start: 0;
19750
+ }
19751
+ .bcl-mega-menu__container .shadow-container .shadow-bg {
19752
+ inset-inline-start: auto;
19753
+ inset-inline-end: 0;
19754
+ block-size: 100%;
19755
+ inline-size: 10px;
19756
+ -webkit-transform: none;
19757
+ transform: none;
19758
+ box-shadow: 4px 3px 4px 0 rgba(224, 229, 245, 0.5);
19759
+ }
19760
+ }
19761
+
19762
+ .bcl-mega-menu__back-button-block {
19763
+ position: relative;
19764
+ padding: 20px 0.25rem 0;
19765
+ }
19766
+ .bcl-mega-menu__back-button-block > .btn-link {
19767
+ text-decoration: none;
19768
+ }
19769
+ .bcl-mega-menu__back-button-block > .btn-link:hover {
19770
+ text-decoration: underline;
19771
+ }
19772
+
19773
+ .bcl-mega-menu__info > .content-block {
19774
+ padding: 1rem;
19775
+ background: tint-color(#253ebe, 90%);
19776
+ }
19777
+ @media (min-width: 992px) {
19778
+ .bcl-mega-menu__info > .content-block {
19779
+ -webkit-margin-end: 0;
19780
+ -moz-margin-end: 0;
19781
+ margin-inline-end: 0;
19782
+ background: #fff;
19783
+ -webkit-padding-end: 1.5rem;
19784
+ -moz-padding-end: 1.5rem;
19785
+ padding-inline-end: 1.5rem;
19786
+ max-block-size: 288px;
19787
+ overflow-y: auto;
19788
+ }
19789
+ }
19790
+ .bcl-mega-menu__info > .content-block > .content-link {
19791
+ text-decoration: none;
19792
+ }
19793
+ .bcl-mega-menu__info > .content-block > .content-link:hover {
19794
+ text-decoration: underline;
19795
+ }
19796
+
19797
+ ul.bcl-mega-menu__items {
19798
+ list-style: none;
19799
+ margin: 0;
19800
+ -webkit-padding-start: 0;
19801
+ -moz-padding-start: 0;
19802
+ padding-inline-start: 0;
19803
+ }
19804
+ @media (min-width: 992px) {
19805
+ ul.bcl-mega-menu__items {
19806
+ block-size: 288px;
19807
+ overflow-y: auto;
19808
+ }
19809
+ }
19810
+ @media (max-width: 991.98px) {
19811
+ ul.bcl-mega-menu__items {
19812
+ margin: 1rem 0 0;
19813
+ }
19814
+ }
19815
+ @media (max-width: 991.98px) {
19816
+ ul.bcl-mega-menu__items > li:not(:first-child) > * {
19817
+ border-top: 1px solid tint-color(#253ebe, 90%);
19818
+ }
19819
+ }
19820
+ ul.bcl-mega-menu__items > li > span,
19821
+ ul.bcl-mega-menu__items > li > a,
19822
+ ul.bcl-mega-menu__items > li > button {
19823
+ padding: 0.75rem 1rem;
19824
+ display: -ms-flexbox;
19825
+ display: flex;
19826
+ gap: 1rem;
19827
+ -ms-flex-pack: justify;
19828
+ justify-content: space-between;
19829
+ }
19830
+ ul.bcl-mega-menu__items > li > span > svg,
19831
+ ul.bcl-mega-menu__items > li > a > svg,
19832
+ ul.bcl-mega-menu__items > li > button > svg {
19833
+ -ms-flex-negative: 0;
19834
+ flex-shrink: 0;
19835
+ -ms-flex-item-align: center;
19836
+ -ms-grid-row-align: center;
19837
+ align-self: center;
19838
+ }
19839
+ ul.bcl-mega-menu__items > li > a {
19840
+ color: #1073de;
19841
+ text-decoration: none;
19842
+ }
19843
+ ul.bcl-mega-menu__items > li > a:hover {
19844
+ text-decoration: underline;
19845
+ }
19846
+ ul.bcl-mega-menu__items > li > a:hover,
19847
+ ul.bcl-mega-menu__items > li > button:hover {
19848
+ background: tint-color(#253ebe, 90%);
19849
+ }
19850
+ ul.bcl-mega-menu__items > li > span,
19851
+ ul.bcl-mega-menu__items > li > button {
19852
+ color: #212529;
19853
+ }
19854
+ ul.bcl-mega-menu__items > li > button {
19855
+ width: 100%;
19856
+ border: none;
19857
+ border-radius: 0;
19858
+ text-align: inherit;
19859
+ background: none;
19860
+ white-space: normal;
19861
+ }
19862
+ ul.bcl-mega-menu__items > li > button::after {
19863
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
19864
+ -ms-flex-negative: 0;
19865
+ flex-shrink: 0;
19866
+ -ms-flex-item-align: center;
19867
+ -ms-grid-row-align: center;
19868
+ align-self: center;
19869
+ content: "";
19870
+ height: 1em;
19871
+ width: 1em;
19872
+ }
19873
+ ul.bcl-mega-menu__items > li > button[aria-expanded=true] {
19874
+ background: tint-color(#253ebe, 90%);
19875
+ }
19876
+ @media (min-width: 992px) {
19877
+ ul.bcl-mega-menu__items > li > button[aria-expanded=true] {
19878
+ position: relative;
19879
+ }
19880
+ ul.bcl-mega-menu__items > li > button[aria-expanded=true]::before {
19881
+ content: "";
19882
+ position: absolute;
19883
+ width: 4px;
19884
+ top: 0;
19885
+ bottom: 0;
19886
+ left: 0;
19887
+ background-color: #143b76;
19888
+ }
19889
+ }
19890
+ ul.bcl-mega-menu__items > li:has(> a.see-all-button) {
19891
+ position: -webkit-sticky;
19892
+ position: sticky;
19893
+ inset-block-start: 100%;
19894
+ }
19895
+ ul.bcl-mega-menu__items > li > a.see-all-button {
19896
+ border-top: none;
19897
+ }
19898
+ ul.bcl-mega-menu__items > li > a.see-all-button:after {
19899
+ background: #b9c5e9;
19900
+ content: "";
19901
+ block-size: 1px;
19902
+ inset-inline-start: 0;
19903
+ position: absolute;
19904
+ inset-block-start: 0;
19905
+ inset-inline: 1rem;
19906
+ }
19907
+ ul.bcl-mega-menu__items > li > a.see-all-button > svg {
19908
+ inline-size: 0.8rem;
19909
+ }
19910
+ ul.bcl-mega-menu__items > li > a.see-all-button > span {
19911
+ text-overflow: ellipsis;
19912
+ overflow: hidden;
19913
+ display: block;
19914
+ white-space: nowrap;
19915
+ }
19916
+
19917
+ @media (min-width: 992px) {
19918
+ .bcl-mega-menu__menu {
19919
+ position: relative;
19920
+ padding-right: 0;
19921
+ }
19922
+ }
19923
+
19924
+ .bcl-mega-menu__submenu {
19925
+ position: absolute;
19926
+ background: white;
19927
+ display: -ms-flexbox;
19928
+ display: flex;
19929
+ -ms-flex-direction: column;
19930
+ flex-direction: column;
19931
+ }
19932
+ @media (max-width: 991.98px) {
19933
+ .bcl-mega-menu__submenu {
19934
+ inset: 0 0 auto;
19935
+ min-height: 100%;
19936
+ }
19937
+ }
19938
+ @media (min-width: 992px) {
19939
+ .bcl-mega-menu__submenu {
19940
+ block-size: 100%;
19941
+ inset: 0 0 0 100%;
19942
+ inline-size: 100%;
19943
+ }
19944
+ }
19945
+ @media (max-width: 991.98px) {
19946
+ .bcl-mega-menu__submenu:before {
19947
+ position: absolute;
19948
+ content: "";
19949
+ left: 50%;
19950
+ margin-left: -50vw;
19951
+ width: 100vw;
19952
+ top: 0;
19953
+ height: 100%;
19954
+ background: white;
19955
+ z-index: -1;
19956
+ }
19957
+ }
19958
+ @media (min-width: 992px) {
19959
+ .bcl-mega-menu__submenu {
19960
+ background: tint-color(#253ebe, 90%);
19961
+ }
19962
+ }
19963
+ .bcl-mega-menu__submenu > .__header > .__label {
19964
+ padding: 1rem 1rem;
19965
+ margin: 0;
19966
+ color: #212529;
19967
+ background: tint-color(#253ebe, 90%);
19968
+ display: block;
19969
+ font-size: 20px;
19970
+ }
19971
+ @media (min-width: 992px) {
19972
+ .bcl-mega-menu__submenu > .__header > .__label {
19973
+ display: none;
19974
+ }
19975
+ }
19976
+
19977
+ @media (min-width: 992px) {
19978
+ .bcl-mega-menu__second-submenu > .tab-content > .tab-pane {
19979
+ background: tint-color(#253ebe, 90%);
19980
+ }
19981
+ }
19982
+ @media (max-width: 991.98px) {
19983
+ .bcl-mega-menu__container:has(.bcl-mega-menu__second-submenu > .tab-content > .tab-pane.active) .bcl-mega-menu__info,
19984
+ .bcl-mega-menu__container:has(.bcl-mega-menu__second-submenu > .tab-content > .tab-pane.active) .bcl-mega-menu__first-submenu {
19985
+ display: none;
19986
+ }
19987
+ }
19988
+ .bcl-mega-menu__second-submenu > .tab-content > .tab-pane > .panel-title {
19989
+ padding: 1rem 1rem;
19990
+ margin: 0;
19991
+ color: #212529;
19992
+ background: tint-color(#253ebe, 90%);
19993
+ display: block;
19994
+ font-size: 20px;
19995
+ }
19996
+ @media (min-width: 992px) {
19997
+ .bcl-mega-menu__second-submenu > .tab-content > .tab-pane > .panel-title {
19998
+ display: none;
19999
+ }
20000
+ }
20001
+ @media (min-width: 1200px) {
20002
+ .bcl-mega-menu__second-submenu > .tab-content > .tab-pane > ul > li > * {
20003
+ margin: 0 0.75rem;
20004
+ }
20005
+ }
20006
+
20007
+ @media (max-width: 991.98px) {
20008
+ .bcl-mega-menu__submenu > .__header,
20009
+ .bcl-mega-menu .content-block,
20010
+ .bcl-mega-menu__back-button-block {
20011
+ position: relative;
20012
+ }
20013
+ .bcl-mega-menu__submenu > .__header::before,
20014
+ .bcl-mega-menu .content-block::before,
20015
+ .bcl-mega-menu__back-button-block::before {
20016
+ position: absolute;
20017
+ inset-inline-start: 50%;
20018
+ content: "";
20019
+ background: tint-color(#253ebe, 90%);
20020
+ inline-size: 100vw;
20021
+ block-size: 100%;
20022
+ inset-block-start: 0;
20023
+ z-index: -1;
20024
+ -webkit-transform: translateX(-50%);
20025
+ transform: translateX(-50%);
20026
+ }
20027
+ }
19572
20028
  @media (max-width: 767.98px) {
19573
20029
  .breadcrumb-item + .breadcrumb-item {
19574
20030
  padding-left: 0;