/* Background team image */
.bg-hero { 
  background-image: 
    url('https://static.igem.wiki/teams/5253/header/educationn.png'),
    url('https://static.igem.wiki/teams/5253/prizes/best-education.webp');
  background-size: 30% 100%, 100px; /* Adjust the size of the second and third image */
  background-position: right bottom, center; /* Adjust position of second and third image */
  background-repeat: no-repeat, no-repeat; /* No repeat for any image */
  height: 300px;
  width: 100%;
}

/* Add text below the second image */
.bg-hero::after {
content: "Nomination for\A Best Education"; /* Text content for the second image */
white-space: pre;
position: absolute;
color: #25336b; /* Text color */
font-size: 16px; /* Adjust font size */
text-align: center;
width: 100%;
top: 255px; /* Adjust the vertical position below the second image */
}

.main-content {
padding-right: 45px;
}

h1 {
text-align: left;
}

/* ------------------- Timeline -------------------- */

ul.timeline {
--col-gap: 2rem;
--row-gap: 2rem;
--line-w: 0.25rem;
display: grid;
grid-template-columns: var(--line-w) 1fr;
grid-auto-columns: max-content;
column-gap: var(--col-gap);
list-style: none;
width: min(60rem, 100%);
margin-inline: auto;
}

/* line */
ul.timeline::before {
content: "";
grid-column: 1;
grid-row: 1 / span 6;
background: #25336b; /* Updated line color */
border-radius: calc(var(--line-w) / 2);
}

/* columns */

/* row gaps */
ul.timeline li:not(:last-child) {
margin-bottom: var(--row-gap);
}

/* card */
ul.timeline li.timeline-item {
grid-column: 2;
--inlineP: 1.5rem;
margin-inline: var(--inlineP);
grid-row: span 2;
display: grid;
grid-template-rows: min-content min-content min-content;
position: relative; /* Added for shadow positioning */
}

/* date */
ul.timeline li.timeline-item .timeline-date {
--dateH: 3rem;
height: var(--dateH);
margin-inline: calc(var(--inlineP) * -1);

text-align: center;
background-color: #25336b; /* Updated date background color */

color: white;
font-size: 1.25rem;
font-weight: 700;

display: grid;
place-content: center;
position: relative;

border-radius: calc(var(--dateH) / 2) 0 0 calc(var(--dateH) / 2);
}

/* date flap */
ul.timeline li.timeline-item .timeline-date::before {
content: "";
width: var(--inlineP);
aspect-ratio: 1;
background: #25336b; /* Updated date flap color */
background-image: linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent);
position: absolute;
top: 100%;

clip-path: polygon(0 0, 100% 0, 0 100%);
right: 0;
}

/* circle */
ul.timeline li.timeline-item .timeline-date::after {
content: "";
position: absolute;
width: 2rem;
aspect-ratio: 1;
background: var(--bgColor);
border: 0.3rem solid #25336b; /* Updated circle border color */
border-radius: 50%;
top: 50%;

transform: translate(50%, -50%);
right: calc(100% + var(--col-gap) + var(--line-w) / 2);
}

/* title descr */
ul.timeline li.timeline-item .timeline-title,
ul.timeline li.timeline-item .timeline-description {
background: white; /* Set background color to white */
position: relative;
padding-inline: 1.5rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Added shadow */
}
ul.timeline li.timeline-item .timeline-title {
overflow: hidden;
padding-block-start: 1.5rem;
padding-block-end: 1rem;
font-weight: 500;
}

ul.timeline li.timeline-item .timeline-description {
padding-block-end: 1.5rem;
font-weight: 300;
}

/* shadows */
ul.timeline li.timeline-item .timeline-title::before,
ul.timeline li.timeline-item .timeline-description::before {
content: "";
position: absolute;
width: 90%;
height: 0.5rem;
background: rgba(0, 0, 0, 0.5);
left: 50%;
border-radius: 50%;
filter: blur(4px);
transform: translate(-50%, 50%);
}
ul.timeline li.timeline-item .timeline-title::before {
bottom: calc(100% + 0.125rem);
}

ul.timeline li.timeline-item .timeline-description::before {
z-index: -1;
bottom: 0.25rem;
}

@media (min-width: 40rem) {
ul.timeline {
grid-template-columns: 1fr var(--line-w) 1fr;
}
ul.timeline::before {
grid-column: 2;
}
ul.timeline li.timeline-item:nth-child(odd) {
grid-column: 1;
}
ul.timeline li.timeline-item:nth-child(even) {
grid-column: 3;
}

/* start second card */
ul.timeline li.timeline-item:nth-child(2) {
grid-row: 2/4;
}

ul.timeline li.timeline-item:nth-child(odd) .timeline-date::before {
clip-path: polygon(0 0, 100% 0, 100% 100%);
left: 0;
}

ul.timeline li.timeline-item:nth-child(odd) .timeline-date::after {
transform: translate(-50%, -50%);
left: calc(100% + var(--col-gap) + var(--line-w) / 2);
}
ul.timeline li.timeline-item:nth-child(odd) .timeline-date {
border-radius: 0 calc(var(--dateH) / 2) calc(var(--dateH) / 2) 0;
}
}

.credits {
margin-top: 1rem;
text-align: right;
}
.credits a {
color: var(--color);
}

/* ------------ Preparing educational material ----------- */
#preparing-educational-material {
display: flex;
flex-direction: column;
width: 100%; /* Ensure the content takes up the full width */
}

.preparing-educational-material-text {
flex: 1;
margin-top: 20px;
}

.teaching-model-image {
max-width: 500px; /* Ensure the container's width matches the image */
background-color: #FFDE5A;
border-radius: 10px; /* Round corners */
margin: 0 auto; /* Center the image container */
}

.teaching-model-image img {
max-width: 100%; /* Ensure the image takes up the full width of the container */
border-radius: 10px; /* Round corners */
border: 5px solid #FFDE5A; /* Border around image */
cursor: pointer;
}

.figure-text {
text-align: center;
font-size: 15px;
padding: 10px 0;
color: #25336b;
background-color: #fff;
border-radius: 10px;
width: 100%; /* Make figure text as wide as the image */
box-sizing: border-box;
border-left: 5px solid #FFDE5A;
border-right: 5px solid #FFDE5A;
border-bottom: 5px solid #FFDE5A;
margin-top: 0px;
height: 100%;
font-family: 'Avenir', 'Century Gothic', sans-serif;
}

/* --- Enlarged image styling --- */

/* Overlay styles */
.overlay {
position: fixed; /* Positioned relative to the viewport */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
display: flex;
justify-content: center;
align-items: center;
z-index: 1000; /* Make sure it covers other content */
}

/* Enlarged container styles */
.enlarged-container {
display: flex; /* Use flexbox for layout */
align-items: flex-start; /* Align items to the start */
padding: 20px;
background-color: #fff; /* Background for the enlarged view */
border: 5px solid #FFDE5A; /* Border around the enlarged view */
border-radius: 10px;
max-width: 900px; /* Set a larger max width for the container */
width: 100%; /* Use a percentage width for responsiveness */
}

/* Close button styles */
.close {
position: absolute; /* Position absolute to place it anywhere within the overlay */
top: 10px; /* Adjust as needed */
right: 15%; /* Adjust as needed */
font-size: 30px;
color: #25336b;
cursor: pointer;
z-index: 101; /* Ensure the close button is on top of other elements */
}

/* Enlarged image styles */
.enlarged-image {
max-width: 60%; /* Limit the width of the image */
height: auto; /* Maintain aspect ratio */
border-right: 5px solid #FFDE5A; /* Add right border to the image */
background-color: #FFDE5A;
}

/* Enlarged figure text styles */
.enlarged-figure-text {
margin-left: 20px; /* Space between the image and text */
text-align: center; /* Align text to the left */
font-size: 14px; /* Same size as the original figure text */
color: #25336b; /* Same text color */
max-width: 40%; /* Set a max width for the text box */
flex-shrink: 0; /* Prevent text box from shrinking */
overflow-wrap: break-word; /* Allow long words to break to the next line */
margin: 0 auto;
padding: 5px;
}

/* --- End of Enlarged image styling --- */

.survey-results {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}

.top-row {
display: flex;
justify-content: center;
gap: 30px; /* Space between the two top images */
}

.survey-1 {
display: flex;
flex-direction: column;
align-items: center;
background-color: #FFDE5A;
border-radius: 10px;
max-width: 500px;
}

.survey-1 img {
max-width: 100%;
border-radius: 10px;
border: 5px solid #FFDE5A;
cursor: pointer;
}

.bottom-row {
margin-top: 30px; /* Add some space between the top two images and the third image */
text-align: center;
}


/* ------------ Events ----------- */
/* Event 1 */
.event-wrap-1 {
display: flex;
width: 100%; /* Ensure the content takes up the full width */
box-sizing: border-box; /* Include padding in the width calculation */
}

.event-container-1 {
display: flex;
flex: 1; /* Allow the container to take up remaining space */
justify-content: space-between;
align-items: flex-start;
background-color: #25336b;
color: white;
border-radius: 10px;
padding: 10px;
font-family: 'Avenir', 'Century Gothic', sans-serif;
}

.event-info-1 {
display: flex;
flex-direction: column; /* Stack header and text vertically */
flex: 1; /* Allow this section to take up remaining space next to the image */
margin-right: 20px; /* Space between text and image container */
}

.event-1-text {
margin-top: 10px; /* Space between header and text */
flex: 1; /* Allow text to take up remaining space */
}

.event-box-1 {
display: flex;
flex-direction: column;
align-items: center;
max-width: 300px; /* Ensure the container's width matches the image */
background-color: #FFDE5A;
border-radius: 10px; /* Round corners */
}

.event-box-1 img {
max-width: 100%; /* Ensure the image takes up the full width of the container */
border-radius: 10px; /* Round corners */
border: 5px solid #FFDE5A; /* Border around image */
cursor: pointer;
}

/* Event 2 */
.event-wrap-2 {
display: flex;
width: 100%; /* Ensure the content takes up the full width */
box-sizing: border-box; /* Include padding in the width calculation */
padding-top: 35px;
}

.event-container-2 {
display: flex;
flex: 1; /* Allow the container to take up remaining space */
justify-content: space-between;
align-items: flex-start;
background-color: #25336b;
color: white;
border-radius: 10px;
padding: 10px;
font-family: 'Avenir', 'Century Gothic', sans-serif;
}

.event-info-2 {
display: flex;
flex-direction: column; /* Stack header and text vertically */
flex: 1; /* Allow this section to take up remaining space next to the image */
margin-right: 20px; /* Space between text and image container */
}

.event-2-text {
margin-top: 10px; /* Space between header and text */
flex: 1; /* Allow text to take up remaining space */
}

.event-box-2 {
display: flex;
flex-direction: column;
align-items: center;
max-width: 300px; /* Ensure the container's width matches the image */
background-color: #FFDE5A;
border-radius: 10px; /* Round corners */
}

.event-box-2 img {
max-width: 100%; /* Ensure the image takes up the full width of the container */
border-radius: 10px; /* Round corners */
border: 5px solid #FFDE5A; /* Border around image */
cursor: pointer;
}

/* Event 3 */
.event-wrap-3 {
display: flex;
width: 100%; /* Ensure the content takes up the full width */
box-sizing: border-box; /* Include padding in the width calculation */
padding-top: 35px;
}

.event-container-3 {
display: flex;
flex: 1; /* Allow the container to take up remaining space */
justify-content: space-between;
align-items: flex-start;
background-color: #25336b;
color: white;
border-radius: 10px;
padding: 10px;
font-family: 'Avenir', 'Century Gothic', sans-serif;
}

.event-info-3 {
display: flex;
flex-direction: column; /* Stack header and text vertically */
flex: 1; /* Allow this section to take up remaining space next to the image */
margin-right: 20px; /* Space between text and image container */
}

.event-3-text {
margin-top: 10px; /* Space between header and text */
flex: 1; /* Allow text to take up remaining space */
}

.event-box-3 {
display: flex;
flex-direction: column;
align-items: center;
max-width: 300px; /* Ensure the container's width matches the image */
background-color: #FFDE5A;
border-radius: 10px; /* Round corners */
}

.event-box-3 img {
max-width: 100%; /* Ensure the image takes up the full width of the container */
border-radius: 10px; /* Round corners */
border: 5px solid #FFDE5A; /* Border around image */
cursor: pointer;
}

.education-forms-image {
max-width: 1100px; /* Ensure the container's width matches the image */
background-color: #FFDE5A;
border-radius: 10px; /* Round corners */
margin: 0 auto; /* Center the image container */
}

.education-forms-image img {
width: 1100px; /* Ensure the image takes up the full width of the container */
align-items: left;
border-radius: 10px; /* Round corners */
border: 5px solid #FFDE5A; /* Border around image */
cursor: pointer;
}

/* General Image Styling */
.education-forms-image img,
.event-box-1 img,
.event-box-2 img,
.event-box-3 img,
.social-box-1 img,
.social-box-2 img,
.survey-1 img {
transition: transform 0.3s ease; /* Smooth transition for scaling */
}

/* Hover Effect */
.education-forms-image img:hover,
.event-box-1 img:hover,
.event-box-2 img:hover,
.event-box-3 img:hover,
.social-box-1 img:hover,
.social-box-2 img:hover,
.survey-1 img:hover {
transform: scale(1.05); /* Slightly enlarge the image on hover */
cursor: pointer; /* Change cursor to indicate clickable */
}


/* ------------ Social media ----------- */
#social-media {
padding-top: 35px;
}

/* Syntetic biology */
.social-wrap-1 {
display: flex;
width: 100%; /* Ensure the content takes up the full width */
box-sizing: border-box; /* Include padding in the width calculation */
}

.social-container-1 {
display: flex;
flex: 1; /* Allow the container to take up remaining space */
justify-content: space-between;
align-items: flex-start;
background-color: #25336b;
color: white;
border-radius: 10px;
padding: 10px;
display: block; /* Ensures text and slideshow are vertically stacked */
font-family: 'Avenir', 'Century Gothic', sans-serif;
}

.social-info-1 {
display: flex;
flex-direction: column; /* Stack header and text vertically */
flex: 1; /* Allow this section to take up remaining space next to the image */
margin-right: 20px; /* Space between text and image container */
}

.social-1-text {
margin-top: 10px; /* Space between header and text */
flex: 1; /* Allow text to take up remaining space */
}

.social-box-1 {
display: flex;
flex-direction: column;
align-items: center;
max-width: 300px; /* Ensure the container's width matches the image */
background-color: #FFDE5A;
border-radius: 10px; /* Round corners */
}

.social-box-1 img {
max-width: 100%; /* Ensure the image takes up the full width of the container */
border-radius: 10px; /* Round corners */
border: 5px solid #FFDE5A; /* Border around image */
cursor: pointer;
}

/* Endo-facts */
/* Endo-facts container */
.social-wrap-2 {
display: flex;
flex-direction: column;
width: 100%;
padding-top: 35px;
padding-bottom: 35px;
box-sizing: border-box;
}

.social-container-2 {
background-color: #25336b;
color: white;
border-radius: 10px;
padding: 20px;
width: 100%;
font-family: 'Avenir', 'Century Gothic', sans-serif;
}

.social-info-2 {
margin-bottom: 20px; /* Adds space below the text section */
}

.social-2-text p {
margin: 0;
font-size: 16px;
}

/* --------------------- Slide show -------------------------- */
.slideshow-wrapper {
width: 100%;
margin: 0 auto;
padding-top: 20px;
display: flex;
justify-content: center;
}


/* Slideshow container */
.slideshow-container {
width: 100%;
max-width: 700px;
overflow: hidden;
border-radius: 10px;
border: 5px solid #FFDE5A;
background-color: #FFDE5A;
margin: 0 auto;
display: flex;
align-items: center; /* Vertically centers content including the arrows */
justify-content: space-around; /* Space arrows apart on the left and right */
position: relative;
}

.slides-wrapper {
display: flex;
transition: transform 0.4s ease-in-out;
flex: 100%; /* Allow the slides-wrapper to grow and take up available space */
}

/* Adjust the slide width to show only one image at a time */
.slide {
min-width: 100%;  /* Ensure each slide takes up the full width */
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
border-right: 5px solid #FFDE5A;
}

.slide img {
width: 100%;  /* Keep this to ensure the image covers the entire slide */
height: 290px;
object-fit: contain;
border-radius: 10px;
}

.description {
text-align: center;
font-size: 18px;
padding: 10px;
color: #25336b;
background-color: #ffeeb3;
border-radius: 10px;
width: 100%;
margin-top: 5px;
margin-bottom: 2px;
font-family: 'Avenir', 'Century Gothic', sans-serif;
}

.slide:last-child {
border-right: none;
}

/* Arrow buttons */
.prev, .next {
background-color: transparent;
color: #FFDE5A;
border: none;
cursor: pointer;
font-size: 30px;
z-index: 10;
}

.prev:hover, .next:hover {
scale: 1.2;
}

/* Flexbox positioning for arrows */
.slideshow-container .prev {
margin-right: 10px; /* Adjust distance from slides */
}

.slideshow-container .next {
margin-left: 10px; /* Adjust distance from slides */
}

/* Adjust the slide width for Endo-facts to show two slides at a time */
#endo1-slides .slide {
min-width: 50%;  /* Each slide takes up 50% of the container for two slides */
flex-direction: column;
align-items: center;
justify-content: flex-start;
border-right: 5px solid #FFDE5A;
}

#endo1-slides .slide img {
width: 100%;
height: 340px;
object-fit: contain;
border-radius: 10px;
}

#synthetic1-slides .slide img {
height: 380px;
object-fit: contain;
border-radius: 10px;
align-items: center;
}

/* Ensure each individual slide is properly centered */
#synthetic1-slides .slide {
display: inline-block;
justify-content: center; /* Center the content (image) horizontally */
align-items: center;     /* Center the image vertically (if needed) */         
max-width: 400px;        /* Set a max width for the image */
}

/* Adjust the slide width for Event slideshow to show two slides at a time */
#event1-slides .slide {
min-width: 33.33%;  /* Each slide takes up 50% of the container for two slides */
flex-direction: column;
align-items: center;
justify-content: flex-start;
border-right: 5px solid #FFDE5A;
box-sizing: border-box; /* Ensure padding/border doesn’t affect width */
}

#event1-slides .slide img {
width: 100%;
height: 340px;
object-fit: cover;
border-radius: 10px;
}

/* Adjust the slide width for Event slideshow to show two slides at a time */
#event2-slides .slide {
min-width: 33.4%;  /* Each slide takes up 50% of the container for two slides */
flex-direction: column;
align-items: center;
justify-content: flex-start;
border-right: 5px solid #FFDE5A;
box-sizing: border-box; /* Ensure padding/border doesn’t affect width */
}

#event2-slides .slide img {
width: 100%;
height: 320px;
object-fit: cover;
border-radius: 10px;
}


/* Adjust the slide width for Endo-facts to show two slides at a time */
#event3-slides .slide {
min-width: 50%;  /* Each slide takes up 50% of the container for two slides */
flex-direction: column;
align-items: center;
justify-content: flex-start;
border-right: 5px solid #FFDE5A;
}

#event3-slides .slide img {
width: 100%;
height: 510px;
object-fit: cover;
border-radius: 10px;
}


/* -------------------- Makes images clickable ---------------- */

/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
}

.modal-content-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}

.modal-content-container {
position: relative;
max-width: 120%;
max-height: 120%;
top: 30px;
}

.modal-content {
width: auto; /* Width of 70% of viewport width */
max-width: 600px; /* Max width of 550px */
max-height: 70vh; /* Max height of 70% of viewport height */
height: auto; /* Maintain aspect ratio */
border-radius: 5px 5px 0 0; /* Rounded corners */
overflow: hidden; /* Hide overflow */
border: 10px solid #FFDE5A;
}

.modal-figure-text {
color: #fff;
text-align: center;
margin-top: 10px;
font-size: 18px;
color: #25336b;
background-color: white; /* Background color for contrast */
border-radius: 0 0 5px 5px; /* Rounded corners for bottom */
border-left: 10px solid #FFDE5A;
border-right: 10px solid #FFDE5A;
border-bottom: 10px solid #FFDE5A;
margin-top: 0%;
padding: 10px;
font-family: 'Avenir', 'Century Gothic', sans-serif;
}

.close {
position: absolute;
top: 100px;
right: 25px;
color: #FFDE5A;
font-size: 30px;
font-weight: bold;
cursor: pointer;
}

.close:hover,
.close:focus {
color: #25336b;
}

/* General Image Styling */
.teaching-model-image img,
.event-box-1 img,
.event-box-2 img,
.event-box-3 img,
.social-box-1 img,
.social-box-2 img {
transition: transform 0.3s ease; /* Smooth transition for scaling */
}

/* Hover Effect */
.teaching-model-image img:hover,
.event-box-1 img:hover,
.event-box-2 img:hover,
.event-box-3 img:hover,
.social-box-1 img:hover,
.social-box-2 img:hover {
transform: scale(1.05); /* Slightly enlarge the image on hover */
cursor: pointer; /* Change cursor to indicate clickable */
}

/* -------------------- Dropdown ---------------- */

/* Specifically target the dropdown with ID "dropdown-1" */
#dropdown-1 {
margin-top: 20px; /* Add space above this specific dropdown */
margin-bottom: 30px; /* Add space below this specific dropdown */
position: relative;
display: inline-block;
width: 100%; /* Full width */
max-width: 1100px; /* Set a max width */
}

/* Styles for the button within this specific dropdown */
#dropdown-1 .dropbtn {
background-color: #25336b;
border-radius: 10px; /* Rounded corners */
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
color: #FAD8d8;
box-sizing: border-box; /* Ensure padding is included in the width */
font-family: 'Avenir', 'Century Gothic', sans-serif;
}

/* Dropdown content styles */
#dropdown-1 .dropdown-content {
display: none;
margin-left: 0;  /* Center it by removing excessive left margin */
background-color: white;
width: 100%;
border: 5px solid #FFDE5A; /* Yellow border */
border-radius: 10px; /* Rounded corners */
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
padding: 10px;
box-sizing: border-box; /* Ensure padding is included in the width */
}

/* Show the dropdown content when the button is clicked */
#dropdown-1.show .dropdown-content {
display: block;
}

/* Rotate the arrow to point up when the dropdown is open */
#dropdown-1.show .fas.fa-chevron-down {
transform: rotate(180deg);
}
/* PDF container styles */
object[type="application/pdf"] {
width: calc(100% - 165px); /* Adjusted to prevent clashing with sidenav */
margin-left: 165px; /* Align with the main content */
height: 500px;
margin-right: 50px;
}

/* PDF wrapper styling */
.pdf-wrapper {
text-align: center; /* Center the title and the PDF container */
font-family: 'Avenir', 'Century Gothic', sans-serif;
margin: 0; /* Remove margin around the wrapper */
padding: 20px; /* Add padding inside the wrapper if needed */
}

/* Title styling */
.pdf-title {
font-family: 'Avenir', 'Century Gothic', sans-serif;
color: #25336b;
margin-bottom: 0px; /* Space between the title and the PDF container */
padding: 0; /* Remove padding if any */
font-weight: 700; /* Make the text bold */
}

/* Text styling for the placeholder text */
.pdf-text {
font-family: 'Avenir', 'Century Gothic', sans-serif;
color: #25336B;
margin-bottom: 16px; /* Add some spacing between the text and the next element */
font-size: 16px;
line-height: 1.5;
text-align: left;
}

/* PDF container styling */
.pdf-container {
display: flex;
justify-content: center;
align-items: center;
height: 500px; /* Adjusted height to fit the PDF */
padding: 0; /* Remove padding inside the container */
margin: 0; /* Remove margin if any */
}

.pdf-container iframe {
border-radius: 10px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
width: 100%; /* Ensure the iframe takes the full width of the container */
height: 100%; /* Make the iframe fill the height of the container */
}

.sidenav {
padding-left: 26px;
}

.dropdown-content table {
border-collapse: collapse;
width: 100%;
}

.dropdown-content th, .dropdown-content td {
border: 1px solid black;
padding: 8px;
text-align: left;
}

.dropdown-content th {
background-color: #f2f2f2;
font-family: 'Avenir', 'Century Gothic', sans-serif;
}