/* Apply styles to various form elements within .sandjensen-form */
.sandjensen-form input[type='text'],
.sandjensen-form input[type='tel'],
.sandjensen-form input[type='email'],
.sandjensen-form input[type='number'],
.sandjensen-form input[type='date'],
.sandjensen-form input[type='time'],
.sandjensen-form input[type='url'],
.sandjensen-form input[type='password'],
.sandjensen-form select,
.sandjensen-form textarea {
    padding: 1em;
    width: 100%;
    border: 1px solid #c2c2c2; /* Added default border color */
}

    /* Style placeholder text for various form elements */
    .sandjensen-form input::placeholder,
    .sandjensen-form select::placeholder,
    .sandjensen-form textarea::placeholder {
        color: #c2c2c2;
    }

    /* Style focus state for form elements */
    .sandjensen-form input:focus,
    .sandjensen-form select:focus,
    .sandjensen-form textarea:focus {
        border: 1px solid #dd1f19;
        outline: none; /* Removed outline to improve aesthetics */
    }

/* Style the .sandjensen-form container */
.sandjensen-form {
    padding: 1em; /* Add padding value */
}

    /* Style textarea to have a specific height */
    .sandjensen-form textarea {
        height: 10em;
    }

    /* Hide elements with the .hidden class */
    .sandjensen-form .hidden {
        display: none;
    }

    /* Style the submit button */
    .sandjensen-form button {
        background-color: #dd1f19;
        border-radius: 999px;
        color: white;
        text-transform: uppercase;
        padding: 1em 2em;
        border: 0;
        cursor: pointer; /* Add cursor style on hover */
    }

    /* Apply accent color to all child elements of .sandjensen-form */
    .sandjensen-form * {
        accent-color: #dd1f19; /* Changed accent-color to color */
    }

    /* Style checkbox inputs */
    .sandjensen-form input[type='checkbox'] {
        width: auto;
        margin-right: 0.5em;
    }

    /* Add a hover effect to the button */
    .sandjensen-form button:hover {
        background-color: #890808;
        transition: background-color 0.3s ease-in-out; /* Moved transition property */
    }

/* Media query for larger screens */
@media (min-width: 1200px) {
    .two-col .attityde-form-container {
        grid-template-columns: 1fr 1fr;
    }

    .two-col .attityde-form-item.long-answer,
    .two-col .single-checkbox {
        grid-column: 1 / span 2;
    }

    .two-col .attityde-form-item.title {
        font-size: 1.5em;
        margin-top: 0.5em;
        grid-column: 1 / span 2;
    }
}

/* Style the .attityde-form-container with grid layout */
.attityde-form-container {
    display: grid;
    gap: 1em 2em;
}

/* Corrected the selector for single-checkbox */
.sandjensen-form .single-checkbox {
    display: flex;
}
.sandjensen-form .single-checkbox label {
    font-size:12px;
}


.sandjensen-form .single-checkbox .attityde-form-field {
        display: flex;
        align-items: flex-start;
    
}

/* Style the error list for form validation */
.parsley-errors-list.filled {
    color: #dd1f19;
    padding-left: 1.5em;
    margin: 0; /* Removed the margin value */
}

/* Style the dropdowns (select elements) */
.sandjensen-form select {
    color: #dd1f19;
    padding: 1em;
    width: 100%;
    background: white;
    border: 1px solid #c2c2c2;
    -webkit-appearance: none; /* Remove default iOS styling */
    -moz-appearance: none; /* Remove default Firefox styling (optional) */
    appearance: none; /* Remove default styling for modern browsers */
    background: transparent url('dropdown-arrow.png') no-repeat right center; /* Add custom arrow icon */
    background-size: 1em 1em; /* Adjust the size of the arrow icon */
}

/* Style date and time pickers (input[type='date'] and input[type='time']) */
.sandjensen-form input[type='date'],
.sandjensen-form input[type='time'] {
    color: #dd1f19;
    padding: 1em;
    width: 100%;
    border: 1px solid #c2c2c2;
    background:white;
    -webkit-appearance: none; /* Remove default iOS styling */
    -moz-appearance: none; /* Remove default Firefox styling (optional) */
    appearance: none; /* Remove default styling for modern browsers */
}