@charset "utf-8";

:root { --mainColor: rgb(34, 87, 127); --text: #fff; --input-color: #000; --valid-input-color: #000; }

#form-feedback { border-radius: 39px; max-width: 560px; margin: 0px auto; font-family: Arial; box-shadow: rgba(0, 0, 0, 0.49) 0px 0px 5px; }

.form-feedback-content { max-width: 400px; margin: 0px auto; padding: 40px; box-sizing: border-box; }

.form-feedback-title { text-align: center; padding: 30px 15px; font-size: 30px; background: var(--mainColor); color: var(--text); text-transform: uppercase; margin: 30px 0px; line-height: 1.2; letter-spacing: 2px; }

@media (max-width: 767px) {
  .form-feedback-title { font-size: 24px; }
}

#form-feedback input { font-size: 16px; margin-bottom: 16px; width: 100%; padding: 12px 15px; box-sizing: border-box; border: 1px solid var(--mainColor); border-radius: 4px; color: var(--input-color); line-height: 1; box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 6px; font-family: Arial; background: rgb(255, 255, 255); }

#form-feedback input:focus { outline: 1px solid var(--mainColor); }

.form-feedback-btn { background: var(--mainColor); color: var(--text); width: 80%; margin: auto; display: flex; padding: 14px; font-weight: 700; font-size: 16px; border: none; cursor: pointer; text-transform: uppercase; border-radius: 4px; font-family: Arial; letter-spacing: 1px; box-shadow: rgba(0, 0, 0, 0.19) 3px 3px 6px; text-align: center; justify-content: center; }

input.error { position: relative; margin-bottom: 5px !important; background: rgba(255, 0, 0, 0.125) !important; color: var(--valid-input-color) !important; }

input.error::placeholder { color: rgb(0, 0, 0); }

label.error { font-family: Arial; color: red; font-size: 14px; text-align: center; font-weight: 600; margin-bottom: 10px; display: block; }

.phone + label.error { margin: 5px 0px 0px !important; }

input.valid { background: rgba(0, 239, 0, 0.19) !important; color: var(--valid-input-color) !important; }