/*:root{ --accent:#0b6cff; --muted:#666; --bg:#f6f8fb; --card:#fff }*/
/*:root{ --accent:#0b6cff; --muted:#666; --bg:#f6f8fb; --card:#fff }*/
:root {
	--bgcolor: #f0f9fa;
    --background-color: #f0f9fa;
    --box-color: #fff;
    --text-color: #000;
    --primary: #10a0cb;
    --secondary: #4bc05c;
	--accent: linear-gradient(45deg, #4bc05c, #10cba0, #10a0cb);
    --gradient: linear-gradient(45deg, #4bc05c, #10cba0, #10a0cb);
    --gradient1: linear-gradient(45deg, rgba(75, 192, 92, .5), rgba(16, 203, 160, .5), rgba(16, 160, 203, .5));
    --radius: 20px;
    --margin: 1em;
    --box-shadow: 0 2px 2px 0 rgb(0, 0, 0, .1);
    --box-shadow-l: 1px 2px 2px 1px rgb(0, 0, 0, .1);
    --box-shadow-xl: 0 20px 20px 20px rgb(0, 0, 0, .1);
    --easing: cubic-bezier(0, 0, .2, 1);
    --green-to-blue: linear-gradient(45deg, #10cba0, #10a0cb);
    --green-to-green: linear-gradient(45deg, #4bc05c, #10cba0);
    --blue-to-blue: linear-gradient(45deg, #10a0cb, #49c8f0);
    --blue-to-green: linear-gradient(45deg, #10a0cb, #10cba0);
    --lightblue: #49c8f0;
    --lightgreen: #4bc05c;
    --inverted-gradient: linear-gradient(-45deg, #4bc05c, #10cba0, #10a0cb);
    --transparent-inverted-gradient: linear-gradient(45deg, rgba(240, 249, 250, .6), rgba(240, 249, 250, .6));
}

*{box-sizing:border-box}
body{font-family:Inter,system-ui,Arial,Helvetica,sans-serif;background:transparent;margin:0;color:#111}
.container{padding:0 16px; margin: 0 0 50px 0;}

.topbar{ position: fixed; display:flex;align-items:center;justify-content:space-between;gap:12px; z-index: 3; }
.controls{display:flex; /*flex-direction: column; align-items:start;*/ gap:12px; background: #fff; border-radius: 7px; padding: 15px; box-shadow: 0 4px 22px rgba(16, 24, 40, 0.06); }
#search{padding:10px;border-radius:8px;border:1px solid #ddd;width:360px}
.viewToggle{display:flex;gap:6px;margin-left:6px; justify-content: space-between;}
.viewToggle .btn{padding:8px 12px}
.tag-container{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tag{background:var(--accent);color:#fff;padding:4px 8px;border-radius:999px;font-size:13px;display:inline-flex;align-items:center;gap:8px}
.tag .remove{cursor:pointer;font-weight:bold}
.btn{background:var(--accent);color:#fff;padding:6px 10px;border-radius:8px;border:none;cursor:pointer}
.filters-panel{position:fixed;right:-380px;top:20px;width:360px;height:80vh;background:#fff;padding:12px;border-radius:8px;box-shadow:0 8px 30px rgba(21,32,60,0.12);transition:right .28s ease;overflow:auto;z-index:60}
.filters-panel.open{right:20px}
.filter-node{border-bottom:1px solid #f0f2f5;padding:8px 0}
.filter-node .children{padding-left:22px;display:none}
.filter-node .children.open{display:block}
.toggle-children{border:none;background:none;cursor:pointer;margin-right:6px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:20px}
.card{background:var(--card);border-radius:10px;overflow:hidden;box-shadow:0 4px 22px rgba(16,24,40,0.06);display:flex;flex-direction:column;text-decoration:none;color:inherit}
.card-thumb img{width:100%;height:140px;object-fit:cover;display:block}
.card-body{padding:12px;display:flex;flex-direction:column;gap:8px}
.card-title{margin:0;font-size:16px}
.card-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.badge{padding:4px 8px;border-radius:999px;font-size:12px;color:var(--muted)}
.category-badge{background:#10cba0;color:#fff}
.language-badge{background:#10a0cb;color:#fff}
.ects-badge{background:var(--gradient);color:#fff}
.card-actions{margin-top:auto;display:flex;justify-content:flex-end}

/* Map + grid styles */

.country { stroke:#ffffff; stroke-width:0.6px; cursor:pointer; transition:opacity .12s, fill .12s; }
.country:hover { stroke-width:1.4px; filter:brightness(.95); }
.country-label { font-family: Arial, sans-serif; font-size:18px; pointer-events:none; fill:#fff; padding: 5px; filter: drop-shadow(-3px -3px 8px rgb(0 0 0 / 0.8));  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);}

#gridContainer { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; margin-top:12px; }
.grid-card { background:#fff; border-radius:8px; box-shadow:0 6px 18px rgba(9,30,66,.06); overflow:hidden; padding:10px; }
.grid-card h4 { margin:0 0 8px 0; font-size:15px; }
.map-legend { position:absolute; right:18px; top:18px; background:rgba(255,255,255,0.95); padding:8px;border-radius:8px; font-size:13px; box-shadow:0 6px 20px rgba(9,30,66,.08); }

.map-tooltip { position: absolute; pointer-events: none; padding:6px 8px; background: rgba(0,0,0,0.8); color:#fff; font-size:12px; border-radius:6px; display:none; }







@media only screen and (min-width: 750px) {
	/* styles for browsers larger than 960px; */
	.grid{grid-template-columns:1fr 1fr;}

}
@media only screen and (min-width: 960px) {
	/* styles for browsers larger than 1440px; */
	.grid{grid-template-columns:1fr 1fr 1fr;}

}
@media only screen and (min-width: 1400px) {
	/* for sumo sized (mac) screens */
	.grid{grid-template-columns:1fr 1fr 1fr 1fr;}

}
@media only screen and (max-device-width: 480px) {
   /* styles for mobile browsers smaller than 480px; (iPhone) */
   .grid{grid-template-columns:1fr;}

}
@media only screen and (device-width: 768px) {
   /* default iPad screens */
   .grid{grid-template-columns:1fr 1fr;}

}
/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
  .grid{grid-template-columns:1fr;}

}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
  .grid{display:grid;grid-template-columns:1fr 1fr;}
}



.card{box-shadow:0 34px 33px -23px rgba(22,28,45,.3);border-radius:7px;background:#fff;color:#000;text-decoration:none;transition:all .25s cubic-bezier(.16,1,.3,1); }
.card-thumb{position:relative;padding-top:55%;overflow:hidden;border-radius:10px 10px 0 0; background: var(--gradient); }
.card .card-thumb { filter: opacity(0.75);  transition: all .25s cubic-bezier(.16, 1, .3, 1); }
.card:hover .card-thumb { filter: opacity(1); }
.card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.card-body{padding:12px;display:flex;flex-direction:column;gap:8px}
.card-title{margin:5px 0 15px 0;font-size:16px}
.card-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom: 7px;}
.card-actions{margin-top:auto;display:flex;justify-content:flex-end}

.lazy-load-image-background {
	position: absolute;
    top: 0;
    height: 100%;
    background: var(--gradient);
}

.fda-card__avatar-bg {
    border-radius: 50%;
    position: absolute;
    background: #fff;
    top: 10px;
    right: 10px;
    width: 75px;
    height: 75px;
    padding: 0;
}

.img-fluid {
    border-radius: 50%;
    max-width: 100%;
    height: auto;
    padding: 7px;
}

.logo {
    display: block;
    margin-bottom: 12px;
}




/* ------- Lightbox ------- */

.lightbox {
  display: none;
  color: var(--textcolor);
}

.lightbox:target {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  display: grid;
  place-items: center;
  align-content: center;
  background: var(--bgcolor);
  border: 0;
  z-index: 3;
}

.lightbox img {
  max-height: 100vh;
  z-index: 4;
}

/*
.lightbox:target:before { Loading spinner 
  content:"";
  height: 2em;
  width: 2em;
  animation: spin .8s infinite linear;
  border: 1px solid;
  border-right-color: transparent;
  border-radius: 50%;
  display: block;
  position: absolute;
  transform: translateX(-50%);
  opacity: .25;
}
*/
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*.lightbox:target:after {  /*× to close */
 /* content: "\00D7";
  position: fixed;
  font-size: 2em;
  font-weight: 200;
  line-height: 0;
  top: .75em;
  right: .5em;
  z-index: 4;
}*/

/* ------- Smaller screens ------- */

@media only screen and (max-width: 680px) {
  body { font-size: 16px; }
}

@media only screen and (max-width: 540px) {
  nav { width: 100%; } /* Fix for older webkit versions */
}

/* ------- Print ------- */

@media print {
  
  nav, .lightbox:target:after { display: none; }
  
  article, figure, img {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  /* Inline footnotes */
  
  label + input + small { display: inline; }
  label + input + small:before { content: "["; }
  label + input + small:after { content: "]"; }
  
  /* Slides */
  
  .slides, .slides figure {
    position: relative;
    height: auto;
    padding: 0;
  }

  .slides figure img, .slides figure.cover img {
    max-height: auto;
    position: relative;
    z-index: 1;
    width: auto;
    height: 100vh;
    object-fit: contain;
  }
    
}





.lightboxContainer {
	display: flex; 
	flex-direction: column; 
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.lightboxLogo {
	height: 5rem; width: auto;
	margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}

.lightboxContainer h1 {
	text-align: center;
	font-size: 1.3rem;
	margin: 0.5rem 0.5rem 1rem 0.5rem;
} 


.scrollableTableContainer {
	max-height: 60vh;
	overflow-y: auto;
	margin: 0.5rem 0.5rem 2rem 0.5rem;
}

.lightboxContainer .btn {
	/*padding: 0.2rem 0.2rem !important;*/
}


.metadata { display: none; }


.lightbox table {
	cursor: context-menu !important;
	color: #000 !important;
}



@media (max-width: 600px) {
    .card__content h3 {
        padding-top: 0;
        font-size: 1rem !important;
        line-height: 1.2rem !important;
        letter-spacing: -.5px;
        height: 4rem;
    }
}


.card__content h3 {
    padding-top: 1.1rem !important;
    font-size: 1.1rem !important;
    line-height: 1rem;
    letter-spacing: -0.5px;
    height: 4rem;
	text-align: center;
}

.card__content p {

	text-align: center;
}




#closeItem { 
	position: fixed;
    font-size: 1.2rem;
    font-weight: 200;
    line-height: 0;
    top: 1.7rem;
    right: 1.2rem;
    z-index: 4;
	border: none;
	background: none;
	cursor: pointer;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}



section#list .card {
    height: 100%;
}




a { text-decoration: none; }




#search, .choice-inner { 

	/*margin: 20px 0; position: fixed; top: -40px; left: 20px; z-index: 2; background: #fff;*/
    border: 2px solid rgba(0, 0, 0, 0.1);
    padding: 7px 7px 7px 40px;
    background: white url(/static/search.png) no-repeat 9px center;
    color: #000;
    /*outline: none;
    transition: all .8s cubic-bezier(0,0,.2,1);*/

}


@media only screen and (max-width : 800px) {
	.search, .choice-inner { width: 60% !important; }
}

.search:focus, .choice-inner:focus { 
    border: 2px solid rgba(0, 0, 0, 1);


}


.filters-actions { margin-top: 7px; }


#closeFilters { position: fixed; float: right; top: 20px; right: -362px; padding: 7px; border-radius: 7px 0 0 7px; border: none; background: white; cursor: pointer; transition:right .28s ease; }

.filters-panel.open #closeFilters { right: 398px; }
		
td {
  padding-right: 15px;
}

.card-thumb:after {
content:"";position:absolute;top: 0;width:100%;height:100%;background:url(https://api.forthem-alliance.eu/fileadmin/user_upload/forthem-logo-white.svg) no-repeat;background-size:100% 100%;opacity:1;border-radius:10px
}

/*
.card-thumb:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: url(https://api.forthem-alliance.eu/fileadmin/user_upload/forthem/logo/forthem_overlay.svg) no-repeat;
    border-radius: 10px;
    opacity: 1;
}
*/
/*
.content:"";position:absolute;width:100%;height:100%;background:url(https://api.forthem-alliance.eu/fileadmin/user_upload/forthem-logo-white.svg) no-repeat;background-size:100% 100%;opacity:1;border-radius:10px*/

#mapContainer { width:100%; height:80vh; }
/*
#mapView {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
*/

#mapView, #listView{display:none; margin-top: 80px;}
#mapView.active, #listView.active{display:block;}


svg.responsive-map {
  width: 100%;
  height: 80vh;
  max-height: 100vh;
}



.viewToggle .btn.active {
    background: var(--gradient);
    color: #fff;
}
.viewToggle .btn {
    padding: 8px 12px;
    background: none;
    color: #000;
}

.viewToggle .btn { display: flex; align-items: center; gap: 7px; }
.viewToggle .btn.active .icon { fill: #fff; }

#toggleFilters { margin-left: 7px; }