@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700,300");

:root
{
	/* Brand Colours from the NHO logo */
	--brand-NHO-Purple: #8E0152;
	--brand-NHO-Orange: #E37B00;
	--brand-NHO-Red: #B50433;

	/* Other colours determined from the SHOT website */
	--other-colour-Off-Black: green;
	--other-colour-Light-Gray: #ccc;
	--other-colour-Light-Red: #DB3C51;

	/* Other colours reused from elsewhere: */
	--other-colour-Granite-Grey: rgb(147,154,167);
	--other-colour-Sand-Grey: rgb(204,197,189);

	--other-colour-Red-15percent: #F8DADD; /* Colour obtained from SHOT Red at 85% transparency on a white background */
	--other-colour-Red-30percent: #F1B3BB; /* Colour obtained from SHOT Red at 70% transparency on a white background */
	--other-colour-Red-10percent: #FAE5E8; /* Colour obtained from SHOT Red at 90% transparency on a white background */
	--other-colour-Red-5percent: #FDF2F4; /* Colour obtained from SHOT Red at 95% transparency on a white background */
	--other-colour-Subtle-Red: var(--other-colour-Red-5percent);

	--theme-colour-text: black;

	--theme-colour-tooltip-text: black;
	--theme-colour-tooltip-background: var(--other-colour-Subtle-Red);

	--theme-colour-border: var(--other-colour-Light-Gray);

	--theme-colour-button: var(--brand-NHO-Purple);
	--theme-colour-buttontext: white;

	--theme-colour-button-highlight: var(--brand-NHO-Orange);
	--theme-colour-buttontext-highlight: white;

	--theme-colour-special-button: var(--brand-NHO-Orange);
	--theme-colour-special-buttontext: white;

	--theme-colour-special-button-highlight: var(--brand-NHO-Purple);
	--theme-colour-special-buttontext-highlight: white;

	--theme-colour-disabled-button: var(--other-colour-Sand-Grey);
	--theme-colour-disabled-buttontext: var(--other-colour-Granite-Grey);
	--theme-colour-disabled-buttonborder: var(--other-colour-Granite-Grey);

	--theme-colour-disabled-text: var(--other-colour-Sand-Grey);

	--theme-colour-menu-button: var(--brand-NHO-Orange);
	--theme-colour-menu-buttontext: white;

	--theme-colour-menu-button-highlight: var(--theme-colour-button);
	--theme-colour-menu-buttontext-highlight: white;

	--theme-colour-logout-button: var(--theme-colour-button);
	--theme-colour-logout-buttontext: white;

	--theme-colour-logout-button-highlight: var(--brand-NHO-Orange);
	--theme-colour-logout-buttontext-highlight: white;

	/*--theme-colour-delete-button: var(--brand-NHO-Orange);
	--theme-colour-delete-buttontext: white;*/
	--theme-colour-delete-buttontext: white;
	--theme-colour-delete-button: #AA0000;

	/*--theme-colour-delete-button-highlight: var(--brand-NHO-Purple);
	--theme-colour-delete-buttontext-highlight: white;*/
	--theme-colour-delete-buttontext-highlight: white;
	--theme-colour-delete-button-highlight: #DD0000;

	--theme-colour-disabled-delete-button: var(--theme-colour-disabled-button);
	--theme-colour-disabled-delete-buttontext: var(--theme-colour-disabled-buttontext);
	--theme-colour-disabled-delete-buttonborder: var(--theme-colour-disabled-buttonborder);

	--theme-colour-link: var(--brand-NHO-Purple);
	--theme-colour-linkhighlight: var(--brand-NHO-Orange);	/*#58585A;*/

	/*--theme-colour-question-default: #0077b5;
	--theme-colour-question-text-default: white;*/
	--theme-colour-question-default: white;
	--theme-colour-question-text-default: black;

	/* Answered, Unanswered, Desirable and mandatory colours. */
	--theme-colour-question-unanswered: var(--brand-NHO-Purple);
	--theme-colour-question-text-unanswered: white;
	--theme-colour-question-answered: #60C652;		/* Green */
	--theme-colour-question-text-answered: black;
	--theme-colour-question-desirable: #EF7D00;	/* From the SHOT Report (TACO) */
	--theme-colour-question-text-desirable: white;
	--theme-colour-question-mandatory: #CD171A;	/* From the SHOT Report (Delays) */
	--theme-colour-question-text-mandatory: white;
	/* --------------- */

	--theme-dialog-progressbar: var(--brand-NHO-Purple);

	--theme-colour-questionpage-title: white;
	--theme-colour-questionpage-title-background: var(--theme-colour-special-button);
	--theme-colour-questionpage-message: var(--brand-NHO-Purple);

	--theme-thickness-questionpage-sectionborder: 2px;

	--theme-colour-questionpage-inactivetab: var(--brand-NHO-Purple);
	--theme-colour-questionpage-inactivetabtext: var(--theme-colour-special-buttontext);

	--theme-colour-questionpage-inactivetab-highight: var(--theme-colour-button-highlight);
	--theme-colour-questionpage-inactivetabtext-highlight: var(--theme-colour-buttontext-highlight);

	--theme-colour-readonly-answer: var(--brand-NHO-Purple);

	--theme-dialog-title-background: var(--brand-NHO-Purple);
	--theme-dialog-title-text: white;
	--theme-dialog-title-buttonhighlight: var(--brand-NHO-Purple);

	--theme-colour-calendar-date-active: var(--other-colour-Red-15percent);
	--theme-colour-calendar-date-current: var(--other-colour-Red-30percent);
	--theme-colour-calendar-date-inactive: var(--other-colour-Light-Gray);
	--theme-colour-calendar-date-active-highlight: var(--brand-NHO-Purple);
	--theme-colour-calendar-date-active-highlight-text: white;

	--theme-colour-calendar-navigatebutton-highlight: var(--brand-NHO-Purple);
	--theme-colour-calendar-navigatebutton-highlight-text: white;

	/* Tables */
	--theme-colour-table-border: black;
	--theme-colour-alternaterow: var(--other-colour-Red-5percent);
	--theme-colour-hightlightrow: var(--other-colour-Red-15percent);

	--theme-colour-admin-section-title: white;
	--theme-colour-admin-section-title-background: var(--brand-NHO-Purple);

	/*--registry-font: 'Open Sans', Helvetica, Verdana, Arial, sans-serif;*/
	/*--registry-font: 'Brush Script MT';*/
	/*--registry-font: 'Algerian';*/
	--registry-font: "Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

	color: var(--theme-colour-text);
	background-color: white;
	font-family: var(--registry-font);
	font-size: 11pt;
	font-weight: 500;	/* make font weight slightly bolder than normal (400) as comment was that it "looks grey" */

	--theme-font-size-button: 16px;
	--theme-font-size-subheading: 24px;

	height: 100%;
	margin: 0;
	background-position: right bottom;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5)), url('../images/circles.png');
}

/* Scrollbar styling for Chrome, Edge, etc */
::-webkit-scrollbar
{
	-webkit-appearance: none;
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track
{
	background-color: white;
	border-radius: 8px;
	margin: 2px;
}

::-webkit-scrollbar-thumb
{
	border-radius: 8px;
	background-color: var(--brand-NHO-Purple);
}

::-webkit-scrollbar-thumb:hover
{
	border-radius: 8px;
	background-color: var(--brand-NHO-Orange);
}

::-webkit-scrollbar-button
{
	border-style: solid;
	height: 10px;
	width: 10px;
}

/* Up */
::-webkit-scrollbar-button:vertical:decrement
{
	border-width: 0 5px 10px 5px;
	border-color: transparent transparent var(--brand-NHO-Purple) transparent;
}

::-webkit-scrollbar-button:vertical:decrement:hover
{
	border-color: transparent transparent var(--brand-NHO-Orange) transparent;
}

/* Down */
::-webkit-scrollbar-button:vertical:increment
{
	border-width: 10px 5px 0px 5px;
	border-color: var(--brand-NHO-Purple) transparent transparent transparent;
}

::-webkit-scrollbar-button:vertical:increment:hover
{
	border-color: var(--brand-NHO-Orange) transparent transparent transparent;
}

/* Left */
::-webkit-scrollbar-button:horizontal:decrement
{
	border-width: 5px 10px 5px 0;
	border-color: transparent var(--brand-NHO-Purple) transparent transparent;
}

::-webkit-scrollbar-button:horizontal:decrement:hover
{
	border-color: transparent var(--brand-NHO-Orange) transparent transparent;
}

/* Right */
::-webkit-scrollbar-button:horizontal:increment
{
	border-width: 5px 0 5px 10px;
	border-color: transparent transparent transparent var(--brand-NHO-Purple);
}

::-webkit-scrollbar-button:horizontal:increment:hover
{
	border-width: 5px 0 5px 10px;
	border-color: transparent transparent transparent var(--brand-NHO-Orange);
}

/* END Scrollbar styling for Chrome, Edge, etc */

body
{
	margin-top: 0px;
}

#PatientListWrapper, #QuestionPageInformationLine, #ContainerButtonsTop p
{
	background-color: white;
	border-radius: 5px;
}

#colorCodeKeyWrapper, #questionTableContainer, .tab-body-holder, #tableContainer
{
	background-color: white;
}

/* Tooltips */

/*.DCSToolTip, div.DCSToolTip
{
	opacity: 1;
	z-index: 50000;
	max-width: 800px;
	background-color: var(--theme-colour-tooltip-background);
	font-family: var(--registry-font);
	font-size: 0.8rem;
	color: var(--theme-colour-tooltip-text);
	padding: 0.25em;
}

.DCSToolTip .ui-tooltip-content, div.DCSToolTip .ui-tooltip-content
{
	font-size: 0.8rem;
	font-family: var(--registry-font);
}

div.DCSToolTipContainer
{
	font-size: 0.8rem;
	font-family: var(--registry-font);
}

/* END tooltips */

.topPanelTitle
{
	text-shadow: white 1px 1px 1px;
	-webkit-font-smoothing: antialiased;
}

a
{
	color: var(--theme-colour-link);
	text-decoration: none;
	outline: none;
	cursor: pointer;
}

a:hover
{
	color: var(--theme-colour-linkhighlight);
}

*[onclick], label
{
	cursor: pointer;
}

.topPanel
{
	padding-top: 10px;
	display: grid;
	position: sticky;
	top: 0;
	background-color: white;

	grid-template-columns: 180px 160px auto 160px;
	justify-items: stretch;
	align-items: center;

	grid-template-areas:
		"logo spacer header rightControl";
}

.SiteLogo
{
	grid-area: logo;
	justify-self: center;
	height: 50px;
	width: 176px;
	background: url(../images/SiteLogo.png) no-repeat;
	background-size: contain;
}

.topPanelLeft
{
	grid-area: leftControl;
}

.topPanelTitle
{
	grid-area: header;
	font-weight: bold;
	justify-self: center;
	align-self: center;
	text-align: center;
	font-size: 1.5rem;
}

.toppageheader
{
	font-weight: bold;
	text-align: center;
	font-size: 1.5rem;
}

.topRightMenuBlock
{
	display: none;
}

.logoutButton
{
	display: inline-block;
	min-width: 110px;
	color: var(--theme-colour-buttontext);
	background-color: var(--theme-colour-button);
	border: none;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	padding-right: 0.75rem;
	padding-left: 0.75rem;
	font-family: var(--registry-font);
	font-size: var(--theme-font-size-button);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border-radius: 6px;
}

.logoutButton:hover
{
	color: var(--theme-colour-logout-buttontext-highlight);
	background-color: var(--theme-colour-logout-button-highlight);
}

.logoutButton:active
{
}

.toplevelTable
{
	width: 100%;
	height: 100%;
	border-collapse: collapse;
}

/* Hide the top-right menu buttons.  We might remove the code for them too.  This was a SHOT theme.  In this theme, the left side bar is always visible. */
.topRightMenuBlock input[type=button]
{
	display: none;
	width: 0px;
	height: 0px;
}

div.contact
{
	margin-top: 2.5em;
	text-align: center;
	text-shadow: white 1px 1px 1px;
	-webkit-font-smoothing: antialiased;
}

div.systemversion
{
	font-size: smaller;
	margin-top: 0.5em;
	text-align: center;
	text-shadow: white 1px 1px 1px;
	-webkit-font-smoothing: antialiased;
}

/* ******* Standard buttons ******* */

.Mybutton, .MyButton
{
	display: inline-block;
	min-width: 110px;
	color: var(--theme-colour-buttontext);
	background-color: var(--theme-colour-button);
	border: none;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	padding-right: 0.75rem;
	padding-left: 0.75rem;
	font-family: var(--registry-font);
	font-size: var(--theme-font-size-button);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border-radius: 6px;
}

.Mybutton:focus, .MyButton:focus
{
}

.Mybutton:hover, .MyButton:hover
{
	color: var(--theme-colour-buttontext-highlight);
	background-color: var(--theme-colour-button-highlight);
}

.Mybutton:active, .MyButton:active
{
	position:relative;
	top:1px;
	left:1px;
}

.Mybutton:disabled, .MyButton:disabled
{
	color: var(--theme-colour-disabled-buttontext);
	background-color: var(--theme-colour-disabled-button);
	border-color: var(--theme-colour-disabled-buttonborder);
}

/* Special Buttons */

.MyButtonSpecial
{
	display: inline-block;
	min-width: 110px;
	color: var(--theme-colour-special-buttontext);
	background-color: var(--theme-colour-special-button);
	border: none;
	border-radius: 6px;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	padding-right: 0.75rem;
	padding-left: 0.75rem;
	font-family: var(--registry-font);
	font-size: var(--theme-font-size-button);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.MyButtonSpecial:focus
{
}

.MyButtonSpecial:hover
{
	color: var(--theme-colour-special-buttontext-highlight);
	background-color: var(--theme-colour-special-button-highlight);
}

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

.MyButtonSpecial:disabled
{
	color: var(--theme-colour-disabled-buttontext);
	background-color: var(--theme-colour-disabled-button);
	border-color: var(--theme-colour-disabled-buttonborder);
}

/* Side panel visible (for now) only in admin mode */

.lhn
{
	/* Slight hack to make sure the column collapses to the width of the internal table, because for some reason on these pages it is given extra spacing. */
	width: 1px;
	max-width: fit-content;
	min-width: fit-content;
	white-space: nowrap;
	padding: 0px;
	padding-right: 0.5rem;
	margin: 0px;
	vertical-align: top;
	overflow-y: auto;
}

.lhntable
{
	display: inline-block;
	padding: 0px;
	margin: 0px;
}

.lhntable .Mybutton
{
	width: 165px;
	padding-left: 0px;
	padding-right: 0px;
	text-align: center;
}

.lhntable .MyButtonSpecial
{
	width: 165px;
	padding-left: 0px;
	padding-right: 0px;
	text-align: center;
}

.lhntable tr:first-child td
{
	padding-top: 2rem;
}

.singPage .lhntable tr:first-child td
{
	padding-top: 5.75rem;
}

.lhntable tr:last-child td
{
	padding-top: 1.5rem;
	vertical-align: bottom;
}

/* End of side panel */

.wellarea
{
	vertical-align: top;
}

/* ******* End of Standard buttons ******* */

.hideEle
{
	width: 0px;
	height: 0px;
	display: none;
}

/* ** Calendar ** */

#calenderBG
{
	background-color: black;
	opacity: 30%;
}

#calendar, #calender	/* Code has a typo which I'm not sure we can fix yet */
{
	border: 3px solid black;
	background-color: white;
	padding: 0px;
	margin: 0px;
}

#titleBar
{
	background-color: var(--theme-dialog-title-background);
	color: var(--theme-dialog-title-text);
	width: 100%;
	font-weight: bold;
}

#titleBar table
{
	width: 100%;
}

#titleCell
{
	text-align: left;
	color: var(--theme-dialog-title-text);
}

#titleButton
{
	text-align: right;
}

#titleButton button
{
	color: var(--theme-dialog-title-text);
	background-color: var(--theme-dialog-title-background);
	font-weight: bold;
	border: none;
	cursor: pointer;
}

#titleButton button:hover
{
	background-color: var(--theme-dialog-title-buttonhighlight);
}

#titleButton button:active
{
	opacity: 0.75;
}

#navigationContainer
{
	margin-left: 2px;
	margin-right: 2px;
	margin-top: 2px;
	margin-bottom: 2px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}

#navigationContainer button
{
	background-color: transparent;
	border: none;
	cursor: pointer;
}

#navigationContainer button:hover
{
	background-color: var(--theme-colour-calendar-navigatebutton-highlight);
	color: var(--theme-colour-calendar-navigatebutton-highlight-text);
}

#navigationContainer button:active
{
	opacity: 0.75;
}

#navigationContainer button:disabled
{
	color: var(--theme-colour-disabled-button);
	background-color: white;
	opacity: 1;
	cursor: default;
}

#calendarBlock
{
	width: 100%;
}

#calendarBlock th
{
	text-align: center;
}

.dateActive
{
	text-align: center;
	background-color: var(--theme-colour-calendar-date-active);
	cursor: pointer;
}

.dateActive:hover
{
	text-align: center;
	background-color: var(--theme-colour-calendar-date-active-highlight);
	color: var(--theme-colour-calendar-date-active-highlight-text);
	cursor: pointer;
}

.dateCurrent
{
	text-align: center;
	background-color: var(--theme-colour-calendar-date-current);
	opacity: 75%;
	cursor: pointer;
}

.dateCurrent:hover
{
	text-align: center;
	background-color: var(--theme-colour-calendar-date-active-highlight);
	color: var(--theme-colour-calendar-date-active-highlight-text);
	cursor: pointer;
}

.dateInactive
{
	text-align: center;
	background-color: var(--theme-colour-calendar-date-inactive);
}

/*** End of Calendar ***/

/* DCSConf Dialog styles */

/* Override J-Query styles */
.ui-widget
{
	font-family: var(--registry-font);
	font-size: 1rem;
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button
{
	font-family: var(--registry-font);
	font-size: 1rem;
}

.ui-widget-content
{
	border: 1px solid var(--theme-colour-border);
	background: white;
	color: var(--theme-colour-text);
}

.ui-widget-header
{
	border: 1px solid var(--theme-colour-border);
	background: var(--theme-dialog-title-background);
	color: var(--theme-dialog-title-text);
	font-weight: bold;
}

.ui-button .ui-icon
{
	background-image: url("/csp/nho/libraries/jquery-ui/images/ui-icons_ffffff_256x240.png");
}

.ui-widget-header .ui-icon
{
	background-image: url("/csp/nho/libraries/jquery-ui/images/ui-icons_ffffff_256x240.png");
}

.ui-button
{
	display: inline-block;
	min-width: 110px;
	color: var(--theme-colour-buttontext);
	background: none;
	background-color: var(--theme-colour-button);
	border: none;
	border-radius: 0;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	padding-right: 0.75rem;
	padding-left: 0.75rem;
	text-align: center;
	text-decoration: none;
}

.ui-button:focus
{
	color: var(--theme-colour-buttontext);
	background: none;
	background-color: var(--theme-colour-button);
	border: none;
}

.ui-button:hover
{
	color: var(--theme-colour-buttontext-highlight);
	background: none;
	background-color: var(--theme-colour-button-highlight);
	border: none;
}

.ui-button:active
{
	position:relative;
	top:1px;
	left:1px;
}

.ui-button:disabled
{
	color: var(--theme-colour-disabled-buttontext);
	background-color: var(--theme-colour-disabled-button);
	border: none;
}

/* END J-Query overrides */

.DCSDialogs .DCSDialogs-titlebar .DCSDialogs-pull-left
{
	float: left;
}

.DCSDialogs .DCSDialogs-titlebar .DCSDialogs-title-icon
{
	margin: 0px 10px 0 -5px;
	padding: 0;
	border: 1px solid white;
	border-radius: 3px;
}

/* ******* End of DCSConf Dialog styles ******* */

input[type=text],input[type=password],input[type=date],input[type=time]
{
	font: inherit;
	border-width: 1px;
	border-style: solid;
	border-color: var(--theme-colour-border);
	border-radius: 0px;
	border-collapse: collapse;
	box-sizing: border-box;
	margin: 0;
	padding: 2px 5px;
	tab-size: 4;
	line-height: 1.5rem;
	overflow: visible;
}

input[type="date" i]::-webkit-calendar-picker-indicator
{
	background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 9a1 1 0 100-2 1 1 0 000 2zM6 11a1 1 0 11-2 0 1 1 0 012 0zM8 9a1 1 0 100-2 1 1 0 000 2zM9 11a1 1 0 11-2 0 1 1 0 012 0zM11 9a1 1 0 100-2 1 1 0 000 2z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15 3.5A2.5 2.5 0 0012.5 1h-9A2.5 2.5 0 001 3.5v9A2.5 2.5 0 003.5 15h9a2.5 2.5 0 002.5-2.5v-9zM2 5h12v7.5c0 .83-.67 1.5-1.5 1.5h-9A1.5 1.5 0 012 12.5V5zm1.5-3h9c.83 0 1.5.67 1.5 1.5V4H2v-.5C2 2.67 2.67 2 3.5 2z" fill="black"/></svg>');
	background-origin: content-box;
	background-size: contain;
	block-size: 1em;
	inline-size: 1em;
	opacity: 1;
	background-repeat: no-repeat;
	outline: none;
	padding: 2px;
}

input[type="date" i]::-webkit-calendar-picker-indicator:hover
{
	background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 9a1 1 0 100-2 1 1 0 000 2zM6 11a1 1 0 11-2 0 1 1 0 012 0zM8 9a1 1 0 100-2 1 1 0 000 2zM9 11a1 1 0 11-2 0 1 1 0 012 0zM11 9a1 1 0 100-2 1 1 0 000 2z" fill="%23E37B00"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15 3.5A2.5 2.5 0 0012.5 1h-9A2.5 2.5 0 001 3.5v9A2.5 2.5 0 003.5 15h9a2.5 2.5 0 002.5-2.5v-9zM2 5h12v7.5c0 .83-.67 1.5-1.5 1.5h-9A1.5 1.5 0 012 12.5V5zm1.5-3h9c.83 0 1.5.67 1.5 1.5V4H2v-.5C2 2.67 2.67 2 3.5 2z" fill="%23CF041E"/></svg>');	/* Note: %23 is # converted for a url. */
	background-origin: content-box;
	background-size: contain;
	block-size: 1em;
	inline-size: 1em;
	opacity: 1;
	background-repeat: no-repeat;
	outline: none;
	padding: 2px;
}

input[type="date" i]::-webkit-calendar-picker-indicator:active
{
	position: relative;
	top: 1px;
	left: 1px;
}

input[type="time" i]::-webkit-calendar-picker-indicator
{
	background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0a8 8 0 110 16A8 8 0 018 0zm0 1a7 7 0 100 14A7 7 0 008 1zm-.5 2a.5.5 0 01.5.41V8h2.5a.5.5 0 01.09 1H7.5a.5.5 0 01-.5-.41V3.5c0-.28.22-.5.5-.5z" fill="black"/></svg>');
	opacity: 1;
	background-repeat: no-repeat;
	outline: none;
	padding: 2px;
}

input[type="time" i]::-webkit-calendar-picker-indicator:hover
{
	background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0a8 8 0 110 16A8 8 0 018 0zm0 1a7 7 0 100 14A7 7 0 008 1zm-.5 2a.5.5 0 01.5.41V8h2.5a.5.5 0 01.09 1H7.5a.5.5 0 01-.5-.41V3.5c0-.28.22-.5.5-.5z" fill="%23E37B00"/></svg>');	/* Note: %23 is # converted for a url. */
	opacity: 1;
	background-repeat: no-repeat;
	outline: none;
	padding: 2px;
}

input[type="time" i]::-webkit-calendar-picker-indicator:active
{
	position: relative;
	top: 1px;
	left: 1px;
}

select
{
	border-width: 1px;
	border-style: solid;
	border-color: var(--theme-colour-border);
	border-radius: 0px;
	border-collapse: collapse;
	margin: 0;
	tab-size: 4;
	font-size: 1rem;
	font-family: var(--registry-font);
	line-height: 1.25rem;
	overflow: visible;
	background-size: 1.5em 1.5em;
	/*padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 0.75em;
	padding-right: 2.5em;*/
	min-width: 3em;
	padding-right: 0.5em;
	text-rendering: optimizeLegibility;
}

textarea
{
	border-width: 1px;
	border-style: solid;
	border-color: var(--theme-colour-border);
	border-radius: 0px;
	border-collapse: collapse;
	box-sizing: border-box;
	margin: 0;
	font: inherit;
	tab-size: 4;
	line-height: 1.25em;
	overflow: visible;
	background-size: 1.5em 1.5em;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	padding-left: 0.75rem;
	padding-right: 0.5rem;
}

/* Question Pages */

#IncidentNumber
{
	font-size: 1rem;
	grid-area: incidentNumber;
	justify-self: start;
	white-space: nowrap;
}

#IncidentNumber > div
{
	display: inline-block;
}

.InformationPartTitle
{
	font-weight: bold;
}

#CaseTypeInformationLine
{
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	margin-left: 1rem;
	margin-right: 1rem;
	text-align: center;
	font-size: var(--theme-font-size-subheading);
	font-weight: bold;
}

/* Tabs */

#notab-section
{
	overflow: auto;
}

.tabSection
{
	overflow: auto;
	border-left: var(--theme-thickness-questionpage-sectionborder);
	border-top: 0px;
	border-right: var(--theme-thickness-questionpage-sectionborder);
	border-bottom: var(--theme-thickness-questionpage-sectionborder);
	border-style: solid;
	border-color: var(--theme-colour-border);
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

.subHeading
{
	top: 0;
	border-left: var(--theme-thickness-questionpage-sectionborder);
	border-top: var(--theme-thickness-questionpage-sectionborder);
	border-right: var(--theme-thickness-questionpage-sectionborder);
	border-bottom: 0px;
	border-style: solid;
	border-color: var(--theme-colour-border);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	color: var(--theme-colour-questionpage-title);
	background-color: var(--theme-colour-questionpage-title-background);
	text-align: center;
	font-weight: bold;
	font-size: var(--theme-font-size-subheading);
	cursor: default;
}

/* if the sub-heading is within the scroll area, we don't want the borders. */
#questionTableContainer .subHeading
{
	border: none;
	border-radius: 0;
}

.tab
{
	width: 100%;
}

table.tabHeader
{
	width: 100%;
	border-spacing: 0px;
}

/* Hide the row used by standard method for drawing tabs, if it is included. */

.tabmainactive
{
	border-left: var(--theme-thickness-questionpage-sectionborder);
	border-top: var(--theme-thickness-questionpage-sectionborder);
	border-right: var(--theme-thickness-questionpage-sectionborder);
	border-bottom: 0px;
	border-style: solid;
	border-color: var(--theme-colour-border);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	color: var(--theme-colour-questionpage-title);	/* Make the active tab text the same colour as the non-tabbed page title */
	background-color: var(--theme-colour-questionpage-title-background);
	text-align: center;
	font-weight: bold;
	font-size: var(--theme-font-size-subheading);
	cursor: default;
}

.tabmaininactive
{
	border-left: var(--theme-thickness-questionpage-sectionborder);
	border-top: var(--theme-thickness-questionpage-sectionborder);
	border-right: var(--theme-thickness-questionpage-sectionborder);
	border-bottom: var(--theme-thickness-questionpage-sectionborder);
	border-style: solid;
	border-color: var(--theme-colour-border);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	color: var(--theme-colour-questionpage-inactivetabtext);
	background-color: var(--theme-colour-questionpage-inactivetab);
	text-align: center;
	font-weight: normal;
	font-size: 20px;
	cursor: pointer;
}

.tabmaininactive:hover
{
	color: var(--theme-colour-questionpage-inactivetabtext-highlight);
	background-color: var(--theme-colour-questionpage-inactivetab-highight);
}

.tabrightactive, .tableftactive, .tabrightinactive, .tableftinactive
{
	width: 0px;
	padding: 0px;
	margin: 0px;
	border-collapse: collapse;
}

.tabseparator
{
	width: 5px;
	border-left: 0px;
	border-top: 0px;
	border-right: 0px;
	border-bottom: var(--theme-thickness-questionpage-sectionborder);
	border-style: solid;
	border-color: var(--theme-colour-border);
}

/* Remove the gap between "tabs" and page */
table.tabHeader tr:last-child
{
	height: 0px;
	display: none;
}

/* End of Tabs */

/* Add a message explaining how to clear a radio button.*/
.uncheckRadioButtonMessage
{
	font-size: 0.8rem;
	margin-left: 1rem;
	margin-top: 0.25rem;
}

.uncheckRadioButtonMessage input
{
	display: inline-block;
	padding: 0px;
	vertical-align: bottom;
	margin: 0px;
	margin-left: 2px;
	margin-right: 2px;
}
/* End of: Add a message explaining how to clear a radio button.*/

.nextprebuttonarea
{
	display: flex;
	width: 100%;
	font-size: 0.75rem;
}

.ContainerButtonsTop
{
	display: flex;
	width: 100%;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	column-gap: 1rem;
}

.ContainerButtonsTop p
{
	font: inherit;
	font-size: 1rem;
	white-space: nowrap;
	padding: 0px;
	margin: 0px;
}

#bDelete input
{
	font: inherit;
	background-color: var(--theme-colour-delete-button);
	color: var(--theme-colour-delete-buttontext);
	padding-left: 2rem;
	padding-right: 2rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	border-collapse: collapse;
	box-sizing: border-box;
	border-style: solid;
	border-radius: 6px;
	border-width: 1px;
	font-size: 1rem;
}

#bDelete input:hover
{
	background-color: var(--theme-colour-delete-button-highlight);
	color: var(--theme-colour-delete-buttontext-highlight);
}

#bDelete input:active
{
	position:relative;
	top:1px;
	left:1px;
}

#bDelete input:disabled
{
	color: var(--theme-colour-disabled-delete-buttontext);
	background-color: var(--theme-colour-disabled-delete-button);
	border-color: var(--theme-colour-disabled-delete-buttonborder);
}

/* Read-only (disabled) fields. */

.questionTable input:disabled
{
	border: none;
	padding: 0px;
	margin-left: 0.5em;
	background-color: initial;
	color: var(--theme-colour-readonly-answer);
	font-weight: bold;
	width: auto;
	cursor: default;
}

input:disabled::placeholder
{
	color: var(--theme-colour-readonly-answer);
	font-weight: normal;
	font-style: italic;
}

.questionTable input[type="text"]:read-only
{
	border: none;
	padding: 0px;
	margin-left: 0.5em;
	background-color: initial;
	color: var(--theme-colour-readonly-answer);
	/*font-weight: bold;*/
	width: auto;
	cursor: default;
}

.questionTable textarea:read-only
{
	border: none;
	padding: 0px;
	margin-left: 0.5em;
	background-color: initial;
	color: var(--theme-colour-readonly-answer);
	/*font-weight: bold;*/
	width: auto;
	cursor: default;
}

.questionTable textarea.TableMultiChoice:read-only
{
	border: 1px dashed grey;
	cursor: pointer;
}

.questionTable .Mybutton, .questionTable .MyButton
{
	margin-left: 1rem;
}

/* A button in the question table is also an input, so we need to reset its colours to those above */
.questionTable input.Mybutton:disabled, .questionTable input.MyButton:disabled
{
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	padding-right: 0.75rem;
	padding-left: 0.75rem;
	font-weight: normal;
	color: var(--theme-colour-disabled-buttontext);
	background-color: var(--theme-colour-disabled-button);
	border-color: var(--theme-colour-disabled-buttonborder);
}

.questionTable select:disabled
{
	border: none;
	padding: 0px;
	margin-left: 0.5em;
	background-color: initial;
	color: var(--theme-colour-readonly-answer);
	font-weight: bold;
	width: auto;
	cursor: default;
	opacity: 1;
	-webkit-appearance: none;
	-moz-appearance: none;
	text-indent: 1px;
}

input[type="radio"]:disabled,
input[type="checkbox"]:not([fieldtype='MultiChoice']):disabled
{
	display: none;
	width: 0px;
}

input[type="radio"]:disabled:checked + label,
input[type="checkbox"]:not([fieldtype='MultiChoice']):disabled:checked + label
{
	border: none;
	padding: 0px;
	margin-left: 0.5em;
	background-color: initial;
	color: var(--theme-colour-readonly-answer);
	font-weight: bold;
	width: auto;
	cursor: default;
}

input[type="radio"]:disabled:not(:checked) + label,
input[type="checkbox"]:not([fieldtype='MultiChoice']):disabled:not(:checked) + label
{
	display: none;
	width: 0px;
}

/* Multi-choice with exclusive options */

input[type="checkbox"][fieldtype='MultiChoice']:disabled
{
	margin: 3px 3px 3px 4px;
}

input[type="checkbox"][fieldtype='MultiChoice']:disabled:checked + label
{
	color: var(--theme-colour-disabled-text);
}

input[type="checkbox"][fieldtype='MultiChoice']:disabled:not(:checked) + label
{
	color: var(--theme-colour-disabled-text);
	cursor: default;
}

/* Special case of the Case type, where all the other check-boxes are programatically hidden */
input[name="Q190I1071"]:disabled
{
	display: none;
	width: 0px;
}

input[name="Q190I1071"]:disabled:checked + label
{
	border: none;
	padding: 0px;
	margin-left: 0.5em;
	background-color: initial;
	color: var(--theme-colour-readonly-answer);
	font-weight: bold;
	width: auto;
	cursor: default;
}

/* Special case of the Was Anti-D Ig omitted or administered late, where all the other radio-buttons are programatically hidden */
input[name="Q108I10691"]:disabled
{
	display: none;
	width: 0px;
}

/* Special case for "Was a pre-administration checklist used immediately prior to transfusion" option "Checklist list not available/not used in..."
   where other option widths are only 25% to line up with others, but this option is one the end and does not need to be truncated. */
#ContainerQ241I1131 > td > div > div:nth-child(6)
{
	width: auto;
}

/* Questions */

#questionTableContainer
{
	overflow-x: hidden;
	overflow-y: auto;
	border-left: var(--theme-thickness-questionpage-sectionborder);
	border-top: 0px;
	border-right: var(--theme-thickness-questionpage-sectionborder);
	border-bottom: var(--theme-thickness-questionpage-sectionborder);
	border-style: solid;
	border-color: var(--theme-colour-border);
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

.questionTable
{
	width: 100%;
	/*padding-top: 10px;*/
	padding-bottom: 0.5rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	margin-bottom: 0.5em;
	border-collapse: separate;
	border-spacing: 0px 5px;
}

.questionTable td
{
	padding-top: 0.25rem;
	padding-right: 0px;
	padding-bottom: 0.25rem;
	padding-left: 0.25rem;
	height: 1.3em;
	vertical-align: middle;
	border-bottom: 1px solid var(--theme-colour-border);
}

.questionTable th
{
	text-align: right;
	background-color: var(--theme-colour-question-default);
	color: var(--theme-colour-question-text-default);
	font-weight: bolder;
	padding-left: 0.25rem;
	padding-right: 0.25rem;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	vertical-align: top;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	min-height: 32.3px;
}

.QuestionLabel
{
	text-align: right;
	background-color: var(--theme-colour-question-default);
	color: var(--theme-colour-question-text-default);
	font-weight: bolder;
	padding-left: 0.25rem;
	padding-right: 0.25rem;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	vertical-align: middle;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	min-height: 32.3px;
}

.QuestionDataWrap img
{
	vertical-align: middle;
}

.QuestionDataWrap.dcs_disabled img
{
	display: none;
}

.QuestionDataElement
{
	display: inline-block;
	white-space: nowrap;
}

textarea.QuestionDataElement
{
	white-space: wrap;
}

.QuestionDataCell div
{
	text-overflow: clip;
	vertical-align: top;
}

.QuestionDataCell input
{
	display: inline-block;
	vertical-align: top;
}

.QuestionDataCell label
{
	display: inline-block;
	text-overflow: clip;
	white-space: wrap;
	width: 90%;
}

.QuestionDataNoWrap
{
	white-space: nowrap;
}

.QuestionDataNoWrap div
{
	display: inline-block;
	white-space: nowrap;
}

/* Multimedia buttons */

.QuestionUploadButton
{
	background: url(../images/uploadbutton.gif) no-repeat;
	width: 18px;
	height: 18px;
	display: inline-block;
}

.QuestionUploadButton:hover
{
	background: url(../images/uploadbuttonhover.gif) no-repeat;
}

.QuestionUploadButton:active
{
	background: url(../images/uploadbuttonhover.gif) no-repeat;
	position: relative;
	top: 1px;
	left: 1px;
}

.QuestionMediaViewButton
{
	margin-left: 1em;
	background: url(../images/viewmedia.gif) no-repeat;
	width: 18px;
	height: 18px;
	display: inline-block;
}

.QuestionMediaViewButton:active
{
	background: url(../images/viewmedia.gif) no-repeat;
	position: relative;
	top: 1px;
	left: 1px;
}

/* End Questions */

/* Questions Footer (buttons area) */

.ContainerButtonsBottom
{
	display: flex;
	width: 100%;
	height: 40px;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	column-gap: 1rem;
	margin-top: 2rem;
}

#Message
{
	font-size: 1rem;
	font-weight: bold;
	text-align: left;
	padding: 0px;
	color: var(--theme-colour-questionpage-message);
}

#Message p
{
	padding: 0px;
	margin: 0px;
	margin-bottom: 0.25em;
}

/* Colour Coding */

#colorCodeKeyWrapper
{
	top: 0;
	border-left: var(--theme-thickness-questionpage-sectionborder);
	border-top: 0px;
	border-right: var(--theme-thickness-questionpage-sectionborder);
	border-bottom: 0px;
	border-style: solid;
	border-color: var(--theme-colour-border);
	padding-top: 0.5rem;
	padding-left: 2rem;
}

/* If the colorCodeKeyWrapper is placed above all the sections, on a page where more than one section is shown not in tabs,
then we want to apply a border to the top to make it look integral to the scroll area, but not scroll. */
#colorCodeKeyWrapper:first-child
{
	top: 0;
	border-left: var(--theme-thickness-questionpage-sectionborder);
	border-top: var(--theme-thickness-questionpage-sectionborder);
	border-right: var(--theme-thickness-questionpage-sectionborder);
	border-bottom: 0px;
	border-style: solid;
	border-color: var(--theme-colour-border);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.colorCodeKeyContainer td
{
	border: none;
}

.colorCodeKey
{
	vertical-align: top;
	line-height: 1.2em;
}

.colorCodeKey div
{
	display: inline-block;
}

.colorCodeKeyNewPatient
{
	margin-left: 15px;
	vertical-align: top;
	line-height: 1.2em;
}

.colorCodeKeyColour
{
	margin-top: 0.2em;
	width: 10px;
	height: 0.7em;
	border-radius: 0.35em;
	float: left;
}

.colorCodeKeyLabel
{
	margin-left: 0.5em;
	margin-right: 2em;
	padding: 0px;
}

.lblAnswered
{
	color: var(--theme-colour-question-text-answered) !important;
	background: var(--theme-colour-question-answered) !important;
	border: 0px;
}

.lblUnanswered
{
	color: var(--theme-colour-question-text-unanswered) !important;
	background: var(--theme-colour-question-unanswered) !important;
	border: 0px;
}

.lblMandatory
{
	color: var(--theme-colour-question-text-mandatory) !important;
	background: var(--theme-colour-question-mandatory) !important;
	border: 0px;
}

.lblDesirable
{
	color: var(--theme-colour-question-text-desirable) !important;
	background: var(--theme-colour-question-desirable) !important;
	border: 0px;
}

/* End of Colour Coding */

/* End Question Pages */

/* Special Admin - e.g. For Change Password Page */

.styleAdmin
{
	text-align: center;
	padding-left: 1rem;
	padding-right: 1rem;
}

.styleAdmin h2
{
	margin-block-start: 2rem;
	margin-block-end: 1rem;
	background-color: var(--theme-colour-admin-section-title-background);
	color: var(--theme-colour-admin-section-title);
	padding: 2px 10px;
	text-align: left;
}

.PasswordExpires
{
	padding-top: 3rem;
	text-align: center;
}

.PasswordExpires p
{
	font-size: 1.5rem;
}

.PasswordExpires div
{
	margin-bottom: 2rem;
}

.UserAdminChangePass p
{
	padding: 0px;
	margin: 0px;
	line-height: 1.4em;
}

.styleG
{
	margin-left: auto;
	margin-right: auto;
	border-collapse: collapse;
}

.styleG th
{
	text-align: right;
	padding: 0.5em;
}

.styleG td
{
	text-align: left;
	padding: 0.5em;
}

.tableBRB
{
	margin-left: auto;
	margin-right: auto;
	border-collapse: collapse;
	margin-bottom: 2rem;
}

.tableBRB th
{
	text-align: right;
	padding-right: 0.5em;
	border-bottom: 1px solid var(--theme-colour-table-border);
	border-right: 1px solid var(--theme-colour-table-border);
}

.tableBRB td
{
	text-align: left;
	padding-left: 0.5em;
	border-bottom: 1px solid var(--theme-colour-table-border);
}

.styleG td.ChangePasswordButtonCell
{
	text-align: right;
}

/* END Special Admin */

/* Clearable Input Fields */

span.ClearableField
{
	position: relative;
	display: inline-flex;
	align-items: center;
}
span.ClearableField input
{
	padding-right: 18px;
	box-sizing: border-box;
}
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;
}

/* END Clearable Input Fields */

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

img[src*="Date.gif"]:active
{
	content: url(../../../Images/Date-highlight.gif);
	cursor: pointer;
	position:relative;
	top:1px;
	left:1px;
}

p.CannotSendEmailsMessage
{
	text-align: center;
}

.MultiChoiceOptionSectionLabel
{
	display: block;
	margin-left: 5px;
	margin-bottom: 3px;
	font-weight: bold;
	font-size: 1.2em;
}

.QuestionSubSectionHeader td
{
	border: none;
}

.MultipleQuestionsSubSectionHeader th
{
	padding-top: 0.5rem;
	padding-bottom: 0px;
	text-align: center;
	font-size: 1.2em;
}

.ViralMarkerDonors
{
	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
	margin-bottom: 1em;
	border: 1px solid var(--theme-colour-table-border);
	border-collapse: collapse;
}

.ViralMarkerDonors caption
{
	font-weight: bold;
	font-size: 1.2em;
}

.ViralMarkerDonors th
{
	padding-left: 1rem;
	padding-right: 1rem;
}

.ViralMarkerDonors td
{
	border: none;
	text-align: center;
}

.ViralMarkerDonors tbody th,
.ViralMarkerDonors tbody td
{
	border-top: 1px solid var(--theme-colour-table-border);
}

.ViralMarkerDonors input
{
	text-align: right;
}

.DateCellAdjacentTime
{
	width: auto;
	min-width: 250px;
}

.AdjacentTimeQuestionLabelCell
{
	width: 25%;
}

.AdjacentTimeQuestionInputCell
{
	width: 100%;
	min-width: 220px;
}

.WeeksCellAdjacentDays
{
	width: auto;
	min-width: 120px;
}

.WeeksCellAdjacentDays div
{
	display: inline-block;
}

.AdjacentDaysQuestionLabelCell
{
	width: 0px;
	display: none;
}

.AdjacentDaysQuestionInputCell
{
	width: 100%;
	min-width: 120px;
}

.AdjacentDaysQuestionInputCell div
{
	display: inline-block;
}