/* This should become the one-and-only form style */




/* General styling */

.formPanel {
	margin: 0 auto;

	display: flex;
	flex-direction: column;

	max-width: 400px;

/*	border: 1px solid red;  */

}



/* Use of fieldset to group some fields is optional */

.formPanel fieldset {
	box-sizing: border-box;
	max-width: 400px;

	border: 2px solid black;
	border-radius: 8px;
	padding: 20px 15px 5px 15px;
	margin-bottom: 25px;
}

.formPanel fieldset legend {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: black;
	border: 2px solid black;
	border-radius: 4px;
	background-color: wheat;
	padding: 4px 10px 4px 10px;
}


/******************************************************************************************
 * INPUT PANEL WITH ICON, FIELD AND REQUIREMENTS (OPTIONAL LABEL)
 ******************************************************************************************

Description: It uses flex row with wrapping to allow a requirements section below the field
that can be hidden or display depending on the status of the field.
It is possible to add a label on the row above the field.
This panel plays tricks with "width" to ensure a wrap after the label and
after the icon and field(s) combination.

HTML Usage:

<div class="inputPanelIconField">
	<label for="avaccount">Account Name</label>
	<span class="fas fa-id-card-alt fa-fw inputIcon"></span>
	<input type="email" class="inputField" style="width: 80%;" id="avaccount" name="account" placeholder="Account Name" required>
	<div class="inputIconFieldRequirements">Account name may not contain spaces!</div>
</div>

<div class="inputPanelIconField">
	<label for="avfirstname"><span class="fas fa-address-card fa-fw"></span> First Name and Name</label>
	<span class="fas fa-address-card fa-fw inputIcon"></span>
	<input type="text" class="inputField" style="width: 15%;" id="avfirstname" name="firstname" placeholder="First Name" required>
	<input type="text" class="inputField" style="width: 65%; border-left: 0px;" id="avname" name="name" placeholder="Name" required>
	<div class="inputIconFieldRequirements">Name may not contain numbers!</div>
</div>

*/

.inputPanelIconField {
	display: flex;
	width: 100%;
	margin-bottom: 20px;
	flex-wrap: wrap;


/* Not possible because of flex - row - wrap layout (and optional requirements line) */
/* 	height: 36px;  */
}

.inputPanelIconField label {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 16px;
	margin: 5px 0px 6px 0px;
}


.inputPanelIconField label:first-child {
	color: black;
	width: 100%;
}

.inputRequirements, .inputIconFieldRequirements {
	display: none;
}

input:invalid:not(:placeholder-shown):not(:focus) ~ .inputRequirements {
	display: block;
	color: red;
	margin-top: 5px;
}

input:invalid:not(:placeholder-shown):not(:focus) ~ .inputIconFieldRequirements {
	display: block;
	color: red;
	margin-top: 5px;
	margin-left: 50px;
}

/*****************************************************************************************/

/* Shortcut if Icon-Field is not needed */

.inputPanelLabelField {
	display: flex;
	flex-direction: column;
	margin-bottom: 10px;
}


.inputPanelRow {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;

/* 	width: 100%; */

}

.inputPanelRowPair {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}


.inputPanelRow .inputPanelRowPair:not(:first-child) {
/* hack to ensure that iOs show no empty line between two inputPanelRowPair elements */
	margin-left: -6px;
}

.inputPanelRow > .inputField:not(:first-child) {
/* hack to ensure that iOs show no empty line between two inputPanelRowPair elements */
	margin-left: -4px;
}


.inputPanelLabelField label,
.inputPanelRowPair label {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 16px;
	color: black;

	margin: 5px 0px 6px 0px;

}

.inputIcon {
	padding: 5px 10px;
	background: moccasin;
	color: black;
	border: 2px solid black;
	border-right: 0px;
	border-radius: 4px 0 0 4px;
	width: 50px;
	height: 22px;
	flex: 0 0 auto;
	cursor: default;
}

.inputField {

	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 16px;

	box-sizing: border-box;

	font-size: 16px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 0px;
	padding-bottom: 0px;
	flex: 4 4 auto;
	outline: none;

	-moz-appearance: none;/* older firefox */
	-webkit-appearance: none; /* safari, chrome, edge and ie mobile */
	appearance: none; /* rest */

	-webkit-border-radius: 0;
	border-radius: 0;
	border: 2px solid black;
	height: 36px;

/* 	width: 80%;  */

}


.inputPanelIconField .inputField {
/* 	width: 80%;  */
	margin-left: -1px;
}


/******************************************************************************************
 * STYLES TO ENCODE REQUIRED, EMPTY, INVALID, VALID AND FOCUSSED FIELDS
 ******************************************************************************************

/*
	Encoder site: https://meyerweb.com/eric/tools/dencoder/
*/

/*

To differentiate between empty, not empty and invalid, and valid
----------------------------------------------------------------
Add classes: textEmptyX, textNotEmptyInvalidX, textValidY
	where X: Color, Asterisk, ColorAsterisk, Times, ColorTimes, ExclamationTriangle, ColorExclamationTriangle, ExclamationCircle, ColorExclamationCircle, MinusCircle, ColorMinusCircle, ThumbsDown, ColorThumbsDown
	where Y: Color, Check, ColorCheck, CheckCircle, ColorCheckCircle, ThumbsUp, ColorThumbsUp
Optional: add textFocusColor to override background color changes
Note: This system uses placeholder-shown selector

To differentiate between invalid (or empty) and valid
-----------------------------------------------------
Add classes: textInvalidX, textValidY
	where X: see above
	where Y: see above
Optional: add textFocusColor to override background color changes
Note: This system does not use placeholder-shown selector


textNotEmptyValidY can be used for non-required fields that should be validated if they are not empty

*/


/* Make field red */

.textInvalidColor:invalid,
.textEmptyColor:invalid:placeholder-shown,
.textNotEmptyInvalidColor:invalid:not(:placeholder-shown) {

    background-color: pink;
}



/* Show asterisk but no color */

.textInvalidAsterisk:invalid,
.textEmptyAsterisk:invalid:placeholder-shown,
.textNotEmptyInvalidAsterisk:invalid:not(:placeholder-shown) {

    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M478.21%20334.093L336%20256l142.21-78.093c11.795-6.477%2015.961-21.384%209.232-33.037l-19.48-33.741c-6.728-11.653-21.72-15.499-33.227-8.523L296%20186.718l3.475-162.204C299.763%2011.061%20288.937%200%20275.48%200h-38.96c-13.456%200-24.283%2011.061-23.994%2024.514L216%20186.718%2077.265%20102.607c-11.506-6.976-26.499-3.13-33.227%208.523l-19.48%2033.741c-6.728%2011.653-2.562%2026.56%209.233%2033.037L176%20256%2033.79%20334.093c-11.795%206.477-15.961%2021.384-9.232%2033.037l19.48%2033.741c6.728%2011.653%2021.721%2015.499%2033.227%208.523L216%20325.282l-3.475%20162.204C212.237%20500.939%20223.064%20512%20236.52%20512h38.961c13.456%200%2024.283-11.061%2023.995-24.514L296%20325.282l138.735%2084.111c11.506%206.976%2026.499%203.13%2033.227-8.523l19.48-33.741c6.728-11.653%202.563-26.559-9.232-33.036z%22%20fill%3D%22red%22%2F%3E%3C%2Fsvg%3E');

    background-size: 14px 14px;
    background-position: 98% 50%;
    background-repeat: no-repeat;
    padding-right: 28px;
}


/* Show asterisk but no color */

.textEmptyAsteriskCombi:invalid:placeholder-shown {

    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M478.21%20334.093L336%20256l142.21-78.093c11.795-6.477%2015.961-21.384%209.232-33.037l-19.48-33.741c-6.728-11.653-21.72-15.499-33.227-8.523L296%20186.718l3.475-162.204C299.763%2011.061%20288.937%200%20275.48%200h-38.96c-13.456%200-24.283%2011.061-23.994%2024.514L216%20186.718%2077.265%20102.607c-11.506-6.976-26.499-3.13-33.227%208.523l-19.48%2033.741c-6.728%2011.653-2.562%2026.56%209.233%2033.037L176%20256%2033.79%20334.093c-11.795%206.477-15.961%2021.384-9.232%2033.037l19.48%2033.741c6.728%2011.653%2021.721%2015.499%2033.227%208.523L216%20325.282l-3.475%20162.204C212.237%20500.939%20223.064%20512%20236.52%20512h38.961c13.456%200%2024.283-11.061%2023.995-24.514L296%20325.282l138.735%2084.111c11.506%206.976%2026.499%203.13%2033.227-8.523l19.48-33.741c6.728-11.653%202.563-26.559-9.232-33.036z%22%20fill%3D%22red%22%2F%3E%3C%2Fsvg%3E');

    background-size: 14px 14px;
    background-position: 93% 50%;
    background-repeat: no-repeat;
    padding-right: 28px;
}








/* Show asterisk and make field red */

.textInvalidColorAsterisk:invalid,
.textEmptyColorAsterisk:invalid:placeholder-shown,
.textNotEmptyInvalidColorAsterisk:invalid:not(:placeholder-shown) {

    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M478.21%20334.093L336%20256l142.21-78.093c11.795-6.477%2015.961-21.384%209.232-33.037l-19.48-33.741c-6.728-11.653-21.72-15.499-33.227-8.523L296%20186.718l3.475-162.204C299.763%2011.061%20288.937%200%20275.48%200h-38.96c-13.456%200-24.283%2011.061-23.994%2024.514L216%20186.718%2077.265%20102.607c-11.506-6.976-26.499-3.13-33.227%208.523l-19.48%2033.741c-6.728%2011.653-2.562%2026.56%209.233%2033.037L176%20256%2033.79%20334.093c-11.795%206.477-15.961%2021.384-9.232%2033.037l19.48%2033.741c6.728%2011.653%2021.721%2015.499%2033.227%208.523L216%20325.282l-3.475%20162.204C212.237%20500.939%20223.064%20512%20236.52%20512h38.961c13.456%200%2024.283-11.061%2023.995-24.514L296%20325.282l138.735%2084.111c11.506%206.976%2026.499%203.13%2033.227-8.523l19.48-33.741c6.728-11.653%202.563-26.559-9.232-33.036z%22%20fill%3D%22red%22%2F%3E%3C%2Fsvg%3E');

    background-size: 14px 14px;
    background-position: 98% 50%;
    background-repeat: no-repeat;
    padding-right: 28px;

    background-color: pink;
}


/* Show times but no color */

.textInvalidTimes:invalid,
.textEmptyTimes:invalid:placeholder-shown,
.textNotEmptyInvalidTimes:invalid:not(:placeholder-shown) {

    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20352%20512%22%3E%3Cpath%20d%3D%22M242.72%20256l100.07-100.07c12.28-12.28%2012.28-32.19%200-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48%200L176%20189.28%2075.93%2089.21c-12.28-12.28-32.19-12.28-44.48%200L9.21%20111.45c-12.28%2012.28-12.28%2032.19%200%2044.48L109.28%20256%209.21%20356.07c-12.28%2012.28-12.28%2032.19%200%2044.48l22.24%2022.24c12.28%2012.28%2032.2%2012.28%2044.48%200L176%20322.72l100.07%20100.07c12.28%2012.28%2032.2%2012.28%2044.48%200l22.24-22.24c12.28-12.28%2012.28-32.19%200-44.48L242.72%20256z%22%20fill%3D%22red%22%2F%3E%3C%2Fsvg%3E');

    background-size: 14px 14px;
    background-position: 98% 50%;
    background-repeat: no-repeat;
    padding-right: 28px;
}

/* Show times and make field red */

.textInvalidColorTimes:invalid,
.textEmptyColorTimes:invalid:placeholder-shown,
.textNotEmptyInvalidColorTimes:invalid:not(:placeholder-shown) {

    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20352%20512%22%3E%3Cpath%20d%3D%22M242.72%20256l100.07-100.07c12.28-12.28%2012.28-32.19%200-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48%200L176%20189.28%2075.93%2089.21c-12.28-12.28-32.19-12.28-44.48%200L9.21%20111.45c-12.28%2012.28-12.28%2032.19%200%2044.48L109.28%20256%209.21%20356.07c-12.28%2012.28-12.28%2032.19%200%2044.48l22.24%2022.24c12.28%2012.28%2032.2%2012.28%2044.48%200L176%20322.72l100.07%20100.07c12.28%2012.28%2032.2%2012.28%2044.48%200l22.24-22.24c12.28-12.28%2012.28-32.19%200-44.48L242.72%20256z%22%20fill%3D%22red%22%2F%3E%3C%2Fsvg%3E');

    background-size: 14px 14px;
    background-position: 98% 50%;
    background-repeat: no-repeat;
    padding-right: 28px;

    background-color: pink;
}


/* Show exclamation triangle but no color */

.textInvalidExclamationTriangle:invalid,
.textEmptyExclamationTriangle:invalid:placeholder-shown,
.textNotEmptyInvalidExclamationTriangle:invalid:not(:placeholder-shown) {

    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M569.517%20440.013C587.975%20472.007%20564.806%20512%20527.94%20512H48.054c-36.937%200-59.999-40.055-41.577-71.987L246.423%2023.985c18.467-32.009%2064.72-31.951%2083.154%200l239.94%20416.028zM288%20354c-25.405%200-46%2020.595-46%2046s20.595%2046%2046%2046%2046-20.595%2046-46-20.595-46-46-46zm-43.673-165.346l7.418%20136c.347%206.364%205.609%2011.346%2011.982%2011.346h48.546c6.373%200%2011.635-4.982%2011.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884%200-12.356%205.78-11.981%2012.654z%22%20fill%3D%22red%22%2F%3E%3C%2Fsvg%3E');

    background-size: 14px 14px;
    background-position: 98% 50%;
    background-repeat: no-repeat;
    padding-right: 28px;
}



/* Show exclamation triangle and make field red */

.textInvalidColorExclamationTriangle:invalid,
.textEmptyColorExclamationTriangle:invalid:placeholder-shown,
.textNotEmptyInvalidColorExclamationTriangle:invalid:not(:placeholder-shown) {

    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M569.517%20440.013C587.975%20472.007%20564.806%20512%20527.94%20512H48.054c-36.937%200-59.999-40.055-41.577-71.987L246.423%2023.985c18.467-32.009%2064.72-31.951%2083.154%200l239.94%20416.028zM288%20354c-25.405%200-46%2020.595-46%2046s20.595%2046%2046%2046%2046-20.595%2046-46-20.595-46-46-46zm-43.673-165.346l7.418%20136c.347%206.364%205.609%2011.346%2011.982%2011.346h48.546c6.373%200%2011.635-4.982%2011.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884%200-12.356%205.78-11.981%2012.654z%22%20fill%3D%22red%22%2F%3E%3C%2Fsvg%3E');

    background-size: 14px 14px;
    background-position: 98% 50%;
    background-repeat: no-repeat;
    padding-right: 28px;

    background-color: pink;
}


/* Show exclamation circle but no color */

.textInvalidExclamationCircle:invalid,
.textEmptyExclamationCircle:invalid:placeholder-shown,
.textNotEmptyInvalidExclamationCircle:invalid:not(:placeholder-shown) {

    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M504%20256c0%20136.997-111.043%20248-248%20248S8%20392.997%208%20256C8%20119.083%20119.043%208%20256%208s248%20111.083%20248%20248zm-248%2050c-25.405%200-46%2020.595-46%2046s20.595%2046%2046%2046%2046-20.595%2046-46-20.595-46-46-46zm-43.673-165.346l7.418%20136c.347%206.364%205.609%2011.346%2011.982%2011.346h48.546c6.373%200%2011.635-4.982%2011.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884%200-12.356%205.78-11.981%2012.654z%22%20fill%3D%22red%22%2F%3E%3C%2Fsvg%3E');

    background-size: 14px 14px;
    background-position: 98% 50%;
    background-repeat: no-repeat;
    padding-right: 28px;
}


/* Show exclamation circle and make field red */

.textInvalidColorExclamationCircle:invalid,
.textEmptyColorExclamationCircle:invalid:placeholder-shown,
.textNotEmptyInvalidColorExclamationCircle:invalid:not(:placeholder-shown) {

    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M504%20256c0%20136.997-111.043%20248-248%20248S8%20392.997%208%20256C8%20119.083%20119.043%208%20256%208s248%20111.083%20248%20248zm-248%2050c-25.405%200-46%2020.595-46%2046s20.595%2046%2046%2046%2046-20.595%2046-46-20.595-46-46-46zm-43.673-165.346l7.418%20136c.347%206.364%205.609%2011.346%2011.982%2011.346h48.546c6.373%200%2011.635-4.982%2011.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884%200-12.356%205.78-11.981%2012.654z%22%20fill%3D%22red%22%2F%3E%3C%2Fsvg%3E');

    background-size: 14px 14px;
    background-position: 98% 50%;
    background-repeat: no-repeat;
    padding-right: 28px;

    background-color: pink;
}


/* Show minus circle but no color */

.textInvalidMinusCircle:invalid,
.textEmptyMinusCircle:invalid:placeholder-shown,
.textNotEmptyInvalidMinusCircle:invalid:not(:placeholder-shown) {

    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M256%208C119%208%208%20119%208%20256s111%20248%20248%20248%20248-111%20248-248S393%208%20256%208zM124%20296c-6.6%200-12-5.4-12-12v-56c0-6.6%205.4-12%2012-12h264c6.6%200%2012%205.4%2012%2012v56c0%206.6-5.4%2012-12%2012H124z%22%20fill%3D%22red%22%2F%3E%3C%2Fsvg%3E');

    background-size: 14px 14px;
    background-position: 98% 50%;
    background-repeat: no-repeat;
    padding-right: 28px;
}


/* Show minus circle and make field red */

.textInvalidColorMinusCircle:invalid,
.textEmptyColorMinusCircle:invalid:placeholder-shown,
.textNotEmptyInvalidColorMinusCircle:invalid:not(:placeholder-shown) {

    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M256%208C119%208%208%20119%208%20256s111%20248%20248%20248%20248-111%20248-248S393%208%20256%208zM124%20296c-6.6%200-12-5.4-12-12v-56c0-6.6%205.4-12%2012-12h264c6.6%200%2012%205.4%2012%2012v56c0%206.6-5.4%2012-12%2012H124z%22%20fill%3D%22red%22%2F%3E%3C%2Fsvg%3E');

    background-size: 14px 14px;
    background-position: 98% 50%;
    background-repeat: no-repeat;
    padding-right: 28px;

    background-color: pink;
}



/* Show thumbs down but no color */

.textInvalidThumbsDown:invalid,
.textEmptyThumbsDown:invalid:placeholder-shown,
.textNotEmptyInvalidThumbsDown:invalid:not(:placeholder-shown) {

    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M0%2056v240c0%2013.255%2010.745%2024%2024%2024h80c13.255%200%2024-10.745%2024-24V56c0-13.255-10.745-24-24-24H24C10.745%2032%200%2042.745%200%2056zm40%20200c0-13.255%2010.745-24%2024-24s24%2010.745%2024%2024-10.745%2024-24%2024-24-10.745-24-24zm272%20256c-20.183%200-29.485-39.293-33.931-57.795-5.206-21.666-10.589-44.07-25.393-58.902-32.469-32.524-49.503-73.967-89.117-113.111a11.98%2011.98%200%200%201-3.558-8.521V59.901c0-6.541%205.243-11.878%2011.783-11.998%2015.831-.29%2036.694-9.079%2052.651-16.178C256.189%2017.598%20295.709.017%20343.995%200h2.844c42.777%200%2093.363.413%20113.774%2029.737%208.392%2012.057%2010.446%2027.034%206.148%2044.632%2016.312%2017.053%2025.063%2048.863%2016.382%2074.757%2017.544%2023.432%2019.143%2056.132%209.308%2079.469l.11.11c11.893%2011.949%2019.523%2031.259%2019.439%2049.197-.156%2030.352-26.157%2058.098-59.553%2058.098H350.723C358.03%20364.34%20384%20388.132%20384%20430.548%20384%20504%20336%20512%20312%20512z%22%20fill%3D%22red%22%2F%3E%3C%2Fsvg%3E');

    background-size: 14px 14px;
    background-position: 98% 50%;
    background-repeat: no-repeat;
    padding-right: 28px;
}


/* Show thumbs down and make field red */

.textInvalidColorThumbsDown:invalid,
.textEmptyColorThumbsDown:invalid:placeholder-shown,
.textNotEmptyInvalidColorThumbsDown:invalid:not(:placeholder-shown) {

    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M0%2056v240c0%2013.255%2010.745%2024%2024%2024h80c13.255%200%2024-10.745%2024-24V56c0-13.255-10.745-24-24-24H24C10.745%2032%200%2042.745%200%2056zm40%20200c0-13.255%2010.745-24%2024-24s24%2010.745%2024%2024-10.745%2024-24%2024-24-10.745-24-24zm272%20256c-20.183%200-29.485-39.293-33.931-57.795-5.206-21.666-10.589-44.07-25.393-58.902-32.469-32.524-49.503-73.967-89.117-113.111a11.98%2011.98%200%200%201-3.558-8.521V59.901c0-6.541%205.243-11.878%2011.783-11.998%2015.831-.29%2036.694-9.079%2052.651-16.178C256.189%2017.598%20295.709.017%20343.995%200h2.844c42.777%200%2093.363.413%20113.774%2029.737%208.392%2012.057%2010.446%2027.034%206.148%2044.632%2016.312%2017.053%2025.063%2048.863%2016.382%2074.757%2017.544%2023.432%2019.143%2056.132%209.308%2079.469l.11.11c11.893%2011.949%2019.523%2031.259%2019.439%2049.197-.156%2030.352-26.157%2058.098-59.553%2058.098H350.723C358.03%20364.34%20384%20388.132%20384%20430.548%20384%20504%20336%20512%20312%20512z%22%20fill%3D%22red%22%2F%3E%3C%2Fsvg%3E');

    background-size: 14px 14px;
    background-position: 98% 50%;
    background-repeat: no-repeat;
    padding-right: 28px;

    background-color: pink;
}


/* Valid: make field green */

.textNotEmptyValidColor:valid:not(:placeholder-shown),
.textValidColor:valid {
    background-color: palegreen;
}

/* Valid: show check but no color */

.textNotEmptyValidCheck:valid:not(:placeholder-shown),
.textValidCheck:valid {

    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M173.898%20439.404l-166.4-166.4c-9.997-9.997-9.997-26.206%200-36.204l36.203-36.204c9.997-9.998%2026.207-9.998%2036.204%200L192%20312.69%20432.095%2072.596c9.997-9.997%2026.207-9.997%2036.204%200l36.203%2036.204c9.997%209.997%209.997%2026.206%200%2036.204l-294.4%20294.401c-9.998%209.997-26.207%209.997-36.204-.001z%22%20fill%3D%22green%22%2F%3E%3C%2Fsvg%3E');

    background-size: 14px 14px;
    background-position: 98% 50%;
    background-repeat: no-repeat;
    padding-right: 28px;
}


/* Valid: show check and make field green */

.textNotEmptyValidColorCheck:valid:not(:placeholder-shown),
.textValidColorCheck:valid {

    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M173.898%20439.404l-166.4-166.4c-9.997-9.997-9.997-26.206%200-36.204l36.203-36.204c9.997-9.998%2026.207-9.998%2036.204%200L192%20312.69%20432.095%2072.596c9.997-9.997%2026.207-9.997%2036.204%200l36.203%2036.204c9.997%209.997%209.997%2026.206%200%2036.204l-294.4%20294.401c-9.998%209.997-26.207%209.997-36.204-.001z%22%20fill%3D%22green%22%2F%3E%3C%2Fsvg%3E');

    background-size: 14px 14px;
    background-position: 98% 50%;
    background-repeat: no-repeat;
    padding-right: 28px;

    background-color: palegreen;
}


/* Valid: show check circle */

.textNotEmptyValidCheckCircle:valid:not(:placeholder-shown),
.textValidCheckCircle:valid {
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M504%20256c0%20136.967-111.033%20248-248%20248S8%20392.967%208%20256%20119.033%208%20256%208s248%20111.033%20248%20248zM227.314%20387.314l184-184c6.248-6.248%206.248-16.379%200-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628%200L216%20308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628%200l-22.627%2022.627c-6.248%206.248-6.248%2016.379%200%2022.627l104%20104c6.249%206.249%2016.379%206.249%2022.628.001z%22%20fill%3D%22green%22%2F%3E%3C%2Fsvg%3E');

    background-size: 14px 14px;
    background-position: 98% 50%;
    background-repeat: no-repeat;
    padding-right: 28px;
}


/* Valid: show check circle and make field green */

.textNotEmptyValidColorCheckCircle:valid:not(:placeholder-shown),
.textValidColorCheckCircle:valid {
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M504%20256c0%20136.967-111.033%20248-248%20248S8%20392.967%208%20256%20119.033%208%20256%208s248%20111.033%20248%20248zM227.314%20387.314l184-184c6.248-6.248%206.248-16.379%200-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628%200L216%20308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628%200l-22.627%2022.627c-6.248%206.248-6.248%2016.379%200%2022.627l104%20104c6.249%206.249%2016.379%206.249%2022.628.001z%22%20fill%3D%22green%22%2F%3E%3C%2Fsvg%3E');

    background-size: 14px 14px;
    background-position: 98% 50%;
    background-repeat: no-repeat;
    padding-right: 28px;

    background-color: palegreen;
}


.textValidColorCheckCircleCombi:valid {
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M504%20256c0%20136.967-111.033%20248-248%20248S8%20392.967%208%20256%20119.033%208%20256%208s248%20111.033%20248%20248zM227.314%20387.314l184-184c6.248-6.248%206.248-16.379%200-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628%200L216%20308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628%200l-22.627%2022.627c-6.248%206.248-6.248%2016.379%200%2022.627l104%20104c6.249%206.249%2016.379%206.249%2022.628.001z%22%20fill%3D%22green%22%2F%3E%3C%2Fsvg%3E');

    background-size: 14px 14px;
    background-position: 93% 50%;
    background-repeat: no-repeat;
    padding-right: 28px;

    background-color: palegreen;
}




/* Valid: show thumbs up but no color */

.textNotEmptyValidThumbsUp:valid:not(:placeholder-shown),
.textValidThumbsUp:valid {

    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M104%20224H24c-13.255%200-24%2010.745-24%2024v240c0%2013.255%2010.745%2024%2024%2024h80c13.255%200%2024-10.745%2024-24V248c0-13.255-10.745-24-24-24zM64%20472c-13.255%200-24-10.745-24-24s10.745-24%2024-24%2024%2010.745%2024%2024-10.745%2024-24%2024zM384%2081.452c0%2042.416-25.97%2066.208-33.277%2094.548h101.723c33.397%200%2059.397%2027.746%2059.553%2058.098.084%2017.938-7.546%2037.249-19.439%2049.197l-.11.11c9.836%2023.337%208.237%2056.037-9.308%2079.469%208.681%2025.895-.069%2057.704-16.382%2074.757%204.298%2017.598%202.244%2032.575-6.148%2044.632C440.202%20511.587%20389.616%20512%20346.839%20512l-2.845-.001c-48.287-.017-87.806-17.598-119.56-31.725-15.957-7.099-36.821-15.887-52.651-16.178-6.54-.12-11.783-5.457-11.783-11.998v-213.77c0-3.2%201.282-6.271%203.558-8.521%2039.614-39.144%2056.648-80.587%2089.117-113.111%2014.804-14.832%2020.188-37.236%2025.393-58.902C282.515%2039.293%20291.817%200%20312%200c24%200%2072%208%2072%2081.452z%22%20fill%3D%22green%22%2F%3E%3C%2Fsvg%3E');

    background-size: 14px 14px;
    background-position: 98% 50%;
    background-repeat: no-repeat;
    padding-right: 28px;
}

/* Valid: show thumbs up and make field green */

.textNotEmptyValidColorThumbsUp:valid:not(:placeholder-shown),
.textValidColorThumbsUp:valid {

    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M104%20224H24c-13.255%200-24%2010.745-24%2024v240c0%2013.255%2010.745%2024%2024%2024h80c13.255%200%2024-10.745%2024-24V248c0-13.255-10.745-24-24-24zM64%20472c-13.255%200-24-10.745-24-24s10.745-24%2024-24%2024%2010.745%2024%2024-10.745%2024-24%2024zM384%2081.452c0%2042.416-25.97%2066.208-33.277%2094.548h101.723c33.397%200%2059.397%2027.746%2059.553%2058.098.084%2017.938-7.546%2037.249-19.439%2049.197l-.11.11c9.836%2023.337%208.237%2056.037-9.308%2079.469%208.681%2025.895-.069%2057.704-16.382%2074.757%204.298%2017.598%202.244%2032.575-6.148%2044.632C440.202%20511.587%20389.616%20512%20346.839%20512l-2.845-.001c-48.287-.017-87.806-17.598-119.56-31.725-15.957-7.099-36.821-15.887-52.651-16.178-6.54-.12-11.783-5.457-11.783-11.998v-213.77c0-3.2%201.282-6.271%203.558-8.521%2039.614-39.144%2056.648-80.587%2089.117-113.111%2014.804-14.832%2020.188-37.236%2025.393-58.902C282.515%2039.293%20291.817%200%20312%200c24%200%2072%208%2072%2081.452z%22%20fill%3D%22green%22%2F%3E%3C%2Fsvg%3E');

    background-size: 14px 14px;
    background-position: 98% 50%;
    background-repeat: no-repeat;
    padding-right: 28px;

    background-color: palegreen;
}


.textFocusColor:invalid:focus,
.textFocusColor:valid:focus {
    background-color: lightyellow;
}


/******************************************************************************************
 * SUPPORT FOR CHECKBOXES
 ******************************************************************************************/

.inputPanelIconCheckBox {
	align-self: flex-start;
	display: flex;
	width: 100%;

	justify-content: center;
	height: 36px;

	margin-bottom: 20px;
}

.inputCheckBoxField {
	display: flex;
	align-items: center;

	font-family: Tahoma, Arial, Helvetica, sans-serif;
	background: white;
	color: black;
	font-size: 16px;
	padding-left: 10px;
	flex: 1 auto;
	outline: none;

	-webkit-border-radius: 0;
	border-radius: 0;
	border: 2px solid black;
	height: 32px;
	cursor: pointer;
}

.inputCheckBoxFieldDisabled {
	display: flex;
	align-items: center;

	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 16px;
	padding-left: 10px;
	flex: 1 auto;
	outline: none;

	-webkit-border-radius: 0;
	border-radius: 0;
	height: 32px;

	border: 2px solid black;
	background: gainsboro;
	color: grey;
}

.labelIcon {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 16px;
	color: black;

	margin: 5px 0px 6px 0px;
}

.inputCheckBox {
	color: black;
}


.inputCheckBoxDisabled {
	color: grey;
}

.inputCheckBox input,
.inputCheckBox .checked,
.inputCheckBoxDisabled input,
.inputCheckBoxDisabled .checked {
	display: none;
}

.inputCheckBox input:checked ~ .checked {
	display: inline-block;
}

.inputCheckBox input:checked ~ .unchecked {
	display: none;
}


.inputCheckBoxField input,
.inputCheckBoxField .checked,
.inputCheckBoxField .hchecked,
.inputCheckBoxField .huncheckedhover,
.inputCheckBoxField .hcheckedhover,
.inputCheckBoxFieldDisabled input,
.inputCheckBoxFieldDisabled .checked {
	display: none;
}

.inputCheckBoxField input:checked ~ .checked {
	display: inline-block;
}

.inputCheckBoxField input:checked ~ .unchecked {
	display: none;
}


.inputCheckBoxField input:checked ~ .hchecked {
	display: inline-block;
}

.inputCheckBoxField input:checked ~ .hunchecked {
	display: none;
}


.inputCheckBoxFieldDisabled input:checked ~ .checked {
	display: inline-block;
}

.inputCheckBoxFieldDisabled input:checked ~ .unchecked {
	display: none;
}


@media (hover:hover) {

	.inputCheckBoxField:hover {
		background: wheat;
	}


	.inputCheckBoxField input:hover ~ .huncheckedhover {
		display: inline-block;
	}

	.inputCheckBoxField input:hover ~ .hunchecked {
		display: none;
	}

	.inputCheckBoxField input:checked:hover ~ .hcheckedhover {
		display: inline-block;
	}


	.inputCheckBoxField input:checked:hover ~ .hchecked {
		display: none;
	}

	.inputCheckBoxField input:checked:hover ~ .huncheckedhover {
		display: none;
	}

}


/******************************************************************************************
 * SUPPORT FOR SELECT LISTS
 ******************************************************************************************/


.inputSelectField {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 16px;

	padding-left: 10px;
	padding-top: 0px;
	padding-bottom: 0px;

	flex: 1 1 auto;
	outline: none;

	-moz-appearance: none;/* older firefox */
	-webkit-appearance: none; /* safari, chrome, edge and ie mobile */
	appearance: none; /* rest */

	-webkit-border-radius: 0;
//	border-radius: 0;
	border-radius: 0 4px 4px 0;
	border: 2px solid black;

	height: 36px;

/*
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');

*/

	background-color: white;
	background-image: url('../littleicons/iconSelectArrow.png');
	background-repeat: no-repeat, repeat;
	background-position: right top;
//	background-size: .65em auto, 100%;

}

.inputPanelIconField .inputSelectField {
	width: 80%;
}

.inputSelectField:disabled {
	background: gainsboro;
	color: grey;
}

.inputSelectField:required:invalid {
	color: grey;
}

.inputSelectField option {
	color: black;
}