/* ===== Form - global */
input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
select,
textarea {
	border: 1px solid #d3d4d5;
	box-shadow: 0px 0px 2px 0px rgba(211,212,213,0.75);
	box-sizing: border-box;
	max-width: 100%;
	padding: 0.3rem 0.6rem;
}

button,
input[type="submit"],
a.btn,
.btn,
.mvc-table .mvc-table-template-filter button,
.mvc-itemstable .mvc-table-template-items-actions button {
	background: #551f75;
	border: 1px solid #551f75;
	box-sizing: border-box;
	cursor: pointer;
	color: #fff;
	display: inline-block;
	font-weight: normal;
	text-decoration: none;
	text-transform: uppercase;
	padding: 0.6rem 1.3rem;
}
.btn-class-save,
a.btn-class-save {
	background: #04c80c;
	border-color: #d3d4d5;
	color: #fff;
}
.btn-class-cancel,
a.btn-class-cancel {
	background: #fff;
	border-color: #d3d4d5;
	color: #551f75;
}
.btn-class-alt,
a.btn-class-alt,
.mvc-table .mvc-table-template-filter .mvc-table-filter-menu-container .mvc-table-filter-menu-item button,
.mvc-itemstable .mvc-table-template-items-actions .mvc-table-items-actions-item button {
	background: #696f7b;
	border: none;
	color: #fff;
}
/* ===== */



/* ===== Form - general */
.form {
	
}

.form > form {
	
}

.form > form > .form-comments,
.form > form > .form-errors {
	margin: 1rem auto;
}
/* ===== */



/* ===== Form - common */
.form .form-comment {
	display: block;
	font-size: 0.8rem;
	padding: 0 0.7rem;
}

.form .form-error {
	color: #fb3204;
	display: block;
	font-size: 0.8rem;
	padding: 0 0.7rem;
}

.form .form-comments,
.form .form-errors {
	text-align: center;
}
.form .form-errors {
	background-color: #f9e9ea;
}
.form .form-comments > *,
.form .form-errors > * {
	padding: 0.3rem;
}

.form .form-item-invalid,
.form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]).form-item-invalid,
.form select.form-item-invalid,
.form textarea.form-item-invalid {
	border: 1px solid #fb3204;
}
/* ===== */



/* ===== Form - title */
.form .form-title {
	margin-bottom: 20px;
}

.form .form-title h1,
.form .form-title h2,
.form .form-title h3,
.form .form-title h4,
.form .form-title h5,
.form .form-title h6 {
	margin: 0;
	text-align: center;
}
/* ===== */



/* ===== Form - fieldset */
.form .form-fieldset {
	background: #fff;
	border: 3px solid #fff;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
	display: block;
	margin: 1rem auto;
	padding: 0;
}
.form .form-fieldset + .form-fieldset {
	margin: 2rem auto;
}
.form .form-fieldset:last-of-type {
	margin: 1rem auto;
}

.form .form-fieldset > * {
	margin: 1rem 0;
	padding: 0 2rem;
}

/* Form fieldset - title */
.form .form-fieldset .form-fieldset-title {
	align-items: center;
	background: #f3f6f9;
	box-sizing: border-box;
	color: #1d8fc7;
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: min-content 1fr min-content;
	justify-content: space-between;
	margin: 0 0 1rem 0;
	padding: 0.6rem;
	text-align: left;
}
.form .form-fieldset .form-fieldset-title-item.item-title {
	grid-column-start: 2;
}
.form .form-fieldset .form-fieldset-title-item.item-l-menu {
	align-items: center;
	display: flex;
	grid-column-start: 1;
	justify-content: flex-end;
	margin-right: 0.5rem;
}
.form .form-fieldset .form-fieldset-title-item.item-r-menu {
	align-items: center;
	display: flex;
	grid-column-start: 3;
	justify-content: flex-start;
	margin-left: 0.5rem;
}
/* ---------- */

/* Form fieldset - content */
.form .form-fieldset .form-fieldset-items {
	box-sizing: border-box;
	border-collapse: separate;
	border-spacing: 0.6rem 0.6rem;
	display: table;
	width: 100%;
}

.form .form-fieldset .form-fieldset-items > div {
	display: table-row;
}
.form .form-fieldset .form-fieldset-items > div > * {
	box-sizing: border-box;
	display: table-cell;
}

.form .form-fieldset .form-fieldset-items > div > label {
	box-sizing: border-box;
	font-weight: bold;
	font-size: 0.9rem;
	text-align: right;
	vertical-align: top;
	white-space: nowrap;
}

.form .form-fieldset .form-fieldset-items > div > div {
	box-sizing: border-box;
	width: 100%;
}
.form .form-fieldset .form-fieldset-items > div > div > div,
.form .form-fieldset .form-fieldset-items > div > div > span,
.form .form-fieldset .form-fieldset-items > div > div > input,
.form .form-fieldset .form-fieldset-items > div > div > select,
.form .form-fieldset .form-fieldset-items > div > div > textarea,
.form .form-fieldset .form-fieldset-items > div > div > ul {
	margin-bottom: 0.4rem;
}
.form .form-fieldset .form-fieldset-items > div > div > input[type="checkbox"],
.form .form-fieldset .form-fieldset-items > div > div > input[type="radio"] {
	margin-left: 0.6rem;
}
.form .form-fieldset .form-fieldset-items > div > div > input[type="text"],
.form .form-fieldset .form-fieldset-items > div > div > input[type="password"],
.form .form-fieldset .form-fieldset-items > div > div > textarea {
	box-sizing: border-box;
	width: 100%;
}

.form .form-fieldset .form-fieldset-items > div > div > ul {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-left: 0.7rem;
}
.form .form-fieldset .form-fieldset-items > div > div > ul.horizontal {
	display: flex;
	flex-wrap: wrap;
}
.form .form-fieldset .form-fieldset-items > div > div > ul li {
	margin: 0;
	margin-bottom: 1rem;
	padding: 0;
}
.form .form-fieldset .form-fieldset-items > div > div > ul.horizontal li {
	margin-right: 1rem;
	white-space: nowrap;
}
.form .form-fieldset .form-fieldset-items > div > div > ul input {
	margin-right: 0.3rem;
}
.form .form-fieldset .form-fieldset-items > div > div > ul .form-comment,
.form .form-fieldset .form-fieldset-items > div > div > ul .form-error {
	padding: 0;
}
/* ---------- */
/* ===== */



/* ===== Form - buttons */
.form .form-buttons {
	display: flex;
	justify-content: space-around;
	margin: 2rem auto;
}
.form .form-buttons > * {
	margin: 0.6rem auto;
}

.form .form-buttons-v {
	text-align: center;
	margin: 2rem auto;
}
.form .form-buttons-v .form-buttons {
	display: inline-flex;
	flex-direction: column;
	margin: 0 auto;
}
.form .form-buttons-v .form-buttons button,
.form .form-buttons-v .form-buttons .btn {
	box-sizing: border-box;
	display: block;
	width: 100%;
}
/* ===== */



@media only screen and (max-width: 640px) {
	input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
	select,
	textarea {
		width: 100%;
	}
	label > input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
	label > select,
	label > textarea {
		max-width: 100%;
		width: auto;
	}

	.form .form-fieldset > * {
		margin: 0.5rem 0;
		padding: 0 0.5rem;
	}
	
	.form .form-fieldset .form-fieldset-title {
		grid-template-columns: 50% 50%;
		grid-template-rows: auto;
	}
	.form .form-fieldset .form-fieldset-title-item.item-title {
		grid-column: 1 / 3;
		text-align: center;
	}
	.form .form-fieldset .form-fieldset-title-item.item-l-menu {
		grid-column-start: 1;
		grid-row-start: 1;
		justify-self: start;
		margin-right: 0.5rem;
		margin-bottom: 0.5rem;
		text-align: left;
	}
	.form .form-fieldset .form-fieldset-title-item.item-r-menu {
		grid-column-start: 2;
		grid-row-start: 1;
		justify-self: end;
		margin-left: 0.5rem;
		margin-bottom: 0.5rem;
		text-align: right;
	}

	.form .form-fieldset .form-fieldset-items {
		display: block;
		padding: 0;
	}
	.form .form-fieldset .form-fieldset-items > div {
		display: block;
		margin: 1rem auto;
	}
	.form .form-fieldset .form-fieldset-items > div > * {
		display: block;
		margin: 0.5rem 0 0.5rem 0;
		padding-left: 1rem;
	}
	.form .form-fieldset .form-fieldset-items > div > *:first-child {
		padding-left: 0;
	}
	.form .form-fieldset .form-fieldset-items > div > label {
		font-size: 1rem;
		text-align: left;
	}

	.form .form-buttons {
		flex-direction: column;
		padding: 0 5%;
	}
	.form .form-buttons button {
		box-sizing: border-box;
		width: 100%;
	}
}