@charset "UTF-8";

	/* Set the styles for the main diagram */
	/* Because of my need to put boxes around groups I've done this in layers.  flex-outside contains an entire row and is a container for whatever is in the row*/
	/* I think I did this to control how the rows remap when this shrinks */
	/* n-box is the box within the row that contains the title and the individual items.  I need a different version based on how many items are in it to manage widths */
	/* flex-inside then contains the individual tiles and arranges them */
	/* the actual flex items are themselves a flex, so they align the headers and text */
	/* we have slightly different sizes for the items based on how many are in the flex-inside*/
	
	/* flex-outside is the outside container.  Spread items and align one the sides */
	.flex-outside {
		display: flex;
		justify-content: space-between; /* so that the underlying boxes align at the outside */
		flex-wrap: wrap;
		flex-direction: row;
		padding: 0px;
		margin: 0px;
		width: 100%;
		max-width: var(--mw); /* this is set to match the width of the graphic so it is never wider than that*/
		/* no border here because this is bigger than the element that has a border */
	}
	
	/* n-box is the box that contains the title and the other boxes.  It has a border */
	.n-box {
		vertical-align: top;
		color: var(--txtblue1);
		/*font-size: 1.1em; */
		padding-bottom: 1em;
		padding-left: 0.5em;
		padding-right: 0.5em;
		margin-top: 1em; /* so that when it wraps there is space */
		min-width: var(--nwmin); /* so that they are the same size when they shrink */
		background-color: var(--backblue);
	}
	
	.n-box h3 {
		margin: 0.5em 0 0 1.2em; /* play with this to get alignment right */
	}
	
	.n-box-border {
		border: 3.5px solid var(--txtblue1);
		border-radius: 10px;
	}
	
	/* define variations that have widths for different numbers of elements*/
	.n-box-1 {
		width: var(--nw1p);
		/* max-width: calc(var(--nw1p) * var(--mw)); */ /* var(--nw1max) */
	}
	
	.n-box-2 {
		width: var(--nw2p);
		/* max-width: calc(var(--nw2p) * var(--mw)); */ /* var(--nw2max) */
	}
	
	.n-box-3 {
		width: var(--nw3p);
		/* max-width: calc(var(--nw3p) * var(--mw)); */ /* var(--nw3max) */
	}
	
	/* have this because we don't want this to shrink at a certain size */
	.d-box-3 {
		width: var(--nw3p);
		/* max-width: calc(var(--nw3p) * var(--mw)); */ /* var(--nw3max) */ 
	}
	
	
	/* flex-inside contains the individual items.  Spread but with space on the sides*/
	.flex-inside {
		display: flex;
		justify-content: space-around; /* so there is space at the edges */
		flex-wrap: wrap;
		flex-direction: row;
		padding: 0.5em;
		margin: 0em;
	}
	
	/* flex-item is the actual item.  Border and text centred in both directions. Set percent width but also mins and max */
	/* Will they all scale together ? */
	.flex-item {
		display: flex; /* make this a flex because that gives the power to properly centre vertically */
		flex-direction: column; /* stack heading and text */
		flex: 1; /* makes columns equal width */
		justify-content: center;
		align-items: center;
		text-align: center;
	/*	width: var(--cwp); */
	/*	max-width: var(--cwmax); */
	/*	min-width: calc(var(--cwp3)* 600px); */ /*var(--cwmin)*/
		color: var(--txtblue1);
		margin: 1em;
		padding: 1em;
		min-height: 3em;
	}
	
	/* need these separately because not always used*/
	.flex-item-h:hover{
		background: var(--hlblue1);
	}
	
	/*.flex-item-mw{ */
		/*min-width: calc(var(--cwp3)* 600px); */ /*var(--cwmin)*/
	/* } */
	
	.flex-item h4 {
		margin: 0 0 10px 0; /* play with this */
	/*  flex-grow: 1; this is the magic that makes the headings expand to the same item, but it looks ugly! */	
	}
	
	/* see below because I actually use mediumtext in the item  */
	.flex-item p {
		margin: 0; /* play with this */
	}
	
	/* put the border separately because sometimes it is not used*/
	.flex-item-border {
		border: 3px solid var(--txtblue1);
		border-radius: 8px;
		background-color: var(--hoverblue);
	}
	
	/* and variations for the different counts */
	.flex-item1 {
		width: var(--cwp1);
	}
	
	.flex-item2 {
		width: var(--cwp2);
	}
	
	.flex-item3 {
		width: var(--cwp3);
	}
	
	.flex-itemd1 {
		width: calc(var(--dwp1)*100%);
		/* min-width: calc(max(var(--dwp1)*var(--mw), 90%)); */ /* Min size is either the percentage against our min size, or 90% of screen, whichever is bigger*/
		min-width: calc(min(var(--dwp1)*var(--dw), 90%));
	}
	
	.flex-itemd2 {
		width: calc(var(--dwp2)*100%);
		/* min-width: calc(max(var(--dwp2)*var(--mw), 90%)); */ /* Min size is either the percentage against our min size, or 90% of screen, whichever is bigger*/
		min-width: calc(min(var(--dwp2)*var(--dw), 90%));
	}
	
	.flex-itemleft {
		text-align: left;
	}
	
	
	/* the other part of the aligning text under headings part. */
	.flex-item mediumtext {
		margin: 0; /* play with this */
	}
	
	/* Lightbox styles*/
	
	/* Hidden by default */
	.lightbox-overlay {
	  display: none;
	  position: fixed;
	  top: 0; left: 0; width: 100vw; height: 100vh;
	  background: rgba(0, 0, 0, 0.8);
	  justify-content: center;
	  align-items: center;
	  z-index: 1000;
	}
	
	/* Modal box */
	
	.lightbox-box {
	  background: var(--backblue);
	  padding: 2rem;
	  width: 90%;
	  max-width: var(--mw);
	  position: relative;
	  border-radius: 8px;	
	}
	
	.lightbox-contents {
		max-height: 90vh; /* reponsive height limit */
		overflow-y: auto; /* triggers the scrollbar */
		padding-right: 8px; /* space for the scrollbar */
	}
	
	/* Navigation & Close buttons */
	.nav-btn, .close-btn {
	  position: absolute;
	  top: 50%;
	  transform: translateY(-50%);
	}
	.nav-btn { background: transparent; border: none; font-size: 2rem; cursor: pointer; }
	.prev-btn { left: 10px; }
	.next-btn { right: 10px; }
	.close-btn { top: 20px; right: 20px; font-size: 1.5rem; transform: none; }
	
	
	/* want the d-box to go to a single column earlier because otherwise the graphic ends up being too short  */
	/* This is now done by the calc above */
	/* @media (max-width: 750px){ */
		
	/*	.flex-itemd1 { */
	/*		width: var(--cwp1); */
	/*	} */
	
	/*	.flex-itemd2 { */
	/*		width: var(--cwp2); */
	/*	} */
	/* } */
	
	
	/* but below a threshold  force them all to be one column, and on the left when that happens */
	/* this involves manipulating the width of the nbox but also the flex items so they behave like "3" */
	@media (max-width: 630px){
		.n-box-1 {
			width: var(--nw3p);
			/* max-width: calc(var(--nw3p) * var(--mw)); */ /* var(--nw1max) */
		}
		
		.n-box-2 {
			width: var(--nw3p);
			/* max-width: calc(var(--nw3p) * var(--mw)); */ /* var(--nw1max) */
		}
		
		.flex-item2 {
			width: var(--cwp1);
		}
	
		.flex-item3 {
			width: var(--cwp1);
		}
		
		.flex-outside {
		justify-content: flex-start}
	
	}