/*------------------------------------*\
    
    WebFX CF7 Customizations - Global styling for all CF7 Forms

    Add custom CF7 form styling to this file if it should be applied to all CF7 forms on the site
    Otherwise, put your block-specific styles in individual block stylesheets so that various block-specific styles aren't loaded on every CF7 form

\*------------------------------------*/


/* Default Radio/Checkbox Style (if using CF7) */
.wpcf7-radio .wpcf7-list-item,
.wpcf7-checkbox .wpcf7-list-item {
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 10px;
    /* incase items go to 2 lines */
}

.wpcf7-radio .wpcf7-list-item-label,
.wpcf7-checkbox .wpcf7-list-item-label {
    margin-left: 5px;
}

/* CF7 Validation (Remove if not using CF7) */

/* Individual field error messages */
.wpcf7-not-valid-tip,
.validation_message {
    color: #FF1F22;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
    display: block;
}

.wpcf7-not-valid-tip img {
    position: absolute;
    right: 10px;
    top: -38px;

}

/* Entire form error message */
.wpcf7-response-output {

}

/* Styling for fields that have errors */
select.wpcf7-not-valid,
textarea.wpcf7-not-valid,
input.wpcf7-not-valid,
.wpcf7-not-valid .choices {
    border-color: #FF1F22;
}

/* Adding CF7 Spinner for loading */
.wpcf7-spinner {
    visibility: hidden;
    display: inline-block;
    background-color: #23282d;
    /* Dark Gray 800 */
    opacity: 0.75;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 100%;
    padding: 0;
    margin: 0 24px;
    position: relative;
}

form.submitting .wpcf7-spinner {
    visibility: visible;
}

.wpcf7-spinner::before {
    content: '';
    position: absolute;
    background-color: #fbfbfc;
    /* Light Gray 100 */
    top: 4px;
    left: 4px;
    width: 6px;
    height: 6px;
    border: none;
    border-radius: 100%;
    transform-origin: 8px 8px;
    animation-name: spin;
    animation-duration: 1000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.wpcf7-not-valid-tip:before {
    content: "";
    position: absolute;
    width: 25px;
    height: 25px;
    background: url('data:image/svg+xml,<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.8801 0.689453C15.3524 0.689453 17.7691 1.42257 19.8248 2.79608C21.8804 4.1696 23.4825 6.12183 24.4286 8.40591C25.3747 10.69 25.6223 13.2033 25.1399 15.6281C24.6576 18.0528 23.4671 20.2801 21.719 22.0283C19.9708 23.7764 17.7435 24.9669 15.3188 25.4493C12.894 25.9316 10.3807 25.684 8.09658 24.7379C5.81251 23.7918 3.86027 22.1897 2.48676 20.1341C1.11324 18.0785 0.380127 15.6617 0.380127 13.1895C0.381231 9.87458 1.69855 6.6958 4.04251 4.35184C6.38647 2.00787 9.56526 0.690558 12.8801 0.689453ZM12.8801 20.6894C13.2098 20.6894 13.532 20.5917 13.8061 20.4086C14.0802 20.2254 14.2938 19.9651 14.4199 19.6606C14.5461 19.356 14.5791 19.0209 14.5148 18.6976C14.4505 18.3743 14.2917 18.0774 14.0586 17.8443C13.8255 17.6112 13.5286 17.4524 13.2053 17.3881C12.882 17.3238 12.5469 17.3568 12.2423 17.483C11.9378 17.6091 11.6775 17.8227 11.4943 18.0968C11.3112 18.3709 11.2135 18.6931 11.2135 19.0228C11.2148 19.4644 11.3908 19.8876 11.7031 20.1998C12.0153 20.5121 12.4385 20.6881 12.8801 20.6894ZM10.9718 7.76445L11.5301 14.4478C11.5592 14.7858 11.7141 15.1005 11.964 15.3299C12.214 15.5592 12.5409 15.6865 12.8801 15.6865C13.2194 15.6865 13.5463 15.5592 13.7962 15.3299C14.0462 15.1005 14.201 14.7858 14.2301 14.4478L14.7885 7.76445C14.8125 7.50558 14.7837 7.24452 14.7037 6.99714C14.6237 6.74977 14.4942 6.52126 14.3231 6.32552C14.152 6.12977 13.9428 5.97089 13.7084 5.85852C13.4739 5.74616 13.2191 5.68267 12.9593 5.67192C12.6995 5.66117 12.4403 5.70337 12.1974 5.79597C11.9544 5.88858 11.7329 6.02963 11.5462 6.21057C11.3595 6.3915 11.2115 6.60853 11.1113 6.84844C11.0112 7.08836 10.9609 7.34614 10.9635 7.60612C10.9621 7.65903 10.9649 7.71197 10.9718 7.76445Z" fill="%23FF1F22"/></svg>');
    background-size: cover;
    right: 10px;
    top: -38px;
}

.instruction.validation_message {
    display: none;
}

.wpcf7-form-control-wrap .choices {
    margin-bottom: 0;
}

.wpcf7-form-control-wrap.choice-not-valid .choices__inner {
    border: solid 1px #FF1F22;
}

.wpcf7-form-control-wrap.choice-not-valid .wpcf7-not-valid-tip:before {
    right: 55px;
}

.wpcf7-response-output {
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    margin-top: 10px;
}

@media (prefers-reduced-motion: reduce) {
    .wpcf7-spinner::before {
        animation-name: blink;
        animation-duration: 2000ms;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes blink {
    from {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}