:root {

  --white: #FFFFFF;

  /* Neutrals/Greys */
  --neutral-50: #F9FAFB;
  --neutral-100: #F3F4F6;
  --neutral-200: #E5E7EB;
  --neutral-300: #D1D5DB;
  --neutral-400: #9CA3AF;
  --neutral-500: #6B7280;
  --neutral-600: #4B5563;
  --neutral-700: #374151;
  --neutral-800: #1F2937;
  --neutral-900: #111827;

  /* Neutrals/Greys */
  --primary-light: #F6FFFE;
  --primary-main: #199F8F;
  --primary-dark: #0B564E;
  --primary-button: #072530;
  --primary-button-active: #092D3A;
  --primary-gradient: linear-gradient(90deg, #046B90, #1CC9B6);

  /* Accents colors/Error */
  --error-light: #FEE2E2;
  --error-main: #DC2626;
  --error-dark: #7F1D1D;

  /* Accents colors/Success */
  --success-light: #EFFFF5;
  --success-main: #16A34A;
  --success-dark: #14532D;

  /* Accents colors/Warning */
  --warning-light:#FFFCDC;
  --warning-main:#EAB308;
  --warning-dark: #713F12;

  /* shadow focus */
  --shadow-large: 0 4px 12px 0 rgba(31, 41, 55, 0.1);
  --shadow-medium: 0 4px 12px 0 rgba(31, 41, 55, 0.08);
  --shadow-focused-state: 0 0 0 4px #96DDD5;
  --shadow-toast: 0px 2px 12px 0px rgba(0, 0, 0, 0.50);
  --box-shadow: 2px 2px 12px 0 rgba(0, 0, 0, 0.15);
  --box-shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
  --box-shadow-green:0 8px 20px 0 rgba(32, 198, 191, 0.20);

  /* Border color for qvik */
  --border-dark: #1E1F54;

  /* Fonts */
  --font-title-extra-large: normal normal 600 20px/28px 'Noto Sans';
  --font-title-large: normal normal 600 18px/24px 'Noto Sans';
  --font-title-medium: normal normal 600 16px/24px 'Noto Sans';
  --font-title-small: normal normal 600 14px/20px 'Noto Sans';

  --font-subtitle-large: normal normal 500 16px/22px 'Noto Sans';
  --font-subtitle-medium: normal normal 500 14px/19px 'Noto Sans';
  --font-subtitle-small: normal normal 500 12px/16px 'Noto Sans';

  --font-body-large: normal normal 400 16px/24px 'Noto Sans';
  --font-body-medium: normal normal 400 14px/24px 'Noto Sans';
  --font-body-small: normal normal 400 12px/16px 'Noto Sans';

  --font-button-text: normal normal 600 16px/22px 'Noto Sans';

  --font-small-label-regular-weight: normal normal 400 13px/17px 'Noto Sans';
  --font-small-label-medium-weight: normal normal 500 13px/17px 'Noto Sans';
  --font-label-regular-weight: normal normal 400 14px/18px 'Noto Sans';
  --font-label-medium-weight: normal normal 500 14px/18px 'Noto Sans';

  --font-card-number: normal normal 500 16px/22px 'Noto Sans';

}

#root {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

* {
  /* fonts */
  font-family: 'Noto Sans', sans-serif;
  font-style: normal;
}

html, body {
  height: 100%;
  min-width: 360px;
  margin: 0;
  box-sizing: border-box;
  background-color: var(--neutral-50);
}

@font-face {
  font-family: 'Noto Sans';
  src: url('./fonts/NotoSans-Regular.woff2') format('woff2'), url('./fonts/NotoSans-Regular.woff') format('woff');
  font-style: normal;
  font-weight: 400;
  font-stretch: 1% 500%;
}

@font-face {
  font-family: 'Noto Sans';
  src: url('./fonts/NotoSans-Medium.woff2') format('woff2'), url('./fonts/NotoSans-Medium.woff') format('woff');
  font-style: normal;
  font-weight: 500;
  font-stretch: 1% 500%;
}

@font-face {
  font-family: 'Noto Sans';
  src: url('./fonts/NotoSans-SemiBold.woff2') format('woff2'), url('./fonts/NotoSans-SemiBold.woff') format('woff');
  font-style: normal;
  font-weight: 600;
  font-stretch: 1% 500%;
}

.title-extra-large {

  /* Title/Title extra large */
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  font-style: normal;
}

.title-large {

  /* Title/Title large */
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  font-style: normal;
}

.title-medium {

  /* Title/Title medium */
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  font-style: normal;
}

.title-small {

  /* Title/Title small */
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  font-style: normal;
}

.subtitle-large {

  /* Subtitle/Subtitle large */
  font-weight: 500;
  font-size: 16px;
  font-style: normal;
  line-height: 22px;
}

.subtitle-medium {

  /* Subtitle/Subtitle medium */
  font-weight: 500;
  font-size: 14px;
  font-style: normal;
  line-height: 19px;
}

.subtitle-small {

  /* Subtitle/Subtitle small */
  font-weight: 500;
  font-size: 12px;
  font-style: normal;
  line-height: 16px;
}

.body-large {

  /* Body/Body large */
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  font-style: normal;
}

.body-medium {

  /* Body/Body medium */
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  font-style: normal;
}

.body-small {

  /* Body/Body small */
  font-weight: 400;
  font-size: 12px;
  font-style: normal;
  line-height: 16px;
}

.button-text {

  /* Button text */
  font-weight: 600;
  font-size: 16px;
  font-style: normal;
  line-height: 22px;
}

.label-regular-weight {

  /* Label/Label regular weight */
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  font-style: normal;
}

.label-medium-weight {

  /* Label/Label medium weight */
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  font-style: normal;
}

.main-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.40);
  min-height: 100%;
  min-width: 100%;
  position: absolute;
}

.loader {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
  margin: 15px auto;
  position: relative;
  color: #b3b3b3;
  box-sizing: border-box;
  animation: animloader 1.4s linear infinite;
}

.gpay_container {
  height: 50px;
}

apple-pay-button {
   --apple-pay-button-height: 50px;
   --apple-pay-button-width: 100%;
   --apple-pay-button-border-radius: 8px;
   --apple-pay-button-padding: 0px 0px;
   --apple-pay-button-box-sizing: border-box;
}

@keyframes animloader {
  0% {
    box-shadow: 12px -7px 0px 0px, 36px -7px 0px 0px, -12px -7px 0px 0px, -36px -7px 0px 0px;
  }
  13% {
    box-shadow: 12px -7px 0px 0px, 36px -7px 0px 0px, -12px -7px 0px 0px, -36px -20px 0px 3px rgb(255,255,255);
  }
  26% {
    box-shadow: 12px -7px 0px 0px, 36px -7px 0px 0px, -12px -20px 0px 3px rgb(255,255,255), -36px -7px 0px 0px;
  }
  39% {
    box-shadow: 12px -20px 0px 3px rgb(255,255,255), 36px -7px 0px 0px, -12px -7px 0px 0px, -36px -7px 0px 0px;
  }
  52% {
    box-shadow: 12px -7px 0px 0px, 36px -20px 0px 3px rgb(255,255,255), -12px -7px 0px 0px, -36px -7px 0px 0px;
  }
  67% {
    box-shadow: 12px -7px 0px 0px, 36px -7px 0px 0px, -12px -7px 0px 0px, -36px -7px 0px 0px;
  }
  100% {
    box-shadow: 12px -7px 0px 0px, 36px -7px 0px 0px, -12px -7px 0px 0px, -36px -7px 0px 0px;
  }
}