/* range-field.css */

/* General styles for the range input container */
form .ginput_container_range {
    position: relative;
    width: 100%;
    max-width: 600px; /* Assuming SVG width */
    margin: 0 auto;
    display: flex;
    flex-direction: column-reverse;
}

form .range-slider.gfield {
    max-width: 600px;
}

/* Styles for the range input slider */
form .ginput_container_range input[type='range'] {
    -webkit-appearance: none;
    width: 100%;
    height: 4px; /* Line thickness */
    background: transparent;
    outline: none;
    padding: 0;
    margin: 20px 0; /* To give space for the label */
    border: none;
    min-height: auto !important;
    text-align: center;
}

form .ginput_container_range input[type='range'] {
    -webkit-appearance: none; /* For WebKit browsers */
    appearance: none; /* For modern browsers */
    width: 100%;
    height: 4px; /* Line thickness */
    background: transparent; /* Ensures the custom track shows */
    outline: none;
    padding: 0;
    margin: 2.5rem 0; /* To give space for the label */
}

form .ginput_container_range input[type='range']::-webkit-slider-runnable-track {
    background: #1B976A;
    border-radius: 2px;
    border: none;
    height: 4px; /* Ensuring track height is consistent */
}

form .ginput_container_range input[type='range']::-webkit-slider-thumb {
    /* -webkit-appearance: none; */
    appearance: none;
    border: none;
    height: 32px; /* Circle diameter */
    width: 32px; /* Circle width */
    border-radius: 50%;
    background: #046846;
    cursor: pointer;
    margin-top: -14px; /* Adjusted to center the thumb */
}

@supports (-moz-appearance:none) {
    form .ginput_container_range input[type='range']::-moz-range-thumb {
        appearance: none;
        border: 5px solid;
        border-color: rgba(27, 151, 106, 0.64);
        height: 32px; /* Circle diameter */
        width: 32px; /* Circle width */
        border-radius: 50%;
        background: #046846;
        cursor: pointer;
        background-clip: padding-box;
        margin-top: -14px; /* Adjusted to center the thumb */
    }

    form .ginput_container_range input[type='range']::-moz-range-track {
        background: #1B976A;
        border-radius: 2px;
        border: none;
        height: 4px; /* Ensuring track height is consistent */
    }
}

form .ginput_container_range.ginput_container_range {
    width: 600px;
    max-width: 100%;
}

@media only screen and (max-width: 650px) {

    form .range-slider.gfield,
    .jgw-multi-step-form_wrapper,
    .elementor-widget-eael-gravity-form .elementor-widget-container,
    .jgw-multi-step-form_wrapper .gform_page_fields
    {
        width: 100%;
    }

    .jgw-multi-step-form .gform_body {
        width: 80%;
        margin: 0 auto;
    }

    form .ginput_container_range.ginput_container_range {
        max-width: 600px;
        width: 100%;
    }
}

form .range-slider-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

form .range-slider-block input[type='range'] {
    max-width: 100%;
}

form .range-slider-block .range-slider-min-value, form .range-slider-block .range-slider-max-value {
    width: 50%
}

form .range-slider-min-value {
    text-align: left;
}

form .range-slider-max-value {
    text-align: right;
}

/* Styles for the label displaying the range value */
form .range-slider-block + label {
    font-weight: 700;
    font-size: 48px;
    color: #1B976A;
    text-align: center;
}


/* You might need to include media queries to adjust the label position on smaller screens */
@media screen and (max-width: 768px) {
    form .range-slider-label {
        top: -35px;
    }
}

/* Slider Thumb with shadow to mimic SVG's outer circle */
form .ginput_container_range input[type='range']::-webkit-slider-thumb {
    box-shadow: 0 0 0 5px rgba(27, 151, 106, 0.64); /* Adjust the shadow size and opacity to match SVG */
}

/*Custom progress bar*/
form .gf_custom_steps {
    display: flex;
    align-items: center;
    max-width: 112px;
    margin: 0 auto 40px;
}

/* Individual steps */
form .gf_step {
    width: 17px; /* Match the height from the SVG */
    height: 17px; /* Match the height from the SVG */
    border-radius: 50%;
    background-color: #FFF97A; /* Default non-completed step */
    border: 3px solid #1B976A; /* Stroke color from the SVG */
    margin-right: -3px; /* Overlap border with the connector line */
}

/* Completed steps */
form .gf_step.completed {
    background-color: #1B976A; /* Fill color for completed steps */
}

/* Current step */
form .gf_step.current {
    background-color: #FFF97A; /* Fill color for the current step */
}

/* Connector lines between steps */
form .gf_step_connector {
    flex-grow: 1;
    height: 2px; /* Stroke width from the SVG */
    background-color: #1B976A; /* Stroke color from the SVG */
}

form .gf_progressbar_title, p.gform_required_legend {
    display: none;
}

/* Custom styles Address in M\multi step form */
body .gform_wrapper .gform_page .ginput_container select {
    height: 50px;
}

.jgw-multi-step-form .gform_page:nth-child(4) .gform_previous_button {
    display: none !important;
}

body .gform_wrapper .jgw-multi-step-form .ginput_container_consent input[type="checkbox"] {
    min-height: 24px;
    width: 24px;
}

.gform-theme--framework .gfield--type-consent .gform-field-label {
    display: flex;
    align-items: center;
    padding: 0;
    position: relative;
    top: 0;
    left: 0;
    margin: 0 0 0 8px;
    color: #3F4644;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    cursor: pointer;
}

.gform-theme--framework .gform-field-label.gfield_consent_label > .gfield_required_asterisk {
    display: none;
}

body .gform_wrapper .jgw-multi-step-form select.medium.gfield_select {
    border: solid 1px #3f4645;
    transition: all 0.3s;
    min-height: 50px;
    width: 100%;
}

body .elementor-widget-container .gform_wrapper form .gform_body .gform_page .gfield--type-text.adr-street {
    width: 100%;
    max-width: 100%;
}

body .elementor-widget-container .gform_wrapper form .gform_body .gform_page .spoiler-button {
    background: #1b976a !important; /* Updated color */
    box-shadow: none;
    padding: 5px 10px;
    text-shadow: none;
    color: #fff;
    border: none; /* Add this to remove any default border */
    cursor: pointer; /* Indicate that it's clickable */
}

div.gform_validation_errors {
    display: none !important;
}