@charset "utf-8";

.trade-page {
	padding-top: 20px;
	padding-bottom: 60px;
}

.trade-page-heading {
	margin-top: 0;
	font-size: 30px;
	font-weight: 700;
}

.trade-panel {
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 20px 45px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
	border: none;
}

.trade-panel .panel-body {
	padding: 40px;
}

.trade-step-intro {
	color: #767676;
	margin-bottom: 25px;
}

.trade-section-heading {
	margin-top: 25px;
	margin-bottom: 15px;
	padding-top: 15px;
	border-top: 1px solid #eee;
	font-size: 17px;
	font-weight: 700;
}

/* The first section sits right under the intro paragraph - no rule needed to separate them */
.trade-section-heading-first {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.trade-success-banner {
	margin-bottom: 25px;
}

@media (max-width: 767px) {
	.trade-panel .panel-body {
		padding: 25px 20px;
	}
}

/* Photo drop area. dropzone.css carries the layout of the thumbnails - this only settles it into
   the panel it sits in, beside the sky-form fields above and below it */
.trade-dropzone {
	border: 2px dashed #d5d5d5;
	border-radius: 8px;
	background: #fafafa;
	margin: 0;
	padding: 10px 20px;
	transition: border-color 0.2s linear, background 0.2s linear;
}

.trade-dropzone.dz-drag-hover {
	border-color: #999;
	background: #f0f0f0;
}

.trade-dropzone .dz-message {
	margin: 1.5em 0;
	color: #767676;
}

.trade-dropzone .dz-message .dz-button {
	font-size: 16px;
	font-weight: 600;
	color: #444;
}

.trade-dropzone .dz-message p {
	margin: 5px 0 0 0;
	font-size: 13px;
}

/* The remove link sits under each thumbnail, outside the tile dropzone.css draws */
.trade-dropzone .dz-preview .dz-remove {
	margin-top: 8px;
	font-size: 13px;
	color: #767676;
}

/* The upload note belongs under the drop area, not tight against it */
.trade-dropzone + input[type="hidden"] + .note {
	display: block;
	margin-top: 6px;
}