/* Clear anything stylish, keep functionality */


.scoreboard-row {
	/*text-align: right;*/
	/*line-height:40px;*/
	line-height:12px;
	width:240px;
	white-space: nowrap;
	vertical-align: middle;

	display: table;
	height: 40px;
	overflow: hidden;
}

.username-td{
	padding:0;
}

.rank-td{
	line-height:11px;
}

/*
.scoreboard-row td {
	line-height:40px;
	height:40px;
}

.scoreboard-row tr {
	line-height:40px;
	height:40px;
}
*/


.utc-cell {
    /*line-height:15px;*/
}

.replay-cell{
	line-height:40px;
	text-align:center;
}

.replay-cell *{
	-webkit-text-fill-color: currentcolor;
	-webkit-background-clip: border-box;
	background-color: transparent;
}

.achievement-cell img{
	width:16px;
	height:16px;
	padding:2px;
}



.add-sig-cell {
	width:400px;
	height:40px;
	background-color:black;
	cursor:pointer;
	border-radius: 10px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.add-profile-pic-cell {
	width:40px;
	height:40px;
	max-width:40px;
	max-height:40px;
	background-color:black !important;
	cursor:pointer;
	border-radius: 10px;
	text-align: center;
	/*display: inline-block;*/
	align-items: center;
	justify-content: center;
	position: relative;
	display:flex; line-height:0;
	padding:0 !important;
}

.vertical-center, .add-pic-plus {
  margin: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%) translateX(-50%);
}

.score-profile-pic {
	width: 40px;
	height: 40px;
	border-radius: 10px;
}

.username-container {
	word-break:break-all;
	white-space: normal;
	width:175px;
	max-width:175px;
	/*display: table-cell;*/ vertical-align: middle;
	display:inline-block;
	max-height: 40px;
}

/* align pic contents to top of container */
.profile-pic-container {
	width:40px;
	display: table-cell; vertical-align: middle;
}





.new-username-wrapper {
	display: flex;
	align-items: center;
	height: 40px;  /* Set a fixed height for the wrapper */
	max-height:40px;
}

.new-username-container {
	width: 200px;
	height: 40px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	box-sizing: border-box;
}

.new-username-content {
	word-break: break-all;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	/*text-align: right;*/
	/*width: 100%;*/
	padding: 0;
	margin: 0;
	line-height: 20px;  /* Note this has to go precisely into 40 or we get weirdness on Chrome / Edge */
	max-height: 40px;
}


.new-username-profile-pic, pgbt-user-add-pfp {
	width: 40px;
	height: 40px;
	max-height: 40px;
	flex: 0 0 40px;
	/* NOTE: the following are essential to preventing the scrollbar from appearing... */
	padding:0; display:flex; line-height:0;
	margin: 0px 0px 0px 4px;
}

.new-username-profile-pic a {
	margin:0; padding:0; display:flex; line-height:0;
}


.score-badges-container {
	width: 40px;
	height: 40px;
	max-width:40px !important;
	max-height:40px !important;
	overflow:clip;
	flex: 0 0 40px;
	line-height:13px;
	display: grid;
	grid-template-columns: 13px 13px 13px;
	grid-gap: 0px;
	align-items: start; /* Stack grid items at the top of their cell */
	justify-items: start;
	border-left:2px solid #ffffff22;
	border-right:2px solid #ffffff22;
	/* container bounds take care of other borders */
	border-top:0;
	border-bottom:0;
	align-content: start; 
	grid-auto-rows: 13px;
}

.score-badges-container * {
	all: unset;
}


.badge-board-placeholder {
	width: 40px;
	height: 40px;
}

.score-badge, .pgb-score-badge, .score-badge-link, .score-badge-container {
	width:13px;
	height:13px;
	line-height:0; /*13px;*/
	display:inline-block;
	padding:0;
	margin:0;
	cursor:pointer;
}



.badge-overlay-text{
	position:absolute;
	left:0;
	top:0;
	color:white;
	font-size:0.8em;
	line-height:0.7;
	pointer-events:none;
	white-space:pre;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}





.wrapper {

}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}


.level-selector, .version-selector {
	width: 200px;
	padding-left:8px;
	padding-top:8px;
}

#advanced-filters-panel label,
#advanced-filters-panel input[type="checkbox"],
#advanced-filters-panel input[type="range"] {
    cursor: pointer;
}

 #advanced-filters-panel{
	 border:2px solid black;
	 background:white;
	 padding:20px;
	 margin-bottom:20px;
	 border-radius:10px;
	 max-width:900px;
 }




 /* new stuff for paginated board */
.pgb-cell, .pgb-header {
	/* is a fixed size no matter what. doesn't allow contents to stretch it, will scroll vertical if it does */
	max-width:100px;
	max-height:40px;
	min-height:40px;
	overflow-x:clip;
	overflow-y:auto;
	display:inline-flex;

	padding:0;
	margin:0;

	justify-content: center;
  	align-items: center;
}


.pgb-cell-simple {
	max-width:100px;
	max-height:40px;
	min-height:40px;
	overflow-x:clip;
	overflow-y:clip;
	display:inline-flex;
	margin:0;
	padding:4px;   /* to keep alignment consistent with the headers */
}


/*
.pgb-header {
	min-height:24px;
}
*/
/* actually for now im gonna use pgb-header to source row size?? */


/* put a div in the header for easier centering */
/*
.pgb-header div, .pgb-cell div {
	width:100%;
	height:100%;
  	text-align: center;
}
*/
/* this seemed a bit too broad */
.pgb-innerdiv {
	width:100%;
	height:100%;
  	text-align: center;
}


.pgb-header {
	font-weight: bold;
	/*font-style: italic;*/
}

/* border that could go around the entire chart */
.pgb-border {
	border-radius: 10px;
	border-width: 4px;
	border-style: solid;
	border-color: rgba(255, 255, 255, 0.1);
}


/* rounded box bg */
.pgb-bg1, .pgb-rowstyle1 .pgb-cell {
	background-color: rgba(255, 255, 255, 0.1);
	/*border-radius : 10px;*/

	/*margin:2px;*/
	/*padding: 2px 4px;*/
}

/* for some reason lumping rowstyle1 here makes everything line up, probably
looks nicer too, not gonna poke it anymore?? */
/* rounded border bg */
.pgb-bg2, .pgb-rowstyle1 .pgb-cell, .pgb-rowstyle2 .pgb-cell {
	/*border-radius: 10px;*/
	border-width: 4px;
	border-style: solid;
	border-color: rgba(255, 255, 255, 0.1);
}







.pgb-nobg {
	padding:4px;   /* to keep alignment consistent with the headers */
}

/* width for various elements, reused for headers and contents */
.pgb-banner {
	width:410px;
	max-width:410px;
	min-width:410px;
}

.pgb-rank, .pgb-submissions {
	width:85px;
	max-width:85px;
	min-width:85px;
}

.pgb-username {
	width:284px;
	max-width:284px !important;
	min-width:284px;
	padding:0;
}

.new-username-wrapper {
	width:284px;
	max-width:284px;
}

.pgb-score a, .pgb-banner a, .pgb-rank a {
	text-decoration: none;
}




.pgb-runtime, .pgb-subscore, .pgb-score {
	width:85px;
	max-width:85px;
	min-width:85px;
}

.pgb-achievements{
	width:300px;
	max-width:300px;
	min-width:300px;
}

.pgb-achievements img {
	width:16px;
	height:16px;
}

.pgb-utc, .pgb-playtime {
	width:100px;
	max-width:100px;
	min-width:100px;
	/*line-height:11px;*/
}

/* useful for span elements to make them legible against the BG */
/*
.legible, .icon-descriptor, .pgb-header span {
	padding:4px 8px;
	border-radius:4px;
	background-color:rgba(0.0,0.0,0.0,0.75);
}
*/

/* goes under an icon to describe what it is, probably isn't needed on desktop where alt text can be displayed.
 Needs to be inside display:inline-block; position:relative */
.icon-descriptor {
	z-index:-1; position:absolute; bottom:-5px; left:0; right:0; text-align:center; font-size:x-small; padding:0; display:block;
}







/*.pgb-header span {   !* make it a little blue to stand out more? *!*/
/*	background-color:rgba(0, 0, 64, 0.75);*/
/*}*/

.pgb-header {
	background-color:rgba(0, 0, 64, 0.1);
}

.pgb-badge-span{
	position:relative;
	display:inline-block
}

.pgb-rowstyle1 .pgb-cell {
	/*padding-bottom:6px;*/
}   /* tweak for style 1 rows */

.pgb-header-container {
	width: fit-content;
	margin-left:auto;
	margin-right:auto;
}

.pgb-scroll-container {
	margin-left:auto;
	margin-right:auto;
	overflow-x:clip;
}

/* Make ALL cells use flex with the same alignment. This seems to fix bizarre CSS issues
 where the vertical alignment of rows gets all jacked up from adding an image, etc
 */
.pgb-cell, .pgb-cell-simple, .pgb-header {
    display: inline-flex !important;
    align-items: center !important;  /* This is key - center vertically */
    vertical-align: middle !important;  /* For inline-block alignment */
}





.scoreboard-username {
	text-decoration: none;
	text-decoration-line: none;
	-webkit-text-decoration-line: none;
	font-size:large;
}


/* for when they have a custom user page, style their name slightly different  */
.scoreboard-username-custom {
	text-decoration: underline;
	text-decoration-line: underline;
	-webkit-text-decoration-line: underline;
	text-decoration-thickness : 2px;
	text-decoration-skip-ink:none;
	text-underline-offset: 2px;
	font-size:large;
}



