@import url("reset.css");
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");
:root {
  --logo-color: #595959;
  --button-height: 48px;
}

.temp-nav {
  position: fixed;
  z-index: 1;
}

html {
  font-size: 16px;
}

body {
  color: #595959;
  font-weight: 300;
  font-family: "Roboto", sans-serif;
  font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1600 - 300)));
  line-height: 1.5;
  position: relative;
}

img {
  width: 100%;
}

a {
  color: #2773cb;
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
  outline: none;
}

button,
[role="button"] {
  cursor: pointer;
  transition: background 0.2s ease-out, box-shadow 0.2s ease-out,
    border 0.2s ease-out;
  border: none;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: normal;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
}

button:hover,
button:focus {
  background: #3b99fc;
  border: 1px solid #2773cb;
  box-shadow: 1px 2px 1px 0 hsla(212, 63%, 95%, 0.5);
  outline: none;
}

[role="button"]:active,
[role="button"]:hover,
[role="button"]:focus {
  box-shadow: 0 1px 0 0 hsl(212, 63%, 55%);
  outline: none;
}

h1,
h2,
h3,
h4 {
  color: #595959;
  font-weight: 500;
  font-size: 1.125em;
  text-align: center;
}

form {
  position: relative;
}

label {
  color: #222222;
  font-size: 0.875em;
  font-weight: 400;
}

input {
  background: transparent;
  border: 1px solid #dadada;
  color: #222222;
  font-size: 0.875em;
  height: 2.75em;
  padding: 0.2em 1em 0;
  width: 100%;
  flex: 100% 1 1;
}

input:disabled,
select:disabled {
  background: center left 0.35em / 16px
      url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='M0 0h24v24H0V0z'/%3E%3Cpath d='M0 0h24v24H0V0z' opacity='.87'/%3E%3C/g%3E%3Cpath fill='%23222' d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM9 8V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9z'/%3E%3C/svg%3E")
      no-repeat,
    #e1e1e1;
  padding: 0.2em 1em 0 1.875em;
}

input[type="checkbox"],
input[type="radio"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
  height: auto;
  top: 0;
  left: 0;
}

input::-ms-clear,
input::-ms-reveal {
  display: none;
}

legend {
  color: #222222;
  font-size: 0.875em;
}

select {
  appearance: none;
  background: 96% center / 6%
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 8'%3E %3Cpath fill='none' stroke='%23222' stroke-linecap='round' stroke-width='2' d='M1.4 1.5l5.1 5.1 5.1-5.1'/%3E %3C/svg%3E")
      no-repeat,
    transparent;
  border: 1px solid #dadada;
  color: #222222;
  height: 2.75em;
  padding: 0 1em;
  width: 100%;
  -moz-appearance: none;
  -webkit-appearance: none;
  font-size: 0.875em;
}

select::-ms-expand {
  display: none;
}

::placeholder {
  color: #989a9b;
}

.app {
  align-items: center;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  position: relative;
  padding: 0 0 4em;
}

.app-panel {
  background: #ffffff;
  border-radius: 5px;
  flex: 100vw 1 1;
  max-width: 29.5em;
  overflow: hidden;
  padding: 4em 2.25em;
  position: relative;
  will-change: background, box-shadow;
  z-index: 1;
}

.app-background {
  display: none;
}

.app-background svg {
  animation: background-slideUp 0.5s ease-out forwards;
  transform: translate3d(0, 1em, 0);
  width: 100%;
  will-change: opacity, transform;
}

.block {
  flex: 100% 1 1;
  padding: 0.375em 0;
  position: relative;
}

.block.zip {
  flex: 31% 0 1;
}

.panel-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5em;
}

.panel-logo.isSmall {
  margin-bottom: 1.5em;
}

.logo {
  flex: 217px 0 1;
}

.logo svg {
  max-height: 62px;
}

.logo.isSmall {
  flex: 147px 0 1;
}

.logo.isSmall svg {
  max-height: 42px;
}

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

.panel-intro p {
  margin-bottom: 1em;
}

.panel-socialLink {
  display: flex;
  align-items: center;
  justify-content: center;
}

.socialLink-arrows {
  color: #dadada;
  font-weight: 500;
  margin: 0 0.5em;
}

.panel-socialLink svg {
  width: 2em;
  max-height: 2em;
}

.panel-user {
  align-items: flex-end;
  display: flex;
  justify-content: center;
  margin-bottom: 1.5em;
  flex-wrap: wrap;
}

.user-avatars {
  display: flex;
  flex: 100% 0 1;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.user-avatar {
  border-radius: 50%;
  width: 7em;
  height: 7em;
  margin-bottom: 0.25em;
}

.user-avatar[data-avatar-source] {
  position: relative;
}

.user-avatar[data-avatar-source]::after {
  content: "";
  position: absolute;
  bottom: -0.25em;
  left: 0;
  width: 2em;
  height: 2em;
}

.user-avatar[data-avatar-source="Liberty"]::after {
  background: url(../../assets/LU-circle.svg);
}

.user-avatar[data-avatar-source="Facebook"]::after {
  background: url(../../assets/Facebook-circle.svg);
}

.user-avatar[data-avatar-source="LinkedIn"]::after {
  background: url(../../assets/Facebook-circle.svg);
}

.user-avatar[data-avatar-source="Google"]::after {
  background: url(../../assets/Facebook-circle.svg);
}

.user-isVertical {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-isVertical .user-avatar {
  flex: 5em 0 1;
  max-height: 5em;
}

.user-text {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  flex: 70% 0 1;
}

.user-text .user-email,
.user-text .user-name {
  text-align: left;
}

.user-name {
  text-align: center;
  flex: 100% 0 1;
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.25;
}

.user-email {
  text-align: center;
  flex: 100% 0 1;
  font-size: 0.875em;
  line-height: 1.25;
  margin-bottom: 0.5em;
}

.claimed-email {
  font-weight: 700;
  color: #595959;
  font-size: 1.125em;
  text-align: center;
}

.user-switch {
  text-align: center;
  flex: auto 0 1;
  font-size: 0.875em;
}

.form-multipleInput {
  display: flex;
  justify-content: space-between;
  align-content: flex-start;
}

.multipleInput-dual {
  flex: 48% 0 1;
}

.multipleInput-dual.month,
.multipleInput-dual.state,
.multipleInput-dual.region,
.multipleInput-dual.form-password {
  flex: 64% 0 1;
}

.multipleInput-dual.form-password {
  display: block;
  position: relative;
}

.multipleInput-dual.form-password > .input-action {
  top: 2.6em;
}

.multipleInput-dual.year,
.multipleInput-dual.zip,
.multipleInput-dual.postal {
  flex: 31% 0 1;
}

.multipleInput-triple {
  flex: 31% 0 1;
}

.multipleInput-triple.month {
  flex: 43% 0 1;
}

.multipleInput-triple.day {
  flex: 22% 0 1;
}

.multipleInput-triple.year {
  flex: 27% 0 1;
}

.form-dualAction {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.875em 0 0;
}

.form-dualAction .btn-back {
  flex: 49% 0 1;
  order: 0;
}

.form-dualAction .btn-next {
  flex: 49% 0 1;
  order: 1;
}

.btn-back {
  border-radius: 2px;
  color: #2773cb;
  font-size: inherit;
  height: 3em;
  width: 50%;
}

.btn-back:hover,
.btn-back:focus {
  background: #fff;
  border: none;
  box-shadow: none;
  text-decoration: underline;
}

.btn-next {
  background-color: #2773cb;
  border-radius: 2px;
  border: none;
  color: #fff;
  font-size: inherit;
  height: 3em;
  position: relative;
  width: 100%;
}

.back-icon {
  width: 0.5em;
  max-height: 1em;
  margin-right: 0.5em;
}

.continue-icon {
  width: 0.5em;
  max-height: 1em;
  margin-left: 0.5em;
}

[hidden] {
  display: none;
}

.visuallyHidden {
  display: block;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(1px);
  white-space: nowrap;
  position: absolute;
}

.form-memory {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
}

.form-password,
.form-username {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.forgot-account {
  font-size: 0.875em;
}

.forgot-password {
  font-size: 0.875em;
}

.input-action {
  font-size: 0.875em;
  position: absolute;
  top: 2.8em;
  right: 1em;
  line-height: 1.125;
  z-index: 1;
}

.input-helper {
  color: #707070;
  font-size: 0.875em;
  font-weight: 300;
}

.input-helper.password-strength {
  display: block;
  font-weight: 400;
}

.password-strength,
.feedback-password {
  width: 100%;
}

.password-strength > [data-password] {
  font-weight: 500;
}

.checkbox {
  color: #595959;
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.checkbox svg {
  width: 1.125em;
  height: 1.125em;
  position: relative;
  bottom: -2px;
  margin-right: 0.5em;
}

.form-radio {
  display: flex;
  padding: 1.5em 0;
}

.radio {
  position: relative;
  flex: auto 0 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-right: 1.5em;
  cursor: pointer;
}

.radio svg {
  width: 1.375em;
  height: 1.375em;
  margin-right: 0.25em;
  fill: none;
}

.radio circle {
  fill: none;
  stroke-width: 4;
  transition: stroke 0.4s ease-out;
}

.radio .stroke {
  stroke: #c8ccd4;
}

.checkbox .box {
  fill: none;
  stroke: #c8ccd4;
  stroke-width: 2;
  transition: stroke 0.4s ease-out;
}

.checkbox polyline {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 0.3s ease-out;
}

.checkbox:hover .box,
.checkbox > input:focus + svg .box {
  stroke: #2773cb;
}

.radio > input:hover + svg .stroke,
.radio > input:focus + svg .stroke {
  stroke: #2773cb;
}

.checkbox > input:checked + svg .box {
  fill: #2773cb;
  stroke: #2773cb;
}

.checkbox > input:checked + svg .isUnchecked {
  fill: #2773cb;
  stroke-dashoffset: 100;
}

.radio > input:checked + svg .container {
  fill: #2773cb;
}

.radio > input:checked + svg .stroke {
  stroke: #2773cb;
}

.radio > input:checked + svg .center {
  fill: #ffffff;
}

.checkbox > input:checked + svg polyline {
  stroke-dashoffset: 0;
}

[data-country],
.form-grad {
  transition: opacity 0.5s ease-out, transform 0.3s ease-out;
}

.form-grad.form-isVisible {
  max-height: 5em;
}

.form-isVisible {
  max-height: 15em;
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
}

.form-isHidden {
  max-height: 0;
  opacity: 0;
  padding: 0;
  visibility: hidden;
  transform: translate3d(0.1em, -0.1em, -1em);
}

.form-tel {
  width: 60%;
}

.panel-socialSignIn {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.socialSignIn-button {
  height: 3.375em;
  flex: 110px 0 1;
  border: 1px solid #e1e1e1;
  border-radius: 2px;
  background: transparent;
}

.socialSignIn-button:nth-of-type(even) {
  margin: 0 0.5em;
}

.socialSignIn-button:hover,
.socialSignIn-button:focus {
  background: #ffffff;
}

.icon-facebook {
  height: 22px;
  width: 12px;
  fill: #3b5998;
}

.icon-linkedIn {
  height: 20px;
  width: 20px;
  fill: #0077b5;
}

.icon-google {
  height: 22px;
  width: 22px;
}

.app-visualSeparator {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.app-visualSeparator span {
  flex: auto 1 0;
  font-size: 0.875em;
  text-align: center;
}

.app-visualSeparator::before {
  content: "";
  line-height: inherit;
  height: 1px;
  background: #dadada;
  flex: 50% 0 1;
  margin-right: 1em;
}

.app-visualSeparator::after {
  content: "";
  line-height: inherit;
  height: 1px;
  background: #dadada;
  flex: 50% 0 1;
  margin-left: 1em;
}

.italic {
  font-style: italic;
}

.hasError,
input[type="radio"].hasError + svg {
  border: 1px solid #e4002b;
}

.isWarning,
[data-password="isWarning"] {
  color: #e4002b;
}

.isCaution,
[data-password="isCaution"] {
  color: #d97c12;
}

.isAffirmation,
[data-password="isAffirmation"] {
  color: #008a1c;
}

.error-message {
  color: #e4002b;
  font-size: 0.875em;
  font-weight: 300;
  line-height: 1.2;
  margin-top: 0.25em;
  opacity: 0;
  transition: opacity 0.5s ease-in;
}

.password-strength,
.password-warning,
.feedback-password {
  opacity: 0;
  transition: opacity 0.5s ease-in;
}

.message-reveal {
  opacity: 1;
}

.panel-message {
  padding: 1.875em 0 0;
  font-size: 0.875em;
  text-align: center;
}

.panel-message p:not(:last-of-type) {
  padding: 0 0 1.25em;
}

.spinner {
  animation-play-state: running;
  animation: spinner-rotate 1.25s linear infinite forwards;
  height: 1.25em;
  position: absolute;
  right: 12%;
  top: 0.8em;
  transform: translateZ(0);
  width: 1.25em;
}

.spinner[data-a11y-hidden],
#spinner-alert[data-a11y-hidden] {
  animation-play-state: paused;
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden !important;
  position: absolute !important;
  width: 1px;
}

.spinner circle {
  animation: dash-rotate 1.5s linear infinite alternate-reverse;
  fill: transparent;
  stroke-width: 8px;
  stroke: #fff;
}

@media screen and (min-width: 0\0) {
  select {
    background: none\9;
    padding: 5px\9;
  }
}

@media screen and (min-width: 26.25em) {
  .app {
    background-color: #f8f8f8;
    padding: 2vh 0;
  }
  .app-panel {
    animation: lighten-background 0.3s ease-out 0.2s forwards,
      pop-panel 0.3s ease-out 0.2s forwards;
    background: #f8f8f8;
    box-shadow: 0 1.5px 5px 0 rgba(29, 41, 63, 0.2);
    flex: 96vw 0 1;
  }
  .app-background {
    display: block;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
  }
}

@media screen and (min-width: 37.5em) {
  body {
    font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1600 - 300)));
  }
  .app-panel {
    flex: 70vw 0 1;
  }
}

@keyframes lighten-background {
  from {
    background: #f8f8f8;
  }
  to {
    background: #ffffff;
  }
}

@keyframes pop-panel {
  from {
    box-shadow: 0 1.5px 5px 0 rgba(29, 41, 63, 0.2);
  }
  to {
    box-shadow: 0 6px 20px 0 rgba(29, 41, 63, 0.2);
  }
}

@keyframes background-slideUp {
  from {
    opacity: 0.25;
    transform: translate3d(0, 1em, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0.25em, 0);
  }
}

@keyframes spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash-rotate {
  0% {
    stroke-dasharray: 128px;
    stroke-dashoffset: 82px;
  }

  50% {
    stroke-dasharray: 240px;
    stroke-dashoffset: 110px;
  }

  100% {
    stroke-dasharray: 128px;
    stroke-dashoffset: 82px;
  }
}