:root {
	--bs-font-sans-serif: 'Noto Sans', sans-serif;
}

/** keep footer at bottom of page using flexbox **/
body{ min-height: 100vh; margin:0; }
body{ display:flex; flex-direction:column; }
main.main-ctn{ flex:1; }
footer{ min-height:50px; }

.hidden {
    display: none!important;
}

.error {color: red;}

a[href^="https://"][target=_blank]:not(.not_ext):after,
a[href^="http://"][target=_blank]:not(.not_ext):after,
a[href^="ftp://"][target=_blank]:after {
  content: "\f08e";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 0.9rem;
  display: inline-block;
  text-decoration: none;
  padding: 0px 3px;
  display:inline;
}

a[href^="http://"][target=_blank].ignoreExtLink:after {
	content: "";
}

#username {
	min-width: 300px
}

.bg-lblue { background-color: #e9f4ff !important; }
.bg-blue { background-color:#3baae3; }
.bg-white { background-color:white; }
.bg-lgrey { background-color: #D3D3D3  !important; }
.bg-dblue { background-color: #002e5d; }
.bg-red { background-color:red; }
.bg-green { background-color:green; }

.cr-blue { color:#3baae3; }
/* the darker house blue (as bg-dblue), for text and icons: cr-blue is 2.6:1 on white and so
   falls below the WCAG AA minimum of 4.5:1 for text and 3:1 for graphics */
.cr-dblue { color:#002e5d; }
.cr-white { color:white !important; }

.cr-green { color:green }
.cr-pink { color: #5e0034 !important }
.cr-strongred { color:#C00000 !important }
.cr-olivedrab { color:olivedrab }
.cr-blueviolet { color:blueviolet }
.cr-chocolate { color:chocolate }
.cr-wheat { color:wheat }

/* the e-mail address revealed in the Contact Us modal is a plain link, so it keeps the default
   link blue - only 4.1:1 on the alert background. Bootstrap's own alert-link colour gives 9.3:1,
   with the underline kept so the address still reads as a link. */
#contact-address a { color:#523e02; text-decoration:underline; }

/* the Quick Start Guide link above the Contact Us topics: the default link blue is 4.0:1 on the
   light blue panel, short of the WCAG AA 4.5:1 minimum, so use the house dark blue at 12.2:1 */
#contact-intro a { color:#002e5d; text-decoration:underline; }

/* the login row in the topic list opens in place, so point the chevron at what it will do */
#contact-login-toggle .fa-angle-down { transition:transform .2s; }
#contact-login-toggle[aria-expanded="true"] .fa-angle-down { transform:rotate(180deg); }

/* the colour is the entire content of these swatches, so unlike a decorative fill they have to
   survive printing - a printed pedigree keeps its colours, because svg fill is not a background,
   and the key beside it would otherwise come out blank. Used by the Quick Start Guide's Table 3
   and by the pedigree key on the results Inputs tab. */
.bg-breast_cancer,
.bg-breast_cancer2,
.bg-ovarian_cancer,
.bg-pancreatic_cancer,
.bg-prostate_cancer {
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.bg-breast_cancer { background-color:#F68F35 }
.bg-breast_cancer2 { background-color:pink }
.bg-ovarian_cancer { background-color:#306430 }
.bg-pancreatic_cancer { background-color:#4289BA }
.bg-prostate_cancer { background-color:#D5494A }

.font-size-lg {font-size:large !important;}
.fs-sm {
    font-size: 0.9rem!important;
}

.w10 { width:10% }
.w20 { width:20% }
.w25 { width:25% }
.w35 { width:35% }
.w50 { width:50% }
.w65 { width:65% }
.w100 { width:100% }
.w-auto { width: auto!important; }
.w-95 { width:95% !important; }

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

.navbar {
  background-color: #002e5d;
}

.navbar-toggler {
   border-color: white;
   color: white;
}

.navbar-nav>li>a, .navbar-nav>li>button, .navbar-nav>li>form>button, .footer a, .footer a:active, .footer a:hover{
	color: #d9e7f7 !important;
	text-decoration: none;
}

.navbar-nav a.nav-link:active,
.navbar-nav a.nav-link:hover,
.navbar-nav a.nav-link.show {
	color: #FFF !important;
	text-decoration: underline;
}

.pink-navbar {
	background-color:#EC5578;margin:5px 0 5px 0;padding:6px 0 0 0;
}

div.terms_n_conditions {
	height:200px;
	border:1px solid #ccc;
	background:#f2f2f2;
	overflow-x:hidden;
	overflow-y:auto;
	font-size: medium;
}

div#tandc div {white-space: pre-wrap;}

.prs_plots {max-width:370px;min-width:240px}
.cancer_plot {max-width:650px;min-width:270px;}

/* font awesome stacked green tick marks */
.fa-sm, .fa-sm>.fa-stack-1x {
    width:1em;
    height:1em;
    margin-top:-6px;
}

.fa-rotate-45 {
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg);
}

/* Large devices (laptops/desktops, 992px and up to 1200px) */
@media only screen and (min-width: 992px) and (max-width: 1200px) {
	[id^="iarray"] .riskTxtMinHgt {min-height:195px;}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	[id^="iarray"] .riskTxtMinHgt {min-height:165px;}
}

div.riskplot-tooltip {
    position: absolute;
    font-size: 0.95em;
    font-weight: bold;
    background: lightsteelblue;
    border: 0px;
    border-radius: 8px;
    pointer-events: none;
}


/* print styles
-------------------------------------------------- */

.page-break { page-break-before: always; }

@media print {
	.hidden { display: none !important; }
	table {
    	border-collapse: collapse;
    	margin-bottom: 5px;
	}
	table, th, td {
		border: 1px solid #ddd;
		font-size: 0.95em;
	}
	h3 {
		margin: 15px;
		padding-top: 15px;
	}
	.panel-primary, .alert, .svg {
		margin: 15px;
	}
	.panel-heading {
		font-weight: bold;
		font-size: large;
	}
	.no-print {
        display: none !important;
    }
}

@media print and (min--moz-device-pixel-ratio:0) {  /* mozilla specific background & colour  */
	th.population-risk {
		box-shadow: inset 0 0 0 1000px #90EE90;
    }
    th.moderate-risk {
		box-shadow: inset 0 0 0 1000px rgb(255, 204, 51);
    }
    th.high-risk {
		box-shadow: inset 0 0 0 1000px pink;
    }
	i.fa-circle.risk {
	    text-shadow: 0 0 pink !important;
		color: transparent !important;
	}
	i.fa-circle.norisk {
		text-shadow: 0 0 black !important;
		color: transparent !important;
	}
}

/* other styles
-------------------------------------------------- */
@media all {
	th.population-risk {
		background-color: lightgreen;
		-webkit-print-color-adjust: exact;
	}
	th.moderate-risk {
		background-color: rgb(255, 204, 51);
		-webkit-print-color-adjust: exact;
	}
	th.high-risk {
		background-color: pink;
		-webkit-print-color-adjust: exact;
	}

	i.fa.population-risk {
		color: lightgreen;
	}
	i.fa.moderate-risk {
		color: rgb(255, 204, 51);
	}
	i.fa.high-risk {
		color: pink;
	}

	div.arr {
		line-height: 1.25rem;
	}

	.alert-canrisk-info {
	    color: #1c4254;
	    background-color: #eaf5fc;
	    border-color: #bce8f1;
	}

	.alert-canrisk-warning {
    	color: #524021;
	    background-color: #ffffe6;
	    border-color: #faebcc;
	}

	.alert-info-grey {
	    color:  #565656;
	    background-color: #F4F4F4;
	    border-color:  #E5E5E5;
	}

	.alert-info-green {
		color: #454f47;
	    background-color: #f0faf0;
	    border-color:  #E2E8E3;
	}
	
	.alert-info-dark {
		color:  #313732;
	    background-color: #fbfdfc;
	    border-color:  #E2E8E3;
	}
}

/** release notes page **/
.container.release-notes { max-width: 62rem; }

.release-notes .release-index .btn {
	--bs-btn-padding-y: 0.1rem;
	--bs-btn-padding-x: 0.4rem;
	font-size: 0.8rem;
}

.release-notes .rel-list { list-style: none; padding-left: 0; margin-bottom: 0; }

.release-notes .rel-list > li {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	margin-bottom: 0.55rem;
}

/** fixed width keeps the entry text in one column whatever the tag says **/
.release-notes .rel-tag {
	flex: 0 0 4.75rem;
	margin-top: 0.15rem;
	text-align: center;
}

.release-notes .rel-text { flex: 1 1 auto; }

/** about page **/
.container.about-page { max-width: 62rem; }

/* the jump nav in the house pink rather than Bootstrap's grey */
.about-page .about-index .btn {
	--bs-btn-padding-y: 0.1rem;
	--bs-btn-padding-x: 0.4rem;
	--bs-btn-color: #5e0034;
	--bs-btn-border-color: #5e0034;
	--bs-btn-hover-bg: #5e0034;
	--bs-btn-hover-border-color: #5e0034;
	--bs-btn-active-bg: #5e0034;
	--bs-btn-active-border-color: #5e0034;
	font-size: 0.8rem;
}

/* the border utility sets a width but Bootstrap has no pink border colour, so the rule under
   each section heading takes the brand colour here */
.about-page h2 { border-bottom-color: #5e0034 !important; }

/* a coloured top edge distinguishes team leaders from the development team */
.about-page .leader-card { border-top: 3px solid #5e0034 !important; }
.about-page .dev-card { border-top: 3px solid #002e5d !important; }

/* the cards lift slightly on hover */
.about-page .person-card {
	transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.about-page .person-card:hover {
	box-shadow: var(--bs-box-shadow) !important;
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.about-page .person-card { transition: none; }
	.about-page .person-card:hover { transform: none; }
}

/* the years line up in their gutter rather than shifting with the digit widths. The house light
   blue with the dark blue on top, which the comment on #contact-intro above measures at 12.2:1 */
.about-page .pub-year {
	font-variant-numeric: tabular-nums;
	background-color: #e9f4ff;
	color: #002e5d;
}

/** quick start guide page **/
.container.quickstart-page { max-width: 62rem; }

.quickstart-page .quickstart-index .btn {
	--bs-btn-padding-y: 0.1rem;
	--bs-btn-padding-x: 0.4rem;
	--bs-btn-color: #5e0034;
	--bs-btn-border-color: #5e0034;
	--bs-btn-hover-bg: #5e0034;
	--bs-btn-hover-border-color: #5e0034;
	--bs-btn-active-bg: #5e0034;
	--bs-btn-active-border-color: #5e0034;
	font-size: 0.8rem;
}

.quickstart-page h2 { border-bottom-color: #5e0034 !important; }

/* the figure number takes the same pink as the table captions below, so a figure and a table are
   labelled the same way. Only the number is coloured - the caption prose after it stays in the
   muted body colour, which keeps Figure 2's four lines of explanation readable. */
.quickstart-page .fig-label {
	color: #5e0034;
}

/* Figure 2 is a ~2900px capture of the pedigree editor. At the full container width it dominates
   the section, and at the 400px it used to carry nothing in it could be read at all - neither size
   makes the labels legible, so it is sized for the layout and the image links to itself for anyone
   who needs to read them. */
.quickstart-page .figure-pedigree {
	max-width: 30rem;
	margin-inline: auto;
}

/* the three legend tables take the house dark blue for their chrome. Pink is already carrying the
   headings, the step badges and the jump nav, so a second accent keeps the tables distinct rather
   than adding to the pink. Driven through Bootstrap 5.3's own table custom properties so the
   striping and hover states keep working. White on #002e5d is 13.6:1, and body text on #e9f4ff is
   higher again, so both clear WCAG AA. */
.quickstart-page .table {
	--bs-table-striped-bg: #e9f4ff;
	--bs-table-striped-color: var(--bs-body-color);
	border-radius: 0.375rem;
	overflow: hidden;
}

.quickstart-page .table > thead > tr > th {
	--bs-table-bg: #002e5d;
	--bs-table-color: #fff;
	color: #fff;
	font-weight: 600;
}

.quickstart-page .table > caption {
	caption-side: top;
	color: #5e0034;
	padding-bottom: 0.4rem;
}

/* the pedigree symbols in Table 2 are deliberately left in the body colour: they depict what the
   pedigree itself draws, so recolouring them would make the legend wrong */

/* the cancer colour swatches in Table 3. The tool's own key gives these width with nothing but
   ps-2 on an empty span, which leaves the height to the line box; here they are a square of a
   stated size with a hairline so a pale fill still reads as a swatch against the row striping */
.quickstart-page .cancer-swatch {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 2px;
	vertical-align: text-bottom;
}

/* the A-D step letter, which is what the rotating alert-info/green/warning fills used to mark.
   White on #5e0034 is 13.8:1, so the letter clears WCAG AA. Sized in em so it tracks the
   heading rather than needing its own breakpoints. */
.quickstart-page .step-badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7em;
	height: 1.7em;
	border-radius: 50%;
	background-color: #5e0034;
	color: #fff;
	font-size: 0.8em;
	font-weight: 600;
	/* browsers do not print background colours, which would leave a white letter on white paper
	   and lose the step lettering altogether. Forced, as the risk-category headers above are. */
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

/* on paper the legend tables drop to black on white. The dark blue header is a background
   colour, which browsers do not print, so white header text would come out white on white; a rule
   under the heading row carries the separation instead and uses none of the ink a solid fill would.
   The striped rows need no handling - their text is the body colour either way. */
@media print {
	.quickstart-page .table > thead > tr > th {
		--bs-table-bg: #fff;
		--bs-table-color: #000;
		color: #000;
		border-bottom: 1px solid #000;
	}
}

/** usage / user registrations page **/
.usage-page .usage-stat {
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.2;
	color: #002e5d;
}

/** world map, drawn as inline SVG by usermap.js **/
.usage-page .usermap { position: relative; max-width: 60rem; margin: 0 auto; }
.usage-page .usermap-svg { width: 100%; height: auto; display: block; }
.usage-page .usermap-sphere { fill: #fbfdff; stroke: #dde3e8; }
.usage-page .usermap-graticule { fill: none; stroke: #e6ecf2; stroke-width: 0.4; }

/** no fill here: a fill in the stylesheet would override the shading set per country **/
.usage-page .usermap-country { stroke: #b9c2cb; stroke-width: 0.3; }
.usage-page .usermap-country:hover { stroke: #333; stroke-width: 0.8; }

.usage-page .usermap-tooltip {
	position: absolute;
	pointer-events: none;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 0.25rem 0.5rem;
	font-size: 0.85rem;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}

.usage-page .usermap-key {
	display: inline-block;
	width: 0.9rem;
	height: 0.9rem;
	border: 1px solid #b9c2cb;
	vertical-align: -0.1rem;
}
.usage-page .usermap-key[data-band="0"] { background: #c6dbef; }
.usage-page .usermap-key[data-band="1"] { background: #6baed6; }
.usage-page .usermap-key[data-band="2"] { background: #2171b5; }
.usage-page .usermap-key[data-band="3"] { background: #08306b; }

/** usage charts, drawn as inline SVG by usagecharts.js **/
.usage-page .usage-chart { position: relative; }
.usage-page .usage-svg { width: 100%; height: auto; display: block; }
.usage-page .usage-axis { font-size: 11px; color: #495057; }
.usage-page .usage-axis-title { font-size: 11px; fill: #6c757d; }
.usage-page .usage-grid line { stroke: #e3e6e9; }
.usage-page .usage-grid .domain { stroke: none; }
.usage-page .usage-guide { stroke: #adb5bd; stroke-dasharray: 3 3; }

.usage-page .usage-key { text-align: center; font-size: 0.85rem; color: #6c757d; margin-top: 0.25rem; }
.usage-page .usage-key-item { margin: 0 0.6rem; white-space: nowrap; }
.usage-page .usage-key-swatch {
	display: inline-block;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 2px;
	vertical-align: -0.05rem;
}

.usage-page .usage-tooltip {
	position: absolute;
	pointer-events: none;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 0.25rem 0.5rem;
	font-size: 0.8rem;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}


/** cap the number columns so the figures stay together rather than spanning the card **/
.usage-page .usage-figures { max-width: 44rem; }
.usage-page .usage-figures th[scope="row"] { white-space: nowrap; }

/** the monthly table is long, so keep its header in view while scrolling **/
.usage-page .usage-table { max-height: 30rem; overflow: auto; }
.usage-page .usage-table thead th { position: sticky; top: 0; z-index: 1; }

/** a collapse toggle that says what it will do next **/
[aria-expanded="true"] .when-collapsed,
[aria-expanded="false"] .when-expanded { display: none; }

/** job title bar chart on the usage page **/
.usage-page .usage-bars { position: relative; }
.usage-page .usage-bar { fill: #5e0034; fill-opacity: 0.8; }
.usage-page .usage-bar-label { font-size: 12px; fill: #495057; }
.usage-page .usage-bar-value { font-size: 12px; fill: #6c757d; }

/* yearly totals beside the "Calculations by year" table. One series, so it uses the same blue
   as the all-cancers charts above rather than introducing another hue. */
.usage-page .usage-column { fill: #2171b5; fill-opacity: 0.85; }
.usage-page .usage-column:hover { fill-opacity: 1; }

/* below the xl breakpoint the chart drops to a row of its own. The svg scales to its container,
   so without a cap the bars and the axis text grow with the full page width - hold it at the
   width it has beside the table and centre it. */
.usage-page #chart-yearly { max-width: 33rem; margin-inline: auto; }