@charset "UTF-8";

body {color:#666666;}

#pcontent {margin-top:10px; position:relative;}
.filler {width:100%; box-sizing:border-box; min-height:200px; float:right; margin:0px; margin-bottom:10px; }
.fillerOuter { width:100%; padding-left: 420px; box-sizing:border-box; }

#pheader {display:block;}

#pprofiletop {height:270px; padding:0px; background-color:#1a1a1a; background-position:center right; background-repeat:no-repeat; position:relative; overflow:hidden;}
#pprofiletop.communitymain {height:120px;  background:#1a1a1a;}

#profileschanger {}
#profileschanger .psch-l {display:block; position:absolute; top:100px; left:-35px; z-index:100; box-sizing:border-box; width:70px; height:70px; border-radius:50%; background:#333;
color:#fff; font-size:46px; padding-left:17px;}
#profileschanger .psch-r {display:block; position:absolute; top:100px; right:-35px; z-index:100; box-sizing:border-box; width:70px; height:70px; border-radius:50%; background:#333;
color:#fff; font-size:46px; padding-left:25px;}

#profileschanger .psch-l:hover,#profileschanger .psch-r:hover {background:#ae0000;transition: all 0.2s;}

#up-main-header {text-align: center; height:120px; width:35%; min-width:500px; margin:0 auto; background-image: url("../new/commbg.png"); background-color:#1a1a1a; background-position:left; background-repeat:no-repeat;}

#up-main-header h1 {color:#fff; font-size:60px; line-height:60px; margin:30px 20px 0px 0px; padding:0px; letter-spacing:-2px; display: inline-block; vertical-align:middle; text-shadow:0px 0px 8px #000;}
#up-main-header h1 a {color:inherit;} 
#up-main-header .h1register {background:#FC0; border-radius:10px; color:#fff; font-size:26px; line-height:42px; margin:30px 0px 0px 0px; padding:0px 20px; letter-spacing:-2px; display: inline-block; vertical-align: middle; box-shadow:0px 0px 8px #000;}
#up-main-header .h1register:hover {background:#ae0000;}
#up-main-header span {text-transform:uppercase; display:block;}

#pprofiletophead {margin:20px; padding:10px; background:rgba(0,0,0,0.65); width:200px; border:1px solid #666; float:left; z-index:5; position:relative;}
#pprofiletopheadinner {width:200px; height:200px; box-sizing:border-box; line-height:200px; text-align:center; font-size:160px; color:#fff; text-transform: uppercase; text-align: center; vertical-align: middle; position:relative;}
#pprofiletopheadinner:hover .profileimgoverlay {opacity: 0.7; line-height:20px !important;}
.profileimgoverlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #ae0000;
}
.piotext {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
#pprofiletophead img {width:200px; height:200px;}

#pprofiletopinfo {width:50%; position: absolute; bottom: 30px; left:270px; z-index:2;}
#pprofiletopinfo h1 {font-size:30px; color:#fc0; line-height:35px; height:35px; padding:0px; padding-top:5px; margin:0px; width:400px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-shadow: 1px 1px 1px #000;}
#pprofiletopinfo h2 {font-size:14px; line-height:20px; padding:0px; margin:0px; color:#fff; text-shadow: 1px 1px 1px #000;}
#pprofiletopinfo #userisonline {background:lime; width:10px; height:10px; border-radius:50%; display:inline-block; margin-left:5px; margin-bottom:4px; xbox-shadow: 0px 0px 2px 2px lime;}


#subscribeuser .subscribebutton{padding:5px 10px; margin:5px 0px; border-radius:5px;}
#subscribeuser .subscribebutton:before {  font-family: 'epicons' !important; content:"\e927"; font-size:11px; padding-right: 5px;}

.profile-icon-usercircle {width:14px; position:relative; padding-right:2px;}
.profile-icon-usercircle:before {font-family: 'epicons', sans-serif; font-style:normal; content:"\f2be"; color:#999; font-size:18px;} 


#aboutmebig {position: absolute; top: 15px; right:20px; width:33%; font-size:30px; line-height: 40px; color:#fff; text-shadow: 1px 1px 1px #000; text-align:right;}
#aboutmebig span {background:#000; padding: 2px 15px; box-shadow: 10px 0px 0px #000, -10px 0px 0px #000; box-decoration-break: clone;}
#aboutmebig span:empty {display:none;}

#pprofiletopbtn {position:absolute; bottom:30px; right:30px; width:33%;  text-align:right; float:right; text-align: right; color:#FFF; font-size:12px; font-weight:bold; 
		 text-shadow: 1px 1px 1px #000; color:#ccc; z-index:3;}
#pprofiletopbtn div {display:inline-block; margin-left:20px;}
#pprofiletopbtn div span {display:block; font-size:25px; text-align: right; color:#FFF;}
#pprofiletopbtn a {margin-left:20px; line-height:20px;}

 .hdchannel #pprofiletopbtn {background-image: linear-gradient(to right, rgba(0,0,0,0.0) , rgba(0,0,0,0.8)); right:0px; padding:10px 0px; bottom:20px;}
 .hdchannel #pprofiletopbtn div {margin-right:0px; padding-right:20px;}


.headimgshadow {position:absolute; bottom:0; left:0; height:40px; width:100%;  z-index:2;
                background-image: linear-gradient(to right, rgba(26,26,26,1), transparent);
                background-image: -webkit-linear-gradient(to top, rgba(0,0,0,0.8), transparent);
                background-image:    -moz-linear-gradient(to top, rgba(0,0,0,0.8), transparent);
                background-image:     -ms-linear-gradient(to top, rgba(0,0,0,0.8), transparent);
                background-image:      -o-linear-gradient(to top, rgba(0,0,0,0.8), transparent);
                background-image:         linear-gradient(to top, rgba(0,0,0,0.8), transparent); 
}
.headimggradient {position:absolute; bottom:0; right:1012px; height:270px; width:700px; 
                background-image: -webkit-linear-gradient(to right, rgba(26,26,26,1), transparent);
                background-image:    -moz-linear-gradient(to right, rgba(26,26,26,1), transparent);
                background-image:     -ms-linear-gradient(to right, rgba(26,26,26,1), transparent);
                background-image:      -o-linear-gradient(to right, rgba(26,26,26,1), transparent);
                background-image:         linear-gradient(to right, rgba(26,26,26,1), transparent);
                border-left:10px solid #1a1a1a; z-index:1; }


#channel-head {border:1px solid #333; background-position:top; width:100%; position:relative; height:330px; background-position: center right;
  background-repeat: no-repeat;}
#channel-head .chlogo {position:absolute; width: 200px; height: 200px; border: 2px solid #ccc; background: #666; margin: 30px; float: left;}
#channel-headin {margin-top:270px; border-top:2px solid #000; background:#151515; height:60px;}
#channel-headin h1 {float:left; line-height:50px; padding:0px; padding-top:3px; margin:0px; color:#fff; font-size:30px; margin-left:10px;}
#channel-headin div {float:right; text-align:center; display:block; width:100px; text-transform:uppercase; color:#666; font-size:14px; font-weight:bold; margin-top:10px;}
#channel-headin span {display:block; color:#FFF;}

.hdchannel .fillerOuter {/*padding-left:335px;*/padding-left:340px;}
.hdchannel #profile_sidebar { width: 320px; border:1px solid #333; padding:9px;}


.channelsoc {text-align:center; margin-top:20px;}
.channelsoc a {margin:0 10px; color:#ccc;}
.channelsoc i.fa {font-size:25px;}
.channelsoc .fa-tiktok2 {font-size:22px !important;}

#pnavtop {border:1px solid #333; display:block; background:#181818; height:40px;}
#pnavtop a {color:#fff;width:150px; border-right:1px solid #333; display:block; float:left; line-height:40px; text-align:center; font-weight:bold; font-size:14px; padding:0px;}

#pnavtop a:hover {background:#222;}
#pnavtop .pdrops {background:#222; float:right; border-right:0px; border-left:1px solid #333; border-top:1px solid #3d3d3d;}
#pnavtop .pdrops:hover {background:#333; color:#FFF;}

#middler {width:100%; background: #121212; border-top:2px solid #050505; margin-bottom:20px; line-height: 18px;}
.middlerbox {width:32%; box-sizing:border-box; padding:30px 0px 20px 40px; float:left;}
.middlerbox strong {color:#ccc; font-weight:bold;}
.middlerbox ul {list-style:none; margin:0px; padding:0px;}


#toptopbelprof {height:34px; line-height:34px; background-image: linear-gradient(#222326,#000); margin-top:0px; margin-bottom:17px; clear:both; border:1px solid #333;}

#toptopbelprof  h1 {color:#FFF; font-size:1.7em; line-height:34px; height:34px;  margin:0px; padding:0px; padding-left:20px; display:inline-block;float:left;}
#toptopbelprof  h1 a {color:#FFF; text-decoration:none; padding:0px; }
#toptopbelprof  h1:before {content:"\e913"; font-family: 'epicons', sans-serif; color:#444; font-size:30px; position:absolute; margin-left:-25px; margin-top:-0px;}

#toptopbelprof  h2 {color:#FFF; font-size:1.7em; line-height:34px; height:34px;  margin:0px; padding:0px; padding-left:20px; display:inline-block;float:left;}
#toptopbelprof  h2 a {color:#FFF; text-decoration:none; padding:0px; }
#toptopbelprof  h2:before {content:"\e913"; font-family: 'epicons', sans-serif; color:#444; font-size:30px; position:absolute; margin-left:-25px; margin-top:-0px;}

#toptopbelinprof {line-height:34px; height:34px; display:block; color:#FFF; text-align:left; font-weight:bold; float:right;}
#toptopbelinprof a {width:100px; background-image: linear-gradient(#000,#222326); text-align:center; float:left; border-left:1px solid #333; 
            border-right:0px; color:#CCC; text-decoration:none;}
#toptopbelinprof a:lang(pl) {width:auto; min-width: 80px; padding-left: 10px; padding-right: 10px;}
#toptopbelinprof a:hover {color:#C00;}
#toptopbelinprof a.active {color:#000; background:#d9a83f;}

.toptopbelinsetprof {display:none; line-height: 34px; height: 34px; width:34px; color: #FFF; text-align: left; font-weight: bold; float: right; position:relative; cursor:pointer;}
.toptopbelinsetprof:before {font-family: 'epicons', sans-serif; content:"\e992"; margin-right:0px; font-size:14px; position:absolute; top:0px; left:10px;} 

#toptopbelinprof a {line-height:34px;}

#pagediv {border:0px;}

#toptopbelinprof {display:block; color:#FFF; text-align:left; font-weight:bold; float:right;}
#toptopbelinprof a {line-height:34px; padding-left:15px; padding-right:15px; text-align:center; display:inline-block; border-left:1px solid #333; border-right:0px; color:#CCC; width:auto;}
#toptopbelinprof a:hover {background:#000; color:#C00;}
#toptopbelinprof.activeMobi {display:none; position:absolute; top:35px; right:25px; width:200px; border:0px; box-shadow: 0px 5px 5px  rgba(0,0,0,0.70); z-index:20;}
#toptopbelinprof.activeMobi a{width:200px; padding:0px 10px; background-color:#000; background-image:none; border-bottom:1px solid #333;} 


#cpp-desk-ban {display:block}
#cpp-mobi-ban {display:none;}
#cpp-mobi-ban .channelsoc {display:none;}

.streamevents {}
.streameventsday {padding:20px; background:#171717; margin-bottom: 20px;}
.streameventsday h3 {}

.seheader {font-size: 16px; line-height: 16px; color: #CCC; padding-bottom:9px; border-left:1px solid #ae0000; margin:-20px 20px 20px -19px; padding:20px;}
.seheader h2 {font-weight: bold; font-size: 16px; line-height: 16px; margin:0px; margin-right:5px; padding:0px; display:inline-block;}
.seheader a h2 {color:#FC0;}
.seaction {font-size:12px; color:#FFF;}
.sedate {font-size:12px; color:#666; display:block; padding-top:5px;}
.setitle { color: #CCC; margin-top: 10px; padding-bottom: 10px;}


.profile-icon-calendar {width:14px; position:relative; padding-right:2px;}
.profile-icon-calendar:before {font-family: 'epicons', sans-serif; font-style:normal; content:"\f073"; color:#666; font-size:12px;} 

.wordBreakAll {word-break: break-all;}

.UPinfo { margin: auto auto 10px auto; color:#FFF; }
.UPinfo a { color:#FC0; }
.UPinfoUploadMovie .uploadmovie { color: #FFF; margin: auto auto 10px auto;}
.UPinfoUploadMovie { width:100%; color: #FFF; margin: auto auto 10px auto; padding-left: 40%; }

.achievement { margin-right: 5px; margin-bottom: 25px; width:32.5%; }
.achievementBox { border:1px solid #333; border-radius: 10px; height: 100%; } 
.achievementBox img {margin: auto; }

.pnlleftside {float: left; width: 50%; margin-right: 1%; box-sizing:border-box; padding:10px; min-height:1400px; background:#171717;}
.pnlrightside {float: left; width: 49%; box-sizing:border-box; padding:10px; min-height:1400px; background:#171717;}
.pnlrightsideinner {margin-left:10px;}
.pnlfullsize {box-sizing:border-box; padding:10px; min-height:800px; background:#171717;}

.pnlleftside.avatareditpage {width:360px;}
.pnlrightside.avatareditpage {width:calc(99% - 360px);}


.pbox2 {min-height:200px; border-right:1px solid #333; border-bottom:1px solid #333; margin:0px; margin-bottom:10px; padding:10px; position:relative;}
.pbox2:nth-child(2n) {margin-right:0px; border-right:0px;}

.pbox3 {min-height:200px; margin-bottom: 0px; float:left; border-right:1px solid #333; border-bottom:1px solid #333; border-top:1px solid #333; margin:0px; margin-bottom:10px; padding:10px; position:relative;}
.pbox3:nth-child(3n+2) {margin-right:0px; border-right:0px;}

.thumb label img {border:3px solid #000; cursor:pointer;}
.thumb input[type="radio"] {visibility:hidden;position: absolute;}
.thumb input[type="radio"]:checked+label img {border:3px solid #FF0000}
.thumbselected {border:3px solid #F00}


#profile_sidebar {box-sizing:border-box; margin-right:20px; float:left; min-height:500px; width:400px;}
#profile_sidebar.communitymain {width:375px;}

.fillerOuter.communitymain {padding-left:0px !important; float:left; width:calc(100% - 415px - 320px);}
.filler.communitymain {}
#community-right-sidebar {float:right; width:300px; padding:9px; border:1px solid #333;}


.pbox4 {min-height:200px; float:left; border:1px solid #333; border-bottom:0px; box-sizing:border-box; margin:0px; margin-bottom:10px; padding:10px; position:relative;}
.pbox4:nth-child(3n+3) {margin-right:0px; border-right:0px;}


.plister strong {color:#ccc; font-weight:bold;}
.plister {color:#999;}
.plister {list-style:none; margin:0px; margin-bottom:10px; padding:0px;}
.plister li {border-bottom:1px solid #333; line-height:30px; padding-left:10px;}
.plister li:first-child {background:#171717;}


.phalful {width:200px !important; float:left; border-right:1px solid #333; margin-right:10px;}
.psscrol {height:500px; scrollbar-color: #555 #333;}



.pclear {clear:both;}

.pbelin {background:#171717; line-height:30px; /* ! */ height:30px; border:1px solid #333; box-sizing:border-box;}
.pbelin span {padding-left:10px;}

#toptopbel1 {height:35px;}
.pbelin.plister h2 {font-size:16px; line-height:30px; margin:0px; margin-left: 7px; padding:0px;}
.profile-settings-header {display:flex; align-items:center; justify-content:space-between; position:relative; overflow:visible; padding-right:4px;}
.profile-settings-header h2 {flex:1 1 auto; min-width:0; margin-right:10px;}
.profile-playlists-header {justify-content:flex-start;}
.profile-playlists-title {display:flex; align-items:center; flex:0 1 auto; min-width:0;}
.profile-playlists-title h2 {flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.profile-playlists-title .sidbseebtn {flex:0 0 auto; margin-left:10px; padding-right:10px;}
.profile-playlists-header .profile-settings {margin-left:auto;}
.profile-settings {position:relative; flex-shrink:0;}
.profile-settings-toggle {display:flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0px; border:0px; background:#222; color:#fc0; cursor:pointer; border-radius:0px; transition:background-color 0.2s ease, color 0.2s ease;}
.profile-settings-toggle:hover,
.profile-settings.is-open .profile-settings-toggle {background:#333; color:#fc0;}
.profile-settings-toggle i {padding-left:0px;}
.profile-settings-toggle i:before {font-size:14px;}
.profile-settings-panel {display:none; position:absolute; top:calc(100% + 8px); right:0px; width:230px; max-width:calc(100vw - 30px); padding:12px 14px 14px; background:#171717; border:1px solid #333; box-shadow:0px 12px 24px rgba(0,0,0,0.55); z-index:50; box-sizing:border-box;}
.profile-settings.is-open .profile-settings-panel {display:block;}
.profile-settings-panel:before {content:''; position:absolute; top:-7px; right:10px; border-style:solid; border-width:0px 7px 7px 7px; border-color:transparent transparent #333 transparent;}
.profile-settings-panel:after {content:''; position:absolute; top:-6px; right:10px; border-style:solid; border-width:0px 7px 7px 7px; border-color:transparent transparent #171717 transparent;}
.profile-settings-panel-title {color:#eee; font-size:15px; font-weight:500; letter-spacing:1px; text-transform:uppercase; text-align:center; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #333;}
.profile-settings-option {display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; color:#fff; line-height:20px; padding:4px 0;}
.profile-settings-option + .profile-settings-option {border-top:1px solid #333; margin-top:4px; padding-top:8px;}
.profile-settings-option-label {display:block; color:#f3f3f3; font-size:14px; font-weight:400; padding-right:0px; flex:1 1 auto;}
.profile-settings-switch {position:relative; width:38px; min-width:38px; height:22px; display:block; flex-shrink:0; padding-right:0px; margin-left:auto;}
.profile-settings-switch-input {position:absolute; opacity:0; width:0px; height:0px;}
.profile-settings-switch-slider {position:absolute; inset:0px; background:#555; border-radius:999px; transition:background-color 0.2s ease; box-sizing:border-box;}
.profile-settings-switch-slider:before {content:''; position:absolute; left:3px; top:3px; width:16px; height:16px; background:#fff; border-radius:50%; box-shadow:0px 1px 3px rgba(0,0,0,0.35); transition:transform 0.2s ease;}
.profile-settings-switch-input:checked + .profile-settings-switch-slider {background:#ae0000;}
.profile-settings-switch-input:checked + .profile-settings-switch-slider:before {transform:translateX(16px);}
.profile-settings-switch-input:disabled + .profile-settings-switch-slider {opacity:0.6;}
.profile-settings-switch-input:focus + .profile-settings-switch-slider {box-shadow:0px 0px 0px 2px rgba(174,0,0,0.25);}
.profile-settings-columns {display:flex; gap:4px; flex-shrink:0;}
.profile-settings-col-btn {display:flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; border:1px solid #555; background:#333; color:#ccc; font-size:13px; font-weight:600; cursor:pointer; border-radius:3px; transition:background-color 0.15s ease, border-color 0.15s ease;}
.profile-settings-col-btn:hover {background:#444; border-color:#777;}
.profile-settings-col-btn.is-active {background:#ae0000; border-color:#ae0000; color:#fff;}
.profile-settings-columns-label {display:flex; align-items:center; gap:6px; color:#f3f3f3; font-size:14px; font-weight:400; flex:1 1 auto;}

.profile-settings-header.has-uploads-search h2 {white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.profile-uploads-search {display:flex; align-items:center; flex:0 1 auto; min-width:0; margin-right:8px;}
.profile-uploads-search input[type=text] {flex:0 1 200px; width:200px; min-width:70px; height:24px; padding:0px 8px; background:#222; border:1px solid #333; border-right:0px; color:#eee; box-sizing:border-box;}
.profile-uploads-search input[type=text]::placeholder {color:#888;}
.profile-uploads-search input[type=text]:focus {outline:none; border-color:#555; box-shadow:0px 0px 0px 2px rgba(174,0,0,0.25);}
.profile-uploads-search input[type=submit] {width:28px; height:24px; padding:0px; border:1px solid #333; background:#333; color:#fc0; cursor:pointer; font-family:'epicons',sans-serif; font-size:14px; box-sizing:border-box; transition:background-color 0.2s ease;}
.profile-uploads-search input[type=submit]:hover {background:#444;}
.profile-uploads-search-info {margin:8px 0px; color:#999;}
.profile-uploads-search-info a {display:inline-block; margin-left:8px; padding:3px 8px; background:#ae0000; color:#fff; line-height:18px; border-radius:2px; text-decoration:none;}
.profile-uploads-search-info a:hover {background:#c40000; color:#fff; text-decoration:none;}
/* the cog's auto margin must drop when the form is present, or the leftover space splits between the
   two auto margins and the form floats mid-header */
.profile-playlists-header .profile-uploads-search {margin-left:auto; margin-right:0;}
.profile-playlists-header .profile-uploads-search input[type=text] {width:210px; height:28px; font-size:13px;}
.profile-playlists-header .profile-uploads-search input[type=submit] {width:28px; height:28px; font-size:15px;}
.profile-playlists-header.has-uploads-search .profile-settings {margin-left:0;}
/* playlist header bar */
.pbelin.plister.playlist-head {display:flex; align-items:center; overflow:visible; height:auto; min-height:30px;}
.pbelin.plister.playlist-head #playlistlike {order:1; flex:0 0 auto; float:none; width:auto; margin:0px;}
/* scoped: style.css:1376's 3px also serves the collection header. Flush is only acceptable because each
   half keeps its own hover colour — that is what still separates the two click targets. */
.pbelin.plister.playlist-head #playlistlike .likedown {margin-left:0px;}
.pbelin.plister.playlist-head h2 {order:2; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0px 12px;}
.pbelin.plister.playlist-head > span {order:3; flex:0 0 auto; white-space:nowrap; margin:0px 4px;}
.pbelin.plister.playlist-head > span:first-of-type {margin-left:auto;}
.pbelin.plister.playlist-head > span:last-of-type {padding-right:4px;} /* trim the 30px trailing pad before the search */
/* Chip, not a .subscribebutton pill (that is this site's "follow a producer" language). Must be a DIV:
   a <span> would become span:first-of-type and steal the margin-left:auto above. Icon must be a
   ::before: js/subscribe.js replaces the whole innerHTML on toggle. min-width, not width, so a longer
   translation grows the chip instead of clipping. */
.pbelin.plister.playlist-head > .playlist-fav {order:4; flex:0 0 auto; position:relative; box-sizing:border-box;
    height:24px; line-height:24px; margin:0px 0px 0px 10px; padding:0px 12px 0px 31px; min-width:150px;
    text-align:center; background:#333; color:#fff; cursor:pointer;}
.pbelin.plister.playlist-head > .playlist-fav::before {font-family:'epicons', sans-serif; content:"\e922";
    font-size:21px; line-height:24px; position:absolute; left:7px; top:-1px;}
.pbelin.plister.playlist-head > .playlist-fav:hover::before {color:#FC0;}
.pbelin.plister.playlist-head > .playlist-fav.unsubscribe::before {content:"\e920"}
/* Count in a ::after, not markup: js/subscribe.js's $(el).html(label) would wipe it on toggle. The
   .unsubscribe class it toggles picks which of the two counts playlist.php renders. */
.pbelin.plister.playlist-head > .playlist-fav::after {content:" (" attr(data-fav-count) ")"; font-size:11px; color:#bbb;}
.pbelin.plister.playlist-head > .playlist-fav.unsubscribe::after {content:" (" attr(data-fav-count-subscribed) ")";}
/* nothing directly after the header (no description, and the search form hidden for a playlist you can't see):
   pull the grid up flush, cancelling the head's 10px bottom margin */
.pbelin.plister.playlist-head + .streamevents {margin-top:-10px;}
@media screen and (max-width:1200px) {
    .pbelin.plister.playlist-head {flex-wrap:wrap;} /* wrapped: reorder to likes/stats bar -> title; likes anchored at the top-left corner (no padding) */
    /* wrapped: likes -> chip -> stats -> title. The chip needs an order of its own, so stats and title
       shift up one. */
    .pbelin.plister.playlist-head h2 {order:4; flex:1 1 100%; white-space:normal; overflow:visible; text-overflow:clip; margin:0px 0px 6px 10px;} /* left margin aligns the title with #playlistdescription's 10px padding */
    /* 16px unless the chip follows: it is conditional (owner, or a non-public playlist not yet
       favourited), and without it the stats icon -- a ::before at margin-left:-20px, :393 -- slides
       under the like pill, which paints over it (position:relative, style.css:1363). */
    .pbelin.plister.playlist-head #playlistlike {order:1; margin:0px 16px 6px 0px;}
    .pbelin.plister.playlist-head.has-fav #playlistlike {margin-right:2px;}
    .pbelin.plister.playlist-head #playlistlike .likedown {margin-right:0px;}
    .pbelin.plister.playlist-head > span {order:3; margin:0px 9px 6px 0px;}
    .pbelin.plister.playlist-head > span:first-of-type {margin-left:0px;}
    .pbelin.plister.playlist-head > span:last-of-type {margin-right:0px;}
    /* 28px, not the desktop 24px: wrapped, the search box is hidden and the neighbour is the 28px likes widget */
    .pbelin.plister.playlist-head > .playlist-fav {order:2; height:28px; line-height:28px; margin:0px 16px 6px 0px;}
    /* absolutely positioned: it does NOT follow the box height above without this */
    .pbelin.plister.playlist-head > .playlist-fav::before {line-height:28px;}
}
@media screen and (max-width:850px) {
    .pbelin.plister.playlist-head #playlistlike #likeclick div {padding:0px 4px 0px 26px;}
}
.epwhite .profile-uploads-search input[type=text] {background:#fff; border-color:#ccc; color:#222;}
.epwhite .profile-uploads-search input[type=text]:focus {border-color:#999;}
.epwhite .profile-uploads-search input[type=submit] {background:#eaeaea; border-color:#ccc; color:#555;}
.epwhite .profile-uploads-search input[type=submit]:hover {background:#ddd;}
.epwhite .profile-uploads-search-info {color:#555;}
.epwhite .profile-uploads-search-info a {background:#ae0000; color:#fff;}
.epwhite .profile-uploads-search-info a:hover {background:#c40000; color:#fff;}
@media (max-width: 600px) { /* narrow screens: title+cog row, search drops to a full-width second row */
    .profile-settings-header.has-uploads-search {flex-wrap:wrap; height:auto; min-height:30px; padding-bottom:7px;}
    .profile-uploads-search {order:3; flex:1 1 100%; margin:2px 0px 0px 7px;} /* left edge tracks h2, right edge tracks the cog (header padding-right) */
    .profile-uploads-search input[type=text] {flex:1 1 auto; width:auto; height:28px;}
    .profile-uploads-search input[type=submit] {width:28px; height:28px;} /* exactly the cog's 28x28, right edges aligned */
    .profile-playlists-header .profile-uploads-search {margin-left:7px;} /* re-assert the h2-tracking indent over the desktop margin-left:auto */
    .profile-playlists-header.has-uploads-search .profile-settings {margin-left:auto;} /* the form sits on its own row here, so restore the cog's right anchor dropped above — the title wrapper doesn't grow, and an unanchored cog opens its 230px panel off the left viewport edge */
}

/* playlist search: one form rendered twice (playlist.php), inline in the header on desktop / full-width bar below
   the description when wrapped. Kept after the .profile-uploads-search rules so these win by source order. */
.pbelin.plister.playlist-head .playlist-search-inline {order:5; flex:0 0 auto; float:none; display:flex; align-items:center; margin:0px 6px;}
.pbelin.plister.playlist-head.has-fav .playlist-search-inline {margin-left:2px;} /* hairline only when the chip is actually rendered */
.playlist-search-bar {display:none; margin:0px; width:100%; box-sizing:border-box;}
.playlist-search-bar input[type=text] {flex:1 1 auto; width:auto;}
.playlist-video-filter-trigger {position:relative; display:flex; align-items:center; justify-content:center; flex:0 0 28px; width:28px; height:28px; margin:0px 0px 0px 4px; padding:0px; border:1px solid #333; border-radius:0px; background:#222; color:#fc0; cursor:pointer; box-sizing:border-box; transition:background-color .2s ease, color .2s ease;}
.playlist-video-filter-trigger:hover,
.playlist-video-filter-trigger:focus-visible,
.playlist-video-filter-trigger.is-open {background:#333; color:#fc0; outline:0;}
.playlist-video-filter-trigger:focus-visible {box-shadow:0px 0px 0px 2px rgba(217,147,18,.35);}
.playlist-video-filter-icon {display:block; width:18px; height:18px; padding:0px; font-style:normal; line-height:18px; text-align:center;}
.playlist-video-filter-icon::before {content:"\e992"; font-family:'epicons',sans-serif; font-size:16px; font-weight:normal;}
.playlist-video-filter-badge {position:absolute; top:-6px; right:-6px; min-width:15px; height:15px; padding:0px 3px; border:1px solid #171717; border-radius:8px; background:#ae0000; color:#fff; font-family:Arial,sans-serif; font-size:9px; font-weight:bold; line-height:13px; text-align:center; box-sizing:border-box;}
.playlist-video-filter-badge[hidden] {display:none;}

/* One fixed popup follows whichever of the two responsive search triggers is visible. Keeping it out of
   .playlist-head also prevents the legacy .plister span rules from leaking into the filter partial. */
.playlist-video-filter-popup {position:fixed; z-index:1000030; width:400px; max-width:calc(100vw - 20px); max-height:calc(100vh - 20px); max-height:calc(100dvh - 20px); overflow:visible; padding:0px; background:#171717; border:1px solid #333; box-shadow:0px 12px 24px rgba(0,0,0,.55); box-sizing:border-box;}
.playlist-video-filter-popup[hidden] {display:none;}
.playlist-video-filter-popup::before {content:''; position:absolute; top:-7px; right:10px; width:0px; height:0px; border-style:solid; border-width:0px 7px 7px 7px; border-color:transparent transparent #333 transparent;}
.playlist-video-filter-popup::after {content:''; position:absolute; top:-6px; right:10px; width:0px; height:0px; border-style:solid; border-width:0px 7px 7px 7px; border-color:transparent transparent #171717 transparent;}
.playlist-video-filter-popup.opens-above::before {top:auto; bottom:-7px; border-width:7px 7px 0px 7px; border-color:#333 transparent transparent transparent;}
.playlist-video-filter-popup.opens-above::after {top:auto; bottom:-6px; border-width:7px 7px 0px 7px; border-color:#171717 transparent transparent transparent;}
.playlist-video-filter-popup-list {max-height:inherit; overflow-y:auto; overscroll-behavior:contain; list-style:none; margin:0px; padding:0px; scrollbar-width:thin;}
.playlist-video-filter-popup .video-filter-panel {list-style:none; margin:0px; padding:14px; border:0px; line-height:normal; box-sizing:border-box;}
.playlist-video-filter-popup .video-filter-category-list {max-height:min(330px, 42vh);}
.playlist-video-filter-popup .video-filter-actions button,
.playlist-video-filter-popup .video-filter-actions a {display:flex; align-items:center; justify-content:center; flex:1 1 0; min-height:34px; box-sizing:border-box; padding:5px 7px; border-radius:4px; font:inherit; font-weight:bold; line-height:16px; text-align:center; cursor:pointer;}
/* no-description flush: on desktop the bar is display:none, so pull the grid up THROUGH it to the header;
   the -10 on the bar itself only bites on wrapped, where the bar shows */
.pbelin.plister.playlist-head + .playlist-search-bar {margin-top:-10px;}
.pbelin.plister.playlist-head + .playlist-search-bar + .streamevents {margin-top:-10px;}
@media screen and (max-width:1200px) {
    .pbelin.plister.playlist-head .playlist-search-inline {display:none;}
    .playlist-search-bar {display:flex;}
    .pbelin.plister.playlist-head + .playlist-search-bar + .streamevents {margin-top:0px;} /* bar now visible: grid flush to the bar, not to the header */
}
@media screen and (max-width:850px) {
    .playlist-video-filter-popup .video-filter-panel .video-filter-actions {position:static; z-index:auto; right:auto; bottom:auto; left:auto; margin-top:12px; padding:10px 0px 0px; border-top:1px solid #333; background:transparent; box-shadow:none;}
    .playlist-video-filter-popup .video-filter-panel .video-filter-actions-inner {max-width:none; margin:0px;}
}
.epwhite .playlist-video-filter-trigger {border-color:#ccc; background:#eaeaea; color:#555;}
.epwhite .playlist-video-filter-trigger:hover,
.epwhite .playlist-video-filter-trigger:focus-visible,
.epwhite .playlist-video-filter-trigger.is-open {background:#ddd; color:#ae0000;}
.epwhite .playlist-video-filter-trigger:focus-visible {box-shadow:0px 0px 0px 2px rgba(174,0,0,.25);}
.epwhite .playlist-video-filter-badge {border-color:#dedede; background:#ae0000; color:#fff;}
.epwhite .playlist-video-filter-popup {background:#f5f5f5; border-color:#ccc; box-shadow:0px 12px 24px rgba(0,0,0,.18);}
.epwhite .playlist-video-filter-popup::before {border-color:transparent transparent #ccc transparent;}
.epwhite .playlist-video-filter-popup::after {border-color:transparent transparent #f5f5f5 transparent;}
.epwhite .playlist-video-filter-popup.opens-above::before {border-color:#ccc transparent transparent transparent;}
.epwhite .playlist-video-filter-popup.opens-above::after {border-color:#f5f5f5 transparent transparent transparent;}
@media screen and (max-width:850px) {
    .epwhite .playlist-video-filter-popup .video-filter-panel .video-filter-actions {border-top-color:#ccc; background:transparent; box-shadow:none;}
}

#playlistdescription {}
#playlistdescription span {display:inline-block; min-width:30px;}
#playlistdescription p {display:inline-block;}

#playlistdescription span:nth-child(1) {padding-left:20px;}
#playlistdescription span:nth-child(1)::before {content: "\e914"; font-family: 'epicons',sans-serif; color: #404040; font-size: 14px;
  position: absolute; margin-left: -20px; margin-top: -1px;}

#playlistdescription span:nth-child(2) {padding-left:20px;}
#playlistdescription span:nth-child(2)::before {content: "\f0c7"; font-family: 'epicons',sans-serif; color: #404040; font-size: 14px;
  position: absolute; margin-left: -20px; margin-top: 0px;}


.plister h2 {display:inline-block;}
.plister span {color:#404040; font-weight:bold; font-size:14px;}
.plister span:nth-child(2) {/*padding-left:50px;*/ float:right; padding-right:10px;}
.plister span:nth-child(2)::before {content: "\e914"; font-family: 'epicons',sans-serif; color: #404040; font-size: 14px;
  position: absolute; margin-left: -20px; margin-top:0px; font-weight:normal;}

.plister span:nth-child(3) {/*padding-left:30px;*/ float:right;padding-right:30px;} 
.plister span:nth-child(3)::before {content: "\e924"; font-family: 'epicons',sans-serif; color: #404040; font-size: 14px;
  position: absolute; margin-left: -20px; margin-top: 0px; font-weight:normal;}


#playlistdescription {background: #171717;border: 1px solid #333; padding:10px;margin-top: -11px;}
.epwhite #playlistdescription {background: #eaeaea; border:none; border-bottom: 1px solid #ccc;padding:10px;margin-top: -11px;}

#collectionmobelin {}
#collectionmobdata {}




.pinsert {width:100%;}
.sidbseeall {float:right; padding-right:15px;}
.sidbseeall a {color:#fff; background: #ae0000;padding: 3px 8px;border-radius: 2px;}
.epwhite .sidbseeall a {color:#fff; background: #ae0000;padding: 3px 8px;border-radius: 2px;}

.sidbseebtn {display:inline-block; vertical-align: top; padding-right:15px; margin-left:20px;}
.sidbseebtn a {color:#fff; background: #ae0000;padding: 3px 8px;border-radius: 2px;}
.epwhite .sidbseebtn a {color:#fff; background: #ae0000;padding: 3px 8px;border-radius: 2px;}



.plexcontainer {display: flex;  flex-wrap: wrap; align-content:space-between; border:1px solid #333; border-top:0px; padding:10px; width:100%; box-sizing:border-box; margin-bottom:20px;}
.plexcontainer .mb, .plexcontainer .mbphoto {width:49.5% !important; max-width:49.5% !important; display:block !important;}

/* Photogrid in stream events: dense packing fills holes from masonry span imbalance.
   .seheader and .communityshowmore are rendered inside the grid (by class-streamgui.php) —
   make them span all columns so they act as full-width header/footer rows, not single grid cells. */
.streameventsday.photosgrid {grid-auto-flow: dense;}
.streameventsday.photosgrid .seheader, .streameventsday.photosgrid .communityshowmore {grid-column: 1 / -1;}

/* Column selector — single class on <html> (set by inline JS in head.php).
   Each container that wants to participate marks itself with .ep-cols-container class.
   .mb (videos): float + width override. .photosgrid (photos): CSS Grid grid-template-columns override.
   .mbphoto width is NOT overridden — stays 100% from base CSS so photos fill grid cells.
   The min-width:0 on .mbphoto is CRITICAL — without it grid items have min-width:auto preventing shrink.
   SYNC: breakpoints duplicated in js/profile-settings.js getMaxColumns() */
.ep-cols-1 .ep-cols-container .mb {width:100% !important; max-width:100% !important;}
.ep-cols-2 .ep-cols-container .mb {width:49.5% !important; max-width:49.5% !important;}
.ep-cols-3 .ep-cols-container .mb {width:32.5% !important; max-width:32.5% !important;}
.ep-cols-4 .ep-cols-container .mb {width:24.5% !important; max-width:24.5% !important;}
.ep-cols-5 .ep-cols-container .mb {width:19.5% !important; max-width:19.5% !important;}
.ep-cols-6 .ep-cols-container .mb {width:16.15% !important; max-width:16.15% !important;}
/* Photosgrid — only override grid-template-columns. Keep base grid-gap:10px and margins intact. */
.ep-cols-1 .ep-cols-container .photosgrid .mbphoto, .ep-cols-2 .ep-cols-container .photosgrid .mbphoto, .ep-cols-3 .ep-cols-container .photosgrid .mbphoto, .ep-cols-4 .ep-cols-container .photosgrid .mbphoto, .ep-cols-5 .ep-cols-container .photosgrid .mbphoto, .ep-cols-6 .ep-cols-container .photosgrid .mbphoto {min-width:0; overflow:hidden;}
.ep-cols-1 .ep-cols-container .photosgrid {grid-template-columns:1fr !important;}
.ep-cols-2 .ep-cols-container .photosgrid {grid-template-columns:repeat(2, 1fr) !important;}
.ep-cols-3 .ep-cols-container .photosgrid {grid-template-columns:repeat(3, 1fr) !important;}
.ep-cols-4 .ep-cols-container .photosgrid {grid-template-columns:repeat(4, 1fr) !important;}
.ep-cols-5 .ep-cols-container .photosgrid {grid-template-columns:repeat(5, 1fr) !important;}
.ep-cols-6 .ep-cols-container .photosgrid {grid-template-columns:repeat(6, 1fr) !important;}
/* Media query clamps — desktop (>850px). Sidebar + padding ≈ 420px. Each column ≥150px visual.
   SYNC: these breakpoints are duplicated in js/profile-settings.js getMaxColumns() */
@media (min-width: 851px) and (max-width: 1420px) { .ep-cols-6 .ep-cols-container .mb {width:19.5% !important; max-width:19.5% !important;} .ep-cols-6 .ep-cols-container .photosgrid {grid-template-columns:repeat(5, 1fr) !important;} } /* 6→5 */
@media (min-width: 851px) and (max-width: 1280px) { .ep-cols-5 .ep-cols-container .mb, .ep-cols-6 .ep-cols-container .mb {width:24.5% !important; max-width:24.5% !important;} .ep-cols-5 .ep-cols-container .photosgrid, .ep-cols-6 .ep-cols-container .photosgrid {grid-template-columns:repeat(4, 1fr) !important;} } /* 5→4 */
@media (min-width: 851px) and (max-width: 1000px) { .ep-cols-4 .ep-cols-container .mb, .ep-cols-5 .ep-cols-container .mb, .ep-cols-6 .ep-cols-container .mb {width:32.5% !important; max-width:32.5% !important;} .ep-cols-4 .ep-cols-container .photosgrid, .ep-cols-5 .ep-cols-container .photosgrid, .ep-cols-6 .ep-cols-container .photosgrid {grid-template-columns:repeat(3, 1fr) !important;} } /* 4→3 */
/* Media query clamps — mobile (≤850px). No sidebar. Desktop values (4/5/6) clamped to 3 on mobile, then narrower. */
@media (max-width: 850px) { .ep-cols-4 .ep-cols-container .mb, .ep-cols-5 .ep-cols-container .mb, .ep-cols-6 .ep-cols-container .mb {width:32.5% !important; max-width:32.5% !important;} .ep-cols-4 .ep-cols-container .photosgrid, .ep-cols-5 .ep-cols-container .photosgrid, .ep-cols-6 .ep-cols-container .photosgrid {grid-template-columns:repeat(3, 1fr) !important;} } /* 6/5/4→3 on mobile */
@media (max-width: 515px) { .ep-cols-3 .ep-cols-container .mb, .ep-cols-4 .ep-cols-container .mb, .ep-cols-5 .ep-cols-container .mb, .ep-cols-6 .ep-cols-container .mb {width:49.5% !important; max-width:49.5% !important;} .ep-cols-3 .ep-cols-container .photosgrid, .ep-cols-4 .ep-cols-container .photosgrid, .ep-cols-5 .ep-cols-container .photosgrid, .ep-cols-6 .ep-cols-container .photosgrid {grid-template-columns:repeat(2, 1fr) !important;} } /* 3→2 */
@media (max-width: 355px) { .ep-cols-2 .ep-cols-container .mb, .ep-cols-3 .ep-cols-container .mb, .ep-cols-4 .ep-cols-container .mb, .ep-cols-5 .ep-cols-container .mb, .ep-cols-6 .ep-cols-container .mb {width:100% !important; max-width:100% !important;} .ep-cols-2 .ep-cols-container .photosgrid, .ep-cols-3 .ep-cols-container .photosgrid, .ep-cols-4 .ep-cols-container .photosgrid, .ep-cols-5 .ep-cols-container .photosgrid, .ep-cols-6 .ep-cols-container .photosgrid {grid-template-columns:1fr !important;} } /* 2→1 */

.up-profilebox {float:left; margin:3px 10px 20px 3px; padding:2px; position:relative; width:100px; overflow:hidden;}
.up-profilebox .uppbi {width:100px;}
.up-profilebox span {display:block;}
.up-profilebox a span {color:#FC0;}

.cr-slider::-moz-range-track {background: rgb(174, 0, 0) !important;}

#panel-edit-tab strong {color:#FFF;}
#panel-edit-tab textarea {font-family:inherit; font-size:14px; margin-bottom:0px !important; width:90%;}
.txtarecounter {display:block; padding-left:5px; margin-bottom:10px; color:#999; font-size:10px;}

#panel-edit-tab input.inp1 {width:310px !important;}
#panel-edit-tab .pass-eye-wrap input.inp1 {width:275px !important; margin-right:0 !important;} /* box 275+5+40+2 = 322 = sibling .inp1 (310+5+5+2). margin-right:0 - the base .inp1 20px margin, harmless as a trailing margin on the bare input, becomes real width once wrapped in the inline-block and pushes the field below its label */
#panel-edit-tab #email1.inp1, #panel-edit-tab #email2.inp1 {margin-right:0 !important;} /* the eye-wrapped password field above lost its 20px margin (so it no longer wraps); zero it on the change-email text fields too so all three align side-by-side instead of the emails wrapping below their labels while the password sits beside its own */
#panel-edit-tab select.inp1 {width:322px !important;}
#panel-edit-tab select.inp2 {width:100px !important; margin-right:11px; height:auto; margin-bottom: 0px;}
#panel-edit-tab label {display:block; margin-bottom:15px;}
#panel-edit-tab label strong {width:150px; text-align:right; padding-right: 10px; display:inline-block;}

.urgentinfo {padding-left:25px !important;}
.urgentinfo:before {font-family: 'epicons', sans-serif; font-style:normal; content: '\f06a'; color:#fff;font-size:18px; margin-left:-20px; position:absolute;}

.tdheader {background:#202020; width:100%; box-sizing:border-box; display: block; padding-left: 10px; line-height:30px; margin-bottom:20px; text-transform: uppercase;}

#panel-edit-tab .pannelbtnylw {color:#fc0;}
.pnlsubmitter {background:rgba(102, 146, 31,0.9); border:0px; padding:10px 40px; cursor:pointer; color:#FFF; border-radius:5px; min-width:160px;}
.pnlsubmitter:hover {background:rgba(102, 146, 31,0.7); box-shadow: 0px 0px 10px rgba(102, 146, 31,0.3);}

.profile-save {width:14px;}
.profile-save:before {font-family: 'epicons', sans-serif; font-style:normal; content:"\f0c7"; color:#fff; margin-right:0px; font-size:16px;}

.pnldeleter {background:rgba(174,0,0,0.9); border:0px; padding:10px 40px; margin-top:10px; cursor:pointer; color:#FFF; border-radius:5px; min-width:160px;}
.pnldeleter:hover {background:rgba(174,0,0,0.7); box-shadow: 0px 0px 20px rgba(174,0,0,0.3);}

#panel-edit-tab input[type="file"] {display: none;}
#panel-edit-tab input[type="radio"]{accent-color:#ae0000;}
#panel-edit-tab input[type="checkbox"]{accent-color:#ae0000;}
.pnluploader {border: 1px solid #999; display: inline-block; padding:12px 12px; cursor: pointer;}
.profile-cloud-upload {width:14px; position:relative; padding-right:20px;}
.profile-cloud-upload:before {font-family: 'epicons', sans-serif; font-style:normal; content:"\e901"; color:#fff; position:absolute; top:-4px; font-size:16px;} 


#avatar-image-edit, #headImage-image-edit  { display: block; width: 100%; }
#save-avatar-button, #save-headImage-button { display:none; }
#save-avatar-button input, #save-headImage-button input { display:none; }
#save-avatar-button label, #save-headImage-button label { display: inline; }

#avatarImagePreview, #headImagePreview { width: 100%; }
#avatarImagePreview {max-width:200px;}
#avatarsList img { cursor: pointer; }
#avatarsList h2 {}

#avatarsList header {text-align: center; margin:auto;}
#avatarsList .btn-default {width:264px; background:rgba(102, 146, 31,0.9); border:0px; padding:10px 40px; margin-bottom:10px; cursor:pointer; color:#FFF; border-radius:5px;}
#avatarsList .btn-default:hover {background:rgba(102, 146, 31,0.7); box-shadow: 0px 0px 10px rgba(102, 146, 31,0.3);}
#avatarsList .btn-primary {background:rgba(102, 146, 31,0.9); border:0px; margin-top:20px; padding:10px 40px; cursor:pointer; color:#FFF; border-radius:5px; min-width:165px;}
#avatarsList .btn-primary:hover {background:rgba(102, 146, 31,0.7); box-shadow: 0px 0px 10px rgba(102, 146, 31,0.3);}

#avatarsList .form-group {display:block; height:30px;  line-height:30px; width:100%; margin-bottom:1px;}
#avatarsList .form-group .col-sm-3 {width:140px; float:left; margin-bottom:0px;}
#avatarsList .form-group .col-sm-9 {width:calc(99% - 140px); float:left;}
#avatarsList .form-group .col-sm-9 label {float:left; margin-bottom:0px;}
#avatarsList .form-group .col-sm-9 select {width:60%; max-width:75%;}



.communityshowmore {clear:both; margin-top:10px; margin-bottom:0px; color:#fff; text-align: center; background: #333; border: 1px solid #444; line-height: 28px; padding: 0 20px 0; color: #ccc; cursor: pointer;  border-radius:3px;}
.streamloadingmore {display:none; clear:both; padding:12px 0 8px; text-align:center; color:#888;}
.streamloadingmore img {display:inline-block; vertical-align:middle; margin-right:8px; width:20px; height:20px;}
.streamloadingmore span {display:inline-block; vertical-align:middle;}


.streameventsday .mbphoto, .streameventsday .mb { display:block !important; }
.streameventsday .mbphoto:nth-of-type(n+8), 
.streameventsday .mb:nth-of-type(n+8), 
.streameventsday .commbox:nth-of-type(n+5) { display: none !important; }

.streameventsday.showAll .mbphoto:nth-of-type(n+8), 
.streameventsday.showAll .mb:nth-of-type(n+8), 
.streameventsday.showAll .commbox:nth-of-type(n+5) { display: block !important; }

.tablewrapper-table {}
.tablewrapper-table th {padding:5px; background:rgba(0,0,0,0.3)}
.tablewrapper-table td {padding:5px;}
.tablewrapper-table tr td {border-bottom:1px solid rgba(0,0,0,0.3);}

.tablewrapper-table .pnldeleter {margin:0px;}

.dmca-view-notice {font-size:1.2em; margin-bottom:20px;}
.dmca-view-notice a {text-decoration:underline;}
.dmca-view-notice li { padding-top: 0px !important}

#counterNoticeDiv {display:none;font-size:1.2em;  margin-top:50px; max-width:1000px;}
#counterNoticeDiv h3 {border-bottom:1px dotted #ccc; padding-bottom:4px;}
#counterNoticeDiv label {margin:40px 0 5px 0; padding-left:3px; font-weight:bold;}
#counterNoticeDiv label.toconfirm {margin:0; padding-right:10px;  float:left; color:#ae0000;}
#dmca-counter-links label {margin:0; font-weight:normal;}
.toconfirm {margin:0px; }
#counterNoticeDiv .dmca-radiobutton input {display:inline; margin:0; font-weight:normal;}
#counterNoticeDiv .dmca-radiobutton label {display:inline; margin:0 0 20px 0; font-weight:normal;}




@media screen and (max-width:1200px) {

.tablewrapper1, .tablewrapper2{width: 100%; overflow-x: scroll; overflow-y:hidden; scrollbar-color: #b0bac6 rgba(255,255,255,0.5);}

::-webkit-scrollbar:horizontal {
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ffffff;
}
.tablewrapper1{height: 20px; margin-bottom:20px; }
.tablewrapper2{height: 100%; padding-bottom:40px;}
.twdiv1 {width:1000px; height: 20px; }
.twdiv2 {width:1000px; height: 100%; overflow: auto;}
}  





.selectAsText {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none; 
    border: none;
    /* needed for Firefox: */
    overflow:hidden;
    display: inline;
}

.EP-yellow {color: #fc0 !important; }

@media screen and (max-width:1600px) {
    #community-right-sidebar {display:none;}
    .fillerOuter.communitymain {padding-left:0px !important; float:left; width:calc(100% - 395px);}
    
    #profileschanger .psch-l {right:120px; top:20px; left: initial; z-index:10;}
    #profileschanger .psch-r {right:20px; top:20px; z-index:10;}
}    

@media screen and (min-width:850px) and (max-width:1200px) {
    #profile_sidebar { width:300px; }
    .fillerOuter { padding-left: 320px; }
    .plexcontainer .mb, .plexcontainer .mbphoto {width:100% !important; max-width:100% !important; display:block !important;}
}


/* MOBILE */
@media screen and (max-width:850px) {

#up-main-header {width:300px; height:120px;}

#up-main-header h1 {font-size:40px; line-height:40px;}
#up-main-header .h1register {font-size:16px; line-height:32px; margin:30px 0px 0px 0px; padding:0px 20px; letter-spacing:0px;}
#up-main-header span {font-size:20px;}

.fillerOuter { padding-left: 0px;}
.fillerOuter.communitymain {padding-left:0px !important; float:none; width:100%;;}

#profileschanger .psch-l {top:12px; left:10px; width:40px; height:40px; font-size:26px; padding-left: 10px; box-shadow:none;}
#profileschanger .psch-r {top:12px; right:10px; width:40px; height:40px; font-size:26px; padding-left: 14px; box-shadow:none;}


#pprofiletop {height:265px; /*215*/ overflow:hidden; background-size:100%; background-position: top center; background-color:#222;}
#pprofiletopinfo {width:100%; position: absolute; top: 70px; bottom:auto; left:140px;}

#pprofiletopinfo h1 {width:350px; height:25px; line-height:25px; font-size: 22px;}
#pprofiletopinfo h2 {margin-top:3px;}

#pprofiletophead {width:50px; margin:10px;} 
#pprofiletophead img {width:50px; height:50px;}

#pprofiletopheadinner {line-height:90px;font-size:50px;}
#pprofiletopinfo .pdrops {display:block; margin-bottom:10px; margin-right:10px; text-align:center; width:200px; line-height:40px; float:right;}

#pprofiletophead,#pprofiletopheadinner,#pprofiletophead img {width:90px; height:90px;}

#pprofiletopbtn {width:100%; float:none; bottom:10px; right:0px; opacity:0.7; text-align:center;}
#pprofiletopbtn div {margin-right:20px;}
#pprofiletopbtn div span {font-size:20px; text-align:center;}




#aboutmebig {display:none;}
#profilemobilespacer {height:65px; width:100%;}
#pnavtop {height:120px; /*60*/     background: linear-gradient(180deg, rgba(24,24,24,1) calc(50% - 0px), rgba(100,100,100,1) calc(50%), rgba(24,24,24,1) calc(50% + 1px)    );} 
#pnavtop a {width:24%;line-height:60px;}
#pnavtop a:nth-child(4) {border-right:0px !important;}
   
#pnavtop .pdrops {border-top:1px solid #3d3d3d; /*width:24%;*/}

#pnavtop .up-edit-profile-btn {position:absolute; top:10px; right:10px; width:120px; line-height:30px;}

#middler {padding-bottom:20px;}
.middlerbox {width:100%; float:none; padding-left:10px; padding-top:20px; padding-bottom:0px; margin-bottom:0px;}
.middlerbox p {display:inline-block; margin:0px; padding:0px;}
#profile_sidebar {float:none; width:100%; display:block; margin:20px 0px; min-height:50px;display:none;}
#responsive_sidebar {display:none;}
.filler {float:none; width:100%; display:block; margin:20px 0px;}


#channel-headin {height:110px;}
#channel-headin h1 {display: block; clear: both; width: 100%;}
#channel-headin div {text-align:left; float:left; margin-left:10px;}

.hdchannel .fillerOuter {padding-left:0px;}
.hdchannel #profile_sidebar {width:100%;}

#cpp-desk-ban {display:none;}
#cpp-desk-ban .channelsoc {display:block;}
#cpp-mobi-ban {display:block;}
#cpp-mobi-ban .channelsoc {display:block;}

#collectionmobelin {height:65px;}
#collectionmobelin #playlistlike {margin-left:7px;}
#collectionmobdata {}


.pbox2, .pbox3 {flex-basis:100% !important;}
.psscrol br {display: none;}

.commboxtime {text-align:left; padding-left: 11px; float:none; margin-bottom:5px;}

.pnlleftside {float:none; width:100%; min-height:500px;}
.pnlrightside {float:none; width:100%;}
.pnlleftside.avatareditpage, .pnlrightside.avatareditpage {width:100%;}
#panel-edit-tab textarea {width:95% !important;}

#panel-edit-tab label strong {text-align:left;}
.birthdatemobile {display:block !important;}
.pnlrightsideinner {margin-left:0px;}
}





@media screen and (max-width:437px) {
    #pnavtop {height:80px;}
    #pnavtop a {line-height:40px;}
    
    #pprofiletop {height: 240px;}
    #pprofiletopbtn {bottom:10px;}
    
    #pprofiletopbtn div {margin-left:5px; margin-right:5px;}
    #middler {padding-bottom: 10px; margin-bottom:10px;}
    .middlerbox  {float:left; width:50%; padding-top:10px;}
    .filler {margin-top:10px;}
    
    .streamevents .seheader {margin: -20px 20px 0px -19px;}
    .streameventsday {padding-bottom:0px;}
    
    .streamevents .commbox {display:inline-block; margin-bottom:10px;}
}








/* profile */
.epwhite #pcontent {margin-top:0px; background: #ccc; padding:20px;}

.epwhite #pprofiletop.communitymain {background:#404040;}
.epwhite #up-main-header {background-image: url("../new/commbg-white2.png"); background-color:#404040;}
.epwhite #up-main-header span {color:#ccc;}
.epwhite .up-profilebox a span {color:#f5f5f5; background:#404040; padding:3px 3px 3px 6px;}

.epwhite #community-right-sidebar {background:#999;}

.epwhite .plexcontainer {background:#eaeaea; border:1px solid #ccc; border-top:0px;}
.epwhite .pbelin {background: #dedede; border:0px; border-bottom:1px solid #ccc; border-top-left-radius:5px; border-top-right-radius:5px;}
.epwhite .profile-settings-toggle {color:#fc0;}
.epwhite .profile-settings-toggle:hover,
.epwhite .profile-settings.is-open .profile-settings-toggle {background:#333; color:#fc0;}
.epwhite .profile-settings-panel {background:#f5f5f5; border:1px solid #ccc; box-shadow:0px 12px 24px rgba(0,0,0,0.18);}
.epwhite .profile-settings-panel:before {border-color:transparent transparent #ccc transparent;}
.epwhite .profile-settings-panel:after {border-color:transparent transparent #f5f5f5 transparent;}
.epwhite .profile-settings-panel-title {color:#222; border-bottom-color:#d8d8d8;}
.epwhite .profile-settings-option-label {color:#222;}
.epwhite .profile-settings-switch-slider {background:#c5c5c5;}

.epwhite #pprofiletop {background-color:#404040;}
.epwhite #middler {background:#404040; margin-bottom:0px;}
.epwhite .headimggradient  {border-left: 10px solid #404040;
                            background-image: -webkit-linear-gradient(to right, rgba(64, 64, 64, 1), transparent);
                            background-image:    -moz-linear-gradient(to right, rgba(64, 64, 64, 1), transparent);
                            background-image:     -ms-linear-gradient(to right, rgba(64, 64, 64, 1), transparent);
                            background-image:      -o-linear-gradient(to right, rgba(64, 64, 64, 1), transparent);
                            background-image:         linear-gradient(to right, rgba(64, 64, 64, 1), transparent);
}
.epwhite .headimgshadow {
                background-image: -webkit-linear-gradient(to top, rgba(64,64,64,0.8), transparent);
                background-image:    -moz-linear-gradient(to top, rgba(64,64,64,0.8), transparent);
                background-image:     -ms-linear-gradient(to top, rgba(64,64,64,0.8), transparent);
                background-image:      -o-linear-gradient(to top, rgba(64,64,64,0.8), transparent);
                background-image:         linear-gradient(to top, rgba(64,64,64,0.8), transparent); 
}

.epwhite #middler .middlerbox {color:#999;}


.epwhite .fillerOuter.communitymain {background: #eaeaea; border-top-left-radius:5px; border-top-right-radius:5px;}
.epwhite .fillerOuter.profilemain {background:#eaeaea; border-top-left-radius:5px; border-top-right-radius:5px;}
.epwhite #toptopbelprof {background:none;background: #dedede; border:0px; border-bottom: 1px solid #ccc;}
.epwhite #toptopbelprof h2 {color:#040404;}

.epwhite .toptopbelinsetprof {color:#404040;}
.epwhite #toptopbelinprof a.active {background:#FFF; color:#ae0000;}
.epwhite #toptopbelinprof a {background:#dedede; color:#404040;}
.epwhite #toptopbelinprof a:hover {color:#404040; background:#c8c8c8;}
.epwhite .urgentinfo:before {color:#414141;}
/*.epwhite #categoriesbelin a {background:#cfcfcf; color:#404040; border-left: 1px solid #ccc;}
.epwhite #categoriesbelin a.active {background:#FFF; color:#ae0000;}
.epwhite #categoriesbelin a:hover {color:#404040; background:#c0c0c0;}
.epwhite #categories-list-left span.catname:hover {padding-left:0px;}*/

.epwhite .up-profilebox .uppbi {display:block;}

.epwhite {}
.epwhite {}
.epwhite {}
.epwhite {}
.epwhite {}

.epwhite .pnlfullsize {background:none;}
.epwhite .tdheader{background: #dedede;}
.epwhite .inp1, .epwhite .inp2 {background:#fff; color:#666;}
.epwhite .pnlleftside,
.epwhite .pnlrightside {background:none;}
.epwhite #panel-edit-tab strong {color:#666 !important;}
.epwhite #panel-edit-tab .pannelbtnylw {color:#ae0000;}

.epwhite .filler {background: #eaeaea;}
.epwhite .streameventsday {background:none; border-bottom: 1px solid #ccc;}
.epwhite .communityshowmore {background:#dedede; color:#404040;}
.epwhite .streamloadingmore {color:#666;}
.epwhite .communityshowmore:hover {background:#d8d8d8; color:#404040;}



.epwhite .seheader {border-left: 5px solid #ae0000; margin: -20px 20px 20px -20px;}

.epwhite .seheader a h2,
.epwhite .seaction,
.epwhite .pbelin.plister h2,
.epwhite .profile-icon-usercircle:before
{color:#404040;}



.epwhite .channelsoc i {color:#000;}

.photosgrid .boxmessageclosedel { left:auto; right:5px; }

.mb-placeholder,
.mb-placeholder * { cursor:default !important; }
.mb-placeholder .mb-placeholder-img { background:#1a1a1a; width:100%; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; border:1px solid #333; box-sizing:border-box; }
.mb-placeholder .mb-status-label { color:#999; font-size:11px; text-transform:uppercase; }
.mb-placeholder.mb-removed .mb-status-label { color:#c33; }
.mb-placeholder.mb-failed .mb-status-label { color:#c33; }
.mb-placeholder.mb-processing .mb-status-label { color:#888; }
.mb-placeholder .mbtit { opacity:0.5; }
.mb-placeholder .mbstats { opacity:0.5; }
.mb-placeholder .mbtitphoto { opacity:0.5; }
.mb-placeholder .mbtimphoto { opacity:0.5; }
.mb-placeholder .mbviephoto { opacity:0.5; }

/* owner upload processing modal */
.uploaded-videos-owner .js-upload-progress-placeholder,
.uploaded-videos-owner .js-upload-progress-placeholder * {cursor:pointer !important;}
.uploaded-videos-owner .upload-progress-badge {position:absolute; top:5px; left:69px; z-index:13; display:flex; align-items:center; justify-content:center; width:27px; height:27px; padding:0px; border:1px solid rgba(255,255,255,0.45); border-radius:50%; background:rgba(20,20,20,0.9); box-sizing:border-box; cursor:pointer !important; box-shadow:0px 1px 5px rgba(0,0,0,0.65);}
.uploaded-videos-owner .upload-progress-badge:before {content:""; width:13px; height:13px; border:2px solid #777; border-top-color:#fc0; border-radius:50%; box-sizing:border-box; animation:upload-progress-badge-spin 0.9s linear infinite;}
.uploaded-videos-owner .upload-progress-badge:hover {background:#ae0000; border-color:#fff;}
.uploaded-videos-owner .upload-progress-badge:focus-visible {outline:2px solid #fc0; outline-offset:2px;}
@keyframes upload-progress-badge-spin {to {transform:rotate(360deg);}}
#EPmodal-container.upload-progress-container {width:calc(100vw - 24px); max-width:760px; margin-top:4vh; max-height:92vh;}
.upload-progress-modal {width:100%; max-height:92vh; overflow-y:auto; box-sizing:border-box; background:#202020; color:#ddd; border-radius:7px; box-shadow:0px 18px 55px rgba(0,0,0,0.55); scrollbar-width:thin; scrollbar-color:#ae0000 transparent;}
.upload-progress-head {position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 22px; background:#292929; border-bottom:1px solid #3a3a3a;}
.upload-progress-head-main {min-width:0;}
.upload-progress-head-actions {flex:0 0 auto; display:flex; align-items:center; gap:10px;}
.upload-progress-btn.upload-progress-upload-another {display:inline-flex; align-items:center; min-height:40px; padding:8px 12px; box-sizing:border-box; line-height:1.2; white-space:nowrap;}
.upload-progress-kickrow {display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px;}
.upload-progress-head h2 {margin:3px 0px 0px; color:#fff; font-size:21px; line-height:1.25; overflow-wrap:anywhere;}
.upload-progress-kicker {display:block; color:#fc0; font-size:10px; font-weight:bold; letter-spacing:0.1em; text-transform:uppercase;}
.upload-progress-chip {display:inline-flex; align-items:center; gap:6px; padding:2px 9px; border:1px solid #555; border-radius:999px; color:#bbb; font-size:10px; font-weight:bold; letter-spacing:0.07em; text-transform:uppercase;}
.upload-progress-chip i {flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:currentColor;}
.upload-progress-chip.is-processing {color:#e2b93b; border-color:#8a6d1f; background:#332a10;}
.upload-progress-chip.is-processing i {animation:upload-progress-pulse 1.4s ease-in-out infinite;}
.upload-progress-chip.is-done {color:#b9e8c7; border-color:#285c3a; background:#20392a;}
.upload-progress-chip.is-failed {color:#ffd1d1; border-color:#863333; background:#441d1d;}
.upload-progress-chip.is-off {color:#aaa; border-color:#555; background:#2a2a2a;}
.upload-progress-live {display:inline-flex; align-items:center; gap:5px; color:#888; font-size:10px; letter-spacing:0.05em; text-transform:uppercase;}
.upload-progress-live i {flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:#3a9c59; animation:upload-progress-pulse 1.4s ease-in-out infinite;}
@keyframes upload-progress-pulse {0%, 100% {opacity:1;} 50% {opacity:0.25;}}
.upload-progress-close {flex:0 0 auto; width:34px; height:34px; padding:0px; border:0px; border-radius:50%; background:#3a3a3a; color:#ddd; font-size:26px; line-height:30px; cursor:pointer;}
.upload-progress-close:hover {background:#ae0000; color:#fff;}
.upload-progress-close:focus-visible, .upload-progress-thumb:focus-visible, .upload-progress-btn:focus-visible {outline:2px solid #fc0; outline-offset:2px;}
.upload-progress-body {padding:20px 22px 24px;}
.upload-progress-stage {margin:0px 0px 16px; color:#fff; font-size:15px; line-height:1.45;}
.upload-progress-error {margin:0px 0px 16px; padding:10px 12px; border:1px solid #863333; border-radius:4px; background:#441d1d; color:#ffd1d1; line-height:1.4;}
.upload-progress-net {display:flex; align-items:center; gap:10px; margin:0px 0px 16px; padding:10px 12px; border:1px solid #8a6d1f; border-radius:4px; background:#332a10; color:#ffe9ad; font-size:13px; line-height:1.4;}
.upload-progress-spin {flex:0 0 auto; width:14px; height:14px; border:2px solid transparent; border-top-color:currentColor; border-left-color:currentColor; border-radius:50%; animation:upload-progress-badge-spin 0.8s linear infinite;}
.upload-progress-result {display:flex; align-items:flex-start; gap:14px; margin:0px 0px 18px; padding:16px; border:1px solid #363636; border-radius:6px;}
.upload-progress-result.is-success {background:#20392a; border-color:#285c3a;}
.upload-progress-result.is-error {background:#441d1d; border-color:#863333;}
.upload-progress-result.is-off {background:#2a2a2a; border-color:#484848;}
.upload-progress-result-icon {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:#666; color:#fff; font-size:18px; font-weight:bold;}
.upload-progress-result.is-success .upload-progress-result-icon {background:#3a9c59;}
.upload-progress-result.is-error .upload-progress-result-icon {background:#c04545;}
.upload-progress-result-text {min-width:0;}
.upload-progress-result-text h3 {margin:1px 0px 4px; color:#fff; font-size:16px; line-height:1.3;}
.upload-progress-result-text p {margin:0px; font-size:13px; line-height:1.5;}
.upload-progress-result.is-success h3, .upload-progress-result.is-success p {color:#b9e8c7;}
.upload-progress-result.is-error h3, .upload-progress-result.is-error p {color:#ffd1d1;}
.upload-progress-result.is-off h3, .upload-progress-result.is-off p {color:#bbb;}
.upload-progress-result-warning {margin-top:8px !important; padding-top:8px; border-top:1px dashed #285c3a; color:#ffe9ad !important;}
.upload-progress-result-cta {margin-top:12px;}
.upload-progress-btn {display:inline-block; padding:8px 16px; border:0px; border-radius:4px; background:#ae0000; color:#fff !important; font-size:13px; font-weight:bold; text-decoration:none; cursor:pointer;}
.upload-progress-btn:hover {background:#c60000; text-decoration:none;}
.upload-progress-milestones {display:flex; margin:0px 0px 6px; padding:0px; list-style:none;}
.upload-progress-milestones li {flex:1; min-width:0; position:relative; padding-top:2px; text-align:center;}
.upload-progress-milestones li:before {content:""; position:absolute; top:14px; left:-50%; width:100%; height:2px; background:#3a3a3a;}
.upload-progress-milestones li:first-child:before {display:none;}
.upload-progress-milestones li.is-done:before {background:#3a9c59;}
.upload-progress-milestone-dot {position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:26px; height:26px; margin:0px auto 6px; border:2px solid #555; border-radius:50%; background:#202020; color:#fff; font-size:13px; font-weight:bold; box-sizing:border-box;}
.upload-progress-milestones .is-done .upload-progress-milestone-dot {border-color:#3a9c59; background:#3a9c59;}
.upload-progress-milestones .is-active .upload-progress-milestone-dot {border-color:#fc0;}
.upload-progress-milestones .is-active .upload-progress-milestone-dot:after {content:""; width:10px; height:10px; border-radius:50%; background:#fc0; animation:upload-progress-pulse 1.2s ease-in-out infinite;}
.upload-progress-milestone-label {display:block; padding:0px 3px; color:#888; font-size:10px; line-height:1.25;}
.upload-progress-milestones .is-done .upload-progress-milestone-label {color:#b9e8c7;}
.upload-progress-milestones .is-active .upload-progress-milestone-label {color:#fff; font-weight:bold;}
.upload-progress-milestones.has-failure {opacity:0.5;}
.upload-progress-section {margin-top:14px; padding:14px; border:1px solid #363636; border-radius:5px; background:#262626;}
.upload-progress-section-head {display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; color:#999; font-size:12px;}
.upload-progress-section-head strong {display:flex; align-items:center; color:#eee; font-size:13px;}
.upload-progress-now {display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:8px;}
.upload-progress-now-task {color:#fff; font-size:14px; font-weight:bold;}
.upload-progress-now-task small {color:#999; font-size:11.5px; font-weight:normal;}
.upload-progress-now-pct {color:#fff; font-size:20px; font-weight:bold; font-variant-numeric:tabular-nums; white-space:nowrap;}
.upload-progress-now-pct small {color:#999; font-size:12px; font-weight:normal;}
.upload-progress-bar {height:10px; overflow:hidden; border-radius:20px; background:#111;}
.upload-progress-bar span {display:block; height:100%; min-width:2px; border-radius:20px; background:#ae0000; transition:width 0.3s ease;}
.upload-progress-bar.is-indeterminate span {background:linear-gradient(90deg, transparent, #d13636, transparent); animation:upload-progress-indeterminate 1.3s ease-in-out infinite alternate;}
@keyframes upload-progress-indeterminate {from {transform:translateX(-100%);} to {transform:translateX(280%);}}
.upload-progress-qualities {margin:0px; padding:0px; list-style:none;}
.upload-progress-qualities li {padding:8px 3px; border-top:1px solid #333;}
.upload-progress-qualities li:first-child {border-top:0px;}
.upload-progress-quality-row {display:flex; align-items:center; justify-content:space-between; gap:15px;}
.upload-progress-qualities strong {color:#eee; font-size:13.5px;}
.upload-progress-pill {display:inline-flex; align-items:center; gap:6px; padding:2px 9px; border:1px solid #404040; border-radius:10px; color:#999; font-size:10.5px; font-variant-numeric:tabular-nums;}
.upload-progress-pill i {flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:currentColor;}
.upload-progress-pill.is-ready {color:#b9e8c7; border-color:#285c3a; background:#20392a;}
.upload-progress-pill.is-active {color:#ffe9ad; border-color:#8a6d1f; background:#332a10;}
.upload-progress-pill.is-active i {animation:upload-progress-pulse 1.2s ease-in-out infinite;}
.upload-progress-pill.is-sync {color:#6ea8dc;}
.upload-progress-pill.is-failed {color:#ffd1d1; border-color:#863333; background:#441d1d;}
.upload-progress-quality-bar {height:3px; margin-top:7px; overflow:hidden; border-radius:4px; background:#111;}
.upload-progress-quality-bar span {display:block; height:100%; border-radius:4px; background:#e2b93b; transition:width 0.3s ease;}
.upload-progress-preview {border-color:#285c3a;}
.upload-progress-okdot {display:inline-block; flex:0 0 auto; width:8px; height:8px; margin-right:6px; border-radius:50%; background:#3a9c59;}
.upload-progress-qpill {padding:2px 8px; border:1px solid #404040; border-radius:10px; color:#ccc; font-size:10.5px;}
.upload-progress-preview video {display:block; width:100%; max-height:390px; background:#111; border-radius:4px;}
.upload-progress-preview p {margin:10px 0px 0px; color:#aaa; font-size:12.5px; line-height:1.45;}
.upload-progress-preview .upload-progress-btn {margin-top:12px;}
.upload-progress-thumbs-hint {margin:-4px 0px 10px; color:#888; font-size:11.5px;}
.upload-progress-thumbs {display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px;}
.upload-progress-thumb {position:relative; min-width:0; padding:0px; overflow:hidden; border:2px solid transparent; border-radius:4px; background:#111; color:#fff; cursor:pointer;}
.upload-progress-thumb:hover {border-color:#888;}
.upload-progress-thumb:hover img {filter:brightness(1.12);}
.upload-progress-thumb.is-selected {border-color:#fc0;}
.upload-progress-thumb:disabled {cursor:wait;}
.upload-progress-thumb img {display:block; width:100%; aspect-ratio:16/9; object-fit:cover;}
.upload-progress-thumb-check {position:absolute; top:4px; right:4px; display:none; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:#fc0; color:#161616; font-size:11px; font-weight:bold;}
.upload-progress-thumb.is-selected .upload-progress-thumb-check {display:flex;}
.upload-progress-thumb-saving {position:absolute; top:0px; right:0px; bottom:0px; left:0px; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.55);}
.upload-progress-thumb.is-saving .upload-progress-thumb-saving {display:flex;}
.upload-progress-thumb-saving:after {content:""; width:18px; height:18px; border:3px solid transparent; border-top-color:#fff; border-left-color:#fff; border-radius:50%; animation:upload-progress-badge-spin 0.8s linear infinite;}
#upload-progress-thumb-message.is-saved {color:#78ca91;}
#upload-progress-thumb-message.is-error {color:#ef8585;}
.epwhite .upload-progress-modal {background:#f4f4f4; color:#333;}
.epwhite .upload-progress-head {background:#e5e5e5; border-bottom-color:#ccc;}
.epwhite .upload-progress-head h2,
.epwhite .upload-progress-stage,
.epwhite .upload-progress-section-head strong,
.epwhite .upload-progress-now-task,
.epwhite .upload-progress-now-pct,
.epwhite .upload-progress-qualities strong {color:#222;}
.epwhite .upload-progress-kicker {color:#9a7b00;}
.epwhite .upload-progress-close {background:#d5d5d5; color:#444;}
.epwhite .upload-progress-close:hover {background:#ae0000; color:#fff;}
.epwhite .upload-progress-section {background:#fff; border-color:#d2d2d2;}
.epwhite .upload-progress-preview {border-color:#9bc9a9;}
.epwhite .upload-progress-chip {border-color:#bbb; color:#666;}
.epwhite .upload-progress-chip.is-processing {color:#7a5c10; border-color:#e0c26a; background:#fff6dd;}
.epwhite .upload-progress-chip.is-done {color:#22593a; border-color:#9bc9a9; background:#e1f3e7;}
.epwhite .upload-progress-chip.is-failed {color:#8f2323; border-color:#e3a5a5; background:#fdecec;}
.epwhite .upload-progress-chip.is-off {color:#666; border-color:#bbb; background:#eee;}
.epwhite .upload-progress-net {background:#fff6dd; border-color:#e0c26a; color:#7a5c10;}
.epwhite .upload-progress-error {background:#fdecec; border-color:#e3a5a5; color:#8f2323;}
.epwhite .upload-progress-result.is-success {background:#e1f3e7; border-color:#9bc9a9;}
.epwhite .upload-progress-result.is-success h3, .epwhite .upload-progress-result.is-success p {color:#22593a;}
.epwhite .upload-progress-result.is-error {background:#fdecec; border-color:#e3a5a5;}
.epwhite .upload-progress-result.is-error h3, .epwhite .upload-progress-result.is-error p {color:#8f2323;}
.epwhite .upload-progress-result.is-off {background:#eee; border-color:#ccc;}
.epwhite .upload-progress-result.is-off h3, .epwhite .upload-progress-result.is-off p {color:#555;}
.epwhite .upload-progress-result-warning {border-top-color:#9bc9a9; color:#7a5c10 !important;}
.epwhite .upload-progress-milestones li:before {background:#d2d2d2;}
.epwhite .upload-progress-milestones li.is-done:before {background:#2e8a4d;}
.epwhite .upload-progress-milestone-dot {background:#f4f4f4; border-color:#bbb;}
.epwhite .upload-progress-milestones .is-done .upload-progress-milestone-dot {border-color:#2e8a4d; background:#2e8a4d;}
.epwhite .upload-progress-milestones .is-active .upload-progress-milestone-dot {border-color:#c79a00;}
.epwhite .upload-progress-milestones .is-active .upload-progress-milestone-dot:after {background:#c79a00;}
.epwhite .upload-progress-milestone-label {color:#777;}
.epwhite .upload-progress-milestones .is-done .upload-progress-milestone-label {color:#22593a;}
.epwhite .upload-progress-milestones .is-active .upload-progress-milestone-label {color:#222;}
.epwhite .upload-progress-bar, .epwhite .upload-progress-quality-bar {background:#ddd;}
.epwhite .upload-progress-qualities li {border-color:#ddd;}
.epwhite .upload-progress-pill {border-color:#ccc; color:#777;}
.epwhite .upload-progress-pill.is-ready {color:#22593a; border-color:#9bc9a9; background:#e1f3e7;}
.epwhite .upload-progress-pill.is-active {color:#7a5c10; border-color:#e0c26a; background:#fff6dd;}
.epwhite .upload-progress-pill.is-sync {color:#3d6fa8;}
.epwhite .upload-progress-pill.is-failed {color:#8f2323; border-color:#e3a5a5; background:#fdecec;}
.epwhite .upload-progress-preview p {color:#666;}
.epwhite .upload-progress-qpill {border-color:#ccc; color:#555;}
.epwhite .upload-progress-thumbs-hint {color:#777;}
.epwhite .upload-progress-thumb.is-selected {border-color:#c79a00;}
.epwhite .upload-progress-thumb-check {background:#c79a00; color:#fff;}
.epwhite #upload-progress-thumb-message.is-saved {color:#2e8a4d;}
.epwhite #upload-progress-thumb-message.is-error {color:#c33;}
@media screen and (max-width:700px) {
    #EPmodal-container.upload-progress-container {width:calc(100vw - 12px); margin-top:1vh; max-height:98vh;}
    .upload-progress-modal {max-height:98vh;}
    .upload-progress-head {align-items:flex-start; flex-wrap:wrap; gap:8px; padding:12px 15px;}
    .upload-progress-head-main {flex:1 1 100%;}
    .upload-progress-head-actions {width:100%; justify-content:space-between; gap:6px;}
    .upload-progress-btn.upload-progress-upload-another {padding:7px 9px; font-size:12px;}
    .upload-progress-head h2 {font-size:18px;}
    .upload-progress-body {padding:15px;}
    .upload-progress-milestone-dot {width:22px; height:22px; font-size:11px;}
    .upload-progress-milestones li:before {top:12px;}
    .upload-progress-milestone-label {font-size:9px;}
    .upload-progress-now-pct {font-size:17px;}
    .upload-progress-thumbs {grid-template-columns:repeat(3, minmax(0, 1fr));}
}
@media (prefers-reduced-motion: reduce) {
    .uploaded-videos-owner .upload-progress-badge:before,
    .upload-progress-chip.is-processing i,
    .upload-progress-live i,
    .upload-progress-milestones .is-active .upload-progress-milestone-dot:after,
    .upload-progress-pill.is-active i,
    .upload-progress-bar.is-indeterminate span,
    .upload-progress-spin,
    .upload-progress-thumb-saving:after {animation:none;}
    .upload-progress-bar span, .upload-progress-quality-bar span {transition:none;}
}

/* resend-email control: a submit button (POST+CSRF) that must render like the plain links around it */
.linkbtn {background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;}

/* subscriptions panel, playlist section. The two sections above it carry the same jump-link margin and
   the same two column widths inline; these are the class versions, so the newer section does not add
   more of what AGENTS.md forbids. .sub-unavailable marks a favourite the profile tab cannot show
   (playlist went private/empty, or its owner went hidden/banned/removed): the row stays, because this
   panel is the only place it can be removed from, muted so it reads as an explanation not a broken row */
.vidresultstable td.subs-num {width:30px;}
.vidresultstable td.subs-name {width:40ch;}
.sub-unavailable {color:#777;}
/* the datetime breaks after its hyphens in a narrow column and every row inherits that height;
   the overflow-x below absorbs the width this costs */
.vidresultstable td.subs-date {white-space:nowrap;}
/* on a phone each table scrolls in its own box instead of pushing the whole document sideways.
   Scoped: `.vidresultstable` is shared with pages laying two tables out side by side */
.subs-section .vidresultstable {overflow-x:auto;}
/* width:1% pins the action column to its content instead of letting it absorb the table's slack */
.vidresultstable td.subs-act {width:1%;white-space:nowrap;}
/* the button deletes something, so it says so before the confirm box */
.subs-section td.subs-act button:hover,.subs-section td.subs-act button:focus-visible {background:#c8001e;border-color:#c8001e;color:#fff;}

/* subscriptions panel pager: `.numlist2` (style.css:667) rescaled from the video listings to these
   text tables, keeping the BACK/NEXT pseudo-elements and current-page styling. Flex, not
   inline-block: the bar wraps (even at 900px, next to the sidebar), and spacing must come from `gap`
   — a margin is kept at the start of a wrapped line, a gap is not, which is what indented the
   chooser under the numbers */
.numlist2.subs-pager {display:inline-flex;flex-wrap:wrap;align-items:center;column-gap:4px;row-gap:4px;min-width:0;width:auto;height:auto;line-height:1.6;font-size:1.15em;border:0;background:none;padding:0;margin:6px 0 2px;text-align:left;}
/* every cell is one box of the same metrics; padding lives on the OUTER box only — padding both
   the <a> and its inner <span> made the current page narrower than a link and the strip re-flowed
   under the cursor on every page change */
.numlist2.subs-pager a,.numlist2.subs-pager .nmhere,.numlist2.subs-pager .subs-pager-off,.subs-rowsel a,.subs-rowsel .nmhere,.subs-nav a {display:inline-block;min-width:1.5em;margin-right:4px;padding:2px 6px;line-height:1.6;border-radius:2px;text-align:center;vertical-align:middle;}
.numlist2.subs-pager a span,.numlist2.subs-pager .nmhere span,.numlist2.subs-pager .subs-pager-off span,.subs-rowsel a span,.subs-rowsel .nmhere span,.subs-nav a span {padding:0;}
/* the end a pager cannot go to: present so the strip keeps its width, visibly inert */
.numlist2.subs-pager .subs-pager-off {background:#1c1c1c;color:#555;cursor:default;}
.numlist2.subs-pager .nmhere,.subs-rowsel .nmhere {background:#c8001e;color:#fff;}
.numlist2.subs-pager .nmback:before,.numlist2.subs-pager .nmnext:after {font-size:15px;}
/* the ellipsis slots: present on every page so the strip keeps its width as the window slides,
   showing a gap character only where pages are actually skipped */
.numlist2.subs-pager .subs-pager-gap {display:inline-block;min-width:1.2em;margin-right:4px;padding:2px 2px;text-align:center;color:#555;}
/* the flex gap owns the spacing; these margins would stack with it. Ties the two rules above on
   specificity, so ORDER decides — placed before them this rule silently does nothing. Child
   combinator on purpose: the shared rule also styles `.subs-nav a`, which keeps its margin */
.numlist2.subs-pager > a,.numlist2.subs-pager > .nmhere,.numlist2.subs-pager > .subs-pager-off,.numlist2.subs-pager > .subs-pager-gap {margin-right:0;}
/* per-section rows-per-page chooser, styled as one more cell of the pager's family. Scoped through
   the bar: `.numlist2 span {padding:5px 10px}` (style.css:670) otherwise wins over a bare
   `.subs-rowsel` */
.numlist2.subs-pager .subs-rowsel {display:inline-block;position:relative;margin-left:0;padding:2px 19px 2px 7px;white-space:nowrap;vertical-align:middle;background:#333;border-radius:2px;color:#888;line-height:1.6;}
/* `#panel-edit-tab label {display:block}` lives in this very file and wins on specificity (1,0,1 vs
   0,1,1), which put the caption on its own line above the select. The id has to be in the selector. */
#panel-edit-tab .subs-rowsel label {display:inline;vertical-align:middle;font-size:0.7em;text-transform:uppercase;letter-spacing:0.3px;cursor:pointer;pointer-events:none;}
/* the invisible select covers the WHOLE cell — sized to its own content it left the caption and
   caret dead to a click */
.numlist2.subs-pager .subs-rowsel select {position:absolute;left:0;top:0;width:100%;height:100%;margin:0;padding:0;opacity:0;border:0;cursor:pointer;font:inherit;}
/* padding zeroed: `.numlist2 span` (style.css:670) matches this span too */
.numlist2.subs-pager .subs-rowsel-val {margin-left:5px;padding:0;color:#ccc;}
.numlist2.subs-pager .subs-rowsel select option {background:#333;color:#ccc;}
.numlist2.subs-pager .subs-rowsel:after {content:'';position:absolute;right:7px;top:50%;margin-top:-2px;border:4px solid transparent;border-top-color:#888;pointer-events:none;}
.numlist2.subs-pager .subs-rowsel:hover {color:#aaa;}
.numlist2.subs-pager .subs-rowsel:hover:after {border-top-color:#aaa;}

/* section nav: borrows the pager's cell metrics (grouped selector above) but is deliberately NOT
   `.numlist2` — that class drags its own font/padding/border rules from style.css. 18px bottom
   margin sits between the panel's other two gaps (heading-to-table 15px, section-to-section 24px) */
.subs-nav {margin:0 0 18px;font-size:1.05em;}
.subs-nav a {background:#333;color:#999;}
.subs-nav a:hover {color:#ccc;}
.subs-nav b {margin-left:5px;color:#ccc;font-weight:normal;}


.subs-section + .subs-section {margin-top:24px;}
/* first section only. Both selectors needed: the nav is not rendered when only one section has rows */
.subs-section:first-child h3,.subs-nav + .subs-section h3 {margin-top:0;}

/* filler rows padding a short last page: the hidden button is what holds the real row height */
.vidresultstable tr.subs-filler td {color:transparent;}
.vidresultstable tr.subs-filler button {visibility:hidden;}

/* below 560px the full nine-cell strip stops fitting: drop the outermost window numbers. Selectors
   must out-specify `.numlist2.subs-pager a` or they silently do nothing. The PHP side guarantees a
   hidden number always sits under an ellipsis (subs-pager.php, $pagerDist) */
@media screen and (max-width:560px) {
    .numlist2.subs-pager .subs-pager-d2,.numlist2.subs-pager .subs-pager-d3 {display:none;}
}
/* below 400px drop one more pair, so the number run stays whole and only the chooser wraps */
@media screen and (max-width:400px) {
    .numlist2.subs-pager .subs-pager-d1 {display:none;}
}

/* /my/edit-preferences/: label left, control flush right, so the checkboxes and the select share one edge in
   every section and at every width; per-table auto layout gave each section its own column break */
.prefs-rows {width:100%; max-width:500px;} /* over the markup's width="500": on a phone the panel is ~350px and a 500px table pushed the controls off-screen */
.prefs-rows td {padding:3px 0;}
.prefs-rows td:first-child {width:100%; padding-right:12px;}
.prefs-rows td:last-child {text-align:right; white-space:nowrap;}
/* the excluded-categories grid: as many columns as the panel fits (6 on desktop, 2 on a phone) */
.prefs-cats {display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:6px 12px; max-width:1000px;}
.prefs-cats label {white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.profile-field-error { display: block; color: #ef8686; font-size: 12px; margin: 4px 0; }
.profile-field-error:empty { display: none; }
[data-profile-edit] [aria-invalid="true"] { border-color: #ef8686; }
[data-profile-counter].is-over-limit { color: #ef8686; }
.profile-edit-help { margin-bottom: 12px; }
.profile-about-text { white-space: pre-line; }
.epwhite .profile-field-error, .epwhite [data-profile-counter].is-over-limit { color: #a71919; }