/* Colour definitions */
:root
{
	/* For User Application Flags page */
	--custom-systemtable-border-colour: #0000a0;
	--custom-systemtable-shaded-colour: #e6fcff;
	--custom-systemtable-hover-colour: lightblue;

	--custom-appmain-buttonhilite: rgb(234,171,0);

	--custom-font-size-subheading: 20px;	/* Specifies the font size of the tab titles. */
	--custom-height-tab: 1.5em;

	--custom-thickness-questionpage-sectionborder: 1px;	/* Applies to the section (well area) as well as the "tabs" at the top, for consistency. */
	--custom-thickness-questionpage-sectionborder-radius: 4px;	/* Separate border radii for the section (bottom two corners) and the "tabs" at the top.  You can have rounded corners for one and not the other, if you want. */
	--custom-thickness-questionpage-tabborder-radius: 10px;

	--custom-colour-border: var(--custom-systemtable-border-colour, #0000a0);
	--custom-colour-questionpage-title: black;
	--custom-colour-questionpage-title-background: #f8f8ff; /* Same as well area from intellect base, which we're not overriding here (yet?) */

	--custom-colour-questionpage-inactivetab: #dddddd; /* Same as well area from intellect base, which we're not overriding here (yet?) */
	--custom-colour-questionpage-inactivetabtext: darkgrey;

	--custom-colour-questionpage-inactivetab-highight: var(--custom-systemtable-hover-colour);	/* ?? */
	--custom-colour-questionpage-inactivetabtext-highlight: black;

	--custom-colour-slider-track-low: #0000a0;
	--custom-colour-slider-track-high: #e6fcff;
	--custom-colour-slider-track-thumb: blue;

	--custom-infotable-shaded-colour: var(--custom-systemtable-shaded-colour, #e6fcff);
	--custom-infotable-hover-colour: var(--custom-systemtable-hover-colour, lightblue);

	font-size: 9pt;
}

html body
{
	/* Default margin on left looks too large, due to the way the buttons and so on in the left-hand table are centred in the column. */
	margin-left: 0px;
}

.wellarea
{
	border: none;
}

/* Intellect css annoyingly defines the colour and font for div!  Reset them to inherit. */
div
{
	color: inherit;
	font-family: inherit;
}

.lhntable input[type=button]
{
	/* If text in the left-hand buttons is too long, try wrapping them in a neat way. */
	text-wrap: balance;
}

/* ------------ Logged out page --------------- */
/*  Make the "Login" link center better on different size screens */
.ApplicationEnd h2
{
	--aewellh: calc(100vh - 60px);				/* Do the calculation once instead of 6 times! */
	--aehm: calc(var(--aewellh) * 0.01976);		/* Do the calculation once instead of twice! */
	margin-top: var(--aehm);
	margin-bottom: var(--aehm);
	padding-top: calc(var(--aewellh) * 0.14);
	padding-bottom: calc(var(--aewellh) * 0.119);
}

.ApplicationEnd p
{
	--aepmp: calc(var(--aewellh) * 0.0216);	/* Do the calculation once instead of 4 times! */
	margin-top: var(--aepmp);
	margin-bottom: var(--aepmp);
	padding-top: var(--aepmp);
	padding-bottom: var(--aepmp);
}

@media (max-height: 200px)
{
	.ApplicationEnd h2
	{
		padding-top: 0px;
		padding-bottom: 0px;
	}

	.ApplicationEnd p
	{
		padding-top: 0px;
		padding-bottom: 0px;
	}
}

/* ----------Similarly with the login page, which looked terrible on a small laptop screen --------------- */
.wellareaBgImg
{
	width: 100%;
	background-size: contain;
}

.login h1
{
	margin-top: 4vh;
	margin-bottom: 4vh;
}

.login h2
{
	margin-top: 7.6vh;
	margin-bottom: 6vh;
}

div.box
{
	padding: 3vh;
	width: auto;
	min-width: 530px;
	max-width: 700px;
}

@media (max-height: 500px)
{
	.login h1
	{
		margin-top: 3vh;
		margin-bottom: 3vh;
		font-size: 1.5em;
	}

	.login h2
	{
		margin-top: 5.7vh;
		margin-bottom: 4.5vh;
		font-size: 1.125em;
	}

	div.box
	{
		padding: 2vh;
	}

	.login div
	{
		font-size: 14.4px;
	}
}

/* Remove the empty line before the potential error message, as it just looks messy - a waste of screen real estate.
   Preferring to do this with css than remove it from the page, as otherwise it's another custom modification of the page. */
.loginControls tr:nth-child(10)
{
	height: 0px;
	display: none;
}

/* ------------ App main page --------------- */
/*           Big, picture buttons             */

.btnTop
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.btnTop input
{
	width: 300px !important;
	height: 125px;
	position: relative;
	z-index: 1;
	margin: 10px;
	font-size: 20px !important;
	text-align: left;
	font-family: Verdana;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.btnTop input:hover,
.btnTop #bAppMenu:hover
{
	border-color: var(--custom-appmain-buttonhilite);
	color: var(--custom-appmain-buttonhilite);
}

.btnTop input:active
{
	position: relative;
	top: 1;
	left: 1;
}

.btnTop #bAppMenu
{
	color: black;
	background: url('../images/buttons/enter-data.png') no-repeat;
}

/* Set a 3px outline around the text of all main buttons (by using text shadow), so that the text is easier to read on the background. */
.btnTop input[type=button].Mybutton
{
	color: black;	/* We have to set the colour to black, otherwise it will be unreadable on our white border. */
	text-shadow:
		/* 1 pixel width */
		1px 0px 1px white,				/* right */
		1px 1px 1px white,				/* bottom right */
		0px 1px 1px white,				/* bottom */
		-1px 1px 1px white,				/* bottom left */

		-1px 0px 1px white,				/* left */
		-1px -1px 1px white,			/* top-left */
		0px -1px 1px white,				/* top */
		-1px 1px 1px white,				/* top-right */

		/* add 2nd pixel width */
		2px 0px 1px white,				/* right */
		2px 2px 1px white,				/* bottom right */
		0px 2px 1px white,				/* bottom */
		-2px 2px 1px white,				/* bottom left */

		-2px 0px 1px white,				/* left */
		-2px -2px 1px white,			/* top-left */
		0px -2px 1px white,				/* top */
		-2px 2px 1px white,				/* top-right */

		/* add 3rd pixel width */
		3px 0px 1px white,				/* right */
		3px 3px 1px white,				/* bottom right */
		0px 3px 1px white,				/* bottom */
		-3px 3px 1px white,				/* bottom left */

		-3px 0px 1px white,				/* left */
		-3px -3px 1px white,			/* top-left */
		0px -3px 1px white,				/* top */
		-3px 3px 1px white;				/* top-right */
}

.btnTop input[type=button].Mybutton:hover:enabled
{
	color: var(--custom-appmain-buttonhilite);
}

*.Mybutton:active:enabled, button.Mybutton:active:enabled, input[type=button].Mybutton:active:enabled
{
	text-shadow: 2px 2px 1px rgb(70.7714285714,150.4857142857,253.2285714286);
	-moz-box-shadow: inset -1px -1px 0px 0px rgb(70.7714285714,150.4857142857,253.2285714286);
	-webkit-box-shadow: inset -1px -1px 0px 0px rgb(70.7714285714,150.4857142857,253.2285714286);
	box-shadow: inset -1px -1px 0px 0px rgb(70.7714285714,150.4857142857,253.2285714286);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, rgb(24, 78.4, 166.4)), color-stop(1, rgb(10.8886699507, 116.1458128079, 234.7113300493)));
	background: -moz-linear-gradient(top, rgb(24, 78.4, 166.4) 5%, rgb(10.8886699507, 116.1458128079, 234.7113300493) 100%);
	background: -webkit-linear-gradient(top, rgb(24, 78.4, 166.4) 5%, rgb(10.8886699507, 116.1458128079, 234.7113300493) 100%);
	background: -o-linear-gradient(top, rgb(24, 78.4, 166.4) 5%, rgb(10.8886699507, 116.1458128079, 234.7113300493) 100%);
	background: -ms-linear-gradient(top, rgb(24, 78.4, 166.4) 5%, rgb(10.8886699507, 116.1458128079, 234.7113300493) 100%);
	background: linear-gradient(to bottom, rgb(24, 78.4, 166.4) 5%, rgb(10.8886699507, 116.1458128079, 234.7113300493) 100%);
	background-color: rgb(24,78.4,166.4);
}

/* The colour of the disabled "special" button is disgusting!! */
*.MybuttonGreen:disabled, button.MybuttonGreen:disabled, input[type=button].MybuttonGreen:disabled
{
	background: none;
	background-color: lightgrey;
	border-color: grey;
	color: grey;
	text-shadow: none;
}

.btnTop input[name='Export My Data']
{
	color: black;
	background: url('../images/buttons/download-data.png') no-repeat;
}

/* We have to override the base CSS to make sure the picture remains displayed when button is hovered.*/
.btnTop input[name='Export My Data'].Mybutton:hover:enabled
{
	background: none;
	background-color: inherit;
	background: url('../images/buttons/download-data.png') no-repeat;
	color: var(--custom-appmain-buttonhilite);
}
.btnTop input[name='Export My Data'].Mybutton:enabled
{
	background: none;
	background-color: inherit;
	background: url('../images/buttons/download-data.png') no-repeat;
}

.btnTop input[name='Documents']
{
	color: black;
	background: url('../images/buttons/download-docs.png') no-repeat;
}

/* We have to override the base CSS to make sure the picture remains displayed when button is hovered.*/
.btnTop input[name='Documents'].Mybutton:hover:enabled
{
	background: none;
	background-color: inherit;
	background: url('../images/buttons/download-docs.png') no-repeat;
	color: var(--custom-appmain-buttonhilite);
}
.btnTop input[name='Documents'].Mybutton:enabled
{
	background: none;
	background-color: inherit;
	background: url('../images/buttons/download-docs.png') no-repeat;
}

.btnTop input[onclick*='PromsLog']
{
	color: black;
	background: url('../images/buttons/proms-log.png') no-repeat;
}

/* We have to override the base CSS to make sure the picture remains displayed when button is hovered.*/
.btnTop input[onclick*='PromsLog'].Mybutton:hover:enabled
{
	background: none;
	background-color: inherit;
	background: url('../images/buttons/proms-log.png') no-repeat;
	color: var(--custom-appmain-buttonhilite);
}
.btnTop input[onclick*='PromsLog'].Mybutton:enabled
{
	background: none;
	background-color: inherit;
	background: url('../images/buttons/proms-log.png') no-repeat;
}

.btnTop input[onclick*='PromsEmail']
{
	color: black;
	background: url('../images/buttons/send-proms.png') no-repeat;
}

/* We have to override the base CSS to make sure the picture remains displayed when button is hovered.*/
.btnTop input[onclick*='PromsEmail'].Mybutton:hover:enabled
{
	background: none;
	background-color: inherit;
	background: url('../images/buttons/send-proms.png') no-repeat;
	color: var(--custom-appmain-buttonhilite);
}
.btnTop input[onclick*='PromsEmail'].Mybutton:enabled
{
	background: none;
	background-color: inherit;
	background: url('../images/buttons/send-proms.png') no-repeat;
}

/* ------------- END of App Main ----------------------------- */

/* Get the alignment working for any pages with a top-page header table and that don't specify widths. */
.topPanel .toppageheader table
{
	width: 100%;
	border-spacing: 0px;
}

.topPanel .toppageheader table td:first-child
{
	width: 12%;
}

.topPanel .toppageheader table td:last-child
{
	width: 12%;
	text-align: right;
}

/* Fix stuff in top panel, where the font size on everything has been multiplied by 1.6. */
tr.topPanel>td .Mybutton
{
	/* Reset the font-size to the same as the buttons on the left, which are 1.6*0.7 times the size of the root element.*/
	font-size: 1.12rem;
}

/* General stuff for controls and so on */

.Radio
{
	margin-right: 1em;
	vertical-align: middle;
}

.Radio input, .Checkbox input
{
	margin-right: 0.25em;
	margin-top: 2px;
}

/* Some generic settings for pointers on things the user can click */

input
{
	cursor: pointer;
}

label[for]
{
	cursor: pointer;
	vertical-align: middle;
}

*[disabled] + label
{
	color: rgba(118, 118, 118, 0.3);
}

/* ------ Fix for tables of tableContainer, to allow sticky headers without flickery scrolling. */

.tableContainer, .tableContainerL
{
	border-collapse: separate;
	border-spacing: 0px;
}

.tableContainer th, .tableContainerL th
{
	border-left: 0px;
}

.tableContainer th:first-child, .tableContainerL th:first-child
{
	border-left: 1px solid var(--custom-systemtable-border-colour);
}

.tableContainer td, .tableContainerL td
{
	border-left: 0px;
	border-top: 0px;
}

.tableContainer td:first-child, .tableContainerL td:first-child
{
	border-left: 1px solid var(--custom-systemtable-border-colour);
}

.tableContainer tr:nth-child(even) td
{
	background-color: var(--custom-systemtable-shaded-colour);
}

.tableContainer tr:hover td
{
	background-color: var(--custom-systemtable-hover-colour);
}

/* ---- System Admin ------ */

h2.PageHeader
{
	text-align: center;
	background: none;
	color: black;
	margin-top: 1rem;
	font-size: 1.5em;
}

.SystemAdmin .searchArea
{
	min-width: 485px;
}

.SystemAdmin .buttonPanel
{
	background: none;
	text-align: center;
}

.SystemAdmin .buttonPanel input
{
	margin-bottom: 0.5rem;
	min-width: 160px;
}

.SystemAdmin .AccountExpired td
{
	color: red;
}

.SystemAdmin .AccountExpiring td
{
	color: #BF9000;	/* A dark yellow, that will show up on a white background. */
}

.SystemAdmin td.PasswordExpired
{
	color: red;
}

.SystemAdmin td.PasswordExpiring
{
	color: #BF9000;	/* A dark yellow, that will show up on a white background. */
}

.initalText
{
	/* The default width of this block is unneccessarily narrow, causing the text to wrap when it does not need to. */
	width: fit-content;
}

.logTable
{
	border-collapse: separate;
	border-spacing: 0px;
}

.logTable th
{
	border: none;
	border-top: 1px solid var(--custom-systemtable-border-colour);
	border-right: 1px solid var(--custom-systemtable-border-colour);
	border-bottom: 1px solid var(--custom-systemtable-border-colour);
}

.logTable th:first-child
{
	border-left: 1px solid var(--custom-systemtable-border-colour);
}

.logTable td
{
	border: none;
	border-right: 1px solid var(--custom-systemtable-border-colour);
	border-bottom: 1px solid var(--custom-systemtable-border-colour);
}

.logTable td:first-child
{
	border-left: 1px solid var(--custom-systemtable-border-colour);
}

.styleAdmin .logTable thead
{
	position: sticky;
	top: 0;
}

.SiteList tr:hover td, .logTable tr:hover td
{
	background-color: var(--custom-systemtable-hover-colour);
}

.HeaderSortArrow
{
	color: white;
}

.HeaderSortArrow:hover
{
	cursor: pointer;
	color: yellow;
}

.HeaderSortArrow:active
{
	position: relative;
	top: 1px;
	left: 1px;
}

/* ------ Patient Listing and New Patient Page ---------- */

.cdbcustomdemog thead
{
	position: sticky;
	top: 0;
}

/* Make the links in the patient listing table (e.g. "view timeline") look like buttons,
	by applying the same styles as for the "MyButton" class
	to ".PatientDemographicShortResults td > a" */

.PatientDemographicShortResults td > a
{
	min-width: 130px;
	display: inline-block;
	cursor: pointer;
	text-decoration: none;
	border: 1px solid #337fed;
	color: #fff;
	padding: 2px 3px;
	margin-top: 0.25em;
	margin-bottom: 0.25em;
	text-shadow: 1px 1px 0px #1571cd;
	-moz-box-shadow: inset 1px 1px 0px 0px #97c4fe;
	-webkit-box-shadow: inset 1px 1px 0px 0px #97c4fe;
	box-shadow: inset 1px 1px 0px 0px #97c4fe;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #3D94F6), color-stop(1, #1E62D0));
	background: -moz-linear-gradient(top, #3D94F6 5%, #1E62D0 100%);
	background: -webkit-linear-gradient(top, #3D94F6 5%, #1E62D0 100%);
	background: -o-linear-gradient(top, #3D94F6 5%, #1E62D0 100%);
	background: -ms-linear-gradient(top, #3D94F6 5%, #1E62D0 100%);
	background: linear-gradient(to bottom, #3D94F6 5%, #1E62D0 100%);
	background-color: #3d94f6;
	border-radius: 6px;
}

.PatientDemographicShortResults td > a:hover
{
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #1E62D0), color-stop(1, #3D94F6));
	background: -moz-linear-gradient(top, #1E62D0 5%, #3D94F6 100%);
	background: -webkit-linear-gradient(top, #1E62D0 5%, #3D94F6 100%);
	background: -o-linear-gradient(top, #1E62D0 5%, #3D94F6 100%);
	background: -ms-linear-gradient(top, #1E62D0 5%, #3D94F6 100%);
	background: linear-gradient(to bottom, #1E62D0 5%, #3D94F6 100%);
	background-color: #1e62d0;
}

.PatientDemographicShortResults td > a:active
{
	text-shadow: 2px 2px 1px rgb(16.8,90.4,164);
	-moz-box-shadow: inset -1px -1px 0px 0px rgb(70.7714285714,150.4857142857,253.2285714286);
	-webkit-box-shadow: inset -1px -1px 0px 0px rgb(70.7714285714,150.4857142857,253.2285714286);
	box-shadow: inset -1px -1px 0px 0px rgb(70.7714285714,150.4857142857,253.2285714286);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, rgb(24, 78.4, 166.4)), color-stop(1, rgb(10.8886699507, 116.1458128079, 234.7113300493)));
	background: -moz-linear-gradient(top, rgb(24, 78.4, 166.4) 5%, rgb(10.8886699507, 116.1458128079, 234.7113300493) 100%);
	background: -webkit-linear-gradient(top, rgb(24, 78.4, 166.4) 5%, rgb(10.8886699507, 116.1458128079, 234.7113300493) 100%);
	background: -o-linear-gradient(top, rgb(24, 78.4, 166.4) 5%, rgb(10.8886699507, 116.1458128079, 234.7113300493) 100%);
	background: -ms-linear-gradient(top, rgb(24, 78.4, 166.4) 5%, rgb(10.8886699507, 116.1458128079, 234.7113300493) 100%);
	background: linear-gradient(to bottom, rgb(24, 78.4, 166.4) 5%, rgb(10.8886699507, 116.1458128079, 234.7113300493) 100%);
	background-color: rgb(24,78.4,166.4);
}

/* New for the Add New Patient page (bespoke for TIPE) */
#tblQnNew div.AddNewQuestionWrapper
{
	display: flex;
	align-items: center;
	column-gap: 4em;
}

#tblQnNew div.AddNewQuestionWrapper div.QuestionDataWrap
{
	white-space: nowrap;
}

#tblQnNew tr[name='ContainerDemogQn'] td
{
	border-bottom: 1px solid lightgrey;
}

/* Date of PE diagnosis is to be hidden - the value will come from the date part of Time of PE diagnosis */
#ContainerDateOfEntry
{
	display: none;
}

/* -------- Edit Sites Page --------------- */

.EditSites
{
	text-align: center;
}

input[type="button"][name="btnSaveAllSiteChanges"]
{
	margin-top: 1rem;
	width: auto;
}

/* -------- User Edit Page --------------- */

.UserEdit .tableBRB td input.Mybutton
{
	width: auto;
	padding-right: 0.5em;
	padding-left: 0.5em;
}

/* User Application Flags page */

/*.UserApplicationflags .buttonPanel*/
.UserApplicationflags .dataPanel
{
	/*margin-bottom: 1rem;*/
	margin-top: 1rem;
}

/* Note: we use .dataPanel to distinguish this from the UserAppFlagDefault page.
	The main reason is that the flag DEFAULTS page has nested tableContainerL classes,
	so we can't apply the style directly to that as it affects the outer one.
	We could possibly remove the outer one, but it means resetting a load of styles for the outer controls.
*/

.UserApplicationflags .dataPanel .tableContainerL
{
	margin-top: 0px;
	border-collapse: separate;
	border-spacing: 0px;
	border: none;
}

.UserApplicationflags .dataPanel .tableContainerL thead
{
	position: sticky;
	top: 0;
}

.UserApplicationflags .dataPanel .tableContainerL th
{
	font-size: 1.2rem;
	border: none;
	border-bottom: 1px solid var(--custom-systemtable-border-colour);
	border-right: 1px solid var(--custom-systemtable-border-colour);
}

.UserApplicationflags .dataPanel .tableContainerL thead tr:first-child th
{
	border-top: 1px solid var(--custom-systemtable-border-colour);
	color: white;
	text-align: right;
}

.UserApplicationflags .dataPanel .tableContainerL th:first-child
{
	border-left: 1px solid var(--custom-systemtable-border-colour);
	border-right: none;
	text-align: right;
}

.UserApplicationflags .dataPanel .tableContainerL th:last-child
{
	border-right: 1px solid var(--custom-systemtable-border-colour);
}

.UserApplicationflags .dataPanel .tableContainerL th div
{
	color: white;
}

.UserApplicationflags .dataPanel .tableContainerL td
{
	font-size: 1.2rem;
	border: none;
	border-bottom: 1px solid var(--custom-systemtable-border-colour);
	border-right: 1px solid var(--custom-systemtable-border-colour);
}

.UserApplicationflags .dataPanel .tableContainerL td:first-child
{
	border-left: 1px solid var(--custom-systemtable-border-colour);
	border-right: none;
	padding-right: 0.5em;
	text-align: right;
}

.UserApplicationflags .dataPanel .tableContainerL tr:nth-child(even) td
{
	background-color: var(--custom-systemtable-shaded-colour);
}

.UserApplicationflags .dataPanel .tableContainerL tr:hover td
{
	background-color: var(--custom-systemtable-hover-colour);
}

/* User Application Flag DEFAULTS page */

.UserApplicationflags .QuestionLabel
{
	text-align: right;
}

/* Note: we use .tdTableFlags to distinguish this from the User Application Flags page page. */

.UserApplicationflags .tdTableFlags .tableContainerL
{
	margin-top: 0px;
	border-collapse: separate;
	border-spacing: 0px;
	border: none;
}

.UserApplicationflags .tdTableFlags .tableContainerL thead
{
	position: sticky;
	top: 0;
}

.UserApplicationflags .tdTableFlags .tableContainerL th
{
	font-size: 1.2rem;
	border: none;
	border-bottom: 1px solid var(--custom-systemtable-border-colour);
	border-right: 1px solid var(--custom-systemtable-border-colour);
}

.UserApplicationflags .tdTableFlags .tableContainerL thead tr:first-child th
{
	border-top: 1px solid var(--custom-systemtable-border-colour);
	color: white;
}

.UserApplicationflags .tdTableFlags .tableContainerL th:first-child
{
	border-left: 1px solid var(--custom-systemtable-border-colour);
}

.UserApplicationflags .tdTableFlags .tableContainerL th:last-child
{
	border-right: 1px solid var(--custom-systemtable-border-colour);
}

.UserApplicationflags .tdTableFlags .tableContainerL th div
{
	color: white;
}

.UserApplicationflags .tdTableFlags .tableContainerL td
{
	font-size: 1.2rem;
	border: none;
	border-bottom: 1px solid var(--custom-systemtable-border-colour);
	border-right: 1px solid var(--custom-systemtable-border-colour);
}

.UserApplicationflags .tdTableFlags .tableContainerL td:first-child
{
	border-left: 1px solid var(--custom-systemtable-border-colour);
	padding-right: 0.5em;
}

.UserApplicationflags .tdTableFlags .tableContainerL tr:nth-child(even) td
{
	background-color: var(--custom-systemtable-shaded-colour);
}

.UserApplicationflags .tdTableFlags .tableContainerL tr:hover td
{
	background-color: var(--custom-systemtable-hover-colour);
}

/* System Settings Page */

.SystemSettings > table
{
	margin-bottom: 1em;
}

.SystemSettings #LeftTable,
.SystemSettings #RightTable
{
	border-collapse: collapse;
	border-spacing: 0px;
}

.SystemSettings #LeftTable > tbody,
.SystemSettings #RightTable > tbody
{
	border: 1px solid var(--custom-systemtable-border-colour);
}

.SystemSettings #LeftTable > tbody > tr > td,
.SystemSettings #RightTable > tbody > tr > td
{
	border-top: 1px solid var(--custom-systemtable-border-colour);
	padding: 0.25em;
}

.SystemSettings #LeftTable > tbody > tr:hover td,
.SystemSettings #RightTable > tbody > tr:hover td
{
	background-color: var(--custom-systemtable-hover-colour);
}

/* Export Data Settings page */

.SettingsExportData h1
{
	text-align: center;
}

/* Generally for the button that opens the calendar */

/* So that button for the calendar will align with its input field: */
img[src*="Date.gif"]
{
	vertical-align: middle;
}

img[src*="Date.gif"]:hover
{
	content: url(../Images/Date-highlight.gif);
	cursor: pointer;
}

img[src*="Date.gif"]:active
{
	position: relative;
	top: 1px;
	left: 1px;
}


/* New patient page */

.lblConsentRequired
{
	background-color: red;
	color: white;
}

#ConsentMessageRow td
{
	text-align: center;
	font-weight: bold;
	font-size:12pt;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.PatientDemographicShortNew .toppageheader h2
{
	font-size: 2.5rem;
	margin: 0px;
	padding-top: 1rem;
	padding-bottom: 1rem;
	vertical-align: middle;
}

#tblQnNew td
{
	vertical-align: middle;
	font-size: 11pt;
	min-height: 30px;
	padding-left: 0.5em;
}

.PatientDemographicShortNew .QuestionLabel
{
	font-size: 11pt;
	height: 30px;
	min-height: 30px;
	padding-right: 0.5em;
	vertical-align: middle;
}

.PatientDemographicShortNew .QuestionLabel a
{
	vertical-align: middle;
}

.PatientDemographicShortNew .QuestionDataCellDemog
{
	font-size: 11pt;
	vertical-align: middle;
}

.NewPatientButtonsContainer input[type=button].Mybutton
{
	font-size: 1.2em;
	width: auto;
	min-width: 200px;
}

/* Question pages */

/* Remove background colour from previous/next button areas (and the question colour legend too!) */
table.nextprebuttonarea
{
	background-color: inherit;
	color: inherit;
}

table.nextprebuttonarea td
{
	font-size: 1.2rem;
	color: inherit;
	vertical-align: top;
}

table.nextprebuttonarea td strong
{
	color: inherit;
}

#bDeleteEntry
{
	width: auto;
}

.datedropdownarea
{
	background-color: inherit;
}

/* Selected patient label should be bigger, as per Peter's request: 4/7/2025 */
.datedropdownarea td
{
	font-size: 1.5rem;
}

/* We also want to try to get things lined up better - e.g. if there is a title in the central box, we want it centred */
.datedropdownarea td:nth-child(3)
{
	text-align: center;
}
.datedropdownarea td:last-child
{
	width: 15%;
}
/* End of aligning datedropdownarea */

/* Trialling new layout.  If NewDatabaseInfoHeader is being used, then none of the datedropdownarea styles, either above, or from the main file, are in use. */
.NewDatabaseInfoHeader
{
	display: flex;
	align-items: center;
	background-color: inherit;
	font-size: 1.5rem;
	margin-left: 0.5rem;
	margin-right: 0.5rem;
	margin-top: 3px;
	margin-bottom: 3px;
}

.NewDatabaseInfoHeader .EntryDate
{
	display: flex;
	align-items: center;
	margin-left: 2em;
	font-size: smaller;
}

.NewDatabaseInfoHeader .EntryDate span
{
	margin-right: 0.25em;
}

.NewDatabaseInfoHeader .ItemDetail
{
	font-weight: bold;
}

/*	Put spacing between the top of the tabs and the question table, as per Peter's request: 17/7/2025 */
.QuestionTable
{
	margin-top: 0.5em;
}

/*	Make sure there is vertical spacing between radio buttons, etc, as per Peter's request.
	Not sure if this is the best way to do it, but using this method means other data input heights are not affected. */

.QuestionTable .QuestionContainer .QuestionDataElement
{
	padding-top: 0.3em;
}

.QuestionTable .QuestionContainer .QuestionDataElement input[type=checkbox], 
.QuestionTable .QuestionContainer .QuestionDataElement input[type=radio]
{
	vertical-align: text-top;
	margin-top: 1px;
	margin-bottom: 0.5em;
	margin-right: 2px;
}

.InformationLink
{
	display: inline-block;
	vertical-align: middle;
	margin-left: 0.2em;
}

.InputErrorMessage
{
	margin-top: 0.25em;
	color: red;
}

/* For the range control setting, added by NM in 2024/2025, modified for NR to allow the input to be to the right of the slider instead of underneath. */
.NativeSliderWrapper
{
	display: inline-block;
	vertical-align: top;
	margin-right: 1em;
}
/* Alternative is to use the JQuery UI Slider instead, which we wrap with SliderWrapper.
   Note that the css for this is in the NRSlider.css, because it needs to be included after jsqueryui.css in order to apply colours and so on.
*/

/* --------------------------- */

.ReadonlyInformation
{
	color: rgb(255, 70, 70);
	font-weight: bold;
	margin-left: 0.5em;
}

.ElbowData td
{
	vertical-align: middle;
}

.ElbowData .QuestionAndAnswer
{
	margin-bottom: 0.5em;
}

.ElbowData .Question
{
	display: inline-block;
	font-weight: bold;
}

.ElbowData .Answer
{
	display: inline-block;
	white-space-collapse: break-spaces;
	white-space: wrap;
	text-wrap: balance;
	word-break: break-word;
	color: rgb(255, 70, 70);
	font-weight: bold;
}

/* Subprocedures tables */

.SiteList
{
	text-align: center;
	margin-top: 1em;
	margin-bottom: 1em;
	/*margin-left: auto;
	margin-right: auto;*/
	float: none;
}

.SiteList tr th
{
	padding: 5px;
	margin: 0px;
	border: none;
	border-top: 1px solid #0000a0;
	border-bottom: 1px solid #0000A0;
	border-right: 1px solid #0000a0;
	background-color: #1E62D0;
	color: #fff;
	min-width: 100px;
	vertical-align: middle;
	font-size: 10pt;
}

.SiteList tr td
{
	font-size: 10pt;
}

/*
.SiteList tr th:nth-child(2),
.SiteList tr td:nth-child(2)
{
	text-align: left;
	max-width: 300px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
*/

.SiteList tr:nth-child(even)
{
	background-color: #FFFFFF;
}

.SiteList tr:nth-child(odd)
{
	background-color: #EEEEEE;
}

.SiteTableRowDisabled td
{
	color: red;
}

.SiteTableRowClickable:hover
{
	background: linear-gradient(to bottom, #3D94F6 5%, #1E62D0 100%);
	color: black;
	cursor: pointer;
}

.SiteTableRowClickable:hover td
{
	color: black;
}

.button-block
{
	clear: left;
	text-align: center;
	margin-top: 3em;
}

.add-site-button
{
	/* Blue button:
	box-shadow: inset 0px 1px 0px 0px #97C4FE;
	background: linear-gradient(to bottom, #3D94F6 5%, #1E62D0 100%);
	background-color: #3D94F6;
	border: 1px solid #337FED;
	color: #FFFFFF;
	text-shadow: 0px 1px 0px #1571CD;
	*/
	/*Green button*/
	box-shadow: inset 0px 1px 0px 0px #A4E271;
	background: linear-gradient(to bottom, #89C403 5%, #77A809 100%);
	background-color: #99FF99;
	border: 1px solid #74B807;
	color: black;
	text-shadow: 0px 1px 0px #528009;
	/* End of colouring */
	border-radius: 6px;
	display: inline-block;
	padding: 2px 3px;
	text-decoration: none;
	cursor: pointer;
	width: 135px;
	height: 23px;
	font-size: 0.7em;
}

.SubProcedureButtonColumn,
.DeleteSubProcedureColumn
{
	padding: 1em !important;
	min-width: 70px !important;
	width: 80px;
}

.SiteList td
{
	vertical-align: middle;
}

.SubProcedureButtonCell
{
	white-space: nowrap;
}

.SubProcedureButton
{
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 1em;
	padding-right: 1em;
	min-height: 23px;
	height: auto;
	min-width: 70px;
	width: auto;

	display:inline-block;
	cursor:pointer;
	text-decoration:none;
	border:1px solid #337fed;
	color:#fff;
	text-shadow:1px 1px 0px #1571cd;
	-moz-box-shadow:inset 1px 1px 0px 0px #97c4fe;
	-webkit-box-shadow:inset 1px 1px 0px 0px #97c4fe;
	box-shadow:inset 1px 1px 0px 0px #97c4fe;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #3D94F6), color-stop(1, #1E62D0));
	background:-moz-linear-gradient(top, #3D94F6 5%, #1E62D0 100%);
	background:-webkit-linear-gradient(top, #3D94F6 5%, #1E62D0 100%);
	background:-o-linear-gradient(top, #3D94F6 5%, #1E62D0 100%);
	background:-ms-linear-gradient(top, #3D94F6 5%, #1E62D0 100%);
	background:linear-gradient(to bottom, #3D94F6 5%, #1E62D0 100%);
	background-color:#3d94f6;
	border-radius:6px
}

.SubProcedureButton:disabled
{
	cursor: default;
	opacity: .65;
	box-shadow: none;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	color: hsl(0,0%,97%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #3D94F6), color-stop(1, #1E62D0));
	background:-moz-linear-gradient(top, #3D94F6 5%, #1E62D0 100%);
	background:-webkit-linear-gradient(top, #3D94F6 5%, #1E62D0 100%);
	background:-o-linear-gradient(top, #3D94F6 5%, #1E62D0 100%);
	background:-ms-linear-gradient(top, #3D94F6 5%, #1E62D0 100%);
	background:linear-gradient(to bottom, #3D94F6 5%, #1E62D0 100%);
	background-color:#3d94f6;
}

.SubProcedureButton:hover
{
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #1E62D0), color-stop(1, #3D94F6));
	background:-moz-linear-gradient(top, #1E62D0 5%, #3D94F6 100%);
	background:-webkit-linear-gradient(top, #1E62D0 5%, #3D94F6 100%);
	background:-o-linear-gradient(top, #1E62D0 5%, #3D94F6 100%);
	background:-ms-linear-gradient(top, #1E62D0 5%, #3D94F6 100%);
	background:linear-gradient(to bottom, #1E62D0 5%, #3D94F6 100%);
	background-color:#1e62d0
}

.SubProcedureButton:active
{
	text-shadow:2px 2px 1px rgb(16.8,90.4,164);
	-moz-box-shadow:inset -1px -1px 0px 0px rgb(70.7714285714,150.4857142857,253.2285714286);
	-webkit-box-shadow:inset -1px -1px 0px 0px rgb(70.7714285714,150.4857142857,253.2285714286);
	box-shadow:inset -1px -1px 0px 0px rgb(70.7714285714,150.4857142857,253.2285714286);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, rgb(24, 78.4, 166.4)), color-stop(1, rgb(10.8886699507, 116.1458128079, 234.7113300493)));
	background:-moz-linear-gradient(top, rgb(24, 78.4, 166.4) 5%, rgb(10.8886699507, 116.1458128079, 234.7113300493) 100%);
	background:-webkit-linear-gradient(top, rgb(24, 78.4, 166.4) 5%, rgb(10.8886699507, 116.1458128079, 234.7113300493) 100%);
	background:-o-linear-gradient(top, rgb(24, 78.4, 166.4) 5%, rgb(10.8886699507, 116.1458128079, 234.7113300493) 100%);
	background:-ms-linear-gradient(top, rgb(24, 78.4, 166.4) 5%, rgb(10.8886699507, 116.1458128079, 234.7113300493) 100%);
	background:linear-gradient(to bottom, rgb(24, 78.4, 166.4) 5%, rgb(10.8886699507, 116.1458128079, 234.7113300493) 100%);
	background-color:rgb(24,78.4,166.4)
}

.DeleteSubProcedureButton
{
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 1em;
	padding-right: 1em;
	min-height: 23px;
	height: auto;
	min-width: 70px;
	width: auto;

	display:inline-block;
	cursor:pointer;
	text-decoration:none;
	border:1px solid #d02718;
	color:#fff;
	text-shadow:1px 1px 0px #810d05;
	-moz-box-shadow:inset 1px 1px 0px 0px #f5978e;
	-webkit-box-shadow:inset 1px 1px 0px 0px #f5978e;
	box-shadow:inset 1px 1px 0px 0px #f5978e;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #F24537), color-stop(1, #C62D1F));
	background:-moz-linear-gradient(top, #F24537 5%, #C62D1F 100%);
	background:-webkit-linear-gradient(top, #F24537 5%, #C62D1F 100%);
	background:-o-linear-gradient(top, #F24537 5%, #C62D1F 100%);
	background:-ms-linear-gradient(top, #F24537 5%, #C62D1F 100%);
	background:linear-gradient(to bottom, #F24537 5%, #C62D1F 100%);
	background-color:#f24537;
	border-radius:6px
}

.DeleteSubProcedureButton:disabled
{
	cursor: default;
	opacity: .65;
	box-shadow: none;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	color: hsl(0,0%,97%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #F24537), color-stop(1, #C62D1F));
	background:-moz-linear-gradient(top, #F24537 5%, #C62D1F 100%);
	background:-webkit-linear-gradient(top, #F24537 5%, #C62D1F 100%);
	background:-o-linear-gradient(top, #F24537 5%, #C62D1F 100%);
	background:-ms-linear-gradient(top, #F24537 5%, #C62D1F 100%);
	background:linear-gradient(to bottom, #F24537 5%, #C62D1F 100%);
	background-color:#f24537;
	border-radius:6px;
}

.DeleteSubProcedureButton:hover
{
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #C62D1F), color-stop(1, #F24537));
	background:-moz-linear-gradient(top, #C62D1F 5%, #F24537 100%);
	background:-webkit-linear-gradient(top, #C62D1F 5%, #F24537 100%);
	background:-o-linear-gradient(top, #C62D1F 5%, #F24537 100%);
	background:-ms-linear-gradient(top, #C62D1F 5%, #F24537 100%);
	background:linear-gradient(to bottom, #C62D1F 5%, #F24537 100%);
	background-color:#c62d1f
}

.DeleteSubProcedureButton:active
{
	text-shadow:2px 2px 1px rgb(103.2,10.4,4);
	-moz-box-shadow:inset -1px -1px 0px 0px rgb(238.7073170732,85.556097561,70.8926829268);
	-webkit-box-shadow:inset -1px -1px 0px 0px rgb(238.7073170732,85.556097561,70.8926829268);
	box-shadow:inset -1px -1px 0px 0px rgb(238.7073170732,85.556097561,70.8926829268);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, rgb(158.4, 36, 24.8)), color-stop(1, rgb(223.0985915493, 30.1183098592, 14.5014084507)));
	background:-moz-linear-gradient(top, rgb(158.4, 36, 24.8) 5%, rgb(223.0985915493, 30.1183098592, 14.5014084507) 100%);
	background:-webkit-linear-gradient(top, rgb(158.4, 36, 24.8) 5%, rgb(223.0985915493, 30.1183098592, 14.5014084507) 100%);
	background:-o-linear-gradient(top, rgb(158.4, 36, 24.8) 5%, rgb(223.0985915493, 30.1183098592, 14.5014084507) 100%);
	background:-ms-linear-gradient(top, rgb(158.4, 36, 24.8) 5%, rgb(223.0985915493, 30.1183098592, 14.5014084507) 100%);
	background:linear-gradient(to bottom, rgb(158.4, 36, 24.8) 5%, rgb(223.0985915493, 30.1183098592, 14.5014084507) 100%);
	background-color:rgb(158.4,36,24.8)
}

.MissingValue
{
	font-weight: bold;
}

/* --------------- Fix base dialogue font sizing ------------------------*/

.DCSDialogs .DCSDialogs-dialog .DCSDialogs-content
{
	font-size: 1em;
}

.DCSDialogs .DCSDialogs-dialog .DCSDialogs-buttonpane
{
	font-size: 1em;
	padding: .3em .5em;
}

#calendar
{
	width: auto;
	min-width: 250px;
}

.TimeWrapper
{
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.DCSDialogs-contentWrapper p
{
	margin: 0px;
}

.DCSDialogs-Custom .QuestionDataElement
{
	display: inline-block;
	vertical-align: middle;
	margin-right: 1em;
}

.DCSDialogs-Custom .QuestionDataElement *
{
	vertical-align: baseline;
}

/* --------------- Display Info ------------------------*/

.DisplayInfoDialogue >div > div > i
{
	background-image: url("../Images/information.png") !important;
	background-position: 0 0 !important;
}

.DisplayInfoDialogue .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset
{
	float: none;
	text-align: center;
}

/* Remove the padding from the panel, so that the different types of info can add only what they need */
.DisplayInfoDialogue .ui-dialog div.ui-dialog-content
{
	padding: 0px;
}

.DisplayInfo
{
	font-size: 1rem;
	border-collapse: collapse;
	border-spacing: 0px;
}

.DisplayInfo th
{
	text-align: left;
	white-space: nowrap;
}

.DisplayInfo td
{
	padding-left: 1em;
	padding-right: 1em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

.DisplayInfo tr:nth-child(odd) td,
.DisplayInfo tbody tr:nth-child(odd) th
{
	background-color: var(--custom-infotable-shaded-colour, #e6fcff);
}

.DisplayInfo tr:hover td,
.DisplayInfo tbody tr:hover th
{
	background-color: var(--custom-infotable-hover-colour, lightblue);
}

table.PERisk td
{
	max-width: 800px;
}

table.PERisk tr:nth-child(odd) td
{
	background-color: initial;
}

table.PERisk tr:hover td
{
	background-color: initial;
}

.ASAInfo
{
	margin: .5em 1em;
}

.ASAInfo td:nth-child(2)
{
	max-width: 150px;
}

.ASAInfo td:nth-child(3)
{
	max-width: 580px;
}

.cfsInfo
{
	display: grid;
	width: 900px;
	column-gap: 2em;
	font-size: 12px;
	margin: .5em 0px;
	margin-right: 1em;
}

@media (min-height: 630px)
{
	.cfsInfo
	{
		row-gap: 1em;
	}
}

@media (min-height: 720px)
{
	.cfsInfo
	{
		row-gap: 2em;
		font-size: 14px;
	}
}

.cfsLevelBlock
{
	display: flex;
}

.cfsLevelBlock:hover
{
	background-color: var(--custom-infotable-hover-colour, lightblue);
}

.cfsInfo > *
{
	grid-column: 1;
}

.cfsLevelImage
{
	width: 70px;
	min-width: 70px;
	flex: 0 0 70px;
	text-align: right;
	margin-right: 1em;
}

.cfsLevelImage > img
{
	margin-right: 0px;
	margin-left: auto;
}

#cfsLevelBlock7
{
	grid-column: 2;
	grid-row: 1;
}

#cfsLevelBlock8
{
	grid-column: 2;
	grid-row: 2;
}

#cfsLevelBlock9
{
	grid-column: 2;
	grid-row: 3;
}

.cfsDementiaBlock
{
	grid-column: 2;
	grid-row: 4 / span 3;
	align-self: center;
}

.cfsDementiaBlock:hover > div
{
	background-color: var(--custom-infotable-hover-colour, lightblue);
}

.cfsNumber
{
	font-weight: bold;
}

span.cfsLevelLabel
{
	font-weight: bold;
}

.cfsDementiaTitle
{
	font-weight: bold;
	margin-bottom: 0.5em;
}

.cfsDementiaText > p
{
	margin-bottom: 0.5em;
}

.BorgRPEScaleExplanation
{
	margin-left: auto;
	margin-right: auto;
	max-width: 680px;
}

.BorgRPEScaleExplanation p
{
	margin-left: 2em;
	margin-right: 2em;
	margin-top: 1em;
	margin-bottom: 1em;
}

.BorgRPEScale
{
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
}

.BorgRPEScale th,
.BorgRPEScale td
{
	padding-left: 0.5em;
	padding-right: 0.5em;
	vertical-align: middle;
}

.BorgRPEScaleCopyright
{
	display: flex;
	justify-content: flex-end;
	margin-left: auto;
	margin-right: 0px;
}

.BorgRPEScaleCopyright p
{
	font-size: 6pt;
}

/* --------------- Add new follow-up dialogue ------------------------*/

.DCSDialogs .DCSDialogs-dialog .DCSDialogs-buttonpane .DCSDialogs-buttonset .DCSDialogs-button
{
	padding-left: 0.5em;
	padding-right: 0.5em;
}

.addNewEntryDialog table
{
	border-collapse: collapse;
	border-spacing: 0px;
}

.addNewEntryDialog th
{
	padding-right: 1em;
	text-align: right;
	border-bottom: 1px solid var(--custom-colour-border);
	height: 32px;
	vertical-align: middle;
}

.addNewEntryDialog td
{
	border-bottom: 1px solid var(--custom-colour-border);
	height: 32px;
	vertical-align: middle;
}

.addNewEntryDialog tr:last-child th
{
	border-bottom: 0px;
}

.addNewEntryDialog tr:last-child td
{
	border-bottom: 0px;
}

/* Pregnancy page: */

.TabledQuestionButton *.Mybutton,
.TabledQuestionButton button.Mybutton,
.TabledQuestionButton input[type=button].Mybutton
{
	padding: 0.5rem;
	width: auto;
	font-size: larger;
}

.aboveAnswersRubric
{
	font-size: 16px;
	font-weight: bold;
	padding-top: 0.5em;
	padding-left: 15px;	/* Same as first colour of legend */
	padding-right: 1em;
	padding-bottom: 1em;
}

.rubricEmphasis
{
	font-weight: bold;
	text-decoration: underline;
}

.PEmbQuestionEmphasis
{
	font-weight: bolder;
	text-decoration: underline;
}

.CopiedValueItem,
input[type=text].CopiedValueItem
{
	background-color: yellow;
}