@import url("/icon.font.css");
@import url("/icon.font.css");
@import url("/icon.font.css");
html {
  width: 100vw;
  height: calc(100 * var(--vh, 1vh));
  min-height: calc(100 * var(--vh, 1vh));
  max-height: calc(100 * var(--vh, 1vh));
  position: fixed;
  overflow: hidden;
}
html body {
  width: 100vw;
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  background: var(--background-page);
  animation-duration: var(--time-animation);
  position: fixed;
  overflow: hidden;
}
html body[loading], html body[loading] * {
  pointer-events: none;
}
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 {
  margin-top: 0;
  margin-bottom: var(--size-offset);
}
html body h1:last-child, html body h2:last-child, html body h3:last-child, html body h4:last-child, html body h5:last-child, html body h6:last-child {
  margin-bottom: 0;
}
html body p {
  margin: 0 0 calc(var(--size-offset) / 2) 0;
}
html body h1, html body h1 * {
  font-size: calc(var(--font-size) + 12px);
}
html body h2, html body h2 * {
  font-size: calc(var(--font-size) + 6px);
}
html body h3, html body h3 * {
  font-size: calc(var(--font-size) + 3px);
}
html body h4 {
  font-weight: normal;
}
html body h4, html body h4 * {
  font-size: var(--font-size);
}
html body h5 {
  font-weight: normal;
}
html body h5, html body h5 * {
  font-size: calc(var(--font-size) - 2px);
}
html body h6 {
  font-weight: normal;
}
html body h6, html body h6 * {
  font-size: calc(var(--font-size) - 4px);
}
html body a {
  text-decoration: none;
}
html body li {
  list-style: none;
}
html body spacer {
  flex: 10;
}
html body [scroll-y], html body [scroll-x] {
  position: relative;
}
html body [scroll-y]::before, html body [scroll-y]::after, html body [scroll-x]::before, html body [scroll-x]::after {
  content: "x";
  color: rgba(0, 0, 0, 0);
  position: sticky;
  position: -webkit-sticky;
  display: block;
  z-index: 1;
  box-shadow: 0px 0px 4px 8px var(--background-page);
}
html body [scroll-y][scroll-x]::before, html body [scroll-y][scroll-x]::after, html body [scroll-x][scroll-x]::before, html body [scroll-x][scroll-x]::after {
  top: 0;
  bottom: 0;
  width: 0px;
}
html body [scroll-y][scroll-x]::before, html body [scroll-x][scroll-x]::before {
  left: 0;
}
html body [scroll-y][scroll-x]::after, html body [scroll-x][scroll-x]::after {
  right: 0;
}
html body [scroll-y][scroll-y]::before, html body [scroll-y][scroll-y]::after, html body [scroll-x][scroll-y]::before, html body [scroll-x][scroll-y]::after {
  left: 0;
  right: 0;
  height: 0px;
}
html body [scroll-y][scroll-y]::before, html body [scroll-x][scroll-y]::before {
  top: 0;
}
html body [scroll-y][scroll-y]::after, html body [scroll-x][scroll-y]::after {
  bottom: 0;
}
html body button {
  background: var(--button-primary);
  color: var(--font-color-button);
  border-radius: var(--size-border-radius);
  border: var(--button-border);
  font-weight: bold;
}
html body button, html body .--action {
  cursor: pointer;
}
html body button:active, html body .--action:active {
  transform: scale(0.9);
  transition-duration: calc(var(--time-transition) / 2);
}
html body input, html body textarea, html body select {
  border-radius: var(--size-border-radius);
  border: var(--input-border);
  outline: none !important;
  background: var(--background-input);
}
html body button, html body input, html body select, html body textarea {
  height: var(--size-block);
  min-height: var(--size-block);
  max-height: var(--size-block);
  outline: none !important;
  padding: calc(var(--size-offset) / 2);
  margin-bottom: var(--size-offset);
}
html body button:last-child, html body input:last-child, html body select:last-child, html body textarea:last-child {
  margin-bottom: 0;
}
html body [no-select], html body [no-select] *, html body button, html body .--action {
  user-select: none;
  -webkit-user-select: none;
  user-zoom: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}
html body select {
  padding: 0 calc(var(--size-offset) / 4);
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
html body select::placeholder {
  color: var(--font-color) !important;
}
html body label {
  font-weight: bold;
  margin-bottom: calc(var(--size-offset) / 4);
}
html body [disabled] {
  opacity: 0.5 !important;
  pointer-events: none !important;
}
html body [hidden] {
  display: none;
}
html body view-container {
  display: grid;
}
html body view-container [view-route] {
  grid-row: 1;
  grid-column: 1;
  animation-fill-mode: forwards !important;
}
html body [page] {
  animation-fill-mode: forwards !important;
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-y: auto;
}
html body [page][page] {
  min-height: calc(100 * var(--vh, 1vh));
  max-height: calc(100 * var(--vh, 1vh));
  height: calc(100 * var(--vh, 1vh));
}
html body [page][page][load-out] {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
html body [page][load-out] {
  z-index: -1;
  position: absolute;
}
html body:not([load-page]):not([load-view]) [load-out], html body:not([load-page]):not([load-view]) [load-in] {
  display: none;
}
html body[load-page] [page]:not([load-in]):not([load-out]) {
  display: none;
}
html body, html body * {
  box-sizing: border-box;
  font-family: var(--font-family);
  font-size: var(--font-size);
  color: var(--font-color);
}
html body, html body * {
  transition: color var(--time-transition), background var(--time-transition), transform var(--time-transition), opacity var(--time-transition);
}

:root {
  --time-transition: 0.5s;
  --time-animation: 1s;
  --shadow: none;
  --font-family: Arial;
  --font-size: 14px;
  --font-color: black;
  --font-color-button: white;
  --color-border: transparent;
  --color-primary: black;
  --color-secondary: grey;
  --background-page: white;
  --background-block: white;
  --background-input: white;
  --size-offset: 20px;
  --size-block: 40px;
  --size-border: 0px;
  --size-border-radius: 0px;
  --button-primary: var(--color-primary);
  --button-secondary: var(--color-secondary);
  --button-border: solid var(--size-border) var(--color-border);
  --input-border: solid var(--size-border) var(--color-border);
}

:root {
  --font-family: "Vodafone";
  --font-size: 16px;
  --font-color: #4a4d4e;
  --color-primary: #e60000;
  --size-border-radius: 25px;
  --button-border: none;
  --input-border: solid 1px #e6e6e6;
  --background-page: rgb(240, 240, 240);
  --background-block: white;
  --size-block: 50px;
  --shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
  --time-animation: 1s;
}

@font-face {
  font-family: "Vodafone";
  src: url("/font/vodafone-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "Vodafone";
  src: url("/font/vodafone-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: bold;
}
@font-face {
  font-family: "Vodafone";
  src: url("/font/vodafone-light.woff2") format("woff2");
  font-style: normal;
  font-weight: lighter;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400;
  src: url("/font/sora-v12-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 700;
  src: url("/font/sora-v12-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-weight: 400;
  src: url("/font/gilroy-medium.woff") format("woff");
}
@font-face {
  font-family: "rooney-sans";
  src: url("/font/rooney-sans-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "rooney-sans";
  src: url("/font/rooney-sans-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: bold;
}
@font-face {
  font-family: "Gilroy";
  font-style: italic;
  font-weight: 400;
  src: url("/font/gilroy-black.woff") format("woff");
}
@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-weight: bold;
  src: url("/font/gilroy-black-bold.woff") format("woff");
}
@media (orientation: landscape) {
  html[admin-view] {
    background: url("/asset/promo_bg.jpg") no-repeat center/cover;
    transition: none;
  }
  html[admin-view] body {
    background: transparent !important;
    transition: none;
  }
  html[admin-view] footer {
    max-width: 480px !important;
    bottom: 20px !important;
    margin: auto;
    clip: rect(0px 480px 96px 0px);
  }
  html[admin-view] [page] {
    max-width: 480px !important;
    margin: auto;
    border-radius: 10px;
    box-shadow: var(--shadow);
    max-height: unset !important;
    min-height: unset !important;
    height: unset !important;
    top: 20px !important;
    bottom: 20px !important;
    background: var(--background-page);
  }
  html[admin-view] [page] admin-area, html[admin-view] [page] user-info {
    min-width: 480px;
  }
}
html body {
  overflow: unset !important;
  /* TODO: THIS IS A PROBLEM ? */
}
html body button {
  background: black !important;
  margin: 0 var(--size-offset);
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all var(--time-transition);
}
html body button::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: solid white 2px;
  border-color: white transparent white transparent;
  animation: rotate 1.2s linear infinite;
  pointer-events: none;
  position: absolute;
  opacity: 0;
  transition: all var(--time-transition);
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
html body button[in-action] {
  color: transparent;
}
html body button[in-action]::before {
  opacity: 1;
}
html body input, html body select {
  padding: 0 1rem;
  -webkit-appearance: none;
}
html body select {
  background: var(--background-block) url("/icon/chevron-down.svg") no-repeat right 1rem center/auto 50%;
}
html body button, html body input, html body textarea, html body select {
  box-shadow: var(--shadow);
}
html body [page][load-in] {
  animation: come-in var(--time-animation) ease;
}
@keyframes come-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
html body [page][load-out] {
  animation: come-out var(--time-animation) ease;
}
@keyframes come-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
html body [name=sum].--segment {
  stroke: #4a4d4e;
}
html body [name=sum].--bubble circle {
  fill: #4a4d4e;
}
html body [name=sum]::before {
  background: #4a4d4e;
}
html body [name=scan].--segment {
  stroke: #9c2aa0;
}
html body [name=scan].--bubble circle {
  fill: #9c2aa0;
}
html body [name=scan]::before {
  background: #9c2aa0;
}
html body [name=success].--segment {
  stroke: #eb9700;
}
html body [name=success].--bubble circle {
  fill: #eb9700;
}
html body [name=success]::before {
  background: #eb9700;
}
html body [name=failure].--segment, html body [name=wishcard].--segment {
  stroke: #e60000;
}
html body [name=failure].--bubble circle, html body [name=wishcard].--bubble circle {
  fill: #e60000;
}
html body [name=failure]::before, html body [name=wishcard]::before {
  background: #e60000;
}
html body [status="1"], html body [status="1"] * {
  color: #e60000;
}
html body [status="2"], html body [status="2"] * {
  color: #eb9700;
}
html body [status="3"], html body [status="3"] * {
  color: #a8b400;
}
html body div[status="1"] {
  background: #e60000;
}
html body div[status="2"] {
  background: #eb9700;
}
html body div[status="3"] {
  background: #a8b400;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
:root {
  --font-family: "Vodafone";
  --font-size: 16px;
  --font-color: #4a4d4e;
  --color-primary: #e60000;
  --size-border-radius: 25px;
  --button-border: none;
  --input-border: solid 1px #e6e6e6;
  --background-page: rgb(240, 240, 240);
  --background-block: white;
  --size-block: 50px;
  --shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
  --time-animation: 1s;
}

@font-face {
  font-family: "Vodafone";
  src: url("/font/vodafone-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "Vodafone";
  src: url("/font/vodafone-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: bold;
}
@font-face {
  font-family: "Vodafone";
  src: url("/font/vodafone-light.woff2") format("woff2");
  font-style: normal;
  font-weight: lighter;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400;
  src: url("/font/sora-v12-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 700;
  src: url("/font/sora-v12-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-weight: 400;
  src: url("/font/gilroy-medium.woff") format("woff");
}
@font-face {
  font-family: "rooney-sans";
  src: url("/font/rooney-sans-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "rooney-sans";
  src: url("/font/rooney-sans-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: bold;
}
@font-face {
  font-family: "Gilroy";
  font-style: italic;
  font-weight: 400;
  src: url("/font/gilroy-black.woff") format("woff");
}
@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-weight: bold;
  src: url("/font/gilroy-black-bold.woff") format("woff");
}
@media (orientation: landscape) {
  html[admin-view] {
    background: url("/asset/promo_bg.jpg") no-repeat center/cover;
    transition: none;
  }
  html[admin-view] body {
    background: transparent !important;
    transition: none;
  }
  html[admin-view] footer {
    max-width: 480px !important;
    bottom: 20px !important;
    margin: auto;
    clip: rect(0px 480px 96px 0px);
  }
  html[admin-view] [page] {
    max-width: 480px !important;
    margin: auto;
    border-radius: 10px;
    box-shadow: var(--shadow);
    max-height: unset !important;
    min-height: unset !important;
    height: unset !important;
    top: 20px !important;
    bottom: 20px !important;
    background: var(--background-page);
  }
  html[admin-view] [page] admin-area, html[admin-view] [page] user-info {
    min-width: 480px;
  }
}
html body {
  overflow: unset !important;
  /* TODO: THIS IS A PROBLEM ? */
}
html body button {
  background: black !important;
  margin: 0 var(--size-offset);
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all var(--time-transition);
}
html body button::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: solid white 2px;
  border-color: white transparent white transparent;
  animation: rotate 1.2s linear infinite;
  pointer-events: none;
  position: absolute;
  opacity: 0;
  transition: all var(--time-transition);
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
html body button[in-action] {
  color: transparent;
}
html body button[in-action]::before {
  opacity: 1;
}
html body input, html body select {
  padding: 0 1rem;
  -webkit-appearance: none;
}
html body select {
  background: var(--background-block) url("/icon/chevron-down.svg") no-repeat right 1rem center/auto 50%;
}
html body button, html body input, html body textarea, html body select {
  box-shadow: var(--shadow);
}
html body [page][load-in] {
  animation: come-in var(--time-animation) ease;
}
@keyframes come-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
html body [page][load-out] {
  animation: come-out var(--time-animation) ease;
}
@keyframes come-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
html body [name=sum].--segment {
  stroke: #4a4d4e;
}
html body [name=sum].--bubble circle {
  fill: #4a4d4e;
}
html body [name=sum]::before {
  background: #4a4d4e;
}
html body [name=scan].--segment {
  stroke: #9c2aa0;
}
html body [name=scan].--bubble circle {
  fill: #9c2aa0;
}
html body [name=scan]::before {
  background: #9c2aa0;
}
html body [name=success].--segment {
  stroke: #eb9700;
}
html body [name=success].--bubble circle {
  fill: #eb9700;
}
html body [name=success]::before {
  background: #eb9700;
}
html body [name=failure].--segment, html body [name=wishcard].--segment {
  stroke: #e60000;
}
html body [name=failure].--bubble circle, html body [name=wishcard].--bubble circle {
  fill: #e60000;
}
html body [name=failure]::before, html body [name=wishcard]::before {
  background: #e60000;
}
html body [status="1"], html body [status="1"] * {
  color: #e60000;
}
html body [status="2"], html body [status="2"] * {
  color: #eb9700;
}
html body [status="3"], html body [status="3"] * {
  color: #a8b400;
}
html body div[status="1"] {
  background: #e60000;
}
html body div[status="2"] {
  background: #eb9700;
}
html body div[status="3"] {
  background: #a8b400;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
:root {
  --font-family: "Vodafone";
  --font-size: 16px;
  --font-color: #4a4d4e;
  --color-primary: #e60000;
  --size-border-radius: 25px;
  --button-border: none;
  --input-border: solid 1px #e6e6e6;
  --background-page: rgb(240, 240, 240);
  --background-block: white;
  --size-block: 50px;
  --shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
  --time-animation: 1s;
}

@font-face {
  font-family: "Vodafone";
  src: url("/font/vodafone-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "Vodafone";
  src: url("/font/vodafone-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: bold;
}
@font-face {
  font-family: "Vodafone";
  src: url("/font/vodafone-light.woff2") format("woff2");
  font-style: normal;
  font-weight: lighter;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400;
  src: url("/font/sora-v12-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 700;
  src: url("/font/sora-v12-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-weight: 400;
  src: url("/font/gilroy-medium.woff") format("woff");
}
@font-face {
  font-family: "rooney-sans";
  src: url("/font/rooney-sans-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "rooney-sans";
  src: url("/font/rooney-sans-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: bold;
}
@font-face {
  font-family: "Gilroy";
  font-style: italic;
  font-weight: 400;
  src: url("/font/gilroy-black.woff") format("woff");
}
@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-weight: bold;
  src: url("/font/gilroy-black-bold.woff") format("woff");
}
@media (orientation: landscape) {
  html[admin-view] {
    background: url("/asset/promo_bg.jpg") no-repeat center/cover;
    transition: none;
  }
  html[admin-view] body {
    background: transparent !important;
    transition: none;
  }
  html[admin-view] footer {
    max-width: 480px !important;
    bottom: 20px !important;
    margin: auto;
    clip: rect(0px 480px 96px 0px);
  }
  html[admin-view] [page] {
    max-width: 480px !important;
    margin: auto;
    border-radius: 10px;
    box-shadow: var(--shadow);
    max-height: unset !important;
    min-height: unset !important;
    height: unset !important;
    top: 20px !important;
    bottom: 20px !important;
    background: var(--background-page);
  }
  html[admin-view] [page] admin-area, html[admin-view] [page] user-info {
    min-width: 480px;
  }
}
html body {
  overflow: unset !important;
  /* TODO: THIS IS A PROBLEM ? */
}
html body button {
  background: black !important;
  margin: 0 var(--size-offset);
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all var(--time-transition);
}
html body button::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: solid white 2px;
  border-color: white transparent white transparent;
  animation: rotate 1.2s linear infinite;
  pointer-events: none;
  position: absolute;
  opacity: 0;
  transition: all var(--time-transition);
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
html body button[in-action] {
  color: transparent;
}
html body button[in-action]::before {
  opacity: 1;
}
html body input, html body select {
  padding: 0 1rem;
  -webkit-appearance: none;
}
html body select {
  background: var(--background-block) url("/icon/chevron-down.svg") no-repeat right 1rem center/auto 50%;
}
html body button, html body input, html body textarea, html body select {
  box-shadow: var(--shadow);
}
html body [page][load-in] {
  animation: come-in var(--time-animation) ease;
}
@keyframes come-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
html body [page][load-out] {
  animation: come-out var(--time-animation) ease;
}
@keyframes come-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
html body [name=sum].--segment {
  stroke: #4a4d4e;
}
html body [name=sum].--bubble circle {
  fill: #4a4d4e;
}
html body [name=sum]::before {
  background: #4a4d4e;
}
html body [name=scan].--segment {
  stroke: #9c2aa0;
}
html body [name=scan].--bubble circle {
  fill: #9c2aa0;
}
html body [name=scan]::before {
  background: #9c2aa0;
}
html body [name=success].--segment {
  stroke: #eb9700;
}
html body [name=success].--bubble circle {
  fill: #eb9700;
}
html body [name=success]::before {
  background: #eb9700;
}
html body [name=failure].--segment, html body [name=wishcard].--segment {
  stroke: #e60000;
}
html body [name=failure].--bubble circle, html body [name=wishcard].--bubble circle {
  fill: #e60000;
}
html body [name=failure]::before, html body [name=wishcard]::before {
  background: #e60000;
}
html body [status="1"], html body [status="1"] * {
  color: #e60000;
}
html body [status="2"], html body [status="2"] * {
  color: #eb9700;
}
html body [status="3"], html body [status="3"] * {
  color: #a8b400;
}
html body div[status="1"] {
  background: #e60000;
}
html body div[status="2"] {
  background: #eb9700;
}
html body div[status="3"] {
  background: #a8b400;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
html body [page="/login"] {
  padding: 2rem !important;
}
html body login {
  display: grid;
  width: 100%;
  grid-template-columns: auto;
  grid-gap: calc(var(--size-offset) / 2);
  max-width: 300px;
  grid-template-rows: auto auto auto auto 1fr auto;
  flex: 1;
}
html body login > div {
  margin-bottom: 1rem;
}
html body login > div h3 {
  font-weight: normal;
}
html body login > div i {
  font-size: 0.875em;
}
html body login > div, html body login > div * {
  color: white;
}
html body login button {
  margin-top: calc(var(--size-offset) / 2);
}
html body login input {
  transition: all var(--time-transition);
}
html body login[reset-mode] input[name=password] {
  opacity: 0;
  height: 0px;
  max-height: 0px;
  min-height: 0px;
  margin: 0px;
}
html body login action-label * {
  color: white;
}
html body login span {
  color: white;
  width: 100%;
  text-align: center;
}
html body action-label {
  display: grid;
  grid-template-columns: auto 10fr;
  grid-gap: calc(var(--size-offset) / 2);
  pointer-events: none;
  opacity: 0;
  transition: all var(--time-transition);
  justify-self: center;
  margin: calc(var(--size-offset) / 2) 0;
}
html body action-label[visible] {
  opacity: 1;
  animation: pop 0.75s ease;
}
@keyframes pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
html body page-17[page] {
  background: linear-gradient(45deg, #ff1a42 0%, #ffa000 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--size-offset) * 3);
}
html body page-17[page] h1 {
  color: white;
  font-weight: 500;
  margin-bottom: calc(var(--size-offset) * 3);
}
html body page-17[page] i.logo, html body page-17[page] i.--logo {
  color: white;
  font-size: var(--size-block);
  margin-bottom: calc(var(--size-offset) * 2);
}
html body page-17[page] a {
  color: white;
}