.updates-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.update {
  background: var(--stone-800);
  border: 4px solid var(--stone-700);
  border-radius: calc(var(--radius) + 4px);
  padding: 1rem 1.25rem;
  box-shadow: 0 8px 0 var(--stone-950);
}
.update h3 { margin: 0 0 .4rem; color: var(--leaf-300); font-size: 1.2rem; }
.update .date { color: var(--stone-300); font-size: .9rem; margin-bottom: .6rem; }
.update ul { margin: .4rem 0 0; padding-left: 1.25rem; }
.update li { margin: .28rem 0; }

.group-title { margin: .6rem 0 .2rem; font-weight: 800; color: var(--paper); }
.badge { display: inline-block; font-size: .75rem; padding: 2px 6px; border-radius: 6px; margin-right: .4rem; }
.badge.added { background: var(--leaf-500); color: var(--stone-950); }
.badge.changed { background: #f2c744; color: #2a2a2a; }
.badge.fixed { background: #6ecbff; color: #12202b; }
.badge.removed { background: #e45b5b; color: #fff; }

.updates-loading,
.updates-error {
  background: var(--stone-800);
  border: 4px solid var(--stone-700);
  border-radius: calc(var(--radius) + 4px);
  padding: 1rem 1.25rem;
  box-shadow: 0 8px 0 var(--stone-950);
  text-align: center;
  color: var(--stone-300);
}

/* Live badge */
.live-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #e91916; /* Twitch live red */
  color: white;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  z-index: 2;
}

/* Highlight when live */
.card.live {
  border-color: #e91916;
  box-shadow: 0 18px 0 var(--stone-950), 0 0 15px rgba(233, 25, 22, 0.6);
}


/* ===== Sidebar ===== */
.overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  z-index: 80;
}

.sidebar{
  position: fixed; inset: 0 auto 0 0;
  width: min(86vw, 320px);
  background: var(--stone-850);
  border-right: 4px solid var(--stone-700);
  box-shadow: 10px 0 0 var(--stone-950);
  transform: translateX(-100%);
  transition: transform .35s cubic-bezier(.22,.72,.22,1), visibility 0s linear .35s;
  z-index: 90;
  display: grid;
  grid-template-rows: auto 1fr;
  visibility: hidden;
}
.sidebar.open{
  transform: translateX(0);
  visibility: visible;
  transition: transform .35s cubic-bezier(.22,.72,.22,1);
}
.sidebar-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: .9rem .9rem .6rem;
  border-bottom: 1px solid var(--stone-700);
  background: var(--stone-800);
}
.sidebar-title{
  margin:0; font-size: 1.15rem; font-weight: 800;
}
.close-btn{
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:10px;
  border: 2px solid var(--stone-700);
  background: var(--stone-800); color: var(--paper);
}
.close-btn svg{ width:22px; height:22px; }

.side-nav{
  overflow:auto;
  padding: .5rem;
}
.menu-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:.35rem;
}
.menu-list a{
  display:flex; align-items:center; gap:.6rem;
  padding: .7rem .8rem;
  border-radius: 12px;
  color: var(--paper);
  text-decoration:none;
  border: 2px solid var(--stone-800);
  background: var(--stone-800);
}
.menu-list a:hover{ background: var(--stone-750); border-color: var(--stone-700); }
.menu-list a[aria-current="page"]{
  background: color-mix(in oklab, var(--leaf-500) 30%, var(--stone-800));
  border-color: var(--leaf-500);
  box-shadow: inset 0 0 0 2px var(--leaf-900);
}
.menu-list .ext{
  margin-left: auto;
  font-size: .8rem; color: var(--stone-300);
  opacity: .9;
}

/* Prevent body scroll when sidebar is open */
body.sidebar-open{
  overflow: hidden;
}

/* ---------- Minecraft-inspired theme ---------- */
:root{
  --leaf-300:#8CD05F;  /* bright grass */
  --leaf-400:#6CC04A;
  --leaf-500:#4FA938;
  --leaf-700:#2E6E1E;
  --leaf-900:#1C4314;

  --dirt-600:#6B4A2F;
  --dirt-700:#5A3D26;

  --stone-200:#e6e6e6;
  --stone-300:#cfcfcf;
  --stone-600:#787878;
  --stone-700:#5c5c5c;
  --stone-750:#4c4c4c;
  --stone-800:#3e3e3e;
  --stone-850:#343434;
  --stone-900:#2a2a2a;
  --stone-950:#1b1b1b;

  --amethyst-300:#b19cff;
  --paper:#f4f4f2;

  --radius: 18px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: var(--paper);
  background: var(--stone-900);
}

/* ---------- Header ---------- */
.site-header{
  position: sticky; top: 0; z-index: 50;
  display:flex; align-items:center; gap:.75rem;
  padding: .75rem 1rem;
  background: color-mix(in oklab, var(--stone-850) 90%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--stone-700);
}
.menu-btn{
  display:grid; place-items:center;
  width:48px; height:48px; border-radius:12px;
  background: var(--stone-800);
  border: 2px solid var(--stone-700);
  box-shadow: 0 4px 0 var(--stone-950);
  color: var(--paper);
}
.menu-btn svg{ width:24px; height:24px; stroke: currentColor; fill: none; stroke-width:2; }

.logo{
  margin:0;
  font-weight: 900;
  font-size: clamp(1.6rem, 3vw + 1rem, 3rem);
  letter-spacing:.5px;
  text-shadow: 0 2px 0 var(--stone-950);
}
.logo span{ color: var(--leaf-300); }

/* ---------- Layout ---------- */
.container{ max-width: 1100px; margin-inline:auto; padding: 1rem; padding-bottom: 4rem; }
.hero{
  margin-top: 1.75rem;
  background: var(--stone-800);
  border: 4px solid var(--stone-700);
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(1rem, 3vw, 2rem);
  text-align:center;
  box-shadow: 0 12px 0 var(--stone-950);
}
.hero strong{ color: var(--leaf-300); }

/* ---------- Carousel ---------- */
.carousel-section{ margin-top: 1.25rem; }
.carousel{
  position: relative;
  display:flex; align-items:center; justify-content:center;
}

.stage{
  position: relative;
  width: min(100%, 980px);
  height: 380px;
  perspective: 1200px;
  outline: none;
}

.card{
  position: absolute; inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: clamp(220px, 24vw, 280px);
  background: var(--paper);
  color: var(--stone-950);
  border: 4px solid var(--stone-600);
  border-radius: var(--radius);
  box-shadow: 0 18px 0 var(--stone-950);
  text-decoration: none;
  overflow: hidden;
  transition: filter .25s ease, border-color .25s ease;
}
.card.center{ border-color: var(--leaf-500); }
.card:focus-visible{ outline: 3px dashed var(--leaf-300); outline-offset: 3px; }
.card .frame{
  margin: .6rem;
  border: 4px solid var(--stone-300);
  border-radius: calc(var(--radius) - 6px);
  overflow: hidden;
  background: var(--stone-200);
}
/* styles.css */
.card img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  image-rendering: optimizeQuality;      /* avoid pixelation */
  /* remove translateZ(0) on the IMG itself; it can cause bitmap scaling */
}

.card .meta{ padding: .25rem .9rem 1rem; text-align:center; }
.card .name{ font-weight: 900; font-size: 1.15rem; text-shadow: 0 1px 0 #fff; }
.card .url{ font-size:.85rem; color: var(--stone-700); }
.card .hint{ margin-top:.35rem; font-size:.72rem; color: var(--stone-600); }

.blur-1{ filter: blur(1px); }
.blur-2{ filter: blur(2px); }

.nav{
  position: absolute; inset: 50% auto auto auto; transform: translateY(-50%);
  height:52px; width:52px; border-radius:12px;
  border:2px solid var(--stone-700); background: var(--stone-800); color: var(--paper);
  box-shadow: 0 6px 0 var(--stone-950);
  display:grid; place-items:center;
}
.nav.prev{ left: .25rem; }
.nav.next{ right: .25rem; }
@media (min-width: 860px){
  .nav.prev{ left: -18px; }
  .nav.next{ right: -18px; }
}
.nav svg{ width:26px; height:26px; stroke: currentColor; fill:none; stroke-width:2.2; }
.nav:hover{ background: var(--stone-750); }

/* Dots */
.dots{ display:flex; gap:.4rem; justify-content:center; margin-top: .75rem; }
.dots button{
  width: 28px; height: 8px; border-radius: 3px;
  border: 1px solid var(--stone-700);
  background: var(--stone-700);
}
.dots button[aria-selected="true"]{ background: var(--leaf-400); }

/* Monogram avatar (when image missing) */
.monogram{
  height: 220px;
  display:grid; place-items:center;
  background: var(--leaf-700);
  position: relative;
}
.monogram::before{
  content:""; position:absolute; inset:0;
  border: 8px solid var(--leaf-900);
  /* pixel corners */
  clip-path: polygon(
    0 12px,12px 12px,12px 0, calc(100% - 12px) 0, calc(100% - 12px) 12px, 100% 12px,
    100% calc(100% - 12px), calc(100% - 12px) calc(100% - 12px),
    calc(100% - 12px) 100%, 12px 100%, 12px calc(100% - 12px), 0 calc(100% - 12px)
  );
}
.monogram span{
  font-weight: 900; font-size: 56px; letter-spacing: 1px;
  color: var(--paper);
  text-shadow: 0 3px 0 var(--leaf-900);
}

/* CTA */
.cta{
  margin-top: 1rem;
  background: color-mix(in oklab, var(--dirt-700) 70%, transparent);
  border: 4px solid var(--dirt-600);
  border-radius: calc(var(--radius) + 6px);
  padding: 1rem;
  text-align:center;
  box-shadow: 0 10px 0 var(--stone-950);
}
.cta .accent{ color: var(--amethyst-300); }

/* ===== Server Status ===== */
.server-status { margin-top: 1.25rem; }
.status-card{
  background: var(--stone-800);
  border: 4px solid var(--stone-700);
  border-radius: calc(var(--radius) + 6px);
  padding: 1rem 1.25rem;
  box-shadow: 0 10px 0 var(--stone-950);
}

.status-top{
  display:flex; align-items:center; gap:.6rem;
  margin-bottom:.6rem;
  font-weight: 900; font-size: 1.05rem;
}
.dot{
  width: 12px; height: 12px; border-radius: 50%;
  display:inline-block;
  background: var(--stone-700);
  box-shadow: 0 0 0 2px var(--stone-950) inset;
}
.dot.online{ background: #35d04c; }
.dot.offline{ background: #e91916; }
.dot.unknown{ background: #f2c744; }

.status-grid{
  display:grid; gap:.5rem;
}
.row{
  display:flex; align-items:center; justify-content:space-between;
  background: var(--stone-850);
  border: 2px solid var(--stone-700);
  border-radius: 12px;
  padding: .55rem .75rem;
}
.label{ color: var(--stone-300); font-weight: 700; }
.value{ font-weight: 900; color: var(--paper); }

.ip-btn{
  display:flex; align-items:center; gap:.5rem;
  background: transparent;
  color: inherit;
  border: none;
  padding: 0;
  cursor: pointer;
}
.ip-btn code{
  background: var(--stone-900);
  border: 2px solid var(--stone-700);
  border-radius: 8px;
  padding: .2rem .45rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.ip-btn:hover code{ border-color: var(--leaf-500); }
.copy-hint{
  font-size: .75rem; color: var(--stone-300);
  border: 1px solid var(--stone-700);
  border-radius: 6px; padding: 2px 6px;
}

/* Server status fixed in page's top-right */
.server-status {
  position: fixed;
  top: 90px; /* more space below sticky header */
  right: 16px;
  z-index: 60; /* above content, below sidebar (90) */
  width: 240px;
  max-width: 90%;
}

/* Status card styling */
.status-card {
  background: var(--stone-800);
  border: 4px solid var(--stone-700);
  border-radius: var(--radius);
  box-shadow: 0 8px 0 var(--stone-950);
  padding: 0.75rem;
  overflow-wrap: break-word; /* break long text like IPs */
}

/* Title row */
.status-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

/* Status dot */
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--stone-600);
}
.dot.online { background: var(--leaf-500); }
.dot.offline { background: #c0392b; }
.dot.unknown { background: var(--stone-600); }

/* Info grid */
.status-grid {
  display: grid;
  gap: 0.4rem;
}
.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
}
.label { color: var(--stone-300); }
.value { font-weight: bold; }

/* Copyable IP button */
.ip-btn {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.ip-btn:hover .copy-hint {
  text-decoration: underline;
}
.copy-hint {
  font-size: 0.75rem;
  color: var(--stone-300);
}

/* On smaller screens, make it inline */
@media (max-width: 720px) {
  .server-status {
    position: static;
    margin: 1rem auto;
    display: block;
    width: min(420px, 92%);
  }
}

.status-grid {
  display: grid;
  gap: 0.4rem;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  flex-wrap: wrap;              /* allow items to wrap inside box */
  word-break: break-word;       /* break long words if needed */
}

.label {
  color: var(--stone-300);
  flex: 1 1 auto;                /* let label take available space */
  min-width: 40%;                /* prevent it from squishing too much */
}

.value {
  font-weight: bold;
  flex: 1 1 auto;                /* let value take available space */
  text-align: right;
  min-width: 50%;                /* ensures wrapping instead of overflow */
  overflow-wrap: anywhere;       /* break long values anywhere */
}

/* ===== Recommended Videos ===== */
.recs-section {
  margin-top: 1.5rem;
}
.recs-head {
  background: var(--stone-800);
  border: 4px solid var(--stone-700);
  border-radius: calc(var(--radius) + 6px);
  padding: 1rem 1.25rem;
  box-shadow: 0 10px 0 var(--stone-950);
  text-align: center;
}
.recs-head h2 {
  margin: 0 0 .25rem;
  font-size: 1.35rem;
  color: var(--leaf-300);
}
.recs-head p {
  margin: 0;
  color: var(--stone-300);
}

/* Grid */
.video-grid {
  margin-top: .9rem;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: .9rem;
}
@media (max-width: 1200px) { .video-grid { grid-template-columns: repeat(8, 1fr); } }
@media (max-width: 780px)  { .video-grid { grid-template-columns: repeat(4, 1fr); } }

/* Card */
.video-card {
  grid-column: span 4; /* 3-up on desktop (12/3) */
  background: var(--stone-800);
  border: 4px solid var(--stone-700);
  border-radius: calc(var(--radius) + 4px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 0 var(--stone-950);
  display: block;
}
@media (max-width: 1200px) { .video-card { grid-column: span 4; } /* 2-up (8/2) */ }
@media (max-width: 780px)  { .video-card { grid-column: span 4; } /* 1-up */ }

.thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--stone-900);
  overflow: hidden;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Play overlay */
.play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.play .btn {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  border: 3px solid var(--paper);
  display: grid; place-items: center;
  box-shadow: 0 6px 0 rgba(0,0,0,.35);
}
.play svg { width: 26px; height: 26px; fill: var(--paper); transform: translateX(1px); }

.meta {
  padding: .65rem .85rem .9rem;
}
.meta .vtitle {
  font-weight: 900;
  line-height: 1.25;
}
.meta .byline {
  margin-top: .25rem;
  font-size: .85rem;
  color: var(--stone-300);
}

/* Hover */
.video-card:hover { border-color: var(--leaf-500); }
.video-card:hover .play .btn { background: rgba(0,0,0,.7); }

/* ===== Store Promo (floating left box) ===== */
.store-promo {
  position: fixed;
  top: 140px;   /* adjust to sit below the header */
  left: 20px;   /* space from the edge */
  width: 220px;
  z-index: 1000; /* keep above other content */
}

.promo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--stone-800);
  border: 3px solid var(--stone-700);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: 0 6px 0 var(--stone-950);
}

.promo-image img {
  width: 100%;
  max-width: 180px;
  border-radius: calc(var(--radius) - 2px);
  border: 2px solid var(--stone-600);
  background: var(--stone-200);
}

.promo-content h3 {
  margin: .5rem 0 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--leaf-300);
  text-align: center;
}

.promo-content p {
  margin: .25rem 0 .75rem;
  font-size: .9rem;
  color: var(--stone-300);
  text-align: center;
}

.promo-btn {
  display: inline-block;
  padding: .4rem .8rem;
  border-radius: 8px;
  background: var(--leaf-500);
  border: 2px solid var(--leaf-700);
  color: var(--paper);
  font-weight: 700;
  font-size: .85rem;
  text-decoration: none;
  box-shadow: 0 3px 0 var(--stone-950);
}
.promo-btn:hover {
  background: var(--leaf-400);
}

/* --- Fix promo stacking vs header/sidebar, and center the button --- */
.store-promo {
  position: fixed;
  top: 140px;                /* adjust if you want more/less gap below header */
  left: 20px;
  width: 220px;
  z-index: 40;               /* BELOW header (50) and sidebar (90) so it won't overlap them */
}

.promo-card {
  display: flex;
  flex-direction: column;
  align-items: center;       /* centers image & text */
}

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

.promo-btn {
  display: inline-block;
  margin: .5rem auto 0;      /* centers the button within the card */
  align-self: center;        /* belt-and-braces centering */
}

/* When sidebar is open, make promo non-interactive so it can't block clicks */
body.sidebar-open .store-promo {
  opacity: .25;
  pointer-events: none;
}

/* On smaller screens, don’t float it — let it flow inline */
@media (max-width: 900px) {
  .store-promo {
    position: static;
    width: min(420px, 92%);
    margin: 1rem auto;
    z-index: 0;
  }
}


/* ===== Additions Grid ===== */
.additions-grid{
  margin-top: 1.2rem;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: .9rem;
}
@media (max-width: 1200px){ .additions-grid{ grid-template-columns: repeat(8, 1fr); } }
@media (max-width: 780px){  .additions-grid{ grid-template-columns: repeat(4, 1fr); } }

/* Card */
.addition-card{
  grid-column: span 4; /* 3-up on desktop (12/3) */
  display:block;
  background: var(--stone-800);
  border: 4px solid var(--stone-700);
  border-radius: calc(var(--radius) + 4px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 0 var(--stone-950);
  transition: border-color .2s ease, transform .12s ease;
}
@media (max-width: 1200px){ .addition-card{ grid-column: span 4; } } /* 2-up */
@media (max-width: 780px){  .addition-card{ grid-column: span 4; } } /* 1-up */

.addition-card:hover{ border-color: var(--leaf-500); transform: translateY(-2px); }

.addition-thumb{
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--stone-900);
}
.addition-thumb img{
  width: 100%; height: 100%; object-fit: cover; display:block;
}

.addition-meta{ padding: .7rem .9rem 1rem; }
.addition-title{
  margin: 0 0 .25rem;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--paper);
}
.addition-desc{
  margin: 0 0 .6rem;
  color: var(--stone-300);
  font-size: .95rem;
  line-height: 1.35;
}

/* Small pill chips */
.chip{
  display: inline-block;
  font-size: .75rem;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--stone-700);
  background: var(--stone-850);
  color: var(--paper);
}
.chip-added   { background: color-mix(in oklab, var(--leaf-500) 35%, var(--stone-850)); border-color: var(--leaf-700); color: #0f1a10; }
.chip-changed { background: color-mix(in oklab, #f2c744 45%, var(--stone-850)); border-color: #b28d09; color: #1c1500; }
.chip-fixed   { background: color-mix(in oklab, #6ecbff 45%, var(--stone-850)); border-color: #0f5a82; color: #051923; }



/* ===== Addition Detail Pages ===== */
.addition-detail {
  margin-top: 1rem;
  padding: 1rem 1.2rem;
  background: var(--stone-800);
  border: 4px solid var(--stone-700);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 8px 0 var(--stone-950);
}

.addition-detail h2 {
  font-size: 1.6rem;
  margin: 0 0 .5rem;
  color: var(--paper);
}

.addition-detail .subtitle {
  font-size: 1.05rem;
  color: var(--stone-300);
  margin-bottom: 1rem;
}

.addition-detail h3 {
  font-size: 1.2rem;
  margin: 1.2rem 0 .5rem;
  color: var(--leaf-400);
}

.addition-detail ul {
  margin: 0 0 1rem 1.2rem;
  padding: 0;
  list-style: disc;
  color: var(--stone-200);
}

.addition-detail img {
  margin-top: .8rem;
  width: 100%;
  border: 4px solid var(--stone-700);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 8px 0 var(--stone-950);
}

.back-link {
  display: inline-block;
  margin-top: 1.5rem;
  padding: .6rem 1rem;
  border: 2px solid var(--stone-700);
  border-radius: var(--radius);
  background: var(--stone-850);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}
.back-link:hover {
  border-color: var(--leaf-500);
  background: var(--stone-700);
}


.badge.blessing {
  background-color: #4CAF50; /* green */
}

.badge.curse {
  background-color: #d9534f; /* red */
}

/* Command reference table */
.command-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.95rem;
}

.command-table th,
.command-table td {
  border: 1px solid #3a3a3a;
  padding: 0.6rem 0.8rem;
  text-align: left;
  vertical-align: middle;
}

.command-table th {
  background: #2a2a2a;
  color: #eee;
  font-weight: bold;
}

.command-table tr:nth-child(even) {
  background: #1e1e1e;
}

/* Command chips */
.cmd-chip {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  font-family: monospace;
  font-size: 0.9rem;
  background: #3b3f4a;
  color: #e8e8e8;
  border-radius: 6px;
  border: 1px solid #50545c;
  white-space: nowrap;
}