/* Better readability (mobile-first) */
html{ font-size: 17px; }
@media (max-width: 420px){ html{ font-size: 17.5px; } }
.small{ font-size: 0.9rem !important; }
.text-muted{ opacity: 0.92; }

.app-bg{ background: var(--app-bg); color: var(--app-text); }
.app-shell{ min-height: 100vh; display:flex; flex-direction:column; }
.app-topbar{ position: sticky; top: 0; z-index: 1020; background: rgba(15,23,42,.85); backdrop-filter: blur(12px); }
.app-main{ flex:1; padding-bottom: 76px; }
.app-bottomnav{
  position: fixed; left:0; right:0; bottom:0;
  background: rgba(15,23,42,.92);
  backdrop-filter: blur(12px);
  display:grid; grid-template-columns: repeat(6, 1fr);
  height: 68px; padding-bottom: env(safe-area-inset-bottom);
  z-index: 1030;
}
.app-bottomnav .navbtn{
  border:0; background: transparent; color: rgba(229,231,235,.85);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; font-size: 12px; padding: 8px 2px;
}
.app-bottomnav .navbtn i{ font-size: 20px; line-height: 20px; }
.app-bottomnav .navbtn.active{ color: #fff; }
.brand-badge{
  width: 36px; height: 36px; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(13,110,253,.18);
  color: var(--app-primary);
}
.card{ border: 1px solid rgba(255,255,255,.10); }
.btn-primary{ box-shadow: 0 10px 30px rgba(13,110,253,.18); }
.small-muted{ color: rgba(229,231,235,.65); }
.thumb{
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero{
  position: relative; border-radius: 18px; overflow: hidden;
  min-height: 180px;
  background: rgba(255,255,255,.06);
}
.hero img.backdrop{ width:100%; height: 220px; object-fit: cover; filter: saturate(1.1); }
.hero .overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,18,32,.1), rgba(11,18,32,1));
  transition: opacity .25s ease;
}
.hero.is-playing .overlay{ opacity:0; pointer-events:none; }
.hero .content{
  position:absolute; left:0; right:0; bottom:0;
  padding: 12px;
  display:flex; gap: 12px; align-items:flex-end;
  transition: opacity .25s ease, transform .25s ease;
}
.hero.is-playing .content{ opacity:0; transform: translateY(6px); pointer-events:none; }
.hero .poster{
  width: 88px; height: 120px; border-radius: 14px; overflow:hidden;
  background: rgba(255,255,255,.08);
  flex:0 0 auto;
  border: 1px solid rgba(255,255,255,.12);
}
.hero .poster img{ width:100%; height:100%; object-fit:cover; }

/* Tijdens afspelen: geen overlay/cover boven de player (anders kun je niet pauzeren/stoppen) */
.hero.is-playing .overlay,
.hero.is-playing .content{
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.badge-soft{ background: rgba(255,255,255,.10); color: rgba(255,255,255,.90); border: 1px solid rgba(255,255,255,.12); }

/* Similar movies strip */
.similar-strip{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding-bottom:4px;
  scroll-snap-type:x mandatory;
}

.similar-wrap{ position:relative; }
.sim-nav{
  position:absolute;
  top: 74px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(11,18,32,.75);
  color: rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center;
  z-index: 5;
}
.sim-nav i{ font-size: 18px; line-height: 18px; }
.sim-left{ left: -6px; }
.sim-right{ right: -6px; }

/* Make the horizontal bar visible (like your red marked scrollbar) */
.similar-strip{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) rgba(255,255,255,.10); }
.similar-strip::-webkit-scrollbar{ height: 8px; }
.similar-strip::-webkit-scrollbar-track{ background: rgba(255,255,255,.10); border-radius: 999px; }
.similar-strip::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.35); border-radius: 999px; }
.similar-card{
  width:140px;
  flex:0 0 auto;
  cursor:pointer;
  scroll-snap-align:start;
}
.similar-poster{
  width:140px;
  height:200px;
  border-radius:16px;
  overflow:hidden;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  position:relative;
}
.similar-poster img{ width:100%; height:100%; object-fit:cover; display:block; }
.similar-poster .poster-ph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color: rgba(255,255,255,.35); }
.similar-poster .poster-play{ width:46px; height:46px; }
.similar-link{ position:absolute; inset:0; z-index:1; }
.similar-title-link{ color: inherit; text-decoration: none; }
.similar-title-link:hover{ text-decoration: underline; }
.similar-title{ margin-top:8px; font-size: 0.9rem; font-weight:600; }
.similar-sub{ font-size:0.8rem; color: rgba(255,255,255,.65); }

/* Watch page header */
.watch-head{ display:flex; align-items:center; gap:12px; }
.watch-poster{ width:44px; height:64px; border-radius:10px; object-fit:cover; border:1px solid rgba(255,255,255,.12); }
.watch-title{ font-weight:700; }
.watch-sub{ font-size:0.85rem; color: rgba(255,255,255,.70); }

/* Detail page: header that appears only while the inline player is active */
.play-top{ display:none; align-items:center; gap:10px; margin-bottom:10px; }
.play-top.is-playing{ display:flex; }
.play-top-poster{ width:40px; height:58px; border-radius:10px; object-fit:cover; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); }
.play-top-title{ font-weight:800; font-size: 14px; }
.play-top-sub{ font-size: 12px; color: rgba(255,255,255,.72); }

/* Series: nicer 2-line title on small screens (series title + episode title) */
.play-top-title-wrap .pt-ep:before{ content:" · "; }

@media (max-width: 520px){
  /* allow wrapping on mobile and put episode title on a new line */
  #playTop .play-top-title.play-top-title-wrap{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.15;
  }
  #playTop .play-top-title.play-top-title-wrap .pt-ep{
    display:block;
    margin-top:2px;
  }
  #playTop .play-top-title.play-top-title-wrap .pt-ep:before{ content:""; }
}
.list-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 10px;
}
.kpi{
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  padding: 12px;
}
.skeleton{
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.10), rgba(255,255,255,.06));
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: 12px;
}
@keyframes shimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}
.empty-state{
  padding: 24px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px dashed rgba(255,255,255,.18);
  text-align:center;
  color: rgba(229,231,235,.75);
}

/* Home rails (Netflix-like rows) */
.rail-strip{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom:6px;
  scroll-snap-type:x mandatory;
}
.rail-strip::-webkit-scrollbar{ height:6px; }
.rail-strip::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.18); border-radius: 999px; }
.rail-card{
  width: 128px;
  flex: 0 0 auto;
  scroll-snap-align: start;
  cursor:pointer;
}
.rail-poster{
  position: relative;
  width:128px;
  height:190px;
  border-radius: 12px;
  overflow:hidden;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}
.rail-poster img{ width:100%; height:100%; object-fit: cover; display:block; }
.rail-play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition: opacity .18s ease;
  pointer-events:none;
}
.rail-play i{
  font-size: 2.4rem;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.65));
}
.rail-card:hover .rail-play{ opacity:1; }
 (max-width: 768px){
  .rail-play{ opacity: .18; }
}
.rail-title{
  margin-top:6px;
  font-size: 0.86rem;
  line-height: 1.15;
  max-height: 2.3em;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: rgba(248,250,252,0.92);
}
@media (max-width: 420px){
  .rail-card{ width: 118px; }
  .rail-poster{ width:118px; height:176px; }
}

/* Welcome banner */
.welcome-banner{
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translate(-50%,-10px);
  z-index: 2000;
  pointer-events:none;
  opacity:0;
  transition: opacity .35s ease, transform .35s ease;
}
.welcome-banner.show{
  opacity: 1;
  transform: translate(-50%,0);
}
.welcome-inner{
  background: rgba(17, 28, 51, 0.92);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
  color: rgba(248,250,252,0.95);
  font-size: 0.95rem;
}
.offcanvas{ background: var(--app-surface); color: var(--app-text); }
.form-control, .form-select{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
  color: var(--app-text);
}
.form-control:focus, .form-select:focus{
  border-color: rgba(13,110,253,.65);
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.15);
  background: rgba(255,255,255,.05);
  color: var(--app-text);
}

/* Netflix-like login */
.login-screen{
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(220,38,38,.22), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(13,110,253,.18), transparent 55%),
    linear-gradient(180deg, rgba(5,7,12,1), rgba(11,18,32,1));
}
.login-card{
  background: rgba(15,23,42,.70);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
}

/* Login success overlay */
.login-success{
  position: fixed;
  inset: 0;
  z-index: 3000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(220,38,38,.22), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(13,110,253,.20), transparent 55%),
    rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  opacity:0;
  transition: opacity .25s ease;
}
.login-success.show{ opacity:1; }
.login-success-card{
  width: min(420px, calc(100vw - 32px));
  padding: 22px 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(15,23,42,.78);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  text-align:center;
  transform: translateY(10px) scale(.98);
  transition: transform .35s ease;
}
.login-success.show .login-success-card{ transform: translateY(0) scale(1); }
.login-success-logo{
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 0 auto 10px;
  background: rgba(220,38,38,.16);
  border: 1px solid rgba(220,38,38,.35);
  font-size: 1.7rem;
}
.login-success-title{
  font-weight: 700;
  letter-spacing: .2px;
  font-size: 1.15rem;
}
.login-success-name{
  margin-top: 4px;
  font-weight: 800;
  font-size: 1.55rem;
}
.login-success-sub{
  margin-top: 6px;
  color: rgba(229,231,235,.78);
  font-size: .95rem;
}
.login-success-bar{
  height: 6px;
  border-radius: 999px;
  overflow:hidden;
  margin-top: 14px;
  background: rgba(255,255,255,.10);
}
.login-success-bar span{
  display:block;
  height:100%;
  width: 40%;
  background: rgba(13,110,253,.9);
  border-radius: 999px;
  animation: loginProgress .85s ease forwards;
}
@keyframes loginProgress{
  from{ transform: translateX(-120%); }
  to{ transform: translateX(220%); }
}


/* --- Poster grid (MyTVOnline-style) --- */
.poster-tile{ cursor:pointer; }
.poster-img{
  position:relative;
  width:100%;
  aspect-ratio: 2 / 3;
  border-radius: 14px;
  overflow:hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.poster-img img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Home: TV zender tiles (logo) must not be taller than 80px */
.channel-tile .poster-img{
  aspect-ratio: auto;
  height: 80px;
}
.channel-tile .poster-img img{
  object-fit: contain;
  padding: 10px;
}
.channel-tile .poster-gradient{
  height: 60%;
}
.poster-ph{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  color: rgba(229,231,235,.55);
}
.poster-gradient{
  position:absolute; left:0; right:0; bottom:0; height:42%;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.75));
}
.poster-play{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%,-50%);
  width:54px; height:54px;
  border:0;
  border-radius: 999px;
  background: rgba(13,110,253,.92);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  text-decoration: none;
  cursor: pointer;
  z-index: 2;
}
.poster-play i{ font-size: 26px; line-height: 26px; margin-left: 2px; }
.poster-meta{ padding-top: 8px; }
.poster-title{
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.95);
  line-height: 1.2;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
  min-height: 28px;
}
.poster-sub{
  font-size: 10px;
  color: rgba(229,231,235,.65);
  margin-top: 2px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;


/* --- Meta badges (IMDb style) --- */
.poster-sub{ white-space: normal; }
.meta-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  margin-right: 6px;
}
.meta-badge-rating{
  background: rgba(245,158,11,.95);
  color: #111827;
}
.meta-badge-duration{
  /* neutral (not red) for readability */
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
}
.meta-date{
  font-size: 10px;
  color: rgba(229,231,235,.65);
}

}

/* --- Episode tiles --- */
.episode-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 10px;
}
.ep-thumb{
  width: 64px; height: 44px;
  border-radius: 12px;
  overflow:hidden;
  background: rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
}

.thumb-fallback{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,0.28);
border-radius: 12px;
    font-weight: 700;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
}
.ep-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.ep-play{
  width: 38px; height: 38px;
  border:0;
  border-radius: 999px;
  background: rgba(13,110,253,.92);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
}


/* --- Detail inline player transition --- */
.hero .hero-media{
  position:relative;
  height: 220px;
  transition: height .25s ease;
}
.hero .hero-media img.backdrop{ width:100%; height: 100%; object-fit: cover; filter: saturate(1.1); display:block; }
.hero.is-playing .hero-media{
  /* Groter en mooi 16:9-ish in mobile-first */
  height: clamp(240px, 56.25vw, 520px);
}
.hero.is-playing .hero-media img.backdrop{ opacity:0; transition: opacity .25s ease; }
.hero .hero-media .inline-player{
  position:absolute; inset:0;
  opacity:0;
  transform: scale(0.98);
  transition: opacity .25s ease, transform .25s ease;
  z-index: 5;
}

.inline-head{position:absolute;top:10px;left:10px;z-index:25;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:rgba(0,0,0,0.45);backdrop-filter:blur(8px);max-width:calc(100% - 20px);pointer-events:none;}
.inline-head img{width:44px;height:64px;border-radius:12px;object-fit:cover;border:1px solid rgba(255,255,255,0.14);}
.inline-head .inline-title{font-weight:700;font-size:14px;color:rgba(255,255,255,0.92);max-width:240px;}
.hero.is-playing .hero-media .inline-player{
  opacity:1;
  transform: scale(1);
}
.detail-info{
  transition: opacity .25s ease, max-height .25s ease, transform .25s ease;
  transform-origin: top;
  max-height: 1200px;
}
.detail-info.is-hidden{
  opacity:0;
  max-height:0;
  overflow:hidden;
  transform: translateY(-8px);
}

/* --- Cast avatars (TMDB) --- */
.cast-row{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom:4px;
}
.cast-row::-webkit-scrollbar{height:6px;}
.cast-row::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12); border-radius:99px;}

/* Cast scroll buttons */
.cast-wrap{position:relative;}
/* We reuse the same look as the Similar nav buttons */
.cast-wrap .sim-nav{ top:50%; transform:translateY(-50%); }
.cast-wrap .sim-left{ left:-6px; }
.cast-wrap .sim-right{ right:-6px; }

/* keep for backward-compat (no extra styling needed) */
.cast-nav{ border:none; }

.cast-item{min-width:68px; max-width:68px; text-align:center;}
.cast-avatar-wrap{width:52px; height:52px; border-radius:999px; overflow:hidden; margin:0 auto 6px; background:rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center;}
.cast-avatar{width:52px; height:52px; object-fit:cover; border-radius:999px; display:block;}

/* --- Profile avatars --- */
.avatar-lg{width:72px; height:72px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.avatar-img{width:72px; height:72px; object-fit:cover; display:block;}
.avatar-fallback{width:72px; height:72px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.8); font-size:28px;}
.cast-fallback {
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* Jouw huidige styles */
  font-weight: 670;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  
  /* Vergeet niet een hoogte te geven, anders valt er niets te centreren */
  height: 100px; 
}
.cast-name{font-size:10px; line-height:1.2; color:rgba(255,255,255,0.78); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* FIX: restore pointer */
a, button, .clickable { cursor: pointer !important; }

/* Profile favorites */
.fav-list{ display:flex; flex-direction:column; gap:10px; }
.fav-item{
  display:flex; align-items:center; gap:12px;
  padding:10px; border-radius:16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.fav-item:hover{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); transform: translateY(-1px); }
.fav-thumb{ width:44px; height:60px; border-radius:12px; overflow:hidden; flex:0 0 auto; background: rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; }
.fav-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.fav-thumb-fallback{ opacity:.8; }
.fav-meta{ min-width:0; flex:1 1 auto; }
.fav-title{ font-weight:600; }
.fav-arrow{ opacity:.7; }


/* Profile page improvements */
.profile-header-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 18px;
  padding: 16px;
}
.profile-avatar-lg {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
}

/* Instagram-style avatar fallback */
.profile-avatar-fallback{
  color: rgba(255,255,255,0.85);
}

/* Make profile name look like UI (not an ugly HTML link) */
.profile-title{
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.2px;
}

.profile-bio{
  color: rgba(255,255,255,0.72);
  font-size: 0.92rem;
  line-height: 1.35;
  max-width: 520px;
}

/* Friend list avatar style */
.avatar-sm{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
}

.avatar-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(255,255,255,0.85);
}

.list-row{
  text-decoration: none !important;
  color: rgba(255,255,255,0.92);
}

.list-row-title{
  font-weight: 600;
  font-size: 0.95rem;
}

.list-row-sub{
  font-size: 0.82rem;
  color: rgba(255,255,255,0.60);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-stat {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 10px 12px;
  text-align: center;
}
.profile-stat .num { font-weight: 700; color: #fff; font-size: 1.05rem; }
.profile-stat .lbl { color: rgba(255,255,255,0.65); font-size: 0.8rem; }

/* (deduped profile/friend CSS - kept above) */

.friend-card-clickable { cursor: pointer; }
.friend-card-clickable:hover { filter: brightness(1.08); }



/* Rail arrows everywhere (Home + strips) */
.rail-wrap{ position: relative; }
.rail-nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(11,18,32,.75);
  color: rgba(255,255,255,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 6;
}
.rail-nav i{ font-size: 18px; line-height: 18px; }
.rail-nav-left{ left: -6px; }
.rail-nav-right{ right: -6px; }


/* Top user dropdown readability */

#topUserMenu .dropdown-menu{
  background: rgba(20,24,35,.98);
  border: 1px solid rgba(255,255,255,.10);
}
#topUserMenu .dropdown-item{
  color: rgba(255,255,255,.88);
}
#topUserMenu .dropdown-item:hover,
#topUserMenu .dropdown-item:focus{
  background: rgba(255,255,255,.10);
  color: #fff;
}