@import url("https://fonts.googleapis.com/css?family=Exo+2:400,400i,500,500i,700,700i");
* {
  font-family: "Exo 2", sans-serif;
}

html {
  background-color: transparent;
}

body.browser {
  background-color: #161c26;
  padding: 32px;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;

  /* Default text properties */
  font-size: 16px;
  color: #fff;
}

body {
  /* Body layout */
  max-width: 320px;
  margin: auto;
}

/*** Typography ***/
strong,
b {
  font-weight: 700;
}
.text-muted {
  opacity: 0.3;
  color: #a7a8aa;
}
.text-small {
  font-size: 10px;
}

/*** Links ***/
a,
a:visited {
  font-weight: 500;
  color: #fff;
  border-bottom: solid 1px #fff;
  text-decoration: none;
}

.StoreBadge__Link {
  border: none !important;
}

.error {
  color: #ff3b30;
}

/*** Headers ***/
h1,
h2,
h3 {
  font-weight: normal;
}

h3 {
  font-size: 1.3em;
  text-transform: uppercase;
}

.text-center {
  text-align: center;
}

.title {
  margin: 32px 0 0;
  font-size: 24px;
  font-weight: 500;
}

.description {
  margin: 20px 0;
  font-weight: 500;
}

.form-description {
  font-weight: 500;
}

/** Form controls */
input,
button {
  box-sizing: border-box;
  width: 100%;
}

input {
  background: transparent;
  color: rgba(255, 255, 255, 0.8);

  border: solid 2px #187d8d;
  border-radius: 4px;

  font-size: 16px;

  margin: 0 0 8px 0;
  padding: 8px;
}

input:focus {
  outline: none;

  border-color: #187d8d;

  transition-property: border-color;
  transition-duration: 200ms;
}

button,
input[type="submit"] {
  background: #177881;
  color: #fff;

  border: solid 2px #28e2f8;
  border-radius: 4px;

  font-size: 18px;
  text-align: center;

  padding: 8px 16px;

  -webkit-appearance: unset !important;
}

button:focus,
input:focus {
  transition-property: background, border-color;
  transition-duration: 200ms;
}

button:focus,
input[type="submit"]:focus {
  outline: none;

  background: #187d8d;
}

/** Input placeholders */
::-webkit-input-placeholder {
  color: #a7a8aa;
}
::-moz-placeholder {
  color: #a7a8aa;
}

input.input--icon {
  padding-left: 42px;
}

/*** Input Icons ***/
.inputIcon {
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  width: 21px;
  height: 13px;
  margin: 14px 12px;
  opacity: 0.5;
}
.inputIcon.icon-email {
  background-image: url("/img/email.png");
}
.inputIcon.icon-password {
  background-image: url("/img/password.png");
}

body.fancy .inputIcon {
  -webkit-filter: invert(0.6);
  filter: invert(0.6);
}
@media (min-width: 436px) {
  .inputIcon {
    -webkit-filter: invert(0.6);
    filter: invert(0.6);
  }
}

/** Profile sections */
.section {
  margin: 0 0 24px;

  border-bottom: solid 2px #e2e3e3;
}

.section-item {
  margin: 16px 0;
  position: relative;
  color: #a7a8aa;
}

.section-item__label {
  color: #a7a8aa;
}

.section-item__value {
  margin: 8px 64px 8px 0;
}

.section-item__action {
  position: absolute;
  bottom: 0px;
  right: 0px;
}

.section-item__action a {
  font-weight: 700;
  text-decoration: none;
}