@openeuropa/bcl-theme-ucpkn 1.10.8 → 1.10.9

package/css/oe-bcl-ucpkn.css

@@ -17283,6 +17283,9 @@ em.placeholder {
       align-items: flex-end;
 }
 
+.bcl-header {
+  --oel-mega-menu-offset-top: 0px;
+}
 .bcl-header .notification {
   position: relative;
   padding-right: 0;
@@ -17328,12 +17331,11 @@ em.placeholder {
   header:has(.bcl-header__navbar #main-navbar.show),
   header:has(.bcl-header__navbar.collapsing),
   header:has(.bcl-header__navbar.show) {
-    height: 100vh;
+    height: calc(100vh - var(--oel-mega-menu-offset-top, 0px));
     display: -ms-flexbox;
     display: flex;
     -ms-flex-flow: column;
         flex-flow: column;
-    overflow: auto;
   }
   header:has(.bcl-header__navbar #main-navbar.collapsing) > div:has(.breadcrumb),
   header:has(.bcl-header__navbar #main-navbar.show) > div:has(.breadcrumb),
@@ -17360,6 +17362,7 @@ em.placeholder {
     width: 100%;
     -ms-flex-align: start;
         align-items: flex-start;
+    overflow: auto;
   }
   .bcl-header__navbar.navbar .navbar-nav {
     width: 100%;
@@ -17751,6 +17754,10 @@ dd + dd {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
+.bcl-search-form.submittable .bcl-search-form__submit:focus-visible {
+  outline-offset: 2px;
+  outline-color: #221684;
+}
 .bcl-search-form.submittable .bcl-search-form__group {
   display: -ms-flexbox;
   display: flex;
@@ -17865,12 +17872,53 @@ dd + dd {
   padding-bottom: 0.5rem;
   padding-left: 1rem;
   font-size: 1.25rem;
+  border-color: #6c757d;
 }
 .form-select:focus-visible {
+  border-color: #6c757d;
+  box-shadow: none;
   outline: 2px solid #221684;
   box-shadow: none;
   border-radius: 4px;
-  outline-offset: -1px;
+  outline-offset: 2px;
+}
+.form-select:focus-visible.is-valid {
+  outline-color: #3c8f38;
+}
+.form-select:focus-visible.is-valid:focus {
+  box-shadow: none;
+  border-color: #6c757d;
+}
+.form-select:focus-visible.is-invalid {
+  outline-color: #b8282a;
+}
+.form-select:focus-visible.is-invalid:focus {
+  box-shadow: none;
+  border-color: #6c757d;
+}
+.form-select:focus {
+  box-shadow: none;
+  border-color: #6c757d;
+}
+.form-select.is-valid:focus, .form-select.is-invalid:focus {
+  box-shadow: none;
+}
+
+.form-check-input {
+  border-color: #221684;
+}
+.form-check-input:focus-visible[type=radio] {
+  border-radius: 50%;
+}
+.form-check-input:focus {
+  border-color: #221684;
+  box-shadow: none;
+}
+.form-check-input:focus-visible {
+  outline: 2px solid #221684;
+  box-shadow: none;
+  border-radius: 4px;
+  outline-offset: 1px;
 }
 
 .form-control {
@@ -17878,6 +17926,7 @@ dd + dd {
   padding: 0.5rem 1rem;
   font-size: 1.25rem;
   border-radius: 0.3rem;
+  border-color: #6c757d;
 }
 .form-control::-webkit-file-upload-button {
   padding: 0.5rem 1rem;
@@ -17887,11 +17936,31 @@ dd + dd {
   padding: 0.5rem 1rem;
   margin: -0.5rem 1rem -0.5rem -1rem;
 }
-.form-control:focus-visible {
+.form-control:focus:focus-visible {
+  border-color: #6c757d;
   outline: 2px solid #221684;
   box-shadow: none;
   border-radius: 4px;
-  outline-offset: -1px;
+  outline-offset: 2px;
+}
+.form-control.is-valid:focus, .form-control.is-invalid:focus {
+  box-shadow: none;
+}
+.form-control.is-valid:focus:focus-visible {
+  transition: none;
+  border-color: #6c757d;
+  outline: 2px solid #3c8f38;
+  box-shadow: none;
+  border-radius: 4px;
+  outline-offset: 2px;
+}
+.form-control.is-invalid:focus:focus-visible {
+  transition: none;
+  border-color: #6c757d;
+  outline: 2px solid #b8282a;
+  box-shadow: none;
+  border-radius: 4px;
+  outline-offset: 2px;
 }
 
 .form-check:not(.form-switch) {
@@ -17906,19 +17975,6 @@ dd + dd {
   margin-top: 0.15rem;
 }
 
-.form-check-input:focus-visible {
-  outline: 4px solid #221684;
-  box-shadow: none;
-  border-radius: 4px;
-  outline-offset: 0;
-}
-.form-check-input:focus-visible[type=radio] {
-  border-radius: 50%;
-}
-.form-check-input:checked:focus-visible {
-  border-color: #fff;
-}
-
 @media (min-width: 768px) {
   .form-check:not(.form-switch) {
     padding-left: 1.5rem;
@@ -17952,23 +18008,17 @@ dd + dd {
 }
 textarea.form-control.is-invalid,
 .form-control.is-invalid {
-  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 8ZM8 4C7.46459 4 7.04623 4.46229 7.0995 4.99504L7.45025 8.50248C7.47849 8.78492 7.71616 9 8 9C8.28384 9 8.52151 8.78492 8.54975 8.50248L8.9005 4.99504C8.95377 4.46228 8.53541 4 8 4ZM8.00154 10C7.44926 10 7.00154 10.4477 7.00154 11C7.00154 11.5523 7.44926 12 8.00154 12C8.55383 12 9.00154 11.5523 9.00154 11C9.00154 10.4477 8.55383 10 8.00154 10Z' fill='%23D72E3D'/%3E%3C/svg%3E%0A");
+  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 8ZM8 4C7.46459 4 7.04623 4.46229 7.0995 4.99504L7.45025 8.50248C7.47849 8.78492 7.71616 9 8 9C8.28384 9 8.52151 8.78492 8.54975 8.50248L8.9005 4.99504C8.95377 4.46228 8.53541 4 8 4ZM8.00154 10C7.44926 10 7.00154 10.4477 7.00154 11C7.00154 11.5523 7.44926 12 8.00154 12C8.55383 12 9.00154 11.5523 9.00154 11C9.00154 10.4477 8.55383 10 8.00154 10Z' fill='%23A51F2C'/%3E%3C/svg%3E%0A");
 }
 textarea.form-control.is-valid,
 .form-control.is-valid {
   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");
 }
 
-.form-select:not([multiple]):not([size]):focus-visible {
-  outline: 2px solid #221684;
-  box-shadow: none;
-  border-radius: 4px;
-  outline-offset: -1px;
+select.form-select:not([multiple]):not([size]).is-invalid {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"), 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 8ZM8 4C7.46459 4 7.04623 4.46229 7.0995 4.99504L7.45025 8.50248C7.47849 8.78492 7.71616 9 8 9C8.28384 9 8.52151 8.78492 8.54975 8.50248L8.9005 4.99504C8.95377 4.46228 8.53541 4 8 4ZM8.00154 10C7.44926 10 7.00154 10.4477 7.00154 11C7.00154 11.5523 7.44926 12 8.00154 12C8.55383 12 9.00154 11.5523 9.00154 11C9.00154 10.4477 8.55383 10 8.00154 10Z' fill='%23A51F2C'/%3E%3C/svg%3E%0A");
 }
-.form-select:not([multiple]):not([size]).is-invalid {
-  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"), 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 8ZM8 4C7.46459 4 7.04623 4.46229 7.0995 4.99504L7.45025 8.50248C7.47849 8.78492 7.71616 9 8 9C8.28384 9 8.52151 8.78492 8.54975 8.50248L8.9005 4.99504C8.95377 4.46228 8.53541 4 8 4ZM8.00154 10C7.44926 10 7.00154 10.4477 7.00154 11C7.00154 11.5523 7.44926 12 8.00154 12C8.55383 12 9.00154 11.5523 9.00154 11C9.00154 10.4477 8.55383 10 8.00154 10Z' fill='%23D72E3D'/%3E%3C/svg%3E%0A");
-}
-.form-select:not([multiple]):not([size]).is-valid {
+select.form-select:not([multiple]):not([size]).is-valid {
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"), 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");
 }
 
@@ -18860,7 +18910,7 @@ select.multi-select {
   --ss-font-color: #4d4d4d;
   --ss-font-placeholder-color: #212529;
   --ss-disabled-color: #dcdee2;
-  --ss-border-color: #dcdee2;
+  --ss-border-color: #6c757d;
   --ss-highlight-color: #fffb8c;
   --ss-success-color: #00b755;
   --ss-error-color: #dc3545;
@@ -18950,8 +19000,11 @@ select.multi-select {
   overflow: hidden;
   min-height: 38px;
 }
-.ss-main.ss-2:focus {
-  box-shadow: 0 0 5px var(--ss-focus-color);
+.ss-main.ss-2:focus-visible {
+  outline: 2px solid #221684;
+  box-shadow: none;
+  border-radius: 4px;
+  outline-offset: 2px;
 }
 .ss-main.ss-2.form-select {
   background: none;
@@ -19234,7 +19287,10 @@ select.multi-select {
   vertical-align: middle;
 }
 .ss-content.ss-content-2 .ss-search input:focus {
-  box-shadow: 0 0 5px var(--ss-focus-color);
+  outline: 2px solid #221684;
+  box-shadow: none;
+  border-radius: 4px;
+  outline-offset: 2px;
 }
 .ss-content.ss-content-2 .ss-search .ss-addable {
   display: -ms-inline-flexbox;
@@ -19426,23 +19482,35 @@ select.multi-select {
   background-color: var(--ss-highlight-color);
 }
 
-.ss-main.multi-select.is-invalid,
-.was-validated .multi-select:invalid + .ss-main.multi-select {
+.form-select.ss-main.multi-select.is-invalid,
+.was-validated .multi-select:invalid + .form-select.ss-main.multi-select {
   border-color: #b8282a;
-  background-position: right 1.5rem center;
+  background-position: right 2.5rem center;
   background-repeat: no-repeat;
+  padding-right: 0.5rem;
   background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
-  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 8ZM8 4C7.46459 4 7.04623 4.46229 7.0995 4.99504L7.45025 8.50248C7.47849 8.78492 7.71616 9 8 9C8.28384 9 8.52151 8.78492 8.54975 8.50248L8.9005 4.99504C8.95377 4.46228 8.53541 4 8 4ZM8.00154 10C7.44926 10 7.00154 10.4477 7.00154 11C7.00154 11.5523 7.44926 12 8.00154 12C8.55383 12 9.00154 11.5523 9.00154 11C9.00154 10.4477 8.55383 10 8.00154 10Z' fill='%23D72E3D'/%3E%3C/svg%3E%0A");
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23a51f2c' d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4m.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2'/%3E%3C/svg%3E");
+}
+.form-select.ss-main.multi-select.is-invalid:focus-visible,
+.was-validated .multi-select:invalid + .form-select.ss-main.multi-select:focus-visible {
+  border-color: #6c757d;
+  outline-color: #b8282a;
 }
 
-.ss-main.multi-select.is-valid,
-.was-validated .multi-select:valid + .ss-main.multi-select {
+.form-select.ss-main.multi-select.is-valid,
+.was-validated .multi-select:valid + .form-select.ss-main.multi-select {
   border-color: #3c8f38;
-  background-position: right 1.5rem center;
+  background-position: right 2.5rem center;
   background-repeat: no-repeat;
+  padding-right: 0.5rem;
   background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
   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");
 }
+.form-select.ss-main.multi-select.is-valid:focus-visible,
+.was-validated .multi-select:valid + .form-select.ss-main.multi-select:focus-visible {
+  border-color: #6c757d;
+  outline-color: #3c8f38;
+}
 
 .ss-sr-only {
   position: absolute;
@@ -19715,32 +19783,6 @@ ul.bcl-mega-menu__items > li > button[aria-expanded=true] {
     background-color: #221684;
   }
 }
-ul.bcl-mega-menu__items > li:has(> a.see-all-button) {
-  position: -webkit-sticky;
-  position: sticky;
-  inset-block-start: 100%;
-}
-ul.bcl-mega-menu__items > li > a.see-all-button {
-  border-top: none;
-}
-ul.bcl-mega-menu__items > li > a.see-all-button:after {
-  background: #b9c5e9;
-  content: "";
-  block-size: 1px;
-  inset-inline-start: 0;
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline: 1rem;
-}
-ul.bcl-mega-menu__items > li > a.see-all-button > svg {
-  inline-size: 0.8rem;
-}
-ul.bcl-mega-menu__items > li > a.see-all-button > span {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  display: block;
-  white-space: nowrap;
-}
 
 @media (min-width: 992px) {
   .bcl-mega-menu__menu {
@@ -19748,6 +19790,15 @@ ul.bcl-mega-menu__items > li > a.see-all-button > span {
     padding-right: 0;
   }
 }
+@media (max-width: 991.98px) {
+  .bcl-mega-menu__menu > .bcl-mega-menu__items:has(.bcl-mega-menu__submenu:not([hidden])) > .__leaf,
+  .bcl-mega-menu__menu > .bcl-mega-menu__items:has(.bcl-mega-menu__submenu:not([hidden])) > .__parent {
+    display: none;
+  }
+  .bcl-mega-menu__menu > .bcl-mega-menu__items > .__parent:has(.bcl-mega-menu__submenu:not([hidden])) {
+    display: block;
+  }
+}
 
 .bcl-mega-menu__submenu {
   position: absolute;
@@ -19805,36 +19856,52 @@ ul.bcl-mega-menu__items > li > a.see-all-button > span {
     display: none;
   }
 }
-
 @media (min-width: 992px) {
-  .bcl-mega-menu__second-submenu > .tab-content > .tab-pane {
-    background: tint-color(#253ebe, 90%);
+  .bcl-mega-menu__submenu > .bcl-mega-menu__items {
+    -ms-flex: 1 1 0px;
+        flex: 1 1 0;
+    overflow-y: auto;
   }
-}
-@media (max-width: 991.98px) {
-  .bcl-mega-menu__container:has(.bcl-mega-menu__second-submenu > .tab-content > .tab-pane.active) .bcl-mega-menu__info,
-  .bcl-mega-menu__container:has(.bcl-mega-menu__second-submenu > .tab-content > .tab-pane.active) .bcl-mega-menu__first-submenu {
-    display: none;
+  .bcl-mega-menu__submenu > .bcl-mega-menu__items > li > :is(span, a, button) {
+    padding: 0.75rem 1.75rem;
   }
 }
-.bcl-mega-menu__second-submenu > .tab-content > .tab-pane > .panel-title {
-  padding: 1rem 1rem;
-  margin: 0;
-  color: #2e3338;
-  background: tint-color(#253ebe, 90%);
-  display: block;
-  font-size: 20px;
+.bcl-mega-menu__submenu > .__see_all {
+  border-top: 1px solid #b9c5e9;
 }
 @media (min-width: 992px) {
-  .bcl-mega-menu__second-submenu > .tab-content > .tab-pane > .panel-title {
-    display: none;
+  .bcl-mega-menu__submenu > .__see_all {
+    border-top: 1px solid tint-color(#253ebe, 80%);
+    margin: 0 1.75rem;
   }
 }
-@media (min-width: 1200px) {
-  .bcl-mega-menu__second-submenu > .tab-content > .tab-pane > ul > li > * {
-    margin: 0 0.75rem;
+.bcl-mega-menu__submenu > .__see_all > .see-all-button {
+  padding: 0.75rem 1rem;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  color: #221684;
+}
+@media (min-width: 992px) {
+  .bcl-mega-menu__submenu > .__see_all > .see-all-button {
+    padding: 0.75rem 1.75rem;
+    margin: 0 -1.75rem;
   }
 }
+.bcl-mega-menu__submenu > .__see_all > .see-all-button:hover {
+  background: tint-color(#253ebe, 90%);
+}
+.bcl-mega-menu__submenu > .__see_all > .see-all-button > svg {
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+}
+.bcl-mega-menu__submenu > .__see_all > .see-all-button > span {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: block;
+  white-space: nowrap;
+}
 
 @media (max-width: 991.98px) {
   .bcl-mega-menu__submenu > .__header,
@@ -21103,6 +21170,10 @@ Due to the split circle of progress-left and progress right, we must use the ani
 }
 
 /* stylelint-disable no-descending-specificity */
+.pagination {
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
 .pagination .page-item .page-link {
   display: -ms-flexbox;
   display: flex;