.validateErrorMessage, .ajaxErrorMessage {

	display:block; position:absolute; background-color:#600; color:white; padding: 4px; font-size: 11pt; border: 1px solid #933; text-align: left;

}

.validateHasErrors {

	border: 1px solid #933; background-color: #fee;

}

.formDIV { margin-top:5px; margin-bottom:7px;}


.input100w { width: 50%; max-width:100px;}


 	table.cmsFormTable {  border-spacing: 2px; width:100%; margin:0; }

	.cmsFormTable td {     vertical-align: top;  box-sizing: border-box;}




	.cmsFormTable>tr>td:first-of-type,
	.cmsFormTable>tbody>tr>td:first-of-type { min-width: 100px; max-width: 200px; width: 25%; font-size: 80%;  }
	.cmsFormTable>tbody>tr>td:first-of-type sup { font-size: 100%;}

	.cmsFormTable tr>td input:not([type]),
	.cmsFormTable tr>td input[type="text"],
	.cmsFormTable tr>td input[type="file"],
	.cmsFormTable tr>td input[type="email"],
	.cmsFormTable tr>td input[type="password"],
	.cmsFormTable tr>td textarea ,
	.cmsFormTable tr>td select,
	.cmsFormTable tr>td .dynaCombo
	{

		width: 100%;
		min-width: 80px;
		box-sizing: border-box;
		padding: 4px;
	}



	.cmsFormTable tr>td input[type="number"],
	.cmsFormTable tr>td input[type="decimal"],
	.cmsFormTable tr>td input.validateNumber,
	.cmsFormTable tr>td input.validateColour,
	.cmsFormTable tr>td input.validateTime,
	.cmsFormTable tr>td input.validateDateTime,
	.cmsFormTable tr>td input.validateDate
	{width: 60%; min-width: 40px; }


	.cmsFormTable tr>td .dynaCombo input[type="text"] { width: 83%;}
	.cmsFormTable tr>td .dynaCombo input[type="button"] { width: 15%;}

	.cmsFormTable tr>td input.widthauto,
	.cmsFormTable tr>td select.widthauto { width: auto; min-width: 10px;}



@media only screen and (min-width: 1200px) {

	table.cmsFormTable { width:100%; border-spacing: 8px; }

}

.cmsFormTable tr>td .dynaCombo { padding: 0px;	}

.dynaCombo { display: inline-flex; }




/* 03/26 Form Elements Converted to Flex from Float*/

.cmsFormElements {
	max-width: 960px;
	overflow: auto;
	box-sizing: border-box;
}

.cmsFormElements {
	box-sizing: border-box;
	padding: 0;
	margin: 1% auto;
}

.cmsFormElement {
	box-sizing: border-box;
	overflow: hidden;
	/*margin: 1%;*/
	margin-bottom:1%;
	display:flex;
	gap:1%;
}
		.cmsFormElements .row,
		.row.cmsFormElement{margin-inline:auto;}
		.column.cmsFormPrompt,.column.cmsFormData{padding-inline:0;}
		/*With form flex - disable clearfix used when adding custom snippetblock fields to form pages*/
		.row.cmsFormElement.clearfix:after,
		.row.cmsFormElement.clearfix:before {
		    content: "";
		    display:none;
		}

.cmsFormPrompt {
	font-size: 80%;
	/*display: inline-block;
	float: left;
	width:25%;*/
	margin: 0;
	box-sizing: border-box;
	flex:1;
}

.cmsFormData {
	/*display: inline-block;
	float: left;
	width:75%;*/
	flex:3;
	margin: 0;
	box-sizing: border-box;
}

.cmsFormDataNoPrompt {
	clear: both;
	display:block;
	flex: 1;
}

.cmsFormData input,
.cmsFormData textarea,
.cmsFormDataNoPrompt textarea,
.cmsFormData select
{
	vertical-align: middle;
	width: 100%;
	box-sizing: border-box;
	padding: 4px;
}

.cmsFormData button
{
	vertical-align: middle;
	box-sizing: border-box;
	padding: 4px;
}

.cmsFormData input[type="image"],
.cmsFormData input[type="reset"],
.cmsFormData input[type="submit"],
.cmsFormData input[type="button"] ,
.cmsFormData input[type="radio"],
.cmsFormData input[type="checkbox"],
.cmsFormData input.widthauto, input.widthauto,
.cmsFormData select.widthauto, select.widthauto,
select.qtyTextField,
input.qtyTextField,
.autowidth input,
.autowidth select
{
	box-sizing: border-box;
	width: auto;
	max-width: 100%;
}

.cmsFormElement .cmsFormDataWithLookup input
{
	/*width: 75%;*/
	width:100%;
}

.cmsFormElement.paymentOption{ flex-direction: row; }

/* then fix these back to standard width*/
.cmsFormElement input.input100w, .cmsFormElement select.input100w  { width: 80%; min-width:100px; max-width: 200px; }

.cmsFormElement input[type="button"] ,
.cmsFormElement input[type="image"] ,
.cmsFormElement input[type="submit"] ,
.cmsFormElement input[type="file"] ,
.cmsFormElement input[type="reset"] ,
.cmsFormElement input[type="checkbox"] ,
.cmsFormElement input[type="radio"],
.cmsFormData input.widthauto,
.cmsFormData select.widthauto
 {
 	width: auto;
 	height: auto;
	/*max-width: 98%;*/
 }

.cmsFormOptions { /*width: 68%; float: left;*/ flex:3; }
.cmsFormActions { /*float: right; text-align: right;*/ flex:1;  }
.cmsFormActions input[type="submit"] { font-size: 130%;}

.cmsCheckBox { text-align: center; }

body .cmsFormElementsStacked .cmsFormElement,
body .cmsFormElementsStacked .cmsFormPrompt,
body .cmsFormElementsStacked .cmsFormData
{
	display: block; width: 100%; float: none; margin: 0;
}

body .cmsFormElementsCompressed .cmsFormElement,
body .cmsFormElementsCompressed .cmsFormPrompt,
body .cmsFormElementsCompressed .cmsFormData,
body .cmsFormElementsCompressed .cmsFormElement div {
	display: inline-block; width: auto; float: none;
}

body .cmsFormElementsCompressed .cmsFormData input {
	max-width: 150px;
}

body .cmsFormElementsCompressed .cmsFormActions {
	display: inline-block; width: auto; float: none;
}

body .cmsFormElementsCompressed .cmsFormElements {
	max-width: 100%;
}



.cmsFormData .GSTwording { margin-left: 6px; }






/*******
WWL CMS checkbox buttons, can work with radios also
********/
.checkboxButton input {
	border: 0;
	background:inherit;
	/*appearance: none;*/
}
.checkboxButton {
	display: inline-flex; /* Treat label like a block element */
	padding: 5px 10px;
	background-color: #eee;
	border: 1px solid #ccc;
	cursor: pointer;
	border-radius: 5px;
	transition: all 0.2s ease-in-out; /* For smooth transitions on hover/focus */
	gap: 5px;
}

/* Style when checked */
.checkboxButton:has(input:checked) {
	background-color: #ddd;
	color: black;
	border-color: black;
}

/* Style on hover */
.checkboxButton:hover {
	background-color: #d8d8d8;
	color: black;
}


/* mytable tweaks for inputs */


.mytable .tr>.td>input:not([type]),
.mytable .tr>.td>input[type="text"],
.mytable .tr>.td>input[type="number"],
.mytable .tr>.td>input[type="decimal"],
.mytable .tr>.td>select ,
.mytable .tr>.td>textarea ,
.mytable tr>td>input:not([type]),
.mytable tr>td>form>input:not([type]),
.mytable tr>td>form>input[type="text"],
.mytable tr>td>input[type="text"],
.mytable tr>td>input[type="number"],
.mytable tr>td>input[type="decimal"],
.mytable tr>td>textarea,
.mytable tr>td>select
{ box-sizing: border-box; width: 100%; min-width: 60px; }


.mytable tr>td>form { width: 100%;  }


.mytable input[type="checkbox"] { width:20px; height: 20px;  }
.toprightcheckbox input[type="checkbox"] { width:20px; height: 20px; margin:0; }


/* user on advanced shop search form only
consider changing to flex?
 */

.cmsListOfLinks a {
	display:block;
	text-decoration: none;
	cursor: pointer;
}