:root {

	--sidebarWidth: 300px;
}



.category img, 
.category iframe {
    width: 400px; /* Match the width of the interactive plots */
    height: 125px; /* Match the height of the interactive plots */
    margin: 10px;
}

.category-container {
    display: flex;
    flex-wrap: nowrap;
    
    width: 100%;
}

.category {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    margin-bottom: 20px;
}

/* .category-container {
  display: flex;
  flex-wrap: nowrap; 
 
  margin-bottom: 20px;
  width:100%;
}

.category {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
  white-space: nowrap; 
} */

.category h3 {
  margin-bottom: 10px;
  text-align: center;
}

.logos {
  display: flex;
  justify-content: center;
}

.content-graphs {
  /* overflow-x: auto;  */
  white-space: nowrap; /* Prevent wrapping of content inside */
}


.content-model {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

/* .content-graphs {
  display: flex;
  flex-direction: column;
} */

.modelContent {
  display: flex;
  flex-wrap: wrap;
}

.modelContent .category {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
}

#category-options {
	position: sticky;
	display: flex;
	min-width: fit-content;
	/* top: 0; */
	font-size: 1.25em;
	padding: 10px;
	background: var(--lightBlue);
	color: var(--fontGrey);
	/* margin: 0; */
	/* z-index: 10; */
	/* white-space: nowrap; */
	overflow-x: visible;
  width:100%;
}

/* makes the header look like a clickable link */
.model-link {
  color: #0066cc;          /* link-blue; tweak as you like */
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;        /* optional: matches bold header weight */
}

/* nice hover effect */
.model-link:hover,
.model-link:focus {
  color: #004999;          /* darker on hover */
  text-decoration: underline;
}

/* styles_models.css */

/* Base look: white background, blue outline */
.download-btn {
  display: inline-block;
  margin-left: 0.75rem;
  padding: 0.25rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
  color: #1e88e5;                  /* blue text */
  background: #ffffff;             /* white fill */
  border: 2px solid #1e88e5;       /* blue outline */
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease-in-out,
              color       0.15s ease-in-out,
              transform   0.1s;
}

/* Hover/focus: subtle fill so users know it’s interactive */
.download-btn:hover,
.download-btn:focus {
  background: #e3f2fd;             /* very light blue */
  text-decoration: none;
}

/* Active (mouse down): little press-in effect */
.download-btn:active {
  transform: translateY(1px);
}