/* Text Elements */

h3 {
  font-size: 20px;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

h3.form-header {
  color: #333;
  font-weight: 300;
  font-size: 24px;
}

h4 {
  font-family: 'Roboto', cursive;
}

h4.section-title {
  color: #5f78a0;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 20px;
}

p.paragraph {
  color: #333;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

p.paragraph.hint {
  margin-bottom: .2rem;
  color: #575757;
  font-size: 14px;
}

span.text-element.label {
  margin-bottom: 3px;
  padding-top: .335rem;
  padding-bottom: .35rem;
  background-color: #8ba2c6;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

span.text-element.form-error {
  color: #db6e65;
  font-family: 'Roboto', cursive;
}

span.text-element {
  color: #333;
  font-size: 12px;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

span.text-element.options-label {
  padding-right: 3px;
  padding-left: 3px;
  color: #333;
  font-size: 14px;
  line-height: 1.4;
}

span.text-element.input-group-label {
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  border-top-width: .0625rem;
  border-bottom-width: .0625rem;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  font-size: 16px;
}

span.text-element.colored {
  border-top-width: 0;
  border-bottom-width: 0;
  background-color: #8ba2c6;
  color: #fff;
}

span.text-element.bottom-label {
  margin-top: -1px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

/* Interaction Elements */

form.form-container.my-form {
  margin: 5vw auto;
  padding: 30px;
  min-height: 100px;
  max-width: 94%;
  border: .0625rem solid #c1c1c1;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, .15) 0 20px 60px -5px;

  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
          align-self: flex-end;
}

input[type=text] {
  border-color: #b9c2d2;
  border-radius: 3px;
  color: #333;
  font-size: 15px;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

input[type=text]:focus {
  box-shadow: rgba(139, 162, 198, .4) 0 0 8px 0;
}

input[type=number] {
  border-color: #b9c2d2;
  border-radius: 4px;
  color: #333;
  font-size: 15px;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

input[type=number].input-group-field {
  border-radius: 0;
}

input[type=number]:focus {
  box-shadow: rgba(139, 162, 198, .4) 0 0 8px 0;
}

input[type=password] {
  border-color: #b9c2d2;
  border-radius: 4px;
  font-size: 15px;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

input[type=password]:focus {
  box-shadow: rgba(139, 162, 198, .4) 0 0 8px 0;
}

input[type=email] {
  border-color: #b9c2d2;
  border-radius: 4px;
  color: #333;
  font-size: 15px;
  font-family: 'Roboto', cursive;
}

input[type=email].bottom-label {
  margin-bottom: 0;
  border-bottom-left-radius: 0;
}

input[type=email]:focus {
  box-shadow: rgba(139, 162, 198, .4) 0 0 8px 0;
}

input[type=tel] {
  border-color: #b9c2d2;
  border-radius: 4px;
  font-size: 15px;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

input[type=tel]:focus {
  box-shadow: rgba(139, 162, 198, .4) 0 0 8px 0;
}

select.select {
  border-color: #b9c2d2;
  border-radius: 4px;
  color: #333;
  font-size: 15px;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

select.select.input-group-field {
  border-top-width: .0625rem;
  border-bottom-width: .0625rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

select.listbox {
  border-color: #b9c2d2;
  border-radius: 4px;
  color: #333;
  font-size: 15px;
  font-family: 'Roboto', cursive;
}

textarea {
  border-color: #b9c2d2;
  border-radius: 4px;
  color: #333;
  font-size: 15px;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

textarea:focus {
  box-shadow: rgba(139, 162, 198, .4) 0 0 8px 0;
}

/* Layout Elements */

body.body-1 {
  margin-right: 10px;
  margin-left: 10px;
  box-shadow: none;
}

.container.grid-layout {
  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(120px, 1.00fr));
  grid-template-rows: auto;
}

li.list-item {
  color: #333;
  font-family: 'Roboto', cursive;
}

li.list-item span.code {
  font-family: Consolas, monaco, monospace;
}

input[type=file] {
  color: #333;
  font-size: 15px;
  font-family: 'Roboto', cursive;
}

input[type=url] {
  border-color: #b9c2d2;
  border-radius: 4px;
  color: #333;
  font-size: 15px;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

span.icon-placeholder-checked {
  color: #333;
}

span.icon-placeholder-unchecked {
  color: #333;
}

span.icon-placeholder-unchecked.radio-btn {
  color: rgba(51, 51, 51, .75);
}

label.label-container {
  padding-bottom: 16px;
}

label.label-container.input-group {
  padding-bottom: 0;
  border-radius: 4px;
}

button.button {
  background-color: #5f78a0;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

button.button.group-btn {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

button.submit-btn {
  border-width: 0;
  border-radius: 8px;
  font-size: 18px;
}

input[type=url]:focus {
  box-shadow: rgba(139, 162, 198, .4) 0 0 8px 0;
}

button.button.group-btn:hover {
  background-color: #315185;
}

@media screen and (min-width: 40rem) {
  /* Interaction Elements */

  form.form-container.my-form {
    max-width: 640px;
  }
}