@charset "UTF-8";
:root {
  --clr-primary: #001A37;
  --clr-secondary:#009FE0;
  /** applied new zeb color **/
  --clr-blue-light: #93D1E9;
  --clr-blue-light-2: #EBF6FB;
  --clr-blue-light-3: #D8EDF8;
  --clr-blue-dark: #002B47;
  /** applied new zeb color **/
  --clr-grey-light-1: #DCE0E8;
  --clr-green: #94C047;
  /** applied new zeb color **/
  --clr-green-light: #C7D340;
  --clr-green-dark: #BDD691;
  --clr-orange: #FBC337;
  /** applied new zeb color **/
  --clr-orange-dark: #ED7D33;
  /** applied new zeb color **/
  --clr-red: #E53664;
  /** applied new zeb color **/
  --clr-yellow: #FFEE34;
  /** applied new zeb color **/
  --clr-grey-dark: #456076;
  --clr-white: #fff;
  --clr-black: #000;
  --clr-crude-black: #1D1D1B;
  --shadow-dark: 0 2rem 6rem rgba(0, 0, 0, 0.3);
  --shadow-2: 0 10px 20px 0 rgba(0, 0, 0, 0.3);
  --shadow-1: 0 3px 5px 0 rgba(0, 0, 0, 0.3);
  --shadow-1-inner: inset 0 5px 5px 0 rgba(0, 0, 0, 0.3);
  --shadow-light: 0 1rem 1.5rem rgba(0, 0, 0, .03);
  --line: 1px solid var(--color-grey-light-2);
  --shadow-dark: 0 2rem 6rem rgba(0, 0, 0, 0.3);
  --shadow-light: 0 2rem 5rem rgba(0, 0, 0, .06);
  --shadow-card: 0 0.5rem 1rem rgba(0, 0, 0, .05);
  --line: 1px solid var(--color-grey-light-2);
  --default-font-size: 2.2rem;
  --grid-width: 140rem;
  --gutter-vertical: 8rem;
  --gutter-vertical-small: 4rem;
  --gutter-horizontal: 1.5rem;
}

@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10rem);
  }
  80% {
    transform: translateX(1rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(10rem);
  }
  80% {
    transform: translateX(-1rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes moveInBottom {
  0% {
    opacity: 0;
    transform: translateY(10rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes blur {
  0% {
    -webkit-filter: blur(12px);
  }
  100% {
    -webkit-filter: blur(0px);
  }
}
@keyframes pulsate {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(3rem);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes zoom {
  0% {
    transform: scale 1;
  }
  100% {
    transform: scale 1.5;
  }
}
@keyframes moveupdown {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translateY(8rem);
  }
  100% {
    transform: translate(0);
  }
}
@keyframes infinite-spinning {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 24em;
  }
}
@keyframes blinkTextCursor {
  from {
    border-right-color: rgba(255, 255, 255, 0.75);
  }
  to {
    border-right-color: transparent;
  }
}
@keyframes movementslider {
  0% {
    opacity: 0;
    transform: translateX(-100rem);
  }
  100% {
    opacity: 1;
    transform: translate(-40rem);
  }
}
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
}

body {
  box-sizing: border-box;
  padding: 0;
  margin-bottom: 0 !important;
}
@media (max-width: 48em) {
  body {
    padding: 0;
  }
}

figure {
  margin: 0;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
}

button {
  margin: 0;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
}

img {
  width: 100%;
}

span {
  color: var(--clr-secondary);
}

::selection {
  background-color: var(--clr-primary);
  color: var(--clr-white);
}

body {
  font-family: "Milo Serif W04 Regular";
  font-size: var(--default-font-size);
  line-height: 1.4;
  color: var(--clr-primary);
  margin-bottom: 3rem;
}

p {
  font-family: "Milo Serif W04 Regular";
  font-size: var(--default-font-size);
  line-height: 3.4rem;
  color: var(--clr-primary);
  margin-bottom: 3rem;
}
@media (max-width: 48em) {
  p {
    font-size: 1.6rem;
    line-height: 2.6rem;
  }
}

b, strong {
  font-family: "Milo Serif W04 Bold";
  font-weight: normal;
  color: var(--clr-secondary);
}

ul {
  font-family: "Milo Serif W04 Regular";
  font-size: var(--default-font-size);
  line-height: 3.4rem;
  color: var(--clr-primary);
  margin-bottom: 2rem;
}
ul li {
  font-family: "Milo Serif W04 Regular";
  font-size: var(--default-font-size);
  line-height: 3.4rem;
  color: var(--clr-primary);
  margin: 0.5rem 0 0.5rem 2.5rem;
  list-style: none;
}
ul li::before {
  content: "•";
  color: var(--clr-blue-light);
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

.textlink, .textlink:link, .textlink:active {
  text-decoration: none;
  font-family: "BrownStd-Regular";
  font-size: 1.8rem;
  color: var(--clr-secondary);
}
.textlink:hover, .textlink:focus {
  text-decoration: underline;
}
@media (max-width: 48em) {
  .textlink {
    font-size: 1.5rem;
  }
}

.headline-primary {
  font-size: 5rem;
  line-height: 6rem;
  font-family: "BrownStd-Bold";
  margin-bottom: 3rem;
  color: var(--clr-primary);
}
.headline-primary__blue {
  color: var(--clr-blue-light);
}
.headline-primary__dashboard {
  font-family: "BrownStd-Bold";
  font-size: 9rem;
}
@media (max-width: 48em) {
  .headline-primary__dashboard {
    font-size: 7rem;
    line-height: 1.2;
    margin-bottom: 1rem;
  }
}
@media (max-width: 37em) {
  .headline-primary__dashboard {
    font-size: 5rem;
    line-height: 1.2;
    margin-bottom: 1rem;
  }
}
.headline-primary__html-error {
  font-family: "BrownStd-Bold";
  font-size: 18rem;
  text-align: center;
}
.headline-primary__introscreen {
  font-family: "BrownStd-Bold";
  font-size: 9rem;
  text-align: left;
  text-transform: uppercase;
  margin-bottom: 3rem;
}
.headline-primary__slider {
  font-family: "BrownStd-Bold";
  font-size: 6rem;
  text-align: left;
  text-transform: uppercase;
  margin-bottom: 3rem;
}
@media (max-width: 48em) {
  .headline-primary__slider {
    font-size: 3rem;
    margin-bottom: 2rem;
  }
}
@media (max-width: 48em) {
  .headline-primary {
    font-size: 3rem;
    line-height: 4rem;
  }
}
@media (max-width: 37em) {
  .headline-primary {
    font-size: 3rem;
    margin-bottom: 2rem;
  }
}

.headline-secondary {
  font-size: 3rem;
  line-height: 1.2;
  font-family: "BrownStd-Bold";
  color: var(--clr-primary);
  margin-bottom: 3rem;
}
@media (max-width: 48em) {
  .headline-secondary {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
}
@media (max-width: 37em) {
  .headline-secondary {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }
}

.headline-tertiary {
  font-size: 2.8rem;
  line-height: 1.2;
  font-family: "BrownStd-Bold";
  color: var(--clr-primary);
  margin-bottom: 3rem;
}
.headline-tertiary__blue {
  color: var(--clr-blue-light);
}
.headline-tertiary__signup {
  font-size: 6rem;
}

.headline-footer {
  font-size: 2rem;
  line-height: 1.2;
  font-family: "BrownStd-Bold";
  color: var(--clr-primary);
  margin-bottom: 2rem;
}

.topline {
  font-size: 2rem;
  line-height: 1.2;
  font-family: "BrownStd-Bold";
  color: var(--clr-blue-light);
  display: inline-block;
  margin-bottom: 2rem;
}

.paragraph {
  font-size: 2.5rem;
  margin-bottom: 10rem;
}

.subline-html-error {
  font-size: 4rem;
  line-height: 5rem;
  font-family: "BrownStd-Regular";
  color: var(--clr-primary);
  text-align: center;
}

.followup-html-error {
  font-size: 1.8rem;
  font-family: "BrownStd-Regular";
  color: var(--clr-primary);
  text-align: center;
}

.u-center-text {
  text-align: center !important;
}

.u-right-text {
  text-align: right !important;
}

.u-center-img {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.u-center-btn {
  left: 50%;
  transform: translateX(-50%);
}

.u-margin-bottom-big {
  margin-bottom: 8rem !important;
}

.u-margin-bottom-medium {
  margin-bottom: 4rem !important;
}

.u-margin-bottom-small {
  margin-bottom: 1.5rem !important;
}

.u-margin-bottom-big {
  margin-top: 8rem !important;
}

.u-margin-bottom-huge {
  margin-bottom: 12rem !important;
}

.u-margin-right-small {
  margin-right: 1rem !important;
}

.u-offset-col-1 {
  padding-left: calc((100% - var(--gutter-horizontal)) /12);
}

[data-tooltip]:hover:before, [data-tooltip]:hover:after {
  display: block;
  position: absolute;
  font-size: 2rem;
  color: white;
}
[data-tooltip]:hover:before {
  border-radius: 0.2em;
  content: attr(title);
  background-color: var(--clr-secondary);
  margin-top: -2.5em;
  padding: 0.3em;
}
[data-tooltip]:hover:after {
  content: "";
  margin-top: -2.1em;
  margin-left: 1em;
  border-style: solid;
  border-color: transparent;
  border-top-color: black;
  border-width: 0.5em 0.5em 0 0.5em;
}

.footer {
  padding: 10rem 0 0 0;
  margin: 0;
  font-size: 1.4rem;
  color: var(--clr-secondary);
  background-color: var(--clr-blue-light);
}
.footer ul,
.footer li {
  font-family: "BrownStd-Regular";
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--clr-primary);
  margin-bottom: 1rem;
  margin-left: 0;
  list-style: none;
  letter-spacing: 0;
}
.footer ul a:link,
.footer ul a:visited,
.footer li a:link,
.footer li a:visited {
  text-decoration: none;
  color: var(--clr-primary);
  transition: all 0.4s;
}
.footer ul a:hover,
.footer ul a:focus,
.footer li a:hover,
.footer li a:focus {
  color: var(--clr-white);
}
.footer__socialnav {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
  height: 3.5rem;
  margin-bottom: 6rem;
}
.footer__socialnav--item {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 1.5rem 0 1.5rem;
  transition: all 0.4s;
}
.footer__socialnav--item, .footer__socialnav--item:link, .footer__socialnav--item:visited {
  fill: var(--clr-primary);
  cursor: pointer;
}
.footer__socialnav--item:hover, .footer__socialnav--item:focus {
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(250deg) brightness(102%) contrast(106%);
}
.footer__bottomline {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: 100%;
  height: 6rem;
  padding: 2rem 2rem;
  background-color: var(--clr-primary);
}
.footer__bottomline--copyright {
  font-family: "BrownStd-Regular";
  font-size: 1.4rem;
  line-height: 1.2;
  height: 3rem;
  color: var(--clr-white);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.footer__bottomline--links {
  color: var(--clr-white);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
.footer__bottomline--links a:link,
.footer__bottomline--links a:visited {
  font-family: "BrownStd-Regular";
  font-size: 1.4rem;
  line-height: 1.2;
  text-decoration: none;
  color: var(--clr-white);
  margin: 0 1rem;
  transition: all 0.4s;
}
.footer__bottomline--links a:hover,
.footer__bottomline--links a:focus {
  text-decoration: underline;
}
.footer .col-1-of-4 {
  /** added by zeb **/
  padding: 0 10px;
}

.row {
  /** changed by zeb to get a responsive row **/
  max-width: var(--grid-width);
  margin: 0 auto;
  /** width: 100vw; **/
  /** removed by zeb to get a responsive row **/
  height: auto;
  /** added by zeb to get a responsive row **/
}
.row:not(:last-child) {
  margin-bottom: var(--gutter-vertical);
}
@media (max-width: 37em) {
  .row:not(:last-child) {
    margin-bottom: var(--gutter-vertical-small);
  }
}
.row::after {
  content: "";
  display: table;
  clear: both;
}
.row [class^=col-] {
  float: left;
}
.row [class^=col-]:not(:last-child) {
  margin-right: var(--gutter-horizontal);
}
@media (max-width: 37em) {
  .row [class^=col-]:not(:last-child) {
    margin-right: 0;
    margin-bottom: var(--gutter-vertical-small);
  }
}
.row .col-1-of-2 {
  width: calc((100% - var(--gutter-horizontal)) / 2);
}
.row .col-1-of-3 {
  width: calc((100% - 2 * var(--gutter-horizontal)) / 3);
}
@media (max-width: 48em) {
  .row .col-1-of-3 {
    width: calc(2 * ((100% - 2 * var(--gutter-horizontal)) / 2) + var(--gutter-horizontal));
  }
}
.row .col-2-of-3 {
  width: calc(2 * ((100% - 2 * var(--gutter-horizontal)) / 3) + var(--gutter-horizontal));
}
@media (max-width: 48em) {
  .row .col-2-of-3 {
    width: calc(2 * ((100% - 2 * var(--gutter-horizontal)) / 2) + var(--gutter-horizontal));
  }
}
.row .col-1-of-4 {
  width: calc((100% - 3 * var(--gutter-horizontal)) / 4);
}
@media (max-width: 48em) {
  .row .col-1-of-4 {
    /**width: calc((100% - 2 * var(--gutter-horizontal)) /2);**/
    /** removed by zeb: If height of the 4 columns is not equal**/
  }
}
@media (max-width: 37em) {
  .row .col-1-of-4 {
    width: 100%;
  }
}
.row .col-2-of-4 {
  width: calc(2 * ((100% - 3 * var(--gutter-horizontal)) / 4) + var(--gutter-horizontal));
}
.row .col-3-of-4 {
  width: calc(3 * ((100% - 3 * var(--gutter-horizontal)) / 4) + 2 * var(--gutter-horizontal));
}
@media (max-width: 37em) {
  .row {
    padding-left: 10px;
    /** changed by zeb: On small screens there is no sidenav, so the padding will be made by the row **/
  }
}

.background {
  height: 100vh;
  width: 100%;
  background-image: url("https://zebdssaauth.blob.core.windows.net/auth-pages/img/60deg-scanlines-blue.svg"), url("https://zebdssaauth.blob.core.windows.net/auth-pages/img/bg-blurry-blue.jpg");
  background-size: contain, cover;
  background-position: top;
  position: relative;
  background-repeat: no-repeat;
  background-position-x: left;
}

.background-signup {
  height: auto;
  width: 100%;
  background-image: url("https://zebdssaauth.blob.core.windows.net/auth-pages/img/60deg-scanlines-blue.svg"), url("https://zebdssaauth.blob.core.windows.net/auth-pages/img/bg-blurry-blue.jpg");
  background-size: contain, cover;
  background-position: top;
  position: relative;
  background-repeat: no-repeat;
  background-position-x: left;
}

.container {
  background-color: var(--clr-white);
  box-shadow: var(--shadow-light);
  padding: 3.5rem;
}

.login-box {
  padding-top: 4rem;
}

.logo {
  width: 7rem;
  height: auto;
  position: absolute;
  top: 4rem;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 997;
}

.login-box-size {
  width: 478px;
  max-width: 97%;
}

.position-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.login-box__close-btn {
  height: 36px;
  width: 36px;
  position: absolute;
  top: 0px;
  right: 0px;
  transform: translate(50%, -50%);
  color: #fff;
  text-align: center;
  border-radius: 50%;
  background-color: #343a40;
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 2rem;
}

html,
body {
  height: 100%;
}

div#api {
  display: flex;
  flex-direction: column-reverse;
}

.entry-item label {
  display: none;
}

.intro {
  display: none;
}

.divider {
  display: none;
}

.accountButton.firstButton {
  background-color: transparent;
  font-family: "BrownStd-Regular";
  font-size: 1.6rem;
  float: right;
  text-decoration: underline;
  text-decoration-color: var(--clr-secondary);
  color: var(--clr-secondary);
}

.accountButton.firstButton:hover,
a#forgotPassword:hover {
  color: #0056b3;
  text-decoration: underline;
  background-color: transparent;
  border-color: transparent;
}

#cancel,
#continue,
.attrEntry button,
#next,
.accountButton.firstButton {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn:not(:disabled):not(.disabled),
#cancel:not(:disabled):not(.disabled),
#continue:not(:disabled):not(.disabled),
.attrEntry button:not(:disabled):not(.disabled),
#next:not(:disabled):not(.disabled),
.accountButton.firstButton:not(:disabled):not(.disabled) {
  cursor: pointer;
}

.entry {
  width: 100%;
}

.entry-item {
  display: flex;
  flex-direction: column-reverse;
  margin: 1rem 0 0 0;
}

.entry-item input,
.attrEntry input {
  font-size: 1.6rem;
  font-family: "BrownStd-Regular";
  color: inherit;
  padding: 1.5rem 2rem;
  background-color: var(--clr-grey-light-1);
  border: none;
  display: block;
  transition: all 0.3s;
  width: 100%;
}

.entry-item input:focus,
.attrEntry input:focus {
  outline: none;
}

.buttons.verify {
  margin-bottom: 2rem;
}

a#forgotPassword {
  margin-top: 0.4rem;
}

a#forgotPassword, a#createAccount {
  text-align: right;
  text-decoration: underline;
  text-decoration-color: var(--clr-secondary);
  float: right;
  background-color: transparent;
  font-family: "BrownStd-Regular";
  font-size: 1.6rem;
  color: var(--clr-secondary);
}

.working {
  display: none;
}

.buttons {
  display: flex;
  margin-top: 1.5rem;
}

#emailVerificationControl_but_send_new_code,
#emailVerificationControl_but_verify_code {
  width: 49.3%;
}

#email_ver_but_verify,
#email_ver_but_resend {
  width: fit-content;
  font-size: 1.3rem;
}

#next,
#emailVerificationControl_but_send_code,
#continue,
#cancel,
.sendNewCode, .verifyCode,
#email_ver_but_send,
#email_ver_but_verify,
#email_ver_but_resend {
  background-color: var(--clr-secondary);
  color: var(--clr-white);
  padding: 1rem 1rem;
  font-family: "BrownStd-Regular";
  text-transform: none;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s;
  position: relative;
  font-size: 1.6rem;
  border: none;
  cursor: pointer;
  margin: auto;
}

.VerificationCode .attrEntry {
  margin: 1rem 0 0 0;
}

#next,
#emailVerificationControl_but_send_code,
#email_ver_but_send {
  width: 100%;
}

#continue,
#cancel {
  width: 49.3%;
}

#continue:hover:disabled {
  cursor: default;
  transform: none;
}

#continue:disabled {
  opacity: 0.4;
}

#next:hover,
#continue:hover,
#cancel:hover,
#email_ver_but_send:hover,
#email_ver_but_verify:hover,
#email_ver_but_resend:hover,
#emailVerificationControl_but_send_code:hover,
#emailVerificationControl_but_send_new_code:hover,
#emailVerificationControl_but_verify_code:hover {
  transform: translateY(-0.3rem);
  box-shadow: var(--shadow-light);
}

.TextBox {
  margin: 0;
}

.TextBox::before {
  display: none;
}

.attrEntry {
  line-height: 1;
  font-family: "BrownStd-Regular";
  font-size: 1.6rem;
  margin: 0;
}

.attrEntry a {
  display: none;
}

.attrEntry label {
  display: none !important;
}

.attrEntry .itemLevel {
  display: none;
}

.attrEntry #email {
  margin: 1rem 0 0 0;
}

.attr ul li {
  list-style: none;
  padding: 0px;
  margin: 1rem 0 0 0;
}

ul li::before {
  content: unset;
}

.dropdown_single {
  font-size: 1.6rem;
  font-family: "BrownStd-Regular";
  color: inherit;
  padding: 1.5rem 2rem;
  background-color: var(--clr-grey-light-1);
  border: none;
  width: 100%;
  display: block;
  transition: all 0.3s;
}

.create p {
  text-align: end;
  text-decoration: none;
  font-family: "BrownStd-Regular";
  font-size: 1.6rem;
  color: var(--clr-primary);
}

input[aria-required=true] {
  background-color: lightgray;
}

div[role=alert] {
  font-size: 1.5rem;
  font-family: "BrownStd-Regular";
}

.changeClaims {
  display: none !important;
}

.error.pageLevel, .error.itemLevel, .verificationErrorTest.error {
  color: red;
  display: block;
}

.hz-align-child {
  display: flex;
  justify-content: center;
}

.signup-box-margin {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.autocomplete {
  position: relative;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid var(--clr-grey-light-1);
  border-bottom: none;
  border-top: none;
  z-index: 99;
  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: var(--clr-white);
  border-bottom: 1px solid var(--clr-grey-light-1);
}
.autocomplete-items div:hover {
  background-color: #e9e9e9;
}
.autocomplete-items div-active {
  background-color: DodgerBlue !important;
  color: #ffffff;
}

.terms-of-use input {
  width: 50px;
  display: inline-block;
}
.terms-of-use__link {
  display: inline-block !important;
}

.verifying-modal {
  display: none;
}

.background.zeb-user .error > p {
  display: none;
}

.background.zeb-user .error .itemLevel {
  display: block;
}

@keyframes blink {
  /**
   * At the start of the animation the dot
   * has an opacity of .2
   */
  0% {
    opacity: 0.2;
  }
  /**
   * At 20% the dot is fully visible and
   * then fades out slowly
   */
  20% {
    opacity: 1;
  }
  /**
   * Until it reaches an opacity of .2 and
   * the animation can start again
   */
  100% {
    opacity: 0.2;
  }
}
.loading span {
  /**
   * Use the blink animation, which is defined above
   */
  animation-name: blink;
  /**
   * The animation should take 1.4 seconds
   */
  animation-duration: 1.4s;
  /**
   * It will repeat itself forever
   */
  animation-iteration-count: infinite;
  /**
   * This makes sure that the starting style (opacity: .2)
   * of the animation is applied before the animation starts.
   * Otherwise we would see a short flash or would have
   * to set the default styling of the dots to the same
   * as the animation. Same applies for the ending styles.
   */
  animation-fill-mode: both;
}

.loading span:nth-child(2) {
  /**
   * Starts the animation of the third dot
   * with a delay of .2s, otherwise all dots
   * would animate at the same time
   */
  animation-delay: 0.2s;
}

.loading span:nth-child(3) {
  /**
   * Starts the animation of the third dot
   * with a delay of .4s, otherwise all dots
   * would animate at the same time
   */
  animation-delay: 0.4s;
}

/*# sourceMappingURL=styles.css.map */