/*
 * Main contents
 */

.domContainer {
	margin: .5em 0;
}

.domPreview {
	width: 25em;
	height: 25em;
	max-height: 372px;
	max-width: 372px;
	/*max-width: 100%;*/
	/*height: auto;*/
}

/* Hide file selector behind "[LOAD]" */
.textButton input[type=file] {
	display: none;
}

.average {
	text-align: center;
	margin-bottom: 0.5em;
}

.domAverage {
	font-size: 1.5em;
}

.checkbox-container label {
	display: flex;
	align-items: center;
}

/*
 * Tool tips
 */

.closeIcon {
	display: none;
	background: gold;
	color: #000;
	border-radius: 50%;
	width: 2em;
	height: 2em;
	line-height: 2em;
	text-align: center;
}

.toolIcon {
	display: inline-block;
	background: gold;
	color: #000;
	border-radius: 50%;
	width: 1.5em;
	height: 1.5em;
	line-height: 1.5em;
	text-align: center;
}

.toolLink {
	margin-left: 1em;
}

.toolText {
	position: absolute;
	width: 80%;
	height: auto;
	background-color: #5B2828;
	color: #fff;
	padding: 1em;
	border-radius: .5em;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	border: .2em solid gold;
	cursor: pointer;
	font-size: 1.2em;
}

/*
 * Slider
 */

.slider {
	height: 0.3em;
	width: auto;
	cursor: pointer;

	display: flex;
	justify-content: center;
	align-items: center;
}

.slider .railBefore {
	height: 4px;
	flex-grow: 0.5;

	background: #0060df;
	border-top: .1em solid #2374ff;
	border-left: .1em solid #2374ff;
	border-bottom: .1em solid #2374ff;
}

.slider .thumb {
	position: relative;
	border-radius: 50%;
	cursor: pointer;
	background: #676774;
	height: 1.6em;
	width: 1.6em;
	border: .22em solid #ffffff;
}

.slider .railAfter {
	height: 4px;
	flex-grow: 0.5;

	background: #e9e9ed;
	border-top: .1em solid #8f8f9d;
	border-right: .1em solid #8f8f9d;
	border-bottom: .1em solid #8f8f9d;
}

.slider.over .railBefore {
	background: #2374ff;
	border-top: .1em solid #3e90ff;
	border-left: .1em solid #3e90ff;
	border-bottom: .1em solid #3e90ff;
}

.slider.over .thumb {
	background: #484851;
}

.slider.down .thumb {
	background: #2374ff;
}

.slider.over .railAfter {
	background: #d0d0d7;
	border-top: .1em solid #676774;
	border-right: .1em solid #676774;
	border-bottom: .1em solid #676774;
}

/*
 * steps
 */

.errorHighlight {
	background-color: #fff;
	color: #f00;
}

.center-button {
	display: flex;
	justify-content: center;
	align-items: center;
}

.center-button button {
	font-size: 1.125em;
	font-weight: bold;
}

.center-image {
	display: flex;
	justify-content: center;
}

.center-image img {
	width: 25em;
	max-width: 400px;
	height: auto;
}

.step {
}

#stepFile input[type="file"] {
	font-size: 1em;
	border: none;
}

#stepClip {
}

#stepClip h2, #domClip {
	flex-shrink: 0; /* prevent h2 and #domClip from shrinking smaller than their content */
}

#domClip {
	flex-grow: 1; /* allow #domClip to grow to take up remaining space in #stepClip */
}

#stepClip .domContainer {
	display: flex;
	justify-content: center;
}

/* vertical align slider in row */

#stepAdjust .domContainer {
	display: flex;
	justify-content: center;
}

#stepAdjust .domPreview {
}

#stepAdjust .sliders {
	margin: .5em 0;
}

#stepAdjust input[type=range] {
	margin: 0;
	padding: 0;
	vertical-align: middle;
	width: 100%;
}

#stepAdjust .sliderValue {
}

#stepAdjust .grid {
	display: grid;
	grid-template-columns: auto auto 1fr;
	align-items: center;
	row-gap: 0;
	column-gap: .2em;
}

#stepAdjust .row {
	display: contents;
	line-height: 2em;
}

#stepAdjust .label-column,
#stepAdjust .value-column {
	white-space: nowrap;
}

#stepAdjust .input-column input {
	width: 100%;
}

#stepDither .domContainer {
	display: flex;
	justify-content: center;
}

#stepOutline .domContainer {
	display: flex;
	justify-content: center;
}

/* outline radio with border */
#stepOutline input[type=radio]:checked + label > img {
	border: .2em solid #00ff00;
	/*box-shadow: 0 0 .1em .1em darkgreen;*/
}

#stepOutline input[type=radio] + label > img {
	border: .2em solid #ffffff;
	/*box-shadow: 0 0 .1em .1em transparent;*/
}

#stepOutline .domOutline {
	display: none;
}

#stepOutline .outlines {
	display: flex;
	justify-content: center;
}

#stepOutline img {
	width: 7em;
	height: 7em;
	margin: 1em;
}

#stepSample .domContainer {
	/*margin-left: auto;*/
	/*margin-right: auto;*/
	display: flex;
	justify-content: center;
}

#stepSample canvas {
	/*position: absolute;*/
	/*left: 50%;*/
	/*transform: translateX(-50%);*/
	/*display: block;*/
}

#stepText textarea,
#stepInner textarea,
#stepOuter textarea
{
	width: 100%;
}

#domGiftCode {
	margin: 0 0.5em;
}

#domGiftStatus {
	margin: 0 0.5em;
}