/* 
Theme Name: Instilled Hello Elementor Child 
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Instilled Ltd for GorillaTax
Author: Instilled Ltd
Author URI: https://instilled.co.uk/
Template: hello-elementor
Version: 1.0.8
Text Domain: hello-elementor-instilled
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/


/* Hello theme overrides */

a {
    color: var(--e-global-color-secondary);
}

a:hover {
    color: var(--e-global-color-primary);
}

[type=button], [type=submit], button {
    color: #fff;
    background-color: var(--e-global-color-secondary);
    border: 1px solid var(--e-global-color-secondary);
}


[type=button]:hover, [type=submit]:hover, button:hover {
    background-color: var(--e-global-color-accent);
}

p.smalltext {
line-height: 18px;
font-size: 15px;
}

/* Header Navigation */
.ins-header-nav .elementor-nav-menu--main a.elementor-item {
    transition: none;
    padding-top: 36px !important;
    background: url('images/hand.svg');
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center -60px;
    transition: all 0.3s ease-in-out;
}


.ins-header-nav .elementor-nav-menu--main .elementor-item.elementor-item-active,
.ins-header-nav .elementor-nav-menu--main a.elementor-item.highlighted,
.ins-header-nav .elementor-nav-menu--main a.elementor-item:hover,
.ins-header-nav .elementor-nav-menu--main a.elementor-item:active {
    padding-top: 36px;
    background: url('images/hand.svg');
    background-size: 30px;
    background-position: center top;
    background-repeat: no-repeat;
}

/* Calculator form */

.calculator-form {
    text-align: center;
    margin: 20px auto;
    max-width:500px;
}

#gform_wrapper_1 input[type=color], 
#gform_wrapper_1 input[type=date], 
#gform_wrapper_1 input[type=datetime-local], 
#gform_wrapper_1 input[type=datetime],
#gform_wrapper_1 input[type=email],
#gform_wrapper_1 input[type=month],
#gform_wrapper_1 input[type=number],
#gform_wrapper_1 input[type=password],
#gform_wrapper_1 input[type=search],
#gform_wrapper_1 input[type=tel],
#gform_wrapper_1 input[type=text],
#gform_wrapper_1 input[type=time],
#gform_wrapper_1 input[type=url],
#gform_wrapper_1 input[type=week],
#gform_wrapper_1 select,
#gform_wrapper_1 textarea {
    font-size: 22px;
    text-align: center;
    border-color: #f8f8f8;
    background-color: var(--e-global-color-88d747c);
    border-radius: 0;
}

#gform_wrapper_1 #field_1_38 input {
    text-align: left;
}

#gform_wrapper_1 .gfield_required.gfield_required_asterisk {
    display: none;
}

#gform_wrapper_1 label {
    font-size: 24px;
}

#gform_wrapper_1 .gfield {
    padding-bottom: 1.2rem;
}

#gform_wrapper_1 .gfield_required {
    color: #fff;
}

#gform_wrapper_1 .instruction {
    font-size: 18px;
}

.calculator-form #field_1_2 {
    margin-top: 2rem;
}

.calculator-form #field_1_1 input[type="radio"],
.calculator-form #field_1_10 input[type="radio"] {
      opacity: 0;
      position: fixed;
      width: 0;
    }
    
    .calculator-form #field_1_1 label,
    .calculator-form #field_1_10 label,
    .buttons a.button {
        display: inline-block;
        background-color: var(--e-global-color-88d747c);
        color:var(--e-global-color-secondary);  
        padding: 18px 24px;
        font-size: 18px;
        text-transform: uppercase;
        font-weight: 700;
        font-family: var(--e-global-typography-text-font-family ), Sans-serif;
    }
    
    .calculator-form #field_1_10 {
        font-size: 0px;
    }
    
    .calculator-form #field_1_10 .gchoice {
        padding-right: 0px !important;
    }
    
    
    .calculator-form #field_1_1 input[type="radio"]:checked + label,
    .calculator-form #field_1_10 input[type="radio"]:checked + label {
        background-color:var(--e-global-color-secondary);  
        color: #fff;
    }
    
    .calculator-form #field_1_1 input[type="radio"]:focus + label, 
    .calculator-form #field_1_10 input[type="radio"]:focus + label {
        background-color:var(--e-global-color-secondary);
        color: var(--e-global-color-88d747c); 
    }
    
    .calculator-form #field_1_1 label:hover,
    .calculator-form #field_1_10 label:hover,
    .buttons a.button:hover {
        background-color: var(--e-global-color-secondary);
        color: #fff;
    }
    
    .calculator-form .gform_footer,
    .gform_wrapper.gravity-theme.calculator-form_wrapper .gform_footer, 
    .gform_wrapper.gravity-theme.calculator-form_wrapper .gform_page_footer{
        display: none;
        padding: 0;
        margin: 0;
    }
    
    #gform_wrapper_1 #field_1_27 {
        padding: 0;
        margin: 0;
    }
    
    #gform_wrapper_1 #field_1_24.gfield--type-number input,
    #gform_wrapper_1 #field_1_31.gfield--type-number input,
    #gform_wrapper_1 #field_1_34.gfield--type-number input,
    #gform_wrapper_1 #field_1_36.gfield--type-number input {
        /* background-color: var(--e-global-color-accent); */
        background-color: transparent;
        padding: 0;
        text-align: center;
        font-size: 44px !important;
    }
    
    .calculator-form-result {
        font-size: 32px;
    }
    
    .buttons a.button {
        display: inline-block;
    }
    
    
@media screen and (max-width: 768px) {
    
   #gform_wrapper_1 #input_1_1,
   #gform_wrapper_1 #input_1_10 {
       display: flex;
       gap: 0;
   } 
    #gform_wrapper_1 #input_1_1 div {
        width: 50%;
    }
    
    #gform_wrapper_1 #input_1_10 div {
        width: 25%;
    }
    
    #gform_wrapper_1 .gfield-choice-input+label,
    #gform_wrapper_1 #input_1_1 div input,
    #gform_wrapper_1 #input_1_10 div input {
        width: 100%;
        min-height: 60px;
        max-width: 100%;
        padding: 12px 20px;
    }
}


/* Media Queries */
@media screen and (min-width: 768px) {

    .dd-boxed-content {
        --dd-content-width: 1140px;
        width: min(50%, var(--dd-content-width) / 2);
    }
}