/* NETWORK BAR */

.network-bar{
    background:#111;
    font-size:13px;
    border-bottom:1px solid #222;
}

.network-inner{
    display:flex;
    align-items:center;
    gap:15px;
    overflow:hidden;
}

.network-title{
    color:#aaa;
    white-space:nowrap;
    font-weight:500;
}

.network-sites{
    display:flex;
    gap:10px;
    overflow-x:auto;
    scrollbar-width:none;
}

.network-sites::-webkit-scrollbar{
    display:none;
}

.network-link{
    color:#bbb;
    text-decoration:none;
    padding:6px 10px;
    border-radius:0px;
    white-space:nowrap;
    transition:all .2s ease;
}

.network-link:hover{
    color:#fff;
    background:#222;
}

.network-link.active{
    color:#fff;
    background:#0d6efd;
}

body{
    padding-top:95px;
}

.network-bar{
    position:fixed;
    top:0;
    width:100%;
    z-index:1050;
}

.navbar{
    top:28px;
}
.network-bar{
    background:#111;
    font-size:13px;
    border-bottom:1px solid #222;
    position:fixed;
    top:0;
    width:100%;
    z-index:1050;
}

/* fade edges so users see it's scrollable */

.network-bar::after{
    content:"";
    position:absolute;
    right:0;
    top:0;
    height:100%;
    width:40px;
    pointer-events:none;
    background:linear-gradient(to right, transparent, #111);
}

.network-bar::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:20px;
    pointer-events:none;
    background:linear-gradient(to left, transparent, #111);
}

.network-sites{
    display:flex;
    gap:10px;
    overflow-x:auto;
    scrollbar-width:none;
}

.network-sites::-webkit-scrollbar{
    display:none;
}
.network-sites{
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
}
.network-sites{
    padding-right:30px;
}
.network-sites{
    scroll-snap-type:x mandatory;
}

.network-link{
    scroll-snap-align:start;
}

/* RIGHT FADE (desktop + mobile) */

.network-bar::after{
    content:"";
    position:absolute;
    right:0;
    top:0;
    height:100%;
    width:40px;
    pointer-events:none;
    background:linear-gradient(to right, transparent, #111);
}

/* LEFT FADE ONLY DESKTOP */

@media (min-width:768px){
  .network-bar::before{
      content:"";
      position:absolute;
      left:0;
      top:0;
      height:100%;
      width:20px;
      pointer-events:none;
      background:linear-gradient(to left, transparent, #111);
  }
}

.network-bar{
    position:fixed;
    top:0;
    width:100%;
    z-index:1050;
    overflow:hidden;
}
.mynetworkbar{
    padding-right: 0px;
}