/* Wrapper: */

div.hdv_InputField
{
}
div.hdv_InputField.hdv_fieldOption_forSellerOnly
{
	opacity: 0.7;
}
div.hdv_InputField.hdv_fieldOption_hidden
{
	display: none;
}
/*
div.hdv_InputField.hdv_fieldType_readOnly
{
	margin-bottom: 0;
}
*/


/* Divs in one or three lines: */

div.hdv_InputField>div.hdv_label,
div.hdv_InputField>div.hdv_input,
div.hdv_InputField>div.hdv_result
{
	float: left;
	box-sizing: border-box;
}
div.hdv_InputField>div.hdv_label,
div.hdv_InputField>div.hdv_input
{
	width: 40%;
	padding-right: 10px;
}
div.hdv_InputField>div.hdv_result
{
	width: 20%;
}
@media only screen and ( max-width: 1140px )
{
	div.hdv_InputField>div.hdv_label,
	div.hdv_InputField>div.hdv_input,
	div.hdv_InputField>div.hdv_result
	{
		float: none;
		width: auto;
		padding: 0;
	}
}


/* Label <div>: */

div.hdv_InputField>div.hdv_label
{
	position: relative; /* For popup <div> with 'position: absolute'. */
	/* height: 2.5em; Is not working for long labels that need more lines. */
}
@media only screen and ( max-width: 1140px )
{
	div.hdv_InputField>div.hdv_label
	{
		margin-bottom: 5px;
	}
	div.hdv_InputField.hdv_fieldType_readOnly>div.hdv_label
	{
		margin-bottom: 0;
	}
}


/* Label text: */

div.hdv_InputField>div.hdv_label>span.hdv_labelText
{
	vertical-align: middle;
	vertical-align: -webkit-baseline-middle;
}


/* Info icon: */

div.hdv_InputField>div.hdv_label>a.hdv_info
{
	margin-left: 10px;
	display: inline-block;
	height: 1em;
	width: 1.2em;
	-webkit-mask-image: url( info-icon.png );
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	-webkit-mask-position: center;
	vertical-align: middle;
	vertical-align: -webkit-baseline-middle;
}

div.hdv_InputField>div.hdv_label>div.hdv_infoPopup
{
	position: absolute;
	z-index: 1; /* To be on top of next html elements. */
	left: 10px;
	right: 10px;
	top: calc( 100% + 5px );
	padding: 10px;
	background: #cb731c;
	color: white;
	box-shadow: 0 0 10px #dddddd;
	display: none;
}
div.hdv_InputField>div.hdv_label>div.hdv_infoPopup.hdv_openOnHover,
div.hdv_InputField>div.hdv_label>div.hdv_infoPopup.hdv_openOnClick
{
	display: block;
}


/* Warning icon: */

div.hdv_InputField>div.hdv_label>a.hdv_warning
{
	margin-left: 10px;
	display: inline-block;
	height: 1em;
	width: 1.2em;
	-webkit-mask-image: url( warning-icon.png );
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	-webkit-mask-position: center;
	vertical-align: middle;
	vertical-align: -webkit-baseline-middle;
}
div.hdv_InputField>div.hdv_label>button.hdv_warning:nth-of-type( 2 )
{
	margin-right: 5px;
}

div.hdv_InputField>div.hdv_label>div.hdv_warningPopup
{
	position: absolute;
	z-index: 1; /* To be on top of next html elements. */
	left: 10px;
	right: 10px;
	top: calc( 100% + 5px );
	padding: 10px;
	background: #cb731c;
	color: white;
	box-shadow: 0 0 10px #dddddd;
	display: none;
}
div.hdv_InputField>div.hdv_label>div.hdv_warningPopup.hdv_openOnHover,
div.hdv_InputField>div.hdv_label>div.hdv_warningPopup.hdv_openOnClick
{
	display: block;
}


/* Field to do arrow: */

div.hdv_InputField>div.hdv_label>div.hdv_fieldToDoArrow
{
	height: 1em;
	width: 1.3em;
	margin-left: 10px;
	-webkit-mask-image: url( "field-to-do-arrow.png" );
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	vertical-align: middle;
	vertical-align: -webkit-baseline-middle;
	display: none;
}
@media only screen and ( max-width: 1140px )
{
	div.hdv_InputField>div.hdv_label>div.hdv_fieldToDoArrow
	{
		width: 1em;
		-webkit-mask-image: url( "field-to-do-arrow_mobile.png" );
	}
}
div.hdv_InputField.hdv_state_empty:not( .hdv_updating )>div.hdv_label>div.hdv_fieldToDoArrow,
div.hdv_InputField.hdv_state_invalid:not( .hdv_updating )>div.hdv_label>div.hdv_fieldToDoArrow
{
	display: inline-block;
	animation: fieldToDoArrow 1.5s ease infinite;
}
@keyframes fieldToDoArrow
{
	0% { opacity: 0; }
	50% { opacity: 1; }
	100% { opacity: 0; }
}


/* Udpate symbol: */

div.hdv_InputField>div.hdv_label>div.hdv_updatingSymbol
{
	height: 1em;
	width: 1em;
	margin-left: 10px;
	-webkit-mask-image: url( "updating-symbol.png" );
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	vertical-align: middle;
	vertical-align: -webkit-baseline-middle;
	display: none;
	transform-origin: center;
}
div.hdv_InputField.hdv_updating>div.hdv_label>div.hdv_updatingSymbol
{
	display: inline-block;
	animation: updateSymbol 1.5s linear infinite;
}
@keyframes updateSymbol
{
	100% { -webkit-transform: rotate(360deg); }
}


/* Input <div>: */

div.hdv_InputField>div.hdv_input
{
}


/* Input: */

div.hdv_InputField>div.hdv_input>input,
div.hdv_InputField>div.hdv_input>select,
div.hdv_InputField>div.hdv_input>div.hdv_select>button,
div.hdv_InputField>div.hdv_input>textarea
{
	width: 100%;
	box-sizing: border-box;
	margin: 0; /* Undo css by template. */
}
div.hdv_InputField>div.hdv_input>textarea
{
	min-width: 100%; /* Prevent dragging smaller horizontally. */
	max-width: 100%; /* Prevent dragging larger horizontally. */
}
div.hdv_InputField>div.hdv_input>input,
div.hdv_InputField>div.hdv_input>select
{
	height: 2.5em;
}


/* Image: */

div.hdv_InputField>div.hdv_input>div>img
{
	display: block;
	margin: 0 auto;
	max-width: 100%;
}


/* Svg drawing: */

div.hdv_InputField>div.hdv_input>div>svg
{
	display: block;
	margin: 0 auto;
	max-width: 100%;
	overflow: visible;
}

div.hdv_InputField>div.hdv_input>div>svg svg
{
	display: block; /* Otherwise inline, creating space around it. */
	overflow: visible;
}

div.hdv_InputField>div.hdv_input>div>svg *:not( svg )
{
	vector-effect: non-scaling-stroke;
}


/* Color drop down list: */

div.hdv_InputField>div.hdv_input>div.hdv_select
{
	display: inline-block;
	width: 100%;
	vertical-align: text-top;
	position: relative;
}

div.hdv_InputField>div.hdv_input>div.hdv_select>button.hdv_currentOption
{
	/*
	border: 1px solid #cccccc;
	border-radius: 3px;
	box-sizing: border-box;
	background: white;
	padding: 0.2em 0.7em;
	user-select: none;
	cursor: pointer;
	*/
	text-align: left;
}

div.hdv_InputField>div.hdv_input>div.hdv_select>div.hdv_options
{
	position: absolute;
	z-index: 1; /* To be in front of elements that come after it. */
	top: 2.5em;
	left: 0;
	width: 100%;
	height: 200px;
	border: 1px solid #cccccc;
	border-radius: 3px;
	box-sizing: border-box;
	overflow: auto;
}

div.hdv_InputField>div.hdv_input>div.hdv_select>div.hdv_options>div.hdv_option
{
	background: white;
	padding: 0.2em 0.7em;
	user-select: none;
}
div.hdv_InputField>div.hdv_input>div.hdv_select>div.hdv_options>div.hdv_option:hover,
div.hdv_InputField>div.hdv_input>div.hdv_select>div.hdv_options:not( :hover )>div.hdv_option.hdv_selectedItem
{
	border: 1px solid blue;
	box-sizing: border-box;
}