:root {
  --name: light;

  --primaryColor: #5A1C64;
  --secondaryColor: #E8E3FA;

  --backgroundColor: #FDF9EF;
  --backgroundColorFallback: #FDF9EF;

  --fontColor: #000000;
  --primaryFontColor: #161616;
  --secondaryFontColor: #575757;
  --primaryButtonFontColor: #FFFFFF;

  --boxColor:#E6E0CF;

  --iconColor: #161616;

  --primaryButtonColor: #5A1C64;
  --hoverPrimaryButtonColor: #5A1C64;
  --tapPrimaryButtonColor: #CAABFF;

  --secondaryButtonColor: #E8E3FA;
  --hoverSecondaryButtonColor: #E8E3FABF;
  --tapSecondaryButtonColor: #E8E3FABF;

  --input-field-checked-color: #5A1C64;

  /* below here is usually not altered */

  --logoColor: #5B1865;

  --tertiaryButtonColor: #FFFFFF;
  --tapTertiaryButtonColor: #FFFFFF;

  --input-field-bg-color: #FFFFFF;
  --input-field-border-color: #8A8A8A;
  --input-field-border-color-focused: #161616;
  --input-field-placeholder-color: #8A8A8A;

  --focus-outline-color: #B5D0FC;

  --warningColor: #FFD400;
  --errorColor: #cc0011;

  --hoverScale: 1.005;
  --activeScale: 0.995;

  --select-icon-size: 10px;
  /* Icon size */
  --select-icon-margin: 1rem;
  /* Icon left/right positioning */
  --select-text-icon-gap: 0.5rem;
  /* Space between text and icon */

  --content-min-height: 400;
  --footer-height: 38;
  --phone-border: 46;
  --phone-min-height: 446;
  --tablet-border: 56;
  --tablet-min-height: 456;
  --minOuterWidth: 290px;
  --maxOuterWidth: 716px;

  --focusOutlineOffset: 1px;
  --focusOutlineWidth: 2px;

  --button-border-radius: 24px;
  --input-field-border-radius: 24px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --name: dark;

    --primaryColor: #D8FE00;
    --secondaryColor: #5C574B;
  
    --backgroundColor: linear-gradient(180deg, #5A1C64 0%, #240B28 100%);
    --backgroundColorFallback: #240B28;
    
    --fontColor: #ffffff;
    --primaryFontColor: #ffffff;
    --secondaryFontColor: #ffffff;
    --primaryButtonFontColor: #000000;

    --boxColor: rgba(255, 255, 255, 0.24);

    --iconColor: #ffffff;

    --primaryButtonColor: #D8FE00;
    --hoverPrimaryButtonColor: #D8FE00;
    --tapPrimaryButtonColor: #D8FE00;

    --secondaryButtonColor: #5C574B;
    --hoverSecondaryButtonColor: #5C574BBF;
    --tapSecondaryButtonColor: #5C574BBF;

    --input-field-bg-color-focused: #5A1C64;
    --input-field-checked-color: #5A1C64;
    --input-field-checked-bg-color: #D8FE00;

    /* below here is usually not altered */

    --logoColor: #ffffff;

    --tertiaryButtonColor: #7b5182; 
    --tapTertiaryButtonColor: #7b5182;

    --input-field-bg-color: #7b5182;
    --input-field-border-color: transparent;
    --input-field-border-color-focused: #FFFFFF;
    --input-field-placeholder-color: #ffffff;

    --errorColor: #FF4961;
  }
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior-y: none;
  box-sizing: border-box;
  background: var(--backgroundColorFallback, #FDF9EF);
}


body {
  background: var(--backgroundColor, #FDF9EF);
  background-repeat: no-repeat;
  background-size: cover; 
  font-size: 100%;
  font-family: "RundTextCompleteWeb", "Open-sans", "Roboto", sans-serif;
  color: var(--fontColor, #000000);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* Enables momentum (smooth) scrolling on iOS devices. */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  word-break: break-word;
}

@supports (font: -apple-system-body) {
  html {
    font: -apple-system-body !important;
  }
}

#app-container {
  height: 100%;
  display: grid;
  justify-content: center;
  align-items: flex-start;
  grid-auto-rows: 0 minmax(min-content, 1fr) min-content;
}

#content-container {
  position: relative;
  display: grid;
  text-align: left; 
  min-height: 400px;
  height: 100%;
  grid-template-columns: minmax(var(--minOuterWidth, 290px), var(--maxOuterWidth, 716px));
  transition: grid-template-columns 150ms ease-in-out;
  padding: 6px 32px;
}

.column-container {
  display: flex;
  flex-direction: column;
  align-items: left;
  width: 100%;

  #qr-code {
    align-self: center;
  }
}

#logo-container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 768px) {
  #app-container {
    padding-top: 0;
    align-items: center;
    grid-auto-rows: 1fr min-content minmax(min-content, 1fr);
  }

  #content-container {
    padding: 8px 8px;
    border-radius: 4px;
  }
}

h1 {
  font-size: 1.2em;
  font-weight: bold;
  margin-block-start: 1em;
  margin-block-end: 1.2em;
}

h2 {
  font-size: 1rem;
  font-weight: bold;
  color: var(--primaryFontColor, #161616);
}

h3 {
  font-size: 0.9em;
  font-weight: bold;
}

p,
h5 {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
}

.logo-poweredby {
 color: var(--logoColor, #5B1865);
}

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Internet Explorer */
@-ms-keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

*,
*:before,
*:after {
  box-sizing: inherit;
  outline: none;
  font-family: "RundTextCompleteWeb", "Open-sans", "Roboto", sans-serif;
}

.padding-bottom {
  padding-bottom: 8px;
}

.padding-top {
  padding-top: 8px;
}

.margin-top-16 {
  margin-top: 16px;
}

.margin-bottom-16 {
  margin-bottom: 16px;
}

.margin-right-8 {
  margin-right: 8px;
}


.align-left {
  width: 100%;
  text-align: left;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-align-center {
  align-content: center;
}

.icon {
  color: var(--iconColor, #9cb0d8);
  fill: currentColor;
}

.width-100 {
  width: 100%;
}

.error {
  color: var(--errorColor, #cc0011);
}

.error-details {
  padding: 8px;
  border-radius: 8px;
  background: var(--boxColor, #E6E0CF);
  color: var(--fontColor, #000000);
}

#error-table {
  padding-top: 16px;
  padding-left: 16px;
}

#error-table td:nth-child(1) {
  white-space: nowrap;
  vertical-align: top;
  font-size: 1rem;

  font-style: normal;
  font-weight: 500;
  line-height: 145%;
}

#error-table td:nth-child(2) {
  color: var(--primaryFontColor, #161616);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 145%
}