/*********************
 * Fields
**********************/
.vii-form-field {
    background:var(--form-bg); color:var(--form-color);
    font-size:var(--form-font-size); font-family:var(--form-font), sans-serif; font-weight:500;

    width:100%; height:var(--form-field-height); display:block;
    padding:5px var(--form-field-padding-h) !important; margin:0 !important;
    -webkit-appearance:none !important; -webkit-border-radius:var(--form-radius) !important; border-radius:var(--form-radius) !important;
    border:var(--form-border-width) solid var(--form-border-color);
    transition:var(--vii-transition);
}

/*********************
 * Textarea
**********************/
textarea.vii-form-field {
    height:var(--form-field-size);
    padding:15px var(--form-field-padding-h) !important;
    resize:vertical;
}

/* Textarea size */
textarea.vii-form-field.large {--form-field-size:180px;}
textarea.vii-form-field.medium {--form-field-size:140px;}
textarea.vii-form-field.small {--form-field-size:115px;}


/*********************
 * Hover & focus
**********************/
.vii-form-field:not([readonly]):hover,
.vii-form-field:not([readonly]):focus {
    --vii-color-placeholder:var(--form-placeholder-hover);
    --form-border-color:var(--form-border-color-hover);

    background:var(--form-bg-hover); color:var(--form-color-hover);
}


/*********************
 * A11y
**********************/
.vii-form-field:not([readonly]):focus-visible {
    border-color:var(--form-border-color-hover);
    transition:none;
    box-shadow:0 0 0 1px var(--form-border-color-hover);
}


/*********************
 * Error
**********************/
.gform_wrapper select[aria-invalid="true"] + .es-current .vii-form-field,
.vii-form-field[aria-invalid="true"], .vii-form-field[aria-invalid="true"]:hover {
    --form-border-color:var(--form-color-error);
    box-shadow:0 0 0 1px var(--form-color-error);
}


/*********************
 * Readonly
**********************/
.vii-form-field[readonly] {
    --form-bg:rgba(0, 0, 0, .03);
    --form-border-color:rgba(0, 0, 0, .03);
}


/*********************
 * File
**********************/
input.vii-form-field[type="file"] {
    height:var(--form-field-upload-height); border-style:dashed; text-align:center;
    cursor:pointer; position:relative; font-size:0;
}
.ginput_container.ginput_container_fileupload {position:relative;}
.ginput_container.ginput_container_fileupload .field-fileupload-button {
    pointer-events:none; text-align:center;
    position:absolute; top:50%; left:50%; transform:translate(-50%, calc(-50% - 21px/2));  z-index:1;
    max-width:100%; padding:0 12px; transition:var(--vii-transition);
}
.ginput_container.ginput_container_fileupload .field-fileupload-button i {font-size:20px;}
.ginput_container.ginput_container_fileupload .field-fileupload-button span {
    display:block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
.vc_row.vii-row-has-bg-image input.vii-form-field[type="file"],
.vii-form-with-fill input.vii-form-field[type="file"] {
    --form-border-color:var(--vii-color-primary);
    --form-border-color-hover:var(--vii-color-dark-blue);
}

/* choose file button */
input.vii-form-field[type="file" i]::-webkit-file-upload-button {
    background:#eee;
    padding:5px 8px calc(5px + .2em) 8px; border-radius:3px; min-height:30px;
    border:none; cursor:pointer;
    transition:var(--vii-transition);
    font-family:var(--vii-font-primary), sans-serif;
    opacity:0;pointer-events:none; position:absolute;
}
input.vii-form-field[type="file" i]::-webkit-file-upload-button:hover {
    background:var(--vii-color-primary); color:var(--vii-color-on-primary);
}
input.vii-form-field[type="file" i]:hover {color:var(--form-color-hover);}
.ginput_container.ginput_container_fileupload:hover .field-fileupload-button {color:var(--vii-color-primary);}

/*********************************************
 * Placeholder
**********************************************/
body ::-webkit-input-placeholder {font-family:inherit; font-weight:inherit; font-size:inherit; color:var(--vii-color-placeholder); transition:var(--vii-transition);}
body ::-moz-placeholder {font-family:inherit; font-weight:inherit; font-size:inherit; color:var(--vii-color-placeholder); transition:var(--vii-transition);}
body :-ms-input-placeholder {font-family:inherit; font-weight:inherit; font-size:inherit; color:var(--vii-color-placeholder); transition:var(--vii-transition);}
body :-moz-placeholder {font-family:inherit; font-weight:inherit; font-size:inherit; color:var(--vii-color-placeholder); transition:var(--vii-transition);}


/*********************************************
 * Label
**********************************************/
.vii-form-field--label {
    display:block;
    color:var(--vii-color-text);
    margin-bottom:var(--vii-spacing-6);
}