.jet-form {
	&.is-loading {
		opacity: .5;
		pointer-events: none;
	}
	&-row {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -5px;
		padding: 5px 0;
		&:last-child {
			padding-bottom: 0 !important;
		}
		&--first-visible {
			padding-top: 0 !important;
		}
		&.jet-form-row--hidden {
			margin: 0 !important;
			padding: 0 !important;
		}
	}
	&__group-break {
		width: 100%;
		flex: 0 0 100%;
	}
	&-col {
		min-height: 1px;
		padding: 0 5px;
		display: flex;
		align-items: flex-start;
		align-content: flex-start;
		flex-wrap: wrap;
		max-width: 100%;
		flex: 0 0 100%;
		&.field-type-heading {
			flex-wrap: wrap !important;
		}
		.layout-row & {
			 flex-wrap: nowrap;
		 }
		&__start {
			flex: 0 0 30%;
			max-width: 30%;
		}
		&__end {
			display: flex;
			flex: 1 1 auto;
		}
	}
	@media ( min-width: 600px ) {
		&-col-1 {
			max-width: 8.33333%;
			width: 8.33333%;
			flex: 0 0 8.33333%;
		}
		&-col-2 {
			max-width: 16.66666%;
			width: 16.66666%;
			flex: 0 0 16.66666%;
		}
		&-col-3 {
			max-width: 25%;
			width: 25%;
			flex: 0 0 25%;
		}
		&-col-4 {
			max-width: 33.33333%;
			width: 33.33333%;
			flex: 0 0 33.33333%;
		}
		&-col-5 {
			max-width: 41.66666%;
			width: 41.66666%;
			flex: 0 0 41.66666%;
		}
		&-col-6 {
			max-width: 50%;
			width: 50%;
			flex: 0 0 50%;
		}
		&-col-7 {
			max-width: 58.33333%;
			width: 58.33333%;
			flex: 0 0 58.33333%;
		}
		&-col-8 {
			max-width: 66.66666%;
			width: 66.66666%;
			flex: 0 0 66.66666%;
		}
		&-col-9 {
			max-width: 75%;
			width: 75%;
			flex: 0 0 75%;
		}
		&-col-10 {
			max-width: 83.33333%;
			width: 83.33333%;
			flex: 0 0 83.33333%;
		}
		&-col-11 {
			max-width: 91.66666%;
			width: 91.66666%;
			flex: 0 0 91.66666%;
		}
		&-col-12 {
			max-width: 100%;
			width: 100%;
			flex: 0 0 100%;
		}

		// Push classes
		@for $i from 1 through 11 {
			&-push-#{$i} {
				body:not(.rtl) & {
					margin-left: percentage($i / 12);
				}

				body.rtl & {
					margin-right: percentage($i / 12);
				}
			}
		}
	}
	&-page {
		&--hidden {
			display: none;
		}
	}
	&__next-page {
		&-msg {
			display: none;
			&--visible {
				display: block;
			}
		}
	}
	&__calculated-field {
		display: flex;

		&--hidden {
			display: none;
		}
	}
	&__label {
		.layout-column & {
			max-width: 100%;
			flex: 0 1 100%;
		}
	}
	&__heading,
	&__label {
		flex: 0 0 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	&__field-error {
		width: 100%;
	}
	&__desc {
		display: block;
		.layout-column & {
			max-width: 100%;
			flex: 0 1 100%;
		}
	}
	&__prev-page {
		outline: none;
	}
	&__field {
		box-sizing: border-box;
		.layout-column &:not(.checkboxes-field):not(.radio-field):not(.range-field) {
			max-width: 100%;
			width: 100%;
			flex: 0 1 100%;
		}
		.layout-row &:not(.checkboxes-field):not(.radio-field):not(.range-field) {
			width: 100%;
		}
		&-wrap {
			position: relative;
		}
		&-label {
			cursor: pointer;
			display: inline-flex;
			align-items: center;
			.jet-form__field-template + & {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: -1;
				opacity: 0;
			}
			input {
				margin: 0 5px 0 0;

				.rtl & {
					margin: 0 0 0 5px;
				}
			}
		}
		&-template {
			cursor: pointer;
		}
	}

	&__field-value {
		white-space: nowrap;

		&-number {
			display: inline-block;
			text-align: center;
		}
	}
	&__submit {
		&-wrap {
			display: flex;
			flex-direction: column;
			width: 100%;
			&.has-prev {
				flex-direction: row;
				justify-content: space-between;
			}
		}
	}
	&__check-mark {
		display: flex;
		align-items: center;
		justify-content: center;
		&__icon {
			&.is-svg-icon {
				svg {
					display: block;
					width: 1em;
					height: 1em;

					path {
						fill: currentColor;
					}
				}
			}
		}
		&--default {
			display: flex;
			align-items: center;
			justify-content: center;
			.jet-form__field-template--checked & {
				display: none;
			}
		}
		&--checked {
			display: none;
			align-items: center;
			justify-content: center;
			.jet-form__field-template--checked & {
				display: flex;
			}
		}
	}
	&-repeater {
		width: 100%;

		&__initial {
			display: none;
		}
		&__row {
			display: flex;
			width: 100%;
			align-items: flex-end;
			padding: 15px 0;
			&-fields {
				flex: 1 1 auto;
			}
			.jet-form-col {
				padding: 0 5px;
			}
		}
		&__actions {
			display: flex;
		}
		&__new {
			margin: 10px 0 0 0;
		}
		&__remove {
			margin: 0 0 0 10px;
			text-decoration: none !important;
		}
	}
}

.layout-column .jet-form__fields-group.checkradio-wrap {
	width: 100%;
}

// Range Field
.jet-form__field-wrap.range-wrap {
	display: flex;
	align-items: center;
	width: 100%;
}

input[type="range"].jet-form__field.range-field {
	margin-right: 10px;
	-webkit-appearance: none;
	min-height: 18px; // for IE

	.rtl & {
		margin-left: 10px;
		margin-right: 0;
	}

	&,
	&:focus {
		padding: 0;
		background: transparent;
		border: none;
		border-radius: 0;
		box-shadow: none;
		outline: none;
	}

	@mixin range-track(){
		width: 100%;
		height: 4px;
		cursor: pointer;
		background: #e3ddd8;
		box-shadow: none;
		border: none;
	}

	&::-webkit-slider-runnable-track {
		@include range-track;
	}
	&::-moz-range-track {
		@include range-track;
	}
	&::-ms-track {
		@include range-track;
		color: transparent;
	}
	&::-ms-fill-lower {
		background: transparent;
	}
	&::-ms-fill-upper {
		background: transparent;
	}

	@mixin range-thumb(){
		width: 18px;
		height: 18px;
		background: #ccc;
		border-radius: 50%;
		cursor: pointer;
		box-shadow: none;
		border: none;
	}

	&::-webkit-slider-thumb {
		@include range-thumb;

		margin-top: -7px;
		-webkit-appearance: none;
	}
	&::-moz-range-thumb {
		@include range-thumb;
	}
	&::-ms-thumb {
		@include range-thumb;
	}
}

.jet-form-message {
	margin: 20px 0 0 0;
	text-align: center;
	padding: 20px;
	&--success {
		border: 1px solid green;
		color: green;
	}
	&--error {
		border: 1px solid red;
		color: red;
	}
}

.jet-engine-file-upload {
	&__files {
		display: flex;
		flex-wrap: wrap;
	}
	.sortable-placeholder {
		flex: 0 0 100px;
		width: 100px;
		margin: 0 10px 10px 0;
		position: relative;
		background: rgba( 123, 123, 123, .2 );
		height: 100px;
	}
	&__content {
		min-height: 100px;
		min-width: 100px;
		position: relative;
		display: inline-flex;
	}
	&__loader {
		top: 0;
		left: 0;
		right: 10px;
		bottom: 10px;
		position: absolute;
		background: rgba( 0, 0, 0, .5 );
		display: none;
		justify-content: center;
		align-items: center;
		.is-loading & {
			display: flex;
		}
	}
	&__file {
		width: 100px;
		height: 100px;
		margin: 0 10px 10px 0;
		position: relative;
		background-color: rgba( 123, 123, 123, .2 );
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237a7a7a' width='48px' height='48px'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z'/%3E%3C/svg%3E");
		background-position: center;
		background-repeat: no-repeat;
		.is-loading & {
			opacity: .5;
		}
		&-remove {
			position: absolute;
			left: 0;
			right: 0;
			top: 50%;
			bottom: 0;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: opacity 200ms linear;
			opacity: 0;
			background: rgba( 0, 0, 0, .4 );
			svg {
				path {
					fill: #fff;
				}
			}
		}
		&:hover {
			.jet-engine-file-upload__file-remove {
				opacity: 1;
			}
		}
		img {
			display: block;
			width: 100%;
			height: 100% !important;
			padding: 0;
			margin: 0;
			object-fit: cover;
			object-position: center center;
		}
	}
	&__errors {
		&.is-hidden {
			display: none;
		}
	}
}

input.jet-form__field.file-field.jet-engine-file-upload__input {
	border: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
	margin: 0 !important;
	width: auto !important;

	.jet-engine-file-upload__value:not([value*=""]) + & {
		color: transparent;
	}
}

.field-type-wysiwyg .jet-form__field {
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}