Grid Custom Styles
************************************************/
body {
  min-height: 100vh;
}
div.checkbox,
div.radio,
span.text-element {
  display: inline-block;
}
div.container[role="radiogroup"] > span.form-error,
div.container[role="group"] > span.form-error {
  margin-top: 0;
}
span.form-error {
  display: none;
}
input[type="range"] {
  display: block;
  width: 100%;
  margin: 0 0 1rem;
  height: 2.4375rem;
}
div.checkbox input,
div.radio input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
div.checkbox .icon-placeholder-checked,
div.radio .icon-placeholder-checked,
div.checkbox .icon-placeholder-unchecked,
div.radio .icon-placeholder-unchecked {
  margin-right: 3px;
}
div.checkbox input[type="checkbox"]:disabled ~ .icon-placeholder-checked,
div.radio input[type="checkbox"]:disabled ~ .icon-placeholder-checked,
div.checkbox input[type="radio"]:disabled ~ .icon-placeholder-checked,
div.radio input[type="radio"]:disabled ~ .icon-placeholder-checked,
div.checkbox input[type="checkbox"]:disabled ~ .icon-placeholder-unchecked,
div.radio input[type="checkbox"]:disabled ~ .icon-placeholder-unchecked,
div.checkbox input[type="radio"]:disabled ~ .icon-placeholder-unchecked,
div.radio input[type="radio"]:disabled ~ .icon-placeholder-unchecked {
  opacity: 0.35;
  cursor: not-allowed;
}
div.checkbox input[type="checkbox"]:focus ~ .icon-placeholder-checked,
div.radio input[type="checkbox"]:focus ~ .icon-placeholder-checked,
div.checkbox input[type="radio"]:focus ~ .icon-placeholder-checked,
div.radio input[type="radio"]:focus ~ .icon-placeholder-checked,
div.checkbox input[type="checkbox"]:focus ~ .icon-placeholder-unchecked,
div.radio input[type="checkbox"]:focus ~ .icon-placeholder-unchecked,
div.checkbox input[type="radio"]:focus ~ .icon-placeholder-unchecked,
div.radio input[type="radio"]:focus ~ .icon-placeholder-unchecked {
  -webkit-box-shadow: 0 0 5px #cacaca;
          box-shadow: 0 0 5px #cacaca;
}
div.checkbox input[type="checkbox"]:not(:checked) ~ .icon-placeholder-checked,
div.radio input[type="checkbox"]:not(:checked) ~ .icon-placeholder-checked,
div.checkbox input[type="radio"]:not(:checked) ~ .icon-placeholder-checked,
div.radio input[type="radio"]:not(:checked) ~ .icon-placeholder-checked {
  display: none;
}
div.checkbox input[type="checkbox"]:not(:checked) ~ .icon-placeholder-unchecked,
div.radio input[type="checkbox"]:not(:checked) ~ .icon-placeholder-unchecked,
div.checkbox input[type="radio"]:not(:checked) ~ .icon-placeholder-unchecked,
div.radio input[type="radio"]:not(:checked) ~ .icon-placeholder-unchecked {
  display: inline-block;
}
div.checkbox input[type="checkbox"]:checked ~ .icon-placeholder-checked,
div.radio input[type="checkbox"]:checked ~ .icon-placeholder-checked,
div.checkbox input[type="radio"]:checked ~ .icon-placeholder-checked,
div.radio input[type="radio"]:checked ~ .icon-placeholder-checked {
  display: inline-block;
}
div.checkbox input[type="checkbox"]:checked ~ .icon-placeholder-unchecked,
div.radio input[type="checkbox"]:checked ~ .icon-placeholder-unchecked,
div.checkbox input[type="radio"]:checked ~ .icon-placeholder-unchecked,
div.radio input[type="radio"]:checked ~ .icon-placeholder-unchecked {
  display: none;
}
/* Display checkboxes and radios disabled if needed */
div.checkbox[data-coffeebuilder-container] input[type="checkbox"]:disabled ~ .icon-placeholder-checked,
div.radio[data-coffeebuilder-container] input[type="checkbox"]:disabled ~ .icon-placeholder-checked,
div.checkbox[data-coffeebuilder-container] input[type="radio"]:disabled ~ .icon-placeholder-checked,
div.radio[data-coffeebuilder-container] input[type="radio"]:disabled ~ .icon-placeholder-checked,
div.checkbox[data-coffeebuilder-container] input[type="checkbox"]:disabled ~ .icon-placeholder-unchecked,
div.radio[data-coffeebuilder-container] input[type="checkbox"]:disabled ~ .icon-placeholder-unchecked,
div.checkbox[data-coffeebuilder-container] input[type="radio"]:disabled ~ .icon-placeholder-unchecked,
div.radio[data-coffeebuilder-container] input[type="radio"]:disabled ~ .icon-placeholder-unchecked {
  opacity: 1 !important;
  cursor: default;
}
div.checkbox[data-coffeebuilder-container][data-disabled] input[type="checkbox"]:disabled ~ .icon-placeholder-checked,
div.radio[data-coffeebuilder-container][data-disabled] input[type="checkbox"]:disabled ~ .icon-placeholder-checked,
div.checkbox[data-coffeebuilder-container][data-disabled] input[type="radio"]:disabled ~ .icon-placeholder-checked,
div.radio[data-coffeebuilder-container][data-disabled] input[type="radio"]:disabled ~ .icon-placeholder-checked,
div.checkbox[data-coffeebuilder-container][data-disabled] input[type="checkbox"]:disabled ~ .icon-placeholder-unchecked,
div.radio[data-coffeebuilder-container][data-disabled] input[type="checkbox"]:disabled ~ .icon-placeholder-unchecked,
div.checkbox[data-coffeebuilder-container][data-disabled] input[type="radio"]:disabled ~ .icon-placeholder-unchecked,
div.radio[data-coffeebuilder-container][data-disabled] input[type="radio"]:disabled ~ .icon-placeholder-unchecked {
  opacity: 0.35 !important;
  cursor: not-allowed;
}
select {
  background-position: right center;
  padding-right: 0.5rem;
}
button[data-coffeebuilder-button][data-disabled] {
  opacity: 0.25;
  cursor: not-allowed;
}
textarea {
  resize: none;
}

/* Text Elements */

span.text-element.label {
  margin-bottom: 3px;
  padding-top: .335rem;
  padding-bottom: .35rem;
  background-color: #6079ff;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
  font-family: 'Montserrat', cursive;
}

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

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

/* Interaction Elements */

form.form-container.my-form {
  display: grid;
  margin-right: auto;
  margin-left: auto;
  padding-top: 30px;
  padding-bottom: 30px;
  min-height: 100px;
}

input[type=text] {
  border-color: #4f4f4f;
  box-shadow: rgba(10, 10, 10, .05) 0 1px 4px 0 inset;
  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=email] {
  border-color: #4f4f4f;
  box-shadow: rgba(10, 10, 10, .05) 0 1px 4px 0 inset;
  color: #333;
  font-size: 15px;
  font-family: 'Roboto', cursive;
}

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

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

button.button {
  background-color: #6079ff;
  font-family: 'Karla', cursive;
}

button.submit-btn {
  padding: 14px 16px;
  min-height: 50px;
  border-radius: 4px;
  background-color: #f57afc;
  box-shadow: rgba(0, 0, 0, .2) 0 0 4px 1px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 16px;
  font-family: 'Karla', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

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

  form.form-container.my-form {
    grid-template-columns: repeat(2 , 1fr);
    grid-template-rows: repeat(2 , auto);
    grid-column-gap: 20px;
  }

  input[type=text] {
    min-height: 50px;
  }

  input[type=email] {
    min-height: 50px;
  }

  button.submit-btn {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
            align-self: flex-end;
  }

  label.label-container {
    padding-bottom: 0;
  }
}

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

  form.form-container.my-form {
    grid-template-columns: repeat(3 , 1fr);
    grid-template-rows: repeat(2 , auto);
  }

  button.submit-btn {
    grid-area: auto / auto / auto /4;
  }
}