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

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

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

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

.btnTop
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

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

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

/* "Clearable" input fields */

span.ClearableField
{
	position: relative;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
}

span.ClearableField span
{
	position: absolute;
	display: block;
	right: 3px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	color: #fff;
	background-color: #ccc;
	font: 13px monospace;
	text-align: center;
	line-height: 1em;
	cursor: pointer;
	vertical-align: middle;
}

span.ClearableField input
{
	padding-right: 18px;
	box-sizing: border-box;
	vertical-align: middle;
}

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


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

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

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


/* On Patient Listing Page */

.PatientDemographicShortList .top
{
	border-spacing: 0px;
}

.PatientDemographicShortList .top td
{
	vertical-align: middle;
}

.PatientDemographicShortList .top td:first-child,
.PatientDemographicShortList .top td:last-child
{
	width: 14em;
}

.PatientDemographicShortList .top h1
{
	text-align: center;
	font-size: 2.5rem;
	margin: 0.25em;
}

/* "Add new patient button: too small" */

.PatientDemographicShortList .top input
{
	font-size: 1.5rem;
	min-width: 10em;
}

/* Address some formatting of the search area */

.PatientDemographicShortList #SearchExistingPatient
{
	font-size: 1.5rem;
	padding-left: 0.5em;
	background-color: lightgray;
	border-top: 1px solid var(--custom-systemtable-border-colour);
	border-left: 1px solid var(--custom-systemtable-border-colour);
	border-right: 1px solid var(--custom-systemtable-border-colour);
}

#srchTable
{
	border-spacing: 0px;
	margin-top: 0px;
}

/* Prevent button for the calendar from wrapping onto the line below, and sort out alignment: */
#srchTable td
{
	vertical-align: middle;
	white-space: nowrap;
}

#srchTable .btnCol
{
	border-right: none;
}

#srchTable tr.colorcode td
{
	text-align: center;
}

#srchTable th
{
	border-right: none;
}

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

/* So that the button for the calendar can usually fit inside the the table cell: */
#srch-DateOfEntry
{
	width: auto;
	min-width: 15em;
}

/* Although the Date of Birth field, for some reason, does not have a calendar button, make the input the same width, for consistency: */
#srch-DateOfBirth
{
	width: auto;
	min-width: 15em;
}

.DateInputWrapper
{
	display: inline-block;
	vertical-align: middle;
}

.DateInputWrapper img
{
	margin-left: 0.2em;
	vertical-align: middle;
}

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

#ColourCodeRow td[onclick]
{
	cursor: pointer;
}

#ColourCodeRow td[onclick]:hover
{
	opacity: 0.75;
}

/* On Patient Listing Page List */

.SortColumnButtons
{
	display: inline-block;
	margin: 0px;
	margin-left: 1em;
	padding: 0px;
	vertical-align: middle;
	overflow: hidden;
}

#MyPatientsHeader span[onclick]
{
	cursor: pointer;
}

#MyPatientsHeader span[onclick]:hover
{
	color: yellow;
}

#MyPatientsHeader span[onclick]:hover:active
{
	position: relative;
	top: 1px;
	left: 1px;
}

/*#MyPatientsHeader span img:hover
{
}*/

#MyPatientsHeader span img
{
	display: inline-block;
}

#MyPatientsHeader span img:active
{
	position: relative;
	top: 1px;
	left: 1px;
}

.PatientDemographicShortResults th
{
	min-height: 24px;
	vertical-align: middle;
}

.PatientDemographicShortResults tr:hover td
{
	background-color: #DDFFFF;
}

/* New patient page */

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

.PatientDemographicShortNew .QuestionLabel
{
	font-size: 11pt;
	height: 30px;
	min-height: 30px;
	padding-right: 0.5em;
	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;
}

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

/*	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 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. */
.SliderWrapper
{
	display: inline-block;
	vertical-align: top;
	margin-right: 1em;
}

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

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