body {
	margin: 0px;
	font-family: Arial, sans-serif;
}

.page-wrapper {
	margin: 10px auto;
	padding: 20px 40px;
	max-width: 920px;
	background: "#efefef";
}

.dt-section-container {
	margin: 20px 0px;
	padding: 20px;
	color: #333;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0px 1px 4px 1px #ccc;
}

.dt-section-container .dt-section-container-title {
	display: block;
	font-size: 1.75em;
	margin-bottom: 10px;
}

.dt-section-container .dt-section-container-subtitle {
	display: block;
	margin-bottom: 12px;
	font-size: 1.15em;
	font-style: italic;
	opacity: 0.75;
}

.dt-section-container .dt-section-container-label {
	display: inline-block;
}

.dt-section-container .dt-section-container-label.order,
.dt-section-container .dt-section-container-label.assign {
	display: block;
}

.dt-section-container .dt-section-container-input {
	display: inline-block;
	margin: 0px 12px;
	padding: 6px;
	width: 400px;
	border: 0px;
	box-shadow: 0px 0px 1px 1px #ddd;
}

.dt-section-container .dt-section-container-input.dt-section-container-input-type-order {
	display: block;
	margin: 0px auto;
	padding: 0px;
	width: 100%;
	height: 320px;
	font-size: 0px;
}

.dt-section-container .dt-section-container-input.dt-section-container-input-type-order.vertical {
	height: 640px;
}

.dt-section-container .dt-section-container-input.dt-section-container-input-type-checkbox {
	float: right;
}

.dt-section-container .dt-section-container-input.dt-section-container-input-type-radio,
.dt-section-container .dt-section-container-input.dt-section-container-input-type-checkbox {
	width: auto;
	box-shadow: none;
}

.dt-section-container.assign .dt-section-container-wrapper {
	display: inline-block;
	margin: 0px;
	padding: 0px;
	width: 25%;
	vertical-align: top;
}

.dt-section-container.checkbox .dt-section-container-wrapper {
	padding: 5px;
}

.dt-section-container.checkbox .dt-section-container-wrapper:nth-child(even):not(.invalid) {
	background: rgba(255, 255, 255, 0.25);
}

.dt-section-container.checkbox .dt-section-container-wrapper:hover {
	background: rgba(0, 0, 0, 0.15);
}

.dt-section-container.checkbox .dt-section-container-wrapper span.dt-section-container-error,
.dt-section-container.radio .dt-section-container-wrapper span.dt-section-container-error {
	display: block;
}

.dt-section-container .dt-section-container-input-type-assign {
	display: block;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 160px;
	font-size: 0px;
}

.dt-section-container .dt-section-container-input-type-assign.assigned:not(.invalid) {
	background: #3d8;
}

.dt-section-container .dt-section-container-options {
	margin: 10px auto;
	padding: 20px;
}

.dt-section-container .dt-section-container-options .dt-options-clearer {
	clear: both;
}

.dt-section-container .dt-section-container-options .option-draggable {
	display: inline-block;
	margin: 5px;
	padding: 5px;
	width: 128px;
	height: 128px;
	line-height: 128px;
	text-align: center;
	box-shadow: 0px 0px 2px 1px #333;
	overflow: hidden;
	cursor: move;
	transition: border-radius 0.3s ease-in-out;
	transform: translate(0px, 0px);
}

.dt-section-container .dt-section-container-options .option-draggable.is-inside-container {
	border-radius: 100%;
}

.dt-section-container input.invalid {
	color: #fff;
	background: #d03;
}

.dt-section-container .dt-section-container-wrapper.invalid {
	color: #000;
	background: #ff0;
}

.dt-section-container .dt-custom-form-content.before {
	padding: 20px 0px;
}

.dt-section-container .dt-custom-form-content.after {
	padding: 20px 0px 0px 0px;
}

/* Summary Overview */
.dt-summary-overview {
	
}

.dt-summary-overview .dt-query {
	margin: 10px auto;
	padding: 10px;
	background: #efefef;
}

.dt-summary-overview .dt-query .dt-query-title {
	font-weight: bold;
	font-size: 1.5em;
}

.dt-summary-overview .dt-query .dt-query-subtitle {
	font-style: italic;
}

.dt-summary-overview .dt-query .dt-query-type {
	font-style: italic;
}

.dt-summary-overview .dt-query .dt-query-valid {
	padding-top: 5px;
	font-weight: bold;
	border-top: 1px dotted #dad;
}

.dt-summary-overview .dt-query .dt-query-valid.valid {
	color: #5a3;
}

.dt-summary-overview .dt-query .dt-query-valid.invalid {
	color: #d35;
}

.dt-summary-overview .dt-query .dt-input {
	margin: 10px auto;
}

.dt-summary-overview .dt-query .dt-input .dt-input-name {
	font-weight: bold;
}

.dt-summary-overview .dt-query .dt-input .dt-input-values {
	font-style: italic;
}

.dt-summary-overview .dt-query .dt-input .dt-input-valid {
	padding-top: 5px;
	font-weight: bold;
	border-top: 1px dotted #dad;
}

.dt-summary-overview .dt-query .dt-input .dt-input-valid.valid {
	color: #5a3;
}

.dt-summary-overview .dt-query .dt-input .dt-input-valid.invalid {
	color: #d35;
}

@media screen and (max-width: 1024px) {
	.dt-section-container .dt-section-container-options .option-draggable {
		width: 96px;
		height: 96px;
		line-height: 96px;
	}
}

@media screen and (max-width: 640px) {
	.page-wrapper {
		padding: 0px;
	}
	
	.dt-section-container {
		margin: 0px;
		border-radius: 0px;
		box-shadow: none;
	}
	
	.dt-section-container.assign .dt-section-container-wrapper {
		width: 50%;
	}

    .dt-section-container .dt-section-container-input {
		max-width: calc(100% - 36px);
	}
	
	.dt-section-container .dt-section-container-options .option-draggable {
		width: 64px;
		height: 64px;
		line-height: 64px;
	}
}

@media screen and (max-width: 480px) {
	.dt-section-container.assign .dt-section-container-wrapper {
		width: 100%;
	}
}