/*
Theme Name: 	ABJHI
Description: 	A basic theme for the M2M decision-aid content.
Version: 		1.0
Author: 		Leon Janzen
Author URI: 	https://albertaboneandjoint.com
*/

@font-face {
	font-family: 'ElegantIcons';
	src:url('fonts/ElegantIcons.eot');
	src:url('fonts/ElegantIcons.eot?#iefix') format('embedded-opentype'),
		url('fonts/ElegantIcons.woff') format('woff'),
		url('fonts/ElegantIcons.ttf') format('truetype'),
		url('fonts/ElegantIcons.svg#ElegantIcons') format('svg');
	font-weight: normal;
	font-style: normal;
}

:root
{
	/*
	All of the colour properties should be located here, so that they can be easily changed
	for accomodate a dark theme (which hasn't been built yet).
	These colour varables are specified as "#,#,#" rather than "rgb(#,#,#)"
	so that they can be included in an rgb() value, or an rgba() value, and
	have opacity added as necessary.
		e.g. "rgba(var(--font-colour-normal), .5)"
	*/
	--font-colour-print:0,0,0; /* black */
	--font-colour-normal:5,75,124; /* normal text on a light background */
	--font-colour-soft:120,151,172; /* normal text on a light background */
	--font-colour-normal-inverted:255,255,255; /* normal text on a dark background */
	--font-colour-soft-inverted:191,191,191; /* soft text on a dark background */
	--heading-colour:7,98,161 !important; /* light blue */
	--a-link-colour:193,143,0; /* orange */
	--a-link-bright-colour:251,187,0; /* This is a little brighter than --a-link-colour, for display on a dark blue background. */
	--a-visited-colour:151,111,0; /* dark orange */
	--a-hover-colour:230,168,0; /*light orange */

	--nav-a-link-colour:var(--a-link-bright-colour);
	--nav-a-link-background-colour:238,238,238;
	--nav-a-current-colour:255,255,255;
	--nav-a-current-background-colour:238,238,238;
	--nav-a-current-ancestor-colour:var(--nav-a-current-colour);
	--nav-a-current-ancestor-background-colour:238,238,238;
	--nav-a-visited-colour:var(--nav-a-link-colour);
	--nav-a-hover-colour:var(--nav-a-link-colour);
	--nav-a-hover-background-colour:238,238,238;
	--nav-background-colour:var(--header-footer-background-colour);

	--border-colour:189, 203, 212 !important;
	--highlight-background-colour:222, 236, 248 !important;
	--highlight-border-colour:157, 197, 225 !important;
	--highlight-background-colour:241, 241, 241 !important;
	--highlight-border-colour:223,223,223 !important;
	--pagination-list-a-current-colour:var(--font-colour-normal-inverted) !important;
	--pagination-list-a-current-background-colour:var(--a-link-colour) !important;
	
	--header-footer-background-colour:14, 17, 134; /* medium blue */
	--body-background-colour:223,223,223;
	--container-background-colour:255,255,255;
	--container-print-background-colour:255,255,255;
	--box-shadow-colour:0,0,0;
	--breadcrumb-border-colour:223,223,223;
	--search-background-colour:127,127,127;
	--tr-hover-background-colour:255,255,255;

	accent-color:rgb(var(--font-colour-normal));
	--input-inactive-background-colour:247,247,247; /* This is the normal idle state of an input that doesn't currently have focus. */
	--input-background-colour:255,255,255;
	--input-disabled-background-colour:223,223,223;
	--input-border-colour:189, 203, 212;
	--input-required-border-colour:var(--a-link-colour);
	--button-colour:var(--font-colour-normal-inverted);
	--button-background-colour:var(--a-link-colour);
	--button-disabled-background-colour:127,127,127;

	/* WordPress element colours. */
	--comment-background-colour:127,127,127;

	/* Non-colour variables */
	--container-width:900px;
	--row-padding-left-right:8vw;
	--scrollbar-width:0px;
}

/* CKEditor theme customizations */
:root
{
	/* These must be designated as !important to override the built-in styles, which are loaded after these ones. */
	--ck-color-toolbar-background: rgb(215,215,215) !important;
	--ck-color-button-default-background: rgb(255,255,255) !important;
	--ck-color-button-default-disabled-background: rgb(231,231,231) !important;
}
.ck-editor
{
	color:rgb(var(--font-colour-normal));
}
@media (prefers-color-scheme: dark) {
	/*
	For a dark theme, copy all of the colour properties above, and generally invert them here.
	*/
}

/* Defaults */

*
,*:before
,*:after
{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
::selection
,::-moz-selection
{
	background:rgb(var(--nav-a-hover-colour));
	color:rgb(var(--font-colour-normal-inverted));
}
html
{
	height:100%;

	font-size: 100%;
	overflow-y: scroll;
}
html
,body
,div
,span
,object
,iframe
,h1
,h2
,h3
,h4
,h5
,h6
,p
,blockquote
,pre
,abbr
,address
,cite
,code
,del
,dfn
,em
,img
,ins
,kbd
,q
,samp
,small
,strong
,sub
,sup
,var
,b
,i
,dl
,dt
,dd
,ol
,ul
,li
,fieldset
,form
,label
,legend
,table
,caption
,tbody
,tfoot
,thead
,tr
,th
,td
,article
,aside
,canvas
,details
,figcaption
,figure
,footer
,header
,hgroup
,menu
,nav
,section
,summary
,time
,mark
,audio
,video
{
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}        
article
,aside
,details
,figcaption
,figure
,footer
,header
,hgroup
,nav
,section
,iframe
{
	display: block;
}
div
,article
,section
,header
,footer
,nav
,fieldset
,li
{
	position:relative; /* For absolutely positioning elements within containers (add more to the list as necesssary) */
}
div
,article
,section
,header
,footer
,nav
,table
,td
,th
,form
,hr
,img
,iframe
,fieldset
{
	border-style:solid;
	border-color:rgb(var(--border-colour));
}
audio
,canvas
,video
{
	display: inline-block;
	/*
	I think these properties are pretty old and can be removed.
	*display: inline; 
	*zoom: 1; 
	*/
}
code
,kbd
,samp
{ 
	font-family: monospace; 
	_font-family: 'courier new', monospace; 
}
pre
{ 
	font-family: inherit;
	white-space: pre; 
	white-space: pre-wrap; 
	word-wrap: break-word; 
}
.group:after
{
	/* For clearing */
	display:block;
	height:0;
	clear:both;
	content:".";
	visibility:hidden;
}
a
,a:link
{
	text-decoration:none;
}
p
,h1
,h2
,h3
,h4
,h5
,h6
{
	margin-bottom:.6em;
	
	font-weight:normal;
}
h1
,ol > li:has(> h1)::marker /* If a heading is the first element in an ordered list item, make the ::marker style match the heading style. */
{
	font-size:2em;
}
h2
,ol > li:has(> h2)::marker
{
	font-size:1.6em;
}
h3
,ol > li:has(> h3)::marker
{
	font-size:1.4em;
}
h4
,ol > li:has(> h4)::marker
{
	font-size:1.2em;
}
h5
,ol > li:has(> h5)::marker
{
	font-size:1em;
	font-style:italic;
}
h6
,ol > li:has(> h6)::marker
{
	font-size:.75em;
	text-transform:uppercase;
}
small
{
	font-size:85%;
}
sub
,sup
{
	position:relative;
	font-size:75%;
}
sup
{
	top: -0.5em; 
}
sub
{ 
	bottom: -0.25em; 
}
hr
{
	margin:1em 0;
	border-width:1px 0 0;
}
ul
,ol
,blockquote
{
	margin-left:25px;
}
li
{
	list-style-position:outside;
}
ol li
{
	list-style-type:decimal;
}
ol li li
{
	list-style-type:lower-alpha;
}
ol li li li
{
	list-style-type:decimal;
}
ul li
{
	list-style-type:disc;
}
ul ul li
{
	list-style-type:circle;
}
ul ul ul li
{
	list-style-type:square;
}
ul ul ul ul li
{
	list-style-type:disc;
}
label
{
	cursor:pointer;
}
textarea
{
	display:block;
	resize:vertical;
}
.input /* This is a class that can be applied to another element (i.e. div) to make it match other inputs. */
{
	display:inline-block;
	cursor:pointer;
}
input
,textarea
,select
,.input
,button
,a.button
{
	font-family:inherit;
	font-size:inherit;
	color:inherit;

	border:1px solid rgb(var(--input-border-colour));
	border-radius: 4px;
	outline:none;

	background-color:rgb(var(--input-inactive-background-colour));
	box-shadow:0 0 8px rgba(var(--box-shadow-colour),.05);
}
input[type="range"]
{
	padding:5px 0;
	max-width:100%;
}
button
,a.button
,a.button:link
,a.button:visited
,a.button:visited:hover
,input[type="button"]
,input[type="submit"]
,input[type="reset"]
,input[type="file"]
{
	display:inline-block;
	padding:5px 12px 6px;
	margin-right:7px;
	border:none;
	border-radius: 20px;

	color:rgb(var(--button-colour));
	background-color:rgb(var(--button-background-colour));
	/*
	TODO - Add a background image (SVG) for an arrow that appears on hover, like the rest of the maptomotion.org website.
	background-image:url("");
	*/
}
.button.button-large
,a.button.button-large
{
	padding:15px 20px 16px;
}
textarea
,select
,.input
,input[type="text"]
,input[type="date"]
,input[type="password"]
,input[type="email"]
,input[type="search"]
,input[type="color"]
,input[type="number"]
,input[type="tel"]
,input[type="url"]
{
	max-width:100%;
	padding:2px 4px;
}
select
{
	padding-right:2px;
	word-wrap: normal;
}
textarea:focus
,select:focus
,.input:focus
,input:focus
,input:active
,button:hover
,a.button:hover
,a.button:visited:hover
,input[type="button"]:hover
,input[type="submit"]:hover
,input[type="reset"]:hover
,input[type="file"]:hover
,button:focus
,a.button:focus
,input[type="button"]:focus
,input[type="submit"]:focus
,input[type="reset"]:focus
,input[type="file"]:focus
{
	background-color:rgb(var(--input-background-colour));
	box-shadow:0 0 8px rgba(var(--box-shadow-colour),.25);
}
button:hover
,a.button:hover
,a.button:visited:hover
,input[type="button"]:hover
,input[type="submit"]:hover
,input[type="reset"]:hover
,input[type="file"]:hover
,button:focus
,a.button:focus
,input[type="button"]:focus
,input[type="submit"]:focus
,input[type="reset"]:focus
,input[type="file"]:focus
{
	background-color:rgba(var(--button-background-colour),.7);
}
button:active
,a.button:active
,input[type="button"]:active
,input[type="submit"]:active
,input[type="reset"]:active
,input[type="file"]:active
,button:hover:active
,a.button:hover:active
,input[type="button"]:hover:active
,input[type="submit"]:hover:active
,input[type="reset"]:hover:active
,input[type="file"]:hover:active
{
	box-shadow:0 0 3px rgba(var(--box-shadow-colour),.3);
}
button[disabled]
,a.button.disabled
,input[type="button"][disabled]
,input[type="submit"][disabled]
,input[type="reset"][disabled]
,input[type="file"][disabled]
,button:hover[disabled]
,a.button:hover[disabled]
,input[type="button"]:hover[disabled]
,input[type="submit"]:hover[disabled]
,input[type="reset"]:hover[disabled]
,input[type="file"]:hover[disabled]
{
	background-color:rgba(var(--button-disabled-background-colour),.7);
	box-shadow:none;
}
textarea[disabled]
,select[disabled]
,.input[disabled]
,input[disabled]
,.disabled
{
	opacity:.4;
	filter:alpha(opacity=40);
}
textarea[disabled]
,select[disabled]
,.input[disabled]
,input[disabled]
{
	background-color:rgb(var(--input-disabled-background-colour));
}
textarea.required
,select.required
,.input.required
,input[type="text"].required
,input[type="date"].required
,input[type="password"].required
,input[type="email"].required
,input[type="search"].required
,input[type="color"].required
,input[type="number"].required
,input[type="tel"].required
,input[type="url"].required
{
	outline:1px solid rgb(var(--input-required-border-colour));
	outline-offset:-1px; /* Cover the existing border with the outline. */
}

table
{
	table-layout:fixed;
	border-collapse:collapse;
	border-width:1px;
	border-spacing: 0;
}
td
,th
{
	border-width:1px;
	vertical-align: top;
}
tr:hover
{
	background-color:rgba(var(--tr-hover-background-colour),.12);
}
th
,td
{
	padding:5px;
	border-width:1px;
	overflow:hidden;
}
th
{
	text-align:center;
	font-weight:bold;
	background-color:rgb(var(--font-colour-normal));
}
caption
{
	caption-side:top;
	text-align:left;
}

/* Colours - elements on a light background. */

a
,a:link
,a:visited
{
	color:rgb(var(--a-link-colour));
}
a:visited
{
	color:rgb(var(--a-visited-colour));
}
a:hover
{
	color:rgb(var(--a-hover-colour));
}
a:visited:hover
{
	color:rgb(var(--a-hover-colour));
}
h1
,h2
,h3
,h4
,h5
,h6
{
	color:rgb(var(--nav-a-hover-colour));
}
body.paper 
h1
,body.paper 
h2
,body.paper 
h3
,body.paper 
h4
,body.paper 
h5
,body.paper 
h6
{
	color:inherit;
	font-weight: bold;
}
small
,.faded
{
	color:rgb(var(--font-colour-soft));
}

/* Colours - elements on a dark background. */

.content
,.feature
,.portfolio-item:nth-child(2n + 1)
{
	color:rgb(var(--font-colour-normal));
}
.content small
,.content .faded
{
	color:rgb(var(--font-colour-soft));
}
/*
.content a
,.content a:link
,.content a:visited
,.portfolio-item:nth-child(2n + 1) a
,.portfolio-item:nth-child(2n + 1) a:link
,.portfolio-item:nth-child(2n + 1) a:visited
{
	color:inherit;
}
*/
/*
.content a:hover
,.feature a
,.portfolio-item:nth-child(2n + 1) a:hover
,.message a:hover
{
	color:rgb(var(--heading-colour));
}
*/
/*
.content a:visited:hover
,.portfolio-item:nth-child(2n + 1) a:visited:hover
,.message a:visited:hover
{
	color:rgb(var(--a-visited-colour));
}
*/
.content h1
,.content h2
,.content h3
,.content h4
,.content h5
,.content h6
,.feature h1
,.feature h2
,.feature h3
,.feature h4
,.feature h5
,.feature h6
,.portfolio-item:nth-child(2n + 1) h1
,.portfolio-item:nth-child(2n + 1) h2
,.portfolio-item:nth-child(2n + 1) h3
,.portfolio-item:nth-child(2n + 1) h4
,.portfolio-item:nth-child(2n + 1) h5
,.portfolio-item:nth-child(2n + 1) h6
{
	color:rgb(var(--heading-colour));
}

@media print
{
	a
	,a:link
	,a:visited
	{
		color:rgb(var(--font-colour-print));
		text-decoration:none;
	}
	h1
	,h2
	,h3
	,h4
	,h5
	,h6
	{
		color:rgb(var(--font-colour-print));
	}
	textarea
	,input[type="text"]
	,input[type="date"]
	,input[type="password"]
	,input[type="email"]
	,input[type="search"]
	,input[type="color"]
	,input[type="number"]
	,input[type="tel"]
	,input[type="url"]
	{
		border:1px solid rgb(var(--input-border-colour));
	}
	td
	{
		padding:0 2px 2px 2px;
	}
}

/* Body */

body
{
	height: 100%;
	margin:0;
	display: flex;
	flex-direction: column;

	color:rgb(var(--font-colour-normal));
	font-family: "myriad-pro",Arial,Helvetica,sans-serif;
	font-size:1rem;
	background-color:rgb(var(--body-background-colour));
}
body.paper
{
	height: auto;
}
@media print
{
	body
	{
		height: auto;

		color:rgb(var(--font-colour-print));
		background-color:transparent;
		
		/*
		I'm not sure if the font should change to a more print-friendly font for printing, or stick with the theme font.
		font-family:Arial, Helvetica, sans-serif;
		*/
		/*
		Make the font a little smaller for printing. The screen size seems a little too large for printing.
		*/
		font-size:.9rem;
	}
}

.container
{
	display: flex;
	flex-direction: column;
	flex:1 1 auto; /* This is the only element in body that is allowed to grow, so it will expand to fill the space. */
	width:100%;
	margin:0;

	background-color:rgb(var(--container-background-colour));
	box-shadow:0 0 20px rgba(var(--box-shadow-colour),.3);
}
body.paper .container
{
	max-width:950px;
	height: auto;
	margin:3% auto;
	padding:3% 0;
	background-color: rgb(var(--container-print-background-colour));
}
@media print
{
	.container
	,body.paper .container
	{
		height: auto;
		margin:0;
		padding:0;
		max-width:none;
		background-color: rgb(var(--container-print-background-colour));

		box-shadow:none;
	}
}
.row-container
{
	box-sizing:content-box; /* Don't include the padding % in the max-width, otherwise the content-box actually shrinks at screen widths above 1080px. */
	max-width:var(--container-width);
	margin:0 auto;
	padding:0 var(--row-padding-left-right);
}
@media print
{
	.row-container
	{
		max-width:none;
		padding-left:0;
		padding-right:0;
	}
}

/* Header */

.header-row
{
	background-color:rgb(var(--header-footer-background-colour));
}
body.paper .header-row
{
	background-color:transparent;
}
@media print
{
	.header-row
	{
		background-color:transparent;
	}
}
.header-row .row-container
{
	padding-left:0;
	padding-right:0;
}
@media screen and (min-width:480px)
{
	.header-row .row-container
	{
		padding-left:var(--row-padding-left-right); /* Set it back to the original padding. */
		padding-right:var(--row-padding-left-right); /* Set it back to the original padding. */
	}
}

header
{
	padding:25px var(--row-padding-left-right) 20px;

	color:rgb(var(--font-colour-normal-inverted));
	font-size:1.1em;
}
body.paper header
{
	padding-left:0;
	padding-right:0;
}

body.paper header div
{
	float:left;
}
header h1
{
	margin:0;
}
header h1 a
{
	display:block;
	position:relative;

	/* This text is replaced by an image and is only visible in the print stylesheet. */
	font-size:2.5em;
	font-weight:normal;
	text-transform:lowercase;
	color:rgb(var(--font-colour-normal-inverted));
}
header h1 a
,header h1 a:link
{
	text-decoration: none;
	border-bottom-width: 0;
}
header h1 a span
{
	display:none; /* Hide the title text. It is replaced with an image. */
}
header h1 a img
{
	display:block;
	position:relative;
	height:auto;
	max-width:300px;
	max-height:45px; /* Fixes display issue in IE8 where the image gets too tall. */
	margin-bottom:5px;
}
body.paper
header h1 a img
{
	margin-left:0;
	margin-right:0;
	filter: invert(1); /* Turn the white image black for body.paper. */
}
@media screen and (min-width:480px)
{
	header
	{
		/* Remove the left and right padding, since at this width and above, the left and right padding are included in the .row-container parent element. */
		padding-left:0;
		padding-right:0;
	}
}
@media screen and (min-width:950px)
{
	header
	{
		float:left;
		width:45%;
	}
}
@media print
{
	header
	{
		padding:0 0 3%;
	}
	/*
	header div
	{
		float:left;
	}
	*/
	/*
	header h1 a span
	{
		display:inline;
	}
	*/
	header h1 a img
	{
		filter: invert(1); /* Turn the white image black for printing. */
	}
}

/* Navigation */

nav
{
	border-top:2px solid rgb(var(--a-link-colour));
	font-size:1rem;
}
nav:after
{
	content:"";
	display:block;
	clear:both;
}
nav #menu-toggle li
{
	margin-bottom:0 !important;
}
nav #menu
{
	display:none;
	padding-bottom:2%; /* The bottom padding is located within the #menu element so it can be toggled. */
	border-top:2px solid rgb(var(--a-link-colour));
}
nav a#menu-toggle-link
{
	background-image:url("images/arrow-down.png");
	background-repeat:no-repeat;
	background-position:92% 11px;
}
nav a#menu-toggle-link:hover
{
	background-position:92% -39px;
}
nav a#menu-toggle-link.up
{
	color:rgb(var(--a-link-colour));
	background-image:url("images/arrow-up.png");
}
nav a#menu-toggle-link.up:hover
{
	background-image:url("images/arrow-up.png");
}
nav ul
{
	margin:0;
}
nav li ul
{
	margin-top:1px; /* This should be the same distance as the nav li margin-bottom below. */
	margin-left:8%; /* Set the margin of the second level items to the same as the padding of the first level items, below. */
}
nav li li ul
{
	margin-left:25px; /* Set the margin of the third level items to the same as the padding of the second level items, below. */
}
/* Hide all submenu items. */
nav li ul
{
	display:none;
}
/* Display submenu items for the current page (and ancestors of the current page). */
nav li.current_page_item > ul
,nav li.current_page_ancestor > ul
,nav li.current-menu-item > ul
,nav li.current-menu-ancestor > ul
,nav li.current-post-ancestor > ul
,body.single nav li.blog-ancestor > ul
{
	display:block;
}
nav li
,nav ul li /* This increases the specificity enough to override the properties above. */
,nav ul ul li
,nav ul ul ul li
{
	list-style-type:none;
	margin-bottom:1px !important; /* This should be the same distance as the nav li ul margin-top above. Use !important to override the style of "body.paper li" which has higher specificity. */
}
nav a
,nav a:link
,nav a:visited
{
	display:block;
	position:relative;
	padding:7px var(--row-padding-left-right) 8px; /* Set the padding of the first level items. */
	min-height:1.4em; /* This keeps all single line boxes the same height, even when the font-weight changes (for nav li.current_page_item > a below), affecting the size of the text, and the size of the box. */

	text-decoration:none;
	border-bottom-width:0;
	color:rgb(var(--nav-a-link-colour));

	-webkit-transition:color .3s ease, background-color .3s ease;
	-moz-transition:color .3s ease, background-color .3s ease;
	-o-transition:color .3s ease, background-color .3s ease;
	transition:color .3s ease, background-color .3s ease;
}
nav li li a
,nav li li a:link
,nav li li a:visited
{
	padding-left:25px; /* Set the padding of the second level items. */
}
nav li.current_page_ancestor > a
,nav li.current_page_ancestor > a:link
,nav li.current_page_ancestor > a:hover /* Retain this text colour during the :hover state. */
,nav li.current-menu-ancestor > a
,nav li.current-menu-ancestor > a:link
,nav li.current-menu-ancestor > a:hover /* Retain this text colour during the :hover state. */
,nav li.current-post-ancestor > a
,nav li.current-post-ancestor > a:link
,nav li.current-post-ancestor > a:hover /* Retain this text colour during the :hover state. */
,body.single nav li.blog-ancestor > a
,body.single nav li.blog-ancestor > a:link
,body.single nav li.blog-ancestor > a:hover /* Retain this text colour during the :hover state. */
{
	color:rgb(var(--nav-a-current-ancestor-colour));
}
nav li.current_page_item > a
,nav li.current_page_item > a:link
,nav li.current-menu-item > a
,nav li.current-menu-item > a:link
{
	background-color:rgb(var(--nav-a-current-background-colour),.2);

	color:rgb(var(--nav-a-current-colour)) !important; /* Use !important to override nav:visited:hover below, which has higher specificy. */

	cursor: default;
}
nav a:hover
,nav a:visited:hover
{
	color:rgb(var(--nav-a-hover-colour));
}
nav a:hover
,nav li.current_page_ancestor > a:hover /* This increases the specificity enough to override the nav li.current_page_ancestor > a:link properties above. */
,nav li.current-menu-ancestor > a:hover /* This increases the specificity enough to override the nav li.current_page_ancestor > a:link properties above. */
,nav li.current-post-ancestor > a:hover /* This increases the specificity enough to override the nav li.current_page_ancestor > a:link properties above. */
,body.single nav li.blog-ancestor > a:hover /* This increases the specificity enough to override the nav li.current_page_ancestor > a:link properties above. */
{
	background-color:rgb(var(--nav-a-hover-background-colour),.1);
}
/*
Add a down arrow beside menu items that contain submenu items.
*/
nav li:has(> ul) > a::after
{
	position: relative;
	top: 2px;
	padding-left: 4px;
	font-family:"ElegantIcons";
	content:"3";
	font-size: 16px;
	font-weight: 800;
}
@media screen and (min-width:480px)
{
	/* Switch menu to a horizontal layout with pop-up submenu items. */
	nav
	{
		padding:0 0 5px;
		border-top:none;
		text-align:center;
	}
	nav #menu-toggle
	{
		display:none;
	}
	nav #menu
	{
		display:block;
		padding-bottom:0; /* Remove the bottom padding. */
		border-top:none;
	}
	nav ul
	{
		display:inline-block; /* This allows the menu to be centred. */
	}
	nav li
	{
		float:left;
		text-align:left; /* Remove the centre alignment. */
	}
	nav a
	,nav a:link
	,nav a:visited
	{
		position:relative;
		padding:8px 15px 12px;
	}
	nav li.current_page_item > a
	,nav li.current_page_item > a:link
	,nav li.current-menu-item > a
	,nav li.current-menu-item > a:link
	{
		background-color:transparent; /* Remove background-color for first level items. */
	}

	/* Styles for second level items. */

	nav li ul
	{
		display:block;

		opacity:0; /* Hide until hovered over. */
		visibility:hidden; /* Use visibility to show and hide submenu items so that the opacity property can be changed with a transition. (Transitions do not work if the display property changes.) */
		width:0; /* When using the visibility property to hide submenu items, wide hidden items will still overflow the page and allow unncessary scrolling. Set width to 0, and oferflow to hidden, and transition to the actual width on hover. */
		overflow:hidden;

		position:absolute;
		left:0px;
		top:100%;
		margin:0 !important; /* Remove the top margin. Use !important to override the style of "body.paper ul", which has higher specificy. */
		z-index:3; /* Set z-index so that it is not covered by subsequent items on the page. ".breadcrumb" is now sticky, and z-index:2, so this must be more than 2. */
		background-color:rgb(var(--nav-background-colour));
		box-shadow:0px 0px 20px rgba(var(--box-shadow-colour),.4);
		border-top:3px solid rgb(var(--a-link-colour));

		-webkit-transition:visibility 0s ease .3s,width 0s ease .3s,opacity .3s ease;
		-moz-transition:visibility 0s ease .3s,width 0s ease .3s,opacity .3s ease;
		-o-transition:visibility 0s ease .3s,width 0s ease .3s,opacity .3s ease;
		transition:visibility 0s ease .3s,width 0s ease .3s,opacity .3s ease;
	}
	nav li:hover > ul
	{
		/*
		display:block;
		*/
		opacity:1;
		visibility:visible;
		width:250px; /* Set the width of second level items. */
		overflow:visible;

		/* Unlike the transition effect, the transition-delay affects transitions to this style, not transitions away from this style. */
		-webkit-transition-delay:0s;
		-moz-transition-delay:0s;
		-o-transition-delay:0s;
		transition-delay:0s;
	}
	nav li li
	{
		float:none;
	}
	nav li li a
	{
		background-color:rgb(var(--nav-background-colour));
	}
	nav li li.current_page_item > a
	,nav li li.current_page_item > a:link
	,nav li li.current-menu-item > a
	,nav li li.current-menu-item > a:link
	{
		background-color:rgb(var(--nav-a-link-background-colour),.2); /* Re-add background-color for second level items. */
	}

	/*
	Add a right arrow beside menu items that contain submenu items.
	*/
	nav li li:has(> ul) > a::after
	{
		content:"5";
	}

	/* Styles for third level items. */

	nav li li ul
	{
		left:250px; /* The left posision should equal the width of the second level items (above). */
		margin-left:0; /* Remove the left margin. */
		top:0;
	}
}
@media screen and (min-width:950px)
{
	nav
	{
		float:left;
		padding:30px 0 20px 1%;
		width:55%;
		text-align:right; /* Switch to right alignment when this element to the rigth of <header>, instead of below it. */
	}
	nav li ul
	{
		left:auto;
		right:-6vw; /* Align this submenu to the right side of the parent menu item, so that it doesn't extend past the right edge of the screen. */
	}
}
@media print
{
	nav
	{
		display:none;
	}
}

/* Breadcrumb */

.breadcrumb-row
{
	display:block;
	position:sticky;
	/* top:calc(5px + 8px + 1px + (1em * 1.55)); /* Calculated to match the height of ".menu-user": text plus top/bottom margins, plus border. */
	top:0px; /* Calculated to match the height of ".menu-user": text plus top/bottom margins, plus border. */
	z-index:2;
	padding:4px 8% 7px; /* This padding should approximately match .user-menu */
	border-color:rgb(var(--breadcrumb-border-colour));
	border-style:solid;
	border-bottom-width:1px;
	clear:both;
	background:rgb(255,255,255,.8);
	
	color:rgb(var(--font-colour-soft));
	font-size:80%;
}
body.paper .breadcrumb-row
{
	padding-left:0;
	padding-right:0;
}
@media print
{
	.breadcrumb-row
	{
		display:none;
		padding-left:0;
		padding-right:0;
	}
}
.breadcrumb-row .row-container
{
	padding-top:7px;
	padding-bottom:7px;
}
.breadcrumb-row a:link
,.breadcrumb-row a:visited
{
	color:rgb(var(--font-colour-soft));
}
.breadcrumb-row a:hover
{
	color:rgb(var(--font-colour-soft));
}
span.breadcrumb-separator
{
	display:inline-block;
	width:5px;
	height:5px;
	margin:0 2px;
	background-image:url("images/breadcrumb-separator.png");
}

/* Search */

#search-1
{
	position:absolute;
	z-index:1; /* Set z-index so that it is not covered by subsequent items on the page. */
	right:5%;
	top:8px;
}
.search-box
{
	position:absolute;
	background-color:rgb(var(--search-background-colour));
	box-shadow:0px 0px 20px rgba(var(--box-shadow-colour),.4);
	padding:10px;
	right:-10px;
	top:2em;
}
.search-form
{
	white-space:nowrap;
}
#search-box-1
{
	display:none;
}
@media screen and (min-width:480px)
{
	#search-1
	{
		top:13px;
	}
}
@media screen and (min-width:950px)
{
	#search-1
	{
		top:17px;
	}
}

/* Feature */

.feature
{
	clear:both;
	background-color:rgb(var(--font-colour-normal));
	background-image:url("images/feature-background.png");
	background-repeat:repeat;

	color:rgb(var(--font-colour-normal-inverted));
	font-size:1.1em;
	line-height:1.4em;
}
.feature a.feature-previous
,.feature a.feature-previous:link
,.feature a.feature-next
,.feature a.feature-next:link
{
	display:block;
	position:absolute;
	z-index:2;
	top:0;
	padding:0 2%;
	width:4%;
	max-width:14px;
	height:100%;
	overflow:hidden;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
	
	border-width:0;
	background-position:center center;
	background-repeat:no-repeat;
	background-origin:content-box;
	background-size:contain;

	cursor:pointer;
}
.feature-previous
{
	background-image:url("images/feature-previous.png");
	left:0;
}
.feature-next
{
	background-image:url("images/feature-next.png");
	right:0;
}
.feature-previous:hover
{
	background-image:url("images/feature-previous-hover.png");
}
.feature-next:hover
{
	background-image:url("images/feature-next-hover.png");
}
.feature-item
{
	display:none;
	padding:1.5em 8% 0;
	margin:0;
}
.feature-text
{
	padding-bottom:1.5em;
}
img.feature-image
{
	float:right;
	width:40%;
	height:auto;
	margin:0 0 1.5em 1.5em;
}
.feature p
{
	margin-bottom:1em; /* This should be the same as the margin-top of li, below. */
}
.feature li
{
	margin-bottom:.3em;
}
.feature ol
,.feature ul
{
	margin-top:1em; /* This should be the same as the margin-bottom of li, above. */
}

@media screen and (min-width:480px)
{
	.feature-text
	{
		width:50%;
	}
}
@media screen and (min-width:950px)
{
	.feature
	{
		margin-left:-15px;
		margin-right:-15px;
		width:calc(100% + 30px); /* For some reason, possibly a rendering engine bug, Chrome doesn't make this element expand to fit the area when the negative margins expand the space allowed. */
	}
}

/* Content */

.page-title
{
	clear:both;
	padding:1.4% 0 1.9%;
	margin:0;

	color:rgb(var(--heading-colour));
	font-size:1.4em;
}
body.paper .page-title
{
	padding-left:0;
	padding-right:0;
	background: transparent;
	
	color:rgb(var(--font-colour-print));
}
@media print
{
	.page-title
	{
		padding-left:0;
		padding-right:0;
		padding-bottom:0;
		background: transparent;

		color:rgb(var(--font-colour-print));
	}
}
.content
{
	flex:1 1 auto; /* This is the only element in .container that is allowed to grow, so it will expand to fill the space. */
	clear:both;
	padding:1px 0 4%; /* The 1px padding-top prevents the top margin of .column-main-2 from collapsing with this element, and giving it an unwanted top margin. */
	z-index:0; /* Make sure the content is never on top of the menu or other header items. */

	line-height:1.3em;
	word-wrap:break-word;
	overflow-wrap:break-word;
}
body.content-bottom-padding-none .content
{
	padding-bottom: 0;
}
body.paper .content
{
	padding:0 0 2%;
	background: transparent;
	
	color:rgb(var(--font-colour-print));
}
@media print
{
	.content
	{
		padding:0 0 2%;
		background: transparent;
		
		color:rgb(var(--font-colour-print));
	}
	.content h1
	,.content h2
	{
		margin-left:0; /* Remove any outdent. */
	}
	.content a
	,.content a:link
	{
		border-width:0;
	}
}

.content:after
,.column-main:after
{
	/* For clearing */
	content:"";
	display:block;
	height:0;
	clear:both;
}
.column-secondary
{
	padding-top:6%;
}
.content h1
,.content h2
,.content h3
,.content h4
,.content h5
,.content h6
{
	margin-bottom:.6em;
	margin-top:.6em;
	line-height:1.1em;
}
h2 + .content h3
,h3 + .content h4
,h4 + .content h5
,h5 + .content h6
{
	margin-top:.4em;
}
/* Do not use h1 tags on any page. This will make it obvious if one is being used. */
/*
.content h1
{
	text-decoration:line-through; 
}
*/
.product-info h2
{
	margin-top:0;
	margin-left:0;
}
/*
.content h3
{
	font-style:italic;
}
*/
.content .subtitle
{
	font-size:75%;
}
h1 + .subtitle
,h2 + .subtitle
,h3 + .subtitle
,h4 + .subtitle
,h5 + .subtitle
,h6 + .subtitle
{
	margin-top:-1em;
}
.content a
,.content a:link
{
	text-decoration:none;
}
.cke a
,.cke a:link
{
	border-width:0;
}
p
,li
,blockquote
{
	margin-bottom:1em; /* This should be the same as the margin-top of li, below. */
}
ol
,ul
{
	margin-top:1em; /* This should be the same as the margin-bottom of li, above. */
}
/*
Reduce the default spacing for the paper and print display.
*/
body.paper
p
,body.paper
li
,body.paper
blockquote
{
	margin-bottom:.5em; /* This should be the same as the margin-top of li, below. */
}
body.paper
ol
,body.paper
ul
{
	margin-top:.5em; /* This should be the same as the margin-bottom of li, above. */
}
@media print
{
	p
	,li
	,blockquote
	{
		margin-bottom:.5em; /* This should be the same as the margin-top of li, below. */
	}
	ol
	,ul
	{
		margin-top:.5em; /* This should be the same as the margin-bottom of li, above. */
	}
}
.compact
{
	margin-bottom:1em; /* Move the usual bottom margin from the li to the list (ul or ol). */
}
.compact li
,.compact
{
	margin-bottom:.3em;
}
.compact ul
,.compact ol
{
	margin-top:.3em;
	margin-bottom:.3em;
}
.content img
,.content video
,div.wp-caption
{
	max-width:100%;
}
.content img
,.content video
{
	height:auto;
	margin-bottom:15px; /* This should be the same as the right margin of img.alignright and the left margin of img.alignleft. */
}
.content img.avatar
{
	float:left;
	margin:0 12px 12px 0;
	width:25%;
	height:auto;
	max-width:96px;
	max-height:96px; /* Fixes display issue in IE8 where the images get too tall. */
	min-width:50px;
}
.content .wp-smiley
{
	margin:0;
}
.content code
{
	background-color:rgb(var(--comment-background-colour));
	font-size:.9em;
}
.content pre code
{
	display:block;
	padding:2px 3px;
	margin:1em -3px;
}
.content span.breadcrumb-separator
{
	display:inline-block;
	width:5px;
	height:5px;
	margin:0 2px;
	background-image:url("images/breadcrumb-separator-light.png");
}
div.highlight
{
	margin:.8em calc(-2% - 2px);
	padding:.8em 2%;
	max-width:calc(104% + 4px);
	
	background-color:rgb(var(--highlight-background-colour));
	border:2px solid rgb(var(--border-colour));
	border-radius:4px;
	box-shadow:0 0 8px rgba(var(--box-shadow-colour),.2);
}
@media print
{
	div.highlight
	{
		margin-left:0;
		margin-right:0;
		max-width:100%;
		box-shadow: none;
	}
}
div.highlight h2
{
	margin-left:0; /* Remove outdent. */
}
div.highlight > h2
{
	margin-top:0; /* Remove top margin. */
}
table.highlight
{
	box-shadow:0 0 8px rgba(var(--box-shadow-colour),.2);
	background-color:rgba(var(--box-shadow-colour),.1); /* Make the background match the box shadow. Box shadow opacity is 50% of regular opacity. */
}
table.highlight td
{
	background-color:rgb(var(--highlight-background-colour));
}
table.highlight
,table.highlight tr
,table.highlight th
,table.highlight td
{
	border-color:transparent;
}
table.highlight tr:hover
{
	background-color:transparent; /* Remove background colour. */
}
img.shadow
{
	box-shadow:0 0 20px rgba(var(--box-shadow-colour), .3);
}
.wp-caption
{
	margin:.8em 0;
	padding:10px;
	background-color:rgb(var(--highlight-background-colour));
	box-shadow:0 0 8px rgba(var(--box-shadow-colour),.2);
}
.wp-caption-text
{
	text-align: center;
}
@media screen and (min-width:950px)
{
	.column-main
	{
		padding-top:0; /* Remove the top padding. */
		float:left;
		width:60%;
	}
	.column-main.column-main-wide
	,body.service-admin .column-main
	,body.service-invitations .column-main
	,body.service-recipes .column-main
	,body.service-repository .column-main
	,body.service-decision-aid .column-main
	,body#page-id-store-order-account .column-main
	,body#page-id-store-order-account-create .column-main
	,body#page-id-store-order-address .column-main
	,body#page-id-store-order-shipping .column-main
	,body#page-id-store-order-payment .column-main
	,body#page-id-store-order-review .column-main
	,body#page-id-store-order-complete .column-main
	{
		width:100%;
	}
	.column-secondary
	{
		padding-top:0; /* Remove the top padding. */
		float:left;
		padding-left:10%;
		width:40%;
	}
	.content .show-in-sidebar
	{
		position:absolute;
		right:-66%;
		max-width:50%;
	}
	/* Increase the negative right and left margins and the padding when the box is in the secondary column on a wide screen. */
	.column-secondary div.highlight
	{
		margin-right:-5%;
		margin-left:-5%;
		padding:.8em 5%;
		max-width:110%;
	}
	.column-secondary h2
	{
		margin-left:0; /* Remove outdent. */
	}
	/* Don't show anything in the sidebar on the search results page. */
	body.search-results .content .show-in-sidebar
	{
		position:relative;
		right:auto;
		max-width:100%;
	}
}

/* Blog */

ol.post-list
{
	margin-left:0;
}
ol.post-list > li
{
	list-style-type:none;
}
ol.post-list .post-list-content h1
,ol.post-list .post-list-content h2
,ol.post-list .post-list-content h3
,ol.post-list .post-list-content h4
,ol.post-list .post-list-content h5
,ol.post-list .post-list-content h6
{
	margin-left:0;
}
.content time
,.content .comment-link
{
	font-size:.8em;
	color:rgb(var(--font-colour-soft));
}
.content .comment-link
{
	float:right;
	text-align:right;
}
ul.sidebar-blog
{
	margin-left:0;
}
ul.sidebar-blog > li
{
	list-style-type:none;
}

/* Comments */

#comments article
{
	clear:both;
	margin:10px 0 -5px -5px; /* Negative bottom and left margins should match the border width of #comments li, and comments ul, below. */
	padding:10px;
	background-color:rgb(var(--comment-background-colour));
}
#comments #respond
{
	clear:both;
	margin:10px 0;
	padding:10px;
	background-color:rgb(var(--comment-background-colour));
}
#comments h1
,#comments h2
,#comments h3
,#comments h4
,#comments h5
,#comments h6
{
	margin-left:0;
}
/* First level */
#comments ul
,#comments ol
{
	margin-left:0;
}
/* Second level */
#comments li ul
,#comments li ol
{
	margin-left:15px;
	margin-bottom:-5px; /* Negative margin width should match the border width of #comments article, above, and comments li, below. */
}
#comments li
{
	margin-bottom:0;
	list-style-type:none;
	border-width:0 0 5px 5px; /* Border width should match the negative margin width of #comments article, and #comments ul, above. */
	border-style:solid;
	border-color:rgb(var(--comment-background-colour));
}
#comments h3
,#comments h4
{
	margin-bottom:0;
	padding-bottom:0;
}
#comments article h3
,#comments article h4
,#comments #respond h3
,#comments #respond h4
{
	margin-top:0;
}
#comments span.edit-link
{
	float:right;
}
#comments time
,#comments .comment-notes
,#comments .form-allowed-tags
{
	font-size:.8em;
}
#comments .comment-reply-link-container
{
	display:block;
	clear:left;
}
#comments .comment-form-author input
,#comments .comment-form-email input
,#comments .comment-form-url input
{
	display:block;
}
#comments textarea#comment
{
	width:100%;
}

@media print
{
	#comments #respond
	{
		display:none;
	}
}

/* Footer */

footer
{
	clear:both;
	padding:25px 0;
	
	color:rgb(var(--font-colour-normal-inverted));
	background-color:rgb(var(--header-footer-background-colour));
}
body.paper footer
{
	padding-left:0;
	padding-right:0;
	padding-bottom:0;

	color:rgb(var(--font-colour-print));
	background-color:transparent;
}
@media print
{
	footer
	{
		padding-left:0;
		padding-right:0;
		padding-bottom:0;
		
		color:rgb(var(--font-colour-print));
		background-color:transparent;
	}
}
footer:after
{
	content:"";
	display:block;
	clear:both;
}
footer a
,footer a:link
,footer a:visited
{
	color:rgb(var(--a-link-bright-colour));
	text-decoration:none;
	border-bottom-width:0;
}
.copy
{
	float:left;
}
a.footer-right
{
	display:block;
	float:right;
	padding:0;
	
	text-align:right;
}
a.eco
{
	padding-right:3.5em;
	width:10.5em;
	background:url("images/eco.png") top right no-repeat;
	background-size:contain;
}
@media print
{
	.copy
	{
		padding:0;
	}
	a.footer-right
	{
		padding:0;
		width:auto;

		color:rgb(var(--font-colour-print));
	}
}

/* Other */

.clear
{
	clear:both;
}
.alignleft
{
	float:left;
	margin-right:15px;
}
.alignright
{
	float:right;
	margin-left:15px;
}
.aligncenter
{
	clear:both;
	display:block;
	margin-left:auto;
	margin-right:auto;
}
p.alignleft
{
	float:none;
	text-align:left;
}
p.alignright
{
	float:none;
	text-align:right;
}
td.alignleft
,th.alignleft
{
	float:none;
	clear:none;
	display:table-cell;
	text-align:left;
	margin:0;
}
td.alignright
,th.alignright
{
	float:none;
	clear:none;
	display:table-cell;
	text-align:right;
	margin:0;
}
td.aligncenter
,th.aligncenter
{
	clear:none;
	display:table-cell;
	text-align:center;
	margin:0;
}
a.help:link, a.help:visited
,a.search:link, a.search:visited
,a.close:link, a.close:visited
,a.close-search:link, a.close-search:visited
,.available
,.not-available
,[type=submit].search
,input[type=button].search
,input[type=reset].close
,input[type=button].close
{
	display:inline-block;
	width:20px;
	height:20px;
	overflow:hidden;
	/*
	margin:-5px 3px;
	*/
	padding:0;
	vertical-align:baseline;

	background-color:transparent;
	border:none !important;
	text-indent:100%;
	white-space:nowrap;
	background-repeat:no-repeat;
	background-position:0px 0px;
	outline:none;
	box-shadow:none;
}
a.help:hover
,a.search:hover
,a.close:hover
,a.close-search:hover
,[type=submit].search:hover
,input[type=button].search:hover
,input[type=reset].close:hover
,input[type=button].close:hover
{
	background-color:transparent;
	background-position:0px -50px;
}
a.help:link, a.help:visited
{
	background-image:url("images/help.png");
}
a.search:link, a.search:visited
,[type=submit].search
,input[type=button].search
{
	background-image:url("images/search.png");
}
a.close:link, a.close:visited
,a.close-search:link, a.close-search:visited
,.not-available
,input[type=reset].close
,input[type=button].close
{
	background-image:url("images/close.png");
}
.available
{
	background-image:url("images/ok.png");
}
.button.previous::before
,.button.next::after
,.button.print::after
,.button.email::after
,.button.send::after
,.button.delete::after
,.button.download::after
{
	display:inline-block;
	font-family:"Material Symbols Outlined";
	vertical-align:bottom;
	width:1em;

	opacity:0;
	transition:margin .2s, opacity .2s;
}
.button.previous::before
{
	content:"navigate_before";
	content:"\e408";
	text-align: left;
	margin-right:-1em;
}
.button.next::after
,.button.print::after
,.button.email::after
,.button.send::after
,.button.delete::after
,.button.download::after
{
	text-align: right;
	margin-left:-1em;
}
.button.next::after
{
	content:"navigate_next";
	content:"\e409";
}
.button.print::after
{
	content:"print";
	content:"\e8ad";
}
.button.email::after
{
	content:"mail";
	content:"\e158";
}
.button.send::after
{
	content:"send";
	content:"\e163";
}
.button.delete::after
{
	content:"delete";
	content:"\e872";
}
.button.download::after
{
	content:"download";
	content:"\f090";
	vertical-align:middle;
}
.button.previous:hover::before
,.button.next:hover::after
,.button.print:hover::after
,.button.email:hover::after
,.button.send:hover::after
,.button.delete:hover::after
,.button.download:hover::after
{
	opacity:1;
}
.button.previous:hover::before
{
	margin-right:2px;
	margin-left:-3px;
}
.button.next:hover::after
,.button.print:hover::after
,.button.email:hover::after
,.button.send:hover::after
,.button.delete:hover::after
,.button.download:hover::after
{
	margin-left:2px;
	margin-right:-3px;
}
.button.print:hover::after
,.button.email:hover::after
,.button.send:hover::after
,.button.delete:hover::after
,.button.download:hover::after
{
	margin-left:5px;
}

/*
Override and adjust styles in content.css, without having to make a new copy of that stylesheet.
*/
.menu-user
{
	color:rgb(var(--font-colour-normal));
}
.list-sorting-options
{
	background-color:rgb(var(--input-background-colour)) !important;
}
.toggle::after
,.sortable span::after
{
	filter:invert(1); /* Turn the white image to black.*/
}
.pagination
{
	background-color:rgb(var(--highlight-background-colour)) !important;
}
.popup-dialogue h1
,.popup-dialogue h2
,.popup-dialogue h3
,.popup-dialogue h4
,.popup-dialogue h5
,.popup-dialogue h6
{
	color: rgb(var(--heading-colour));
}

/* Decision aid styles */

:root
{
	--non-surgical-colour:233,131,43; /* orange */
	--surgery-colour:40,110,168; /* blue */
	--unsure-colour:150,150,150; /* grey */
	--other-colour:var(--border-colour); /* dark blue */

	--level-1-colour:98, 166, 214;
	--level-2-colour:42, 46, 203;
	--level-3-colour:255, 192, 0;
	--level-4-colour:255, 152, 18;
	--level-5-colour:193, 109, 0;
}
.decision-aid-navigation-section-list
{
	display:block;
	position:relative;
	padding:7px 0; /* This padding should approximately match .breadcrumb-row */
	padding:0;
	clear:both;
	margin:0 calc(50% - 50vw + (var(--scrollbar-width) / 2)); /* Create a negative left and right margin to allow this to expand outside of its parent container and be full screen width. */

	background-color:rgb(240, 240, 240);
}
.decision-aid-navigation-title
{
	display:block;
	position:relative;
	padding:7px 0; /* This padding should approximately match .breadcrumb-row */
	clear:both;
	margin:0 calc(50% - 50vw + (var(--scrollbar-width) / 2)); /* Create a negative left and right margin to allow this to expand outside of its parent container and be full screen width. */
}
@media print
{
	.decision-aid-navigation-section-list
	,.decision-aid-navigation-title
	{
		margin:0 calc(50% - 50vw); /* Recalculate the negative left and right margin without the scrollbar width. */
	}
}
.decision-aid-navigation-title h1
{
	margin-top:.5em;
	color: rgb(var(--nav-a-hover-colour));
}
.decision-aid-navigation-title .subtitle
{
	margin-bottom:.5em;
}
.decision-aid-navigation-title hr
{
	margin:.5em 0 0;
}

.decision-aid-section-list
{
	margin:0 auto;
	display:grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap:clamp(0px,2vw,15px);
	position: relative;
	padding:clamp(0px,2vw,15px) 0 0;
	max-width:35em;

	counter-reset:section-number;
}
.decision-aid-section-list li
{
	list-style: none;
	display:block;
	position: relative;
	margin: 0;
	padding: 0;
	min-width:20%;
}
.decision-aid-section-list li div::before
{
	content:"";
	display:block;
	width:100%;
	padding-top: 100%;
}
.decision-aid-section-list li a
,.content .decision-aid-section-list li a
{
	display:block;
	position: absolute;
	top:0;
	width:100%;
	height: 100%;
	border: clamp(2px,1.7vw,8px) solid rgb(15, 155, 251);
	border-radius: 1000px;
	text-align: center;
	padding-top: calc(60% - 0.4em);
	line-height:0em;
	background-color:rgb(255,255,255);
	
	color:inherit;
	font-size: clamp(.5em,8vw,3em);
	font-weight: bold;
}
.decision-aid-section-list li a::before
{
	counter-increment:section-number;
	content:counter(section-number);
}
.decision-aid-section-list li a.complete
{
	background-color: rgb(230, 230, 230);
}
.decision-aid-section-list li a.current
,.decision-aid-section-list li a.complete.current
{
	/* cursor:default; /* Prevent the cursor from changing on :hover, so it doesn't resemble a link. */
	/*
	border-color: rgb(var(--a-link-colour));
	*/
	background-color: rgb(15, 155, 251);
	color: rgb(var(--font-colour-normal-inverted));
}
.decision-aid-section-list li a.current:hover
{
	color:inherit; /* Prevent the colour from changing on :hover, so it doesn't resemble a link. */
	color: rgb(var(--font-colour-normal-inverted));
}
.decision-aid-section-list .decision-aid-navigation-heading
,.decision-aid-section-list h3
{
	margin:.5em 0;

	font-size: .9em;
	text-align: center;
	overflow-wrap: break-word;
}
.decision-aid-section-list h3
{
	font-size: 1.2em;
}

.decision-aid-navigation-buttons
{
	position:sticky;
	bottom:0;
	background-image:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.75) 60%);
}
@media print
{
	.decision-aid-navigation-buttons
	{
		display:none;
	}
}

.decision-aid-threshold-container
{
	display: flex;
	flex-direction: column;
	gap:10px;
	margin-bottom:10px;
}
.decision-aid-threshold-label
{
	flex:1 1 20%;
}
.decision-aid-information-container
,.decision-aid-treatment-container{
	flex:1 1 80%;
}
.decision-aid-information-container
{
	display:flex;
	flex-direction: column;
	gap:10px;
}
.d-a-information-heading-optional
{
	display:block;
}
@media (min-width:900px), print and (min-width:500px) /* The pixel width of a printed page in Chrome in portrait is 555px. */
{
	.decision-aid-threshold-container
	{
		flex-direction: row;
		/*
		align-items: baseline;
		*/
	}
}
@media (min-width:800px), print and (min-width:500px) /* The pixel width of a printed page in Chrome in portrait is 555px. */
{
	.decision-aid-information-container
	{
		flex-direction: row;
	}
	.d-a-information-heading-optional
	{
		display:none;
	}
}
img.decision-aid-information-icon
{
	display: block;
	width:100%;
	max-width:300px;
	margin:0 auto;
}
.decision-aid-information-column.d-a-non-surgical-management
,.decision-aid-information-column.d-a-surgery
,.decision-aid-information-column.d-a-unsure
{
	flex:1 1 0%; /* The 0% basis seems to force them to be the same size, regardess of their content. */
}
.decision-aid-information-column
{
	padding:15px;
	
	border-width:1px;
	border-style:solid;
	border-radius: 2px;
}
.decision-aid-information-column h3:first-of-type
{
	margin-top:0;
}
.decision-aid-information-column.d-a-surgery h3:first-of-type
{
	color:rgb(var(--surgery-colour));
}
.decision-aid-information-column.d-a-non-surgical-management h3:first-of-type
{
	color:rgb(var(--non-surgical-colour));
}
.decision-aid-information-column-aligned
{
	display:flex;
	flex-direction: column;
	justify-content: space-between;
}
.decision-aid-information-column .decision-aid-information-column-top
,.decision-aid-information-column .decision-aid-information-column-bottom
{
	flex:0 1 auto;
}
.decision-aid-use-it-container
{
	display:flex;
	flex-direction:row;
	gap: 10px;
}
.decision-aid-use-it-option
{
	flex:0 1 8em; /* The 0% basis seems to force them to be the same size, regardess of their content. */
	vertical-align: baseline;
}

.d-a-surgery
,.d-a-surgery .decision-aid-treatment-label
,.d-a-surgery .decision-aid-importance-label
,.d-a-surgery .decision-aid-importance-summary
{
	border-color:rgb(var(--surgery-colour));
}
.d-a-surgery.highlighted
,.d-a-surgery.decision-aid-treatment-label:has(input:checked)
,.d-a-surgery .decision-aid-importance-label:has(input:checked)
{
	background:none;
	background-color:rgba(var(--surgery-colour),.2);
}
.d-a-surgery.decision-aid-treatment-label:hover
,.d-a-surgery .decision-aid-importance-label:hover
{
	background-color:rgba(var(--surgery-colour),.3);
}
.d-a-surgery .decision-aid-importance-summary
{
	background-color:rgba(var(--surgery-colour),.8);
}
.d-a-non-surgical-management
,.d-a-non-surgical-management .decision-aid-treatment-label
,.d-a-non-surgical-management .decision-aid-importance-label
,.d-a-non-surgical-management .decision-aid-importance-summary
{
	border-color:rgb(var(--non-surgical-colour));
}
.d-a-non-surgical-management.highlighted
,.d-a-non-surgical-management.decision-aid-treatment-label:has(input:checked)
,.d-a-non-surgical-management .decision-aid-importance-label:has(input:checked)
{
	background-color:rgba(var(--non-surgical-colour),.2);
}
.d-a-non-surgical-management.decision-aid-treatment-label:hover
,.d-a-non-surgical-management .decision-aid-importance-label:hover
{
	background-color:rgba(var(--non-surgical-colour),.3);
}
.d-a-non-surgical-management .decision-aid-importance-summary
{
	background-color:rgba(var(--non-surgical-colour),.8);
}
.d-a-unsure
,.d-a-unsure .decision-aid-treatment-label
,.d-a-unsure .decision-aid-importance-label
,.d-a-unsure .decision-aid-importance-summary
{
	border-color:rgb(var(--unsure-colour));
}
.d-a-unsure.highlighted
,.d-a-unsure.decision-aid-treatment-label:has(input:checked)
,.d-a-unsure .decision-aid-importance-label:has(input:checked)
{
	background-color:rgba(var(--unsure-colour),.2);
}
.d-a-unsure.decision-aid-treatment-label:hover
,.d-a-unsure .decision-aid-importance-label:hover
{
	background-color:rgba(var(--unsure-colour),.3);
}
.d-a-unsure .decision-aid-importance-summary
{
	background-color:rgba(var(--unsure-colour),.8);
}
.d-a-other
,.d-a-other .decision-aid-treatment-label
,.d-a-other .decision-aid-importance-label
,.d-a-other .decision-aid-importance-summary
{
	border-color:rgb(var(--font-colour-normal));
}
.d-a-other.highlighted
,.d-a-other.decision-aid-treatment-label:has(input:checked)
,.d-a-other .decision-aid-importance-label:has(input:checked)
{
	background-color:rgba(var(--font-colour-normal),.2);
}
.d-a-other.decision-aid-treatment-label:hover
,.d-a-other .decision-aid-importance-label:hover
{
	background-color:rgba(var(--font-colour-normal),.3);
}
.d-a-other .decision-aid-importance-summary
{
	background-color:rgba(var(--font-colour-normal),.8);
}
.d-a-no-border
{
	border-color:transparent;
}

.decision-aid-treatment-container
{
	display:flex;
	flex-direction: column;
	row-gap: 10px;
	column-gap: 10px;
}
@media (min-width:800px), print and (min-width:500px) /* The pixel width of a printed page in Chrome in portrait is 555px. */
{
	.decision-aid-treatment-container
	{
		flex-direction: row;
	}
}

.decision-aid-treatment-label
{
	flex:1 1 0%; /* The 0% basis seems to force them to be the same size, regardess of their content. */
	padding:5px 8px;

	text-align: center;
	border-width:3px;
	border-style:solid;
	border-radius:7px;
	background-color:rgb(255,255,255);
	line-height: 1.8em; /* This seems to be the right amount to center the content vertically. */
}
@media (min-width:800px), print and (min-width:500px) /* The pixel width of a printed page in Chrome in portrait is 555px. */
{
	.decision-aid-treatment-label
	{
		align-self:center;
	}
}

.decision-aid-importance-container
{
	display:flex;
	flex-direction: column;
	row-gap: 10px;
	column-gap: 10px;
}
.decision-aid-importance-block
{
	flex:1 1 0%; /* The 0% basis seems to force them to be the same size, regardess of their content. */
}
.decision-aid-importance-block:nth-child(1)
{
	text-align:left;
}
.decision-aid-importance-block:nth-child(2)
{
	text-align:center;
}
.decision-aid-importance-block:nth-child(3)
{
	text-align:right;
}
@media (min-width:600px), print and (min-width:500px) /* The pixel width of a printed page in Chrome in portrait is 555px. */
{
	.decision-aid-importance-container
	{
		flex-direction: row;
	}
	.decision-aid-importance-block:nth-child(1)
	{
		padding-top:8px;
		text-align:right;
	}
	.decision-aid-importance-block:nth-child(2)
	{
		width:230px;
		min-width:230px;
		max-width:230px;
	}
	.decision-aid-importance-block:nth-child(3)
	{
		padding-top:8px;
		text-align:left;
	}
}

.decision-aid-choice-summary-container .decision-aid-choice-answer
,.decision-aid-summary-choice-answer
{
	counter-reset:d-a-importance;
}
.decision-aid-importance-label
,.decision-aid-importance-summary
{
	display:inline-block;
	padding:5px 8px;
	width:35px;
	margin:0 2px;	

	text-align: center;
	border-width:3px;
	border-style:solid;
	border-radius:7px;
	background-color:rgb(255,255,255);
}
.decision-aid-importance-summary
{
	padding:2px 0;
	width:30px;
	margin:1px 1px 0;
}
.decision-aid-importance-summary::before
{
	display:inline;
	counter-increment:d-a-importance;
	content:counter(d-a-importance);
	font-size:.8em;
	color:rgb(var(--font-colour-normal-inverted));
}
.decision-aid-treatment-label input
,.decision-aid-importance-label input
{
	/* Hide the actual radio button */
	position: fixed;
	opacity: 0;
	pointer-events: none;
}

.material-symbols-outlined.lowered
{
	vertical-align: bottom;
}

.decision-aid-choice-summary-container
{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	margin-left:1px;
	transform:scale(1);
	box-shadow:none;
	transition: background-color 3s ease, box-shadow 3s ease;
}
.decision-aid-choice-summary-container.moved
{
	background-color:rgb(var(--highlight-background-colour));
	box-shadow:0 0 8px rgba(var(--box-shadow-colour),.4);
	transition: background-color 0s;
}
.decision-aid-choice-title
{
	flex:1 1 200px;
	margin:-1px 0 0 -1px;
	padding:8px;
	border:1px solid rgb(var(--border-colour));
	vertical-align: middle;
}
.decision-aid-choice-answer-container
{
	flex:1 1 500px;
	display:flex;
}
.decision-aid-choice-answer
{
	flex:1 1 0%;
	margin:-1px 0 0 -1px;
	padding:8px;
	border:1px solid rgb(var(--border-colour));
}
.decision-aid-choice-importance-rank-container
{
	float:right;
	display:flex;
	align-items:center;
	gap:3px;
	margin-left:8px;
}
.decision-aid-choice-importance-rank-number
,.decision-aid-choice-importance-rank-arrows
{
	display: block;
	flex:1 1 0%;
}
.decision-aid-choice-importance-rank
{
	font-size:1.7em;
	width:1.5em;
}
.decision-aid-choice-importance-rank::-webkit-inner-spin-button
{
	display:none;
}
.decision-aid-choice-importance-rank-arrows .up
,.decision-aid-choice-importance-rank-arrows .down
{
	display: block;
	
	font-family:"Material Symbols Outlined";
	font-size:1.6em;
}
.decision-aid-choice-importance-rank-arrows .up
{
	margin-bottom:3px;
}
.decision-aid-choice-importance-rank-arrows .up::before
{
	content:"keyboard_arrow_up";
}
.decision-aid-choice-importance-rank-arrows .down::before
{
	content:"keyboard_arrow_down";
}

.decision-aid-summary-choice-container
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap:15px;
	max-width:50em;
}
.decision-aid-summary-choice-question
,.decision-aid-summary-choice-answer
{
	flex:1 1 15em;
}
.decision-aid-summary-choice-answer
{
	text-align: center;
}

dl.people-o-gram
{
	margin-left:5%;
	padding-top:15px;
}
.people-o-gram-small dl.people-o-gram
{
	margin-left:0;
	padding-top:5px;
}
dl.people-o-gram > div
{
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: 10px;

	/*
	float:left;
	clear:left;
	width:100%;
	*/
	padding:.1em 7px;

	border-style:solid;
	border-radius: 5px;
}
dl.people-o-gram > div dt
{
	flex:1 0 auto;
	width:15em;
}
dl.people-o-gram > div dd	
{
	flex:3 3 auto;
	width:10em;
	font-size:1.2em;
}
dl.people-o-gram > div.people-o-gram-user-current
{
	padding:3px 5px;
	border-width:2px;
}
dl.people-o-gram > div.people-o-gram-user-current::before
{
	font-family:"Material Symbols Outlined";
	font-variation-settings:
		'FILL' 1,
		'wght' 300,
		'GRAD' 0,
		'opsz' 24;
	content:"star";
	display:block;
	position: absolute;
	left:-.75em;
	top:-.05em;
	font-size:4em;
}
dl.people-o-gram > div.people-o-gram-user-current::after
{
	content:"You";
	display:block;
	position: absolute;
	left:-2.2em;
	top:-.05em;
	font-size:.7em;
	color:rgb(var(--font-colour-normal-inverted));
}
@media print
{
	dl.people-o-gram > div.people-o-gram-user-current::before
	{
		left:auto;
		right:0;
	}
	dl.people-o-gram > div.people-o-gram-user-current::after
	{
		left:auto;
		right:2.1em;
	}

}
dl.people-o-gram dd.people-o-gram-people
{
	font-family:"Material Symbols Outlined";
	font-variation-settings:
		'FILL' 1,
		'wght' 700,
		'GRAD' 0,
		'opsz' 24;
	word-break: break-all;
	font-size:.9em;
	letter-spacing: -.15em;
}
dl.people-o-gram div.people-o-gram-level-1
{
	border-color:rgb(var(--level-1-colour));
}
dl.people-o-gram div.people-o-gram-level-2
{
	border-color:rgb(var(--level-2-colour));
}
dl.people-o-gram div.people-o-gram-level-3
{
	border-color:rgb(var(--level-3-colour));
}
dl.people-o-gram div.people-o-gram-level-4
{
	border-color:rgb(var(--level-4-colour));
}
dl.people-o-gram div.people-o-gram-level-5
{
	border-color:rgb(var(--level-5-colour));
}


dl.people-o-gram .people-o-gram-level-1 dd
{
	color:rgb(var(--level-1-colour));
}
dl.people-o-gram .people-o-gram-level-2 dd
{
	color:rgb(var(--level-2-colour));
}
dl.people-o-gram .people-o-gram-level-3 dd
{
	color:rgb(var(--level-3-colour));
}
dl.people-o-gram .people-o-gram-level-4 dd
{
	color:rgb(var(--level-4-colour));
}
dl.people-o-gram .people-o-gram-level-5 dd
{
	color:rgb(var(--level-5-colour));
}
span.people-o-gram-legend-person
{
	font-family:"Material Symbols Outlined";
	font-variation-settings:
		'FILL' 1,
		'wght' 700,
		'GRAD' 0,
		'opsz' 24;
	font-size:.9em;
	vertical-align: bottom;
}
span.people-o-gram-person-half
{
	display:inline-block;
	width:.55em;
	overflow:hidden;
	vertical-align: top;
}
.people-o-gram-small
{
	/*
	The people-o-gram charts on the threshold pages may need to be smaller.
	They can be adjusted by just decreasing the font-size here.
	*/
	font-size:1em;
}
.people-o-gram-small .people-o-gram-legend
{
	display:none;
}

.threshold-months-container
{
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap:10px;
	row-gap:15px;
	margin-bottom:.4em;
}
.threshold-months
{
	flex:0 0 0%;
	width:4.5em;

	text-align: center;
	font-family:"Material Symbols Outlined";
	font-variation-settings:
		'FILL' 0,
		'wght' 400,
		'GRAD' 0,
		'opsz' 24;
	font-size:2.1em;
	line-height: 1.1em;
	color:rgba(var(--font-colour-soft),.4);
}
.threshold-months span.threshold-months-wait-time
{
	font-variation-settings:
	'FILL' 1,
	'wght' 400,
	'GRAD' 0,
	'opsz' 24;
	color:rgb(var(--font-colour-normal));
}
.threshold-months-description
{
	text-align: center;
}
.threshold-highlight
{
	background-color:rgb(var(--highlight-background-colour));
	background: radial-gradient(rgb(var(--highlight-background-colour)) 40%,rgb(220,220,220));
	box-shadow:0 0 8px rgba(var(--box-shadow-colour),.35);
}
.threshold-highlight .threshold-months-description
{
	font-weight: bold;
}

span.eq5d-level-1::before
,span.eq5d-level-2::before
,span.eq5d-level-3::before
,span.eq5d-level-4::before
,span.eq5d-level-5::before
{
	font-family: "Material Symbols Outlined";
	font-variation-settings:
		'FILL' 1,
		'wght' 300,
		'GRAD' 0,
		'opsz' 24;
	content:"\e3c6"; /* crop_square */
	margin:0 2px 0 -2px;
	vertical-align:top;
}
span.eq5d-level-1::before
{
	color:rgba(var(--level-1-colour),1);
}
span.eq5d-level-2::before
{
	color:rgba(var(--level-2-colour),1);
}
span.eq5d-level-3::before
{
	color:rgba(var(--level-3-colour),1);
}
span.eq5d-level-4::before
{
	color:rgba(var(--level-4-colour),1);
}
span.eq5d-level-5::before
{
	color:rgba(var(--level-5-colour),1);
}

span.eq5d-level-1
,span.eq5d-level-2
,span.eq5d-level-3
,span.eq5d-level-4
,span.eq5d-level-5
{
	padding:0px 5px 2px 6px;
	outline-style:solid;
	outline-width:1px;
	outline-offset: -1px;
	border-radius: 4px;
}
span.eq5d-level-1
{
	outline-color:rgba(var(--level-1-colour),.5);
	background-color:rgba(var(--level-1-colour),.1);
}
span.eq5d-level-2
{
	outline-color:rgba(var(--level-2-colour),.5);
	background-color:rgba(var(--level-2-colour),.1);
}
span.eq5d-level-3
{
	outline-color:rgba(var(--level-3-colour),.5);
	background-color:rgba(var(--level-3-colour),.1);
}
span.eq5d-level-4
{
	outline-color:rgba(var(--level-4-colour),.5);
	background-color:rgba(var(--level-4-colour),.1);
}
span.eq5d-level-5
{
	outline-color:rgba(var(--level-5-colour),.5);
	background-color:rgba(var(--level-5-colour),.1);
}

.chart-container-sankey-side-by-side
{
	margin-left:5%;
	margin-bottom:0;
	padding-top:35px;
	padding-bottom:10px;
	max-width:100%;
}
.chart-container-sankey
{
	margin-bottom:0;
	padding-top:35px;
	padding-bottom:10px;
	max-width:100%;
}
.chart-container-sankey-both
{
	display:flex;
	flex-direction: row;
	gap:10px; /* Match the vertical spacing between the Sankey nodes ("nodePadding:10"). */
}
.chart-container-sankey-left
{
	flex:1 1 0%;
}
.chart-container-sankey-right
{
	flex:1 1 0%;
}
.chart-container-sankey svg > g > text
,.chart-container-sankey-side-by-side svg > g > text
{
	/* This works, and still shows tooltips. Maybe I'll implement it...
	display:none;
	*/
}
.chart-sankey-label-container
{
	flex:none;
	display:flex;
	flex-direction: row;
	gap:15px;
	margin-top:5px;
	margin-bottom:15px;
}
.chart-sankey-label-container > div
{
	flex:1 1 0%;
	padding: 5px 8px;
	border-width: 1px;
	border-style: solid;
	border-radius: 2px;
}
.chart-sankey-label-container > div.chart-sankey-label-non-surgical
{
	border-color: rgb(var(--non-surgical-colour));
	background-color: rgba(var(--non-surgical-colour),.2);
	
	text-align: left;
}
.chart-sankey-label-container > div.chart-sankey-label-non-surgical.right
{
	text-align: right;
}
.chart-sankey-label-container > div.chart-sankey-label-unsure
{
	border-color: rgb(var(--unsure-colour));
	background-color: rgba(var(--unsure-colour),.2);
	
	text-align: center;
}
.chart-sankey-label-container > div.chart-sankey-label-unsure.left
{
	text-align: left;
}
.chart-sankey-label-container > div.chart-sankey-label-arrow
{
	/* When the sankey diagrams are not displayed side-by-side, this arrow should take up more space (be allowed to grow the same as the other boxes).
	flex:0 1 0%;
	*/
	flex:.2 1 0%;
	text-align: center;

	display:flex;
	align-items: center;
	justify-content: center;

	border-color:transparent;
}
.chart-container-sankey-side-by-side .chart-sankey-label-container > div.chart-sankey-label-arrow
{
	flex:0 1 0%;
}
.chart-sankey-label-container > div.chart-sankey-label-surgery
{
	border-color: rgb(var(--surgery-colour));
	background-color: rgba(var(--surgery-colour),.2);
	
	text-align: right;
}
.sankey-label-direction
{
	font-family: "Material Symbols Outlined";
	vertical-align: top;
	
	font-size: 1.8em;
	font-weight: 500;
}

.review-surgery-certain
,.review-surgery-mild
,.review-unsure
,.review-non-surgical-mild
,.review-non-surgical-certain
{
	display:block;
	padding: 8px 8px;
	border-width: 3px;
	border-width: 1px;
	border-style: solid;
	border-radius: 7px;
	border-radius: 2px;
}
.review-surgery-certain
{
	border-color:rgba(var(--surgery-colour),1);
	background-color: rgba(var(--surgery-colour),.2);
}
.review-surgery-mild
{
	border-color:rgba(var(--surgery-colour),.8);
	background-color: rgba(var(--surgery-colour),.1);
}
.review-unsure
{
	border-color:rgba(var(--unsure-colour),1);
	background-color: rgba(var(--unsure-colour),.1);
}
.review-non-surgical-mild
{
	border-color:rgba(var(--non-surgical-colour),.8);
	background-color: rgba(var(--non-surgical-colour),.1);
}
.review-non-surgical-certain
{
	border-color:rgba(var(--non-surgical-colour),1);
	background-color: rgba(var(--non-surgical-colour),.2);
}

.review-surgery-certain:has(input:checked)
{
	background-color: rgba(var(--surgery-colour),.4);
}
.review-surgery-mild:has(input:checked)
{
	background-color: rgba(var(--surgery-colour),.3);
}
.review-unsure:has(input:checked)
{
	background-color: rgba(var(--unsure-colour),.3);
}
.review-non-surgical-mild:has(input:checked)
{
	background-color: rgba(var(--non-surgical-colour),.3);
}
.review-non-surgical-certain:has(input:checked)
{
	background-color: rgba(var(--non-surgical-colour),.4);
}

@media print
{
	h1.summary-title
	{
		margin-top:0;
	}
}
#chart-summary-non-surgical-container
,#chart-summary-surgery-container
{
	overflow: hidden;
}
#chart-summary-non-surgical
,#chart-summary-surgery
{
	max-width: 720px; /* This seems to be the maximum width that fits on the page when the page is is converted to PDF using Chrome headless. */
	margin-left:20px;
	margin-top:20px;
}
.summary-understanding-container
{
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap:15px;
}
.summary-understanding-container > div
{
	flex:1 1 0;
	text-align: center;
}
.summary-understanding-heading
{
	font-weight: bold;
}
.summary-understanding-icon
{
	margin:5px 0 5px;
	color:rgb(var(--surgery-colour));
	font-family:"Material Symbols Outlined";
	font-weight: bold;
	font-size: 3em;
	line-height: 1em;
}

.zoom-level
{
	font-family:"Material Symbols Outlined";
	font-variation-settings:
		'FILL' 0
		,'wght' 400
		,'GRAD' 0
		,'opsz' 24;
}
.zoom-level .zoom-in
,.zoom-level .zoom-out
{
	display: inline-block;
	vertical-align: middle;
	margin:-.3em 0;
}
.zoom-level .zoom-out
{
	font-size:1.5em;
}
.zoom-level .zoom-in
{
	font-size:2em;
	font-variation-settings:
		'FILL' 0
		,'wght' 300
		,'GRAD' 0
		,'opsz' 24;
	margin-left:-2px;
}
.keyboard-key
{
	padding: 0px 5px 1px 5px;
	outline-style: solid;
	outline-width: 1px;
	outline-offset: -1px;
	outline-color:rgb(var(--font-colour-normal));
	border-radius: 4px;
	background-color:rgba(var(--font-colour-normal),.1);
}