input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea,
input[type="file"],
.select2-container .select2-selection,
.woocommerce a.selectBox.selectBox-dropdown {
	color: $color__text-input;
	border-color: $color__border-input;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-radius: var(--proteo-forms_input_borde_radius, 0);
	padding: 10px;
	font-family: inherit;
	min-height: 35px;
	height: auto;
	max-width: 100%;
	transition: border-color ease 0.3s;
	background-color: #ffffff;

	&:focus {
		outline-color: transparent;
		color: $color__text-input-focus;
		border-color: var(--proteo-main_color_shade, $color__accent);
		outline: none;
		box-shadow: 0 0 2px var(--proteo-main_color_shade, $color__accent);
	}

	& + .separator {
		height: 2px;
		width: 100%;
		background: $color__accent;
		display: block;
		transform: scaleX(0) translateY(-2px);
		transform-origin: 50%;
		opacity: 0;
		transition: all 0.15s ease;
	}

	&:focus + .separator {
		transform: scaleX(1) translateY(-2px);
		opacity: 1;
	}
}

input::-webkit-input-placeholder {
	color: rgba(204, 204, 204, 0.8);
	font-size: 0.8em;
}

input:-moz-placeholder {
	color: rgba(204, 204, 204, 0.8);
	font-size: 0.8em;
}

input::-moz-placeholder {
	color: rgba(204, 204, 204, 0.8);
	font-size: 0.8em;
}

input:-ms-input-placeholder {
	color: rgba(204, 204, 204, 0.8);
	font-size: 0.8em;
}

.woocommerce-invalid {
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="password"],
	input[type="search"],
	input[type="number"],
	input[type="tel"],
	input[type="range"],
	input[type="date"],
	input[type="month"],
	input[type="week"],
	input[type="time"],
	input[type="datetime"],
	input[type="datetime-local"],
	input[type="color"],
	textarea {
		&:focus {
			border-color: #f44336;
			box-shadow: none;
			outline: none;
		}
	}

	input::-webkit-input-placeholder {
		color: rgba(244, 67, 54, 0.5);
	}

	input:-moz-placeholder {
		color: rgba(244, 67, 54, 0.5);
	}

	input::-moz-placeholder {
		color: rgba(244, 67, 54, 0.5);
	}

	input:-ms-input-placeholder {
		color: rgba(244, 67, 54, 0.5);
	}
}

select {
	border-color: $color__border-input;
	border-width: 0 0 1px 0;
	border-style: solid;
	border-radius: 0;
}

textarea {
	border-color: $color__border-input;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	width: 100%;
	background-color: #ffffff;
}

.comment-form-rating {
	select,
	.select2 {
		display: none;
	}
}

/**
Checkboxes
 */

span.checkboxbutton {
	position: relative;

	input[type="checkbox"] {
		opacity: 0;
		//top: 5px;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 23px;
		cursor: pointer;
		width: 23px;
	}

	&:before {
		content: "";
		display: inline-block;
		width: 23px;
		height: 23px;
		border: 1px solid #707070;
		background: #ffffff;
		margin-right: 10px;
		text-align: center;
		line-height: 23px;
		font-size: 17px;
		vertical-align: middle;
		cursor: pointer;
		color: var(--proteo-main_color_shade, $color__accent);
		margin-bottom: 5px;
		transition: background-color ease 0.3s;
	}

	&.checked:before {
		content: "";
		background: var(--proteo-main_color_shade, $color__accent);
		background-image: url("img/whitecheck.svg") !important;
		color: #ffffff;
		background-repeat: no-repeat !important;
		background-position: center !important;
		border-color: var(--proteo-main_color_shade, $color__accent);
	}
}

/**
Radio buttons
 */

span.radiobutton {
	position: relative;

	input[type="radio"] {
		opacity: 0;
		//top: 5px;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 23px;
		cursor: pointer;
		width: 23px;
	}

	&:before {
		content: "";
		display: inline-block;
		width: 18px;
		height: 18px;
		border-radius: 18px;
		border: 1px solid #707070;
		background: #ffffff;
		margin-right: 10px;
		text-align: center;
		line-height: 18px;
		font-size: 18px;
		vertical-align: middle;
		cursor: pointer;
		padding: 2px;
		background-clip: content-box;
		margin-bottom: 5px;
	}

	&.checked:before {
		background: var(--proteo-main_color_shade, $color__accent);
		background-clip: content-box !important;
	}
}

/**
File inputs
 */
input[type="file"] {
	padding: 2px;
	font-size: 0.75em;
	position: relative;
}

input[type="file"]::-webkit-file-upload-button {
	background-color: var(--proteo-button_1_bg_color, $color__background-button);
	border: none;
	color: #ffffff;
	text-transform: uppercase;
	cursor: pointer;
	transition: all ease 0.3s;
	font-size: 0.9375rem;
	padding: 7px 10px;
	outline: none;
	min-height: 40px;
	font-weight: 600;
	margin: 0;
}

input[type="file"]::-ms-browse {
	background-color: var(--proteo-button_1_bg_color, $color__background-button);
	border: none;
	color: #ffffff;
	text-transform: uppercase;
	cursor: pointer;
	transition: all ease 0.3s;
	font-size: 0.9375rem;
	padding: 7px 10px;
	outline: none;
	min-height: 40px;
	font-weight: 600;
	margin: 0;
}

input[type="file"]:hover::-webkit-file-upload-button {
	background-color: var(--proteo-button_1_bg_hover_color, $color__link-hover);
}

/**
Date fields
 */
input.hasDatepicker {
	background-image: url(img/calendar.svg);
	background-position: calc(100% - 15px) 50%;
	background-repeat: no-repeat;
	background-size: 20px;
}

#ui-datepicker-div {
	background: #ffffff;
	border-radius: 0;
	color: inherit;
	font-family: inherit;
	box-shadow: 3px 0 15px rgba(0, 0, 0, 0.15);
	border: none;

	.ui-datepicker-header {
		border: none;
		background: none;
		color: inherit;
		padding: 0;
		margin: 10px 0;

		a {
			color: inherit;
			text-align: center;
			opacity: 0.8;
			top: 2px;
			text-decoration: none;

			&.ui-state-hover,
			&.ui-state-focus {
				border: none;
				background: none;
				opacity: 1;
			}

			&:hover {
				color: $color__link-hover;
				opacity: 1;
			}

			&.ui-state-disabled {
				display: none;
			}

			&[data-handler="prev"] {
				left: 2px;

				&:before {
					content: "\e875";
					font-family: Linearicons-Free;
					font-family: Linearicons-Free;
					speak: none;
					font-style: normal;
					font-variant: normal;
					text-transform: none;
					line-height: 1;
					cursor: pointer;
					font-size: 12px;
				}

				span {
					display: none;
				}
			}

			&[data-handler="next"] {
				right: 2px;

				&:before {
					content: "\e876";
					font-family: Linearicons-Free;
					font-family: Linearicons-Free;
					speak: none;
					font-style: normal;
					font-variant: normal;
					text-transform: none;
					line-height: 1;
					cursor: pointer;
					font-size: 12px;
				}

				span {
					display: none;
				}
			}
		}
	}

	.ui-datepicker-calendar {
		tbody {
			td {
				a {
					text-decoration: none;
					transition: all ease 0.3s;
					background: #f7f7f7;
					border: 1px solid #efefef;
					color: #616161;
					font-weight: 600;
					font-size: 14px;

					&.ui-datepicker-unselectable {
						background: #f7f7f7;
						border: 1px solid #efefef;
						color: #c5c5c5;
					}

					&.ui-state-hover {
						color: var(--proteo-main_color_shade, $color__accent);
						background: #ffffff;
						border: 1px solid var(--proteo-main_color_shade, $color__accent);
						&:not(.ui-state-active) {
							color: var(--proteo-main_color_shade, $color__accent);
						}
					}

					&.ui-state-active {
						color: #ffffff;
						background: var(--proteo-main_color_shade, $color__accent);
						border: 1px solid var(--proteo-main_color_shade, $color__accent);

						&:hover {
							color: #ffffff;
						}
					}

					&.ui-state-highlight {
						color: var(--proteo-main_color_shade, $color__accent);
						background: #ffffff;
						border: 1px solid var(--proteo-main_color_shade, $color__accent);
					}
				}

				&.ui-state-disabled {
					opacity: 0.5;
				}
			}
		}
	}
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
input[type="number"] {
	-moz-appearance: textfield;
}