body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
}

h1 {
  font-family: 'Crete Round', serif;
  font-weight: 300;
  text-align: center;
}

h1.with-application-name {
  margin-bottom: 0;
}

h2 {
  margin-top: 0;
  font-family: 'Crete Round', serif;
  font-weight: 200;
  text-align: center;
  font-size: 1em;
}

div.box {
  background: #f2f2f2;
  padding: 40px 30px 20px 30px;
}

div.logo-container {
  text-align: center;
}
a.back-button {
  display: block;
  position: absolute;
}
img.back-arrow {
  display: inline-block;
  width: 40px;
  height: 40px;
  transform: scaleX(-1);
}
img.logo {
  width: 100px;
  height: 100px;
}

div.info-message-header {
  font-size: 14px;
}
div.info-message {
  font-size: 20px;
  padding-bottom: 10px;
}
div.input-message {
  font-size: 14px;
  padding-bottom: 5px;
}

div.inputs {
  text-align: right;
}
.hidden-input {
  display: none;
}
div.planet-gradient-wrapper input.input-field {
  border-style: solid;
  border-width: 1px;
  border-color: #469958;
}
div.planet-gradient-wrapper + div.planet-gradient-wrapper {
  margin-top: 5px;
}
div.mobilize-me-gradient-wrapper input.input-field {
  border-style: solid;
  border-width: 1px;
  border-color: #ce029f;
}
div.mobilize-me-gradient-wrapper + div.mobilize-me-gradient-wrapper {
  margin-top: 5px;
}
input.input-field {
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  border-radius: 5px;
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
}

button.submit-button {
  padding: 10px 0;
  display: inline-block;
  border-style: none;
  background: none;
}
div.submit-content {
  height: 40px;
}
div.submit-text {
  display: inline-block;
  line-height: 40px;
  vertical-align: top;
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
  padding-right: 5px;
  color: black;
}
img.submit-arrow {
  display: inline-block;
  width: 40px;
  height: 40px;
}

button.onetime-code {
  font-family: 'Open Sans', sans-serif;
  color: #868686;
  cursor: pointer;
  font-size: 14px;
  text-decoration: underline;
}

div.bottom-description {
  font-size: 14px;
  padding-bottom: 10px;
}

div.privacy-policy > a {
  font-size: 14px;
  color: #868686;
}

ul#error-messages {
  margin-block-start: 0;
  padding-left: 18px;
}

li.error, div.error {
  padding-top: 6px;
  font-size: 14px;
  color: red;
  text-align: left;
}

@media (min-width: 376px) {
  div.box {
    width: 315px;

    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);

    border: 1px solid #afafaf;
    box-shadow: 5px 5px 5px rgba(20, 20, 20, 0.1);
  }
}
@media (max-width: 376px) {
  div.box {
    box-sizing: border-box;
    height: 100%;
  }

  body {
    background: #f2f2f2;
  }
}

/*
  Fonts from Google Fonts
    font-family: 'Crete Round', serif;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Open Sans Condensed', sans-serif;
  If you want to change the fonts, remember to change the link in head

  TODO rth - we aren't currently using the Open Sans Condensed
*/