div.wpforms-container {

	div.wpforms-uploader {
		border: 1px dashed #ccc;
		border-radius: 2px;
		background: #fcfcfc;
		padding: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		cursor: pointer;

		.dz-message {
			display: flex;
			flex-direction: column;
			text-align: center;
			align-items: center;
			font-size: 15px;
			line-height: 1.5;

			& + .dz-preview {
				padding-top: 20px;
			}

			&.hide {
				display: none;

				& + .dz-preview {
					padding-top: 0;
				}
			}

			.modern-hint {
				color: rgba(0, 0, 0, .4);
			}

			svg {
				width: 40px;
				height: 40px;
				margin-bottom: 5px;
				opacity: 0.5;
			}
		}

		.dz-preview {
			display: flex;
			position: relative;
			flex-wrap: wrap;
			width: 100%;
			margin-bottom: 20px;
			padding-bottom: 20px;
			border-bottom: 1px solid #f1f1f1;
			cursor: default;

			&:last-of-type {
				margin-bottom: 0;
				padding-bottom: 0;
				border-bottom: 0;
			}

			&.dz-error {

				.dz-image {
					border-color: #990000;
				}

				.dz-remove {
					position: absolute;
					right: 0;
					text-indent: -9999999px;
					width: 20px;
					height: 20px;
					opacity: 0.5;

					&:after,
					&:before {
						background-color: #ff0000;
					}
				}
			}

			&.dz-processing {

				.dz-progress {
					display: block;
				}

				.dz-details {

					.dz-size {
						opacity: 0;
					}
				}
			}

			&.dz-complete {

				.dz-progress {
					display: none;
				}

				.dz-details {

					.dz-size {
						opacity: 1;
					}
				}
			}

			.dz-details {
				word-break: break-word;
				flex: 1;
				margin-right: 25px;

				.dz-size {
					font-size: 12px;
					color: #888;
				}

				.dz-filename {
					font-size: 14px;
				}
			}

			.dz-image {
				margin-right: 20px;
				width: 50px;
				height: 50px;
				border: 1px solid #ddd;
				overflow: hidden;
				position: relative;
				display: block;
				background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gIDwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+IDxzdmcgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIGZpbGw9IiMwMDAwMDAwZiI+PGc+PHBhdGggZD0iTSA0LDMybCAyNCwwIGMgMS4xMDQsMCwgMi0wLjg5NiwgMi0yTCAzMCwyIGMwLTEuMTA0LTAuODk2LTItMi0yTCA0LDAgQyAyLjg5NiwwLCAyLDAuODk2LCAyLDJsMCwyOCBDIDIsMzEuMTA0LCAyLjg5NiwzMiwgNCwzMnogTSA0LDJsIDI0LDAgbDAsMjggTCA0LDMwIEwgNCwyIHpNIDIzLDZsLTgsMCBDIDE0LjQ0OCw2LCAxNCw2LjQ0OCwgMTQsN0MgMTQsNy41NTIsIDE0LjQ0OCw4LCAxNSw4bCA4LDAgQyAyMy41NTIsOCwgMjQsNy41NTIsIDI0LDcgQyAyNCw2LjQ0OCwgMjMuNTUyLDYsIDIzLDZ6TSAyMywxMmwtMTQsMCBDIDguNDQ4LDEyLCA4LDEyLjQ0OCwgOCwxM0MgOCwxMy41NTIsIDguNDQ4LDE0LCA5LDE0bCAxNCwwIEMgMjMuNTUyLDE0LCAyNCwxMy41NTIsIDI0LDEzIEMgMjQsMTIuNDQ4LCAyMy41NTIsMTIsIDIzLDEyek0gMjMsMThsLTE0LDAgQyA4LjQ0OCwxOCwgOCwxOC40NDgsIDgsMTlDIDgsMTkuNTUyLCA4LjQ0OCwyMCwgOSwyMGwgMTQsMCBjIDAuNTUyLDAsIDEtMC40NDgsIDEtMSBDIDI0LDE4LjQ0OCwgMjMuNTUyLDE4LCAyMywxOHpNIDIzLDI0bC0xNCwwIEMgOC40NDgsMjQsIDgsMjQuNDQ4LCA4LDI1QyA4LDI1LjU1MiwgOC40NDgsMjYsIDksMjZsIDE0LDAgYyAwLjU1MiwwLCAxLTAuNDQ4LCAxLTEgQyAyNCwyNC40NDgsIDIzLjU1MiwyNCwgMjMsMjR6Ij48L3BhdGg+PC9nPjwvc3ZnPg==);
				background-repeat: no-repeat;
				background-position: center;
				background-color: #fff;

				img {
					min-width: 50px;
					max-width: 50px;
					display: block;
				}
			}

			.dz-success-mark,
			.dz-error-mark {
				display: none;
			}

			.dz-progress {
				display: block;
				position: absolute;
				top: 8px;
				left: 70px;
				width: calc(100% - 110px);
				height: 5px;
				border: 0;
				background-color: #ddd;

				.dz-upload {
					display: block;
					height: 5px;
					background-color: #999;
				}
			}

			.dz-error-message {
				flex-basis: 100%;
				font-size: 12px;
				color: #990000;
				margin-left: 70px;

				&.dz-error {
					margin-top: 16px;
				}

				span:not(:empty) {
					display: block;
					padding-top: 10px;
				}
			}

			.dz-remove {
				position: absolute;
				right: 0;
				text-indent: -9999999px;
				width: 20px;
				height: 20px;
				opacity: 0.5;

				&:hover {
					opacity: 1;
				}

				&:after,
				&:before {
					content: '';
					height: 14px;
					width: 2px;
					background-color: #666;
					position: absolute;
					display: block;
					top: 0;
					right: 10px;
				}

				&:after {
					-webkit-transform: rotate(-45deg);
					transform: rotate(-45deg);
				}

				&:before {
					-webkit-transform: rotate(45deg);
					transform: rotate(45deg);
				}
			}
		}
	}
}

.wpforms-submit-overlay-container {
	position: relative;

	.wpforms-submit-overlay {
		top: 0;
		background: red;
		position: absolute;
		opacity: 0;
	}
}