/*LP Lead Block Style*/

/*LP Lead Submit Container*/
#lp-lead-submit-success,
#lp-lead-submit-error {
    display: none;
}

#lp-lead-submit-container {
	display:none;	
}

/* container block in wp admin .is-style-overflow-item has position: relative, z-index 1000*/
#lp-lead-submit-container.is-displayed {
	margin-top: 0px;	
    display: flex; 
	flex-direction: column;
	justify-content: center;
	align-items: center;	
	position: absolute;	
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border: 1px solid var(--wp--preset--color--medium-light-grey);
	background-color: var(--wp--preset--color--pale-grey);
}

/*LP Lead Form*/
#mps-lp-lead-downloads {
	margin-top: 24px;
	border: 1px solid var(--wp--preset--color--dark-grey);
    color: var(--wp--preset--color--dark-grey);
	padding: 20px;
	display: grid;
	row-gap: 10px;
	column-gap: 1%;	
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-areas:
	"firstname firstname lastname lastname"
	"titlerole titlerole company company"
	"email email phone phone"
	"selectlabel selectlabel selectlabel selectlabel"
	"checkbox1 checkbox1 checkbox1 checkbox1" 
	"checkbox2 checkbox2 checkbox2 checkbox2"
	"checkbox3 checkbox3 checkbox3 checkbox3"   
	"errortext errortext errortext errortext"
	"sendbtn sendbtn sendbtn sendbtn"
	;
}

#mps-lp-lead-downloads .mps-form-group.firstname {
	grid-area: firstname;
}

#mps-lp-lead-downloads .mps-form-group.lastname {
	grid-area: lastname;
}

#mps-lp-lead-downloads .mps-form-group.titlerole {
	grid-area: titlerole;
}

#mps-lp-lead-downloads .mps-form-group.company {
	grid-area: company;
}

#mps-lp-lead-downloads .mps-form-group.email {
	grid-area: email;
}

#mps-lp-lead-downloads .mps-form-group.phone {
	grid-area: phone;
}

#mps-lp-lead-downloads .mps-form-group.selectlabel {
	grid-area: selectlabel;
}

#mps-lp-lead-downloads .mps-form-group.checkbox1 {
	grid-area: checkbox1;
}

#mps-lp-lead-downloads .mps-form-group.checkbox2 {
	grid-area: checkbox2;
}

#mps-lp-lead-downloads .mps-form-group.checkbox3 {
	grid-area: checkbox3;
}

#mps-lp-lead-downloads .mps-form-group.checkbox4 {
	grid-area: checkbox4;
}

#mps-lp-lead-downloads .mps-form-group.errortext {
	grid-area: errortext;
}

#mps-lp-lead-downloads .mps-form-group.sendbtn {
	grid-area: sendbtn;
}

/* .lp-lead-inner-container {
	margin-top: 0;
} */

.lp-lead-downloads-form-container {
	margin-top: 0;
}

.lp-lead-downloads-form-container h2.wp-block-heading {
	/* line-height: 1; */
	margin-top: 0;
	margin-bottom: 0;
	text-align: center;
}

h2.is-hidden,
#mps-lp-lead-downloads.is-hidden {
	display: none;
}

#mps-lp-lead-downloads div.error-text {
	display: none;
}

#mps-lp-lead-downloads div.error-text.is-displayed {
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--medium-orange);
	margin-top: 0;
	margin-bottom:0;
}

#mps-lp-lead-downloads .mps-form-group input[type="submit"] {	
    padding: 0.667em 1.333em;
    background-color: transparent;
    border-radius: 0px;
    border: 1px solid var(--wp--preset--color--dark-grey);
    color: var(--wp--preset--color--dark-grey);
    width: auto !important;
    margin-top: 1.25rem;
	font-family: var(--wp--preset--font-family--oswald);
	font-weight: 400;
	text-transform: uppercase;	
}

#mps-lp-lead-downloads .mps-form-group input[type="submit"]:hover {
    border: 1px solid var(--wp--preset--color--medium-orange);
    color: var(--wp--preset--color--medium-orange);
}

/* #mps-lp-lead-downloads .mps-form-group input:focus {
	outline: none;
	border: 1px solid rgba(0, 0, 0, 0.1);
} */

#mps-lp-lead-downloads .mps-form-group input.margin-top-zero {
	margin-top: 0px;
}

.lp-lead-downloads-sending-container,
.lp-lead-downloads-response-container {
	display: none;
}

.lp-lead-downloads-sending-container.is-displayed,
.lp-lead-downloads-response-container.is-displayed {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;	
	padding-left: 5%;
	padding-right: 5%;		
	animation: fade_in_show 0.5s;
}

@keyframes fade_in_show {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* animated submit spinner*/
#submit-spinner {
	width: 80px;
	height: 80px;
	border: 6px solid #f8f8f8;
	border-top: 6px solid var(--wp--preset--color--medium-green);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}
  
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

#lp-lead-downloads-submit-success,
#lp-lead-downloads-submit-error {
	display: none;
	text-align: center;
}

#lp-lead-downloads-submit-success.is-displayed,
#lp-lead-downloads-submit-error.is-displayed {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	/* width: 500px; */
}

#lp-lead-downloads-submit-success.is-displayed h2,
#lp-lead-downloads-submit-error.is-displayed h2 {
	font-size: 28px;
}

#lp-lead-downloads-submit-success.is-displayed .close-submit-container,
#lp-lead-downloads-submit-error.is-displayed .close-submit-container {
    margin-top: 24px;
    background-color: var(--wp--preset--color--medium-green);
	color: var(--wp--preset--color--white);
	border: 0px;
	border-radius: 0px;
	font-family: var(--wp--preset--font-family--oswald);
    font-size: var(--wp--preset--font-size--small);
    padding: calc(0.667em + 2px) calc(0.667em + 2px) !important;
	text-transform: uppercase;	
	transition: width .3s ease-out;
}

#lp-lead-downloads-submit-success.is-displayed .close-submit-container:hover,
#lp-lead-downloads-submit-error.is-displayed .close-submit-container:hover {
    background-color: var(--wp--preset--color--medium-green-alpha-6);
}

/* animated sending text used in Build Your System*/
.sending {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: var(--wp--preset--font-size--medium-large);
	text-transform:uppercase;
	width:150px;
	text-align:center;
	line-height:50px;
	position:absolute;
	left:0;right:0;top:50%;
	margin:auto;
	transform:translateY(-50%);
}
  
.sending span {
	position:relative;
	z-index:999;
	color:var(--wp--preset--color--white);
}

@keyframes sendingBefore {
	0%   {transform:translateX(-14px);}
	50%  {transform:translateX(14px);}
	100% {transform:translateX(-14px);}
}

.sending:before {
	content:'';
	background: var(--wp--preset--color--medium-green);
	width:128px;
	height:36px;
	display:block;
	position:absolute;
	top:0;left:0;right:0;bottom:0;
	margin:auto;
	animation:2s sendingBefore infinite ease-in-out;
}
  
@keyframes sendingAfter {
	0%   {transform:translateX(-50px);}
	50%  {transform:translateX(50px);}
	100% {transform:translateX(-50px);}
}
  
.sending:after {
	content:'';
	background :var(--wp--preset--color--medium-orange);
	width:14px;
	height:60px;
	display:block;
	position:absolute;
	top:0;left:0;right:0;bottom:0;
	margin:auto;
	opacity: .7;
	animation:2s sendingAfter infinite ease-in-out;
}




@media (max-width:800px) {
    #mps-lp-lead-downloads {
        display: flex;
        flex-wrap: wrap;
        gap: 5px 10px;
    }
    #mps-lp-lead-downloads .mps-form-group {        
        flex: 1 1 98%;
        
    }
}