@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

span.value {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
}

@media (max-width: 600px) {
    .form-col-2 {
        width: 98%;
    }

    .form-col-1 {
        width: 98%;
    }

    .form-col-full {
        width: 98%;
    }

    span.value span {
        width: 98%;
    }


    #pardot-form .submit {
        padding-top: 10px;
    }

    .g-recaptcha {
        margin-left: -70; /* Remove any left margin */
    }
}

@media (min-width: 600px) and (max-width: 768px) {
    .form-col-2 {
        width: 98%;
    }

    .form-col-1 {
        width: 98%;
    }

    .form-col-full {
        width: 98%;
    }

    span.value span {
        width: 98%;
    }
}

@media (min-width: 768px) {
    .form-col-2 {
        width: 49%;
    }

    .form-col-1 {
        width: 49%;
    }

    .form-col-full {
        width: 98%;
    }

    span.value span {
        width: 98%;
    }
}



#pardot-form {
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

    #pardot-form .form-field {
        margin: 1px;
        padding: 0;
        margin-bottom: 6px;
    }

        #pardot-form .form-field textarea {
            margin-bottom: 0 !important;
            padding-bottom: 6px;
            display: block;
        }
    /* The input fields */
    #pardot-form input.text,
    #pardot-form textarea.standard,
    #pardot-form select,
    #pardot-form input.date {
        background-color: white;
        border: solid 2px #efefef;
        font-size: 16px;
        color: black;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 8px;
        padding-right: 8px;
        width: 100%;
        font-family: 'Roboto', sans-serif;
        box-sizing: border-box;
    }
        /* the input fields on focus */
        #pardot-form input.text:focus,
        #pardot-form textarea.standard:focus,
        #pardot-form select:focus,
        #pardot-form input.date:focus {
            border-color: #65737e;
            outline: none;
        }


    #pardot-form select, #pardot-form .date {
        height: calc(2.5em + 0.75rem + 2px);
    }

    #pardot-form span.value {
        margin-left: 0;
    }
    /* the field labels */
    #pardot-form label {
        font-size: 16px;
        color: #04275C;
        font-weight: bold;
        padding-top: 2px;
        padding-bottom: 2px;
        float: none;
        text-align: left;
        width: auto;
        display: block;
    }
    /* the submit button */
    #pardot-form .submit input {
        margin: 0;
        background-color: #efefef;
        border: solid 2px #083351;
        font-size: 20px;
        color: #083351;
        font-weight: bold;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 60px;
        padding-left: 60px;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
    }
        /* the submit button hover */
        #pardot-form .submit input:hover {
            background-color: #083351;
            border-color: #083351;
            color: white;
        }
    /* the spacing around the submit button */
    #pardot-form .submit {
        margin: 0 auto; /* Center align by auto margins */
        padding-top: 20px;
        padding-right: 0px;
        padding-bottom: 20px;
        text-align: center; /* Keep text centered */
    }
/* hide the regular checkbox */
.pd-checkbox input {
    opacity: 0;
    position: absolute;
}
/* position the label */
.pd-checkbox input, .pd-checkbox label {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    margin-left: 35px;
    margin-top: -23px;
    cursor: pointer;
}

.pd-checkbox label {
    position: relative;
}
/* style the unchecked checkbox */
.pd-checkbox input + label:before {
    content: '';
    background: #65737e;
    border: 1px solid#efefef;
    border-radius: 100% !important;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    padding: 0px;
    margin-right: 10px;
    text-align: center;
    font-size: 15px;
    line-height: normal;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
/* style the checked checkbox */
.pd-checkbox input:checked + label:before {
    content: "\2713";
    background: #65737e;
    color: white;
    border-color: #efefef;
}

form.form p.no-label {
    margin-left: 0 !important;
}

/* hide the regular radio button */
.pd-radio input {
    opacity: 0;
    position: absolute;
}
/* position the label */
.pd-radio input, .pd-radio label {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
}

.pd-radio label {
    position: relative;
}
/* style the unchecked radio button */
.pd-radio input + label:before {
    content: '';
    background: #65737e;
    border: 1px solid#efefef;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    padding: 0px;
    margin-right: 10px;
    text-align: center;
    font-size: 15px;
    line-height: normal;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.pd-radio input + label:before {
    border-radius: 50%;
}
/* style the selected radio button */
.pd-radio input:checked + label:before {
    content: "\25CF";
    background: #65737e;
    color: white;
    border-color: #efefef;
}
/* Error message header */ .red-background, #pardot-form p.errors {
    padding: 10px;
    background-color: #EE0000;
}
/* Error message field text */ #pardot-form p.error.no-label {
    margin-left: 3px;
    color: red;
}
/* Captcha fix */
@media (min-width: 320px) {
    .g-recaptcha {
        margin-left: 0; /* Remove any left margin */
        display: block; /* Ensure it behaves as a block element */
    }
}


@media (min-width: 375px) and (max-width: 425px) {
    .g-recaptcha {
        margin-left: 0; /* Remove any left margin */
        display: block; /* Ensure it behaves as a block element */
    }
}

@media (min-width: 425px) and (max-width: 768px) {
    .g-recaptcha {
        margin-left: 0; /* Remove any left margin */
        display: block; /* Ensure it behaves as a block element */
    }
}


@media (min-width: 768px) and (max-width: 1024px) {
    .g-recaptcha {
        margin-left: 0; /* Remove any left margin */
        display: block; /* Ensure it behaves as a block element */
    }
}

@media (min-width: 1024px) and (max-width: 1440px) {
    .g-recaptcha {
        margin-left: 0; /* Remove any left margin */
        display: block; /* Ensure it behaves as a block element */
    }
}

@media (min-width: 1440px) {
    .g-recaptcha {
        margin-left: 0; /* Remove any left margin */
        display: block; /* Ensure it behaves as a block element */
    }
}

/* Captcha fix */
form.form .pd-captcha {
    position: relative !important;
    width: 190px !important;
    left: 0 !important;
    display: block !important;
    height: auto !important;
    margin-bottom: 10px;
}

.form-flex-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

    .form-flex-wrapper .form-field-wrapper {
        flex: 1 1 calc(50% - 20px);
        box-sizing: border-box;
    }

        /* Full width field — add 'full-width' class in Pardot field CSS classes */
        .form-flex-wrapper .form-field-wrapper.full-width {
            flex: 1 1 100%;
        }

@media (max-width: 768px) {
    .form-flex-wrapper .form-field-wrapper {
        flex: 1 1 100%;
    }
}

.form-flex-wrapper .form-field-wrapper p.error,
.form-flex-wrapper .form-field-wrapper .description {
    width: 100%;
    color: #666;
    font-size: 13px;
}

/* Align checkbox and label content in one line */
.pd-checkbox .value {
    display: flex;
    align-items: flex-start; /* or center, depending on your preference */
    gap: 10px;
}

    /* Ensure label text wraps correctly */
    .pd-checkbox .value label.inline {
        display: inline-block;
        margin: 0;
        line-height: 1.4;
    }

    .pd-checkbox .value a {
        color: #0085CA;
        text-direction: underline;
    }

form.form p label {
    color: #003351;
}

form.form p.required label, form.form span.required label {
    background: none;
    padding-left: 0px;
}