/*
		<div class="--cidemos-flex">
			<div class="--cidemos-flexC">
			{foreach $PAGE->user->col1->html AS $content}
				{$content}
			{/foreach}
			</div>
		</div>
*/

:root {
	--form-input-height: 40px;
	--form-input-font-size: 16px;
	--form-input-line-height: 22px;
	--form-input-background: #FFF;
	--form-input-color: #666;
	--form-input-border-width: 1px;
	--form-input-border-color: #61AD2D;
	--form-input-border-radius: 5px;
	--form-input-checkbox-height: 32px;
	--form-input-checkbox-color-checked: #FFF;
	--form-input-checkbox-background-checked: #61AD2D;
	--form-input-checkbox-border-checked: #61AD2D;
	--form-link-color: #61AD2D;
	--form-headline-color: #61AD2D;
	--form-input-loader-color: #61AD2D;

	--form-input-background-not-valid: rgb(245, 218, 218);
	--form-input-border-not-valid: rgb(196, 60, 60);
}

@keyframes rotation {
	0% {
	transform: rotate(0deg);
	}
	100% {
	transform: rotate(360deg);
	}
} 

.--cidemos-form-container { 
	position: relative;
}

.--cidemos-form-container .--cidemos-form-loader { 
	display: none;
	justify-content: center;
	align-items: center;
	position: absolute;
	z-index: 10;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
}

.--cidemos-form-container .--cidemos-form-loader > div .loader {
	width: 48px;
	height: 48px;
	border: 5px solid;
	border-color: var(--form-input-loader-color) transparent;
	border-radius: 50%;
	display: inline-block;
	box-sizing: border-box;
	animation: rotation 1s linear infinite;
} 

.--cidemos-form-container.loading .--cidemos-form-loader {
	display: flex;
}

.--cidemos-form-container .not-selectable {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;					
}

.--cidemos-form-container .--cidemos-form-field { 
		position: relative;
}

.--cidemos-form-container .--cidemos-form-field h3 {
	color: var(--form-headline-color);
	font-size: 1.4rem;
	margin: 0px;
}

.--cidemos-form-container .--cidemos-form-field .--form-input label {
	width: 100%;
	margin-bottom: 3px;
}

.--cidemos-form-container .--cidemos-form-field .--form-input label > span.required {
	position: relative;
	padding-left: 5px;
}

.--cidemos-form-container .--cidemos-form-field .--form-input label > span.required::after {
	content: '*';
}

.--cidemos-form-container .--cidemos-form-field .--form-input.checkbox .--form-input,
.--cidemos-form-container .--cidemos-form-field .--form-input.radio .--form-input {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
}

.--cidemos-form-container .--cidemos-form-field .--form-input.checkbox .--form-input .checkboxC,
.--cidemos-form-container .--cidemos-form-field .--form-input.radio .--form-input .checkboxC {
	position: relative;
	display: flex;
	align-items: flex-start;
	min-height: var(--form-input-checkbox-height); 
	/* margin: 3px 20px 3px 0px; width: auto; */
	margin: 5px 0px 5px 0px; width: 100%;
}

.--cidemos-form-container textarea, 
.--cidemos-form-container select, 
.--cidemos-form-container input[type=text], 
.--cidemos-form-container input[type=email], 
.--cidemos-form-container input[type=password] {
	font-family: 'opensans-regular', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	margin: 0px;
	padding-top: calc((var(--form-input-height) - var(--form-input-line-height)) / 2);
	padding-right: calc((var(--form-input-height) - var(--form-input-line-height)) / 2);
	padding-bottom: calc((var(--form-input-height) - var(--form-input-line-height)) / 2);
	padding-left: calc((var(--form-input-height) - var(--form-input-line-height)) / 2);
	border: none;
	outline: none;
	appearance: none;
	border: var(--form-input-border-width) solid var(--form-input-border-color);
	border-radius: var(--form-input-border-radius);
	box-sizing: border-box;
	font-size: var(--form-input-font-size);
	line-height: var(--form-input-line-height);
	height: var(--form-input-height);
	width: 100%;	
	background-color: var(--form-input-background);
	color: var(--form-input-color);
	resize: none;
	transition: border 0.4s, background-color 0.4s;
}

.--cidemos-form-container textarea::placeholder, 
.--cidemos-form-container select::placeholder, 
.--cidemos-form-container input[type=text]::placeholder, 
.--cidemos-form-container input[type=email]::placeholder, 
.--cidemos-form-container input[type=password]::placeholder {
	color: #CCC; opacity: 1;
}

.--cidemos-form-container textarea {
	min-height: 200px;
}

.--cidemos-form-container select {
    background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
	background-size: auto 60%;
	background-position: right 10px center;
	background-repeat: no-repeat;
}

.--cidemos-form-container button[type=submit] {
	width: auto;
	min-width: 200px;
}

.--cidemos-form-container .checkboxC input[type="checkbox"], 
.--cidemos-form-container .checkboxC input[type="radio"] {
	position: absolute;
    z-index: -1;
    left: 0px;
    top: 0px;
    z-index: 0;
    width: 0px;
    height: 0px;
    -webkit-appearance: none;
    appearance: none;
}

.--cidemos-form-container .checkboxC input[type="checkbox"] + label,
.--cidemos-form-container .checkboxC input[type="radio"] + label { 
	display: block;
	padding-top: calc((var(--form-input-checkbox-height) - var(--form-input-line-height)) / 2);
	padding-right: calc(var(--form-input-checkbox-height) + (var(--form-input-line-height) / 2));
	padding-left: calc(var(--form-input-checkbox-height) + (var(--form-input-line-height) / 2));
	font-size: var(--form-input-font-size);
	line-height: var(--form-input-line-height);
}
.--cidemos-form-container .checkboxC input[type="checkbox"] + label a,
.--cidemos-form-container .checkboxC input[type="radio"] + label a { 
	color: var(--form-link-color);
	text-decoration: none;
}
.--cidemos-form-container .checkboxC input[type="checkbox"] + label a:hover,
.--cidemos-form-container .checkboxC input[type="radio"] + label a:hover { 
	text-decoration: underline;
}
.--cidemos-form-container .checkboxC input[type="checkbox"] + label::before { 
    content: "";
    position: absolute;
    z-index: 2;
    top: 0px;
    left: 0px;
    transition: all .4s;	
	width: var(--form-input-checkbox-height); 
	height: var(--form-input-checkbox-height); 
	border-radius: var(--form-input-border-radius); 
	border: var(--form-input-border-width) solid var(--form-input-border-color);
	background-color: var(--form-input-background); 
}
.--cidemos-form-container .checkboxC input[type="checkbox"] + label::after { 
    content: "";
    position: absolute;
    z-index: 2;
    border-left: 2px solid;
    border-bottom: 2px solid;
    transform: rotate(-50deg);
    opacity: 0;
    transition: all .4s;	
	top: calc(var(--form-input-checkbox-height) * 0.20);
	left: calc(var(--form-input-checkbox-height) * 0.20);
	height: calc(var(--form-input-checkbox-height) * 0.4); 
	width: calc(var(--form-input-checkbox-height) * 0.6);
	border-color: var(--form-input-checkbox-color-checked);
}
.--cidemos-form-container .checkboxC input[type="checkbox"]:checked + label::before {
	background-color: var(--form-input-checkbox-background-checked); 
	border-color: var(--form-input-checkbox-border-checked);
}
.--cidemos-form-container .checkboxC input[type="checkbox"]:checked + label::after {
	opacity: 1;
}

.--cidemos-form-container .checkboxC input[type="radio"] + label::before { 
    content: "";
    position: absolute;
    z-index: 2;
    top: 0px;
    left: 0px;
    transition: all .4s;	
	width: var(--form-input-checkbox-height); 
	height: var(--form-input-checkbox-height); 
	border-radius: calc(var(--form-input-checkbox-height) / 2); 
	border: var(--form-input-border-width) solid var(--form-input-border-color);
	background-color: var(--form-input-background); 
}
.--cidemos-form-container .checkboxC input[type="radio"] + label::after { 
    content: "";
    position: absolute;
    z-index: 2;
    opacity: 0;
    transition: all .4s;	
	top: calc(var(--form-input-checkbox-height) * 0.20 + 1px);
	left: calc(var(--form-input-checkbox-height) * 0.20 + 1px);
	height: calc(var(--form-input-checkbox-height) * 0.55); 
	width: calc(var(--form-input-checkbox-height) * 0.55);
	background: var(--form-input-checkbox-color-checked);
	border-radius: 100%;
}
.--cidemos-form-container .checkboxC input[type="radio"]:checked + label::before {
	background-color: var(--form-input-checkbox-background-checked); 
	border-color: var(--form-input-checkbox-border-checked);
}
.--cidemos-form-container .checkboxC input[type="radio"]:checked + label::after {
	opacity: 1;
}

.--cidemos-form-container .--cidemos-form-field.not-valid input,
.--cidemos-form-container .--cidemos-form-field.not-valid textarea,
.--cidemos-form-container .--cidemos-form-field.not-valid select {
	border-color: var(--form-input-border-not-valid);
	background-color: var(--form-input-background-not-valid);
}

.--cidemos-form-container .--cidemos-form-field.not-valid .checkboxC input[type="checkbox"] + label::before,
.--cidemos-form-container .--cidemos-form-field.not-valid .checkboxC input[type="radio"] + label::before { 
	border-color: var(--form-input-border-not-valid);
	background-color: var(--form-input-background-not-valid);
}