body.debug{
	/* visibility: visible; */
}

/* ===========================================================================
   FORM FRAMEWORK
   ========================================================================== */

/** (2018-05-28 LS) Reset of box-sizing, added as AB wrote this framework with box-sizing content-box in mind */
.form-row,
.form-row *{
	box-sizing:content-box;
}


/* Form - Row container */

.form-row{
	margin-bottom:0px;
	clear:both;
}

.form-row.form-row-hr{
	background-color:#f3eded;
	display:block;
	height:1px;
	margin-top:10px;
	margin-bottom:15px;
}

/* Form - Item container */
ul.form-item,
ul.form-item li{
	list-style:none;
	padding:0;
	margin:0;
	display:block;
}

ul.form-item li{
	float:left;
	width:33.333%;
	min-width:11.5em;
	max-width:100%;
	padding-bottom:0.281em;
}

ul.form-item li:last-child{
	padding-bottom:0m;
}

.form-item,
ul.form-item{
	width:90%;
	padding:5px 5px 5px 0px;
	margin-right:5px;
	margin-bottom:5px;
	margin-top:5px;
	float:left;
	text-align:left;
}

.form-item + ul.form-item{
	padding-top:0;
	margin-top:0;
}

.form-item label,
.form-item-label{
	width:268px;
	/*display:block;*/
	clear:both;
	margin-bottom:4px;
	float:left;
	padding-right:10px;
}

.form-item .form-input-text{
	width:190px;
}

.form-item select.form-input,
.form-item-select{
	min-width:200px;
}

.form-item .form-input-textarea{
	/*width:190px;*/
	width:23em;
	margin:0px;
}

/* Form - Switch places label/input */

.form-item .input-left{
	/*width:120px;*/
	text-align:right;
	float:left;
	padding-right:10px;
}

.form-item label.label-right{
	width:auto;
	float:left;
	text-align:left;
	clear:none;
}

.form-item .input-left + .label-right{
	float:none;
}

/* Form - Item wide */

.form-item-wide{
	width:300px;
}

.form-item-wide .form-input-text{
	width:280px;
}

.form-item .form-input-wide{
	width:280px;
}

/* Form - Item medium */

.form-item-medium{
	width:130px;
}

.form-item-medium .form-input-text{
	width:120px;
}

.form-item .form-input-medium{
	width:120px;
}

/* Form - Item narrow */

.form-item-narrow{
	width:100px;
}

.form-item-narrow .form-input-text{
	width:80px;
}

.form-item .form-input-narrow{
	width:80px;
}

/* Form - Item single-line indent */

.form-item.form-item-singleline{
	padding-top:23px;
}

/* Form - Item no left-hand object indent */

.form-item.form-item-indent{
	/*
	130808LS removed:because it was breaking the layout on order catalog page. An image (max-width:100%) that is larger than the content area breaks the layout (100% + 130px)
	padding-left:130px;
	width:auto;*/
	width:83%;
	padding-left:17%;
	padding-right:0;
	margin-left:0;
	margin-right:0;
}

/* Form - Headers */

.form-container h1{
	font-size:26px;
	font-weight:600;
	margin:0px 0px 12px 0px;
}

.form-container h2{
	font-size:20px;
	font-weight:600;
	margin:0px 0px 12px 0px;
}

.form-container h3{
	font-size:16px;
	font-weight:600;
	margin:0px 0px 12px 0px;
}

/* Container div for toggable boxes */

.form-container-toggable{
	display:none;
}

/* Button to toggle boxes,
disguised as link */

.form-container-toggler{
	margin:0px;
	padding:0px;
	margin-top:5px;
	margin-bottom:5px;
	background-color:transparent;
	border:0px;
	color:#063c5c;
}

/** 
 * Remove cursor hand/pointer for everything except links, 
 * see article: https://adamsilver.io/articles/buttons-shouldnt-have-a-hand-cursor/ 
 */
.form-container-toggler,
.requiredfield-asterisk{
	/*cursor:pointer;*/
	cursor:default;
}


.form-container-toggler:hover{
	text-decoration:underline;
}

/* Row with right-aligned buttons */

.form-row-buttons{
	text-align:right;
	padding:5px;
	margin-bottom:10px;
	margin-top:10px;
}

/* Validation & error handling */
.requiredfield-asterisk{
	display:inline-block;
	vertical-align:top;
	/*font-size:16px;*/
	/*font-size:1.125em;*/
	font-size: 0.857em;
	font-weight:600;
	text-decoration:none;
	color:#db252b;
	/*padding:0 4px;*/
	padding:0 0.333em;
}

.requiredfield-asterisk:empty{
	display:none;
}

.form-item .form-input-text.form-item-error,
.form-item .form-input-password.form-item-error,
.form-item .form-input-textarea.form-item-error{
	border:1px solid #db252b;
}

.validationerror{
	color:#db252b;
}

h2.validationerror{
	color:#db252b;
	background-color:#fbf9f9;
	padding-left:10px;
	border:1px solid #f3eded;
}

p.validationerror{
	font-weight:600;
}

.form-item .validationerror{
	display:inline-block;
	vertical-align:top;
	padding-top:2px;
	padding-left:0px;
	/*color:#db252b;*/
	font-weight:600;
}

/* IE8 can't handle customfonts on input-type password */
.ie8 .form-input-password{
	font-family:Arial,sans-serif;
}

/* ===========================================================================
   MEDIA-SIZES: Smaller than 980
   ========================================================================== */


@media screen and (max-width:980px){
	.form-item .validationerror{
		display:block;
		padding-left:126px;
	}
}

/* ===========================================================================
   MEDIA-SIZES: Smaller than 480
   ========================================================================== */
@media screen and (max-width:480px){
	.form-item{
		width:95%;
		padding:5px 5px 5px 0px;
		margin-right:5px;
		margin-bottom:5px;
		margin-top:5px;
		float:left;
	}

	.form-item label{
		display:block;
		clear:both;
		text-align:left;
		margin-bottom:4px;
		float:none;
		padding-right:10px;
	}

	.form-item .input-left{
		width:auto;
	}

	.form-item label.no-clear{
		clear:none;
		float:left;
	}

	.form-item.form-item-indent{
		padding-left:0px;
		width:90%;
	}

	.form-item .form-input-text,
	.form-item .form-input-textarea{
		width:85%;
	}

	.form-input-text.form-input-narrow{
		width:80px;
	}

	.form-item .validationerror{
		padding-left:0px;
	}
}

/* ===========================================================================
   MEDIA-SIZES: Smaller than 320 (iPhone Portrait)
   ========================================================================== */

@media screen and (max-width:320px){
	.form-item label.no-clear{
		clear:both;
		float:none;
	}
}