/* Forms */

$formControlHorizontalPadding: 20px;
$iconSizeL: 24px;

.form-field {
	display: flex;
	align-items: center;

	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="url"],
	input[type="number"],
	input[type="date"],
	input[type="time"],
	input[type="datetime"],
	input[type="datetime-local"],
	input[type="week"],
	input[type="month"],
	textarea,
	select {
		@include box-sizing-border-box;
		@include default-shape();

		font-size: 14px;
		font-weight: 400;
		border: 1px solid $borderColor;
		color: $headlinesColor3;
		width: 100%;
		max-width: 100%;
		line-height: 1;
		margin: 0;
		vertical-align: middle;
		outline: 0;
		box-shadow: none;
		appearance: none;
		background: $whiteColor;
		min-width: none;

		&:not([type="color"]) {
			padding: 10px $formControlHorizontalPadding;
		}

		@include tablet {
			&:not([type=color]) {
				padding: 15px 15px;
			}
		}

		@include mobile {
			&:not([type=color]) {
				padding: 10px 15px;
			}
		}

		&:hover, &:focus{
			border-color: $mainTextColor;
		}

		&::placeholder {
			color: $headlinesColor2;
		}
	}

	input:disabled {
		background: $grayBackground;

		&:hover, &:focus{
			border-color: $borderColor;
		}
	}

	select {
		height: auto;
		line-height: normal;
		outline: none;
	}

	textarea {
		height: 100px;
		line-height: 1.5;
		padding-top: 10px;
		background: $whiteColor;
		width: 100%;

		&::-webkit-input-placeholder {
			color: $mainTextColor;
			font-size: 15px;
		}
	}

	[type="checkbox"]:not(:checked) + label,
	[type="checkbox"]:checked + label,
	[type="radio"]:not(:checked) + label,
	[type="radio"]:checked + label {
		position: relative;
		padding-left: 25px;
		cursor: pointer;
	}

	[type="checkbox"]:not(:checked) + label:before,
	[type="checkbox"]:checked + label:before,
	[type="radio"]:not(:checked) + label:before,
	[type="radio"]:checked + label:before {
		content: '';
		position: absolute;
		left:0;
		top: 8px;
		width: 16px;
		height: 16px;
		border: 1px solid $borderColor;
		background: white;
	}

	[type="checkbox"]:not(:checked) + label:before,
	[type="checkbox"]:checked + label:before {
		@include round(3px);
	}

	[type="radio"]:not(:checked) + label:before,
	[type="radio"]:checked + label:before {
		@include round(50%);
	}

	[type="checkbox"]:not(:checked) + label:after,
	[type="checkbox"]:checked + label:after,
	[type="radio"]:not(:checked) + label:after,
	[type="radio"]:checked + label:after {
		content: '';
		position: absolute;
		top: 12px;
		left:4px;
		line-height: 0.8;
		transition: all .2s;
		background: $grayBackground;
		width: 8px;
		height: 8px;
	}

	[type="checkbox"]:not(:checked) + label:after,
	[type="checkbox"]:checked + label:after {
		@include round(2px);
	}

	[type="radio"]:not(:checked) + label:after,
	[type="radio"]:checked + label:after {
		@include round(50%);
	}

	/* checked mark aspect changes */
	[type="checkbox"]:not(:checked) + label:after,
	[type="radio"]:not(:checked) + label:after {
		opacity: 0;
		transform: scale(0);
	}

	[type="checkbox"]:checked + label:after,
	[type="radio"]:checked + label:after {
		opacity: 1;
		transform: scale(1);
	}

	&.medium-field {
		input[type="text"],
		input[type="email"],
		input[type="password"],
		input[type="search"],
		input[type="tel"],
		input[type="url"],
		input[type="number"],
		input[type="date"],
		input[type="time"],
		input[type="datetime"],
		input[type="datetime-local"],
		input[type="week"],
		input[type="month"],
		textarea,
		select {
			padding-top: 13px;
			padding-bottom: 13px;
		}
	}
}

.form-field {
	&.form-field-with-icon.form-field-with-icon {
		position: relative;

		input {
			padding-left: 30px;
		}

		.form-field-icon {
			position: absolute;
			left: calc($formControlHorizontalPadding / 2);
			top: 50%;
			transform: translateY(-50%);
			color: $iconMainColor;

			&.icon-l {
				font-size: $iconSizeL;

				@include tablet {
					font-size: 20px;
				}
			}

			&.icon-img-l {
				height: $iconSizeL;

				@include tablet {
					height: 20px;
				}
			}

			@include tablet {
				left: 5px;
			}
		}

		&.icon-l {
			input {
				padding-left: $formControlHorizontalPadding + $iconSizeL + 5px;

				@include tablet {
					padding-left: 35px;
				}
			}
		}
	}
}


.ui.form input:not([type]),
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="time"],
.ui.form input[type="text"],
.ui.form input[type="file"],
.ui.form input[type="url"] {
	@include default-shape();

	border: 1px solid $borderColor;
	color: $headlinesColor3;
	padding-top: 11px;
	padding-bottom: 11px;
	font-size: 15px;
	min-width: 0;
	flex-shrink: 1;

	&::placeholder {
		color: $mainTextColor;
		font-size: 15px;
	}

	&:hover {
		color: $headlinesColor2;
	}
}

.ui.form textarea {
	&::-webkit-input-placeholder, &:focus {
		color: $mainTextColor;
	}
}

.charscounter {
	font-size: 14px;
	color: $headlinesColor2;
	font-weight: 400;
}

.ui.label {
	background: $grayBackground;
	color: $mainTextColor;
}

.ui.selection.dropdown {
	@include default-shape();

	border: 1px solid $borderColor;
	color: $headlinesColor;
	padding-top: 11px;
	padding-bottom: 11px;
	font-size: 15px;
	line-height: 1.21428571em;

	.text {
		color: $headlinesColor;
	}

	&.active {
		box-shadow: none;
	}

	.clear-dropdown {
		top: 50%;
		transform: translateY(-50%);
		right: 10px;
		color: $mainTextColor;
	}

	&:hover,
	&:focus {
		color: $headlinesColor2;
	}

	&.slim-dropdown {
		border: 0;

		.text {
			font-weight: 600;
			color: $mainTextColor;
			font-size: 15px;
		}

		&.visible {
			.text {
				font-weight: 600;
				color: $mainTextColor;
				font-size: 15px;
			}
		}
	}
}

.slim-dropdown-wrapper {
	> label {
		font-size: 15px;
		font-weight: 400;
		color: $mainTextColor;
	}

	.ui.selection.dropdown {
		@include breakpoint-down(xs) {
			min-width: unset;
		}
	}
}

.ui.dropdown:not(.button) > .default.text, .ui.default.dropdown:not(.button) > .text {
	color: $mainTextColor;
}

.ui.multiple.dropdown {
	padding-top: 5px;
	padding-bottom: 5px;
}

.ui.icon.input > i.icon {
	color: $mainTextColor;
}

.ui.multiple.search.dropdown > input.search {
	margin-top: 2px;
	margin-top: 3px;
}

.ui.dropdown > .dropdown.icon:before {
	content: "\f107";
	font-family: "Icons";
	color: $mainTextColor;
	top: 50%;
	transform: translateY(-50%);
}

.ui.icon.input > i.link.icon.clear {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	left: auto;
}

.field.inline-field {
	display: flex;
	align-items: center;
	padding-top: 3px;

	.label {
		font-size: 15px;
		font-weight: 600;
		color: $mainTextColor;

		.small-label {
			font-weight: 400;
		}
	}
	input[type="text"] {
		@include default-shape();

		min-width: 50px;
		max-width: 60px;
		padding: 5px 10px;
		border: 1px solid $borderColor;
		font-size: 15px;
		color: $mainTextColor;
		margin-left: auto;
		display: inline-block;
		text-align: center;
	}
}

.ui.form .field{
	&.inline-field {
		margin-bottom: 5px;

		> label {
			color: $mainTextColor;
		}
	}
}

/* Component containers */
.ui-widget {
	font-family: Verdana,Arial,sans-serif;
	font-size: 1.1em;
}
.ui-widget .ui-widget {
	font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-family: Verdana,Arial,sans-serif;
	font-size: 1em;
}

.ui-widget-content {
	border: 0;
	background: $grayBackground4;
}

.ui-slider-horizontal {
	height: 6px;
}

.ui-widget-header {
	background: $grayBackground;
}

.ui-widget.ui-widget-content {
	border: 0;
}
.ui-widget-content a {
	color: $mainColor;
}
.ui-widget-header a {
	color: $mainColor;
}

.ui-slider-handle.ui-state-default.ui-corner-all {
	@include round(8px);

	width: 16px;
	height: 16px;
	background: $mainColor;
	border: 2px solid $whiteColor;
	box-shadow: none;
	cursor: pointer;
	top: 50%;
	transform: translateY(-50%);
}

.ui.toggle.checkbox {
	label {
		color: $mainTextColor;
		font-weight: 600;
		padding-left: 50px;
		padding-top: 2px;
		cursor: pointer;

		&:before {
			@include round(10px);

			width: 40px;
			height: 20px;
			background: $grayBackground4;
			border: 0;
			box-shadow: none;
		}

		&:after {
			@include round(6px);

			background: $headlinesColor2;
			width: 16px;
			height: 12px;
			top: 4px;
			left: 6px;
			border: 0;
			box-shadow: none;
		}

		&:hover {
			&:before {
				background: $grayBackground2;
			}
		}
	}

	input {
		~ label:after {
			box-shadow: none;
			left: 6px;
		}
		&:checked ~ label {
			&:before {
				background: $grayBackground4 !important;
			}

			&:after {
				left: 18px;
				box-shadow: none;
				background: $mainColor;
			}

			color: rgb(137, 142, 180) !important;
		}
	}
}

.ui.checkbox {
	label {
		text-align: left;
		cursor: pointer;

		&:before {
			@include round(3px);

			border: 1px solid $borderColor;
			background: $grayBackground3;
		}

		&:after {
			color: $mainColor;
			font-size: 13px;
		}

		color: $mainTextColor;
		font-size: 14px;
		font-weight: 600;
	}

	input {
		&:disabled ~ label {
			color: $mainTextColor;
		}
	}
}

.ui.form .fields.wrap-fix .field {
	margin-bottom: 30px;

	@include tablet {
		margin-bottom: 1em;
	}
}

.ui.label {
	padding-left: 12px;
	padding-right: 12px;
}

.ui.labeled.input > .label {
	display: flex;
	align-items: center;
	font-weight: normal;
}

#queue ~ .ui.labeled.icon.button.uploadifive-button {
	@include default-shape();
	border: 1px solid $mainColor;
	background: $mainColorBackground;
	color: $headlinesColor3;
	font-size: 15px;
	font-weight: 600;
	text-transform: capitalize;
	text-align: left !important;
	padding-left: 55px !important;

	> .icon {
		background-color: $mainColor;
		color: $whiteColor;

		&::before {
			display: none;
		}
		&.attach.icon {
			background-image: url("../images/media/paperclip.svg");
			background-repeat: no-repeat;
			background-position: center;
		}
	}

	input {
		cursor: pointer;
	}
}

.amount_section {
	@include default-shape();

	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border: 1px solid $borderColor;

	a {
		color: $mainColor;
		font-size: 20px;
		font-weight: 700;
	}

	input[type="text"].current_amount.current_amount {
		border: 0;
		font-size: 14px;
		font-weight: 600;
		background: none;
		padding: 0;
		min-width: none;
		width: 40px;
		outline: 0;
		text-align: center;
		line-height: 20px;
		height: 20px;
	}
}

.ui.calendar {
	.ui.icon.input > i.icon {
		color: $mainColor;
		opacity: 1;
	}
}