form .grid-3 {margin-bottom: 30px;}
form input,form textarea {background: none;outline: 0;border: 0;width: 100%;box-sizing: border-box;padding: 15px 0;display: inline-block;font-size: 21px;color: #fff;font-family: inherit;transition: 0.3s; font-weight: 100;}
form .flex-row {margin: 50px 0 20px;}
form h6 {width: 100%; color: #fff; margin-bottom: 20px; font-size: 14px;}

.notice {display: flex; justify-content: space-between; margin-top: 30px; align-items: flex-start;}
.notice span {opacity: 0.6;}

.form-wrapper .grid-4 {display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); grid-gap: 30px; margin-bottom: 25px;}

.form-field {position: relative; padding-top: 0px; border-bottom: 1px solid #fff5; transition: 0.3s;}
.form-field label {position: absolute;top: 50%;transform: translateY(-50%);left: 0px;user-select: none;pointer-events: none;opacity: 1;font-size: 21px;transition: 0.3s; color: #fff5;}
.form-field label span {transition: 0.5s; opacity: 1;}
.form-field.active-focus {border-bottom: 1px solid #fff;}
.form-field.active-focus label {opacity: 1;top: 0px;color: #fff; font-size: 18px; font-weight: 500;}
.form-field.active-focus label span {opacity: 0;}
.form-field textarea {resize: none; border: none; height: 51px; overflow: auto;}

/* input[type=file]::file-selector-button { display: inline-block; font-family: inherit; font-size: 16px; text-transform: uppercase; padding: 6px 30px 10px; line-height: 1; outline: 0; border: 1px solid #fff; border-radius: 25px; transition: 0.5s; background: #fff0; color: #fff; position: absolute; right: 0px;} */
.form-field input[type=file]::file-selector-button {display: none;}
.form-field input[type=file] {opacity: 0;}
.form-field.active-focus input[type=file] {opacity: 1; transition-delay: 0.3s;}

.form-field.images {position: relative;}
.form-field.images input {z-index: 1; position: relative;}
.form-field.images label {z-index: 2; width: 100%; cursor: pointer;}
.form-field.images::after {content: 'Change'; display: inline-block; font-family: inherit; font-size: 16px; text-transform: uppercase; padding: 6px 30px 10px; line-height: 1; outline: 0; border: 1px solid #fff; border-radius: 25px; transition: 0.5s; background: #fff0; color: #fff; position: absolute; right: 0px; top: 12px; opacity: 0;}
.form-field.active-focus.images::after {opacity: 1;}


.form-field input:-webkit-autofill ~ label {top: 0px!important; font-size: 18px;}

.form-field input:-webkit-autofill,
.form-field input:-webkit-autofill:hover,
.form-field input:-webkit-autofill:focus {background-color: transparent!important;}
.form-field input:-webkit-autofill,
.form-field input:-webkit-autofill:focus {
    transition: background-color 600000s 0s, color 600000s 0s;
    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
}
.form-field input[data-autocompleted] {
    background-color: transparent !important;
}

.highlight_message p {color: #61161f!important;text-align: center!important;padding: 15px;background-color: #fdd!important;border-radius: 10px;border: 1px solid #f1b7bf;width: 100%!important; margin: 0 auto 30px!important;font-size: 18px;}
.success-message p {width: 100%;text-align: center;padding: 20px;margin: 0 auto 30px!important;background: #2dd284!important;border-radius: 15px;color: #fff!important; border: 1px solid #2dd284!important;font-size: 18px;}
.form-field-missing {border-bottom: 1px solid #f1b7bf!important; }
.form-field-missing label {color: #f1b7bf;}


#loader {display: none; position: absolute; left: 50%; top: 50%; z-index: 1; width: 30px; height: 30px; transform: translate(-50%, -50%); border: 5px solid #f3f3f3; border-radius: 50%; border-top: 5px solid #3498db; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; transition: 0.3s; opacity: 1;}

@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); }}

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}