/* general */
:root,
[data-bs-theme=light] { --bs-blue: #004577; --bs-primary: #004577; --bs-primary-rgb: 0, 69, 119; }
html,
body { height: 100%; }
body { font-family: 'Montserrat', sans-serif; font-size: 16px; line-height: 22px; padding: 8px; }

/* elements */
h1 { font-weight: 600; font-size: 32px; line-height: 42px; margin-bottom: 32px; }
h2 { font-weight: 600; font-size: 27px; line-height: 42px; margin-bottom: 32px; text-align: center; }
h3 { font-weight: 600; font-size: 16px; line-height: 22px; }

a { background-color: #fff; color: #00626d; font-weight: 700; }
p > a:not(.btn) { background-color: #fff !important; color: #00626d !important; font-weight: 700; text-decoration: underline solid from-font; }
p > a:not(.btn):hover,
p > a:not(.btn):active { color: #008392 !important; }

.btn { --bs-btn-border-radius: 0; }
.btn-primary { --bs-btn-color: #fff; --bs-btn-bg: #004577; --bs-btn-border-color: #004577; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #048B9A; --bs-btn-hover-border-color: #048B9A; --bs-btn-focus-shadow-rgb: 49, 132, 253; --bs-btn-active-color: #fff; --bs-btn-active-bg: #048B9A; --bs-btn-active-border-color: #048B9A; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #0d6efd; --bs-btn-disabled-border-color: #0d6efd; }

/* structure */
main { flex: 1 1 auto; }
.body-wrapper { box-shadow: 0 3px 6px #00000029; display: flex; flex-flow: column wrap; gap: 20px; min-height: 100%; min-width: 100%; }

/* header */
#available-languages-menu { box-shadow: 0 0 6px rgba(9, 49, 142, .2); position: absolute; top: 70px; background-color: #ffffff; right: 0; }
#available-languages-menu .menu-header { border-bottom: 1px solid #E7EDFA; display: flex; justify-content: space-between; padding: 0 0 0 20px; }
#available-languages-menu .title { align-items: center; display: flex; font-size: 18px; font-weight: 600; }
#available-languages-menu .close { height: 48px; width: 48px; background-color: transparent; font-family: sans-serif; font-size: 36px; border: none; }
#available-languages-menu .menu-body { padding: 20px; }
#available-languages-menu .select-language-twoletter { text-transform: uppercase; color: #262B38; flex: 0 0 25px; font-weight: 700; }
#available-languages-menu ul { column-count: 3; column-gap: 40px; list-style: none; margin: 0; max-width: 700px; padding: 0; }
#available-languages-menu ul li a { align-items: center; border-left: 4px solid transparent; display: inline-flex; gap: 10px; padding: 5px 12px 5px 12px; text-decoration: none; width: 100%; }
#available-languages-menu ul li a:hover,
#available-languages-menu ul li a:active { background-color: #f8f9fa; border-left: 4px solid #999999; text-decoration: none; }
#available-languages-menu ul li a.active { background-color: #E7EDFA; border-left: 4px solid #0E47CB; }
#available-languages-menu ul li a span:nth-child(1) { text-decoration: none; }
#available-languages-menu ul li a:hover span:nth-child(2),
#available-languages-menu ul li a:active span:nth-child(2) { text-decoration: underline solid from-font; }

/* content */
.accordion .accordion-item { border-radius: 0; }
.accordion .accordion-button { background-color: #f8f9fa; color: #212529; align-items: center; display: flex; gap: 15px; font-size: 18px; font-weight: 600; }
.accordion .accordion-button.eu-type-member .img-location { filter: invert(53%) sepia(86%) saturate(3085%) hue-rotate(173deg) brightness(96%) contrast(101%); }
.accordion .accordion-button.non-eu-type-member { --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(255, 140, 0, 0.25) }
.accordion .accordion-button.non-eu-type-member .img-location { filter: invert(60%) sepia(100%) saturate(525%) hue-rotate(345deg) brightness(100%) contrast(95%); }
.accordion .accordion-body button.eu-type-member { background-color: #fff; border-left: 3px solid #00a6ed; color: #212529; }
.accordion .accordion-body button.eu-type-member:hover,
.accordion .accordion-body button.eu-type-member:active { color: #00a6ed; }
.accordion .accordion-body button.non-eu-type-member { background-color: #fff; border-left: 3px solid #ffb02e; color: #212529; }
.accordion .accordion-body button.non-eu-type-member:hover,
.accordion .accordion-body button.non-eu-type-member:active { color: darkorange; }
.accordion .accordion-body ul { column-count: 4; column-gap: 10px; list-style: none; margin: 0; padding: 0; }
.accordion .accordion-body ul li { margin: 5px 0; }
.accordion .accordion-body ul li button { border-top: none; border-right: none; border-bottom: none; padding: 5px 10px; }

.organisation-table { display: flex; flex-direction: column; width: 100%; border-collapse: collapse; border: 1px solid #ddd; font-size: 0.95rem; margin-top: 1rem; }
.organisation-header,
.organisation-row { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid #ddd; }
.organisation-header { font-weight: bold; background-color: #f8f9fa; }
.organisation-row { align-items: start; }
.organisation-row .cell { word-wrap: break-word; }
.organisation-row .cell-links { display: flex; gap: 10px; flex-flow: column wrap; }

.social-media a { background-color: transparent; }
.social-media a img { filter: invert(100%) brightness(100%); }
.social-media a:hover img,
.social-media a:active img,
.social-media a:focus img { filter: invert(45%) sepia(87%) saturate(2413%) hue-rotate(164deg) brightness(95%) contrast(88%); }

@media only screen and (max-width : 1200px) {
  .accordion .accordion-body ul { column-count: 3; }
}

@media only screen and (max-width : 992px) {
  #available-languages-menu ul { column-count: 2; column-gap: 30px; }

  .accordion .accordion-body ul { column-count: 2; }
}

@media only screen and (max-width: 768px) {
  .organisation-table { border: none; }
  .organisation-header { display: none; }
  .organisation-row { display: flex; flex-direction: column; border: 1px solid #ddd; gap: 2px; margin-bottom: 1rem; padding: 1px; }
  .organisation-row .cell { margin-bottom: 0; padding: 0.5rem 0.75rem; background: #f8f9fa; border-radius: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); width: 100%; }
  .organisation-row .cell::before { content: attr(data-label); font-weight: bold; display: block; font-size: 0.8rem; margin-bottom: 0.2rem; color: #444; }
}

@media only screen and (max-width : 576px) {
  #available-languages-menu ul { column-count: 1; column-gap: 0; }
  #available-languages-menu .menu-body { max-height: 320px; overflow-y: auto; }

  .accordion .accordion-body ul { column-count: 1; }
}