@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {

  font-family: "DM Sans", sans-serif;
  background-color: #ebebeb;
}

.form-container {
  background-color: #ffffff;
  margin: 150px auto;
  width: 400px;
  border-radius: 20px;
  border: none;
}

form {
  padding: 25px;
}

.text-title h2 {
  font-weight: 500;
  text-align: center;
  padding: 20px;

}


form .input-container {
  
  position: relative;  

}

.input-container {
  margin-top: 20px;
}


form .input-container input, form .button-container input {
  width: 100%;
  height: 45px;
  border-radius: 25px;
  border: 1px solid #e4e4e4;
  color: #616161;
  padding: 0 55px 0 25px
}

form .input-container input:focus {
  outline: none; /* remove o padrão do navegador */
  border: 2px solid red; /* define sua cor personalizada */
  transition: border .3s ease-in-out;
}

form .input-container input::placeholder {
 color: #616161;
 border: none;
}

form .input-container svg {
  position: absolute;
  right: 20px;
  top: calc(50% - 12px);
  color: #a7a7a7;

}

.options-container {
  display: flex;
  justify-content: space-around;
  margin: 30px auto;
  color: red;

}


.options-container a {
  color: red;
  text-decoration: none;
}

.checkbox {
  display: flex;
  align-items: center;  
  gap: 6px;             
}

.checkbox input[type="checkbox"] {
  margin: 0;           
}

form .button-container input {

  background-color: red;
  color: white;

}


.button-container input[type="submit"] {

  font-weight: bold;
  border: none;

}

p {
  text-align: center;
  margin-top: 20px;
  color: #ff0000;
  text-decoration: underline;
  font-weight: bold;
}

.icons-container {
  display: flex;
  justify-content: space-evenly;
  margin-top: 50px;
  margin: 20px auto;
}

.icons-media {
  background-color: red;
  padding: 25px;
  border-radius: 50%;
  position: relative;

}

.icons-container .icons-media svg {
  position: absolute;
  top: calc(50% - 12px);
  left: calc(50% - 12px);
  color: white;

}