:root {
  --scrollbar-thumb: #efefef;
  --scrollbar-track: #ccc;
  --scrollbar-thumb-hover: #fff;

  --ohdsi-blue: #193248;
  --ohdsi-yellow: #d4961e;
  --ohdsi-yellow-bright: #f7ae16;


  --ohdsi-globe-yellow: #d4961e;
  --ohdsi-globe-blue: #193248;
  --ohdsi-globe-blue-translucent: #1932485d;
  --ohdsi-globe-stroke: #ffffff50;

  --ohdsi-globe-marker-fill: #fff;
  --ohdsi-globe-marker-stroke: #193248;
  --ohdsi-globe-marker-hover-fill: #f7ae16;
  --ohdsi-globe-marker-hover-stroke: #193248;

  --ohdsi-globe-europe: rgba(247, 176, 22, 0.75);
  --ohdsi-globe-non-europe: #ffffff33;
  --ohdsi-tooltip-bg-color: rgb(25 50 72 / 85%)
}


.g-menu-item-container[class*="flag-"] .g-menu-item-title {
    position: relative;
    padding-left: 22px;
}

.g-menu-item-container[class*="flag-"] .g-menu-item-title:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 16px;      
    height: 16px;
    transform: translateY(-50%);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
}



.g-menu-item-container.flag-at .g-menu-item-title:before {
    background-image: url("/assets/svg/flags/1x1/at.svg");
}

.g-menu-item-container.flag-be .g-menu-item-title:before {
    background-image: url("/assets/svg/flags/1x1/be.svg");
}

.g-menu-item-container.flag-dk .g-menu-item-title:before {
    background-image: url("/assets/svg/flags/1x1/dk.svg");
}

.g-menu-item-container.flag-ee .g-menu-item-title:before {
    background-image: url("/assets/svg/flags/1x1/ee.svg");
}

.g-menu-item-container.flag-fi .g-menu-item-title:before {
    background-image: url("/assets/svg/flags/1x1/fi.svg");
}

.g-menu-item-container.flag-de .g-menu-item-title:before {
    background-image: url("/assets/svg/flags/1x1/de.svg");
}

.g-menu-item-container.flag-gr .g-menu-item-title:before {
    background-image: url("/assets/svg/flags/1x1/gr.svg");
}

.g-menu-item-container.flag-hu .g-menu-item-title:before {
    background-image: url("/assets/svg/flags/1x1/hu.svg");
}

.g-menu-item-container.flag-ie .g-menu-item-title:before {
    background-image: url("/assets/svg/flags/1x1/ie.svg");
}

.g-menu-item-container.flag-il .g-menu-item-title:before {
    background-image: url("/assets/svg/flags/1x1/il.svg");
}

.g-menu-item-container.flag-it .g-menu-item-title:before {
    background-image: url("/assets/svg/flags/1x1/it.svg");
}

.g-menu-item-container.flag-lu .g-menu-item-title:before {
    background-image: url("/assets/svg/flags/1x1/lu.svg");
}

.g-menu-item-container.flag-nl .g-menu-item-title:before {
    background-image: url("/assets/svg/flags/1x1/nl.svg");
}

.g-menu-item-container.flag-no .g-menu-item-title:before {
    background-image: url("/assets/svg/flags/1x1/no.svg");
}

.g-menu-item-container.flag-pt .g-menu-item-title:before {
    background-image: url("/assets/svg/flags/1x1/pt.svg");
}

.g-menu-item-container.flag-es .g-menu-item-title:before {
    background-image: url("/assets/svg/flags/1x1/es.svg");
}

.g-menu-item-container.flag-ch .g-menu-item-title:before {
    background-image: url("/assets/svg/flags/1x1/ch.svg");
}

.g-menu-item-container.flag-gb .g-menu-item-title:before {
    background-image: url("/assets/svg/flags/1x1/gb.svg");
}

#map-svg {
  --scrollbar-thumb: #efefef;
  --scrollbar-track: #ccc;
  --scrollbar-thumb-hover: #fff;

  --ohdsi-blue: #193248;
  --ohdsi-yellow: #d4961e;
  --ohdsi-yellow-bright: #f7ae16;


  --ohdsi-globe-yellow: #d4961e;
  --ohdsi-globe-blue: #193248;
  --ohdsi-globe-blue-translucent: #1932485d;
  --ohdsi-globe-stroke: #000000;

  --ohdsi-globe-marker-fill: #fff;
  --ohdsi-globe-marker-stroke: #193248;
  --ohdsi-globe-marker-hover-fill: #193248;
  --ohdsi-globe-marker-hover-stroke: #fff;

  --ohdsi-globe-europe: rgba(247, 176, 22, 0.75);
  --ohdsi-globe-non-europe: #00000033;
  --ohdsi-tooltip-bg-color: rgb(25 50 72 / 85%)
}



header.header-home::after {
  background: none !important;
}

header.header-home > #globe-svg {
    background: linear-gradient(90deg, rgb(25 50 72), #00000000), radial-gradient(circle at 50% 100%, #193248 10%, #19324830, #fff) !important;
}

header.header-home > #map-svg {
    background: linear-gradient(90deg, rgb(25 50 72), #00000000), radial-gradient(circle at 50% 100%, #193248 10%, #19324830, #fff) !important;
}

header:not(.header-home) > #globe-svg {
  display: none !important;
}

header:not(.header-home) > #map-svg {
  display: none !important;
}

header .search-module {
  position: absolute;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
  z-index: 99;
  height: 36px;
  top: calc(calc(135px / 2) + 18px);
  left: 0;
}

header .search-module input[type="text"] {
    text-transform: uppercase;
    
}

html, body {
  font-family: "Ubuntu", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* ======= Headings using Bodoni ======= */
h1, .h1 {
  font-family: "ZalandoSans Condensed", serif !important;
  font-weight: 900 !important;
  font-style: normal !important;
}

h2, .h2 {
  font-family: "ZalandoSans Condensed", serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
}

h3, .h3 {
  font-family: "ZalandoSans Condensed", serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
}

h2.emphasis, h2.special { /* example class for italic headings */
  font-family: "ZalandoSans Condensed", serif !important;
  font-weight: 700 !important;
  font-style: italic !important;
}

.info-image small {
  font-family: "ZalandoSans Condensed", serif !important;
  font-weight: 600 !important;
  font-style: normal !important;
}

/* ----------------------------------------------------
   1. Global override for your custom font (“ZalandoSansSemiExpanded”)
   ---------------------------------------------------- */

html, body, div, span, app, section, article, header, footer,
nav, aside, main, figure, figcaption, blockquote, dl, dt, dd,
ul, ol, li, p, h1, h2, h3, h4, h5, h6, a,
form, fieldset, legend, input, textarea, button, select,
table, th, td {
  font-family: "ZalandoSans SemiCondensed", sans-serif;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* ----------------------------------------------------
   2. Headings weights
   ---------------------------------------------------- */

h1, .h1 { font-weight: 900 !important; }
h2, .h2 { font-weight: 800 !important; }
h3, .h3 { font-weight: 700 !important; }
h4, .h4 { font-weight: 600 !important; }
h5, .h5 { font-weight: 500 !important; }
h6, .h6 { font-weight: 400 !important; }

/* ----------------------------------------------------
   3. Emphasis (italic) and strong
   ---------------------------------------------------- */

em, i { font-style: italic !important; }
strong, b { font-weight: 700 !important; }

/* ----------------------------------------------------
   4. Form controls, links, modules/components
   ---------------------------------------------------- */

a,
input, textarea, select, button,
[class*="module"], [class*="component"], [class*="item"],
.module-content, .component-content {
  font-family: "ZalandoSans SemiCondensed", sans-serif;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* ----------------------------------------------------
   5. Exclude FontAwesome icons
   ---------------------------------------------------- */

/* FontAwesome base / icon classes */
.fa,
.fas,
.far,
.fal,
.fab,
.fad,
.fa-solid,
.fa-regular,
.fa-light,
.fa-duotone,
.fa-thin,
.fa-brands,
.fa-icon,
.fa-fw,
.fa-lg,
.fa-2x, /* etc. any sizing classes you use */
.fa-3x,
.fa-4x,
.fa-5x,
.fa-spin,
.fa-pulse,
.fa-rotate-90,
.fa-rotate-180,
.fa-rotate-270,
.fa-flip-horizontal,
.fa-flip-vertical {
  /* Reset to inherit or original font-family */
  font-family: 'FontAwesome';
  font-weight: 900; /* or FontAwesome’s default weight */
  font-style: normal !important;
}

/* If your FontAwesome version uses different family names */
.fa, .fas, .far, .fab {
  font-family: 'FontAwesome';
}

/* ----------------------------------------------------
   6. More specific override: inline style font-family
   ---------------------------------------------------- */



/* ----------------------------------------------------
   7. Optional: icon pseudo-elements
   ---------------------------------------------------- */

[class^="fa-"]::before, [class*=" fa-"]::before,
[class^="fa-"]::after, [class*=" fa-"]::after {
  font-family: 'FontAwesome';

}

.fa-classic, .fas, [class^=icon-], [class*=\ icon-], .fa-solid, .far, .fa-regular {
    font-family: 'FontAwesome';
}

.page-header {
  display: none;
}

#g-navigation .g-main-nav .g-toplevel {
  height: 55px;
}

#g-navigation .g-container {
  width: 100% !important; 
}

main > div > div > .breadcrumbs {
  position: absolute;
  width: 100%;
  left: 0px;
  color: #fff;
  background: #193248;
  margin-top: -44px !important;
}

.mod-breadcrumbs__item span {
  color: #fff;
}

#globe-svg {
    width: 100vw;
    height: 395px;
    background: linear-gradient(90deg, #193248, #193248, #ffffff00);
    background: linear-gradient(90deg, rgb(25 50 72 / 75%), #00000000), radial-gradient(circle at 50% 100%, #193248 10%, #19324830, #fff);
    position: absolute;
    left: 0;
    right: 0;
}

#map-svg {

    height: 500px;
    width: 100%;


}

/* Scrollbar */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 25px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

#g-offcanvas
  #g-mobilemenu-container
  ul
  > li:not(.g-menu-item-type-particle):not(.g-menu-item-type-module).active
  > .g-menu-item-container,
#g-offcanvas
  #g-mobilemenu-container
  ul
  > li:not(.g-menu-item-type-particle):not(.g-menu-item-type-module):hover
  > .g-menu-item-container,
#g-offcanvas
  #g-mobilemenu-container
  .g-toplevel
  > li:hover
  > .g-menu-item-container
  > .g-menu-item-content,
#g-offcanvas
  #g-mobilemenu-container
  .g-toplevel
  > li.active
  > .g-menu-item-container
  > .g-menu-item-content {
  color: rgb(65 171 221) !important;
}

#nav-icon {
  width: 34px;
  height: 30px;
  position: relative;
  margin: 0px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
}

#nav-icon::before {
  content: "" !important;
}

#nav-icon span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background-color: #fff;
  border-radius: 0px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
  box-shadow: 1px 1px 1px var(--ohdsi-yellow), 0px 0px 5px var(--ohdsi-yellow);
}

#nav-icon span:nth-child(1) {
  top: 0px;
}

#nav-icon span:nth-child(2) {
  top: 10px;
}

#nav-icon span:nth-child(3) {
  top: 20px;
}

.g-offcanvas-toggle[aria-expanded="true"] #nav-icon span:nth-child(1) {
  background-color: #fff;
  top: 10px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
  box-shadow: none !important;
}

.g-offcanvas-toggle[aria-expanded="true"] #nav-icon span:nth-child(2) {
  background-color: #fff;
  opacity: 0;
  left: -60px;
  box-shadow: none !important;
}

.g-offcanvas-toggle[aria-expanded="true"] #nav-icon span:nth-child(3) {
  background-color: #fff;
  top: 10px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
  box-shadow: none !important;
}

#g-offcanvas #g-mobilemenu-container ul > li > .g-menu-item-container {
  color: #000000;
}

#g-offcanvas
  #g-mobilemenu-container
  .g-toplevel
  > li
  > .g-menu-item-container
  > .g-menu-item-content {
  color: #000;
  padding-left: 35px !important;
}

body {
  background: #fff;
}

body,
html,
span,
p {
}

body.site::before,
body.com_content::before {
  /* content: "";
  background: url(../assets/images/ohdsi_color.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: min(65%, 1080px);
  opacity: 1;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 0; */
}

* {
  letter-spacing: 0.05em !important;
}

.sub-header {
  background: #ff000000;
  top: 190px;
  left: 0;
  position: absolute;
  width: 100%;
  height: 395px;
  max-width: 20%;
  text-shadow: 0px 0px 3px #000;
  z-index: 1;
  display: flex;
  align-items: center;
}

.header-events .sub-header,
.header-national-nodes .sub-header {
  min-width: 100vw !important;
  width: 100vw !important;
  text-align: center !important;
  display: grid !important;
  background: linear-gradient(to top, #000 10%, #00000005 50%) !important;
  align-items: end;
  align-content: stretch;
}

.sub-header > div > div {
  font-family: "ZalandoSans Condensed", serif !important;
  font-size: 2em;
  font-style: normal !important;
  font-weight: 500 !important;
  text-shadow: 0px 0px 3px #000, 1px 1px 3px #000, 3px 3px 5px rgb(200 152 59 / 20%);
  color: #fffffff1;
  padding-left: 20px;
}

.header-events .sub-header > div > div,
.header-national-nodes .sub-header > div > div  {
    font-size: 2em !important;
    text-shadow: 0px 0px 3px #000, 1px 1px 3px #000, 3px 3px 5px rgb(0 0 0 / 20%) !important;
    padding: 0 !important;
}

.search-module .form-control {
    max-height: 30px !important; 

}

.search-module .form-control:focus {
      margin: 4px 0px !important;
    box-shadow: 0 0 0 0.25rem rgb(212 150 30) !important; 
}


#g-navigation .g-main-nav .g-toplevel > li:not(.g-menu-item-type-particle):not(.g-menu-item-type-module).active {
  background: transparent !important;
  color: #fff !important;
}

#g-navigation .g-main-nav .g-toplevel > li:not(.active) > .g-menu-item-container,
#g-navigation .g-main-nav .g-toplevel > li:not(.active) > .g-menu-item-container span {
  color: #ffffff !important;
}

#g-navigation .g-main-nav .g-toplevel > li:not(.g-menu-item-type-particle):not(.g-menu-item-type-module).active > .g-menu-item-container {
  color: #fff !important;
}


.g-menu-item.active {
  box-shadow: inset 0px -4px 0px var(--ohdsi-yellow) !important;
}

#g-navigation .g-main-nav .g-sublevel > li:not(.g-menu-item-type-particle):not(.g-menu-item-type-module):hover, 
#g-navigation .g-main-nav .g-sublevel > li:not(.g-menu-item-type-particle):not(.g-menu-item-type-module).active {
  background-color: #ffffff33 !important;
}

header {
  position: relative;
}

header .g-container {
  height: calc(135px + 55px);
}

header::after {
  content: "";
  background: url(../assets/images/sub-header-background.jpg);
  background-repeat: no-repeat;
  background-position: 50% calc(var(--bg-pos-y, 45%) - 25px);
  background-size: cover;
  background-attachment: scroll;
  opacity: 1;
  position: absolute;
  left: 0;
  top: 135px;
  width: 100vw;
  height: 450px;
  z-index: 0;
  margin: 0;
  pointer-events: none;
  transition: all 250ms ease-out;
}

header.header-national-nodes::after {
  content: "";
  background: url(../assets/images/22.jpg);
  background-repeat: no-repeat;
  background-position: 50% calc(var(--bg-pos-y, 45%) + 35px);
  background-size: cover;
  background-attachment: scroll;
  opacity: 1;
  position: absolute;
  left: 0;
  top: 135px;
  width: 100vw;
  height: 450px;
  z-index: 0;
  margin: 0;
  filter: none !important;
  pointer-events: none;
  transition: all 250ms ease-out;
}

header.header-contact::before  {
  content: "";
  position: absolute;
  left: 0;
  top: 135px;
  width: 100vw;
  height: 450px;
  background: linear-gradient(135deg, #193248 10%, transparent 50%);
  z-index: 1;
}

header.header-events::after {
  content: "";
  background: url(../assets/images/33.jpg);
  background-repeat: no-repeat;
  background-position: 50% calc(var(--bg-pos-y, 45%) + 35px);
  background-size: cover;
  background-attachment: scroll;
  opacity: 1;
  position: absolute;
  left: 0;
  top: 135px;
  width: 100vw;
  height: 450px;
  z-index: 0;
  margin: 0;
  filter: none !important;
  pointer-events: none;
  transition: all 250ms ease-out;
}

header.header-events::before {
    content: "";
  position: absolute;
  left: 0;
  top: 135px;
  width: 100vw;
  height: 450px;
  background: radial-gradient(circle at 50% 50%, #00000000 50%, #000) !important;
  z-index: 1;
}

.ohdsi-top-line > .g-content {
  height: 135px;
  width: 100vw;
  padding: 0;
  margin: 0;
}

#g-footer {
  background: #193248;
  color: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  min-height: 350px;
}

#g-footer h2 {
  color: var(--ohdsi-yellow) !important;
}

#g-footer a {
  color: #fff !important;
}

#g-footer a:hover {
  color: var(--ohdsi-yellow) !important;
}

#g-header {
  height: 530px !important;
  z-index: unset !important;
}

.awesomplete li {
  color: #000;
}

.awesomplete mark {
    background: var(--ohdsi-yellow) !important;
}

.g-social {
  display: flex;
  justify-content: center;
  margin: 25px 0 0 0;
  align-items: flex-end;
  gap: 5px;
}

.g-social a {
  background: transparent !important;
  border: 0 !important;
  color: var(--ohdsi-yellow) !important;
  font-size: 0.75em;
  margin-top: 37.5px;
}

#g-top,
#g-footer,
#g-copyright {
  position: relative;
  z-index: 1;
}

#g-navigation {
  position: relative;
  z-index: 2;
}

#g-utility {
  position: relative;
  background: #003399;
  z-index: 1;
}

#g-page-surround::before {
  content: "";
  background: #00000000;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 0%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  transition: backdrop-filter 500ms ease-in-out;
  transition-delay: 0ms;
  backdrop-filter: none;
}

.g-offcanvas-open #g-page-surround::before {
  background: linear-gradient(
    0deg,
    rgb(0 0 0 / 50%),
    rgb(0 0 0 / 45%),
    #ffffff00
  );
  /* background: #0000002e !important; */
  width: 100%;
  opacity: 1;
  backdrop-filter: blur(3px);
}

#g-page-surround {
  background-color: transparent !important;
  transform: initial !important;
}


.breadcrumbs .g-content {
  padding: 0px;
  margin: 0px;
}

#g-utility * {
  color: #fff;
}

.ohdsi-top-line {
    position: absolute;
    z-index: 99;
    margin: 0;
    padding: 0;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 15px;
    background: var(--ohdsi-yellow);
}

.breadcrumbs ol {
  margin-top: 0px;
}

.mod-breadcrumbs__divider.float-start {
  display: none;
}

#g-navigation {
  box-shadow: 0px 15px 15px #00000066;
  /* z-index: 3 !important; */
  top: -395px;
}

#g-navigation ul a {
}

#g-navigation .g-button a:not(:hover) {
  color: #3eaadc !important;
}

#g-navigation .g-main-nav .g-toplevel > li:hover > .g-menu-item-container {
  color: #fff !important;
}

li.g-dropdown-column {
  background: rgb(255 255 255 / 0%);
      margin: 2.5rem 0 2.5rem 0;
}

.g-main-nav {
  white-space: normal !important;
}

.g-main-nav > ul > li > .g-menu-item-container {
  padding: 1.025rem 1.5rem !important;
}

.g-main-nav .g-toplevel > li > .g-active.g-dropdown > li > div {

}

.g-main-nav .g-toplevel > li > .g-active.g-dropdown ul.g-sublevel {


}

/* Parent nav container to position children absolutely */
.g-main-nav {
  position: relative !important;
  z-index: 1000; /* Ensure above page content */
}

/* Remove position from individual menu items */
.g-main-nav .g-toplevel > li {
  position: static !important;
  min-width: 175px;
  height: 55px
}

#g-navigation .g-main-nav .g-dropdown
{
  background-color: #193248f5 !important;
}

.g-main-nav .g-toplevel > li > .g-dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  width: 100vw !important; /* Use viewport width */
  max-height: 500px;
  overflow-y: auto;
  margin-left: calc(-6px + calc((100vw - 100%) / -2)); /*calc((100vw - 100%) / -2); /* Shift left to align full viewport */
  box-sizing: border-box;
  z-index: 9999;
  padding: 1rem 5rem;
  overflow: hidden auto !important; 
}

.g-main-nav .g-toplevel > li > .g-dropdown::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.g-main-nav .g-toplevel > li > .g-dropdown::-webkit-scrollbar-track {
  background: #193248;
}

.g-main-nav .g-toplevel > li > .g-dropdown::-webkit-scrollbar-thumb {
  background: #ffffff1f;
  border-radius: 25px;
}

.g-main-nav .g-toplevel > li > .g-dropdown::-webkit-scrollbar-thumb:hover {
  background: #ffffff66;
}

/* Make inner dropdown container stretch */
.g-dropdown-column {
  width: 100% !important;
  padding: 0;
}


.g-sublevel {
    display: grid;
    /* Use auto-fit so empty columns shrink */
    grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
    gap: 5px 5px;
    padding: 0;
    margin: 0;
    list-style: none;

    /* Center the grid content */
    justify-content: center;
}

.g-sublevel > li .g-menu-item-container[class*="flag-"] {
  text-align: left !important;
}

.g-sublevel > li {
  text-align: left;
}

.g-sublevel > li .g-menu-item-container { /* or the parent of g-sublevel */
    text-align: center;  /* center the block inside the parent */
}

.g-sublevel > li {
    display: inline-block;  /* shrinkwrap the width to content */
}

.g-main-nav .g-dropdown {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

#g-top.g-top-ohdsi {
  background: #f7f7f7;
  height: 195px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

#g-main {
  background: transparent !important;
  padding-top: 44px !important;
}

#g-main > .g-container {
  width: 100% !important;
}

.section-horizontal-paddings {
  padding-left: calc(calc(100% - 1434px) / 2);
  padding-right: calc(calc(100% - 1434px) / 2);
}

.main.section-horizontal-paddings {
  padding-left: calc(calc(100% - 1434px) / 2) !important;
  padding-right: calc(calc(100% - 1434px) / 2) !important;
  background-color: #00000000;
}

#g-main .g-grid {
  background: rgb(255 255 255 / 85%);
}

.g-main-nav:not(.g-menu-hastouch) .g-dropdown.g-active {

}

[class*="gantry-logo"] img {
  width: 285px;
}
























@media only all and (max-width: 51rem) {
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-thumb {

    border-radius: 25px;
  }

  body {
    margin-top: 0px !important;
  }

  .row > .col {
  }

nav[aria-label="Breadcrumbs"] {
    overflow-y: hidden;
    overflow-x: scroll;
    height: 44px;
    display: block;
  }

  nav[aria-label="Breadcrumbs"]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  nav[aria-label="Breadcrumbs"]::-webkit-scrollbar-track {
    background: #003399 !important;
  }

  nav[aria-label="Breadcrumbs"]::-webkit-scrollbar-thumb {
    background: #00000045 !important;
    border-radius: 25px;
  }

  nav[aria-label="Breadcrumbs"]::-webkit-scrollbar-thumb:hover {
    background: #444;
  }

  .breadcrumb-item + .breadcrumb-item::before {
    font-size: 0.9rem !important;
  }

  .breadcrumbs ol li span {
    font-size: 0.9rem !important;
  }

  .breadcrumbs ol {
    padding-left: 24px !important;
    padding-top: 10px !important;
    table-layout: fixed;
    display: table !important;
    width: 100%;
    white-space: nowrap;
  }


  .platform-content.container {
    padding-left: inherit;
    margin: 0px 0px 0px 0px;
  }

 

  #g-top.g-top-darwin {
    height: 150px !important;
  }



  nav.g-main-nav:has(ul.g-toplevel) {
    display: block;
    overflow-x: scroll;
    overflow-y: hidden;

    height: 44px;
  }

  nav.g-main-nav:has(ul.g-toplevel) li {
    margin-top: -3px;
  }

  nav.g-main-nav > ul.g-toplevel {

    width: max-content;
    display: flex;
    margin-left: 8px;
  }

  main .g-main-nav .g-toplevel > li > .g-menu-item-container {
    transition: none !important;
    padding: 16px 0px 0px 16px !important;
  }

  main
    .g-main-nav
    .g-toplevel
    > li.g-menu-item:not(:last-of-type)
    .g-menu-item-container::after {
    /*content: var(--bs-breadcrumb-divider, "/");*/
    content: "";
    border: 1px solid #ffd332;
    height: 18px;
    width: 1px;
    color: #ffd332;
    position: absolute;
    margin-left: 8px;
    margin-right: 8px;
  }

  main nav.g-main-nav > ul.g-toplevel li:hover > .g-menu-item-container {
    color: #003399 !important;
    font-weight: bold;
  }

  main
    nav.g-main-nav
    > ul.g-toplevel
    li:hover
    > .g-menu-item-container::before {
    content: "";
    display: none !important;
  }

  main#g-mainbar.contact > .g-grid > .g-block.size-50 {
    padding: 0 !important;
  }

  div.contact-fields.row > div {
    margin: 0;
    padding: 0;
  }

  #g-container-main main > div > div > .g-content:not(.g-particle) {
    padding: 0px;
  }

  #g-utility {
  }

  #system-message .alert {
    padding: 1.5rem 1.5rem calc(1.5rem + 15px) 1.5rem;
  }

  .breadcrumb li {
    font-size: 0.9rem;
    display: inline-block;
  }

  .breadcrumb-item + .breadcrumb-item::before {
    color: #ffffff;
  }

  #g-container-main {
    position: relative;
  }

  div[aria-expanded="true"] #nav-icon span {
    border-radius: 0px !important;
  }

  div.header {
  }

  #g-container-main {
    background-color: #ffffff;
  }

  #g-container-main::before {
    display: none !important;
  }

  #g-mainbar {
    background-color: #039 !important;
  }

  main#g-mainbar > .g-grid:first-of-type {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    box-shadow: inset 0px 10px 0px 0px #41abdd;
  }

  main#g-mainbar > .g-grid {
    background: #fff !important;
  }

  main#g-mainbar::before {

  }

  .side-menu-container {
  }

  .side-menu-container > div {
    padding: 0;
    margin: 0;
  }

  .side-menu-container > div {
  }

  .platform-content.container .header h2,
  .platform-content.container .header h3 {

    font-size: 1rem !important;
  }

  .platform-content.container h2,
  .platform-content.container h3 {
    font-size: 1rem !important;
    max-width: 85vw;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .platform-content.container h2 span,
  .platform-content.container h3 span {
    color: #003399 !important;
  }

  .g-offcanvas-left #g-offcanvas::before {
    content: "MENU";
    position: fixed;
    display: block;
    margin-left: 50%;
    margin-top: 10px;
    font-weight: normal;
    left: -45px;
    font-size: 1.85rem;
    color: #fff;
    z-index: 1;
  }

  .g-offcanvas-left #g-offcanvas::after {
    content: "";
    position: fixed;
    display: block;
    background: var(--ohdsi-yellow);
    z-index: 0;
    width: 100%;
    height: 60px;
    left: 0px;
    top: 0px;
  }

  #g-offcanvas
    #g-mobilemenu-container
    ul
    li.g-menu-item
    .g-menu-item-container
    > .g-menu-parent-indicator::after {
    color: #000 !important;
  }

  #g-offcanvas
    #g-mobilemenu-container
    ul
    li.g-menu-item
    .g-menu-item-container
    > .g-menu-parent-indicator {
    color: #000 !important;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 5px 0px 0px 3px;
    border: 0px solid #ffffff !important;
    background: #41abdd00 !important;
    box-shadow: 0px 0px 0px #000000b5;
  }

  #g-offcanvas
    #g-mobilemenu-container
    .g-toplevel
    > li
    > .g-menu-item-container {
    padding: 0.775rem 0;
  }

  .header-background-image .g-logo {
    padding: 0px;
    margin: 0px;
    right: 0px;
    top: 20px;
    flex-direction: row-reverse;
  }

  .header-background-image .g-logo img {
    height: 125px;
    margin-top: -35px;
    margin-right: -75px;
    transform: scale(0.75);
  }

  .header-background-image::after {
    background: radial-gradient(#ffffff, transparent);
    margin-left: 25px;
    padding: none !important;
  }




  #g-offcanvas[aria-expanded="true"] {
    opacity: 1 !important;
  }

  #g-offcanvas:not([aria-expanded="true"]) {
    opacity: 0;
    display: block !important;

    width: 0%;
  }

  .g-offcanvas-open .g-nav-overlay {
    z-index: 99998;
  }

  .g-offcanvas-toggle {
    top: 35px;
    color: #ffffff;
    z-index: 100000000;
  }

  .g-offcanvas-toggle[aria-expanded="true"] {
    top: 20px !important;
  }

  #g-offcanvas #g-mobilemenu-container {
    font-family: inherit !important;
    font-weight: normal !important;
    width: 100%;
    margin: 60px 0px 0px 0px;
    border-top: 5px solid #ffd332;
  }

  #g-offcanvas #g-mobilemenu-container ul .g-dropdown-column {
    width: 100%;
  }

  #g-offcanvas {
    padding: 0px;
    width: 65%;
  }

  #g-offcanvas > div > div > div {
    padding: 0px;
    margin: 0px;
  }

  main.contact#g-mainbar .g-grid:nth-child(2) > div {
    padding-left: 10px !important;
  }

  .com-content-article.item-page .icons a {
    margin: 10px !important;
  }

  .home-page-top > .g-grid::before {
    width: 100% !important;
    height: 100% !important;
  }

  .slider-home {
    position: relative;
    width: 100vw;
    margin-left: calc(-1.5rem + -0.625rem) !important; 
    margin-top: calc(calc(-1.5rem + -0.625rem) - 25px) !important;
    margin-bottom: calc(1.5rem + 0.625rem) !important;
  }

  .slider-home h3 {
    background: #dedede !important;
    color: #003399 !important;
    text-align: left !important;
    padding-left: 17px;
    font-weight: bold;
  }


  body [class*="size-"] {
    flex-grow: 0 !important;
    flex-basis: 100% !important;
    max-width: 100% !important;
  }

  .cc-revoke.cc-right {
    margin-left: 0px !important;
    left: calc(50% - calc(75px / 1.25)) !important;
    right: auto !important;
  }

  div.cc-window.cc-floating {
    border-radius: 0px !important;
  }
  
  .captcha-container {
    min-width: initial !important;
  }
  

}




.info-block {
  display: flex;
  align-items: center;
  margin: 40px auto;
  gap: 40px;
}

.info-image img {
  min-width: 600px;
  border-radius: 0px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.info-image small {
  color: var(--ohdsi-yellow); /* paarsige kleur */
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.info-text {
  margin-top: -35px;
}

.info-text h2 {
  font-size: 2rem;
  margin: 10px 0 15px 0;
}

.info-text h3 {
  font-size: 1.2rem;
  margin-top: 20px;
}

.info-text p {
  color: #444;
  line-height: 1.6;
  margin-top: -15px;
}

.btn-primary,
.btn-secondary {
  display: inline-block;
  background-color: var(--ohdsi-yellow);
  color: white;  
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.counts > div {
    box-shadow: 5px 5px 5px 0px #c0c0c045;
    border: 0px;
    margin: 15px 5px -10px 0px;
    border-radius: 5px;
}

main .btn-primary,
main .btn-secondary {
  margin-top: 25px;
  padding: 10px 25px;
}

.btn-secondary:hover,
.btn-primary:hover {
  background-color: var(--ohdsi-yellow);
}

.ohdsi-europe-nodes {
  position: static;
}

.ohdsi-europe-nodes {
  width: 50%;
  float: right;
  box-sizing: border-box;
  margin: 0 0 1.5rem 1.5rem;
  min-height: 280px;
}

.ohdsi-europe-nodes>* {
  width: 100%;
  height: auto;
  display: block;
}

.info-text::after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 768px) {
  .ohdsi-europe-nodes {
    width: 100%;
    float: none;
    margin: 1rem 0;
    min-height: 200px;
  }
}

/* Responsief voor kleinere schermen */
@media screen and (max-width: 768px) {
  .info-block {
    flex-direction: column;
    text-align: center;
  }
  .info-image img {
    width: 100%;
    max-width: 400px;
  }
  .info-text h2 {
    font-size: 1.6rem;
  }
}

.breadcrumbs ol {
  margin-top: 0px;
}

.mod-breadcrumbs__divider.float-start {
  display: none;
}

 


nav[aria-label="Breadcrumbs"] {
    overflow-y: hidden;
    overflow-x: auto;
    height: 44px;
    display: block;
  }

  nav[aria-label="Breadcrumbs"]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  nav[aria-label="Breadcrumbs"]::-webkit-scrollbar-track {
    background: var(--ohdsi-blue) !important;
  }

  nav[aria-label="Breadcrumbs"]::-webkit-scrollbar-thumb {
    background: #00000045 !important;
    border-radius: 25px;
  }

  nav[aria-label="Breadcrumbs"]::-webkit-scrollbar-thumb:hover {
    background: #444;
  }
  
    .breadcrumb-item + .breadcrumb-item::before {
    font-size: 0.9rem !important;
  }

  .breadcrumbs ol li span {
    font-size: 0.9rem !important;
  }

  .breadcrumbs ol {
    padding-left: 24px !important;
    padding-top: 10px !important;
    table-layout: fixed;
    display: table !important;
    width: 100%;
    white-space: nowrap;
  }
  
    .breadcrumb li {
    font-size: 0.9rem;
    display: inline-block;
  }

  .breadcrumb-item + .breadcrumb-item::before {
    color: #ffffff;
  }


#europe-map-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(20, 41, 62, 0.95);
  color: rgb(255, 255, 255);
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 1em;
  visibility: visible;
  z-index: 99;
  box-shadow: #000000cc 3px 3px 3px 0px !important;
}