div.pop-up-sample-wrap
{
	display: flex;
    flex-direction: column;
	width: 100%;
	background: url('/img_files/items/bg-sample.jpg') no-repeat center;
	background-size: cover;
}

	div.pop-up-sample-content
	{
		margin: 20px;
		border: 1px solid #f3e7bf;
		border-radius: 20px;
	}

		div.pop-up-sample-head
		{
			position: relative;
			width: 100%;
			padding: 20px 100px;
			box-sizing: border-box;
		}
		
			i.pop-up-sample-close
			{
				position: absolute;
				right: 0px;
				top: 0px;
				margin: 10px;
				font-size: 20px;
				color: #fff;
				cursor: pointer;
			}
		
			div.pop-up-sample-logo
			{
				background: url('/img_files/items/logo.symbol.svg') no-repeat center;
				background-size: contain;
				width: 60px;
				height: 60px;
				margin: 0px auto;
			}
			
			div.pop-up-sample-head-info
			{
				margin-top: 10px;
			}
			
				span.pop-up-sample-head-title
				{
					display: block;
					margin-bottom: 10px;
					font-size: 50px;
					font-weight: 600;
					text-align: center;
					color: #fff;
				}

				span.pop-up-sample-head-description
				{
					display: block;
					font-size: 18px;
					text-align: center;
					color: #fff;
				}

		form.pop-up-sample-form
		{
			display: flex;
			flex-direction: column;
			gap: 20px;
			margin: 0px 20px;
			padding: 20px;
			background: #fff;
			border-radius: 15px;
		}
		
			div.pop-up-sample-form-line
			{
				display: flex;
				gap: 20px;
				width: 100%;
			}
			
				div.pop-up-sample-form-col.icon
				{
					width: 42px;
				}
				
					div.pop-up-sample-form-col.icon i
					{
						display: block;
						padding: 10px;
						font-size: 22px;
						color: #000;
						background: #e5e6e8;
						border-radius: 30px;
					}
					
					div.pop-up-sample-icon
					{
						width: 42px;
					}
				
				div.pop-up-sample-form-col.field
				{
					width: 100%;
				}
			
					label.pop-up-sample-form-label
					{
						position: relative;
						width: 100%;
					}
					
						span.pop-up-sample-form-title
						{
							display: block;
							margin-bottom: 10px;
							font-size: 16px;
						}
						
							span.pop-up-sample-form-required
							{
								margin-left: 5px;
								font-size: 16px;
								color: #ff0000;
							}
							
							span.pop-up-sample-form-optional
							{
								margin-left: 5px;
								font-size: 16px;
								color: #898b95;
							}
							
						input.pop-up-sample-form-field
						{
							border-radius: 5px;
						}
						
						textarea.pop-up-sample-form-field
						{
							height: 100px;
							border-radius: 5px;
						}
						
					span.pop-up-sample-form-helper
					{
						display: block;
						margin-top: 10px;
					}
					
						span.pop-up-sample-form-helper-text
						{
							display: flex;
							align-items: center;
							width: 100%;
							font-size: 12px;
							color: #898b95;
						}
						
						span.pop-up-sample-form-helper-text.green
						{
							color: #019043;
						}
						
						span.pop-up-sample-form-helper-text.center
						{
							justify-content: center;
						}
						
							span.pop-up-sample-form-helper-text i
							{
								margin-right: 10px;
								font-size: 14px;
							}
						
					div.pop-up-sample-form-radio-wrap
					{
						display: grid;
						grid-template-columns: 1fr 1fr;
						width: 100%;
						row-gap: 5px;
						column-gap: 20px;
					}
					
						label.pop-up-sample-form-radio-label
						{
							display: flex;
							gap: 10px;
							padding: 10px;
							border: 1px solid #ddd;
							border-radius: 5px;
							background: #fff;
							cursor: pointer;
							transition: 0.2s;
							-o-transition: 0.2s;
							-webkit-transition: 0.2s;
						}
						
						label.pop-up-sample-form-radio-label.active
						{
							border-color: #099e4d;
						}
						
							div.pop-up-sample-form-radio-cell.title
							{
								width: 100%;
							}
							
								span.pop-up-sample-form-radio-btn-dot
								{
									display: block;
									width: 8px;
									height: 8px;
									border: 5px solid #fff;
									border-radius: 10px;
									transition: 0.2s;
									-o-transition: 0.2s;
									-webkit-transition: 0.2s;
								}
							
								label.pop-up-sample-form-radio-label.active span.pop-up-sample-form-radio-btn-dot
								{
									border-color: #099e4d;
								}
							
								input.pop-up-sample-form-radio-btn
								{
									display: none;
								}
								
								label.pop-up-sample-form-radio-label:has(input.pop-up-sample-form-radio-btn.error)
								{
									border: 1px solid #f26d4f;
									background: #f1c9c0;
								}
								
								label.pop-up-sample-form-radio-label:has(input.pop-up-sample-form-radio-btn.error) span.pop-up-sample-form-radio-btn-dot
								{
									border-color: #f26d4f;
								}
								
								span.pop-up-sample-form-radio-btn-title
								{
									display: block;
									line-height: 18px;
								}
								
								span.pop-up-sample-form-radio-btn-description
								{
									display: block;
									line-height: 18px;
									color: #898b95;
								}
								
					div.pop-up-sample-upload-wrap
					{
						display: flex;
						flex-direction: column;
						padding: 10px 0px;
						border: 1px dashed #ddd;
						border-radius: 5px;
						background: #fff;
						cursor: pointer;
						transition: 0.2s;
						-o-transition: 0.2s;
						-webkit-transition: 0.2s;
					}
					
					div.pop-up-sample-upload-wrap.dragover
					{
						background: rgb(9 158 77 / 10%);
						border-color: #099e4d;
					}
					
					input.files-validator.error + div.pop-up-sample-upload-wrap
					{
						border-color: #f26d4f;
						background: #f1c9c0;
					}
					
						input.pop-up-sample-form-imgs
						{
							display: none;
						}
					
						div.pop-up-sample-upload-line
						{
							display: flex;
							justify-content: center;
						}
						
							i.pop-up-sample-upload-icon
							{
								font-size: 40px;
								color: #099e4d;
							}
							
							i.pop-up-sample-form-attach
							{
								position: absolute;
								right: 0px;
								padding: 8px;
								font-size: 18px;
								color: #099e4d;
								cursor: pointer;
							}
							
							span.pop-up-sample-upload-title
							{
								font-size: 16px;
							}
							
								span.pop-up-sample-upload-title span
								{
									color: #099e4d;
								}
								
							span.pop-up-sample-upload-desc
							{
								font-size: 16px;
								color: #898b95;
							}

					div.pop-up-sample-attach-file
					{
						display: flex;
						justify-content: space-between;
						align-items: start;
						width: 100%;
						margin-bottom: 5px;
						padding: 5px;
						box-sizing: border-box;
						background: #eee;
						border-radius: 15px;
					}
					
					div.pop-up-sample-attach-file:first-child
					{
						margin-top: 10px;
					}
					
					div.pop-up-sample-attach-file:last-child
					{
						margin-bottom: 0px;
					}
					
						div.pop-up-sample-attach-file-cell
						{
							display: flex;
							width: 95%;
						}
					
							span.pop-up-sample-attach-file-name
							{
								display: block;
								width: 90%;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
					
							span.pop-up-sample-attach-file-progress
							{
								position: relative;
								width: 18px;
								height: 18px;
								margin-right: 10px;
								border-radius: 18px;
								transition: 0.2s;
								-o-transition: 0.2s;
								-webkit-transition: 0.2s;
								background: conic-gradient(#099e4d 0%, #fff 0%);
								mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #fff calc(100% - 2px));
							}
							
							span.pop-up-sample-attach-file-progress.grey
							{
								background: conic-gradient(#099e4d 0%, #ccc 0%);
								mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #ccc calc(100% - 2px));
							}
							
							div.pop-up-sample-attach-file-cell.ctrl
							{
								width: 18px;
							}
								i.pop-up-sample-attach-del
								{
									display: block;
									font-size: 18px;
									color: #ff2f00;
									cursor: pointer;
								}

						button.pop-up-sample-form-submit
						{
							width: 100%;
							font-weight: 600;
						}
		
		
		div.pop-up-sample-body
		{
			display: flex;
			flex-direction: column;
			gap: 20px;
			margin: 0px 20px;
			padding: 20px 50px;
			background: #fff;
			border-radius: 15px;
		}
		
			div.pop-up-sample-body-line
			{
				width: 100%;
				padding: 0px 70px;
				box-sizing: border-box;
			}
			
			div.pop-up-sample-body-line.wide
			{
				padding: 0px;
			}
			
			div.pop-up-sample-body-line.center
			{
				text-align: center;
			}
			
				i.pop-up-sample-succeess-icon
				{
					display: inline-block;
					padding: 15px;
					font-size: 40px;
					color: #099e4d;
					background: rgb(9 158 77 / 15%);
					border-radius: 40px;
				}
				
				span.pop-up-sample-succeess-title
				{
					display: block;
					font-size: 32px;
					font-weight: 600;
					text-align: center;
					color: #1d1a17;
				}
				
				span.pop-up-sample-succeess-description
				{
					display: block;
					font-size: 20px;
					text-align: center;
					color: #5d5750;
				}
				
				span.pop-up-sample-succeess-info
				{
					display: inline-block;
					padding: 5px 30px;
					font-size: 14px;
					color: #9a948e;
					background: #f7f6f4;
					border: 1px solid #eceae7;
					border-radius: 30px;
				}
		
				ul.pop-up-sample-succeess-list
				{
					display: flex;
					flex-direction: column;
					gap: 20px;
					margin: 20px 0px;
					list-style-type: none;
				}
				
					ul.pop-up-sample-succeess-list li
					{
						display: flex;
						gap: 15px;
					}
					
						div.pop-up-sample-succeess-list-cell.icon
						{
							position: relative;
						}
						
							div.pop-up-sample-succeess-list-cell.icon:after
							{
								position: absolute;
								left: 50%;
								bottom: -15px;
								content: '';
								height: calc(100% - 38px);
								margin-left: -1px;
								border-left: 2px solid #eceae7;
							}
							
							ul.pop-up-sample-succeess-list li:last-child div.pop-up-sample-succeess-list-cell.icon:after
							{
								display: none;
							}
							
						div.pop-up-sample-succeess-list-cell.info
						{
							width: 80%;
						}
						
							i.pop-up-sample-succeess-list-icon
							{
								display: block;
								padding: 10px;
								font-size: 26px;
								border: 2px solid #fff;
								border-radius: 50px;
							}
							
							i.pop-up-sample-succeess-list-icon.active
							{
								color: #fff;
								background: #099e4d;
								border: 2px solid #099e4d;
							}
							
							i.pop-up-sample-succeess-list-icon.process
							{
								color: #099e4d;
								background: #fff;
								border: 2px solid #099e4d;
							}
							
							i.pop-up-sample-succeess-list-icon.wait
							{
								color: #c9c4be;
								background: #fff;
								border: 2px solid #c9c4be;
							}
							
							span.pop-up-sample-succeess-list-title
							{
								display: block;
								font-size: 18px;
								font-weight: 600;
								color: #1d1a17;
							}
							
							span.pop-up-sample-succeess-list-description
							{
								display: block;
								margin-bottom: 5px;
								font-size: 16px;
								color: #9a948e;
							}
							
							span.pop-up-sample-succeess-list-info
							{
								display: inline-block;
								padding: 2px 10px;
								font-size: 14px;
								font-weight: 600;
								color: #9a948e;
								background: #f4f3f1;
								border-radius: 30px;
							}
							
							span.pop-up-sample-succeess-list-info.green
							{
								color: #099e4d;
								background: rgb(9 158 77 / 15%);
							}
							
					div.pop-up-sample-succeess-contact
					{
						padding: 20px 120px 0px;
						border-top: 1px solid #eceae7;
					}
					
						span.pop-up-sample-succeess-contact-text
						{
							display: block;
							font-size: 16px;
							text-align: center;
							color: #9a948e;
						}
						
							span.pop-up-sample-succeess-contact-text b
							{
								color: #5d5750;
							}
		
						a.pop-up-sample-succeess-btn
						{
							width: 100%;
							font-weight: 600;
						}
						
		div.pop-up-sample-foot
		{
			display: flex;
			justify-content: center;
			width: 100%;
			margin: 20px 0px;
			padding: 0px 20px;
			box-sizing: border-box;
		}
		
			div.pop-up-sample-foot-col
			{
				display: flex;
				width: 150px;
				padding: 0px 30px;
				border-right: 1px solid #f3e7bf;
			}
			
			div.pop-up-sample-foot-col:last-child
			{
				border: none;
			}
			
				div.pop-up-sample-foot-cell.info
				{
					width: 100%;
				}
				
					div.pop-up-sample-foot-cell i
					{
						display: block;
						margin-right: 10px;
						font-size: 28px;
						color: #f3e7bf;
					}
					
					div.pop-up-sample-foot-cell span
					{
						display: block;
						font-size: 12px;
						line-height: 14px;
						color: #fff;
					}