:root {

	/* Цвет (rgba) */
	--dsform-main-background: #fff;
	--dsform-main-color: #8bc34a;
	--dsform-main-color-rgb: 139, 195, 74;
	--dsform-main-color-contrast: #fff;

	/* Границы */
	--dsform-main-padding: 15px;
	--dsform-border-color: #dee2e6;

	/* Шрифт */
	--dsform-font-color: #333;
	--dsform-font-color-rgb: 51, 51, 51;
	--dsform-font-size: 14px;

	/* Блок ошибок */
	--dsform-error-color: #b21a41;
	--dsform-error-color-rgb: 178, 26, 65;
	--dsform-success-color: #8BC34A;
	--dsform-success-color-rgb: 139, 195, 74;

	/* Анимации */
	--dsform-main-transition: .15s ease-in-out;

}



/* ----------------------------- [ MODAL ] ----------------------------- */

.dspopup-modal-bg {
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	display: none;
	top: 0;
	left: 0;
	z-index: 100000;
}
.dspopup-modal {
	display: none;
	visibility: hidden;
	position: fixed;
	background: var(--dsform-main-background);
	z-index: 100001;
	width: 500px;
	border-radius: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
}
.dspopup-modal .scrollform {
	margin: 0px;
}
.close-dspopup-modal {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 24px;
	height: 24px;
	cursor: pointer;
}
.close-dspopup-modal:before, 
.close-dspopup-modal:after {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 2px;
	border-radius: 0px;
	background: var(--dsform-font-color);
	top: 50%;
	margin-top: -1px;
}
.close-dspopup-modal:before { transform: rotate(-45deg); }
.close-dspopup-modal:after { transform: rotate(45deg); }
.close-dspopup-modal:hover:before,
.close-dspopup-modal:hover:after {
	background: var(--dsform-error-color);
}



/* ----------------------------- [ MAIN FORM ] ----------------------------- */

.ds-form form,
.ds-form .report-message {
	padding: 15px;
	background: var(--dsform-main-background);
	color: var(--dsform-font-color);
	font-size: var(--dsform-font-size);
	font-family: sans-serif;
}
.ds-form:not(.dspopup-modal) form,
.ds-form:not(.dspopup-modal) .report-message {
	border: 1px solid var(--dsform-border-color);
	box-shadow: 0px 0px 10px var(--dsform-border-color);
	-moz-box-shadow: 0px 0px 10px var(--dsform-border-color);
	-webkit-box-shadow: 0px 0px 10px var(--dsform-border-color);
}



/* ----------------------------- [ HEADER ] ----------------------------- */

.ds-form form .form-head {
	margin: 0px -15px 15px;
	padding: 0px 15px 15px;
	font-size: 1.75em;
	line-height: 1.25;
	border-bottom: 2px solid var(--dsform-main-color);
}



/* ----------------------------- [ FIELDS ] ----------------------------- */

.ds-form div[class^="field-"] {
	font-size: var(--dsform-font-size);
}
.ds-form form div[class^="field-"]:not(.buttonform) {
	display: block;
	width: 100%;
	margin-bottom: 15px;
	position: relative;
	line-height: 1;
}
.ds-form form label {
	display: block;
	font-size: var(--dsform-font-size);
	color: rgba(var(--dsform-font-color-rgb), 0.75);
	margin-bottom: 0.5em;
	line-height: 1;
}
.ds-form form label .required {
	color: var(--dsform-error-color);
}
.ds-form form input:not([type]),
.ds-form form input[type="text"],
.ds-form form input[type="password"],
.ds-form form input[type="date"],
.ds-form form input[type="datetime"],
.ds-form form input[type="datetime-local"],
.ds-form form input[type="month"],
.ds-form form input[type="week"],
.ds-form form input[type="email"],
.ds-form form input[type="number"],
.ds-form form input[type="search"],
.ds-form form input[type="tel"],
.ds-form form input[type="time"],
.ds-form form input[type="url"],
.ds-form form input[type="color"],
.ds-form form select,
.ds-form form textarea {
	width: 100%;
	background: var(--dsform-main-background);
	border: 1px solid var(--dsform-border-color);
	padding: 0.5em 0.8em;
	height: 2.857em;
	font-size: var(--dsform-font-size);
	color: var(--dsform-font-color);
	line-height: 1.1;
	transition: border-color var(--dsform-main-transition), box-shadow var(--dsform-main-transition);
}
.ds-form form input:not([type]):focus,
.ds-form form input[type="text"]:focus,
.ds-form form input[type="password"]:focus,
.ds-form form input[type="date"]:focus,
.ds-form form input[type="datetime"]:focus,
.ds-form form input[type="datetime-local"]:focus,
.ds-form form input[type="month"]:focus,
.ds-form form input[type="week"]:focus,
.ds-form form input[type="email"]:focus,
.ds-form form input[type="number"]:focus,
.ds-form form input[type="search"]:focus,
.ds-form form input[type="tel"]:focus,
.ds-form form input[type="time"]:focus,
.ds-form form input[type="url"]:focus,
.ds-form form input[type="color"]:focus,
.ds-form form select:focus,
.ds-form form textarea:focus {
	background-color: var(--dsform-main-background);
	border-color: var(--dsform-main-color);
	outline: none;
	box-shadow: 0 0 0 0.25rem rgba(var(--dsform-main-color-rgb),.25);
}
.ds-form form input:not([type]).improper-value,
.ds-form form input[type="text"].improper-value,
.ds-form form input[type="password"].improper-value,
.ds-form form input[type="date"].improper-value,
.ds-form form input[type="datetime"].improper-value,
.ds-form form input[type="datetime-local"].improper-value,
.ds-form form input[type="month"].improper-value,
.ds-form form input[type="week"].improper-value,
.ds-form form input[type="email"].improper-value,
.ds-form form input[type="number"].improper-value,
.ds-form form input[type="search"].improper-value,
.ds-form form input[type="tel"].improper-value,
.ds-form form input[type="time"].improper-value,
.ds-form form input[type="url"].improper-value,
.ds-form form input[type="color"].improper-value,
.ds-form form select.improper-value,
.ds-form form textarea.improper-value {
	border-color: var(--dsform-error-color);
}
.ds-form form input:not([type]).improper-value:focus,
.ds-form form input[type="text"].improper-value:focus,
.ds-form form input[type="password"].improper-value:focus,
.ds-form form input[type="date"].improper-value:focus,
.ds-form form input[type="datetime"].improper-value:focus,
.ds-form form input[type="datetime-local"].improper-value:focus,
.ds-form form input[type="month"].improper-value:focus,
.ds-form form input[type="week"].improper-value:focus,
.ds-form form input[type="email"].improper-value:focus,
.ds-form form input[type="number"].improper-value:focus,
.ds-form form input[type="search"].improper-value:focus,
.ds-form form input[type="tel"].improper-value:focus,
.ds-form form input[type="time"].improper-value:focus,
.ds-form form input[type="url"].improper-value:focus,
.ds-form form input[type="color"].improper-value:focus,
.ds-form form select.improper-value:focus,
.ds-form form textarea.improper-value:focus {
	box-shadow: 0 0 0 0.25rem rgba(var(--dsform-error-color-rgb),.25);
}
.ds-form form select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right .75em center;
	background-size: 1em;
}
.ds-form form textarea {
	min-height: 6em;
}



/* -------------------------- [ FIELDS GROUP ] -------------------------- */

.ds-form form div[class^="field-"].field-group {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}
.ds-form form div[class^="field-"].field-group > label {
	width: 100%;
	margin-bottom: 0px;
}
.ds-form form div[class^="field-"].field-group > div[class^="field-"] {
	width: fit-content;
	margin: 0px;
	position: unset;
}
.ds-form form div[class^="field-"].field-group > div[class^="field-"] label {
	display: flex;
	margin: 0;
	padding: 0px;
	color: var(--dsform-font-color);
	border: 1px solid var(--dsform-border-color);
	margin: 0px;
	padding: 0.5em 0.8em;
	height: 2.857em;
	align-items: center;
	justify-content: center;
	text-align: center;
	cursor: pointer;
	transition: var(--dsform-main-transition);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}
.ds-form form div[class^="field-"].field-group > div[class^="field-"] label:hover {
	border-color: rgba(var(--dsform-main-color-rgb),.5);
	background-color: rgba(var(--dsform-main-color-rgb),.1);
}
.ds-form form div[class^="field-"].field-group > div[class^="field-"] input {
	display: none;
}
.ds-form form div[class^="field-"].field-group > div[class^="field-"] input.improper-value + label {
	border-color: var(--dsform-error-color);
}
.ds-form form div[class^="field-"].field-group > div[class^="field-"] input:checked + label {
	background-color: rgba(var(--dsform-main-color-rgb),.25);
	border-color: var(--dsform-main-color);
}
.ds-form form div[class^="field-"].field-group span.dsform-field-error {
	position: absolute;
	right: 0px;
	color: var(--dsform-error-color);
	font-size: 0.8em;
	top: 0.2em;
}



/* ------------------------- [ FLOATING LABEL ] ------------------------- */

.ds-form div[class^="field-"].field-floating-label {
	display: flex;
	flex-direction: column-reverse;
}
.ds-form div[class^="field-"].field-floating-label label {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 1em;
	margin-bottom: 0px;
	pointer-events: none;
	transition: var(--dsform-main-transition);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}
.ds-form div[class^="field-"].field-floating-label textarea + label {
	top: 22px;
}
.ds-form div[class^="field-"].field-floating-label input,
.ds-form div[class^="field-"].field-floating-label select {
	height: 3.857em;
	padding-top: 1.65em;
	padding-bottom: 0.5em;
}
.ds-form div[class^="field-"].field-floating-label textarea {
	padding-top: 1.85em;
}
.ds-form div[class^="field-"].field-floating-label *:focus ~ label,
.ds-form div[class^="field-"].field-floating-label *:not(:placeholder-shown) ~ label{
	top: 1em !important;
	transform: translateY(0px);
	font-size: 0.85em;
	opacity: 0.8;
}
.ds-form div[class^="field-"].field-floating-label .dsform-field-error {
	position: absolute;
	right: 0.3em;
	top: 0.3em;
	font-size: 0.8em;
	color: var(--dsform-error-color);
}



/* ----------------------------- [ SUBMIT ] ----------------------------- */

.ds-form form input[type="submit"],
.ds-form form button[type="submit"] {
	width: auto;
	border: 1px solid var(--dsform-main-color);
	padding: 0.65em 2em;
	font-size: var(--dsform-font-size);
	background: var(--dsform-main-color);
	color: var(--dsform-main-color-contrast);
	cursor: pointer;
	transition: var(--dsform-main-transition);
}

.ds-form form input[type="submit"]:hover,
.ds-form form input[type="submit"]:focus,
.ds-form form button[type="submit"]:hover
.ds-form form button[type="submit"]:focus {
	background: var(--dsform-main-background);
	color: var(--dsform-font-color);
}



/* ---------------------------- [ CAPTCHA ] ----------------------------- */
.ds-form form .smart-captcha {
	margin-bottom: 15px;
	max-width: 320px;
}
.ds-form form .field-smartcaptcha .dsform-field-error.named_as_smart-token {
	font-size: 1em;
	color: var(--dsform-error-color);
	display: block;
	margin-top: -10px;
}
/*.ds-form form .field-captcha-row {
    display: flex !important;
    gap: 0px;
    align-items: center;
}
.ds-form form .field-captcha-row img {
    border: 1px solid var(--dsform-border-color);
    border-right: 0px;
    height: 2.857em;
}
.ds-form form .field-captcha-row input {
    max-width: 12em;
}*/
.ds-form form .field-captcha-row { display: flex !important; flex-direction: column; align-items: flex-start;}
.ds-form form .field-captcha-row img { margin-bottom: 15px; }
.ds-form form .field-captcha-row input { max-width: 200px; }



/* ----------------------------- [ ERRORS ] ----------------------------- */

.ds-form form .error_form { 
	margin: 1em 0 .5em;
	color: var(--dsform-error-color);
}
.ds-form form .error-form { 
	margin-bottom: 0px;
}



/* ----------------------------- [ REPORT ] ----------------------------- */

.report-message {
	padding: 30px 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.report-message--icon {
	width: 50px;
	height: 50px;
	margin: auto;
}
.report-message--icon.icon-error svg path { fill: var(--dsform-error-color); }
.report-message--icon.icon-success svg circle { fill: var(--dsform-success-color); }
.report-message--icon.icon-success svg path { fill: var(--dsform-main-background); }
.report-message--title {
	margin-top: 12px;
	font-size: 1.8em;
	font-weight: bold;
}
.report-message--descr { text-align: center; }
.report-message--descr > p { margin: 0.4em 0; }
.report-message--descr > p a { color: var(--dsform-main-color); }
.report-message--descr > p:last-child { margin-bottom: 0px; }



/* --------------------------- [ FILE INPUT ] --------------------------- */

.ds-form form .field-file {}
.ds-form form .field-file label {}
.ds-form form .field-file label input { display: none; }
.ds-form form .field-file label .dsform-field-error {
	position: absolute;
	right: 0px;
	color: var(--dsform-error-color);
	font-size: 0.8em;
}