/* #Input Styles
================================================= */

/* Contact Form */
form .form-group .input .form-check {
	padding-left: 15px;

	label {
		width: auto;
		padding-left: 5px;
		position: relative;
		top: -3px;
	}

	.form-check-input {
		margin-left: 0;
	}
}

form>.form-group,
.form-inline {
	@include media-breakpoint-up(md) {
		width: 50%;
		float: left;
	}

	padding: 15px;

	.form-check {
		padding-left: 0;
	}

	.recaptcha {
		padding-left: 15px;
	}

	.hasDatepicker {
		&:hover {
			cursor: pointer;
		}
	}

	input.add-on {
		width: 20px;
		height: 20px;
		vertical-align: middle;
		margin-right: 7px;
	}

	label {
		padding-left: 15px;
	}

	.form-control {
		border: 2px solid #a2a2a2;
		font-size: 1rem;
		font-weight: 400;
		line-height: 1.375rem;
	}

	.help-block,
	.form-text {
		font-weight: 400;
		font-size: 1rem;
		line-height: 1.1;
	}

	.clearfix p {
		font-size: 1rem;
	}

	textarea {
		border-radius: 8px;
	}

	.error {
		color: #ed4337;
		font-size: 1rem;
		font-style: italic;

		&:before {
			content: "* ";
		}
	}
}

form div:last-of-type,
form div:last-of-type(3),
form div:last-of-type(2) {
	float: none;
	width: 100%;
}

.btn-toolbar {
	display: initial;
	padding-left: 30px;
}

.btn-toolbar .btn-group {
	margin-top: 15px;
}

.form-control[readonly] {
	background-color: #ffffff;
}

.form-control[multiple="multiple"] {
	background: no-repeat;
	border-radius: 8px;
	height: 100%;
}

/* Datepicker */
#ui-datepicker-div {
	font-family: $font-family-primary;
	font-weight: $font-weight-normal;
	box-shadow: 0 0 10px rgb(0 0 0 / 20%);

	.ui-widget-header {
		border: none;
		background: none;

		.ui-datepicker-next span {
			transform: rotate(180deg);
		}

		.ui-icon {
			background: url(/static_assets/Images/Icons/streamline-arrow-left-1--arrows-diagrams--48x48_2.svg);
		}
	}

	tr {
		background: none;
	}

	th {
		font-weight: $font-weight-normal;
	}

	.ui-state-default,
	.ui-widget-content .ui-state-default,
	.ui-widget-header .ui-state-default,
	.ui-button,
	html .ui-button.ui-state-disabled:hover,
	html .ui-button.ui-state-disabled:active {
		border: none;
		background: none;
		text-align: center;
	}

	.ui-state-highlight,
	.ui-widget-content .ui-state-highlight,
	.ui-widget-header .ui-state-highlight {
		border-radius: 360px;
		width: 40px;
		height: 40px;
		margin: 0 auto;
		background: $secondary-color;
		color: $white;
		padding-top: 6px;
	}
}

label {
	width: 100%;
	font-family: $font-family-primary;
	font-weight: $font-weight-bold;
	font-size: $font-size-18;
	color: $tertiary-color;
	line-height: $line-height-22;
	padding: 0;
	margin: 0 0 10px 0;
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
	width: 100%;
	height: 50px;
	font-family: $font-family-primary;
	font-weight: $font-weight-bold;
	font-size: $font-size-18;
	color: $black;
	line-height: $line-height-22;
	white-space: nowrap;
	text-overflow: ellipsis;
	background: $primary-color;
	border: 2px solid $gray-a2;
	@include border-radius($border-radius);
	@include transition($input-transition);
	box-shadow: $box-shadow-none;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	overflow: hidden;
	position: relative;
	padding: 10px 25px;
	margin: 0;

	&:focus {
		outline: 0;
		border-color: $quaternary-color;
		box-shadow: $box-shadow-sm;
	}
}

textarea {
	height: 195px;
	line-height: $line-height-lg;
	white-space: pre;
	resize: none;
	@include border-radius(9px);
}

select {
	background-image: url(/static_assets/Images/Layout_icons/select.svg);
	background-size: 22px auto;
	background-repeat: no-repeat;
	background-position: top 12px right 25px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-top: 0;
	padding-right: 50px;
	padding-bottom: 0;

	&:hover {
		cursor: pointer;
	}
}

select::-ms-expand {
	display: none;
}

select.colorize option:not([disabled]) {
	color: $tertiary-color;
}

select.colorize option.def:not([disabled]),
select.colorize.empty:not([disabled]) {
	color: $gray-a2;
}

::-webkit-input-placeholder,
::-webkit-textarea-placeholder {
	color: $gray-a2;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
	color: $gray-a2;
}

::-moz-placeholder {
	color: $gray-a2;
}

::-ms-input-placeholder {
	color: $gray-a2;
}

/* #Buttons
================================================== */

/* Arrow */
@keyframes arrow {
	0% {
		margin-left: 0;
		margin-right: 0;
	}

	75% {
		margin-left: 3px;
		margin-right: -3px;
	}

	100% {
		margin-left: 0px;
		margin-right: 0;
	}
}

@-webkit-keyframes arrow {
	0% {
		margin-left: 0px;
		margin-right: 0;
	}

	75% {
		margin-left: 3px;
		margin-right: -3px;
	}

	100% {
		margin-left: 0px;
		margin-right: 0;
	}
}

/* Arrow2 */
@keyframes arrow2 {
	0% {
		margin-left: 0;
		margin-right: 0;
	}

	75% {
		margin-left: 5px;
		margin-right: -5px;
	}

	100% {
		margin-left: 0px;
		margin-right: 0;
	}
}

@-webkit-keyframes arrow2 {
	0% {
		margin-left: 0px;
		margin-right: 0;
	}

	75% {
		margin-left: 5px;
		margin-right: -5px;
	}

	100% {
		margin-left: 0px;
		margin-right: 0;
	}
}

select,
textarea,
input {
	&:disabled {
		opacity: 0.35;
		background: lightgrey;
	}
}

table[disabled="disabled"] {
	opacity: 0.35;
}

/* #Nimbus
================================================== */

.nimbus-auth-form {
	display: flex;
	justify-content: space-between;
	align-items: center;

	input {
		width: 25%;
	}
}

@include media-breakpoint-down(md) {
	.nimbus-auth-form {
		flex-wrap: wrap;

		input {
			width: 100%;
			margin: 4px 10px;
		}
	}
}

.actions nav.form-navigation .submit .btn {
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
}

// form eliment new design-------

.frame-type-form_formframework {
	form {
		@include media-breakpoint-down(md) {

			.form-group,
			.form-inline {
				padding: 8px 0px;

				label.form-label {
					font-size: $font-size-16;
					margin-bottom: 0.3125rem;
					padding-left: 0px;
					line-height: 1.5rem;
				}

				.form-control {
					border: 0.5px solid #000000;

					&:not(textarea) {
						height: 44px;
					}
				}

				.input {
					.form-text {
						font-size: 0.8rem;
					}
				}
			}

			select {
				background-size: 17px auto;
				background-position: top 12px right 25px;
			}

			.actions {
				nav.form-navigation {
					.btn-toolbar {
						padding-left: 0px;

						.btn-group {
							justify-content: space-between;
							display: flex;

							.btn {
								border-radius: 100px;
							}

							&.previous,
							&.next {
								.btn {
									padding: 14px 20px;
								}
							}
						}
					}
				}
			}
		}

		@media (max-width: 480px) {
			.actions {
				nav.form-navigation {
					.btn.btn-primary {
						padding: 19px 60px;
					}

					& * {
						width: 100%;
						min-width: none;
					}

					.btn-group {
						flex-direction: column;
					}
				}
			}
		}
	}
}

@media (max-width: 767px) {

	input#tx-indexedsearch-searchbox-sword {
		&::placeholder {
			visibility: visible;
		}

		&:focus {
			&::placeholder {
				color: #aaa;
			}
		}
	}

	.header-main .search-box form select,
	.header-main .search-box form textarea,
	.header-main .search-box form input[type="text"],
	.header-main .search-box form input[type="password"],
	.header-main .search-box form input[type="datetime"],
	.header-main .search-box form input[type="datetime-local"],
	.header-main .search-box form input[type="date"],
	.header-main .search-box form input[type="month"],
	.header-main .search-box form input[type="time"],
	.header-main .search-box form input[type="week"],
	.header-main .search-box form input[type="number"],
	.header-main .search-box form input[type="email"],
	.header-main .search-box form input[type="url"],
	.header-main .search-box form input[type="search"],
	.header-main .search-box form input[type="tel"],
	.header-main .search-box form input[type="color"],
	.header-main .search-box form .uneditable-input {
		visibility: visible !important;
	}
}