.invalid_input, input.invalid_input, select.invalid_input, textarea.invalid_input {
	background-color: pink;
}

/* Tables in general */

th {
	text-align: left;
	padding: 0;
	padding-right: 5px;
}

td {
	padding: 0;
	padding-right: 1px;
}

table {
	border-collapse: collapse;
}

/** Top Banner **/
/*** and user area menu ***/

.mainNav ul {
    text-align: left;
}

.userarea_menu{
	margin-top: 20px;	
}

.userarea_menu table {
	margin-top: 10px;	
	max-width: 350px;
	width:100%;
}

.userarea_menu td {
	padding: 0px;
	padding-right: 5px;
}

.userarea_menu p {
	padding-left: 1px;
}


@media screen and (max-width: 479px) {

	.headContent {
		padding-top:0.1em;
	}

	.userarea_menu{
		margin-top: 10px;	
	}
	.userarea_menu table {
		margin-top: 5px;	
	}
	
}

/* Cost calculator */

.cost_calculator{
	font-weight:bold;
	padding-left: 0.5rem;
}


/*** headings - the home page ones are too big ***/

h1 {
	font-size:1.9em;
	font-weight:300;
	line-height:1.2em;
	margin:0.5em 0 0.2em 0;
}
h2 {
	font-size:1.6em;
	font-weight:300;
	line-height:1.1em;
	margin:.5em 0 0 0;
}
h3 {
	font-size:1.4em;
	font-weight:300;
	line-height:1.1em;
	margin:.5em 0 0 0;
}
h4 {
	font-size:1.2em;
	font-weight:300;
	line-height:1.1em;
	margin:.5em 0 0 0;
}

body { 
	font-size:14px;
	line-height:1.2em;
}

@media screen and (max-width: 479px) {
	h1 {
		font-size:1.6em;
		font-weight:200;
	}
	h2 {
		font-size:1.4em;
		font-weight:200;
	}
	h3 {
		font-size:1.2em;
		font-weight:200;
	}
	h4 {
		font-size:1.1em;
		font-weight:200;
		line-height:1.0em;
	}

}

/* section headings in the wizard tables */
.wizard_table th{
	padding-top:3px;
	font-size:1.15em;
}

.wizard_table th.sub_heading{
	font-size:1em;
	font-weight: bold;
}

/* Back/Forward buttons */

.wizard_navigation {
	width:100%;
	padding-bottom:3px;	
	border-bottom: solid lightblue medium;
}

.wizard_navigation td {
	padding-bottom:2px;	
}

.wizard_navigation td:nth-of-type(1), 
.wizard_navigation td:nth-of-type(3) 
{
	width:10px;
}

.wizard_navigation td:nth-of-type(1) {
	text-align:center;
}

.wizard_navigation .wizard_table tbody tr > td:nth-of-type(1) {
	padding-left: 0.125rem;
}
.wizard_navigation .wizard_table tbody tr > td:nth-of-type(3) {
	padding-right: 0.125rem;
}

/* Text Areas - to allow stretch*/
textarea {
	width:100%;
}

/* Single line text fields */
input[type="text"],
input[type="tel"],
input[type="number"],
input[type="email"],
input[type="password"] {
	width:100%;
	max-width: 250px;
	padding:0px;
}

/* Except the chars remaining (text) controls - fixed width */
input[name*="remLen"] {
	width: 30px;
}


/* combo-box widths - also to fit space given them */
.wizard_table select {
	width:100%;
	max-width: 250px;
}

.clinical_text {
	color : green;
}

.warning_text{
	color : red;
}

/* spacing for tables full of text on every line (BookingIntro.php) */
.explanatory_text{
	padding-top: 5px;
	padding-bottom: 5px;
}

/* add some space before buttons */
input[type="submit"] {
	margin-top:5px;
}


/* we want this too
It's needed for the PaymentMethodPage NotesForIDT table
so the text area stretches out. What I don't get is that it does
not seem to be needed for any of the other tables with textarea 
inputs in them. Maybe because of the use of colspan=3 but 
that didn't seem to make any difference in notestoidt
Anyway, it's what we want.
*/
.wizard_table{
	width:100%;	
	max-width: 650px;
}

/******************************************/
/* Data collection tables */

.field_name {
	font-weight:bolder;
}
td.field_name {
	min-width: 50px;
}

/* less space after required asterisks ! */
td.field_required {
	vertical-align: text-top;
	padding-right: 2px;
	padding-top: 5px;
}

 
/******************************************/
/* Address controls */

tr[class*=_display] input[readonly]:not(.invalid_input) {
    background-color: lightgrey;
}

/* tr[class*=_display] input:not(.invalid_input) { */
/* 	background-color: lightgrey; */
/* } */

/*
tr[class*=_entry] select:not(.invalid_input),input:not(.invalid_input) {
	background-color: lightblue;
}
*/

/******************************************/
 
/* Infotip text */
.infotip .infotiptext {
	visibility: hidden;
    /* width: 120px; */
    background-color: lightyellow;
    padding: 5px;
    border-radius: 5px;
	border: 1px solid lightgray;
 
    /* Position the infotip text*/
    position: absolute;
	left: -120px;
	top:-20px;
	width: 100px; 
    z-index: 1;
		
	/* text size */
	font-size:11px;
	font-weight: normal;
	white-space: normal;
}

/* the style of the 'i' */
.infotip_label {
	color: yellow;
    background-color: green;
	font-size: 12pt;
	font-weight: bold;
	font-family: serif;
}


/**********************************************************/
/* Prescriber Registration Form */

table.register_form td{
	padding: 5px;
}

/**********************************************************/
/* Payment Table images */

.payment_table td {
	height: 50px;
	vertical-align: middle;
}
.payment_table form {
	height: 50px;
}

.payment_table form input {
	height: 100%;
 }
.payment_table td input {
	height: 100%;
 }

/**********************************************************/
/* Support for HTML5 features */

html.arrow .not-supported {
	display: none;
}

html.no-arrow .supported {
	display: none;
}

/**********************************************************/
/* Read-only */

.disabled_colours {
	background-color: #eeeeee;
	color: grey;
}

/**********************************************************/
/* Wizard*/
.wizard_content_wrapper{
	padding-inline: 0.25rem;
}

.password-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 250px;
}
.toggle-password {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: #666;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}
.toggle-password:hover {
	color: #333;
}
.toggle-password svg {
	width: 20px;
	height: 20px;
}

.user_profile_table {
	max-width: 512px;
}
.user_profile_table tr .field_name{
	max-width: 100px;
}
.user_profile_table tr .field_input{
	max-width: 180px;
}
.user_profile_table #clear-btn {
	min-width: initial;
}

#page-newuser .wizard_table {
  max-width: 565px;
}

.maincontents {
	padding-inline: 0.125rem;
}
#page-newuser tr td.field_info {
	width: 70px;
}
@media screen and (max-width: 479px) {
	#page-newuser tr td.field_info {
		width: 50px;
	}
}
#page-index .main
/* Masquerading / Impersonation styles */
.impersonation-banner {
	background-color: #fcf8e3;
	color: #8a6d3b;
	border-bottom: 1px solid #faebcc;
	text-align: center;
	padding: 12px 20px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	position: relative;
	z-index: 9999;
}

.impersonation-banner-label {
	font-weight: 600;
}

.impersonation-logout-btn {
	background-color: #d9534f;
	color: white !important;
	padding: 6px 14px;
	text-decoration: none;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	border: 1px solid #d43f3a;
	transition: all 0.2s ease-in-out;
	display: inline-block;
}

.impersonation-logout-btn:hover {
	background-color: #c9302c;
	border-color: #ac2925;
}

/* Impersonate login button in member admin table */
.impersonate-action-btn {
	background-color: #007bff;
	color: white !important;
	padding: 3px 8px;
	text-decoration: none;
	border-radius: 3px;
	font-size: 11px;
	display: inline-block;
	font-weight: normal;
}

.impersonate-action-btn:hover {
	background-color: #0056b3;
}

/* Disabled action button */
.impersonate-action-btn-disabled {
	background-color: #cccccc;
	color: #666666 !important;
	padding: 3px 8px;
	text-decoration: none;
	border-radius: 3px;
	font-size: 11px;
	display: inline-block;
	cursor: not-allowed;
	font-weight: normal;
}

/* Impersonation error banner */
.impersonation-error-banner {
	color: red;
	font-weight: bold;
	margin: 10px 0;
}