.kf-form form {
	width: 100%;
}

.kf-form__title {
    font-size: var(--wp--preset--font-size--x-32);
    text-align: center;
    margin-bottom: .5em;
}

.kf-form input,
.kf-form select,
.kf-form textarea,
.kf-form button {
	box-sizing: border-box;
	max-width: 100%;
	font: inherit;
}

.kf-form.kf-form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
.kf-form.kf-form.kf-form.kf-form.kf-form.kf-form select,
.kf-form.kf-form.kf-form.kf-form.kf-form.kf-form textarea {
	width: 100%;
}

.kf-form input[type=text],
.kf-form input[type=email],
.kf-form input[type=tel],
.kf-form input[type=url],
.kf-form select,
.kf-form textarea {
	background-color: #FFFFFF33;
	color: #fff;
	border-radius: 10px;
	border: none;
	padding: 15px 20px;

	position: relative;

	box-shadow: inset 4px 4px 23px 4px #1A182555;
}

.kf-form input[type=text]::placeholder,
.kf-form input[type=email]::placeholder,
.kf-form input[type=tel]::placeholder,
.kf-form input[type=url]::placeholder{
  color: #FFFFFF;
  opacity: 1;
}

.kf-form input[type=submit] {
	font-family: "degular-variable", sans-serif;
	/* font-weight: 500; */
	font-size: 16px;
	line-height: 100%;
	padding-top: 18px;
	padding-right: 24px;
	padding-bottom: 18px;
	padding-left: 24px;
	border-radius: 50vw;

	--c-light: #ffffff8c;
	--c-dark: #ffffff24;

	--glass-reflex-dark: 1;
	--glass-reflex-light: 1;
	
	--saturation: 150%;

	background-color: #ffffff18;
	backdrop-filter: blur(8px) saturate(var(--saturation));
	-webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
	box-shadow: inset 0 0 0 1px 
			color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent), inset 1.8px 3px 0px -2px 
			color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent), inset -2px -2px 0px -2px 
			color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent), inset -3px -8px 1px -6px 
			color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent), inset -0.3px -1px 4px 0px 
			color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent), inset -1.5px 2.5px 0px -2px 
			color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 0px 3px 4px -2px 
			color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 2px -6.5px 1px -4px 
			color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 1px 5px 0px 
			color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 6px 16px 0px 
			color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
	transition: background-color 400ms cubic-bezier(1, 0.0, 0.4, 1), box-shadow 400ms cubic-bezier(1, 0.0, 0.4, 1);

	color: #fff;
	cursor: pointer;

	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;

	margin: 0 auto;
    display: block;

	margin-top: 8px;
}

.kf-form input[type=submit]:hover,
.kf-form input[type=submit]:active {
	--c-light: #ffffffa5;
	--c-dark: #ffffff3d;
	background-color: #ffffff35;
}


.kf-form .hbspt-form label {
	display: block;
	margin-bottom: .4em;
}


.kf-form .hbspt-form fieldset {
	max-width: 100%;
}


.kf-form .hbspt-form fieldset.form-columns-1 .hs-form-field,
.kf-form .hbspt-form fieldset.form-columns-2 .hs-form-field {
	width: auto;
    float: none;

	margin-top: 0;
	margin-bottom: 20px;
}

.kf-form .hbspt-form fieldset.form-columns-1 .hs-input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]) {
	width: 100%;
}


.kf-form .hbspt-form fieldset.form-columns-2 {
	display: flex;
	gap: 0px 20px;
	max-width: none;
}

.kf-form .hbspt-form fieldset.form-columns-2 > * {
	flex: 1;
}

.kf-form .hbspt-form fieldset.form-columns-1 .input,
.kf-form .hbspt-form fieldset.form-columns-2 .input {
	margin: 0;
}

.kf-form .hbspt-form .input {
	position: relative;
	border-radius: 10px;
}


.kf-form .hbspt-form .input:has(input[type=text], input[type=email], input[type=tel], input[type=url], select, textarea)::before {
	content: '';
	position: absolute;
	inset: 0px;
   
	border-radius: inherit;
	/* this is the border width */
	padding: 2px;

	background: linear-gradient(180deg, #5F61FF 0%, rgba(95, 97, 255, 0) 100%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
  
	pointer-events: none;
}


.kf-form .hbspt-form .hs-fieldtype-select .input {
	position: relative;
}

.kf-form .hbspt-form .hs-fieldtype-select .input select {
  -webkit-appearance: none;  /* Chrome, Safari, newer Edge */
  -moz-appearance: none;     /* Firefox */
  appearance: none;          /* Standard property */
}
.kf-form .hbspt-form .hs-fieldtype-select .input::after {
    display: inline-block;
    content: "";
    width: 0;
    height: 0;
    right: 20px;
    top: 23px;
    transition: 150ms ease-in-out;
    transform: rotate(45deg);
    border: solid #fff;
    border-width: 0 2px 2px 0;
    padding: 2.3px;
    position: absolute;
}

.kf-form .hbspt-form .input :is(input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=url]:focus, select:focus, textarea:focus) {
	outline: none;
}

.kf-form .hbspt-form .input:has(input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=url]:focus, select:focus, textarea:focus)::before {
	background: linear-gradient(180deg, #95FFEC 0%, rgba(40, 185, 5, 0) 100%);
}

.kf-form .hbspt-form ul.inputs-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kf-form .hbspt-form ul.hs-error-msgs {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kf-form .hbspt-form .hs-error-msg {
	color: #d50000;
	font-size: 12px;
	/* letter-spacing: .05em; */
    text-transform: uppercase;
}

.kf-form .hbspt-form [type="radio"]:checked,
.kf-form .hbspt-form [type="radio"]:not(:checked),
.kf-form .hbspt-form [type="checkbox"]:checked,
.kf-form .hbspt-form [type="checkbox"]:not(:checked) {
                  position: absolute;
                  left: -9999px;
            }
.kf-form .hbspt-form [type="radio"]:checked + span,
.kf-form .hbspt-form [type="radio"]:not(:checked) + span
            {
                  position: relative;
                  padding-left: 30px;
                  cursor: pointer;
                  line-height: 60px;
                  display: inline-block;
            }

.kf-form .hbspt-form [type="checkbox"]:checked + span,
.kf-form .hbspt-form [type="checkbox"]:not(:checked) + span{
                  position: relative;
                  padding-left: 30px !important;
                  cursor: pointer;
                  display: inline-block;
                  margin: 7px 0px;
                  text-transform: inherit !important;
            }
.kf-form .hbspt-form [type="radio"]:checked + span:before,
.kf-form .hbspt-form [type="radio"]:not(:checked) + span:before,
.kf-form .hbspt-form [type="checkbox"]:checked + span:before,
.kf-form .hbspt-form [type="checkbox"]:not(:checked) + span:before{
                  content: '';
                  position: absolute;
                  left: 0;
                  top: 0;
                  width: 20px;
                  height: 20px;
                  /* background: #fff; */
                  border: 1px solid #ccc;
                  border-radius: 4px;
            }
.kf-form .hbspt-form [type="radio"]:not(:checked) + span:after {
                  content: '';
                  width: 32px;
                  height: 32px;
                  background: #fff !important;
                  position: absolute;
                  top: 14px;
                  left: 14px;
                  border-radius: 100%;	
            }
.kf-form .hbspt-form [type="checkbox"]:not(:checked) + span:after {
                  content: '';
                  position: absolute;
            }
.kf-form .hbspt-form [type="radio"]:checked + span:after {
                  content: '';
                  width: 8px;
                  height: 8px;
                  position: absolute;
                  border-radius: 100%;
            }
.kf-form .hbspt-form [type="checkbox"]:checked + span:after {
                  content: '';
                  width: 20px;
                  height: 20px;
                  position: absolute;
                  top: 0;
                  left: 0;
				  border-radius: 4px;
                  background: #fff url(/wp-content/themes/keyfactor/library/images/i-check.png) no-repeat center center;
                  background-size: 90%;
                  text-align: center;
            }

.kf-form .hbspt-form [type="radio"]:not(:checked) + span:after, 
.kf-form .hbspt-form [type="radio"]:checked + span:after,
.kf-form .hbspt-form [type="checkbox"]:not(:checked) + span:after, 
.kf-form .hbspt-form [type="checkbox"]:checked + span:after {
                  opacity: 1;
                  -webkit-transform: scale(1);
                  transform: scale(1);
            }



.kf-form--style-1 {
}


.kf-form--style-1 input[type=text]::placeholder,
.kf-form--style-1 input[type=email]::placeholder,
.kf-form--style-1 input[type=tel]::placeholder,
.kf-form--style-1 input[type=url]::placeholder{
  color: inherit;
  opacity: 1;
}

.kf-form--style-1 input[type=text],
.kf-form--style-1 input[type=email],
.kf-form--style-1 input[type=tel],
.kf-form--style-1 input[type=url],
.kf-form--style-1 select,
.kf-form--style-1 textarea {
	background-color: #FFFFFF99;
	color: inherit;
}


.kf-form--style-1 .hbspt-form .input:has(input[type=text], input[type=email], input[type=tel], input[type=url], select, textarea)::before {
	/* this is the border width */
	padding: 1px;

	background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
}

.kf-form--style-1 .hbspt-form .input:has(input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=url]:focus, select:focus, textarea:focus) {
	background-color: #FFFFFF77;
}

.kf-form--style-1 .hbspt-form [type="radio"]:checked + span:before,
.kf-form--style-1 .hbspt-form [type="radio"]:not(:checked) + span:before,
.kf-form--style-1 .hbspt-form [type="checkbox"]:checked + span:before,
.kf-form--style-1 .hbspt-form [type="checkbox"]:not(:checked) + span:before {
	background: #FFFFFF99;
}

.kf-form--style-1 input[type=submit] {
	font-family: "degular-variable", sans-serif;
	/* font-weight: 500; */
	font-size: 16px;
	line-height: 100%;
	padding-top: 18px;
	padding-right: 24px;
	padding-bottom: 18px;
	padding-left: 24px;
	border-radius: 50vw;

	background-color: #1A1A1A;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: none;

	color: #fff;
}

.kf-form--style-1 input[type=submit]:hover,
.kf-form--style-1 input[type=submit]:active {
	background-color: #5f61ff;
}

.kf-form--style-3 {
	background: transparent;
}

.kf-form--style-3::before {
	display: none;
}

.kf-form--style-3 .hbspt-form .input:has(input[type=text], input[type=email], input[type=tel], input[type=url], select, textarea)::before {
	padding: 1px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%);
}

.kf-form--style-3 input[type=submit] {
	width: 100%;
	background-color: #5F61FF;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: none;
	color: #fff;

	padding: 18px 24px;
	margin-top: 12px;
}

.kf-form--style-3 input[type=submit]:hover,
.kf-form--style-3 input[type=submit]:active {
	background-color: #5f61ff;
}

.kf-form--style-3 {
	color: inherit;
	margin-top: auto;
}

@media (max-width: 1020px) {
	.kf-form__title {
		text-align: center;
	}
}