.contactform {padding-bottom: 10vh;}

.contactform form {
/*    background-color: var(--purple-color);*/
/*    padding: 34px;*/
/*    border-radius: 10px;*/
}


.formgroup input, .formgroup textarea {
	padding: .8em 1em;
	width: 100%;
	font-weight: 400;
	font-size: 1em;
    line-height: 1.4;
    background-color: #fff;
    border-radius: var(--borderradius);
}
input::placeholder, textarea::placeholder {
	color: #626262 !important;
	font-weight: 400;
	opacity: .8;
}


.formgroup:has(input[type='checkbox']) {
    padding-top: .5em;
    padding-bottom: .5em;
    
}

.formgroup:last-child {
    margin-bottom: 0; padding-bottom: 0;
}

.formgroup input[type='checkbox'] {
    padding: 0;
    width: auto;
    font-size: 1.5em;
    min-width: 0px;
    display: none !important;
}

.formgroup input[type='checkbox'] + label {
    display: flex;
    align-items: center;
    font-size: 1em;
}
.formgroup input[type='checkbox'] + label::before {
    transform: translateX(.2em);
    width: .75em; height: .75em;
    content: '';
    border-radius: 50%;
    position: relative;
    display: inline-block;
    margin-right: 1.3em;
    outline: solid #000 .1em;
    outline-offset: .15em;
}
.formgroup input[type='checkbox']:checked + label::before {
    background-color: #000;
}

.formgroup {
    margin-bottom: 1em;
    display: flex;
    gap: 1em;
}

.formgroup p {
    padding-top: 0;
}



.formgroup-radios {
	padding-left: 0;
	border-bottom: 1px solid rgba(0,0,0,0.4);
}
.formgroup-radios p {
	font-size: 13.33333px;
	padding-top: 1em;
	margin-bottom: 0 !important;
}
.radios {
	display: flex;
	align-items: center;
	flex-direction: row;
	padding-bottom: 1.5em;
	margin-top: .5em;
}
.radios input[type=radio] {
	position: relative;
	display: inline-block;
	width: auto;
	flex-direction: row;
	align-content: center;
	justify-content: center;
	padding: .5rem;
	margin-right: 2em;
	border-bottom: none;
	margin-top: -2px;
	visibility: hidden;
}
.radios label {
	display: inline-block;
	font-size: 13.333px;
}
.radios input[type=radio]::before {
	content: '';
	width: 15px; height: 15px;
	border: 1px solid #000;
	display: block;
	position: relative;
	left: 4px;
	top: -2px;
	visibility: visible;
}
.radios input[type=radio]:checked::before {
	background-color: #000;
}
#contact_submit {
	padding: .6em 1.3em;
	margin-top: -.5em;
	border: 1px solid rgba(0,0,0,0.4);
	font-size: .80rem;
    line-height: 1.4;
    background-color: #000;
    border-radius: var(--borderradius);
    color: #fff;
}
#contact_submit:hover {
	cursor: pointer;
}
#contact_errors {
	font-size: 12px;
}
.errorsConainer {
	display: none;
}


#contact_form {
	transition: opacity ease .5s;
}
#contact_form.success {
	opacity: 0;
}
.susccessMessage {
	position: absolute;
	opacity: 0;
	visibility: hidden;
    display: block;
	transition: opacity ease .5s;
}
.susccessMessage h3 {
	margin-bottom: 0 !important;
}
.susccessMessage p {
	padding-top: .5em;
}
.susccessMessage.success {
	visibility: visible;
	opacity: 1;
	margin-top: 0;
}


#contact_submit {
	position: relative;
}
.contact_loading {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	right: -43px;
	top: -2px;
	opacity: 0;
	transition: all ease .2s;
}
.contact_loading.active {
	opacity: 1;
}
.contact_loading svg {

}

.req {
    color: red;
}

.formgroup input, .formgroup textarea {
		font-weight: 400 !important;
	}

.sendbtn2 {
    color: #fff;
    padding: .8em 1.5em;
    border: none;
    font-size: .85rem;
    line-height: 1.4;
    transition: background .15s ease;
    background-color: var(--color-purple);
    border-radius: var(--borderradius);
}
.sendbtn2 :hover {
    background-color: #000;
}

#contactform2 {
    opacity: 1;
    position: relative;
    transition: 0;
}
#contactform2.success {
    opacity: 0;
}