﻿:root {
  --white: #fff;
  --gray-01: #faf9f5;
  --gray-02: #f2f1ed;
  --gray-03: #e5e4e1;
  --gray-04: #cccbc8;
  --gray-05: #b2b1af;
  --gray-07: #666564;
  --gray-09: #333332;
  --blue: #4e66c0;
  --blue-04: #7fc6ff;
  --blue-06: #2972cc;
  --blue-10: #001a40;
  --linear-gradient: linear-gradient(
    to bottom,
    rgba(0, 32, 69, 0.95) 0%,
    rgba(0, 71, 134, 0.95) 100%
  );
}

/* RESETS & DEFAULTS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  outline: none;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

h1,
h2 {
  font-family: 'Fira Sans Condensed', sans-serif;
  font-weight: 700;
}

h1 {
  font-size: 3.6rem;
  color: var(--gray-01);
}

h2 {
  font-size: 2.4rem;
  color: var(--white);
}

h2 > span {
  font-family: 'Fira Sans Condensed', sans-serif;
  font-size: 2.4rem;
  color: var(--gray-04);
}


.form-ouvidoria {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.form-ouvidoria div.input-hidden {
  display: none;
}

.form-ouvidoria div {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-ouvidoria label {
  font-size: 1.4rem;
  color: var(--gray-02);
  letter-spacing: 0.05rem;
}

.form-ouvidoria input,
.form-ouvidoria select,
.form-ouvidoria textarea {
  width: 100%;
  background-color: transparent;
  border: 1px solid var(--gray-04);
  border-radius: 3px;
  color: var(--gray-01);
  font-size: 1.6rem;
  padding: 1.6rem 1rem;
}

.form-ouvidoria input:focus-within,
.form-ouvidoria select:focus-within,
.form-ouvidoria textarea:focus-within {
  border: 1px solid var(--blue-04);
}

.form-ouvidoria select option {
  font-size: 1.6rem;
  color: var(--gray-07);
  letter-spacing: 0.05rem;
}

.form-ouvidoria input::placeholder,
.form-ouvidoria textarea::placeholder {
  font-size: 1.6rem;
  color: var(--gray-05);
  letter-spacing: 0.05rem;
}

.form-ouvidoria textarea {
  resize: none;
  min-height: 12.7rem;
}

.form-ouvidoria button[type='submit'] {
  font-weight: 600;
  font-size: 1.4rem;
  padding: 1.6rem 0;
  color: var(--gray-09);
  background-color: var(--gray-01);
  cursor: pointer;
  text-transform: uppercase;
  border: none;
  border-radius: 3px;
  width: 100%;
  max-width: 16rem;
  align-self: center;
  margin-top: 1rem;
  transition: filter 0.2s;
}

.form-ouvidoria button[type='submit']:hover {
  filter: brightness(0.85);
}

label.required {
  position: relative;
}

label.required::after {
  content: '*';
  color: oklch(57.7% .245 27.325);
  position: relative;
  left: 5px;
  font-size: 24px;
  top: 5px;
} 

input.erro, select.erro {
  border-color: oklch(57.7% .245 27.325);
}

#mensagem-form-envio {
  width: 100%;
  padding: 20px;
  border-radius: 5px;
  border: 1px solid #00830D;
  background: #E5FFE7;
  margin-top: 20px;
  display: none;
  color: #00830D;
  text-align: center;
  font-family: "Open Sans", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.8px;
}

.is-invalid { outline: 2px solid #d32f2f; }
.error-message { 
  color: #d32f2f;
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: 5px; 
}