/* 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-wellarea-background: #f8f8ff; /* Same as well area from intellect base, which we're not overriding here (yet?) */
	--custom-colour-questionpage-title-background: var(--custom-colour-wellarea-background); /* 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;
}

/* Intellect css also annoyingly redefines the colour and font for strong!  Reset them to inherit. */
strong
{
	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
{
	background-color: white;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("../Images/LoginBESS2.jpg");
}

.login h1
{
	margin-top: 4vh;
	margin-bottom: 4vh;
	text-shadow: white 1px 1px 1px;
	-webkit-font-smoothing: antialiased;
}

.login h2
{
	margin-top: 7.6vh;
	margin-bottom: 6vh;
	text-shadow: white 1px 1px 1px;
	-webkit-font-smoothing: antialiased;
}

.ApplicationEnd
{
	background-color: white;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("../Images/LoginBESS2.jpg");
}

.ApplicationEnd h2
{
	display: none;
}

td.ApplicationEnd
{
	vertical-align: middle;
	padding-bottom: 6%;
}

td.ApplicationEnd a
{
	background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
	padding-left: 1em;
	padding-right: 1em;
	border-radius: 6px;
	text-shadow: white 1px 1px 1px;
	-webkit-font-smoothing: antialiased;
}

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

/* --------- BESS ------------ */

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

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

/* --------- END BESS ------------ */

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

.LightRow td
{
	background-color: #fff;
}

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

/* User permissions page */

/* Sticky first column */
table.UserPermissions td:nth-child(1),
table.UserPermissions th:nth-child(1)
{
	position: sticky;
	left: 0px;	/* Keeps the column on the left */
	z-index: 5;	/* Ensures it stays above other cells */
}

/* Sticky second column */
table.UserPermissions td:nth-child(2),
table.UserPermissions th:nth-child(2)
{
	position: sticky;
	left: 42px;
	z-index: 5;	/* Ensures it stays above other cells */
}

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

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

/* --------- BESS ------------ */

span.NoElbows
{
	color: grey;
}

/* --------- END BESS ------------ */


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

.EditSites
{
	text-align: center;
}

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

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

.UserEdit .tableBRB
{
	border-spacing: 0px;
}

.UserEdit .tableBRB th,
.UserEdit .tableBRB td
{
	vertical-align: top;
}

.UserEdit .tableBRB tr th:first-child
{
	width: 5%;
	min-width: 160px;
	max-width: 200px;
	border-left: 1px solid var(--custom-systemtable-border-colour);
}

.UserEdit .tableBRB tr th:nth-child(3)
{
	width: 8%;
	min-width: 220px;
	max-width: 250px;
}

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

#xFailedLoginAttempts
{
	width: 50px;
	margin-bottom: 0.25em;
}

#xTableROSelected td
{
	border: none;
}

#xTableROSelected img
{
	vertical-align: top;
	margin-right: 0.25em;
}

#xTableSitesSelected td
{
	border: none;
}

#xTableSitesSelected img
{
	vertical-align: top;
	margin-right: 0.25em;
}

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

/* --------- BESS ------------ */

/* Right-align the PROMs button on both the baseline and follow-up pages. - Leaving this here, though the PROMs button is now placed in a row above. */
#lblButtonsBottom2,
#lblButtonsBottom3
{
	text-align: right;
}

.PROMsButtonRow td
{
	padding-top: 0.75em;
	padding-bottom: 0.5em;
}

.PROMsButtonRow input[type=button].Mybutton
{
	width: auto;
	font-size: 14px;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

.sectionRubric
{
	font-size: 16px;
	padding-top: 0.5em;
	padding-left: 1em;
	padding-right: 1em;
	padding-bottom: 1em;
}

.aboveAnswersRubric
{
	font-size: 16px;
	padding-top: 0.5em;
	padding-right: 1em;
	padding-bottom: 1em;
}

.inQuestionsRubric
{
	font-size: 16px;
	font-weight: bold;
	padding-right: 1em;
	padding-top: 1em;
	padding-bottom: 0.5em;
}

.strongRubric
{
	font-weight: bold;
}

/* --------- END BESS ------------ */

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

tr.SiteTableRowDisabled td
{
	color: red;
}

tr.SiteTableRow:hover
{
	/*background: linear-gradient(to bottom, #3D94F6 5%, #1E62D0 100%);
	color: black;
	cursor: default;*/
}

tr.SiteTableRow:hover td
{
	/*background: linear-gradient(to bottom, #3D94F6 5%, #1E62D0 100%);
	color: black;*/
}

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

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

/* --------- BESS ------------ */

.EditingElbowTitle
{
	color: var(--theme-colour-readonly-answer) !important;
	font-weight: bold;
	font-size:1em;
	padding: 1px 0px 1px 6px !important;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

@media (max-width: 1000px)
{
	.lhn
	{
		max-width: 138px;
	}
	.lhn *
	{
		font-size: 14px;
	}
	.lhntable input[type=button]
	{
		width: 110px;
		font-size: 12px;
	}
	.wellarea
	{
		min-width: 714px;
	}
	.nextprebuttonarea *
	{
		font-size: 0.8em;
	}
	.nextprebuttonarea *.Mybutton,
	.nextprebuttonarea button.Mybutton,
	.nextprebuttonarea input[type=button].Mybutton
	{
		font-size: 0.8em;
		width: 100px;
	}
	.NewDatabaseInfoHeader *
	{
		font-size: 0.8em;
	}
}

/* Special case for the anti-biotics table Add button - it's in the header of the table so doesn't stand out.  Make it green (like "Mybuttongreen" style) */
#AntibioticsTableRow th .SubProcedureButton
{
	border:1px solid #74b807;
	color:#fff;
	text-shadow:1px 1px 0px #528009;
	-moz-box-shadow:inset 1px 1px 0px 0px #a4e271;
	-webkit-box-shadow:inset 1px 1px 0px 0px #a4e271;
	box-shadow:inset 1px 1px 0px 0px #a4e271;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #89C403), color-stop(1, #77A809));
	background:-moz-linear-gradient(top, #89C403 5%, #77A809 100%);
	background:-webkit-linear-gradient(top, #89C403 5%, #77A809 100%);
	background:-o-linear-gradient(top, #89C403 5%, #77A809 100%);
	background:-ms-linear-gradient(top, #89C403 5%, #77A809 100%);
	background:linear-gradient(to bottom, #89C403 5%, #77A809 100%);
	background-color:#89c403;
}

#AntibioticsTableRow th .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, #89C403), color-stop(1, #77A809));
	background:-moz-linear-gradient(top, #89C403 5%, #77A809 100%);
	background:-webkit-linear-gradient(top, #89C403 5%, #77A809 100%);
	background:-o-linear-gradient(top, #89C403 5%, #77A809 100%);
	background:-ms-linear-gradient(top, #89C403 5%, #77A809 100%);
	background:linear-gradient(to bottom, #89C403 5%, #77A809 100%);
	background-color:#89c403;
}

#AntibioticsTableRow th .SubProcedureButton:hover
{
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #77A809), color-stop(1, #89C403));
	background:-moz-linear-gradient(top, #77A809 5%, #89C403 100%);
	background:-webkit-linear-gradient(top, #77A809 5%, #89C403 100%);
	background:-o-linear-gradient(top, #77A809 5%, #89C403 100%);
	background:-ms-linear-gradient(top, #77A809 5%, #89C403 100%);
	background:linear-gradient(to bottom, #77A809 5%, #89C403 100%);
	background-color:#77a809
}

#AntibioticsTableRow th .SubProcedureButton:active
{
	text-shadow:2px 2px 1px rgb(65.6,102.4,7.2);
	-moz-box-shadow:inset -1px -1px 0px 0px rgb(127.9192982456,214.501754386,56.698245614);
	-webkit-box-shadow:inset -1px -1px 0px 0px rgb(127.9192982456,214.501754386,56.698245614);
	box-shadow:inset -1px -1px 0px 0px rgb(127.9192982456,214.501754386,56.698245614);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, rgb(95.2, 134.4, 7.2)), color-stop(1, rgb(109.6, 156.8, 2.4)));
	background:-moz-linear-gradient(top, rgb(95.2, 134.4, 7.2) 5%, rgb(109.6, 156.8, 2.4) 100%);
	background:-webkit-linear-gradient(top, rgb(95.2, 134.4, 7.2) 5%, rgb(109.6, 156.8, 2.4) 100%);
	background:-o-linear-gradient(top, rgb(95.2, 134.4, 7.2) 5%, rgb(109.6, 156.8, 2.4) 100%);
	background:-ms-linear-gradient(top, rgb(95.2, 134.4, 7.2) 5%, rgb(109.6, 156.8, 2.4) 100%);
	background:linear-gradient(to bottom, rgb(95.2, 134.4, 7.2) 5%, rgb(109.6, 156.8, 2.4) 100%);
	background-color:rgb(95.2,134.4,7.2)
}

/* Download Operation Note Button */

.PostOpDownloadButtonWrapper
{
	display: inline-block;
	margin-right: 1em;
}

input[type=button].DownloadOpNoteButton
{
	width: 265px;
	height: 3em;
}

input[type=button].DownloadNJRFormButton
{
	width: 265px;
	height: 3em;
}

/* --------- END BESS ------------ */

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

.DisplayInfo [onclick]
{
	cursor: pointer;
}

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

.cfsInfo [onclick]
{
	cursor: pointer;
}

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

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

/* --------------- MDT ------------------------*/

.mdtheader
{
	font-weight: bold;
	/*
	background-color: #870D7C;
	color: #FFFFFF;
	*/
	padding: 10px;
}

.ContainerMDTSearch, .ContainerMDTButtons, .ContainerMDTHistory, .ContainerMDTTypes, .ContainerMDTStatus
{
	border: 2px solid #000000;
	/*background-color: #CCC;*/
	color: #000;
	margin: 2px 10px 2px 10px;
	padding: 8px;
	font-size: 0.8em;
}
/*
.ContainerMDTMenu
{
	color: #000;
	margin: 2px 10px 2px 10px;
	padding: 8px;
}

.ContainerMDTMenu div
{
	padding: 10px;
}

.ContainerMDTMenu .Mybutton
{
	width: 200px;
	font-size: 0.75em;
}
*/

#ContainerMDTPending, #ContainerMDTMonitoring, #ContainerMDTActive
{
	border: 2px solid #000000;
	/*background-color: #CCC;*/
	color: #000;
	margin: 10px;
}

#MDTPendingTitle, #MDTMonitoringTitle, #MDTActiveTitle
{
	border: 2px solid #000000;
	/*background-color: #CCC;*/
	color: #000;
	margin: 10px 10px 0px 10px;
	padding: 5px 0px 10px 15px;
	font-weight: bold;
	font-size: 0.8em;
}

/* Let's try and get some of the standard formatting for all MDT tables into a class */
.MDTTable
{
	border-collapse: separate;
	border-spacing: 0px;
	font-size: 0.75em;
}

.MDTTable thead
{
	position: sticky;
	top: 0;
	background-color: var(--custom-colour-wellarea-background);
}

.MDTTable th
{
	padding-left: 1em;
	padding-right: 1em;
	padding-top: 5px;
	padding-bottom: 5px;
}

.MDTTable .HeaderSortArrow
{
	color: black;
}

.MDTTable .HeaderSortArrow:hover
{
	cursor: pointer;
	color: blue;
}

.MDTTable td
{
	padding-left: 1em;
	padding-right: 1em;
	padding-top: 5px;
	padding-bottom: 5px;
}

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

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

#tblMDTTypes
{
	border:1px solid #000;
	border-collapse:collapse;
	width: 90%;
}

#tblMDTTypes th,
#tblMDTTypes td
{
	color: #000;
	font-size: 0.75em;
	padding: 5px 0px 5px 10px;
	border:1px solid #000;
	text-align: left;
}

#tblMDTPatientSearch
{
	border-collapse: separate;
	border-spacing: 0px;
	background-color: var(--custom-colour-wellarea-background);
	font-size: 0.75em;
}

#tblMDTPatientSearch thead
{
	position: sticky;
	top: 0;
	background-color: var(--custom-colour-wellarea-background);
}

#tblMDTPatientSearch th
{
	padding-top: 5px;
	padding-bottom: 2px;
	padding-left: 1em;
	padding-right: 1em;
	vertical-align: bottom;
	text-align: center;
}

#tblMDTPatientSearch td
{
	vertical-align: middle;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 1em;
	padding-right: 1em;
	text-align: center;
}

#tblMDTPatientSearch td.Name
{
	text-align: left;
}

#tblMDTPatientSearch td.Date
{
	text-align: center;
}

#tblMDTPatientSearch td.Number
{
	text-align: right;
}

#tblMDTPatientSearch td.Text
{
	text-align: left;
}

#tblMDTPatientSearch td input
{
	vertical-align: top;
}

#tblMDTPatientSearch td label
{
	vertical-align: top;
}

#tblMDTPatientSearch tbody tr:hover
{
	background-color: var(--custom-systemtable-hover-colour);
}

#tblMDTSearchPanel th,
#tblMDTSearchPanel td
{
	/*background-color: #CCC;*/
	color: #000;
	font-size: 0.75em;
	font-weight: bold;
	padding-top: 5px;
	padding-bottom: 5px;
}

#tblMDTSearchPanel th
{
	text-align: right;
	padding-right: 10px;
}

#tblMDTSearchPanel td
{
	text-align: left;
	padding-left: 10px;
	padding-right: 50px;
}

#ContainerMDTClinicians
{
	border: 2px solid #000000;
	/*background-color: #CCC;*/
	color: #000;
	/*margin: 20px;*/
	margin: 20px 200px 20px 200px;
}

#tblMDTClinicians td
{
	font-size: 0.75em;
	padding: 10px;
}

.ContainerMDTStatus #newTrustMsg
{
	height: 60px;
	color: #042282;
	padding-top: 15px;
}

.mdtdraglist {overflow-y:scroll; list-style:none; margin:0; padding:0; height:300px; width:100%;}
.mdtnodraglist {overflow-y:scroll; list-style:none; margin:0; padding:0; width:100%;}
.mdtdraglist li, .mdtnodraglist li {cursor:move; margin-bottom:1px; font-size: 11pt; }
.mdtdraglist li {background-color:#EEE;}
/*.mdtnodraglist li {background-color:#9FB;}*/
.mdtnodraglist .greenrow {background-color:#9FB;}
.mdtnodraglist .greyrow {background-color:#EEE;}
.mdtdraglist li span.gotomdt, .mdtnodraglist li span.gotomdt {float:right;}

.mdtdraglist li span.mdtpatname {padding-left: 10px;}

/*.mdtdraglist li span.mdtpatname {float:left;}*/
/*.mdtdraglist li span.mdtpatinfo {float:left}*/

.mdtdraglist li span.mdtpatsummary {float:right;}
.mdtdraglist li span.mdtpatsummary button {background-color: #9F9;}


.ddmdt {width:100%;}
.ddmdt td {width:100%;}
.ddmdt th {font-size:1em; background:#36C; color:#FFF; padding:10px 0;}
.ddmdt td ul li {padding:5px;}

#ulmdt div span {float:left;}
#ulmdtPending div span {float:left;}
#ulmdtMonitoring div span {float:left;}
#ulmdtActive div span {float:left;}


#DCSConfBox #tblAddMDTClinicians th,
#DCSConfBox #tblAddMDTClinicians td,
#DCSConfBox #tblReferOther th,
#DCSConfBox #tblReferOther td
{
	background-color: #EEE;
	color: #000;
	font-size: 0.75em;
}

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

.mdtMenuArea .buttonPanel input
{
	margin-bottom: 0.5rem;
	min-width: 200px;
}

.ContainerMDTMenu .buttonPanel div
{
	margin: 10px;	
}

.clinicianListHdr
{
	font-weight: bold;
	padding: 10px 0px 10px 3px;	
}

#MDTCliniciansOptions td 
{
	vertical-align: top;
}

#msgMDTAllClinicians
{
	font-weight: bold;
	font-size: 1.1em;
	padding: 10px 0px 10px 3px;
}

#tblMDTAllClinicians .selectedClinicians:hover
{
	background-color: #EEE;
	font-weight: bold;
}

/* --------- END MDT ------------ */