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

/* ===========================================================================
   FORM FRAMEWORK - [CM5DEV]/clientfiles/cm-resource/archive/components/form-framework-css.asp
   ========================================================================== */

/** (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:0;
	clear:both;
}

.form-row.form-row-hr{
	background-color:var(--color-lightgray-dark);
	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:0;
}

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

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

.form-item > label:first-child,
.form-item-label{
	/*display:block;*/
	float:left;
	clear:both;
	/* width:120px; */
	width: 8.5em;
	/* margin-bottom:4px; */
	margin-bottom:0.25em;
	/* padding-right:10px; */
	padding-right:0.625em;
}

.form-item .form-input-text{
	/* width:190px; */
	width:20em;
}

.form-item select.form-input,
.form-item-select{
	/* min-width:200px; */
	min-width:12.5em;
}

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

/* 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; */
	width:19em;
}

.form-item-wide .form-input-text{
	/* width:280px; */
	width:17.5em;
}

.form-item .form-input-wide{
	/* width:280px; */
	width:17.5em;
}

/* Form - Item medium */

.form-item-medium{
	/* width:130px; */
	width:8em;
}

.form-item-medium .form-input-text{
	/* width:120px; */
	width:7.5em;
}

.form-item .form-input-medium{
	/* width:120px; */
	width:7.5em;
}

/* Form - Item narrow */

.form-item-narrow{
	/* width:100px; */
	width:6.25em;
}

.form-item-narrow .form-input-text{
	/* width:80px; */
	width:5em;
}

.form-item .form-input-narrow{
	/* width:80px; */
	width:5em;
}

/* Form - Item single-line indent */
.form-item.form-item-singleline{
	/* padding-top:23px; */
	padding-top:1.5em;
}

/* Form - Item no left-hand object indent */
.form-item.form-item-indent{
	width:auto;
	/* padding-left:130px; */
	padding-left:9em;
	width:calc(100% - (8.5em + 0.625em));
	padding-left:calc(8.5em + 0.625em);
	padding-right:0;
	margin-left:0;
	margin-right:0;
}

/* Form - Headers */

.form-container h1{
	font-family:var(--font-family-body-bold);
	font-weight:var(--font-weight-body-bold);
	/* font-size:2.8rem; */
	font-size:var(--font-size-h2);
	
	margin:0 0 12px 0;
}

.form-container h2{
	font-family:var(--font-family-body-bold);
	font-weight:var(--font-weight-body-bold);
	/* font-size:2.2rem; */
	font-size:var(--font-size-h3);
	margin:0 0 12px 0;
}

.form-container h3{
	font-family:var(--font-family-body-bold);
	font-weight:var(--font-weight-body-bold);
	/* font-size:1.8rem; */
	font-size:1.167em;
	margin:0 0 1.2rem 0;
}

/* Container div for toggable boxes */

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

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

.form-container-toggler{
	margin:0;
	padding:0;
	margin-top:5px;
	margin-bottom:5px;
	background-color:transparent;
	border:0;
	color:var(--color-link);
}

/** 
 * 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-family:var(--font-family-body-bold);
	font-weight:var(--font-weight-body-bold);
	/*font-size:18px;*/
	/*font-size:1.125em;*/
	font-size:0.857em;
	text-decoration:none;
	color:var(--color-warning);
	/*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 var(--color-warning)!important;
}

.validationerror{
	color:var(--color-warning);
}

h2.validationerror{
	color:var(--color-warning);
	background-color:var(--color-lightgray);
	padding-left:10px;
	border:1px solid var(--color-lightgray-dark);
}

p.validationerror{
	font-family:var(--font-family-body-bold);
	font-weight:var(--font-weight-body-bold);
}

.form-item .validationerror{
	display:inline-block;
	vertical-align:top;
	padding-top:2px;
	padding-left:0;
	/*color:var(--color-warning);*/
	font-family:var(--font-family-body-bold);
	font-weight:var(--font-weight-body-bold);
}

/* IE8 can't handle customfonts on input-type password */
.lte8 .form-input-password{
	font-family: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 0;
		margin-right:5px;
		margin-bottom:5px;
		margin-top:5px;
		float:left;
	}

	.form-item > label:first-child{
		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:0;
		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:0;
	}
}

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

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


/** (2020-11-27 LS) Better layout than original form framework styling */
/** Activate when needed */
@supports (display:flex){
	.form-container .form-item{
		/* display:flex; */
		/* flex-flow: row wrap; */
		/* float:none; */
		/* width:auto; */
	}
	.form-container .input-left,
	.form-container label:first-child + .form-input{
		/* flex:1 1 13.75em; */
	}
	.form-container .form-item-label,
	.form-container label:first-child{
		/* flex:0 1 8.5em; */
	}
	.form-container .form-item,
	.form-container .form-row-buttons{
		/* margin-left:0; */
		/* padding-left:0; */
		/* padding-right:0; */
		/* margin-right:0; */
	}
}