/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Apr 25 2024 | 02:25:12 */
.sectioningform {
    padding: 20px; 
    background-color: #ffffff;
    width: 100%; /* Ensures the section takes up the full width */
    border: 1px solid #dedfe0; /* Adds a border around the entire section */
    border-radius: 7px; /* Adds a border-radius of 7px to the section */
    box-sizing: border-box; /* Includes padding and border in width calculation */
    display: flex; /* Enables flexbox layout */
    flex-wrap: wrap; /* Allows children to wrap to the next line if necessary */
}

.sectioningform > div {
    flex: 1 1 100%; /* Each div takes up the full width by default */
    padding: 10px; /* Adds padding around each div */
    box-sizing: border-box; /* Includes padding and border in width calculation */
}

/* Media query for screen widths >= 600px */
@media (min-width: 600px) {
    .sectioningform > div {
        flex: 1 1 50%; /* Each div takes up half of the container width */
    }
}

/* Excluding the elementor-field-group-howareyoupaid class from the media query rule */
@media (min-width: 600px) {
    .sectioningform > div.elementor-field-group-howareyoupaid {
        flex: 1 1 100%; /* Ensure this div takes up the full width */
    }
}
@media (min-width: 600px) {
    .sectioningform > div.elementor-field-group-field_bc279bb {
        flex: 1 1 100%; /* Ensure this div takes up the full width */
    }
@media (min-width: 600px) {
    .sectioningform > div.elementor-field-group-cbais {
        flex: 1 1 100%; /* Ensure this div takes up the full width */
    }
	
	
	
}

/* Hide the radio buttons within the specific HTML reference */
.elementor-field-type-radio.elementor-field-group-howareyoupaid.elementor-repeater-item-e4d571e .elementor-field-option input[type="radio"] {
    display: none; /* Hide the radio buttons */
}

/* Style the option group */
.elementor-field-type-radio.elementor-field-group-howareyoupaid.elementor-repeater-item-e4d571e .elementor-field-option {
    display: flex; /* Use flexbox for easier alignment */
    align-items: center; /* Align items vertically in the middle */
    margin-bottom: 10px; /* Add space between options */
}

/* Add PNG icons before the labels */
/* First option (Salary) icon */
.elementor-field-type-radio.elementor-field-group-howareyoupaid.elementor-repeater-item-e4d571e .elementor-field-option:nth-child(1) label:before {
    content: ""; /* Create a placeholder for the icon */
    display: inline-block; /* Make it an inline block element */
    width: 150px; /* Set the width of the icon */
    height: 100px; /* Set the height of the icon */
    background-image: url('https://mitsubishiautoloans.com/wp-content/uploads/2024/04/ficon3.png'); /* PNG icon URL for the first option */
    background-size: contain; /* Contain the image within the width and height */
    background-repeat: no-repeat; /* Prevent the icon from repeating */
    margin-right: 10px; /* Add space between the icon and label */
    vertical-align: middle; /* Align the icon vertically in the middle */

}

/* Second option (Hourly) icon */
.elementor-field-type-radio.elementor-field-group-howareyoupaid.elementor-repeater-item-e4d571e .elementor-field-option:nth-child(2) label:before {
    content: ""; /* Create a placeholder for the icon */
    display: inline-block; /* Make it an inline block element */
    width: 150px; /* Set the width of the icon */
    height: 100px; /* Set the height of the icon */
    background-image: url('https://mitsubishiautoloans.com/wp-content/uploads/2024/04/ficon2.png'); /* PNG icon URL for the second option */
    background-size: contain; /* Contain the image within the width and height */
    background-repeat: no-repeat; /* Prevent the icon from repeating */
    margin-right: 10px; /* Add space between the icon and label */
    vertical-align: middle; /* Align the icon vertically in the middle */

}

/* Third option (Others) icon */
.elementor-field-type-radio.elementor-field-group-howareyoupaid.elementor-repeater-item-e4d571e .elementor-field-option:nth-child(3) label:before {
    content: ""; /* Create a placeholder for the icon */
    display: inline-block; /* Make it an inline block element */
    width: 150px; /* Set the width of the icon */
    height: 100px; /* Set the height of the icon */
    background-image: url('https://mitsubishiautoloans.com/wp-content/uploads/2024/04/ficon3a.png'); /* PNG icon URL for the third option */
    background-size: contain; /* Contain the image within the width and height */
    background-repeat: no-repeat; /* Prevent the icon from repeating */
    margin-right: 10px; /* Add space between the icon and label */
    vertical-align: middle; /* Align the icon vertically in the middle */

}

/* Add a border around the options */
.elementor-field-type-radio.elementor-field-group-howareyoupaid.elementor-repeater-item-e4d571e .elementor-field-option label {
    border: 1px solid #000; /* Set the default border thickness and color */
    padding: 5px; /* Add padding around the label */
    border-radius: 5px; /* Optional: Add rounded corners */
    text-align: left; /* Align the label text to the left */
    overflow: hidden; /* Hide overflow */
}

/* Increase border thickness and add check icon when option is selected */
.elementor-field-type-radio.elementor-field-group-howareyoupaid.elementor-repeater-item-e4d571e .elementor-field-option input[type="radio"]:checked + label {
    border: 3px solid #000; /* Increase the border thickness when option is selected */
    
    /* Add check icon in the upper right corner of the label */
    position: relative; /* Make the label relative for positioning the check icon */
}

.elementor-field-type-radio.elementor-field-group-howareyoupaid.elementor-repeater-item-e4d571e .elementor-field-option input[type="radio"]:checked + label:after {
    content: url('https://mitsubishiautoloans.com/wp-content/uploads/2024/04/check.png'); /* URL to the check icon image */
    position: absolute; /* Make the pseudo-element absolute */
    top: -1px; /* Position the icon 5px from the top of the label */
    right: 35px; /* Position the icon 35px from the right side of the label */
    width: 20px; /* Set the width of the check icon to 20px */
    height: auto; /* Automatically adjust the height based on the image aspect ratio */
}