.uniqe-form { 
.cooperation-form {
	--color-primary: #D71A20;

	* {
		box-sizing: border-box;
	}
	
	.cooperation-form-tabs {
		background: #e5e5e5;
		border-radius: 12px;
		padding: 16px 36px;

		ul {
			display: flex;
			list-style: none;
			justify-content: space-around;
			padding: 0;
			margin-bottom: 0;

			li {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: 4px;
				cursor: pointer;
				font-size: 12px;
				-webkit-transition: all 150ms linear;
				-moz-transition: all 150ms linear;
				transition: all 150ms linear;

				&:hover,
				&.active {
					color: var(--color-primary);
				}

				svg {
					width: 24px;
					height: 24px;
				}
			}
		}
	}

	.cooperation-form-content {
		&>div {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 24px;
			margin-top: 24px;
			@media screen and (max-width: 768px){
				grid-template-columns: repeat(1, 1fr);
			}

			.tab-description,
			.tab-description>* {
				color: #1F1F1F;
				line-height: 2em;
				font-size: 16px;
				font-weight: 500;

				&:is(h1, h2, h3, h4, h5, h6) {
					font-weight: bold;
				}

				li::marker {
					color: #CBCBCB;
				}

				ul {
					padding: 0;
					list-style-position: inside;
				}
			}

			.tab-form {
				display: flex;
				flex-direction: column;
				gap: 24px;
				overflow: hidden;
				border: 1.6px solid #EDEDED;
				border-radius: 12px;
				background: #FFFFFF;

				h3 {
					background: #1F1F1F;
					margin: 0;
					color: #FFF;
					padding: 16px;
					font-size: 16px;
					font-weight: normal;
					text-align: center;
				}

				p {
					margin-bottom: 0;
				}

				form[method="post"] {
					display: grid;
					grid-template-columns: repeat(2, minmax(0, 1fr));
					gap: 24px;
					padding-inline: 24px;
					padding-bottom: 24px;

					.col-span-2 {
						grid-column: span 2 / span 2;
					}

					.col-span-1 {
						grid-column: span 1 / span 1;
					}

					label {
						position: relative;
						-webkit-text-fill-color: unset;

						input,
						textarea {
							font-size: 14px;
							border: 1px solid #CBCBCB;
							border-radius: 8px;
							-webkit-transition: all 150ms linear;
							-moz-transition: all 150ms linear;
							transition: all 150ms linear;
							font-size: 14px;
							padding: 8px 16px;
							width: 100%;

							&:-webkit-autofill,
							&:-webkit-autofill:hover,
							&:-webkit-autofill:focus,
							&:-webkit-autofill:active {
								-webkit-background-clip: text;
/* 								-webkit-text-fill-color: #000; */
								transition: background-color 5000s ease-in-out 0s;
								box-shadow: inset 0 0 20px 20px #fff;
							}

							&[type="number"] {
								-moz-appearance: none;
								appearance: none;

								&::-webkit-outer-spin-button,
								&::-webkit-inner-spin-button {
									-webkit-appearance: none;
									margin: 0;
								}
							}

							&:focus {
								outline: none;
								border-color: #000;

								&+span {
									color: var(--color-primary)
								}
							}

							&:not(:placeholder-shown),
							&:focus {
								&+span {
									top: 0;
									font-size: 11px;
									padding-inline: 8px;
									right: 8px;
									transform: translateY(-50%);
								}
							}
						}

						textarea+span {
							top: 12px;
							transform: translateY(0);
						}

						select {
							font-size: 14px;
							border: 1px solid #CBCBCB;
							border-radius: 8px;
							-webkit-transition: all 150ms linear;
							-moz-transition: all 150ms linear;
							transition: all 150ms linear;
							font-size: 14px;
							padding: 8px 16px;
							background: url("./arrow.png") no-repeat 16px center;
							-webkit-appearance: none;
							-moz-appearance: none;
							appearance: none;

							&:focus {
								outline: none;
								border-color: #000;

								&+span {
									color: var(--color-primary)
								}
							}


							&:not(:invalid) {
								&+span {
									top: 0;
									font-size: 12px;
									padding-inline: 8px;
									right: 8px;
								}
							}
						}

						>span {
							position: absolute;
							right: 16px;
							top: 50%;
							transform: translateY(-50%);
							-webkit-transition: all 150ms linear;
							-moz-transition: all 150ms linear;
							transition: all 150ms linear;
							background: #FFFFFF;
							pointer-events: none;
							color: #757575;

							.required {
								color: #FF383C;
							}
						}

						.file-uploader {
							border: 1px solid var(--color-primary);
							color: var(--color-primary);
							display: flex;
							align-items: center;
							justify-content: center;
							gap: 8px;
							padding: 9px 16px;
							border-radius: 8px;
							cursor: pointer;
							-webkit-transition: all 150ms linear;
							-moz-transition: all 150ms linear;
							transition: all 150ms linear;
							-webkit-text-fill-color: var(--color-primary);

							&:hover {
								color: #FFF;
								-webkit-text-fill-color: #fff;
								background: var(--color-primary);
							}

							svg {
								width: 16px;
								height: 16px;
							}

/* 							span {
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							} */

							input[type="file"] {
								display: none;
							}
						}
					}

					button {
						width: 100%;
						color: #FFF;
						background: var(--color-primary);
						display: flex;
						align-items: center;
						justify-content: center;
						gap: 8px;
						border-radius: 8px;
						cursor: pointer;

						&:hover {
							background: color-mix(in oklch, var(--color-primary), #850000 50%);
							-webkit-transition: all 150ms linear;
							-moz-transition: all 150ms linear;
							transition: all 150ms linear;
						}
					}

					.form-notice {
						background: #e4e4e4;
						width: 100%;
						display: inline-flex;
						border-radius: 8px;
						padding: 16px;
						font-size: 14px;
						align-items: center;
						justify-content: center;

						&.form-notice-error{
							background: #ffd5d5;
							color: #bd0101;
						}

						&.form-notice-success{
							background: #d1ffcd;
							color: #0ebd01;
						}
					}
				}
			}
		}
	}
}

.tab-form p {
text-align: center;
}
}