.hidden {
	display: none !important;
}

.order-form {
	--color-text-gray: #979797;

	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 500px;
	min-width: 300px;
	gap: 1em;
	margin: 2em auto 0;

	.hidden {
		display: none !important;
	}

	.form-field {
		--input-padding-x: 10px;
		--input-padding-y: 11px;
		--input-line-height: 12px;

		display: flex;
		width: 100%;

		margin-top: 1em;

		align-items: center;

		label {
			width: 55%;
			min-width: 165px;
		}

		input,
		textarea,
		select {
			box-sizing: content-box;
			width: calc(100% - 2 * var(--input-padding-x));
			height: var(--input-line-height);
			padding: var(--input-padding-y) var(--input-padding-x);
			border: 1px solid #ddd;
			float: left;
			font-size: var(--input-line-height);
			line-height: var(--input-line-height);
			color: #6A6A6A;
			border-top-left-radius: 5px;
			border-bottom-left-radius: 5px;

			transition: border-color 0.25s ease-in 0s;

			&.error {
				border-color: red;
			}
		}

		textarea {
			resize: vertical;
			min-height: calc(var(--input-line-height) * 3 + 2 * var(--input-padding-y));
		}

		select {
			height: calc(var(--input-line-height) + 4px);
			line-height: calc(var(--input-line-height) + 0px);
		}

		&.fullwidth {
			flex-direction: column;
			gap: 0.5em;

			label,
			div {
				width: 100%;
			}

			input,
			textarea {
				width: calc(100% - 2 * var(--input-padding-x) - 2px);
			}
		}
	}

	.form-field-inline {
		display: inline-flex;
		flex-direction: row;
		gap: 0.75em;
		align-items: stretch;

		input,
		textarea,
		select {
			width: 100%;
		}

		input,
		button {
			line-height: 1.5;
		}

		button {
			display: flex;
			height: auto;
			align-items: center;
			white-space: nowrap;
		}

		[disabled='disabled'] {
			cursor: default;
			background: #cdcdcd;
		}
	}

	.disclaimer {}

	.controls {
		display: flex;
		justify-items: end;

		[disabled='disabled'] {
			cursor: default;
			background: #cdcdcd;
		}
	}

	.qq-uploader {
		--color-primary: #efb434;
		--color-secondary: blue;
		--color-success: #5DA30C;
		--color-error: #D60000;
		--color-text-main: #efb434;
		--color-text-secondary: blue;

		box-sizing: border-box;
		height: 100%;
		border: dashed var(--color-primary);
		border-radius: 5px;
		padding: 10px;

		.qq-upload-drop-area {
			border: none;
			background: none;
			z-index: -1;

			span {
				color: var(--color-text-gray);
			}
		}

		.qq-upload-button {
			padding: 0;
			position: relative;
			width: auto !important;
			height: 50px;
			border: solid 3px var(--color-primary);
			align-items: center;
			justify-content: center;
			color: var(--color-text-main);
			line-height: 50px;
			font-size: 20px;
			background: none;
			cursor: pointer;
			z-index: 10;

			input {
				opacity: 0;
				cursor: pointer;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				height: auto;
			}

			&:hover {
				color: #fff;
				background: var(--color-primary)
			}
		}

		.qq-total-progress-bar-container,
		.qq-edit-filename,
		.qq-upload-spinner {
			display: none
		}

		.qq-thumbnail-wrapper {
			height: 0
		}

		.qq-upload-list {
			height: 100%;
			min-height: 150px;
			max-height: 400px;
			padding: 10px 5px;
			overflow-y: auto;

			li {
				box-sizing: border-box;
				line-height: 1.5em;

				margin-left: 0;
				margin-right: 0;
				width: 100%;
				/*height: 25px;*/
				border: none;
				cursor: default;
				/*padding: 10px 9px 25px;*/
				background: white;
				color: black;

				&.qq-upload-success {
					border-bottom: solid 1px var(--color-success);

					.qq-upload-file {
						display: inline;
					}
				}

				&.qq-upload-fail {
					border-bottom: solid 1px var(--color-error);

					.qq-upload-file-image {
						display: none;
						overflow: hidden;
					}

					.qq-upload-file {
						display: inline;
					}

				}

				&:last-of-type {
					border-bottom: none;
				}
			}
		}

		.qq-upload-item-data {
			/*margin-top: -10px;*/
			/*height: 35px;*/
			display: inline-flex;
			align-items: center;
		}

		.qq-upload-file-image {
			display: inline-block;
			margin-right: .25em;
			width: 15%;
			height: 100%;
			max-height: 70px;

			img {
				width: auto;
				max-width: 100%;
				;
				height: auto;
				max-height: 70px;
			}
		}

		.qq-upload-file,
		.qq-upload-size {
			display: none
		}

		.qq-progress-bar-container {
			display: block;
			height: 10px;
			border: solid 1px #0F87C3;
			border-radius: 0;
			padding: 0;
			overflow: hidden
		}

		.qq-progress-bar {
			background: #0F87C3;
			height: 10px;
			border-radius: 0
		}

		.qq-upload-success {
			.qq-progress-bar-container {
				border-color: #22c30f
			}

			.qq-progress-bar {
				background: #22c30f
			}
		}

		.qq-upload-fail {
			.qq-progress-bar {
				background: #f22
			}

			.qq-progress-bar-container {
				border: solid 1px #f22
			}

			.qq-upload-failed-text {
				color: var(--color-error);
			}
		}

		.qq-file-info {
			height: 15px;
			overflow: visible;
			white-space: nowrap;
			padding-left: 3px;
			padding-top: 0
		}

		.qq-file-name {
			overflow: hidden
		}

		.qq-upload-delete {
			display: block;
			position: absolute;
			right: -15px;
			top: -3px;
			cursor: pointer
		}

		.qq-upload-cancel-selector,
		.qq-upload-retry-selector {
			display: none
		}

		.qq-uploader:not(.hidden-before):before {
			content: 'Какой-то текст'
		}
	}
}

.crm-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;


	.crm-modal-backdrop {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.crm-modal-content {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #fefefe;
		width: 80%;
		max-width: 600px;
		border-radius: 8px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		animation: modalopen 0.4s;
		max-height: 90vh;
		overflow-y: auto;


		.crm-modal-header {
			padding: 15px 20px;
			background-color: #f8f9fa;
			border-bottom: 1px solid #e9ecef;
			border-radius: 8px 8px 0 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: sticky;
			top: 0;
			z-index: 1;

			.header-text {
				margin: 0;
				font-size: 1.5rem;
				color: #333;
			}

			.close {
				color: #aaa;
				font-size: 28px;
				font-weight: bold;
				cursor: pointer;
				transition: color 0.3s;

				&:hover {
					color: #333;
				}
			}
		}

		.body-content {
			padding: 0.75em 1em 0.7em;
			line-height: 1.3;
			color: #333;

			span {
				float: none;
				margin-right: 0;
				font-size: inherit;
			}
		}

		.crm-modal-footer {
			padding: 15px 20px;
			background-color: #f8f9fa;
			border-top: 1px solid #e9ecef;
			border-radius: 0 0 8px 8px;
			text-align: right;
			position: sticky;
			bottom: 0;
		}

	}
}

@keyframes modalopen {
	from {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.9);
	}

	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

@media (max-height: 600px) {
	.crm-modal-content {
		max-height: 80vh;
	}
}