Forminator CSS Material design with great upload field

Upload field not shown in screenshot

/*---------------------------*/
/*FORM 
.forminator-textarea */
.forminator-input {
	border-top: 0;
	border-right: 0;
}

/*FORMINATOR SUBMIT BUTTON RIGHT ARROW
.forminator-button-submit {
display: flex;
align-items: center;
}
.forminator-button-submit:after { 
content: "\e914";
color: var(--wpex-btn-color, var(--wpex-on-accent));
font-size: 40px;
padding-left: 10px;
font-family: 'enym' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
}
.forminator-button-submit:hover:after { 
color: var(--wpex-hover-btn-color, var(--wpex-on-accent-alt));
}
FORMINATOR SUBMIT BUTTON RIGHT ARROW END*/

/*form container */
.forminator-ui.forminator-custom-form[data-design=material]:not(.forminator-size--small),
.forminator-row-last {
	margin: 0 !important;
}

.forminator-edit-module {
	position: absolute;
	bottom: 0;
}

/*errors*/
.forminator-design--material .forminator-error-message {
	position: absolute;
}

.forminator-field-consent,
.forminator-field-captcha {
	margin-top: 20px;
}

/* PREVENT label move*/
.forminator-ui.forminator-custom-form[data-design=material] .forminator-is_active .forminator-floating--input,
.forminator-ui.forminator-custom-form[data-design=material] .forminator-is_filled .forminator-floating--input {
	-webkit-transform: none !important;
	transform: none !important;
}

/*PREVENT MOVE label on active*/
.forminator-label {
	transition: all 0s !important;
	font-size: 1em !important;
}

.forminator-design--material .forminator-is_filled .forminator-label[class*="forminator-floating-"],
.forminator-design--material .forminator-is_active .forminator-label[class*="forminator-floating-"] {
	transition: all 0s !important;
	opacity: 0;
	display: none;
}

/*INPUT*/
.forminator-label {
	transition: all 0s !important;
	font-size: 1em !important;
	font-weight: 300 !important;
	top: 3px;
	position: relative;
	padding-left: 20px;
	z-index: 1;
	/*otherwise backgorundon hover overlaps it*/
}

.forminator-field .forminator-input {
	padding-top: 10px !important;
	transition: all 0s !important;
	transition: background-color .2s linear !important;
	border-left: 1px solid #000 !important;
	border-bottom: 1px solid #000 !important;
	font-size: 1em !important;
	font-weight: 300 !important;
	line-height: normal !important;
}

.forminator-field.forminator-is_filled .forminator-input,
.forminator-field.forminator-is_hover .forminator-input,
.forminator-field.forminator-is_active .forminator-input {
	padding-top: 10px !important;
	padding-left: 19px !important;
}

.forminator-ui.forminator-custom-form[data-design=material] .forminator-field.forminator-is_hover .forminator-input,
.forminator-ui.forminator-custom-form[data-design=material] .forminator-field.forminator-is_active .forminator-input {
	background-color: #fff !important;
}

/*TEXTAREA*/
.forminator-field-textarea {
	margin-top: 20px;
}

.forminator-field-textarea label {
	transition: all 0s !important;
	position: absolute;
	top: 21px !important;
	padding-left: 20px !important;
	padding-top: unset !important;
	font-size: 1em !important;
	font-weight: 300 !important;
	line-height: normal !important;
}

.forminator-field-textarea textarea {
	padding-top: 20px !important;
	padding-left: 19px !important;
	min-height: 200px !important;
	border-radius: 0 !important;
	font-size: 1em !important;
	font-weight: 300 !important;
	line-height: normal !important;
	transition: background-color .2s linear !important;
	border: 1px solid #000;
}

.forminator-field.forminator-is_filled textarea,
.forminator-field.forminator-is_hover textarea,
.forminator-field.forminator-is_active textarea {
	min-height: 200px !important;
}

.forminator-field.forminator-is_hover textarea,
.forminator-field.forminator-is_active textarea {
	background-color: #fff !important;
}

/*HIDE HOVER BORDER textarea*/
.forminator-ui.forminator-custom-form[data-design=material] .forminator-field.forminator-has_error .forminator-textarea--wrap:after,
.forminator-ui.forminator-custom-form[data-design=material] .forminator-field.forminator-is_active .forminator-textarea--wrap:after,
.forminator-ui.forminator-custom-form[data-design=material] .forminator-field.forminator-is_hover .forminator-textarea--wrap:after {
	opacity: 0 !important;
	-khtml-opacity: 1 !important;
}

/*CONSENT*/
.forminator-field-consent label.forminator-label {
	display: none !important;
}

.forminator-checkbox__label.forminator-consent__label,
.forminator-checkbox__label.forminator-consent__label p {
	font-size: 1em !important;
	font-weight: 300 !important;
	line-height: normal;
}

/*ROW DISTANCE*/
.forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid=open] .forminator-row-inside:not(:last-child),
.forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid=open] .forminator-row:not(.forminator-row-last) {
	margin-bottom: 20px !important;
}

/*CAPCTHA RIGHT*/
.forminator-captcha-right {
	float: right;
}

/*SUBMIT*/
.forminator-button.forminator-button-submit {
	float: right !important;
	display: flex !important;
	align-items: center;

	cursor: pointer !important;
	-webkit-appearance: none !important;
	-webkit-font-smoothing: inherit !important;
	text-decoration: none !important;
	text-align: center;
	max-width: 100% !important;
	padding: var(--wpex-btn-padding) !important;
	transition: .15s all ease !important;
	background-color: var(--wpex-btn-bg, var(--wpex-accent)) !important;
	background-image: var(--wpex-btn-img) !important;
	border-radius: var(--wpex-btn-border-radius) !important;
	border-width: var(--wpex-btn-border-width) !important;
	border-style: var(--wpex-btn-border-style) !important;
	border-color: var(--wpex-btn-border-color, currentColor);
	color: var(--wpex-btn-color, var(--wpex-on-accent)) !important;
	font-size: var(--wpex-btn-font-size) !important;
	font-family: var(--wpex-btn-font-family) !important;
	font-style: var(--wpex-btn-font-style) !important;
	text-transform: var(--wpex-btn-text-transform) !important;
	letter-spacing: var(--wpex-btn-letter-spacing) !important;
	line-height: var(--wpex-btn-line-height) !important;
	font-weight: var(--wpex-btn-font-weight) !important;
}

.forminator-button.forminator-button-submit:hover {
	color: var(--wpex-hover-btn-color, var(--wpex-on-accent-alt)) !important;
}

/*arrow right*/
.forminator-button-submit:after {
	content: "\e914";
	color: var(--wpex-btn-color, var(--wpex-on-accent));
	font-size: 40px;
	padding-left: 10px;
	font-family: 'enym' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	vertical-align: middle;
	-webkit-font-smoothing: antialiased;
}

.forminator-button-submit:hover:after {
	color: var(--wpex-hover-btn-color, var(--wpex-on-accent-alt));
}


/*UPLOAD*/
.forminator-row .forminator-field-upload {
	margin-top: 10px;
}

/*no pointer on label*/
.forminator-ui.forminator-custom-form[data-design=material] .forminator-label[for] {
	cursor: unset !important;
}

.forminator-row .forminator-field-upload .forminator-label {
	display: block !important;
	font-weight: 500 !important;
	font-size: var(--wpex-btn-font-size) !important;
	color: var(--wpex-accent);
	text-transform: uppercase;
	/* margin-block-end: 1em; */
	line-height: 1.5em !important;
	margin-bottom: 20px;
	padding: 0;

	padding-left: 60px;
}

/*
.forminator-row .forminator-field-upload .forminator-label:before {
content: url("/wp-content/uploads/2025/10/SC-Upload-Lebenslauf.svg");
width: 37px;
position: absolute;
left: 0;
top: 7px;
}*/
.forminator-row .forminator-field-upload .forminator-label:before {
	content: "\e91d";
	font-family: 'enym' !important;
	font-size: 30px;
	width: 37px;
	position: absolute;
	left: 0;
	top: 11px;
}

.forminator-multi-upload {
	transition: all .2s;

	cursor: pointer;
	/* background-color: #fff; */
	height: 100px;
	border: 0;
	border-radius: 0 !important;
	/* background-image: url(data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23333' stroke-width='2' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e); */
	border: 1px solid #000;
}

.forminator-multi-upload:hover {
	background-color: #fff;
}

.forminator-multi-upload p {
	display: none !important;
}

.forminator-ui.forminator-custom-form[data-design=material] .forminator-multi-upload .forminator-multi-upload-message [class*=forminator-icon-]:before {

	content: "\e926";
	font-family: 'enym' !important;
	font-size: 30px;

	display: block;
	color: inherit;
	font-size: 40px;
	line-height: 30px;
	/*	content: url("/wp-content/uploads/2025/10/SC-Uplpad-Pfeil.svg");*/
	width: 50px;
	position: relative;
	/* top: 50%; */
	left: 50%;
	transform: translate(-50%);
}

.forminator-ui.forminator-custom-form[data-design=material] .forminator-label+.forminator-description {
	margin: 0px 0 12px !important;
}

.forminator-uploaded-file--preview {
	border-radius: 0;
}

/*CHECKBOX*/
.forminator-checkbox-box {
	border-radius: 0;
	border-color: #000;
	border-width: 1px;
	color: var(--wpex-accent);
}

/*SELECT*/
.forminator-select--field .select2-selection__rendered {
	background-color: var(--wpex-accent);
	color: #fff !important;
	font-size: 1em !important;
	font-weight: 300 !important;
	height: 60px !important;
	padding-left: 20px !important;
	padding-top: 20px !important;
	text-transform: uppercase;
}


.forminator-select--field .select2-selection__arrow {
	background-color: var(--wpex-accent);
	color: #fff !important;
	height: 60px !important;
	border: 0;
	outline: 0;
	padding-right: 20px !important;
}

.forminator-ui.forminator-custom-form[data-design=material] select.forminator-select2+.forminator-select .selection span[role=combobox].select2-selection--multiple .select2-selection__arrow [class*=forminator-icon-]:before,
.forminator-ui.forminator-custom-form[data-design=material] select.forminator-select2+.forminator-select .selection span[role=combobox].select2-selection--single .select2-selection__arrow [class*=forminator-icon-]:before {

	content: "\e946";
	font-family: 'enym' !important;
	font-size: 30px;
	color: #fff;

	display: block;
	color: inherit;
	/*    content: url("/wp-content/uploads/2025/10/SC-Pfeil-up-down.svg");
	content: url(/wp-content/uploads/2025/10/SC-Pfeil-up-down2.svg);*/
	/* height: 52px; */
	/* width: 40px; */
	margin-top: 3px;
	/*    transform: scale(0.7);*/

}

/*disable outline in main select*/
.forminator-select--field .select2-selection.select2-selection--single {
	outline: none !important;
}

/*disable outline in dropdown*/
.forminator-select-dropdown-container--open .forminator-dropdown--material .select2-results .select2-results__options .select2-results__option.select2-results__option--highlighted {
	outline: none !important;
}

/* no top bottom padding for select 2 dropdown box*/
.forminator-select.forminator-select-dropdown-container--open .forminator-select-dropdown.forminator-dropdown--material {
	padding: 0 !important;
}

/*select2 no bottom border under main box*/
.forminator-ui.forminator-design--material .forminator-select2+.forminator-select .selection .select2-selection--single[role="combobox"]:before {
	background-color: transparent !important;
}

.forminator-ui.forminator-design--material .forminator-select2+.forminator-select.select2-container--open .selection .select2-selection--single[role="combobox"] {
	border-color: transparent !important;
}

.forminator-ui.forminator-design--material .forminator-select2+.forminator-select .selection .select2-selection--single[role="combobox"] {
	border-color: transparent !important;
}

/* select2 dropdown font und padding*/
.forminator-select.forminator-select-dropdown-container--open .forminator-select-dropdown.forminator-dropdown--material .select2-results .select2-results__options .select2-results__option {
	padding: 5px 20px 8px !important;
	font-size: 1em;
	font-weight: 300;
}

/*select 2 selected dropdown*/
.forminator-select-dropdown-container--open .forminator-dropdown--material .select2-results .select2-results__options .select2-results__option.select2-results__option--selected,
.forminator-select-dropdown-container--open .forminator-dropdown--material .select2-results .select2-results__options .select2-results__option.select2-results__option--selected span:not(.forminator-checkbox-box) {
	background-color: var(--wpex-accent) !important;
	color: #fff !important;
}

/*select2 highlighted*/
.forminator-select-dropdown-container--open .forminator-dropdown--material .select2-results .select2-results__options .select2-results__option:not(.select2-results__option--selected).select2-results__option--highlighted,
.forminator-select-dropdown-container--open .forminator-dropdown--material .select2-results .select2-results__options .select2-results__option:not(.select2-results__option--selected).select2-results__option--highlighted span:not(.forminator-checkbox-box) {
	background-color: var(--wpex-accent) !important;
	color: #fff !important;
}

/*no rotate*/
.forminator-ui.forminator-custom-form[data-design="material"] select.forminator-select2+.forminator-select .selection span[role="combobox"].select2-selection--single[aria-expanded="true"] .select2-selection__arrow [class*="forminator-icon-"] {
	transform: none !important;
}