/*  MICROTHEMER STYLES  */


/*= Forms ===================== */

/** Forms >> Brand Colors **/
#gform_5 [type="submit"], 
#gform_5 [type="button"], 
.gf_progressbar_percentage {
	color: #FFFFFF !important;
	border-color: #888888 !important;
	background: var(--e-global-color-primary) !important;
}

/** Forms >> Progress Bar **/
#gf_progressbar_wrapper_5 .gf_progressbar_title {
	font-size: 12px !important;
	line-height: 12px !important;
	text-align: center !important;
}
#gform_5 .gf_progressbar_percentage > span {
	display: none !important;
}
#gform_5 .gf_progressbar_percentage {
	height: 10px !important;
}
#gf_progressbar_wrapper_5 .gf_progressbar_blue {
	
}

/** Forms >> Wrapper Eingabebereich **/
#gform_5 {
	padding: 3% !important;
}

/** Forms >> Headings **/
/* Headline above the progress bar */#gform_wrapper_5 .gform_heading {
	
}
#gform_wrapper_5 .gform_heading {
	font-family: Arial !important;
	font-size: 20px !important;
	display: none !important;
}
#field_5_23, 
#field_5_26, 
#field_5_29, 
#field_5_31, 
#field_5_35, 
#field_5_37, 
#field_5_63 {
	text-align: center !important;
	background-color: #fff !important;
}
h1 {
	
}

/** Forms >> H1 Phone **/
#gform_5 h1 {
	font-size: 1.3em !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/** Forms >> Buttons **/
#gform_5 [type="submit"], 
#gform_5 [type="button"] {
	font-family: Arial !important;
	font-weight: bold !important;
	z-index: 990 !important;
}

/** Forms >> Buttons Multifile Upload **/
#field_5_11 .gpfup__select-files, 
#field_5_14 .gpfup__select-files, 
#field_5_34 .gpfup__select-files, 
#field_5_56 .gpfup__select-files, 
#field_5_30 .gpfup__select-files, 
#field_5_36 .gpfup__select-files, 
#field_5_32 .gpfup__select-files {
	color: rgba(255, 160, 0, 0.0) !important;
	background-color: rgba(255, 160, 0, 0.0) !important;
	z-index: 990 !important;
}

/** Forms >> Buttons Multifile Upload als Foto Icon **/
#gform_next_button_5_18, 
#gform_next_button_5_45, 
#gform_next_button_5_33, 
#gform_next_button_5_38, 
#gform_next_button_5_27, 
#gform_next_button_5_28 {
	width: 33.333vw !important;
	height: 10vh !important;
	margin: 0 !important;
	position: fixed !important;
	bottom: 0 !important;
	left: 66.666vw !important;
}
#gform_previous_button_5_18, 
#gform_previous_button_5_45, 
#gform_previous_button_5_33, 
#gform_previous_button_5_38, 
#gform_previous_button_5_27, 
#gform_previous_button_5_28 {
	width: 33.333vw !important;
	height: 10vh !important;
	margin: 0 !important;
	position: fixed !important;
	bottom: 0 !important;
	left: 0 !important;
}
.gpfup__select-files {
	position: fixed !important;
	width: 33.333vw !important;
	height: 10vh !important;
	margin: 0 !important;
	bottom: 0 !important;
	left: 33.333vw !important;
	z-index: 100 !important;
}
.button_kamera {
	position: fixed !important;
	width: 33.333vw !important;
	height: 10vh !important;
	margin: 0 !important;
	bottom: 0 !important;
	left: 33.333vw !important;
	z-index: 1 !important;
	background-color: var(--e-global-color-primary) !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: contain !important;
	background-image: url("https://online.gutachten-friess.de/wp-content/uploads/schadenapp/icon_kamera_weiss.gif") !important;
}

/** Forms >> Box maximale Anzahl Bilder erreicht **/
.gpfup__droprea--maxed::after {
	color: #ff0000 !important;
	background-color: var(--e-global-color-primary) !important;
	width: 33.333vw !important;
	height: 10vh !important;
	margin: 0 !important;
	position: fixed !important;
	bottom: 0 !important;
	left: 33.333vw !important;
	z-index: 1000 !important;
	content: "" !important;
}

/** Forms >> Buttons Next **/
.gform_next_button {
	width: 50vw !important;
	height: 10vh !important;
	margin: 0 !important;
	position: fixed !important;
	bottom: 0 !important;
	left: 50vw !important;
}
#gform_next_button_5_66 {
	width: 100vw !important;
	height: 10vh !important;
	margin: 0 !important;
	position: fixed !important;
	bottom: 0 !important;
	left: 0 !important;
}

/** Forms >> Buttons Previous **/
.gform_previous_button {
	width: 50vw !important;
	height: 10vh !important;
	margin: 0 !important;
	position: fixed !important;
	bottom: 0 !important;
	left: 0 !important;
}

/** Forms >> Button Submit **/
#gform_5 [type="submit"] {
	width: 50vw !important;
	height: 10vh !important;
	margin: 0 !important;
	position: fixed !important;
	bottom: 0 !important;
	left: 50vw !important;
}

/** Forms >> Button abbrechen **/
.gpfup__cropper__topbar .gpfup__cancel {
	background-color: var(--e-global-color-primary) !important;
}

/** Forms >> Button zuschneiden **/
.gpfup__cropper__topbar .gpfup__crop {
	background-color: #008800 !important;
}

/** Forms >> Icon image edit **/
.gpfup__edit {
	background-color: var(--e-global-color-primary) !important;
	display: none !important;
}

/** Forms >> Icon file delete **/
ul > li > .gpfup__file-actions {
	background-color: var(--e-global-color-primary) !important;
	margin-top: -10px !important;
	margin-right: -10px !important;
}

/** Forms >> Big Image Preview Multi TEST **/
.gpfup__file-info {
	display: none !important;
}
.gpfup-big-images .gpfup__files {
	background-color: #fff !important;
	box-shadow-x: none !important;
	padding: 33px 0 0 0 !important;
	margin-top: -33px !important;
	//margin: 0 -0.5rem 0 -0.5rem !important;
	border-width: 0 !important;
	border-style: none !important;
	display: -webkit-box !important;
	display: -moz-box !important;
	display: -ms-flexbox !important;
	display: -webkit-flex !important;
	display: flex !important;
	-webkit-flex-wrap: wrap !important;
	-moz-flex-wrap: wrap !important;
	-ms-flex-wrap: wrap !important;
	flex-wrap: wrap !important;
}
.gpfup-big-images .gpfup__file {
	width: calc( 33.333% - 1rem ) !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 0.5rem 1rem !important;
	background: rgba( 0, 0, 0, 0.9 ) !important;
	border-radius: 4px !important;
	overflow: hidden !important;
	min-height: 100px !important;
}
.gpfup-big-images .gpfup__preview {
	margin-right: 0 !important;
	display: grid !important;
}
.gpfup-big-images .gpfup__preview img {
	width: 100% !important;
	height: auto !important;
	display: block !important;
	margin: auto !important;
	border-radius: 0 !important;
}
.gpfup-big-images .gpfup__file-info {
	position: absolute !important;
	bottom: 0 !important;
	-webkit-transition: opacity .3s ease-in-out !important;
	transition: opacity .3s ease-in-out !important;
	width: 100% !important;
	border-radius: 0 0 4px 4px !important;
	padding: 0.5rem !important;
	color: #fff !important;
	background: #000 !important;
	background: linear-gradient(0deg, rgba(2, 0, 36, 1) 0%, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 100%) !important;
	margin: 0 !important;
}
.gpfup-big-images .gpfup__filesize {
	font-size: 0.8em !important;
}
.gpfup-big-images .gpfup__file-actions {
	top: 0.5rem !important;
	right: 0.5rem !important;
	position: absolute !important;
}
.gpfup-big-images .gpfup__delete {
	opacity: 0.7 !important;
	-webkit-transition: opacity 0.25s ease-out !important;
	transition: opacity 0.25s ease-out !important;
	width: 2.5rem !important;
	height: 2.5rem !important;
}
.gpfup-big-images .gpfup__delete svg {
	fill: white !important;
	width: 1.5rem !important;
	filter: drop-shadow( 0 0 1px black ) !important;
	-webkit-transition: filter 0.25s ease-out !important;
	transition: filter 0.25s ease-out !important;
}
.gpfup-big-images .gpfup__delete:hover {
	opacity: 1 !important;
}
.gpfup-big-images .gpfup--images-only .gpfup__preview {
	width: auto !important;
}
.gpfup-big-images .gpfup__delete:hover svg {
	filter: drop-shadow( 0 0 4px black ) !important;
}
.gpfup-big-images .gpfup__droparea {
	border-radius: 4px !important;
}
.gpfup-big-images .gpfup__edit {
	width: 4rem !important;
	height: 4rem !important;
	line-height: 1 !important;
}

/** Forms >> Big Image Preview Multi mittig positioniert **/
#field_5_34, 
#field_5_36 {
	margin: auto !important;
	display: block !important;
}

/** Forms >> Big Image Preview Single **/
.gpfup__file-info {
	display: none !important;
}
.gpfup-big-images-single .gpfup__files {
	box-shadow-x: none !important;
	padding: 0 !important;
	margin: 0 -0.5rem 0 -0.5rem !important;
	border-width: 0 !important;
	border-style: none !important;
	display: -webkit-box !important;
	display: -moz-box !important;
	display: -ms-flexbox !important;
	display: -webkit-flex !important;
	display: flex !important;
	-webkit-flex-wrap: wrap !important;
	-moz-flex-wrap: wrap !important;
	-ms-flex-wrap: wrap !important;
	flex-wrap: wrap !important;
}
.gpfup-big-images-single .gpfup__file {
	border: 0 !important;
	padding: 0 !important;
	margin: 0 0.5rem 1rem !important;
	background: rgba( 0, 0, 0, 0.9 ) !important;
	border-radius: 4px !important;
	overflow: hidden !important;
	min-height: 100px !important;
}
.gpfup-big-images-single .gpfup__preview {
	margin-right: 0 !important;
	display: grid !important;
}
.gpfup-big-images-single .gpfup__preview img {
	width: calc( 100% - 0rem ) !important;
	height: auto !important;
	display: block !important;
	margin: auto !important;
	border-radius: 0 !important;
}
.gpfup-big-images-single .gpfup__file-info {
	position: absolute !important;
	bottom: 0 !important;
	-webkit-transition: opacity .3s ease-in-out !important;
	transition: opacity .3s ease-in-out !important;
	width: 100% !important;
	border-radius: 0 0 4px 4px !important;
	padding: 0.5rem !important;
	color: #fff !important;
	background: #000 !important;
	background: linear-gradient(0deg, rgba(2, 0, 36, 1) 0%, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 100%) !important;
	margin: 0 !important;
}
.gpfup-big-images-single .gpfup__filesize {
	font-size: 0.8em !important;
}
.gpfup-big-images-single .gpfup__file-actions {
	top: 0.5rem !important;
	right: 0.5rem !important;
	position: absolute !important;
}
.gpfup-big-images-single .gpfup__delete {
	opacity: 0.7 !important;
	-webkit-transition: opacity 0.25s ease-out !important;
	transition: opacity 0.25s ease-out !important;
	width: 2.5rem !important;
	height: 2.5rem !important;
}
.gpfup-big-images-single .gpfup__delete svg {
	fill: white !important;
	width: 1.5rem !important;
	filter: drop-shadow( 0 0 1px black ) !important;
	-webkit-transition: filter 0.25s ease-out !important;
	transition: filter 0.25s ease-out !important;
}
.gpfup-big-images-single .gpfup__delete:hover {
	opacity: 1 !important;
}
.gpfup-big-images-single .gpfup--images-only .gpfup__preview {
	width: auto !important;
}
.gpfup-big-images-single .gpfup__delete:hover svg {
	filter: drop-shadow( 0 0 4px black ) !important;
}
.gpfup-big-images-single .gpfup__droparea {
	border-radius: 4px !important;
}
.gpfup-big-images-single .gpfup__edit {
	width: 4rem !important;
	height: 4rem !important;
	line-height: 1 !important;
}

/** Forms >> Big Image Preview Single mittig positioniert Copy 1 **/
#field_5_11, 
#field_5_14, 
#field_5_30, 
#field_5_32 {
	margin: auto !important;
	display: block !important;
}

/** Forms >> Big Image Preview Single Höhe 60% Bildschirm **/
.gpfup-big-images-single img {
	max-height: 60vh !important;
}

/** Forms >> Box Validation Errors **/
#gform_5_validation_container {
	width: 98% !important;
	padding: 1% !important;
	margin-right: 1% !important;
	margin-left: 1% !important;
}
.gfield_validation_message {
	display: none !important;
}

/** Forms >> Box Validation Errors Icon invisible **/
.gform-icon {
	display: none !important;
}

/** Forms >> .wichtig **/
.wichtig {
	color: rgb(255, 0, 0) !important;
	font-weight: 400 !important;
}

/** Forms >> Box Max Dateigröße und Anzahl ausblenden **/
#gform_5 .gform_fileupload_rules {
	display: none !important;
}

/** Forms >> Box Uploaded Files Shadow off **/
ul.gpfup__files {
	box-shadow: 0 0 0 0 !important;
	z-index: 10 important! !important;
	//width: 100% !important;
	//background-color: rgb(71, 205, 85) !important;
}

/** Forms >> Handy drehen Hinweis **/
.handy_drehen_hinweis_icon {
	width: 100px !important;
	height: 100px !important;
	margin-top: -50px !important;
	margin-left: -50px !important;
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	display: none !important;
}

/** Forms >> Beispielfotos **/
.beispielfoto {
	background-color: #ffffffdd !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: contain !important;
	width: 40vw !important;
	height: 40vh !important;
	margin-top: -20vh !important;
	margin-left: -20vw !important;
	position: fixed !important;
	top: 50vh !important;
	left: 50vw !important;
	z-index: -1 !important;
	background-blend-mode: overlay !important;
}
.kilometerstand {
	background-image: url("https://online.gutachten-friess.de/wp-content/uploads/schadenapp/beispiel_foto_kilometerstand.jpg") !important;
}
.vornerechts {
	background-image: url("https://online.gutachten-friess.de/wp-content/uploads/schadenapp/beispiel_foto_vorne-rechts.jpg") !important;
}
.hintenlinks {
	background-image: url("https://online.gutachten-friess.de/wp-content/uploads/schadenapp/beispiel_foto_hinten-links.jpg") !important;
}
.schadenbereich {
	background-image: url("https://online.gutachten-friess.de/wp-content/uploads/schadenapp/beispiel_foto_schadenbereich.jpg") !important;
}
.schadendetails {
	background-image: url("https://online.gutachten-friess.de/wp-content/uploads/schadenapp/beispiel_foto_schadendetails.jpg") !important;
}
.fahrzeugschein {
	background-image: url("https://online.gutachten-friess.de/wp-content/uploads/schadenapp/fahrzeugschein_vorderseite.jpg") !important;
	background-color: #ffffff88 !important;
}

/** Forms >> Beispielfoto overlay **/
.gpfup--has-files, 
#gform_multifile_upload_5_14 .gpfup--has-files, 
#gform_multifile_upload_5_34 .gpfup--has-files, 
#gform_multifile_upload_5_36 .gpfup--has-files {
	background-color: #fff !important;
	width: 98% !important;
	min-height: 80vh !important;
	position: relative !important;
}

/** Forms >> Html **/
html {
	background-color: rgba(255, 255, 255, 0) !important;
}

/** Forms >> DropArea unsichtbar .gpfup__droparea **/
.gpfup__droparea {
	background-color: rgba(0, 0, 0, 0) !important;
	border-width: 0 !important;
	border-style: hidden !important;
	display: inline !important;
}


/*= Was ist passiert ========== */

/** Was ist passiert >> Was ist passiert H1 **/
#field_5_26 h1 {
	font-size: 1.3em !important;
	text-align: center !important;
	margin-bottom: 20px !important;
}

/** Was ist passiert >> Was ist passiert BUTTONS **/
/* Buttonize Radio & Checkbox Fields */ .gform_wrapper .gfield.buttonized .gfield_radio .gchoice, 
.gform_wrapper .gfield.buttonized .gfield_checkbox .gchoice {
	
}
.gform_wrapper .gfield.buttonized .gfield_radio .gchoice, 
.gform_wrapper .gfield.buttonized .gfield_checkbox .gchoice {
	border-radius: 3px !important;
	color: rgb(255, 255, 255) !important;
	font-weight: 400 !important;
	position: relative !important;
	text-align: center !important;
}
.gform_wrapper .gfield.buttonized input[type="radio"], 
.gform_wrapper .gfield.buttonized input[type="checkbox"] {
	position: absolute !important;
	left: -9999px !important;
}
.gform_wrapper .gfield.buttonized .gfield_radio label, 
.gform_wrapper .gfield.buttonized .gfield_checkbox label {
	width: 400px !important;
	position: relative !important;
	max-width: 98% !important;
	padding: 1em !important;
	font-size: 20px !important;
	border: 1px solid #3f3f3f !important;
	background-color: #cccccc !important;
	cursor: pointer !important;
}
.gform_wrapper .gfield.buttonized input[type="radio"]:focus+label, 
.gform_wrapper .gfield.buttonized input[type="checkbox"]:focus+label {
	border-color: #040404 !important;
}
.gform_wrapper .gfield.buttonized input[type="radio"]:checked+label, 
.gform_wrapper .gfield.buttonized input[type="checkbox"]:checked+label {
	border-color: #040404 !important;
	background-color: var(--e-global-color-primary) !important;
	overflow: hidden !important;
}
.gform_wrapper .gfield.buttonized input[type="radio"]:checked+label::before, 
.gform_wrapper .gfield.buttonized input[type="checkbox"]:checked+label::before {
	/*
	content: '';
	display: block;
	position: absolute;
	top: -.75em;
	right: -.75em;
	left: auto;
	width: 1.5em;
	height: 1.5em;
	background-color: #e1b653;
	border-radius: 0;
	border: 0;
	transform: rotate(45deg);
*/
}
.gform_wrapper .gfield.buttonized .gfield_radio label::before, 
.gform_wrapper .gfield.buttonized .gfield_checkbox label::before {
	display: none !important;
}

/** Was ist passiert >> Was ist passiert BUTTONS2 **/
#field_5_65 {
	text-align: center !important;
	z-index: 99 !important;
}
#label_5_65_0 {
	margin-bottom: 20px !important;
}

/** Was ist passiert >> Was ist passiert Button Runde Ecken **/
#label_5_65_0, 
#label_5_65_1 {
	font-size: 18px !important;
	border-radius: 3px !important;
}

/** Was ist passiert >> Können nicht helfen **/
#koennennichthelfen {
	font-size: 18px !important;
	font-weight: 400 !important;
	text-align: center !important;
	margin-right: 20vw !important;
	margin-left: 20vw !important;
}

/** Was ist passiert >> Button Blocker **/
#buttonblocker {
	background-color: rgb(255, 255, 255) !important;
	width: 100vw !important;
	height: 10vh !important;
	position: fixed !important;
	bottom: 0 !important;
	left: 0 !important;
	z-index: 1000 !important;
}


/*( Desktop )*/
@media (min-width: 1140px) {
	/** Forms >> Box Vorbereitung Text **/
	.vorbereitungen {
	width: 60% !important;
	padding: 10px !important;
	position: relative !important;
	top: 30% !important;
	left: 20% !important;
}

}


/*( Phone )*/
@media (max-width: 480px) {
	/** Forms >> Wrapper Eingabebereich **/
	#gform_5 {
	padding: 2% 5% 2% 5% !important;
}

	/** Forms >> Box Vorbereitung Text **/
	.vorbereitungen {
	width: 100% !important;
	padding: 0 !important;
	position: relative !important;
	top: 0 !important;
	left: 0 !important;
}

	/** Forms >> Box Uploaded Files Shadow off **/
	ul.gpfup__files {
	padding-bottom: 20vh !important;
}

	/** Forms >> Box Drag&Drop Text invisible on mobile **/
	div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > span:nth-of-type(1) {
	display: none !important;
}

	/** Forms >> DropArea unsichtbar .gpfup__droparea **/
	.gpfup__droparea {
	width: 80vw !important;
	height: 40vh !important;
	margin-top: -20vh !important;
	margin-left: -40vw !important;
	position: fixed !important;
	top: 50vh !important;
	left: 50vw !important;
	z-index: 99 !important;
}

	/** Was ist passiert >> Können nicht helfen **/
	#koennennichthelfen {
	margin-top: 5vw !important;
	margin-right: 2vw !important;
	margin-left: 2vw !important;
}

}


/*( Portrait )*/
@media (orientation:portrait) {
	/** Forms >> Box Drag&Drop invisible in portrait format **/
	#gform_multifile_upload_5_11 .gpfup__droparea {
	//display: none !important;
}

	/** Forms >> Beispielfotos **/
	.beispielfoto {
	width: 80vw !important;
	height: 36vh !important;
	margin-top: -18vh !important;
	margin-left: -40vw !important;
}

}


/*( Landscape )*/
@media (orientation:landscape) {
	/** Forms >> Box Vorbereitung Text **/
	.vorbereitungen {
	width: 80% !important;
	padding: 10px !important;
	position: relative !important;
	left: 10% !important;
}

	/** Forms >> Box Drag&Drop Text invisible on mobile **/
	div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > span:nth-of-type(1) {
	display: none !important;
}

	/** Forms >> Handy drehen Hinweis **/
	.handy_drehen_hinweis_icon {
	display: none !important;
}

}