.elementor-9885 .elementor-element.elementor-element-c4b010e:not(.elementor-motion-effects-element-type-background), .elementor-9885 .elementor-element.elementor-element-c4b010e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.nustyleshutters.com.au/wp-content/uploads/2024/05/refer-friends2.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-9885 .elementor-element.elementor-element-c4b010e{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:50px 0px 50px 0px;}.elementor-9885 .elementor-element.elementor-element-c4b010e > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-bc-flex-widget .elementor-9885 .elementor-element.elementor-element-a422bd3.elementor-column .elementor-widget-wrap{align-items:flex-end;}.elementor-9885 .elementor-element.elementor-element-a422bd3.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:flex-end;align-items:flex-end;}.elementor-9885 .elementor-element.elementor-element-024993f > .elementor-widget-container{padding:0px 0px 0px 5px;}.elementor-9885 .elementor-element.elementor-element-024993f .elementor-heading-title{font-size:55px;line-height:58px;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#FFFFFF;}.elementor-9885 .elementor-element.elementor-element-7326ddb > .elementor-widget-container{padding:0px 0px 0px 5px;}.elementor-9885 .elementor-element.elementor-element-7326ddb .elementor-heading-title{font-size:55px;line-height:58px;color:#000000;}.elementor-bc-flex-widget .elementor-9885 .elementor-element.elementor-element-09fc82a.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-9885 .elementor-element.elementor-element-09fc82a.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-9885 .elementor-element.elementor-element-09fc82a > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){margin-bottom:10px;}.elementor-9885 .elementor-element.elementor-element-09fc82a > .elementor-element-populated{border-style:solid;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:29px 35px 29px 035px;}.elementor-9885 .elementor-element.elementor-element-09fc82a > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-9885 .elementor-element.elementor-element-7cbde9c > .elementor-widget-container{padding:0px 0px 0px 5px;}.elementor-9885 .elementor-element.elementor-element-7cbde9c .elementor-heading-title{font-size:21px;color:var( --e-global-color-7a726ca );}.elementor-9885 .elementor-element.elementor-element-05456c9 > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:solid;border-width:10px 0px 0px 0px;border-color:var( --e-global-color-7b53b7d5 );border-radius:15px 15px 15px 15px;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}.elementor-9885 .elementor-element.elementor-element-448269a:not(.elementor-motion-effects-element-type-background), .elementor-9885 .elementor-element.elementor-element-448269a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FAFAFA;}.elementor-9885 .elementor-element.elementor-element-448269a > .elementor-container{max-width:943px;}.elementor-9885 .elementor-element.elementor-element-448269a{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:0px;padding:80px 30px 80px 0px;}.elementor-9885 .elementor-element.elementor-element-448269a > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-9885 .elementor-element.elementor-element-5522a71{text-align:center;}@media(max-width:1024px) and (min-width:768px){.elementor-9885 .elementor-element.elementor-element-a422bd3{width:100%;}.elementor-9885 .elementor-element.elementor-element-09fc82a{width:100%;}}@media(max-width:1024px){.elementor-9885 .elementor-element.elementor-element-7326ddb > .elementor-widget-container{padding:80px 20px 30px 20px;}.elementor-9885 .elementor-element.elementor-element-7326ddb{text-align:center;}.elementor-9885 .elementor-element.elementor-element-7326ddb .elementor-heading-title{font-size:46px;}.elementor-9885 .elementor-element.elementor-element-7cbde9c{text-align:center;}}@media(max-width:767px){.elementor-9885 .elementor-element.elementor-element-7326ddb > .elementor-widget-container{padding:0px 5px 5px 5px;}.elementor-9885 .elementor-element.elementor-element-09fc82a > .elementor-element-populated{padding:0px 10px 0px 10px;}.elementor-9885 .elementor-element.elementor-element-7cbde9c .elementor-heading-title{font-size:16px;}.elementor-9885 .elementor-element.elementor-element-448269a{padding:50px 30px 50px 0px;}.elementor-9885 .elementor-element.elementor-element-328b76a{text-align:left;}}/* Start custom CSS for html, class: .elementor-element-05456c9 *//*-----     these rules require an ID to override because AC      ------
  -----     also uses an ID to apply the default styles.          -----*/
  
        
/*remove default margin applied by AC and add padding between form and border*/
#ac-form-referral-pages form {
    margin-top:0;
    padding: 15px 15px 100px 15px;
    max-width: 100%;
}

/*this applies the font size and font family to everything inside the form*/
#ac-form-referral-pages form ._form_element *{
    font-size: 17.5px;
    font-family:"Stratumno Regular";
}

/*style the submit button*/
#ac-form-referral-pages button {
    width:100%;
    font-family:"Stratumno Medium" !important;
    font-size:20px !important;
    background-color: #ff4713 !important;
    margin-top:0px;
}

/*this styles the text inputs. We indent the content to allow for the icon*/
#ac-form-referral-pages form input[type="text"]{
    height: 50px;
    border-radius: 5px;
    border-color: rgba(129,129,129,.23);
    text-indent:30px;
    font-size:20px;
    background-color: rgba(235,235,235,.5)
}

/*this applies the orange border when the inputs are active*/
#ac-form-referral-pages form input:focus{
    border: solid 2px var(--e-global-color-7b53b7d5);
}

/*This applies the border and styles to the 'I am interested in' checkbox fieldset, and applies flex box so it can go in two columns*/
#ac-form-referral-pages form ._form_element ._form-fieldset {
    border-radius: 5px;
    border-color: rgba(129,129,129,.23);
    border-width:1px;
    border-style:solid;
    padding:10px;
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
}

#ac-form-referral-pages ._row._checkbox-radio input[type="checkbox"]{
    margin-right : 5px !important;
}

#ac-form-referral-pages ._html-code {
    margin: 12px 0px -29px 5px;
    font-weight: bold;
    padding: 0px;
    
}

/*---------the other rules below just use the .elementor-9885 .elementor-element.elementor-element-05456c9 .elementor-9885 .elementor-element.elementor-element-05456c9---------*/

/*this applies the user icon to the name field*/
.elementor-9885 .elementor-element.elementor-element-05456c9 form ._form_element:nth-child(2) input[type="text"], 
.elementor-9885 .elementor-element.elementor-element-05456c9 form ._form_element:nth-child(7) input[type="text"] {
    background: url("/wp-content/uploads/2020/06/user-regular-1.svg") no-repeat scroll 10px 15px white;
    display: block;
    background-size:15px;
}

/*this applies the envelope icon to the email field*/
.elementor-9885 .elementor-element.elementor-element-05456c9 form ._form_element:nth-child(3) input[type="text"],
.elementor-9885 .elementor-element.elementor-element-05456c9 form ._form_element:nth-child(8) input[type="text"] {
    background: url("/wp-content/uploads/2020/06/envelope-regular-1.svg") no-repeat scroll 10px 15px white;
    display: block;
    background-size:15px;
}

/*this applies the phone icon to the phone number field*/
.elementor-9885 .elementor-element.elementor-element-05456c9 form ._form_element:nth-child(4) input[type="text"],
.elementor-9885 .elementor-element.elementor-element-05456c9 form ._form_element:nth-child(9) input[type="text"]{
    background: url("/wp-content/uploads/2024/03/phone-solid-1.svg") no-repeat scroll 10px 15px white;
    display: block;
    background-size:15px;
}

/*this applies the map marker icon to the suburb field*/
.elementor-9885 .elementor-element.elementor-element-05456c9 form ._form_element:nth-child(10) input[type="text"]{
    background: url("/wp-content/uploads/2020/08/map-marker-alt-solid.svg") no-repeat scroll 10px 15px white;
    display: block;
    background-size:15px;
}

/*make the checkbox labels clickable and the right size*/
.elementor-9885 .elementor-element.elementor-element-05456c9 form ._checkbox-radio label{
    font-size: 17.5px;
    position: relative;
    cursor: pointer;
}
/*this styles inputs of type 'checkbox' and uses the appearance property instead of display. for more info, check out the documentation on this on MDN docs:
https://developer.mozilla.org/en-US/docs/Web/CSS/appearance#apply_custom_styling */

.elementor-9885 .elementor-element.elementor-element-05456c9 ._checkbox-radio input[type=checkbox] {
    appearance:none;
    width:15px !important;
    height:15px !important;
    border:1px solid rgba(129, 129, 129, 0.4);
    border-radius:3px;
    font-size:20px;
    line-height:30px;
    padding-block:3px;
    vertical-align:middle;
}
/*this applies the permanent orange border of 1px when checked and not in focus*/
.elementor-9885 .elementor-element.elementor-element-05456c9 ._checkbox-radio input[type=checkbox]:checked{
    border-color:var(--e-global-color-7b53b7d5);
}

/*this is the unchecked style for the 'before' pseudo .elementor-9885 .elementor-element.elementor-element-05456c9*/
.elementor-9885 .elementor-element.elementor-element-05456c9 ._checkbox-radio input[type=checkbox]:before {
    content: "";
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    display: block;
    font-size:20px;
}

/*this is the checked styling. The margins method is hacky but it works! The transition property makes the tick smoothly slide in and out, instead of being janky. */
.elementor-9885 .elementor-element.elementor-element-05456c9 ._checkbox-radio input[type=checkbox]:checked:before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    color: #ff4713;
    font-size: 15px;
    font-weight: 900;
    transition: all .25s linear 0s;
    margin-top:-12px;
    margin-left:2px;
}

/*make the fieldset label (I am interested in) full width*/
.elementor-9885 .elementor-element.elementor-element-05456c9 form fieldset>._row:first-child{
    flex-basis:100%;
}

/*Apply a little bottom margin on all items inside the fieldset*/
.elementor-9885 .elementor-element.elementor-element-05456c9 form fieldset>._row{
    margin-bottom:5px;
}

/*make the first column a bit narrower and add some space*/
.elementor-9885 .elementor-element.elementor-element-05456c9 form fieldset>._row:nth-child(3), .elementor-9885 .elementor-element.elementor-element-05456c9 form fieldset>._row:nth-child(5){
    flex-basis:40%;
    margin-right:20px;
}

/*make the second column a bit wider*/
.elementor-9885 .elementor-element.elementor-element-05456c9 form fieldset>._row:nth-child(6), .elementor-9885 .elementor-element.elementor-element-05456c9 form fieldset>._row:nth-child(4){
    flex-basis:calc(60%-20px);
}

/*apply the checkbox icon to the legend label*/
.elementor-9885 .elementor-element.elementor-element-05456c9 ._form_element legend._form-label:before{
    content: "\f14a";
    font-family: "Font Awesome 5 Free";
    padding-right: 5px;
    color: #666;
    font-weight: 900;
}



/*this uses an id to force the hover styles - we should avoid this if possible*/
.elementor-9885 .elementor-element.elementor-element-05456c9 #_form_13_submit:hover{
    background-color: #FF6235 !important;
    -webkit-transition: all .25s linear 0s;
    transition: all .25s linear 0s;
}

/*add the disclaimer after the button*/
.elementor-9885 .elementor-element.elementor-element-05456c9 ._button-wrapper:after{
content:"*by submitting this free quote request I agree to NSS Privacy Policy";
font-size:14px;
text-align:center;
display:block;
margin-top:5px;
font-family:'Stratumno Regular';
}

/* break the fields into two columns */

.elementor-9885 .elementor-element.elementor-element-05456c9 ._form-content{
    grid-template-columns: 49% 49%;
    display: grid;
    grid-gap: 2%;
}

.elementor-9885 .elementor-element.elementor-element-05456c9 form ._form_element:nth-child(1),
.elementor-9885 .elementor-element.elementor-element-05456c9 form ._form_element:nth-child(6),
.elementor-9885 .elementor-element.elementor-element-05456c9 form ._form_element:nth-child(11) {
    grid-column: 3 / 1;
}



.elementor-9885 .elementor-element.elementor-element-05456c9 form ._button-wrapper{
    grid-column: 3 / 1;
    
}

/* media queries */

@media only screen and (max-width: 565px) {
  .elementor-9885 .elementor-element.elementor-element-05456c9 ._form-fieldset ._row{
    flex-basis:100% !important;
    margin-right:0 !important;
  }
  .elementor-9885 .elementor-element.elementor-element-05456c9 ._form-content{
    grid-template-columns: 100%;
    display: block;
    grid-gap: 0%;
  }
  #ac-form-referral-pages form {
    padding: 15px;
  }
  #ac-form-referral-pages ._html-code {
    margin: 12px 0px -10px 5px;
    font-weight: bold;
    padding: 0px;
    
}

  
}/* End custom CSS */