@font-face {
  font-weight: normal;
  font-family: 'Sofia Sans Light';
  font-style: normal;
  src:
    url('assets/theme/fonts/SofiaSans-Light.woff2') format('woff2'),
    url('assets/theme/fonts/SofiaSans-Light.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-weight: bold;
  font-family: 'Sofia Sans';
  font-style: normal;
  src:
    url('assets/theme/fonts/SofiaSansExtraCondensed-Bold.woff2') format('woff2'),
    url('assets/theme/fonts/SofiaSansExtraCondensed-Bold.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-weight: bold;
  font-family: 'Apercu Pro';
  font-style: normal;
  src:
    url('assets/theme/fonts/ApercuPro-Bold.woff2') format('woff2'),
    url('assets/theme/fonts/ApercuPro-Bold.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-weight: 300;
  font-family: 'Apercu Pro';
  font-style: normal;
  src:
    url('assets/theme/fonts/ApercuPro-Light.woff2') format('woff2'),
    url('assets/theme/fonts/ApercuPro-Light.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-weight: normal;
  font-family: 'Apercu Pro';
  font-style: normal;
  src:
    url('assets/theme/fonts/ApercuPro-Regular.woff2') format('woff2'),
    url('assets/theme/fonts/ApercuPro-Regular.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-weight: bold;
  font-family: 'Proxima Nova';
  font-style: normal;
  src:
    url('assets/theme/fonts/ProximaNova-Bold.woff2') format('woff2'),
    url('assets/theme/fonts/ProximaNova-Bold.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-weight: normal;
  font-family: 'Proxima Nova';
  font-style: normal;
  src:
    url('assets/theme/fonts/ProximaNova-Regular.woff2') format('woff2'),
    url('assets/theme/fonts/ProximaNova-Regular.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-weight: 500;
  font-family: 'Proxima Nova';
  font-style: normal;
  src:
    url('assets/theme/fonts/ProximaNova-Semibold.woff2') format('woff2'),
    url('assets/theme/fonts/ProximaNova-Semibold.woff') format('woff');
  font-display: swap;
}

#rsscratchclient {
  /* General Color Variables */
  --theme-color-1: #003e52;
  --theme-color-1-75: rgba(0, 62, 82, 0.75);
  --theme-color-2: #b8d8eb;
  --theme-color-3: #c53d71;
  --color-white: #fff;
  --color-gold: #ffdc92;

  /* Font Variables */
  --root-font-family: 'Apercu Pro', helvetica, arial, sans-serif;
  --root-font-family-secondary: 'Proxima Nova', helvetica, arial, sans-serif;
  --root-font-size: 16px;
  --root-font-weight: 400;
  --light-text-color: var(--color-white);
  --dark-text-color: var(--theme-color-1);
  --blue-text-color: #003a4ebf;

  /* Jackpot fonts */
  --jackpot-font-family: 'Apercu Pro', helvetica, arial, sans-serif;

  /* Text value font */
  --text-value-font-family: 'Proxima Nova', helvetica, arial, sans-serif;

  /* Text value title font  */
  --text-value-title-font-family: 'Apercu Pro', helvetica, arial, sans-serif;

  /* Top Bar */
  --top-bar-height: 31px;

  /* Button */
  --button-border-radius: 23px;

  /* Pink Button */
  --primary-button-background-color: var(--theme-color-3);
  --primary-button-text-color: var(--color-white);

  /* Light Blue Button */
  --secondary-button-background-color: var(--theme-color-2);
  --secondary-button-text-color: var(--theme-color-1);

  /* White Button */
  --tertiary-button-background-color: var(--color-white);
  --tertiary-button-text-color: var(--theme-color-1);

  /* Spinner */
  --spinner-background-color: #032a3d;
  --spinner-color: rgba(255, 255, 255, 0.5);

  /* Modal */
  --modal-background-color: rgba(0, 38, 50, 0.75);
  --modal-text-color: #003e52;
  --modal-button-background-color: var(--color-white);
  --modal-button-text-color: #053a53;

  /* Bonus */
  --bonus-bar-color-bottom: rgba(6, 86, 111, 0.15);
  --bonus-bar-middle: rgba(6, 86, 111, 0.25);
  --bonus-bar-top: rgba(6, 86, 111);
  --bonus-green-bar-confirmation: #9ed8b3;
  --bonus-green-bar-receipt: #6fa088;

  --card-dropshadow: drop-shadow(0px 9px 9px #88b4c5);
  --card-shadow: 0px 9px 9px #88b4c5;
  --card-dropshadow-selected: drop-shadow(0px 0px 32px #fff);
  --card-shadow-selected: 0px 0px 32px #fff;
}
/* mobile settings */

/* header items */
#rsscratchclient .Header-module__wrapper {
  position: absolute;
  top: 24px;
  overflow: visible; /* allow balance to overflow the grid */
  display: grid;
  grid-template-columns: 0.5fr 1fr 0.5fr;
  align-items: center;
}
#rsscratchclient .Header-module__heading {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%);
  z-index: 1;
  margin: 0;
  pointer-events: none;
  white-space: nowrap;
}
#rsscratchclient .Header-module__closeButton {
  position: relative;
  top: unset;
  left: unset;
  background: none;
  width: unset;
  height: unset;
  margin: unset;
}

#rsscratchclient .Header-module__closeButton > svg {
  display: none;
}

.Header-module__closeButton::after {
  content: 'Tillbaka';
  font-family: var(--root-font-family);
  font-size: 16px;
  color: var(--blue-text-color);
  text-decoration: underline;
}

#rsscratchclient .UserBalance-module__wrapper {
  box-sizing: border-box;
  position: absolute;
  right: -4px;
  font-size: 14px;
  letter-spacing: -1%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  padding: 8px 12px;
  gap: unset;
  height: 100%;
  isolation: isolate;

  background: rgba(255, 255, 255, 0.2);

  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px 0 0 20px;

  color: #003a4e;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

#rsscratchclient
  .UserBalance-module__wrapper
  > span:not(.UserBalance-module__heading) {
  font-weight: bold;
}

#rsscratchclient .UserBalance-module__heading {
  margin-right: unset;
}
#rsscratchclient .UserBalance-module__wrapper {
  min-width: unset;
}

/* card picker items */

#rsscratchclient .CardPicker-module__wrapper {
  justify-content: unset;
  margin-top: 90px;
}

#rsscratchclient .CardPicker-module__cardWrapper {
  margin: 0;
  width: 137px;
  height: 251px;
  transform: translateY(0);
}

#rsscratchclient .CardPicker-module__card {
  transform-origin: center 440px;
}

/*button wrapper items */
#rsscratchclient .Buttons-module__buttonWrapper {
  position: absolute;
  transform: unset;
  grid-template-rows: 0.25fr 1fr;
  row-gap: 24px;
  bottom: 0;
  width: 100%;
  height: 30vh;
  max-height: 200px;
  padding: 20px;
  justify-items: center;
  background: rgba(255, 255, 255, 0.31);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 40px 40px 0px 0px;
}

/* Modal items */
#rsscratchclient .Modal-module__purchaseModal {
  position: relative;
  min-height: 342px;

  .Modal-module__title {
    position: absolute;
    top: 16px;
    font-size: 16px;
    color: var(--theme-color-1-75);
  }

  .Modal-module__subtitle {
    position: absolute;
    top: 40px;
    font-size: 20px;
  }

  .Modal-module__content {
    margin-top: 108px;

    .Buttons-module__amountSpecification {
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
      gap: 4px;
      margin-bottom: 4px;

      span {
        font-weight: 700;
      }
    }
  }

  .Modal-module__isCustomModalFooter {
    .Buttons-module__button.Buttons-module__nakedButton {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 16px;
      width: unset;
      height: unset;
      min-width: unset;
    }
    .Buttons-module__button.Buttons-module__splitButton {
      position: relative;
      max-width: 100%;
    }
  }
}
#rsscratchclient .Modal-module__footer.Modal-module__hasMultipleButtons {
  gap: 8px;
}

#rsscratchclient
  .Button-module__isSecondary:not(
    .Buttons-module__nakedButton,
    .CustomResultModal-module__secondaryButton
  ) {
  background-color: var(--theme-color-1);
  font-weight: 700;
  font-family: var(--root-font-family);
  color: var(--light-text-color);
  -webkit-text-fill-color: var(--light-text-color);
}

/* Scratch card items */
#rsscratchclient .ScratchCard-module__heading {
  font-size: 20px;
  top: calc(var(--top-bar-height) + 18px);
}

#rsscratchclient .Buttons-module__button:not(.Buttons-module__nakedButton) {
  height: 44px;
  font-size: 16px;
  font-weight: 700;
}

@media only screen and (min-width: 667px) {
  #rsscratchclient .Buttons-module__button:not(.Buttons-module__nakedButton) {
    height: 48px;
    font-size: 18px;
    font-weight: 700;
    font-family: var(--root-font-family);
  }

  #rsscratchclient .Header-module__wrapper {
    position: absolute;
    top: 40px;
    display: grid;
    grid-template-columns: 0.5fr 1fr 0.5fr;
    align-items: center;
    width: 100%;
    max-width: 652px;
  }
  #rsscratchclient .Header-module__heading {
    font-size: 24px;
    line-height: 24px;
  }
  #rsscratchclient .Header-module__closeButton {
    position: relative;
    top: unset;
    left: unset;
    background: none;
    width: unset;
    height: unset;
    margin: unset;
  }

  #rsscratchclient .Header-module__closeButton > svg {
    display: none;
  }

  #rsscratchclient .Header-module__closeButton::after {
    content: 'Tillbaka';
    font-family: var(--root-font-family);
    font-size: 16px;
    color: var(--blue-text-color);
    text-decoration: underline;
  }

  #rsscratchclient .UserBalance-module__wrapper {
    display: flex;

    align-items: center;
    justify-content: center;
    flex-direction: row;
    margin-top: 5px;
    height: 30px;
    padding: 0 16px;
    border-radius: 20px;

    width: fit-content;
    justify-self: center;
  }
  #rsscratchclient .UserBalance-module__wrapper {
    min-width: 152px;
  }

  #rsscratchclient .UserBalance-module__heading {
    margin-right: 4px;
  }

  #rsscratchclient .CardPicker-module__wrapper {
    justify-content: unset;
    margin-top: 220px;
  }

  #rsscratchclient .CardPicker-module__cardWrapper {
    margin: 0;
    width: 137px;
    height: 251px;
    transform: translateY(0);
  }

  #rsscratchclient .Buttons-module__buttonWrapper {
    position: unset;
    transform: translateY(100px);
    grid-template-rows: 0.25fr 1fr;
    row-gap: 24px;
    bottom: 0;
    width: 100%;
    height: unset;
    max-height: 200px;
    padding: 20px;
    justify-items: center;
    background: unset;
    border: unset;
    border-radius: unset;
  }

  #rsscratchclient .CardPicker-module__card {
    transform-origin: center 1600px;
  }
  #rsscratchclient .ScratchCard-module__heading {
    font-size: 24px;
    top: calc(var(--top-bar-height) + 36px);
  }
  #rsscratchclient .Buttons-module__button {
    height: 48px;
  }
}

@media only screen and (orientation: portrait) and (min-width: 667px) and (max-width: 1024px) {
  #rsscratchclient .CardPicker-module__wrapper {
    justify-content: unset;
    margin-top: 300px;
  }
}

@media only screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1366px) {
  #rsscratchclient .CardPicker-module__wrapper {
    justify-content: unset;
    margin-top: 140px;
  }
}
@media only screen and (min-width: 667px) and (min-height: 501px) and (max-height: 768px) {
  #rsscratchclient .CardPicker-module__wrapper {
    justify-content: unset;
    margin-top: 90px;
  }

  #rsscratchclient .Buttons-module__buttonWrapper {
    transform: translateY(30px);
  }
}