Josef-Hehmann-Site-Package/Resources/Public/Css/default_form_powermail.scss

.form {	
	background: $color_white;
	color: $color_darkgrey;
	.col, .mb-3 {
		//position: relative;
		margin-bottom: 2rem !important;
		@media (max-width: 1024px) {
			flex: 1 0 100%;
		}
	}
	.powermail_legend {
		display: none;
	}
	.powermail_fieldwrap_formularabschicken {
		width: 100%;
	}
	.powermail_fieldwrap_loesensiedieaufgabe{
		.powermail_field{
			width: calc(90% - 200px);
		}
	}
	.powermail_fieldwrap_type_submit {
		flex: 0 0 auto;
		width: 100%;
		text-align: center;
		margin-bottom: 0 !important;
	}
	.powermail_fieldwrap {
		&.col-md-6 {
			&:nth-of-type(even) {
				padding-right: 0;
				@media (max-width: 1024px){
					padding: 0;
				}
			}
			&:nth-of-type(odd) {
				padding-left: 0;
				@media (max-width: 1024px){
					padding: 0;
				}
			}
		}
		&.col-md-12 {
			padding: 0;
		}
	}
    .powermail_fieldwrap_type_check{
        .powermail_field {
            padding-left: 10px;
            .checkbox {
                input{
                    height: auto;
                    opacity: 0;
                    position: absolute;
                    &:checked{
                        + span:not(.required){
                            &:before{
                                content: "\F271";
                                animation: effect 250ms ease-in;
                            }
                        }
                    }
                }
                span:not(.required){
                    &:before{
                        content: "\F584";
                        display: inline-block;
                        font-family: bootstrap-icons !important;
                        font-style: normal;
                        font-weight: normal !important;
                        font-variant: normal;
                        text-transform: none;
                        line-height: 1;
                        vertical-align: -0.125em;
                        -webkit-font-smoothing: antialiased;
                        -moz-osx-font-smoothing: grayscale;
                        margin-left: -10px;
                        margin-right: 5px;
                    }
                }
                &.parsley-error {
                    input, span:not(.required)  {
                        &::before {
                            color: $color_red;
                        }
                    }
                }
            }
            .parsley-errors-list {
                position: relative;
                right: inherit;
                left: -10px;
                top: 5px;
            }
        }
    }
    
	.input-container {
		position: relative;
		border-radius: 0;
		input, textarea {
			background-color: rgba($color_grey,0.10);
			border: 0;
			outline: none;
			transition: .2s ease-in-out;
			box-sizing: border-box;
			width: 100%;
			height: 50px;
			//font-size: 1rem;
			color: $color_basic;
			//font-weight: 700;
			border-radius: 0;
			padding: 0 15px;
			&:valid {
				+ label {
					/*color: $darkergrey;
					font-size: 0.8rem;
    				top: -35px;
    				left: 0;
					pointer-events: none;*/
				}
			}
			&:focus {
				border-bottom: 1px solid $color_brand;
				+ label {
					color: $color_basic;
					font-size: 0.8rem;
					top: -35px;
					left: 0;
					pointer-events: none;
				}
			}
			&.parsley-error {
				border: 1px solid $color_red;
			}
		}
		label {
			top: 0;
			left: 15px;
			right: 0;
			color: $color_basic;
			display: flex;
			align-items: center;
			position: absolute;
			//font-size: 1.25rem;
			font-weight: 300;
			cursor: text;
			transition: .2s ease-in-out;
			box-sizing: border-box;
			width: 100%;
			height: 50px;
		}
		textarea {
			padding-top: 13px;
			min-height: 150px;
		}
	}
	.headline {
		color: $color_white;
	}
	input, textarea {
		border-radius: 0;
		border: none;
		//width: 100%;
	}
	.powermail_fieldwrap_type_select {
		position: relative;
		float: left;
		select {
			width: 100%;
			background: #edf0f0;
            background-color: rgba($color_grey,0.10);
			color: $color_basic;
			font-weight: 300;
			padding-left: 15px;
			border: none;
			height: 50px;
			appearance: none;
			background-image: url(../img/midland-it-arrow-abstract-space.svg);
			background-repeat: no-repeat;
			background-position: right;
			background-size: 25px;
			&.parsley-error {
				border: 1px solid $color_red;	
			}
		}
		label {
//			font-size: 0.8rem;
//			top: -20px;
//			position: absolute;
		}
		
	}
	.powermail_fieldwrap_type_file {
		position: relative;
		float: left;
		margin-top: 10px;
		label {
			font-size: 0.8rem;
    		top: -20px;
    		position: absolute;
		}
	}
	.button, input[type="submit"] {
		position: relative;
		float: right;
		float: none;
		color: $color_white;
		background: $color_brand;
		width: inherit;
		padding: 10px 15px;
		text-decoration: none;
		margin-top: 1rem;
		border: none;
		border-radius: 0;
		@include fade();
		&:hover {
			background: $color_white;
			color: $color_red;
		}
	}
	.powermail_captcha {
		padding-left: 200px !important;
	}
	.powermail_captchaimage {
		position: absolute;
		right: 0;
		height: 50px;
		@media (max-width: 768px) {
			position: relative;
			float: left;
			right: inherit;
			margin-top: 15px;
		}
	}
	.parsley-errors-list {
		position: absolute;
		right: 5px;
		top: 5px;
		top: -20px;
		color: $color_red;
		li {
			list-style: none;
			font-size: .8rem;
		}
	}
	h3{
		display: none;
	}
//	form{
//		position: relative;
//    	float: left;
//   	width: 100%;
//    	padding-top: 0;
//    	padding-bottom: 0;
//	}
	&.section{
		padding-top: 3rem;
		.h1{
			margin-bottom: 1rem;
		}
	}
}

@keyframes effect{
    0%{transform: scale(0);}
    25%{transform: scale(1.1);}
    75%{transform: scale(1.2);}
    100%{transform: scale(1);}
}