@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/inter/InterVariable.woff2") format("woff2");
}

@font-feature-values InterVariable {
  @character-variant {
    cv01: 1;
    cv02: 2;
    cv03: 3;
    cv04: 4;
    cv05: 5;
    cv06: 6;
    cv07: 7;
    cv08: 8;
    cv09: 9;
    cv10: 10;
    cv11: 11;
    cv12: 12;
    cv13: 13;
    alt-1: 1; /* Alternate one */
    alt-3: 9; /* Flat-top three */
    open-4: 2; /* Open four */
    open-6: 3; /* Open six */
    open-9: 4; /* Open nine */
    lc-l-with-tail: 5; /* Lower-case L with tail */
    simplified-u: 6; /* Simplified u */
    alt-double-s: 7; /* Alternate German double s */
    uc-i-with-serif: 8; /* Upper-case i with serif */
    uc-g-with-spur: 10; /* Capital G with spur */
    single-story-a: 11; /* Single-story a */
    compact-lc-f: 12; /* Compact f */
    compact-lc-t: 13; /* Compact t */
  }
  @styleset {
    ss01: 1;
    ss02: 2;
    ss03: 3;
    ss04: 4;
    ss05: 5;
    ss06: 6;
    ss07: 7;
    ss08: 8;
    open-digits: 1; /* Open digits */
    disambiguation: 2; /* Disambiguation (with zero) */
    disambiguation-except-zero: 4; /* Disambiguation (no zero) */
    round-quotes-and-commas: 3; /* Round quotes & commas */
    square-punctuation: 7; /* Square punctuation */
    square-quotes: 8; /* Square quotes */
    circled-characters: 5; /* Circled characters */
    squared-characters: 6; /* Squared characters */
  }
}

body { 
  font-family: "InterVariable", Arial, Helvetica, sans-serif; font-style: normal; margin: 0; height: 100vh; color: #444444; 
  background:  transparent url(../../../pgmerc/pgimages/images/billdesk-logo.png) no-repeat center bottom 20px;
 }

.main-container { display: flex; justify-content: center; align-items: center; height: 100%; flex-direction: column; }

h1 { font-size: 24px; font-weight: 500; color: #3e4a5d; width: auto; }
h4 { font-weight: 400; margin-top: 0; line-height: 24px; }

p { margin: 5px 0 10px; font-size: 14px; }

ul { margin: 0px; padding: 0px; } 
li { list-style: none; margin: 0px; font-size: 14px; padding: 0px; text-align: center; line-height: 24px; }

.chips { border: 1px solid #f9eab2; background-color: #fffbf3; border-radius: 7px; font-size: 12px; padding: 5px 10px; display: flex; align-items: center; margin: 30px 0 10px; }
.chips img { width: 18px; margin-right: 7px; }

footer { position: absolute; bottom: 20px; width: calc(100% - 40px); }
footer p { font-size: 10px; margin: 0 0 7px; text-align: center; }
.text-center { text-align: center; }

@media screen and (max-width: 768px) {
  .main-container { padding: 0 20px 15px; text-align: center; margin-top: -100px; }
  h1 {font-size: 20px; width: 100%; }
  h4 {font-size: 16px; line-height: 24px; }
  .mx-auto { margin-left: auto; margin-right: auto; }
  li { line-height: 20px; }
}

.loader { display: inline-block; width: 25px; aspect-ratio: 4; background: radial-gradient(circle closest-side,#808896 90%,#0000) 0/calc(100%/3) 100% space; clip-path: inset(0 100% 0 0); animation: l1 1.5s steps(4) infinite; }
@keyframes l1 {to{clip-path: inset(0 -34% 0 0)}}