.ui-popup:has(.profile_SB) { padding: 4em 6em; }

.profile_SB { --theme-rgb: 204, 102, 204; --theme-col: rgb(var(--theme-rgb));
    height: 100%; /*box-sizing: border-box; border: 6em transparent solid;
    border-width: 4.5em 6em;*/
    display: flex; flex-flow: column; place-content: stretch; gap: 1em; }


.profile_SB > header { display: flex; align-items: start; gap: 1em; }

.profile_SB #acname { font-size: 2.5em; font-weight: bold; flex: 1 0 auto; }
.profile_SB .btn-grad { min-width: 4em; padding: .5em 1em; }
.profile_SB .btn-grad.pressed { cursor: unset; }


.profile_SB #info-school-class { font-size: 2em; color: var(--theme-col); }
/* .profile_SB #schoolname {} */
/* .profile_SB #classname {} */

.profile_SB #info-sticker { display:flex; margin: .5em 0; }
.profile_SB #sticker-box { border: 1px var(--theme-col) solid; border-radius: 1.5em; 
    display: flex; align-items: center; gap: 1em;
    width: fit-content; min-width: 25%; padding: .5em 2em; }
.profile_SB #sticker { --w: 5em; /*background: lightblue;*/
    width: var(--w); height: var(--w); border-radius: var(--w);  
    object-fit: contain; }
.profile_SB #x { font-size: 2em; }
.profile_SB #qty { font-size: 2.5em; }
.profile_SB #x, .profile_SB #qty { --ol: #960;
    color: #fdfcc7;
	text-shadow: 
        -1px -1px 0 var(--ol),
		 1px -1px 0 var(--ol),
		-1px  1px 0 var(--ol),
		 1px  1px 0 var(--ol);
}

.popup > #btn-x {
	box-sizing: border-box;
	width: var(--size-x); height: var(--size-x);
	background: linear-gradient(var(--col-x-bg), var(--col-x-bg)) padding-box,
				linear-gradient(to bottom, #f6f3bf, #b89962) border-box;
	border: .5em solid transparent;
	border-radius: 50em;
	outline: var(--border);
}
.profile_SB #info-sticker > #btn-help {--w: 2em; --bg-1:#696; --bg-2: #9c0;
    box-sizing: border-box;
    background: linear-gradient(var(--bg-1),var(--bg-2)) padding-box,
				linear-gradient(var(--bg-2),var(--bg-1)) border-box;
	border: .25em solid transparent;
    outline: .25em white solid;
    color: white; font-weight: bold;
    width: var(--w); height: var(--w); border-radius: var(--w);
    display: flex; place-content: center; align-items: center;
    align-self: end; margin: .5em; }
.profile_SB #btn-sbrank { /*background: orange; color: white; border-radius: .5em;*/
    display: inline-block; font-size: 1.5em; text-align: center;
    min-width: 4em; padding: .5em 1em; margin-left: auto; align-self: end; }


.profile_SB > footer { flex: 1; overflow: hidden;
    border: .5em solid rgba(var(--theme-rgb), 1.0); border-radius: 1em; }

.profile_SB #table-con { background: white; height: 100%; overflow-y: auto; }
.profile_SB table#scores { width: 100%; height: 100%; border-collapse: collapse; }
/* .profile_SB table#scores tbody {} */
/* .profile_SB table#scores tr:nth-child(odd) { background: white; } */
.profile_SB table#scores tr:nth-child(even) { background: rgba(var(--theme-rgb), .125); }
.profile_SB table#scores tr { height: 3em; }
.profile_SB table#scores tr > * { font-size: 1.75em; text-align: center; border: none; }
.profile_SB table#scores tr.spacer-row { background: lightgrey; }

.btn-grad.orange { background: linear-gradient(rgb(255, 209, 124), orange); }