@charset "utf-8";

:root {
	--formTitleColor: #000;
	--formTitleSize: 20px;
	--formTitleBorderColor: #aaa;
	--formFieldTextColor: #000;
	--formFieldFontColor: #000;
	--formFieldBgColor: #ddd;
	--formFieldBgColorDisabled: #eee;
	--formFieldFontSize: 18px;
	--formFieldRequiredColor: #f15a24;
	--formErrorColor: #ff1654;
	--formButtonColor: rgba(242, 181, 28, 1);
	--formButtonColorActive: rgba(242, 181, 28, 0);
	--formButtonColorDisabled: rgba(200, 200, 200, 1);
	--formButtonFontColor: #fff;
	--formButtonFontColorActive: #000;
	--formButtonFontSize: 18px;
	--formReminderFontSize: 12px;
	--formSuccessFontColor: #2a0062;
	--formSuccessFontSize: 18px;

	--progressBarColor: #70c1b3;
}

.formContent {
	padding: 0 10px 40px 0; width: 100%; box-sizing: border-box;
	display: flex; flex-flow: row wrap; align-items: flex-start; justify-content: flex-start;
}
.formContent > .success {
	width: 100%; text-align: center; color: var(--formSuccessFontColor); font-size: var(--formSuccessFontSize); line-height: 1.5em;
}
.formContent > .error {
	width: 100%; text-align: center; color: var(--formErrorColor); font-size: var(--formSuccessFontSize); line-height: 1.5em;
}
.formContent > .title {
	color: var(--formTitleColor); font-size: var(--formTitleSize); font-weight: bold; border-bottom: var(--formTitleBorderColor) 1px solid;
	width: inherit; padding: 0 0 5px 0; margin: 0 0 10px 0;
}
.formContent > .title img {
	height: 40px; margin: 0 10px 0 0;
}
.formContent > .field {
	width: inherit; box-sizing: border-box;
	display: flex; flex-flow: row wrap; align-items: flex-start; justify-content: flex-start;
}
.formContent > .field > div {
	flex-grow: 1; width: 31%; box-sizing: border-box; color: var(--formFieldTextColor); font-size: var(--formFieldFontSize); line-height: 40px;
	position: relative; padding: 0; margin: 30px 10px 10px 20px;
}
.formContent > .field > div > .options {
	display: inline-block; height: auto;
}
.formContent > .field > div.textarea {
	width: 100%;
}
.formContent > .field > div input {
	width: 100%; height: 40px; background: transparent; box-shadow: none; border: none; outline: none;
	color: var(--formFieldFontColor); font-size: var(--formFieldFontSize); padding: 0 10px;
	transition: opacity 0.5s; opacity: 0;
}
.formContent > .field > div input[type="radio"],
.formContent > .field > div input[type="checkbox"] {
	width: auto; height: auto; margin: 0 10px 0 40px; vertical-align: middle; opacity: 1;
}
.formContent > .field > div input[type="file"] {
	width: auto; height: auto; margin: 10px 10px 10px 60px; vertical-align: middle; opacity: 1; font-size: 12px;
}
.formContent > .field > div input[type="button"] {
	width: auto; height: 34px; vertical-align: middle; color: var(--formButtonFontColor); font-size: var(--formButtonFontSize); background: var(--formButtonColor); border: var(--formButtonColor) 3px solid; border-radius: 2px; opacity: 1; margin: 0 0 0 10px;
	transition: color 0.3s ease-in, background 0.3s ease-in;
}
.formContent > .field > div input[type="button"]:hover {
	background: var(--formButtonColorActive); color: var(--formButtonFontColorActive);
}
.formContent > .field > div textarea {
	width: 100%; height: 80px; background: transparent; box-shadow: none; border: none; outline: none;
	color: var(--formFieldFontColor); font-size: var(--formFieldFontSize); padding: 5px 10px;
}
.formContent > .field > div select {
	width: 100%; height: 40px; background: transparent; box-shadow: none; border: none; outline: none;
	color: var(--formFieldFontColor); font-size: var(--formFieldFontSize); padding: 0 10px;
	transition: opacity 0.5s; opacity: 0;
}
.formContent > .field > div > .text {
	position: absolute; display: block; pointer-events: none;
	color: var(--formFieldTextColor); font-size: var(--formFieldFontSize); line-height: 40px; padding: 0 10px;
	transition: top 0.5s, left 0.5s; top: 0; left: 0;
}
.formContent > .field > div input:focus,
.formContent > .field > div input.notempty,
.formContent > .field > div select:focus,
.formContent > .field > div select.notempty {
	opacity: 1;
}
.formContent > .field > div input:focus ~ .text,
.formContent > .field > div input.notempty ~ .text,
.formContent > .field > div textarea:focus ~ .text,
.formContent > .field > div textarea.notempty ~ .text,
.formContent > .field > div select:focus ~ .text,
.formContent > .field > div select.notempty ~ .text {
	top: -35px;
	left: -10px;
}
.formContent > .field > div > .line {
	position: absolute; bottom: 0; display: block; z-index: -1;
	width: 100%; background: var(--formFieldBgColor); border-radius: 2px; pointer-events: none;
	transition: height 0.5s; height: 2px;
}
.formContent > .field > div input:focus ~ .line,
.formContent > .field > div input.notempty ~ .line,
.formContent > .field > div textarea:focus ~ .line,
.formContent > .field > div textarea.notempty ~ .line,
.formContent > .field > div select:focus ~ .line,
.formContent > .field > div select.notempty ~ .line {
	height: 100%;
}
.formContent > .field > div input[disabled] ~ .line,
.formContent > .field > div textarea[disabled] ~ .line,
.formContent > .field > div select[disabled] ~ .line {
	background: var(--formFieldBgColorDisabled);
}
.formContent > .field > div .required {
	color: var(--formFieldRequiredColor); margin: 0 0 0 5px;
}
.formContent > .field > div .required:before {
	content: "*";
}
.formContent > .field > div > .reminder {
	position: absolute; right: 5px; margin: 45px 0 0 0; font-size: var(--formReminderFontSize); line-height: 1em;
}
.formContent > .field > div .error {
	position: absolute; right: 0; top: -30px; color: var(--formErrorColor);
}
.formContent > .field > div .radioTitle {
	margin: 0 0 0 10px;
}
.formContent > .button {
	width: inherit; padding: 20px 0 0 10px; box-sizing: border-box;
	display: flex; flex-flow: row wrap; align-items: flex-start; justify-content: flex-start;
}
.formContent > .button > div {
	flex-grow: 1; width: 400px; height: 40px; background: var(--formButtonColor); border: var(--formButtonColor) 3px solid; border-radius: 2px; text-align: center;
	transition:background 0.3s ease-in;
}
.formContent > .button > div:hover {
	background: var(--formButtonColorActive);
}
.formContent > .button > div input {
	width: 100%; height: inherit; text-align: center; background: transparent; box-shadow: none; border: none; outline: none;
	color: var(--formButtonFontColor); font-size: var(--formButtonFontSize); padding: 0 0 10px 0;
	transition:color 0.3s ease-in;
}
.formContent > .button > div:hover input {
	color: var(--formButtonFontColorActive);
}
.formContent > .field > div.hr {
	margin: 0 10px 0 20px;
}
.formContent > .field > div > .preview {
	max-width: 100%; box-sizing: border-box; margin: 20px 0 0 0;
}
.formContent > .field > div > .preview > div > div {
	display: inline-block; position: relative; padding: 10px; margin: 0 10px 10px 0; border: #eee 1px solid;
}
.formContent > .field > div > .preview > div > div canvas {
	width: 100%; max-width: 400px; opacity: 0.5;
	transition:opacity 0.3s ease-in;
}
.formContent > .field > div > .preview > div > div.uploaded canvas {
	opacity: 1;
}
.formContent > .field > div > .preview > div > div .progress {
	width: 0; height: 5px; background: var(--progressBarColor); position: absolute; left: 0; bottom: 0; z-index: 6;
	transition:opacity 0.3s ease-in; opacity: 1;
}
.formContent > .field > div > .preview > div > div .progressBg {
	width: 100%; height: 5px; background: #eee; position: absolute; left: 0; bottom: 0; z-index: 5;
	transition:opacity 0.3s ease-in; opacity: 1;
}
.formContent > .field > div > .preview > div > div.uploaded .progress,
.formContent > .field > div > .preview > div > div.uploaded .progressBg {
	opacity: 0;
}
.formContent > .field > div > .preview > div > div .remove {
	position: absolute; right: 0; top: 0; z-index: 6; cursor: pointer; background: #fff; border-radius: 50%;
}
.formContent > .field > div > .preview > div > div .remove img {
	width: 30px; height: 30px;
}

.width50 {
	width: 45% !important;
}
.width100 {
	width: 100% !important;
}



@media only screen and (max-width:1600px) {
	.formContent > .field > div {
		width: 400px;
	}
}