: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; }
div.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; }
.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 }

.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; }

/** 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; }