/*
Layouts

Weight: 3

Styleguide Layouts
*/
/*
Center

Center the content in its parent. Both vertically and horizontally.

Markup:
<section class="yivi-web-center-child" style="** Parent styles ** width: 100%; height: 500px; border: 2px solid red;">
  <section style="width: 300px; height: 300px; background-color: blue"></section>
</section>

Styleguide Layouts.Center
*/
/*
reset($children-too: false)

A mixin that resets margin, background color, padding and box-sizing to reliable defaults on the given element (and optionally all its children).

```css
.complicated-element {
  @include reset;
}
```

$children-too - Apply the reset to all the element's children too. Defaults to false. Only use this option if you are sure that no unknown components can ever be a child of your element.

Styleguide Mixins.reset
*/
/*
Center

Center the content in this element. Both vertically and horizontally.

```css
.complicated-element {
  @include center;
}
```

Styleguide Mixins.Center
*/
.yivi-web-center-child {
  background-color: inherit;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
Popup

Overlay content over the page

Markup:
<section class="yivi-web-popup">
  <section style="width: 300px; height: 300px; background-color: blue">
   <button onclick="document.querySelector('.yivi-web-popup').classList.remove('yivi-web-popup-active')">Close popup</button>
  </section>
</section>
<button onclick="document.querySelector('.yivi-web-popup').classList.add('yivi-web-popup-active')">Open popup</button>

Styleguide Layouts.Popup
*/
/*
Animation

These are some really simple mixins to write clean and DRY animations and
leave the annoying vendor specific prefixing to the mixin.

Styleguide Mixins.Animation

animation($animation)

A mixin for vendor prefixing the `animation` declaration

```css
.complicated-element {
  @include animation(animation-name 2s infinite linear);
}
```

Styleguide Mixins.Animation.animation
*/
/*
animation-delay($delay)

A mixin for vendor prefixing the `animation-delay` declaration

```css
.complicated-element {
  @include animation-delay(2s);
}
```

Styleguide Mixins.Animation.animation-delay
*/
/*
keyframes($name) { ... }

A mixin for vendor prefixing the `@keyframes` declaration

```css
@include keyframes(animation-name) {
    // Your animation here
}
```

Styleguide Mixins.Animation.keyframes
*/
/*
transition($props);

A mixin for vendor prefixing transitions

```css
.complicated-element {
  @include transition(transform 0.2s ease-in-out);
}
```

Styleguide Mixins.Animation.transition
*/
.yivi-web-popup {
  background-color: inherit;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.yivi-web-popup > * {
  margin: auto 0 !important;
  transform: scale(0.7);
}
.yivi-web-popup.yivi-web-popup-active {
  opacity: 1;
  visibility: visible;
}
.yivi-web-popup.yivi-web-popup-active > * {
  transform: scale(1);
}

/*
Components

Weight: 4

Styleguide Components
*/
/*
Yivi 'login form'

A place to nicely show the different states of the Yivi disclosure flow.

<script type="text/javascript">
  // Poor man's forEach that works in IE11 too ;)
  function eachDo(l, f) { for(var i=0; i < l.length; i++) { f(l[i]); } }
</script>

Trigger helper:
<ul>
  <li><a href="javascript:eachDo(document.querySelectorAll('.yivi-web-header'), function(h) {h.classList.add('yivi-web-show-helper')})">Show helpers</a></li>
  <li><a href="javascript:eachDo(document.querySelectorAll('.yivi-web-header'), function(h) {h.classList.remove('yivi-web-show-helper')})">Hide helpers</a></li>
</ul>

Markup:
<section class="yivi-web-form">
  <div class="yivi-web-header">
    <p>Ga verder met <i class="yivi-web-logo">Yivi</i></p>
    <div class="yivi-web-helper">
      <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://yivi.app/">de website van Yivi</a>.</p>
    </div>
  </div>
  <div class="yivi-web-content">
    <div class="yivi-web-centered">
      <button>Some action here</button>
      <p>With some text <a href="#">and stuff</a></p>
    </div>
  </div>
</section>
<section class="yivi-web-form">
  <div class="yivi-web-header">
    <p>Ga verder met <i class="yivi-web-logo">Yivi</i></p>
    <div class="yivi-web-helper">
      <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://yivi.app/">de website van Yivi</a>.</p>
    </div>
    <button class="yivi-web-close"></button>
  </div>
  <div class="yivi-web-content">
    <div class="yivi-web-centered">
      <button>Some action here</button>
      <p>With some text <a href="#">and stuff</a></p>
    </div>
  </div>
</section>

Styleguide Components.Yivi login
*/
/*
font($family:, $size:, $color:)

Set the default styling for font family and size.

```css
p {
  @include font;
}
```

$family - The font family, defaults to $default-font
$size   - The font size, defaults to $default-font-size
$color  - The color to use for the font, defaults to $text-color

Styleguide Mixins.fonts
*/
/*
Fonts

We use Roboto as default font, with Tahoma and Arial as fall-back options.
As Roboto is a custom font, it is only used if it is imported by the website explicitly.

Styleguide Variables.fonts
*/
/*
Colours

Styleguide Variables.colours

Colours from the Yivi app

$yivi-anthracite  - #484747; Yivi anthracite
$yivi-link-blue   - #00508a; Yivi link blue
$yivi-green       - #00973a; Yivi green
$yivi-light-blue  - #dcecf5; Yivi light blue
$yivi-red         - #e12747; Yivi red
$yivi-grey        - #eae5e2; Yivi grey

Weight: 1

Styleguide Variables.colours.app
*/
/*
Colours for interface elements

$background-color - #dcecf5; For the background
$helper-color     - #dcecf5; For the helper background
$content-bg-color - #ffffff; For background of the actual content
$button-color     - #e12747; For the background of the buttons

Weight: 1

Styleguide Variables.colours.app

From out to in:
*/
/*
Text colours

For the fonts

$header-text-color        - #484747; For the header text
$content-text-color       - #484747; For the content text
$content-link-color       - #00508a; For links in the content
$content-link-color-hover - #484747; For the hover state on links in the content
$button-text-color        - #ffffff; For the button foreground text

Weight: 2

Styleguide Variables.colours.text
*/
/*
Responsiveness

We'll probably want to revisit this some time soon, but for now it will get us going.

Styleguide Mixins.Responsiveness
*/
/*
on-small-touchscreen {}

Mixin to specify styling that is only applicable to touchscreen devices with a maximum screen width of 768 pixels.

```css
@include on-small-touchscreen {
   // Styling to apply
}
```

Styleguide Mixins.Responsiveness.on-small-touchscreen
*/
/*
on-large-touchscreen {}

Mixin to specify styling that is only applicable to touchscreen devices with a minimum screen width of 768 pixels.

```css
@include on-large-touchscreen {
   // Styling to apply
}
```

Styleguide Mixins.Responsiveness.on-large-touchscreen
*/
/*
on-small-computer {}

Mixin to specify styling that is only applicable to devices that have a mouse pointer with a maximum screen width of 768 pixels.

```css
@include on-small-computer {
   // Styling to apply
}
```

Styleguide Mixins.Responsiveness.on-small-computer
*/
/*
on-large-computer {}

Mixin to specify styling that is only applicable to devices that have a mouse pointer with a minimum screen width of 768 pixels.

```css
@include on-large-computer {
  Styling to apply
}
```

Styleguide Mixins.Responsiveness.on-large-computer
*/
/*
on-small-screen {}

Mixin to specify styling that is only applicable to devices that have a maximum screen width of 768 pixels.

```css
@include on-small-screen {
  Styling to apply
}
```

Styleguide Mixins.Responsiveness.on-small-screen
*/
/*
on-large-screen {}

Mixin to specify styling that is only applicable to devices that have a minimum screen width of 768 pixels.

```css
@include on-large-screen {
   // Styling to apply
}
```

Styleguide Mixins.Responsiveness.on-large-screen
*/
/*
Sizes

These variables contain the dimensions of different aspects of the
components. See source file for definitions.

Styleguide Variables.sizes
*/
.yivi-web-centered {
  background-color: inherit;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  height: auto;
  text-align: center;
}
.yivi-web-centered img,
.yivi-web-centered canvas {
  cursor: none;
}
.yivi-web-centered > p:first-child {
  margin-top: 0;
}
.yivi-web-centered > p:last-child {
  margin-bottom: 0;
}

.yivi-web-form {
  background-color: inherit;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  width: 80%;
  min-width: 326px;
  max-width: 400px;
  height: 544px;
}
@media screen and (max-width: 768px) {
  .yivi-web-form {
    min-height: 504px;
  }
}
.yivi-web-form {
  background-color: #dcecf5;
  border-radius: 8px;
  box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.15);
}
.yivi-web-form .yivi-web-content {
  background-color: inherit;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  margin: 0 1rem 1rem 1rem;
  background-color: white;
  border-radius: 8px;
}
.yivi-web-form .yivi-web-content p {
  background-color: inherit;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  margin: 1em 4em;
  color: #484747;
}
@media screen and (max-width: 768px) {
  .yivi-web-form .yivi-web-content p {
    margin: 1em 2em;
  }
}
.yivi-web-form .yivi-web-header {
  background-color: inherit;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  position: relative;
  flex: 0 0 auto;
  padding: 2rem;
  margin: 0 1rem;
  overflow: hidden;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .yivi-web-form .yivi-web-header {
    padding: 1em;
  }
}
.yivi-web-form .yivi-web-header p {
  background-color: inherit;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  font-family: "Open Sans", "Roboto", Tahoma, Arial, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #484747;
}
.yivi-web-form .yivi-web-header p.yivi-web-error {
  color: #e12747;
}
@media screen and (max-width: 768px) {
  .yivi-web-form .yivi-web-header p {
    font-family: "Open Sans", "Roboto", Tahoma, Arial, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: #484747;
  }
  .yivi-web-form .yivi-web-header p.yivi-web-error {
    color: #e12747;
  }
}
.yivi-web-form .yivi-web-header p i.yivi-web-logo {
  width: 115px;
  height: 64px;
}
.yivi-web-form .yivi-web-header .yivi-web-helper {
  background-color: inherit;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 1rem;
  left: 0;
  right: 0;
  height: calc(100% - 2rem);
  background-color: #dcecf5;
  visibility: hidden;
  transform: translateX(120%);
  transition: transform 0.4s ease, visibility 0s 0.4s;
}
.yivi-web-form .yivi-web-header .yivi-web-helper a {
  font-family: "Open Sans", "Roboto", Tahoma, Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: #484747;
}
.yivi-web-form .yivi-web-header .yivi-web-helper a.yivi-web-error {
  color: #e12747;
}
.yivi-web-form .yivi-web-header .yivi-web-helper a {
  text-decoration-line: underline;
}
.yivi-web-form .yivi-web-header .yivi-web-helper p {
  margin: 1em;
  text-align: center;
  font-family: "Open Sans", "Roboto", Tahoma, Arial, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #484747;
}
.yivi-web-form .yivi-web-header .yivi-web-helper p.yivi-web-error {
  color: #e12747;
}
.yivi-web-form .yivi-web-header > *:not(.yivi-web-helper):not(.yivi-web-close) {
  transform: translateX(0%);
  -webkit-transition: -webkit-transform 0.4s ease;
  -webkit-transition: transform 0.4s ease;
  transition: transform 0.4s ease;
}
.yivi-web-form .yivi-web-header.yivi-web-show-helper > *:not(.yivi-web-helper):not(.yivi-web-close) {
  transform: translateX(-120%);
}
.yivi-web-form .yivi-web-header.yivi-web-show-helper .yivi-web-helper {
  visibility: visible;
  transform: translateX(0%);
  transition: transform 0.4s ease, visibility 0s 0s;
}
.yivi-web-form .yivi-web-header .yivi-web-close {
  background-color: inherit;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  position: absolute;
  top: 1rem;
  right: 0;
  width: 26px;
  height: 26px;
  background-color: white;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
}
.yivi-web-form .yivi-web-header .yivi-web-close:before, .yivi-web-form .yivi-web-header .yivi-web-close:after {
  content: " ";
  display: block;
  position: absolute;
  top: 5.2px;
  left: 10.92px;
  width: 4.16px;
  height: 15.6px;
  background-color: #dcecf5;
  transform: rotateZ(45deg);
  transform-origin: center;
}
.yivi-web-form .yivi-web-header .yivi-web-close:after {
  transform: rotateZ(-45deg);
}

/*
Yivi button

A button to press to launch the disclosure flow in the Yivi app (locally on a
mobile device)

Markup:
<button class="yivi-web-button">
  Open Yivi-app
</button>
<a href="#" class="yivi-web-button">
  Open Yivi-app
</a>

Styleguide Components.Yivi button
*/
.yivi-web-button {
  background-color: inherit;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  font-family: "Open Sans", "Roboto", Tahoma, Arial, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #484747;
}
.yivi-web-error.yivi-web-button {
  color: #e12747;
}
.yivi-web-button {
  display: inline-block;
  padding: 12px 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='48' fill='none'%3E%3Cpath fill='%23BA3555' fill-rule='evenodd' d='M160.129 48h26.344l20.652-48H139.5l20.629 48Z' clip-rule='evenodd'/%3E%3Cpath fill='%23A03352' fill-rule='evenodd' d='m232.187 48 20.631-48h1.012a6 6 0 0 1 6 6v36a6 6 0 0 1-6 6h-21.643Z' clip-rule='evenodd'/%3E%3Cpath fill='%2387314F' fill-rule='evenodd' d='M252.818 0h-33.362v48h12.731l20.631-48Z' clip-rule='evenodd'/%3E%3Cpath fill='%23A03352' fill-rule='evenodd' d='M219.455 0h-12.33l-20.652 48h32.982V0Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-position: right top;
  background-repeat: no-repeat;
  background-color: #e12747;
  border: 0px solid transparent;
  border-radius: 8px;
  text-decoration: none;
  color: white;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
             supported by Chrome and Opera */
}
.yivi-web-button:hover {
  box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.3);
}
.yivi-web-button:active {
  transform: translateY(0.1em);
  box-shadow: none;
}

.yivi-web-button-secondary {
  background-color: inherit;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  font-family: "Open Sans", "Roboto", Tahoma, Arial, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #484747;
}
.yivi-web-error.yivi-web-button-secondary {
  color: #e12747;
}
.yivi-web-button-secondary {
  display: inline-block;
  padding: 10px 30px;
  color: #484747;
  border: 2px solid #484747;
  border-radius: 8px;
  background-color: white;
}
.yivi-web-button-secondary:hover {
  color: oklch(from #484747 calc(l - 0.05) c h);
  border-color: oklch(from #484747 calc(l - 0.05) c h);
  background-color: oklch(from #484747 l c h/calc(alpha - 0.9));
  box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.2);
}
.yivi-web-button-secondary:active {
  transform: translateY(0.1em);
  box-shadow: none;
}

.yivi-web-button-tertiary {
  background-color: inherit;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  font-family: "Open Sans", "Roboto", Tahoma, Arial, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #484747;
}
.yivi-web-error.yivi-web-button-tertiary {
  color: #e12747;
}
.yivi-web-button-tertiary {
  display: inline-block;
  border: 0;
  color: #00508a;
  text-decoration: underline;
}
.yivi-web-button-tertiary:hover {
  color: #484747;
}

/*
Yivi button

A button to press to launch the disclosure flow in the Yivi app (locally on a
mobile device)

Markup:
<button class="yivi-web-button">
  Open Yivi-app
</button>
<a href="#" class="yivi-web-button">
  Open Yivi-app
</a>

Styleguide Components.Yivi button
*/
/*
Yivi logo

Change an element into the Yivi logo

Markup:
<div class="yivi-web-logo" style="width: 70px; height: 60px;"></div>
<i class="yivi-web-logo" style="width: 70px; height: 60px;"></i><br/>
<i class="yivi-web-logo" style="width: 200px; height: 160px;"></i>

Styleguide Components.Yivi logo
*/
.yivi-web-logo {
  background-color: inherit;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  display: inline-block;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='765.355' height='425.197'%3E%3Cg style='display:inline'%3E%3Cpath fill='%233ea6de' d='M425.197 109.797h-85.039l85.039 228.449h85.039z'/%3E%3Cpath fill='%23e02146' d='M590.156 45.326C590.156 20.814 609.582 0 637.795 0c28.213 0 47.639 20.814 47.639 45.326s-19.426 45.789-47.639 45.789c-28.213 0-47.639-21.277-47.639-45.789z'/%3E%3Cpath fill='%2397c6dd' d='M680.314 109.799v228.447h.002l85.039-228.449h-85.041z'/%3E%3Cpath fill='%23e02146' d='m595.275 338.246 85.039-228.447v-.002h-85.039z'/%3E%3Cpath fill='%236a2e4a' d='M680.314 338.246V109.799l-85.039 228.447z'/%3E%3Cpath fill='%2397c6dd' d='M340.156 109.799v228.447h.002l85.041-228.449h-85.041z'/%3E%3Cpath fill='%23e02146' d='M255.117 109.797v228.449h.002l85.037-228.447v-.002z'/%3E%3Cpath fill='%236a2e4a' d='M340.156 338.246V109.799l-85.037 228.447z'/%3E%3Cpath fill='%23e02146' d='M85.039 338.246c-7.635 20.516-18.471 25.9-36.51 25.9-11.562 0-20.77-1.85-29.49-4.625l-1.441 61.051c11.947 3.238 27.178 4.625 40.59 4.625 59.201 0 87.168-20.521 105.021-68.488l6.871-18.463zM425.197 109.797h-85.039l85.039 228.449h85.039zM250 45.326C250 20.814 269.424 0 297.637 0s47.639 20.814 47.639 45.326-19.426 45.789-47.639 45.789C269.424 91.115 250 69.838 250 45.326z'/%3E%3Cpath fill='%236a2e4a' d='m467.716 224.035 42.52 114.211h.002l85.039-228.449h-85.041z'/%3E%3Cpath fill='%236a2e4a' d='m382.764 309.725-42.518 114.238 42.52 114.211 85.039-228.449z' style='display:inline' transform='translate(-212.686 -199.928)'/%3E%3Cpath fill='%23e02146' d='M297.725 538.174h85.041l-85.039-228.449h-85.041z' style='display:inline' transform='translate(-212.686 -199.928)'/%3E%3Cg style='display:inline'%3E%3Cpath fill='%2397c6dd' d='M85.041 109.797v.002z'/%3E%3Cpath fill='%23e02146' d='M0 109.799v-.002z'/%3E%3Cpath fill='%236a2e4a' d='m42.519 224.039 42.522-114.24v-.002H0v.002z'/%3E%3Cpath fill='%23ba3353' d='m382.677 224.039 42.52-114.24v-.002h-85.039v.002zM467.716 224.039l-42.519 114.209v.002h85.041v-.002zM127.56 224.039 85.039 338.248v.002h85.041v-.002z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 0;
  color: transparent;
}

/*
Yivi pairing form

A form to enter the pairing code in order to pair your Yivi app with the session.

Markup:
<form class="yivi-web-pairing-form">
  <p>Vul de koppelcode in die in je Yivi-app verschijnt.</>
  <div class="yivi-web-pairing-code">
    <input inputmode="numeric" pattern="\d" maxlength="1" required />
    <input inputmode="numeric" pattern="\d" maxlength="1" required />
    <input inputmode="numeric" pattern="\d" maxlength="1" required />
    <input inputmode="numeric" pattern="\d" maxlength="1" required />
  </div>
  <div class="yivi-web-pairing-loading-animation" style="visibility: hidden">
    <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
  </div>
  <input type="submit" style="display: none" />
  <script type="application/javascript">
    let form = document.querySelector('.yivi-web-pairing-form');
    let inputFields = form.querySelectorAll('.yivi-web-pairing-code input');
    inputFields.forEach(field => {
      field.onkeydown = (e) => {
        e.target.prevValue = e.target.value;
        if (e.key != 'Enter') e.target.value = '';
      };
      field.onkeyup = (e) => {
        let prevField = e.target.previousElementSibling;
        if (prevField && e.key == 'Backspace' && e.target.value === e.target.prevValue) {
          prevField.value = '';
          prevField.focus();
        }
      };
      field.oninput = (e) => {
        let nextField = e.target.nextElementSibling;
        if (!nextField || !e.target.checkValidity()) {
          e.target.form.querySelector('input[type=submit]').click();
        } else {
          nextField.focus();
        }
      };
      field.onfocus = (e) => {
        if (!e.target.value) {
          e.preventDefault();
          e.target.form.querySelector('input:invalid').focus();
        }
      };
    });
    inputFields[0].parentElement.onclick = (e) => {
      if (e.target.tagName !== 'INPUT') {
        let firstInvalidField = form.querySelector('input:invalid');
        if (firstInvalidField) firstInvalidField.focus();
      }
    };
    form.onsubmit = (e) => {
      e.preventDefault();
      let code = Array.prototype.map.call(inputFields, f => {
        f.disabled = true;
        return f.value;
      }).join('');
      e.target.querySelector('.yivi-web-pairing-loading-animation').style.visibility = 'visible';
      setTimeout(() => {
        e.target.reset();
        inputFields.forEach(f => f.disabled = false);
        inputFields[0].focus();
        e.target.querySelector('p').innerHTML = `De ingevoerde koppelcode ${code} komt niet overeen met de code in jouw Yivi-app. Probeer het opnieuw.`;
        e.target.querySelector('.yivi-web-pairing-loading-animation').style.visibility = 'hidden';
      }, 500);
    };
  </script>
</form>

Styleguide Components.Yivi pairing form
*/
/*
Loading

A loading animation that precedes the QR code

Markup:
<div class="yivi-web-loading-animation">
  <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div>

Styleguide Animations.Loading
*/
.yivi-web-pairing-form .yivi-web-pairing-loading-animation, .yivi-web-loading-animation {
  background-color: inherit;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}
.yivi-web-pairing-form .yivi-web-pairing-loading-animation *, .yivi-web-loading-animation * {
  background-color: inherit;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}
.yivi-web-pairing-form .yivi-web-pairing-loading-animation, .yivi-web-loading-animation {
  display: inline-block;
  width: 39px;
  height: 39px;
}
.yivi-web-pairing-form .yivi-web-pairing-loading-animation *, .yivi-web-loading-animation * {
  background-color: inherit;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  display: block;
  width: 33%;
  height: 33%;
  border-radius: 50%;
  background-color: #00508a;
  float: left;
  -ms-animation: loading-animation 1.3s infinite ease-in-out;
  -webkit-animation: loading-animation 1.3s infinite ease-in-out;
  animation: loading-animation 1.3s infinite ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .yivi-web-pairing-form .yivi-web-pairing-loading-animation *, .yivi-web-loading-animation * {
    -ms-animation-duration: 0s;
    -webkit-animation-duration: 0s;
    animation-duration: 0s;
  }
}
.yivi-web-pairing-form .yivi-web-pairing-loading-animation *:nth-child(1), .yivi-web-loading-animation *:nth-child(1) {
  -ms-animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.yivi-web-pairing-form .yivi-web-pairing-loading-animation *:nth-child(2), .yivi-web-loading-animation *:nth-child(2) {
  -ms-animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.yivi-web-pairing-form .yivi-web-pairing-loading-animation *:nth-child(3), .yivi-web-loading-animation *:nth-child(3) {
  -ms-animation-delay: 0.4s;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.yivi-web-pairing-form .yivi-web-pairing-loading-animation *:nth-child(4), .yivi-web-loading-animation *:nth-child(4) {
  -ms-animation-delay: 0.1s;
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
.yivi-web-pairing-form .yivi-web-pairing-loading-animation *:nth-child(5), .yivi-web-loading-animation *:nth-child(5) {
  -ms-animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.yivi-web-pairing-form .yivi-web-pairing-loading-animation *:nth-child(6), .yivi-web-loading-animation *:nth-child(6) {
  -ms-animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.yivi-web-pairing-form .yivi-web-pairing-loading-animation *:nth-child(7), .yivi-web-loading-animation *:nth-child(7) {
  -ms-animation-delay: 0s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.yivi-web-pairing-form .yivi-web-pairing-loading-animation *:nth-child(8), .yivi-web-loading-animation *:nth-child(8) {
  -ms-animation-delay: 0.1s;
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
.yivi-web-pairing-form .yivi-web-pairing-loading-animation *:nth-child(9), .yivi-web-loading-animation *:nth-child(9) {
  -ms-animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
@-ms-keyframes loading-animation {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}
@-webkit-keyframes loading-animation {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}
@keyframes loading-animation {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}

.yivi-web-pairing-form {
  background-color: inherit;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Open Sans", "Roboto", Tahoma, Arial, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #484747;
}
.yivi-web-pairing-form.yivi-web-error {
  color: #e12747;
}
.yivi-web-pairing-form {
  flex-direction: column;
}
.yivi-web-pairing-form .yivi-web-pairing-code {
  background-color: inherit;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  margin: 10px 0;
  display: flex;
  flex-direction: row;
  cursor: text;
}
.yivi-web-pairing-form p {
  text-align: center;
  align-self: center;
}
.yivi-web-pairing-form .yivi-web-pairing-loading-animation {
  visibility: hidden;
  margin: 10px 0;
}
.yivi-web-pairing-form input {
  background-color: inherit;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  margin: 8px;
  height: 40px;
  width: 30px;
  text-align: center;
  font-size: 1.5em;
  border: 1px solid #00508a;
  border-radius: 4px;
}
@media screen and (max-width: 310px) {
  .yivi-web-pairing-form input {
    margin: 4px;
    height: 32px;
    width: 24px;
    font-size: 1em;
  }
}
.yivi-web-pairing-form input[type=submit] {
  display: none;
}

/*
QR code

Styling to apply to the QR code container. The QR is rendered as an inline
SVG so it scales to any container size without scaling artifacts.

Markup:
<div class="yivi-web-qr-code">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 33"><!-- ... --></svg>
</div>

Styleguide Components.QR code
*/
.yivi-web-qr-code {
  background-color: inherit;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  display: block;
  width: 320px;
  height: auto;
  max-width: 100%;
  aspect-ratio: 1;
  background-color: white;
}
.yivi-web-qr-code > svg {
  display: block;
  width: 100%;
  height: 100%;
}

/*
Yivi minimal mode

Styling for the yivi-web 'minimal' mode, which renders only the QR code
and state animations without the form wrapper, header, or helper elements.

Markup:
<div class="yivi-web-minimal">
  <div class="yivi-web-centered">
    <div class="yivi-web-qr-code"></div>
  </div>
</div>

Styleguide Components.Yivi minimal
*/
.yivi-web-minimal {
  background-color: inherit;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 240px;
  height: 240px;
}
.yivi-web-minimal .yivi-web-centered {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.yivi-web-minimal p {
  display: none;
}

/*
Animations

Weight: 5

Styleguide Animations
*/
/*
Waiting for user

An animation to show while we wait for the user to disclose credentials from
their mobile phone

Markup:
<div class="yivi-web-waiting-for-user-animation"></div>

Styleguide Animations.Waiting for user
*/
.yivi-web-waiting-for-user-animation {
  background-color: inherit;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  display: inline-block;
  width: 23px;
  height: 39px;
  position: relative;
  background-color: #00508a;
  border-radius: 2px;
}
.yivi-web-waiting-for-user-animation:before, .yivi-web-waiting-for-user-animation:after {
  content: "";
  display: block;
  position: absolute;
  background-color: white;
}
.yivi-web-waiting-for-user-animation:before {
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 8px;
  border-radius: 1px;
}
.yivi-web-waiting-for-user-animation:after {
  width: 4px;
  height: 4px;
  left: 50%;
  bottom: 2px;
  margin-left: -2px;
  border-radius: 50%;
}
.yivi-web-waiting-for-user-animation {
  -ms-animation: waiting-for-user-animation 2s infinite ease-in-out;
  -webkit-animation: waiting-for-user-animation 2s infinite ease-in-out;
  animation: waiting-for-user-animation 2s infinite ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .yivi-web-waiting-for-user-animation {
    -ms-animation-duration: 0s;
    -webkit-animation-duration: 0s;
    animation-duration: 0s;
  }
}
@-ms-keyframes waiting-for-user-animation {
  0%, 100% {
    -webkit-transform: scale3D(1.1, 1.1, 1);
    transform: scale3D(1.1, 1.1, 1);
  }
  50% {
    -webkit-transform: scale3D(0.9, 0.9, 1);
    transform: scale3D(0.9, 0.9, 1);
  }
}
@-webkit-keyframes waiting-for-user-animation {
  0%, 100% {
    -webkit-transform: scale3D(1.1, 1.1, 1);
    transform: scale3D(1.1, 1.1, 1);
  }
  50% {
    -webkit-transform: scale3D(0.9, 0.9, 1);
    transform: scale3D(0.9, 0.9, 1);
  }
}
@keyframes waiting-for-user-animation {
  0%, 100% {
    -webkit-transform: scale3D(1.1, 1.1, 1);
    transform: scale3D(1.1, 1.1, 1);
  }
  50% {
    -webkit-transform: scale3D(0.9, 0.9, 1);
    transform: scale3D(0.9, 0.9, 1);
  }
}

/*
Checkmark

A checkmark to indicate success

Markup:
<div class="yivi-web-checkmark-animation"></div>

Styleguide Animations.Checkmark
*/
.yivi-web-checkmark-animation {
  background-color: inherit;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  display: inline-block;
  width: 48px;
  height: 39px;
}
.yivi-web-checkmark-animation:before {
  content: " ";
  display: block;
  box-sizing: content-box;
  width: 27px;
  height: 15px;
  border: 13px solid #00973a;
  border-top: 0;
  border-right: 0;
  transform: translate(0px, 18px) rotate(-45deg);
  transform-origin: left top;
  -ms-animation: checkmark-animation 0.6s 1 ease;
  -webkit-animation: checkmark-animation 0.6s 1 ease;
  animation: checkmark-animation 0.6s 1 ease;
}
@media (prefers-reduced-motion: reduce) {
  .yivi-web-checkmark-animation:before {
    -ms-animation-duration: 0s;
    -webkit-animation-duration: 0s;
    animation-duration: 0s;
  }
}
@-ms-keyframes checkmark-animation {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  50% {
    height: 15px;
    width: 0;
    opacity: 1;
  }
  100% {
    height: 15px;
    width: 27px;
    opacity: 1;
  }
}
@-webkit-keyframes checkmark-animation {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  50% {
    height: 15px;
    width: 0;
    opacity: 1;
  }
  100% {
    height: 15px;
    width: 27px;
    opacity: 1;
  }
}
@keyframes checkmark-animation {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  50% {
    height: 15px;
    width: 0;
    opacity: 1;
  }
  100% {
    height: 15px;
    width: 27px;
    opacity: 1;
  }
}

/*
Forbidden

A forbidden sign to show issues

Markup:
<div class="yivi-web-forbidden-animation" onclick="var elm = this; elm.className = ''; setTimeout(function() { elm.className = 'yivi-web-forbidden-animation'; }, 100)"></div>

Styleguide Animations.Forbidden
*/
.yivi-web-forbidden-animation {
  background-color: inherit;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  display: inline-block;
  position: relative;
  width: 44px;
  height: 44px;
}
.yivi-web-forbidden-animation:before, .yivi-web-forbidden-animation:after {
  content: " ";
  display: block;
  position: absolute;
  box-sizing: border-box;
  width: 22px;
  height: 44px;
  top: 0;
  left: 22px;
  border: 7px solid #e12747;
  border-radius: 22px;
}
.yivi-web-forbidden-animation:before {
  -ms-animation: complete-animation 0.8s linear 1 forwards;
  -webkit-animation: complete-animation 0.8s linear 1 forwards;
  animation: complete-animation 0.8s linear 1 forwards;
}
@media (prefers-reduced-motion: reduce) {
  .yivi-web-forbidden-animation:before {
    -ms-animation-duration: 0s;
    -webkit-animation-duration: 0s;
    animation-duration: 0s;
  }
}
.yivi-web-forbidden-animation:after {
  width: 37px;
  -ms-animation: rotate-animation 0.8s linear 1 forwards;
  -webkit-animation: rotate-animation 0.8s linear 1 forwards;
  animation: rotate-animation 0.8s linear 1 forwards;
}
@media (prefers-reduced-motion: reduce) {
  .yivi-web-forbidden-animation:after {
    -ms-animation-duration: 0s;
    -webkit-animation-duration: 0s;
    animation-duration: 0s;
  }
}
@-ms-keyframes complete-animation {
  0%, 65% {
    border-radius: 0px;
    border-left: 0px;
    border-top-right-radius: 22px;
    border-bottom-right-radius: 22px;
    width: 22px;
    left: 22px;
  }
  66%, 100% {
    border: 7px solid #e12747;
    border-radius: 22px;
    width: 44px;
    left: 0;
  }
}
@-webkit-keyframes complete-animation {
  0%, 65% {
    border-radius: 0px;
    border-left: 0px;
    border-top-right-radius: 22px;
    border-bottom-right-radius: 22px;
    width: 22px;
    left: 22px;
  }
  66%, 100% {
    border: 7px solid #e12747;
    border-radius: 22px;
    width: 44px;
    left: 0;
  }
}
@keyframes complete-animation {
  0%, 65% {
    border-radius: 0px;
    border-left: 0px;
    border-top-right-radius: 22px;
    border-bottom-right-radius: 22px;
    width: 22px;
    left: 22px;
  }
  66%, 100% {
    border: 7px solid #e12747;
    border-radius: 22px;
    width: 44px;
    left: 0;
  }
}
@-ms-keyframes rotate-animation {
  0%, 32.99% {
    border: 0;
    border-radius: 0;
    background-color: white;
    transform-origin: center left;
    width: 22px;
  }
  33%, 65.99% {
    border: 7px solid #e12747;
    border-radius: 0px;
    border-left: 0px;
    border-top-right-radius: 22px;
    border-bottom-right-radius: 22px;
    background-color: white;
    width: 22px;
    height: 44px;
    transform-origin: center left;
    left: 22px;
  }
  66%, 100% {
    border: 0;
    background-color: #e12747;
    height: 7px;
    transform: rotate(-45deg) translate(-18.5px, 27.5px);
    transform-origin: top left;
    left: 0;
  }
  0.01% {
    transform: rotate(1deg);
  }
  32.98% {
    transform: rotate(180deg);
  }
  33.01% {
    transform: rotate(1deg);
  }
  65.98% {
    transform: rotate(180deg);
  }
  66.01% {
    width: 0;
  }
  99.99% {
    width: 37px;
  }
}
@-webkit-keyframes rotate-animation {
  0%, 32.99% {
    border: 0;
    border-radius: 0;
    background-color: white;
    transform-origin: center left;
    width: 22px;
  }
  33%, 65.99% {
    border: 7px solid #e12747;
    border-radius: 0px;
    border-left: 0px;
    border-top-right-radius: 22px;
    border-bottom-right-radius: 22px;
    background-color: white;
    width: 22px;
    height: 44px;
    transform-origin: center left;
    left: 22px;
  }
  66%, 100% {
    border: 0;
    background-color: #e12747;
    height: 7px;
    transform: rotate(-45deg) translate(-18.5px, 27.5px);
    transform-origin: top left;
    left: 0;
  }
  0.01% {
    transform: rotate(1deg);
  }
  32.98% {
    transform: rotate(180deg);
  }
  33.01% {
    transform: rotate(1deg);
  }
  65.98% {
    transform: rotate(180deg);
  }
  66.01% {
    width: 0;
  }
  99.99% {
    width: 37px;
  }
}
@keyframes rotate-animation {
  0%, 32.99% {
    border: 0;
    border-radius: 0;
    background-color: white;
    transform-origin: center left;
    width: 22px;
  }
  33%, 65.99% {
    border: 7px solid #e12747;
    border-radius: 0px;
    border-left: 0px;
    border-top-right-radius: 22px;
    border-bottom-right-radius: 22px;
    background-color: white;
    width: 22px;
    height: 44px;
    transform-origin: center left;
    left: 22px;
  }
  66%, 100% {
    border: 0;
    background-color: #e12747;
    height: 7px;
    transform: rotate(-45deg) translate(-18.5px, 27.5px);
    transform-origin: top left;
    left: 0;
  }
  0.01% {
    transform: rotate(1deg);
  }
  32.98% {
    transform: rotate(180deg);
  }
  33.01% {
    transform: rotate(1deg);
  }
  65.98% {
    transform: rotate(180deg);
  }
  66.01% {
    width: 0;
  }
  99.99% {
    width: 37px;
  }
}

/*
Clock

A clock to show timeouts

Markup:
<div class="yivi-web-clock-animation"></div>

Styleguide Animations.Clock
*/
.yivi-web-clock-animation {
  background-color: inherit;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  display: inline-block;
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 5px solid #e12747;
}
.yivi-web-clock-animation:before {
  content: " ";
  position: absolute;
  display: block;
  width: 5px;
  height: 5px;
  top: -7.5px;
  left: 13.5px;
  background-color: #e12747;
}
.yivi-web-clock-animation:after {
  content: " ";
  position: absolute;
  display: block;
  width: 5px;
  height: 17.5px;
  top: 2px;
  left: 13.5px;
  background-color: #e12747;
  transform: rotate(0deg);
  transform-origin: bottom center;
  -ms-animation: clock-animation 2s 1 ease;
  -webkit-animation: clock-animation 2s 1 ease;
  animation: clock-animation 2s 1 ease;
}
@media (prefers-reduced-motion: reduce) {
  .yivi-web-clock-animation:after {
    -ms-animation-duration: 0s;
    -webkit-animation-duration: 0s;
    animation-duration: 0s;
  }
}
@-ms-keyframes clock-animation {
  0% {
    transform: rotate(-30deg);
  }
  40% {
    transform: rotate(-30deg);
  }
  50% {
    transform: rotate(-15deg);
  }
  90% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@-webkit-keyframes clock-animation {
  0% {
    transform: rotate(-30deg);
  }
  40% {
    transform: rotate(-30deg);
  }
  50% {
    transform: rotate(-15deg);
  }
  90% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes clock-animation {
  0% {
    transform: rotate(-30deg);
  }
  40% {
    transform: rotate(-30deg);
  }
  50% {
    transform: rotate(-15deg);
  }
  90% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.yivi-web-clock-animation {
  -ms-animation: shake-animation 1s infinite linear 2s;
  -webkit-animation: shake-animation 1s infinite linear 2s;
  animation: shake-animation 1s infinite linear 2s;
}
@media (prefers-reduced-motion: reduce) {
  .yivi-web-clock-animation {
    -ms-animation-duration: 0s;
    -webkit-animation-duration: 0s;
    animation-duration: 0s;
  }
}
@-ms-keyframes shake-animation {
  10%, 90% {
    transform: translate3d(-2px, 1px, 0);
  }
  20%, 80% {
    transform: translate3d(2px, -1px, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-2px, -1px, 0);
  }
  40%, 60% {
    transform: translate3d(2px, 1px, 0);
  }
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes shake-animation {
  10%, 90% {
    transform: translate3d(-2px, 1px, 0);
  }
  20%, 80% {
    transform: translate3d(2px, -1px, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-2px, -1px, 0);
  }
  40%, 60% {
    transform: translate3d(2px, 1px, 0);
  }
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes shake-animation {
  10%, 90% {
    transform: translate3d(-2px, 1px, 0);
  }
  20%, 80% {
    transform: translate3d(2px, -1px, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-2px, -1px, 0);
  }
  40%, 60% {
    transform: translate3d(2px, 1px, 0);
  }
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
}

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