@font-face {
  font-family: "SST-Bold";
  src: url("/fonts/SST-Bold.woff") format("woff");
}

@font-face {
  font-family: "SST-Medium";
  src: url("/fonts/SST-Medium.woff") format("woff");
}

:root {
  --main-color: #FF8C3C;
  --main-color-desaturated: #ff9f5b;
  --main-color-saturated: #ff8028;
}

body {
  background-color: #F0F0F0;
  font-family: 'SST-Medium', 'Roboto', Arial, sans-serif;
  font-size:14px;
}

#feedback-form {
  background-color: #FFFFFF;
  width: 600px;
  padding: 20px;
}

.submit-button {
  float: right;
  padding: 4px 18px;
  line-height: 26px;
  font-weight: bold;
  color: white;
  background-color: var(--main-color);
  border: none;
  text-transform: uppercase;
  font-family: 'SST-Bold', 'Roboto', Arial, sans-serif;
}

  .submit-button:hover {
    background-color: var(--main-color-desaturated);
  }

  .submit-button:active {
    background-color: var(--main-color-saturated);
  }

h1 {
  color: var(--main-color);
  margin-block-start: 0;
}

.form-group{
  padding:10px;
  padding-right:0;
}

label {
  min-width: 100px;
  display:inline-block;
}

p {
  color:#333;
}

textarea {
  vertical-align: top;
  width: 479px;
  resize: none;
}

input[type=checkbox] {
  margin-left: 10px;
  vertical-align: bottom;
}

.hidden {
  display:none;
}

#result-alert {
  padding: .75rem 1.25rem;
  border: 1px solid transparent;
  border-radius: .25rem;
  margin-bottom: 1rem;
}

#result-alert.success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

#result-alert.danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}