.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: top;
		flex-wrap: wrap;
		max-width: 100%;
		flex: 0 0 100%;
		&.field-type-heading {
			flex-direction: column;
		}
		&__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%;
			flex: 0 0 8.33333%;
		}
		&-col-2 {
			max-width: 16.66666%;
			flex: 0 0 16.66666%;
		}
		&-col-3 {
			max-width: 25%;
			flex: 0 0 25%;
		}
		&-col-4 {
			max-width: 33.33333%;
			flex: 0 0 33.33333%;
		}
		&-col-5 {
			max-width: 41.66666%;
			flex: 0 0 41.66666%;
		}
		&-col-6 {
			max-width: 50%;
			flex: 0 0 50%;
		}
		&-col-7 {
			max-width: 58.33333%;
			flex: 0 0 58.33333%;
		}
		&-col-8 {
			max-width: 66.66666%;
			flex: 0 0 66.66666%;
		}
		&-col-9 {
			max-width: 75%;
			flex: 0 0 75%;
		}
		&-col-10 {
			max-width: 83.33333%;
			flex: 0 0 83.33333%;
		}
		&-col-11 {
			max-width: 91.66666%;
			flex: 0 0 91.66666%;
		}
		&-col-12 {
			max-width: 100%;
			flex: 0 0 100%;
		}
	}
	&-page {
		&--hidden {
			display: none;
		}
	}
	&__next-page {
		&-msg {
			display: none;
			&--visible {
				display: block;
			}
		}
	}
	&__calculated-field {
		display: flex;
	}
	&__label {
		.layout-column & {
			max-width: 100%;
			flex: 0 1 100%;
		}
	}
	&__field-error {
		width: 100%;
	}
	&__desc {
		display: block;
		.layout-column & {
			max-width: 100%;
			flex: 0 1 100%;
		}
	}
	&__field {
		box-sizing: border-box;
		.layout-column &:not(.checkboxes-field):not(.radio-field):not(.range-field) {
			max-width: 100%;
			flex: 0 1 100%;
		}
		.layout-row &:not(.checkboxes-field):not(.radio-field):not(.range-field) {
			width: 100%;
		}
		&-label {
			cursor: pointer;
			display: inline-flex;
			align-items: center;
			input {
				margin: 0 5px 0 0;
			}
		}
	}
	&__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;
			}
		}
	}
}

// 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;
	}
	&__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;
		margin: 0 10px 10px 0;
		position: relative;
		.is-loading & {
			opacity: .5;
		}
		&-remove {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			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;
		}
	}
}