@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

* {
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
  padding: 0;
  border: 0;
}

:root {
  --element-max-width-s: 400px;
  --element-max-width: 1000px;
  --container-max-width: 1600px;
  --token-checkbox-width: 50px;
  --token-checkbox-height: 32px;
  --header-height: 80px;
  --mobile-icon-nav-height: 60px;
  --desktop-icon-nav-height: 34px;
  --desktop-table-header-height: 34px;
  --desktop-tab-item-height: 34px;
  --coupon-nav-height: 34px;
  --header-z-index: 10;
  --footer-z-index: 10;
  --popup-z-index: 20;
  --info-z-index: 15;
  --expandable-z-index: 5;

  /* Font related constants */
  --font-size-xs: 10px;
  --font-size-s: 12px;
  --font-size-m: 14px;
  --font-size-l: 16px;
  --font-size-xl: 20px;
  --font-size-xxl: 24px;
  --font-weight: 400;

  /* Font weight used in the design document but not specified in its font declarations */
  --font-weight-light: 300;
  --font-weight-semibold: 500;
  --font-weight-bold: 700;

  /* Font weight used in the design document but not specified in its font declarations */
  --font-weight-superbold: 900;
  --letter-spacing: 2%;
  --line-height: 1.35;
  --line-height-xs: 1;

  /* Color related constants */
  --color-black: #000;
  --color-white: #fff;
  --color-off-white: #fafafa;
  --color-white-smoke: #f7f7f7;
  --color-black-jet: #2a2a2a;
  --color-black-nero: #242424;
  --color-charcoal: #424242;
  --color-light-charcoal: #555;
  --color-faded-light-green: #d8fbdc;
  --color-light-green: #2fd679;
  --color-faded-green: #c5e2ce;
  --color-green: #39a935;
  --color-dark-green: #378b43;
  --color-yellow: #f9cd1a;
  --color-light-yellow: #f6ff00;
  --color-yellow-beige: #fbf4da;
  --color-dark-yellow: #ffae3d;
  --color-orange: #f1852b;
  --color-light-red: #ed343d;
  --color-red: #c32341;
  --color-dark-red: #d00027;
  --color-grey: #999;
  --color-lightish-grey: #bdbdbd;
  --color-light-grey: #d9d9d9;
  --color-dark-grey: #8e8e8e;
  --color-blueish-white: #f3f6fe;

  /* Used for the background color of the popup box */
  --color-popup-bg-white: rgb(255 255 255 / 80%);

  /* Lowered opacity white background to be used outside of the popup */
  --color-blue: #009ee2;

  /* Derived from the game's logo. */
  --color-dark-blue: #0086c0;

  /* Manually derived darker version of blue. */
  --color-light-blue: #82cff1;

  /* Blue as if at ~50% opacity on a white background. */
  --color-steel-green-blue: #1f5061;

  /* Darker version of steel green blue from design document. */
  --color-darker-steel-green-blue: #193c48;

  /* Gray border line used in game round */
  --color-game-round-grey-border: #c3c3c3;

  /* Shadowing presets */
  --box-shadow-subtle: #00000040 0 0 4px;

  /* Changed from 300ms in Figma design. */
  --transition-duration-short: 33ms;
  --transition-function: ease-out;
  --transition-duration: 100ms;

  /* Padding related constants */
  --padding-4xs: 0.125rem;
  --padding-3xs: 0.25rem;
  --padding-xxs: 0.35rem;
  --padding-xs: 0.5rem;
  --padding-s: 0.75rem;
  --padding-m: 1rem;
  --padding-l: 2rem;

  /* Border radiuses */
  --radius: 0.375rem;
  --radius-m: 0.5rem;
}

/*
 * Add support for the Alpine JS x-cloak directive.
 * See https://alpinejs.dev/directives/cloak for reference.
 *
 * When Alpine JS has loaded it will remove all x-cloak attributes.
 */
[x-cloak] {
  display: none !important;
}

/* Containers */

.container {
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
}

.stack-s > * + * {
  margin-block-start: 0.5rem;
}

.stack-m > * + * {
  margin-block-start: 1rem;
}

.stack > * + * {
  margin-block-start: 1.5rem;
}

.dock-top {
  position: sticky;
  top: var(--header-height);
  z-index: var(--header-z-index);
}

.card {
  background-color: var(--color-white);
  border: 1px solid var(--color-light-grey);
  border-radius: var(--radius);
}

.divider {
  border: thin solid;
  background-color: var(--color-grey);
  color: var(--color-grey);
  width: 100%;
  border-radius: 1px;
}

/* Utilities */

/* Hides elements that would otherwise consume visual DOM space even when the property hidden is set */
.visually-hidden {
  position: absolute;
  margin: -1px;
  width: 1px;
  height: 1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  clip-path: inset(100%);
  overflow: hidden;
}

.block {
  display: block;
}

/* Used to render only the contents of an element.
 * This is useful when elements need to be grouped in a container but only the
 * contained elements should be styled, such as automatic grid placement.
 */
.display-contents {
  display: contents;
}

.text-underlined {
  text-decoration: underline;
}

.font-default {
  font-weight: var(--font-weight);
  font-size: var(--font-size-m);
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height);
}

.font-light {
  font-weight: var(--font-weight-light);
}

.font-semibold {
  font-weight: var(--font-weight-semibold);
}

.font-bold {
  font-weight: var(--font-weight-bold);
}

.font-italics {
  font-style: italic;
}

.font-superbold {
  font-weight: var(--font-weight-superbold);
}

.font-xs {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height-xs);
}

.font-s {
  font-size: var(--font-size-s);
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height);
}

.font-m {
  font-size: var(--font-size-m);
  letter-spacing: var(--letter-spacing);
}

.font-l {
  font-size: var(--font-size-l);
  letter-spacing: var(--letter-spacing);
}

.font-xl {
  font-size: var(--font-size-xl);
  letter-spacing: var(--letter-spacing);
}

.font-xxl {
  font-size: var(--font-size-xxl);
  letter-spacing: var(--letter-spacing);
}

.font-monospace {
  font-family: 'Roboto Mono', monospace;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.include-newlines {
  white-space: pre-line;
}

.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.gapped-xs {
  gap: var(--padding-xs);
}

.gapped-s {
  gap: var(--padding-s);
}

.gapped {
  gap: var(--padding-m);
}

.margin-right-m {
  margin-right: var(--padding-m);
}

.margin-right-s {
  margin-right: var(--padding-s);
}

.margin-right-xxs {
  margin-right: var(--padding-3xs);
}

.margin-left-xxs {
  margin-left: var(--padding-3xs);
}

.margin-top {
  margin-top: var(--padding-s);
}

.padded-3xs {
  padding: var(--padding-4xs);
}

.padded-xxs {
  padding: var(--padding-3xs);
}

.padded-xs {
  padding: var(--padding-xs);
}

.padded-s {
  padding: var(--padding-s);
}

.padded {
  padding: var(--padding-m);
}

.padded-l {
  padding: var(--padding-l);
}

.white-frame {
  border: 1px solid var(--color-white);
  border-radius: var(--radius);
}

.frame {
  border: 1px solid var(--color-light-grey);
  border-radius: 0.5rem;
}

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

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

.horizontally-centered {
  display: flex;
  justify-content: center;
}

.horizontally-spaced {
  display: flex;
  justify-content: space-evenly;
}

.evenly-spaced-columns {
  display: grid;
  gap: 4px;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  justify-items: center;

  > li {
    width: 100%;
  }
}

.horizontally-spaced-between {
  display: flex;
  justify-content: space-between;
}

.horizontally-align-right {
  display: flex;
  justify-content: right;
}

.vertically-centered {
  display: flex;
  align-items: center;
}

.bg-transparent {
  background-color: transparent;
}

.nowrap {
  white-space: nowrap;
}

.bg-white {
  background-color: var(--color-white);
}

.bg-white-smoke {
  background-color: var(--color-white-smoke);
}

.bg-light-grey {
  background-color: var(--color-light-grey);
}

.bg-steel-green-blue {
  background-color: var(--color-steel-green-blue);
}

.bg-dark-blue {
  background-color: var(--color-dark-blue);
}

.bg-blue {
  background-color: var(--color-blue);
}

.bg-light-blue {
  background-color: var(--color-light-blue);
}

.bg-dark-green {
  background-color: var(--color-dark-green);
}

.bg-green {
  background-color: var(--color-green);
}

.bg-faded-green {
  background-color: var(--color-faded-green);
}

.bg-yellow {
  background-color: var(--color-yellow);
}

.bg-grey {
  background-color: var(--color-grey);
}

.bg-dark-red {
  background-color: var(--color-dark-red);
}

.bg-light-red {
  background-color: var(--color-light-red);
}

.bg-orange {
  background-color: var(--color-orange);
}

.bg-green-to-red-gradient {
  background-color: var(--green-to-red-gradient);
}

.border-blue {
  border-color: var(--color-blue);
}

.border-green {
  border-color: var(--color-green);
}

.border-yellow {
  border-color: var(--color-yellow);
}

.border-grey {
  border-color: var(--color-grey);
}

.top-border {
  border-top-width: 2px;
  border-style: solid;
}

.color-white {
  color: var(--color-white);
}

.color-dark-grey {
  color: var(--color-dark-grey);
}

.color-grey {
  color: var(--color-grey);
}

.color-black {
  color: var(--color-black);
}

.color-green {
  color: var(--color-green);
}

.color-red {
  color: var(--color-red);
}

.color-steel-green-blue {
  color: var(--color-steel-green-blue);
}

.color-light-yellow {
  color: var(--color-light-yellow);
}

.color-dark-yellow {
  color: var(--color-dark-yellow);
}

.relative {
  position: relative;
}

.absolute-right {
  position: absolute;
  right: 0;
}

.absolute-anchor-left {
  position: absolute;
  left: 100%;
}

.flex-grow {
  flex-grow: 1;
}

.scrollable {
  overflow-y: auto;
}

.clickable {
  cursor: pointer;
}

.pointer-events-none {
  pointer-events: none;
}

.btn {
  font-size: var(--font-size-l);
  letter-spacing: var(--letter-spacing);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  display: inline-block;
  border-radius: var(--radius);
  padding: 0.5em 1.5em;
  border: 0;
  cursor: pointer;
  transition-property: background;
  transition-timing-function: var(--transition-function);
  transition-duration: var(--transition-duration-short);
  background-color: var(--color-green);
  line-height: 1;
}

.blue-btn {
  font-size: var(--font-size-l);
  letter-spacing: var(--letter-spacing);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  display: inline-block;
  border-radius: 0.35em;
  padding: 0.5em 1.5em;
  border: 0;
  cursor: pointer;
  transition-property: background;
  transition-timing-function: var(--transition-function);
  transition-duration: var(--transition-duration-short);
  background-color: var(--color-blue);
  line-height: 1;
}

/*
.btn-increment,
.btn-decrement {
  border: 2px solid var(--color-black);
  border-radius: 0.5rem;
  width: 1rem;
  height: 1rem;
  line-height: 0;
  font-family: monospace;
} */

.btn:disabled {
  cursor: unset;
  color: var(--color-light-grey);
  background-color: var(--color-grey);
}

a.btn:hover,
a.btn:focus,
button.btn:enabled:hover,
button.btn:enabled:focus {
  background-color: var(--color-dark-green);
}

a.blue-btn:hover,
a.blue-btn:focus,
button.blue-btn:enabled:hover,
button.blue-btn:enabled:focus {
  background-color: var(--color-dark-blue);
}

.btn:enabled:active {
  background-color: var(--color-black);
}

.btn.btn-secondary {
  background-color: var(--color-dark-grey);
  color: var(--color-white);
}

.btn.btn-secondary:disabled {
  background-color: var(--color-light-grey);
}

a.btn.btn-secondary:hover,
a.btn.btn-secondary:focus,
button.btn.btn-secondary:enabled:hover,
button.btn.btn-secondary:enabled:focus {
  background-color: var(--color-dark-grey);
}

.btn.btn-secondary:enabled:active {
  background-color: var(--color-black-nero);
}

.btn-text {
  background: none;
  border-bottom: 1px solid currentcolor;
  cursor: pointer;
}

html {
  scroll-behavior: smooth;
}

body {
  /* Fill the viewport. */
  min-height: 100vh;

  /* Set sensible default styles matching the game's profile. */
  font-family: Roboto, Verdana, Geneva, Tahoma, sans-serif;
  font-size: var(--font-size-m);
  letter-spacing: var(--letter-spacing);
  font-weight: var(--font-weight);
  background-color: var(--color-white);
}

input,
textarea,
button {
  font-family: inherit;
}

h1 {
  font-size: var(--font-size-xxl);
  letter-spacing: var(--letter-spacing);
}

h2 {
  font-size: var(--font-size-xl);
  letter-spacing: var(--letter-spacing);
}

h3 {
  font-size: var(--font-size-l);
  letter-spacing: var(--letter-spacing);
}

/* Apply this class to style create arrow-like icons using only css. */
.chevron-left,
.chevron-right,
.chevron-down {
  /* Allow chevrons to be placed inline with elements */
  display: inline-block;
  cursor: pointer;
  color: currentcolor;
  background: none;

  /* Accomodate for the rotation that otherwise creates overflow */
  padding: var(--padding-4xs);

  /* Draw the chevron */
  &::after {
    --chevron-base-length: 0.5em;
    --chevron-thickness: calc(var(--chevron-base-length) / 2.5);

    content: '';
    display: block;
    width: var(--chevron-base-length);
    height: var(--chevron-base-length);
    border-bottom: var(--chevron-thickness) solid;
    border-right: var(--chevron-thickness) solid;
  }
}

.chevron-right::after {
  transform: translateX(-1px) rotate(-45deg);
}

.chevron-left::after {
  transform: translateX(1px) rotate(135deg);
}

.chevron-down::after {
  transform: translateY(-1px) rotate(45deg);
}

/* Tables */

.data-table {
  width: 100%;
}

.data-table tr:nth-child(even) {
  background-color: var(--color-off-white);
}

.data-table td,
.data-table th {
  padding: var(--padding-s);
}

.data-table tr:hover {
  background-color: var(--color-faded-light-green);
}

.data-table th {
  text-align: left;
  font-weight: var(--font-weight-bold);
  background-color: var(--color-dark-green);
  color: var(--color-white);
}

/* Forms */

.form-cell > * {
  display: block;
  width: 100%;
}

.form-cell > label {
  padding-bottom: 0.5rem;
}

.basic-input {
  padding: 0.5rem;
  border: 2px solid var(--color-light-grey);
  outline: none;
}

.basic-input:focus {
  border-color: var(--color-black-jet);
}

.heading-row {
  /* Use a background to ensure that headings can be non-transparent if docked. */
  background-color: inherit;
  border-bottom: 1px solid var(--color-light-grey);
}

.markdown {
  line-height: var(--line-height);
}

.markdown h2,
.markdown h3 {
  font-weight: var(--font-weight-bold);
}

.markdown strong {
  font-weight: var(--font-weight-bold);
}

.markdown em {
  font-style: italic;
}

.markdown del {
  text-decoration: line-through;
}

.markdown ul {
  list-style: disc inside;
}

.markdown ol {
  list-style: decimal inside;
  margin-left: var(--padding-m);
}

.markdown * {
  max-width: 100%;
}

.markdown p + p {
  margin-top: 1rem;
}

.markdown h2 + p {
  margin-top: 1rem;
}

.markdown h3 + p {
  margin-top: 0.5rem;
}

.markdown * + h2 {
  margin-top: 1rem;
}

.markdown * + h3 {
  margin-top: 0.5rem;
}

.list-bordered {
  > * {
    border: 1px solid var(--color-game-round-grey-border);
  }

  /* Remove top border from all except first list item to avoid double thickness. */
  > *:not(:first-child) {
    border-top: none;
  }
}

/* stylelint-disable no-descending-specificity */
.striped {
  > *:nth-child(2n) {
    background-color: var(--color-white);
  }

  > *:nth-child(2n + 1) {
    background-color: var(--color-off-white);
  }
}

/*
 * Render a sticky footer with fixed positioning at the bottom of the viewport.
 */
#app > footer {
  grid-row: 3 / 4;
  z-index: var(--footer-z-index);
}

/*
 * Fill the viewport height with a main section.
 * Note that the header should not result in unnecessary scrolling.
 */
#app > main {
  padding-top: var(--header-height);
  grid-row: 2 / 3;
}

/* Generic */
.fullscreen-popup {
  position: fixed;
  flex-direction: column;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-blueish-white);
}

.full-height {
  height: 100%;
}

.full-width {
  width: 100%;
}

/* Set styling that is ONLY used for mobile phone screens. */
@media screen and (width < 768px) {
  /* Class that is used for switching the DOM between two
   *   completely different trees based on screen/window size.
   *
   * Note: Always use together with .mobile-only
   *
   */

  .desktop-only {
    display: none !important;
  }

  /* Fixes for overlapping elements in admin views.
    This is mostly for solving the issues with Pixel 7 in Playwright
    as the overlapping elements intercepts pointer events */
  #app,
  .nav-content {
    display: block !important;
  }

  #bet-line-list {
    padding: 0;
  }

  /* wraps wide content */
  .horizontally-spaced-between {
    flex-wrap: wrap;
  }

  .horizontally-spaced {
    align-items: start !important;
    flex-flow: column wrap;
    gap: 0.5rem;
  }

  /* Used on parent elements for tables to enable horizontal for
    tables and other wide content that breaks the layout in mobile */
  .mobile-horizontal-scroll {
    overflow-x: auto;

    /* Enables smooth scrolling on iOS devices */
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Collapses columns to rows so the fit mobile devices */
  div.agreement-valid-grid,
  li.admin-operator-ageement-grid {
    grid-template-columns: unset;
  }

  ol li.admin-game-round-grid,
  ol li.admin-bet-line-grid {
    /* Collapses columns to rows so the fit mobile devices */
    grid-template-columns: unset;

    /* Hides header row */
    &.font-bold {
      padding: 0;
      border-bottom: 0;

      span {
        display: none;
      }
    }

    /* Displays same as the hidden header but for each item */
    span[title]::before {
      content: attr(title);
      display: inline-block;
      margin-right: 0.5rem;
      margin-bottom: 0.5rem;
      font-weight: var(--font-weight-bold);
      font-size: var(--font-size-m);
      color: var(--color-black);
    }

    span[title='Bet Line'],
    span[title='Actions'] {
      display: block;
      width: 100%;
    }
  }

  div.admin-coupons-main-content {
    display: flex;
    justify-content: left;
    align-items: start;
    position: relative;
  }
}