.bi {
  display: inline-block;
  width: 1rem;
  height: 1rem;
}

/*
 * Sidebar
 */

@media (min-width: 999px) {
    .float-right-if-wide {float:right;}
}

@media (min-width: 768px) {
  .sidebar .offcanvas-lg {
    position: -webkit-sticky;
    position: sticky;
    top: 48px;
  }
  .navbar-search {
    display: block;
  }
}

.sidebar .nav-link {
  font-size: .875rem;
  font-weight: 500;
}

.sidebar .nav-link.active {
  color: #2470dc;
}

.sidebar-heading {
  font-size: .75rem;
}

/*
 * Navbar
 */

.navbar-brand {
  padding-top: .75rem;
  padding-bottom: .75rem;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .form-control {
  padding: .75rem 1rem;
}

.border-right {border-right:1px solid #ccc;}

.canvas-table { border: 2px solid #aaaf; }
.canvas-table td { border: 1px solid #aaa2; vertical-align: top; font-size:0.7em; font-family:monospace; margin:0; padding:0; }

.canvas-player-table { border: 2px solid #aaaf; }
.canvas-player-table td { border: 0; vertical-align: top; font-size:0.7em; font-family:monospace; margin:0; padding:0; }
.font-monospace {font-family:monospace};
.user-icon { border:1px solid #566; border-radius: 3px; margin-top:-4px }
.table-large-text { font-size: 120%; }
A {text-decoration: none;}
.border-rounded { border-radius: 5px; border: 1px solid #bbb; }
.level-preview-image {
    max-width: 400px;
    max-height: 400px;
    -webkit-box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.75);
    // background-color: #224d;
}
.level-preview-image-medium {
    max-width: 200px;
    max-height: 133px;
    border:1px solid #aaa; border-radius:8px;
    -webkit-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.75);
    box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.75);
}
.item-preview-image {
    max-width: 140px;
    max-height: 60px;
    border:1px solid #aaa; border-radius:8px;
    -webkit-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.75);
    box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.75);
}
.table-sticky-header { position: sticky; top: 0; }
.header-bg { background-image: url('/img/level-items/block01.png'); background-repeat: repeat-x; background-size: contain; }
.header-pill { background-color:#343a40; width:6em;text-align:center;border-radius:10px;margin:2px 0 0 0; padding: 4px 4px 0px 4px; border:1px solid #aaa }
.header-pill-REMOVE-ME-LATER { width:6em;text-align:center;border-radius:10px;margin:2px 0 0 0; padding: 4px 4px 0px 4px; border:1px solid #aaa0 }
.header-pill:hover { color: yellow; }
#levelCanvas {
    border: 2px solid #aaa;
    border-radius: 3px;
    background-color: #0303;
}

.line-between-related-items {
    position:absolute;
    width:1px;
    background-color:red;
}

body {
    // background: radial-gradient(1200px 600px at 20% -10%, #111a2a 0%, var(--bg-dark) 35%, var(--bg-darker) 100%) fixed;
    // background-color: #000000de;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: "Stylish", serif;
    font-size: 110%;
}
.spinning-logo-2 {
    animation-name: spin;
    animation-duration: 10000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    margin-right:0.5em;
    border: 2px solid #fed;
    background-color:#fff;
    border-radius: 20px;
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
.cursor-pointer { cursor: pointer; }
.cursor-help { cursor: help; }
.level-action-icon {border:1px solid #eee;border-radius:16px;margin:3px;padding: 5px 8px 2px 7px;}
.text-right {text-align: right;}
.text-left {text-align: left;}
.text-center {text-align: center;}

/* Level list (vivid horizontal blocks) */
.level-card { background: linear-gradient(90deg, rgba(108,204,255,.08), rgba(160,255,108,.06)); border:1px solid rgba(108,204,255,.18); border-radius: 16px; overflow: hidden; position: relative; }
.level-card:hover { box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(108,204,255,.25) inset; }
.level-thumb { width: 180px; min-height: 112px; max-height: 140px; display:flex; align-items:center; justify-content:center; }
.level-thumb img { width: 100%; height: 100%; object-fit: cover; background: #0b111a;  }
.badge-chip { border:1px solid rgba(108,204,255,.35); background: rgba(108,204,255,.08); color: var(--text); }
.stat-box { background: rgba(0,0,0,.25); border:1px solid rgba(108,204,255,.15); border-radius: 10px; padding:.5rem .75rem; min-width: 96px; text-align:center; }
.stat-box .label { font-size:.7rem; color: var(--muted); text-transform: uppercase; letter-spacing:.06em; }

.glow-border { box-shadow: 0 0 0 1px rgba(108,204,255,.25), 0 0 30px rgba(108,204,255,.2) inset; }

.btn-neon { background: var(--neon); font-weight: 800; letter-spacing: .02em; }
.btn-neon:hover { filter: brightness(1.05) saturate(1.1); box-shadow: 0 8px 20px rgba(108, 204, 255, .5); }
.navbar { --bs-navbar-padding-y: 0; }
.nav-item A.nav-link:hover { color: #ffc107 !important; }