form .btn-cta
{
	width: 100%;
}

.formMessage
{
	min-height: 20px;
}

.select-wrapper
{
	position: relative;
	width: 100%;
}

.select-wrapper select
{
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;

	padding-right: 50px;
	/* space for arrow */
}

/* Custom arrow */
.select-wrapper::after
{
	content: "▼";
	position: absolute;
	top: calc(50% - 5px);
	right: 20px;
	transform: translateY(-50%);
	pointer-events: none;
	font-size: 12px;
}

select
{
	margin-bottom: 12px;
	border: 1px solid var(--bs-secondary);
	border-radius: 12px;
	padding: 15px;
	font-weight: 300;
	font-size: 18px;
	background: var(--bs-secondary);
	border: 1px solid transparent;
	font-style: normal;
	width: 100%;
	outline: 0;
	color: #ddd;
	cursor: pointer;
}

select:hover,
select:focus
{
	border: 1px solid var(--bs-primary);
}

option,
input[type=author],
input[type=password],
input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=date],
input[type=number],
input[type=search]
{
	margin-bottom: 12px;
	border: 1px solid var(--bs-secondary);
	border-radius: 12px;
	padding: 16px;
	font-size: 18px;
	background: var(--bs-secondary);
	font-family: var(--bs-font-primary);
	font-style: normal;
	font-weight: 300;
	width: 100%;
	outline: 0;
	color: #ddd;
	border: 1px solid transparent;
}

option:hover,
option:focus,
input[type=author]:hover,
input[type=author]:focus,
input[type=password]:hover,
input[type=password]:focus,
input[type=text]:hover,
input[type=text]:focus,
input[type=email]:hover,
input[type=email]:focus,
input[type=tel]:hover,
input[type=tel]:focus,
input[type=url]:hover,
input[type=url]:focus,
input[type=date]:hover,
input[type=date]:focus,
input[type=number]:hover,
input[type=number]:focus,
input[type=search]:hover,
input[type=search]:focus
{
	border: 1px solid var(--bs-primary);
}

.form-control,
textarea
{
	margin-bottom: 12px;
	border: 1px solid var(--bs-secondary);
	border-radius: 12px;
	padding: 16px;
	font-weight: 300;
	font-size: 18px;
	background: var(--bs-secondary);
	font-style: normal;
	width: 100%;
	outline: 0;
	color: #d8d8d8;
	border: 1px solid transparent
}

.form-control:hover,
.form-control:focus,
textarea:hover,
textarea:focus
{
	border: 1px solid var(--bs-primary);
}

textarea:hover
{
	outline: 0;
	box-shadow: none;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
	outline: none;
	background: var(--bs-secondary)
}

textarea:focus
{
	outline: 0;
	box-shadow: none;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
	box-shadow: none;
	outline: none;
	background: var(--bs-secondary);
}

::placeholder
{
	opacity: 1;
	color: #d8d8d8;
	font-weight: 300 !important;
	font-size: 18px !important
}

input:focus::placeholder,
select:focus::placeholder,
textarea:focus::placeholder
{
	opacity: 0;
	color: transparent;
}
















.form-error
{
	color: #dc2626;
	font-size: 0.85rem;
	margin-top: 4px;
}

.has-error input,
.has-error textarea,
.has-error select
{
	border-color: #dc2626;
}

.spinner
{
	display: none;
	width: 18px;
	height: 18px;
	border: 2px solid #fff;
	border-top: 2px solid transparent;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	margin-left: 8px;
	vertical-align: middle;
}

@keyframes spin
{
	to
	{
		transform: rotate(360deg);
	}
}

button.loading .spinner
{
	display: inline-block;
}

button.loading
{
	opacity: 0.7;
	cursor: not-allowed;
}