/* Old CSS-Forms (use newer .form-fields now) */
table.form_table { width: 100%; border: 2px solid gray; border-width: 3px 2px }
table.form_table th { background: #ddd; text-align: left; width: 240px; font-weight: bold; padding: 5px }
table.form_table td { background: #eee; text-align: left; padding: 5px }
table.form_table td input { width: 400px }
table.form_table td input[type='checkbox'] { width: auto }
table.form_table tfoot td { background-color: #999; border: 1px solid silver; padding: 10px 0px; text-align: center }
table.form_table tfoot td input { border: 1px solid gray; background-color: #ccc; height: 2em; width: auto; padding: 0px 80px; letter-spacing: 3px; border-radius: 6px; -moz-border-radius: 6px }
table.form_table tfoot td input:hover { background-color: #eee }
table.form_table ul.errorlist { display: inline-block; float: right; width: 300px; margin: 0px; padding: 0px; margin-top: 4px }
table.form_table ul.errorlist li { list-style: url(/media/img/icon_warning.png) inside; color: red }


/*
	Base CSS for django forms rendered as as_p().
	Use:
		<div class="form-fields">
		{{ form.as_p }}
		</div>
*/

.form-fields, .form-fields * {box-sizing:border-box}

.form-fields > .errorlist > li {
	display: block;
}

.form-fields > .errorlist {
	color: red;
	display: block;
	padding-left: 0;
	margin: 0;
}

.form-fields > .errorlist.nonfield {
	margin: 1em 0;
}

.form-fields > .errorlist:not(.nonfield),
.form-fields > .errorlist:not(.nonfield) + p { background: rgba(255,0,0,.1); border-left: 4px solid red}
.form-fields > .errorlist:not(.nonfield),
.form-fields > .errorlist:not(.nonfield) + p > label:nth-child(1),
.form-fields-stacked > .errorlist:not(.nonfield) + p { padding-left: 6px }
.form-fields-stacked > .errorlist:not(.nonfield) + p > label:nth-child(1) {padding-left: 0}

.form-fields > p:before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
}
.form-fields > p {
	position: relative;
	margin: 0;
	padding: 4px;
	padding-left: 150px;
}
.form-fields > p.required > label:nth-child(1)::after {
	content: "*"
}
.form-fields > p > label:nth-child(1) {
	position: absolute;
	height: 100%;
	width: 150px;
	left: 0;
	top: 0;
	bottom: 0;
	margin: 0;
	padding: 4px;
	padding-left: 0;
}
.form-fields > p:last-child {margin-bottom:0}

.form-fields-stacked > p{padding-left: 0}
.form-fields-stacked > p > label:nth-child(1) {width: 100%;position:relative}

.form-fields-50 > p{padding-left: 50px}
.form-fields-50 > p > label:nth-child(1) {width: 50px}
.form-fields-60 > p{padding-left: 60px}
.form-fields-60 > p > label:nth-child(1) {width: 60px}
.form-fields-70 > p{padding-left: 70px}
.form-fields-70 > p > label:nth-child(1) {width: 70px}
.form-fields-80 > p{padding-left: 80px}
.form-fields-80 > p > label:nth-child(1) {width: 80px}
.form-fields-90 > p{padding-left: 90px}
.form-fields-90 > p > label:nth-child(1) {width: 90px}
.form-fields-100 > p{padding-left: 100px}
.form-fields-100 > p > label:nth-child(1) {width: 100px}
.form-fields-110 > p{padding-left: 110px}
.form-fields-110 > p > label:nth-child(1) {width: 110px}
.form-fields-120 > p{padding-left: 120px}
.form-fields-120 > p > label:nth-child(1) {width: 120px}
.form-fields-130 > p{padding-left: 130px}
.form-fields-130 > p > label:nth-child(1) {width: 130px}
.form-fields-140 > p{padding-left: 140px}
.form-fields-140 > p > label:nth-child(1) {width: 140px}
.form-fields-150 > p{padding-left: 150px}
.form-fields-150 > p > label:nth-child(1) {width: 150px}
.form-fields-160 > p{padding-left: 160px}
.form-fields-160 > p > label:nth-child(1) {width: 160px}
.form-fields-170 > p{padding-left: 170px}
.form-fields-170 > p > label:nth-child(1) {width: 170px}
.form-fields-180 > p{padding-left: 180px}
.form-fields-180 > p > label:nth-child(1) {width: 180px}
.form-fields-190 > p{padding-left: 190px}
.form-fields-190 > p > label:nth-child(1) {width: 190px}
.form-fields-200 > p{padding-left: 200px}
.form-fields-200 > p > label:nth-child(1) {width: 200px}
.form-fields-210 > p{padding-left: 210px}
.form-fields-210 > p > label:nth-child(1) {width: 210px}
.form-fields-220 > p{padding-left: 220px}
.form-fields-220 > p > label:nth-child(1) {width: 220px}
.form-fields-230 > p{padding-left: 230px}
.form-fields-230 > p > label:nth-child(1) {width: 230px}
.form-fields-240 > p{padding-left: 240px}
.form-fields-240 > p > label:nth-child(1) {width: 240px}
.form-fields-250 > p{padding-left: 250px}
.form-fields-250 > p > label:nth-child(1) {width: 250px}

@media screen and (max-width: 991.5px) {
	.form-fields > .errorlist { padding: 4px }
	.form-fields > .errorlist,
	.form-fields > .errorlist + p { border: none; border-left: 2px solid red }
	.form-fields > .errorlist + p > label { border: none; padding: 0 }
	.form-fields > p {
		padding: 4px;
	}
	.form-fields > p > label:nth-child(1) {
		position: relative;
		width: 100%;
		height: auto;
		left: 0;
		padding: 0;
		background-image: none;
		background-color: transparent;
		color: inherit;
	}
}

/* Widget styles */

.form-fields > p > .field-group label {display:block;cursor:pointer}

/* Make inputs 100% except buttons, checkboxes and radios */
.form-fields > p > select,
.form-fields > p > textarea,
.form-fields > p > input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='button']):not([type='submit']):not([type='reset']) {
	width: 100%; max-width: 100%;
	padding: 6px;
	border: 1px solid #ccc;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
	border-radius: 1px;
}


/* Make radios and checkboxes align well with text */
.form-fields > p > input[type='radio'],
.form-fields > p > input[type='checkbox']{
	zoom: 150%;
}

/* Put helptext on top */
.form-fields p .helptext {width:100%;color:#bbb}
.form-fields p input[type='checkbox'] + .helptext {width:auto;padding-left: 8px;line-height:100%}