/* /Views/Demographics/Edit.cshtml.rz.scp.css */
/* Give the header a theme-aware background and a purple left accent. */
.editor-header[b-ppxyqwwboz] {
  background-color: light-dark(#f3efff, #292335);
  border-left: 6px solid #8b5cf6;
}

/* Style the small introductory label above the main heading. */
.editor-eyebrow[b-ppxyqwwboz] {
  color: light-dark(#6340aa, #c4b5fd);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Give each group a theme-aware surface and a subtle shadow. */
fieldset[b-ppxyqwwboz] {
  background-color: light-dark(#faf8ff, #242029);
  box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
}

/* Make each group's title smaller and bold. */
legend[b-ppxyqwwboz] {
  font-size: 1.1rem;
  font-weight: 700;
}

/* Make text inputs and dropdowns taller and theme-aware. */
.demographics-editor[b-ppxyqwwboz]  .form-control,
.demographics-editor[b-ppxyqwwboz]  .form-select {
  min-height: 44px;
  background-color: light-dark(#ffffff, #302a38);
  color: var(--text-color);
  border-color: var(--border-color);
}

/* Make form labels bold and leave space above their controls. */
.demographics-editor[b-ppxyqwwboz]  .form-label {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Highlight the input or select that currently has focus. */
.demographics-editor[b-ppxyqwwboz]  .form-control:focus,
.demographics-editor[b-ppxyqwwboz]  .form-select:focus {
  border-color: #8b5cf6;
  outline: 3px solid light-dark(#6340aa, #c4b5fd);
  outline-offset: 2px;
}
/* /Views/Encyclopedia/SpinAndSpell.cshtml.rz.scp.css */
/* Define reusable colors inside the game area. */
#game-shell[b-9xxhuqmoj7] {
  --game-bg: #17132b;
  --panel-bg: #26203d;
  --game-text: #f5f3ff;
  --game-accent: #c4b5fd;

  background-color: var(--game-bg);
  color: var(--game-text);
  padding: 1.5rem;
  border-radius: 1rem;
}

/* Give each game panel its own surface, border, and spacing. */
.game-panel[b-9xxhuqmoj7] {
  background-color: var(--panel-bg);
  border: 1px solid #655780;
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

/* Highlight panel headings. */
#game-shell h2[b-9xxhuqmoj7],
#game-shell h3[b-9xxhuqmoj7] {
  color: var(--game-accent);
}

/* Give the game header a diagonal purple gradient. */
#app-header[b-9xxhuqmoj7] {
  background: linear-gradient(135deg, #5b21b6, #312e81);
  border-color: #a78bfa;
  text-align: center;
}

/* Make the game title large and bright. */
#game-title[b-9xxhuqmoj7] {
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 800;
}

/* Hide the original decorative image; use it as a CSS background instead. */
.marquee-accent[b-9xxhuqmoj7] {
  display: none;
}

/* Place the decorative image over the gradient. */
#app-header[b-9xxhuqmoj7] {
  background-image:
    url("/images/SpinOrSpell/marquee-accent.png"),
    linear-gradient(135deg, #5b21b6, #312e81);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: auto 70px, cover;
}

/* Center the puzzle content inside its panel. */
#phrase-board[b-9xxhuqmoj7] {
  text-align: center;
}

/* Keep each word together and leave space between words. */
.phrase-word[b-9xxhuqmoj7] {
  display: inline-block;
  margin: 0.5rem;
}

/* Make each puzzle character look like a tile. */
.phrase-tile[b-9xxhuqmoj7] {
  display: inline-block;
  min-width: 1.6rem;
  padding: 0.4rem 0.2rem;
  margin: 0.1rem;
  background-color: #f5f3ff;
  color: #24143d;
  border: 2px solid #c4b5fd;
  border-radius: 0.3rem;
  font-weight: 700;
}

/* Distinguish the host message from the puzzle tiles. */
#game-message[b-9xxhuqmoj7] {
  margin-top: 1rem;
  padding: 1rem;
  background-color: #342b4d;
  border-left: 4px solid #c4b5fd;
}

#game-message blockquote[b-9xxhuqmoj7] {
  margin: 0;
}

/* Give game buttons a consistent appearance and usable size. */
#game-shell button[b-9xxhuqmoj7] {
  min-width: 44px;
  min-height: 44px;
  margin: 0.25rem;
  padding: 0.5rem 0.75rem;
  background-color: #c4b5fd;
  color: #24143d;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  font-weight: 700;
  cursor: pointer;
}

/* Highlight available buttons when hovered. */
#game-shell button:not(:disabled):hover[b-9xxhuqmoj7] {
  background-color: #ddd6fe;
}

/* Show a clear keyboard focus indicator. */
#game-shell button:focus-visible[b-9xxhuqmoj7] {
  outline: 3px solid #facc15;
  outline-offset: 3px;
}

/* Mark correctly guessed letters with a solid border. */
#game-shell button.selected[b-9xxhuqmoj7] {
  background-color: #bbf7d0;
  color: #14532d;
  border-color: #166534;
}

/* Mark incorrect guesses with a dashed border and a strike-through. */
#game-shell button.incorrect[b-9xxhuqmoj7] {
  background-color: #fecaca;
  color: #7f1d1d;
  border: 2px dashed #991b1b;
  text-decoration: line-through;
}

/* Indicate that used letters cannot be selected again. */
#game-shell button:disabled[b-9xxhuqmoj7] {
  cursor: not-allowed;
}

/* Keep the wheel image within its panel. */
#wheel-image[b-9xxhuqmoj7] {
  width: 280px;
  max-width: 100%;
  height: auto;
}

/* Center the wheel and its controls. */
#wheel-panel[b-9xxhuqmoj7] {
  text-align: center;
}

/* Keep the sponsor image proportional and reasonably sized. */
#ad-panel img[b-9xxhuqmoj7] {
  width: 320px;
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

/* Center the advertisement content. */
#ad-panel[b-9xxhuqmoj7] {
  text-align: center;
}

/* Give each player's score its own card. */
.score-card[b-9xxhuqmoj7] {
  padding: 1rem;
  margin-bottom: 0.75rem;
  background-color: #342b4d;
  border: 2px solid #655780;
  border-radius: 0.5rem;
}

/* Emphasize the player whose turn it is. */
.score-card.active[b-9xxhuqmoj7] {
  border-color: #facc15;
  border-left-width: 8px;
}

/* Make score amounts prominent. */
.score-card p[b-9xxhuqmoj7] {
  margin-bottom: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

/* Let the leaderboard table fill its panel. */
#leaderboard table[b-9xxhuqmoj7] {
  width: 100%;
  border-collapse: collapse;
}

/* Give table headers and data cells consistent spacing. */
#leaderboard th[b-9xxhuqmoj7],
#leaderboard td[b-9xxhuqmoj7] {
  padding: 0.75rem;
  border-bottom: 1px solid #655780;
  text-align: left;
}

/* Add alternating row backgrounds to improve readability. */
#leaderboard tbody tr:nth-child(even)[b-9xxhuqmoj7] {
  background-color: #342b4d;
}

/* Style the current player's initials as a circular badge. */
#current-player > div:first-child[b-9xxhuqmoj7] {
  width: 64px;
  height: 64px;
  line-height: 64px;
  margin-bottom: 1rem;
  background-color: #c4b5fd;
  color: #24143d;
  border-radius: 50%;
  text-align: center;
  font-weight: 800;
}

/* Highlight the current-turn label. */
.turn-status[b-9xxhuqmoj7] {
  color: #fde68a;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Add breathing room between game log entries. */
#game-log li[b-9xxhuqmoj7] {
  padding: 0.4rem 0;
}

/* Make the footer's notices appear on separate lines. */
#game-footer span[b-9xxhuqmoj7] {
  display: block;
}

/* Use smaller text for connection and settings notices. */
#game-footer[b-9xxhuqmoj7] {
  font-size: 0.85rem;
  text-align: center;
}

/* Reserve space above the text for the decorative background image. */
#app-header[b-9xxhuqmoj7] {
  padding-top: 60px;
}

/* Make the game title white, overriding the general h2 rule. */
#game-shell #game-title[b-9xxhuqmoj7] {
  color: #ffffff;
}

/* Place the wheel pointer on its own line above the image. */
#wheel-panel > div > span[b-9xxhuqmoj7] {
  display: block;
  color: #facc15;
  font-size: 1.5rem;
}

/* Lift available buttons slightly on hover. */
#game-shell button[b-9xxhuqmoj7] {
  transition: background-color 0.15s ease, transform 0.15s ease;
}

#game-shell button:not(:disabled):hover[b-9xxhuqmoj7] {
  transform: translateY(-2px);
}

/* Skip the motion for users who ask the system to reduce it. */
@media (prefers-reduced-motion: reduce) {
  #game-shell button[b-9xxhuqmoj7] {
    transition: none;
  }

  #game-shell button:not(:disabled):hover[b-9xxhuqmoj7] {
    transform: none;
  }
}

/* ===== Layout: Grid places the panels, Flexbox arranges each panel's contents ===== */

/* Phone (base): one column in source order, so visual order matches tab order. */
#game-shell[b-9xxhuqmoj7] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "header"
    "board"
    "letters"
    "wheel"
    "actions"
    "status"
    "leaders"
    "log"
    "ad"
    "footer";
  gap: 1rem;
  padding: 0.75rem;
}

#app-header[b-9xxhuqmoj7] { grid-area: header; }
#phrase-board[b-9xxhuqmoj7] { grid-area: board; }
#letter-bank[b-9xxhuqmoj7] { grid-area: letters; }
#wheel-panel[b-9xxhuqmoj7] { grid-area: wheel; }
#turn-actions[b-9xxhuqmoj7] { grid-area: actions; }
#player-status[b-9xxhuqmoj7] { grid-area: status; }
#leaderboard[b-9xxhuqmoj7] { grid-area: leaders; }
#game-log[b-9xxhuqmoj7] { grid-area: log; }
#ad-panel[b-9xxhuqmoj7] { grid-area: ad; }
#game-footer[b-9xxhuqmoj7] { grid-area: footer; }

/* The grid gap spaces the panels, and min-width: 0 lets panels shrink with their column. */
#game-shell .game-panel[b-9xxhuqmoj7] {
  margin-bottom: 0;
  min-width: 0;
}

/* Scroll the leaderboard table inside its panel instead of widening the page. */
#leaderboard[b-9xxhuqmoj7] {
  overflow-x: auto;
}

/* Header: title block and round info stacked and centered on phones. */
#app-header[b-9xxhuqmoj7] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

#app-header > div:last-child[b-9xxhuqmoj7] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Puzzle: words wrap as whole units, and each word's tiles stay in one row. */
#phrase-board > [role="group"][b-9xxhuqmoj7] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.25rem;
}

.phrase-word[b-9xxhuqmoj7] {
  display: flex;
  gap: 0.2rem;
  margin: 0;
}

.phrase-tile[b-9xxhuqmoj7] {
  margin: 0;
}

/* Letter buttons wrap to fit the panel; the hard-coded line breaks are ignored. */
.letter-options[b-9xxhuqmoj7],
.vowel-options[b-9xxhuqmoj7] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.letter-options br[b-9xxhuqmoj7] {
  display: none;
}

.letter-options button[b-9xxhuqmoj7],
.vowel-options button[b-9xxhuqmoj7] {
  margin: 0;
}

/* Wheel, solve, and ad panels center their contents in a column. */
#wheel-panel[b-9xxhuqmoj7],
#turn-actions[b-9xxhuqmoj7],
#ad-panel[b-9xxhuqmoj7] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
}

/* Scoreboard and current player stack on phones. */
#player-status[b-9xxhuqmoj7] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#scoreboard > div[b-9xxhuqmoj7] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.score-card[b-9xxhuqmoj7] {
  flex: 1 1 8rem;
  margin-bottom: 0;
}

/* Initials badge sits beside the player's details. */
#current-player[b-9xxhuqmoj7] {
  display: flex;
  align-items: center;
  gap: 1rem;
}

#current-player > div:first-child[b-9xxhuqmoj7] {
  flex-shrink: 0;
  margin-bottom: 0;
}

#game-footer[b-9xxhuqmoj7] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

/* Tablet (576px+): two columns; wheel and solve share a row. */
@media (min-width: 576px) {
  #game-shell[b-9xxhuqmoj7] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "header  header"
      "board   board"
      "letters letters"
      "wheel   actions"
      "status  status"
      "leaders log"
      "ad      ad"
      "footer  footer";
    padding: 1.5rem;
  }

  #app-header[b-9xxhuqmoj7] {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  #player-status[b-9xxhuqmoj7] {
    flex-direction: row;
    flex-wrap: wrap;
  }

  #player-status > section[b-9xxhuqmoj7] {
    flex: 1 1 16rem;
  }

  #game-footer[b-9xxhuqmoj7] {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* Monitor (992px+): three columns with the board and letters in the wide center. */
@media (min-width: 992px) {
  #game-shell[b-9xxhuqmoj7] {
    grid-template-columns: minmax(15rem, 1fr) minmax(0, 2fr) minmax(15rem, 1fr);
    grid-template-areas:
      "header  header  header"
      "wheel   board   leaders"
      "wheel   letters leaders"
      "actions letters log"
      "status  status  ad"
      "footer  footer  footer";
  }
}

/* Large monitor (1399px+): four columns, and the dashboard grows past the
   site's Bootstrap container (capped at 1320px) up to 1880px, centered. */
@media (min-width: 1399px) {
  #game-shell[b-9xxhuqmoj7] {
    --shell-width: min(calc(100vw - 3rem), 1880px);
    width: var(--shell-width);
    margin-left: calc(50% - var(--shell-width) / 2);
    grid-template-columns: minmax(16rem, 1fr) repeat(2, minmax(0, 1.25fr)) minmax(16rem, 1fr);
    grid-template-areas:
      "header  header  header  header"
      "wheel   board   board   leaders"
      "wheel   letters letters leaders"
      "actions letters letters log"
      "status  status  ad      log"
      "footer  footer  footer  footer";
  }
}

/* Widescreen (1800px+): five columns, with player status in its own column. */
@media (min-width: 1800px) {
  #game-shell[b-9xxhuqmoj7] {
    grid-template-columns:
      minmax(17rem, 1fr) repeat(2, minmax(0, 1.25fr)) minmax(20rem, 1.1fr) minmax(17rem, 1fr);
    grid-template-areas:
      "header  header  header  header  header"
      "wheel   board   board   status  leaders"
      "wheel   letters letters status  leaders"
      "actions letters letters ad      log"
      "footer  footer  footer  footer  footer";
  }

  #player-status[b-9xxhuqmoj7] {
    flex-direction: column;
  }
}
/* /Views/Encyclopedia/SpinAndSpellStyleOnly.cshtml.rz.scp.css */
/* Define reusable colors inside the game area. */
#game-shell[b-6fbjs5r01q] {
  --game-bg: #17132b;
  --panel-bg: #26203d;
  --game-text: #f5f3ff;
  --game-accent: #c4b5fd;

  background-color: var(--game-bg);
  color: var(--game-text);
  padding: 1.5rem;
  border-radius: 1rem;
}

/* Give each game panel its own surface, border, and spacing. */
.game-panel[b-6fbjs5r01q] {
  background-color: var(--panel-bg);
  border: 1px solid #655780;
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

/* Highlight panel headings. */
#game-shell h2[b-6fbjs5r01q],
#game-shell h3[b-6fbjs5r01q] {
  color: var(--game-accent);
}

/* Give the game header a diagonal purple gradient. */
#app-header[b-6fbjs5r01q] {
  background: linear-gradient(135deg, #5b21b6, #312e81);
  border-color: #a78bfa;
  text-align: center;
}

/* Make the game title large and bright. */
#game-title[b-6fbjs5r01q] {
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 800;
}

/* Hide the original decorative image; use it as a CSS background instead. */
.marquee-accent[b-6fbjs5r01q] {
  display: none;
}

/* Place the decorative image over the gradient. */
#app-header[b-6fbjs5r01q] {
  background-image:
    url("/images/SpinOrSpell/marquee-accent.png"),
    linear-gradient(135deg, #5b21b6, #312e81);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: auto 70px, cover;
}

/* Center the puzzle content inside its panel. */
#phrase-board[b-6fbjs5r01q] {
  text-align: center;
}

/* Keep each word together and leave space between words. */
.phrase-word[b-6fbjs5r01q] {
  display: inline-block;
  margin: 0.5rem;
}

/* Make each puzzle character look like a tile. */
.phrase-tile[b-6fbjs5r01q] {
  display: inline-block;
  min-width: 1.6rem;
  padding: 0.4rem 0.2rem;
  margin: 0.1rem;
  background-color: #f5f3ff;
  color: #24143d;
  border: 2px solid #c4b5fd;
  border-radius: 0.3rem;
  font-weight: 700;
}

/* Distinguish the host message from the puzzle tiles. */
#game-message[b-6fbjs5r01q] {
  margin-top: 1rem;
  padding: 1rem;
  background-color: #342b4d;
  border-left: 4px solid #c4b5fd;
}

#game-message blockquote[b-6fbjs5r01q] {
  margin: 0;
}

/* Give game buttons a consistent appearance and usable size. */
#game-shell button[b-6fbjs5r01q] {
  min-width: 44px;
  min-height: 44px;
  margin: 0.25rem;
  padding: 0.5rem 0.75rem;
  background-color: #c4b5fd;
  color: #24143d;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  font-weight: 700;
  cursor: pointer;
}

/* Highlight available buttons when hovered. */
#game-shell button:not(:disabled):hover[b-6fbjs5r01q] {
  background-color: #ddd6fe;
}

/* Show a clear keyboard focus indicator. */
#game-shell button:focus-visible[b-6fbjs5r01q] {
  outline: 3px solid #facc15;
  outline-offset: 3px;
}

/* Mark correctly guessed letters with a solid border. */
#game-shell button.selected[b-6fbjs5r01q] {
  background-color: #bbf7d0;
  color: #14532d;
  border-color: #166534;
}

/* Mark incorrect guesses with a dashed border and a strike-through. */
#game-shell button.incorrect[b-6fbjs5r01q] {
  background-color: #fecaca;
  color: #7f1d1d;
  border: 2px dashed #991b1b;
  text-decoration: line-through;
}

/* Indicate that used letters cannot be selected again. */
#game-shell button:disabled[b-6fbjs5r01q] {
  cursor: not-allowed;
}

/* Keep the wheel image within its panel. */
#wheel-image[b-6fbjs5r01q] {
  width: 280px;
  max-width: 100%;
  height: auto;
}

/* Center the wheel and its controls. */
#wheel-panel[b-6fbjs5r01q] {
  text-align: center;
}

/* Keep the sponsor image proportional and reasonably sized. */
#ad-panel img[b-6fbjs5r01q] {
  width: 320px;
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

/* Center the advertisement content. */
#ad-panel[b-6fbjs5r01q] {
  text-align: center;
}

/* Give each player's score its own card. */
.score-card[b-6fbjs5r01q] {
  padding: 1rem;
  margin-bottom: 0.75rem;
  background-color: #342b4d;
  border: 2px solid #655780;
  border-radius: 0.5rem;
}

/* Emphasize the player whose turn it is. */
.score-card.active[b-6fbjs5r01q] {
  border-color: #facc15;
  border-left-width: 8px;
}

/* Make score amounts prominent. */
.score-card p[b-6fbjs5r01q] {
  margin-bottom: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

/* Let the leaderboard table fill its panel. */
#leaderboard table[b-6fbjs5r01q] {
  width: 100%;
  border-collapse: collapse;
}

/* Give table headers and data cells consistent spacing. */
#leaderboard th[b-6fbjs5r01q],
#leaderboard td[b-6fbjs5r01q] {
  padding: 0.75rem;
  border-bottom: 1px solid #655780;
  text-align: left;
}

/* Add alternating row backgrounds to improve readability. */
#leaderboard tbody tr:nth-child(even)[b-6fbjs5r01q] {
  background-color: #342b4d;
}

/* Style the current player's initials as a circular badge. */
#current-player > div:first-child[b-6fbjs5r01q] {
  width: 64px;
  height: 64px;
  line-height: 64px;
  margin-bottom: 1rem;
  background-color: #c4b5fd;
  color: #24143d;
  border-radius: 50%;
  text-align: center;
  font-weight: 800;
}

/* Highlight the current-turn label. */
.turn-status[b-6fbjs5r01q] {
  color: #fde68a;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Add breathing room between game log entries. */
#game-log li[b-6fbjs5r01q] {
  padding: 0.4rem 0;
}

/* Make the footer's notices appear on separate lines. */
#game-footer span[b-6fbjs5r01q] {
  display: block;
}

/* Use smaller text for connection and settings notices. */
#game-footer[b-6fbjs5r01q] {
  font-size: 0.85rem;
  text-align: center;
}

/* Reserve space above the text for the decorative background image. */
#app-header[b-6fbjs5r01q] {
  padding-top: 60px;
}

/* Make the game title white, overriding the general h2 rule. */
#game-shell #game-title[b-6fbjs5r01q] {
  color: #ffffff;
}

/* Place the wheel pointer on its own line above the image. */
#wheel-panel > div > span[b-6fbjs5r01q] {
  display: block;
  color: #facc15;
  font-size: 1.5rem;
}
/* /Views/Shared/_Layout.cshtml.rz.scp.css */
/* Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand[b-d10tgczn16] {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

a[b-d10tgczn16] {
  color: light-dark(#0077cc, #8dbbff);
}

.btn-primary[b-d10tgczn16] {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.nav-pills .nav-link.active[b-d10tgczn16], .nav-pills .show > .nav-link[b-d10tgczn16] {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.border-top[b-d10tgczn16] {
  border-top: 1px solid var(--border-color);
}
.border-bottom[b-d10tgczn16] {
  border-bottom: 1px solid var(--border-color);
}

.box-shadow[b-d10tgczn16] {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy[b-d10tgczn16] {
  font-size: 1rem;
  line-height: inherit;
}

.footer[b-d10tgczn16] {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px;
}